@hyperframes/studio 0.8.106 → 0.8.108

package/src/player/components/ClipBadges.tsx

@@ -0,0 +1,67 @@
+import { memo } from "react";
+import type { TimelineElement } from "../store/playerStore";
+import { readClipBadges, splitVisibleBadges, type ClipBadge } from "./clipToolAttrs";
+import { useClipToolState } from "./useClipToolState";
+
+function SpeakerGlyph({ muted }: { muted: boolean }) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 16 16" aria-hidden="true">
+      <path d="M2 6h3l4-3v10l-4-3H2z" fill="currentColor" />
+      {muted ? (
+        <path d="M11 6l4 4M15 6l-4 4" stroke="currentColor" strokeWidth="1.4" />
+      ) : (
+        <path
+          d="M11 5.5a3.5 3.5 0 0 1 0 5M12.5 3.5a6 6 0 0 1 0 9"
+          stroke="currentColor"
+          fill="none"
+          strokeWidth="1.4"
+        />
+      )}
+    </svg>
+  );
+}
+
+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";
+
+/** 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 }) {
+  const state = useClipToolState(el);
+  const { visible, hidden } = splitVisibleBadges(readClipBadges(state));
+  if (visible.length === 0) return null;
+  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 && (
+        <span
+          className={`${BADGE_CLASS} pointer-events-auto`}
+          title={hidden.map((badge) => badge.label).join(", ")}
+          data-badge="more"
+        >
+          +{hidden.length}
+        </span>
+      )}
+    </span>
+  );
+});

package/src/player/components/ClipContextMenu.tsx

@@ -5,6 +5,8 @@ import { canSplitElement } from "../../utils/timelineElementSplit";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 import { useMenuKeyboardNav } from "./menuKeyboardNav";
 import type { TimelineClipMenuItem } from "./TimelineTypes";
+import { ClipMenuToolItems } from "./clipMenuToolItems";
+import { ClipMenuAudioItems } from "./clipMenuAudioItems";
 
 interface ClipContextMenuProps {
   x: number;
@@ -144,10 +146,18 @@ export const ClipContextMenu = memo(function ClipContextMenu({
             <span>{splitLabel}</span>
             <span className="text-neutral-500 text-[10px] ml-3">S</span>
           </button>
+          <ClipMenuToolItems
+            group="time"
+            element={element}
+            currentTime={currentTime}
+            onClose={onClose}
+          />
           <div className="my-1 border-t border-neutral-700/60" />
         </>
       )}
 
+      <ClipMenuAudioItems element={element} onClose={onClose} />
+
       {(onCopy || onPaste || onDuplicate) && (
         <>
           {onCopy && (
@@ -198,6 +208,18 @@ export const ClipContextMenu = memo(function ClipContextMenu({
         </>
       )}
 
+      <ClipMenuToolItems
+        group="sound"
+        element={element}
+        currentTime={currentTime}
+        onClose={onClose}
+      />
+      <ClipMenuToolItems
+        group="picture"
+        element={element}
+        currentTime={currentTime}
+        onClose={onClose}
+      />
       <button
         type="button"
         role="menuitem"

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

@@ -0,0 +1,41 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { createHappyDomRootHarness } from "./testRootHarness";
+import { ClipPeakMarks } from "./ClipPeakMarks";
+
+const harness = createHappyDomRootHarness();
+
+async function render(url: string, bins: number[], gain: number) {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async () => Response.json({ binSeconds: 1, bins })),
+  );
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  await act(async () => {
+    harness.mount(host).render(
+      <ClipPeakMarks peaksUrl={url} sourceWindow={{ mediaStart: 0, sourceSpan: 2 }} gain={gain}>
+        <span>wave</span>
+      </ClipPeakMarks>,
+    );
+  });
+  await act(async () => {});
+  vi.unstubAllGlobals();
+  return host;
+}
+
+describe("ClipPeakMarks", () => {
+  it("paints red marks and the peak on a clip that redlines", async () => {
+    const host = await render("/api/projects/p/peaks/loud.mp4", [0.2, 0.98], 1);
+    expect(host.textContent).toContain("wave");
+    expect(host.querySelector("[data-testid=clip-peak-marks]")?.textContent).toContain(
+      "▲ peaks −0.2 dBFS",
+    );
+  });
+
+  it("paints nothing on a quiet clip", async () => {
+    const host = await render("/api/projects/p/peaks/quiet.mp4", [0.25, 0.25], 1);
+    expect(host.querySelector("[data-testid=clip-peak-marks]")).toBeNull();
+  });
+});

package/src/player/components/ClipPeakMarks.tsx

@@ -0,0 +1,71 @@
+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;
+}
+
+const dbText = (db: number) => `${db < 0 ? "−" : "+"}${Math.abs(db).toFixed(1)} dBFS`;
+
+/** A clip's waveform with red marks where it, at its own volume, reaches the export ceiling. */
+export function ClipPeakMarks({
+  peaksUrl,
+  sourceWindow,
+  gain,
+  children,
+}: {
+  peaksUrl: string | undefined;
+  sourceWindow: ClipSourceWindow;
+  gain: number;
+  children?: ReactNode;
+}) {
+  const [map, setMap] = useState<PeakMap | null>(null);
+  useEffect(() => {
+    if (!peaksUrl) return;
+    let live = true;
+    void loadPeakMap(peaksUrl).then((loaded) => {
+      if (live) setMap(loaded);
+    });
+    return () => {
+      live = false;
+    };
+  }, [peaksUrl]);
+  const { runs, peakDbfs } = map
+    ? clipPeakRuns(map, sourceWindow, gain)
+    : { runs: [], peakDbfs: null };
+  return (
+    <div className="relative h-full w-full">
+      {children}
+      {runs.length > 0 && peakDbfs !== null && (
+        <div
+          className="pointer-events-none absolute inset-0"
+          data-testid="clip-peak-marks"
+          title={`Peaks ${dbText(peakDbfs)} at this volume; export lowers the whole mix`}
+        >
+          {runs.map((run) => (
+            <div
+              key={run.from}
+              className="absolute inset-y-0 bg-red-500/80"
+              style={{
+                left: `${run.from * 100}%`,
+                width: `max(1px, ${(run.to - run.from) * 100}%)`,
+              }}
+            />
+          ))}
+          <span className="absolute top-0 right-1 font-mono text-[9px] leading-none text-red-400">
+            ▲ peaks {dbText(peakDbfs)}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -16,7 +16,6 @@ import {
   getTimelineScrollLeftForZoomAnchor,
   getTimelineScrollLeftForZoomTransition,
   shouldShowTimelineShortcutHint,
-  shouldHandleTimelineDeleteKey,
   shouldAutoScrollTimeline,
   getTimelineVisibleTimeRange,
   getTimelineScrollTopForGeometryChange,
@@ -1248,26 +1247,6 @@ describe("shouldShowTimelineShortcutHint", () => {
   });
 });
 
-describe("shouldHandleTimelineDeleteKey", () => {
-  it("handles Delete and Backspace when focus is not in an editor", () => {
-    expect(shouldHandleTimelineDeleteKey({ key: "Delete" })).toBe(true);
-    expect(shouldHandleTimelineDeleteKey({ key: "Backspace" })).toBe(true);
-  });
-
-  it("ignores modifier shortcuts", () => {
-    expect(shouldHandleTimelineDeleteKey({ key: "Delete", metaKey: true })).toBe(false);
-    expect(shouldHandleTimelineDeleteKey({ key: "Backspace", ctrlKey: true })).toBe(false);
-  });
-
-  it("ignores input and editable targets", () => {
-    const input = { tagName: "INPUT", isContentEditable: false };
-    const editable = { tagName: "DIV", isContentEditable: true };
-
-    expect(shouldHandleTimelineDeleteKey({ key: "Delete", target: input })).toBe(false);
-    expect(shouldHandleTimelineDeleteKey({ key: "Delete", target: editable })).toBe(false);
-  });
-});
-
 describe("getDefaultDroppedTrack", () => {
   it("defaults to track 0 when there are no rows yet", () => {
     expect(getDefaultDroppedTrack([])).toBe(0);

package/src/player/components/Timeline.tsx

@@ -26,7 +26,6 @@ export {
   getTimelineCanvasHeight,
   shouldShowTimelineShortcutHint,
   resolveTimelineAssetDrop,
-  shouldHandleTimelineDeleteKey,
   getDefaultDroppedTrack,
 } from "./timelineLayout";
 export { formatTimelineTickLabel, generateTicks } from "./timelineRulerGeometry";

package/src/player/components/TimelineClip.tsx

@@ -11,6 +11,7 @@ import { isAudioTimelineElement } from "../../utils/timelineInspector";
 import { timelineClipFocusId } from "./timelineNavigationIdentity";
 import { ClipFadesContext, TimelineClipFades, useClipFadeDraft } from "./TimelineClipFades";
 import { rendersWaveform } from "./AudioWaveform";
+import { ClipBadges } from "./ClipBadges";
 
 interface TimelineClipProps {
   el: TimelineElement;
@@ -204,6 +205,7 @@ export const TimelineClip = memo(function TimelineClip({
         </div>
       )}
       {showLabel && <span className="timeline-clip__label">{displayLabel}</span>}
+      {showLabel && !isGestureActor && <ClipBadges el={el} />}
       {showDefaultText && (
         <span className="timeline-clip__timecode">
           {startLabel}-{endLabel}s

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

@@ -181,13 +181,13 @@ describe("TimelineFxButton", () => {
       <TimelineFxButton
         variant="group-pointer"
         clipCount={2}
-        refusal="Video audio can't be grouped yet — only audio clips can join a group."
+        refusal="This track can't be grouped."
         onGroupClips={onGroupClips}
       />,
     );
     act(() => byTextButton(host, "FX")?.click());
     const dialog = document.querySelector('[role="dialog"]');
-    expect(dialog?.textContent).toContain("Video audio can't be grouped yet");
+    expect(dialog?.textContent).toContain("This track can't be grouped");
     expect(document.querySelector('input[aria-label="Group name"]')).toBeNull();
     expect(
       Array.from(document.body.querySelectorAll("button")).some((b) => b.textContent === "Group"),

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

@@ -869,6 +869,43 @@ describe("TimelineTrackHeader", () => {
       act(() => view.root.unmount());
     });
 
+    it("offers grouping on a track of audible videos, not on muted b-roll", () => {
+      const aRoll: TimelineElement = {
+        ...VOICE,
+        id: "a-roll",
+        domId: "a-roll",
+        tag: "video",
+        hasAudio: true,
+      };
+      const aRoll2: TimelineElement = { ...aRoll, id: "a-roll-2", domId: "a-roll-2" };
+      const bRoll: TimelineElement = {
+        ...aRoll,
+        id: "b-roll",
+        domId: "b-roll",
+        hasAudio: undefined,
+      };
+      const bRoll2: TimelineElement = { ...bRoll, id: "b-roll-2", domId: "b-roll-2" };
+      const opts = {
+        keyframeClip: aRoll,
+        trackElements: [aRoll, aRoll2],
+        clipCount: 2,
+        animations: [],
+        expanded: false,
+      };
+      const pointer = (host: HTMLElement) =>
+        host.querySelector<HTMLButtonElement>(
+          'button[aria-label="Effects — group these clips first"]',
+        );
+      const view = renderHeader(opts);
+      const button = pointer(view.host);
+      expect(button).not.toBeNull();
+      act(() => button?.click());
+      expect(document.body.textContent).not.toContain("can't be grouped");
+      view.rerender({ ...opts, keyframeClip: bRoll, trackElements: [bRoll, bRoll2] });
+      expect(pointer(view.host)).toBeNull();
+      act(() => view.root.unmount());
+    });
+
     // The header is a 48px column of exactly TWO lines — what the row is, then
     // what you can do to it. The group pointer used to render as a sibling of
     // both, making a third: 17 + 24 + 24 + gaps in a 48px box, which

package/src/player/components/TimelineTrackHeader.tsx

@@ -226,11 +226,9 @@ export function TimelineTrackHeader({
   const singleAudioClip =
     isAudioTrack && clipCount === 1 && trackElements.length > 0 ? trackElements[0] : null;
   const isTrackGrouped = trackElements.some((el) => el.audioGroup);
-  // A video track carries sound the render mixes but preview never routes
-  // through Web Audio, which is why §1.4 keeps groups audio-only. It still
-  // needs to be TOLD that, so it earns the button and a refusal.
-  const isVideoWithAudioTrack =
-    !isAudioTrack && trackElements.some((el) => el.tag.toLowerCase() === "video");
+  const audioBearingClips = isAudioTrack
+    ? trackElements
+    : trackElements.filter((el) => el.hasAudio === true);
   const writeClipFxChain = (
     clip: TimelineElement,
     next: HfAudioFxChain,
@@ -256,7 +254,7 @@ export function TimelineTrackHeader({
   // UI showed the track as grouped. The button is withheld instead of acting on
   // a subset, which is also why the carve path's loud guard cannot catch this:
   // the unresolvable ids were filtered out before the call.
-  const groupableClipIds = trackElements.map(runtimeAudioId);
+  const groupableClipIds = audioBearingClips.map(runtimeAudioId);
   const allGroupableClipIds = groupableClipIds.every((id): id is string => id !== null)
     ? groupableClipIds
     : null;
@@ -342,25 +340,14 @@ export function TimelineTrackHeader({
                       onOpenRack={() => openClipFxRack(singleAudioClip)}
                     />
                   )}
-                  {showAudioEffects &&
-                    clipCount > 1 &&
-                    !isTrackGrouped &&
-                    (isAudioTrack ? canGroupWholeTrack : isVideoWithAudioTrack) && (
-                      <TimelineFxButton
-                        variant="group-pointer"
-                        clipCount={trackElements.length}
-                        defaultLabel={trackLabel}
-                        // Groups are audio-only in v1 (§1.4). A video track showing no
-                        // button at all is the silent limit §5 forbids, so it gets the
-                        // button and a reason instead.
-                        refusal={
-                          isAudioTrack
-                            ? undefined
-                            : "Video audio can't be grouped yet — only audio clips can join a group."
-                        }
-                        onGroupClips={groupUngroupedClips}
-                      />
-                    )}
+                  {showAudioEffects && clipCount > 1 && !isTrackGrouped && canGroupWholeTrack && (
+                    <TimelineFxButton
+                      variant="group-pointer"
+                      clipCount={audioBearingClips.length}
+                      defaultLabel={trackLabel}
+                      onGroupClips={groupUngroupedClips}
+                    />
+                  )}
                   {/* The lane disclosure, on the row's own layout rather than by
                     swapping it for a keyframe-layer row. */}
                   {disclosable && (

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

@@ -0,0 +1,125 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createHappyDomRootHarness } from "./testRootHarness";
+import { ClipMenuAudioItems } from "./clipMenuAudioItems";
+import type { TimelineElement } from "../store/timelineElement";
+
+const showToast = vi.fn();
+const setQuiet = vi.fn<(...args: unknown[]) => Promise<unknown>>(async () => {});
+const iframe = document.createElement("iframe");
+
+vi.mock("../../contexts/StudioContext", () => ({
+  useStudioShellContextOptional: () => ({
+    projectId: "p1",
+    showToast,
+    previewIframeRef: { current: iframe },
+  }),
+}));
+vi.mock("../../contexts/TimelineEditContext", () => ({
+  useTimelineEditContextOptional: () => ({ onSetElementAttributeQuiet: setQuiet }),
+}));
+
+const harness = createHappyDomRootHarness();
+
+function render(element: TimelineElement) {
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  act(() =>
+    harness.mount(host).render(<ClipMenuAudioItems element={element} onClose={() => {}} />),
+  );
+  return host;
+}
+
+const base = { start: 0, duration: 4, track: 0 };
+const plan = { targetLufs: -16, projectedLufs: -16, volume: 2, changeDb: 6, limitedBy: null };
+const clickItem = async (host: HTMLElement, label: string) => {
+  const button = [...host.querySelectorAll("button")].find((b) => b.textContent?.includes(label));
+  await act(async () => button?.click());
+};
+
+beforeEach(() => {
+  showToast.mockClear();
+  setQuiet.mockReset();
+  setQuiet.mockResolvedValue(undefined);
+});
+
+describe("ClipMenuAudioItems", () => {
+  it("offers nothing on a muted video", () => {
+    const host = render({ ...base, id: "b", tag: "video", hasAudio: true, muted: true });
+    expect(host.textContent).toBe("");
+  });
+
+  it("normalizes a video with sound by writing data-volume as one edit", async () => {
+    const plan = { targetLufs: -16, projectedLufs: -16, volume: 2, changeDb: 6, limitedBy: null };
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => Response.json({ plan })),
+    );
+    const element: TimelineElement = {
+      ...base,
+      id: "a-roll",
+      tag: "video",
+      hasAudio: true,
+      src: "talk.mp4",
+    };
+    const host = render(element);
+    const button = [...host.querySelectorAll("button")].find((b) =>
+      b.textContent?.includes("Normalize loudness"),
+    );
+    await act(async () => button?.click());
+    await vi.waitFor(() => expect(setQuiet).toHaveBeenCalled());
+    expect(setQuiet).toHaveBeenCalledWith(element, "data-volume", "2", "Normalize loudness");
+    expect(showToast).toHaveBeenCalledWith("Normalized to −16 LUFS (+6.0 dB)", "info");
+    vi.unstubAllGlobals();
+  });
+
+  it("refuses to normalize a clip whose volume lane owns its gain", async () => {
+    const fetchSpy = vi.fn(async () => Response.json({ plan }));
+    vi.stubGlobal("fetch", fetchSpy);
+    const automation = JSON.stringify({
+      version: 1,
+      lanes: [{ target: "volume", points: [{ t: 0, v: 0.25 }] }],
+    });
+    const host = render({ ...base, id: "vo", tag: "audio", src: "vo.mp3", automation });
+    await clickItem(host, "Normalize loudness");
+    await vi.waitFor(() => expect(showToast).toHaveBeenCalled());
+    expect(showToast).toHaveBeenCalledWith(expect.stringContaining("volume is automated"), "error");
+    expect(setQuiet).not.toHaveBeenCalled();
+    expect(fetchSpy).not.toHaveBeenCalled();
+    vi.unstubAllGlobals();
+  });
+
+  it("reports a failed save instead of claiming the clip was normalized", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => Response.json({ plan })),
+    );
+    setQuiet.mockResolvedValue({ status: "failed", reason: "disk full" });
+    const host = render({ ...base, id: "vo", tag: "audio", src: "vo.mp3" });
+    await clickItem(host, "Normalize loudness");
+    await vi.waitFor(() => expect(showToast).toHaveBeenCalledWith("disk full", "error"));
+    expect(showToast).not.toHaveBeenCalledWith(expect.stringContaining("Normalized"), "info");
+    vi.unstubAllGlobals();
+  });
+
+  it("stops ducking at the first refused save and says why", async () => {
+    document.body.appendChild(iframe);
+    const doc = iframe.contentDocument;
+    if (!doc) throw new Error("fixture");
+    doc.body.innerHTML = `<audio id="music" src="music.mp3" data-start="0" data-duration="10"></audio>
+      <audio id="voiceover" src="vo.wav" data-start="1" data-duration="3"></audio>`;
+    setQuiet.mockResolvedValue({
+      status: "refused",
+      reason: "Cannot edit timeline while recording",
+    });
+    const host = render({ ...base, id: "music", tag: "audio", src: "music.mp3" });
+    await clickItem(host, "Duck under voice");
+    await vi.waitFor(() =>
+      expect(showToast).toHaveBeenCalledWith("Cannot edit timeline while recording", "error"),
+    );
+    expect(setQuiet).toHaveBeenCalledTimes(1);
+    expect(showToast).not.toHaveBeenCalledWith(expect.stringContaining("Ducks under"), "info");
+    iframe.remove();
+  });
+});

package/src/player/components/clipMenuAudioItems.tsx

@@ -0,0 +1,108 @@
+import { formatAudioGain } from "@hyperframes/core/audio-gain";
+import type { TimelineElement } from "../store/timelineElement";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
+import { useStudioShellContextOptional } from "../../contexts/StudioContext";
+import {
+  clipHasSound,
+  normalizeToastText,
+  requestNormalizePlan,
+  throwUnlessSaved,
+  TimelineSaveError,
+  VOLUME_LANE_REFUSAL,
+  volumeLaneOwnsGain,
+} from "./clipMenuNormalize";
+import { isDuckableBed, readBedCarve, setDuckUnderVoice, type DuckOutcome } from "./clipMenuDuck";
+
+const ITEM_CLASS =
+  "w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-hidden text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 cursor-pointer";
+
+const DUCK_TOAST: Record<DuckOutcome, string> = {
+  ducked: "Ducks under the voice. Normalize the voice first for the most even result.",
+  off: "No longer ducks under the voice.",
+  "no-voice": "No overlapping voice to duck under.",
+  aborted: "Could not group the voices to duck under.",
+};
+
+/** Sound group of the clip menu: Normalize loudness (one-shot) and Duck under voice (toggle). */
+export function ClipMenuAudioItems({
+  element,
+  onClose,
+}: {
+  element: TimelineElement;
+  onClose: () => void;
+}) {
+  const shell = useStudioShellContextOptional();
+  const { onSetElementAttributeQuiet, onGroupClips } = useTimelineEditContextOptional();
+  const doc = shell?.previewIframeRef.current?.contentDocument ?? null;
+  const bed = doc?.getElementById(element.domId ?? element.id) ?? null;
+  const ducked = bed ? readBedCarve(bed)?.enabled === true : false;
+  if (!clipHasSound(element) || !shell || !onSetElementAttributeQuiet) return null;
+  const { showToast, projectId } = shell;
+
+  const normalize = async () => {
+    onClose();
+    if (volumeLaneOwnsGain(element)) {
+      showToast(VOLUME_LANE_REFUSAL, "error");
+      return;
+    }
+    try {
+      const plan = await requestNormalizePlan(projectId, element);
+      throwUnlessSaved(
+        await onSetElementAttributeQuiet(
+          element,
+          "data-volume",
+          formatAudioGain(plan.volume),
+          "Normalize loudness",
+        ),
+      );
+      showToast(normalizeToastText(plan), "info");
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : String(error), "error");
+    }
+  };
+
+  const toggleDuck = async () => {
+    onClose();
+    if (!doc || !bed) return;
+    const outcome = await setDuckUnderVoice(
+      doc,
+      bed,
+      !ducked,
+      async (attr, value) => {
+        throwUnlessSaved(
+          await onSetElementAttributeQuiet(element, attr, value, "Duck under voice"),
+        );
+      },
+      onGroupClips ? (ids, groupId) => onGroupClips(ids, groupId, "Voice") : undefined,
+    ).catch((error: unknown): DuckOutcome | TimelineSaveError =>
+      error instanceof TimelineSaveError ? error : "aborted",
+    );
+    if (outcome instanceof TimelineSaveError) {
+      showToast(outcome.message, "error");
+      return;
+    }
+    showToast(DUCK_TOAST[outcome], outcome === "aborted" ? "error" : "info");
+  };
+
+  return (
+    <>
+      <button type="button" role="menuitem" className={ITEM_CLASS} onClick={() => void normalize()}>
+        <span>Normalize loudness</span>
+      </button>
+      {isDuckableBed(bed) && (
+        <button
+          type="button"
+          role="menuitemcheckbox"
+          aria-checked={ducked}
+          className={ITEM_CLASS}
+          onClick={() => void toggleDuck()}
+        >
+          <span>
+            <span className="inline-block w-3">{ducked ? "✓" : ""}</span>Duck under voice
+          </span>
+        </button>
+      )}
+      <div className="my-1 border-t border-neutral-700/60" />
+    </>
+  );
+}