@teachinglab/omd 0.6.0 → 0.6.2

package/docs/api/focusFrameManager.md

@@ -1,145 +1,145 @@
-# FocusFrameManager
-
-The `FocusFrameManager` is a feature that allows you to define rectangular regions on the canvas called "focus frames." These frames can be used to highlight specific areas of interest, capture their contents as separate SVG or bitmap images, and manage them independently.
-
-This is particularly useful for applications where you need to isolate and process or export specific parts of a larger drawing, such as individual mathematical problems on a worksheet or specific diagrams in a complex scene.
-
-## Class Definition
-
-```javascript
-export class FocusFrameManager {
-    // ...
-}
-```
-
-## Constructor
-
-### `new FocusFrameManager(canvas)`
-
-Creates a new `FocusFrameManager` instance.
-
--   **`canvas`** (`OMDCanvas`): The main canvas instance.
-
-## Public Methods
-
-### `createFrame([options])`
-
-Creates a new, independent focus frame on the canvas.
-
--   **`options`** (`object`, optional): Configuration for the new frame.
-    -   `x` (`number`, optional): The x-coordinate of the top-left corner. Default: `0`.
-    -   `y` (`number`, optional): The y-coordinate of the top-left corner. Default: `0`.
-    -   `width` (`number`, optional): The width of the frame. Default: `200`.
-    -   `height` (`number`, optional): The height of the frame. Default: `150`.
-    -   `showOutline` (`boolean`, optional): Whether to display the frame's border. Default: `true`.
-    -   `outlineColor` (`string`, optional): The color of the border. Default: `'#007bff'`.
-    -   `outlineWidth` (`number`, optional): The thickness of the border. Default: `2`.
-    -   `outlineDashed` (`boolean`, optional): Whether the border should be a dashed line. Default: `false`.
--   **Returns**: `object` - An object containing the `id` of the new frame and a reference to the `frame` instance (`{ id, frame }`).
--   **Emits**: `focusFrameCreated` with `{ id, frame }`.
-
-### `removeFrame(frameId)`
-
-Removes a specific focus frame from the canvas.
-
--   **`frameId`** (`string`): The unique ID of the frame to remove.
--   **Returns**: `boolean` - `true` if the frame was found and removed, `false` otherwise.
--   **Emits**: `focusFrameRemoved` with `{ frameId }`.
-
-### `getFrame(frameId)`
-
-Retrieves a focus frame instance by its ID.
-
--   **`frameId`** (`string`): The ID of the frame to retrieve.
--   **Returns**: `FocusFrame` or `undefined` - The frame instance, or `undefined` if no frame with that ID exists.
-
-### `setActiveFrame(frameId)`
-
-Sets a specific frame as the "active" one, which can be useful for highlighting or targeting operations.
-
--   **`frameId`** (`string`): The ID of the frame to activate.
--   **Returns**: `boolean` - `true` if the frame was successfully activated.
--   **Emits**: `focusFrameActivated` with `{ frameId, frame }`.
-
-### `getActiveFrame()`
-
-Gets the currently active focus frame.
-
--   **Returns**: `FocusFrame` or `null` - The active frame instance, or `null` if no frame is currently active.
-
-### `captureActiveFrame()`
-
-Captures the SVG content of the currently active focus frame.
-
--   **Returns**: `string` or `null` - A string of the SVG content within the active frame's bounds, or `null` if there is no active frame.
-
-### `captureAllFrames()`
-
-Captures the content of every focus frame on the canvas.
-
--   **Returns**: `Map<string, string>` - A Map where keys are frame IDs and values are the SVG content strings for each frame.
-
-### `clearAllFrames()`
-
-Removes all focus frames from the canvas.
-
--   **Emits**: `focusFramesCleared`.
-
-### `getFrameIds()`
-
-Gets the IDs of all current focus frames.
-
--   **Returns**: `Array<string>` - An array of all frame IDs.
-
-### `destroy()`
-
-Destroys the manager and removes all associated frames and event listeners.
-
----
-
-## The `FocusFrame` Class (Internal)
-
-The `FocusFrame` class represents a single rectangular frame. It is not exported directly but is returned by `FocusFrameManager` methods.
-
-### `setActive(active)`
-
-Sets the frame's visual state to active or inactive.
-
--   **`active`** (`boolean`): `true` to activate, `false` to deactivate.
-
-### `capture()`
-
-Captures the canvas content within the frame's bounds.
-
--   **Returns**: `string` - The SVG content of the frame as an XML string.
-
-### `async toBitmap([format], [quality])`
-
-Converts the frame's captured content into a bitmap image.
-
--   **`format`** (`string`, optional): The image format (e.g., `'png'`, `'jpeg'`). Default: `'png'`.
--   **`quality`** (`number`, optional): The image quality for formats that support it (0 to 1). Default: `1`.
--   **Returns**: `Promise<Blob>` - A promise that resolves with the image data as a `Blob`.
-
-### `async downloadAsBitmap([filename], [format])`
-
-Triggers a browser download of the frame's content as a bitmap image.
-
--   **`filename`** (`string`, optional): The desired filename. Default: `focus-frame-{id}.png`.
--   **`format`** (`string`, optional): The image format. Default: `'png'`.
-
-### `updateBounds(bounds)`
-
-Resizes and/or repositions the frame.
-
--   **`bounds`** (`object`): An object with the new dimensions and coordinates (`{ x, y, width, height }`).
-
-### `getBounds()`
-
-Gets the current position and size of the frame.
-
--   **Returns**: `object` - An object containing the frame's bounds (`{ x, y, width, height }`).
-
-### `destroy()`
-
+# FocusFrameManager
+
+The `FocusFrameManager` is a feature that allows you to define rectangular regions on the canvas called "focus frames." These frames can be used to highlight specific areas of interest, capture their contents as separate SVG or bitmap images, and manage them independently.
+
+This is particularly useful for applications where you need to isolate and process or export specific parts of a larger drawing, such as individual mathematical problems on a worksheet or specific diagrams in a complex scene.
+
+## Class Definition
+
+```javascript
+export class FocusFrameManager {
+    // ...
+}
+```
+
+## Constructor
+
+### `new FocusFrameManager(canvas)`
+
+Creates a new `FocusFrameManager` instance.
+
+-   **`canvas`** (`OMDCanvas`): The main canvas instance.
+
+## Public Methods
+
+### `createFrame([options])`
+
+Creates a new, independent focus frame on the canvas.
+
+-   **`options`** (`object`, optional): Configuration for the new frame.
+    -   `x` (`number`, optional): The x-coordinate of the top-left corner. Default: `0`.
+    -   `y` (`number`, optional): The y-coordinate of the top-left corner. Default: `0`.
+    -   `width` (`number`, optional): The width of the frame. Default: `200`.
+    -   `height` (`number`, optional): The height of the frame. Default: `150`.
+    -   `showOutline` (`boolean`, optional): Whether to display the frame's border. Default: `true`.
+    -   `outlineColor` (`string`, optional): The color of the border. Default: `'#007bff'`.
+    -   `outlineWidth` (`number`, optional): The thickness of the border. Default: `2`.
+    -   `outlineDashed` (`boolean`, optional): Whether the border should be a dashed line. Default: `false`.
+-   **Returns**: `object` - An object containing the `id` of the new frame and a reference to the `frame` instance (`{ id, frame }`).
+-   **Emits**: `focusFrameCreated` with `{ id, frame }`.
+
+### `removeFrame(frameId)`
+
+Removes a specific focus frame from the canvas.
+
+-   **`frameId`** (`string`): The unique ID of the frame to remove.
+-   **Returns**: `boolean` - `true` if the frame was found and removed, `false` otherwise.
+-   **Emits**: `focusFrameRemoved` with `{ frameId }`.
+
+### `getFrame(frameId)`
+
+Retrieves a focus frame instance by its ID.
+
+-   **`frameId`** (`string`): The ID of the frame to retrieve.
+-   **Returns**: `FocusFrame` or `undefined` - The frame instance, or `undefined` if no frame with that ID exists.
+
+### `setActiveFrame(frameId)`
+
+Sets a specific frame as the "active" one, which can be useful for highlighting or targeting operations.
+
+-   **`frameId`** (`string`): The ID of the frame to activate.
+-   **Returns**: `boolean` - `true` if the frame was successfully activated.
+-   **Emits**: `focusFrameActivated` with `{ frameId, frame }`.
+
+### `getActiveFrame()`
+
+Gets the currently active focus frame.
+
+-   **Returns**: `FocusFrame` or `null` - The active frame instance, or `null` if no frame is currently active.
+
+### `captureActiveFrame()`
+
+Captures the SVG content of the currently active focus frame.
+
+-   **Returns**: `string` or `null` - A string of the SVG content within the active frame's bounds, or `null` if there is no active frame.
+
+### `captureAllFrames()`
+
+Captures the content of every focus frame on the canvas.
+
+-   **Returns**: `Map<string, string>` - A Map where keys are frame IDs and values are the SVG content strings for each frame.
+
+### `clearAllFrames()`
+
+Removes all focus frames from the canvas.
+
+-   **Emits**: `focusFramesCleared`.
+
+### `getFrameIds()`
+
+Gets the IDs of all current focus frames.
+
+-   **Returns**: `Array<string>` - An array of all frame IDs.
+
+### `destroy()`
+
+Destroys the manager and removes all associated frames and event listeners.
+
+---
+
+## The `FocusFrame` Class (Internal)
+
+The `FocusFrame` class represents a single rectangular frame. It is not exported directly but is returned by `FocusFrameManager` methods.
+
+### `setActive(active)`
+
+Sets the frame's visual state to active or inactive.
+
+-   **`active`** (`boolean`): `true` to activate, `false` to deactivate.
+
+### `capture()`
+
+Captures the canvas content within the frame's bounds.
+
+-   **Returns**: `string` - The SVG content of the frame as an XML string.
+
+### `async toBitmap([format], [quality])`
+
+Converts the frame's captured content into a bitmap image.
+
+-   **`format`** (`string`, optional): The image format (e.g., `'png'`, `'jpeg'`). Default: `'png'`.
+-   **`quality`** (`number`, optional): The image quality for formats that support it (0 to 1). Default: `1`.
+-   **Returns**: `Promise<Blob>` - A promise that resolves with the image data as a `Blob`.
+
+### `async downloadAsBitmap([filename], [format])`
+
+Triggers a browser download of the frame's content as a bitmap image.
+
+-   **`filename`** (`string`, optional): The desired filename. Default: `focus-frame-{id}.png`.
+-   **`format`** (`string`, optional): The image format. Default: `'png'`.
+
+### `updateBounds(bounds)`
+
+Resizes and/or repositions the frame.
+
+-   **`bounds`** (`object`): An object with the new dimensions and coordinates (`{ x, y, width, height }`).
+
+### `getBounds()`
+
+Gets the current position and size of the frame.
+
+-   **Returns**: `object` - An object containing the frame's bounds (`{ x, y, width, height }`).
+
+### `destroy()`
+
 Removes the frame's visual element from the canvas.

package/docs/api/index.md

@@ -1,106 +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 });
+# OMD Library Entry Point
+
+This module (`omd/core/index.js`) serves as the main entry point for the OMD (On-screen 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/docs/api/main.md

@@ -1,63 +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.
+# 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.