@hyperframes/studio 0.8.105 → 0.8.106

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

@@ -0,0 +1,275 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { makeSelection } from "../../hooks/domSelectionTestHarness";
+import { useInlineTextEdit } from "../../hooks/useInlineTextEdit";
+import {
+  makePreview,
+  mountPlayerWithPreview,
+  paintShadow,
+  resetPlayerStore,
+  type TimelinePlayerApi,
+} from "../../player/hooks/timelinePlayerTestHarness";
+import type { DomEditSelection } from "./domEditing";
+import "./domEditOverlayTestMocks";
+import { DomEditOverlay } from "./DomEditOverlay";
+import { PreviewReadOnlyProvider } from "./previewReadOnlyContext";
+import { STUDIO_MANUAL_EDIT_GESTURE_ATTR } from "./manualEditsTypes";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const layout = vi.hoisted(() => ({
+  group: [] as unknown[],
+  rect: { left: 100, top: 100, width: 200, height: 100, editScaleX: 1, editScaleY: 1 },
+}));
+vi.mock("./useDomEditOverlayRects", () => ({
+  useDomEditOverlayRects: () => {
+    const { rect, group } = layout;
+    const groupOverlayItemsRef = { current: group };
+    const noop = () => undefined;
+    return {
+      overlayRect: rect,
+      overlayRectRef: { current: rect },
+      groupOverlayItems: group,
+      groupOverlayItemsRef,
+      hoverRect: null,
+      childRects: [],
+      setOverlayRect: noop,
+      setGroupOverlayItems: noop,
+    };
+  },
+}));
+vi.mock("../../utils/gsapSoftReload", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../utils/gsapSoftReload")>()),
+  ensureMotionPathPluginLoaded: vi.fn(),
+}));
+
+const BOX = '[data-dom-edit-selection-box="true"]';
+const RECT = layout.rect;
+const TWO_LAYERS = '<h1 id="title">Title</h1><p id="sub">Sub</p>';
+
+/** What the server serves: the file as the last commit left it. */
+let file = { title: "", sub: "" };
+const served = (query: string) =>
+  makePreview(
+    `<h1 id="title" style="${file.title}">Title</h1><p id="sub" style="${file.sub}">Sub</p>`,
+    query,
+  );
+
+let overlayRoot: Root;
+let player: ReturnType<typeof mountPlayerWithPreview>;
+
+const marked = (doc: Document) => doc.querySelectorAll(`[${STUDIO_MANUAL_EDIT_GESTURE_ATTR}]`);
+const byId = (iframe: HTMLIFrameElement | null, id: string) =>
+  iframe!.contentDocument!.getElementById(id) as HTMLElement;
+const api = (): TimelinePlayerApi => player.getApi();
+
+function pointer(target: Element, type: string, x: number, y: number) {
+  const init = { bubbles: true, cancelable: true, button: 0, pointerId: 1, clientX: x, clientY: y };
+  act(() => void target.dispatchEvent(new PointerEvent(type, init)));
+}
+
+/** The real player with a two-layer preview, and the real overlay editing it. */
+function mountEditor(group: boolean) {
+  file = { title: "", sub: "" };
+  const live = makePreview(TWO_LAYERS);
+  player = mountPlayerWithPreview(live);
+  const selections = ["title", "sub"].map((id) => makeSelection(id, byId(live, id)));
+  layout.group = group
+    ? selections.map((s) => ({ key: s.id, selection: s, element: s.element, rect: RECT }))
+    : [];
+  const write = (sel: DomEditSelection, next: { x: number; y: number }) => {
+    file = { ...file, [sel.id!]: `translate: ${next.x}px ${next.y}px` };
+    return Promise.resolve();
+  };
+  const onPathOffsetCommit = vi.fn(write);
+  const onGroupPathOffsetCommit = vi.fn(
+    async (updates: { selection: DomEditSelection; next: { x: number; y: number } }[]) => {
+      for (const { selection, next } of updates) await write(selection, next);
+    },
+  );
+  const host = document.body.appendChild(document.createElement("div"));
+  overlayRoot = createRoot(host);
+  const render = (readOnly: boolean) =>
+    act(() =>
+      overlayRoot.render(
+        <PreviewReadOnlyProvider readOnly={readOnly}>
+          <DomEditOverlay
+            iframeRef={api().iframeRef}
+            activeCompositionPath={null}
+            selection={group ? null : selections[0]!}
+            groupSelections={group ? selections : []}
+            hoverSelection={null}
+            onCanvasMouseDown={() => undefined}
+            onCanvasPointerMove={() => Promise.resolve(null)}
+            onCanvasPointerLeave={() => undefined}
+            onSelectionChange={() => undefined}
+            onBlockedMove={() => undefined}
+            onPathOffsetCommit={onPathOffsetCommit}
+            onGroupPathOffsetCommit={onGroupPathOffsetCommit}
+            onBoxSizeCommit={() => undefined}
+            onRotationCommit={() => undefined}
+          />
+        </PreviewReadOnlyProvider>,
+      ),
+    );
+  render(false);
+  const overlay = host.querySelector('[aria-label="Composition canvas"]') as HTMLElement;
+  return { live, overlay, box: overlay.querySelector(BOX)!, onPathOffsetCommit, render };
+}
+
+/** A reload whose shadow paints while the gesture is still live. */
+async function reloadMidGesture() {
+  act(() => api().refreshPlayer());
+  const shadow = served("?_t=1");
+  const gen = await paintShadow(api, shadow);
+  return { shadow, gen };
+}
+
+async function settle() {
+  await act(async () => {
+    for (let tick = 0; tick < 10; tick++) await Promise.resolve();
+  });
+}
+
+beforeEach(() => {
+  HTMLElement.prototype.setPointerCapture = () => undefined;
+  HTMLElement.prototype.releasePointerCapture = () => undefined;
+});
+
+afterEach(() => {
+  act(() => overlayRoot?.unmount());
+  act(() => player?.root.unmount());
+  layout.group = [];
+  document.body.innerHTML = "";
+  resetPlayerStore();
+});
+
+describe("a reload during a drag", () => {
+  it.each([
+    ["one layer", false],
+    ["a group", true],
+  ])(
+    "that paints before the drop of %s waits, then shows the drop from a fresh load",
+    async (_, group) => {
+      const { live, overlay, box } = mountEditor(group);
+      pointer(box, "pointerdown", 150, 150);
+      pointer(overlay, "pointermove", 170, 160);
+      pointer(overlay, "pointermove", 190, 170);
+      const held = await reloadMidGesture();
+      expect(api().iframeRef.current, "promoted under the pointer").toBe(live);
+
+      pointer(overlay, "pointerup", 190, 170);
+      await settle();
+      expect(byId(live, "title").style.getPropertyValue("translate")).toBe("40px 20px");
+      expect(file.title).toBe("translate: 40px 20px");
+      if (group) expect(file.sub).toBe("translate: 40px 20px");
+      expect(marked(live.contentDocument!)).toHaveLength(0);
+      expect(api().iframeRef.current, "the shadow loaded before the drop").toBe(live);
+
+      const fresh = served("?_t=2");
+      expect(await paintShadow(api, fresh)).toBeGreaterThan(held.gen);
+      expect(api().iframeRef.current).toBe(fresh);
+      expect(byId(fresh, "title").style.getPropertyValue("translate")).toBe("40px 20px");
+      if (group) expect(byId(fresh, "sub").style.getPropertyValue("translate")).toBe("40px 20px");
+    },
+  );
+
+  it("that paints after the drop shows the drop from a fresh load, not the file before it", async () => {
+    const { live, overlay, box } = mountEditor(false);
+    pointer(box, "pointerdown", 150, 150);
+    pointer(overlay, "pointermove", 190, 170);
+    act(() => api().refreshPlayer());
+    const beforeDrop = served("?_t=1");
+    pointer(overlay, "pointerup", 190, 170);
+    await settle();
+    expect(file.title).toBe("translate: 40px 20px");
+
+    const requested = await paintShadow(api, beforeDrop);
+    expect(api().iframeRef.current, "the file before the drop").toBe(live);
+    const fresh = served("?_t=2");
+    expect(await paintShadow(api, fresh)).toBeGreaterThan(requested);
+    expect(byId(fresh, "title").style.getPropertyValue("translate")).toBe("40px 20px");
+  });
+});
+
+type Editor = ReturnType<typeof mountEditor>;
+
+describe("every way a drag ends without a drop clears its mark and promotes the held reload", () => {
+  it.each([
+    ["pointercancel", (e: Editor) => pointer(e.overlay, "pointercancel", 0, 0)],
+    ["lostpointercapture", (e: Editor) => pointer(e.box, "lostpointercapture", 0, 0)],
+    ["window blur", () => act(() => void window.dispatchEvent(new Event("blur")))],
+    ["a switch to read-only", (e: Editor) => e.render(true)],
+    ["overlay unmount", () => act(() => overlayRoot.unmount())],
+  ])("%s", async (_, end) => {
+    const editor = mountEditor(false);
+    pointer(editor.box, "pointerdown", 150, 150);
+    pointer(editor.overlay, "pointermove", 190, 170);
+    expect(marked(editor.live.contentDocument!)).toHaveLength(1);
+    const held = await reloadMidGesture();
+    expect(api().iframeRef.current).toBe(editor.live);
+
+    end(editor);
+    await settle();
+    expect(marked(editor.live.contentDocument!)).toHaveLength(0);
+    expect(byId(editor.live, "title").style.getPropertyValue("translate")).not.toBe("40px 20px");
+    expect(editor.onPathOffsetCommit).not.toHaveBeenCalled();
+    expect(api().iframeRef.current, "nothing was saved, so the held copy is current").toBe(
+      held.shadow,
+    );
+  });
+
+  it("a press that throws before the drag is armed leaves no mark behind", async () => {
+    const editor = mountEditor(false);
+    HTMLElement.prototype.setPointerCapture = () => {
+      throw new Error("capture refused");
+    };
+    const swallow = (event: ErrorEvent) => event.preventDefault();
+    window.addEventListener("error", swallow);
+    try {
+      pointer(editor.box, "pointerdown", 150, 150);
+    } catch {
+      // React may rethrow the handler's error; either way the mark must be gone.
+    } finally {
+      window.removeEventListener("error", swallow);
+    }
+    expect(marked(editor.live.contentDocument!)).toHaveLength(0);
+    const { shadow } = await reloadMidGesture();
+    expect(api().iframeRef.current).toBe(shadow);
+  });
+});
+
+describe("an inline text edit", () => {
+  it("holds a reload while open, and the reload after it shows the saved text", async () => {
+    const live = makePreview(TWO_LAYERS);
+    player = mountPlayerWithPreview(live);
+    let land: () => void = () => {};
+    const onCommit = vi.fn(() => new Promise<void>((resolve) => (land = resolve)));
+    let controls: ReturnType<typeof useInlineTextEdit> | null = null;
+    function Editor() {
+      controls = useInlineTextEdit({ onCommit });
+      return null;
+    }
+    overlayRoot = createRoot(document.body.appendChild(document.createElement("div")));
+    act(() => overlayRoot.render(<Editor />));
+    act(() => void controls!.start(byId(live, "title")));
+    const held = await reloadMidGesture();
+    expect(api().iframeRef.current).toBe(live);
+
+    act(() => controls!.commit());
+    await settle();
+    expect(onCommit).toHaveBeenCalledTimes(1);
+    expect(marked(live.contentDocument!), "closed, though the save is still out").toHaveLength(0);
+    expect(api().iframeRef.current, "the held copy predates the text").toBe(live);
+    expect(api().previewSlots.find((slot) => slot.role === "shadow")?.gen).toBe(held.gen);
+
+    await act(async () => land());
+    await settle();
+    const afterSave = served("?_t=2");
+    expect(await paintShadow(api, afterSave)).toBeGreaterThan(held.gen);
+    expect(api().iframeRef.current).toBe(afterSave);
+  });
+});

package/src/components/editor/manualEditsDom.ts

@@ -46,9 +46,42 @@ export function beginStudioManualEditGesture(element: HTMLElement): string {
   return token;
 }
 
+const GESTURE_ENDED = "hf-manual-edit-gesture-ended";
+
 export function endStudioManualEditGesture(element: HTMLElement, token?: string): void {
   if (token && element.getAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR) !== token) return;
+  if (!element.hasAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR)) return;
   element.removeAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR);
+  const doc = element.ownerDocument;
+  doc.dispatchEvent(new (doc.defaultView?.Event ?? Event)(GESTURE_ENDED));
+}
+
+export function isStudioManualEditGestureLiveIn(doc: Document): boolean {
+  return doc.querySelector(`[${STUDIO_MANUAL_EDIT_GESTURE_ATTR}]`) !== null;
+}
+
+/** Runs `run` once the last gesture in `doc` ends; the returned function stops waiting. */
+export function afterStudioManualEditGestures(doc: Document, run: () => void): () => void {
+  const onEnded = () => {
+    if (isStudioManualEditGestureLiveIn(doc)) return;
+    stop();
+    run();
+  };
+  const stop = () => doc.removeEventListener(GESTURE_ENDED, onEnded);
+  doc.addEventListener(GESTURE_ENDED, onEnded);
+  return stop;
+}
+
+const gestureSaves = new WeakMap<Document, number>();
+
+export function studioManualEditSavesIn(doc: Document): number {
+  return gestureSaves.get(doc) ?? 0;
+}
+
+/** A gesture's save in `element`'s document: a reload requested before it shows the file before it. */
+export function noteStudioManualEditSave(element: HTMLElement): void {
+  const doc = element.ownerDocument;
+  gestureSaves.set(doc, studioManualEditSavesIn(doc) + 1);
 }
 
 function isStudioManualEditGestureActive(element: HTMLElement): boolean {

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

@@ -1,10 +1,20 @@
 // @vitest-environment happy-dom
 import { act, useRef } from "react";
 import type { Root } from "react-dom/client";
-import { afterEach, beforeEach, expect, it } from "vitest";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { installReactActEnvironment, mountReactHarness } from "../../hooks/domSelectionTestHarness";
 import { useMarqueeGestures } from "./marqueeCommit";
 
+// Layout stands in for a real preview: every element is visible and sits at the band's start.
+vi.mock("./domEditingElement", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./domEditingElement")>()),
+  isElementComputedVisible: () => true,
+}));
+vi.mock("./domEditOverlayGeometry", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./domEditOverlayGeometry")>()),
+  toVisibleOverlayRect: () => ({ left: 10, top: 10, width: 40, height: 40 }),
+}));
+
 installReactActEnvironment();
 HTMLElement.prototype.setPointerCapture ??= () => {};
 HTMLElement.prototype.releasePointerCapture ??= () => {};
@@ -82,3 +92,61 @@ it("an escape with no band in flight still reaches the host", () => {
   expect(event.defaultPrevented).toBe(false);
   expect(hostEscapes).toHaveLength(1);
 });
+
+it("a reload promoted mid-band selects from the preview on screen, not the retired one", async () => {
+  const preview = () => {
+    const iframe = document.createElement("iframe");
+    const doc = document.implementation.createHTMLDocument("preview");
+    doc.body.innerHTML = '<div data-composition-id="main"><h1 id="title">Title</h1></div>';
+    Object.defineProperty(iframe, "contentDocument", { value: doc });
+    return iframe;
+  };
+  const [retired, live] = [preview(), preview()];
+  const picked: HTMLElement[][] = [];
+  const iframeRef = { current: retired as HTMLIFrameElement | null };
+  function Band() {
+    const overlayRef = useRef<HTMLDivElement>(null);
+    const marquee = useMarqueeGestures({
+      iframeRef,
+      overlayRef,
+      activeCompositionPathRef: useRef<string | null>("index.html"),
+      onMarqueeSelectRef: useRef(() => undefined),
+      resolveHits: async (elements: HTMLElement[]) => {
+        picked.push(elements);
+        return [];
+      },
+    });
+    return (
+      <div
+        ref={overlayRef}
+        data-band-overlay
+        onPointerDown={marquee.begin}
+        onPointerMove={marquee.onPointerMove}
+        onPointerUp={marquee.onPointerUp}
+      />
+    );
+  }
+  const band = mountReactHarness(<Band />);
+  const fire = (type: string, x: number, y: number) =>
+    act(() => {
+      document.querySelector("[data-band-overlay]")!.dispatchEvent(
+        new PointerEvent(type, {
+          bubbles: true,
+          button: 0,
+          pointerId: 1,
+          clientX: x,
+          clientY: y,
+        }),
+      );
+    });
+  try {
+    fire("pointerdown", 0, 0);
+    fire("pointermove", 120, 90);
+    iframeRef.current = live;
+    await act(async () => fire("pointerup", 120, 90));
+    expect(picked.at(-1)?.length).toBeGreaterThan(0);
+    for (const element of picked.at(-1)!) expect(element.ownerDocument).toBe(live.contentDocument);
+  } finally {
+    act(() => band.unmount());
+  }
+});

package/src/components/editor/marqueeCommit.ts

@@ -159,7 +159,12 @@ export function useMarqueeGestures<T>(deps: MarqueeGesturesDeps<T>): MarqueeGest
       const overlay = deps.overlayRef.current;
       if (!iframe || !overlay || !deps.onMarqueeSelectRef.current) return;
       const acp = deps.activeCompositionPathRef.current ?? "index.html";
-      const candidates = candidatesRef.current ?? collectMarqueeCandidates(iframe, overlay, acp);
+      const cached = candidatesRef.current;
+      const measuredOnScreen = cached?.every(
+        (hit) => hit.element.ownerDocument === iframe.contentDocument,
+      );
+      const candidates =
+        cached && measuredOnScreen ? cached : collectMarqueeCandidates(iframe, overlay, acp);
       const elements = hitsWithin(rect, candidates).map((hit) => hit.element);
       const resolveHits = deps.resolveHits;
       const picks = resolveHits

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

@@ -3,8 +3,10 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   IDLE_POLL_MS,
+  IDLE_SLICE_MS,
   requestOverlayFrames,
   resetOverlayFrameLoopForTests,
+  runWhenInputIdle,
   subscribeOverlayFrame,
 } from "./overlayFrameLoop";
 import { usePlayerStore } from "../../player/store/playerStore";
@@ -71,6 +73,31 @@ describe("overlay frame loop", () => {
     expect(runs).toBeGreaterThan(0);
   });
 
+  it("runs idle work in capped slices, only while no input arrives", () => {
+    const budgets: number[] = [];
+    requestOverlayFrames();
+    runWhenInputIdle((timeLeft) => {
+      budgets.push(timeLeft());
+      return budgets.length === 3;
+    });
+    vi.advanceTimersByTime(300);
+    expect(budgets).toEqual([]);
+    vi.advanceTimersByTime(200);
+    expect(budgets).toHaveLength(3);
+    expect(Math.max(...budgets)).toBeLessThanOrEqual(IDLE_SLICE_MS);
+
+    // Input during a slice holds the next one until the loop has been idle again.
+    const slices: number[] = [];
+    runWhenInputIdle(() => {
+      slices.push(performance.now());
+      if (slices.length === 1) requestOverlayFrames();
+      return slices.length === 2;
+    });
+    vi.advanceTimersByTime(1000);
+    expect(slices).toHaveLength(2);
+    expect(slices[1] - slices[0]).toBeGreaterThanOrEqual(400);
+  });
+
   it("runs every subscriber on one frame, not one frame each", () => {
     const calls: string[] = [];
     subscribeOverlayFrame(() => calls.push("a"));

package/src/components/editor/overlayFrameLoop.ts

@@ -143,6 +143,27 @@ function schedule(): void {
   }, IDLE_POLL_MS);
 }
 
+/** Longest idle slice, so input that arrives during one waits at most this long for its frame. */
+export const IDLE_SLICE_MS = 3;
+
+/**
+ * Runs `step` in idle slices once no input has woken the loop for AWAKE_MS, so it never shares a gesture's
+ * frames. `step` works while `timeLeft()` is positive and returns true when it has finished.
+ */
+export function runWhenInputIdle(step: (timeLeft: () => number) => boolean): void {
+  const wait = awakeUntil - performance.now();
+  if (wait > 0) {
+    setTimeout(() => runWhenInputIdle(step), wait);
+    return;
+  }
+  const idle = window.requestIdleCallback ?? ((callback: () => void) => setTimeout(callback, 0));
+  idle(() => {
+    const end = performance.now() + IDLE_SLICE_MS;
+    if (performance.now() < awakeUntil || !step(() => end - performance.now()))
+      runWhenInputIdle(step);
+  });
+}
+
 /** Something moved, or might have. Run frames at full rate for a moment. */
 export function requestOverlayFrames(): void {
   awakeUntil = performance.now() + AWAKE_MS;

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();
+    }
+  });
+});