@teachinglab/omd 0.3.0 → 0.3.2

package/docs/api/omdStepVisualizerInteractiveSteps.md

@@ -1,109 +1,109 @@
-# omdStepVisualizerInteractiveSteps
-
-This class creates and manages the interactive text boxes that display detailed explanations for simplification steps within the `omdStepVisualizer`. It formats the messages, handles styling, and sets up hover and click interactions, allowing users to explore the mathematical transformations.
-
-## Class Definition
-
-```javascript
-export class omdStepVisualizerInteractiveSteps
-```
-
-## Constructor
-
-### `new omdStepVisualizerInteractiveSteps(stepVisualizer, simplificationData)`
-
-Creates a new `omdStepVisualizerInteractiveSteps` instance.
-
--   **`stepVisualizer`** (`omdStepVisualizer`): A reference to the `omdStepVisualizer` instance this component is associated with.
--   **`simplificationData`** (`object`): An object containing the simplification details for the step, typically including `message`, `rawMessages`, `ruleNames`, and potentially `operationValueNode`.
-
-During construction, it extracts and cleans messages and rule names from the `simplificationData`, initializes layout properties (like `stepWidth`, `fontSize`), sets up the main `layoutGroup`, and creates the individual step elements.
-
-## Public Properties
-
--   **`stepVisualizer`** (`omdStepVisualizer`): A reference to the associated `omdStepVisualizer` instance.
--   **`simplificationData`** (`object`): The raw data describing the simplification step.
--   **`messages`** (`Array<string>`): Cleaned and extracted messages for each sub-step.
--   **`ruleNames`** (`Array<string>`): Extracted names of the simplification rules applied.
--   **`stepElements`** (`Array<jsvgTextBox>`): An array of `jsvgTextBox` instances, each representing a line of explanation.
--   **`layoutGroup`** (`jsvgLayoutGroup`): The main `jsvgLayoutGroup` that contains all the visual elements of the interactive steps, including the background and individual step messages.
--   **`stepWidth`** (`number`): The fixed width for each step explanation box.
--   **`baseStepHeight`** (`number`): The minimum height for a single step explanation box.
--   **`headerHeight`** (`number`): The height reserved for the header text box.
--   **`fontSize`** (`number`): The base font size for the explanation text.
--   **`smallFontSize`** (`number`): A smaller font size used for secondary text (e.g., step numbers).
--   **`backgroundRect`** (`jsvgRect`): The background rectangle for the entire group of interactive steps.
--   **`contentGroup`** (`jsvgLayoutGroup`): An internal layout group that holds the header and individual step messages.
--   **`onStepHover`** (`Function`): Callback function for hover events on step explanations.
--   **`onStepClick`** (`Function`): Callback function for click events on step explanations.
-
-## Public Methods
-
-### `setOnStepHover(callback)`
-
-Sets a callback function to be executed when the user hovers over a step explanation.
-
--   **`callback`** (`Function`): A function that receives `(stepIndex, message, isEntering)` as arguments.
-
-### `setOnStepClick(callback)`
-
-Sets a callback function to be executed when the user clicks on a step explanation.
-
--   **`callback`** (`Function`): A function that receives `(stepIndex, message)` as arguments.
-
-### `getLayoutGroup()`
-
-Returns the main `jsvgLayoutGroup` containing all the interactive step elements. This group should be added to the parent container (e.g., `omdStepVisualizer`'s `visualContainer`).
-
--   **Returns**: `jsvgLayoutGroup`.
-
-### `setPosition(x, y)`
-
-Sets the position of the entire interactive step group within its parent container.
-
--   **`x`** (`number`): The X-coordinate.
--   **`y`** (`number`): The Y-coordinate.
-
-### `getDimensions()`
-
-Returns the calculated width and height of the interactive step group, including its background.
-
--   **Returns**: `object` - An object with `width` and `height` properties.
-
-### `destroy()`
-
-Cleans up the component by removing all its children, clearing references, and unsetting callbacks.
-
-## Internal Methods
-
--   **`_extractMessages(data)`**: Extracts and cleans messages from the `simplificationData`, removing HTML tags and bullet points.
--   **`_extractRuleNames(data)`**: Extracts rule names from the `simplificationData`, providing default values if not present.
--   **`setupLayoutGroup()`**: Initializes the main `layoutGroup` and creates its `backgroundRect`, setting initial styling.
--   **`createStepElements()`**: Orchestrates the creation of individual step explanation elements. It decides whether to create a single step element or multiple, based on the number of messages.
--   **`createSingleStepElement(message, index)`**: Creates a header and a single `jsvgTextBox` for a step explanation when there's only one message.
--   **`createMultipleStepElements()`**: Creates a header and multiple `jsvgTextBox` elements for step explanations when there are multiple messages, optionally including step numbers.
--   **`createHeaderBox(headerText)`**: Creates a styled `jsvgTextBox` to serve as a header for the explanation group.
--   **`createStepTextBox(message, index, isMultiple)`**: Creates an individual styled `jsvgTextBox` for a step message, calculates its height, and stores relevant step data.
--   **`formatStepContent(message, index, isMultiple)`**: Formats the raw message content into HTML, adding styling for step numbers, bullets, and highlighting operation details (action, value).
--   **`applyStepStyling(stepBox, content, isMultiple)`**: Applies CSS styling to the `jsvgTextBox`'s underlying DOM element and sets its `innerHTML` with the formatted content.
--   **`setupStepInteractions(stepBox)`**: Sets up `mouseenter`, `mouseleave`, and `click` event listeners for a step box, triggering hover and click callbacks.
--   **`calculateStepHeight(message)`**: Dynamically calculates the required height for a step box based on its content, using a temporary DOM element for accurate measurement.
--   **`updateBackgroundSize()`**: Adjusts the size of the `backgroundRect` to fit the dynamically calculated content height and width.
--   **`isOperationMessage(message)`**: Checks if a message string indicates an operation (e.g., "Added X to both sides").
--   **`extractOperationAction(message)`**: Extracts the action verb (e.g., "Added", "Subtracted") from an operation message.
--   **`extractOperationValue(message)`**: Extracts the value (e.g., "3", "x") from an operation message.
--   **`extractOperationValueNode(message)`**: Attempts to extract the `omdNode` representing the value from an operation message, if available in the `simplificationData`.
-
-## How it Works
-
-This class takes simplification data and renders it as a series of interactive text boxes. Each box represents a sub-step or a part of the explanation. It dynamically calculates sizes and positions to ensure the text boxes are readable and visually appealing. Hover and click events on these boxes can be used to trigger further actions, such as highlighting specific nodes in the main equation display.
-
-## Example
-
-This class is typically used internally by `omdStepVisualizerTextBoxes`.
-
-```javascript
-// Example of internal usage within omdStepVisualizerTextBoxes:
-// const interactiveSteps = new omdStepVisualizerInteractiveSteps(this.stepVisualizer, simplificationData);
-// this.stepVisualizer.visualContainer.addChild(interactiveSteps.getLayoutGroup());
+# omdStepVisualizerInteractiveSteps
+
+This class creates and manages the interactive text boxes that display detailed explanations for simplification steps within the `omdStepVisualizer`. It formats the messages, handles styling, and sets up hover and click interactions, allowing users to explore the mathematical transformations.
+
+## Class Definition
+
+```javascript
+export class omdStepVisualizerInteractiveSteps
+```
+
+## Constructor
+
+### `new omdStepVisualizerInteractiveSteps(stepVisualizer, simplificationData)`
+
+Creates a new `omdStepVisualizerInteractiveSteps` instance.
+
+-   **`stepVisualizer`** (`omdStepVisualizer`): A reference to the `omdStepVisualizer` instance this component is associated with.
+-   **`simplificationData`** (`object`): An object containing the simplification details for the step, typically including `message`, `rawMessages`, `ruleNames`, and potentially `operationValueNode`.
+
+During construction, it extracts and cleans messages and rule names from the `simplificationData`, initializes layout properties (like `stepWidth`, `fontSize`), sets up the main `layoutGroup`, and creates the individual step elements.
+
+## Public Properties
+
+-   **`stepVisualizer`** (`omdStepVisualizer`): A reference to the associated `omdStepVisualizer` instance.
+-   **`simplificationData`** (`object`): The raw data describing the simplification step.
+-   **`messages`** (`Array<string>`): Cleaned and extracted messages for each sub-step.
+-   **`ruleNames`** (`Array<string>`): Extracted names of the simplification rules applied.
+-   **`stepElements`** (`Array<jsvgTextBox>`): An array of `jsvgTextBox` instances, each representing a line of explanation.
+-   **`layoutGroup`** (`jsvgLayoutGroup`): The main `jsvgLayoutGroup` that contains all the visual elements of the interactive steps, including the background and individual step messages.
+-   **`stepWidth`** (`number`): The fixed width for each step explanation box.
+-   **`baseStepHeight`** (`number`): The minimum height for a single step explanation box.
+-   **`headerHeight`** (`number`): The height reserved for the header text box.
+-   **`fontSize`** (`number`): The base font size for the explanation text.
+-   **`smallFontSize`** (`number`): A smaller font size used for secondary text (e.g., step numbers).
+-   **`backgroundRect`** (`jsvgRect`): The background rectangle for the entire group of interactive steps.
+-   **`contentGroup`** (`jsvgLayoutGroup`): An internal layout group that holds the header and individual step messages.
+-   **`onStepHover`** (`Function`): Callback function for hover events on step explanations.
+-   **`onStepClick`** (`Function`): Callback function for click events on step explanations.
+
+## Public Methods
+
+### `setOnStepHover(callback)`
+
+Sets a callback function to be executed when the user hovers over a step explanation.
+
+-   **`callback`** (`Function`): A function that receives `(stepIndex, message, isEntering)` as arguments.
+
+### `setOnStepClick(callback)`
+
+Sets a callback function to be executed when the user clicks on a step explanation.
+
+-   **`callback`** (`Function`): A function that receives `(stepIndex, message)` as arguments.
+
+### `getLayoutGroup()`
+
+Returns the main `jsvgLayoutGroup` containing all the interactive step elements. This group should be added to the parent container (e.g., `omdStepVisualizer`'s `visualContainer`).
+
+-   **Returns**: `jsvgLayoutGroup`.
+
+### `setPosition(x, y)`
+
+Sets the position of the entire interactive step group within its parent container.
+
+-   **`x`** (`number`): The X-coordinate.
+-   **`y`** (`number`): The Y-coordinate.
+
+### `getDimensions()`
+
+Returns the calculated width and height of the interactive step group, including its background.
+
+-   **Returns**: `object` - An object with `width` and `height` properties.
+
+### `destroy()`
+
+Cleans up the component by removing all its children, clearing references, and unsetting callbacks.
+
+## Internal Methods
+
+-   **`_extractMessages(data)`**: Extracts and cleans messages from the `simplificationData`, removing HTML tags and bullet points.
+-   **`_extractRuleNames(data)`**: Extracts rule names from the `simplificationData`, providing default values if not present.
+-   **`setupLayoutGroup()`**: Initializes the main `layoutGroup` and creates its `backgroundRect`, setting initial styling.
+-   **`createStepElements()`**: Orchestrates the creation of individual step explanation elements. It decides whether to create a single step element or multiple, based on the number of messages.
+-   **`createSingleStepElement(message, index)`**: Creates a header and a single `jsvgTextBox` for a step explanation when there's only one message.
+-   **`createMultipleStepElements()`**: Creates a header and multiple `jsvgTextBox` elements for step explanations when there are multiple messages, optionally including step numbers.
+-   **`createHeaderBox(headerText)`**: Creates a styled `jsvgTextBox` to serve as a header for the explanation group.
+-   **`createStepTextBox(message, index, isMultiple)`**: Creates an individual styled `jsvgTextBox` for a step message, calculates its height, and stores relevant step data.
+-   **`formatStepContent(message, index, isMultiple)`**: Formats the raw message content into HTML, adding styling for step numbers, bullets, and highlighting operation details (action, value).
+-   **`applyStepStyling(stepBox, content, isMultiple)`**: Applies CSS styling to the `jsvgTextBox`'s underlying DOM element and sets its `innerHTML` with the formatted content.
+-   **`setupStepInteractions(stepBox)`**: Sets up `mouseenter`, `mouseleave`, and `click` event listeners for a step box, triggering hover and click callbacks.
+-   **`calculateStepHeight(message)`**: Dynamically calculates the required height for a step box based on its content, using a temporary DOM element for accurate measurement.
+-   **`updateBackgroundSize()`**: Adjusts the size of the `backgroundRect` to fit the dynamically calculated content height and width.
+-   **`isOperationMessage(message)`**: Checks if a message string indicates an operation (e.g., "Added X to both sides").
+-   **`extractOperationAction(message)`**: Extracts the action verb (e.g., "Added", "Subtracted") from an operation message.
+-   **`extractOperationValue(message)`**: Extracts the value (e.g., "3", "x") from an operation message.
+-   **`extractOperationValueNode(message)`**: Attempts to extract the `omdNode` representing the value from an operation message, if available in the `simplificationData`.
+
+## How it Works
+
+This class takes simplification data and renders it as a series of interactive text boxes. Each box represents a sub-step or a part of the explanation. It dynamically calculates sizes and positions to ensure the text boxes are readable and visually appealing. Hover and click events on these boxes can be used to trigger further actions, such as highlighting specific nodes in the main equation display.
+
+## Example
+
+This class is typically used internally by `omdStepVisualizerTextBoxes`.
+
+```javascript
+// Example of internal usage within omdStepVisualizerTextBoxes:
+// const interactiveSteps = new omdStepVisualizerInteractiveSteps(this.stepVisualizer, simplificationData);
+// this.stepVisualizer.visualContainer.addChild(interactiveSteps.getLayoutGroup());
 ```

package/docs/api/omdStepVisualizerLayout.md

@@ -1,71 +1,71 @@
-# omdStepVisualizerLayout
-
-Manages the visual layout, positioning, and visibility of elements within the `omdStepVisualizer`. It ensures that step dots, connecting lines, and associated text boxes are correctly positioned relative to the mathematical equations, maintaining a clean and interactive display.
-
-## Class Definition
-
-```javascript
-export class omdStepVisualizerLayout
-```
-
-## Constructor
-
-### `new omdStepVisualizerLayout(stepVisualizer)`
-
-Creates a new `omdStepVisualizerLayout` instance.
-
--   **`stepVisualizer`** (`omdStepVisualizer`): A reference to the `omdStepVisualizer` instance this layout manager will control.
-
-## Public Properties
-
--   **`stepVisualizer`** (`omdStepVisualizer`): The associated `omdStepVisualizer` instance.
-
-## Public Methods
-
-### `updateVisualLayout()`
-
-Calculates and applies the positions of all visual elements (dots, lines, text boxes) relative to the mathematical equations in the sequence. It ensures proper alignment and spacing, accounting for factors like equation background padding and the dynamic size of text boxes.
-
-### `findDotIndexForEquation(equation)`
-
-Finds the index of the step dot associated with a given `omdEquationNode` within the `stepVisualizer.stepDots` array.
-
--   **`equation`** (`omdEquationNode`): The equation node to find the corresponding dot for.
--   **Returns**: `number` - The 0-based index of the dot, or `-1` if not found.
-
-### `updateVisualZOrder()`
-
-Manages the z-order (stacking order) of the visual elements to ensure they are rendered correctly. Lines are placed behind dots, and text boxes are placed on top of everything else.
-
-### `updateAllLinePositions()`
-
-Recalculates and updates the start and end points of all connecting lines between the step dots. This ensures lines accurately connect the centers of the dots, even after layout changes.
-
-### `updateVisualVisibility()`
-
-Adjusts the visibility of the step dots and lines based on the visibility of their corresponding equations. It also dynamically re-creates line segments only between currently visible dots, ensuring no lines are drawn to hidden steps.
-
-### `updateDotClickability(dot)`
-
-Enables or disables the click functionality for a specific step dot. It sets the cursor style to `"pointer"` when clickable and `"default"` otherwise, and attaches/detaches the `onclick` event handler.
-
--   **`dot`** (`jsvgEllipse`): The `jsvgEllipse` element representing the dot.
-
-## Internal Methods
-
--   **`_getMaxEquationEffectivePaddingX()`**: Computes the maximum effective horizontal padding (x) among all visible `omdEquationNode` steps. This value is used to offset the visual tracker, preventing overlap with equation backgrounds.
-
-## How it Works
-
-This class works in conjunction with `omdStepVisualizer` to dynamically arrange the visual components. When the sequence of equations changes (e.g., steps are added or hidden), `omdStepVisualizer` calls methods on this layout manager to re-calculate and apply the new visual arrangement.
-
-## Example
-
-This class is primarily used internally by `omdStepVisualizer`:
-
-```javascript
-// Inside omdStepVisualizer's updateLayout method:
-this.layoutManager.updateVisualLayout();
-this.layoutManager.updateVisualVisibility();
-this.layoutManager.updateAllLinePositions();
+# omdStepVisualizerLayout
+
+Manages the visual layout, positioning, and visibility of elements within the `omdStepVisualizer`. It ensures that step dots, connecting lines, and associated text boxes are correctly positioned relative to the mathematical equations, maintaining a clean and interactive display.
+
+## Class Definition
+
+```javascript
+export class omdStepVisualizerLayout
+```
+
+## Constructor
+
+### `new omdStepVisualizerLayout(stepVisualizer)`
+
+Creates a new `omdStepVisualizerLayout` instance.
+
+-   **`stepVisualizer`** (`omdStepVisualizer`): A reference to the `omdStepVisualizer` instance this layout manager will control.
+
+## Public Properties
+
+-   **`stepVisualizer`** (`omdStepVisualizer`): The associated `omdStepVisualizer` instance.
+
+## Public Methods
+
+### `updateVisualLayout()`
+
+Calculates and applies the positions of all visual elements (dots, lines, text boxes) relative to the mathematical equations in the sequence. It ensures proper alignment and spacing, accounting for factors like equation background padding and the dynamic size of text boxes.
+
+### `findDotIndexForEquation(equation)`
+
+Finds the index of the step dot associated with a given `omdEquationNode` within the `stepVisualizer.stepDots` array.
+
+-   **`equation`** (`omdEquationNode`): The equation node to find the corresponding dot for.
+-   **Returns**: `number` - The 0-based index of the dot, or `-1` if not found.
+
+### `updateVisualZOrder()`
+
+Manages the z-order (stacking order) of the visual elements to ensure they are rendered correctly. Lines are placed behind dots, and text boxes are placed on top of everything else.
+
+### `updateAllLinePositions()`
+
+Recalculates and updates the start and end points of all connecting lines between the step dots. This ensures lines accurately connect the centers of the dots, even after layout changes.
+
+### `updateVisualVisibility()`
+
+Adjusts the visibility of the step dots and lines based on the visibility of their corresponding equations. It also dynamically re-creates line segments only between currently visible dots, ensuring no lines are drawn to hidden steps.
+
+### `updateDotClickability(dot)`
+
+Enables or disables the click functionality for a specific step dot. It sets the cursor style to `"pointer"` when clickable and `"default"` otherwise, and attaches/detaches the `onclick` event handler.
+
+-   **`dot`** (`jsvgEllipse`): The `jsvgEllipse` element representing the dot.
+
+## Internal Methods
+
+-   **`_getMaxEquationEffectivePaddingX()`**: Computes the maximum effective horizontal padding (x) among all visible `omdEquationNode` steps. This value is used to offset the visual tracker, preventing overlap with equation backgrounds.
+
+## How it Works
+
+This class works in conjunction with `omdStepVisualizer` to dynamically arrange the visual components. When the sequence of equations changes (e.g., steps are added or hidden), `omdStepVisualizer` calls methods on this layout manager to re-calculate and apply the new visual arrangement.
+
+## Example
+
+This class is primarily used internally by `omdStepVisualizer`:
+
+```javascript
+// Inside omdStepVisualizer's updateLayout method:
+this.layoutManager.updateVisualLayout();
+this.layoutManager.updateVisualVisibility();
+this.layoutManager.updateAllLinePositions();
 ```

package/docs/api/omdStepVisualizerTextBoxes.md

@@ -1,77 +1,77 @@
-# omdStepVisualizerTextBoxes
-
-Manages the interactive text boxes that appear when a step dot is clicked in the `omdStepVisualizer`. This class handles the creation, positioning, and removal of these explanation popups, and integrates with highlighting and layout managers for a cohesive user experience.
-
-## Class Definition
-
-```javascript
-export class omdStepVisualizerTextBoxes
-```
-
-## Constructor
-
-### `new omdStepVisualizerTextBoxes(stepVisualizer, highlighting)`
-
-Creates a new `omdStepVisualizerTextBoxes` instance.
-
--   **`stepVisualizer`** (`omdStepVisualizer`): A reference to the `omdStepVisualizer` instance.
--   **`highlighting`** (`omdStepVisualizerHighlighting`): A reference to the highlighting manager.
-
-During construction, it initializes the `stepTextBoxes` array, which will store references to active text boxes.
-
-## Public Properties
-
--   **`stepVisualizer`** (`omdStepVisualizer`): The associated step visualizer instance.
--   **`highlighting`** (`omdStepVisualizerHighlighting`): The associated highlighting instance.
--   **`stepTextBoxes`** (`Array<object>`): An array of objects, each representing an active text box. Each object contains `dotIndex`, `interactiveSteps` (the `omdStepVisualizerInteractiveSteps` instance), and `layoutGroup` (its `jsvgLayoutGroup`).
-
-## Public Methods
-
-### `createTextBoxForDot(dotIndex)`
-
-Creates and displays an interactive text box for the specified step dot. This involves retrieving simplification data, finding the appropriate positioning reference, and then creating and adding the `omdStepVisualizerInteractiveSteps` component to the visualizer's container.
-
--   **`dotIndex`** (`number`): The index of the dot for which to create the text box.
-
-### `removeTextBoxForDot(dotIndex)`
-
-Removes the text box associated with the specified step dot. It destroys the `omdStepVisualizerInteractiveSteps` instance and removes its `layoutGroup` from the visual container, then triggers a layout update.
-
--   **`dotIndex`** (`number`): The index of the dot whose text box should be removed.
-
-### `clearAllTextBoxes()`
-
-Removes all active text boxes from the visualizer. It iterates through all tracked text boxes, destroys their `interactiveSteps` instances, removes their `layoutGroup`s from the visual container, and then clears the `stepTextBoxes` array. A layout update is triggered afterwards.
-
-### `getStepTextBoxes()`
-
-Returns an array of all currently active text box objects managed by this class.
-
--   **Returns**: `Array<object>`.
-
-## Internal Methods
-
--   **`_createInteractiveStepsForDot(dotIndex, targetDot, simplificationData)`**: Creates and configures an `omdStepVisualizerInteractiveSteps` instance. It positions the text box relative to the `targetDot`, sets up hover and click interactions, and adds the text box's `layoutGroup` to the `stepVisualizer.visualContainer`.
--   **`_findDotAboveForPositioning(dotIndex)`**: Determines the appropriate `omdEquationNode` (and its corresponding dot) to position the text box relative to. It searches for the nearest visible equation above the clicked dot, falling back to the clicked dot itself if no such equation is found.
--   **`_getSimplificationDataForDot(dotIndex)`**: Retrieves the simplification data for a given dot by delegating the call to the `stepVisualizer`'s internal method (`stepVisualizer._getSimplificationDataForDot`).
-
-## How it Works
-
-When a user clicks a step dot in the `omdStepVisualizer`, this class:
-
-1.  **Fetches Data**: Requests simplification data from the step visualizer for the clicked step.
-2.  **Creates UI**: Instantiates an `omdStepVisualizerInteractiveSteps` component, which renders the explanation text and interactive elements.
-3.  **Positions**: Calculates the optimal position for the text box, usually to the right of the step dot, and ensures it doesn't overlap with other elements.
-4.  **Highlighting Integration**: Works with `omdStepVisualizerHighlighting` to trigger visual feedback when the text box is displayed or interacted with.
-
-## Example
-
-This class is primarily used internally by `omdStepVisualizer`:
-
-```javascript
-// Inside omdStepVisualizer's _handleDotClick method:
-this.textBoxManager.createTextBoxForDot(dotIndex);
-
-// Inside omdStepVisualizer's _clearActiveDot method:
-this.textBoxManager.removeTextBoxForDot(this.activeDotIndex);
+# omdStepVisualizerTextBoxes
+
+Manages the interactive text boxes that appear when a step dot is clicked in the `omdStepVisualizer`. This class handles the creation, positioning, and removal of these explanation popups, and integrates with highlighting and layout managers for a cohesive user experience.
+
+## Class Definition
+
+```javascript
+export class omdStepVisualizerTextBoxes
+```
+
+## Constructor
+
+### `new omdStepVisualizerTextBoxes(stepVisualizer, highlighting)`
+
+Creates a new `omdStepVisualizerTextBoxes` instance.
+
+-   **`stepVisualizer`** (`omdStepVisualizer`): A reference to the `omdStepVisualizer` instance.
+-   **`highlighting`** (`omdStepVisualizerHighlighting`): A reference to the highlighting manager.
+
+During construction, it initializes the `stepTextBoxes` array, which will store references to active text boxes.
+
+## Public Properties
+
+-   **`stepVisualizer`** (`omdStepVisualizer`): The associated step visualizer instance.
+-   **`highlighting`** (`omdStepVisualizerHighlighting`): The associated highlighting instance.
+-   **`stepTextBoxes`** (`Array<object>`): An array of objects, each representing an active text box. Each object contains `dotIndex`, `interactiveSteps` (the `omdStepVisualizerInteractiveSteps` instance), and `layoutGroup` (its `jsvgLayoutGroup`).
+
+## Public Methods
+
+### `createTextBoxForDot(dotIndex)`
+
+Creates and displays an interactive text box for the specified step dot. This involves retrieving simplification data, finding the appropriate positioning reference, and then creating and adding the `omdStepVisualizerInteractiveSteps` component to the visualizer's container.
+
+-   **`dotIndex`** (`number`): The index of the dot for which to create the text box.
+
+### `removeTextBoxForDot(dotIndex)`
+
+Removes the text box associated with the specified step dot. It destroys the `omdStepVisualizerInteractiveSteps` instance and removes its `layoutGroup` from the visual container, then triggers a layout update.
+
+-   **`dotIndex`** (`number`): The index of the dot whose text box should be removed.
+
+### `clearAllTextBoxes()`
+
+Removes all active text boxes from the visualizer. It iterates through all tracked text boxes, destroys their `interactiveSteps` instances, removes their `layoutGroup`s from the visual container, and then clears the `stepTextBoxes` array. A layout update is triggered afterwards.
+
+### `getStepTextBoxes()`
+
+Returns an array of all currently active text box objects managed by this class.
+
+-   **Returns**: `Array<object>`.
+
+## Internal Methods
+
+-   **`_createInteractiveStepsForDot(dotIndex, targetDot, simplificationData)`**: Creates and configures an `omdStepVisualizerInteractiveSteps` instance. It positions the text box relative to the `targetDot`, sets up hover and click interactions, and adds the text box's `layoutGroup` to the `stepVisualizer.visualContainer`.
+-   **`_findDotAboveForPositioning(dotIndex)`**: Determines the appropriate `omdEquationNode` (and its corresponding dot) to position the text box relative to. It searches for the nearest visible equation above the clicked dot, falling back to the clicked dot itself if no such equation is found.
+-   **`_getSimplificationDataForDot(dotIndex)`**: Retrieves the simplification data for a given dot by delegating the call to the `stepVisualizer`'s internal method (`stepVisualizer._getSimplificationDataForDot`).
+
+## How it Works
+
+When a user clicks a step dot in the `omdStepVisualizer`, this class:
+
+1.  **Fetches Data**: Requests simplification data from the step visualizer for the clicked step.
+2.  **Creates UI**: Instantiates an `omdStepVisualizerInteractiveSteps` component, which renders the explanation text and interactive elements.
+3.  **Positions**: Calculates the optimal position for the text box, usually to the right of the step dot, and ensures it doesn't overlap with other elements.
+4.  **Highlighting Integration**: Works with `omdStepVisualizerHighlighting` to trigger visual feedback when the text box is displayed or interacted with.
+
+## Example
+
+This class is primarily used internally by `omdStepVisualizer`:
+
+```javascript
+// Inside omdStepVisualizer's _handleDotClick method:
+this.textBoxManager.createTextBoxForDot(dotIndex);
+
+// Inside omdStepVisualizer's _clearActiveDot method:
+this.textBoxManager.removeTextBoxForDot(this.activeDotIndex);
 ```