@hyperframes/studio 0.8.2 → 0.8.4

package/src/hooks/useAppHotkeys.previewForwarding.test.tsx

@@ -0,0 +1,93 @@
+// @vitest-environment happy-dom
+
+import React, { act, useRef } from "react";
+import type { Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import type { LeftSidebarHandle } from "../components/sidebar/LeftSidebar";
+import { usePlayerStore } from "../player/store/playerStore";
+import { useAppHotkeys } from "./useAppHotkeys";
+import { mountReactHarness } from "./domSelectionTestHarness";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const domDelete = vi.fn(async () => undefined);
+let root: Root | null = null;
+let sync: ((iframe: HTMLIFrameElement | null) => void) | null = null;
+
+function selection(): DomEditSelection {
+  const element = document.createElement("section");
+  element.id = "card";
+  return {
+    element,
+    id: "card",
+    selector: "#card",
+    selectorIndex: 0,
+    sourceFile: "index.html",
+  } as unknown as DomEditSelection;
+}
+
+function Harness() {
+  const selectionRef = useRef<DomEditSelection | null>(selection());
+  const hotkeys = useAppHotkeys({
+    handleTimelineElementsDelete: vi.fn(async () => undefined),
+    handleTimelineElementSplit: vi.fn(async () => undefined),
+    handleDomEditElementDelete: domDelete,
+    domEditSelectionRef: selectionRef,
+    clearDomSelectionRef: useRef<() => void>(() => undefined),
+    editHistory: {
+      undo: vi.fn(async () => ({ ok: false })),
+      redo: vi.fn(async () => ({ ok: false })),
+      state: { undo: [], redo: [] },
+    },
+    readOptionalProjectFile: vi.fn(async () => ""),
+    readProjectFile: vi.fn(async () => ""),
+    writeProjectFile: vi.fn(async () => undefined),
+    domEditSaveTimestampRef: useRef(0),
+    showToast: vi.fn(),
+    syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
+    waitForPendingDomEditSaves: vi.fn(async () => undefined),
+    leftSidebarRef: useRef<LeftSidebarHandle | null>(null),
+    handleCopy: vi.fn(() => false),
+    handlePaste: vi.fn(() => false),
+    handleCut: vi.fn(() => false),
+    onResetKeyframes: vi.fn(() => false),
+    onDeleteSelectedKeyframes: vi.fn(),
+    onAfterUndoRedo: vi.fn(),
+  } as unknown as Parameters<typeof useAppHotkeys>[0]);
+  sync = hotkeys.syncPreviewHotkeys;
+  return null;
+}
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+  usePlayerStore.getState().reset();
+  domDelete.mockClear();
+});
+
+describe("preview iframe hotkey forwarding", () => {
+  it("still delivers Delete after the preview reloads", () => {
+    // A reload keeps the iframe element (no ref callback) and the same
+    // WindowProxy (an identity check sees no change) but replaces the window
+    // holding the listeners. Attaching once left Delete dead inside the canvas
+    // after the first reload — and clicking the canvas is what puts focus there.
+    root = mountReactHarness(<Harness />);
+
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    act(() => sync?.(iframe));
+
+    // The reload: same element, a window that has lost its listeners.
+    act(() => sync?.(iframe));
+
+    const inner = iframe.contentWindow as (Window & typeof globalThis) | null;
+    if (!inner) throw new Error("expected an iframe window");
+    inner.document.body.dispatchEvent(
+      new inner.KeyboardEvent("keydown", { key: "Delete", bubbles: true }),
+    );
+
+    expect(domDelete).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/useAppHotkeys.test.ts

@@ -22,6 +22,7 @@ const bgmElement: TimelineElement = {
 function callbacks() {
   return {
     handleTimelineElementDelete: vi.fn(async () => {}),
+    handleTimelineElementsDelete: vi.fn(async () => {}),
     handleTimelineElementSplit: vi.fn(async () => {}),
     handleDomEditElementDelete: vi.fn(async () => {}),
     handleUndo: vi.fn(async () => {}),
@@ -69,10 +70,90 @@ describe("dispatchPlainKey — Delete arbitration", () => {
     const e = press("Delete");
     dispatchPlainKey(e, "delete", cb);
     // The pre-existing contract, pinned so the new guard cannot widen.
-    expect(cb.handleTimelineElementDelete).toHaveBeenCalledTimes(1);
+    expect(cb.handleTimelineElementsDelete).toHaveBeenCalledTimes(1);
+    expect(cb.handleTimelineElementsDelete).toHaveBeenCalledWith([bgmElement]);
     expect(e.defaultPrevented).toBe(true);
   });
 
+  it("deletes EVERY clip in a marquee selection, not just the first", () => {
+    // The reported bug: select all, press Delete, and one clip disappears while
+    // the rest stay — still drawn as selected. The handler used `elements.find`,
+    // which stops at the first match.
+    const clips = ["a", "b", "c"].map((id) => ({ ...bgmElement, id, key: id }));
+    usePlayerStore.setState({
+      elements: clips,
+      selectedElementId: null,
+      selectedElementIds: new Set(["a", "b", "c"]),
+    });
+
+    const cb = callbacks();
+    const e = press("Delete");
+    dispatchPlainKey(e, "delete", cb);
+
+    expect(cb.handleTimelineElementsDelete).toHaveBeenCalledTimes(1);
+    const [passed] = cb.handleTimelineElementsDelete.mock.calls[0] as [typeof clips];
+    expect(passed.map((c) => c.key)).toEqual(["a", "b", "c"]);
+    expect(e.defaultPrevented).toBe(true);
+  });
+
+  it("hands a canvas selection its whole group instead of the timeline's partial copy", () => {
+    // The reported bug: marquee 73 elements on the canvas, press Delete, and 14
+    // vanish. Only those 14 owned a timeline row, and the timeline mirror drops
+    // every member that does not — so deleting through it left 59 behind, still
+    // drawn as selected.
+    const clips = ["a", "b"].map((id) => ({ ...bgmElement, id, key: id }));
+    usePlayerStore.setState({
+      elements: clips,
+      selectedElementId: null,
+      selectedElementIds: new Set(["a", "b"]),
+    });
+    const domSelection = { selector: ".title", selectorIndex: 0, sourceFile: "index.html" };
+
+    const cb = callbacks();
+    cb.domEditSelectionRef = { current: domSelection } as typeof cb.domEditSelectionRef;
+    const e = press("Delete");
+    dispatchPlainKey(e, "delete", cb);
+
+    expect(cb.handleDomEditElementDelete).toHaveBeenCalledWith(domSelection, {
+      expandGroup: true,
+    });
+    expect(cb.handleTimelineElementsDelete).not.toHaveBeenCalled();
+    expect(e.defaultPrevented).toBe(true);
+  });
+
+  it("asks for the whole group, so Cut can still take just the one it copied", () => {
+    // Expanding inside the delete handler meant every caller got the group.
+    // Cut copies the primary alone, so it put one element on the clipboard and
+    // removed every other member with it; paste brought back one.
+    usePlayerStore.setState({
+      elements: [],
+      selectedElementId: null,
+      selectedElementIds: new Set(),
+    });
+    const domSelection = { selector: ".title", selectorIndex: 0, sourceFile: "index.html" };
+
+    const cb = callbacks();
+    cb.domEditSelectionRef = { current: domSelection } as typeof cb.domEditSelectionRef;
+    dispatchPlainKey(press("Delete"), "delete", cb);
+
+    expect(cb.handleDomEditElementDelete).toHaveBeenCalledWith(domSelection, { expandGroup: true });
+  });
+
+  it("includes the primary selection alongside the marquee set", () => {
+    const clips = ["a", "b"].map((id) => ({ ...bgmElement, id, key: id }));
+    usePlayerStore.setState({
+      elements: clips,
+      selectedElementId: "b",
+      selectedElementIds: new Set(["a"]),
+    });
+
+    const cb = callbacks();
+    dispatchPlainKey(press("Delete"), "delete", cb);
+
+    const [passed] = cb.handleTimelineElementsDelete.mock.calls[0] as [typeof clips];
+    expect(passed.map((c) => c.key).sort()).toEqual(["a", "b"]);
+  });
+
   it("leaves the clip alone when an automation range is active", () => {
     // The bug: this listener is on window/capture so it runs BEFORE
     // useAutomationSelectionKeyboard's document/capture handler. Without the
@@ -82,7 +163,7 @@ describe("dispatchPlainKey — Delete arbitration", () => {
     const cb = callbacks();
     const e = press("Delete");
     dispatchPlainKey(e, "delete", cb);
-    expect(cb.handleTimelineElementDelete).not.toHaveBeenCalled();
+    expect(cb.handleTimelineElementsDelete).not.toHaveBeenCalled();
     // Must NOT be consumed: the automation handler downstream still needs it.
     expect(e.defaultPrevented).toBe(false);
   });
@@ -99,7 +180,7 @@ describe("dispatchPlainKey — Delete arbitration", () => {
     const e = press("Backspace");
     dispatchPlainKey(e, "backspace", cb);
     expect(cb.onResetKeyframes).not.toHaveBeenCalled();
-    expect(cb.handleTimelineElementDelete).not.toHaveBeenCalled();
+    expect(cb.handleTimelineElementsDelete).not.toHaveBeenCalled();
     expect(e.defaultPrevented).toBe(false);
   });
 
@@ -113,7 +194,7 @@ describe("dispatchPlainKey — Delete arbitration", () => {
     const e = press("Delete");
     dispatchPlainKey(e, "delete", cb);
     expect(cb.onDeleteSelectedKeyframes).toHaveBeenCalledTimes(1);
-    expect(cb.handleTimelineElementDelete).not.toHaveBeenCalled();
+    expect(cb.handleTimelineElementsDelete).not.toHaveBeenCalled();
     expect(e.defaultPrevented).toBe(true);
   });
 });

package/src/hooks/useAppHotkeys.textEditing.test.tsx

@@ -11,7 +11,7 @@ import { useAppHotkeys } from "./useAppHotkeys";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
-const timelineDelete = vi.fn(async () => undefined);
+const timelineDeleteMany = vi.fn(async () => undefined);
 const domDelete = vi.fn(async () => undefined);
 const keyframeDelete = vi.fn();
 const textCommits = vi.fn();
@@ -74,7 +74,7 @@ function Harness() {
   const leftSidebarRef = useRef<LeftSidebarHandle | null>(null);
 
   useAppHotkeys({
-    handleTimelineElementDelete: timelineDelete,
+    handleTimelineElementsDelete: timelineDeleteMany,
     handleTimelineElementSplit: vi.fn(async () => undefined),
     handleDomEditElementDelete: domDelete,
     domEditSelectionRef: selectionRef,
@@ -140,7 +140,7 @@ function pressBackspace(target: HTMLElement): KeyboardEvent {
 
 beforeEach(() => {
   vi.useFakeTimers();
-  timelineDelete.mockClear();
+  timelineDeleteMany.mockClear();
   domDelete.mockClear();
   keyframeDelete.mockClear();
   textCommits.mockClear();
@@ -200,7 +200,7 @@ describe("useAppHotkeys text-field ownership", () => {
     expect(document.activeElement).toBe(textarea);
     expect(textarea.selectionStart).toBe(4);
     expect(textarea.selectionEnd).toBe(4);
-    expect(timelineDelete).not.toHaveBeenCalled();
+    expect(timelineDeleteMany).not.toHaveBeenCalled();
     expect(domDelete).not.toHaveBeenCalled();
     expect(keyframeDelete).not.toHaveBeenCalled();
 
@@ -208,8 +208,10 @@ describe("useAppHotkeys text-field ownership", () => {
     const canvasDelete = pressBackspace(canvas);
 
     expect(canvasDelete.defaultPrevented).toBe(true);
-    expect(timelineDelete).toHaveBeenCalledTimes(1);
-    expect(domDelete).not.toHaveBeenCalled();
+    // The canvas holds a selection, so it owns the delete — the timeline's copy
+    // of that selection is derived and drops any member without a timeline row.
+    expect(domDelete).toHaveBeenCalledTimes(1);
+    expect(timelineDeleteMany).not.toHaveBeenCalled();
     expect(keyframeDelete).not.toHaveBeenCalled();
   });
 });

package/src/hooks/useAppHotkeys.ts

@@ -101,9 +101,12 @@ interface EditHistoryHandle {
 }
 
 interface UseAppHotkeysParams {
-  handleTimelineElementDelete: (element: TimelineElement) => Promise<void>;
+  handleTimelineElementsDelete: (elements: TimelineElement[]) => Promise<void>;
   handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void>;
-  handleDomEditElementDelete: (selection: DomEditSelection) => Promise<void>;
+  handleDomEditElementDelete: (
+    selection: DomEditSelection,
+    options?: { expandGroup?: boolean },
+  ) => Promise<void>;
   domEditSelectionRef: React.MutableRefObject<DomEditSelection | null>;
   clearDomSelectionRef: React.MutableRefObject<() => void>;
   editHistory: EditHistoryHandle;
@@ -142,9 +145,12 @@ interface UseAppHotkeysParams {
 // ── Extracted keydown dispatch (pure function, no hooks) ──
 
 interface HotkeyCallbacks {
-  handleTimelineElementDelete: (element: TimelineElement) => Promise<void>;
+  handleTimelineElementsDelete: (elements: TimelineElement[]) => Promise<void>;
   handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void>;
-  handleDomEditElementDelete: (selection: DomEditSelection) => Promise<void>;
+  handleDomEditElementDelete: (
+    selection: DomEditSelection,
+    options?: { expandGroup?: boolean },
+  ) => Promise<void>;
   handleUndo: () => Promise<void>;
   handleRedo: () => Promise<void>;
   handleCopy: () => boolean;
@@ -322,24 +328,29 @@ export function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCa
         return;
       }
     }
-    // Delete acts on the primary selection OR the marquee multi-selection —
-    // the delete handler expands a clip that is part of the multi-selection
-    // into an atomic delete of the whole selection (single undo).
+    // The canvas selection is what the user actually drew a marquee around, so
+    // it owns Delete whenever it holds something. The timeline mirror of that
+    // selection is derived and lossy — a member with no timeline row of its own
+    // is dropped from it — so deleting through the timeline removed the handful
+    // of clips it knew about and left every other selected element behind,
+    // still drawn as selected. The timeline path stays as the fallback for rows
+    // with no canvas node to select (audio, a comp that is not the active one).
+    const domSel = cb.domEditSelectionRef.current;
+    if (domSel) {
+      event.preventDefault();
+      // The whole marquee group, not just the primary the ref holds.
+      void cb.handleDomEditElementDelete(domSel, { expandGroup: true });
+      return;
+    }
+    // Takes the WHOLE selection: `find` returned the first match, so selecting
+    // every clip and pressing Delete removed exactly one of them.
     const { selectedElementId, selectedElementIds, elements } = usePlayerStore.getState();
     const selectionKeys = new Set(selectedElementIds);
     if (selectedElementId) selectionKeys.add(selectedElementId);
-    if (selectionKeys.size > 0) {
-      const el = elements.find((e) => selectionKeys.has(e.key ?? e.id));
-      if (el) {
-        event.preventDefault();
-        void cb.handleTimelineElementDelete(el);
-        return;
-      }
-    }
-    const domSel = cb.domEditSelectionRef.current;
-    if (domSel) {
+    const selected = elements.filter((e) => selectionKeys.has(e.key ?? e.id));
+    if (selected.length > 0) {
       event.preventDefault();
-      void cb.handleDomEditElementDelete(domSel);
+      void cb.handleTimelineElementsDelete(selected);
     }
     return;
   }
@@ -353,7 +364,7 @@ export function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCa
 // ── Hook ──
 
 export function useAppHotkeys({
-  handleTimelineElementDelete,
+  handleTimelineElementsDelete,
   handleTimelineElementSplit,
   handleDomEditElementDelete,
   domEditSelectionRef,
@@ -378,7 +389,6 @@ export function useAppHotkeys({
   activeCompPath,
   forceReloadSdkSession,
 }: UseAppHotkeysParams) {
-  const previewHotkeyWindowRef = useRef<Window | null>(null);
   const previewHistoryCleanupRef = useRef<(() => void) | null>(null);
 
   // ── Undo / Redo ──
@@ -454,7 +464,7 @@ export function useAppHotkeys({
 
   const cbRef = useRef<HotkeyCallbacks>(null!);
   cbRef.current = {
-    handleTimelineElementDelete,
+    handleTimelineElementsDelete,
     handleTimelineElementSplit,
     handleDomEditElementDelete,
     handleUndo,
@@ -492,33 +502,6 @@ export function useAppHotkeys({
 
   // ── Preview iframe forwarding ──
 
-  const syncPreviewTimelineHotkey = useCallback(
-    (iframe: HTMLIFrameElement | null) => {
-      const nextWindow = iframeContentWindow(iframe);
-      if (previewHotkeyWindowRef.current === nextWindow) return;
-      safeRemoveListener(
-        previewHotkeyWindowRef.current,
-        "keydown",
-        handleAppKeyDown as EventListener,
-      );
-      previewHotkeyWindowRef.current = nextWindow;
-      safeAddListener(nextWindow, "keydown", handleAppKeyDown as EventListener, true);
-    },
-    [handleAppKeyDown],
-  );
-
-  useEffect(
-    () => () => {
-      safeRemoveListener(
-        previewHotkeyWindowRef.current,
-        "keydown",
-        handleAppKeyDown as EventListener,
-      );
-      previewHotkeyWindowRef.current = null;
-    },
-    [handleAppKeyDown],
-  );
-
   const handleHistoryHotkey = useCallback((event: KeyboardEvent) => {
     if (!(event.metaKey || event.ctrlKey) || shouldIgnoreHistoryShortcut(event.target)) return;
     handleUndoRedoKey(
@@ -528,7 +511,18 @@ export function useAppHotkeys({
     );
   }, []);
 
-  const syncPreviewHistoryHotkey = useCallback(
+  /**
+   * Give the preview iframe the app's hotkeys, because a keypress lands in
+   * whichever document has focus and clicking the canvas puts focus in there.
+   *
+   * Must run on every iframe LOAD, not once when the element mounts: a reload
+   * keeps the same element (so no ref callback) and the same WindowProxy (so an
+   * identity check sees no change) while replacing the inner window that holds
+   * the listeners. Attaching once left Delete dead in the canvas after the first
+   * reload — press it with a selection and nothing happened, no toast, nothing
+   * to explain it — while undo/redo kept working because they re-attached here.
+   */
+  const syncPreviewHotkeys = useCallback(
     (iframe: HTMLIFrameElement | null) => {
       previewHistoryCleanupRef.current?.();
       previewHistoryCleanupRef.current = null;
@@ -541,14 +535,19 @@ export function useAppHotkeys({
       }
       if (!win && !doc) return;
       const handler = handleHistoryHotkey as EventListener;
+      const appHandler = handleAppKeyDown as EventListener;
       safeAddListener(win, "keydown", handler, true);
+      // Window only: the history pair also listens on the document, and a
+      // capture listener on both would run the app handler twice per press.
+      safeAddListener(win, "keydown", appHandler, true);
       doc?.addEventListener("keydown", handleHistoryHotkey, true);
       previewHistoryCleanupRef.current = () => {
         safeRemoveListener(win, "keydown", handler);
+        safeRemoveListener(win, "keydown", appHandler);
         doc?.removeEventListener("keydown", handleHistoryHotkey, true);
       };
     },
-    [handleHistoryHotkey],
+    [handleAppKeyDown, handleHistoryHotkey],
   );
 
   useEffect(
@@ -562,7 +561,6 @@ export function useAppHotkeys({
   return {
     handleUndo,
     handleRedo,
-    syncPreviewTimelineHotkey,
-    syncPreviewHistoryHotkey,
+    syncPreviewHotkeys,
   };
 }

package/src/hooks/useAutomationSelectionKeyboard.test.tsx

@@ -261,9 +261,10 @@ describe("useAutomationSelectionKeyboard", () => {
       t0: 5,
       t1: 7,
       // Full height: everything the paste landed is selected, so Delete straight
-      // after undoes it in one press.
+      // after undoes it in one press. The volume axis tops out at the authoring
+      // ceiling, not at unity.
       v0: 0,
-      v1: 1,
+      v1: VOLUME_RANGE.max,
     });
   });
 
@@ -300,9 +301,10 @@ describe("useAutomationSelectionKeyboard", () => {
       t0: 4,
       t1: 6,
       // Full height: everything the paste landed is selected, so Delete straight
-      // after undoes it in one press.
+      // after undoes it in one press. The volume axis tops out at the authoring
+      // ceiling, not at unity.
       v0: 0,
-      v1: 1,
+      v1: VOLUME_RANGE.max,
     });
   });
 
@@ -338,9 +340,10 @@ describe("useAutomationSelectionKeyboard", () => {
       t0: 4,
       t1: 6,
       // Full height: everything the paste landed is selected, so Delete straight
-      // after undoes it in one press.
+      // after undoes it in one press. The volume axis tops out at the authoring
+      // ceiling, not at unity.
       v0: 0,
-      v1: 1,
+      v1: VOLUME_RANGE.max,
     });
   });
 

package/src/hooks/useDomEditCommits.ts

@@ -420,20 +420,21 @@ export function useDomEditCommits({
 
   // ── Element lifecycle (delete, z-index reorder) ──
 
-  const { handleDomEditElementDelete, handleDomZIndexReorderCommit } = useElementLifecycleOps({
-    activeCompPath,
-    showToast,
-    writeProjectFile,
-    domEditSaveTimestampRef,
-    editHistory,
-    projectIdRef,
-    reloadPreview,
-    clearDomSelection,
-    onTrySdkDelete,
-    onReorderShadow,
-    forceReloadSdkSession,
-    commitDomEditPatchBatches,
-  });
+  const { handleDomEditElementDelete, handleDomEditElementsDelete, handleDomZIndexReorderCommit } =
+    useElementLifecycleOps({
+      activeCompPath,
+      showToast,
+      writeProjectFile,
+      domEditSaveTimestampRef,
+      editHistory,
+      projectIdRef,
+      reloadPreview,
+      clearDomSelection,
+      onTrySdkDelete,
+      onReorderShadow,
+      forceReloadSdkSession,
+      commitDomEditPatchBatches,
+    });
 
   return {
     resolveImportedFontAsset,
@@ -454,6 +455,7 @@ export function useDomEditCommits({
     handleDomRotationCommit,
     handleDomManualEditsReset,
     handleDomEditElementDelete,
+    handleDomEditElementsDelete,
     handleDomZIndexReorderCommit,
   };
 }

package/src/hooks/useDomEditPreviewSync.ts

@@ -25,7 +25,7 @@ interface UseDomEditPreviewSyncParams {
   ) => void;
   buildDomSelectionFromTarget: (element: HTMLElement) => Promise<DomEditSelection | null>;
   refreshPreviewDocumentVersion: () => void;
-  syncPreviewHistoryHotkey: (iframe: HTMLIFrameElement | null) => void;
+  syncPreviewHotkeys: (iframe: HTMLIFrameElement | null) => void;
   applyStudioManualEditsToPreviewRef: React.MutableRefObject<
     (iframe: HTMLIFrameElement) => Promise<void>
   >;
@@ -45,7 +45,7 @@ export function useDomEditPreviewSync({
   refreshDomEditGroupSelectionsFromPreview,
   buildDomSelectionFromTarget,
   refreshPreviewDocumentVersion,
-  syncPreviewHistoryHotkey,
+  syncPreviewHotkeys,
   applyStudioManualEditsToPreviewRef,
   openSourceForSelection,
   getSidebarTab,
@@ -103,13 +103,13 @@ export function useDomEditPreviewSync({
       }
     };
 
-    syncPreviewHistoryHotkey(previewIframe);
+    syncPreviewHotkeys(previewIframe);
     void applyStudioManualEditsToPreviewRef.current(previewIframe);
     void syncSelectionFromDocument();
     refreshPreviewDocumentVersion();
 
     const handleLoad = () => {
-      syncPreviewHistoryHotkey(previewIframe);
+      syncPreviewHotkeys(previewIframe);
       void applyStudioManualEditsToPreviewRef.current(previewIframe);
       void syncSelectionFromDocument();
       refreshPreviewDocumentVersion();
@@ -129,7 +129,7 @@ export function useDomEditPreviewSync({
     previewIframe,
     refreshDomEditGroupSelectionsFromPreview,
     refreshPreviewDocumentVersion,
-    syncPreviewHistoryHotkey,
+    syncPreviewHotkeys,
     applyStudioManualEditsToPreviewRef,
     gsapCacheVersion,
   ]);

package/src/hooks/useDomEditSession.membersForDelete.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { membersForDelete } from "./useDomEditSession";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+
+const sel = (id: string) => ({ id }) as DomEditSelection;
+
+describe("membersForDelete", () => {
+  it("takes the whole group when the caller asks to expand", () => {
+    const group = [sel("a"), sel("b"), sel("c")];
+    expect(membersForDelete(sel("a"), group, { expandGroup: true })).toEqual(group);
+  });
+
+  it("takes only the primary otherwise, so Cut removes what it copied", () => {
+    // Cut copies the primary alone. Expanding here put one element on the
+    // clipboard and removed every other member of the group with it.
+    const group = [sel("a"), sel("b"), sel("c")];
+    expect(membersForDelete(sel("a"), group)).toEqual([sel("a")]);
+  });
+
+  it("falls back to the primary when there is no group", () => {
+    expect(membersForDelete(sel("a"), [], { expandGroup: true })).toEqual([sel("a")]);
+  });
+});

package/src/hooks/useDomEditSession.test.tsx

@@ -93,7 +93,7 @@ function createSessionParams(
     previewDocumentVersion: 0,
     rightPanelTab: "design",
     applyStudioManualEditsToPreviewRef: { current: async () => {} },
-    syncPreviewHistoryHotkey: vi.fn(),
+    syncPreviewHotkeys: vi.fn(),
     reloadPreview: vi.fn(),
     setRefreshKey: vi.fn(),
     ...overrides,