@pygmalionjs/pygmalion 0.6.4 → 0.6.5

package/dist-lib/testing.js

@@ -1,4 +1,4 @@
-import { F as s, N as a, e as r, s as i, a as t } from "./FrozenRoutePreview-V9-gxIyv.js";
+import { F as s, N as a, e as r, s as i, a as t } from "./FrozenRoutePreview-BVYL3dLT.js";
 export {
   s as FrozenRoutePreviewView,
   a as NodeModel,

package/docs/screen-state-contract.md

@@ -66,15 +66,18 @@ Pygmalion discovers visible CSS animation owners, animated pseudo elements,
 matching animation rules, and Web Animations API targets while it serializes a
 screen. It stamps every target into the inert preview and lists them under
 **Motion**. Reviewers can play all motion together, isolate one target, pause
-it, reset it to the deterministic capture point, or scrub through one cycle
+it, reset it to the deterministic visual baseline, or scrub through one cycle
 with the Phase control.
 
 Motion discovery has no semantic or size threshold. Small progress dots,
 ordinary status indicators, shimmer bars, and full-surface animation receive
-the same control. The default preview remains frozen at the start of its
-animation timeline so screenshots and visual comparisons stay repeatable.
-Using a Motion control temporarily switches an imported frame back to its
-source DOM preview, including while the editor is in Editing mode.
+the same control. The default preview holds finite animations at their terminal
+state and repeating animations at the start of their cycle. This keeps entrance
+motion from hiding the base UI while screenshots and visual comparisons remain
+repeatable. Play, Pause, or Phase explicitly enters the motion timeline at the
+selected phase; Reset restores the visual baseline. Using a Motion control
+temporarily switches an imported frame back to its source DOM preview,
+including while the editor is in Editing mode.
 
 An animation does not need duplicate frames merely to show several points in
 its cycle. Preserve a separate frame only when the motion ends in an independent

package/node/storyboard-capture-runtime.mjs

@@ -94,11 +94,40 @@ function throwIfAborted(signal) {
   }
 }
 
-function resetStoryboardAnimations() {
+/**
+ * Holds one-shot motion at its terminal visual state while keeping repeating
+ * motion at a deterministic cycle origin. A frozen screen is the review
+ * baseline, so an entrance animation must not make its own content disappear.
+ *
+ * This function runs through page.evaluate and must remain self-contained.
+ */
+export function settleStoryboardAnimations() {
   for (const animation of document.getAnimations?.({ subtree: true }) ?? []) {
     try {
       animation.pause();
-      animation.currentTime = 0;
+      const timing = animation.effect?.getComputedTiming?.();
+      const computedEndTime = Number(timing?.endTime);
+      if (Number.isFinite(computedEndTime)) {
+        animation.currentTime = Math.max(0, computedEndTime);
+        continue;
+      }
+      if (computedEndTime === Number.POSITIVE_INFINITY) {
+        animation.currentTime = 0;
+        continue;
+      }
+
+      // Browser timing objects expose endTime, but the fallback keeps custom
+      // Animation implementations and older engines deterministic as well.
+      const duration = Number(timing?.duration);
+      const iterations =
+        timing?.iterations == null ? 1 : Number(timing.iterations);
+      const delay = Number(timing?.delay ?? 0);
+      const endDelay = Number(timing?.endDelay ?? 0);
+      const fallbackEndTime =
+        delay + duration * Math.max(0, iterations) + endDelay;
+      animation.currentTime = Number.isFinite(fallbackEndTime)
+        ? Math.max(0, fallbackEndTime)
+        : 0;
     } catch {
       // An animation owned by an unavailable timeline remains CSS-paused.
     }
@@ -112,7 +141,7 @@ async function freezeStoryboardMotion(page, addStyle = true) {
       element.setAttribute('data-pygmalion-preview', 'frozen');
     });
   }
-  await page.evaluate(resetStoryboardAnimations);
+  await page.evaluate(settleStoryboardAnimations);
 }
 
 async function atCaptureStage(stage, task, details = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pygmalionjs/pygmalion",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Code-backed DOM design sandbox and visual QA editor",
   "license": "UNLICENSED",
   "publishConfig": {