@hyperframes/studio 0.8.107 → 0.8.108

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/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" />
+    </>
+  );
+}

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

@@ -0,0 +1,117 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from "vitest";
+import { duckVoiceSources, isDuckableBed, readBedCarve, setDuckUnderVoice } from "./clipMenuDuck";
+
+function compose(body: string): Document {
+  const doc = document.implementation.createHTMLDocument("c");
+  doc.body.innerHTML = body;
+  return doc;
+}
+
+const BED = `<audio id="music" src="music.mp3" data-start="0" data-duration="10"></audio>`;
+
+describe("duckVoiceSources", () => {
+  it("offers an overlapping video with sound and a voiceover, never the bed or silent video", () => {
+    const doc = compose(`${BED}
+      <video id="talk" src="talk.mp4" data-start="0" data-duration="6" data-has-audio="true"></video>
+      <video id="b-roll" src="b.mp4" data-start="0" data-duration="6" muted></video>
+      <audio id="voiceover" src="vo.wav" data-start="2" data-duration="3"></audio>
+      <audio id="late-vo" src="vo2.wav" data-start="20" data-duration="3"></audio>`);
+    const bed = doc.getElementById("music");
+    expect(bed && duckVoiceSources(doc, bed)).toEqual(["talk", "voiceover"]);
+  });
+});
+
+describe("isDuckableBed", () => {
+  it("allows a music clip and refuses a voice clip", () => {
+    const doc = compose(`${BED}<audio id="voiceover" src="voiceover.wav"></audio>`);
+    expect(isDuckableBed(doc.getElementById("music"))).toBe(true);
+    expect(isDuckableBed(doc.getElementById("voiceover"))).toBe(false);
+  });
+
+  it("refuses a clip another bed is already carving against", () => {
+    const doc = compose(
+      `<audio id="music" src="music.mp3" data-fx-carve='{"enabled":true,"sources":["sting"],"strength":0.25}'></audio><audio id="sting" src="sting-bed.mp3"></audio>`,
+    );
+    expect(isDuckableBed(doc.getElementById("sting"))).toBe(false);
+  });
+});
+
+describe("setDuckUnderVoice", () => {
+  it("writes a carve at core's default strength naming the one voice", async () => {
+    const doc = compose(
+      `${BED}<audio id="voiceover" src="vo.wav" data-start="1" data-duration="3"></audio>`,
+    );
+    const bed = doc.getElementById("music");
+    if (!bed) throw new Error("fixture");
+    const write = vi.fn(async (attr: string, value: string | null) => {
+      if (value === null) bed.removeAttribute(attr);
+      else bed.setAttribute(attr, value);
+    });
+    await expect(setDuckUnderVoice(doc, bed, true, write)).resolves.toBe("ducked");
+    expect(readBedCarve(bed)).toEqual({ enabled: true, sources: ["voiceover"], strength: 0.25 });
+  });
+
+  it("groups several voices first so the carve names one group", async () => {
+    const doc = compose(`${BED}
+      <audio id="voiceover" src="vo.wav" data-start="1" data-duration="3"></audio>
+      <audio id="narration" src="n.wav" data-start="5" data-duration="3"></audio>`);
+    const bed = doc.getElementById("music");
+    if (!bed) throw new Error("fixture");
+    const write = vi.fn(async (attr: string, value: string | null) => {
+      if (value !== null) bed.setAttribute(attr, value);
+    });
+    const group = vi.fn(async () => {});
+    await setDuckUnderVoice(doc, bed, true, write, group);
+    expect(group).toHaveBeenCalledWith(["voiceover", "narration"], "voiceover-2");
+    expect(readBedCarve(bed)?.sources).toEqual(["voiceover-2"]);
+  });
+
+  it("reports no voice instead of writing an empty carve", async () => {
+    const doc = compose(BED);
+    const bed = doc.getElementById("music");
+    if (!bed) throw new Error("fixture");
+    const write = vi.fn(async () => {});
+    await expect(setDuckUnderVoice(doc, bed, true, write)).resolves.toBe("no-voice");
+    expect(write).not.toHaveBeenCalled();
+  });
+
+  it("turning it off disables the carve and drops the generated nodes and lanes", async () => {
+    const chain = {
+      version: 1,
+      nodes: [
+        { id: "c1", type: "peaking", enabled: true, fromCarve: true, params: {} },
+        { id: "eq", type: "highpass", enabled: true, params: {} },
+      ],
+    };
+    const automation = {
+      version: 1,
+      lanes: [
+        {
+          target: "fx.c1.gain",
+          points: [
+            { t: 0, v: 0 },
+            { t: 1, v: -3 },
+          ],
+        },
+      ],
+    };
+    const doc = compose(BED);
+    const bed = doc.getElementById("music");
+    if (!bed) throw new Error("fixture");
+    bed.setAttribute(
+      "data-fx-carve",
+      JSON.stringify({ enabled: true, sources: ["vo"], strength: 0.25 }),
+    );
+    bed.setAttribute("data-fx-chain", JSON.stringify(chain));
+    bed.setAttribute("data-automation", JSON.stringify(automation));
+    const writes: Array<[string, string | null]> = [];
+    await setDuckUnderVoice(doc, bed, false, async (attr, value) => {
+      writes.push([attr, value]);
+    });
+    const byAttr = new Map(writes);
+    expect(JSON.parse(byAttr.get("data-fx-carve") ?? "{}").enabled).toBe(false);
+    expect(byAttr.get("data-automation")).toBeNull();
+    expect(byAttr.get("data-fx-chain")).not.toContain("c1");
+  });
+});