@hyperframes/studio 0.8.98 → 0.8.100

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();
+    });
+  }
+});

package/src/hooks/useTimelineEditing.ts

@@ -19,6 +19,7 @@ import { playbackStartAttributeForElement } from "../player/lib/timelineElementH
 import {
   captureDurationRollback,
   finishClipTimingFallback,
+  sdkTimingGsapSync,
   readFileContent,
   syncPreviewContentDuration,
 } from "./timelineTimingSync";
@@ -229,10 +230,8 @@ 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.
+        const finishMoveGsapSync = (sdkGsap?: ReturnType<typeof sdkTimingGsapSync>) =>
+          // One GSAP sync per edit: the SDK commit's own (sdkGsap), else the server rewrite here.
           finishClipTimingFallback({
             iframe: previewIframeRef.current,
             reloadPreview,
@@ -244,15 +243,15 @@ export function useTimelineEditing({
             recordEdit,
             writeProjectFile,
             edit: { kind: "shift", delta: updates.start - element.start },
+            sdkGsap,
           }).finally(() => invalidateGsapCache?.());
         const moveFallback = () =>
-          enqueueEdit(element, "Move timeline clip", buildMovePatches, coalesceKey).then(
-            finishMoveGsapSync,
+          enqueueEdit(element, "Move timeline clip", buildMovePatches, coalesceKey).then(() =>
+            finishMoveGsapSync(),
           );
         return reorderDone
           .then(() => {
-            // The SDK setTiming path writes start only — a lane change must take
-            // the fallback, whose patch builder writes data-track-index too.
+            // SDK setTiming writes start only; a lane change needs the fallback's track patch.
             if (sdkSession && element.hfId && !needsExtension && !trackChanged) {
               return sdkTimingPersist(
                 element.hfId,
@@ -272,7 +271,7 @@ export function useTimelineEditing({
                 { label: "Move timeline clip", coalesceKey, skipRefresh: true },
               ).then((result) => {
                 if (!cutoverCommittedOrThrow(result)) return moveFallback();
-                return finishMoveGsapSync();
+                return finishMoveGsapSync(sdkTimingGsapSync(result));
               });
             }
             return moveFallback();
@@ -337,7 +336,7 @@ 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 = () =>
+      const finishResizeGsapSync = (sdkGsap?: ReturnType<typeof sdkTimingGsapSync>) =>
         finishClipTimingFallback({
           iframe: previewIframeRef.current,
           reloadPreview,
@@ -353,10 +352,11 @@ export function useTimelineEditing({
             from: { start: toCompositionTime(element, element.start), duration: element.duration },
             to: { start: toCompositionTime(element, updates.start), duration: updates.duration },
           },
+          sdkGsap,
         }).finally(() => invalidateGsapCache?.());
       const resizeFallback = () =>
-        enqueueEdit(element, "Resize timeline clip", buildResizePatches, coalesceKey).then(
-          finishResizeGsapSync,
+        enqueueEdit(element, "Resize timeline clip", buildResizePatches, coalesceKey).then(() =>
+          finishResizeGsapSync(),
         );
       const persistDone =
         sdkSession && element.hfId && !hasPbsAdjustment && !needsExtension
@@ -378,7 +378,7 @@ export function useTimelineEditing({
               { label: "Resize timeline clip", coalesceKey, skipRefresh: true },
             ).then((result) => {
               if (!cutoverCommittedOrThrow(result)) return resizeFallback();
-              return finishResizeGsapSync();
+              return finishResizeGsapSync(sdkTimingGsapSync(result));
             })
           : resizeFallback();
       return persistDone.catch((error) => {

package/src/hooks/useTimelineGroupEditing.ts

@@ -24,11 +24,13 @@ import { playbackStartAttributeForElement } from "../player/lib/timelineElementH
 import {
   captureDurationRollback,
   finishGroupTimingGsapFallback,
+  sdkTimingGsapSync,
   readFileContent,
   scaleGsapPositions,
   shiftGsapPositions,
   syncPreviewContentDuration,
 } from "./timelineTimingSync";
+import type { GsapMutationStatus } from "./gsapMutationClient";
 import { getStudioSaveErrorMessage } from "../utils/studioSaveDiagnostics";
 
 export interface TimelineGroupMoveChange {
@@ -186,8 +188,8 @@ export function useTimelineGroupEditing({
 
   // Shared SDK fast path for group move/resize: eligible when nothing needs the
   // server (no root-duration growth, one shared file, every change SDK-addressable
-  // and `eligible` per the caller's own gate). Returns whether the SDK handled it;
-  // false → caller falls through to the server batch persist.
+  // and `eligible` per the caller's own gate). Returns the SDK's GSAP sync (null: the
+  // server syncs) when it handled the edit; null → caller falls through to the server.
   const trySdkBatchPersist = useCallback(
     async (input: {
       changes: readonly { element: TimelineElement }[];
@@ -200,14 +202,14 @@ export function useTimelineGroupEditing({
       label: string;
       coalesceKey: string;
       coalesceMs?: number;
-    }): Promise<boolean> => {
+    }): Promise<{ sdkGsap: GsapMutationStatus | null } | null> => {
       const sharedPath = allChangesSharePath(input.changes, activeCompPath);
       const canUseSdk =
         !input.needsExtension &&
         sharedPath !== null &&
         input.eligible &&
         input.sdkChanges.every((change) => change !== null);
-      if (!canUseSdk) return false;
+      if (!canUseSdk) return null;
       const result = await sdkTimingBatchPersist(
         input.sdkChanges.filter((change): change is NonNullable<typeof change> => change !== null),
         sharedPath,
@@ -227,7 +229,7 @@ export function useTimelineGroupEditing({
           skipRefresh: true,
         },
       );
-      return cutoverCommittedOrThrow(result);
+      return cutoverCommittedOrThrow(result) ? { sdkGsap: sdkTimingGsapSync(result) } : null;
     },
     [
       activeCompPath,
@@ -289,7 +291,7 @@ export function useTimelineGroupEditing({
       const label = options?.label ?? "Move timeline clips";
       return enqueueGroupOperation(label, async (projectId) => {
         await options?.beforeTiming;
-        const handledBySdk = await trySdkBatchPersist({
+        const sdk = await trySdkBatchPersist({
           changes,
           sdkChanges: toSdkTimingChanges(changes, (change) => ({
             start: toAuthoredStart(change.element, change.start),
@@ -300,7 +302,7 @@ export function useTimelineGroupEditing({
           coalesceKey,
           coalesceMs,
         });
-        if (!handledBySdk) {
+        if (!sdk) {
           await persistServerBatch(
             projectId,
             label,
@@ -339,6 +341,7 @@ export function useTimelineGroupEditing({
             writeProjectFile,
             activeCompPath,
             changes,
+            sdkGsap: sdk?.sdkGsap,
             resolveChangePath: (element) => targetPathFor(element, activeCompPath),
             mutateChange: (change, changePath) => {
               const delta = change.start - change.element.start;
@@ -408,7 +411,7 @@ export function useTimelineGroupEditing({
       const coalesceMs = options?.coalesceMs;
       return enqueueGroupOperation("Resize timeline clips", async (projectId) => {
         await options?.beforeTiming;
-        const handledBySdk = await trySdkBatchPersist({
+        const sdk = await trySdkBatchPersist({
           changes,
           sdkChanges: toSdkTimingChanges(changes, (change) => ({
             start: toAuthoredStart(change.element, change.start),
@@ -420,7 +423,7 @@ export function useTimelineGroupEditing({
           coalesceKey,
           coalesceMs,
         });
-        if (!handledBySdk) {
+        if (!sdk) {
           await persistServerBatch(
             projectId,
             "Resize timeline clips",
@@ -451,6 +454,7 @@ export function useTimelineGroupEditing({
             writeProjectFile,
             activeCompPath,
             changes,
+            sdkGsap: sdk?.sdkGsap,
             resolveChangePath: (element) => targetPathFor(element, activeCompPath),
             mutateChange: (change, changePath) => {
               const domId = change.element.domId;

package/src/player/components/useTimelineVirtualRows.test.tsx

@@ -2,7 +2,13 @@
 
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
-import { afterAll, afterEach, beforeAll, describe, expect, it } from "vitest";
+import {
+  elementScroll,
+  observeElementOffset,
+  observeElementRect,
+  Virtualizer,
+} from "@tanstack/react-virtual";
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from "vitest";
 import { createTimelineRowGeometry, RULER_H, TRACKS_TOP_PAD } from "./timelineLayout";
 import { extractTimelineVirtualRowRange, useTimelineVirtualRows } from "./useTimelineVirtualRows";
 import type { TimelineScrollViewportSnapshot } from "./useTimelineScrollViewport";
@@ -203,4 +209,27 @@ describe("useTimelineVirtualRows", () => {
     expect(rows.some((row) => row.index === 500)).toBe(false);
     act(() => root.unmount());
   });
+
+  // A scroll-end timer left running fires into the torn-down test window ("window is not defined").
+  it("gets no virtualizer change after unmount from a scroll just before it", async () => {
+    const scroll = createScrollElement(0);
+    const onChange = vi.fn();
+    const virtualizer = new Virtualizer<HTMLDivElement, Element>({
+      count: 100,
+      getScrollElement: () => scroll,
+      estimateSize: () => 48,
+      scrollToFn: elementScroll,
+      observeElementRect,
+      observeElementOffset,
+      onChange,
+    });
+    const unmount = virtualizer._didMount();
+    virtualizer._willUpdate();
+    scroll.dispatchEvent(new Event("scroll"));
+    unmount();
+    onChange.mockClear();
+
+    await new Promise((settle) => setTimeout(settle, 200));
+    expect(onChange).not.toHaveBeenCalled();
+  });
 });

package/src/utils/rounding.ts

@@ -3,6 +3,11 @@ export function roundTo3(val: number): number {
   return Math.round(val * 1000) / 1000;
 }
 
+/** Whole CSS px: GSAP parses a -50% translate against the integer offsetWidth/Height. */
+export function roundToLayoutPx(val: number): number {
+  return Math.round(val);
+}
+
 /** Round to 2 decimal places (centisecond precision for timeline values). */
 export function roundToCenti(val: number): number {
   return Math.round(val * 100) / 100;

package/src/utils/sdkEditTransaction.ts

@@ -11,7 +11,7 @@ import {
 
 export type CutoverResult =
   | { status: "declined"; reason: string }
-  | { status: "committed"; version: string }
+  | { status: "committed"; version: string; before: string; after: string }
   | { status: "failed"; error: Error };
 
 export interface SdkSessionPublication {
@@ -143,7 +143,9 @@ export function failedCutover(
 }
 
 /** Only an explicit decline may enter the legacy mutation backend. */
-export function cutoverCommittedOrThrow(result: CutoverResult): boolean {
+export function cutoverCommittedOrThrow(
+  result: CutoverResult,
+): result is Extract<CutoverResult, { status: "committed" }> {
   if (result.status === "failed") throw result.error;
   return result.status === "committed";
 }
@@ -300,7 +302,12 @@ async function commitCandidateEdit(
     });
   }
   if (refreshTarget) refreshCommittedEdit(edit.after, deps, options);
-  return { status: "committed", version: hashContent(edit.after) };
+  return {
+    status: "committed",
+    version: hashContent(edit.after),
+    before: originalContent,
+    after: edit.after,
+  };
 }
 
 export async function persistSdkCandidateMutation(