fix(studio): alt-click selects one linked member even inside the pair selection

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: vanceingalls

packages/studio/src/player/components/audioClipLink.test.ts

@@ -79,3 +79,36 @@ describe("linkedGestureKeys", () => {
     );
   });
 });
+
+describe("selectClipWithLinks", () => {
+  const linkedPair = [
+    { id: "talk", tag: "video", start: 0, duration: 4, track: 0, link: "lk-1" },
+    { id: "talk-audio", tag: "audio", start: 0, duration: 4, track: 1, link: "lk-1" },
+    { id: "title", tag: "div", start: 0, duration: 4, track: 2 },
+  ];
+
+  async function store() {
+    const { usePlayerStore } = await import("../store/playerStore");
+    const { selectClipWithLinks } = await import("./timelineLinkSelection");
+    usePlayerStore.getState().setElements(linkedPair);
+    const click = (key: string, alt = false) =>
+      selectClipWithLinks(key, alt, usePlayerStore.getState().setSelectedElementId);
+    return { usePlayerStore, click };
+  }
+
+  it("a click selects the whole pair; Alt-click then narrows to one member", async () => {
+    const { usePlayerStore, click } = await store();
+    click("talk");
+    expect(usePlayerStore.getState().selectedElementIds).toEqual(new Set(["talk", "talk-audio"]));
+    click("talk-audio", true);
+    expect(usePlayerStore.getState().selectedElementIds).toEqual(new Set(["talk-audio"]));
+  });
+
+  it("a plain click collapses a larger selection to the clicked clip's link group", async () => {
+    const { usePlayerStore, click } = await store();
+    usePlayerStore.getState().setSelection(["talk", "talk-audio", "title"], "title");
+    click("talk");
+    expect(usePlayerStore.getState().selectedElementIds).toEqual(new Set(["talk", "talk-audio"]));
+    expect(usePlayerStore.getState().selectedElementId).toBe("talk");
+  });
+});

packages/studio/src/player/components/timelineClipGestureHandlers.ts

@@ -8,7 +8,7 @@ import {
 import type { TimelineEditCapabilities } from "./timelineEditCapabilities";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import { CLIP_HANDLE_W } from "./timelineLayout";
-import { selectLinkPartners } from "./timelineLinkSelection";
+import { selectClipWithLinks } from "./timelineLinkSelection";
 import { SPLIT_BOUNDARY_EPSILON_S } from "../../utils/timelineElementSplit";
 
 export interface ClipGestureDeps {
@@ -220,8 +220,7 @@ export function createClipGestureHandlers(
       return;
     }
     // Clip selection is idempotent; empty timeline space owns deselection.
-    setSelectedElementId(elementKey);
-    if (!e.altKey) selectLinkPartners(elementKey);
+    selectClipWithLinks(elementKey, e.altKey, setSelectedElementId);
     onSelectElement?.(el);
   };
 

packages/studio/src/player/components/timelineLinkSelection.ts

@@ -1,10 +1,22 @@
 import { usePlayerStore } from "../store/playerStore";
 import { expandToLinkedMembers } from "./audioClipLink";
 
-/** After selecting `key`, widen the selection to its link partners (primary stays `key`). */
-export function selectLinkPartners(key: string): void {
+/**
+ * Select `key` the way a clip click does, then widen to link partners; Alt
+ * selects `key` alone even when it sat inside a larger selection.
+ */
+export function selectClipWithLinks(
+  key: string,
+  altKey: boolean,
+  setSelectedElementId: (id: string) => void,
+): void {
   const state = usePlayerStore.getState();
-  const expanded = expandToLinkedMembers([key], state.elements);
-  if (expanded.size <= 1) return;
-  state.setSelection(expanded, key);
+  if (altKey) {
+    state.setSelection([key], key);
+    return;
+  }
+  setSelectedElementId(key);
+  const { selectedElementIds, elements } = usePlayerStore.getState();
+  const expanded = expandToLinkedMembers(selectedElementIds, elements);
+  if (expanded.size > selectedElementIds.size) state.setSelection(expanded, key);
 }

packages/studio/src/player/components/useTimelineClipContextMenu.ts

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import type { ClipContextMenuState } from "./TimelineProvider";
-import { selectLinkPartners } from "./timelineLinkSelection";
+import { selectClipWithLinks } from "./timelineLinkSelection";
 
 /** A clicked member of an active multi-selection keeps the whole group
  *  selected, so the context menu it opens acts on all of it. */
@@ -17,8 +17,7 @@ export function useClipContextMenu(
       e.preventDefault();
       const id = el.key ?? el.id;
       if (!(selectedElementIds.size > 1 && selectedElementIds.has(id))) {
-        setSelectedElementId(id);
-        if (!e.altKey) selectLinkPartners(id);
+        selectClipWithLinks(id, e.altKey, setSelectedElementId);
         onSelectElement?.(el);
       }
       dismissGapMenu();