@hyperframes/studio 0.8.106 → 0.8.108

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { isVideoAudible } from "../../player/lib/timelineElementHelpers";
 import { Check, ClipboardList, Film, Music, Scissors } from "../../icons/SystemIcons";
 import type { DomEditSelection } from "./domEditing";
 import {
@@ -22,23 +23,29 @@ import {
   audioGainToFaderPosition,
   audioGainToText,
 } from "@hyperframes/core/audio-gain";
+import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import { commitCutout, commitHasAudioToggle, commitMutedToggle } from "./mediaAudioEdits";
 
 // fallow-ignore-next-line complexity
 export function MediaSection({
+  projectId = null,
   projectDir,
   element,
   styles,
   onSetStyle,
   onSetAttribute,
   onSetHtmlAttribute,
+  onSetAttributeBatch,
   onRemoveBackground,
 }: {
+  projectId?: string | null;
   projectDir: string | null;
   element: DomEditSelection;
   styles: Record<string, string>;
   onSetStyle: (prop: string, value: string) => void | Promise<unknown>;
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
   onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
+  onSetAttributeBatch: CommitDomAttributeBatch;
   onRemoveBackground?: (
     inputPath: string,
     options: {
@@ -62,7 +69,11 @@ export function MediaSection({
 
   const hasLoop = el.hasAttribute("loop");
   const hasMuted = el.hasAttribute("muted");
-  const hasAudio = element.dataAttributes["has-audio"] === "true";
+  const hasAudio = isVideoAudible({
+    tag: el.tagName,
+    hasAudioAttr: element.dataAttributes["has-audio"],
+    muted: el.hasAttribute("muted"),
+  });
 
   const playbackRate = Number.parseFloat(element.dataAttributes["playback-rate"] ?? "1") || 1;
 
@@ -96,13 +107,7 @@ export function MediaSection({
     setCreatePlate(false);
   }, [srcAttr]);
 
-  const applyCutoutResult = async (result: BackgroundRemovalResult) => {
-    await onSetHtmlAttribute("src", result.outputPath);
-    if (isVideo) {
-      await onSetAttribute("has-audio", "");
-      await onSetHtmlAttribute("muted", "true");
-    }
-  };
+  const mediaEdit = { element, projectId, projectSrc, commit: onSetAttributeBatch };
 
   const runBackgroundRemoval = async () => {
     if (!onRemoveBackground || !projectSrc || removeBusy) return;
@@ -115,13 +120,8 @@ export function MediaSection({
         quality,
         onProgress: setRemoveProgress,
       });
-      await applyCutoutResult(result);
-      setRemoveProgress({
-        status: "complete",
-        progress: 100,
-        stage: "Applied cutout",
-        ...result,
-      });
+      const stage = await commitCutout(mediaEdit, result.outputPath, hasAudio);
+      setRemoveProgress({ status: "complete", progress: 100, stage, ...result });
     } catch (error) {
       setRemoveProgress({
         status: "failed",
@@ -320,9 +320,7 @@ export function MediaSection({
                 <SegmentedControl
                   trackName="Muted"
                   value={hasMuted ? "on" : "off"}
-                  onChange={(next) => {
-                    void onSetHtmlAttribute("muted", next === "on" ? "true" : null);
-                  }}
+                  onChange={(next) => void commitMutedToggle(mediaEdit, next === "on")}
                   options={[
                     { label: "On", value: "on" },
                     { label: "Off", value: "off" },
@@ -337,15 +335,7 @@ export function MediaSection({
                 <SegmentedControl
                   trackName="Has audio track"
                   value={hasAudio ? "yes" : "no"}
-                  onChange={(next) => {
-                    if (next === "yes") {
-                      void onSetAttribute("has-audio", "true");
-                      void onSetHtmlAttribute("muted", null);
-                    } else {
-                      void onSetAttribute("has-audio", "");
-                      void onSetHtmlAttribute("muted", "true");
-                    }
-                  }}
+                  onChange={(next) => void commitHasAudioToggle(mediaEdit, next === "yes")}
                   options={[
                     { label: "Yes", value: "yes" },
                     { label: "No", value: "no" },

package/src/components/editor/propertyPanelTypes.ts

@@ -3,6 +3,7 @@ import type { ArcPathSegment, GsapAnimation } from "@hyperframes/parsers/gsap-pa
 import type { DomEditSelection } from "./domEditing";
 import type { ImportedFontAsset } from "./fontAssets";
 import type { GsapAnimationEditCallbacks } from "./gsapAnimationCallbacks";
+import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
 
 export interface BackgroundRemovalProgress {
   status: "processing" | "complete" | "failed";
@@ -68,6 +69,7 @@ export interface PropertyPanelProps {
     value: string | null,
   ) => Promise<{ changedFiles: number; changedElements: number }>;
   onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
+  onSetAttributeBatch: CommitDomAttributeBatch;
   onRemoveBackground?: (
     inputPath: string,
     options: {

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

@@ -6,6 +6,7 @@ import { installReactActEnvironment, makeSelection } from "../../hooks/domSelect
 import { useDomEditNudge, type UseDomEditNudgeParams } from "./useDomEditNudge";
 import { CANVAS_NUDGE_COMMIT_DEBOUNCE_MS, CANVAS_NUDGE_STEP_PX } from "./domEditNudge";
 import { __resetForTests } from "../../utils/canvasNudgeGate";
+import { flushStudioPendingEdits, hasStudioPendingEdits } from "../../utils/studioPendingEdits";
 import type { DomEditSelection } from "./domEditing";
 import type { OverlayRect } from "./domEditOverlayGeometry";
 
@@ -27,6 +28,7 @@ const REST_RECT: OverlayRect = {
 // Stable across renders on purpose: the test targets the `selection` identity
 // key specifically, so `groupSelections` must not itself be a source of churn.
 const EMPTY_GROUP_SELECTIONS: DomEditSelection[] = [];
+let flushNudge = () => {};
 
 function Harness({
   selection,
@@ -35,7 +37,7 @@ function Harness({
   selection: DomEditSelection | null;
   onPathOffsetCommit: UseDomEditNudgeParams["onPathOffsetCommitRef"]["current"];
 }) {
-  useDomEditNudge({
+  flushNudge = useDomEditNudge({
     selection,
     groupSelections: EMPTY_GROUP_SELECTIONS,
     allowCanvasMovement: true,
@@ -49,7 +51,7 @@ function Harness({
     onBlockedMoveRef: makeRef(() => {}),
     onPathOffsetCommitRef: makeRef(onPathOffsetCommit),
     onGroupPathOffsetCommitRef: makeRef(async () => {}),
-  });
+  }).flushNudge;
   return null;
 }
 
@@ -259,6 +261,51 @@ describe("useDomEditNudge — selection cleanup keyed on stable identity", () =>
   });
 });
 
+describe("useDomEditNudge — a focused native player owns the arrow keys", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    __resetForTests();
+  });
+  let root: ReturnType<typeof createRoot> | null = null;
+  afterEach(() => {
+    act(() => root?.unmount());
+    root = null;
+    document.body.innerHTML = "";
+    vi.useRealTimers();
+  });
+
+  it.each(["video", "audio"])(
+    "does not nudge the selection while a <%s controls> has focus",
+    (tag) => {
+      root = createRoot(document.body.appendChild(document.createElement("div")));
+      const element = document.body.appendChild(document.createElement("div"));
+      element.id = "dot";
+      const player = document.body.appendChild(document.createElement(tag));
+      player.setAttribute("controls", "");
+      const commit = vi.fn();
+      act(() => {
+        root?.render(
+          React.createElement(Harness, {
+            selection: makeSelection("Dot", element),
+            onPathOffsetCommit: commit,
+          }),
+        );
+      });
+      const event = new KeyboardEvent("keydown", {
+        key: "ArrowRight",
+        bubbles: true,
+        cancelable: true,
+      });
+      act(() => {
+        player.dispatchEvent(event);
+        vi.advanceTimersByTime(CANVAS_NUDGE_COMMIT_DEBOUNCE_MS + 10);
+      });
+      expect(event.defaultPrevented).toBe(false);
+      expect(commit).not.toHaveBeenCalled();
+    },
+  );
+});
+
 describe("useDomEditNudge carries the route its press chose", () => {
   beforeEach(() => {
     vi.useFakeTimers();
@@ -291,3 +338,88 @@ describe("useDomEditNudge carries the route its press chose", () => {
     element.remove();
   });
 });
+
+describe("useDomEditNudge — undo right after a burst", () => {
+  it("undo's drain commits a burst still inside its debounce and waits for its save", async () => {
+    __resetForTests();
+    vi.useFakeTimers();
+    const root = createRoot(document.body.appendChild(document.createElement("div")));
+    const element = document.body.appendChild(document.createElement("div"));
+    element.id = "dot-undo";
+    let saved!: () => void;
+    const commit = vi.fn(() => new Promise<void>((resolve) => (saved = resolve)));
+    act(() => {
+      root.render(
+        React.createElement(Harness, {
+          selection: makeSelection("Dot", element),
+          onPathOffsetCommit: commit,
+        }),
+      );
+    });
+    act(() => dispatchArrowRight());
+
+    let drained = false;
+    const drain = flushStudioPendingEdits().then(() => (drained = true));
+    expect(commit).toHaveBeenCalledTimes(1);
+    vi.useRealTimers();
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(drained).toBe(false);
+    saved();
+    await drain;
+    expect(drained).toBe(true);
+    act(() => root.unmount());
+  });
+
+  it("counts the burst as a pending edit from its first key until its save lands", async () => {
+    __resetForTests();
+    vi.useFakeTimers();
+    const root = createRoot(document.body.appendChild(document.createElement("div")));
+    const element = document.body.appendChild(document.createElement("div"));
+    element.id = "dot-pending";
+    let saved!: () => void;
+    const commit = vi.fn(() => new Promise<void>((resolve) => (saved = resolve)));
+    act(() => {
+      root.render(
+        React.createElement(Harness, {
+          selection: makeSelection("Dot", element),
+          onPathOffsetCommit: commit,
+        }),
+      );
+    });
+    expect(hasStudioPendingEdits()).toBe(false);
+    act(() => dispatchArrowRight());
+    expect(hasStudioPendingEdits()).toBe(true);
+    act(() => vi.advanceTimersByTime(CANVAS_NUDGE_COMMIT_DEBOUNCE_MS + 10));
+    expect(commit).toHaveBeenCalledTimes(1);
+    expect(hasStudioPendingEdits()).toBe(true);
+    vi.useRealTimers();
+    saved();
+    await vi.waitFor(() => expect(hasStudioPendingEdits()).toBe(false));
+    act(() => root.unmount());
+  });
+});
+
+describe("useDomEditNudge — a commit that throws", () => {
+  it("still ends the burst's pending edit, so undo and export never wait on it", async () => {
+    __resetForTests();
+    const root = createRoot(document.body.appendChild(document.createElement("div")));
+    const element = document.body.appendChild(document.createElement("div"));
+    element.id = "dot-throws";
+    const commit = vi.fn(() => {
+      throw new Error("The commit threw.");
+    });
+    act(() => {
+      root.render(
+        React.createElement(Harness, {
+          selection: makeSelection("Dot", element),
+          onPathOffsetCommit: commit,
+        }),
+      );
+    });
+    act(() => dispatchArrowRight());
+    expect(hasStudioPendingEdits()).toBe(true);
+    expect(() => flushNudge()).toThrow("The commit threw.");
+    await vi.waitFor(() => expect(hasStudioPendingEdits()).toBe(false));
+    act(() => root.unmount());
+  });
+});

package/src/components/editor/useDomEditNudge.ts

@@ -9,6 +9,10 @@ import { useCallback, useEffect, useRef, type RefObject } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { ownsPlainKeys } from "../../utils/typingTarget";
 import { acquireCanvasNudgeKeys } from "../../utils/canvasNudgeGate";
+import {
+  addStudioPendingEditFlushListener,
+  beginStudioPendingEdit,
+} from "../../utils/studioPendingEdits";
 import type { DomEditSelection } from "./domEditing";
 import {
   type GroupOverlayItem,
@@ -27,6 +31,7 @@ import {
   applyManualOffsetNudgeDraft,
   createManualOffsetDragMember,
   endManualOffsetDragMembers,
+  manualOffsetMoveRevert,
   restoreManualOffsetDragMembers,
   type ManualOffsetDragMember,
 } from "./manualOffsetDrag";
@@ -43,6 +48,7 @@ interface NudgeSession {
   /** Accumulated delta of the burst, in composition px. */
   accum: { x: number; y: number };
   timer: ReturnType<typeof setTimeout> | null;
+  edit: ReturnType<typeof beginStudioPendingEdit>;
 }
 
 export interface UseDomEditNudgeParams {
@@ -127,7 +133,7 @@ function resolveSingleNudgeTarget(
 
 /**
  * True when a keydown must not start/extend a nudge: canvas movement disabled,
- * a pointer gesture already owns the element, or the user is typing in a field.
+ * a pointer gesture already owns the element, or focus is in a field or a native player.
  */
 function shouldIgnoreNudgeKey(p: UseDomEditNudgeParams, event: KeyboardEvent): boolean {
   if (!p.allowCanvasMovement || event.defaultPrevented) return true;
@@ -143,31 +149,42 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
   // Commit the pending burst: one source write per burst = one undo entry.
   // Mirrors the drag's onPointerUp — same commit callbacks, same failure
   // restore, same member teardown.
-  const commitSession = () => {
+  const commitSession = (): Promise<unknown> | undefined => {
     const session = sessionRef.current;
-    if (!session) return;
+    if (!session) return undefined;
     sessionRef.current = null;
     if (session.timer) clearTimeout(session.timer);
-    const updates: DomEditGroupPathOffsetCommit[] = session.members.map((member) => ({
-      selection: member.selection,
-      next: applyManualOffsetNudgeCommit(member, session.accum),
-      plainTranslate: member.plainTranslate,
-    }));
     const p = paramsRef.current;
-    const commit = session.isGroup
-      ? p.onGroupPathOffsetCommitRef.current(updates)
-      : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next, {
-          plainTranslate: updates[0].plainTranslate,
-        });
-    void Promise.resolve(commit)
-      .catch(() => {
-        for (const member of session.members) {
-          if (isStudioManualEditGestureCurrent(member.element, member.gestureToken)) {
-            restoreStudioPathOffset(member.element, member.initialPathOffset);
+    let saved: Promise<unknown> | undefined;
+    try {
+      const updates: DomEditGroupPathOffsetCommit[] = session.members.map((member) => ({
+        selection: member.selection,
+        next: applyManualOffsetNudgeCommit(member, session.accum),
+        plainTranslate: member.plainTranslate,
+      }));
+      const commit = session.edit.adopt(() =>
+        session.isGroup
+          ? p.onGroupPathOffsetCommitRef.current(updates)
+          : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next, {
+              plainTranslate: updates[0].plainTranslate,
+            }),
+      );
+      if (session.edit.reverted())
+        for (const member of session.members)
+          restoreStudioPathOffset(member.element, member.initialPathOffset);
+      saved = Promise.resolve(commit)
+        .catch(() => {
+          for (const member of session.members) {
+            if (isStudioManualEditGestureCurrent(member.element, member.gestureToken)) {
+              restoreStudioPathOffset(member.element, member.initialPathOffset);
+            }
           }
-        }
-      })
-      .finally(() => endManualOffsetDragMembers(session.members));
+        })
+        .finally(() => endManualOffsetDragMembers(session.members));
+      return saved;
+    } finally {
+      session.edit.settle(saved);
+    }
   };
   const commitSessionRef = useRef(commitSession);
   commitSessionRef.current = commitSession;
@@ -179,6 +196,7 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
     if (session.timer) clearTimeout(session.timer);
     restoreManualOffsetDragMembers(session.members);
     endManualOffsetDragMembers(session.members);
+    session.edit.settle();
   }, [params.allowCanvasMovement]);
 
   // Build drag members for the current target set — the same member snapshot a
@@ -205,7 +223,8 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
     if (members.length === 0) return null;
     // Same side effect a drag start has (pauses preview playback).
     p.onManualDragStartRef.current?.();
-    return { members, isGroup, accum: { x: 0, y: 0 }, timer: null };
+    const edit = beginStudioPendingEdit(manualOffsetMoveRevert(members));
+    return { members, isGroup, accum: { x: 0, y: 0 }, timer: null, edit };
   };
 
   const handleKeyDown = (event: KeyboardEvent) => {
@@ -231,8 +250,12 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
     // Capture, like the other app-level key handlers, so a focused panel
     // can't swallow the nudge before it reaches us.
     window.addEventListener("keydown", listener, true);
+    const stopCommitOnUndoDrain = addStudioPendingEditFlushListener(() =>
+      commitSessionRef.current(),
+    );
     return () => {
       window.removeEventListener("keydown", listener, true);
+      stopCommitOnUndoDrain();
       commitSessionRef.current();
     };
   });
@@ -245,7 +268,7 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
   const selectionKey = selectionIdentityKey(params.selection);
   const groupSelectionsKey = groupSelectionsIdentityKey(params.groupSelections);
   // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => () => commitSessionRef.current(), [selectionKey, groupSelectionsKey]);
+  useEffect(() => () => void commitSessionRef.current(), [selectionKey, groupSelectionsKey]);
 
   // Claim the arrow keys from the playback frame-step while the selection is
   // nudgeable (see canvasNudgeGate — listener order is mount-dependent, so

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -11,6 +11,7 @@ import {
   applyManualOffsetDragDraft,
   endManualOffsetDragMembers,
   restoreManualOffsetDragMembers,
+  manualOffsetMoveRevert,
 } from "./manualOffsetDrag";
 import { applyRotationDraft, restoreRotationDraft } from "./rotationDraft";
 import {
@@ -57,6 +58,7 @@ import { logResize, logResizeMove, logResizeSettle } from "../../utils/resizeDeb
 import { logDrag, logDragSettle, readDragPositions } from "../../utils/dragDebug";
 import { createGroupDragMover } from "./groupDragMove";
 import { DomEditSaveQueueOpenError } from "../../utils/domEditSaveQueue";
+import { beginStudioPendingEdit } from "../../utils/studioPendingEdits";
 
 function isTap(g: { startX: number; startY: number; travelled?: boolean }, e: React.PointerEvent) {
   return (
@@ -344,7 +346,10 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         ),
         at: readDragPositions(groupG.members),
       });
-      void Promise.resolve(opts.onGroupPathOffsetCommitRef.current(updates))
+      const groupEdit = beginStudioPendingEdit(manualOffsetMoveRevert(groupG.members));
+      const groupSaved = Promise.resolve(
+        groupEdit.adopt(() => opts.onGroupPathOffsetCommitRef.current(updates)),
+      )
         .catch(() => {
           for (const member of groupG.members) {
             if (
@@ -363,6 +368,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
           // so this is where a snap-back would show.
           logDragSettle("settle", groupG.members);
         });
+      groupEdit.settle(groupSaved);
       return;
     }
 
@@ -469,11 +475,15 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         box.style.left = `${nextBoxLeft}px`;
         box.style.top = `${nextBoxTop}px`;
       }
-      void Promise.resolve(
-        opts.onPathOffsetCommitRef.current(sel, finalOffset, {
-          altKey: e.altKey,
-          plainTranslate: g.pathOffsetMember.plainTranslate,
-        }),
+      const member = g.pathOffsetMember;
+      const edit = beginStudioPendingEdit(manualOffsetMoveRevert([member]));
+      const saved = Promise.resolve(
+        edit.adopt(() =>
+          opts.onPathOffsetCommitRef.current(sel, finalOffset, {
+            altKey: e.altKey,
+            plainTranslate: member.plainTranslate,
+          }),
+        ),
       )
         .catch(() => {
           if (
@@ -485,6 +495,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         .finally(() => {
           if (g.pathOffsetMember) endManualOffsetDragMembers([g.pathOffsetMember]);
         });
+      edit.settle(saved);
     } else {
       opts.suppressNextBoxClickRef.current = true;
       const finalSize = readStudioBoxSize(sel.element);

package/src/components/editor/useFxCarve.ts

@@ -29,11 +29,11 @@ import {
   resolveNextCarveSettings,
 } from "./useFxCarveGrouping.js";
 import { type HfAutomation } from "@hyperframes/core/audio-automation";
-import { automationAttrValue, HF_AUDIO_AUTOMATION_ATTR } from "./propertyPanelAutomation";
 import { trackCarveChanged } from "./audioFxTelemetry.js";
 import type { DomEditSelection } from "./domEditingTypes";
 import { usePlayerStore } from "../../player";
-import { carveLanes, measureCarve, mintCarveNodes, type CarveClip } from "./useFxCarveNodes.js";
+import { dropCarveOutput, resolveCarveVoices, withoutCarveLanes } from "./carveOutput.js";
+import { carveLanes, measureCarve, mintCarveNodes } from "./useFxCarveNodes.js";
 import { readClipClock } from "./clipAudioClock.js";
 import { spanOf } from "./propertyPanelAudioFxGroupUtils.js";
 import type { AudioTrackOption } from "./propertyPanelFxCarveModule.js";
@@ -55,16 +55,6 @@ function carveAction(
   return "strength";
 }
 
-/** Lanes belonging to nodes the carve generated, which a re-run replaces. */
-function withoutCarveLanes(automation: HfAutomation, chain: HfAudioFxChain): HfAutomation {
-  const prefixes = chain.nodes.filter((n) => n.fromCarve && n.id).map((n) => `fx.${n.id}.`);
-  if (prefixes.length === 0) return automation;
-  return {
-    version: automation.version,
-    lanes: automation.lanes.filter((lane) => !prefixes.some((p) => lane.target.startsWith(p))),
-  };
-}
-
 /**
  * Every setting here describes the filters, so changing one rebuilds them.
  * There is no apply button: a carve naming a voice with no filters behind it
@@ -86,54 +76,6 @@ function carveNeedsReanalysis(
   );
 }
 
-/**
- * Every named voice that is actually there with something to decode. A source
- * naming a deleted track is skipped rather than failing the whole analysis.
- *
- * Read out to plain values here rather than carrying elements around: it is
- * what lets the src and the start be non-null by construction downstream
- * instead of by assertion.
- */
-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
-    // the composition's iframe document, so the constructor they were made
-    // from is not this realm's and the instanceof is false for every one.
-    if (el?.tagName !== "AUDIO") continue;
-    const src = el.getAttribute("src");
-    if (!src) continue;
-    const clock = readClipClock((name) => el.getAttribute(name));
-    voices.push({ src, start: el.getAttribute("data-start"), clock });
-  }
-  return voices;
-}
-
-/**
- * What the carve generated is only justified by the voices it was measured
- * from: switched off, or left naming none — every source deleted, say — there
- * is nothing those filters are making room for. Left behind they keep dipping
- * the bed with nothing in the panel to explain them.
- */
-async function dropCarveOutput(
-  chain: HfAudioFxChain,
-  automation: HfAutomation,
-  onSetAttributeQuiet: (attr: string, value: string | null) => void | Promise<void>,
-): Promise<void> {
-  const carriedOver = withoutCarveLanes(automation, chain);
-  if (carriedOver.lanes.length !== automation.lanes.length) {
-    await onSetAttributeQuiet(HF_AUDIO_AUTOMATION_ATTR, automationAttrValue(carriedOver) || null);
-  }
-  const kept = chain.nodes.filter((n) => !n.fromCarve);
-  if (kept.length !== chain.nodes.length) {
-    await onSetAttributeQuiet(
-      HF_AUDIO_FX_ATTR,
-      kept.length ? serializeAudioFxChain({ version: 1, nodes: kept }) : null,
-    );
-  }
-}
-
 export function useFxCarve(
   element: DomEditSelection,
   chain: HfAudioFxChain,
@@ -179,7 +121,7 @@ export function useFxCarve(
   } => {
     const doc = element.element?.ownerDocument;
     if (!doc || !couldBeBed) return { sourceOptions: [], autoSourceIds: [] };
-    const others = Array.from(doc.querySelectorAll<HTMLAudioElement>("audio[id]")).filter(
+    const others = Array.from(doc.querySelectorAll("audio[id], video[id]")).filter(
       (a) => a.id !== element.id,
     );
     // Only tracks that are actually playing while this bed is. A voice somewhere

package/src/components/editor/useFxCarveGrouping.test.ts

@@ -54,6 +54,19 @@ describe("collectCarveCandidates", () => {
   });
 });
 
+describe("collectCarveCandidates with video", () => {
+  it("offers an ungrouped audible video, not a muted one", () => {
+    const doc = previewDoc(`
+      <video id="a-roll"></video>
+      <video id="b-roll" muted></video>
+      <audio id="bed"></audio>
+    `);
+    const others = Array.from(doc.querySelectorAll("video[id]"));
+    const ids = collectCarveCandidates(doc, others, () => true, "bed").map((c) => c.id);
+    expect(ids).toEqual(["a-roll"]);
+  });
+});
+
 describe("carverAgainst", () => {
   // The far-end guard has to see through a GROUP source. A plural carve names a
   // group — that is what the lint rule pushes authors toward — so matching raw

package/src/components/editor/useFxCarveGrouping.ts

@@ -20,6 +20,11 @@ import {
   resolveAudioGroups,
   resolveCarveSourceIds,
 } from "@hyperframes/core/audio-groups";
+import { isAudibleVideoNode } from "../../player/lib/timelineElementHelpers";
+
+export function isCarveVoiceElement(el: Element | null): el is Element {
+  return el !== null && (el.tagName === "AUDIO" || isAudibleVideoNode(el));
+}
 
 /**
  * An id for a new voiceover group, de-duped against every id already in the
@@ -130,7 +135,7 @@ function excludedFor(groupByMember: Map<string, { id: string }>, bedId?: string)
 
 export function collectCarveCandidates(
   doc: Document,
-  others: readonly HTMLAudioElement[],
+  others: readonly Element[],
   overlapsBed: (a: Element) => boolean,
   /** The bed's own id, so neither it nor the group it belongs to is offered. */
   bedId?: string,
@@ -141,7 +146,7 @@ export function collectCarveCandidates(
   const excluded = excludedFor(groupByMember, bedId);
   const offeredGroupIds = new Set<string>();
   const described: CarveCandidate[] = [];
-  for (const a of others) {
+  for (const a of others.filter(isCarveVoiceElement)) {
     const group = groupByMember.get(a.id);
     if (excluded.has(a.id) || (group && excluded.has(group.id))) continue;
     if (!group) {
@@ -161,7 +166,7 @@ export function collectCarveCandidates(
       // iframe document, so the constructor is a different realm's and the
       // instanceof is false for every one (mirrors resolveCarveVoices in
       // useFxCarve.ts).
-      .filter((el): el is HTMLElement => el?.tagName === "AUDIO");
+      .filter((el): el is HTMLElement => isCarveVoiceElement(el));
     if (!members.some(overlapsBed)) continue;
     offeredGroupIds.add(group.id);
     described.push({