cyclecad 0.9.6 → 0.9.8

package/app/index.html

@@ -1682,7 +1682,7 @@
           <div id="tab-chat" style="display: none;">
             <!-- Chat tab populated by JavaScript -->
           </div>
-          <div id="tab-guide" style="display: none; padding: 12px; color: var(--text-primary); font-size: 13px; overflow-y: auto;">
+          <div id="tab-guide" style="display: none; padding: 12px; color: var(--text-primary); font-size: 13px; overflow-y: auto; min-height: 0;">
             <h3 style="margin:0 0 12px 0;color:var(--accent-blue);font-size:15px;">Quick Start Guide</h3>
             <div style="margin-bottom:10px;"><b>1. Create shapes</b><br>Use Chat or toolbar: "box 50mm", "cylinder r20 h40", "gear 60mm 24 teeth"</div>
             <div style="margin-bottom:10px;"><b>2. Modify parts</b><br>"move it up 20", "rotate 45", "scale 2x", "fillet 5mm", "reduce height to 30"</div>
@@ -1694,7 +1694,14 @@
             <hr style="border-color:var(--border-color);margin:16px 0;">
             <div style="margin-bottom:10px;"><b>AI Chat</b><br>Type natural language in the Chat tab. Understands typos: "cylindr", "interset", "subtrat"</div>
             <div style="margin-bottom:10px;"><b>Import</b><br>Supports Inventor .ipt/.iam, STL, OBJ, and STEP (via server)</div>
-            <div><b>Agent API</b><br>window.cycleCAD.execute({ method: "shape.cylinder", params: { radius: 25, height: 60 } })</div>
+            <div style="margin-bottom:10px;"><b>Agent API</b><br>window.cycleCAD.execute({ method: "shape.cylinder", params: { radius: 25, height: 60 } })</div>
+            <hr style="border-color:var(--border-color);margin:16px 0;">
+            <h3 style="margin:0 0 12px 0;color:var(--accent-green);font-size:15px;">ExplodeView Integration</h3>
+            <div style="margin-bottom:10px;"><b>Viewer Mode</b><br>Press <b>V</b> or click Viewer Mode to switch to ExplodeView. All 57 viewer features are available inside cycleCAD — shared 3D scene, no duplication.</div>
+            <div style="margin-bottom:10px;"><b>Available in Viewer Mode</b><br>Assembly Tree, Explode/Collapse, Section Cut, Part Selection, BOM Export, Annotations, Measurement, AI Part ID, Heatmaps, Service Mode, and 45+ more tools.</div>
+            <div style="margin-bottom:10px;"><b>Viewer API</b><br>viewer.toggleViewerMode(), viewer.selectPart(idx), viewer.explodeParts(0.5), viewer.setSectionCut('x', 100), viewer.exportBOM()</div>
+            <div style="margin-bottom:10px;"><b>Docker (all services)</b><br>docker-compose up -d<br>ExplodeView :8080 · cycleCAD :3000 · STEP Converter :8787</div>
+            <div style="padding:8px 10px;background:rgba(88,166,255,0.08);border:1px solid rgba(88,166,255,0.2);border-radius:6px;font-size:12px;color:var(--accent-blue);">Full integration tutorial: <a href="tutorials/explodeview-integration.html" style="color:var(--accent-blue);">tutorials/explodeview-integration.html</a></div>
           </div>
           <div id="tab-tokens" style="display: none; overflow-y: auto;">
             <!-- Token dashboard populated by token-dashboard.js -->
@@ -4402,7 +4409,7 @@
           <!-- Tutorials Section -->
           <div style="margin-bottom:20px;">
             <h3 style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--accent-blue);">Tutorials</h3>
-            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;">
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
               <a href="./tutorials/basic.html" style="text-decoration:none;display:block;padding:16px;background:linear-gradient(135deg,rgba(63,185,80,0.12),rgba(63,185,80,0.04));border:1px solid rgba(63,185,80,0.3);border-radius:8px;text-align:center;">
                 <div style="font-size:28px;margin-bottom:8px;">&#x1F331;</div>
                 <div style="font-weight:600;color:#3fb950;font-size:13px;">Basic</div>
@@ -4418,6 +4425,11 @@
                 <div style="font-weight:600;color:#d29922;font-size:13px;">Advanced</div>
                 <div style="font-size:11px;color:var(--text-secondary);margin-top:4px;">Agent API, MCP, tokens, Docker, plugins</div>
               </a>
+              <a href="./tutorials/explodeview-integration.html" style="text-decoration:none;display:block;padding:16px;background:linear-gradient(135deg,rgba(0,212,170,0.12),rgba(0,212,170,0.04));border:1px solid rgba(0,212,170,0.3);border-radius:8px;text-align:center;">
+                <div style="font-size:28px;margin-bottom:8px;">&#x1F50D;</div>
+                <div style="font-weight:600;color:#00d4aa;font-size:13px;">ExplodeView</div>
+                <div style="font-size:11px;color:var(--text-secondary);margin-top:4px;">Viewer Mode, 57 tools, section cuts, BOM</div>
+              </a>
             </div>
           </div>