partforge 0.48.0 → 0.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "partforge",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "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/framework/app.css

@@ -53,7 +53,10 @@ canvas { display: block; }
    sits at the rail's own padding, so each slider gains the ~22px the old box
    border + padding used to take from both sides. */
 .section {
-  padding: 11px var(--pf-rail-pad);
+  /* No vertical padding at the top: the header band (below) owns the space
+     around the title so a section's title sits at the same offset whether
+     the section is open or collapsed — toggling must not move it. */
+  padding: 0 var(--pf-rail-pad) 11px;
 }
 /* Divider BETWEEN visible sections. `~` walks all preceding siblings, and a
    relevance-hidden section (.section-hidden, display:none) fails the :not(),
@@ -65,28 +68,70 @@ canvas { display: block; }
 .section:not(.section-hidden):not(.hidden) ~ .section:not(.section-hidden):not(.hidden) {
   border-top: 1px solid var(--pf-border);
 }
-.sec-header { display: flex; align-items: center; gap: 4px; }
+/* Section disclosure header: the whole row is the click target (render.js
+   puts the toggle listener on the header; the title button's click bubbles
+   to it and the ⓘ stops propagation). Full-bleed: negative margins cancel
+   the rail padding so the hover band and the collapsed rules run edge to
+   edge while the text keeps the rail's alignment. Row order: title (flex:1),
+   ⓘ, chevron on the far right. */
+.sec-header {
+  display: flex; align-items: center; gap: 6px;
+  margin: 0 calc(-1 * var(--pf-rail-pad)) 6px;
+  /* The same 13px band open or collapsed: the title never moves on toggle
+     and the hover target keeps one size. */
+  padding: 13px var(--pf-rail-pad);
+  cursor: pointer;
+}
+.sec-header:hover { background: var(--pf-surface-2); }
 .sec-title {
-  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
-  width: 100%; margin: 0 0 9px; padding: 0; border: 0; background: transparent; cursor: pointer;
+  flex: 1; display: flex; align-items: center;
+  margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
   text-align: left;
-  font-family: var(--pf-mono); font-size: 10px; font-weight: 600;
-  letter-spacing: 0.14em; text-transform: uppercase; color: var(--pf-muted-2);
-}
-.sec-title:hover { color: var(--pf-text-2); }
-.sec-title .chev { display: inline-block; transition: transform 0.15s ease; }
-.sec-title .chev::before { content: "▾"; }
-.sec-title[aria-expanded="false"] .chev { transform: rotate(-90deg); }
+  font-family: var(--pf-mono); font-size: 12px; font-weight: 600;
+  letter-spacing: 0.12em; text-transform: uppercase; color: var(--pf-text-2);
+}
+.sec-header:hover .sec-title { color: var(--pf-text); }
+/* Disclosure triangle: closes the header row on the right, after the ⓘ.
+   Glyph via ::before — the span must stay text-free (tests match .sec-title
+   by exact textContent). Rotation keys off the collapsed class because the
+   chevron sits beside, not inside, the aria-carrying button. */
+/* A real equilateral triangle (clip-path, not a font glyph): the box is
+   exactly the triangle's bounds, so rotating about the center is wobble-free
+   — a font's ▾ sits off-center in its em box and lurches when rotated.
+   Height = width × √3/2 keeps it equilateral. */
+.sec-header .chev, .adv-header .chev {
+  display: inline-block; width: 8px; height: 7px; color: var(--pf-muted-2);
+  transition: transform 0.15s ease;
+}
+.sec-header .chev::before, .adv-header .chev::before {
+  content: ""; display: block; width: 100%; height: 100%;
+  background: currentColor;
+  clip-path: polygon(50% 100%, 0 0, 100% 0);
+}
+.section.collapsed > .sec-header .chev, .adv-wrap.collapsed > .adv-header .chev { transform: rotate(-90deg); }
+/* Collapsed section: the header band sits flush between the section's top
+   divider and its own bottom rule — text vertically centered, hover and
+   click covering the entire band. The -1px bottom margin overlaps this rule
+   with the next section's border-top so they read as one line. */
+.section.collapsed {
+  padding-bottom: 0;
+  border-bottom: 1px solid var(--pf-border); margin-bottom: -1px;
+}
+.section.collapsed .sec-header { margin-bottom: 0; }
 .sec-body.hidden { display: none; }
-select.preset {
-  width: 100%; background: var(--pf-input-bg); color: var(--pf-text-2);
-  border: 1px solid var(--pf-border); border-radius: var(--pf-radius-control); padding: 7px 9px;
-  font-family: var(--pf-mono); font-size: 11px;
-}
-select.select-input {
+/* Native menulist arrows hug the right border and ignore padding, so the
+   panel's selects draw their own — the header chevrons' equilateral triangle
+   as a data-URI, inset 10px from the edge. Fixed slate fill: url() can't
+   read theme variables, and this shade reads on both themes. */
+select.preset, select.select-input {
   width: 100%; background: var(--pf-input-bg); color: var(--pf-text-2);
-  border: 1px solid var(--pf-border); border-radius: var(--pf-radius-control); padding: 7px 9px;
+  border: 1px solid var(--pf-border); border-radius: var(--pf-radius-control);
+  padding: 7px 26px 7px 9px;
   font-family: var(--pf-mono); font-size: 11px;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Cpolygon points='0,0 8,0 4,7' fill='%238b8b94'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
 }
 .feat { display: flex; align-items: center; gap: 8px; margin: 6px 0;
   color: var(--pf-text-2); cursor: pointer; }
@@ -97,12 +142,35 @@ select.select-input {
    `.sec-body` (rules above); everything else carrying `.hidden` inside the
    panel is a `when` that evaluated false. */
 .section.hidden, .slider.hidden, .feat.hidden, select.preset.hidden { display: none; }
+/* Inner fold header: same row anatomy as .sec-header (title left, chevron
+   right, whole row clickable) at the subordinate scale. Spans the fold's own
+   width — not full-bleed — so it never crosses a feat-group's left border;
+   small negative margins let the hover band breathe past the text without
+   moving it. */
+.adv-header {
+  display: flex; align-items: center; gap: 6px;
+  margin: 8px -6px 0; padding: 8px 6px;
+  /* Transparent borders reserve the collapsed rules' pixels so toggling
+     swaps only their color — the title never moves and the hover target
+     keeps one size, matching the section-header treatment. */
+  border-top: 1px solid transparent; border-bottom: 1px solid transparent;
+  border-radius: 6px; cursor: pointer;
+}
+.adv-header:hover { background: var(--pf-surface-2); }
 .adv-toggle {
-  margin-top: 8px; padding: 4px 0; width: 100%; border: 0; border-radius: 6px;
+  flex: 1; margin: 0; padding: 0; border: 0;
   background: transparent; color: var(--pf-muted); cursor: pointer;
-  font-family: var(--pf-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; text-align: left;
+  font-family: var(--pf-mono); font-size: 12px; font-weight: 600;
+  letter-spacing: 0.08em; text-transform: uppercase; text-align: left;
+}
+.adv-header:hover .adv-toggle { color: var(--pf-muted-2); }
+/* Collapsed fold: the reserved borders take color — rules above and below,
+   text vertically centered between them (the section-band treatment at fold
+   scale). Square corners while the rules show. */
+.adv-wrap.collapsed > .adv-header {
+  border-top-color: var(--pf-border); border-bottom-color: var(--pf-border);
+  border-radius: 0;
 }
-.adv-toggle:hover { color: var(--pf-muted-2); }
 .adv.hidden { display: none; }
 .adv { margin-top: 4px; }
 

package/src/framework/controls.js

@@ -10,6 +10,6 @@
 // This file stays at its path because animation-controls.js imports the popover
 // helpers from it, and because it is the documented import site.
 export { buildControls } from "./panel/render.js";
-export { popoverTop, createInfoPopover, attachInfo } from "./panel/info.js";
+export { popoverTop, popoverLeft, createInfoPopover, attachInfo } from "./panel/info.js";
 export { clampToRange } from "./panel/widgets/numeric.js";
 export { visibleAdvanced, visibleFeatures, visibleToggles, sectionRenders } from "./panel/legacy.js";

package/src/framework/mount.js

@@ -139,10 +139,16 @@ function createCleanupStack() {
 // onViewChange fires once synchronously during mount with the initial resolved
 // view (before ready), then again on every subsequent view change (user click
 // or a programmatic setView) — always the new view name.
+// onParamsCommit({ changed, params })   // the user FINISHED editing a panel control (slider
+//                                         // released, box committed, checkbox ticked, preset
+//                                         // applied): `changed` lists the keys written, `params`
+//                                         // is a snapshot copy. Never fired by setParams or
+//                                         // animation playback — hosts call setParams from their
+//                                         // own undo/reset, and firing here would loop.
 // Every `elements` entry defaults to the legacy global-ID lookup (below), resolved
 // exactly once here — submodules take element refs and never query the document.
 // `container`/`controls` remain as deprecated aliases for elements.viewer/.controls.
-export function mount(part, { createWorker, elements = {}, onBuild, onPick, onDownload, onViewChange,
+export function mount(part, { createWorker, elements = {}, onBuild, onPick, onDownload, onViewChange, onParamsCommit,
                               container: legacyContainer, controls: legacyControls } = {}) {
   // --- element resolution (the only getElementById calls in the framework, save the ?pickserver client's optional #viewbar lookup) ----
   const byId = (id) => document.getElementById(id);
@@ -487,7 +493,9 @@ export function mount(part, { createWorker, elements = {}, onBuild, onPick, onDo
     const panel = buildControls(els.controls, part.parameters, params, () => {
       animCtl?.notifyUserEdit();
       onParamChange();
-    });
+    }, onParamsCommit
+      ? (changed) => onParamsCommit({ changed, params: { ...params } })
+      : undefined);
     cleanup.defer(() => panel.dispose());
     const updateRelevance = () => {
       // A throwing derive() must not break every slider drag — mount's pick

package/src/framework/panel/info.js

@@ -20,6 +20,15 @@ export function popoverTop({ glyphTop, glyphBottom, popHeight, viewportHeight })
   return Math.max(8, glyphTop - 6 - popHeight);
 }
 
+// Popover left edge: aligned 8px left of the glyph when that fits, pulled
+// left so the popover's right edge keeps a 10px margin from the viewport
+// edge, and never past a 10px margin on the left (left margin wins when both
+// would be violated). Pure, for direct unit testing — happy-dom reports zero
+// layout metrics, same as popoverTop above.
+export function popoverLeft({ glyphLeft, popWidth, viewportWidth }) {
+  return Math.max(10, Math.min(glyphLeft - 8, viewportWidth - 10 - popWidth));
+}
+
 // One popover element per panel, shared by all its glyphs (only one open at a
 // time). Document-level dismiss listeners are registered per panel and removed
 // by panel.dispose().
@@ -51,7 +60,7 @@ export function createInfoPopover() {
       glyph.setAttribute("aria-expanded", "true");
       const r = glyph.getBoundingClientRect();
       pop.style.top = `${popoverTop({ glyphTop: r.top, glyphBottom: r.bottom, popHeight: pop.offsetHeight, viewportHeight: window.innerHeight })}px`;
-      pop.style.left = `${Math.max(8, r.left - 8)}px`;
+      pop.style.left = `${popoverLeft({ glyphLeft: r.left, popWidth: pop.offsetWidth, viewportWidth: window.innerWidth })}px`;
     },
     dispose() {
       document.removeEventListener("click", onDocClick);

package/src/framework/panel/render.js

@@ -24,7 +24,7 @@ function indexNodes(nodes, map) {
   }
 }
 
-export function buildControls(root, parameters, params, onDirty) {
+export function buildControls(root, parameters, params, onDirty, onCommit) {
   const info = createInfoPopover();
   const tree = buildTree(desugar(parameters));
 
@@ -38,9 +38,11 @@ export function buildControls(root, parameters, params, onDirty) {
   const lastVisible = new Map();  // id -> previous `visible`, to detect a reveal
   const lastDisabled = new Map(); // id -> previous `disabled`, to skip a no-op input pass
   // Containers that own a disclosure: sections, and titled inner groups (the
-  // legacy "Advanced" fold). `label` is set only for the inner groups, whose
-  // button text carries the ▾/▴ instead of a chevron span.
-  const disclosures = new Map(); // id -> { body, button, label }
+  // legacy "Advanced" fold). Both share the same anatomy — a header row with
+  // the aria-carrying button and a text-free chevron span — so `el` (the
+  // section element / the fold wrapper) mirrors the disclosure with a
+  // `.collapsed` class and CSS draws the closed-band affordance off that.
+  const disclosures = new Map(); // id -> { body, button, el }
   indexNodes(tree, nodeById);
   let relevant = null;
 
@@ -62,7 +64,7 @@ export function buildControls(root, parameters, params, onDirty) {
       const open = state.get(id)?.open ?? true;
       d.body.classList.toggle("hidden", !open);
       d.button.setAttribute("aria-expanded", String(open));
-      if (d.label) d.button.textContent = open ? `${d.label} ▴` : `${d.label} ▾`;
+      d.el.classList.toggle("collapsed", !open);
     }
   };
 
@@ -112,6 +114,15 @@ export function buildControls(root, parameters, params, onDirty) {
 
   const onEdit = () => { applyState(); onDirty?.(); };
 
+  // A commit = the user FINISHED an interaction (slider released, box
+  // committed, checkbox ticked, preset applied). Distinct from onDirty, which
+  // fires on every input event mid-drag. Wrapped: a throwing host handler
+  // must never break the panel.
+  const commit = (keys) => {
+    if (!onCommit) return;
+    try { onCommit(keys); } catch { /* host's problem, not the panel's */ }
+  };
+
   // --- build ---------------------------------------------------------------
   //
   // TWO DIFFERENT THINGS USE `.hidden`, and conflating them is a real bug:
@@ -136,17 +147,24 @@ export function buildControls(root, parameters, params, onDirty) {
     const wrap = el("div", "adv-wrap");
     const body = el("div", "adv hidden");   // starts closed — legacy parity
     body.id = `pf-fold-${node.id.replaceAll("/", "-")}`;
-    const toggle = el("button", "adv-toggle", `${node.title} ▾`);
+    // Same row anatomy as a section header — title button (text-free of any
+    // arrow, same exact-textContent reasoning), chevron span on the right,
+    // whole row clickable — at the fold's subordinate scale.
+    const foldHeader = el("div", "adv-header");
+    const toggle = el("button", "adv-toggle");
+    toggle.type = "button";
+    toggle.append(el("span", "adv-name", node.title));
     toggle.setAttribute("aria-controls", body.id);
-    toggle.addEventListener("click", () => {
+    foldHeader.append(toggle, el("span", "chev"));
+    foldHeader.addEventListener("click", () => {
       const nowHidden = body.classList.toggle("hidden");
-      toggle.textContent = nowHidden ? `${node.title} ▾` : `${node.title} ▴`;
       toggle.setAttribute("aria-expanded", String(!nowHidden));
+      wrap.classList.toggle("collapsed", nowHidden);
     });
     for (const child of node.children) renderNode(child, body, sectionCtx);
-    wrap.append(toggle, body);
+    wrap.append(foldHeader, body);
     nodeEls.set(node.id, wrap);             // conditions act on the wrapper
-    disclosures.set(node.id, { body, button: toggle, label: node.title });
+    disclosures.set(node.id, { body, button: toggle, el: wrap });
     container.append(wrap);
   }
 
@@ -173,6 +191,7 @@ export function buildControls(root, parameters, params, onDirty) {
       Object.assign(params, bundle);
       for (const { key, sync } of rawSyncs.get(sectionCtx.id)) if (key in params) sync();
       onEdit();
+      commit(Object.keys(bundle));
     });
     // The section's controls need a handle on the picker to drop it to Custom
     // when one of them is edited. First picker in the section wins.
@@ -203,6 +222,7 @@ export function buildControls(root, parameters, params, onDirty) {
     };
     const widget = factory(node, params, {
       onChange: () => { markCustom(); onEdit(); },
+      onCommit: () => commit([node.key]),
       info,
     });
     nodeEls.set(node.id, widget.el);
@@ -233,12 +253,14 @@ export function buildControls(root, parameters, params, onDirty) {
     // because sectionByTitle-style lookups match `.sec-title` by exact
     // textContent === title (controls.test.js:210), and a text chevron here
     // would break that match.
-    title.append(el("span", "sec-name", section.title ?? ""), el("span", "chev"));
+    title.append(el("span", "sec-name", section.title ?? ""));
     header.append(title);
+    // Row order: title (flex:1), then ⓘ, then the chevron on the far right.
     // The ⓘ is a SIBLING of the button, never a child: attachInfo appends a
     // <button>, and a button nested in a button is invalid HTML that never
     // receives clicks.
     attachInfo(header, section.description, info);
+    header.append(el("span", "chev"));
     secEl.append(header);
 
     const body = el("div", "sec-body");
@@ -246,11 +268,15 @@ export function buildControls(root, parameters, params, onDirty) {
     title.setAttribute("aria-controls", body.id);
     secEl.append(body);
 
-    title.addEventListener("click", () => {
+    // The whole header row toggles: the title button's own click bubbles up
+    // here, the chevron and the empty row space hit it directly, and the ⓘ
+    // stops propagation in attachInfo. aria state stays on the title button.
+    header.addEventListener("click", () => {
       const nowHidden = body.classList.toggle("hidden");
       title.setAttribute("aria-expanded", String(!nowHidden));
+      secEl.classList.toggle("collapsed", nowHidden);
     });
-    disclosures.set(section.id, { body, button: title, label: null });
+    disclosures.set(section.id, { body, button: title, el: secEl });
 
     // `preset` is filled in when a preset node renders. Controls read it late, so
     // one appearing after them in the children array still works.

package/src/framework/panel/widgets/checkbox.js

@@ -14,7 +14,7 @@ function el(tag, className, text) {
   return node;
 }
 
-export function makeCheckbox(node, params, { onChange, info }) {
+export function makeCheckbox(node, params, { onChange, onCommit, info }) {
   const row = el("label", "feat");
   const box = document.createElement("input");
   box.type = "checkbox";
@@ -30,6 +30,7 @@ export function makeCheckbox(node, params, { onChange, info }) {
       params[node.key] = 0;
     }
     onChange?.();
+    onCommit?.();
   });
 
   const sync = () => { box.checked = params[node.key] > 0; };

package/src/framework/panel/widgets/numeric.js

@@ -19,7 +19,7 @@ function el(tag, className, text) {
   return node;
 }
 
-export function makeNumeric(node, params, { onChange, info }) {
+export function makeNumeric(node, params, { onChange, onCommit, info }) {
   const numeric = node.type === "number";
   const wrap = el("div", "slider");
   const row = el("div", "row");
@@ -68,6 +68,7 @@ export function makeNumeric(node, params, { onChange, info }) {
       paintWarn();
       onChange?.();
     });
+    slider.addEventListener("change", () => onCommit?.());
     wrap.append(slider);
   }
 
@@ -124,6 +125,7 @@ export function makeNumeric(node, params, { onChange, info }) {
     if (slider) slider.value = log ? toPosSafe(v) : v;
     paintWarn();
     onChange?.();
+    onCommit?.();
   });
 
   const sync = () => {

package/src/framework/panel/widgets/select.js

@@ -23,7 +23,7 @@ function labeledRow(node, info) {
   return wrap;
 }
 
-export function makeSelect(node, params, { onChange, info }) {
+export function makeSelect(node, params, { onChange, onCommit, info }) {
   const wrap = labeledRow(node, info);
   const opts = normalizeOptions(node.options);
   const byString = new Map(opts.map((o) => [String(o.value), o.value]));
@@ -40,13 +40,14 @@ export function makeSelect(node, params, { onChange, info }) {
   select.addEventListener("change", () => {
     params[node.key] = byString.get(select.value);
     onChange?.();
+    onCommit?.();
   });
   wrap.append(select);
   const sync = () => { select.value = String(params[node.key]); };
   return { el: wrap, sync };
 }
 
-export function makeRadio(node, params, { onChange, info }) {
+export function makeRadio(node, params, { onChange, onCommit, info }) {
   const wrap = labeledRow(node, info);
   const opts = normalizeOptions(node.options);
   const seg = el("div", "seg");
@@ -58,6 +59,7 @@ export function makeRadio(node, params, { onChange, info }) {
       params[node.key] = o.value;
       paint();
       onChange?.();
+      onCommit?.();
     });
     seg.append(b);
     return { b, value: o.value };

package/src/framework/panel/widgets/text.js

@@ -9,7 +9,7 @@ function el(tag, className, text) {
   return node;
 }
 
-export function makeText(node, params, { onChange, info }) {
+export function makeText(node, params, { onChange, onCommit, info }) {
   const multiline = node.type === "textarea";
   const wrap = el("div", "slider");
   const row = el("div", "row");
@@ -26,6 +26,7 @@ export function makeText(node, params, { onChange, info }) {
     params[node.key] = field.value;
     onChange?.();
   });
+  field.addEventListener("change", () => onCommit?.());
   wrap.append(field);
 
   const sync = () => { field.value = String(params[node.key] ?? ""); };