feat(studio): MotionPathPlugin arc motion + design panel redesign

.fallowrc.jsonc

@@ -96,6 +96,20 @@
       "file": "packages/cli/src/commands/render.ts",
       "exports": ["resolveBrowserGpuForCli", "renderLocal"],
     },
+    // captureCost.ts: constants and helpers consumed by the runCaptureCalibration
+    // orchestration function and tests, but the entry-point graph doesn't
+    // reach them because the orchestrator's caller resolves them dynamically.
+    {
+      "file": "packages/producer/src/services/render/captureCost.ts",
+      "exports": [
+        "CAPTURE_CALIBRATION_TARGET_MS",
+        "MAX_MEASURED_CAPTURE_COST_MULTIPLIER",
+        "CAPTURE_CALIBRATION_PROTOCOL_TIMEOUT_MS",
+        "measureCaptureCostFromSession",
+        "logCaptureCalibrationResult",
+        "createFailedCaptureCalibrationEstimate",
+      ],
+    },
   ],
   "ignoreDependencies": [
     // Runtime/dynamic deps not visible to static analysis: tsup `external`,

packages/cli/src/commands/render.ts

@@ -249,6 +249,20 @@ export default defineCommand({
         "readiness poll has its own 45s budget). " +
         "Env fallback: PRODUCER_PAGE_NAVIGATION_TIMEOUT_MS (MILLISECONDS).",
     },
+    "protocol-timeout": {
+      type: "string",
+      description:
+        "CDP protocol timeout in ms. Increase on slow/low-memory machines " +
+        "where Chrome operations time out. Default: 300000 (5 min). " +
+        "Env: PRODUCER_PUPPETEER_PROTOCOL_TIMEOUT_MS.",
+    },
+    "player-ready-timeout": {
+      type: "string",
+      description:
+        "Timeout in ms for the composition player to become ready. " +
+        "Increase for complex compositions on slow hardware. Default: 45000 (45 s). " +
+        "Env: PRODUCER_PLAYER_READY_TIMEOUT_MS.",
+    },
   },
   // `run` is the citty handler for `hyperframes render` — sequential flag
   // validation + render dispatch. Inherited CRITICAL on main (CRAP 1290);
@@ -326,6 +340,32 @@ export default defineCommand({
       workers = parsed;
     }
 
+    // ── Validate timeout overrides ─────────────────────────────────────
+    let protocolTimeout: number | undefined;
+    if (args["protocol-timeout"] != null) {
+      const parsed = parseInt(args["protocol-timeout"], 10);
+      if (isNaN(parsed) || parsed < 1000) {
+        errorBox(
+          "Invalid protocol-timeout",
+          `Got "${args["protocol-timeout"]}". Must be a number >= 1000 (ms).`,
+        );
+        process.exit(1);
+      }
+      protocolTimeout = parsed;
+    }
+    let playerReadyTimeout: number | undefined;
+    if (args["player-ready-timeout"] != null) {
+      const parsed = parseInt(args["player-ready-timeout"], 10);
+      if (isNaN(parsed) || parsed < 1000) {
+        errorBox(
+          "Invalid player-ready-timeout",
+          `Got "${args["player-ready-timeout"]}". Must be a number >= 1000 (ms).`,
+        );
+        process.exit(1);
+      }
+      playerReadyTimeout = parsed;
+    }
+
     // ── Wire opt-in: page-side compositing ───────────────────────────────
     if (args["page-side-compositing"] === false) {
       process.env.HF_PAGE_SIDE_COMPOSITING = "false";
@@ -347,6 +387,7 @@ export default defineCommand({
     // ── Resolve output path ───────────────────────────────────────────────
     const rendersDir = resolve("renders");
     const ext = FORMAT_EXT[format] ?? ".mp4";
+    // fallow-ignore-next-line code-duplication
     const now = new Date();
     const datePart = now.toISOString().slice(0, 10);
     const timePart = now.toTimeString().slice(0, 8).replace(/:/g, "-");
@@ -528,6 +569,8 @@ export default defineCommand({
         outputResolution,
         pageSideCompositing: args["page-side-compositing"] !== false,
         pageNavigationTimeoutMs,
+        protocolTimeout,
+        playerReadyTimeout,
         exitAfterComplete: true,
       });
     } else {
@@ -547,6 +590,8 @@ export default defineCommand({
         entryFile,
         outputResolution,
         pageNavigationTimeoutMs,
+        protocolTimeout,
+        playerReadyTimeout,
         exitAfterComplete: true,
       });
     }
@@ -583,6 +628,10 @@ interface RenderOptions {
    * producer's EngineConfig override.
    */
   pageNavigationTimeoutMs?: number;
+  /** CDP protocol timeout override (ms). */
+  protocolTimeout?: number;
+  /** Player-ready timeout override (ms). */
+  playerReadyTimeout?: number;
 }
 
 /**
@@ -848,6 +897,7 @@ async function renderDocker(
   if (options.exitAfterComplete) scheduleRenderProcessExit();
 }
 
+// fallow-ignore-next-line complexity
 export async function renderLocal(
   projectDir: string,
   outputPath: string,
@@ -885,6 +935,8 @@ export async function renderLocal(
       ...(options.pageNavigationTimeoutMs != null
         ? { pageNavigationTimeout: options.pageNavigationTimeoutMs }
         : {}),
+      ...(options.protocolTimeout != null && { protocolTimeout: options.protocolTimeout }),
+      ...(options.playerReadyTimeout != null && { playerReadyTimeout: options.playerReadyTimeout }),
     }),
     hdrMode: options.hdrMode,
     crf: options.crf,

packages/core/scripts/test-hyperframe-runtime-seek.ts

@@ -93,12 +93,18 @@ function testGsapAdapterPreservesTotalTime(): void {
   const { calls, timeline } = createTimeline(true);
   const adapter = createGsapAdapter({ getTimeline: () => timeline });
 
-  adapter.seek({ time: 2.033333333333333 });
+  const seekTime = 2.033333333333333;
+  adapter.seek({ time: seekTime });
 
   assert.deepEqual(
     calls,
-    [{ method: "pause" }, { method: "totalTime", time: 2.033333333333333, suppressEvents: false }],
-    "GSAP adapter should not downgrade deterministic seeks back to seek()",
+    [
+      { method: "pause" },
+      // Nudge to force GSAP 3.x dirty state before the real seek
+      { method: "totalTime", time: seekTime + 0.001, suppressEvents: true },
+      { method: "totalTime", time: seekTime, suppressEvents: false },
+    ],
+    "GSAP adapter should nudge then seek via totalTime() (not downgrade to seek())",
   );
 }
 

packages/core/src/generators/hyperframes.ts

@@ -7,7 +7,12 @@ import {
 } from "../core.types";
 import type { GsapAnimation } from "../parsers/gsapParser";
 import { serializeGsapAnimations, keyframesToGsapAnimations } from "../parsers/gsapParser";
-import { GSAP_CDN, BASE_STYLES, ZOOM_CONTAINER_STYLES } from "../templates/constants";
+import {
+  GSAP_CDN,
+  MOTIONPATH_CDN,
+  BASE_STYLES,
+  ZOOM_CONTAINER_STYLES,
+} from "../templates/constants";
 
 const GOOGLE_FONTS_BASE = "https://fonts.googleapis.com/css2";
 const FONT_WEIGHTS: Record<string, string> = {
@@ -337,6 +342,10 @@ export function generateHyperframesHtml(
     : "";
 
   const gsapCdnTag = includeScripts ? `  <script src="${GSAP_CDN}"></script>` : "";
+  const motionPathCdnTag =
+    includeScripts && gsapScript && /motionPath\s*[:{]/.test(gsapScript)
+      ? `\n  <script src="${MOTIONPATH_CDN}"></script>`
+      : "";
 
   const gsapScriptTag = includeScripts
     ? `  <script>
@@ -373,7 +382,7 @@ ${gsapScript}
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   ${includeStyles ? googleFontsLink : ""}
-  ${gsapCdnTag}
+  ${gsapCdnTag}${motionPathCdnTag}
 ${styleTags ? `  ${styleTags}` : ""}
 </head>
 <body>

packages/core/src/parsers/gsapParser.stress.test.ts

@@ -869,16 +869,18 @@ describe("Additional edge cases", () => {
     expect(result.animations[1].targetSelector).toBe("#el2");
   });
 
-  it("skips a variable target that is not bound to a DOM lookup", () => {
+  it("marks a variable target that is not bound to a DOM lookup as __unresolved__", () => {
     const script = `
       const tl = gsap.timeline({ paused: true });
       tl.to(mysteryTarget, { opacity: 1, duration: 0.5 }, 0);
       tl.to("#el2", { x: 100, duration: 0.5 }, 0);
     `;
     const result = parseGsapScript(script);
-    // mysteryTarget has no resolvable selector binding — only the literal survives.
-    expect(result.animations).toHaveLength(1);
-    expect(result.animations[0].targetSelector).toBe("#el2");
+    // mysteryTarget has no resolvable selector binding — kept with __unresolved__ marker.
+    expect(result.animations).toHaveLength(2);
+    expect(result.animations[0].targetSelector).toBe("__unresolved__");
+    expect(result.animations[0].hasUnresolvedSelector).toBe(true);
+    expect(result.animations[1].targetSelector).toBe("#el2");
   });
 
   it("boolean values in vars are not included in properties", () => {

packages/core/src/parsers/gsapParser.test.ts

@@ -920,14 +920,16 @@ describe("variable-target resolution (querySelector pattern)", () => {
     expect(result.animations[2].extras?.stagger).toBe("__raw:0.1");
   });
 
-  it("leaves unresolvable variable targets out of the animation list", () => {
+  it("marks unresolvable variable targets with __unresolved__ and hasUnresolvedSelector", () => {
     const script = `
       const tl = gsap.timeline({ paused: true });
       tl.to(someUnknownThing, { opacity: 1, duration: 0.5 }, 0);
       tl.to(".real", { opacity: 1, duration: 0.5 }, 1);
     `;
     const result = parseGsapScript(script);
-    expect(result.animations.map((a) => a.targetSelector)).toEqual([".real"]);
+    expect(result.animations.map((a) => a.targetSelector)).toEqual(["__unresolved__", ".real"]);
+    expect(result.animations[0].hasUnresolvedSelector).toBe(true);
+    expect(result.animations[1].hasUnresolvedSelector).toBeUndefined();
   });
 });
 
@@ -1502,3 +1504,138 @@ describe("keyframe mutations", () => {
     expect(anim.properties.opacity).toBe(1);
   });
 });
+
+describe("motionPath parsing", () => {
+  it("parses motionPath with waypoint array and curviness", () => {
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#el", {
+        motionPath: {
+          path: [{x: 0, y: 0}, {x: 200, y: -100}, {x: 400, y: 50}],
+          curviness: 1.5
+        },
+        duration: 2
+      }, 0);
+    `;
+    const result = parseGsapScript(script);
+    expect(result.animations).toHaveLength(1);
+    const anim = result.animations[0];
+
+    expect(anim.arcPath).toBeDefined();
+    expect(anim.arcPath!.enabled).toBe(true);
+    expect(anim.arcPath!.segments).toHaveLength(2);
+    expect(anim.arcPath!.segments[0].curviness).toBe(1.5);
+    expect(anim.arcPath!.segments[1].curviness).toBe(1.5);
+
+    expect(anim.keyframes).toBeDefined();
+    expect(anim.keyframes!.keyframes).toHaveLength(3);
+    expect(anim.keyframes!.keyframes[0].properties.x).toBe(0);
+    expect(anim.keyframes!.keyframes[0].properties.y).toBe(0);
+    expect(anim.keyframes!.keyframes[1].properties.x).toBe(200);
+    expect(anim.keyframes!.keyframes[1].properties.y).toBe(-100);
+    expect(anim.keyframes!.keyframes[2].properties.x).toBe(400);
+    expect(anim.keyframes!.keyframes[2].properties.y).toBe(50);
+  });
+
+  it("parses motionPath with type cubic and explicit control points", () => {
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#el", {
+        motionPath: {
+          path: [
+            {x: 0, y: 0},
+            {x: 50, y: -80}, {x: 150, y: -120},
+            {x: 200, y: -100},
+            {x: 250, y: -80}, {x: 350, y: 30},
+            {x: 400, y: 50}
+          ],
+          type: "cubic"
+        },
+        duration: 2
+      }, 0);
+    `;
+    const result = parseGsapScript(script);
+    const anim = result.animations[0];
+
+    expect(anim.arcPath).toBeDefined();
+    expect(anim.arcPath!.segments).toHaveLength(2);
+
+    expect(anim.arcPath!.segments[0].cp1).toEqual({ x: 50, y: -80 });
+    expect(anim.arcPath!.segments[0].cp2).toEqual({ x: 150, y: -120 });
+
+    expect(anim.arcPath!.segments[1].cp1).toEqual({ x: 250, y: -80 });
+    expect(anim.arcPath!.segments[1].cp2).toEqual({ x: 350, y: 30 });
+
+    expect(anim.keyframes!.keyframes).toHaveLength(3);
+    expect(anim.keyframes!.keyframes[0].properties).toEqual({ x: 0, y: 0 });
+    expect(anim.keyframes!.keyframes[1].properties).toEqual({ x: 200, y: -100 });
+    expect(anim.keyframes!.keyframes[2].properties).toEqual({ x: 400, y: 50 });
+  });
+
+  it("parses motionPath with autoRotate", () => {
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#el", {
+        motionPath: {
+          path: [{x: 0, y: 0}, {x: 200, y: 100}],
+          autoRotate: true
+        },
+        duration: 1
+      }, 0);
+    `;
+    const result = parseGsapScript(script);
+    const anim = result.animations[0];
+    expect(anim.arcPath!.autoRotate).toBe(true);
+  });
+
+  it("merges motionPath waypoints into existing keyframes", () => {
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#el", {
+        motionPath: {
+          path: [{x: 0, y: 0}, {x: 200, y: 100}],
+          curviness: 2
+        },
+        keyframes: {
+          "0%": { opacity: 1 },
+          "100%": { opacity: 0 }
+        },
+        duration: 2
+      }, 0);
+    `;
+    const result = parseGsapScript(script);
+    const anim = result.animations[0];
+
+    expect(anim.arcPath).toBeDefined();
+    expect(anim.arcPath!.segments).toHaveLength(1);
+    expect(anim.arcPath!.segments[0].curviness).toBe(2);
+
+    expect(anim.keyframes!.keyframes).toHaveLength(2);
+    expect(anim.keyframes!.keyframes[0].properties).toEqual({ opacity: 1, x: 0, y: 0 });
+    expect(anim.keyframes!.keyframes[1].properties).toEqual({ opacity: 0, x: 200, y: 100 });
+  });
+
+  it("skips motionPath with fewer than 2 waypoints", () => {
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#el", {
+        motionPath: { path: [{x: 0, y: 0}] },
+        duration: 1
+      }, 0);
+    `;
+    const result = parseGsapScript(script);
+    expect(result.animations[0].arcPath).toBeUndefined();
+  });
+
+  it("tween without motionPath parses identically to before", () => {
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#el", { x: 100, y: 200, duration: 1 }, 0);
+    `;
+    const result = parseGsapScript(script);
+    const anim = result.animations[0];
+    expect(anim.arcPath).toBeUndefined();
+    expect(anim.properties.x).toBe(100);
+    expect(anim.properties.y).toBe(200);
+  });
+});