@hyperframes/studio 0.8.82 → 0.8.83

package/src/components/editor/useFxCarveNodes.ts

@@ -23,6 +23,7 @@ import {
 } from "@hyperframes/core/audio-carve";
 import { fxAutomationTarget, type HfAutomationLane } from "@hyperframes/core/audio-automation";
 import { clipStart } from "./propertyPanelAudioFxGroupUtils.js";
+import { clipAudioOnItsClock, type ClipClock } from "./clipAudioClock.js";
 
 /** Decode rate every carve measurement shares — see `measureCarve`. */
 const DECODE_SAMPLE_RATE = 48000;
@@ -60,6 +61,13 @@ export function mintCarveNodes(
   };
 }
 
+/** A clip to decode, where it starts on the timeline, and how it plays its file. */
+export interface CarveClip {
+  src: string;
+  start: string | null | undefined;
+  clock: ClipClock;
+}
+
 /**
  * Decode every voice, mix them onto the bed's own clock, and measure the
  * bands (and, if the profile calls for it, the ducking envelope) from that
@@ -68,10 +76,9 @@ export function mintCarveNodes(
  */
 export async function measureCarve(
   doc: Document,
-  voices: { src: string; start: string | null }[],
+  voices: CarveClip[],
   strength: number,
-  bedStartAttr: string | null | undefined,
-  bedSrc: string | null | undefined,
+  bed: Omit<CarveClip, "src"> & { src: string | null | undefined },
 ): Promise<{
   bands: ReturnType<typeof analyseCarveBands>;
   carved: HfAudioFxChain;
@@ -86,11 +93,15 @@ export async function measureCarve(
     (window as unknown as { webkitOfflineAudioContext?: typeof OfflineAudioContext })
       .webkitOfflineAudioContext;
   if (!Ctor) return null;
-  const decode = async (relative: string): Promise<AudioBuffer> => {
+  // Each clip as it plays: trimmed to its in-point and duration, and at its own speed.
+  const decode = async (relative: string, clock: ClipClock): Promise<Float32Array> => {
     const res = await fetch(new URL(relative, doc.baseURI).href);
-    return new Ctor(1, 1, DECODE_SAMPLE_RATE).decodeAudioData(await res.arrayBuffer());
+    const buffer = await new Ctor(1, 1, DECODE_SAMPLE_RATE).decodeAudioData(
+      await res.arrayBuffer(),
+    );
+    return clipAudioOnItsClock(buffer.getChannelData(0), DECODE_SAMPLE_RATE, clock);
   };
-  const bedStart = clipStart(bedStartAttr);
+  const bedStart = clipStart(bed.start);
   // Every voice, summed onto the bed's own clock. One question — where and
   // when is speech masking this bed — with one answer, even when the answer
   // comes from three people talking at different times. Doing this before the
@@ -98,23 +109,24 @@ export async function measureCarve(
   // the chain is fixed, so there is no per-voice filter to switch between.
   const decoded = await Promise.all(
     voices.map(async (voice) => ({
-      samples: (await decode(voice.src)).getChannelData(0),
+      samples: await decode(voice.src, voice.clock),
       offsetSeconds: clipStart(voice.start) - bedStart,
     })),
   );
-  const voiceMix = mixCarveSources(decoded, DECODE_SAMPLE_RATE);
-  if (voiceMix.length === 0) return null;
+  const mixed = mixCarveSources(decoded, DECODE_SAMPLE_RATE);
+  if (mixed.length === 0) return null;
   // Strength is what the author set; these are the numbers it means.
   const profile = carveProfile(strength);
-  // The bed as well as the voice, when the carve is asked to match levels:
-  // "how far over the voice is this bed" cannot be answered by listening to
-  // one of them.
-  const bedBuffer = profile.duckDb > 0 && bedSrc ? await decode(bedSrc).catch(() => null) : null;
+  // The bed as it plays: its length bounds the speech worth carving, and the duck
+  // compares against it ("how far over the voice is this bed" needs both).
+  const bedSamples = bed.src ? await decode(bed.src, bed.clock).catch(() => null) : null;
+  // Speech after the bed stops has no bed to carve.
+  const voiceMix = bedSamples ? mixed.subarray(0, bedSamples.length) : mixed;
   const bands = analyseCarveBands(voiceMix, DECODE_SAMPLE_RATE, profile);
   // The level half of the carve, measured against the speech it has to sit
   // under. No offset to apply: the mix is already on the bed's clock.
-  const duck = bedBuffer
-    ? analyseCarveDuck(voiceMix, bedBuffer.getChannelData(0), DECODE_SAMPLE_RATE, profile, 0)
+  const duck = bedSamples
+    ? analyseCarveDuck(voiceMix, bedSamples, DECODE_SAMPLE_RATE, profile, 0)
     : [];
   return { bands, carved: carveBandsToChain(bands), duck, voiceMix };
 }

package/src/components/editor/useFxLevelling.ts

@@ -15,13 +15,7 @@ import {
 } from "@hyperframes/core/audio-fx";
 import { levellingResult, removeLevelling } from "@hyperframes/core/audio-leveller";
 import type { HfAutomation, HfAutomationPoint } from "@hyperframes/core/audio-automation";
-import {
-  resolveRateSpec,
-  sourceTimeAt,
-  timeAtSourceTime,
-  type RateSpec,
-} from "@hyperframes/core/speed-ramp";
-import { readPlaybackRate } from "@hyperframes/parsers/media-duration";
+import { timeAtSourceTime } from "@hyperframes/core/speed-ramp";
 import {
   automationAttrValue,
   HF_AUDIO_AUTOMATION_ATTR,
@@ -30,7 +24,7 @@ import {
 } from "./propertyPanelAutomation";
 import { trackLeveller } from "./audioFxTelemetry.js";
 import type { DomEditSelection } from "./domEditingTypes";
-import { readClipInPoint } from "./propertyPanelHelpers";
+import { clipSourceWindow, readClipClock } from "./clipAudioClock.js";
 import { useAuditionTransport } from "./useAuditionTransport.js";
 
 /**
@@ -39,11 +33,6 @@ import { useAuditionTransport } from "./useAuditionTransport.js";
  */
 const DECODE_SAMPLE_RATE = 48000;
 
-/** A parsed attribute, kept only when it is a usable positive number. */
-function positiveFinite(n: number): number | null {
-  return Number.isFinite(n) && n > 0 ? n : null;
-}
-
 export function useFxLevelling(
   element: DomEditSelection,
   chain: HfAudioFxChain,
@@ -83,42 +72,17 @@ export function useFxLevelling(
     return next;
   };
 
-  /**
-   * The part of the decoded file this clip actually plays.
-   *
-   * A lane's `t` is seconds from the start of the CLIP, but the decode is the
-   * whole file from its first sample — so measuring a trimmed clip produced an
-   * envelope offset by the trim, and every correction landed early by exactly the
-   * in-point. Slicing here is what puts the two clocks back on the same
-   * zero.
-   */
-  const clipWindow = (audio: { samples: Float32Array; sampleRate: number }, rate: RateSpec) => {
-    const { mediaStart } = readClipInPoint(element.dataAttributes);
-    const duration = positiveFinite(Number(element.dataAttributes?.["duration"] ?? Number.NaN));
-    const from = mediaStart
-      ? Math.min(audio.samples.length, Math.floor(mediaStart * audio.sampleRate))
-      : 0;
-    const to = duration
-      ? Math.min(
-          audio.samples.length,
-          from + Math.ceil(sourceTimeAt(rate, duration) * audio.sampleRate),
-        )
-      : audio.samples.length;
-    return from === 0 && to === audio.samples.length
-      ? audio.samples
-      : audio.samples.subarray(from, to);
-  };
-
   /** The levelled chain and its lane, with the lane moved from the source's clock onto the clip's. */
   const measureLevelling = (audio: { samples: Float32Array; sampleRate: number }) => {
-    const attr = (name: string) => element.dataAttributes?.[name.slice(5)];
-    const rate = resolveRateSpec(attr("data-automation"), readPlaybackRate(attr));
-    const result = levellingResult(chain, clipWindow(audio, rate), audio.sampleRate);
+    // Measured on the part of the file the clip plays, so lane times map from that window's zero.
+    const clock = readClipClock((name) => element.dataAttributes?.[name.slice(5)]);
+    const played = clipSourceWindow(audio.samples, audio.sampleRate, clock);
+    const result = levellingResult(chain, played, audio.sampleRate);
     if (!result) return null;
     const lane = result.automation.lanes[0];
     const toClipTime = (point: HfAutomationPoint) => ({
       ...point,
-      t: Number(timeAtSourceTime(rate, point.t).toFixed(3)),
+      t: Number(timeAtSourceTime(clock.rate, point.t).toFixed(3)),
     });
     return { chain: result.chain, lane: lane && { ...lane, points: lane.points.map(toClipTime) } };
   };

package/src/components/editor/useInlineTextEditing.tsx

@@ -1,4 +1,4 @@
-import { useRef, type ReactNode, type RefObject } from "react";
+import { useEffect, useRef, type ReactNode, type RefObject } from "react";
 import { InlineTextToolbar } from "./InlineTextToolbar";
 import { useDomEditActionsContextOptional } from "../../contexts/DomEditContext";
 import { useInlineTextEdit } from "../../hooks/useInlineTextEdit";
@@ -12,6 +12,8 @@ import {
 } from "./domEditInlineText";
 import type { DomEditSelection } from "./domEditingTypes";
 
+type KeyChord = Pick<KeyboardEvent, "key" | "shiftKey" | "ctrlKey" | "metaKey" | "altKey">;
+
 /**
  * The canvas' side of editing text where it sits.
  *
@@ -23,18 +25,15 @@ import type { DomEditSelection } from "./domEditingTypes";
  * props, the same way the agent surfaces in that overlay read it, and it is
  * absent in standalone player mounts, which have no project to edit.
  */
-export function useInlineTextEditing(selectionRef: RefObject<DomEditSelection | null>): {
+export function useInlineTextEditing(
+  selectionRef: RefObject<DomEditSelection | null>,
+  { enterFromWindow = false }: { enterFromWindow?: boolean } = {},
+): {
   editing: boolean;
   /** Open an edit when this press pairs with the last one. */
   startFromPress: (event: { clientX: number; clientY: number }) => boolean;
   /** Handle a key on the canvas. Returns true when it opened an edit. */
-  handleKeyDown: (event: {
-    key: string;
-    shiftKey: boolean;
-    ctrlKey: boolean;
-    metaKey: boolean;
-    altKey: boolean;
-  }) => boolean;
+  handleKeyDown: (event: KeyChord) => boolean;
   /**
    * The styling controls for the current selection, for the caller to render.
    *
@@ -84,6 +83,32 @@ export function useInlineTextEditing(selectionRef: RefObject<DomEditSelection |
     return { x: (event.clientX - box.left) / scale, y: (event.clientY - box.top) / scale };
   };
 
+  // Enter opens the selected element's text, the way every design tool does,
+  // and is the dependable way in: a double press has to survive the canvas'
+  // gesture machinery, while this is one key on a selection that has settled.
+  const handleKeyDown = (event: KeyChord) => {
+    if (event.key !== "Enter" || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey)
+      return false;
+    const target = selectionRef.current;
+    if (inlineText.session || !target || !canEditTextInline(target)) return false;
+    return inlineText.start(target.element);
+  };
+  const handleKeyDownRef = useRef(handleKeyDown);
+  handleKeyDownRef.current = handleKeyDown;
+  // A host-mode canvas takes no presses of its own, so it is rarely focused;
+  // with nothing focused, Enter comes via the window.
+  useEffect(() => {
+    if (!enterFromWindow) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      const { body, documentElement } = window.document;
+      if (event.defaultPrevented || (event.target !== body && event.target !== documentElement))
+        return;
+      if (handleKeyDownRef.current(event)) event.preventDefault();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [enterFromWindow]);
+
   return {
     editing: inlineText.session !== null,
     toolbar: (
@@ -92,16 +117,7 @@ export function useInlineTextEditing(selectionRef: RefObject<DomEditSelection |
         iframe={actions?.previewIframeRef?.current ?? null}
       />
     ),
-    // Enter opens the selected element's text, the way every design tool does,
-    // and is the dependable way in: a double press has to survive the canvas'
-    // gesture machinery, while this is one key on a selection that has settled.
-    handleKeyDown: (event) => {
-      if (event.key !== "Enter" || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey)
-        return false;
-      const target = selectionRef.current;
-      if (inlineText.session || !target || !canEditTextInline(target)) return false;
-      return inlineText.start(target.element);
-    },
+    handleKeyDown,
     startFromPress: (event) => {
       if (inlineText.session) return false;
       const element = elementUnderPress(event);

package/src/components/feedback/projectProvenance.ts

@@ -16,6 +16,7 @@ import { buildProjectApiPath } from "../../utils/projectRouting";
 // ---------------------------------------------------------------------------
 
 import type { FeedbackContext } from "./feedbackTrigger";
+import { isMediaFile } from "../../utils/mediaTypes";
 
 /** Written by `hyperframes init`; absent in a hand-made or copied project. */
 const CONFIG_FILE = "hyperframes.json";
@@ -23,12 +24,10 @@ const CONFIG_FILE = "hyperframes.json";
 /** Matches the CLI's own slug gate, so a hand-edited value cannot leak text. */
 const SKILL_SLUG = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
 
-const MEDIA_EXTENSIONS = /\.(mp4|mov|webm|m4v|mp3|wav|m4a|aac|ogg|png|jpe?g|gif|webp|svg|avif)$/i;
-
 let snapshot: FeedbackContext = {};
 
 function countMedia(files: string[]): number {
-  return files.filter((f) => MEDIA_EXTENSIONS.test(f)).length;
+  return files.filter(isMediaFile).length;
 }
 
 /**

package/src/components/nle/PreviewOverlays.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { CaptionOverlay } from "../../captions/components/CaptionOverlay";
 import { useCaptionStore } from "../../captions/store";
-import { DomEditOverlay } from "../editor/DomEditOverlay";
+import { ConnectedDomEditOverlay } from "../editor/ConnectedDomEditOverlay";
 import { TopologyLens } from "../editor/TopologyLens";
 import { MotionPathOverlay } from "../editor/MotionPathOverlay";
 import { SnapToolbar } from "../editor/SnapToolbar";
@@ -9,16 +9,7 @@ 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 { readHfId, type DomEditSelection } from "../editor/domEditing";
-import { buildStableSelector } from "../editor/domEditingDom";
-import { deriveTimelineStoreKey } from "../../player/lib/timelineElementHelpers";
-import { zReorderCoalesceKey } from "../../hooks/useElementLifecycleOps";
-import { useCanvasZOrderTimelineMirror } from "./useCanvasZOrderTimelineMirror";
-import { runZLaneGesture } from "./zLaneGesture";
+import { useDomEditSelectionContext } from "../../contexts/DomEditContext";
 import type { BlockPreviewInfo } from "../sidebar/BlocksTab";
 import type { GestureRecordingState } from "../editor/GestureRecordControl";
 import type { ReactNode } from "react";
@@ -33,109 +24,12 @@ export interface PreviewOverlaysProps {
   gestureOverlay?: ReactNode;
 }
 
-type ZIndexReorderEntry = {
-  element: HTMLElement;
-  zIndex: number;
-  id?: string;
-  selector?: string;
-  selectorIndex?: number;
-  sourceFile: string;
-  /** Timeline store key — lets the commit update the store zIndex synchronously. */
-  key?: string;
-};
-
-/** Can this element be robustly re-targeted for a persisted z change? */
-function canTargetZIndexElement(
-  element: HTMLElement,
-  id: string | undefined,
-  selector: string | undefined,
-): boolean {
-  return Boolean(id || selector || readHfId(element));
-}
-
-/** The selected element carries its full selection identity. */
-function selectedZIndexEntry(sel: DomEditSelection, zIndex: number): ZIndexReorderEntry {
-  return {
-    element: sel.element,
-    zIndex,
-    id: sel.id ?? undefined,
-    selector: sel.selector,
-    selectorIndex: sel.selectorIndex,
-    sourceFile: sel.sourceFile,
-    key: deriveTimelineStoreKey({
-      domId: sel.id ?? undefined,
-      selector: sel.selector,
-      selectorIndex: sel.selectorIndex,
-      sourceFile: sel.sourceFile,
-    }),
-  };
-}
-
-/**
- * Sibling elements are raw iframe DOM nodes with no selection object: derive a
- * PatchTarget from the node itself (siblings live in the same document, so they
- * share the selection's sourceFile). Null when it cannot be robustly targeted
- * (no id and no selector) — its z stays live-only.
- */
-function siblingZIndexEntry(
-  element: HTMLElement,
-  zIndex: number,
-  sourceFile: string,
-): ZIndexReorderEntry | null {
-  const id = element.id || undefined;
-  const selector = buildStableSelector(element);
-  if (!canTargetZIndexElement(element, id, selector)) return null;
-  return {
-    element,
-    zIndex,
-    id,
-    selector,
-    selectorIndex: undefined,
-    sourceFile,
-    key: deriveTimelineStoreKey({ domId: id, selector, sourceFile }),
-  };
-}
-
-/** Short human-readable label for a dropped sibling, for the console warning below. */
-function describeZIndexElement(element: HTMLElement): string {
-  if (element.id) return `#${element.id}`;
-  const firstClass = element.classList.item(0);
-  return firstClass
-    ? `${element.tagName.toLowerCase()}.${firstClass}`
-    : element.tagName.toLowerCase();
-}
-
-// Resolve z-index patches into commit entries; a sibling with no stable
-// id/selector can't be written to source, so it is returned as `dropped` for
-// the revert-on-reload warning (and a live-only style write, so the resolved
-// stacking order still renders coherently). Exported so tests can drive the
-// menu → commit path through the same wiring the app uses.
-export function resolveZIndexEntries(
-  sel: DomEditSelection,
-  patches: ReadonlyArray<{ element: HTMLElement; zIndex: number }>,
-): { entries: ZIndexReorderEntry[]; dropped: Array<{ element: HTMLElement; zIndex: number }> } {
-  const entries: ZIndexReorderEntry[] = [];
-  const dropped: Array<{ element: HTMLElement; zIndex: number }> = [];
-  for (const patch of patches) {
-    if (patch.element === sel.element) {
-      entries.push(selectedZIndexEntry(sel, patch.zIndex));
-      continue;
-    }
-    const entry = siblingZIndexEntry(patch.element, patch.zIndex, sel.sourceFile);
-    if (entry) entries.push(entry);
-    else dropped.push(patch);
-  }
-  return { entries, dropped };
-}
-
 // fallow-ignore-next-line complexity
 export function PreviewOverlays({
   shouldShowMotionPath,
   shouldShowSelectedDomBounds,
   blockPreview,
   isGestureRecording,
-  recordingState,
-  onToggleRecording,
   gestureOverlay,
 }: PreviewOverlaysProps) {
   const { activeCompPath, previewIframeRef } = useStudioShellContext();
@@ -162,25 +56,7 @@ export function PreviewOverlays({
     store.setEditMode(true);
   }, []);
 
-  const { domEditHoverSelection, domEditSelection, domEditGroupSelections } =
-    useDomEditSelectionContext();
-  const {
-    handlePreviewCanvasMouseDown,
-    handlePreviewCanvasPointerMove,
-    handlePreviewCanvasPointerLeave,
-    applyDomSelection,
-    handleBlockedDomMove,
-    handleDomManualDragStart,
-    handleDomPathOffsetCommit,
-    handleDomGroupPathOffsetCommit,
-    handleDomBoxSizeCommit,
-    handleDomRotationCommit,
-    handleDomStyleCommit,
-    applyMarqueeSelection,
-    handleDomEditElementDelete,
-    handleDomZIndexReorderCommit,
-  } = useDomEditActionsContext();
-  const mirrorZOrderToTimeline = useCanvasZOrderTimelineMirror();
+  const { domEditSelection } = useDomEditSelectionContext();
 
   if (blockPreview) {
     return (
@@ -256,68 +132,11 @@ export function PreviewOverlays({
     <>
       <TopologyLens iframeRef={previewIframeRef} activeCompositionPath={activeCompPath} />
       <GridOverlay />
-      <DomEditOverlay
-        iframeRef={previewIframeRef}
+      <ConnectedDomEditOverlay
         activeCompositionPath={activeCompPath}
-        hoverSelection={
-          !previewCaptionEditMode && !compositionLoading && !isPlaying
-            ? domEditHoverSelection
-            : null
-        }
-        selection={shouldShowSelectedDomBounds ? domEditSelection : null}
-        groupSelections={shouldShowSelectedDomBounds ? domEditGroupSelections : []}
-        allowCanvasMovement={!isGestureRecording}
-        onCanvasMouseDown={handlePreviewCanvasMouseDown}
-        onCanvasPointerMove={handlePreviewCanvasPointerMove}
-        onCanvasPointerLeave={handlePreviewCanvasPointerLeave}
-        onSelectionChange={applyDomSelection}
-        onBlockedMove={handleBlockedDomMove}
-        onManualDragStart={handleDomManualDragStart}
-        onPathOffsetCommit={handleDomPathOffsetCommit}
-        onGroupPathOffsetCommit={handleDomGroupPathOffsetCommit}
-        onBoxSizeCommit={handleDomBoxSizeCommit}
-        onRotationCommit={handleDomRotationCommit}
-        onStyleCommit={handleDomStyleCommit}
-        onDeleteSelection={handleDomEditElementDelete}
-        onApplyZIndex={(sel, patches, action, crossed) => {
-          const { entries, dropped } = resolveZIndexEntries(sel, patches);
-          if (dropped.length > 0) {
-            // These siblings can't be written to source. Apply their live z
-            // anyway so the resolved stacking order renders coherently — it
-            // just reverts to the prior order on the next reload.
-            for (const patch of dropped) patch.element.style.zIndex = String(patch.zIndex);
-            console.warn(
-              "[studio] z-index reorder: dropping sibling(s) with no stable id/selector " +
-                "(will revert on reload):",
-              dropped.map((patch) => describeZIndexElement(patch.element)).join(", "),
-            );
-          }
-          if (entries.length === 0) return;
-          // Shared undo coalesce key: passed to BOTH the z persist and the
-          // timeline lane mirror below so editHistory folds the two records
-          // into one undo entry (same value handleDomZIndexReorderCommit would
-          // default to — passed explicitly so the mirror shares it by
-          // construction, not by formula duplication).
-          const coalesceKey = zReorderCoalesceKey(entries, action);
-          // One serialized z→lane transaction: the mirror runs only AFTER the
-          // z commit resolved AND reported durable targets, and a second rapid
-          // gesture cannot interleave between the two phases — see
-          // runZLaneGesture. A failed z commit already toasted + rolled back.
-          runZLaneGesture({
-            commitZ: () => handleDomZIndexReorderCommit(entries, coalesceKey, action),
-            mirror: () =>
-              mirrorZOrderToTimeline({
-                selectionKey: entries.find((e) => e.element === sel.element)?.key,
-                action,
-                crossed,
-                sourceFile: sel.sourceFile,
-                coalesceKey,
-              }),
-          }).catch(() => undefined);
-        }}
-        recordingState={recordingState}
-        onToggleRecording={onToggleRecording}
-        onMarqueeSelect={applyMarqueeSelection}
+        showHoverSelection={!previewCaptionEditMode && !compositionLoading && !isPlaying}
+        shouldShowSelectedDomBounds={shouldShowSelectedDomBounds}
+        isGestureRecording={isGestureRecording}
       />
       <SnapToolbar />
       {!readOnly && (

package/src/components/nle/PreviewOverlaysTestMocks.ts

@@ -1,6 +1,6 @@
 import { vi } from "vitest";
 
-const previewState = vi.hoisted(() => ({ captionEditMode: false }));
+const previewState = vi.hoisted(() => ({ captionEditMode: false, isPlaying: false }));
 export function getPreviewState() {
   return previewState;
 }
@@ -11,7 +11,7 @@ vi.mock("../../contexts/StudioContext", () => ({
   useStudioPlaybackContext: () => ({
     captionEditMode: previewState.captionEditMode,
     compositionLoading: false,
-    isPlaying: false,
+    isPlaying: previewState.isPlaying,
   }),
 }));
 vi.mock("../../captions/store", () => {

package/src/components/nle/useCanvasZOrderTimelineMirror.ts

@@ -30,7 +30,7 @@ export interface MirrorZOrderInput {
 /**
  * Mirror a successful canvas z-order menu action into a timeline LANE move.
  *
- * The caller (PreviewOverlays) invokes the returned callback AFTER the z commit
+ * The caller (ConnectedDomEditOverlay) invokes the returned callback AFTER the z commit
  * resolved — serializing the two same-file writes, exactly like the lane-drag's
  * move→z ordering (see persistMoveEdits' doc) — and with the SAME coalesce key
  * the z persist recorded, so editHistory folds both records into one undo entry.