ntvframes 0.8.22 → 0.8.24

package/dist/studio/index.js

@@ -61438,7 +61438,7 @@ var FileTree = memo34(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState157, useCallback as useCallback177, useRef as useRef171, useMemo as useMemo77, useLayoutEffect as useLayoutEffect10 } from "react";
+import { useState as useState157, useCallback as useCallback177, useRef as useRef172, useMemo as useMemo77, useLayoutEffect as useLayoutEffect10 } from "react";
 
 // src/components/renders/useRenderQueue.ts
 import { useState as useState94, useEffect as useEffect87, useCallback as useCallback80, useRef as useRef103, useMemo as useMemo56 } from "react";
@@ -62337,7 +62337,7 @@ function AskAgentModal({
 }
 
 // src/components/AgentRevisionQueue.tsx
-import { useState as useState97 } from "react";
+import { useEffect as useEffect89, useRef as useRef107, useState as useState97 } from "react";
 import { Fragment as Fragment46, jsx as jsx161, jsxs as jsxs133 } from "react/jsx-runtime";
 function formatRevisionTime(value) {
   const date = new Date(value);
@@ -62353,7 +62353,14 @@ function AgentRevisionQueue({
   const [open, setOpen] = useState97(false);
   const [submitting, setSubmitting] = useState97(false);
   const [submitState, setSubmitState] = useState97("idle");
+  const reloadedSubmissionRef = useRef107(null);
   const sessionActive = submission?.status === "queued" || submission?.status === "running";
+  useEffect89(() => {
+    if (submission?.status === "completed" && submission.submissionId !== reloadedSubmissionRef.current) {
+      reloadedSubmissionRef.current = submission.submissionId;
+      window.location.reload();
+    }
+  }, [submission]);
   if (!revisions.length && !submission) return null;
   const submitBatch = async () => {
     setSubmitting(true);
@@ -62572,7 +62579,7 @@ function StudioToast({ message, tone, leaving, onDismiss }) {
 }
 
 // src/components/feedback/StudioFeedbackCard.tsx
-import { memo as memo35, useState as useState98, useCallback as useCallback82, useRef as useRef107, useEffect as useEffect89 } from "react";
+import { memo as memo35, useState as useState98, useCallback as useCallback82, useRef as useRef108, useEffect as useEffect90 } from "react";
 
 // src/components/feedback/projectProvenance.ts
 var CONFIG_FILES = ["ntvframes.json", "hyperframes.json"];
@@ -62655,9 +62662,9 @@ var StudioFeedbackCard = memo35(function StudioFeedbackCard2() {
   const [comment, setComment] = useState98("");
   const [hint, setHint] = useState98(null);
   const [exiting, setExiting] = useState98(false);
-  const inputRef = useRef107(null);
-  const timerRef = useRef107(null);
-  const stateRef = useRef107({ request, rating, step });
+  const inputRef = useRef108(null);
+  const timerRef = useRef108(null);
+  const stateRef = useRef108({ request, rating, step });
   stateRef.current = { request, rating, step };
   const clearTimer = useCallback82(() => {
     if (timerRef.current) {
@@ -62692,7 +62699,7 @@ var StudioFeedbackCard = memo35(function StudioFeedbackCard2() {
     },
     [clearTimer]
   );
-  useEffect89(
+  useEffect90(
     () => subscribeToFeedbackRequests((next) => {
       setRequest(next);
       setRating(null);
@@ -62704,12 +62711,12 @@ var StudioFeedbackCard = memo35(function StudioFeedbackCard2() {
     }),
     []
   );
-  useEffect89(() => {
+  useEffect90(() => {
     if (!request || step === "thanks" || rating !== null || comment !== "") return;
     timerRef.current = setTimeout(() => close("timeout"), AUTO_DISMISS_MS);
     return clearTimer;
   }, [request, step, rating, comment, close, clearTimer]);
-  useEffect89(() => {
+  useEffect90(() => {
     if (step === "comment") inputRef.current?.focus();
   }, [step]);
   const submit = useCallback82(
@@ -63012,7 +63019,7 @@ function SaveQueuePausedBanner({ message, onRetry }) {
 }
 
 // src/components/ExternalFileConflictBanner.tsx
-import { useRef as useRef108, useState as useState99 } from "react";
+import { useRef as useRef109, useState as useState99 } from "react";
 import { Fragment as Fragment49, jsx as jsx167, jsxs as jsxs139 } from "react/jsx-runtime";
 function errorMessage(error) {
   return error instanceof Error ? error.message : String(error);
@@ -63029,7 +63036,7 @@ function ConflictReview({
   conflict,
   onClose
 }) {
-  const containerRef = useRef108(null);
+  const containerRef = useRef109(null);
   useDialogBehavior({ open: true, onClose, containerRef });
   const external = conflict.error.currentContent ?? "(The server did not return file contents.)";
   const studio = conflict.error.attemptedContent;
@@ -63106,7 +63113,7 @@ function FailedDraftReview({
   content,
   onClose
 }) {
-  const containerRef = useRef108(null);
+  const containerRef = useRef109(null);
   useDialogBehavior({ open: true, onClose, containerRef });
   return /* @__PURE__ */ jsx167(
     "div",
@@ -63242,7 +63249,7 @@ function ExternalFileConflictBanner({
 }
 
 // src/captions/hooks/useCaptionSync.ts
-import { useCallback as useCallback83, useRef as useRef109 } from "react";
+import { useCallback as useCallback83, useRef as useRef110 } from "react";
 function buildOverrides(model) {
   const entries = [];
   let globalWordIndex = 0;
@@ -63273,12 +63280,12 @@ function buildOverrides(model) {
   return entries;
 }
 function useCaptionSync(projectId) {
-  const projectIdRef = useRef109(projectId);
+  const projectIdRef = useRef110(projectId);
   projectIdRef.current = projectId;
-  const debounceRef = useRef109(null);
-  const suppressSaveRef = useRef109(false);
-  const pendingRef = useRef109(false);
-  const editSeqRef = useRef109(0);
+  const debounceRef = useRef110(null);
+  const suppressSaveRef = useRef110(false);
+  const pendingRef = useRef110(false);
+  const editSeqRef = useRef110(0);
   const save = useCallback83(() => {
     const state = useCaptionStore.getState();
     if (!state.model || !state.sourceFilePath) {
@@ -63405,7 +63412,7 @@ function useCaptionSync(projectId) {
 }
 
 // src/hooks/usePersistentEditHistory.ts
-import { useCallback as useCallback84, useEffect as useEffect90, useMemo as useMemo57, useRef as useRef110, useState as useState100 } from "react";
+import { useCallback as useCallback84, useEffect as useEffect91, useMemo as useMemo57, useRef as useRef111, useState as useState100 } from "react";
 
 // src/utils/editHistory.ts
 var DEFAULT_MAX_ENTRIES = 100;
@@ -63765,11 +63772,11 @@ function usePersistentEditHistory(options) {
   const [state, setState] = useState100(() => createEmptyEditHistory());
   const [loaded, setLoaded] = useState100(false);
   const projectId = options.projectId;
-  const storeRef = useRef110(null);
-  const storeProjectIdRef = useRef110(null);
-  const activeProjectIdRef = useRef110(projectId);
+  const storeRef = useRef111(null);
+  const storeProjectIdRef = useRef111(null);
+  const activeProjectIdRef = useRef111(projectId);
   activeProjectIdRef.current = projectId;
-  useEffect90(() => {
+  useEffect91(() => {
     let cancelled = false;
     const emptyState = createEmptyEditHistory();
     storeRef.current = null;
@@ -63852,7 +63859,7 @@ function usePersistentEditHistory(options) {
 }
 
 // src/hooks/usePanelLayout.ts
-import { useState as useState101, useCallback as useCallback85, useRef as useRef111, useEffect as useEffect91 } from "react";
+import { useState as useState101, useCallback as useCallback85, useRef as useRef112, useEffect as useEffect92 } from "react";
 var NO_OVERRIDE = { left: false, right: false };
 function getInitialRightInspectorPanes(tab) {
   if (tab === "layers") return { layers: true, design: false };
@@ -63879,15 +63886,15 @@ function usePanelLayout(initialState2) {
   const [rightPanelTab, setRightPanelTab] = useState101(
     initialState2?.rightPanelTab ?? "design"
   );
-  const rightPanelTabRef = useRef111(rightPanelTab);
+  const rightPanelTabRef = useRef112(rightPanelTab);
   rightPanelTabRef.current = rightPanelTab;
   const [rightInspectorPanes, setRightInspectorPanes] = useState101(
     () => getInitialRightInspectorPanes(initialState2?.rightPanelTab)
   );
-  const rightInspectorPanesRef = useRef111(rightInspectorPanes);
+  const rightInspectorPanesRef = useRef112(rightInspectorPanes);
   rightInspectorPanesRef.current = rightInspectorPanes;
   const [autoCollapseOverride, setAutoCollapseOverride] = useState101(NO_OVERRIDE);
-  useEffect91(() => {
+  useEffect92(() => {
     if (typeof window === "undefined") return;
     const handleResize = () => {
       const width = window.innerWidth;
@@ -63902,10 +63909,10 @@ function usePanelLayout(initialState2) {
   const fitted = fitPanelWidths(viewportWidth, preferredWidths, autoCollapseOverride);
   const leftCollapsedByWidth = fitted.autoCollapseLeft;
   const rightCollapsedByWidth = fitted.autoCollapseRight;
-  const fittedRef = useRef111(fitted);
+  const fittedRef = useRef112(fitted);
   fittedRef.current = fitted;
-  const panelDragRef = useRef111(null);
-  const preferredRef = useRef111(preferredWidths);
+  const panelDragRef = useRef112(null);
+  const preferredRef = useRef112(preferredWidths);
   const setPreferred = useCallback85((side, width) => {
     const next = Math.max(0, Math.round(width));
     preferredRef.current = { ...preferredRef.current, [side]: next };
@@ -63933,7 +63940,7 @@ function usePanelLayout(initialState2) {
     },
     [commitPanelWidth]
   );
-  const effectiveLeftCollapsedRef = useRef111(false);
+  const effectiveLeftCollapsedRef = useRef112(false);
   effectiveLeftCollapsedRef.current = leftCollapsed || leftCollapsedByWidth;
   const toggleLeftSidebar = useCallback85(() => {
     const next = !effectiveLeftCollapsedRef.current;
@@ -64026,16 +64033,16 @@ function usePanelLayout(initialState2) {
 }
 
 // src/hooks/useFileManager.ts
-import { useState as useState103, useCallback as useCallback88, useMemo as useMemo59, useRef as useRef113 } from "react";
+import { useState as useState103, useCallback as useCallback88, useMemo as useMemo59, useRef as useRef114 } from "react";
 
 // src/hooks/useFileTree.ts
-import { useState as useState102, useCallback as useCallback86, useEffect as useEffect92, useMemo as useMemo58 } from "react";
+import { useState as useState102, useCallback as useCallback86, useEffect as useEffect93, useMemo as useMemo58 } from "react";
 function useFileTree({ projectId, projectIdRef }) {
   const [projectDir, setProjectDir] = useState102(null);
   const [fileTree, setFileTree] = useState102([]);
   const [compositionPaths, setCompositionPaths] = useState102([]);
   const [fileTreeLoaded, setFileTreeLoaded] = useState102(false);
-  useEffect92(() => {
+  useEffect93(() => {
     if (!projectId) {
       setFileTreeLoaded(false);
       return;
@@ -64090,7 +64097,7 @@ function useFileTree({ projectId, projectIdRef }) {
 }
 
 // src/hooks/useEditorSave.ts
-import { useCallback as useCallback87, useRef as useRef112 } from "react";
+import { useCallback as useCallback87, useRef as useRef113 } from "react";
 var FAILURE_BURST_MS = 5e3;
 function useEditorSave({
   editingPathRef,
@@ -64102,13 +64109,13 @@ function useEditorSave({
   setRefreshKey,
   showToast
 }) {
-  const saveRafRef = useRef112(null);
-  const refreshRafRef = useRef112(null);
-  const lastFailureToastAtRef = useRef112(null);
-  const lastFailureReportRef = useRef112(null);
-  const pendingCandidateRef = useRef112(null);
-  const inFlightRef = useRef112(null);
-  const inFlightCandidateRef = useRef112(null);
+  const saveRafRef = useRef113(null);
+  const refreshRafRef = useRef113(null);
+  const lastFailureToastAtRef = useRef113(null);
+  const lastFailureReportRef = useRef113(null);
+  const pendingCandidateRef = useRef113(null);
+  const inFlightRef = useRef113(null);
+  const inFlightCandidateRef = useRef113(null);
   const reportFailure = useCallback87(
     (path, error) => {
       const now2 = Date.now();
@@ -64227,11 +64234,11 @@ function useFileManager({
 }) {
   const [editingFile, setEditingFile] = useState103(null);
   const [revealSourceOffset, setRevealSourceOffset] = useState103(null);
-  const editingPathRef = useRef113(editingFile?.path);
+  const editingPathRef = useRef114(editingFile?.path);
   editingPathRef.current = editingFile?.path;
-  const projectIdRef = useRef113(projectId);
+  const projectIdRef = useRef114(projectId);
   projectIdRef.current = projectId;
-  const importedFontAssetsRef = useRef113([]);
+  const importedFontAssetsRef = useRef114([]);
   const fileVersionScope = useMemo59(
     () => ({ projectId, versions: /* @__PURE__ */ new Map() }),
     [projectId]
@@ -64382,8 +64389,8 @@ function useFileManager({
     },
     [fileVersions, updateEditingFileContent, writeProjectFile]
   );
-  const revealRequestIdRef = useRef113(0);
-  const revealAbortRef = useRef113(null);
+  const revealRequestIdRef = useRef114(0);
+  const revealAbortRef = useRef114(null);
   const handleFileSelect = useCallback88(
     (path) => {
       const pid = projectIdRef.current;
@@ -64671,7 +64678,7 @@ function useFileManager({
 }
 
 // src/hooks/usePreviewPersistence.ts
-import { useCallback as useCallback89, useRef as useRef114, useState as useState104 } from "react";
+import { useCallback as useCallback89, useRef as useRef115, useState as useState104 } from "react";
 
 // src/utils/gsapUndoRestore.ts
 function elementIdentityKey(el) {
@@ -64907,11 +64914,11 @@ function usePreviewPersistence({
 }) {
   void _recordEdit;
   const [domEditSaveQueuePaused, setDomEditSaveQueuePaused] = useState104(null);
-  const domTextCommitVersionRef = useRef114(0);
-  const showToastRef = useRef114(showToast);
+  const domTextCommitVersionRef = useRef115(0);
+  const showToastRef = useRef115(showToast);
   showToastRef.current = showToast;
-  const domEditSaveQueueRef = useRef114(null);
-  const applyStudioManualEditsToPreviewRef = useRef114(async () => {
+  const domEditSaveQueueRef = useRef115(null);
+  const applyStudioManualEditsToPreviewRef = useRef115(async () => {
   });
   if (!domEditSaveQueueRef.current) {
     domEditSaveQueueRef.current = createDomEditSaveQueue({
@@ -65004,10 +65011,10 @@ function usePreviewPersistence({
 }
 
 // src/hooks/usePreviewDocumentVersion.ts
-import { useCallback as useCallback90, useEffect as useEffect93, useRef as useRef115, useState as useState105 } from "react";
+import { useCallback as useCallback90, useEffect as useEffect94, useRef as useRef116, useState as useState105 } from "react";
 function usePreviewDocumentVersion() {
   const [previewDocumentVersion, setPreviewDocumentVersion] = useState105(0);
-  const refreshTimersRef = useRef115([]);
+  const refreshTimersRef = useRef116([]);
   const refresh = useCallback90(() => {
     for (const id of refreshTimersRef.current) clearTimeout(id);
     refreshTimersRef.current = [];
@@ -65017,7 +65024,7 @@ function usePreviewDocumentVersion() {
       window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 300)
     );
   }, []);
-  useEffect93(
+  useEffect94(
     () => () => {
       for (const id of refreshTimersRef.current) clearTimeout(id);
     },
@@ -65027,10 +65034,10 @@ function usePreviewDocumentVersion() {
 }
 
 // src/hooks/useTimelineEditing.ts
-import { useCallback as useCallback100, useRef as useRef118 } from "react";
+import { useCallback as useCallback100, useRef as useRef119 } from "react";
 
 // src/hooks/useRazorSplit.ts
-import { useCallback as useCallback91, useRef as useRef116 } from "react";
+import { useCallback as useCallback91, useRef as useRef117 } from "react";
 
 // src/utils/razorSplitTransaction.ts
 function targetIdentity(path, target) {
@@ -65163,7 +65170,7 @@ function useRazorSplit({
   forceReloadSdkSession,
   isRecordingRef
 }) {
-  const projectIdRef = useRef116(projectId);
+  const projectIdRef = useRef117(projectId);
   projectIdRef.current = projectId;
   const synchronize = useCallback91(() => {
     let failure;
@@ -66641,10 +66648,10 @@ function useTimelineGroupEditing({
 }
 
 // src/hooks/useBlockedTimelineEditToast.ts
-import { useCallback as useCallback99, useRef as useRef117 } from "react";
+import { useCallback as useCallback99, useRef as useRef118 } from "react";
 var BLOCKED_TOAST_INTERVAL_MS = 1500;
 function useBlockedTimelineEditToast(showToast) {
-  const lastAtRef = useRef117(0);
+  const lastAtRef = useRef118(0);
   return useCallback99(
     (_element) => {
       const now2 = Date.now();
@@ -66677,9 +66684,9 @@ function useTimelineEditing({
   invalidateGsapCache,
   handleDomZIndexReorderCommitRef
 }) {
-  const projectIdRef = useRef118(projectId);
+  const projectIdRef = useRef119(projectId);
   projectIdRef.current = projectId;
-  const editQueueRef = useRef118(Promise.resolve());
+  const editQueueRef = useRef119(Promise.resolve());
   const enqueueEdit = useCallback100(
     (element, label, buildPatches, coalesceKey) => {
       if (isRecordingRef?.current) {
@@ -67064,10 +67071,10 @@ function persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps,
 import { useCallback as useCallback124 } from "react";
 
 // src/hooks/useAskAgentModal.ts
-import { useState as useState107, useCallback as useCallback102, useEffect as useEffect95 } from "react";
+import { useState as useState107, useCallback as useCallback102, useEffect as useEffect96 } from "react";
 
 // src/hooks/useAgentRevisionQueue.ts
-import { useCallback as useCallback101, useEffect as useEffect94, useRef as useRef119, useState as useState106 } from "react";
+import { useCallback as useCallback101, useEffect as useEffect95, useRef as useRef120, useState as useState106 } from "react";
 var MAX_REVISIONS = 20;
 var STORAGE_PREFIX2 = "hyperframes-studio:agent-revisions:";
 var SUBMISSION_STORAGE_PREFIX = "hyperframes-studio:agent-revision-submission:";
@@ -67119,15 +67126,15 @@ function useAgentRevisionQueue(projectId) {
   const [submission, setSubmission] = useState106(
     () => readSubmission(submissionKey)
   );
-  const activeKeyRef = useRef119(key2);
-  const activeSubmissionKeyRef = useRef119(submissionKey);
-  useEffect94(() => {
+  const activeKeyRef = useRef120(key2);
+  const activeSubmissionKeyRef = useRef120(submissionKey);
+  useEffect95(() => {
     activeKeyRef.current = key2;
     setRevisions(readQueue(key2));
     activeSubmissionKeyRef.current = submissionKey;
     setSubmission(readSubmission(submissionKey));
   }, [key2, submissionKey]);
-  useEffect94(() => {
+  useEffect95(() => {
     if (activeKeyRef.current !== key2) return;
     const storage = safeLocalStorage();
     if (!storage || !key2) return;
@@ -67137,7 +67144,7 @@ function useAgentRevisionQueue(projectId) {
     } catch {
     }
   }, [key2, revisions]);
-  useEffect94(() => {
+  useEffect95(() => {
     if (activeSubmissionKeyRef.current !== submissionKey) return;
     const storage = safeLocalStorage();
     if (!storage || !submissionKey) return;
@@ -67150,7 +67157,7 @@ function useAgentRevisionQueue(projectId) {
     } catch {
     }
   }, [submissionKey, submission]);
-  useEffect94(() => {
+  useEffect95(() => {
     const submissionId = submission?.submissionId;
     if (!submissionId || submission?.status === "completed" || submission?.status === "failed") {
       return;
@@ -67303,7 +67310,7 @@ function useAskAgentModal({
       showToast
     ]
   );
-  useEffect95(() => {
+  useEffect96(() => {
     setAgentPromptTagSnippet(void 0);
     setAgentPromptSelectionContext(void 0);
     setAgentModalAnchorPoint(null);
@@ -67327,7 +67334,7 @@ function useAskAgentModal({
 }
 
 // src/hooks/useDomSelection.ts
-import { useState as useState108, useCallback as useCallback103, useRef as useRef121, useEffect as useEffect97 } from "react";
+import { useState as useState108, useCallback as useCallback103, useRef as useRef122, useEffect as useEffect98 } from "react";
 
 // src/utils/domEditHelpers.ts
 function domEditSelectionsTargetSame(a, b) {
@@ -67360,7 +67367,7 @@ function seedDomEditGroupWithSelection(group, selection) {
 }
 
 // src/hooks/useStudioTestHooks.ts
-import { useEffect as useEffect96 } from "react";
+import { useEffect as useEffect97 } from "react";
 
 // src/player/lib/timelinePerformanceDiagnostics.ts
 function readNonNegativeNumber(value) {
@@ -67443,7 +67450,7 @@ function useStudioTestHooks({
   buildDomSelectionFromTarget,
   applyDomSelection
 }) {
-  useEffect96(() => {
+  useEffect97(() => {
     if (!STUDIO_TEST_HOOKS_ENABLED || typeof window === "undefined") return;
     const api = {
       runtimeMode: STUDIO_RUNTIME_MODE,
@@ -67554,14 +67561,14 @@ function useDomSelection({
   const [domEditGroupSelections, setDomEditGroupSelections] = useState108([]);
   const [domEditHoverSelection, setDomEditHoverSelection] = useState108(null);
   const [activeGroupElement, setActiveGroupElementState] = useState108(null);
-  const rightPanelTabRef = useRef121(rightPanelTab);
+  const rightPanelTabRef = useRef122(rightPanelTab);
   rightPanelTabRef.current = rightPanelTab;
-  const domEditSelectionRef = useRef121(domEditSelection);
-  const domEditGroupSelectionsRef = useRef121(domEditGroupSelections);
-  const domEditHoverSelectionRef = useRef121(domEditHoverSelection);
-  const activeGroupElementRef = useRef121(activeGroupElement);
-  const compositionIdentityRef = useRef121({ activeCompPath, projectId });
-  const timelineSelectSeqRef = useRef121(0);
+  const domEditSelectionRef = useRef122(domEditSelection);
+  const domEditGroupSelectionsRef = useRef122(domEditGroupSelections);
+  const domEditHoverSelectionRef = useRef122(domEditHoverSelection);
+  const activeGroupElementRef = useRef122(activeGroupElement);
+  const compositionIdentityRef = useRef122({ activeCompPath, projectId });
+  const timelineSelectSeqRef = useRef122(0);
   domEditSelectionRef.current = domEditSelection;
   domEditGroupSelectionsRef.current = domEditGroupSelections;
   domEditHoverSelectionRef.current = domEditHoverSelection;
@@ -67755,7 +67762,7 @@ function useDomSelection({
     },
     [applyDomSelection, buildDomSelectionForTimelineElement]
   );
-  const refreshDomEditGroupSelectionsFromPreviewRef = useRef121(async () => {
+  const refreshDomEditGroupSelectionsFromPreviewRef = useRef122(async () => {
   });
   const refreshDomEditSelectionFromPreview = useCallback103(
     // fallow-ignore-next-line complexity
@@ -67821,13 +67828,13 @@ function useDomSelection({
     },
     [activeCompPath, announceTimelineSelection2, buildDomSelectionFromTarget, previewIframeRef]
   );
-  useEffect97(() => {
+  useEffect98(() => {
     refreshDomEditGroupSelectionsFromPreviewRef.current = refreshDomEditGroupSelectionsFromPreview;
   }, [refreshDomEditGroupSelectionsFromPreview]);
-  useEffect97(() => {
+  useEffect98(() => {
     updateDomEditHoverSelection(null);
   }, [activeCompPath, projectId, previewIframe, refreshKey, updateDomEditHoverSelection]);
-  useEffect97(() => {
+  useEffect98(() => {
     const previous = compositionIdentityRef.current;
     if (previous.activeCompPath === activeCompPath && previous.projectId === projectId) return;
     compositionIdentityRef.current = { activeCompPath, projectId };
@@ -67835,7 +67842,7 @@ function useDomSelection({
     setActiveGroupElementState(null);
     applyDomSelection(null, { revealPanel: false });
   }, [activeCompPath, projectId, applyDomSelection]);
-  useEffect97(() => {
+  useEffect98(() => {
     if (!domEditHoverSelection) return;
     const shouldClear = captionEditMode || domEditSelectionsTargetSame(domEditHoverSelection, domEditSelection) || domEditSelectionInGroup(domEditGroupSelections, domEditHoverSelection) || !domEditHoverSelection.element.isConnected;
     if (shouldClear) updateDomEditHoverSelection(null);
@@ -67846,7 +67853,7 @@ function useDomSelection({
     domEditGroupSelections,
     updateDomEditHoverSelection
   ]);
-  useEffect97(() => {
+  useEffect98(() => {
     if (!captionEditMode) return;
     applyDomSelection(null, { revealPanel: false });
   }, [applyDomSelection, captionEditMode]);
@@ -67913,7 +67920,7 @@ function useDomSelection({
 }
 
 // src/hooks/usePreviewInteraction.ts
-import { useCallback as useCallback104, useRef as useRef122 } from "react";
+import { useCallback as useCallback104, useRef as useRef123 } from "react";
 var CYCLE_RADIUS_PX = 6;
 var CYCLE_WINDOW_MS = 600;
 var DOUBLE_CLICK_MS = 400;
@@ -67930,8 +67937,8 @@ function usePreviewInteraction({
   setActiveGroupElement,
   onClickToSource
 }) {
-  const cycleRef = useRef122(null);
-  const lastDownRef = useRef122(null);
+  const cycleRef = useRef123(null);
+  const lastDownRef = useRef123(null);
   const pausePreviewPlayback = useCallback104(() => {
     const pausedTime = pauseStudioPreviewPlayback(previewIframeRef.current);
     const playerStore = usePlayerStore.getState();
@@ -68089,7 +68096,7 @@ function usePreviewInteraction({
 }
 
 // src/hooks/useDomEditCommits.ts
-import { useCallback as useCallback109, useRef as useRef125 } from "react";
+import { useCallback as useCallback109, useRef as useRef126 } from "react";
 import { findUnsafeDomPatchValues as findUnsafeDomPatchValues2 } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/utils/studioFontHelpers.ts
@@ -68253,7 +68260,7 @@ function useDomEditPositionPatchCommit({
 }
 
 // src/hooks/useDomEditTextCommits.ts
-import { useCallback as useCallback107, useRef as useRef124 } from "react";
+import { useCallback as useCallback107, useRef as useRef125 } from "react";
 
 // src/hooks/domEditTextFieldCommitOps.ts
 function hasSameKeysInSamePositions(originalFields, nextFields) {
@@ -68295,7 +68302,7 @@ function buildTextFieldChildOperations(originalFields, nextFields) {
 }
 
 // src/hooks/useDomEditAttributeCommits.ts
-import { useCallback as useCallback106, useRef as useRef123 } from "react";
+import { useCallback as useCallback106, useRef as useRef124 } from "react";
 import { HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR5, HF_AUDIO_GROUP_TAG as HF_AUDIO_GROUP_TAG8 } from "@hyperframes/core/audio-groups";
 function resolveFullAttrName(attr, prefixData) {
   return prefixData && !attr.startsWith("data-") ? `data-${attr}` : attr;
@@ -68335,7 +68342,7 @@ function useDomEditAttributeCommits({
   refreshDomEditSelectionFromPreview,
   persistDomEditOperations
 }) {
-  const domAttributeCommitVersionRef = useRef123(/* @__PURE__ */ new Map());
+  const domAttributeCommitVersionRef = useRef124(/* @__PURE__ */ new Map());
   const commitDataAttribute = useCallback106(
     async (attr, value, options) => {
       if (!domEditSelection) return;
@@ -68630,8 +68637,8 @@ function useDomEditTextCommits({
   persistDomEditOperations,
   resolveImportedFontAsset
 }) {
-  const domTextCommitVersionRef = useRef124(0);
-  const domStyleCommitVersionRef = useRef124(/* @__PURE__ */ new Map());
+  const domTextCommitVersionRef = useRef125(0);
+  const domStyleCommitVersionRef = useRef125(/* @__PURE__ */ new Map());
   const {
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
@@ -69524,7 +69531,7 @@ function useDomEditCommits({
     },
     [fileTree, projectId, importedFontAssetsRef]
   );
-  const reportedUnresolvableRef = useRef125(/* @__PURE__ */ new Set());
+  const reportedUnresolvableRef = useRef126(/* @__PURE__ */ new Set());
   const persistDomEditOperations = useCallback109(
     // fallow-ignore-next-line complexity
     async (selection, operations, options) => {
@@ -69886,7 +69893,7 @@ function useGroupCommits(params) {
 }
 
 // src/hooks/useGsapScriptCommits.ts
-import { useCallback as useCallback116, useMemo as useMemo60, useRef as useRef127 } from "react";
+import { useCallback as useCallback116, useMemo as useMemo60, useRef as useRef128 } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/hooks/gsapRuntimePatch.ts
@@ -70681,7 +70688,7 @@ function useGsapKeyframeOps({
 }
 
 // src/hooks/useGsapPropertyDebounce.ts
-import { useCallback as useCallback114, useEffect as useEffect98, useRef as useRef126 } from "react";
+import { useCallback as useCallback114, useEffect as useEffect99, useRef as useRef127 } from "react";
 import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
 var DEBOUNCE_MS = 150;
 function mergeTweenProperties(sdkSession, animationId, edited, kind) {
@@ -70697,9 +70704,9 @@ function mergeTweenProperties(sdkSession, animationId, edited, kind) {
   }
 }
 function useGsapPropertyDebounce(commitMutationSafely, sdk) {
-  const pendingPropertyEditRef = useRef126(null);
-  const debounceTimerRef = useRef126(null);
-  const sdkRef = useRef126(sdk);
+  const pendingPropertyEditRef = useRef127(null);
+  const debounceTimerRef = useRef127(null);
+  const sdkRef = useRef127(sdk);
   sdkRef.current = sdk;
   const flushPendingPropertyEdit = useCallback114(async () => {
     const pending2 = pendingPropertyEditRef.current;
@@ -70751,7 +70758,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
     },
     [flushPendingPropertyEdit]
   );
-  useEffect98(() => {
+  useEffect99(() => {
     return () => {
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
       void flushPendingPropertyEdit();
@@ -71130,9 +71137,9 @@ function instantPatchesFor(options) {
 }
 function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession, publishSdkSession, writeProjectFile, forceReloadSdkSession }) {
   const activeProjectId = projectIdRef.current;
-  const activeCompPathRef = useRef127(activeCompPath);
+  const activeCompPathRef = useRef128(activeCompPath);
   activeCompPathRef.current = activeCompPath;
-  const serializerRef = useRef127(createKeyedSerializer());
+  const serializerRef = useRef128(createKeyedSerializer());
   const recordMutationEdit = useCallback116(async (targetPath, result, options) => {
     if (result.before == null || result.after == null) return;
     await editHistory.recordEdit({
@@ -71316,10 +71323,10 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
 }
 
 // src/hooks/useDomEditWiring.ts
-import { useCallback as useCallback120, useEffect as useEffect100, useRef as useRef130 } from "react";
+import { useCallback as useCallback120, useEffect as useEffect101, useRef as useRef131 } from "react";
 
 // src/hooks/useDomEditPreviewSync.ts
-import { useEffect as useEffect99, useRef as useRef128 } from "react";
+import { useEffect as useEffect100, useRef as useRef129 } from "react";
 function useDomEditPreviewSync({
   previewIframe,
   activeCompPath,
@@ -71337,7 +71344,7 @@ function useDomEditPreviewSync({
   getSidebarTab,
   gsapCacheVersion
 }) {
-  useEffect99(() => {
+  useEffect100(() => {
     if (!previewIframe) return;
     const syncSelectionFromDocument = async () => {
       if (captionEditMode) return;
@@ -71398,9 +71405,9 @@ function useDomEditPreviewSync({
     applyStudioManualEditsToPreviewRef,
     gsapCacheVersion
   ]);
-  const openSourceRef = useRef128(openSourceForSelection);
+  const openSourceRef = useRef129(openSourceForSelection);
   openSourceRef.current = openSourceForSelection;
-  useEffect99(
+  useEffect100(
     // fallow-ignore-next-line complexity
     () => {
       if (!domEditSelection || !openSourceRef.current || !getSidebarTab) return;
@@ -71493,7 +71500,7 @@ function useGsapInteractionFailureTelemetry(activeCompPath, showToast) {
 }
 
 // src/hooks/useGsapSelectionHandlers.ts
-import { useCallback as useCallback119, useRef as useRef129 } from "react";
+import { useCallback as useCallback119, useRef as useRef130 } from "react";
 function useGsapSelectionHandlers({
   domEditSelection,
   updateGsapProperty,
@@ -71517,7 +71524,7 @@ function useGsapSelectionHandlers({
   selectedGsapAnimations,
   showToast
 }) {
-  const lastSelectionRef = useRef129(null);
+  const lastSelectionRef = useRef130(null);
   if (domEditSelection) lastSelectionRef.current = domEditSelection;
   const resolveWriteSelection = useCallback119(
     (selectionOverride) => selectionOverride === void 0 ? domEditSelection ?? lastSelectionRef.current : selectionOverride,
@@ -71842,7 +71849,7 @@ function useDomEditWiring({
     },
     [openSourceForSelection, selectSidebarTab]
   );
-  useEffect100(() => {
+  useEffect101(() => {
     if (!domEditSelection?.id) return;
     const { selectedElementId, elements, setSelectedElementId } = usePlayerStore.getState();
     const matchKey = elements.find(
@@ -71851,8 +71858,8 @@ function useDomEditWiring({
     const key2 = matchKey ? matchKey.key ?? matchKey.id : null;
     if (key2 && key2 !== selectedElementId) setSelectedElementId(key2);
   }, [domEditSelection?.id]);
-  const prevRefreshKeyRef = useRef130(refreshKey);
-  useEffect100(() => {
+  const prevRefreshKeyRef = useRef131(refreshKey);
+  useEffect101(() => {
     if (refreshKey !== prevRefreshKeyRef.current) {
       prevRefreshKeyRef.current = refreshKey;
       bumpGsapCache();
@@ -72938,7 +72945,7 @@ function useGsapAwareEditing({
 }
 
 // src/hooks/useStudioSelectionPublisher.ts
-import { useEffect as useEffect101, useRef as useRef131 } from "react";
+import { useEffect as useEffect102, useRef as useRef132 } from "react";
 
 // src/utils/studioSelectionSnapshot.ts
 function round34(value) {
@@ -73029,9 +73036,9 @@ function useStudioSelectionPublisher({
   previewDocumentVersion,
   refreshDomEditSelectionFromPreview
 }) {
-  const lastSelectionRefreshKeyRef = useRef131(refreshKey);
-  const pendingSelectionRefreshKeyRef = useRef131(null);
-  useEffect101(() => {
+  const lastSelectionRefreshKeyRef = useRef132(refreshKey);
+  const pendingSelectionRefreshKeyRef = useRef132(null);
+  useEffect102(() => {
     if (!projectId) return;
     const selection = domEditSelection?.element.isConnected ? buildStudioSelectionSnapshot({
       projectId,
@@ -73042,13 +73049,13 @@ function useStudioSelectionPublisher({
     void putSelection(projectId, selection, controller.signal).catch(reportSelectionPublishError);
     return () => controller.abort();
   }, [domEditSelection, projectId]);
-  useEffect101(() => {
+  useEffect102(() => {
     if (!projectId) return;
     return () => {
       void putSelection(projectId, null).catch(reportSelectionPublishError);
     };
   }, [projectId]);
-  useEffect101(() => {
+  useEffect102(() => {
     if (lastSelectionRefreshKeyRef.current === refreshKey) return;
     lastSelectionRefreshKeyRef.current = refreshKey;
     pendingSelectionRefreshKeyRef.current = domEditSelectionRef.current ? refreshKey : null;
@@ -73057,7 +73064,7 @@ function useStudioSelectionPublisher({
     void putSelection(projectId, null, controller.signal).catch(reportSelectionPublishError);
     return () => controller.abort();
   }, [domEditSelectionRef, projectId, refreshKey]);
-  useEffect101(() => {
+  useEffect102(() => {
     if (pendingSelectionRefreshKeyRef.current === null) return;
     pendingSelectionRefreshKeyRef.current = null;
     const selection = domEditSelectionRef.current;
@@ -73619,23 +73626,23 @@ function useDomEditSession({
 }
 
 // src/hooks/useSdkSelectionSync.ts
-import { useEffect as useEffect102 } from "react";
+import { useEffect as useEffect103 } 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) {
-  useEffect102(() => {
+  useEffect103(() => {
     if (!session) return;
     session.setSelection(toHfIds(domEditGroupSelections, domEditSelection));
   }, [session, domEditSelection, domEditGroupSelections]);
 }
 
 // src/hooks/useStudioSdkSessions.ts
-import { useEffect as useEffect104 } from "react";
+import { useEffect as useEffect105 } from "react";
 
 // src/hooks/useSdkSession.ts
-import { useState as useState109, useEffect as useEffect103, useCallback as useCallback125, useRef as useRef132 } from "react";
+import { useState as useState109, useEffect as useEffect104, useCallback as useCallback125, useRef as useRef133 } from "react";
 import { openComposition as openComposition3 } from "@hyperframes/sdk";
 
 // src/hooks/externalFileReloadBus.ts
@@ -73644,14 +73651,6 @@ function addExternalFileReloadListener(listener2) {
   listeners.add(listener2);
   return () => listeners.delete(listener2);
 }
-function notifyExternalFileReload(path) {
-  for (const listener2 of listeners) {
-    try {
-      listener2(path);
-    } catch {
-    }
-  }
-}
 
 // src/hooks/useSdkSession.ts
 async function readProjectFileOptional(projectId, path) {
@@ -73685,23 +73684,23 @@ function disposeSdkSession(session) {
 }
 function useSdkSession(projectId, activeCompPath) {
   const [ownedSession, setOwnedSession] = useState109(null);
-  const ownedSessionRef = useRef132(null);
-  const sessionOwnersRef = useRef132(/* @__PURE__ */ new WeakMap());
-  const generationRef = useRef132(0);
-  const projectIdRef = useRef132(projectId);
+  const ownedSessionRef = useRef133(null);
+  const sessionOwnersRef = useRef133(/* @__PURE__ */ new WeakMap());
+  const generationRef = useRef133(0);
+  const projectIdRef = useRef133(projectId);
   projectIdRef.current = projectId;
-  const activeCompPathRef = useRef132(activeCompPath);
+  const activeCompPathRef = useRef133(activeCompPath);
   activeCompPathRef.current = activeCompPath;
   const [reloadToken, setReloadToken] = useState109(0);
-  const reloadTokenRef = useRef132(reloadToken);
+  const reloadTokenRef = useRef133(reloadToken);
   reloadTokenRef.current = reloadToken;
-  useEffect103(
+  useEffect104(
     () => addExternalFileReloadListener((changedPath) => {
       if (changedPath === activeCompPathRef.current) setReloadToken((token) => token + 1);
     }),
     []
   );
-  useEffect103(() => {
+  useEffect104(() => {
     const generation = ++generationRef.current;
     let cancelled = false;
     const previous = ownedSessionRef.current;
@@ -73785,7 +73784,7 @@ function useSdkSession(projectId, activeCompPath) {
 function useStudioSdkSessions(projectId, activeCompPath, masterCompPath) {
   const sdkHandle = useSdkSession(projectId, activeCompPath ?? masterCompPath);
   const editFlowSdkSession = activeCompPath ? sdkHandle.session : null;
-  useEffect104(() => {
+  useEffect105(() => {
     usePreviewVariablesStore.getState().setValues(null);
   }, [projectId, activeCompPath]);
   return { sdkHandle, editFlowSdkSession };
@@ -73893,7 +73892,7 @@ async function deleteExternalConflictSnapshot(projectId, filePath) {
 }
 
 // src/hooks/useExternalFileChangeCoordinator.ts
-import { useCallback as useCallback126, useEffect as useEffect105, useRef as useRef133, useState as useState110 } from "react";
+import { useCallback as useCallback126, useEffect as useEffect106, useRef as useRef134, useState as useState110 } from "react";
 function testHotAdapter() {
   const value = globalThis.__HF_STUDIO_HOT_TEST_ADAPTER__;
   if (!value || typeof value !== "object") return null;
@@ -73932,8 +73931,7 @@ function useExternalFileChangeCoordinator({
   drainPendingChanges,
   getPendingCandidate,
   discardPendingChanges,
-  reloadPreview,
-  reloadSdkSession,
+  reloadPage,
   persistConflictSnapshot,
   persistFailureSnapshot,
   loadConflictSnapshot,
@@ -73944,25 +73942,25 @@ function useExternalFileChangeCoordinator({
   resetSaveQueues
 }) {
   const [blocked, setBlocked] = useState110(null);
-  const generationRef = useRef133(0);
-  const mountedRef = useRef133(true);
-  const lastEventIdentityRef = useRef133(null);
-  const blockedRef = useRef133(blocked);
-  const snapshotWriteTailRef = useRef133(Promise.resolve());
+  const generationRef = useRef134(0);
+  const mountedRef = useRef134(true);
+  const lastEventIdentityRef = useRef134(null);
+  const blockedRef = useRef134(blocked);
+  const snapshotWriteTailRef = useRef134(Promise.resolve());
   blockedRef.current = blocked;
-  useEffect105(() => {
+  useEffect106(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
       generationRef.current += 1;
     };
   }, []);
-  useEffect105(() => {
+  useEffect106(() => {
     generationRef.current += 1;
     setBlocked(null);
     lastEventIdentityRef.current = null;
   }, [projectId, activeCompPath]);
-  useEffect105(() => {
+  useEffect106(() => {
     if (!projectId || !recoveryFilePath || !loadConflictSnapshot) return;
     const generation = ++generationRef.current;
     let cancelled = false;
@@ -74003,10 +74001,9 @@ function useExternalFileChangeCoordinator({
   const reloadAcceptedGeneration = useCallback126(
     (path) => {
       logReload("reload", { path, by: "external-change coordinator" });
-      reloadPreview();
-      reloadSdkSession(path);
+      (reloadPage ?? (() => window.location.reload()))();
     },
-    [reloadPreview, reloadSdkSession]
+    [reloadPage]
   );
   const persistSnapshotInOrder = useCallback126(async (write) => {
     const next = snapshotWriteTailRef.current.catch(() => void 0).then(write);
@@ -74125,7 +74122,7 @@ function useExternalFileChangeCoordinator({
       reloadAcceptedGeneration
     ]
   );
-  useEffect105(() => {
+  useEffect106(() => {
     const handler = (payload) => processChange(payload);
     const adapter = testHotAdapter();
     if (adapter) {
@@ -74235,8 +74232,7 @@ function useStudioExternalFileChanges({
   masterCompPath,
   fileManager,
   previewPersistence,
-  pendingTimelineEditPathRef,
-  reloadPreview
+  pendingTimelineEditPathRef
 }) {
   const { flushPendingSourceSave, discardPendingSourceSave } = fileManager;
   const { drainPendingDomEditSaves, resetDomEditSaveQueueBreaker } = previewPersistence;
@@ -74257,8 +74253,6 @@ function useStudioExternalFileChanges({
     drainPendingChanges,
     getPendingCandidate: fileManager.getPendingSourceCandidate,
     discardPendingChanges,
-    reloadPreview,
-    reloadSdkSession: notifyExternalFileReload,
     persistConflictSnapshot: persistExternalConflictSnapshot,
     persistFailureSnapshot: persistExternalFailureSnapshot,
     loadConflictSnapshot: loadExternalConflictSnapshot,
@@ -74271,7 +74265,7 @@ function useStudioExternalFileChanges({
 }
 
 // src/hooks/useBlockHandlers.ts
-import { useCallback as useCallback128, useMemo as useMemo61, useRef as useRef134, useState as useState111 } from "react";
+import { useCallback as useCallback128, useMemo as useMemo61, useRef as useRef135, useState as useState111 } from "react";
 
 // src/utils/blockInstaller.ts
 function getMaxZIndexFromIframe(iframe) {
@@ -74480,7 +74474,7 @@ function useBlockHandlers({
       blockCtxDeps.showToast
     ]
   );
-  const installingBlockRef = useRef134(false);
+  const installingBlockRef = useRef135(false);
   const runBlockInstall = useCallback128(
     async (blockName, install) => {
       if (installingBlockRef.current) {
@@ -74591,7 +74585,7 @@ function useBlockHandlers({
 }
 
 // src/hooks/useAppHotkeys.ts
-import { useCallback as useCallback129, useEffect as useEffect106, useRef as useRef135 } from "react";
+import { useCallback as useCallback129, useEffect as useEffect107, useRef as useRef136 } from "react";
 function iframeContentWindow(iframe) {
   try {
     return iframe?.contentWindow ?? null;
@@ -74799,7 +74793,7 @@ function useAppHotkeys({
   activeCompPath,
   forceReloadSdkSession
 }) {
-  const previewHistoryCleanupRef = useRef135(null);
+  const previewHistoryCleanupRef = useRef136(null);
   const readHistoryFile = useCallback129(
     (path) => path === STUDIO_MOTION_PATH ? readOptionalProjectFile(path) : readProjectFile(path),
     [readOptionalProjectFile, readProjectFile]
@@ -74864,7 +74858,7 @@ function useAppHotkeys({
   );
   const handleUndo = useCallback129(() => applyHistory("undo"), [applyHistory]);
   const handleRedo = useCallback129(() => applyHistory("redo"), [applyHistory]);
-  const cbRef = useRef135(null);
+  const cbRef = useRef136(null);
   cbRef.current = {
     handleTimelineElementsDelete,
     handleTimelineElementSplit,
@@ -74892,7 +74886,7 @@ function useAppHotkeys({
     }
     if (!isTypingTarget(event.target)) dispatchPlainKey(event, key2, cb);
   }, []);
-  useEffect106(() => {
+  useEffect107(() => {
     window.addEventListener("keydown", handleAppKeyDown, true);
     return () => window.removeEventListener("keydown", handleAppKeyDown, true);
   }, [handleAppKeyDown]);
@@ -74929,7 +74923,7 @@ function useAppHotkeys({
     },
     [handleAppKeyDown, handleHistoryHotkey]
   );
-  useEffect106(
+  useEffect107(
     () => () => {
       previewHistoryCleanupRef.current?.();
       previewHistoryCleanupRef.current = null;
@@ -74944,7 +74938,7 @@ function useAppHotkeys({
 }
 
 // src/hooks/useClipboard.ts
-import { useCallback as useCallback130, useRef as useRef136 } from "react";
+import { useCallback as useCallback130, useRef as useRef137 } from "react";
 
 // src/utils/clipboardPayload.ts
 function insertAsSibling(source, newHtml, selector, selectorIndex) {
@@ -75051,8 +75045,8 @@ function useClipboard({
   handleDomEditElementDelete,
   previewIframeRef
 }) {
-  const clipboardRef = useRef136(null);
-  const projectIdRef = useRef136(projectId);
+  const clipboardRef = useRef137(null);
+  const projectIdRef = useRef137(projectId);
   projectIdRef.current = projectId;
   const handleCopy2 = useCallback130(() => {
     const { selectedElementId, elements } = usePlayerStore.getState();
@@ -75186,7 +75180,7 @@ function useClipboard({
 }
 
 // src/hooks/useCaptionDetection.ts
-import { useEffect as useEffect107, useRef as useRef137 } from "react";
+import { useEffect as useEffect108, useRef as useRef138 } from "react";
 
 // src/captions/types.ts
 var DEFAULT_STYLE = {
@@ -75438,8 +75432,8 @@ function useCaptionDetection({
   captionSync,
   setRightCollapsed
 }) {
-  const prevCompPathRef = useRef137(activeCompPath);
-  useEffect107(() => {
+  const prevCompPathRef = useRef138(activeCompPath);
+  useEffect108(() => {
     if (prevCompPathRef.current !== activeCompPath) {
       prevCompPathRef.current = activeCompPath;
       const store = useCaptionStore.getState();
@@ -75449,7 +75443,7 @@ function useCaptionDetection({
       }
     }
   }, [activeCompPath]);
-  useEffect107(() => {
+  useEffect108(() => {
     if (!projectId) return;
     let activating = false;
     const tryActivateCaptions = () => {
@@ -75530,7 +75524,7 @@ function useCaptionDetection({
       window.removeEventListener("message", handleMessage);
     };
   }, [activeCompPath, projectId, compIdToSrc, captionSync, previewIframeRef]);
-  useEffect107(() => {
+  useEffect108(() => {
     if (captionEditMode) {
       setRightCollapsed(!captionHasSelection);
     }
@@ -75542,7 +75536,7 @@ import { useCallback as useCallback133 } from "react";
 import { createElement as createElement3 } from "react";
 
 // src/player/components/AudioWaveform.tsx
-import { memo as memo36, useCallback as useCallback131, useMemo as useMemo62, useRef as useRef138 } from "react";
+import { memo as memo36, useCallback as useCallback131, useMemo as useMemo62, useRef as useRef139 } from "react";
 import { jsx as jsx168, jsxs as jsxs140 } from "react/jsx-runtime";
 var BAR_WIDTH = 2;
 var BAR_STEP = 3;
@@ -75599,8 +75593,8 @@ var AudioWaveform = memo36(function AudioWaveform2({
   sessionEpoch,
   priority
 }) {
-  const canvasRef = useRef138(null);
-  const observerRef = useRef138(null);
+  const canvasRef = useRef139(null);
+  const observerRef = useRef139(null);
   const cacheKey = waveformUrl ?? audioUrl;
   const request = useMemo62(
     () => ({
@@ -75711,7 +75705,7 @@ var AudioWaveform = memo36(function AudioWaveform2({
 });
 
 // src/player/components/ImageThumbnail.tsx
-import { memo as memo37, useCallback as useCallback132, useMemo as useMemo63, useRef as useRef139, useState as useState112 } from "react";
+import { memo as memo37, useCallback as useCallback132, useMemo as useMemo63, useRef as useRef140, useState as useState112 } from "react";
 import { jsx as jsx169, jsxs as jsxs141 } from "react/jsx-runtime";
 var ImageThumbnail = memo37(function ImageThumbnail2({
   imageSrc,
@@ -75723,7 +75717,7 @@ var ImageThumbnail = memo37(function ImageThumbnail2({
   rich = false
 }) {
   const [containerWidth, setContainerWidth] = useState112(0);
-  const observerRef = useRef139(null);
+  const observerRef = useRef140(null);
   const request = useMemo63(
     () => ({
       key: createThumbnailKey({ kind: "image", source: imageSrc, rich: Number(rich) }),
@@ -75967,15 +75961,15 @@ function useRenderClipContent({
 }
 
 // src/hooks/useConsoleErrorCapture.ts
-import { useCallback as useCallback134, useEffect as useEffect108, useRef as useRef140, useState as useState113 } from "react";
+import { useCallback as useCallback134, useEffect as useEffect109, useRef as useRef141, useState as useState113 } from "react";
 function useConsoleErrorCapture(previewIframe) {
   const [consoleErrors, setConsoleErrors] = useState113(null);
-  const consoleErrorsRef = useRef140([]);
+  const consoleErrorsRef = useRef141([]);
   const resetErrors = useCallback134(() => {
     consoleErrorsRef.current = [];
     setConsoleErrors(null);
   }, []);
-  useEffect108(() => {
+  useEffect109(() => {
     if (!previewIframe) return;
     let patchedWin = null;
     let origConsoleError = null;
@@ -76040,7 +76034,7 @@ function useConsoleErrorCapture(previewIframe) {
 }
 
 // src/hooks/useFrameCapture.ts
-import { useState as useState114, useCallback as useCallback135, useRef as useRef141 } from "react";
+import { useState as useState114, useCallback as useCallback135, useRef as useRef142 } from "react";
 function useFrameCapture({
   projectId,
   activeCompPath,
@@ -76049,7 +76043,7 @@ function useFrameCapture({
 }) {
   const [captureFrameTime, setCaptureFrameTime] = useState114(0);
   const [capturing, setCapturing] = useState114(false);
-  const capturingRef = useRef141(false);
+  const capturingRef = useRef142(false);
   useMountEffect(() => {
     setCaptureFrameTime(usePlayerStore.getState().currentTime);
     return liveTime.subscribe(setCaptureFrameTime);
@@ -76134,7 +76128,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState115, useCallback as useCallback136, useEffect as useEffect109, useRef as useRef142, useMemo as useMemo64 } from "react";
+import { useState as useState115, useCallback as useCallback136, useEffect as useEffect110, useRef as useRef143, useMemo as useMemo64 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -76148,7 +76142,7 @@ function useLintModal(projectId, refreshKey) {
   const [lintModal, setLintModal] = useState115(null);
   const [linting, setLinting] = useState115(false);
   const [backgroundFindings, setBackgroundFindings] = useState115([]);
-  const autoLintRanRef = useRef142(false);
+  const autoLintRanRef = useRef143(false);
   const runLint = useCallback136(
     async (opts) => {
       if (!projectId) return;
@@ -76175,8 +76169,8 @@ function useLintModal(projectId, refreshKey) {
     [projectId]
   );
   const handleLint = useCallback136(() => runLint(), [runLint]);
-  const prevProjectIdRef = useRef142(projectId);
-  useEffect109(() => {
+  const prevProjectIdRef = useRef143(projectId);
+  useEffect110(() => {
     if (projectId !== prevProjectIdRef.current) {
       autoLintRanRef.current = false;
       prevProjectIdRef.current = projectId;
@@ -76185,7 +76179,7 @@ function useLintModal(projectId, refreshKey) {
     autoLintRanRef.current = true;
     void runLint({ background: true });
   }, [projectId, runLint]);
-  useEffect109(() => {
+  useEffect110(() => {
     if (!projectId || !refreshKey) return;
     const timer = setTimeout(() => void runLint({ background: true }), 1e3);
     return () => clearTimeout(timer);
@@ -76208,7 +76202,7 @@ function useLintModal(projectId, refreshKey) {
   );
   const findingsByElement = useMemo64(() => groupFindings((f) => f.elementId), [groupFindings]);
   const findingsByFile = useMemo64(() => groupFindings((f) => f.file), [groupFindings]);
-  useEffect109(() => {
+  useEffect110(() => {
     usePlayerStore.getState().setLintFindingsByElement(findingsByElement);
   }, [findingsByElement]);
   return {
@@ -76223,14 +76217,14 @@ function useLintModal(projectId, refreshKey) {
 }
 
 // src/hooks/useToast.ts
-import { useState as useState116, useCallback as useCallback137, useRef as useRef143 } from "react";
+import { useState as useState116, useCallback as useCallback137, useRef as useRef144 } from "react";
 var AUTO_DISMISS_MS2 = 4e3;
 var EXIT_MS2 = 160;
 var MAX_TOASTS = 3;
 var nextToastId = 1;
 function useToast() {
   const [toasts, setToasts] = useState116([]);
-  const timersRef = useRef143(/* @__PURE__ */ new Map());
+  const timersRef = useRef144(/* @__PURE__ */ new Map());
   const clearTimer = useCallback137((id) => {
     const timer = timersRef.current.get(id);
     if (timer) {
@@ -76306,7 +76300,7 @@ function useCompositionContentLoader({
 }
 
 // src/hooks/useStudioUrlState.ts
-import { useCallback as useCallback139, useEffect as useEffect110, useRef as useRef144, useState as useState117 } from "react";
+import { useCallback as useCallback139, useEffect as useEffect111, useRef as useRef145, useState as useState117 } from "react";
 
 // src/utils/studioUrlState.ts
 var VALID_TABS = ["layers", "design", "renders", "slideshow", "variables"];
@@ -76535,13 +76529,13 @@ function useStudioUrlState({
   initialState: initialState2
 }) {
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const hydratedSeekRef = useRef144(initialState2.currentTime == null);
-  const hydratedInitialTimeRef = useRef144(initialState2.currentTime == null);
-  const hydratedSelectionRef = useRef144(initialState2.selection == null);
+  const hydratedSeekRef = useRef145(initialState2.currentTime == null);
+  const hydratedInitialTimeRef = useRef145(initialState2.currentTime == null);
+  const hydratedSelectionRef = useRef145(initialState2.selection == null);
   const [selectionHydrated, setSelectionHydrated] = useState117(initialState2.selection == null);
-  const pendingSelectionRef = useRef144(initialState2.selection);
-  const stableTimeRef = useRef144(initialState2.currentTime);
-  const selectionApplySeqRef = useRef144(0);
+  const pendingSelectionRef = useRef145(initialState2.selection);
+  const stableTimeRef = useRef145(initialState2.currentTime);
+  const selectionApplySeqRef = useRef145(0);
   const buildUrlState = useCallback139(
     () => ({
       activeCompPath,
@@ -76607,7 +76601,7 @@ function useStudioUrlState({
       previewIframeRef
     ]
   );
-  useEffect110(() => {
+  useEffect111(() => {
     if (!projectId || hydratedSeekRef.current || compositionLoading) return;
     const nextTime = duration > 0 ? clampNumber(initialState2.currentTime ?? 0, 0, duration) : Math.max(0, initialState2.currentTime ?? 0);
     usePlayerStore.getState().requestSeek(nextTime);
@@ -76615,7 +76609,7 @@ function useStudioUrlState({
     hydratedSeekRef.current = true;
   }, [projectId, compositionLoading, duration, initialState2.currentTime]);
   const selectionHydrationTime = selectionHydrated ? 0 : currentTime;
-  useEffect110(() => {
+  useEffect111(() => {
     if (!projectId || hydratedSelectionRef.current || compositionLoading) return;
     if (!hydratedSeekRef.current) return;
     const targetTime = initialState2.currentTime;
@@ -76642,7 +76636,7 @@ function useStudioUrlState({
     projectId,
     refreshKey
   ]);
-  useEffect110(() => {
+  useEffect111(() => {
     if (hydratedInitialTimeRef.current) return;
     const targetTime = stableTimeRef.current;
     if (targetTime == null) {
@@ -76652,7 +76646,7 @@ function useStudioUrlState({
     if (Math.abs(currentTime - targetTime) > 0.05) return;
     hydratedInitialTimeRef.current = true;
   }, [currentTime]);
-  useEffect110(() => {
+  useEffect111(() => {
     if (!activeCompPathHydrated) return;
     if (!hydratedSeekRef.current) return;
     if (!hydratedInitialTimeRef.current) return;
@@ -76663,12 +76657,12 @@ function useStudioUrlState({
     }, 200);
     return () => window.clearTimeout(handle);
   }, [activeCompPathHydrated, buildUrlState, currentTime, duration, isPlaying, projectId]);
-  useEffect110(() => {
+  useEffect111(() => {
     if (!activeCompPathHydrated) return;
     if (!projectId) return;
     replaceHash(buildStudioHash(projectId, buildUrlState()));
   }, [activeCompPathHydrated, buildUrlState, projectId]);
-  useEffect110(() => {
+  useEffect111(() => {
     if (!projectId) return;
     const onHashChange = () => {
       if (parseProjectIdFromHash(window.location.hash) !== projectId) return;
@@ -76698,7 +76692,7 @@ function useEffectiveTimelineDuration(timelineDuration2, timelineElements) {
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback140, useMemo as useMemo66, useRef as useRef145, useState as useState118 } from "react";
+import { useCallback as useCallback140, useMemo as useMemo66, useRef as useRef146, useState as useState118 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -76757,7 +76751,7 @@ function useInspectorState(rightPanelTab, rightInspectorPanes, rightCollapsed, i
 }
 function useDragOverlay(onImportFiles) {
   const [active, setActive] = useState118(false);
-  const counterRef = useRef145(0);
+  const counterRef = useRef146(0);
   const onDragOver = useCallback140((e) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
@@ -76796,7 +76790,7 @@ function useGlobalFileDrop(handleTimelineFileDrop) {
 }
 
 // src/components/StudioHeader.tsx
-import { useRef as useRef147 } from "react";
+import { useRef as useRef148 } from "react";
 
 // src/contexts/PanelLayoutContext.tsx
 import { useContext as useContext8, useMemo as useMemo67 } from "react";
@@ -76876,9 +76870,9 @@ function PanelLayoutProvider({
 import {
   useCallback as useCallback141,
   useContext as useContext9,
-  useEffect as useEffect111,
+  useEffect as useEffect112,
   useMemo as useMemo68,
-  useRef as useRef146,
+  useRef as useRef147,
   useState as useState119
 } from "react";
 import { jsx as jsx171 } from "react/jsx-runtime";
@@ -76906,15 +76900,15 @@ function readHistoryLocation() {
 }
 function useViewModeState() {
   const [viewMode, setMode] = useState119(() => readViewModeFromUrl());
-  const guardsRef = useRef146(/* @__PURE__ */ new Set());
-  const acceptedLocationRef = useRef146(readHistoryLocation());
+  const guardsRef = useRef147(/* @__PURE__ */ new Set());
+  const acceptedLocationRef = useRef147(readHistoryLocation());
   const canSetViewMode = useCallback141((mode) => {
     for (const guard3 of guardsRef.current) {
       if (!guard3(mode)) return false;
     }
     return true;
   }, []);
-  useEffect111(() => {
+  useEffect112(() => {
     const onPopState = () => {
       const mode = readViewModeFromUrl();
       if (mode !== viewMode && !canSetViewMode(mode)) {
@@ -76972,7 +76966,7 @@ var VIEW_MODE_OPTIONS = [
 ];
 function ViewModeToggle() {
   const { viewMode, setViewMode } = useViewMode();
-  const tabRefs = useRef147([]);
+  const tabRefs = useRef148([]);
   const selectMode = (mode) => {
     if (mode === viewMode) return;
     if (setViewMode(mode)) trackStudioEvent("view_mode_toggle", { mode });
@@ -77199,10 +77193,10 @@ function StudioHeader({
 }
 
 // src/hooks/useGestureCommit.ts
-import { useState as useState121, useCallback as useCallback143, useRef as useRef149, useEffect as useEffect113 } from "react";
+import { useState as useState121, useCallback as useCallback143, useRef as useRef150, useEffect as useEffect114 } from "react";
 
 // src/hooks/useGestureRecording.ts
-import { useCallback as useCallback142, useEffect as useEffect112, useRef as useRef148, useState as useState120 } from "react";
+import { useCallback as useCallback142, useEffect as useEffect113, useRef as useRef149, useState as useState120 } from "react";
 function readBasePosition(element, iframeEl) {
   let baseOpacity = 1;
   let baseScale = 1;
@@ -77347,11 +77341,11 @@ function releaseRuntimePreview(r) {
 function useGestureRecording() {
   const [isRecording, setIsRecording] = useState120(false);
   const [recordingDuration, setRecordingDuration] = useState120(0);
-  const isRecordingRef = useRef148(false);
-  const refs = useRef148(createRecordingRefs());
-  const samplesRef = useRef148(refs.current.samples);
-  const trailRef = useRef148(refs.current.trail);
-  useEffect112(() => {
+  const isRecordingRef = useRef149(false);
+  const refs = useRef149(createRecordingRefs());
+  const samplesRef = useRef149(refs.current.samples);
+  const trailRef = useRef149(refs.current.trail);
+  useEffect113(() => {
     const r = refs.current;
     return () => {
       isRecordingRef.current = false;
@@ -77729,12 +77723,12 @@ function useGestureCommit({
 }) {
   const gestureRecording = useGestureRecording();
   const [gestureState, setGestureState] = useState121("idle");
-  const gestureStateRef = useRef149("idle");
-  const recordingAutoStopRef = useRef149(void 0);
-  const recordingStartTimeRef = useRef149(0);
-  const commitInFlightRef = useRef149(false);
-  const capturedSelectionRef = useRef149(null);
-  useEffect113(() => () => clearInterval(recordingAutoStopRef.current), []);
+  const gestureStateRef = useRef150("idle");
+  const recordingAutoStopRef = useRef150(void 0);
+  const recordingStartTimeRef = useRef150(0);
+  const commitInFlightRef = useRef150(false);
+  const capturedSelectionRef = useRef150(null);
+  useEffect114(() => () => clearInterval(recordingAutoStopRef.current), []);
   const stopAndCommitRecording = useCallback143(async () => {
     clearInterval(recordingAutoStopRef.current);
     if (commitInFlightRef.current) {
@@ -78074,12 +78068,12 @@ import {
   useState as useState131,
   useCallback as useCallback151,
   useImperativeHandle,
-  useRef as useRef157,
+  useRef as useRef158,
   forwardRef as forwardRef3
 } from "react";
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo39, useCallback as useCallback144, useEffect as useEffect114, useRef as useRef150, useState as useState122 } from "react";
+import { memo as memo39, useCallback as useCallback144, useEffect as useEffect115, useRef as useRef151, useState as useState122 } from "react";
 import { jsx as jsx174, jsxs as jsxs144 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -78151,10 +78145,10 @@ function CompCard({
   const [stageSize, setStageSize] = useState122(DEFAULT_PREVIEW_STAGE);
   const [livePreviewLoaded, setLivePreviewLoaded] = useState122(false);
   const [thumbnailFailed, setThumbnailFailed] = useState122(false);
-  const iframeRef = useRef150(null);
-  const hoverTimer = useRef150(null);
-  const syncTimer = useRef150(null);
-  const draggedRef = useRef150(false);
+  const iframeRef = useRef151(null);
+  const hoverTimer = useRef151(null);
+  const syncTimer = useRef151(null);
+  const draggedRef = useRef151(false);
   const requestIframePlaybackSync = useCallback144((shouldPlay) => {
     if (syncTimer.current) {
       clearTimeout(syncTimer.current);
@@ -78197,10 +78191,10 @@ function CompCard({
   });
   const thumbnailOffsetX = (CARD_W - stageSize.width * previewScale) / 2;
   const thumbnailOffsetY = (CARD_H - stageSize.height * previewScale) / 2;
-  useEffect114(() => {
+  useEffect115(() => {
     if (hovered) requestIframePlaybackSync(true);
   }, [hovered, requestIframePlaybackSync]);
-  useEffect114(() => {
+  useEffect115(() => {
     return () => {
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
       if (syncTimer.current) clearTimeout(syncTimer.current);
@@ -78385,7 +78379,7 @@ var CompositionsTab = memo39(function CompositionsTab2({
 });
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo40, useState as useState128, useCallback as useCallback148, useRef as useRef154, useMemo as useMemo71, useEffect as useEffect120 } from "react";
+import { memo as memo40, useState as useState128, useCallback as useCallback148, useRef as useRef155, useMemo as useMemo71, useEffect as useEffect121 } from "react";
 
 // src/components/ui/SearchInput.tsx
 import { jsx as jsx175, jsxs as jsxs145 } from "react/jsx-runtime";
@@ -78496,11 +78490,11 @@ var CATEGORY_LABELS = {
 var FILTER_ORDER = ["audio", "images", "video", "fonts"];
 
 // src/components/sidebar/AudioRow.tsx
-import { useState as useState124, useRef as useRef152, useEffect as useEffect116, useCallback as useCallback146 } from "react";
+import { useState as useState124, useRef as useRef153, useEffect as useEffect117, useCallback as useCallback146 } from "react";
 import { classifyWebAudioMediaRoute } from "@hyperframes/core/runtime/web-audio-route";
 
 // src/components/sidebar/AssetContextMenu.tsx
-import { useCallback as useCallback145, useEffect as useEffect115, useLayoutEffect as useLayoutEffect8, useRef as useRef151, useState as useState123 } from "react";
+import { useCallback as useCallback145, useEffect as useEffect116, useLayoutEffect as useLayoutEffect8, useRef as useRef152, useState as useState123 } from "react";
 import { Fragment as Fragment51, jsx as jsx176, jsxs as jsxs146 } from "react/jsx-runtime";
 function isValidAssetName(name) {
   return name.length > 0 && !/[/\\]/.test(name) && !name.includes("..");
@@ -78515,7 +78509,7 @@ function ContextMenu2({
   onRename,
   onAddAtPlayhead
 }) {
-  const menuRef = useRef151(null);
+  const menuRef = useRef152(null);
   const [pos, setPos] = useState123({ x, y });
   const [mode, setMode] = useState123("menu");
   const [renameDraft, setRenameDraft] = useState123(() => filename(asset));
@@ -78530,7 +78524,7 @@ function ContextMenu2({
       y: Math.min(y, window.innerHeight - rect.height - margin)
     });
   }, [x, y, mode]);
-  useEffect115(() => {
+  useEffect116(() => {
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
         e.stopPropagation();
@@ -78555,7 +78549,7 @@ function ContextMenu2({
     document.addEventListener("keydown", onKeyDown, true);
     return () => document.removeEventListener("keydown", onKeyDown, true);
   }, [mode, onClose]);
-  useEffect115(() => {
+  useEffect116(() => {
     if (mode === "menu") {
       menuRef.current?.querySelector('[role="menuitem"]')?.focus();
     }
@@ -78766,11 +78760,11 @@ function AudioRow({
   const [contextMenu, setContextMenu] = useState124(null);
   const [playing, setPlaying] = useState124(false);
   const [bars, setBars] = useState124([]);
-  const audioRef = useRef152(null);
-  const actxRef = useRef152(null);
-  const analyserRef = useRef152(null);
-  const sourceRef = useRef152(null);
-  const animRef = useRef152(0);
+  const audioRef = useRef153(null);
+  const actxRef = useRef153(null);
+  const analyserRef = useRef153(null);
+  const sourceRef = useRef153(null);
+  const animRef = useRef153(0);
   const name = basename2(asset);
   const subtype = getAudioSubtype(asset);
   const serveUrl = resolveMediaPreviewUrl(asset, projectId);
@@ -78781,7 +78775,7 @@ function AudioRow({
     setPlaying(false);
     cancelAnimationFrame(animRef.current);
   }, []);
-  const pointerDownRef = useRef152(null);
+  const pointerDownRef = useRef153(null);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const requestTimelineFocus = usePlayerStore((s) => s.requestTimelineFocus);
   const elements = usePlayerStore((s) => s.elements);
@@ -78822,7 +78816,7 @@ function AudioRow({
     },
     [activateRow]
   );
-  useEffect116(() => {
+  useEffect117(() => {
     return () => {
       cancelAnimationFrame(animRef.current);
       audioRef.current?.pause();
@@ -78830,7 +78824,7 @@ function AudioRow({
       if (stopCurrentPreview === stopPlayback) stopCurrentPreview = null;
     };
   }, [stopPlayback]);
-  useEffect116(() => {
+  useEffect117(() => {
     if (playing) {
       const barCount = 24;
       const loop = () => {
@@ -78997,7 +78991,7 @@ function AudioRow({
 }
 
 // src/components/sidebar/GlobalAssetsView.tsx
-import { useEffect as useEffect117, useMemo as useMemo70, useState as useState125 } from "react";
+import { useEffect as useEffect118, useMemo as useMemo70, useState as useState125 } from "react";
 import { jsx as jsx178, jsxs as jsxs148 } from "react/jsx-runtime";
 function globalAssetRows(records, query = "") {
   const q = query.trim().toLowerCase();
@@ -79013,7 +79007,7 @@ function globalAssetRows(records, query = "") {
 }
 function GlobalAssetsView({ searchQuery }) {
   const [records, setRecords] = useState125(null);
-  useEffect117(() => {
+  useEffect118(() => {
     let cancelled = false;
     fetch("/api/assets/global").then((r) => r.ok ? r.json() : { assets: [] }).then((d) => {
       if (!cancelled) setRecords(Array.isArray(d.assets) ? d.assets : []);
@@ -79056,10 +79050,10 @@ function GlobalAssetsView({ searchQuery }) {
 }
 
 // src/components/sidebar/AssetCard.tsx
-import { useState as useState127, useEffect as useEffect119, useRef as useRef153, useCallback as useCallback147 } from "react";
+import { useState as useState127, useEffect as useEffect120, useRef as useRef154, useCallback as useCallback147 } from "react";
 
 // src/components/ui/VideoFrameThumbnail.tsx
-import { useState as useState126, useEffect as useEffect118 } from "react";
+import { useState as useState126, useEffect as useEffect119 } from "react";
 import { jsx as jsx179 } from "react/jsx-runtime";
 function VideoFrameThumbnail({
   src,
@@ -79067,7 +79061,7 @@ function VideoFrameThumbnail({
 }) {
   const [frame, setFrame] = useState126(null);
   const [failed2, setFailed] = useState126(false);
-  useEffect118(() => {
+  useEffect119(() => {
     setFailed(false);
     const video = document.createElement("video");
     video.crossOrigin = "anonymous";
@@ -79131,7 +79125,7 @@ function openAssetContextMenu(e, setContextMenu) {
 }
 function useProbedDuration(src, skip) {
   const [duration, setDuration] = useState127(void 0);
-  useEffect119(() => {
+  useEffect120(() => {
     if (skip) return;
     let cancelled = false;
     let retryTimer;
@@ -79194,7 +79188,7 @@ function AssetCard({
   const probedDuration = useProbedDuration(serveUrl, !isVideo || duration != null);
   const resolvedDuration = duration ?? probedDuration ?? void 0;
   const durationLabel = formatDuration(resolvedDuration ?? 0);
-  const pointerDownRef = useRef153(null);
+  const pointerDownRef = useRef154(null);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const requestTimelineFocus = usePlayerStore((s) => s.requestTimelineFocus);
   const elements = usePlayerStore((s) => s.elements);
@@ -79519,7 +79513,7 @@ var AssetsTab = memo40(function AssetsTab2({
   onRename,
   onAddAssetToTimeline
 }) {
-  const fileInputRef = useRef154(null);
+  const fileInputRef = useRef155(null);
   const [dragOver, setDragOver] = useState128(false);
   const [copyFeedback, setCopyFeedback] = useState128(null);
   const [importing, setImporting] = useState128(false);
@@ -79528,9 +79522,9 @@ var AssetsTab = memo40(function AssetsTab2({
   const [searchQuery, setSearchQuery] = useState128("");
   const [viewMode, setViewMode] = useState128("local");
   const [manifest, setManifest] = useState128(/* @__PURE__ */ new Map());
-  const manifest404Ref = useRef154(/* @__PURE__ */ new Set());
+  const manifest404Ref = useRef155(/* @__PURE__ */ new Set());
   const assetsKey = assets.join("|");
-  useEffect120(() => {
+  useEffect121(() => {
     if (manifest404Ref.current.has(projectId)) return;
     let cancelled = false;
     fetch(`/api/projects/${projectId}/preview/.media/manifest.jsonl`).then((r) => {
@@ -79787,11 +79781,11 @@ var AssetsTab = memo40(function AssetsTab2({
 });
 
 // src/components/sidebar/BlocksTab.tsx
-import { memo as memo41, useState as useState130, useCallback as useCallback150, useRef as useRef156, useEffect as useEffect122 } from "react";
+import { memo as memo41, useState as useState130, useCallback as useCallback150, useRef as useRef157, useEffect as useEffect123 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
 
 // src/components/sidebar/PromptPreviewModal.tsx
-import { useState as useState129, useCallback as useCallback149, useEffect as useEffect121, useRef as useRef155 } from "react";
+import { useState as useState129, useCallback as useCallback149, useEffect as useEffect122, useRef as useRef156 } from "react";
 import { jsx as jsx182, jsxs as jsxs151 } from "react/jsx-runtime";
 function PromptPreviewModal({
   title,
@@ -79801,9 +79795,9 @@ function PromptPreviewModal({
   const [value, setValue] = useState129(prompt);
   const [copyState, setCopyState] = useState129("idle");
   const [entered, setEntered] = useState129(false);
-  const containerRef = useRef155(null);
-  const textareaRef = useRef155(null);
-  const valueRef = useRef155(value);
+  const containerRef = useRef156(null);
+  const textareaRef = useRef156(null);
+  const valueRef = useRef156(value);
   valueRef.current = value;
   const { requestClose } = useDialogBehavior({
     open: true,
@@ -79811,7 +79805,7 @@ function PromptPreviewModal({
     containerRef,
     canClose: () => valueRef.current === prompt
   });
-  useEffect121(() => {
+  useEffect122(() => {
     requestAnimationFrame(() => {
       setEntered(true);
       textareaRef.current?.focus();
@@ -80100,7 +80094,7 @@ function BlockCard({
 }) {
   const [hovered, setHovered] = useState130(false);
   const [addState, setAddState] = useState130("idle");
-  const hoverTimer = useRef156(null);
+  const hoverTimer = useRef157(null);
   const colors = getCategoryColors(category);
   const needsWebGL = tags?.includes("html-in-canvas") || tags?.includes("webgl");
   const handleEnter = useCallback150(() => {
@@ -80117,7 +80111,7 @@ function BlockCard({
     setHovered(false);
     onPreview?.(null);
   }, [onPreview]);
-  useEffect122(() => {
+  useEffect123(() => {
     return () => {
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
     };
@@ -80330,9 +80324,9 @@ var LeftSidebar = memo42(
     onAddCompositionToTimeline
   }, ref) {
     const [tab, setTab] = useState131(getPersistedTab);
-    const tabRef = useRef157(tab);
+    const tabRef = useRef158(tab);
     tabRef.current = tab;
-    const tablistRef = useRef157(null);
+    const tablistRef = useRef158(null);
     const selectTab = useCallback151((t) => {
       setTab(t);
       try {
@@ -80828,10 +80822,10 @@ function StudioLeftSidebar({
 import { useCallback as useCallback169 } from "react";
 
 // src/components/editor/LayersPanel.tsx
-import { memo as memo43, useState as useState134, useCallback as useCallback154, useEffect as useEffect123, useRef as useRef159 } from "react";
+import { memo as memo43, useState as useState134, useCallback as useCallback154, useEffect as useEffect124, useRef as useRef160 } from "react";
 
 // src/components/editor/useLayerDrag.ts
-import { useRef as useRef158, useState as useState133, useCallback as useCallback153 } from "react";
+import { useRef as useRef159, useState as useState133, useCallback as useCallback153 } from "react";
 var DRAG_THRESHOLD_PX3 = 4;
 function isLayerDraggable(layer) {
   if (!(layer.selector || layer.id)) return false;
@@ -80898,7 +80892,7 @@ function useLayerDrag({
   onReorder,
   onSingleSibling
 }) {
-  const dragRef = useRef158(null);
+  const dragRef = useRef159(null);
   const [dragKey, setDragKey] = useState133(null);
   const [insertionLineY, setInsertionLineY] = useState133(null);
   const handleRowPointerDown = useCallback153(
@@ -81104,8 +81098,8 @@ var LayersPanel = memo43(function LayersPanel2() {
   } = useDomEditContext();
   const [layers, setLayers] = useState134([]);
   const [collapsed, setCollapsed] = useState134({});
-  const prevDocVersionRef = useRef159(0);
-  const scrollContainerRef = useRef159(null);
+  const prevDocVersionRef = useRef160(0);
+  const scrollContainerRef = useRef160(null);
   const mirrorLayerReorderToTimeline = useLayerReorderTimelineMirror();
   const { scheduleReveal } = useLayerRevealOverride({
     isPlaying,
@@ -81134,10 +81128,10 @@ var LayersPanel = memo43(function LayersPanel2() {
     );
     setLayers(sortLayersByZIndex(items));
   }, [previewIframeRef, activeCompPath, isMasterView, activeGroupElement, setActiveGroupElement]);
-  useEffect123(() => {
+  useEffect124(() => {
     collectLayers();
   }, [collectLayers, refreshKey, zEditVersion]);
-  useEffect123(() => {
+  useEffect124(() => {
     const iframe = previewIframeRef.current;
     if (!iframe) return;
     const handleLoad = () => {
@@ -81147,13 +81141,13 @@ var LayersPanel = memo43(function LayersPanel2() {
     iframe.addEventListener("load", handleLoad);
     return () => iframe.removeEventListener("load", handleLoad);
   }, [previewIframeRef, collectLayers]);
-  useEffect123(() => {
+  useEffect124(() => {
     if (!compositionLoading) {
       const timer = setTimeout(collectLayers, 100);
       return () => clearTimeout(timer);
     }
   }, [compositionLoading, collectLayers]);
-  useEffect123(() => {
+  useEffect124(() => {
     const throttle = createRafThrottle(collectLayers, 100);
     const unsubscribe = liveTime.subscribe(throttle.invoke);
     return () => {
@@ -81447,7 +81441,7 @@ import { memo as memo45, useCallback as useCallback156, useState as useState136
 import { memo as memo44, useCallback as useCallback155 } from "react";
 
 // src/captions/components/shared.tsx
-import { useEffect as useEffect124, useRef as useRef160, useState as useState135 } from "react";
+import { useEffect as useEffect125, useRef as useRef161, useState as useState135 } from "react";
 import { jsx as jsx188, jsxs as jsxs157 } from "react/jsx-runtime";
 var inputCls = "w-full bg-neutral-900 border border-neutral-800 rounded px-1.5 py-0.5 text-2xs text-neutral-200 font-mono outline-none focus:border-studio-accent disabled:opacity-40 disabled:cursor-not-allowed";
 function Section2({ label, children }) {
@@ -81473,8 +81467,8 @@ function NumberField({
   onCommit
 }) {
   const [draft, setDraft] = useState135(null);
-  const focusedRef = useRef160(false);
-  useEffect124(() => {
+  const focusedRef = useRef161(false);
+  useEffect125(() => {
     if (!focusedRef.current) setDraft(null);
   }, [value]);
   const display2 = draft !== null ? draft : mixed ? "" : String(value ?? 0);
@@ -81966,7 +81960,7 @@ var CaptionPropertyPanel = memo45(function CaptionPropertyPanel2({
 });
 
 // src/components/editor/BlockParamsPanel.tsx
-import { memo as memo46, useCallback as useCallback157, useEffect as useEffect125, useRef as useRef161, useState as useState137 } from "react";
+import { memo as memo46, useCallback as useCallback157, useEffect as useEffect126, useRef as useRef162, useState as useState137 } from "react";
 import { jsx as jsx191, jsxs as jsxs160 } from "react/jsx-runtime";
 var BlockParamsPanel = memo46(function BlockParamsPanel2({
   blockName,
@@ -81984,11 +81978,11 @@ var BlockParamsPanel = memo46(function BlockParamsPanel2({
     }
     return initial;
   });
-  const appliedRef = useRef161(
+  const appliedRef = useRef162(
     Object.fromEntries(params.map((p) => [p.key, p.default]))
   );
   const [commitState, setCommitState] = useState137({ tone: "idle" });
-  const commitTimersRef = useRef161(/* @__PURE__ */ new Map());
+  const commitTimersRef = useRef162(/* @__PURE__ */ new Map());
   const commitParamNow = useCallback157(
     async (key2, nextValue) => {
       if (!fileManager) return;
@@ -82030,7 +82024,7 @@ var BlockParamsPanel = memo46(function BlockParamsPanel2({
     },
     [fileManager, compositionPath, setRefreshKey, blockName]
   );
-  const commitChainRef = useRef161(Promise.resolve());
+  const commitChainRef = useRef162(Promise.resolve());
   const commitParam = useCallback157(
     (key2, nextValue) => {
       const run = commitChainRef.current.then(() => commitParamNow(key2, nextValue));
@@ -82055,7 +82049,7 @@ var BlockParamsPanel = memo46(function BlockParamsPanel2({
     },
     [commitParam]
   );
-  const flushRef = useRef161(() => {
+  const flushRef = useRef162(() => {
   });
   flushRef.current = () => {
     for (const [key2, timer] of commitTimersRef.current) {
@@ -82065,7 +82059,7 @@ var BlockParamsPanel = memo46(function BlockParamsPanel2({
     }
     commitTimersRef.current.clear();
   };
-  useEffect125(() => () => flushRef.current(), []);
+  useEffect126(() => () => flushRef.current(), []);
   return /* @__PURE__ */ jsxs160("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxs160("div", { className: "flex items-center justify-between px-3 py-2 border-b border-neutral-800", children: [
       /* @__PURE__ */ jsx191("div", { className: "text-[11px] font-semibold text-neutral-200 truncate", children: blockTitle }),
@@ -82197,7 +82191,7 @@ function ParamControl({
 import { memo as memo50 } from "react";
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo49, useState as useState140, useRef as useRef163, useEffect as useEffect127, useLayoutEffect as useLayoutEffect9, useId as useId6 } from "react";
+import { memo as memo49, useState as useState140, useRef as useRef164, useEffect as useEffect128, useLayoutEffect as useLayoutEffect9, useId as useId6 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 import { CANVAS_DIMENSIONS } from "@hyperframes/parsers";
 
@@ -82428,7 +82422,7 @@ var RenderQueueItem = memo47(function RenderQueueItem2({
 });
 
 // src/components/renders/FfmpegRequiredNotice.tsx
-import { memo as memo48, useEffect as useEffect126, useRef as useRef162, useState as useState139 } from "react";
+import { memo as memo48, useEffect as useEffect127, useRef as useRef163, useState as useState139 } from "react";
 import { jsx as jsx193, jsxs as jsxs162 } from "react/jsx-runtime";
 var DOWNLOAD_URL = "https://ffmpeg.org/download.html";
 var CUE_MS = 1600;
@@ -82440,18 +82434,18 @@ var FfmpegRequiredNotice = memo48(function FfmpegRequiredNotice2({
 }) {
   const [copied, setCopied] = useState139(false);
   const [recheckFailed, setRecheckFailed] = useState139(false);
-  const wasChecking = useRef162(false);
-  const cueTimer = useRef162(void 0);
-  useEffect126(() => {
+  const wasChecking = useRef163(false);
+  const cueTimer = useRef163(void 0);
+  useEffect127(() => {
     if (wasChecking.current && !checking) setRecheckFailed(true);
     wasChecking.current = checking;
   }, [checking]);
-  useEffect126(() => {
+  useEffect127(() => {
     if (!recheckFailed) return;
     cueTimer.current = setTimeout(() => setRecheckFailed(false), CUE_MS);
     return () => clearTimeout(cueTimer.current);
   }, [recheckFailed]);
-  useEffect126(() => () => clearTimeout(cueTimer.current), []);
+  useEffect127(() => () => clearTimeout(cueTimer.current), []);
   const copy = async (command) => {
     const ok = await copyTextToClipboard(command);
     if (!ok) return;
@@ -82571,8 +82565,8 @@ var FORMAT_PANEL_SIZE = { width: 208, height: 150 };
 function FormatInfoTooltip({ format }) {
   const [open, setOpen] = useState140(false);
   const [position, setPosition] = useState140(null);
-  const triggerRef = useRef163(null);
-  const timeoutRef = useRef163(void 0);
+  const triggerRef = useRef164(null);
+  const timeoutRef = useRef164(void 0);
   const panelId = useId6();
   const show = () => {
     clearTimeout(timeoutRef.current);
@@ -82581,7 +82575,7 @@ function FormatInfoTooltip({ format }) {
   const hide = () => {
     timeoutRef.current = setTimeout(() => setOpen(false), 120);
   };
-  useEffect127(() => () => clearTimeout(timeoutRef.current), []);
+  useEffect128(() => () => clearTimeout(timeoutRef.current), []);
   useLayoutEffect9(() => {
     if (!open) return;
     const el = triggerRef.current;
@@ -82595,7 +82589,7 @@ function FormatInfoTooltip({ format }) {
       )
     );
   }, [open]);
-  useEffect127(() => {
+  useEffect128(() => {
     if (!open) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -82823,8 +82817,8 @@ var RenderQueue = memo49(function RenderQueue2({
   ffmpegChecking,
   onRecheckFfmpeg
 }) {
-  const listRef = useRef163(null);
-  useEffect127(() => {
+  const listRef = useRef164(null);
+  useEffect128(() => {
     if (listRef.current) {
       listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
     }
@@ -82972,7 +82966,7 @@ var RenderQueuePanel = memo50(function RenderQueuePanel2() {
 });
 
 // src/components/panels/SlideshowPanel.tsx
-import { useState as useState142, useEffect as useEffect128, useCallback as useCallback160, useRef as useRef164 } from "react";
+import { useState as useState142, useEffect as useEffect129, useCallback as useCallback160, useRef as useRef165 } from "react";
 import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
@@ -83651,13 +83645,13 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   );
   const [persistError, setPersistError] = useState142(false);
   const [retrying, setRetrying] = useState142(false);
-  const undoStackRef = useRef164([]);
+  const undoStackRef = useRef165([]);
   const [undoDepth, setUndoDepth] = useState142(0);
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { domEditSelection } = useDomEditSelectionContext();
-  const manifestRef = useRef164(manifest);
-  const notesCtrlRef = useRef164(makeSlideshowNotesController());
-  useEffect128(() => {
+  const manifestRef = useRef165(manifest);
+  const notesCtrlRef = useRef165(makeSlideshowNotesController());
+  useEffect129(() => {
     if (!compHtml) {
       notesCtrlRef.current.flush();
       setManifest({ slides: [] });
@@ -83719,7 +83713,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [onPersistNotes]
   );
-  useEffect128(() => {
+  useEffect129(() => {
     const ctrl = notesCtrlRef.current;
     return () => {
       ctrl.flush();
@@ -83981,7 +83975,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo51, useCallback as useCallback164, useEffect as useEffect130, useMemo as useMemo72, useState as useState146 } from "react";
+import { memo as memo51, useCallback as useCallback164, useEffect as useEffect131, useMemo as useMemo72, useState as useState146 } from "react";
 
 // src/hooks/useVariablesPersist.ts
 import { useCallback as useCallback161 } from "react";
@@ -84035,7 +84029,7 @@ function useVariablesPersist({
 import { useCallback as useCallback163, useState as useState145 } from "react";
 
 // src/hooks/useProjectCompositionVariables.ts
-import { useCallback as useCallback162, useEffect as useEffect129, useState as useState143 } from "react";
+import { useCallback as useCallback162, useEffect as useEffect130, useState as useState143 } from "react";
 import { openComposition as openComposition4 } from "@hyperframes/sdk";
 async function readGroup(path, readProjectFile) {
   let content;
@@ -84059,7 +84053,7 @@ async function readGroup(path, readProjectFile) {
 }
 function useProjectCompositionVariables(fileTree, excludePath, readProjectFile, refreshKey) {
   const [groups, setGroups] = useState143([]);
-  useEffect129(() => {
+  useEffect130(() => {
     let cancelled = false;
     const htmlFiles = fileTree.filter((p) => p.endsWith(".html") && p !== excludePath);
     void (async () => {
@@ -84669,7 +84663,7 @@ var VariablesPanel = memo51(function VariablesPanel2({
   const previewValues = usePreviewVariablesStore((s) => s.values);
   const setPreviewValues = usePreviewVariablesStore((s) => s.setValues);
   const [revision, setRevision] = useState146(0);
-  useEffect130(() => {
+  useEffect131(() => {
     if (!sdkSession) return;
     return sdkSession.on("change", () => setRevision((r) => r + 1));
   }, [sdkSession]);
@@ -85039,7 +85033,7 @@ function useSlideshowPersist({
 }
 
 // src/hooks/useSlideshowTabState.ts
-import { useEffect as useEffect131, useMemo as useMemo73 } from "react";
+import { useEffect as useEffect132, useMemo as useMemo73 } from "react";
 import { SLIDESHOW_ISLAND_TYPE as SLIDESHOW_ISLAND_TYPE2, slideshowIslandRegex as slideshowIslandRegex2 } from "@hyperframes/core/slideshow";
 function useSlideshowTabState(params) {
   const { editingFileContent, previewIframeRef, refreshKey, rightPanelTab, setRightPanelTab } = params;
@@ -85060,7 +85054,7 @@ function useSlideshowTabState(params) {
       return [];
     }
   }, [previewIframeRef, rightPanelTab, refreshKey]);
-  useEffect131(() => {
+  useEffect132(() => {
     if (rightPanelTab === "slideshow" && !isSlideshowComposition) {
       setRightPanelTab("renders");
     }
@@ -85331,13 +85325,13 @@ async function applyColorGradingScopeUpdate({
 }
 
 // src/hooks/useInspectorSplitResize.ts
-import { useCallback as useCallback167, useRef as useRef165, useState as useState147 } from "react";
+import { useCallback as useCallback167, useRef as useRef166, useState as useState147 } from "react";
 var MIN_INSPECTOR_SPLIT_PERCENT = 20;
 var MAX_INSPECTOR_SPLIT_PERCENT = 75;
 function useInspectorSplitResize() {
   const [layersPanePercent, setLayersPanePercent] = useState147(40);
-  const splitContainerRef = useRef165(null);
-  const splitDragRef = useRef165(null);
+  const splitContainerRef = useRef166(null);
+  const splitDragRef = useRef166(null);
   const handleInspectorSplitResizeStart = useCallback167(
     (event) => {
       event.preventDefault();
@@ -85374,10 +85368,10 @@ function useInspectorSplitResize() {
 }
 
 // src/hooks/useRemoveBackground.ts
-import { useCallback as useCallback168, useEffect as useEffect132, useRef as useRef166 } from "react";
+import { useCallback as useCallback168, useEffect as useEffect133, useRef as useRef167 } from "react";
 function useRemoveBackground(projectId, refreshFileTree, showToast) {
-  const abortRef = useRef166(null);
-  useEffect132(
+  const abortRef = useRef167(null);
+  useEffect133(
     () => () => {
       abortRef.current?.abort();
     },
@@ -85854,7 +85848,7 @@ function StudioRightPanel({
 }
 
 // src/components/TimelineToolbar.tsx
-import { useEffect as useEffect134, useRef as useRef167 } from "react";
+import { useEffect as useEffect135, useRef as useRef168 } from "react";
 import { Image as Image2, Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
 
 // src/hooks/useEnableKeyframes.ts
@@ -86193,7 +86187,7 @@ function useEnableKeyframes(sessionRef) {
 }
 
 // src/hooks/useKeyframeKeyboard.ts
-import { useEffect as useEffect133, useCallback as useCallback171 } from "react";
+import { useEffect as useEffect134, useCallback as useCallback171 } from "react";
 function isTextInput2(el) {
   if (!el) return false;
   const tag = el.tagName;
@@ -86261,7 +86255,7 @@ function useKeyframeKeyboard({
       onNudgeKeyframe
     ]
   );
-  useEffect133(() => {
+  useEffect134(() => {
     if (!enabled) return;
     window.addEventListener("keydown", handler, { capture: true });
     return () => window.removeEventListener("keydown", handler, { capture: true });
@@ -86311,7 +86305,7 @@ function useKeyframeToggle(session) {
   const currentTime = usePlayerStore((s) => s.currentTime);
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const elements = usePlayerStore((s) => s.elements);
-  const sessionRef = useRef167(session);
+  const sessionRef = useRef168(session);
   sessionRef.current = session;
   const onToggle = useEnableKeyframes(
     sessionRef
@@ -86356,7 +86350,7 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
     enabled: Boolean(onToggleKeyframe),
     onAddKeyframe: onToggleKeyframe
   });
-  useEffect134(() => {
+  useEffect135(() => {
     const onKeyDown = (e) => {
       if (e.key !== "n" && e.key !== "N") return;
       if (e.metaKey || e.ctrlKey || e.altKey) return;
@@ -86634,16 +86628,16 @@ import { useState as useState155 } from "react";
 import { Copy as Copy2, Check as Check2 } from "@phosphor-icons/react";
 
 // src/hooks/useStoryboard.ts
-import { useCallback as useCallback172, useEffect as useEffect135, useRef as useRef168, useState as useState148 } from "react";
+import { useCallback as useCallback172, useEffect as useEffect136, useRef as useRef169, useState as useState148 } from "react";
 function useStoryboard(projectId) {
   const [data, setData] = useState148(null);
   const [loading, setLoading] = useState148(true);
   const [error, setError] = useState148(null);
   const [reloadKey, setReloadKey] = useState148(0);
-  const hasDataRef = useRef168(false);
-  const lastProjectRef = useRef168(null);
+  const hasDataRef = useRef169(false);
+  const lastProjectRef = useRef169(null);
   const reload = useCallback172(() => setReloadKey((k) => k + 1), []);
-  useEffect135(() => {
+  useEffect136(() => {
     if (!projectId) return;
     let cancelled = false;
     if (lastProjectRef.current !== projectId) {
@@ -86675,7 +86669,7 @@ function useStoryboard(projectId) {
 }
 
 // src/hooks/useProjectSignaturePoll.ts
-import { useEffect as useEffect136, useRef as useRef169 } from "react";
+import { useEffect as useEffect137, useRef as useRef170 } from "react";
 var POLL_INTERVAL_MS = 2e3;
 async function fetchProjectSignature(projectId) {
   try {
@@ -86688,11 +86682,11 @@ async function fetchProjectSignature(projectId) {
   }
 }
 function useProjectSignaturePoll(projectId, currentSignature, onChange) {
-  const signatureRef = useRef169(currentSignature);
-  const onChangeRef = useRef169(onChange);
+  const signatureRef = useRef170(currentSignature);
+  const onChangeRef = useRef170(onChange);
   signatureRef.current = currentSignature;
   onChangeRef.current = onChange;
-  useEffect136(() => {
+  useEffect137(() => {
     if (!projectId) return;
     let disposed = false;
     let inFlight = false;
@@ -86719,7 +86713,7 @@ function useProjectSignaturePoll(projectId, currentSignature, onChange) {
 }
 
 // src/components/storyboard/StoryboardLoaded.tsx
-import { useEffect as useEffect142, useMemo as useMemo76, useState as useState154 } from "react";
+import { useEffect as useEffect143, useMemo as useMemo76, useState as useState154 } from "react";
 
 // src/components/storyboard/StoryboardDirection.tsx
 import { jsx as jsx206, jsxs as jsxs171 } from "react/jsx-runtime";
@@ -86742,7 +86736,7 @@ function StoryboardDirection({ globals, frameCount }) {
 }
 
 // src/components/storyboard/FramePoster.tsx
-import { useEffect as useEffect137, useState as useState149 } from "react";
+import { useEffect as useEffect138, useState as useState149 } from "react";
 import { jsx as jsx207 } from "react/jsx-runtime";
 function FramePoster({
   projectId,
@@ -86753,7 +86747,7 @@ function FramePoster({
   posterVersion
 }) {
   const [failed2, setFailed] = useState149(false);
-  useEffect137(() => setFailed(false), [src, seconds, posterVersion, surface]);
+  useEffect138(() => setFailed(false), [src, seconds, posterVersion, surface]);
   if (failed2) {
     return /* @__PURE__ */ jsx207("div", { className: "flex h-full w-full items-center justify-center text-[11px] text-neutral-600", children: "Preview unavailable" });
   }
@@ -86956,7 +86950,7 @@ function StoryboardScriptPanel({ script }) {
 }
 
 // src/components/storyboard/StoryboardSourceEditor.tsx
-import { useCallback as useCallback173, useEffect as useEffect138, useMemo as useMemo74, useRef as useRef170, useState as useState150 } from "react";
+import { useCallback as useCallback173, useEffect as useEffect139, useMemo as useMemo74, useRef as useRef171, useState as useState150 } from "react";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { jsx as jsx211, jsxs as jsxs174 } from "react/jsx-runtime";
@@ -86968,7 +86962,7 @@ function useEditableFile(path, onSaved) {
   const [loading, setLoading] = useState150(true);
   const [saving, setSaving] = useState150(false);
   const [error, setError] = useState150(null);
-  useEffect138(() => {
+  useEffect139(() => {
     if (!path) return;
     let cancelled = false;
     setLoading(true);
@@ -87005,8 +86999,8 @@ function hardenLinks(node) {
 }
 function useMarkdownPreview(source) {
   const [debounced, setDebounced] = useState150(source);
-  const primed = useRef170(false);
-  useEffect138(() => {
+  const primed = useRef171(false);
+  useEffect139(() => {
     if (!primed.current && source !== "") {
       primed.current = true;
       setDebounced(source);
@@ -87038,8 +87032,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);
-  useEffect138(() => onDirtyChange?.(file.dirty), [onDirtyChange, file.dirty]);
-  useEffect138(() => {
+  useEffect139(() => onDirtyChange?.(file.dirty), [onDirtyChange, file.dirty]);
+  useEffect139(() => {
     if (!file.dirty) return;
     const onBeforeUnload = (event) => {
       event.preventDefault();
@@ -87111,11 +87105,11 @@ function StoryboardSourceEditor({
 }
 
 // src/components/storyboard/StoryboardFrameFocus.tsx
-import { useCallback as useCallback174, useEffect as useEffect140, useState as useState152 } from "react";
+import { useCallback as useCallback174, useEffect as useEffect141, useState as useState152 } from "react";
 import { setFrameVoiceover } from "@hyperframes/core/storyboard";
 
 // src/components/storyboard/AgentChatMessageButton.tsx
-import { useEffect as useEffect139, useState as useState151 } from "react";
+import { useEffect as useEffect140, useState as useState151 } from "react";
 import { jsx as jsx212 } from "react/jsx-runtime";
 var APPLY_STORYBOARD_FEEDBACK_MESSAGE = "Read the storyboard feedback I saved in .hyperframes/frame-comments.json and revise the frames.";
 function AgentChatMessageButton({
@@ -87124,7 +87118,7 @@ function AgentChatMessageButton({
   onCopied
 }) {
   const [copyState, setCopyState] = useState151("idle");
-  useEffect139(() => {
+  useEffect140(() => {
     if (copyState !== "copied") return;
     const timeout = window.setTimeout(() => setCopyState("again"), 3e3);
     return () => window.clearTimeout(timeout);
@@ -87197,7 +87191,7 @@ function StoryboardFrameFocus({
     const saved = await applyEdit((src) => setFrameVoiceover(src, frame.index, draft));
     if (saved) setSavedVoiceover(draft);
   }, [applyEdit, frame.index, draft]);
-  useEffect140(() => {
+  useEffect141(() => {
     if (!dirty) return;
     const onBeforeUnload = (e) => {
       e.preventDefault();
@@ -87209,14 +87203,14 @@ function StoryboardFrameFocus({
     () => !dirty || window.confirm("Discard unsaved voiceover changes?"),
     [dirty]
   );
-  useEffect140(() => registerViewModeGuard(confirmLeave), [confirmLeave, registerViewModeGuard]);
+  useEffect141(() => registerViewModeGuard(confirmLeave), [confirmLeave, registerViewModeGuard]);
   const handleBack = () => {
     if (confirmLeave()) onBack();
   };
   const handleNavigate = (delta) => {
     if (confirmLeave()) onNavigate(delta);
   };
-  useEffect140(() => {
+  useEffect141(() => {
     const onKey = (e) => {
       if (isTypingTarget(document.activeElement)) return;
       if (e.key === "Escape") handleBack();
@@ -87687,7 +87681,7 @@ function progressLabel(summary) {
 }
 
 // src/components/storyboard/useFrameComments.ts
-import { useCallback as useCallback175, useEffect as useEffect141, useMemo as useMemo75, useState as useState153 } from "react";
+import { useCallback as useCallback175, useEffect as useEffect142, useMemo as useMemo75, useState as useState153 } from "react";
 
 // src/components/storyboard/frameComments.ts
 var FRAME_COMMENTS_PATH = ".hyperframes/frame-comments.json";
@@ -87760,7 +87754,7 @@ function useFrameComments(frames) {
     } catch {
     }
   }, [readOptionalProjectFile]);
-  useEffect141(() => {
+  useEffect142(() => {
     void refreshPending();
     const onFocus = () => void refreshPending();
     window.addEventListener("focus", onFocus);
@@ -87821,10 +87815,10 @@ function StoryboardLoaded({
   const [feedbackMessageCopied, setFeedbackMessageCopied] = useState154(false);
   const comments = useFrameComments(data.frames);
   const { refreshPending } = comments;
-  useEffect142(() => {
+  useEffect143(() => {
     void refreshPending();
   }, [data.signature, refreshPending]);
-  useEffect142(() => {
+  useEffect143(() => {
     if (comments.draftCount > 0) setFeedbackMessageCopied(false);
   }, [comments.draftCount]);
   const saveFeedbackAndCopyMessage = async () => {
@@ -88173,7 +88167,7 @@ function StudioSplash({ waiting }) {
 }
 
 // src/hooks/useServerConnection.ts
-import { useEffect as useEffect143, useState as useState156 } from "react";
+import { useEffect as useEffect144, useState as useState156 } from "react";
 function useServerConnection() {
   const [projectId, setProjectId] = useState156(null);
   const [resolving, setResolving] = useState156(true);
@@ -88214,7 +88208,7 @@ function useServerConnection() {
       if (retryTimer !== null) clearTimeout(retryTimer);
     };
   });
-  useEffect143(() => {
+  useEffect144(() => {
     const onHashChange = () => {
       const next = parseProjectIdFromHash(window.location.hash);
       if (next && next !== projectId) setProjectId(next);
@@ -88226,9 +88220,9 @@ function useServerConnection() {
 }
 
 // src/hooks/useStudioSessionStart.ts
-import { useEffect as useEffect144 } from "react";
+import { useEffect as useEffect145 } from "react";
 function useStudioSessionStart(projectId, resolving, waitingForServer) {
-  useEffect144(() => {
+  useEffect145(() => {
     if (resolving || waitingForServer || hasFiredSessionStart()) return;
     markSessionStartFired();
     trackStudioSessionStart({ has_project: projectId != null });
@@ -88249,7 +88243,7 @@ function useTimelineAddAtPlayhead(addAsset, addComposition) {
 }
 
 // src/hooks/useHydrateActiveCompPathFromUrl.ts
-import { useEffect as useEffect145 } from "react";
+import { useEffect as useEffect146 } from "react";
 function useHydrateActiveCompPathFromUrl({
   hydrated,
   fileTreeLoaded,
@@ -88258,7 +88252,7 @@ function useHydrateActiveCompPathFromUrl({
   setActiveCompPath,
   setHydrated
 }) {
-  useEffect145(() => {
+  useEffect146(() => {
     if (hydrated) return;
     if (!fileTreeLoaded) return;
     const nextCompPath = normalizeStudioCompositionPath(
@@ -88275,7 +88269,7 @@ import { jsx as jsx218, jsxs as jsxs180 } from "react/jsx-runtime";
 var getTimelineSelectionSet = () => usePlayerStore.getState().selectedElementIds;
 function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
-  const initialUrlStateRef = useRef171(readStudioUrlStateFromWindow());
+  const initialUrlStateRef = useRef172(readStudioUrlStateFromWindow());
   const viewModeValue = useViewModeState();
   useStudioSessionStart(projectId, resolving, waitingForServer);
   const [activeCompPath, setActiveCompPath] = useState157(null);
@@ -88288,10 +88282,10 @@ function StudioApp() {
   const [refreshKey, setRefreshKey] = useState157(0);
   const [previewDocumentVersion, refreshPreviewDocumentVersion] = usePreviewDocumentVersion();
   const [blockPreview, setBlockPreview] = useState157(null);
-  const previewIframeRef = useRef171(null);
-  const activeCompPathRef = useRef171(activeCompPath);
+  const previewIframeRef = useRef172(null);
+  const activeCompPathRef = useRef172(activeCompPath);
   activeCompPathRef.current = activeCompPath;
-  const leftSidebarRef = useRef171(null);
+  const leftSidebarRef = useRef172(null);
   const renderQueue = useRenderQueue(projectId, activeCompPathRef);
   const captionEditMode = useCaptionStore((s) => s.isEditMode);
   const captionHasSelection = useCaptionStore((s) => s.selectedSegmentIds.size > 0);
@@ -88311,10 +88305,10 @@ function StudioApp() {
     rightPanelTab: initialUrlStateRef.current.rightPanelTab
   });
   const editHistory = usePersistentEditHistory({ projectId });
-  const domEditSaveTimestampRef = useRef171(0);
-  const handleDomZIndexReorderCommitRef = useRef171(null);
-  const pendingTimelineEditPathRef = useRef171(/* @__PURE__ */ new Set());
-  const isGestureRecordingRef = useRef171(false);
+  const domEditSaveTimestampRef = useRef172(0);
+  const handleDomZIndexReorderCommitRef = useRef172(null);
+  const pendingTimelineEditPathRef = useRef172(/* @__PURE__ */ new Set());
+  const isGestureRecordingRef = useRef172(false);
   const reloadPreview = useCallback177(() => setRefreshKey((k) => k + 1), []);
   const fileManager = useFileManager({
     projectId,
@@ -88355,10 +88349,9 @@ function StudioApp() {
     masterCompPath,
     fileManager,
     previewPersistence,
-    pendingTimelineEditPathRef,
-    reloadPreview
+    pendingTimelineEditPathRef
   });
-  const invalidateGsapCacheRef = useRef171(() => {
+  const invalidateGsapCacheRef = useRef172(() => {
   });
   const invalidateGsapCache = useCallback177(() => invalidateGsapCacheRef.current(), []);
   const timelineEditing = useTimelineEditing({
@@ -88418,14 +88411,14 @@ function StudioApp() {
     setRightCollapsed: panelLayout.setRightCollapsed,
     setRightPanelTab: panelLayout.setRightPanelTab
   });
-  const clearDomSelectionRef = useRef171(() => {
+  const clearDomSelectionRef = useRef172(() => {
   });
-  const domEditSelectionBridgeRef = useRef171(null);
-  const handleDomEditElementDeleteRef = useRef171(async () => {
+  const domEditSelectionBridgeRef = useRef172(null);
+  const handleDomEditElementDeleteRef = useRef172(async () => {
   });
   const domEditDeleteBridge = (s, o) => handleDomEditElementDeleteRef.current(s, o);
-  const resetKeyframesRef = useRef171(() => false);
-  const deleteSelectedKeyframesRef = useRef171(() => {
+  const resetKeyframesRef = useRef172(() => false);
+  const deleteSelectedKeyframesRef = useRef172(() => {
   });
   const { handleCopy: handleCopy2, handlePaste: handlePaste2, handleCut } = useClipboard({
     projectId,
@@ -88467,7 +88460,7 @@ function StudioApp() {
     forceReloadSdkSession: sdkHandle.forceReload,
     onToggleRecording: () => handleToggleRecordingRef.current()
   });
-  const sidebarTabRef = useRef171({
+  const sidebarTabRef = useRef172({
     select: (t) => leftSidebarRef.current?.selectTab(t),
     get: () => leftSidebarRef.current?.getTab() ?? "compositions"
   });
@@ -88557,9 +88550,9 @@ function StudioApp() {
     resetErrors: resetConsoleErrors
   } = useConsoleErrorCapture(previewIframe);
   const dragOverlay = useGlobalFileDrop(timelineEditing.handleTimelineFileDrop);
-  const handleToggleRecordingRef = useRef171(() => {
+  const handleToggleRecordingRef = useRef172(() => {
   });
-  const domEditSessionRef = useRef171(domEditSession);
+  const domEditSessionRef = useRef172(domEditSession);
   domEditSessionRef.current = domEditSession;
   const { gestureState, gestureRecording, handleToggleRecording } = useGestureCommit({
     domEditSessionRef,
@@ -88568,7 +88561,7 @@ function StudioApp() {
     isGestureRecordingRef
   });
   handleToggleRecordingRef.current = handleToggleRecording;
-  const canvasRectRef = useRef171(null);
+  const canvasRectRef = useRef172(null);
   useLayoutEffect10(() => {
     if (gestureState !== "recording" || !previewIframe) {
       canvasRectRef.current = null;
@@ -88809,11 +88802,11 @@ function StudioApp() {
 }
 
 // src/hooks/useElementPicker.ts
-import { useState as useState158, useCallback as useCallback178, useRef as useRef172 } from "react";
+import { useState as useState158, useCallback as useCallback178, useRef as useRef173 } from "react";
 function useElementPicker(iframeRef, options) {
   const [isPickMode, setIsPickMode] = useState158(false);
   const [pickedElement, setPickedElement] = useState158(null);
-  const activeOverrideRef = useRef172(null);
+  const activeOverrideRef = useRef173(null);
   const getActiveIframe = useCallback178(() => {
     return activeOverrideRef.current ?? iframeRef.current;
   }, [iframeRef]);
@@ -88887,7 +88880,7 @@ function useElementPicker(iframeRef, options) {
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   });
-  const optionsRef = useRef172(options);
+  const optionsRef = useRef173(options);
   optionsRef.current = options;
   const syncToSource = useCallback178(
     (elementId2, selector, op) => {
@@ -88998,7 +88991,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const activeIframeRef = useRef172(null);
+  const activeIframeRef = useRef173(null);
   activeIframeRef.current = getActiveIframe();
   return {
     isPickMode,