@hyperframes/studio 0.8.78 → 0.8.80

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;
 }
 

package/src/hooks/useBlockHandlers.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { mountReactHarness } from "./domSelectionTestHarness";
+import { useBlockHandlers, type UseBlockHandlersResult } from "./useBlockHandlers";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("../utils/blockInstaller", () => ({
+  addBlockToProject: async (opts: { showToast: (message: string) => void }) => {
+    opts.showToast("Installing catalog items needs hyperframes preview");
+    return null;
+  },
+}));
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("useBlockHandlers", () => {
+  it("leaves only the error toast when an install fails", async () => {
+    const events: string[] = [];
+    let nextId = 0;
+    const showToast = (message: string) => {
+      events.push(`show ${message}`);
+      return ++nextId;
+    };
+    const dismissToast = (id: number) => events.push(`dismiss ${id}`);
+    let handlers: UseBlockHandlersResult | undefined;
+    function Harness() {
+      handlers = useBlockHandlers({
+        projectId: "demo",
+        blockCtxDeps: {
+          activeCompPath: null,
+          timelineElements: [],
+          readProjectFile: async () => "",
+          writeProjectFile: async () => {},
+          recordEdit: async () => {},
+          refreshFileTree: async () => {},
+          reloadPreview: () => {},
+          showToast,
+          dismissToast,
+        },
+        previewIframeRef: { current: null },
+        setRightCollapsed: () => {},
+        setRightPanelTab: () => {},
+      });
+      return null;
+    }
+    const root = mountReactHarness(<Harness />);
+
+    await act(async () => {
+      handlers!.handleAddBlock("x-post");
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(events).toEqual([
+      "show Adding x-post…",
+      "show Installing catalog items needs hyperframes preview",
+      "dismiss 1",
+    ]);
+    act(() => root.unmount());
+  });
+});

package/src/hooks/useBlockHandlers.ts

@@ -23,7 +23,8 @@ interface BlockCtxDeps {
   }) => Promise<void>;
   refreshFileTree: () => Promise<void>;
   reloadPreview: () => void;
-  showToast: (message: string, tone?: "error" | "info") => void;
+  showToast: (message: string, tone?: "error" | "info") => number;
+  dismissToast: (id: number) => void;
 }
 
 interface UseBlockHandlersParams {
@@ -87,21 +88,23 @@ export function useBlockHandlers({
   // Block installs hit the server and end in a full preview reload; without a
   // guard, repeat drops while one is in flight stack duplicate installs.
   const installingBlockRef = useRef(false);
+  const { showToast, dismissToast } = blockCtxDeps;
   const runBlockInstall = useCallback(
     async <T>(blockName: string, install: () => Promise<T>): Promise<T | null> => {
       if (installingBlockRef.current) {
-        blockCtx.showToast("A block is already installing — one moment…", "info");
+        showToast("A block is already installing — one moment…", "info");
         return null;
       }
       installingBlockRef.current = true;
-      blockCtx.showToast(`Adding ${blockName}…`, "info");
+      const progress = showToast(`Adding ${blockName}…`, "info");
       try {
         return await install();
       } finally {
         installingBlockRef.current = false;
+        dismissToast(progress);
       }
     },
-    [blockCtx],
+    [showToast, dismissToast],
   );
 
   const handleAddBlock = useCallback(