@hyperframes/studio 0.8.81 → 0.8.83

package/src/hooks/useGsapAnimationOps.ts

@@ -1,4 +1,8 @@
 import { useCallback } from "react";
+import {
+  serializeStudioFileMutation,
+  type StudioProjectFileWriter,
+} from "../utils/studioFileMutationCoordinator";
 import type { Composition } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { roundTo3 } from "../utils/rounding";
@@ -27,6 +31,7 @@ interface GsapAnimationOpsParams extends SdkAnimationDeps {
   commitMutation: CommitMutation;
   commitMutationSafely: SafeGsapCommitMutation;
   showToast: (message: string, tone?: "error" | "info") => void;
+  writeProjectFile?: StudioProjectFileWriter;
 }
 
 export function useGsapAnimationOps({
@@ -37,6 +42,7 @@ export function useGsapAnimationOps({
   showToast,
   sdkSession,
   sdkDeps,
+  writeProjectFile,
 }: GsapAnimationOpsParams) {
   const updateGsapMeta = useCallback(
     async (
@@ -122,13 +128,17 @@ export function useGsapAnimationOps({
         const pid = projectIdRef.current;
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
         if (!pid) return;
-        const assigned = await assignGsapTargetAutoIdIfNeeded({
-          projectId: pid,
-          targetPath,
-          selection,
-          autoId,
-          showToast,
-        });
+        const assign = () =>
+          assignGsapTargetAutoIdIfNeeded({
+            projectId: pid,
+            targetPath,
+            selection,
+            autoId,
+            showToast,
+          });
+        const assigned = await (writeProjectFile
+          ? serializeStudioFileMutation(writeProjectFile, targetPath, assign)
+          : assign());
         if (!assigned) return;
       }
 
@@ -181,7 +191,15 @@ export function useGsapAnimationOps({
         { label: `Add GSAP ${method} animation`, softReload: true },
       );
     },
-    [activeCompPath, commitMutation, projectIdRef, showToast, sdkSession, sdkDeps],
+    [
+      activeCompPath,
+      commitMutation,
+      projectIdRef,
+      showToast,
+      sdkSession,
+      sdkDeps,
+      writeProjectFile,
+    ],
   );
 
   type KeyframeEntry = {

package/src/hooks/useGsapScriptCommits.ts

@@ -523,6 +523,7 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     showToast,
     sdkSession,
     sdkDeps,
+    writeProjectFile,
   });
   const keyframeOps = useGsapKeyframeOps({
     activeCompPath,

package/src/hooks/useKeyframeKeyboard.test.tsx

@@ -0,0 +1,99 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useKeyframeKeyboard } from "./useKeyframeKeyboard";
+import { dispatchPlainKey, type HotkeyCallbacks } from "./appHotkeysDispatch";
+import { DEFAULT_SHORTCUT_SECTIONS } from "../player/components/studioShortcuts";
+import { usePlayerStore } from "../player/store/playerStore";
+import { createHappyDomRootHarness } from "../player/components/testRootHarness";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const { mount } = createHappyDomRootHarness();
+
+function KeyframeKeyboard(props: { enabled: boolean; onAddKeyframe: () => void }) {
+  useKeyframeKeyboard(props);
+  return null;
+}
+
+/** Wires the keyframe keys the way TimelineToolbar does; returns the add-keyframe spy. */
+function mountKeyframeKeyboard(enabled: boolean) {
+  const onAddKeyframe = vi.fn();
+  const host = document.createElement("div");
+  document.body.append(host);
+  act(() =>
+    mount(host).render(<KeyframeKeyboard enabled={enabled} onAddKeyframe={onAddKeyframe} />),
+  );
+  return onAddKeyframe;
+}
+
+function press(key: string, init: KeyboardEventInit = {}): KeyboardEvent {
+  const event = new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true, ...init });
+  window.dispatchEvent(event);
+  return event;
+}
+
+function selectKeyframe() {
+  usePlayerStore.setState({ selectedElementId: "box", selectedKeyframes: new Set(["box:50"]) });
+}
+
+beforeEach(selectKeyframe);
+afterEach(() => usePlayerStore.getState().reset());
+
+describe("keyframe shortcuts", () => {
+  it("every key the Keyframes section lists does something with a keyframe selected", () => {
+    mountKeyframeKeyboard(true);
+    const cb = {
+      onDeleteSelectedKeyframes: vi.fn(),
+      onToggleRecording: vi.fn(),
+      domEditSelectionRef: { current: null },
+      readOnlyPreview: false,
+    } as unknown as HotkeyCallbacks;
+    const appHotkeys = (event: KeyboardEvent) =>
+      dispatchPlainKey(event, event.key.toLowerCase(), cb);
+    window.addEventListener("keydown", appHotkeys, true);
+
+    const section = DEFAULT_SHORTCUT_SECTIONS.find((s) => s.title.startsWith("Keyframes"));
+    const dead = (section?.hints ?? []).filter((hint) => {
+      selectKeyframe();
+      return !press(hint.key === "Del" ? "Delete" : hint.key.toLowerCase()).defaultPrevented;
+    });
+    window.removeEventListener("keydown", appHotkeys, true);
+
+    expect(section?.hints.length).toBeGreaterThan(0);
+    expect(dead.map((hint) => hint.key)).toEqual([]);
+  });
+
+  it("K adds a keyframe only while enabled and leaves J and the arrows to playback", () => {
+    const playback = vi.fn();
+    window.addEventListener("keydown", playback);
+    const onAddKeyframe = mountKeyframeKeyboard(true);
+
+    for (const [key, shiftKey] of [
+      ["j", false],
+      ["J", true],
+      ["ArrowLeft", false],
+      ["ArrowRight", true],
+    ] as const) {
+      expect(press(key, { shiftKey }).defaultPrevented).toBe(false);
+    }
+    expect(playback).toHaveBeenCalledTimes(4);
+    expect(onAddKeyframe).not.toHaveBeenCalled();
+
+    expect(press("k").defaultPrevented).toBe(true);
+    expect(onAddKeyframe).toHaveBeenCalledTimes(1);
+    expect(playback).toHaveBeenCalledTimes(4);
+    window.removeEventListener("keydown", playback);
+  });
+
+  it("K stays playback's stop key when no keyframeable element is selected", () => {
+    const playback = vi.fn();
+    window.addEventListener("keydown", playback);
+    const onAddKeyframe = mountKeyframeKeyboard(false);
+
+    expect(press("k").defaultPrevented).toBe(false);
+    expect(onAddKeyframe).not.toHaveBeenCalled();
+    expect(playback).toHaveBeenCalledTimes(1);
+    window.removeEventListener("keydown", playback);
+  });
+});

package/src/hooks/useKeyframeKeyboard.ts

@@ -1,15 +1,9 @@
 import { useEffect, useCallback } from "react";
-import { usePlayerStore } from "../player/store/playerStore";
+import { STUDIO_PLAIN_KEYS } from "../player/components/studioShortcuts";
 
 interface KeyframeKeyboardOptions {
   enabled: boolean;
   onAddKeyframe?: () => void;
-  onDeleteKeyframe?: () => void;
-  onPrevKeyframe?: () => void;
-  onNextKeyframe?: () => void;
-  onToggleHold?: () => void;
-  onToggleExpand?: () => void;
-  onNudgeKeyframe?: (direction: -1 | 1, large: boolean) => void;
 }
 
 function isTextInput(el: Element | null): boolean {
@@ -19,75 +13,19 @@ function isTextInput(el: Element | null): boolean {
   return (el as HTMLElement).isContentEditable === true;
 }
 
-export function useKeyframeKeyboard({
-  enabled,
-  onAddKeyframe,
-  onDeleteKeyframe,
-  onPrevKeyframe,
-  onNextKeyframe,
-  onToggleHold,
-  onToggleExpand,
-  onNudgeKeyframe,
-}: KeyframeKeyboardOptions): void {
+export function useKeyframeKeyboard({ enabled, onAddKeyframe }: KeyframeKeyboardOptions): void {
   const handler = useCallback(
     (e: KeyboardEvent) => {
-      if (!enabled) return;
+      if (!enabled || !onAddKeyframe) return;
       if (isTextInput(document.activeElement)) return;
       if (e.metaKey || e.ctrlKey) return; // never shadow browser/system combos
-
-      const hasSelectedKeyframes = usePlayerStore.getState().selectedKeyframes.size > 0;
-
-      // Only consume a key we can actually act on. The fall-through matters:
-      // these keys (k/j/arrows) double as JKL playback shortcuts in
-      // usePlaybackKeyboard, so when a handler is absent we must let the event
-      // continue. When we DO act, stopImmediatePropagation prevents the playback
-      // handler from also firing (e.g. K pausing instead of adding a keyframe).
-      // The listener is registered in the capture phase so it runs first.
-      const consume = (run: () => void) => {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        run();
-      };
-
-      switch (e.key.toLowerCase()) {
-        case "k":
-          if (onAddKeyframe) consume(onAddKeyframe);
-          break;
-        case "delete":
-        case "backspace":
-          if (onDeleteKeyframe && hasSelectedKeyframes) consume(onDeleteKeyframe);
-          break;
-        case "j": {
-          const nav = e.shiftKey ? onNextKeyframe : onPrevKeyframe;
-          if (nav) consume(nav);
-          break;
-        }
-        case "h":
-          if (onToggleHold && hasSelectedKeyframes) consume(onToggleHold);
-          break;
-        case "u":
-          if (onToggleExpand) consume(onToggleExpand);
-          break;
-        case "arrowleft":
-          if (onNudgeKeyframe && hasSelectedKeyframes && !e.altKey)
-            consume(() => onNudgeKeyframe(-1, e.shiftKey));
-          break;
-        case "arrowright":
-          if (onNudgeKeyframe && hasSelectedKeyframes && !e.altKey)
-            consume(() => onNudgeKeyframe(1, e.shiftKey));
-          break;
-      }
+      if (e.key.toLowerCase() !== STUDIO_PLAIN_KEYS.addKeyframe) return;
+      // K is also playback's stop key: claiming it here keeps playback from also pausing.
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      onAddKeyframe();
     },
-    [
-      enabled,
-      onAddKeyframe,
-      onDeleteKeyframe,
-      onPrevKeyframe,
-      onNextKeyframe,
-      onToggleHold,
-      onToggleExpand,
-      onNudgeKeyframe,
-    ],
+    [enabled, onAddKeyframe],
   );
 
   useEffect(() => {

package/src/hooks/usePreviewPersistence.ts

@@ -29,7 +29,7 @@ interface RecordEditInput {
   files: Record<string, { before: string; after: string }>;
 }
 
-interface UsePreviewPersistenceParams {
+export interface UsePreviewPersistenceParams {
   showToast: (message: string, tone?: "error" | "info") => void;
   readOptionalProjectFile: (path: string) => Promise<string>;
   writeProjectFile: (path: string, content: string) => Promise<void>;

package/src/hooks/useThumbnailStripSize.test.tsx

@@ -0,0 +1,47 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it } from "vitest";
+import { MockResizeObserver, reportResize } from "./resizeObserverTestUtils";
+import { useThumbnailStripSize } from "./useThumbnailStripSize";
+
+Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+
+it("does not re-render the strip when the observer reports the size it already holds", () => {
+  const originalResizeObserver = globalThis.ResizeObserver;
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const host = document.createElement("div");
+  document.body.append(host);
+  Object.defineProperty(host, "clientWidth", { configurable: true, value: 300 });
+  Object.defineProperty(host, "clientHeight", { configurable: true, value: 40 });
+  const root = createRoot(host);
+  let stripRenders = 0;
+  function Strip({ label }: { label: string }) {
+    stripRenders += 1;
+    return label;
+  }
+  function Harness() {
+    const [size, ref] = useThumbnailStripSize();
+    return (
+      <div ref={ref}>
+        <Strip label={`${size.width}x${size.height}`} />
+      </div>
+    );
+  }
+  try {
+    act(() => root.render(<Harness />));
+    expect(host.textContent).toBe("300x40");
+    const settled = stripRenders;
+
+    act(() => reportResize(300, 40));
+    expect(stripRenders).toBe(settled);
+
+    act(() => reportResize(320, 40));
+    expect(stripRenders).toBe(settled + 1);
+    expect(host.textContent).toBe("320x40");
+  } finally {
+    act(() => root.unmount());
+    host.remove();
+    globalThis.ResizeObserver = originalResizeObserver;
+  }
+});

package/src/hooks/useThumbnailStripSize.ts

@@ -0,0 +1,31 @@
+import { useCallback, useRef, useState } from "react";
+import { useMountEffect } from "./useMountEffect";
+
+interface StripSize {
+  width: number;
+  height: number;
+}
+
+const resize = (width: number, height: number) => (prev: StripSize) =>
+  prev.width === width && prev.height === height ? prev : { width, height };
+
+/** Size of the thumbnail's parent, kept current by a ResizeObserver; 0x0 until measured. */
+export function useThumbnailStripSize() {
+  const [size, setSize] = useState<StripSize>({ width: 0, height: 0 });
+  const observerRef = useRef<ResizeObserver | null>(null);
+
+  const ref = useCallback((element: HTMLDivElement | null) => {
+    observerRef.current?.disconnect();
+    if (!element) return;
+    const target = element.parentElement ?? element;
+    setSize(resize(target.clientWidth, target.clientHeight));
+    observerRef.current = new ResizeObserver(([entry]) =>
+      setSize(resize(entry.contentRect.width, entry.contentRect.height)),
+    );
+    observerRef.current.observe(target);
+  }, []);
+
+  useMountEffect(() => () => observerRef.current?.disconnect());
+
+  return [size, ref] as const;
+}

package/src/hooks/useTimelineAssetDropOps.ts

@@ -109,8 +109,6 @@ export function useTimelineAssetDropOps({
       }
 
       try {
-        const originalContent = await readFileContent(pid, targetPath);
-
         const normalizedStart = Number(formatTimelineAttributeNumber(placement.start));
         const duration =
           Number.isFinite(durationOverride) && durationOverride != null && durationOverride > 0
@@ -120,7 +118,6 @@ export function useTimelineAssetDropOps({
         // A video with an audio stream lands audible; the mixer only hears a
         // <video> marked data-has-audio, and a muted drop was losing the sound.
         const hasAudio = await resolveDroppedAssetHasAudio(pid, assetPath, kind);
-        const newId = buildTimelineAssetId(assetPath, collectHtmlIds(originalContent));
         const resolvedAssetSrc = resolveTimelineAssetSrc(targetPath, assetPath);
 
         const resolvedTargetPath = targetPath || "index.html";
@@ -129,45 +126,51 @@ export function useTimelineAssetDropOps({
         );
         const newElementZIndex = Math.max(1, relevantElements.length + 1);
 
-        const { source: sourceWithRoom, track } = resolveDropTrack({
-          source: originalContent,
-          // insertRow counts the rows the timeline shows, so plan against those.
-          elements: relevantElements,
-          placement,
-          dropped: {
-            id: newId,
-            tag: kind === "image" ? "img" : kind,
-            start: normalizedStart,
-            duration: normalizedDuration,
-          },
-        });
-        const patchedContent = extendRootDurationInSource(
-          insertTimelineAssetIntoSource(
-            sourceWithRoom,
-            buildTimelineAssetInsertHtml({
+        let newId = "";
+        let track = 0;
+        const insertAsset = (originalContent: string) => {
+          newId = buildTimelineAssetId(assetPath, collectHtmlIds(originalContent));
+          const resolved = resolveDropTrack({
+            source: originalContent,
+            // insertRow counts the rows the timeline shows, so plan against those.
+            elements: relevantElements,
+            placement,
+            dropped: {
               id: newId,
-              hfId: `hf-${generateId()}`,
-              assetPath: resolvedAssetSrc,
-              kind,
+              tag: kind === "image" ? "img" : kind,
               start: normalizedStart,
               duration: normalizedDuration,
-              track,
-              zIndex: newElementZIndex,
-              hasAudio,
-              geometry: fitTimelineAssetGeometry(
-                null,
-                resolveTimelineAssetCompositionSize(originalContent),
-              ),
-            }),
-          ),
-          normalizedStart + normalizedDuration,
-        );
+            },
+          });
+          track = resolved.track;
+          return extendRootDurationInSource(
+            insertTimelineAssetIntoSource(
+              resolved.source,
+              buildTimelineAssetInsertHtml({
+                id: newId,
+                hfId: `hf-${generateId()}`,
+                assetPath: resolvedAssetSrc,
+                kind,
+                start: normalizedStart,
+                duration: normalizedDuration,
+                track,
+                zIndex: newElementZIndex,
+                hasAudio,
+                geometry: fitTimelineAssetGeometry(
+                  null,
+                  resolveTimelineAssetCompositionSize(originalContent),
+                ),
+              }),
+            ),
+            normalizedStart + normalizedDuration,
+          );
+        };
 
         await saveProjectFilesWithHistory({
           projectId: pid,
           label: "Add timeline asset",
-          files: { [targetPath]: patchedContent },
-          readFile: async () => originalContent,
+          files: { [targetPath]: insertAsset },
+          readFile: (path) => readFileContent(pid, path),
           writeFile: writeProjectFile,
           recordEdit,
         });

package/src/hooks/useTimelineDeleteOps.ts

@@ -5,11 +5,11 @@ import { buildProjectApiPath } from "../utils/projectRouting";
 import { useCallback, useRef, type MutableRefObject, type RefObject } from "react";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
-import { saveProjectFilesWithHistory, type RecordEditInput } from "../utils/studioFileHistory";
+import { saveServerRewriteWithHistory, type RecordEditInput } from "../utils/studioFileHistory";
 import { studioWriteHeaders } from "../utils/studioFileVersion";
 import { getTimelineElementLabel } from "../utils/studioHelpers";
 import { buildPatchTarget, removeIframeTimelineElements } from "./timelineEditingHelpers";
-import { captureDurationRollback, readFileContent } from "./timelineTimingSync";
+import { captureDurationRollback } from "./timelineTimingSync";
 import { setCompositionDurationToContent } from "../utils/timelineAssetDrop";
 import { furthestClipEndFromSource } from "../player/lib/timelineElementHelpers";
 import {
@@ -100,71 +100,68 @@ export function useTimelineDeleteOps({
         (candidate) => (candidate.sourceFile || activeCompPath || "index.html") === targetPath,
       );
       try {
-        const originalContent = await readFileContent(pid, targetPath);
-
-        // Remove every selected element before saving once. The server rewrites
-        // the file per call, so `removedContent` after the last one holds them
-        // all — which is what makes this a single history entry, and a single
-        // undo, rather than one per clip.
-        let removedContent = originalContent;
-        for (const target of sameFile) {
-          const patchTarget = buildPatchTarget(target);
-          if (!patchTarget) {
-            throw new Error(`Timeline element ${target.id} is missing a patchable target`);
-          }
-
-          const removeResponse = await fetch(
-            buildProjectApiPath(
-              pid,
-              `/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
-            ),
-            {
-              method: "POST",
-              headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-              body: JSON.stringify({ target: patchTarget }),
-            },
-          );
-          if (!removeResponse.ok) {
-            throw new Error(`Failed to delete ${target.id} from ${targetPath}`);
-          }
-
-          const removeData = (await removeResponse.json()) as {
-            changed?: boolean;
-            content?: string;
-          };
-          if (typeof removeData.content === "string") removedContent = removeData.content;
-        }
-        // Content-driven duration: shrink the composition to the furthest
-        // remaining clip end, read from the post-removal SOURCE (raw
-        // data-duration), so deleting the last/longest clip removes trailing
-        // empty space. Measured from the source, not the store, whose
-        // durations are runtime-truncated.
-        const deleteContentEnd = furthestClipEndFromSource(removedContent);
-        const patchedContent = setCompositionDurationToContent(removedContent, deleteContentEnd);
-        // Optimistically reflect the shrunk length in the readout/seek bar,
-        // rolling it back if the persist below fails (see captureDurationRollback).
-        const rollbackDuration = captureDurationRollback(previewIframeRef.current);
-        if (deleteContentEnd > 0 && targetPath === (activeCompPath || "index.html")) {
-          usePlayerStore.getState().setDuration(deleteContentEnd);
-        }
-
         // Shared with the ripple move below so a folded ripple is one undo
         // step with the delete, not two (editHistory.ts coalesces by key +
         // window across separate recordEdit calls, not by label).
         const coalesceKey = `main-track-ripple-delete:${deleteGestureSeq++}`;
         const deleteHistoryLabel = "Delete timeline clip";
+        let rollbackDuration = () => {};
         try {
-          await saveProjectFilesWithHistory({
+          await saveServerRewriteWithHistory({
             projectId: pid,
+            path: targetPath,
             label: deleteHistoryLabel,
             coalesceKey,
-            files: { [targetPath]: patchedContent },
-            readFile: async () => originalContent,
-            // remove-element already wrote the removal, so disk holds THAT — not the
-            // content read at the top. Undo still goes back to the original.
-            diskContent: { [targetPath]: removedContent },
             writeFile: writeProjectFile,
             recordEdit,
+            rewrite: async (originalContent) => {
+              // Remove every selected element before saving once. The server rewrites
+              // the file per call, so `removedContent` after the last one holds them
+              // all — which is what makes this a single history entry, and a single
+              // undo, rather than one per clip.
+              let removedContent = originalContent;
+              for (const target of sameFile) {
+                const patchTarget = buildPatchTarget(target);
+                if (!patchTarget) {
+                  throw new Error(`Timeline element ${target.id} is missing a patchable target`);
+                }
+
+                const removeResponse = await fetch(
+                  buildProjectApiPath(
+                    pid,
+                    `/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
+                  ),
+                  {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
+                    body: JSON.stringify({ target: patchTarget }),
+                  },
+                );
+                if (!removeResponse.ok) {
+                  throw new Error(`Failed to delete ${target.id} from ${targetPath}`);
+                }
+
+                const removeData = (await removeResponse.json()) as {
+                  changed?: boolean;
+                  content?: string;
+                };
+                if (typeof removeData.content === "string") removedContent = removeData.content;
+              }
+              // Shrink to the furthest remaining clip end, read from the post-removal source:
+              // store durations are runtime-truncated.
+              const deleteContentEnd = furthestClipEndFromSource(removedContent);
+              const patchedContent = setCompositionDurationToContent(
+                removedContent,
+                deleteContentEnd,
+              );
+              // Optimistically reflect the shrunk length in the readout/seek bar,
+              // rolling it back if the persist below fails (see captureDurationRollback).
+              rollbackDuration = captureDurationRollback(previewIframeRef.current);
+              if (deleteContentEnd > 0 && targetPath === (activeCompPath || "index.html")) {
+                usePlayerStore.getState().setDuration(deleteContentEnd);
+              }
+              return { disk: removedContent, after: patchedContent };
+            },
           });
         } catch (error) {
           rollbackDuration();

package/src/hooks/useTimelineEditing.ts

@@ -8,7 +8,6 @@ import { useTimelineAssetDropOps } from "./useTimelineAssetDropOps";
 import {
   applyTimelineStackingReorder,
   patchIframeDomTiming,
-  playbackStartAttributeForElement,
   persistTimelineEdit,
   formatTimelineAttributeNumber,
   formatTimelineMediaOffset,
@@ -16,6 +15,7 @@ import {
   buildTimelineMoveTimingPatch,
   buildTimelineResizeTimingPatch,
 } from "./timelineEditingHelpers";
+import { playbackStartAttributeForElement } from "../player/lib/timelineElementHelpers";
 import {
   captureDurationRollback,
   finishClipTimingFallback,
@@ -243,6 +243,7 @@ export function useTimelineEditing({
             label: "Move timeline clip",
             coalesceKey,
             recordEdit,
+            writeProjectFile,
             edit: { kind: "shift", delta: updates.start - element.start },
           }).finally(() => invalidateGsapCache?.());
         const moveFallback = () =>
@@ -346,6 +347,7 @@ export function useTimelineEditing({
           label: "Resize timeline clip",
           coalesceKey,
           recordEdit,
+          writeProjectFile,
           edit: {
             kind: "scale",
             from: { start: element.start, duration: element.duration },

package/src/hooks/useTimelineGroupEditing.ts

@@ -15,11 +15,11 @@ import {
   formatTimelineAttributeNumber,
   formatTimelineMediaOffset,
   patchIframeDomTiming,
-  playbackStartAttributeForElement,
   persistTimelineBatchEdit,
   type PersistTimelineBatchChange,
   type RecordEditInput,
 } from "./timelineEditingHelpers";
+import { playbackStartAttributeForElement } from "../player/lib/timelineElementHelpers";
 import {
   captureDurationRollback,
   finishGroupTimingGsapFallback,
@@ -330,6 +330,7 @@ export function useTimelineGroupEditing({
             errorLabel: "Failed to shift GSAP positions",
             coalesceKey,
             recordEdit,
+            writeProjectFile,
             activeCompPath,
             changes,
             resolveChangePath: (element) => targetPathFor(element, activeCompPath),
@@ -365,6 +366,7 @@ export function useTimelineGroupEditing({
       trySdkBatchPersist,
       showToast,
       invalidateGsapCache,
+      writeProjectFile,
     ],
   );
 
@@ -437,6 +439,7 @@ export function useTimelineGroupEditing({
             errorLabel: "Failed to scale GSAP positions",
             coalesceKey,
             recordEdit,
+            writeProjectFile,
             activeCompPath,
             changes,
             resolveChangePath: (element) => targetPathFor(element, activeCompPath),
@@ -478,6 +481,7 @@ export function useTimelineGroupEditing({
       trySdkBatchPersist,
       showToast,
       invalidateGsapCache,
+      writeProjectFile,
     ],
   );