@hyperframes/studio 0.7.75 → 0.7.77

package/src/hooks/useTimelineEditing.test.tsx

@@ -10,6 +10,17 @@ import { jsonResponse, requestUrl } from "./fetchStubTestUtils";
 import { useElementLifecycleOps } from "./useElementLifecycleOps";
 import { useTimelineEditing } from "./useTimelineEditing";
 
+vi.mock("../components/editor/manualEditingAvailability", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("../components/editor/manualEditingAvailability")>();
+  return {
+    ...actual,
+    STUDIO_SDK_CUTOVER_ENABLED: true,
+    STUDIO_SDK_CUTOVER_FAMILIES: new Set(["timing"]),
+    STUDIO_SDK_RESOLVER_SHADOW_ENABLED: false,
+  };
+});
+
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 type ZIndexEntry = {
@@ -108,7 +119,9 @@ function renderTimelineEditingHook(input: {
   }) => Promise<void>;
   reloadPreview?: () => void;
   sdkSession?: Awaited<ReturnType<typeof openComposition>> | null;
+  publishSdkSession?: NonNullable<Parameters<typeof useTimelineEditing>[0]["publishSdkSession"]>;
   forceReloadSdkSession?: () => void;
+  invalidateGsapCache?: () => void;
   showToast?: (message: string, kind?: string) => void;
 }): {
   move: ReturnType<typeof useTimelineEditing>["handleTimelineElementMove"];
@@ -140,7 +153,9 @@ function renderTimelineEditingHook(input: {
       pendingTimelineEditPathRef: { current: new Set<string>() },
       uploadProjectFiles: vi.fn(),
       sdkSession: input.sdkSession,
+      publishSdkSession: input.publishSdkSession,
       forceReloadSdkSession: input.forceReloadSdkSession,
+      invalidateGsapCache: input.invalidateGsapCache,
       handleDomZIndexReorderCommitRef: commitRef,
     });
     move = hook.handleTimelineElementMove;
@@ -163,6 +178,9 @@ function renderTimelineEditingHook(input: {
 type TimelineRecordEdit = NonNullable<
   Parameters<typeof renderTimelineEditingHook>[0]["recordEdit"]
 >;
+type TimelinePublishSdkSession = NonNullable<
+  Parameters<typeof renderTimelineEditingHook>[0]["publishSdkSession"]
+>;
 
 function renderTimelineEditingHookWithLifecycle(input: {
   timelineElements: TimelineElement[];
@@ -227,28 +245,41 @@ async function flushAsyncWork(): Promise<void> {
  * with `gsapBody`. Returns the mock for call inspection.
  */
 function stubProjectFetch(files: string | Record<string, string>, gsapBody?: unknown) {
-  // Keep this test server's capability, file-read, and mutation routes together;
-  // splitting the fixture would obscure the request sequence asserted by callers.
-  // fallow-ignore-next-line complexity
-  const fetchMock = vi.fn(async (input: Parameters<typeof fetch>[0]): Promise<Response> => {
-    const url = requestUrl(input);
-    if (url.includes("/api/projects/p1/gsap-mutation-capabilities")) {
-      return jsonResponse({ atomicOwnershipPairs: true });
-    }
-    if (url.includes("/api/projects/p1/files/")) {
-      if (typeof files === "string") return jsonResponse({ content: files });
-      const path = decodeURIComponent(url.split("/files/")[1] ?? "index.html");
-      return jsonResponse({ content: files[path] });
-    }
-    if (url.includes("/api/projects/p1/gsap-mutations/")) {
-      const path = decodeURIComponent(url.split("/gsap-mutations/")[1] ?? "index.html");
-      const content = typeof files === "string" ? files : (files[path] ?? "");
-      return jsonResponse(
-        gsapBody ?? { mutated: false, scriptText: null, before: content, after: content },
-      );
-    }
-    throw new Error(`Unexpected fetch: ${url}`);
-  });
+  const pathAfter = (url: string, marker: string) =>
+    decodeURIComponent(url.split(marker)[1] ?? "index.html");
+  const fileContent = (path: string) => (typeof files === "string" ? files : files[path]);
+  // One handler per route, so the mock itself stays a lookup: the request
+  // sequence callers assert on is still readable top to bottom.
+  const routes: Array<[marker: string, respond: (url: string) => Response]> = [
+    [
+      "/api/projects/p1/gsap-mutation-capabilities",
+      () => jsonResponse({ atomicOwnershipPairs: true }),
+    ],
+    [
+      "/api/projects/p1/files/",
+      (url) => jsonResponse({ content: fileContent(pathAfter(url, "/files/")) }),
+    ],
+    [
+      "/api/projects/p1/gsap-mutations/",
+      (url) => {
+        const content = fileContent(pathAfter(url, "/gsap-mutations/")) ?? "";
+        return jsonResponse(
+          gsapBody ?? { mutated: false, scriptText: null, before: content, after: content },
+        );
+      },
+    ],
+  ];
+  const fetchMock = vi.fn(
+    async (
+      input: Parameters<typeof fetch>[0],
+      _init?: Parameters<typeof fetch>[1],
+    ): Promise<Response> => {
+      const url = requestUrl(input);
+      const route = routes.find(([marker]) => url.includes(marker));
+      if (!route) throw new Error(`Unexpected fetch: ${url}`);
+      return route[1](url);
+    },
+  );
   vi.stubGlobal("fetch", fetchMock);
   return fetchMock;
 }
@@ -285,6 +316,39 @@ function setupSingleClipHarness(options?: {
   return { iframe, clip, commit, writeProjectFile, reloadPreview, fetchMock, ...hook };
 }
 
+const SDK_KEYFRAMED_SOURCE = [
+  `<div data-hf-id="hf-stage" data-hf-root data-composition-id="main" data-duration="10">`,
+  `  <div id="clip" data-hf-id="hf-clip" data-start="1" data-duration="2"></div>`,
+  `</div>`,
+  `<script>`,
+  `const tl = gsap.timeline({ paused: true });`,
+  `tl.to("#clip", { keyframes: [{ x: 0 }, { x: 100 }], duration: 2 }, 1);`,
+  `window.__timelines = [tl];`,
+  `</script>`,
+].join("\n");
+
+async function setupSdkKeyframedClipHarness() {
+  const iframe = createPreviewIframe([{ id: "clip", track: 0 }]);
+  const clip = timelineElement({ id: "clip", track: 0, zIndex: 0, start: 1 });
+  const sdkSession = await openComposition(SDK_KEYFRAMED_SOURCE);
+  const writeProjectFile = vi.fn<(...args: unknown[]) => Promise<void>>(async () => {});
+  const invalidateGsapCache = vi.fn();
+  const fetchMock = stubProjectFetch(SDK_KEYFRAMED_SOURCE);
+  usePlayerStore.getState().setDuration(10);
+  const hook = renderTimelineEditingHook({
+    timelineElements: [clip],
+    iframe,
+    onZIndexCommit: vi.fn().mockResolvedValue(undefined),
+    projectId: "p1",
+    writeProjectFile,
+    recordEdit: vi.fn(async () => {}),
+    sdkSession,
+    publishSdkSession: vi.fn<TimelinePublishSdkSession>(() => "published"),
+    invalidateGsapCache,
+  });
+  return { clip, fetchMock, hook, invalidateGsapCache, writeProjectFile };
+}
+
 /** Assert a lane write landed in both the live iframe DOM and the persisted file. */
 function expectLanePersisted(
   iframe: HTMLIFrameElement,
@@ -710,6 +774,58 @@ describe("useTimelineEditing timeline z-index reorder", () => {
     h.unmount();
   });
 
+  it("shifts authored GSAP positions after an SDK-backed clip move commits", async () => {
+    const { clip, fetchMock, hook, invalidateGsapCache, writeProjectFile } =
+      await setupSdkKeyframedClipHarness();
+
+    await act(async () => {
+      await hook.move(clip, { start: 2.25, track: clip.track });
+    });
+
+    expect(writeProjectFile.mock.calls[0]?.[1]).toContain('data-start="2.25"');
+    const mutationCall = fetchMock.mock.calls.find((call) =>
+      requestUrl(call[0]).includes("/gsap-mutations/"),
+    );
+    expect(mutationCall).toBeDefined();
+    const init = mutationCall?.[1] as RequestInit | undefined;
+    expect(JSON.parse(String(init?.body))).toEqual({
+      type: "shift-positions",
+      targetSelector: "#clip",
+      delta: 1.25,
+    });
+    expect(invalidateGsapCache).toHaveBeenCalledTimes(1);
+
+    hook.unmount();
+  });
+
+  it("scales authored GSAP positions after an SDK-backed clip resize commits", async () => {
+    const { clip, fetchMock, hook, invalidateGsapCache, writeProjectFile } =
+      await setupSdkKeyframedClipHarness();
+
+    await act(async () => {
+      await hook.resize(clip, { start: 2, duration: 4, playbackStart: undefined });
+    });
+
+    expect(writeProjectFile.mock.calls[0]?.[1]).toContain('data-start="2"');
+    expect(writeProjectFile.mock.calls[0]?.[1]).toContain('data-duration="4"');
+    const mutationCall = fetchMock.mock.calls.find((call) =>
+      requestUrl(call[0]).includes("/gsap-mutations/"),
+    );
+    expect(mutationCall).toBeDefined();
+    const init = mutationCall?.[1] as RequestInit | undefined;
+    expect(JSON.parse(String(init?.body))).toEqual({
+      type: "scale-positions",
+      targetSelector: "#clip",
+      oldStart: 1,
+      oldDuration: 2,
+      newStart: 2,
+      newDuration: 4,
+    });
+    expect(invalidateGsapCache).toHaveBeenCalledTimes(1);
+
+    hook.unmount();
+  });
+
   it("persists a vertical-only lane move (start unchanged) through the single-element fallback", async () => {
     // Regression: `if (!startChanged) return` ran BEFORE the file persist, so a
     // pure lane change routed through onMoveElement (no onMoveElements wired)
@@ -821,6 +937,55 @@ describe("useTimelineEditing timeline z-index reorder", () => {
     unmount();
   });
 
+  it("shifts every keyed clip and invalidates the cache after an SDK-backed group move", async () => {
+    const source = [
+      `<div data-hf-id="hf-stage" data-hf-root data-duration="10">`,
+      `  <div id="a" data-hf-id="hf-a" data-start="0" data-duration="1"></div>`,
+      `  <div id="b" data-hf-id="hf-b" data-start="1" data-duration="1"></div>`,
+      `</div>`,
+      `<script>`,
+      `const tl = gsap.timeline({ paused: true });`,
+      `tl.to("#a", { keyframes: [{ x: 0 }, { x: 100 }], duration: 1 }, 0);`,
+      `tl.to("#b", { keyframes: [{ x: 0 }, { x: 100 }], duration: 1 }, 1);`,
+      `window.__timelines = [tl];`,
+      `</script>`,
+    ].join("\n");
+    const { iframe, a, b } = makeTwoClipPair();
+    const sdkSession = await openComposition(source);
+    const fetchMock = stubProjectFetch(source);
+    const invalidateGsapCache = vi.fn();
+    usePlayerStore.getState().setDuration(10);
+    const hook = renderTimelineEditingHook({
+      timelineElements: [a, b],
+      iframe,
+      onZIndexCommit: vi.fn().mockResolvedValue(undefined),
+      projectId: "p1",
+      writeProjectFile: vi.fn<(...args: unknown[]) => Promise<void>>(async () => {}),
+      recordEdit: vi.fn(async () => {}),
+      sdkSession,
+      publishSdkSession: vi.fn<TimelinePublishSdkSession>(() => "published"),
+      invalidateGsapCache,
+    });
+
+    await act(async () => {
+      await hook.groupMove([
+        { element: a, start: 1 },
+        { element: b, start: 2 },
+      ]);
+    });
+
+    const mutations = fetchMock.mock.calls
+      .filter((call) => requestUrl(call[0]).includes("/gsap-mutations/"))
+      .map((call) => JSON.parse(String((call[1] as RequestInit | undefined)?.body)));
+    expect(mutations).toEqual([
+      { type: "shift-positions", targetSelector: "#a", delta: 1 },
+      { type: "shift-positions", targetSelector: "#b", delta: 1 },
+    ]);
+    expect(invalidateGsapCache).toHaveBeenCalledTimes(1);
+
+    hook.unmount();
+  });
+
   it("partitions a group move by source file while keeping one undo entry", async () => {
     const files: Record<string, string> = {
       "index.html": '<div id="a" data-start="0" data-duration="1"></div>',

package/src/hooks/useTimelineEditing.ts

@@ -58,6 +58,7 @@ export function useTimelineEditing({
   sdkSession,
   publishSdkSession,
   forceReloadSdkSession,
+  invalidateGsapCache,
   handleDomZIndexReorderCommitRef,
 }: UseTimelineEditingOptions) {
   const projectIdRef = useRef(projectId);
@@ -118,6 +119,7 @@ export function useTimelineEditing({
     domEditSaveTimestampRef,
     editQueueRef,
     forceReloadSdkSession,
+    invalidateGsapCache,
     isRecordingRef,
     pendingTimelineEditPathRef,
     previewIframeRef,
@@ -184,21 +186,24 @@ export function useTimelineEditing({
           );
         };
         const coalesceKey = `timeline-move:${element.hfId ?? element.id}`;
+        const finishMoveGsapSync = () =>
+          // Every timing writer converges the same GSAP positions after its
+          // durable clip-start commit. The SDK owns the attribute write; this
+          // sync owns only the dependent animation rewrite and preview refresh.
+          finishClipTimingFallback({
+            iframe: previewIframeRef.current,
+            reloadPreview,
+            projectId: projectIdRef.current,
+            targetPath,
+            domId: element.domId,
+            label: "Move timeline clip",
+            coalesceKey,
+            recordEdit,
+            edit: { kind: "shift", delta: updates.start - element.start },
+          }).finally(() => invalidateGsapCache?.());
         const moveFallback = () =>
-          enqueueEdit(element, "Move timeline clip", buildMovePatches, coalesceKey).then(() =>
-            // Soft-reload with the server's rewritten GSAP script — the timing-only move already patched
-            // DOM + store, so swapping the script avoids the all-clips flash; falls back to reloadPreview().
-            finishClipTimingFallback({
-              iframe: previewIframeRef.current,
-              reloadPreview,
-              projectId: projectIdRef.current,
-              targetPath,
-              domId: element.domId,
-              label: "Move timeline clip",
-              coalesceKey,
-              recordEdit,
-              edit: { kind: "shift", delta: updates.start - element.start },
-            }),
+          enqueueEdit(element, "Move timeline clip", buildMovePatches, coalesceKey).then(
+            finishMoveGsapSync,
           );
         return reorderDone
           .then(() => {
@@ -221,9 +226,10 @@ export function useTimelineEditing({
                   readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
                   publishSession: publishSdkSession,
                 },
-                { label: "Move timeline clip", coalesceKey },
+                { label: "Move timeline clip", coalesceKey, skipRefresh: true },
               ).then((result) => {
                 if (!cutoverCommittedOrThrow(result)) return moveFallback();
+                return finishMoveGsapSync();
               });
             }
             return moveFallback();
@@ -250,6 +256,7 @@ export function useTimelineEditing({
       timelineElements,
       handleDomZIndexReorderCommitRef,
       showToast,
+      invalidateGsapCache,
     ],
   );
 
@@ -287,23 +294,25 @@ export function useTimelineEditing({
       // script (timing-only resize) — same no-flash path as move; full reload is
       // the fallback.
       const coalesceKey = `timeline-resize:${element.hfId ?? element.id}`;
+      const finishResizeGsapSync = () =>
+        finishClipTimingFallback({
+          iframe: previewIframeRef.current,
+          reloadPreview,
+          projectId: projectIdRef.current,
+          targetPath,
+          domId: element.domId,
+          label: "Resize timeline clip",
+          coalesceKey,
+          recordEdit,
+          edit: {
+            kind: "scale",
+            from: { start: element.start, duration: element.duration },
+            to: { start: updates.start, duration: updates.duration },
+          },
+        }).finally(() => invalidateGsapCache?.());
       const resizeFallback = () =>
-        enqueueEdit(element, "Resize timeline clip", buildResizePatches, coalesceKey).then(() =>
-          finishClipTimingFallback({
-            iframe: previewIframeRef.current,
-            reloadPreview,
-            projectId: projectIdRef.current,
-            targetPath,
-            domId: element.domId,
-            label: "Resize timeline clip",
-            coalesceKey,
-            recordEdit,
-            edit: {
-              kind: "scale",
-              from: { start: element.start, duration: element.duration },
-              to: { start: updates.start, duration: updates.duration },
-            },
-          }),
+        enqueueEdit(element, "Resize timeline clip", buildResizePatches, coalesceKey).then(
+          finishResizeGsapSync,
         );
       const persistDone =
         sdkSession && element.hfId && !hasPbsAdjustment && !needsExtension
@@ -323,9 +332,10 @@ export function useTimelineEditing({
                 readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
                 publishSession: publishSdkSession,
               },
-              { label: "Resize timeline clip", coalesceKey },
+              { label: "Resize timeline clip", coalesceKey, skipRefresh: true },
             ).then((result) => {
               if (!cutoverCommittedOrThrow(result)) return resizeFallback();
+              return finishResizeGsapSync();
             })
           : resizeFallback();
       return persistDone.catch((error) => {
@@ -346,6 +356,7 @@ export function useTimelineEditing({
       reloadPreview,
       domEditSaveTimestampRef,
       showToast,
+      invalidateGsapCache,
     ],
   );
 

package/src/hooks/useTimelineEditingTypes.ts

@@ -46,6 +46,8 @@ export interface UseTimelineEditingOptions {
   publishSdkSession?: PublishSdkSession;
   /** Resync the SDK session after a server-authoritative timeline write. */
   forceReloadSdkSession?: () => void;
+  /** Reparse authored animations after a timing rewrite changes their positions. */
+  invalidateGsapCache?: () => void;
   handleDomZIndexReorderCommitRef?: MutableRefObject<TimelineZIndexReorderCommit | null>;
 }
 

package/src/hooks/useTimelineGroupEditing.ts

@@ -54,6 +54,7 @@ interface UseTimelineGroupEditingOptions {
   domEditSaveTimestampRef: MutableRefObject<number>;
   editQueueRef: MutableRefObject<Promise<unknown>>;
   forceReloadSdkSession?: () => void;
+  invalidateGsapCache?: () => void;
   isRecordingRef?: RefObject<boolean>;
   pendingTimelineEditPathRef: MutableRefObject<Set<string>>;
   previewIframeRef: RefObject<HTMLIFrameElement | null>;
@@ -110,6 +111,7 @@ export function useTimelineGroupEditing({
   domEditSaveTimestampRef,
   editQueueRef,
   forceReloadSdkSession,
+  invalidateGsapCache,
   isRecordingRef,
   pendingTimelineEditPathRef,
   previewIframeRef,
@@ -212,7 +214,12 @@ export function useTimelineGroupEditing({
           readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
           publishSession: publishSdkSession,
         },
-        { label: input.label, coalesceKey: input.coalesceKey, coalesceMs: input.coalesceMs },
+        {
+          label: input.label,
+          coalesceKey: input.coalesceKey,
+          coalesceMs: input.coalesceMs,
+          skipRefresh: true,
+        },
       );
       return cutoverCommittedOrThrow(result);
     },
@@ -282,47 +289,55 @@ export function useTimelineGroupEditing({
           coalesceKey,
           coalesceMs,
         });
-        if (handledBySdk) return;
-
-        await persistServerBatch(
-          projectId,
-          "Move timeline clips",
-          changes.map((change) => ({
-            element: change.element,
-            buildPatches: (original, target) =>
-              buildTimelineMoveTimingPatch(
-                original,
-                target,
-                change.start,
-                change.element.duration,
-                change.track,
-              ),
-          })),
-          coalesceKey,
-          coalesceMs,
-        );
+        if (!handledBySdk) {
+          await persistServerBatch(
+            projectId,
+            "Move timeline clips",
+            changes.map((change) => ({
+              element: change.element,
+              buildPatches: (original, target) =>
+                buildTimelineMoveTimingPatch(
+                  original,
+                  target,
+                  change.start,
+                  change.element.duration,
+                  change.track,
+                ),
+            })),
+            coalesceKey,
+            coalesceMs,
+          );
+        }
         // Track-only: no timing delta → no GSAP positions to shift and no
         // reload (see the trackOnly doc above). Mixed batches (any start
         // change) keep the full fallback below.
         if (trackOnly) return;
-        await finishGroupTimingGsapFallback({
-          projectId,
-          iframe: previewIframeRef.current,
-          reloadPreview,
-          label: "Move timeline clips",
-          errorLabel: "Failed to shift GSAP positions",
-          coalesceKey,
-          recordEdit,
-          activeCompPath,
-          changes,
-          resolveChangePath: (element) => targetPathFor(element, activeCompPath),
-          mutateChange: (change, changePath) => {
-            const delta = change.start - change.element.start;
-            const domId = change.element.domId;
-            if (delta === 0 || !domId) return null;
-            return shiftGsapPositions(projectId, changePath, domId, delta);
-          },
-        });
+        // The timing persist above already committed to disk, so the cached
+        // GSAP read is stale whether or not the position rewrite succeeded —
+        // invalidate on the error path too (matches the single-element path's
+        // `.finally`), or a failed rewrite leaves the editor reading old tweens.
+        try {
+          await finishGroupTimingGsapFallback({
+            projectId,
+            iframe: previewIframeRef.current,
+            reloadPreview,
+            label: "Move timeline clips",
+            errorLabel: "Failed to shift GSAP positions",
+            coalesceKey,
+            recordEdit,
+            activeCompPath,
+            changes,
+            resolveChangePath: (element) => targetPathFor(element, activeCompPath),
+            mutateChange: (change, changePath) => {
+              const delta = change.start - change.element.start;
+              const domId = change.element.domId;
+              if (delta === 0 || !domId) return null;
+              return shiftGsapPositions(projectId, changePath, domId, delta);
+            },
+          });
+        } finally {
+          invalidateGsapCache?.();
+        }
       }).catch((error) => {
         // Failed persist: revert the optimistic duration readout + live root
         // alongside the gesture owner's store rollback.
@@ -340,6 +355,7 @@ export function useTimelineGroupEditing({
       reloadPreview,
       trySdkBatchPersist,
       showToast,
+      invalidateGsapCache,
     ],
   );
 
@@ -384,50 +400,57 @@ export function useTimelineGroupEditing({
           coalesceKey,
           coalesceMs,
         });
-        if (handledBySdk) return;
-
-        await persistServerBatch(
-          projectId,
-          "Resize timeline clips",
-          changes.map((change) => ({
-            element: change.element,
-            buildPatches: (original, target) =>
-              buildTimelineResizeTimingPatch(original, target, change.element, {
-                start: change.start,
-                duration: change.duration,
-                playbackStart: change.playbackStart,
-              }),
-          })),
-          coalesceKey,
-          coalesceMs,
-        );
-        await finishGroupTimingGsapFallback({
-          projectId,
-          iframe: previewIframeRef.current,
-          reloadPreview,
-          label: "Resize timeline clips",
-          errorLabel: "Failed to scale GSAP positions",
-          coalesceKey,
-          recordEdit,
-          activeCompPath,
-          changes,
-          resolveChangePath: (element) => targetPathFor(element, activeCompPath),
-          mutateChange: (change, changePath) => {
-            const domId = change.element.domId;
-            const timingChanged =
-              change.start !== change.element.start || change.duration !== change.element.duration;
-            if (!timingChanged || !domId) return null;
-            return scaleGsapPositions(
-              projectId,
-              changePath,
-              domId,
-              change.element.start,
-              change.element.duration,
-              change.start,
-              change.duration,
-            );
-          },
-        });
+        if (!handledBySdk) {
+          await persistServerBatch(
+            projectId,
+            "Resize timeline clips",
+            changes.map((change) => ({
+              element: change.element,
+              buildPatches: (original, target) =>
+                buildTimelineResizeTimingPatch(original, target, change.element, {
+                  start: change.start,
+                  duration: change.duration,
+                  playbackStart: change.playbackStart,
+                }),
+            })),
+            coalesceKey,
+            coalesceMs,
+          );
+        }
+        // See the move path: the timing persist is already on disk, so the GSAP
+        // cache must be invalidated even when the position rewrite throws.
+        try {
+          await finishGroupTimingGsapFallback({
+            projectId,
+            iframe: previewIframeRef.current,
+            reloadPreview,
+            label: "Resize timeline clips",
+            errorLabel: "Failed to scale GSAP positions",
+            coalesceKey,
+            recordEdit,
+            activeCompPath,
+            changes,
+            resolveChangePath: (element) => targetPathFor(element, activeCompPath),
+            mutateChange: (change, changePath) => {
+              const domId = change.element.domId;
+              const timingChanged =
+                change.start !== change.element.start ||
+                change.duration !== change.element.duration;
+              if (!timingChanged || !domId) return null;
+              return scaleGsapPositions(
+                projectId,
+                changePath,
+                domId,
+                change.element.start,
+                change.element.duration,
+                change.start,
+                change.duration,
+              );
+            },
+          });
+        } finally {
+          invalidateGsapCache?.();
+        }
       }).catch((error) => {
         // Failed persist: revert the optimistic duration readout + live root
         // alongside the gesture owner's store rollback.
@@ -445,6 +468,7 @@ export function useTimelineGroupEditing({
       reloadPreview,
       trySdkBatchPersist,
       showToast,
+      invalidateGsapCache,
     ],
   );