@hyperframes/studio 0.8.82 → 0.8.83

package/src/components/editor/marqueeCommit.ts

@@ -14,6 +14,7 @@ interface MarqueeState {
   currentY: number;
   pointerId: number;
   pastThreshold: boolean;
+  target: Element;
 }
 
 const MARQUEE_THRESHOLD_PX = 4;
@@ -80,14 +81,13 @@ function hitsWithin(rect: Rect, candidates: MarqueeHit[]): MarqueeHit[] {
   return candidates.filter((candidate) => rectsOverlap(rect, candidate.rect));
 }
 
-async function runMarqueeIntersection(
-  rect: Rect,
-  candidates: MarqueeHit[],
+async function resolveDomEditSelections(
+  elements: HTMLElement[],
   activeCompositionPath: string,
 ): Promise<DomEditSelection[]> {
   const isMasterView = !activeCompositionPath || activeCompositionPath === "index.html";
   const hits: DomEditSelection[] = [];
-  for (const { element } of hitsWithin(rect, candidates)) {
+  for (const element of elements) {
     const sel = await resolveDomEditSelection(element, {
       activeCompositionPath,
       isMasterView,
@@ -98,23 +98,48 @@ async function runMarqueeIntersection(
   return hits;
 }
 
-interface MarqueeGesturesDeps {
+export interface MarqueeGesturesDeps<T = DomEditSelection> {
   iframeRef: React.RefObject<HTMLIFrameElement | null>;
   overlayRef: React.RefObject<HTMLDivElement | null>;
   activeCompositionPathRef: React.RefObject<string | null>;
-  onMarqueeSelectRef: React.RefObject<
-    ((selections: DomEditSelection[], additive: boolean) => void) | undefined
-  >;
-  selectionRef: React.RefObject<DomEditSelection | null>;
-  gestures: {
+  onMarqueeSelectRef: React.RefObject<((selections: T[], additive: boolean) => void) | undefined>;
+  /** Turns the elements a drag touched into picks; without it, Studio's edit selections. */
+  resolveHits?: (elements: HTMLElement[]) => T[] | Promise<T[]>;
+  selectionRef?: React.RefObject<DomEditSelection | null>;
+  /** Studio's pointer handling, for the events that are not part of a marquee. */
+  gestures?: {
     onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
     onPointerUp: (event: React.PointerEvent<HTMLDivElement>) => void;
     clearPointerState: (ref: React.RefObject<DomEditSelection | null>) => void;
   };
 }
 
+export interface MarqueeGestures {
+  marqueeRect: Rect | null;
+  candidateRects: Rect[];
+  /** Starts a marquee at this press; the host has decided it landed on empty canvas. */
+  begin: (event: React.PointerEvent<HTMLElement>) => void;
+  /** Drops an active marquee without selecting anything. */
+  cancel: () => void;
+  onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+  onPointerUp: (event: React.PointerEvent<HTMLDivElement>) => void;
+  onPointerCancel: () => void;
+}
+
+function releaseCapture(m: MarqueeState): void {
+  try {
+    m.target.releasePointerCapture(m.pointerId);
+  } catch {
+    /* already released */
+  }
+}
+
+export function useMarqueeGestures(deps: MarqueeGesturesDeps): MarqueeGestures;
+export function useMarqueeGestures<T>(
+  deps: MarqueeGesturesDeps<T> & Required<Pick<MarqueeGesturesDeps<T>, "resolveHits">>,
+): MarqueeGestures;
 // fallow-ignore-next-line complexity
-export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
+export function useMarqueeGestures<T>(deps: MarqueeGesturesDeps<T>): MarqueeGestures {
   const marqueeRef = useRef<MarqueeState | null>(null);
   const [marqueeRect, setMarqueeRect] = useState<Rect | null>(null);
   // Live "candidate" highlight: the elements the marquee currently touches,
@@ -135,12 +160,55 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
       if (!iframe || !overlay || !deps.onMarqueeSelectRef.current) return;
       const acp = deps.activeCompositionPathRef.current ?? "index.html";
       const candidates = candidatesRef.current ?? collectMarqueeCandidates(iframe, overlay, acp);
-      const hits = await runMarqueeIntersection(rect, candidates, acp);
-      deps.onMarqueeSelectRef.current(hits, additive);
+      const elements = hitsWithin(rect, candidates).map((hit) => hit.element);
+      const resolveHits = deps.resolveHits;
+      const picks = resolveHits
+        ? await resolveHits(elements)
+        : ((await resolveDomEditSelections(elements, acp)) as T[]);
+      deps.onMarqueeSelectRef.current?.(picks, additive);
     },
-    [deps.iframeRef, deps.overlayRef, deps.onMarqueeSelectRef, deps.activeCompositionPathRef],
+    [
+      deps.iframeRef,
+      deps.overlayRef,
+      deps.onMarqueeSelectRef,
+      deps.activeCompositionPathRef,
+      deps.resolveHits,
+    ],
   );
 
+  const reset = useCallback(() => {
+    marqueeRef.current = null;
+    setMarqueeRect(null);
+    setCandidateRects([]);
+    candidatesRef.current = null;
+  }, []);
+
+  const begin = useCallback(
+    (event: React.PointerEvent<HTMLElement>) => {
+      const oRect = deps.overlayRef.current?.getBoundingClientRect();
+      if (!oRect) return;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      const x = event.clientX - oRect.left;
+      const y = event.clientY - oRect.top;
+      marqueeRef.current = {
+        startX: x,
+        startY: y,
+        currentX: x,
+        currentY: y,
+        pointerId: event.pointerId,
+        pastThreshold: false,
+        target: event.currentTarget,
+      };
+    },
+    [deps.overlayRef],
+  );
+
+  const cancel = useCallback(() => {
+    if (!marqueeRef.current) return;
+    releaseCapture(marqueeRef.current);
+    reset();
+  }, [reset]);
+
   const onPointerMove = useCallback(
     (event: React.PointerEvent<HTMLDivElement>) => {
       const m = marqueeRef.current;
@@ -172,7 +240,7 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
         }
         return;
       }
-      deps.gestures.onPointerMove(event);
+      deps.gestures?.onPointerMove(event);
     },
     [deps.gestures, deps.overlayRef, deps.iframeRef, deps.activeCompositionPathRef],
   );
@@ -181,12 +249,7 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
     (event: React.PointerEvent<HTMLDivElement>) => {
       const m = marqueeRef.current;
       if (m) {
-        marqueeRef.current = null;
-        try {
-          (event.currentTarget as HTMLElement).releasePointerCapture(m.pointerId);
-        } catch {
-          /* already released */
-        }
+        releaseCapture(m);
         if (m.pastThreshold) {
           commitMarquee(
             {
@@ -200,26 +263,26 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
         } else {
           deps.onMarqueeSelectRef.current?.([], false);
         }
-        setMarqueeRect(null);
-        setCandidateRects([]);
-        candidatesRef.current = null;
+        reset();
         return;
       }
-      deps.gestures.onPointerUp(event);
+      deps.gestures?.onPointerUp(event);
     },
-    [deps.gestures, commitMarquee, deps.onMarqueeSelectRef],
+    [deps.gestures, commitMarquee, deps.onMarqueeSelectRef, reset],
   );
 
   const onPointerCancel = useCallback(() => {
-    if (marqueeRef.current) {
-      marqueeRef.current = null;
-      setMarqueeRect(null);
-      setCandidateRects([]);
-      candidatesRef.current = null;
-      return;
-    }
-    deps.gestures.clearPointerState(deps.selectionRef);
-  }, [deps.gestures, deps.selectionRef]);
-
-  return { marqueeRef, marqueeRect, candidateRects, onPointerMove, onPointerUp, onPointerCancel };
+    if (marqueeRef.current) return cancel();
+    if (deps.selectionRef) deps.gestures?.clearPointerState(deps.selectionRef);
+  }, [deps.gestures, deps.selectionRef, cancel]);
+
+  return {
+    marqueeRect,
+    candidateRects,
+    begin,
+    cancel,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel,
+  };
 }

package/src/components/editor/previewReadOnly.overlay.test.tsx

@@ -13,7 +13,19 @@ import { DomEditOverlay } from "./DomEditOverlay";
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 const RECT = { left: 100, top: 100, width: 200, height: 100, editScaleX: 1, editScaleY: 1 };
-const layout = vi.hoisted(() => ({ group: [] as unknown[] }));
+const layout = vi.hoisted(() => ({
+  group: [] as unknown[],
+  hover: null as unknown,
+  offCanvas: [] as unknown[],
+  offCanvasElements: new Map<string, HTMLElement>(),
+}));
+
+vi.mock("./useOffCanvasIndicators", () => ({
+  useOffCanvasIndicators: () => ({
+    offCanvasRects: layout.offCanvas,
+    offCanvasElementsRef: { current: layout.offCanvasElements },
+  }),
+}));
 
 vi.mock("./useDomEditOverlayRects", () => ({
   useDomEditOverlayRects: () => ({
@@ -22,7 +34,7 @@ vi.mock("./useDomEditOverlayRects", () => ({
       current: { left: 100, top: 100, width: 200, height: 100, editScaleX: 1, editScaleY: 1 },
     },
     setOverlayRect: () => undefined,
-    hoverRect: null,
+    hoverRect: layout.hover,
     groupOverlayItems: layout.group,
     groupOverlayItemsRef: { current: layout.group },
     setGroupOverlayItems: () => undefined,
@@ -57,6 +69,8 @@ function fixture(
     onStyleCommit: vi.fn(),
     onDeleteSelection: vi.fn(),
     onApplyZIndex: vi.fn(),
+    onMarqueeSelect: vi.fn(),
+    onTextEditingChange: vi.fn(),
   };
   const selection = makeSelection("Title", textElement("title"));
   selection.capabilities.canApplyManualRotation = true;
@@ -92,6 +106,33 @@ const fire = (target: Element, type: string, init: MouseEventInit = {}) => {
   return event;
 };
 
+const pressEnter = (overlay: HTMLElement) =>
+  act(() => {
+    overlay.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }),
+    );
+  });
+
+const clickBox = (overlay: HTMLElement) => {
+  const box = overlay.querySelector(BOX)!;
+  for (const type of ["pointerdown", "pointerup", "click"]) fire(box, type);
+};
+
+const enterOn = (target: Element) =>
+  act(() => {
+    target.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }),
+    );
+  });
+
+const rightClick = async (overlay: HTMLElement) => {
+  await act(async () => {
+    overlay.dispatchEvent(
+      new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: 5, clientY: 5 }),
+    );
+  });
+};
+
 beforeEach(() => {
   vi.useFakeTimers();
   __resetForTests();
@@ -102,6 +143,9 @@ afterEach(() => {
   act(() => root.unmount());
   document.body.innerHTML = "";
   layout.group = [];
+  layout.hover = null;
+  layout.offCanvas = [];
+  layout.offCanvasElements.clear();
   vi.useRealTimers();
 });
 
@@ -196,13 +240,6 @@ describe("DomEditOverlay with the preview read-only", () => {
     expect(spies.onPathOffsetCommit).not.toHaveBeenCalled();
   });
 
-  const pressEnter = (overlay: HTMLElement) =>
-    act(() => {
-      overlay.dispatchEvent(
-        new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }),
-      );
-    });
-
   it("control: with the flag off Enter opens the text for editing", () => {
     const { selection, overlay } = fixture();
     pressEnter(overlay);
@@ -215,14 +252,6 @@ describe("DomEditOverlay with the preview read-only", () => {
     expect(selection.element.hasAttribute("contenteditable")).toBe(false);
   });
 
-  const rightClick = async (overlay: HTMLElement) => {
-    await act(async () => {
-      overlay.dispatchEvent(
-        new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: 5, clientY: 5 }),
-      );
-    });
-  };
-
   it("control: with the flag off right-click offers delete and z-order", async () => {
     const { overlay } = fixture();
     await rightClick(overlay);
@@ -258,3 +287,177 @@ describe("DomEditOverlay with the preview read-only", () => {
     expect(spies.onCanvasMouseDown).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("DomEditOverlay with canvasInput host", () => {
+  const HOST = { canvasInput: "host" } as const;
+
+  it("lets presses through its root, and the overlay default keeps them", () => {
+    expect(fixture().overlay.className).toContain("pointer-events-auto");
+    act(() => root.unmount());
+    expect(fixture(HOST).overlay.className).toContain("pointer-events-none");
+  });
+
+  it("draws no hover box", () => {
+    layout.hover = RECT;
+    const hovered = (props = {}) => {
+      const { overlay } = fixture(props);
+      const box = overlay.querySelector('[data-dom-edit-hover-box="true"]');
+      act(() => root.unmount());
+      return box;
+    };
+    const selection = makeSelection("Hover", textElement("hover"));
+    expect(hovered({ hoverSelection: selection })).not.toBeNull();
+    expect(hovered({ ...HOST, hoverSelection: selection })).toBeNull();
+  });
+
+  it("starts no marquee and makes no selection from a press on empty canvas", () => {
+    const off = fixture({ selection: null });
+    fire(off.overlay, "pointerdown");
+    fire(off.overlay, "pointerup");
+    expect(off.spies.onMarqueeSelect).toHaveBeenCalledWith([], false);
+    act(() => root.unmount());
+    const { spies, overlay } = fixture({ ...HOST, selection: null });
+    fire(overlay, "pointerdown");
+    fire(overlay, "mousedown");
+    fire(overlay, "pointerup");
+    expect(spies.onMarqueeSelect).not.toHaveBeenCalled();
+    expect(spies.onCanvasMouseDown).not.toHaveBeenCalled();
+  });
+
+  it("opens no context menu and selects nothing on right-click", async () => {
+    const { spies, overlay } = fixture({ ...HOST, selection: null });
+    await rightClick(overlay);
+    expect(spies.onSelectionChange).not.toHaveBeenCalled();
+    act(() => root.unmount());
+    await rightClick(fixture(HOST).overlay);
+    expect(document.body.textContent).not.toContain("Delete");
+  });
+
+  it("does not re-select on a click of the selection box", () => {
+    const off = fixture();
+    clickBox(off.overlay);
+    expect(off.spies.onCanvasMouseDown).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+    const { spies, overlay } = fixture(HOST);
+    clickBox(overlay);
+    fire(overlay.querySelector(BOX)!, "click");
+    expect(spies.onCanvasMouseDown).not.toHaveBeenCalled();
+  });
+
+  it("offers no off-canvas indicator to press, so nothing re-selects from one", async () => {
+    const MARK = '[aria-label="Select off-canvas element stray"]';
+    const offCanvas = (props = {}) => {
+      layout.offCanvasElements.set("stray", textElement("stray"));
+      layout.offCanvas = [{ key: "stray", left: 820, top: 10, width: 120, height: 40 }];
+      return fixture(props);
+    };
+    const off = offCanvas();
+    fire(off.overlay.querySelector(MARK)!, "click");
+    await vi.waitFor(() => expect(off.spies.onSelectionChange).toHaveBeenCalledTimes(1));
+    act(() => root.unmount());
+    const { spies, overlay } = offCanvas(HOST);
+    expect(overlay.querySelector(MARK)).toBeNull();
+    expect(spies.onSelectionChange).not.toHaveBeenCalled();
+  });
+
+  it("reports each selection-box click to the host once, by either route", () => {
+    const cases = [
+      { props: {}, movable: true, reselects: 1 },
+      { props: HOST, movable: true, reselects: 0 },
+      { props: HOST, movable: false, reselects: 0 },
+    ];
+    for (const { props, movable, reselects } of cases) {
+      const onSelectionBoxClick = vi.fn();
+      const { spies, selection, overlay } = fixture({ ...props, onSelectionBoxClick });
+      selection.capabilities.canApplyManualOffset = movable;
+      clickBox(overlay);
+      expect(onSelectionBoxClick).toHaveBeenCalledTimes(1);
+      expect(onSelectionBoxClick).toHaveBeenCalledWith(expect.anything(), selection);
+      expect(spies.onCanvasMouseDown).toHaveBeenCalledTimes(reselects);
+      act(() => root.unmount());
+    }
+  });
+
+  it("does not report a press off the box, or a click on a group's box", () => {
+    const onSelectionBoxClick = vi.fn();
+    const off = fixture({ onSelectionBoxClick, onMarqueeSelect: undefined });
+    for (const type of ["pointerdown", "mousedown", "pointerup", "click"]) fire(off.overlay, type);
+    expect(off.spies.onCanvasMouseDown).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+    const members = ["a", "b"].map((id) => {
+      const selection = makeSelection(id, textElement(id));
+      return { key: id, selection, element: selection.element, rect: RECT };
+    });
+    members[1].selection.capabilities.canApplyManualOffset = false;
+    layout.group = members;
+    const { spies, overlay } = fixture({
+      onSelectionBoxClick,
+      selection: members[0].selection,
+      groupSelections: members.map((m) => m.selection),
+    });
+    clickBox(overlay);
+    expect(spies.onCanvasMouseDown).toHaveBeenCalledTimes(1);
+    expect(onSelectionBoxClick).not.toHaveBeenCalled();
+  });
+
+  it("reports the first box click after a handle resize", () => {
+    const onSelectionBoxClick = vi.fn();
+    const { selection, overlay } = fixture({ ...HOST, onSelectionBoxClick });
+    for (const type of ["pointerdown", "pointerup", "click"]) {
+      fire(overlay.querySelector("div.h-4.w-4")!, type);
+    }
+    selection.capabilities.canApplyManualOffset = false;
+    clickBox(overlay);
+    expect(onSelectionBoxClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("opens the text on Enter when nothing else has focus, not from a focused field", () => {
+    const off = fixture();
+    enterOn(document.body);
+    expect(off.selection.element.hasAttribute("contenteditable")).toBe(false);
+    act(() => root.unmount());
+    const { spies, selection } = fixture(HOST);
+    const field = document.createElement("input");
+    document.body.append(field);
+    enterOn(field);
+    expect(selection.element.hasAttribute("contenteditable")).toBe(false);
+    enterOn(document.body);
+    expect(selection.element.hasAttribute("contenteditable")).toBe(true);
+    expect(spies.onTextEditingChange.mock.calls).toEqual([[true]]);
+  });
+
+  it("keeps the handles working: drag, resize dots and rotate", () => {
+    const { spies, overlay } = fixture(HOST);
+    fire(overlay.querySelector(BOX)!, "pointerdown");
+    expect(spies.onManualDragStart).toHaveBeenCalledTimes(1);
+    fire(overlay.querySelector(BOX)!, "pointerup");
+    expect(overlay.querySelectorAll("div.h-4.w-4")).toHaveLength(4);
+    const rotate = overlay.querySelector('[aria-label="Rotate selection"]')!;
+    fire(rotate, "pointerdown", { clientX: 200, clientY: 250 });
+    fire(rotate, "pointermove", { clientX: 300, clientY: 150 });
+    fire(rotate, "pointerup", { clientX: 300, clientY: 150 });
+    expect(spies.onRotationCommit).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("DomEditOverlay onTextEditingChange", () => {
+  it("reports true when the caret goes live and false when the edit ends", () => {
+    const { spies, selection, overlay } = fixture();
+    expect(spies.onTextEditingChange).not.toHaveBeenCalled();
+    pressEnter(overlay);
+    expect(spies.onTextEditingChange.mock.calls).toEqual([[true]]);
+    act(() => {
+      selection.element.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+      );
+    });
+    expect(spies.onTextEditingChange.mock.calls).toEqual([[true], [false]]);
+  });
+
+  it("reports false when the overlay unmounts mid-edit", () => {
+    const { spies, overlay } = fixture();
+    pressEnter(overlay);
+    act(() => root.unmount());
+    expect(spies.onTextEditingChange.mock.calls).toEqual([[true], [false]]);
+  });
+});

package/src/components/editor/propertyPanelAudioFxGroup.test.tsx

@@ -989,6 +989,141 @@ describe("AudioFxGroup dynamic carve", () => {
     expect(onSetAttributeLive.mock.calls.every((c) => c[0] === "data-fx-carve")).toBe(true);
     expect(onSetAttributeQuiet.mock.calls.some((c) => c[0] === "data-fx-chain")).toBe(false);
   });
+
+  describe("on each clip's own clock", () => {
+    type Point = { t: number; v: number };
+    /** `hz` at `amp` over [from, to) of a `seconds`-long file, silence elsewhere. */
+    const tone = (seconds: number, [from, to]: [number, number], hz = 1000, amp = 0.7) =>
+      Float32Array.from({ length: SAMPLE_RATE * seconds }, (_, i) => {
+        const t = i / SAMPLE_RATE;
+        return t >= from && t < to ? amp * Math.sin(2 * Math.PI * hz * t) : 0;
+      });
+
+    /** Each file decodes to its own samples, found by the URL that was fetched. */
+    function stubFiles(files: Record<string, Float32Array>): void {
+      vi.stubGlobal(
+        "fetch",
+        vi.fn(async (url: string) => ({ arrayBuffer: async () => url })),
+      );
+      vi.stubGlobal(
+        "OfflineAudioContext",
+        class {
+          decodeAudioData = async (url: string) => {
+            const data = Object.entries(files).find(([name]) => url.endsWith(name))![1];
+            return { sampleRate: SAMPLE_RATE, getChannelData: () => data };
+          };
+        },
+      );
+    }
+
+    const valueAt = (points: Point[], t: number): number => {
+      const i = points.findIndex((p) => p.t >= t);
+      if (i <= 0) return points.at(i)!.v;
+      const [a, b] = [points[i - 1]!, points[i]!];
+      return a.v + ((b.v - a.v) * (t - a.t)) / (b.t - a.t);
+    };
+
+    /** Carves the bed against `vo` and reads back the lane driving the first node of `type`. */
+    async function carveLane(
+      type: string,
+      voice: Record<string, string>,
+      bed: Record<string, string> = {},
+      strength = 0,
+    ) {
+      const { host, onSetAttributeQuiet } = mount({
+        "fx-chain": carvedChain,
+        "fx-carve": settings(true, { strength, sources: [] }),
+        start: "0",
+        ...bed,
+      });
+      const vo = document.getElementById("vo")!;
+      vo.setAttribute("src", "voice.wav");
+      for (const [name, value] of Object.entries(voice)) vo.setAttribute(`data-${name}`, value);
+      document.getElementById("bed")!.setAttribute("src", "bed.wav");
+      await act(async () => {
+        pickSource(host, "vo");
+      });
+      const calls = onSetAttributeQuiet.mock.calls;
+      const nodes = parseWrite(writeTo(calls, "data-fx-chain")!).nodes as {
+        id: string;
+        type: string;
+        params: { gain: number; frequency: number };
+      }[];
+      const node = nodes.find((n) => n.type === type)!;
+      const lanes = parseWrite(writeTo(calls, "data-automation")!).lanes as {
+        target: string;
+        points: Point[];
+      }[];
+      const points = lanes.find((l) => l.target === `fx.${node.id}.gain`)!.points;
+      return {
+        depth: node.params.gain,
+        frequency: node.params.frequency,
+        points,
+        at: (t: number) => valueAt(points, t),
+      };
+    }
+
+    /** Quiet 1 kHz speech at 0-2 s, loud 4 kHz speech at 4-6 s, in an 8 s file. */
+    const lateSpeech = () => {
+      const after = tone(8, [4, 6], 4000, 0.9);
+      return tone(8, [0, 2], 1000, 0.3).map((v, i) => v + after[i]!);
+    };
+
+    it("ignores speech after the bed has stopped playing", async () => {
+      // The bed file runs 8 s, but the clip plays only its first 3 s.
+      stubFiles({ "voice.wav": lateSpeech(), "bed.wav": tone(8, [0, 8], 200) });
+      const lane = await carveLane("peaking", { start: "0" }, { duration: "3" });
+      expect(lane.frequency).toBe(1000);
+    });
+
+    it("ignores speech after a bed with no duration runs out, when it ducks", async () => {
+      // No data-duration: the bed plays its 3 s file. Strength 0.05 ducks and keeps one band.
+      stubFiles({ "voice.wav": lateSpeech(), "bed.wav": tone(3, [0, 3], 200) });
+      const lane = await carveLane("peaking", { start: "0" }, {}, 0.05);
+      expect(lane.frequency).toBe(1000);
+    });
+
+    it.each([
+      ["no duration", {}],
+      ["a duration longer than its file", { duration: "6" }],
+    ])("ignores speech after a 3 s bed file with %s, without ducking", async (_, bed) => {
+      stubFiles({ "voice.wav": lateSpeech(), "bed.wav": tone(3, [0, 3], 200) });
+      const lane = await carveLane("peaking", { start: "0" }, bed);
+      expect(lane.frequency).toBe(1000);
+    });
+
+    it("cuts where a trimmed voice speaks, not where its file does", async () => {
+      // File speech 2-3.5 s; the clip plays 2-4 s of it, so the bed hears it at 0-1.5 s.
+      stubFiles({ "voice.wav": tone(6, [2, 3.5]), "bed.wav": tone(8, [0, 8], 200) });
+      const lane = await carveLane("peaking", { start: "0", "media-start": "2", duration: "2" });
+      expect({ speaking: lane.at(0.8) <= lane.depth * 0.5, after: lane.at(3) }).toEqual({
+        speaking: true,
+        after: 0,
+      });
+    });
+
+    it("cuts over half the source length for a voice at 2x", async () => {
+      // File speech 1-3 s at 2x: the bed hears it at 0.5-1.5 s.
+      stubFiles({ "voice.wav": tone(4, [1, 3]), "bed.wav": tone(8, [0, 8], 200) });
+      const lane = await carveLane("peaking", { start: "0", "playback-rate": "2", duration: "2" });
+      expect({
+        speaking: lane.at(0.8) <= lane.depth * 0.5 && lane.at(1.3) <= lane.depth * 0.5,
+        after: lane.at(2.5),
+      }).toEqual({ speaking: true, after: 0 });
+    });
+
+    it("ducks against the part of the bed that plays", async () => {
+      // The bed file is silent for 4 s and loud after; the clip starts 4 s in, so it is loud under the voice.
+      stubFiles({ "voice.wav": tone(4, [1, 3]), "bed.wav": tone(8, [4, 8], 200, 0.9) });
+      const lane = await carveLane(
+        "gain",
+        { start: "0" },
+        { "media-start": "4", duration: "4" },
+        1,
+      );
+      expect(Math.min(...lane.points.map((p) => p.v))).toBeLessThan(0);
+    });
+  });
 });
 
 describe("AudioFxGroup successive edits", () => {

package/src/components/editor/useFxCarve.ts

@@ -33,7 +33,8 @@ import { automationAttrValue, HF_AUDIO_AUTOMATION_ATTR } from "./propertyPanelAu
 import { trackCarveChanged } from "./audioFxTelemetry.js";
 import type { DomEditSelection } from "./domEditingTypes";
 import { usePlayerStore } from "../../player";
-import { carveLanes, measureCarve, mintCarveNodes } from "./useFxCarveNodes.js";
+import { carveLanes, measureCarve, mintCarveNodes, type CarveClip } from "./useFxCarveNodes.js";
+import { readClipClock } from "./clipAudioClock.js";
 import { spanOf } from "./propertyPanelAudioFxGroupUtils.js";
 import type { AudioTrackOption } from "./propertyPanelFxCarveModule.js";
 
@@ -93,11 +94,8 @@ function carveNeedsReanalysis(
  * what lets the src and the start be non-null by construction downstream
  * instead of by assertion.
  */
-function resolveCarveVoices(
-  doc: Document,
-  sources: readonly string[],
-): { src: string; start: string | null }[] {
-  const voices: { src: string; start: string | null }[] = [];
+function resolveCarveVoices(doc: Document, sources: readonly string[]): CarveClip[] {
+  const voices: CarveClip[] = [];
   for (const id of sources) {
     const el = doc.getElementById(id);
     // By tag name, not `instanceof HTMLAudioElement`: these elements belong to
@@ -106,7 +104,8 @@ function resolveCarveVoices(
     if (el?.tagName !== "AUDIO") continue;
     const src = el.getAttribute("src");
     if (!src) continue;
-    voices.push({ src, start: el.getAttribute("data-start") });
+    const clock = readClipClock((name) => el.getAttribute(name));
+    voices.push({ src, start: el.getAttribute("data-start"), clock });
   }
   return voices;
 }
@@ -363,14 +362,11 @@ export function useFxCarve(
     if (voices.length === 0) return;
     setAnalysing(true);
     try {
-      const bedSrc = element.element?.getAttribute("src");
-      const measured = await measureCarve(
-        doc,
-        voices,
-        active.strength,
-        element.dataAttributes?.["start"],
-        bedSrc,
-      );
+      const measured = await measureCarve(doc, voices, active.strength, {
+        src: element.element?.getAttribute("src"),
+        start: element.dataAttributes?.["start"],
+        clock: readClipClock((name) => element.dataAttributes?.[name.slice(5)]),
+      });
       if (!measured) return;
       await persistMeasuredCarve(measured);
     } catch {