@hyperframes/studio 0.8.115 → 0.8.117

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

package/src/hooks/useFileManager.ts

@@ -8,6 +8,7 @@ import { serializeStudioFileMutation } from "../utils/studioFileMutationCoordina
 import { useFileTree } from "./useFileTree";
 import { useEditorSave } from "./useEditorSave";
 import { useProjectFileWriter } from "./useProjectFileWriter";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 // ── Types ──
 
@@ -133,7 +134,7 @@ export function useFileManager({
         setEditingFile({ path, content: null });
         return;
       }
-      fetch(`/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`)
+      studioApiFetch(`/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`)
         .then((r) => {
           if (!r.ok) throw new Error(`Failed to load ${path} (${r.status})`);
           return r.json();
@@ -167,9 +168,12 @@ export function useFileManager({
       const requestId = ++revealRequestIdRef.current;
       const controller = new AbortController();
       revealAbortRef.current = controller;
-      fetch(`/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(sourceFile)}`, {
-        signal: controller.signal,
-      })
+      studioApiFetch(
+        `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(sourceFile)}`,
+        {
+          signal: controller.signal,
+        },
+      )
         .then((r) => r.json())
         .then((data: { content?: string; version?: string }) => {
           if (requestId !== revealRequestIdRef.current) return;
@@ -200,7 +204,7 @@ export function useFileManager({
 
       const qs = dir ? `?dir=${encodeURIComponent(dir)}` : "";
       try {
-        const res = await fetch(`/api/projects/${encodeURIComponent(pid)}/upload${qs}`, {
+        const res = await studioApiFetch(`/api/projects/${encodeURIComponent(pid)}/upload${qs}`, {
           method: "POST",
           body: formData,
         });
@@ -246,7 +250,7 @@ export function useFileManager({
         content =
           '<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="UTF-8">\n</head>\n<body>\n\n</body>\n</html>\n';
       }
-      const res = await fetch(
+      const res = await studioApiFetch(
         `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`,
         {
           method: "POST",
@@ -270,7 +274,7 @@ export function useFileManager({
     async (path: string) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(
+      const res = await studioApiFetch(
         `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path + "/.gitkeep")}`,
         {
           method: "POST",
@@ -293,7 +297,7 @@ export function useFileManager({
     async (path: string) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(
+      const res = await studioApiFetch(
         `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`,
         {
           method: "DELETE",
@@ -315,7 +319,7 @@ export function useFileManager({
     async (oldPath: string, newPath: string) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(
+      const res = await studioApiFetch(
         `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(oldPath)}`,
         {
           method: "PATCH",
@@ -342,7 +346,7 @@ export function useFileManager({
     async (path: string) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(`/api/projects/${encodeURIComponent(pid)}/duplicate-file`, {
+      const res = await studioApiFetch(`/api/projects/${encodeURIComponent(pid)}/duplicate-file`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ path }),

package/src/hooks/useFileTree.ts

@@ -3,6 +3,7 @@ import { useState, useCallback, useEffect, useMemo, useRef } from "react";
 import { FONT_EXT } from "../utils/mediaTypes";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
 import { captureProjectProvenance } from "../components/feedback/projectProvenance";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 interface UseFileTreeOptions {
   projectId: string | null;
@@ -38,7 +39,7 @@ export function useFileTree({ projectId, projectIdRef }: UseFileTreeOptions) {
     if (!projectId) return;
     let cancelled = false;
     setFetched({ projectId, loaded: false, fileTree: [], compositionPaths: [], projectDir: null });
-    fetch(buildProjectApiPath(projectId))
+    studioApiFetch(buildProjectApiPath(projectId))
       // An unresolvable project answers 404 with a JSON body, so without this
       // the error path parsed cleanly and the success branch below recorded an
       // empty tree — and an empty provenance snapshot — for a project that was
@@ -84,7 +85,7 @@ export function useFileTree({ projectId, projectIdRef }: UseFileTreeOptions) {
     refreshAbortRef.current = controller;
     let data: { files?: string[]; compositions?: string[] };
     try {
-      const res = await fetch(buildProjectApiPath(pid), { signal: controller.signal });
+      const res = await studioApiFetch(buildProjectApiPath(pid), { signal: controller.signal });
       data = await res.json();
     } catch (err) {
       if (err instanceof DOMException && err.name === "AbortError") return;

package/src/hooks/useFrameCapture.ts

@@ -2,6 +2,7 @@ import { useMemo, useState, useCallback, useRef, type MouseEvent } from "react";
 import { useMountEffect } from "./useMountEffect";
 import { liveTime, usePlayerStore } from "../player";
 import { buildFrameCaptureFilename, buildFrameCaptureUrl } from "../utils/frameCapture";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 interface UseFrameCaptureParams {
   projectId: string | null;
@@ -67,7 +68,10 @@ export function useFrameCapture({
         const controller = new AbortController();
         const timeout = setTimeout(() => controller.abort(), 30000);
         try {
-          const response = await fetch(href, { cache: "no-store", signal: controller.signal });
+          const response = await studioApiFetch(href, {
+            cache: "no-store",
+            signal: controller.signal,
+          });
           clearTimeout(timeout);
           if (!response.ok) {
             let msg = `Capture failed (${response.status})`;

package/src/hooks/useFreezeFrame.test.ts

@@ -1,6 +1,9 @@
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../player";
-import { requestFreezeFrame } from "./useFreezeFrame";
+import { requestFreezeFrame, useFreezeFrame } from "./useFreezeFrame";
 
 afterEach(() => vi.unstubAllGlobals());
 
@@ -29,14 +32,15 @@ function stubFetch(freezeResponse: { status: number; body: unknown }) {
 
 describe("requestFreezeFrame", () => {
   it("posts the clip target, file version and an authored-time playhead", async () => {
-    const calls = stubFetch({ status: 200, body: { before: "a", after: "b", version: "v2" } });
+    const frozen = { before: "a", after: "b", version: "v2", stillPath: "assets/freeze/t.png" };
+    const calls = stubFetch({ status: 200, body: frozen });
     const result = await requestFreezeFrame({
       projectId: "p",
       path: "scene.html",
       element,
       playhead: 7.5,
     });
-    expect(result).toEqual({ before: "a", after: "b", version: "v2" });
+    expect(result).toEqual(frozen);
     const post = calls[1];
     expect(post?.url).toContain("/file-mutations/freeze-frame");
     expect(post?.body).toMatchObject({
@@ -54,3 +58,35 @@ describe("requestFreezeFrame", () => {
     ).rejects.toThrow("Move the playhead inside a video clip to freeze");
   });
 });
+
+describe("useFreezeFrame", () => {
+  it("records the still it made with the edit, so Undo removes it", async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    stubFetch({
+      status: 200,
+      body: { before: "a", after: "b", version: "v2", stillPath: "assets/freeze/talk.png" },
+    });
+    const recordEdit = vi.fn(async () => {});
+    let freeze!: ReturnType<typeof useFreezeFrame>;
+    function Harness() {
+      freeze = useFreezeFrame({
+        projectId: "p",
+        activeCompPath: "index.html",
+        showToast: () => {},
+        writeProjectFile: async () => {},
+        recordEdit,
+        reloadPreview: () => {},
+      });
+      return null;
+    }
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(createElement(Harness)));
+    await act(() => freeze({ ...element, sourceFile: "index.html" }, 7.5));
+    expect(recordEdit).toHaveBeenCalledWith({
+      label: "Freeze frame",
+      files: { "index.html": { before: "a", after: "b" } },
+      created: ["assets/freeze/talk.png"],
+    });
+    act(() => root.unmount());
+  });
+});

package/src/hooks/useFreezeFrame.ts

@@ -6,6 +6,7 @@ import { buildProjectApiPath } from "../utils/projectRouting";
 import { markStudioWriteToken } from "../utils/studioFileVersion";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
 import type { RecordEditInput } from "../utils/studioFileHistory";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 type ProjectFileWriter = (path: string, content: string, expectedContent?: string) => Promise<void>;
 
@@ -13,6 +14,7 @@ interface FreezeFrameResponse {
   before: string;
   after: string;
   version: string;
+  stillPath: string;
 }
 
 function isFreezeFrameResponse(value: unknown): value is FreezeFrameResponse {
@@ -21,7 +23,8 @@ function isFreezeFrameResponse(value: unknown): value is FreezeFrameResponse {
   return (
     typeof body.before === "string" &&
     typeof body.after === "string" &&
-    typeof body.version === "string"
+    typeof body.version === "string" &&
+    typeof body.stillPath === "string"
   );
 }
 
@@ -31,7 +34,7 @@ function errorOf(value: unknown): string | null {
 }
 
 async function readVersion(projectId: string, path: string): Promise<string> {
-  const response = await fetch(
+  const response = await studioApiFetch(
     buildProjectApiPath(projectId, `/files/${encodeURIComponent(path)}`),
   );
   const body: unknown = await response.json().catch(() => null);
@@ -53,7 +56,7 @@ export async function requestFreezeFrame(input: {
   const expectedVersion = await readVersion(input.projectId, input.path);
   const transactionToken = `freeze:${crypto.randomUUID()}`;
   markStudioWriteToken(transactionToken);
-  const response = await fetch(
+  const response = await studioApiFetch(
     buildProjectApiPath(input.projectId, "/file-mutations/freeze-frame"),
     {
       method: "POST",
@@ -108,6 +111,7 @@ export function useFreezeFrame(options: UseFreezeFrameOptions) {
         await opts.recordEdit({
           label: "Freeze frame",
           files: { [path]: { before: result.before, after: result.after } },
+          created: [result.stillPath],
         });
         opts.observeProjectFileVersion?.(path, result.version);
       });