@hyperframes/studio 0.8.55 → 0.8.57

package/src/components/nle/NLEPreview.tsx

@@ -1,5 +1,10 @@
+import {
+  readPreviewCompositionSize,
+  type PreviewCompositionSize,
+} from "../../utils/previewCompositionSize";
 import { memo, useCallback, useEffect, useRef, useState, type RefObject } from "react";
 import { Player } from "../../player";
+import type { PreviewIframeSlot } from "../../player/hooks/useTimelineSyncCallbacks";
 import {
   DEFAULT_PREVIEW_ZOOM,
   canStartPreviewPan,
@@ -13,10 +18,17 @@ import {
 } from "./previewZoom";
 import { RULER_GUTTER_PX, usePreviewGuidesStore } from "../editor/previewGuidesStore";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
+import { usePreviewFirstFrameTelemetry } from "../../player/hooks/usePreviewFirstFrameTelemetry";
 interface NLEPreviewProps {
   projectId: string;
   iframeRef: RefObject<HTMLIFrameElement | null>;
   onIframeLoad: () => void;
+  previewSlots: PreviewIframeSlot[];
+  onShadowIframeLoad: (gen: number) => void;
+  onShadowReadyChange: (gen: number, ready: boolean) => void;
+  onShadowError: (gen: number, message: string) => void;
+  setShadowIframeNode: (node: HTMLIFrameElement | null) => void;
+  resetPreviewSlots: () => void;
   onCompositionLoadingChange?: (loading: boolean) => void;
   portrait?: boolean;
   directUrl?: string;
@@ -40,10 +52,15 @@ const ZOOM_HUD_TIMEOUT_MS = 1200;
 const ZOOM_SETTLE_MS = 200;
 const PREVIEW_STAGE_INSET_PX = 16;
 
-interface PreviewCompositionSize {
-  width: number;
-  height: number;
-}
+// clip-path as well as visibility: the player's loading overlay sets its own
+// visibility:visible and would otherwise paint over the live frame.
+const SHADOW_IFRAME_STYLE: React.CSSProperties = {
+  position: "absolute",
+  inset: 0,
+  visibility: "hidden",
+  clipPath: "inset(100%)",
+  pointerEvents: "none",
+};
 
 function isPreviewAtFit(state: PreviewZoomState): boolean {
   return (
@@ -64,27 +81,6 @@ function loadInitialZoom(): PreviewZoomState {
     : DEFAULT_PREVIEW_ZOOM;
 }
 
-// fallow-ignore-next-line complexity
-function readPreviewCompositionSize(
-  iframe: HTMLIFrameElement | null,
-): PreviewCompositionSize | null {
-  try {
-    const doc = iframe?.contentDocument;
-    const root =
-      doc?.querySelector("[data-composition-id][data-width][data-height]") ??
-      doc?.querySelector("[data-width][data-height]");
-    if (!root) return null;
-    const width = Number.parseInt(root.getAttribute("data-width") ?? "", 10);
-    const height = Number.parseInt(root.getAttribute("data-height") ?? "", 10);
-    if (!Number.isFinite(width) || width <= 0 || !Number.isFinite(height) || height <= 0) {
-      return null;
-    }
-    return { width, height };
-  } catch {
-    return null;
-  }
-}
-
 export function resolvePreviewStageSize(
   viewportWidth: number,
   viewportHeight: number,
@@ -122,6 +118,12 @@ export const NLEPreview = memo(function NLEPreview({
   projectId,
   iframeRef,
   onIframeLoad,
+  previewSlots,
+  onShadowIframeLoad,
+  onShadowReadyChange,
+  onShadowError,
+  setShadowIframeNode,
+  resetPreviewSlots,
   onCompositionLoadingChange,
   portrait,
   directUrl,
@@ -136,6 +138,17 @@ export const NLEPreview = memo(function NLEPreview({
   useEffect(() => {
     onStageRef?.(stageRef);
   }, [onStageRef]);
+
+  // Composition switch: drop any in-flight shadow reload (skipped on first mount).
+  const previousActiveKeyRef = useRef(activeKey);
+  useEffect(() => {
+    if (previousActiveKeyRef.current === activeKey) return;
+    previousActiveKeyRef.current = activeKey;
+    resetPreviewSlots();
+  }, [activeKey, resetPreviewSlots]);
+
+  const liveGenRef = useRef<number | null>(null);
+  const reportPreviewFirstFrame = usePreviewFirstFrameTelemetry(previewSlots);
   const [compositionSize, setCompositionSize] = useState<PreviewCompositionSize | null>(null);
   const gutterPx = usePreviewGuidesStore((s) => (s.rulerVisible ? RULER_GUTTER_PX : 0));
   const [stageSize, setStageSize] = useState(() => resolvePreviewStageSize(0, 0, null, portrait));
@@ -299,6 +312,18 @@ export const NLEPreview = memo(function NLEPreview({
     }
   }, [writeTransform]);
 
+  // A promotion does not re-fire Player.onLoad: re-sync the local iframe ref, size and zoom.
+  useEffect(() => {
+    const live = previewSlots.find((slot) => slot.role === "live");
+    if (!live || live.gen === liveGenRef.current) return;
+    const isPromotion = liveGenRef.current !== null;
+    liveGenRef.current = live.gen;
+    if (!isPromotion) return;
+    previewIframeRef.current = iframeRef.current;
+    updateCompositionSizeFromPreview();
+    applyInitialZoom();
+  }, [previewSlots, iframeRef, updateCompositionSizeFromPreview, applyInitialZoom]);
+
   useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
@@ -469,25 +494,44 @@ export const NLEPreview = memo(function NLEPreview({
                 style={{ position: "absolute", inset: 0, zIndex: 0 }}
               />
             )}
-            <Player
-              key={activeKey}
-              ref={setPreviewIframeRef}
-              projectId={directUrl ? undefined : projectId}
-              directUrl={directUrl}
-              onLoad={() => {
-                updateCompositionSizeFromPreview();
-                onIframeLoad();
-                applyInitialZoom();
-              }}
-              onCompositionLoadingChange={onCompositionLoadingChange}
-              portrait={portrait}
-              suppressLoadingOverlay={suppressLoadingOverlay}
-              style={
-                directUrl?.includes("/components/")
-                  ? { position: "absolute", inset: 0, zIndex: 1 }
-                  : undefined
-              }
-            />
+            {previewSlots.map((slot) =>
+              slot.role === "live" ? (
+                <Player
+                  key={`${activeKey}-${slot.gen}`}
+                  ref={setPreviewIframeRef}
+                  projectId={directUrl ? undefined : projectId}
+                  directUrl={directUrl}
+                  onLoad={() => {
+                    updateCompositionSizeFromPreview();
+                    onIframeLoad();
+                    applyInitialZoom();
+                  }}
+                  onCompositionLoadingChange={onCompositionLoadingChange}
+                  onPainted={(details) => reportPreviewFirstFrame(slot, details)}
+                  portrait={portrait}
+                  suppressLoadingOverlay={suppressLoadingOverlay}
+                  style={
+                    directUrl?.includes("/components/")
+                      ? { position: "absolute", inset: 0, zIndex: 1 }
+                      : undefined
+                  }
+                />
+              ) : (
+                // Loads hidden behind the live slot until promoted.
+                <Player
+                  key={`${activeKey}-${slot.gen}`}
+                  ref={setShadowIframeNode}
+                  directUrl={slot.url}
+                  onLoad={() => onShadowIframeLoad(slot.gen)}
+                  onReadyToShowChange={(ready) => onShadowReadyChange(slot.gen, ready)}
+                  onPainted={(details) => reportPreviewFirstFrame(slot, details)}
+                  onPreviewError={(message) => onShadowError(slot.gen, message)}
+                  portrait={portrait}
+                  suppressLoadingOverlay
+                  style={SHADOW_IFRAME_STYLE}
+                />
+              ),
+            )}
           </div>
         </div>
         <div

package/src/components/nle/PreviewOverlays.topologyLens.test.tsx

@@ -3,21 +3,13 @@
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { getPreviewState, iframeRef } from "./PreviewOverlaysTestMocks";
 import { PreviewOverlays } from "./PreviewOverlays";
 
-(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+const previewState = getPreviewState();
 
-const previewState = vi.hoisted(() => ({ captionEditMode: false }));
-const iframeRef = { current: null as HTMLIFrameElement | null };
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
-vi.mock("../../contexts/StudioContext", () => ({
-  useStudioShellContext: () => ({ activeCompPath: "index.html", previewIframeRef: iframeRef }),
-  useStudioPlaybackContext: () => ({
-    captionEditMode: previewState.captionEditMode,
-    compositionLoading: false,
-    isPlaying: false,
-  }),
-}));
 vi.mock("../../contexts/DomEditContext", () => ({
   useDomEditSelectionContext: () => ({
     domEditHoverSelection: null,
@@ -41,30 +33,7 @@ vi.mock("../../contexts/DomEditContext", () => ({
     handleDomZIndexReorderCommit: vi.fn(),
   }),
 }));
-vi.mock("../../captions/store", () => {
-  const state = {
-    model: null,
-    dismissed: false,
-    syncError: null,
-    clearSelection: vi.fn(),
-    setDismissed: vi.fn(),
-    setEditMode: vi.fn(),
-    setSyncError: vi.fn(),
-  };
-  return {
-    useCaptionStore: Object.assign(
-      (selector: (value: typeof state) => unknown) => selector(state),
-      { getState: () => state },
-    ),
-  };
-});
-vi.mock("../../hooks/useCompositionDimensions", () => ({
-  useCompositionDimensions: () => null,
-}));
-vi.mock("../../utils/studioUiPreferences", () => ({ readStudioUiPreferences: () => ({}) }));
-vi.mock("./useCanvasZOrderTimelineMirror", () => ({
-  useCanvasZOrderTimelineMirror: () => vi.fn(),
-}));
+
 vi.mock("../editor/TopologyLens", async () => {
   const { createElement } = await import("react");
   return {

package/src/components/nle/PreviewOverlays.tsx

@@ -1,17 +1,18 @@
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 import { CaptionOverlay } from "../../captions/components/CaptionOverlay";
 import { useCaptionStore } from "../../captions/store";
 import { DomEditOverlay } from "../editor/DomEditOverlay";
 import { TopologyLens } from "../editor/TopologyLens";
 import { MotionPathOverlay } from "../editor/MotionPathOverlay";
 import { SnapToolbar } from "../editor/SnapToolbar";
+import { GridOverlay } from "../editor/GridOverlay";
+import { usePreviewReadOnly } from "../editor/previewReadOnlyContext";
 import { useCompositionDimensions } from "../../hooks/useCompositionDimensions";
 import { useStudioPlaybackContext, useStudioShellContext } from "../../contexts/StudioContext";
 import {
   useDomEditActionsContext,
   useDomEditSelectionContext,
 } from "../../contexts/DomEditContext";
-import { readStudioUiPreferences } from "../../utils/studioUiPreferences";
 import { readHfId, type DomEditSelection } from "../editor/domEditing";
 import { buildStableSelector } from "../editor/domEditingDom";
 import { deriveTimelineStoreKey } from "../../player/lib/timelineElementHelpers";
@@ -140,6 +141,8 @@ export function PreviewOverlays({
   const { activeCompPath, previewIframeRef } = useStudioShellContext();
   const { captionEditMode, compositionLoading, isPlaying } = useStudioPlaybackContext();
   const compositionDimensions = useCompositionDimensions(previewIframeRef);
+  const readOnly = usePreviewReadOnly();
+  const previewCaptionEditMode = captionEditMode && !readOnly;
 
   // Caption edit mode is entered automatically when captions are detected;
   // these give the author an explicit way OUT (and back in). Without them the
@@ -179,17 +182,6 @@ export function PreviewOverlays({
   } = useDomEditActionsContext();
   const mirrorZOrderToTimeline = useCanvasZOrderTimelineMirror();
 
-  // fallow-ignore-next-line complexity
-  const [snapPrefs, setSnapPrefs] = useState(() => {
-    const p = readStudioUiPreferences();
-    return {
-      snapEnabled: p.snapEnabled ?? true,
-      gridVisible: p.gridVisible ?? false,
-      gridSpacing: p.gridSpacing ?? 50,
-      snapToGrid: p.snapToGrid ?? false,
-    };
-  });
-
   if (blockPreview) {
     return (
       <>
@@ -216,7 +208,7 @@ export function PreviewOverlays({
     );
   }
 
-  if (captionEditMode) {
+  if (previewCaptionEditMode) {
     return (
       <>
         <TopologyLens iframeRef={previewIframeRef} activeCompositionPath={activeCompPath} />
@@ -263,11 +255,14 @@ export function PreviewOverlays({
   return (
     <>
       <TopologyLens iframeRef={previewIframeRef} activeCompositionPath={activeCompPath} />
+      <GridOverlay />
       <DomEditOverlay
         iframeRef={previewIframeRef}
         activeCompositionPath={activeCompPath}
         hoverSelection={
-          !captionEditMode && !compositionLoading && !isPlaying ? domEditHoverSelection : null
+          !previewCaptionEditMode && !compositionLoading && !isPlaying
+            ? domEditHoverSelection
+            : null
         }
         selection={shouldShowSelectedDomBounds ? domEditSelection : null}
         groupSelections={shouldShowSelectedDomBounds ? domEditGroupSelections : []}
@@ -320,19 +315,19 @@ export function PreviewOverlays({
               }),
           }).catch(() => undefined);
         }}
-        gridVisible={snapPrefs.gridVisible}
-        gridSpacing={snapPrefs.gridSpacing}
         recordingState={recordingState}
         onToggleRecording={onToggleRecording}
         onMarqueeSelect={applyMarqueeSelection}
       />
-      <SnapToolbar onSnapChange={setSnapPrefs} />
-      <MotionPathOverlay
-        iframeRef={previewIframeRef}
-        selection={shouldShowMotionPath ? domEditSelection : null}
-        compositionSize={compositionDimensions}
-        isPlaying={isPlaying}
-      />
+      <SnapToolbar />
+      {!readOnly && (
+        <MotionPathOverlay
+          iframeRef={previewIframeRef}
+          selection={shouldShowMotionPath ? domEditSelection : null}
+          compositionSize={compositionDimensions}
+          isPlaying={isPlaying}
+        />
+      )}
       {gestureOverlay}
       {captionModelPresent && captionDismissed && (
         <button

package/src/components/nle/PreviewOverlaysTestMocks.ts

@@ -0,0 +1,40 @@
+import { vi } from "vitest";
+
+const previewState = vi.hoisted(() => ({ captionEditMode: false }));
+export function getPreviewState() {
+  return previewState;
+}
+export const iframeRef = { current: null as HTMLIFrameElement | null };
+
+vi.mock("../../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({ activeCompPath: "index.html", previewIframeRef: iframeRef }),
+  useStudioPlaybackContext: () => ({
+    captionEditMode: previewState.captionEditMode,
+    compositionLoading: false,
+    isPlaying: false,
+  }),
+}));
+vi.mock("../../captions/store", () => {
+  const state = {
+    model: null,
+    dismissed: false,
+    syncError: null,
+    clearSelection: vi.fn(),
+    setDismissed: vi.fn(),
+    setEditMode: vi.fn(),
+    setSyncError: vi.fn(),
+  };
+  return {
+    useCaptionStore: Object.assign(
+      (selector: (value: typeof state) => unknown) => selector(state),
+      { getState: () => state },
+    ),
+  };
+});
+vi.mock("../../hooks/useCompositionDimensions", () => ({
+  useCompositionDimensions: () => null,
+}));
+vi.mock("../../utils/studioUiPreferences", () => ({ readStudioUiPreferences: () => ({}) }));
+vi.mock("./useCanvasZOrderTimelineMirror", () => ({
+  useCanvasZOrderTimelineMirror: () => vi.fn(),
+}));

package/src/components/nle/PreviewPane.tsx

@@ -7,6 +7,7 @@ import { usePreviewBlockDrop } from "./usePreviewBlockDrop";
 import { useNLEContext } from "./NLEContext";
 import { AssetPreviewOverlay } from "./AssetPreviewOverlay";
 import { PreviewGuides } from "../editor/PreviewGuides";
+import { PreviewOverlayProvider } from "../editor/PreviewOverlayProvider";
 
 function subscribeFullscreen(cb: () => void) {
   document.addEventListener("fullscreenchange", cb);
@@ -60,6 +61,12 @@ export function PreviewPane({
     togglePlay,
     seek,
     onIframeLoad,
+    previewSlots,
+    onShadowIframeLoad,
+    onShadowReadyChange,
+    onShadowError,
+    setShadowIframeNode,
+    resetPreviewSlots,
     compositionStack,
     handleNavigateComposition,
     setCompositionLoading,
@@ -131,6 +138,12 @@ export function PreviewPane({
             projectId={projectId}
             iframeRef={iframeRef}
             onIframeLoad={onIframeLoad}
+            previewSlots={previewSlots}
+            onShadowIframeLoad={onShadowIframeLoad}
+            onShadowReadyChange={onShadowReadyChange}
+            onShadowError={onShadowError}
+            setShadowIframeNode={setShadowIframeNode}
+            resetPreviewSlots={resetPreviewSlots}
             onCompositionLoadingChange={setCompositionLoading}
             portrait={portrait}
             directUrl={directUrl}
@@ -143,8 +156,10 @@ export function PreviewPane({
           )}
           <AssetPreviewOverlay />
         </div>
-        <PreviewGuides iframeRef={iframeRef} />
-        {!isFullscreen && previewOverlay}
+        <PreviewOverlayProvider>
+          <PreviewGuides />
+          {!isFullscreen && previewOverlay}
+        </PreviewOverlayProvider>
       </div>
       {/* Transport row: no own background or border — the controls sit flat on
           the preview panel's surface (CapCut-style). */}

package/src/components/nle/TimelinePane.tsx

@@ -255,7 +255,11 @@ export function TimelinePane({
   );
 
   return (
-    <div className="relative flex h-full flex-col" aria-disabled={timelineDisabled || undefined}>
+    <div
+      className="relative flex h-full flex-col"
+      data-studio-timeline="true"
+      aria-disabled={timelineDisabled || undefined}
+    >
       <div
         className="flex flex-col flex-1 min-h-0 overflow-hidden rounded-lg border border-neutral-800/50 bg-neutral-950"
         onDoubleClick={(e) => {

package/src/components/nle/previewReadOnly.test.tsx

@@ -0,0 +1,129 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getPreviewState, iframeRef } from "./PreviewOverlaysTestMocks";
+import { PreviewOverlays } from "./PreviewOverlays";
+import { usePreviewBlockDrop } from "./usePreviewBlockDrop";
+import { PreviewReadOnlyProvider } from "../editor/previewReadOnlyContext";
+import { TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
+
+const previewState = getPreviewState();
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("../../contexts/DomEditContext", () => ({
+  useDomEditSelectionContext: () => ({
+    domEditHoverSelection: null,
+    domEditSelection: null,
+    domEditGroupSelections: [],
+  }),
+  useDomEditActionsContext: () => ({}),
+}));
+vi.mock("../editor/TopologyLens", () => ({ TopologyLens: () => null }));
+vi.mock("../../captions/components/CaptionOverlay", () => ({
+  CaptionOverlay: () => <i data-testid="caption-overlay" />,
+}));
+vi.mock("../editor/DomEditOverlay", () => ({
+  DomEditOverlay: () => <i data-testid="dom-edit-overlay" />,
+}));
+vi.mock("../editor/MotionPathOverlay", () => ({
+  MotionPathOverlay: () => <i data-testid="motion-path" />,
+}));
+vi.mock("../editor/SnapToolbar", () => ({ SnapToolbar: () => null }));
+vi.mock("../editor/GridOverlay", () => ({ GridOverlay: () => null }));
+
+let root: Root;
+let host: HTMLDivElement;
+
+function mount(node: React.ReactNode, readOnly = false): void {
+  host = document.createElement("div");
+  iframeRef.current = document.createElement("iframe");
+  document.body.append(host, iframeRef.current);
+  root = createRoot(host);
+  act(() =>
+    root.render(<PreviewReadOnlyProvider readOnly={readOnly}>{node}</PreviewReadOnlyProvider>),
+  );
+}
+
+afterEach(() => {
+  act(() => root.unmount());
+  previewState.captionEditMode = false;
+  document.body.replaceChildren();
+});
+
+const overlays = () => (
+  <PreviewOverlays shouldShowMotionPath={true} shouldShowSelectedDomBounds={true} />
+);
+const has = (id: string) => host.querySelector(`[data-testid="${id}"]`) !== null;
+
+describe("PreviewOverlays with the preview read-only", () => {
+  it("control: with the flag off the motion path can be edited", () => {
+    mount(overlays());
+    expect(has("motion-path")).toBe(true);
+  });
+
+  it("does not mount the motion path editor", () => {
+    mount(overlays(), true);
+    expect(has("motion-path")).toBe(false);
+    expect(has("dom-edit-overlay")).toBe(true);
+  });
+
+  it("control: with the flag off caption mode mounts the caption editor", () => {
+    previewState.captionEditMode = true;
+    mount(overlays());
+    expect(has("caption-overlay")).toBe(true);
+  });
+
+  it("does not mount the caption editor, and selection stays on the canvas overlay", () => {
+    previewState.captionEditMode = true;
+    mount(overlays(), true);
+    expect(has("caption-overlay")).toBe(false);
+    expect(has("dom-edit-overlay")).toBe(true);
+  });
+});
+
+describe("usePreviewBlockDrop with the preview read-only", () => {
+  function dropOnPreview(
+    onBlockDrop: (name: string, pos: { left: number; top: number }) => void,
+    readOnly = false,
+  ) {
+    const stage = document.createElement("div");
+    stage.getBoundingClientRect = () => ({ left: 0, top: 0, width: 100, height: 100 }) as DOMRect;
+    let handlers: ReturnType<typeof usePreviewBlockDrop> | null = null;
+    function Probe() {
+      handlers = usePreviewBlockDrop({
+        stageRef: { current: stage },
+        compositionSize: { width: 1000, height: 1000 },
+        onBlockDrop,
+      });
+      return null;
+    }
+    mount(<Probe />, readOnly);
+    const event = {
+      clientX: 50,
+      clientY: 50,
+      preventDefault: vi.fn(),
+      dataTransfer: {
+        types: [TIMELINE_BLOCK_MIME],
+        getData: () => JSON.stringify({ name: "lower-third" }),
+      },
+    };
+    act(() => handlers!.handleDrop(event as never));
+    return event;
+  }
+
+  it("control: with the flag off a dropped block is placed", () => {
+    const onBlockDrop = vi.fn();
+    dropOnPreview(onBlockDrop);
+    expect(onBlockDrop).toHaveBeenCalledWith("lower-third", { left: 500, top: 500 });
+  });
+
+  it("does not place a dropped block", () => {
+    const onBlockDrop = vi.fn();
+    const event = dropOnPreview(onBlockDrop, true);
+    expect(onBlockDrop).not.toHaveBeenCalled();
+    expect(event.preventDefault).not.toHaveBeenCalled();
+  });
+});

package/src/components/nle/useCanvasZOrderTimelineMirror.test.tsx

@@ -24,7 +24,7 @@ import {
 afterEach(() => {
   document.body.innerHTML = "";
   // Wrapped in act: mounted harnesses subscribe to the store via
-  // useTimelineRowElements, so the reset re-renders them.
+  // the store timeline elements, so the reset re-renders them.
   act(() => usePlayerStore.getState().setElements([]));
 });
 

package/src/components/nle/useCanvasZOrderTimelineMirror.ts

@@ -1,6 +1,5 @@
 import { useCallback, useRef } from "react";
 import { usePlayerStore } from "../../player";
-import { useTimelineRowElements } from "../../player/hooks/useTimelineRowElements";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import {
   displayTrackOrder,
@@ -41,10 +40,8 @@ export interface MirrorZOrderInput {
  * commitZMirrorLaneMove) — the shared key is unique per gesture
  * (zReorderCoalesceKey's gesture seq), so the fold stays gesture-scoped.
  *
- * Element source: `useTimelineRowElements()` — the same expanded display
- * set the Timeline renders and the resolver expects (post-normalizeToZones
- * lanes, expanded sub-comp children on their synthetic rows). No new expansion
- * is built here.
+ * Element source: the store's timeline elements, the same set the Timeline
+ * renders and the resolver expects. No alternate row expansion is built here.
  *
  * The mirror persists through the SAME machinery as a timeline lane drag
  * (commitZMirrorLaneMove → persistMoveEdits → onMoveElements, with expanded
@@ -141,7 +138,7 @@ function useMirrorLaneMoveCommit(): (
   coalesceKey: string,
   resolveMove: (element: TimelineElement, elements: TimelineElement[]) => ZMirrorLaneMove,
 ) => Promise<boolean> {
-  const elements = useTimelineRowElements();
+  const elements = usePlayerStore((state) => state.elements);
   const elementsRef = useRef(elements);
   elementsRef.current = elements;
   const { onMoveElements } = useTimelineEditContextOptional();

package/src/components/nle/usePreviewBlockDrop.ts

@@ -1,5 +1,6 @@
 import { useCallback, useRef, useState, type RefObject } from "react";
 import { TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
+import { usePreviewReadOnly } from "../editor/previewReadOnlyContext";
 
 interface UsePreviewBlockDropOptions {
   portrait?: boolean;
@@ -67,8 +68,9 @@ export function usePreviewBlockDrop({
   portrait,
   compositionSize,
   stageRef,
-  onBlockDrop,
+  onBlockDrop: onBlockDropProp,
 }: UsePreviewBlockDropOptions) {
+  const onBlockDrop = usePreviewReadOnly() ? undefined : onBlockDropProp;
   const [isDragOver, setIsDragOver] = useState(false);
   // dragenter/dragleave fire for every internal element boundary; a depth
   // counter keeps the drop indicator steady instead of flickering.