@hyperframes/studio 0.8.109 → 0.8.111

package/src/player/components/AudioGainDialog.tsx

@@ -0,0 +1,226 @@
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { audioGainToDb } from "@hyperframes/core/audio-gain";
+import type { TimelineElement } from "../store/timelineElement";
+import { usePlayerStore } from "../store/playerStore";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
+import { useStudioShellContextOptional } from "../../contexts/StudioContext";
+import { measureClipSourcePeak } from "./clipPeakMap";
+import { AUDIO_GAIN_LABEL, normalizeClipsLoudness, writeClipGains } from "./audioGainApply";
+import { useAudioGainDialogStore } from "./audioGainDialogStore";
+import {
+  peakAmplitudeDb,
+  planAudioGain,
+  type AudioGainClip,
+  type AudioGainMode,
+} from "./audioGainPlan";
+
+type DialogMode = AudioGainMode | "loudness";
+
+const PEAK_MODES: ReadonlySet<DialogMode> = new Set(["normalize-max", "normalize-all"]);
+
+const ROWS: ReadonlyArray<{ mode: AudioGainMode; label: string }> = [
+  { mode: "set", label: "Set Gain to" },
+  { mode: "adjust", label: "Adjust Gain by" },
+  { mode: "normalize-max", label: "Normalize Max Peak to" },
+  { mode: "normalize-all", label: "Normalize All Peaks to" },
+];
+
+const keyOf = (el: TimelineElement) => el.key ?? el.id;
+const currentGainDb = (el: TimelineElement | undefined) => {
+  const gain = el?.volume ?? 1;
+  return gain > 0 ? Math.round(audioGainToDb(gain) * 10) / 10 : -60;
+};
+const dbText = (db: number) => `${db < 0 ? "−" : ""}${Math.abs(db).toFixed(1)} dB`;
+
+function useSourcePeaks(elements: readonly TimelineElement[], projectId: string | null) {
+  const [peaks, setPeaks] = useState<Map<string, number | null> | null>(null);
+  useEffect(() => {
+    if (!projectId) return;
+    let live = true;
+    void Promise.all(elements.map((el) => measureClipSourcePeak(el, projectId))).then((found) => {
+      if (live) setPeaks(new Map(elements.map((el, i) => [keyOf(el), found[i] ?? null])));
+    });
+    return () => {
+      live = false;
+    };
+  }, [elements, projectId]);
+  return peaks;
+}
+
+function Row({
+  checked,
+  disabled,
+  label,
+  onSelect,
+  children,
+}: {
+  checked: boolean;
+  disabled?: boolean;
+  label: string;
+  onSelect: () => void;
+  children?: ReactNode;
+}) {
+  return (
+    <label
+      className={`flex items-center justify-between gap-3 py-1 ${disabled ? "opacity-40" : ""}`}
+    >
+      <span className="flex items-center gap-2">
+        <input
+          type="radio"
+          name="audio-gain-mode"
+          checked={checked}
+          disabled={disabled}
+          onChange={onSelect}
+        />
+        {label}
+      </span>
+      {children}
+    </label>
+  );
+}
+
+/** Premiere's Audio Gain dialog for the clips the store names. */
+export function AudioGainDialog({
+  elements,
+  onClose,
+}: {
+  elements: readonly TimelineElement[];
+  onClose: () => void;
+}) {
+  const shell = useStudioShellContextOptional();
+  const edit = useTimelineEditContextOptional();
+  const sessionProjectId = usePlayerStore((s) => s.timelineProjectId);
+  const projectId = shell?.projectId ?? sessionProjectId;
+  const showToast = shell?.showToast ?? edit.onNotice;
+  const peaks = useSourcePeaks(elements, projectId);
+  const [mode, setMode] = useState<DialogMode>("adjust");
+  const [values, setValues] = useState<Record<AudioGainMode, number>>(() => ({
+    set: currentGainDb(elements[0]),
+    adjust: 0,
+    "normalize-max": 0,
+    "normalize-all": 0,
+  }));
+  const clips: AudioGainClip[] = elements.map((el) => ({
+    key: keyOf(el),
+    gain: el.volume ?? 1,
+    sourcePeak: peaks?.get(keyOf(el)) ?? null,
+  }));
+  const peakDb = peakAmplitudeDb(clips);
+  const outOfRange = PEAK_MODES.has(mode) && mode !== "loudness" && values[mode] > 0;
+  const canApply = !outOfRange && !(PEAK_MODES.has(mode) && peakDb === null);
+
+  const apply = async () => {
+    if (!canApply) return;
+    onClose();
+    try {
+      if (mode === "loudness") {
+        if (!projectId) return;
+        showToast?.(await normalizeClipsLoudness(projectId, elements, edit), "info");
+        return;
+      }
+      const byKey = new Map(elements.map((el) => [keyOf(el), el]));
+      const plan = planAudioGain(clips, { mode, db: values[mode] });
+      const edits = plan.flatMap(({ key, gain }) => {
+        const element = byKey.get(key);
+        return element ? [{ element, gain }] : [];
+      });
+      await writeClipGains(edits, edit, AUDIO_GAIN_LABEL);
+    } catch (error) {
+      showToast?.(error instanceof Error ? error.message : String(error), "error");
+    }
+  };
+
+  const field = (rowMode: AudioGainMode) => (
+    <span className="flex items-center gap-1">
+      <input
+        type="number"
+        step={0.1}
+        max={PEAK_MODES.has(rowMode) ? 0 : undefined}
+        aria-label={`${ROWS.find((row) => row.mode === rowMode)?.label ?? ""} dB`}
+        value={values[rowMode]}
+        disabled={mode !== rowMode}
+        className="w-16 rounded border border-neutral-700 bg-neutral-950 px-1 text-right disabled:opacity-50"
+        onChange={(event) =>
+          setValues((prev) => ({ ...prev, [rowMode]: Number(event.target.value) || 0 }))
+        }
+      />
+      dB
+    </span>
+  );
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[300] flex items-center justify-center bg-black/50"
+      onPointerDown={(event) => event.target === event.currentTarget && onClose()}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={AUDIO_GAIN_LABEL}
+        className="w-[340px] rounded-md border border-neutral-700 bg-neutral-900 p-4 text-xs text-neutral-200 shadow-xl"
+        onKeyDown={(event) => {
+          event.stopPropagation();
+          if (event.key === "Escape") onClose();
+          if (event.key !== "Enter") return;
+          event.preventDefault();
+          void apply();
+        }}
+      >
+        <div className="mb-3 text-sm font-medium">{AUDIO_GAIN_LABEL}</div>
+        {ROWS.map((row) => (
+          <Row
+            key={row.mode}
+            label={row.label}
+            checked={mode === row.mode}
+            disabled={PEAK_MODES.has(row.mode) && peaks !== null && peakDb === null}
+            onSelect={() => setMode(row.mode)}
+          >
+            {field(row.mode)}
+          </Row>
+        ))}
+        <Row
+          label="Normalize loudness to −16 LUFS"
+          checked={mode === "loudness"}
+          onSelect={() => setMode("loudness")}
+        />
+        <div className="mt-3 text-neutral-400" data-testid="audio-gain-peak">
+          Peak Amplitude: {peaks === null ? "measuring…" : peakDb === null ? "—" : dbText(peakDb)}
+        </div>
+        {outOfRange && <div className="mt-1 text-red-400">Peak targets must be 0 dB or lower.</div>}
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            type="button"
+            className="rounded px-3 py-1 text-neutral-300 hover:bg-neutral-800"
+            onClick={onClose}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            disabled={!canApply}
+            autoFocus
+            className="rounded bg-blue-500 px-3 py-1 text-white disabled:opacity-40"
+            onClick={() => void apply()}
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+/** Mounted in the timeline's overlays so Studio and embedders that mount the Timeline both get it. */
+export function TimelineAudioGainOverlay() {
+  const targetKeys = useAudioGainDialogStore((s) => s.targetKeys);
+  const close = useAudioGainDialogStore((s) => s.close);
+  const elements = usePlayerStore((s) => s.elements);
+  const targets = useMemo(() => {
+    const wanted = new Set(targetKeys ?? []);
+    return elements.filter((el) => wanted.has(keyOf(el)));
+  }, [elements, targetKeys]);
+  if (!targetKeys || targets.length === 0) return null;
+  return <AudioGainDialog key={targetKeys.join("\n")} elements={targets} onClose={close} />;
+}

package/src/player/components/ClipBadges.test.tsx

@@ -2,7 +2,7 @@
 
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import { usePreviewIframeStore } from "../store/previewIframeStore";
 import { ClipBadges } from "./ClipBadges";
@@ -54,29 +54,53 @@ function mountPreview(html: string): Document {
 }
 
 describe("ClipBadges", () => {
-  it("renders nothing for an untouched clip", () => {
+  it("shows a grey fx badge and no volume on an untouched clip", () => {
     render(talk);
-    expect(document.querySelector("[data-testid='clip-badges']")).toBeNull();
+    expect(labels()).toEqual(["fx:fx"]);
+    const fx = document.querySelector("[data-badge='fx']");
+    expect(fx?.getAttribute("data-fx-active")).toBe("false");
+    expect(fx?.getAttribute("title")).toBe("No effects");
   });
 
   it("falls back to the store's volume without a preview", () => {
     render({ ...talk, volume: 1.8 });
-    expect(labels()).toEqual(["volume:180%"]);
+    expect(labels()).toEqual(["volume:180%", "fx:fx"]);
   });
 
-  it("reads the live node and follows an agent's attribute edit", async () => {
+  it("lights the fx badge from the live node, lists the effects, and shows no link badge", async () => {
     const doc = mountPreview(
       `<video id="talk" data-has-audio="true" data-link="talk-pair" style="clip-path: inset(10px)"></video>`,
     );
     render(talk);
-    expect(labels()).toEqual(["link:🔗", "crop:Crop"]);
+    const fx = () => document.querySelector("[data-badge='fx']");
+    expect(labels()).toEqual(["fx:fx"]);
+    expect(fx()?.getAttribute("data-fx-active")).toBe("true");
+    expect(fx()?.getAttribute("title")).toBe("Crop");
     const node = doc.getElementById("talk");
     await act(async () => {
       node?.setAttribute("data-color-grading", '{"preset":"warm-daylight","intensity":1}');
       node?.setAttribute("data-volume", "0.6");
       await new Promise((resolve) => setTimeout(resolve, 0));
     });
-    expect(labels()).toEqual(["link:🔗", "look:Warm daylight", "crop:Crop", "more:+1"]);
-    expect(document.querySelector("[data-badge='more']")?.getAttribute("title")).toBe("60%");
+    expect(labels()).toEqual(["volume:60%", "fx:fx"]);
+    expect(fx()?.getAttribute("title")).toBe("Look: Warm daylight · Crop");
+  });
+
+  it("opens the clip menu from the fx badge without reaching the clip", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const onOpenMenu = vi.fn();
+    const onClipClick = vi.fn();
+    root = createRoot(host);
+    act(() =>
+      root?.render(
+        <div onClick={onClipClick}>
+          <ClipBadges el={talk} onOpenMenu={onOpenMenu} />
+        </div>,
+      ),
+    );
+    act(() => document.querySelector<HTMLElement>("[data-badge='fx']")?.click());
+    expect(onOpenMenu).toHaveBeenCalledTimes(1);
+    expect(onClipClick).not.toHaveBeenCalled();
   });
 });

package/src/player/components/ClipBadges.tsx

@@ -1,6 +1,6 @@
-import { memo } from "react";
+import { memo, type MouseEvent } from "react";
 import type { TimelineElement } from "../store/playerStore";
-import { readClipBadges, splitVisibleBadges, type ClipBadge } from "./clipToolAttrs";
+import { clipVolumeBadge, readClipEffects } from "./clipToolAttrs";
 import { useClipToolState } from "./useClipToolState";
 
 function SpeakerGlyph({ muted }: { muted: boolean }) {
@@ -21,47 +21,53 @@ function SpeakerGlyph({ muted }: { muted: boolean }) {
   );
 }
 
-function BadgeContent({ badge }: { badge: ClipBadge }) {
-  if (badge.kind === "link") return <span aria-hidden="true">🔗</span>;
-  if (badge.kind === "volume") {
-    const muted = badge.label === "Muted";
-    return (
-      <>
-        <SpeakerGlyph muted={muted} />
-        {muted ? null : <span>{badge.label}</span>}
-      </>
-    );
-  }
-  return <span>{badge.label}</span>;
-}
-
 const BADGE_CLASS =
-  "inline-flex items-center gap-0.5 rounded-[3px] border border-white/20 bg-black/55 px-1 text-[9px] leading-[14px] text-white/90 whitespace-nowrap";
+  "timeline-clip__badge inline-flex items-center gap-0.5 rounded-[3px] border bg-black/55 px-1 text-[9px] leading-[14px] whitespace-nowrap";
+const FX_ON = "border-white/40 text-white font-semibold";
+const FX_OFF = "border-white/10 text-white/35";
 
-/** What is applied to a clip, read from its attributes: a link badge, then at most two more and `+N`. */
-export const ClipBadges = memo(function ClipBadges({ el }: { el: TimelineElement }) {
+/** Premiere's fx badge — grey with no effects, white with any; hover lists them, click opens the clip menu. */
+export const ClipBadges = memo(function ClipBadges({
+  el,
+  onOpenMenu,
+}: {
+  el: TimelineElement;
+  onOpenMenu?: (event: MouseEvent) => void;
+}) {
   const state = useClipToolState(el);
-  const { visible, hidden } = splitVisibleBadges(readClipBadges(state));
-  if (visible.length === 0) return null;
+  const effects = readClipEffects(state);
+  const volume = clipVolumeBadge(state);
+  const hasEffects = effects.length > 0;
+  const openMenu = (event: MouseEvent) => {
+    event.stopPropagation();
+    onOpenMenu?.(event);
+  };
   return (
     <span
       className="pointer-events-none absolute right-1.5 top-0.5 z-[3] flex gap-1"
       data-testid="clip-badges"
     >
-      {visible.map((badge) => (
-        <span key={badge.kind} className={BADGE_CLASS} title={badge.label} data-badge={badge.kind}>
-          <BadgeContent badge={badge} />
-        </span>
-      ))}
-      {hidden.length > 0 && (
+      {volume && (
         <span
-          className={`${BADGE_CLASS} pointer-events-auto`}
-          title={hidden.map((badge) => badge.label).join(", ")}
-          data-badge="more"
+          className={`${BADGE_CLASS} border-white/20 text-white/90`}
+          title={volume}
+          data-badge="volume"
         >
-          +{hidden.length}
+          <SpeakerGlyph muted={volume === "Muted"} />
+          {volume === "Muted" ? null : <span>{volume}</span>}
         </span>
       )}
+      <span
+        className={`${BADGE_CLASS} pointer-events-auto cursor-pointer ${hasEffects ? FX_ON : FX_OFF}`}
+        title={hasEffects ? effects.join(" · ") : "No effects"}
+        data-badge="fx"
+        data-fx-active={hasEffects ? "true" : "false"}
+        onPointerDown={(event) => event.stopPropagation()}
+        onClick={openMenu}
+        onContextMenu={openMenu}
+      >
+        fx
+      </span>
     </span>
   );
 });

package/src/player/components/ClipContextMenu.groups.test.tsx

@@ -84,7 +84,7 @@ describe("ClipContextMenu order", () => {
     const expected = [
       "Split at 2.00s",
       "Freeze frame",
-      "Normalize loudness",
+      "Audio Gain…",
       "Voice",
       "Detach audio",
       "Unlink from audio",

package/src/player/components/ClipContextMenu.tsx

@@ -175,7 +175,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
       </div>
 
       <div role="group" aria-label="Sound" className={GROUP_CLASS}>
-        <ClipMenuAudioItems part="normalize" element={element} onClose={onClose} />
+        <ClipMenuAudioItems part="gain" element={element} onClose={onClose} />
         <ClipMenuToolItems
           group="sound"
           element={element}

package/src/player/components/ClipPeakMarks.tsx

@@ -1,18 +1,6 @@
 import { useEffect, useState, type ReactNode } from "react";
-import { clipPeakRuns, isPeakMap, type ClipSourceWindow, type PeakMap } from "./clipPeakRuns";
-
-const peakMapRequests = new Map<string, Promise<PeakMap | null>>();
-
-function loadPeakMap(url: string): Promise<PeakMap | null> {
-  const pending = peakMapRequests.get(url);
-  if (pending) return pending;
-  const request = fetch(url)
-    .then((res) => (res.ok ? res.json() : null))
-    .then((body: unknown) => (isPeakMap(body) ? body : null))
-    .catch(() => null);
-  peakMapRequests.set(url, request);
-  return request;
-}
+import { clipPeakRuns, type ClipSourceWindow, type PeakMap } from "./clipPeakRuns";
+import { loadPeakMap } from "./clipPeakMap";
 
 const dbText = (db: number) => `${db < 0 ? "−" : "+"}${Math.abs(db).toFixed(1)} dBFS`;
 

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

@@ -70,6 +70,21 @@ describe("timeline viewport geometry", () => {
     const scrollTop = previous.getRowTop(2) - RULER_H + 6;
     expect(getTimelineScrollTopForGeometryChange(previous, next, scrollTop)).toBe(scrollTop + 56);
   });
+
+  it("keeps a row added above the top row in view while the list sits at the top", () => {
+    // No top padding (trackPadding { top: 0 }), so the first row sits right under the ruler.
+    const previous = createTimelineRowGeometry([1, 2, 3], [48, 48, 48], { top: 0 });
+    const next = createTimelineRowGeometry([9, 1, 2, 3], [48, 48, 48, 48], { top: 0 });
+    expect(getTimelineScrollTopForGeometryChange(previous, next, 0)).toBe(0);
+  });
+
+  it("leaves scrollTop to edge auto-scroll while a clip drag adds a row above", () => {
+    const previous = createTimelineRowGeometry([1, 2, 3], [48, 48, 48]);
+    const next = createTimelineRowGeometry([9, 1, 2, 3], [48, 48, 48, 48]);
+    const scrollTop = previous.getRowTop(1) - RULER_H + 6;
+    expect(getTimelineScrollTopForGeometryChange(previous, next, scrollTop, true)).toBe(scrollTop);
+    expect(getTimelineScrollTopForGeometryChange(previous, next, scrollTop)).toBe(scrollTop + 48);
+  });
 });
 
 function getHorizontalGeometry(host: HTMLElement, clipId: string, tickLabel: string) {

package/src/player/components/TimelineClip.test.tsx

@@ -133,6 +133,47 @@ describe("TimelineClip", () => {
     act(() => root.unmount());
   });
 
+  it("names a speed-changed clip like Premiere: [150%] for a constant rate, [ramp] for a lane", () => {
+    const fast = renderClip({
+      element: {
+        id: "a",
+        label: "Hero",
+        tag: "video",
+        start: 0,
+        duration: 2,
+        track: 0,
+        playbackRate: 1.5,
+      },
+    });
+    expect(fast.host.querySelector(".timeline-clip__label")?.textContent).toBe("Hero [150%]");
+    act(() => fast.root.unmount());
+    const automation = JSON.stringify({
+      version: 1,
+      lanes: [
+        {
+          target: "rate",
+          points: [
+            { t: 0, v: 0.5 },
+            { t: 1, v: 1 },
+          ],
+        },
+      ],
+    });
+    const ramp = renderClip({
+      element: {
+        id: "b",
+        label: "Hero",
+        tag: "video",
+        start: 0,
+        duration: 2,
+        track: 0,
+        automation,
+      },
+    });
+    expect(ramp.host.querySelector(".timeline-clip__label")?.textContent).toBe("Hero [ramp]");
+    act(() => ramp.root.unmount());
+  });
+
   it("drops the label chip under 60px even when the clip is selected", () => {
     const { host, root } = renderClip({
       element: { id: "fx", label: "FX", tag: "div", start: 0, duration: 1, track: 0 },

package/src/player/components/TimelineClip.tsx

@@ -14,6 +14,7 @@ import { rendersWaveform } from "./AudioWaveform";
 import { ClipBadges } from "./ClipBadges";
 import { linkLabelColor } from "./linkLabelColor";
 import { OutOfSyncBadge } from "./OutOfSyncBadge";
+import { clipSpeedSuffix } from "./clipToolAttrs";
 
 interface TimelineClipProps {
   el: TimelineElement;
@@ -68,7 +69,7 @@ export const TimelineClip = memo(function TimelineClip({
   const leftPx = el.start * pps;
   const widthPx = Math.max(el.duration * pps, 4);
   const handleOpacity = getClipHandleOpacity({ isHovered, isSelected, isDragging });
-  const displayLabel = el.label || el.id || el.tag;
+  const displayLabel = `${el.label || el.id || el.tag}${clipSpeedSuffix(el.playbackRate, el.automation)}`;
   const ladder = clipWidthLadder(widthPx);
   const showHandles = handleOpacity > 0.01 && (widthPx >= 32 || isSelected);
   const showLabel = ladder === "labeled";
@@ -210,7 +211,7 @@ export const TimelineClip = memo(function TimelineClip({
         </div>
       )}
       {showLabel && <span className="timeline-clip__label">{displayLabel}</span>}
-      {showLabel && !isGestureActor && <ClipBadges el={el} />}
+      {showLabel && !isGestureActor && <ClipBadges el={el} onOpenMenu={onContextMenu} />}
       {!isGestureActor && el.syncOrigin && <OutOfSyncBadge el={el} />}
       {showDefaultText && (
         <span className="timeline-clip__timecode">

package/src/player/components/TimelineLanes.test.tsx

@@ -83,8 +83,14 @@ interface RenderLanesOptions {
   hoveredClip?: string | null;
   renderClipContent?: React.ComponentProps<typeof TimelineLanes>["renderClipContent"];
   snapGuide?: { time: number; type: "beat" | "clip-edge" | "playhead" } | null;
+  withoutSelectHandler?: boolean;
 }
 
+const selectHandlerFor = (
+  options: RenderLanesOptions,
+  handler: (element: TimelineElement | null) => void,
+) => (options.withoutSelectHandler ? undefined : handler);
+
 function renderLanes(options: RenderLanesOptions = {}): {
   host: HTMLDivElement;
   root: Root;
@@ -163,7 +169,6 @@ function renderLanes(options: RenderLanesOptions = {}): {
           setResizingClip={vi.fn()}
           setDraggedClip={vi.fn()}
           setSelectedElementId={setSelectedElementId}
-          shiftClickClipRef={createRef()}
           getPreviewElement={(el) => el}
           getTrackStyle={getTrackStyle}
           gsapAnimations={gsapAnimations}
@@ -174,7 +179,7 @@ function renderLanes(options: RenderLanesOptions = {}): {
           onTogglePropertyGroupKeyframe={vi.fn()}
           onResizeElement={vi.fn()}
           onMoveElement={vi.fn()}
-          onSelectElement={onSelectElement}
+          onSelectElement={selectHandlerFor(next, onSelectElement)}
           onRazorSplit={vi.fn()}
           onRazorSplitAll={vi.fn()}
         />,
@@ -439,6 +444,44 @@ describe("TimelineLanes selection", () => {
     expect(view.onSelectElement).toHaveBeenCalledWith(selected);
     act(() => view.root.unmount());
   });
+
+  it.each([["shiftKey"], ["metaKey"], ["ctrlKey"]])(
+    "%s-click adds a clip to the selection instead of replacing it",
+    (modifier) => {
+      const first = element("clip-a", TRACK_A);
+      const second = element("clip-b", TRACK_B);
+      usePlayerStore.getState().setElements([first, second]);
+      usePlayerStore.getState().setSelection([first.id], first.id);
+      const view = renderLanes({ elements: [first, second] });
+      const clipB = view.host.querySelector('[data-el-id="clip-b"]');
+      const click = (init: MouseEventInit) =>
+        act(() => clipB?.dispatchEvent(new MouseEvent("click", { bubbles: true, ...init })));
+
+      click({ [modifier]: true });
+      expect(usePlayerStore.getState().selectedElementIds).toEqual(new Set(["clip-a", "clip-b"]));
+      expect(view.setSelectedElementId).not.toHaveBeenCalled();
+      expect(view.onSelectElement).toHaveBeenLastCalledWith(second);
+
+      click({ [modifier]: true });
+      expect(usePlayerStore.getState().selectedElementIds).toEqual(new Set(["clip-a"]));
+      expect(view.onSelectElement).toHaveBeenLastCalledWith(first);
+      act(() => view.root.unmount());
+    },
+  );
+  it("Cmd-click adds a clip in a host that passes no onSelectElement", () => {
+    const first = element("clip-a", TRACK_A);
+    const second = element("clip-b", TRACK_B);
+    usePlayerStore.getState().setElements([first, second]);
+    usePlayerStore.getState().setSelection([first.id], first.id);
+    const view = renderLanes({ elements: [first, second], withoutSelectHandler: true });
+    act(() =>
+      view.host
+        .querySelector('[data-el-id="clip-b"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true, metaKey: true })),
+    );
+    expect(usePlayerStore.getState().selectedElementIds).toEqual(new Set(["clip-a", "clip-b"]));
+    act(() => view.root.unmount());
+  });
 });
 
 describe("TimelineLanes clip thumbnails", () => {

package/src/player/components/TimelineLanes.tsx

@@ -77,7 +77,6 @@ export function TimelineLanes({
   setResizingClip,
   setDraggedClip,
   setSelectedElementId,
-  shiftClickClipRef,
   getPreviewElement,
   getTrackStyle,
   keyframeCache,
@@ -404,7 +403,6 @@ export function TimelineLanes({
                         onRazorSplit,
                         onRazorSplitAll,
                         blockedClipRef,
-                        shiftClickClipRef,
                         suppressClickRef,
                         scrollRef,
                         setShowPopover,

package/src/player/components/TimelineOverlays.tsx

@@ -1,3 +1,4 @@
+import { TimelineAudioGainOverlay } from "./AudioGainDialog";
 import { useEffect, useMemo } from "react";
 import type { TimelineElement } from "../store/playerStore";
 import { EditPopover } from "./EditModal";
@@ -222,6 +223,7 @@ export function TimelineOverlays() {
       <TimelineKeyframeMenuOverlay />
       <TimelineClipMenuOverlay />
       <TimelineGapMenuOverlay />
+      <TimelineAudioGainOverlay />
     </>
   );
 }