partforge 0.104.0 → 0.105.0

package/package.json

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

@@ -237,7 +237,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 +413,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 +431,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;

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