Dimensioned drawings for Stage/Practice/Display; fix "Show info" toggle timing

- Add front + top/side dimensioned schematic views (inch + mm) inside the
  "Show info" section of Stage (front + top-edge I/O), Practice (front bar +
  both end faces), and Display (pyramid front + side profile). Shared .dview /
  .dschem CSS in base.css.
- Fix: progbox.js now defers to DOM-ready, so the "Show info" toggle + #techinfo
  are wired even when they sit after the page script (Stage/Practice/Player were
  silently not toggling / ignoring ?info=1).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

micro.html

@@ -334,6 +334,39 @@ window.loadProgramString = function(plain){ var s=patchToSetup(plain); tracks=[{
     internal battery to wear out); ships with the editor's grooves built in.</p>
 </section>
 
+<div class="dview">
+  <p class="cap">Dimensions &amp; layout — ≈ 6.3 × 1.4 × 1.0 in (160 × 36 × 26 mm), an extruded bar</p>
+  <div class="drow">
+    <div class="dvy">↕ 1.4 in<br>(36 mm)</div>
+    <div class="dschem" style="height:70px">
+      <span class="scap">Front (top face)</span>
+      <div class="scr" style="left:9%; top:24px; width:42%; height:30px"></div>
+      <div class="ctl" style="left:60%; top:21px; width:36px; height:36px; border-radius:8px"></div>
+      <div class="jl" style="left:9%; bottom:5px">14‑seg display</div>
+      <div class="jl" style="left:58%; bottom:5px">thumb‑roller</div>
+    </div>
+  </div>
+  <div class="dvx">↔ 6.3 in (160 mm) long</div>
+  <div class="drow" style="margin-top:12px; gap:14px">
+    <div style="flex:1">
+      <div class="dschem" style="height:64px">
+        <span class="scap">Left end</span>
+        <div class="jk" style="left:calc(50% - 6px); top:26px"></div>
+        <div class="jl" style="left:0; right:0; bottom:5px">TRS In (instrument)</div>
+      </div>
+    </div>
+    <div style="flex:1">
+      <div class="dschem" style="height:64px">
+        <span class="scap">Right end</span>
+        <div class="jk u" style="left:30%; top:29px"></div>
+        <div class="jk" style="left:58%; top:26px"></div>
+        <div class="jl" style="left:0; right:0; bottom:5px">USB‑C · TRS Out</div>
+      </div>
+    </div>
+  </div>
+  <div class="dvx" style="margin-left:0">↕ ends ≈ 1.0 in (26 mm) deep</div>
+</div>
+
 <details class="spec pageonly">
   <summary>Spec &amp; bill of materials</summary>
   <div class="spec-body">

showcase.html

@@ -92,6 +92,33 @@
       the real unit starts when you lift it from its holder / set it swinging. No instrument I/O; it's a showpiece.</p>
   </section>
 
+  <div class="dview">
+    <p class="cap">Dimensions &amp; profile — ≈ 4.7 × 7.1 × 3.1 in (120 × 180 × 80 mm), a truncated‑pyramid plinth</p>
+    <div class="drow">
+      <div class="dvy">↕ 7.1 in (180 mm)</div>
+      <div class="dschem" style="height:184px">
+        <span class="scap">Front</span>
+        <div style="position:absolute; inset:6px; clip-path:polygon(34% 2%, 66% 2%, 93% 98%, 7% 98%);
+          background:linear-gradient(180deg,#2c2e34,#15171b); border:1px solid #33363c;"></div>
+        <div style="position:absolute; left:calc(50% - 4px); top:24px; width:8px; height:120px; border-radius:4px;
+          background:linear-gradient(180deg,#33d0ff,#178fb0); box-shadow:0 0 10px #33d0ff;"></div>
+        <div class="jl" style="left:0; right:0; bottom:5px">RGB‑light pendulum bar + tempo scale</div>
+      </div>
+    </div>
+    <div class="dvx">↔ 4.7 in (120 mm) base</div>
+    <div class="drow" style="margin-top:12px">
+      <div class="dvy">↕ 7.1 in (180 mm)</div>
+      <div class="dschem" style="height:184px; max-width:200px">
+        <span class="scap">Side</span>
+        <div style="position:absolute; inset:6px; clip-path:polygon(40% 2%, 60% 2%, 86% 98%, 14% 98%);
+          background:linear-gradient(180deg,#26282d,#141519); border:1px solid #33363c;"></div>
+        <div class="jk u" style="left:calc(50% - 7px); bottom:14px; top:auto"></div>
+        <div class="jl" style="left:0; right:0; bottom:1px">USB‑C in base</div>
+      </div>
+    </div>
+    <div class="dvx">↔ 3.1 in (80 mm) deep</div>
+  </div>
+
   <details class="spec pageonly">
     <summary>Spec &amp; bill of materials</summary>
     <div class="spec-body">

src/base.css

@@ -94,6 +94,24 @@ details.spec .spec-body { padding:2px 16px 16px; }
 .progbox-msg.ok { color:#5fd08a; } .progbox-msg.bad { color:#ff8a7a; }
 [data-embed] .progbox { display:none !important; }
 
+/* ---- shared dimensioned schematic views (front + top/side with inch dims) ---- */
+.dview { width:100%; max-width:540px; margin:16px auto 0; }
+.dview .cap { text-align:center; font-size:11px; color:var(--muted,#7f8b9a); margin:0 0 8px; }
+.drow { display:flex; align-items:stretch; gap:6px; }
+.dvy { flex:0 0 15px; writing-mode:vertical-rl; transform:rotate(180deg); display:flex; align-items:center; justify-content:center;
+  font-size:9px; color:var(--muted,#7f8b9a); letter-spacing:.03em; white-space:nowrap; border-right:1px solid var(--panel-bd,#2a313c); }
+.dvx { text-align:center; font-size:9px; color:var(--muted,#7f8b9a); letter-spacing:.03em;
+  border-top:1px solid var(--panel-bd,#2a313c); padding-top:3px; margin:3px 0 0 17px; }
+.dschem { flex:1; min-width:0; position:relative; border:1px solid #33363c; border-radius:8px;
+  background:radial-gradient(rgba(255,255,255,.02) .5px, transparent .6px) 0 0/3px 3px, linear-gradient(160deg,#26282d,#15161a);
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.4); overflow:hidden; }
+.dschem .scap { position:absolute; left:7px; top:5px; font-size:8px; color:var(--silk,#aab2bc); letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
+.dschem .ctl { position:absolute; border-radius:50%; background:radial-gradient(circle at 38% 32%,#cfd6dd,#6c7480 60%,#3b424c); box-shadow:0 1px 3px rgba(0,0,0,.5); }
+.dschem .scr { position:absolute; border-radius:4px; background:#06080c; box-shadow:inset 0 0 8px rgba(0,0,0,.7); }
+.dschem .jk { position:absolute; width:12px; height:12px; border-radius:50%; border:2px solid #5b6470; background:radial-gradient(circle at 40% 34%,#333a44,#07090c 72%); }
+.dschem .jk.u { width:14px; height:6px; border-radius:3px; }
+.dschem .jl { position:absolute; font-size:7px; color:var(--silk,#aab2bc); letter-spacing:.03em; text-transform:uppercase; opacity:.85; text-align:center; line-height:1.1; }
+
 /* ---- "Show info" toggle + technical section ---- */
 .info-toggle { display:flex; align-items:center; justify-content:center; gap:8px; margin:18px auto 0; max-width:620px;
   font-size:13px; color:var(--muted,#7f8b9a); cursor:pointer; }

src/progbox.js

@@ -2,11 +2,11 @@
    Uses the engine codec (patchToSetup / setupToPatch / codeToSetlist) for decode + lint.
    Host page provides: window.currentProgramString() and window.loadProgramString(plain).
    Exposes window.progRefresh() — call it after the device's program changes. When the
-   page is embedded it posts {type:'varasys-prog'} to the parent instead of touching the box. */
+   page is embedded it posts {type:'varasys-prog'} to the parent instead of touching the box.
+   Defers to DOM-ready so the box/toggle/techinfo are found wherever they sit on the page. */
 (function () {
-  var box = document.getElementById("dProg");
-  var msg = document.getElementById("dProgMsg");
   var embedded = document.documentElement.dataset.embed === "1";
+  var box, msg, editing = false;
   function setMsg(t, ok) { if (!msg) return; msg.textContent = t || ""; msg.classList.toggle("ok", !!ok && !!t); msg.classList.toggle("bad", !ok && !!t); }
   function lint(text) {
     text = (text || "").trim(); if (!text) return { ok: false, msg: "empty" };
@@ -22,7 +22,12 @@
       return { ok: true, plain: setupToPatch(s), msg: s.lanes.length + " lane" + (s.lanes.length > 1 ? "s" : "") + " · " + s.bpm + " BPM" };
     } catch (e) { return { ok: false, msg: "✗ " + e.message }; }
   }
-  var editing = false;
+  function doLoad() {
+    var r = lint(box.value);
+    if (!r.ok) { box.classList.add("err"); setMsg(r.msg, false); return; }
+    box.classList.remove("err"); box.value = r.plain; setMsg("✓ " + r.msg, true);
+    try { if (window.loadProgramString) window.loadProgramString(r.plain); } catch (e) { setMsg("✗ " + e.message, false); }
+  }
   // report the current program: to the parent when embedded, else into the box.
   // No-op on pages without a program hook (e.g. panel-based Teacher/Player).
   window.progRefresh = function () {
@@ -31,30 +36,28 @@
     if (embedded) { try { parent.postMessage({ type: "varasys-prog", patch: p }, "*"); } catch (e) {} return; }
     if (box && !editing) { box.value = p; setMsg("", true); }
   };
-  if (box) {
+  function init() {
-    box.addEventListener("focus", function () { editing = true; });
+    box = document.getElementById("dProg"); msg = document.getElementById("dProgMsg");
-    box.addEventListener("blur", function () { editing = false; });
+    if (box) {
-    box.addEventListener("input", function () { box.classList.remove("err"); });
+      box.addEventListener("focus", function () { editing = true; });
-    box.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); doLoad(); } });
+      box.addEventListener("blur", function () { editing = false; });
-    var loadBtn = document.getElementById("dProgLoad"); if (loadBtn) loadBtn.addEventListener("click", doLoad);
+      box.addEventListener("input", function () { box.classList.remove("err"); });
-    var copyBtn = document.getElementById("dProgCopy"); if (copyBtn) copyBtn.addEventListener("click", function () {
+      box.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); doLoad(); } });
-      try { navigator.clipboard.writeText(box.value); copyBtn.textContent = "Copied!"; setTimeout(function () { copyBtn.textContent = "Copy"; }, 1200); } catch (e) { box.select(); }
+      var loadBtn = document.getElementById("dProgLoad"); if (loadBtn) loadBtn.addEventListener("click", doLoad);
-    });
+      var copyBtn = document.getElementById("dProgCopy"); if (copyBtn) copyBtn.addEventListener("click", function () {
+        try { navigator.clipboard.writeText(box.value); copyBtn.textContent = "Copied!"; setTimeout(function () { copyBtn.textContent = "Copy"; }, 1200); } catch (e) { box.select(); }
+      });
+    }
+    // "Show info" toggle — reveals the technical section (#techinfo + any .tech); ?info=1 opens it checked
+    var tog = document.getElementById("infoToggle"), tech = document.getElementById("techinfo");
+    if (tog) {
+      var extra = document.querySelectorAll(".tech");
+      var apply = function (on) { if (tech) tech.hidden = !on; for (var i = 0; i < extra.length; i++) extra[i].hidden = !on; };
+      var open = /[?&]info=1/.test(location.search);
+      tog.checked = open; apply(open);
+      tog.addEventListener("change", function () { apply(tog.checked); });
+    }
+    window.progRefresh();
   }
-  function doLoad() {
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init); else init();
-    var r = lint(box.value);
-    if (!r.ok) { box.classList.add("err"); setMsg(r.msg, false); return; }
-    box.classList.remove("err"); box.value = r.plain; setMsg("✓ " + r.msg, true);
-    try { if (window.loadProgramString) window.loadProgramString(r.plain); } catch (e) { setMsg("✗ " + e.message, false); }
-  }
-  // "Show info" toggle — reveals the technical section; ?info=1 opens it checked
-  var tog = document.getElementById("infoToggle"), tech = document.getElementById("techinfo");
-  if (tog) {
-    var extra = document.querySelectorAll(".tech");   // e.g. dimensioned views outside #techinfo
-    var apply = function (on) { if (tech) tech.hidden = !on; for (var i = 0; i < extra.length; i++) extra[i].hidden = !on; };
-    var open = /[?&]info=1/.test(location.search);
-    tog.checked = open; apply(open);
-    tog.addEventListener("change", function () { apply(tog.checked); });
-  }
-  window.progRefresh();
 })();

stage.html

@@ -322,6 +322,33 @@ window.loadProgramString = function(plain){ var s=patchToSetup(plain); tracks=[{
     daisy‑chain off one charger or power bank.</p>
 </section>
 
+<div class="dview">
+  <p class="cap">Dimensions &amp; layout — ≈ 4.7 × 3.7 × 1.5 in (120 × 93 × 38 mm), a 1590BB‑style stompbox</p>
+  <div class="drow">
+    <div class="dvy">↕ 3.7 in (93 mm)</div>
+    <div class="dschem" style="height:150px">
+      <span class="scap">Front</span>
+      <div class="scr" style="left:18%; right:18%; top:22px; height:34px"></div>
+      <div class="ctl" style="left:calc(50% - 15px); top:64px; width:30px; height:30px"></div>
+      <div class="ctl" style="left:20%; top:100px; width:34px; height:34px"></div>
+      <div class="ctl" style="left:calc(80% - 34px); top:100px; width:34px; height:34px"></div>
+      <div class="jl" style="left:0; right:0; bottom:5px">angled TFT · RGB beat light · Tap + Next footswitches</div>
+    </div>
+  </div>
+  <div class="dvx">↔ 4.7 in (120 mm) wide</div>
+  <div class="drow" style="margin-top:12px">
+    <div class="dvy">↕ 1.5 in (38 mm)</div>
+    <div class="dschem" style="height:56px">
+      <span class="scap">Top edge — I/O</span>
+      <div class="jk" style="left:7%; top:18px"></div><div class="jk" style="left:22%; top:18px"></div>
+      <div class="jk" style="left:37%; top:18px"></div><div class="jk" style="left:52%; top:18px"></div>
+      <div class="jk u" style="left:68%; top:21px"></div><div class="jk u" style="left:83%; top:21px"></div>
+      <div class="jl" style="left:0; right:0; bottom:4px">Trig · Inst In · Out TRS · Exp · USB‑C · USB‑C thru</div>
+    </div>
+  </div>
+  <div class="dvx">↔ 4.7 in (120 mm)</div>
+</div>
+
 <details class="spec pageonly">
   <summary>Spec &amp; bill of materials</summary>
   <div class="spec-body">