@hyperframes/studio 0.8.115 → 0.8.117

package/src/hooks/useGsapScriptCommits.test.tsx

@@ -30,7 +30,11 @@ vi.mock("../utils/studioTelemetry", () => ({
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
-import type { MutationResult } from "./gsapScriptCommitTypes";
+import type {
+  CommitMutationCall,
+  CommitMutationOptions,
+  MutationResult,
+} from "./gsapScriptCommitTypes";
 import { persistSdkSerialize } from "../utils/sdkCutover";
 import { applyPreviewSync, useGsapScriptCommits } from "./useGsapScriptCommits";
 import { hasStudioPendingEdits } from "../utils/studioPendingEdits";
@@ -211,6 +215,34 @@ describe("applyPreviewSync", () => {
     expect(applySoftReload).toHaveBeenCalledTimes(1);
   });
 
+  it("carries a deferred write with no instant patch into the final batch render", () => {
+    const previewFallbackLatch = { pending: false };
+    applySoftReload.mockReturnValue("applied");
+    patchRuntimeTweenInPlace.mockReturnValue(true);
+    const group = {
+      label: "Move animated layer (group)",
+      softReload: true,
+      previewFallbackLatch,
+    };
+
+    applyPreviewSync(
+      FAKE_IFRAME,
+      result({ scriptText: "SCRIPT" }),
+      { ...group, deferPreviewSync: true },
+      vi.fn(),
+    );
+    expect(previewFallbackLatch.pending).toBe(true);
+    expect(applySoftReload).not.toHaveBeenCalled();
+
+    applyPreviewSync(
+      FAKE_IFRAME,
+      result({ scriptText: "SCRIPT" }),
+      { ...group, instantPatch: { selector: "#final", change: { kind: "set", props: { x: 2 } } } },
+      vi.fn(),
+    );
+    expect(applySoftReload).toHaveBeenCalledTimes(1);
+  });
+
   it("falls back immediately when a deferred patch miss has no final-render latch", () => {
     patchRuntimeTweenInPlace.mockReturnValue(false);
     applySoftReload.mockReturnValue("applied");
@@ -416,6 +448,16 @@ function renderCommitHook(
 
 const selection: DomEditSelection = { id: "a", selector: "#a" } as DomEditSelection;
 
+async function commitBatch(calls: CommitMutationCall[], options: CommitMutationOptions) {
+  const deps = renderCommitHook();
+  const batch = deps.api.commitMutation.batch;
+  if (!batch) throw new Error("batch capability missing");
+  await act(async () => {
+    await batch(calls, options);
+  });
+  return deps;
+}
+
 function mockFetchResult(over: Partial<MutationResult> = {}): void {
   const body: MutationResult = {
     ok: true,
@@ -553,6 +595,32 @@ describe("runCommit — instantPatch wiring", () => {
     expect(deps.reloadPreview).not.toHaveBeenCalled();
   });
 
+  it("batch where a write without an instant patch soft-reloads instead of patching the rest", async () => {
+    // A corner resize saves size (no in-place patch) and position (patched) in one batch.
+    patchRuntimeTweenInPlace.mockReturnValue(true);
+    applySoftReload.mockReturnValue("applied");
+    mockFetchResult({ changed: true });
+    const position = { selector: "#a", change: { kind: "set" as const, props: { x: 10 } } };
+    const deps = await commitBatch(
+      [
+        {
+          selection,
+          mutation: { type: "update-property", property: "width", value: 300 },
+          options: { label: "Resize layer" },
+        },
+        {
+          selection,
+          mutation: { type: "update-property", property: "x", value: 10 },
+          options: { label: "Resize layer", instantPatch: position },
+        },
+      ],
+      { label: "Resize layer", softReload: true },
+    );
+
+    expect(applySoftReload).toHaveBeenCalledTimes(1);
+    expect(deps.reloadPreview).not.toHaveBeenCalled();
+  });
+
   it("no-op commit whose instant patch MISSES soft-reloads (never full-reloads)", async () => {
     // Server contract: gsap-mutations returns scriptText on EVERY response,
     // including changed:false — so the fallback re-runs the identical script
@@ -698,7 +766,9 @@ describe("runCommit — instantPatch wiring", () => {
       await deps.api.commitMutation(selection, { x: 10 }, { label: "drag", softReload: true });
     });
 
-    expect(fetch).toHaveBeenCalledWith(expect.stringContaining("/files/compositions%2Fsub.html"));
+    expect(fetch).toHaveBeenCalledWith(expect.stringContaining("/files/compositions%2Fsub.html"), {
+      credentials: "omit",
+    });
     expect(applySoftReload).toHaveBeenCalledWith(
       expect.anything(),
       NESTED_SCRIPT,

package/src/hooks/useGsapScriptCommits.ts

@@ -28,12 +28,13 @@ import {
   formatGsapMutationRejectionToast,
   readJsonResponseBody,
 } from "./gsapScriptCommitHelpers";
-import type {
-  CommitMutation,
-  CommitMutationCall,
-  CommitMutationOptions,
-  GsapScriptCommitsParams,
-  MutationResult,
+import {
+  gsapWriteFile,
+  type CommitMutation,
+  type CommitMutationCall,
+  type CommitMutationOptions,
+  type GsapScriptCommitsParams,
+  type MutationResult,
 } from "./gsapScriptCommitTypes";
 import { useGsapAnimationOps } from "./useGsapAnimationOps";
 import { useGsapArcPathOps } from "./useGsapArcPathOps";
@@ -44,13 +45,14 @@ import {
   useSafeGsapCommitMutation,
 } from "./useSafeGsapCommitMutation";
 import { studioWriteHeaders } from "../utils/studioFileVersion";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 async function mutateGsapScript(
   projectId: string,
   sourceFile: string,
   mutation: Record<string, unknown>,
 ): Promise<MutationResult> {
-  const res = await fetch(
+  const res = await studioApiFetch(
     `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations/${encodeURIComponent(sourceFile)}`,
     {
       method: "POST",
@@ -69,7 +71,7 @@ async function mutateGsapScriptBatch(
   sourceFile: string,
   mutations: Record<string, unknown>[],
 ): Promise<MutationResult> {
-  const res = await fetch(
+  const res = await studioApiFetch(
     `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations-batch/${encodeURIComponent(sourceFile)}`,
     {
       method: "POST",
@@ -266,7 +268,8 @@ export function applyPreviewSync(
   nestedFiles?: Map<string, string> | null,
 ): void {
   const patches = instantPatchesFor(options);
-  let needsFallback = options.previewFallbackLatch?.pending === true;
+  const writtenWithoutPatch = patches.length === 0;
+  let needsFallback = options.previewFallbackLatch?.pending === true || writtenWithoutPatch;
   if (patches.length > 0) {
     const deferSeek = options.deferPreviewSync === true;
     const missed = patches.find(
@@ -408,13 +411,14 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     if (!result) return;
     trackKeyframeCommit(mutations, result, options, calls.map((call) => call.options));
     options.onResult?.(result);
-    // Each call brings its own fast-path patch; the batch wrote them all, so the
-    // preview sync applies them all rather than just the last call's.
-    const instantPatches = calls
-      .map(({ options: callOptions }) => callOptions.instantPatch)
-      .filter((patch) => patch !== undefined);
+    // The batch wrote every call, so patch in place only when every call brought a patch; one
+    // without (a resize's size write) needs the reload, or the preview keeps the old value.
+    const instantPatches = calls.flatMap(({ options: callOptions }) =>
+      callOptions.instantPatch ? [callOptions.instantPatch] : [],
+    );
     const { instantPatch: _instantPatch, ...batchOptions } = options;
-    await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, instantPatches.length > 0 ? { ...batchOptions, instantPatches } : batchOptions);
+    const allPatched = instantPatches.length === calls.length;
+    await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, allPatched ? { ...batchOptions, instantPatches } : batchOptions);
   }, [showToast, finalizeSuccessfulMutation]);
 
   // Every GSAP-script commit is a read-modify-write of one file. Overlapping
@@ -442,14 +446,14 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     };
     const commit: CommitMutation = trackedStudioEdit((selection, mutation, options) => {
       if (!activeProjectId) return Promise.resolve();
-      const file = selection.sourceFile || activeCompPath || "index.html";
+      const file = gsapWriteFile(selection, activeCompPath);
       return serializeCommit(file, options.serializeKey, () =>
         runCommit(activeProjectId, activeCompPath, file, selection, mutation, options),
       );
     }) as CommitMutation;
     commit.batch = trackedStudioEdit((calls: CommitMutationCall[], options: CommitMutationOptions) => {
       if (!activeProjectId) return Promise.resolve();
-      const file = calls[0]?.selection.sourceFile || activeCompPath || "index.html";
+      const file = calls[0] ? gsapWriteFile(calls[0].selection, activeCompPath) : "index.html";
       return serializeCommit(file, options.serializeKey, () =>
         runBatchCommit(activeProjectId, activeCompPath, file, calls, options),
       );

package/src/hooks/useLintModal.ts

@@ -3,6 +3,7 @@ import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import type { LintFinding } from "../components/LintModal";
 import { usePlayerStore } from "../player";
 import { isPreviewBooted, whenPreviewBooted } from "../player/store/playerStore";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 interface RawFinding {
   severity?: string;
@@ -25,7 +26,7 @@ function parseFinding(f: RawFinding): LintFinding & { elementId?: string; file?:
 }
 
 async function fetchLintFindings(projectId: string) {
-  const res = await fetch(buildProjectApiPath(projectId, `/lint`));
+  const res = await studioApiFetch(buildProjectApiPath(projectId, `/lint`));
   const data = await res.json();
   return ((data.findings ?? []) as RawFinding[]).map(parseFinding);
 }

package/src/hooks/usePersistentEditHistory.test.ts

@@ -2,9 +2,9 @@
 // fallow-ignore-file code-duplication
 import { act, createElement } from "react";
 import { createRoot } from "react-dom/client";
-import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
-import { join } from "node:path";
+import { dirname, join } from "node:path";
 import { afterEach, expect, it, vi } from "vitest";
 import {
   createStudioApi,
@@ -88,6 +88,257 @@ it("an edit Studio saved is undone and redone by the project's history, with the
   expect(file()).toBe("B");
 });
 
+it("undoes the edit claimed since the key, not a later edit the server took in first", async () => {
+  const { dir, hook, file, save, readFile } = await studio();
+  const atKey = hook().claims();
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Title",
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  writeFileSync(join(dir, "card.html"), "Y");
+  const later = hook().recordEdit({
+    label: "Added Card",
+    files: { "card.html": { before: "", after: "Y" } },
+  });
+  const afterLater = async <T>(_paths: readonly string[], task: () => Promise<T>) => {
+    await later;
+    return task();
+  };
+
+  const undone = await act(() =>
+    hook().undo({ readFile, serialize: afterLater, claimedAfter: atKey }),
+  );
+  expect(undone).toMatchObject({ ok: true, label: "Undid: Moved Title" });
+  expect(file()).toBe("A");
+  expect(readFileSync(join(dir, "card.html"), "utf8")).toBe("Y");
+});
+
+it("a second undo pressed while the same edit saves undoes the edit before it", async () => {
+  const { hook, file, save, readFile } = await studio();
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Title",
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  await vi.waitFor(() => expect(hook().undoLabel).toBe("Moved Title"));
+  const atKey = hook().claims();
+  save("C");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Card",
+      files: { "index.html": { before: "B", after: "C" } },
+    }),
+  );
+
+  let queue: Promise<unknown> = Promise.resolve();
+  const serialize = <T>(_paths: readonly string[], task: () => Promise<T>) => {
+    const run = queue.then(task);
+    queue = run.catch(() => undefined);
+    return run;
+  };
+  const press = () => hook().undo({ readFile, claimedAfter: atKey, serialize });
+
+  const [first, second] = await act(() => Promise.all([press(), press()]));
+
+  expect([first, second]).toMatchObject([
+    { ok: true, label: "Undid: Moved Card" },
+    { ok: true, label: "Undid: Moved Title" },
+  ]);
+  expect(file()).toBe("A");
+});
+
+it("keeps the claim when its undo fails, so the next press targets that edit again", async () => {
+  const { hook, save, readFile } = await studio();
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Title",
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  await vi.waitFor(() => expect(hook().undoLabel).toBe("Moved Title"));
+  const atKey = hook().claims();
+  save("C");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Card",
+      files: { "index.html": { before: "B", after: "C" } },
+    }),
+  );
+  const posted: string[] = [];
+  const fetch = globalThis.fetch;
+  vi.stubGlobal("fetch", (url: string, init?: RequestInit) => {
+    if (init?.method === "POST") posted.push(url.slice(url.lastIndexOf("/") + 1));
+    return fetch(url, init);
+  });
+
+  save("edited elsewhere");
+  const failed = await act(() => hook().undo({ readFile, claimedAfter: atKey }));
+  save("C");
+  const retried = await act(() => hook().undo({ readFile, claimedAfter: atKey }));
+
+  expect(failed.ok).toBe(false);
+  expect(retried).toMatchObject({ ok: true, label: "Undid: Moved Card" });
+  expect(posted.filter((p) => p === "undo" || p === "step")).toEqual(["undo", "undo"]);
+});
+
+it("does not undo again an edit another press already undid", async () => {
+  const { hook, file, save, readFile } = await studio();
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Title",
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  await vi.waitFor(() => expect(hook().undoLabel).toBe("Moved Title"));
+  const atKey = hook().claims();
+  save("C");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Card",
+      files: { "index.html": { before: "B", after: "C" } },
+    }),
+  );
+  let calls = 0;
+  let queue: Promise<unknown> = Promise.resolve();
+  const serialize = <T>(_paths: readonly string[], task: () => Promise<T>) => {
+    calls += 1;
+    if (calls === 1) return Promise.reject(new Error("save failed"));
+    const run = queue.then(task);
+    queue = run.catch(() => undefined);
+    return run;
+  };
+  const press = () => hook().undo({ readFile, claimedAfter: atKey, serialize });
+
+  const [first, second] = await act(() => Promise.allSettled([press(), press()]));
+  const third = await act(() => press());
+
+  expect(first.status).toBe("rejected");
+  expect(second).toMatchObject({
+    status: "fulfilled",
+    value: { ok: true, label: "Undid: Moved Card" },
+  });
+  expect(third).toMatchObject({ ok: true, label: "Undid: Moved Title" });
+  expect(file()).toBe("A");
+});
+
+it("does not undo again an edit a later press undid first", async () => {
+  const { hook, file, save, readFile } = await studio();
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Title",
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  await vi.waitFor(() => expect(hook().undoLabel).toBe("Moved Title"));
+  const atKey = hook().claims();
+  save("C");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Card",
+      files: { "index.html": { before: "B", after: "C" } },
+    }),
+  );
+  let fail!: (error: Error) => void;
+  const held = <T>(_paths: readonly string[], _task: () => Promise<T>) =>
+    new Promise<T>((_resolve, reject) => {
+      fail = reject;
+    });
+  const failed = hook()
+    .undo({ readFile, claimedAfter: atKey, serialize: held })
+    .catch(() => undefined);
+
+  const second = await act(() => hook().undo({ readFile, claimedAfter: atKey }));
+  fail(new Error("save failed"));
+  await failed;
+  const third = await act(() => hook().undo({ readFile, claimedAfter: atKey }));
+
+  expect(second).toMatchObject({ ok: true, label: "Undid: Moved Card" });
+  expect(third).toMatchObject({ ok: true, label: "Undid: Moved Title" });
+  expect(file()).toBe("A");
+});
+
+it("refuses a second press whose edit is undone once an edit was made after the press", async () => {
+  const { dir, hook, file, save, readFile } = await studio();
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Title",
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  await vi.waitFor(() => expect(hook().undoLabel).toBe("Moved Title"));
+  const atKey = hook().claims();
+  save("C");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Card",
+      files: { "index.html": { before: "B", after: "C" } },
+    }),
+  );
+  let open!: () => void;
+  const opened = new Promise<void>((resolve) => {
+    open = resolve;
+  });
+  let queue: Promise<unknown> = Promise.resolve();
+  let queued = 0;
+  const serialize = <T>(_paths: readonly string[], task: () => Promise<T>) => {
+    queued += 1;
+    const wait = queued === 2 ? opened : Promise.resolve();
+    const run = queue.then(() => wait).then(task);
+    queue = run.catch(() => undefined);
+    return run;
+  };
+  const press = () => hook().undo({ readFile, claimedAfter: atKey, serialize });
+  const presses = Promise.all([press(), press()]);
+  await vi.waitFor(() => expect(file()).toBe("B"));
+  writeFileSync(join(dir, "card.html"), "Y");
+  await act(() =>
+    hook().recordEdit({
+      label: "Added Card",
+      files: { "card.html": { before: "", after: "Y" } },
+    }),
+  );
+
+  open();
+  const [first, second] = await act(() => presses);
+
+  expect(first).toMatchObject({ ok: true, label: "Undid: Moved Card" });
+  expect(second).toMatchObject({ ok: false, reason: "content-mismatch" });
+  expect(readFileSync(join(dir, "card.html"), "utf8")).toBe("Y");
+  expect(file()).toBe("B");
+});
+
+it("a file the edit made (a freeze's still) is deleted by its Undo and put back by its Redo", async () => {
+  const { dir, hook, save, readFile } = await studio();
+  const still = join(dir, "assets", "freeze", "talk.png");
+  mkdirSync(dirname(still), { recursive: true });
+  writeFileSync(still, "png");
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Freeze frame",
+      files: { "index.html": { before: "A", after: "B" } },
+      created: ["assets/freeze/talk.png"],
+    }),
+  );
+  await vi.waitFor(() => expect(hook().undoLabel).toBe("Freeze frame"));
+
+  await act(() => hook().undo({ readFile }));
+  expect(existsSync(still)).toBe(false);
+
+  await vi.waitFor(() => expect(hook().canRedo).toBe(true));
+  await act(() => hook().redo({ readFile }));
+  expect(readFileSync(still, "utf8")).toBe("png");
+});
+
 it("a drag's edits under one key undo as one step, even before the drag goes idle", async () => {
   const { hook, file, save, readFile } = await studio();
   const writes: Array<[before: string, after: string]> = [
@@ -115,6 +366,32 @@ it("a drag's edits under one key undo as one step, even before the drag goes idl
   expect(file()).toBe("A");
 });
 
+it("an undo before the history view shows a drag's held claim still waits on the files it wrote", async () => {
+  const { hook, save, readFile } = await studio();
+  const server = globalThis.fetch;
+  vi.stubGlobal("fetch", (url: string, init?: RequestInit) =>
+    init?.method === "POST"
+      ? server(url, init)
+      : Promise.resolve(new Response(null, { status: 503 })),
+  );
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Dragged Title",
+      coalesceKey: "drag",
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  let waitedOn: readonly string[] = [];
+  const serialize = <T>(paths: readonly string[], task: () => Promise<T>) => {
+    waitedOn = paths;
+    return task();
+  };
+
+  await act(() => hook().undo({ readFile, serialize }));
+  expect(waitedOn).toEqual(["index.html"]);
+});
+
 it("an agent's edit made seconds before Studio's stays the agent's: Cmd+Z undoes only Studio's", async () => {
   const { hook, file, save, readFile } = await studio();
   save("B");
@@ -159,7 +436,11 @@ it("without a history on the server an edit still saves, and there is nothing to
 });
 
 /** Answers requests to `route` with `reply` instead of the engine, every other request as before; returns the undo. */
-function answer(route: "/history/step" | "/history/claim", status: number, reply: object | string) {
+function answer(
+  route: "/history" | "/history/step" | "/history/claim",
+  status: number,
+  reply: object | string,
+) {
   const real = globalThis.fetch;
   vi.stubGlobal("fetch", (url: string, init?: RequestInit) =>
     url.endsWith(route)
@@ -230,6 +511,24 @@ it("a step whose reply cannot be read says so, instead of throwing", async () =>
   });
 });
 
+it("an edit whose history reply cannot be read is still saved, and the reply is its own error", async () => {
+  const { hook, file, save } = await studio();
+  const logged = vi.spyOn(console, "error").mockImplementation(() => {});
+  cleanup.push(() => logged.mockRestore());
+  answer("/history", 200, "<html>");
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Title",
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  await vi.waitFor(() =>
+    expect(logged).toHaveBeenCalledWith("The history's reply was unreadable."),
+  );
+  expect(file()).toBe("B");
+});
+
 it("a step that cannot reach the server says so", async () => {
   const { hook, readFile } = await studio();
   const real = globalThis.fetch;