@hyperframes/studio 0.8.108 → 0.8.110

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -24,6 +24,7 @@ import {
   audioGainToText,
 } from "@hyperframes/core/audio-gain";
 import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import { useLinkedSpeedCommit, withLinkedPlaybackRate } from "./linkedSpeedEdits";
 import { commitCutout, commitHasAudioToggle, commitMutedToggle } from "./mediaAudioEdits";
 
 // fallow-ignore-next-line complexity
@@ -56,6 +57,10 @@ export function MediaSection({
   ) => Promise<BackgroundRemovalResult>;
 }) {
   const track = useTrackDesignInput();
+  const setRate = withLinkedPlaybackRate(
+    onSetAttribute,
+    useLinkedSpeedCommit(element, onSetAttributeBatch),
+  );
   const isVideo = element.tagName === "video";
   const isAudio = element.tagName === "audio";
   const isImage = element.tagName === "img";
@@ -279,7 +284,7 @@ export function MediaSection({
                 displayValue={`${formatNumericValue(playbackRate)}x`}
                 formatDisplayValue={(next) => `${formatNumericValue(next / 100)}x`}
                 onCommit={(next) => {
-                  void onSetAttribute("playback-rate", formatNumericValue(next / 100));
+                  void setRate("playback-rate", formatNumericValue(next / 100));
                 }}
               />
             </div>

package/src/components/editor/shiftDragAxisLock.test.tsx

@@ -31,7 +31,7 @@ function gestureHarness(gesture: Partial<GestureState> | null, group: GroupGestu
   };
   const handlers = createDomEditOverlayGestureHandlers(opts as never);
   const pointer = (clientX: number, clientY: number, shiftKey: boolean) =>
-    ({ clientX, clientY, shiftKey, altKey: false }) as never;
+    ({ clientX, clientY, shiftKey, altKey: false, pointerId: 1, buttons: 1 }) as never;
   return { opts, handlers, pointer };
 }
 
@@ -41,6 +41,7 @@ function singleDrag() {
     {
       kind: "drag",
       mode: "path-offset",
+      pointerId: 1,
       selection: { element } as unknown as DomEditSelection,
       startX: 100,
       startY: 100,
@@ -57,7 +58,13 @@ function singleDrag() {
 }
 
 const groupGesture = () =>
-  ({ startX: 100, startY: 100, originItems: [], members: [] }) as unknown as GroupGestureState;
+  ({
+    pointerId: 1,
+    startX: 100,
+    startY: 100,
+    originItems: [],
+    members: [],
+  }) as unknown as GroupGestureState;
 
 describe("shift+drag locks a move to the axis the pointer travels further on", () => {
   it("keeps a mostly horizontal single drag on its row", () => {
@@ -278,6 +285,7 @@ function singleMemberDrag() {
     {
       kind: "drag",
       mode: "path-offset",
+      pointerId: 1,
       selection,
       startX: 100,
       startY: 100,
@@ -300,7 +308,13 @@ function singleMemberDrag() {
 function groupMemberDrag() {
   const a = draggableMember("a");
   const b = draggableMember("b");
-  const group = { startX: 100, startY: 100, originItems: [], members: [a.member, b.member] };
+  const group = {
+    pointerId: 1,
+    startX: 100,
+    startY: 100,
+    originItems: [],
+    members: [a.member, b.member],
+  };
   const harness = gestureHarness(null, group as unknown as GroupGestureState);
   return { ...harness, at: () => [a.at(), b.at()] };
 }

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -38,6 +38,7 @@ import {
   ROTATED_SNAP_BYPASS_DEGREES,
   hasDomEditRotationChanged,
   lockDragToDominantAxis,
+  movesGesture,
   resolveDomEditRotationGesture,
 } from "./domEditOverlayGestures";
 import { resolveCenterResizeSize } from "./domEditResizeLocal";
@@ -131,6 +132,8 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     if (!blockedMove && !g && !groupG) {
       opts.onCanvasPointerMoveRef.current(e, { preferClipAncestor: false });
     }
+    const held = g ?? groupG;
+    if (held && !movesGesture(held, e)) return;
 
     if (blockedMove) {
       const dx = e.clientX - blockedMove.startX;

package/src/components/editor/useInlineTextEditing.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, type ReactNode, type RefObject } from "react";
+import { InlineTextCaret } from "./InlineTextCaret";
 import { InlineTextToolbar } from "./InlineTextToolbar";
 import { useDomEditActionsContextOptional } from "../../contexts/DomEditContext";
 import { useInlineTextEdit } from "../../hooks/useInlineTextEdit";
@@ -110,10 +111,16 @@ export function useInlineTextEditing(
   return {
     editing: inlineText.session !== null,
     toolbar: (
-      <InlineTextToolbar
-        session={inlineText.session}
-        iframe={actions?.previewIframeRef?.current ?? null}
-      />
+      <>
+        <InlineTextToolbar
+          session={inlineText.session}
+          iframe={actions?.previewIframeRef?.current ?? null}
+        />
+        <InlineTextCaret
+          session={inlineText.session}
+          iframe={actions?.previewIframeRef?.current ?? null}
+        />
+      </>
     ),
     handleKeyDown,
     startFromPress: (event) => {

package/src/components/editor/useVolumeAutomation.ts

@@ -26,6 +26,8 @@ import {
 import { deriveElementTiming } from "./propertyPanelFlatTimingDerivation";
 import { SPEED_PRESETS, speedPresetLane, type SpeedPresetId } from "@hyperframes/core/speed-ramp";
 import { clampNumber } from "../../utils/studioHelpers";
+import type { HfAutomation } from "@hyperframes/core/audio-automation";
+import type { LinkedSpeedCommit } from "./linkedSpeedEdits";
 
 export interface LaneBinding {
   automated: boolean;
@@ -59,6 +61,7 @@ export function useVolumeAutomation(
   element: DomEditSelection,
   currentTime: number,
   onSetAttributeQuiet: (attr: string, value: string | null) => void | Promise<void>,
+  linkedSpeed: LinkedSpeedCommit | null = null,
 ): VolumeAutomationBinding {
   // The chain is not needed to resolve a volume or rate lane: both are always valid
   // targets, so this deliberately does not parse it.
@@ -77,7 +80,22 @@ export function useVolumeAutomation(
     // playing track, while the same click on an effect parameter did not.
     void onSetAttributeQuiet(HF_AUDIO_AUTOMATION_ATTR, automationAttrValue(next) || null);
   };
-  const laneBinding = (target: string, seed: number): LaneBinding => {
+  type Edit = (current: HfAutomation) => HfAutomation;
+  const writeOwn = (edit: Edit) => write(edit(automation));
+  // Speed moves every data-link member together, so a linked clip's rate lane edits fan out.
+  const writeRate = (edit: Edit) => {
+    if (!linkedSpeed) return writeOwn(edit);
+    void linkedSpeed.commitAttribute(
+      HF_AUDIO_AUTOMATION_ATTR,
+      (raw) => automationAttrValue(edit(readPanelAutomation(raw, undefined))) || null,
+      "Edit speed",
+    );
+  };
+  const laneBinding = (
+    target: string,
+    seed: number,
+    writeLane: (edit: Edit) => void,
+  ): LaneBinding => {
     const lane = automation.lanes.find((l) => l.target === target);
     return {
       automated: lane !== undefined,
@@ -85,9 +103,9 @@ export function useVolumeAutomation(
         ? sampleAutomationLane(lane, clipTimeSec, resolveAutomationRange(target, undefined)?.scale)
         : undefined,
       // Seeded at the level the control already shows, so automating does not change it.
-      onAutomate: () => write(withSeededLane(automation, target, seed)),
-      onRemoveAutomation: () => write(withoutLane(automation, target)),
-      onCommitAt: (v: number) => write(withPointAt(automation, target, clipTimeSec, v)),
+      onAutomate: () => writeLane((a) => withSeededLane(a, target, seed)),
+      onRemoveAutomation: () => writeLane((a) => withoutLane(a, target)),
+      onCommitAt: (v: number) => writeLane((a) => withPointAt(a, target, clipTimeSec, v)),
     };
   };
   // `??` alone would let an empty `data-volume` through as Number("") === 0, so
@@ -96,9 +114,13 @@ export function useVolumeAutomation(
   const raw = element.dataAttributes?.["volume"];
   const parsed = raw ? Number(raw) : 1;
   const current = Number.isFinite(parsed) ? parsed : 1;
-  const volume = laneBinding(VOLUME_TARGET, current);
+  const volume = laneBinding(VOLUME_TARGET, current, writeOwn);
   const rateAttr = Number.parseFloat(element.dataAttributes?.["playback-rate"] ?? "");
-  const rate = laneBinding(RATE_TARGET, Number.isFinite(rateAttr) && rateAttr > 0 ? rateAttr : 1);
+  const rate = laneBinding(
+    RATE_TARGET,
+    Number.isFinite(rateAttr) && rateAttr > 0 ? rateAttr : 1,
+    writeRate,
+  );
   return {
     volumeAutomated: volume.automated,
     automatedVolumeValue: volume.automatedValue,
@@ -109,7 +131,7 @@ export function useVolumeAutomation(
       ...rate,
       canApplyPreset: elDuration > 0,
       onApplyPreset: (id) => {
-        if (elDuration > 0) write(withLane(automation, speedPresetLane(id, elDuration)));
+        if (elDuration > 0) writeRate((a) => withLane(a, speedPresetLane(id, elDuration)));
       },
     },
   };

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -54,6 +54,8 @@ export interface TimelineEditCallbackDeps {
   handleRazorSplit: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   handleRazorSplitAll: (splitTime: number) => Promise<void> | void;
   handleFreezeFrame?: (element: TimelineElement, time: number) => Promise<void> | void;
+  handleLinkEdit?: TimelineEditCallbacks["onLinkEdit"];
+  handleTimelineElementDeleteOnly?: TimelineEditCallbacks["onDeleteElementOnly"];
   /** C1's ungrouped-track FX pointer — same auto-grouping write B6's carve uses. */
   handleGroupClips?: (
     clipIds: readonly string[],
@@ -70,6 +72,7 @@ export interface TimelineEditCallbackDeps {
       value: string | null,
       label: string,
     ) => Promise<TimelineEditOutcome | void>;
+    setMany?: TimelineEditCallbacks["onSetElementsAttributeQuiet"];
   };
 }
 
@@ -134,6 +137,8 @@ export function useTimelineEditCallbacks({
   handleRazorSplit,
   handleRazorSplitAll,
   handleFreezeFrame,
+  handleLinkEdit,
+  handleTimelineElementDeleteOnly,
   handleGroupClips,
   setElementFxAttribute,
 }: TimelineEditCallbackDeps): TimelineEditCallbacks {
@@ -224,12 +229,15 @@ export function useTimelineEditCallbacks({
       onGroupClips: handleGroupClips,
       onSetElementAttributeLive: setElementFxAttribute?.setLive,
       onSetElementAttributeQuiet: setElementFxAttribute?.setQuiet,
+      onSetElementsAttributeQuiet: setElementFxAttribute?.setMany,
       onRevertElementAttributeLive: setElementFxAttribute?.revertLive,
       onBlockedEditAttempt: handleBlockedTimelineEdit,
       onSplitElement: handleTimelineElementSplit,
       onRazorSplit: handleRazorSplit,
       onRazorSplitAll: handleRazorSplitAll,
       onFreezeFrame: handleFreezeFrame,
+      onLinkEdit: handleLinkEdit,
+      onDeleteElementOnly: handleTimelineElementDeleteOnly,
       onDeleteAllKeyframes: (element, animationId) => {
         // Hold the element where it is (collapse keyframes to a static set) rather
         // than deleting the whole animation — deleting strands a stale GSAP base
@@ -427,6 +435,8 @@ export function useTimelineEditCallbacks({
       handleRazorSplit,
       handleRazorSplitAll,
       handleFreezeFrame,
+      handleLinkEdit,
+      handleTimelineElementDeleteOnly,
       handleGsapRemoveAllKeyframes,
       resolveElementAnimations,
       resolveKeyframeTarget,

package/src/components/ui/Menu.test.tsx

@@ -3,7 +3,6 @@
 import { readFileSync } from "node:fs";
 import path from "node:path";
 import React, { act, useState } from "react";
-import { createRoot, type Root } from "react-dom/client";
 import { compile } from "tailwindcss";
 import { afterEach, beforeAll, describe, expect, it } from "vitest";
 import { loadStylesheet, STYLES_DIR } from "../../styles/styleSources";
@@ -11,27 +10,11 @@ import { ContextMenu, Menu, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparat
 import { Popover } from "./Popover";
 import { isTypingTarget } from "../../utils/typingTarget";
 import { shouldIgnorePlaybackShortcutTarget } from "../../player/lib/playbackShortcuts";
+import { cleanupMounted, mountHost as render } from "./mountHost.testHelpers";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
-let mounted: { root: Root; host: HTMLElement } | null = null;
-
-function render(element: React.ReactElement): HTMLElement {
-  const host = document.createElement("div");
-  document.body.append(host);
-  const root = createRoot(host);
-  mounted = { root, host };
-  act(() => root.render(element));
-  return host;
-}
-
-afterEach(() => {
-  if (!mounted) return;
-  const { root, host } = mounted;
-  mounted = null;
-  act(() => root.unmount());
-  host.remove();
-});
+afterEach(cleanupMounted);
 
 /** Base UI moves focus into the popup one task after open, not synchronously. */
 async function settle(): Promise<void> {
@@ -310,9 +293,7 @@ describe("Popover", () => {
     renderOpen(false);
     await settle();
     expect(one("[role=dialog]", "popup").querySelector("svg")).toBeNull();
-    act(() => mounted?.root.unmount());
-    mounted?.host.remove();
-    mounted = null;
+    cleanupMounted();
 
     renderOpen(true);
     await settle();

package/src/components/ui/Menu.tsx

@@ -52,8 +52,8 @@ export const popupSurface = cn(
   "data-[preview-state=open]:opacity-100 data-[preview-state=open]:scale-100",
 );
 
-/** The popup's own layer: menus sit above panel chrome and below a modal. */
-const POPUP_LAYER = "z-200";
+/** Every floating list, menu, popover and tooltip sits on this layer, above panel chrome and modals. */
+export const POPUP_LAYER = "z-200";
 
 const menuPopup = cn(popupSurface, "min-w-36 p-1 shadow-menu");
 

package/src/components/ui/Popover.tsx

@@ -6,7 +6,7 @@
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import { cn } from "./cn";
-import { popupSurface, type PopupPreviewState } from "./Menu";
+import { POPUP_LAYER, popupSurface, type PopupPreviewState } from "./Menu";
 
 type PortalContainer = ComponentPropsWithoutRef<typeof BasePopover.Portal>["container"];
 
@@ -70,7 +70,7 @@ export function Popover({
           sideOffset={sideOffset}
           collisionPadding={VIEWPORT_MARGIN}
           arrowPadding={ARROW_CORNER_CLEARANCE}
-          className="z-200"
+          className={POPUP_LAYER}
         >
           <BasePopover.Popup
             aria-label={ariaLabel}

package/src/components/ui/Select.tsx

@@ -6,7 +6,7 @@
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { cn } from "./cn";
 import { fieldBase } from "./Input";
-import { floatingMotion } from "./Menu";
+import { floatingMotion, POPUP_LAYER } from "./Menu";
 import type { PreviewState } from "./Button";
 
 export interface SelectOption {
@@ -77,7 +77,7 @@ export function Select({
       </BaseSelect.Trigger>
 
       <BaseSelect.Portal>
-        <BaseSelect.Positioner sideOffset={4} alignItemWithTrigger={false}>
+        <BaseSelect.Positioner sideOffset={4} alignItemWithTrigger={false} className={POPUP_LAYER}>
           <BaseSelect.Popup
             className={cn(
               "min-w-[var(--anchor-width)] rounded-md border border-border bg-surface py-1 shadow-menu",

package/src/components/ui/Tooltip.tsx

@@ -6,7 +6,7 @@
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { cloneElement, useId, useRef, useState, type ReactElement } from "react";
 import { cn } from "./cn";
-import { floatingMotion } from "./Menu";
+import { floatingMotion, POPUP_LAYER } from "./Menu";
 
 interface TooltipProps {
   label: string;
@@ -39,7 +39,7 @@ export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipP
           side={side}
           sideOffset={SIDE_OFFSET}
           collisionPadding={VIEWPORT_MARGIN}
-          className="z-200"
+          className={POPUP_LAYER}
         >
           <BaseTooltip.Popup
             id={tooltipId}

package/src/components/ui/mountHost.testHelpers.ts

@@ -4,6 +4,13 @@ import { createRoot, type Root } from "react-dom/client";
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 let mounted: { root: Root; host: HTMLElement } | null = null;
+const tracked: Root[] = [];
+
+export function trackedRoot(host: HTMLElement): Root {
+  const root = createRoot(host);
+  tracked.push(root);
+  return root;
+}
 
 /** Renders into a fresh host attached to the body; `cleanupMounted` tears it down. */
 export function mountHost(element: ReactElement): HTMLElement {
@@ -16,6 +23,7 @@ export function mountHost(element: ReactElement): HTMLElement {
 }
 
 export function cleanupMounted(): void {
+  act(() => tracked.splice(0).forEach((root) => root.unmount()));
   if (!mounted) return;
   const { root, host } = mounted;
   mounted = null;

package/src/components/ui/valueControls.test.tsx

@@ -4,7 +4,6 @@ import { createRequire } from "node:module";
 import { readFileSync } from "node:fs";
 import path from "node:path";
 import React, { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
 import { compile } from "tailwindcss";
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 
@@ -21,33 +20,15 @@ import { Toggle } from "./Toggle";
 import { isTypingTarget } from "../../utils/typingTarget";
 import { shouldIgnorePlaybackShortcutTarget } from "../../player/lib/playbackShortcuts";
 import { __resetDesignInputThrottle, trackDesignInput } from "../../utils/designInputTracking";
+import { cleanupMounted, mountHost as render } from "./mountHost.testHelpers";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
-let mounted: { root: Root; host: HTMLElement } | null = null;
-
-function render(element: React.ReactElement): HTMLElement {
-  const host = document.createElement("div");
-  document.body.append(host);
-  const root = createRoot(host);
-  mounted = { root, host };
-  act(() => root.render(element));
-  return host;
-}
-
-function unmount() {
-  if (!mounted) return;
-  const { root, host } = mounted;
-  mounted = null;
-  act(() => root.unmount());
-  host.remove();
-}
-
 beforeEach(() => {
   trackStudioEvent.mockReset();
   __resetDesignInputThrottle();
 });
-afterEach(unmount);
+afterEach(cleanupMounted);
 
 /** Base UI moves focus a task later than React renders; happy-dom is no faster. */
 const settle = () => act(async () => void (await new Promise((r) => setTimeout(r, 0))));

package/src/contexts/TimelineEditContext.tsx

@@ -37,12 +37,16 @@ const EDIT_CALLBACK_KEY_SET: Record<keyof TimelineEditCallbacks, true> = {
   onGroupClips: true,
   onSetElementAttributeLive: true,
   onSetElementAttributeQuiet: true,
+  onSetElementsAttributeQuiet: true,
   onRevertElementAttributeLive: true,
   onBlockedEditAttempt: true,
+  onLinkEdit: true,
+  onDeleteElementOnly: true,
   onSplitElement: true,
   onRazorSplit: true,
   onRazorSplitAll: true,
   onFreezeFrame: true,
+  onNotice: true,
   onDeleteKeyframe: true,
   onDeleteAllKeyframes: true,
   onMoveKeyframeToPlayhead: true,

package/src/editorGesturesExports.test.tsx

@@ -82,6 +82,7 @@ function mountMarquee<T>(extra: Partial<MarqueeGesturesDeps<T>> = {}) {
       clientX: x,
       clientY: y,
       pointerId: 7,
+      buttons: 1,
       shiftKey,
       currentTarget: overlay,
     }) as unknown as PointerEvent<HTMLDivElement>;

package/src/hooks/appHotkeysDispatch.ts

@@ -9,6 +9,8 @@ import { shouldIgnoreHistoryShortcut } from "../utils/studioHelpers";
 import { canSplitElement } from "../utils/timelineElementSplit";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { STUDIO_PLAIN_KEYS } from "../player/components/studioShortcuts";
+import { openAudioGainDialog } from "../player/components/audioGainDialogStore";
+import type { LinkShortcutCallbacks } from "./linkShortcuts";
 
 // Extracted from useAppHotkeys.ts to keep it under the studio 600-line cap,
 // following useTimelineDeleteOps's precedent. Pure functions, no hooks — the
@@ -29,7 +31,7 @@ function handleUndoRedoKey(event: KeyboardEvent, onUndo: () => void, onRedo: ()
   return false;
 }
 
-export interface HotkeyCallbacks {
+export interface HotkeyCallbacks extends LinkShortcutCallbacks {
   handleTimelineElementsDelete: (elements: TimelineElement[]) => Promise<void>;
   handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void>;
   handleDomEditElementDelete: (
@@ -189,6 +191,14 @@ export function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCa
     }
   }
 
+  // Only with a sound clip selected, so bare G still reaches the canvas grid toggle otherwise.
+  if (key === STUDIO_PLAIN_KEYS.audioGain && !event.shiftKey && !event.altKey) {
+    if (!cb.readOnlyPreview && openAudioGainDialog()) {
+      event.preventDefault();
+      return;
+    }
+  }
+
   if (key === "b" && !event.shiftKey && !event.altKey) {
     event.preventDefault();
     const { activeTool, setActiveTool } = usePlayerStore.getState();

package/src/hooks/linkShortcuts.test.ts

@@ -0,0 +1,70 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { usePlayerStore, type TimelineElement } from "../player";
+import { dispatchLinkShortcut } from "./linkShortcuts";
+
+const clip = (id: string, tag: string, extra: Partial<TimelineElement> = {}): TimelineElement => ({
+  id,
+  tag,
+  src: "talk.mp4",
+  start: 0,
+  duration: 4,
+  track: 0,
+  ...extra,
+});
+
+function key(init: KeyboardEventInit): KeyboardEvent {
+  const event = new KeyboardEvent("keydown", { cancelable: true, ...init });
+  vi.spyOn(event, "preventDefault");
+  return event;
+}
+
+function select(elements: TimelineElement[], id: string) {
+  usePlayerStore.getState().setElements(elements);
+  usePlayerStore.getState().setSelection([id], id);
+}
+
+describe("dispatchLinkShortcut", () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it("⌘L unlinks the selected linked clip", () => {
+    const video = clip("talk", "video", { muted: true, link: "lk-1" });
+    const audio = clip("talk-audio", "audio", { link: "lk-1" });
+    select([video, audio], "talk");
+    const handleLinkEdit = vi.fn();
+    const event = key({ metaKey: true, key: "l" });
+    expect(dispatchLinkShortcut(event, { handleLinkEdit })).toBe(true);
+    expect(handleLinkEdit).toHaveBeenCalledWith({ kind: "unlink", elements: [video, audio] });
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
+
+  it("⌥⇧D detaches audio, read by key code since Option changes the character", () => {
+    const talk = clip("talk", "video", { hasAudio: true });
+    select([talk], "talk");
+    const handleLinkEdit = vi.fn();
+    expect(
+      dispatchLinkShortcut(key({ altKey: true, shiftKey: true, key: "Î", code: "KeyD" }), {
+        handleLinkEdit,
+      }),
+    ).toBe(true);
+    expect(handleLinkEdit).toHaveBeenCalledWith({ kind: "detach", element: talk });
+  });
+
+  it("⌥⌫ deletes one linked member", () => {
+    const video = clip("talk", "video", { muted: true, link: "lk-1" });
+    select([video, clip("talk-audio", "audio", { link: "lk-1" })], "talk");
+    const handleTimelineElementDeleteOnly = vi.fn();
+    dispatchLinkShortcut(key({ altKey: true, key: "Backspace" }), {
+      handleLinkEdit: vi.fn(),
+      handleTimelineElementDeleteOnly,
+    });
+    expect(handleTimelineElementDeleteOnly).toHaveBeenCalledWith(video);
+  });
+
+  it("leaves the key alone when no link item applies", () => {
+    select([clip("title", "div")], "title");
+    const event = key({ metaKey: true, key: "l" });
+    expect(dispatchLinkShortcut(event, { handleLinkEdit: vi.fn() })).toBe(false);
+    expect(event.preventDefault).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/linkShortcuts.ts

@@ -0,0 +1,41 @@
+import { usePlayerStore } from "../player";
+import type { TimelineEditCallbacks } from "../player/components/timelineCallbacks";
+import { resolveLinkMenuItems } from "../player/components/clipMenuLinkItems";
+
+export interface LinkShortcutCallbacks {
+  handleLinkEdit?: TimelineEditCallbacks["onLinkEdit"];
+  handleTimelineElementDeleteOnly?: TimelineEditCallbacks["onDeleteElementOnly"];
+}
+
+const isDeleteKey = (event: KeyboardEvent) => event.key === "Backspace" || event.key === "Delete";
+const hasMod = (event: KeyboardEvent) => event.metaKey || event.ctrlKey;
+
+const SHORTCUTS: ReadonlyArray<[string, (event: KeyboardEvent) => boolean]> = [
+  ["⌘L", (e) => hasMod(e) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === "l"],
+  ["⌥⇧D", (e) => !hasMod(e) && e.altKey && e.shiftKey && e.code === "KeyD"],
+  ["⌥⌫", (e) => !hasMod(e) && e.altKey && !e.shiftKey && isDeleteKey(e)],
+];
+
+function shortcutOf(event: KeyboardEvent): string | null {
+  return SHORTCUTS.find(([, matches]) => matches(event))?.[0] ?? null;
+}
+
+/** ⌘L unlink/link, ⌥⇧D detach audio, ⌥⌫ delete one linked clip — the clip menu's shortcuts. */
+export function dispatchLinkShortcut(event: KeyboardEvent, cb: LinkShortcutCallbacks): boolean {
+  const shortcut = shortcutOf(event);
+  if (!shortcut) return false;
+  const { elements, selectedElementId, selectedElementIds } = usePlayerStore.getState();
+  const element = elements.find((el) => (el.key ?? el.id) === selectedElementId);
+  if (!element) return false;
+  const item = resolveLinkMenuItems({
+    element,
+    elements,
+    selectedKeys: selectedElementIds,
+    onLinkEdit: cb.handleLinkEdit,
+    onDeleteElementOnly: cb.handleTimelineElementDeleteOnly,
+  }).find((candidate) => candidate.shortcut === shortcut);
+  if (!item) return false;
+  event.preventDefault();
+  item.run();
+  return true;
+}