@hyperframes/studio 0.8.99 → 0.8.101

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

@@ -0,0 +1,166 @@
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+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 {
+  createStudioApi,
+  openProjectHistory,
+  type StudioApiAdapter,
+} from "@hyperframes/studio-server";
+import { useEditHistoryActions } from "./useEditHistoryActions";
+import { usePersistentEditHistory } from "./usePersistentEditHistory";
+import { usePreviewPersistence } from "./usePreviewPersistence";
+
+const page = (left: string, top = "0px") =>
+  `<!doctype html><html><head></head><body><div id="root" data-composition-id="main"><div id="box" style="position: absolute; left: ${left}"></div><div id="other" style="position: absolute; top: ${top}"></div></div></body></html>`;
+const BEFORE = page("10px");
+const AFTER = page("50px");
+const OUTSIDE = page("50px", "99px");
+
+const cleanup: Array<() => unknown> = [];
+let scratch = "";
+beforeEach(() => {
+  scratch = mkdtempSync(join(tmpdir(), "hf-undo-paint-"));
+});
+afterEach(async () => {
+  for (const step of cleanup.splice(0).reverse()) await step();
+  rmSync(scratch, { recursive: true, force: true });
+  vi.unstubAllGlobals();
+});
+
+/** Studio's undo wired as App.tsx wires it, over the real history engine, with a live preview document. */
+async function studio() {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  const dir = join(scratch, "project");
+  mkdirSync(dir);
+  const path = join(dir, "index.html");
+  writeFileSync(path, BEFORE);
+  const engine = await openProjectHistory({
+    projectDir: dir,
+    historyRoot: join(scratch, "history"),
+  });
+  cleanup.push(() => engine.close());
+  const api = createStudioApi({
+    listProjects: () => [],
+    resolveProject: (id: string) => (id === "demo" ? { id, dir } : null),
+    history: () => engine,
+  } as unknown as StudioApiAdapter);
+  vi.stubGlobal("fetch", (url: string, init?: RequestInit) =>
+    api.request(url.replace(/^\/api/, ""), init),
+  );
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  cleanup.push(() => iframe.remove());
+  const reloads = vi.fn();
+  const readFile = async (p: string) => readFileSync(join(dir, p), "utf8");
+  let history!: ReturnType<typeof usePersistentEditHistory>;
+  let persistence!: ReturnType<typeof usePreviewPersistence>;
+  let actions!: ReturnType<typeof useEditHistoryActions>;
+  function Harness() {
+    history = usePersistentEditHistory({ projectId: "demo" });
+    persistence = usePreviewPersistence({
+      showToast: () => {},
+      readOptionalProjectFile: async () => "",
+      writeProjectFile: async () => {},
+      recordEdit: async () => {},
+      previewIframeRef: { current: iframe },
+      activeCompPathRef: { current: "index.html" },
+      reloadPreview: reloads,
+    });
+    actions = useEditHistoryActions({
+      editHistory: history,
+      readOptionalProjectFile: async () => "",
+      readProjectFile: readFile,
+      writeProjectFile: async (p, content) => writeFileSync(join(dir, p), content),
+      showToast: () => {},
+      syncHistoryPreviewAfterApply: persistence.syncHistoryPreviewAfterApply,
+      showHistoryRestoreNow: persistence.showHistoryRestoreNow,
+      waitForPendingDomEditSaves: persistence.waitForPendingDomEditSaves,
+    });
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  await act(async () => root.render(createElement(Harness)));
+  cleanup.push(() => act(() => root.unmount()));
+  const box = () => iframe.contentDocument!.getElementById("box")!.style.left;
+  const other = () => iframe.contentDocument!.getElementById("other")!.style.top;
+  const show = (html: string) => {
+    iframe.contentDocument!.documentElement.innerHTML = new DOMParser().parseFromString(
+      html,
+      "text/html",
+    ).documentElement.innerHTML;
+  };
+  /** A move Studio saved: the live preview already shows it, then the file and the history claim land. */
+  const edit = async () => {
+    show(AFTER);
+    writeFileSync(path, AFTER);
+    await act(() =>
+      history.recordEdit({
+        label: "Move layer",
+        files: { "index.html": { before: BEFORE, after: AFTER } },
+      }),
+    );
+    await vi.waitFor(() => expect(history.undoLabel).toBe("Move layer"));
+  };
+  return {
+    history: () => history,
+    persistence: () => persistence,
+    actions: () => actions,
+    box,
+    other,
+    show,
+    path,
+    edit,
+    file: () => readFileSync(path, "utf8"),
+    reloads,
+  };
+}
+
+it("undo and redo of a style edit paint in the key's own task, before the server answers", async () => {
+  const s = await studio();
+  await s.edit();
+
+  const undone = s.actions().undo();
+  expect(s.box()).toBe("10px");
+  await act(() => undone);
+  expect(s.file()).toBe(BEFORE);
+  expect(s.box()).toBe("10px");
+
+  await vi.waitFor(() => expect(s.history().redoLabel).toBeTruthy());
+  const redone = s.actions().redo();
+  expect(s.box()).toBe("50px");
+  await act(() => redone);
+  expect(s.file()).toBe(AFTER);
+  expect(s.box()).toBe("50px");
+  expect(s.reloads).not.toHaveBeenCalled();
+});
+
+it("an undo pressed while a save is still running waits for the server instead of guessing", async () => {
+  const s = await studio();
+  await s.edit();
+  let finish!: () => void;
+  const saving = new Promise<void>((resolve) => (finish = resolve));
+  void s.persistence().queueDomEditSave(() => saving);
+
+  const undone = s.actions().undo();
+  expect(s.box()).toBe("50px");
+  finish();
+  await act(() => undone);
+  expect(s.file()).toBe(BEFORE);
+  expect(s.box()).toBe("10px");
+});
+
+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();
+  writeFileSync(s.path, OUTSIDE);
+  s.show(OUTSIDE);
+
+  await act(() => s.actions().undo());
+  expect(s.file()).toBe(AFTER);
+  expect(s.other()).toBe("0px");
+  expect(s.box()).toBe("50px");
+});

package/src/hooks/useEditHistoryActions.test.tsx

@@ -11,24 +11,36 @@ import { useEditHistoryActions, type EditHistoryHandle } from "./useEditHistoryA
 let root: Root | null = null;
 afterEach(() => act(() => root?.unmount()));
 
-function mount(result: {
-  ok: boolean;
-  reason?: string;
-  message?: string;
-  label?: string;
-  paths?: string[];
-}) {
+type RestoreFiles = Record<string, { previous: string; restored: string }>;
+type Prediction = { id: string; files: RestoreFiles };
+
+function mount(
+  result: {
+    ok: boolean;
+    reason?: string;
+    message?: string;
+    label?: string;
+    paths?: string[];
+    undoes?: string;
+    files?: RestoreFiles;
+  },
+  predicted?: Prediction,
+) {
   const editHistory = {
     undo: vi.fn<EditHistoryHandle["undo"]>(async () => result),
     redo: vi.fn<EditHistoryHandle["redo"]>(async () => result),
+    predict: () => predicted ?? null,
   };
+  const putBack = vi.fn();
   const deps = {
     editHistory,
     readOptionalProjectFile: vi.fn(async () => ""),
     readProjectFile: vi.fn(async () => ""),
     writeProjectFile: vi.fn(async () => undefined),
     showToast: vi.fn(),
-    syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
+    syncHistoryPreviewAfterApply: vi.fn(async (_restore: unknown) => undefined),
+    putBack,
+    showHistoryRestoreNow: vi.fn((_files: RestoreFiles) => putBack),
     waitForPendingDomEditSaves: vi.fn(async () => undefined),
     onAfterUndoRedo: vi.fn(),
     activeCompPath: "index.html",
@@ -44,7 +56,53 @@ function mount(result: {
   return { deps, actions };
 }
 
+const PREDICTED = { id: "e1", files: { "index.html": { previous: "B", restored: "A" } } };
+const SERVER_FILES = { "index.html": { previous: "B", restored: "A2" } };
+
 describe("useEditHistoryActions", () => {
+  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 },
+      PREDICTED,
+    );
+    await act(() => actions.undo());
+    expect(deps.showHistoryRestoreNow).toHaveBeenCalledWith(PREDICTED.files);
+    expect(deps.putBack).not.toHaveBeenCalled();
+    expect(deps.syncHistoryPreviewAfterApply).toHaveBeenCalledWith({
+      paths: ["index.html"],
+      files: { "index.html": { previous: "A", restored: "A2" } },
+    });
+  });
+
+  it("puts a shown step back and applies the server's own restore when it stepped another entry", async () => {
+    const { deps, actions } = mount(
+      {
+        ok: true,
+        label: "Undid: Outside",
+        paths: ["index.html"],
+        undoes: "e0",
+        files: SERVER_FILES,
+      },
+      PREDICTED,
+    );
+    await act(() => actions.undo());
+    expect(deps.putBack).toHaveBeenCalledTimes(1);
+    expect(deps.syncHistoryPreviewAfterApply).toHaveBeenCalledWith({
+      paths: ["index.html"],
+      files: SERVER_FILES,
+    });
+  });
+
+  it("puts a shown step back when the server refuses it", async () => {
+    const { deps, actions } = mount(
+      { ok: false, reason: "failed", message: "disk full" },
+      PREDICTED,
+    );
+    await act(() => actions.undo());
+    expect(deps.putBack).toHaveBeenCalledTimes(1);
+    expect(deps.syncHistoryPreviewAfterApply).not.toHaveBeenCalled();
+  });
+
   it("undo resyncs the preview and toasts the step as the history names it", async () => {
     const { deps, actions } = mount({ ok: true, label: "Undid: Move clip", paths: ["index.html"] });
     await act(() => actions.undo());
@@ -80,7 +138,7 @@ describe("useEditHistoryActions", () => {
     expect(deps.syncHistoryPreviewAfterApply).not.toHaveBeenCalled();
   });
 
-  it("says why when the history could not take the step", async () => {
+  it("says why when the history could not take the step, with nothing shown to take back", async () => {
     const { deps, actions } = mount({ ok: false, reason: "failed", message: "disk full" });
     await act(() => actions.undo());
     expect(deps.showToast).toHaveBeenCalledWith("Undo failed: disk full", "error");

package/src/hooks/useEditHistoryActions.ts

@@ -2,6 +2,7 @@
 import { useCallback, useMemo } from "react";
 import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
+import type { RestoreFiles } from "../utils/gsapUndoRestore";
 
 interface HistoryResult {
   ok: boolean;
@@ -9,8 +10,9 @@ interface HistoryResult {
   message?: string;
   label?: string;
   paths?: string[];
+  undoes?: string;
   /** Per-file restored/previous content, used to soft-apply the preview. */
-  files?: Record<string, { previous: string; restored: string }>;
+  files?: RestoreFiles;
 }
 interface HistoryFileCallbacks {
   readFile: (path: string) => Promise<string>;
@@ -19,6 +21,7 @@ interface HistoryFileCallbacks {
 export interface EditHistoryHandle {
   undo: (cb: HistoryFileCallbacks) => Promise<HistoryResult>;
   redo: (cb: HistoryFileCallbacks) => Promise<HistoryResult>;
+  predict?: (direction: "undo" | "redo") => { id: string; files: RestoreFiles } | null;
   state: {
     undo: ReadonlyArray<{ createdAt: number }>;
     redo: ReadonlyArray<{ createdAt: number }>;
@@ -26,12 +29,13 @@ export interface EditHistoryHandle {
 }
 
 export interface UseEditHistoryActionsOptions {
-  editHistory: Pick<EditHistoryHandle, "undo" | "redo">;
+  editHistory: Pick<EditHistoryHandle, "undo" | "redo" | "predict">;
   readOptionalProjectFile: (path: string) => Promise<string>;
   readProjectFile: (path: string) => Promise<string>;
   writeProjectFile: (path: string, content: string) => Promise<void>;
   showToast: (message: string, tone?: "error" | "info") => void;
   syncHistoryPreviewAfterApply: (restore: Pick<HistoryResult, "paths" | "files">) => Promise<void>;
+  showHistoryRestoreNow?: (files: RestoreFiles) => (() => void) | null;
   waitForPendingDomEditSaves: () => Promise<void>;
   onAfterUndoRedo?: (restore: Pick<HistoryResult, "paths" | "files">) => void;
   /** Active composition path — decides whether undo/redo must resync the SDK session. */
@@ -48,6 +52,7 @@ export function useEditHistoryActions({
   writeProjectFile,
   showToast,
   syncHistoryPreviewAfterApply,
+  showHistoryRestoreNow,
   waitForPendingDomEditSaves,
   onAfterUndoRedo,
   activeCompPath,
@@ -67,11 +72,22 @@ export function useEditHistoryActions({
   const apply = useCallback(
     async (direction: "undo" | "redo") => {
       const noun = direction === "undo" ? "Undo" : "Redo";
-      await waitForPendingDomEditSaves();
-      const result = await editHistory[direction]({
-        readFile: readHistoryFile,
-        serialize: serializeHistoryFiles,
-      });
+      // Paint the step in the key's own task when this tab knows it; the server's answer then confirms or corrects.
+      const predicted = editHistory.predict?.(direction) ?? null;
+      const putBack = predicted ? (showHistoryRestoreNow?.(predicted.files) ?? null) : null;
+      let result: HistoryResult = { ok: false, reason: "failed" };
+      let serverSteppedShown = false;
+      try {
+        await waitForPendingDomEditSaves();
+        result = await editHistory[direction]({
+          readFile: readHistoryFile,
+          serialize: serializeHistoryFiles,
+        });
+        serverSteppedShown =
+          Boolean(putBack && result.ok && result.label) && result.undoes === predicted?.id;
+      } finally {
+        if (putBack && !serverSteppedShown) putBack();
+      }
       if (!result.ok && result.reason === "content-mismatch") {
         showToast(
           `Can't ${direction}: ${result.paths?.join(", ")} changed since that edit.`,
@@ -84,7 +100,8 @@ export function useEditHistoryActions({
         return;
       }
       if (result.ok && result.label) {
-        const restore = { paths: result.paths, files: result.files };
+        const files = serverSteppedShown ? fromShown(result.files, predicted!.files) : result.files;
+        const restore = { paths: result.paths, files };
         onAfterUndoRedo?.(restore);
         if (activeCompPath && result.paths?.includes(activeCompPath)) {
           forceReloadSdkSession?.();
@@ -98,6 +115,7 @@ export function useEditHistoryActions({
       readHistoryFile,
       showToast,
       syncHistoryPreviewAfterApply,
+      showHistoryRestoreNow,
       waitForPendingDomEditSaves,
       serializeHistoryFiles,
       onAfterUndoRedo,
@@ -110,3 +128,13 @@ export function useEditHistoryActions({
   const redo = useCallback(() => apply("redo"), [apply]);
   return useMemo(() => ({ undo, redo }), [undo, redo]);
 }
+
+function fromShown(files: RestoreFiles | undefined, shown: RestoreFiles) {
+  if (!files) return files;
+  return Object.fromEntries(
+    Object.entries(files).map(([path, f]) => [
+      path,
+      { previous: shown[path]?.restored ?? f.previous, restored: f.restored },
+    ]),
+  );
+}

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -22,7 +22,6 @@ const mocks = vi.hoisted(() => ({
 
 vi.mock("./gsapResizeIntercept", () => ({ tryGsapResizeIntercept: mocks.resize }));
 vi.mock("./gsapRuntimeBridge", () => ({
-  POSITION_CHANNELS: ["x", "y"],
   tryGsapDragIntercept: mocks.drag,
   tryGsapRotationIntercept: vi.fn(),
 }));
@@ -47,6 +46,11 @@ afterEach(() => {
   vi.clearAllMocks();
 });
 
+/** An element GSAP already renders the transform of, so moves take the GSAP route. */
+function gsapPositioned(tag: string): HTMLElement {
+  return Object.assign(document.createElement(tag), { _gsap: { renderTransform: () => {} } });
+}
+
 function mountResizeHandler(
   animations: GsapAnimation[],
   targetAnimations: GsapAnimation[] = animations,
@@ -150,6 +154,28 @@ function mountGroupHandler({
   };
 }
 
+describe("useGsapAwareEditing moves of an element GSAP does not position", () => {
+  it("saves the move on the element itself, with no GSAP write and no animation read", async () => {
+    const save = vi.fn().mockResolvedValue(undefined);
+    const stageElementPositionOffset = vi.fn(() => ({ save, rollback: vi.fn() }));
+    const gsapCommitMutation = vi.fn();
+    const makeFetchFallback = vi.fn();
+    const { pathOffsetCommit, root } = mountGroupHandler({
+      gsapCommitMutation,
+      makeFetchFallback,
+      stageElementPositionOffset,
+    });
+    const box = { element: document.createElement("div"), id: "box", selector: "#box" };
+    await act(() => pathOffsetCommit(box as unknown as DomEditSelection, { x: 130.25, y: 90 }));
+    expect(stageElementPositionOffset).toHaveBeenCalledWith(box, { x: 130.25, y: 90 });
+    expect(save).toHaveBeenCalledTimes(1);
+    expect(gsapCommitMutation).not.toHaveBeenCalled();
+    expect(makeFetchFallback).not.toHaveBeenCalled();
+    expect(mocks.drag).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+});
+
 describe("useGsapAwareEditing shared-tween moves", () => {
   it("saves a single drag through the element's own offset", async () => {
     mocks.drag.mockResolvedValue({ status: "element-offset" });
@@ -161,7 +187,7 @@ describe("useGsapAwareEditing shared-tween moves", () => {
       makeFetchFallback: () => vi.fn().mockResolvedValue([]),
       stageElementPositionOffset,
     });
-    const word = { element: document.createElement("span"), hfId: "w0", selector: ".w" };
+    const word = { element: gsapPositioned("span"), hfId: "w0", selector: ".w" };
     await act(() => pathOffsetCommit(word as unknown as DomEditSelection, { x: 40, y: 20 }));
     expect(stageElementPositionOffset).toHaveBeenCalledWith(word, { x: 40, y: 20 });
     expect(save).toHaveBeenCalledTimes(1);
@@ -169,7 +195,7 @@ describe("useGsapAwareEditing shared-tween moves", () => {
     act(() => root.unmount());
   });
 
-  it("saves a group member that shares a tween through its own offset, under the group key", async () => {
+  it("saves shared-tween and GSAP-free group members on themselves, under the group key", async () => {
     mocks.drag.mockImplementation(async (selection, _next, _a, _i, commit, _f, options) => {
       if (selection.hfId === "w0") return { status: "element-offset" };
       if (!options?.preflightOnly) await commit(selection, { type: "move" }, { label: "Move" });
@@ -182,19 +208,20 @@ describe("useGsapAwareEditing shared-tween moves", () => {
       makeFetchFallback: () => vi.fn().mockResolvedValue([]),
       stageElementPositionOffset,
     });
-    const word = { element: document.createElement("span"), hfId: "w0", selector: ".w" };
-    const box = { element: document.createElement("div"), id: "box", selector: "#box" };
+    const word = { element: gsapPositioned("span"), hfId: "w0", selector: ".w" };
+    const box = { element: gsapPositioned("div"), id: "box", selector: "#box" };
+    const plain = { element: document.createElement("div"), id: "plain", selector: "#plain" };
     await act(() =>
       groupCommit([
         { selection: word, next: { x: 40, y: 20 } },
         { selection: box, next: { x: 40, y: 20 } },
+        { selection: plain, next: { x: 40, y: 20 } },
       ] as unknown as DomEditGroupPathOffsetCommit[]),
     );
-    expect(stageElementPositionOffset).toHaveBeenCalledWith(
-      word,
-      { x: 40, y: 20 },
-      expect.stringMatching(/^group-drag:\d+$/),
-    );
+    const groupKey = expect.stringMatching(/^group-drag:\d+$/);
+    expect(stageElementPositionOffset).toHaveBeenCalledWith(word, { x: 40, y: 20 }, groupKey);
+    expect(stageElementPositionOffset).toHaveBeenCalledWith(plain, { x: 40, y: 20 }, groupKey);
+    expect(mocks.drag.mock.calls.some((call) => call[0] === plain)).toBe(false);
     act(() => root.unmount());
   });
 });
@@ -207,7 +234,7 @@ describe("useGsapAwareEditing anchored resize", () => {
     const h = mountResizeHandler([humanAnimation], [targetAnimation]);
     const target = {
       ...h.selection,
-      element: document.createElement("div"),
+      element: gsapPositioned("div"),
       id: "agent-target",
       selector: "#agent-target",
     } as DomEditSelection;
@@ -447,11 +474,11 @@ describe("useGsapAwareEditing anchored resize", () => {
     });
     const updates = [
       {
-        selection: { element: document.createElement("div"), id: "a", selector: "#a" },
+        selection: { element: gsapPositioned("div"), id: "a", selector: "#a" },
         next: { x: 10, y: 10 },
       },
       {
-        selection: { element: document.createElement("div"), id: "b", selector: "#b" },
+        selection: { element: gsapPositioned("div"), id: "b", selector: "#b" },
         next: { x: 10, y: 10 },
       },
     ] as unknown as DomEditGroupPathOffsetCommit[];
@@ -485,12 +512,12 @@ describe("useGsapAwareEditing anchored resize", () => {
     });
     const updates = [
       {
-        selection: { element: document.createElement("div"), id: "ok", selector: "#ok" },
+        selection: { element: gsapPositioned("div"), id: "ok", selector: "#ok" },
         next: { x: 10, y: 10 },
       },
       {
         selection: {
-          element: document.createElement("div"),
+          element: gsapPositioned("div"),
           id: "blocked",
           selector: "#blocked",
         },
@@ -526,7 +553,7 @@ describe("useGsapAwareEditing anchored resize", () => {
     });
     const updates = [
       {
-        selection: { element: document.createElement("div"), id: "a", selector: "#a" },
+        selection: { element: gsapPositioned("div"), id: "a", selector: "#a" },
         next: { x: 10, y: 10 },
       },
     ] as unknown as DomEditGroupPathOffsetCommit[];
@@ -551,11 +578,11 @@ describe("useGsapAwareEditing anchored resize", () => {
     });
     const updates = [
       {
-        selection: { element: document.createElement("div"), id: "a", selector: "#a" },
+        selection: { element: gsapPositioned("div"), id: "a", selector: "#a" },
         next: { x: 10, y: 10 },
       },
       {
-        selection: { element: document.createElement("div"), id: "b", selector: "#b" },
+        selection: { element: gsapPositioned("div"), id: "b", selector: "#b" },
         next: { x: 20, y: 20 },
       },
     ] as unknown as DomEditGroupPathOffsetCommit[];
@@ -605,6 +632,7 @@ describe("useGsapAwareEditing anchored resize", () => {
    */
   it("applies the anchor when the resize leaves the drop point to the caller", async () => {
     mocks.resize.mockResolvedValue({ status: "persisted" });
+    mocks.drag.mockResolvedValue({ status: "persisted" });
     const scale = { propertyGroup: "scale" } as GsapAnimation;
     const h = mountResizeHandler([scale]);
     await act(() => h.resize(h.selection, { width: 300, height: 200 }, { x: -50, y: -25 }));

package/src/hooks/useGsapAwareEditing.ts

@@ -10,11 +10,7 @@
 import { useCallback } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
-import {
-  POSITION_CHANNELS,
-  tryGsapDragIntercept,
-  tryGsapRotationIntercept,
-} from "./gsapRuntimeBridge";
+import { tryGsapDragIntercept, tryGsapRotationIntercept } from "./gsapRuntimeBridge";
 import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
 import { computeDraggedGsapPosition } from "./draggedGsapPosition";
 import { readGsapPositionFromIframe } from "./gsapPositionDetection";
@@ -33,7 +29,11 @@ import { setElementGsapPosition } from "../utils/elementGsap";
 import { logResize, logResizeSettle } from "../utils/resizeDebug";
 import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
 import { runGestureTransaction } from "./gestureTransaction";
-import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
+import {
+  gsapWritesPosition,
+  hasNonHoldTweenForElement,
+  POSITION_CHANNELS,
+} from "./gsapRuntimeKeyframes";
 import { assertGsapEditPersisted, saveMove } from "./gsapEditOutcome";
 import type { GsapAnimationFetchOptions } from "./useGsapAnimationFetchFallback";
 import type { ElementOffsetStagerDeps } from "./elementOffsetStager";
@@ -153,6 +153,8 @@ export function useGsapAwareEditing({
       next: { x: number; y: number },
       modifiers?: { altKey?: boolean },
     ) => {
+      if (!gsapWritesPosition(selection.element))
+        return stageElementPositionOffset(selection, next).save();
       if (gsapCommitMutation) {
         try {
           const ownedAnimations = getGsapAnimationsForSelection(selection);
@@ -185,11 +187,8 @@ export function useGsapAwareEditing({
     ],
   );
 
-  // Multi-select (group) drag: route EACH element through the SAME GSAP intercept as
-  // a single drag, so every position is written as GSAP code (tl.set / keyframes /
-  // gsap.set) — NEVER the deprecated `--hf-studio-offset` CSS var, and GSAP-animated
-  // elements are no longer blocked in a group. No CSS fallback: with no GSAP
-  // composition there's nothing to write (a no-op, exactly like the single-drag path).
+  // Multi-select (group) drag: each member takes the single drag's writer, so a member GSAP
+  // does not position is saved on itself and the rest go through the GSAP intercept.
   const handleGsapAwareGroupPathOffsetCommit = useCallback(
     async (updates: DomEditGroupPathOffsetCommit[]) => {
       if (!gsapCommitMutation || updates.length === 0) return;
@@ -247,6 +246,7 @@ export function useGsapAwareEditing({
       // turns N sequential round trips into one.
       const preflightResults = await Promise.allSettled(
         updates.map(async ({ selection }) => {
+          if (!gsapWritesPosition(selection.element)) return void offsetMembers.add(selection);
           const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
           preflightAnimations.set(selection, animations);
           const outcome = await tryGsapDragIntercept(

package/src/hooks/usePersistentEditHistory.test.ts

@@ -76,6 +76,7 @@ it("an edit Studio saved is undone and redone by the project's history, with the
   expect(undone).toEqual({
     ok: true,
     label: "Undid: Moved Title",
+    undoes: expect.any(String),
     paths: ["index.html"],
     files: { "index.html": { previous: "B", restored: "A" } },
   });
@@ -241,3 +242,48 @@ it("a step that cannot reach the server says so", async () => {
     message: "Studio could not reach its server.",
   });
 });
+
+it("predicts a step from what this tab wrote, and not while a claim or step may have moved the history", async () => {
+  const { hook, save, readFile } = await studio();
+  save("B");
+  const claim = hook().recordEdit({
+    label: "Moved Title",
+    files: { "index.html": { before: "A", after: "B" } },
+  });
+  expect(hook().predict("undo")).toBeNull();
+  await act(() => claim);
+  const predicted = await vi.waitFor(() => {
+    const next = hook().predict("undo");
+    expect(next?.files).toEqual({ "index.html": { previous: "B", restored: "A" } });
+    return next!;
+  });
+
+  hook().noteOutsideChange();
+  expect(hook().predict("undo")).toBeNull();
+  await vi.waitFor(() => expect(hook().predict("undo")?.id).toBe(predicted.id));
+
+  const undone = hook().undo({ readFile });
+  expect(hook().predict("undo")).toBeNull();
+  expect((await act(() => undone)).undoes).toBe(predicted.id);
+  await vi.waitFor(() =>
+    expect(hook().predict("redo")?.files).toEqual({
+      "index.html": { previous: "A", restored: "B" },
+    }),
+  );
+});
+
+it("an undo taken before the view caught up with the edit still reports the preview's before and after", async () => {
+  const { hook, save, readFile } = await studio();
+  save("B");
+  const record = hook().recordEdit({
+    label: "Moved Title",
+    files: { "index.html": { before: "A", after: "B" } },
+  });
+  const undo = hook().undo;
+  await act(() => record);
+  const undone = await act(() => undo({ readFile }));
+  expect(undone).toMatchObject({
+    ok: true,
+    files: { "index.html": { previous: "B", restored: "A" } },
+  });
+});