partforge 0.46.2 → 0.46.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "partforge",
-  "version": "0.46.2",
+  "version": "0.46.4",
   "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/animation-controls.js

@@ -22,6 +22,38 @@ function btn(className, text, label) {
   return b;
 }
 
+// Where the transport bar may sit, given the stage width, the bar's natural
+// width, and the viewbar's left edge (all px, viewbarLeft stage-relative).
+// null → the CSS default (centered) already clears the viewbar. Otherwise
+// inline overrides: `left` slides the bar toward the stage's `margin`, and
+// when even that isn't enough, `maxWidth` caps the bar so the `gap` holds.
+export function planAnimBarPlacement({ stageWidth, barWidth, viewbarLeft }, { gap = 10, margin = 12 } = {}) {
+  const centeredLeft = (stageWidth - barWidth) / 2;
+  const limit = viewbarLeft - gap - barWidth;
+  if (centeredLeft <= limit) return null;
+  const left = Math.max(margin, limit);
+  const available = Math.max(0, viewbarLeft - gap - margin);
+  return barWidth > available ? { left, maxWidth: available } : { left };
+}
+
+// A setter for an element's text that MUTATES its existing text node instead of
+// replacing it. `el.textContent = x` always replaces the node, and WebKit will
+// not dispatch a `click` on an element whose text node was replaced between
+// mousedown and mouseup — so a label that can change while the user is pressing
+// it must be written this way or the press is silently swallowed. Isolated in
+// WebKit on a 120ms press: `textContent = <identical string>` loses the click,
+// `node.data = <same>` never does, and neither does an attribute write.
+//
+// This is what makes the transport's glyph safe even when it legitimately flips
+// mid-press (playback ending under the user's finger), which no amount of
+// skipping redundant writes can cover.
+function textSetter(element) {
+  const node = element.firstChild?.nodeType === 3
+    ? element.firstChild
+    : element.appendChild(document.createTextNode(""));
+  return (value) => { if (node.data !== value) node.data = value; };
+}
+
 export function attachAnimationControls(viewer, part, { container, applyValues, getParamValues }) {
   // A malformed animations block must degrade to "no transport bar", never a
   // crashed mount — lint reports the specifics; the viewer just goes without.
@@ -92,19 +124,59 @@ export function attachAnimationControls(viewer, part, { container, applyValues,
     }
   }
 
+  // syncUi() runs on every playback frame. Two rules keep that from eating the
+  // user's clicks, and they are independent:
+  //
+  // 1. Text goes through textSetter (see above), so the button's text node is
+  //    mutated and never replaced. This is the one that matters, because it
+  //    holds even when the glyph legitimately changes under a held finger —
+  //    playback ending, or a step boundary crossing, mid-press.
+  // 2. Each element has its own renderer that leaves early when its own value
+  //    is unchanged, so a playing transport does no DOM work per frame at all.
+  //    Per ELEMENT, not per write: driving several elements off one shared
+  //    state key means a step change also redraws the button, which was still
+  //    enough to lose the click before rule 1 was in place.
+  //
+  // Without rule 1 this cost the pause click outright: press, release, no click
+  // event at all, and only ever while playing — the one moment the button is
+  // for. Measured in WebKit, any press held >= 40ms lost it (a real click is
+  // ~100ms; a synthetic 0ms one survives, which is why automated clicking never
+  // saw it). Reset was never affected: nothing rewrites that button per frame.
+  const setPlayGlyph = textSetter(playBtn);
+  const setStepText = textSetter(stepLabel);
+  let shownActive = null;
+  let shownStep = null;
+
+  function renderPlayButton(active) {
+    if (active === shownActive) return;
+    shownActive = active;
+    setPlayGlyph(active ? "⏸" : "▶");
+    const label = active ? "Pause animation" : "Play animation";
+    playBtn.setAttribute("aria-label", label);
+    playBtn.title = label;
+  }
+
+  function renderStepLabel(stepIndex) {
+    if (current.steps.length <= 1 || stepIndex === shownStep) return;
+    shownStep = stepIndex;
+    const step = current.steps[stepIndex];
+    setStepText(`${stepIndex + 1}/${current.steps.length} · ${step.label}`);
+  }
+
   function syncUi() {
     const { status, t, stepIndex } = playback.state();
-    const active = status === "playing" || status === "intro";
-    playBtn.textContent = active ? "⏸" : "▶";
-    playBtn.setAttribute("aria-label", active ? "Pause animation" : "Play animation");
-    playBtn.title = playBtn.getAttribute("aria-label");
+    // The scrubber is the one thing that genuinely moves every frame. Assigning
+    // `.value` updates a property rather than replacing a child node, so it
+    // costs no clicks — and it is not what anyone reaches for mid-playback.
     scrub.value = String(Math.round(t * 1000));
-    if (current.steps.length > 1) {
-      const step = current.steps[stepIndex];
-      stepLabel.textContent = `${stepIndex + 1}/${current.steps.length} · ${step.label}`;
-    }
+    renderPlayButton(status === "playing" || status === "intro");
+    renderStepLabel(stepIndex);
   }
 
+  // selectAnimation swaps in a fresh playback whose state can coincide with the
+  // outgoing one; the chrome still has to re-render for the new animation.
+  function invalidateUi() { shownActive = null; shownStep = null; }
+
   // --- driver -----------------------------------------------------------------
   // A frame that throws — a malformed cue or track that slipped past lint, a
   // viewer that rejects a view name — must cost that frame, not the render
@@ -162,6 +234,8 @@ export function attachAnimationControls(viewer, part, { container, applyValues,
     playback = createPlayback(current);
     if (animations.length > 1) pick.value = name;
     syncStructure();
+    invalidateUi(); // a fresh playback starts idle at step 0 — the same key the
+                    // outgoing one may have been showing, but for another animation
     syncUi();
   }
 
@@ -200,6 +274,65 @@ export function attachAnimationControls(viewer, part, { container, applyValues,
   syncStructure();
   syncUi();
 
+  // --- placement: keep clear of the viewbar ---------------------------------
+  // chrome.css centers the bar (left: 50% / translateX(-50%)), and nothing in
+  // CSS can stop that centered position sliding under #viewbar when the stage
+  // narrows — the viewbar's width is dynamic (cutaway's Flip/Reset appear and
+  // disappear), so a static reservation would either overlap or waste centre
+  // space. Measure instead: when the two bars' vertical bands intersect, clamp
+  // the bar's left so a 10px gap to the viewbar holds, capping its width if
+  // even the stage's 12px margin isn't enough. Overrides are inline and
+  // cleared at the top of every pass, so chrome.css (or a host that
+  // re-anchors either bar out of the shared band) stays authoritative the
+  // moment the constraint stops binding. The clear-measure-apply sequence is
+  // loop-safe: it settles within one frame, so ResizeObserver — which reports
+  // rendered sizes at frame boundaries — never sees the intermediate state.
+  const viewbarEl = container.querySelector("#viewbar");
+  let placementRaf = 0;
+  function applyPlacement() {
+    placementRaf = 0;
+    bar.style.left = "";
+    bar.style.transform = "";
+    bar.style.maxWidth = "";
+    bar.style.overflow = "";
+    const vb = viewbarEl?.getBoundingClientRect();
+    const barRect = bar.getBoundingClientRect();
+    if (!vb || barRect.top >= vb.bottom || barRect.bottom <= vb.top) return;
+    const stageRect = container.getBoundingClientRect();
+    const plan = planAnimBarPlacement({
+      stageWidth: stageRect.width,
+      barWidth: barRect.width,
+      viewbarLeft: vb.left - stageRect.left,
+    });
+    if (!plan) return;
+    bar.style.left = `${plan.left}px`;
+    bar.style.transform = "none";
+    // maxWidth is the last resort, only reached when even the margin can't
+    // hold the gap — and the bar's flex children have hard minimums (~320px)
+    // that don't shrink to fit a tighter cap. overflow:hidden only applies
+    // here, inline, because a static rule in app.css would also clip the ⓘ
+    // info popover in the (far more common) uncapped state.
+    if (plan.maxWidth != null) {
+      bar.style.maxWidth = `${plan.maxWidth}px`;
+      bar.style.overflow = "hidden";
+    }
+  }
+  function schedulePlacement() {
+    if (typeof requestAnimationFrame !== "function") return applyPlacement();
+    if (!placementRaf) placementRaf = requestAnimationFrame(applyPlacement);
+  }
+  // Observing the bar itself catches content-driven width changes (step label
+  // text, animation switch); the viewbar, cutaway's actions; the stage, rail
+  // drags and window resizes.
+  const placementObserver = typeof ResizeObserver === "function"
+    ? new ResizeObserver(schedulePlacement) : null;
+  if (placementObserver) {
+    placementObserver.observe(container);
+    placementObserver.observe(bar);
+    if (viewbarEl) placementObserver.observe(viewbarEl);
+  }
+  schedulePlacement();
+
   const runtime = {
     // An unknown name is a host bug, not a request to play whatever happens to
     // be selected — say so and do nothing rather than silently animating
@@ -246,6 +379,8 @@ export function attachAnimationControls(viewer, part, { container, applyValues,
       pick.removeEventListener("change", onPick);
       resetBtn.removeEventListener("click", onResetClick);
       info.dispose();
+      placementObserver?.disconnect();
+      if (placementRaf && typeof cancelAnimationFrame === "function") cancelAnimationFrame(placementRaf);
       bar.remove();
     },
     __viewer: viewer, // test hook only

package/src/framework/app.css

@@ -222,6 +222,9 @@ button.action:focus-visible, .adv-toggle:focus-visible, #viewbar button:focus-vi
 .pf-anim-bar {
   display: flex; align-items: center; gap: 8px;
   padding: 6px 10px;
+  /* Never shorter than #viewbar's card sharing the same bottom edge:
+     34px button + 2×4px padding + 2×1px border (border-box). */
+  min-height: 44px;
   background: var(--pf-surface); border: 1px solid var(--pf-border);
   border-radius: var(--pf-radius-control); box-shadow: var(--pf-shadow-float);
 }
@@ -249,6 +252,11 @@ button.action:focus-visible, .adv-toggle:focus-visible, #viewbar button:focus-vi
   background: var(--pf-muted); pointer-events: none;
 }
 
+@media (max-width: 360px) {
+  /* #viewbar's card is 40px here (30px buttons) — keep the floor in step. */
+  .pf-anim-bar { min-height: 40px; }
+}
+
 /* 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

@@ -163,7 +163,10 @@
 
 /* --- animation transport bar (generated by animation-controls.js) ----------
    PLACEMENT ONLY, per the rule above; appearance lives in app.css next to
-   #viewbar's, so a host that re-anchors this bar still inherits its chrome. */
+   #viewbar's, so a host that re-anchors this bar still inherits its chrome.
+   animation-controls.js may inline-override left/transform/max-width (and
+   overflow while width-capped) to hold a 10px gap to #viewbar, and clears
+   the overrides whenever centered placement fits. */
 .pf-anim-bar {
   position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
   z-index: 15; max-width: calc(100% - 24px);