partforge 0.104.0 → 0.105.1

package/package.json

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

@@ -12,6 +12,7 @@
 // active — getView() is the driver's only window onto it.
 import { viewAnimations, createPlayback, stepIndexAt } from "./animation.js";
 import { createInfoPopover, attachInfo } from "./controls.js";
+import { stageClearFor } from "./stage-clear.js";
 
 function el(tag, className, text) {
   const node = document.createElement(tag);
@@ -237,7 +238,16 @@ export function attachAnimationControls(viewer, part, {
   const nextAnimBtn = btn("pf-anim-page", "›", "Next animation");
   bar.append(prevAnimBtn, pick, title);
   const infoSlot = el("span", "pf-anim-info");
-  const playBtn = btn("pf-anim-play", "▶", "Play animation");
+  // Inline SVGs, not the ▶/⏸ characters: U+23F8 takes its EMOJI presentation
+  // on iOS, so the pause glyph rendered as a color sticker in an otherwise
+  // monochrome bar. Both glyphs are PERSISTENT children toggled by the
+  // data-playing attribute (app.css) — the WebKit click-loss rule below
+  // forbids replacing the button's children while a press may be down, and an
+  // attribute write never eats a click.
+  const playBtn = btn("pf-anim-play", null, "Play animation");
+  playBtn.innerHTML =
+    '<svg class="pf-anim-glyph-play" viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M7 4.5v15l13-7.5z"/></svg>'
+    + '<svg class="pf-anim-glyph-pause" viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M7 4.5h3.4v15H7zM13.6 4.5H17v15h-3.6z"/></svg>';
   const scrubWrap = el("span", "pf-anim-scrub-wrap");
   const scrub = document.createElement("input");
   scrub.type = "range";
@@ -404,10 +414,12 @@ export function attachAnimationControls(viewer, part, {
   // 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 mid-press.
+  // 1. The play button's glyph flip is an ATTRIBUTE toggle over two persistent
+  //    SVG children (app.css keys which one shows on [data-playing]) — its
+  //    children are never touched after construction. This is the one that
+  //    matters, because it holds even when the glyph legitimately changes
+  //    under a held finger — playback ending mid-press. (The bubble's text
+  //    still goes through textSetter, the text-node form of the same rule.)
   // 2. Each element has its own renderer that leaves early when its own value
   //    is unchanged, so a playing transport touches only what actually moved:
   //    the scrubber's value, and aria-valuetext when it crosses a reporting
@@ -420,13 +432,12 @@ export function attachAnimationControls(viewer, part, {
   // 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);
   let shownActive = null;
 
   function renderPlayButton(active) {
     if (active === shownActive) return;
     shownActive = active;
-    setPlayGlyph(active ? "⏸" : "▶");
+    playBtn.toggleAttribute("data-playing", active);
     const label = active ? "Pause animation" : "Play animation";
     playBtn.setAttribute("aria-label", label);
     playBtn.title = label;
@@ -665,13 +676,14 @@ export function attachAnimationControls(viewer, part, {
     const barRect = bar.getBoundingClientRect();
     // Publish the bar's vertical claim on the stage as --pf-anim-clear: the
     // distance from the stage's bottom edge to the bar's top, 0px when the bar
-    // is hidden (a view with no animations). Hosts that float their own chrome
-    // at the stage's bottom-centre (partforge-cloud's status/forging stack)
-    // read it to sit above the bar instead of under it; with no bar mounted
-    // the property is never set and a var() fallback of 0px applies.
-    const clear = bar.style.display === "none"
-      ? 0
-      : Math.max(0, Math.round(stageRect.bottom - barRect.top));
+    // is hidden — by us (a view with no animations, sketch mode: the inline
+    // display) OR by a host stylesheet, which leaves our inline display alone
+    // and empties the bar's box, the case stageClearFor tests. Hosts that
+    // float their own chrome at the stage's bottom-centre (partforge-cloud's
+    // status/forging stack) read it to sit above the bar instead of under it;
+    // with no bar mounted the property is never set and a var() fallback of
+    // 0px applies.
+    const clear = bar.style.display === "none" ? 0 : stageClearFor(stageRect, barRect);
     container.style.setProperty("--pf-anim-clear", `${clear}px`);
     const cubeEl = container.querySelector(cubeSelector);
     const viewbarRect = viewbarEl?.getBoundingClientRect() ?? null;
@@ -692,8 +704,8 @@ export function attachAnimationControls(viewer, part, {
   // back in here.
   function isCrowded({ stageRect, barRect, viewbarRect, cubeRect, cubeEl }) {
     // A bar that is not on screen cannot be crowded by anything — the same
-    // condition the --pf-anim-clear calculation above uses.
-    if (bar.style.display === "none") return false;
+    // two conditions the --pf-anim-clear calculation above uses.
+    if (bar.style.display === "none" || barRect.height === 0) return false;
     const nominal = nominalClusterRect(viewbarRect, cubeRect, publishedSize(cubeEl));
     // Same vertical-band test the placement path applies, against the nominal
     // rect: bands that do not intersect cannot collide, so there is nothing to

package/src/framework/app.css

@@ -737,6 +737,14 @@ button.action:focus-visible, .adv-toggle:focus-visible, .sec-title:focus-visible
   cursor: pointer; font-size: 13px; padding: 2px 4px;
 }
 .pf-anim-bar button:hover { color: var(--pf-text-2); }
+/* Play/pause is two PERSISTENT inline SVGs toggled by [data-playing] — never
+   the ▶/⏸ characters (U+23F8 renders as a color emoji on iOS) and never a
+   child swap (WebKit drops a click whose press started on a replaced node —
+   see animation-controls.js). */
+.pf-anim-play { display: inline-flex; align-items: center; justify-content: center; }
+.pf-anim-play .pf-anim-glyph-pause { display: none; }
+.pf-anim-play[data-playing] .pf-anim-glyph-play { display: none; }
+.pf-anim-play[data-playing] .pf-anim-glyph-pause { display: block; }
 .pf-anim-title, .pf-anim-pick {
   font-family: var(--pf-mono); font-size: 11px; color: var(--pf-text-2);
 }
@@ -845,6 +853,20 @@ button.action:focus-visible, .adv-toggle:focus-visible, .sec-title:focus-visible
   .pf-anim-scrub { min-height: 44px; }
 }
 
+/* On a phone the full transport is a two-row player squatting on a small
+   stage. Collapse it to the decisions that matter — which animation, and
+   play/pause: the timeline, reset and ⓘ stand down below the narrow
+   breakpoint. WIDTH-keyed, deliberately not the coarse-pointer condition the
+   target-size block above shares: a coarse-pointer iPad has the room and
+   keeps the full transport; only the small screen loses the player bar.
+   Playback itself still visits every chapter; scrubbing wants a real
+   screen. */
+@media (max-width: 719px) {
+  .pf-anim-bar .pf-anim-scrub-wrap,
+  .pf-anim-bar .pf-anim-reset,
+  .pf-anim-bar .pf-anim-info { display: none; }
+}
+
 /* 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/mount.js

@@ -33,6 +33,7 @@ import { createAnnotateMode } from "./annotate/annotate-mode.js";
 import { attachAnnotateControls } from "./annotate/annotate-controls.js";
 import { attachSketchToolbar } from "./annotate/sketch-toolbar.js";
 import { attachViewcubeControls } from "./viewcube/viewcube-controls.js";
+import { stageClearFor } from "./stage-clear.js";
 
 // The mount handle, factored out so its shape is unit-testable without booting
 // the full mount() pipeline (WASM + workers + DOM).
@@ -599,16 +600,14 @@ export function mount(part, { createWorker, elements = {}, onBuild, onPick, onDo
     }
     // Publish the viewbar's vertical claim so chrome.css can stack the cube on
     // top of it without hardcoding a height that cutaway/measure/annotate
-    // action rows can change.
+    // action rows can change. A hidden bar (ours or a host stylesheet's)
+    // claims 0 — stage-clear.js has the why; the observer fires on the hide
+    // itself, since the bar's box goes to zero.
     const viewbarEl = els.viewer.querySelector("#viewbar");
     if (viewbarEl && typeof ResizeObserver === "function") {
       const publishViewbarClear = () => {
-        const stageRect = els.viewer.getBoundingClientRect();
-        const barRect = viewbarEl.getBoundingClientRect();
-        els.viewer.style.setProperty(
-          "--pf-viewbar-clear",
-          `${Math.max(0, Math.round(stageRect.bottom - barRect.top))}px`,
-        );
+        const clear = stageClearFor(els.viewer.getBoundingClientRect(), viewbarEl.getBoundingClientRect());
+        els.viewer.style.setProperty("--pf-viewbar-clear", `${clear}px`);
       };
       const viewbarObserver = new ResizeObserver(publishViewbarClear);
       viewbarObserver.observe(viewbarEl);

package/src/framework/stage-clear.js

@@ -0,0 +1,18 @@
+// The one arithmetic behind the stage's two "clearance" custom properties —
+// --pf-viewbar-clear (mount.js) and --pf-anim-clear (animation-controls.js):
+// how far up from the stage's bottom edge a floating bar reaches, so chrome
+// that stacks above it (the view cube, a host's status pills) can sit clear.
+//
+// A bar with NO BOX claims nothing. `getBoundingClientRect()` on a
+// `display: none` element is all zeros, and `stageRect.bottom - 0` is the
+// stage's bottom edge in viewport pixels — the whole stage height, or more.
+// Publishing that would fling everything stacked on the bar off the top of
+// the stage. The inline-style check the anim bar used to make
+// (`bar.style.display === "none"`) only saw its own hide; a host hiding the
+// bar from a stylesheet (partforge-cloud's part-open sheet does exactly that
+// to #viewbar and .pf-anim-bar) left the publishers measuring the zero rect.
+// The rect itself is the test: hidden by anyone, for any reason, it is empty.
+export function stageClearFor(stageRect, barRect) {
+  if (!barRect || barRect.height === 0) return 0;
+  return Math.max(0, Math.round(stageRect.bottom - barRect.top));
+}