@teachinglab/omd 0.2.9 → 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/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/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

@@ -346,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);
         }
@@ -455,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);
         
@@ -546,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;
@@ -592,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);
         });
@@ -674,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/omdPopup.js

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",
@@ -32,20 +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",
-    "@netlify/vite-plugin": "^2.5.4",
     "vite": "^5.4.0"
   },
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "dev:netlify": "netlify dev"
+    "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/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.