@hyperframes/studio 0.7.84 → 0.7.86

package/dist/index.js

@@ -32,7 +32,7 @@ import {
 import { useCallback as useCallback45 } from "react";
 
 // src/components/nle/PreviewPane.tsx
-import { useCallback as useCallback30, useRef as useRef33, useSyncExternalStore } from "react";
+import { useCallback as useCallback30, useRef as useRef34, useSyncExternalStore } from "react";
 
 // src/player/components/Player.tsx
 import { forwardRef as forwardRef2, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
@@ -2076,7 +2076,7 @@ var PlayerControls = memo3(function PlayerControls2({
 });
 
 // src/player/components/Timeline.tsx
-import { useRef as useRef23, useMemo as useMemo17, useCallback as useCallback17, useState as useState16, useEffect as useEffect17, memo as memo14 } from "react";
+import { useRef as useRef24, useMemo as useMemo17, useCallback as useCallback17, useState as useState16, useEffect as useEffect17, memo as memo14 } from "react";
 
 // src/hooks/useMusicBeatAnalysis.ts
 import { useEffect as useEffect7, useMemo as useMemo2, useRef as useRef6 } from "react";
@@ -9656,6 +9656,9 @@ function trackStudioRenderStart(props) {
     composition: props.composition
   });
 }
+function trackStudioTimelinePerformance(props) {
+  trackEvent("studio_timeline_performance", props);
+}
 function getBrowserDoctorSummary() {
   try {
     const nav = navigator;
@@ -15194,6 +15197,96 @@ function TimelineRazorGuide({ x }) {
   );
 }
 
+// src/player/components/useTimelinePerformanceTelemetry.ts
+import { useRef as useRef23 } from "react";
+var SCROLL_IDLE_MS = 400;
+var MIN_EVENT_INTERVAL_MS = 6e4;
+function percentile(values, fraction) {
+  if (values.length === 0) return void 0;
+  const sorted = [...values].sort((a, b) => a - b);
+  const index = Math.min(sorted.length - 1, Math.ceil(sorted.length * fraction) - 1);
+  return Number(sorted[Math.max(0, index)].toFixed(2));
+}
+function summarizeTimelinePerformance(scroll, context, frameLatencies, frameIntervals) {
+  const latencyP95 = percentile(frameLatencies, 0.95);
+  if (latencyP95 === void 0) return null;
+  const frameIntervalP95 = percentile(frameIntervals, 0.95);
+  return {
+    total_clip_count: context.totalClipCount,
+    mounted_clip_count: scroll.querySelectorAll('[data-clip="true"]').length,
+    total_row_count: context.totalRowCount,
+    timeline_dom_node_count: scroll.querySelectorAll("*").length,
+    viewport_width: scroll.clientWidth,
+    viewport_height: scroll.clientHeight,
+    zoom_mode: context.zoomMode,
+    scroll_sample_count: frameLatencies.length,
+    scroll_frame_latency_p95_ms: latencyP95,
+    scroll_frame_latency_max_ms: Number(Math.max(...frameLatencies).toFixed(2)),
+    ...frameIntervalP95 === void 0 ? {} : { frame_interval_p95_ms: frameIntervalP95 }
+  };
+}
+function resetMeasurements(state) {
+  state.previousFrameAt = null;
+  state.frameLatencies = [];
+  state.frameIntervals = [];
+}
+function useTimelinePerformanceTelemetry(context) {
+  const stateRef = useRef23({
+    frameRequest: 0,
+    idleTimer: null,
+    pendingScrollStartedAt: 0,
+    previousFrameAt: null,
+    frameLatencies: [],
+    frameIntervals: [],
+    lastEmittedAt: Number.NEGATIVE_INFINITY
+  });
+  const recordTimelineScroll = (scroll) => {
+    const state = stateRef.current;
+    const now2 = performance.now();
+    if (state.frameRequest === 0) {
+      state.pendingScrollStartedAt = now2;
+      state.frameRequest = requestAnimationFrame((frameAt) => {
+        state.frameRequest = 0;
+        state.frameLatencies.push(performance.now() - state.pendingScrollStartedAt);
+        if (state.previousFrameAt !== null) {
+          state.frameIntervals.push(frameAt - state.previousFrameAt);
+        }
+        state.previousFrameAt = frameAt;
+      });
+    }
+    if (state.idleTimer !== null) clearTimeout(state.idleTimer);
+    state.idleTimer = setTimeout(() => {
+      state.idleTimer = null;
+      if (state.frameRequest !== 0) {
+        cancelAnimationFrame(state.frameRequest);
+        state.frameRequest = 0;
+        resetMeasurements(state);
+        return;
+      }
+      const emittedAt = performance.now();
+      if (emittedAt - state.lastEmittedAt >= MIN_EVENT_INTERVAL_MS) {
+        const sample = summarizeTimelinePerformance(
+          scroll,
+          context,
+          state.frameLatencies,
+          state.frameIntervals
+        );
+        if (sample) {
+          trackStudioTimelinePerformance(sample);
+          state.lastEmittedAt = emittedAt;
+        }
+      }
+      resetMeasurements(state);
+    }, SCROLL_IDLE_MS);
+  };
+  useMountEffect(() => () => {
+    const state = stateRef.current;
+    if (state.frameRequest !== 0) cancelAnimationFrame(state.frameRequest);
+    if (state.idleTimer !== null) clearTimeout(state.idleTimer);
+  });
+  return { recordTimelineScroll };
+}
+
 // src/player/components/Timeline.tsx
 import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 var Timeline = memo14(function Timeline2({
@@ -15274,12 +15367,12 @@ var Timeline = memo14(function Timeline2({
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { zoomMode, manualZoomPercent, setZoomMode, setManualZoomPercent } = useTimelineZoom();
-  const playheadRef = useRef23(null);
-  const containerRef = useRef23(null);
-  const scrollRef = useRef23(null);
+  const playheadRef = useRef24(null);
+  const containerRef = useRef24(null);
+  const scrollRef = useRef24(null);
   const activeTool = usePlayerStore((s) => s.activeTool);
   const [hoveredClip, setHoveredClip] = useState16(null);
-  const isDragging = useRef23(false);
+  const isDragging = useRef24(false);
   const [shiftHeld, setShiftHeld] = useState16(false);
   useMountEffect(() => {
     const key = (e) => e.key === "Shift" && setShiftHeld(e.type === "keydown");
@@ -15299,7 +15392,7 @@ var Timeline = memo14(function Timeline2({
   const setContainerRef = useCallback17((el) => {
     containerRef.current = el;
   }, []);
-  const lastScrollLeftRef = useRef23(0);
+  const lastScrollLeftRef = useRef24(0);
   const effectiveDuration = useMemo17(() => {
     const safeDur = Number.isFinite(duration) ? duration : 0;
     if (rawElements.length === 0) return safeDur;
@@ -15309,12 +15402,12 @@ var Timeline = memo14(function Timeline2({
   const keyframeCache = usePlayerStore((s) => s.keyframeCache);
   useAutoExpandKeyframedClips(gsapAnimations);
   const { tracks, trackStyles, trackOrder, trackOrderRef, laneCounts, rowHeights, rowHeightsRef } = useTimelineTrackLayout(expandedElements, gsapAnimations, selectedElementId, selectedElementIds);
-  const expandedElementsRef = useRef23(expandedElements);
+  const expandedElementsRef = useRef24(expandedElements);
   expandedElementsRef.current = expandedElements;
-  const ppsRef = useRef23(100);
-  const durationRef = useRef23(effectiveDuration);
+  const ppsRef = useRef24(100);
+  const durationRef = useRef24(effectiveDuration);
   durationRef.current = effectiveDuration;
-  const fitPpsRef = useRef23(100);
+  const fitPpsRef = useRef24(100);
   const {
     pinZoomBeforeEdit,
     setRangeSelectionRef,
@@ -15394,6 +15487,11 @@ var Timeline = memo14(function Timeline2({
     onCompositionDrop: pinnedOnCompositionDrop
   });
   const displayLayout = useTimelineDisplayLayout(draggedClip, trackOrder, rowHeights);
+  const { recordTimelineScroll } = useTimelinePerformanceTelemetry({
+    totalClipCount: expandedElements.length,
+    totalRowCount: displayLayout.displayTrackOrder.length,
+    zoomMode
+  });
   const { viewportWidth, showShortcutHint, setScrollRef } = useTimelineScrollViewport(scrollRef, [
     timelineReady,
     expandedElements.length,
@@ -15414,7 +15512,7 @@ var Timeline = memo14(function Timeline2({
     () => expandedElements.find((element) => (element.key ?? element.id) === selectedElementId) ?? null,
     [expandedElements, selectedElementId]
   );
-  const selectedElementRef = useRef23(selectedElement);
+  const selectedElementRef = useRef24(selectedElement);
   selectedElementRef.current = selectedElement;
   const {
     pps,
@@ -15509,7 +15607,7 @@ var Timeline = memo14(function Timeline2({
     contentOrigin
   });
   setRangeSelectionRef.current = setRangeSelection;
-  const prevSelectedRef = useRef23(selectedElementRef.current);
+  const prevSelectedRef = useRef24(selectedElementRef.current);
   useEffect17(() => {
     const prev = prevSelectedRef.current;
     const curr = selectedElementRef.current;
@@ -15573,6 +15671,7 @@ var Timeline = memo14(function Timeline2({
             className: `${zoomMode === "fit" ? "overflow-x-hidden" : "overflow-x-auto"} overflow-y-auto h-full outline-none`,
             onScroll: (e) => {
               lastScrollLeftRef.current = e.currentTarget.scrollLeft;
+              recordTimelineScroll(e.currentTarget);
             },
             onDragOver: handleAssetDragOver,
             onDragLeave: () => clearDropPreview(),
@@ -15694,7 +15793,7 @@ var Timeline = memo14(function Timeline2({
 });
 
 // src/player/components/VideoThumbnail.tsx
-import { memo as memo15, useRef as useRef24, useState as useState17, useCallback as useCallback18, useEffect as useEffect18 } from "react";
+import { memo as memo15, useRef as useRef25, useState as useState17, useCallback as useCallback18, useEffect as useEffect18 } from "react";
 
 // src/player/components/thumbnailUtils.ts
 var THUMBNAIL_CLIP_HEIGHT = 66;
@@ -15727,9 +15826,9 @@ var VideoThumbnail = memo15(function VideoThumbnail2({
   const [frames, setFrames] = useState17([]);
   const [failed2, setFailed] = useState17(false);
   const [aspect, setAspect] = useState17(16 / 9);
-  const ioRef = useRef24(null);
-  const roRef = useRef24(null);
-  const extractingRef = useRef24(false);
+  const ioRef = useRef25(null);
+  const roRef = useRef25(null);
+  const extractingRef = useRef25(false);
   const setContainerRef = useCallback18((el) => {
     ioRef.current?.disconnect();
     roRef.current?.disconnect();
@@ -15880,7 +15979,7 @@ var VideoThumbnail = memo15(function VideoThumbnail2({
 });
 
 // src/player/components/CompositionThumbnail.tsx
-import { memo as memo16, useCallback as useCallback19, useState as useState18, useRef as useRef25 } from "react";
+import { memo as memo16, useCallback as useCallback19, useState as useState18, useRef as useRef26 } from "react";
 import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var CLIP_HEIGHT2 = 66;
 var THUMBNAIL_URL_VERSION = "v3";
@@ -15917,7 +16016,7 @@ var CompositionThumbnail = memo16(function CompositionThumbnail2({
   const [containerWidth, setContainerWidth] = useState18(0);
   const [loaded, setLoaded] = useState18(false);
   const [aspect, setAspect] = useState18(16 / 9);
-  const roRef = useRef25(null);
+  const roRef = useRef26(null);
   const setContainerRef = useCallback19((el) => {
     roRef.current?.disconnect();
     if (!el) return;
@@ -16000,10 +16099,10 @@ var CompositionThumbnail = memo16(function CompositionThumbnail2({
 });
 
 // src/player/hooks/useTimelinePlayer.ts
-import { useRef as useRef27, useCallback as useCallback23, useEffect as useEffect19 } from "react";
+import { useRef as useRef28, useCallback as useCallback23, useEffect as useEffect19 } from "react";
 
 // src/player/hooks/usePlaybackKeyboard.ts
-import { useRef as useRef26, useCallback as useCallback20 } from "react";
+import { useRef as useRef27, useCallback as useCallback20 } from "react";
 
 // src/captions/store.ts
 import { create as create3 } from "zustand";
@@ -16245,10 +16344,10 @@ function usePlaybackKeyboard({
   pause,
   seek
 }) {
-  const pressedKeysRef = useRef26(/* @__PURE__ */ new Set());
-  const playbackKeyDownRef = useRef26(() => {
+  const pressedKeysRef = useRef27(/* @__PURE__ */ new Set());
+  const playbackKeyDownRef = useRef27(() => {
   });
-  const playbackKeyUpRef = useRef26(() => {
+  const playbackKeyUpRef = useRef27(() => {
   });
   const stepFrames = useCallback20(
     (deltaFrames) => {
@@ -16863,18 +16962,18 @@ function timelineElementsChanged(prev, next) {
   });
 }
 function useTimelinePlayer() {
-  const iframeRef = useRef27(null);
-  const rafRef = useRef27(0);
-  const probeIntervalRef = useRef27(void 0);
-  const pendingSeekRef = useRef27(null);
-  const isRefreshingRef = useRef27(false);
-  const reverseRafRef = useRef27(0);
-  const shuttleDirectionRef = useRef27(null);
-  const shuttleSpeedIndexRef = useRef27(0);
-  const iframeShortcutCleanupRef = useRef27(null);
-  const lastTimelineMessageRef = useRef27(0);
-  const staticSeekAdapterRef = useRef27(null);
-  const staticSeekWarnedRef = useRef27(false);
+  const iframeRef = useRef28(null);
+  const rafRef = useRef28(0);
+  const probeIntervalRef = useRef28(void 0);
+  const pendingSeekRef = useRef28(null);
+  const isRefreshingRef = useRef28(false);
+  const reverseRafRef = useRef28(0);
+  const shuttleDirectionRef = useRef28(null);
+  const shuttleSpeedIndexRef = useRef28(0);
+  const iframeShortcutCleanupRef = useRef28(null);
+  const lastTimelineMessageRef = useRef28(0);
+  const staticSeekAdapterRef = useRef28(null);
+  const staticSeekWarnedRef = useRef28(false);
   const { setIsPlaying, setCurrentTime, setDuration, setTimelineReady, setElements } = usePlayerStore.getState();
   const syncTimelineElements = useCallback23(
     (elements, nextDuration) => {
@@ -17201,7 +17300,7 @@ function useTimelinePlayer() {
     applyPreviewVariablesToUrl(url);
     iframe.src = url.toString();
   }, [saveSeekPosition]);
-  const getAdapterRef = useRef27(getAdapter);
+  const getAdapterRef = useRef28(getAdapter);
   getAdapterRef.current = getAdapter;
   useMountEffect(() => {
     const handleWindowKeyDown = (e) => playbackKeyDownRef.current(e);
@@ -17309,7 +17408,7 @@ function useTimelinePlayer() {
 }
 
 // src/components/nle/NLEPreview.tsx
-import { memo as memo17, useCallback as useCallback24, useEffect as useEffect20, useRef as useRef28, useState as useState19 } from "react";
+import { memo as memo17, useCallback as useCallback24, useEffect as useEffect20, useRef as useRef29, useState as useState19 } from "react";
 
 // src/components/nle/previewZoom.ts
 var MIN_PREVIEW_ZOOM_PERCENT = 25;
@@ -17476,21 +17575,21 @@ var NLEPreview = memo17(function NLEPreview2({
   onCompositionSizeChange
 }) {
   const activeKey = getPreviewPlayerKey({ projectId, directUrl });
-  const viewportRef = useRef28(null);
-  const stageRef = useRef28(null);
-  const previewIframeRef = useRef28(null);
+  const viewportRef = useRef29(null);
+  const stageRef = useRef29(null);
+  const previewIframeRef = useRef29(null);
   useEffect20(() => {
     onStageRef?.(stageRef);
   }, [onStageRef]);
   const [compositionSize, setCompositionSize] = useState19(null);
   const [stageSize, setStageSize] = useState19(() => resolvePreviewStageSize(0, 0, null, portrait));
-  const zoomRef = useRef28(loadInitialZoom());
+  const zoomRef = useRef29(loadInitialZoom());
   const [settledZoom, setSettledZoom] = useState19(() => zoomRef.current);
-  const hudRef = useRef28(null);
-  const hudTimerRef = useRef28(null);
-  const settleTimerRef = useRef28(null);
-  const zoomingRef = useRef28(false);
-  const dragRef = useRef28(null);
+  const hudRef = useRef29(null);
+  const hudTimerRef = useRef29(null);
+  const settleTimerRef = useRef29(null);
+  const zoomingRef = useRef29(false);
+  const dragRef = useRef29(null);
   useEffect20(() => {
     return () => {
       if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
@@ -17509,7 +17608,7 @@ var NLEPreview = memo17(function NLEPreview2({
     observer.observe(viewport);
     return () => observer.disconnect();
   }, [compositionSize, portrait]);
-  const onCompositionSizeChangeRef = useRef28(onCompositionSizeChange);
+  const onCompositionSizeChangeRef = useRef29(onCompositionSizeChange);
   onCompositionSizeChangeRef.current = onCompositionSizeChange;
   const updateCompositionSizeFromPreview = useCallback24(() => {
     const next = readPreviewCompositionSize(previewIframeRef.current);
@@ -17527,7 +17626,7 @@ var NLEPreview = memo17(function NLEPreview2({
     },
     [iframeRef]
   );
-  const stageSizeRef = useRef28(stageSize);
+  const stageSizeRef = useRef29(stageSize);
   stageSizeRef.current = stageSize;
   const writeTransform2 = useCallback24((state) => {
     const stage = stageRef.current;
@@ -17869,7 +17968,7 @@ function CompositionBreadcrumb({ stack, onNavigate }) {
 }
 
 // src/components/nle/usePreviewBlockDrop.ts
-import { useCallback as useCallback25, useRef as useRef29, useState as useState20 } from "react";
+import { useCallback as useCallback25, useRef as useRef30, useState as useState20 } from "react";
 function parseBlockPayload(raw) {
   try {
     const parsed = JSON.parse(raw);
@@ -17904,7 +18003,7 @@ function usePreviewBlockDrop({
   onBlockDrop
 }) {
   const [isDragOver, setIsDragOver] = useState20(false);
-  const dragDepthRef = useRef29(0);
+  const dragDepthRef = useRef30(0);
   const handleDragEnter = useCallback25(
     (e) => {
       if (!onBlockDrop) return;
@@ -17959,12 +18058,12 @@ import {
   useContext as useContext5,
   useState as useState22,
   useCallback as useCallback28,
-  useRef as useRef32,
+  useRef as useRef33,
   useEffect as useEffect22
 } from "react";
 
 // src/components/nle/useCompositionStack.ts
-import { useState as useState21, useCallback as useCallback26, useRef as useRef30, useEffect as useEffect21 } from "react";
+import { useState as useState21, useCallback as useCallback26, useRef as useRef31, useEffect as useEffect21 } from "react";
 function useCompositionStack({
   projectId,
   activeCompositionPath,
@@ -17977,7 +18076,7 @@ function useCompositionStack({
       previewUrl: `/api/projects/${projectId}/preview`
     }
   ]);
-  const onCompositionChangeRef = useRef30(onCompositionChange);
+  const onCompositionChangeRef = useRef31(onCompositionChange);
   onCompositionChangeRef.current = onCompositionChange;
   const updateCompositionStack = useCallback26((action) => {
     setCompositionStack((prev) => {
@@ -17987,9 +18086,9 @@ function useCompositionStack({
       return next;
     });
   }, []);
-  const masterSeekRef = useRef30(0);
+  const masterSeekRef = useRef31(0);
   const [compIdToSrc, setCompIdToSrc] = useState21(/* @__PURE__ */ new Map());
-  const compIdToSrcRef = useRef30(compIdToSrc);
+  const compIdToSrcRef = useRef31(compIdToSrc);
   compIdToSrcRef.current = compIdToSrc;
   const handleNavigateComposition = useCallback26(
     (index) => {
@@ -18061,7 +18160,7 @@ function useCompositionStack({
 }
 
 // src/components/nle/TimelineResizeDivider.tsx
-import { useCallback as useCallback27, useRef as useRef31 } from "react";
+import { useCallback as useCallback27, useRef as useRef32 } from "react";
 import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var MIN_TIMELINE_H = 100;
 var MIN_PREVIEW_H = 120;
@@ -18072,8 +18171,8 @@ function TimelineResizeDivider({
   containerRef,
   disabled
 }) {
-  const isDragging = useRef31(false);
-  const timelineHRef = useRef31(timelineH);
+  const isDragging = useRef32(false);
+  const timelineHRef = useRef32(timelineH);
   timelineHRef.current = timelineH;
   const handlePointerDown = useCallback27(
     (e) => {
@@ -18193,7 +18292,7 @@ function NLEProvider({
     useAssetPreviewStore.getState().clearPreviewAsset();
   }, [projectId]);
   const [previewCompositionSize, setPreviewCompositionSize] = useState22(null);
-  const prevRefreshKeyRef = useRef32(refreshKey);
+  const prevRefreshKeyRef = useRef33(refreshKey);
   useEffect22(() => {
     if (refreshKey === prevRefreshKeyRef.current) return;
     prevRefreshKeyRef.current = refreshKey;
@@ -18244,9 +18343,9 @@ function NLEProvider({
     },
     [compIdToSrc, drillDown, iframeRef_]
   );
-  const compIdToSrcRef = useRef32(compIdToSrc);
+  const compIdToSrcRef = useRef33(compIdToSrc);
   compIdToSrcRef.current = compIdToSrc;
-  const onCompIdToSrcChangeRef = useRef32(onCompIdToSrcChange);
+  const onCompIdToSrcChangeRef = useRef33(onCompIdToSrcChange);
   onCompIdToSrcChangeRef.current = onCompIdToSrcChange;
   useEffect22(() => {
     const controller = new AbortController();
@@ -18320,14 +18419,14 @@ function NLEProvider({
   const persistTimelineH = useCallback28((height) => {
     writeStudioUiPreferences({ timelineHeight: Math.round(height) });
   }, []);
-  const containerRef = useRef32(null);
+  const containerRef = useRef33(null);
   useEffect22(() => {
     const containerH = containerRef.current?.getBoundingClientRect().height;
     if (!containerH) return;
     const max = containerH - MIN_PREVIEW_H;
     setTimelineH((prev) => prev > max ? Math.max(MIN_TIMELINE_H, max) : prev);
   }, []);
-  const hasLoadedOnceRef = useRef32(false);
+  const hasLoadedOnceRef = useRef33(false);
   const [compositionLoading, setCompositionLoadingRaw] = useState22(true);
   const setCompositionLoading = useCallback28((loading) => {
     if (!loading) hasLoadedOnceRef.current = true;
@@ -18338,7 +18437,7 @@ function NLEProvider({
   useEffect22(() => {
     onCompositionLoadingChange?.(compositionLoading);
   }, [compositionLoading, onCompositionLoadingChange]);
-  const onIframeRefStable = useRef32(onIframeRef);
+  const onIframeRefStable = useRef33(onIframeRef);
   onIframeRefStable.current = onIframeRef;
   useEffect22(() => {
     onIframeRefStable.current?.(iframeRef.current);
@@ -18547,7 +18646,7 @@ function PreviewPane({
     previewCompositionSize,
     setPreviewCompositionSize
   } = useNLEContext();
-  const stageRefForDrop = useRef33(null);
+  const stageRefForDrop = useRef34(null);
   const handleStageRef = useCallback30((ref) => {
     stageRefForDrop.current = ref.current;
   }, []);
@@ -18563,7 +18662,7 @@ function PreviewPane({
     stageRef: stageRefForDrop,
     onBlockDrop: onPreviewBlockDrop
   });
-  const containerRef = useRef33(null);
+  const containerRef = useRef34(null);
   const fullscreenElement = useSyncExternalStore(subscribeFullscreen, getFullscreenElement);
   const isFullscreen = fullscreenElement === containerRef.current && fullscreenElement != null;
   const toggleFullscreen = useCallback30(() => {
@@ -18847,7 +18946,7 @@ function TimelinePane({
 import { useState as useState35 } from "react";
 
 // src/captions/components/CaptionOverlay.tsx
-import { memo as memo18, useState as useState23, useCallback as useCallback32, useRef as useRef34 } from "react";
+import { memo as memo18, useState as useState23, useCallback as useCallback32, useRef as useRef35 } from "react";
 
 // src/captions/keyboard.ts
 var CAPTION_NUDGE_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
@@ -19036,10 +19135,10 @@ var CaptionOverlay = memo18(function CaptionOverlay2({ iframeRef }) {
   const selectSegment = useCaptionStore((s) => s.selectSegment);
   const clearSelection = useCaptionStore((s) => s.clearSelection);
   const [wordBoxes, setWordBoxes] = useState23([]);
-  const overlayRef = useRef34(null);
-  const modelRef = useRef34(model);
+  const overlayRef = useRef35(null);
+  const modelRef = useRef35(model);
   modelRef.current = model;
-  const interactionRef = useRef34(null);
+  const interactionRef = useRef35(null);
   useMountEffect(() => {
     if (!isEditMode) return;
     let prevBoxes = [];
@@ -19326,10 +19425,10 @@ var CaptionOverlay = memo18(function CaptionOverlay2({ iframeRef }) {
 });
 
 // src/components/editor/DomEditOverlay.tsx
-import { memo as memo22, useEffect as useEffect28, useMemo as useMemo18, useRef as useRef41, useState as useState30 } from "react";
+import { memo as memo22, useEffect as useEffect28, useMemo as useMemo18, useRef as useRef42, useState as useState30 } from "react";
 
 // src/components/editor/marqueeCommit.ts
-import { useCallback as useCallback33, useRef as useRef35, useState as useState24 } from "react";
+import { useCallback as useCallback33, useRef as useRef36, useState as useState24 } from "react";
 
 // src/utils/studioHelpers.ts
 function getTimelineElementLabel(element) {
@@ -20320,7 +20419,7 @@ async function runMarqueeIntersection(rect, iframe, overlayEl, activeComposition
   return hits;
 }
 function useMarqueeGestures(deps) {
-  const marqueeRef = useRef35(null);
+  const marqueeRef = useRef36(null);
   const [marqueeRect, setMarqueeRect] = useState24(null);
   const [candidateRects, setCandidateRects] = useState24([]);
   const commitMarquee = useCallback33(
@@ -20439,12 +20538,12 @@ function MarqueeOverlay({ candidateRects, marqueeRect }) {
 }
 
 // src/components/editor/useZOrderCrossedFlash.tsx
-import { useCallback as useCallback34, useEffect as useEffect24, useRef as useRef36, useState as useState25 } from "react";
+import { useCallback as useCallback34, useEffect as useEffect24, useRef as useRef37, useState as useState25 } from "react";
 import { jsx as jsx53 } from "react/jsx-runtime";
 var Z_ORDER_CROSSED_FLASH_MS = 600;
 function useZOrderCrossedFlash({ overlayRef, iframeRef }) {
   const [zOrderFlashRect, setZOrderFlashRect] = useState25(null);
-  const timeoutRef = useRef36(null);
+  const timeoutRef = useRef37(null);
   useEffect24(
     () => () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
@@ -20567,7 +20666,7 @@ function hasDomEditRotationChanged(initialAngle, nextAngle) {
 }
 
 // src/components/editor/useDomEditOverlayRects.ts
-import { useRef as useRef37, useState as useState27 } from "react";
+import { useRef as useRef38, useState as useState27 } from "react";
 function childRectsEqual(a, b) {
   if (a.length !== b.length) return false;
   for (let i = 0; i < a.length; i++) {
@@ -20588,13 +20687,13 @@ function useDomEditOverlayRects({
   const [hoverRect, setHoverRectState] = useState27(null);
   const [groupOverlayItems, setGroupOverlayItemsState] = useState27([]);
   const [childRects, setChildRectsState] = useState27([]);
-  const overlayRectRef = useRef37(null);
-  const hoverRectRef = useRef37(null);
-  const groupOverlayItemsRef = useRef37([]);
-  const resolvedElementRef = useRef37(null);
-  const resolvedHoverElementRef = useRef37(null);
-  const resolvedGroupElementRef = useRef37(/* @__PURE__ */ new Map());
-  const childRectsRef = useRef37([]);
+  const overlayRectRef = useRef38(null);
+  const hoverRectRef = useRef38(null);
+  const groupOverlayItemsRef = useRef38([]);
+  const resolvedElementRef = useRef38(null);
+  const resolvedHoverElementRef = useRef38(null);
+  const resolvedGroupElementRef = useRef38(/* @__PURE__ */ new Map());
+  const childRectsRef = useRef38([]);
   const setOverlayRect = (next) => {
     if (rectsEqual(overlayRectRef.current, next)) return;
     overlayRectRef.current = next;
@@ -23302,7 +23401,7 @@ function createDomEditOverlayGestureHandlers(opts) {
 }
 
 // src/components/editor/useDomEditNudge.ts
-import { useCallback as useCallback36, useEffect as useEffect26, useRef as useRef38 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect26, useRef as useRef39 } from "react";
 
 // src/utils/timelineDiscovery.ts
 function isEditableTarget(target) {
@@ -23368,8 +23467,8 @@ function shouldIgnoreNudgeKey(p, event) {
   return isEditableTarget(event.target);
 }
 function useDomEditNudge(params) {
-  const sessionRef = useRef38(null);
-  const paramsRef = useRef38(params);
+  const sessionRef = useRef39(null);
+  const paramsRef = useRef39(params);
   paramsRef.current = params;
   const commitSession = () => {
     const session = sessionRef.current;
@@ -23390,7 +23489,7 @@ function useDomEditNudge(params) {
       }
     }).finally(() => endManualOffsetDragMembers(session.members));
   };
-  const commitSessionRef = useRef38(commitSession);
+  const commitSessionRef = useRef39(commitSession);
   commitSessionRef.current = commitSession;
   const beginSession = () => {
     const p = paramsRef.current;
@@ -23425,7 +23524,7 @@ function useDomEditNudge(params) {
     if (session.timer) clearTimeout(session.timer);
     session.timer = setTimeout(() => commitSessionRef.current(), CANVAS_NUDGE_COMMIT_DEBOUNCE_MS);
   };
-  const handleKeyDownRef = useRef38(handleKeyDown);
+  const handleKeyDownRef = useRef39(handleKeyDown);
   handleKeyDownRef.current = handleKeyDown;
   useMountEffect(() => {
     const listener = (event) => handleKeyDownRef.current(event);
@@ -23448,7 +23547,7 @@ function useDomEditNudge(params) {
 }
 
 // src/components/editor/SnapGuideOverlay.tsx
-import { memo as memo19, useRef as useRef39 } from "react";
+import { memo as memo19, useRef as useRef40 } from "react";
 import { jsx as jsx55, jsxs as jsxs42 } from "react/jsx-runtime";
 var MAX_GUIDES = 6;
 var MAX_SPACING_GUIDES = 4;
@@ -23462,10 +23561,10 @@ var SnapGuideOverlay = memo19(function SnapGuideOverlay2({
   compositionWidth,
   compositionHeight
 }) {
-  const guideElsRef = useRef39([]);
-  const spacingElsRef = useRef39([]);
-  const spacingLabelElsRef = useRef39([]);
-  const compositionRectRef = useRef39({
+  const guideElsRef = useRef40([]);
+  const spacingElsRef = useRef40([]);
+  const spacingLabelElsRef = useRef40([]);
+  const compositionRectRef = useRef40({
     left: compositionLeft,
     top: compositionTop,
     width: compositionWidth,
@@ -23628,7 +23727,7 @@ var GridOverlay = memo20(function GridOverlay2({
 });
 
 // src/components/editor/DomEditCropHandles.tsx
-import { useEffect as useEffect27, useRef as useRef40, useState as useState28 } from "react";
+import { useEffect as useEffect27, useRef as useRef41, useState as useState28 } from "react";
 import { Fragment as Fragment19, jsx as jsx57, jsxs as jsxs43 } from "react/jsx-runtime";
 var EDGE_HIT_THICKNESS = 12;
 var EDGE_HIT_LENGTH = 32;
@@ -23661,7 +23760,7 @@ function DomEditCropHandles({
   overlayRect,
   onStyleCommit
 }) {
-  const gestureRef = useRef40(null);
+  const gestureRef = useRef41(null);
   const [dragging, setDragging] = useState28(false);
   const [hotEdge, setHotEdge] = useState28(null);
   const cropStateFor = (element) => {
@@ -23674,9 +23773,9 @@ function DomEditCropHandles({
     setState(cropStateFor(selection.element));
   }
   const hasCrop = state.insets.top > 0 || state.insets.right > 0 || state.insets.bottom > 0 || state.insets.left > 0;
-  const liftedRef = useRef40(false);
-  const preLiftInlineClipRef = useRef40("");
-  const committedClipRef = useRef40(null);
+  const liftedRef = useRef41(false);
+  const preLiftInlineClipRef = useRef41("");
+  const committedClipRef = useRef41(null);
   useEffect27(() => {
     const el = selection.element;
     if (readElementCropInsets(el) === null) return;
@@ -24539,47 +24638,47 @@ var DomEditOverlay = memo22(function DomEditOverlay2({
   onDeleteSelection,
   onApplyZIndex
 }) {
-  const overlayRef = useRef41(null);
-  const boxRef = useRef41(null);
-  const onMarqueeSelectRef = useRef41(onMarqueeSelect);
+  const overlayRef = useRef42(null);
+  const boxRef = useRef42(null);
+  const onMarqueeSelectRef = useRef42(onMarqueeSelect);
   onMarqueeSelectRef.current = onMarqueeSelect;
   const selectionShapeStyles = readDomEditSelectionShapeStyles(selection);
-  const gestureRef = useRef41(null);
-  const groupGestureRef = useRef41(null);
-  const blockedMoveRef = useRef41(null);
-  const suppressNextBoxClickRef = useRef41(false);
-  const suppressNextBoxMouseDownRef = useRef41(false);
-  const suppressNextOverlayMouseDownRef = useRef41(false);
-  const snapGuidesRef = useRef41(null);
-  const rafPausedRef = useRef41(false);
-  const selectionRef = useRef41(selection);
+  const gestureRef = useRef42(null);
+  const groupGestureRef = useRef42(null);
+  const blockedMoveRef = useRef42(null);
+  const suppressNextBoxClickRef = useRef42(false);
+  const suppressNextBoxMouseDownRef = useRef42(false);
+  const suppressNextOverlayMouseDownRef = useRef42(false);
+  const snapGuidesRef = useRef42(null);
+  const rafPausedRef = useRef42(false);
+  const selectionRef = useRef42(selection);
   selectionRef.current = selection;
   const { zOrderFlashRect, handleZOrderCrossed } = useZOrderCrossedFlash({ overlayRef, iframeRef });
-  const activeCompositionPathRef = useRef41(activeCompositionPath);
+  const activeCompositionPathRef = useRef42(activeCompositionPath);
   activeCompositionPathRef.current = activeCompositionPath;
-  const groupSelectionsRef = useRef41(groupSelections);
+  const groupSelectionsRef = useRef42(groupSelections);
   groupSelectionsRef.current = groupSelections;
-  const hoverSelectionRef = useRef41(hoverSelection);
+  const hoverSelectionRef = useRef42(hoverSelection);
   hoverSelectionRef.current = hoverSelection;
-  const onPathOffsetCommitRef = useRef41(onPathOffsetCommit);
+  const onPathOffsetCommitRef = useRef42(onPathOffsetCommit);
   onPathOffsetCommitRef.current = onPathOffsetCommit;
-  const onGroupPathOffsetCommitRef = useRef41(onGroupPathOffsetCommit);
+  const onGroupPathOffsetCommitRef = useRef42(onGroupPathOffsetCommit);
   onGroupPathOffsetCommitRef.current = onGroupPathOffsetCommit;
-  const onBoxSizeCommitRef = useRef41(onBoxSizeCommit);
+  const onBoxSizeCommitRef = useRef42(onBoxSizeCommit);
   onBoxSizeCommitRef.current = onBoxSizeCommit;
-  const onRotationCommitRef = useRef41(onRotationCommit);
+  const onRotationCommitRef = useRef42(onRotationCommit);
   onRotationCommitRef.current = onRotationCommit;
-  const onStyleCommitRef = useRef41(onStyleCommit);
+  const onStyleCommitRef = useRef42(onStyleCommit);
   onStyleCommitRef.current = onStyleCommit;
-  const onBlockedMoveRef = useRef41(onBlockedMove);
+  const onBlockedMoveRef = useRef42(onBlockedMove);
   onBlockedMoveRef.current = onBlockedMove;
-  const onManualDragStartRef = useRef41(onManualDragStart);
+  const onManualDragStartRef = useRef42(onManualDragStart);
   onManualDragStartRef.current = onManualDragStart;
-  const onCanvasPointerMoveRef = useRef41(onCanvasPointerMove);
+  const onCanvasPointerMoveRef = useRef42(onCanvasPointerMove);
   onCanvasPointerMoveRef.current = onCanvasPointerMove;
-  const onCanvasPointerLeaveRef = useRef41(onCanvasPointerLeave);
+  const onCanvasPointerLeaveRef = useRef42(onCanvasPointerLeave);
   onCanvasPointerLeaveRef.current = onCanvasPointerLeave;
-  const onSelectionChangeRef = useRef41(onSelectionChange);
+  const onSelectionChangeRef = useRef42(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
   const {
     overlayRect,
@@ -24600,7 +24699,7 @@ var DomEditOverlay = memo22(function DomEditOverlay2({
     rafPausedRef
   });
   const compRect = useDomEditCompositionRect({ iframeRef, overlayRef });
-  const compRectRef = useRef41(compRect);
+  const compRectRef = useRef42(compRect);
   compRectRef.current = compRect;
   const { hasCropInsets, cropOutlineInsetPx } = useCropOverlay({
     selection,
@@ -24608,12 +24707,12 @@ var DomEditOverlay = memo22(function DomEditOverlay2({
   });
   const boxClipPath = hasCropInsets ? void 0 : selectionShapeStyles.clipPath;
   const boxChromeClass = resolveBoxChromeClass(Boolean(cropOutlineInsetPx), boxClipPath);
-  const offCanvasElementsRef = useRef41(/* @__PURE__ */ new Map());
+  const offCanvasElementsRef = useRef42(/* @__PURE__ */ new Map());
   const [offCanvasRects, setOffCanvasRects] = useState30([]);
-  const offCanvasDirtyRef = useRef41(true);
-  const offCanvasSigRef = useRef41("");
-  const offCanvasObserverRef = useRef41(null);
-  const offCanvasObservedDocRef = useRef41(null);
+  const offCanvasDirtyRef = useRef42(true);
+  const offCanvasSigRef = useRef42("");
+  const offCanvasObserverRef = useRef42(null);
+  const offCanvasObservedDocRef = useRef42(null);
   useMountEffect(
     () => startOffCanvasIndicatorRefresh({
       iframeRef,
@@ -25061,7 +25160,7 @@ function writeKeyframeCache(sourceFile, elementId, data) {
 }
 
 // src/components/editor/MotionPathOverlay.tsx
-import { memo as memo23, useEffect as useEffect30, useRef as useRef43, useState as useState32 } from "react";
+import { memo as memo23, useEffect as useEffect30, useRef as useRef44, useState as useState32 } from "react";
 
 // src/hooks/gsapRuntimeKeyframes.ts
 import { buildArcPath } from "@hyperframes/core/gsap-parser-acorn";
@@ -26013,7 +26112,7 @@ function commitCreatePath(targetSelector, position, x, y, commit) {
 }
 
 // src/components/editor/useMotionPathData.ts
-import { useEffect as useEffect29, useRef as useRef42, useState as useState31 } from "react";
+import { useEffect as useEffect29, useRef as useRef43, useState as useState31 } from "react";
 function transformTranslate(el) {
   const t = el.ownerDocument?.defaultView?.getComputedStyle(el).transform;
   if (!t || t === "none") return { x: 0, y: 0 };
@@ -26079,7 +26178,7 @@ function hasMotionPathPlugin(iframe) {
 function useMotionPathData(iframeRef, selector) {
   const [rect, setRect] = useState31(null);
   const [geometry, setGeometry] = useState31(null);
-  const resolvedForRef = useRef42(null);
+  const resolvedForRef = useRef43(null);
   const geometryResolved = resolvedForRef.current === selector;
   const [visibleInPreview, setVisibleInPreview] = useState31(true);
   const [home, setHome] = useState31(null);
@@ -26187,8 +26286,8 @@ var MotionPathOverlay = memo23(function MotionPathOverlay2({
   const armed = usePlayerStore((s) => s.motionPathArmed);
   const setMotionPathArmed = usePlayerStore((s) => s.setMotionPathArmed);
   const setMotionPathCreateAvailable = usePlayerStore((s) => s.setMotionPathCreateAvailable);
-  const dragRef = useRef43(null);
-  const parkTimerRef = useRef43(void 0);
+  const dragRef = useRef44(null);
+  const parkTimerRef = useRef44(void 0);
   const animId = editableAnimationId(selectedGsapAnimations ?? [], geometry?.kind ?? "linear");
   useEffect30(() => () => clearTimeout(parkTimerRef.current), [animId]);
   const createMode = geometryResolved && !geometry && Boolean(selection?.element) && !isPlaying;
@@ -26528,7 +26627,7 @@ var MotionPathOverlay = memo23(function MotionPathOverlay2({
 });
 
 // src/components/editor/SnapToolbar.tsx
-import { memo as memo24, useCallback as useCallback37, useEffect as useEffect31, useRef as useRef44, useState as useState33 } from "react";
+import { memo as memo24, useCallback as useCallback37, useEffect as useEffect31, useRef as useRef45, useState as useState33 } from "react";
 import { MagnetStraight, GridFour, Path } from "@phosphor-icons/react";
 import { jsx as jsx64, jsxs as jsxs50 } from "react/jsx-runtime";
 var SNAP_DEFAULTS = {
@@ -26552,8 +26651,8 @@ var SnapToolbar = memo24(function SnapToolbar2({ onSnapChange }) {
   const motionPathCreateAvailable = usePlayerStore((s) => s.motionPathCreateAvailable);
   const motionPathArmed = usePlayerStore((s) => s.motionPathArmed);
   const setMotionPathArmed = usePlayerStore((s) => s.setMotionPathArmed);
-  const popoverRef = useRef44(null);
-  const gridButtonRef = useRef44(null);
+  const popoverRef = useRef45(null);
+  const gridButtonRef = useRef45(null);
   const updatePrefs = useCallback37(
     (patch) => {
       setPrefs((prev) => {
@@ -26738,7 +26837,7 @@ function useCompositionDimensions() {
 import { useCallback as useCallback39 } from "react";
 
 // src/components/editor/useLayerRevealOverride.ts
-import { useCallback as useCallback38, useEffect as useEffect32, useRef as useRef45 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect32, useRef as useRef46 } from "react";
 var LAYER_REVEAL_LIFT_Z = "2147483000";
 var LAYER_REVEAL_PENDING_COMMIT_ATTR = "data-hf-studio-reveal-pending-commit";
 var revealCommitSequence = 0;
@@ -26912,9 +27011,9 @@ function useLayerRevealOverride({
   isPlaying,
   selectedElement
 }) {
-  const stateRef = useRef45(null);
-  const pendingRevealRef = useRef45(null);
-  const currentRef = useRef45({ isPlaying, selectedElement });
+  const stateRef = useRef46(null);
+  const pendingRevealRef = useRef46(null);
+  const currentRef = useRef46({ isPlaying, selectedElement });
   currentRef.current = { isPlaying, selectedElement };
   const restoreReveal = useCallback38(() => {
     const state = stateRef.current;
@@ -28267,7 +28366,7 @@ function useElementLifecycleOps({
 }
 
 // src/components/nle/useCanvasZOrderTimelineMirror.ts
-import { useCallback as useCallback40, useRef as useRef46 } from "react";
+import { useCallback as useCallback40, useRef as useRef47 } from "react";
 
 // src/player/components/timelineZMirror.ts
 var keyOf6 = (el) => el.key ?? el.id;
@@ -28456,7 +28555,7 @@ function useLayerReorderTimelineMirror() {
 }
 function useMirrorLaneMoveCommit() {
   const elements = useExpandedTimelineElements();
-  const elementsRef = useRef46(elements);
+  const elementsRef = useRef47(elements);
   elementsRef.current = elements;
   const { onMoveElements } = useTimelineEditContextOptional();
   return useCallback40(
@@ -28682,7 +28781,7 @@ function PreviewOverlays({
 import { useCallback as useCallback42, useMemo as useMemo20 } from "react";
 
 // src/hooks/useGsapTweenCache.ts
-import { useEffect as useEffect33, useMemo as useMemo19, useRef as useRef47, useState as useState36, useCallback as useCallback41 } from "react";
+import { useEffect as useEffect33, useMemo as useMemo19, useRef as useRef48, useState as useState36, useCallback as useCallback41 } from "react";
 
 // src/hooks/gsapRuntimeReaders.ts
 import { classifyPropertyGroup as classifyPropertyGroup3 } from "@hyperframes/core/gsap-parser";
@@ -29557,8 +29656,8 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
   const [allAnimations, setAllAnimations] = useState36([]);
   const [multipleTimelines, setMultipleTimelines] = useState36(false);
   const [unsupportedTimelinePattern, setUnsupportedTimelinePattern] = useState36(false);
-  const lastFetchKeyRef = useRef47("");
-  const retryTimerRef = useRef47(null);
+  const lastFetchKeyRef = useRef48("");
+  const retryTimerRef = useRef48(null);
   const domClipChildrenKey = usePlayerStore(
     (s) => s.domClipChildren.map((c) => `${c.id}<${c.hostId}`).join("|")
   );
@@ -29753,9 +29852,9 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
   const domClipChildrenKey = usePlayerStore(
     (s) => s.domClipChildren.map((c) => `${c.id}<${c.hostId}`).join("|")
   );
-  const lastFetchKeyRef = useRef47("");
-  const runtimeScanDoneRef = useRef47("");
-  const astFetchDoneRef = useRef47("");
+  const lastFetchKeyRef = useRef48("");
+  const runtimeScanDoneRef = useRef48("");
+  const astFetchDoneRef = useRef48("");
   useEffect33(() => {
     const fetchKey = `kf-cache:${projectId}:${sourceFile}:${version}:${elementCount}:${domClipChildrenKey}:${compositionSrcKey}`;
     if (fetchKey === lastFetchKeyRef.current) return;
@@ -30140,7 +30239,7 @@ function useTimelineEditCallbacks({
 }
 
 // src/captions/components/CaptionTimeline.tsx
-import { memo as memo25, useCallback as useCallback43, useRef as useRef48 } from "react";
+import { memo as memo25, useCallback as useCallback43, useRef as useRef49 } from "react";
 import { jsx as jsx66, jsxs as jsxs52 } from "react/jsx-runtime";
 var GROUP_COLORS = [
   "#3CE6AC",
@@ -30163,7 +30262,7 @@ var CaptionTimeline = memo25(function CaptionTimeline2({
   const selectSegment = useCaptionStore((s) => s.selectSegment);
   const updateSegmentTiming = useCaptionStore((s) => s.updateSegmentTiming);
   const splitGroup = useCaptionStore((s) => s.splitGroup);
-  const dragRef = useRef48(null);
+  const dragRef = useRef49(null);
   const handleEdgePointerDown = useCallback43(
     (e, segId, edge, originalStart, originalEnd) => {
       e.stopPropagation();
@@ -30285,7 +30384,7 @@ var CaptionTimeline = memo25(function CaptionTimeline2({
 });
 
 // src/components/StudioFeedbackBar.tsx
-import { memo as memo26, useState as useState37, useCallback as useCallback44, useRef as useRef49, useEffect as useEffect34 } from "react";
+import { memo as memo26, useState as useState37, useCallback as useCallback44, useRef as useRef50, useEffect as useEffect34 } from "react";
 import { Fragment as Fragment23, jsx as jsx67, jsxs as jsxs53 } from "react/jsx-runtime";
 var DEFAULT_FEEDBACK_INTERVAL = 10;
 var AUTO_DISMISS_MS = 2e4;
@@ -30345,8 +30444,8 @@ var StudioFeedbackBar = memo26(function StudioFeedbackBar2() {
   const [comment, setComment] = useState37("");
   const [submitted, setSubmitted] = useState37(false);
   const [exiting, setExiting] = useState37(false);
-  const inputRef = useRef49(null);
-  const dismissTimerRef = useRef49(null);
+  const inputRef = useRef50(null);
+  const dismissTimerRef = useRef50(null);
   useEffect34(() => {
     incrementSessionCount();
     const showTimer = setTimeout(() => {
@@ -30635,7 +30734,7 @@ function EditorShellBody({
 }
 
 // src/components/editor/SourceEditor.tsx
-import { useRef as useRef50, useCallback as useCallback46, useEffect as useEffect35, memo as memo27 } from "react";
+import { useRef as useRef51, useCallback as useCallback46, useEffect as useEffect35, memo as memo27 } from "react";
 import {
   EditorView,
   keymap,
@@ -30693,11 +30792,11 @@ var SourceEditor = memo27(function SourceEditor2({
   readOnly = false,
   revealOffset
 }) {
-  const editorRef = useRef50(null);
-  const containerRef = useRef50(null);
-  const onChangeRef = useRef50(onChange);
+  const editorRef = useRef51(null);
+  const containerRef = useRef51(null);
+  const onChangeRef = useRef51(onChange);
   onChangeRef.current = onChange;
-  const contentRef = useRef50(content);
+  const contentRef = useRef51(content);
   contentRef.current = content;
   const mountEditor = useCallback46(
     (node) => {
@@ -30765,7 +30864,7 @@ var SourceEditor = memo27(function SourceEditor2({
 });
 
 // src/components/editor/PropertyPanel.tsx
-import { memo as memo31, useEffect as useEffect64, useMemo as useMemo32, useRef as useRef74, useState as useState74 } from "react";
+import { memo as memo31, useEffect as useEffect64, useMemo as useMemo32, useRef as useRef75, useState as useState74 } from "react";
 
 // src/components/editor/InspectorHeaderActions.tsx
 import { Eye as Eye3, EyeSlash as EyeSlash2 } from "@phosphor-icons/react";
@@ -31546,22 +31645,22 @@ function buildElementInfoText(element, sourceLabel, gsapAnimations, previewIfram
 }
 
 // src/components/editor/propertyPanelPrimitives.tsx
-import { useCallback as useCallback49, useEffect as useEffect38, useRef as useRef53, useState as useState40 } from "react";
+import { useCallback as useCallback49, useEffect as useEffect38, useRef as useRef54, useState as useState40 } from "react";
 
 // src/components/editor/propertyPanelCommitField.tsx
-import { useEffect as useEffect37, useRef as useRef52, useState as useState39 } from "react";
+import { useEffect as useEffect37, useRef as useRef53, useState as useState39 } from "react";
 
 // src/components/editor/useInspectorGestureTransaction.ts
-import { useCallback as useCallback48, useEffect as useEffect36, useRef as useRef51, useState as useState38 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect36, useRef as useRef52, useState as useState38 } from "react";
 function useInspectorGestureTransaction({
   sourceValue,
   onPreview,
   onCommit
 }) {
-  const sourceRef = useRef51(sourceValue);
-  const activeRef = useRef51(null);
-  const previewRef = useRef51(onPreview);
-  const commitRef = useRef51(onCommit);
+  const sourceRef = useRef52(sourceValue);
+  const activeRef = useRef52(null);
+  const previewRef = useRef52(onPreview);
+  const commitRef = useRef52(onCommit);
   if (!activeRef.current) sourceRef.current = sourceValue;
   previewRef.current = onPreview;
   commitRef.current = onCommit;
@@ -31636,15 +31735,15 @@ function CommitField({
   onCommit
 }) {
   const [draft, setDraft] = useState39(value);
-  const valueRef = useRef52(value);
-  const draftRef = useRef52(draft);
-  const inputRef = useRef52(null);
-  const focusedRef = useRef52(false);
-  const dirtyRef = useRef52(false);
+  const valueRef = useRef53(value);
+  const draftRef = useRef53(draft);
+  const inputRef = useRef53(null);
+  const focusedRef = useRef53(false);
+  const dirtyRef = useRef53(false);
   valueRef.current = value;
   draftRef.current = draft;
-  const gestureActiveRef = useRef52(false);
-  const gestureSettleTimerRef = useRef52(null);
+  const gestureActiveRef = useRef53(false);
+  const gestureSettleTimerRef = useRef53(null);
   const gestureTransaction = useInspectorGestureTransaction({
     sourceValue: value,
     onPreview: (nextValue) => {
@@ -31653,7 +31752,7 @@ function CommitField({
     },
     onCommit
   });
-  const gestureTransactionRef = useRef52(gestureTransaction);
+  const gestureTransactionRef = useRef53(gestureTransaction);
   gestureTransactionRef.current = gestureTransaction;
   const clearGestureSettleTimer = () => {
     if (!gestureSettleTimerRef.current) return;
@@ -31796,7 +31895,7 @@ function MetricField({
   onCommit
 }) {
   const track = useTrackDesignInput();
-  const scrubRef = useRef53(null);
+  const scrubRef = useRef54(null);
   const commit = useCallback49(
     (nextValue) => {
       if (nextValue !== value) track("metric", label);
@@ -31867,9 +31966,9 @@ function SliderControl({
 }) {
   const track = useTrackDesignInput();
   const [draft, setDraft] = useState40(value);
-  const commitTimerRef = useRef53(null);
-  const interactionChangedRef = useRef53(false);
-  const valueRef = useRef53(value);
+  const commitTimerRef = useRef54(null);
+  const interactionChangedRef = useRef54(false);
+  const valueRef = useRef54(value);
   valueRef.current = value;
   useEffect38(() => {
     setDraft(value);
@@ -32464,14 +32563,14 @@ function MediaSection({
 import { isHfColorGradingActive as isHfColorGradingActive2 } from "@hyperframes/core/color-grading";
 
 // src/components/editor/propertyPanelColorGradingControls.tsx
-import { useMemo as useMemo22, useRef as useRef55, useState as useState43 } from "react";
+import { useMemo as useMemo22, useRef as useRef56, useState as useState43 } from "react";
 import {
   HF_COLOR_GRADING_PRESETS,
   normalizeHfColorGrading
 } from "@hyperframes/core/color-grading";
 
 // src/components/editor/propertyPanelColorGradingSlider.tsx
-import { useCallback as useCallback50, useEffect as useEffect40, useRef as useRef54, useState as useState42 } from "react";
+import { useCallback as useCallback50, useEffect as useEffect40, useRef as useRef55, useState as useState42 } from "react";
 import { jsx as jsx75, jsxs as jsxs58 } from "react/jsx-runtime";
 var SLIDER_THUMB_SIZE = 10;
 var SLIDER_THUMB_RADIUS = SLIDER_THUMB_SIZE / 2;
@@ -32510,9 +32609,9 @@ function ColorGradingSliderControl({
   const track = useTrackDesignInput();
   const [draftState, setDraftState] = useState42(null);
   const [inputDraft, setInputDraft] = useState42(null);
-  const commitTimerRef = useRef54(null);
-  const interactionChangedRef = useRef54(false);
-  const valueRef = useRef54(value);
+  const commitTimerRef = useRef55(null);
+  const interactionChangedRef = useRef55(false);
+  const valueRef = useRef55(value);
   valueRef.current = value;
   useEffect40(
     () => () => {
@@ -32903,7 +33002,7 @@ function ColorGradingControls({
   onCommitColorGrading
 }) {
   const track = useTrackDesignInput();
-  const lutInputRef = useRef55(null);
+  const lutInputRef = useRef56(null);
   const [lutOpen, setLutOpen] = useState43(false);
   const [detailSettings, setDetailSettings] = useState43(null);
   const lutAssets = useMemo22(
@@ -33183,7 +33282,7 @@ function ColorGradingControls({
 }
 
 // src/components/editor/useColorGradingController.ts
-import { useCallback as useCallback52, useEffect as useEffect42, useMemo as useMemo23, useRef as useRef57, useState as useState45 } from "react";
+import { useCallback as useCallback52, useEffect as useEffect42, useMemo as useMemo23, useRef as useRef58, useState as useState45 } from "react";
 import {
   HF_COLOR_GRADING_ATTR,
   hasHfColorGradingAuthoredValues,
@@ -33256,7 +33355,7 @@ async function runDomEditCommit(config) {
 }
 
 // src/components/editor/useColorGradingPreviews.ts
-import { useCallback as useCallback51, useEffect as useEffect41, useRef as useRef56, useState as useState44 } from "react";
+import { useCallback as useCallback51, useEffect as useEffect41, useRef as useRef57, useState as useState44 } from "react";
 import {
   HF_COLOR_GRADING_ACTIVE_EFFECT_KEYS,
   HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS,
@@ -33330,7 +33429,7 @@ function useColorGradingPreviews({
     previews: emptyPreviews()
   }));
   const [request, setRequest] = useState44(null);
-  const animatedRef = useRef56(null);
+  const animatedRef = useRef57(null);
   if (state.identityKey !== identityKey) {
     setState({ identityKey, previews: emptyPreviews() });
     setRequest(null);
@@ -33605,19 +33704,19 @@ function useColorGradingController({
     [element, projectId]
   );
   const [mediaMetadata, setMediaMetadata] = useState45(null);
-  const persistTimerRef = useRef57(null);
-  const pendingPersistValueRef = useRef57(void 0);
-  const pendingPersistGradingRef = useRef57(null);
-  const pendingPersistIdentityRef = useRef57(null);
-  const confirmedGradingRef = useRef57(grading);
-  const gradingVersionRef = useRef57(0);
-  const statusTimersRef = useRef57([]);
-  const latestGradingRef = useRef57(grading);
-  const compareEnabledRef = useRef57(compareEnabled);
+  const persistTimerRef = useRef58(null);
+  const pendingPersistValueRef = useRef58(void 0);
+  const pendingPersistGradingRef = useRef58(null);
+  const pendingPersistIdentityRef = useRef58(null);
+  const confirmedGradingRef = useRef58(grading);
+  const gradingVersionRef = useRef58(0);
+  const statusTimersRef = useRef58([]);
+  const latestGradingRef = useRef58(grading);
+  const compareEnabledRef = useRef58(compareEnabled);
   latestGradingRef.current = grading;
   compareEnabledRef.current = compareEnabled;
   const identityKey = selectionIdentityKey2(element);
-  const identityKeyRef = useRef57(identityKey);
+  const identityKeyRef = useRef58(identityKey);
   if (identityKeyRef.current !== identityKey) {
     identityKeyRef.current = identityKey;
     const freshGrading = readColorGradingFromElement(element);
@@ -34115,10 +34214,10 @@ function ColorGradingSection({
 }
 
 // src/components/editor/propertyPanelSections.tsx
-import { useEffect as useEffect48, useRef as useRef61, useState as useState54 } from "react";
+import { useEffect as useEffect48, useRef as useRef62, useState as useState54 } from "react";
 
 // src/components/editor/propertyPanelColor.tsx
-import { useCallback as useCallback53, useEffect as useEffect43, useLayoutEffect as useLayoutEffect4, useRef as useRef58, useState as useState46 } from "react";
+import { useCallback as useCallback53, useEffect as useEffect43, useLayoutEffect as useLayoutEffect4, useRef as useRef59, useState as useState46 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 import { jsx as jsx78, jsxs as jsxs61 } from "react/jsx-runtime";
 var COLOR_PICKER_SIZE = { width: 292, height: 386 };
@@ -34137,7 +34236,7 @@ function ColorSlider({
   onInteractionEnd,
   onInteractionCancel
 }) {
-  const trackRef = useRef58(null);
+  const trackRef = useRef59(null);
   const percent3 = (value - min) / (max - min) * 100;
   const previewFromClientX = (clientX) => {
     const rect = trackRef.current?.getBoundingClientRect();
@@ -34235,12 +34334,12 @@ function ColorField({
   onCommit
 }) {
   const track = useTrackDesignInput();
-  const buttonRef = useRef58(null);
-  const panelRef = useRef58(null);
+  const buttonRef = useRef59(null);
+  const panelRef = useRef59(null);
   const [open, setOpen] = useState46(false);
   const [panelPosition, setPanelPosition] = useState46(null);
   const [draftColor, setDraftColor] = useState46(() => colorFromCss(value));
-  const draftColorRef = useRef58(draftColor);
+  const draftColorRef = useRef59(draftColor);
   draftColorRef.current = draftColor;
   const [hexDraft, setHexDraft] = useState46(() => toHexColor(colorFromCss(value)).toUpperCase());
   const hsv = rgbToHsv(draftColor);
@@ -34619,7 +34718,7 @@ function ColorField({
 }
 
 // src/components/editor/propertyPanelFont.tsx
-import { useEffect as useEffect44, useMemo as useMemo24, useRef as useRef59, useState as useState47 } from "react";
+import { useEffect as useEffect44, useMemo as useMemo24, useRef as useRef60, useState as useState47 } from "react";
 
 // src/components/editor/fontAssets.ts
 var FONT_EXT_RE = /\.(eot|otf|ttc|ttf|woff2?)$/i;
@@ -34733,9 +34832,9 @@ function FontFamilyField({
 }) {
   const track = useTrackDesignInput();
   const currentFamily = primaryFontFamily(value);
-  const containerRef = useRef59(null);
-  const inputRef = useRef59(null);
-  const fontInputRef = useRef59(null);
+  const containerRef = useRef60(null);
+  const inputRef = useRef60(null);
+  const fontInputRef = useRef60(null);
   const [open, setOpen] = useState47(false);
   const [query, setQuery] = useState47("");
   const [localFonts, setLocalFonts] = useState47([]);
@@ -35945,7 +36044,7 @@ function parseColorString(value) {
 }
 
 // src/components/editor/propertyPanelFill.tsx
-import { useMemo as useMemo27, useRef as useRef60, useState as useState51 } from "react";
+import { useMemo as useMemo27, useRef as useRef61, useState as useState51 } from "react";
 import { jsx as jsx84, jsxs as jsxs66 } from "react/jsx-runtime";
 function normalizeProjectPath(value) {
   const trimmed = value.trim();
@@ -35987,7 +36086,7 @@ function ImageFillField({
   onImportAssets
 }) {
   const track = useTrackDesignInput();
-  const fileInputRef = useRef60(null);
+  const fileInputRef = useRef61(null);
   const [uploading, setUploading] = useState51(false);
   const imageAssets = useMemo27(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
   const selectedAsset = useMemo27(
@@ -36092,7 +36191,7 @@ function GradientField({
   onCommit
 }) {
   const track = useTrackDesignInput();
-  const previewRef = useRef60(null);
+  const previewRef = useRef61(null);
   const parsed = parseGradient(value) ?? buildDefaultGradientModel(fallbackColor);
   const commit = (next) => onCommit(serializeGradient(next));
   const patch = (partial) => commit({ ...parsed, ...partial });
@@ -37030,11 +37129,11 @@ function TextAreaField({
 }) {
   const track = useTrackDesignInput();
   const [draft, setDraft] = useState54(value);
-  const textareaRef = useRef61(null);
-  const commitTimerRef = useRef61(null);
-  const interactionChangedRef = useRef61(false);
-  const focusedRef = useRef61(false);
-  const valueRef = useRef61(value);
+  const textareaRef = useRef62(null);
+  const commitTimerRef = useRef62(null);
+  const interactionChangedRef = useRef62(false);
+  const focusedRef = useRef62(false);
+  const valueRef = useRef62(value);
   valueRef.current = value;
   useEffect48(() => {
     if (focusedRef.current) return;
@@ -37441,7 +37540,7 @@ function TextSection({
 import { memo as memo30, useState as useState56 } from "react";
 
 // src/components/editor/AnimationCard.tsx
-import { memo as memo29, useCallback as useCallback56, useEffect as useEffect49, useMemo as useMemo28, useRef as useRef62, useState as useState55 } from "react";
+import { memo as memo29, useCallback as useCallback56, useEffect as useEffect49, useMemo as useMemo28, useRef as useRef63, useState as useState55 } from "react";
 import { SUPPORTED_EASES, SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
 
 // src/components/editor/gsapAnimationHelpers.ts
@@ -37954,8 +38053,8 @@ var AnimationCard = memo29(function AnimationCard2({
   const [addingFromProp, setAddingFromProp] = useState55(false);
   const [expandedKfPct, setExpandedKfPct] = useState55(null);
   const [focusedCollidingAnimationTargets, setFocusedCollidingAnimationTargets] = useState55();
-  const cardRef = useRef62(null);
-  const pendingAutoScrollRef = useRef62(false);
+  const cardRef = useRef63(null);
+  const pendingAutoScrollRef = useRef63(false);
   useEffect49(() => {
     if (!focusedSegment) return;
     setExpanded(true);
@@ -38499,7 +38598,7 @@ var GsapAnimationSection = memo30(function GsapAnimationSection2({
 import { useState as useState58 } from "react";
 
 // src/components/editor/Transform3DCube.tsx
-import { useEffect as useEffect50, useRef as useRef63, useState as useState57 } from "react";
+import { useEffect as useEffect50, useRef as useRef64, useState as useState57 } from "react";
 
 // src/components/editor/transform3dProjection.ts
 var DEG = Math.PI / 180;
@@ -38615,12 +38714,12 @@ function Transform3DCube({
 }) {
   const [draft, setDraft] = useState57(null);
   const [depthDraft, setDepthDraft] = useState57(null);
-  const dragRef = useRef63(null);
+  const dragRef = useRef64(null);
   const shown = draft ?? pose;
   const shownZ = depthDraft ?? z;
-  const svgRef = useRef63(null);
+  const svgRef = useRef64(null);
   const lens = perspective > 0 ? perspective : defaultPerspective;
-  const depthRef = useRef63({ z, onDepthDraft, onDepthCommit, lens });
+  const depthRef = useRef64({ z, onDepthDraft, onDepthCommit, lens });
   depthRef.current = { z, onDepthDraft, onDepthCommit, lens };
   useEffect50(() => {
     const el = svgRef.current;
@@ -39115,7 +39214,7 @@ function PropertyPanel3dTransform({
 }
 
 // src/components/editor/PropertyPanelFlat.tsx
-import { useEffect as useEffect63, useRef as useRef73, useState as useState73 } from "react";
+import { useEffect as useEffect63, useRef as useRef74, useState as useState73 } from "react";
 
 // src/components/editor/PropertyPanelFlatHeader.tsx
 import { Eye as Eye4, EyeSlash as EyeSlash3 } from "@phosphor-icons/react";
@@ -39292,7 +39391,7 @@ function PropertyPanelFlatFooter({
 }
 
 // src/components/editor/propertyPanelFlatPrimitives.tsx
-import { useEffect as useEffect51, useRef as useRef64, useState as useState59 } from "react";
+import { useEffect as useEffect51, useRef as useRef65, useState as useState59 } from "react";
 
 // src/components/editor/propertyPanelValueTier.ts
 function resolveValueTier(explicitValue, defaultValue) {
@@ -39565,18 +39664,18 @@ function FlatSlider({
 }) {
   const track = useTrackDesignInput();
   const [draft, setDraft] = useState59(value);
-  const commitTimerRef = useRef64(null);
-  const lastCommitAtRef = useRef64(0);
-  const pendingRef = useRef64(null);
-  const draggingRef = useRef64(false);
-  const lastCommittedRef = useRef64(value);
-  const onCommitRef = useRef64(onCommit);
+  const commitTimerRef = useRef65(null);
+  const lastCommitAtRef = useRef65(0);
+  const pendingRef = useRef65(null);
+  const draggingRef = useRef65(false);
+  const lastCommittedRef = useRef65(value);
+  const onCommitRef = useRef65(onCommit);
   onCommitRef.current = onCommit;
-  const latestValueRef = useRef64(value);
+  const latestValueRef = useRef65(value);
   latestValueRef.current = value;
-  const explicitReleaseRef = useRef64(false);
-  const dragStartValueRef = useRef64(value);
-  const activePointerIdRef = useRef64(null);
+  const explicitReleaseRef = useRef65(false);
+  const dragStartValueRef = useRef65(value);
+  const activePointerIdRef = useRef65(null);
   useEffect51(() => {
     if (draggingRef.current) return;
     setDraft(value);
@@ -41463,7 +41562,7 @@ function createGsapLivePreview(iframeRef) {
 }
 
 // src/components/editor/propertyPanelFlatColorGradingSection.tsx
-import { useEffect as useEffect60, useMemo as useMemo30, useRef as useRef72, useState as useState69 } from "react";
+import { useEffect as useEffect60, useMemo as useMemo30, useRef as useRef73, useState as useState69 } from "react";
 import {
   HF_COLOR_GRADING_GRADE_PRESETS,
   normalizeHfColorGrading as normalizeHfColorGrading5,
@@ -41498,7 +41597,7 @@ function presetPreviewHandlers({
 import { useState as useState65 } from "react";
 
 // src/components/editor/propertyPanelColorCurveGraph.tsx
-import { useMemo as useMemo29, useRef as useRef65 } from "react";
+import { useMemo as useMemo29, useRef as useRef66 } from "react";
 import {
   compileHfColorCurve,
   compileHfHueCurve,
@@ -41685,7 +41784,7 @@ function CurveGraph({
   onSettle,
   onCancel
 }) {
-  const pointerRef = useRef65(null);
+  const pointerRef = useRef66(null);
   const samples = useMemo29(() => samplesFor(points, tab), [points, tab]);
   const path = useMemo29(() => curvePath(samples, tab), [samples, tab]);
   const selectRelativePoint = (offset) => {
@@ -41921,7 +42020,7 @@ function formatPointValue(value, tab, axis) {
 }
 
 // src/components/editor/propertyPanelGradingNumberField.tsx
-import { useEffect as useEffect55, useRef as useRef66, useState as useState64 } from "react";
+import { useEffect as useEffect55, useRef as useRef67, useState as useState64 } from "react";
 import { jsx as jsx110, jsxs as jsxs92 } from "react/jsx-runtime";
 function GradingNumberField({
   label,
@@ -41940,10 +42039,10 @@ function GradingNumberField({
   onCancel
 }) {
   const [draft, setDraft] = useState64(() => formatValue(value));
-  const focusedRef = useRef66(false);
-  const cancelBlurRef = useRef66(false);
-  const baselineRef = useRef66(value);
-  const dirtyRef = useRef66(false);
+  const focusedRef = useRef67(false);
+  const cancelBlurRef = useRef67(false);
+  const baselineRef = useRef67(value);
+  const dirtyRef = useRef67(false);
   useEffect55(() => {
     if (!focusedRef.current) setDraft(formatValue(value));
   }, [formatValue, value]);
@@ -42173,10 +42272,10 @@ function ColorCurves({
 }
 
 // src/components/editor/propertyPanelColorScopes.tsx
-import { useEffect as useEffect57, useRef as useRef68, useState as useState67 } from "react";
+import { useEffect as useEffect57, useRef as useRef69, useState as useState67 } from "react";
 
 // src/components/editor/useColorGradingScopes.ts
-import { useEffect as useEffect56, useRef as useRef67, useState as useState66 } from "react";
+import { useEffect as useEffect56, useRef as useRef68, useState as useState66 } from "react";
 
 // src/components/editor/colorGradingFrameAnalysis.ts
 import {
@@ -42336,7 +42435,7 @@ function useColorGradingScopes({
   const [analysis, setAnalysis] = useState66(null);
   const [status, setStatus] = useState66("idle");
   const [refreshVersion, setRefreshVersion] = useState66(0);
-  const captureRef = useRef67(captureFrame);
+  const captureRef = useRef68(captureFrame);
   captureRef.current = captureFrame;
   useEffect56(() => {
     if (!open) {
@@ -42514,7 +42613,7 @@ function PropertyPanelColorScopes({
 }) {
   const [open, setOpen] = useState67(false);
   const [mode, setMode] = useState67("waveform");
-  const canvasRef = useRef68(null);
+  const canvasRef = useRef69(null);
   const { analysis, status, refresh } = useColorGradingScopes({
     open,
     captureFrame,
@@ -42584,7 +42683,7 @@ function PropertyPanelColorScopes({
 }
 
 // src/components/editor/propertyPanelColorSecondary.tsx
-import { useEffect as useEffect58, useRef as useRef69, useState as useState68 } from "react";
+import { useEffect as useEffect58, useRef as useRef70, useState as useState68 } from "react";
 import {
   getHfColorGradingCapabilities,
   normalizeHfColorGrading as normalizeHfColorGrading4
@@ -42634,7 +42733,7 @@ function PropertyPanelColorSecondary({
   const [showMatte, setShowMatte] = useState68(false);
   const [captureError, setCaptureError] = useState68(null);
   const [sampling, setSampling] = useState68(false);
-  const matteCanvasRef = useRef69(null);
+  const matteCanvasRef = useRef70(null);
   const activeIndex = Math.min(selectedIndex, Math.max(0, secondaries.length - 1));
   const selected = secondaries[activeIndex];
   useEffect58(() => {
@@ -43000,7 +43099,7 @@ function PropertyPanelColorSecondary({
 }
 
 // src/components/editor/propertyPanelColorWheels.tsx
-import { useRef as useRef70 } from "react";
+import { useRef as useRef71 } from "react";
 import {
   getHfColorGradingCapabilities as getHfColorGradingCapabilities2
 } from "@hyperframes/core/color-grading";
@@ -43084,7 +43183,7 @@ function TonalWheel({
   onCancel,
   onReset
 }) {
-  const pointerIdRef = useRef70(null);
+  const pointerIdRef = useRef71(null);
   const hueRadians = wheel.hue * Math.PI / 180;
   const thumbLeft = 50 + Math.cos(hueRadians) * wheel.amount * 46;
   const thumbTop = 50 - Math.sin(hueRadians) * wheel.amount * 46;
@@ -43303,7 +43402,7 @@ function ColorWheels({
 }
 
 // src/components/editor/propertyPanelFlatColorGradingAccessory.tsx
-import { useEffect as useEffect59, useRef as useRef71 } from "react";
+import { useEffect as useEffect59, useRef as useRef72 } from "react";
 import { isHfColorGradingActive as isHfColorGradingActive3 } from "@hyperframes/core/color-grading";
 import { jsx as jsx115, jsxs as jsxs97 } from "react/jsx-runtime";
 var STATUS_DOT_CLASS = {
@@ -43319,7 +43418,7 @@ function FlatColorGradingAccessory({
   const track = useTrackDesignInput();
   const { grading, compareEnabled, runtimeStatus, commitCompare, resetGrading } = state;
   const gradingActive = isHfColorGradingActive3(grading);
-  const releaseRef = useRef71(null);
+  const releaseRef = useRef72(null);
   useEffect59(
     () => () => {
       releaseRef.current?.();
@@ -43481,7 +43580,7 @@ function FlatColorGradingSection({
   captureGradedFrame
 }) {
   const track = useTrackDesignInput();
-  const lutInputRef = useRef72(null);
+  const lutInputRef = useRef73(null);
   const [lutOpen, setLutOpen] = useState69(false);
   const [detailSettingsOpen, setDetailSettingsOpen] = useState69(null);
   const lutAssets = useMemo30(
@@ -44930,8 +45029,8 @@ function PropertyPanelFlat({
     if (focusesThisPanel) setOpenGroupId("motion");
   }
   const [justToggledIds, setJustToggledIds] = useState73([]);
-  const justToggledTimeoutRef = useRef73(null);
-  const panelBodyRef = useRef73(null);
+  const justToggledTimeoutRef = useRef74(null);
+  const panelBodyRef = useRef74(null);
   useEffect63(() => {
     return () => {
       if (justToggledTimeoutRef.current) clearTimeout(justToggledTimeoutRef.current);
@@ -45515,14 +45614,14 @@ var PropertyPanel = memo31(function PropertyPanel2(props) {
   const styles = element?.computedStyles ?? EMPTY_STYLES;
   const { showToast } = useStudioShellContext();
   const [clipboardCopied, setClipboardCopied] = useState74(false);
-  const clipboardTimerRef = useRef74(void 0);
+  const clipboardTimerRef = useRef75(void 0);
   const storeTime = usePlayerStore((s) => s.currentTime);
   const isPlaying = usePlayerStore((s) => s.isPlaying);
   const timelineElements = usePlayerStore((s) => s.elements);
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const selectedElementHidden = isSelectedElementHidden(timelineElements, selectedElementId);
   const visibilityToggleLabel = selectedElementHidden ? "Show element" : "Hide element";
-  const liveTimeRef = useRef74(storeTime);
+  const liveTimeRef = useRef75(storeTime);
   const [, forceRender] = useState74(0);
   useEffect64(() => {
     if (!isPlaying) return;
@@ -45937,11 +46036,11 @@ var PropertyPanel = memo31(function PropertyPanel2(props) {
 });
 
 // src/components/editor/FileTree.tsx
-import { memo as memo33, useState as useState76, useCallback as useCallback58, useMemo as useMemo34, useRef as useRef76 } from "react";
+import { memo as memo33, useState as useState76, useCallback as useCallback58, useMemo as useMemo34, useRef as useRef77 } from "react";
 import { Plus as Plus2, FolderSimplePlus as FolderSimplePlus2 } from "@phosphor-icons/react";
 
 // src/components/editor/FileTreeNodes.tsx
-import { memo as memo32, useState as useState75, useCallback as useCallback57, useMemo as useMemo33, useRef as useRef75, useEffect as useEffect65 } from "react";
+import { memo as memo32, useState as useState75, useCallback as useCallback57, useMemo as useMemo33, useRef as useRef76, useEffect as useEffect65 } from "react";
 import {
   PencilSimple,
   Copy,
@@ -46056,7 +46155,7 @@ function ContextMenu({
   onDuplicate,
   onDelete
 }) {
-  const menuRef = useRef75(null);
+  const menuRef = useRef76(null);
   useEffect65(() => {
     const handleClickOutside = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
@@ -46185,8 +46284,8 @@ function InlineInput({
   onCommit,
   onCancel
 }) {
-  const inputRef = useRef75(null);
-  const committedRef = useRef75(false);
+  const inputRef = useRef76(null);
+  const committedRef = useRef76(false);
   const [value, setValue] = useState75(defaultValue);
   useEffect65(() => {
     const el = inputRef.current;
@@ -46249,7 +46348,7 @@ function DeleteConfirm({
   onConfirm,
   onCancel
 }) {
-  const ref = useRef75(null);
+  const ref = useRef76(null);
   useEffect65(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") onCancel();
@@ -46506,7 +46605,7 @@ var FileTree = memo33(function FileTree2({
   const [inlineInput, setInlineInput] = useState76(null);
   const [deleteTarget, setDeleteTarget] = useState76(null);
   const [dragOverFolder, setDragOverFolder] = useState76(null);
-  const dragSourceRef = useRef76(null);
+  const dragSourceRef = useRef77(null);
   const hasFileOps = !!(onCreateFile || onCreateFolder || onDeleteFile || onRenameFile || onDuplicateFile);
   const handleContextMenu = useCallback58(
     (e, path, isFolder) => {
@@ -46742,10 +46841,10 @@ var FileTree = memo33(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState132, useCallback as useCallback144, useRef as useRef134, useMemo as useMemo53, useEffect as useEffect116, useLayoutEffect as useLayoutEffect6 } from "react";
+import { useState as useState132, useCallback as useCallback144, useRef as useRef135, useMemo as useMemo53, useEffect as useEffect116, useLayoutEffect as useLayoutEffect6 } from "react";
 
 // src/components/renders/useRenderQueue.ts
-import { useState as useState77, useEffect as useEffect66, useCallback as useCallback59, useRef as useRef77, useMemo as useMemo35 } from "react";
+import { useState as useState77, useEffect as useEffect66, useCallback as useCallback59, useRef as useRef78, useMemo as useMemo35 } from "react";
 function hiddenIdsKey(projectId) {
   return `hf-studio-hidden-renders:${projectId}`;
 }
@@ -46768,8 +46867,8 @@ function useRenderQueue(projectId) {
   const [jobs, setJobs] = useState77([]);
   const [loadError, setLoadError] = useState77(null);
   const [actionError, setActionError] = useState77(null);
-  const eventSourceRef = useRef77(null);
-  const activeJobRef = useRef77(null);
+  const eventSourceRef = useRef78(null);
+  const activeJobRef = useRef78(null);
   const closeActiveEventSource = useCallback59((jobId) => {
     if (jobId && activeJobRef.current !== jobId) return;
     eventSourceRef.current?.close();
@@ -47018,11 +47117,11 @@ function useRenderQueue(projectId) {
 }
 
 // src/components/LintModal.tsx
-import { useRef as useRef79, useState as useState78 } from "react";
+import { useRef as useRef80, useState as useState78 } from "react";
 import { XIcon, WarningIcon, CheckCircleIcon, CaretRightIcon } from "@phosphor-icons/react";
 
 // src/components/ui/useDialogBehavior.ts
-import { useEffect as useEffect67, useCallback as useCallback60, useRef as useRef78 } from "react";
+import { useEffect as useEffect67, useCallback as useCallback60, useRef as useRef79 } from "react";
 var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
 function useDialogBehavior({
   open,
@@ -47030,10 +47129,10 @@ function useDialogBehavior({
   containerRef,
   canClose
 }) {
-  const restoreRef = useRef78(null);
-  const canCloseRef = useRef78(canClose);
+  const restoreRef = useRef79(null);
+  const canCloseRef = useRef79(canClose);
   canCloseRef.current = canClose;
-  const onCloseRef = useRef78(onClose);
+  const onCloseRef = useRef79(onClose);
   onCloseRef.current = onClose;
   const requestClose = useCallback60(() => {
     const guard = canCloseRef.current;
@@ -47094,7 +47193,7 @@ function LintModal({
   const hasIssues = findings.length > 0;
   const [copied, setCopied] = useState78(false);
   const [copyFailed, setCopyFailed] = useState78(false);
-  const containerRef = useRef79(null);
+  const containerRef = useRef80(null);
   const { requestClose } = useDialogBehavior({ open: true, onClose, containerRef });
   const handleCopyToAgent = async () => {
     const lines = findings.map((f) => {
@@ -47215,7 +47314,7 @@ ${pathLine}${lines.join("\n\n")}`;
 }
 
 // src/components/AskAgentModal.tsx
-import { useState as useState79, useRef as useRef80 } from "react";
+import { useState as useState79, useRef as useRef81 } from "react";
 import { jsx as jsx128, jsxs as jsxs108 } from "react/jsx-runtime";
 function getAgentModalPositionStyle(anchorPoint) {
   if (!anchorPoint || typeof window === "undefined") return void 0;
@@ -47242,8 +47341,8 @@ function AskAgentModal({
   onClose
 }) {
   const [value, setValue] = useState79("");
-  const inputRef = useRef80(null);
-  const containerRef = useRef80(null);
+  const inputRef = useRef81(null);
+  const containerRef = useRef81(null);
   const modalPositionStyle = getAgentModalPositionStyle(anchorPoint);
   const { requestClose } = useDialogBehavior({
     open: true,
@@ -47522,7 +47621,7 @@ function SaveQueuePausedBanner({ message, onRetry }) {
 }
 
 // src/captions/hooks/useCaptionSync.ts
-import { useCallback as useCallback61, useRef as useRef81 } from "react";
+import { useCallback as useCallback61, useRef as useRef82 } from "react";
 function buildOverrides(model) {
   const entries = [];
   let globalWordIndex = 0;
@@ -47553,10 +47652,10 @@ function buildOverrides(model) {
   return entries;
 }
 function useCaptionSync(projectId) {
-  const projectIdRef = useRef81(projectId);
+  const projectIdRef = useRef82(projectId);
   projectIdRef.current = projectId;
-  const debounceRef = useRef81(null);
-  const suppressSaveRef = useRef81(false);
+  const debounceRef = useRef82(null);
+  const suppressSaveRef = useRef82(false);
   const save = useCallback61(() => {
     const state = useCaptionStore.getState();
     if (!state.model || !state.sourceFilePath || !state.isEditMode) return;
@@ -47645,7 +47744,7 @@ function useCaptionSync(projectId) {
 }
 
 // src/hooks/usePersistentEditHistory.ts
-import { useCallback as useCallback62, useEffect as useEffect68, useMemo as useMemo36, useRef as useRef82, useState as useState80 } from "react";
+import { useCallback as useCallback62, useEffect as useEffect68, useMemo as useMemo36, useRef as useRef83, useState as useState80 } from "react";
 
 // src/utils/editHistory.ts
 var DEFAULT_MAX_ENTRIES = 100;
@@ -48005,9 +48104,9 @@ function usePersistentEditHistory(options) {
   const [state, setState] = useState80(() => createEmptyEditHistory());
   const [loaded, setLoaded] = useState80(false);
   const projectId = options.projectId;
-  const storeRef = useRef82(null);
-  const storeProjectIdRef = useRef82(null);
-  const activeProjectIdRef = useRef82(projectId);
+  const storeRef = useRef83(null);
+  const storeProjectIdRef = useRef83(null);
+  const activeProjectIdRef = useRef83(projectId);
   activeProjectIdRef.current = projectId;
   useEffect68(() => {
     let cancelled = false;
@@ -48092,7 +48191,7 @@ function usePersistentEditHistory(options) {
 }
 
 // src/hooks/usePanelLayout.ts
-import { useState as useState81, useCallback as useCallback63, useRef as useRef83 } from "react";
+import { useState as useState81, useCallback as useCallback63, useRef as useRef84 } from "react";
 function getInitialRightInspectorPanes(tab) {
   if (tab === "layers") return { layers: true, design: false };
   return { layers: false, design: true };
@@ -48118,7 +48217,7 @@ function usePanelLayout(initialState2) {
   const [initialPanelWidths] = useState81(getInitialPanelWidths);
   const [leftWidth, setLeftWidth] = useState81(initialPanelWidths.left);
   const [rightWidth, setRightWidth] = useState81(initialPanelWidths.right);
-  const panelWidthsRef = useRef83(initialPanelWidths);
+  const panelWidthsRef = useRef84(initialPanelWidths);
   const [leftCollapsed, setLeftCollapsed] = useState81(
     () => readStudioUiPreferences().leftCollapsed ?? false
   );
@@ -48129,7 +48228,7 @@ function usePanelLayout(initialState2) {
   const [rightInspectorPanes, setRightInspectorPanes] = useState81(
     () => getInitialRightInspectorPanes(initialState2?.rightPanelTab)
   );
-  const panelDragRef = useRef83(null);
+  const panelDragRef = useRef84(null);
   const updatePanelWidth = useCallback63((side, width) => {
     const next = clampPanelWidth(side, width);
     panelWidthsRef.current[side] = next;
@@ -48223,7 +48322,7 @@ function usePanelLayout(initialState2) {
 }
 
 // src/hooks/useFileManager.ts
-import { useState as useState83, useCallback as useCallback66, useMemo as useMemo38, useRef as useRef85 } from "react";
+import { useState as useState83, useCallback as useCallback66, useMemo as useMemo38, useRef as useRef86 } from "react";
 
 // src/utils/studioFileVersion.ts
 async function studioFileContentVersion(content) {
@@ -48302,7 +48401,7 @@ function useFileTree({ projectId, projectIdRef }) {
 }
 
 // src/hooks/useEditorSave.ts
-import { useCallback as useCallback65, useRef as useRef84 } from "react";
+import { useCallback as useCallback65, useRef as useRef85 } from "react";
 function useEditorSave({
   editingPathRef,
   projectIdRef,
@@ -48313,9 +48412,9 @@ function useEditorSave({
   setRefreshKey,
   showToast
 }) {
-  const saveRafRef = useRef84(null);
-  const refreshRafRef = useRef84(null);
-  const lastFailureToastAtRef = useRef84(0);
+  const saveRafRef = useRef85(null);
+  const refreshRafRef = useRef85(null);
+  const lastFailureToastAtRef = useRef85(0);
   const handleContentChange = useCallback65(
     (content) => {
       const pid = projectIdRef.current;
@@ -48380,11 +48479,11 @@ function useFileManager({
 }) {
   const [editingFile, setEditingFile] = useState83(null);
   const [revealSourceOffset, setRevealSourceOffset] = useState83(null);
-  const editingPathRef = useRef85(editingFile?.path);
+  const editingPathRef = useRef86(editingFile?.path);
   editingPathRef.current = editingFile?.path;
-  const projectIdRef = useRef85(projectId);
+  const projectIdRef = useRef86(projectId);
   projectIdRef.current = projectId;
-  const importedFontAssetsRef = useRef85([]);
+  const importedFontAssetsRef = useRef86([]);
   const fileVersionScope = useMemo38(
     () => ({ projectId, versions: /* @__PURE__ */ new Map() }),
     [projectId]
@@ -48519,8 +48618,8 @@ function useFileManager({
     setRefreshKey,
     showToast
   });
-  const revealRequestIdRef = useRef85(0);
-  const revealAbortRef = useRef85(null);
+  const revealRequestIdRef = useRef86(0);
+  const revealAbortRef = useRef86(null);
   const handleFileSelect = useCallback66(
     (path) => {
       const pid = projectIdRef.current;
@@ -48804,7 +48903,7 @@ function useFileManager({
 }
 
 // src/hooks/usePreviewPersistence.ts
-import { useCallback as useCallback67, useRef as useRef86, useState as useState84 } from "react";
+import { useCallback as useCallback67, useRef as useRef87, useState as useState84 } from "react";
 
 // src/utils/domEditSaveQueue.ts
 var DEFAULT_FAILURE_THRESHOLD = 5;
@@ -49073,11 +49172,11 @@ function usePreviewPersistence({
 }) {
   void _recordEdit;
   const [domEditSaveQueuePaused, setDomEditSaveQueuePaused] = useState84(null);
-  const domTextCommitVersionRef = useRef86(0);
-  const showToastRef = useRef86(showToast);
+  const domTextCommitVersionRef = useRef87(0);
+  const showToastRef = useRef87(showToast);
   showToastRef.current = showToast;
-  const domEditSaveQueueRef = useRef86(null);
-  const applyStudioManualEditsToPreviewRef = useRef86(async () => {
+  const domEditSaveQueueRef = useRef87(null);
+  const applyStudioManualEditsToPreviewRef = useRef87(async () => {
   });
   if (!domEditSaveQueueRef.current) {
     domEditSaveQueueRef.current = createDomEditSaveQueue({
@@ -49097,7 +49196,7 @@ function usePreviewPersistence({
       }
     });
   }
-  const projectIdRef = useRef86(projectId);
+  const projectIdRef = useRef87(projectId);
   projectIdRef.current = projectId;
   const queueDomEditSave = useCallback67((save) => {
     return domEditSaveQueueRef.current?.enqueue(save) ?? save();
@@ -49182,10 +49281,10 @@ function usePreviewPersistence({
 }
 
 // src/hooks/usePreviewDocumentVersion.ts
-import { useCallback as useCallback68, useEffect as useEffect70, useRef as useRef87, useState as useState85 } from "react";
+import { useCallback as useCallback68, useEffect as useEffect70, useRef as useRef88, useState as useState85 } from "react";
 function usePreviewDocumentVersion() {
   const [previewDocumentVersion, setPreviewDocumentVersion] = useState85(0);
-  const refreshTimersRef = useRef87([]);
+  const refreshTimersRef = useRef88([]);
   const refresh = useCallback68(() => {
     for (const id of refreshTimersRef.current) clearTimeout(id);
     refreshTimersRef.current = [];
@@ -49205,10 +49304,10 @@ function usePreviewDocumentVersion() {
 }
 
 // src/hooks/useTimelineEditing.ts
-import { useCallback as useCallback73, useRef as useRef89 } from "react";
+import { useCallback as useCallback73, useRef as useRef90 } from "react";
 
 // src/hooks/useRazorSplit.ts
-import { useCallback as useCallback69, useRef as useRef88 } from "react";
+import { useCallback as useCallback69, useRef as useRef89 } from "react";
 
 // src/utils/projectRouting.ts
 var PROJECT_HASH_PREFIX = "#project/";
@@ -49386,7 +49485,7 @@ function useRazorSplit({
   forceReloadSdkSession,
   isRecordingRef
 }) {
-  const projectIdRef = useRef88(projectId);
+  const projectIdRef = useRef89(projectId);
   projectIdRef.current = projectId;
   const synchronize = useCallback69(() => {
     let failure;
@@ -50318,10 +50417,10 @@ function useTimelineEditing({
   invalidateGsapCache,
   handleDomZIndexReorderCommitRef
 }) {
-  const projectIdRef = useRef89(projectId);
+  const projectIdRef = useRef90(projectId);
   projectIdRef.current = projectId;
-  const editQueueRef = useRef89(Promise.resolve());
-  const lastBlockedTimelineToastAtRef = useRef89(0);
+  const editQueueRef = useRef90(Promise.resolve());
+  const lastBlockedTimelineToastAtRef = useRef90(0);
   const enqueueEdit = useCallback73(
     (element, label, buildPatches, coalesceKey) => {
       if (isRecordingRef?.current) {
@@ -50740,7 +50839,7 @@ function persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps,
 import { useCallback as useCallback96 } from "react";
 
 // src/hooks/useAskAgentModal.ts
-import { useState as useState86, useCallback as useCallback74, useRef as useRef90, useEffect as useEffect71 } from "react";
+import { useState as useState86, useCallback as useCallback74, useRef as useRef91, useEffect as useEffect71 } from "react";
 function useAskAgentModal({
   activeCompPath,
   projectDir,
@@ -50756,7 +50855,7 @@ function useAskAgentModal({
   );
   const [copiedAgentPrompt, setCopiedAgentPrompt] = useState86(false);
   const [agentModalOpen, setAgentModalOpen] = useState86(false);
-  const copiedAgentTimerRef = useRef90(null);
+  const copiedAgentTimerRef = useRef91(null);
   const preloadAgentPromptSnippet = useCallback74(
     async (selection) => {
       const pid = projectIdRef.current;
@@ -50851,7 +50950,7 @@ function useAskAgentModal({
 }
 
 // src/hooks/useDomSelection.ts
-import { useState as useState87, useCallback as useCallback75, useRef as useRef91, useEffect as useEffect73 } from "react";
+import { useState as useState87, useCallback as useCallback75, useRef as useRef92, useEffect as useEffect73 } from "react";
 
 // src/utils/domEditHelpers.ts
 function domEditSelectionsTargetSame(a, b) {
@@ -50935,14 +51034,14 @@ function useDomSelection({
   const [domEditGroupSelections, setDomEditGroupSelections] = useState87([]);
   const [domEditHoverSelection, setDomEditHoverSelection] = useState87(null);
   const [activeGroupElement, setActiveGroupElementState] = useState87(null);
-  const rightPanelTabRef = useRef91(rightPanelTab);
+  const rightPanelTabRef = useRef92(rightPanelTab);
   rightPanelTabRef.current = rightPanelTab;
-  const domEditSelectionRef = useRef91(domEditSelection);
-  const domEditGroupSelectionsRef = useRef91(domEditGroupSelections);
-  const domEditHoverSelectionRef = useRef91(domEditHoverSelection);
-  const activeGroupElementRef = useRef91(activeGroupElement);
-  const compositionIdentityRef = useRef91({ activeCompPath, projectId });
-  const timelineSelectSeqRef = useRef91(0);
+  const domEditSelectionRef = useRef92(domEditSelection);
+  const domEditGroupSelectionsRef = useRef92(domEditGroupSelections);
+  const domEditHoverSelectionRef = useRef92(domEditHoverSelection);
+  const activeGroupElementRef = useRef92(activeGroupElement);
+  const compositionIdentityRef = useRef92({ activeCompPath, projectId });
+  const timelineSelectSeqRef = useRef92(0);
   domEditSelectionRef.current = domEditSelection;
   domEditGroupSelectionsRef.current = domEditGroupSelections;
   domEditHoverSelectionRef.current = domEditHoverSelection;
@@ -51263,7 +51362,7 @@ function useDomSelection({
 }
 
 // src/hooks/usePreviewInteraction.ts
-import { useCallback as useCallback76, useRef as useRef92 } from "react";
+import { useCallback as useCallback76, useRef as useRef93 } from "react";
 var CYCLE_RADIUS_PX = 6;
 var CYCLE_WINDOW_MS = 600;
 var DOUBLE_CLICK_MS = 400;
@@ -51280,8 +51379,8 @@ function usePreviewInteraction({
   setActiveGroupElement,
   onClickToSource
 }) {
-  const cycleRef = useRef92(null);
-  const lastDownRef = useRef92(null);
+  const cycleRef = useRef93(null);
+  const lastDownRef = useRef93(null);
   const pausePreviewPlayback = useCallback76(() => {
     const pausedTime = pauseStudioPreviewPlayback(previewIframeRef.current);
     const playerStore = usePlayerStore.getState();
@@ -51439,7 +51538,7 @@ function usePreviewInteraction({
 }
 
 // src/hooks/useDomEditCommits.ts
-import { useCallback as useCallback81, useRef as useRef95 } from "react";
+import { useCallback as useCallback81, useRef as useRef96 } from "react";
 import { findUnsafeDomPatchValues as findUnsafeDomPatchValues2 } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/utils/studioFontHelpers.ts
@@ -51609,7 +51708,7 @@ function useDomEditPositionPatchCommit({
 }
 
 // src/hooks/useDomEditTextCommits.ts
-import { useCallback as useCallback79, useRef as useRef94 } from "react";
+import { useCallback as useCallback79, useRef as useRef95 } from "react";
 
 // src/hooks/domEditTextFieldCommitOps.ts
 function hasSameKeysInSamePositions(originalFields, nextFields) {
@@ -51651,7 +51750,7 @@ function buildTextFieldChildOperations(originalFields, nextFields) {
 }
 
 // src/hooks/useDomEditAttributeCommits.ts
-import { useCallback as useCallback78, useRef as useRef93 } from "react";
+import { useCallback as useCallback78, useRef as useRef94 } from "react";
 function resolveFullAttrName(attr, prefixData) {
   return prefixData && !attr.startsWith("data-") ? `data-${attr}` : attr;
 }
@@ -51687,7 +51786,7 @@ function useDomEditAttributeCommits({
   refreshDomEditSelectionFromPreview,
   persistDomEditOperations
 }) {
-  const domAttributeCommitVersionRef = useRef93(/* @__PURE__ */ new Map());
+  const domAttributeCommitVersionRef = useRef94(/* @__PURE__ */ new Map());
   const commitDataAttribute = useCallback78(
     async (attr, value, options) => {
       if (!domEditSelection) return;
@@ -51951,8 +52050,8 @@ function useDomEditTextCommits({
   persistDomEditOperations,
   resolveImportedFontAsset
 }) {
-  const domTextCommitVersionRef = useRef94(0);
-  const domStyleCommitVersionRef = useRef94(/* @__PURE__ */ new Map());
+  const domTextCommitVersionRef = useRef95(0);
+  const domStyleCommitVersionRef = useRef95(/* @__PURE__ */ new Map());
   const {
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
@@ -52769,7 +52868,7 @@ function useDomEditCommits({
     },
     [fileTree, projectId, importedFontAssetsRef]
   );
-  const reportedUnresolvableRef = useRef95(/* @__PURE__ */ new Set());
+  const reportedUnresolvableRef = useRef96(/* @__PURE__ */ new Set());
   const persistDomEditOperations = useCallback81(
     // fallow-ignore-next-line complexity
     async (selection, operations, options) => {
@@ -53126,7 +53225,7 @@ function useGroupCommits(params) {
 }
 
 // src/hooks/useGsapScriptCommits.ts
-import { useCallback as useCallback88, useMemo as useMemo39, useRef as useRef97 } from "react";
+import { useCallback as useCallback88, useMemo as useMemo39, useRef as useRef98 } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/hooks/gsapRuntimePatch.ts
@@ -53908,7 +54007,7 @@ function useGsapKeyframeOps({
 }
 
 // src/hooks/useGsapPropertyDebounce.ts
-import { useCallback as useCallback86, useEffect as useEffect74, useRef as useRef96 } from "react";
+import { useCallback as useCallback86, useEffect as useEffect74, useRef as useRef97 } from "react";
 import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
 var DEBOUNCE_MS = 150;
 function mergeTweenProperties(sdkSession, animationId, edited, kind) {
@@ -53924,9 +54023,9 @@ function mergeTweenProperties(sdkSession, animationId, edited, kind) {
   }
 }
 function useGsapPropertyDebounce(commitMutationSafely, sdk) {
-  const pendingPropertyEditRef = useRef96(null);
-  const debounceTimerRef = useRef96(null);
-  const sdkRef = useRef96(sdk);
+  const pendingPropertyEditRef = useRef97(null);
+  const debounceTimerRef = useRef97(null);
+  const sdkRef = useRef97(sdk);
   sdkRef.current = sdk;
   const flushPendingPropertyEdit = useCallback86(async () => {
     const pending = pendingPropertyEditRef.current;
@@ -54335,9 +54434,9 @@ function applyPreviewSync(iframe, result, options, reloadPreview) {
 }
 function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession, publishSdkSession, writeProjectFile, forceReloadSdkSession }) {
   const activeProjectId = projectIdRef.current;
-  const activeCompPathRef = useRef97(activeCompPath);
+  const activeCompPathRef = useRef98(activeCompPath);
   activeCompPathRef.current = activeCompPath;
-  const serializerRef = useRef97(createKeyedSerializer());
+  const serializerRef = useRef98(createKeyedSerializer());
   const recordMutationEdit = useCallback88(async (targetPath, result, options) => {
     if (result.before == null || result.after == null) return;
     await editHistory.recordEdit({
@@ -54519,10 +54618,10 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
 }
 
 // src/hooks/useDomEditWiring.ts
-import { useCallback as useCallback92, useEffect as useEffect76, useRef as useRef100 } from "react";
+import { useCallback as useCallback92, useEffect as useEffect76, useRef as useRef101 } from "react";
 
 // src/hooks/useDomEditPreviewSync.ts
-import { useEffect as useEffect75, useRef as useRef98 } from "react";
+import { useEffect as useEffect75, useRef as useRef99 } from "react";
 function useDomEditPreviewSync({
   previewIframe,
   activeCompPath,
@@ -54588,7 +54687,7 @@ function useDomEditPreviewSync({
     applyStudioManualEditsToPreviewRef,
     gsapCacheVersion
   ]);
-  const openSourceRef = useRef98(openSourceForSelection);
+  const openSourceRef = useRef99(openSourceForSelection);
   openSourceRef.current = openSourceForSelection;
   useEffect75(
     // fallow-ignore-next-line complexity
@@ -54666,7 +54765,7 @@ function useGsapInteractionFailureTelemetry(activeCompPath, showToast) {
 }
 
 // src/hooks/useGsapSelectionHandlers.ts
-import { useCallback as useCallback91, useRef as useRef99 } from "react";
+import { useCallback as useCallback91, useRef as useRef100 } from "react";
 function useGsapSelectionHandlers({
   domEditSelection,
   updateGsapProperty,
@@ -54690,7 +54789,7 @@ function useGsapSelectionHandlers({
   selectedGsapAnimations,
   showToast
 }) {
-  const lastSelectionRef = useRef99(null);
+  const lastSelectionRef = useRef100(null);
   if (domEditSelection) lastSelectionRef.current = domEditSelection;
   const resolveWriteSelection = useCallback91(
     (selectionOverride) => selectionOverride === void 0 ? domEditSelection ?? lastSelectionRef.current : selectionOverride,
@@ -55022,7 +55121,7 @@ function useDomEditWiring({
     const key = matchKey ? matchKey.key ?? matchKey.id : null;
     if (key && key !== selectedElementId) setSelectedElementId(key);
   }, [domEditSelection?.id]);
-  const prevRefreshKeyRef = useRef100(refreshKey);
+  const prevRefreshKeyRef = useRef101(refreshKey);
   useEffect76(() => {
     if (refreshKey !== prevRefreshKeyRef.current) {
       prevRefreshKeyRef.current = refreshKey;
@@ -55931,7 +56030,7 @@ function useGsapAwareEditing({
 }
 
 // src/hooks/useStudioSelectionPublisher.ts
-import { useEffect as useEffect77, useRef as useRef101 } from "react";
+import { useEffect as useEffect77, useRef as useRef102 } from "react";
 
 // src/utils/studioSelectionSnapshot.ts
 function round34(value) {
@@ -56021,8 +56120,8 @@ function useStudioSelectionPublisher({
   previewDocumentVersion,
   refreshDomEditSelectionFromPreview
 }) {
-  const lastSelectionRefreshKeyRef = useRef101(refreshKey);
-  const pendingSelectionRefreshKeyRef = useRef101(null);
+  const lastSelectionRefreshKeyRef = useRef102(refreshKey);
+  const pendingSelectionRefreshKeyRef = useRef102(null);
   useEffect77(() => {
     if (!projectId) return;
     const selection = domEditSelection?.element.isConnected ? buildStudioSelectionSnapshot({
@@ -56582,7 +56681,7 @@ function useSdkSelectionSync(session, domEditSelection, domEditGroupSelections)
 import { useEffect as useEffect80 } from "react";
 
 // src/hooks/useSdkSession.ts
-import { useState as useState88, useEffect as useEffect79, useCallback as useCallback97, useRef as useRef102 } from "react";
+import { useState as useState88, useEffect as useEffect79, useCallback as useCallback97, useRef as useRef103 } from "react";
 import { openComposition as openComposition3 } from "@hyperframes/sdk";
 async function readProjectFileOptional(projectId, path) {
   if (path.includes("\0") || path.includes("..")) return void 0;
@@ -56631,15 +56730,15 @@ function disposeSdkSession(session) {
 }
 function useSdkSession(projectId, activeCompPath, domEditSaveTimestampRef) {
   const [ownedSession, setOwnedSession] = useState88(null);
-  const ownedSessionRef = useRef102(null);
-  const sessionOwnersRef = useRef102(/* @__PURE__ */ new WeakMap());
-  const generationRef = useRef102(0);
-  const projectIdRef = useRef102(projectId);
+  const ownedSessionRef = useRef103(null);
+  const sessionOwnersRef = useRef103(/* @__PURE__ */ new WeakMap());
+  const generationRef = useRef103(0);
+  const projectIdRef = useRef103(projectId);
   projectIdRef.current = projectId;
-  const activeCompPathRef = useRef102(activeCompPath);
+  const activeCompPathRef = useRef103(activeCompPath);
   activeCompPathRef.current = activeCompPath;
   const [reloadToken, setReloadToken] = useState88(0);
-  const reloadTokenRef = useRef102(reloadToken);
+  const reloadTokenRef = useRef103(reloadToken);
   reloadTokenRef.current = reloadToken;
   useEffect79(() => {
     if (!activeCompPath) return;
@@ -56761,7 +56860,7 @@ function useStudioSdkSessions(projectId, activeCompPath, domEditSaveTimestampRef
 }
 
 // src/hooks/useBlockHandlers.ts
-import { useCallback as useCallback98, useMemo as useMemo40, useRef as useRef103, useState as useState89 } from "react";
+import { useCallback as useCallback98, useMemo as useMemo40, useRef as useRef104, useState as useState89 } from "react";
 
 // src/utils/blockInstaller.ts
 function getMaxZIndexFromIframe(iframe) {
@@ -56970,7 +57069,7 @@ function useBlockHandlers({
       blockCtxDeps.showToast
     ]
   );
-  const installingBlockRef = useRef103(false);
+  const installingBlockRef = useRef104(false);
   const runBlockInstall = useCallback98(
     async (blockName, install) => {
       if (installingBlockRef.current) {
@@ -57081,7 +57180,7 @@ function useBlockHandlers({
 }
 
 // src/hooks/useAppHotkeys.ts
-import { useCallback as useCallback99, useEffect as useEffect81, useRef as useRef104 } from "react";
+import { useCallback as useCallback99, useEffect as useEffect81, useRef as useRef105 } from "react";
 function iframeContentWindow(iframe) {
   try {
     return iframe?.contentWindow ?? null;
@@ -57289,8 +57388,8 @@ function useAppHotkeys({
   activeCompPath,
   forceReloadSdkSession
 }) {
-  const previewHotkeyWindowRef = useRef104(null);
-  const previewHistoryCleanupRef = useRef104(null);
+  const previewHotkeyWindowRef = useRef105(null);
+  const previewHistoryCleanupRef = useRef105(null);
   const readHistoryFile = useCallback99(
     (path) => path === STUDIO_MOTION_PATH ? readOptionalProjectFile(path) : readProjectFile(path),
     [readOptionalProjectFile, readProjectFile]
@@ -57346,7 +57445,7 @@ function useAppHotkeys({
   );
   const handleUndo = useCallback99(() => applyHistory("undo"), [applyHistory]);
   const handleRedo = useCallback99(() => applyHistory("redo"), [applyHistory]);
-  const cbRef = useRef104(null);
+  const cbRef = useRef105(null);
   cbRef.current = {
     handleTimelineElementDelete,
     handleTimelineElementSplit,
@@ -57449,7 +57548,7 @@ function useAppHotkeys({
 }
 
 // src/hooks/useClipboard.ts
-import { useCallback as useCallback100, useRef as useRef105 } from "react";
+import { useCallback as useCallback100, useRef as useRef106 } from "react";
 
 // src/utils/clipboardPayload.ts
 function insertAsSibling(source, newHtml, selector, selectorIndex) {
@@ -57556,8 +57655,8 @@ function useClipboard({
   handleDomEditElementDelete,
   previewIframeRef
 }) {
-  const clipboardRef = useRef105(null);
-  const projectIdRef = useRef105(projectId);
+  const clipboardRef = useRef106(null);
+  const projectIdRef = useRef106(projectId);
   projectIdRef.current = projectId;
   const handleCopy = useCallback100(() => {
     const { selectedElementId, elements } = usePlayerStore.getState();
@@ -58035,7 +58134,7 @@ import { useCallback as useCallback103 } from "react";
 import { createElement as createElement4 } from "react";
 
 // src/player/components/AudioWaveform.tsx
-import { memo as memo34, useRef as useRef106, useState as useState90, useCallback as useCallback101, useEffect as useEffect83 } from "react";
+import { memo as memo34, useRef as useRef107, useState as useState90, useCallback as useCallback101, useEffect as useEffect83 } from "react";
 import { jsx as jsx133, jsxs as jsxs113 } from "react/jsx-runtime";
 var BAR_W = 2;
 var GAP = 1;
@@ -58083,9 +58182,9 @@ var AudioWaveform = memo34(function AudioWaveform2({
   trimStartFraction,
   trimEndFraction
 }) {
-  const containerRef = useRef106(null);
-  const barsRef = useRef106(null);
-  const roRef = useRef106(null);
+  const containerRef = useRef107(null);
+  const barsRef = useRef107(null);
+  const roRef = useRef107(null);
   const cacheKey = waveformUrl ?? audioUrl;
   const [peaks, setPeaks] = useState90(peaksCache.get(cacheKey) ?? null);
   useEffect83(() => {
@@ -58177,7 +58276,7 @@ var AudioWaveform = memo34(function AudioWaveform2({
 });
 
 // src/player/components/ImageThumbnail.tsx
-import { memo as memo35, useRef as useRef107, useState as useState91, useCallback as useCallback102, useEffect as useEffect84 } from "react";
+import { memo as memo35, useRef as useRef108, useState as useState91, useCallback as useCallback102, useEffect as useEffect84 } from "react";
 import { jsx as jsx134, jsxs as jsxs114 } from "react/jsx-runtime";
 var ImageThumbnail = memo35(function ImageThumbnail2({
   imageSrc,
@@ -58188,8 +58287,8 @@ var ImageThumbnail = memo35(function ImageThumbnail2({
   const [visible, setVisible] = useState91(false);
   const [status, setStatus] = useState91("loading");
   const [aspect, setAspect] = useState91(16 / 9);
-  const ioRef = useRef107(null);
-  const roRef = useRef107(null);
+  const ioRef = useRef108(null);
+  const roRef = useRef108(null);
   const setContainerRef = useCallback102((el) => {
     ioRef.current?.disconnect();
     roRef.current?.disconnect();
@@ -58415,10 +58514,10 @@ function useRenderClipContent({
 }
 
 // src/hooks/useConsoleErrorCapture.ts
-import { useCallback as useCallback104, useEffect as useEffect85, useRef as useRef108, useState as useState92 } from "react";
+import { useCallback as useCallback104, useEffect as useEffect85, useRef as useRef109, useState as useState92 } from "react";
 function useConsoleErrorCapture(previewIframe) {
   const [consoleErrors, setConsoleErrors] = useState92(null);
-  const consoleErrorsRef = useRef108([]);
+  const consoleErrorsRef = useRef109([]);
   const resetErrors = useCallback104(() => {
     consoleErrorsRef.current = [];
     setConsoleErrors(null);
@@ -58488,7 +58587,7 @@ function useConsoleErrorCapture(previewIframe) {
 }
 
 // src/hooks/useFrameCapture.ts
-import { useState as useState93, useCallback as useCallback105, useRef as useRef109 } from "react";
+import { useState as useState93, useCallback as useCallback105, useRef as useRef110 } from "react";
 
 // src/utils/frameCapture.ts
 function normalizeCompositionPath(compositionPath) {
@@ -58526,7 +58625,7 @@ function useFrameCapture({
 }) {
   const [captureFrameTime, setCaptureFrameTime] = useState93(0);
   const [capturing, setCapturing] = useState93(false);
-  const capturingRef = useRef109(false);
+  const capturingRef = useRef110(false);
   useMountEffect(() => {
     setCaptureFrameTime(usePlayerStore.getState().currentTime);
     return liveTime.subscribe(setCaptureFrameTime);
@@ -58611,7 +58710,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState94, useCallback as useCallback106, useEffect as useEffect86, useRef as useRef110, useMemo as useMemo41 } from "react";
+import { useState as useState94, useCallback as useCallback106, useEffect as useEffect86, useRef as useRef111, useMemo as useMemo41 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -58625,7 +58724,7 @@ function useLintModal(projectId, refreshKey) {
   const [lintModal, setLintModal] = useState94(null);
   const [linting, setLinting] = useState94(false);
   const [backgroundFindings, setBackgroundFindings] = useState94([]);
-  const autoLintRanRef = useRef110(false);
+  const autoLintRanRef = useRef111(false);
   const runLint = useCallback106(
     async (opts) => {
       if (!projectId) return;
@@ -58652,7 +58751,7 @@ function useLintModal(projectId, refreshKey) {
     [projectId]
   );
   const handleLint = useCallback106(() => runLint(), [runLint]);
-  const prevProjectIdRef = useRef110(projectId);
+  const prevProjectIdRef = useRef111(projectId);
   useEffect86(() => {
     if (projectId !== prevProjectIdRef.current) {
       autoLintRanRef.current = false;
@@ -58700,14 +58799,14 @@ function useLintModal(projectId, refreshKey) {
 }
 
 // src/hooks/useToast.ts
-import { useState as useState95, useCallback as useCallback107, useRef as useRef111 } from "react";
+import { useState as useState95, useCallback as useCallback107, useRef as useRef112 } from "react";
 var AUTO_DISMISS_MS2 = 4e3;
 var EXIT_MS = 160;
 var MAX_TOASTS = 3;
 var nextToastId = 1;
 function useToast() {
   const [toasts, setToasts] = useState95([]);
-  const timersRef = useRef111(/* @__PURE__ */ new Map());
+  const timersRef = useRef112(/* @__PURE__ */ new Map());
   const clearTimer = useCallback107((id) => {
     const timer = timersRef.current.get(id);
     if (timer) {
@@ -58783,7 +58882,7 @@ function useCompositionContentLoader({
 }
 
 // src/hooks/useStudioUrlState.ts
-import { useCallback as useCallback109, useEffect as useEffect87, useRef as useRef112, useState as useState96 } from "react";
+import { useCallback as useCallback109, useEffect as useEffect87, useRef as useRef113, useState as useState96 } from "react";
 
 // src/utils/studioUrlState.ts
 var VALID_TABS = ["layers", "design", "renders", "slideshow", "variables"];
@@ -58908,12 +59007,12 @@ function useStudioUrlState({
   initialState: initialState2
 }) {
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const hydratedSeekRef = useRef112(initialState2.currentTime == null);
-  const hydratedInitialTimeRef = useRef112(initialState2.currentTime == null);
-  const hydratedSelectionRef = useRef112(initialState2.selection == null);
+  const hydratedSeekRef = useRef113(initialState2.currentTime == null);
+  const hydratedInitialTimeRef = useRef113(initialState2.currentTime == null);
+  const hydratedSelectionRef = useRef113(initialState2.selection == null);
   const [selectionHydrated, setSelectionHydrated] = useState96(initialState2.selection == null);
-  const pendingSelectionRef = useRef112(initialState2.selection);
-  const stableTimeRef = useRef112(initialState2.currentTime);
+  const pendingSelectionRef = useRef113(initialState2.selection);
+  const stableTimeRef = useRef113(initialState2.currentTime);
   const buildUrlState = useCallback109(
     () => ({
       activeCompPath,
@@ -59041,7 +59140,7 @@ function useStudioUrlState({
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback110, useMemo as useMemo42, useRef as useRef113, useState as useState97 } from "react";
+import { useCallback as useCallback110, useMemo as useMemo42, useRef as useRef114, useState as useState97 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -59097,7 +59196,7 @@ function useInspectorState(rightPanelTab, rightInspectorPanes, rightCollapsed, i
 }
 function useDragOverlay(onImportFiles) {
   const [active, setActive] = useState97(false);
-  const counterRef = useRef113(0);
+  const counterRef = useRef114(0);
   const onDragOver = useCallback110((e) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
@@ -59136,7 +59235,7 @@ function useGlobalFileDrop(handleTimelineFileDrop) {
 }
 
 // src/components/StudioHeader.tsx
-import { useRef as useRef115 } from "react";
+import { useRef as useRef116 } from "react";
 
 // src/contexts/PanelLayoutContext.tsx
 import { createContext as createContext8, useContext as useContext8, useMemo as useMemo43 } from "react";
@@ -59216,7 +59315,7 @@ import {
   useContext as useContext9,
   useEffect as useEffect88,
   useMemo as useMemo44,
-  useRef as useRef114,
+  useRef as useRef115,
   useState as useState98
 } from "react";
 import { jsx as jsx136 } from "react/jsx-runtime";
@@ -59244,8 +59343,8 @@ function readHistoryLocation() {
 }
 function useViewModeState() {
   const [viewMode, setMode] = useState98(() => readViewModeFromUrl());
-  const guardsRef = useRef114(/* @__PURE__ */ new Set());
-  const acceptedLocationRef = useRef114(readHistoryLocation());
+  const guardsRef = useRef115(/* @__PURE__ */ new Set());
+  const acceptedLocationRef = useRef115(readHistoryLocation());
   const canSetViewMode = useCallback111((mode) => {
     for (const guard of guardsRef.current) {
       if (!guard(mode)) return false;
@@ -59492,7 +59591,7 @@ var VIEW_MODE_OPTIONS = [
 ];
 function ViewModeToggle() {
   const { viewMode, setViewMode } = useViewMode();
-  const tabRefs = useRef115([]);
+  const tabRefs = useRef116([]);
   const selectMode = (mode) => {
     if (mode === viewMode) return;
     if (setViewMode(mode)) trackStudioEvent("view_mode_toggle", { mode });
@@ -59714,10 +59813,10 @@ function StudioHeader({
 }
 
 // src/hooks/useGestureCommit.ts
-import { useState as useState100, useCallback as useCallback113, useRef as useRef117, useEffect as useEffect90 } from "react";
+import { useState as useState100, useCallback as useCallback113, useRef as useRef118, useEffect as useEffect90 } from "react";
 
 // src/hooks/useGestureRecording.ts
-import { useCallback as useCallback112, useEffect as useEffect89, useRef as useRef116, useState as useState99 } from "react";
+import { useCallback as useCallback112, useEffect as useEffect89, useRef as useRef117, useState as useState99 } from "react";
 function readBasePosition(element, iframeEl) {
   let baseOpacity = 1;
   let baseScale = 1;
@@ -59836,10 +59935,10 @@ function createRecordingRefs() {
 function useGestureRecording() {
   const [isRecording, setIsRecording] = useState99(false);
   const [recordingDuration, setRecordingDuration] = useState99(0);
-  const isRecordingRef = useRef116(false);
-  const refs = useRef116(createRecordingRefs());
-  const samplesRef = useRef116(refs.current.samples);
-  const trailRef = useRef116(refs.current.trail);
+  const isRecordingRef = useRef117(false);
+  const refs = useRef117(createRecordingRefs());
+  const samplesRef = useRef117(refs.current.samples);
+  const trailRef = useRef117(refs.current.trail);
   useEffect89(() => {
     const r = refs.current;
     return () => {
@@ -60235,11 +60334,11 @@ function useGestureCommit({
 }) {
   const gestureRecording = useGestureRecording();
   const [gestureState, setGestureState] = useState100("idle");
-  const gestureStateRef = useRef117("idle");
-  const recordingAutoStopRef = useRef117(void 0);
-  const recordingStartTimeRef = useRef117(0);
-  const commitInFlightRef = useRef117(false);
-  const capturedSelectionRef = useRef117(null);
+  const gestureStateRef = useRef118("idle");
+  const recordingAutoStopRef = useRef118(void 0);
+  const recordingStartTimeRef = useRef118(0);
+  const commitInFlightRef = useRef118(false);
+  const capturedSelectionRef = useRef118(null);
   useEffect90(() => () => clearInterval(recordingAutoStopRef.current), []);
   const stopAndCommitRecording = useCallback113(async () => {
     clearInterval(recordingAutoStopRef.current);
@@ -60580,12 +60679,12 @@ import {
   useState as useState108,
   useCallback as useCallback119,
   useImperativeHandle,
-  useRef as useRef123,
+  useRef as useRef124,
   forwardRef as forwardRef3
 } from "react";
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo37, useCallback as useCallback114, useEffect as useEffect91, useRef as useRef118, useState as useState101 } from "react";
+import { memo as memo37, useCallback as useCallback114, useEffect as useEffect91, useRef as useRef119, useState as useState101 } from "react";
 import { jsx as jsx139, jsxs as jsxs117 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -60657,10 +60756,10 @@ function CompCard({
   const [stageSize, setStageSize] = useState101(DEFAULT_PREVIEW_STAGE);
   const [livePreviewLoaded, setLivePreviewLoaded] = useState101(false);
   const [thumbnailFailed, setThumbnailFailed] = useState101(false);
-  const iframeRef = useRef118(null);
-  const hoverTimer = useRef118(null);
-  const syncTimer = useRef118(null);
-  const draggedRef = useRef118(false);
+  const iframeRef = useRef119(null);
+  const hoverTimer = useRef119(null);
+  const syncTimer = useRef119(null);
+  const draggedRef = useRef119(false);
   const requestIframePlaybackSync = useCallback114((shouldPlay) => {
     if (syncTimer.current) {
       clearTimeout(syncTimer.current);
@@ -60882,7 +60981,7 @@ var CompositionsTab = memo37(function CompositionsTab2({
 });
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo38, useState as useState106, useCallback as useCallback117, useRef as useRef121, useMemo as useMemo47, useEffect as useEffect96 } from "react";
+import { memo as memo38, useState as useState106, useCallback as useCallback117, useRef as useRef122, useMemo as useMemo47, useEffect as useEffect96 } from "react";
 
 // src/components/sidebar/assetHelpers.ts
 function getCategory(path) {
@@ -60932,7 +61031,7 @@ var CATEGORY_LABELS = {
 var FILTER_ORDER = ["audio", "images", "video", "fonts"];
 
 // src/components/sidebar/AudioRow.tsx
-import { useState as useState102, useRef as useRef119, useEffect as useEffect92, useCallback as useCallback115 } from "react";
+import { useState as useState102, useRef as useRef120, useEffect as useEffect92, useCallback as useCallback115 } from "react";
 
 // src/components/sidebar/AssetContextMenu.tsx
 import { jsx as jsx140, jsxs as jsxs118 } from "react/jsx-runtime";
@@ -61061,15 +61160,15 @@ function AudioRow({
   const [contextMenu, setContextMenu] = useState102(null);
   const [playing, setPlaying] = useState102(false);
   const [bars, setBars] = useState102([]);
-  const audioRef = useRef119(null);
-  const actxRef = useRef119(null);
-  const analyserRef = useRef119(null);
-  const sourceRef = useRef119(null);
-  const animRef = useRef119(0);
+  const audioRef = useRef120(null);
+  const actxRef = useRef120(null);
+  const analyserRef = useRef120(null);
+  const sourceRef = useRef120(null);
+  const animRef = useRef120(0);
   const name = basename2(asset);
   const subtype = getAudioSubtype(asset);
   const serveUrl = resolveMediaPreviewUrl(asset, projectId);
-  const pointerDownRef = useRef119(null);
+  const pointerDownRef = useRef120(null);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const requestClipReveal = usePlayerStore((s) => s.requestClipReveal);
   const elements = usePlayerStore((s) => s.elements);
@@ -61311,7 +61410,7 @@ function GlobalAssetsView({ searchQuery }) {
 }
 
 // src/components/sidebar/AssetCard.tsx
-import { useState as useState105, useEffect as useEffect95, useRef as useRef120, useCallback as useCallback116 } from "react";
+import { useState as useState105, useEffect as useEffect95, useRef as useRef121, useCallback as useCallback116 } from "react";
 
 // src/components/ui/VideoFrameThumbnail.tsx
 import { useState as useState104, useEffect as useEffect94 } from "react";
@@ -61436,7 +61535,7 @@ function AssetCard({
   const probedDuration = useProbedDuration(serveUrl, !isVideo || duration != null);
   const resolvedDuration = duration ?? probedDuration ?? void 0;
   const durationLabel = formatDuration(resolvedDuration ?? 0);
-  const pointerDownRef = useRef120(null);
+  const pointerDownRef = useRef121(null);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const requestClipReveal = usePlayerStore((s) => s.requestClipReveal);
   const elements = usePlayerStore((s) => s.elements);
@@ -61638,7 +61737,7 @@ var AssetsTab = memo38(function AssetsTab2({
   onRename,
   onAddAssetToTimeline
 }) {
-  const fileInputRef = useRef121(null);
+  const fileInputRef = useRef122(null);
   const [dragOver, setDragOver] = useState106(false);
   const [copiedPath, setCopiedPath] = useState106(null);
   const [activeFilter, setActiveFilter] = useState106("all");
@@ -61646,7 +61745,7 @@ var AssetsTab = memo38(function AssetsTab2({
   const [searchQuery, setSearchQuery] = useState106("");
   const [viewMode, setViewMode] = useState106("local");
   const [manifest, setManifest] = useState106(/* @__PURE__ */ new Map());
-  const manifest404Ref = useRef121(/* @__PURE__ */ new Set());
+  const manifest404Ref = useRef122(/* @__PURE__ */ new Set());
   const assetsKey = assets.join("|");
   useEffect96(() => {
     if (manifest404Ref.current.has(projectId)) return;
@@ -61967,7 +62066,7 @@ var AssetsTab = memo38(function AssetsTab2({
 });
 
 // src/components/sidebar/BlocksTab.tsx
-import { memo as memo39, useState as useState107, useCallback as useCallback118, useRef as useRef122, useEffect as useEffect97 } from "react";
+import { memo as memo39, useState as useState107, useCallback as useCallback118, useRef as useRef123, useEffect as useEffect97 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 import { jsx as jsx146, jsxs as jsxs123 } from "react/jsx-runtime";
 var BlocksTab = memo39(function BlocksTab2({ onAddBlock, onPreviewBlock }) {
@@ -62179,7 +62278,7 @@ function BlockCard({
 }) {
   const [hovered, setHovered] = useState107(false);
   const [adding, setAdding] = useState107(false);
-  const hoverTimer = useRef122(null);
+  const hoverTimer = useRef123(null);
   const colors = getCategoryColors(category);
   const needsWebGL = tags?.includes("html-in-canvas") || tags?.includes("webgl");
   const handleEnter = useCallback118(() => {
@@ -62357,7 +62456,7 @@ function PromptPreviewModal({
 }) {
   const [value, setValue] = useState107(prompt);
   const [copied, setCopied] = useState107(false);
-  const textareaRef = useRef122(null);
+  const textareaRef = useRef123(null);
   useEffect97(() => {
     requestAnimationFrame(() => textareaRef.current?.focus());
   }, []);
@@ -62486,7 +62585,7 @@ var LeftSidebar = memo40(
     onAddCompositionToTimeline
   }, ref) {
     const [tab, setTab] = useState108(getPersistedTab);
-    const tabRef = useRef123(tab);
+    const tabRef = useRef124(tab);
     tabRef.current = tab;
     const selectTab = useCallback119((t) => {
       setTab(t);
@@ -62954,13 +63053,13 @@ function StudioLeftSidebar({
 }
 
 // src/components/StudioRightPanel.tsx
-import { useCallback as useCallback136, useEffect as useEffect104, useRef as useRef129 } from "react";
+import { useCallback as useCallback136, useEffect as useEffect104, useRef as useRef130 } from "react";
 
 // src/components/editor/LayersPanel.tsx
-import { memo as memo41, useState as useState111, useCallback as useCallback122, useEffect as useEffect98, useRef as useRef125 } from "react";
+import { memo as memo41, useState as useState111, useCallback as useCallback122, useEffect as useEffect98, useRef as useRef126 } from "react";
 
 // src/components/editor/useLayerDrag.ts
-import { useRef as useRef124, useState as useState110, useCallback as useCallback121 } from "react";
+import { useRef as useRef125, useState as useState110, useCallback as useCallback121 } from "react";
 var DRAG_THRESHOLD_PX3 = 4;
 function isLayerDraggable(layer) {
   if (!(layer.selector || layer.id)) return false;
@@ -63027,7 +63126,7 @@ function useLayerDrag({
   onReorder,
   onSingleSibling
 }) {
-  const dragRef = useRef124(null);
+  const dragRef = useRef125(null);
   const [dragKey, setDragKey] = useState110(null);
   const [insertionLineY, setInsertionLineY] = useState110(null);
   const handleRowPointerDown = useCallback121(
@@ -63232,8 +63331,8 @@ var LayersPanel = memo41(function LayersPanel2() {
   } = useDomEditContext();
   const [layers, setLayers] = useState111([]);
   const [collapsed, setCollapsed] = useState111({});
-  const prevDocVersionRef = useRef125(0);
-  const scrollContainerRef = useRef125(null);
+  const prevDocVersionRef = useRef126(0);
+  const scrollContainerRef = useRef126(null);
   const mirrorLayerReorderToTimeline = useLayerReorderTimelineMirror();
   const { scheduleReveal } = useLayerRevealOverride({
     isPlaying,
@@ -64125,7 +64224,7 @@ function ParamControl({
 }
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo46, useState as useState115, useRef as useRef126, useEffect as useEffect99, useLayoutEffect as useLayoutEffect5, useId as useId6 } from "react";
+import { memo as memo46, useState as useState115, useRef as useRef127, useEffect as useEffect99, useLayoutEffect as useLayoutEffect5, useId as useId6 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { CANVAS_DIMENSIONS } from "@hyperframes/parsers";
 
@@ -64411,8 +64510,8 @@ var FORMAT_PANEL_SIZE = { width: 208, height: 150 };
 function FormatInfoTooltip({ format }) {
   const [open, setOpen] = useState115(false);
   const [position, setPosition] = useState115(null);
-  const triggerRef = useRef126(null);
-  const timeoutRef = useRef126(void 0);
+  const triggerRef = useRef127(null);
+  const timeoutRef = useRef127(void 0);
   const panelId = useId6();
   const show = () => {
     clearTimeout(timeoutRef.current);
@@ -64646,7 +64745,7 @@ var RenderQueue = memo46(function RenderQueue2({
   onDismissActionError,
   compositionDimensions
 }) {
-  const listRef = useRef126(null);
+  const listRef = useRef127(null);
   useEffect99(() => {
     if (listRef.current) {
       listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
@@ -64755,7 +64854,7 @@ var RenderQueue = memo46(function RenderQueue2({
 });
 
 // src/components/panels/SlideshowPanel.tsx
-import { useState as useState117, useEffect as useEffect100, useCallback as useCallback128, useRef as useRef127 } from "react";
+import { useState as useState117, useEffect as useEffect100, useCallback as useCallback128, useRef as useRef128 } from "react";
 import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
@@ -65392,8 +65491,8 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   );
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { domEditSelection } = useDomEditSelectionContext();
-  const manifestRef = useRef127(manifest);
-  const notesCtrlRef = useRef127(makeSlideshowNotesController());
+  const manifestRef = useRef128(manifest);
+  const notesCtrlRef = useRef128(makeSlideshowNotesController());
   useEffect100(() => {
     if (!compHtml) {
       notesCtrlRef.current.flush();
@@ -66998,13 +67097,13 @@ async function applyColorGradingScopeUpdate({
 }
 
 // src/hooks/useInspectorSplitResize.ts
-import { useCallback as useCallback135, useRef as useRef128, useState as useState122 } from "react";
+import { useCallback as useCallback135, useRef as useRef129, useState as useState122 } from "react";
 var MIN_INSPECTOR_SPLIT_PERCENT = 20;
 var MAX_INSPECTOR_SPLIT_PERCENT = 75;
 function useInspectorSplitResize() {
   const [layersPanePercent, setLayersPanePercent] = useState122(40);
-  const splitContainerRef = useRef128(null);
-  const splitDragRef = useRef128(null);
+  const splitContainerRef = useRef129(null);
+  const splitDragRef = useRef129(null);
   const handleInspectorSplitResizeStart = useCallback135(
     (event) => {
       event.preventDefault();
@@ -67164,7 +67263,7 @@ function StudioRightPanel({
     handleInspectorSplitResizeMove,
     handleInspectorSplitResizeEnd
   } = useInspectorSplitResize();
-  const backgroundRemovalAbortRef = useRef129(null);
+  const backgroundRemovalAbortRef = useRef130(null);
   useEffect104(
     () => () => {
       backgroundRemovalAbortRef.current?.abort();
@@ -67533,7 +67632,7 @@ function StudioRightPanel({
 }
 
 // src/components/TimelineToolbar.tsx
-import { useEffect as useEffect106, useRef as useRef130 } from "react";
+import { useEffect as useEffect106, useRef as useRef131 } from "react";
 import { Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
 
 // src/hooks/useEnableKeyframes.ts
@@ -67985,7 +68084,7 @@ function resolveKeyframeToggleState(session, currentTime) {
 }
 function useKeyframeToggle(session) {
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const sessionRef = useRef130(session);
+  const sessionRef = useRef131(session);
   sessionRef.current = session;
   const onToggle = useEnableKeyframes(
     sessionRef
@@ -68277,14 +68376,14 @@ import { useState as useState130 } from "react";
 import { Copy as Copy2, Check as Check2 } from "@phosphor-icons/react";
 
 // src/hooks/useStoryboard.ts
-import { useCallback as useCallback139, useEffect as useEffect107, useRef as useRef131, useState as useState123 } from "react";
+import { useCallback as useCallback139, useEffect as useEffect107, useRef as useRef132, useState as useState123 } from "react";
 function useStoryboard(projectId) {
   const [data, setData] = useState123(null);
   const [loading, setLoading] = useState123(true);
   const [error, setError] = useState123(null);
   const [reloadKey, setReloadKey] = useState123(0);
-  const hasDataRef = useRef131(false);
-  const lastProjectRef = useRef131(null);
+  const hasDataRef = useRef132(false);
+  const lastProjectRef = useRef132(null);
   const reload = useCallback139(() => setReloadKey((k) => k + 1), []);
   useEffect107(() => {
     if (!projectId) return;
@@ -68318,7 +68417,7 @@ function useStoryboard(projectId) {
 }
 
 // src/hooks/useProjectSignaturePoll.ts
-import { useEffect as useEffect108, useRef as useRef132 } from "react";
+import { useEffect as useEffect108, useRef as useRef133 } from "react";
 var POLL_INTERVAL_MS = 2e3;
 async function fetchProjectSignature(projectId) {
   try {
@@ -68331,8 +68430,8 @@ async function fetchProjectSignature(projectId) {
   }
 }
 function useProjectSignaturePoll(projectId, currentSignature, onChange) {
-  const signatureRef = useRef132(currentSignature);
-  const onChangeRef = useRef132(onChange);
+  const signatureRef = useRef133(currentSignature);
+  const onChangeRef = useRef133(onChange);
   signatureRef.current = currentSignature;
   onChangeRef.current = onChange;
   useEffect108(() => {
@@ -68595,7 +68694,7 @@ function StoryboardScriptPanel({ script }) {
 }
 
 // src/components/storyboard/StoryboardSourceEditor.tsx
-import { useCallback as useCallback140, useEffect as useEffect110, useMemo as useMemo50, useRef as useRef133, useState as useState125 } from "react";
+import { useCallback as useCallback140, useEffect as useEffect110, useMemo as useMemo50, useRef as useRef134, useState as useState125 } from "react";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { jsx as jsx172, jsxs as jsxs144 } from "react/jsx-runtime";
@@ -68644,7 +68743,7 @@ function hardenLinks(node) {
 }
 function useMarkdownPreview(source) {
   const [debounced, setDebounced] = useState125(source);
-  const primed = useRef133(false);
+  const primed = useRef134(false);
   useEffect110(() => {
     if (!primed.current && source !== "") {
       primed.current = true;
@@ -69882,7 +69981,7 @@ function useTimelineAddAtPlayhead(addAsset, addComposition) {
 import { jsx as jsx179, jsxs as jsxs150 } from "react/jsx-runtime";
 function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
-  const initialUrlStateRef = useRef134(readStudioUrlStateFromWindow());
+  const initialUrlStateRef = useRef135(readStudioUrlStateFromWindow());
   const viewModeValue = useViewModeState();
   useEffect116(() => {
     if (resolving || waitingForServer) return;
@@ -69900,10 +69999,10 @@ function StudioApp() {
   const [refreshKey, setRefreshKey] = useState132(0);
   const [previewDocumentVersion, refreshPreviewDocumentVersion] = usePreviewDocumentVersion();
   const [blockPreview, setBlockPreview] = useState132(null);
-  const previewIframeRef = useRef134(null);
-  const activeCompPathRef = useRef134(activeCompPath);
+  const previewIframeRef = useRef135(null);
+  const activeCompPathRef = useRef135(activeCompPath);
   activeCompPathRef.current = activeCompPath;
-  const leftSidebarRef = useRef134(null);
+  const leftSidebarRef = useRef135(null);
   const renderQueue = useRenderQueue(projectId);
   const captionEditMode = useCaptionStore((s) => s.isEditMode);
   const captionHasSelection = useCaptionStore((s) => s.selectedSegmentIds.size > 0);
@@ -69923,10 +70022,10 @@ function StudioApp() {
     rightPanelTab: initialUrlStateRef.current.rightPanelTab
   });
   const editHistory = usePersistentEditHistory({ projectId });
-  const domEditSaveTimestampRef = useRef134(0);
-  const handleDomZIndexReorderCommitRef = useRef134(null);
-  const pendingTimelineEditPathRef = useRef134(/* @__PURE__ */ new Set());
-  const isGestureRecordingRef = useRef134(false);
+  const domEditSaveTimestampRef = useRef135(0);
+  const handleDomZIndexReorderCommitRef = useRef135(null);
+  const pendingTimelineEditPathRef = useRef135(/* @__PURE__ */ new Set());
+  const isGestureRecordingRef = useRef135(false);
   const reloadPreview = useCallback144(() => setRefreshKey((k) => k + 1), []);
   const fileManager = useFileManager({
     projectId,
@@ -69967,7 +70066,7 @@ function StudioApp() {
     reloadPreview: () => setRefreshKey((k) => k + 1),
     pendingTimelineEditPathRef
   });
-  const invalidateGsapCacheRef = useRef134(() => {
+  const invalidateGsapCacheRef = useRef135(() => {
   });
   const invalidateGsapCache = useCallback144(() => invalidateGsapCacheRef.current(), []);
   const timelineEditing = useTimelineEditing({
@@ -70027,16 +70126,16 @@ function StudioApp() {
     setRightCollapsed: panelLayout.setRightCollapsed,
     setRightPanelTab: panelLayout.setRightPanelTab
   });
-  const clearDomSelectionRef = useRef134(() => {
+  const clearDomSelectionRef = useRef135(() => {
   });
-  const domEditSelectionBridgeRef = useRef134(null);
-  const handleDomEditElementDeleteRef = useRef134(
+  const domEditSelectionBridgeRef = useRef135(null);
+  const handleDomEditElementDeleteRef = useRef135(
     async () => {
     }
   );
   const domEditDeleteBridge = (s) => handleDomEditElementDeleteRef.current(s);
-  const resetKeyframesRef = useRef134(() => false);
-  const deleteSelectedKeyframesRef = useRef134(() => {
+  const resetKeyframesRef = useRef135(() => false);
+  const deleteSelectedKeyframesRef = useRef135(() => {
   });
   const { handleCopy, handlePaste, handleCut } = useClipboard({
     projectId,
@@ -70078,7 +70177,7 @@ function StudioApp() {
     forceReloadSdkSession: sdkHandle.forceReload,
     onToggleRecording: () => handleToggleRecordingRef.current()
   });
-  const sidebarTabRef = useRef134({
+  const sidebarTabRef = useRef135({
     select: (t) => leftSidebarRef.current?.selectTab(t),
     get: () => leftSidebarRef.current?.getTab() ?? "compositions"
   });
@@ -70166,9 +70265,9 @@ function StudioApp() {
     resetErrors: resetConsoleErrors
   } = useConsoleErrorCapture(previewIframe);
   const dragOverlay = useGlobalFileDrop(timelineEditing.handleTimelineFileDrop);
-  const handleToggleRecordingRef = useRef134(() => {
+  const handleToggleRecordingRef = useRef135(() => {
   });
-  const domEditSessionRef = useRef134(domEditSession);
+  const domEditSessionRef = useRef135(domEditSession);
   domEditSessionRef.current = domEditSession;
   const { gestureState, gestureRecording, handleToggleRecording } = useGestureCommit({
     domEditSessionRef,
@@ -70178,7 +70277,7 @@ function StudioApp() {
   });
   handleToggleRecordingRef.current = handleToggleRecording;
   const recordingToggle = handleToggleRecording;
-  const canvasRectRef = useRef134(null);
+  const canvasRectRef = useRef135(null);
   useLayoutEffect6(() => {
     if (gestureState !== "recording" || !previewIframe) {
       canvasRectRef.current = null;
@@ -70410,11 +70509,11 @@ function StudioApp() {
 }
 
 // src/hooks/useElementPicker.ts
-import { useState as useState133, useCallback as useCallback145, useRef as useRef135 } from "react";
+import { useState as useState133, useCallback as useCallback145, useRef as useRef136 } from "react";
 function useElementPicker(iframeRef, options) {
   const [isPickMode, setIsPickMode] = useState133(false);
   const [pickedElement, setPickedElement] = useState133(null);
-  const activeOverrideRef = useRef135(null);
+  const activeOverrideRef = useRef136(null);
   const getActiveIframe = useCallback145(() => {
     return activeOverrideRef.current ?? iframeRef.current;
   }, [iframeRef]);
@@ -70488,7 +70587,7 @@ function useElementPicker(iframeRef, options) {
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   });
-  const optionsRef = useRef135(options);
+  const optionsRef = useRef136(options);
   optionsRef.current = options;
   const syncToSource = useCallback145(
     (elementId, selector, op) => {
@@ -70599,7 +70698,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const activeIframeRef = useRef135(null);
+  const activeIframeRef = useRef136(null);
   activeIframeRef.current = getActiveIframe();
   return {
     isPickMode,