@hyperframes/studio 0.8.109 → 0.8.111

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

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { clipPeakRuns } from "./clipPeakRuns";
+import { clipPeakRuns, clipSourcePeak } from "./clipPeakRuns";
 
 const map = (bins: number[]) => ({ binSeconds: 1, bins });
 
@@ -36,3 +36,16 @@ describe("clipPeakRuns", () => {
     expect(clipPeakRuns(map([1]), { mediaStart: 0, sourceSpan: 0 }, 1).runs).toEqual([]);
   });
 });
+
+describe("clipSourcePeak", () => {
+  it("is the loudest bin inside the played source window only", () => {
+    const bins = map([0.9, 0.2, 0.4, 0.3, 1]);
+    expect(clipSourcePeak(bins, { mediaStart: 1, sourceSpan: 3 })).toBe(0.4);
+    expect(clipSourcePeak(bins, { mediaStart: 0, sourceSpan: 5 })).toBe(1);
+  });
+
+  it("is null for an empty window or one past the file's end", () => {
+    expect(clipSourcePeak(map([0.5]), { mediaStart: 0, sourceSpan: 0 })).toBeNull();
+    expect(clipSourcePeak(map([0.5]), { mediaStart: 4, sourceSpan: 2 })).toBeNull();
+  });
+});

package/src/player/components/clipPeakRuns.ts

@@ -48,6 +48,17 @@ export function clipPeakRuns(
   return { runs, peakDbfs: runs.length > 0 ? 20 * Math.log10(loudest) : null };
 }
 
+export function clipSourcePeak(map: PeakMap, window: ClipSourceWindow): number | null {
+  if (!(window.sourceSpan > 0) || !(map.binSeconds > 0)) return null;
+  const first = Math.max(0, Math.floor(window.mediaStart / map.binSeconds));
+  const last = Math.min(
+    map.bins.length,
+    Math.ceil((window.mediaStart + window.sourceSpan) / map.binSeconds),
+  );
+  if (last <= first) return null;
+  return map.bins.slice(first, last).reduce((loudest, bin) => Math.max(loudest, bin), 0);
+}
+
 export function isPeakMap(value: unknown): value is PeakMap {
   if (typeof value !== "object" || value === null) return false;
   const bins: unknown = Reflect.get(value, "bins");

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

@@ -5,11 +5,12 @@ import {
   activeLook,
   activeVoicePreset,
   chainWithVoicePreset,
+  clipSpeedSuffix,
   hasCrop,
   isDucked,
+  clipVolumeBadge,
   lookAttrValue,
-  readClipBadges,
-  splitVisibleBadges,
+  readClipEffects,
   type ClipToolState,
 } from "./clipToolAttrs";
 
@@ -98,7 +99,6 @@ const baseState: ClipToolState = {
   colorGrading: null,
   clipPath: null,
   carve: null,
-  link: null,
 };
 
 const rampAutomation = JSON.stringify({
@@ -114,48 +114,64 @@ const rampAutomation = JSON.stringify({
   ],
 });
 
-describe("readClipBadges", () => {
-  it("shows nothing for a plain clip at 100%", () => {
-    expect(readClipBadges(baseState)).toEqual([]);
-  });
-
-  it("lists every applied tool in the wireframe's order", () => {
-    const labels = readClipBadges({
-      ...baseState,
-      volume: 1.8,
-      fxChain: chainWithVoicePreset(null, "voice-clean"),
-      automation: rampAutomation,
-      colorGrading: lookAttrValue("warm-daylight"),
-      clipPath: "inset(0px 20px)",
-      carve: "{}",
-      link: "talk",
-    }).map((b) => b.label);
-    expect(labels).toEqual([
-      "Linked",
-      "Warm daylight",
-      "Voice: Clean",
-      "Ramp",
-      "Crop",
-      "Ducked",
-      "180%",
-    ]);
+describe("readClipEffects", () => {
+  it("lists nothing for a plain clip, so the fx badge stays grey", () => {
+    expect(readClipEffects(baseState)).toEqual([]);
+    expect(readClipEffects({ ...baseState, automation: rampAutomation, volume: 1.8 })).toEqual([]);
   });
 
-  it("badges a muted audio clip but not muted b-roll", () => {
-    expect(readClipBadges({ ...baseState, tag: "audio", muted: true })[0]?.label).toBe("Muted");
-    expect(readClipBadges({ ...baseState, hasSound: false, muted: true })).toEqual([]);
+  it("lists every applied effect in the tooltip's order", () => {
+    expect(
+      readClipEffects({
+        ...baseState,
+        fxChain: chainWithVoicePreset(null, "voice-clean"),
+        colorGrading: lookAttrValue("warm-daylight"),
+        clipPath: "inset(0px 20px)",
+        carve: "{}",
+      }),
+    ).toEqual(["Look: Warm daylight", "Voice: Clean", "Crop", "Ducked"]);
   });
 
-  it("caps at two visible badges plus the link badge", () => {
-    const badges = readClipBadges({
-      ...baseState,
-      link: "talk",
-      colorGrading: lookAttrValue("mono-clean"),
-      clipPath: "inset(5px)",
-      volume: 0.6,
+  it("names a hand-added effect and skips disabled and carve-generated nodes", () => {
+    const chain = serializeAudioFxChain({
+      version: 1,
+      nodes: [
+        { id: "a", type: "highpass", enabled: true, params: { frequency: 80 } },
+        { id: "b", type: "gain", enabled: false, params: {} },
+        { id: "c", type: "gain", enabled: true, fromCarve: true, params: {} },
+      ],
     });
-    const { visible, hidden } = splitVisibleBadges(badges);
-    expect(visible.map((b) => b.label)).toEqual(["Linked", "Mono", "Crop"]);
-    expect(hidden.map((b) => b.label)).toEqual(["60%"]);
+    const effects = readClipEffects({ ...baseState, fxChain: chain });
+    expect(effects).toHaveLength(1);
+    expect(effects[0]).not.toBe("highpass");
+  });
+
+  it("reads a hand-made grading without a menu preset as a Look", () => {
+    expect(readClipEffects({ ...baseState, colorGrading: '{"adjust":{"contrast":0.2}}' })).toEqual([
+      "Look",
+    ]);
+  });
+});
+
+describe("clipVolumeBadge", () => {
+  it("shows volume off 100% and Muted only on a clip with sound", () => {
+    expect(clipVolumeBadge({ ...baseState, volume: 1.8 })).toBe("180%");
+    expect(clipVolumeBadge(baseState)).toBeNull();
+    expect(clipVolumeBadge({ ...baseState, tag: "audio", muted: true })).toBe("Muted");
+    expect(clipVolumeBadge({ ...baseState, hasSound: false, muted: true })).toBeNull();
+  });
+});
+
+describe("clipSpeedSuffix", () => {
+  it("shows a constant speed as a percentage and hides 100%", () => {
+    expect(clipSpeedSuffix(1.5, null)).toBe(" [150%]");
+    expect(clipSpeedSuffix(0.35, null)).toBe(" [35%]");
+    expect(clipSpeedSuffix(1, null)).toBe("");
+    expect(clipSpeedSuffix(undefined, null)).toBe("");
+  });
+
+  it("shows a rate lane as a ramp, whatever the base rate", () => {
+    expect(clipSpeedSuffix(2, rampAutomation)).toBe(" [ramp]");
+    expect(clipSpeedSuffix(1, rampAutomation)).toBe(" [ramp]");
   });
 });

package/src/player/components/clipToolAttrs.ts

@@ -4,11 +4,13 @@
  */
 
 import {
+  getAudioFxDef,
   parseAudioFxChain,
   serializeAudioFxChain,
   type HfAudioFxChain,
+  type HfAudioFxNode,
 } from "@hyperframes/core/audio-fx";
-import { activeAudioFxPresetIds } from "@hyperframes/core/audio-fx-presets";
+import { activeAudioFxPresetIds, getAudioFxPreset } from "@hyperframes/core/audio-fx-presets";
 import { normalizeHfColorGrading } from "@hyperframes/core/color-grading";
 import { parseRateLane } from "@hyperframes/core/speed-ramp";
 import { applyPresetToChain } from "../../components/editor/useApplyAudioFxPreset";
@@ -117,6 +119,17 @@ function hasRateRamp(rawAutomation: string | null | undefined): boolean {
   return parseRateLane(rawAutomation) !== null;
 }
 
+/** Premiere's speed cue on the clip name: ` [ramp]` under a rate lane, else ` [150%]` off 100%. */
+export function clipSpeedSuffix(
+  playbackRate: number | null | undefined,
+  rawAutomation: string | null | undefined,
+): string {
+  if (hasRateRamp(rawAutomation)) return " [ramp]";
+  const rate = playbackRate ?? 1;
+  if (!Number.isFinite(rate) || Math.abs(rate - 1) < 0.005) return "";
+  return ` [${Math.round(rate * 100)}%]`;
+}
+
 const ZERO_INSET = /^inset\(\s*0(px|%)?\s*\)$/i;
 
 export function hasCrop(clipPath: string | null | undefined): boolean {
@@ -124,13 +137,6 @@ export function hasCrop(clipPath: string | null | undefined): boolean {
   return value !== "" && value !== "none" && !ZERO_INSET.test(value);
 }
 
-export type ClipBadgeKind = "link" | "look" | "voice" | "ramp" | "crop" | "ducked" | "volume";
-
-export interface ClipBadge {
-  kind: ClipBadgeKind;
-  label: string;
-}
-
 /** What a clip's attributes say is applied; the element's own attributes, as read off its node. */
 export interface ClipToolState {
   tag: string;
@@ -142,46 +148,43 @@ export interface ClipToolState {
   colorGrading: string | null;
   clipPath: string | null;
   carve: string | null;
-  link: string | null;
 }
 
-function volumeBadge(state: ClipToolState): ClipBadge | null {
-  const isAudio = state.tag === "audio";
-  if (!isAudio && !state.hasSound) return null;
-  if (state.muted) return { kind: "volume", label: "Muted" };
+export function clipVolumeBadge(state: ClipToolState): string | null {
+  if (state.tag !== "audio" && !state.hasSound) return null;
+  if (state.muted) return "Muted";
   const volume = state.volume ?? 1;
   if (Math.abs(volume - 1) < 0.005) return null;
-  return { kind: "volume", label: `${Math.round(volume * 100)}%` };
-}
-
-/** Badges in the wireframe's order: look, voice, ramp, crop, ducked, volume. The link badge leads. */
-export function readClipBadges(state: ClipToolState): ClipBadge[] {
-  const look = lookLabel(activeLook(state.colorGrading));
-  const voice = voicePresetLabel(activeVoicePreset(state.fxChain));
-  const volume = volumeBadge(state);
-  const badges: Array<ClipBadge | null> = [
-    state.link ? { kind: "link", label: "Linked" } : null,
-    look ? { kind: "look", label: look } : null,
-    voice ? { kind: "voice", label: `Voice: ${voice}` } : null,
-    hasRateRamp(state.automation) ? { kind: "ramp", label: "Ramp" } : null,
-    hasCrop(state.clipPath) ? { kind: "crop", label: "Crop" } : null,
-    isDucked(state.carve) ? { kind: "ducked", label: "Ducked" } : null,
-    volume,
+  return `${Math.round(volume * 100)}%`;
+}
+
+function lookEffect(rawGrading: string | null): string | null {
+  const grading = normalizeHfColorGrading(parseJson(rawGrading));
+  if (!grading) return null;
+  const label = lookLabel(grading.preset ?? null);
+  return label ? `Look: ${label}` : "Look";
+}
+
+function presetEffect(presetId: string): string {
+  const voice = voicePresetLabel(presetId);
+  return voice ? `Voice: ${voice}` : (getAudioFxPreset(presetId)?.label ?? presetId);
+}
+
+function chainNodeEffect(node: HfAudioFxNode): string | null {
+  if (node.enabled === false || node.fromCarve) return null;
+  if (node.fromPreset) return presetEffect(node.fromPreset);
+  if (node.fromEq) return "EQ";
+  if (node.fromLeveller) return "Leveller";
+  return node.label ?? getAudioFxDef(node.type)?.label ?? node.type;
+}
+
+/** Every effect on the clip, in the fx badge tooltip's order; empty means a grey badge. */
+export function readClipEffects(state: ClipToolState): string[] {
+  const effects: Array<string | null> = [
+    lookEffect(state.colorGrading),
+    ...parseChainOrEmpty(state.fxChain).nodes.map(chainNodeEffect),
+    hasCrop(state.clipPath) ? "Crop" : null,
+    isDucked(state.carve) ? "Ducked" : null,
   ];
-  return badges.filter((badge): badge is ClipBadge => badge !== null);
-}
-
-const MAX_VISIBLE_BADGES = 2;
-
-/** The link badge is always shown; the rest cap at two, then `+N`. */
-export function splitVisibleBadges(badges: readonly ClipBadge[]): {
-  visible: ClipBadge[];
-  hidden: ClipBadge[];
-} {
-  const link = badges.filter((badge) => badge.kind === "link");
-  const rest = badges.filter((badge) => badge.kind !== "link");
-  return {
-    visible: [...link, ...rest.slice(0, MAX_VISIBLE_BADGES)],
-    hidden: rest.slice(MAX_VISIBLE_BADGES),
-  };
+  return [...new Set(effects.filter((effect): effect is string => effect !== null))];
 }

package/src/player/components/studioShortcuts.ts

@@ -4,6 +4,7 @@ export const STUDIO_PLAIN_KEYS = {
   split: "s",
   record: "r",
   addKeyframe: "k",
+  audioGain: "g",
 } as const;
 
 export interface ShortcutHint {
@@ -51,6 +52,7 @@ export const DEFAULT_SHORTCUT_SECTIONS: readonly ShortcutSection[] = [
       { key: "⌘V", label: "Paste element" },
       { key: "⌘X", label: "Cut element" },
       { key: hintKey(STUDIO_PLAIN_KEYS.split), label: "Split clip at playhead" },
+      { key: hintKey(STUDIO_PLAIN_KEYS.audioGain), label: "Audio Gain for clips with sound" },
       { key: "⇧Click", label: "Razor tool: split all tracks" },
       { key: "[", label: "Select clips starting before the playhead" },
       { key: "]", label: "Select clips running at or after the playhead" },

package/src/player/components/timelineCallbacks.ts

@@ -122,6 +122,12 @@ export interface TimelineEditCallbacks {
     value: string | null,
     label: string,
   ) => Promise<TimelineEditOutcome | void>;
+  /** One attribute on several clips, saved as one undo step. */
+  onSetElementsAttributeQuiet?: (
+    edits: ReadonlyArray<{ element: TimelineElement; value: string | null }>,
+    attr: string,
+    label: string,
+  ) => Promise<TimelineEditOutcome | void>;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   onLinkEdit?: (edit: TimelineLinkEdit) => Promise<void> | void;
   onDeleteElementOnly?: (element: TimelineElement) => Promise<void> | void;

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

@@ -726,3 +726,99 @@ describe("a nested clip's drop stops at its host's start in the preview", () =>
     expect(await saved(early, 1)).toBe(1);
   });
 });
+
+describe("an audio clip stays inside its partner video", () => {
+  const video = (extra: Partial<TimelineElement> = {}) => ({
+    ...clip("v", 0, 10, 20, 1),
+    syncOrigin: "lk-1",
+    ...extra,
+  });
+  const audio = (extra: Partial<TimelineElement> = {}) => ({
+    ...clip("a", 1, 12, 8, 0, "audio"),
+    syncOrigin: "lk-1",
+    ...extra,
+  });
+  const audioCtx = (elements: TimelineElement[], selected: string[] = []) => ({
+    ...ctx(undefined, elements),
+    trackOrder: [0, 1],
+    audioTracks: new Set([1]),
+    selectedKeys: new Set(selected),
+  });
+
+  it("a drag past the video's end stops with the audio's end on it", () => {
+    const a = audio();
+    const { drag, clientX, clientY } = horizontalDrag(a, 1.5, 30);
+    const next = computeDragPreview(drag, clientX, clientY, audioCtx([video(), a]));
+    expect(next.previewStart).toBe(22);
+    expect(next.pointerClientX).toBe(drag.originClientX + 10 * PPS);
+  });
+
+  it("a drag before the video's start stops at it, linked or same-source", () => {
+    const linked = audio({ syncOrigin: undefined, link: "lk-9" });
+    const { drag, clientX, clientY } = horizontalDrag(linked, 1.5, -10);
+    const elements = [video({ syncOrigin: undefined, link: "lk-9" }), linked];
+    expect(computeDragPreview(drag, clientX, clientY, audioCtx(elements)).previewStart).toBe(10);
+  });
+
+  it("moves freely with no partner video, or when the video moves with it", () => {
+    const loose = audio({ syncOrigin: undefined });
+    const free = horizontalDrag(loose, 1.5, 30);
+    expect(
+      computeDragPreview(free.drag, free.clientX, free.clientY, audioCtx([video(), loose]))
+        .previewStart,
+    ).toBe(42);
+    const a = audio();
+    const both = horizontalDrag(a, 1.5, 30);
+    expect(
+      computeDragPreview(both.drag, both.clientX, both.clientY, audioCtx([video(), a], ["v", "a"]))
+        .previewStart,
+    ).toBe(42);
+  });
+
+  it("rejects a drop that collision placement would push outside the video", () => {
+    const a = audio();
+    const obstacle = clip("o", 1, 20, 10, 0, "audio");
+    const { drag, clientX, clientY } = horizontalDrag(a, 1.5, 10);
+    const next = computeDragPreview(drag, clientX, clientY, audioCtx([video(), a, obstacle]));
+    expect(next.previewStart).toBeGreaterThanOrEqual(10);
+    expect(next.previewStart + a.duration).toBeLessThanOrEqual(30);
+  });
+
+  it("keeps an audio carried in a multi-selection inside its video", () => {
+    const a = audio();
+    const title = clip("t", 0, 40, 4, 0, "text");
+    const { drag, clientX, clientY } = horizontalDrag(title, 0.5, 30);
+    const elements = [video(), a, title];
+    const next = computeDragPreview(drag, clientX, clientY, audioCtx(elements, ["t", "a"]));
+    expect(next.previewStart).toBe(50);
+  });
+
+  const trim = (edge: "start" | "end", deltaSeconds: number, gestureKeys: string[] = []) =>
+    computeResizePreview(
+      {
+        element: audio({ sourceDuration: 100, playbackStart: 20 }),
+        edge,
+        originClientX: 0,
+        previewStart: 12,
+        previewDuration: 8,
+        started: true,
+      },
+      deltaSeconds * 100,
+      {
+        scroll: fakeScroll(),
+        pps: 100,
+        buildSnapTargets: () => [],
+        elements: [video(), audio()],
+        gestureKeys: new Set(["a", ...gestureKeys]),
+      },
+    );
+
+  it("a trim cannot extend past the video's start or end", () => {
+    expect(trim("end", 50)).toMatchObject({ previewStart: 12, previewDuration: 18 });
+    expect(trim("start", -10)).toMatchObject({ previewStart: 10, previewDuration: 10 });
+  });
+
+  it("a trim carried by the video too is not held to the video's old span", () => {
+    expect(trim("end", 50, ["v"]).previewDuration).toBe(58);
+  });
+});

package/src/player/components/timelineClipDragPreview.ts

@@ -23,6 +23,7 @@ import {
 import { groupMoveFloor, resolveGroupMovers } from "./timelineMultiDragPreview";
 import type { DraggedClipState, ResizingClipState } from "./timelineClipDragTypes";
 import { STUDIO_PREVIEW_FPS } from "../lib/time";
+import { heldAudioShiftRange, heldPartnerVideoBounds } from "./audioClipLink";
 
 /** Snap-target builder closure supplied by the hook (closes over refs + store). */
 type BuildSnapTargets = (
@@ -111,6 +112,7 @@ interface GroupDrag {
   obstacles: TimelineElement[];
   /** Lowest start the grabbed clip may take (see groupMoveFloor). */
   floor: number;
+  moving: ReadonlySet<string>;
 }
 
 function resolveGroupDrag(drag: DraggedClipState, ctx: DragPreviewContext): GroupDrag {
@@ -119,14 +121,20 @@ function resolveGroupDrag(drag: DraggedClipState, ctx: DragPreviewContext): Grou
     ctx.selectedKeys,
     drag.element.key ?? drag.element.id,
   );
-  if (!movers) return { obstacles: ctx.elements, floor: groupMoveFloor(drag.element, []) };
+  if (!movers) {
+    const moving = new Set([drag.element.key ?? drag.element.id]);
+    return { obstacles: ctx.elements, floor: groupMoveFloor(drag.element, []), moving };
+  }
   const moving = new Set(movers.map((e) => e.key ?? e.id));
   return {
     obstacles: ctx.elements.filter((e) => !moving.has(e.key ?? e.id)),
     floor: groupMoveFloor(drag.element, movers),
+    moving,
   };
 }
 
+const SHIFT_EPSILON_S = 1e-6;
+
 /** Recompute the dragged-clip preview (move + snap + group clamp + drop placement). */
 export function computeDragPreview(
   drag: DraggedClipState,
@@ -179,13 +187,25 @@ export function computeDragPreview(
   );
   // A group moves rigidly: the grabbed clip stops where any mover would cross its host's start.
   const group = resolveGroupDrag(drag, ctx);
-  const previewStart = Math.max(snap.start, group.floor);
+  const dragKey = drag.element.key ?? drag.element.id;
+  const passengers = ctx.elements.filter(
+    (el) => (el.key ?? el.id) !== dragKey && group.moving.has(el.key ?? el.id),
+  );
+  const movers = [drag.element, ...passengers];
+  const shift = heldAudioShiftRange(movers, ctx.elements, group.moving);
+  const origin = drag.element.start;
+  const floored = Math.max(snap.start, group.floor);
+  const previewStart = origin + Math.max(shift.min, Math.min(floored - origin, shift.max));
   const placement = resolveDropPlacement(drag, clientY, previewStart, nextMove.track, ctx, group);
+  const placedShift = placement.start - origin;
+  if (placedShift < shift.min - SHIFT_EPSILON_S || placedShift > shift.max + SHIFT_EPSILON_S) {
+    return { ...drag, started: true };
+  }
   const { track: previewTrack, insertRow } = placement;
   return {
     ...drag,
     started: true,
-    pointerClientX: clientX,
+    pointerClientX: clientX - (floored - previewStart) * pps,
     pointerClientY: clientY,
     previewStart: placement.start,
     previewTrack,
@@ -210,6 +230,8 @@ export interface ResizePreviewContext {
   scroll: HTMLDivElement | null;
   pps: number;
   buildSnapTargets: BuildSnapTargets;
+  elements?: readonly TimelineElement[];
+  gestureKeys?: ReadonlySet<string>;
 }
 
 export interface ResizePreviewResult {
@@ -253,14 +275,18 @@ export function computeResizePreview(
   // rightward and, after a far move, collapsed a clip to the sliver between its
   // start and the comp end (the 8s→0.95s audio incident). Images/text/shapes
   // have no source, so they extend freely.
-  const maxEnd = resize.element.start + sourceRemaining;
+  const video = ctx.elements
+    ? heldPartnerVideoBounds(resize.element, ctx.elements, ctx.gestureKeys ?? new Set())
+    : null;
+  const minStart = Math.max(clampToHostStart(resize.element, 0), video?.start ?? 0);
+  const maxEnd = Math.min(resize.element.start + sourceRemaining, video?.end ?? Infinity);
   let nextResize = resolveTimelineResize(
     {
       start: resize.element.start,
       duration: resize.element.duration,
       originClientX: resize.originClientX,
       pixelsPerSecond: pps,
-      minStart: clampToHostStart(resize.element, 0),
+      minStart,
       maxEnd,
       playbackStart:
         resize.edge === "start" && canSeedPlaybackStart
@@ -303,8 +329,7 @@ export function computeResizePreview(
       const { time: snapped, target } = snapTimelineTime(nextResize.start, trimTargets, snapSecs);
       const clip = { ...nextResize, playbackRate: resize.element.playbackRate };
       const delta = snapped - nextResize.start;
-      const floor = clampToHostStart(resize.element, 0);
-      const bounds = clipStartTrimDeltaBounds(clip, floor, resolveTimelineMinDuration());
+      const bounds = clipStartTrimDeltaBounds(clip, minStart, resolveTimelineMinDuration());
       if (target && delta >= bounds.minDelta - 1e-6 && delta <= bounds.maxDelta + 1e-6) {
         if (snapped !== nextResize.start) nextResize = applyClipStartTrimDelta(clip, delta);
         snap = target;

package/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 { selectClipWithLinks } from "./timelineLinkSelection";
+import { selectClipWithLinks, toggleClipWithLinks } from "./timelineLinkSelection";
 import { SPLIT_BOUNDARY_EPSILON_S } from "../../utils/timelineElementSplit";
 
 export interface ClipGestureDeps {
@@ -18,11 +18,6 @@ export interface ClipGestureDeps {
   onRazorSplit?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   onRazorSplitAll?: (splitTime: number) => Promise<void> | void;
   blockedClipRef: React.RefObject<BlockedClipState | null>;
-  shiftClickClipRef: React.RefObject<{
-    element: TimelineElement;
-    anchorX: number;
-    anchorY: number;
-  } | null>;
   suppressClickRef: React.RefObject<boolean>;
   scrollRef: React.RefObject<HTMLDivElement | null>;
   setShowPopover(v: boolean): void;
@@ -45,9 +40,11 @@ function canStartResize(
   return capabilities.canTrimEnd;
 }
 
+const isAdditiveClick = (e: { shiftKey: boolean; metaKey: boolean; ctrlKey: boolean }) =>
+  e.shiftKey || e.metaKey || e.ctrlKey;
+
 type PointerDownAction =
   | { kind: "ignore" }
-  | { kind: "arm-shift-click" }
   | { kind: "block"; intent: BlockedTimelineEditIntent; rect: DOMRect }
   | { kind: "move"; rect: DOMRect };
 
@@ -82,7 +79,7 @@ function resolvePointerDownAction(
 ): PointerDownAction {
   if (e.button !== 0) return { kind: "ignore" };
   if (usePlayerStore.getState().activeTool === "razor") return { kind: "ignore" };
-  if (e.shiftKey) return { kind: "arm-shift-click" };
+  if (isAdditiveClick(e)) return { kind: "ignore" };
 
   const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
   const intent = resolveBlockedTimelineEditIntent({
@@ -119,7 +116,6 @@ export function createClipGestureHandlers(
     onRazorSplit,
     onRazorSplitAll,
     blockedClipRef,
-    shiftClickClipRef,
     suppressClickRef,
     scrollRef,
     setShowPopover,
@@ -154,11 +150,6 @@ export function createClipGestureHandlers(
     const action = resolvePointerDownAction(e, capabilities, onResizeElement, onMoveElement);
     if (action.kind === "ignore") return;
 
-    if (action.kind === "arm-shift-click") {
-      shiftClickClipRef.current = { element: el, anchorX: e.clientX, anchorY: e.clientY };
-      return;
-    }
-
     if (action.kind === "block") {
       blockedClipRef.current = {
         pointerId: e.pointerId,
@@ -197,26 +188,30 @@ export function createClipGestureHandlers(
     });
   };
 
+  const razorSplit = (e: ReactMouseEvent, split: NonNullable<typeof onRazorSplit>): void => {
+    const clipRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const splitTime = previewElement.start + (e.clientX - clipRect.left) / pps;
+    const clampedTime = Math.max(
+      previewElement.start + SPLIT_BOUNDARY_EPSILON_S,
+      Math.min(
+        previewElement.start + previewElement.duration - SPLIT_BOUNDARY_EPSILON_S,
+        splitTime,
+      ),
+    );
+    if (e.shiftKey && onRazorSplitAll) onRazorSplitAll(clampedTime);
+    else split(el, clampedTime);
+  };
+
   const onClick = (e: ReactMouseEvent): void => {
     e.stopPropagation();
     if (suppressClickRef.current) return;
-    const { activeTool } = usePlayerStore.getState();
-    if (activeTool === "razor" && onRazorSplit) {
-      const clipRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      const clickOffsetX = e.clientX - clipRect.left;
-      const splitTime = previewElement.start + clickOffsetX / pps;
-      const clampedTime = Math.max(
-        previewElement.start + SPLIT_BOUNDARY_EPSILON_S,
-        Math.min(
-          previewElement.start + previewElement.duration - SPLIT_BOUNDARY_EPSILON_S,
-          splitTime,
-        ),
-      );
-      if (e.shiftKey && onRazorSplitAll) {
-        onRazorSplitAll(clampedTime);
-      } else {
-        onRazorSplit(el, clampedTime);
-      }
+    if (usePlayerStore.getState().activeTool === "razor" && onRazorSplit) {
+      razorSplit(e, onRazorSplit);
+      return;
+    }
+    if (isAdditiveClick(e)) {
+      const primary = toggleClipWithLinks(elementKey, e.altKey);
+      onSelectElement?.(primary);
       return;
     }
     // Clip selection is idempotent; empty timeline space owns deselection.

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

@@ -1,6 +1,5 @@
 import { describe, expect, it } from "vitest";
 import {
-  buildClipRangeSelection,
   buildPromptCopyText,
   buildTimelineElementAgentPrompt,
   buildTimelineAgentPrompt,
@@ -607,18 +606,6 @@ describe("resolveBlockedTimelineEditIntent", () => {
   });
 });
 
-describe("buildClipRangeSelection", () => {
-  it("anchors the full clip range at the click position", () => {
-    expect(
-      buildClipRangeSelection({ start: 1.25, duration: 3.5 }, { anchorX: 320, anchorY: 180 }),
-    ).toEqual({
-      start: 1.25,
-      end: 4.75,
-      anchorX: 320,
-      anchorY: 180,
-    });
-  });
-});
 describe("resolveTimelineAutoScroll", () => {
   it("does not scroll when the pointer stays away from the edges", () => {
     expect(