partforge 0.6.0 → 0.6.1

package/README.md

@@ -47,8 +47,11 @@ boots with no errors. Needs Playwright: `npm i -D playwright && npx playwright i
 contract, the geometry kernel API, the parameter schema, app wiring, testing, and
 gotchas. See **Designing the control panel** in that guide for how to write descriptions,
 hide internal params, and keep the interface simple while staying deeply adjustable.
-`src/parts/demo.js` is a minimal worked example; run `npm run dev` and open
-`/demo.html` to see it live.
+`src/parts/demo.js` is a minimal worked example.
+
+**Live showcase:** https://scottsykora.github.io/partforge/ — the landing gallery links
+three live example apps (Faceted Planter, Spacer, Filleted Box), auto-deployed from `main`.
+Locally, `npm run dev` then open `/demo.html`, `/planter.html`, or `/filleted-box.html`.
 
 - **Agent clarification (`request-a-pick`):** an external tool can ask the user to click
   geometry and get the `Selection` back — serve with `?pickserver`, drive with

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "partforge",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Turn a declarative part definition into a parametric-CAD web app (three.js + Manifold/Replicad). Requires a Vite-based consumer.",
   "type": "module",
   "license": "MIT",

package/src/app-planter.js

@@ -0,0 +1,10 @@
+import planterPart from "./parts/planter.js";
+import { mount } from "./framework/index.js";
+
+// Dev-only example app for the faceted planter part. Identical wiring to app-demo.js —
+// only the imported definition and the worker entry differ per part. `npm run dev`,
+// then open /planter.html.
+mount(planterPart, {
+  createWorker: (name) =>
+    new Worker(new URL("./planter-worker.js", import.meta.url), { type: "module", name }),
+});

package/src/framework/app.css

@@ -8,14 +8,15 @@
   --bg: #15181d; --surface: #1f242c; --surface-2: #20262e; --border: #2c333d;
   --text: #d6dbe2; --text-strong: #e7ebf1; --text-2: #cdd4dd;
   --muted: #7d8794; --muted-2: #aab2bd; --status: #8b94a0; --hint: #6b7480;
-  --accent: #3b82f6; --on-accent: #fff; --input-bg: #161a20; --err: #f8746c;
+  --accent: #3f7bf0; --accent-soft: #26314a; --on-accent: #fff; --input-bg: #161a20; --err: #f8746c;
+  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
 }
 :root[data-theme="light"] {
   color-scheme: light;
   --bg: #eef1f5; --surface: #ffffff; --surface-2: #f4f6f9; --border: #d4dae2;
   --text: #2b333d; --text-strong: #1a2129; --text-2: #3a434e;
   --muted: #6b7480; --muted-2: #59636f; --status: #6b7480; --hint: #8a93a0;
-  --accent: #3b82f6; --on-accent: #fff; --input-bg: #ffffff; --err: #d8453d;
+  --accent: #1f5bd6; --accent-soft: #e6edfc; --on-accent: #fff; --input-bg: #ffffff; --err: #d8453d;
 }
 * { box-sizing: border-box; }
 html, body { margin: 0; height: 100%; overflow: hidden;
@@ -24,59 +25,86 @@ html, body { margin: 0; height: 100%; overflow: hidden;
 canvas { display: block; }
 
 #panel {
-  position: fixed; top: 12px; left: 12px; width: 252px;
+  position: fixed; top: 12px; left: 12px; width: 256px;
   max-height: calc(100vh - 24px); overflow-y: auto; z-index: 10;
   background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
   padding: 14px; color: var(--text); box-shadow: 0 6px 24px rgba(0,0,0,.35);
 }
-#panel h1 { font-size: 14px; margin: 0 0 2px; }
-#panel .sub { color: var(--muted); font-size: 11px; margin: 0 0 12px; }
+#panel h1 { font-size: 14px; margin: 0 0 2px; color: var(--text-strong); letter-spacing: -0.01em; }
+#panel .sub {
+  font-family: var(--mono); color: var(--muted); font-size: 10px;
+  letter-spacing: 0.04em; text-transform: uppercase;
+  margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
+}
 
 .seg { display: flex; gap: 4px; margin-bottom: 12px; }
 .seg button {
   flex: 1; padding: 7px 0; border: 1px solid var(--border); border-radius: 7px;
-  background: var(--surface-2); color: var(--muted-2); cursor: pointer; font-size: 12px;
+  background: var(--surface-2); color: var(--muted-2); cursor: pointer;
+  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em;
 }
 .seg button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
 
 .section {
-  border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px;
+  border: 1px solid var(--border); border-radius: 8px; padding: 10px;
   margin-bottom: 8px; background: var(--surface-2);
 }
-.sec-title { font-weight: 600; color: var(--text-strong); margin-bottom: 7px; }
+.sec-title {
+  font-family: var(--mono); font-size: 10px; font-weight: 600;
+  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 9px;
+}
 select.preset {
   width: 100%; background: var(--input-bg); color: var(--text-2);
-  border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; font-size: 11px;
+  border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px;
+  font-family: var(--mono); font-size: 11px;
 }
 .feat { display: flex; align-items: center; gap: 8px; margin: 6px 0;
   color: var(--text-2); cursor: pointer; }
-.feat input { cursor: pointer; }
-.feat-group { margin: 2px 0 8px; padding-left: 9px; border-left: 2px solid var(--border); }
+.feat input { cursor: pointer; accent-color: var(--accent); }
+.feat-group { margin: 2px 0 8px; padding-left: 10px; border-left: 2px solid var(--border); }
 .feat-group.hidden { display: none; }
 .adv-toggle {
-  margin-top: 8px; padding: 3px 0; width: 100%; border: 0; border-radius: 5px;
-  background: transparent; color: var(--muted); cursor: pointer; font-size: 11px;
-  text-align: left;
+  margin-top: 8px; padding: 4px 0; width: 100%; border: 0; border-radius: 5px;
+  background: transparent; color: var(--muted); cursor: pointer;
+  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; text-align: left;
 }
 .adv-toggle:hover { color: var(--muted-2); }
 .adv.hidden { display: none; }
 .adv { margin-top: 4px; }
 
-.slider { margin: 7px 0; }
+.slider { margin: 9px 0; }
 .row { display: flex; justify-content: space-between; align-items: center;
-  margin: 0 0 3px; gap: 8px; }
-.row label { color: var(--muted-2); }
+  margin: 0 0 4px; gap: 8px; }
+.row label { font-family: var(--mono); font-size: 11px; color: var(--muted-2); letter-spacing: 0.01em; }
 .row .val { display: flex; align-items: baseline; gap: 4px; flex: none; }
 .row .num {
-  width: 52px; text-align: right; font: inherit; font-variant-numeric: tabular-nums;
+  width: 54px; text-align: right; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
   background: var(--input-bg); color: var(--text-strong);
-  border: 1px solid var(--border); border-radius: 5px; padding: 2px 5px;
+  border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px;
 }
-.row .num:focus { outline: none; border-color: var(--accent); }
+.row .num:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 .row .num::-webkit-outer-spin-button, .row .num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 .row .num { -moz-appearance: textfield; }
-.row .unit { color: var(--muted); font-size: 11px; }
-input[type="range"] { width: 100%; }
+.row .unit { font-family: var(--mono); color: var(--muted); font-size: 10px; }
+
+/* crafted range slider — hairline track + CAD-blue handle (the panel's signature control) */
+input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer; }
+input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: var(--border); }
+input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: var(--border); }
+input[type="range"]::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--accent); }
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5.5px;
+  border-radius: 50%; background: var(--accent); border: 2px solid var(--surface-2); box-shadow: 0 0 0 1px var(--accent);
+  transition: box-shadow .12s ease;
+}
+input[type="range"]::-moz-range-thumb {
+  width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
+  border: 2px solid var(--surface-2); box-shadow: 0 0 0 1px var(--accent);
+}
+input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--accent-soft); }
+input[type="range"]:focus-visible { outline: none; }
+input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--accent-soft); }
+input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px var(--accent-soft); }
 
 button.action {
   width: 100%; margin-top: 8px; padding: 9px; border: 0; border-radius: 7px;
@@ -85,19 +113,29 @@ button.action {
 button.ghost { background: var(--border); color: var(--text-2); font-weight: 500; }
 button.action:disabled { opacity: .5; cursor: default; }
 
-.dl { margin-top: 12px; }
-.dl-head { font-weight: 600; color: var(--text-strong); margin-bottom: 6px; }
+.dl { margin-top: 14px; }
+.dl-head {
+  font-family: var(--mono); font-size: 10px; font-weight: 600;
+  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 7px;
+}
 .dl-row { display: flex; gap: 6px; }
 .dl-row button {
   flex: 1; padding: 8px 0; border: 1px solid var(--border); border-radius: 7px;
-  background: var(--surface-2); color: var(--text-2); font-weight: 600;
-  font-size: 12px; cursor: pointer;
+  background: var(--surface-2); color: var(--text-2);
+  font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; cursor: pointer;
 }
 .dl-row button:hover:not(:disabled) { border-color: var(--accent); color: var(--text-strong); }
 .dl-row button:disabled { opacity: .45; cursor: default; }
-#status { margin-top: 10px; min-height: 16px; color: var(--status); font-size: 11px; }
+#status { font-family: var(--mono); margin-top: 12px; min-height: 16px; color: var(--status);
+  font-size: 11px; font-variant-numeric: tabular-nums; }
 #status.err { color: var(--err); }
-.hint { margin-top: 8px; color: var(--hint); font-size: 10px; }
+.hint { font-family: var(--mono); margin-top: 8px; color: var(--hint); font-size: 10px; letter-spacing: 0.02em; }
+
+/* keyboard focus ring shared across the panel's interactive controls */
+.seg button:focus-visible, select.preset:focus-visible, .dl-row button:focus-visible,
+button.action:focus-visible, .adv-toggle:focus-visible, #viewbar button:focus-visible {
+  outline: 2px solid var(--accent); outline-offset: 2px;
+}
 
 /* part tabs, floated top-centre over the viewport */
 #topbar {
@@ -156,6 +194,7 @@ button.action:disabled { opacity: .5; cursor: default; }
 }
 .popover[hidden] { display: none; }
 .popover img { max-width: 100%; height: auto; border-radius: 4px; }
+.popover code { font-family: var(--mono); background: var(--surface-2); padding: 0.05em 0.35em; border-radius: 4px; font-size: 0.9em; }
 .popover a { color: var(--accent); }
 .popover p:first-child { margin-top: 0; }
 .popover p:last-child { margin-bottom: 0; }
@@ -198,4 +237,4 @@ button.action:disabled { opacity: .5; cursor: default; }
 @keyframes pf-pick-in {
   from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
   to   { opacity: 1; transform: translateX(-50%) translateY(0); }
-}
+}

package/src/framework/geometry/manifold-backend.js

@@ -138,7 +138,9 @@ export function createManifoldKernel(wasm, { quality = "preview" } = {}) {
         const cs = T(CrossSection.ofPolygons([pts]));
         if (twist === 0 && scaleTop === 1) return T(cs.extrude(height));
         const nDiv = Math.max(1, Math.ceil(Math.abs(twist) / 5));
-        return T(cs.extrude(height, nDiv, twist, scaleTop));
+        // Manifold's extrude scaleTop is a Vec2 — a scalar is NOT broadcast (it scales
+        // X and drives Y to 0, squishing the top to a line). Broadcast for a uniform taper.
+        return T(cs.extrude(height, nDiv, twist, [scaleTop, scaleTop]));
       }),
     helixSweptTube: (o) => cached(h("helixSweptTube", o, tube), () => T(helixTube(wasm, { ...o, ...tube }))),
     revolve: (pts, { degrees = 360 } = {}) =>

package/src/parts/planter.js

@@ -0,0 +1,119 @@
+// Example PartDefinition — a faceted planter / cup / vase. A second worked example
+// alongside parts/demo.js (the Spacer): it shows a prism-based body (Manifold backend,
+// so it stays fast — no OCCT), per-control descriptions, presets, an optional feature
+// (drainage), a hidden internal constant (floor), and a derive() that turns raw inputs
+// into the n-gon point lists and dependent dimensions the build consumes.
+//
+// Why it's a good demo: every control has an obvious reason to touch it before
+// printing. Facets/twist are pure fun, height/diameter/taper fit it to your plant or
+// pens, the drainage hole is a real functional choice (planter vs. cup), and dropping
+// Wall below the fdm-pla 1.2 mm minimum trips partforge's min-wall warning.
+
+// A regular n-gon of circumradius R, in the XY plane, as [[x,y],…] for k.prism.
+// A small rotation seats a flat edge toward the viewer so even-sided shapes read right.
+const ngon = (R, n) => {
+  const pts = [];
+  const offset = Math.PI / n - Math.PI / 2; // flat side facing -Y
+  for (let i = 0; i < n; i++) {
+    const a = (2 * Math.PI * i) / n + offset;
+    pts.push([R * Math.cos(a), R * Math.sin(a)]);
+  }
+  return pts;
+};
+
+export default {
+  meta: { title: "Faceted Planter", units: "mm", background: 0x15181d },
+  parameters: [
+    {
+      id: "body",
+      title: "Body",
+      description:
+        "The faceted vessel. Pick a preset to start, or open **Advanced** for exact dimensions. " +
+        "**Facets** and **Twist** are pure styling; **Wall** is the one that decides whether it prints cleanly.",
+      presets: {
+        "Pen cup": { facets: 6, dia: 80, height: 100, taper: 1.0, twist: 0, drain: 0 },
+        Planter: { facets: 8, dia: 90, height: 80, taper: 0.9, twist: 0, drain: 8 },
+        Vase: { facets: 5, dia: 70, height: 150, taper: 1.12, twist: 40, drain: 0 },
+      },
+      advanced: [
+        { key: "facets", label: "Facets", min: 3, max: 12, step: 1,
+          description: "Number of flat sides around the body. Low counts read as crystalline; high counts approach a smooth cylinder." },
+        { key: "dia", label: "Diameter", unit: "mm", min: 30, max: 150, step: 1,
+          description: "Across-corners diameter at the base. Size it to the plant, pens, or shelf it has to fit." },
+        { key: "height", label: "Height", unit: "mm", min: 20, max: 200, step: 1,
+          description: "Overall height along the axis." },
+        { key: "taper", label: "Top taper", min: 0.6, max: 1.4, step: 0.02,
+          description: "Rim size relative to the base: below 1 tapers inward (planter), 1 is straight (cup), above 1 flares out (vase)." },
+        { key: "wall", label: "Wall thickness", unit: "mm", min: 0.8, max: 4, step: 0.1,
+          description: "Side-wall thickness. The fdm-pla profile wants **≥ 1.2 mm** — go thinner and partforge flags a min-wall warning." },
+        { key: "twist", label: "Twist", unit: "°", min: 0, max: 180, step: 5,
+          description: "Rotates the facets from base to rim for a spiral look. 0 keeps the facets vertical." },
+        { key: "floor", label: "Floor thickness", unit: "mm", min: 1, max: 6, step: 0.5, hidden: true,
+          description: "Internal: solid base thickness, fixed by the design. Hidden from the end user but still drives the geometry." },
+      ],
+    },
+    {
+      id: "drainage",
+      title: "Drainage",
+      description: "Optional drainage hole through the base — turn it on for a planter, off to hold water like a cup or vase.",
+      features: [
+        { label: "Drainage hole", key: "drain", on: 8,
+          description: "Drills a centered hole of this diameter through the floor.",
+          sliders: [{ key: "drain", label: "Hole diameter", unit: "mm", min: 3, max: 30, step: 1,
+            description: "Diameter of the centered drainage hole." }] },
+      ],
+    },
+  ],
+  defaults: { facets: 6, dia: 70, height: 90, taper: 1.2, wall: 1.6, twist: 30, drain: 8, floor: 3 },
+  // derive(): turn raw inputs into the n-gon point lists and dependent dimensions the
+  // build needs, sized so the wall stays even (see build()).
+  derive: (p) => {
+    const Rout = p.dia / 2;
+    // Offset the inner polygon inward by `wall` along the FACE normals, not the radius:
+    // for a regular n-gon an edge offset of `wall` shrinks the circumradius by
+    // wall / cos(π/n). This keeps the perpendicular wall = `wall` on every flat.
+    // clamp only matters if wall is set past the slider bounds via the API
+    const Rin = Math.max(Rout - p.wall / Math.cos(Math.PI / p.facets), 1);
+    return {
+      outerPts: ngon(Rout, p.facets),
+      innerPts: ngon(Rin, p.facets),
+      // Inner taper that holds the wall constant top-to-bottom even as the body flares:
+      // pick it so inner_radius(top) = outer_radius(top) − wall.
+      innerTaper: 1 + (Rout * (p.taper - 1)) / Rin,
+      drainR: (p.drain + 0.2) / 2, // nominal hole + 0.2 mm print clearance, as a radius
+    };
+  },
+  parts: {
+    planter: {
+      label: "Planter",
+      views: ["planter"],
+      export: { name: "planter" },
+      build: (k, p, d) => {
+        const body = k.prism(d.outerPts, p.height, { scaleTop: p.taper, twist: p.twist });
+        // Hollow it. The cavity is built from z=0 sharing the body's exact twist RATE and
+        // taper slope (f rescales the ~4 mm overshoot so the rates still match), so the
+        // inner and outer facets stay radially aligned at every height — the wall can't
+        // pinch when twisted. Then clip the cavity to z ≥ floor so the base stays solid.
+        const f = (p.height + 4) / p.height;
+        const cavity = k
+          .prism(d.innerPts, p.height + 4, { scaleTop: 1 + (d.innerTaper - 1) * f, twist: p.twist * f })
+          .intersect(k.box([-1e4, -1e4, p.floor], [1e4, 1e4, p.height + 10]));
+        let s = body.cut(cavity);
+        // Optional drainage hole straight through the base.
+        if (p.drain > 0) s = s.cut(k.cylinder(d.drainR, d.drainR, p.floor + 4).at([0, 0, -2]));
+        return s;
+      },
+    },
+  },
+  views: { planter: { label: "Planter" } },
+  // Self-verification (see docs/AUTHORING-PARTS.md "Self-verification"): opt into the
+  // FDM-PLA process profile (bed-fit gate + min-wall warning) and pin the design intent
+  // — one drainage hole through the base, fits the bed, no interpenetration.
+  verify: {
+    process: "fdm-pla",
+    expect: {
+      planter: { holes: 1 /* drain=8 at defaults → 1 hole; adjust if running verify with a non-default drain */, bbox: "<=[220,220,250]" },
+      _view: { overlaps: 0 } /* _view = whole-model composite (not a named part) */,
+    },
+  },
+};

package/src/planter-worker.js

@@ -0,0 +1,3 @@
+import part from "./parts/planter.js";
+import { runWorker } from "./framework/worker.js";
+runWorker(part);