math-notation 0.1.0

package/dist/types/index.d.ts

@@ -0,0 +1,1764 @@
+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;
+    /**
+     * 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>;
+}
+
+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: FormulizeConfig): Promise<FormulizeInstance>;
+
+/**
+ * Factory function to create a new ComputationStore instance.
+ * Used for creating scoped stores per FormulizeProvider.
+ */
+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;
+}
+
+export declare const Formulize: {
+    create: typeof create;
+};
+
+/**
+ * User-facing configuration type.
+ */
+export declare type FormulizeConfig = IEnvironment;
+
+declare interface FormulizeContextValue {
+    instance: FormulizeInstance | null;
+    config: FormulizeConfig | null;
+    isLoading: boolean;
+    error: string | null;
+    computationStore: ComputationStore | null;
+    /** Reinitialize steps by re-running the semantics function */
+    reinitialize: () => void;
+}
+
+/**
+ * Interface for the object returned by Formulize.create()
+ */
+export declare interface FormulizeInstance {
+    environment: IEnvironment;
+    computationStore: ComputationStore;
+    getVariable: (name: string) => IVariable;
+    setVariable: (name: string, value: number) => boolean;
+    update: (config: FormulizeConfig) => Promise<FormulizeInstance>;
+    destroy: () => void;
+}
+
+export declare const FormulizeProvider: default_2.FC<FormulizeProviderProps>;
+
+declare interface FormulizeProviderProps {
+    config?: FormulizeConfig;
+    children: default_2.ReactNode;
+    onError?: (error: string | null) => void;
+    onReady?: (instance: FormulizeInstance) => void;
+}
+
+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 values - Array of [varId, value] tuples mapping variable IDs to runtime values
+ * @property expression - Optional expression scope for bounding box highlighting
+ * @property formulas - Optional per-formula views for multi-formula steps
+ */
+export declare interface ICollectedStep {
+    index: number;
+    id?: string;
+    description: string;
+    values?: Array<[string, IValue]>;
+    expression?: string;
+    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";
+
+/**
+ * InlineFormula - Renders a formula inline within text
+ *
+ * Usage:
+ * ```tsx
+ * <FormulizeProvider config={config}>
+ *   <p>The formula <InlineFormula id="kinetic-energy" /> shows energy.</p>
+ * </FormulizeProvider>
+ * ```
+ */
+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
+ * <FormulizeProvider config={config}>
+ *   <p>The mass <InlineVariable id="m" display="withUnits" /> affects energy.</p>
+ * </FormulizeProvider>
+ * ```
+ */
+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;
+}
+
+/**
+ * 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
+ */
+export declare interface ISemanticsContext {
+    vars: Record<string, any>;
+    data2d: IData2DFn;
+    data3d: IData3DFn;
+    step: IStepFn;
+}
+
+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: any, blockId?: string) => void;
+
+/**
+ * Step input: either a single view (applies to all formulas) or multiple views keyed by formulaId
+ * - Single: { description: "...", values: [...], expression: "..." }
+ * - Multi-formula: { "formula-id": { description: "...", ... }, "other-id": { ... } }
+ */
+export declare type IStepInput = IView | Record<string, IView>;
+
+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;
+    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 - The description text to display
+ * @property values - Array of [varId, value] tuples mapping LaTeX variable IDs to runtime values
+ * @property expression - Optional expression scope for bounding box highlighting
+ */
+export declare interface IView {
+    description: string;
+    values?: Array<[string, IValue]>;
+    expression?: string;
+}
+
+export declare type IVisualization = IPlot2D | IPlot3D | ICustom;
+
+declare type LatexMode = "render" | "no-id" | "content-only";
+
+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[];
+}
+
+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 FormulizeProvider.
+ */
+export declare const StepControl: default_2.FC<StepControlProps>;
+
+export declare interface StepControlProps {
+    /** Optional className for additional styling */
+    className?: string;
+}
+
+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 Formulize context.
+ * Returns null if not within FormulizeProvider, allowing components
+ * to work both with context and with explicit props.
+ */
+export declare const useFormulize: () => FormulizeContextValue | 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 { }