@hyperframes/studio 0.8.127 → 0.8.128

package/src/hooks/gsapValueAtPlayhead.test.ts

@@ -568,6 +568,19 @@ describe("planValueAtPlayhead", () => {
       });
     });
 
+    it("refuses an inner node of a motionPath tween, which GSAP runs power1.out", () => {
+      const path = kf([
+        { percentage: 0, properties: { x: 0 } },
+        { percentage: 50, properties: { x: 100 } },
+        { percentage: 100, properties: { x: 300 } },
+      ]);
+      const anim = { ...path, keyframes: { ...path.keyframes!, fromMotionPath: true as const } };
+      expect(plan({ anim, at: { time: 2 }, values: { x: 5 } })).toEqual({
+        ok: false,
+        reason: "eased-keyframes",
+      });
+    });
+
     it("changes an inner keyframe picked by its percentage, which the ease does not move", () => {
       const anim = {
         ...kf([

package/src/hooks/gsapValueAtPlayhead.ts

@@ -2,6 +2,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 import { resolveTweenDuration, resolveTweenStart } from "../utils/globalTimeCompiler";
+import { ARRAY_STEP_EASE, PERCENTAGE_SEGMENT_EASE, runEaseOf } from "../utils/gsapKeyframeEases";
 import { roundTo3 } from "../utils/rounding";
 import {
   materializeIfDynamic,
@@ -66,10 +67,8 @@ export type PlayheadEditPlan =
     }
   | { ok: false; reason: PlayheadEditRefusal };
 
-// GSAP 3.14 defaults: a percentage keyframe eases its segment power1.inOut; an array step is linear.
-const PERCENTAGE_SEGMENT_EASE = "power1.inOut";
-const ARRAY_STEP_EASE = "none";
 const roundPct = (pct: number) => Math.round(pct * 1000) / 1000;
+
 const isLinear = (ease: string | undefined) => !ease || ease === "none" || ease === "linear";
 
 interface Normalized {
@@ -92,7 +91,7 @@ function normalize(edit: PlayheadEdit): Normalized | { reason: PlayheadEditRefus
     const blocked = stepListBlock(anim);
     if (blocked) return { reason: blocked };
     return {
-      runEase: data.ease ?? anim.ease,
+      runEase: runEaseOf(anim),
       keyframes: data.keyframes.map((kf) => ({
         ...kf,
         properties: { ...kf.properties },

package/src/hooks/timelineEditingHelpers.test.ts

@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
 import { afterEach, describe, expect, it, vi } from "vitest";
 import {
+  applyTimelineMoveAttributes,
   applyTimelineStackingReorder,
   buildTimelineMoveTimingPatch,
   buildTimelineResizeTimingPatch,
@@ -316,6 +317,26 @@ describe("persistTimelineBatchEdit", () => {
     vi.unstubAllGlobals();
   });
 
+  it("syncs each file's root duration once, landing where per-member sync would", async () => {
+    const source = `<div id="root" data-composition-id="main" data-duration="4"><video id="a" class="clip" data-start="1" data-duration="1"></video><video id="b" class="clip" data-start="2" data-duration="1"></video><video id="c" class="clip" data-start="3" data-duration="1"></video></div>`;
+    const members = ["a", "b", "c"].map((id, i) => ({
+      element: el({ id, tag: "video", domId: id, start: i + 1, duration: 1 }),
+      buildPatches: (original: string, target: Parameters<typeof applyTimelineMoveAttributes>[1]) =>
+        applyTimelineMoveAttributes(original, target, i + 6, 1),
+    }));
+    stubReadFileContent(source);
+    const writes: Array<[string, string]> = [];
+    await persistTimelineBatchEdit(batchInput(members, writes));
+
+    const perMember = members.reduce(
+      (current, { element }, i) =>
+        buildTimelineMoveTimingPatch(current, { id: element.id }, i + 6, 1),
+      source,
+    );
+    expect(writes).toEqual([["index.html", perMember]]);
+    expect(perMember).toContain('data-duration="9"');
+  });
+
   it("skips no-op members instead of aborting the batch (track-insert renumber)", async () => {
     // A track-insert renumber can include a member whose attributes already
     // hold the target values — its patch is string-identical. The batch must

package/src/hooks/timelineEditingHelpers.ts

@@ -225,7 +225,7 @@ function resolveResizePlaybackStart(
   };
 }
 
-export function buildTimelineMoveTimingPatch(
+export function applyTimelineMoveAttributes(
   original: string,
   target: PatchTarget,
   start: number,
@@ -235,7 +235,7 @@ export function buildTimelineMoveTimingPatch(
 ): string {
   if (!Number.isFinite(start) || !Number.isFinite(duration)) {
     console.warn(
-      `[Timeline] buildTimelineMoveTimingPatch: non-finite timing (start=${start}, duration=${duration}) — patch skipped`,
+      `[Timeline] applyTimelineMoveAttributes: non-finite timing (start=${start}, duration=${duration}) — patch skipped`,
     );
     return original;
   }
@@ -257,15 +257,31 @@ export function buildTimelineMoveTimingPatch(
       property: "data-audio-group",
       value: null,
     });
-  // Content-driven duration: sync data-duration to the furthest clip end read
-  // from the PATCHED SOURCE (raw data-duration), so it grows if a clip moved
-  // past the end and shrinks if the furthest clip moved left. Measured from the
-  // source, NOT the store — store durations are runtime-truncated to the current
-  // comp length, which would ratchet the duration down every move.
-  return setCompositionDurationToContent(patched, furthestClipEndFromSource(patched));
+  return patched;
 }
 
-export function buildTimelineResizeTimingPatch(
+// Root data-duration follows the furthest clip end in the source; the store's durations are
+// truncated to the current length, so reading them would ratchet the duration down every edit.
+export function syncCompositionDurationToContent(source: string): string {
+  return setCompositionDurationToContent(source, furthestClipEndFromSource(source));
+}
+
+export function buildTimelineMoveTimingPatch(
+  original: string,
+  target: PatchTarget,
+  start: number,
+  duration: number,
+  track?: number,
+  audioGroup?: null,
+): string {
+  const patched = applyTimelineMoveAttributes(original, target, start, duration, track, audioGroup);
+  // A non-finite timing skips the patch above; skip the duration sync with it.
+  return !(Number.isFinite(start) && Number.isFinite(duration))
+    ? patched
+    : syncCompositionDurationToContent(patched);
+}
+
+export function applyTimelineResizeAttributes(
   original: string,
   target: PatchTarget,
   element: TimelineElement,
@@ -289,10 +305,13 @@ export function buildTimelineResizeTimingPatch(
       value: formatTimelineMediaOffset(pbs.value),
     });
   }
-  // Content-driven duration from the PATCHED SOURCE (raw data-duration) —
-  // grows/shrinks to the furthest clip end. Not from the store, whose
-  // durations are runtime-truncated.
-  return setCompositionDurationToContent(patched, furthestClipEndFromSource(patched));
+  return patched;
+}
+
+export function buildTimelineResizeTimingPatch(
+  ...args: Parameters<typeof applyTimelineResizeAttributes>
+): string {
+  return syncCompositionDurationToContent(applyTimelineResizeAttributes(...args));
 }
 
 export interface PersistTimelineEditInput {
@@ -305,6 +324,7 @@ export interface PersistTimelineEditInput {
   recordEdit: (input: RecordEditInput) => Promise<void>;
   pendingTimelineEditPathRef: React.MutableRefObject<Set<string>>;
   coalesceKey?: string;
+  coalesceMs?: number;
 }
 
 export async function persistTimelineEdit(input: PersistTimelineEditInput): Promise<void> {
@@ -319,6 +339,7 @@ export async function persistTimelineEdit(input: PersistTimelineEditInput): Prom
     projectId: input.projectId,
     label: input.label,
     coalesceKey: input.coalesceKey,
+    coalesceMs: input.coalesceMs,
     files: {
       [targetPath]: (current) => {
         const patched = input.buildPatches(current, patchTarget);
@@ -391,7 +412,12 @@ export async function persistTimelineBatchEdit(
     changesByPath.set(targetPath, [...(changesByPath.get(targetPath) ?? []), change]);
   }
   const buildFile = (targetPath: string) => (original: string) => {
-    const next = patchTimelineChangesInSource(original, targetPath, changesByPath.get(targetPath)!);
+    const patched = patchTimelineChangesInSource(
+      original,
+      targetPath,
+      changesByPath.get(targetPath)!,
+    );
+    const next = syncCompositionDurationToContent(patched);
     if (next !== original) input.pendingTimelineEditPathRef.current.add(targetPath);
     return next;
   };

package/src/hooks/timelineLinkEditPlan.ts

@@ -1,12 +1,14 @@
 import type { TimelineElement } from "../player";
 import type { TimelineLinkEdit } from "../player/components/timelineCallbacks";
-import { buildPatchTarget, type PatchTarget } from "./timelineEditingHelpers";
+import {
+  buildPatchTarget,
+  syncCompositionDurationToContent,
+  type PatchTarget,
+} from "./timelineEditingHelpers";
 import { sharesLinkGroup } from "../player/components/audioClipLink";
 import { toAuthoredStart } from "../player/store/timelineElement";
 import { formatTimelineMediaOffset } from "../player/components/timelineEditing";
 import { applyPatchByTarget } from "../utils/sourcePatcher";
-import { setCompositionDurationToContent } from "../utils/timelineAssetDrop";
-import { furthestClipEndFromSource } from "../player/lib/timelineElementHelpers";
 import {
   detachAudioInSource,
   linkInSource,
@@ -64,7 +66,7 @@ function planSyncEdit(edit: SyncEdit): LinkEditPlan | null {
           property: "start",
           value,
         });
-        return setCompositionDurationToContent(moved, furthestClipEndFromSource(moved));
+        return syncCompositionDurationToContent(moved);
       },
     };
   }

package/src/hooks/timelineMoveAdapter.ts

@@ -27,7 +27,6 @@ export type TimelineMoveEditsHandler = (
   edits: TimelineAtomicMoveEdit[],
   coalesceKey?: string,
   operation?: TimelineMoveOperation,
-  coalesceMs?: number,
 ) => Promise<void>;
 
 export function persistTimelineMoveEditsAtomically(
@@ -35,7 +34,6 @@ export function persistTimelineMoveEditsAtomically(
   coalesceKey: string | undefined,
   operation: TimelineMoveOperation,
   deps: AtomicMoveDeps,
-  coalesceMs?: number,
 ): Promise<void> {
   return deps.handleTimelineGroupMove(
     edits.map(({ element, updates }) => ({
@@ -48,7 +46,7 @@ export function persistTimelineMoveEditsAtomically(
       // ("timing") omit it so they stay eligible for the SDK fast path.
       track: operation === "timing" ? undefined : updates.track,
     })),
-    { coalesceKey, coalesceMs },
+    { coalesceKey },
   );
 }
 
@@ -56,9 +54,9 @@ export function useTimelineMoveEditsHandler(
   handleTimelineGroupMove: AtomicMoveDeps["handleTimelineGroupMove"],
 ): TimelineMoveEditsHandler {
   return useCallback(
-    async (edits, coalesceKey, operation: TimelineMoveOperation = "timing", coalesceMs) => {
+    async (edits, coalesceKey, operation: TimelineMoveOperation = "timing") => {
       const deps = { handleTimelineGroupMove };
-      await persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps, coalesceMs);
+      await persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps);
     },
     [handleTimelineGroupMove],
   );

package/src/hooks/timelineTimingSync.test.ts

@@ -7,6 +7,8 @@ import {
   captureDurationRollback,
   finishClipTimingFallback,
   finishGroupTimingGsapFallback,
+  finishTimelineTimingFallback,
+  foldGsapMutationIntoHistory,
   readFileContent,
   shiftGsapPositions,
 } from "./timelineTimingSync";
@@ -509,7 +511,7 @@ describe("nothing-to-rewrite timing edits rebind in place (no script re-executio
       changes: [{ element }, { element }],
       resolveChangePath: () => "index.html",
       // No domId → nothing to rewrite for ANY change (the gap-close blink path).
-      mutateChange: () => null,
+      mutationFor: () => null,
     });
 
     expect(reloadPreview).not.toHaveBeenCalled();
@@ -539,7 +541,7 @@ describe("nothing-to-rewrite timing edits rebind in place (no script re-executio
         { element: { sourceFile: "scenes/intro.html" } as TimelineElement },
       ],
       resolveChangePath: (el) => el.sourceFile ?? "index.html",
-      mutateChange: () => null,
+      mutationFor: () => null,
     });
 
     expect(reloadPreview).toHaveBeenCalledTimes(1);
@@ -658,32 +660,53 @@ function ownedMutation(contents: Map<string, string>, path: string, before: stri
   return { mutated: true, scriptText: null, before, after };
 }
 
-describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
-  const element = { sourceFile: "index.html" } as TimelineElement;
+type OwnedStep = () => Promise<ReturnType<typeof ownedMutation>>;
 
+/** Runs `steps` as one owned same-file transaction, wired the way a group edit wires it. */
+function runOwnedChain(
+  steps: readonly OwnedStep[],
+  options: {
+    reloadPreview?: () => void;
+    recordEdit?: (edit: never) => Promise<void>;
+  } = {},
+) {
+  const onGsapError = (err: unknown) =>
+    console.error("[Timeline] Failed to shift GSAP positions", err);
+  return finishTimelineTimingFallback({
+    iframe: buildLivePreviewIframe().iframe,
+    projectId: "p1",
+    reloadPreview: options.reloadPreview ?? vi.fn(),
+    gsapMutation: () =>
+      foldGsapMutationIntoHistory({
+        writeFile: writeProjectFile,
+        paths: ["index.html"],
+        projectId: "p1",
+        label: "Move timeline clips",
+        recordEdit: (options.recordEdit ?? vi.fn(async () => {})) as never,
+        gsapMutation: async (runOwnedMutation) => {
+          let status = { mutated: false, scriptText: null } as Awaited<ReturnType<OwnedStep>>;
+          for (const step of steps) status = await runOwnedMutation("index.html", step);
+          return status;
+        },
+        onRollbackError: onGsapError,
+      }),
+    onGsapError,
+    rebindWhenUnmutated: true,
+  });
+}
+
+describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
   it("reverse-rolls back every successful same-file step after a late failure", async () => {
     const contents = new Map<string, string>([["index.html", "ORIGINAL"]]);
     const server = installOwnedFileServer(contents);
-    let clipIndex = 0;
 
-    await finishGroupTimingGsapFallback({
-      writeProjectFile,
-      projectId: "p1",
-      iframe: buildLivePreviewIframe().iframe,
-      reloadPreview: vi.fn(),
-      label: "Move timeline clips",
-      errorLabel: "Failed to shift GSAP positions",
-      recordEdit: vi.fn(async () => {}) as never,
-      activeCompPath: "index.html",
-      changes: [{ element }, { element }, { element }],
-      resolveChangePath: () => "index.html",
-      mutateChange: async () => {
-        clipIndex += 1;
-        if (clipIndex === 1) return ownedMutation(contents, "index.html", "ORIGINAL", "STEP-1");
-        if (clipIndex === 2) return ownedMutation(contents, "index.html", "STEP-1", "STEP-2");
+    await runOwnedChain([
+      async () => ownedMutation(contents, "index.html", "ORIGINAL", "STEP-1"),
+      async () => ownedMutation(contents, "index.html", "STEP-1", "STEP-2"),
+      async () => {
         throw new Error("late failure");
       },
-    });
+    ]);
 
     expect(server.rollbacks).toEqual([
       { path: "index.html", expected: "STEP-2", restore: "STEP-1", conflict: false },
@@ -695,27 +718,13 @@ describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
   it("uses the endpoint's atomic before when a foreign write precedes mutation", async () => {
     const contents = new Map<string, string>([["index.html", "FOREIGN"]]);
     const server = installOwnedFileServer(contents);
-    let clipIndex = 0;
 
-    await finishGroupTimingGsapFallback({
-      writeProjectFile,
-      projectId: "p1",
-      iframe: buildLivePreviewIframe().iframe,
-      reloadPreview: vi.fn(),
-      label: "Move timeline clips",
-      errorLabel: "Failed to shift GSAP positions",
-      recordEdit: vi.fn(async () => {}) as never,
-      activeCompPath: "index.html",
-      changes: [{ element }, { element }],
-      resolveChangePath: () => "index.html",
-      mutateChange: async () => {
-        clipIndex += 1;
-        if (clipIndex === 1) {
-          return ownedMutation(contents, "index.html", "FOREIGN", "FOREIGN+OWNED");
-        }
+    await runOwnedChain([
+      async () => ownedMutation(contents, "index.html", "FOREIGN", "FOREIGN+OWNED"),
+      async () => {
         throw new Error("late failure");
       },
-    });
+    ]);
 
     expect(server.readCount()).toBe(0);
     expect(server.rollbacks[0]).toEqual({
@@ -732,26 +741,17 @@ describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
     const server = installOwnedFileServer(contents, {
       beforeRollback: () => contents.set("index.html", "SUCCESSOR"),
     });
-    let clipIndex = 0;
-
     const reloadPreview = vi.fn();
-    await finishGroupTimingGsapFallback({
-      writeProjectFile,
-      projectId: "p1",
-      iframe: buildLivePreviewIframe().iframe,
-      reloadPreview,
-      label: "Move timeline clips",
-      errorLabel: "Failed to shift GSAP positions",
-      recordEdit: vi.fn(async () => {}) as never,
-      activeCompPath: "index.html",
-      changes: [{ element }, { element }],
-      resolveChangePath: () => "index.html",
-      mutateChange: async () => {
-        clipIndex += 1;
-        if (clipIndex === 1) return ownedMutation(contents, "index.html", "ORIGINAL", "OWNED");
-        throw new Error("late failure");
-      },
-    });
+
+    await runOwnedChain(
+      [
+        async () => ownedMutation(contents, "index.html", "ORIGINAL", "OWNED"),
+        async () => {
+          throw new Error("late failure");
+        },
+      ],
+      { reloadPreview },
+    );
 
     expect(server.rollbacks[0]?.conflict).toBe(true);
     expect(contents.get("index.html")).toBe("SUCCESSOR");
@@ -763,25 +763,16 @@ describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
     installOwnedFileServer(contents, { failRollback: true });
     const reloadPreview = vi.fn();
     const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
-    let clipIndex = 0;
 
-    await finishGroupTimingGsapFallback({
-      writeProjectFile,
-      projectId: "p1",
-      iframe: buildLivePreviewIframe().iframe,
-      reloadPreview,
-      label: "Move timeline clips",
-      errorLabel: "Failed to shift GSAP positions",
-      recordEdit: vi.fn(async () => {}) as never,
-      activeCompPath: "index.html",
-      changes: [{ element }, { element }],
-      resolveChangePath: () => "index.html",
-      mutateChange: async () => {
-        clipIndex += 1;
-        if (clipIndex === 1) return ownedMutation(contents, "index.html", "ORIGINAL", "OWNED");
-        throw new Error("late failure");
-      },
-    });
+    await runOwnedChain(
+      [
+        async () => ownedMutation(contents, "index.html", "ORIGINAL", "OWNED"),
+        async () => {
+          throw new Error("late failure");
+        },
+      ],
+      { reloadPreview },
+    );
 
     expect(contents.get("index.html")).toBe("OWNED");
     expect(reloadPreview).toHaveBeenCalledTimes(1);
@@ -796,23 +787,13 @@ describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
     const server = installOwnedFileServer(contents);
     const recordEdit = vi.fn(async () => {});
 
-    await finishGroupTimingGsapFallback({
-      writeProjectFile,
-      projectId: "p1",
-      iframe: buildLivePreviewIframe().iframe,
-      reloadPreview: vi.fn(),
-      label: "Move timeline clips",
-      errorLabel: "Failed to shift GSAP positions",
-      recordEdit: recordEdit as never,
-      activeCompPath: "index.html",
-      changes: [{ element }, { element }],
-      resolveChangePath: () => "index.html",
-      mutateChange: async (_change, _path) => {
-        const before = contents.get("index.html")!;
-        const after = before === "FOREIGN" ? "FOREIGN+ONE" : "FOREIGN+ONE+TWO";
-        return ownedMutation(contents, "index.html", before, after);
-      },
-    });
+    await runOwnedChain(
+      [
+        async () => ownedMutation(contents, "index.html", "FOREIGN", "FOREIGN+ONE"),
+        async () => ownedMutation(contents, "index.html", "FOREIGN+ONE", "FOREIGN+ONE+TWO"),
+      ],
+      { recordEdit },
+    );
 
     expect(server.readCount()).toBe(1); // final ownership verification only
     expect(recordEdit).toHaveBeenCalledWith(
@@ -828,26 +809,15 @@ describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
     const contents = new Map<string, string>([["index.html", "ORIGINAL"]]);
     const server = installOwnedFileServer(contents);
     const recordEdit = vi.fn(async () => {});
-    let clipIndex = 0;
-
     const reloadPreview = vi.fn();
-    await finishGroupTimingGsapFallback({
-      writeProjectFile,
-      projectId: "p1",
-      iframe: buildLivePreviewIframe().iframe,
-      reloadPreview,
-      label: "Move timeline clips",
-      errorLabel: "Failed to shift GSAP positions",
-      recordEdit: recordEdit as never,
-      activeCompPath: "index.html",
-      changes: [{ element }, { element }],
-      resolveChangePath: () => "index.html",
-      mutateChange: async () => {
-        clipIndex += 1;
-        if (clipIndex === 1) return ownedMutation(contents, "index.html", "ORIGINAL", "STEP-1");
-        return ownedMutation(contents, "index.html", "FOREIGN", "FOREIGN+STEP-2");
-      },
-    });
+
+    await runOwnedChain(
+      [
+        async () => ownedMutation(contents, "index.html", "ORIGINAL", "STEP-1"),
+        async () => ownedMutation(contents, "index.html", "FOREIGN", "FOREIGN+STEP-2"),
+      ],
+      { recordEdit, reloadPreview },
+    );
 
     expect(recordEdit).not.toHaveBeenCalled();
     expect(server.rollbacks).toEqual([
@@ -867,19 +837,7 @@ describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
     const contents = new Map<string, string>([["index.html", "ORIGINAL"]]);
     const server = installOwnedFileServer(contents, { failReadAt: 1 });
 
-    await finishGroupTimingGsapFallback({
-      writeProjectFile,
-      projectId: "p1",
-      iframe: buildLivePreviewIframe().iframe,
-      reloadPreview: vi.fn(),
-      label: "Move timeline clips",
-      errorLabel: "Failed to shift GSAP positions",
-      recordEdit: vi.fn(async () => {}) as never,
-      activeCompPath: "index.html",
-      changes: [{ element }],
-      resolveChangePath: () => "index.html",
-      mutateChange: async () => ownedMutation(contents, "index.html", "ORIGINAL", "OWNED"),
-    });
+    await runOwnedChain([async () => ownedMutation(contents, "index.html", "ORIGINAL", "OWNED")]);
 
     expect(server.rollbacks[0]).toEqual({
       path: "index.html",