hyperbook 0.93.1 → 0.95.0

package/dist/assets/directive-openscad/client.js

@@ -8,234 +8,121 @@
 hyperbook.openscad = (function () {
   const _scriptBase = window.HYPERBOOK_ASSETS + "directive-openscad/";
 
-  window.codeInput?.registerTemplate(
-    "openscad-highlighted",
-    codeInput.templates.prism(window.Prism, [
-      new codeInput.plugins.AutoCloseBrackets(),
-      new codeInput.plugins.Indent(true, 2),
-    ]),
-  );
-
-  // Cache the ESM module import (loaded once). Each render creates a fresh
-  // WASM instance to avoid C++ singleton state issues
-  // (e.g. the Manifold backend throwing a C++ exception on second callMain).
-  let openscadModulePromise = null;
   let threePromise = null;
+  let workerRequestId = 0;
 
-  // Font bytes are fetched once and re-written to each fresh WASM instance.
-  let robotoFontData = null;
-
-  // Per-render stderr capture — cleared before each render.
-  let openscadStderr = [];
+  // Two separate worker instances: one for rendering, one for parameter extraction.
+  // This allows both to run concurrently in truly separate threads.
+  const workerSlots = {
+    render: { promise: null, pending: new Map() },
+    param: { promise: null, pending: new Map() },
+  };
 
   const i18nGet = (key, fallback = key) => hyperbook.i18n?.get(key) || fallback;
 
-  const FONTS_CONF = `<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE fontconfig SYSTEM "urn:fontconfig:fonts.dtd">
-<fontconfig>
-  <dir>/fonts</dir>
-</fontconfig>`;
-
-  // Create a fresh OpenSCAD WASM instance for each render.
-  // The ESM module (and its compiled WASM binary) is imported only once;
-  // the browser's WebAssembly module cache makes subsequent instantiations fast.
-  const getOpenScad = async () => {
-    if (!openscadModulePromise) {
-      openscadModulePromise = import(/* @vite-ignore */ _scriptBase + "openscad.js");
-    }
-    const OpenSCAD = (await openscadModulePromise).default;
-    const instance = await OpenSCAD({
-      noInitialRun: true,
-      locateFile: (file) => _scriptBase + file,
-      printErr: (text) => openscadStderr.push(text),
-    });
-    const fs = instance.FS;
-    try { fs.mkdir("/tmp"); } catch (_) {}
-    try { fs.mkdir("/fonts"); } catch (_) {}
-    // Fonts are resolved from $(cwd)/fonts — keep cwd at /
-    try { instance.FS.chdir("/"); } catch (_) {}
-    try { fs.writeFile("/fonts/fonts.conf", FONTS_CONF); } catch (_) {}
-    // Write cached font data if already fetched
-    if (robotoFontData) {
-      try { fs.writeFile("/fonts/Roboto-Regular.ttf", robotoFontData); } catch (_) {}
+  const getWorker = async (slot) => {
+    if (!window.Worker) {
+      throw new Error(i18nGet("openscad-render-failed", "OpenSCAD render failed"));
     }
-    return instance;
-  };
+    const s = workerSlots[slot];
+    if (!s.promise) {
+      s.promise = new Promise((resolve, reject) => {
+        try {
+          const worker = new Worker(new URL(_scriptBase + "worker.js", window.location.href), {
+            type: "module",
+          });
 
-  // Known library URLs hosted at the openscad-playground deployment.
-  const KNOWN_LIBRARIES = {
-    BOSL2: "https://ochafik.com/openscad2/libraries/BOSL2.zip",
-    BOSL: "https://ochafik.com/openscad2/libraries/BOSL.zip",
-    MCAD: "https://ochafik.com/openscad2/libraries/MCAD.zip",
-    NopSCADlib: "https://ochafik.com/openscad2/libraries/NopSCADlib.zip",
-    fonts: "https://ochafik.com/openscad2/libraries/fonts.zip",
-  };
+          worker.addEventListener("message", (event) => {
+            const { requestId, ok, result, error } = event.data || {};
+            if (!requestId || !s.pending.has(requestId)) return;
+            const pending = s.pending.get(requestId);
+            s.pending.delete(requestId);
+            if (ok) {
+              pending.resolve(result);
+              return;
+            }
+            const workerError = new Error(error?.message || "OpenSCAD worker request failed");
+            if (Array.isArray(error?.stderr)) {
+              workerError.stderr = error.stderr;
+            }
+            pending.reject(workerError);
+          });
 
-  // Per-name cache of extracted file maps: Map<name, { [path]: Uint8Array }>
-  const libraryCache = new Map();
-
-  // Minimal ZIP extractor using the browser-native DecompressionStream API.
-  // Supports Stored (method 0) and Deflate (method 8) entries.
-  const extractZip = async (buffer) => {
-    const view = new DataView(buffer);
-    const bytes = new Uint8Array(buffer);
-    const files = {};
-    const dec = new TextDecoder();
-
-    // Locate End of Central Directory record.
-    let eocdPos = -1;
-    for (let i = buffer.byteLength - 22; i >= Math.max(0, buffer.byteLength - 65558); i--) {
-      if (view.getUint32(i, true) === 0x06054b50) { eocdPos = i; break; }
-    }
-    if (eocdPos < 0) throw new Error("Not a valid ZIP file");
-
-    const entryCount = view.getUint16(eocdPos + 10, true);
-    let cdOffset = view.getUint32(eocdPos + 16, true);
-
-    for (let i = 0; i < entryCount; i++) {
-      if (view.getUint32(cdOffset, true) !== 0x02014b50) break;
-      const compression = view.getUint16(cdOffset + 10, true);
-      const compressedSize = view.getUint32(cdOffset + 20, true);
-      const fnLen = view.getUint16(cdOffset + 28, true);
-      const extraLen = view.getUint16(cdOffset + 30, true);
-      const commentLen = view.getUint16(cdOffset + 32, true);
-      const localOffset = view.getUint32(cdOffset + 42, true);
-      const name = dec.decode(bytes.subarray(cdOffset + 46, cdOffset + 46 + fnLen));
-      cdOffset += 46 + fnLen + extraLen + commentLen;
-
-      if (name.endsWith("/")) continue;
-
-      const localFnLen = view.getUint16(localOffset + 26, true);
-      const localExtraLen = view.getUint16(localOffset + 28, true);
-      const dataStart = localOffset + 30 + localFnLen + localExtraLen;
-      const compressed = bytes.subarray(dataStart, dataStart + compressedSize);
-
-      if (compression === 0) {
-        files[name] = new Uint8Array(compressed);
-      } else if (compression === 8) {
-        const ds = new DecompressionStream("deflate-raw");
-        const writer = ds.writable.getWriter();
-        const reader = ds.readable.getReader();
-        writer.write(compressed);
-        writer.close();
-        const chunks = [];
-        let totalLen = 0;
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          chunks.push(value);
-          totalLen += value.byteLength;
-        }
-        const out = new Uint8Array(totalLen);
-        let pos = 0;
-        for (const c of chunks) { out.set(c, pos); pos += c.byteLength; }
-        files[name] = out;
-      }
-    }
-    return files;
-  };
+          worker.addEventListener("error", (event) => {
+            const workerError = new Error(event?.message || "OpenSCAD worker crashed");
+            for (const { reject } of s.pending.values()) reject(workerError);
+            s.pending.clear();
+            s.promise = null;
+          });
 
-  // Fetch and extract a library zip, caching the result.
-  const loadLibrary = async (name) => {
-    if (libraryCache.has(name)) return libraryCache.get(name);
-    const url = KNOWN_LIBRARIES[name];
-    if (!url) throw new Error(`Unknown OpenSCAD library: ${name}`);
-    const resp = await fetch(url);
-    if (!resp.ok) throw new Error(`Failed to fetch library ${name}: ${resp.status}`);
-    const files = await extractZip(await resp.arrayBuffer());
-    libraryCache.set(name, files);
-    return files;
-  };
+          worker.addEventListener("messageerror", () => {
+            const workerError = new Error("OpenSCAD worker message error");
+            for (const { reject } of s.pending.values()) reject(workerError);
+            s.pending.clear();
+            s.promise = null;
+          });
 
-  // Mount a list of libraries into a WASM FS instance.
-  // Each library is written to /<name>/<file> so `use <BOSL2/std.scad>` resolves correctly.
-  const mountLibraries = async (instance, libraryNames) => {
-    for (const libName of libraryNames) {
-      const files = await loadLibrary(libName);
-      try { instance.FS.mkdir(`/${libName}`); } catch (_) {}
-      for (const [filePath, data] of Object.entries(files)) {
-        const parts = filePath.split("/");
-        let dir = `/${libName}`;
-        for (let j = 0; j < parts.length - 1; j++) {
-          dir += "/" + parts[j];
-          try { instance.FS.mkdir(dir); } catch (_) {}
+          resolve(worker);
+        } catch (error) {
+          s.promise = null;
+          reject(error);
         }
-        try { instance.FS.writeFile(`/${libName}/${filePath}`, data); } catch (_) {}
-      }
+      });
     }
+    return s.promise;
   };
 
-  // Fetch the Roboto TTF once and cache it in memory so it can be written
-  // to each new WASM instance's FS to enable OpenSCAD text() rendering.
-  const loadFonts = async () => {
-    if (robotoFontData) return;
-    try {
-      const resp = await fetch(
-        "https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Me5Q.ttf",
-      );
-      if (resp.ok) {
-        robotoFontData = new Uint8Array(await resp.arrayBuffer());
+  const callWorker = async (slot, type, payload, transfer = []) => {
+    const worker = await getWorker(slot);
+    const s = workerSlots[slot];
+    const requestId = ++workerRequestId;
+    return new Promise((resolve, reject) => {
+      s.pending.set(requestId, { resolve, reject });
+      try {
+        worker.postMessage({ requestId, type, payload }, transfer);
+      } catch (error) {
+        s.pending.delete(requestId);
+        reject(error);
       }
-    } catch (e) {
-      console.warn("[openscad] Failed to load fonts:", e);
-    }
+    });
   };
 
-  // Extract parameters from SCAD code. Tries OpenSCAD WASM with
-  // --export-format=param first (uses the built-in Customizer engine with full
-  // comment syntax support). Falls back to regex parsing if WASM returns nothing.
-  const extractParams = async (code, libraryNames = []) => {
-    try {
-      const openscad = await getOpenScad();
-      const instance = openscad;
-
-      if (libraryNames.length > 0) {
-        await mountLibraries(instance, libraryNames);
-      }
+  const getInvocationStderr = (invocationResult) =>
+    (invocationResult?.mergedOutputs || [])
+      .filter((entry) => typeof entry?.stderr === "string")
+      .map((entry) => entry.stderr);
 
-      const sourcePath = "/tmp/params_model.scad";
-      const outPath = "/tmp/params_out.json";
-
-      try { instance.FS.unlink(sourcePath); } catch (_) {}
-      try { instance.FS.unlink(outPath); } catch (_) {}
-
-      // Prepend $preview=true as the playground does, to avoid full geometry evaluation.
-      instance.FS.writeFile(sourcePath, "$preview=true;\n" + code);
-
-      const exitCode = instance.callMain([
-        sourcePath,
-        "-o", outPath,
-        "--export-format=param",
-      ]);
-
-      if (exitCode === 0) {
-        try {
-          const json = instance.FS.readFile(outPath, { encoding: "utf8" });
-          const paramSet = JSON.parse(json);
-          if (Array.isArray(paramSet.parameters) && paramSet.parameters.length > 0) {
-            // Filter out OpenSCAD special variables (e.g. $preview, $fn, $fa, $fs)
-            // that are internal and should not be exposed in the parameter UI.
-            return paramSet.parameters.filter(p => !p.name?.startsWith('$'));
-          }
-        } catch (e) {
-          console.warn("[openscad] Failed to parse param output:", e);
-        }
-      }
+  // Build parameter UI metadata/markup in the worker to minimize main-thread work.
+  const buildParamUiInWorker = async (code, libraryNames = [], currentOverrides = {}, id = "") => {
+    try {
+      const result = await callWorker("param", "buildParamForm", {
+        code,
+        libraryNames,
+        currentOverrides,
+        id,
+      });
+      return {
+        hasParams: Boolean(result?.hasParams),
+        html: typeof result?.html === "string" ? result.html : "",
+        values: result?.values && typeof result.values === "object" ? result.values : {},
+      };
     } catch (e) {
-      console.warn("[openscad] WASM param extraction failed:", e);
+      console.warn("[openscad] Worker param UI build failed:", e);
+      return {
+        hasParams: false,
+        html: "",
+        values: {},
+      };
     }
-    return [];
   };
 
   const getThree = async () => {
     if (!threePromise) {
       threePromise = Promise.all([
         import(/* @vite-ignore */ _scriptBase + "three.module.js"),
-        import(/* @vite-ignore */ _scriptBase + "STLLoader.js"),
         import(/* @vite-ignore */ _scriptBase + "OrbitControls.js"),
-      ]).then(([THREE, STLLoaderModule, OrbitControlsModule]) => ({
+      ]).then(([THREE, OrbitControlsModule]) => ({
         THREE,
-        STLLoader: STLLoaderModule.STLLoader,
         OrbitControls: OrbitControlsModule.OrbitControls,
       }));
     }
@@ -285,6 +172,7 @@ hyperbook.openscad = (function () {
         const delta = moveEvent.clientY - startPointer;
         const size = applySplitSize(startSize + delta);
         leftSide.dataset.splitCanvasParams = String(Math.round(size));
+        onSplitChanged?.({ splitCanvasParams: Math.round(size) });
       };
 
       const onPointerUp = () => {
@@ -358,6 +246,9 @@ hyperbook.openscad = (function () {
         const delta = pointer - startPointer;
         const size = applySplitSize(startSize + delta, isHorizontal);
         elem.dataset[key] = String(Math.round(size));
+        onSplitChanged?.({
+          [key]: Math.round(size),
+        });
       };
 
       const onPointerUp = () => {
@@ -419,6 +310,347 @@ hyperbook.openscad = (function () {
     return new Uint8Array(data || []);
   };
 
+  const textEncoder = new TextEncoder();
+  const DEFAULT_FACE_COLOR = [0xf9 / 255, 0xd7 / 255, 0x2c / 255, 1];
+  const PAINT_COLOR_MAP = ["", "8", "0C", "1C", "2C", "3C", "4C", "5C", "6C", "7C", "8C", "9C", "AC", "BC", "CC", "DC"];
+  const CRC32_TABLE = (() => {
+    const table = new Uint32Array(256);
+    for (let n = 0; n < 256; n++) {
+      let c = n;
+      for (let k = 0; k < 8; k++) {
+        c = (c & 1) ? (0xedb88320 ^ (c >>> 1)) : (c >>> 1);
+      }
+      table[n] = c >>> 0;
+    }
+    return table;
+  })();
+
+  const crc32 = (bytes) => {
+    let crc = 0xffffffff;
+    for (let i = 0; i < bytes.length; i++) {
+      crc = CRC32_TABLE[(crc ^ bytes[i]) & 0xff] ^ (crc >>> 8);
+    }
+    return (crc ^ 0xffffffff) >>> 0;
+  };
+
+  const concatUint8Arrays = (chunks) => {
+    const total = chunks.reduce((sum, chunk) => sum + chunk.length, 0);
+    const out = new Uint8Array(total);
+    let offset = 0;
+    for (const chunk of chunks) {
+      out.set(chunk, offset);
+      offset += chunk.length;
+    }
+    return out;
+  };
+
+  const createZip = (files) => {
+    const localChunks = [];
+    const centralChunks = [];
+    let offset = 0;
+
+    for (const [name, dataLike] of Object.entries(files)) {
+      const nameBytes = textEncoder.encode(name);
+      const data = toUint8Array(dataLike);
+      const crc = crc32(data);
+      const localHeader = new Uint8Array(30 + nameBytes.length);
+      const localView = new DataView(localHeader.buffer);
+      localView.setUint32(0, 0x04034b50, true);
+      localView.setUint16(4, 20, true);
+      localView.setUint16(6, 0, true);
+      localView.setUint16(8, 0, true);
+      localView.setUint16(10, 0, true);
+      localView.setUint16(12, 0, true);
+      localView.setUint32(14, crc, true);
+      localView.setUint32(18, data.length, true);
+      localView.setUint32(22, data.length, true);
+      localView.setUint16(26, nameBytes.length, true);
+      localView.setUint16(28, 0, true);
+      localHeader.set(nameBytes, 30);
+      localChunks.push(localHeader, data);
+
+      const centralHeader = new Uint8Array(46 + nameBytes.length);
+      const centralView = new DataView(centralHeader.buffer);
+      centralView.setUint32(0, 0x02014b50, true);
+      centralView.setUint16(4, 20, true);
+      centralView.setUint16(6, 20, true);
+      centralView.setUint16(8, 0, true);
+      centralView.setUint16(10, 0, true);
+      centralView.setUint16(12, 0, true);
+      centralView.setUint16(14, 0, true);
+      centralView.setUint32(16, crc, true);
+      centralView.setUint32(20, data.length, true);
+      centralView.setUint32(24, data.length, true);
+      centralView.setUint16(28, nameBytes.length, true);
+      centralView.setUint16(30, 0, true);
+      centralView.setUint16(32, 0, true);
+      centralView.setUint16(34, 0, true);
+      centralView.setUint16(36, 0, true);
+      centralView.setUint32(38, 0, true);
+      centralView.setUint32(42, offset, true);
+      centralHeader.set(nameBytes, 46);
+      centralChunks.push(centralHeader);
+
+      offset += localHeader.length + data.length;
+    }
+
+    const centralDirectory = concatUint8Arrays(centralChunks);
+    const eocd = new Uint8Array(22);
+    const eocdView = new DataView(eocd.buffer);
+    eocdView.setUint32(0, 0x06054b50, true);
+    eocdView.setUint16(4, 0, true);
+    eocdView.setUint16(6, 0, true);
+    eocdView.setUint16(8, centralChunks.length, true);
+    eocdView.setUint16(10, centralChunks.length, true);
+    eocdView.setUint32(12, centralDirectory.length, true);
+    eocdView.setUint32(16, offset, true);
+    eocdView.setUint16(20, 0, true);
+
+    return concatUint8Arrays([...localChunks, centralDirectory, eocd]);
+  };
+
+  const toHexByte = (value) => Math.round(Math.max(0, Math.min(1, value)) * 255).toString(16).padStart(2, "0").toUpperCase();
+
+  const colorToDisplayColor = ([r, g, b, a = 1]) => {
+    const base = `#${toHexByte(r)}${toHexByte(g)}${toHexByte(b)}`;
+    return a < 1 ? `${base}${toHexByte(a)}` : base;
+  };
+
+  const createUuid = () =>
+    (globalThis.crypto?.randomUUID?.() ||
+      `${Date.now().toString(16)}-${Math.random().toString(16).slice(2, 10)}-${Math.random().toString(16).slice(2, 10)}`);
+
+  const parseOffToIndexedPolyhedron = (offData) => {
+    const arrayBuffer = offData.buffer.slice(
+      offData.byteOffset,
+      offData.byteOffset + offData.byteLength,
+    );
+    const text = new TextDecoder().decode(arrayBuffer);
+    const lines = text
+      .split("\n")
+      .map((line) => line.trim())
+      .filter((line) => line.length > 0 && !line.startsWith("#"));
+
+    if (lines.length === 0) {
+      throw new Error(i18nGet("openscad-render-failed", "OpenSCAD render failed"));
+    }
+
+    let countsLine = "";
+    let currentLine = 0;
+    if (/^OFF(\s|$)/.test(lines[0])) {
+      countsLine = lines[0].substring(3).trim();
+      currentLine = 1;
+    } else if (lines[0] === "OFF" && lines.length > 1) {
+      countsLine = lines[1];
+      currentLine = 2;
+    } else {
+      throw new Error(i18nGet("openscad-render-failed", "OpenSCAD render failed"));
+    }
+
+    const [vertexCountRaw, faceCountRaw] = countsLine.split(/\s+/).map(Number);
+    const vertexCount = Number.isFinite(vertexCountRaw) ? Math.floor(vertexCountRaw) : NaN;
+    const faceCount = Number.isFinite(faceCountRaw) ? Math.floor(faceCountRaw) : NaN;
+    if (!Number.isFinite(vertexCount) || !Number.isFinite(faceCount) || vertexCount <= 0 || faceCount <= 0) {
+      throw new Error(i18nGet("openscad-render-failed", "OpenSCAD render failed"));
+    }
+    if (currentLine + vertexCount + faceCount > lines.length) {
+      throw new Error(i18nGet("openscad-render-failed", "OpenSCAD render failed"));
+    }
+
+    const vertices = [];
+    for (let i = 0; i < vertexCount; i++) {
+      const parts = lines[currentLine + i].split(/\s+/).map(Number);
+      if (parts.length < 3 || parts.some(Number.isNaN)) {
+        throw new Error(i18nGet("openscad-render-failed", "OpenSCAD render failed"));
+      }
+      vertices.push({ x: parts[0], y: parts[1], z: parts[2] });
+    }
+    currentLine += vertexCount;
+
+    const colors = [];
+    const colorMap = new Map();
+    const faces = [];
+
+    for (let i = 0; i < faceCount; i++) {
+      const parts = lines[currentLine + i].split(/\s+/).map(Number);
+      const numVerts = Number.isFinite(parts[0]) ? Math.floor(parts[0]) : 0;
+      const faceVertices = parts.slice(1, numVerts + 1).map((index) => Math.floor(index));
+      if (faceVertices.length < 3) {
+        throw new Error(i18nGet("openscad-render-failed", "OpenSCAD render failed"));
+      }
+
+      let color = DEFAULT_FACE_COLOR;
+      if (parts.length >= numVerts + 4) {
+        const raw = parts.slice(numVerts + 1, numVerts + 5).filter(Number.isFinite);
+        if (raw.length >= 3) {
+          const r = raw[0];
+          const g = raw[1];
+          const b = raw[2];
+          const a = raw.length >= 4 ? raw[3] : (Math.max(r, g, b) > 1 ? 255 : 1);
+          const divisor = Math.max(r, g, b, a) > 1 ? 255 : 1;
+          color = [r / divisor, g / divisor, b / divisor, a / divisor];
+        }
+      }
+
+      const colorKey = color.join(",");
+      let colorIndex = colorMap.get(colorKey);
+      if (colorIndex == null) {
+        colorIndex = colors.length;
+        colors.push(color);
+        colorMap.set(colorKey, colorIndex);
+      }
+
+      if (faceVertices.length === 3) {
+        faces.push({ vertices: faceVertices, colorIndex });
+      } else {
+        for (let j = 1; j < faceVertices.length - 1; j++) {
+          faces.push({
+            vertices: [faceVertices[0], faceVertices[j], faceVertices[j + 1]],
+            colorIndex,
+          });
+        }
+      }
+    }
+
+    return { vertices, faces, colors };
+  };
+
+  const buildThreeModelFromIndexedPolyhedron = (polyhedron, THREE) => {
+    const model = new THREE.Group();
+    const facesByColor = new Map();
+
+    for (const face of polyhedron.faces) {
+      const [i1, i2, i3] = face.vertices;
+      const v1 = polyhedron.vertices[i1];
+      const v2 = polyhedron.vertices[i2];
+      const v3 = polyhedron.vertices[i3];
+      if (!v1 || !v2 || !v3) continue;
+      const color = polyhedron.colors[face.colorIndex] || DEFAULT_FACE_COLOR;
+      const colorKey = color.join(",");
+      let bucket = facesByColor.get(colorKey);
+      if (!bucket) {
+        bucket = { color, positions: [] };
+        facesByColor.set(colorKey, bucket);
+      }
+      bucket.positions.push(v1.x, v1.y, v1.z, v2.x, v2.y, v2.z, v3.x, v3.y, v3.z);
+    }
+
+    if (facesByColor.size === 0) {
+      throw new Error(i18nGet("openscad-render-failed", "OpenSCAD render failed"));
+    }
+
+    for (const bucket of facesByColor.values()) {
+      const geometry = new THREE.BufferGeometry();
+      geometry.setAttribute("position", new THREE.Float32BufferAttribute(bucket.positions, 3));
+      geometry.computeBoundingBox();
+      geometry.computeVertexNormals();
+      const [r, g, b, a = 1] = bucket.color;
+      const material = new THREE.MeshStandardMaterial({
+        color: new THREE.Color(r, g, b),
+        transparent: a < 1,
+        opacity: a,
+        metalness: 0.1,
+        roughness: 0.6,
+      });
+      model.add(new THREE.Mesh(geometry, material));
+    }
+
+    return model;
+  };
+
+  // Build a Three.js Group from pre-parsed colour buckets returned by the render worker.
+  // The Float32Array buffers are already computed off the main thread — no text parsing needed.
+  const buildThreeModelFromColorBuckets = (colorBuckets, THREE) => {
+    const model = new THREE.Group();
+    for (const bucket of colorBuckets) {
+      const posArray = bucket.positions instanceof Float32Array
+        ? bucket.positions : new Float32Array(bucket.positions || []);
+      const normArray = bucket.normals instanceof Float32Array
+        ? bucket.normals : new Float32Array(bucket.normals || []);
+      if (posArray.length === 0) continue;
+      const geometry = new THREE.BufferGeometry();
+      geometry.setAttribute("position", new THREE.Float32BufferAttribute(posArray, 3));
+      geometry.setAttribute("normal", new THREE.Float32BufferAttribute(normArray, 3));
+      const [r, g, b, a = 1] = bucket.color || DEFAULT_FACE_COLOR;
+      const material = new THREE.MeshStandardMaterial({
+        color: new THREE.Color(r, g, b),
+        transparent: a < 1,
+        opacity: a,
+        metalness: 0.1,
+        roughness: 0.6,
+      });
+      model.add(new THREE.Mesh(geometry, material));
+    }
+    if (model.children.length === 0) {
+      throw new Error(i18nGet("openscad-render-failed", "OpenSCAD render failed"));
+    }
+    return model;
+  };
+
+  const exportIndexedPolyhedronTo3mf = (polyhedron) => {
+    const objectUuid = createUuid();
+    const buildUuid = createUuid();
+    const extruderIndexByColorIndex = polyhedron.colors.map((_, idx) => idx % PAINT_COLOR_MAP.length);
+
+    const modelXml = [
+      '<?xml version="1.0" encoding="utf-8"?>',
+      '<model unit="millimeter" xml:lang="en-US" xmlns="http://schemas.microsoft.com/3dmanufacturing/core/2015/02" xmlns:p="http://schemas.microsoft.com/3dmanufacturing/production/2015/06">',
+      '<meta name="BambuStudio:3mfVersion" value="1"/>',
+      '<meta name="slic3rpe:Version3mf" value="1"/>',
+      '<meta name="slic3rpe:MmPaintingVersion" value="1"/>',
+      "<resources>",
+      '<basematerials id="2">',
+      ...polyhedron.colors.map((color, i) => `<base name="color_${i}" displaycolor="${colorToDisplayColor(color)}"/>`),
+      "</basematerials>",
+      `<object id="1" name="OpenSCAD Model" type="model" p:UUID="${objectUuid}" pid="2" pindex="0">`,
+      "<mesh>",
+      "<vertices>",
+      ...polyhedron.vertices.map((vertex) => `<vertex x="${vertex.x}" y="${vertex.y}" z="${vertex.z}" />`),
+      "</vertices>",
+      "<triangles>",
+      ...polyhedron.faces.map((face) => {
+        const [v1, v2, v3] = face.vertices;
+        const attrs = [`v1="${v1}"`, `v2="${v2}"`, `v3="${v3}"`];
+        if (face.colorIndex > 0) {
+          attrs.push(`pid="2"`, `p1="${face.colorIndex}"`);
+        }
+        const paintColor = PAINT_COLOR_MAP[extruderIndexByColorIndex[face.colorIndex]];
+        if (paintColor) {
+          attrs.push(`paint_color="${paintColor}"`);
+        }
+        return `<triangle ${attrs.join(" ")} />`;
+      }),
+      "</triangles>",
+      "</mesh>",
+      "</object>",
+      "</resources>",
+      `<build p:UUID="${buildUuid}">`,
+      `<item objectid="1" p:UUID="${objectUuid}"/>`,
+      "</build>",
+      "</model>",
+    ].join("\n");
+
+    const contentTypesXml = [
+      '<?xml version="1.0" encoding="utf-8"?>',
+      '<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">',
+      '<Default Extension="model" ContentType="application/vnd.ms-package.3dmanufacturing-3dmodel+xml"/>',
+      "</Types>",
+    ].join("\n");
+
+    const relationshipsXml = [
+      '<?xml version="1.0" encoding="utf-8"?>',
+      '<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">',
+      '<Relationship Type="http://schemas.microsoft.com/3dmanufacturing/2013/01/3dmodel" Target="/3D/3dmodel.model" Id="rel0"/>',
+      "</Relationships>",
+    ].join("\n");
+
+    return createZip({
+      "3D/3dmodel.model": textEncoder.encode(modelXml),
+      "[Content_Types].xml": textEncoder.encode(contentTypesXml),
+      "_rels/.rels": textEncoder.encode(relationshipsXml),
+    });
+  };
+
   function initElement(elem) {
     if (elem.getAttribute("data-openscad-initialized") === "true") return;
     elem.setAttribute("data-openscad-initialized", "true");
@@ -435,18 +667,39 @@ hyperbook.openscad = (function () {
     const splitter = elem.querySelector(".splitter");
     const canvasParamsSplitter = elem.querySelector(".canvas-params-splitter");
     const canvas = elem.querySelector(".preview-canvas");
-    const editor = elem.querySelector("code-input.editor");
+    const editorDiv = elem.querySelector(".editor");
     const params = elem.querySelector("textarea.parameters");
 
+    // `cm` will be initialized after scheduleSave/scheduleParamBuild are defined.
+    let cm = null;
+
     // The parameters panel is its own card below the canvas.
     const paramsPanel = elem.querySelector(".parameters-panel");
     const paramsForm = paramsPanel?.querySelector(".parameters-body") ?? paramsPanel;
 
     const renderBtn = elem.querySelector("button.render");
     const copyBtn = elem.querySelector("button.copy");
-    const downloadStlBtn = elem.querySelector("button.download-stl");
+    const downloadBtn = elem.querySelector("button.download-stl");
     const resetBtn = elem.querySelector("button.reset");
     const fullscreenBtn = elem.querySelector("button.fullscreen");
+    const bottomButtons = elem.querySelector(".buttons.bottom");
+    let downloadFormatSelect = bottomButtons?.querySelector("select.download-format");
+    if (!downloadFormatSelect && bottomButtons && downloadBtn) {
+      downloadFormatSelect = document.createElement("select");
+      downloadFormatSelect.className = "download-format";
+      downloadFormatSelect.setAttribute("aria-label", i18nGet("openscad-download-format", "Download format"));
+      const stlOption = document.createElement("option");
+      stlOption.value = "stl";
+      stlOption.textContent = "STL";
+      const threeMfOption = document.createElement("option");
+      threeMfOption.value = "3mf";
+      threeMfOption.textContent = "3MF";
+      downloadFormatSelect.append(stlOption, threeMfOption);
+      bottomButtons.insertBefore(downloadFormatSelect, downloadBtn);
+    }
+    if (downloadBtn) {
+      downloadBtn.textContent = i18nGet("openscad-download", "Download");
+    }
 
     // --- Canvas overlay ---
     let overlayDismissTimer = null;
@@ -486,6 +739,30 @@ hyperbook.openscad = (function () {
       }
     };
 
+    const viewerState = {
+      renderer: null,
+      camera: null,
+      scene: null,
+      controls: null,
+      model: null,
+      renderRaf: 0,
+      resizeRaf: 0,
+      disposed: false,
+      resizeObserver: null,
+    };
+
+    const requestRender = () => {
+      if (viewerState.renderRaf || viewerState.disposed) return;
+      viewerState.renderRaf = requestAnimationFrame(() => {
+        viewerState.renderRaf = 0;
+        if (viewerState.disposed) return;
+        if (viewerState.controls) viewerState.controls.update();
+        if (viewerState.renderer && viewerState.scene && viewerState.camera) {
+          viewerState.renderer.render(viewerState.scene, viewerState.camera);
+        }
+      });
+    };
+
     // Resize the Three.js renderer to match the current canvas-wrapper size.
     const resizeCanvas = () => {
       if (!viewerState.renderer || !viewerState.camera || !canvasWrapper) return;
@@ -494,28 +771,26 @@ hyperbook.openscad = (function () {
       viewerState.renderer.setSize(w, h, false);
       viewerState.camera.aspect = w / h;
       viewerState.camera.updateProjectionMatrix();
+      requestRender();
+    };
+
+    const scheduleResizeCanvas = () => {
+      if (viewerState.resizeRaf || viewerState.disposed) return;
+      viewerState.resizeRaf = requestAnimationFrame(() => {
+        viewerState.resizeRaf = 0;
+        resizeCanvas();
+      });
     };
 
     const applyMainSplitSize = setupSplitter(elem, leftSide, editorContainer, splitter, () => {
-      resizeCanvas();
-      save();
+      scheduleResizeCanvas();
+      scheduleSave();
     });
     const applyCanvasParamsSplitSize = setupCanvasParamsSplitter(leftSide, previewContainer, paramsPanel, canvasParamsSplitter, () => {
-      resizeCanvas();
-      save();
+      scheduleResizeCanvas();
+      scheduleSave();
     });
 
-    const viewerState = {
-      renderer: null,
-      camera: null,
-      scene: null,
-      controls: null,
-      mesh: null,
-      raf: 0,
-      disposed: false,
-      resizeObserver: null,
-    };
-
     const save = async () => {
       if (!id) return;
       const splitHorizontal = Number(elem.dataset.splitHorizontal);
@@ -523,7 +798,7 @@ hyperbook.openscad = (function () {
       const splitCanvasParams = Number(leftSide?.dataset.splitCanvasParams);
       await hyperbook.store.db.openscad.put({
         id,
-        code: editor?.value || "",
+        code: cm?.getValue() || "",
         params: params?.value || "{}",
         ...(Number.isFinite(splitHorizontal) && splitHorizontal > 0
           ? { splitHorizontal: Math.round(splitHorizontal) }
@@ -541,8 +816,8 @@ hyperbook.openscad = (function () {
       if (!id) return null;
       const result = await hyperbook.store.db.openscad.get(id);
       if (!result) return null;
-      if (editor && typeof result.code === "string") {
-        editor.value = result.code;
+      if (cm && typeof result.code === "string") {
+        cm.setValue(result.code);
       }
       if (params && typeof result.params === "string") {
         params.value = result.params;
@@ -559,195 +834,241 @@ hyperbook.openscad = (function () {
       return result;
     };
 
+    const SAVE_DEBOUNCE_MS = 250;
+    const PARAM_REBUILD_DEBOUNCE_MS = 900;
+    const PARAM_RENDER_DEBOUNCE_MS = 600;
+    let saveTimer = 0;
+    let paramRebuildTimer = 0;
+    let paramRenderTimer = 0;
+    let pendingParamCode = null;
+    let lastBuiltParamCode = null;
+    let paramBuildInFlight = false;
+    let latestParamBuildToken = 0;
+    // Suppresses scheduleParamBuild when code is updated programmatically from a param change.
+    let suppressParamBuild = false;
+
+    const scheduleSave = () => {
+      clearTimeout(saveTimer);
+      saveTimer = window.setTimeout(() => {
+        const runSave = () => { void save(); };
+        if (typeof window.requestIdleCallback === "function") {
+          window.requestIdleCallback(runSave, { timeout: 500 });
+        } else {
+          runSave();
+        }
+      }, SAVE_DEBOUNCE_MS);
+    };
+
+    let paramValues = {};
+
+    // Surgically replaces the value of a top-level variable assignment in SCAD source,
+    // preserving any trailing inline comment (e.g. // [min:max] annotations).
+    const updateVariableInCode = (code, name, value) => {
+      const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const pattern = new RegExp(
+        `^([ \\t]*${escaped}[ \\t]*=[ \\t]*)([^;\\n]*)(;[^\\n]*)$`,
+        "m",
+      );
+      try {
+        return code.replace(pattern, `$1${formatValue(value)}$3`);
+      } catch (_) {
+        return code;
+      }
+    };
+
+    const syncParamsTextareaFromState = () => {
+      if (params) {
+        params.value = JSON.stringify(paramValues);
+      }
+    };
+
+    const handleParamFieldEvent = (event) => {
+      const target = event?.target;
+      const name = target?.dataset?.paramName;
+      const kind = target?.dataset?.paramKind;
+      if (!name || !kind) return;
+
+      if (kind === "boolean") {
+        paramValues[name] = Boolean(target.checked);
+      } else if (kind === "number") {
+        paramValues[name] = Number(target.value);
+      } else if (kind === "vector") {
+        const vectorContainer = target.closest(".param-vector");
+        if (!vectorContainer) return;
+        const vectorInputs = Array.from(
+          vectorContainer.querySelectorAll('input[data-param-kind="vector"]'),
+        ).filter((input) => input.dataset.paramName === name);
+        paramValues[name] = vectorInputs.map((input) => Number(input.value));
+      } else if (kind === "option") {
+        const selected = target.options?.[target.selectedIndex];
+        const raw = selected?.dataset?.paramOptionValue;
+        if (typeof raw === "string") {
+          try {
+            paramValues[name] = JSON.parse(raw);
+          } catch (_) {
+            paramValues[name] = target.value;
+          }
+        } else {
+          paramValues[name] = target.value;
+        }
+      } else {
+        paramValues[name] = target.value;
+      }
+
+      syncParamsTextareaFromState();
+
+      // Reflect the new value back into the editor source code.
+      const currentCode = cm?.getValue() || "";
+      const updatedCode = updateVariableInCode(currentCode, name, paramValues[name]);
+      if (updatedCode !== currentCode) {
+        suppressParamBuild = true;
+        cm?.setValue(updatedCode);
+        suppressParamBuild = false;
+      }
+
+      scheduleParamRender();
+      scheduleSave();
+    };
+
+    paramsForm?.addEventListener("input", handleParamFieldEvent);
+    paramsForm?.addEventListener("change", handleParamFieldEvent);
+
     // Rebuild the parameters form from the code's top-level variable assignments.
     // Stored overrides from the textarea are preserved so user edits survive
     // code changes that don't touch those variable names.
-    const buildParamForm = async (code) => {
-      // Show a loading indicator while WASM extracts params.
+    const buildParamForm = async (code, buildToken) => {
+      // Show a loading indicator while WASM extracts params and builds UI model.
       paramsForm.innerHTML = "";
-      paramsPanel?.classList.remove("hidden");
-      canvasParamsSplitter?.classList.remove("hidden");
       const loading = document.createElement("p");
       loading.className = "params-empty";
       loading.textContent = i18nGet("openscad-params-loading", "Loading parameters...");
       paramsForm.appendChild(loading);
 
-      const codeParams = await extractParams(code, libraryNames);
-      paramsForm.innerHTML = "";
-
-      if (codeParams.length === 0) {
-        paramsPanel?.classList.add("hidden");
-        canvasParamsSplitter?.classList.add("hidden");
+      // Code is the source of truth — param changes are always synced back to the
+      // code, so we never need stored overrides to win over the code's own values.
+      const result = await buildParamUiInWorker(code, libraryNames, {}, id || "model");
+      if (buildToken !== latestParamBuildToken) {
+        return false;
+      }
+      if (!result.hasParams) {
+        paramsForm.innerHTML = "";
+        const empty = document.createElement("p");
+        empty.className = "params-empty";
+        empty.textContent = i18nGet("openscad-params-none", "No parameters");
+        paramsForm.appendChild(empty);
+        paramValues = {};
         if (params) params.value = "{}";
-        return;
+        return true;
       }
 
-      let currentOverrides = {};
-      try {
-        currentOverrides = JSON.parse(params?.value || "{}");
-      } catch (_) {}
-
-      const syncTextarea = () => {
-        const values = {};
-        paramsForm.querySelectorAll("[data-param-name]").forEach((input) => {
-          const name = input.dataset.paramName;
-          const type = input.dataset.paramType;
-          if (type === "boolean") {
-            values[name] = input.checked;
-          } else if (type === "number") {
-            values[name] = Number(input.value);
-          } else {
-            values[name] = input.value;
+      // Preserve accordion open/closed state by group name before replacing HTML.
+      const accordionStates = new Map();
+      paramsForm.querySelectorAll("details.param-group").forEach((details) => {
+        const summary = details.querySelector("summary.param-group-summary");
+        if (summary) {
+          accordionStates.set(summary.textContent.trim(), details.open);
+        }
+      });
+
+      paramsForm.innerHTML = result.html;
+
+      // Restore accordion states after the rebuild.
+      if (accordionStates.size > 0) {
+        paramsForm.querySelectorAll("details.param-group").forEach((details) => {
+          const summary = details.querySelector("summary.param-group-summary");
+          if (summary) {
+            const name = summary.textContent.trim();
+            if (accordionStates.has(name)) {
+              details.open = accordionStates.get(name);
+            }
           }
         });
-        if (params) params.value = JSON.stringify(values);
-        save();
-      };
+      }
 
-      codeParams.forEach(({ name, caption, type, initial, min, max, step, options }) => {
-        const current =
-          currentOverrides[name] !== undefined ? currentOverrides[name] : initial;
-
-        const row = document.createElement("div");
-        row.className = "param-row";
-
-        const label = document.createElement("label");
-        label.textContent = caption || name;
-        label.setAttribute("for", `openscad-param-${id}-${name}`);
-
-        let input;
-        if (type === "boolean") {
-          input = document.createElement("input");
-          input.type = "checkbox";
-          input.checked = Boolean(current);
-        } else if (options && options.length > 0) {
-          // Dropdown for parameters with a fixed set of options.
-          input = document.createElement("select");
-          options.forEach(({ name: optName, value: optValue }) => {
-            const opt = document.createElement("option");
-            opt.value = String(optValue);
-            opt.textContent = optName || String(optValue);
-            if (String(optValue) === String(current)) opt.selected = true;
-            input.appendChild(opt);
-          });
-          input.addEventListener("change", syncTextarea);
-        } else if (type === "number" && Array.isArray(initial)) {
-          // Vector: render one number input per component.
-          input = document.createElement("span");
-          input.className = "param-vector";
-          const arr = Array.isArray(current) ? current : initial;
-          arr.forEach((val, idx) => {
-            const ni = document.createElement("input");
-            ni.type = "number";
-            ni.value = String(val);
-            ni.step = step != null ? String(step) : "any";
-            if (min != null) ni.min = String(min);
-            if (max != null) ni.max = String(max);
-            ni.dataset.paramName = name;
-            ni.dataset.paramType = "vector";
-            ni.dataset.vectorIndex = String(idx);
-            ni.addEventListener("input", () => {
-              const all = Array.from(input.querySelectorAll("input")).map(
-                (i) => Number(i.value)
-              );
-              const sibling = paramsForm.querySelector(
-                `[data-param-name="${name}"][data-param-type="number"]`
-              );
-              if (sibling) sibling.value = JSON.stringify(all);
-              syncTextarea();
-            });
-            input.appendChild(ni);
-          });
-          // Hidden input holds the JSON array for syncTextarea to read.
-          const hidden = document.createElement("input");
-          hidden.type = "hidden";
-          hidden.dataset.paramName = name;
-          hidden.dataset.paramType = "number";
-          hidden.value = JSON.stringify(arr);
-          input.appendChild(hidden);
-        } else if (type === "number") {
-          input = document.createElement("input");
-          input.type = "number";
-          input.value = String(current);
-          input.step = step != null ? String(step) : "any";
-          if (min != null) input.min = String(min);
-          if (max != null) input.max = String(max);
-        } else {
-          input = document.createElement("input");
-          input.type = "text";
-          input.value = String(current);
-        }
-        input.id = `openscad-param-${id}-${name}`;
-        if (input.tagName !== "SPAN") {
-          input.dataset.paramName = name;
-          input.dataset.paramType = type;
-          input.addEventListener("input", syncTextarea);
-        }
+      paramValues = result.values || {};
+      syncParamsTextareaFromState();
+      scheduleSave();
+      return true;
+    };
 
-        row.appendChild(label);
-        row.appendChild(input);
-        paramsForm.appendChild(row);
-      });
+    const runPendingParamBuild = async () => {
+      if (paramBuildInFlight) return;
+      while (pendingParamCode !== null && pendingParamCode !== lastBuiltParamCode) {
+        const nextCode = pendingParamCode;
+        const nextToken = latestParamBuildToken;
+        pendingParamCode = null;
+        paramBuildInFlight = true;
+        try {
+          const wasApplied = await buildParamForm(nextCode, nextToken);
+          if (wasApplied && nextToken === latestParamBuildToken) {
+            lastBuiltParamCode = nextCode;
+          }
+        } finally {
+          paramBuildInFlight = false;
+        }
+      }
+    };
 
-      syncTextarea();
+    const scheduleParamBuild = (code) => {
+      latestParamBuildToken += 1;
+      pendingParamCode = code;
+      clearTimeout(paramRebuildTimer);
+      paramRebuildTimer = window.setTimeout(() => {
+        void runPendingParamBuild();
+      }, PARAM_REBUILD_DEBOUNCE_MS);
     };
 
     const getParamDefinitions = () => {
-      const parsed = JSON.parse(params?.value || "{}");
+      const parsed = paramValues;
       if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
         throw new Error(i18nGet("openscad-params-object", "Parameters must be a JSON object"));
       }
       return Object.entries(parsed).map(([k, v]) => `-D${k}=${formatValue(v)}`);
     };
 
-    const renderWithFormat = async (format, libraryNames = []) => {
+    const renderWithFormat = async (format, libraryNames = [], isPreview = false) => {
       renderBtn?.setAttribute("disabled", "true");
       showOverlay("loading", i18nGet("openscad-rendering", "Rendering..."));
 
       try {
-        const paramDefinitions = getParamDefinitions();
-        const openscad = await getOpenScad();
-        const instance = openscad;
-
-        if (libraryNames.length > 0) {
-          await mountLibraries(instance, libraryNames);
+        // Param values are always synced back into the editor code, so the code
+        // itself is the single source of truth. Passing -D overrides is both
+        // redundant and causes stale-value renders when the render fires before
+        // the next param-build cycle completes.
+        const result = await callWorker("render", "render", {
+          code: cm?.getValue() || "",
+          format,
+          libraryNames,
+          paramDefinitions: [],
+          isPreview,
+        });
+        const stderr = getInvocationStderr(result);
+        if (result?.error || result?.exitCode !== 0) {
+          const error = new Error(result?.error || i18nGet("openscad-render-failed", "OpenSCAD render failed"));
+          error.stderr = stderr;
+          throw error;
         }
-
-        const sourcePath = "/tmp/model.scad";
-        const outPath = `/tmp/output.${format}`;
-        const exportFormat = format === "stl" ? "binstl" : format;
-
-        try {
-          instance.FS.unlink(sourcePath);
-        } catch (_) {}
-        try {
-          instance.FS.unlink(outPath);
-        } catch (_) {}
-
-        instance.FS.writeFile(sourcePath, editor?.value || "");
-
-        const args = [
-          sourcePath,
-          "-o",
-          outPath,
-          `--export-format=${exportFormat}`,
-          ...paramDefinitions,
-        ];
-
-        const exitCode = instance.callMain(args);
-        if (exitCode !== 0) {
-          throw new Error(i18nGet("openscad-render-failed", "OpenSCAD render failed"));
+        // Worker returns pre-parsed geometry for preview OFF renders (avoids main-thread text parsing).
+        if (result?.parsedGeometry) {
+          return { parsedGeometry: result.parsedGeometry, stderr };
         }
-
-        const content = toUint8Array(instance.FS.readFile(outPath, { encoding: "binary" }));
-        return content;
+        const output = result?.outputs?.[0]?.[1];
+        if (!output) {
+          const error = new Error(i18nGet("openscad-render-failed", "OpenSCAD render failed"));
+          error.stderr = stderr;
+          throw error;
+        }
+        return {
+          content: toUint8Array(output),
+          stderr,
+        };
       } finally {
         renderBtn?.removeAttribute("disabled");
       }
     };
 
-    const downloadBinary = (content, ext) => {
-      const blob = new Blob([content], { type: "application/octet-stream" });
+    const downloadBinary = (content, ext, mimeType = "application/octet-stream") => {
+      const blob = new Blob([content], { type: mimeType });
       const a = document.createElement("a");
       a.href = URL.createObjectURL(blob);
       a.download = `openscad-${id || "model"}.${ext}`;
@@ -756,18 +1077,17 @@ hyperbook.openscad = (function () {
     };
 
     const renderPreview = async () => {
-      openscadStderr = [];
       try {
-        // Ensure font bytes are fetched before creating the WASM instance
-        await loadFonts();
         await save();
-        const stl = await renderWithFormat("stl", libraryNames);
-        await renderStl(stl);
+        const renderResult = await renderWithFormat("off", libraryNames, true);
+        if (renderResult.parsedGeometry) {
+          await renderOff({ colorBuckets: renderResult.parsedGeometry });
+        } else {
+          await renderOff(renderResult.content);
+        }
         hideOverlay();
       } catch (error) {
-        // Prefer actual OpenSCAD error lines over raw JS/C++ exception values.
-        // emscripten throws C++ exceptions as raw numbers (WASM memory pointers).
-        const stderrErrors = openscadStderr.filter((l) => /error/i.test(l)).join("\n");
+        const stderrErrors = (error?.stderr || []).filter((l) => /error/i.test(l)).join("\n");
         if (stderrErrors) {
           showOverlay("error", stderrErrors);
         } else if (typeof error === "number") {
@@ -778,8 +1098,29 @@ hyperbook.openscad = (function () {
       }
     };
 
-    const renderStl = async (stlData) => {
-      const { THREE, STLLoader, OrbitControls } = await getThree();
+    const scheduleParamRender = () => {
+      clearTimeout(paramRenderTimer);
+      paramRenderTimer = window.setTimeout(() => {
+        void renderPreview();
+      }, PARAM_RENDER_DEBOUNCE_MS);
+    };
+
+    const disposeModel = () => {
+      if (!viewerState.model || !viewerState.scene) return;
+      viewerState.scene.remove(viewerState.model);
+      viewerState.model.traverse((child) => {
+        child.geometry?.dispose?.();
+        if (Array.isArray(child.material)) {
+          child.material.forEach((material) => material?.dispose?.());
+        } else {
+          child.material?.dispose?.();
+        }
+      });
+      viewerState.model = null;
+    };
+
+    const renderOff = async (offData) => {
+      const { THREE, OrbitControls } = await getThree();
       if (!canvas) return;
 
       if (!viewerState.renderer) {
@@ -805,19 +1146,10 @@ hyperbook.openscad = (function () {
 
         viewerState.camera = new THREE.PerspectiveCamera(45, 1, 0.1, 5000);
         viewerState.controls = new OrbitControls(viewerState.camera, canvas);
-        viewerState.controls.enableDamping = true;
-
-        const tick = () => {
-          if (viewerState.disposed) return;
-          if (viewerState.controls) viewerState.controls.update();
-          if (viewerState.renderer && viewerState.scene && viewerState.camera) {
-            viewerState.renderer.render(viewerState.scene, viewerState.camera);
-          }
-          viewerState.raf = requestAnimationFrame(tick);
-        };
-        tick();
+        viewerState.controls.enableDamping = false;
+        viewerState.controls.addEventListener("change", requestRender);
 
-        viewerState.resizeObserver = new ResizeObserver(() => resizeCanvas());
+        viewerState.resizeObserver = new ResizeObserver(() => scheduleResizeCanvas());
         viewerState.resizeObserver.observe(canvasWrapper || previewContainer);
       }
 
@@ -828,38 +1160,27 @@ hyperbook.openscad = (function () {
       viewerState.camera.aspect = width / height;
       viewerState.camera.updateProjectionMatrix();
 
-      if (viewerState.mesh) {
-        viewerState.scene.remove(viewerState.mesh);
-        viewerState.mesh.geometry?.dispose();
-      }
+      disposeModel();
 
-      const loader = new STLLoader();
-      const arrayBuffer = stlData.buffer.slice(
-        stlData.byteOffset,
-        stlData.byteOffset + stlData.byteLength,
-      );
-      const geometry = loader.parse(arrayBuffer);
-      geometry.computeBoundingBox();
-      geometry.computeVertexNormals();
-
-      const material = new THREE.MeshStandardMaterial({
-        color: 0x3b82f6,
-        metalness: 0.1,
-        roughness: 0.6,
-      });
-      const mesh = new THREE.Mesh(geometry, material);
-      viewerState.mesh = mesh;
-      viewerState.scene.add(mesh);
+      const polyhedron = offData?.colorBuckets ? null : parseOffToIndexedPolyhedron(offData);
+      const model = offData?.colorBuckets
+        ? buildThreeModelFromColorBuckets(offData.colorBuckets, THREE)
+        : buildThreeModelFromIndexedPolyhedron(polyhedron, THREE);
+      viewerState.model = model;
+      viewerState.scene.add(model);
 
-      const box = geometry.boundingBox;
+      const box = new THREE.Box3().setFromObject(model);
+      if (box.isEmpty()) {
+        throw new Error(i18nGet("openscad-render-failed", "OpenSCAD render failed"));
+      }
       const size = new THREE.Vector3();
       const center = new THREE.Vector3();
       box.getSize(size);
       box.getCenter(center);
 
-      mesh.position.x = -center.x;
-      mesh.position.y = -center.y;
-      mesh.position.z = -center.z;
+      model.position.x = -center.x;
+      model.position.y = -center.y;
+      model.position.z = -center.z;
 
       const maxDim = Math.max(size.x, size.y, size.z) || 1;
       const distance = maxDim * 1.8;
@@ -871,6 +1192,7 @@ hyperbook.openscad = (function () {
 
       viewerState.controls.target.set(0, 0, 0);
       viewerState.controls.update();
+      requestRender();
     };
 
     copyBtn?.addEventListener("click", async () => {
@@ -888,17 +1210,22 @@ hyperbook.openscad = (function () {
 
     renderBtn?.addEventListener("click", renderPreview);
 
-    downloadStlBtn?.addEventListener("click", async () => {
-      openscadStderr = [];
+    downloadBtn?.addEventListener("click", async () => {
       try {
-        await loadFonts();
         await save();
-        const stl = await renderWithFormat("stl", libraryNames);
-        downloadBinary(stl, "stl");
-        await renderStl(stl);
+        const selectedFormat = downloadFormatSelect?.value === "3mf" ? "3mf" : "stl";
+        if (selectedFormat === "3mf") {
+          const { content: off } = await renderWithFormat("off", libraryNames);
+          const polyhedron = parseOffToIndexedPolyhedron(off);
+          const threeMf = exportIndexedPolyhedronTo3mf(polyhedron);
+          downloadBinary(threeMf, "3mf", "model/3mf");
+        } else {
+          const { content: stl } = await renderWithFormat("stl", libraryNames);
+          downloadBinary(stl, "stl");
+        }
         hideOverlay();
       } catch (error) {
-        const stderrErrors = openscadStderr.filter((l) => /error/i.test(l)).join("\n");
+        const stderrErrors = (error?.stderr || []).filter((l) => /error/i.test(l)).join("\n");
         showOverlay("error", stderrErrors || error?.message || `${error}`);
       }
     });
@@ -914,6 +1241,24 @@ hyperbook.openscad = (function () {
     updateFullscreenButtonState(elem, fullscreenBtn);
 
     let editorStateRestored = false;
+
+    // Initialize CodeMirror now that scheduleSave/scheduleParamBuild are defined.
+    if (editorDiv) {
+      const initialSource = editorDiv.textContent;
+      editorDiv.textContent = "";
+      cm = HyperbookCM.create(editorDiv, {
+        lang: editorDiv.dataset.lang || "clike",
+        value: initialSource,
+        onChange: (code) => {
+          scheduleSave();
+          if (!suppressParamBuild) {
+            scheduleParamBuild(code);
+            scheduleParamRender();
+          }
+        },
+      });
+    }
+
     const restoreEditorState = async () => {
       if (editorStateRestored) return;
       editorStateRestored = true;
@@ -922,36 +1267,29 @@ hyperbook.openscad = (function () {
       // Re-apply split sizes after stored dataset values are applied by load().
       applyMainSplitSize?.();
       applyCanvasParamsSplitSize?.();
-      let paramRebuildTimer = null;
-      editor.addEventListener("input", () => {
-        save();
-        clearTimeout(paramRebuildTimer);
-        paramRebuildTimer = setTimeout(() => buildParamForm(editor.value), 500);
-      });
 
       // Use stored code if available; otherwise fall back to the editor's
       // current value (the markdown default) or the built-in placeholder.
-      const initialCode = stored?.code || editor.value.trim() || "// OpenSCAD\ncube([20,20,20], center=true);";
-      editor.value = initialCode;
+      const initialCode = stored?.code || cm?.getValue().trim() || "// OpenSCAD\ncube([20,20,20], center=true);";
+      cm?.setValue(initialCode);
       if (!params?.value.trim()) {
         params.value = "{}";
       }
-      await buildParamForm(initialCode);
-      // Only persist when there was no stored entry; if one already existed we
-      // must not overwrite it — reading editor.value right now may return stale
-      // data because code-input's async re-render may not have completed yet.
+      latestParamBuildToken += 1;
+      const initParamToken = latestParamBuildToken;
+      // Fire param extraction and rendering concurrently — each uses its own dedicated worker.
+      buildParamForm(initialCode, initParamToken).then(() => {
+        if (initParamToken === latestParamBuildToken) {
+          lastBuiltParamCode = initialCode;
+        }
+      }).catch(() => {});
       if (!stored) {
         await save();
       }
       renderPreview();
     };
 
-    editor?.addEventListener("code-input_load", restoreEditorState);
-    // SPA timing: if code-input already rendered its inner textarea before we
-    // attached the listener, fire the handler immediately (mirrors pyide).
-    if (editor?.querySelector("textarea")) {
-      void restoreEditorState();
-    }
+    void restoreEditorState();
   }
 
   function init(root) {