@hyperframes/studio 0.8.106 → 0.8.108

package/src/player/components/timelineLayout.ts

@@ -506,34 +506,6 @@ export function shouldShowTimelineShortcutHint(
   return scrollHeight - clientHeight <= 1;
 }
 
-export function shouldHandleTimelineDeleteKey(input: {
-  key: string;
-  metaKey?: boolean;
-  ctrlKey?: boolean;
-  altKey?: boolean;
-  target?: EventTarget | null;
-}): boolean {
-  if (input.key !== "Delete" && input.key !== "Backspace") return false;
-  if (input.metaKey || input.ctrlKey || input.altKey) return false;
-  const target =
-    input.target && typeof input.target === "object"
-      ? (input.target as {
-          tagName?: string;
-          isContentEditable?: boolean;
-          closest?: (selector: string) => Element | null;
-        })
-      : null;
-  if (target) {
-    const tag = target.tagName?.toLowerCase() ?? "";
-    if (target.isContentEditable) return false;
-    if (["input", "textarea", "select"].includes(tag)) return false;
-    if (typeof target.closest === "function" && target.closest("[contenteditable='true']")) {
-      return false;
-    }
-  }
-  return true;
-}
-
 /* ── Asset drop ───────────────────────────────────────────────────── */
 export function getDefaultDroppedTrack(trackOrder: number[], rowIndex?: number): number {
   if (trackOrder.length === 0) return 0;

package/src/player/components/useClipToolState.ts

@@ -0,0 +1,92 @@
+import { useEffect, useState } from "react";
+import { HF_AUDIO_AUTOMATION_ATTR } from "@hyperframes/core/audio-automation";
+import { HF_AUDIO_CARVE_ATTR } from "@hyperframes/core/audio-carve";
+import { HF_AUDIO_FX_ATTR } from "@hyperframes/core/audio-fx";
+import { HF_COLOR_GRADING_ATTR } from "@hyperframes/core/color-grading";
+import type { TimelineElement } from "../store/playerStore";
+import { useLivePreviewIframe } from "../store/previewIframeStore";
+import { useStudioShellContextOptional } from "../../contexts/StudioContext";
+import { findTimelineElementInIframe } from "../../hooks/timelineEditingHelpers";
+import { committedClipPath } from "../../components/editor/cropPresetStore";
+import { isAudibleVideoNode } from "../lib/timelineElementHelpers";
+import type { ClipToolState } from "./clipToolAttrs";
+
+const LINK_ATTR = "data-link";
+
+const WATCHED_ATTRS = [
+  HF_AUDIO_FX_ATTR,
+  HF_AUDIO_AUTOMATION_ATTR,
+  HF_AUDIO_CARVE_ATTR,
+  HF_COLOR_GRADING_ATTR,
+  LINK_ATTR,
+  "data-volume",
+  "data-has-audio",
+  "muted",
+  "style",
+];
+
+function readVolume(node: Element): number | null {
+  const volume = Number.parseFloat(node.getAttribute("data-volume") ?? "");
+  return Number.isFinite(volume) ? volume : null;
+}
+
+function toolStateFromNode(node: Element): ClipToolState {
+  const tag = node.tagName.toLowerCase();
+  return {
+    tag,
+    hasSound: tag === "audio" || isAudibleVideoNode(node),
+    volume: readVolume(node),
+    muted: node.hasAttribute("muted"),
+    fxChain: node.getAttribute(HF_AUDIO_FX_ATTR),
+    automation: node.getAttribute(HF_AUDIO_AUTOMATION_ATTR),
+    colorGrading: node.getAttribute(HF_COLOR_GRADING_ATTR),
+    clipPath: committedClipPath(node),
+    carve: node.getAttribute(HF_AUDIO_CARVE_ATTR),
+    link: node.getAttribute(LINK_ATTR),
+  };
+}
+
+function toolStateFromElement(el: TimelineElement): ClipToolState {
+  const tag = el.tag.trim().toLowerCase();
+  return {
+    tag,
+    hasSound: tag === "audio" || el.hasAudio === true,
+    volume: el.volume ?? null,
+    muted: el.muted === true,
+    fxChain: el.fxChain ?? null,
+    automation: el.automation ?? null,
+    colorGrading: null,
+    clipPath: null,
+    carve: null,
+    link: null,
+  };
+}
+
+/** Inline style changes every frame under a tween; only a changed reading re-renders. */
+function keepIfUnchanged(prev: ClipToolState, next: ClipToolState): ClipToolState {
+  return JSON.stringify(prev) === JSON.stringify(next) ? prev : next;
+}
+
+/** A clip's tool attributes as the live preview node holds them, kept current as they change. */
+export function useClipToolState(el: TimelineElement): ClipToolState {
+  const iframe = useLivePreviewIframe();
+  const activeCompPath = useStudioShellContextOptional()?.activeCompPath ?? null;
+  const [state, setState] = useState<ClipToolState>(() => toolStateFromElement(el));
+
+  useEffect(() => {
+    const node = findTimelineElementInIframe(iframe, el, activeCompPath);
+    if (!node) {
+      setState(toolStateFromElement(el));
+      return;
+    }
+    const refresh = () => setState((prev) => keepIfUnchanged(prev, toolStateFromNode(node)));
+    refresh();
+    const view = node.ownerDocument.defaultView;
+    if (!view) return;
+    const observer = new view.MutationObserver(refresh);
+    observer.observe(node, { attributes: true, attributeFilter: WATCHED_ATTRS });
+    return () => observer.disconnect();
+  }, [iframe, el, activeCompPath]);
+
+  return state;
+}

package/src/player/hooks/usePlaybackKeyboard.test.ts

@@ -261,3 +261,46 @@ describe("usePlaybackKeyboard — mute & loop shortcuts (#905)", () => {
     expect(usePlayerStore.getState().loopEnabled).toBe(false);
   });
 });
+
+describe("usePlaybackKeyboard — a focused native player owns its keys", () => {
+  const KEYS = [
+    { code: "ArrowLeft", key: "ArrowLeft" },
+    { code: "ArrowRight", key: "ArrowRight" },
+    { code: "Space", key: " " },
+    { code: "KeyJ", key: "j" },
+    { code: "KeyK", key: "k" },
+    { code: "KeyL", key: "l" },
+  ];
+
+  it.each(["video", "audio"])(
+    "leaves the timeline alone while a <%s controls> has focus",
+    (tag) => {
+      const { dispatch, spies } = setupHook();
+      const player = document.createElement(tag);
+      player.setAttribute("controls", "");
+      document.body.append(player);
+      const before = usePlayerStore.getState().currentTime;
+      for (const init of KEYS) {
+        const event = keydown(init);
+        Object.defineProperty(event, "target", { value: player });
+        dispatch(event);
+        expect(event.defaultPrevented, init.code).toBe(false);
+      }
+      expect(spies.seek).not.toHaveBeenCalled();
+      expect(spies.play).not.toHaveBeenCalled();
+      expect(spies.playBackward).not.toHaveBeenCalled();
+      expect(spies.pause).not.toHaveBeenCalled();
+      expect(usePlayerStore.getState().currentTime).toBe(before);
+    },
+  );
+
+  it("still steps the timeline from a player without controls", () => {
+    const { dispatch } = setupHook();
+    const video = document.createElement("video");
+    document.body.append(video);
+    const event = keydown({ code: "ArrowRight", key: "ArrowRight" });
+    Object.defineProperty(event, "target", { value: video });
+    dispatch(event);
+    expect(event.defaultPrevented).toBe(true);
+  });
+});

package/src/player/lib/playbackShortcuts.ts

@@ -6,7 +6,7 @@
  * is active and the user is navigating caption segments).
  */
 
-import { isTypingTarget } from "../../utils/typingTarget";
+import { ownsPlainKeys } from "../../utils/typingTarget";
 
 const PLAYBACK_FRAME_STEP_CODES = new Set(["ArrowLeft", "ArrowRight"]);
 
@@ -15,21 +15,17 @@ const PLAYBACK_SHORTCUT_IGNORED_SELECTOR = [
   "a[href]",
   "[role='button']",
   "[role='checkbox']",
-  "[role='combobox']",
   "[role='menuitem']",
   // Base UI's menu radio item is a `<div>`, so `button` above no longer catches it.
   "[role='menuitemradio']",
   "[role='radio']",
-  "[role='slider']",
   "[role='spinbutton']",
-  "[role='switch']",
-  "[role='textbox']",
 ].join(",");
 
 export function shouldIgnorePlaybackShortcutTarget(target: EventTarget | null): boolean {
   // Anything the user is typing into owns its keys outright, editable elements
-  // included: a letter claimed here never reaches the text.
-  if (isTypingTarget(target)) return true;
+  // included: a letter claimed here never reaches the text. So does a native player.
+  if (ownsPlainKeys(target)) return true;
   if (!target || typeof target !== "object") return false;
   const candidate = target as { closest?: unknown };
   if (typeof candidate.closest !== "function") return false;

package/src/player/lib/timelineElementHelpers.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { isVideoAudible } from "./timelineElementHelpers";
+
+describe("isVideoAudible — the compiler's data-has-audio rule", () => {
+  it("explicit data-has-audio wins", () => {
+    expect(isVideoAudible({ tag: "video", hasAudioAttr: "true", muted: false })).toBe(true);
+    expect(isVideoAudible({ tag: "video", hasAudioAttr: "false", muted: false })).toBe(false);
+  });
+  it("no attribute: an unmuted video is audible, a muted one is not", () => {
+    expect(isVideoAudible({ tag: "video", hasAudioAttr: null, muted: false })).toBe(true);
+    expect(isVideoAudible({ tag: "video", hasAudioAttr: undefined, muted: true })).toBe(false);
+  });
+  it("never true for non-video without the attribute", () => {
+    expect(isVideoAudible({ tag: "img", hasAudioAttr: null, muted: false })).toBe(false);
+  });
+});

package/src/player/lib/timelineElementHelpers.ts

@@ -220,12 +220,35 @@ function readVolume(el: Element, media: Element): number | undefined {
   return Number.isFinite(volume) ? volume : undefined;
 }
 
+/** The compiler's rule (timingCompiler): explicit data-has-audio wins; otherwise an unmuted <video> is audible. */
+export function isVideoAudible(opts: {
+  tag: string;
+  hasAudioAttr: string | null | undefined;
+  muted: boolean;
+}): boolean {
+  if (opts.hasAudioAttr === "true") return true;
+  if (opts.hasAudioAttr === "false" || opts.hasAudioAttr === "") return false;
+  return opts.tag.toLowerCase() === "video" && !opts.muted;
+}
+
+export function isAudibleVideoNode(el: Element): boolean {
+  if (el.tagName.toLowerCase() !== "video" || el.hasAttribute("muted")) return false;
+  return isVideoAudible({
+    tag: "video",
+    hasAudioAttr: el.getAttribute("data-has-audio"),
+    muted: false,
+  });
+}
+
 /** What the mixer gets: the compiler's `data-has-audio` rule, muted and volume. */
 function applyAudioMetadataFromElement(entry: TimelineElement, el: Element): void {
   const media = resolveMediaElement(el) ?? el;
   const muted = el.hasAttribute("muted") || media.hasAttribute("muted");
-  const hasAudio = el.getAttribute("data-has-audio");
-  const sound = hasAudio === null ? el.tagName === "VIDEO" && !muted : hasAudio === "true";
+  const sound = isVideoAudible({
+    tag: el.tagName,
+    hasAudioAttr: el.getAttribute("data-has-audio"),
+    muted,
+  });
   setOptional(entry, "hasAudio", sound ? true : undefined);
   setOptional(entry, "muted", muted ? true : undefined);
   setOptional(entry, "volume", readVolume(el, media));

package/src/player/lib/timelineViewportBudgets.test.ts

@@ -19,6 +19,8 @@ describe("timeline viewport budgets", () => {
       interactionP95Ms: 50,
       constrainedInteractionP95Ms: 75,
       constrainedFrameIntervalP95Ms: 75,
+      ciVirtualizedInteractionP95Ms: 58.3,
+      ciVirtualizedFrameIntervalP95Ms: 25,
       longTaskLimitMs: 50,
       constrainedLongTaskLimitMs: 300,
       posterCoverageRatio: 0.9,

package/src/player/lib/timelineViewportBudgets.ts

@@ -28,6 +28,8 @@ export interface TimelineViewportBudgets {
   frameIntervalP95Ms: number;
   constrainedInteractionP95Ms: number;
   constrainedFrameIntervalP95Ms: number;
+  ciVirtualizedInteractionP95Ms: number;
+  ciVirtualizedFrameIntervalP95Ms: number;
   longTaskLimitMs: number;
   constrainedLongTaskLimitMs: number;
   memoryReturnToleranceRatio: number;
@@ -86,6 +88,8 @@ export const TIMELINE_VIEWPORT_BUDGETS: Readonly<TimelineViewportBudgets> = Obje
   frameIntervalP95Ms: 33.3,
   constrainedInteractionP95Ms: 75,
   constrainedFrameIntervalP95Ms: 75,
+  ciVirtualizedInteractionP95Ms: 58.3,
+  ciVirtualizedFrameIntervalP95Ms: 25,
   longTaskLimitMs: 50,
   constrainedLongTaskLimitMs: 300,
   memoryReturnToleranceRatio: 0.15,

package/src/timelineChromeExports.test.tsx

@@ -6,6 +6,7 @@ import {
   AudioMeterStrip,
   TimelineHistoryButtons,
   TimelineToolbar,
+  useAudioMetersVisible as exportedAudioMetersVisible,
   useClipboard,
   usePlayerStore,
   type UseClipboardOptions,
@@ -51,6 +52,12 @@ describe("timeline chrome package exports, outside Studio's shell", () => {
     await act(async () => root.unmount());
   });
 
+  it("exports the meter visibility store a host toggles", () => {
+    expect(exportedAudioMetersVisible).toBe(useAudioMetersVisible);
+    exportedAudioMetersVisible.getState().setVisible(true);
+    expect(useAudioMetersVisible.getState().visible).toBe(true);
+  });
+
   it("runs the clipboard with no DOM edit session", async () => {
     const toasts: string[] = [];
     const options: UseClipboardOptions = {

package/src/utils/audioMeterMath.test.ts

@@ -1,5 +1,7 @@
 import { describe, expect, it } from "vitest";
+import type { TimelineElement } from "../player";
 import {
+  hasProjectAudio,
   levelToFraction,
   markFraction,
   SILENT_CHANNEL,
@@ -42,3 +44,38 @@ describe("stepPair", () => {
     expect(stepPair(rest, { l: 1, r: 0 }, 32, 16)).not.toBe(rest);
   });
 });
+
+describe("hasProjectAudio", () => {
+  const clip = (overrides: Partial<TimelineElement>): TimelineElement => ({
+    id: "c",
+    tag: "div",
+    start: 0,
+    duration: 1,
+    track: 0,
+    ...overrides,
+  });
+
+  it("ignores an audible video left on native output at unity gain", () => {
+    expect(hasProjectAudio([clip({ tag: "video", hasAudio: true })])).toBe(false);
+    expect(hasProjectAudio([clip({ tag: "video", hasAudio: true, volume: 1 })])).toBe(false);
+  });
+
+  it.each<[string, Partial<TimelineElement>]>([
+    ["an above-unity gain", { volume: 2 }],
+    ["an fx chain", { fxChain: "[]" }],
+    ["automation", { automation: "{}" }],
+    ["a group", { audioGroup: "music" }],
+  ])("counts an audible video routed through Web Audio by %s", (_, fields) => {
+    expect(hasProjectAudio([clip({ tag: "video", hasAudio: true, ...fields })])).toBe(true);
+  });
+
+  it("ignores a muted video even when it carries processing", () => {
+    expect(hasProjectAudio([clip({ tag: "video", hasAudio: true, muted: true, volume: 2 })])).toBe(
+      false,
+    );
+  });
+
+  it("ignores a silent video", () => {
+    expect(hasProjectAudio([clip({ tag: "video" })])).toBe(false);
+  });
+});

package/src/utils/audioMeterMath.ts

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { audioDbToGain, audioGainToDb } from "@hyperframes/core/audio-gain";
+import { audibleVideoNeedsWebAudio } from "@hyperframes/core/audible-video";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { isAudioTimelineElement } from "./timelineInspector";
 
@@ -67,9 +68,14 @@ export function stepPair(
   return [stepChannel(l, raw?.l ?? 0, now, dtMs), stepChannel(r, raw?.r ?? 0, now, dtMs)];
 }
 
-/** The meters appear only for a project with at least one audio clip or group. */
-function hasProjectAudio(elements: readonly TimelineElement[]): boolean {
-  return elements.some((el) => isAudioTimelineElement(el) || el.audioGroup !== undefined);
+/** The meters appear only for a project with an audio clip, a group, or a video Web Audio carries. */
+export function hasProjectAudio(elements: readonly TimelineElement[]): boolean {
+  return elements.some(
+    (el) =>
+      isAudioTimelineElement(el) ||
+      el.audioGroup !== undefined ||
+      (el.hasAudio === true && !el.muted && audibleVideoNeedsWebAudio(el)),
+  );
 }
 
 /** Scans once per `elements` change, not on every store update (the playhead ticks each frame). */

package/src/utils/exportPeakCeiling.ts

@@ -0,0 +1 @@
+export const EXPORT_PEAK_CEILING = 10 ** (-1 / 20);

package/src/utils/gsapSoftReload.ts

@@ -195,6 +195,7 @@ export interface SoftReloadOptions {
   currentTimeOverride?: number;
   /** After-write file HTML — the primary source for the authored opacity and transform restore. */
   authoredHtml?: string;
+  reparse?: Element[];
 }
 
 /**
@@ -251,7 +252,7 @@ export function applySoftReload(
   scriptText: string,
   options: SoftReloadOptions = {},
 ): SoftReloadResult {
-  const { onAsyncFailure, currentTimeOverride, authoredHtml } = options;
+  const { onAsyncFailure, currentTimeOverride, authoredHtml, reparse = [] } = options;
   if (!iframe || !scriptText) return "cannot-soft-reload";
 
   const win = iframe.contentWindow as IframeWindow | null;
@@ -329,7 +330,7 @@ export function applySoftReload(
   // fallow-ignore-next-line complexity
   const doReload = () => {
     const timelines = win.__timelines;
-    const allTargets: Element[] = [];
+    const allTargets: Element[] = [...reparse];
 
     // Kill ONLY the target composition's timeline(s) — leaving every other
     // composition's timeline (and its children on the global timeline) intact.

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

@@ -0,0 +1,94 @@
+// Real Chrome: the box GSAP and a stylesheet translate produce together is what no DOM emulation computes.
+import { mkdtempSync, readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import puppeteer, { type Browser } from "puppeteer-core";
+import { build } from "vite";
+import { afterAll, beforeAll, expect, it } from "vitest";
+import { findSystemChrome } from "../../vite.browser";
+import { writeFixture } from "../../tests/e2e/edit-accuracy/grid.mjs";
+
+const require = createRequire(import.meta.url);
+const CROP = "inset(0px 40px 0px 0px)";
+let browser: Browser;
+let undoBundle: 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"] });
+  const out = await build({
+    configFile: false,
+    logLevel: "silent",
+    resolve: {
+      alias: { canvas: fileURLToPath(new URL("../shims/canvasBrowserStub.js", import.meta.url)) },
+    },
+    build: {
+      write: false,
+      minify: false,
+      lib: {
+        entry: fileURLToPath(new URL("./gsapUndoRestore.ts", import.meta.url)),
+        formats: ["iife"],
+        name: "hfUndo",
+      },
+    },
+  });
+  undoBundle = (Array.isArray(out) ? out[0]! : (out as { output: [{ code: string }] })).output[0]
+    .code;
+}, 60_000);
+
+afterAll(() => browser?.close());
+
+it.each([
+  { gsap: "hold", placement: "px", rotation: 0 },
+  { gsap: "tween", placement: "px", rotation: 0 },
+  { gsap: "tween", placement: "xpercent", rotation: 30 },
+])("an undone crop leaves a $gsap $placement r$rotation layer 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 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);
+  page.on("request", (request) =>
+    request.url().endsWith("/gsap.min.js")
+      ? request.respond({ body: readFileSync(require.resolve("gsap/dist/gsap.min.js"), "utf8") })
+      : request.continue(),
+  );
+  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) => {
+      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, () => {});
+    },
+    { "index.html": { previous, restored } },
+    CROP,
+  );
+
+  expect(outcome).toBe("soft");
+  expect(await box()).toEqual(before);
+  await page.close();
+});

package/src/utils/gsapUndoRestore.test.ts

@@ -1,7 +1,14 @@
 // @vitest-environment happy-dom
 
 import { describe, it, expect, vi } from "vitest";
-import { applyUndoRestoreToPreview, diffSoftReloadableRestore } from "./gsapUndoRestore";
+import {
+  applyUndoRestoreToPreview,
+  diffSoftReloadableRestore,
+  showRestoreInPlace,
+} from "./gsapUndoRestore";
+import { applyPatch } from "./sourcePatcher";
+import { beginStudioManualEditGesture } from "../components/editor/manualEdits";
+import { writePlainMove, writeTranslatePx } from "../components/editor/plainTranslate";
 
 // ── Bug 2: undo/redo restore soft-apply ──────────────────────────────────────
 
@@ -281,6 +288,25 @@ describe("applyUndoRestoreToPreview", () => {
     );
   });
 
+  it("full-reloads a style restore on a GSAP-parsed element when the file has two scripts", () => {
+    const scripts = [
+      `<script>window.__timelines["root"]=gsap.timeline().to("#a",{x:1});</script>`,
+      `<script>window.__timelines["captions"]=gsap.timeline().to("#a",{y:1});</script>`,
+    ].join("");
+    const { iframe, doc } = buildLiveIframe(`<div id="a" style="z-index: 8">t</div>${scripts}`);
+    Object.assign(doc.getElementById("a")!, { _gsap: {} });
+    const reloadPreview = vi.fn();
+    const files = {
+      [ROOT]: {
+        previous: wrap(`<div id="a" style="z-index: 8">t</div>${scripts}`),
+        restored: wrap(`<div id="a" style="z-index: 3">t</div>${scripts}`),
+      },
+    };
+
+    expect(applyUndoRestoreToPreview(iframe, ROOT, files, 3, reloadPreview)).toBe("full");
+    expect(reloadPreview).toHaveBeenCalledTimes(1);
+  });
+
   it("full-reloads a multi-file restore", () => {
     const { iframe } = buildLiveIframe(`<div id="a">t</div>`);
     const reloadPreview = vi.fn();
@@ -420,3 +446,121 @@ describe("applyUndoRestoreToPreview", () => {
     expect(reloadPreview).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("an undo that lands while the layer is being dragged", () => {
+  const ROOT = "index.html";
+  const undone = `<div id="a" style="width: 120px; translate: 90px 60px" data-start="2" data-hf-studio-original-inline-translate="">t</div>`;
+  const restored = wrap(`<div id="a" style="width: 100px" data-start="1">t</div>`);
+  const files = { [ROOT]: { previous: wrap(undone), restored } };
+  const saveDrop = (el: HTMLElement, file: string) =>
+    writePlainMove(el, { x: 20, y: 110 }).reduce((html, op) => applyPatch(html, "a", op), file);
+
+  function dragging(drag: boolean) {
+    const { iframe, doc } = buildLiveIframe(undone);
+    const el = doc.getElementById("a")!;
+    if (drag) beginStudioManualEditGesture(el, "move");
+    if (drag) writeTranslatePx(el, { x: 70, y: 110 });
+    else el.style.setProperty("opacity", "0.5");
+    applyUndoRestoreToPreview(iframe, ROOT, files, 3, vi.fn());
+    return el;
+  }
+
+  it("keeps the translate the drag is drawing and reverts the rest", () => {
+    const el = dragging(true);
+
+    expect(el.style.getPropertyValue("translate")).toBe("70px 110px");
+    expect(el.style.getPropertyValue("width")).toBe("100px");
+    expect(el.getAttribute("data-start")).toBe("1");
+    expect(el.hasAttribute("data-hf-studio-manual-edit-gesture")).toBe(true);
+  });
+
+  it("saves the drop onto the undone file, the same bytes as dragging the undone layer", () => {
+    const el = dragging(true);
+    const fresh = new DOMParser().parseFromString(restored, "text/html").getElementById("a")!;
+
+    const saved = saveDrop(el, restored);
+
+    expect(saved).toBe(saveDrop(fresh, restored));
+    expect(saved).toContain("width: 100px; translate: 20px 110px");
+    expect(saved).not.toContain("120px");
+  });
+
+  it("keeps the box where it is when the press has not moved it yet", () => {
+    const { iframe, doc } = buildLiveIframe(undone);
+    const el = doc.getElementById("a")!;
+    beginStudioManualEditGesture(el, "move");
+
+    applyUndoRestoreToPreview(iframe, ROOT, files, 3, vi.fn());
+
+    expect(el.style.getPropertyValue("translate")).toBe("90px 60px");
+    expect(el.style.getPropertyValue("width")).toBe("100px");
+  });
+
+  it("reverts the translate under a gesture that draws nothing, such as a text edit", () => {
+    const { iframe, doc } = buildLiveIframe(undone);
+    const el = doc.getElementById("a")!;
+    beginStudioManualEditGesture(el, "edit");
+
+    applyUndoRestoreToPreview(iframe, ROOT, files, 3, vi.fn());
+
+    expect(el.style.getPropertyValue("translate")).toBe("");
+    expect(el.hasAttribute("data-hf-studio-manual-edit-gesture")).toBe(true);
+  });
+
+  it("keeps the drag's translate when the undo is shown in place", () => {
+    const { iframe, doc } = buildLiveIframe(undone);
+    const el = doc.getElementById("a")!;
+    beginStudioManualEditGesture(el, "move");
+    writeTranslatePx(el, { x: 70, y: 110 });
+
+    expect(showRestoreInPlace(iframe, ROOT, files, 3)).not.toBeNull();
+
+    expect(el.style.getPropertyValue("translate")).toBe("70px 110px");
+    expect(el.style.getPropertyValue("width")).toBe("100px");
+  });
+
+  it("keeps a drag that started after the undo was shown when the undo is put back", () => {
+    const { iframe, doc } = buildLiveIframe(undone);
+    const el = doc.getElementById("a")!;
+    const putBack = showRestoreInPlace(iframe, ROOT, files, 3)!;
+    beginStudioManualEditGesture(el, "move");
+    writeTranslatePx(el, { x: 70, y: 110 });
+
+    putBack(3);
+
+    expect(el.style.getPropertyValue("translate")).toBe("70px 110px");
+    expect(el.style.getPropertyValue("width")).toBe("120px");
+  });
+
+  it("keeps the drag's translate when the undo re-runs a GSAP script", () => {
+    const script = (extra: string) =>
+      `<script>window.__timelines["root"]=gsap.timeline();${extra}</script>`;
+    const layer = `<div id="a" data-hf-studio-path-offset="true" style="translate: 40px 30px">t</div>`;
+    const { iframe, contentWindow, doc } = buildLiveIframe(
+      `${layer}${script("tl.set('#b',{x:1});")}`,
+    );
+    Object.assign(contentWindow.gsap, { set: () => {} });
+    const el = doc.getElementById("a")!;
+    beginStudioManualEditGesture(el, "move");
+    writeTranslatePx(el, { x: 70, y: 110 });
+    const scripted = {
+      [ROOT]: {
+        previous: wrap(`<div id="a">t</div>${script("tl.set('#b',{x:1});")}`),
+        restored: wrap(`<div id="a">t</div>${script("")}`),
+      },
+    };
+
+    expect(applyUndoRestoreToPreview(iframe, ROOT, scripted, 3, vi.fn())).toBe("soft");
+
+    expect(el.style.getPropertyValue("translate")).toBe("70px 110px");
+  });
+
+  it("restores a layer no gesture is drawing exactly as before", () => {
+    const el = dragging(false);
+    const want = new DOMParser().parseFromString(restored, "text/html").getElementById("a")!;
+
+    expect(el.getAttributeNames().map((n) => [n, el.getAttribute(n)])).toEqual(
+      want.getAttributeNames().map((n) => [n, want.getAttribute(n)]),
+    );
+  });
+});