partforge 0.47.0 → 0.48.0

package/src/framework/animation-controls.js

@@ -197,12 +197,16 @@ export function attachAnimationControls(viewer, part, { container, applyValues,
       bubbleWidth = chapterBubble.offsetWidth;
     }
     // Stage-relative, because the bubble lives on the stage rather than in the
-    // wrap: track the point along the timeline, then lift clear of the bar.
+    // wrap: track the point along the timeline, then lift clear of the bar —
+    // the BAR's top, not the wrap's. The touch layout wraps the bar into rows
+    // with the timeline on the lower one, so "above the wrap" would sit the
+    // bubble on the chooser row. checkTransportTargets pins this.
     const wrapRect = scrubWrap.getBoundingClientRect();
+    const barRect = bar.getBoundingClientRect();
     const stageRect = container.getBoundingClientRect();
     chapterBubble.style.left =
       `${wrapRect.left - stageRect.left + clampBubbleX(f, wrapRect.width, bubbleWidth)}px`;
-    chapterBubble.style.bottom = `${stageRect.bottom - wrapRect.top + 8}px`;
+    chapterBubble.style.bottom = `${stageRect.bottom - barRect.top + 8}px`;
     chapterBubble.classList.add("pf-show");
     clearTimeout(bubbleFadeTimer);
     bubbleFadeTimer = 0;

package/src/framework/app.css

@@ -58,26 +58,45 @@ canvas { display: block; }
 /* Divider BETWEEN visible sections. `~` walks all preceding siblings, and a
    relevance-hidden section (.section-hidden, display:none) fails the :not(),
    so the topmost VISIBLE section never draws a hairline under the rail header.
-   Do not simplify this to `.section:first-child { border-top: 0 }` — that
+   Condition-hidden sections (.hidden, a `when` that evaluated false) are excluded
+   for the same reason. Do not simplify this to `.section:first-child { border-top: 0 }` — that
    matches DOM position rather than visibility, and leaves a stray divider
    floating at the top whenever applyRelevance hides the first section. */
-.section:not(.section-hidden) ~ .section:not(.section-hidden) {
+.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; }
 .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;
+  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); margin-bottom: 9px;
+  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); }
+.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 {
+  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;
+}
 .feat { display: flex; align-items: center; gap: 8px; margin: 6px 0;
   color: var(--pf-text-2); cursor: pointer; }
 .feat input { cursor: pointer; accent-color: var(--pf-accent); }
 .feat-group { margin: 2px 0 8px; padding-left: 10px; border-left: 1px solid var(--pf-border); }
 .feat-group.hidden { display: none; }
+/* Condition-hidden nodes. Disclosure state uses `.hidden` on `.adv` /
+   `.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; }
 .adv-toggle {
   margin-top: 8px; padding: 4px 0; width: 100%; border: 0; border-radius: 6px;
   background: transparent; color: var(--pf-muted); cursor: pointer;
@@ -130,6 +149,24 @@ input[type="range"]:focus-visible { outline: none; }
 input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px color-mix(in oklab, var(--pf-accent) 35%, transparent); }
 input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px color-mix(in oklab, var(--pf-accent) 35%, transparent); }
 
+/* recommended band: a tinted span of the track between --band-lo and --band-hi */
+.slider.has-band input[type="range"]::-webkit-slider-runnable-track {
+  background: linear-gradient(to right,
+    var(--pf-border) var(--band-lo),
+    color-mix(in oklab, var(--pf-accent) 30%, var(--pf-border)) var(--band-lo),
+    color-mix(in oklab, var(--pf-accent) 30%, var(--pf-border)) var(--band-hi),
+    var(--pf-border) var(--band-hi));
+}
+.slider.has-band input[type="range"]::-moz-range-track {
+  background: linear-gradient(to right,
+    var(--pf-border) var(--band-lo),
+    color-mix(in oklab, var(--pf-accent) 30%, var(--pf-border)) var(--band-lo),
+    color-mix(in oklab, var(--pf-accent) 30%, var(--pf-border)) var(--band-hi),
+    var(--pf-border) var(--band-hi));
+}
+/* value box outside the recommended band */
+.row .num.warn { border-color: var(--pf-err); color: var(--pf-err); }
+
 button.action {
   width: 100%; margin-top: 8px; padding: 9px; border: 0; border-radius: var(--pf-radius-control);
   background: var(--pf-accent); color: var(--pf-on-accent); font-weight: 500; cursor: pointer;
@@ -159,11 +196,20 @@ button.action:disabled { opacity: .5; cursor: default; }
 
 /* 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 {
+button.action:focus-visible, .adv-toggle:focus-visible, .sec-title:focus-visible, #viewbar button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pf-accent) 35%, transparent);
 }
 
+/* `when` disabling. Distinct from .irrelevant (relevance dimming) on purpose:
+   two mechanisms that look identical make the panel impossible to reason about. */
+.disabled { opacity: 0.5; pointer-events: none; }
+
+/* The wrapper a titled inner group renders into. Conditions hide the wrapper;
+   the disclosure hides `.adv` inside it. Unused until `when` becomes authorable
+   in phase 5, but the class exists from Task 7 and must have a rule. */
+.adv-wrap.hidden { display: none; }
+
 /* part tabs (placement: .pf-float-tabs; legacy markup keeps the old float) */
 #topbar:not(.pf-float-tabs) { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 15; }
 #topbar .seg {
@@ -288,6 +334,59 @@ button.action:focus-visible, .adv-toggle:focus-visible, #viewbar button:focus-vi
   .pf-anim-bar { min-height: 40px; }
 }
 
+/* ---- transport bar, touch layout ----------------------------------------
+   The rules above size the BAR; these size the things you press inside it. At
+   a 13px glyph in 2px/4px of padding, play, reset and the ‹ › pagers measure
+   ~20x20, with 8px between neighbours — mouse targets. Measured on a 390px
+   stage: a tap 12px off the pause button's centre, ordinary finger error,
+   landed on the bar's background and did nothing; a little further landed on
+   a pager, which SWITCHES ANIMATION. The scrubber fared worse, flex-shrinking
+   toward nothing.
+
+   So give every control the 44px minimum, and accept the rows that costs: at
+   44px per target they do not fit a 320-390px stage on one line.
+
+   Both query conditions matter. The width half is the framework's own narrow
+   layout (chrome.css's 720px breakpoint, measured on the STAGE — partforge in
+   an iframe sized to a phone-width card gets it too); the pointer half catches
+   a phone in landscape, wider than 720px and still all thumbs.
+
+   The bar stays a single flat flex line that WRAPS, in source order — no
+   `order` overrides, deliberately: a reordered flex row splits visual order
+   from DOM order, and with it from focus order, so a keyboard on a narrow
+   window would tab in spatial zigzags. Wrapping in source order keeps
+   reading, tab and touch order one sequence, and keeps the pagers bracketing
+   the bar's ends like the wide layout:
+
+       ‹ [ animation v ] (i) ▶        <- wraps where the width runs out
+         [===·===·==o===]  ↺ ›
+
+   The timeline takes whatever width its row has left and drops to a wider
+   row of its own below ~360px. scripts/check-app.mjs's checkTransportTargets
+   pins the result. */
+@media (max-width: 719px), (pointer: coarse) {
+  .pf-anim-bar {
+    flex-wrap: wrap; justify-content: center;
+    column-gap: 4px; row-gap: 2px; padding: 4px 8px;
+  }
+  .pf-anim-bar button {
+    min-width: 44px; min-height: 44px; padding: 0;
+    display: inline-flex; align-items: center; justify-content: center;
+  }
+  .pf-anim-title, .pf-anim-pick { min-width: 0; }
+  /* The picker is a target too, not a caption — it opens the animation list. */
+  .pf-anim-pick { max-width: 100%; min-height: 44px; padding: 3px 10px; }
+  /* The 200px basis makes the timeline BID for real room: at a phone width it
+     loses the bid, wraps, and inherits most of a row; 120px is the floor it
+     can be squeezed to when sharing one. */
+  .pf-anim-scrub-wrap { flex: 1 1 200px; min-width: 120px; width: auto; min-height: 44px; }
+  /* The INPUT is the thing a finger has to land on — height on the wrap alone
+     leaves an ~18px native strip as the real target, with dead slack around
+     it. The track paints centered, so this is invisible; only the hit area
+     grows. */
+  .pf-anim-scrub { min-height: 44px; }
+}
+
 /* Legacy id-only markup only: classed markup's viewbar lives inside .pf-stage
    (bottom-right, see chrome.css's .pf-float-viewbar) so it never meets the
    top-left floating #panel card. Legacy markup still floats #viewbar top-right

package/src/framework/chrome.css

@@ -250,6 +250,26 @@
   .pf-anim-bar { bottom: 64px; }
 }
 
+/* Placement half of app.css's touch layout — same query, so the two must be
+   edited together. That layout stacks the bar into rows, and a shrink-to-fit
+   absolutely-positioned box sizes itself to its widest single item (195px,
+   measured at 390px) rather than to the room available, wrapping every row far
+   earlier than it needs to. State the width outright.
+
+   The lift off the viewbar comes along for a landscape phone, which is wider
+   than 719px and so misses the block above. It also keeps this clear of the
+   viewbar CLAMP in animation-controls.js: with the bands no longer
+   intersecting, applyPlacement() returns before touching left/transform, so
+   the stacked bar stays centred instead of being slid sideways by a rule that
+   was reasoning about a single-row bar.
+
+   The cap is for a tablet — a coarse pointer on a wide stage — where an
+   unbounded stacked bar would span 700px+ and strand the reset button across a
+   mostly empty row. A phone is narrower than the cap and still fills its width. */
+@media (max-width: 719px), (pointer: coarse) {
+  .pf-anim-bar { width: calc(100% - 24px); max-width: 520px; bottom: 64px; }
+}
+
 
 
 /* ---- reduced motion -----------------------------------------------------

package/src/framework/controls.js

@@ -1,364 +1,15 @@
-// Builds the sectioned control panel from a part's `parameters` schema.
+// The control panel's public entry point. The implementation lives in panel/:
 //
-// Most sections show a preset picker (below the title) plus an expandable
-// "Advanced" block of sliders. The "features" section instead puts, under
-// Advanced, a checkbox per feature followed by its own controls — ticking one
-// enables it and reveals those controls right below it.
-// All controls mutate the shared `params` object and call onDirty() on change.
-
-import { renderMarkdown } from "./markdown.js";
-
-// Short numeric string without float noise (4 dp max) for the value box.
-const numStr = (v) => String(Math.round(v * 1e4) / 1e4);
-
-// --- relevance (dim controls / hide sections that don't affect on-screen parts) ---
-// `relevant` is a Set of param keys, or any non-Set value (e.g. RELEVANT_ALL) → show all.
-function applyRelevance(relevant, controls, sections) {
-  const showAll = !(relevant instanceof Set);
-  for (const { key, el: node } of controls) {
-    const irrelevant = !showAll && !relevant.has(key);
-    node.classList.toggle("irrelevant", irrelevant);
-    if (irrelevant) node.title = "Doesn't affect the parts in the current view";
-    else node.removeAttribute("title");
-  }
-  for (const { el: node, keys } of sections) {
-    const anyRelevant = showAll || [...keys].some((k) => relevant.has(k));
-    node.classList.toggle("section-hidden", !anyRelevant);
-  }
-}
-
-// --- visibility (hidden controls/sections) --------------------------------
-export const visibleAdvanced = (sec) => (sec.advanced ?? []).filter((d) => !d.hidden);
-export const visibleFeatures = (sec) => (sec.features ?? []).filter((f) => !f.hidden);
-// Standalone toggle checkboxes a preset section can show (outside the Advanced fold),
-// e.g. preview switches. Each: { key, label, on?, description?, hidden? }.
-export const visibleToggles = (sec) => (sec.toggles ?? []).filter((t) => !t.hidden);
-export function sectionRenders(sec) {
-  if (sec.hidden) return false;
-  if (sec.features) return visibleFeatures(sec).length > 0;
-  const hasPresets = sec.presets && Object.keys(sec.presets).length > 0;
-  return !!hasPresets || visibleAdvanced(sec).length > 0 || visibleToggles(sec).length > 0;
-}
-
-// Parse a typed value → clamped to [min, max], or null if not a finite number.
-export function clampToRange(raw, min, max) {
-  const v = parseFloat(raw);
-  if (!Number.isFinite(v)) return null;
-  return Math.min(max, Math.max(min, v));
-}
-
-// --- info glyph + per-panel popover -----------------------------------------
-// Popover top edge: below the glyph when it fits, flipped above when the
-// viewport bottom would clip it (e.g. the animation transport bar's ⓘ, which
-// sits at the bottom of the stage). Pure, for direct unit testing — happy-dom
-// reports zero layout metrics, so the flip can't be exercised via the DOM.
-export function popoverTop({ glyphTop, glyphBottom, popHeight, viewportHeight }) {
-  const below = glyphBottom + 6;
-  if (below + popHeight <= viewportHeight - 8) return below;
-  return Math.max(8, glyphTop - 6 - popHeight);
-}
-
-// 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().
-export function createInfoPopover() {
-  const pop = el("div", "popover");
-  pop.hidden = true;
-  document.body.append(pop);
-  let owner = null; // the glyph whose description is showing
-
-  function close() {
-    if (pop.hidden) return;
-    pop.hidden = true;
-    if (owner) { owner.setAttribute("aria-expanded", "false"); owner = null; }
-  }
-  const onDocClick = (e) => {
-    if (!pop.hidden && !pop.contains(e.target) && !e.target.closest?.(".info")) close();
-  };
-  const onDocKeydown = (e) => { if (e.key === "Escape") close(); };
-  document.addEventListener("click", onDocClick);
-  document.addEventListener("keydown", onDocKeydown);
-
-  return {
-    toggle(glyph, description) {
-      if (owner === glyph) { close(); return; } // toggle off
-      close();
-      pop.innerHTML = renderMarkdown(description);
-      pop.hidden = false;
-      owner = glyph;
-      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`;
-    },
-    dispose() {
-      document.removeEventListener("click", onDocClick);
-      document.removeEventListener("keydown", onDocKeydown);
-      pop.remove();
-    },
-  };
-}
-
-// Append a focusable ⓘ glyph to `container` that toggles the panel's shared
-// popover with `description` (Markdown). No-op when description is empty.
-export function attachInfo(container, description, info) {
-  if (typeof description !== "string" || !description.trim()) return;
-  const glyph = document.createElement("button");
-  glyph.type = "button";
-  glyph.className = "info";
-  glyph.textContent = "ⓘ";
-  glyph.setAttribute("aria-label", "More info");
-  glyph.setAttribute("aria-expanded", "false");
-  glyph.addEventListener("click", (e) => { e.stopPropagation(); info.toggle(glyph, description); });
-  container.append(glyph);
-}
-
-function el(tag, className, text) {
-  const node = document.createElement(tag);
-  if (className) node.className = className;
-  if (text != null) node.textContent = text;
-  return node;
-}
-
-// One parameter control bound to params[def.key]. `def.control`:
-//   "slider" (default) — range slider + an editable number box (drag OR type)
-//   "number"           — number box only (no slider)
-//   "text"             — single-line text field
-//   "textarea"         — multiline text field
-// The box accepts exact values (finer than `step`); typed values clamp to
-// [min, max] on commit (blur/Enter). Returns { wrap, sync }.
-function makeSlider(def, params, onChange, info) {
-  const numeric = def.control === "number";
-  const wrap = el("div", "slider");
-  const row = el("div", "row");
-  const label = el("label", "", def.label);
-  attachInfo(label, def.description, info);
-  row.append(label);
-
-  // editable value box (+ optional unit suffix)
-  const val = el("div", "val");
-  const box = document.createElement("input");
-  box.type = "number";
-  box.className = "num";
-  box.min = def.min; box.max = def.max; box.step = def.step;
-  box.value = numStr(params[def.key]);
-  val.append(box);
-  if (def.unit) val.append(el("span", "unit", def.unit));
-  row.append(val);
-  wrap.append(row);
-
-  let slider = null;
-  if (!numeric) {
-    slider = document.createElement("input");
-    slider.type = "range";
-    slider.min = def.min; slider.max = def.max; slider.step = def.step;
-    slider.value = params[def.key];
-    slider.addEventListener("input", () => {
-      params[def.key] = +slider.value;
-      box.value = numStr(+slider.value);
-      onChange?.();
-    });
-    wrap.append(slider);
-  }
-
-  // live preview while typing (unclamped); clamp + reformat on commit (blur/Enter)
-  box.addEventListener("input", () => {
-    const v = parseFloat(box.value);
-    if (!Number.isFinite(v)) return;
-    params[def.key] = v;
-    if (slider) slider.value = v;
-    onChange?.();
-  });
-  box.addEventListener("change", () => {
-    const v = clampToRange(box.value, def.min, def.max);
-    if (v == null) { box.value = numStr(params[def.key]); return; } // revert invalid input
-    params[def.key] = v;
-    box.value = numStr(v);
-    if (slider) slider.value = v;
-    onChange?.();
-  });
-
-  const sync = () => {
-    box.value = numStr(params[def.key]);
-    if (slider) slider.value = params[def.key];
-  };
-  return { wrap, sync };
-}
-
-function makeTextControl(def, params, onChange, info) {
-  const multiline = def.control === "textarea";
-  const wrap = el("div", "slider");
-  const row = el("div", "row");
-  const label = el("label", "", def.label);
-  attachInfo(label, def.description, info);
-  row.append(label);
-  wrap.append(row);
-
-  const field = document.createElement(multiline ? "textarea" : "input");
-  if (!multiline) field.type = "text";
-  field.className = "text-input";
-  field.value = String(params[def.key] ?? "");
-  field.addEventListener("input", () => {
-    params[def.key] = field.value;
-    onChange?.();
-  });
-  wrap.append(field);
-
-  const sync = () => { field.value = String(params[def.key] ?? ""); };
-  return { wrap, sync };
-}
-
-const makeParameterControl = (def, params, onChange, info) =>
-  def.control === "text" || def.control === "textarea"
-    ? makeTextControl(def, params, onChange, info)
-    : makeSlider(def, params, onChange, info);
-
-// A collapsible "Advanced ▾" block. Returns { adv, toggle }.
-function advancedBlock() {
-  const adv = el("div", "adv hidden");
-  const toggle = el("button", "adv-toggle", "Advanced ▾");
-  toggle.addEventListener("click", () => {
-    const hidden = adv.classList.toggle("hidden");
-    toggle.textContent = hidden ? "Advanced ▾" : "Advanced ▴";
-  });
-  return { adv, toggle };
-}
-
-export function buildControls(root, parameters, params, onDirty) {
-  const info = createInfoPopover();
-  const controls = []; // { key, el } per control element
-  const sections = []; // { el, keys:Set } per rendered section
-  const syncFns = []; // { key, sync } for every widget that can re-read params
-  for (const sec of parameters) {
-    if (!sectionRenders(sec)) continue;
-    const section = el("div", "section");
-    const title = el("div", "sec-title", sec.title);
-    attachInfo(title, sec.description, info);
-    section.append(title);
-    const keys = new Set();
-    const register = (key, node, sync) => {
-      controls.push({ key, el: node });
-      keys.add(key);
-      if (sync) syncFns.push({ key, sync });
-    };
-    if (sec.features) buildFeatureSection(section, sec, params, onDirty, register, info);
-    else buildPresetSection(section, sec, params, onDirty, register, info);
-    root.append(section);
-    sections.push({ el: section, keys });
-  }
-  return {
-    applyRelevance: (relevant) => applyRelevance(relevant, controls, sections),
-    // Re-read params into the widgets — all of them, or just `keys`. The
-    // programmatic twin of a user edit (setParams); never fires onDirty.
-    syncValues: (keys) => {
-      const only = keys && new Set(keys);
-      for (const { key, sync } of syncFns) if (!only || only.has(key)) sync();
-    },
-    dispose: () => { info.dispose(); root.replaceChildren(); },
-  };
-}
-
-function buildPresetSection(section, sec, params, onDirty, register, info) {
-  // preset picker, below the title, full width (omitted when the section has no presets)
-  let preset = null;
-  const presetNames = sec.presets ? Object.keys(sec.presets) : [];
-  if (presetNames.length) {
-    preset = document.createElement("select");
-    preset.className = "preset";
-    for (const name of [...presetNames, "Custom"]) {
-      const o = document.createElement("option");
-      o.value = name; o.textContent = name; preset.append(o);
-    }
-    preset.value = presetNames[0];
-    section.append(preset);
-  }
-
-  // standalone toggle checkboxes (e.g. preview switches), shown below the preset and
-  // outside the Advanced fold so they stay visible. Independent of the preset selector.
-  for (const t of visibleToggles(sec)) {
-    const row = el("label", "feat");
-    const box = document.createElement("input");
-    box.type = "checkbox";
-    box.checked = params[t.key] > 0;
-    const lbl = el("span", "", t.label);
-    attachInfo(lbl, t.description, info);
-    row.append(box, lbl);
-    box.addEventListener("change", () => { params[t.key] = box.checked ? (t.on ?? 1) : 0; onDirty?.(); });
-    register(t.key, row, () => { box.checked = params[t.key] > 0; });
-    section.append(row);
-  }
-
-  const advanced = visibleAdvanced(sec);
-  const syncs = {};
-  if (advanced.length) {
-    const { adv, toggle } = advancedBlock();
-    for (const def of advanced) {
-      const s = makeParameterControl(def, params, () => { if (preset) preset.value = "Custom"; onDirty?.(); }, info);
-      adv.append(s.wrap);
-      syncs[def.key] = s.sync; // raw: preset APPLICATION must not mark itself Custom
-      // A programmatic edit diverges from the preset exactly as a user edit does,
-      // so the picker falls back to Custom — leaving a stale preset name selected
-      // would also make it unre-appliable (no change event for the current option).
-      register(def.key, s.wrap, () => { s.sync(); if (preset) preset.value = "Custom"; });
-    }
-    section.append(toggle, adv);
-  }
-
-  // applying a preset overwrites its keys and refreshes this section's sliders
-  if (preset) {
-    preset.addEventListener("change", () => {
-      const bundle = sec.presets[preset.value];
-      if (!bundle) return; // "Custom"
-      Object.assign(params, bundle);
-      for (const key in syncs) if (key in params) syncs[key]();
-      onDirty?.();
-    });
-  }
-}
-
-function buildFeatureSection(section, sec, params, onDirty, register, info) {
-  // Everything lives under Advanced: each feature is a checkbox followed by its
-  // own controls, which appear directly below it when the box is checked.
-  const { adv, toggle } = advancedBlock();
-  section.append(toggle, adv);
-
-  for (const feat of visibleFeatures(sec)) {
-    const checkRow = el("label", "feat");
-    const box = document.createElement("input");
-    box.type = "checkbox";
-    box.checked = params[feat.key] > 0;
-    const featLabel = el("span", "", feat.label);
-    attachInfo(featLabel, feat.description, info);
-    checkRow.append(box, featLabel);
-    // `group` is created just below — the sync only ever runs after this
-    // function returns, so the closure is safely bound by then.
-    register(feat.key, checkRow, () => {
-      box.checked = params[feat.key] > 0;
-      group.classList.toggle("hidden", !box.checked);
-    });
-
-    const group = el("div", "feat-group");
-    const syncs = [];
-    for (const def of feat.sliders.filter((d) => !d.hidden)) {
-      const s = makeParameterControl(def, params, onDirty, info);
-      group.append(s.wrap);
-      syncs.push(s.sync);
-      register(def.key, s.wrap, s.sync);
-    }
-    group.classList.toggle("hidden", !box.checked);
-
-    box.addEventListener("change", () => {
-      if (box.checked) {
-        if (!(params[feat.key] > 0)) params[feat.key] = feat.on; // enable
-        syncs.forEach((s) => s());
-        group.classList.remove("hidden");
-      } else {
-        params[feat.key] = 0; // disable
-        group.classList.add("hidden");
-      }
-      onDirty?.();
-    });
-
-    adv.append(checkRow, group); // checkbox, then its controls right below
-  }
-}
+//   panel/legacy.js       the original advanced/toggles/features shapes
+//   panel/model.js        canonical nodes -> render tree, plus conditions
+//   panel/widget-specs.js the control-type registry (shared with partforge/lint)
+//   panel/panel-state.js  one pure pass for visibility/disabling/dimming
+//   panel/widgets/        one DOM factory per type
+//   panel/render.js       the DOM binder
+//
+// 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 { clampToRange } from "./panel/widgets/numeric.js";
+export { visibleAdvanced, visibleFeatures, visibleToggles, sectionRenders } from "./panel/legacy.js";

package/src/framework/lint/rules-animations.js

@@ -9,6 +9,8 @@ import { EASINGS } from "../animation.js";
 import { CANONICAL_VIEWS } from "../view-angles.js";
 import { probeSubPartPose } from "../pose-probe-core.js";
 import { resolveDerived } from "../derive.js";
+import { desugar } from "../panel/legacy.js";
+import { controlNodes } from "../panel/model.js";
 
 const isPlainObject = (x) => x !== null && typeof x === "object" && !Array.isArray(x);
 
@@ -22,20 +24,19 @@ const animEntries = (part) =>
 // rule checks its own slice). A bare-tracks animation is one anonymous step.
 const rawSteps = (a) => (Array.isArray(a.steps) ? a.steps.filter(isPlainObject) : [{ ...a, label: null }]);
 
-// The control descriptor ranges, for value-in-range checks. Mirrors
-// rules-schema.js's collectDescriptors walk (not shared: each group owns its
-// own walk by design — see lint/index.js header).
+// The control descriptor ranges, for value-in-range checks. Walks the shared
+// panel model rather than re-implementing the schema walk — before that model
+// existed this duplicated rules-schema.js's collectDescriptors by design, and
+// the two could drift.
+//
+// desugar() is used directly, WITHOUT buildTree(): hidden controls must stay in,
+// because an animation may legitimately drive a parameter with no visible UI.
 function paramRanges(part) {
   const ranges = new Map();
-  const secs = Array.isArray(part?.parameters) ? part.parameters : [];
-  const add = (d) => {
-    if (d && typeof d.key === "string" && !ranges.has(d.key)) ranges.set(d.key, { min: d.min, max: d.max });
-  };
-  for (const sec of secs) {
-    for (const d of Array.isArray(sec?.advanced) ? sec.advanced : []) add(d);
-    for (const f of Array.isArray(sec?.features) ? sec.features : []) {
-      for (const s of Array.isArray(f?.sliders) ? f.sliders : []) add(s);
-    }
+  for (const c of controlNodes(desugar(part?.parameters))) {
+    // A checkbox has no range; only numeric controls constrain a keyframe.
+    if (c.type === "checkbox") continue;
+    if (typeof c.key === "string" && !ranges.has(c.key)) ranges.set(c.key, { min: c.min, max: c.max });
   }
   return ranges;
 }