explodeview 0.2.0 → 1.0.0

package/dist/explodeview.js

@@ -0,0 +1,1281 @@
+/**
+ * STP Viewer Widget — Embeddable 3D exploded-view viewer for STEP files
+ *
+ * Usage:
+ *   <div id="stp-viewer" data-src="/path/to/processed/assets/"></div>
+ *   <script src="/path/to/stp-viewer.js"></script>
+ *
+ * Or programmatic:
+ *   STPViewer.init({ container: '#my-div', src: '/assets/', brand: 'cycleWASH' });
+ */
+
+(function () {
+  'use strict';
+
+  const THREE_CDN = 'https://cdn.jsdelivr.net/npm/three@0.170.0';
+
+  // ─── Styles ───
+  function injectStyles(container) {
+    const style = document.createElement('style');
+    style.textContent = `
+      .stpv { position:relative; width:100%; height:100%; min-height:500px; background:#0a0e1a; overflow:hidden; font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; color:#fff; --blue:#0055A4; --yellow:#FFD100; }
+      .stpv canvas { display:block; width:100%; height:100%; }
+
+      /* Loader */
+      .stpv-loader { position:absolute; inset:0; background:#0a0e1a; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:100; transition:opacity 1s; }
+      .stpv-loader.hidden { opacity:0; pointer-events:none; }
+      .stpv-loader h2 { font-size:1.5rem; font-weight:200; letter-spacing:0.3em; }
+      .stpv-loader h2 b { font-weight:700; color:var(--yellow); }
+      .stpv-loader-bar { width:200px; height:2px; background:#1a1a2a; margin-top:1.2rem; border-radius:1px; overflow:hidden; }
+      .stpv-loader-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--blue),var(--yellow)); transition:width 0.2s; }
+      .stpv-loader-text { font-size:0.6rem; color:#445; letter-spacing:0.12em; margin-top:0.8rem; }
+
+      /* Top bar */
+      .stpv-topbar { position:absolute; top:0; left:0; right:0; height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:rgba(0,0,0,0.5); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,0.06); z-index:20; }
+      .stpv-brand { font-size:0.75rem; font-weight:200; letter-spacing:0.2em; text-transform:uppercase; }
+      .stpv-brand b { font-weight:700; color:var(--yellow); }
+      .stpv-nav { display:flex; gap:4px; }
+      .stpv-btn { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:#889; padding:5px 14px; font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; border-radius:4px; font-family:inherit; transition:all 0.25s; }
+      .stpv-btn:hover { background:rgba(0,85,164,0.12); border-color:rgba(0,85,164,0.4); color:#fff; }
+      .stpv-btn.active { background:rgba(0,85,164,0.18); border-color:rgba(0,85,164,0.5); color:#4da6ff; }
+
+      /* Left nav */
+      .stpv-leftnav { position:absolute; left:12px; top:50%; transform:translateY(-50%); z-index:15; display:flex; flex-direction:column; gap:3px; }
+      .stpv-nav-item { display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer; border:1px solid rgba(255,255,255,0.05); border-radius:5px; background:rgba(0,0,0,0.3); backdrop-filter:blur(6px); min-width:140px; transition:all 0.3s; }
+      .stpv-nav-item:hover { border-color:rgba(255,255,255,0.12); }
+      .stpv-nav-item.active { border-color:currentColor; background:rgba(0,85,164,0.1); }
+      .stpv-nav-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; transition:all 0.3s; }
+      .stpv-nav-item.active .stpv-nav-dot { width:9px; height:9px; box-shadow:0 0 8px currentColor; }
+      .stpv-nav-label { font-size:0.5rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.2); font-weight:500; transition:all 0.3s; white-space:nowrap; }
+      .stpv-nav-item.active .stpv-nav-label { color:inherit; font-weight:700; }
+
+      /* Right controls */
+      .stpv-controls { position:absolute; right:12px; top:50%; transform:translateY(-50%); z-index:15; display:flex; flex-direction:column; gap:3px; padding:6px; background:rgba(0,0,0,0.35); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.05); border-radius:8px; }
+      .stpv-cbtn { width:32px; height:32px; border-radius:5px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); color:#778; font-size:0.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.25s; font-family:inherit; }
+      .stpv-cbtn:hover { background:rgba(0,85,164,0.12); border-color:rgba(0,85,164,0.35); color:#fff; }
+      .stpv-cbtn.active { background:rgba(0,85,164,0.18); border-color:rgba(0,85,164,0.45); color:#4da6ff; }
+      .stpv-cdiv { width:20px; height:1px; background:rgba(255,255,255,0.06); margin:1px auto; }
+
+      /* Assembly info overlay */
+      .stpv-info { position:absolute; left:12px; bottom:16px; z-index:15; pointer-events:none; opacity:0; transform:translateY(10px); transition:all 0.5s; max-width:280px; }
+      .stpv-info.visible { opacity:1; transform:translateY(0); }
+      .stpv-info-num { font-size:0.5rem; letter-spacing:0.3em; font-weight:500; }
+      .stpv-info-name { font-size:1.5rem; font-weight:800; letter-spacing:0.02em; line-height:1.1; margin-top:4px; text-shadow:0 2px 10px rgba(0,0,0,0.5); }
+      .stpv-info-sub { font-size:0.7rem; font-weight:300; color:rgba(255,255,255,0.55); margin-top:4px; letter-spacing:0.04em; text-shadow:0 1px 4px rgba(0,0,0,0.4); }
+      .stpv-info-detail { font-size:0.6rem; color:rgba(255,255,255,0.35); margin-top:8px; line-height:1.6; }
+      .stpv-info-line { width:30px; height:2px; margin-top:8px; border-radius:1px; }
+
+      /* AI Render button glow */
+      .stpv-cbtn.stpv-ai-btn { position:relative; }
+      .stpv-cbtn.stpv-ai-btn::after { content:''; position:absolute; inset:-2px; border-radius:7px; background:linear-gradient(135deg,rgba(0,85,164,0.3),rgba(255,209,0,0.3)); opacity:0; transition:opacity 0.3s; z-index:-1; }
+      .stpv-cbtn.stpv-ai-btn:hover::after { opacity:1; }
+
+      /* AI Render slide-out panel */
+      .stpv-ai-panel { position:absolute; top:0; right:0; bottom:0; width:340px; max-width:85%; background:rgba(10,14,26,0.96); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-left:1px solid rgba(255,255,255,0.06); z-index:30; transform:translateX(100%); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); display:flex; flex-direction:column; }
+      .stpv-ai-panel.open { transform:translateX(0); }
+      .stpv-ai-panel-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; }
+      .stpv-ai-panel-title { font-size:0.7rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; background:linear-gradient(90deg,#4da6ff,#FFD100); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
+      .stpv-ai-close { background:none; border:none; color:#667; font-size:1.1rem; cursor:pointer; padding:4px 8px; border-radius:4px; transition:all 0.2s; }
+      .stpv-ai-close:hover { color:#fff; background:rgba(255,255,255,0.06); }
+      .stpv-ai-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:16px; }
+      .stpv-ai-body::-webkit-scrollbar { width:4px; }
+      .stpv-ai-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }
+
+      /* AI Panel form elements */
+      .stpv-ai-section { display:flex; flex-direction:column; gap:6px; }
+      .stpv-ai-label { font-size:0.55rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:#556; }
+      .stpv-ai-textarea { width:100%; min-height:72px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:6px; color:#ccd; font-size:0.75rem; padding:10px 12px; font-family:inherit; resize:vertical; outline:none; transition:border-color 0.2s; box-sizing:border-box; }
+      .stpv-ai-textarea:focus { border-color:rgba(0,85,164,0.5); }
+      .stpv-ai-textarea::placeholder { color:#334; }
+
+      .stpv-ai-select { width:100%; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:6px; color:#ccd; font-size:0.72rem; padding:8px 12px; font-family:inherit; outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23556' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; box-sizing:border-box; }
+      .stpv-ai-select:focus { border-color:rgba(0,85,164,0.5); }
+      .stpv-ai-select option { background:#0a0e1a; color:#ccd; }
+
+      /* Style presets */
+      .stpv-ai-presets { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
+      .stpv-ai-preset { padding:8px 10px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:6px; cursor:pointer; text-align:center; font-size:0.6rem; letter-spacing:0.06em; color:#667; transition:all 0.2s; }
+      .stpv-ai-preset:hover { border-color:rgba(255,255,255,0.15); color:#99a; }
+      .stpv-ai-preset.active { border-color:rgba(0,85,164,0.5); background:rgba(0,85,164,0.1); color:#4da6ff; }
+      .stpv-ai-preset-icon { font-size:1rem; margin-bottom:3px; display:block; }
+
+      /* Materials chips */
+      .stpv-ai-chips { display:flex; flex-wrap:wrap; gap:4px; }
+      .stpv-ai-chip { display:flex; align-items:center; gap:4px; padding:3px 8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:12px; font-size:0.55rem; color:#889; }
+      .stpv-ai-chip-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
+
+      /* Generate button */
+      .stpv-ai-generate { width:100%; padding:11px 16px; background:linear-gradient(135deg,#0055A4,#003d75); border:1px solid rgba(0,85,164,0.5); border-radius:6px; color:#fff; font-size:0.7rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; font-family:inherit; transition:all 0.25s; flex-shrink:0; }
+      .stpv-ai-generate:hover { background:linear-gradient(135deg,#0066c4,#0055A4); box-shadow:0 4px 20px rgba(0,85,164,0.3); }
+      .stpv-ai-generate:disabled { opacity:0.4; cursor:not-allowed; }
+      .stpv-ai-generate.generating { animation:stpv-pulse 1.5s ease infinite; }
+      @keyframes stpv-pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
+
+      /* API key input */
+      .stpv-ai-key-input { width:100%; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:6px; color:#ccd; font-size:0.7rem; padding:8px 12px; font-family:monospace; outline:none; transition:border-color 0.2s; box-sizing:border-box; }
+      .stpv-ai-key-input:focus { border-color:rgba(0,85,164,0.5); }
+      .stpv-ai-key-input::placeholder { color:#334; font-family:inherit; }
+      .stpv-ai-key-status { font-size:0.55rem; color:#556; margin-top:2px; }
+      .stpv-ai-key-status.ok { color:#4a8; }
+      .stpv-ai-key-status.err { color:#c55; }
+
+      /* Gallery */
+      .stpv-ai-gallery { display:flex; flex-direction:column; gap:8px; }
+      .stpv-ai-gallery-item { position:relative; border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,0.06); cursor:pointer; transition:border-color 0.2s; }
+      .stpv-ai-gallery-item:hover { border-color:rgba(255,255,255,0.15); }
+      .stpv-ai-gallery-item img { width:100%; display:block; }
+      .stpv-ai-gallery-actions { position:absolute; bottom:0; left:0; right:0; padding:6px 8px; background:linear-gradient(transparent,rgba(0,0,0,0.8)); display:flex; gap:4px; justify-content:flex-end; opacity:0; transition:opacity 0.2s; }
+      .stpv-ai-gallery-item:hover .stpv-ai-gallery-actions { opacity:1; }
+      .stpv-ai-dl-btn { padding:3px 8px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:#dde; font-size:0.5rem; cursor:pointer; font-family:inherit; letter-spacing:0.06em; text-transform:uppercase; transition:all 0.2s; }
+      .stpv-ai-dl-btn:hover { background:rgba(0,85,164,0.3); border-color:rgba(0,85,164,0.5); }
+
+      /* Empty gallery state */
+      .stpv-ai-empty { text-align:center; padding:24px 16px; color:#334; }
+      .stpv-ai-empty-icon { font-size:2rem; margin-bottom:8px; opacity:0.4; }
+      .stpv-ai-empty-text { font-size:0.6rem; line-height:1.6; }
+
+      /* Preview thumbnail */
+      .stpv-ai-preview { border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,0.06); }
+      .stpv-ai-preview img { width:100%; display:block; }
+      .stpv-ai-preview-label { font-size:0.5rem; color:#445; text-align:center; padding:4px; letter-spacing:0.08em; }
+    `;
+    container.appendChild(style);
+  }
+
+  // ─── HTML Template ───
+  function buildUI(container, config) {
+    // All captions are customizable via config
+    const captions = Object.assign({
+      brand: '',
+      productName: '3D Viewer',
+      loaderTitle: '',
+      loaderText: 'Initializing 3D engine...',
+      btnOverview: 'Overview',
+      btnCollapse: 'Collapse',
+      btnExplode: 'Explode',
+      btnExpand: '+',
+      btnContract: '−',
+      btnAutoRotate: '↻',
+      btnStopRotate: '■',
+      btnFreeRotate: '⚘',
+      btnReset: '↺',
+      titleExpand: 'Expand explosion',
+      titleContract: 'Collapse',
+      titleAutoRotate: 'Auto Rotate',
+      titleStopRotate: 'Stop rotation',
+      titleFreeRotate: 'Free 3D rotate',
+      titleReset: 'Reset view',
+    }, config.captions || {});
+
+    // Build display title: "brand productName" or just productName
+    const brand = captions.brand || config.brand || '';
+    const product = captions.productName || config.productName || '';
+    const fullTitle = brand && product ? `${brand} ${product}` : brand || product || '3D Viewer';
+
+    // Loader title defaults to fullTitle
+    const loaderTitle = captions.loaderTitle || fullTitle;
+
+    // Format brand: bold the last word
+    function formatBrand(text) {
+      if (!text) return '3D Viewer';
+      return text.replace(/(\S+)\s*$/, '<b>$1</b>');
+    }
+
+    container.innerHTML = `
+      <div class="stpv">
+        <div class="stpv-loader">
+          <h2>${formatBrand(loaderTitle)}</h2>
+          <div class="stpv-loader-bar"><div class="stpv-loader-fill"></div></div>
+          <div class="stpv-loader-text">${captions.loaderText}</div>
+        </div>
+        <div class="stpv-topbar">
+          <div class="stpv-brand">${formatBrand(fullTitle)}</div>
+          <div class="stpv-nav">
+            <button class="stpv-btn active" data-action="overview">${captions.btnOverview}</button>
+            <button class="stpv-btn" data-action="collapse">${captions.btnCollapse}</button>
+            <button class="stpv-btn" data-action="explode">${captions.btnExplode}</button>
+          </div>
+        </div>
+        <div class="stpv-leftnav"></div>
+        <div class="stpv-controls">
+          <button class="stpv-cbtn" data-action="expand" title="${captions.titleExpand}">${captions.btnExpand}</button>
+          <button class="stpv-cbtn" data-action="contract" title="${captions.titleContract}">${captions.btnContract}</button>
+          <div class="stpv-cdiv"></div>
+          <button class="stpv-cbtn active" data-action="auto-rotate" title="${captions.titleAutoRotate}">&#10227;</button>
+          <button class="stpv-cbtn" data-action="stop-rotate" title="${captions.titleStopRotate}">&#9632;</button>
+          <button class="stpv-cbtn" data-action="free-rotate" title="${captions.titleFreeRotate}">&#9978;</button>
+          <div class="stpv-cdiv"></div>
+          <button class="stpv-cbtn" data-action="reset" title="${captions.titleReset}">&#8634;</button>
+          <div class="stpv-cdiv"></div>
+          <button class="stpv-cbtn stpv-ai-btn" data-action="ai-render" title="AI Render">&#10024;</button>
+        </div>
+        <div class="stpv-info">
+          <div class="stpv-info-num"></div>
+          <div class="stpv-info-name"></div>
+          <div class="stpv-info-sub"></div>
+          <div class="stpv-info-detail"></div>
+          <div class="stpv-info-line"></div>
+        </div>
+        <div class="stpv-ai-panel">
+          <div class="stpv-ai-panel-header">
+            <div class="stpv-ai-panel-title">&#10024; AI Render</div>
+            <button class="stpv-ai-close">&times;</button>
+          </div>
+          <div class="stpv-ai-body">
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">Scene Preview</div>
+              <div class="stpv-ai-preview">
+                <img class="stpv-ai-preview-img" alt="Current view" />
+                <div class="stpv-ai-preview-label">Current camera view will be used as reference</div>
+              </div>
+            </div>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">Scene Prompt</div>
+              <textarea class="stpv-ai-textarea" placeholder="Modern bike shop, wooden floor, glass walls, natural light, studio photography..."></textarea>
+            </div>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">Style Preset</div>
+              <div class="stpv-ai-presets">
+                <div class="stpv-ai-preset active" data-preset="product">
+                  <span class="stpv-ai-preset-icon">&#128247;</span>Product Photo
+                </div>
+                <div class="stpv-ai-preset" data-preset="marketing">
+                  <span class="stpv-ai-preset-icon">&#127775;</span>Marketing Shot
+                </div>
+                <div class="stpv-ai-preset" data-preset="technical">
+                  <span class="stpv-ai-preset-icon">&#128295;</span>Technical
+                </div>
+                <div class="stpv-ai-preset" data-preset="artistic">
+                  <span class="stpv-ai-preset-icon">&#127912;</span>Artistic
+                </div>
+              </div>
+            </div>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">Detected Materials</div>
+              <div class="stpv-ai-chips"></div>
+            </div>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">AI Model</div>
+              <select class="stpv-ai-select stpv-ai-model-select">
+                <option value="gemini-flash-image">Gemini 2.0 Flash — Image Gen (FREE)</option>
+                <option value="gemini-nano-banana">Nano Banana v1 — Gemini 2.5 Flash</option>
+                <option value="stability-sdxl">Stability AI — SDXL</option>
+                <option value="stability-sd3">Stability AI — SD3</option>
+                <option value="openai-dall-e-3">OpenAI — DALL·E 3</option>
+                <option value="fal-flux">Fal.ai — FLUX</option>
+                <option value="replicate-custom">Replicate — Custom Model</option>
+              </select>
+            </div>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">API Key</div>
+              <input type="password" class="stpv-ai-key-input" placeholder="Paste your API key..." />
+              <div class="stpv-ai-key-hint"></div>
+              <div class="stpv-ai-key-status">Key is stored in browser only, never sent to our servers.</div>
+            </div>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">Output Format</div>
+              <select class="stpv-ai-select stpv-ai-format-select">
+                <option value="png">PNG (lossless)</option>
+                <option value="jpg">JPG (smaller file)</option>
+                <option value="webp">WebP (modern)</option>
+              </select>
+            </div>
+            <button class="stpv-ai-generate">&#10024; Generate Render</button>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">Gallery</div>
+              <div class="stpv-ai-gallery">
+                <div class="stpv-ai-empty">
+                  <div class="stpv-ai-empty-icon">&#128444;</div>
+                  <div class="stpv-ai-empty-text">No renders yet.<br/>Configure your scene and hit Generate.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    injectStyles(container.querySelector('.stpv'));
+  }
+
+  // ─── Main Viewer Class ───
+  class STPViewerInstance {
+    constructor(container, config) {
+      this.el = typeof container === 'string' ? document.querySelector(container) : container;
+      this.config = config;
+      this.src = config.src.replace(/\/?$/, '/');
+      this.assemblies = config.assemblies || [];
+      this.parts = [];
+      this.asmData = [];
+      this.activeAssembly = -1;
+      this.explodeAmount = 0;
+      this.targetExplode = 0;
+      this.dimAmount = 0;
+      this.targetDim = 0;
+      this.explodeLevel = 0;
+      this.manualMode = false;
+      this.THREE = null;
+    }
+
+    async start() {
+      buildUI(this.el, this.config);
+
+      // Load Three.js from CDN
+      const THREE = await this._loadThree();
+      this.THREE = THREE;
+
+      // Load addons
+      const { OrbitControls } = await import(`${THREE_CDN}/examples/jsm/controls/OrbitControls.js`);
+      const { STLLoader } = await import(`${THREE_CDN}/examples/jsm/loaders/STLLoader.js`);
+      this.OrbitControls = OrbitControls;
+      this.STLLoader = STLLoader;
+
+      // Load config + manifest
+      await this._loadData();
+
+      // Setup scene
+      this._setupScene();
+      this._setupLights();
+      this._setupControls();
+      this._bindUI();
+      this._initAIRender();
+
+      // Load parts
+      await this._loadParts();
+
+      // Start render
+      this._animate();
+
+      // Hide loader
+      setTimeout(() => {
+        this.el.querySelector('.stpv-loader').classList.add('hidden');
+      }, 500);
+    }
+
+    async _loadThree() {
+      if (window.THREE) return window.THREE;
+      const mod = await import(`${THREE_CDN}/build/three.module.js`);
+      return mod;
+    }
+
+    async _loadData() {
+      // Load manifest
+      const mRes = await fetch(this.src + 'manifest.json');
+      this.manifest = (await mRes.json()).filter(p => p.fileSize > 2000);
+
+      // Load assemblies if not provided in config
+      if (!this.assemblies.length) {
+        try {
+          const aRes = await fetch(this.src + 'assemblies.json');
+          this.assemblies = await aRes.json();
+        } catch (e) {
+          // Try config.json
+          try {
+            const cRes = await fetch(this.src + 'config.json');
+            const cfg = await cRes.json();
+            this.assemblies = cfg.assemblies || [];
+            if (cfg.productName) this.config.productName = cfg.productName;
+          } catch (e2) { /* no assemblies */ }
+        }
+      }
+
+      // Build left nav
+      this._buildLeftNav();
+    }
+
+    _buildLeftNav() {
+      const nav = this.el.querySelector('.stpv-leftnav');
+      nav.innerHTML = '';
+      this.assemblies.forEach((asm, i) => {
+        const item = document.createElement('div');
+        item.className = 'stpv-nav-item';
+        item.style.color = asm.color;
+        item.dataset.index = i;
+        item.innerHTML = `<div class="stpv-nav-dot" style="background:${asm.color}"></div><div class="stpv-nav-label">${asm.name}</div>`;
+        item.addEventListener('click', () => this._selectAssembly(i));
+        nav.appendChild(item);
+      });
+    }
+
+    _setupScene() {
+      const T = this.THREE;
+      const wrapper = this.el.querySelector('.stpv');
+      const w = wrapper.clientWidth, h = wrapper.clientHeight;
+
+      this.scene = new T.Scene();
+      this.scene.background = new T.Color(0x0a0e1a);
+
+      this.camera = new T.PerspectiveCamera(35, w / h, 1, 15000);
+      this.camera.position.set(3000, 1800, 3000);
+
+      this.renderer = new T.WebGLRenderer({ antialias: true, powerPreference: 'high-performance', preserveDrawingBuffer: true });
+      this.renderer.setSize(w, h);
+      this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+      this.renderer.shadowMap.enabled = true;
+      this.renderer.toneMapping = T.ACESFilmicToneMapping;
+      this.renderer.toneMappingExposure = 2.2;
+
+      // Insert canvas after loader
+      const loader = wrapper.querySelector('.stpv-loader');
+      wrapper.insertBefore(this.renderer.domElement, loader);
+
+      // Ground
+      const ground = new T.Mesh(
+        new T.PlaneGeometry(12000, 12000),
+        new T.MeshStandardMaterial({ color: 0x151a2a, metalness: 0.7, roughness: 0.3 })
+      );
+      ground.rotation.x = -Math.PI / 2;
+      ground.position.y = -500;
+      ground.receiveShadow = true;
+      this.scene.add(ground);
+
+      // Spotlight for highlighting
+      this.spot = new T.SpotLight(0xffffff, 0, 0, Math.PI / 5, 0.6, 1);
+      this.spot.position.set(0, 3000, 0);
+      this.scene.add(this.spot);
+      this.scene.add(this.spot.target);
+
+      // Resize observer
+      const ro = new ResizeObserver(() => {
+        const w2 = wrapper.clientWidth, h2 = wrapper.clientHeight;
+        this.camera.aspect = w2 / h2;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(w2, h2);
+      });
+      ro.observe(wrapper);
+    }
+
+    _setupLights() {
+      const T = this.THREE;
+      this.scene.add(new T.AmbientLight(0x8899bb, 1.5));
+      this.scene.add(new T.HemisphereLight(0xddeeff, 0x445566, 1.0));
+
+      const key = new T.DirectionalLight(0xfff5e6, 3.5);
+      key.position.set(2000, 3000, 1500);
+      key.castShadow = true;
+      this.scene.add(key);
+
+      this.scene.add(Object.assign(new T.DirectionalLight(0xaaccff, 1.8), { position: new T.Vector3(-1500, 1000, -1000) }));
+      this.scene.add(Object.assign(new T.DirectionalLight(0xffffff, 1.2), { position: new T.Vector3(0, 500, -2500) }));
+      this.scene.add(Object.assign(new T.DirectionalLight(0x0055A4, 0.8), { position: new T.Vector3(-500, 1500, -2000) }));
+      this.scene.add(Object.assign(new T.DirectionalLight(0xeeeeff, 0.5), { position: new T.Vector3(0, 4000, 0) }));
+    }
+
+    _setupControls() {
+      this.controls = new this.OrbitControls(this.camera, this.renderer.domElement);
+      this.controls.enableDamping = true;
+      this.controls.dampingFactor = 0.05;
+      this.controls.target.set(0, 0, 0);
+      this.controls.autoRotate = true;
+      this.controls.autoRotateSpeed = 0.4;
+      this.controls.minDistance = 800;
+      this.controls.maxDistance = 5500;
+    }
+
+    async _loadParts() {
+      const T = this.THREE;
+      const loader = new this.STLLoader();
+      const fill = this.el.querySelector('.stpv-loader-fill');
+      const text = this.el.querySelector('.stpv-loader-text');
+
+      // Model center
+      let cx = 0, cy = 0, cz = 0;
+      for (const p of this.manifest) { cx += p.center[0]; cy += p.center[1]; cz += p.center[2]; }
+      this.modelCenter = new T.Vector3(cx / this.manifest.length, cy / this.manifest.length, cz / this.manifest.length);
+
+      // Assembly index per part
+      const partAsm = new Array(this.manifest.length).fill(-1);
+      for (let ai = 0; ai < this.assemblies.length; ai++) {
+        const [s, e] = this.assemblies[ai].indices;
+        for (let pi = s; pi < e; pi++) partAsm[pi] = ai;
+      }
+
+      // Per-assembly data
+      this.asmData = this.assemblies.map(a => ({
+        ...a, meshes: [], center: new T.Vector3(), colorObj: new T.Color(a.color),
+      }));
+
+      // Material presets per assembly key
+      const matPresets = {};
+      for (const asm of this.assemblies) {
+        const c = new T.Color(asm.color);
+        const hsl = {}; c.getHSL(hsl);
+        matPresets[asm.key] = {
+          color: new T.Color().setHSL(hsl.h, hsl.s * 0.4, 0.6),
+          metalness: 0.45, roughness: 0.35,
+        };
+      }
+
+      const total = this.manifest.length;
+      let loaded = 0;
+
+      const batchSize = 25;
+      for (let i = 0; i < total; i += batchSize) {
+        const batch = this.manifest.slice(i, i + batchSize);
+        await Promise.all(batch.map((partInfo, bi) => new Promise(resolve => {
+          const idx = i + bi;
+          loader.load(this.src + 'parts/' + partInfo.file, geo => {
+            geo.computeVertexNormals();
+
+            const ai = partAsm[idx];
+            const preset = ai >= 0 && this.assemblies[ai] ? matPresets[this.assemblies[ai].key] : null;
+            const baseColor = preset ? preset.color.clone() : new T.Color(0xb0b8c4);
+            const baseMetal = preset ? preset.metalness : 0.4;
+            const baseRough = preset ? preset.roughness : 0.35;
+
+            const mat = new T.MeshStandardMaterial({
+              color: baseColor, metalness: baseMetal, roughness: baseRough, side: T.DoubleSide,
+            });
+            const mesh = new T.Mesh(geo, mat);
+            mesh.castShadow = true;
+            mesh.receiveShadow = true;
+
+            const mc = this.modelCenter;
+            const oc = new T.Vector3(partInfo.center[0] - mc.x, partInfo.center[2] - mc.z, -(partInfo.center[1] - mc.y));
+            geo.translate(-mc.x, -mc.z, mc.y);
+
+            const dir = oc.clone();
+            if (dir.length() < 1) dir.set(0, 1, 0);
+            dir.normalize();
+
+            const vol = partInfo.bbox[0] * partInfo.bbox[1] * partInfo.bbox[2];
+            let dist;
+            if (vol > 50000000) dist = 250 + Math.random() * 120;
+            else if (vol > 1000000) dist = 400 + Math.random() * 300;
+            else dist = 600 + Math.random() * 500;
+
+            mesh.userData = { idx, asmIdx: ai, explodeDir: dir, explodeDist: dist, origCenter: oc, baseColor, baseMetal, baseRough, _currentExplode: 0 };
+
+            this.scene.add(mesh);
+            this.parts.push(mesh);
+            if (ai >= 0) this.asmData[ai].meshes.push(mesh);
+
+            loaded++;
+            fill.style.width = (loaded / total * 100) + '%';
+            text.textContent = `${loaded} / ${total}`;
+            resolve();
+          }, undefined, () => { loaded++; resolve(); });
+        })));
+      }
+
+      // Compute assembly centers
+      for (const ad of this.asmData) {
+        if (!ad.meshes.length) continue;
+        const c = new T.Vector3();
+        for (const m of ad.meshes) c.add(m.userData.origCenter);
+        c.divideScalar(ad.meshes.length);
+        ad.center.copy(c);
+      }
+    }
+
+    _selectAssembly(i) {
+      if (this.activeAssembly === i) {
+        // Deselect
+        this.activeAssembly = -1;
+        this.targetDim = 0;
+        this._hideInfo();
+      } else {
+        this.activeAssembly = i;
+        this.targetExplode = 1;
+        this.targetDim = 1;
+        if (this.explodeLevel < 0.5) this.explodeLevel = 1;
+        this.manualMode = true;
+        this._showInfo(i);
+      }
+      this._updateNavActive();
+    }
+
+    _updateNavActive() {
+      this.el.querySelectorAll('.stpv-nav-item').forEach((item, i) => {
+        item.classList.toggle('active', i === this.activeAssembly);
+      });
+    }
+
+    _showInfo(i) {
+      const asm = this.assemblies[i];
+      const info = this.el.querySelector('.stpv-info');
+      info.querySelector('.stpv-info-num').textContent = `0${i + 1} / 0${this.assemblies.length}`;
+      info.querySelector('.stpv-info-num').style.color = asm.color;
+      info.querySelector('.stpv-info-name').textContent = asm.name;
+      info.querySelector('.stpv-info-name').style.color = asm.color;
+      info.querySelector('.stpv-info-sub').textContent = asm.subtitle || '';
+      info.querySelector('.stpv-info-detail').textContent = asm.detail || '';
+      info.querySelector('.stpv-info-line').style.background = asm.color;
+      info.classList.add('visible');
+    }
+
+    _hideInfo() {
+      this.el.querySelector('.stpv-info').classList.remove('visible');
+    }
+
+    _bindUI() {
+      const self = this;
+
+      // Top bar buttons
+      this.el.querySelectorAll('.stpv-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const action = btn.dataset.action;
+          self.el.querySelectorAll('.stpv-btn').forEach(b => b.classList.remove('active'));
+          btn.classList.add('active');
+
+          if (action === 'overview') {
+            self.manualMode = false;
+            self.explodeLevel = 0;
+            self.targetExplode = 0;
+            self.targetDim = 0;
+            self.activeAssembly = -1;
+            self._hideInfo();
+            self._updateNavActive();
+          } else if (action === 'collapse') {
+            self.manualMode = true;
+            self.targetExplode = 0;
+            self.explodeLevel = 0;
+            self.targetDim = 0;
+            self.activeAssembly = -1;
+            self._hideInfo();
+            self._updateNavActive();
+          } else if (action === 'explode') {
+            self.manualMode = true;
+            self.targetExplode = 1;
+            self.explodeLevel = 1;
+            self.targetDim = 0;
+            self.activeAssembly = -1;
+            self._hideInfo();
+            self._updateNavActive();
+          }
+        });
+      });
+
+      // Right controls
+      this.el.querySelectorAll('.stpv-cbtn').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const action = btn.dataset.action;
+
+          if (action === 'ai-render') {
+            this._toggleAIPanel();
+            return;
+          }
+
+          if (action === 'expand') {
+            self.explodeLevel = Math.min(3.0, self.explodeLevel + 0.25);
+            self.manualMode = true;
+            self.targetExplode = Math.min(self.explodeLevel, 1);
+            self.targetDim = 0;
+            self.activeAssembly = -1;
+            self._hideInfo();
+            self._updateNavActive();
+          } else if (action === 'contract') {
+            self.explodeLevel = Math.max(0, self.explodeLevel - 0.25);
+            self.manualMode = true;
+            self.targetExplode = Math.min(self.explodeLevel, 1);
+            self.targetDim = 0;
+            self.activeAssembly = -1;
+            self._hideInfo();
+            self._updateNavActive();
+          } else if (action === 'auto-rotate') {
+            self.controls.autoRotate = true;
+            self.controls.autoRotateSpeed = 0.4;
+            self._setRotateActive(btn);
+          } else if (action === 'stop-rotate') {
+            self.controls.autoRotate = false;
+            self._setRotateActive(btn);
+          } else if (action === 'free-rotate') {
+            self.controls.autoRotate = false;
+            self._setRotateActive(btn);
+          } else if (action === 'reset') {
+            self.camera.position.set(3000, 1800, 3000);
+            self.controls.target.set(0, 0, 0);
+            self.controls.autoRotate = true;
+            self.controls.autoRotateSpeed = 0.4;
+            self.manualMode = false;
+            self.explodeLevel = 0;
+            self.targetExplode = 0;
+            self.targetDim = 0;
+            self.activeAssembly = -1;
+            self._hideInfo();
+            self._updateNavActive();
+            self._setRotateActive(self.el.querySelector('[data-action="auto-rotate"]'));
+            self.el.querySelectorAll('.stpv-btn').forEach(b => b.classList.remove('active'));
+            self.el.querySelector('[data-action="overview"]').classList.add('active');
+          }
+        });
+      });
+    }
+
+    _setRotateActive(btn) {
+      this.el.querySelectorAll('.stpv-cbtn[data-action*="rotate"]').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+    }
+
+    // ─── AI Render System ───
+
+    _initAIRender() {
+      this.aiPanel = this.el.querySelector('.stpv-ai-panel');
+      this.aiRenders = [];
+      this.aiActivePreset = 'product';
+
+      // Style preset prompt templates
+      this.aiPresets = {
+        product: { suffix: 'professional product photography, studio lighting, clean white cyclorama background, soft shadows, 8K, commercial quality' },
+        marketing: { suffix: 'lifestyle marketing photography, dramatic lighting, shallow depth of field, premium brand aesthetic, magazine quality, cinematic' },
+        technical: { suffix: 'technical documentation rendering, neutral gray background, even lighting, precise detail, engineering visualization, orthographic feel' },
+        artistic: { suffix: 'artistic 3D render, volumetric lighting, ray-traced, Octane render style, dramatic atmosphere, creative composition, award-winning CGI' },
+      };
+
+      // Panel toggle
+      const closeBtn = this.aiPanel.querySelector('.stpv-ai-close');
+      closeBtn.addEventListener('click', () => this._toggleAIPanel(false));
+
+      // Presets
+      this.aiPanel.querySelectorAll('.stpv-ai-preset').forEach(p => {
+        p.addEventListener('click', () => {
+          this.aiPanel.querySelectorAll('.stpv-ai-preset').forEach(pp => pp.classList.remove('active'));
+          p.classList.add('active');
+          this.aiActivePreset = p.dataset.preset;
+        });
+      });
+
+      // Populate detected materials from assemblies
+      this._populateMaterialChips();
+
+      // Model selector — persist choice
+      const modelSel = this.aiPanel.querySelector('.stpv-ai-model-select');
+      const savedModel = this._aiStorageGet('ai-model');
+      if (savedModel) modelSel.value = savedModel;
+      modelSel.addEventListener('change', () => this._aiStorageSet('ai-model', modelSel.value));
+
+      // API key — persist per provider prefix
+      const keyInput = this.aiPanel.querySelector('.stpv-ai-key-input');
+      const keyStatus = this.aiPanel.querySelector('.stpv-ai-key-status');
+      const keyHint = this.aiPanel.querySelector('.stpv-ai-key-hint');
+
+      const providerHints = {
+        gemini: '🍌 FREE — 500 images/day. Get key at aistudio.google.com',
+        stability: 'Get key at platform.stability.ai (~$0.03/render)',
+        openai: 'Get key at platform.openai.com (~$0.04/render)',
+        fal: 'Get key at fal.ai/dashboard',
+        replicate: 'Get key at replicate.com/account',
+      };
+
+      const loadKey = () => {
+        const provider = modelSel.value.split('-')[0];
+        const saved = this._aiStorageGet('ai-key-' + provider);
+        keyInput.value = saved || '';
+        keyStatus.className = 'stpv-ai-key-status' + (saved ? ' ok' : '');
+        keyStatus.textContent = saved ? 'Key saved for this provider.' : 'Key is stored in browser only, never sent to our servers.';
+        keyHint.textContent = providerHints[provider] || '';
+        keyHint.style.cssText = 'font-size:0.55rem;color:#4a8;margin-bottom:4px;';
+      };
+      loadKey();
+      modelSel.addEventListener('change', loadKey);
+      keyInput.addEventListener('change', () => {
+        const provider = modelSel.value.split('-')[0];
+        this._aiStorageSet('ai-key-' + provider, keyInput.value);
+        loadKey();
+      });
+
+      // Generate button
+      const genBtn = this.aiPanel.querySelector('.stpv-ai-generate');
+      genBtn.addEventListener('click', () => this._aiGenerate());
+    }
+
+    _toggleAIPanel(forceState) {
+      const open = forceState !== undefined ? forceState : !this.aiPanel.classList.contains('open');
+      this.aiPanel.classList.toggle('open', open);
+      if (open) {
+        // Capture current canvas as preview
+        this._aiCapturePreview();
+      }
+    }
+
+    _aiCapturePreview() {
+      // Force a render to ensure the canvas is current
+      this.renderer.render(this.scene, this.camera);
+      const dataURL = this.renderer.domElement.toDataURL('image/png');
+      const img = this.aiPanel.querySelector('.stpv-ai-preview-img');
+      img.src = dataURL;
+      this._aiCurrentCapture = dataURL;
+    }
+
+    _populateMaterialChips() {
+      const chipsEl = this.aiPanel.querySelector('.stpv-ai-chips');
+      if (!this.assemblies.length) {
+        chipsEl.innerHTML = '<span style="font-size:0.55rem;color:#445">No assemblies detected</span>';
+        return;
+      }
+      chipsEl.innerHTML = '';
+      for (const asm of this.assemblies) {
+        const chip = document.createElement('span');
+        chip.className = 'stpv-ai-chip';
+        chip.innerHTML = `<span class="stpv-ai-chip-dot" style="background:${asm.color}"></span>${asm.name}`;
+        chipsEl.appendChild(chip);
+      }
+    }
+
+    _aiBuildPrompt() {
+      const userPrompt = this.aiPanel.querySelector('.stpv-ai-textarea').value.trim();
+      const preset = this.aiPresets[this.aiActivePreset];
+
+      // Build material context from assemblies
+      let materialCtx = '';
+      if (this.assemblies.length) {
+        const matParts = this.assemblies.map(a => {
+          const name = (a.name || a.key || '').toLowerCase();
+          return name;
+        }).filter(Boolean);
+        if (matParts.length) materialCtx = 'The object includes components: ' + matParts.join(', ') + '. ';
+      }
+
+      const scene = userPrompt || 'a clean studio environment with professional lighting';
+      return `Photorealistic render of an industrial/mechanical product in ${scene}. ${materialCtx}${preset.suffix}`;
+    }
+
+    async _aiGenerate() {
+      const genBtn = this.aiPanel.querySelector('.stpv-ai-generate');
+      const modelSel = this.aiPanel.querySelector('.stpv-ai-model-select');
+      const keyInput = this.aiPanel.querySelector('.stpv-ai-key-input');
+      const model = modelSel.value;
+      const apiKey = keyInput.value.trim();
+
+      if (!apiKey) {
+        this._aiShowKeyError('Please enter an API key first.');
+        keyInput.focus();
+        return;
+      }
+
+      // Capture fresh screenshot
+      this._aiCapturePreview();
+
+      const prompt = this._aiBuildPrompt();
+      const format = this.aiPanel.querySelector('.stpv-ai-format-select').value;
+
+      genBtn.disabled = true;
+      genBtn.classList.add('generating');
+      genBtn.textContent = '⟳ Generating...';
+
+      try {
+        const imageURL = await this._aiCallProvider(model, apiKey, prompt, this._aiCurrentCapture);
+        this._aiAddToGallery(imageURL, prompt, model, format);
+      } catch (err) {
+        console.error('AI Render error:', err);
+        this._aiShowKeyError(err.message || 'Generation failed. Check your API key and try again.');
+      } finally {
+        genBtn.disabled = false;
+        genBtn.classList.remove('generating');
+        genBtn.textContent = '✨ Generate Render';
+      }
+    }
+
+    async _aiCallProvider(model, apiKey, prompt, referenceImage) {
+      const provider = model.split('-')[0];
+      const imageBase64 = referenceImage.replace(/^data:image\/\w+;base64,/, '');
+
+      if (provider === 'gemini') {
+        return await this._aiCallGemini(model, apiKey, prompt, imageBase64);
+      } else if (provider === 'stability') {
+        return await this._aiCallStability(model, apiKey, prompt, imageBase64);
+      } else if (provider === 'openai') {
+        return await this._aiCallOpenAI(apiKey, prompt, imageBase64);
+      } else if (provider === 'fal') {
+        return await this._aiCallFal(apiKey, prompt, imageBase64);
+      } else if (provider === 'replicate') {
+        return await this._aiCallReplicate(apiKey, prompt, imageBase64);
+      }
+      throw new Error('Unknown provider: ' + provider);
+    }
+
+    async _aiCallGemini(model, apiKey, prompt, imageBase64) {
+      // Map model dropdown values to Gemini API model names
+      const modelMap = {
+        'gemini-flash': 'gemini-2.5-flash-image',                        // Nano Banana v1
+        'gemini-flash-image': 'gemini-2.5-flash-image',                  // Nano Banana v1 (alias)
+        'gemini-nano-banana': 'gemini-2.5-flash-image',                  // Nano Banana v1
+        'gemini-nano-banana-2': 'gemini-3.1-flash-image-preview',        // Nano Banana v2
+      };
+      const geminiModel = modelMap[model] || 'gemini-2.5-flash-image';
+      const endpoint = `https://generativelanguage.googleapis.com/v1beta/models/${geminiModel}:generateContent?key=${apiKey}`;
+
+      const body = {
+        contents: [{
+          parts: [
+            {
+              inline_data: {
+                mime_type: 'image/png',
+                data: imageBase64,
+              }
+            },
+            {
+              text: `You are a photorealistic product rendering engine. Take this 3D CAD viewer screenshot and transform it into a photorealistic product render. ${prompt}. Output ONLY the rendered image, no text.`
+            }
+          ]
+        }],
+        generationConfig: {
+          responseModalities: ['TEXT', 'IMAGE'],
+        }
+      };
+
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+
+      if (!res.ok) {
+        const errText = await res.text();
+        let msg = `Gemini API error ${res.status}`;
+        try {
+          const errJson = JSON.parse(errText);
+          const errCode = errJson?.error?.status || '';
+          const errMsg = errJson?.error?.message || '';
+          if (res.status === 429 || errCode === 'RESOURCE_EXHAUSTED') {
+            msg = 'Free tier quota exhausted. Resets daily at midnight Pacific. Try tomorrow or switch to paid plan.';
+          } else if (res.status === 404) {
+            msg = `Model "${geminiModel}" not found. It may have been retired.`;
+          } else if (res.status === 403) {
+            msg = 'API key not authorised for image generation.';
+          } else if (errMsg) {
+            msg = errMsg.length > 120 ? errMsg.slice(0, 120) + '…' : errMsg;
+          }
+        } catch (_) {}
+        throw new Error(msg);
+      }
+
+      const data = await res.json();
+
+      // Find the image part in the response
+      const candidates = data.candidates || [];
+      for (const candidate of candidates) {
+        const parts = (candidate.content && candidate.content.parts) || [];
+        for (const part of parts) {
+          if (part.inlineData && part.inlineData.mimeType && part.inlineData.mimeType.startsWith('image/')) {
+            return `data:${part.inlineData.mimeType};base64,${part.inlineData.data}`;
+          }
+        }
+      }
+      throw new Error('Gemini returned no image. The model may have declined the request. Try adjusting your prompt.');
+    }
+
+    async _aiCallStability(model, apiKey, prompt, imageBase64) {
+      const engineId = model === 'stability-sd3' ? 'sd3-medium' : 'stable-diffusion-xl-1024-v1-0';
+      const isSD3 = model === 'stability-sd3';
+
+      // Convert base64 to blob for image-to-image
+      const blob = this._aiBase64ToBlob(imageBase64, 'image/png');
+
+      const formData = new FormData();
+      formData.append('init_image', blob, 'reference.png');
+      formData.append('init_image_mode', 'IMAGE_STRENGTH');
+      formData.append('image_strength', '0.35');
+      formData.append('text_prompts[0][text]', prompt);
+      formData.append('text_prompts[0][weight]', '1');
+      formData.append('cfg_scale', '7');
+      formData.append('samples', '1');
+      formData.append('steps', '30');
+
+      const endpoint = isSD3
+        ? 'https://api.stability.ai/v2beta/stable-image/generate/sd3'
+        : `https://api.stability.ai/v1/generation/${engineId}/image-to-image`;
+
+      const headers = {
+        'Authorization': `Bearer ${apiKey}`,
+        'Accept': 'application/json',
+      };
+
+      if (isSD3) {
+        // SD3 uses different API shape
+        const fd = new FormData();
+        fd.append('prompt', prompt);
+        fd.append('image', blob, 'reference.png');
+        fd.append('strength', '0.4');
+        fd.append('mode', 'image-to-image');
+        fd.append('output_format', 'png');
+
+        const res = await fetch(endpoint, { method: 'POST', headers, body: fd });
+        if (!res.ok) throw new Error(`Stability API error: ${res.status} ${await res.text()}`);
+        const data = await res.json();
+        return 'data:image/png;base64,' + data.image;
+      }
+
+      const res = await fetch(endpoint, { method: 'POST', headers, body: formData });
+      if (!res.ok) throw new Error(`Stability API error: ${res.status} ${await res.text()}`);
+      const data = await res.json();
+      return 'data:image/png;base64,' + data.artifacts[0].base64;
+    }
+
+    async _aiCallOpenAI(apiKey, prompt, imageBase64) {
+      const res = await fetch('https://api.openai.com/v1/images/edits', {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${apiKey}` },
+        body: (() => {
+          const fd = new FormData();
+          fd.append('image', this._aiBase64ToBlob(imageBase64, 'image/png'), 'reference.png');
+          fd.append('prompt', prompt);
+          fd.append('model', 'dall-e-3');
+          fd.append('size', '1024x1024');
+          fd.append('n', '1');
+          return fd;
+        })(),
+      });
+      if (!res.ok) throw new Error(`OpenAI API error: ${res.status} ${await res.text()}`);
+      const data = await res.json();
+      if (data.data[0].b64_json) return 'data:image/png;base64,' + data.data[0].b64_json;
+      return data.data[0].url;
+    }
+
+    async _aiCallFal(apiKey, prompt, imageBase64) {
+      const res = await fetch('https://fal.run/fal-ai/flux/dev/image-to-image', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Key ${apiKey}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          prompt,
+          image_url: 'data:image/png;base64,' + imageBase64,
+          strength: 0.65,
+          num_images: 1,
+          image_size: 'landscape_16_9',
+        }),
+      });
+      if (!res.ok) throw new Error(`Fal.ai API error: ${res.status} ${await res.text()}`);
+      const data = await res.json();
+      return data.images[0].url;
+    }
+
+    async _aiCallReplicate(apiKey, prompt, imageBase64) {
+      const res = await fetch('https://api.replicate.com/v1/predictions', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${apiKey}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          model: 'stability-ai/sdxl',
+          input: {
+            prompt,
+            image: 'data:image/png;base64,' + imageBase64,
+            prompt_strength: 0.65,
+            num_outputs: 1,
+          },
+        }),
+      });
+      if (!res.ok) throw new Error(`Replicate API error: ${res.status} ${await res.text()}`);
+      const prediction = await res.json();
+
+      // Poll for result
+      let result = prediction;
+      while (result.status !== 'succeeded' && result.status !== 'failed') {
+        await new Promise(r => setTimeout(r, 2000));
+        const poll = await fetch(result.urls.get, {
+          headers: { 'Authorization': `Bearer ${apiKey}` },
+        });
+        result = await poll.json();
+      }
+      if (result.status === 'failed') throw new Error('Replicate generation failed');
+      return result.output[0];
+    }
+
+    _aiBase64ToBlob(base64, mime) {
+      const byteChars = atob(base64);
+      const byteArray = new Uint8Array(byteChars.length);
+      for (let i = 0; i < byteChars.length; i++) byteArray[i] = byteChars.charCodeAt(i);
+      return new Blob([byteArray], { type: mime });
+    }
+
+    _aiAddToGallery(imageURL, prompt, model, format) {
+      const gallery = this.aiPanel.querySelector('.stpv-ai-gallery');
+      // Remove empty state
+      const empty = gallery.querySelector('.stpv-ai-empty');
+      if (empty) empty.remove();
+
+      const render = { url: imageURL, prompt, model, format, timestamp: Date.now() };
+      this.aiRenders.unshift(render);
+
+      const item = document.createElement('div');
+      item.className = 'stpv-ai-gallery-item';
+      item.innerHTML = `
+        <img src="${imageURL}" alt="AI Render" />
+        <div class="stpv-ai-gallery-actions">
+          <button class="stpv-ai-dl-btn" data-fmt="png">PNG</button>
+          <button class="stpv-ai-dl-btn" data-fmt="jpg">JPG</button>
+          <button class="stpv-ai-dl-btn" data-fmt="webp">WebP</button>
+        </div>
+      `;
+
+      // Download handlers
+      item.querySelectorAll('.stpv-ai-dl-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          this._aiDownloadRender(imageURL, btn.dataset.fmt);
+        });
+      });
+
+      gallery.prepend(item);
+    }
+
+    async _aiDownloadRender(imageURL, format) {
+      const canvas = document.createElement('canvas');
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+
+      await new Promise((resolve, reject) => {
+        img.onload = resolve;
+        img.onerror = reject;
+        img.src = imageURL;
+      });
+
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(img, 0, 0);
+
+      const mimeMap = { png: 'image/png', jpg: 'image/jpeg', webp: 'image/webp' };
+      const mime = mimeMap[format] || 'image/png';
+      const quality = format === 'png' ? undefined : 0.92;
+
+      const dataURL = canvas.toDataURL(mime, quality);
+      const link = document.createElement('a');
+      link.download = `explodeview-render-${Date.now()}.${format}`;
+      link.href = dataURL;
+      link.click();
+    }
+
+    _aiShowKeyError(msg) {
+      const status = this.aiPanel.querySelector('.stpv-ai-key-status');
+      status.className = 'stpv-ai-key-status err';
+      status.textContent = msg;
+      setTimeout(() => {
+        status.className = 'stpv-ai-key-status';
+        const provider = this.aiPanel.querySelector('.stpv-ai-model-select').value.split('-')[0];
+        const saved = this._aiStorageGet('ai-key-' + provider);
+        status.textContent = saved ? 'Key saved for this provider.' : 'Key is stored in browser only, never sent to our servers.';
+      }, 4000);
+    }
+
+    _aiStorageGet(key) {
+      try { return localStorage.getItem('stpv-' + key); } catch { return null; }
+    }
+
+    _aiStorageSet(key, val) {
+      try { localStorage.setItem('stpv-' + key, val); } catch { /* noop */ }
+    }
+
+    _animate() {
+      const T = this.THREE;
+      const clock = new T.Clock();
+      const lerp = (a, b, t) => a + (b - a) * Math.min(1, t);
+
+      const tick = () => {
+        requestAnimationFrame(tick);
+        const delta = Math.min(clock.getDelta(), 0.05);
+
+        // Smooth transitions
+        this.explodeAmount = lerp(this.explodeAmount, this.targetExplode, delta * 3);
+        this.dimAmount = lerp(this.dimAmount, this.targetDim, delta * 4);
+
+        const scale = this.manualMode ? Math.max(this.explodeLevel, 1) : 1;
+        const hlColor = this.activeAssembly >= 0 ? this.asmData[this.activeAssembly].colorObj : null;
+
+        for (const mesh of this.parts) {
+          const ud = mesh.userData;
+          const isHl = (ud.asmIdx === this.activeAssembly);
+
+          // Per-part explode: highlighted collapses, others stay
+          let partExplode;
+          if (this.activeAssembly >= 0 && this.dimAmount > 0.1) {
+            partExplode = isHl ? this.explodeAmount * (1 - this.dimAmount) : this.explodeAmount;
+          } else {
+            partExplode = this.explodeAmount;
+          }
+          ud._currentExplode = lerp(ud._currentExplode, partExplode, delta * 4);
+
+          const ed = ud.explodeDist * ud._currentExplode * scale;
+          mesh.position.set(ud.explodeDir.x * ed, ud.explodeDir.y * ed, ud.explodeDir.z * ed);
+
+          // Color
+          const mat = mesh.material;
+          if (this.dimAmount > 0.05 && this.activeAssembly >= 0) {
+            if (isHl) {
+              mat.color.lerp(hlColor, delta * 6);
+              mat.emissive.copy(hlColor).multiplyScalar(0.1 * this.dimAmount);
+              mat.metalness = lerp(mat.metalness, Math.min(ud.baseMetal + 0.15, 0.8), delta * 4);
+              mat.roughness = lerp(mat.roughness, Math.max(ud.baseRough - 0.1, 0.1), delta * 4);
+              mat.transparent = false; mat.opacity = 1;
+            } else {
+              mat.color.lerp(new T.Color(0x181820), delta * 5);
+              mat.emissive.setHex(0x000000);
+              mat.transparent = true;
+              mat.opacity = lerp(mat.opacity, 1 - this.dimAmount * 0.7, delta * 4);
+            }
+          } else {
+            mat.color.lerp(ud.baseColor, delta * 3);
+            mat.emissive.lerp(new T.Color(0), delta * 5);
+            mat.metalness = lerp(mat.metalness, ud.baseMetal, delta * 3);
+            mat.roughness = lerp(mat.roughness, ud.baseRough, delta * 3);
+            mat.transparent = false; mat.opacity = 1;
+          }
+        }
+
+        // Spotlight
+        if (this.activeAssembly >= 0 && this.dimAmount > 0.3) {
+          const ac = this.asmData[this.activeAssembly].center;
+          this.spot.intensity = lerp(this.spot.intensity, 4 * this.dimAmount, delta * 3);
+          this.spot.position.lerp(new T.Vector3(ac.x * 0.5, 3000, ac.z * 0.5), delta * 2);
+          this.spot.target.position.lerp(new T.Vector3(ac.x * 0.5, ac.y * 0.5, ac.z * 0.5), delta * 2);
+        } else {
+          this.spot.intensity = lerp(this.spot.intensity, 0, delta * 3);
+        }
+
+        this.controls.update();
+        this.renderer.render(this.scene, this.camera);
+      };
+
+      tick();
+    }
+  }
+
+  // ─── Public API ───
+  window.STPViewer = {
+    init: async function (opts) {
+      const container = typeof opts.container === 'string' ? document.querySelector(opts.container) : opts.container;
+      if (!container) { console.error('STPViewer: container not found'); return; }
+
+      const viewer = new STPViewerInstance(container, {
+        src: opts.src,
+        brand: opts.brand || '',
+        productName: opts.productName || '',
+        assemblies: opts.assemblies || [],
+        captions: opts.captions || {},
+      });
+      await viewer.start();
+      return viewer;
+    },
+
+    // Auto-init from data attributes
+    autoInit: function () {
+      document.querySelectorAll('[data-stp-viewer]').forEach(async el => {
+        const src = el.dataset.stpViewer || el.dataset.src;
+        if (!src) return;
+        const viewer = new STPViewerInstance(el, {
+          src,
+          brand: el.dataset.brand || '',
+          productName: el.dataset.productName || '',
+          assemblies: [],
+          captions: {
+            brand: el.dataset.brand || '',
+            productName: el.dataset.productName || '',
+            loaderTitle: el.dataset.loaderTitle || '',
+            loaderText: el.dataset.loaderText || undefined,
+          },
+        });
+        await viewer.start();
+      });
+    }
+  };
+
+  // Auto-init on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => STPViewer.autoInit());
+  } else {
+    STPViewer.autoInit();
+  }
+})();