@hyperframes/studio 0.8.108 → 0.8.110

package/src/player/components/clipMenuAudioItems.tsx

@@ -1,17 +1,11 @@
-import { formatAudioGain } from "@hyperframes/core/audio-gain";
 import type { TimelineElement } from "../store/timelineElement";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import { useStudioShellContextOptional } from "../../contexts/StudioContext";
-import {
-  clipHasSound,
-  normalizeToastText,
-  requestNormalizePlan,
-  throwUnlessSaved,
-  TimelineSaveError,
-  VOLUME_LANE_REFUSAL,
-  volumeLaneOwnsGain,
-} from "./clipMenuNormalize";
-import { isDuckableBed, readBedCarve, setDuckUnderVoice, type DuckOutcome } from "./clipMenuDuck";
+import { usePlayerStore } from "../store/playerStore";
+import { useLivePreviewIframe } from "../store/previewIframeStore";
+import { clipHasSound, throwUnlessSaved, TimelineSaveError } from "./clipMenuNormalize";
+import { openAudioGainDialog } from "./audioGainDialogStore";
+import { offersDuck, readBedCarve, setDuckUnderVoice, type DuckOutcome } from "./clipMenuDuck";
 
 const ITEM_CLASS =
   "w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-hidden text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 cursor-pointer";
@@ -23,43 +17,28 @@ const DUCK_TOAST: Record<DuckOutcome, string> = {
   aborted: "Could not group the voices to duck under.",
 };
 
-/** Sound group of the clip menu: Normalize loudness (one-shot) and Duck under voice (toggle). */
+/** Audio Gain… (opens the G dialog) or Duck under voice (toggle), placed separately in the sound group. */
 export function ClipMenuAudioItems({
+  part,
   element,
   onClose,
 }: {
+  part: "gain" | "duck";
   element: TimelineElement;
   onClose: () => void;
 }) {
   const shell = useStudioShellContextOptional();
-  const { onSetElementAttributeQuiet, onGroupClips } = useTimelineEditContextOptional();
-  const doc = shell?.previewIframeRef.current?.contentDocument ?? null;
+  const { onSetElementAttributeQuiet, onGroupClips, onNotice } = useTimelineEditContextOptional();
+  const liveIframe = useLivePreviewIframe();
+  const sessionProjectId = usePlayerStore((s) => s.timelineProjectId);
+  const projectId = shell?.projectId ?? sessionProjectId;
+  const showToast = shell?.showToast ?? onNotice;
+  const doc = (shell?.previewIframeRef.current ?? liveIframe)?.contentDocument ?? null;
   const bed = doc?.getElementById(element.domId ?? element.id) ?? null;
   const ducked = bed ? readBedCarve(bed)?.enabled === true : false;
-  if (!clipHasSound(element) || !shell || !onSetElementAttributeQuiet) return null;
-  const { showToast, projectId } = shell;
-
-  const normalize = async () => {
-    onClose();
-    if (volumeLaneOwnsGain(element)) {
-      showToast(VOLUME_LANE_REFUSAL, "error");
-      return;
-    }
-    try {
-      const plan = await requestNormalizePlan(projectId, element);
-      throwUnlessSaved(
-        await onSetElementAttributeQuiet(
-          element,
-          "data-volume",
-          formatAudioGain(plan.volume),
-          "Normalize loudness",
-        ),
-      );
-      showToast(normalizeToastText(plan), "info");
-    } catch (error) {
-      showToast(error instanceof Error ? error.message : String(error), "error");
-    }
-  };
+  if (!clipHasSound(element) || !projectId || !showToast || !onSetElementAttributeQuiet) {
+    return null;
+  }
 
   const toggleDuck = async () => {
     onClose();
@@ -84,25 +63,33 @@ export function ClipMenuAudioItems({
     showToast(DUCK_TOAST[outcome], outcome === "aborted" ? "error" : "info");
   };
 
-  return (
-    <>
-      <button type="button" role="menuitem" className={ITEM_CLASS} onClick={() => void normalize()}>
-        <span>Normalize loudness</span>
+  if (part === "gain") {
+    return (
+      <button
+        type="button"
+        role="menuitem"
+        className={ITEM_CLASS}
+        onClick={() => {
+          onClose();
+          openAudioGainDialog(element);
+        }}
+      >
+        <span>Audio Gain…</span>
+        <span className="text-neutral-500 text-[10px] ml-3">G</span>
       </button>
-      {isDuckableBed(bed) && (
-        <button
-          type="button"
-          role="menuitemcheckbox"
-          aria-checked={ducked}
-          className={ITEM_CLASS}
-          onClick={() => void toggleDuck()}
-        >
-          <span>
-            <span className="inline-block w-3">{ducked ? "✓" : ""}</span>Duck under voice
-          </span>
-        </button>
-      )}
-      <div className="my-1 border-t border-neutral-700/60" />
-    </>
+    );
+  }
+  if (!offersDuck(doc, bed)) return null;
+  return (
+    <button
+      type="button"
+      role="menuitemcheckbox"
+      aria-checked={ducked}
+      className={ITEM_CLASS}
+      onClick={() => void toggleDuck()}
+    >
+      <span>Duck under voice</span>
+      <span aria-hidden="true">{ducked ? "✓" : ""}</span>
+    </button>
   );
 }

package/src/player/components/clipMenuDuck.ts

@@ -83,6 +83,11 @@ export function duckVoiceSources(doc: Document, bed: Element): string[] {
     .map((candidate) => candidate.id);
 }
 
+export function offersDuck(doc: Document | null, bed: Element | null): boolean {
+  if (!doc || !isDuckableBed(bed)) return false;
+  return readBedCarve(bed)?.enabled === true || duckVoiceSources(doc, bed).length > 0;
+}
+
 async function writeMeasuredCarve(
   doc: Document,
   bed: Element,

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

@@ -0,0 +1,174 @@
+import { describe, expect, it, vi } from "vitest";
+import type { TimelineElement } from "../store/playerStore";
+import { resolveLinkMenuItems } from "./clipMenuLinkItems";
+
+const clip = (id: string, tag: string, extra: Partial<TimelineElement> = {}): TimelineElement => ({
+  id,
+  tag,
+  src: "talk.mp4",
+  start: 0,
+  duration: 4,
+  track: 0,
+  ...extra,
+});
+
+function labels(element: TimelineElement, elements: TimelineElement[], selected: string[] = []) {
+  return resolveLinkMenuItems({
+    element,
+    elements,
+    selectedKeys: new Set(selected),
+    onLinkEdit: vi.fn(),
+    onDeleteElementOnly: vi.fn(),
+  }).map((item) => item.label);
+}
+
+describe("resolveLinkMenuItems", () => {
+  it("offers Detach audio on a video with sound (frame 4)", () => {
+    const talk = clip("talk", "video", { hasAudio: true });
+    expect(labels(talk, [talk])).toEqual(["Detach audio"]);
+  });
+
+  it("offers Unlink, Merge back and Delete this clip only on a linked pair (frame 6)", () => {
+    const video = clip("talk", "video", { muted: true, link: "lk-1" });
+    const audio = clip("talk-audio", "audio", { link: "lk-1" });
+    expect(labels(audio, [video, audio])).toEqual([
+      "Unlink from video",
+      "Merge audio back into video",
+      "Delete this clip only",
+    ]);
+  });
+
+  it("offers Link instead of Unlink for a selected unlinked pair", () => {
+    const video = clip("talk", "video", { muted: true });
+    const audio = clip("talk-audio", "audio");
+    expect(labels(video, [video, audio], ["talk", "talk-audio"])).toEqual([
+      "Link to audio",
+      "Merge audio back into video",
+    ]);
+    expect(labels(audio, [video, audio], ["talk", "talk-audio"])[0]).toBe("Link to video");
+  });
+
+  it("offers Link to the lone same-file partner on another track when one clip is right-clicked", () => {
+    const video = clip("talk", "video", { track: 0 });
+    const audio = clip("talk-audio", "audio", { track: 1, start: 2 });
+    expect(labels(audio, [video, audio], ["talk-audio"])[0]).toBe("Link to video");
+    expect(labels(video, [video, audio])[0]).toBe("Link to audio");
+  });
+
+  it("dispatches the convenience link with the clip and its partner", () => {
+    const onLinkEdit = vi.fn();
+    const video = clip("talk", "video", { track: 0 });
+    const audio = clip("talk-audio", "audio", { track: 1 });
+    const [link] = resolveLinkMenuItems({
+      element: audio,
+      elements: [video, audio],
+      selectedKeys: new Set(["talk-audio"]),
+      onLinkEdit,
+    });
+    link?.run();
+    expect(onLinkEdit).toHaveBeenCalledWith({ kind: "link", elements: [audio, video] });
+  });
+
+  it("offers no convenience Link when the partner is ambiguous, linked, another file or the same track", () => {
+    const audio = clip("talk-audio", "audio", { track: 1 });
+    const video = clip("talk", "video", { track: 0 });
+    const twin = clip("talk-2", "video", { track: 2 });
+    expect(labels(audio, [video, twin, audio], ["talk-audio"])).not.toContain("Link to video");
+    const linked = clip("talk", "video", { track: 0, link: "lk-9" });
+    expect(labels(audio, [linked, audio], ["talk-audio"])).not.toContain("Link to video");
+    const other = clip("other", "video", { track: 0, src: "other.mp4" });
+    expect(labels(audio, [other, audio], ["talk-audio"])).not.toContain("Link to video");
+    const sameTrack = clip("talk", "video", { track: 1 });
+    expect(labels(audio, [sameTrack, audio], ["talk-audio"])).not.toContain("Link to video");
+  });
+
+  it("offers no convenience Link while other clips are also selected", () => {
+    const audio = clip("talk-audio", "audio", { track: 1 });
+    const video = clip("talk", "video", { track: 0 });
+    const title = clip("title", "div", { track: 2 });
+    expect(
+      labels(audio, [video, audio, title], ["talk-audio", "title"]).some((l) =>
+        l.startsWith("Link"),
+      ),
+    ).toBe(false);
+  });
+
+  it("names the audio partner when unlinking from the video side", () => {
+    const video = clip("talk", "video", { muted: true, link: "lk-1" });
+    const audio = clip("talk-audio", "audio", { link: "lk-1" });
+    expect(labels(video, [video, audio])[0]).toBe("Unlink from audio");
+  });
+
+  it("falls back to plain Unlink for groups of three or same-kind partners", () => {
+    const video = clip("talk", "video", { muted: true, link: "lk-1" });
+    const audio = clip("talk-audio", "audio", { link: "lk-1" });
+    const second = clip("talk-audio2", "audio", { link: "lk-1" });
+    expect(labels(video, [video, audio, second])[0]).toBe("Unlink");
+    const twin = clip("talk2", "video", { muted: true, link: "lk-2" });
+    const twin2 = clip("talk3", "video", { muted: true, link: "lk-2" });
+    expect(labels(twin, [twin, twin2])[0]).toBe("Unlink");
+  });
+
+  it("offers nothing for a silent video or without a link handler", () => {
+    const broll = clip("broll", "video", { muted: true, src: "b.mp4" });
+    expect(labels(broll, [broll])).toEqual([]);
+    expect(
+      resolveLinkMenuItems({
+        element: clip("t", "video", { hasAudio: true }),
+        elements: [],
+        selectedKeys: new Set(),
+      }),
+    ).toEqual([]);
+  });
+
+  it("each item dispatches its link edit", () => {
+    const onLinkEdit = vi.fn();
+    const talk = clip("talk", "video", { hasAudio: true });
+    resolveLinkMenuItems({
+      element: talk,
+      elements: [talk],
+      selectedKeys: new Set(),
+      onLinkEdit,
+    })[0]?.run();
+    expect(onLinkEdit).toHaveBeenCalledWith({ kind: "detach", element: talk });
+  });
+
+  it("offers Link for a trimmed audio and its video (timing does not matter)", () => {
+    const video = clip("talk", "video", { muted: true });
+    const audio = clip("talk-audio", "audio", { start: 1, duration: 2, playbackStart: 1 });
+    expect(labels(video, [video, audio], ["talk", "talk-audio"])[0]).toBe("Link to audio");
+  });
+
+  it("offers Link for a pair of different files", () => {
+    const video = clip("talk", "video", { muted: true });
+    const music = clip("bgm", "audio", { src: "bgm.mp3" });
+    expect(labels(music, [video, music], ["talk", "bgm"])).toEqual(["Link to video"]);
+  });
+
+  it("offers no Link when one selected clip is already linked elsewhere", () => {
+    const video = clip("talk", "video", { muted: true, link: "lk-9" });
+    const audio = clip("bgm", "audio", { src: "bgm.mp3" });
+    const partner = clip("talk-audio", "audio", { link: "lk-9" });
+    expect(labels(audio, [video, audio, partner], ["talk", "bgm"])).toEqual([]);
+  });
+
+  it("disables Merge back with a tooltip while the pair is out of sync", () => {
+    const video = clip("talk", "video", { muted: true, link: "lk-1" });
+    const audio = clip("talk-audio", "audio", { link: "lk-1", start: 0.5 });
+    const merge = resolveLinkMenuItems({
+      element: audio,
+      elements: [video, audio],
+      selectedKeys: new Set(),
+      onLinkEdit: vi.fn(),
+    }).find((item) => item.label === "Merge audio back into video");
+    expect(merge?.disabledReason).toBe("Move into Sync first");
+    const synced = clip("talk-audio", "audio", { link: "lk-1" });
+    const enabled = resolveLinkMenuItems({
+      element: synced,
+      elements: [video, synced],
+      selectedKeys: new Set(),
+      onLinkEdit: vi.fn(),
+    }).find((item) => item.label === "Merge audio back into video");
+    expect(enabled?.disabledReason).toBeUndefined();
+  });
+});

package/src/player/components/clipMenuLinkItems.tsx

@@ -0,0 +1,166 @@
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
+import type { TimelineLinkEdit } from "./timelineCallbacks";
+import { linkedMembersOf } from "./audioClipLink";
+import {
+  canDetachAudio,
+  canLinkPair,
+  findMergePair,
+  isPairInSync,
+  sharesSourceFile,
+} from "../../components/editor/mediaLinkEdits";
+
+interface LinkMenuItem {
+  label: string;
+  shortcut?: string;
+  destructive?: boolean;
+  disabledReason?: string;
+  run: () => void;
+}
+
+const keyOf = (el: TimelineElement) => el.key ?? el.id;
+
+const tagOf = (el: TimelineElement) => el.tag.trim().toLowerCase();
+
+function loneSameFilePartner(
+  element: TimelineElement,
+  elements: readonly TimelineElement[],
+): TimelineElement | null {
+  const opposite = { video: "audio", audio: "video" }[tagOf(element)];
+  if (!opposite || element.link) return null;
+  const candidates = elements.filter(
+    (el) =>
+      !el.link &&
+      tagOf(el) === opposite &&
+      el.track !== element.track &&
+      sharesSourceFile([element, el]),
+  );
+  return candidates.length === 1 ? (candidates[0] ?? null) : null;
+}
+
+function partnerSuffix(element: TimelineElement, others: readonly TimelineElement[]): string {
+  const partners = others.filter((el) => keyOf(el) !== keyOf(element));
+  const [partner] = partners;
+  if (partners.length !== 1 || !partner) return "";
+  const pair = [tagOf(element), tagOf(partner)].sort().join("+");
+  return pair === "audio+video" ? ` ${tagOf(partner)}` : "";
+}
+
+function linkItem(
+  element: TimelineElement,
+  elements: readonly TimelineElement[],
+  selected: TimelineElement[],
+  selectedKeys: ReadonlySet<string>,
+  onLinkEdit: (edit: TimelineLinkEdit) => unknown,
+): LinkMenuItem | null {
+  const selectedPair = canLinkPair(selected) && selectedKeys.has(keyOf(element));
+  const soleSelection = selected.every((el) => keyOf(el) === keyOf(element));
+  const partner = !selectedPair && soleSelection ? loneSameFilePartner(element, elements) : null;
+  const linkPair = selectedPair ? selected : partner ? [element, partner] : null;
+  if (!linkPair) return null;
+  const suffix = partnerSuffix(element, linkPair);
+  return {
+    label: `Link${suffix && ` to${suffix}`}`,
+    ...(selectedPair ? { shortcut: "⌘L" } : {}),
+    run: () => onLinkEdit({ kind: "link", elements: linkPair }),
+  };
+}
+
+/** The link-model items for a clip, in wireframe order (detach · unlink/link · merge · delete-one). */
+export function resolveLinkMenuItems(input: {
+  element: TimelineElement;
+  elements: readonly TimelineElement[];
+  selectedKeys: ReadonlySet<string>;
+  onLinkEdit?: (edit: TimelineLinkEdit) => unknown;
+  onDeleteElementOnly?: (element: TimelineElement) => unknown;
+}): LinkMenuItem[] {
+  const { element, elements, selectedKeys, onLinkEdit, onDeleteElementOnly } = input;
+  const items: LinkMenuItem[] = [];
+  if (!onLinkEdit) return items;
+  const members = linkedMembersOf(element, elements);
+  const linked = members.length > 1;
+  if (canDetachAudio(element)) {
+    items.push({
+      label: "Detach audio",
+      shortcut: "⌥⇧D",
+      run: () => onLinkEdit({ kind: "detach", element }),
+    });
+  }
+  const selected = elements.filter((el) => selectedKeys.has(keyOf(el)));
+  if (linked) {
+    items.push({
+      label: `Unlink${partnerSuffix(element, members) && ` from${partnerSuffix(element, members)}`}`,
+      shortcut: "⌘L",
+      run: () => onLinkEdit({ kind: "unlink", elements: members }),
+    });
+  } else {
+    const link = linkItem(element, elements, selected, selectedKeys, onLinkEdit);
+    if (link) items.push(link);
+  }
+  const pair = findMergePair(element, elements);
+  if (pair) {
+    items.push({
+      label: "Merge audio back into video",
+      disabledReason: isPairInSync(pair.video, pair.audio) ? undefined : "Move into Sync first",
+      run: () => onLinkEdit({ kind: "merge", ...pair }),
+    });
+  }
+  if (linked && onDeleteElementOnly) {
+    items.push({
+      label: "Delete this clip only",
+      shortcut: "⌥⌫",
+      destructive: true,
+      run: () => onDeleteElementOnly(element),
+    });
+  }
+  return items;
+}
+
+export function ClipMenuLinkItems({
+  part,
+  element,
+  onClose,
+}: {
+  part: "link" | "delete";
+  element: TimelineElement;
+  onClose: () => void;
+}) {
+  const { onLinkEdit, onDeleteElementOnly } = useTimelineEditContextOptional();
+  const elements = usePlayerStore((s) => s.elements);
+  const selectedKeys = usePlayerStore((s) => s.selectedElementIds);
+  const items = resolveLinkMenuItems({
+    element,
+    elements,
+    selectedKeys,
+    onLinkEdit,
+    onDeleteElementOnly,
+  }).filter((item) => (item.destructive === true) === (part === "delete"));
+  if (items.length === 0) return null;
+  return (
+    <>
+      {items.map((item) => (
+        <button
+          key={item.label}
+          type="button"
+          role="menuitem"
+          disabled={item.disabledReason !== undefined}
+          title={item.disabledReason}
+          className={`w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-hidden ${
+            item.disabledReason !== undefined
+              ? "text-neutral-600 cursor-not-allowed"
+              : `cursor-pointer hover:bg-neutral-800 focus-visible:bg-neutral-800 ${item.destructive ? "text-red-400" : "text-neutral-300"}`
+          }`}
+          onClick={() => {
+            item.run();
+            onClose();
+          }}
+        >
+          <span>{item.label}</span>
+          {item.shortcut && (
+            <span className="text-neutral-500 text-[10px] ml-3">{item.shortcut}</span>
+          )}
+        </button>
+      ))}
+    </>
+  );
+}

package/src/player/components/clipMenuToolItems.test.tsx

@@ -2,7 +2,7 @@
 
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
 import { useCropPresetBarStore } from "../../components/editor/cropPresetStore";
@@ -15,7 +15,10 @@ Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
 
 let root: Root | null = null;
 
+beforeEach(() => vi.useFakeTimers());
+
 afterEach(() => {
+  vi.useRealTimers();
   act(() => root?.unmount());
   root = null;
   document.body.innerHTML = "";
@@ -31,7 +34,14 @@ const video: TimelineElement = {
   hasAudio: true,
 };
 
-function renderItems(group: ClipMenuToolGroup, element: TimelineElement, currentTime = 2) {
+function renderItems(
+  group: ClipMenuToolGroup,
+  element: TimelineElement,
+  currentTime = 2,
+  withLive = true,
+) {
+  const setLive = vi.fn((_el: TimelineElement, _attr: string, _value: string | null) => undefined);
+  const revertLive = vi.fn((_el: TimelineElement, _attr: string) => undefined);
   const setQuiet = vi.fn(
     async (_el: TimelineElement, _attr: string, _value: string | null, _label: string) => undefined,
   );
@@ -42,7 +52,15 @@ function renderItems(group: ClipMenuToolGroup, element: TimelineElement, current
   root = createRoot(host);
   act(() => {
     root?.render(
-      <TimelineEditProvider value={{ onSetElementAttributeQuiet: setQuiet, onFreezeFrame: freeze }}>
+      <TimelineEditProvider
+        value={{
+          onSetElementAttributeQuiet: setQuiet,
+          onFreezeFrame: freeze,
+          ...(withLive
+            ? { onSetElementAttributeLive: setLive, onRevertElementAttributeLive: revertLive }
+            : {}),
+        }}
+      >
         <ClipMenuToolItems
           group={group}
           element={element}
@@ -52,7 +70,7 @@ function renderItems(group: ClipMenuToolGroup, element: TimelineElement, current
       </TimelineEditProvider>,
     );
   });
-  return { setQuiet, onClose, freeze };
+  return { setQuiet, onClose, freeze, setLive, revertLive };
 }
 
 function openSubmenu(label: string) {
@@ -136,4 +154,112 @@ describe("ClipMenuToolItems", () => {
     renderItems("time", { ...video, tag: "img" });
     expect(document.body.textContent).toBe("");
   });
+
+  describe("Look hover preview", () => {
+    function option(text: string) {
+      const found = Array.from(
+        document.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]'),
+      ).find((button) => button.textContent?.endsWith(text));
+      if (!found) throw new Error(`no option ${text}`);
+      return found;
+    }
+    const enter = (text: string) =>
+      option(text).dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+    const hover = (text: string) => {
+      act(() => {
+        enter(text);
+        vi.advanceTimersByTime(100);
+      });
+    };
+    const leave = () => {
+      const wrapper = document.querySelector('[role="menu"]')?.parentElement;
+      act(() => {
+        wrapper?.dispatchEvent(
+          new MouseEvent("mouseout", { bubbles: true, relatedTarget: document.body }),
+        );
+      });
+    };
+
+    it("hover applies the look live after the debounce, without saving", () => {
+      const { setLive, setQuiet } = renderItems("picture", video);
+      openSubmenu("Look");
+      act(() => {
+        enter("Warm daylight");
+        vi.advanceTimersByTime(40);
+      });
+      expect(setLive).not.toHaveBeenCalled();
+      act(() => vi.advanceTimersByTime(60));
+      expect(setLive).toHaveBeenCalledWith(
+        video,
+        "data-color-grading",
+        '{"preset":"warm-daylight","intensity":1}',
+      );
+      expect(setQuiet).not.toHaveBeenCalled();
+    });
+
+    it("opening the submenu by click does not preview the auto-focused first option", () => {
+      const { setLive } = renderItems("picture", video);
+      openSubmenu("Look");
+      act(() => vi.advanceTimersByTime(200));
+      expect(setLive).not.toHaveBeenCalled();
+    });
+
+    it("keyboard focus previews and None previews no look", () => {
+      const { setLive } = renderItems("picture", video);
+      openSubmenu("Look");
+      act(() => {
+        option("None").dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
+        vi.advanceTimersByTime(100);
+      });
+      expect(setLive).toHaveBeenCalledWith(video, "data-color-grading", null);
+    });
+
+    it("leaving the submenu reverts to the saved look", () => {
+      const { revertLive } = renderItems("picture", video);
+      openSubmenu("Look");
+      hover("Warm daylight");
+      leave();
+      expect(revertLive).toHaveBeenCalledWith(video, "data-color-grading");
+    });
+
+    it("leaving before the debounce fires never previews or reverts", () => {
+      const { setLive, revertLive } = renderItems("picture", video);
+      openSubmenu("Look");
+      act(() => enter("Warm daylight"));
+      leave();
+      act(() => vi.advanceTimersByTime(200));
+      expect(setLive).not.toHaveBeenCalled();
+      expect(revertLive).not.toHaveBeenCalled();
+    });
+
+    it("clicking commits once and does not revert afterwards", () => {
+      const { setQuiet, revertLive } = renderItems("picture", video);
+      openSubmenu("Look");
+      hover("Warm daylight");
+      act(() => option("Warm daylight").click());
+      act(() => root?.unmount());
+      root = null;
+      expect(setQuiet).toHaveBeenCalledTimes(1);
+      expect(revertLive).not.toHaveBeenCalled();
+    });
+
+    it("closing the menu while previewing reverts", () => {
+      const { revertLive } = renderItems("picture", video);
+      openSubmenu("Look");
+      hover("Warm daylight");
+      act(() => root?.unmount());
+      root = null;
+      expect(revertLive).toHaveBeenCalledWith(video, "data-color-grading");
+    });
+
+    it("does nothing when the host has no live callbacks", () => {
+      const { setQuiet } = renderItems("picture", video, 2, false);
+      openSubmenu("Look");
+      expect(() => {
+        hover("Warm daylight");
+        leave();
+      }).not.toThrow();
+      expect(setQuiet).not.toHaveBeenCalled();
+    });
+  });
 });