@teachinglab/omd 0.3.0 → 0.3.2

package/docs/api/omdEquationStack.md

@@ -1,141 +1,141 @@
-# omdEquationStack
-
-A renderable component that bundles a sequence of mathematical equations with optional UI controls (toolbar). It extends `jsvgGroup` and acts as a node that can be rendered by an `omdDisplay`.
-
-## Class Definition
-
-```js
-import { omdEquationStack } from './omd/core/omdEquationStack.js';
-```
-
-## Constructor
-
-### `new omdEquationStack(steps, options)`
-
-Creates a new `omdEquationStack` instance.
-
--   **`steps`** (`Array<omdNode>`, optional): An initial array of equation steps. Default: empty array.
--   **`options`** (`object`, optional): Configuration options:
-    -   **`toolbar`** (`boolean` | `object`): If `true`, creates a toolbar for equation operations. Can also be an object for more granular control:
-        -   `enabled` (`boolean`): Whether the toolbar is enabled. Default: `false`.
-        -   `position` (`string`): Where the toolbar should be positioned (`'bottom'`, `'overlay-bottom'`). Default: `'bottom'`.
-        -   `showUndoButton` (`boolean`): Whether to show an undo button. Default: `false`.
-        -   `onUndo` (`function`): Custom undo handler. If not provided, it attempts to call `window.onOMDToolbarUndo`.
-        -   `overlayPadding` (`number`): Padding from the bottom edge when `position` is `'overlay-bottom'`. Default: `34`.
-    -   **`stepVisualizer`** (`boolean`): If `true`, the underlying sequence will be an `omdStepVisualizer` instead of a plain `omdEquationSequenceNode`. Default: `false`.
-    -   **`styling`** (`object`): Styling options for the equation stack:
-        -   `equationBackground` (`object`): Default background style for equation steps (e.g., `{ backgroundColor: '#f0f0f0', cornerRadius: 8, pill: true }`).
-
-## Public Properties
-
--   **`sequence`** (`omdEquationSequenceNode` | `omdStepVisualizer`): The underlying sequence component that manages the equation steps.
--   **`toolbar`** (`omdToolbar` | `undefined`): The toolbar component instance, if enabled.
--   **`layoutGroup`** (`jsvgLayoutGroup`): The internal layout container that arranges the sequence and toolbar vertically.
--   **`options`** (`object`): The merged configuration options passed to the constructor.
--   **`overlayPadding`** (`number`): The calculated padding for the toolbar when it's in an overlay position.
-
-## Public Methods
-
-### `updateLayout()`
-
-Updates the layout and positioning of internal components. This method ensures the sequence and toolbar are correctly arranged and that the toolbar is horizontally centered if it's in-flow.
-
-### `getSequence()`
-
-Returns the underlying sequence instance (either `omdEquationSequenceNode` or `omdStepVisualizer`).
-
--   **Returns**: `omdEquationSequenceNode` | `omdStepVisualizer`.
-
-### `getToolbar()`
-
-Returns the toolbar instance, if one was created during construction.
-
--   **Returns**: `omdToolbar` | `undefined`.
-
-### `getOverlayPadding()`
-
-Returns the padding value used for positioning the toolbar when it's in an overlay mode.
-
--   **Returns**: `number`.
-
-### `getToolbarVisualHeight()`
-
-Returns the unscaled visual height of the toolbar's background element, if the toolbar is present.
-
--   **Returns**: `number`.
-
-### `isToolbarOverlay()`
-
-Checks if the toolbar is configured to be overlaid at the bottom of the container.
-
--   **Returns**: `boolean`.
-
-### `positionToolbarOverlay(containerWidth, containerHeight, padding)`
-
-Positions the toolbar overlay at the bottom center of the container. This method is typically called by the `omdDisplay` to ensure the toolbar remains visible and correctly placed even when the main content scales.
-
--   **`containerWidth`** (`number`): The width of the parent container.
--   **`containerHeight`** (`number`): The height of the parent container.
--   **`padding`** (`number`, optional): Padding from the bottom edge. Default: `16`.
-
-### `undoLastOperation()`
-
-Removes the last equation step and any preceding operation display node from the sequence. This method also triggers a re-layout and updates any associated step visualizer.
-
--   **Returns**: `boolean` - `true` if an operation was successfully undone, `false` otherwise.
-
-## Usage
-
-The `omdEquationStack` component is a complete equation solving interface that combines an equation sequence with an optional toolbar. It automatically handles layout and positioning.
-
-```javascript
-import { omdDisplay } from 'omd';
-import { omdEquationStack } from 'omd';
-import { omdEquationNode } from 'omd';
-
-// Create display
-const container = document.getElementById('math-display');
-const display = new omdDisplay(container);
-
-// Create equation steps
-const steps = [
-    omdEquationNode.fromString('2x + 3 = 11'),
-    omdEquationNode.fromString('2x = 8'),
-    omdEquationNode.fromString('x = 4')
-];
-
-// Basic equation stack with toolbar
-const stack = new omdEquationStack(steps, {
-    toolbar: true
-});
-
-// Render the stack
-display.render(stack);
-
-// Alternative: Create with step visualizer and custom toolbar options
-const stackWithVisualizer = new omdEquationStack(steps, {
-    toolbar: {
-        enabled: true,
-        showUndoButton: true,
-        position: 'overlay-bottom'
-    },
-    stepVisualizer: true,
-    styling: {
-        equationBackground: {
-            backgroundColor: '#e0f7fa',
-            cornerRadius: 10,
-            pill: true
-        }
-    }
-});
-
-display.render(stackWithVisualizer);
-```
-
-## Integration
-
-The equation stack integrates seamlessly with the step visualizer:
-
+# omdEquationStack
+
+A renderable component that bundles a sequence of mathematical equations with optional UI controls (toolbar). It extends `jsvgGroup` and acts as a node that can be rendered by an `omdDisplay`.
+
+## Class Definition
+
+```js
+import { omdEquationStack } from './omd/core/omdEquationStack.js';
+```
+
+## Constructor
+
+### `new omdEquationStack(steps, options)`
+
+Creates a new `omdEquationStack` instance.
+
+-   **`steps`** (`Array<omdNode>`, optional): An initial array of equation steps. Default: empty array.
+-   **`options`** (`object`, optional): Configuration options:
+    -   **`toolbar`** (`boolean` | `object`): If `true`, creates a toolbar for equation operations. Can also be an object for more granular control:
+        -   `enabled` (`boolean`): Whether the toolbar is enabled. Default: `false`.
+        -   `position` (`string`): Where the toolbar should be positioned (`'bottom'`, `'overlay-bottom'`). Default: `'bottom'`.
+        -   `showUndoButton` (`boolean`): Whether to show an undo button. Default: `false`.
+        -   `onUndo` (`function`): Custom undo handler. If not provided, it attempts to call `window.onOMDToolbarUndo`.
+        -   `overlayPadding` (`number`): Padding from the bottom edge when `position` is `'overlay-bottom'`. Default: `34`.
+    -   **`stepVisualizer`** (`boolean`): If `true`, the underlying sequence will be an `omdStepVisualizer` instead of a plain `omdEquationSequenceNode`. Default: `false`.
+    -   **`styling`** (`object`): Styling options for the equation stack:
+        -   `equationBackground` (`object`): Default background style for equation steps (e.g., `{ backgroundColor: '#f0f0f0', cornerRadius: 8, pill: true }`).
+
+## Public Properties
+
+-   **`sequence`** (`omdEquationSequenceNode` | `omdStepVisualizer`): The underlying sequence component that manages the equation steps.
+-   **`toolbar`** (`omdToolbar` | `undefined`): The toolbar component instance, if enabled.
+-   **`layoutGroup`** (`jsvgLayoutGroup`): The internal layout container that arranges the sequence and toolbar vertically.
+-   **`options`** (`object`): The merged configuration options passed to the constructor.
+-   **`overlayPadding`** (`number`): The calculated padding for the toolbar when it's in an overlay position.
+
+## Public Methods
+
+### `updateLayout()`
+
+Updates the layout and positioning of internal components. This method ensures the sequence and toolbar are correctly arranged and that the toolbar is horizontally centered if it's in-flow.
+
+### `getSequence()`
+
+Returns the underlying sequence instance (either `omdEquationSequenceNode` or `omdStepVisualizer`).
+
+-   **Returns**: `omdEquationSequenceNode` | `omdStepVisualizer`.
+
+### `getToolbar()`
+
+Returns the toolbar instance, if one was created during construction.
+
+-   **Returns**: `omdToolbar` | `undefined`.
+
+### `getOverlayPadding()`
+
+Returns the padding value used for positioning the toolbar when it's in an overlay mode.
+
+-   **Returns**: `number`.
+
+### `getToolbarVisualHeight()`
+
+Returns the unscaled visual height of the toolbar's background element, if the toolbar is present.
+
+-   **Returns**: `number`.
+
+### `isToolbarOverlay()`
+
+Checks if the toolbar is configured to be overlaid at the bottom of the container.
+
+-   **Returns**: `boolean`.
+
+### `positionToolbarOverlay(containerWidth, containerHeight, padding)`
+
+Positions the toolbar overlay at the bottom center of the container. This method is typically called by the `omdDisplay` to ensure the toolbar remains visible and correctly placed even when the main content scales.
+
+-   **`containerWidth`** (`number`): The width of the parent container.
+-   **`containerHeight`** (`number`): The height of the parent container.
+-   **`padding`** (`number`, optional): Padding from the bottom edge. Default: `16`.
+
+### `undoLastOperation()`
+
+Removes the last equation step and any preceding operation display node from the sequence. This method also triggers a re-layout and updates any associated step visualizer.
+
+-   **Returns**: `boolean` - `true` if an operation was successfully undone, `false` otherwise.
+
+## Usage
+
+The `omdEquationStack` component is a complete equation solving interface that combines an equation sequence with an optional toolbar. It automatically handles layout and positioning.
+
+```javascript
+import { omdDisplay } from 'omd';
+import { omdEquationStack } from 'omd';
+import { omdEquationNode } from 'omd';
+
+// Create display
+const container = document.getElementById('math-display');
+const display = new omdDisplay(container);
+
+// Create equation steps
+const steps = [
+    omdEquationNode.fromString('2x + 3 = 11'),
+    omdEquationNode.fromString('2x = 8'),
+    omdEquationNode.fromString('x = 4')
+];
+
+// Basic equation stack with toolbar
+const stack = new omdEquationStack(steps, {
+    toolbar: true
+});
+
+// Render the stack
+display.render(stack);
+
+// Alternative: Create with step visualizer and custom toolbar options
+const stackWithVisualizer = new omdEquationStack(steps, {
+    toolbar: {
+        enabled: true,
+        showUndoButton: true,
+        position: 'overlay-bottom'
+    },
+    stepVisualizer: true,
+    styling: {
+        equationBackground: {
+            backgroundColor: '#e0f7fa',
+            cornerRadius: 10,
+            pill: true
+        }
+    }
+});
+
+display.render(stackWithVisualizer);
+```
+
+## Integration
+
+The equation stack integrates seamlessly with the step visualizer:
+
 ```javascript
 import { omdEquationStack } from 'omd';
 import { omdEquationNode } from 'omd';
@@ -162,15 +162,15 @@ display.render(stack);
 // Access the visualizer for programmatic control
 const visualizer = stack.getSequence();
 // visualizer.nextStep(); // Progress through solution steps if interactive
-```
-
-## Layout Behavior
-
-The equation stack automatically manages its internal layout:
-- The sequence is positioned at the top
-- The toolbar (if present) is centered below the sequence
-- Layout updates automatically when content changes
-
+```
+
+## Layout Behavior
+
+The equation stack automatically manages its internal layout:
+- The sequence is positioned at the top
+- The toolbar (if present) is centered below the sequence
+- Layout updates automatically when content changes
+
 ```javascript
 // Create a stack and let it handle layout automatically
 const stack = new omdEquationStack(steps, { toolbar: true });
@@ -181,13 +181,13 @@ stack.updateLayout();
 // Access components
 const sequence = stack.getSequence();
 const toolbar = stack.getToolbar();
-```
-
----
-
-### See Also
-
-- [`omdEquationSequenceNode`](./omdEquationSequenceNode.md)
-- [`omdStepVisualizer`](./omdStepVisualizer.md)
-- [`omdToolbar`](./omdToolbar.md)
+```
+
+---
+
+### See Also
+
+- [`omdEquationSequenceNode`](./omdEquationSequenceNode.md)
+- [`omdStepVisualizer`](./omdStepVisualizer.md)
+- [`omdToolbar`](./omdToolbar.md)
 - [`jsvgGroup`](../../jsvg/jsvg.js)

package/docs/api/omdFunctionNode.md

@@ -1,83 +1,83 @@
-# omdFunctionNode
-
-Represents a mathematical function call, such as `sin(x)`, `sqrt(9)`, or `log(x, 10)`. This node handles the rendering of the function name, its arguments, and surrounding parentheses. It supports evaluation, simplification, and conversion to/from math.js AST.
-
-## Class Definition
-
-```javascript
-export class omdFunctionNode extends omdNode
-```
-
-## Constructor
-
-### `new omdFunctionNode(astNodeData)`
-
-Creates a new `omdFunctionNode` instance.
-
--   **`astNodeData`** (`object`): The math.js AST node for the function. It should contain:
-    -   `fn.name` or `name`: The name of the function (e.g., `"sin"`, `"log"`).
-    -   `args`: An array of AST nodes for the function's arguments.
-
-## Static Methods
-
-### `fromString(functionString)`
-
-Creates an `omdFunctionNode` from a string representation of a function call. This method requires `window.math` (math.js library) to be available globally for parsing.
-
--   **`functionString`** (`string`): The function call as a string (e.g., `"sqrt(16)"`, `"log(100, 10)"`).
--   **Returns**: `omdFunctionNode` - A new instance of `omdFunctionNode`.
--   **Throws**: `Error` if `math.js` is not available, if the string cannot be parsed, or if it does not represent a valid function call.
-
-## Public Properties
-
--   **`functionName`** (`string`): The name of the function (e.g., `"sin"`, `"log"`).
--   **`args`** (`Array<omdNode>`): An array of `omdNode` instances representing the arguments of the function.
-
-## Public Methods
-
-### `computeDimensions()`
-
-Calculates the bounding box of the function node, taking into account the dimensions of the function name, arguments, and parentheses. It also sets the font sizes for the function name and arguments (arguments are typically scaled down slightly).
-
-### `updateLayout()`
-
-Positions the function name, arguments, and parentheses within the node's bounding box. It ensures proper spacing and vertical alignment of all elements.
-
-### `highlightAll()`
-
-Applies a highlight to the function node itself (its background rectangle) and recursively highlights all of its argument nodes.
-
-### `unhighlightAll()`
-
-Removes the highlight from the function node and recursively unhighlights all of its argument nodes.
-
-### `clone()`
-
-Creates a deep, structural clone of the function node, including all its argument nodes and their associated SVG elements. The clone's provenance array is updated to include the original node's ID.
-
--   **Returns**: `omdFunctionNode` - A new, identical instance of the function node.
-
-### `toMathJSNode()`
-
-Converts the `omdFunctionNode` back into its math.js AST representation. This includes converting its function name and all argument nodes.
-
--   **Returns**: `object` - A math.js-compatible `FunctionNode` AST object.
-
-### `toString()`
-
-Converts the function node to its string representation (e.g., `"sqrt(x^2)"`, `"log(100, 10)"`).
-
--   **Returns**: `string` - The function as a string.
-
-### `evaluate(variables)`
-
-Evaluates the function by first evaluating its arguments and then applying the function to the results. It primarily uses `window.math` (math.js) for evaluation. If `math.js` is not available, it falls back to standard JavaScript `Math` functions for common cases (e.g., `sin`, `cos`, `sqrt`).
-
--   **`variables`** (`object`, optional): A map of variable names to their numeric values (e.g., `{ x: 2 }`).
--   **Returns**: `number` - The result of the function evaluation.
--   **Throws**: `Error` if the function is unknown or cannot be evaluated.
-
-## Internal Methods
-
--   **`createTextElements()`**: Creates `jsvgTextLine` elements for the function name and parentheses.
+# omdFunctionNode
+
+Represents a mathematical function call, such as `sin(x)`, `sqrt(9)`, or `log(x, 10)`. This node handles the rendering of the function name, its arguments, and surrounding parentheses. It supports evaluation, simplification, and conversion to/from math.js AST.
+
+## Class Definition
+
+```javascript
+export class omdFunctionNode extends omdNode
+```
+
+## Constructor
+
+### `new omdFunctionNode(astNodeData)`
+
+Creates a new `omdFunctionNode` instance.
+
+-   **`astNodeData`** (`object`): The math.js AST node for the function. It should contain:
+    -   `fn.name` or `name`: The name of the function (e.g., `"sin"`, `"log"`).
+    -   `args`: An array of AST nodes for the function's arguments.
+
+## Static Methods
+
+### `fromString(functionString)`
+
+Creates an `omdFunctionNode` from a string representation of a function call. This method requires `window.math` (math.js library) to be available globally for parsing.
+
+-   **`functionString`** (`string`): The function call as a string (e.g., `"sqrt(16)"`, `"log(100, 10)"`).
+-   **Returns**: `omdFunctionNode` - A new instance of `omdFunctionNode`.
+-   **Throws**: `Error` if `math.js` is not available, if the string cannot be parsed, or if it does not represent a valid function call.
+
+## Public Properties
+
+-   **`functionName`** (`string`): The name of the function (e.g., `"sin"`, `"log"`).
+-   **`args`** (`Array<omdNode>`): An array of `omdNode` instances representing the arguments of the function.
+
+## Public Methods
+
+### `computeDimensions()`
+
+Calculates the bounding box of the function node, taking into account the dimensions of the function name, arguments, and parentheses. It also sets the font sizes for the function name and arguments (arguments are typically scaled down slightly).
+
+### `updateLayout()`
+
+Positions the function name, arguments, and parentheses within the node's bounding box. It ensures proper spacing and vertical alignment of all elements.
+
+### `highlightAll()`
+
+Applies a highlight to the function node itself (its background rectangle) and recursively highlights all of its argument nodes.
+
+### `unhighlightAll()`
+
+Removes the highlight from the function node and recursively unhighlights all of its argument nodes.
+
+### `clone()`
+
+Creates a deep, structural clone of the function node, including all its argument nodes and their associated SVG elements. The clone's provenance array is updated to include the original node's ID.
+
+-   **Returns**: `omdFunctionNode` - A new, identical instance of the function node.
+
+### `toMathJSNode()`
+
+Converts the `omdFunctionNode` back into its math.js AST representation. This includes converting its function name and all argument nodes.
+
+-   **Returns**: `object` - A math.js-compatible `FunctionNode` AST object.
+
+### `toString()`
+
+Converts the function node to its string representation (e.g., `"sqrt(x^2)"`, `"log(100, 10)"`).
+
+-   **Returns**: `string` - The function as a string.
+
+### `evaluate(variables)`
+
+Evaluates the function by first evaluating its arguments and then applying the function to the results. It primarily uses `window.math` (math.js) for evaluation. If `math.js` is not available, it falls back to standard JavaScript `Math` functions for common cases (e.g., `sin`, `cos`, `sqrt`).
+
+-   **`variables`** (`object`, optional): A map of variable names to their numeric values (e.g., `{ x: 2 }`).
+-   **Returns**: `number` - The result of the function evaluation.
+-   **Throws**: `Error` if the function is unknown or cannot be evaluated.
+
+## Internal Methods
+
+-   **`createTextElements()`**: Creates `jsvgTextLine` elements for the function name and parentheses.
 -   **`createArgumentNodes()`**: Iterates through the AST arguments, creates corresponding `omdNode` instances for each, and adds them as children.

package/docs/api/omdGroupNode.md

@@ -1,79 +1,79 @@
-# omdGroupNode
-
-Represents a single grouping symbol, such as `(` or `)`, as a leaf node in the expression tree. This node is primarily used for visual representation and layout, rather than mathematical operations.
-
-## Class Definition
-
-```javascript
-export class omdGroupNode extends omdLeafNode
-```
-
-## Constructor
-
-### `new omdGroupNode(nodeData)`
-
-Creates a new `omdGroupNode` instance.
-
--   **`nodeData`** (`string`): The single character string representing the grouping symbol (e.g., `'('`, `')'`, `'['`, `']'`).
-
-## Public Properties
-
--   **`symbol`** (`string`): The grouping symbol character (e.g., `'('`).
--   **`type`** (`string`): Always `"parenthesis"` for this node type.
--   **`textElement`** (`jsvgTextLine`): The internal `jsvgTextLine` instance responsible for rendering the symbol.
-
-## Public Methods
-
-### `clone()`
-
-Creates a deep clone of the group node. The new node's `provenance` array is updated to include the original node's ID.
-
--   **Returns**: `omdGroupNode` - A new, identical instance of the group node.
-
-### `computeDimensions()`
-
-Calculates the dimensions of the node based on its text content. Unlike other leaf nodes, `omdGroupNode` does *not* add extra padding around the symbol, allowing for tighter visual integration.
-
--   **Overrides**: `omdLeafNode.computeDimensions()`.
-
-### `updateLayout()`
-
-Updates the position of the node's internal text element. This method primarily calls the superclass's `updateLayout`.
-
--   **Overrides**: `omdLeafNode.updateLayout()`.
-
-### `toMathJSNode()`
-
-Converts the `omdGroupNode` to a math.js-compatible AST format. It represents the grouping symbol as a `SymbolNode`.
-
--   **Returns**: `object` - A math.js-compatible AST node with `type: "SymbolNode"` and `name` set to the grouping symbol. The returned object also includes a `clone` method for compatibility.
-
-## Internal Methods
-
--   **`parseSymbol(nodeData)`**: Extracts the symbol from the constructor's `nodeData`. Returns the input string unchanged.
--   **`parseType()`**: Sets the node's type. Always returns `"parenthesis"`.
-
-## Example
-
-```javascript
-// Create grouping symbols
-const leftParen = new omdGroupNode('(');
-const rightParen = new omdGroupNode(')');
-const leftBracket = new omdGroupNode('[');
-
-// Render a symbol
-const node = new omdGroupNode('(');
-node.setFontSize(24);
-node.initialize(); // Computes dimensions and layout
-
-// Add to an SVG container to display
-// const svgContainer = new jsvgContainer();
-// svgContainer.addChild(node);
-// document.body.appendChild(svgContainer.svgObject);
-```
-
-## See Also
-
--   [`omdLeafNode`](./omdLeafNode.md) - The parent class for all leaf nodes.
--   [`omdNode`](./omdNode.md) - The base class for all OMD nodes.
+# omdGroupNode
+
+Represents a single grouping symbol, such as `(` or `)`, as a leaf node in the expression tree. This node is primarily used for visual representation and layout, rather than mathematical operations.
+
+## Class Definition
+
+```javascript
+export class omdGroupNode extends omdLeafNode
+```
+
+## Constructor
+
+### `new omdGroupNode(nodeData)`
+
+Creates a new `omdGroupNode` instance.
+
+-   **`nodeData`** (`string`): The single character string representing the grouping symbol (e.g., `'('`, `')'`, `'['`, `']'`).
+
+## Public Properties
+
+-   **`symbol`** (`string`): The grouping symbol character (e.g., `'('`).
+-   **`type`** (`string`): Always `"parenthesis"` for this node type.
+-   **`textElement`** (`jsvgTextLine`): The internal `jsvgTextLine` instance responsible for rendering the symbol.
+
+## Public Methods
+
+### `clone()`
+
+Creates a deep clone of the group node. The new node's `provenance` array is updated to include the original node's ID.
+
+-   **Returns**: `omdGroupNode` - A new, identical instance of the group node.
+
+### `computeDimensions()`
+
+Calculates the dimensions of the node based on its text content. Unlike other leaf nodes, `omdGroupNode` does *not* add extra padding around the symbol, allowing for tighter visual integration.
+
+-   **Overrides**: `omdLeafNode.computeDimensions()`.
+
+### `updateLayout()`
+
+Updates the position of the node's internal text element. This method primarily calls the superclass's `updateLayout`.
+
+-   **Overrides**: `omdLeafNode.updateLayout()`.
+
+### `toMathJSNode()`
+
+Converts the `omdGroupNode` to a math.js-compatible AST format. It represents the grouping symbol as a `SymbolNode`.
+
+-   **Returns**: `object` - A math.js-compatible AST node with `type: "SymbolNode"` and `name` set to the grouping symbol. The returned object also includes a `clone` method for compatibility.
+
+## Internal Methods
+
+-   **`parseSymbol(nodeData)`**: Extracts the symbol from the constructor's `nodeData`. Returns the input string unchanged.
+-   **`parseType()`**: Sets the node's type. Always returns `"parenthesis"`.
+
+## Example
+
+```javascript
+// Create grouping symbols
+const leftParen = new omdGroupNode('(');
+const rightParen = new omdGroupNode(')');
+const leftBracket = new omdGroupNode('[');
+
+// Render a symbol
+const node = new omdGroupNode('(');
+node.setFontSize(24);
+node.initialize(); // Computes dimensions and layout
+
+// Add to an SVG container to display
+// const svgContainer = new jsvgContainer();
+// svgContainer.addChild(node);
+// document.body.appendChild(svgContainer.svgObject);
+```
+
+## See Also
+
+-   [`omdLeafNode`](./omdLeafNode.md) - The parent class for all leaf nodes.
+-   [`omdNode`](./omdNode.md) - The base class for all OMD nodes.
 -   [`omdParenthesisNode`](./omdParenthesisNode.md) - For complete parenthetical expressions that contain other nodes.