npm - @teachinglab/omd - Versions diffs - 0.6.1 → 0.6.3 - Mend

@teachinglab/omd 0.6.1 → 0.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/README.md +257 -251
package/README.old.md +137 -137
package/canvas/core/canvasConfig.js +202 -202
package/canvas/drawing/segment.js +167 -167
package/canvas/drawing/stroke.js +385 -385
package/canvas/events/eventManager.js +444 -444
package/canvas/events/pointerEventHandler.js +262 -262
package/canvas/index.js +48 -48
package/canvas/tools/PointerTool.js +71 -71
package/canvas/tools/tool.js +222 -222
package/canvas/utils/boundingBox.js +377 -377
package/canvas/utils/mathUtils.js +258 -258
package/docs/api/configuration-options.md +198 -198
package/docs/api/eventManager.md +82 -82
package/docs/api/focusFrameManager.md +144 -144
package/docs/api/index.md +105 -105
package/docs/api/main.md +62 -62
package/docs/api/omdBinaryExpressionNode.md +86 -86
package/docs/api/omdCanvas.md +83 -83
package/docs/api/omdConfigManager.md +112 -112
package/docs/api/omdConstantNode.md +52 -52
package/docs/api/omdDisplay.md +87 -87
package/docs/api/omdEquationNode.md +174 -174
package/docs/api/omdEquationSequenceNode.md +258 -258
package/docs/api/omdEquationStack.md +192 -192
package/docs/api/omdFunctionNode.md +82 -82
package/docs/api/omdGroupNode.md +78 -78
package/docs/api/omdHelpers.md +87 -87
package/docs/api/omdLeafNode.md +85 -85
package/docs/api/omdNode.md +201 -201
package/docs/api/omdOperationDisplayNode.md +117 -117
package/docs/api/omdOperatorNode.md +91 -91
package/docs/api/omdParenthesisNode.md +133 -133
package/docs/api/omdPopup.md +191 -191
package/docs/api/omdPowerNode.md +131 -131
package/docs/api/omdRationalNode.md +144 -144
package/docs/api/omdSequenceNode.md +128 -128
package/docs/api/omdSimplification.md +78 -78
package/docs/api/omdSqrtNode.md +144 -144
package/docs/api/omdStepVisualizer.md +146 -146
package/docs/api/omdStepVisualizerHighlighting.md +65 -65
package/docs/api/omdStepVisualizerInteractiveSteps.md +108 -108
package/docs/api/omdStepVisualizerLayout.md +70 -70
package/docs/api/omdStepVisualizerNodeUtils.md +140 -140
package/docs/api/omdStepVisualizerTextBoxes.md +76 -76
package/docs/api/omdToolbar.md +130 -130
package/docs/api/omdTranscriptionService.md +95 -95
package/docs/api/omdTreeDiff.md +169 -169
package/docs/api/omdUnaryExpressionNode.md +137 -137
package/docs/api/omdUtilities.md +82 -82
package/docs/api/omdVariableNode.md +123 -123
package/docs/api/selectTool.md +74 -74
package/docs/api/simplificationEngine.md +97 -97
package/docs/api/simplificationRules.md +76 -76
package/docs/api/simplificationUtils.md +64 -64
package/docs/api/transcribe.md +43 -43
package/docs/api-reference.md +85 -85
package/docs/index.html +453 -453
package/docs/index.md +38 -38
package/docs/omd-objects.md +258 -258
package/index.js +79 -79
package/jsvg/index.js +3 -0
package/jsvg/jsvg.js +898 -898
package/jsvg/jsvgComponents.js +357 -358
package/npm-docs/DOCUMENTATION_SUMMARY.md +220 -220
package/npm-docs/README.md +251 -251
package/npm-docs/api/api-reference.md +85 -85
package/npm-docs/api/configuration-options.md +198 -198
package/npm-docs/api/eventManager.md +82 -82
package/npm-docs/api/expression-nodes.md +561 -561
package/npm-docs/api/focusFrameManager.md +144 -144
package/npm-docs/api/index.md +105 -105
package/npm-docs/api/main.md +62 -62
package/npm-docs/api/omdBinaryExpressionNode.md +86 -86
package/npm-docs/api/omdCanvas.md +83 -83
package/npm-docs/api/omdConfigManager.md +112 -112
package/npm-docs/api/omdConstantNode.md +52 -52
package/npm-docs/api/omdDisplay.md +87 -87
package/npm-docs/api/omdEquationNode.md +174 -174
package/npm-docs/api/omdEquationSequenceNode.md +258 -258
package/npm-docs/api/omdEquationStack.md +192 -192
package/npm-docs/api/omdFunctionNode.md +82 -82
package/npm-docs/api/omdGroupNode.md +78 -78
package/npm-docs/api/omdHelpers.md +87 -87
package/npm-docs/api/omdLeafNode.md +85 -85
package/npm-docs/api/omdNode.md +201 -201
package/npm-docs/api/omdOperationDisplayNode.md +117 -117
package/npm-docs/api/omdOperatorNode.md +91 -91
package/npm-docs/api/omdParenthesisNode.md +133 -133
package/npm-docs/api/omdPopup.md +191 -191
package/npm-docs/api/omdPowerNode.md +131 -131
package/npm-docs/api/omdRationalNode.md +144 -144
package/npm-docs/api/omdSequenceNode.md +128 -128
package/npm-docs/api/omdSimplification.md +78 -78
package/npm-docs/api/omdSqrtNode.md +144 -144
package/npm-docs/api/omdStepVisualizer.md +146 -146
package/npm-docs/api/omdStepVisualizerHighlighting.md +65 -65
package/npm-docs/api/omdStepVisualizerInteractiveSteps.md +108 -108
package/npm-docs/api/omdStepVisualizerLayout.md +70 -70
package/npm-docs/api/omdStepVisualizerNodeUtils.md +140 -140
package/npm-docs/api/omdStepVisualizerTextBoxes.md +76 -76
package/npm-docs/api/omdToolbar.md +130 -130
package/npm-docs/api/omdTranscriptionService.md +95 -95
package/npm-docs/api/omdTreeDiff.md +169 -169
package/npm-docs/api/omdUnaryExpressionNode.md +137 -137
package/npm-docs/api/omdUtilities.md +82 -82
package/npm-docs/api/omdVariableNode.md +123 -123
package/npm-docs/api/selectTool.md +74 -74
package/npm-docs/api/simplificationEngine.md +97 -97
package/npm-docs/api/simplificationRules.md +76 -76
package/npm-docs/api/simplificationUtils.md +64 -64
package/npm-docs/api/transcribe.md +43 -43
package/npm-docs/guides/equations.md +854 -854
package/npm-docs/guides/factory-functions.md +354 -354
package/npm-docs/guides/getting-started.md +318 -318
package/npm-docs/guides/quick-examples.md +525 -525
package/npm-docs/guides/visualizations.md +682 -682
package/npm-docs/index.html +12 -0
package/npm-docs/json-schemas.md +826 -826
package/omd/config/omdConfigManager.js +279 -267
package/omd/core/index.js +158 -158
package/omd/core/omdEquationStack.js +606 -547
package/omd/core/omdUtilities.js +113 -113
package/omd/display/omdDisplay.js +1045 -963
package/omd/display/omdToolbar.js +501 -501
package/omd/nodes/omdBinaryExpressionNode.js +459 -459
package/omd/nodes/omdConstantNode.js +141 -141
package/omd/nodes/omdEquationNode.js +1327 -1327
package/omd/nodes/omdFunctionNode.js +351 -351
package/omd/nodes/omdGroupNode.js +67 -67
package/omd/nodes/omdLeafNode.js +76 -76
package/omd/nodes/omdNode.js +556 -556
package/omd/nodes/omdOperationDisplayNode.js +321 -321
package/omd/nodes/omdOperatorNode.js +108 -108
package/omd/nodes/omdParenthesisNode.js +292 -292
package/omd/nodes/omdPowerNode.js +235 -235
package/omd/nodes/omdRationalNode.js +295 -295
package/omd/nodes/omdSqrtNode.js +307 -307
package/omd/nodes/omdUnaryExpressionNode.js +227 -227
package/omd/nodes/omdVariableNode.js +122 -122
package/omd/simplification/omdSimplification.js +140 -140
package/omd/simplification/omdSimplificationEngine.js +887 -887
package/omd/simplification/package.json +5 -5
package/omd/simplification/rules/binaryRules.js +1037 -1037
package/omd/simplification/rules/functionRules.js +111 -111
package/omd/simplification/rules/index.js +48 -48
package/omd/simplification/rules/parenthesisRules.js +19 -19
package/omd/simplification/rules/powerRules.js +143 -143
package/omd/simplification/rules/rationalRules.js +725 -725
package/omd/simplification/rules/sqrtRules.js +48 -48
package/omd/simplification/rules/unaryRules.js +37 -37
package/omd/simplification/simplificationRules.js +31 -31
package/omd/simplification/simplificationUtils.js +1055 -1055
package/omd/step-visualizer/omdStepVisualizer.js +947 -947
package/omd/step-visualizer/omdStepVisualizerHighlighting.js +246 -246
package/omd/step-visualizer/omdStepVisualizerLayout.js +892 -892
package/omd/step-visualizer/omdStepVisualizerTextBoxes.js +200 -200
package/omd/utils/aiNextEquationStep.js +106 -106
package/omd/utils/omdNodeOverlay.js +638 -638
package/omd/utils/omdPopup.js +1203 -1203
package/omd/utils/omdStepVisualizerInteractiveSteps.js +684 -684
package/omd/utils/omdStepVisualizerNodeUtils.js +267 -267
package/omd/utils/omdTranscriptionService.js +123 -123
package/omd/utils/omdTreeDiff.js +733 -733
package/package.json +59 -57
package/readme.html +184 -120
package/src/index.js +74 -74
package/src/json-schemas.md +576 -576
package/src/omd-json-samples.js +147 -147
package/src/omdApp.js +391 -391
package/src/omdAppCanvas.js +335 -335
package/src/omdBalanceHanger.js +199 -199
package/src/omdColor.js +13 -13
package/src/omdCoordinatePlane.js +541 -541
package/src/omdExpression.js +115 -115
package/src/omdFactory.js +150 -150
package/src/omdFunction.js +114 -114
package/src/omdMetaExpression.js +290 -290
package/src/omdNaturalExpression.js +563 -563
package/src/omdNode.js +383 -383
package/src/omdNumber.js +52 -52
package/src/omdNumberLine.js +114 -112
package/src/omdNumberTile.js +118 -118
package/src/omdOperator.js +72 -72
package/src/omdPowerExpression.js +91 -91
package/src/omdProblem.js +259 -259
package/src/omdRatioChart.js +251 -251
package/src/omdRationalExpression.js +114 -114
package/src/omdSampleData.js +215 -215
package/src/omdShapes.js +512 -512
package/src/omdSpinner.js +151 -151
package/src/omdString.js +49 -49
package/src/omdTable.js +498 -498
package/src/omdTapeDiagram.js +244 -244
package/src/omdTerm.js +91 -91
package/src/omdTileEquation.js +349 -349
package/src/omdUtils.js +84 -84
package/src/omdVariable.js +51 -51

package/docs/index.html CHANGED Viewed

@@ -1,454 +1,454 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OMD Library Documentation</title>
-    <style>
-        :root {
-            --primary: #3498db;
-            --primary-dark: #2980b9;
-            --text: #2c3e50;
-            --text-light: #666;
-            --bg: #f5f5f5;
-            --bg-card: #ffffff;
-            --border: #e9ecef;
-            --shadow: 0 2px 4px rgba(0,0,0,0.1);
-            --radius: 8px;
-            --transition: all 0.2s ease;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            line-height: 1.6;
-            color: var(--text);
-            margin: 0;
-            padding: 0;
-            background-color: var(--bg);
-        }
-        .header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 40px 20px;
-            text-align: center;
-            margin-bottom: 40px;
-        }
-        .header h1 {
-            margin: 0;
-            font-size: 2.5em;
-            font-weight: 700;
-        }
-        .header p {
-            margin: 10px 0 0;
-            opacity: 0.9;
-            font-size: 1.2em;
-        }
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 0 20px;
-            display: flex;
-            gap: 30px;
-        }
-        .sidebar {
-            flex: 0 0 300px;
-            background: var(--bg-card);
-            padding: 25px;
-            border-radius: var(--radius);
-            box-shadow: var(--shadow);
-            height: fit-content;
-            position: sticky;
-            top: 20px;
-            max-height: calc(100vh - 40px);
-            overflow-y: auto;
-        }
-        .content {
-            flex: 1;
-            background: var(--bg-card);
-            padding: 30px;
-            border-radius: var(--radius);
-            box-shadow: var(--shadow);
-            min-height: 800px;
-        }
-        .nav-section {
-            margin-bottom: 25px;
-        }
-        .nav-section h3 {
-            color: var(--text);
-            font-size: 14px;
-            text-transform: uppercase;
-            margin: 0 0 15px;
-            padding-bottom: 8px;
-            border-bottom: 2px solid var(--border);
-            font-weight: 600;
-        }
-        .nav-links {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-        .nav-links li {
-            margin-bottom: 5px;
-        }
-        .nav-links a {
-            color: var(--text);
-            text-decoration: none;
-            display: block;
-            padding: 8px 12px;
-            border-radius: var(--radius);
-            transition: var(--transition);
-            font-size: 0.95em;
-        }
-        .nav-links a:hover {
-            background-color: #f0f0f0;
-            color: var(--primary);
-            transform: translateX(5px);
-        }
-        .nav-links a.active {
-            background-color: var(--primary);
-            color: white;
-        }
-        .search-box {
-            margin-bottom: 20px;
-            position: relative;
-        }
-        .search-box input {
-            width: 100%;
-            padding: 10px 15px;
-            border: 2px solid var(--border);
-            border-radius: var(--radius);
-            font-size: 14px;
-            transition: var(--transition);
-        }
-        .search-box input:focus {
-            outline: none;
-            border-color: var(--primary);
-        }
-        .quick-links {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 15px;
-            margin: 25px 0;
-        }
-        .quick-link {
-            background: #f8f9fa;
-            padding: 20px;
-            border-radius: var(--radius);
-            text-decoration: none;
-            color: var(--text);
-            transition: var(--transition);
-            text-align: center;
-            border: 1px solid var(--border);
-        }
-        .quick-link:hover {
-            transform: translateY(-3px);
-            box-shadow: var(--shadow);
-            border-color: var(--primary);
-        }
-        .quick-link i {
-            font-size: 24px;
-            color: var(--primary);
-            margin-bottom: 10px;
-        }
-        .feature-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-            gap: 20px;
-            margin: 30px 0;
-        }
-        .feature-card {
-            background: #f8f9fa;
-            padding: 25px;
-            border-radius: var(--radius);
-            border: 1px solid var(--border);
-            transition: var(--transition);
-        }
-        .feature-card:hover {
-            transform: translateY(-3px);
-            box-shadow: var(--shadow);
-        }
-        .feature-card h4 {
-            margin: 0 0 15px;
-            color: var(--primary);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .feature-card p {
-            margin: 0;
-            color: var(--text-light);
-        }
-        code {
-            background-color: #f4f4f4;
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-family: 'Consolas', 'Monaco', monospace;
-            font-size: 0.9em;
-        }
-        pre {
-            background-color: #f4f4f4;
-            padding: 15px;
-            border-radius: var(--radius);
-            overflow-x: auto;
-            margin: 20px 0;
-        }
-        .version-badge {
-            display: inline-block;
-            padding: 4px 8px;
-            background: var(--primary);
-            color: white;
-            border-radius: 12px;
-            font-size: 12px;
-            margin-left: 10px;
-        }
-        @media (max-width: 1024px) {
-            .container {
-                flex-direction: column;
-            }
-            .sidebar {
-                position: static;
-                width: auto;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="header">
-        <h1>OMD Library Documentation</h1>
-        <p>On-screen Math Display - Interactive Mathematical Expression Rendering</p>
-        <span class="version-badge">v1.0.0</span>
-    </div>
-    <div class="container">
-        <aside class="sidebar">
-            <div class="search-box">
-                <input type="text" placeholder="Search documentation..." id="search-docs">
-            </div>
-            <div class="nav-section">
-                <h3>Getting Started</h3>
-                <ul class="nav-links">
-                    <li><a href="#overview" class="active">Overview</a></li>
-                    <li><a href="#installation">Installation</a></li>
-                    <li><a href="#quick-start">Quick Start</a></li>
-                    <li><a href="../DOCUMENTATION.md">Main Documentation</a></li>
-                    <li><a href="user-guide.md">User Guide</a></li>
-                </ul>
-            </div>
-            <div class="nav-section">
-                <h3>Core Components</h3>
-                <ul class="nav-links">
-                    <li><a href="api/omdDisplay.md">omdDisplay</a></li>
-                    <li><a href="api/omdCanvas.md">omdCanvas</a></li>
-                    <li><a href="api/omdStepVisualizer.md">omdStepVisualizer</a></li>
-                </ul>
-            </div>
-            <div class="nav-section">
-                <h3>Node Types</h3>
-                <ul class="nav-links">
-                    <li><a href="api/omdConstantNode.md">omdConstantNode</a></li>
-                    <li><a href="api/omdVariableNode.md">omdVariableNode</a></li>
-                    <li><a href="api/omdBinaryExpressionNode.md">omdBinaryExpressionNode</a></li>
-                    <li><a href="api/omdUnaryExpressionNode.md">omdUnaryExpressionNode</a></li>
-                    <li><a href="api/omdPowerNode.md">omdPowerNode</a></li>
-                    <li><a href="api/omdSqrtNode.md">omdSqrtNode</a></li>
-                    <li><a href="api/omdRationalNode.md">omdRationalNode</a></li>
-                    <li><a href="api/omdEquationNode.md">omdEquationNode</a></li>
-                    <li><a href="api/omdFunctionNode.md">omdFunctionNode</a></li>
-                    <li><a href="api/omdParenthesisNode.md">omdParenthesisNode</a></li>
-                    <li><a href="api/omdEquationSequenceNode.md">omdEquationSequenceNode</a></li>
-                </ul>
-            </div>
-            <div class="nav-section">
-                <h3>Utilities</h3>
-                <ul class="nav-links">
-                    <li><a href="api/omdHelpers.md">omdHelpers</a></li>
-                    <li><a href="api/omdConfigManager.md">omdConfigManager</a></li>
-                    <li><a href="api/simplificationRules.md">Simplification Rules</a></li>
-                </ul>
-            </div>
-        </aside>
-        <main class="content">
-            <section id="overview">
-                <h2>Overview</h2>
-                <p>OMD (On-screen Math Display) is a powerful JavaScript library for rendering and manipulating mathematical expressions. It provides a flexible and intuitive API for creating interactive math visualizations.</p>
-                <div class="quick-links">
-                    <a href="../examples/index.html" class="quick-link">
-                        <i>🎯</i>
-                        <h4>Live Examples</h4>
-                        <p>See OMD in action</p>
-                    </a>
-                    <a href="api-reference.md" class="quick-link">
-                        <i>📚</i>
-                        <h4>API Reference</h4>
-                        <p>Detailed API docs</p>
-                    </a>
-                    <a href="user-guide.md" class="quick-link">
-                        <i>📖</i>
-                        <h4>User Guide</h4>
-                        <p>Getting started and tutorials</p>
-                    </a>
-                    <a href="https://github.com/jaredschiffman/omd" class="quick-link">
-                        <i>💻</i>
-                        <h4>GitHub</h4>
-                        <p>Source code</p>
-                    </a>
-                </div>
-            </section>
-            <section id="installation">
-                <h2>Installation</h2>
-                <p>Install via npm:</p>
-                <pre><code>npm install @omd/core</code></pre>
-                <p>Then import in your project:</p>
-                <pre><code>import { omdDisplay, omdCanvas, omdStepVisualizer } from '@omd/core';</code></pre>
-            </section>
-            <section id="quick-start">
-                <h2>Quick Start</h2>
-                <p>Create your first mathematical expression with just a few lines of code:</p>
-                <pre><code>// Create a renderer
-const renderer = new omdDisplay(container);
-// Render an expression
-renderer.render('x^2 + 2x + 1');</code></pre>
-            </section>
-            <section id="step-visualizer">
-                <h2>Step-by-Step Visualization</h2>
-                <p>Visualize equation solving and expression simplification step by step:</p>
-                <pre><code>// Create a renderer and render the initial equation
-const renderer = new omdDisplay(container);
-renderer.render('2x + 3 = 7');
-// Access the step-visualizer sequence
-const stepViz = renderer.getCurrentNode(); // omdStepVisualizer instance
-// Perform operations step-by-step
-stepViz.applyEquationOperation(3, 'subtract'); // 2x + 3 = 7  →  2x = 4
-stepViz.applyEquationOperation(2, 'divide');   // 2x = 4      →  x = 2</code></pre>
-                <div class="feature-grid">
-                    <div class="feature-card">
-                        <h4>🔄 Automatic Step Generation</h4>
-                        <p>Automatically generate solution steps for equations and expressions.</p>
-                    </div>
-                    <div class="feature-card">
-                        <h4>🔍 Step Filtering</h4>
-                        <p>Show or hide intermediate steps based on complexity level.</p>
-                    </div>
-                    <div class="feature-card">
-                        <h4>📝 Step Annotations</h4>
-                        <p>Add explanatory text and highlights to each step.</p>
-                    </div>
-                </div>
-            </section>
-            <section id="features">
-                <h2>Key Features</h2>
-                <div class="feature-grid">
-                    <div class="feature-card">
-                        <h4>🎯 Zero Configuration</h4>
-                        <p>Get started quickly with sensible defaults. No complex setup required.</p>
-                    </div>
-                    <div class="feature-card">
-                        <h4>📐 Step-by-Step Solving</h4>
-                        <p>Show mathematical work with automatic simplification and step filtering.</p>
-                    </div>
-                    <div class="feature-card">
-                        <h4>🎨 Interactive Canvas</h4>
-                        <p>Create dynamic math visualizations with drag-and-drop support.</p>
-                    </div>
-                    <div class="feature-card">
-                        <h4>🧮 Expression Operations</h4>
-                        <p>Manipulate expressions with built-in mathematical operations.</p>
-                    </div>
-                    <div class="feature-card">
-                        <h4>🔧 Extensible</h4>
-                        <p>Create custom node types and extend functionality as needed.</p>
-                    </div>
-                    <div class="feature-card">
-                        <h4>🌈 Educational Tools</h4>
-                        <p>Perfect for building interactive math learning applications.</p>
-                    </div>
-                </div>
-            </section>
-        </main>
-    </div>
-    <script>
-        // Search functionality
-        const searchInput = document.getElementById('search-docs');
-        const navLinks = document.querySelectorAll('.nav-links a');
-        searchInput.addEventListener('input', (e) => {
-            const searchTerm = e.target.value.toLowerCase();
-            navLinks.forEach(link => {
-                const text = link.textContent.toLowerCase();
-                link.parentElement.style.display = text.includes(searchTerm) ? '' : 'none';
-            });
-        });
-        // Active link handling
-        document.querySelectorAll('.nav-links a').forEach(link => {
-            link.addEventListener('click', function(e) {
-                if (this.getAttribute('href').startsWith('#')) {
-                    e.preventDefault();
-                    document.querySelectorAll('.nav-links a').forEach(l => l.classList.remove('active'));
-                    this.classList.add('active');
-                    const target = document.querySelector(this.getAttribute('href'));
-                    if (target) {
-                        target.scrollIntoView({ behavior: 'smooth' });
-                    }
-                }
-            });
-        });
-        // Handle initial active state based on hash
-        window.addEventListener('load', () => {
-            const hash = window.location.hash;
-            if (hash) {
-                const activeLink = document.querySelector(`a[href="${hash}"]`);
-                if (activeLink) {
-                    document.querySelectorAll('.nav-links a').forEach(l => l.classList.remove('active'));
-                    activeLink.classList.add('active');
-                }
-            }
-        });
-    </script>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OMD Library Documentation</title>
+    <style>
+        :root {
+            --primary: #3498db;
+            --primary-dark: #2980b9;
+            --text: #2c3e50;
+            --text-light: #666;
+            --bg: #f5f5f5;
+            --bg-card: #ffffff;
+            --border: #e9ecef;
+            --shadow: 0 2px 4px rgba(0,0,0,0.1);
+            --radius: 8px;
+            --transition: all 0.2s ease;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            line-height: 1.6;
+            color: var(--text);
+            margin: 0;
+            padding: 0;
+            background-color: var(--bg);
+        }
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 40px 20px;
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        .header h1 {
+            margin: 0;
+            font-size: 2.5em;
+            font-weight: 700;
+        }
+        .header p {
+            margin: 10px 0 0;
+            opacity: 0.9;
+            font-size: 1.2em;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 20px;
+            display: flex;
+            gap: 30px;
+        }
+        .sidebar {
+            flex: 0 0 300px;
+            background: var(--bg-card);
+            padding: 25px;
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            height: fit-content;
+            position: sticky;
+            top: 20px;
+            max-height: calc(100vh - 40px);
+            overflow-y: auto;
+        }
+        .content {
+            flex: 1;
+            background: var(--bg-card);
+            padding: 30px;
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            min-height: 800px;
+        }
+        .nav-section {
+            margin-bottom: 25px;
+        }
+        .nav-section h3 {
+            color: var(--text);
+            font-size: 14px;
+            text-transform: uppercase;
+            margin: 0 0 15px;
+            padding-bottom: 8px;
+            border-bottom: 2px solid var(--border);
+            font-weight: 600;
+        }
+        .nav-links {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .nav-links li {
+            margin-bottom: 5px;
+        }
+        .nav-links a {
+            color: var(--text);
+            text-decoration: none;
+            display: block;
+            padding: 8px 12px;
+            border-radius: var(--radius);
+            transition: var(--transition);
+            font-size: 0.95em;
+        }
+        .nav-links a:hover {
+            background-color: #f0f0f0;
+            color: var(--primary);
+            transform: translateX(5px);
+        }
+        .nav-links a.active {
+            background-color: var(--primary);
+            color: white;
+        }
+        .search-box {
+            margin-bottom: 20px;
+            position: relative;
+        }
+        .search-box input {
+            width: 100%;
+            padding: 10px 15px;
+            border: 2px solid var(--border);
+            border-radius: var(--radius);
+            font-size: 14px;
+            transition: var(--transition);
+        }
+        .search-box input:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+        .quick-links {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin: 25px 0;
+        }
+        .quick-link {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: var(--radius);
+            text-decoration: none;
+            color: var(--text);
+            transition: var(--transition);
+            text-align: center;
+            border: 1px solid var(--border);
+        }
+        .quick-link:hover {
+            transform: translateY(-3px);
+            box-shadow: var(--shadow);
+            border-color: var(--primary);
+        }
+        .quick-link i {
+            font-size: 24px;
+            color: var(--primary);
+            margin-bottom: 10px;
+        }
+        .feature-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 20px;
+            margin: 30px 0;
+        }
+        .feature-card {
+            background: #f8f9fa;
+            padding: 25px;
+            border-radius: var(--radius);
+            border: 1px solid var(--border);
+            transition: var(--transition);
+        }
+        .feature-card:hover {
+            transform: translateY(-3px);
+            box-shadow: var(--shadow);
+        }
+        .feature-card h4 {
+            margin: 0 0 15px;
+            color: var(--primary);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .feature-card p {
+            margin: 0;
+            color: var(--text-light);
+        }
+        code {
+            background-color: #f4f4f4;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 0.9em;
+        }
+        pre {
+            background-color: #f4f4f4;
+            padding: 15px;
+            border-radius: var(--radius);
+            overflow-x: auto;
+            margin: 20px 0;
+        }
+        .version-badge {
+            display: inline-block;
+            padding: 4px 8px;
+            background: var(--primary);
+            color: white;
+            border-radius: 12px;
+            font-size: 12px;
+            margin-left: 10px;
+        }
+        @media (max-width: 1024px) {
+            .container {
+                flex-direction: column;
+            }
+            .sidebar {
+                position: static;
+                width: auto;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>OMD Library Documentation</h1>
+        <p>On-screen Math Display - Interactive Mathematical Expression Rendering</p>
+        <span class="version-badge">v1.0.0</span>
+    </div>
+    <div class="container">
+        <aside class="sidebar">
+            <div class="search-box">
+                <input type="text" placeholder="Search documentation..." id="search-docs">
+            </div>
+            <div class="nav-section">
+                <h3>Getting Started</h3>
+                <ul class="nav-links">
+                    <li><a href="#overview" class="active">Overview</a></li>
+                    <li><a href="#installation">Installation</a></li>
+                    <li><a href="#quick-start">Quick Start</a></li>
+                    <li><a href="../DOCUMENTATION.md">Main Documentation</a></li>
+                    <li><a href="user-guide.md">User Guide</a></li>
+                </ul>
+            </div>
+            <div class="nav-section">
+                <h3>Core Components</h3>
+                <ul class="nav-links">
+                    <li><a href="api/omdDisplay.md">omdDisplay</a></li>
+                    <li><a href="api/omdCanvas.md">omdCanvas</a></li>
+                    <li><a href="api/omdStepVisualizer.md">omdStepVisualizer</a></li>
+                </ul>
+            </div>
+            <div class="nav-section">
+                <h3>Node Types</h3>
+                <ul class="nav-links">
+                    <li><a href="api/omdConstantNode.md">omdConstantNode</a></li>
+                    <li><a href="api/omdVariableNode.md">omdVariableNode</a></li>
+                    <li><a href="api/omdBinaryExpressionNode.md">omdBinaryExpressionNode</a></li>
+                    <li><a href="api/omdUnaryExpressionNode.md">omdUnaryExpressionNode</a></li>
+                    <li><a href="api/omdPowerNode.md">omdPowerNode</a></li>
+                    <li><a href="api/omdSqrtNode.md">omdSqrtNode</a></li>
+                    <li><a href="api/omdRationalNode.md">omdRationalNode</a></li>
+                    <li><a href="api/omdEquationNode.md">omdEquationNode</a></li>
+                    <li><a href="api/omdFunctionNode.md">omdFunctionNode</a></li>
+                    <li><a href="api/omdParenthesisNode.md">omdParenthesisNode</a></li>
+                    <li><a href="api/omdEquationSequenceNode.md">omdEquationSequenceNode</a></li>
+                </ul>
+            </div>
+            <div class="nav-section">
+                <h3>Utilities</h3>
+                <ul class="nav-links">
+                    <li><a href="api/omdHelpers.md">omdHelpers</a></li>
+                    <li><a href="api/omdConfigManager.md">omdConfigManager</a></li>
+                    <li><a href="api/simplificationRules.md">Simplification Rules</a></li>
+                </ul>
+            </div>
+        </aside>
+        <main class="content">
+            <section id="overview">
+                <h2>Overview</h2>
+                <p>OMD (On-screen Math Display) is a powerful JavaScript library for rendering and manipulating mathematical expressions. It provides a flexible and intuitive API for creating interactive math visualizations.</p>
+                <div class="quick-links">
+                    <a href="../examples/index.html" class="quick-link">
+                        <i>🎯</i>
+                        <h4>Live Examples</h4>
+                        <p>See OMD in action</p>
+                    </a>
+                    <a href="api-reference.md" class="quick-link">
+                        <i>📚</i>
+                        <h4>API Reference</h4>
+                        <p>Detailed API docs</p>
+                    </a>
+                    <a href="user-guide.md" class="quick-link">
+                        <i>📖</i>
+                        <h4>User Guide</h4>
+                        <p>Getting started and tutorials</p>
+                    </a>
+                    <a href="https://github.com/jaredschiffman/omd" class="quick-link">
+                        <i>💻</i>
+                        <h4>GitHub</h4>
+                        <p>Source code</p>
+                    </a>
+                </div>
+            </section>
+            <section id="installation">
+                <h2>Installation</h2>
+                <p>Install via npm:</p>
+                <pre><code>npm install @omd/core</code></pre>
+                <p>Then import in your project:</p>
+                <pre><code>import { omdDisplay, omdCanvas, omdStepVisualizer } from '@omd/core';</code></pre>
+            </section>
+            <section id="quick-start">
+                <h2>Quick Start</h2>
+                <p>Create your first mathematical expression with just a few lines of code:</p>
+                <pre><code>// Create a renderer
+const renderer = new omdDisplay(container);
+// Render an expression
+renderer.render('x^2 + 2x + 1');</code></pre>
+            </section>
+            <section id="step-visualizer">
+                <h2>Step-by-Step Visualization</h2>
+                <p>Visualize equation solving and expression simplification step by step:</p>
+                <pre><code>// Create a renderer and render the initial equation
+const renderer = new omdDisplay(container);
+renderer.render('2x + 3 = 7');
+// Access the step-visualizer sequence
+const stepViz = renderer.getCurrentNode(); // omdStepVisualizer instance
+// Perform operations step-by-step
+stepViz.applyEquationOperation(3, 'subtract'); // 2x + 3 = 7  →  2x = 4
+stepViz.applyEquationOperation(2, 'divide');   // 2x = 4      →  x = 2</code></pre>
+                <div class="feature-grid">
+                    <div class="feature-card">
+                        <h4>🔄 Automatic Step Generation</h4>
+                        <p>Automatically generate solution steps for equations and expressions.</p>
+                    </div>
+                    <div class="feature-card">
+                        <h4>🔍 Step Filtering</h4>
+                        <p>Show or hide intermediate steps based on complexity level.</p>
+                    </div>
+                    <div class="feature-card">
+                        <h4>📝 Step Annotations</h4>
+                        <p>Add explanatory text and highlights to each step.</p>
+                    </div>
+                </div>
+            </section>
+            <section id="features">
+                <h2>Key Features</h2>
+                <div class="feature-grid">
+                    <div class="feature-card">
+                        <h4>🎯 Zero Configuration</h4>
+                        <p>Get started quickly with sensible defaults. No complex setup required.</p>
+                    </div>
+                    <div class="feature-card">
+                        <h4>📐 Step-by-Step Solving</h4>
+                        <p>Show mathematical work with automatic simplification and step filtering.</p>
+                    </div>
+                    <div class="feature-card">
+                        <h4>🎨 Interactive Canvas</h4>
+                        <p>Create dynamic math visualizations with drag-and-drop support.</p>
+                    </div>
+                    <div class="feature-card">
+                        <h4>🧮 Expression Operations</h4>
+                        <p>Manipulate expressions with built-in mathematical operations.</p>
+                    </div>
+                    <div class="feature-card">
+                        <h4>🔧 Extensible</h4>
+                        <p>Create custom node types and extend functionality as needed.</p>
+                    </div>
+                    <div class="feature-card">
+                        <h4>🌈 Educational Tools</h4>
+                        <p>Perfect for building interactive math learning applications.</p>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+    <script>
+        // Search functionality
+        const searchInput = document.getElementById('search-docs');
+        const navLinks = document.querySelectorAll('.nav-links a');
+        searchInput.addEventListener('input', (e) => {
+            const searchTerm = e.target.value.toLowerCase();
+            navLinks.forEach(link => {
+                const text = link.textContent.toLowerCase();
+                link.parentElement.style.display = text.includes(searchTerm) ? '' : 'none';
+            });
+        });
+        // Active link handling
+        document.querySelectorAll('.nav-links a').forEach(link => {
+            link.addEventListener('click', function(e) {
+                if (this.getAttribute('href').startsWith('#')) {
+                    e.preventDefault();
+                    document.querySelectorAll('.nav-links a').forEach(l => l.classList.remove('active'));
+                    this.classList.add('active');
+                    const target = document.querySelector(this.getAttribute('href'));
+                    if (target) {
+                        target.scrollIntoView({ behavior: 'smooth' });
+                    }
+                }
+            });
+        });
+        // Handle initial active state based on hash
+        window.addEventListener('load', () => {
+            const hash = window.location.hash;
+            if (hash) {
+                const activeLink = document.querySelector(`a[href="${hash}"]`);
+                if (activeLink) {
+                    document.querySelectorAll('.nav-links a').forEach(l => l.classList.remove('active'));
+                    activeLink.classList.add('active');
+                }
+            }
+        });
+    </script>
+</body>
 </html>