@hyperframes/studio 0.8.98 → 0.8.99

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -1,11 +1,13 @@
 // @vitest-environment happy-dom
 
 import React, { act } from "react";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi, type Mock } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
-import { mountReactHarness } from "./domSelectionTestHarness";
+import { mountReactHarness, withInlineLayoutBox } from "./domSelectionTestHarness";
+import { DomEditCropHandles } from "../components/editor/DomEditCropHandles";
+import { applyStudioBoxSizeDraft } from "../components/editor/manualEdits";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -56,6 +58,7 @@ function mountResizeHandler(
   const anchorRollback = vi.fn();
   const elementOffset = vi.fn(() => ({ save: anchorSave, rollback: anchorRollback }));
   const commitMutation = vi.fn().mockResolvedValue(undefined);
+  const commitPatch = vi.fn().mockResolvedValue(undefined);
   let resize:
     | ((
         selection: DomEditSelection,
@@ -64,8 +67,9 @@ function mountResizeHandler(
         restore?: () => void,
       ) => Promise<void>)
     | null = null;
+  let property: ReturnType<typeof useGsapAwareEditing>["commitAnimatedProperty"] | null = null;
   function Harness() {
-    resize = useGsapAwareEditing({
+    const editing = useGsapAwareEditing({
       domEditSelection: selection,
       selectedGsapAnimations: animations,
       gsapCommitMutation: commitMutation,
@@ -76,11 +80,14 @@ function mountResizeHandler(
       trackGsapInteractionFailure: vi.fn(),
       stageElementPositionOffset: elementOffset,
       handleDomBoxSizeCommit: fallback,
+      commitPositionPatchToHtml: commitPatch,
       addGsapAnimation: vi.fn(),
       convertToKeyframes: vi.fn(),
       setArcPath: vi.fn(),
       updateArcSegment: vi.fn(),
-    }).handleGsapAwareBoxSizeCommit;
+    });
+    resize = editing.handleGsapAwareBoxSizeCommit;
+    property = editing.commitAnimatedProperty;
     return null;
   }
   const root = mountReactHarness(<Harness />);
@@ -91,7 +98,9 @@ function mountResizeHandler(
     anchorSave,
     anchorRollback,
     commitMutation,
+    commitPatch,
     resize: resize!,
+    property: property!,
     root,
   };
 }
@@ -122,6 +131,7 @@ function mountGroupHandler({
       trackGsapInteractionFailure,
       stageElementPositionOffset,
       handleDomBoxSizeCommit: vi.fn(),
+      commitPositionPatchToHtml: vi.fn(),
       addGsapAnimation: vi.fn(),
       convertToKeyframes: vi.fn(),
       setArcPath: vi.fn(),
@@ -257,6 +267,92 @@ describe("useGsapAwareEditing anchored resize", () => {
     act(() => h.root.unmount());
   });
 
+  function mountCropped() {
+    const h = mountResizeHandler([]);
+    const el = withInlineLayoutBox(h.selection.element);
+    el.id = "clip";
+    el.style.cssText = "width: 300px; height: 200px; clip-path: inset(0px 60px 0px 0px)";
+    document.body.append(el);
+    const rect = { left: 0, top: 0, width: 300, height: 200, editScaleX: 1, editScaleY: 1 };
+    const crop = mountReactHarness(
+      <DomEditCropHandles selection={h.selection} overlayRect={rect} onStyleCommit={vi.fn()} />,
+    );
+    return { ...h, el, crop };
+  }
+
+  function resizeLandsWhen(where: "intercept" | "dispatch", h: { commitMutation: Mock }) {
+    const land = (el: HTMLElement) => {
+      el.style.width = "450px";
+      el.style.height = "300px";
+    };
+    mocks.resize.mockImplementation(async (selection, _next, _a, _i, commit) => {
+      if (where === "intercept") land(selection.element);
+      await commit(selection, { type: "size" }, { label: "Resize", softReload: true });
+      return { status: "persisted" };
+    });
+    if (where === "dispatch") h.commitMutation.mockImplementation(async (s) => land(s.element));
+  }
+
+  const scaled = "inset(0px 90px 0px 0px)";
+
+  it("saves the crop scaled with a size that lands only when saved (the W/H fields)", async () => {
+    const h = mountCropped();
+    resizeLandsWhen("dispatch", h);
+    await act(() => h.resize(h.selection, { width: 450, height: 300 }));
+
+    expect(h.commitPatch).toHaveBeenCalledWith(
+      h.selection,
+      [{ type: "inline-style", property: "clip-path", value: scaled }],
+      expect.objectContaining({ coalesceKey: h.commitMutation.mock.calls[0]![2].coalesceKey }),
+    );
+    act(() => h.crop.unmount());
+    expect(h.el.style.getPropertyValue("clip-path")).toBe(scaled);
+    act(() => h.root.unmount());
+  });
+
+  it("scales from the box before a draft its caller applied (the agent tool)", async () => {
+    const h = mountCropped();
+    resizeLandsWhen("intercept", h);
+    applyStudioBoxSizeDraft(h.el, { width: 450, height: 300 });
+    await act(() => h.resize(h.selection, { width: 450, height: 300 }));
+
+    expect(h.commitPatch.mock.calls[0]![1]).toEqual([
+      { type: "inline-style", property: "clip-path", value: scaled },
+    ]);
+    act(() => h.crop.unmount());
+    act(() => h.root.unmount());
+  });
+
+  it("a W field on an animated element saves the scaled crop in the same undo step", async () => {
+    const h = mountCropped();
+    mocks.commitAnimatedProperties.mockImplementation(async (selection, _props, keyed) => {
+      await (keyed ?? h.commitMutation)(selection, { type: "set" }, { label: "Edit width" });
+      selection.element.style.width = "450px";
+    });
+    await act(() => h.property(h.selection, "width", 450));
+
+    const key = h.commitMutation.mock.calls[0]![2].coalesceKey;
+    expect(key).toBeTruthy();
+    expect(h.commitPatch).toHaveBeenCalledWith(
+      h.selection,
+      [{ type: "inline-style", property: "clip-path", value: "inset(0px 90px 0px 0px)" }],
+      expect.objectContaining({ coalesceKey: key }),
+    );
+    act(() => h.crop.unmount());
+    act(() => h.root.unmount());
+  });
+
+  it("shows the scaled crop when deselected before the save lands", async () => {
+    const h = mountCropped();
+    resizeLandsWhen("intercept", h);
+    const saved = h.resize(h.selection, { width: 450, height: 300 });
+    act(() => h.crop.unmount());
+    await act(() => saved);
+
+    expect(h.el.style.getPropertyValue("clip-path")).toBe(scaled);
+    act(() => h.root.unmount());
+  });
+
   it("does not keep the anchor move when the size save fails", async () => {
     resizeWritesSize();
     const h = mountResizeHandler([]);
@@ -288,7 +384,7 @@ describe("useGsapAwareEditing anchored resize", () => {
       commit = h.resize(h.selection, { width: 300, height: 200 }, { x: -50.2, y: -25.6 });
     });
 
-    expect(mocks.setPosition).toHaveBeenCalledWith(h.selection.element, 70, 55);
+    expect(mocks.setPosition).toHaveBeenCalledWith(h.selection.element, 70.2, 54.6);
     expect(mocks.setPosition.mock.invocationCallOrder[0]).toBeLessThan(
       mocks.resize.mock.invocationCallOrder[0]!,
     );

package/src/hooks/useGsapAwareEditing.ts

@@ -34,14 +34,14 @@ import { logResize, logResizeSettle } from "../utils/resizeDebug";
 import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
 import { runGestureTransaction } from "./gestureTransaction";
 import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
-import { assertGsapEditPersisted, type GsapEditOutcome } from "./gsapEditOutcome";
+import { assertGsapEditPersisted, saveMove } from "./gsapEditOutcome";
 import type { GsapAnimationFetchOptions } from "./useGsapAnimationFetchFallback";
-
-/** A move only a shared tween positions is saved on the element itself; a blocked one throws. */
-async function saveMove(outcome: GsapEditOutcome, saveOnElement: () => Promise<void>) {
-  if (outcome.status === "element-offset") return saveOnElement();
-  assertGsapEditPersisted(outcome);
-}
+import type { ElementOffsetStagerDeps } from "./elementOffsetStager";
+import {
+  prepareCropResize,
+  saveCropResize,
+  writeSizeWithCrop,
+} from "../components/editor/cropResize";
 
 // Distinct coalesceKey per group drag so consecutive group drags don't fold
 // into one another's undo entry (module-local counter, not Date.now()).
@@ -87,6 +87,7 @@ export interface UseGsapAwareEditingParams {
     next: { width: number; height: number },
     offset?: { x: number; y: number },
   ) => Promise<void>;
+  commitPositionPatchToHtml: ElementOffsetStagerDeps["commitPositionPatchToHtml"];
   // GSAP script commit ops (from useGsapScriptCommits)
   addGsapAnimation: (
     sel: DomEditSelection,
@@ -130,6 +131,7 @@ export function useGsapAwareEditing({
   trackGsapInteractionFailure,
   stageElementPositionOffset,
   handleDomBoxSizeCommit,
+  commitPositionPatchToHtml,
   addGsapAnimation,
   convertToKeyframes,
   setArcPath,
@@ -353,6 +355,8 @@ export function useGsapAwareEditing({
         animGroups: targetAnimations.map((a) => `${a.propertyGroup}:${a.method}`),
       });
       let anchorMove: ReturnType<typeof stageElementPositionOffset> | null = null;
+      const stageCrop = prepareCropResize(selection.element);
+      let cropUndoKey: string | null = null;
       return runGestureTransaction({
         element: selection.element,
         label: "Resize layer",
@@ -381,6 +385,7 @@ export function useGsapAwareEditing({
                 makeFetchFallback(selection),
               );
               assertGsapEditPersisted(outcome);
+              cropUndoKey = coalesceKey;
               // What the resize actually did, not what its animations suggest
               // it would do. An element whose scale is an instant hold has a
               // scale-group tween and still commits width/height, so guessing
@@ -424,7 +429,13 @@ export function useGsapAwareEditing({
           logResizeSettle(selection.element, "dom-route");
           await handleDomBoxSizeCommit(selection, next, offset);
         },
-        afterBufferedCommitsSaved: () => anchorMove?.save() ?? Promise.resolve(),
+        afterBufferedCommitsSaved: async () => {
+          await anchorMove?.save();
+          // Only now is the size live for every caller, drag or not.
+          if (cropUndoKey) {
+            await saveCropResize(stageCrop, selection, commitPositionPatchToHtml, cropUndoKey);
+          }
+        },
         restore: () => {
           anchorMove?.rollback();
           restore();
@@ -434,6 +445,7 @@ export function useGsapAwareEditing({
     },
     [
       handleDomBoxSizeCommit,
+      commitPositionPatchToHtml,
       stageElementPositionOffset,
       gsapCommitMutation,
       previewIframeRef,
@@ -481,10 +493,7 @@ export function useGsapAwareEditing({
 
   // ── Animated property commit ──
 
-  const {
-    commitAnimatedProperty: commitAnimatedPropertyRaw,
-    commitAnimatedProperties: commitAnimatedPropertiesRaw,
-  } = useAnimatedPropertyCommit({
+  const { commitAnimatedProperties: commitAnimatedPropertiesRaw } = useAnimatedPropertyCommit({
     selectedGsapAnimations,
     gsapCommitMutation,
     addGsapAnimation: (sel, method, time) => addGsapAnimation(sel, method, time),
@@ -496,25 +505,30 @@ export function useGsapAwareEditing({
   const commitAnimatedProperties = useCallback(
     async (selection: DomEditSelection, properties: Record<string, number | string>) => {
       try {
-        await commitAnimatedPropertiesRaw(selection, properties);
+        await writeSizeWithCrop(
+          selection,
+          properties,
+          gsapCommitMutation,
+          commitPositionPatchToHtml,
+          (keyed) => commitAnimatedPropertiesRaw(selection, properties, keyed),
+        );
       } catch (error) {
         trackGsapInteractionFailure(error, selection, "property", "Edit animated property");
         throw error;
       }
     },
-    [commitAnimatedPropertiesRaw, trackGsapInteractionFailure],
+    [
+      commitAnimatedPropertiesRaw,
+      commitPositionPatchToHtml,
+      gsapCommitMutation,
+      trackGsapInteractionFailure,
+    ],
   );
 
   const commitAnimatedProperty = useCallback(
-    async (selection: DomEditSelection, property: string, value: number | string) => {
-      try {
-        await commitAnimatedPropertyRaw(selection, property, value);
-      } catch (error) {
-        trackGsapInteractionFailure(error, selection, "property", "Edit animated property");
-        throw error;
-      }
-    },
-    [commitAnimatedPropertyRaw, trackGsapInteractionFailure],
+    (selection: DomEditSelection, property: string, value: number | string) =>
+      commitAnimatedProperties(selection, { [property]: value }),
+    [commitAnimatedProperties],
   );
 
   // ── Arc path wrappers ──

package/src/hooks/useTimelineEditing.test.tsx

@@ -21,6 +21,10 @@ import {
   resolveTimelineGroupResizeChanges,
 } from "../player/components/timelineGroupEditing";
 import { createRuntimeStartTimeResolver } from "@hyperframes/core/runtime/start-resolver";
+import {
+  scalePositionsInScript,
+  shiftPositionsInScript,
+} from "@hyperframes/core/gsap-writer-acorn";
 
 vi.mock("../components/editor/manualEditingAvailability", async (importOriginal) => {
   const actual =
@@ -134,6 +138,7 @@ function renderTimelineEditingHook(input: {
   invalidateGsapCache?: () => void;
   showToast?: (message: string, kind?: string) => void;
   canEdit?: NonNullable<Parameters<typeof useTimelineEditing>[0]["canEdit"]>;
+  activeCompPath?: string;
 }): {
   move: ReturnType<typeof useTimelineEditing>["handleTimelineElementMove"];
   resize: ReturnType<typeof useTimelineEditing>["handleTimelineElementResize"];
@@ -166,7 +171,7 @@ function renderTimelineEditingHook(input: {
     commitRef.current = input.onZIndexCommit;
     const hook = useTimelineEditing({
       projectId: input.projectId ?? null,
-      activeCompPath: "index.html",
+      activeCompPath: input.activeCompPath ?? "index.html",
       timelineElements: input.timelineElements,
       showToast: input.showToast ?? vi.fn(),
       writeProjectFile: input.writeProjectFile ?? vi.fn(),
@@ -372,39 +377,6 @@ function setupSingleClipHarness(options?: {
   };
 }
 
-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,
@@ -830,58 +802,6 @@ 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)
@@ -993,55 +913,6 @@ 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>',
@@ -2353,3 +2224,187 @@ describe("useTimelineEditing: nested rows write composition-local starts", () =>
     hook.unmount();
   });
 });
+
+describe("clip timing edits sync GSAP exactly once", () => {
+  const SCENE_PATH = "compositions/scene.html";
+  const SCENE_SOURCE = [
+    `<div data-hf-id="hf-stage" data-hf-root data-composition-id="scene" data-duration="10">`,
+    `  <div id="scene" data-hf-id="hf-scene" data-start="1" data-duration="4"><h1 data-hf-id="hf-title">Hi</h1></div>`,
+    `  <div id="side" data-hf-id="hf-side" data-start="0" data-duration="8"></div>`,
+    `</div>`,
+    `<script>`,
+    `const tl = gsap.timeline({ paused: true });`,
+    `tl.to("#scene", { x: 1, duration: 1 }, 1);`,
+    `tl.from("#scene h1", { y: 20, duration: 1 }, 1.5);`,
+    `tl.to("#side", { x: 5, duration: 1 }, 2);`,
+    `window.__timelines = [tl];`,
+    `</script>`,
+  ].join("\n");
+
+  // A project whose files live in memory, with the GSAP route running the real server writer on them.
+  function stubProjectFiles(initial: Record<string, string>) {
+    const files = { ...initial };
+    const pathAfter = (url: string, marker: string) => decodeURIComponent(url.split(marker)[1]!);
+    const applyServerMutation = (path: string, body: Record<string, unknown>) => {
+      const before = files[path]!;
+      const doc = new DOMParser().parseFromString(before, "text/html");
+      const root = doc.querySelector("template")?.content ?? doc;
+      const old = [...root.querySelectorAll("script")]
+        .map((script) => script.textContent ?? "")
+        .find((text) => text.includes("gsap.timeline"))!;
+      const next =
+        body.type === "shift-positions"
+          ? shiftPositionsInScript(old, String(body.targetSelector), Number(body.delta), root)
+          : scalePositionsInScript(
+              old,
+              String(body.targetSelector),
+              Number(body.oldStart),
+              Number(body.oldDuration),
+              Number(body.newStart),
+              Number(body.newDuration),
+              root,
+            );
+      const after = before.replace(old, next);
+      files[path] = after;
+      return {
+        ok: true,
+        mutated: after !== before,
+        changed: after !== before,
+        scriptText: next,
+        before,
+        after,
+      };
+    };
+    const fetchMock = vi.fn(
+      async (input: Parameters<typeof fetch>[0], init?: Parameters<typeof fetch>[1]) => {
+        const url = requestUrl(input);
+        if (url.includes("/gsap-mutation-capabilities"))
+          return jsonResponse({ atomicOwnershipPairs: true });
+        if (url.includes("/gsap-mutations/")) {
+          return jsonResponse(
+            applyServerMutation(pathAfter(url, "/gsap-mutations/"), JSON.parse(String(init?.body))),
+          );
+        }
+        if (url.includes("/files/"))
+          return jsonResponse({ content: files[pathAfter(url, "/files/")] });
+        throw new Error(`Unexpected fetch: ${url}`);
+      },
+    );
+    vi.stubGlobal("fetch", fetchMock);
+    const writeProjectFile = vi.fn(async (path: string, content: string) => {
+      files[path] = content;
+    });
+    return { files, fetchMock, writeProjectFile };
+  }
+
+  async function setupScene(withSdk: boolean, source = SCENE_SOURCE) {
+    const project = stubProjectFiles({ [SCENE_PATH]: source });
+    const iframe = createPreviewIframe([
+      { id: "scene", track: 0 },
+      { id: "side", track: 1 },
+    ]);
+    const scene = timelineElement({
+      id: "scene",
+      track: 0,
+      zIndex: 0,
+      start: 1,
+      duration: 4,
+      sourceFile: SCENE_PATH,
+    });
+    const side = timelineElement({
+      id: "side",
+      track: 1,
+      zIndex: 0,
+      start: 0,
+      duration: 8,
+      sourceFile: SCENE_PATH,
+    });
+    usePlayerStore.getState().setDuration(10);
+    const hook = renderTimelineEditingHook({
+      timelineElements: [scene, side],
+      iframe,
+      onZIndexCommit: vi.fn().mockResolvedValue(undefined),
+      projectId: "p1",
+      activeCompPath: SCENE_PATH,
+      writeProjectFile: project.writeProjectFile,
+      recordEdit: vi.fn(async () => {}),
+      sdkSession: withSdk ? await openComposition(source) : undefined,
+      publishSdkSession: vi.fn<TimelinePublishSdkSession>(() => "published"),
+    });
+    const tweens = () =>
+      project.files[SCENE_PATH]!.split("\n").filter((line) => line.startsWith("tl."));
+    return { ...project, hook, scene, side, tweens };
+  }
+
+  it("a move then a stretch through the SDK sync once in a template file with a config script first", async () => {
+    const withConfig = `<template id="scene-template">\n${SCENE_SOURCE.replace(
+      "<script>",
+      "<script>gsap.config({ nullTargetWarn: false });</script>\n<script>",
+    )}\n</template>`;
+    const h = await setupScene(true, withConfig);
+    await act(async () => {
+      await h.hook.move(h.scene, { start: 3, track: h.scene.track });
+      await flushAsyncWork();
+    });
+    const moved = { ...h.scene, start: 3 };
+    await act(async () => {
+      await h.hook.resize(moved, { start: 3, duration: 6, playbackStart: undefined });
+      await flushAsyncWork();
+    });
+    expect(h.tweens()).toEqual([
+      `tl.to("#scene", { x: 1, duration: 1.5 }, 3);`,
+      `tl.from("#scene h1", { y: 20, duration: 1.5 }, 3.75);`,
+      `tl.to("#side", { x: 5, duration: 1 }, 2);`,
+    ]);
+    h.hook.unmount();
+  });
+
+  for (const withSdk of [true, false]) {
+    const via = withSdk ? "through the SDK" : "through the server (no SDK session)";
+
+    it(`a move ${via} lands each tween once`, async () => {
+      const h = await setupScene(withSdk);
+      await act(async () => {
+        await h.hook.move(h.scene, { start: 3, track: h.scene.track });
+        await flushAsyncWork();
+      });
+      expect(h.tweens()).toEqual([
+        `tl.to("#scene", { x: 1, duration: 1 }, 3);`,
+        `tl.from("#scene h1", { y: 20, duration: 1 }, 3.5);`,
+        `tl.to("#side", { x: 5, duration: 1 }, 2);`,
+      ]);
+      h.hook.unmount();
+    });
+
+    it(`a resize ${via} scales each tween once`, async () => {
+      const h = await setupScene(withSdk);
+      await act(async () => {
+        await h.hook.resize(h.scene, { start: 1, duration: 8, playbackStart: undefined });
+        await flushAsyncWork();
+      });
+      expect(h.tweens()).toEqual([
+        `tl.to("#scene", { x: 1, duration: 2 }, 1);`,
+        `tl.from("#scene h1", { y: 20, duration: 2 }, 2);`,
+        `tl.to("#side", { x: 5, duration: 1 }, 2);`,
+      ]);
+      h.hook.unmount();
+    });
+
+    it(`a group move ${via} lands each tween once`, async () => {
+      const h = await setupScene(withSdk);
+      await act(async () => {
+        await h.hook.groupMove([
+          { element: h.scene, start: 3 },
+          { element: h.side, start: 1 },
+        ]);
+        await flushAsyncWork();
+      });
+      expect(h.tweens()).toEqual([
+        `tl.to("#scene", { x: 1, duration: 1 }, 3);`,
+        `tl.from("#scene h1", { y: 20, duration: 1 }, 3.5);`,
+        `tl.to("#side", { x: 5, duration: 1 }, 3);`,
+      ]);
+      h.hook.unmount();
+    });
+  }
+});