@hyperframes/studio 0.8.105 → 0.8.107

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

@@ -6,6 +6,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { FlatMediaSection } from "./propertyPanelFlatMediaSection";
 import { MediaSection } from "./propertyPanelMediaSection";
 import type { DomEditSelection } from "./domEditing";
+import type { PatchOperation } from "../../utils/sourcePatcher";
 import { formatTimingValue } from "./propertyPanelHelpers";
 import { readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
 
@@ -62,6 +63,7 @@ function renderSection(overrides: Partial<DomEditSelection> = {}) {
         onSetStyle={vi.fn()}
         onSetAttribute={vi.fn()}
         onSetHtmlAttribute={vi.fn()}
+        onSetAttributeBatch={vi.fn()}
       />,
     );
   });
@@ -102,6 +104,7 @@ describe("FlatMediaSection — cutout", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={onSetHtmlAttribute}
+          onSetAttributeBatch={vi.fn()}
           onRemoveBackground={onRemoveBackground}
         />,
       );
@@ -149,6 +152,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -174,6 +178,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -208,6 +213,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
           volumeAutomated
           onCommitVolumeAt={onCommitVolumeAt}
         />,
@@ -242,6 +248,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -273,6 +280,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -308,6 +316,7 @@ describe("FlatMediaSection — loop/muted/has-audio", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={onSetHtmlAttribute}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -323,92 +332,6 @@ describe("FlatMediaSection — loop/muted/has-audio", () => {
     expect(hasAudioToggle?.getAttribute("aria-checked")).toBe("true");
     act(() => root.unmount());
   });
-
-  it("toggles muted via onSetHtmlAttribute", () => {
-    const onSetHtmlAttribute = vi.fn();
-    const onSetAttribute = vi.fn();
-    const element = makeVideoElement();
-    const host = document.createElement("div");
-    document.body.append(host);
-    const root = createRoot(host);
-    act(() => {
-      root.render(
-        <FlatMediaSection
-          projectDir={null}
-          element={element}
-          styles={{}}
-          onSetStyle={vi.fn()}
-          onSetAttribute={onSetAttribute}
-          onSetHtmlAttribute={onSetHtmlAttribute}
-        />,
-      );
-    });
-    const mutedToggle = host.querySelector<HTMLButtonElement>(
-      '[data-flat-toggle="true"][aria-label="Muted"]',
-    );
-    expect(mutedToggle?.getAttribute("aria-checked")).toBe("false");
-    act(() => mutedToggle?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-    expect(onSetHtmlAttribute).toHaveBeenCalledWith("muted", "true");
-    act(() => root.unmount());
-  });
-
-  it("enables has-audio-track and clears muted on click", () => {
-    const onSetHtmlAttribute = vi.fn();
-    const onSetAttribute = vi.fn();
-    const element = makeVideoElement();
-    const host = document.createElement("div");
-    document.body.append(host);
-    const root = createRoot(host);
-    act(() => {
-      root.render(
-        <FlatMediaSection
-          projectDir={null}
-          element={element}
-          styles={{}}
-          onSetStyle={vi.fn()}
-          onSetAttribute={onSetAttribute}
-          onSetHtmlAttribute={onSetHtmlAttribute}
-        />,
-      );
-    });
-    const hasAudioToggle = host.querySelector<HTMLButtonElement>(
-      '[data-flat-toggle="true"][aria-label="Has audio track"]',
-    );
-    expect(hasAudioToggle?.getAttribute("aria-checked")).toBe("false");
-    act(() => hasAudioToggle?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-    expect(onSetAttribute).toHaveBeenCalledWith("has-audio", "true");
-    expect(onSetHtmlAttribute).toHaveBeenCalledWith("muted", null);
-    act(() => root.unmount());
-  });
-
-  it("disables has-audio-track and sets muted on click", () => {
-    const onSetHtmlAttribute = vi.fn();
-    const onSetAttribute = vi.fn();
-    const element = makeVideoElement({ dataAttributes: { "has-audio": "true" } });
-    const host = document.createElement("div");
-    document.body.append(host);
-    const root = createRoot(host);
-    act(() => {
-      root.render(
-        <FlatMediaSection
-          projectDir={null}
-          element={element}
-          styles={{}}
-          onSetStyle={vi.fn()}
-          onSetAttribute={onSetAttribute}
-          onSetHtmlAttribute={onSetHtmlAttribute}
-        />,
-      );
-    });
-    const hasAudioToggle = host.querySelector<HTMLButtonElement>(
-      '[data-flat-toggle="true"][aria-label="Has audio track"]',
-    );
-    expect(hasAudioToggle?.getAttribute("aria-checked")).toBe("true");
-    act(() => hasAudioToggle?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-    expect(onSetAttribute).toHaveBeenCalledWith("has-audio", "");
-    expect(onSetHtmlAttribute).toHaveBeenCalledWith("muted", "true");
-    act(() => root.unmount());
-  });
 });
 
 describe("FlatMediaSection — fit/position", () => {
@@ -428,6 +351,7 @@ describe("FlatMediaSection — fit/position", () => {
             onSetStyle={onSetStyle}
             onSetAttribute={vi.fn()}
             onSetHtmlAttribute={vi.fn()}
+            onSetAttributeBatch={vi.fn()}
           />,
         );
       });
@@ -461,6 +385,7 @@ describe("FlatMediaSection — fit/position", () => {
           onSetStyle={onSetStyle}
           onSetAttribute={vi.fn()}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -504,6 +429,7 @@ function renderWithRate(element: DomEditSelection, onSetAttribute = vi.fn()) {
         onSetStyle={vi.fn()}
         onSetAttribute={onSetAttribute}
         onSetHtmlAttribute={vi.fn()}
+        onSetAttributeBatch={vi.fn()}
         rate={{
           automated: false,
           automatedValue: undefined,
@@ -543,7 +469,9 @@ describe("FlatMediaSection — audio clips", () => {
     );
     act(() => audio.root.unmount());
 
-    const silentVideo = renderWithRate(makeVideoElement({ dataAttributes: { duration: "10" } }));
+    const mutedSelection = makeVideoElement({ dataAttributes: { duration: "10" } });
+    mutedSelection.element.setAttribute("muted", "");
+    const silentVideo = renderWithRate(mutedSelection);
     expect(labelsOf(silentVideo.host)).not.toContain("Fade in");
     act(() => silentVideo.root.unmount());
 
@@ -659,6 +587,7 @@ describe("FlatMediaSection — audio clips", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -708,3 +637,273 @@ function typeInto(input: HTMLInputElement, value: string) {
   setter?.call(input, value);
   input.dispatchEvent(new Event("input", { bubbles: true }));
 }
+
+type PanelKind = "flat" | "design";
+
+type BatchOptions = { label: string; prepareContent?: (html: string) => string };
+
+function makeHandlers() {
+  return {
+    onSetAttribute: vi.fn(),
+    onSetHtmlAttribute: vi.fn(),
+    onSetAttributeBatch: vi.fn<
+      (
+        selection: DomEditSelection,
+        ops: PatchOperation[],
+        options: BatchOptions,
+      ) => Promise<boolean>
+    >(async () => true),
+  };
+}
+
+function mountPanel(
+  kind: PanelKind,
+  element: DomEditSelection,
+  handlers: ReturnType<typeof makeHandlers> & {
+    onRemoveBackground?: () => Promise<{ outputPath: string }>;
+  },
+) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const Panel = kind === "flat" ? FlatMediaSection : MediaSection;
+  act(() => {
+    root.render(
+      <Panel
+        projectId="p1"
+        projectDir={null}
+        element={element}
+        styles={{}}
+        onSetStyle={vi.fn()}
+        {...handlers}
+      />,
+    );
+  });
+  return { host, root };
+}
+
+async function flush() {
+  for (let i = 0; i < 8; i++) await Promise.resolve();
+}
+
+async function clickToggle(kind: PanelKind, host: HTMLElement, label: string, option: string) {
+  if (kind === "flat") {
+    const toggle = host.querySelector<HTMLButtonElement>(
+      `[data-flat-toggle="true"][aria-label="${label}"]`,
+    );
+    if (!toggle) throw new Error(`expected ${label} toggle`);
+    await act(async () => {
+      toggle.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await flush();
+    });
+    return;
+  }
+  const row = Array.from(host.querySelectorAll("span")).find(
+    (n) => n.textContent === label,
+  )?.parentElement;
+  const button = Array.from(row?.querySelectorAll("button") ?? []).find(
+    (b) => b.textContent === option,
+  );
+  if (!button) throw new Error(`expected ${label} segmented button`);
+  await act(async () => {
+    button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await flush();
+  });
+}
+
+function stubHasAudioProbe(hasAudio: boolean | "fail") {
+  const fetchMock = vi.fn(async (_input: Parameters<typeof fetch>[0]) =>
+    hasAudio === "fail"
+      ? new Response("nope", { status: 500 })
+      : new Response(JSON.stringify({ metadata: { hasAudio } })),
+  );
+  vi.stubGlobal("fetch", fetchMock);
+  return fetchMock;
+}
+
+const htmlOp = (property: string, value: string | null) => ({
+  type: "html-attribute",
+  property,
+  value,
+});
+const dataOp = (property: string, value: string | null) => ({
+  type: "attribute",
+  property,
+  value,
+});
+
+describe.each<PanelKind>(["flat", "design"])("%s panel — Muted is one atomic edit", (kind) => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it("muting an audible video sets muted and removes has-audio in ONE write", async () => {
+    const handlers = makeHandlers();
+    const element = makeVideoElement({ dataAttributes: { "has-audio": "true" } });
+    const { host, root } = mountPanel(kind, element, handlers);
+    await clickToggle(kind, host, "Muted", "On");
+    expect(handlers.onSetAttributeBatch).toHaveBeenCalledTimes(1);
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([
+      htmlOp("muted", "true"),
+      dataOp("has-audio", null),
+    ]);
+    expect(handlers.onSetAttribute).not.toHaveBeenCalled();
+    expect(handlers.onSetHtmlAttribute).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  it("unmuting a video the probe hears stamps has-audio=true in the same write", async () => {
+    const probe = stubHasAudioProbe(true);
+    const handlers = makeHandlers();
+    const element = makeVideoElement();
+    element.element.setAttribute("muted", "");
+    const { host, root } = mountPanel(kind, element, handlers);
+    await clickToggle(kind, host, "Muted", "Off");
+    expect(String(probe.mock.calls[0]?.[0])).toContain("assets%2Fintro-loop.mp4");
+    expect(handlers.onSetAttributeBatch).toHaveBeenCalledTimes(1);
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([
+      htmlOp("muted", null),
+      dataOp("has-audio", "true"),
+    ]);
+    act(() => root.unmount());
+  });
+
+  it("unmuting a silent-probe video writes has-audio=false", async () => {
+    stubHasAudioProbe(false);
+    const handlers = makeHandlers();
+    const element = makeVideoElement();
+    element.element.setAttribute("muted", "");
+    const { host, root } = mountPanel(kind, element, handlers);
+    await clickToggle(kind, host, "Muted", "Off");
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([
+      htmlOp("muted", null),
+      dataOp("has-audio", "false"),
+    ]);
+    act(() => root.unmount());
+  });
+
+  it("unmuting when the probe fails leaves has-audio absent", async () => {
+    stubHasAudioProbe("fail");
+    const handlers = makeHandlers();
+    const element = makeVideoElement();
+    element.element.setAttribute("muted", "");
+    const { host, root } = mountPanel(kind, element, handlers);
+    await clickToggle(kind, host, "Muted", "Off");
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([
+      htmlOp("muted", null),
+      dataOp("has-audio", null),
+    ]);
+    act(() => root.unmount());
+  });
+
+  it("audio Muted toggles only the muted attribute", async () => {
+    const handlers = makeHandlers();
+    const { host, root } = mountPanel(kind, makeAudioElement({}), handlers);
+    await clickToggle(kind, host, "Muted", "On");
+    expect(handlers.onSetAttributeBatch).toHaveBeenCalledTimes(1);
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([htmlOp("muted", "true")]);
+    act(() => root.unmount());
+  });
+
+  it("Has audio track No removes has-audio and mutes in ONE write", async () => {
+    const handlers = makeHandlers();
+    const element = makeVideoElement({ dataAttributes: { "has-audio": "true" } });
+    const { host, root } = mountPanel(kind, element, handlers);
+    await clickToggle(kind, host, "Has audio track", "No");
+    expect(handlers.onSetAttributeBatch).toHaveBeenCalledTimes(1);
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([
+      dataOp("has-audio", null),
+      htmlOp("muted", "true"),
+    ]);
+    act(() => root.unmount());
+  });
+
+  it("Has audio track Yes stamps has-audio and clears muted in ONE write", async () => {
+    const handlers = makeHandlers();
+    const element = makeVideoElement();
+    element.element.setAttribute("muted", "");
+    const { host, root } = mountPanel(kind, element, handlers);
+    await clickToggle(kind, host, "Has audio track", "Yes");
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([
+      dataOp("has-audio", "true"),
+      htmlOp("muted", null),
+    ]);
+    act(() => root.unmount());
+  });
+});
+
+describe.each<PanelKind>(["flat", "design"])("%s panel — cutout keeps the sound", (kind) => {
+  async function runCutout(element: DomEditSelection) {
+    const handlers = makeHandlers();
+    const onRemoveBackground = vi.fn().mockResolvedValue({ outputPath: "assets/cut.webm" });
+    const confirm = vi.spyOn(window, "confirm");
+    const { host, root } = mountPanel(kind, element, { ...handlers, onRemoveBackground });
+    const button =
+      kind === "flat"
+        ? host.querySelector<HTMLButtonElement>('[data-flat-media-remove-bg="true"]')
+        : Array.from(host.querySelectorAll("button")).find((b) =>
+            /remove bg/i.test(b.textContent ?? ""),
+          );
+    if (!button) throw new Error("expected remove background button");
+    await act(async () => {
+      button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await flush();
+    });
+    const text = host.textContent ?? "";
+    act(() => root.unmount());
+    return { ...handlers, confirm, text };
+  }
+
+  afterEach(() => vi.restoreAllMocks());
+
+  it("audible video: one write mutes onto the cutout and inserts a linked sibling audio", async () => {
+    const element = makeVideoElement({
+      dataAttributes: { "has-audio": "true", volume: "0.5" },
+    });
+    element.element.setAttribute("id", "s1-bg");
+    element.element.setAttribute("data-has-audio", "true");
+    element.element.setAttribute("data-volume", "0.5");
+    const { onSetAttributeBatch, onSetAttribute, onSetHtmlAttribute, confirm, text } =
+      await runCutout(element);
+
+    expect(confirm).not.toHaveBeenCalled();
+    expect(onSetAttribute).not.toHaveBeenCalled();
+    expect(onSetHtmlAttribute).not.toHaveBeenCalled();
+    expect(onSetAttributeBatch).toHaveBeenCalledTimes(1);
+    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>';
+    const prepared = options?.prepareContent?.(source) ?? "";
+    const audio = new DOMParser()
+      .parseFromString(prepared, "text/html")
+      .getElementById("s1-bg-audio");
+    expect(audio?.getAttribute("src")).toBe("assets/intro-loop.mp4");
+    expect(audio?.getAttribute("data-start")).toBe("2");
+    expect(audio?.getAttribute("data-duration")).toBe("3");
+    expect(audio?.getAttribute("data-link")).toBe("link");
+    expect(audio?.getAttribute("data-volume")).toBe("0.5");
+    expect(text).toContain("Background removed. Sound kept on a linked audio track.");
+  });
+
+  it("silent video: one write swaps the src and inserts no audio", async () => {
+    const silent = makeVideoElement();
+    silent.element.setAttribute("muted", "");
+    const { onSetAttributeBatch, confirm, text } = await runCutout(silent);
+    expect(confirm).not.toHaveBeenCalled();
+    expect(onSetAttributeBatch).toHaveBeenCalledTimes(1);
+    const [, ops, options] = onSetAttributeBatch.mock.calls[0] ?? [];
+    expect(ops).toEqual([
+      htmlOp("src", "assets/cut.webm"),
+      htmlOp("muted", "true"),
+      dataOp("has-audio", null),
+    ]);
+    expect(options?.prepareContent).toBeUndefined();
+    expect(text).toContain("Applied cutout");
+  });
+});

package/src/components/editor/propertyPanelFlatMediaSection.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { isVideoAudible } from "../../player/lib/timelineElementHelpers";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import { Check, ClipboardList } from "../../icons/SystemIcons";
 import type { DomEditSelection } from "./domEditing";
@@ -34,15 +35,19 @@ import {
   readFadeSeconds,
 } from "@hyperframes/core/audio-fade";
 import { parseGainInput, parseRateInput, parseSecondsInput } from "./audioInspectorInput";
+import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import { commitCutout, commitHasAudioToggle, commitMutedToggle } from "./mediaAudioEdits";
 
 // fallow-ignore-next-line complexity
 export function FlatMediaSection({
+  projectId = null,
   projectDir,
   element,
   styles,
   onSetStyle,
   onSetAttribute,
   onSetHtmlAttribute,
+  onSetAttributeBatch,
   onRemoveBackground,
   volumeAutomated,
   onAutomateVolume,
@@ -51,12 +56,14 @@ export function FlatMediaSection({
   automatedVolumeValue,
   rate,
 }: {
+  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;
   /** A volume lane in the timeline drives the level; the slider writes a keyframe instead. */
   volumeAutomated?: boolean;
   onAutomateVolume?: () => void;
@@ -104,7 +111,11 @@ export function FlatMediaSection({
   const fadeMax = clipDuration > 0 ? clipDuration : 10;
   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 objectFit = styles["object-fit"] || "contain";
   const objectPosition = styles["object-position"] || "center";
 
@@ -128,13 +139,7 @@ export function FlatMediaSection({
     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;
@@ -147,8 +152,8 @@ export function FlatMediaSection({
         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",
@@ -362,21 +367,13 @@ export function FlatMediaSection({
           <FlatToggle
             label="Muted"
             checked={hasMuted}
-            onChange={(next) => void onSetHtmlAttribute("muted", next ? "true" : null)}
+            onChange={(next) => void commitMutedToggle(mediaEdit, next)}
           />
           {isVideo && (
             <FlatToggle
               label="Has audio track"
               checked={hasAudio}
-              onChange={(next) => {
-                if (next) {
-                  void onSetAttribute("has-audio", "true");
-                  void onSetHtmlAttribute("muted", null);
-                } else {
-                  void onSetAttribute("has-audio", "");
-                  void onSetHtmlAttribute("muted", "true");
-                }
-              }}
+              onChange={(next) => void commitHasAudioToggle(mediaEdit, next)}
             />
           )}
         </>

package/src/components/editor/propertyPanelFlatProps.ts

@@ -19,6 +19,7 @@ export type PropertyPanelFlatProps = Pick<
   | "onSetAttributeQuiet"
   | "onApplyColorGradingScope"
   | "onSetHtmlAttribute"
+  | "onSetAttributeBatch"
   | "onRemoveBackground"
   | "onSetText"
   | "onSetTextFieldStyle"

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

@@ -8,7 +8,11 @@ import { sortFontOptions } from "./propertyPanelHelpers";
 
 vi.mock("./propertyPanelHelpers", async (importOriginal) => {
   const actual = await importOriginal<typeof import("./propertyPanelHelpers")>();
-  return { ...actual, sortFontOptions: vi.fn(actual.sortFontOptions) };
+  return {
+    ...actual,
+    sortFontOptions: vi.fn(actual.sortFontOptions),
+    uniqueFontFamilies: vi.fn(actual.uniqueFontFamilies),
+  };
 });
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -56,13 +60,14 @@ describe("FontFamilyField font list", () => {
       root.render(<FontFamilyField flat value={value} importedFonts={[]} onCommit={vi.fn()} />);
     try {
       await act(async () => render("Arial"));
-      // The font lists arrive and the value changes while the dropdown is closed, as during a drag.
+      // The value changes while the dropdown is closed, as during a drag.
       await act(async () => render("Georgia"));
       expect(sortFontOptions).not.toHaveBeenCalled();
 
       const trigger = host.querySelector<HTMLButtonElement>('[data-flat-font-trigger="true"]');
       await act(async () => trigger?.click());
-      expect(sortFontOptions).toHaveBeenCalledTimes(1);
+      await act(async () => new Promise((resolve) => setTimeout(resolve, 10)));
+      expect(sortFontOptions).toHaveBeenCalled();
       expect(host.textContent).toContain("Roboto Slab");
       expect(document.head.querySelector('link[href*="fonts.googleapis.com"]')).toBeNull();
     } finally {
@@ -71,3 +76,75 @@ describe("FontFamilyField font list", () => {
     }
   });
 });
+
+describe("FontFamilyField session font lists", () => {
+  const fresh = async () => {
+    vi.resetModules();
+    const { FontFamilyField } = await import("./propertyPanelFont");
+    const { uniqueFontFamilies } = await import("./propertyPanelHelpers");
+    const loop = await import("./overlayFrameLoop");
+    vi.mocked(uniqueFontFamilies).mockClear();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const render = (value: string) =>
+      root.render(<FontFamilyField flat value={value} importedFonts={[]} onCommit={vi.fn()} />);
+    const toggle = () =>
+      host.querySelector<HTMLButtonElement>('[data-flat-font-trigger="true"]')?.click();
+    const done = () => {
+      act(() => root.unmount());
+      host.remove();
+      loop.resetOverlayFrameLoopForTests();
+    };
+    return { uniqueFontFamilies, loop, host, render, toggle, done };
+  };
+
+  it("does no list work in a drag's frames when the lists land mid-drag", async () => {
+    vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout", "performance", "Date"] });
+    const raf = window.requestAnimationFrame;
+    window.requestAnimationFrame = (() => 0) as typeof window.requestAnimationFrame;
+    const lists = vi.mocked(fetch).getMockImplementation()!;
+    vi.mocked(fetch).mockImplementation(async (url) => {
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      return lists(url);
+    });
+    const t = await fresh();
+    const stopLoop = t.loop.subscribeOverlayFrame(() => undefined);
+    try {
+      await act(async () => t.render("Georgia"));
+      for (let elapsed = 0; elapsed < 600; elapsed += 16) {
+        window.dispatchEvent(new Event("pointermove"));
+        await act(async () => vi.advanceTimersByTimeAsync(16));
+      }
+      expect(fetch).toHaveBeenCalledTimes(2);
+      expect(t.uniqueFontFamilies).not.toHaveBeenCalled();
+
+      await act(async () => vi.advanceTimersByTimeAsync(500));
+      expect(t.uniqueFontFamilies).toHaveBeenCalledTimes(1);
+      await act(async () => t.toggle());
+      expect(t.host.textContent).toContain("Roboto Slab");
+    } finally {
+      stopLoop();
+      t.done();
+      window.requestAnimationFrame = raf;
+      vi.useRealTimers();
+    }
+  });
+
+  it("retries a failed list fetch when the picker opens", async () => {
+    vi.mocked(fetch).mockRejectedValueOnce(new Error("offline"));
+    const t = await fresh();
+    try {
+      await act(async () => t.render("Georgia"));
+      await act(async () => new Promise((resolve) => setTimeout(resolve, 10)));
+      expect(t.uniqueFontFamilies).not.toHaveBeenCalled();
+
+      await act(async () => t.toggle());
+      await act(async () => new Promise((resolve) => setTimeout(resolve, 10)));
+      expect(fetch).toHaveBeenCalledTimes(4);
+      expect(t.host.textContent).toContain("Roboto Slab");
+    } finally {
+      t.done();
+    }
+  });
+});