@hyperframes/studio 0.8.51 → 0.8.53-desktop.0

package/src/components/dock/dockLayout.ts

@@ -1,18 +1,64 @@
 import type { Direction, DockviewApi } from "dockview-react";
 import { DOCK_PANEL_COMPONENT } from "./dockLayoutSchema";
-import { PANEL_DEFINITIONS, type PanelId } from "./panelRegistry";
+import { PANEL_DEFINITIONS, isPanelId, type PanelId } from "./panelRegistry";
 
 const MIN_PREVIEW_W = 360;
 const MIN_PREVIEW_H = 200;
 const MIN_TIMELINE_H = 100;
 const MIN_SIDE_W = 200;
+const MIN_SIDE_W_FLOOR = 120;
 const DEFAULT_TIMELINE_H = 360;
 
-function defaultSideWidths(viewportWidth: number) {
-  return {
-    left: Math.max(MIN_SIDE_W, Math.min(384, Math.round(viewportWidth * 0.257))),
-    right: Math.max(280, Math.min(424, Math.round(viewportWidth * 0.284))),
-  };
+/** Preferred side widths; when they overflow the preview's floor the right yields first, then the left. */
+export function defaultSideWidths(viewportWidth: number) {
+  const floor = sideMinimumWidth(viewportWidth);
+  const left = Math.max(floor, Math.min(384, Math.round(viewportWidth * 0.257)));
+  const right = Math.max(Math.min(280, floor), Math.min(424, Math.round(viewportWidth * 0.284)));
+  const excess = left + right - Math.max(0, viewportWidth - MIN_PREVIEW_W);
+  if (excess <= 0) return { left, right };
+  const shrunkRight = Math.max(floor, right - excess);
+  return { left: Math.max(floor, left - (excess - (right - shrunkRight))), right: shrunkRight };
+}
+
+/**
+ * Side groups keep MIN_SIDE_W while both fit beside the preview's floor, then shrink down to
+ * MIN_SIDE_W_FLOOR; below that the dock overflows and clips rather than squeezing the preview.
+ */
+export function sideMinimumWidth(dockWidth: number): number {
+  const fair = Math.floor((dockWidth - MIN_PREVIEW_W) / 2);
+  return Math.min(MIN_SIDE_W, Math.max(MIN_SIDE_W_FLOOR, fair));
+}
+
+function holdsPreview(group: DockviewApi["groups"][number]) {
+  return group.panels.some((panel) => panel.id === "preview");
+}
+
+/** The zone of a group whose every tab is a side panel, else null. */
+function sideZone(group: DockviewApi["groups"][number]): "left" | "right" | null {
+  const zones = group.panels.map((panel) =>
+    isPanelId(panel.id) ? PANEL_DEFINITIONS[panel.id].zone : "center",
+  );
+  const first = zones[0];
+  const allSide = zones.every((zone) => zone !== "center");
+  return allSide && first && first !== "center" ? first : null;
+}
+
+/** Idempotent; rewrites every group's minimum, since dockview keeps a constraint once set. */
+export function applySideMinimums(api: DockviewApi, dockWidth = window.innerWidth) {
+  const minimumWidth = sideMinimumWidth(dockWidth);
+  const cap = defaultSideWidths(dockWidth);
+  for (const group of api.groups) {
+    if (holdsPreview(group)) {
+      group.api.setConstraints({ minimumWidth: MIN_PREVIEW_W });
+      continue;
+    }
+    group.api.setConstraints({ minimumWidth });
+    const zone = sideZone(group);
+    const limit = zone === "right" ? cap.right : cap.left;
+    if (zone && minimumWidth < MIN_SIDE_W && group.width > limit) {
+      group.api.setSize({ width: limit });
+    }
+  }
 }
 
 function minimumSize(id: PanelId) {
@@ -52,6 +98,7 @@ export function buildEditLayout(api: DockviewApi, viewportWidth: number) {
   }
   api.getPanel("compositions")?.api.setActive();
   api.getPanel("design")?.api.setActive();
+  applySideMinimums(api, viewportWidth);
   api.getPanel("compositions")?.group.api.setSize({ width: widths.left });
   api.getPanel("design")?.group.api.setSize({ width: widths.right });
   api.getPanel("timeline")?.group.api.setSize({ height: DEFAULT_TIMELINE_H });

package/src/components/dock/dockLayoutStore.test.ts

@@ -0,0 +1,28 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { useDockLayoutStore } from "./dockLayoutStore";
+import type { PanelId } from "./panelRegistry";
+
+const snapshot = (groupActivePanels: PanelId[], activePanel: PanelId | null = null) => ({
+  openPanels: new Set<PanelId>(["design", "renders", "compositions"]),
+  visiblePanels: new Set<PanelId>(groupActivePanels),
+  activePanel,
+  groupActivePanels,
+});
+
+describe("dock store sync", () => {
+  beforeEach(() => useDockLayoutStore.setState({ lastActive: {} }));
+
+  it("records what every side group shows, not only the globally active panel", () => {
+    useDockLayoutStore.getState().sync(snapshot(["compositions", "renders"], "compositions"));
+    expect(useDockLayoutStore.getState().lastActive).toEqual({
+      left: "compositions",
+      right: "renders",
+    });
+  });
+
+  it("forgets the previous dock's memory on detach", () => {
+    useDockLayoutStore.getState().sync(snapshot(["renders"], "renders"));
+    useDockLayoutStore.getState().detach();
+    expect(useDockLayoutStore.getState().lastActive).toEqual({});
+  });
+});

package/src/components/dock/dockLayoutStore.ts

@@ -25,6 +25,8 @@ export interface DockSnapshot {
   /** Open panels whose tab is showing and whose group is not hidden. */
   visiblePanels: ReadonlySet<PanelId>;
   activePanel: PanelId | null;
+  /** The tab each group shows, so a restored layout still records what every side column last showed. */
+  groupActivePanels?: readonly PanelId[];
 }
 
 type LastActive = Partial<Record<PanelZone, PanelId>>;
@@ -53,13 +55,17 @@ export const useDockLayoutStore = create<DockLayoutState>((set, get) => ({
   lastActive: {},
   pendingActivation: null,
   attach: (controller) => set({ controller }),
-  detach: () => set({ controller: null }),
+  detach: () => set({ controller: null, lastActive: {} }),
   sync: (snapshot) =>
     set((state) => {
+      const lastActive = { ...state.lastActive };
+      for (const id of snapshot.groupActivePanels ?? []) {
+        const zone = PANEL_DEFINITIONS[id].zone;
+        if (zone !== "center") lastActive[zone] = id;
+      }
       const { activePanel } = snapshot;
-      if (!activePanel) return snapshot;
-      const zone = PANEL_DEFINITIONS[activePanel].zone;
-      return { ...snapshot, lastActive: { ...state.lastActive, [zone]: activePanel } };
+      if (activePanel) lastActive[PANEL_DEFINITIONS[activePanel].zone] = activePanel;
+      return { ...snapshot, lastActive };
     }),
   takePendingActivation: () => {
     const { pendingActivation } = get();
@@ -89,3 +95,14 @@ export const useDockLayoutStore = create<DockLayoutState>((set, get) => ({
   },
   resetLayout: () => get().controller?.reset(),
 }));
+
+/** The panel of `zone` the user is looking at: the last one focused if still showing, else any showing. */
+export function visiblePanelInZone(
+  zone: PanelZone,
+  lastActive: LastActive,
+  visiblePanels: ReadonlySet<PanelId>,
+): PanelId | null {
+  const last = lastActive[zone];
+  if (last && visiblePanels.has(last)) return last;
+  return panelsInZone(zone).find((id) => visiblePanels.has(id)) ?? null;
+}

package/src/components/dock/dockTestHarness.ts

@@ -0,0 +1,11 @@
+import { createDockview, type DockviewApi } from "dockview-react";
+
+/** A real dockview mounted on a fresh host element, with empty panel bodies. */
+export function mountBareDockview(): { host: HTMLElement; api: DockviewApi } {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const api = createDockview(host, {
+    createComponent: () => ({ element: document.createElement("div"), init() {}, dispose() {} }),
+  });
+  return { host, api };
+}

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

@@ -1,12 +1,55 @@
 // @vitest-environment happy-dom
 
+import { createElement, act } from "react";
+import { createRoot, type Root } from "react-dom/client";
 import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
 import { Window } from "happy-dom";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
 import type { DomEditLayerItem } from "./domEditingTypes";
-import { createRafThrottle, sortLayersByZIndex } from "./LayersPanel";
+import { createRafThrottle, LayersPanel, sortLayersByZIndex } from "./LayersPanel";
 import { isLayerDraggable } from "./useLayerDrag";
 import { liveTime } from "../../player";
 
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const mocks = vi.hoisted(() => ({
+  previewIframeRef: { current: null } as { current: unknown },
+  collect: vi.fn(),
+  setActiveGroupElement: vi.fn(),
+  showToast: vi.fn(),
+}));
+
+vi.mock("../../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({
+    previewIframeRef: mocks.previewIframeRef,
+    activeCompPath: "index.html",
+    showToast: mocks.showToast,
+  }),
+  useStudioPlaybackContext: () => ({
+    refreshKey: 0,
+    compositionLoading: true,
+    timelineElements: [],
+    isPlaying: false,
+  }),
+}));
+vi.mock("../../contexts/DomEditContext", () => ({
+  useDomEditContext: () => ({
+    domEditSelection: null,
+    activeGroupElement: null,
+    applyDomSelection: vi.fn(),
+    updateDomEditHoverSelection: vi.fn(),
+    handleDomZIndexReorderCommit: vi.fn(),
+    setActiveGroupElement: mocks.setActiveGroupElement,
+  }),
+}));
+vi.mock("../nle/useCanvasZOrderTimelineMirror", () => ({
+  useLayerReorderTimelineMirror: () => vi.fn(),
+}));
+vi.mock("./domEditing", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./domEditing")>()),
+  collectDomEditLayerItems: mocks.collect,
+}));
+
 function makeLayer(
   overrides: Partial<DomEditLayerItem> & { zIndex?: string; locked?: boolean },
 ): DomEditLayerItem {
@@ -197,3 +240,56 @@ describe("liveTime subscribe / unsubscribe (LayersPanel scrub contract)", () =>
     unsubscribe();
   });
 });
+
+describe("LayersPanel preview promotion", () => {
+  let root: Root;
+  let host: HTMLDivElement;
+
+  function makeIframe(compId: string): HTMLIFrameElement {
+    const iframe = document.createElement("iframe");
+    const doc = new Window().document;
+    doc.body.innerHTML = `<div data-composition-id="${compId}"></div>`;
+    Object.defineProperty(iframe, "contentDocument", { value: doc });
+    return iframe;
+  }
+
+  const collectedRootIds = () =>
+    mocks.collect.mock.calls.map((call) => (call[0] as HTMLElement).dataset.compositionId);
+
+  beforeEach(() => {
+    mocks.collect.mockReset().mockReturnValue([]);
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    host.remove();
+    usePreviewIframeStore.setState({ iframe: null });
+  });
+
+  it("recollects layers from the promoted document's load, not the replaced one", () => {
+    const a = makeIframe("a");
+    const b = makeIframe("b");
+    mocks.previewIframeRef.current = a;
+    usePreviewIframeStore.setState({ iframe: a });
+    act(() => root.render(createElement(LayersPanel)));
+
+    act(() => {
+      mocks.previewIframeRef.current = b;
+      usePreviewIframeStore.getState().setIframe(b);
+    });
+    mocks.collect.mockClear();
+
+    act(() => {
+      a.dispatchEvent(new Event("load"));
+    });
+    expect(mocks.collect).not.toHaveBeenCalled();
+
+    act(() => {
+      b.dispatchEvent(new Event("load"));
+    });
+    expect(collectedRootIds()).toEqual(["b"]);
+  });
+});

package/src/components/editor/LayersPanel.tsx

@@ -1,3 +1,4 @@
+import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
 import { memo, useState, useCallback, useEffect, useRef } from "react";
 import {
   collectDomEditLayerItems,
@@ -122,6 +123,7 @@ export const LayersPanel = memo(function LayersPanel() {
 
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
 
+  const livePreviewIframe = useLivePreviewIframe();
   const collectLayers = useCallback(() => {
     const iframe = previewIframeRef.current;
     if (!iframe) return;
@@ -152,7 +154,7 @@ export const LayersPanel = memo(function LayersPanel() {
 
   useEffect(() => {
     collectLayers();
-  }, [collectLayers, refreshKey, zEditVersion]);
+  }, [collectLayers, refreshKey, zEditVersion, livePreviewIframe]);
 
   useEffect(() => {
     const iframe = previewIframeRef.current;
@@ -163,7 +165,7 @@ export const LayersPanel = memo(function LayersPanel() {
     };
     iframe.addEventListener("load", handleLoad);
     return () => iframe.removeEventListener("load", handleLoad);
-  }, [previewIframeRef, collectLayers]);
+  }, [previewIframeRef, livePreviewIframe, collectLayers]);
 
   useEffect(() => {
     if (!compositionLoading) {

package/src/components/editor/PreviewGuides.tsx

@@ -8,7 +8,7 @@ interface PreviewGuidesProps {
 }
 
 const TICKS = Array.from({ length: 11 }, (_, i) => i * 10);
-const INK = "rgba(255,255,255,0.7)";
+const INK = "color-mix(in srgb, white 70%, transparent)";
 
 /** Ruler and safe-margin boxes drawn over the preview pane, never inside the composition. */
 export const PreviewGuides = memo(function PreviewGuides({ iframeRef }: PreviewGuidesProps) {

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

@@ -5,7 +5,6 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { useAppHotkeys } from "../../hooks/useAppHotkeys";
 import { usePlayerStore } from "../../player/store/playerStore";
-import type { LeftSidebarHandle } from "../sidebar/LeftSidebar";
 import type { DomEditSelection } from "./domEditing";
 import { SnapToolbar } from "./SnapToolbar";
 import { usePreviewGuidesStore } from "./previewGuidesStore";
@@ -31,7 +30,6 @@ function renderToolbar(onSnapChange = vi.fn()) {
 function AppHotkeyHarness() {
   const domEditSelectionRef = useRef<DomEditSelection | null>(null);
   const clearDomSelectionRef = useRef<() => void>(() => undefined);
-  const leftSidebarRef = useRef<LeftSidebarHandle | null>(null);
 
   useAppHotkeys({
     handleTimelineElementsDelete: vi.fn(async () => {}),
@@ -50,7 +48,6 @@ function AppHotkeyHarness() {
     showToast: vi.fn(),
     syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
     waitForPendingDomEditSaves: vi.fn(async () => undefined),
-    leftSidebarRef,
     handleCopy: vi.fn(() => false),
     handlePaste: vi.fn(async () => undefined),
     handleCut: vi.fn(async () => false),

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

@@ -4,6 +4,7 @@ import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { studioEditLifecycle, type StudioWriteResult } from "../../webmcp/writeCoordinator";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
 import { TopologyLens } from "./TopologyLens";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -291,4 +292,31 @@ describe("TopologyLens", () => {
     expect(vi.getTimerCount()).toBe(0);
     expect(studioEditLifecycle.getSnapshot()).toEqual({ phase: "idle" });
   });
+
+  it("dismisses on the promoted iframe's load, not the replaced one", () => {
+    const a = document.createElement("iframe");
+    const b = document.createElement("iframe");
+    document.body.append(a, b);
+    const ref = { current: a as HTMLIFrameElement | null };
+    usePreviewIframeStore.setState({ iframe: a });
+    window.matchMedia = matchMedia(false);
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+    act(() => {
+      root?.render(<TopologyLens iframeRef={ref} activeCompositionPath="index.html" />);
+    });
+    begin();
+
+    act(() => {
+      ref.current = b;
+      usePreviewIframeStore.getState().setIframe(b);
+    });
+    act(() => a.dispatchEvent(new Event("load")));
+    expect(host.querySelector('[data-topology-lens="hidden"]')).toBeNull();
+
+    act(() => b.dispatchEvent(new Event("load")));
+    expect(host.querySelector('[data-topology-lens="hidden"]')).not.toBeNull();
+    usePreviewIframeStore.setState({ iframe: null });
+  });
 });

package/src/components/editor/TopologyLens.tsx

@@ -1,3 +1,4 @@
+import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
 import {
   useEffect,
   useLayoutEffect,
@@ -113,13 +114,14 @@ export function TopologyLens({ iframeRef, activeCompositionPath }: TopologyLensP
     setMeasured(geometry ? { callId, geometry } : null);
   }, [activeCompositionPath, callId, handle, iframeRef, phase]);
 
+  const livePreviewIframe = useLivePreviewIframe();
   useEffect(() => {
     const iframe = iframeRef.current;
     if (!iframe || !callId) return;
     const dismiss = () => studioEditLifecycle.dismiss(callId);
     iframe.addEventListener("load", dismiss);
     return () => iframe.removeEventListener("load", dismiss);
-  }, [callId, iframeRef]);
+  }, [callId, iframeRef, livePreviewIframe]);
 
   useEffect(() => {
     if (pendingUnmountDismissRef.current !== null) {

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

@@ -4,6 +4,8 @@ import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { normalizeHfColorGrading } from "@hyperframes/core/color-grading";
+import { runtimeProtocolMetadata } from "@hyperframes/core/runtime/protocol";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
 import { useColorGradingController } from "./useColorGradingController";
 import type { DomEditSelection } from "./domEditing";
 
@@ -22,6 +24,7 @@ function cleanStudioGrading() {
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {
+  usePreviewIframeStore.setState({ iframe: null });
   document.body.innerHTML = "";
 });
 
@@ -737,3 +740,38 @@ describe("useColorGradingController", () => {
     vi.unstubAllGlobals();
   });
 });
+
+describe("useColorGradingController after the preview iframe is replaced", () => {
+  it("replays the grade to the new iframe on its ready message and ignores the old one", () => {
+    vi.useFakeTimers();
+    const a = createPreviewFrame();
+    const b = createPreviewFrame();
+    const ref = { current: a.iframe as HTMLIFrameElement | null };
+    usePreviewIframeStore.getState().setIframe(a.iframe);
+    const initialElement = makeElement({
+      dataAttributes: { "color-grading": JSON.stringify({ preset: "bright-pop", intensity: 1 }) },
+    });
+    const { root } = renderHook(vi.fn(), initialElement, ref);
+    act(() => vi.advanceTimersByTime(100));
+
+    const postToA = vi.spyOn(a.contentWindow, "postMessage");
+    const postToB = vi.spyOn(b.contentWindow, "postMessage");
+    act(() => {
+      ref.current = b.iframe;
+      usePreviewIframeStore.getState().setIframe(b.iframe);
+    });
+    const ready = { source: "hf-preview", type: "ready", ...runtimeProtocolMetadata(30) };
+    act(() => {
+      window.dispatchEvent(new MessageEvent("message", { data: ready, source: a.contentWindow }));
+    });
+    expect(colorGradingMessages(postToB.mock.calls)).toHaveLength(0);
+    act(() => {
+      window.dispatchEvent(new MessageEvent("message", { data: ready, source: b.contentWindow }));
+    });
+
+    expect(colorGradingMessages(postToB.mock.calls)).toHaveLength(1);
+    expect(postToA).not.toHaveBeenCalled();
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+});

package/src/components/editor/useColorGradingController.ts

@@ -1,3 +1,4 @@
+import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
 import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import {
   HF_COLOR_GRADING_ATTR,
@@ -430,6 +431,7 @@ export function useColorGradingController({
     [previewIframeRef, target],
   );
 
+  const livePreviewIframe = useLivePreviewIframe();
   useEffect(() => {
     const iframe = previewIframeRef?.current;
     if (!iframe) return;
@@ -455,7 +457,13 @@ export function useColorGradingController({
       window.removeEventListener("message", onMessage);
       window.clearTimeout(timer);
     };
-  }, [postColorGrading, postCompare, previewIframeRef, scheduleRuntimeStatusRefresh]);
+  }, [
+    postColorGrading,
+    postCompare,
+    previewIframeRef,
+    scheduleRuntimeStatusRefresh,
+    livePreviewIframe,
+  ]);
 
   useEffect(
     () => () => {

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

@@ -0,0 +1,76 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { normalizeHfColorGrading } from "@hyperframes/core/color-grading";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
+import { useColorGradingPreviews } from "./useColorGradingPreviews";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  usePreviewIframeStore.setState({ iframe: null });
+  document.body.innerHTML = "";
+});
+
+function createFrame() {
+  return document.body.appendChild(document.createElement("iframe"));
+}
+
+function installRenderer(iframe: HTMLIFrameElement) {
+  const renderPreviews = vi.fn().mockResolvedValue({
+    width: 160,
+    height: 90,
+    images: [{ id: "bright-pop", dataUrl: "data:image/png;base64,x" }],
+  });
+  (iframe.contentWindow as unknown as { __hf: unknown }).__hf = {
+    colorGrading: { renderPreviews },
+  };
+  return renderPreviews;
+}
+
+describe("useColorGradingPreviews after the preview iframe is replaced", () => {
+  it("requests preset previews from the new iframe's runtime", async () => {
+    vi.useFakeTimers();
+    const a = createFrame();
+    const b = createFrame();
+    const renderOnB = installRenderer(b);
+    const ref = { current: a as HTMLIFrameElement | null };
+    usePreviewIframeStore.getState().setIframe(a);
+    const grading = normalizeHfColorGrading({ preset: "neutral" });
+    if (!grading) throw new Error("expected neutral grading");
+    const gradingRef = { current: grading };
+    const target = { selector: "#v" } as never;
+    const postColorGrading = vi.fn();
+    let requestPresetPreviews: () => void = () => {};
+    function Host() {
+      requestPresetPreviews = useColorGradingPreviews({
+        grading,
+        gradingRef,
+        identityKey: "k",
+        target,
+        previewIframeRef: ref,
+        postColorGrading,
+      }).requestPresetPreviews;
+      return null;
+    }
+    const root = createRoot(document.body.appendChild(document.createElement("div")));
+    act(() => root.render(React.createElement(Host)));
+    act(() => requestPresetPreviews());
+    act(() => vi.advanceTimersByTime(0));
+
+    act(() => {
+      ref.current = b;
+      usePreviewIframeStore.getState().setIframe(b);
+    });
+    act(() => vi.advanceTimersByTime(0));
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(renderOnB).toHaveBeenCalled();
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+});

package/src/components/editor/useColorGradingPreviews.ts

@@ -1,3 +1,4 @@
+import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
 import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
 import {
   HF_COLOR_GRADING_ACTIVE_EFFECT_KEYS,
@@ -155,6 +156,7 @@ export function useColorGradingPreviews({
   }
   const previews = state.identityKey === identityKey ? state.previews : emptyPreviews();
 
+  const livePreviewIframe = useLivePreviewIframe();
   useEffect(() => {
     if (!request) return;
     const { kind } = request;
@@ -245,7 +247,15 @@ export function useColorGradingPreviews({
       iframe.removeEventListener("load", attempt);
       window.removeEventListener("message", onMessage);
     };
-  }, [grading.effects, grading.lut, grading.palette, previewIframeRef, request, target]);
+  }, [
+    grading.effects,
+    grading.lut,
+    grading.palette,
+    previewIframeRef,
+    livePreviewIframe,
+    request,
+    target,
+  ]);
 
   const stopAnimatedPreview = useCallback(() => {
     const session = animatedRef.current;