partforge 0.48.0 → 0.50.0

package/src/framework/animation.js

@@ -51,12 +51,13 @@ export function normalizeAnimation(name, spec) {
         duration: s.duration,
         easing: s.easing ?? spec.easing ?? DEFAULT_EASING,
         tracks: s.tracks ?? {},
+        opacity: s.opacity ?? {},
         camera: s.camera ?? null,
       }))
     : [{
         label: null, duration: spec.duration,
         easing: spec.easing ?? DEFAULT_EASING,
-        tracks: spec.tracks ?? {}, camera: null,
+        tracks: spec.tracks ?? {}, opacity: spec.opacity ?? {}, camera: null,
       }];
   const totalDuration = steps.reduce((sum, s) => sum + s.duration, 0) || 1;
   let acc = 0;
@@ -65,8 +66,13 @@ export function normalizeAnimation(name, spec) {
   if (typeof spec.camera === "string") cues = [{ t: 0, view: spec.camera }];
   else if (Array.isArray(spec.camera)) cues = spec.camera.map(([t, view]) => ({ t, view }));
   else cues = steps.flatMap((s, i) => (s.camera ? [{ t: stepStarts[i], view: s.camera }] : []));
-  const trackedKeys = [...new Set(steps.flatMap((s) =>
-    Object.entries(s.tracks).filter(([, kf]) => usableKeyframes(kf)).map(([key]) => key)))];
+  // Keys with at least one usable keyframe list in any step, for one field
+  // ("tracks" or "opacity"). Shares usableKeyframes with segmentsFor — the
+  // single rule both must agree on (see the comment on usableKeyframes).
+  const keysOf = (field) => [...new Set(steps.flatMap((s) =>
+    Object.entries(s[field]).filter(([, kf]) => usableKeyframes(kf)).map(([key]) => key)))];
+  const trackedKeys = keysOf("tracks");
+  const opacityKeys = keysOf("opacity");
   return {
     name, label: spec.label ?? name, description: spec.description ?? null,
     // Fail CLOSED on both flags: only a literal `true` turns them on. Coercing
@@ -76,12 +82,32 @@ export function normalizeAnimation(name, spec) {
     // having been linted. An invalid flag therefore does the quiet thing here and
     // is reported there.
     loop: spec.loop === true, autoplay: spec.autoplay === true,
-    steps, stepStarts, totalDuration, cues, trackedKeys,
+    steps, stepStarts, totalDuration, cues, trackedKeys, opacityKeys,
   };
 }
 
-export function normalizeAnimations(part) {
-  return Object.entries(part?.animations ?? {}).map(([name, spec]) => normalizeAnimation(name, spec));
+// Per-view normalized animations (spec 2026-08-10-per-view-animations):
+// Map(viewName -> NormalizedAnimation[]), one entry per declared view, [] for
+// views without animations. Malformed entries are SKIPPED, not thrown — the
+// runtime must degrade to "that animation doesn't exist" while lint reports
+// the specifics. A legacy top-level `animations` key is deliberately ignored
+// (clean break; lint's animation-not-in-view names the fix).
+export function viewAnimations(part) {
+  const out = new Map();
+  const views = part?.views;
+  if (views === null || typeof views !== "object" || Array.isArray(views)) return out;
+  for (const [viewName, view] of Object.entries(views)) {
+    const block = view?.animations;
+    const entries = block !== null && typeof block === "object" && !Array.isArray(block)
+      ? Object.entries(block)
+      : [];
+    const anims = [];
+    for (const [name, spec] of entries) {
+      try { anims.push(normalizeAnimation(name, spec)); } catch { /* lint reports */ }
+    }
+    out.set(viewName, anims);
+  }
+  return out;
 }
 
 // Step containing t. Boundaries belong to the LATER step, and t clamps to [0,1].
@@ -100,11 +126,12 @@ export function cueAt(anim, t) {
   return g;
 }
 
-// The timeline segments (global [start,end] spans) in which `key` is tracked.
-function segmentsFor(anim, key) {
+// The timeline segments (global [start,end] spans) in which `key` is tracked,
+// for one keyframe field ("tracks" for params, "opacity" for sub-part fades).
+function segmentsFor(anim, key, field = "tracks") {
   const out = [];
   anim.steps.forEach((step, i) => {
-    const kf = step.tracks[key];
+    const kf = step[field][key];
     if (!usableKeyframes(kf)) return;
     const start = anim.stepStarts[i];
     const end = i + 1 < anim.steps.length ? anim.stepStarts[i + 1] : 1;
@@ -126,11 +153,11 @@ function interpKeyframes(kf, u) {
   return kf[kf.length - 1][1];
 }
 
-function evaluateTrack(anim, key, t) {
-  const segs = segmentsFor(anim, key);
-  // trackedKeys and segmentsFor share usableKeyframes, so a tracked key always
-  // has a segment. Guard anyway: this runs inside the render loop, where a throw
-  // costs the whole viewer, not just the frame.
+function evaluateTrack(anim, key, t, field = "tracks") {
+  const segs = segmentsFor(anim, key, field);
+  // trackedKeys/opacityKeys and segmentsFor share usableKeyframes, so a tracked
+  // key always has a segment. Guard anyway: this runs inside the render loop,
+  // where a throw costs the whole viewer, not just the frame.
   if (!segs.length) return undefined;
   let prev = null;
   for (const seg of segs) {
@@ -142,8 +169,8 @@ function evaluateTrack(anim, key, t) {
     }
     prev = seg;
   }
-  // Outside every segment: hold the nearest boundary value, so a param tracked
-  // only in step 2 doesn't jump while step 1 plays.
+  // Outside every segment: hold the nearest boundary value, so a param (or an
+  // opacity) tracked only in step 2 doesn't jump while step 1 plays.
   return prev ? prev.keyframes[prev.keyframes.length - 1][1] : segs[0].keyframes[0][1];
 }
 
@@ -152,8 +179,10 @@ function evaluateTrack(anim, key, t) {
 export function evaluate(anim, t) {
   const tc = clampT(t);
   const values = {};
-  for (const key of anim.trackedKeys) values[key] = evaluateTrack(anim, key, tc);
-  return { stepIndex: stepIndexAt(anim, tc), values };
+  for (const key of anim.trackedKeys) values[key] = evaluateTrack(anim, key, tc, "tracks");
+  const opacity = {};
+  for (const key of anim.opacityKeys) opacity[key] = evaluateTrack(anim, key, tc, "opacity");
+  return { stepIndex: stepIndexAt(anim, tc), values, opacity };
 }
 
 // --- playback state machine --------------------------------------------------

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/cutaway.js

@@ -412,6 +412,19 @@ export function createCutaway({
     };
   }
 
+  // Re-assert this sub-part's enabled-state material assignment. The viewer
+  // calls it after taking a sub-part OFF a fade clone: while the cutaway is
+  // enabled the mesh belongs on clippedMeshMaterial, and only the render set
+  // knows that material. setEnabled is idempotent, so this is a cheap
+  // re-assert, not a rebuild.
+  function resyncSubpart(name) {
+    if (disposed) return false;
+    const entry = renderSets.get(name);
+    if (!entry) return false;
+    entry.renderSet.setEnabled(enabled);
+    return true;
+  }
+
   // Per-frame maintenance while the cutaway is on: the gizmo rescales for the
   // camera, and every visible section re-slices its outline if anything it
   // depends on moved. Both are cheap no-ops when nothing changed.
@@ -499,6 +512,7 @@ export function createCutaway({
     updateGeometry,
     setVisible,
     setEnabled,
+    resyncSubpart,
     reset,
     flip,
     setTheme,