@hyperframes/studio 0.8.98 → 0.8.99

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(