@hyperframes/studio 0.8.107 → 0.8.108

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

@@ -0,0 +1,71 @@
+// @vitest-environment happy-dom
+import { afterEach, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "./domEditing";
+import type { GestureState } from "./domEditOverlayGestures";
+import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
+import {
+  hasStudioPendingEdits,
+  revertNewestStudioPendingEdit,
+} from "../../utils/studioPendingEdits";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+const ref = <T>(current: T) => ({ current });
+const pointer = (x: number, y: number) => ({
+  clientX: x,
+  clientY: y,
+  pointerId: 1,
+  button: 0,
+  preventDefault() {},
+  stopPropagation() {},
+  currentTarget: { setPointerCapture() {}, releasePointerCapture() {} },
+});
+
+/** Drags a box without GSAP 100 px right and 60 px down; its save waits for `save`. */
+function dragWithSaveRunning(save: Promise<void>) {
+  const element = document.createElement("div");
+  element.style.setProperty("translate", "40px 30px");
+  document.body.append(element);
+  const selection = { element, capabilities: { canApplyManualOffset: true } };
+  const handlers = createDomEditOverlayGestureHandlers({
+    selectionRef: ref(selection as unknown as DomEditSelection),
+    overlayRectRef: ref({ left: 0, top: 0, width: 240, height: 160, editScaleX: 1, editScaleY: 1 }),
+    boxRef: ref(document.createElement("div")),
+    overlayRef: ref(null),
+    iframeRef: ref(null),
+    gestureRef: ref<GestureState | null>(null),
+    rafPausedRef: ref(false),
+    onManualDragStartRef: ref(vi.fn()),
+    onBlockedMoveRef: ref(vi.fn()),
+    onPathOffsetCommitRef: ref(vi.fn(() => save)),
+    snapGuidesRef: ref(null),
+    groupGestureRef: ref(null),
+    blockedMoveRef: ref(null),
+    setOverlayRect: vi.fn(),
+    suppressNextBoxClickRef: ref(false),
+    hoverSelectionRef: ref(null),
+    onCanvasMouseDown: vi.fn(),
+  } as never);
+  expect(handlers.startGesture("drag", pointer(10, 10) as never)).toBe(true);
+  handlers.onPointerUp(pointer(110, 70) as never);
+  return element;
+}
+
+it("a drag whose save is still running can be painted back at once, and shown again", async () => {
+  let saved!: () => void;
+  const element = dragWithSaveRunning(new Promise<void>((resolve) => (saved = resolve)));
+  const moved = element.style.getPropertyValue("translate");
+  expect(moved).not.toBe("40px 30px");
+
+  const showAgain = revertNewestStudioPendingEdit();
+  expect(element.style.getPropertyValue("translate")).toBe("40px 30px");
+  expect(revertNewestStudioPendingEdit()).toBeNull();
+  showAgain!();
+  expect(element.style.getPropertyValue("translate")).toBe(moved);
+
+  saved();
+  await vi.waitFor(() => expect(hasStudioPendingEdits()).toBe(false));
+  expect(revertNewestStudioPendingEdit()).toBeNull();
+});

package/src/components/editor/manualOffsetDrag.ts

@@ -13,6 +13,7 @@ import {
 import { computeDraggedGsapPosition } from "../../hooks/draggedGsapPosition";
 import { gsapWritesBox, gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
 import { readTranslatePx, UNREADABLE_TRANSLATE, writeTranslatePx } from "./plainTranslate";
+import type { StudioEditRevert } from "../../utils/studioPendingEdits";
 
 interface OffsetDragGsap {
   set: (el: Element, vars: Record<string, number | string>) => void;
@@ -510,6 +511,16 @@ function restoreManualOffsetDragMember(member: ManualOffsetDragMember): void {
   endStudioManualEditGesture(member.element, member.gestureToken);
 }
 
+/** Undo's live revert of a move: its members at gesture start. Null off the plain route, which GSAP draws. */
+export function manualOffsetMoveRevert(members: ManualOffsetDragMember[]): StudioEditRevert | null {
+  if (!members.every((member) => member.plainTranslate)) return null;
+  return () => {
+    const shown = members.map((member) => captureStudioPathOffset(member.element));
+    for (const member of members) restoreStudioPathOffset(member.element, member.initialPathOffset);
+    return () => members.forEach((member, i) => restoreStudioPathOffset(member.element, shown[i]!));
+  };
+}
+
 /** Roll back a FAILED drag to the exact gesture-start state. */
 export function restoreManualOffsetDragMembers(members: ManualOffsetDragMember[]): void {
   for (const member of members) {

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

@@ -209,4 +209,63 @@ describe("buildKeepSoundCutoutEdit", () => {
     const doc = parse(applyEdit(taken, edit));
     expect(doc.getElementById("clip-audio-2")?.getAttribute("src")).toBe("assets/talk.mp4");
   });
+
+  it("reads the authored src from the source, not the live element", () => {
+    const sub = source.replace('src="assets/talk.mp4"', 'src="../assets/a.mp4"');
+    const edit = buildKeepSoundCutoutEdit({
+      video: liveVideo(),
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    const doc = parse(applyEdit(sub, edit));
+    expect(doc.getElementById("clip-audio")?.getAttribute("src")).toBe("../assets/a.mp4");
+    expect(doc.getElementById("clip")?.getAttribute("src")).toBe("assets/cut.webm");
+  });
+
+  it("takes the first <source> child when the video has no src attribute", () => {
+    const withSource = source.replace(
+      /<video id="clip"([^>]*?) src="assets\/talk.mp4"([^>]*)><\/video>/,
+      '<video id="clip"$1$2><source src="assets/s.mp4" type="video/mp4"></video>',
+    );
+    const edit = buildKeepSoundCutoutEdit({
+      video: liveVideo(),
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    const doc = parse(applyEdit(withSource, edit));
+    expect(doc.getElementById("clip-audio")?.getAttribute("src")).toBe("assets/s.mp4");
+  });
+
+  it("reports when the audio insert did not land", () => {
+    const edit = buildKeepSoundCutoutEdit({
+      video: liveVideo(),
+      videoId: "clip",
+      target: { id: "missing" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    edit.prepareContent(source);
+    expect(edit.audioInserted()).toBe(false);
+    const ok = buildKeepSoundCutoutEdit({
+      video: liveVideo(),
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    ok.prepareContent(source);
+    expect(ok.audioInserted()).toBe(true);
+  });
+
+  it("copies loop onto the linked audio", () => {
+    const video = makeVideo({ id: "clip", src: "assets/talk.mp4", loop: "" });
+    const edit = buildKeepSoundCutoutEdit({
+      video,
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    const doc = parse(applyEdit(source, edit));
+    expect(doc.getElementById("clip-audio")?.hasAttribute("loop")).toBe(true);
+  });
 });

package/src/components/editor/mediaAudioEdits.ts

@@ -12,7 +12,9 @@ import { HF_AUDIO_GROUP_ATTR } from "@hyperframes/core/audio-groups";
 import {
   escapeHtmlAttribute,
   findTagByTarget,
+  applyPatchByTarget,
   readAttributeByTarget,
+  unescapeHtmlAttribute,
   type PatchOperation,
   type PatchTarget,
 } from "../../utils/sourcePatcher";
@@ -24,6 +26,9 @@ import { generateId } from "../../utils/generateId";
 const MEDIA_LINK_ATTR = "data-link";
 const SOUND_KEPT_ON_LINKED_AUDIO_STAGE = "Background removed. Sound kept on a linked audio track.";
 
+const SOUND_NOT_KEPT_MESSAGE =
+  "Background removed, but the sound could not be kept on a linked audio track. Undo to restore the original clip.";
+
 const MOVED_SOUND_ATTRS = [
   "data-volume",
   HF_AUDIO_FADE_IN_ATTR,
@@ -131,6 +136,15 @@ function formatAttrs(attrs: Array<[string, string]>): string {
   return attrs.map(([name, value]) => `${name}="${escapeHtmlAttribute(value)}"`).join(" ");
 }
 
+function readAuthoredSrc(source: string, target: PatchTarget): string {
+  const tag = findTagByTarget(source, target);
+  if (!tag) return "";
+  const own = /\bsrc=(["'])([^"']*)\1/.exec(tag.tag);
+  if (own?.[2]) return unescapeHtmlAttribute(own[2]);
+  const firstSource = /^\s*<source\b[^>]*?\bsrc=(["'])([^"']*)\1/i.exec(source.slice(tag.end + 1));
+  return firstSource?.[2] ? unescapeHtmlAttribute(firstSource[2]) : "";
+}
+
 function insertBeforeTarget(source: string, target: PatchTarget, markup: string): string {
   const match = findTagByTarget(source, target);
   if (!match) return source;
@@ -145,6 +159,7 @@ function insertBeforeTarget(source: string, target: PatchTarget, markup: string)
 export interface KeepSoundCutoutEdit {
   ops: PatchOperation[];
   prepareContent: (source: string) => string;
+  audioInserted: () => boolean;
 }
 
 export function buildKeepSoundCutoutEdit(input: {
@@ -155,10 +170,11 @@ export function buildKeepSoundCutoutEdit(input: {
 }): KeepSoundCutoutEdit {
   const { video, target } = input;
   const linkId = mintLinkId(video.ownerDocument);
-  const originalSrc = video.getAttribute("src") ?? "";
+  let audioInserted = false;
 
   const movedSound: Array<[string, string]> = [];
-  const ops: PatchOperation[] = [...cutoutOps({ isVideo: true, cutoutSrc: input.cutoutSrc })];
+  const cutoutSrcOp = htmlAttr("src", input.cutoutSrc);
+  const ops: PatchOperation[] = [htmlAttr("muted", "true"), dataAttr("has-audio", null)];
   for (const name of MOVED_SOUND_ATTRS) {
     const value = video.getAttribute(name);
     if (value === null) continue;
@@ -174,6 +190,7 @@ export function buildKeepSoundCutoutEdit(input: {
   ops.push(dataAttr(stripDataPrefix(MEDIA_LINK_ATTR), linkId));
 
   const prepareContent = (source: string): string => {
+    const originalSrc = readAuthoredSrc(source, target);
     const audioId = firstFreeName(
       `${input.videoId || "video"}-audio`,
       new Set(collectHtmlIds(source)),
@@ -193,10 +210,14 @@ export function buildKeepSoundCutoutEdit(input: {
       [MEDIA_LINK_ATTR, linkId],
       ...movedSound,
     ];
-    return insertBeforeTarget(source, target, `<audio ${formatAttrs(attrs)}></audio>`);
+    if (video.hasAttribute("loop")) attrs.push(["loop", ""]);
+    const cut = applyPatchByTarget(source, target, cutoutSrcOp);
+    const inserted = insertBeforeTarget(cut, target, `<audio ${formatAttrs(attrs)}></audio>`);
+    audioInserted = inserted !== cut;
+    return inserted;
   };
 
-  return { ops, prepareContent };
+  return { ops, prepareContent, audioInserted: () => audioInserted };
 }
 
 export interface MediaEditContext {
@@ -231,23 +252,31 @@ export async function commitCutout(
   const isVideo = isVideoSelection(ctx.element);
   const label = "Remove background";
   const keep = isVideo && keepSound;
-  const landed = keep
-    ? await commitKeepSoundCutout(ctx, cutoutSrc, label)
-    : await ctx.commit(ctx.element, cutoutOps({ isVideo, cutoutSrc }), { label });
+  if (!keep) {
+    const applied = await ctx.commit(ctx.element, cutoutOps({ isVideo, cutoutSrc }), { label });
+    if (!applied) throw new Error("Couldn't apply the cutout");
+    return "Applied cutout";
+  }
+  const { landed, soundKept } = await commitKeepSoundCutout(ctx, cutoutSrc, label);
   if (!landed) throw new Error("Couldn't apply the cutout");
-  return keep ? SOUND_KEPT_ON_LINKED_AUDIO_STAGE : "Applied cutout";
+  if (!soundKept) throw new Error(SOUND_NOT_KEPT_MESSAGE);
+  return SOUND_KEPT_ON_LINKED_AUDIO_STAGE;
 }
 
-function commitKeepSoundCutout(
+async function commitKeepSoundCutout(
   ctx: MediaEditContext,
   cutoutSrc: string,
   label: string,
-): Promise<boolean> {
+): Promise<{ landed: boolean; soundKept: boolean }> {
   const edit = buildKeepSoundCutoutEdit({
     video: ctx.element.element,
     videoId: ctx.element.id ?? null,
     target: buildDomEditPatchTarget(ctx.element),
     cutoutSrc,
   });
-  return ctx.commit(ctx.element, edit.ops, { label, prepareContent: edit.prepareContent });
+  const landed = await ctx.commit(ctx.element, edit.ops, {
+    label,
+    prepareContent: edit.prepareContent,
+  });
+  return { landed, soundKept: landed && edit.audioInserted() };
 }

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

@@ -103,11 +103,11 @@ function mount(dataAttributes: Record<string, string>, alone = false, voices = 2
   return { host, onSetAttributeQuiet, onSetAttributeLive };
 }
 
-function mountGroup(memberStart: number) {
+function mountGroup(memberStart: number, memberTag: "audio" | "video" = "audio") {
   const bus = document.createElement("hf-audio-group");
   bus.id = "voiceover";
   document.body.append(bus);
-  const member = document.createElement("audio");
+  const member = document.createElement(memberTag);
   member.id = "vo-1";
   member.setAttribute("data-audio-group", "voiceover");
   member.setAttribute("data-start", String(memberStart));
@@ -649,6 +649,16 @@ describe("AudioFxGroup dynamic carve", () => {
       leaveShelf(host);
     });
 
+    it("seeks a group audition to an audible video member's span", () => {
+      act(() =>
+        usePlayerStore.setState({ isPlaying: false, currentTime: 2, requestedSeekTime: null }),
+      );
+      const host = mountGroup(7, "video");
+      hoverPreset(host);
+      expect(store().requestedSeekTime).toBe(7);
+      leaveShelf(host);
+    });
+
     it("leaves a transport the author started alone", () => {
       // Stopping their playback because they passed over a preset would be the
       // panel taking a decision nobody offered it.
@@ -1621,7 +1631,14 @@ describe("AudioFxGroup carve by default", () => {
 describe("AudioFxGroup carve source list", () => {
   /** Mount a bed alongside tracks named however the test needs. */
   const mountWith = (
-    tracks: { id: string; src?: string; start?: string; duration?: string }[],
+    tracks: {
+      id: string;
+      src?: string;
+      start?: string;
+      duration?: string;
+      tag?: "audio" | "video";
+      muted?: boolean;
+    }[],
     bedAttrs: Record<string, string> = {},
   ) => {
     const bed = document.createElement("audio");
@@ -1629,8 +1646,9 @@ describe("AudioFxGroup carve source list", () => {
     for (const [k, v] of Object.entries(bedAttrs)) bed.setAttribute(`data-${k}`, v);
     document.body.append(bed);
     for (const t of tracks) {
-      const el = document.createElement("audio");
+      const el = document.createElement(t.tag ?? "audio");
       el.id = t.id;
+      if (t.muted) el.setAttribute("muted", "");
       if (t.src) el.setAttribute("src", t.src);
       if (t.start !== undefined) el.setAttribute("data-start", t.start);
       if (t.duration !== undefined) el.setAttribute("data-duration", t.duration);
@@ -1660,6 +1678,16 @@ describe("AudioFxGroup carve source list", () => {
     return { host, options, boxes, onSetAttributeQuiet };
   };
 
+  it("offers an audible video as a voice and never a muted one", () => {
+    const { options } = mountWith([
+      { id: "a-roll", tag: "video" },
+      { id: "b-roll", tag: "video", muted: true },
+      { id: "narration" },
+    ]);
+    expect(options).toContain("a-roll");
+    expect(options).not.toContain("b-roll");
+  });
+
   it("reads the one voice out instead of offering a picker with one entry", () => {
     // A question with one answer is not a question. It is also the common case: a
     // narration and a bed, with a couple of stings that cannot be the voice.

package/src/components/editor/propertyPanelAudioFxGroup.tsx

@@ -54,6 +54,7 @@ import {
   resolveAudioGroups,
 } from "@hyperframes/core/audio-groups";
 import { useFxLevelling } from "./useFxLevelling.js";
+import { isCarveVoiceElement } from "./useFxCarveGrouping.js";
 
 function auditionSpan(startRaw: string | undefined, durationRaw: string | undefined) {
   const start = Number.parseFloat(startRaw ?? "");
@@ -70,8 +71,9 @@ function auditionSpansFor(element: DomEditSelection): AuditionSpan[] {
   if (element.tagName?.toLowerCase() !== HF_AUDIO_GROUP_TAG || !element.id) return [];
   const doc = element.element?.ownerDocument;
   if (!doc) return [];
-  return [...doc.querySelectorAll(`audio[${HF_AUDIO_GROUP_ATTR}]`)]
+  return [...doc.querySelectorAll(`[${HF_AUDIO_GROUP_ATTR}]`)]
     .filter((member) => member.getAttribute(HF_AUDIO_GROUP_ATTR) === element.id)
+    .filter(isCarveVoiceElement)
     .flatMap((member) => {
       const span = auditionSpan(
         member.getAttribute("data-start") ?? undefined,

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

@@ -652,7 +652,12 @@ function makeHandlers() {
         ops: PatchOperation[],
         options: BatchOptions,
       ) => Promise<boolean>
-    >(async () => true),
+    >(async (_selection, _ops, options) => {
+      options.prepareContent?.(
+        '<div data-composition-id="main"><video id="s1-bg" src="assets/intro-loop.mp4" data-start="2"></video></div>',
+      );
+      return true;
+    }),
   };
 }
 
@@ -871,14 +876,13 @@ describe.each<PanelKind>(["flat", "design"])("%s panel — cutout keeps the soun
     const [selection, ops, options] = onSetAttributeBatch.mock.calls[0] ?? [];
     expect(selection).toBe(element);
     expect(ops).toEqual([
-      htmlOp("src", "assets/cut.webm"),
       htmlOp("muted", "true"),
       dataOp("has-audio", null),
       dataOp("volume", null),
       dataOp("link", "link"),
     ]);
     const source =
-      '<div data-composition-id="main"><video id="s1-bg" src="assets/cut.webm" muted data-start="2" data-duration="3" data-track-index="0" data-link="link"></video></div>';
+      '<div data-composition-id="main"><video id="s1-bg" src="assets/intro-loop.mp4" muted data-start="2" data-duration="3" data-track-index="0" data-link="link"></video></div>';
     const prepared = options?.prepareContent?.(source) ?? "";
     const audio = new DOMParser()
       .parseFromString(prepared, "text/html")

package/src/components/editor/useDomEditNudge.ts

@@ -11,7 +11,7 @@ import { ownsPlainKeys } from "../../utils/typingTarget";
 import { acquireCanvasNudgeKeys } from "../../utils/canvasNudgeGate";
 import {
   addStudioPendingEditFlushListener,
-  trackStudioPendingEdit,
+  beginStudioPendingEdit,
 } from "../../utils/studioPendingEdits";
 import type { DomEditSelection } from "./domEditing";
 import {
@@ -31,6 +31,7 @@ import {
   applyManualOffsetNudgeDraft,
   createManualOffsetDragMember,
   endManualOffsetDragMembers,
+  manualOffsetMoveRevert,
   restoreManualOffsetDragMembers,
   type ManualOffsetDragMember,
 } from "./manualOffsetDrag";
@@ -47,7 +48,7 @@ interface NudgeSession {
   /** Accumulated delta of the burst, in composition px. */
   accum: { x: number; y: number };
   timer: ReturnType<typeof setTimeout> | null;
-  endPendingEdit: (saved?: Promise<unknown>) => void;
+  edit: ReturnType<typeof beginStudioPendingEdit>;
 }
 
 export interface UseDomEditNudgeParams {
@@ -161,11 +162,16 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
         next: applyManualOffsetNudgeCommit(member, session.accum),
         plainTranslate: member.plainTranslate,
       }));
-      const commit = session.isGroup
-        ? p.onGroupPathOffsetCommitRef.current(updates)
-        : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next, {
-            plainTranslate: updates[0].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) {
@@ -177,7 +183,7 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
         .finally(() => endManualOffsetDragMembers(session.members));
       return saved;
     } finally {
-      session.endPendingEdit(saved);
+      session.edit.settle(saved);
     }
   };
   const commitSessionRef = useRef(commitSession);
@@ -190,7 +196,7 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
     if (session.timer) clearTimeout(session.timer);
     restoreManualOffsetDragMembers(session.members);
     endManualOffsetDragMembers(session.members);
-    session.endPendingEdit();
+    session.edit.settle();
   }, [params.allowCanvasMovement]);
 
   // Build drag members for the current target set — the same member snapshot a
@@ -217,9 +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?.();
-    let endPendingEdit: NudgeSession["endPendingEdit"] = () => {};
-    trackStudioPendingEdit(new Promise<unknown>((resolve) => (endPendingEdit = resolve)));
-    return { members, isGroup, accum: { x: 0, y: 0 }, timer: null, endPendingEdit };
+    const edit = beginStudioPendingEdit(manualOffsetMoveRevert(members));
+    return { members, isGroup, accum: { x: 0, y: 0 }, timer: null, edit };
   };
 
   const handleKeyDown = (event: KeyboardEvent) => {

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