import { default as default_2 } from 'react';

declare class Accent extends AugmentedFormulaNodeBase {
    id: string;
    label: string;
    base: AugmentedFormulaNode;
    type: "accent";
    constructor(id: string, label: string, base: AugmentedFormulaNode);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, label, base, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        label?: string;
        base?: AugmentedFormulaNode;
    }): Accent;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

declare class Aligned extends AugmentedFormulaNodeBase {
    id: string;
    body: AugmentedFormulaNode[][];
    type: "array";
    constructor(id: string, body: AugmentedFormulaNode[][]);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, body, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        body?: AugmentedFormulaNode[][];
    }): Aligned;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

declare class AugmentedFormula {
    children: AugmentedFormulaNode[];
    private idToNode;
    constructor(children: AugmentedFormulaNode[]);
    toLatex(mode: LatexMode): string;
    toLatexRanges(mode: LatexMode): LatexRange;
    findNode(id: string): AugmentedFormulaNode | null;
    equals(other: AugmentedFormula): boolean;
    toStyledRanges(): FormulaLatexRanges;
}

declare type AugmentedFormulaNode = Script | Fraction | MathSymbol | Color | Group | Box | Brace | Text_2 | Space | Aligned | Root | Accent | Op | Strikethrough | Variable_2 | Matrix | Delimited;

declare abstract class AugmentedFormulaNodeBase {
    id: string;
    _parent: AugmentedFormulaNode | null;
    _leftSibling: AugmentedFormulaNode | null;
    _rightSibling: AugmentedFormulaNode | null;
    /**
     * The CSS ID assigned to this node's DOM element during variable processing.
     * This corresponds to the \cssId{} wrapper in the rendered LaTeX.
     * Set by processVariables when wrapping elements with cssId.
     */
    cssId: string | null;
    constructor(id: string);
    protected latexWithId(mode: LatexMode, elements: RangeElement[]): RangeElement[];
    get ancestors(): AugmentedFormulaNode[];
    contains(id: string): boolean;
    abstract toLatex(mode: LatexMode, offset: number): LatexRange;
    abstract get children(): AugmentedFormulaNode[];
    abstract toStyledRanges(): FormulaLatexRangeNode[];
}

export declare const BayesProbabilityChart: default_2.FC<BayesProbabilityChartProps>;

declare interface BayesProbabilityChartProps {
    context: IContext;
}

declare class Box extends AugmentedFormulaNodeBase {
    id: string;
    borderColor: string;
    backgroundColor: string;
    body: AugmentedFormulaNode;
    type: "box";
    constructor(id: string, borderColor: string, backgroundColor: string, body: AugmentedFormulaNode);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, borderColor, backgroundColor, body, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        borderColor?: string;
        backgroundColor?: string;
        body?: AugmentedFormulaNode;
    }): Box;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

declare class Brace extends AugmentedFormulaNodeBase {
    id: string;
    over: boolean;
    base: AugmentedFormulaNode;
    type: "brace";
    constructor(id: string, over: boolean, base: AugmentedFormulaNode);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, over, base, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        over?: boolean;
        base?: AugmentedFormulaNode;
    }): Brace;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

declare class Color extends AugmentedFormulaNodeBase {
    id: string;
    color: string;
    body: AugmentedFormulaNode[];
    type: "color";
    constructor(id: string, color: string, body: AugmentedFormulaNode[]);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, color, body, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        color?: string;
        body?: AugmentedFormulaNode[];
    }): Color;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

export declare class ComputationStore {
    accessor variables: Map<string, IVariable>;
    accessor hoverStates: Map<string, boolean>;
    accessor dragStates: Map<string, boolean>;
    accessor nodeHoverStates: Map<string, boolean>;
    accessor formulaHoverStates: Map<string, boolean>;
    private formulaHoverCallbacks;
    accessor formulaNodeMapping: Map<string, string>;
    accessor nodeFormulaMapping: Map<string, string>;
    accessor formulaTrees: Map<string, AugmentedFormula>;
    accessor formulaRenderSpecs: Map<string, RenderSpec | null>;
    accessor formulaSuppressEditorUpdate: Map<string, boolean>;
    accessor formulaStyledRangesOverride: Map<string, FormulaLatexRanges | null>;
    accessor semantics: ISemantics | null;
    accessor formulas: IFormula[];
    accessor environment: IEnvironment | null;
    accessor variableRolesChanged: number;
    accessor isDragging: boolean;
    accessor variableDimensions: Map<string, {
        x: number;
        y: number;
        width: number;
        height: number;
    }>;
    accessor injectedDefaultCSS: Map<string, string>;
    accessor injectedHoverCSS: Map<string, string>;
    accessor stepping: boolean;
    /** All collected steps from the latest semantics execution */
    accessor steps: ICollectedStep[];
    /** Current step index being viewed (0-based) */
    accessor currentStepIndex: number;
    /** Error message if step collection failed */
    accessor stepError: string | null;
    /**
     * Separate storage for step mode values - completely isolated from main variables.
     * Only components observing stepValues will re-render when step values change.
     * This is similar to how plot data (lines, surfaces) is stored separately.
     */
    accessor stepValues: Map<string, IValue>;
    /**
     * Version counter for step values - incremented when stepValues changes.
     * Components can observe this to know when to re-read stepValues.
     */
    accessor stepValuesVersion: number;
    /**
     * Data points collected during step sampling.
     * Maps graph ID to array of {x, y} points in execution order.
     * Used by visualizations to show accumulated points based on step progress.
     */
    accessor stepDataPointMap: Map<string, IDataPoint[]>;
    private evaluationFunction;
    isStepMode(): boolean;
    setStepping(enabled: boolean): void;
    /** Get the current step being viewed */
    get currentStep(): ICollectedStep | undefined;
    /** Get the total number of collected steps */
    get totalSteps(): number;
    /** Check if we're at the first step */
    get isAtStart(): boolean;
    /** Check if we're at the last step */
    get isAtEnd(): boolean;
    /** Get progress as a percentage (0-100) */
    get stepProgress(): number;
    /**
     * Set the collected steps from semantics execution.
     * Resets the current step index to 0 and updates stepValues immediately.
     */
    setSteps(steps: ICollectedStep[]): void;
    /**
     * Navigate to the next step.
     * Does nothing if already at the last step.
     */
    nextStep(): void;
    /**
     * Navigate to the previous step.
     * Does nothing if already at the first step.
     */
    prevStep(): void;
    /**
     * Navigate to a specific step by index.
     * Clamps the index to valid range.
     */
    goToStep(index: number): void;
    /**
     * Go to the first step.
     */
    goToStart(): void;
    /**
     * Go to the last step.
     */
    goToEnd(): void;
    /**
     * Set an error message for step collection.
     */
    setStepError(error: string | null): void;
    /**
     * Reset step-related state only.
     */
    resetSteps(): void;
    /**
     * Get the view for a specific formula from the current step.
     * Returns the view for the given formulaId, or the default view (empty string key).
     *
     * @param formulaId - The formula ID to get the view for
     * @returns The view for the formula, or undefined if not found
     */
    getViewForFormula(formulaId: string): IView | undefined;
    /**
     * Check whether a step label key maps to a known variable id.
     */
    private isVariableLabelKey;
    /**
     * Collect variable IDs from step label entries by matching labels keys to known varIds.
     * Keys that do not match a variable are treated as expression labels.
     */
    private getVariableIdsFromLabels;
    /**
     * Extract step value entries from labels where:
     * 1) the labels key is a known variable id, and
     * 2) the labels value is a runtime value (number or set), not a string-only display label.
     */
    private getVariableValueEntriesFromLabels;
    private isRuntimeStepValue;
    /**
     * Get all variable values from the current step.
     * Merges values from all formula views if multi-formula step.
     *
     * @returns Map of variable ID to value
     */
    getCurrentStepValues(): Map<string, IValue>;
    /**
     * Get active variable IDs grouped by formula from the current step.
     * Used for applying visual cues to updated variables.
     *
     * @returns Map of formula ID to Set of variable IDs
     */
    getActiveVariables(): Map<string, Set<string>>;
    get evaluateFormula(): EvaluationFunction | null;
    /**
     * Get the display value for a variable.
     * In step mode, returns the value from stepValues (isolated step data).
     * In normal mode, returns the value from the main variables map.
     *
     * @param varId - The variable ID
     * @returns The value to display, or undefined if not found
     */
    getDisplayValue(varId: string): IValue | undefined;
    /**
     * Update stepValues from the current step's data.
     * This is called when navigating steps or when input changes in step mode.
     * Only updates the stepValues map - does NOT touch the main variables map.
     */
    updateStepValues(): void;
    /**
     * Sample the current step and update stepValues.
     * Used when input variables change in step mode.
     * This re-runs the semantics to get fresh values for the current step.
     */
    refreshCurrentStepValues(): void;
    /**
     * Create a snapshot copy of all variables for sampling/computation.
     * Uses toJS to create deep copies that won't affect the original observables.
     */
    getVariablesSnapshot(): Record<string, IVariable>;
    setSemantics(config: ISemantics | null): void;
    reset(): void;
    /**
     * Store a processed formula tree for later DOM element lookup
     * @param formulaId - The formula ID
     * @param tree - The AugmentedFormula tree with cssId values assigned
     */
    setFormulaTree(formulaId: string, tree: AugmentedFormula): void;
    /**
     * Get the stored formula tree for a formula
     * @param formulaId - The formula ID
     * @returns The AugmentedFormula tree or undefined if not found
     */
    getFormulaTree(formulaId: string): AugmentedFormula | undefined;
    /**
     * Clear all stored formula trees
     */
    clearFormulaTrees(): void;
    /**
     * Get the render spec for a formula
     * @param formulaId - The formula ID
     * @returns The RenderSpec or null if not found
     */
    getFormulaRenderSpec(formulaId: string): RenderSpec | null;
    /**
     * Get the augmented formula for a formula ID
     * @param formulaId - The formula ID
     * @returns The AugmentedFormula or a default empty one
     */
    getAugmentedFormula(formulaId: string): AugmentedFormula;
    /**
     * Get the suppress editor update flag for a formula
     * @param formulaId - The formula ID
     * @returns Whether editor updates should be suppressed
     */
    getSuppressEditorUpdate(formulaId: string): boolean;
    /**
     * Get the styled ranges override for a formula
     * @param formulaId - The formula ID
     * @returns The styled ranges override or null
     */
    getStyledRangesOverride(formulaId: string): FormulaLatexRanges | null;
    /**
     * Get the LaTeX representation with styling for a formula
     * @param formulaId - The formula ID
     * @returns The LaTeX string with styling
     */
    getLatexWithStyling(formulaId: string): string;
    /**
     * Get the LaTeX representation without styling for a formula
     * @param formulaId - The formula ID
     * @returns The LaTeX string without styling
     */
    getLatexWithoutStyling(formulaId: string): string;
    /**
     * Get the styled ranges for a formula
     * @param formulaId - The formula ID
     * @returns The styled ranges (override or computed from formula)
     */
    getStyledRanges(formulaId: string): FormulaLatexRanges;
    /**
     * Get the align IDs for a formula (for aligned environments)
     * @param formulaId - The formula ID
     * @returns 2D array of IDs or null if not an aligned formula
     */
    getAlignIds(formulaId: string): string[][] | null;
    /**
     * Get the align column IDs for a formula
     * @param formulaId - The formula ID
     * @returns 2D array of column IDs or null if not an aligned formula
     */
    getAlignColumnIds(formulaId: string): string[][] | null;
    /**
     * Get the align row internal targets for a formula
     * @param formulaId - The formula ID
     * @returns Array of row targets or null if not an aligned formula
     */
    getAlignRowInternalTargets(formulaId: string): {
        id: string;
        col: number;
    }[][] | null;
    /**
     * Get the MathML representation for a formula
     * @param formulaId - The formula ID
     * @returns Promise resolving to the MathML string
     */
    getMathML(formulaId: string): Promise<string>;
    /**
     * Update a formula with a new AugmentedFormula
     * @param formulaId - The formula ID
     * @param newFormula - The new AugmentedFormula
     */
    updateFormula(formulaId: string, newFormula: AugmentedFormula): void;
    /**
     * Restore formula state from LaTeX string
     * @param formulaId - The formula ID
     * @param latex - The LaTeX string to parse
     */
    restoreFormulaState(formulaId: string, latex: string): void;
    /**
     * Override the styled ranges for a formula
     * @param formulaId - The formula ID
     * @param styledRanges - The styled ranges to set (or null to clear)
     */
    overrideStyledRanges(formulaId: string, styledRanges: FormulaLatexRanges | null): void;
    /**
     * Set the suppress editor update flag for a formula
     * @param formulaId - The formula ID
     * @param suppress - Whether to suppress editor updates
     */
    setSuppressEditorUpdate(formulaId: string, suppress: boolean): void;
    /**
     * Initialize a formula store for a given ID with optional initial LaTeX
     * @param formulaId - The formula ID
     * @param formulaLatex - Optional initial LaTeX string
     */
    initializeFormula(formulaId: string, formulaLatex?: string): void;
    /**
     * Remove a formula and all its associated state
     * @param formulaId - The formula ID to remove
     */
    removeFormula(formulaId: string): void;
    /**
     * Check if a formula exists
     * @param formulaId - The formula ID
     * @returns Whether the formula exists
     */
    hasFormula(formulaId: string): boolean;
    /**
     * Update fresh dimensions for a variable (called during variable node creation/update)
     * @param varId - The variable ID
     * @param dimensions - The position and dimensions of the variable element
     */
    setVariableDimensions(varId: string, dimensions: {
        x: number;
        y: number;
        width: number;
        height: number;
    }): void;
    /**
     * Get fresh dimensions for a variable
     * @param varId - The variable ID
     * @returns The dimensions or undefined if not found
     */
    getVariableDimensions(varId: string): {
        x: number;
        y: number;
        width: number;
        height: number;
    } | undefined;
    setVariableRolesChanged(value: number): void;
    setFormulas(formulas: IFormula[]): void;
    setEnvironment(environment: IEnvironment): void;
    setValue(id: string, value: number): boolean | undefined;
    setSetValue(id: string, set: (string | number)[]): boolean;
    /**
     * Set a step value directly in the stepValues map.
     * Used by the Controller when applying step state.
     * Does NOT touch the main variables map.
     */
    setStepValue(id: string, value: IValue): void;
    setDragging(dragging: boolean): void;
    setVariableDrag(varId: string, isDragging: boolean): void;
    setVariableHover(varId: string, isHovered: boolean): void;
    isVariableDragging(varId: string): boolean;
    isVariableHovered(varId: string): boolean;
    isVariableHighlighted(varId: string): boolean;
    get highlightedVarIds(): string[];
    /**
     * Set the mapping between formula IDs and visualization node IDs
     */
    setFormulaNodeMapping(mapping: Record<string, string>): void;
    /**
     * Set hover state for a visualization node
     * This will trigger the corresponding formula to highlight
     */
    setNodeHover(nodeId: string, isHovered: boolean): void;
    /**
     * Get hover state for a visualization node
     */
    getNodeHover(nodeId: string): boolean;
    /**
     * Set hover state for a formula
     * This notifies visualizations that a formula is being hovered
     */
    setFormulaHover(formulaId: string, isHovered: boolean): void;
    /**
     * Get hover state for a formula
     */
    getFormulaHover(formulaId: string): boolean;
    /**
     * Subscribe to formula hover changes
     * Returns an unsubscribe function
     */
    onFormulaHoverChange(callback: (formulaId: string, isHovered: boolean) => void): () => void;
    accessor refreshCallback: (() => void) | null;
    setRefreshCallback(callback: (() => void) | null): void;
    setComputation(): Promise<void>;
    private createEvaluator;
    addVariable(id: string, variableDefinition?: Partial<IVariable>): void;
    setVariableInput(id: string, input: "drag" | "inline" | undefined): void;
    /**
     * Trigger computation by running the manual function.
     * The manual function directly mutates observable variables via proxy.
     */
    runComputation(): void;
    getDebugState(): {
        variables: {
            id: string;
            value: IValue | undefined;
            input: IInput | undefined;
        }[];
        hasFunction: boolean;
    };
    /**
     * Run the semantics function once with current values and collect all step() calls.
     * This follows the reactive data collection pattern similar to sample2DPoint/sample3DPoint.
     * Also stores the dataPointMap for step-dependent point visualization.
     *
     * @returns Array of collected steps from the semantics execution
     */
    sampleSteps(): ICollectedStep[];
    /**
     * Extract a 2D point from dataPoints map.
     * @param dataPointMap - Map of graph ID to data points
     * @param graphId - The graph ID to look up
     * @returns The first valid {x, y} point or null
     */
    private extractPoint2D;
    /**
     * Extract a 3D point from dataPoints map.
     * @param dataPoints - Map of graph ID to data points
     * @param graphId - The graph ID to look up
     * @returns The first valid {x, y, z} point or null
     */
    private extractPoint3D;
    /**
     * Run semantics function with given variables and extract a 2D point.
     * @param variables - Variable values to use
     * @param graphId - Graph ID to match data2d() calls
     * @returns The {x, y} point or null
     */
    private computeAndExtract2D;
    /**
     * Run semantics function with given variables and extract a 3D point.
     * @param variables - Variable values to use
     * @param graphId - Graph ID to match data3d() calls
     * @returns The {x, y, z} point or null
     */
    private computeAndExtract3D;
    /**
     * Generic helper to sample the semantic function across a parameter range.
     * Varies a single parameter across its range and collects points using the provided extractor.
     *
     * @param parameter - The variable to vary during sampling
     * @param range - The range to sample [min, max]
     * @param samples - Number of samples
     * @param graphId - Graph ID to match data calls
     * @param extractor - Function to extract point from variables (computeAndExtract2D or computeAndExtract3D)
     * @returns Array of extracted points
     */
    private sampleWithParameter;
    /**
     * Run the semantic function once with current values to get the current 2D point.
     * Reads x, y values from the dataPoints (from explicit data2d() calls).
     *
     * @param graphId - Graph ID to match data2d() calls
     * @returns The current {x, y} point or null
     */
    sample2DPoint(graphId: string): {
        x: number;
        y: number;
    } | null;
    /**
     * Run the semantic function once with current values to get the current 3D point.
     * Reads x, y, z values from the dataPoints (from explicit data3d() calls).
     *
     * @param graphId - Graph ID to match graph() calls
     * @returns The current {x, y, z} point or null
     */
    sample3DPoint(graphId: string): {
        x: number;
        y: number;
        z: number;
    } | null;
    /**
     * Sample the semantic function across a parameter range to collect 2D line data.
     * Reads x, y values from the dataPoints (from explicit data2d() calls).
     *
     * @param parameter - The variable to vary during sampling
     * @param range - The range to sample [min, max]
     * @param samples - Number of samples (default 100)
     * @param graphId - Graph ID to match data2d() calls
     * @returns Array of {x, y} points
     */
    sample2DLine(parameter: string, range: [number, number], samples: number | undefined, graphId: string): {
        x: number;
        y: number;
    }[];
    /**
     * Sample the semantic function across a parameter range to collect 3D line data.
     * Reads x, y, z values from the dataPoints (from explicit data3d() calls).
     *
     * @param parameter - The variable to vary during sampling
     * @param range - The range to sample [min, max]
     * @param samples - Number of samples (default 100)
     * @param graphId - Graph ID to match graph() calls
     * @returns Array of {x, y, z} points
     */
    sample3DLine(parameter: string, range: [number, number], samples: number | undefined, graphId: string): {
        x: number;
        y: number;
        z: number;
    }[];
    /**
     * Sample the semantic function across a 2D parameter grid to collect surface data.
     * Reads x, y, z values from the dataPoints (from explicit data3d() calls).
     *
     * @param parameters - The two variables to vary during sampling [param1, param2]
     * @param ranges - The ranges for each parameter [[min1, max1], [min2, max2]]
     * @param samples - Number of samples per dimension (default 50)
     * @param graphId - Graph ID to match graph() calls
     * @returns Array of {x, y, z} points
     */
    sampleSurface(parameters: [string, string], ranges: [[number, number], [number, number]], samples: number | undefined, graphId: string): {
        x: number;
        y: number;
        z: number;
    }[];
    getVariables(): Record<string, IVariable>;
}

/**
 * User-facing configuration type.
 */
export declare type Config = Omit<IEnvironment, "formulas"> & {
    formulas?: IFormula[];
};

declare type ContentChange = {
    type: "delete";
    from: number;
    to: number;
} | {
    type: "insert";
    from: number;
    to: number;
    inserted: string;
};

/**
 * Public API - creates a new Formulize instance with its own isolated stores.
 */
declare function create(config: Config): Promise<Instance>;

/**
 * Factory function to create a new ComputationStore instance.
 * Used for creating scoped stores per Provider.
 */
export declare function createComputationStore(): ComputationStore;

declare class Delimited extends AugmentedFormulaNodeBase {
    id: string;
    left: string;
    right: string;
    body: AugmentedFormulaNode[];
    type: "delimited";
    constructor(id: string, left: string, right: string, body: AugmentedFormulaNode[]);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, left, right, body, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        left?: string;
        right?: string;
        body?: AugmentedFormulaNode[];
    }): Delimited;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

declare type DisplayMode = "symbol" | "value" | "both" | "withUnits";

/**
 * EmbeddedFormula - A lightweight formula component for embedding within visualizations.
 *
 * Unlike InlineFormula, this component:
 * - Is designed to be embedded within SVG foreignObject or other visualization contexts
 * - Supports bidirectional hover highlighting with the visualization
 * - Has a more compact default scale
 * - Triggers formula hover events for visualization synchronization
 * - Optionally supports abbreviated display that expands on hover
 *
 * @example Basic usage
 * ```tsx
 * <foreignObject x={100} y={50} width={200} height={50}>
 *   <EmbeddedFormula
 *     id="formula_z_1_1"
 *     highlightOnHover={true}
 *   />
 * </foreignObject>
 * ```
 *
 * @example With abbreviation (expands on hover)
 * ```tsx
 * <EmbeddedFormula
 *   id="formula_h_1_1"
 *   abbreviation="h_1^{(1)}"  // Shows this by default
 *   // On hover, shows full formula looked up by id
 * />
 * ```
 */
export declare const EmbeddedFormula: default_2.FC<EmbeddedFormulaProps>;

declare interface EmbeddedFormulaProps {
    /** Formula ID to render (looks up from environment) */
    id: string;
    /** Optional: Direct LaTeX string (overrides id lookup) */
    latex?: string;
    /**
     * Optional: Abbreviated LaTeX to show by default.
     * If provided, the formula will show this abbreviated version normally,
     * and expand to show the full formula on hover.
     * The full formula is either the `latex` prop or looked up by `id`.
     */
    abbreviation?: string;
    /** Font scale (default: 0.7 for compact display) */
    scale?: number;
    /** Whether to highlight when formula is hovered via hover system */
    highlightOnHover?: boolean;
    /** Whether clicking can pin the formula open (default: true) */
    allowPinning?: boolean;
    /** Callback when this formula is hovered */
    onHover?: (isHovered: boolean) => void;
    /** Optional class name */
    className?: string;
    /** Optional inline styles */
    style?: default_2.CSSProperties;
}

declare type EvaluationFunction = (variables: EvaluationFunctionInput) => Record<string, IValue>;

declare type EvaluationFunctionInput = Record<string, number | number[]>;

export declare const Formula: default_2.FC<FormulaComponentProps>;

declare interface FormulaComponentProps {
    id: string;
    className?: string;
    style?: default_2.CSSProperties;
}

export declare const FormulaGenerator: {
    /**
     * Generate formulas by iterating over specified ranges.
     *
     * @param spec - Object defining loop variables and their ranges
     * @param generator - Function that generates a formula for each combination
     * @returns Array of formulas
     *
     * @example
     * // Generate formulas for a 3-layer network with 4 units each
     * Formula.loop({ layer: [1, 3], unit: [1, 4] }, ({ layer, unit }) => ({
     *   id: `h_${unit}_${layer}`,
     *   latex: `h_{${unit}}^{(${layer})} = \\text{ReLU}(z_{${unit}}^{(${layer})})`,
     * }))
     *
     * @example
     * // Generate with explicit values
     * Formula.loop({ i: [1, 2, 3, 5, 8] }, ({ i }) => ({
     *   id: `fib_${i}`,
     *   latex: `F_{${i}}`,
     * }))
     */
    loop<T extends LoopSpec>(spec: T, generator: (context: LoopContext<T>, index: number) => IFormula): IFormula[];
    /**
     * Generate a single formula with template substitution.
     *
     * @param id - Formula ID (can include ${} placeholders)
     * @param latex - LaTeX string (can include ${} placeholders)
     * @param values - Object of values to substitute
     * @returns A single formula
     *
     * @example
     * Formula.template("kinetic_${n}", "K_{${n}} = \\frac{1}{2}m_{${n}}v_{${n}}^2", { n: 1 })
     */
    template(id: string, latex: string, values: Record<string, string | number>): IFormula;
    /**
     * Create a formula directly (identity function for consistency).
     */
    create(id: string, latex: string): IFormula;
};

declare type FormulaLatexRangeNode = StyledRange | UnstyledRange;

declare class FormulaLatexRanges {
    ranges: FormulaLatexRangeNode[];
    constructor(ranges: FormulaLatexRangeNode[]);
    private combineUnstyledRanges;
    getPositionRanges(position: number, includeEdges?: boolean): FormulaLatexRangeNode[];
    toLatex(): string;
    withContentChange(change: ContentChange, activeRanges: Set<string>): FormulaLatexRanges;
}

declare class Fraction extends AugmentedFormulaNodeBase {
    id: string;
    numerator: AugmentedFormulaNode;
    denominator: AugmentedFormulaNode;
    type: "frac";
    constructor(id: string, numerator: AugmentedFormulaNode, denominator: AugmentedFormulaNode);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, numerator, denominator, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        numerator?: AugmentedFormulaNode;
        denominator?: AugmentedFormulaNode;
    }): Fraction;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

export declare const getAllRegistered: () => string[];

export declare const getRegistered: (name: string) => React.ComponentType<{
    context: IContext;
}> | undefined;

declare class Group extends AugmentedFormulaNodeBase {
    id: string;
    body: AugmentedFormulaNode[];
    type: "group";
    constructor(id: string, body: AugmentedFormulaNode[]);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, body, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        body?: AugmentedFormulaNode[];
    }): Group;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

export declare type I2DConfig = I2DLine | I2DPoint;

/**
 * Base configuration for graph-based 2D visualizations.
 * Uses explicit data2d() calls in manual functions to collect coordinates.
 * @property: id - Graph ID to match data2d() calls in manual function (required)
 * @property: name - Display name for the legend
 * @property: showInLegend - Whether to show in legend
 */
declare interface I2DConfigBase {
    id: string;
    name?: string;
    showInLegend?: boolean;
}

/**
 * Line graph: samples over a parameter variable to create a 2D line/curve.
 * The manual function must call data2d(id, {x, y}) to provide coordinates.
 * @property: type - The type of object to graph
 * @property: parameter - The variable to vary during sampling (1 parameter for lines)
 * @property: range - Optional range to sample over the parameter (defaults to the variable's range)
 * @property: samples - Number of samples (default 100)
 * @property: color - Line color
 * @property: lineWidth - Line width
 * @property: interaction - Drag interaction: ["horizontal-drag" | "vertical-drag", variableName]
 */
export declare interface I2DLine extends I2DConfigBase {
    type: "line";
    parameter: string;
    range?: [number, number];
    samples?: number;
    color?: string;
    lineWidth?: number;
    interaction?: ["horizontal-drag" | "vertical-drag", string];
}

/**
 * Point graph: shows the current point without sampling (0 parameters).
 * The manual function must call data2d(id, {x, y}) to provide coordinates.
 * @property type - The type of object to graph
 * @property color - Marker color
 * @property size - Marker size
 * @property showLabel - Whether to show label
 * @property interaction - Drag interaction: ["horizontal-drag" | "vertical-drag", variableName]
 * @property stepId - Optional step ID that controls when this point appears during stepping.
 *                    When set, the point only appears after the step() call with matching id has been reached.
 * @property persistence - Controls point visibility during stepping (default: true):
 *                         true = point stays visible after its step (accumulate)
 *                         false = point only visible at that exact step
 */
export declare interface I2DPoint extends I2DConfigBase {
    type: "point";
    color?: string;
    size?: number;
    showLabel?: boolean;
    interaction?: ["horizontal-drag" | "vertical-drag", string];
    stepId?: string;
    persistence?: boolean;
}

/**
 * Line graph: samples over 1 parameter to create a 3D line
 * @property: type - The type of object to graph
 * @property: parameter - The variable to vary during sampling (1 parameter for lines)
 * @property: range - Optional range to sample over the parameter (defaults to the variable's range)
 * @property: samples - Number of samples (default 100)
 * @property: color - Line color
 * @property: width - Line width
 */
declare interface I3DLine extends IGraphBase {
    type: "line";
    parameter: string;
    range?: [number, number];
    samples?: number;
    color?: string;
    width?: number;
}

/**
 * Point graph: shows the current point without sampling
 * @property: type - The type of object to graph
 * @property: color - Marker color
 * @property: size - Marker size
 */
declare interface I3DPoint extends IGraphBase {
    type: "point";
    color?: string;
    size?: number;
}

/**
 * Surface graph: samples over 2 parameters to create a 3D surface
 * @property: type - The type of object to graph
 * @property: parameters - The variables to vary during sampling (2 parameters for surfaces)
 * @property: ranges - Optional ranges to sample over the parameters (defaults to the variables' ranges)
 * @property: samples - Number of samples for each parameter (default 50)
 * @property: color - Surface color or colorscale
 * @property: opacity - Surface opacity (0-1)
 * @property: showColorbar - Whether to show colorbar
 */
declare interface I3DSurface extends IGraphBase {
    type: "surface";
    parameters: [string, string];
    ranges?: [[number, number], [number, number]];
    samples?: number;
    color?: string | string[];
    opacity?: number;
    showColorbar?: boolean;
}

declare interface IButtonControl extends IControl {
    type: "button";
    code?: (variables: Record<string, any>) => void;
    label?: string;
}

declare interface ICheckboxControl extends IControl {
    type: "checkbox";
    availableElements: string[];
    orientation?: "horizontal" | "vertical";
}

/**
 * A collected step from reactive data collection during semantics execution.
 * Used by the new reactive step system (similar to plot2d/plot3d pattern).
 * @property index - Execution order (0, 1, 2...)
 * @property id - Optional step identifier (from second parameter of step() call)
 * @property description - The description text to display
 * @property labels - Record of label entries keyed by variable IDs or expression scopes
 * @property formulas - Optional per-formula views for multi-formula steps
 */
export declare interface ICollectedStep {
    index: number;
    id?: string;
    description: string;
    labels?: IStepLabels;
    formulas?: Record<string, IView>;
}

export declare interface IContext {
    variables: Record<string, number>;
    updateVariable: (variableName: string, value: number) => void;
    getVariable: (variableName: string) => number;
    /** Set hover state for a visualization node (triggers formula highlighting) */
    setNodeHover?: (nodeId: string, isHovered: boolean) => void;
    /** Get current hover state for a node */
    getNodeHover?: (nodeId: string) => boolean;
    /** Set hover state for a formula (for visualization to react to) */
    setFormulaHover?: (formulaId: string, isHovered: boolean) => void;
    /** Get current hover state for a formula */
    getFormulaHover?: (formulaId: string) => boolean;
    /** Subscribe to formula hover changes */
    onFormulaHoverChange?: (callback: (formulaId: string, isHovered: boolean) => void) => () => void;
    /** Custom configuration from the visualization config */
    config?: Record<string, unknown>;
}

declare interface IControl {
    id?: string;
    type: "slider" | "dropdown" | "checkbox" | "button" | "radio" | "set";
    variable?: string;
}

export declare type IControls = ISliderControl | IDropdownControl | ICheckboxControl | IButtonControl | IRadioControl | ISetControl;

export declare interface ICustom {
    type: "custom";
    id?: string;
    variables: string[];
    component?: string;
    styles?: Record<string, string>;
    update?: {
        onVariableChange?: boolean;
    };
    /** Custom configuration passed to the component */
    config?: Record<string, unknown>;
}

/**
 * 2D coordinate values for data2d() calls.
 * @property {number} x - X coordinate value
 * @property {number} y - Y coordinate value
 */
declare interface IData2D {
    x: number;
    y: number;
}

/**
 * Function to store 2D data points for visualization.
 * @param id - Unique identifier for the graph/visualization
 * @param values - Explicit coordinate values {x, y}
 * @example data2d("curve", {x: vars.x, y: vars.y})
 */
declare type IData2DFn = (id: string, values: IData2D) => void;

/**
 * 3D coordinate values for data3d() calls.
 * @property {number} x - X coordinate value
 * @property {number} y - Y coordinate value
 * @property {number} z - Z coordinate value
 */
declare interface IData3D {
    x: number;
    y: number;
    z: number;
}

/**
 * Function to store 3D data points for visualization.
 * @param id - Unique identifier for the graph/visualization
 * @param values - Explicit coordinate values {x, y, z}
 * @example data3d("surface", {x: vars.x, y: vars.y, z: vars.z})
 */
declare type IData3DFn = (id: string, values: IData3D) => void;

/**
 * Types for data2d() and data3d() functions used in manual computation.
 * Allows imperative collection of visualization data points.
 */
/**
 * A snapshot of coordinate values at the time of a data2d/data3d call.
 */
declare type IDataPoint = Record<string, number>;

declare interface IDropdownControl extends IControl {
    type: "dropdown";
    options: Array<{
        value: string;
        label: string;
    }>;
    placeholder?: string;
}

export declare interface IEnvironment {
    formulas: IFormula[];
    variables?: IVariablesUserInput;
    semantics?: ISemantics;
    visualizations?: IVisualization[];
    controls?: IControls[];
    stepping?: boolean;
    fontSize?: number;
    labelFontSize?: number;
    labelNodeStyle?: React.CSSProperties;
    formulaNodeStyle?: React.CSSProperties;
}

export declare interface IFormula {
    id: string;
    latex: string;
}

declare type IGraph = I3DLine | I3DSurface | I3DPoint;

/**
 * Base configuration for graph-based visualizations.
 * All graphs read x, y, z values from explicit graph() calls: graph("id", {x, y, z})
 * @property: id - Graph ID to match graph() calls in manual function. Required to link this visualization to the corresponding graph() call.
 * @property: name - Display name for the legend
 * @property: showInLegend - Whether to show in legend
 */
declare interface IGraphBase {
    id: string;
    name?: string;
    showInLegend?: boolean;
}

/**
 * The input type for a variable.
 * - "drag" variables allow users to drag/slide to change the value.
 * - "inline" variables display an editable text input for direct value entry.
 * Variables without input are either constants or computed by the manual function.
 */
declare type IInput = "drag" | "inline";

/**
 * Math-mode number formatter helper for step labels.
 * Example: `latex(value).precision(2)` or `latex(value).sigfigs(4)`.
 */
declare type ILatexFn = (value: number) => ILatexFormatter;

/**
 * Formatter object returned by `latex(value)`.
 * Terminal methods return plain strings, so chaining is intentionally not possible.
 */
declare interface ILatexFormatter {
    precision: (precision: number) => string;
    sigfigs: (sigFigs: number) => string;
}

/**
 * InlineFormula - Renders a formula inline within text
 *
 * Usage:
 * ```tsx
 * <Provider config={config}>
 *   <p>The formula <InlineFormula id="kinetic-energy" /> shows energy.</p>
 * </Provider>
 * ```
 */
export declare const InlineFormula: default_2.FC<InlineFormulaProps>;

declare interface InlineFormulaProps {
    /** Formula ID to render (looks up from environment) */
    id: string;
    /** Optional class name */
    className?: string;
    /** Optional inline styles */
    style?: default_2.CSSProperties;
    /** Font scale relative to surrounding text (default: 1) */
    scale?: number;
}

/**
 * InlineVariable - Renders a variable inline within text
 *
 * Usage:
 * ```tsx
 * <Provider config={config}>
 *   <p>The mass <InlineVariable id="m" display="withUnits" /> affects energy.</p>
 * </Provider>
 * ```
 */
export declare const InlineVariable: default_2.FC<InlineVariableProps>;

declare interface InlineVariableProps {
    /** Variable ID to render */
    id: string;
    /** Display mode: "symbol" (m), "value" (2), "both" (m = 2), "withUnits" (2 kg) */
    display?: DisplayMode;
    /** Optional class name */
    className?: string;
    /** Optional inline styles */
    style?: default_2.CSSProperties;
    /** Font scale relative to surrounding text (default: 1) */
    scale?: number;
}

/**
 * Interface for the object returned by Formulize.create()
 */
export declare interface Instance {
    environment: IEnvironment;
    computationStore: ComputationStore;
    getVariable: (name: string) => IVariable;
    setVariable: (name: string, value: number) => boolean;
    update: (config: Config) => Promise<Instance>;
    destroy: () => void;
}

/**
 * Plot2D visualization configuration.
 * @property type - The type of the plot.
 * @property id - The id of the plot.
 * @property title - The title of the plot.
 * @property xAxisLabel - The label for the x-axis (cosmetic only, does not affect graphing).
 * @property xAxisVar - The variable to bind to x-axis for hover highlighting (optional)
 * @property xRange - The range of the x-axis.
 * @property xAxisInterval - The interval of the x-axis.
 * @property xAxisPos - The position of the x-axis. "center" = x-axis at y=0, "edge" = x-axis at bottom
 * @property xGrid - The grid visibility for the x-axis.
 * @property yAxisLabel - The label for the y-axis (cosmetic only, does not affect graphing).
 * @property yAxisVar - The variable to bind to y-axis for hover highlighting (optional)
 * @property yRange - The range of the y-axis.
 * @property yAxisInterval - The interval of the y-axis.
 * @property yAxisPos - The position of the y-axis.
 * @property yGrid - The grid visibility for the y-axis.
 * @property vectors - The vectors for the plot.
 * @property graphs - Graph-based visualizations using data collected by data2d() calls.
 *                    Points with stepId will only appear during stepping when that step is reached.
 * @property width - The width of the plot.
 * @property height - The height of the plot.
 * @property tickFontSize - The font size of the ticks.
 * @property interaction - The interaction of the plot.
 */
export declare interface IPlot2D {
    type: "plot2d";
    id?: string;
    title?: string;
    xAxisLabel?: string;
    xAxisVar?: string;
    xRange?: [number, number];
    xAxisInterval?: number;
    xAxisPos?: "center" | "edge";
    xLabelPos?: "center" | "right";
    xGrid?: "show" | "hide";
    yAxisLabel?: string;
    yAxisVar?: string;
    yRange?: [number, number];
    yAxisInterval?: number;
    yAxisPos?: "center" | "edge";
    yLabelPos?: "center" | "top";
    yGrid?: "show" | "hide";
    vectors?: IVector[];
    graphs?: I2DConfig[];
    width?: number | string;
    height?: number | string;
    tickFontSize?: number;
    interaction?: ["horizontal-drag" | "vertical-drag", string];
}

export declare interface IPlot3D {
    type: "plot3d";
    id?: string;
    title?: string;
    xAxis?: string;
    xRange?: [number, number];
    yAxis?: string;
    yRange?: [number, number];
    zVar?: string;
    zRange?: [number, number];
    width?: number | string;
    height?: number | string;
    plotType?: "scatter" | "surface" | "line" | "mesh";
    showCurrentPointInLegend?: boolean;
    /**
     * Graph-based visualizations using data collected by graph() calls in manual functions.
     * The visualization will sample the manual function and render the collected graph data.
     */
    graphs?: IGraph[];
}

declare interface IRadioControl extends IControl {
    type: "radio";
    orientation?: "horizontal" | "vertical";
}

/**
 * Semantics function type.
 * Receives a context object with variable values and data collection functions.
 * Users can destructure only what they need: ({ vars, data2d }) => { ... }
 */
export declare type ISemantics = (ctx: ISemanticsContext) => void;

/**
 * Context object passed to semantics functions.
 * Users can destructure only the properties they need.
 * @property vars - Proxy object for reading/writing variable values
 * @property data2d - Function to collect 2D visualization data points: data2d("id", {x, y})
 * @property data3d - Function to collect 3D visualization data points: data3d("id", {x, y, z})
 * @property step - Function for step-through debugging breakpoints
 * @property latex - Number formatter for math-mode step labels: latex(value).precision(2)
 */
export declare interface ISemanticsContext {
    vars: Record<string, any>;
    data2d: IData2DFn;
    data3d: IData3DFn;
    step: IStepFn;
    latex: ILatexFn;
}

declare interface ISetControl extends IControl {
    type: "set";
    availableElements: string[];
    color?: string;
    maxHeight?: number;
}

declare interface ISliderControl extends IControl {
    type: "slider";
    orientation?: "horizontal" | "vertical";
    showValue?: boolean;
}

export declare const isRegistered: (name: string) => boolean;

/**
 * Step function type for step-through debugging.
 */
declare type IStepFn = (config: IStepInput, blockId?: string) => void;

/**
 * Step input: either a single view (applies to all formulas) or multiple views keyed by formulaId
 * - Single: { description?: "...", labels?: {...} }
 * - Multi-formula: { "formula-id": { description?: "...", labels?: {...} }, "other-id": { ... } }
 */
export declare type IStepInput = IView | Record<string, IView>;

/**
 * Step label entries keyed by LaTeX.
 * Key can be either a variable id (existing variable label route)
 * or an expression scope (expression highlight + expression label route).
 */
export declare type IStepLabels = Record<string, IStepLabelValue>;

/**
 * Label entry value for step labels.
 * Can be a runtime numeric/set value or a custom LaTeX/text string.
 * `null`/`undefined` means "highlight only" for expression labels (no label node).
 */
export declare type IStepLabelValue = IValue | string | null | undefined;

export declare type IValue = number | (string | number)[];

export declare interface IVariable {
    value?: IValue;
    dataType?: "scalar" | "vector" | "matrix" | "set";
    dimensions?: number[];
    units?: string;
    name?: string;
    precision?: number;
    sigFigs?: number;
    description?: string;
    range?: [number, number];
    step?: number;
    options?: string[];
    key?: string;
    latexDisplay?: "name" | "value";
    labelDisplay?: "name" | "value" | "svg" | "none";
    svgPath?: string;
    svgContent?: VariableSVGContent;
    svgSize?: {
        width: number;
        height: number;
    };
    svgMode?: "replace" | "append";
    defaultCSS?: string;
    hoverCSS?: string;
    input?: IInput;
}

/**
 * Variable input format. Users can specify variables as:
 * - A number: `a: 0.1` (becomes a constant with that value)
 * - An IVariable object: `W: { input: "drag" }` (for interactive variables)
 */
export declare type IVariableInput = number | IVariable;

/**
 * User-facing variables config (for environment).
 * Uses "default" instead of "value" for better clarity in user-facing API.
 */
export declare type IVariablesUserInput = Record<string, number | IVariableUserInput>;

/**
 * User-facing variable definition that uses "default" instead of "value"
 */
export declare type IVariableUserInput = Omit<IVariable, "value"> & {
    default?: IValue;
};

declare interface IVector {
    x: (string | number)[];
    y: (string | number)[];
    shape?: "arrow" | "dash" | "point";
    color?: string;
    lineWidth?: number;
    markerSize?: number;
    name?: string;
    draggable?: boolean;
    showlegend?: boolean;
    label?: string;
    labelPosition?: "start" | "mid" | "end";
    labelOffsetX?: number;
    labelOffsetY?: number;
    labelColor?: string;
    labelFontSize?: number;
}

/**
 * A single formula's view data
 * @property description - Optional description text to display
 * @property labels - Record of label entries keyed by LaTeX variable IDs or expression scopes
 */
export declare interface IView {
    description?: string;
    labels?: IStepLabels;
}

export declare type IVisualization = IPlot2D | IPlot3D | ICustom;

/**
 * Helper API for step label values that should render as math.
 * Usage:
 * `latex(value).precision(2)` or `latex(value).sigfigs(4)`
 */
export declare function latex(value: number): LatexNumberFormatter;

declare type LatexMode = "render" | "no-id" | "content-only";

export declare interface LatexNumberFormatter {
    precision: (precision: number) => string;
    sigfigs: (sigFigs: number) => string;
}

declare type LatexRange = [string, {
    [id: string]: [number, number];
}];

/**
 * Context passed to generator callbacks.
 * Contains the current iteration values for each loop variable.
 */
export declare type LoopContext<T extends LoopSpec> = {
    [K in keyof T]: number;
};

/**
 * Range specification for loop iterations.
 * Can be:
 * - A number: [1, n] inclusive
 * - A tuple [start, end]: inclusive range
 * - An array of specific values
 */
export declare type LoopRange = number | [number, number] | number[];

/**
 * Specification for loop iteration bounds.
 * Keys are variable names, values define the iteration range.
 */
export declare type LoopSpec = Record<string, LoopRange>;

declare class MathSymbol extends AugmentedFormulaNodeBase {
    id: string;
    value: string;
    type: "symbol";
    constructor(id: string, value: string);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, value, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        value?: string;
    }): MathSymbol;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

declare class Matrix extends AugmentedFormulaNodeBase {
    id: string;
    matrixType: "bmatrix" | "pmatrix" | "vmatrix" | "Vmatrix" | "matrix";
    body: AugmentedFormulaNode[][];
    type: "matrix";
    constructor(id: string, matrixType: "bmatrix" | "pmatrix" | "vmatrix" | "Vmatrix" | "matrix", body: AugmentedFormulaNode[][]);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, matrixType, body, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        matrixType?: "bmatrix" | "pmatrix" | "vmatrix" | "Vmatrix" | "matrix";
        body?: AugmentedFormulaNode[][];
    }): Matrix;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

/**
 * Merge multiple formula arrays into one.
 */
export declare function mergeFormulas(...sources: IFormula[][]): IFormula[];

/**
 * Merge multiple variable objects into one.
 * Later objects override earlier ones for duplicate keys.
 */
export declare function mergeVariables(...sources: IVariablesUserInput[]): IVariablesUserInput;

declare class Op extends AugmentedFormulaNodeBase {
    id: string;
    operator: string;
    limits: boolean;
    type: "op";
    constructor(id: string, operator: string, limits: boolean);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, operator, limits, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        operator?: string;
        limits?: boolean;
        body?: AugmentedFormulaNode;
    }): Op;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

export declare const Provider: default_2.FC<ProviderProps>;

declare interface ProviderProps {
    config?: Config;
    children: default_2.ReactNode;
    onError?: (error: string | null) => void;
    onReady?: (instance: Instance) => void;
}

declare type RangeElement = string | LatexRange;

export declare const register: (name: string, component: React.ComponentType<{
    context: IContext;
}>) => void;

export declare function registerBuiltInComponents(): void;

declare type RenderSpec = {
    tagName: string;
    id?: string;
    className?: string;
    style?: Record<string, string>;
    attrs: Record<string, string>;
    children: RenderSpec[];
};

declare class Root extends AugmentedFormulaNodeBase {
    id: string;
    body: AugmentedFormulaNode;
    index?: AugmentedFormulaNode | undefined;
    type: "root";
    constructor(id: string, body: AugmentedFormulaNode, index?: AugmentedFormulaNode | undefined);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, body, index, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        body?: AugmentedFormulaNode;
        index?: AugmentedFormulaNode;
    }): Root;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

declare class Script extends AugmentedFormulaNodeBase {
    id: string;
    base: AugmentedFormulaNode;
    sub?: AugmentedFormulaNode | undefined;
    sup?: AugmentedFormulaNode | undefined;
    type: "script";
    constructor(id: string, base: AugmentedFormulaNode, sub?: AugmentedFormulaNode | undefined, sup?: AugmentedFormulaNode | undefined);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, base, sub, sup, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        base?: AugmentedFormulaNode;
        sub?: AugmentedFormulaNode;
        sup?: AugmentedFormulaNode;
    }): Script;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

declare class Space extends AugmentedFormulaNodeBase {
    id: string;
    text: string;
    type: "space";
    constructor(id: string, text: string);
    toLatex(_: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, text, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        text?: string;
    }): Space;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

/**
 * A step control component for navigating through collected steps.
 * Uses the new reactive step system. Must be used inside a Provider.
 */
export declare const StepControl: default_2.FC<StepControlProps>;

export declare interface StepControlProps {
    /** Optional className for additional styling */
    className?: string;
}

export declare const Store: {
    create: typeof create;
};

declare interface StoreContextValue {
    instance: Instance | null;
    config: Config | null;
    isLoading: boolean;
    error: string | null;
    computationStore: ComputationStore | null;
    /** Reinitialize steps by re-running the semantics function */
    reinitialize: () => void;
}

declare class Strikethrough extends AugmentedFormulaNodeBase {
    id: string;
    body: AugmentedFormulaNode;
    type: "strikethrough";
    constructor(id: string, body: AugmentedFormulaNode);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, body, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        body?: AugmentedFormulaNode;
    }): Strikethrough;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

declare class StyledRange {
    id: string;
    left: string;
    children: FormulaLatexRangeNode[];
    right: string;
    hints?: {
        color?: string;
        tooltip?: string;
        noMark?: boolean;
    } | undefined;
    constructor(id: string, left: string, children: FormulaLatexRangeNode[], right: string, hints?: {
        color?: string;
        tooltip?: string;
        noMark?: boolean;
    } | undefined);
    get length(): number;
    equals(other: FormulaLatexRangeNode): boolean;
    toLatex(): string;
}

declare interface SVGConfig {
    width?: number;
    height?: number;
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    className?: string;
    preserveAspectRatio?: string;
}

/**
 * Context passed to SVG generator functions when used in variables
 */
declare interface SVGGeneratorContext extends SVGConfig {
    value?: IValue;
    variable?: IVariable;
    environment?: IEnvironment;
}

declare class Text_2 extends AugmentedFormulaNodeBase {
    id: string;
    body: AugmentedFormulaNode[];
    type: "text";
    constructor(id: string, body: AugmentedFormulaNode[]);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, body, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        body?: AugmentedFormulaNode[];
    }): Text_2;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

export declare const unRegister: (name: string) => boolean;

declare class UnstyledRange {
    text: string;
    constructor(text: string);
    get length(): number;
    equals(other: FormulaLatexRangeNode): boolean;
    toLatex(): string;
}

/**
 * Hook to access the Core context.
 * Returns null if not within Provider, allowing components
 * to work both with context and with explicit props.
 */
export declare const useStore: () => StoreContextValue | null;

export declare const Variable: {
    /**
     * Generate variables by iterating over specified ranges.
     *
     * @param spec - Object defining loop variables and their ranges
     * @param generator - Function that generates [id, variable] pairs
     * @returns Object of variables
     *
     * @example
     * // Generate weight variables
     * Variable.loop({ i: [1, 4], j: [1, 3] }, ({ i, j }) => [
     *   `w_${i}_${j}`,
     *   { interaction: "drag", default: Math.random() - 0.5, range: [-2, 2] }
     * ])
     */
    loop<T extends LoopSpec>(spec: T, generator: (context: LoopContext<T>, index: number) => [string, number | IVariableUserInput]): IVariablesUserInput;
    /**
     * Generate a grid of variables with naming pattern `{prefix}_{i}_{j}`.
     *
     * @param prefix - Variable name prefix
     * @param rows - Number of rows (or [startRow, endRow])
     * @param cols - Number of columns (or [startCol, endCol])
     * @param config - Variable configuration to apply to all
     * @returns Object of variables
     *
     * @example
     * // Generate 4x3 weight matrix
     * Variable.grid("w", 4, 3, { interaction: "drag", range: [-1, 1] })
     * // Produces: { w_1_1: {...}, w_1_2: {...}, ..., w_4_3: {...} }
     *
     * @example
     * // With random initialization
     * Variable.grid("w", 4, 3, {
     *   interaction: "drag",
     *   range: [-1, 1],
     *   default: () => Math.random() * 2 - 1
     * })
     */
    grid(prefix: string, rows: number | [number, number], cols: number | [number, number], config: Omit<IVariableUserInput, "default"> & {
        default?: number | (() => number);
    }): IVariablesUserInput;
    /**
     * Generate a vector of variables with naming pattern `{prefix}_{i}`.
     *
     * @param prefix - Variable name prefix
     * @param length - Number of elements (or [start, end] range)
     * @param config - Variable configuration to apply to all
     * @returns Object of variables
     *
     * @example
     * // Generate input vector
     * Variable.vector("x", 3, { interaction: "drag", default: 0.5 })
     * // Produces: { x_1: {...}, x_2: {...}, x_3: {...} }
     */
    vector(prefix: string, length: number | [number, number], config: Omit<IVariableUserInput, "default"> & {
        default?: number | (() => number);
    }): IVariablesUserInput;
    /**
     * Create a single variable directly.
     */
    create(id: string, config: number | IVariableUserInput): IVariablesUserInput;
};

declare class Variable_2 extends AugmentedFormulaNodeBase {
    id: string;
    body: AugmentedFormulaNode;
    variableLatex: string;
    originalSymbol: string;
    type: "variable";
    constructor(id: string, body: AugmentedFormulaNode, variableLatex: string, originalSymbol: string);
    toLatex(mode: LatexMode, offset: number): LatexRange;
    withChanges({ id, parent, leftSibling, rightSibling, body, variableLatex, originalSymbol, }: {
        id?: string;
        parent?: AugmentedFormulaNode | null;
        leftSibling?: AugmentedFormulaNode | null;
        rightSibling?: AugmentedFormulaNode | null;
        body?: AugmentedFormulaNode;
        variableLatex?: string;
        originalSymbol?: string;
    }): Variable_2;
    get children(): AugmentedFormulaNode[];
    toStyledRanges(): FormulaLatexRangeNode[];
}

declare type VariableSVGContent = string | ((ctx: SVGGeneratorContext) => SVGElement | string);

export declare const VisualizationComponent: default_2.FC<VisualizationComponentProps>;

declare interface VisualizationComponentProps {
    type: "plot2d" | "plot3d" | "custom";
    config: IVisualization;
    className?: string;
    style?: default_2.CSSProperties;
    width?: number | string;
    height?: number | string;
}

export { }
