@teachinglab/omd 0.5.6 → 0.5.8

package/npm-docs/api/index.md

@@ -0,0 +1,106 @@
+# OMD Library Entry Point
+
+This module (`omd/core/index.js`) serves as the main entry point for the OMD (Open Math Display) library. It re-exports all core classes, visualization components, and utility functions, making them easily accessible from a single import.
+
+## Overview
+
+When you import from `@teachinglab/omd` (or directly from `omd/core/index.js`), you gain access to a comprehensive set of tools for building and manipulating mathematical expressions and their visual representations.
+
+## Named Exports
+
+The primary way to use the library is through its named exports.
+
+### Core Node Classes
+
+All classes extending `omdNode` are re-exported, allowing you to construct and work with various types of mathematical expressions:
+
+- [`omdNode`](./omdNode.md)
+- [`omdBinaryExpressionNode`](./omdBinaryExpressionNode.md)
+- [`omdConstantNode`](./omdConstantNode.md)
+- [`omdEquationNode`](./omdEquationNode.md)
+- [`omdEquationSequenceNode`](./omdEquationSequenceNode.md)
+- [`omdEquationStack`](./omdEquationStack.md)
+- [`omdFunctionNode`](./omdFunctionNode.md)
+- [`omdGroupNode`](./omdGroupNode.md)
+- [`omdLeafNode`](./omdLeafNode.md)
+- [`omdOperationDisplayNode`](./omdOperationDisplayNode.md)
+- [`omdOperatorNode`](./omdOperatorNode.md)
+- [`omdParenthesisNode`](./omdParenthesisNode.md)
+- [`omdPowerNode`](./omdPowerNode.md)
+- [`omdRationalNode`](./omdRationalNode.md)
+- [`omdSqrtNode`](./omdSqrtNode.md)
+- [`omdUnaryExpressionNode`](./omdUnaryExpressionNode.md)
+- [`omdVariableNode`](./omdVariableNode.md)
+
+### Visualization Components
+
+These classes provide high-level components for rendering and interacting with mathematical expressions:
+
+- [`omdStepVisualizer`](./omdStepVisualizer.md)
+- [`omdDisplay`](./omdDisplay.md)
+- [`omdToolbar`](./omdToolbar.md)
+
+### Utilities
+
+Essential utility functions and classes for parsing, simplification, and configuration management:
+
+- `getNodeForAST`: A factory function to get the correct `omdNode` class for a given math.js AST.
+- `simplifyStep`: Applies a single simplification step to an expression.
+- `initializeConfig`: Initializes the OMD configuration.
+- `setConfig`: Sets the OMD configuration.
+- `getDefaultConfig`: Retrieves the default OMD configuration.
+- `omdExpression`: A base class for expressions.
+- `omdColor`: A utility class for working with colors.
+
+### `omdHelpers`
+
+A collection of convenience functions for common operations:
+
+#### `createNodeFromExpression(expression, mathjs)`
+- Creates an `omdNode` instance from a string expression using a provided math.js instance.
+
+#### `createEquation(equationString)`
+- Creates an `omdEquationNode` from a string representation of an equation.
+
+#### `createStepVisualizer(equationStrings)`
+- Creates an `omdStepVisualizer` instance from an array of equation strings.
+
+## Re-Exports
+
+The index also re-exports all named exports from the following modules:
+
+-   `../step-visualizer/omdStepVisualizer.js`
+-   `./omdUtilities.js`
+-   `../display/omdToolbar.js`
+
+This means you can import their functions directly from the main entry point.
+
+## Default Export
+
+The module also provides a default export, which is an object containing all the re-exported classes and functions, organized into logical groups (`nodes`, `helpers`, etc.). This allows for a more structured import if preferred.
+
+```javascript
+import OMD from '@teachinglab/omd';
+
+const equation = new OMD.nodes.omdEquationNode(...);
+const display = new OMD.omdDisplay(...);
+const helpers = OMD.helpers;
+```
+
+## Example Usage
+
+```javascript
+import { omdDisplay, omdEquationNode, omdHelpers } from '@teachinglab/omd';
+
+// Create an equation using a helper
+const equation = omdHelpers.createEquation('2x + 5 = 15');
+
+// Create a display and render the equation
+const displayContainer = document.getElementById('math-container');
+const display = new omdDisplay(displayContainer);
+
+display.render(equation);
+
+// You can also directly access node classes
+const constant = new omdConstantNode({ value: 10 });
+```

package/npm-docs/api/main.md

@@ -0,0 +1,63 @@
+# main.js - OMD AI Visual Generator
+
+This `main.js` file powers the OMD AI Visual Generator, an interactive web page that uses AI to create mathematical visualizations from natural language prompts.
+
+## Core Functionality: The `OMDVisualGenerator` Class
+
+The entire application is encapsulated within the `OMDVisualGenerator` class, which manages the UI, handles user input, and orchestrates the process of generating and rendering visuals.
+
+### Initialization
+
+When the DOM is loaded, a new `OMDVisualGenerator` instance is created. The constructor calls:
+
+-   `initializeElements()`: Caches references to all necessary DOM elements (input fields, buttons, result panels).
+-   `attachEventListeners()`: Sets up all event listeners for user interactions.
+
+### Event Listeners
+
+The application responds to the following user actions:
+
+-   **Generate Button Click / Enter Key**: Triggers the `generateVisual()` method.
+-   **Example Buttons**: Populate the input field with a predefined request and trigger `generateVisual()`.
+-   **Copy SVG Button**: Calls `copySvgToClipboard()` to save the generated visual.
+-   **Manual JSON Input**: A separate workflow allows users to bypass the AI and render a visual directly from their own OMD JSON.
+
+## Visual Generation Process
+
+The core workflow is handled by the `generateVisual()` method:
+
+1.  **Get Input**: Retrieves the user's natural language request from the input field.
+2.  **Set Loading State**: Disables the UI to prevent multiple submissions while a request is in progress.
+3.  **API Call**: Sends a `fetch` request to the Netlify serverless function at `/.netlify/functions/ai-omd-lookup`. The user's request is passed as a URL parameter.
+4.  **Receive JSON**: The serverless function (not detailed in this file) communicates with an AI service and returns a JSON object that conforms to the OMD specification for a particular visual (e.g., a `balanceHanger` or `tapeDiagram`).
+5.  **Display JSON**: The raw JSON response is pretty-printed and displayed in the UI for inspection.
+6.  **Render Visual**: The `renderVisual(jsonData)` method is called.
+
+## Rendering the Visual (`renderVisual`)
+
+This method is responsible for turning the AI-generated JSON into an SVG image:
+
+1.  **Clear Previous Visual**: Removes any existing SVG from the display area.
+2.  **Select OMD Class**: A `switch` statement reads the `omdType` property from the JSON to determine which OMD class to instantiate (e.g., `omdBalanceHanger`, `omdTable`).
+3.  **Load Data**: The `loadFromJSON(jsonData)` method of the instantiated OMD object is called, configuring the object based on the AI-provided data.
+4.  **Create SVG**: An SVG wrapper is created, and the OMD object's internal SVG group (`omdObject.svgObject`) is appended to it.
+5.  **Display SVG**: The final SVG is added to the `visualResult` panel in the DOM.
+
+## Manual JSON Input
+
+For testing and debugging, users can click the "Manual JSON Input" button to reveal a text area. They can paste their own OMD-compliant JSON and click "Render" to see it visualized, skipping the AI step entirely.
+
+## Utility Methods
+
+-   **`copySvgToClipboard()`**: An advanced feature that converts the generated SVG into a high-resolution PNG and uses the Clipboard API (`navigator.clipboard.write`) to copy it to the user's clipboard.
+-   **`setLoading(isLoading)`**: Toggles the disabled state of UI elements.
+-   **`showMessage(message, type)` / `showError(message)`**: Displays status messages (e.g., "Generating...", "Error") to the user.
+
+## Usage
+
+This script is designed to be used with an `index.html` file that provides the necessary UI layout. It allows users to:
+
+-   Enter a description of a math concept (e.g., "a balance hanger with 2x + 3 on the left and 7 on the right").
+-   Click "Generate" to see it visualized by the AI.
+-   Inspect the underlying OMD JSON.
+-   Copy the resulting visual as a PNG image.

package/npm-docs/api/omdBinaryExpressionNode.md

@@ -0,0 +1,86 @@
+# omdBinaryExpressionNode
+
+Represents a binary operation in a mathematical expression, such as addition (`a + b`), subtraction, multiplication, or division. This node is a cornerstone of the expression tree, containing a left operand, a right operand, and an operator.
+
+## Class Definition
+
+```javascript
+export class omdBinaryExpressionNode extends omdNode
+```
+
+## Constructor
+
+### `new omdBinaryExpressionNode(ast)`
+
+Creates a new `omdBinaryExpressionNode` instance.
+
+-   **`ast`** (`object`): The abstract syntax tree (AST) node from a parser like math.js. It must contain:
+    -   `args`: An array with at least two operand nodes.
+    -   `op`: The operator symbol (e.g., `+`, `*`).
+    -   `fn`: The function name for the operation (e.g., `add`, `multiply`).
+    -   `implicit` (`boolean`, optional): `true` if the multiplication is implicit (e.g., `2x`).
+
+During construction, the node automatically handles a critical piece of mathematical convention: **implicit multiplication**. Based on the configuration in `omdConfigManager`, it will:
+
+1.  **Reorder Operands**: If it encounters an expression like `x * 2`, it will automatically reorder it to the conventional `2 * x` by swapping the left and right child nodes.
+2.  **Determine Implicit Form**: It checks if the combination of operands (e.g., a constant and a variable) should be represented implicitly. If so, it removes the visible operator (`*`) and marks the node as implicit.
+
+## Public Properties
+
+-   **`left`** ([`omdNode`](./omdNode.md)): The node representing the left-hand side of the operation.
+-   **`right`** ([`omdNode`](./omdNode.md)): The node representing the right-hand side of the operation.
+-   **`op`** ([`omdOperatorNode`](./omdOperatorNode.md) | `null`): The node for the operator. This is `null` for implicit multiplication.
+-   **`operation`** (`string`): The name of the mathematical function (e.g., `'add'`, `'multiply'`).
+-   **`isImplicit`** (`boolean`): `true` if the node represents implicit multiplication.
+
+## Public Methods
+
+### `clone()`
+
+Creates a deep, recursive clone of the node, including its children (`left`, `right`, `op`). The new node's `provenance` property will link back to the ID of this original node.
+
+-   **Returns**: A new `omdBinaryExpressionNode` instance.
+
+### `evaluate(variables)`
+
+Recursively evaluates the expression and returns the numerical result.
+
+-   **`variables`** (`object`, optional): A map of variable names to their numeric values (e.g., `{ x: 5 }`).
+-   **Returns**: `number` - The result of the calculation.
+-   **Throws**: An `Error` for unsupported operations or division by zero.
+
+### `needsParentheses()`
+
+Determines if this expression needs to be wrapped in parentheses to maintain the correct order of operations when it is a child of another binary expression.
+
+-   **Returns**: `boolean` - `true` if parentheses are required.
+
+### `setHighlight(highlightOn, color)`
+
+Applies or removes a highlight from the node and all of its children (left, right, and operator).
+
+-   **`highlightOn`** (`boolean`): `true` to highlight, `false` to remove.
+-   **`color`** (`string`, optional): The color of the highlight.
+
+### `clearProvenanceHighlights()`
+
+Recursively clears all provenance-related highlights from this node and its children.
+
+### `toMathJSNode()`
+
+Converts the node back into a math.js-compatible AST format.
+
+-   **Returns**: `object` - A math.js OperatorNode.
+
+### `toString()`
+
+Converts the node into a human-readable string, automatically handling parentheses for precedence.
+
+-   **Returns**: `string` - The string representation of the expression.
+
+## Internal Methods
+
+-   **`_shouldUseImplicitMultiplication(left, right)`**: Checks the configuration to decide if implicit multiplication is appropriate for the given operand types.
+-   **`_shouldReorderMultiplication(left, right)`**: Determines if operands should be swapped to follow convention (e.g., `variable * constant` -> `constant * variable`).
+-   **`computeDimensions()`**: Calculates the bounding box of the expression.
+-   **`updateLayout()`**: Positions the left operand, operator, and right operand correctly, aligning them along their baseline.

package/npm-docs/api/omdCanvas.md

@@ -0,0 +1,84 @@
+# omdCanvas
+
+The `omdCanvas` class is the core component for creating and managing an interactive 2D drawing surface. It provides the primary API for all canvas operations, including drawing and managing strokes, handling user input, and orchestrating various features like tools, a toolbar, and focus frames.
+
+## Class Definition
+
+```javascript
+export class omdCanvas
+```
+
+## Constructor
+
+### `new omdCanvas(container, [options])`
+
+Creates a new `omdCanvas` instance within a specified container element.
+
+-   **`container`** (`HTMLElement` | `string`): The HTML element or a CSS selector string for the container where the canvas will be rendered. Throws an error if the container is not found.
+-   **`options`** (`object`, optional): Configuration options for the canvas. These are passed to the `CanvasConfig` class. See the [Configuration Options](./configuration-options.md) for details.
+
+## Properties
+
+-   **`container`** (`HTMLElement`): The HTML container element for the canvas.
+-   **`config`** (`CanvasConfig`): The configuration object for the canvas.
+-   **`svg`** (`SVGElement`): The main `<svg>` element that serves as the drawing surface.
+-   **`backgroundLayer`** (`SVGGElement`): An SVG group (`<g>`) for background elements like the grid.
+-   **`drawingLayer`** (`SVGGElement`): The SVG group where all drawing strokes are rendered.
+-   **`uiLayer`** (`SVGGElement`): The SVG group for UI elements that overlay the drawing, such as selection boxes.
+-   **`focusFrameLayer`** (`SVGGElement`): The SVG group dedicated to holding `FocusFrame` elements.
+-   **`strokes`** (`Map<string, Stroke>`): A map of all stroke objects on the canvas, with their unique IDs as keys.
+-   **`selectedStrokes`** (`Set<string>`): A set of the IDs of all currently selected strokes.
+-   **`toolManager`** (`ToolManager`): The instance managing the active drawing tools (Pencil, Eraser, etc.).
+-   **`eventManager`** (`EventManager`): The instance managing all user input events.
+-   **`cursor`** (`Cursor`): The instance that manages the custom cursor's appearance and behavior.
+-   **`toolbar`** (`Toolbar`): The UI toolbar for tool selection (if enabled in config).
+-   **`focusFrameManager`** (`FocusFrameManager`): The instance managing focus frames (if enabled in config).
+
+## Public Methods
+
+### Stroke Management
+
+-   **`addStroke(stroke)`**: Adds a `Stroke` object to the canvas and renders it. Emits `strokeAdded`.
+-   **`removeStroke(strokeId)`**: Removes a stroke from the canvas by its ID. Emits `strokeRemoved`.
+-   **`clear()`**: Removes all strokes from the canvas. Emits `cleared`.
+
+### Selection
+
+-   **`selectStrokes(strokeIds)`**: Programmatically selects a set of strokes by their IDs. Emits `selectionChanged`.
+
+### Coordinate Conversion
+
+-   **`clientToSVG(clientX, clientY)`**: Converts screen coordinates (e.g., from a mouse event) to the canvas's local SVG coordinate system.
+    -   **Returns**: `{ x, y }` object.
+
+### Exporting
+
+-   **`exportSVG()`**: Exports the canvas drawing as a clean SVG string. UI layers (`uiLayer`, `focusFrameLayer`) are excluded.
+-   **`async exportImage([format], [quality])`**: Exports the canvas as a bitmap image.
+    -   **`format`** (`string`): `'png'`, `'jpeg'`, or `'webp'`. Default: `'png'`.
+    -   **`quality`** (`number`): For JPEG/WebP, a value from 0 to 1. Default: `1`.
+    -   **Returns**: `Promise<Blob>` that resolves with the image data.
+
+### Canvas Management
+
+-   **`resize(width, height)`**: Resizes the canvas. Emits `resized`.
+-   **`toggleGrid()`**: Toggles the visibility of the background grid.
+-   **`getInfo()`**: Returns an object with status information (dimensions, stroke count, active tool, etc.).
+-   **`destroy()`**: Completely removes the canvas and all associated managers, event listeners, and DOM elements. Emits `destroyed`.
+
+### Event Handling (Pub/Sub)
+
+-   **`on(event, callback)`**: Registers a listener for a custom canvas event.
+-   **`off(event, callback)`**: Removes a previously registered event listener.
+-   **`emit(event, [data])`**: Dispatches a custom event to all registered listeners.
+
+## Emitted Events
+
+The `omdCanvas` is an event emitter. You can listen for these events using the `on()` method.
+
+-   `strokeAdded`, `strokeRemoved`, `cleared`: Fired for stroke operations.
+-   `selectionChanged`: Fired when the set of selected strokes changes.
+-   `resized`: Fired when the canvas dimensions change.
+-   `pointerDown`, `pointerMove`, `pointerUp`, etc.: Raw input events, normalized by the `EventManager`.
+-   `focusFrameCreated`, `focusFrameRemoved`, etc.: Events from the `FocusFrameManager`.
+-   `destroyed`: Fired when the `destroy()` method has completed.

package/npm-docs/api/omdConfigManager.md

@@ -0,0 +1,113 @@
+# omdConfigManager
+
+A module for managing the configuration of the OMD library. It handles loading settings from a JSON file, providing default values, and allowing runtime modifications.
+
+## Overview
+
+The configuration is managed as a single JSON object. The system can be initialized with a path to a `omdConfig.json` file, or it will fall back to a default configuration. The manager supports both asynchronous and synchronous access to configuration values.
+
+### Default Configuration
+
+If no `omdConfig.json` is found, the following default structure is used:
+
+```json
+{
+    "multiplication": {
+        "symbol": "·",
+        "forceImplicit": false,
+        "implicitCombinations": {
+            "constantVariable": true,
+            "variableConstant": false,
+            "parenthesisAfterVariable": true,
+            "parenthesisAfterConstant": true,
+            "variableParenthesis": true,
+            "parenthesisParenthesis": true,
+            "parenthesisVariable": true,
+            "parenthesisConstant": true,
+            "variableVariable": true
+        }
+    },
+    "stepVisualizer": {
+        "dotSizes": {
+            "level0": 8,
+            "level1": 6,
+            "level2": 4
+        },
+        "fontWeights": {
+            "level0": 400,
+            "level1": 400,
+            "level2": 400
+        }
+    }
+}
+```
+
+## Core Functions
+
+### `async initializeConfig(configSource)`
+
+Loads the configuration from a file or object. It automatically detects the environment (browser or Node.js) to use the appropriate file loading mechanism (`fetch` or `fs`). This should be called once when your application starts.
+
+-   **`configSource`** (`string` | `object`, optional): A path to a JSON configuration file or a configuration object to use directly.
+-   **Returns**: `Promise<void>`
+
+### `async getConfig()`
+
+Asynchronously gets the entire configuration object. If it hasn't been loaded yet, it will trigger the loading process with default settings.
+
+-   **Returns**: `Promise<object>` - A promise that resolves to the configuration object.
+
+### `getConfigSync()`
+
+Synchronously gets the configuration object. 
+
+**Warning:** If called before `initializeConfig` has completed, this will return the default configuration, not the loaded one.
+
+-   **Returns**: `object` - The configuration object.
+
+### `setConfig(config)`
+
+Sets the entire configuration directly, merging it with the default values.
+
+-   **`config`** (`object`): The configuration object to set.
+
+### `getConfigValue(path)`
+
+Gets a specific configuration value using a dot-separated path (e.g., `'multiplication.symbol'`).
+
+-   **Returns**: The value at the specified path.
+
+### `setConfigValue(path, value)`
+
+Sets a specific configuration value using a dot-separated path.
+
+## Utility Functions
+
+-   **`getMultiplicationSymbol()`**: Returns the configured symbol for multiplication.
+-   **`useImplicitMultiplication(combination)`**: Checks if implicit multiplication should be used, either globally or for a specific combination of operand types.
+-   **`getDotRadius(level)`**: Gets the dot radius for a given step level in the `omdStepVisualizer`.
+-   **`getFontWeight(level)`**: Gets the font weight for a given step level.
+-   **`getDefaultConfig()`**: Returns a copy of the default configuration object.
+-   **`isEnabled(category, setting)`**: Checks if a specific boolean setting is enabled.
+-   **`updateConfig(category, setting, value)`**: Updates a top-level configuration setting.
+-   **`resetConfig()`**: Throws an error. Direct file editing is required to reset the configuration.
+-   **`async reloadConfig()`**: Forces a reload of the configuration from the original file path.
+-   **`async getConfigAsync()`**: An alias for `getConfig()`.
+
+## Example
+
+```javascript
+import { initializeConfig, getConfigValue, setConfigValue } from '@teachinglab/omd';
+
+// Initialize at the start of your application
+(async () => {
+    await initializeConfig();
+
+    // Get a specific value
+    const multSymbol = getConfigValue('multiplication.symbol'); // -> '·'
+
+    // Change a value at runtime
+    setConfigValue('multiplication.symbol', '*');
+    const newSymbol = getConfigValue('multiplication.symbol'); // -> '*'
+})();
+```

package/npm-docs/api/omdConstantNode.md

@@ -0,0 +1,53 @@
+# omdConstantNode
+
+Represents a numeric constant in a mathematical expression. This node is a leaf node in the expression tree, meaning it does not have any children.
+
+## Class Definition
+
+```javascript
+export class omdConstantNode extends omdLeafNode
+```
+
+## Constructor
+
+### `new omdConstantNode(ast)`
+
+Creates a new `omdConstantNode` instance.
+
+-   **`ast`** (`object`): The abstract syntax tree (AST) node from a parser like math.js. It must contain:
+    -   `value`: The numeric value of the constant.
+
+## Public Properties
+
+-   **`value`** (`number`): The numeric value of the constant.
+
+## Public Methods
+
+### `isConstant()`
+
+Checks if the node represents a constant value.
+
+-   **Returns**: `boolean` - Always `true` for `omdConstantNode`.
+
+### `evaluate()`
+
+Evaluates the constant node. Since it's a constant, it simply returns its value.
+
+-   **Returns**: `number` - The numeric value of the constant.
+
+### `toMathJSNode()`
+
+Converts the node back into a math.js-compatible AST format.
+
+-   **Returns**: `object` - A math.js ConstantNode.
+
+### `toString()`
+
+Converts the constant node into its string representation.
+
+-   **Returns**: `string` - The string representation of the constant.
+
+## Internal Methods
+
+-   **`computeDimensions()`**: Calculates the bounding box of the constant.
+-   **`updateLayout()`**: Positions the constant within its bounding box.

package/npm-docs/api/omdDisplay.md

@@ -0,0 +1,87 @@
+# omdDisplay
+
+A high-level component for displaying mathematical expressions or a series of equation steps. It handles rendering, automatic centering, scaling, and layout management within a given HTML container.
+
+## Class Definition
+
+```javascript
+export class omdDisplay
+```
+
+## Constructor
+
+### `new omdDisplay(container, [options])`
+
+Creates a new `omdDisplay` instance.
+
+-   **`container`** (`HTMLElement`): The DOM element where the expression will be rendered.
+-   **`options`** (`object`, optional): Configuration options:
+    -   `fontSize` (`number`): The base font size in pixels for the expression. Default: `32`.
+    -   `centerContent` (`boolean`): If `true`, the content is automatically centered within the container. Default: `true`.
+    -   `topMargin` (`number`): The top margin in pixels, used when centering content. Default: `40`.
+    -   `bottomMargin` (`number`): The bottom margin in pixels. Default: `16`.
+    -   `fitToContent` (`boolean`): If `true`, the SVG container will resize to tightly fit the content. Default: `false`.
+    -   `autoScale` (`boolean`): If `true`, content will automatically scale down to fit the container. Default: `true`.
+    -   `maxScale` (`number`): Maximum scale factor for `autoScale`. Default: `1` (no upscaling).
+    -   `edgePadding` (`number`): Horizontal padding from edges when `autoScale` is enabled. Default: `16`.
+
+## Public Methods
+
+### `render(expression)`
+
+Renders a mathematical expression or equation within the display. It intelligently handles different input types:
+
+-   If `expression` is a string containing semicolons (`;`), it's treated as a sequence of equations and rendered as an `omdStepVisualizer`.
+-   If `expression` is a string containing an equals sign (`=`), it's treated as a single equation and wrapped in an `omdStepVisualizer`.
+-   Otherwise, if `expression` is a string, it's parsed as a single mathematical expression.
+-   If `expression` is already an `omdNode` instance, it's rendered directly.
+
+-   **`expression`** (`string` | `omdNode`): The mathematical expression string or a pre-existing `omdNode` instance.
+-   **Returns**: `omdNode` - The root node of the rendered content (often an `omdStepVisualizer`).
+
+### `update(newNode)`
+
+Replaces the currently displayed node with a new one, applying the current font size and centering if enabled. The new node is initialized before being added to the display.
+
+-   **`newNode`** (`omdNode`): The new node to display.
+
+### `getCurrentNode()`
+
+Returns the node currently being displayed.
+
+-   **Returns**: `omdNode` | `null` - The current root node, or `null` if nothing is displayed.
+
+### `centerNode()`
+
+Manually triggers the centering and scaling logic for the current node. This is particularly useful for `omdEquationSequenceNode` instances to align them by their equals signs, and for ensuring content fits within the container based on `autoScale` and `maxScale` options.
+
+### `fitToContent()`
+
+Adjusts the SVG container's dimensions to tightly fit the rendered content, adding a small padding. This is useful for generating images or when the display needs to precisely match the content size.
+
+### `setFontSize(size)`
+
+Updates the base font size for the currently displayed node and for any future content rendered. This will trigger a re-layout and re-centering.
+
+-   **`size`** (`number`): The new font size in pixels.
+
+### `setFont(fontFamily, fontWeight)`
+
+Applies a specific font family and weight to all text elements within the rendered SVG. This setting is also stored for future content.
+
+-   **`fontFamily`** (`string`): CSS `font-family` string (e.g., `'"Shantell Sans", cursive'`).
+-   **`fontWeight`** (`string`, optional): CSS `font-weight` (e.g., `'400'`, `'bold'`). Default: `'400'`.
+
+### `clear()`
+
+Removes the current expression from the display.
+
+### `destroy()`
+
+Cleans up the component, removing all DOM elements and detaching the resize observer.
+
+## Internal Methods
+
+-   **`_setupSVG()`**: Initializes the main SVG element, sets its viewBox, and attaches a `ResizeObserver` to the container.
+-   **`_handleResize()`**: Callback for the `ResizeObserver` that updates the SVG viewBox and re-centers the content on container resize.
+-   **`_repositionOverlayToolbar()`**: Positions any overlay toolbars associated with the current node (e.g., for interactive step visualizers).