hyperframes 0.8.64 → 0.8.66

package/dist/studio/index.js

@@ -3656,15 +3656,28 @@ function effectiveThumbnailMode(preferredMode, policy = studioThumbnailRuntimePo
 }
 
 // src/player/store/thumbnailSlice.ts
+var EVERY_COMPOSITION = "*";
+function revisionKey(path) {
+  return (path.split(/[?#]/)[0] ?? "").replace(/\\/g, "/").replace(/^\.?\//, "");
+}
+function thumbnailRevisionOf(revisions, compositionPath) {
+  return (revisions[EVERY_COMPOSITION] ?? 0) + (revisions[revisionKey(compositionPath)] ?? 0);
+}
 function createThumbnailSlice(set) {
   return {
     thumbnailMode: defaultThumbnailMode(readStudioUiPreferences().thumbnailMode),
-    thumbnailContentRevision: 0,
+    thumbnailRevisions: {},
     setThumbnailMode: (mode) => {
       writeStudioUiPreferences({ thumbnailMode: mode });
       set({ thumbnailMode: mode });
     },
-    bumpThumbnailContentRevision: () => set((state) => ({ thumbnailContentRevision: state.thumbnailContentRevision + 1 }))
+    bumpThumbnailRevisions: (compositions) => set(({ thumbnailRevisions }) => {
+      const next = { ...thumbnailRevisions };
+      for (const path of compositions?.map(revisionKey) ?? [EVERY_COMPOSITION]) {
+        next[path] = (next[path] ?? 0) + 1;
+      }
+      return { thumbnailRevisions: next };
+    })
   };
 }
 
@@ -4765,7 +4778,7 @@ import {
 } from "react";
 
 // src/player/components/useTimelineProviderState.tsx
-import { useRef as useRef31, useMemo as useMemo22, useCallback as useCallback21, useState as useState20 } from "react";
+import { useRef as useRef31, useMemo as useMemo22, useCallback as useCallback21, useState as useState21 } from "react";
 
 // src/hooks/useMusicBeatAnalysis.ts
 import { useEffect as useEffect10, useMemo as useMemo4, useRef as useRef10 } from "react";
@@ -6647,6 +6660,20 @@ function deriveTimelineTransitionSeams(elements) {
   }
   return seams;
 }
+function deriveTimelineTransitionSeamsByTrack(elements) {
+  const tracks = /* @__PURE__ */ new Map();
+  for (const element of elements) {
+    const track2 = tracks.get(element.track);
+    if (track2) track2.push(element);
+    else tracks.set(element.track, [element]);
+  }
+  const byTrack = /* @__PURE__ */ new Map();
+  for (const [track2, trackElements] of tracks) {
+    const seams = deriveTimelineTransitionSeams(trackElements);
+    if (seams.length > 0) byTrack.set(track2, seams);
+  }
+  return byTrack;
+}
 
 // src/player/components/timelineZones.ts
 function classifyZone(el) {
@@ -8673,9 +8700,6 @@ function resolveResizingElementIds(resizingClip) {
   if (resizingClip) return [resizingClip.element.key ?? resizingClip.element.id];
   return void 0;
 }
-function resolveRenderClipContent(rowVirtualizationActive, isScrolling, renderClipContent) {
-  return rowVirtualizationActive && isScrolling ? void 0 : renderClipContent;
-}
 function shouldIgnoreTimelinePointerDown(target) {
   return target instanceof Element && target.closest("button, input, select, a") !== null;
 }
@@ -13987,12 +14011,48 @@ function useTimelineScrollViewport(scrollRef, resyncShortcutHintOn) {
   return { viewport, showShortcutHint, setScrollRef, syncScrollViewport };
 }
 
+// src/player/components/timelineClipChildren.tsx
+import { useState as useState17 } from "react";
+import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+function resolveClipRenderContext(element, visibleTimeRange, interactive) {
+  if (interactive) return { priority: "interaction", rich: false };
+  const visible = element.start < visibleTimeRange.end && element.start + element.duration > visibleTimeRange.start;
+  return { priority: visible ? "visible" : "overscan", rich: false };
+}
+function ClipLintDot({ element }) {
+  const lint = usePlayerStore((s) => s.lintFindingsByElement.get(element.key ?? element.id));
+  if (!lint || lint.count === 0) return null;
+  return /* @__PURE__ */ jsx38(
+    "span",
+    {
+      className: "absolute w-1.5 h-1.5 rounded-full bg-amber-400",
+      style: { top: 7, right: 7 },
+      title: lint.messages.join("\n")
+    }
+  );
+}
+function ClipContentOnceShown({ hold, children }) {
+  const [shown2, setShown] = useState17(!hold);
+  if (!shown2 && !hold) setShown(true);
+  return shown2 ? children : null;
+}
+function renderClipChildren(element, clipStyle, renderClipContent, renderClipOverlay, context = { priority: "visible", rich: false }) {
+  return /* @__PURE__ */ jsxs26(Fragment7, { children: [
+    renderClipOverlay?.(element),
+    !renderClipContent && /* @__PURE__ */ jsx38(ClipLintDot, { element }),
+    renderClipContent && // borderRadius: inherit — the clip itself is overflow-visible (keyframe
+    // diamonds hang outside its bounds), so the thumbnail layer must clip
+    // itself to the clip's rounded corners or sharp corners poke out.
+    /* @__PURE__ */ jsx38("div", { className: "absolute inset-0 overflow-hidden", style: { borderRadius: "inherit" }, children: renderClipContent(element, clipStyle, context) })
+  ] });
+}
+
 // src/player/components/useResolvedTimelineEditCallbacks.ts
 import { useMemo as useMemo12 } from "react";
 
 // src/contexts/TimelineEditContext.tsx
 import { useContext as useContext6, useMemo as useMemo11 } from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var TimelineEditContext = createStableContext(
   "TimelineEditContext",
   null
@@ -14039,7 +14099,7 @@ function TimelineEditProvider({
       value.onTogglePropertyGroupKeyframe
     ]
   );
-  return /* @__PURE__ */ jsx38(TimelineEditContext.Provider, { value: memoized, children });
+  return /* @__PURE__ */ jsx39(TimelineEditContext.Provider, { value: memoized, children });
 }
 
 // src/player/components/useResolvedTimelineEditCallbacks.ts
@@ -14573,8 +14633,8 @@ function useTimelineGapHighlights(input) {
 }
 
 // src/player/components/TimelineRazorInteraction.tsx
-import { useCallback as useCallback16, useState as useState17 } from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { useCallback as useCallback16, useState as useState18 } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function useTimelineRazorInteraction({
   active,
   scrollRef,
@@ -14582,7 +14642,7 @@ function useTimelineRazorInteraction({
   pixelsPerSecond,
   onSplitAll
 }) {
-  const [razorGuideX, setRazorGuideX] = useState17(null);
+  const [razorGuideX, setRazorGuideX] = useState18(null);
   const updateRazorGuide = useCallback16(
     (event) => {
       const scroll = scrollRef.current;
@@ -14612,7 +14672,7 @@ function useTimelineRazorInteraction({
   return { razorGuideX, updateRazorGuide, clearRazorGuide, splitAllAtPointer };
 }
 function TimelineRazorGuideOverlay({ x }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       className: "absolute top-0 bottom-0 pointer-events-none z-10",
@@ -14749,9 +14809,9 @@ function getTimelinePreviewElement(element, resizingClip) {
 }
 
 // src/player/components/useTimelineShiftModifier.ts
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 function useTimelineShiftModifier() {
-  const [shiftHeld, setShiftHeld] = useState18(false);
+  const [shiftHeld, setShiftHeld] = useState19(false);
   useMountEffect(() => {
     const handleKey = (event) => event.key === "Shift" && setShiftHeld(event.type === "keydown");
     const handleBlur = () => setShiftHeld(false);
@@ -15658,7 +15718,7 @@ import {
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo21,
   useRef as useRef30,
-  useState as useState19
+  useState as useState20
 } from "react";
 
 // src/player/components/timelineFocusIdentity.ts
@@ -15791,7 +15851,7 @@ function useTimelineRowVirtualization({
   syncScrollViewport
 }) {
   const enabled = STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED;
-  const [domFocusedRowKey, setDomFocusedRowKey] = useState19();
+  const [domFocusedRowKey, setDomFocusedRowKey] = useState20();
   const onTimelineFocus = useCallback20((event) => {
     setDomFocusedRowKey(getFocusedTimelineRowKey(event.target));
   }, []);
@@ -15924,7 +15984,7 @@ function useTimelineLogicalFocus(input) {
 }
 
 // src/player/components/useTimelineProviderState.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function useTimelineProviderState({
   onSeek,
   onDrillDown,
@@ -15998,12 +16058,12 @@ function useTimelineProviderState({
   const containerRef = useRef31(null);
   const scrollRef = useRef31(null);
   const activeTool = usePlayerStore((s) => s.activeTool);
-  const [hoveredClip, setHoveredClip] = useState20(null);
+  const [hoveredClip, setHoveredClip] = useState21(null);
   const isDragging = useRef31(false);
   const shiftHeld = useTimelineShiftModifier();
-  const [showPopover, setShowPopover] = useState20(false);
-  const [kfContextMenu, setKfContextMenu] = useState20(null);
-  const [clipContextMenu, setClipContextMenu] = useState20(null);
+  const [showPopover, setShowPopover] = useState21(false);
+  const [kfContextMenu, setKfContextMenu] = useState21(null);
+  const [clipContextMenu, setClipContextMenu] = useState21(null);
   const setContainerRef = useCallback21((el) => {
     containerRef.current = el;
   }, []);
@@ -16377,10 +16437,10 @@ function useTimelineProviderState({
     onRazorSplit: editContext.onRazorSplit,
     onRazorSplitAll: editContext.onRazorSplitAll
   };
-  const timelineRenderClipContent = resolveRenderClipContent(
-    timelineFocus.rowVirtualizationActive,
-    viewport.isScrolling,
-    renderClipContent
+  const holdNewClipContent = timelineFocus.rowVirtualizationActive && viewport.isScrolling;
+  const timelineRenderClipContent = useMemo22(
+    () => renderClipContent && ((element, style, context) => /* @__PURE__ */ jsx41(ClipContentOnceShown, { hold: holdNewClipContent, children: renderClipContent(element, style, context) })),
+    [holdNewClipContent, renderClipContent]
   );
   const timelineMeta = buildTimelineMeta({
     emptyState: {
@@ -16432,7 +16492,7 @@ function useTimelineProviderState({
     },
     elementCount: timelineElements.length,
     labelColumnWidth: LABEL_COL_W,
-    razorGuide: activeTool === "razor" && razorGuideX !== null ? /* @__PURE__ */ jsx40(TimelineRazorGuideOverlay, { x: razorGuideX }) : null
+    razorGuide: activeTool === "razor" && razorGuideX !== null ? /* @__PURE__ */ jsx41(TimelineRazorGuideOverlay, { x: razorGuideX }) : null
   });
   const contextValue = {
     state: {
@@ -16455,18 +16515,18 @@ function useTimelineProviderState({
 }
 
 // src/player/components/TimelineProvider.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var TimelineContext = createContext3(null);
 function TimelineProvider({ children, ...props }) {
   const editContext = useTimelineEditContextValue();
   if (!editContext) {
-    return /* @__PURE__ */ jsx41(TimelineEditProvider, { value: props, children: /* @__PURE__ */ jsx41(TimelineProviderState, { ...props, children }) });
+    return /* @__PURE__ */ jsx42(TimelineEditProvider, { value: props, children: /* @__PURE__ */ jsx42(TimelineProviderState, { ...props, children }) });
   }
-  return /* @__PURE__ */ jsx41(TimelineProviderState, { ...props, children });
+  return /* @__PURE__ */ jsx42(TimelineProviderState, { ...props, children });
 }
 function TimelineProviderState({ children, ...props }) {
   const value = useTimelineProviderState(props);
-  return /* @__PURE__ */ jsx41(TimelineContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx42(TimelineContext.Provider, { value, children });
 }
 function useTimelineContext() {
   const value = useTimelineContextOptional();
@@ -16482,7 +16542,7 @@ import { memo as memo13 } from "react";
 
 // src/player/components/TimelineRuler.tsx
 import { memo as memo9 } from "react";
-import { Fragment as Fragment7, jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 var TimelineRuler = memo9(function TimelineRuler2({
   major,
   minor,
@@ -16502,8 +16562,8 @@ var TimelineRuler = memo9(function TimelineRuler2({
   const beatEntries = getTimelineBeatEntries(beatTimes, beatStrengths, renderTimeRange);
   const avgBeatInterval = beatTimes.length > 1 ? (beatTimes[beatTimes.length - 1] - beatTimes[0]) / (beatTimes.length - 1) : null;
   const showBeats = avgBeatInterval !== null && avgBeatInterval * pps >= 5;
-  return /* @__PURE__ */ jsxs26(Fragment7, { children: [
-    /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsxs27(Fragment8, { children: [
+    /* @__PURE__ */ jsx43(
       "svg",
       {
         className: "absolute pointer-events-none",
@@ -16513,7 +16573,7 @@ var TimelineRuler = memo9(function TimelineRuler2({
           const x = t * pps;
           const strength = Math.pow(Math.min(1, beatStrength ?? 0.5), 2.2);
           const opacity = 0.08 + strength * 0.62;
-          return /* @__PURE__ */ jsx42(
+          return /* @__PURE__ */ jsx43(
             "line",
             {
               "data-timeline-grid-cell": "beat",
@@ -16530,13 +16590,13 @@ var TimelineRuler = memo9(function TimelineRuler2({
         })
       }
     ),
-    /* @__PURE__ */ jsxs26(
+    /* @__PURE__ */ jsxs27(
       "div",
       {
         className: "sticky top-0 flex",
         style: { height: RULER_H, width: contentOrigin + trackContentWidth, zIndex: 70 },
         children: [
-          /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx43(
             "div",
             {
               className: "sticky left-0 z-12 shrink-0",
@@ -16547,7 +16607,7 @@ var TimelineRuler = memo9(function TimelineRuler2({
               }
             }
           ),
-          /* @__PURE__ */ jsxs26(
+          /* @__PURE__ */ jsxs27(
             "div",
             {
               className: "relative overflow-hidden",
@@ -16559,24 +16619,24 @@ var TimelineRuler = memo9(function TimelineRuler2({
                 background: theme.shellBackground
               },
               children: [
-                minor.map((t) => /* @__PURE__ */ jsx42(
+                minor.map((t) => /* @__PURE__ */ jsx43(
                   "div",
                   {
                     "data-timeline-grid-cell": "minor",
                     className: "absolute bottom-0",
                     style: { left: t * pps - 0.5 },
-                    children: /* @__PURE__ */ jsx42("div", { className: "w-px h-2", style: { background: theme.tickMinor } })
+                    children: /* @__PURE__ */ jsx43("div", { className: "w-px h-2", style: { background: theme.tickMinor } })
                   },
                   `m-${t}`
                 )),
-                major.map((t) => /* @__PURE__ */ jsxs26(
+                major.map((t) => /* @__PURE__ */ jsxs27(
                   "div",
                   {
                     "data-timeline-grid-cell": "major",
                     className: "absolute top-0",
                     style: { left: t * pps - 0.5 },
                     children: [
-                      /* @__PURE__ */ jsx42(
+                      /* @__PURE__ */ jsx43(
                         "span",
                         {
                           className: "absolute font-mono tabular-nums leading-none whitespace-nowrap",
@@ -16589,7 +16649,7 @@ var TimelineRuler = memo9(function TimelineRuler2({
                           children: timeDisplayMode === "frame" ? secondsToFrame(t) : formatTimelineTickLabel(t, effectiveDuration, majorTickInterval)
                         }
                       ),
-                      /* @__PURE__ */ jsx42("div", { className: "w-px", style: { height: RULER_H, background: theme.tickMajor } })
+                      /* @__PURE__ */ jsx43("div", { className: "w-px", style: { height: RULER_H, background: theme.tickMajor } })
                     ]
                   },
                   `M-${t}`
@@ -16604,11 +16664,11 @@ var TimelineRuler = memo9(function TimelineRuler2({
 });
 
 // src/player/components/TimelineRulerPart.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function TimelineRulerPart() {
   const { state } = useTimelineContext();
   const props = state.canvas;
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     TimelineRuler,
     {
       major: props.major,
@@ -16627,7 +16687,7 @@ function TimelineRulerPart() {
 }
 
 // src/player/components/PlayheadIndicator.tsx
-import { Fragment as Fragment8, jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
 function PlayheadIndicator({
   color = "var(--timeline-accent)",
   glowColor = "var(--timeline-playhead-glow)",
@@ -16637,8 +16697,8 @@ function PlayheadIndicator({
   const HEAD_W = PLAYHEAD_HEAD_W;
   const HEAD_H = 9;
   const HEAD_TOTAL_H = 1 + HEAD_H;
-  return /* @__PURE__ */ jsxs27(Fragment8, { children: [
-    /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs28(Fragment9, { children: [
+    /* @__PURE__ */ jsx45(
       "div",
       {
         "aria-hidden": "true",
@@ -16651,7 +16711,7 @@ function PlayheadIndicator({
         }
       }
     ),
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45(
       "div",
       {
         className: "absolute bottom-0",
@@ -16665,7 +16725,7 @@ function PlayheadIndicator({
         }
       }
     ),
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45(
       "div",
       {
         className: stickyHead ? "sticky" : "absolute",
@@ -16675,7 +16735,7 @@ function PlayheadIndicator({
           // Zero height keeps it from covering rows (sticky strip trick).
           height: stickyHead ? 0 : void 0
         },
-        children: /* @__PURE__ */ jsx44(
+        children: /* @__PURE__ */ jsx45(
           "div",
           {
             style: {
@@ -16707,7 +16767,7 @@ import { memo as memo10 } from "react";
 import {
   useEffect as useEffect26,
   useRef as useRef32,
-  useState as useState21
+  useState as useState22
 } from "react";
 import {
   HF_AUDIO_FADE_IN_ATTR,
@@ -16715,15 +16775,15 @@ import {
   clampFadesToDuration,
   formatFadeSeconds
 } from "@hyperframes/core/audio-fade";
-import { Fragment as Fragment9, jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 var HANDLE_SIZE = 10;
 var HANDLE_HIT = 16;
 var DRAG_THRESHOLD_PX = 2;
 function TimelineClipFades({ el, pps, widthPx, showHandles }) {
   const { onSetElementAttributeLive, onSetElementAttributeQuiet } = useTimelineEditContextOptional();
   const canEdit = Boolean(onSetElementAttributeLive && onSetElementAttributeQuiet);
-  const [draft, setDraft] = useState21(null);
-  const [dragging, setDragging] = useState21(null);
+  const [draft, setDraft] = useState22(null);
+  const [dragging, setDragging] = useState22(null);
   const authoredIn = el.fadeIn ?? 0;
   const authoredOut = el.fadeOut ?? 0;
   useEffect26(() => setDraft(null), [authoredIn, authoredOut]);
@@ -16829,8 +16889,8 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
     touchAction: "none",
     outline: "none"
   });
-  return /* @__PURE__ */ jsxs28(Fragment9, { children: [
-    (showIn || showOut) && /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(Fragment10, { children: [
+    (showIn || showOut) && /* @__PURE__ */ jsxs29(
       "svg",
       {
         "aria-hidden": "true",
@@ -16847,8 +16907,8 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
         viewBox: `0 0 ${Math.max(widthPx, 1)} 100`,
         preserveAspectRatio: "none",
         children: [
-          showIn && /* @__PURE__ */ jsxs28(Fragment9, { children: [
-            /* @__PURE__ */ jsx45(
+          showIn && /* @__PURE__ */ jsxs29(Fragment10, { children: [
+            /* @__PURE__ */ jsx46(
               "polygon",
               {
                 "data-testid": "clip-fade-in",
@@ -16857,7 +16917,7 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
                 fillOpacity: 0.35
               }
             ),
-            /* @__PURE__ */ jsx45(
+            /* @__PURE__ */ jsx46(
               "line",
               {
                 x1: 0,
@@ -16871,8 +16931,8 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
               }
             )
           ] }),
-          showOut && /* @__PURE__ */ jsxs28(Fragment9, { children: [
-            /* @__PURE__ */ jsx45(
+          showOut && /* @__PURE__ */ jsxs29(Fragment10, { children: [
+            /* @__PURE__ */ jsx46(
               "polygon",
               {
                 "data-testid": "clip-fade-out",
@@ -16881,7 +16941,7 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
                 fillOpacity: 0.35
               }
             ),
-            /* @__PURE__ */ jsx45(
+            /* @__PURE__ */ jsx46(
               "line",
               {
                 x1: widthPx - outPx,
@@ -16898,8 +16958,8 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
         ]
       }
     ),
-    canEdit && /* @__PURE__ */ jsxs28(Fragment9, { children: [
-      /* @__PURE__ */ jsx45(
+    canEdit && /* @__PURE__ */ jsxs29(Fragment10, { children: [
+      /* @__PURE__ */ jsx46(
         FadeHandle,
         {
           direction: "in",
@@ -16914,7 +16974,7 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
           onKeyDown: onHandleKeyDown
         }
       ),
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx46(
         FadeHandle,
         {
           direction: "out",
@@ -16945,7 +17005,7 @@ function FadeHandle({
   onKeyDown
 }) {
   const label = direction === "in" ? "Fade in" : "Fade out";
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "div",
     {
       role: "slider",
@@ -16965,12 +17025,12 @@ function FadeHandle({
       onKeyDown,
       onClick: (e) => e.stopPropagation(),
       onDoubleClick: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ jsx45(FadeDot, { active: dragging })
+      children: /* @__PURE__ */ jsx46(FadeDot, { active: dragging })
     }
   );
 }
 function FadeDot({ active }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "span",
     {
       "aria-hidden": "true",
@@ -16989,7 +17049,7 @@ function FadeDot({ active }) {
 }
 
 // src/player/components/TimelineClip.tsx
-import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
 var TimelineClip = memo10(function TimelineClip2({
   el,
   pps,
@@ -17061,7 +17121,7 @@ var TimelineClip = memo10(function TimelineClip2({
     textAlign: "left",
     transform: isDragging ? "translateY(-1px)" : void 0
   };
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "button",
     {
       type: "button",
@@ -17087,7 +17147,7 @@ var TimelineClip = memo10(function TimelineClip2({
       onDoubleClick,
       onContextMenu,
       children: [
-        showHandles && capabilities.canTrimStart && /* @__PURE__ */ jsx46(
+        showHandles && capabilities.canTrimStart && /* @__PURE__ */ jsx47(
           "div",
           {
             "aria-hidden": "true",
@@ -17101,7 +17161,7 @@ var TimelineClip = memo10(function TimelineClip2({
               cursor: "col-resize",
               zIndex: 4
             },
-            children: /* @__PURE__ */ jsx46(
+            children: /* @__PURE__ */ jsx47(
               "div",
               {
                 className: "timeline-clip__handle-bar",
@@ -17119,7 +17179,7 @@ var TimelineClip = memo10(function TimelineClip2({
             )
           }
         ),
-        showHandles && capabilities.canTrimEnd && /* @__PURE__ */ jsx46(
+        showHandles && capabilities.canTrimEnd && /* @__PURE__ */ jsx47(
           "div",
           {
             "aria-hidden": "true",
@@ -17133,7 +17193,7 @@ var TimelineClip = memo10(function TimelineClip2({
               cursor: "col-resize",
               zIndex: 4
             },
-            children: /* @__PURE__ */ jsx46(
+            children: /* @__PURE__ */ jsx47(
               "div",
               {
                 className: "timeline-clip__handle-bar",
@@ -17151,15 +17211,15 @@ var TimelineClip = memo10(function TimelineClip2({
             )
           }
         ),
-        showLabel && /* @__PURE__ */ jsx46("span", { className: "timeline-clip__label", children: displayLabel }),
-        showDefaultText && /* @__PURE__ */ jsxs29("span", { className: "timeline-clip__timecode", children: [
+        showLabel && /* @__PURE__ */ jsx47("span", { className: "timeline-clip__label", children: displayLabel }),
+        showDefaultText && /* @__PURE__ */ jsxs30("span", { className: "timeline-clip__timecode", children: [
           startLabel,
           "-",
           endLabel,
           "s"
         ] }),
         children,
-        (isAudioClip || el.hasAudio) && !isGestureActor && /* @__PURE__ */ jsx46(
+        (isAudioClip || el.hasAudio) && !isGestureActor && /* @__PURE__ */ jsx47(
           TimelineClipFades,
           {
             el,
@@ -17174,7 +17234,7 @@ var TimelineClip = memo10(function TimelineClip2({
 });
 
 // src/player/components/TimelineCompactDiamonds.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function TimelineCompactDiamonds({
   element,
   elementId: elementId2,
@@ -17195,7 +17255,7 @@ function TimelineCompactDiamonds({
   suppressClickRef
 }) {
   const width = Math.max(element.duration * pixelsPerSecond, 4);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       className: "absolute pointer-events-none",
@@ -17206,7 +17266,7 @@ function TimelineCompactDiamonds({
         height: rowHeight - 2 * CLIP_Y,
         zIndex: isSelected ? 11 : 6
       },
-      children: /* @__PURE__ */ jsx47(
+      children: /* @__PURE__ */ jsx48(
         TimelineClipDiamonds,
         {
           keyframesData,
@@ -17243,7 +17303,7 @@ import {
   useEffect as useEffect27,
   useMemo as useMemo23,
   useRef as useRef37,
-  useState as useState26
+  useState as useState27
 } from "react";
 import {
   sampleAutomationLane as sampleAutomationLane5
@@ -17378,7 +17438,7 @@ function withLane(automation, lane) {
 }
 
 // src/player/components/useAutomationLaneGestures.ts
-import { useCallback as useCallback25, useRef as useRef36, useState as useState25 } from "react";
+import { useCallback as useCallback25, useRef as useRef36, useState as useState26 } from "react";
 
 // src/player/components/automationLaneSelection.ts
 import {
@@ -17443,7 +17503,7 @@ function capturePointer(e) {
 }
 
 // src/player/components/useAutomationEdgeStretch.ts
-import { useCallback as useCallback22, useRef as useRef33, useState as useState22 } from "react";
+import { useCallback as useCallback22, useRef as useRef33, useState as useState23 } from "react";
 var EDGE_GRAB_PX = 8;
 var EDGE_DRAG_PX = 3;
 var MIN_SELECTION_SEC = 0.02;
@@ -17468,9 +17528,9 @@ function useAutomationEdgeStretch({
   onRangeClear,
   onHint
 }) {
-  const [drag, setDrag] = useState22(null);
+  const [drag, setDrag] = useState23(null);
   const crossed = useRef33(false);
-  const [hover, setHover] = useState22(false);
+  const [hover, setHover] = useState23(false);
   const edgeAt = useCallback22(
     (clientX) => {
       if (!rangeSelection) return null;
@@ -17574,7 +17634,7 @@ function useAutomationEdgeStretch({
 }
 
 // src/player/components/useAutomationRangeDrag.ts
-import { useCallback as useCallback23, useRef as useRef34, useState as useState23 } from "react";
+import { useCallback as useCallback23, useRef as useRef34, useState as useState24 } from "react";
 
 // src/player/components/automationLaneDragMath.ts
 var SNAP_SEC = 0.04;
@@ -17692,7 +17752,7 @@ function useAutomationRangeDrag({
   onRangeSelect,
   onRangeClear
 }) {
-  const [box, setBox] = useState23(null);
+  const [box, setBox] = useState24(null);
   const crossed = useRef34(false);
   const arm = useCallback23(
     (e) => {
@@ -17735,7 +17795,7 @@ function useAutomationRangeDrag({
 }
 
 // src/player/components/useAutomationSegmentDrag.ts
-import { useCallback as useCallback24, useRef as useRef35, useState as useState24 } from "react";
+import { useCallback as useCallback24, useRef as useRef35, useState as useState25 } from "react";
 import {
   sampleAutomationLane as sampleAutomationLane3
 } from "@hyperframes/core/audio-automation";
@@ -17753,8 +17813,8 @@ function useAutomationSegmentDrag({
   readOnly,
   onHint
 }) {
-  const [dragIndex, setDragIndex] = useState24(null);
-  const [hoverIndex, setHoverIndex] = useState24(null);
+  const [dragIndex, setDragIndex] = useState25(null);
+  const [hoverIndex, setHoverIndex] = useState25(null);
   const snapshot3 = useRef35(null);
   const hitIndex = useCallback24(
     (clientX, clientY) => {
@@ -17831,9 +17891,9 @@ function useAutomationLaneGestures({
   duration,
   rangeSelection
 }) {
-  const [dragIndex, setDragIndex] = useState25(null);
-  const [curveIndex, setCurveIndex] = useState25(null);
-  const [hint, setHint] = useState25(null);
+  const [dragIndex, setDragIndex] = useState26(null);
+  const [curveIndex, setCurveIndex] = useState26(null);
+  const [hint, setHint] = useState26(null);
   const stretch = useAutomationEdgeStretch({
     getBox,
     lane,
@@ -17858,7 +17918,7 @@ function useAutomationLaneGestures({
   });
   const dragOrigin = useRef36(null);
   const groupDrag = useRef36(null);
-  const [editing, setEditing] = useState25(null);
+  const [editing, setEditing] = useState26(null);
   const rangeDrag = useAutomationRangeDrag({
     pointAt,
     xOf,
@@ -18191,7 +18251,7 @@ function useAutomationLaneGestures({
 }
 
 // src/player/components/AutomationValueInput.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 function AutomationValueInput({
   text,
   leftPx,
@@ -18200,7 +18260,7 @@ function AutomationValueInput({
   onCommit,
   onCancel
 }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "input",
     {
       className: "hf-automation-value pointer-events-auto absolute rounded-[3px] border border-panel-border-input bg-panel-bg-2 px-1 font-mono text-[9px] text-panel-text-1",
@@ -18272,7 +18332,7 @@ function generateShape(input) {
 }
 
 // src/player/components/AutomationSelectionMenu.tsx
-import { jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
 var AutomationSelectionMenu = memo11(function AutomationSelectionMenu2({
   x,
   y,
@@ -18289,14 +18349,14 @@ var AutomationSelectionMenu = memo11(function AutomationSelectionMenu2({
   const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
   const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
   return createPortal2(
-    /* @__PURE__ */ jsxs30(
+    /* @__PURE__ */ jsxs31(
       "div",
       {
         ref: menuRef,
         className: "hf-automation-menu fixed z-200 min-w-[140px] rounded-sm border border-panel-border-input bg-panel-bg-2 py-1 shadow-lg",
         style: { left: adjustedX, top: adjustedY },
         children: [
-          AUTOMATION_SHAPES.map((shape) => /* @__PURE__ */ jsx49(
+          AUTOMATION_SHAPES.map((shape) => /* @__PURE__ */ jsx50(
             "button",
             {
               type: "button",
@@ -18309,8 +18369,8 @@ var AutomationSelectionMenu = memo11(function AutomationSelectionMenu2({
             },
             shape.id
           )),
-          /* @__PURE__ */ jsx49("div", { className: "my-1 border-t border-panel-border-input" }),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50("div", { className: "my-1 border-t border-panel-border-input" }),
+          /* @__PURE__ */ jsx50(
             "button",
             {
               type: "button",
@@ -18370,7 +18430,7 @@ function simplifyPoints(points, range, epsilon = 0.02) {
 }
 
 // src/player/components/AutomationEnvelopePaths.tsx
-import { Fragment as Fragment10, jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
 function AutomationEnvelopePaths({
   path,
   lane,
@@ -18381,8 +18441,8 @@ function AutomationEnvelopePaths({
   yOf
 }) {
   const activePath = activeSegment === null ? null : envelopeSegmentPath({ lane, range, index: activeSegment, xOf, yOf });
-  return /* @__PURE__ */ jsxs31(Fragment10, { children: [
-    /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs32(Fragment11, { children: [
+    /* @__PURE__ */ jsx51(
       "path",
       {
         "data-automation-envelope": "",
@@ -18393,7 +18453,7 @@ function AutomationEnvelopePaths({
         opacity: lane.points.length === 0 ? 0.35 : 0.95
       }
     ),
-    activePath ? /* @__PURE__ */ jsx50(
+    activePath ? /* @__PURE__ */ jsx51(
       "path",
       {
         "data-automation-segment-active": activeSegment ?? void 0,
@@ -18410,7 +18470,7 @@ function AutomationEnvelopePaths({
 }
 
 // src/player/components/TimelineAutomationLane.tsx
-import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
 var POINT_R = 4.9;
 var LANE_BORDER = defaultTimelineTheme.rowBorder;
 function pointInBox(point, box) {
@@ -18437,7 +18497,7 @@ function ReadOnlyNote({
   widthPx
 }) {
   if (!readOnly || !note || !hovered || hasRange) return null;
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     "div",
     {
       "data-automation-readonly-note": "",
@@ -18479,7 +18539,7 @@ function TimelineAutomationLane({
 }) {
   const stored = laneFor(automation, target);
   const svgRef = useRef37(null);
-  const [draft, setDraft] = useState26(
+  const [draft, setDraft] = useState27(
     null
   );
   const lane = useMemo23(
@@ -18569,8 +18629,8 @@ function TimelineAutomationLane({
     },
     [lane, commitPoints, readOnly]
   );
-  const [menuAt, setMenuAt] = useState26(null);
-  const [hovered, setHovered] = useState26(false);
+  const [menuAt, setMenuAt] = useState27(null);
+  const [hovered, setHovered] = useState27(false);
   const insertShape = useCallback26(
     (shape) => {
       if (!rangeSelection) return;
@@ -18606,14 +18666,14 @@ function TimelineAutomationLane({
     [readOnly, rangeSelection, pointAt]
   );
   const currentValue = lane.points.length > 0 && playheadSec !== null ? sampleAutomationLane5(lane, playheadSec, range.scale) : null;
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       className: "hf-automation-lane pointer-events-none absolute",
       style: { top: topPx, left: 0, right: 0, height: h },
       "data-automation-lane": target,
       children: [
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(
           "div",
           {
             "data-automation-lane-border": "",
@@ -18621,7 +18681,7 @@ function TimelineAutomationLane({
             style: { top: 0, left: 0, right: 0, height: 1, background: LANE_BORDER, zIndex: 1 }
           }
         ),
-        /* @__PURE__ */ jsxs32(
+        /* @__PURE__ */ jsxs33(
           "svg",
           {
             ref: svgRef,
@@ -18656,8 +18716,8 @@ function TimelineAutomationLane({
             role: "group",
             "aria-label": `${range.label} automation`,
             children: [
-              /* @__PURE__ */ jsx51("title", { children: laneTitle(readOnly) }),
-              /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx52("title", { children: laneTitle(readOnly) }),
+              /* @__PURE__ */ jsx52(
                 "line",
                 {
                   x1: PAD_X,
@@ -18668,7 +18728,7 @@ function TimelineAutomationLane({
                   strokeDasharray: "3 4"
                 }
               ),
-              rangeSelection ? /* @__PURE__ */ jsx51(
+              rangeSelection ? /* @__PURE__ */ jsx52(
                 "rect",
                 {
                   "data-automation-selection": "",
@@ -18683,7 +18743,7 @@ function TimelineAutomationLane({
                   pointerEvents: "none"
                 }
               ) : null,
-              /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx52(
                 AutomationEnvelopePaths,
                 {
                   path,
@@ -18698,7 +18758,7 @@ function TimelineAutomationLane({
               lane.points.map((p, i) => {
                 const inRange = pointInBox(p, rangeSelection);
                 const { radius, stroke, strokeWidth } = pointCircleStyle(inRange, i === dragIndex);
-                return /* @__PURE__ */ jsx51(
+                return /* @__PURE__ */ jsx52(
                   "circle",
                   {
                     "data-automation-point": i,
@@ -18727,7 +18787,7 @@ function TimelineAutomationLane({
                   `${i}-${p.t}`
                 );
               }),
-              playheadSec !== null && currentValue !== null ? /* @__PURE__ */ jsx51(
+              playheadSec !== null && currentValue !== null ? /* @__PURE__ */ jsx52(
                 "circle",
                 {
                   "data-automation-playhead": "",
@@ -18742,7 +18802,7 @@ function TimelineAutomationLane({
             ]
           }
         ),
-        editing ? /* @__PURE__ */ jsx51(
+        editing ? /* @__PURE__ */ jsx52(
           AutomationValueInput,
           {
             text: editing.text,
@@ -18753,7 +18813,7 @@ function TimelineAutomationLane({
             onCancel: gestures.cancelEdit
           }
         ) : null,
-        hint ? /* @__PURE__ */ jsx51(
+        hint ? /* @__PURE__ */ jsx52(
           "div",
           {
             className: "hf-automation-hint pointer-events-none absolute rounded-[3px] bg-[var(--timeline-overlay-bg)] px-1 py-0.5 font-mono text-[9px] text-[var(--timeline-text-solid)]",
@@ -18761,7 +18821,7 @@ function TimelineAutomationLane({
             children: hint
           }
         ) : null,
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(
           ReadOnlyNote,
           {
             readOnly,
@@ -18772,7 +18832,7 @@ function TimelineAutomationLane({
             widthPx
           }
         ),
-        menuAt && rangeSelection ? /* @__PURE__ */ jsx51(
+        menuAt && rangeSelection ? /* @__PURE__ */ jsx52(
           AutomationSelectionMenu,
           {
             x: menuAt.x,
@@ -18789,7 +18849,7 @@ function TimelineAutomationLane({
 }
 
 // src/player/components/TimelineAutomationLaneSlot.tsx
-import { Fragment as Fragment11, jsx as jsx52 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx53 } from "react/jsx-runtime";
 function ClipAutomationLanes({
   element,
   rows,
@@ -18814,10 +18874,10 @@ function ClipAutomationLanes({
   }, [bound]);
   if (rows.length === 0) return null;
   const inClip = currentTime >= element.start && currentTime <= element.start + element.duration;
-  return /* @__PURE__ */ jsx52(Fragment11, { children: rows.map(({ lane, rowIndex }) => {
+  return /* @__PURE__ */ jsx53(Fragment12, { children: rows.map(({ lane, rowIndex }) => {
     const range = resolveAutomationRange3(lane.target, bound.chain ?? void 0);
     if (!range) return null;
-    return /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsx53(
       TimelineAutomationLane,
       {
         duration: element.duration,
@@ -18870,7 +18930,7 @@ function TimelineAutomationLaneSlot({
     }
   });
   const top = topOffset ?? getTimelineLaneTop(laneCount);
-  return /* @__PURE__ */ jsx52(Fragment11, { children: clips.map((element) => /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(Fragment12, { children: clips.map((element) => /* @__PURE__ */ jsx53(
     ClipAutomationLanes,
     {
       element,
@@ -19410,10 +19470,10 @@ import { classifyAudioName as classifyAudioName2 } from "@hyperframes/core/audio
 import { Eye as Eye2, EyeSlash } from "@phosphor-icons/react";
 
 // src/player/components/TrackClipCount.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function TrackClipCount({ clipCount }) {
   if (clipCount < 2) return null;
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     "span",
     {
       "aria-label": `${clipCount} clips`,
@@ -19437,13 +19497,13 @@ function trackDisplaySuffix(displayNumber) {
 }
 
 // src/player/components/TimelineTrackPlainHeader.tsx
-import { Fragment as Fragment12, jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
 function visibilityButtonLabel(hidden, suffix) {
   return hidden ? `Show track${suffix}` : `Hide track${suffix}`;
 }
 function visibilityButtonIcon(hidden) {
   const Icon = hidden ? EyeSlash : Eye2;
-  return /* @__PURE__ */ jsx54(Icon, { size: 14, weight: "bold", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx55(Icon, { size: 14, weight: "bold", "aria-hidden": "true" });
 }
 function VisibilityButton({
   hidden,
@@ -19452,10 +19512,10 @@ function VisibilityButton({
   visible,
   onToggle
 }) {
-  if (!visible) return /* @__PURE__ */ jsx54("span", { "aria-hidden": "true", className: "h-6 w-6 shrink-0" });
+  if (!visible) return /* @__PURE__ */ jsx55("span", { "aria-hidden": "true", className: "h-6 w-6 shrink-0" });
   const suffix = trackDisplaySuffix(trackDisplayNumber2);
   const label = visibilityButtonLabel(hidden, suffix);
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     "button",
     {
       type: "button",
@@ -19482,8 +19542,8 @@ function PlainTrackHeader({
   onToggleTrackHidden,
   trailing
 }) {
-  return /* @__PURE__ */ jsx54(Fragment12, { children: /* @__PURE__ */ jsxs33("div", { className: "flex min-w-0 items-center gap-1", children: [
-    isAudioTrack && /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(Fragment13, { children: /* @__PURE__ */ jsxs34("div", { className: "flex min-w-0 items-center gap-1", children: [
+    isAudioTrack && /* @__PURE__ */ jsx55(
       Music,
       {
         size: 12,
@@ -19492,10 +19552,10 @@ function PlainTrackHeader({
         className: "text-[var(--timeline-text-faint)]"
       }
     ),
-    showTrackLabel && /* @__PURE__ */ jsx54("span", { title: trackLabel, className: "min-w-0 truncate text-[11px] leading-tight", children: trackLabel }),
-    showTrackLabel && /* @__PURE__ */ jsx54(TrackClipCount, { clipCount }),
-    /* @__PURE__ */ jsxs33("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [
-      /* @__PURE__ */ jsx54(
+    showTrackLabel && /* @__PURE__ */ jsx55("span", { title: trackLabel, className: "min-w-0 truncate text-[11px] leading-tight", children: trackLabel }),
+    showTrackLabel && /* @__PURE__ */ jsx55(TrackClipCount, { clipCount }),
+    /* @__PURE__ */ jsxs34("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [
+      /* @__PURE__ */ jsx55(
         VisibilityButton,
         {
           hidden: isTrackHidden,
@@ -19612,7 +19672,7 @@ function carverAgainst(doc, id) {
 }
 
 // src/player/components/TimelineFxButton.tsx
-import { useEffect as useEffect32, useRef as useRef43, useState as useState27 } from "react";
+import { useEffect as useEffect32, useRef as useRef43, useState as useState28 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import {
   enabledAudioFxNodes,
@@ -19630,7 +19690,7 @@ import {
 } from "@hyperframes/core/audio-fx-presets";
 import { PRESET_PROBLEM } from "@hyperframes/core/audio-fx-copy";
 import { useRef as useRef39 } from "react";
-import { jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
 var FAMILY_LABEL = {
   voice: "Voice",
   repair: "Fix",
@@ -19650,15 +19710,15 @@ function FxPresetMenu({
     onAuditionTracked?.(id);
   };
   const families = trackKind === "music" || trackKind === "sfx" ? HF_AUDIO_FX_PRESET_FAMILIES.filter((f) => f !== "voice") : HF_AUDIO_FX_PRESET_FAMILIES;
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     "div",
     {
       className: "hf-fx-preset-menu space-y-1.5 rounded-[4px] border border-panel-border-input p-1.5",
       onMouseLeave: onAudition ? () => onAudition(null) : void 0,
       onBlur: onAudition ? () => onAudition(null) : void 0,
-      children: families.map((family) => /* @__PURE__ */ jsxs34("div", { className: "hf-fx-preset-group space-y-0.5", children: [
-        /* @__PURE__ */ jsx55("span", { className: "hf-fx-preset-group-label block font-mono text-[9px] uppercase tracking-wide text-panel-text-2", children: FAMILY_LABEL[family] }),
-        audioFxPresetsByFamily(family).map((preset) => /* @__PURE__ */ jsxs34(
+      children: families.map((family) => /* @__PURE__ */ jsxs35("div", { className: "hf-fx-preset-group space-y-0.5", children: [
+        /* @__PURE__ */ jsx56("span", { className: "hf-fx-preset-group-label block font-mono text-[9px] uppercase tracking-wide text-panel-text-2", children: FAMILY_LABEL[family] }),
+        audioFxPresetsByFamily(family).map((preset) => /* @__PURE__ */ jsxs35(
           "button",
           {
             type: "button",
@@ -19674,21 +19734,21 @@ function FxPresetMenu({
               onAudition?.(preset.id);
             },
             children: [
-              /* @__PURE__ */ jsx55("span", { className: "hf-fx-preset-problem block truncate text-[10px]", children: PRESET_PROBLEM[preset.id] ?? preset.description }),
-              /* @__PURE__ */ jsxs34("span", { className: "block truncate font-mono text-[9px] text-panel-text-2", children: [
-                /* @__PURE__ */ jsx55("span", { className: "hf-fx-preset-name", children: preset.label }),
-                /* @__PURE__ */ jsxs34("span", { className: "hf-fx-preset-count", children: [
+              /* @__PURE__ */ jsx56("span", { className: "hf-fx-preset-problem block truncate text-[10px]", children: PRESET_PROBLEM[preset.id] ?? preset.description }),
+              /* @__PURE__ */ jsxs35("span", { className: "block truncate font-mono text-[9px] text-panel-text-2", children: [
+                /* @__PURE__ */ jsx56("span", { className: "hf-fx-preset-name", children: preset.label }),
+                /* @__PURE__ */ jsxs35("span", { className: "hf-fx-preset-count", children: [
                   " \xB7 ",
                   preset.nodes.length,
                   " effect",
                   preset.nodes.length === 1 ? "" : "s"
                 ] })
               ] }),
-              onAudition ? /* @__PURE__ */ jsxs34("span", { className: "hf-fx-preset-wave", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx55("span", {}),
-                /* @__PURE__ */ jsx55("span", {}),
-                /* @__PURE__ */ jsx55("span", {}),
-                /* @__PURE__ */ jsx55("span", {})
+              onAudition ? /* @__PURE__ */ jsxs35("span", { className: "hf-fx-preset-wave", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx56("span", {}),
+                /* @__PURE__ */ jsx56("span", {}),
+                /* @__PURE__ */ jsx56("span", {}),
+                /* @__PURE__ */ jsx56("span", {})
               ] }) : null
             ]
           },
@@ -19852,7 +19912,7 @@ function useFxAudition(chain, onChainPreview, onAuditionTransport) {
 }
 
 // src/components/editor/TimelineFxPopover.tsx
-import { jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs36 } from "react/jsx-runtime";
 var POPOVER_WIDTH = 260;
 var VIEWPORT_MARGIN4 = 8;
 var MIN_POPOVER_HEIGHT = 160;
@@ -19921,7 +19981,7 @@ function TimelineFxPopover({
     audition(null);
     onClose();
   };
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       ref: rootRef,
@@ -19932,7 +19992,7 @@ function TimelineFxPopover({
       onKeyDown,
       onPointerDown: (event) => event.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsx56("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx56(
+        /* @__PURE__ */ jsx57("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx57(
           FxPresetMenu,
           {
             trackKind,
@@ -19941,8 +20001,8 @@ function TimelineFxPopover({
             onAuditionTracked: (id) => trackPresetAuditioned(id, { trackKind })
           }
         ) }),
-        /* @__PURE__ */ jsxs35("div", { className: "mt-2 flex shrink-0 items-center justify-between border-t border-white/10 pt-2 text-[10px] text-white/55", children: [
-          /* @__PURE__ */ jsx56(
+        /* @__PURE__ */ jsxs36("div", { className: "mt-2 flex shrink-0 items-center justify-between border-t border-white/10 pt-2 text-[10px] text-white/55", children: [
+          /* @__PURE__ */ jsx57(
             "button",
             {
               type: "button",
@@ -19954,7 +20014,7 @@ function TimelineFxPopover({
               children: "+ effect"
             }
           ),
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx57(
             "button",
             {
               type: "button",
@@ -20028,7 +20088,7 @@ function useAuditionTransport() {
 }
 
 // src/player/components/TimelineFxButton.tsx
-import { jsx as jsx57, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
 var GROUP_DIALOG_SIZE = { width: 256, height: 160 };
 function groupDialogPosition(anchorRect) {
   const { left, top } = resolveFloatingPanelPosition(
@@ -20047,11 +20107,11 @@ function GroupNameDialog({
   onCancel,
   onConfirm
 }) {
-  const [label, setLabel] = useState27(defaultLabel ?? "Voiceover");
+  const [label, setLabel] = useState28(defaultLabel ?? "Voiceover");
   const inputRef = useRef43(null);
   useEffect32(() => inputRef.current?.select(), []);
   if (refusal) {
-    return /* @__PURE__ */ jsx57(
+    return /* @__PURE__ */ jsx58(
       "div",
       {
         role: "dialog",
@@ -20064,12 +20124,12 @@ function GroupNameDialog({
           event.stopPropagation();
           onCancel();
         },
-        children: /* @__PURE__ */ jsx57("p", { children: refusal })
+        children: /* @__PURE__ */ jsx58("p", { children: refusal })
       }
     );
   }
   const confirm = () => onConfirm(label.trim() || defaultLabel || "Voiceover");
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       role: "dialog",
@@ -20085,8 +20145,8 @@ function GroupNameDialog({
         if (event.key === "Enter") confirm();
       },
       children: [
-        /* @__PURE__ */ jsx57("p", { className: "mb-1.5 font-medium text-[var(--timeline-text-solid)]", children: "Name this group" }),
-        /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx58("p", { className: "mb-1.5 font-medium text-[var(--timeline-text-solid)]", children: "Name this group" }),
+        /* @__PURE__ */ jsx58(
           "input",
           {
             ref: inputRef,
@@ -20097,13 +20157,13 @@ function GroupNameDialog({
             className: "w-full rounded-sm border border-[var(--timeline-border-strong)] bg-[var(--timeline-input-bg)] px-1.5 py-1 text-[11px] text-[var(--timeline-text-solid)] outline-hidden focus:border-[var(--timeline-accent)]"
           }
         ),
-        /* @__PURE__ */ jsxs36("p", { className: "mt-2 leading-snug", children: [
+        /* @__PURE__ */ jsxs37("p", { className: "mt-2 leading-snug", children: [
           "Effects you add to the group apply to ",
           clipCount === 2 ? "both" : `all ${clipCount}`,
           " clips at once, and they share one volume."
         ] }),
-        /* @__PURE__ */ jsxs36("div", { className: "mt-2.5 flex justify-end gap-1.5", children: [
-          /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsxs37("div", { className: "mt-2.5 flex justify-end gap-1.5", children: [
+          /* @__PURE__ */ jsx58(
             "button",
             {
               type: "button",
@@ -20112,7 +20172,7 @@ function GroupNameDialog({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsx58(
             "button",
             {
               type: "button",
@@ -20135,9 +20195,9 @@ function parseFxChainOrEmpty(raw) {
   }
 }
 function TimelineFxButton(props) {
-  const [open, setOpen] = useState27(false);
+  const [open, setOpen] = useState28(false);
   const buttonRef = useRef43(null);
-  const [anchorRect, setAnchorRect] = useState27(null);
+  const [anchorRect, setAnchorRect] = useState28(null);
   const transport = useAuditionTransport();
   const borrowedMute = useRef43(false);
   const openAt = () => {
@@ -20145,8 +20205,8 @@ function TimelineFxButton(props) {
     setOpen(true);
   };
   if (props.variant === "group-pointer") {
-    return /* @__PURE__ */ jsxs36("div", { className: "relative shrink-0", children: [
-      /* @__PURE__ */ jsx57(
+    return /* @__PURE__ */ jsxs37("div", { className: "relative shrink-0", children: [
+      /* @__PURE__ */ jsx58(
         "button",
         {
           type: "button",
@@ -20164,7 +20224,7 @@ function TimelineFxButton(props) {
         }
       ),
       open && anchorRect && createPortal3(
-        /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx58(
           GroupNameDialog,
           {
             refusal: props.refusal,
@@ -20184,8 +20244,8 @@ function TimelineFxButton(props) {
   }
   const chain = parseFxChainOrEmpty(props.fxChainRaw);
   const nodeCount = enabledAudioFxNodes(chain).length;
-  return /* @__PURE__ */ jsxs36("div", { className: "relative shrink-0", children: [
-    /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37("div", { className: "relative shrink-0", children: [
+    /* @__PURE__ */ jsxs37(
       "button",
       {
         type: "button",
@@ -20206,7 +20266,7 @@ function TimelineFxButton(props) {
       }
     ),
     open && anchorRect && createPortal3(
-      /* @__PURE__ */ jsx57(
+      /* @__PURE__ */ jsx58(
         TimelineFxPopover,
         {
           anchorRect,
@@ -20230,14 +20290,14 @@ function TimelineFxButton(props) {
 }
 
 // src/player/components/LayerDisclosureRow.tsx
-import { jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
 function LaneToggleButton({
   name,
   isExpanded,
   lanesId,
   onToggle
 }) {
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     "button",
     {
       type: "button",
@@ -20252,7 +20312,7 @@ function LaneToggleButton({
         event.stopPropagation();
         onToggle();
       },
-      children: /* @__PURE__ */ jsx58("span", { "aria-hidden": "true", children: "\u223F" })
+      children: /* @__PURE__ */ jsx59("span", { "aria-hidden": "true", children: "\u223F" })
     }
   );
 }
@@ -20266,7 +20326,7 @@ function LayerDisclosureRow({
   onToggleClipExpanded,
   children
 }) {
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       className: "absolute left-0 top-0 flex items-center gap-1.5 overflow-hidden px-1.5 text-[11px]",
@@ -20277,7 +20337,7 @@ function LayerDisclosureRow({
         background: gutterBackground
       },
       children: [
-        /* @__PURE__ */ jsx58(
+        /* @__PURE__ */ jsx59(
           "span",
           {
             "aria-hidden": "true",
@@ -20285,10 +20345,10 @@ function LayerDisclosureRow({
             children: "\u25C7"
           }
         ),
-        /* @__PURE__ */ jsx58("span", { title: name, className: "min-w-0 flex-1 truncate font-medium leading-tight", children: name }),
-        /* @__PURE__ */ jsx58(TrackClipCount, { clipCount }),
+        /* @__PURE__ */ jsx59("span", { title: name, className: "min-w-0 flex-1 truncate font-medium leading-tight", children: name }),
+        /* @__PURE__ */ jsx59(TrackClipCount, { clipCount }),
         children,
-        /* @__PURE__ */ jsx58(
+        /* @__PURE__ */ jsx59(
           LaneToggleButton,
           {
             name,
@@ -20438,7 +20498,7 @@ function resolveLaneHeaderState(lane, currentTime, clipPercentage) {
 }
 
 // src/player/components/trackHeaderLabelRows.tsx
-import { jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
 function PropertyGroupNavigation({
   navigation,
   label,
@@ -20452,8 +20512,8 @@ function PropertyGroupNavigation({
       onSeek?.(expandedElement.start + keyframe.percentage / 100 * expandedElement.duration);
     }
   };
-  return /* @__PURE__ */ jsxs38("span", { className: "flex shrink-0 items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsxs39("span", { className: "flex shrink-0 items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx60(
       "button",
       {
         type: "button",
@@ -20468,7 +20528,7 @@ function PropertyGroupNavigation({
       }
     ),
     children,
-    /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx60(
       "button",
       {
         type: "button",
@@ -20504,7 +20564,7 @@ function PropertyGroupHeaderRow({
     currentTime,
     clipPercentage
   );
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       id: timelineLogicalRowCellId(lanesId, timelinePropertyRowId(elementId2, lane.group), "header"),
@@ -20524,25 +20584,25 @@ function PropertyGroupHeaderRow({
         background: gutterBackground
       },
       children: [
-        /* @__PURE__ */ jsxs38("span", { className: "relative h-full w-3 shrink-0", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsxs39("span", { className: "relative h-full w-3 shrink-0", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx60(
             "span",
             {
               className: "absolute left-1.5 top-0 w-px bg-white/15",
               style: { height: isLastLane ? "50%" : "100%" }
             }
           ),
-          /* @__PURE__ */ jsx59("span", { className: "absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" })
+          /* @__PURE__ */ jsx60("span", { className: "absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" })
         ] }),
-        /* @__PURE__ */ jsx59("span", { className: "w-[46px] shrink-0 truncate text-white", title: label, children: label }),
-        /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx60("span", { className: "w-[46px] shrink-0 truncate text-white", title: label, children: label }),
+        /* @__PURE__ */ jsx60(
           PropertyGroupNavigation,
           {
             navigation,
             label,
             expandedElement,
             onSeek,
-            children: /* @__PURE__ */ jsx59(
+            children: /* @__PURE__ */ jsx60(
               "button",
               {
                 type: "button",
@@ -20561,7 +20621,7 @@ function PropertyGroupHeaderRow({
             )
           }
         ),
-        /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx60(
           "span",
           {
             className: "min-w-0 flex-1 truncate text-right tabular-nums text-white/45",
@@ -20587,7 +20647,7 @@ function AutomationLaneHeaderRow({
   isCarve,
   onReveal
 }) {
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       "data-automation-lane-label": label,
@@ -20600,17 +20660,17 @@ function AutomationLaneHeaderRow({
         background: gutterBackground
       },
       children: [
-        /* @__PURE__ */ jsxs38("span", { className: "relative h-full w-3 shrink-0", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsxs39("span", { className: "relative h-full w-3 shrink-0", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx60(
             "span",
             {
               className: "absolute left-1.5 top-0 w-px bg-white/15",
               style: { height: isLastLane ? "50%" : "100%" }
             }
           ),
-          /* @__PURE__ */ jsx59("span", { className: "absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" })
+          /* @__PURE__ */ jsx60("span", { className: "absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" })
         ] }),
-        /* @__PURE__ */ jsxs38(
+        /* @__PURE__ */ jsxs39(
           "button",
           {
             type: "button",
@@ -20625,8 +20685,8 @@ function AutomationLaneHeaderRow({
               onReveal?.();
             },
             children: [
-              /* @__PURE__ */ jsx59("span", { "data-automation-lane-name": "", className: "truncate font-mono text-[9px] text-white/70", children: name }),
-              param ? /* @__PURE__ */ jsx59(
+              /* @__PURE__ */ jsx60("span", { "data-automation-lane-name": "", className: "truncate font-mono text-[9px] text-white/70", children: name }),
+              param ? /* @__PURE__ */ jsx60(
                 "span",
                 {
                   "data-automation-lane-param": "",
@@ -20634,7 +20694,7 @@ function AutomationLaneHeaderRow({
                   children: param
                 }
               ) : null,
-              alsoAutomatedBy ? /* @__PURE__ */ jsxs38(
+              alsoAutomatedBy ? /* @__PURE__ */ jsxs39(
                 "span",
                 {
                   "data-automation-lane-also": "",
@@ -20649,7 +20709,7 @@ function AutomationLaneHeaderRow({
             ]
           }
         ),
-        onRemove && target !== null && !isCarve && /* @__PURE__ */ jsx59(
+        onRemove && target !== null && !isCarve && /* @__PURE__ */ jsx60(
           "button",
           {
             type: "button",
@@ -20671,7 +20731,7 @@ function AutomationLaneHeaderRow({
 
 // src/player/components/TimelineTrackHeader.tsx
 import { useMemo as useMemo26 } from "react";
-import { Fragment as Fragment13, jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx61, jsxs as jsxs40 } from "react/jsx-runtime";
 var GROUP_MEMBER_RAIL = "var(--timeline-accent-rail)";
 var GROUP_MEMBER_INDENT = 14;
 var GROUP_MEMBER_TINT = "var(--timeline-group-member-tint)";
@@ -20791,7 +20851,7 @@ function TimelineTrackHeader({
     if (!allGroupableClipIds || allGroupableClipIds.length < 2) return;
     void onGroupClips(allGroupableClipIds, mintGroupId(doc), label);
   };
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     "div",
     {
       role: "rowheader",
@@ -20813,12 +20873,12 @@ function TimelineTrackHeader({
         } : {}
       },
       children: [
-        !isKeyframeLayer ? /* @__PURE__ */ jsx60(Fragment13, { children: /* @__PURE__ */ jsx60(
+        !isKeyframeLayer ? /* @__PURE__ */ jsx61(Fragment14, { children: /* @__PURE__ */ jsx61(
           "div",
           {
             className: showTrackLabel ? "flex flex-col justify-center gap-0.5 px-1.5 text-[var(--timeline-handle)]" : "flex flex-col items-center justify-center gap-0.5",
             style: { height: TRACK_H },
-            children: /* @__PURE__ */ jsx60(
+            children: /* @__PURE__ */ jsx61(
               PlainTrackHeader,
               {
                 trackNumber,
@@ -20829,8 +20889,8 @@ function TimelineTrackHeader({
                 isTrackHidden,
                 isAudioTrack,
                 onToggleTrackHidden,
-                trailing: /* @__PURE__ */ jsxs39(Fragment13, { children: [
-                  singleAudioClip && /* @__PURE__ */ jsx60(
+                trailing: /* @__PURE__ */ jsxs40(Fragment14, { children: [
+                  singleAudioClip && /* @__PURE__ */ jsx61(
                     TimelineFxButton,
                     {
                       variant: "chain",
@@ -20848,7 +20908,7 @@ function TimelineTrackHeader({
                       onOpenRack: () => openClipFxRack(singleAudioClip)
                     }
                   ),
-                  clipCount > 1 && !isTrackGrouped && (isAudioTrack ? canGroupWholeTrack : isVideoWithAudioTrack) && /* @__PURE__ */ jsx60(
+                  clipCount > 1 && !isTrackGrouped && (isAudioTrack ? canGroupWholeTrack : isVideoWithAudioTrack) && /* @__PURE__ */ jsx61(
                     TimelineFxButton,
                     {
                       variant: "group-pointer",
@@ -20858,7 +20918,7 @@ function TimelineTrackHeader({
                       onGroupClips: groupUngroupedClips
                     }
                   ),
-                  disclosable && /* @__PURE__ */ jsx60(
+                  disclosable && /* @__PURE__ */ jsx61(
                     LaneToggleButton,
                     {
                       name: laneOwnerName,
@@ -20871,7 +20931,7 @@ function TimelineTrackHeader({
               }
             )
           }
-        ) }) : /* @__PURE__ */ jsx60(Fragment13, { children: /* @__PURE__ */ jsx60(
+        ) }) : /* @__PURE__ */ jsx61(Fragment14, { children: /* @__PURE__ */ jsx61(
           LayerDisclosureRow,
           {
             name: laneOwnerName,
@@ -20881,7 +20941,7 @@ function TimelineTrackHeader({
             columnWidth: showTrackLabel ? LABEL_COL_W : contentOrigin,
             lanesId,
             onToggleClipExpanded,
-            children: /* @__PURE__ */ jsx60(
+            children: /* @__PURE__ */ jsx61(
               VisibilityButton,
               {
                 hidden: isTrackHidden,
@@ -20893,7 +20953,7 @@ function TimelineTrackHeader({
             )
           }
         ) }),
-        isExpanded && keyframeClip && lanes.map((lane, laneIndex) => /* @__PURE__ */ jsx60(
+        isExpanded && keyframeClip && lanes.map((lane, laneIndex) => /* @__PURE__ */ jsx61(
           PropertyGroupHeaderRow,
           {
             lanesId,
@@ -20913,7 +20973,7 @@ function TimelineTrackHeader({
         )),
         isExpanded && automationRows.map((row, index) => {
           const revealTarget = row.target;
-          return /* @__PURE__ */ jsx60(
+          return /* @__PURE__ */ jsx61(
             AutomationLaneHeaderRow,
             {
               target: row.target,
@@ -20950,7 +21010,7 @@ import {
 } from "@hyperframes/core/audio-fx";
 
 // src/player/components/TimelineTrackRow.tsx
-import { jsx as jsx61, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
 function TimelineTrackRow({
   index,
   rowKey,
@@ -20966,7 +21026,7 @@ function TimelineTrackRow({
   rovingTargetId = null,
   children
 }) {
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       role: "rowgroup",
@@ -20981,7 +21041,7 @@ function TimelineTrackRow({
         borderBottom: `1px solid ${borderColor}`
       },
       children: [
-        /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx62(
           "div",
           {
             role: "row",
@@ -21003,7 +21063,7 @@ function TimelineTrackRow({
           return (
             // ponytail: aria-owns maps this hidden logical row onto the two visible
             // property-lane cells without duplicating interactive controls.
-            /* @__PURE__ */ jsxs40(
+            /* @__PURE__ */ jsxs41(
               "div",
               {
                 role: "row",
@@ -21013,7 +21073,7 @@ function TimelineTrackRow({
                 "data-timeline-logical-row-id": row.id,
                 className: "sr-only",
                 children: [
-                  /* @__PURE__ */ jsx61(
+                  /* @__PURE__ */ jsx62(
                     "div",
                     {
                       role: "rowheader",
@@ -21022,7 +21082,7 @@ function TimelineTrackRow({
                       children: group
                     }
                   ),
-                  /* @__PURE__ */ jsxs40(
+                  /* @__PURE__ */ jsxs41(
                     "div",
                     {
                       role: "gridcell",
@@ -21048,13 +21108,13 @@ function TimelineTrackRow({
 }
 
 // src/player/components/TimelineGroupHeader.tsx
-import { jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
 function GroupNameButton({
   label,
   memberCount,
   onOpenFxRack
 }) {
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     "button",
     {
       type: "button",
@@ -21068,7 +21128,7 @@ function GroupNameButton({
         onOpenFxRack();
       },
       children: [
-        /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx63(
           "span",
           {
             "aria-hidden": "true",
@@ -21076,8 +21136,8 @@ function GroupNameButton({
             children: "\u25A4"
           }
         ),
-        /* @__PURE__ */ jsx62("span", { title: label, className: "min-w-0 truncate text-left font-medium leading-tight", children: label }),
-        /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx63("span", { title: label, className: "min-w-0 truncate text-left font-medium leading-tight", children: label }),
+        /* @__PURE__ */ jsx63(
           "span",
           {
             className: "shrink-0 rounded-full bg-[var(--timeline-tick-major)] px-1 text-[9px] leading-[14px] tabular-nums text-[var(--timeline-handle)]",
@@ -21106,7 +21166,7 @@ function TimelineGroupHeader({
   columnWidth,
   theme
 }) {
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     "div",
     {
       role: "rowheader",
@@ -21120,7 +21180,7 @@ function TimelineGroupHeader({
         borderRight: `1px solid ${theme.gutterBorder}`
       },
       children: [
-        /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx63(
           "button",
           {
             type: "button",
@@ -21134,12 +21194,12 @@ function TimelineGroupHeader({
               event.stopPropagation();
               onToggleExpanded();
             },
-            children: /* @__PURE__ */ jsx62("span", { "aria-hidden": "true", children: isExpanded ? "\u25BE" : "\u25B8" })
+            children: /* @__PURE__ */ jsx63("span", { "aria-hidden": "true", children: isExpanded ? "\u25BE" : "\u25B8" })
           }
         ),
-        /* @__PURE__ */ jsx62(GroupNameButton, { label, memberCount, onOpenFxRack }),
-        /* @__PURE__ */ jsxs41("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx63(GroupNameButton, { label, memberCount, onOpenFxRack }),
+        /* @__PURE__ */ jsxs42("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx63(
             TimelineFxButton,
             {
               fxChainRaw: fxChain,
@@ -21149,7 +21209,7 @@ function TimelineGroupHeader({
               onOpenRack: onOpenFxRack
             }
           ),
-          laneCount > 0 && /* @__PURE__ */ jsxs41(
+          laneCount > 0 && /* @__PURE__ */ jsxs42(
             "button",
             {
               type: "button",
@@ -21164,8 +21224,8 @@ function TimelineGroupHeader({
                 onToggleLanes();
               },
               children: [
-                /* @__PURE__ */ jsx62("span", { "aria-hidden": "true", children: "\u223F" }),
-                /* @__PURE__ */ jsx62("span", { className: "text-[9px] tabular-nums text-[var(--timeline-handle)]", children: laneCount })
+                /* @__PURE__ */ jsx63("span", { "aria-hidden": "true", children: "\u223F" }),
+                /* @__PURE__ */ jsx63("span", { className: "text-[9px] tabular-nums text-[var(--timeline-handle)]", children: laneCount })
               ]
             }
           )
@@ -21179,13 +21239,13 @@ function TimelineGroupHeader({
 import { sampleAutomationLane as sampleAutomationLane7 } from "@hyperframes/core/audio-automation";
 
 // src/hooks/useLivePlayheadTime.ts
-import { useEffect as useEffect33, useRef as useRef44, useState as useState28 } from "react";
+import { useEffect as useEffect33, useRef as useRef44, useState as useState29 } from "react";
 var THROTTLE_MS = 33;
 function useLivePlayheadTime() {
   const storeTime = usePlayerStore((s) => s.currentTime);
   const isPlaying = usePlayerStore((s) => s.isPlaying);
   const liveRef = useRef44(storeTime);
-  const [, forceRender] = useState28(0);
+  const [, forceRender] = useState29(0);
   if (!isPlaying) liveRef.current = storeTime;
   useEffect33(() => {
     if (!isPlaying) return;
@@ -21208,7 +21268,7 @@ function useLivePlayheadTime() {
 }
 
 // src/player/components/TimelineGroupLaneLabels.tsx
-import { Fragment as Fragment14, jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
 function TimelineGroupLaneLabels({
   groupElement,
   groupLabel: groupLabel2,
@@ -21220,12 +21280,12 @@ function TimelineGroupLaneLabels({
 }) {
   const currentTime = useLivePlayheadTime();
   const laneGroups = groupAutomationLanes([groupElement]);
-  return /* @__PURE__ */ jsx63(Fragment14, { children: laneGroups.map((laneGroup, index) => {
+  return /* @__PURE__ */ jsx64(Fragment15, { children: laneGroups.map((laneGroup, index) => {
     const lane = laneGroup.entries[0]?.lane;
     if (!lane) return null;
     const parts = { name: laneGroup.name, param: laneGroup.param };
     const value = sampleAutomationLane7(lane, currentTime);
-    return /* @__PURE__ */ jsxs42(
+    return /* @__PURE__ */ jsxs43(
       "button",
       {
         type: "button",
@@ -21247,7 +21307,7 @@ function TimelineGroupLaneLabels({
           onReveal?.(lane.target);
         },
         children: [
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx64(
             "span",
             {
               "aria-hidden": "true",
@@ -21255,11 +21315,11 @@ function TimelineGroupLaneLabels({
               children: "\u25A4"
             }
           ),
-          /* @__PURE__ */ jsxs42("span", { className: "flex min-w-0 flex-1 flex-col justify-center leading-tight", children: [
-            /* @__PURE__ */ jsx63("span", { className: "truncate font-mono text-[9px] text-[var(--timeline-text-bright)]", children: parts.name }),
-            parts.param ? /* @__PURE__ */ jsx63("span", { className: "truncate font-mono text-[9px] text-[var(--timeline-text-dim)]", children: parts.param }) : null
+          /* @__PURE__ */ jsxs43("span", { className: "flex min-w-0 flex-1 flex-col justify-center leading-tight", children: [
+            /* @__PURE__ */ jsx64("span", { className: "truncate font-mono text-[9px] text-[var(--timeline-text-bright)]", children: parts.name }),
+            parts.param ? /* @__PURE__ */ jsx64("span", { className: "truncate font-mono text-[9px] text-[var(--timeline-text-dim)]", children: parts.param }) : null
           ] }),
-          /* @__PURE__ */ jsx63("span", { className: "shrink-0 font-mono text-[9px] tabular-nums text-[var(--timeline-handle)]", children: value.toFixed(2) })
+          /* @__PURE__ */ jsx64("span", { className: "shrink-0 font-mono text-[9px] tabular-nums text-[var(--timeline-handle)]", children: value.toFixed(2) })
         ]
       },
       lane.target
@@ -21268,7 +21328,7 @@ function TimelineGroupLaneLabels({
 }
 
 // src/player/components/TimelineGroupRow.tsx
-import { jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs44 } from "react/jsx-runtime";
 var GROUP_LANE_ACCENT = "var(--timeline-accent)";
 function TimelineGroupRow({
   index,
@@ -21316,7 +21376,7 @@ function TimelineGroupRow({
       })
     );
   };
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44(
     TimelineTrackRow,
     {
       index,
@@ -21332,13 +21392,13 @@ function TimelineGroupRow({
       borderColor: theme.rowBorder,
       rovingTargetId,
       children: [
-        /* @__PURE__ */ jsxs43(
+        /* @__PURE__ */ jsxs44(
           "div",
           {
             className: "sticky left-0 z-12 shrink-0",
             style: { width: contentOrigin >= LABEL_COL_W ? LABEL_COL_W : contentOrigin },
             children: [
-              /* @__PURE__ */ jsx64(
+              /* @__PURE__ */ jsx65(
                 TimelineGroupHeader,
                 {
                   label: group.label,
@@ -21357,7 +21417,7 @@ function TimelineGroupRow({
                   theme
                 }
               ),
-              isLaneOpen && /* @__PURE__ */ jsx64(
+              isLaneOpen && /* @__PURE__ */ jsx65(
                 TimelineGroupLaneLabels,
                 {
                   groupElement,
@@ -21376,14 +21436,14 @@ function TimelineGroupRow({
         // slot positions absolutely, so mounted straight on the row it resolved
         // against the row instead and drew the envelope across the label gutter
         // from x=0.
-        /* @__PURE__ */ jsx64(
+        /* @__PURE__ */ jsx65(
           "div",
           {
             role: "gridcell",
             "aria-colindex": 2,
             style: { width: trackContentWidth, marginLeft: contentGutter },
             className: "relative",
-            children: /* @__PURE__ */ jsx64(
+            children: /* @__PURE__ */ jsx65(
               TimelineAutomationLaneSlot,
               {
                 elements: [groupElement],
@@ -23178,36 +23238,6 @@ function createClipGestureHandlers(el, elementKey3, previewElement, capabilities
   return { onResizeStart, onPointerDown, onClick };
 }
 
-// src/player/components/timelineClipChildren.tsx
-import { Fragment as Fragment15, jsx as jsx65, jsxs as jsxs44 } from "react/jsx-runtime";
-function resolveClipRenderContext(element, visibleTimeRange, interactive) {
-  if (interactive) return { priority: "interaction", rich: false };
-  const visible = element.start < visibleTimeRange.end && element.start + element.duration > visibleTimeRange.start;
-  return { priority: visible ? "visible" : "overscan", rich: false };
-}
-function ClipLintDot({ element }) {
-  const lint = usePlayerStore((s) => s.lintFindingsByElement.get(element.key ?? element.id));
-  if (!lint || lint.count === 0) return null;
-  return /* @__PURE__ */ jsx65(
-    "span",
-    {
-      className: "absolute w-1.5 h-1.5 rounded-full bg-amber-400",
-      style: { top: 7, right: 7 },
-      title: lint.messages.join("\n")
-    }
-  );
-}
-function renderClipChildren(element, clipStyle, renderClipContent, renderClipOverlay, context = { priority: "visible", rich: false }) {
-  return /* @__PURE__ */ jsxs44(Fragment15, { children: [
-    renderClipOverlay?.(element),
-    !renderClipContent && /* @__PURE__ */ jsx65(ClipLintDot, { element }),
-    renderClipContent && // borderRadius: inherit — the clip itself is overflow-visible (keyframe
-    // diamonds hang outside its bounds), so the thumbnail layer must clip
-    // itself to the clip's rounded corners or sharp corners poke out.
-    /* @__PURE__ */ jsx65("div", { className: "absolute inset-0 overflow-hidden", style: { borderRadius: "inherit" }, children: renderClipContent(element, clipStyle, context) })
-  ] });
-}
-
 // src/player/components/useTimelineKeyboardActor.ts
 import { useCallback as useCallback29, useMemo as useMemo28 } from "react";
 function eventTarget(event) {
@@ -23416,8 +23446,7 @@ function TimelineClipJoins({
 // src/player/components/TimelineTransitionOverlays.tsx
 import { Fragment as Fragment16, jsx as jsx68, jsxs as jsxs46 } from "react/jsx-runtime";
 function TimelineTransitionOverlays({
-  transitionElements,
-  track: track2,
+  seams,
   rowElements,
   rowBackground,
   pixelsPerSecond,
@@ -23425,9 +23454,6 @@ function TimelineTransitionOverlays({
   clipBarHeight
 }) {
   const top = CLIP_Y + (clipBarHeight ?? rowHeight - 2 * CLIP_Y) / 2;
-  const seams = deriveTimelineTransitionSeams(transitionElements).filter(
-    (seam) => seam.incoming.track === track2
-  );
   return /* @__PURE__ */ jsxs46(Fragment16, { children: [
     /* @__PURE__ */ jsx68(
       TimelineClipJoins,
@@ -23523,8 +23549,8 @@ function TimelineLanes({
   const expandedClipIds = usePlayerStore((s) => s.expandedClipIds);
   const { collapsedGroupIds, expandedLaneOwnerIds, toggleGroupExpanded, toggleLaneOwnerExpanded } = useTimelineGroupDisclosure();
   const automationLanes = useAutomationLanes();
-  const allTransitionElements = useMemo29(
-    () => tracks.flatMap(([, elements]) => elements.map(getPreviewElement)),
+  const transitionSeamsByTrack = useMemo29(
+    () => deriveTimelineTransitionSeamsByTrack(tracks.flatMap(([, els]) => els.map(getPreviewElement))),
     [getPreviewElement, tracks]
   );
   const compositionDuration = usePlayerStore((s) => s.duration);
@@ -23901,8 +23927,7 @@ function TimelineLanes({
                     /* @__PURE__ */ jsx69(
                       TimelineTransitionOverlays,
                       {
-                        transitionElements: allTransitionElements,
-                        track: trackNum,
+                        seams: transitionSeamsByTrack.get(trackNum) ?? [],
                         rowElements: draggedClip?.started ? [] : automationElements,
                         rowBackground,
                         pixelsPerSecond: pps,
@@ -24211,7 +24236,7 @@ var TimelineCanvas = memo13(function TimelineCanvas2() {
 import { useEffect as useEffect35 } from "react";
 
 // src/player/components/EditModal.tsx
-import { useState as useState29, useCallback as useCallback30, useMemo as useMemo30, useRef as useRef45 } from "react";
+import { useState as useState30, useCallback as useCallback30, useMemo as useMemo30, useRef as useRef45 } from "react";
 
 // src/utils/clipboard.ts
 function copyWithSelection(text) {
@@ -24287,14 +24312,14 @@ function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }) {
   const start = Math.min(rangeStart, rangeEnd);
   const end = Math.max(rangeStart, rangeEnd);
   const storageKey = draftKey(start, end);
-  const [prompt, setPromptState] = useState29(() => readDraft(storageKey));
+  const [prompt, setPromptState] = useState30(() => readDraft(storageKey));
   const setPrompt = (value) => {
     setPromptState(value);
     writeDraft(storageKey, value);
   };
-  const [copiedAgentPrompt, setCopiedAgentPrompt] = useState29(false);
-  const [copiedPromptOnly, setCopiedPromptOnly] = useState29(false);
-  const [copyError, setCopyError] = useState29(false);
+  const [copiedAgentPrompt, setCopiedAgentPrompt] = useState30(false);
+  const [copiedPromptOnly, setCopiedPromptOnly] = useState30(false);
+  const [copyError, setCopyError] = useState30(false);
   const popoverRef = useRef45(null);
   const textareaRef = useRef45(null);
   const elementsInRange = useMemo30(() => {
@@ -24431,7 +24456,7 @@ function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }) {
 }
 
 // src/player/components/KeyframeDiamondContextMenu.tsx
-import { useState as useState30 } from "react";
+import { useState as useState31 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/player/components/menuKeyboardNav.ts
@@ -24492,7 +24517,7 @@ function KeyframeDiamondContextMenu({
     animationId: state.animationId
   };
   useMenuKeyboardNav(menuRef);
-  const [copyStatus, setCopyStatus] = useState30("idle");
+  const [copyStatus, setCopyStatus] = useState31("idle");
   const handleCopyProperties = async () => {
     if (!onCopyProperties) return;
     const result = await onCopyProperties(state.elementId, keyframe);
@@ -25203,7 +25228,7 @@ var Timeline = Object.assign(TimelineComposed, {
 });
 
 // src/player/components/VideoThumbnail.tsx
-import { memo as memo17, useCallback as useCallback32, useMemo as useMemo31, useRef as useRef47, useState as useState31 } from "react";
+import { memo as memo17, useCallback as useCallback32, useMemo as useMemo31, useRef as useRef47, useState as useState32 } from "react";
 
 // src/hooks/useThumbnailLease.ts
 import { useCallback as useCallback31, useLayoutEffect as useLayoutEffect5, useRef as useRef46, useSyncExternalStore as useSyncExternalStore2 } from "react";
@@ -25241,6 +25266,7 @@ var ThumbnailScheduler = class {
   nextLeaseId = 1;
   nextSequence = 1;
   scrolling = false;
+  previewReloading = false;
   cacheBytes = 0;
   waveformCacheBytes = 0;
   activeByBucket = { video: 0, composition: 0, general: 0 };
@@ -25274,7 +25300,8 @@ var ThumbnailScheduler = class {
         disposed: false,
         cached: false,
         lastAccess: this.nextSequence++,
-        snapshot: Object.freeze({ status: "queued" })
+        snapshot: Object.freeze({ status: "queued" }),
+        preempted: false
       };
       this.entries.set(scopedKey, entry2);
     }
@@ -25323,6 +25350,23 @@ var ThumbnailScheduler = class {
     this.scrolling = scrolling;
     if (!scrolling) this.pump();
   }
+  /**
+   * Hold server-rendered composition thumbnails while the preview loads a new document: both
+   * are served by the same Studio server, and the preview is what the person is waiting for.
+   */
+  setPreviewReloading(reloading) {
+    if (this.previewReloading === reloading) return;
+    this.previewReloading = reloading;
+    if (!reloading) {
+      this.pump();
+      return;
+    }
+    for (const entry2 of this.entries.values()) {
+      if (entry2.state !== "loading" || entry2.request.kind !== "composition") continue;
+      entry2.preempted = true;
+      entry2.controller?.abort();
+    }
+  }
   /** Evict project cache entries that are no longer owned by mounted consumers. */
   invalidateProject(projectId) {
     for (const [key2, entry2] of this.entries) {
@@ -25365,6 +25409,7 @@ var ThumbnailScheduler = class {
     });
     for (const entry2 of queued) {
       if (this.scrolling && entry2.request.rich) continue;
+      if (this.previewReloading && entry2.request.kind === "composition") continue;
       const bucket = concurrencyBucket(entry2.request.kind);
       if (this.activeByBucket[bucket] >= this.bucketLimit(bucket)) continue;
       this.start(entry2, bucket);
@@ -25385,6 +25430,7 @@ var ThumbnailScheduler = class {
         this.deleteEntry(entry2.scopedKey, entry2);
         return;
       }
+      if (this.requeuePreempted(entry2)) return;
       entry2.state = "error";
       entry2.error = errorFrom(reason);
       entry2.failedAt = this.now();
@@ -25401,6 +25447,7 @@ var ThumbnailScheduler = class {
   acceptResult(entry2, controller, result) {
     if (controller.signal.aborted || this.entries.get(entry2.scopedKey) !== entry2) {
       this.safeDispose(result.dispose);
+      this.requeuePreempted(entry2);
       return;
     }
     this.validateResult(result);
@@ -25414,6 +25461,14 @@ var ThumbnailScheduler = class {
     this.evict();
     if (!entry2.cached && entry2.leases.size === 0) this.deleteEntry(entry2.scopedKey, entry2);
   }
+  requeuePreempted(entry2) {
+    if (!entry2.preempted || this.entries.get(entry2.scopedKey) !== entry2) return false;
+    entry2.preempted = false;
+    entry2.state = "queued";
+    entry2.snapshot = Object.freeze({ status: "queued" });
+    this.notify(entry2);
+    return true;
+  }
   validateResult(result) {
     if (Number.isFinite(result.weight) && result.weight >= 0) return;
     this.safeDispose(result.dispose);
@@ -25824,7 +25879,7 @@ var VideoThumbnail = memo17(function VideoThumbnail2({
   sessionEpoch = 0,
   priority = "visible"
 }) {
-  const [containerWidth, setContainerWidth] = useState31(0);
+  const [containerWidth, setContainerWidth] = useState32(0);
   const observerRef = useRef47(null);
   const requestFrameCount = quantizeThumbnailFrameCount(
     computeThumbnailStrip(containerWidth, 16 / 9).frameCount
@@ -25924,7 +25979,7 @@ var VideoThumbnail = memo17(function VideoThumbnail2({
 });
 
 // src/player/components/CompositionThumbnail.tsx
-import { memo as memo18, useCallback as useCallback33, useMemo as useMemo32, useRef as useRef48, useState as useState32 } from "react";
+import { memo as memo18, useCallback as useCallback33, useMemo as useMemo32, useRef as useRef48, useState as useState33 } from "react";
 import { jsx as jsx82, jsxs as jsxs58 } from "react/jsx-runtime";
 var CLIP_HEIGHT = 66;
 var THUMBNAIL_URL_VERSION = "v3";
@@ -25952,6 +26007,10 @@ function buildCompositionThumbnailUrl({
   }
   return thumbnailUrl2.toString();
 }
+function compositionPathOfPreviewUrl(previewUrl) {
+  const match = /\/preview\/comp\/([^?#]+)/.exec(previewUrl);
+  return match?.[1] ? decodeURIComponent(match[1]) : "index.html";
+}
 async function loadCompositionImage(url, signal) {
   const response = await fetch(url, { signal });
   if (!response.ok) throw new Error(`Composition thumbnail failed (${response.status})`);
@@ -25983,7 +26042,7 @@ var CompositionThumbnail = memo18(function CompositionThumbnail2({
   contentRevision = 0,
   priority = "visible"
 }) {
-  const [containerWidth, setContainerWidth] = useState32(0);
+  const [containerWidth, setContainerWidth] = useState33(0);
   const observerRef = useRef48(null);
   const url = buildCompositionThumbnailUrl({
     previewUrl,
@@ -27739,7 +27798,7 @@ function useTimelineSyncCallbacks({
 }
 
 // src/player/hooks/useShadowPreviewReload.ts
-import { useCallback as useCallback36, useRef as useRef51, useState as useState33 } from "react";
+import { useCallback as useCallback36, useRef as useRef51, useState as useState34 } from "react";
 
 // src/utils/studioDebug.ts
 function makeStudioDebugLogger(name) {
@@ -27797,7 +27856,7 @@ function useShadowPreviewReload({
   const budgetGenRef = useRef51(null);
   const cancelPendingLoadRef = useRef51(() => {
   });
-  const [previewSlots, setPreviewSlots] = useState33([{ gen: 0, role: "live" }]);
+  const [previewSlots, setPreviewSlots] = useState34([{ gen: 0, role: "live" }]);
   const stopPendingShadow = useCallback36(() => {
     clearTimeout(readyTimerRef.current);
     budgetGenRef.current = null;
@@ -27814,6 +27873,7 @@ function useShadowPreviewReload({
       isRefreshingRef.current = false;
       pendingSeekRef.current = null;
       setPreviewSlots(planShadowDiscard);
+      thumbnailScheduler.setPreviewReloading(false);
       const message = `The preview did not reload (${cause}). The previous preview is still showing.`;
       logReload("shadow-failed", { cause });
       console.error(`[studio] ${message}`);
@@ -27835,6 +27895,7 @@ function useShadowPreviewReload({
       applyPreviewAudioState();
       setPreviewSlots((prev) => planShadowPromotion(prev, gen));
       onPromotedRef.current?.();
+      thumbnailScheduler.setPreviewReloading(false);
     },
     [stopPendingShadow, iframeRef, attachIframeShortcutListeners, applyPreviewAudioState]
   );
@@ -27900,6 +27961,7 @@ function useShadowPreviewReload({
       budgetGenRef.current = gen;
       armReadyTimer(gen);
       setPreviewSlots((prev) => planShadowReload(prev, gen, url));
+      thumbnailScheduler.setPreviewReloading(true);
     },
     [stopPendingShadow, armReadyTimer]
   );
@@ -27910,6 +27972,7 @@ function useShadowPreviewReload({
     isRefreshingRef.current = false;
     pendingSeekRef.current = null;
     setPreviewSlots(planShadowDiscard);
+    thumbnailScheduler.setPreviewReloading(false);
   }, [stopPendingShadow, isRefreshingRef, pendingSeekRef]);
   useMountEffect(() => {
     const onVisibilityChange = () => {
@@ -27924,6 +27987,7 @@ function useShadowPreviewReload({
     return () => {
       document.removeEventListener("visibilitychange", onVisibilityChange);
       stopPendingShadow();
+      thumbnailScheduler.setPreviewReloading(false);
     };
   });
   return {
@@ -28794,16 +28858,16 @@ function useTimelinePlayer({
 import { useCallback as useCallback41, useMemo as useMemo33 } from "react";
 
 // src/components/nle/NLEContext.tsx
-import { useContext as useContext8, useState as useState35, useCallback as useCallback40, useRef as useRef54, useEffect as useEffect38 } from "react";
+import { useContext as useContext8, useState as useState36, useCallback as useCallback40, useRef as useRef54, useEffect as useEffect38 } from "react";
 
 // src/components/nle/useCompositionStack.ts
-import { useState as useState34, useCallback as useCallback39, useRef as useRef53, useEffect as useEffect37 } from "react";
+import { useState as useState35, useCallback as useCallback39, useRef as useRef53, useEffect as useEffect37 } from "react";
 function useCompositionStack({
   projectId,
   activeCompositionPath,
   onCompositionChange
 }) {
-  const [compositionStack, setCompositionStack] = useState34([
+  const [compositionStack, setCompositionStack] = useState35([
     {
       id: "master",
       label: "Master",
@@ -28821,7 +28885,7 @@ function useCompositionStack({
     });
   }, []);
   const masterSeekRef = useRef53(0);
-  const [compIdToSrc, setCompIdToSrc] = useState34(/* @__PURE__ */ new Map());
+  const [compIdToSrc, setCompIdToSrc] = useState35(/* @__PURE__ */ new Map());
   const compIdToSrcRef = useRef53(compIdToSrc);
   compIdToSrcRef.current = compIdToSrc;
   const handleNavigateComposition = useCallback39(
@@ -28955,7 +29019,7 @@ function NLEProvider({
     usePlayerStore.getState().beginTimelineSession(projectId);
     useAssetPreviewStore.getState().clearPreviewAsset();
   }, [projectId]);
-  const [previewCompositionSize, setPreviewCompositionSize] = useState35(null);
+  const [previewCompositionSize, setPreviewCompositionSize] = useState36(null);
   const prevRefreshKeyRef = useRef54(refreshKey);
   useEffect38(() => {
     if (refreshKey === prevRefreshKeyRef.current) return;
@@ -29081,7 +29145,7 @@ function NLEProvider({
     });
   }, [compIdToSrc]);
   const hasLoadedOnceRef = useRef54(false);
-  const [compositionLoading, setCompositionLoadingRaw] = useState35(true);
+  const [compositionLoading, setCompositionLoadingRaw] = useState36(true);
   const setCompositionLoading = useCallback40((loading) => {
     if (!loading) hasLoadedOnceRef.current = true;
     if (loading && hasLoadedOnceRef.current) return;
@@ -29200,7 +29264,7 @@ function readPreviewCompositionSize(iframe) {
 }
 
 // src/components/nle/NLEPreview.tsx
-import { memo as memo19, useCallback as useCallback43, useEffect as useEffect39, useRef as useRef56, useState as useState36 } from "react";
+import { memo as memo19, useCallback as useCallback43, useEffect as useEffect39, useRef as useRef56, useState as useState37 } from "react";
 
 // src/components/nle/previewZoom.ts
 var MIN_PREVIEW_ZOOM_PERCENT = 25;
@@ -29434,11 +29498,11 @@ var NLEPreview = memo19(function NLEPreview2({
   }, [activeKey, resetPreviewSlots]);
   const liveGenRef = useRef56(null);
   const reportPreviewFirstFrame = usePreviewFirstFrameTelemetry(previewSlots);
-  const [compositionSize, setCompositionSize] = useState36(null);
+  const [compositionSize, setCompositionSize] = useState37(null);
   const gutterPx = usePreviewGuidesStore((s) => s.rulerVisible ? RULER_GUTTER_PX : 0);
-  const [stageSize, setStageSize] = useState36(() => resolvePreviewStageSize(0, 0, null, portrait));
+  const [stageSize, setStageSize] = useState37(() => resolvePreviewStageSize(0, 0, null, portrait));
   const zoomRef = useRef56(loadInitialZoom());
-  const [settledZoom, setSettledZoom] = useState36(() => zoomRef.current);
+  const [settledZoom, setSettledZoom] = useState37(() => zoomRef.current);
   const hudRef = useRef56(null);
   const hudTimerRef = useRef56(null);
   const settleTimerRef = useRef56(null);
@@ -29840,7 +29904,7 @@ function CompositionBreadcrumb({ stack, onNavigate }) {
 }
 
 // src/components/nle/usePreviewBlockDrop.ts
-import { useCallback as useCallback44, useRef as useRef57, useState as useState37 } from "react";
+import { useCallback as useCallback44, useRef as useRef57, useState as useState38 } from "react";
 
 // src/components/editor/previewReadOnlyContext.tsx
 import { useContext as useContext9, useMemo as useMemo34 } from "react";
@@ -29908,7 +29972,7 @@ function usePreviewBlockDrop({
   onBlockDrop: onBlockDropProp
 }) {
   const onBlockDrop = usePreviewReadOnly() ? void 0 : onBlockDropProp;
-  const [isDragOver, setIsDragOver] = useState37(false);
+  const [isDragOver, setIsDragOver] = useState38(false);
   const dragDepthRef = useRef57(0);
   const handleDragEnter = useCallback44(
     (e) => {
@@ -30111,7 +30175,7 @@ function AssetPreviewOverlay() {
 import { memo as memo20, useRef as useRef60 } from "react";
 
 // src/components/editor/useDomEditCompositionRect.ts
-import { useState as useState38 } from "react";
+import { useState as useState39 } from "react";
 
 // src/components/editor/overlayFrameLoop.ts
 var AWAKE_MS = 400;
@@ -30239,7 +30303,7 @@ function useDomEditCompositionRect({
   iframeRef,
   overlayRef
 }) {
-  const [compRect, setCompRect] = useState38({
+  const [compRect, setCompRect] = useState39({
     left: 0,
     top: 0,
     width: 0,
@@ -30280,7 +30344,7 @@ function safeBoxInsetPercent(boxPercent) {
 }
 
 // src/components/editor/PreviewOverlayProvider.tsx
-import { createContext as createContext4, useContext as useContext10, useRef as useRef59, useState as useState39 } from "react";
+import { createContext as createContext4, useContext as useContext10, useRef as useRef59, useState as useState40 } from "react";
 
 // src/components/editor/usePreviewCompositionRect.ts
 import { useEffect as useEffect41, useRef as useRef58 } from "react";
@@ -30322,7 +30386,7 @@ function readSnapPrefs() {
 }
 function PreviewOverlayProvider({ iframe, children }) {
   const overlayRef = useRef59(null);
-  const [snapPrefs, setSnapPrefs] = useState39(readSnapPrefs);
+  const [snapPrefs, setSnapPrefs] = useState40(readSnapPrefs);
   const rulerVisible = usePreviewGuidesStore((state) => state.rulerVisible);
   const safeMarginsVisible = usePreviewGuidesStore((state) => state.safeMarginsVisible);
   const liveIframe = useLivePreviewIframe();
@@ -31100,7 +31164,7 @@ function TimelinePane({
 import { useCallback as useCallback59 } from "react";
 
 // src/captions/components/CaptionOverlay.tsx
-import { memo as memo22, useEffect as useEffect43, useState as useState40, useCallback as useCallback48, useRef as useRef63 } from "react";
+import { memo as memo22, useEffect as useEffect43, useState as useState41, useCallback as useCallback48, useRef as useRef63 } from "react";
 
 // src/captions/keyboard.ts
 var CAPTION_NUDGE_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
@@ -31325,7 +31389,7 @@ var CaptionOverlay = memo22(function CaptionOverlay2({ iframeRef }) {
   const selectedSegmentIds = useCaptionStore((s) => s.selectedSegmentIds);
   const selectSegment = useCaptionStore((s) => s.selectSegment);
   const clearSelection = useCaptionStore((s) => s.clearSelection);
-  const [wordBoxes, setWordBoxes] = useState40([]);
+  const [wordBoxes, setWordBoxes] = useState41([]);
   const overlayRef = useRef63(null);
   const modelRef = useRef63(model);
   modelRef.current = model;
@@ -31733,7 +31797,7 @@ var CaptionOverlay = memo22(function CaptionOverlay2({ iframeRef }) {
 import { memo as memo25, useEffect as useEffect51, useMemo as useMemo37, useRef as useRef73 } from "react";
 
 // src/components/editor/marqueeCommit.ts
-import { useCallback as useCallback49, useRef as useRef64, useState as useState41 } from "react";
+import { useCallback as useCallback49, useRef as useRef64, useState as useState42 } from "react";
 
 // src/utils/studioPreviewHelpers.ts
 var FULL_BLEED_RATIO = 0.95;
@@ -32771,8 +32835,8 @@ async function runMarqueeIntersection(rect, candidates, activeCompositionPath) {
 }
 function useMarqueeGestures(deps) {
   const marqueeRef = useRef64(null);
-  const [marqueeRect, setMarqueeRect] = useState41(null);
-  const [candidateRects, setCandidateRects] = useState41([]);
+  const [marqueeRect, setMarqueeRect] = useState42(null);
+  const [candidateRects, setCandidateRects] = useState42([]);
   const candidatesRef = useRef64(null);
   const commitMarquee = useCallback49(
     async (rect, additive) => {
@@ -32895,11 +32959,11 @@ function MarqueeOverlay({ candidateRects, marqueeRect }) {
 }
 
 // src/components/editor/useZOrderCrossedFlash.tsx
-import { useCallback as useCallback50, useEffect as useEffect44, useRef as useRef65, useState as useState42 } from "react";
+import { useCallback as useCallback50, useEffect as useEffect44, useRef as useRef65, useState as useState43 } from "react";
 import { jsx as jsx95 } from "react/jsx-runtime";
 var Z_ORDER_CROSSED_FLASH_MS = 600;
 function useZOrderCrossedFlash({ overlayRef, iframeRef }) {
-  const [zOrderFlashRect, setZOrderFlashRect] = useState42(null);
+  const [zOrderFlashRect, setZOrderFlashRect] = useState43(null);
   const timeoutRef = useRef65(null);
   useEffect44(
     () => () => {
@@ -32939,7 +33003,7 @@ function ZOrderCrossedFlash({ rect }) {
 }
 
 // src/components/editor/useCanvasContextMenuState.ts
-import { useCallback as useCallback51, useEffect as useEffect45, useState as useState43 } from "react";
+import { useCallback as useCallback51, useEffect as useEffect45, useState as useState44 } from "react";
 function useCanvasContextMenuState({
   selection,
   selectionRef,
@@ -32947,7 +33011,7 @@ function useCanvasContextMenuState({
   onCanvasPointerMoveRef,
   onSelectionChangeRef
 }) {
-  const [contextMenu, setContextMenu] = useState43(null);
+  const [contextMenu, setContextMenu] = useState44(null);
   const closeContextMenu = useCallback51(() => setContextMenu(null), []);
   useEffect45(() => {
     if (!contextMenu) return;
@@ -33039,7 +33103,7 @@ function hasDomEditRotationChanged(initialAngle, nextAngle) {
 }
 
 // src/components/editor/useDomEditOverlayRects.ts
-import { useRef as useRef66, useState as useState44 } from "react";
+import { useRef as useRef66, useState as useState45 } from "react";
 function childRectsEqual(a, b) {
   if (a.length !== b.length) return false;
   for (let i = 0; i < a.length; i++) {
@@ -33056,10 +33120,10 @@ function useDomEditOverlayRects({
   hoverSelectionRef,
   rafPausedRef
 }) {
-  const [overlayRect, setOverlayRectState] = useState44(null);
-  const [hoverRect, setHoverRectState] = useState44(null);
-  const [groupOverlayItems, setGroupOverlayItemsState] = useState44([]);
-  const [childRects, setChildRectsState] = useState44([]);
+  const [overlayRect, setOverlayRectState] = useState45(null);
+  const [hoverRect, setHoverRectState] = useState45(null);
+  const [groupOverlayItems, setGroupOverlayItemsState] = useState45([]);
+  const [childRects, setChildRectsState] = useState45([]);
   const overlayRectRef = useRef66(null);
   const hoverRectRef = useRef66(null);
   const groupOverlayItemsRef = useRef66([]);
@@ -33396,16 +33460,22 @@ function roundRotationAngle(angle) {
 function normalizeStudioFileChangePath(path) {
   return path.trim().replace(/\\/g, "/").replace(/^\.?\//, "");
 }
+function asPayloadRecord(payload) {
+  return payload && typeof payload === "object" ? payload : null;
+}
 function readFileChangeField(payload, key2) {
-  if (!payload || typeof payload !== "object") return null;
-  const record = payload;
-  const value = record[key2];
+  const value = asPayloadRecord(payload)?.[key2];
   return typeof value === "string" ? value : null;
 }
 function readStudioFileChangePath(payload) {
   const path = readFileChangeField(payload, "path") ?? readFileChangeField(payload, "filePath");
   return path === null ? null : normalizeStudioFileChangePath(path);
 }
+function readFileChangeAffectedCompositions(payload) {
+  const value = asPayloadRecord(payload)?.affectedCompositions;
+  if (!Array.isArray(value) || !value.every((path) => typeof path === "string")) return null;
+  return value.map(normalizeStudioFileChangePath);
+}
 
 // src/components/editor/gsapAnimatesProperty.ts
 function gsapAnimatesProperty(el, ...props) {
@@ -34144,6 +34214,20 @@ function hasRemainingTimelineTime(owner) {
   if (time == null) return true;
   return time < duration;
 }
+function hasPausedAncestor(owner) {
+  let ancestor = owner.parent;
+  for (let depth = 0; depth < 32 && ancestor && typeof ancestor === "object"; depth++) {
+    const node = ancestor;
+    const paused = node.paused;
+    try {
+      if (typeof paused === "function" && paused.call(node)) return true;
+    } catch {
+      return false;
+    }
+    ancestor = node.parent;
+  }
+  return false;
+}
 function isTimelinePlaying(owner) {
   if (!owner) return false;
   const isPlaying = owner.isPlaying;
@@ -34169,6 +34253,7 @@ function isTimelinePlaying(owner) {
         return false;
       }
     }
+    if (hasPausedAncestor(owner)) return false;
     return hasRemainingTimelineTime(owner);
   }
   const isActive = owner.isActive;
@@ -36263,7 +36348,7 @@ var SnapGuideOverlay = memo23(function SnapGuideOverlay2({
 });
 
 // src/components/editor/DomEditCropHandles.tsx
-import { useEffect as useEffect47, useRef as useRef69, useState as useState45 } from "react";
+import { useEffect as useEffect47, useRef as useRef69, useState as useState46 } from "react";
 import { Fragment as Fragment25, jsx as jsx98, jsxs as jsxs69 } from "react/jsx-runtime";
 var EDGE_HIT_THICKNESS = 12;
 var EDGE_HIT_LENGTH = 32;
@@ -36297,14 +36382,14 @@ function DomEditCropHandles({
   onStyleCommit
 }) {
   const gestureRef = useRef69(null);
-  const [dragging, setDragging] = useState45(false);
-  const [hotEdge, setHotEdge] = useState45(null);
+  const [dragging, setDragging] = useState46(false);
+  const [hotEdge, setHotEdge] = useState46(null);
   const cropStateFor = (element) => {
     const parsed = readElementCropInsets(element);
     const { radius, ...insets } = parsed ?? { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
     return { element, croppable: parsed !== null, insets, radius };
   };
-  const [state, setState] = useState45(() => cropStateFor(selection.element));
+  const [state, setState] = useState46(() => cropStateFor(selection.element));
   if (state.element !== selection.element) {
     setState(cropStateFor(selection.element));
   }
@@ -36982,7 +37067,7 @@ var CanvasContextMenu = memo24(function CanvasContextMenu2({
 import { useRef as useRef71 } from "react";
 
 // src/components/editor/InlineTextToolbar.tsx
-import { useCallback as useCallback53, useEffect as useEffect48, useState as useState46 } from "react";
+import { useCallback as useCallback53, useEffect as useEffect48, useState as useState47 } from "react";
 
 // src/components/editor/inlineTextStyleRange.ts
 import {
@@ -37483,7 +37568,7 @@ function InlineTextToolbar({
   session,
   iframe
 }) {
-  const [placement, setPlacement] = useState46(null);
+  const [placement, setPlacement] = useState47(null);
   const refresh = useCallback53(() => {
     setPlacement(session && iframe ? placeOverSelection(session.element, iframe) : null);
   }, [session, iframe]);
@@ -37673,7 +37758,7 @@ function toPickerColour(value, doc) {
 }
 
 // src/hooks/useInlineTextEdit.ts
-import { useCallback as useCallback54, useEffect as useEffect49, useRef as useRef70, useState as useState47 } from "react";
+import { useCallback as useCallback54, useEffect as useEffect49, useRef as useRef70, useState as useState48 } from "react";
 import { sanitizeRichTextChildren } from "@hyperframes/core/rich-text-sanitize";
 var EDITABLE = "true";
 var EDITING_OUTLINE = "2px solid #3CE6AC";
@@ -37689,7 +37774,7 @@ function useInlineTextEdit({
   onPause
 }) {
   const readOnly = usePreviewReadOnly();
-  const [session, setSession] = useState47(null);
+  const [session, setSession] = useState48(null);
   const openRef = useRef70(null);
   const framesRef = useRef70(null);
   const teardown = useCallback54(() => {
@@ -37939,7 +38024,7 @@ function useInlineTextEditing(selectionRef) {
 }
 
 // src/components/editor/useOffCanvasIndicators.ts
-import { useEffect as useEffect50, useRef as useRef72, useState as useState48 } from "react";
+import { useEffect as useEffect50, useRef as useRef72, useState as useState49 } from "react";
 
 // src/components/editor/offCanvasIndicatorGeometry.ts
 function rounded(value) {
@@ -38096,7 +38181,7 @@ function useOffCanvasIndicators({
   activeCompositionPath
 }) {
   const offCanvasElementsRef = useRef72(/* @__PURE__ */ new Map());
-  const [offCanvasRects, setOffCanvasRects] = useState48([]);
+  const [offCanvasRects, setOffCanvasRects] = useState49([]);
   const offCanvasDirtyRef = useRef72(true);
   const offCanvasSigRef = useRef72("");
   const offCanvasObserverRef = useRef72(null);
@@ -38512,7 +38597,7 @@ import {
   useLayoutEffect as useLayoutEffect6,
   useReducer,
   useRef as useRef74,
-  useState as useState49,
+  useState as useState50,
   useSyncExternalStore as useSyncExternalStore4
 } from "react";
 
@@ -39347,7 +39432,7 @@ function TopologyLens({ iframeRef, activeCompositionPath }) {
   const overlayRef = useRef74(null);
   const state = useTopologyLensState();
   const reducedMotion = useSyncExternalStore4(subscribeReducedMotion, getReducedMotion, () => false);
-  const [measured, setMeasured] = useState49(null);
+  const [measured, setMeasured] = useState50(null);
   const callId = state.phase === "hidden" ? null : state.callId;
   const handle = state.phase === "hidden" ? null : state.target.handle;
   const phase = state.phase;
@@ -39624,7 +39709,7 @@ function writeKeyframeCache(sourceFile, elementId2, data) {
 }
 
 // src/components/editor/MotionPathOverlay.tsx
-import { memo as memo26, useEffect as useEffect54, useRef as useRef76, useState as useState51 } from "react";
+import { memo as memo26, useEffect as useEffect54, useRef as useRef76, useState as useState52 } from "react";
 
 // src/hooks/gestureTransaction.ts
 var transactionCounter = 0;
@@ -40355,7 +40440,7 @@ function commitCreatePath(targetSelector, position, x, y, commit) {
 }
 
 // src/components/editor/useMotionPathData.ts
-import { useEffect as useEffect53, useRef as useRef75, useState as useState50 } from "react";
+import { useEffect as useEffect53, useRef as useRef75, useState as useState51 } from "react";
 
 // src/hooks/gsapRuntimeKeyframes.ts
 import { buildArcPath } from "@hyperframes/core/gsap-parser-acorn";
@@ -40662,13 +40747,13 @@ function hasMotionPathPlugin(iframe) {
   }
 }
 function useMotionPathData(iframeRef, selector) {
-  const [rect, setRect] = useState50(null);
-  const [geometry, setGeometry] = useState50(null);
+  const [rect, setRect] = useState51(null);
+  const [geometry, setGeometry] = useState51(null);
   const resolvedForRef = useRef75(null);
   const geometryResolved = resolvedForRef.current === selector;
-  const [visibleInPreview, setVisibleInPreview] = useState50(true);
-  const [home, setHome] = useState50(null);
-  const [pScale, setPScale] = useState50(1);
+  const [visibleInPreview, setVisibleInPreview] = useState51(true);
+  const [home, setHome] = useState51(null);
+  const [pScale, setPScale] = useState51(1);
   useEffect53(() => {
     if (!selector) {
       setRect(null);
@@ -40754,10 +40839,10 @@ var MotionPathOverlay = memo26(function MotionPathOverlay2({
     iframeRef,
     selectorFor(selection)
   );
-  const [draft, setDraft] = useState51(null);
-  const [ghost, setGhost] = useState51(null);
-  const [hoverNode, setHoverNode] = useState51(null);
-  const [kfMenu, setKfMenu] = useState51(null);
+  const [draft, setDraft] = useState52(null);
+  const [ghost, setGhost] = useState52(null);
+  const [hoverNode, setHoverNode] = useState52(null);
+  const [kfMenu, setKfMenu] = useState52(null);
   const activeKeyframePct = usePlayerStore((s) => s.activeKeyframePct);
   const timelineElement = usePlayerStore((state) => {
     if (!selection) return void 0;
@@ -41111,11 +41196,11 @@ var MotionPathOverlay = memo26(function MotionPathOverlay2({
 });
 
 // src/components/editor/SnapToolbar.tsx
-import { memo as memo27, useCallback as useCallback55, useEffect as useEffect55, useRef as useRef77, useState as useState52 } from "react";
+import { memo as memo27, useCallback as useCallback55, useEffect as useEffect55, useRef as useRef77, useState as useState53 } from "react";
 import { MagnetStraight, GridFour, Path, Ruler, FrameCorners } from "@phosphor-icons/react";
 import { jsx as jsx108, jsxs as jsxs78 } from "react/jsx-runtime";
 var SnapToolbar = memo27(function SnapToolbar2() {
-  const [gridPopoverOpen, setGridPopoverOpen] = useState52(false);
+  const [gridPopoverOpen, setGridPopoverOpen] = useState53(false);
   const { state, actions } = usePreviewOverlayContext();
   const { snapPrefs: prefs, rulerVisible, safeMarginsVisible } = state;
   const motionPathCreateAvailable = usePlayerStore((s) => s.motionPathCreateAvailable);
@@ -41327,7 +41412,7 @@ var GridOverlay = memo28(function GridOverlay2() {
 });
 
 // src/hooks/useCompositionDimensions.ts
-import { useEffect as useEffect56, useState as useState53 } from "react";
+import { useEffect as useEffect56, useState as useState54 } from "react";
 function readCompositionSizeMessage(data) {
   if (!isStageSizeMessage(data)) return null;
   const message = data;
@@ -41351,7 +41436,7 @@ function readPositiveDimensions(width, height) {
   return { width: parsedWidth, height: parsedHeight };
 }
 function useCompositionDimensions(iframeRef) {
-  const [compositionDimensions, setCompositionDimensions] = useState53(
+  const [compositionDimensions, setCompositionDimensions] = useState54(
     null
   );
   const livePreviewIframe = useLivePreviewIframe();
@@ -43519,7 +43604,7 @@ function PreviewOverlays({
 import { useCallback as useCallback61, useMemo as useMemo39 } from "react";
 
 // src/hooks/useGsapTweenCache.ts
-import { useEffect as useEffect58, useMemo as useMemo38, useRef as useRef80, useState as useState54, useCallback as useCallback60 } from "react";
+import { useEffect as useEffect58, useMemo as useMemo38, useRef as useRef80, useState as useState55, useCallback as useCallback60 } from "react";
 
 // src/hooks/gsapRuntimeReaders.ts
 import { classifyPropertyGroup as classifyPropertyGroup3 } from "@hyperframes/core/gsap-parser";
@@ -44448,9 +44533,9 @@ function getAnimationsForElement(animations, target, element) {
   );
 }
 function useGsapAnimationsForElement(projectId, sourceFile, target, version, iframeRef) {
-  const [allAnimations, setAllAnimations] = useState54([]);
-  const [multipleTimelines, setMultipleTimelines] = useState54(false);
-  const [unsupportedTimelinePattern, setUnsupportedTimelinePattern] = useState54(false);
+  const [allAnimations, setAllAnimations] = useState55([]);
+  const [multipleTimelines, setMultipleTimelines] = useState55(false);
+  const [unsupportedTimelinePattern, setUnsupportedTimelinePattern] = useState55(false);
   const lastFetchKeyRef = useRef80("");
   const retryTimerRef = useRef80(null);
   const domClipChildrenKey = usePlayerStore(
@@ -44638,7 +44723,7 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
   return { animations, multipleTimelines, unsupportedTimelinePattern };
 }
 function useGsapCacheVersion() {
-  const [version, setVersion] = useState54(0);
+  const [version, setVersion] = useState55(0);
   const bump = useCallback60(() => setVersion((v) => v + 1), []);
   return { version, bump };
 }
@@ -47146,7 +47231,7 @@ var AudioWaveform = memo30(function AudioWaveform2({
 });
 
 // src/player/components/ImageThumbnail.tsx
-import { memo as memo31, useCallback as useCallback66, useMemo as useMemo43, useRef as useRef84, useState as useState55 } from "react";
+import { memo as memo31, useCallback as useCallback66, useMemo as useMemo43, useRef as useRef84, useState as useState56 } from "react";
 import { jsx as jsx114, jsxs as jsxs83 } from "react/jsx-runtime";
 var ImageThumbnail = memo31(function ImageThumbnail2({
   imageSrc,
@@ -47157,7 +47242,7 @@ var ImageThumbnail = memo31(function ImageThumbnail2({
   priority = "visible",
   rich = false
 }) {
-  const [containerWidth, setContainerWidth] = useState55(0);
+  const [containerWidth, setContainerWidth] = useState56(0);
   const observerRef = useRef84(null);
   const request = useMemo43(
     () => ({
@@ -47327,7 +47412,7 @@ function useRenderClipContent({
   const thumbnailMode = usePlayerStore((s) => s.thumbnailMode);
   const effectiveMode = effectiveThumbnailMode(thumbnailMode);
   const sessionEpoch = usePlayerStore((s) => s.timelineSessionEpoch);
-  const contentRevision = usePlayerStore((s) => s.thumbnailContentRevision);
+  const thumbnailRevisions = usePlayerStore((s) => s.thumbnailRevisions);
   const elements = usePlayerStore((s) => s.elements);
   return useCallback67(
     // Pre-existing clip-content dispatcher; reduced by extracting renderAudioClip.
@@ -47355,7 +47440,7 @@ function useRenderClipContent({
           duration: el.duration,
           projectId: pid,
           sessionEpoch,
-          contentRevision,
+          contentRevision: thumbnailRevisionOf(thumbnailRevisions, compSrc),
           priority: context.priority,
           rich: context.rich
         });
@@ -47374,7 +47459,10 @@ function useRenderClipContent({
           duration: el.duration,
           projectId: pid,
           sessionEpoch,
-          contentRevision,
+          contentRevision: thumbnailRevisionOf(
+            thumbnailRevisions,
+            compositionPathOfPreviewUrl(activePreviewUrl)
+          ),
           priority: context.priority,
           rich: context.rich
         });
@@ -47416,7 +47504,7 @@ function useRenderClipContent({
           duration: el.duration,
           projectId: pid,
           sessionEpoch,
-          contentRevision,
+          contentRevision: thumbnailRevisionOf(thumbnailRevisions, "index.html"),
           priority: context.priority,
           rich: context.rich
         });
@@ -47430,7 +47518,7 @@ function useRenderClipContent({
       effectiveTimelineDuration,
       effectiveMode,
       sessionEpoch,
-      contentRevision,
+      thumbnailRevisions,
       elements
     ]
   );
@@ -47567,7 +47655,7 @@ var SourceEditor = memo32(function SourceEditor2({
 });
 
 // src/components/editor/PropertyPanel.tsx
-import { memo as memo36, useMemo as useMemo59, useRef as useRef116, useState as useState99 } from "react";
+import { memo as memo36, useMemo as useMemo59, useRef as useRef116, useState as useState100 } from "react";
 
 // src/components/editor/InspectorHeaderActions.tsx
 import { Eye as Eye3, EyeSlash as EyeSlash2 } from "@phosphor-icons/react";
@@ -48224,13 +48312,13 @@ function buildElementInfoText(element, sourceLabel, gsapAnimations, previewIfram
 }
 
 // src/components/editor/propertyPanelPrimitives.tsx
-import { useCallback as useCallback71, useEffect as useEffect66, useRef as useRef88, useState as useState58 } from "react";
+import { useCallback as useCallback71, useEffect as useEffect66, useRef as useRef88, useState as useState59 } from "react";
 
 // src/components/editor/propertyPanelCommitField.tsx
-import { useEffect as useEffect65, useRef as useRef87, useState as useState57 } from "react";
+import { useEffect as useEffect65, useRef as useRef87, useState as useState58 } from "react";
 
 // src/components/editor/useInspectorGestureTransaction.ts
-import { useCallback as useCallback70, useEffect as useEffect64, useRef as useRef86, useState as useState56 } from "react";
+import { useCallback as useCallback70, useEffect as useEffect64, useRef as useRef86, useState as useState57 } from "react";
 function isPromiseCommit(result) {
   return Boolean(result && typeof result.then === "function");
 }
@@ -48330,7 +48418,7 @@ function useInspectorGestureDraft({
   onPreview,
   onCommit
 }) {
-  const [draft, setDraft] = useState56(sourceValue);
+  const [draft, setDraft] = useState57(sourceValue);
   const transaction = useInspectorGestureTransaction({
     sourceValue,
     onPreview: (next) => {
@@ -48363,7 +48451,7 @@ function CommitField({
   onPreview,
   onCommit
 }) {
-  const [draft, setDraft] = useState57(value);
+  const [draft, setDraft] = useState58(value);
   const valueRef = useRef87(value);
   const draftRef = useRef87(draft);
   const inputRef = useRef87(null);
@@ -48632,7 +48720,7 @@ function SliderControl({
   onCommit
 }) {
   const track2 = useTrackDesignInput();
-  const [draft, setDraft] = useState58(value);
+  const [draft, setDraft] = useState59(value);
   const commitTimerRef = useRef88(null);
   const interactionChangedRef = useRef88(false);
   const valueRef = useRef88(value);
@@ -48750,7 +48838,7 @@ function Section({
   accessory,
   defaultCollapsed = false
 }) {
-  const [collapsed, setCollapsed] = useState58(defaultCollapsed);
+  const [collapsed, setCollapsed] = useState59(defaultCollapsed);
   const collapseIcon = /* @__PURE__ */ jsx119(
     "svg",
     {
@@ -48874,7 +48962,7 @@ function createTransformCommitHandlers({
 import { resolveEditingSections } from "@hyperframes/core/editing";
 
 // src/components/editor/propertyPanelMediaSection.tsx
-import { useEffect as useEffect67, useState as useState59 } from "react";
+import { useEffect as useEffect67, useState as useState60 } from "react";
 import {
   AUDIO_GAIN_FADER_MAX as AUDIO_GAIN_FADER_MAX2,
   AUDIO_GAIN_FADER_MIN as AUDIO_GAIN_FADER_MIN2,
@@ -48913,11 +49001,11 @@ function MediaSection({
   const sourceDuration = Number.parseFloat(element.dataAttributes["source-duration"] ?? "") || el.duration || 0;
   const mediaStartMax = Math.max(30, Math.ceil(sourceDuration || mediaStart + 10));
   const srcAttr = el.getAttribute("src") ?? "";
-  const [copied, setCopied] = useState59(false);
-  const [removeBusy, setRemoveBusy] = useState59(false);
-  const [removeProgress, setRemoveProgress] = useState59(null);
-  const [createPlate, setCreatePlate] = useState59(false);
-  const [quality, setQuality] = useState59("balanced");
+  const [copied, setCopied] = useState60(false);
+  const [removeBusy, setRemoveBusy] = useState60(false);
+  const [removeProgress, setRemoveProgress] = useState60(null);
+  const [createPlate, setCreatePlate] = useState60(false);
+  const [quality, setQuality] = useState60("balanced");
   const absoluteSrc = projectDir && srcAttr && !srcAttr.startsWith("http") ? `${projectDir}/${srcAttr}` : srcAttr;
   const projectSrc = srcAttr && !/^(?:https?:|data:|blob:)/i.test(srcAttr) ? stripQueryAndHash(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr) : "";
   const canRemoveBackground = Boolean(onRemoveBackground && isVisualMedia && projectSrc);
@@ -49231,14 +49319,14 @@ function MediaSection({
 import { isHfColorGradingActive as isHfColorGradingActive2 } from "@hyperframes/core/color-grading";
 
 // src/components/editor/propertyPanelColorGradingControls.tsx
-import { useMemo as useMemo45, useRef as useRef90, useState as useState61 } from "react";
+import { useMemo as useMemo45, useRef as useRef90, useState as useState62 } from "react";
 import {
   HF_COLOR_GRADING_PRESETS,
   normalizeHfColorGrading
 } from "@hyperframes/core/color-grading";
 
 // src/components/editor/propertyPanelColorGradingSlider.tsx
-import { useCallback as useCallback72, useEffect as useEffect68, useRef as useRef89, useState as useState60 } from "react";
+import { useCallback as useCallback72, useEffect as useEffect68, useRef as useRef89, useState as useState61 } from "react";
 import { jsx as jsx121, jsxs as jsxs87 } from "react/jsx-runtime";
 var SLIDER_THUMB_SIZE = 10;
 var SLIDER_THUMB_RADIUS = SLIDER_THUMB_SIZE / 2;
@@ -49275,8 +49363,8 @@ function ColorGradingSliderControl({
   settings
 }) {
   const track2 = useTrackDesignInput();
-  const [draftState, setDraftState] = useState60(null);
-  const [inputDraft, setInputDraft] = useState60(null);
+  const [draftState, setDraftState] = useState61(null);
+  const [inputDraft, setInputDraft] = useState61(null);
   const commitTimerRef = useRef89(null);
   const interactionChangedRef = useRef89(false);
   const valueRef = useRef89(value);
@@ -49671,10 +49759,10 @@ function ColorGradingControls({
 }) {
   const track2 = useTrackDesignInput();
   const lutInputRef = useRef90(null);
-  const [lutOpen, setLutOpen] = useState61(false);
-  const [detailSettings, setDetailSettings] = useState61(null);
-  const [lutImporting, setLutImporting] = useState61(false);
-  const [lutImportError, setLutImportError] = useState61(null);
+  const [lutOpen, setLutOpen] = useState62(false);
+  const [detailSettings, setDetailSettings] = useState62(null);
+  const [lutImporting, setLutImporting] = useState62(false);
+  const [lutImportError, setLutImportError] = useState62(null);
   const lutAssets = useMemo45(
     () => assets.filter((asset) => LUT_EXT.test(asset)).sort((a, b) => a.localeCompare(b)),
     [assets]
@@ -49955,7 +50043,7 @@ function ColorGradingControls({
 }
 
 // src/components/editor/useColorGradingController.ts
-import { useCallback as useCallback74, useEffect as useEffect70, useMemo as useMemo46, useRef as useRef92, useState as useState63 } from "react";
+import { useCallback as useCallback74, useEffect as useEffect70, useMemo as useMemo46, useRef as useRef92, useState as useState64 } from "react";
 import {
   HF_COLOR_GRADING_ATTR,
   hasHfColorGradingAuthoredValues,
@@ -50023,7 +50111,7 @@ function addStudioPendingEditFlushListener(handler) {
 }
 
 // src/components/editor/useColorGradingPreviews.ts
-import { useCallback as useCallback73, useEffect as useEffect69, useRef as useRef91, useState as useState62 } from "react";
+import { useCallback as useCallback73, useEffect as useEffect69, useRef as useRef91, useState as useState63 } from "react";
 import {
   HF_COLOR_GRADING_ACTIVE_EFFECT_KEYS,
   HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS,
@@ -50092,11 +50180,11 @@ function useColorGradingPreviews({
   previewIframeRef,
   postColorGrading
 }) {
-  const [state, setState] = useState62(() => ({
+  const [state, setState] = useState63(() => ({
     identityKey,
     previews: emptyPreviews()
   }));
-  const [request, setRequest] = useState62(null);
+  const [request, setRequest] = useState63(null);
   const animatedRef = useRef91(null);
   if (state.identityKey !== identityKey) {
     setState({ identityKey, previews: emptyPreviews() });
@@ -50368,11 +50456,11 @@ function useColorGradingController({
   onSetAttributeLive,
   onApplyScope
 }) {
-  const [grading, setGrading] = useState63(() => readColorGradingFromElement(element));
-  const [compareEnabled, setCompareEnabled] = useState63(false);
-  const [applyScope, setApplyScope] = useState63("source-file");
-  const [applyBusy, setApplyBusy] = useState63(false);
-  const [runtimeStatus, setRuntimeStatus] = useState63(() => ({
+  const [grading, setGrading] = useState64(() => readColorGradingFromElement(element));
+  const [compareEnabled, setCompareEnabled] = useState64(false);
+  const [applyScope, setApplyScope] = useState64("source-file");
+  const [applyBusy, setApplyBusy] = useState64(false);
+  const [runtimeStatus, setRuntimeStatus] = useState64(() => ({
     state: "pending",
     message: "Waiting for runtime"
   }));
@@ -50380,7 +50468,7 @@ function useColorGradingController({
     () => selectedMediaAssetPath(element, projectId),
     [element, projectId]
   );
-  const [mediaMetadata, setMediaMetadata] = useState63(null);
+  const [mediaMetadata, setMediaMetadata] = useState64(null);
   const persistTimerRef = useRef92(null);
   const pendingPersistValueRef = useRef92(void 0);
   const pendingPersistGradingRef = useRef92(null);
@@ -50893,10 +50981,10 @@ function ColorGradingSection({
 }
 
 // src/components/editor/propertyPanelSections.tsx
-import { useEffect as useEffect76, useRef as useRef97, useState as useState72 } from "react";
+import { useEffect as useEffect76, useRef as useRef97, useState as useState73 } from "react";
 
 // src/components/editor/propertyPanelColor.tsx
-import { useCallback as useCallback75, useEffect as useEffect71, useLayoutEffect as useLayoutEffect7, useRef as useRef93, useState as useState64 } from "react";
+import { useCallback as useCallback75, useEffect as useEffect71, useLayoutEffect as useLayoutEffect7, useRef as useRef93, useState as useState65 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { jsx as jsx124, jsxs as jsxs90 } from "react/jsx-runtime";
 var COLOR_PICKER_SIZE = { width: 292, height: 386 };
@@ -51015,12 +51103,12 @@ function ColorField({
   const track2 = useTrackDesignInput();
   const buttonRef = useRef93(null);
   const panelRef = useRef93(null);
-  const [open, setOpen] = useState64(false);
-  const [panelPosition, setPanelPosition] = useState64(null);
-  const [draftColor, setDraftColor] = useState64(() => colorFromCss(value));
+  const [open, setOpen] = useState65(false);
+  const [panelPosition, setPanelPosition] = useState65(null);
+  const [draftColor, setDraftColor] = useState65(() => colorFromCss(value));
   const draftColorRef = useRef93(draftColor);
   draftColorRef.current = draftColor;
-  const [hexDraft, setHexDraft] = useState64(() => toHexColor(colorFromCss(value)).toUpperCase());
+  const [hexDraft, setHexDraft] = useState65(() => toHexColor(colorFromCss(value)).toUpperCase());
   const hsv = rgbToHsv(draftColor);
   const hueColor = formatCssColor({
     ...hsvToRgb({ hue: hsv.hue, saturation: 1, value: 1 }),
@@ -51403,7 +51491,7 @@ function ColorField({
 }
 
 // src/components/editor/propertyPanelFont.tsx
-import { useEffect as useEffect72, useMemo as useMemo47, useRef as useRef94, useState as useState65 } from "react";
+import { useEffect as useEffect72, useMemo as useMemo47, useRef as useRef94, useState as useState66 } from "react";
 
 // src/components/editor/fontAssets.ts
 var FONT_EXT_RE = /\.(eot|otf|ttc|ttf|woff2?)$/i;
@@ -51520,16 +51608,16 @@ function FontFamilyField({
   const containerRef = useRef94(null);
   const inputRef = useRef94(null);
   const fontInputRef = useRef94(null);
-  const [open, setOpen] = useState65(false);
-  const [query, setQuery] = useState65("");
-  const [activeIndex, setActiveIndex] = useState65(-1);
-  const [localFonts, setLocalFonts] = useState65([]);
-  const [localFontData, setLocalFontData] = useState65([]);
-  const [googleFonts, setGoogleFonts] = useState65(() => [...POPULAR_GOOGLE_FONT_FAMILIES]);
-  const [loadingLocalFonts, setLoadingLocalFonts] = useState65(false);
-  const [loadingGoogleFonts, setLoadingGoogleFonts] = useState65(false);
-  const [importingFonts, setImportingFonts] = useState65(false);
-  const [fontNotice, setFontNotice] = useState65(null);
+  const [open, setOpen] = useState66(false);
+  const [query, setQuery] = useState66("");
+  const [activeIndex, setActiveIndex] = useState66(-1);
+  const [localFonts, setLocalFonts] = useState66([]);
+  const [localFontData, setLocalFontData] = useState66([]);
+  const [googleFonts, setGoogleFonts] = useState66(() => [...POPULAR_GOOGLE_FONT_FAMILIES]);
+  const [loadingLocalFonts, setLoadingLocalFonts] = useState66(false);
+  const [loadingGoogleFonts, setLoadingGoogleFonts] = useState66(false);
+  const [importingFonts, setImportingFonts] = useState66(false);
+  const [fontNotice, setFontNotice] = useState66(null);
   const canQueryLocalFonts = typeof window !== "undefined" && typeof window.queryLocalFonts === "function";
   const commitFontFamily = (nextValue) => {
     if (nextValue !== value) track2("select", "Font family");
@@ -51887,10 +51975,10 @@ function FontFamilyField({
 import { useEffect as useEffect74 } from "react";
 
 // src/components/panels/VariablesBindElement.tsx
-import { useMemo as useMemo48, useState as useState67 } from "react";
+import { useMemo as useMemo48, useState as useState68 } from "react";
 
 // src/components/panels/VariablesValueControls.tsx
-import { useState as useState66 } from "react";
+import { useState as useState67 } from "react";
 import { jsx as jsx126, jsxs as jsxs92 } from "react/jsx-runtime";
 var VARIABLES_INPUT_CLASS = "w-full bg-neutral-900 border border-neutral-800 rounded-sm px-2 py-1 text-[10px] text-neutral-200 focus:outline-hidden focus:border-neutral-700";
 function DraftTextInput({
@@ -51904,7 +51992,7 @@ function DraftTextInput({
   max,
   step
 }) {
-  const [draft, setDraft] = useState66(null);
+  const [draft, setDraft] = useState67(null);
   return /* @__PURE__ */ jsx126(
     "input",
     {
@@ -51945,7 +52033,7 @@ function ColorControl({
   onCommit
 }) {
   const colorValue = typeof current === "string" ? current : "#000000";
-  const [draft, setDraft] = useState66(null);
+  const [draft, setDraft] = useState67(null);
   return /* @__PURE__ */ jsxs92("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsx126(
       "input",
@@ -51977,7 +52065,7 @@ function NumberControl({
 }) {
   const numberValue = typeof current === "number" ? current : Number(current) || 0;
   const hasRange = decl.min !== void 0 && decl.max !== void 0;
-  const [dragValue, setDragValue] = useState66(null);
+  const [dragValue, setDragValue] = useState67(null);
   const commitDrag = () => {
     if (dragValue !== null && dragValue !== numberValue) onCommit(dragValue);
     setDragValue(null);
@@ -52167,8 +52255,8 @@ function VariablesBindElement({
   sdkSession,
   onBind
 }) {
-  const [activeKey, setActiveKey] = useState67(null);
-  const [idDraft, setIdDraft] = useState67("");
+  const [activeKey, setActiveKey] = useState68(null);
+  const [idDraft, setIdDraft] = useState68("");
   const actions = useMemo48(() => buildBindActions(selection, sdkSession), [selection, sdkSession]);
   if (actions.length === 0) return null;
   const active = actions.find((a) => a.key === activeKey) ?? null;
@@ -52280,7 +52368,7 @@ function uniqueId(base2, existing) {
 }
 
 // src/contexts/VariablePromoteContext.tsx
-import { useContext as useContext12, useEffect as useEffect73, useMemo as useMemo49, useState as useState68 } from "react";
+import { useContext as useContext12, useEffect as useEffect73, useMemo as useMemo49, useState as useState69 } from "react";
 import { jsx as jsx128 } from "react/jsx-runtime";
 var VariablePromoteContext = createStableContext(
   "VariablePromoteContext",
@@ -52298,7 +52386,7 @@ function VariablePromoteProvider({
   onPersistError,
   children
 }) {
-  const [revision, setRevision] = useState68(0);
+  const [revision, setRevision] = useState69(0);
   useEffect73(() => {
     if (!session) return;
     return session.on("change", () => setRevision((r) => r + 1));
@@ -52411,7 +52499,7 @@ function PromotableControl({
 }
 
 // src/components/editor/propertyPanelStyleSections.tsx
-import { useEffect as useEffect75, useRef as useRef96, useState as useState71 } from "react";
+import { useEffect as useEffect75, useRef as useRef96, useState as useState72 } from "react";
 
 // src/components/editor/gradientValue.ts
 var RADIAL_SIZE_KEYWORDS = [
@@ -52755,7 +52843,7 @@ function parseColorString(value) {
 }
 
 // src/components/editor/propertyPanelFill.tsx
-import { useMemo as useMemo50, useRef as useRef95, useState as useState69 } from "react";
+import { useMemo as useMemo50, useRef as useRef95, useState as useState70 } from "react";
 
 // src/components/icons/ReverseGradientIcon.tsx
 import { jsx as jsx130, jsxs as jsxs95 } from "react/jsx-runtime";
@@ -52828,8 +52916,8 @@ function ImageFillField({
 }) {
   const track2 = useTrackDesignInput();
   const fileInputRef = useRef95(null);
-  const [uploading, setUploading] = useState69(false);
-  const [uploadError, setUploadError] = useState69(null);
+  const [uploading, setUploading] = useState70(false);
+  const [uploadError, setUploadError] = useState70(null);
   const imageAssets = useMemo50(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
   const selectedAsset = useMemo50(
     () => resolveSelectedAsset(value, sourceFile, imageAssets),
@@ -53217,7 +53305,7 @@ function GradientField({
 }
 
 // src/components/editor/BorderRadiusEditor.tsx
-import { useCallback as useCallback76, useState as useState70 } from "react";
+import { useCallback as useCallback76, useState as useState71 } from "react";
 import { jsx as jsx132, jsxs as jsxs97 } from "react/jsx-runtime";
 var PREVIEW_W = 72;
 var PREVIEW_H = 52;
@@ -53238,7 +53326,7 @@ function BorderRadiusEditor({
   onCommit
 }) {
   const uniform = tl === tr && tr === br && br === bl;
-  const [linked, setLinked] = useState70(uniform);
+  const [linked, setLinked] = useState71(uniform);
   const maxVal = Math.max(tl, tr, br, bl, 1);
   const sTL = scaleRadius(tl, maxVal);
   const sTR = scaleRadius(tr, maxVal);
@@ -53440,7 +53528,7 @@ function StyleSections({
   const backgroundImage = styles["background-image"] ?? "none";
   const hasTextControls = isTextEditableSelection(element);
   const fillMode = backgroundImage && backgroundImage !== "none" ? backgroundImage.includes("gradient") ? "Gradient" : "Image" : "Solid";
-  const [preferredFillMode, setPreferredFillMode] = useState71(fillMode);
+  const [preferredFillMode, setPreferredFillMode] = useState72(fillMode);
   const imageUrl = extractBackgroundImageUrl(backgroundImage);
   const lastGradientRef = useRef96(
     backgroundImage.includes("gradient") ? backgroundImage : null
@@ -53897,7 +53985,7 @@ function TextAreaField({
   onCommit
 }) {
   const track2 = useTrackDesignInput();
-  const [draft, setDraft] = useState72(value);
+  const [draft, setDraft] = useState73(value);
   const textareaRef = useRef97(null);
   const commitTimerRef = useRef97(null);
   const interactionChangedRef = useRef97(false);
@@ -54208,7 +54296,7 @@ function TextSection({
 }) {
   const track2 = useTrackDesignInput();
   const hasTextControls = isTextEditableSelection(element);
-  const [activeTextFieldKey, setActiveTextFieldKey] = useState72(
+  const [activeTextFieldKey, setActiveTextFieldKey] = useState73(
     element.textFields[0]?.key ?? null
   );
   useEffect76(() => {
@@ -54309,11 +54397,11 @@ function TextSection({
 import { memo as memo35 } from "react";
 
 // src/components/editor/GsapAnimationList.tsx
-import { useCallback as useCallback79, useState as useState74 } from "react";
+import { useCallback as useCallback79, useState as useState75 } from "react";
 import { useShallow } from "zustand/react/shallow";
 
 // src/components/editor/AnimationCard.tsx
-import { memo as memo34, useCallback as useCallback78, useEffect as useEffect77, useMemo as useMemo51, useRef as useRef98, useState as useState73 } from "react";
+import { memo as memo34, useCallback as useCallback78, useEffect as useEffect77, useMemo as useMemo51, useRef as useRef98, useState as useState74 } from "react";
 import { SUPPORTED_EASES, SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
 
 // src/components/editor/gsapAnimationHelpers.ts
@@ -54831,11 +54919,11 @@ var AnimationCard = memo34(function AnimationCard2({
   onSetAllKeyframeEases,
   onUnroll
 }) {
-  const [expanded, setExpanded] = useState73(defaultExpanded);
-  const [addingProp, setAddingProp] = useState73(false);
-  const [addingFromProp, setAddingFromProp] = useState73(false);
-  const [expandedKfPct, setExpandedKfPct] = useState73(null);
-  const [focusedCollidingAnimationTargets, setFocusedCollidingAnimationTargets] = useState73();
+  const [expanded, setExpanded] = useState74(defaultExpanded);
+  const [addingProp, setAddingProp] = useState74(false);
+  const [addingFromProp, setAddingFromProp] = useState74(false);
+  const [expandedKfPct, setExpandedKfPct] = useState74(null);
+  const [focusedCollidingAnimationTargets, setFocusedCollidingAnimationTargets] = useState74();
   const cardRef = useRef98(null);
   const pendingAutoScrollRef = useRef98(false);
   useEffect77(() => {
@@ -54910,7 +54998,7 @@ var AnimationCard = memo34(function AnimationCard2({
     },
     [animation.id, onUpdateMeta]
   );
-  const [copied, setCopied] = useState73(false);
+  const [copied, setCopied] = useState74(false);
   const methodLabel = METHOD_LABELS[animation.method] ?? animation.method;
   const easeName = (animation.keyframes ? animation.keyframes.easeEach : void 0) ?? animation.ease ?? "none";
   const easeLabel = easeName.startsWith("custom(") ? "Custom curve" : EASE_LABELS[easeName] ?? easeName;
@@ -55342,7 +55430,7 @@ function GsapAnimationList({
   ...callbacks
 }) {
   const track2 = useTrackDesignInput();
-  const [addMenuOpen, setAddMenuOpen] = useState74(false);
+  const [addMenuOpen, setAddMenuOpen] = useState75(false);
   const trackedCallbacks = withTrackedGsapAnimationCallbacks(callbacks, track2);
   const { focusedEaseSegment, timelineProjectId, timelineSessionEpoch, selectedElementId } = usePlayerStore(
     useShallow((state) => ({
@@ -55416,10 +55504,10 @@ var GsapAnimationSection = memo35(function GsapAnimationSection2({
 });
 
 // src/components/editor/propertyPanel3dTransform.tsx
-import { useState as useState76 } from "react";
+import { useState as useState77 } from "react";
 
 // src/components/editor/Transform3DCube.tsx
-import { useEffect as useEffect78, useRef as useRef99, useState as useState75 } from "react";
+import { useEffect as useEffect78, useRef as useRef99, useState as useState76 } from "react";
 
 // src/components/editor/transform3dProjection.ts
 var DEG = Math.PI / 180;
@@ -55533,8 +55621,8 @@ function Transform3DCube({
   onKeyframe,
   keyframed
 }) {
-  const [draft, setDraft] = useState75(null);
-  const [depthDraft, setDepthDraft] = useState75(null);
+  const [draft, setDraft] = useState76(null);
+  const [depthDraft, setDepthDraft] = useState76(null);
   const dragRef = useRef99(null);
   const shown2 = draft ?? pose;
   const shownZ = depthDraft ?? z;
@@ -55930,7 +56018,7 @@ function PropertyPanel3dTransform({
   onConvertToKeyframes,
   onLivePreviewProps
 }) {
-  const [collapsed, setCollapsed] = useState76(false);
+  const [collapsed, setCollapsed] = useState77(false);
   const ctx3 = {
     element,
     gsapRuntimeValues,
@@ -56063,7 +56151,7 @@ function PropertyPanel3dTransform({
 }
 
 // src/components/editor/PropertyPanelFlat.tsx
-import { useEffect as useEffect98, useMemo as useMemo58, useRef as useRef115, useState as useState98 } from "react";
+import { useEffect as useEffect98, useMemo as useMemo58, useRef as useRef115, useState as useState99 } from "react";
 import { useShallow as useShallow2 } from "zustand/react/shallow";
 
 // src/components/editor/audioFxSummary.ts
@@ -56273,10 +56361,10 @@ function PropertyPanelFlatFooter({
 }
 
 // src/components/editor/propertyPanelFlatPrimitives.tsx
-import { useEffect as useEffect80, useRef as useRef101, useState as useState78 } from "react";
+import { useEffect as useEffect80, useRef as useRef101, useState as useState79 } from "react";
 
 // src/components/editor/propertyPanelFlatSliderReadout.tsx
-import { useEffect as useEffect79, useRef as useRef100, useState as useState77 } from "react";
+import { useEffect as useEffect79, useRef as useRef100, useState as useState78 } from "react";
 import { jsx as jsx147 } from "react/jsx-runtime";
 function FlatSliderReadout({
   label,
@@ -56286,9 +56374,9 @@ function FlatSliderReadout({
   onCommitText,
   onCommitted
 }) {
-  const [editing, setEditing] = useState77(false);
-  const [text, setText] = useState77("");
-  const [invalid, setInvalid] = useState77(false);
+  const [editing, setEditing] = useState78(false);
+  const [text, setText] = useState78("");
+  const [invalid, setInvalid] = useState78(false);
   const inputRef = useRef100(null);
   const editable = Boolean(onCommitText) && !disabled;
   useEffect79(() => {
@@ -56634,7 +56722,7 @@ function FlatSlider({
   onCommitText
 }) {
   const track2 = useTrackDesignInput();
-  const [draft, setDraft] = useState78(value);
+  const [draft, setDraft] = useState79(value);
   const commitTimerRef = useRef101(null);
   const lastCommitAtRef = useRef101(0);
   const pendingRef = useRef101(null);
@@ -56857,7 +56945,7 @@ function isSelectionHidden(fromTimeline, element) {
 }
 
 // src/components/editor/propertyPanelFlatTextSection.tsx
-import { useEffect as useEffect81, useState as useState79 } from "react";
+import { useEffect as useEffect81, useState as useState80 } from "react";
 import { Fragment as Fragment36, jsx as jsx151, jsxs as jsxs114 } from "react/jsx-runtime";
 var ALIGN_OPTIONS = [
   { key: "left", label: "left", node: "L" },
@@ -57066,10 +57154,10 @@ function FlatTextSection({
   onRemoveTextField
 }) {
   const track2 = useTrackDesignInput();
-  const [activeFieldKey, setActiveFieldKey] = useState79(
+  const [activeFieldKey, setActiveFieldKey] = useState80(
     element.textFields[0]?.key ?? null
   );
-  const [autoFocusFieldKey, setAutoFocusFieldKey] = useState79(null);
+  const [autoFocusFieldKey, setAutoFocusFieldKey] = useState80(null);
   useEffect81(() => {
     const nextFields = element.textFields;
     setActiveFieldKey((current) => {
@@ -57222,7 +57310,7 @@ function FlatTextLayerList({
 }
 
 // src/components/editor/propertyPanelFlatStyleSections.tsx
-import { useEffect as useEffect82, useState as useState80 } from "react";
+import { useEffect as useEffect82, useState as useState81 } from "react";
 
 // src/components/editor/propertyPanelFlatStyleHelpers.ts
 var STROKE_STYLE_OPTIONS = [
@@ -57340,7 +57428,7 @@ function FlatFillFields({
   const backgroundImage = styles["background-image"] ?? "none";
   const hasTextControls = isTextEditableSelection(element);
   const fillMode = backgroundImage && backgroundImage !== "none" ? backgroundImage.includes("gradient") ? "Gradient" : "Image" : "Solid";
-  const [preferredFillMode, setPreferredFillMode] = useState80(fillMode);
+  const [preferredFillMode, setPreferredFillMode] = useState81(fillMode);
   const imageUrl = extractBackgroundImageUrl(backgroundImage);
   useEffect82(() => {
     setPreferredFillMode(fillMode);
@@ -58233,7 +58321,7 @@ function motionSectionLabel(args) {
 }
 
 // src/components/editor/propertyPanelAudioFxGroup.tsx
-import { useMemo as useMemo54, useState as useState86 } from "react";
+import { useMemo as useMemo54, useState as useState87 } from "react";
 import {
   HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR6,
   HF_AUDIO_FX_DATA_KEY as HF_AUDIO_FX_DATA_KEY2,
@@ -58296,7 +58384,7 @@ function automationAttrValue(automation) {
 }
 
 // src/components/editor/propertyPanelFxSection.tsx
-import { useCallback as useCallback82, useEffect as useEffect85, useMemo as useMemo53, useRef as useRef103, useState as useState84 } from "react";
+import { useCallback as useCallback82, useEffect as useEffect85, useMemo as useMemo53, useRef as useRef103, useState as useState85 } from "react";
 
 // src/components/editor/audioFxRevealTarget.ts
 import { parseAutomationTarget as parseAutomationTarget2 } from "@hyperframes/core/audio-automation";
@@ -58376,7 +58464,7 @@ import { DEFAULT_CARVE } from "@hyperframes/core/audio-carve";
 import { fxAutomationTarget as fxAutomationTarget2 } from "@hyperframes/core/audio-automation";
 
 // src/components/editor/propertyPanelFxControls.tsx
-import { useCallback as useCallback80, useEffect as useEffect83, useRef as useRef102, useState as useState81 } from "react";
+import { useCallback as useCallback80, useEffect as useEffect83, useRef as useRef102, useState as useState82 } from "react";
 import { jsx as jsx157, jsxs as jsxs120 } from "react/jsx-runtime";
 function toSlider(p, value) {
   if (p.scale !== "log" || p.min <= 0) return value;
@@ -58423,11 +58511,11 @@ function FxParamRow({
   onAutomate,
   onRemoveAutomation
 }) {
-  const [dragging, setDragging] = useState81(false);
-  const [local, setLocal] = useState81(value);
+  const [dragging, setDragging] = useState82(false);
+  const [local, setLocal] = useState82(value);
   const latest = useRef102(value);
-  const [pending2, setPending] = useState81(null);
-  const [typing, setTyping] = useState81(null);
+  const [pending2, setPending] = useState82(null);
+  const [typing, setTyping] = useState82(null);
   const edited = useRef102(false);
   useEffect83(() => {
     if (!dragging) setLocal(value);
@@ -59085,7 +59173,7 @@ function CarveAnalysis({
 }
 
 // src/components/editor/propertyPanelFxEqModule.tsx
-import { useCallback as useCallback81, useEffect as useEffect84, useState as useState82 } from "react";
+import { useCallback as useCallback81, useEffect as useEffect84, useState as useState83 } from "react";
 import {
   audioEqSummary,
   HF_AUDIO_EQ_RANGE_DB
@@ -59105,8 +59193,8 @@ function Fader2({
   onPreview,
   onCommit
 }) {
-  const [local, setLocal] = useState82(band.gain);
-  const [dragging, setDragging] = useState82(false);
+  const [local, setLocal] = useState83(band.gain);
+  const [dragging, setDragging] = useState83(false);
   useEffect84(() => {
     if (!dragging) setLocal(band.gain);
   }, [band.gain, dragging]);
@@ -59243,7 +59331,7 @@ function FxEqModule({
 import { getAudioFxPreset as getAudioFxPreset3 } from "@hyperframes/core/audio-fx-presets";
 
 // src/components/editor/propertyPanelFxNodeRow.tsx
-import { useMemo as useMemo52, useState as useState83 } from "react";
+import { useMemo as useMemo52, useState as useState84 } from "react";
 import {
   defaultAudioFxParams as defaultAudioFxParams3,
   getAudioFxDef as getAudioFxDef3
@@ -59677,7 +59765,7 @@ function FxNodeRow({
     () => def && primary ? { ...def, params: def.params.filter((p) => p.key === primary) } : def,
     [def, primary]
   );
-  const [details, setDetails] = useState83(false);
+  const [details, setDetails] = useState84(false);
   if (!registryDef || !def || !onlyPrimary) return null;
   const oneKnob = primary !== null || derived !== null;
   const copy = EFFECT_COPY[node.type];
@@ -60230,9 +60318,9 @@ function FxSection({
   const presetAutomated = automatedPresets ?? /* @__PURE__ */ new Set();
   const previewCarve = onCarvePreview ?? onCarveChange;
   const showCarve = !carvedAgainstBy && (sourceOptions.length > 0 || carve !== null);
-  const [adding, setAdding] = useState84(false);
-  const [picking, setPicking] = useState84(false);
-  const [openNode, setOpenNode] = useState84(0);
+  const [adding, setAdding] = useState85(false);
+  const [picking, setPicking] = useState85(false);
+  const [openNode, setOpenNode] = useState85(0);
   const mutate = useCallback82(
     (nodes) => onChainChange({ ...chain, nodes }),
     [chain, onChainChange]
@@ -60318,7 +60406,7 @@ function FxSection({
     },
     [chain.nodes, mutate, onRemoveNodeAutomation, trackKind]
   );
-  const [carveOpen, setCarveOpen] = useState84(true);
+  const [carveOpen, setCarveOpen] = useState85(true);
   const carveNodes = useMemo53(() => chain.nodes.filter((n) => n.fromCarve), [chain.nodes]);
   const handBuilt = useMemo53(
     () => chain.nodes.map((node, i) => ({ node, i })).filter(({ node }) => !node.fromCarve && !node.fromEq),
@@ -60334,7 +60422,7 @@ function FxSection({
     }
     return out;
   }, [handBuilt]);
-  const [collapsedRuns, setCollapsedRuns] = useState84(/* @__PURE__ */ new Set());
+  const [collapsedRuns, setCollapsedRuns] = useState85(/* @__PURE__ */ new Set());
   const eqIds = useMemo53(() => audioEqIds(chain), [chain]);
   const positions = useMemo53(() => {
     const map = /* @__PURE__ */ new Map();
@@ -60342,9 +60430,9 @@ function FxSection({
     for (const { i } of handBuilt) map.set(i, ++at);
     return map;
   }, [handBuilt, eqIds.length, showCarve]);
-  const [openEq, setOpenEq] = useState84(null);
-  const [consumedRevealNonce, setConsumedRevealNonce] = useState84(null);
-  const [pendingReveal, setPendingReveal] = useState84(null);
+  const [openEq, setOpenEq] = useState85(null);
+  const [consumedRevealNonce, setConsumedRevealNonce] = useState85(null);
+  const [pendingReveal, setPendingReveal] = useState85(null);
   const rootRef = useRef103(null);
   if (revealNonce != null && revealNonce !== consumedRevealNonce) {
     setConsumedRevealNonce(revealNonce);
@@ -60857,7 +60945,7 @@ import {
 } from "@hyperframes/core/audio-groups";
 
 // src/components/editor/useFxLevelling.ts
-import { useRef as useRef106, useState as useState85 } from "react";
+import { useRef as useRef106, useState as useState86 } from "react";
 import {
   HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR5,
   serializeAudioFxChain as serializeAudioFxChain4
@@ -60915,7 +61003,7 @@ function useFxLevelling(element, chain, automation, onSetAttributeQuiet, onSetAt
     }
   };
   const auditionTransport = useAuditionTransport();
-  const [auditioningLevel, setAuditioningLevel] = useState85(false);
+  const [auditioningLevel, setAuditioningLevel] = useState86(false);
   const auditionRun = useRef106(0);
   const stopLevelAudition = () => {
     setAuditioningLevel(false);
@@ -61070,7 +61158,7 @@ function AudioFxGroup({
     }
   };
   const removeNodeAutomation = (nodeId) => removeNodesAutomation([nodeId]);
-  const [analysing, setAnalysing] = useState86(false);
+  const [analysing, setAnalysing] = useState87(false);
   const storeElements = usePlayerStore((s) => s.elements);
   const signalPath = useMemo54(() => {
     const doc = element.element?.ownerDocument;
@@ -61208,13 +61296,13 @@ function useVolumeAutomation(element, currentTime, onSetAttributeQuiet) {
 }
 
 // src/components/editor/useAudioFxRevealSection.ts
-import { useEffect as useEffect88, useState as useState87 } from "react";
+import { useEffect as useEffect88, useState as useState88 } from "react";
 function useAudioFxRevealSection(input) {
   const revealedAudioFxTarget = usePlayerStore((s) => s.revealedAudioFxTarget);
   const timelineProjectId = usePlayerStore((s) => s.timelineProjectId);
   const timelineSessionEpoch = usePlayerStore((s) => s.timelineSessionEpoch);
   const clearRevealedAudioFxTarget = usePlayerStore((s) => s.clearRevealedAudioFxTarget);
-  const [consumed, setConsumed] = useState87(null);
+  const [consumed, setConsumed] = useState88(null);
   useEffect88(() => {
     if (consumed === null) return;
     return () => clearRevealedAudioFxTarget(consumed);
@@ -61230,7 +61318,7 @@ function useAudioFxRevealSection(input) {
 }
 
 // src/components/editor/propertyPanelFlatMediaSection.tsx
-import { useEffect as useEffect89, useState as useState88 } from "react";
+import { useEffect as useEffect89, useState as useState89 } from "react";
 
 // src/components/editor/propertyPanelFlatToggle.tsx
 import { jsx as jsx169, jsxs as jsxs130 } from "react/jsx-runtime";
@@ -61384,11 +61472,11 @@ function FlatMediaSection({
   const objectFit = styles["object-fit"] || "contain";
   const objectPosition = styles["object-position"] || "center";
   const srcAttr = el.getAttribute("src") ?? "";
-  const [copied, setCopied] = useState88(false);
-  const [removeBusy, setRemoveBusy] = useState88(false);
-  const [removeProgress, setRemoveProgress] = useState88(null);
-  const [createPlate, setCreatePlate] = useState88(false);
-  const [quality, setQuality] = useState88("balanced");
+  const [copied, setCopied] = useState89(false);
+  const [removeBusy, setRemoveBusy] = useState89(false);
+  const [removeProgress, setRemoveProgress] = useState89(null);
+  const [createPlate, setCreatePlate] = useState89(false);
+  const [quality, setQuality] = useState89("balanced");
   const absoluteSrc = projectDir && srcAttr && !srcAttr.startsWith("http") ? `${projectDir}/${srcAttr}` : srcAttr;
   const projectSrc = srcAttr && !/^(?:https?:|data:|blob:)/i.test(srcAttr) ? stripQueryAndHash(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr) : "";
   const canRemoveBackground = Boolean(onRemoveBackground && isVisualMedia && projectSrc);
@@ -61748,7 +61836,7 @@ function createGsapLivePreview(iframeRef) {
 }
 
 // src/components/editor/propertyPanelFlatColorGradingSection.tsx
-import { useEffect as useEffect95, useMemo as useMemo56, useRef as useRef114, useState as useState94 } from "react";
+import { useEffect as useEffect95, useMemo as useMemo56, useRef as useRef114, useState as useState95 } from "react";
 import {
   HF_COLOR_GRADING_GRADE_PRESETS,
   normalizeHfColorGrading as normalizeHfColorGrading5,
@@ -61780,7 +61868,7 @@ function presetPreviewHandlers({
 }
 
 // src/components/editor/propertyPanelColorCurves.tsx
-import { useState as useState90 } from "react";
+import { useState as useState91 } from "react";
 
 // src/components/editor/propertyPanelColorCurveGraph.tsx
 import { useMemo as useMemo55, useRef as useRef107 } from "react";
@@ -62206,7 +62294,7 @@ function formatPointValue(value, tab, axis) {
 }
 
 // src/components/editor/propertyPanelGradingNumberField.tsx
-import { useEffect as useEffect90, useRef as useRef108, useState as useState89 } from "react";
+import { useEffect as useEffect90, useRef as useRef108, useState as useState90 } from "react";
 import { jsx as jsx172, jsxs as jsxs133 } from "react/jsx-runtime";
 function GradingNumberField({
   label,
@@ -62224,7 +62312,7 @@ function GradingNumberField({
   onSettle,
   onCancel
 }) {
-  const [draft, setDraft] = useState89(() => formatValue2(value));
+  const [draft, setDraft] = useState90(() => formatValue2(value));
   const focusedRef = useRef108(false);
   const cancelBlurRef = useRef108(false);
   const baselineRef = useRef108(value);
@@ -62313,8 +62401,8 @@ function ColorCurves({
   onPreview,
   onCommit
 }) {
-  const [activeKey, setActiveKey] = useState90("master");
-  const [selectedIndex, setSelectedIndex] = useState90(null);
+  const [activeKey, setActiveKey] = useState91("master");
+  const [selectedIndex, setSelectedIndex] = useState91(null);
   const { draft, setDraft, transaction } = useInspectorGestureDraft({
     sourceValue: value,
     onPreview,
@@ -62458,10 +62546,10 @@ function ColorCurves({
 }
 
 // src/components/editor/propertyPanelColorScopes.tsx
-import { useEffect as useEffect92, useRef as useRef110, useState as useState92 } from "react";
+import { useEffect as useEffect92, useRef as useRef110, useState as useState93 } from "react";
 
 // src/components/editor/useColorGradingScopes.ts
-import { useEffect as useEffect91, useRef as useRef109, useState as useState91 } from "react";
+import { useEffect as useEffect91, useRef as useRef109, useState as useState92 } from "react";
 
 // src/components/editor/colorGradingFrameAnalysis.ts
 import {
@@ -62618,9 +62706,9 @@ function useColorGradingScopes({
   captureFrame,
   refreshKey
 }) {
-  const [analysis, setAnalysis] = useState91(null);
-  const [status, setStatus] = useState91("idle");
-  const [refreshVersion, setRefreshVersion] = useState91(0);
+  const [analysis, setAnalysis] = useState92(null);
+  const [status, setStatus] = useState92("idle");
+  const [refreshVersion, setRefreshVersion] = useState92(0);
   const captureRef = useRef109(captureFrame);
   captureRef.current = captureFrame;
   useEffect91(() => {
@@ -62797,8 +62885,8 @@ function PropertyPanelColorScopes({
   captureFrame,
   refreshKey
 }) {
-  const [open, setOpen] = useState92(false);
-  const [mode, setMode] = useState92("waveform");
+  const [open, setOpen] = useState93(false);
+  const [mode, setMode] = useState93("waveform");
   const canvasRef = useRef110(null);
   const { analysis, status, refresh } = useColorGradingScopes({
     open,
@@ -62869,7 +62957,7 @@ function PropertyPanelColorScopes({
 }
 
 // src/components/editor/propertyPanelColorSecondary.tsx
-import { useEffect as useEffect93, useRef as useRef111, useState as useState93 } from "react";
+import { useEffect as useEffect93, useRef as useRef111, useState as useState94 } from "react";
 import {
   getHfColorGradingCapabilities,
   normalizeHfColorGrading as normalizeHfColorGrading4
@@ -62913,12 +63001,12 @@ function PropertyPanelColorSecondary({
   captureFrame,
   onCommit
 }) {
-  const [selectedIndex, setSelectedIndex] = useState93(0);
-  const [sampleFrame, setSampleFrame] = useState93(null);
-  const [samplePixels, setSamplePixels] = useState93(null);
-  const [showMatte, setShowMatte] = useState93(false);
-  const [captureError, setCaptureError] = useState93(null);
-  const [sampling, setSampling] = useState93(false);
+  const [selectedIndex, setSelectedIndex] = useState94(0);
+  const [sampleFrame, setSampleFrame] = useState94(null);
+  const [samplePixels, setSamplePixels] = useState94(null);
+  const [showMatte, setShowMatte] = useState94(false);
+  const [captureError, setCaptureError] = useState94(null);
+  const [sampling, setSampling] = useState94(false);
   const matteCanvasRef = useRef111(null);
   const activeIndex = Math.min(selectedIndex, Math.max(0, secondaries.length - 1));
   const selected = secondaries[activeIndex];
@@ -63767,8 +63855,8 @@ function FlatColorGradingSection({
 }) {
   const track2 = useTrackDesignInput();
   const lutInputRef = useRef114(null);
-  const [lutOpen, setLutOpen] = useState94(false);
-  const [detailSettingsOpen, setDetailSettingsOpen] = useState94(null);
+  const [lutOpen, setLutOpen] = useState95(false);
+  const [detailSettingsOpen, setDetailSettingsOpen] = useState95(null);
   const lutAssets = useMemo56(
     () => assets.filter((asset) => LUT_EXT.test(asset)).sort((a, b) => a.localeCompare(b)),
     [assets]
@@ -64154,7 +64242,7 @@ function FlatColorGradingSection({
 }
 
 // src/components/editor/propertyPanelFlatEffectsSection.tsx
-import { useEffect as useEffect96, useState as useState95 } from "react";
+import { useEffect as useEffect96, useState as useState96 } from "react";
 import {
   HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS as HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS3,
   HF_COLOR_GRADING_EFFECT_PRESETS,
@@ -64530,9 +64618,9 @@ function FlatEffectsSection({
 }) {
   const track2 = useTrackDesignInput();
   const activeEffects = EFFECT_SPECS.filter((effect) => grading.effects[effect.key] > 1e-4);
-  const [catalogOpen, setCatalogOpen] = useState95(activeEffects.length === 0);
-  const [catalogGroup, setCatalogGroup] = useState95(EFFECT_GROUPS[0].label);
-  const [selectedKey, setSelectedKey] = useState95(
+  const [catalogOpen, setCatalogOpen] = useState96(activeEffects.length === 0);
+  const [catalogGroup, setCatalogGroup] = useState96(EFFECT_GROUPS[0].label);
+  const [selectedKey, setSelectedKey] = useState96(
     activeEffects[0]?.key ?? null
   );
   const selectedEffect = activeEffects.find((effect) => effect.key === selectedKey) ?? activeEffects[0] ?? null;
@@ -64921,10 +65009,10 @@ function FlatEffectsSection({
 }
 
 // src/components/editor/propertyPanelFlatOverlaysSection.tsx
-import { useState as useState97 } from "react";
+import { useState as useState98 } from "react";
 
 // src/hooks/useBlockCatalog.ts
-import { useState as useState96, useEffect as useEffect97, useMemo as useMemo57 } from "react";
+import { useState as useState97, useEffect as useEffect97, useMemo as useMemo57 } from "react";
 
 // src/utils/blockCategories.ts
 import {
@@ -64967,11 +65055,11 @@ function loadCatalog() {
   return catalogRequest;
 }
 function useBlockCatalog() {
-  const [blocks, setBlocks] = useState96(() => catalogCache ?? []);
-  const [loading, setLoading] = useState96(catalogCache === null);
-  const [error, setError] = useState96(null);
-  const [search, setSearch] = useState96("");
-  const [category, setCategory] = useState96(null);
+  const [blocks, setBlocks] = useState97(() => catalogCache ?? []);
+  const [loading, setLoading] = useState97(catalogCache === null);
+  const [error, setError] = useState97(null);
+  const [search, setSearch] = useState97("");
+  const [category, setCategory] = useState97(null);
   useEffect97(() => {
     if (catalogCache) return;
     let cancelled = false;
@@ -65039,8 +65127,8 @@ function FlatOverlaysSection({
   const track2 = useTrackDesignInput();
   const { blocks, loading, error } = useBlockCatalog();
   const overlays = filterMediaTreatmentOverlays(blocks);
-  const [adding, setAdding] = useState97(null);
-  const [previewing, setPreviewing] = useState97(null);
+  const [adding, setAdding] = useState98(null);
+  const [previewing, setPreviewing] = useState98(null);
   if (loading) {
     return /* @__PURE__ */ jsx181("div", { className: "py-4 text-center text-[10px] text-panel-text-4", children: "Loading overlays\u2026" });
   }
@@ -65207,7 +65295,7 @@ function PropertyPanelFlat({
   onUpdateSegmentEase,
   onSetAllKeyframeEases
 }) {
-  const [openGroupId, setOpenGroupId] = useState98(
+  const [openGroupId, setOpenGroupId] = useState99(
     () => isTextEditableSelection(element) ? "text" : showEditableSections ? "style" : sections.media ? "media" : (
       // An `<hf-audio-group>` has no style, no layout and no media — its
       // chain is the only reason to select one. Without this the fallback
@@ -65225,7 +65313,7 @@ function PropertyPanelFlat({
   );
   const storeElements = usePlayerStore((state) => state.elements);
   const renderedElementId = scopedElementKey(element);
-  const [consumedFocus, setConsumedFocus] = useState98(focusedEaseSegment);
+  const [consumedFocus, setConsumedFocus] = useState99(focusedEaseSegment);
   if (focusedEaseSegment !== consumedFocus) {
     setConsumedFocus(focusedEaseSegment);
     const focusesThisPanel = focusedEaseSegment !== null && // A request from a previous project/session/selection is stale: it must
@@ -65246,7 +65334,7 @@ function PropertyPanelFlat({
     reveal.consume(reveal.revealNonce);
     setOpenGroupId("audio-fx");
   }
-  const [justToggledIds, setJustToggledIds] = useState98([]);
+  const [justToggledIds, setJustToggledIds] = useState99([]);
   const justToggledTimeoutRef = useRef115(null);
   const panelBodyRef = useRef115(null);
   useEffect98(() => {
@@ -65856,7 +65944,7 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
   } = props;
   const styles = element?.computedStyles ?? EMPTY_STYLES;
   const { showToast } = useStudioShellContext();
-  const [clipboardCopied, setClipboardCopied] = useState99(false);
+  const [clipboardCopied, setClipboardCopied] = useState100(false);
   const clipboardTimerRef = useRef116(void 0);
   const timelineElements = usePlayerStore((s) => s.elements);
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
@@ -66261,11 +66349,11 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
 });
 
 // src/components/editor/FileTree.tsx
-import { memo as memo38, useState as useState101, useCallback as useCallback84, useMemo as useMemo61, useRef as useRef118 } from "react";
+import { memo as memo38, useState as useState102, useCallback as useCallback84, useMemo as useMemo61, useRef as useRef118 } from "react";
 import { Plus as Plus2, FolderSimplePlus as FolderSimplePlus2 } from "@phosphor-icons/react";
 
 // src/components/editor/FileTreeNodes.tsx
-import { memo as memo37, useState as useState100, useCallback as useCallback83, useMemo as useMemo60, useRef as useRef117, useEffect as useEffect99 } from "react";
+import { memo as memo37, useState as useState101, useCallback as useCallback83, useMemo as useMemo60, useRef as useRef117, useEffect as useEffect99 } from "react";
 import {
   PencilSimple,
   Copy,
@@ -66541,8 +66629,8 @@ function InlineInput({
 }) {
   const inputRef = useRef117(null);
   const committedRef = useRef117(false);
-  const [value, setValue] = useState100(defaultValue);
-  const [error, setError] = useState100(null);
+  const [value, setValue] = useState101(defaultValue);
+  const [error, setError] = useState101(null);
   const validate = (name) => {
     if (/[/\\]/.test(name)) return "Name can't contain / or \\";
     if (name.includes("..")) return "Name can't contain ..";
@@ -66746,7 +66834,7 @@ var TreeFolder = memo37(function TreeFolder2({
   dragOverFolder,
   lintFindingsByFile
 }) {
-  const [isOpen, setIsOpen] = useState100(defaultOpen);
+  const [isOpen, setIsOpen] = useState101(defaultOpen);
   const toggle = useCallback83(() => setIsOpen((v) => !v), []);
   const children = useMemo60(() => sortChildren(node.children), [node.children]);
   const Chevron = isOpen ? ChevronDown : ChevronRight;
@@ -66881,10 +66969,10 @@ var FileTree = memo38(function FileTree2({
 }) {
   const tree = useMemo61(() => buildTree(files), [files]);
   const children = useMemo61(() => sortChildren(tree.children), [tree]);
-  const [contextMenu, setContextMenu] = useState101(null);
-  const [inlineInput, setInlineInput] = useState101(null);
-  const [deleteTarget, setDeleteTarget] = useState101(null);
-  const [dragOverFolder, setDragOverFolder] = useState101(null);
+  const [contextMenu, setContextMenu] = useState102(null);
+  const [inlineInput, setInlineInput] = useState102(null);
+  const [deleteTarget, setDeleteTarget] = useState102(null);
+  const [dragOverFolder, setDragOverFolder] = useState102(null);
   const dragSourceRef = useRef118(null);
   const hasFileOps = !!(onCreateFile || onCreateFolder || onDeleteFile || onRenameFile || onDuplicateFile);
   const handleContextMenu = useCallback84(
@@ -67147,7 +67235,7 @@ var FileTree = memo38(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState152, useCallback as useCallback177, useRef as useRef185, useMemo as useMemo77, useLayoutEffect as useLayoutEffect10 } from "react";
+import { useState as useState153, useCallback as useCallback177, useRef as useRef185, useMemo as useMemo77, useLayoutEffect as useLayoutEffect10 } from "react";
 
 // src/hooks/useRightPanelIntents.ts
 import { useCallback as useCallback85, useEffect as useEffect100, useRef as useRef119 } from "react";
@@ -67198,7 +67286,7 @@ function useRightPanelIntent() {
 }
 
 // src/components/renders/useRenderQueue.ts
-import { useState as useState103, useEffect as useEffect102, useCallback as useCallback87, useRef as useRef121, useMemo as useMemo62 } from "react";
+import { useState as useState104, useEffect as useEffect102, useCallback as useCallback87, useRef as useRef121, useMemo as useMemo62 } from "react";
 
 // src/components/renders/serverError.ts
 async function readServerError(res) {
@@ -67216,7 +67304,7 @@ async function readServerError(res) {
 }
 
 // src/components/renders/useFfmpegStatus.ts
-import { useCallback as useCallback86, useEffect as useEffect101, useRef as useRef120, useState as useState102 } from "react";
+import { useCallback as useCallback86, useEffect as useEffect101, useRef as useRef120, useState as useState103 } from "react";
 function ffmpegInstallMessage(status) {
   const title = status?.title ?? "FFmpeg not found";
   const remedy = status?.command ?? status?.hint;
@@ -67245,8 +67333,8 @@ async function probe() {
   }
 }
 function useFfmpegStatus() {
-  const [status, setStatus] = useState102(cached4);
-  const [checking, setChecking] = useState102(cached4 === null);
+  const [status, setStatus] = useState103(cached4);
+  const [checking, setChecking] = useState103(cached4 === null);
   const mounted = useRef120(true);
   useEffect101(() => {
     mounted.current = true;
@@ -67440,9 +67528,9 @@ function writeHiddenIds(projectId, ids) {
   }
 }
 function useRenderQueue(projectId, activeCompPathRef) {
-  const [jobs, setJobs] = useState103([]);
-  const [loadError, setLoadError] = useState103(null);
-  const [actionError, setActionError] = useState103(null);
+  const [jobs, setJobs] = useState104([]);
+  const [loadError, setLoadError] = useState104(null);
+  const [actionError, setActionError] = useState104(null);
   const { status: ffmpeg, checking: ffmpegChecking, recheck: recheckFfmpeg } = useFfmpegStatus();
   const ffmpegMissing = ffmpeg !== null && !ffmpeg.ok;
   const eventSourceRef = useRef121(null);
@@ -67760,7 +67848,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
 }
 
 // src/components/LintModal.tsx
-import { useRef as useRef123, useState as useState104 } from "react";
+import { useRef as useRef123, useState as useState105 } from "react";
 import { XIcon, WarningIcon, CheckCircleIcon, CaretRightIcon } from "@phosphor-icons/react";
 
 // src/components/ui/useDialogBehavior.ts
@@ -67834,8 +67922,8 @@ function LintModal({
   const errors = findings.filter((f) => f.severity === "error");
   const warnings = findings.filter((f) => f.severity === "warning");
   const hasIssues = findings.length > 0;
-  const [copied, setCopied] = useState104(false);
-  const [copyFailed, setCopyFailed] = useState104(false);
+  const [copied, setCopied] = useState105(false);
+  const [copyFailed, setCopyFailed] = useState105(false);
   const containerRef = useRef123(null);
   const { requestClose } = useDialogBehavior({ open: true, onClose, containerRef });
   const handleCopyToAgent = async () => {
@@ -67938,7 +68026,7 @@ ${pathLine}${lines.join("\n\n")}`;
 }
 
 // src/components/AskAgentModal.tsx
-import { useState as useState105, useRef as useRef124 } from "react";
+import { useState as useState106, useRef as useRef124 } from "react";
 import { jsx as jsx190, jsxs as jsxs149 } from "react/jsx-runtime";
 function getAgentModalPositionStyle(anchorPoint) {
   if (!anchorPoint || typeof window === "undefined") return void 0;
@@ -67964,7 +68052,7 @@ function AskAgentModal({
   onSubmit,
   onClose
 }) {
-  const [value, setValue] = useState105("");
+  const [value, setValue] = useState106("");
   const inputRef = useRef124(null);
   const containerRef = useRef124(null);
   const modalPositionStyle = getAgentModalPositionStyle(anchorPoint);
@@ -68130,7 +68218,7 @@ function StudioToast({ message, tone, leaving, onDismiss }) {
 }
 
 // src/components/feedback/StudioFeedbackCard.tsx
-import { memo as memo39, useState as useState106, useCallback as useCallback89, useRef as useRef125, useEffect as useEffect104 } from "react";
+import { memo as memo39, useState as useState107, useCallback as useCallback89, useRef as useRef125, useEffect as useEffect104 } from "react";
 
 // src/components/feedback/projectProvenance.ts
 var CONFIG_FILE = "hyperframes.json";
@@ -68207,13 +68295,13 @@ var THANKS_MS = 1e4;
 var INTERVIEW_URL = "https://calendar.app.google/yRHT7oPsHWcqFfFv5";
 var RATINGS = Array.from({ length: 11 }, (_, n) => n);
 var StudioFeedbackCard = memo39(function StudioFeedbackCard2() {
-  const [request, setRequest] = useState106(null);
-  const [step, setStep] = useState106("rating");
-  const [rating, setRating] = useState106(null);
-  const [followUp, setFollowUp] = useState106(FAILURE_FOLLOW_UP);
-  const [comment, setComment] = useState106("");
-  const [hint, setHint] = useState106(null);
-  const [exiting, setExiting] = useState106(false);
+  const [request, setRequest] = useState107(null);
+  const [step, setStep] = useState107("rating");
+  const [rating, setRating] = useState107(null);
+  const [followUp, setFollowUp] = useState107(FAILURE_FOLLOW_UP);
+  const [comment, setComment] = useState107("");
+  const [hint, setHint] = useState107(null);
+  const [exiting, setExiting] = useState107(false);
   const inputRef = useRef125(null);
   const timerRef = useRef125(null);
   const stateRef = useRef125({ request, rating, step });
@@ -68549,7 +68637,7 @@ function SaveQueuePausedBanner({ message, onRetry }) {
 }
 
 // src/components/ExternalFileConflictBanner.tsx
-import { useRef as useRef126, useState as useState107 } from "react";
+import { useRef as useRef126, useState as useState108 } from "react";
 import { Fragment as Fragment50, jsx as jsx195, jsxs as jsxs154 } from "react/jsx-runtime";
 function errorMessage(error) {
   return error instanceof Error ? error.message : String(error);
@@ -68708,7 +68796,7 @@ function FailedDraftReview({
 function ExternalFileConflictBanner({
   coordinator
 }) {
-  const [reviewing, setReviewing] = useState107(false);
+  const [reviewing, setReviewing] = useState108(false);
   const blocked = coordinator.blocked;
   if (!blocked) return null;
   const conflict = blocked.status === "conflict" ? blocked : null;
@@ -68779,10 +68867,10 @@ function ExternalFileConflictBanner({
 }
 
 // src/components/ProjectUnreachableBanner.tsx
-import { useEffect as useEffect105, useState as useState108 } from "react";
+import { useEffect as useEffect105, useState as useState109 } from "react";
 import { Fragment as Fragment51, jsx as jsx196, jsxs as jsxs155 } from "react/jsx-runtime";
 function ProjectUnreachableBanner({ projectId }) {
-  const [served, setServed] = useState108(null);
+  const [served, setServed] = useState109(null);
   useEffect105(() => {
     let cancelled = false;
     fetch("/api/projects").then((res) => res.ok ? res.json() : { projects: [] }).then((data) => {
@@ -68992,7 +69080,7 @@ function useCaptionSync(projectId) {
 }
 
 // src/hooks/usePersistentEditHistory.ts
-import { useCallback as useCallback91, useEffect as useEffect106, useMemo as useMemo63, useRef as useRef128, useState as useState109 } from "react";
+import { useCallback as useCallback91, useEffect as useEffect106, useMemo as useMemo63, useRef as useRef128, useState as useState110 } from "react";
 
 // src/utils/editHistory.ts
 var DEFAULT_MAX_ENTRIES = 100;
@@ -69349,8 +69437,8 @@ function usePersistentEditHistory(options) {
     [options.storage]
   );
   const now2 = options.now ?? Date.now;
-  const [state, setState] = useState109(() => createEmptyEditHistory());
-  const [loaded, setLoaded] = useState109(false);
+  const [state, setState] = useState110(() => createEmptyEditHistory());
+  const [loaded, setLoaded] = useState110(false);
   const projectId = options.projectId;
   const storeRef = useRef128(null);
   const storeProjectIdRef = useRef128(null);
@@ -69492,13 +69580,13 @@ function usePanelLayout(initialState2) {
 }
 
 // src/hooks/useFileManager.ts
-import { useState as useState111, useCallback as useCallback96, useRef as useRef132 } from "react";
+import { useState as useState112, useCallback as useCallback96, useRef as useRef132 } from "react";
 
 // src/hooks/useFileTree.ts
-import { useState as useState110, useCallback as useCallback93, useEffect as useEffect108, useMemo as useMemo64, useRef as useRef130 } from "react";
+import { useState as useState111, useCallback as useCallback93, useEffect as useEffect108, useMemo as useMemo64, useRef as useRef130 } from "react";
 var EMPTY_FILE_LIST = [];
 function useFileTree({ projectId, projectIdRef }) {
-  const [fetched, setFetched] = useState110(null);
+  const [fetched, setFetched] = useState111(null);
   const current = fetched?.projectId === projectId ? fetched : null;
   const fileTree = current?.fileTree ?? EMPTY_FILE_LIST;
   const compositionPaths = current?.compositionPaths ?? EMPTY_FILE_LIST;
@@ -69840,8 +69928,8 @@ function useFileManager({
   recordEdit,
   setRefreshKey
 }) {
-  const [editingFile, setEditingFile] = useState111(null);
-  const [revealSourceOffset, setRevealSourceOffset] = useState111(null);
+  const [editingFile, setEditingFile] = useState112(null);
+  const [revealSourceOffset, setRevealSourceOffset] = useState112(null);
   const editingPathRef = useRef132(editingFile?.path);
   editingPathRef.current = editingFile?.path;
   const projectIdRef = useRef132(projectId);
@@ -70192,7 +70280,7 @@ function useFileManager({
 }
 
 // src/hooks/usePreviewPersistence.ts
-import { useCallback as useCallback97, useRef as useRef133, useState as useState112 } from "react";
+import { useCallback as useCallback97, useRef as useRef133, useState as useState113 } from "react";
 
 // src/utils/gsapUndoRestore.ts
 function elementIdentityKey(el) {
@@ -70427,7 +70515,7 @@ function usePreviewPersistence({
   reloadPreview
 }) {
   void _recordEdit;
-  const [domEditSaveQueuePaused, setDomEditSaveQueuePaused] = useState112(null);
+  const [domEditSaveQueuePaused, setDomEditSaveQueuePaused] = useState113(null);
   const domTextCommitVersionRef = useRef133(0);
   const showToastRef = useRef133(showToast);
   showToastRef.current = showToast;
@@ -70525,9 +70613,9 @@ function usePreviewPersistence({
 }
 
 // src/hooks/usePreviewDocumentVersion.ts
-import { useCallback as useCallback98, useEffect as useEffect109, useRef as useRef134, useState as useState113 } from "react";
+import { useCallback as useCallback98, useEffect as useEffect109, useRef as useRef134, useState as useState114 } from "react";
 function usePreviewDocumentVersion() {
-  const [previewDocumentVersion, setPreviewDocumentVersion] = useState113(0);
+  const [previewDocumentVersion, setPreviewDocumentVersion] = useState114(0);
   const refreshTimersRef = useRef134([]);
   const refresh = useCallback98(() => {
     for (const id of refreshTimersRef.current) clearTimeout(id);
@@ -72910,7 +72998,7 @@ function persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps,
 import { useCallback as useCallback133 } from "react";
 
 // src/hooks/useAskAgentModal.ts
-import { useState as useState114, useCallback as useCallback111, useRef as useRef142, useEffect as useEffect110 } from "react";
+import { useState as useState115, useCallback as useCallback111, useRef as useRef142, useEffect as useEffect110 } from "react";
 function useAskAgentModal({
   activeCompPath,
   projectDir,
@@ -72919,13 +73007,13 @@ function useAskAgentModal({
   domEditSelectionRef,
   domEditSelection
 }) {
-  const [agentPromptTagSnippet, setAgentPromptTagSnippet] = useState114();
-  const [agentPromptSelectionContext, setAgentPromptSelectionContext] = useState114();
-  const [agentModalAnchorPoint, setAgentModalAnchorPoint] = useState114(
+  const [agentPromptTagSnippet, setAgentPromptTagSnippet] = useState115();
+  const [agentPromptSelectionContext, setAgentPromptSelectionContext] = useState115();
+  const [agentModalAnchorPoint, setAgentModalAnchorPoint] = useState115(
     null
   );
-  const [copiedAgentPrompt, setCopiedAgentPrompt] = useState114(false);
-  const [agentModalOpen, setAgentModalOpen] = useState114(false);
+  const [copiedAgentPrompt, setCopiedAgentPrompt] = useState115(false);
+  const [agentModalOpen, setAgentModalOpen] = useState115(false);
   const copiedAgentTimerRef = useRef142(null);
   const preloadAgentPromptSnippet = useCallback111(
     async (selection) => {
@@ -73022,7 +73110,7 @@ function useAskAgentModal({
 }
 
 // src/hooks/useDomSelection.ts
-import { useState as useState115, useCallback as useCallback112, useRef as useRef143, useEffect as useEffect112 } from "react";
+import { useState as useState116, useCallback as useCallback112, useRef as useRef143, useEffect as useEffect112 } from "react";
 
 // src/utils/domEditHelpers.ts
 function domEditSelectionsTargetSame(a, b) {
@@ -73245,10 +73333,10 @@ function useDomSelection({
   refreshKey,
   rightPanelTab
 }) {
-  const [domEditSelection, setDomEditSelection] = useState115(null);
-  const [domEditGroupSelections, setDomEditGroupSelections] = useState115([]);
-  const [domEditHoverSelection, setDomEditHoverSelection] = useState115(null);
-  const [activeGroupElement, setActiveGroupElementState] = useState115(null);
+  const [domEditSelection, setDomEditSelection] = useState116(null);
+  const [domEditGroupSelections, setDomEditGroupSelections] = useState116([]);
+  const [domEditHoverSelection, setDomEditHoverSelection] = useState116(null);
+  const [activeGroupElement, setActiveGroupElementState] = useState116(null);
   const rightPanelTabRef = useRef143(rightPanelTab);
   rightPanelTabRef.current = rightPanelTab;
   const domEditSelectionRef = useRef143(domEditSelection);
@@ -79445,7 +79533,7 @@ function useSdkSelectionSync(session, domEditSelection, domEditGroupSelections)
 import { useEffect as useEffect119 } from "react";
 
 // src/hooks/useSdkSession.ts
-import { useState as useState116, useEffect as useEffect118, useCallback as useCallback134, useRef as useRef154 } from "react";
+import { useState as useState117, useEffect as useEffect118, useCallback as useCallback134, useRef as useRef154 } from "react";
 import { openComposition as openComposition3 } from "@hyperframes/sdk";
 
 // src/hooks/externalFileReloadBus.ts
@@ -79555,7 +79643,7 @@ function disposeSdkSession(session) {
   }
 }
 function useSdkSession(projectId, activeCompPath, fileTree = [], fileTreeLoaded = false) {
-  const [ownedSession, setOwnedSession] = useState116(null);
+  const [ownedSession, setOwnedSession] = useState117(null);
   const ownedSessionRef = useRef154(null);
   const sessionOwnersRef = useRef154(/* @__PURE__ */ new WeakMap());
   const generationRef = useRef154(0);
@@ -79563,10 +79651,10 @@ function useSdkSession(projectId, activeCompPath, fileTree = [], fileTreeLoaded
   projectIdRef.current = projectId;
   const activeCompPathRef = useRef154(activeCompPath);
   activeCompPathRef.current = activeCompPath;
-  const [reloadToken, setReloadToken] = useState116(0);
+  const [reloadToken, setReloadToken] = useState117(0);
   const reloadTokenRef = useRef154(reloadToken);
   reloadTokenRef.current = reloadToken;
-  const [unreachableProject, setUnreachableProject] = useState116(null);
+  const [unreachableProject, setUnreachableProject] = useState117(null);
   useEffect118(
     () => addExternalFileReloadListener((changedPath) => {
       if (changedPath === activeCompPathRef.current) setReloadToken((token) => token + 1);
@@ -79785,7 +79873,7 @@ async function deleteExternalConflictSnapshot(projectId, filePath) {
 }
 
 // src/hooks/useExternalFileChangeCoordinator.ts
-import { useCallback as useCallback135, useEffect as useEffect120, useRef as useRef155, useState as useState117 } from "react";
+import { useCallback as useCallback135, useEffect as useEffect120, useRef as useRef155, useState as useState118 } from "react";
 function testHotAdapter() {
   const value = globalThis.__HF_STUDIO_HOT_TEST_ADAPTER__;
   if (!value || typeof value !== "object") return null;
@@ -79836,7 +79924,7 @@ function useExternalFileChangeCoordinator({
   resetSaveQueues,
   onAcceptedPersistedFileChange
 }) {
-  const [blocked, setBlocked] = useState117(null);
+  const [blocked, setBlocked] = useState118(null);
   const generationRef = useRef155(0);
   const mountedRef = useRef155(true);
   const lastEventIdentityRef = useRef155(null);
@@ -79933,7 +80021,7 @@ function useExternalFileChangeCoordinator({
         }
         if (!mountedRef.current || generation !== generationRef.current) return;
         setBlocked(null);
-        onAcceptedPersistedFileChange(path);
+        onAcceptedPersistedFileChange(path, readFileChangeAffectedCompositions(payload));
         reloadAcceptedGeneration(path);
         return;
       }
@@ -80043,7 +80131,7 @@ function useExternalFileChangeCoordinator({
       const ownWriteToken = consumeStudioWriteToken(token);
       const ownContentEcho = content != null && isSelfWriteEcho(path, content);
       if (ownWriteToken || ownContentEcho) {
-        onAcceptedPersistedFileChange(path);
+        onAcceptedPersistedFileChange(path, readFileChangeAffectedCompositions(payload));
         logReload("suppressed", {
           path,
           why: ownWriteToken ? "own write token" : "own content echo"
@@ -80088,7 +80176,7 @@ function useExternalFileChangeCoordinator({
       onUseExternalFile?.(path, external);
       await deleteConflictSnapshot?.(projectId, path);
       setBlocked(null);
-      onAcceptedPersistedFileChange(path);
+      onAcceptedPersistedFileChange(path, readFileChangeAffectedCompositions(current.payload));
       reloadAcceptedGeneration(path);
     },
     [
@@ -80170,8 +80258,10 @@ function useStudioExternalFileChanges({
 }) {
   const { flushPendingSourceSave, discardPendingSourceSave } = fileManager;
   const { drainPendingDomEditSaves, resetDomEditSaveQueueBreaker } = previewPersistence;
-  const bumpThumbnailContentRevision = usePlayerStore(
-    (state) => state.bumpThumbnailContentRevision
+  const bumpThumbnailRevisions = usePlayerStore((state) => state.bumpThumbnailRevisions);
+  const onAcceptedPersistedFileChange = useCallback136(
+    (_path, affectedCompositions) => bumpThumbnailRevisions(affectedCompositions),
+    [bumpThumbnailRevisions]
   );
   const drainPendingChanges = useCallback136(async () => {
     const source = await flushPendingSourceSave();
@@ -80200,12 +80290,12 @@ function useStudioExternalFileChanges({
     readProjectFile: fileManager.readProjectFile,
     onUseExternalFile: fileManager.updateEditingFileContent,
     resetSaveQueues: resetDomEditSaveQueueBreaker,
-    onAcceptedPersistedFileChange: bumpThumbnailContentRevision
+    onAcceptedPersistedFileChange
   });
 }
 
 // src/hooks/useBlockHandlers.ts
-import { useCallback as useCallback137, useMemo as useMemo67, useRef as useRef156, useState as useState118 } from "react";
+import { useCallback as useCallback137, useMemo as useMemo67, useRef as useRef156, useState as useState119 } from "react";
 
 // src/utils/blockInstaller.ts
 function getMaxZIndexFromIframe(iframe) {
@@ -80395,7 +80485,7 @@ function useBlockHandlers({
   setRightCollapsed,
   setRightPanelTab
 }) {
-  const [activeBlockParams, setActiveBlockParams] = useState118(null);
+  const [activeBlockParams, setActiveBlockParams] = useState119(null);
   const blockCtx = useMemo67(
     () => ({
       activeCompPath: blockCtxDeps.activeCompPath,
@@ -81644,9 +81734,9 @@ function useCaptionDetection({
 }
 
 // src/hooks/useConsoleErrorCapture.ts
-import { useCallback as useCallback141, useEffect as useEffect123, useRef as useRef160, useState as useState119 } from "react";
+import { useCallback as useCallback141, useEffect as useEffect123, useRef as useRef160, useState as useState120 } from "react";
 function useConsoleErrorCapture(previewIframe) {
-  const [consoleErrors, setConsoleErrors] = useState119(null);
+  const [consoleErrors, setConsoleErrors] = useState120(null);
   const consoleErrorsRef = useRef160([]);
   const resetErrors = useCallback141(() => {
     consoleErrorsRef.current = [];
@@ -81717,15 +81807,15 @@ function useConsoleErrorCapture(previewIframe) {
 }
 
 // src/hooks/useFrameCapture.ts
-import { useState as useState120, useCallback as useCallback142, useRef as useRef161 } from "react";
+import { useState as useState121, useCallback as useCallback142, useRef as useRef161 } from "react";
 function useFrameCapture({
   projectId,
   activeCompPath,
   showToast,
   waitForPendingDomEditSaves
 }) {
-  const [captureFrameTime, setCaptureFrameTime] = useState120(0);
-  const [capturing, setCapturing] = useState120(false);
+  const [captureFrameTime, setCaptureFrameTime] = useState121(0);
+  const [capturing, setCapturing] = useState121(false);
   const capturingRef = useRef161(false);
   useMountEffect(() => {
     setCaptureFrameTime(usePlayerStore.getState().currentTime);
@@ -81811,7 +81901,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState121, useCallback as useCallback143, useEffect as useEffect124, useRef as useRef162, useMemo as useMemo69 } from "react";
+import { useState as useState122, useCallback as useCallback143, useEffect as useEffect124, useRef as useRef162, useMemo as useMemo69 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -81822,9 +81912,9 @@ function parseFinding(f) {
   };
 }
 function useLintModal(projectId, refreshKey) {
-  const [lintModal, setLintModal] = useState121(null);
-  const [linting, setLinting] = useState121(false);
-  const [backgroundFindings, setBackgroundFindings] = useState121([]);
+  const [lintModal, setLintModal] = useState122(null);
+  const [linting, setLinting] = useState122(false);
+  const [backgroundFindings, setBackgroundFindings] = useState122([]);
   const autoLintRanRef = useRef162(false);
   const runLint = useCallback143(
     async (opts) => {
@@ -81902,13 +81992,13 @@ function useLintModal(projectId, refreshKey) {
 }
 
 // src/hooks/useToast.ts
-import { useState as useState122, useCallback as useCallback144, useRef as useRef163 } from "react";
+import { useState as useState123, useCallback as useCallback144, useRef as useRef163 } from "react";
 var AUTO_DISMISS_MS2 = 4e3;
 var EXIT_MS2 = 160;
 var MAX_TOASTS = 3;
 var nextToastId = 1;
 function useToast() {
-  const [toasts, setToasts] = useState122([]);
+  const [toasts, setToasts] = useState123([]);
   const timersRef = useRef163(/* @__PURE__ */ new Map());
   const clearTimer = useCallback144((id) => {
     const timer = timersRef.current.get(id);
@@ -81959,7 +82049,7 @@ function useToast() {
 }
 
 // src/hooks/useStudioUrlState.ts
-import { useCallback as useCallback145, useEffect as useEffect125, useRef as useRef164, useState as useState123 } from "react";
+import { useCallback as useCallback145, useEffect as useEffect125, useRef as useRef164, useState as useState124 } from "react";
 
 // src/utils/studioUrlState.ts
 var VALID_TABS = ["layers", "design", "renders", "slideshow", "variables"];
@@ -82194,7 +82284,7 @@ function useStudioUrlState({
   const hydratedSeekRef = useRef164(initialState2.currentTime == null);
   const hydratedInitialTimeRef = useRef164(initialState2.currentTime == null);
   const hydratedSelectionRef = useRef164(initialState2.selection == null);
-  const [selectionHydrated, setSelectionHydrated] = useState123(initialState2.selection == null);
+  const [selectionHydrated, setSelectionHydrated] = useState124(initialState2.selection == null);
   const pendingSelectionRef = useRef164(initialState2.selection);
   const stableTimeRef = useRef164(initialState2.currentTime);
   const selectionApplySeqRef = useRef164(0);
@@ -82425,10 +82515,10 @@ function useGlobalFileDrop(handleTimelineFileDrop) {
 }
 
 // src/hooks/useGestureCommit.ts
-import { useState as useState125, useCallback as useCallback148, useRef as useRef166, useEffect as useEffect127 } from "react";
+import { useState as useState126, useCallback as useCallback148, useRef as useRef166, useEffect as useEffect127 } from "react";
 
 // src/hooks/useGestureRecording.ts
-import { useCallback as useCallback147, useEffect as useEffect126, useRef as useRef165, useState as useState124 } from "react";
+import { useCallback as useCallback147, useEffect as useEffect126, useRef as useRef165, useState as useState125 } from "react";
 function readBasePosition(element, iframeEl) {
   let baseOpacity = 1;
   let baseScale = 1;
@@ -82571,8 +82661,8 @@ function releaseRuntimePreview(r) {
   r.runtime = null;
 }
 function useGestureRecording() {
-  const [isRecording, setIsRecording] = useState124(false);
-  const [recordingDuration, setRecordingDuration] = useState124(0);
+  const [isRecording, setIsRecording] = useState125(false);
+  const [recordingDuration, setRecordingDuration] = useState125(0);
   const isRecordingRef = useRef165(false);
   const refs = useRef165(createRecordingRefs());
   const samplesRef = useRef165(refs.current.samples);
@@ -82955,7 +83045,7 @@ function useGestureCommit({
   readOnlyPreview
 }) {
   const gestureRecording = useGestureRecording();
-  const [gestureState, setGestureState] = useState125("idle");
+  const [gestureState, setGestureState] = useState126("idle");
   const gestureStateRef = useRef166("idle");
   const recordingAutoStopRef = useRef166(void 0);
   const recordingStartTimeRef = useRef166(0);
@@ -83315,7 +83405,7 @@ var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
 import { useCallback as useCallback156 } from "react";
 
 // src/components/MediaPreview.tsx
-import { useState as useState126 } from "react";
+import { useState as useState127 } from "react";
 import { jsx as jsx198, jsxs as jsxs157 } from "react/jsx-runtime";
 function MediaErrorPanel({ name, filePath }) {
   return /* @__PURE__ */ jsxs157("div", { className: "flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-2", children: [
@@ -83345,7 +83435,7 @@ function MediaErrorPanel({ name, filePath }) {
 function MediaPreview({ projectId, filePath }) {
   const serveUrl = buildProjectApiPath(projectId, `/preview/${filePath}`);
   const name = filePath.split("/").pop() ?? filePath;
-  const [failedPath, setFailedPath] = useState126(null);
+  const [failedPath, setFailedPath] = useState127(null);
   const failed2 = failedPath === filePath;
   const setFailed = () => setFailedPath(filePath);
   if (failed2) return /* @__PURE__ */ jsx198(MediaErrorPanel, { name, filePath });
@@ -83431,7 +83521,7 @@ function MediaPreview({ projectId, filePath }) {
 }
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo41, useState as useState132, useCallback as useCallback152, useRef as useRef170, useMemo as useMemo74, useEffect as useEffect133 } from "react";
+import { memo as memo41, useState as useState133, useCallback as useCallback152, useRef as useRef170, useMemo as useMemo74, useEffect as useEffect133 } from "react";
 
 // src/components/ui/SearchInput.tsx
 import { jsx as jsx199, jsxs as jsxs158 } from "react/jsx-runtime";
@@ -83542,11 +83632,11 @@ var CATEGORY_LABELS = {
 var FILTER_ORDER = ["audio", "images", "video", "fonts"];
 
 // src/components/sidebar/AudioRow.tsx
-import { useState as useState128, useRef as useRef168, useEffect as useEffect129, useCallback as useCallback150 } from "react";
+import { useState as useState129, useRef as useRef168, useEffect as useEffect129, useCallback as useCallback150 } from "react";
 import { classifyWebAudioMediaRoute } from "@hyperframes/core/runtime/web-audio-route";
 
 // src/components/sidebar/AssetContextMenu.tsx
-import { useCallback as useCallback149, useEffect as useEffect128, useLayoutEffect as useLayoutEffect8, useRef as useRef167, useState as useState127 } from "react";
+import { useCallback as useCallback149, useEffect as useEffect128, useLayoutEffect as useLayoutEffect8, useRef as useRef167, useState as useState128 } from "react";
 import { Fragment as Fragment53, jsx as jsx200, jsxs as jsxs159 } from "react/jsx-runtime";
 function isValidAssetName(name) {
   return name.length > 0 && !/[/\\]/.test(name) && !name.includes("..");
@@ -83562,10 +83652,10 @@ function ContextMenu3({
   onAddAtPlayhead
 }) {
   const menuRef = useRef167(null);
-  const [pos, setPos] = useState127({ x, y });
-  const [mode, setMode] = useState127("menu");
-  const [renameDraft, setRenameDraft] = useState127(() => filename(asset));
-  const [renameError, setRenameError] = useState127(null);
+  const [pos, setPos] = useState128({ x, y });
+  const [mode, setMode] = useState128("menu");
+  const [renameDraft, setRenameDraft] = useState128(() => filename(asset));
+  const [renameError, setRenameError] = useState128(null);
   useLayoutEffect8(() => {
     const el = menuRef.current;
     if (!el) return;
@@ -83809,9 +83899,9 @@ function AudioRow({
   onRename,
   onAddAssetToTimeline
 }) {
-  const [contextMenu, setContextMenu] = useState128(null);
-  const [playing, setPlaying] = useState128(false);
-  const [bars, setBars] = useState128([]);
+  const [contextMenu, setContextMenu] = useState129(null);
+  const [playing, setPlaying] = useState129(false);
+  const [bars, setBars] = useState129([]);
   const audioRef = useRef168(null);
   const actxRef = useRef168(null);
   const analyserRef = useRef168(null);
@@ -84043,7 +84133,7 @@ function AudioRow({
 }
 
 // src/components/sidebar/GlobalAssetsView.tsx
-import { useEffect as useEffect130, useMemo as useMemo73, useState as useState129 } from "react";
+import { useEffect as useEffect130, useMemo as useMemo73, useState as useState130 } from "react";
 import { jsx as jsx202, jsxs as jsxs161 } from "react/jsx-runtime";
 function globalAssetRows(records, query = "") {
   const q = query.trim().toLowerCase();
@@ -84058,7 +84148,7 @@ function globalAssetRows(records, query = "") {
   }));
 }
 function GlobalAssetsView({ searchQuery }) {
-  const [records, setRecords] = useState129(null);
+  const [records, setRecords] = useState130(null);
   useEffect130(() => {
     let cancelled = false;
     fetch("/api/assets/global").then((r) => r.ok ? r.json() : { assets: [] }).then((d) => {
@@ -84102,17 +84192,17 @@ function GlobalAssetsView({ searchQuery }) {
 }
 
 // src/components/sidebar/AssetCard.tsx
-import { useState as useState131, useEffect as useEffect132, useRef as useRef169, useCallback as useCallback151 } from "react";
+import { useState as useState132, useEffect as useEffect132, useRef as useRef169, useCallback as useCallback151 } from "react";
 
 // src/components/ui/VideoFrameThumbnail.tsx
-import { useState as useState130, useEffect as useEffect131 } from "react";
+import { useState as useState131, useEffect as useEffect131 } from "react";
 import { jsx as jsx203 } from "react/jsx-runtime";
 function VideoFrameThumbnail({
   src,
   fallbackLabel
 }) {
-  const [frame, setFrame] = useState130(null);
-  const [failed2, setFailed] = useState130(false);
+  const [frame, setFrame] = useState131(null);
+  const [failed2, setFailed] = useState131(false);
   useEffect131(() => {
     setFailed(false);
     const video = document.createElement("video");
@@ -84179,7 +84269,7 @@ function openAssetContextMenu(e, setContextMenu) {
   setContextMenu({ x: e.clientX, y: e.clientY });
 }
 function useProbedDuration(src, skip) {
-  const [duration, setDuration] = useState131(void 0);
+  const [duration, setDuration] = useState132(void 0);
   useEffect132(() => {
     if (skip) return;
     let cancelled = false;
@@ -84230,9 +84320,9 @@ function AssetCard({
   onRename,
   onAddAssetToTimeline
 }) {
-  const [contextMenu, setContextMenu] = useState131(null);
-  const [hovered, setHovered] = useState131(false);
-  const [imgError, setImgError] = useState131(false);
+  const [contextMenu, setContextMenu] = useState132(null);
+  const [hovered, setHovered] = useState132(false);
+  const [imgError, setImgError] = useState132(false);
   const isCopied = copyFeedback?.path === asset && copyFeedback.ok;
   const fullName = asset.split("/").pop() ?? asset;
   const name = basename2(asset);
@@ -84374,7 +84464,7 @@ function FontRow({
   onRename,
   onAddAssetToTimeline
 }) {
-  const [contextMenu, setContextMenu] = useState131(null);
+  const [contextMenu, setContextMenu] = useState132(null);
   const name = basename2(asset);
   const extension = ext(asset);
   const isCopied = copyFeedback?.path === asset && copyFeedback.ok;
@@ -84569,14 +84659,14 @@ var AssetsTab = memo41(function AssetsTab2({
   onAddAssetToTimeline
 }) {
   const fileInputRef = useRef170(null);
-  const [dragOver, setDragOver] = useState132(false);
-  const [copyFeedback, setCopyFeedback] = useState132(null);
-  const [importing, setImporting] = useState132(false);
-  const [activeFilter, setActiveFilter] = useState132("all");
-  const [usageFilter, setUsageFilter] = useState132("all");
-  const [searchQuery, setSearchQuery] = useState132("");
-  const [viewMode, setViewMode] = useState132("local");
-  const [manifest, setManifest] = useState132(/* @__PURE__ */ new Map());
+  const [dragOver, setDragOver] = useState133(false);
+  const [copyFeedback, setCopyFeedback] = useState133(null);
+  const [importing, setImporting] = useState133(false);
+  const [activeFilter, setActiveFilter] = useState133("all");
+  const [usageFilter, setUsageFilter] = useState133("all");
+  const [searchQuery, setSearchQuery] = useState133("");
+  const [viewMode, setViewMode] = useState133("local");
+  const [manifest, setManifest] = useState133(/* @__PURE__ */ new Map());
   const manifest404Ref = useRef170(/* @__PURE__ */ new Set());
   const assetsKey = assets.join("|");
   useEffect133(() => {
@@ -84836,20 +84926,20 @@ var AssetsTab = memo41(function AssetsTab2({
 });
 
 // src/components/sidebar/BlocksTab.tsx
-import { memo as memo42, useState as useState134, useCallback as useCallback154, useRef as useRef172, useEffect as useEffect135 } from "react";
+import { memo as memo42, useState as useState135, useCallback as useCallback154, useRef as useRef172, useEffect as useEffect135 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
 
 // src/components/sidebar/PromptPreviewModal.tsx
-import { useState as useState133, useCallback as useCallback153, useEffect as useEffect134, useRef as useRef171 } from "react";
+import { useState as useState134, useCallback as useCallback153, useEffect as useEffect134, useRef as useRef171 } from "react";
 import { jsx as jsx206, jsxs as jsxs164 } from "react/jsx-runtime";
 function PromptPreviewModal({
   title,
   prompt,
   onClose
 }) {
-  const [value, setValue] = useState133(prompt);
-  const [copyState, setCopyState] = useState133("idle");
-  const [entered, setEntered] = useState133(false);
+  const [value, setValue] = useState134(prompt);
+  const [copyState, setCopyState] = useState134("idle");
+  const [entered, setEntered] = useState134(false);
   const containerRef = useRef171(null);
   const textareaRef = useRef171(null);
   const valueRef = useRef171(value);
@@ -84962,7 +85052,7 @@ function PromptPreviewModal({
 import { jsx as jsx207, jsxs as jsxs165 } from "react/jsx-runtime";
 var BlocksTab = memo42(function BlocksTab2({ onAddBlock, onPreviewBlock }) {
   const { loading, error, search, setSearch, category, setCategory, filteredBlocks } = useBlockCatalog();
-  const [promptModal, setPromptModal] = useState134(null);
+  const [promptModal, setPromptModal] = useState135(null);
   if (loading) {
     return /* @__PURE__ */ jsx207("div", { className: "flex flex-1 items-center justify-center text-neutral-600 text-xs", children: "Loading blocks\u2026" });
   }
@@ -85147,8 +85237,8 @@ function BlockCard({
   onShowPrompt,
   onPreview
 }) {
-  const [hovered, setHovered] = useState134(false);
-  const [addState, setAddState] = useState134("idle");
+  const [hovered, setHovered] = useState135(false);
+  const [addState, setAddState] = useState135("idle");
   const hoverTimer = useRef172(null);
   const colors = getCategoryColors(category);
   const needsWebGL = tags?.includes("html-in-canvas") || tags?.includes("webgl");
@@ -85327,7 +85417,7 @@ function BlockCard({
 }
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo43, useCallback as useCallback155, useEffect as useEffect136, useRef as useRef173, useState as useState135 } from "react";
+import { memo as memo43, useCallback as useCallback155, useEffect as useEffect136, useRef as useRef173, useState as useState136 } from "react";
 import { jsx as jsx208, jsxs as jsxs166 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -85397,10 +85487,10 @@ function CompCard({
   onAddToTimeline,
   contentRevision
 }) {
-  const [hovered, setHovered] = useState135(false);
-  const [stageSize, setStageSize] = useState135(DEFAULT_PREVIEW_STAGE);
-  const [livePreviewLoaded, setLivePreviewLoaded] = useState135(false);
-  const [failedThumbnailUrl, setFailedThumbnailUrl] = useState135(null);
+  const [hovered, setHovered] = useState136(false);
+  const [stageSize, setStageSize] = useState136(DEFAULT_PREVIEW_STAGE);
+  const [livePreviewLoaded, setLivePreviewLoaded] = useState136(false);
+  const [failedThumbnailUrl, setFailedThumbnailUrl] = useState136(null);
   const iframeRef = useRef173(null);
   const hoverTimer = useRef173(null);
   const syncTimer = useRef173(null);
@@ -85627,7 +85717,7 @@ var CompositionsTab = memo43(function CompositionsTab2({
   isRendering,
   lintFindingsByFile
 }) {
-  const contentRevision = usePlayerStore((state) => state.thumbnailContentRevision);
+  const thumbnailRevisions = usePlayerStore((state) => state.thumbnailRevisions);
   if (compositions.length === 0) {
     return /* @__PURE__ */ jsx208("div", { className: "flex-1 flex items-center justify-center px-4", children: /* @__PURE__ */ jsx208("p", { className: "text-xs text-neutral-600 text-center", children: "No compositions found" }) });
   }
@@ -85643,7 +85733,7 @@ var CompositionsTab = memo43(function CompositionsTab2({
       onAddToTimeline: onAddToTimeline ? () => onAddToTimeline(comp) : void 0,
       isRendering,
       lintInfo: lintFindingsByFile?.get(comp),
-      contentRevision
+      contentRevision: thumbnailRevisionOf(thumbnailRevisions, comp)
     },
     `${projectId}:${comp}`
   )) });
@@ -85883,10 +85973,10 @@ function CodeBody({
 import { useCallback as useCallback172 } from "react";
 
 // src/components/editor/LayersPanel.tsx
-import { memo as memo44, useState as useState137, useCallback as useCallback158, useEffect as useEffect137, useRef as useRef175 } from "react";
+import { memo as memo44, useState as useState138, useCallback as useCallback158, useEffect as useEffect137, useRef as useRef175 } from "react";
 
 // src/components/editor/useLayerDrag.ts
-import { useRef as useRef174, useState as useState136, useCallback as useCallback157 } from "react";
+import { useRef as useRef174, useState as useState137, useCallback as useCallback157 } from "react";
 var DRAG_THRESHOLD_PX4 = 4;
 function isLayerDraggable(layer) {
   if (!(layer.selector || layer.id)) return false;
@@ -85954,8 +86044,8 @@ function useLayerDrag({
   onSingleSibling
 }) {
   const dragRef = useRef174(null);
-  const [dragKey, setDragKey] = useState136(null);
-  const [insertionLineY, setInsertionLineY] = useState136(null);
+  const [dragKey, setDragKey] = useState137(null);
+  const [insertionLineY, setInsertionLineY] = useState137(null);
   const handleRowPointerDown = useCallback157(
     (layerIndex, e) => {
       if (e.button !== 0) return;
@@ -86157,8 +86247,8 @@ var LayersPanel = memo44(function LayersPanel2() {
     handleDomZIndexReorderCommit,
     setActiveGroupElement
   } = useDomEditContext();
-  const [layers, setLayers] = useState137([]);
-  const [collapsed, setCollapsed] = useState137({});
+  const [layers, setLayers] = useState138([]);
+  const [collapsed, setCollapsed] = useState138({});
   const prevDocVersionRef = useRef175(0);
   const scrollContainerRef = useRef175(null);
   const mirrorLayerReorderToTimeline = useLayerReorderTimelineMirror();
@@ -86497,13 +86587,13 @@ var LayersPanel = memo44(function LayersPanel2() {
 });
 
 // src/captions/components/CaptionPropertyPanel.tsx
-import { memo as memo46, useCallback as useCallback160, useState as useState139 } from "react";
+import { memo as memo46, useCallback as useCallback160, useState as useState140 } from "react";
 
 // src/captions/components/CaptionAnimationPanel.tsx
 import { memo as memo45, useCallback as useCallback159 } from "react";
 
 // src/captions/components/shared.tsx
-import { useEffect as useEffect138, useRef as useRef176, useState as useState138 } from "react";
+import { useEffect as useEffect138, useRef as useRef176, useState as useState139 } from "react";
 import { jsx as jsx213, jsxs as jsxs170 } from "react/jsx-runtime";
 var inputCls = "w-full bg-neutral-900 border border-neutral-800 rounded-sm px-1.5 py-0.5 text-2xs text-neutral-200 font-mono outline-hidden focus:border-studio-accent disabled:opacity-40 disabled:cursor-not-allowed";
 function Section2({ label, children }) {
@@ -86528,7 +86618,7 @@ function NumberField2({
   ariaLabel,
   onCommit
 }) {
-  const [draft, setDraft] = useState138(null);
+  const [draft, setDraft] = useState139(null);
   const focusedRef = useRef176(false);
   useEffect138(() => {
     if (!focusedRef.current) setDraft(null);
@@ -86824,7 +86914,7 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
   const selectedGroupId = useCaptionStore((s) => s.selectedGroupId);
   const updateSelectedStyle = useCaptionStore((s) => s.updateSelectedStyle);
   const updateGroupStyle = useCaptionStore((s) => s.updateGroupStyle);
-  const [activeTab, setActiveTab] = useState139("style");
+  const [activeTab, setActiveTab] = useState140("style");
   const firstSegmentId = selectedSegmentIds.size > 0 ? [...selectedSegmentIds][0] : void 0;
   const firstSegment = model?.segments.get(firstSegmentId ?? "");
   let ownerGroupId = null;
@@ -87022,7 +87112,7 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
 });
 
 // src/components/editor/BlockParamsPanel.tsx
-import { memo as memo47, useCallback as useCallback161, useEffect as useEffect139, useRef as useRef177, useState as useState140 } from "react";
+import { memo as memo47, useCallback as useCallback161, useEffect as useEffect139, useRef as useRef177, useState as useState141 } from "react";
 import { jsx as jsx216, jsxs as jsxs173 } from "react/jsx-runtime";
 var BlockParamsPanel = memo47(function BlockParamsPanel2({
   blockName,
@@ -87033,7 +87123,7 @@ var BlockParamsPanel = memo47(function BlockParamsPanel2({
 }) {
   const fileManager = useFileManagerContextOptional();
   const { setRefreshKey } = useStudioPlaybackContext();
-  const [values, setValues] = useState140(() => {
+  const [values, setValues] = useState141(() => {
     const initial = {};
     for (const p of params) {
       initial[p.key] = p.default;
@@ -87043,7 +87133,7 @@ var BlockParamsPanel = memo47(function BlockParamsPanel2({
   const appliedRef = useRef177(
     Object.fromEntries(params.map((p) => [p.key, p.default]))
   );
-  const [commitState, setCommitState] = useState140({ tone: "idle" });
+  const [commitState, setCommitState] = useState141({ tone: "idle" });
   const commitTimersRef = useRef177(/* @__PURE__ */ new Map());
   const commitParamNow = useCallback161(
     async (key2, nextValue) => {
@@ -87253,12 +87343,12 @@ function ParamControl({
 import { memo as memo51 } from "react";
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo50, useState as useState143, useRef as useRef179, useEffect as useEffect141, useLayoutEffect as useLayoutEffect9, useId as useId7 } from "react";
+import { memo as memo50, useState as useState144, useRef as useRef179, useEffect as useEffect141, useLayoutEffect as useLayoutEffect9, useId as useId7 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 import { CANVAS_DIMENSIONS } from "@hyperframes/parsers";
 
 // src/components/renders/RenderQueueItem.tsx
-import { memo as memo48, useCallback as useCallback162, useState as useState141 } from "react";
+import { memo as memo48, useCallback as useCallback162, useState as useState142 } from "react";
 import { Fragment as Fragment58, jsx as jsx217, jsxs as jsxs174 } from "react/jsx-runtime";
 function formatDuration2(ms) {
   if (ms < 1e3) return `${ms}ms`;
@@ -87277,9 +87367,9 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
   onDelete,
   onCancel
 }) {
-  const [hovered, setHovered] = useState141(false);
-  const [videoReady, setVideoReady] = useState141(false);
-  const [confirmingDelete, setConfirmingDelete] = useState141(false);
+  const [hovered, setHovered] = useState142(false);
+  const [videoReady, setVideoReady] = useState142(false);
+  const [confirmingDelete, setConfirmingDelete] = useState142(false);
   const fileSrc = buildProjectApiPath(projectId, `/renders/file/${job.filename}`);
   const handleOpen = useCallback162(() => {
     window.open(fileSrc, "_blank");
@@ -87484,7 +87574,7 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
 });
 
 // src/components/renders/FfmpegRequiredNotice.tsx
-import { memo as memo49, useEffect as useEffect140, useRef as useRef178, useState as useState142 } from "react";
+import { memo as memo49, useEffect as useEffect140, useRef as useRef178, useState as useState143 } from "react";
 import { jsx as jsx218, jsxs as jsxs175 } from "react/jsx-runtime";
 var DOWNLOAD_URL = "https://ffmpeg.org/download.html";
 var CUE_MS = 1600;
@@ -87494,8 +87584,8 @@ var FfmpegRequiredNotice = memo49(function FfmpegRequiredNotice2({
   checking,
   onRecheck
 }) {
-  const [copied, setCopied] = useState142(false);
-  const [recheckFailed, setRecheckFailed] = useState142(false);
+  const [copied, setCopied] = useState143(false);
+  const [recheckFailed, setRecheckFailed] = useState143(false);
   const wasChecking = useRef178(false);
   const cueTimer = useRef178(void 0);
   useEffect140(() => {
@@ -87625,8 +87715,8 @@ var FORMAT_INFO = {
 };
 var FORMAT_PANEL_SIZE = { width: 208, height: 150 };
 function FormatInfoTooltip({ format }) {
-  const [open, setOpen] = useState143(false);
-  const [position, setPosition] = useState143(null);
+  const [open, setOpen] = useState144(false);
+  const [position, setPosition] = useState144(null);
   const triggerRef = useRef179(null);
   const timeoutRef = useRef179(void 0);
   const panelId = useId7();
@@ -87747,10 +87837,10 @@ function FormatExportButton({
   onRecheckFfmpeg
 }) {
   const persisted = getPersistedRenderSettings();
-  const [format, setFormat] = useState143(persisted.format);
-  const [quality, setQuality] = useState143(persisted.quality);
-  const [resolution, setResolution] = useState143("auto");
-  const [fps, setFps] = useState143(persisted.fps);
+  const [format, setFormat] = useState144(persisted.format);
+  const [quality, setQuality] = useState144(persisted.quality);
+  const [resolution, setResolution] = useState144("auto");
+  const [fps, setFps] = useState144(persisted.fps);
   const missingFfmpeg = ffmpeg && !ffmpeg.ok ? ffmpeg : null;
   const showQuality = format !== "mov";
   return /* @__PURE__ */ jsxs176("div", { className: "flex flex-col gap-3", children: [
@@ -88032,11 +88122,11 @@ var RenderQueuePanel = memo51(function RenderQueuePanel2() {
 });
 
 // src/components/panels/SlideshowPanel.tsx
-import { useState as useState145, useEffect as useEffect142, useCallback as useCallback164, useRef as useRef180 } from "react";
+import { useState as useState146, useEffect as useEffect142, useCallback as useCallback164, useRef as useRef180 } from "react";
 import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
-import { useState as useState144, useCallback as useCallback163, useId as useId8 } from "react";
+import { useState as useState145, useCallback as useCallback163, useId as useId8 } from "react";
 import { jsx as jsx221, jsxs as jsxs177 } from "react/jsx-runtime";
 function SectionHeader({
   children,
@@ -88222,7 +88312,7 @@ function BranchTree({
   selectedSequenceId,
   onSelectBranchSlide
 }) {
-  const [newLabel, setNewLabel] = useState144("");
+  const [newLabel, setNewLabel] = useState145("");
   const inputId = useId8();
   const handleCreate = useCallback163(() => {
     const label = newLabel.trim();
@@ -88283,9 +88373,9 @@ function BranchItem({
   selectedSequenceId,
   onSelectBranchSlide
 }) {
-  const [editing, setEditing] = useState144(false);
-  const [draft, setDraft] = useState144(seq.label);
-  const [confirmingDelete, setConfirmingDelete] = useState144(false);
+  const [editing, setEditing] = useState145(false);
+  const [draft, setDraft] = useState145(seq.label);
+  const [confirmingDelete, setConfirmingDelete] = useState145(false);
   const commitRename = useCallback163(() => {
     const label = draft.trim();
     if (label && label !== seq.label) onRename(seq.id, label);
@@ -88413,8 +88503,8 @@ function HotspotTool({
   onAddHotspot,
   onRemoveHotspot
 }) {
-  const [targetSequenceId, setTargetSequenceId] = useState144("");
-  const [hotspotLabel, setHotspotLabel] = useState144("");
+  const [targetSequenceId, setTargetSequenceId] = useState145("");
+  const [hotspotLabel, setHotspotLabel] = useState145("");
   const hotspots = slide?.hotspots ?? [];
   const selectedElementId = domEditSelection?.element?.id ?? null;
   const selectedHfId = domEditSelection?.hfId ?? null;
@@ -88707,19 +88797,19 @@ function makeSlideshowNotesController() {
 function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   const { editingFile } = useFileManagerContext();
   const compHtml = editingFile?.content ?? null;
-  const [manifest, setManifest] = useState145(() => {
+  const [manifest, setManifest] = useState146(() => {
     if (!compHtml) return { slides: [] };
     return safeParseManifest(compHtml);
   });
-  const [selectedSceneId, setSelectedSceneId] = useState145(null);
-  const [selectedSequenceId, setSelectedSequenceId] = useState145(null);
-  const [expandedSections, setExpandedSections] = useState145(
+  const [selectedSceneId, setSelectedSceneId] = useState146(null);
+  const [selectedSequenceId, setSelectedSequenceId] = useState146(null);
+  const [expandedSections, setExpandedSections] = useState146(
     () => /* @__PURE__ */ new Set(["slides", "inspector"])
   );
-  const [persistError, setPersistError] = useState145(false);
-  const [retrying, setRetrying] = useState145(false);
+  const [persistError, setPersistError] = useState146(false);
+  const [retrying, setRetrying] = useState146(false);
   const undoStackRef = useRef180([]);
-  const [undoDepth, setUndoDepth] = useState145(0);
+  const [undoDepth, setUndoDepth] = useState146(0);
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { domEditSelection } = useDomEditSelectionContext();
   const manifestRef = useRef180(manifest);
@@ -89048,7 +89138,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo52, useCallback as useCallback168, useEffect as useEffect144, useMemo as useMemo75, useState as useState149 } from "react";
+import { memo as memo52, useCallback as useCallback168, useEffect as useEffect144, useMemo as useMemo75, useState as useState150 } from "react";
 
 // src/hooks/useVariablesPersist.ts
 import { useCallback as useCallback165 } from "react";
@@ -89096,10 +89186,10 @@ function useVariablesPersist({
 }
 
 // src/components/panels/VariablesOtherCompositions.tsx
-import { useCallback as useCallback167, useState as useState148 } from "react";
+import { useCallback as useCallback167, useState as useState149 } from "react";
 
 // src/hooks/useProjectCompositionVariables.ts
-import { useCallback as useCallback166, useEffect as useEffect143, useState as useState146 } from "react";
+import { useCallback as useCallback166, useEffect as useEffect143, useState as useState147 } from "react";
 import { openComposition as openComposition4 } from "@hyperframes/sdk";
 async function readGroup(path, readProjectFile) {
   let content;
@@ -89122,7 +89212,7 @@ async function readGroup(path, readProjectFile) {
   }
 }
 function useProjectCompositionVariables(fileTree, excludePath, readProjectFile, refreshKey) {
-  const [groups, setGroups] = useState146([]);
+  const [groups, setGroups] = useState147([]);
   useEffect143(() => {
     let cancelled = false;
     const htmlFiles = fileTree.filter((p) => p.endsWith(".html") && p !== excludePath);
@@ -89172,7 +89262,7 @@ function useEditVariablesInFile(deps) {
 }
 
 // src/components/panels/VariablesDeclarationForm.tsx
-import { useState as useState147 } from "react";
+import { useState as useState148 } from "react";
 import { jsx as jsx223, jsxs as jsxs179 } from "react/jsx-runtime";
 var VARIABLE_TYPES = [
   "string",
@@ -89314,8 +89404,8 @@ function DeclarationForm({
   onSubmit,
   onCancel
 }) {
-  const [draft, setDraft] = useState147(initial);
-  const [error, setError] = useState147(null);
+  const [draft, setDraft] = useState148(initial);
+  const [error, setError] = useState148(null);
   const editingExisting = initial.id.length > 0;
   const set = (patch) => setDraft((d) => ({ ...d, ...patch }));
   const submit = () => {
@@ -89505,7 +89595,7 @@ function VariablesOtherCompositions({
   recordEdit,
   reloadPreview
 }) {
-  const [selfRefresh, setSelfRefresh] = useState148(0);
+  const [selfRefresh, setSelfRefresh] = useState149(0);
   const groups = useProjectCompositionVariables(
     fileTree,
     excludePath,
@@ -89518,7 +89608,7 @@ function VariablesOtherCompositions({
     recordEdit,
     reloadPreview
   });
-  const [editingKey, setEditingKey] = useState148(null);
+  const [editingKey, setEditingKey] = useState149(null);
   const onSave = useCallback167(
     (path, decl) => {
       setEditingKey(null);
@@ -89728,13 +89818,13 @@ var VariablesPanel = memo52(function VariablesPanel2({
   const effectiveCompPath = activeCompPath ?? resolveMasterCompositionPath(compositions);
   const previewValues = usePreviewVariablesStore((s) => s.values);
   const setPreviewValues = usePreviewVariablesStore((s) => s.setValues);
-  const [revision, setRevision] = useState149(0);
+  const [revision, setRevision] = useState150(0);
   useEffect144(() => {
     if (!sdkSession) return;
     return sdkSession.on("change", () => setRevision((r) => r + 1));
   }, [sdkSession]);
-  const [addOpen, setAddOpen] = useState149(false);
-  const [editingId, setEditingId] = useState149(null);
+  const [addOpen, setAddOpen] = useState150(false);
+  const [editingId, setEditingId] = useState150(null);
   const persistVariables = useVariablesPersist({
     sdkSession,
     activeCompPath: effectiveCompPath,
@@ -91612,7 +91702,7 @@ function StudioSplash({ waiting }) {
 }
 
 // src/hooks/useServerConnection.ts
-import { useEffect as useEffect148, useState as useState150 } from "react";
+import { useEffect as useEffect148, useState as useState151 } from "react";
 async function resolveHashProject(id) {
   try {
     const res = await fetch(`/api/projects/${encodeURIComponent(id)}`);
@@ -91642,9 +91732,9 @@ function reportHashVerdict(stage, verdict) {
   });
 }
 function useServerConnection() {
-  const [projectId, setProjectId] = useState150(null);
-  const [resolving, setResolving] = useState150(true);
-  const [waitingForServer, setWaitingForServer] = useState150(false);
+  const [projectId, setProjectId] = useState151(null);
+  const [resolving, setResolving] = useState151(true);
+  const [waitingForServer, setWaitingForServer] = useState151(false);
   useMountEffect(() => {
     const hashProjectId = parseProjectIdFromHash(window.location.hash);
     let cancelled = false;
@@ -91735,7 +91825,7 @@ function useTimelineAddAtPlayhead(addAsset, addComposition) {
 }
 
 // src/hooks/useActiveComposition.ts
-import { useState as useState151 } from "react";
+import { useState as useState152 } from "react";
 
 // src/hooks/useHydrateActiveCompPathFromUrl.ts
 import { useEffect as useEffect150 } from "react";
@@ -91839,8 +91929,8 @@ function useActiveComposition({
   setEditingFile,
   showToast
 }) {
-  const [activeCompPath, setActiveCompPath] = useState151(null);
-  const [activeCompPathHydrated, setActiveCompPathHydrated] = useState151(
+  const [activeCompPath, setActiveCompPath] = useState152(null);
+  const [activeCompPathHydrated, setActiveCompPathHydrated] = useState152(
     () => isHydratedFromUrlState(initialUrlStateRef.current)
   );
   useResetSelectionOnProjectSwitch({
@@ -91880,12 +91970,12 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   const { projectId, resolving, waitingForServer } = useServerConnection();
   const initialUrlStateRef = useRef185(readStudioUrlStateFromWindow());
   useStudioSessionStart(projectId, resolving, waitingForServer);
-  const [compIdToSrc, setCompIdToSrc] = useState152(/* @__PURE__ */ new Map());
+  const [compIdToSrc, setCompIdToSrc] = useState153(/* @__PURE__ */ new Map());
   const previewIframe = useOwnPreviewIframe();
-  const [compositionLoading, setCompositionLoading] = useState152(true);
-  const [refreshKey, setRefreshKey] = useState152(0);
+  const [compositionLoading, setCompositionLoading] = useState153(true);
+  const [refreshKey, setRefreshKey] = useState153(0);
   const [previewDocumentVersion, refreshPreviewDocumentVersion] = usePreviewDocumentVersion();
-  const [blockPreview, setBlockPreview] = useState152(null);
+  const [blockPreview, setBlockPreview] = useState153(null);
   const previewIframeRef = useRef185(null);
   const captionEditMode = useCaptionStore((s) => s.isEditMode);
   const captionHasSelection = useCaptionStore((s) => s.selectedSegmentIds.size > 0);
@@ -92387,10 +92477,10 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
 }
 
 // src/hooks/useElementPicker.ts
-import { useState as useState153, useCallback as useCallback178, useRef as useRef186 } from "react";
+import { useState as useState154, useCallback as useCallback178, useRef as useRef186 } from "react";
 function useElementPicker(iframeRef, options) {
-  const [isPickMode, setIsPickMode] = useState153(false);
-  const [pickedElement, setPickedElement] = useState153(null);
+  const [isPickMode, setIsPickMode] = useState154(false);
+  const [pickedElement, setPickedElement] = useState154(null);
   const activeOverrideRef = useRef186(null);
   const getActiveIframe = useCallback178(() => {
     return activeOverrideRef.current ?? iframeRef.current;