@hyperframes/studio 0.8.54 → 0.8.56

package/src/hooks/gsapEditOutcome.ts

@@ -2,6 +2,27 @@ import { editabilityForProvenance, type GsapAnimation } from "@hyperframes/core/
 
 export type GsapEditBlockReason = "no-selector" | "unroll-required" | "source-uneditable";
 
+/**
+ * Which of the nine situations produced a block. The user-facing `reason` stays
+ * coarse — three messages — but "source-uneditable" alone covers nine distinct
+ * causes, and `edit_blocked` telemetry could not tell them apart. That matters
+ * because the copy ("This animation is computed at runtime") is only literally
+ * true for `provenance-runtime-dynamic`; the others are parser or source-match
+ * limits, where the animation may well be plain authored source.
+ *
+ * Telemetry only. Nothing branches on it.
+ */
+export type GsapEditBlockDetail =
+  | "provenance-runtime-dynamic"
+  | "unresolved-keyframes"
+  | "unresolved-selector"
+  | "geometry-unresolved-source"
+  | "live-position-no-source-tween"
+  | "no-position-tween"
+  | "live-rotation-no-source-tween"
+  | "live-resize-no-source-tween"
+  | "zero-duration-tween";
+
 export type GsapEditOutcome =
   | {
       status: "persisted";
@@ -22,7 +43,7 @@ export type GsapEditOutcome =
        */
       ownsDragOffset?: boolean;
     }
-  | { status: "blocked"; reason: GsapEditBlockReason };
+  | { status: "blocked"; reason: GsapEditBlockReason; detail?: GsapEditBlockDetail };
 
 const COPY: Record<GsapEditBlockReason, string> = {
   "no-selector": "This layer needs a stable selector before Studio can save the edit.",
@@ -32,25 +53,32 @@ const COPY: Record<GsapEditBlockReason, string> = {
 };
 
 export class GsapEditBlockedError extends Error {
-  constructor(readonly reason: GsapEditBlockReason) {
+  constructor(
+    readonly reason: GsapEditBlockReason,
+    readonly detail?: GsapEditBlockDetail,
+  ) {
     super(COPY[reason]);
     this.name = "GsapEditBlockedError";
   }
 }
 
 export function assertGsapEditPersisted(outcome: GsapEditOutcome): void {
-  if (outcome.status === "blocked") throw new GsapEditBlockedError(outcome.reason);
+  if (outcome.status === "blocked") throw new GsapEditBlockedError(outcome.reason, outcome.detail);
 }
 
 function assertGsapAnimationDirectlyEditable(animation: GsapAnimation): void {
   const editability = editabilityForProvenance(animation.provenance);
   if (editability === "unroll") throw new GsapEditBlockedError("unroll-required");
-  if (
-    editability === "source" ||
-    animation.hasUnresolvedKeyframes ||
-    animation.hasUnresolvedSelector
-  ) {
-    throw new GsapEditBlockedError("source-uneditable");
+  // Same message for all three, but they are different problems: only the first
+  // is genuinely a runtime-computed value.
+  if (editability === "source") {
+    throw new GsapEditBlockedError("source-uneditable", "provenance-runtime-dynamic");
+  }
+  if (animation.hasUnresolvedKeyframes) {
+    throw new GsapEditBlockedError("source-uneditable", "unresolved-keyframes");
+  }
+  if (animation.hasUnresolvedSelector) {
+    throw new GsapEditBlockedError("source-uneditable", "unresolved-selector");
   }
 }
 
@@ -84,7 +112,8 @@ export function directEditOutcomeForProperties(
     }
     return { status: "persisted" };
   } catch (error) {
-    if (isGsapEditBlockedError(error)) return { status: "blocked", reason: error.reason };
+    if (isGsapEditBlockedError(error))
+      return { status: "blocked", reason: error.reason, detail: error.detail };
     throw error;
   }
 }

package/src/hooks/gsapResizeIntercept.test.ts

@@ -180,11 +180,15 @@ it("reuses the ownership parse instead of fetching a resolved size group twice",
   );
 });
 
-it("blocks when runtime size motion exists but the authored tween cannot be resolved", async () => {
+function makeBoxSelection(): { el: HTMLElement; selection: DomEditSelection } {
   const el = document.createElement("div");
   el.id = "box";
   document.body.append(el);
-  const selection = { id: "box", selector: "#box", element: el } as DomEditSelection;
+  return { el, selection: { id: "box", selector: "#box", element: el } as DomEditSelection };
+}
+
+it("blocks when runtime size motion exists but the authored tween cannot be resolved", async () => {
+  const { el, selection } = makeBoxSelection();
   const liveSizeTween = {
     targets: () => [el],
     vars: { width: 300, duration: 1 },
@@ -199,7 +203,42 @@ it("blocks when runtime size motion exists but the authored tween cannot be reso
 
   await expect(
     tryGsapResizeIntercept(selection, { width: 344, height: 344 }, [], iframe, commitMutation),
-  ).resolves.toEqual({ status: "blocked", reason: "source-uneditable" });
+  ).resolves.toEqual({
+    status: "blocked",
+    reason: "source-uneditable",
+    detail: "live-resize-no-source-tween",
+  });
+  expect(commitMutation).not.toHaveBeenCalled();
+});
+
+it("blocks a tween with no positive duration instead of committing into it", async () => {
+  const { selection } = makeBoxSelection();
+  // A zero-duration `from` is not an instant hold (those are `set`/`to`), so it
+  // reaches the duration check: a resize has no timeline position to land on.
+  const zeroDurationTween = {
+    id: "#box-size",
+    targetSelector: "#box",
+    propertyGroup: "size",
+    method: "from",
+    position: 0,
+    duration: 0,
+    properties: { width: 150, height: 150 },
+  } as unknown as GsapAnimation;
+  const commitMutation = vi.fn();
+
+  await expect(
+    tryGsapResizeIntercept(
+      selection,
+      { width: 344, height: 344 },
+      [zeroDurationTween],
+      null,
+      commitMutation,
+    ),
+  ).resolves.toEqual({
+    status: "blocked",
+    reason: "source-uneditable",
+    detail: "zero-duration-tween",
+  });
   expect(commitMutation).not.toHaveBeenCalled();
 });
 

package/src/hooks/gsapResizeIntercept.ts

@@ -137,7 +137,12 @@ export async function tryGsapResizeIntercept(
     ? hasNonHoldTweenForElement(iframe, liveSelector, undefined, [...resizeProperties])
     : false;
   if (!anim && hasLiveResizeTween) {
-    return { status: "blocked", reason: "source-uneditable" };
+    // Third twin of the position/rotation cases: a live tween with no source match.
+    return {
+      status: "blocked",
+      reason: "source-uneditable",
+      detail: "live-resize-no-source-tween",
+    };
   }
   logResize("intercept-enter", {
     hasScaleGroup,
@@ -194,7 +199,12 @@ export async function tryGsapResizeIntercept(
   }
 
   const tweenDuration = resolveTweenDuration(anim);
-  if (tweenDuration <= 0) return { status: "blocked", reason: "source-uneditable" };
+  if (tweenDuration <= 0) {
+    // The tween exists in source but has no positive duration, so there is no
+    // timeline position at which a resize could land — a different cause from
+    // the live-tween-without-a-source-match cases above.
+    return { status: "blocked", reason: "source-uneditable", detail: "zero-duration-tween" };
+  }
 
   const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
   const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);

package/src/hooks/gsapRuntimeBridge.test.ts

@@ -94,7 +94,11 @@ describe("tryGsapDragIntercept — stale-parse guard (no resurrection after dele
       vi.fn().mockResolvedValue([]),
     );
 
-    expect(result).toEqual({ status: "blocked", reason: "source-uneditable" });
+    expect(result).toEqual({
+      status: "blocked",
+      reason: "source-uneditable",
+      detail: "live-position-no-source-tween",
+    });
     expect(commitMutation).not.toHaveBeenCalled();
   });
 
@@ -354,7 +358,11 @@ describe("tryGsapRotationIntercept — instant holds", () => {
         fakeIframe("puck-b", [liveRotation]),
         commitMutation,
       ),
-    ).resolves.toEqual({ status: "blocked", reason: "source-uneditable" });
+    ).resolves.toEqual({
+      status: "blocked",
+      reason: "source-uneditable",
+      detail: "live-rotation-no-source-tween",
+    });
     expect(commitMutation).not.toHaveBeenCalled();
   });
 

package/src/hooks/gsapRuntimeBridge.ts

@@ -156,7 +156,13 @@ async function preflightGsapDragIntercept(
   const hasLivePosition = hasNonHoldTweenForElement(iframe, selector, undefined, POSITION_CHANNELS);
 
   if (hasLivePosition && !posAnim) {
-    return { status: "blocked", reason: "source-uneditable" };
+    // GSAP is visibly moving this element but the parser found no position
+    // tween for it — a source-match gap, not necessarily computed source.
+    return {
+      status: "blocked",
+      reason: "source-uneditable",
+      detail: "live-position-no-source-tween",
+    };
   }
   if (!posAnim && !writeTargetSelector(selection)) {
     return { status: "blocked", reason: "no-selector" };
@@ -268,7 +274,7 @@ export async function tryGsapDragIntercept(
   }
 
   if (!posAnim) {
-    return { status: "blocked", reason: "source-uneditable" };
+    return { status: "blocked", reason: "source-uneditable", detail: "no-position-tween" };
   }
 
   // Verify the anim ID is still valid in the current file. The React-state
@@ -353,7 +359,12 @@ export async function tryGsapRotationIntercept(
     ? hasNonHoldTweenForElement(iframe, liveSelector, undefined, ROTATION_CHANNELS)
     : false;
   if (!anim && hasLiveRotationTween) {
-    return { status: "blocked", reason: "source-uneditable" };
+    // Rotation twin of the position case above: live tween, no source match.
+    return {
+      status: "blocked",
+      reason: "source-uneditable",
+      detail: "live-rotation-no-source-tween",
+    };
   }
 
   // `angle` is the ABSOLUTE target rotation resolved by the gesture (gsap base +

package/src/hooks/newTweenTargetHooks.test.tsx

@@ -196,6 +196,7 @@ function renderGestureCommit(
       previewIframeRef: { current: document.createElement("iframe") },
       showToast: vi.fn(),
       isGestureRecordingRef: { current: false },
+      readOnlyPreview: false,
     });
     toggle = handleToggleRecording;
     return null;

package/src/hooks/timelineAudioGroupCreate.ts

@@ -8,7 +8,6 @@
 
 import { useCallback } from "react";
 import { usePlayerStore, type TimelineElement } from "../player";
-import { useTimelineRowElements } from "../player/hooks/useTimelineRowElements";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
 import { HF_AUDIO_GROUP_ATTR, HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
 import { runtimeAudioId } from "../player/lib/timelineElementHelpers";
@@ -286,7 +285,7 @@ export function useAudioGroupCarveAssignment({
   groupId: string,
   groupLabel?: string,
 ) => Promise<void> {
-  const expandedElements = useTimelineRowElements();
+  const timelineElements = usePlayerStore((state) => state.elements);
   return useCallback(
     async (clipIds: readonly string[], groupId: string, groupLabel?: string) => {
       if (isRecordingRef?.current) {
@@ -299,7 +298,7 @@ export function useAudioGroupCarveAssignment({
       // timeline's group-pointer button) name clips the way the document does,
       // because that is the only space `resolveAudioGroups` reads back.
       const wanted = new Set(clipIds);
-      const elements = expandedElements.filter((item) => {
+      const elements = timelineElements.filter((item) => {
         const domId = runtimeAudioId(item);
         return domId !== null && wanted.has(domId);
       });
@@ -340,7 +339,7 @@ export function useAudioGroupCarveAssignment({
     },
     [
       activeCompPath,
-      expandedElements,
+      timelineElements,
       previewIframeRef,
       writeProjectFile,
       recordEdit,

package/src/hooks/timelineTrackVisibility.ts

@@ -1,7 +1,6 @@
 import { useCallback } from "react";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { reseekPreviewAtTime } from "../player/hooks/timelineSyncHydration";
-import { useTimelineRowElements } from "../player/hooks/useTimelineRowElements";
 import { applySoftReloadFinalization } from "../utils/gsapSoftReload";
 import {
   timelineTrackOrder,
@@ -295,7 +294,7 @@ export function useTimelineTrackVisibilityEditing({
   // virtual sub-comp children carry their own (display.track + idx) track numbers,
   // so filtering the raw store list by a virtual track number would hide the wrong
   // outer-scene sibling sharing that index.
-  const expandedElements = useTimelineRowElements();
+  const timelineElements = usePlayerStore((state) => state.elements);
   return useCallback(
     async (track: number, hidden: boolean, displayNumber?: number | null) => {
       if (isRecordingRef?.current) {
@@ -308,7 +307,7 @@ export function useTimelineTrackVisibilityEditing({
         await toggleTimelineTrackHidden({
           projectId: pid,
           activeCompPath,
-          timelineElements: expandedElements,
+          timelineElements,
           track,
           hidden,
           displayNumber,
@@ -327,7 +326,7 @@ export function useTimelineTrackVisibilityEditing({
     },
     [
       activeCompPath,
-      expandedElements,
+      timelineElements,
       previewIframeRef,
       writeProjectFile,
       recordEdit,
@@ -354,7 +353,7 @@ export function useTimelineElementVisibilityEditing({
   elementKey: string | readonly string[],
   hidden: boolean,
 ) => Promise<void> {
-  const expandedElements = useTimelineRowElements();
+  const timelineElements = usePlayerStore((state) => state.elements);
   return useCallback(
     async (elementKey: string | readonly string[], hidden: boolean) => {
       if (isRecordingRef?.current) {
@@ -364,7 +363,7 @@ export function useTimelineElementVisibilityEditing({
       const pid = projectIdRef.current;
       if (!pid) return;
       const keys = typeof elementKey === "string" ? [elementKey] : elementKey;
-      if (!expandedElements.some((item) => keys.includes(item.key ?? item.id))) {
+      if (!timelineElements.some((item) => keys.includes(item.key ?? item.id))) {
         showToast("This element is inside a sub-composition and has no timeline row to hide.");
         return;
       }
@@ -372,7 +371,7 @@ export function useTimelineElementVisibilityEditing({
         await toggleTimelineElementHidden({
           projectId: pid,
           activeCompPath,
-          timelineElements: expandedElements,
+          timelineElements,
           elementKey,
           hidden,
           previewIframe: previewIframeRef.current,
@@ -390,7 +389,7 @@ export function useTimelineElementVisibilityEditing({
     },
     [
       activeCompPath,
-      expandedElements,
+      timelineElements,
       previewIframeRef,
       writeProjectFile,
       recordEdit,

package/src/hooks/useAppHotkeys.test.ts

@@ -1,7 +1,8 @@
 // @vitest-environment happy-dom
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { dispatchModifierKey, dispatchPlainKey } from "./appHotkeysDispatch";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { dispatchModifierKey, dispatchPlainKey, type HotkeyCallbacks } from "./appHotkeysDispatch";
 import { usePlayerStore } from "../player/store/playerStore";
+import type { DomEditSelection } from "../components/editor/domEditing";
 import { clearAutomationClipboard, copyRange } from "../player/components/automationClipboard";
 import { VOLUME_RANGE } from "@hyperframes/core/audio-automation";
 import type { TimelineElement } from "../player/store/timelineElement";
@@ -19,7 +20,7 @@ const bgmElement: TimelineElement = {
 /** Every callback dispatchPlainKey can reach, so a test can assert which one
  *  a key resolved to. Unannotated on purpose: the parameter type is not
  *  exported, and structural inference checks it at the call site. */
-function callbacks() {
+function callbacks(overrides: Partial<HotkeyCallbacks> = {}) {
   return {
     handleTimelineElementDelete: vi.fn(async () => {}),
     handleTimelineElementsDelete: vi.fn(async () => {}),
@@ -30,10 +31,15 @@ function callbacks() {
     handleCopy: vi.fn(() => false),
     handlePaste: vi.fn(async () => {}),
     handleCut: vi.fn(async () => false),
+    handleDuplicate: vi.fn(async () => false),
+    onGroupSelection: vi.fn(),
+    onUngroupSelection: vi.fn(),
     onResetKeyframes: vi.fn(() => true),
     onDeleteSelectedKeyframes: vi.fn(),
     showToast: vi.fn(),
     domEditSelectionRef: { current: null },
+    readOnlyPreview: false,
+    ...overrides,
   };
 }
 
@@ -298,3 +304,65 @@ describe('dispatchPlainKey — "A" returns to select while the razor is armed',
     expect(e.defaultPrevented).toBe(false);
   });
 });
+
+describe("hotkeys with the preview read-only", () => {
+  beforeEach(() => {
+    usePlayerStore.setState({ elements: [bgmElement], selectedElementId: null });
+  });
+
+  it("does not delete the selected element on Delete", () => {
+    const cb = callbacks({ readOnlyPreview: true });
+    cb.domEditSelectionRef.current = { id: "card" } as DomEditSelection;
+    dispatchPlainKey(press("Delete"), "delete", cb);
+    expect(cb.handleDomEditElementDelete).not.toHaveBeenCalled();
+    expect(cb.handleTimelineElementsDelete).not.toHaveBeenCalled();
+  });
+
+  it("does not split on s", () => {
+    usePlayerStore.setState({
+      currentTime: 3,
+      elements: [{ ...bgmElement, hfId: "hf-bgm" }],
+      selectedElementId: "bgm",
+    });
+    const cb = callbacks({ readOnlyPreview: true });
+    dispatchPlainKey(press("s"), "s", cb);
+    expect(cb.handleTimelineElementSplit).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    ["x", "handleCut"],
+    ["d", "handleDuplicate"],
+    ["v", "handlePaste"],
+    ["g", "onGroupSelection"],
+  ] as const)("does not run %s", (key, callback) => {
+    const cb = callbacks({ readOnlyPreview: true });
+    cb.domEditSelectionRef.current = { id: "card" } as DomEditSelection;
+    dispatchModifierKey(chord(key), key, cb);
+    expect(cb[callback]).not.toHaveBeenCalled();
+  });
+
+  it("still undoes, because history covers timeline edits", () => {
+    const cb = callbacks({ readOnlyPreview: true });
+    dispatchModifierKey(chord("z"), "z", cb);
+    expect(cb.handleUndo).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps timeline paste when the mirrored preview selection is not the owner", () => {
+    usePlayerStore.setState({ selectedElementId: "bgm" });
+    const cb = callbacks({ readOnlyPreview: true });
+    cb.domEditSelectionRef.current = { id: "card" } as DomEditSelection;
+    const event = chord("v");
+    const timeline = document.createElement("div");
+    timeline.dataset.studioTimeline = "true";
+    Object.defineProperty(event, "target", { value: timeline });
+    dispatchModifierKey(event, "v", cb);
+    expect(cb.handlePaste).toHaveBeenCalledTimes(1);
+  });
+
+  it("control: with the flag off Delete removes the selected element", () => {
+    const cb = callbacks();
+    cb.domEditSelectionRef.current = { id: "card" } as DomEditSelection;
+    dispatchPlainKey(press("Delete"), "delete", cb);
+    expect(cb.handleDomEditElementDelete).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/useAppHotkeys.textEditing.test.tsx

@@ -93,6 +93,7 @@ function Harness() {
     handleDuplicate: vi.fn(async () => false),
     onResetKeyframes: vi.fn(() => false),
     onDeleteSelectedKeyframes: keyframeDelete,
+    readOnlyPreview: false,
   });
 
   return (

package/src/hooks/useAppHotkeys.ts

@@ -101,6 +101,8 @@ interface UseAppHotkeysParams {
   onUngroupSelection?: () => void;
   /** Active composition path — used to decide whether undo/redo must resync the SDK session. */
   activeCompPath?: string | null;
+  /** Clicks still select and report; the preview cannot move, edit or delete anything. */
+  readOnlyPreview: boolean;
   /**
    * Force-reload the SDK session after undo/redo reverts the active comp file,
    * bypassing the self-write suppress window. Without this, the suppress window
@@ -135,6 +137,7 @@ export function useAppHotkeys({
   onUngroupSelection,
   activeCompPath,
   forceReloadSdkSession,
+  readOnlyPreview,
 }: UseAppHotkeysParams) {
   const previewHistoryCleanupRef = useRef<(() => void) | null>(null);
 
@@ -203,6 +206,7 @@ export function useAppHotkeys({
     onUngroupSelection,
     domEditSelectionRef,
     showToast,
+    readOnlyPreview,
   };
 
   // ── Keydown dispatch ──

package/src/hooks/useDomEditCommits.test.tsx

@@ -230,6 +230,7 @@ function renderDomEditCommits(
       refreshDomEditSelectionFromPreview: vi.fn(),
       buildDomSelectionFromTarget: vi.fn(async () => null),
       onTrySdkPersist: options.onTrySdkPersist,
+      readOnlyPreview: false,
     });
     return null;
   }

package/src/hooks/useDomEditCommits.ts

@@ -89,6 +89,7 @@ export interface UseDomEditCommitsParams {
   ) => Promise<CutoverResult>;
   /** Resolver-shadow tripwire for z-index reorder targets (telemetry-only, decoupled from cutover). */
   onReorderShadow?: (targets: string[]) => void;
+  readOnlyPreview: boolean;
 }
 
 export function useDomEditCommits({
@@ -112,6 +113,7 @@ export function useDomEditCommits({
   onTrySdkPersist,
   onTrySdkDelete,
   onReorderShadow,
+  readOnlyPreview,
 }: UseDomEditCommitsParams) {
   const resolveImportedFontAsset = useCallback(
     (fontFamilyValue: string): ImportedFontAsset | null => {
@@ -452,6 +454,7 @@ export function useDomEditCommits({
     previewIframeRef,
     showToast,
     commitPositionPatchToHtml,
+    readOnlyPreview,
   });
 
   // ── Element lifecycle (delete, z-index reorder) ──

package/src/hooks/useDomEditSession.test.tsx

@@ -99,6 +99,7 @@ function createSessionParams(
     reloadPreview: vi.fn(),
     setRefreshKey: vi.fn(),
     handleTimelineElementsDelete: vi.fn(),
+    readOnlyPreview: false,
     ...overrides,
   };
 }

package/src/hooks/useDomEditSession.ts

@@ -58,6 +58,7 @@ export interface UseDomEditSessionParams extends DomEditTimelineParams {
   /** The timeline context menu's delete op — a canvas selection that IS a
    *  timeline row hands off here instead of the REST remove-elements path. */
   handleTimelineElementsDelete: (elements: TimelineElement[]) => Promise<void>;
+  readOnlyPreview: boolean;
 }
 
 export function useDomEditSession({
@@ -98,8 +99,10 @@ export function useDomEditSession({
   publishSdkSession,
   forceReloadSdkSession,
   handleTimelineElementsDelete,
+  readOnlyPreview,
 }: UseDomEditSessionParams) {
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
+  const previewCaptionEditMode = captionEditMode && !readOnlyPreview;
   void _setRefreshKey;
   const {
     domEditSelection,
@@ -125,7 +128,7 @@ export function useDomEditSession({
     activeCompPath,
     isMasterView,
     compIdToSrc,
-    captionEditMode,
+    captionEditMode: previewCaptionEditMode,
     previewIframeRef,
     timelineElements,
     getTimelineSelectionSet,
@@ -247,6 +250,7 @@ export function useDomEditSession({
     refreshDomEditSelectionFromPreview,
     buildDomSelectionFromTarget,
     forceReloadSdkSession,
+    readOnlyPreview,
     onTrySdkPersist: sdkSession
       ? (selection, operations, originalContent, targetPath, options) => {
           // Decoupled tripwire, runs regardless of the cutover flag. originalContent lets
@@ -405,7 +409,6 @@ export function useDomEditSession({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
   } = useDomEditWiring({
-    // fallow-ignore-next-line code-duplication
     projectId,
     activeCompPath,
     domEditSelection,
@@ -414,7 +417,7 @@ export function useDomEditSession({
     refreshDomEditGroupSelectionsFromPreview,
     previewIframeRef,
     previewIframe,
-    captionEditMode,
+    captionEditMode: previewCaptionEditMode,
     refreshKey,
     gsapCacheVersion,
     bumpGsapCache,
@@ -451,7 +454,7 @@ export function useDomEditSession({
     handleBlockedDomMove,
     handleDomManualDragStart,
   } = usePreviewInteraction({
-    captionEditMode,
+    captionEditMode: previewCaptionEditMode,
     compositionLoading,
     previewIframeRef,
     showToast,