@hyperframes/studio 0.8.115 → 0.8.116

package/src/hooks/useBlockCatalog.ts

@@ -5,6 +5,7 @@ import {
   type BlockCategory,
   resolveBlockCategory,
 } from "../utils/blockCategories";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 type CatalogItem = RegistryItem & {
   category: BlockCategory;
@@ -14,7 +15,7 @@ let catalogCache: CatalogItem[] | null = null;
 let catalogRequest: Promise<CatalogItem[]> | null = null;
 
 function loadCatalog(): Promise<CatalogItem[]> {
-  catalogRequest ??= fetch("/api/registry/blocks")
+  catalogRequest ??= studioApiFetch("/api/registry/blocks")
     .then((response) => {
       if (!response.ok) throw new Error("Failed to load catalog");
       return response.json() as Promise<RegistryItem[]>;

package/src/hooks/useCaptionDetection.ts

@@ -5,6 +5,7 @@ import { useCaptionStore } from "../captions/store";
 import { acceptStudioRuntimeMessage } from "../player/lib/runtimeProtocol";
 import { useCaptionSync } from "../captions/hooks/useCaptionSync";
 import { parseCaptionComposition } from "../captions/parser";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 interface UseCaptionDetectionParams {
   projectId: string | null;
@@ -110,7 +111,7 @@ export function useCaptionDetection({
 
       activating = true;
       const srcPath = captionSrcPath;
-      fetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(srcPath)}`))
+      studioApiFetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(srcPath)}`))
         .then((r) => r.json())
         .then((data: { content?: string }) => {
           if (!data.content || !doc || !win || useCaptionStore.getState().isEditMode) return;

package/src/hooks/useCompositionContentLoader.ts

@@ -1,5 +1,6 @@
 import { buildProjectApiPath } from "../utils/projectRouting";
 import { useCallback } from "react";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 /**
  * Loads a composition file's content for the source editor when a composition
@@ -24,7 +25,7 @@ export function useCompositionContentLoader({
       if (!projectId) return;
       setActiveCompPath(comp.endsWith(".html") ? comp : null);
       setEditingFile({ path: comp, content: null });
-      fetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(comp)}`))
+      studioApiFetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(comp)}`))
         .then(async (r) => {
           if (!r.ok) throw new Error(`Failed to load ${comp} (${r.status})`);
           return r.json();

package/src/hooks/useDomEditCommitsHelpers.ts

@@ -7,6 +7,7 @@ import { buildProjectApiPath } from "../utils/projectRouting";
 import type { DomEditPatchBatch } from "./domEditCommitTypes";
 import { formatFieldsSuffix } from "./gsapScriptCommitHelpers";
 import { studioWriteHeaders } from "../utils/studioFileVersion";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 export function formatUnsafeFieldList(fields: Array<{ path: string }>): string {
   return fields.map((field) => field.path).join(", ");
@@ -99,7 +100,7 @@ function isAtomicElementPatchFile(value: unknown): value is AtomicElementPatchFi
 export async function patchElementBatches(projectId: string, batches: DomEditPatchBatch[]) {
   const body = JSON.stringify({ batches });
   try {
-    const response = await fetch(
+    const response = await studioApiFetch(
       `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-element-batches`,
       {
         method: "POST",
@@ -178,7 +179,7 @@ export async function postPatchElement(
   body: unknown,
   showToast: ShowToast,
 ): Promise<PatchElementResponse> {
-  const response = await fetch(
+  const response = await studioApiFetch(
     buildProjectApiPath(
       projectId,
       `/file-mutations/patch-element/${encodeURIComponent(targetPath)}`,

package/src/hooks/useDomEditSession.test.tsx

@@ -10,6 +10,7 @@ import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { TimelineElement } from "../player";
 import type { UseDomEditSessionParams } from "./useDomEditSession";
 import { makeSelection } from "./domSelectionTestHarness";
+import { readTranslatePx } from "../components/editor/plainTranslate";
 
 const styleOp = (property: string, value: string): PatchOperation => ({
   type: "inline-style",
@@ -66,6 +67,7 @@ const groupSelectionSpy = vi.fn();
 const gsapCommitMutation = Object.assign(vi.fn(), { batch: vi.fn() });
 const neverParsed = new Promise<{ animations: GsapAnimation[] }>(() => undefined);
 const parsedFile = { current: neverParsed };
+const groupCommitSpy = vi.fn(async () => {});
 
 function createSessionParams(
   overrides: Partial<UseDomEditSessionParams> = {},
@@ -256,7 +258,7 @@ vi.mock("./usePreviewInteraction", () => ({
 vi.mock("./useGsapAwareEditing", () => ({
   useGsapAwareEditing: () => ({
     handleGsapAwarePathOffsetCommit: vi.fn(),
-    handleGsapAwareGroupPathOffsetCommit: vi.fn(),
+    handleGsapAwareGroupPathOffsetCommit: groupCommitSpy,
     handleGsapAwareBoxSizeCommit: vi.fn(),
     handleGsapAwareRotationCommit: vi.fn(),
     commitAnimatedProperty: vi.fn(),
@@ -605,3 +607,30 @@ describe("a shadow reload promoted without a host re-render", () => {
     act(() => root.unmount());
   });
 });
+
+describe("handleDomGroupMoveBy", () => {
+  it("saves through the group drag's commit, leaving a refusal for the host to explain", async () => {
+    const { useDomEditSession } = await import("./useDomEditSession");
+    const element = document.createElement("div");
+    document.body.append(element);
+    element.getBoundingClientRect = () => {
+      const { x, y } = readTranslatePx(element);
+      return new DOMRect(x, y, 40, 20);
+    };
+    const selection = makeSelection("card", element);
+    let moveBy!: ReturnType<typeof useDomEditSession>["handleDomGroupMoveBy"];
+    function Probe() {
+      moveBy = useDomEditSession(createSessionParams()).handleDomGroupMoveBy;
+      return null;
+    }
+    const root = createRoot(document.createElement("div"));
+    act(() => root.render(<Probe />));
+    await act(() => moveBy([{ selection, delta: { x: 10, y: 0 } }]));
+    expect(groupCommitSpy).toHaveBeenCalledWith(
+      [{ selection, next: { x: 10, y: 0 }, plainTranslate: true }],
+      { refusalToast: false },
+    );
+    act(() => root.unmount());
+    element.remove();
+  });
+});

package/src/hooks/useDomEditSession.ts

@@ -25,6 +25,7 @@ import { membersForDelete, timelineElementsForDelete } from "./domEditDeleteMemb
 import type { RecordEditInput } from "./domEditDeleteMembers";
 import type { DomEditTimelineParams } from "./useDomSelectionTypes";
 import { useLivePreviewIframe } from "./useLivePreviewIframe";
+import { moveDomGroupBy, type DomGroupMove } from "../components/editor/domGroupMoveBy";
 // Re-exported: the delete rule lives in its own module; callers and its test import it from here.
 export { membersForDelete };
 
@@ -445,6 +446,7 @@ export function useDomEditSession({
     domEditSelection,
     selectedGsapAnimations,
     gsapCommitMutation,
+    activeCompPath,
     previewIframeRef,
     showToast,
     bumpGsapCache,
@@ -459,6 +461,13 @@ export function useDomEditSession({
     setArcPath,
     updateArcSegment,
   });
+  const handleDomGroupMoveBy = useCallback(
+    (moves: DomGroupMove[]) =>
+      moveDomGroupBy(moves, (updates) =>
+        handleGsapAwareGroupPathOffsetCommit(updates, { refusalToast: false }),
+      ),
+    [handleGsapAwareGroupPathOffsetCommit],
+  );
   const { handleUpdateSegmentEase, handleUpdateKeyframeEase, handleSetAllKeyframeEases } =
     useKeyframeEaseCommits({ gsapCommitMutation, domEditSelectionRef });
   const committable = useCommitPreflightCapabilities({
@@ -497,6 +506,7 @@ export function useDomEditSession({
     handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit: handleGsapAwarePathOffsetCommit,
     handleDomGroupPathOffsetCommit: handleGsapAwareGroupPathOffsetCommit,
+    handleDomGroupMoveBy,
     handleDomZIndexReorderCommit,
     handleDomBoxSizeCommit: handleGsapAwareBoxSizeCommit,
     handleDomRotationCommit: handleGsapAwareRotationCommit,

package/src/hooks/useDomEditTextCommits.test.tsx

@@ -350,6 +350,29 @@ describe("useDomEditTextCommits", () => {
     expect(outcome).toEqual({ ok: true, persistence });
   });
 
+  it("saves a style map on a selection as one patch, so it is one undo step", async () => {
+    const { iframe, element } = previewElement("<div id='card'>Original</div>", "card");
+    const persist = vi.fn().mockResolvedValue({ sourceFile: "index.html", changed: true });
+    const hook = renderTextCommitHook(
+      commitParams({
+        previewIframeRef: { current: iframe },
+        domEditSelection: null,
+        persistDomEditOperations: persist,
+      }),
+    );
+
+    await act(async () => {
+      await hook.handleDomStyleCommitForSelection(selectionFor(element), {
+        "border-width": "4px",
+        "border-style": "solid",
+      });
+    });
+
+    expect(persist).toHaveBeenCalledTimes(1);
+    expect(element.style.borderWidth).toBe("4px");
+    expect(element.style.borderStyle).toBe("solid");
+  });
+
   it("declines a style commit with no selection, without reaching the writer", async () => {
     const persistDomEditOperations = vi.fn().mockResolvedValue(undefined);
     const hook = renderTextCommitHook(

package/src/hooks/useDomEditTextCommits.ts

@@ -109,7 +109,11 @@ export function useDomEditTextCommits({
   });
 
   const handleDomStyleCommitForSelection = useCallback(
-    (selection: DomEditSelection, property: string, value: string): Promise<DomEditCommitOutcome> =>
+    (
+      selection: DomEditSelection,
+      propertyOrStylesAsOnePatch: string | Record<string, string>,
+      value = "",
+    ): Promise<DomEditCommitOutcome> =>
       commitDomStyles(
         {
           activeCompPath,
@@ -121,7 +125,9 @@ export function useDomEditTextCommits({
           resync: refreshDomEditSelectionFromPreview,
         },
         selection,
-        { [property]: value },
+        typeof propertyOrStylesAsOnePatch === "string"
+          ? { [propertyOrStylesAsOnePatch]: value }
+          : propertyOrStylesAsOnePatch,
       ),
     [
       activeCompPath,

package/src/hooks/useDomGeometryCommit.ts

@@ -128,6 +128,7 @@ export function useDomGeometryCommit({
     domEditSelection: null,
     selectedGsapAnimations: NO_SELECTED_ANIMATIONS,
     gsapCommitMutation: gsap.commitMutation,
+    activeCompPath,
     previewIframeRef: iframeRef,
     showToast,
     bumpGsapCache,

package/src/hooks/useEditHistoryActions.paint.test.tsx

@@ -4,7 +4,7 @@ import { createRoot } from "react-dom/client";
 import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
-import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, expect, it, vi, type Mock } from "vitest";
 import {
   createStudioApi,
   openProjectHistory,
@@ -168,6 +168,20 @@ it("an undo pressed while a save is still running waits for the server instead o
   expect(s.box()).toBe("10px");
 });
 
+it("an undo waits for a save queued before its key, not one queued after", async () => {
+  const s = await studio();
+  await s.edit();
+  let land!: () => void;
+  void s.persistence().queueDomEditSave(() => new Promise<void>((resolve) => (land = resolve)));
+  await vi.waitFor(() => expect(land).toBeTypeOf("function"));
+
+  const undone = s.actions().undo();
+  void s.persistence().queueDomEditSave(() => new Promise<void>(() => {}));
+  land();
+  await act(() => undone);
+  expect(s.file()).toBe(BEFORE);
+});
+
 it("an undo after an outside write ends with the preview showing the file the server restored", async () => {
   const s = await studio();
   await s.edit();
@@ -202,10 +216,8 @@ function Nudge({ target, save }: { target: HTMLElement; save: () => Promise<void
   return null;
 }
 
-it("an undo pressed while a nudge waits for more keys never shows the move before it undone", async () => {
-  const s = await studio();
-  await s.edit();
-  resetNudgeKeys();
+/** A nudge save that waits for `finish()`, then writes and records the nudge as the real save does. */
+function queuedNudgeSave(s: Awaited<ReturnType<typeof studio>>) {
   let finish!: () => void;
   const save = vi.fn(async () => {
     await new Promise<void>((resolve) => (finish = resolve));
@@ -215,6 +227,24 @@ it("an undo pressed while a nudge waits for more keys never shows the move befor
       files: { "index.html": { before: AFTER, after: NUDGED } },
     });
   });
+  return { save, finish: () => finish() };
+}
+
+/** Mounts the nudge, presses ArrowRight once and waits for its save; returns the nudge's translate reader. */
+async function pressNudge(s: Awaited<ReturnType<typeof studio>>, save: Mock<() => Promise<void>>) {
+  s.mount(createElement(Nudge, { target: s.element("box"), save }));
+  act(() => {
+    window.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", cancelable: true }));
+  });
+  await vi.waitFor(() => expect(save).toHaveBeenCalledTimes(1));
+  return () => s.element("box").style.getPropertyValue("translate");
+}
+
+it("an undo pressed while a nudge waits for more keys never shows the move before it undone", async () => {
+  const s = await studio();
+  await s.edit();
+  resetNudgeKeys();
+  const { save, finish } = queuedNudgeSave(s);
   s.mount(createElement(Nudge, { target: s.element("box"), save }));
   act(() => {
     window.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", cancelable: true }));
@@ -240,21 +270,8 @@ it("an undo pressed while a nudge's save is queued shows the nudge undone in the
   const s = await studio();
   await s.edit();
   resetNudgeKeys();
-  let finish!: () => void;
-  const save = vi.fn(async () => {
-    await new Promise<void>((resolve) => (finish = resolve));
-    writeFileSync(s.path, NUDGED);
-    await s.history().recordEdit({
-      label: "Move layer",
-      files: { "index.html": { before: AFTER, after: NUDGED } },
-    });
-  });
-  s.mount(createElement(Nudge, { target: s.element("box"), save }));
-  act(() => {
-    window.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", cancelable: true }));
-  });
-  await vi.waitFor(() => expect(save).toHaveBeenCalledTimes(1));
-  const nudge = () => s.element("box").style.getPropertyValue("translate");
+  const { save, finish } = queuedNudgeSave(s);
+  const nudge = await pressNudge(s, save);
   expect(nudge()).not.toBe("");
 
   const undone = s.actions().undo();
@@ -267,6 +284,51 @@ it("an undo pressed while a nudge's save is queued shows the nudge undone in the
   expect(s.box()).toBe("50px");
 });
 
+/** A nudge whose save is queued and then rejects, and the history requests the undo sends. */
+async function failingNudge(s: Awaited<ReturnType<typeof studio>>) {
+  resetNudgeKeys();
+  let fail!: () => void;
+  const save = vi.fn(
+    () => new Promise<void>((_, reject) => (fail = () => reject(new Error("The save failed.")))),
+  );
+  const nudge = await pressNudge(s, save);
+  const steps: string[] = [];
+  const real = globalThis.fetch;
+  vi.stubGlobal("fetch", (url: string, init?: RequestInit) => {
+    if (/\/history\/(step|undo)$/.test(url)) steps.push(url);
+    return real(url, init);
+  });
+  return { fail: () => fail(), steps, nudge };
+}
+
+it("an undo pressed while a nudge's save fails keeps the nudge undone and steps no older edit", async () => {
+  const s = await studio();
+  await s.edit();
+  const n = await failingNudge(s);
+  expect(n.nudge()).not.toBe("");
+
+  const undone = s.actions().undo();
+  expect(n.nudge()).toBe("");
+  n.fail();
+  await act(() => undone);
+  expect(n.steps).toEqual([]);
+  expect(s.file()).toBe(AFTER);
+  expect(s.box()).toBe("50px");
+  expect(n.nudge()).toBe("");
+});
+
+it("an undo pressed while the only edit's save fails leaves the screen as the file, nothing put back", async () => {
+  const s = await studio();
+  s.show(BEFORE);
+  const n = await failingNudge(s);
+
+  const undone = s.actions().undo();
+  n.fail();
+  await act(() => undone);
+  expect(s.file()).toBe(BEFORE);
+  expect(n.nudge()).toBe("");
+});
+
 it("an undo pressed while a queued save fails undoes the edit before it, file and box alike", async () => {
   const s = await studio();
   await s.edit();

package/src/hooks/useEditHistoryActions.test.tsx

@@ -5,6 +5,7 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
 import { useEditHistoryActions, type EditHistoryHandle } from "./useEditHistoryActions";
+import { trackStudioPendingEdit } from "../utils/studioPendingEdits";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -30,6 +31,7 @@ function mount(
     undo: vi.fn<EditHistoryHandle["undo"]>(async () => result),
     redo: vi.fn<EditHistoryHandle["redo"]>(async () => result),
     predict: () => predicted ?? null,
+    claims: () => 7,
   };
   const putBack = vi.fn();
   const deps = {
@@ -60,6 +62,19 @@ const PREDICTED = { id: "e1", files: { "index.html": { previous: "B", restored:
 const SERVER_FILES = { "index.html": { previous: "B", restored: "A2" } };
 
 describe("useEditHistoryActions", () => {
+  it("asks for the edit claimed after the key's claim count only when an edit was saving at the key", async () => {
+    const { deps, actions } = mount({ ok: false, reason: "empty" });
+    await act(() => actions.undo());
+    expect(deps.editHistory.undo.mock.calls[0]![0].claimedAfter).toBeUndefined();
+
+    let land!: () => void;
+    trackStudioPendingEdit(new Promise<void>((resolve) => (land = resolve)));
+    const undone = actions.undo();
+    land();
+    await act(() => undone);
+    expect(deps.editHistory.undo.mock.calls[1]![0].claimedAfter).toBe(7);
+  });
+
   it("corrects a shown step from the server's restore, diffed from what the preview shows", async () => {
     const { deps, actions } = mount(
       { ok: true, label: "Undid: Move", paths: ["index.html"], undoes: "e1", files: SERVER_FILES },

package/src/hooks/useEditHistoryActions.ts

@@ -3,7 +3,10 @@ import { useCallback, useMemo } from "react";
 import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
 import type { RestoreFiles } from "../utils/gsapUndoRestore";
-import { revertNewestStudioPendingEdit } from "../utils/studioPendingEdits";
+import {
+  hasStudioPendingEdits,
+  paintBackNewestStudioPendingEdit,
+} from "../utils/studioPendingEdits";
 
 interface HistoryResult {
   ok: boolean;
@@ -18,11 +21,13 @@ interface HistoryResult {
 interface HistoryFileCallbacks {
   readFile: (path: string) => Promise<string>;
   serialize?: <T>(paths: readonly string[], task: () => Promise<T>) => Promise<T>;
+  claimedAfter?: number;
 }
 export interface EditHistoryHandle {
   undo: (cb: HistoryFileCallbacks) => Promise<HistoryResult>;
   redo: (cb: HistoryFileCallbacks) => Promise<HistoryResult>;
   predict?: (direction: "undo" | "redo") => { id: string; files: RestoreFiles } | null;
+  claims?: () => number;
   state: {
     undo: ReadonlyArray<{ createdAt: number }>;
     redo: ReadonlyArray<{ createdAt: number }>;
@@ -30,7 +35,7 @@ export interface EditHistoryHandle {
 }
 
 export interface UseEditHistoryActionsOptions {
-  editHistory: Pick<EditHistoryHandle, "undo" | "redo" | "predict">;
+  editHistory: Pick<EditHistoryHandle, "undo" | "redo" | "predict" | "claims">;
   readOptionalProjectFile: (path: string) => Promise<string>;
   readProjectFile: (path: string) => Promise<string>;
   writeProjectFile: (path: string, content: string) => Promise<void>;
@@ -77,22 +82,28 @@ export function useEditHistoryActions({
       const predicted = editHistory.predict?.(direction) ?? null;
       const predictedShown = predicted ? (showHistoryRestoreNow?.(predicted.files) ?? null) : null;
       const pendingEditShown =
-        !predictedShown && direction === "undo" ? revertNewestStudioPendingEdit() : null;
-      const putBack = predictedShown ?? pendingEditShown;
+        !predictedShown && direction === "undo" ? paintBackNewestStudioPendingEdit() : null;
+      const putBack = predictedShown ?? pendingEditShown?.showAgain;
+      const claimedAfter =
+        direction === "undo" && hasStudioPendingEdits() ? editHistory.claims?.() : undefined;
       let result: HistoryResult = { ok: false, reason: "failed" };
       let serverSteppedShown = false;
+      let revertIsTheUndo = false;
       try {
         await waitForPendingDomEditSaves();
+        revertIsTheUndo = Boolean(pendingEditShown && !(await pendingEditShown.landed()));
+        if (revertIsTheUndo) return;
         result = await editHistory[direction]({
           readFile: readHistoryFile,
           serialize: serializeHistoryFiles,
+          claimedAfter,
         });
         const stepped = Boolean(result.ok && result.label);
         serverSteppedShown = predictedShown
           ? stepped && result.undoes === predicted?.id
           : stepped && Boolean(pendingEditShown);
       } finally {
-        if (putBack && !serverSteppedShown) putBack();
+        if (putBack && !serverSteppedShown && !revertIsTheUndo) putBack();
       }
       if (!result.ok && result.reason === "content-mismatch") {
         showToast(

package/src/hooks/useElementLifecycleOps.ts

@@ -24,6 +24,7 @@ import type { CommitDomEditPatchBatches, DomEditPatchBatch } from "./domEditComm
 import { domEditCommitDeclined, type DomEditCommitOutcome } from "./domEditCommitRunner";
 import { cutoverCommittedOrThrow, type CutoverResult } from "../utils/sdkCutover";
 import { studioWriteHeaders } from "../utils/studioFileVersion";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 interface UseElementLifecycleOpsParams extends DomEditCommitBaseParams {
   /** Route delete through SDK when session resolves the hf-id. */
@@ -156,7 +157,7 @@ export function useElementLifecycleOps({
           writeFile: writeProjectFile,
           recordEdit: editHistory.recordEdit,
           rewrite: async (originalContent) => {
-            const removeResponse = await fetch(
+            const removeResponse = await studioApiFetch(
               buildProjectApiPath(
                 pid,
                 `/file-mutations/remove-elements/${encodeURIComponent(targetPath)}`,

package/src/hooks/useEnableKeyframes.test.ts

@@ -378,7 +378,10 @@ function makeElementSelection(): DomEditSelection {
   } as DomEditSelection;
 }
 
-function stubFlatTweenConversion(id: string): {
+function stubFlatTweenConversion(
+  id: string,
+  easeEach?: string,
+): {
   flat: GsapAnimation;
   converted: GsapAnimation;
 } {
@@ -393,6 +396,7 @@ function stubFlatTweenConversion(id: string): {
         { percentage: 0, properties: { x: 0 } },
         { percentage: 100, properties: { x: 10 } },
       ],
+      ...(easeEach && { easeEach }),
     },
   });
   flatTweenResponses(flat, converted);
@@ -437,6 +441,33 @@ describe("useEnableKeyframes — flat tween transaction", () => {
     expect(convertOptions?.coalesceKey).toEqual(expect.any(String));
   });
 
+  it("keeps the converted tween's easeEach when it extends it to the playhead", async () => {
+    window.location.hash = "#/project/test-project";
+    usePlayerStore.setState({ currentTime: 3 });
+    const { flat } = stubFlatTweenConversion("flat-1", "none");
+    const commitMutation = vi.fn(async () => undefined);
+    const enable = renderEnableKeyframes({
+      domEditSelection: makeElementSelection(),
+      selectedGsapAnimations: [flat],
+      previewIframeRef: {
+        current: {
+          contentWindow: { gsap: { getProperty: () => 10 } },
+        } as unknown as HTMLIFrameElement,
+      },
+      handleGsapAddAnimation: vi.fn(),
+      handleGsapConvertToKeyframes: vi.fn(async () => undefined),
+      handleGsapRemoveKeyframe: vi.fn(),
+      commitMutation,
+    });
+
+    await act(async () => enable());
+
+    expect(commitMutation.mock.calls[0]?.[0]).toMatchObject({
+      type: "replace-with-keyframes",
+      easeEach: "none",
+    });
+  });
+
   it("passes the convert coalesce key to an inside-range batch edit", async () => {
     window.location.hash = "#/project/test-project";
     usePlayerStore.setState({ currentTime: 1.5 });

package/src/hooks/useEnableKeyframes.ts

@@ -15,6 +15,7 @@ import { fetchParsedAnimations, getAnimationsForElement } from "./useGsapTweenCa
 import {
   existingTweenTargetSelector,
   computeElementPercentage,
+  keyframeEases,
   KEYFRAME_PCT_MATCH,
   isInstantHold,
   resolveEditableTweenDuration,
@@ -266,7 +267,7 @@ async function extendKeyframedTweenToPlayhead(
       position: extended.position,
       duration: extended.duration,
       keyframes: extended.keyframes,
-      ease: anim.ease,
+      ...keyframeEases(anim),
     },
     {
       label: "Add keyframe",

package/src/hooks/useExternalFileChangeCoordinator.test.tsx

@@ -83,6 +83,25 @@ describe("external file change coordinator", () => {
     expect(captured.handle?.blocked).toBeNull();
   });
 
+  it("keeps one file-change subscription across re-renders and delivers to the latest callbacks", async () => {
+    const on = vi.fn((_event: string, next: HotHandler) => void (handler = next));
+    vi.stubGlobal("__HF_STUDIO_HOT_TEST_ADAPTER__", { on, off: vi.fn() });
+    const { options } = await mountCoordinator();
+    on.mockClear();
+    const root = createRoot(document.createElement("div"));
+    roots.push(root);
+    function Probe({ onAccepted }: { onAccepted: () => void }) {
+      useExternalFileChangeCoordinator({ ...options, onAcceptedPersistedFileChange: onAccepted });
+      return null;
+    }
+    const latest = vi.fn();
+    await act(async () => root.render(<Probe onAccepted={vi.fn()} />));
+    await act(async () => root.render(<Probe onAccepted={latest} />));
+    await act(async () => handler?.({ path: "index.html", content: "external", version: "v2" }));
+    expect(on).toHaveBeenCalledOnce();
+    expect(latest).toHaveBeenCalledOnce();
+  });
+
   // The file tree (useFileTree) is only ever refreshed from Studio's own file
   // operations (create/delete/rename/upload) — never on an external change.
   // Without this call, an agent removing or replacing a composition updates

package/src/hooks/useExternalFileChangeCoordinator.ts

@@ -448,9 +448,11 @@ export function useExternalFileChangeCoordinator({
     [projectId, pendingTimelineEditPathRef, startDrainLoop, onAcceptedPersistedFileChange],
   );
 
+  const processChangeRef = useRef(processChange);
+  processChangeRef.current = processChange;
   useEffect(() => {
     // One decoder for all three transports; the rungs only choose the channel.
-    const handler = (delivery?: unknown) => processChange(decodeFileChange(delivery));
+    const handler = (delivery?: unknown) => processChangeRef.current(decodeFileChange(delivery));
     const adapter = testHotAdapter();
     if (adapter) {
       adapter.on("hf:file-change", handler);
@@ -461,7 +463,7 @@ export function useExternalFileChangeCoordinator({
       return () => import.meta.hot?.off?.("hf:file-change", handler);
     }
     return sseFileChangeChannel(handler);
-  }, [processChange]);
+  }, []);
 
   const retry = useCallback(async () => {
     const current = blockedRef.current;

package/src/hooks/useFileManager.projectOwnership.test.tsx

@@ -129,6 +129,7 @@ describe("useFileManager project ownership", () => {
 
     expect(fetchMock).toHaveBeenCalledWith(
       "/api/projects/project-a%2F..%2Fother%3Fx%3D1/files/index.html",
+      { credentials: "omit" },
     );
     expect(fetchMock).toHaveBeenCalledWith(
       "/api/projects/project-a%2F..%2Fother%3Fx%3D1/files/index.html",
@@ -136,14 +137,18 @@ describe("useFileManager project ownership", () => {
     );
     expect(fetchMock).toHaveBeenCalledWith(
       "/api/projects/project-a%2F..%2Fother%3Fx%3D1/files/missing.html",
+      { credentials: "omit" },
     );
     expect(fetchMock).toHaveBeenCalledWith(
       "/api/projects/project-a%2F..%2Fother%3Fx%3D1/files/missing.html",
       expect.objectContaining({ method: "PUT", body: "A_NEW" }),
     );
-    expect(fetchMock).toHaveBeenCalledWith("/api/projects/project-b%23fragment/files/index.html");
+    expect(fetchMock).toHaveBeenCalledWith("/api/projects/project-b%23fragment/files/index.html", {
+      credentials: "omit",
+    });
     expect(fetchMock).toHaveBeenCalledWith(
       "/api/projects/project-b%23fragment/files/index.html?optional=1",
+      { credentials: "omit" },
     );
 
     await act(async () => root.unmount());