hyperframes 0.7.16 → 0.7.18

package/dist/studio/index.js

@@ -7311,16 +7311,16 @@ function buildCompositionThumbnailUrl({
 }) {
   const thumbnailBase = previewUrl.replace("/preview/comp/", "/thumbnail/").replace(/\/preview$/, "/thumbnail/index.html");
   const midTime = seekTime + duration / 2;
-  const thumbnailUrl = new URL(thumbnailBase, origin);
-  thumbnailUrl.searchParams.set("t", midTime.toFixed(2));
-  thumbnailUrl.searchParams.set("v", THUMBNAIL_URL_VERSION);
+  const thumbnailUrl2 = new URL(thumbnailBase, origin);
+  thumbnailUrl2.searchParams.set("t", midTime.toFixed(2));
+  thumbnailUrl2.searchParams.set("v", THUMBNAIL_URL_VERSION);
   if (selector) {
-    thumbnailUrl.searchParams.set("selector", selector);
+    thumbnailUrl2.searchParams.set("selector", selector);
     if (selectorIndex != null && selectorIndex > 0) {
-      thumbnailUrl.searchParams.set("selectorIndex", String(selectorIndex));
+      thumbnailUrl2.searchParams.set("selectorIndex", String(selectorIndex));
     }
   }
-  return thumbnailUrl.toString();
+  return thumbnailUrl2.toString();
 }
 var CompositionThumbnail = memo13(function CompositionThumbnail2({
   previewUrl,
@@ -19739,7 +19739,7 @@ var FileTree = memo24(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState91, useCallback as useCallback106, useRef as useRef88, useMemo as useMemo37, useEffect as useEffect65, useLayoutEffect as useLayoutEffect3 } from "react";
+import { useState as useState91, useCallback as useCallback106, useRef as useRef89, useMemo as useMemo37, useEffect as useEffect66, useLayoutEffect as useLayoutEffect3 } from "react";
 
 // src/components/renders/useRenderQueue.ts
 import { useState as useState36, useEffect as useEffect26, useCallback as useCallback32, useRef as useRef34, useMemo as useMemo18 } from "react";
@@ -23659,7 +23659,10 @@ function useDomSelection({
       }
       if (!doc) return;
       const element = findElementForSelection(doc, selection, activeCompPath);
-      if (!element) return;
+      if (!element) {
+        applyDomSelection(null, { revealPanel: false });
+        return;
+      }
       const nextSelection = await buildDomSelectionFromTarget(element);
       if (nextSelection) {
         applyDomSelection(nextSelection, {
@@ -29375,6 +29378,134 @@ function useGsapAwareEditing({
   };
 }
 
+// src/hooks/useStudioSelectionPublisher.ts
+import { useEffect as useEffect35, useRef as useRef55 } from "react";
+
+// src/utils/studioSelectionSnapshot.ts
+function round32(value) {
+  return Math.round(value * 1e3) / 1e3;
+}
+function thumbnailUrl({
+  projectId,
+  selection,
+  currentTime
+}) {
+  const compPath = encodeURIComponent(
+    selection.compositionPath || selection.sourceFile || "index.html"
+  );
+  const params = new URLSearchParams({
+    t: String(round32(currentTime)),
+    format: "png"
+  });
+  if (selection.selector) params.set("selector", selection.selector);
+  if (selection.selectorIndex != null) params.set("selectorIndex", String(selection.selectorIndex));
+  return `/api/projects/${encodeURIComponent(projectId)}/thumbnail/${compPath}?${params.toString()}`;
+}
+function buildStudioSelectionSnapshot({
+  projectId,
+  selection,
+  currentTime
+}) {
+  return {
+    schemaVersion: 1,
+    projectId,
+    compositionPath: selection.compositionPath,
+    sourceFile: selection.sourceFile,
+    currentTime: round32(currentTime),
+    target: {
+      id: selection.id,
+      hfId: selection.hfId,
+      selector: selection.selector,
+      selectorIndex: selection.selectorIndex
+    },
+    label: selection.label,
+    tagName: selection.tagName,
+    boundingBox: {
+      x: round32(selection.boundingBox.x),
+      y: round32(selection.boundingBox.y),
+      width: round32(selection.boundingBox.width),
+      height: round32(selection.boundingBox.height)
+    },
+    textContent: selection.textContent,
+    dataAttributes: { ...selection.dataAttributes },
+    inlineStyles: { ...selection.inlineStyles },
+    computedStyles: { ...selection.computedStyles },
+    textFields: selection.textFields.map((field) => ({
+      key: field.key,
+      label: field.label,
+      value: field.value,
+      tagName: field.tagName,
+      source: field.source
+    })),
+    capabilities: { ...selection.capabilities },
+    thumbnailUrl: thumbnailUrl({ projectId, selection, currentTime })
+  };
+}
+
+// src/hooks/useStudioSelectionPublisher.ts
+function reportSelectionPublishError(error) {
+  if (error instanceof Error && error.name === "AbortError") return;
+  const errorName = error instanceof Error ? error.name : typeof error;
+  const errorMessage = error instanceof Error ? error.message : String(error);
+  trackStudioEvent("studio_selection_publish_failed", {
+    error_name: errorName,
+    error_message: errorMessage.slice(0, 500)
+  });
+  console.warn("[Studio] Failed to update agent selection context", error);
+}
+function putSelection(projectId, selection, signal) {
+  return fetch(`/api/projects/${encodeURIComponent(projectId)}/selection`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ selection }),
+    signal
+  }).then(() => void 0);
+}
+function useStudioSelectionPublisher({
+  projectId,
+  domEditSelection,
+  domEditSelectionRef,
+  refreshKey,
+  previewDocumentVersion,
+  refreshDomEditSelectionFromPreview
+}) {
+  const lastSelectionRefreshKeyRef = useRef55(refreshKey);
+  const pendingSelectionRefreshKeyRef = useRef55(null);
+  useEffect35(() => {
+    if (!projectId) return;
+    const selection = domEditSelection?.element.isConnected ? buildStudioSelectionSnapshot({
+      projectId,
+      selection: domEditSelection,
+      currentTime: usePlayerStore.getState().currentTime
+    }) : null;
+    const controller = new AbortController();
+    void putSelection(projectId, selection, controller.signal).catch(reportSelectionPublishError);
+    return () => controller.abort();
+  }, [domEditSelection, projectId]);
+  useEffect35(() => {
+    if (!projectId) return;
+    return () => {
+      void putSelection(projectId, null).catch(reportSelectionPublishError);
+    };
+  }, [projectId]);
+  useEffect35(() => {
+    if (lastSelectionRefreshKeyRef.current === refreshKey) return;
+    lastSelectionRefreshKeyRef.current = refreshKey;
+    pendingSelectionRefreshKeyRef.current = domEditSelectionRef.current ? refreshKey : null;
+    if (!projectId || !domEditSelectionRef.current) return;
+    const controller = new AbortController();
+    void putSelection(projectId, null, controller.signal).catch(reportSelectionPublishError);
+    return () => controller.abort();
+  }, [domEditSelectionRef, projectId, refreshKey]);
+  useEffect35(() => {
+    if (pendingSelectionRefreshKeyRef.current === null) return;
+    pendingSelectionRefreshKeyRef.current = null;
+    const selection = domEditSelectionRef.current;
+    if (!selection) return;
+    void refreshDomEditSelectionFromPreview(selection);
+  }, [domEditSelectionRef, previewDocumentVersion, refreshDomEditSelectionFromPreview]);
+}
+
 // src/hooks/useDomEditSession.ts
 function useDomEditSession({
   projectId,
@@ -29402,6 +29533,7 @@ function useDomEditSession({
   projectIdRef,
   previewIframe,
   refreshKey,
+  previewDocumentVersion,
   rightPanelTab,
   applyStudioManualEditsToPreviewRef,
   syncPreviewHistoryHotkey,
@@ -29467,6 +29599,14 @@ function useDomEditSession({
     domEditSelectionRef,
     domEditSelection
   });
+  useStudioSelectionPublisher({
+    projectId,
+    domEditSelection,
+    domEditSelectionRef,
+    refreshKey,
+    previewDocumentVersion,
+    refreshDomEditSelectionFromPreview
+  });
   const { version: gsapCacheVersion, bump: bumpGsapCache } = useGsapCacheVersion();
   const {
     commitMutation: gsapCommitMutation,
@@ -29820,7 +29960,7 @@ function useDomEditSession({
 }
 
 // src/hooks/useSdkSession.ts
-import { useState as useState47, useEffect as useEffect35, useCallback as useCallback65 } from "react";
+import { useState as useState47, useEffect as useEffect36, useCallback as useCallback65 } from "react";
 import { openComposition } from "@hyperframes/sdk";
 async function readProjectFileOptional(projectId, path) {
   if (path.includes("\0") || path.includes("..")) return void 0;
@@ -29850,7 +29990,7 @@ function shouldReloadOnFileChange(activeCompPath, content, withinSuppressWindow)
 function useSdkSession(projectId, activeCompPath, domEditSaveTimestampRef) {
   const [session, setSession] = useState47(null);
   const [reloadToken, setReloadToken] = useState47(0);
-  useEffect35(() => {
+  useEffect36(() => {
     if (!activeCompPath) return;
     const compPath = activeCompPath;
     const readProjectId = projectId ?? null;
@@ -29875,7 +30015,7 @@ function useSdkSession(projectId, activeCompPath, domEditSaveTimestampRef) {
     es.addEventListener("file-change", handler);
     return () => es.close();
   }, [activeCompPath, projectId]);
-  useEffect35(() => {
+  useEffect36(() => {
     if (!projectId || !activeCompPath) {
       setSession(null);
       return;
@@ -29904,13 +30044,13 @@ function useSdkSession(projectId, activeCompPath, domEditSaveTimestampRef) {
 }
 
 // src/hooks/useSdkSelectionSync.ts
-import { useEffect as useEffect36 } from "react";
+import { useEffect as useEffect37 } from "react";
 function toHfIds(group, primary) {
   const source = group.length > 0 ? group : primary ? [primary] : [];
   return source.flatMap((s) => s.hfId ? [s.hfId] : []);
 }
 function useSdkSelectionSync(session, domEditSelection, domEditGroupSelections) {
-  useEffect36(() => {
+  useEffect37(() => {
     if (!session) return;
     session.setSelection(toHfIds(domEditGroupSelections, domEditSelection));
   }, [session, domEditSelection, domEditGroupSelections]);
@@ -30149,7 +30289,7 @@ function useBlockHandlers({
 }
 
 // src/hooks/useAppHotkeys.ts
-import { useCallback as useCallback67, useEffect as useEffect37, useRef as useRef55 } from "react";
+import { useCallback as useCallback67, useEffect as useEffect38, useRef as useRef56 } from "react";
 function iframeContentWindow(iframe) {
   try {
     return iframe?.contentWindow ?? null;
@@ -30357,8 +30497,8 @@ function useAppHotkeys({
   activeCompPath,
   forceReloadSdkSession
 }) {
-  const previewHotkeyWindowRef = useRef55(null);
-  const previewHistoryCleanupRef = useRef55(null);
+  const previewHotkeyWindowRef = useRef56(null);
+  const previewHistoryCleanupRef = useRef56(null);
   const handleTimelineToggleHotkey = useCallback67(
     (event) => {
       if (!shouldHandleTimelineToggleHotkey(event)) return;
@@ -30416,7 +30556,7 @@ function useAppHotkeys({
   );
   const handleUndo = useCallback67(() => applyHistory("undo"), [applyHistory]);
   const handleRedo = useCallback67(() => applyHistory("redo"), [applyHistory]);
-  const cbRef = useRef55(null);
+  const cbRef = useRef56(null);
   cbRef.current = {
     toggleTimelineVisibility,
     handleTimelineElementDelete,
@@ -30450,7 +30590,7 @@ function useAppHotkeys({
     }
     if (!isEditableTarget(event.target)) dispatchPlainKey(event, key, cb);
   }, []);
-  useEffect37(() => {
+  useEffect38(() => {
     window.addEventListener("keydown", handleAppKeyDown, true);
     return () => window.removeEventListener("keydown", handleAppKeyDown, true);
   }, [handleAppKeyDown]);
@@ -30468,7 +30608,7 @@ function useAppHotkeys({
     },
     [handleAppKeyDown]
   );
-  useEffect37(
+  useEffect38(
     () => () => {
       safeRemoveListener(
         previewHotkeyWindowRef.current,
@@ -30509,7 +30649,7 @@ function useAppHotkeys({
     },
     [handleHistoryHotkey]
   );
-  useEffect37(
+  useEffect38(
     () => () => {
       previewHistoryCleanupRef.current?.();
       previewHistoryCleanupRef.current = null;
@@ -30526,7 +30666,7 @@ function useAppHotkeys({
 }
 
 // src/hooks/useClipboard.ts
-import { useCallback as useCallback68, useRef as useRef56 } from "react";
+import { useCallback as useCallback68, useRef as useRef57 } from "react";
 
 // src/utils/clipboardPayload.ts
 function insertAsSibling(source, newHtml, selector, selectorIndex) {
@@ -30641,8 +30781,8 @@ function useClipboard({
   handleDomEditElementDelete,
   previewIframeRef
 }) {
-  const clipboardRef = useRef56(null);
-  const projectIdRef = useRef56(projectId);
+  const clipboardRef = useRef57(null);
+  const projectIdRef = useRef57(projectId);
   projectIdRef.current = projectId;
   const handleCopy = useCallback68(() => {
     const { selectedElementId, elements } = usePlayerStore.getState();
@@ -30786,7 +30926,7 @@ function selectedKeyframePercentagesForElement(selectedKeyframes, activeElementI
 }
 
 // src/hooks/useCaptionDetection.ts
-import { useEffect as useEffect38 } from "react";
+import { useEffect as useEffect39 } from "react";
 
 // src/captions/types.ts
 var DEFAULT_STYLE = {
@@ -31038,7 +31178,7 @@ function useCaptionDetection({
   captionSync,
   setRightCollapsed
 }) {
-  useEffect38(() => {
+  useEffect39(() => {
     if (!projectId) return;
     let activating = false;
     const tryActivateCaptions = () => {
@@ -31117,7 +31257,7 @@ function useCaptionDetection({
       window.removeEventListener("message", handleMessage);
     };
   }, [activeCompPath, projectId, compIdToSrc, captionSync, previewIframeRef]);
-  useEffect38(() => {
+  useEffect39(() => {
     if (captionEditMode) {
       setRightCollapsed(!captionHasSelection);
     }
@@ -31129,7 +31269,7 @@ import { useCallback as useCallback70 } from "react";
 import { createElement } from "react";
 
 // src/player/components/AudioWaveform.tsx
-import { memo as memo25, useRef as useRef57, useState as useState49, useCallback as useCallback69, useEffect as useEffect39 } from "react";
+import { memo as memo25, useRef as useRef58, useState as useState49, useCallback as useCallback69, useEffect as useEffect40 } from "react";
 import { jsx as jsx64, jsxs as jsxs55 } from "react/jsx-runtime";
 var BAR_W = 2;
 var GAP = 1;
@@ -31177,12 +31317,12 @@ var AudioWaveform = memo25(function AudioWaveform2({
   trimStartFraction,
   trimEndFraction
 }) {
-  const containerRef = useRef57(null);
-  const barsRef = useRef57(null);
-  const roRef = useRef57(null);
+  const containerRef = useRef58(null);
+  const barsRef = useRef58(null);
+  const roRef = useRef58(null);
   const cacheKey = waveformUrl ?? audioUrl;
   const [peaks, setPeaks] = useState49(peaksCache.get(cacheKey) ?? null);
-  useEffect39(() => {
+  useEffect40(() => {
     if (peaks || !cacheKey) return;
     let cancelled = false;
     let promise = decodeInFlight.get(cacheKey);
@@ -31238,10 +31378,10 @@ var AudioWaveform = memo25(function AudioWaveform2({
     },
     [draw]
   );
-  useEffect39(() => {
+  useEffect40(() => {
     draw();
   }, [draw]);
-  useEffect39(
+  useEffect40(
     () => () => {
       roRef.current?.disconnect();
     },
@@ -31383,15 +31523,15 @@ function useRenderClipContent({
 }
 
 // src/hooks/useConsoleErrorCapture.ts
-import { useCallback as useCallback71, useEffect as useEffect40, useRef as useRef58, useState as useState50 } from "react";
+import { useCallback as useCallback71, useEffect as useEffect41, useRef as useRef59, useState as useState50 } from "react";
 function useConsoleErrorCapture(previewIframe) {
   const [consoleErrors, setConsoleErrors] = useState50(null);
-  const consoleErrorsRef = useRef58([]);
+  const consoleErrorsRef = useRef59([]);
   const resetErrors = useCallback71(() => {
     consoleErrorsRef.current = [];
     setConsoleErrors(null);
   }, []);
-  useEffect40(() => {
+  useEffect41(() => {
     if (!previewIframe) return;
     let patchedWin = null;
     let origConsoleError = null;
@@ -31616,7 +31756,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState52, useCallback as useCallback73, useEffect as useEffect41, useRef as useRef59, useMemo as useMemo24 } from "react";
+import { useState as useState52, useCallback as useCallback73, useEffect as useEffect42, useRef as useRef60, useMemo as useMemo24 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -31630,7 +31770,7 @@ function useLintModal(projectId, refreshKey) {
   const [lintModal, setLintModal] = useState52(null);
   const [linting, setLinting] = useState52(false);
   const [backgroundFindings, setBackgroundFindings] = useState52([]);
-  const autoLintRanRef = useRef59(false);
+  const autoLintRanRef = useRef60(false);
   const runLint = useCallback73(
     async (opts) => {
       if (!projectId) return;
@@ -31657,8 +31797,8 @@ function useLintModal(projectId, refreshKey) {
     [projectId]
   );
   const handleLint = useCallback73(() => runLint(), [runLint]);
-  const prevProjectIdRef = useRef59(projectId);
-  useEffect41(() => {
+  const prevProjectIdRef = useRef60(projectId);
+  useEffect42(() => {
     if (projectId !== prevProjectIdRef.current) {
       autoLintRanRef.current = false;
       prevProjectIdRef.current = projectId;
@@ -31667,7 +31807,7 @@ function useLintModal(projectId, refreshKey) {
     autoLintRanRef.current = true;
     void runLint({ background: true });
   }, [projectId, runLint]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (!projectId || !refreshKey) return;
     const timer = setTimeout(() => void runLint({ background: true }), 1e3);
     return () => clearTimeout(timer);
@@ -31690,7 +31830,7 @@ function useLintModal(projectId, refreshKey) {
   );
   const findingsByElement = useMemo24(() => groupFindings((f) => f.elementId), [groupFindings]);
   const findingsByFile = useMemo24(() => groupFindings((f) => f.file), [groupFindings]);
-  useEffect41(() => {
+  useEffect42(() => {
     usePlayerStore.getState().setLintFindingsByElement(findingsByElement);
   }, [findingsByElement]);
   return {
@@ -31727,10 +31867,10 @@ function useCompositionDimensions() {
 }
 
 // src/hooks/useToast.ts
-import { useState as useState54, useCallback as useCallback74, useRef as useRef60 } from "react";
+import { useState as useState54, useCallback as useCallback74, useRef as useRef61 } from "react";
 function useToast() {
   const [appToast, setAppToast] = useState54(null);
-  const timerRef = useRef60(null);
+  const timerRef = useRef61(null);
   const showToast = useCallback74((message, tone = "error") => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setAppToast({ message, tone });
@@ -31747,7 +31887,7 @@ function useToast() {
 }
 
 // src/hooks/useStudioUrlState.ts
-import { useCallback as useCallback75, useEffect as useEffect42, useRef as useRef61, useState as useState55 } from "react";
+import { useCallback as useCallback75, useEffect as useEffect43, useRef as useRef62, useState as useState55 } from "react";
 
 // src/utils/studioUrlState.ts
 var VALID_TABS = ["layers", "design", "renders"];
@@ -31871,12 +32011,12 @@ function useStudioUrlState({
   initialState: initialState2
 }) {
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const hydratedSeekRef = useRef61(initialState2.currentTime == null);
-  const hydratedInitialTimeRef = useRef61(initialState2.currentTime == null);
-  const hydratedSelectionRef = useRef61(initialState2.selection == null);
+  const hydratedSeekRef = useRef62(initialState2.currentTime == null);
+  const hydratedInitialTimeRef = useRef62(initialState2.currentTime == null);
+  const hydratedSelectionRef = useRef62(initialState2.selection == null);
   const [selectionHydrated, setSelectionHydrated] = useState55(initialState2.selection == null);
-  const pendingSelectionRef = useRef61(initialState2.selection);
-  const stableTimeRef = useRef61(initialState2.currentTime);
+  const pendingSelectionRef = useRef62(initialState2.selection);
+  const stableTimeRef = useRef62(initialState2.currentTime);
   const buildUrlState = useCallback75(
     () => ({
       activeCompPath,
@@ -31922,7 +32062,7 @@ function useStudioUrlState({
     },
     [activeCompPath, applyDomSelection, buildDomSelectionFromTarget, previewIframeRef]
   );
-  useEffect42(() => {
+  useEffect43(() => {
     if (!projectId || hydratedSeekRef.current || compositionLoading) return;
     const nextTime = duration > 0 ? clampNumber2(initialState2.currentTime ?? 0, 0, duration) : Math.max(0, initialState2.currentTime ?? 0);
     usePlayerStore.getState().requestSeek(nextTime);
@@ -31930,7 +32070,7 @@ function useStudioUrlState({
     hydratedSeekRef.current = true;
   }, [projectId, compositionLoading, duration, initialState2.currentTime]);
   const selectionHydrationTime = selectionHydrated ? 0 : currentTime;
-  useEffect42(() => {
+  useEffect43(() => {
     if (!projectId || hydratedSelectionRef.current || compositionLoading) return;
     if (!hydratedSeekRef.current) return;
     const targetTime = initialState2.currentTime;
@@ -31957,7 +32097,7 @@ function useStudioUrlState({
     projectId,
     refreshKey
   ]);
-  useEffect42(() => {
+  useEffect43(() => {
     if (hydratedInitialTimeRef.current) return;
     const targetTime = stableTimeRef.current;
     if (targetTime == null) {
@@ -31967,7 +32107,7 @@ function useStudioUrlState({
     if (Math.abs(currentTime - targetTime) > 0.05) return;
     hydratedInitialTimeRef.current = true;
   }, [currentTime]);
-  useEffect42(() => {
+  useEffect43(() => {
     if (!activeCompPathHydrated) return;
     if (!hydratedSeekRef.current) return;
     if (!hydratedInitialTimeRef.current) return;
@@ -31978,12 +32118,12 @@ function useStudioUrlState({
     }, 200);
     return () => window.clearTimeout(handle);
   }, [activeCompPathHydrated, buildUrlState, currentTime, duration, isPlaying, projectId]);
-  useEffect42(() => {
+  useEffect43(() => {
     if (!activeCompPathHydrated) return;
     if (!projectId) return;
     replaceHash(buildStudioHash(projectId, buildUrlState()));
   }, [activeCompPathHydrated, buildUrlState, projectId]);
-  useEffect42(() => {
+  useEffect43(() => {
     if (!projectId) return;
     const onHashChange = () => {
       if (parseProjectIdFromHash(window.location.hash) !== projectId) return;
@@ -32004,7 +32144,7 @@ function useStudioUrlState({
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback76, useMemo as useMemo25, useRef as useRef62, useState as useState56 } from "react";
+import { useCallback as useCallback76, useMemo as useMemo25, useRef as useRef63, useState as useState56 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -32049,7 +32189,7 @@ function useInspectorState(rightPanelTab, rightInspectorPanes, rightCollapsed, i
 }
 function useDragOverlay(onImportFiles) {
   const [active, setActive] = useState56(false);
-  const counterRef = useRef62(0);
+  const counterRef = useRef63(0);
   const onDragOver = useCallback76((e) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
@@ -32150,7 +32290,7 @@ import {
   createContext as createContext5,
   useCallback as useCallback77,
   useContext as useContext5,
-  useEffect as useEffect43,
+  useEffect as useEffect44,
   useMemo as useMemo27,
   useState as useState57
 } from "react";
@@ -32174,7 +32314,7 @@ function useViewModeState(enabled) {
   const [viewMode, setMode] = useState57(
     () => enabled ? readViewModeFromUrl() : "timeline"
   );
-  useEffect43(() => {
+  useEffect44(() => {
     if (!enabled) return;
     const onPopState = () => setMode(readViewModeFromUrl());
     window.addEventListener("popstate", onPopState);
@@ -32548,10 +32688,10 @@ function StudioHeader({
 }
 
 // src/hooks/useGestureCommit.ts
-import { useState as useState59, useCallback as useCallback79, useRef as useRef64, useEffect as useEffect45 } from "react";
+import { useState as useState59, useCallback as useCallback79, useRef as useRef65, useEffect as useEffect46 } from "react";
 
 // src/hooks/useGestureRecording.ts
-import { useCallback as useCallback78, useEffect as useEffect44, useRef as useRef63, useState as useState58 } from "react";
+import { useCallback as useCallback78, useEffect as useEffect45, useRef as useRef64, useState as useState58 } from "react";
 function readBasePosition(element, iframeEl) {
   let baseOpacity = 1;
   let baseScale = 1;
@@ -32670,11 +32810,11 @@ function createRecordingRefs() {
 function useGestureRecording() {
   const [isRecording, setIsRecording] = useState58(false);
   const [recordingDuration, setRecordingDuration] = useState58(0);
-  const isRecordingRef = useRef63(false);
-  const refs = useRef63(createRecordingRefs());
-  const samplesRef = useRef63(refs.current.samples);
-  const trailRef = useRef63(refs.current.trail);
-  useEffect44(() => {
+  const isRecordingRef = useRef64(false);
+  const refs = useRef64(createRecordingRefs());
+  const samplesRef = useRef64(refs.current.samples);
+  const trailRef = useRef64(refs.current.trail);
+  useEffect45(() => {
     const r = refs.current;
     return () => {
       r.cleanup?.();
@@ -33065,12 +33205,12 @@ function useGestureCommit({
 }) {
   const gestureRecording = useGestureRecording();
   const [gestureState, setGestureState] = useState59("idle");
-  const gestureStateRef = useRef64("idle");
-  const recordingAutoStopRef = useRef64(void 0);
-  const recordingStartTimeRef = useRef64(0);
-  const commitInFlightRef = useRef64(false);
-  const capturedSelectionRef = useRef64(null);
-  useEffect45(() => () => clearInterval(recordingAutoStopRef.current), []);
+  const gestureStateRef = useRef65("idle");
+  const recordingAutoStopRef = useRef65(void 0);
+  const recordingStartTimeRef = useRef65(0);
+  const commitInFlightRef = useRef65(false);
+  const capturedSelectionRef = useRef65(null);
+  useEffect46(() => () => clearInterval(recordingAutoStopRef.current), []);
   const stopAndCommitRecording = useCallback79(async () => {
     clearInterval(recordingAutoStopRef.current);
     if (commitInFlightRef.current) {
@@ -33389,12 +33529,12 @@ import {
   useState as useState66,
   useCallback as useCallback84,
   useImperativeHandle,
-  useRef as useRef69,
+  useRef as useRef70,
   forwardRef as forwardRef3
 } from "react";
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo27, useCallback as useCallback80, useEffect as useEffect46, useRef as useRef65, useState as useState60 } from "react";
+import { memo as memo27, useCallback as useCallback80, useEffect as useEffect47, useRef as useRef66, useState as useState60 } from "react";
 import { jsx as jsx69, jsxs as jsxs58 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -33462,9 +33602,9 @@ function CompCard({
 }) {
   const [hovered, setHovered] = useState60(false);
   const [stageSize, setStageSize] = useState60(DEFAULT_PREVIEW_STAGE);
-  const iframeRef = useRef65(null);
-  const hoverTimer = useRef65(null);
-  const syncTimer = useRef65(null);
+  const iframeRef = useRef66(null);
+  const hoverTimer = useRef66(null);
+  const syncTimer = useRef66(null);
   const requestIframePlaybackSync = useCallback80((shouldPlay) => {
     if (syncTimer.current) {
       clearTimeout(syncTimer.current);
@@ -33496,10 +33636,10 @@ function CompCard({
   });
   const thumbnailOffsetX = (CARD_W - stageSize.width * previewScale) / 2;
   const thumbnailOffsetY = (CARD_H - stageSize.height * previewScale) / 2;
-  useEffect46(() => {
+  useEffect47(() => {
     requestIframePlaybackSync(hovered);
   }, [hovered, requestIframePlaybackSync]);
-  useEffect46(() => {
+  useEffect47(() => {
     return () => {
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
       if (syncTimer.current) clearTimeout(syncTimer.current);
@@ -33623,14 +33763,14 @@ var CompositionsTab = memo27(function CompositionsTab2({
 });
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo28, useState as useState63, useCallback as useCallback82, useRef as useRef67, useMemo as useMemo29, useEffect as useEffect49 } from "react";
+import { memo as memo28, useState as useState63, useCallback as useCallback82, useRef as useRef68, useMemo as useMemo29, useEffect as useEffect50 } from "react";
 
 // src/components/ui/VideoFrameThumbnail.tsx
-import { useState as useState61, useEffect as useEffect47 } from "react";
+import { useState as useState61, useEffect as useEffect48 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
 function VideoFrameThumbnail({ src }) {
   const [frame, setFrame] = useState61(null);
-  useEffect47(() => {
+  useEffect48(() => {
     const video = document.createElement("video");
     video.crossOrigin = "anonymous";
     video.muted = true;
@@ -33765,7 +33905,7 @@ var CATEGORY_LABELS = {
 var FILTER_ORDER = ["audio", "images", "video", "fonts"];
 
 // src/components/sidebar/AudioRow.tsx
-import { useState as useState62, useRef as useRef66, useEffect as useEffect48, useCallback as useCallback81 } from "react";
+import { useState as useState62, useRef as useRef67, useEffect as useEffect49, useCallback as useCallback81 } from "react";
 import { Fragment as Fragment20, jsx as jsx72, jsxs as jsxs60 } from "react/jsx-runtime";
 function AudioRow({
   projectId,
@@ -33780,22 +33920,22 @@ function AudioRow({
   const [contextMenu, setContextMenu] = useState62(null);
   const [playing, setPlaying] = useState62(false);
   const [bars, setBars] = useState62([]);
-  const audioRef = useRef66(null);
-  const actxRef = useRef66(null);
-  const analyserRef = useRef66(null);
-  const sourceRef = useRef66(null);
-  const animRef = useRef66(0);
+  const audioRef = useRef67(null);
+  const actxRef = useRef67(null);
+  const analyserRef = useRef67(null);
+  const sourceRef = useRef67(null);
+  const animRef = useRef67(0);
   const name = basename(asset);
   const subtype = getAudioSubtype(asset);
   const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
-  useEffect48(() => {
+  useEffect49(() => {
     return () => {
       cancelAnimationFrame(animRef.current);
       audioRef.current?.pause();
       actxRef.current?.close();
     };
   }, []);
-  useEffect48(() => {
+  useEffect49(() => {
     if (playing) {
       const barCount = 24;
       const loop = () => {
@@ -34060,15 +34200,15 @@ var AssetsTab = memo28(function AssetsTab2({
   onDelete,
   onRename
 }) {
-  const fileInputRef = useRef67(null);
+  const fileInputRef = useRef68(null);
   const [dragOver, setDragOver] = useState63(false);
   const [copiedPath, setCopiedPath] = useState63(null);
   const [activeFilter, setActiveFilter] = useState63("all");
   const [searchQuery, setSearchQuery] = useState63("");
   const [manifest, setManifest] = useState63(/* @__PURE__ */ new Map());
-  const manifest404Ref = useRef67(/* @__PURE__ */ new Set());
+  const manifest404Ref = useRef68(/* @__PURE__ */ new Set());
   const assetsKey = assets.join("|");
-  useEffect49(() => {
+  useEffect50(() => {
     if (manifest404Ref.current.has(projectId)) return;
     let cancelled = false;
     fetch(`/api/projects/${projectId}/preview/.media/manifest.jsonl`).then((r) => {
@@ -34352,11 +34492,11 @@ var AssetsTab = memo28(function AssetsTab2({
 });
 
 // src/components/sidebar/BlocksTab.tsx
-import { memo as memo29, useState as useState65, useCallback as useCallback83, useRef as useRef68, useEffect as useEffect51 } from "react";
+import { memo as memo29, useState as useState65, useCallback as useCallback83, useRef as useRef69, useEffect as useEffect52 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 
 // src/hooks/useBlockCatalog.ts
-import { useState as useState64, useEffect as useEffect50, useMemo as useMemo30 } from "react";
+import { useState as useState64, useEffect as useEffect51, useMemo as useMemo30 } from "react";
 
 // src/utils/blockCategories.ts
 import {
@@ -34385,7 +34525,7 @@ function useBlockCatalog() {
   const [error, setError] = useState64(null);
   const [search, setSearch] = useState64("");
   const [category, setCategory] = useState64(null);
-  useEffect50(() => {
+  useEffect51(() => {
     let cancelled = false;
     (async () => {
       try {
@@ -34646,7 +34786,7 @@ function BlockCard({
 }) {
   const [hovered, setHovered] = useState65(false);
   const [adding, setAdding] = useState65(false);
-  const hoverTimer = useRef68(null);
+  const hoverTimer = useRef69(null);
   const colors = getCategoryColors(category);
   const needsWebGL = tags?.includes("html-in-canvas") || tags?.includes("webgl");
   const handleEnter = useCallback83(() => {
@@ -34663,7 +34803,7 @@ function BlockCard({
     setHovered(false);
     onPreview?.(null);
   }, [onPreview]);
-  useEffect51(() => {
+  useEffect52(() => {
     return () => {
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
     };
@@ -34817,8 +34957,8 @@ function PromptPreviewModal({
 }) {
   const [value, setValue] = useState65(prompt);
   const [copied, setCopied] = useState65(false);
-  const textareaRef = useRef68(null);
-  useEffect51(() => {
+  const textareaRef = useRef69(null);
+  useEffect52(() => {
     requestAnimationFrame(() => textareaRef.current?.focus());
   }, []);
   const handleCopy = useCallback83(() => {
@@ -34944,7 +35084,7 @@ var LeftSidebar = memo30(
     takeoverContent
   }, ref) {
     const [tab, setTab] = useState66(getPersistedTab);
-    const tabRef = useRef69(tab);
+    const tabRef = useRef70(tab);
     tabRef.current = tab;
     const selectTab = useCallback84((t) => {
       setTab(t);
@@ -35354,7 +35494,7 @@ function StudioLeftSidebar({
 import { useState as useState75, useMemo as useMemo33 } from "react";
 
 // src/captions/components/CaptionOverlay.tsx
-import { memo as memo31, useState as useState67, useCallback as useCallback86, useRef as useRef70 } from "react";
+import { memo as memo31, useState as useState67, useCallback as useCallback86, useRef as useRef71 } from "react";
 
 // src/captions/keyboard.ts
 var CAPTION_NUDGE_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
@@ -35543,10 +35683,10 @@ var CaptionOverlay = memo31(function CaptionOverlay2({ iframeRef }) {
   const selectSegment = useCaptionStore((s) => s.selectSegment);
   const clearSelection = useCaptionStore((s) => s.clearSelection);
   const [wordBoxes, setWordBoxes] = useState67([]);
-  const overlayRef = useRef70(null);
-  const modelRef = useRef70(model);
+  const overlayRef = useRef71(null);
+  const modelRef = useRef71(model);
   modelRef.current = model;
-  const interactionRef = useRef70(null);
+  const interactionRef = useRef71(null);
   useMountEffect(() => {
     if (!isEditMode) return;
     let prevBoxes = [];
@@ -35833,7 +35973,7 @@ var CaptionOverlay = memo31(function CaptionOverlay2({ iframeRef }) {
 });
 
 // src/captions/components/CaptionTimeline.tsx
-import { memo as memo32, useCallback as useCallback87, useRef as useRef71 } from "react";
+import { memo as memo32, useCallback as useCallback87, useRef as useRef72 } from "react";
 import { jsx as jsx79, jsxs as jsxs67 } from "react/jsx-runtime";
 var GROUP_COLORS = [
   "#3CE6AC",
@@ -35856,7 +35996,7 @@ var CaptionTimeline = memo32(function CaptionTimeline2({
   const selectSegment = useCaptionStore((s) => s.selectSegment);
   const updateSegmentTiming = useCaptionStore((s) => s.updateSegmentTiming);
   const splitGroup = useCaptionStore((s) => s.splitGroup);
-  const dragRef = useRef71(null);
+  const dragRef = useRef72(null);
   const handleEdgePointerDown = useCallback87(
     (e, segId, edge, originalStart, originalEnd) => {
       e.stopPropagation();
@@ -35978,10 +36118,10 @@ var CaptionTimeline = memo32(function CaptionTimeline2({
 });
 
 // src/components/editor/DomEditOverlay.tsx
-import { memo as memo35, useEffect as useEffect52, useMemo as useMemo31, useRef as useRef75, useState as useState70 } from "react";
+import { memo as memo35, useEffect as useEffect53, useMemo as useMemo31, useRef as useRef76, useState as useState70 } from "react";
 
 // src/components/editor/marqueeCommit.ts
-import { useCallback as useCallback88, useRef as useRef72, useState as useState68 } from "react";
+import { useCallback as useCallback88, useRef as useRef73, useState as useState68 } from "react";
 
 // src/utils/marqueeGeometry.ts
 function rectsOverlap(a, b) {
@@ -36172,7 +36312,7 @@ async function runMarqueeIntersection(rect, iframe, overlayEl, activeComposition
   return hits;
 }
 function useMarqueeGestures(deps) {
-  const marqueeRef = useRef72(null);
+  const marqueeRef = useRef73(null);
   const [marqueeRect, setMarqueeRect] = useState68(null);
   const [candidateRects, setCandidateRects] = useState68([]);
   const commitMarquee = useCallback88(
@@ -36348,7 +36488,7 @@ function hasDomEditRotationChanged(initialAngle, nextAngle) {
 }
 
 // src/components/editor/useDomEditOverlayRects.ts
-import { useRef as useRef73, useState as useState69 } from "react";
+import { useRef as useRef74, useState as useState69 } from "react";
 function childRectsEqual(a, b) {
   if (a.length !== b.length) return false;
   for (let i = 0; i < a.length; i++) {
@@ -36369,13 +36509,13 @@ function useDomEditOverlayRects({
   const [hoverRect, setHoverRectState] = useState69(null);
   const [groupOverlayItems, setGroupOverlayItemsState] = useState69([]);
   const [childRects, setChildRectsState] = useState69([]);
-  const overlayRectRef = useRef73(null);
-  const hoverRectRef = useRef73(null);
-  const groupOverlayItemsRef = useRef73([]);
-  const resolvedElementRef = useRef73(null);
-  const resolvedHoverElementRef = useRef73(null);
-  const resolvedGroupElementRef = useRef73(/* @__PURE__ */ new Map());
-  const childRectsRef = useRef73([]);
+  const overlayRectRef = useRef74(null);
+  const hoverRectRef = useRef74(null);
+  const groupOverlayItemsRef = useRef74([]);
+  const resolvedElementRef = useRef74(null);
+  const resolvedHoverElementRef = useRef74(null);
+  const resolvedGroupElementRef = useRef74(/* @__PURE__ */ new Map());
+  const childRectsRef = useRef74([]);
   const setOverlayRect = (next) => {
     if (rectsEqual(overlayRectRef.current, next)) return;
     overlayRectRef.current = next;
@@ -37831,7 +37971,7 @@ function createDomEditOverlayGestureHandlers(opts) {
 }
 
 // src/components/editor/SnapGuideOverlay.tsx
-import { memo as memo33, useRef as useRef74 } from "react";
+import { memo as memo33, useRef as useRef75 } from "react";
 import { jsx as jsx82, jsxs as jsxs69 } from "react/jsx-runtime";
 var MAX_GUIDES = 6;
 var MAX_SPACING_GUIDES = 4;
@@ -37843,12 +37983,12 @@ var SnapGuideOverlay = memo33(function SnapGuideOverlay2({
   overlayWidth,
   overlayHeight
 }) {
-  const guideElsRef = useRef74([]);
-  const spacingElsRef = useRef74([]);
-  const spacingLabelElsRef = useRef74([]);
-  const overlayWidthRef = useRef74(overlayWidth);
+  const guideElsRef = useRef75([]);
+  const spacingElsRef = useRef75([]);
+  const spacingLabelElsRef = useRef75([]);
+  const overlayWidthRef = useRef75(overlayWidth);
   overlayWidthRef.current = overlayWidth;
-  const overlayHeightRef = useRef74(overlayHeight);
+  const overlayHeightRef = useRef75(overlayHeight);
   overlayHeightRef.current = overlayHeight;
   useMountEffect(() => {
     let frame = 0;
@@ -38030,9 +38170,9 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
   onRotationCommit,
   onMarqueeSelect
 }) {
-  const overlayRef = useRef75(null);
-  const boxRef = useRef75(null);
-  const onMarqueeSelectRef = useRef75(onMarqueeSelect);
+  const overlayRef = useRef76(null);
+  const boxRef = useRef76(null);
+  const onMarqueeSelectRef = useRef76(onMarqueeSelect);
   onMarqueeSelectRef.current = onMarqueeSelect;
   const selectionShapeStyles = (() => {
     const fallback = {
@@ -38056,39 +38196,39 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
       return fallback;
     }
   })();
-  const gestureRef = useRef75(null);
-  const groupGestureRef = useRef75(null);
-  const blockedMoveRef = useRef75(null);
-  const suppressNextBoxClickRef = useRef75(false);
-  const suppressNextBoxMouseDownRef = useRef75(false);
-  const suppressNextOverlayMouseDownRef = useRef75(false);
-  const snapGuidesRef = useRef75(null);
-  const rafPausedRef = useRef75(false);
-  const selectionRef = useRef75(selection);
+  const gestureRef = useRef76(null);
+  const groupGestureRef = useRef76(null);
+  const blockedMoveRef = useRef76(null);
+  const suppressNextBoxClickRef = useRef76(false);
+  const suppressNextBoxMouseDownRef = useRef76(false);
+  const suppressNextOverlayMouseDownRef = useRef76(false);
+  const snapGuidesRef = useRef76(null);
+  const rafPausedRef = useRef76(false);
+  const selectionRef = useRef76(selection);
   selectionRef.current = selection;
-  const activeCompositionPathRef = useRef75(activeCompositionPath);
+  const activeCompositionPathRef = useRef76(activeCompositionPath);
   activeCompositionPathRef.current = activeCompositionPath;
-  const groupSelectionsRef = useRef75(groupSelections);
+  const groupSelectionsRef = useRef76(groupSelections);
   groupSelectionsRef.current = groupSelections;
-  const hoverSelectionRef = useRef75(hoverSelection);
+  const hoverSelectionRef = useRef76(hoverSelection);
   hoverSelectionRef.current = hoverSelection;
-  const onPathOffsetCommitRef = useRef75(onPathOffsetCommit);
+  const onPathOffsetCommitRef = useRef76(onPathOffsetCommit);
   onPathOffsetCommitRef.current = onPathOffsetCommit;
-  const onGroupPathOffsetCommitRef = useRef75(onGroupPathOffsetCommit);
+  const onGroupPathOffsetCommitRef = useRef76(onGroupPathOffsetCommit);
   onGroupPathOffsetCommitRef.current = onGroupPathOffsetCommit;
-  const onBoxSizeCommitRef = useRef75(onBoxSizeCommit);
+  const onBoxSizeCommitRef = useRef76(onBoxSizeCommit);
   onBoxSizeCommitRef.current = onBoxSizeCommit;
-  const onRotationCommitRef = useRef75(onRotationCommit);
+  const onRotationCommitRef = useRef76(onRotationCommit);
   onRotationCommitRef.current = onRotationCommit;
-  const onBlockedMoveRef = useRef75(onBlockedMove);
+  const onBlockedMoveRef = useRef76(onBlockedMove);
   onBlockedMoveRef.current = onBlockedMove;
-  const onManualDragStartRef = useRef75(onManualDragStart);
+  const onManualDragStartRef = useRef76(onManualDragStart);
   onManualDragStartRef.current = onManualDragStart;
-  const onCanvasPointerMoveRef = useRef75(onCanvasPointerMove);
+  const onCanvasPointerMoveRef = useRef76(onCanvasPointerMove);
   onCanvasPointerMoveRef.current = onCanvasPointerMove;
-  const onCanvasPointerLeaveRef = useRef75(onCanvasPointerLeave);
+  const onCanvasPointerLeaveRef = useRef76(onCanvasPointerLeave);
   onCanvasPointerLeaveRef.current = onCanvasPointerLeave;
-  const onSelectionChangeRef = useRef75(onSelectionChange);
+  const onSelectionChangeRef = useRef76(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
   const {
     overlayRect,
@@ -38143,9 +38283,9 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
     frame = requestAnimationFrame(update);
     return () => cancelAnimationFrame(frame);
   });
-  const offCanvasElementsRef = useRef75(/* @__PURE__ */ new Map());
+  const offCanvasElementsRef = useRef76(/* @__PURE__ */ new Map());
   const [offCanvasRects, setOffCanvasRects] = useState70([]);
-  useEffect52(() => {
+  useEffect53(() => {
     const iframe = iframeRef.current;
     const overlay = overlayRef.current;
     if (!iframe || !overlay || compRect.width <= 0) {
@@ -38488,10 +38628,10 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
 });
 
 // src/components/editor/MotionPathOverlay.tsx
-import { memo as memo36, useEffect as useEffect54, useRef as useRef78, useState as useState72 } from "react";
+import { memo as memo36, useEffect as useEffect55, useRef as useRef79, useState as useState72 } from "react";
 
 // src/contexts/DomEditContext.tsx
-import { createContext as createContext6, useCallback as useCallback89, useContext as useContext6, useMemo as useMemo32, useRef as useRef76 } from "react";
+import { createContext as createContext6, useCallback as useCallback89, useContext as useContext6, useMemo as useMemo32, useRef as useRef77 } from "react";
 import { jsx as jsx85 } from "react/jsx-runtime";
 var DomEditActionsContext = createContext6(null);
 var DomEditSelectionContext = createContext6(null);
@@ -38587,7 +38727,7 @@ function DomEditProvider({
   },
   children
 }) {
-  const commitMutationRef = useRef76(commitMutation);
+  const commitMutationRef = useRef77(commitMutation);
   commitMutationRef.current = commitMutation;
   const stableCommitMutation = useCallback89(
     (mutation, options) => commitMutationRef.current(mutation, options),
@@ -38938,7 +39078,7 @@ function commitCreatePath(targetSelector, position, x, y, commit) {
 }
 
 // src/components/editor/useMotionPathData.ts
-import { useEffect as useEffect53, useRef as useRef77, useState as useState71 } from "react";
+import { useEffect as useEffect54, useRef as useRef78, useState as useState71 } from "react";
 function transformTranslate(el) {
   const t = el.ownerDocument?.defaultView?.getComputedStyle(el).transform;
   if (!t || t === "none") return { x: 0, y: 0 };
@@ -39004,12 +39144,12 @@ function hasMotionPathPlugin(iframe) {
 function useMotionPathData(iframeRef, selector) {
   const [rect, setRect] = useState71(null);
   const [geometry, setGeometry] = useState71(null);
-  const resolvedForRef = useRef77(null);
+  const resolvedForRef = useRef78(null);
   const geometryResolved = resolvedForRef.current === selector;
   const [visibleInPreview, setVisibleInPreview] = useState71(true);
   const [home, setHome] = useState71(null);
   const [pScale, setPScale] = useState71(1);
-  useEffect53(() => {
+  useEffect54(() => {
     if (!selector) {
       setRect(null);
       setHome(null);
@@ -39052,7 +39192,7 @@ function useMotionPathData(iframeRef, selector) {
     raf = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(raf);
   }, [selector, iframeRef]);
-  useEffect53(() => {
+  useEffect54(() => {
     if (!selector) {
       setGeometry(null);
       return;
@@ -39100,22 +39240,22 @@ var MotionPathOverlay = memo36(function MotionPathOverlay2({
   const armed = usePlayerStore((s) => s.motionPathArmed);
   const setMotionPathArmed = usePlayerStore((s) => s.setMotionPathArmed);
   const setMotionPathCreateAvailable = usePlayerStore((s) => s.setMotionPathCreateAvailable);
-  const dragRef = useRef78(null);
-  const parkTimerRef = useRef78(void 0);
+  const dragRef = useRef79(null);
+  const parkTimerRef = useRef79(void 0);
   const animId = editableAnimationId(selectedGsapAnimations ?? [], geometry?.kind ?? "linear");
-  useEffect54(() => () => clearTimeout(parkTimerRef.current), [animId]);
+  useEffect55(() => () => clearTimeout(parkTimerRef.current), [animId]);
   const createMode = geometryResolved && !geometry && Boolean(selection?.element) && !isPlaying;
   const createSelector = createMode ? selectorFor(selection) : null;
   const compW = compositionSize?.width ?? null;
   const canCreate = createMode && hasMotionPathPlugin(iframeRef.current);
-  useEffect54(() => {
+  useEffect55(() => {
     setMotionPathCreateAvailable(Boolean(canCreate));
     return () => setMotionPathCreateAvailable(false);
   }, [canCreate, setMotionPathCreateAvailable]);
-  useEffect54(() => {
+  useEffect55(() => {
     if (armed && !canCreate) setMotionPathArmed(false);
   }, [armed, canCreate, setMotionPathArmed]);
-  useEffect54(() => {
+  useEffect55(() => {
     if (!armed || !createSelector || !compW) return;
     const surface = iframeRef.current?.ownerDocument?.querySelector(
       "[data-preview-pan-surface]"
@@ -39416,7 +39556,7 @@ var MotionPathOverlay = memo36(function MotionPathOverlay2({
 });
 
 // src/components/editor/SnapToolbar.tsx
-import { memo as memo37, useCallback as useCallback90, useEffect as useEffect55, useRef as useRef79, useState as useState73 } from "react";
+import { memo as memo37, useCallback as useCallback90, useEffect as useEffect56, useRef as useRef80, useState as useState73 } from "react";
 import { MagnetStraight, GridFour, Path } from "@phosphor-icons/react";
 import { jsx as jsx88, jsxs as jsxs73 } from "react/jsx-runtime";
 var SNAP_DEFAULTS = {
@@ -39440,8 +39580,8 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
   const motionPathCreateAvailable = usePlayerStore((s) => s.motionPathCreateAvailable);
   const motionPathArmed = usePlayerStore((s) => s.motionPathArmed);
   const setMotionPathArmed = usePlayerStore((s) => s.setMotionPathArmed);
-  const popoverRef = useRef79(null);
-  const gridButtonRef = useRef79(null);
+  const popoverRef = useRef80(null);
+  const gridButtonRef = useRef80(null);
   const updatePrefs = useCallback90(
     (patch) => {
       setPrefs((prev) => {
@@ -39459,7 +39599,7 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
   const toggleGrid = useCallback90(() => {
     updatePrefs({ gridVisible: !prefs.gridVisible });
   }, [prefs.gridVisible, updatePrefs]);
-  useEffect55(() => {
+  useEffect56(() => {
     const handleKeyDown = (e) => {
       const t = e.target;
       if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) return;
@@ -39477,7 +39617,7 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [updatePrefs]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (!gridPopoverOpen) return;
     const handleClickOutside = (e) => {
       const target = e.target;
@@ -39580,7 +39720,7 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
 });
 
 // src/components/StudioFeedbackBar.tsx
-import { memo as memo38, useState as useState74, useCallback as useCallback91, useRef as useRef80, useEffect as useEffect56 } from "react";
+import { memo as memo38, useState as useState74, useCallback as useCallback91, useRef as useRef81, useEffect as useEffect57 } from "react";
 import { Fragment as Fragment29, jsx as jsx89, jsxs as jsxs74 } from "react/jsx-runtime";
 var DEFAULT_FEEDBACK_INTERVAL = 10;
 var AUTO_DISMISS_MS = 2e4;
@@ -39639,9 +39779,9 @@ var StudioFeedbackBar = memo38(function StudioFeedbackBar2() {
   const [comment, setComment] = useState74("");
   const [submitted, setSubmitted] = useState74(false);
   const [exiting, setExiting] = useState74(false);
-  const inputRef = useRef80(null);
-  const dismissTimerRef = useRef80(null);
-  useEffect56(() => {
+  const inputRef = useRef81(null);
+  const dismissTimerRef = useRef81(null);
+  useEffect57(() => {
     incrementSessionCount();
     const showTimer = setTimeout(() => {
       if (shouldShowFeedback()) {
@@ -39650,7 +39790,7 @@ var StudioFeedbackBar = memo38(function StudioFeedbackBar2() {
     }, 3e3);
     return () => clearTimeout(showTimer);
   }, []);
-  useEffect56(() => {
+  useEffect57(() => {
     if (!visible || rating !== null || submitted) return;
     dismissTimerRef.current = setTimeout(() => {
       handleDismiss();
@@ -39659,7 +39799,7 @@ var StudioFeedbackBar = memo38(function StudioFeedbackBar2() {
       if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
     };
   }, [visible, rating, submitted]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (rating !== null && inputRef.current) {
       inputRef.current.focus();
     }
@@ -40005,15 +40145,15 @@ function StudioPreviewArea({
 import {
   useCallback as useCallback101,
   useMemo as useMemo34,
-  useRef as useRef85,
+  useRef as useRef86,
   useState as useState84
 } from "react";
 
 // src/components/editor/LayersPanel.tsx
-import { memo as memo39, useState as useState77, useCallback as useCallback93, useEffect as useEffect57, useRef as useRef82 } from "react";
+import { memo as memo39, useState as useState77, useCallback as useCallback93, useEffect as useEffect58, useRef as useRef83 } from "react";
 
 // src/components/editor/useLayerDrag.ts
-import { useRef as useRef81, useState as useState76, useCallback as useCallback92 } from "react";
+import { useRef as useRef82, useState as useState76, useCallback as useCallback92 } from "react";
 var DRAG_THRESHOLD_PX2 = 4;
 function isLayerDraggable(layer) {
   if (!(layer.selector || layer.id)) return false;
@@ -40080,7 +40220,7 @@ function useLayerDrag({
   onReorder,
   onSingleSibling
 }) {
-  const dragRef = useRef81(null);
+  const dragRef = useRef82(null);
   const [dragKey, setDragKey] = useState76(null);
   const [insertionLineY, setInsertionLineY] = useState76(null);
   const handleRowPointerDown = useCallback92(
@@ -40210,8 +40350,8 @@ var LayersPanel = memo39(function LayersPanel2() {
   } = useDomEditContext();
   const [layers, setLayers] = useState77([]);
   const [collapsed, setCollapsed] = useState77({});
-  const prevDocVersionRef = useRef82(0);
-  const scrollContainerRef = useRef82(null);
+  const prevDocVersionRef = useRef83(0);
+  const scrollContainerRef = useRef83(null);
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
   const collectLayers = useCallback93(() => {
     const iframe = previewIframeRef.current;
@@ -40233,10 +40373,10 @@ var LayersPanel = memo39(function LayersPanel2() {
     });
     setLayers(sortLayersByZIndex(items));
   }, [previewIframeRef, activeCompPath, isMasterView, activeGroupElement, setActiveGroupElement]);
-  useEffect57(() => {
+  useEffect58(() => {
     collectLayers();
   }, [collectLayers, refreshKey]);
-  useEffect57(() => {
+  useEffect58(() => {
     const iframe = previewIframeRef.current;
     if (!iframe) return;
     const handleLoad = () => {
@@ -40246,7 +40386,7 @@ var LayersPanel = memo39(function LayersPanel2() {
     iframe.addEventListener("load", handleLoad);
     return () => iframe.removeEventListener("load", handleLoad);
   }, [previewIframeRef, collectLayers]);
-  useEffect57(() => {
+  useEffect58(() => {
     if (!compositionLoading) {
       const timer = setTimeout(collectLayers, 100);
       return () => clearTimeout(timer);
@@ -41121,7 +41261,7 @@ function ParamControl({
 }
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo44, useState as useState81, useRef as useRef83, useEffect as useEffect58 } from "react";
+import { memo as memo44, useState as useState81, useRef as useRef84, useEffect as useEffect59 } from "react";
 
 // src/components/renders/RenderQueueItem.tsx
 import { memo as memo43, useCallback as useCallback97, useState as useState80 } from "react";
@@ -41336,7 +41476,7 @@ var FORMAT_INFO = {
 };
 function FormatInfoTooltip({ format }) {
   const [open, setOpen] = useState81(false);
-  const timeoutRef = useRef83(void 0);
+  const timeoutRef = useRef84(void 0);
   const show = () => {
     clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -41344,7 +41484,7 @@ function FormatInfoTooltip({ format }) {
   const hide = () => {
     timeoutRef.current = setTimeout(() => setOpen(false), 120);
   };
-  useEffect58(() => () => clearTimeout(timeoutRef.current), []);
+  useEffect59(() => () => clearTimeout(timeoutRef.current), []);
   const info = FORMAT_INFO[format];
   return /* @__PURE__ */ jsxs82("div", { className: "relative", onPointerEnter: show, onPointerLeave: hide, children: [
     /* @__PURE__ */ jsxs82(
@@ -41503,8 +41643,8 @@ var RenderQueue = memo44(function RenderQueue2({
   isRendering,
   compositionDimensions
 }) {
-  const listRef = useRef83(null);
-  useEffect58(() => {
+  const listRef = useRef84(null);
+  useEffect59(() => {
     if (listRef.current) {
       listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
     }
@@ -41586,7 +41726,7 @@ var RenderQueue = memo44(function RenderQueue2({
 });
 
 // src/components/panels/SlideshowPanel.tsx
-import { useState as useState83, useEffect as useEffect59, useCallback as useCallback99, useRef as useRef84 } from "react";
+import { useState as useState83, useEffect as useEffect60, useCallback as useCallback99, useRef as useRef85 } from "react";
 import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
@@ -42223,9 +42363,9 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   );
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { domEditSelection } = useDomEditSelectionContext();
-  const manifestRef = useRef84(manifest);
-  const notesCtrlRef = useRef84(makeSlideshowNotesController());
-  useEffect59(() => {
+  const manifestRef = useRef85(manifest);
+  const notesCtrlRef = useRef85(makeSlideshowNotesController());
+  useEffect60(() => {
     if (!compHtml) {
       notesCtrlRef.current.flush();
       setManifest({ slides: [] });
@@ -42259,7 +42399,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [onPersistNotes]
   );
-  useEffect59(() => {
+  useEffect60(() => {
     const ctrl = notesCtrlRef.current;
     return () => {
       ctrl.flush();
@@ -42673,8 +42813,8 @@ function StudioRightPanel({
     coalesceKey: activeCompPath ? `slideshow-notes:${activeCompPath}` : "slideshow-notes"
   });
   const [layersPanePercent, setLayersPanePercent] = useState84(40);
-  const splitContainerRef = useRef85(null);
-  const splitDragRef = useRef85(null);
+  const splitContainerRef = useRef86(null);
+  const splitDragRef = useRef86(null);
   const renderJobs = renderQueue.jobs;
   const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
   const slideshowScenes = useMemo34(() => {
@@ -42910,7 +43050,7 @@ function StudioRightPanel({
 }
 
 // src/components/TimelineToolbar.tsx
-import { useRef as useRef86 } from "react";
+import { useRef as useRef87 } from "react";
 
 // src/hooks/useEnableKeyframes.ts
 import { useCallback as useCallback102 } from "react";
@@ -43185,7 +43325,7 @@ function useEnableKeyframes(sessionRef) {
 import { Fragment as Fragment34, jsx as jsx101, jsxs as jsxs86 } from "react/jsx-runtime";
 function useKeyframeToggle(session) {
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const sessionRef = useRef86(session);
+  const sessionRef = useRef87(session);
   sessionRef.current = session;
   const onToggle = useEnableKeyframes(
     sessionRef
@@ -43375,14 +43515,14 @@ function TimelineToolbar({
 }
 
 // src/hooks/useStoryboard.ts
-import { useCallback as useCallback103, useEffect as useEffect60, useState as useState85 } from "react";
+import { useCallback as useCallback103, useEffect as useEffect61, useState as useState85 } from "react";
 function useStoryboard(projectId) {
   const [data, setData] = useState85(null);
   const [loading, setLoading] = useState85(true);
   const [error, setError] = useState85(null);
   const [reloadKey, setReloadKey] = useState85(0);
   const reload = useCallback103(() => setReloadKey((k) => k + 1), []);
-  useEffect60(() => {
+  useEffect61(() => {
     if (!projectId) return;
     let cancelled = false;
     setLoading(true);
@@ -43428,11 +43568,11 @@ function StoryboardDirection({ globals, frameCount }) {
 }
 
 // src/components/storyboard/FramePoster.tsx
-import { useEffect as useEffect61, useState as useState86 } from "react";
+import { useEffect as useEffect62, useState as useState86 } from "react";
 import { jsx as jsx103 } from "react/jsx-runtime";
 function FramePoster({ projectId, src, seconds, title, fit = "cover" }) {
   const [failed2, setFailed] = useState86(false);
-  useEffect61(() => setFailed(false), [src, seconds]);
+  useEffect62(() => setFailed(false), [src, seconds]);
   if (failed2) {
     return /* @__PURE__ */ jsx103("div", { className: "flex h-full w-full items-center justify-center text-[11px] text-neutral-600", children: "Preview unavailable" });
   }
@@ -43605,7 +43745,7 @@ function StoryboardScriptPanel({ script }) {
 }
 
 // src/components/storyboard/StoryboardSourceEditor.tsx
-import { useCallback as useCallback104, useEffect as useEffect62, useMemo as useMemo35, useRef as useRef87, useState as useState87 } from "react";
+import { useCallback as useCallback104, useEffect as useEffect63, useMemo as useMemo35, useRef as useRef88, useState as useState87 } from "react";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { jsx as jsx108, jsxs as jsxs91 } from "react/jsx-runtime";
@@ -43617,7 +43757,7 @@ function useEditableFile(path, onSaved) {
   const [loading, setLoading] = useState87(true);
   const [saving, setSaving] = useState87(false);
   const [error, setError] = useState87(null);
-  useEffect62(() => {
+  useEffect63(() => {
     if (!path) return;
     let cancelled = false;
     setLoading(true);
@@ -43654,8 +43794,8 @@ function hardenLinks(node) {
 }
 function useMarkdownPreview(source) {
   const [debounced, setDebounced] = useState87(source);
-  const primed = useRef87(false);
-  useEffect62(() => {
+  const primed = useRef88(false);
+  useEffect63(() => {
     if (!primed.current && source !== "") {
       primed.current = true;
       setDebounced(source);
@@ -43687,8 +43827,8 @@ function StoryboardSourceEditor({
   const activePath = files.some((f) => f.path === selected) ? selected : files[0]?.path ?? "";
   const file = useEditableFile(activePath, onSaved);
   const previewHtml = useMarkdownPreview(file.content);
-  useEffect62(() => onDirtyChange?.(file.dirty), [onDirtyChange, file.dirty]);
-  useEffect62(() => {
+  useEffect63(() => onDirtyChange?.(file.dirty), [onDirtyChange, file.dirty]);
+  useEffect63(() => {
     if (!file.dirty) return;
     const onBeforeUnload = (event) => {
       event.preventDefault();
@@ -43760,7 +43900,7 @@ function StoryboardSourceEditor({
 }
 
 // src/components/storyboard/StoryboardFrameFocus.tsx
-import { useCallback as useCallback105, useEffect as useEffect63, useState as useState88 } from "react";
+import { useCallback as useCallback105, useEffect as useEffect64, useState as useState88 } from "react";
 import { setFrameStatus, setFrameVoiceover } from "@hyperframes/core/storyboard";
 import { jsx as jsx109, jsxs as jsxs92 } from "react/jsx-runtime";
 function StoryboardFrameFocus({
@@ -43805,7 +43945,7 @@ function StoryboardFrameFocus({
   const handleNavigate = (delta) => {
     if (confirmLeave()) onNavigate(delta);
   };
-  useEffect63(() => {
+  useEffect64(() => {
     const onKey = (e) => {
       const el = document.activeElement;
       if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) return;
@@ -44121,7 +44261,7 @@ function StudioSplash({ waiting }) {
 }
 
 // src/hooks/useServerConnection.ts
-import { useEffect as useEffect64, useState as useState90 } from "react";
+import { useEffect as useEffect65, useState as useState90 } from "react";
 function useServerConnection() {
   const [projectId, setProjectId] = useState90(null);
   const [resolving, setResolving] = useState90(true);
@@ -44162,7 +44302,7 @@ function useServerConnection() {
       if (retryTimer !== null) clearTimeout(retryTimer);
     };
   });
-  useEffect64(() => {
+  useEffect65(() => {
     const onHashChange = () => {
       const next = parseProjectIdFromHash(window.location.hash);
       if (next && next !== projectId) setProjectId(next);
@@ -44177,9 +44317,9 @@ function useServerConnection() {
 import { jsx as jsx113, jsxs as jsxs96 } from "react/jsx-runtime";
 function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
-  const initialUrlStateRef = useRef88(readStudioUrlStateFromWindow());
+  const initialUrlStateRef = useRef89(readStudioUrlStateFromWindow());
   const viewModeValue = useViewModeState(STUDIO_STORYBOARD_ENABLED);
-  useEffect65(() => {
+  useEffect66(() => {
     if (resolving || waitingForServer) return;
     if (hasFiredSessionStart()) return;
     markSessionStartFired();
@@ -44193,12 +44333,12 @@ function StudioApp() {
   const [previewIframe, setPreviewIframe] = useState91(null);
   const [compositionLoading, setCompositionLoading] = useState91(true);
   const [refreshKey, setRefreshKey] = useState91(0);
-  const [, setPreviewDocumentVersion] = useState91(0);
+  const [previewDocumentVersion, setPreviewDocumentVersion] = useState91(0);
   const [blockPreview, setBlockPreview] = useState91(null);
-  const previewIframeRef = useRef88(null);
-  const activeCompPathRef = useRef88(activeCompPath);
+  const previewIframeRef = useRef89(null);
+  const activeCompPathRef = useRef89(activeCompPath);
   activeCompPathRef.current = activeCompPath;
-  const leftSidebarRef = useRef88(null);
+  const leftSidebarRef = useRef89(null);
   const renderQueue = useRenderQueue(projectId);
   const captionEditMode = useCaptionStore((s) => s.isEditMode);
   const captionHasSelection = useCaptionStore((s) => s.selectedSegmentIds.size > 0);
@@ -44213,7 +44353,7 @@ function StudioApp() {
     const maxEnd = timelineElements.length > 0 ? Math.max(...timelineElements.map((el) => el.start + el.duration)) : 0;
     return Math.max(timelineDuration, maxEnd);
   }, [timelineDuration, timelineElements]);
-  const refreshTimersRef = useRef88([]);
+  const refreshTimersRef = useRef89([]);
   const refreshPreviewDocumentVersion = useCallback106(() => {
     for (const id of refreshTimersRef.current) clearTimeout(id);
     refreshTimersRef.current = [];
@@ -44223,7 +44363,7 @@ function StudioApp() {
       window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 300)
     );
   }, []);
-  useEffect65(
+  useEffect66(
     () => () => {
       for (const id of refreshTimersRef.current) clearTimeout(id);
     },
@@ -44244,9 +44384,9 @@ function StudioApp() {
     rightPanelTab: initialUrlStateRef.current.rightPanelTab
   });
   const editHistory = usePersistentEditHistory({ projectId });
-  const domEditSaveTimestampRef = useRef88(0);
-  const pendingTimelineEditPathRef = useRef88(/* @__PURE__ */ new Set());
-  const isGestureRecordingRef = useRef88(false);
+  const domEditSaveTimestampRef = useRef89(0);
+  const pendingTimelineEditPathRef = useRef89(/* @__PURE__ */ new Set());
+  const isGestureRecordingRef = useRef89(false);
   const reloadPreview = useCallback106(() => setRefreshKey((k) => k + 1), []);
   const fileManager = useFileManager({
     projectId,
@@ -44256,7 +44396,7 @@ function StudioApp() {
     setRefreshKey
   });
   const sdkHandle = useSdkSession(projectId, activeCompPath, domEditSaveTimestampRef);
-  useEffect65(() => {
+  useEffect66(() => {
     if (activeCompPathHydrated) return;
     if (!fileManager.fileTreeLoaded) return;
     const nextCompPath = normalizeStudioCompositionPath(
@@ -44316,18 +44456,18 @@ function StudioApp() {
     setRightCollapsed: panelLayout.setRightCollapsed,
     setRightPanelTab: panelLayout.setRightPanelTab
   });
-  const clearDomSelectionRef = useRef88(() => {
+  const clearDomSelectionRef = useRef89(() => {
   });
-  const domEditSelectionBridgeRef = useRef88(null);
-  const handleDomEditElementDeleteRef = useRef88(
+  const domEditSelectionBridgeRef = useRef89(null);
+  const handleDomEditElementDeleteRef = useRef89(
     async () => {
     }
   );
   const domEditDeleteBridge = (s) => handleDomEditElementDeleteRef.current(s);
-  const resetKeyframesRef = useRef88(() => false);
-  const deleteSelectedKeyframesRef = useRef88(() => {
+  const resetKeyframesRef = useRef89(() => false);
+  const deleteSelectedKeyframesRef = useRef89(() => {
   });
-  const invalidateGsapCacheRef = useRef88(() => {
+  const invalidateGsapCacheRef = useRef89(() => {
   });
   const { handleCopy, handlePaste, handleCut } = useClipboard({
     projectId,
@@ -44370,7 +44510,7 @@ function StudioApp() {
     forceReloadSdkSession: sdkHandle.forceReload,
     onToggleRecording: STUDIO_KEYFRAMES_ENABLED ? () => handleToggleRecordingRef.current() : void 0
   });
-  const sidebarTabRef = useRef88({
+  const sidebarTabRef = useRef89({
     select: (t) => leftSidebarRef.current?.selectTab(t),
     get: () => leftSidebarRef.current?.getTab() ?? "compositions"
   });
@@ -44400,6 +44540,7 @@ function StudioApp() {
     projectIdRef: fileManager.projectIdRef,
     previewIframe,
     refreshKey,
+    previewDocumentVersion,
     rightPanelTab: panelLayout.rightPanelTab,
     applyStudioManualEditsToPreviewRef: previewPersistence.applyStudioManualEditsToPreviewRef,
     syncPreviewHistoryHotkey: appHotkeys.syncPreviewHistoryHotkey,
@@ -44462,9 +44603,9 @@ function StudioApp() {
     resetErrors: resetConsoleErrors
   } = useConsoleErrorCapture(previewIframe);
   const dragOverlay = useDragOverlay(fileManager.handleImportFiles);
-  const handleToggleRecordingRef = useRef88(() => {
+  const handleToggleRecordingRef = useRef89(() => {
   });
-  const domEditSessionRef = useRef88(domEditSession);
+  const domEditSessionRef = useRef89(domEditSession);
   domEditSessionRef.current = domEditSession;
   const { gestureState, gestureRecording, handleToggleRecording } = useGestureCommit({
     domEditSessionRef,
@@ -44473,7 +44614,7 @@ function StudioApp() {
     isGestureRecordingRef
   });
   handleToggleRecordingRef.current = handleToggleRecording;
-  const canvasRectRef = useRef88(null);
+  const canvasRectRef = useRef89(null);
   useLayoutEffect3(() => {
     if (gestureState !== "recording" || !previewIframe) {
       canvasRectRef.current = null;
@@ -44699,11 +44840,11 @@ function StudioApp() {
 }
 
 // src/hooks/useElementPicker.ts
-import { useState as useState92, useCallback as useCallback107, useRef as useRef89 } from "react";
+import { useState as useState92, useCallback as useCallback107, useRef as useRef90 } from "react";
 function useElementPicker(iframeRef, options) {
   const [isPickMode, setIsPickMode] = useState92(false);
   const [pickedElement, setPickedElement] = useState92(null);
-  const activeOverrideRef = useRef89(null);
+  const activeOverrideRef = useRef90(null);
   const getActiveIframe = useCallback107(() => {
     return activeOverrideRef.current ?? iframeRef.current;
   }, [iframeRef]);
@@ -44782,7 +44923,7 @@ function useElementPicker(iframeRef, options) {
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   });
-  const optionsRef = useRef89(options);
+  const optionsRef = useRef90(options);
   optionsRef.current = options;
   const syncToSource = useCallback107(
     (elementId, selector, op) => {
@@ -44893,7 +45034,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const activeIframeRef = useRef89(null);
+  const activeIframeRef = useRef90(null);
   activeIframeRef.current = getActiveIframe();
   return {
     isPickMode,