@hyperframes/studio 0.8.103 → 0.8.105

package/src/components/sidebar/AssetContextMenu.tsx

@@ -147,7 +147,7 @@ export function ContextMenu({
               <button
                 role="menuitem"
                 onClick={() => setMode("confirm-delete")}
-                className={`${itemCls} text-red-400`}
+                className={`${itemCls} text-danger-ink`}
               >
                 Delete
               </button>
@@ -181,9 +181,9 @@ export function ContextMenu({
                 }
               }}
               aria-label={`Rename ${filename(asset)}`}
-              className="w-full bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-1 text-[11px] text-white focus:border-studio-accent/60 focus:outline-hidden"
+              className="w-full bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-1 text-[11px] text-text-0 focus:border-studio-accent/60 focus:outline-hidden"
             />
-            {renameError && <span className="text-[10px] text-red-400">{renameError}</span>}
+            {renameError && <span className="text-[10px] text-danger-ink">{renameError}</span>}
             <div className="flex items-center justify-end gap-1">
               <button
                 onClick={() => setMode("menu")}
@@ -193,7 +193,7 @@ export function ContextMenu({
               </button>
               <button
                 onClick={commitRename}
-                className="px-2 py-0.5 text-[10px] rounded-sm bg-studio-accent/80 hover:bg-studio-accent text-white transition-colors"
+                className="px-2 py-0.5 text-[10px] rounded-sm bg-accent hover:bg-accent-hover text-on-accent transition-colors"
               >
                 Rename
               </button>
@@ -215,12 +215,12 @@ function DeleteConfirm({
   onCancel: () => void;
 }) {
   return (
-    <div className="px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex items-center justify-between gap-2">
-      <span className="text-[10px] text-red-400 truncate">Delete {name}?</span>
+    <div className="px-2 py-1.5 bg-danger/15 border-l-2 border-red-500 flex items-center justify-between gap-2">
+      <span className="text-[10px] text-danger-ink truncate">Delete {name}?</span>
       <div className="flex items-center gap-1 shrink-0">
         <button
           onClick={onConfirm}
-          className="px-2 py-0.5 text-[10px] rounded-sm bg-red-600 text-white hover:bg-red-500 active:bg-red-700 transition-colors"
+          className="px-2 py-0.5 text-[10px] rounded-sm bg-danger text-on-danger hover:brightness-95 active:brightness-90 transition-colors"
         >
           Delete
         </button>

package/src/components/sidebar/AssetsTab.tsx

@@ -177,7 +177,7 @@ function EmptyState({
         fill="none"
         stroke="currentColor"
         strokeWidth="1.5"
-        className="text-neutral-700"
+        className="text-text-off"
       >
         <path
           d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"
@@ -349,7 +349,7 @@ export const AssetsTab = memo(function AssetsTab({
               onClick={() => setViewMode(m)}
               className={`flex-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${
                 viewMode === m
-                  ? "bg-panel-accent/15 text-panel-accent"
+                  ? "bg-panel-accent/15 text-accent-ink"
                   : "text-panel-text-3 hover:text-panel-text-1"
               }`}
             >
@@ -396,7 +396,7 @@ export const AssetsTab = memo(function AssetsTab({
               aria-pressed={activeFilter === "all"}
               className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${
                 activeFilter === "all"
-                  ? "bg-panel-accent/15 text-panel-accent"
+                  ? "bg-panel-accent/15 text-accent-ink"
                   : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"
               }`}
             >
@@ -410,7 +410,7 @@ export const AssetsTab = memo(function AssetsTab({
                   aria-pressed={activeFilter === cat}
                   className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${
                     activeFilter === cat
-                      ? "bg-panel-accent/15 text-panel-accent"
+                      ? "bg-panel-accent/15 text-accent-ink"
                       : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"
                   }`}
                 >
@@ -425,7 +425,7 @@ export const AssetsTab = memo(function AssetsTab({
                   onClick={() => setUsageFilter(usageFilter === "used" ? "all" : "used")}
                   className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${
                     usageFilter === "used"
-                      ? "bg-panel-accent/15 text-panel-accent"
+                      ? "bg-panel-accent/15 text-accent-ink"
                       : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"
                   }`}
                 >
@@ -435,7 +435,7 @@ export const AssetsTab = memo(function AssetsTab({
                   onClick={() => setUsageFilter(usageFilter === "unused" ? "all" : "unused")}
                   className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${
                     usageFilter === "unused"
-                      ? "bg-panel-accent/15 text-panel-accent"
+                      ? "bg-panel-accent/15 text-accent-ink"
                       : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"
                   }`}
                 >

package/src/components/sidebar/AudioRow.tsx

@@ -240,7 +240,7 @@ export function AudioRow({
           aria-pressed={playing}
           className={`w-7 h-7 rounded-md shrink-0 flex items-center justify-center transition-colors active:scale-[0.95] ${
             playing
-              ? "bg-panel-accent/15 text-panel-accent"
+              ? "bg-panel-accent/15 text-accent-ink"
               : "text-panel-text-5 group-hover:text-panel-text-3"
           }`}
           onClick={(e) => {
@@ -273,7 +273,7 @@ export function AudioRow({
               </span>
             )}
             {used && (
-              <span className="text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded-sm shrink-0">
+              <span className="text-[9px] font-medium text-accent-ink bg-panel-accent/10 px-1.5 py-px rounded-sm shrink-0">
                 in use
               </span>
             )}
@@ -281,7 +281,9 @@ export function AudioRow({
               <span
                 role="status"
                 className={`shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${
-                  copyFailed ? "text-red-400 bg-red-500/10" : "text-panel-accent bg-panel-accent/10"
+                  copyFailed
+                    ? "text-danger-ink bg-red-500/10"
+                    : "text-accent-ink bg-panel-accent/10"
                 }`}
               >
                 {copyFailed ? "Copy failed" : "Copied"}

package/src/components/sidebar/BlocksTab.tsx

@@ -40,7 +40,7 @@ export const BlocksTab = memo(function BlocksTab({ onAddBlock, onPreviewBlock }:
 
   if (error) {
     return (
-      <div className="flex flex-1 items-center justify-center text-red-400 text-xs px-4 text-center">
+      <div className="flex flex-1 items-center justify-center text-danger-ink text-xs px-4 text-center">
         {error}
       </div>
     );
@@ -77,9 +77,9 @@ export const BlocksTab = memo(function BlocksTab({ onAddBlock, onPreviewBlock }:
       {/* Block grid */}
       <div className="flex-1 overflow-y-auto min-h-0 px-2 pb-2">
         {category === "vfx" && (
-          <div className="mb-2 px-2 py-1.5 rounded-md bg-purple-500/10 border border-purple-500/20 text-[9px] text-purple-300 leading-relaxed">
+          <div className="mb-2 px-2 py-1.5 rounded-md bg-purple-500/10 border border-purple-500/20 text-[9px] text-text-2 leading-relaxed">
             VFX blocks use WebGL via HTML-in-Canvas. Enable{" "}
-            <span className="font-mono text-purple-200">chrome://flags/#html-in-canvas</span> for
+            <span className="font-mono text-text-0">chrome://flags/#html-in-canvas</span> for
             preview.
           </div>
         )}
@@ -423,8 +423,8 @@ function BlockCard({
               title="Add to composition at current time"
               className={`flex items-center gap-1 px-3 py-1.5 rounded-md text-[10px] font-semibold transition-colors active:scale-[0.97] ${
                 addState === "failed"
-                  ? "bg-red-500 text-white"
-                  : "bg-white text-black hover:bg-neutral-200"
+                  ? "bg-danger text-on-danger"
+                  : "bg-white text-black hover:bg-white/85"
               }`}
             >
               <svg
@@ -453,7 +453,7 @@ function BlockCard({
             className={`flex items-center gap-1.5 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-md transition-colors active:scale-[0.97] ${
               onAdd
                 ? "bg-white/15 text-white/90 hover:bg-white/25 text-[9px]"
-                : "bg-white text-black hover:bg-neutral-200 text-[10px] font-semibold"
+                : "bg-text-0 text-bg-0 hover:bg-text-2 text-[10px] font-semibold"
             }`}
           >
             <svg

package/src/components/sidebar/CompositionsTab.drag.test.tsx

@@ -1,84 +1,18 @@
 // @vitest-environment happy-dom
 
 import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { usePlayerStore } from "../../player/store/playerStore";
+import { describe, expect, it, vi } from "vitest";
 import { TIMELINE_COMPOSITION_MIME } from "../../utils/timelineCompositionDrop";
-import { CompositionsTab } from "./CompositionsTab";
-
-Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
-(
-  window as unknown as { happyDOM: { settings: { disableIframePageLoading: boolean } } }
-).happyDOM.settings.disableIframePageLoading = true;
-
-let root: Root | null = null;
-
-beforeEach(() => {
-  usePlayerStore.setState({ previewBooted: true });
-});
-
-afterEach(() => {
-  if (root) act(() => root?.unmount());
-  root = null;
-  document.body.innerHTML = "";
-  usePlayerStore.setState({ thumbnailRevisions: {} });
-});
+import { mountCompositionsTab } from "./compositionsTabTestUtils";
 
 function mount(onSelect = vi.fn(), onAddToTimeline = vi.fn()) {
-  const host = document.createElement("div");
-  document.body.append(host);
-  root = createRoot(host);
-  act(() => {
-    root?.render(
-      <CompositionsTab
-        projectId="demo"
-        compositions={["compositions/headline.html"]}
-        activeComposition={null}
-        onSelect={onSelect}
-        onAddToTimeline={onAddToTimeline}
-      />,
-    );
-  });
+  const host = mountCompositionsTab({ onSelect, onAddToTimeline });
   const card = host.querySelector<HTMLElement>('[draggable="true"]');
   if (!card) throw new Error("composition card did not render");
   return { host, card, onSelect, onAddToTimeline };
 }
 
 describe("composition card drag", () => {
-  it("uses a cached image instead of eagerly mounting a live preview iframe", () => {
-    const { host } = mount();
-    const thumbnail = host.querySelector<HTMLImageElement>('img[src*="/thumbnail/"]');
-    expect(thumbnail).not.toBeNull();
-    expect(new URL(thumbnail?.src ?? "").searchParams.get("t")).toBe("3.00");
-    expect(host.querySelector("iframe")).toBeNull();
-  });
-
-  it("shows a fallback when the cached thumbnail fails", () => {
-    const { host } = mount();
-    const thumbnail = host.querySelector<HTMLImageElement>('img[src*="/thumbnail/"]');
-    if (!thumbnail) throw new Error("composition thumbnail did not render");
-
-    act(() => thumbnail.dispatchEvent(new Event("error")));
-
-    expect(host.textContent).toContain("Preview unavailable");
-    expect(host.querySelector('img[src*="/thumbnail/"]')).toBeNull();
-  });
-
-  it("retries a failed thumbnail at the next persisted content revision", () => {
-    const { host } = mount();
-    const thumbnail = host.querySelector<HTMLImageElement>('img[src*="/thumbnail/"]');
-    if (!thumbnail) throw new Error("composition thumbnail did not render");
-    act(() => thumbnail.dispatchEvent(new Event("error")));
-    expect(host.textContent).toContain("Preview unavailable");
-
-    act(() => usePlayerStore.getState().bumpThumbnailRevisions(null));
-
-    const retry = host.querySelector<HTMLImageElement>('img[src*="/thumbnail/"]');
-    expect(retry).not.toBeNull();
-    expect(new URL(retry?.src ?? "").searchParams.get("revision")).toBe("1");
-  });
-
   it("mounts one live preview only after sustained hover and removes it on leave", () => {
     vi.useFakeTimers();
     const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});

package/src/components/sidebar/CompositionsTab.rootBadge.test.tsx

@@ -1,57 +1,11 @@
 // @vitest-environment happy-dom
 
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { usePlayerStore } from "../../player/store/playerStore";
+import { describe, expect, it } from "vitest";
 import { resolveMasterCompositionPath } from "../../utils/studioUrlState";
-import { CompositionsTab } from "./CompositionsTab";
+import { mountCompositionsTab } from "./compositionsTabTestUtils";
 
-Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
-(
-  window as unknown as { happyDOM: { settings: { disableIframePageLoading: boolean } } }
-).happyDOM.settings.disableIframePageLoading = true;
-
-let root: Root | null = null;
-
-afterEach(() => {
-  if (root) act(() => root?.unmount());
-  root = null;
-  document.body.innerHTML = "";
-  usePlayerStore.setState({ thumbnailRevisions: {} });
-});
-
-function mount(compositions: string[], masterCompositionPath: string | null) {
-  const host = document.createElement("div");
-  document.body.append(host);
-  root = createRoot(host);
-  act(() => {
-    root?.render(
-      <CompositionsTab
-        projectId="demo"
-        compositions={compositions}
-        activeComposition={null}
-        masterCompositionPath={masterCompositionPath}
-        onSelect={vi.fn()}
-      />,
-    );
-  });
-  return host;
-}
-
-describe("CompositionsTab card thumbnails", () => {
-  it("waits for the live preview to boot and keeps them through edit reloads", () => {
-    usePlayerStore.getState().reset();
-    const host = mount(["index.html"], "index.html");
-    expect(host.querySelector("img")).toBeNull();
-
-    act(() => usePlayerStore.getState().markPreviewBooted());
-    expect(host.querySelector("img")?.getAttribute("src")).toContain("/thumbnail/index.html");
-
-    act(() => usePlayerStore.getState().setTimelineReady(false));
-    expect(host.querySelector("img")).not.toBeNull();
-  });
-});
+const mount = (compositions: string[], masterCompositionPath: string | null) =>
+  mountCompositionsTab({ compositions, masterCompositionPath });
 
 describe("CompositionsTab root badge", () => {
   it("marks the composition matching masterCompositionPath as root", () => {

package/src/components/sidebar/CompositionsTab.thumbnails.test.tsx

@@ -0,0 +1,256 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { thumbnailScheduler } from "../../player/lib/thumbnailScheduler";
+import { TIMELINE_VIEWPORT_BUDGETS } from "../../player/lib/timelineViewportBudgets";
+import { CompositionThumbnail } from "../../player/components/CompositionThumbnail";
+import { usePlayerStore } from "../../player/store/playerStore";
+import { renderPosterForNextOpen } from "../nle/PreviewPoster";
+import { mountCompositionsTab } from "./compositionsTabTestUtils";
+
+class DecodingImage {
+  onload: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  naturalWidth = 16;
+  naturalHeight = 9;
+  set src(value: string) {
+    if (value) queueMicrotask(() => this.onload?.());
+  }
+}
+
+let autoIntersect = true;
+const observed: Array<{
+  element: Element;
+  callback: IntersectionObserverCallback;
+  root?: Element | Document | null;
+}> = [];
+class ViewportObserver {
+  constructor(
+    private readonly callback: IntersectionObserverCallback,
+    private readonly options?: IntersectionObserverInit,
+  ) {}
+  observe(element: Element) {
+    observed.push({ element, callback: this.callback, root: this.options?.root });
+    if (autoIntersect) this.enter();
+  }
+  enter() {
+    const entry = { isIntersecting: true } as IntersectionObserverEntry;
+    this.callback([entry], this as unknown as IntersectionObserver);
+  }
+  disconnect() {}
+}
+
+interface Render {
+  url: URL;
+  signal: AbortSignal;
+  answer: (status?: number) => void;
+}
+
+const real = {
+  IntersectionObserver: globalThis.IntersectionObserver,
+  fetch: globalThis.fetch,
+  Image: globalThis.Image,
+  create: URL.createObjectURL,
+  revoke: URL.revokeObjectURL,
+};
+let renders: Render[] = [];
+let inFlight = 0;
+let peak = 0;
+let frames = 0;
+
+beforeEach(() => {
+  renders = [];
+  [inFlight, peak, frames] = [0, 0, 0];
+  globalThis.fetch = vi.fn(
+    (input: RequestInfo | URL, init?: RequestInit) =>
+      new Promise<Response>((resolve, reject) => {
+        const signal = init?.signal ?? new AbortController().signal;
+        peak = Math.max(peak, ++inFlight);
+        const end = () => (inFlight -= 1);
+        signal.addEventListener("abort", () => {
+          end();
+          reject(new DOMException("Aborted", "AbortError"));
+        });
+        const answer = (status = 200) => {
+          end();
+          resolve(new Response(new Blob(["png"]), { status }));
+        };
+        renders.push({ url: new URL(String(input), window.location.origin), signal, answer });
+      }),
+  ) as typeof fetch;
+  globalThis.Image = DecodingImage as unknown as typeof Image;
+  globalThis.IntersectionObserver = ViewportObserver as unknown as typeof IntersectionObserver;
+  [autoIntersect, observed.length] = [true, 0];
+  URL.createObjectURL = vi.fn(() => `blob:frame-${++frames}`);
+  URL.revokeObjectURL = vi.fn();
+  usePlayerStore.setState({ previewBooted: true });
+});
+
+afterEach(() => {
+  Object.assign(globalThis, {
+    fetch: real.fetch,
+    Image: real.Image,
+    IntersectionObserver: real.IntersectionObserver,
+  });
+  Object.assign(URL, { createObjectURL: real.create, revokeObjectURL: real.revoke });
+});
+
+const mount = (compositions?: string[]) => mountCompositionsTab(compositions && { compositions });
+const settle = () => act(() => new Promise((resolve) => setTimeout(resolve, 5)));
+const shown = (host: HTMLElement) => host.querySelector("img")?.getAttribute("src") ?? null;
+
+async function nextRevisionShows(host: HTMLElement, revision: string, frame: string) {
+  act(() => usePlayerStore.getState().bumpThumbnailRevisions(null));
+  expect(renders.at(-1)!.url.searchParams.get("revision")).toBe(revision);
+  renders.at(-1)!.answer();
+  await settle();
+  expect(shown(host)).toBe(frame);
+}
+
+describe("composition card thumbnails", () => {
+  it("render through the thumbnail scheduler once the preview boots, and never point an image at the route", async () => {
+    usePlayerStore.getState().reset();
+    const host = mount();
+    expect(renders).toHaveLength(0);
+
+    act(() => usePlayerStore.getState().markPreviewBooted());
+    expect(renders.map((r) => [r.url.pathname, r.url.searchParams.get("t")])).toEqual([
+      ["/api/projects/demo/thumbnail/compositions/headline.html", "3.00"],
+    ]);
+    renders[0]!.answer();
+    await settle();
+    expect(shown(host)).toBe("blob:frame-1");
+    expect(host.querySelector("iframe")).toBeNull();
+
+    act(() => usePlayerStore.getState().setTimelineReady(false));
+    expect(shown(host)).toBe("blob:frame-1");
+  });
+
+  it("wait until a card is near the viewport, so an offscreen card never renders ahead of a visible one", () => {
+    autoIntersect = false;
+    mount(["compositions/above.html", "compositions/seen.html", "compositions/below.html"]);
+    expect(renders).toHaveLength(0);
+
+    const seen = observed.find((o) =>
+      o.element.closest("[draggable]")?.textContent?.includes("seen"),
+    )!;
+    act(() =>
+      seen.callback(
+        [{ isIntersecting: true } as IntersectionObserverEntry],
+        {} as IntersectionObserver,
+      ),
+    );
+    expect(renders.map((r) => r.url.pathname)).toEqual([
+      "/api/projects/demo/thumbnail/compositions/seen.html",
+    ]);
+    expect(seen.root).toBe(document.querySelector("[data-composition-list]"));
+  });
+
+  it("keep showing the last frame, leased, until the next revision's frame is ready", async () => {
+    const host = mount();
+    renders[0]!.answer();
+    await settle();
+    act(() => usePlayerStore.getState().bumpThumbnailRevisions(null));
+    expect(shown(host)).toBe("blob:frame-1");
+    thumbnailScheduler.invalidateProject("demo");
+    expect(URL.revokeObjectURL).not.toHaveBeenCalledWith("blob:frame-1");
+
+    renders.at(-1)!.answer();
+    await settle();
+    expect(shown(host)).toBe("blob:frame-2");
+  });
+
+  it("keep the last frame through a new revision even when the scheduler has evicted it", async () => {
+    const host = mount();
+    renders[0]!.answer();
+    await settle();
+    const fillers = Array.from({ length: 100 }, (_, i) =>
+      thumbnailScheduler.acquire(
+        {
+          key: `filler-${i}`,
+          projectId: "demo",
+          sessionEpoch: 0,
+          kind: "image",
+          priority: "visible",
+          load: async () => ({
+            value: { kind: "image", url: `blob:filler-${i}`, aspect: 1 },
+            weight: 1,
+          }),
+        },
+        () => {},
+      ),
+    );
+    while (
+      thumbnailScheduler.getDiagnostics().queued + thumbnailScheduler.getDiagnostics().active >
+      0
+    ) {
+      await settle();
+    }
+    for (const filler of fillers) filler.release();
+
+    act(() => usePlayerStore.getState().bumpThumbnailRevisions(null));
+    expect(renders.map((r) => r.url.searchParams.get("revision"))).toEqual(["0", "1"]);
+    expect(shown(host)).toBe("blob:frame-1");
+    expect(URL.revokeObjectURL).not.toHaveBeenCalledWith("blob:frame-1");
+  });
+
+  it("share one render with the timeline's thumbnail of the same composition", () => {
+    mount();
+    const timeline = createRoot(document.body.appendChild(document.createElement("div")));
+    try {
+      act(() =>
+        timeline.render(
+          <CompositionThumbnail
+            previewUrl="/api/projects/demo/preview/comp/compositions/headline.html"
+            label=""
+            labelColor=""
+            projectId="demo"
+            sessionEpoch={usePlayerStore.getState().timelineSessionEpoch}
+            seekTime={3}
+            duration={0}
+          />,
+        ),
+      );
+      expect(renders).toHaveLength(1);
+    } finally {
+      act(() => timeline.unmount());
+    }
+  });
+
+  it("keep the cards and the poster render to the scheduler's cap, so Studio's own requests get a connection", async () => {
+    const cap = TIMELINE_VIEWPORT_BUDGETS.concurrentCompositionFetches;
+    mount(Array.from({ length: 6 }, (_, i) => `compositions/scene-${i}.html`));
+    renderPosterForNextOpen("demo");
+    expect(inFlight).toBe(cap);
+
+    while (renders.some((r) => !r.signal.aborted)) {
+      renders.shift()!.answer();
+      await settle();
+    }
+    expect(renders).toHaveLength(0);
+    expect(globalThis.fetch).toHaveBeenCalledTimes(7);
+    expect(peak).toBe(cap);
+  });
+
+  it("abort a stale revision's render, and free its frame when the scheduler evicts it", async () => {
+    const host = mount();
+    const first = renders[0]!;
+    await nextRevisionShows(host, "1", "blob:frame-1");
+    expect(first.signal.aborted).toBe(true);
+    await nextRevisionShows(host, "2", "blob:frame-2");
+
+    thumbnailScheduler.invalidateProject("demo");
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:frame-1");
+    expect(URL.revokeObjectURL).not.toHaveBeenCalledWith("blob:frame-2");
+  });
+
+  it("show a fallback when the render fails, and retry it at the next content revision", async () => {
+    const host = mount();
+    renders[0]!.answer(500);
+    await settle();
+    expect(host.textContent).toContain("Preview unavailable");
+    await nextRevisionShows(host, "1", "blob:frame-1");
+  });
+});