cadcode 0.2.0 → 0.3.0

package/client/viewer.js

@@ -1,61 +1,26 @@
-import * as THREE from 'three';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-const DEFAULT_COLOR = '#f2c14e';
-const EDGE_ANGLE = 25;
+import { bindDisplayButtons, createScene, saveBlob } from './scene.js';
 
 const canvas = document.getElementById('view');
-const partSelect = document.getElementById('part');
+const stage = document.getElementById('stage');
 const statusEl = document.getElementById('status');
 const fileEl = document.getElementById('file');
+const emptyEl = document.getElementById('empty');
 const errorEl = document.getElementById('error');
 const errorText = document.getElementById('error-text');
 const logsEl = document.getElementById('logs');
+const readout = {
+  size: document.getElementById('readout-size'),
+  mesh: document.getElementById('readout-mesh'),
+  time: document.getElementById('readout-time'),
+};
 
-// --- Scene -------------------------------------------------------------------
-
-THREE.Object3D.DEFAULT_UP.set(0, 0, 1); // CAD convention: Z is up
-
-const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
-renderer.setPixelRatio(window.devicePixelRatio);
-renderer.setClearColor(0xeef0f3);
-
-const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera(40, 1, 0.1, 10000);
-camera.up.set(0, 0, 1);
-camera.position.set(120, -160, 110);
-scene.add(camera);
-
-scene.add(new THREE.HemisphereLight(0xffffff, 0x8a8f99, 1.6));
-const keyLight = new THREE.DirectionalLight(0xffffff, 1.5);
-keyLight.position.set(-0.4, 0.8, 1); // relative to the camera, so shading follows the view
-camera.add(keyLight);
-
-const controls = new OrbitControls(camera, canvas);
-controls.enableDamping = true;
-controls.dampingFactor = 0.15;
-controls.screenSpacePanning = true; // shift+drag and right-drag pan in the view plane
-
-const grid = new THREE.Group();
-scene.add(grid);
-const axes = new THREE.AxesHelper(10);
-scene.add(axes);
-
-let model = new THREE.Group();
-scene.add(model);
-
-function resize() {
-  const { clientWidth: w, clientHeight: h } = canvas;
-  renderer.setSize(w, h, false);
-  camera.aspect = w / h;
-  camera.updateProjectionMatrix();
-}
-window.addEventListener('resize', resize);
-resize();
-
-renderer.setAnimationLoop(() => {
-  controls.update();
-  renderer.render(scene, camera);
+// The dev server bundles the render worker, three.js included, at /render-worker.js.
+// The canvas is transparent: the stage's backdrop in viewer.css paints behind it,
+// in the playground's colours.
+const view = createScene(canvas, {
+  workerUrl: '/render-worker.js',
+  colors: { background: null, gridMajor: 0xc9ced5, gridMinor: 0xdfe2e6, edges: 0x1f2833 },
+  onCamera: cameraMoved,
 });
 
 // --- Camera persistence ------------------------------------------------------
@@ -63,6 +28,7 @@ renderer.setAnimationLoop(() => {
 // browser refresh or a restarted server comes back to the same view.
 
 let fileKey = null;
+let camera = null; // the latest from the view: { position, target, zoom }
 
 const storage = {
   get(key) {
@@ -82,76 +48,39 @@ const storage = {
 };
 
 function saveCamera() {
-  if (!fileKey) return;
-  storage.set(`cadcode:camera:${fileKey}`, {
-    position: camera.position.toArray(),
-    target: controls.target.toArray(),
-    zoom: camera.zoom,
-  });
+  if (!fileKey || !camera) return;
+  storage.set(`cadcode:camera:${fileKey}`, camera);
 }
 
 function restoreCamera() {
   const saved = storage.get(`cadcode:camera:${fileKey}`);
   if (!saved) return false;
-  camera.position.fromArray(saved.position);
-  controls.target.fromArray(saved.target);
-  camera.zoom = saved.zoom ?? 1;
-  camera.updateProjectionMatrix();
-  controls.update();
+  view.setCamera(saved);
   return true;
 }
 
 let saveTimer = 0;
-controls.addEventListener('change', () => {
+function cameraMoved(moved) {
+  camera = moved;
   clearTimeout(saveTimer);
   saveTimer = setTimeout(saveCamera, 200);
-});
-window.addEventListener('beforeunload', saveCamera);
-
-function modelSphere() {
-  return new THREE.Box3().setFromObject(model).getBoundingSphere(new THREE.Sphere());
 }
+window.addEventListener('beforeunload', saveCamera);
 
+// The fitted camera arrives as a move and is saved from there.
 function fitView() {
-  const sphere = modelSphere();
-  if (sphere.isEmpty()) return;
-  const distance = (sphere.radius / Math.sin(THREE.MathUtils.degToRad(camera.fov / 2))) * 1.15;
-  const direction = new THREE.Vector3(1, -1.3, 0.9).normalize();
-  controls.target.copy(sphere.center);
-  camera.position.copy(sphere.center).addScaledVector(direction, distance);
-  camera.zoom = 1;
-  camera.updateProjectionMatrix();
-  controls.update();
-  saveCamera();
+  view.fitView();
 }
 
 document.getElementById('fit').addEventListener('click', fitView);
+bindDisplayButtons(view, [...document.querySelectorAll('[data-display]')]);
 window.addEventListener('keydown', (event) => {
-  if (event.target instanceof HTMLSelectElement) return;
+  if (event.target.closest?.('#part-menu')) return;
   if (event.key === 'f' || event.key === 'F') fitView();
 });
 
 // --- Model -------------------------------------------------------------------
 
-function disposeGroup(group) {
-  group.traverse((object) => {
-    object.geometry?.dispose();
-    object.material?.dispose();
-  });
-}
-
-function buildGrid(sphere) {
-  disposeGroup(grid);
-  grid.clear();
-  const step = 10 ** Math.floor(Math.log10(Math.max(sphere.radius, 1)));
-  const size = Math.ceil((sphere.radius * 3) / step) * step;
-  const helper = new THREE.GridHelper(size, size / step, 0xb9bec7, 0xd6d9df);
-  helper.rotation.x = Math.PI / 2;
-  helper.position.set(Math.round(sphere.center.x / step) * step, Math.round(sphere.center.y / step) * step, 0);
-  grid.add(helper);
-  axes.scale.setScalar(step / 10);
-}
-
 /** Decodes a binary model frame: u32 header length, JSON header, then f32 positions and u32 indices per group. */
 function decodeModel(buffer) {
   const headerLength = new DataView(buffer).getUint32(0, true);
@@ -167,62 +96,40 @@ function decodeModel(buffer) {
   return { header, groups };
 }
 
-function showModel({ header, groups }) {
-  const next = new THREE.Group();
-  for (const g of groups) {
-    const geometry = new THREE.BufferGeometry();
-    geometry.setAttribute('position', new THREE.BufferAttribute(g.positions, 3));
-    geometry.setIndex(new THREE.BufferAttribute(g.indices, 1));
-    geometry.computeVertexNormals();
-
-    const [r, gr, b, a] = g.color ?? [...new THREE.Color(DEFAULT_COLOR).toArray(), 1];
-    const transparent = a < 0.999;
-    const material = new THREE.MeshStandardMaterial({
-      color: new THREE.Color(r, gr, b),
-      roughness: 0.65,
-      metalness: 0.05,
-      flatShading: true,
-      transparent,
-      opacity: a,
-      depthWrite: !transparent,
-      side: transparent ? THREE.DoubleSide : THREE.FrontSide,
-      polygonOffset: true,
-      polygonOffsetFactor: 1,
-      polygonOffsetUnits: 1,
-    });
-    const mesh = new THREE.Mesh(geometry, material);
-    mesh.renderOrder = transparent ? 1 : 0;
-    next.add(mesh);
-
-    const edges = new THREE.LineSegments(
-      new THREE.EdgesGeometry(geometry, EDGE_ANGLE),
-      new THREE.LineBasicMaterial({ color: 0x2a2f36, transparent: true, opacity: transparent ? 0.25 : 0.55 }),
-    );
-    next.add(edges);
-  }
-
-  scene.remove(model);
-  disposeGroup(model);
-  model = next;
-  scene.add(model);
-
-  const sphere = modelSphere();
-  if (!sphere.isEmpty()) {
-    camera.near = Math.max(sphere.radius / 1000, 0.01);
-    camera.far = sphere.radius * 200 + camera.position.distanceTo(sphere.center);
-    camera.updateProjectionMatrix();
-    buildGrid(sphere);
-  }
+let shown = null; // header of the model on screen
 
-  const triangles = groups.reduce((n, g) => n + g.indices.length / 3, 0);
-  setStatus('ready', `${header.part} · ${triangles.toLocaleString()} tris · ${header.ms} ms`);
+async function showModel({ header, groups }) {
+  shown = header;
+  const mesh = await view.showModel(groups);
+  if (shown !== header) return; // a newer frame arrived meanwhile
+  delete stage.dataset.empty;
+  showReadout(mesh, header.ms);
+  setStatus('ready');
 }
 
 // --- UI state ----------------------------------------------------------------
 
-function setStatus(state, text = state) {
+const STATUS_TEXT = {
+  connecting: 'Connecting',
+  building: 'Building',
+  evaluating: 'Running',
+  ready: 'Ready',
+  error: 'Error',
+  disconnected: 'Server stopped, reconnecting',
+};
+
+/** Shows the state by the status dot; while the program rebuilds the stage shows it too (see "Busy" in viewer.css). */
+function setStatus(state) {
   statusEl.dataset.state = state;
-  statusEl.textContent = text;
+  statusEl.textContent = STATUS_TEXT[state] ?? state;
+  toggleFlag('busy', state === 'building' || state === 'evaluating' || state === 'connecting');
+  toggleFlag('offline', state === 'disconnected');
+  if (stage.dataset.empty !== undefined) emptyEl.textContent = state === 'disconnected' ? 'Waiting for the dev server…' : 'Building the model…';
+}
+
+function toggleFlag(name, on) {
+  if (on) stage.dataset[name] = '';
+  else delete stage.dataset[name];
 }
 
 function showError(message) {
@@ -242,10 +149,66 @@ function showLogs(logs = []) {
   logsEl.hidden = logs.length === 0;
 }
 
+const formatMm = (n) => (Math.round(n * 10) / 10).toLocaleString();
+
+/** Fills the readout: the model's overall size, large, then its mesh and how long the program took. */
+function showReadout({ triangles, size }, ms) {
+  readout.size.replaceChildren(size ? size.map(formatMm).join(' × ') : 'Empty');
+  if (size) readout.size.append(Object.assign(document.createElement('small'), { textContent: 'mm' }));
+  readout.mesh.textContent = `${triangles.toLocaleString()} triangles`;
+  readout.time.textContent = `${ms.toLocaleString()} ms`;
+}
+
+// --- Parts -------------------------------------------------------------------
+// A pill naming the part on screen; it opens a menu of the program's parts. A
+// program with one part has no pill.
+
+const partOpen = document.getElementById('part-open');
+const partMenu = document.getElementById('part-menu');
+let currentPart = '';
+
 function showParts(names, current) {
-  partSelect.replaceChildren(...names.map((name) => new Option(name, name, false, name === current)));
+  currentPart = current;
+  document.getElementById('part-title').textContent = current;
+  partMenu.replaceChildren(
+    ...names.map((name) => {
+      const item = Object.assign(document.createElement('button'), { type: 'button', textContent: name });
+      item.setAttribute('role', 'menuitemradio');
+      item.setAttribute('aria-checked', String(name === current));
+      item.addEventListener('click', () => choosePart(name));
+      return item;
+    }),
+  );
+  partOpen.hidden = names.length < 2;
+}
+
+function choosePart(name) {
+  partMenu.hidePopover();
+  if (name === currentPart) return;
+  currentPart = name;
+  storage.set(`cadcode:part:${fileKey}`, name);
+  requestPart(name);
 }
 
+partMenu.addEventListener('toggle', (event) => {
+  partOpen.setAttribute('aria-expanded', String(event.newState === 'open'));
+  if (event.newState !== 'open') return;
+  const box = partOpen.getBoundingClientRect();
+  partMenu.style.left = `${box.left}px`;
+  partMenu.style.top = `${box.bottom + 8}px`;
+  const items = [...partMenu.children];
+  (items.find((item) => item.getAttribute('aria-checked') === 'true') ?? items[0])?.focus();
+});
+
+// Arrows move through the menu; Escape closes it (the popover's own).
+partMenu.addEventListener('keydown', (event) => {
+  const step = { ArrowDown: 1, ArrowUp: -1 }[event.key];
+  if (!step) return;
+  event.preventDefault();
+  const items = [...partMenu.children];
+  items[(items.indexOf(document.activeElement) + step + items.length) % items.length]?.focus();
+});
+
 // --- Download ----------------------------------------------------------------
 // Fetched rather than navigated to, so a failing program shows its error here
 // instead of replacing the viewer.
@@ -255,13 +218,9 @@ const downloadButton = document.getElementById('download');
 downloadButton.addEventListener('click', async () => {
   downloadButton.disabled = true;
   try {
-    const response = await fetch(`/stl?part=${encodeURIComponent(partSelect.value)}`);
+    const response = await fetch(`/stl?part=${encodeURIComponent(currentPart)}`);
     if (!response.ok) throw new Error(await response.text());
-    const link = document.createElement('a');
-    link.href = URL.createObjectURL(await response.blob());
-    link.download = response.headers.get('Content-Disposition').match(/filename="(.+)"/)[1];
-    link.click();
-    setTimeout(() => URL.revokeObjectURL(link.href)); // after the browser has started the download
+    saveBlob(await response.blob(), response.headers.get('Content-Disposition').match(/filename="(.+)"/)[1]);
   } catch (error) {
     showError(`STL download failed: ${error.message}`);
   } finally {
@@ -269,6 +228,19 @@ downloadButton.addEventListener('click', async () => {
   }
 });
 
+// The picture is the view on screen, so it needs no server round trip.
+// Named like the STL: the program's name, plus the part when there are several.
+document.getElementById('png').addEventListener('click', async () => {
+  if (!shown) return;
+  const base = shown.file.slice(shown.file.lastIndexOf('/') + 1).replace(/\.[^.]+$/, '');
+  const name = shown.partNames.length > 1 ? `${base}-${shown.part}.png` : `${base}.png`;
+  try {
+    saveBlob(await view.snapshotPNG(), name);
+  } catch (error) {
+    showError(`PNG export failed: ${error.message}`);
+  }
+});
+
 // --- Connection --------------------------------------------------------------
 
 let socket = null;
@@ -278,11 +250,6 @@ function requestPart(name) {
   if (socket?.readyState === WebSocket.OPEN) socket.send(JSON.stringify({ type: 'part', name }));
 }
 
-partSelect.addEventListener('change', () => {
-  storage.set(`cadcode:part:${fileKey}`, partSelect.value);
-  requestPart(partSelect.value);
-});
-
 function connect() {
   socket = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/`);
   socket.binaryType = 'arraybuffer';
@@ -307,6 +274,7 @@ function connect() {
       fileEl.querySelector('.dir').textContent = header.file.slice(0, slash);
       fileEl.querySelector('.name').textContent = header.file.slice(slash);
       fileEl.title = header.file;
+      fileEl.hidden = false;
       document.title = `${header.file} · cadcode`;
     }
     showParts(header.partNames, header.part);

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "cadcode",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "scripts": {
-    "test": "node --test \"test/*.test.js\""
+    "test": "node --test \"test/*.test.js\"",
+    "site": "node site/build.js"
   },
   "keywords": [
     "cad",
@@ -32,5 +33,10 @@
   ],
   "engines": {
     "node": ">=20"
-  }
+  },
+  "devDependencies": {
+    "monaco-editor": "0.57.0",
+    "typescript": "6.0.3"
+  },
+  "homepage": "https://jwo1f.github.io/cadcode/"
 }

package/src/core/evaluate.js

@@ -0,0 +1,59 @@
+// Turns a loaded program module into the solids of one part. Free of Node APIs:
+// the CLI and dev server reach it through program.js, the site's playground directly.
+import { Solid, Shape2 } from '../lib/index.js';
+
+function flattenModel(model, partName) {
+  const solids = [];
+  const walk = (item) => {
+    if (Array.isArray(item)) item.forEach(walk);
+    else if (item instanceof Solid) solids.push(item);
+    else if (item instanceof Shape2) throw new Error(`Part "${partName}" contains a 2D shape; extrude it to make a solid`);
+    else if (item) throw new Error(`Part "${partName}" contains ${typeof item} ${String(item)}, not a solid`);
+  };
+  walk(model);
+  return solids;
+}
+
+const isModel = (value) => value instanceof Solid || value instanceof Shape2 || Array.isArray(value);
+
+/**
+ * Evaluates one part of a program module.
+ *
+ * A program `export default`s either a model (a solid or an array of solids), or an
+ * object of named parts whose values are models or functions returning models, or a
+ * function of `params` returning either. `export const params = {...}` declares the
+ * parameters that `overrides` may change.
+ *
+ * `fallbackToFirst` shows the first part instead of failing when `part` no longer
+ * exists — the dev server uses it so renaming a part doesn't blank the preview.
+ * `ignoreUnknown` skips overrides of parameters the program no longer declares,
+ * instead of failing — the dev server keeps the browser's values across edits.
+ *
+ * @param {{ default?: unknown, params?: Record<string, unknown> }} mod
+ * @param {{ part?: string, overrides?: Record<string, unknown>, fallbackToFirst?: boolean, ignoreUnknown?: boolean }} [options]
+ * @returns the part's solids, the part names, the params it ran with and the declared ones (`declared`)
+ */
+export async function evaluateModule(mod, { part, overrides = {}, fallbackToFirst = false, ignoreUnknown = false } = {}) {
+  if (mod.default === undefined) throw new Error('The program has no `export default`');
+
+  const declared = mod.params ?? {};
+  const known = {};
+  for (const [key, value] of Object.entries(overrides)) {
+    if (key in declared) known[key] = value;
+    else if (!ignoreUnknown) throw new Error(`Unknown parameter "${key}". Declared: ${Object.keys(declared).join(', ') || 'none'}`);
+  }
+  const params = { ...declared, ...known };
+
+  const value = typeof mod.default === 'function' ? await mod.default(params) : mod.default;
+  const parts = isModel(value) ? { default: value } : value;
+  if (!parts || typeof parts !== 'object') throw new Error('The default export must be a model, an object of parts, or a function returning one');
+
+  const partNames = Object.keys(parts);
+  if (partNames.length === 0) throw new Error('The program defines no parts');
+  const name = part && partNames.includes(part) ? part : partNames[0];
+  if (part && part !== name && !fallbackToFirst) throw new Error(`No part "${part}". Parts: ${partNames.join(', ')}`);
+
+  const entry = parts[name];
+  const model = typeof entry === 'function' ? await entry(params) : entry;
+  return { partNames, part: name, params, declared, solids: flattenModel(model, name) };
+}

package/src/core/program.js

@@ -3,7 +3,7 @@ import path from 'node:path';
 import fs from 'node:fs';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import * as esbuild from 'esbuild';
-import { Solid, Shape2 } from '../lib/index.js';
+import { evaluateModule } from './evaluate.js';
 
 const LIB_URL = pathToFileURL(fileURLToPath(new URL('../lib/index.js', import.meta.url))).href;
 
@@ -46,57 +46,17 @@ export async function bundleProgram(entry) {
   return options.outfile;
 }
 
-function flattenModel(model, partName) {
-  const solids = [];
-  const walk = (item) => {
-    if (Array.isArray(item)) item.forEach(walk);
-    else if (item instanceof Solid) solids.push(item);
-    else if (item instanceof Shape2) throw new Error(`Part "${partName}" contains a 2D shape; extrude it to make a solid`);
-    else if (item) throw new Error(`Part "${partName}" contains ${typeof item} ${String(item)}, not a solid`);
-  };
-  walk(model);
-  return solids;
-}
-
-const isModel = (value) => value instanceof Solid || value instanceof Shape2 || Array.isArray(value);
-
 /**
- * Loads a bundled program and evaluates one part.
- *
- * A program `export default`s either a model (a solid or an array of solids), or an
- * object of named parts whose values are models or functions returning models, or a
- * function of `params` returning either. `export const params = {...}` declares the
- * parameters that `overrides` may change.
+ * Loads a bundled program and evaluates one part; see evaluateModule.
  *
- * @param {string} bundlePath
  * `fallbackToFirst` shows the first part instead of failing when `part` no longer
  * exists — the dev server uses it so renaming a part doesn't blank the preview.
  *
  * @param {string} bundlePath
  * @param {{ part?: string, overrides?: Record<string, unknown>, fallbackToFirst?: boolean }} [options]
  */
-export async function evaluateProgram(bundlePath, { part, overrides = {}, fallbackToFirst = false } = {}) {
-  const mod = await import(`${pathToFileURL(bundlePath).href}?t=${Date.now()}`);
-  if (mod.default === undefined) throw new Error('The program has no `export default`');
-
-  const declared = mod.params ?? {};
-  for (const key of Object.keys(overrides)) {
-    if (!(key in declared)) throw new Error(`Unknown parameter "${key}". Declared: ${Object.keys(declared).join(', ') || 'none'}`);
-  }
-  const params = { ...declared, ...overrides };
-
-  const value = typeof mod.default === 'function' ? await mod.default(params) : mod.default;
-  const parts = isModel(value) ? { default: value } : value;
-  if (!parts || typeof parts !== 'object') throw new Error('The default export must be a model, an object of parts, or a function returning one');
-
-  const partNames = Object.keys(parts);
-  if (partNames.length === 0) throw new Error('The program defines no parts');
-  const name = part && partNames.includes(part) ? part : partNames[0];
-  if (part && part !== name && !fallbackToFirst) throw new Error(`No part "${part}". Parts: ${partNames.join(', ')}`);
-
-  const entry = parts[name];
-  const model = typeof entry === 'function' ? await entry(params) : entry;
-  return { partNames, part: name, params, solids: flattenModel(model, name) };
+export async function evaluateProgram(bundlePath, options) {
+  return evaluateModule(await import(`${pathToFileURL(bundlePath).href}?t=${Date.now()}`), options);
 }
 
 /** Parses `key=value` overrides; values are JSON when they parse, strings otherwise. */

package/src/dev/server.js

@@ -9,10 +9,9 @@ import { WebSocketServer } from 'ws';
 import { bundleOptions } from '../core/program.js';
 
 const CLIENT_DIR = fileURLToPath(new URL('../../client/', import.meta.url));
-const THREE_DIR = path.resolve(path.dirname(fileURLToPath(import.meta.resolve('three'))), '..');
 const WORKER_URL = new URL('./worker.js', import.meta.url);
 
-const MIME = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json' };
+const MIME = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.svg': 'image/svg+xml' };
 
 /** Serves a file from `root`, refusing paths that escape it. */
 function serveFile(res, root, relative) {
@@ -119,6 +118,12 @@ export async function startDevServer({ file, port, host, part, overrides, open }
     worker.once('error', (error) => fail(error.message));
   }
 
+  // The viewer's scene runs in a worker, where an import map cannot resolve 'three';
+  // it is bundled once, three.js included, and served from memory.
+  const renderWorker = (
+    await esbuild.build({ entryPoints: [path.join(CLIENT_DIR, 'render-worker.js')], bundle: true, format: 'esm', write: false, logLevel: 'warning' })
+  ).outputFiles[0].contents;
+
   const options = bundleOptions(file);
   const ctx = await esbuild.context({
     ...options,
@@ -145,7 +150,7 @@ export async function startDevServer({ file, port, host, part, overrides, open }
     const url = new URL(req.url ?? '/', 'http://localhost');
     if (url.pathname === '/') return serveFile(res, CLIENT_DIR, 'index.html');
     if (url.pathname === '/stl') return downloadSTL(res, url.searchParams.get('part') ?? state.part);
-    if (url.pathname.startsWith('/vendor/three/')) return serveFile(res, THREE_DIR, url.pathname.slice('/vendor/three/'.length));
+    if (url.pathname === '/render-worker.js') return void res.writeHead(200, { 'Content-Type': 'text/javascript', 'Cache-Control': 'no-cache' }).end(renderWorker);
     serveFile(res, CLIENT_DIR, url.pathname.slice(1));
   });
 

package/src/dev/worker.js

@@ -23,7 +23,8 @@ for (const level of ['log', 'info', 'warn', 'error']) {
 const { bundle, part, overrides, output } = workerData;
 const started = performance.now();
 try {
-  const result = await evaluateProgram(bundle, { part, overrides, fallbackToFirst: output !== 'stl' });
+  // Overrides of parameters the program has dropped are skipped; the server prunes them.
+  const result = await evaluateProgram(bundle, { part, overrides, fallbackToFirst: output !== 'stl', ignoreUnknown: true });
   if (output === 'stl') {
     const stl = toSTL(result.solids);
     parentPort.postMessage({ ok: true, partNames: result.partNames, part: result.part, stl }, [stl.buffer]);
@@ -34,6 +35,8 @@ try {
         ok: true,
         partNames: result.partNames,
         part: result.part,
+        // Plain data only: the browser edits these as numbers, strings, booleans and JSON.
+        declared: JSON.parse(JSON.stringify(result.declared)),
         groups,
         logs,
         ms: Math.round(performance.now() - started),

package/src/export/stl.js

@@ -3,14 +3,16 @@ import { mergedSolid } from '../core/mesh.js';
 /**
  * Binary STL of the part's solids merged into one.
  * @param {import('../lib/shapes.js').Solid[]} solids
- * @returns {Buffer}
+ * Plain typed arrays rather than a Buffer, so it also runs in the browser.
+ * @returns {Uint8Array}
  */
 export function toSTL(solids) {
   const { numProp, vertProperties, triVerts } = mergedSolid(solids).manifold.getMesh();
   const triCount = triVerts.length / 3;
-  const buf = Buffer.alloc(84 + triCount * 50);
-  buf.write('cadcode', 0, 'ascii');
-  buf.writeUInt32LE(triCount, 80);
+  const bytes = new Uint8Array(84 + triCount * 50);
+  bytes.set(new TextEncoder().encode('cadcode'));
+  const view = new DataView(bytes.buffer);
+  view.setUint32(80, triCount, true);
 
   const p = (v, k) => vertProperties[v * numProp + k];
   let o = 84;
@@ -20,9 +22,9 @@ export function toSTL(solids) {
     const w = [p(c, 0) - p(a, 0), p(c, 1) - p(a, 1), p(c, 2) - p(a, 2)];
     const n = [u[1] * w[2] - u[2] * w[1], u[2] * w[0] - u[0] * w[2], u[0] * w[1] - u[1] * w[0]];
     const len = Math.hypot(...n) || 1;
-    for (const value of [n[0] / len, n[1] / len, n[2] / len]) (buf.writeFloatLE(value, o), (o += 4));
-    for (const v of [a, b, c]) for (let k = 0; k < 3; k++) (buf.writeFloatLE(p(v, k), o), (o += 4));
+    for (const value of [n[0] / len, n[1] / len, n[2] / len]) (view.setFloat32(o, value, true), (o += 4));
+    for (const v of [a, b, c]) for (let k = 0; k < 3; k++) (view.setFloat32(o, p(v, k), true), (o += 4));
     o += 2; // attribute byte count
   }
-  return buf;
+  return bytes;
 }