@hyperframes/studio 0.8.107 → 0.8.109

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

@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+import { CROP_ASPECT_PRESETS, centredCropInsets } from "./cropPresets";
+
+describe("centredCropInsets", () => {
+  it("trims the sides of a wide frame to 9:16, centred", () => {
+    const insets = centredCropInsets(1920, 1080, 9 / 16);
+    expect(insets.top).toBe(0);
+    expect(insets.bottom).toBe(0);
+    expect(insets.left).toBeCloseTo((1920 - 607.5) / 2, 6);
+    expect(insets.right).toBeCloseTo(insets.left, 6);
+  });
+
+  it("trims top and bottom of a tall frame to 16:9", () => {
+    const insets = centredCropInsets(1080, 1920, 16 / 9);
+    expect(insets.left).toBe(0);
+    expect(insets.right).toBe(0);
+    expect(insets.top).toBeCloseTo((1920 - 607.5) / 2, 6);
+    expect(insets.bottom).toBeCloseTo(insets.top, 6);
+  });
+
+  it("leaves the visible box in the requested ratio", () => {
+    for (const [w, h] of [
+      [1920, 1080],
+      [1080, 1920],
+      [800, 800],
+    ]) {
+      for (const { ratio } of CROP_ASPECT_PRESETS) {
+        const i = centredCropInsets(w, h, ratio);
+        expect((w - i.left - i.right) / (h - i.top - i.bottom)).toBeCloseTo(ratio, 6);
+      }
+    }
+  });
+
+  it("is no crop when the frame already has the ratio", () => {
+    expect(centredCropInsets(1600, 900, 16 / 9)).toEqual({ top: 0, right: 0, bottom: 0, left: 0 });
+  });
+
+  it("offers the four spec ratios", () => {
+    expect(CROP_ASPECT_PRESETS.map((p) => p.label)).toEqual(["16:9", "9:16", "1:1", "4:5"]);
+  });
+});

package/src/components/editor/cropPresets.ts

@@ -0,0 +1,24 @@
+import type { ClipPathInsetSides } from "./clipPathHelpers";
+
+export const CROP_ASPECT_PRESETS = [
+  { label: "16:9", ratio: 16 / 9 },
+  { label: "9:16", ratio: 9 / 16 },
+  { label: "1:1", ratio: 1 },
+  { label: "4:5", ratio: 4 / 5 },
+] as const;
+
+/** Insets (element CSS px) that leave the largest centred box of `ratio` (width / height). */
+export function centredCropInsets(
+  width: number,
+  height: number,
+  ratio: number,
+): ClipPathInsetSides {
+  const none = { top: 0, right: 0, bottom: 0, left: 0 };
+  if (width <= 0 || height <= 0 || ratio <= 0) return none;
+  if (width / height > ratio) {
+    const side = (width - height * ratio) / 2;
+    return side > 1e-9 ? { ...none, left: side, right: side } : none;
+  }
+  const band = (height - width / ratio) / 2;
+  return band > 1e-9 ? { ...none, top: band, bottom: band } : none;
+}

package/src/components/editor/domEditInlineText.ts

@@ -54,18 +54,20 @@ export function canEditElementTextInline(element: HTMLElement | null): boolean {
 }
 
 function hasOnlyFormattingChildren(element: HTMLElement): boolean {
-  const HTMLElementClass = element.ownerDocument.defaultView?.HTMLElement;
-  if (!HTMLElementClass) return false;
   for (const child of Array.from(element.children)) {
     if (!isRichTextFormattingTag(child.tagName)) return false;
-    if (!(child instanceof HTMLElementClass)) return false;
+    if (!isHtmlFromAnyWindow(child)) return false;
     // Formatting nests, and a structural child hidden inside a span is still
     // structural.
-    if (!hasOnlyFormattingChildren(child)) return false;
+    if (!hasOnlyFormattingChildren(child as HTMLElement)) return false;
   }
   return true;
 }
 
+function isHtmlFromAnyWindow(node: Element): boolean {
+  return node.namespaceURI === "http://www.w3.org/1999/xhtml";
+}
+
 /** Where and when a press landed, for recognising the next one as a pair. */
 export interface PressMark {
   x: number;

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

@@ -30,6 +30,13 @@ describe("canEditElementTextInline", () => {
     expect(canEditElementTextInline(element)).toBe(true);
   });
 
+  it("opens styled copy whose formatting comes from another window", () => {
+    const element = mount("<h1>a <strong>bold</strong></h1>");
+    // happy-dom shares classes across windows; drop this window's HTMLElement as a foreign realm would.
+    Object.setPrototypeOf(element.firstElementChild, Element.prototype);
+    expect(canEditElementTextInline(element)).toBe(true);
+  });
+
   it("keeps out an element with a structural child, which the panel edits field by field", () => {
     expect(canEditElementTextInline(mount("<div><h1>a</h1><p>b</p></div>"))).toBe(false);
   });

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

@@ -7,6 +7,7 @@ import {
   buildTextFieldChildLocator,
   readHfId,
   liveLayerElement,
+  domEditSelectionToFacts,
 } from "./domEditingLayers";
 import type { DomEditTextField } from "./domEditingTypes";
 
@@ -332,3 +333,23 @@ describe("liveLayerElement", () => {
     ).toBe("strip");
   });
 });
+
+describe("domEditSelectionToFacts hasAudio", () => {
+  async function factsFor(html: string) {
+    document.body.innerHTML = html;
+    const node = document.body.firstElementChild;
+    if (!(node instanceof HTMLElement)) throw new Error("expected element");
+    const selection = await resolveDomEditSelection(node, opts);
+    document.body.innerHTML = "";
+    if (!selection) throw new Error("expected selection");
+    return domEditSelectionToFacts(selection);
+  }
+
+  it("is true for an unmuted video, false for muted or data-has-audio=false", async () => {
+    expect((await factsFor(`<video id="v1"></video>`)).hasAudio).toBe(true);
+    expect((await factsFor(`<video id="v2" data-has-audio="true"></video>`)).hasAudio).toBe(true);
+    expect((await factsFor(`<video id="v3" muted></video>`)).hasAudio).toBe(false);
+    expect((await factsFor(`<video id="v4" data-has-audio="false"></video>`)).hasAudio).toBe(false);
+    expect((await factsFor(`<div id="d1"></div>`)).hasAudio).toBe(false);
+  });
+});

package/src/components/editor/domEditingLayers.ts

@@ -1,4 +1,5 @@
 import { probeSourceElement } from "./probeSourceElement";
+import { isAudibleVideoNode } from "../../player/lib/timelineElementHelpers";
 import type { PatchOperation } from "../../utils/sourcePatcher";
 import {
   resolveEditingAffordances,
@@ -248,6 +249,7 @@ export function domEditSelectionToFacts(
     hasEditableText: selection.textFields.length > 0,
     hasTimingStart: selection.dataAttributes.start != null,
     animationCount,
+    hasAudio: isAudibleVideoNode(selection.element),
   };
 }
 

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/linkedSpeedEdits.test.tsx

@@ -0,0 +1,164 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { createHappyDomRootHarness } from "../../player/components/testRootHarness";
+import { usePlayerStore, type TimelineElement } from "../../player/store/playerStore";
+import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import type { DomEditSelection } from "./domEditingTypes";
+import {
+  fanOutAttributeInSource,
+  linkedPartnerTargets,
+  useLinkedSpeedCommit,
+  withLinkedPlaybackRate,
+  type LinkedSpeedCommit,
+} from "./linkedSpeedEdits";
+import { useVolumeAutomation } from "./useVolumeAutomation";
+import { useLinkedClipPreferences } from "../../utils/linkedClipPreferences";
+
+const clip = (id: string, tag: string, link?: string): TimelineElement => ({
+  id,
+  domId: id,
+  tag,
+  start: 0,
+  duration: 4,
+  track: 0,
+  ...(link ? { link } : {}),
+});
+
+const elements = [
+  clip("talk", "video", "lk-1"),
+  clip("talk-audio", "audio", "lk-1"),
+  clip("music", "audio"),
+];
+
+const source = `<div data-composition-id="main">
+<video id="talk" data-start="0" data-duration="4" data-link="lk-1" muted></video>
+<audio id="talk-audio" data-start="0" data-duration="4" data-link="lk-1" data-automation="{&quot;version&quot;:1,&quot;lanes&quot;:[]}"></audio>
+<audio id="music" data-start="0" data-duration="4"></audio>
+</div>`;
+
+function selection(id: string, dataAttributes: Record<string, string> = {}): DomEditSelection {
+  const element = document.createElement("video");
+  element.id = id;
+  return {
+    id,
+    element,
+    label: id,
+    tagName: "video",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    boundingBox: { x: 0, y: 0, width: 0, height: 0 },
+    textContent: null,
+    dataAttributes: { start: "0", duration: "4", ...dataAttributes },
+    inlineStyles: {},
+    computedStyles: {},
+    textFields: [],
+    capabilities: {
+      canSelect: true,
+      canEditStyles: true,
+      canCrop: true,
+      canMove: true,
+      canResize: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
+    },
+  };
+}
+
+describe("linkedPartnerTargets", () => {
+  it("returns the other data-link members and nothing for an unlinked clip", () => {
+    expect(linkedPartnerTargets({ id: "talk" }, elements)).toEqual([{ id: "talk-audio" }]);
+    expect(linkedPartnerTargets({ id: "music" }, elements)).toEqual([]);
+  });
+
+  it("reaches no partner with Linked Selection off", () => {
+    useLinkedClipPreferences.getState().setLinkedSelection(false);
+    try {
+      expect(linkedPartnerTargets({ id: "talk" }, elements)).toEqual([]);
+    } finally {
+      useLinkedClipPreferences.getState().setLinkedSelection(true);
+    }
+  });
+});
+
+describe("fanOutAttributeInSource", () => {
+  it("writes each partner from its own current value", () => {
+    const seen: Array<string | undefined> = [];
+    const next = fanOutAttributeInSource(
+      source,
+      [{ id: "talk-audio" }],
+      "data-automation",
+      (raw) => {
+        seen.push(raw);
+        return "rate-lane";
+      },
+    );
+    expect(seen).toEqual(['{"version":1,"lanes":[]}']);
+    expect(next).toContain(
+      'id="talk-audio" data-start="0" data-duration="4" data-link="lk-1" data-automation="rate-lane"',
+    );
+    expect(next).not.toContain('id="music" data-start="0" data-duration="4" data-automation');
+  });
+});
+
+const harness = createHappyDomRootHarness();
+
+function renderLinked(sel: DomEditSelection, commit: CommitDomAttributeBatch) {
+  let linked: LinkedSpeedCommit | null = null;
+  let rate: ReturnType<typeof useVolumeAutomation>["rate"] | null = null;
+  function Probe() {
+    linked = useLinkedSpeedCommit(sel, commit);
+    rate = useVolumeAutomation(sel, 0, vi.fn(), linked).rate;
+    return null;
+  }
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  act(() => harness.mount(host).render(<Probe />));
+  return { linked: () => linked, rate: () => rate };
+}
+
+describe("linked speed edits", () => {
+  it("fans a playback-rate edit out to the partner in one batch commit", async () => {
+    usePlayerStore.getState().setElements(elements);
+    const commit = vi.fn<CommitDomAttributeBatch>(async () => true);
+    const onSetAttribute = vi.fn();
+    const probe = renderLinked(selection("talk"), commit);
+    await withLinkedPlaybackRate(onSetAttribute, probe.linked())("playback-rate", "2");
+    expect(onSetAttribute).not.toHaveBeenCalled();
+    expect(commit).toHaveBeenCalledTimes(1);
+    const [, ops, options] = commit.mock.calls[0] ?? [];
+    expect(ops).toEqual([{ type: "attribute", property: "playback-rate", value: "2" }]);
+    expect(options?.prepareContent?.(source)).toContain(
+      'id="talk-audio" data-start="0" data-duration="4" data-link="lk-1" data-automation="{&quot;version&quot;:1,&quot;lanes&quot;:[]}" data-playback-rate="2"',
+    );
+  });
+
+  it("fans a ramp preset out as one commit carrying each member's rate lane", () => {
+    usePlayerStore.getState().setElements(elements);
+    const commit = vi.fn<CommitDomAttributeBatch>(async () => true);
+    const probe = renderLinked(selection("talk"), commit);
+    act(() => probe.rate()?.onApplyPreset("ramp-in"));
+    expect(commit).toHaveBeenCalledTimes(1);
+    const [, ops, options] = commit.mock.calls[0] ?? [];
+    expect(ops?.[0]?.property).toBe("automation");
+    expect(String(ops?.[0]?.value)).toContain('"target":"rate"');
+    const partner = /id="talk-audio"[^>]*data-automation="([^"]*)"/.exec(
+      options?.prepareContent?.(source) ?? "",
+    )?.[1];
+    expect(partner).toContain("rate");
+  });
+
+  it("leaves an unlinked clip on its usual write path", async () => {
+    usePlayerStore.getState().setElements(elements);
+    const commit = vi.fn<CommitDomAttributeBatch>(async () => true);
+    const onSetAttribute = vi.fn();
+    const probe = renderLinked(selection("music"), commit);
+    expect(probe.linked()).toBeNull();
+    await withLinkedPlaybackRate(onSetAttribute, probe.linked())("playback-rate", "2");
+    expect(onSetAttribute).toHaveBeenCalledWith("playback-rate", "2");
+    expect(commit).not.toHaveBeenCalled();
+  });
+});

package/src/components/editor/linkedSpeedEdits.ts

@@ -0,0 +1,94 @@
+import { usePlayerStore, type TimelineElement } from "../../player/store/playerStore";
+import { expandToLinkedMembers } from "../../player/components/audioClipLink";
+import { isLinkedSelectionOn } from "../../utils/linkedClipPreferences";
+import {
+  applyPatchByTarget,
+  readAttributeByTarget,
+  type PatchTarget,
+} from "../../utils/sourcePatcher";
+import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import { buildPatchTarget } from "../../hooks/timelineEditingHelpers";
+import type { DomEditSelection } from "./domEditingTypes";
+
+type AttributeValueFor = (current: string | undefined) => string | null;
+
+/** Writes a speed attribute on the selection and every `data-link` partner as one undo step. */
+export interface LinkedSpeedCommit {
+  commitAttribute: (attr: string, valueFor: AttributeValueFor, label: string) => Promise<boolean>;
+}
+
+const keyOf = (el: TimelineElement) => el.key ?? el.id;
+const dataProperty = (attr: string) => (attr.startsWith("data-") ? attr.slice(5) : attr);
+
+function isSelected(el: TimelineElement, selection: PatchTarget): boolean {
+  if (selection.hfId && el.hfId) return el.hfId === selection.hfId;
+  return selection.id != null && (el.domId ?? el.id) === selection.id;
+}
+
+export function linkedPartnerTargets(
+  selection: PatchTarget,
+  elements: readonly TimelineElement[],
+): PatchTarget[] {
+  const self = elements.find((el) => isSelected(el, selection));
+  if (!self?.link) return [];
+  const members = expandToLinkedMembers([keyOf(self)], elements, isLinkedSelectionOn());
+  members.delete(keyOf(self));
+  return elements
+    .filter((el) => members.has(keyOf(el)))
+    .map(buildPatchTarget)
+    .filter((target): target is NonNullable<typeof target> => target !== null);
+}
+
+export function fanOutAttributeInSource(
+  source: string,
+  targets: readonly PatchTarget[],
+  attr: string,
+  valueFor: AttributeValueFor,
+): string {
+  const property = dataProperty(attr);
+  return targets.reduce(
+    (html, target) =>
+      applyPatchByTarget(html, target, {
+        type: "attribute",
+        property,
+        value: valueFor(readAttributeByTarget(html, target, attr)),
+      }),
+    source,
+  );
+}
+
+/** Null when the selection has no link partner, so unlinked clips keep their usual write path. */
+export function useLinkedSpeedCommit(
+  selection: DomEditSelection,
+  commit: CommitDomAttributeBatch | undefined,
+): LinkedSpeedCommit | null {
+  const elements = usePlayerStore((s) => s.elements);
+  if (!commit) return null;
+  const partners = linkedPartnerTargets(selection, elements);
+  if (partners.length === 0) return null;
+  return {
+    commitAttribute: (attr, valueFor, label) => {
+      const property = dataProperty(attr);
+      return commit(
+        selection,
+        [{ type: "attribute", property, value: valueFor(selection.dataAttributes[property]) }],
+        {
+          label,
+          prepareContent: (html) => fanOutAttributeInSource(html, partners, attr, valueFor),
+        },
+      );
+    },
+  };
+}
+
+/** Routes `playback-rate` through the linked commit; every other attribute keeps `onSetAttribute`. */
+export function withLinkedPlaybackRate(
+  onSetAttribute: (attr: string, value: string) => void | Promise<void>,
+  linked: LinkedSpeedCommit | null,
+): (attr: string, value: string) => void | Promise<void> {
+  if (!linked) return onSetAttribute;
+  return async (attr, value) => {
+    if (attr !== "playback-rate") return onSetAttribute(attr, value);
+    await linked.commitAttribute("data-playback-rate", () => value, "Edit speed");
+  };
+}

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

@@ -88,9 +88,9 @@ describe("cutoutOps", () => {
 describe("mintLinkId", () => {
   it("dedupes against element ids and existing links", () => {
     const doc = document.implementation.createHTMLDocument("t");
-    expect(mintLinkId(doc)).toBe("link");
-    doc.body.innerHTML = '<div id="link"></div><video data-link="link-2"></video>';
-    expect(mintLinkId(doc)).toBe("link-3");
+    expect(mintLinkId(doc)).toBe("lk-1");
+    doc.body.innerHTML = '<div id="lk-1"></div><video data-link="lk-2"></video>';
+    expect(mintLinkId(doc)).toBe("lk-3");
   });
 });
 
@@ -176,10 +176,26 @@ describe("buildKeepSoundCutoutEdit", () => {
       { target: "rate", points: [{ t: 0, v: 2 }] },
     ]);
     expect(audio.getAttribute("data-link")).toBe(video.getAttribute("data-link"));
-    expect(video.getAttribute("data-link")).toBe("link");
+    expect(video.getAttribute("data-link")).toBe("lk-1");
+    expect(video.getAttribute("data-sync-origin")).toBe("lk-1");
+    expect(audio.getAttribute("data-sync-origin")).toBe("lk-1");
     expect(audio.parentElement).toBe(video.parentElement);
   });
 
+  it("keeps a hidden video's sound silent on the linked audio", () => {
+    const video = liveVideo();
+    video.setAttribute("data-hidden", "");
+    const edit = buildKeepSoundCutoutEdit({
+      video,
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/talk-cutout.webm",
+    });
+    const hidden = source.replace('<video id="clip"', '<video id="clip" data-hidden');
+    const doc = parse(applyEdit(hidden, edit));
+    expect(doc.getElementById("clip-audio")?.hasAttribute("data-hidden")).toBe(true);
+  });
+
   it("drops the video's automation attribute when it held no rate lane", () => {
     const video = makeVideo({
       id: "clip",
@@ -209,4 +225,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);
+  });
 });