@hyperframes/studio 0.8.108 → 0.8.109

package/src/player/components/clipMenuLinkItems.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it, vi } from "vitest";
+import type { TimelineElement } from "../store/playerStore";
+import { resolveLinkMenuItems } from "./clipMenuLinkItems";
+
+const clip = (id: string, tag: string, extra: Partial<TimelineElement> = {}): TimelineElement => ({
+  id,
+  tag,
+  src: "talk.mp4",
+  start: 0,
+  duration: 4,
+  track: 0,
+  ...extra,
+});
+
+function labels(element: TimelineElement, elements: TimelineElement[], selected: string[] = []) {
+  return resolveLinkMenuItems({
+    element,
+    elements,
+    selectedKeys: new Set(selected),
+    onLinkEdit: vi.fn(),
+    onDeleteElementOnly: vi.fn(),
+  }).map((item) => item.label);
+}
+
+describe("resolveLinkMenuItems", () => {
+  it("offers Detach audio on a video with sound (frame 4)", () => {
+    const talk = clip("talk", "video", { hasAudio: true });
+    expect(labels(talk, [talk])).toEqual(["Detach audio"]);
+  });
+
+  it("offers Unlink, Merge back and Delete this clip only on a linked pair (frame 6)", () => {
+    const video = clip("talk", "video", { muted: true, link: "lk-1" });
+    const audio = clip("talk-audio", "audio", { link: "lk-1" });
+    expect(labels(audio, [video, audio])).toEqual([
+      "Unlink from video",
+      "Merge audio back into video",
+      "Delete this clip only",
+    ]);
+  });
+
+  it("offers Link instead of Unlink for a selected unlinked pair", () => {
+    const video = clip("talk", "video", { muted: true });
+    const audio = clip("talk-audio", "audio");
+    expect(labels(video, [video, audio], ["talk", "talk-audio"])).toEqual([
+      "Link to audio",
+      "Merge audio back into video",
+    ]);
+    expect(labels(audio, [video, audio], ["talk", "talk-audio"])[0]).toBe("Link to video");
+  });
+
+  it("names the audio partner when unlinking from the video side", () => {
+    const video = clip("talk", "video", { muted: true, link: "lk-1" });
+    const audio = clip("talk-audio", "audio", { link: "lk-1" });
+    expect(labels(video, [video, audio])[0]).toBe("Unlink from audio");
+  });
+
+  it("falls back to plain Unlink for groups of three or same-kind partners", () => {
+    const video = clip("talk", "video", { muted: true, link: "lk-1" });
+    const audio = clip("talk-audio", "audio", { link: "lk-1" });
+    const second = clip("talk-audio2", "audio", { link: "lk-1" });
+    expect(labels(video, [video, audio, second])[0]).toBe("Unlink");
+    const twin = clip("talk2", "video", { muted: true, link: "lk-2" });
+    const twin2 = clip("talk3", "video", { muted: true, link: "lk-2" });
+    expect(labels(twin, [twin, twin2])[0]).toBe("Unlink");
+  });
+
+  it("offers nothing for a silent video or without a link handler", () => {
+    const broll = clip("broll", "video", { muted: true, src: "b.mp4" });
+    expect(labels(broll, [broll])).toEqual([]);
+    expect(
+      resolveLinkMenuItems({
+        element: clip("t", "video", { hasAudio: true }),
+        elements: [],
+        selectedKeys: new Set(),
+      }),
+    ).toEqual([]);
+  });
+
+  it("each item dispatches its link edit", () => {
+    const onLinkEdit = vi.fn();
+    const talk = clip("talk", "video", { hasAudio: true });
+    resolveLinkMenuItems({
+      element: talk,
+      elements: [talk],
+      selectedKeys: new Set(),
+      onLinkEdit,
+    })[0]?.run();
+    expect(onLinkEdit).toHaveBeenCalledWith({ kind: "detach", element: talk });
+  });
+});

package/src/player/components/clipMenuLinkItems.tsx

@@ -0,0 +1,121 @@
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
+import type { TimelineLinkEdit } from "./timelineCallbacks";
+import { linkedMembersOf } from "./audioClipLink";
+import { canDetachAudio, canLinkPair, findMergePair } from "../../components/editor/mediaLinkEdits";
+
+interface LinkMenuItem {
+  label: string;
+  shortcut?: string;
+  destructive?: boolean;
+  run: () => void;
+}
+
+const keyOf = (el: TimelineElement) => el.key ?? el.id;
+
+const tagOf = (el: TimelineElement) => el.tag.trim().toLowerCase();
+
+function partnerSuffix(element: TimelineElement, others: readonly TimelineElement[]): string {
+  const partners = others.filter((el) => keyOf(el) !== keyOf(element));
+  const [partner] = partners;
+  if (partners.length !== 1 || !partner) return "";
+  const pair = [tagOf(element), tagOf(partner)].sort().join("+");
+  return pair === "audio+video" ? ` ${tagOf(partner)}` : "";
+}
+
+/** The link-model items for a clip, in wireframe order (detach · unlink/link · merge · delete-one). */
+export function resolveLinkMenuItems(input: {
+  element: TimelineElement;
+  elements: readonly TimelineElement[];
+  selectedKeys: ReadonlySet<string>;
+  onLinkEdit?: (edit: TimelineLinkEdit) => unknown;
+  onDeleteElementOnly?: (element: TimelineElement) => unknown;
+}): LinkMenuItem[] {
+  const { element, elements, selectedKeys, onLinkEdit, onDeleteElementOnly } = input;
+  const items: LinkMenuItem[] = [];
+  if (!onLinkEdit) return items;
+  const members = linkedMembersOf(element, elements);
+  const linked = members.length > 1;
+  if (canDetachAudio(element)) {
+    items.push({
+      label: "Detach audio",
+      shortcut: "⌥⇧D",
+      run: () => onLinkEdit({ kind: "detach", element }),
+    });
+  }
+  const selected = elements.filter((el) => selectedKeys.has(keyOf(el)));
+  if (linked) {
+    items.push({
+      label: `Unlink${partnerSuffix(element, members) && ` from${partnerSuffix(element, members)}`}`,
+      shortcut: "⌘L",
+      run: () => onLinkEdit({ kind: "unlink", elements: members }),
+    });
+  } else if (canLinkPair(selected) && selectedKeys.has(keyOf(element))) {
+    items.push({
+      label: `Link${partnerSuffix(element, selected) && ` to${partnerSuffix(element, selected)}`}`,
+      shortcut: "⌘L",
+      run: () => onLinkEdit({ kind: "link", elements: selected }),
+    });
+  }
+  const pair = findMergePair(element, elements);
+  if (pair) {
+    items.push({
+      label: "Merge audio back into video",
+      run: () => onLinkEdit({ kind: "merge", ...pair }),
+    });
+  }
+  if (linked && onDeleteElementOnly) {
+    items.push({
+      label: "Delete this clip only",
+      shortcut: "⌥⌫",
+      destructive: true,
+      run: () => onDeleteElementOnly(element),
+    });
+  }
+  return items;
+}
+
+export function ClipMenuLinkItems({
+  part,
+  element,
+  onClose,
+}: {
+  part: "link" | "delete";
+  element: TimelineElement;
+  onClose: () => void;
+}) {
+  const { onLinkEdit, onDeleteElementOnly } = useTimelineEditContextOptional();
+  const elements = usePlayerStore((s) => s.elements);
+  const selectedKeys = usePlayerStore((s) => s.selectedElementIds);
+  const items = resolveLinkMenuItems({
+    element,
+    elements,
+    selectedKeys,
+    onLinkEdit,
+    onDeleteElementOnly,
+  }).filter((item) => (item.destructive === true) === (part === "delete"));
+  if (items.length === 0) return null;
+  return (
+    <>
+      {items.map((item) => (
+        <button
+          key={item.label}
+          type="button"
+          role="menuitem"
+          className={`w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-hidden cursor-pointer hover:bg-neutral-800 focus-visible:bg-neutral-800 ${
+            item.destructive ? "text-red-400" : "text-neutral-300"
+          }`}
+          onClick={() => {
+            item.run();
+            onClose();
+          }}
+        >
+          <span>{item.label}</span>
+          {item.shortcut && (
+            <span className="text-neutral-500 text-[10px] ml-3">{item.shortcut}</span>
+          )}
+        </button>
+      ))}
+    </>
+  );
+}

package/src/player/components/clipMenuToolItems.tsx

@@ -175,7 +175,7 @@ function FreezeFrameItem({ element, currentTime, onClose }: Omit<ClipMenuToolIte
   );
 }
 
-/** Freeze (time), Voice (sound), Look and Crop (picture); sound and picture end in their own divider. */
+/** Freeze (time), Voice (sound), Look and Crop (picture). */
 export function ClipMenuToolItems(props: ClipMenuToolItemsProps) {
   if (props.group === "time") return <FreezeFrameItem {...props} />;
   return <ClipMenuAttributeItems {...props} />;
@@ -204,7 +204,6 @@ function ClipMenuAttributeItems({ group, element, onClose }: ClipMenuToolItemsPr
             write(HF_AUDIO_FX_ATTR, chainWithVoicePreset(state.fxChain, id), "Voice preset")
           }
         />
-        <div className="my-1 border-t border-neutral-700/60" />
       </>
     );
   }
@@ -229,7 +228,6 @@ function ClipMenuAttributeItems({ group, element, onClose }: ClipMenuToolItemsPr
       >
         <span>Crop</span>
       </button>
-      <div className="my-1 border-t border-neutral-700/60" />
     </>
   );
 }

package/src/player/components/clipSync.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from "vitest";
+import { clipSyncState, syncPartnerOf } from "./clipSync";
+
+const clip = (id: string, tag: string, start: number, extra: Record<string, unknown> = {}) => ({
+  id,
+  tag,
+  start,
+  duration: 4,
+  track: 0,
+  syncOrigin: "lk-1",
+  ...extra,
+});
+
+describe("syncPartnerOf", () => {
+  it("pairs a video with the audio sharing its sync origin, not another video", () => {
+    const v = clip("v", "video", 0);
+    const a = clip("a", "audio", 0);
+    const other = clip("v2", "video", 0);
+    expect(syncPartnerOf(a, [v, a, other])?.id).toBe("v");
+    expect(syncPartnerOf(v, [v, a, other])?.id).toBe("a");
+  });
+
+  it("ignores clips with no or another origin", () => {
+    const v = clip("v", "video", 0);
+    expect(syncPartnerOf(v, [v, clip("a", "audio", 0, { syncOrigin: "lk-2" })])).toBeNull();
+    expect(syncPartnerOf({ ...v, syncOrigin: undefined }, [v])).toBeNull();
+  });
+
+  it.each([{ sourceFile: "child.html" }, { compositionScope: "child" }])(
+    "never pairs across compositions reusing an origin (%o)",
+    (scope) => {
+      const v = clip("v", "video", 0);
+      expect(syncPartnerOf(v, [v, clip("a", "audio", 0, scope)])).toBeNull();
+    },
+  );
+
+  it("after a split, picks the partner sharing the most timeline", () => {
+    const a = clip("a", "audio", 4.2);
+    const left = clip("v", "video", 0);
+    const right = clip("v-split", "video", 4);
+    expect(syncPartnerOf(a, [left, right, a])?.id).toBe("v-split");
+  });
+});
+
+describe("clipSyncState", () => {
+  it("is null in sync and signed per side when drifted", () => {
+    const v = clip("v", "video", 1);
+    expect(clipSyncState(v, [v, clip("a", "audio", 1)], 30)).toBeNull();
+    const late = clip("a", "audio", 1 + 10 / 30);
+    expect(clipSyncState(late, [v, late], 30)?.frames).toBe(10);
+    expect(clipSyncState(v, [v, late], 30)?.frames).toBe(-10);
+  });
+
+  it("offers move and slip targets that each restore sync", () => {
+    const v = clip("v", "video", 1, { playbackStart: 0 });
+    const a = clip("a", "audio", 1.5, { playbackStart: 0 });
+    const state = clipSyncState(a, [v, a], 30);
+    expect(state?.moveStart).toBeCloseTo(1);
+    expect(state?.slipMediaStart).toBeCloseTo(0.5);
+  });
+
+  it("has no badge when the halves play at different rates", () => {
+    const v = clip("v", "video", 1, { playbackRate: 2 });
+    const a = clip("a", "audio", 2);
+    expect(clipSyncState(a, [v, a], 30)).toBeNull();
+  });
+});

package/src/player/components/clipSync.ts

@@ -0,0 +1,80 @@
+import {
+  moveIntoSyncStart,
+  slipIntoSyncMediaStart,
+  syncOffsetFrames,
+  type SyncTiming,
+} from "@hyperframes/core/media-link";
+import { sameCompositionScope, type TimelineElement } from "../store/timelineElement";
+
+type SyncElement = Pick<
+  TimelineElement,
+  "id" | "key" | "tag" | "start" | "duration" | "playbackStart" | "playbackRate" | "syncOrigin"
+> &
+  Pick<TimelineElement, "sourceFile" | "compositionScope">;
+
+const keyOf = (el: Pick<TimelineElement, "id" | "key">) => el.key ?? el.id;
+const kindOf = (el: Pick<TimelineElement, "tag">) => el.tag.trim().toLowerCase();
+
+function syncTimingOf(el: SyncElement): SyncTiming {
+  return { start: el.start, mediaStart: el.playbackStart ?? 0, playbackRate: el.playbackRate ?? 1 };
+}
+
+function overlap(a: SyncElement, b: SyncElement): number {
+  return Math.min(a.start + a.duration, b.start + b.duration) - Math.max(a.start, b.start);
+}
+
+/**
+ * The other half of `el`'s source pair: a video for an audio and the reverse,
+ * sharing its sync origin. After splits several may qualify; the one sharing the
+ * most timeline wins, then the nearest start.
+ */
+export function syncPartnerOf<T extends SyncElement>(el: T, elements: readonly T[]): T | null {
+  const kind = kindOf(el);
+  if (!el.syncOrigin || (kind !== "video" && kind !== "audio")) return null;
+  const partnerKind = kind === "video" ? "audio" : "video";
+  const candidates = elements.filter(
+    (other) =>
+      keyOf(other) !== keyOf(el) &&
+      other.syncOrigin === el.syncOrigin &&
+      sameCompositionScope(other, el) &&
+      kindOf(other) === partnerKind,
+  );
+  const rank = (other: T) => [overlap(el, other), -Math.abs(other.start - el.start)] as const;
+  let best: T | null = null;
+  for (const candidate of candidates) {
+    if (!best) best = candidate;
+    else {
+      const [o1, d1] = rank(candidate);
+      const [o2, d2] = rank(best);
+      if (o1 > o2 || (o1 === o2 && d1 > d2)) best = candidate;
+    }
+  }
+  return best;
+}
+
+export interface ClipSyncState<T> {
+  partner: T;
+  frames: number;
+  moveStart: number | null;
+  slipMediaStart: number | null;
+}
+
+/** `el`'s drift from its source partner, or null when in sync, unpaired or at a different rate. */
+export function clipSyncState<T extends SyncElement>(
+  el: T,
+  elements: readonly T[],
+  fps: number,
+): ClipSyncState<T> | null {
+  const partner = syncPartnerOf(el, elements);
+  if (!partner) return null;
+  const self = syncTimingOf(el);
+  const other = syncTimingOf(partner);
+  const frames = syncOffsetFrames(self, other, fps);
+  if (frames === null || frames === 0) return null;
+  return {
+    partner,
+    frames,
+    moveStart: moveIntoSyncStart(self, other),
+    slipMediaStart: slipIntoSyncMediaStart(self, other),
+  };
+}

package/src/player/components/linkLabelColor.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { LINK_LABEL_COLORS, linkLabelColor } from "./linkLabelColor";
+
+describe("linkLabelColor", () => {
+  it("has no colour for an unlinked clip", () => {
+    expect(linkLabelColor(undefined)).toBeNull();
+    expect(linkLabelColor("")).toBeNull();
+  });
+
+  it("walks the palette in lk-N order, wrapping", () => {
+    expect(linkLabelColor("lk-1")).toBe(LINK_LABEL_COLORS[0]);
+    expect(linkLabelColor("lk-2")).toBe(LINK_LABEL_COLORS[1]);
+    expect(linkLabelColor(`lk-${LINK_LABEL_COLORS.length + 1}`)).toBe(LINK_LABEL_COLORS[0]);
+  });
+
+  it("is deterministic for hand-written ids", () => {
+    expect(linkLabelColor("talk-pair")).toBe(linkLabelColor("talk-pair"));
+    expect(LINK_LABEL_COLORS).toContain(linkLabelColor("talk-pair"));
+  });
+});

package/src/player/components/linkLabelColor.ts

@@ -0,0 +1,24 @@
+/** Link-group label colours; teal, violet, white and red belong to clips, selection and the sync badge. */
+export const LINK_LABEL_COLORS = [
+  "var(--color-amber-500)",
+  "var(--color-sky-400)",
+  "var(--color-green-400)",
+  "var(--color-pink-400)",
+  "var(--color-orange-400)",
+  "var(--color-amber-300)",
+] as const;
+
+function stableIndex(link: string): number {
+  const numbered = /^lk-(\d+)$/.exec(link);
+  if (numbered) return Number(numbered[1]) - 1;
+  let hash = 0;
+  for (const char of link) hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
+  return hash;
+}
+
+/** The same colour for every member of a link group, from its id alone. */
+export function linkLabelColor(link: string | undefined): string | null {
+  if (!link) return null;
+  const count = LINK_LABEL_COLORS.length;
+  return LINK_LABEL_COLORS[((stableIndex(link) % count) + count) % count] ?? null;
+}

package/src/player/components/timelineCallbacks.ts

@@ -39,6 +39,14 @@ export interface TimelineDropCallbacks {
   ) => Promise<void> | void;
 }
 
+export type TimelineLinkEdit =
+  | { kind: "unlink"; elements: readonly TimelineElement[] }
+  | { kind: "link"; elements: readonly TimelineElement[] }
+  | { kind: "detach"; element: TimelineElement }
+  | { kind: "merge"; video: TimelineElement; audio: TimelineElement }
+  | { kind: "move-into-sync"; element: TimelineElement; start: number }
+  | { kind: "slip-into-sync"; element: TimelineElement; mediaStart: number };
+
 export interface TimelineEditCallbacks {
   onMoveElement?: (
     element: TimelineElement,
@@ -115,10 +123,13 @@ export interface TimelineEditCallbacks {
     label: string,
   ) => Promise<TimelineEditOutcome | void>;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
+  onLinkEdit?: (edit: TimelineLinkEdit) => Promise<void> | void;
+  onDeleteElementOnly?: (element: TimelineElement) => Promise<void> | void;
   onSplitElement?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   onRazorSplit?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   onRazorSplitAll?: (splitTime: number) => Promise<void> | void;
   onFreezeFrame?: (element: TimelineElement, time: number) => Promise<void> | void;
+  onNotice?: (message: string, tone?: "error" | "info") => void;
   onDeleteKeyframe?: (elementId: string, keyframe: TimelineKeyframeTarget) => void;
   onDeleteAllKeyframes?: (element: TimelineElement, animationId?: string) => void;
   onMoveKeyframeToPlayhead?: (element: TimelineElement, keyframe: TimelineKeyframeTarget) => void;

package/src/player/components/timelineClipDragGestureLifecycle.ts

@@ -70,6 +70,7 @@ interface TimelineClipDragGestureLifecycleInput {
   onBlockedEditAttemptRef: RefObject<
     ((element: TimelineElement, intent: BlockedClipState["intent"]) => void) | undefined
   >;
+  onLinkEditRef: RefObject<TimelineEditCallbacks["onLinkEdit"]>;
   readZIndexRef: RefObject<((element: TimelineElement) => number) | undefined>;
   onStackingPatchesRef: RefObject<
     ((patches: StackingPatch[]) => Promise<unknown> | void) | undefined
@@ -107,6 +108,7 @@ export function mountTimelineClipDragGestureLifecycle({
   onResizeElementRef,
   onResizeElementsRef,
   onBlockedEditAttemptRef,
+  onLinkEditRef,
   readZIndexRef,
   onStackingPatchesRef,
   refreshAfterLaneMoveRef,
@@ -228,6 +230,11 @@ export function mountTimelineClipDragGestureLifecycle({
     if (drag && pointerMatchesGesture(event)) handleDragPointerMove(event, drag);
   };
 
+  const unlinkAltEdited = (gesture: { element: TimelineElement; altKey?: boolean }) => {
+    if (!gesture.altKey || !gesture.element.link) return;
+    void onLinkEditRef.current?.({ kind: "unlink", elements: [gesture.element] });
+  };
+
   const commitResizePointerUp = (
     resize: ResizingClipState,
     groupSession: TimelineGroupResizeSession | null,
@@ -271,6 +278,7 @@ export function mountTimelineClipDragGestureLifecycle({
       ]);
       console.error("[Timeline] Failed to persist clip resize", error);
     });
+    unlinkAltEdited(resize);
   };
 
   const finishBlockedPointerUp = (blocked: BlockedClipState) => {
@@ -293,6 +301,7 @@ export function mountTimelineClipDragGestureLifecycle({
       onStackingPatches: onStackingPatchesRef.current,
       refreshAfterLaneMove: refreshAfterLaneMoveRef.current,
     });
+    unlinkAltEdited(drag);
   };
 
   /** Group gestures commit atomically: one missing member cancels the whole resize. */

package/src/player/components/timelineClipDragTypes.ts

@@ -33,6 +33,7 @@ export interface DraggedClipState {
   snapTime: number | null;
   snapType: TimelineSnapType | null;
   started: boolean;
+  altKey?: boolean;
 }
 
 export interface ResizingClipState {
@@ -63,6 +64,7 @@ export interface ResizingClipState {
     playbackStart?: number;
   }[];
   started: boolean;
+  altKey?: boolean;
 }
 
 export interface BlockedClipState {

package/src/player/components/timelineClipGestureHandlers.ts

@@ -8,6 +8,7 @@ import {
 import type { TimelineEditCapabilities } from "./timelineEditCapabilities";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import { CLIP_HANDLE_W } from "./timelineLayout";
+import { selectClipWithLinks } from "./timelineLinkSelection";
 import { SPLIT_BOUNDARY_EPSILON_S } from "../../utils/timelineElementSplit";
 
 export interface ClipGestureDeps {
@@ -145,6 +146,7 @@ export function createClipGestureHandlers(
       previewDuration: el.duration,
       previewPlaybackStart: el.playbackStart,
       started: false,
+      altKey: e.altKey,
     });
   };
 
@@ -191,6 +193,7 @@ export function createClipGestureHandlers(
       snapTime: null,
       snapType: null,
       started: false,
+      altKey: e.altKey,
     });
   };
 
@@ -217,7 +220,7 @@ export function createClipGestureHandlers(
       return;
     }
     // Clip selection is idempotent; empty timeline space owns deselection.
-    setSelectedElementId(elementKey);
+    selectClipWithLinks(elementKey, e.altKey, setSelectedElementId);
     onSelectElement?.(el);
   };
 

package/src/player/components/timelineLinkSelection.ts

@@ -0,0 +1,23 @@
+import { usePlayerStore } from "../store/playerStore";
+import { expandToLinkedMembers } from "./audioClipLink";
+import { isLinkedSelectionOn } from "../../utils/linkedClipPreferences";
+
+/**
+ * Select `key` the way a clip click does, then widen to link partners; Alt
+ * (or Linked Selection off) selects `key` alone, even inside a larger selection.
+ */
+export function selectClipWithLinks(
+  key: string,
+  altKey: boolean,
+  setSelectedElementId: (id: string) => void,
+): void {
+  const state = usePlayerStore.getState();
+  if (altKey || !isLinkedSelectionOn()) {
+    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);
+}

package/src/player/components/useTimelineClipContextMenu.ts

@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import type { ClipContextMenuState } from "./TimelineProvider";
+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. */
@@ -16,7 +17,7 @@ export function useClipContextMenu(
       e.preventDefault();
       const id = el.key ?? el.id;
       if (!(selectedElementIds.size > 1 && selectedElementIds.has(id))) {
-        setSelectedElementId(id);
+        selectClipWithLinks(id, e.altKey, setSelectedElementId);
         onSelectElement?.(el);
       }
       dismissGapMenu();

package/src/player/components/useTimelineClipDrag.ts

@@ -27,6 +27,8 @@ import type {
   BlockedClipState,
 } from "./timelineClipDragTypes";
 import { getTimelineElementIndexes } from "../lib/timelineElementIndexes";
+import { linkedGestureKeys } from "./audioClipLink";
+import { isLinkedSelectionOn } from "../../utils/linkedClipPreferences";
 import type { TimelineRowGeometry } from "./timelineLayout";
 import {
   mountTimelineClipDragGestureLifecycle,
@@ -65,6 +67,7 @@ interface UseTimelineClipDragInput {
   ) => Promise<void> | void;
   onResizeElements?: NonNullable<TimelineEditCallbacks["onResizeElements"]>;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedClipState["intent"]) => void;
+  onLinkEdit?: TimelineEditCallbacks["onLinkEdit"];
   /** Seeks the preview; a trim shows the frame at its dragged edge. */
   onSeek?: (time: number, options?: { keepPlaying?: boolean; follow?: boolean }) => void;
   setShowPopover: (show: boolean) => void;
@@ -95,6 +98,7 @@ export function useTimelineClipDrag({
   onResizeElement,
   onResizeElements,
   onBlockedEditAttempt,
+  onLinkEdit,
   onSeek,
   setShowPopover,
   setRangeSelectionRef,
@@ -220,6 +224,13 @@ export function useTimelineClipDrag({
         return;
       }
       beginGesture("drag", next.pointerId);
+      gestureSelectedKeysRef.current = linkedGestureKeys(
+        gestureSelectedKeysRef.current,
+        next.element,
+        elementsRef.current,
+        next.altKey === true,
+        isLinkedSelectionOn(),
+      );
       publishDraggedClip(next);
     },
     [beginGesture, publishDraggedClip],
@@ -231,6 +242,13 @@ export function useTimelineClipDrag({
         return;
       }
       beginGesture("resize", next.pointerId);
+      gestureSelectedKeysRef.current = linkedGestureKeys(
+        gestureSelectedKeysRef.current,
+        next.element,
+        elementsRef.current,
+        next.altKey === true,
+        isLinkedSelectionOn(),
+      );
       publishResizingClip(next);
     },
     [beginGesture, publishResizingClip],
@@ -249,6 +267,8 @@ export function useTimelineClipDrag({
   onMoveElementsRef.current = onMoveElements;
   const onBlockedEditAttemptRef = useRef(onBlockedEditAttempt);
   onBlockedEditAttemptRef.current = onBlockedEditAttempt;
+  const onLinkEditRef = useRef(onLinkEdit);
+  onLinkEditRef.current = onLinkEdit;
   const onResizeElementRef = useRef(onResizeElement);
   onResizeElementRef.current = onResizeElement;
   const onResizeElementsRef = useRef(onResizeElements);
@@ -422,6 +442,7 @@ export function useTimelineClipDrag({
       refreshAfterLaneMoveRef,
       readZIndexRef,
       onBlockedEditAttemptRef,
+      onLinkEditRef,
       onResizeElementsRef,
       onResizeElementRef,
       onMoveElementsRef,