@hyperframes/studio 0.8.127 → 0.8.129

package/src/hooks/timelineTimingSync.ts

@@ -17,6 +17,7 @@ import {
   GsapOwnershipProtocolError,
   GsapPreviewConvergenceError,
   postGsapMutation,
+  postGsapMutations,
   requireGsapOwnershipProtocol,
   rollbackOwnedMutation,
   type GsapMutationStatus,
@@ -29,6 +30,7 @@ import {
   type StudioProjectFileWriter,
 } from "../utils/studioFileMutationCoordinator";
 import { studioApiFetch } from "../utils/studioApiFetch";
+import { moveLiveTweens } from "../utils/gsapLiveRetime";
 
 export async function readFileContent(projectId: string, targetPath: string): Promise<string> {
   if (targetPath.includes("\0") || targetPath.includes("..")) {
@@ -82,8 +84,8 @@ function rebindPreviewTiming(iframe: HTMLIFrameElement | null, currentTime: numb
 }
 
 /**
- * Sync the live preview after a TIMING-ONLY edit (move / resize), preferring a
- * soft reload over the full iframe reload that flashes every clip.
+ * Sync the live preview after a timing-only edit (move / resize): move the live tweens when only
+ * their timing changed, else a soft reload rather than the full reload that flashes every clip.
  *
  * Why this is safe WITHOUT re-deriving timeline elements: a move/resize commit has
  * already (a) patched the live DOM timing attributes, (b) updated the store's
@@ -115,32 +117,41 @@ function rebindPreviewTiming(iframe: HTMLIFrameElement | null, currentTime: numb
  *   script is now stale, so a rebind against it would show wrong positions →
  *   full-reload.
  */
-function syncTimingEditPreview(
+async function syncTimingEditPreview(
   iframe: HTMLIFrameElement | null,
   outcome: GsapMutationStatus,
-  currentTime: number,
+  projectId: string | null,
   reloadPreview: () => void,
   rebindWhenUnmutated: boolean,
-  nestedFiles: Map<string, string> | null | undefined,
-): void {
+): Promise<void> {
+  const currentTime = () => usePlayerStore.getState().currentTime;
   if (!outcome.mutated && rebindWhenUnmutated) {
-    if (!rebindPreviewTiming(iframe, currentTime)) reloadPreview();
+    if (!rebindPreviewTiming(iframe, currentTime())) reloadPreview();
     return;
   }
-  if (!iframe || !outcome.scriptText) {
+  const { scriptText } = outcome;
+  if (!iframe || !scriptText) {
     reloadPreview();
     return;
   }
-  const result = applySoftReload(iframe, outcome.scriptText, {
+  if (moveLiveTweens(iframe, scriptText, currentTime(), reloadPreview)) return;
+  const nestedFiles = await settleNestedReads(
+    projectId
+      ? readNestedFiles(iframe, scriptText, (path) => readFileContent(projectId, path))
+      : null,
+  );
+  const result = applySoftReload(iframe, scriptText, {
     onAsyncFailure: reloadPreview,
-    currentTimeOverride: currentTime,
+    currentTimeOverride: currentTime(),
     authoredHtml: outcome.after,
     nestedFiles,
   });
   if (result === "cannot-soft-reload") reloadPreview();
 }
 
-async function finishTimelineTimingFallback(input: {
+const UNMUTATED: GsapMutationStatus = { mutated: false, scriptText: null };
+
+export async function finishTimelineTimingFallback(input: {
   iframe: HTMLIFrameElement | null;
   projectId: string | null;
   reloadPreview: () => void;
@@ -155,7 +166,7 @@ async function finishTimelineTimingFallback(input: {
    */
   rebindWhenUnmutated: boolean;
 }): Promise<void> {
-  let outcome: GsapMutationStatus = { mutated: false, scriptText: null };
+  let outcome = UNMUTATED;
   if (input.gsapMutation) {
     try {
       outcome = await input.gsapMutation();
@@ -167,27 +178,29 @@ async function finishTimelineTimingFallback(input: {
       return;
     }
   }
-  const { projectId } = input;
-  const nestedFiles = await settleNestedReads(
-    projectId && outcome.scriptText
-      ? readNestedFiles(input.iframe, outcome.scriptText, (path) =>
-          readFileContent(projectId, path),
-        )
-      : null,
-  );
-  syncTimingEditPreview(
+  await syncTimingEditPreview(
     input.iframe,
     outcome,
-    usePlayerStore.getState().currentTime,
+    input.projectId,
     input.reloadPreview,
     input.rebindWhenUnmutated,
-    nestedFiles,
   );
 }
 
-// Coalesce window for folding a GSAP mutation into the preceding timing edit; only has to
-// outlast one GSAP server round-trip, never a real second edit.
-const GSAP_HISTORY_COALESCE_MS = 10_000;
+// Held until the next edit: the key is the gesture's own, so only its GSAP fold can join it.
+const UNTIL_NEXT_EDIT = Number.POSITIVE_INFINITY;
+let timingGestures = 0;
+
+/** One timing gesture's undo step, shared by its timing write and its GSAP fold however long the fold takes. */
+export function timingGestureStep(
+  kind: string,
+  given?: { coalesceKey?: string },
+): { coalesceKey: string; coalesceMs: number } {
+  return {
+    coalesceKey: given?.coalesceKey ?? `${kind}:${++timingGestures}`,
+    coalesceMs: UNTIL_NEXT_EDIT,
+  };
+}
 
 type OwnedMutationStep = {
   path: string;
@@ -265,7 +278,7 @@ async function foldGsapMutationInQueue(input: {
   const ownedSteps: OwnedMutationStep[] = [];
   const runOwnedMutation: OwnedMutationRunner = async (path, mutation) => {
     const pending = mutation();
-    if (!pending) return { mutated: false, scriptText: null };
+    if (!pending) return UNMUTATED;
     const status = await pending;
     if (!status.mutated) return status;
     if (status.before === undefined || status.after === undefined) {
@@ -313,7 +326,7 @@ async function foldGsapMutationInQueue(input: {
         await input.recordEdit({
           label: input.label,
           coalesceKey: input.coalesceKey,
-          coalesceMs: GSAP_HISTORY_COALESCE_MS,
+          coalesceMs: UNTIL_NEXT_EDIT,
           files,
         });
       }
@@ -325,7 +338,7 @@ async function foldGsapMutationInQueue(input: {
 }
 
 // The mutations, the ownership read and any rollback hold every touched file's queue.
-function foldGsapMutationIntoHistory(
+export function foldGsapMutationIntoHistory(
   input: Parameters<typeof foldGsapMutationInQueue>[0] & {
     writeFile: StudioProjectFileWriter;
     paths: readonly string[];
@@ -336,6 +349,30 @@ function foldGsapMutationIntoHistory(
   );
 }
 
+export function shiftGsapMutation(elementId: string | undefined, delta: number) {
+  if (delta === 0 || !elementId) return null;
+  return { type: "shift-positions", targetSelector: `#${elementId}`, delta };
+}
+
+export function scaleGsapMutation(
+  elementId: string | undefined,
+  oldStart: number,
+  oldDuration: number,
+  newStart: number,
+  newDuration: number,
+) {
+  if (!elementId || oldDuration <= 0 || newDuration <= 0) return null;
+  if (oldStart === newStart && oldDuration === newDuration) return null;
+  return {
+    type: "scale-positions",
+    targetSelector: `#${elementId}`,
+    oldStart,
+    oldDuration,
+    newStart,
+    newDuration,
+  };
+}
+
 /**
  * Shift all GSAP animation positions targeting a given element by a time delta.
  * Calls the server-side GSAP mutation endpoint which uses the AST-based parser.
@@ -347,20 +384,12 @@ export async function shiftGsapPositions(
   elementId: string,
   delta: number,
 ): Promise<GsapMutationStatus> {
-  if (delta === 0 || !elementId) return { mutated: false, scriptText: null };
-  return postGsapMutation(
-    projectId,
-    filePath,
-    {
-      type: "shift-positions",
-      targetSelector: `#${elementId}`,
-      delta,
-    },
-    "shift-positions failed",
-  );
+  const mutation = shiftGsapMutation(elementId, delta);
+  if (!mutation) return UNMUTATED;
+  return postGsapMutation(projectId, filePath, mutation, "shift-positions failed");
 }
 
-export async function scaleGsapPositions(
+async function scaleGsapPositions(
   projectId: string,
   filePath: string,
   elementId: string,
@@ -369,23 +398,9 @@ export async function scaleGsapPositions(
   newStart: number,
   newDuration: number,
 ): Promise<GsapMutationStatus> {
-  if (!elementId || oldDuration <= 0 || newDuration <= 0)
-    return { mutated: false, scriptText: null };
-  if (oldStart === newStart && oldDuration === newDuration)
-    return { mutated: false, scriptText: null };
-  return postGsapMutation(
-    projectId,
-    filePath,
-    {
-      type: "scale-positions",
-      targetSelector: `#${elementId}`,
-      oldStart,
-      oldDuration,
-      newStart,
-      newDuration,
-    },
-    "scale-positions failed",
-  );
+  const mutation = scaleGsapMutation(elementId, oldStart, oldDuration, newStart, newDuration);
+  if (!mutation) return UNMUTATED;
+  return postGsapMutation(projectId, filePath, mutation, "scale-positions failed");
 }
 
 /** The GSAP sync a committed SDK timing write made, or null when its timeline script is unchanged. */
@@ -502,8 +517,8 @@ export async function finishGroupTimingGsapFallback<C extends { element: Timelin
   activeCompPath: string | null;
   changes: readonly C[];
   resolveChangePath: (element: TimelineElement) => string;
-  /** Per-change GSAP mutation; return null to skip a change with no timing delta. */
-  mutateChange: (change: C, changePath: string) => Promise<GsapMutationStatus> | null;
+  /** The change's GSAP mutation; null skips a change with no timing delta. */
+  mutationFor: (change: C) => Record<string, unknown> | null;
   sdkGsap?: GsapMutationStatus | null;
 }): Promise<void> {
   const activePath = input.activeCompPath || "index.html";
@@ -539,14 +554,18 @@ export async function finishGroupTimingGsapFallback<C extends { element: Timelin
           let mutated = false;
           let scriptText: GsapMutationStatus["scriptText"] = null;
           let after: string | undefined;
+          const byPath = new Map<string, Record<string, unknown>[]>();
           for (const change of input.changes) {
+            const mutation = input.mutationFor(change);
+            if (!mutation) continue;
             const changePath = input.resolveChangePath(change.element);
+            byPath.set(changePath, [...(byPath.get(changePath) ?? []), mutation]);
+          }
+          for (const [changePath, mutations] of byPath) {
             const status = await runOwnedMutation(changePath, () =>
-              input.mutateChange(change, changePath),
+              postGsapMutations(input.projectId, changePath, mutations, input.errorLabel),
             );
             mutated = mutated || status.mutated;
-            // The LAST mutation against the active comp carries the cumulative
-            // rewritten script for that file.
             if (changePath === activePath) ({ scriptText, after } = status);
           }
           return { mutated, scriptText: otherFileChanged ? null : scriptText, after };

package/src/hooks/useAnimatedPropertyCommit.ts

@@ -22,6 +22,7 @@ import {
   tweenTargetsElement,
 } from "./gsapShared";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
+import { progressAtTime, runEaseOf, timeAtProgress } from "../utils/gsapKeyframeEases";
 import { roundTo3 } from "../utils/rounding";
 import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
 import {
@@ -365,19 +366,18 @@ async function commitKeyframeProps(
     const newStart = Math.min(ct, ts);
     const newEnd = Math.max(ct, ts + td);
     const newDuration = Math.max(0.01, newEnd - newStart);
+    const runEase = runEaseOf(anim);
+    const toNewPct = (absTime: number) =>
+      Math.round(progressAtTime(runEase, ((absTime - newStart) / newDuration) * 100) * 10) / 10;
     const remapped = kfs.map((kf) => {
-      const absTime = ts + (kf.percentage / 100) * td;
-      const newPct = Math.round(((absTime - newStart) / newDuration) * 1000) / 10;
+      const newPct = toNewPct(ts + (timeAtProgress(runEase, kf.percentage) / 100) * td);
       const p: Record<string, number | string> = { ...kf.properties };
       for (const k of Object.keys(properties)) {
         if (!(k in p) && backfillDefaults[k] != null) p[k] = backfillDefaults[k];
       }
       return { percentage: newPct, properties: p };
     });
-    remapped.push({
-      percentage: Math.round(((ct - newStart) / newDuration) * 1000) / 10,
-      properties,
-    });
+    remapped.push({ percentage: toNewPct(ct), properties });
     remapped.sort((a, b) => a.percentage - b.percentage);
     await commit(
       selection,

package/src/hooks/useBlockedTimelineEditToast.ts

@@ -8,28 +8,19 @@
 
 import { useCallback, useRef } from "react";
 import type { TimelineElement } from "../player";
-import {
-  MAX_HAND_EDIT_CLIPS,
-  type BlockedTimelineEditIntent,
-} from "../player/components/timelineEditing";
 
 const BLOCKED_TOAST_INTERVAL_MS = 1500;
 
 export function useBlockedTimelineEditToast(
   showToast: (message: string, tone?: "info" | "error") => void,
-): (element: TimelineElement, intent: BlockedTimelineEditIntent) => void {
+): (element: TimelineElement) => void {
   const lastAtRef = useRef(0);
   return useCallback(
-    (_element: TimelineElement, intent: BlockedTimelineEditIntent) => {
+    (_element: TimelineElement) => {
       const now = Date.now();
       if (now - lastAtRef.current < BLOCKED_TOAST_INTERVAL_MS) return;
       lastAtRef.current = now;
-      showToast(
-        intent === "edit-many"
-          ? `Select ${MAX_HAND_EDIT_CLIPS} or fewer clips to move or resize by hand, or describe the change.`
-          : "This clip can't be moved or resized from the timeline yet.",
-        "info",
-      );
+      showToast("This clip can't be moved or resized from the timeline yet.", "info");
     },
     [showToast],
   );

package/src/hooks/useCommitPreflightCapabilities.ts

@@ -3,6 +3,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { dragEditOutcome, preflightGsapRotationIntercept } from "./gsapRuntimeBridge";
 import { preflightGsapResizeIntercept } from "./gsapResizePreflight";
+import { withTweenIndex } from "./gsapRuntimeTweenIndex";
 import { gsapEditBlockMessage, type GsapEditOutcome } from "./gsapEditOutcome";
 import { fetchParsedAnimations, parseCacheKey } from "./keyframeCacheAstLoad";
 import { getAnimationsForElement } from "./gsapElementMatch";
@@ -32,6 +33,38 @@ function runCommitPreflights(
 // Studio can hand a narrowed copy back as a new selection; narrowing starts from the resolved one.
 const resolvedSelections = new WeakMap<DomEditSelection, DomEditSelection>();
 
+interface CheckInputs {
+  animations: GsapAnimation[];
+  iframe: HTMLIFrameElement | null;
+  group: boolean;
+  version: number;
+}
+
+interface Checked extends CheckInputs {
+  preflight: CommitPreflight;
+  narrowed?: DomEditSelection;
+}
+
+// A member whose selection, parse, preview and cache version are unchanged keeps its answer.
+const checkedSelections = new WeakMap<DomEditSelection, Checked>();
+
+function checkedPreflight(resolved: DomEditSelection, inputs: CheckInputs): Checked {
+  const known = checkedSelections.get(resolved);
+  const same =
+    known?.animations === inputs.animations &&
+    known.iframe === inputs.iframe &&
+    known.group === inputs.group &&
+    known.version === inputs.version;
+  if (same) return known;
+  const { animations, iframe, group } = inputs;
+  const checked = {
+    ...inputs,
+    preflight: runCommitPreflights(resolved, animations, iframe, group),
+  };
+  checkedSelections.set(resolved, checked);
+  return checked;
+}
+
 const resolvedOf = (selection: DomEditSelection) => resolvedSelections.get(selection) ?? selection;
 
 const MANUAL_FLAGS = [
@@ -123,17 +156,19 @@ export function useCommitPreflightCapabilities({
     void parseTick;
     if (!enabled || !projectId) return { selection, groupSelections };
     const group = groupSelections.length > 1;
+    const iframe = previewIframeRef.current;
     const narrow = (target: DomEditSelection) => {
       const file = gsapSourceFileForSelection(target);
       const animations = parsesRef.current.get(parseCacheKey(projectId, file))?.animations;
-      const preflight = animations
-        ? runCommitPreflights(resolvedOf(target), animations, previewIframeRef.current, group)
-        : null;
-      return narrowCapabilities(target, preflight);
+      if (!animations) return narrowCapabilities(target, null);
+      const inputs = { animations, iframe, group, version };
+      const checked = checkedPreflight(resolvedOf(target), inputs);
+      checked.narrowed ??= narrowCapabilities(target, checked.preflight);
+      return checked.narrowed;
     };
-    return {
+    return withTweenIndex(() => ({
       selection: selection && narrow(selection),
       groupSelections: groupSelections.map(narrow),
-    };
-  }, [enabled, projectId, selection, groupSelections, parseTick, previewIframeRef]);
+    }));
+  }, [enabled, projectId, selection, groupSelections, parseTick, previewIframeRef, version]);
 }

package/src/hooks/useDomEditPreviewSync.ts

@@ -10,6 +10,7 @@ import { useDockLayoutStore } from "../components/dock/dockLayoutStore";
 import type { PatchTarget } from "../utils/sourcePatcher";
 import { logSelect } from "../utils/selectDebug";
 import { onPreviewContentReplaced } from "../player/sceneSwap";
+import type { ResolveDomSelectionOptions } from "./useDomSelectionTypes";
 
 interface UseDomEditPreviewSyncParams {
   previewIframe: HTMLIFrameElement | null;
@@ -24,7 +25,10 @@ interface UseDomEditPreviewSyncParams {
     selection: DomEditSelection | null,
     options?: { revealPanel?: boolean; preserveGroup?: boolean },
   ) => void;
-  buildDomSelectionFromTarget: (element: HTMLElement) => Promise<DomEditSelection | null>;
+  buildDomSelectionFromTarget: (
+    element: HTMLElement,
+    options?: Pick<ResolveDomSelectionOptions, "previous">,
+  ) => Promise<DomEditSelection | null>;
   refreshPreviewDocumentVersion: () => void;
   syncPreviewHotkeys: (iframe: HTMLIFrameElement | null) => void;
   applyStudioManualEditsToPreviewRef: React.MutableRefObject<
@@ -96,7 +100,9 @@ export function useDomEditPreviewSync({
         return;
       }
 
-      const nextSelection = await buildDomSelectionFromTarget(nextElement);
+      const nextSelection = await buildDomSelectionFromTarget(nextElement, {
+        previous: currentSelection,
+      });
       if (nextSelection) {
         applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
       }

package/src/hooks/useDomSelection.test.ts

@@ -280,6 +280,33 @@ describe("useDomSelection", () => {
     harness.cleanup();
   });
 
+  it("keeps the shown selection when a group-preserving refresh reads nothing new", () => {
+    const element = document.createElement("div");
+    element.id = "headline";
+    const first = { ...makeSelection("Headline", element), dataAttributes: { start: "1" } };
+    const harness = renderHarness({
+      activeCompPath: "intro.html",
+      projectId: "project-1",
+      refreshKey: 0,
+    });
+    const refresh = (selection: typeof first) =>
+      act(() =>
+        harness.current().applyDomSelection(selection, { preserveGroup: true, revealPanel: false }),
+      );
+
+    act(() => harness.current().applyDomSelection(first));
+    harness.timeline.setTimelineSelectionSet.mockClear();
+    refresh({ ...first, dataAttributes: { start: "1" } });
+    expect(harness.current().domEditSelection).toBe(first);
+    expect(harness.timeline.setTimelineSelectionSet).not.toHaveBeenCalled();
+
+    const moved = { ...first, dataAttributes: { start: "2" } };
+    refresh(moved);
+    expect(harness.current().domEditSelection).toBe(moved);
+    expect(harness.current().domEditGroupSelections).toEqual([moved]);
+    harness.cleanup();
+  });
+
   it("clears a committed selection when the active composition path changes", () => {
     const { selection, harness } = setupSelectedHarness();
     expect(harness.current().domEditSelection).toBe(selection);

package/src/hooks/useDomSelection.ts

@@ -5,6 +5,7 @@ import {
   getPreviewTargetFromPointer,
 } from "../utils/studioPreviewHelpers";
 import {
+  domEditSelectionsEqual,
   domEditSelectionsTargetSame,
   domEditSelectionInGroup,
   toggleDomEditGroupSelection,
@@ -23,6 +24,7 @@ import { logSelect } from "../utils/selectDebug";
 import { announceTimelineSelection as announceSelectionToTimeline } from "./domSelectionTimelineMirror";
 import type {
   ApplyDomSelectionOptions,
+  ResolveDomSelectionOptions,
   UseDomSelectionParams,
   UseDomSelectionReturn,
 } from "./useDomSelectionTypes";
@@ -125,6 +127,12 @@ export function useDomSelection({
         previousGroup.length === 1 &&
         domEditSelectionsTargetSame(currentSelection, selection) &&
         domEditSelectionsTargetSame(previousGroup[0], selection);
+      const isUnchangedRefresh =
+        options?.preserveGroup &&
+        currentSelection !== null &&
+        (previousGroup.length === 0 || previousGroup.includes(currentSelection)) &&
+        domEditSelectionsEqual(currentSelection, selection);
+      if (isUnchangedRefresh) return;
       if (isRepeatedSingleSelection) {
         if (options?.revealPanel !== false) {
           setRightCollapsed(false);
@@ -206,23 +214,14 @@ export function useDomSelection({
   );
 
   const buildDomSelectionFromTarget = useCallback(
-    (
-      target: HTMLElement,
-      options?: {
-        preferClipAncestor?: boolean;
-        skipSourceProbe?: boolean;
-        exactTarget?: boolean;
-        // Override the drill-in scope (used by canvas double-click to resolve the
-        // child inside a group before the activeGroupElement state has re-rendered).
-        activeGroupElement?: HTMLElement | null;
-      },
-    ) => {
+    (target: HTMLElement, options?: ResolveDomSelectionOptions) => {
       return resolveDomEditSelection(target, {
         activeCompositionPath: activeCompPath,
         isMasterView,
         preferClipAncestor: options?.preferClipAncestor,
         skipSourceProbe: options?.skipSourceProbe,
         exactTarget: options?.exactTarget,
+        previous: options?.previous,
         activeGroupElement:
           options && "activeGroupElement" in options
             ? options.activeGroupElement
@@ -384,7 +383,7 @@ export function useDomSelection({
         return;
       }
 
-      const nextSelection = await buildDomSelectionFromTarget(element);
+      const nextSelection = await buildDomSelectionFromTarget(element, { previous: selection });
       if (nextSelection) {
         applyDomSelection(nextSelection, {
           revealPanel: false,
@@ -411,7 +410,7 @@ export function useDomSelection({
       for (const selection of selections) {
         const element = findElementForSelection(doc, selection, activeCompPath);
         if (!element) continue;
-        const nextSelection = await buildDomSelectionFromTarget(element);
+        const nextSelection = await buildDomSelectionFromTarget(element, { previous: selection });
         if (nextSelection) nextGroup.push(nextSelection);
       }
       if (nextGroup.length === 0) return;

package/src/hooks/useDomSelectionTypes.ts

@@ -23,6 +23,7 @@ export interface ResolveDomSelectionOptions {
   activeGroupElement?: HTMLElement | null;
   /** Resolve this node itself instead of applying human group-capture behavior. */
   exactTarget?: boolean;
+  previous?: DomEditSelection | null;
 }
 
 // Shared by every hook that needs the project/timeline/panel context a DOM

package/src/hooks/useEditHistoryActions.test.tsx

@@ -5,12 +5,19 @@ 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";
+import {
+  beginStudioPendingEdit,
+  setStudioPendingEditClaimClock,
+  trackStudioPendingEdit,
+} from "../utils/studioPendingEdits";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 let root: Root | null = null;
-afterEach(() => act(() => root?.unmount()));
+afterEach(() => {
+  act(() => root?.unmount());
+  setStudioPendingEditClaimClock(null);
+});
 
 type RestoreFiles = Record<string, { previous: string; restored: string }>;
 type Prediction = { id: string; files: RestoreFiles };
@@ -26,12 +33,13 @@ function mount(
     files?: RestoreFiles;
   },
   predicted?: Prediction,
+  claims: () => number = () => 7,
 ) {
   const editHistory = {
     undo: vi.fn<EditHistoryHandle["undo"]>(async () => result),
     redo: vi.fn<EditHistoryHandle["redo"]>(async () => result),
     predict: () => predicted ?? null,
-    claims: () => 7,
+    claims,
   };
   const putBack = vi.fn();
   const deps = {
@@ -108,6 +116,49 @@ describe("useEditHistoryActions", () => {
     });
   });
 
+  it("reverts an edit still saving before painting an older predicted step", async () => {
+    const reapply = vi.fn();
+    const revert = vi.fn(() => reapply);
+    const saving = beginStudioPendingEdit(revert);
+    const { deps, actions } = mount(
+      { ok: true, label: "Undid: Move", paths: ["index.html"], undoes: "e2" },
+      PREDICTED,
+    );
+    const undone = actions.undo();
+    expect(revert).toHaveBeenCalledTimes(1);
+    expect(deps.showHistoryRestoreNow).not.toHaveBeenCalled();
+    saving.settle();
+    await act(() => undone);
+    expect(deps.editHistory.undo).not.toHaveBeenCalled();
+    expect(reapply).not.toHaveBeenCalled();
+  });
+
+  // Claim counts: when the edit began, at the key, and once its save landed.
+  it.each([
+    ["its claim counted while undo waited, the server undo is the shown revert", 7, 7, 8, 0],
+    ["its claim counted before the key, the server undo is the shown revert", 7, 8, 8, 0],
+    ["its claim never counted, the move is shown again", 7, 7, 7, 1],
+  ])("an edit that lands while undo waits: %s", async (_, atBegin, atKey, atLand, reapplied) => {
+    let claimCount = atBegin;
+    setStudioPendingEditClaimClock(() => claimCount);
+    const reapply = vi.fn();
+    const saving = beginStudioPendingEdit(() => reapply);
+    claimCount = atKey;
+    const { deps, actions } = mount(
+      { ok: true, label: "Undid: Move", paths: ["index.html"], undoes: "e8" },
+      PREDICTED,
+      () => claimCount,
+    );
+    const undone = actions.undo();
+    saving.settle(saving.adopt(() => Promise.resolve()));
+    claimCount = atLand;
+    await act(() => undone);
+    expect(deps.editHistory.undo).toHaveBeenCalledTimes(1);
+    expect(deps.editHistory.undo.mock.calls[0]![0].claimedAfter).toBe(atBegin);
+    expect(deps.showHistoryRestoreNow).not.toHaveBeenCalled();
+    expect(reapply).toHaveBeenCalledTimes(reapplied);
+  });
+
   it("puts a shown step back when the server refuses it", async () => {
     const { deps, actions } = mount(
       { ok: false, reason: "failed", message: "disk full" },