holder + scad: SCAD source editor on /holder + new /scad universal renderer

Phase 2 — SCAD editor on /holder
================================
Some adjustments need more control than the parameter form gives
(e.g. tweaking the .scad logic itself). A collapsible CodeMirror-based
editor now slides up from the bottom of the viewport when you click
the "</> Source" button at the bottom-right.

- holder.html / holder.css: editor panel, toggle button, Reset and
  Close buttons. CodeMirror 5 loaded from cdnjs (single CSS + JS
  pair, clike mode for syntax highlighting since OpenSCAD is C-like).
- holder-app.js: lazy-initialises the editor on first show, fetches
  bundled source from /api/holder/source, tracks whether the editor
  content has been modified ("modified" tag in the panel title).
  When the editor is visible AND content differs from bundled,
  _doRender() switches from /api/holder/render -> /api/scad/render
  with {source, params}. Cell-count cap doesn't apply in that mode
  (the source may not even use the holder schema).

Phase 3 — Universal OpenSCAD playground at /scad
================================================
A standalone page for rendering arbitrary OpenSCAD. Paste code, click
Render (or Ctrl+Enter), see STL in the same Three.js viewer the
holder uses. Useful for prototyping new generators before wiring
them into a parameter form.

- New page: static/scad.html + scad.css + js/scad-app.js. Reuses
  holder-viewer.js (the Three.js scene module is generic enough).
- "Load example" populates a 6-hole rounded bracket so new users
  can verify the renderer works in two clicks.
- Same progress UI (elapsed timer + indeterminate bar + Cancel
  via AbortController) as /holder.
- Top nav now has Holder / Busbars / SCAD on every page.

Backend (shared by phase 2 & 3)
================================
- holder.py: split _run_openscad() out of render_stl(). New
  render_source(source, params=None) writes the source to a temp
  file and renders it; enforces MAX_SOURCE_BYTES (default 512 KB)
  and RENDER_TIMEOUT but skips the cell-count cap. New bundled_source()
  returns the hex_cell.scad text for editor pre-population.
- app.py: GET /api/holder/source returns the bundled .scad text.
  POST /api/scad/render takes {source, params?} and returns STL +
  X-Holder-Dimensions header. ValueError -> 400, RuntimeError -> 500.
  _stl_response() factored out so both render endpoints emit the same
  headers consistently.

static/js/holder-app.js

@@ -23,6 +23,9 @@ const state = {
   dimensions: null,  // last ECHO dims dict from X-Holder-Dimensions
   maxBox: null,      // {w, d, h} of assembled-battery bounding box
   enclosure: null,   // {w, d, h} of user-defined case (or null)
+  scadEditor: null,    // CodeMirror instance (lazy-initialised on first show)
+  bundledSource: null, // text fetched from /api/holder/source
+  scadVisible: false,
 };
 
 const COLOR_MAX_BOX  = 0x4a9eff;  // blue
@@ -209,10 +212,16 @@ async function _doRender() {
   }, 100);
 
   try {
-    const res = await fetch("/api/holder/render", {
+    const useCustomSource = state.scadVisible && state.scadEditor &&
+                            state.scadEditor.getValue() !== state.bundledSource;
+    const url  = useCustomSource ? "/api/scad/render"   : "/api/holder/render";
+    const body = useCustomSource
+      ? { source: state.scadEditor.getValue(), params: state.params }
+      : { params: state.params };
+    const res = await fetch(url, {
       method: "POST",
       headers: { "content-type": "application/json" },
-      body: JSON.stringify({ params: state.params }),
+      body: JSON.stringify(body),
       signal: state.abortCtrl.signal,
     });
     if (!res.ok) {
@@ -348,6 +357,59 @@ function _updateFitCheck() {
   }
 }
 
+// ----- SCAD editor ----------------------------------------------------------
+
+async function _ensureBundledSource() {
+  if (state.bundledSource !== null) return;
+  const r = await fetch("/api/holder/source");
+  if (!r.ok) throw new Error(`source fetch failed: ${r.statusText}`);
+  state.bundledSource = await r.text();
+}
+
+function _updateScadDirtyTag() {
+  if (!state.scadEditor) return;
+  const dirty = state.scadEditor.getValue() !== state.bundledSource;
+  $("scad-dirty-tag").hidden = !dirty;
+}
+
+async function _showScadEditor() {
+  await _ensureBundledSource();
+  $("scad-panel").hidden = false;
+  state.scadVisible = true;
+  if (!state.scadEditor) {
+    state.scadEditor = window.CodeMirror($("scad-editor"), {
+      value: state.bundledSource,
+      mode: "text/x-csrc",      // closest built-in mode for OpenSCAD
+      theme: "dracula",
+      lineNumbers: true,
+      indentUnit: 4,
+      tabSize: 4,
+      lineWrapping: false,
+      viewportMargin: Infinity, // render whole document so CM fills the panel
+    });
+    state.scadEditor.on("change", _updateScadDirtyTag);
+  } else {
+    state.scadEditor.refresh();
+  }
+  _updateScadDirtyTag();
+}
+
+function _hideScadEditor() {
+  $("scad-panel").hidden = true;
+  state.scadVisible = false;
+}
+
+$("btn-scad-toggle").addEventListener("click", () => {
+  if (state.scadVisible) _hideScadEditor();
+  else _showScadEditor().catch((e) => alert("Couldn't load SCAD: " + e.message));
+});
+$("btn-scad-close").addEventListener("click", _hideScadEditor);
+$("btn-scad-reset").addEventListener("click", () => {
+  if (!state.scadEditor || state.bundledSource == null) return;
+  state.scadEditor.setValue(state.bundledSource);
+  _updateScadDirtyTag();
+});
+
 // ----- buttons --------------------------------------------------------------
 
 $("show-max-box").addEventListener("change", _updateFitCheck);

static/js/scad-app.js

@@ -0,0 +1,139 @@
+/* scad-app.js — controller for the /scad universal OpenSCAD playground.
+ *
+ * Reuses the same Three.js viewer module (holder-viewer.js) and the same
+ * /api/scad/render backend endpoint that the holder editor uses.
+ */
+
+const $ = (id) => document.getElementById(id);
+
+const state = {
+  editor: null,
+  rendering: false,
+  abortCtrl: null,
+  elapsedTimer: null,
+  lastBlob: null,
+  rendererReady: false,
+};
+
+const EXAMPLE_SOURCE = `// Tiny example to sanity-check the renderer.
+// Click Render. Then start editing.
+
+\$fn = 80;
+
+difference() {
+  // Outer rounded box
+  hull() {
+    for (x = [-20, 20], y = [-12, 12])
+      translate([x, y, 0]) cylinder(h = 8, r = 4);
+  }
+  // Six holes
+  for (i = [-2 : 2])
+    translate([i * 8, 0, -1]) cylinder(h = 10, d = 3);
+}
+`;
+
+function _whenViewerReady(cb) {
+  if (window.HolderViewer) { cb(); return; }
+  let tries = 0;
+  const t = setInterval(() => {
+    if (window.HolderViewer) { clearInterval(t); cb(); }
+    else if (++tries > 50)   { clearInterval(t); console.error("HolderViewer never loaded"); }
+  }, 60);
+}
+
+function _initEditor(initialValue) {
+  state.editor = window.CodeMirror($("scad-editor"), {
+    value: initialValue,
+    mode: "text/x-csrc",
+    theme: "dracula",
+    lineNumbers: true,
+    indentUnit: 4,
+    tabSize: 4,
+    lineWrapping: false,
+    viewportMargin: Infinity,
+  });
+}
+
+function _showProgress(show) {
+  $("render-progress").hidden = !show;
+  $("btn-render").hidden = show;
+  $("btn-cancel").hidden = !show;
+}
+
+async function _doRender() {
+  if (state.rendering || !state.editor) return;
+  const source = state.editor.getValue().trim();
+  if (!source) {
+    $("render-status").textContent = "✗ source is empty";
+    return;
+  }
+  state.rendering = true;
+  state.abortCtrl = new AbortController();
+  $("render-status").textContent = "rendering…";
+  $("warning").textContent = "";
+  _showProgress(true);
+
+  const t0 = performance.now();
+  state.elapsedTimer = setInterval(() => {
+    $("render-elapsed").textContent = ((performance.now() - t0) / 1000).toFixed(1) + "s";
+  }, 100);
+
+  try {
+    const res = await fetch("/api/scad/render", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ source }),
+      signal: state.abortCtrl.signal,
+    });
+    if (!res.ok) {
+      let msg = res.statusText;
+      try { msg = (await res.json()).error || msg; } catch {}
+      throw new Error(msg);
+    }
+    state.lastBlob = await res.blob();
+    const buf = await state.lastBlob.arrayBuffer();
+    window.HolderViewer.loadSTL(buf);
+    const dt = ((performance.now() - t0) / 1000).toFixed(1);
+    $("render-status").textContent =
+      `✓ rendered in ${dt}s · ${(state.lastBlob.size/1024).toFixed(0)} kB`;
+  } catch (e) {
+    if (e.name === "AbortError") $("render-status").textContent = "✗ cancelled";
+    else                          $("render-status").textContent = `✗ ${e.message}`;
+  } finally {
+    state.rendering = false;
+    state.abortCtrl = null;
+    clearInterval(state.elapsedTimer);
+    _showProgress(false);
+  }
+}
+
+$("btn-render").addEventListener("click", _doRender);
+$("btn-cancel").addEventListener("click", () => state.abortCtrl?.abort());
+$("btn-load-example").addEventListener("click", () => {
+  if (state.editor) state.editor.setValue(EXAMPLE_SOURCE);
+});
+
+$("btn-download-stl").addEventListener("click", () => {
+  if (!state.lastBlob) { alert("Nothing rendered yet."); return; }
+  const url = URL.createObjectURL(state.lastBlob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "rendered.stl";
+  document.body.appendChild(a); a.click();
+  setTimeout(() => { URL.revokeObjectURL(url); a.remove(); }, 100);
+});
+
+// Ctrl+Enter from inside the editor triggers Render.
+document.addEventListener("keydown", (e) => {
+  if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+    e.preventDefault();
+    _doRender();
+  }
+});
+
+// Bootstrap: viewer + editor with an empty buffer (or example).
+_whenViewerReady(() => {
+  window.HolderViewer.init($("viewer3d"));
+  state.rendererReady = true;
+  _initEditor(EXAMPLE_SOURCE);
+});