@teachinglab/omd 0.2.8 → 0.2.10

package/README.md

@@ -1,4 +1,4 @@
-# OMD (On-screen Math Display)
+# OMD (Open Math Display)
 
 OMD is a JavaScript library for creating interactive mathematical interfaces in web applications. Build everything from simple equation displays to complex step-by-step solution systems with rich visual feedback and user interaction.
 

package/canvas/core/omdCanvas.js

@@ -217,6 +217,8 @@ export class omdCanvas {
         const stroke = this.strokes.get(strokeId);
         if (!stroke) return false;
         
+        console.log('[Canvas Debug] Removing stroke:', strokeId, 'Remaining strokes:', this.strokes.size - 1);
+        
         if (stroke.element.parentNode) {
             stroke.element.parentNode.removeChild(stroke.element);
         }
@@ -232,6 +234,8 @@ export class omdCanvas {
      * Clear all strokes
      */
     clear() {
+        console.log('[Canvas Debug] Clearing all strokes. Current count:', this.strokes.size);
+        
         this.strokes.forEach((stroke, id) => {
             if (stroke.element.parentNode) {
                 stroke.element.parentNode.removeChild(stroke.element);
@@ -241,6 +245,7 @@ export class omdCanvas {
         this.strokes.clear();
         this.selectedStrokes.clear();
         
+        console.log('[Canvas Debug] Canvas cleared. Stroke count now:', this.strokes.size);
         this.emit('cleared');
     }
     

package/canvas/drawing/stroke.js

@@ -1,5 +1,5 @@
 import { BoundingBox } from '../utils/boundingBox.js';
-
+import { jsvgPath } from '@teachinglab/jsvg';
 /**
  * Represents a drawing stroke made up of connected points
  */

package/canvas/index.js

@@ -19,7 +19,7 @@ export { Cursor } from './ui/cursor.js';
 
 // Drawing objects
 export { Stroke } from './drawing/stroke.js';
-export { segment } from './drawing/Segment.js';
+export { segment } from './drawing/segment.js';
 
 // Utilities
 export { BoundingBox } from './utils/boundingBox.js';

package/canvas/tools/PencilTool.js

@@ -33,6 +33,8 @@ export class PencilTool extends Tool {
     onPointerDown(event) {
         if (!this.canUse()) return;
         
+        console.log('[Pencil Debug] Starting new stroke at:', event.x, event.y);
+        
         this.isDrawing = true;
         this.points = [];
         this.lastPoint = { x: event.x, y: event.y };
@@ -51,7 +53,8 @@ export class PencilTool extends Tool {
         this.addPoint(event.x, event.y, event.pressure);
         
         // Add stroke to canvas
-        this.canvas.addStroke(this.currentStroke);
+        const strokeId = this.canvas.addStroke(this.currentStroke);
+        console.log('[Pencil Debug] Added stroke to canvas with ID:', strokeId, 'Total strokes:', this.canvas.strokes.size);
         
         this.canvas.emit('strokeStarted', {
             stroke: this.currentStroke,
@@ -99,6 +102,8 @@ export class PencilTool extends Tool {
         // Finish the stroke
         this.currentStroke.finish();
         
+        console.log('[Pencil Debug] Finished stroke with', this.points.length, 'points. Canvas now has', this.canvas.strokes.size, 'strokes');
+        
         this.canvas.emit('strokeCompleted', {
             stroke: this.currentStroke,
             tool: this.name,

package/docs/api-reference.md

@@ -1,6 +1,6 @@
 # OMD Library API Reference
 
-> This is the complete API reference for the OMD (On-screen Math Display) library. Use the table of contents below to navigate to the detailed documentation for each module and class.
+> This is the complete API reference for the OMD (Open Math Display) library. Use the table of contents below to navigate to the detailed documentation for each module and class.
 
 ---
 

package/docs/index.md

@@ -0,0 +1,39 @@
+# OMD Documentation
+
+Welcome to the Open Math Display (OMD) documentation.
+
+## Getting Started
+
+- [User Guide](user-guide.html) - Learn how to use OMD in your projects
+- [API Reference](api-reference.html) - Complete API documentation
+
+## API Documentation
+
+### Core Classes
+- [omdNode](api/omdNode.html) - Base node class
+- [omdLeafNode](api/omdLeafNode.html) - Leaf nodes (numbers, variables)
+- [omdGroupNode](api/omdGroupNode.html) - Group/container nodes
+- [omdOperatorNode](api/omdOperatorNode.html) - Mathematical operators
+- [omdFunctionNode](api/omdFunctionNode.html) - Function nodes
+- [omdPowerNode](api/omdPowerNode.html) - Exponent/power nodes
+- [omdRationalNode](api/omdRationalNode.html) - Fraction nodes
+- [omdSqrtNode](api/omdSqrtNode.html) - Square root nodes
+
+### Display & Visualization
+- [omdStepVisualizer](api/omdStepVisualizer.html) - Step-by-step visualization
+- [omdSimplification](api/omdSimplification.html) - Expression simplification
+- [omdPopup](api/omdPopup.html) - Popup overlay system
+
+### Utilities & Helpers
+- [omdHelpers](api/omdHelpers.html) - Utility functions
+- [eventManager](api/eventManager.html) - Event handling
+- [focusFrameManager](api/focusFrameManager.html) - Focus frame management
+- [configuration-options](api/configuration-options.html) - Configuration options
+
+## Examples
+
+Visit the [examples directory](../examples/index.html) to see OMD in action.
+
+## Contributing
+
+See the main [README](../readme.html) for information about contributing to OMD.

package/omd/core/omdEquationStack.js

@@ -467,10 +467,18 @@ export class omdEquationStack extends jsvgGroup {
         // If this is a step visualizer, rebuild its dots/lines
         if (typeof seq.rebuildVisualizer === 'function') {
             try {
+                // Clear all step visualizer highlights before rebuilding
+                if (seq.highlighting && typeof seq.highlighting.clearAllExplainHighlights === 'function') {
+                    seq.highlighting.clearAllExplainHighlights();
+                }
                 seq.rebuildVisualizer();
             } catch (_) {}
         } else if (typeof seq._initializeVisualElements === 'function') {
             try {
+                // Clear all step visualizer highlights before rebuilding
+                if (seq.highlighting && typeof seq.highlighting.clearAllExplainHighlights === 'function') {
+                    seq.highlighting.clearAllExplainHighlights();
+                }
                 seq._initializeVisualElements();
                 if (typeof seq.computeDimensions === 'function') seq.computeDimensions();
                 if (typeof seq.updateLayout === 'function') seq.updateLayout();

package/omd/display/omdDisplay.js

@@ -28,6 +28,13 @@ export class omdDisplay {
         this.svg = new jsvgContainer();
         this.node = null;
 
+        // Internal guards to prevent recursive resize induced growth
+        this._suppressResizeObserver = false; // When true, _handleResize is a no-op
+        this._lastViewbox = null;             // Cache last applied viewBox string
+        this._lastContentExtents = null;      // Cache last measured content extents to detect real growth
+        this._viewboxLocked = false;          // When true, suppress micro growth adjustments
+        this._viewboxLockThreshold = 8;       // Require at least 8px growth once locked
+
         // Set up the SVG
         this._setupSVG();
     }
@@ -65,8 +72,13 @@ export class omdDisplay {
     }
 
     _handleResize() {
+        if (this._suppressResizeObserver) return; // Prevent re-entrant resize loops
         const width = this.container.offsetWidth;
         const height = this.container.offsetHeight;
+        // Skip if size unchanged; avoids loops where internal changes trigger observer without real container delta
+        if (this._lastContainerWidth === width && this._lastContainerHeight === height) return;
+        this._lastContainerWidth = width;
+        this._lastContainerHeight = height;
         this.svg.setViewbox(width, height);
 
         if (this.options.centerContent && this.node) {
@@ -132,8 +144,50 @@ export class omdDisplay {
         const desiredW = Math.max(curW, desiredRight - desiredX);
         const desiredH = Math.max(curH, desiredBottom - desiredY);
 
-        if (desiredW !== curW || desiredH !== curH) {
-            this.svg.svgObject.setAttribute('viewBox', `${desiredX} ${desiredY} ${desiredW} ${desiredH}`);
+        // Guard: If the desired size change is negligible (< 0.5px), skip.
+        const widthDelta = Math.abs(desiredW - curW);
+        const heightDelta = Math.abs(desiredH - curH);
+
+        // Safety cap to avoid runaway expansion due to logic errors.
+        const MAX_DIM = 10000; // arbitrary large but finite limit
+        if (desiredW > MAX_DIM || desiredH > MAX_DIM) {
+            console.warn('omdDisplay: viewBox growth capped to prevent runaway expansion', desiredW, desiredH);
+            return;
+        }
+
+        if (widthDelta < 0.5 && heightDelta < 0.5) return;
+
+        // Detect repeated growth with identical content extents (suggests feedback loop)
+        const curExtSignature = `${minX},${minY},${maxX},${maxY}`;
+        if (this._lastContentExtents === curExtSignature && heightDelta > 0 && desiredH > curH) {
+            return; // content unchanged, skip
+        }
+
+        // If locked, only allow substantial growth
+        if (this._viewboxLocked) {
+            const growW = desiredW - curW;
+            const growH = desiredH - curH;
+            if (growW < this._viewboxLockThreshold && growH < this._viewboxLockThreshold) {
+                return; // ignore micro growth attempts
+            }
+        }
+
+        const newViewBox = `${desiredX} ${desiredY} ${desiredW} ${desiredH}`;
+        if (this._lastViewbox === newViewBox) return;
+
+        this._suppressResizeObserver = true;
+        try {
+            this.svg.svgObject.setAttribute('viewBox', newViewBox);
+        } finally {
+            // Allow ResizeObserver events after microtask; use timeout to defer
+            setTimeout(() => { this._suppressResizeObserver = false; }, 0);
+        }
+        this._lastViewbox = newViewBox;
+        this._lastContentExtents = curExtSignature;
+
+        // Lock if the growth applied was small; prevents future tiny increments
+        if (heightDelta < 2 && widthDelta < 2 && !this._viewboxLocked) {
+            this._viewboxLocked = true;
         }
     }
 
@@ -397,6 +451,12 @@ export class omdDisplay {
 
     centerNode() {
         if (!this.node) return;
+        if (!this._centerCallCount) this._centerCallCount = 0;
+        this._centerCallCount++;
+        if (this._centerCallCount > 500) {
+            console.warn('omdDisplay: excessive centerNode calls detected; halting further centering to prevent loop');
+            return;
+        }
         const containerWidth = this.container.offsetWidth || 0;
         const containerHeight = this.container.offsetHeight || 0;
 
@@ -423,7 +483,6 @@ export class omdDisplay {
                     // For step visualizers, use sequenceWidth/Height instead of total dimensions to exclude visualizer elements from autoscale
                     contentWidth = seq.sequenceWidth || seq.width;
                     contentHeight = seq.sequenceHeight || seq.height;
-                    console.log('omdDisplay: Using sequence dimensions for autoscale - sequenceWidth:', seq.sequenceWidth, 'sequenceHeight:', seq.sequenceHeight, 'width:', seq.width, 'height:', seq.height, 'contentWidth:', contentWidth, 'contentHeight:', contentHeight);
                 }
                 if (seq.getCurrentStep) {
                     const step = seq.getCurrentStep();
@@ -433,12 +492,10 @@ export class omdDisplay {
                         const stepHeight = seq.sequenceHeight || step.height;
                         contentWidth = Math.max(contentWidth, stepWidth);
                         contentHeight = Math.max(contentHeight, stepHeight);
-                        console.log('omdDisplay: Considering step dimensions - stepWidth:', stepWidth, 'stepHeight:', stepHeight, 'finalContentWidth:', contentWidth, 'finalContentHeight:', contentHeight);
                     }
                 }
             }
         }
-        console.log('omdDisplay: Final content dimensions for autoscale - width:', contentWidth, 'height:', contentHeight);
 
         // Compute scale to keep within bounds
         let scale = 1;
@@ -458,14 +515,12 @@ export class omdDisplay {
             if (this.node) {
                 const ctorName = this.node.constructor?.name;
                 hasStepVisualizer = (ctorName === 'omdStepVisualizer') || this.node.type === 'omdStepVisualizer' || (typeof omdStepVisualizer !== 'undefined' && this.node instanceof omdStepVisualizer);
-                console.log('omdDisplay: Step visualizer detection (node) ctor:', ctorName, 'type:', this.node.type, 'detected:', hasStepVisualizer);
             }
 
             if (hasStepVisualizer) {
                 // Preserve existing scale if already set on node; otherwise lock to 1.
                 const existingScale = (this.node && typeof this.node.scale === 'number') ? this.node.scale : undefined;
                 scale = (existingScale && existingScale > 0) ? existingScale : 1;
-                console.log('omdDisplay: Step visualizer detected - locking scale at', scale);
             } else {
                 const hPad = this.options.edgePadding || 0;
                 const vPadTop = this.options.topMargin || 0;
@@ -483,7 +538,6 @@ export class omdDisplay {
                 const maxScale = (typeof this.options.maxScale === 'number') ? this.options.maxScale : 1;
                 scale = Math.min(sx, sy, maxScale);
                 if (!isFinite(scale) || scale <= 0) scale = 1;
-                console.log('omdDisplay: Autoscale calculation - availW:', availW, 'availH:', availH, 'contentW:', contentWidth, 'contentH:', contentHeight, 'scale:', scale);
             }
         }
 
@@ -511,6 +565,14 @@ export class omdDisplay {
         const willOverflowHoriz = scaledWidthFinal > containerWidth;
         const willOverflowVert = totalNeededH > containerHeight;
 
+        // Avoid looping if content dimension signature hasn't changed
+        const contentSig = `${contentWidth}x${contentHeight}x${scale}`;
+        if (this._lastCenterSignature === contentSig && !willOverflowHoriz && !willOverflowVert) {
+            // Only update position; skip expensive ensureViewboxFits
+            if (this.node.setPosition) this.node.setPosition(x, this.options.topMargin);
+            return;
+        }
+
         if (willOverflowHoriz || willOverflowVert) {
             // Set scale but do NOT reposition node (preserve its absolute positions).
             if (this.node.setScale) this.node.setScale(scale);
@@ -546,6 +608,8 @@ export class omdDisplay {
             }
             if (this.options.debugExtents) this._drawDebugOverlays();
         }
+
+        this._lastCenterSignature = contentSig;
     }
 
     fitToContent() {
@@ -880,4 +944,12 @@ export class omdDisplay {
             node.positionToolbarOverlay(containerWidth, containerHeight, padding);
         }
     }
+
+    /**
+     * Public API: returns the currently rendered root node (could be a step visualizer, sequence, or plain node)
+     * @returns {object|null}
+     */
+    getCurrentNode() {
+        return this.node;
+    }
 }

package/omd/nodes/omdEquationNode.js

@@ -1279,6 +1279,20 @@ _propagateBackgroundStyle(style, visited = new Set()) {
             if (node.operation === 'add' || node.operation === 'plus') {
                 values.push(...leftValues, ...rightValues);
             } 
+            // For subtraction, add left values and negate right values
+            else if (node.operation === 'subtract' || node.operation === 'minus') {
+                values.push(...leftValues);
+                // For subtraction, we need to represent negative values
+                for (const rightValue of rightValues) {
+                    if (typeof rightValue === 'number') {
+                        // Negate numeric values
+                        values.push(-rightValue);
+                    } else {
+                        // For variables/expressions, prepend with negative sign
+                        values.push(`-${rightValue}`);
+                    }
+                }
+            }
             // For multiplication, handle special cases
             else if (node.operation === 'multiply') {
                 // Check if one operand is a constant (coefficient)

package/omd/step-visualizer/omdStepVisualizer.js

@@ -86,7 +86,6 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
                 this.textBoxManager.clearAllTextBoxes();
             }
             const after = this.textBoxManager?.stepTextBoxes?.length || 0;
-            if (before !== after) console.log('omdStepVisualizer: closeActiveDot removed text boxes', before, '->', after);
         } catch (e) { /* no-op */ }
     }
 
@@ -136,7 +135,7 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
             // Text boxes
             textBoxOptions: {
                 backgroundColor: omdColor.white,
-                borderColor: omdColor.lightGray,
+                borderColor: 'none',
                 borderWidth: 1,
                 borderRadius: 5,
                 padding: 8, // Minimal padding for tight fit
@@ -347,6 +346,11 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      * Force rebuild visual container (dots/lines) from scratch
      */
     rebuildVisualizer() {
+        // Clear all step visualizer highlights before rebuilding
+        if (this.highlighting && typeof this.highlighting.clearAllExplainHighlights === 'function') {
+            this.highlighting.clearAllExplainHighlights();
+        }
+        
         if (this.visualContainer) {
             this.removeChild(this.visualContainer);
         }
@@ -456,6 +460,11 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      * Override addStep to update visual elements when new steps are added
      */
     addStep(step, options = {}) {
+        // Clear all step visualizer highlights when adding new steps (stack expansion)
+        if (this.highlighting && typeof this.highlighting.clearAllExplainHighlights === 'function') {
+            this.highlighting.clearAllExplainHighlights();
+        }
+        
         // Call parent first to add the step properly
         super.addStep(step, options);
         
@@ -547,6 +556,11 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      * @returns {boolean} Whether an operation was undone
      */
     undoLastOperation() {
+        // Clear all step visualizer highlights before undoing
+        if (this.highlighting && typeof this.highlighting.clearAllExplainHighlights === 'function') {
+            this.highlighting.clearAllExplainHighlights();
+        }
+        
         // Remove bottom-most equation and its preceding operation display
         const beforeCount = this.steps.length;
         const removed = super.undoLastOperation ? super.undoLastOperation() : false;
@@ -593,6 +607,14 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      */
     setDotsClickable(enabled) {
         this.dotsClickable = enabled;
+        
+        // If disabling, clear any active highlights and dots
+        if (!enabled) {
+            this._clearActiveDot();
+            // Use the more thorough clearing to ensure no stale highlights remain
+            this.highlighting.clearAllExplainHighlights();
+        }
+        
         this.stepDots.forEach(dot => {
             this.layoutManager.updateDotClickability(dot);
         });
@@ -675,7 +697,8 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
                 this.setLineAboveColor(this.activeDotIndex, this.styling.lineColor);
                 this.textBoxManager.removeTextBoxForDot(this.activeDotIndex);
                 
-                this.highlighting.clearHighlights();
+                // Use thorough clearing to ensure no stale highlights remain
+                this.highlighting.clearAllExplainHighlights();
                 
                 // Temporarily disable equation repositioning for simple dot state changes
                 const originalRepositioning = this.layoutManager.allowEquationRepositioning;

package/omd/step-visualizer/omdStepVisualizerHighlighting.js

@@ -101,6 +101,47 @@ export class omdStepVisualizerHighlighting {
         this.stepVisualizer.stepVisualizerHighlights.clear();
     }
 
+    /**
+     * Clears ALL explain highlights from the entire sequence, not just tracked ones.
+     * This is more thorough than clearHighlights() and should be used when
+     * the step visualizer is disabled or when we need to ensure no stale highlights remain.
+     */
+    clearAllExplainHighlights() {
+        // Clear tracked highlights first
+        this.clearHighlights();
+        
+        // Also clear any explain highlights from the entire sequence tree
+        const rootNode = this.stepVisualizer.getRootNode ? this.stepVisualizer.getRootNode() : null;
+        if (rootNode) {
+            this._clearExplainHighlightsFromTree(rootNode);
+        }
+    }
+
+    /**
+     * Recursively clears explain highlights from an entire tree
+     * @param {omdNode} node - The root node to start clearing from
+     * @private
+     */
+    _clearExplainHighlightsFromTree(node) {
+        if (node && typeof node.setExplainHighlight === 'function') {
+            node.setExplainHighlight(false);
+        }
+        
+        // Recursively clear from children
+        if (node && node.childList && Array.isArray(node.childList)) {
+            node.childList.forEach(child => {
+                this._clearExplainHighlightsFromTree(child);
+            });
+        }
+        
+        // Also check argumentNodeList if it exists
+        if (node && node.argumentNodeList) {
+            Object.values(node.argumentNodeList).forEach(child => {
+                this._clearExplainHighlightsFromTree(child);
+            });
+        }
+    }
+
     /**
      * Highlights nodes in the previous equation based on provenance from changed nodes.
      * This creates a visual connection between the current changes and their origins.

package/omd/step-visualizer/omdStepVisualizerLayout.js

@@ -723,6 +723,11 @@ export class omdStepVisualizerLayout {
     _handleExpansionDotClick(expansionDot) {
         const sv = this.stepVisualizer;
         
+        // Clear all step visualizer highlights when expanding/contracting
+        if (sv.highlighting && typeof sv.highlighting.clearAllExplainHighlights === 'function') {
+            sv.highlighting.clearAllExplainHighlights();
+        }
+        
         if (expansionDot.isCollapseDot) {
             // Handle collapse dot click - hide only the specific group of intermediate steps
             

package/omd/utils/omdNodeOverlay.js

@@ -7,7 +7,7 @@
  */
 
 import { omdPopup } from './omdPopup.js';
-import { jsvgGroup } from '@teachinglab/jsvg';
+import { jsvgGroup, jsvgRect } from '@teachinglab/jsvg';
 
 /**
  * A flexible overlay system for covering nodes with customizable elements

package/omd/utils/omdPopup.js

@@ -1,4 +1,4 @@
-import { jsvgGroup, jsvgRect, jsvgButton, jsvgTextBox } from '@teachinglab/jsvg';
+import { jsvgGroup, jsvgRect, jsvgButton, jsvgLayoutGroup, jsvgTextInput  } from '@teachinglab/jsvg';
 /**
  * omdPopup - Handles popup creation and management for node overlays
  */
@@ -73,20 +73,19 @@ export class omdPopup {
         
         // Store original opacities for animation
         const originalPopupOpacity = this.popup.opacity;
-        const originalCanvasOpacity = this.penCanvas?.container?.style.opacity || '1';
         const originalTextInputOpacity = this.popupTextInput?.div?.style.opacity || '1';
         
-        // Ensure canvas and text input are visible for animation
+        // Ensure canvas and text input are visible for animation but preserve canvas drawing
         if (this.penCanvas && this.penCanvas.container) {
             this.penCanvas.container.style.display = 'block';
-            this.penCanvas.container.style.opacity = originalCanvasOpacity;
+            // Don't fade canvas opacity - keep strokes visible during popup hide
         }
         if (this.popupTextInput && this.popupTextInput.div) {
             this.popupTextInput.div.style.display = 'flex';
             this.popupTextInput.div.style.opacity = originalTextInputOpacity;
         }
         
-        // Animate all elements together
+        // Animate popup and canvas together
         const duration = this.options.animationDuration || 300;
         const startTime = performance.now();
         
@@ -103,7 +102,7 @@ export class omdPopup {
                 this.popup.setOpacity(currentOpacity);
             }
             
-            // Animate canvas with proper opacity setting
+            // Animate canvas container with same opacity curve
             if (this.penCanvas && this.penCanvas.container) {
                 this.penCanvas.container.style.opacity = currentOpacity;
             }
@@ -116,9 +115,10 @@ export class omdPopup {
             if (progress < 1) {
                 this.popupAnimationId = requestAnimationFrame(animate);
             } else {
-                // Animation complete - hide and cleanup
+                // Animation complete - hide and cleanup both popup and canvas
                 if (this.penCanvas && this.penCanvas.container) {
                     this.penCanvas.container.style.display = 'none';
+                    this.penCanvas.container.style.opacity = '1'; // Reset for next show
                 }
                 if (this.popupTextInput && this.popupTextInput.div) {
                     this.popupTextInput.div.style.display = 'none';
@@ -131,7 +131,7 @@ export class omdPopup {
         
         return new Promise((resolve) => {
             setTimeout(resolve, duration);
-            });
+        });
     }
     
     /**
@@ -475,19 +475,22 @@ export class omdPopup {
             // Add click debugging
             canvasContainer.addEventListener('click', (e) => {});
             
-            // Store cleanup function
-            this.penCanvasCleanup = () => {
-                if (this.penCanvas) {
-                    this.penCanvas.destroy();
-                }
-                if (foreignObject && foreignObject.parentNode) {
-                    foreignObject.parentNode.removeChild(foreignObject);
-                } else if (canvasContainer && canvasContainer.parentNode) {
-                    canvasContainer.parentNode.removeChild(canvasContainer);
-                }
-            };
-            
-            // If we're currently in pen mode, show the canvas
+        // Store cleanup function
+        this.penCanvasCleanup = () => {
+            if (this.penCanvas) {
+                this.penCanvas.destroy();
+            }
+            if (foreignObject && foreignObject.parentNode) {
+                foreignObject.parentNode.removeChild(foreignObject);
+            } else if (canvasContainer && canvasContainer.parentNode) {
+                canvasContainer.parentNode.removeChild(canvasContainer);
+            }
+            // Remove step visualizer listeners
+            this._removeStepVisualizerListeners();
+        };
+        
+        // Set up step visualizer change detection
+        this._setupStepVisualizerListeners();            // If we're currently in pen mode, show the canvas
             if (this.currentMode === 'pen' && this.popup) {
                 this._addCanvasToParent(foreignObject || canvasContainer);
             }
@@ -510,6 +513,12 @@ export class omdPopup {
         if (!this.penCanvas) {
             this._createPenCanvas();
         } else {
+            // Show existing canvas and ensure it's fully opaque
+            const element = this.penCanvas.foreignObject || this.penCanvas.container;
+            if (element) {
+                element.style.display = 'block';
+                element.style.opacity = '1'; // Ensure full opacity for stroke visibility
+            }
             this._addCanvasToParent();
         }
     }
@@ -679,12 +688,22 @@ export class omdPopup {
                 const easedProgress = 1 - Math.pow(1 - progress, 3);
                 const currentOpacity = fromOpacity + (deltaOpacity * easedProgress);
                 
+                // Animate popup
                 this.popup.setOpacity(currentOpacity);
                 
+                // Animate canvas with same opacity if it exists
+                if (this.penCanvas && this.penCanvas.container && this.currentMode === 'pen') {
+                    this.penCanvas.container.style.opacity = currentOpacity;
+                }
+                
                 if (progress < 1) {
                     this.popupAnimationId = requestAnimationFrame(animate);
                 } else {
                     this.popupAnimationId = null;
+                    // Ensure canvas is fully opaque when animation completes
+                    if (this.penCanvas && this.penCanvas.container && this.currentMode === 'pen') {
+                        this.penCanvas.container.style.opacity = '1';
+                    }
                     resolve();
                 }
             };
@@ -820,6 +839,9 @@ export class omdPopup {
             this.resizeObserver = null;
         }
         
+        // Clean up step visualizer listeners
+        this._removeStepVisualizerListeners();
+        
         // Clean up animation
         if (this.popupAnimationId) {
             cancelAnimationFrame(this.popupAnimationId);
@@ -897,6 +919,87 @@ export class omdPopup {
         this.resizeObserver.observe(document.body);
     }
     
+    /**
+     * Setup step visualizer listeners to track expand/collapse
+     * @private
+     */
+    _setupStepVisualizerListeners() {
+        if (!this.penCanvas) return;
+        
+        // Listen for step visualizer events that might change layout
+        this._stepVisualizerUpdateHandler = () => {
+            console.log('[Step Visualizer Debug] Layout change detected, updating canvas position');
+            // Small delay to allow layout to settle
+            setTimeout(() => this._updateCanvasPosition(), 50);
+        };
+        
+        // Listen for various events that might indicate step visualizer changes
+        document.addEventListener('click', this._stepVisualizerUpdateHandler);
+        window.addEventListener('resize', this._stepVisualizerUpdateHandler);
+        
+        // Listen for custom step visualizer events if they exist
+        if (this.parentElement && this.parentElement.element) {
+            this.parentElement.element.addEventListener('stepVisualizerChanged', this._stepVisualizerUpdateHandler);
+        }
+        
+        // Set up mutation observer to detect DOM changes in step visualizer
+        if (this.parentElement && this.parentElement.element) {
+            this._mutationObserver = new MutationObserver((mutations) => {
+                let shouldUpdate = false;
+                for (const mutation of mutations) {
+                    // Check if any changes might affect layout
+                    if (mutation.type === 'attributes' && 
+                        (mutation.attributeName === 'style' || 
+                         mutation.attributeName === 'class' ||
+                         mutation.attributeName === 'transform')) {
+                        console.log('[Step Visualizer Debug] Mutation detected:', mutation.attributeName, mutation.target);
+                        shouldUpdate = true;
+                        break;
+                    }
+                    if (mutation.type === 'childList' && 
+                        (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0)) {
+                        console.log('[Step Visualizer Debug] Child list mutation detected');
+                        shouldUpdate = true;
+                        break;
+                    }
+                }
+                if (shouldUpdate) {
+                    setTimeout(() => this._updateCanvasPosition(), 10);
+                }
+            });
+            
+            // Observe the parent element and its children
+            this._mutationObserver.observe(this.parentElement.element, {
+                childList: true,
+                attributes: true,
+                subtree: true,
+                attributeFilter: ['style', 'class', 'transform', 'viewBox']
+            });
+        }
+    }
+    
+    /**
+     * Remove step visualizer listeners
+     * @private
+     */
+    _removeStepVisualizerListeners() {
+        if (this._stepVisualizerUpdateHandler) {
+            document.removeEventListener('click', this._stepVisualizerUpdateHandler);
+            window.removeEventListener('resize', this._stepVisualizerUpdateHandler);
+            
+            if (this.parentElement && this.parentElement.element) {
+                this.parentElement.element.removeEventListener('stepVisualizerChanged', this._stepVisualizerUpdateHandler);
+            }
+            
+            this._stepVisualizerUpdateHandler = null;
+        }
+        
+        if (this._mutationObserver) {
+            this._mutationObserver.disconnect();
+            this._mutationObserver = null;
+        }
+    }
+    
     /**
      * Update canvas position to match popup
      * @private
@@ -907,6 +1010,13 @@ export class omdPopup {
         const container = this.penCanvas.container;
         const popupRect = this.popup.svgObject ? this.popup.svgObject.getBoundingClientRect() : null;
         
+        console.log('[Canvas Position Debug] Update triggered:', {
+            hasCanvas: !!this.penCanvas,
+            hasContainer: !!container,
+            strokeCount: this.penCanvas?.strokes?.size || 0,
+            popupRect: popupRect ? `${popupRect.width}x${popupRect.height}` : 'null'
+        });
+        
         if (popupRect && popupRect.width > 0 && popupRect.height > 0) {
             // Calculate button areas based on popup dimensions
             const leftButtonArea = this.buttonSize + (this.margin * 2);
@@ -927,10 +1037,21 @@ export class omdPopup {
             const finalWidth = Math.min(Math.max(contentWidth, this.canvasMinWidth), maxWidth);
             const finalHeight = Math.min(Math.max(contentHeight, this.canvasMinHeight), maxHeight);
             
+            console.log('[Canvas Position Debug] Moving canvas:', {
+                from: `${container.style.left}, ${container.style.top}`,
+                to: `${absoluteX}px, ${absoluteY}px`,
+                size: `${finalWidth}x${finalHeight}`
+            });
+            
             container.style.left = `${absoluteX}px`;
             container.style.top = `${absoluteY}px`;
             container.style.width = `${finalWidth}px`;
             container.style.height = `${finalHeight}px`;
+            
+            // Check stroke count after move
+            setTimeout(() => {
+                console.log('[Canvas Position Debug] After move stroke count:', this.penCanvas?.strokes?.size || 0);
+            }, 50);
         }
     }
     

package/omd/utils/omdTranscriptionService.js

@@ -9,7 +9,8 @@ export class omdTranscriptionService {
     constructor(options = {}) {
         this.options = {
             endpoint: options.endpoint || this._getDefaultEndpoint(),
-            defaultProvider: options.defaultProvider || 'gemini',
+            defaultProvider: options.defaultProvider || 'openai',
+            defaultModel: options.defaultModel || 'gpt-4o-mini',
             ...options
         };
     }
@@ -60,7 +61,9 @@ export class omdTranscriptionService {
                 },
                 body: JSON.stringify({
                     imageBase64: base64Image,
-                    prompt: options.prompt || 'Please transcribe the handwritten mathematical expression in this image. Return only the mathematical expression in pure format (no LaTeX, no dollar signs). For powers use ^, for fractions use /, for square roots use sqrt().'
+                    prompt: options.prompt || 'Please transcribe the handwritten mathematical expression in this image. Return only the mathematical expression in pure format (no LaTeX, no dollar signs). For powers use ^, for fractions use /, for square roots use sqrt().',
+                    model: options.model || this.options.defaultModel,
+                    provider: options.provider || this.options.defaultProvider
                 })
             });
             
@@ -72,8 +75,9 @@ export class omdTranscriptionService {
 
             
             return {
-                text: result.text,
-                provider: result.provider || 'gemini',
+                text: (result.text || '').trim(),
+                provider: result.provider || this.options.defaultProvider,
+                model: result.model || (options.model || this.options.defaultModel),
                 confidence: result.confidence || 1.0
             };
             
@@ -106,7 +110,7 @@ export class omdTranscriptionService {
      * @returns {Array} List of available providers
      */
     getAvailableProviders() {
-        return ['gemini']; // Server handles the provider selection
+        return ['openai']; // Server handles actual model execution
     }
     
     /**
@@ -115,6 +119,6 @@ export class omdTranscriptionService {
      * @returns {boolean} True if provider is available
      */
     isProviderAvailable(provider) {
-        return provider === 'gemini'; // Only gemini is supported via server
+        return provider === 'openai';
     }
 } 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",
@@ -32,17 +32,26 @@
   "author": "jaredschiffman",
   "license": "MIT",
   "dependencies": {
+    "@netlify/vite-plugin": "^2.5.4",
+    "@teachinglab/jsvg": "0.1.1",
     "dotenv": "^17.2.1",
     "express": "^4.18.2",
     "mathjs": "^14.5.2",
     "openai": "^4.28.0",
-    "@teachinglab/jsvg": "0.1.1"
+    "vite": "^5.4.0"
   },
   "scripts": {
-    "start": "node --env-file=.env server.js",
-    "dev": "vite"
+    "dev": "npm run build:docs && vite",
+    "build": "vite build && node copy-static.js && node build-docs.js",
+    "build:docs": "node build-docs.js",
+    "build:static": "node copy-static.js",
+    "dev:netlify": "npm run build:docs && netlify dev"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "devDependencies": {
+    "glob": "^11.0.3",
+    "marked": "^16.2.1"
   }
 }

package/readme.html

@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OMD (Open Math Display) - OMD Documentation</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #fff;
+        }
+        .header {
+            border-bottom: 1px solid #eee;
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+        }
+        .header h1 {
+            margin: 0;
+            color: #2c3e50;
+        }
+        .nav {
+            margin: 1rem 0;
+        }
+        .nav a {
+            color: #3498db;
+            text-decoration: none;
+            margin-right: 1rem;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+        }
+        .nav a:hover {
+            background-color: #f8f9fa;
+            text-decoration: none;
+        }
+        .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
+            color: #2c3e50;
+            margin-top: 2rem;
+            margin-bottom: 1rem;
+        }
+        .content h1 {
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 0.5rem;
+        }
+        .content h2 {
+            border-bottom: 1px solid #eee;
+            padding-bottom: 0.3rem;
+        }
+        .content pre {
+            background: #f8f9fa;
+            border: 1px solid #e9ecef;
+            border-radius: 4px;
+            padding: 1rem;
+            overflow-x: auto;
+        }
+        .content code {
+            background: #f8f9fa;
+            padding: 0.2rem 0.4rem;
+            border-radius: 3px;
+            font-family: 'SFMono-Regular', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+        }
+        .content pre code {
+            background: none;
+            padding: 0;
+        }
+        .content blockquote {
+            border-left: 4px solid #3498db;
+            margin: 1rem 0;
+            padding-left: 1rem;
+            color: #666;
+        }
+        .content table {
+            border-collapse: collapse;
+            width: 100%;
+            margin: 1rem 0;
+        }
+        .content th, .content td {
+            border: 1px solid #ddd;
+            padding: 0.75rem;
+            text-align: left;
+        }
+        .content th {
+            background: #f8f9fa;
+            font-weight: 600;
+        }
+        .content ul {
+            margin: 1rem 0;
+        }
+        .content li {
+            margin: 0.25rem 0;
+        }
+        .content a {
+            color: #3498db;
+            text-decoration: none;
+        }
+        .content a:hover {
+            text-decoration: underline;
+        }
+        .back-to-top {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: #3498db;
+            color: white;
+            padding: 10px 15px;
+            border-radius: 50px;
+            text-decoration: none;
+            opacity: 0.8;
+            transition: opacity 0.2s;
+        }
+        .back-to-top:hover {
+            opacity: 1;
+            text-decoration: none;
+            color: white;
+        }
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+            .nav {
+                flex-direction: column;
+            }
+            .nav a {
+                display: block;
+                margin: 0.25rem 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>OMD Documentation</h1>
+        <div class="nav">
+            <a href="./../index.html">Home</a>
+            <a href="./index.html">Documentation</a>
+            <a href="./api-reference.html">API Reference</a>
+            <a href="./../examples/index.html">Examples</a>
+            <a href="./../readme.html">README</a>
+        </div>
+    </div>
+    
+    <div class="content">
+        <h1 id="omd-open-math-display">OMD (Open Math Display)</h1>
+<p>OMD is a JavaScript library for creating interactive mathematical interfaces in web applications. Build everything from simple equation displays to complex step-by-step solution systems with rich visual feedback and user interaction.</p>
+<p><img src="https://i.imgur.com/CdtEi33.png" alt="OMD Demo"></p>
+<h2 id="features">Features</h2>
+<h3 id="interactive-math-rendering"><strong>Interactive Math Rendering</strong></h3>
+<ul>
+<li>High-quality SVG-based mathematical notation</li>
+<li>Real-time expression manipulation and visualization</li>
+<li>Automatic layout and alignment for complex equations</li>
+</ul>
+<h3 id="step-by-step-solutions"><strong>Step-by-Step Solutions</strong></h3>
+<ul>
+<li>Visual step tracking with detailed explanations</li>
+<li>Simplification engine with rule-based transformations</li>
+<li>Provenance tracking for highlighting related elements</li>
+</ul>
+<h3 id="rich-ui-components"><strong>Rich UI Components</strong></h3>
+<ul>
+<li>Built-in toolbar for common mathematical operations</li>
+<li>Drag &amp; drop interface for intuitive manipulation</li>
+<li>Customizable canvas for multi-expression layouts</li>
+</ul>
+<h3 id="educational-features"><strong>Educational Features</strong></h3>
+<ul>
+<li>Interactive learning experiences</li>
+<li>Progressive step revelation</li>
+<li>Visual operation feedback and highlighting</li>
+</ul>
+<h2 id="installation">Installation</h2>
+<h3 id="npm">npm</h3>
+<pre><code class="language-bash">npm install @teachinglab/omd
+</code></pre>
+<h2 id="basic-usage">Basic Usage</h2>
+<pre><code class="language-javascript">import { omdDisplay } from &#39;@teachinglab/omd&#39;;
+
+// Create a math display
+const container = document.getElementById(&#39;math-container&#39;);
+const display = new omdDisplay(container);
+
+// Render an equation
+display.render(&#39;2x + 3 = 11&#39;);
+</code></pre>
+<h3 id="step-by-step-solutions">Step-by-Step Solutions</h3>
+<pre><code class="language-javascript">import { omdEquationStack, omdEquationNode } from &#39;@teachinglab/omd&#39;;
+
+// Create solution steps
+const steps = [
+    omdEquationNode.fromString(&#39;2x + 3 = 11&#39;),
+    omdEquationNode.fromString(&#39;2x = 8&#39;),
+    omdEquationNode.fromString(&#39;x = 4&#39;)
+];
+
+// Create interactive equation stack
+const stack = new omdEquationStack(steps, {
+    toolbar: true,
+    stepVisualizer: true
+});
+
+display.render(stack);
+</code></pre>
+<h2 id="core-concepts">Core Concepts</h2>
+<h3 id="nodes-building-blocks"><strong>Nodes</strong> - Building Blocks</h3>
+<p>Every mathematical element is a node in an expression tree:</p>
+<ul>
+<li><code>omdEquationNode</code> - Complete equations (e.g., <code>2x + 3 = 11</code>)</li>
+<li><code>omdConstantNode</code> - Numbers (e.g., <code>5</code>, <code>3.14</code>)</li>
+<li><code>omdVariableNode</code> - Variables (e.g., <code>x</code>, <code>y</code>)</li>
+<li><code>omdBinaryExpressionNode</code> - Operations (e.g., <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>)</li>
+</ul>
+<h3 id="sequences-solution-steps"><strong>Sequences</strong> - Solution Steps</h3>
+<p>Group related equations for step-by-step solving:</p>
+<pre><code class="language-javascript">const sequence = new omdEquationSequenceNode([
+    equation1, equation2, equation3
+]);
+</code></pre>
+<h3 id="display-rendering-engine"><strong>Display</strong> - Rendering Engine</h3>
+<p>Handles layout, centering, and visualization:</p>
+<pre><code class="language-javascript">const display = new omdDisplay(container, {
+    fontSize: 36,
+    centerContent: true
+});
+</code></pre>
+<h2 id="interactive-examples">Interactive Examples</h2>
+<p>Explore OMD&#39;s capabilities with our comprehensive examples:</p>
+<table>
+<thead>
+<tr>
+<th>Category</th>
+<th>Example</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><strong>Getting Started</strong></td>
+<td><a href="examples/minimal.html">Minimal</a></td>
+<td>Basic equation rendering</td>
+</tr>
+<tr>
+<td></td>
+<td><a href="examples/simple-usage.html">Simple Usage</a></td>
+<td>Interactive features</td>
+</tr>
+<tr>
+<td><strong>Advanced</strong></td>
+<td><a href="examples/expression-playground.html">Expression Playground</a></td>
+<td>Full manipulation interface</td>
+</tr>
+<tr>
+<td></td>
+<td><a href="examples/drag-and-drop-playground.html">Drag &amp; Drop</a></td>
+<td>Intuitive interaction</td>
+</tr>
+<tr>
+<td><strong>Educational</strong></td>
+<td><a href="examples/worked-solution.html">Worked Solutions</a></td>
+<td>Step-by-step solving</td>
+</tr>
+<tr>
+<td></td>
+<td><a href="examples/kids-interactive.html">Kids Interactive</a></td>
+<td>Child-friendly interface</td>
+</tr>
+<tr>
+<td><strong>Components</strong></td>
+<td><a href="examples/equation-stack-test.html">Equation Stack</a></td>
+<td>Stacked equations</td>
+</tr>
+<tr>
+<td></td>
+<td><a href="examples/canvas-multiple-nodes.html">Canvas Demo</a></td>
+<td>Multi-expression layouts</td>
+</tr>
+</tbody></table>
+<p><strong><a href="examples/index.html">Browse All Examples</a></strong></p>
+<h2 id="documentation">Documentation</h2>
+<table>
+<thead>
+<tr>
+<th>Resource</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><strong><a href="docs/api-reference.html">API Reference</a></strong></td>
+<td>Complete component documentation</td>
+</tr>
+<tr>
+<td><strong><a href="docs/user-guide.html">User Guide</a></strong></td>
+<td>Getting started and tutorials</td>
+</tr>
+</tbody></table>
+<h2 id="architecture">Architecture</h2>
+<pre><code>OMD Library Structure
+├── Display Layer (omdDisplay)
+├── Node System (Expression tree components)
+├── UI Components (Toolbar, Step visualizer)
+├── Core Systems (Simplification, Layout)
+└── Utilities (Configuration, Helpers)
+</code></pre>
+<h2 id="dependencies">Dependencies</h2>
+<ul>
+<li><strong>JSVG</strong> - High-performance SVG rendering</li>
+<li><strong>math.js</strong> - Mathematical expression parsing</li>
+<li><strong>Modern Browser</strong> - ES6 modules, SVG support</li>
+</ul>
+<hr>
+<p><strong>Ready to get started?</strong> Check out our <a href="examples/index.html">examples</a> or dive into the <a href="docs/api-reference.html">documentation</a>!</p>
+
+    </div>
+    
+    <a href="#" class="back-to-top">↑ Top</a>
+</body>
+</html>

package/src/omdTable.js

@@ -34,7 +34,7 @@ export class omdTable extends jsvgGroup
         this.showBackground = true;
 
         // Alternating row color properties
-        this.alternatingRowColors = null; // Should be an array of colors or null
+        this.alternatingRowColors = [omdColor.mediumGray, omdColor.lightGray]; // Should be an array of colors or null
         this.headerBackgroundColor = omdColor.lightGray;
         this.cellBackgroundColor = "white";
         

package/docs/user-guide.md

@@ -1,9 +0,0 @@
-# OMD User Guide
-
-This user guide is under construction. For now, please refer to the following resources:
-
-- [API Reference](./api-reference.md)
-- [Documentation](../DOCUMENTATION.md)
-- [Examples](../examples/index.html)
-
-If you are looking for something specific, please check the API docs or the main documentation file. More detailed guides and tutorials will be added soon.