@hyperframes/studio 0.8.75 → 0.8.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.75",
+  "version": "0.8.77",
   "description": "",
   "repository": {
     "type": "git",
@@ -52,11 +52,11 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.75",
-    "@hyperframes/player": "0.8.75",
-    "@hyperframes/parsers": "0.8.75",
-    "@hyperframes/sdk": "0.8.75",
-    "@hyperframes/studio-server": "0.8.75"
+    "@hyperframes/core": "0.8.77",
+    "@hyperframes/parsers": "0.8.77",
+    "@hyperframes/studio-server": "0.8.77",
+    "@hyperframes/player": "0.8.77",
+    "@hyperframes/sdk": "0.8.77"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -72,7 +72,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.75"
+    "@hyperframes/producer": "0.8.77"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/StudioRightPanels.types.ts

@@ -9,7 +9,6 @@
 import type { StudioEditPersistenceProps } from "./panels/VariablesPanel";
 import type { BlockParam } from "@hyperframes/core/registry";
 import type { Composition } from "@hyperframes/sdk";
-import type { EditHistoryKind } from "../utils/editHistory";
 import type { UseSlideshowPersistParams } from "../hooks/useSlideshowPersist";
 import type { AddMediaOverlayHandler } from "./editor/propertyPanelTypes";
 import type { ToggleHiddenHandler } from "../utils/studioHelpers";
@@ -46,7 +45,6 @@ export interface StudioRightPanelsProps extends StudioEditPersistenceProps {
   reloadPreview: () => void;
   recordEdit: (entry: {
     label: string;
-    kind: EditHistoryKind;
     files: Record<string, { before: string; after: string }>;
   }) => Promise<void>;
   onToggleElementHidden?: ToggleHiddenHandler;

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

@@ -18,6 +18,7 @@ import {
   hoverCacheDescribesPoint,
   resolveResizeCenterAnchorOffset,
 } from "./domEditOverlayGestures";
+import { usePlayerStore } from "../../player/store/playerStore";
 
 // React 19 warns unless the test environment opts into act().
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -242,6 +243,10 @@ function dispatchOverlayPointerDown(target: Element, clientX = 120, clientY = 80
   });
 }
 
+beforeEach(() => {
+  usePlayerStore.setState({ previewBooted: true });
+});
+
 describe("focusDomEditOverlayElement", () => {
   it("focuses the canvas overlay without scrolling", () => {
     const calls: Array<FocusOptions | undefined> = [];

package/src/components/editor/LayersPanel.tsx

@@ -3,6 +3,7 @@ import { memo, useState, useCallback, useEffect, useRef } from "react";
 import {
   collectDomEditLayerItems,
   getDomEditLayerKey,
+  liveLayerElement,
   resolveDomEditSelection,
   type DomEditLayerItem,
 } from "./domEditing";
@@ -190,20 +191,8 @@ export const LayersPanel = memo(function LayersPanel() {
 
   const resolveSelection = useCallback(
     (layer: DomEditLayerItem) => {
-      // Re-find the element from the live DOM — layer.element may be stale
-      // after soft reload (which replaces scripts without reloading the iframe).
-      let el = layer.element;
-      if (!el.isConnected) {
-        const iframe = previewIframeRef.current;
-        const doc = iframe?.contentDocument;
-        if (doc) {
-          const found =
-            (layer.id ? doc.getElementById(layer.id) : null) ??
-            (layer.hfId ? doc.querySelector(`[data-hf-id="${CSS.escape(layer.hfId)}"]`) : null) ??
-            doc.getElementById(layer.key);
-          if (found instanceof HTMLElement) el = found;
-        }
-      }
+      const doc = previewIframeRef.current?.contentDocument;
+      const el = liveLayerElement(layer, doc, activeCompPath);
       return resolveDomEditSelection(el, {
         activeCompositionPath: activeCompPath,
         isMasterView,

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

@@ -2,10 +2,11 @@
 
 import { act } from "react";
 import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { GridOverlay } from "./GridOverlay";
 import { PreviewOverlayProvider } from "./PreviewOverlayProvider";
 import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
+import { usePlayerStore } from "../../player/store/playerStore";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -27,6 +28,10 @@ function compositionFrame() {
   return iframe;
 }
 
+beforeEach(() => {
+  usePlayerStore.setState({ previewBooted: true });
+});
+
 describe("PreviewOverlayProvider", () => {
   it("derives grid geometry after the iframe prop becomes available", async () => {
     window.localStorage.setItem(

package/src/components/editor/domEditing.ts

@@ -37,6 +37,7 @@ export {
   getDomEditNonEditableReason,
   getDomEditTargetKey,
   isTextEditableSelection,
+  liveLayerElement,
   readHfId,
   refreshDomEditSelection,
   resolveDomEditCapabilities,

package/src/components/editor/domEditingElement.ts

@@ -314,6 +314,19 @@ export function findElementForSelection(
   return findAll(selection.selector)[selection.selectorIndex ?? 0] ?? null;
 }
 
+// The selected node while mounted, else its copy in the selection's own file (ids repeat across files), else any copy.
+export function findPreviewNode(
+  doc: Document | null | undefined,
+  el: DomEditSelection,
+): Element | null {
+  if (!doc) return null;
+  if (el.element?.isConnected && el.element.ownerDocument === doc) return el.element;
+  return (
+    findElementForSelection(doc, el) ??
+    findElementForSelection(doc, { ...el, sourceFile: undefined })
+  );
+}
+
 // fallow-ignore-next-line complexity
 export function findElementForTimelineElement(
   doc: Document,

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

@@ -6,6 +6,7 @@ import {
   buildDomEditPatchTarget,
   buildTextFieldChildLocator,
   readHfId,
+  liveLayerElement,
 } from "./domEditingLayers";
 import type { DomEditTextField } from "./domEditingTypes";
 
@@ -305,3 +306,29 @@ describe("collectDomEditLayerItems selector-index cost", () => {
     expect(classSelectorQueries(12)).toBe(1);
   });
 });
+
+describe("liveLayerElement", () => {
+  it("finds a replaced layer again in its own file when a sub-composition repeats its id", () => {
+    document.body.innerHTML =
+      '<div data-composition-id="main">' +
+      '<div data-composition-id="strip" data-composition-src="compositions/strip.html">' +
+      '<div id="card-1">strip</div></div><div id="card-1">root</div></div>';
+    const stale = document.createElement("div");
+    const layer = {
+      key: "index.html:card-1:0",
+      element: stale,
+      label: "card-1",
+      tagName: "div",
+      depth: 0,
+      childCount: 0,
+      id: "card-1",
+      sourceFile: "index.html",
+    };
+
+    expect(liveLayerElement(layer, document, "index.html").textContent).toBe("root");
+    expect(
+      liveLayerElement({ ...layer, sourceFile: "compositions/strip.html" }, document, "index.html")
+        .textContent,
+    ).toBe("strip");
+  });
+});

package/src/components/editor/domEditingLayers.ts

@@ -491,6 +491,15 @@ export function collectDomEditLayerItems(
   return items;
 }
 
+export function liveLayerElement(
+  layer: DomEditLayerItem,
+  doc: Document | null | undefined,
+  activeCompositionPath: string | null,
+): HTMLElement {
+  if (layer.element.isConnected || !doc) return layer.element;
+  return findElementForSelection(doc, layer, activeCompositionPath) ?? layer.element;
+}
+
 // ─── Patch operations ────────────────────────────────────────────────────────
 
 export function buildDomEditStylePatchOperation(

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

@@ -0,0 +1,63 @@
+// @vitest-environment happy-dom
+import { expect, it, vi } from "vitest";
+import { createGsapLivePreview } from "./gsapLivePreview";
+import type { DomEditSelection } from "./domEditingTypes";
+import type { GsapAnimation } from "@hyperframes/parsers/gsap-parser";
+import { readGsapRuntimeValuesForPanel } from "./propertyPanelHelpers";
+
+it("previews on the selected element, not an earlier same-id copy in a sub-composition", () => {
+  document.body.innerHTML =
+    '<div data-composition-id="strip"><div id="card" data-hf-id="hf-inner"></div></div>' +
+    '<div id="card" data-hf-id="hf-root"></div>';
+  const set = vi.fn();
+  const iframe = { contentWindow: { gsap: { set } }, contentDocument: document };
+  const preview = createGsapLivePreview({ current: iframe as unknown as HTMLIFrameElement });
+  preview({ id: "card", hfId: "hf-root" } as DomEditSelection, { x: 10 });
+  expect(set.mock.calls[0]?.[0]).toBe(document.querySelector('[data-hf-id="hf-root"]'));
+});
+
+it("previews on the copy in the selection's own file when a sub-composition repeats its hf-id", () => {
+  document.body.innerHTML =
+    '<div data-composition-id="strip" data-composition-src="compositions/strip.html">' +
+    '<div id="card" data-hf-id="hf-card"></div></div><div id="card" data-hf-id="hf-card" class="root"></div>';
+  const set = vi.fn();
+  const iframe = { contentWindow: { gsap: { set } }, contentDocument: document };
+  const preview = createGsapLivePreview({ current: iframe as unknown as HTMLIFrameElement });
+  preview({ id: "card", hfId: "hf-card", sourceFile: "index.html" } as DomEditSelection, { x: 10 });
+  expect(set.mock.calls[0]?.[0]).toBe(document.querySelector(".root"));
+});
+
+it("previews on the selected node while it is mounted, even in a second mount of the same sub-composition", () => {
+  document.body.innerHTML =
+    '<div data-composition-id="strip" data-composition-src="compositions/strip.html"><div id="card" data-hf-id="hf-card"></div></div>' +
+    '<div data-composition-id="strip" data-composition-src="compositions/strip.html"><div id="card" data-hf-id="hf-card"></div></div>';
+  const second = document.querySelectorAll<HTMLElement>("#card")[1];
+  const selection = {
+    id: "card",
+    hfId: "hf-card",
+    sourceFile: "compositions/strip.html",
+    element: second,
+  };
+  const set = vi.fn();
+  const iframe = { contentWindow: { gsap: { set } }, contentDocument: document };
+  createGsapLivePreview({ current: iframe as unknown as HTMLIFrameElement })(
+    selection as DomEditSelection,
+    { x: 10 },
+  );
+  expect(set.mock.calls[0]?.[0]).toBe(second);
+});
+
+it("the panel reads GSAP values off the node the live preview moves", () => {
+  document.body.innerHTML =
+    '<div data-composition-id="strip" data-composition-src="compositions/strip.html"><div id="card"></div></div>' +
+    '<div id="card" class="root"></div>';
+  const root = document.querySelector<HTMLElement>(".root");
+  const getProperty = vi.fn(() => 5);
+  const iframe = { contentWindow: { gsap: { getProperty } }, contentDocument: document };
+  const selection = { id: "card", sourceFile: "index.html", element: root } as DomEditSelection;
+  const animations = [{ properties: { x: 5 } }] as unknown as GsapAnimation[];
+  readGsapRuntimeValuesForPanel("anim", animations, selection, {
+    current: iframe as unknown as HTMLIFrameElement,
+  });
+  expect(getProperty.mock.calls[0]?.[0]).toBe(root);
+});

package/src/components/editor/gsapLivePreview.ts

@@ -1,4 +1,5 @@
 import type { DomEditSelection } from "./domEditingTypes";
+import { findPreviewNode } from "./domEditingElement";
 
 /**
  * Build the "live preview" callback the 3D-transform sub-view fires while a
@@ -8,19 +9,6 @@ import type { DomEditSelection } from "./domEditingTypes";
  * Extracted so the identical closure exists once — shared by the legacy
  * PropertyPanel Layout section and the flat Layout group (PropertyPanelFlat).
  */
-// Resolve by id when unique, otherwise by selector + selectorIndex — a bare
-// querySelector(selector) always hits the FIRST match, so dragging on the
-// second of two same-selector siblings would animate the wrong element.
-function resolvePreviewNode(
-  doc: Document | null | undefined,
-  el: DomEditSelection,
-): Element | null {
-  if (!doc) return null;
-  if (el.id) return doc.querySelector(`#${el.id}`);
-  if (!el.selector) return null;
-  return doc.querySelectorAll(el.selector)[el.selectorIndex ?? 0] ?? null;
-}
-
 export function createGsapLivePreview(iframeRef: { readonly current: HTMLIFrameElement | null }) {
   return (el: DomEditSelection, props: Record<string, number>) => {
     const iframe = iframeRef.current;
@@ -28,7 +16,7 @@ export function createGsapLivePreview(iframeRef: { readonly current: HTMLIFrameE
       | { gsap?: { set: (t: Element, v: Record<string, number>) => void } }
       | null
       | undefined;
-    const node = resolvePreviewNode(iframe?.contentDocument, el);
+    const node = findPreviewNode(iframe?.contentDocument, el);
     if (win?.gsap && node) win.gsap.set(node, props);
   };
 }

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

@@ -2,9 +2,10 @@
 
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 import { DomEditOverlay } from "./DomEditOverlay";
 import { RECOMPUTE_INTERVAL_MS } from "./offCanvasIndicatorRefresh";
+import { usePlayerStore } from "../../player/store/playerStore";
 
 Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
 
@@ -59,6 +60,30 @@ async function flushAnimationFrames(): Promise<void> {
   });
 }
 
+// The refresh waits on MutationObserver delivery and then on its own throttle, so no fixed
+// number of frames is guaranteed to be enough on a loaded runner. Flush until the indicator
+// reaches the state under test.
+async function untilIndicator(host: HTMLElement, check: (indicator: Element | null) => void) {
+  await vi.waitFor(
+    async () => {
+      await act(async () => {
+        await flushAnimationFrames();
+      });
+      check(host.querySelector(INDICATOR));
+    },
+    { timeout: 4000, interval: 0 },
+  );
+}
+
+// Delivers each batch of mutation records `ms` late, as a busy runner can.
+function lateObserver(Base: typeof MutationObserver, ms: number): typeof MutationObserver {
+  return class extends Base {
+    constructor(callback: MutationCallback) {
+      super((records, observer) => setTimeout(() => callback(records, observer), ms));
+    }
+  };
+}
+
 interface OverlayHarness {
   host: HTMLElement;
   movedElement: HTMLElement;
@@ -68,7 +93,7 @@ interface OverlayHarness {
 // Mount DomEditOverlay over an iframe whose #headline sits at `initialLeft`, with a
 // getBoundingClientRect stub that reads the element's live inline geometry (so a
 // style mutation moves it) and reports the composition/overlay as 800x450 at origin.
-function mountOverlayWithHeadline(initialLeft: number): OverlayHarness {
+function mountOverlayWithHeadline(initialLeft: number, observerDelayMs = 0): OverlayHarness {
   const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
   const host = document.createElement("div");
   document.body.append(host);
@@ -85,6 +110,9 @@ function mountOverlayWithHeadline(initialLeft: number): OverlayHarness {
   `;
   const movedElement = doc.getElementById("headline");
   if (!movedElement) throw new Error("Expected test element");
+  const view = doc.defaultView?.MutationObserver ? doc.defaultView : globalThis;
+  const RealObserver = view.MutationObserver;
+  if (observerDelayMs > 0) view.MutationObserver = lateObserver(RealObserver, observerDelayMs);
 
   Element.prototype.getBoundingClientRect = function (): DOMRect {
     if (this === movedElement) {
@@ -125,58 +153,52 @@ function mountOverlayWithHeadline(initialLeft: number): OverlayHarness {
     cleanup: () => {
       act(() => root.unmount());
       Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+      view.MutationObserver = RealObserver;
       iframe.remove();
       host.remove();
     },
   };
 }
 
-describe("off-canvas indicator refresh", () => {
-  it("removes the indicator when an off-canvas element moves in-canvas (off->on)", async () => {
-    const h = mountOverlayWithHeadline(760);
-    try {
-      await act(async () => {
-        await flushAnimationFrames();
-      });
-      expect(h.host.querySelector(INDICATOR)).toBeTruthy();
-
-      act(() => {
-        h.movedElement.style.left = "120px";
-      });
-      await act(async () => {
-        await Promise.resolve();
-        await flushAnimationFrames();
-      });
+beforeEach(() => {
+  usePlayerStore.setState({ previewBooted: true });
+});
 
-      expect(h.host.querySelector(INDICATOR)).toBeNull();
-    } finally {
-      h.cleanup();
-    }
-  });
+describe("off-canvas indicator refresh", () => {
+  for (const [label, delayMs] of [
+    ["", 0],
+    [" when mutation delivery lags past a fixed wait", 300],
+  ] as const) {
+    it(`removes the indicator when an off-canvas element moves in-canvas (off->on)${label}`, async () => {
+      const h = mountOverlayWithHeadline(760, delayMs);
+      try {
+        await untilIndicator(h.host, (indicator) => expect(indicator).toBeTruthy());
+
+        act(() => {
+          h.movedElement.style.left = "120px";
+        });
+        await untilIndicator(h.host, (indicator) => expect(indicator).toBeNull());
+      } finally {
+        h.cleanup();
+      }
+    });
+  }
 
   it("tracks the indicator to the new position when it stays off-canvas (off->off)", async () => {
     const h = mountOverlayWithHeadline(760);
     try {
-      await act(async () => {
-        await flushAnimationFrames();
-      });
+      await untilIndicator(h.host, (indicator) => expect(indicator).toBeTruthy());
       const before = h.host.querySelector(INDICATOR);
-      expect(before).toBeTruthy();
       const leftBefore = (before!.parentElement as HTMLElement).style.left;
 
       // Move further off-canvas (still outside the 800px-wide composition).
       act(() => {
         h.movedElement.style.left = "1200px";
       });
-      await act(async () => {
-        await Promise.resolve();
-        await flushAnimationFrames();
+      await untilIndicator(h.host, (indicator) => {
+        expect(indicator).toBeTruthy();
+        expect((indicator!.parentElement as HTMLElement).style.left).not.toEqual(leftBefore);
       });
-
-      const after = h.host.querySelector(INDICATOR);
-      expect(after).toBeTruthy();
-      const leftAfter = (after!.parentElement as HTMLElement).style.left;
-      expect(leftAfter).not.toEqual(leftBefore);
     } finally {
       h.cleanup();
     }

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

@@ -7,6 +7,7 @@ import {
   resetOverlayFrameLoopForTests,
   subscribeOverlayFrame,
 } from "./overlayFrameLoop";
+import { usePlayerStore } from "../../player/store/playerStore";
 
 /**
  * The editor's overlay polls run on one shared, parkable frame loop. The two
@@ -37,6 +38,7 @@ describe("overlay frame loop", () => {
   };
 
   beforeEach(() => {
+    usePlayerStore.setState({ previewBooted: true });
     vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout", "performance", "Date"] });
     queued = [];
     window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
@@ -55,6 +57,20 @@ describe("overlay frame loop", () => {
     window.cancelAnimationFrame = originalCancelRaf;
   });
 
+  it("does not poll the preview before it boots, and wakes when it does", () => {
+    usePlayerStore.setState({ previewBooted: false });
+    let runs = 0;
+    subscribeOverlayFrame(() => {
+      runs += 1;
+    });
+    framesOver(1000);
+    expect(runs).toBe(0);
+
+    usePlayerStore.getState().markPreviewBooted();
+    framesOver(32);
+    expect(runs).toBeGreaterThan(0);
+  });
+
   it("runs every subscriber on one frame, not one frame each", () => {
     const calls: string[] = [];
     subscribeOverlayFrame(() => calls.push("a"));

package/src/components/editor/overlayFrameLoop.ts

@@ -25,6 +25,8 @@
  * the next couple of hundred milliseconds, and no further event is dispatched
  * while it does.
  */
+import { usePlayerStore } from "../../player/store/playerStore";
+
 const AWAKE_MS = 400;
 /** How often a parked loop runs one frame anyway, in case a wake was missed. */
 export const IDLE_POLL_MS = 250;
@@ -35,6 +37,7 @@ let frameId: number | null = null;
 let idleTimerId: ReturnType<typeof setTimeout> | null = null;
 let awakeUntil = 0;
 let listenersAttached = false;
+let stopBootWake: (() => void) | null = null;
 
 /** Wake sources. All passive reads; none of them can be cancelled by us. */
 const WINDOW_EVENTS = [
@@ -111,6 +114,9 @@ function runFrame(): void {
   // it — and a shared loop makes that failure four overlays wide plus the
   // idle-poll safety net, permanently, rather than one overlay's own problem.
   schedule();
+  // Nothing to track until the live preview boots, and a poll before then forces layout
+  // on a document that is still loading, on the thread the boot runs on.
+  if (!usePlayerStore.getState().previewBooted) return;
   for (const subscriber of subscribers) {
     try {
       subscriber();
@@ -154,6 +160,9 @@ function attachListeners(): void {
     window.addEventListener(type, requestOverlayFrames, { capture: true, passive: true });
   }
   window.addEventListener("message", onPreviewMessage, { capture: true, passive: true });
+  stopBootWake = usePlayerStore.subscribe((state, prev) => {
+    if (state.previewBooted && !prev.previewBooted) requestOverlayFrames();
+  });
 }
 
 function detachListeners(): void {
@@ -163,6 +172,8 @@ function detachListeners(): void {
     window.removeEventListener(type, requestOverlayFrames, { capture: true });
   }
   window.removeEventListener("message", onPreviewMessage, { capture: true });
+  stopBootWake?.();
+  stopBootWake = null;
 }
 
 /**

package/src/components/editor/propertyPanelHelpers.ts

@@ -4,6 +4,7 @@ import type { DomEditSelection } from "./domEditing";
 import type { GsapAnimation } from "@hyperframes/parsers/gsap-parser";
 import type { TimelineElement } from "../../player";
 import { roundToCenti } from "../../utils/rounding";
+import { findPreviewNode } from "./domEditingElement";
 
 export type {
   BackgroundRemovalProgress,
@@ -470,8 +471,6 @@ export function readGsapRuntimeValuesForPanel(
   if (!gsapAnimId || gsapAnimations.length === 0) return null;
   const iframe = previewIframeRef?.current;
   if (!iframe?.contentWindow) return null;
-  const selector = element.id ? `#${element.id}` : element.selector;
-  if (!selector) return null;
   try {
     const gsap = (
       iframe.contentWindow as unknown as {
@@ -479,7 +478,7 @@ export function readGsapRuntimeValuesForPanel(
       }
     ).gsap;
     if (!gsap?.getProperty) return null;
-    const el = iframe.contentDocument?.querySelector(selector);
+    const el = findPreviewNode(iframe.contentDocument, element);
     if (!el) return null;
     const propKeys = collectPanelPropKeys(gsapAnimations);
     const result: Record<string, number> = {};
@@ -508,10 +507,9 @@ export function readGsapBorderRadiusForPanel(
     if (!hasBRProp) return null;
   }
   const iframe = previewIframeRef?.current;
-  const selector = element.id ? `#${element.id}` : element.selector;
-  if (!iframe?.contentDocument || !selector) return null;
+  if (!iframe?.contentDocument) return null;
   try {
-    const el = iframe.contentDocument.querySelector(selector);
+    const el = findPreviewNode(iframe.contentDocument, element);
     if (!el || !iframe.contentWindow) return null;
     const cs = iframe.contentWindow.getComputedStyle(el);
     const parse = (v: string) => Number.parseFloat(v) || 0;

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

@@ -2,12 +2,13 @@
 
 import { act, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { resetOverlayFrameLoopForTests } from "./overlayFrameLoop";
 import {
   usePreviewCompositionRect,
   type PreviewCompositionRect,
 } from "./usePreviewCompositionRect";
+import { usePlayerStore } from "../../player/store/playerStore";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -59,6 +60,10 @@ function compositionFrame(box: [number, number, number, number], width: number,
 
 const settle = () => new Promise((r) => setTimeout(r, 400));
 
+beforeEach(() => {
+  usePlayerStore.setState({ previewBooted: true });
+});
+
 describe("usePreviewCompositionRect", () => {
   it("reports the live preview iframe's box relative to the overlay, scaled to the composition", async () => {
     const probe = mountProbe();