@hyperframes/studio 0.8.79 → 0.8.81

package/src/hooks/timelineElementFxAttribute.ts

@@ -7,18 +7,25 @@
  * shared core `setAudioGroupAttribute` also uses.
  */
 
-import { useCallback, useRef } from "react";
+import { useCallback } from "react";
 import type { TimelineElement } from "../player";
 import {
   buildPatchTarget,
   findTimelineElementInIframe,
   persistElementAttribute,
+  readSavedAttribute,
 } from "./timelineEditingHelpers";
+import { useLiveLanes, type LiveLaneRestore, type LiveLaneSource } from "./liveLanes";
 import type {
   MutableRef,
   UseTimelineElementVisibilityEditingInput,
 } from "./timelineTrackVisibility";
-import { projectForTimelineSave, type TimelineEditOutcome } from "./timelineEditPermission";
+import {
+  failedTimelineSave,
+  projectForTimelineSave,
+  type TimelineEditOutcome,
+} from "./timelineEditPermission";
+import { syncStoredElementAttribute } from "../player/lib/automationStoreSync";
 
 function patchLiveElementAttribute(
   iframe: HTMLIFrameElement | null,
@@ -41,6 +48,22 @@ function elementAttributeLiveKey(
   return `${element.sourceFile || activeCompPath || "index.html"}\0${element.key ?? element.domId ?? element.id}\0${attr}`;
 }
 
+function elementSaveTarget(element: TimelineElement, activeCompPath: string | null) {
+  return {
+    targetPath: element.sourceFile || activeCompPath || "index.html",
+    patchTarget: buildPatchTarget(element),
+  };
+}
+
+function elementLiveSource(
+  element: TimelineElement,
+  activeCompPath: string | null,
+  attr: string,
+): LiveLaneSource {
+  const { targetPath, patchTarget } = elementSaveTarget(element, activeCompPath);
+  return { path: targetPath, target: patchTarget, attr };
+}
+
 interface SetElementAttributeInput {
   projectId: string;
   activeCompPath: string | null;
@@ -48,7 +71,8 @@ interface SetElementAttributeInput {
   attr: string;
   value: string | null;
   label: string;
-  previewIframe: HTMLIFrameElement | null;
+  patchLive: (value: string | null) => void;
+  onFileRead: (value: string | null) => void;
   writeProjectFile: (path: string, content: string) => Promise<void>;
   recordEdit: Parameters<typeof persistElementAttribute>[0]["recordEdit"];
   pendingTimelineEditPathRef: MutableRef<Set<string>>;
@@ -61,13 +85,13 @@ async function setElementAttribute({
   attr,
   value,
   label,
-  previewIframe,
+  patchLive,
+  onFileRead,
   writeProjectFile,
   recordEdit,
   pendingTimelineEditPathRef,
 }: SetElementAttributeInput): Promise<string[] | null> {
-  const targetPath = element.sourceFile || activeCompPath || "index.html";
-  const patchTarget = buildPatchTarget(element);
+  const { targetPath, patchTarget } = elementSaveTarget(element, activeCompPath);
   if (!patchTarget) return null;
 
   return persistElementAttribute({
@@ -80,7 +104,8 @@ async function setElementAttribute({
     writeProjectFile,
     recordEdit,
     pendingTimelineEditPathRef,
-    patchLive: (v) => patchLiveElementAttribute(previewIframe, element, attr, v, activeCompPath),
+    patchLive,
+    onFileRead,
   });
 }
 
@@ -102,33 +127,46 @@ export function useSetElementAttribute({
     label: string,
   ) => Promise<TimelineEditOutcome>;
   revertLive: (element: TimelineElement, attr: string) => void;
+  restoreLive: (restore: LiveLaneRestore) => void;
 } {
-  const liveBeforeRef = useRef(new Map<string, string | null>());
+  const liveLanes = useLiveLanes(projectIdRef, activeCompPath);
   const setLive = useCallback(
     (element: TimelineElement, attr: string, value: string | null) => {
       const key = elementAttributeLiveKey(element, activeCompPath, attr);
       const target = findTimelineElementInIframe(previewIframeRef.current, element, activeCompPath);
-      if (!liveBeforeRef.current.has(key)) {
-        liveBeforeRef.current.set(key, target?.getAttribute(attr) ?? null);
-      }
+      liveLanes.preview(
+        key,
+        () => target?.getAttribute(attr) ?? null,
+        elementLiveSource(element, activeCompPath, attr),
+      );
       patchLiveElementAttribute(previewIframeRef.current, element, attr, value, activeCompPath);
     },
+    [liveLanes, previewIframeRef, activeCompPath],
+  );
+  const laneApply = useCallback(
+    (element: TimelineElement, attr: string) => ({
+      preview: (value: string | null) =>
+        patchLiveElementAttribute(previewIframeRef.current, element, attr, value, activeCompPath),
+      store: (value: string | null) => syncStoredElementAttribute(element, attr, value),
+    }),
     [previewIframeRef, activeCompPath],
   );
+  const claimLive = useCallback(
+    (element: TimelineElement, attr: string) =>
+      liveLanes.claim(
+        elementAttributeLiveKey(element, activeCompPath, attr),
+        laneApply(element, attr),
+        elementLiveSource(element, activeCompPath, attr),
+      ),
+    [liveLanes, laneApply, activeCompPath],
+  );
   const revertLive = useCallback(
-    (element: TimelineElement, attr: string) => {
-      const key = elementAttributeLiveKey(element, activeCompPath, attr);
-      if (!liveBeforeRef.current.has(key)) return;
-      patchLiveElementAttribute(
-        previewIframeRef.current,
-        element,
-        attr,
-        liveBeforeRef.current.get(key) ?? null,
-        activeCompPath,
-      );
-      liveBeforeRef.current.delete(key);
-    },
-    [previewIframeRef, activeCompPath],
+    (element: TimelineElement, attr: string) =>
+      liveLanes.revert(
+        elementAttributeLiveKey(element, activeCompPath, attr),
+        laneApply(element, attr),
+      ),
+    [liveLanes, laneApply, activeCompPath],
   );
   const setQuiet = useCallback(
     async (
@@ -137,9 +175,17 @@ export function useSetElementAttribute({
       value: string | null,
       label: string,
     ): Promise<TimelineEditOutcome> => {
-      const pid = projectForTimelineSave(isRecordingRef?.current, projectIdRef.current, showToast);
-      if (typeof pid !== "string") return pid;
-      const liveKey = elementAttributeLiveKey(element, activeCompPath, attr);
+      const project = projectIdRef.current;
+      const pid = projectForTimelineSave(isRecordingRef?.current, project, showToast);
+      const live = claimLive(element, attr);
+      const unsaved = async (outcome: TimelineEditOutcome): Promise<TimelineEditOutcome> => {
+        const { targetPath, patchTarget } = elementSaveTarget(element, activeCompPath);
+        live.settle(
+          await readSavedAttribute(project, targetPath, patchTarget, attr, writeProjectFile),
+        );
+        return outcome;
+      };
+      if (typeof pid !== "string") return unsaved(pid);
       try {
         const written = await setElementAttribute({
           projectId: pid,
@@ -148,25 +194,25 @@ export function useSetElementAttribute({
           attr,
           value,
           label,
-          previewIframe: previewIframeRef.current,
+          patchLive: live.preview,
+          onFileRead: live.read,
           writeProjectFile,
           recordEdit,
           pendingTimelineEditPathRef,
         });
-        liveBeforeRef.current.delete(liveKey);
-        if (written) return { status: "saved" };
-        return { status: "failed", reason: "This clip has no id to save it by" };
+        if (!written)
+          return unsaved(failedTimelineSave("This clip has no id to save it by", showToast));
+        live.settle(value);
+        return { status: "saved" };
       } catch (error) {
         console.error("[Timeline] Failed to set element attribute", error);
         const message = error instanceof Error ? error.message : "Failed to update effect";
-        showToast(message);
-        liveBeforeRef.current.delete(liveKey);
-        return { status: "failed", reason: message };
+        return unsaved(failedTimelineSave(message, showToast));
       }
     },
     [
+      claimLive,
       activeCompPath,
-      previewIframeRef,
       writeProjectFile,
       recordEdit,
       pendingTimelineEditPathRef,
@@ -175,5 +221,5 @@ export function useSetElementAttribute({
       projectIdRef,
     ],
   );
-  return { setLive, setQuiet, revertLive };
+  return { setLive, setQuiet, revertLive, restoreLive: liveLanes.restore };
 }

package/src/hooks/useAppHotkeys.ts

@@ -93,7 +93,7 @@ interface UseAppHotkeysParams {
   handleDuplicate: () => Promise<boolean>;
   onResetKeyframes: () => boolean;
   onDeleteSelectedKeyframes: () => void;
-  onAfterUndoRedo?: () => void;
+  onAfterUndoRedo?: UseEditHistoryActionsOptions["onAfterUndoRedo"];
   onToggleRecording?: () => void;
   /** Group the current multi-selection into a data-hf-group wrapper (⌘G). */
   onGroupSelection?: () => void;

package/src/hooks/useApplyColorGradingScope.test.tsx

@@ -0,0 +1,53 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+import { useApplyColorGradingScope } from "./useApplyColorGradingScope";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const readProjectFile = vi.fn(async (_path: string) => "<html><body></body></html>");
+
+vi.mock("../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({
+    projectId: "demo",
+    activeCompPath: "index.html",
+    showToast: vi.fn(),
+    waitForPendingDomEditSaves: async () => {},
+  }),
+}));
+vi.mock("../contexts/DomEditContext", () => ({
+  useDomEditContext: () => ({ domEditSelection: null }),
+}));
+vi.mock("../contexts/FileManagerContext", () => ({
+  useFileManagerContext: () => ({
+    readProjectFile,
+    writeProjectFile: vi.fn(),
+    fileTree: ["index.html", "scene.html", ".hyperframes/preview/4884df6e.html"],
+    compositions: ["index.html", "scene.html"],
+  }),
+}));
+
+it("grades the project's compositions, not Studio's generated preview documents", async () => {
+  let apply: ReturnType<typeof useApplyColorGradingScope> | null = null;
+  function Probe() {
+    apply = useApplyColorGradingScope(
+      vi.fn(async () => {}),
+      vi.fn(),
+    );
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  act(() => root.render(<Probe />));
+
+  await act(async () => {
+    await apply!("project", null);
+  });
+
+  expect(readProjectFile.mock.calls.map(([path]) => path).sort()).toEqual([
+    "index.html",
+    "scene.html",
+  ]);
+  act(() => root.unmount());
+});

package/src/hooks/useApplyColorGradingScope.ts

@@ -0,0 +1,54 @@
+import { useCallback } from "react";
+import { useStudioShellContext } from "../contexts/StudioContext";
+import { useDomEditContext } from "../contexts/DomEditContext";
+import { useFileManagerContext } from "../contexts/FileManagerContext";
+import {
+  applyColorGradingScopeUpdate,
+  EMPTY_COLOR_GRADING_SCOPE_RESULT,
+  type ColorGradingScope,
+} from "../components/studioColorGradingScope";
+import type { StudioRightPanelsProps } from "../components/StudioRightPanels.types";
+
+export function useApplyColorGradingScope(
+  recordEdit: StudioRightPanelsProps["recordEdit"],
+  reloadPreview: StudioRightPanelsProps["reloadPreview"],
+) {
+  const { projectId, activeCompPath, showToast, waitForPendingDomEditSaves } =
+    useStudioShellContext();
+  const { domEditSelection } = useDomEditContext();
+  const { readProjectFile, writeProjectFile, compositions } = useFileManagerContext();
+  return useCallback(
+    async (scope: ColorGradingScope, value: string | null) =>
+      applyColorGradingScopeUpdate({
+        scope,
+        value,
+        selectedSourceFile: domEditSelection?.sourceFile || activeCompPath || "index.html",
+        compositionPaths: compositions,
+        projectId,
+        waitForPendingDomEditSaves,
+        readProjectFile,
+        writeProjectFile,
+        recordEdit,
+        reloadPreview,
+        showToast,
+      }).catch((error) => {
+        showToast(
+          `Couldn't apply color grading: ${error instanceof Error ? error.message : String(error)}`,
+          "error",
+        );
+        return EMPTY_COLOR_GRADING_SCOPE_RESULT;
+      }),
+    [
+      activeCompPath,
+      compositions,
+      domEditSelection?.sourceFile,
+      projectId,
+      readProjectFile,
+      recordEdit,
+      reloadPreview,
+      showToast,
+      waitForPendingDomEditSaves,
+      writeProjectFile,
+    ],
+  );
+}

package/src/hooks/useAutomationSelectionKeyboard.test.tsx

@@ -77,7 +77,7 @@ describe("useAutomationSelectionKeyboard", () => {
   });
 
   const setup = (binding: Partial<AutomationLaneBinding>) => {
-    const onCommit = vi.fn();
+    const onCommit = vi.fn().mockResolvedValue(undefined);
     const automation = {
       version: 1,
       lanes: [
@@ -102,7 +102,6 @@ describe("useAutomationSelectionKeyboard", () => {
         onCommit,
         onSelect: vi.fn(),
         readOnly: false,
-        commitTargetKey: "bgm",
         selection: null,
         onRangeSelect: vi.fn(),
         onRangeClear: vi.fn(),
@@ -230,7 +229,7 @@ describe("useAutomationSelectionKeyboard", () => {
     expect(entry?.points.map((p) => p.t)).toEqual([0, 2]);
   });
 
-  it("Cmd+V with no selection pastes at the playhead and selects the pasted span", () => {
+  it("Cmd+V with no selection pastes at the playhead and selects the pasted span", async () => {
     clearAutomationClipboard();
     // Duration wide enough that the playhead (5s) is not clamped down by the
     // 0..duration-span bound — this is a paste-at-playhead test, not a
@@ -255,6 +254,7 @@ describe("useAutomationSelectionKeyboard", () => {
     expect(times).toContain(7); // + clipboard span 2
 
     // Pasting again immediately should land right after the first paste.
+    await act(async () => {});
     expect(usePlayerStore.getState().automationSelection).toEqual({
       elementKey: "bgm",
       target: "volume",
@@ -268,7 +268,124 @@ describe("useAutomationSelectionKeyboard", () => {
     });
   });
 
-  it("chains a second Cmd+V after the first instead of overwriting it", () => {
+  it("marks nothing when the paste's save is refused, even for two quick presses", async () => {
+    clearAutomationClipboard();
+    usePlayerStore.setState({
+      elements: [{ ...bgmElement, duration: 10 }],
+      selectedElementId: "bgm",
+    });
+    const original = wholeAxis({ elementKey: "bgm", target: "volume", t0: 2, t1: 4 });
+    usePlayerStore.getState().setAutomationSelection(original);
+    const onCommit = vi.fn().mockResolvedValue({ status: "refused", reason: "Locked" });
+    setup({ onCommit });
+    combo("c");
+    combo("v");
+    combo("v");
+    await act(async () => {});
+    expect(usePlayerStore.getState().automationSelection).toEqual(original);
+    combo("v");
+    const again = (onCommit.mock.calls.at(-1)?.[0]?.lanes?.[0]?.points ?? []).map(
+      (p: { t: number }) => p.t,
+    );
+    expect(again).toContain(2);
+    expect(again).not.toContain(6);
+  });
+
+  it.each([{ status: "saved" as const }, { status: "refused" as const, reason: "Locked" }])(
+    "keeps a selection drawn while a paste was saving ($status)",
+    async (outcome) => {
+      clearAutomationClipboard();
+      usePlayerStore.setState({
+        elements: [{ ...bgmElement, duration: 10 }],
+        selectedElementId: "bgm",
+      });
+      usePlayerStore
+        .getState()
+        .setAutomationSelection(wholeAxis({ elementKey: "bgm", target: "volume", t0: 2, t1: 4 }));
+      let land = () => {};
+      const onCommit = vi.fn(
+        () =>
+          new Promise<typeof outcome>((resolve) => {
+            land = () => resolve(outcome);
+          }),
+      );
+      setup({ onCommit });
+      combo("c");
+      combo("v");
+      const drawn = wholeAxis({ elementKey: "bgm", target: "volume", t0: 6, t1: 8 });
+      usePlayerStore.getState().setAutomationSelection(drawn);
+      land();
+      await act(async () => {});
+      expect(usePlayerStore.getState().automationSelection).toEqual(drawn);
+    },
+  );
+
+  it.each(["in order", "reversed"])(
+    "marks the latest paste when pastes on two clips resolve %s",
+    async (order) => {
+      clearAutomationClipboard();
+      usePlayerStore.setState({
+        elements: [
+          { ...bgmElement, duration: 10 },
+          { ...bgmElement, id: "vo", key: "vo", duration: 10 },
+        ],
+        selectedElementId: "bgm",
+        currentTime: 1,
+      });
+      usePlayerStore
+        .getState()
+        .setAutomationSelection(wholeAxis({ elementKey: "bgm", target: "volume", t0: 2, t1: 4 }));
+      const lands: Array<() => void> = [];
+      const onCommit = vi.fn(
+        () =>
+          new Promise<{ status: "saved" }>((resolve) =>
+            lands.push(() => resolve({ status: "saved" })),
+          ),
+      );
+      setup({ onCommit });
+      combo("c");
+      usePlayerStore.getState().clearAutomationSelection();
+      combo("v");
+      usePlayerStore.setState({ selectedElementId: "vo" });
+      combo("v");
+      const order_ = order === "in order" ? [0, 1] : [1, 0];
+      for (const i of order_) lands[i]?.();
+      await act(async () => {});
+      expect(usePlayerStore.getState().automationSelection?.elementKey).toBe("vo");
+    },
+  );
+
+  it("does not mark a paste whose clip was left before it landed", async () => {
+    clearAutomationClipboard();
+    usePlayerStore.setState({
+      elements: [
+        { ...bgmElement, duration: 10 },
+        { ...bgmElement, id: "vo", key: "vo", duration: 10 },
+      ],
+      selectedElementId: "bgm",
+      currentTime: 1,
+    });
+    usePlayerStore
+      .getState()
+      .setAutomationSelection(wholeAxis({ elementKey: "bgm", target: "volume", t0: 2, t1: 4 }));
+    let land = () => {};
+    const onCommit = vi.fn(
+      () =>
+        new Promise<{ status: "saved" }>((resolve) => {
+          land = () => resolve({ status: "saved" });
+        }),
+    );
+    setup({ onCommit });
+    combo("c");
+    usePlayerStore.getState().clearAutomationSelection();
+    combo("v");
+    usePlayerStore.setState({ selectedElementId: "vo" });
+    land();
+    await act(async () => {});
+    expect(usePlayerStore.getState().automationSelection).toBeNull();
+  });
+
+  it("chains a second Cmd+V after the first instead of overwriting it", async () => {
     // The regression this pins: paste leaves its own span selected, so anchoring
     // at sel.t0 unconditionally made every later press recompute the same atT.
     clearAutomationClipboard();
@@ -288,6 +405,7 @@ describe("useAutomationSelectionKeyboard", () => {
     );
     expect(first).toContain(2);
     expect(first).toContain(4);
+    await act(async () => {});
 
     combo("v");
     const second = (onCommit.mock.calls.at(-1)?.[0]?.lanes?.[0]?.points ?? []).map(
@@ -295,6 +413,7 @@ describe("useAutomationSelectionKeyboard", () => {
     );
     expect(second).toContain(4);
     expect(second).toContain(6);
+    await act(async () => {});
     expect(usePlayerStore.getState().automationSelection).toEqual({
       elementKey: "bgm",
       target: "volume",
@@ -308,7 +427,7 @@ describe("useAutomationSelectionKeyboard", () => {
     });
   });
 
-  it("Cmd+V at a selection near the clip's end clamps the paste inside its duration", () => {
+  it("Cmd+V at a selection near the clip's end clamps the paste inside its duration", async () => {
     // The playhead branch already clamps to duration - span; the
     // selection-start branch didn't, so pasting a 2s clip at a selection
     // sitting at t0=5.5 on a 6s clip used to write points out to t=7.5 —
@@ -334,6 +453,7 @@ describe("useAutomationSelectionKeyboard", () => {
       expect(t).toBeLessThanOrEqual(bgmElement.duration);
     }
     // Clamped to duration (6) - span (2) = 4, not the unclamped 5.5.
+    await act(async () => {});
     expect(usePlayerStore.getState().automationSelection).toEqual({
       elementKey: "bgm",
       target: "volume",
@@ -347,22 +467,6 @@ describe("useAutomationSelectionKeyboard", () => {
     });
   });
 
-  it("refuses to paste when the dom-edit layer would write to a different clip", () => {
-    // selectedElementId says "bgm" but the commit channel is still on the
-    // previously selected clip — writing here would serialize bgm's automation
-    // onto that other clip and leave bgm untouched.
-    clearAutomationClipboard();
-    copyRange(null, { target: "volume", points: [{ t: 0, v: 0.5 }] }, VOLUME_RANGE, 0, 2);
-    usePlayerStore.setState({ elements: [bgmElement], selectedElementId: "bgm" });
-    usePlayerStore
-      .getState()
-      .setAutomationSelection(wholeAxis({ elementKey: "bgm", target: "volume", t0: 2, t1: 4 }));
-    const { onCommit } = setup({ commitTargetKey: "some-other-clip" });
-    const e = combo("v");
-    expect(e.defaultPrevented).toBe(false);
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-
   it("does not paste from a playhead outside the clip", () => {
     // No selection on this clip, and the playhead is past its end — there is no
     // anchor. This used to collapse to the clip's own t=0.

package/src/hooks/useAutomationSelectionKeyboard.ts

@@ -108,7 +108,7 @@ function resolveDeleteWrite(
   state: PlayerState,
   lanes: UseAutomationLanesResult,
   sel: AutomationSelection,
-): { onCommit(next: HfAutomation): void; next: HfAutomation } | null {
+): { onCommit: AutomationLaneBinding["onCommit"]; next: HfAutomation } | null {
   const ctx = resolveSelectionContext(state, lanes, sel);
   if (!ctx) return null;
   const points = ctx.lane.points.filter((p) => !pointInSelection(p, sel));
@@ -139,18 +139,7 @@ function pasteTargetName(
 
 /**
  * Where Cmd+V lands, or null when nothing is selected, the clip's lanes are
- * read-only, it has no automation lane to fall back to, or the dom-edit layer
- * would write the result to a DIFFERENT clip.
- *
- * That last guard is the one with teeth. `binding.onCommit` persists through
- * handleDomAttributeQuietCommit, which targets whatever the dom-edit layer
- * currently has selected — not the element `bind()` was handed (see the
- * doc-comment on `onSelect` in useAutomationLanes). Selecting a clip in the
- * timeline sets `selectedElementId` synchronously but resolves the dom-edit
- * selection asynchronously, so clicking clip B and immediately pressing Cmd+V
- * would serialize B's automation onto A. Every other lane path is a pointer
- * gesture on the lane itself, which cannot run before the selection lands;
- * paste is the only one that can, so it refuses rather than write blind.
+ * read-only, or it has no automation lane to fall back to.
  */
 function resolvePasteTarget(
   state: PlayerState,
@@ -169,7 +158,6 @@ function resolvePasteTarget(
   const elementKey = elementKeyOf(element);
   const binding = lanes.bind(element, true);
   if (binding.readOnly) return null;
-  if (binding.commitTargetKey !== elementKey) return null;
   const target = pasteTargetName(binding, elementKey, sel);
   if (!target) return null;
   const range = resolveAutomationRange(target, binding.chain ?? undefined);
@@ -225,6 +213,8 @@ function pasteAnchor(
   return clampNumber(raw, 0, element.duration - span);
 }
 
+let latestPaste = 0;
+
 /**
  * Cmd/Ctrl+V: paste the clipboard onto the selected clip's lane, at the active
  * selection or the playhead. Returns false (untouched event) when the chord
@@ -252,12 +242,10 @@ function handlePaste(
 
   e.preventDefault();
   e.stopImmediatePropagation();
-  paste.binding.onCommit(withLane(paste.binding.automation, { target: paste.target, points }));
-  // Select the pasted span — the only feedback that it landed — and mark it, so
-  // an immediate second Cmd+V recognises this selection as the paste's own and
-  // chains right after it instead of overwriting it.
-  // Full-height box over the pasted span: everything that landed is selected, so
-  // Delete straight after a paste undoes it in one press.
+  const saved = paste.binding.onCommit(
+    withLane(paste.binding.automation, { target: paste.target, points }),
+  );
+  const seq = ++latestPaste;
   const mark = {
     elementKey: paste.elementKey,
     target: paste.target,
@@ -266,8 +254,17 @@ function handlePaste(
     v0: paste.range.min,
     v1: paste.range.max,
   };
-  state.setAutomationSelection(mark);
-  markLastPaste(mark);
+  // Once the latest paste lands, and only over the selection it was pasted at, select
+  // and mark its full-height span: the feedback that it landed, what a second Cmd+V
+  // chains after, and what Delete takes back in one press.
+  void saved.then((outcome) => {
+    if (outcome && outcome.status !== "saved") return;
+    const current = usePlayerStore.getState();
+    const moved = current.selectedElementId !== state.selectedElementId;
+    if (seq !== latestPaste || moved || current.automationSelection !== sel) return;
+    current.setAutomationSelection(mark);
+    markLastPaste(mark);
+  });
   return true;
 }
 
@@ -300,8 +297,7 @@ function handleCopy(
  *
  * Store and clipboard only, no lane binding, so the dispatcher can call it
  * without holding the binding factory. That leaves one accepted residual: the
- * predicate cannot see a read-only lane, an unresolvable target, or the
- * dom-edit target mismatch `resolvePasteTarget` guards, so in those rare cases
+ * predicate cannot see a read-only lane or an unresolvable target, so in those rare cases
  * the keystroke is a no-op instead of falling through to clip copy/paste. A
  * dead key beats today's double write.
  */
@@ -333,7 +329,7 @@ function handleDelete(
   if (!write) return false;
   e.preventDefault();
   e.stopImmediatePropagation();
-  write.onCommit(write.next);
+  void write.onCommit(write.next);
   return true;
 }