@hyperframes/studio 0.8.116 → 0.8.117

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

@@ -14,6 +14,7 @@ interface FreezeFrameResponse {
   before: string;
   after: string;
   version: string;
+  stillPath: string;
 }
 
 function isFreezeFrameResponse(value: unknown): value is FreezeFrameResponse {
@@ -22,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"
   );
 }
 
@@ -109,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);
       });

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -74,6 +74,7 @@ function mountResizeHandler(
         size: { width: number; height: number },
         offset?: { x: number; y: number },
         restore?: () => void,
+        route?: { plainTranslate: boolean },
       ) => Promise<void | import("../utils/previewFeatureUsage").GeometryCommitResult>)
     | null = null;
   let property: ReturnType<typeof useGsapAwareEditing>["commitAnimatedProperty"] | null = null;
@@ -234,6 +235,21 @@ describe("useGsapAwareEditing keeps the route a gesture chose at press", () => {
   });
 });
 
+describe("useGsapAwareEditing keeps the box route a resize chose at press", () => {
+  it.each([
+    ["the CSS route, on an element GSAP has since taken over", true],
+    ["the GSAP route, on an element that now looks GSAP-free", false],
+  ])("%s", async (_, plainTranslate) => {
+    mocks.resize.mockResolvedValue({ status: "persisted" });
+    const h = mountResizeHandler([], [], plainTranslate);
+    const size = { width: 300, height: 200 };
+    await act(() => h.resize(h.selection, size, undefined, vi.fn(), { plainTranslate }));
+    expect(h.fallback).toHaveBeenCalledTimes(plainTranslate ? 1 : 0);
+    expect(mocks.resize).toHaveBeenCalledTimes(plainTranslate ? 0 : 1);
+    act(() => h.root.unmount());
+  });
+});
+
 describe("useGsapAwareEditing refuses a group GSAP took over before writing any member", () => {
   it("writes no member when one CSS-route member has been folded since the press", async () => {
     const stageElementPositionOffset = vi.fn(() => ({ save: vi.fn(), rollback: vi.fn() }));
@@ -296,6 +312,15 @@ describe("useGsapAwareEditing rotation routing", () => {
     act(() => h.root.unmount());
   });
 
+  it("saves a turn the press sent down the GSAP route there, even once the element looks GSAP-free", async () => {
+    vi.mocked(tryGsapRotationIntercept).mockResolvedValue({ status: "persisted" });
+    const h = rotate(document.createElement("div"));
+    await act(() => h.rotationCommit(h.box, { angle: 55, plain: null }));
+    expect(tryGsapRotationIntercept).toHaveBeenCalledTimes(1);
+    expect(h.handleDomRotationCommit).not.toHaveBeenCalled();
+    act(() => h.root.unmount());
+  });
+
   it("saves a turn the press drew as CSS by the CSS writer, even once a GSAP tween turns the element", async () => {
     const element = document.createElement("div");
     const h = rotate(element);

package/src/hooks/useGsapAwareEditing.ts

@@ -30,9 +30,7 @@ import { logResize, logResizeSettle } from "../utils/resizeDebug";
 import type { MoveCommitOptions } from "../components/editor/domEditOverlayGestures";
 import { runGestureTransaction } from "./gestureTransaction";
 import {
-  gsapWritesBox,
-  gsapWritesPosition,
-  gsapWritesRotation,
+  editsPlainCss,
   hasNonHoldTweenForElement,
   POSITION_CHANNELS,
 } from "./gsapRuntimeKeyframes";
@@ -151,7 +149,7 @@ export function useGsapAwareEditing({
       modifiers?: MoveCommitOptions,
     ) => {
       const writes = observeGsapGesture(gsapCommitMutation);
-      if (modifiers?.plainTranslate ?? !gsapWritesPosition(selection.element)) {
+      if (modifiers?.plainTranslate ?? editsPlainCss(selection.element, "move")) {
         const result = await stageElementPositionOffset(selection, next, true).save();
         return writes.finish(result?.changed === true);
       }
@@ -207,9 +205,10 @@ export function useGsapAwareEditing({
       next: { width: number; height: number },
       offset?: { x: number; y: number },
       restore: () => void = () => undefined,
+      route?: { plainTranslate: boolean },
     ) => {
       const writes = observeGsapGesture(gsapCommitMutation);
-      if (!gsapWritesBox(selection.element)) {
+      if (route?.plainTranslate ?? editsPlainCss(selection.element, "resize")) {
         const result = await handleDomBoxSizeCommit(selection, next, offset, restore);
         return writes.finish(result?.changed === true);
       }
@@ -258,8 +257,13 @@ export function useGsapAwareEditing({
           );
           // Saved after the size, under its undo key, so the two are one step.
           await saveMove(dragOutcome, async () => {
-            const plain = !gsapWritesPosition(selection.element);
-            anchorMove = stageElementPositionOffset(selection, offset, plain, coalesceKey);
+            const plainAfterSettle = editsPlainCss(selection.element, "move");
+            anchorMove = stageElementPositionOffset(
+              selection,
+              offset,
+              plainAfterSettle,
+              coalesceKey,
+            );
           });
         }
       };
@@ -360,7 +364,7 @@ export function useGsapAwareEditing({
   const handleGsapAwareRotationCommit = useCallback(
     async (selection: DomEditSelection, next: RotationCommit) => {
       const writes = observeGsapGesture(gsapCommitMutation);
-      if (next.plain || !gsapWritesRotation(selection.element)) {
+      if (next.plain === undefined ? editsPlainCss(selection.element, "rotate") : next.plain) {
         const result = await handleDomRotationCommit(selection, next);
         return writes.finish(result?.changed === true);
       }

package/src/hooks/useGsapAwareGroupMove.ts

@@ -5,7 +5,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { CommitMutationCall, CommitMutationOptions } from "./gsapScriptCommitTypes";
 import type { UseGsapAwareEditingParams } from "./useGsapAwareEditing";
 import { observeGsapGesture } from "./gsapGestureOutcome";
-import { gsapWritesPosition } from "./gsapRuntimeKeyframes";
+import { editsPlainCss } from "./gsapRuntimeKeyframes";
 import { refuseGsapTakeover } from "./elementOffsetStager";
 import { tryGsapDragIntercept } from "./gsapRuntimeBridge";
 import { assertGsapEditPersisted } from "./gsapEditOutcome";
@@ -81,7 +81,7 @@ export function useGsapAwareGroupMove({
       // write nothing and share one in-flight parse per file, so they run together.
       const preflightResults = await Promise.allSettled(
         updates.map(async ({ selection, next, plainTranslate }) => {
-          if (plainTranslate ?? !gsapWritesPosition(selection.element)) {
+          if (plainTranslate ?? editsPlainCss(selection.element, "move")) {
             refuseGsapTakeover(selection.element, toastRefusal ? showToast : () => {});
             return void offsetMembers.set(selection, true);
           }

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

package/src/hooks/useGsapScriptCommits.ts

@@ -268,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(
@@ -410,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

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,
@@ -316,6 +316,29 @@ it("refuses a second press whose edit is undone once an edit was made after the
   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]> = [

package/src/hooks/usePersistentEditHistory.ts

@@ -3,13 +3,7 @@ import type { HistoryListItem, HistoryResult } from "@hyperframes/studio-server"
 import { studioFileContentVersion, studioWriteHeaders } from "../utils/studioFileVersion";
 import type { RestoreFiles } from "../utils/gsapUndoRestore";
 import { studioApiFetch } from "../utils/studioApiFetch";
-
-interface RecordEditInput {
-  label: string;
-  coalesceKey?: string;
-  coalesceMs?: number;
-  files: Record<string, { before: string; after: string }>;
-}
+import type { RecordEditInput } from "../utils/studioFileHistory";
 
 interface ApplyCallbacks {
   readFile: (path: string) => Promise<string>;
@@ -235,9 +229,9 @@ export function usePersistentEditHistory({ projectId }: UsePersistentEditHistory
   }, [refresh, own]);
 
   const recordEdit = useCallback(
-    async ({ label, coalesceKey, coalesceMs, files }: RecordEditInput) => {
+    async ({ label, coalesceKey, coalesceMs, files, created = [] }: RecordEditInput) => {
       if (!projectId) return;
-      const paths = Object.keys(files);
+      const paths = [...Object.keys(files), ...created];
       own.overtake();
       const reply = await post(historyUrl(projectId, "/claim"), {
         label,

package/src/utils/gsapSoftReload.test.ts

@@ -481,6 +481,45 @@ describe("applySoftReload authored-style restore", () => {
     return el.style.getPropertyValue("opacity");
   }
 
+  it("flushes only elements when a tween targets a plain object (the runtime's duration filler)", () => {
+    const el = document.createElement("div");
+    // GSAP's clearProps writes target.style.cssText, which throws on a plain object.
+    const set = vi.fn((targets: Array<{ style: CSSStyleDeclaration }>) => {
+      for (const t of targets) t.style.cssText = "";
+    });
+    const { iframe } = buildIframeWithTarget(el, {
+      gsap: { timeline: vi.fn(), set },
+      __timelines: {
+        root: {
+          kill: vi.fn(),
+          getChildren: () => [{ targets: () => [el] }, { targets: () => [{}] }],
+        },
+      },
+    });
+
+    expect(applySoftReload(iframe, SCRIPT_TEXT)).toBe("applied");
+    expect(set).toHaveBeenCalledWith([el], { clearProps: "all" });
+  });
+
+  it("falls back to a full reload, and says why, when the flush throws", () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const { iframe } = buildIframeWithTarget(document.createElement("div"), {
+      gsap: {
+        timeline: vi.fn(),
+        set: vi.fn(() => {
+          throw new Error("flush failed");
+        }),
+      },
+    });
+
+    expect(applySoftReload(iframe, SCRIPT_TEXT)).toBe("cannot-soft-reload");
+    expect(error).toHaveBeenCalledWith(
+      expect.stringContaining("soft reload threw"),
+      expect.any(Error),
+    );
+    error.mockRestore();
+  });
+
   it("restores opacity from the after-write HTML (matched by data-hf-id)", () => {
     const el = document.createElement("img");
     el.setAttribute("data-hf-id", "hf-1");

package/src/utils/gsapSoftReload.ts

@@ -152,7 +152,8 @@ function runSuppressed(win: IframeWindow, reload: () => void): boolean {
     if (win.__hfSuppressSceneMutations) win.__hfSuppressSceneMutations(reload);
     else reload();
     return true;
-  } catch {
+  } catch (error) {
+    console.error("[Studio] GSAP soft reload threw; falling back to a full reload", error);
     return false;
   }
 }
@@ -369,16 +370,11 @@ export function applySoftReload(
     // HTML `style=""` attribute. Save → clear → restore → what GSAP wrote, from the file.
     const allTargets = [...targets.keys()];
     if (allTargets.length > 0 && win.gsap?.set) {
-      const saved: Array<[HTMLElement, string]> = [];
-      for (const el of allTargets) {
-        // Iframe-realm node: instanceof HTMLElement fails across realms, and
-        // gsap targets() only yields elements here — style access is duck-typed.
-        const styled = el as HTMLElement;
-        if (styled.style?.cssText != null) saved.push([styled, styled.style.cssText]);
-      }
-      try {
-        win.gsap.set(allTargets, { clearProps: "all" });
-      } catch {}
+      // Iframe-realm nodes: instanceof HTMLElement fails across realms, so style access is duck-typed.
+      const saved = allTargets.map(
+        (el) => [el as HTMLElement, (el as HTMLElement).style.cssText] as const,
+      );
+      win.gsap.set(allTargets, { clearProps: "all" });
       for (const [el, css] of saved) {
         const s = el.style;
         s.cssText = css;

package/src/utils/gsapUndoRestore.browser.test.ts

@@ -16,11 +16,9 @@ const CROP = "inset(0px 40px 0px 0px)";
 vi.setConfig({ testTimeout: 60_000, hookTimeout: 60_000 });
 let browser: Browser;
 let undoBundle: string;
+let softReloadBundle: string;
 
-beforeAll(async () => {
-  const executablePath = findSystemChrome();
-  if (!executablePath) throw new Error("no Chrome found: set HYPERFRAMES_BROWSER_PATH");
-  browser = await puppeteer.launch({ executablePath, headless: true, args: ["--no-sandbox"] });
+async function bundle(file: string, name: string): Promise<string> {
   const out = await build({
     configFile: false,
     logLevel: "silent",
@@ -30,68 +28,85 @@ beforeAll(async () => {
     build: {
       write: false,
       minify: false,
-      lib: {
-        entry: fileURLToPath(new URL("./gsapUndoRestore.ts", import.meta.url)),
-        formats: ["iife"],
-        name: "hfUndo",
-      },
+      lib: { entry: fileURLToPath(new URL(file, import.meta.url)), formats: ["iife"], name },
     },
   });
-  undoBundle = (Array.isArray(out) ? out[0]! : (out as { output: [{ code: string }] })).output[0]
-    .code;
+  return (Array.isArray(out) ? out[0]! : (out as { output: [{ code: string }] })).output[0].code;
+}
+
+beforeAll(async () => {
+  const executablePath = findSystemChrome();
+  if (!executablePath) throw new Error("no Chrome found: set HYPERFRAMES_BROWSER_PATH");
+  browser = await puppeteer.launch({ executablePath, headless: true, args: ["--no-sandbox"] });
+  undoBundle = await bundle("./gsapUndoRestore.ts", "hfUndo");
+  softReloadBundle = await bundle("./gsapSoftReload.ts", "hfSoftReload");
 });
 
 afterAll(() => browser?.close());
 
+type Spec = { gsap: string; placement: string; rotation: number; time: number };
+
+/** The bench's root crop fixture, shown at `spec.time` with the module under test loaded. */
+async function openCase(spec: Spec, moduleBundle: string) {
+  const dir = join(mkdtempSync(join(tmpdir(), "undo-gsap-")), "case");
+  writeFixture({ gesture: "crop", nesting: "root", zoom: 100, ...spec }, dir);
+  const restored = readFileSync(join(dir, "index.html"), "utf8");
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1920, height: 1080 });
+  await page.setRequestInterception(true);
+  // Only the fixture's GSAP CDN script is served; anything else is refused, never fetched.
+  page.on("request", (request) =>
+    request.url().endsWith("/gsap.min.js")
+      ? request.respond({ body: readFileSync(require.resolve("gsap/dist/gsap.min.js"), "utf8") })
+      : request.abort("blockedbyclient"),
+  );
+  await page.setContent(restored, { waitUntil: "load" });
+  await page.evaluate(readFileSync(require.resolve("@hyperframes/core/runtime"), "utf8"));
+  await page.waitForFunction(() => "__player" in window);
+  await page.evaluate(moduleBundle);
+  await page.evaluate(
+    (time) => (window as unknown as { __player: { seek(t: number): void } }).__player.seek(time),
+    spec.time,
+  );
+  const box = () =>
+    page.evaluate(() => {
+      const { left, top, width, height } = document
+        .getElementById("target")!
+        .getBoundingClientRect();
+      return [left, top, width, height].map((n) => Math.round(n * 100) / 100);
+    });
+  return { page, restored, box };
+}
+
 // The first case opens the cold browser's first page, which overran 5 s on a loaded CI runner.
 it.each([
-  { gsap: "hold", placement: "px", rotation: 0 },
-  { gsap: "tween", placement: "px", rotation: 0 },
-  { gsap: "tween", placement: "xpercent", rotation: 30 },
+  { gsap: "hold", placement: "px", rotation: 0, time: 1 },
+  { gsap: "tween", placement: "px", rotation: 0, time: 1 },
+  { gsap: "tween", placement: "xpercent", rotation: 30, time: 1 },
+  { gsap: "keys", placement: "px", rotation: 0, time: 1 },
+  { gsap: "keys", placement: "px", rotation: 30, time: 2 },
+  { gsap: "scale", placement: "px", rotation: 0, time: 1 },
+  { gsap: "spin", placement: "px", rotation: 30, time: 1 },
+  { gsap: "fromto", placement: "px", rotation: 0, time: 1 },
 ])(
-  "an undone crop leaves a $gsap $placement r$rotation layer where it was",
+  "an undone crop leaves a $gsap $placement r$rotation layer at t$time where it was",
   async (spec) => {
-    const dir = join(mkdtempSync(join(tmpdir(), "undo-gsap-")), "case");
-    writeFixture({ gesture: "crop", nesting: "root", zoom: 100, ...spec }, dir);
-    const restored = readFileSync(join(dir, "index.html"), "utf8");
+    const { page, restored, box } = await openCase(spec, undoBundle);
     const previous = restored.replace(
       `<div id="target"`,
       `<div id="target" style="clip-path: ${CROP}"`,
     );
-    const page = await browser.newPage();
-    await page.setViewport({ width: 1920, height: 1080 });
-    await page.setRequestInterception(true);
-    // Only the fixture's GSAP CDN script is served; anything else is refused, never fetched.
-    page.on("request", (request) =>
-      request.url().endsWith("/gsap.min.js")
-        ? request.respond({ body: readFileSync(require.resolve("gsap/dist/gsap.min.js"), "utf8") })
-        : request.abort("blockedbyclient"),
-    );
-    await page.setContent(restored, { waitUntil: "load" });
-    await page.evaluate(readFileSync(require.resolve("@hyperframes/core/runtime"), "utf8"));
-    await page.waitForFunction(() => "__player" in window);
-    await page.evaluate(undoBundle);
-
-    const box = () =>
-      page.evaluate(() => {
-        const { left, top, width, height } = document
-          .getElementById("target")!
-          .getBoundingClientRect();
-        return [left, top, width, height].map((n) => Math.round(n * 100) / 100);
-      });
-    await page.evaluate(() =>
-      (window as unknown as { __player: { seek(t: number): void } }).__player.seek(1),
-    );
     const before = await box();
     const outcome = await page.evaluate(
-      (files, crop) => {
+      (files, crop, time) => {
         document.getElementById("target")!.style.setProperty("clip-path", crop);
         const undo = (window as unknown as { hfUndo: typeof import("./gsapUndoRestore") }).hfUndo;
         const iframe = { contentDocument: document, contentWindow: window } as HTMLIFrameElement;
-        return undo.applyUndoRestoreToPreview(iframe, "index.html", files, 1, () => {});
+        return undo.applyUndoRestoreToPreview(iframe, "index.html", files, time, () => {});
       },
       { "index.html": { previous, restored } },
       CROP,
+      spec.time,
     );
 
     expect(outcome).toBe("soft");
@@ -100,3 +115,35 @@ it.each([
   },
   30_000,
 );
+
+// A drop saves the file and soft-reloads it; the re-run must place an animated layer where it was.
+it.each([
+  { gsap: "tween", placement: "px", rotation: 0, time: 1 },
+  { gsap: "keys", placement: "px", rotation: 30, time: 2 },
+  { gsap: "spin", placement: "px", rotation: 0, time: 1 },
+])(
+  "a soft reload keeps a $gsap $placement r$rotation layer at t$time where it was",
+  async (spec) => {
+    const { page, restored, box } = await openCase(spec, softReloadBundle);
+    const before = await box();
+    const outcome = await page.evaluate(
+      (html, time) => {
+        const soft = (window as unknown as { hfSoftReload: typeof import("./gsapSoftReload") })
+          .hfSoftReload;
+        const iframe = { contentDocument: document, contentWindow: window } as HTMLIFrameElement;
+        const script = soft.extractGsapScriptText(html)!;
+        return soft.applySoftReload(iframe, script, {
+          currentTimeOverride: time,
+          authoredHtml: html,
+        });
+      },
+      restored,
+      spec.time,
+    );
+
+    expect(outcome).toBe("applied");
+    expect(await box()).toEqual(before);
+    await page.close();
+  },
+  30_000,
+);