hyperframes 0.8.70 → 0.8.71

package/dist/studio/index.js

@@ -69159,6 +69159,22 @@ function ProjectUnreachableBanner({ projectId }) {
   );
 }
 
+// src/components/CompositionMissingBanner.tsx
+import { jsx as jsx199, jsxs as jsxs158 } from "react/jsx-runtime";
+function CompositionMissingBanner({ path }) {
+  return /* @__PURE__ */ jsx199(
+    "div",
+    {
+      role: "alert",
+      className: "hf-backdrop-in absolute left-1/2 top-14 z-92 flex max-w-[calc(100vw-32px)] -translate-x-1/2 items-center gap-3 rounded-md border border-amber-500/30 bg-amber-950/85 px-4 py-2 text-[12px] font-medium text-amber-100 shadow-lg shadow-black/30",
+      children: /* @__PURE__ */ jsxs158("span", { children: [
+        /* @__PURE__ */ jsx199("strong", { children: path }),
+        " is no longer on disk. Select another composition to keep editing."
+      ] })
+    }
+  );
+}
+
 // src/captions/hooks/useCaptionSync.ts
 import { useCallback as useCallback92, useRef as useRef127 } from "react";
 function buildOverrides(model) {
@@ -79885,7 +79901,7 @@ function disposeSdkSession(session) {
     });
   }
 }
-function useSdkSession(projectId, activeCompPath, fileTree = [], fileTreeLoaded = false) {
+function useSdkSession(projectId, activeCompPath, fileTree = [], fileTreeLoaded = false, onAbsentRead) {
   const [ownedSession, setOwnedSession] = useState117(null);
   const ownedSessionRef = useRef154(null);
   const sessionOwnersRef = useRef154(/* @__PURE__ */ new WeakMap());
@@ -79898,6 +79914,21 @@ function useSdkSession(projectId, activeCompPath, fileTree = [], fileTreeLoaded
   const reloadTokenRef = useRef154(reloadToken);
   reloadTokenRef.current = reloadToken;
   const [unreachableProject, setUnreachableProject] = useState117(null);
+  const [compositionMissing, setCompositionMissing] = useState117(false);
+  const refreshedAbsentPathsRef = useRef154(/* @__PURE__ */ new Set());
+  useEffect118(() => {
+    refreshedAbsentPathsRef.current.clear();
+  }, [projectId]);
+  function handleReadFailure(read, forProjectId, forPath) {
+    const pathInTree = fileTreeLoaded ? fileTree.includes(forPath) : null;
+    setUnreachableProject(reportReadFailure(read, forProjectId, pathInTree));
+    setCompositionMissing(read.reason === "absent");
+    if (read.reason !== "absent") return;
+    const key2 = `${forProjectId}:${forPath}`;
+    if (refreshedAbsentPathsRef.current.has(key2)) return;
+    refreshedAbsentPathsRef.current.add(key2);
+    onAbsentRead?.(forPath);
+  }
   useEffect118(
     () => addExternalFileReloadListener((changedPath) => {
       if (changedPath === activeCompPathRef.current) setReloadToken((token) => token + 1);
@@ -79913,6 +79944,7 @@ function useSdkSession(projectId, activeCompPath, fileTree = [], fileTreeLoaded
     if (previous) disposeSdkSession(previous.session);
     if (!projectId || !activeCompPath) {
       setUnreachableProject(null);
+      setCompositionMissing(false);
       return () => {
         cancelled = true;
       };
@@ -79926,11 +79958,11 @@ function useSdkSession(projectId, activeCompPath, fileTree = [], fileTreeLoaded
     readProjectFileOptional(projectId, activeCompPath).then(async (read) => {
       if (cancelled) return;
       if (!read.ok) {
-        const pathInTree = fileTreeLoaded ? fileTree.includes(activeCompPath) : null;
-        setUnreachableProject(reportReadFailure(read, projectId, pathInTree));
+        handleReadFailure(read, projectId, activeCompPath);
         return;
       }
       setUnreachableProject(null);
+      setCompositionMissing(false);
       const content = read.content;
       const comp = await openComposition3(content, { history: false });
       if (cancelled) {
@@ -79996,16 +80028,17 @@ function useSdkSession(projectId, activeCompPath, fileTree = [], fileTreeLoaded
     return "published";
   }, []);
   const session = ownedSession?.projectId === projectId && ownedSession.path === activeCompPath && ownedSession.reloadToken === reloadToken ? ownedSession.session : null;
-  return { session, publish, forceReload, unreachableProject };
+  return { session, publish, forceReload, unreachableProject, compositionMissing };
 }
 
 // src/hooks/useStudioSdkSessions.ts
-function useStudioSdkSessions(projectId, activeCompPath, masterCompPath, fileTree = [], fileTreeLoaded = false) {
+function useStudioSdkSessions(projectId, activeCompPath, masterCompPath, fileTree = [], fileTreeLoaded = false, refreshFileTree) {
   const sdkHandle = useSdkSession(
     projectId,
     activeCompPath ?? masterCompPath,
     fileTree,
-    fileTreeLoaded
+    fileTreeLoaded,
+    refreshFileTree
   );
   const editFlowSdkSession = activeCompPath ? sdkHandle.session : null;
   useEffect119(() => {
@@ -80165,7 +80198,8 @@ function useExternalFileChangeCoordinator({
   readProjectFile,
   onUseExternalFile,
   resetSaveQueues,
-  onAcceptedPersistedFileChange
+  onAcceptedPersistedFileChange,
+  refreshFileTree
 }) {
   const [blocked, setBlocked] = useState118(null);
   const generationRef = useRef155(0);
@@ -80231,8 +80265,9 @@ function useExternalFileChangeCoordinator({
       logReload("reload", { path, by: "external-change coordinator" });
       reloadPreview();
       reloadSdkSession(path);
+      void refreshFileTree?.();
     },
-    [reloadPreview, reloadSdkSession]
+    [reloadPreview, reloadSdkSession, refreshFileTree]
   );
   const persistSnapshotInOrder = useCallback137(async (write) => {
     const next = snapshotWriteTailRef.current.catch(() => void 0).then(write);
@@ -80533,7 +80568,8 @@ function useStudioExternalFileChanges({
     readProjectFile: fileManager.readProjectFile,
     onUseExternalFile: fileManager.updateEditingFileContent,
     resetSaveQueues: resetDomEditSaveQueueBreaker,
-    onAcceptedPersistedFileChange
+    onAcceptedPersistedFileChange,
+    refreshFileTree: fileManager.refreshFileTree
   });
 }
 
@@ -83534,7 +83570,7 @@ function useGestureCommit({
 
 // src/components/editor/GestureTrailOverlay.tsx
 import { memo as memo40, useMemo as useMemo72 } from "react";
-import { Fragment as Fragment52, jsx as jsx199, jsxs as jsxs158 } from "react/jsx-runtime";
+import { Fragment as Fragment52, jsx as jsx200, jsxs as jsxs159 } from "react/jsx-runtime";
 var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
   samples,
   sampleCount,
@@ -83576,7 +83612,7 @@ var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
     return pts.sort((a, b) => a.pct - b.pct);
   }, [simplifiedPoints]);
   if (!canvasRect || samples.length < 2 && !simplifiedPoints) return null;
-  return /* @__PURE__ */ jsxs158(
+  return /* @__PURE__ */ jsxs159(
     "svg",
     {
       className: "pointer-events-none fixed z-50",
@@ -83588,7 +83624,7 @@ var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
       },
       viewBox: trail2 && trail2.length > 1 ? `0 0 ${canvasRect.width} ${canvasRect.height}` : `0 0 ${compositionSize?.width ?? canvasRect.width} ${compositionSize?.height ?? canvasRect.height}`,
       children: [
-        mode === "recording" && trailPoints && /* @__PURE__ */ jsx199(
+        mode === "recording" && trailPoints && /* @__PURE__ */ jsx200(
           "polyline",
           {
             points: trailPoints,
@@ -83600,8 +83636,8 @@ var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
             strokeLinejoin: "round"
           }
         ),
-        mode === "preview" && /* @__PURE__ */ jsxs158(Fragment52, { children: [
-          trailPoints && /* @__PURE__ */ jsx199(
+        mode === "preview" && /* @__PURE__ */ jsxs159(Fragment52, { children: [
+          trailPoints && /* @__PURE__ */ jsx200(
             "polyline",
             {
               points: trailPoints,
@@ -83613,7 +83649,7 @@ var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
               strokeLinecap: "round"
             }
           ),
-          simplifiedPath && /* @__PURE__ */ jsx199(
+          simplifiedPath && /* @__PURE__ */ jsx200(
             "polyline",
             {
               points: simplifiedPath,
@@ -83625,7 +83661,7 @@ var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
               strokeLinejoin: "round"
             }
           ),
-          diamondPositions.map((pt) => /* @__PURE__ */ jsx199("g", { transform: `translate(${pt.x}, ${pt.y})`, children: /* @__PURE__ */ jsx199(
+          diamondPositions.map((pt) => /* @__PURE__ */ jsx200("g", { transform: `translate(${pt.x}, ${pt.y})`, children: /* @__PURE__ */ jsx200(
             "rect",
             {
               x: "-4",
@@ -83649,10 +83685,10 @@ import { useCallback as useCallback158 } from "react";
 
 // src/components/MediaPreview.tsx
 import { useState as useState127 } from "react";
-import { jsx as jsx200, jsxs as jsxs159 } from "react/jsx-runtime";
+import { jsx as jsx201, jsxs as jsxs160 } from "react/jsx-runtime";
 function MediaErrorPanel({ name, filePath }) {
-  return /* @__PURE__ */ jsxs159("div", { className: "flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-2", children: [
-    /* @__PURE__ */ jsxs159(
+  return /* @__PURE__ */ jsxs160("div", { className: "flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-2", children: [
+    /* @__PURE__ */ jsxs160(
       "svg",
       {
         width: "40",
@@ -83664,15 +83700,15 @@ function MediaErrorPanel({ name, filePath }) {
         className: "text-neutral-600",
         "aria-hidden": "true",
         children: [
-          /* @__PURE__ */ jsx200("circle", { cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ jsx200("line", { x1: "12", y1: "8", x2: "12", y2: "12", strokeLinecap: "round" }),
-          /* @__PURE__ */ jsx200("line", { x1: "12", y1: "16", x2: "12.01", y2: "16", strokeLinecap: "round" })
+          /* @__PURE__ */ jsx201("circle", { cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ jsx201("line", { x1: "12", y1: "8", x2: "12", y2: "12", strokeLinecap: "round" }),
+          /* @__PURE__ */ jsx201("line", { x1: "12", y1: "16", x2: "12.01", y2: "16", strokeLinecap: "round" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx200("span", { className: "text-sm text-neutral-400 font-medium", children: name }),
-    /* @__PURE__ */ jsx200("span", { className: "text-[11px] text-neutral-600 font-mono", children: filePath }),
-    /* @__PURE__ */ jsx200("span", { className: "text-[10px] text-neutral-500", children: "Couldn't load this file \u2014 it may be missing or corrupt" })
+    /* @__PURE__ */ jsx201("span", { className: "text-sm text-neutral-400 font-medium", children: name }),
+    /* @__PURE__ */ jsx201("span", { className: "text-[11px] text-neutral-600 font-mono", children: filePath }),
+    /* @__PURE__ */ jsx201("span", { className: "text-[10px] text-neutral-500", children: "Couldn't load this file \u2014 it may be missing or corrupt" })
   ] });
 }
 function MediaPreview({ projectId, filePath }) {
@@ -83681,10 +83717,10 @@ function MediaPreview({ projectId, filePath }) {
   const [failedPath, setFailedPath] = useState127(null);
   const failed2 = failedPath === filePath;
   const setFailed = () => setFailedPath(filePath);
-  if (failed2) return /* @__PURE__ */ jsx200(MediaErrorPanel, { name, filePath });
+  if (failed2) return /* @__PURE__ */ jsx201(MediaErrorPanel, { name, filePath });
   if (IMAGE_EXT.test(filePath)) {
-    return /* @__PURE__ */ jsxs159("div", { className: "flex flex-col items-center justify-center h-full p-4 bg-neutral-950", children: [
-      /* @__PURE__ */ jsx200(
+    return /* @__PURE__ */ jsxs160("div", { className: "flex flex-col items-center justify-center h-full p-4 bg-neutral-950", children: [
+      /* @__PURE__ */ jsx201(
         "img",
         {
           src: serveUrl,
@@ -83693,12 +83729,12 @@ function MediaPreview({ projectId, filePath }) {
           className: "max-w-full max-h-[70%] object-contain rounded-sm border border-neutral-800"
         }
       ),
-      /* @__PURE__ */ jsx200("span", { className: "mt-3 text-[11px] text-neutral-500 font-mono", children: filePath })
+      /* @__PURE__ */ jsx201("span", { className: "mt-3 text-[11px] text-neutral-500 font-mono", children: filePath })
     ] });
   }
   if (VIDEO_EXT.test(filePath)) {
-    return /* @__PURE__ */ jsxs159("div", { className: "flex flex-col items-center justify-center h-full p-4 bg-neutral-950", children: [
-      /* @__PURE__ */ jsx200(
+    return /* @__PURE__ */ jsxs160("div", { className: "flex flex-col items-center justify-center h-full p-4 bg-neutral-950", children: [
+      /* @__PURE__ */ jsx201(
         "video",
         {
           src: serveUrl,
@@ -83707,12 +83743,12 @@ function MediaPreview({ projectId, filePath }) {
           className: "max-w-full max-h-[70%] rounded-sm border border-neutral-800"
         }
       ),
-      /* @__PURE__ */ jsx200("span", { className: "mt-3 text-[11px] text-neutral-500 font-mono", children: filePath })
+      /* @__PURE__ */ jsx201("span", { className: "mt-3 text-[11px] text-neutral-500 font-mono", children: filePath })
     ] });
   }
   if (AUDIO_EXT.test(filePath)) {
-    return /* @__PURE__ */ jsxs159("div", { className: "flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-3", children: [
-      /* @__PURE__ */ jsxs159(
+    return /* @__PURE__ */ jsxs160("div", { className: "flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-3", children: [
+      /* @__PURE__ */ jsxs160(
         "svg",
         {
           width: "48",
@@ -83723,18 +83759,18 @@ function MediaPreview({ projectId, filePath }) {
           strokeWidth: "1.5",
           className: "text-neutral-600",
           children: [
-            /* @__PURE__ */ jsx200("path", { d: "M9 18V5l12-2v13", strokeLinecap: "round", strokeLinejoin: "round" }),
-            /* @__PURE__ */ jsx200("circle", { cx: "6", cy: "18", r: "3" }),
-            /* @__PURE__ */ jsx200("circle", { cx: "18", cy: "16", r: "3" })
+            /* @__PURE__ */ jsx201("path", { d: "M9 18V5l12-2v13", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ jsx201("circle", { cx: "6", cy: "18", r: "3" }),
+            /* @__PURE__ */ jsx201("circle", { cx: "18", cy: "16", r: "3" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx200("audio", { src: serveUrl, controls: true, onError: setFailed, className: "w-full max-w-[280px]" }),
-      /* @__PURE__ */ jsx200("span", { className: "text-[11px] text-neutral-500 font-mono", children: filePath })
+      /* @__PURE__ */ jsx201("audio", { src: serveUrl, controls: true, onError: setFailed, className: "w-full max-w-[280px]" }),
+      /* @__PURE__ */ jsx201("span", { className: "text-[11px] text-neutral-500 font-mono", children: filePath })
     ] });
   }
-  return /* @__PURE__ */ jsxs159("div", { className: "flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-2", children: [
-    /* @__PURE__ */ jsxs159(
+  return /* @__PURE__ */ jsxs160("div", { className: "flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-2", children: [
+    /* @__PURE__ */ jsxs160(
       "svg",
       {
         width: "40",
@@ -83745,7 +83781,7 @@ function MediaPreview({ projectId, filePath }) {
         strokeWidth: "1.5",
         className: "text-neutral-600",
         children: [
-          /* @__PURE__ */ jsx200(
+          /* @__PURE__ */ jsx201(
             "path",
             {
               d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z",
@@ -83753,13 +83789,13 @@ function MediaPreview({ projectId, filePath }) {
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx200("polyline", { points: "14 2 14 8 20 8", strokeLinecap: "round", strokeLinejoin: "round" })
+          /* @__PURE__ */ jsx201("polyline", { points: "14 2 14 8 20 8", strokeLinecap: "round", strokeLinejoin: "round" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx200("span", { className: "text-sm text-neutral-400 font-medium", children: name }),
-    /* @__PURE__ */ jsx200("span", { className: "text-[11px] text-neutral-600 font-mono", children: filePath }),
-    /* @__PURE__ */ jsx200("span", { className: "text-[10px] text-neutral-600", children: "Binary file \u2014 preview not available" })
+    /* @__PURE__ */ jsx201("span", { className: "text-sm text-neutral-400 font-medium", children: name }),
+    /* @__PURE__ */ jsx201("span", { className: "text-[11px] text-neutral-600 font-mono", children: filePath }),
+    /* @__PURE__ */ jsx201("span", { className: "text-[10px] text-neutral-600", children: "Binary file \u2014 preview not available" })
   ] });
 }
 
@@ -83767,14 +83803,14 @@ function MediaPreview({ projectId, filePath }) {
 import { memo as memo41, useState as useState133, useCallback as useCallback154, useRef as useRef170, useMemo as useMemo74, useEffect as useEffect133 } from "react";
 
 // src/components/ui/SearchInput.tsx
-import { jsx as jsx201, jsxs as jsxs160 } from "react/jsx-runtime";
+import { jsx as jsx202, jsxs as jsxs161 } from "react/jsx-runtime";
 function SearchInput({ className = "", ...props }) {
-  return /* @__PURE__ */ jsxs160(
+  return /* @__PURE__ */ jsxs161(
     "div",
     {
       className: `flex items-center gap-1.5 rounded-md bg-panel-input px-2.5 py-[5px] ${className}`,
       children: [
-        /* @__PURE__ */ jsxs160(
+        /* @__PURE__ */ jsxs161(
           "svg",
           {
             width: "12",
@@ -83784,7 +83820,7 @@ function SearchInput({ className = "", ...props }) {
             className: "shrink-0",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx201(
+              /* @__PURE__ */ jsx202(
                 "circle",
                 {
                   cx: "116",
@@ -83795,7 +83831,7 @@ function SearchInput({ className = "", ...props }) {
                   className: "text-panel-text-5"
                 }
               ),
-              /* @__PURE__ */ jsx201(
+              /* @__PURE__ */ jsx202(
                 "line",
                 {
                   x1: "170",
@@ -83811,7 +83847,7 @@ function SearchInput({ className = "", ...props }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx201(
+        /* @__PURE__ */ jsx202(
           "input",
           {
             type: "text",
@@ -83880,7 +83916,7 @@ import { classifyWebAudioMediaRoute } from "@hyperframes/core/runtime/web-audio-
 
 // src/components/sidebar/AssetContextMenu.tsx
 import { useCallback as useCallback151, useEffect as useEffect128, useLayoutEffect as useLayoutEffect8, useRef as useRef167, useState as useState128 } from "react";
-import { Fragment as Fragment53, jsx as jsx202, jsxs as jsxs161 } from "react/jsx-runtime";
+import { Fragment as Fragment53, jsx as jsx203, jsxs as jsxs162 } from "react/jsx-runtime";
 function isValidAssetName(name) {
   return name.length > 0 && !/[/\\]/.test(name) && !name.includes("..");
 }
@@ -83954,7 +83990,7 @@ function ContextMenu3({
     onClose();
   }, [renameDraft, asset, onRename, onClose]);
   const itemCls = "w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden active:bg-neutral-700/70 transition-colors";
-  return /* @__PURE__ */ jsx202(
+  return /* @__PURE__ */ jsx203(
     "div",
     {
       className: "fixed inset-0 z-200",
@@ -83963,7 +83999,7 @@ function ContextMenu3({
         e.preventDefault();
         onClose();
       },
-      children: /* @__PURE__ */ jsxs161(
+      children: /* @__PURE__ */ jsxs162(
         "div",
         {
           ref: menuRef,
@@ -83973,8 +84009,8 @@ function ContextMenu3({
           style: { left: pos.x, top: pos.y },
           onClick: (e) => e.stopPropagation(),
           children: [
-            mode === "menu" && /* @__PURE__ */ jsxs161(Fragment53, { children: [
-              onAddAtPlayhead && /* @__PURE__ */ jsx202(
+            mode === "menu" && /* @__PURE__ */ jsxs162(Fragment53, { children: [
+              onAddAtPlayhead && /* @__PURE__ */ jsx203(
                 "button",
                 {
                   role: "menuitem",
@@ -83986,7 +84022,7 @@ function ContextMenu3({
                   children: "Add at playhead"
                 }
               ),
-              /* @__PURE__ */ jsx202(
+              /* @__PURE__ */ jsx203(
                 "button",
                 {
                   role: "menuitem",
@@ -83998,8 +84034,8 @@ function ContextMenu3({
                   children: "Copy path"
                 }
               ),
-              onRename && /* @__PURE__ */ jsx202("button", { role: "menuitem", onClick: () => setMode("rename"), className: itemCls, children: "Rename" }),
-              onDelete && /* @__PURE__ */ jsx202(
+              onRename && /* @__PURE__ */ jsx203("button", { role: "menuitem", onClick: () => setMode("rename"), className: itemCls, children: "Rename" }),
+              onDelete && /* @__PURE__ */ jsx203(
                 "button",
                 {
                   role: "menuitem",
@@ -84009,7 +84045,7 @@ function ContextMenu3({
                 }
               )
             ] }),
-            mode === "confirm-delete" && /* @__PURE__ */ jsx202(
+            mode === "confirm-delete" && /* @__PURE__ */ jsx203(
               DeleteConfirm2,
               {
                 name: filename(asset),
@@ -84020,8 +84056,8 @@ function ContextMenu3({
                 onCancel: () => setMode("menu")
               }
             ),
-            mode === "rename" && /* @__PURE__ */ jsxs161("div", { className: "px-2 py-1.5 flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsx202(
+            mode === "rename" && /* @__PURE__ */ jsxs162("div", { className: "px-2 py-1.5 flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx203(
                 "input",
                 {
                   autoFocus: true,
@@ -84041,9 +84077,9 @@ function ContextMenu3({
                   className: "w-full bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-1 text-[11px] text-white focus:border-studio-accent/60 focus:outline-hidden"
                 }
               ),
-              renameError && /* @__PURE__ */ jsx202("span", { className: "text-[10px] text-red-400", children: renameError }),
-              /* @__PURE__ */ jsxs161("div", { className: "flex items-center justify-end gap-1", children: [
-                /* @__PURE__ */ jsx202(
+              renameError && /* @__PURE__ */ jsx203("span", { className: "text-[10px] text-red-400", children: renameError }),
+              /* @__PURE__ */ jsxs162("div", { className: "flex items-center justify-end gap-1", children: [
+                /* @__PURE__ */ jsx203(
                   "button",
                   {
                     onClick: () => setMode("menu"),
@@ -84051,7 +84087,7 @@ function ContextMenu3({
                     children: "Cancel"
                   }
                 ),
-                /* @__PURE__ */ jsx202(
+                /* @__PURE__ */ jsx203(
                   "button",
                   {
                     onClick: commitRename,
@@ -84072,14 +84108,14 @@ function DeleteConfirm2({
   onConfirm,
   onCancel
 }) {
-  return /* @__PURE__ */ jsxs161("div", { className: "px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex items-center justify-between gap-2", children: [
-    /* @__PURE__ */ jsxs161("span", { className: "text-[10px] text-red-400 truncate", children: [
+  return /* @__PURE__ */ jsxs162("div", { className: "px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsxs162("span", { className: "text-[10px] text-red-400 truncate", children: [
       "Delete ",
       name,
       "?"
     ] }),
-    /* @__PURE__ */ jsxs161("div", { className: "flex items-center gap-1 shrink-0", children: [
-      /* @__PURE__ */ jsx202(
+    /* @__PURE__ */ jsxs162("div", { className: "flex items-center gap-1 shrink-0", children: [
+      /* @__PURE__ */ jsx203(
         "button",
         {
           onClick: onConfirm,
@@ -84087,7 +84123,7 @@ function DeleteConfirm2({
           children: "Delete"
         }
       ),
-      /* @__PURE__ */ jsx202(
+      /* @__PURE__ */ jsx203(
         "button",
         {
           onClick: onCancel,
@@ -84129,7 +84165,7 @@ function isPointerClick(dx, dy) {
 }
 
 // src/components/sidebar/AudioRow.tsx
-import { Fragment as Fragment54, jsx as jsx203, jsxs as jsxs162 } from "react/jsx-runtime";
+import { Fragment as Fragment54, jsx as jsx204, jsxs as jsxs163 } from "react/jsx-runtime";
 var stopCurrentPreview = null;
 function AudioRow({
   projectId,
@@ -84276,8 +84312,8 @@ function AudioRow({
       if (stopCurrentPreview === stopPlayback) stopCurrentPreview = null;
     }
   }, [serveUrl, playing, stopPlayback]);
-  return /* @__PURE__ */ jsxs162(Fragment54, { children: [
-    /* @__PURE__ */ jsxs162(
+  return /* @__PURE__ */ jsxs163(Fragment54, { children: [
+    /* @__PURE__ */ jsxs163(
       "div",
       {
         draggable: true,
@@ -84304,7 +84340,7 @@ function AudioRow({
         },
         className: `group w-full text-left px-4 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer outline-hidden focus-visible:bg-neutral-800/60 ${playing ? "bg-panel-accent/6" : isCopied ? "bg-panel-accent/10" : "hover:bg-panel-surface-hover"}`,
         children: [
-          /* @__PURE__ */ jsx203(
+          /* @__PURE__ */ jsx204(
             "button",
             {
               "aria-label": playing ? `Pause preview of ${name}` : `Play preview of ${name}`,
@@ -84314,27 +84350,27 @@ function AudioRow({
                 e.stopPropagation();
                 togglePlay();
               },
-              children: playing ? /* @__PURE__ */ jsxs162("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", children: [
-                /* @__PURE__ */ jsx203("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
-                /* @__PURE__ */ jsx203("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
-              ] }) : /* @__PURE__ */ jsx203("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx203("polygon", { points: "6,4 20,12 6,20" }) })
+              children: playing ? /* @__PURE__ */ jsxs163("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", children: [
+                /* @__PURE__ */ jsx204("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
+                /* @__PURE__ */ jsx204("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
+              ] }) : /* @__PURE__ */ jsx204("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx204("polygon", { points: "6,4 20,12 6,20" }) })
             }
           ),
-          /* @__PURE__ */ jsxs162("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsxs162("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx203(
+          /* @__PURE__ */ jsxs163("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs163("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx204(
                 "span",
                 {
                   className: `text-[12px] font-medium truncate ${used ? "text-panel-text-1" : "text-panel-text-3"}`,
                   children: name
                 }
               ),
-              !playing && /* @__PURE__ */ jsxs162("span", { className: "text-[11px] text-panel-text-5 shrink-0", children: [
+              !playing && /* @__PURE__ */ jsxs163("span", { className: "text-[11px] text-panel-text-5 shrink-0", children: [
                 meta?.duration ? `${meta.duration}s \xB7 ` : "",
                 subtype
               ] }),
-              used && /* @__PURE__ */ jsx203("span", { className: "text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded-sm shrink-0", children: "in use" }),
-              (isCopied || copyFailed) && /* @__PURE__ */ jsx203(
+              used && /* @__PURE__ */ jsx204("span", { className: "text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded-sm shrink-0", children: "in use" }),
+              (isCopied || copyFailed) && /* @__PURE__ */ jsx204(
                 "span",
                 {
                   role: "status",
@@ -84343,7 +84379,7 @@ function AudioRow({
                 }
               )
             ] }),
-            bars.length > 0 && /* @__PURE__ */ jsx203("div", { className: "flex items-end gap-[2px] h-[14px] mt-0.5", children: bars.map((v, i) => /* @__PURE__ */ jsx203(
+            bars.length > 0 && /* @__PURE__ */ jsx204("div", { className: "flex items-end gap-[2px] h-[14px] mt-0.5", children: bars.map((v, i) => /* @__PURE__ */ jsx204(
               "div",
               {
                 className: "flex-1 rounded-[1px]",
@@ -84359,7 +84395,7 @@ function AudioRow({
         ]
       }
     ),
-    contextMenu && /* @__PURE__ */ jsx203(
+    contextMenu && /* @__PURE__ */ jsx204(
       ContextMenu3,
       {
         x: contextMenu.x,
@@ -84377,7 +84413,7 @@ function AudioRow({
 
 // src/components/sidebar/GlobalAssetsView.tsx
 import { useEffect as useEffect130, useMemo as useMemo73, useState as useState130 } from "react";
-import { jsx as jsx204, jsxs as jsxs163 } from "react/jsx-runtime";
+import { jsx as jsx205, jsxs as jsxs164 } from "react/jsx-runtime";
 function globalAssetRows(records, query = "") {
   const q = query.trim().toLowerCase();
   return records.filter(
@@ -84405,28 +84441,28 @@ function GlobalAssetsView({ searchQuery }) {
   }, []);
   const rows = useMemo73(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
   if (records === null) {
-    return /* @__PURE__ */ jsx204("p", { className: "px-4 py-3 text-[11px] text-panel-text-5", children: "Loading global assets\u2026" });
+    return /* @__PURE__ */ jsx205("p", { className: "px-4 py-3 text-[11px] text-panel-text-5", children: "Loading global assets\u2026" });
   }
   if (rows.length === 0) {
-    return /* @__PURE__ */ jsxs163("p", { className: "px-4 py-3 text-[11px] text-panel-text-5", children: [
+    return /* @__PURE__ */ jsxs164("p", { className: "px-4 py-3 text-[11px] text-panel-text-5", children: [
       "No assets in the global cache yet. Resolved media is promoted to ",
-      /* @__PURE__ */ jsx204("code", { children: "~/.media" }),
+      /* @__PURE__ */ jsx205("code", { children: "~/.media" }),
       " and becomes reusable across projects."
     ] });
   }
-  return /* @__PURE__ */ jsxs163("div", { children: [
-    /* @__PURE__ */ jsxs163("div", { className: "px-4 py-2 border-t border-panel-border text-[11px] text-panel-text-5", children: [
+  return /* @__PURE__ */ jsxs164("div", { children: [
+    /* @__PURE__ */ jsxs164("div", { className: "px-4 py-2 border-t border-panel-border text-[11px] text-panel-text-5", children: [
       rows.length,
       " reusable across all projects"
     ] }),
-    rows.map((row) => /* @__PURE__ */ jsxs163(
+    rows.map((row) => /* @__PURE__ */ jsxs164(
       "div",
       {
         className: "px-4 py-1.5 flex items-center gap-2.5 border-l-2 border-transparent hover:bg-neutral-800/50",
         title: `${row.id} \xB7 ${row.type}`,
         children: [
-          /* @__PURE__ */ jsx204("span", { className: "text-[9px] font-medium text-neutral-600 uppercase w-10 shrink-0", children: row.type }),
-          /* @__PURE__ */ jsx204("span", { className: "text-xs text-panel-text-1 truncate", children: row.label })
+          /* @__PURE__ */ jsx205("span", { className: "text-[9px] font-medium text-neutral-600 uppercase w-10 shrink-0", children: row.type }),
+          /* @__PURE__ */ jsx205("span", { className: "text-xs text-panel-text-1 truncate", children: row.label })
         ]
       },
       row.id
@@ -84439,7 +84475,7 @@ import { useState as useState132, useEffect as useEffect132, useRef as useRef169
 
 // src/components/ui/VideoFrameThumbnail.tsx
 import { useState as useState131, useEffect as useEffect131 } from "react";
-import { jsx as jsx205 } from "react/jsx-runtime";
+import { jsx as jsx206 } from "react/jsx-runtime";
 function VideoFrameThumbnail({
   src,
   fallbackLabel
@@ -84481,16 +84517,16 @@ function VideoFrameThumbnail({
     return cleanup;
   }, [src]);
   if (failed2 && !frame) {
-    return /* @__PURE__ */ jsx205("div", { className: "w-full h-full bg-neutral-800 flex items-center justify-center", children: /* @__PURE__ */ jsx205("span", { className: "text-[9px] font-medium text-neutral-600", children: fallbackLabel ?? "VIDEO" }) });
+    return /* @__PURE__ */ jsx206("div", { className: "w-full h-full bg-neutral-800 flex items-center justify-center", children: /* @__PURE__ */ jsx206("span", { className: "text-[9px] font-medium text-neutral-600", children: fallbackLabel ?? "VIDEO" }) });
   }
   if (!frame) {
-    return /* @__PURE__ */ jsx205("div", { className: "w-full h-full bg-neutral-800 animate-pulse motion-reduce:animate-none" });
+    return /* @__PURE__ */ jsx206("div", { className: "w-full h-full bg-neutral-800 animate-pulse motion-reduce:animate-none" });
   }
-  return /* @__PURE__ */ jsx205("img", { src: frame, alt: "", draggable: false, className: "w-full h-full object-contain" });
+  return /* @__PURE__ */ jsx206("img", { src: frame, alt: "", draggable: false, className: "w-full h-full object-contain" });
 }
 
 // src/components/sidebar/AssetCard.tsx
-import { Fragment as Fragment55, jsx as jsx206, jsxs as jsxs164 } from "react/jsx-runtime";
+import { Fragment as Fragment55, jsx as jsx207, jsxs as jsxs165 } from "react/jsx-runtime";
 function writeAssetDragData(e, asset) {
   e.dataTransfer.effectAllowed = "copy";
   e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
@@ -84498,7 +84534,7 @@ function writeAssetDragData(e, asset) {
 }
 function CopyChip({ feedback, asset }) {
   if (feedback?.path !== asset) return null;
-  return /* @__PURE__ */ jsx206(
+  return /* @__PURE__ */ jsx207(
     "span",
     {
       role: "status",
@@ -84617,8 +84653,8 @@ function AssetCard({
     },
     [activateCard]
   );
-  return /* @__PURE__ */ jsxs164(Fragment55, { children: [
-    /* @__PURE__ */ jsxs164(
+  return /* @__PURE__ */ jsxs165(Fragment55, { children: [
+    /* @__PURE__ */ jsxs165(
       "div",
       {
         draggable: true,
@@ -84640,8 +84676,8 @@ function AssetCard({
         onPointerLeave: () => setHovered(false),
         className: `flex flex-col gap-1 cursor-pointer rounded-md p-1 transition-colors outline-hidden focus-visible:bg-neutral-800/60 ${isCopied ? "bg-studio-accent/10" : "hover:bg-neutral-800/40"}`,
         children: [
-          /* @__PURE__ */ jsxs164("div", { className: "w-full aspect-video rounded-sm overflow-hidden bg-neutral-900 relative", children: [
-            isImage && !imgError && /* @__PURE__ */ jsx206(
+          /* @__PURE__ */ jsxs165("div", { className: "w-full aspect-video rounded-sm overflow-hidden bg-neutral-900 relative", children: [
+            isImage && !imgError && /* @__PURE__ */ jsx207(
               "img",
               {
                 src: serveUrl,
@@ -84651,9 +84687,9 @@ function AssetCard({
                 onError: () => setImgError(true)
               }
             ),
-            isVideo && /* @__PURE__ */ jsxs164(Fragment55, { children: [
-              /* @__PURE__ */ jsx206(VideoFrameThumbnail, { src: serveUrl }),
-              hovered && /* @__PURE__ */ jsx206(
+            isVideo && /* @__PURE__ */ jsxs165(Fragment55, { children: [
+              /* @__PURE__ */ jsx207(VideoFrameThumbnail, { src: serveUrl }),
+              hovered && /* @__PURE__ */ jsx207(
                 "video",
                 {
                   src: serveUrl,
@@ -84665,12 +84701,12 @@ function AssetCard({
                 }
               )
             ] }),
-            (!isImage && !isVideo || isImage && imgError) && /* @__PURE__ */ jsx206("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx206("span", { className: "text-[10px] font-medium text-neutral-600", children: extension }) }),
-            used && /* @__PURE__ */ jsx206("span", { className: "absolute top-1 left-1 text-[9px] font-semibold leading-none px-1.5 py-[3px] rounded-sm bg-neutral-950/80 text-panel-text-1", children: "Added" }),
-            durationLabel && /* @__PURE__ */ jsx206("span", { className: "absolute top-1 right-1 text-[9px] font-medium leading-none px-1.5 py-[3px] rounded-sm bg-neutral-950/80 text-panel-text-2 tabular-nums", children: durationLabel })
+            (!isImage && !isVideo || isImage && imgError) && /* @__PURE__ */ jsx207("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx207("span", { className: "text-[10px] font-medium text-neutral-600", children: extension }) }),
+            used && /* @__PURE__ */ jsx207("span", { className: "absolute top-1 left-1 text-[9px] font-semibold leading-none px-1.5 py-[3px] rounded-sm bg-neutral-950/80 text-panel-text-1", children: "Added" }),
+            durationLabel && /* @__PURE__ */ jsx207("span", { className: "absolute top-1 right-1 text-[9px] font-medium leading-none px-1.5 py-[3px] rounded-sm bg-neutral-950/80 text-panel-text-2 tabular-nums", children: durationLabel })
           ] }),
-          /* @__PURE__ */ jsxs164("div", { className: "flex items-center justify-center gap-1", children: [
-            /* @__PURE__ */ jsx206(
+          /* @__PURE__ */ jsxs165("div", { className: "flex items-center justify-center gap-1", children: [
+            /* @__PURE__ */ jsx207(
               "span",
               {
                 className: `text-[10px] leading-tight text-center ${used ? "text-panel-text-2" : "text-panel-text-4"}`,
@@ -84678,12 +84714,12 @@ function AssetCard({
                 children: truncateMiddle(fullName, 22)
               }
             ),
-            /* @__PURE__ */ jsx206(CopyChip, { feedback: copyFeedback, asset })
+            /* @__PURE__ */ jsx207(CopyChip, { feedback: copyFeedback, asset })
           ] })
         ]
       }
     ),
-    contextMenu && /* @__PURE__ */ jsx206(
+    contextMenu && /* @__PURE__ */ jsx207(
       ContextMenu3,
       {
         x: contextMenu.x,
@@ -84711,8 +84747,8 @@ function FontRow({
   const name = basename2(asset);
   const extension = ext(asset);
   const isCopied = copyFeedback?.path === asset && copyFeedback.ok;
-  return /* @__PURE__ */ jsxs164(Fragment55, { children: [
-    /* @__PURE__ */ jsxs164(
+  return /* @__PURE__ */ jsxs165(Fragment55, { children: [
+    /* @__PURE__ */ jsxs165(
       "div",
       {
         draggable: true,
@@ -84731,25 +84767,25 @@ function FontRow({
         onContextMenu: (e) => openAssetContextMenu(e, setContextMenu),
         className: `px-2.5 py-1.5 flex items-center gap-2.5 cursor-pointer transition-colors outline-hidden focus-visible:bg-neutral-800/60 ${isCopied ? "bg-studio-accent/10 border-l-2 border-studio-accent" : "border-l-2 border-transparent hover:bg-neutral-800/50"}`,
         children: [
-          /* @__PURE__ */ jsx206("div", { className: "w-[50px] h-[32px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ jsx206("span", { className: "text-[9px] font-medium text-neutral-700", children: extension }) }),
-          /* @__PURE__ */ jsxs164("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx206(
+          /* @__PURE__ */ jsx207("div", { className: "w-[50px] h-[32px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ jsx207("span", { className: "text-[9px] font-medium text-neutral-700", children: extension }) }),
+          /* @__PURE__ */ jsxs165("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx207(
               "span",
               {
                 className: `text-xs font-medium truncate block ${used ? "text-panel-text-1" : "text-panel-text-3"}`,
                 children: name
               }
             ),
-            /* @__PURE__ */ jsxs164("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx206("span", { className: "text-[10px] text-neutral-600 truncate", children: extension }),
-              used && /* @__PURE__ */ jsx206("span", { className: "text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded-sm", children: "in use" }),
-              /* @__PURE__ */ jsx206(CopyChip, { feedback: copyFeedback, asset })
+            /* @__PURE__ */ jsxs165("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx207("span", { className: "text-[10px] text-neutral-600 truncate", children: extension }),
+              used && /* @__PURE__ */ jsx207("span", { className: "text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded-sm", children: "in use" }),
+              /* @__PURE__ */ jsx207(CopyChip, { feedback: copyFeedback, asset })
             ] })
           ] })
         ]
       }
     ),
-    contextMenu && /* @__PURE__ */ jsx206(
+    contextMenu && /* @__PURE__ */ jsx207(
       ContextMenu3,
       {
         x: contextMenu.x,
@@ -84766,7 +84802,7 @@ function FontRow({
 }
 
 // src/components/sidebar/AssetsTab.tsx
-import { Fragment as Fragment56, jsx as jsx207, jsxs as jsxs165 } from "react/jsx-runtime";
+import { Fragment as Fragment56, jsx as jsx208, jsxs as jsxs166 } from "react/jsx-runtime";
 function filterByUsage(assets, usedPaths, usageFilter) {
   if (usageFilter === "used") return assets.filter((a) => usedPaths.has(a));
   if (usageFilter === "unused") return assets.filter((a) => !usedPaths.has(a));
@@ -84797,7 +84833,7 @@ function deriveUsedPaths(elements) {
   return paths;
 }
 function ImportButton({ importing, onClick }) {
-  return /* @__PURE__ */ jsxs165(
+  return /* @__PURE__ */ jsxs166(
     "button",
     {
       onClick,
@@ -84805,8 +84841,8 @@ function ImportButton({ importing, onClick }) {
       "aria-busy": importing,
       className: "w-full flex items-center justify-center gap-1.5 rounded-md bg-panel-input px-3 py-[7px] text-[11px] font-medium text-panel-text-3 enabled:hover:text-panel-text-1 enabled:active:scale-[0.98] disabled:opacity-60 transition-colors mb-2.5",
       children: [
-        importing ? /* @__PURE__ */ jsxs165("svg", { className: "animate-spin", width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", children: [
-          /* @__PURE__ */ jsx207(
+        importing ? /* @__PURE__ */ jsxs166("svg", { className: "animate-spin", width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", children: [
+          /* @__PURE__ */ jsx208(
             "circle",
             {
               className: "opacity-25",
@@ -84817,7 +84853,7 @@ function ImportButton({ importing, onClick }) {
               strokeWidth: "4"
             }
           ),
-          /* @__PURE__ */ jsx207(
+          /* @__PURE__ */ jsx208(
             "path",
             {
               className: "opacity-75",
@@ -84825,7 +84861,7 @@ function ImportButton({ importing, onClick }) {
               d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
             }
           )
-        ] }) : /* @__PURE__ */ jsx207(
+        ] }) : /* @__PURE__ */ jsx208(
           "svg",
           {
             width: "11",
@@ -84835,7 +84871,7 @@ function ImportButton({ importing, onClick }) {
             stroke: "currentColor",
             strokeWidth: "2.5",
             strokeLinecap: "round",
-            children: /* @__PURE__ */ jsx207("path", { d: "M12 5v14M5 12h14" })
+            children: /* @__PURE__ */ jsx208("path", { d: "M12 5v14M5 12h14" })
           }
         ),
         importing ? "Importing\u2026" : "Import media"
@@ -84848,13 +84884,13 @@ function EmptyState({
   onClearSearch
 }) {
   if (searchQuery) {
-    return /* @__PURE__ */ jsxs165("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", children: [
-      /* @__PURE__ */ jsxs165("p", { className: "text-[11px] text-neutral-500 text-center", children: [
+    return /* @__PURE__ */ jsxs166("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", children: [
+      /* @__PURE__ */ jsxs166("p", { className: "text-[11px] text-neutral-500 text-center", children: [
         "No assets match \u201C",
         searchQuery,
         "\u201D"
       ] }),
-      /* @__PURE__ */ jsx207(
+      /* @__PURE__ */ jsx208(
         "button",
         {
           type: "button",
@@ -84865,8 +84901,8 @@ function EmptyState({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs165("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", children: [
-    /* @__PURE__ */ jsxs165(
+  return /* @__PURE__ */ jsxs166("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", children: [
+    /* @__PURE__ */ jsxs166(
       "svg",
       {
         width: "24",
@@ -84877,7 +84913,7 @@ function EmptyState({
         strokeWidth: "1.5",
         className: "text-neutral-700",
         children: [
-          /* @__PURE__ */ jsx207(
+          /* @__PURE__ */ jsx208(
             "path",
             {
               d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4",
@@ -84885,12 +84921,12 @@ function EmptyState({
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx207("polyline", { points: "17 8 12 3 7 8", strokeLinecap: "round", strokeLinejoin: "round" }),
-          /* @__PURE__ */ jsx207("line", { x1: "12", y1: "3", x2: "12", y2: "15", strokeLinecap: "round" })
+          /* @__PURE__ */ jsx208("polyline", { points: "17 8 12 3 7 8", strokeLinecap: "round", strokeLinejoin: "round" }),
+          /* @__PURE__ */ jsx208("line", { x1: "12", y1: "3", x2: "12", y2: "15", strokeLinecap: "round" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx207("p", { className: "text-[10px] text-neutral-600 text-center", children: "Drop media files here" })
+    /* @__PURE__ */ jsx208("p", { className: "text-[10px] text-neutral-600 text-center", children: "Drop media files here" })
   ] });
 }
 var AssetsTab = memo41(function AssetsTab2({
@@ -85008,7 +85044,7 @@ var AssetsTab = memo41(function AssetsTab2({
     [assets, usedPaths]
   );
   const visibleCategories = activeFilter === "all" ? FILTER_ORDER.filter((c) => categorized[c].length > 0) : [activeFilter].filter((c) => categorized[c].length > 0);
-  return /* @__PURE__ */ jsxs165(
+  return /* @__PURE__ */ jsxs166(
     "div",
     {
       className: `flex-1 flex flex-col min-h-0 transition-colors ${dragOver ? "bg-studio-accent/5" : ""}`,
@@ -85019,8 +85055,8 @@ var AssetsTab = memo41(function AssetsTab2({
       onDragLeave: () => setDragOver(false),
       onDrop: handleDrop,
       children: [
-        /* @__PURE__ */ jsxs165("div", { className: "px-4 pt-2.5 pb-1.5 shrink-0", children: [
-          /* @__PURE__ */ jsx207("div", { className: "flex gap-1 mb-2.5 p-0.5 rounded-md bg-panel-input", children: ["local", "global"].map((m) => /* @__PURE__ */ jsx207(
+        /* @__PURE__ */ jsxs166("div", { className: "px-4 pt-2.5 pb-1.5 shrink-0", children: [
+          /* @__PURE__ */ jsx208("div", { className: "flex gap-1 mb-2.5 p-0.5 rounded-md bg-panel-input", children: ["local", "global"].map((m) => /* @__PURE__ */ jsx208(
             "button",
             {
               onClick: () => setViewMode(m),
@@ -85029,9 +85065,9 @@ var AssetsTab = memo41(function AssetsTab2({
             },
             m
           )) }),
-          onImport && /* @__PURE__ */ jsxs165(Fragment56, { children: [
-            /* @__PURE__ */ jsx207(ImportButton, { importing, onClick: () => fileInputRef.current?.click() }),
-            /* @__PURE__ */ jsx207(
+          onImport && /* @__PURE__ */ jsxs166(Fragment56, { children: [
+            /* @__PURE__ */ jsx208(ImportButton, { importing, onClick: () => fileInputRef.current?.click() }),
+            /* @__PURE__ */ jsx208(
               "input",
               {
                 ref: fileInputRef,
@@ -85048,7 +85084,7 @@ var AssetsTab = memo41(function AssetsTab2({
               }
             )
           ] }),
-          allMediaAssets.length > 0 && /* @__PURE__ */ jsx207(
+          allMediaAssets.length > 0 && /* @__PURE__ */ jsx208(
             SearchInput,
             {
               value: searchQuery,
@@ -85058,8 +85094,8 @@ var AssetsTab = memo41(function AssetsTab2({
               className: "mb-2"
             }
           ),
-          viewMode === "local" && allMediaAssets.length > 0 && /* @__PURE__ */ jsxs165("div", { className: "flex gap-1.5 flex-wrap", children: [
-            /* @__PURE__ */ jsxs165(
+          viewMode === "local" && allMediaAssets.length > 0 && /* @__PURE__ */ jsxs166("div", { className: "flex gap-1.5 flex-wrap", children: [
+            /* @__PURE__ */ jsxs166(
               "button",
               {
                 onClick: () => setActiveFilter("all"),
@@ -85072,7 +85108,7 @@ var AssetsTab = memo41(function AssetsTab2({
               }
             ),
             FILTER_ORDER.map(
-              (cat) => counts[cat] > 0 ? /* @__PURE__ */ jsxs165(
+              (cat) => counts[cat] > 0 ? /* @__PURE__ */ jsxs166(
                 "button",
                 {
                   onClick: () => setActiveFilter(activeFilter === cat ? "all" : cat),
@@ -85087,9 +85123,9 @@ var AssetsTab = memo41(function AssetsTab2({
                 cat
               ) : null
             ),
-            usageCounts.used > 0 && usageCounts.unused > 0 && /* @__PURE__ */ jsxs165(Fragment56, { children: [
-              /* @__PURE__ */ jsx207("span", { className: "w-px self-stretch bg-panel-input mx-0.5", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsxs165(
+            usageCounts.used > 0 && usageCounts.unused > 0 && /* @__PURE__ */ jsxs166(Fragment56, { children: [
+              /* @__PURE__ */ jsx208("span", { className: "w-px self-stretch bg-panel-input mx-0.5", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs166(
                 "button",
                 {
                   onClick: () => setUsageFilter(usageFilter === "used" ? "all" : "used"),
@@ -85100,7 +85136,7 @@ var AssetsTab = memo41(function AssetsTab2({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs165(
+              /* @__PURE__ */ jsxs166(
                 "button",
                 {
                   onClick: () => setUsageFilter(usageFilter === "unused" ? "all" : "unused"),
@@ -85114,12 +85150,12 @@ var AssetsTab = memo41(function AssetsTab2({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx207("div", { className: "flex-1 overflow-y-auto mt-1", children: viewMode === "global" ? /* @__PURE__ */ jsx207(GlobalAssetsView, { searchQuery }) : mediaAssets.length === 0 ? /* @__PURE__ */ jsx207(EmptyState, { searchQuery, onClearSearch: () => setSearchQuery("") }) : visibleCategories.map((cat) => /* @__PURE__ */ jsxs165("div", { className: "mb-1", children: [
-          activeFilter === "all" && /* @__PURE__ */ jsxs165("div", { className: "flex items-center gap-2 px-4 py-2 border-t border-panel-border", children: [
-            /* @__PURE__ */ jsx207("h3", { className: "text-[12px] font-semibold text-panel-text-1", children: CATEGORY_LABELS[cat] }),
-            /* @__PURE__ */ jsx207("span", { className: "text-[11px] text-panel-text-5", children: categorized[cat].length })
+        /* @__PURE__ */ jsx208("div", { className: "flex-1 overflow-y-auto mt-1", children: viewMode === "global" ? /* @__PURE__ */ jsx208(GlobalAssetsView, { searchQuery }) : mediaAssets.length === 0 ? /* @__PURE__ */ jsx208(EmptyState, { searchQuery, onClearSearch: () => setSearchQuery("") }) : visibleCategories.map((cat) => /* @__PURE__ */ jsxs166("div", { className: "mb-1", children: [
+          activeFilter === "all" && /* @__PURE__ */ jsxs166("div", { className: "flex items-center gap-2 px-4 py-2 border-t border-panel-border", children: [
+            /* @__PURE__ */ jsx208("h3", { className: "text-[12px] font-semibold text-panel-text-1", children: CATEGORY_LABELS[cat] }),
+            /* @__PURE__ */ jsx208("span", { className: "text-[11px] text-panel-text-5", children: categorized[cat].length })
           ] }),
-          cat === "audio" && categorized[cat].map((a) => /* @__PURE__ */ jsx207(
+          cat === "audio" && categorized[cat].map((a) => /* @__PURE__ */ jsx208(
             AudioRow,
             {
               projectId,
@@ -85134,7 +85170,7 @@ var AssetsTab = memo41(function AssetsTab2({
             },
             a
           )),
-          (cat === "images" || cat === "video") && /* @__PURE__ */ jsx207("div", { className: "grid grid-cols-2 gap-1 px-2 pb-1", children: categorized[cat].map((a) => /* @__PURE__ */ jsx207(
+          (cat === "images" || cat === "video") && /* @__PURE__ */ jsx208("div", { className: "grid grid-cols-2 gap-1 px-2 pb-1", children: categorized[cat].map((a) => /* @__PURE__ */ jsx208(
             AssetCard,
             {
               projectId,
@@ -85149,7 +85185,7 @@ var AssetsTab = memo41(function AssetsTab2({
             },
             a
           )) }),
-          cat === "fonts" && categorized[cat].map((a) => /* @__PURE__ */ jsx207(
+          cat === "fonts" && categorized[cat].map((a) => /* @__PURE__ */ jsx208(
             FontRow,
             {
               asset: a,
@@ -85174,7 +85210,7 @@ import { createPortal as createPortal9 } from "react-dom";
 
 // src/components/sidebar/PromptPreviewModal.tsx
 import { useState as useState134, useCallback as useCallback155, useEffect as useEffect134, useRef as useRef171 } from "react";
-import { jsx as jsx208, jsxs as jsxs166 } from "react/jsx-runtime";
+import { jsx as jsx209, jsxs as jsxs167 } from "react/jsx-runtime";
 function PromptPreviewModal({
   title,
   prompt,
@@ -85208,12 +85244,12 @@ function PromptPreviewModal({
     }
     setTimeout(() => setCopyState("idle"), 1500);
   }, []);
-  return /* @__PURE__ */ jsx208(
+  return /* @__PURE__ */ jsx209(
     "div",
     {
       className: `fixed inset-0 z-100 flex items-center justify-center bg-black/60 backdrop-blur-xs transition-opacity duration-150 ease-out ${entered ? "opacity-100" : "opacity-0"}`,
       onClick: requestClose,
-      children: /* @__PURE__ */ jsxs166(
+      children: /* @__PURE__ */ jsxs167(
         "div",
         {
           ref: containerRef,
@@ -85224,18 +85260,18 @@ function PromptPreviewModal({
           className: "w-[560px] max-h-[80vh] flex flex-col rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl outline-hidden",
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsxs166("div", { className: "flex items-center justify-between px-5 py-4 border-b border-neutral-800/60", children: [
-              /* @__PURE__ */ jsxs166("div", { children: [
-                /* @__PURE__ */ jsx208("h3", { className: "text-sm font-medium text-neutral-200", children: "Ask agent" }),
-                /* @__PURE__ */ jsx208("p", { className: "text-xs text-neutral-500 mt-0.5", children: title })
+            /* @__PURE__ */ jsxs167("div", { className: "flex items-center justify-between px-5 py-4 border-b border-neutral-800/60", children: [
+              /* @__PURE__ */ jsxs167("div", { children: [
+                /* @__PURE__ */ jsx209("h3", { className: "text-sm font-medium text-neutral-200", children: "Ask agent" }),
+                /* @__PURE__ */ jsx209("p", { className: "text-xs text-neutral-500 mt-0.5", children: title })
               ] }),
-              /* @__PURE__ */ jsx208(
+              /* @__PURE__ */ jsx209(
                 "button",
                 {
                   "aria-label": "Close",
                   className: "p-1 rounded-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/50 active:scale-[0.95]",
                   onClick: onClose,
-                  children: /* @__PURE__ */ jsxs166(
+                  children: /* @__PURE__ */ jsxs167(
                     "svg",
                     {
                       width: "14",
@@ -85247,17 +85283,17 @@ function PromptPreviewModal({
                       strokeLinecap: "round",
                       "aria-hidden": "true",
                       children: [
-                        /* @__PURE__ */ jsx208("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                        /* @__PURE__ */ jsx208("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                        /* @__PURE__ */ jsx209("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                        /* @__PURE__ */ jsx209("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                       ]
                     }
                   )
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs166("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: [
-              /* @__PURE__ */ jsx208("p", { className: "text-[11px] text-neutral-500 mb-2", children: "Edit the prompt below, then copy and paste into your AI agent" }),
-              /* @__PURE__ */ jsx208(
+            /* @__PURE__ */ jsxs167("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: [
+              /* @__PURE__ */ jsx209("p", { className: "text-[11px] text-neutral-500 mb-2", children: "Edit the prompt below, then copy and paste into your AI agent" }),
+              /* @__PURE__ */ jsx209(
                 "textarea",
                 {
                   ref: textareaRef,
@@ -85270,12 +85306,12 @@ function PromptPreviewModal({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs166("div", { className: "flex items-center justify-between px-5 py-3 border-t border-neutral-800/60", children: [
-              /* @__PURE__ */ jsxs166("span", { className: "text-[11px] text-neutral-600", children: [
+            /* @__PURE__ */ jsxs167("div", { className: "flex items-center justify-between px-5 py-3 border-t border-neutral-800/60", children: [
+              /* @__PURE__ */ jsxs167("span", { className: "text-[11px] text-neutral-600", children: [
                 navigator.platform.includes("Mac") ? "\u2318" : "Ctrl",
                 "+Enter to copy"
               ] }),
-              /* @__PURE__ */ jsx208(
+              /* @__PURE__ */ jsx209(
                 "button",
                 {
                   className: `px-4 py-1.5 rounded-lg text-xs font-medium transition-colors active:scale-[0.97] ${copyState === "copied" ? "bg-emerald-500 text-white" : copyState === "failed" ? "bg-red-500 text-white" : "bg-studio-accent/90 text-neutral-950 hover:bg-studio-accent"}`,
@@ -85292,18 +85328,18 @@ function PromptPreviewModal({
 }
 
 // src/components/sidebar/BlocksTab.tsx
-import { jsx as jsx209, jsxs as jsxs167 } from "react/jsx-runtime";
+import { jsx as jsx210, jsxs as jsxs168 } from "react/jsx-runtime";
 var BlocksTab = memo42(function BlocksTab2({ onAddBlock, onPreviewBlock }) {
   const { loading, error, search, setSearch, category, setCategory, filteredBlocks } = useBlockCatalog();
   const [promptModal, setPromptModal] = useState135(null);
   if (loading) {
-    return /* @__PURE__ */ jsx209("div", { className: "flex flex-1 items-center justify-center text-neutral-600 text-xs", children: "Loading blocks\u2026" });
+    return /* @__PURE__ */ jsx210("div", { className: "flex flex-1 items-center justify-center text-neutral-600 text-xs", children: "Loading blocks\u2026" });
   }
   if (error) {
-    return /* @__PURE__ */ jsx209("div", { className: "flex flex-1 items-center justify-center text-red-400 text-xs px-4 text-center", children: error });
+    return /* @__PURE__ */ jsx210("div", { className: "flex flex-1 items-center justify-center text-red-400 text-xs px-4 text-center", children: error });
   }
-  return /* @__PURE__ */ jsxs167("div", { className: "flex flex-col flex-1 min-h-0", children: [
-    /* @__PURE__ */ jsx209("div", { className: "px-3 pt-2 pb-1 shrink-0", children: /* @__PURE__ */ jsx209(
+  return /* @__PURE__ */ jsxs168("div", { className: "flex flex-col flex-1 min-h-0", children: [
+    /* @__PURE__ */ jsx210("div", { className: "px-3 pt-2 pb-1 shrink-0", children: /* @__PURE__ */ jsx210(
       SearchInput,
       {
         value: search,
@@ -85312,9 +85348,9 @@ var BlocksTab = memo42(function BlocksTab2({ onAddBlock, onPreviewBlock }) {
         "aria-label": "Search blocks"
       }
     ) }),
-    /* @__PURE__ */ jsx209("div", { className: "px-3 pt-1 pb-2 shrink-0 overflow-x-auto", children: /* @__PURE__ */ jsxs167("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ jsx209(CategoryPill, { label: "All", active: category === null, onClick: () => setCategory(null) }),
-      BLOCK_CATEGORIES.map((cat) => /* @__PURE__ */ jsx209(
+    /* @__PURE__ */ jsx210("div", { className: "px-3 pt-1 pb-2 shrink-0 overflow-x-auto", children: /* @__PURE__ */ jsxs168("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ jsx210(CategoryPill, { label: "All", active: category === null, onClick: () => setCategory(null) }),
+      BLOCK_CATEGORIES.map((cat) => /* @__PURE__ */ jsx210(
         CategoryPill,
         {
           label: cat.label,
@@ -85325,21 +85361,21 @@ var BlocksTab = memo42(function BlocksTab2({ onAddBlock, onPreviewBlock }) {
         cat.id
       ))
     ] }) }),
-    /* @__PURE__ */ jsxs167("div", { className: "flex-1 overflow-y-auto min-h-0 px-2 pb-2", children: [
-      category === "vfx" && /* @__PURE__ */ jsxs167("div", { className: "mb-2 px-2 py-1.5 rounded-md bg-purple-500/10 border border-purple-500/20 text-[9px] text-purple-300 leading-relaxed", children: [
+    /* @__PURE__ */ jsxs168("div", { className: "flex-1 overflow-y-auto min-h-0 px-2 pb-2", children: [
+      category === "vfx" && /* @__PURE__ */ jsxs168("div", { className: "mb-2 px-2 py-1.5 rounded-md bg-purple-500/10 border border-purple-500/20 text-[9px] text-purple-300 leading-relaxed", children: [
         "VFX blocks use WebGL via HTML-in-Canvas. Enable",
         " ",
-        /* @__PURE__ */ jsx209("span", { className: "font-mono text-purple-200", children: "chrome://flags/#html-in-canvas" }),
+        /* @__PURE__ */ jsx210("span", { className: "font-mono text-purple-200", children: "chrome://flags/#html-in-canvas" }),
         " for preview."
       ] }),
-      filteredBlocks.length === 0 ? /* @__PURE__ */ jsx209("div", { className: "flex items-center justify-center h-32 text-neutral-600 text-xs", children: "No blocks match your search" }) : /* @__PURE__ */ jsx209(
+      filteredBlocks.length === 0 ? /* @__PURE__ */ jsx210("div", { className: "flex items-center justify-center h-32 text-neutral-600 text-xs", children: "No blocks match your search" }) : /* @__PURE__ */ jsx210(
         "div",
         {
           className: "grid gap-1.5",
           style: { gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))" },
           children: filteredBlocks.map((block) => {
             const dur = "duration" in block ? block.duration : void 0;
-            return /* @__PURE__ */ jsx209(
+            return /* @__PURE__ */ jsx210(
               BlockCard,
               {
                 name: block.name,
@@ -85362,7 +85398,7 @@ var BlocksTab = memo42(function BlocksTab2({ onAddBlock, onPreviewBlock }) {
       )
     ] }),
     promptModal && createPortal9(
-      /* @__PURE__ */ jsx209(
+      /* @__PURE__ */ jsx210(
         PromptPreviewModal,
         {
           title: promptModal.title,
@@ -85381,7 +85417,7 @@ function CategoryPill({
   onClick
 }) {
   const colors = category ? getCategoryColors(category) : null;
-  return /* @__PURE__ */ jsx209(
+  return /* @__PURE__ */ jsx210(
     "button",
     {
       type: "button",
@@ -85551,7 +85587,7 @@ function BlockCard({
       onShowPrompt
     ]
   );
-  return /* @__PURE__ */ jsxs167(
+  return /* @__PURE__ */ jsxs168(
     "div",
     {
       className: "group/card rounded-md overflow-hidden cursor-pointer transition-colors bg-neutral-900 hover:bg-neutral-800",
@@ -85565,8 +85601,8 @@ function BlockCard({
       onPointerEnter: handleEnter,
       onPointerLeave: handleLeave,
       children: [
-        /* @__PURE__ */ jsxs167("div", { className: "aspect-video w-full overflow-hidden relative", children: [
-          hovered && videoUrl ? /* @__PURE__ */ jsx209(
+        /* @__PURE__ */ jsxs168("div", { className: "aspect-video w-full overflow-hidden relative", children: [
+          hovered && videoUrl ? /* @__PURE__ */ jsx210(
             "video",
             {
               src: videoUrl,
@@ -85576,7 +85612,7 @@ function BlockCard({
               playsInline: true,
               className: "w-full h-full object-cover"
             }
-          ) : posterUrl ? /* @__PURE__ */ jsx209("img", { src: posterUrl, alt: title, loading: "lazy", className: "w-full h-full object-cover" }) : videoUrl ? /* @__PURE__ */ jsx209(
+          ) : posterUrl ? /* @__PURE__ */ jsx210("img", { src: posterUrl, alt: title, loading: "lazy", className: "w-full h-full object-cover" }) : videoUrl ? /* @__PURE__ */ jsx210(
             "video",
             {
               src: videoUrl,
@@ -85585,9 +85621,9 @@ function BlockCard({
               preload: "metadata",
               className: "w-full h-full object-cover"
             }
-          ) : /* @__PURE__ */ jsx209("div", { className: `w-full h-full flex items-center justify-center ${colors.bg}`, children: /* @__PURE__ */ jsx209("span", { className: `text-[9px] font-medium ${colors.text}`, children: category.toUpperCase() }) }),
-          /* @__PURE__ */ jsxs167("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-1.5 bg-black/60 opacity-0 group-hover/card:opacity-100 group-focus-within/card:opacity-100 transition-opacity", children: [
-            onAdd && /* @__PURE__ */ jsxs167(
+          ) : /* @__PURE__ */ jsx210("div", { className: `w-full h-full flex items-center justify-center ${colors.bg}`, children: /* @__PURE__ */ jsx210("span", { className: `text-[9px] font-medium ${colors.text}`, children: category.toUpperCase() }) }),
+          /* @__PURE__ */ jsxs168("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-1.5 bg-black/60 opacity-0 group-hover/card:opacity-100 group-focus-within/card:opacity-100 transition-opacity", children: [
+            onAdd && /* @__PURE__ */ jsxs168(
               "button",
               {
                 type: "button",
@@ -85595,7 +85631,7 @@ function BlockCard({
                 title: "Add to composition at current time",
                 className: `flex items-center gap-1 px-3 py-1.5 rounded-md text-[10px] font-semibold transition-colors active:scale-[0.97] ${addState === "failed" ? "bg-red-500 text-white" : "bg-white text-black hover:bg-neutral-200"}`,
                 children: [
-                  /* @__PURE__ */ jsx209(
+                  /* @__PURE__ */ jsx210(
                     "svg",
                     {
                       width: "10",
@@ -85604,14 +85640,14 @@ function BlockCard({
                       fill: "none",
                       stroke: "currentColor",
                       strokeWidth: "2.5",
-                      children: /* @__PURE__ */ jsx209("path", { d: "M12 5v14M5 12h14" })
+                      children: /* @__PURE__ */ jsx210("path", { d: "M12 5v14M5 12h14" })
                     }
                   ),
                   addState === "adding" ? "Adding\u2026" : addState === "added" ? "Added!" : addState === "failed" ? "Failed" : "Add"
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs167(
+            /* @__PURE__ */ jsxs168(
               "button",
               {
                 type: "button",
@@ -85619,7 +85655,7 @@ function BlockCard({
                 title: "Generate a prompt to paste into your AI agent",
                 className: `flex items-center gap-1.5 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-md transition-colors active:scale-[0.97] ${onAdd ? "bg-white/15 text-white/90 hover:bg-white/25 text-[9px]" : "bg-white text-black hover:bg-neutral-200 text-[10px] font-semibold"}`,
                 children: [
-                  /* @__PURE__ */ jsxs167(
+                  /* @__PURE__ */ jsxs168(
                     "svg",
                     {
                       width: onAdd ? 9 : 11,
@@ -85629,8 +85665,8 @@ function BlockCard({
                       stroke: "currentColor",
                       strokeWidth: "2",
                       children: [
-                        /* @__PURE__ */ jsx209("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
-                        /* @__PURE__ */ jsx209("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+                        /* @__PURE__ */ jsx210("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+                        /* @__PURE__ */ jsx210("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
                       ]
                     }
                   ),
@@ -85639,19 +85675,19 @@ function BlockCard({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs167("div", { className: "absolute top-1 right-1 flex items-center gap-0.5 pointer-events-none", children: [
-            needsWebGL && /* @__PURE__ */ jsx209("span", { className: "px-1 py-px rounded-sm text-[7px] font-semibold text-purple-300 bg-purple-900/70", children: "WebGL" }),
-            duration != null && /* @__PURE__ */ jsxs167("span", { className: "px-1 py-px rounded-sm text-[8px] font-medium text-white/80 bg-black/50", children: [
+          /* @__PURE__ */ jsxs168("div", { className: "absolute top-1 right-1 flex items-center gap-0.5 pointer-events-none", children: [
+            needsWebGL && /* @__PURE__ */ jsx210("span", { className: "px-1 py-px rounded-sm text-[7px] font-semibold text-purple-300 bg-purple-900/70", children: "WebGL" }),
+            duration != null && /* @__PURE__ */ jsxs168("span", { className: "px-1 py-px rounded-sm text-[8px] font-medium text-white/80 bg-black/50", children: [
               duration,
               "s"
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs167("div", { className: "px-1.5 py-1.5", children: [
-          /* @__PURE__ */ jsx209("div", { className: "text-[10px] font-medium text-neutral-200 truncate leading-tight", children: title }),
-          /* @__PURE__ */ jsxs167("div", { className: "flex items-center gap-1 mt-0.5", children: [
-            /* @__PURE__ */ jsx209("span", { className: `w-1.5 h-1.5 rounded-full shrink-0 ${colors.dot}` }),
-            /* @__PURE__ */ jsx209("span", { className: `text-[8px] ${colors.text}`, children: BLOCK_CATEGORIES.find((c) => c.id === category)?.label })
+        /* @__PURE__ */ jsxs168("div", { className: "px-1.5 py-1.5", children: [
+          /* @__PURE__ */ jsx210("div", { className: "text-[10px] font-medium text-neutral-200 truncate leading-tight", children: title }),
+          /* @__PURE__ */ jsxs168("div", { className: "flex items-center gap-1 mt-0.5", children: [
+            /* @__PURE__ */ jsx210("span", { className: `w-1.5 h-1.5 rounded-full shrink-0 ${colors.dot}` }),
+            /* @__PURE__ */ jsx210("span", { className: `text-[8px] ${colors.text}`, children: BLOCK_CATEGORIES.find((c) => c.id === category)?.label })
           ] })
         ] })
       ]
@@ -85661,7 +85697,7 @@ function BlockCard({
 
 // src/components/sidebar/CompositionsTab.tsx
 import { memo as memo43, useCallback as useCallback157, useEffect as useEffect136, useRef as useRef173, useState as useState136 } from "react";
-import { jsx as jsx210, jsxs as jsxs168 } from "react/jsx-runtime";
+import { jsx as jsx211, jsxs as jsxs169 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
 var CARD_H = 45;
@@ -85791,7 +85827,7 @@ function CompCard({
       if (syncTimer.current) clearTimeout(syncTimer.current);
     };
   }, []);
-  return /* @__PURE__ */ jsxs168(
+  return /* @__PURE__ */ jsxs169(
     "div",
     {
       role: "button",
@@ -85823,8 +85859,8 @@ function CompCard({
       onPointerLeave: handleLeave,
       className: `group/card w-full select-none text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-grab active:cursor-grabbing outline-hidden focus-visible:bg-neutral-800/60 ${isActive ? "bg-studio-accent/10 border-l-2 border-studio-accent" : "border-l-2 border-transparent hover:bg-neutral-800/50"}`,
       children: [
-        /* @__PURE__ */ jsxs168("div", { className: "w-20 h-[45px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 relative", children: [
-          thumbnailFailed ? /* @__PURE__ */ jsx210("div", { className: "absolute inset-0 flex items-center justify-center px-1 text-center text-[8px] leading-tight text-neutral-600", children: "Preview unavailable" }) : /* @__PURE__ */ jsx210(
+        /* @__PURE__ */ jsxs169("div", { className: "w-20 h-[45px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 relative", children: [
+          thumbnailFailed ? /* @__PURE__ */ jsx211("div", { className: "absolute inset-0 flex items-center justify-center px-1 text-center text-[8px] leading-tight text-neutral-600", children: "Preview unavailable" }) : /* @__PURE__ */ jsx211(
             "img",
             {
               src: thumbnailUrl2,
@@ -85836,7 +85872,7 @@ function CompCard({
               className: `absolute inset-0 h-full w-full object-contain transition-opacity ${livePreviewLoaded ? "opacity-0" : "opacity-100"}`
             }
           ),
-          hovered && /* @__PURE__ */ jsx210(
+          hovered && /* @__PURE__ */ jsx211(
             "iframe",
             {
               ref: iframeRef,
@@ -85869,15 +85905,15 @@ function CompCard({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs168(
+        /* @__PURE__ */ jsxs169(
           "div",
           {
             className: "min-w-0 flex-1",
             title: lintInfo && lintInfo.count > 0 ? lintInfo.messages.join("\n") : void 0,
             children: [
-              /* @__PURE__ */ jsxs168("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx210("span", { className: "text-[11px] font-medium text-neutral-300 truncate", children: name }),
-                isRoot && /* @__PURE__ */ jsx210(
+              /* @__PURE__ */ jsxs169("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx211("span", { className: "text-[11px] font-medium text-neutral-300 truncate", children: name }),
+                isRoot && /* @__PURE__ */ jsx211(
                   "span",
                   {
                     "aria-label": "Root composition \u2014 opens automatically on load",
@@ -85886,7 +85922,7 @@ function CompCard({
                     children: "Root"
                   }
                 ),
-                lintInfo && lintInfo.count > 0 && /* @__PURE__ */ jsx210(
+                lintInfo && lintInfo.count > 0 && /* @__PURE__ */ jsx211(
                   "span",
                   {
                     "aria-label": `${lintInfo.count} lint finding${lintInfo.count === 1 ? "" : "s"}`,
@@ -85895,11 +85931,11 @@ function CompCard({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx210("span", { className: "text-[9px] text-neutral-600 truncate block", children: comp })
+              /* @__PURE__ */ jsx211("span", { className: "text-[9px] text-neutral-600 truncate block", children: comp })
             ]
           }
         ),
-        onAddToTimeline && /* @__PURE__ */ jsx210(
+        onAddToTimeline && /* @__PURE__ */ jsx211(
           "button",
           {
             type: "button",
@@ -85910,10 +85946,10 @@ function CompCard({
               onAddToTimeline();
             },
             className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-sm text-neutral-600 opacity-0 transition-[color,background-color,opacity] hover:bg-neutral-800 hover:text-studio-accent group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus:opacity-100",
-            children: /* @__PURE__ */ jsx210("span", { "aria-hidden": "true", children: "+" })
+            children: /* @__PURE__ */ jsx211("span", { "aria-hidden": "true", children: "+" })
           }
         ),
-        onRender && /* @__PURE__ */ jsx210(Tooltip, { label: isRendering ? "A render is already in progress" : `Render ${name}`, children: /* @__PURE__ */ jsx210(
+        onRender && /* @__PURE__ */ jsx211(Tooltip, { label: isRendering ? "A render is already in progress" : `Render ${name}`, children: /* @__PURE__ */ jsx211(
           "button",
           {
             type: "button",
@@ -85924,7 +85960,7 @@ function CompCard({
               onRender();
             },
             className: `flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${isRendering ? "text-neutral-600 cursor-not-allowed" : "text-neutral-600 hover:text-studio-accent hover:bg-neutral-800"}`,
-            children: /* @__PURE__ */ jsxs168(
+            children: /* @__PURE__ */ jsxs169(
               "svg",
               {
                 width: "14",
@@ -85937,9 +85973,9 @@ function CompCard({
                 strokeLinejoin: "round",
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ jsx210("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" }),
-                  /* @__PURE__ */ jsx210("polyline", { points: "7 10 12 15 17 10" }),
-                  /* @__PURE__ */ jsx210("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+                  /* @__PURE__ */ jsx211("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" }),
+                  /* @__PURE__ */ jsx211("polyline", { points: "7 10 12 15 17 10" }),
+                  /* @__PURE__ */ jsx211("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
                 ]
               }
             )
@@ -85962,9 +85998,9 @@ var CompositionsTab = memo43(function CompositionsTab2({
 }) {
   const thumbnailRevisions = usePlayerStore((state) => state.thumbnailRevisions);
   if (compositions.length === 0) {
-    return /* @__PURE__ */ jsx210("div", { className: "flex-1 flex items-center justify-center px-4", children: /* @__PURE__ */ jsx210("p", { className: "text-xs text-neutral-600 text-center", children: "No compositions found" }) });
+    return /* @__PURE__ */ jsx211("div", { className: "flex-1 flex items-center justify-center px-4", children: /* @__PURE__ */ jsx211("p", { className: "text-xs text-neutral-600 text-center", children: "No compositions found" }) });
   }
-  return /* @__PURE__ */ jsx210("div", { className: "flex-1 overflow-y-auto", children: compositions.map((comp) => /* @__PURE__ */ jsx210(
+  return /* @__PURE__ */ jsx211("div", { className: "flex-1 overflow-y-auto", children: compositions.map((comp) => /* @__PURE__ */ jsx211(
     CompCard,
     {
       projectId,
@@ -85983,9 +86019,9 @@ var CompositionsTab = memo43(function CompositionsTab2({
 });
 
 // src/components/sidebar/CompositionsPanel.tsx
-import { jsx as jsx211 } from "react/jsx-runtime";
+import { jsx as jsx212 } from "react/jsx-runtime";
 function CompositionsPanel(props) {
-  return /* @__PURE__ */ jsx211(
+  return /* @__PURE__ */ jsx212(
     CompositionsTab,
     {
       ...props,
@@ -85995,14 +86031,14 @@ function CompositionsPanel(props) {
 }
 
 // src/components/sidebar/SidebarLintButton.tsx
-import { jsx as jsx212, jsxs as jsxs169 } from "react/jsx-runtime";
+import { jsx as jsx213, jsxs as jsxs170 } from "react/jsx-runtime";
 function SidebarLintButton({
   onLint,
   linting,
   findingCount,
   hasError
 }) {
-  return /* @__PURE__ */ jsx212("div", { className: "border-t border-neutral-800 p-2 shrink-0", children: /* @__PURE__ */ jsxs169(
+  return /* @__PURE__ */ jsx213("div", { className: "border-t border-neutral-800 p-2 shrink-0", children: /* @__PURE__ */ jsxs170(
     "button",
     {
       type: "button",
@@ -86010,7 +86046,7 @@ function SidebarLintButton({
       disabled: linting,
       className: "w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 enabled:hover:text-amber-300 enabled:hover:bg-neutral-800 enabled:active:scale-[0.98] transition-colors disabled:opacity-40",
       children: [
-        /* @__PURE__ */ jsxs169(
+        /* @__PURE__ */ jsxs170(
           "svg",
           {
             width: "12",
@@ -86020,20 +86056,20 @@ function SidebarLintButton({
             stroke: "currentColor",
             strokeWidth: "2",
             children: [
-              /* @__PURE__ */ jsx212("path", { d: "M9 11l3 3L22 4" }),
-              /* @__PURE__ */ jsx212("path", { d: "M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" })
+              /* @__PURE__ */ jsx213("path", { d: "M9 11l3 3L22 4" }),
+              /* @__PURE__ */ jsx213("path", { d: "M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" })
             ]
           }
         ),
         linting ? "Linting\u2026" : "Lint",
-        !linting && findingCount != null && findingCount > 0 && /* @__PURE__ */ jsxs169(
+        !linting && findingCount != null && findingCount > 0 && /* @__PURE__ */ jsxs170(
           "span",
           {
             "data-lint-badge": hasError ? "error" : "warning",
             className: hasError ? "ml-1 min-w-[16px] rounded-full bg-panel-danger/25 px-1 text-[9px] font-bold text-panel-danger animate-pulse motion-reduce:animate-none" : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-400",
             children: [
               findingCount,
-              /* @__PURE__ */ jsx212("span", { className: "sr-only", children: hasError ? " lint findings, including errors" : " lint findings, warnings only" })
+              /* @__PURE__ */ jsx213("span", { className: "sr-only", children: hasError ? " lint findings, including errors" : " lint findings, warnings only" })
             ]
           }
         )
@@ -86067,10 +86103,10 @@ function persistRenderSettings(format, quality, fps) {
 }
 
 // src/components/StudioLeftPanels.tsx
-import { Fragment as Fragment57, jsx as jsx213, jsxs as jsxs170 } from "react/jsx-runtime";
+import { Fragment as Fragment57, jsx as jsx214, jsxs as jsxs171 } from "react/jsx-runtime";
 function PanelColumn({ footer, children }) {
-  return /* @__PURE__ */ jsxs170("div", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsx213("div", { className: "flex min-h-0 flex-1 flex-col", children }),
+  return /* @__PURE__ */ jsxs171("div", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx214("div", { className: "flex min-h-0 flex-1 flex-col", children }),
     footer
   ] });
 }
@@ -86118,7 +86154,7 @@ function StudioLeftPanels({
   const importFiles = async (files, dir) => {
     await handleImportFiles(files, dir);
   };
-  const lintButton = /* @__PURE__ */ jsx213(
+  const lintButton = /* @__PURE__ */ jsx214(
     SidebarLintButton,
     {
       onLint,
@@ -86127,8 +86163,8 @@ function StudioLeftPanels({
       hasError: lintHasError
     }
   );
-  return /* @__PURE__ */ jsxs170(Fragment57, { children: [
-    /* @__PURE__ */ jsx213(Dock.Panel, { id: "compositions", children: /* @__PURE__ */ jsx213(PanelColumn, { footer: lintButton, children: /* @__PURE__ */ jsx213(
+  return /* @__PURE__ */ jsxs171(Fragment57, { children: [
+    /* @__PURE__ */ jsx214(Dock.Panel, { id: "compositions", children: /* @__PURE__ */ jsx214(PanelColumn, { footer: lintButton, children: /* @__PURE__ */ jsx214(
       CompositionsPanel,
       {
         projectId,
@@ -86141,7 +86177,7 @@ function StudioLeftPanels({
         lintFindingsByFile
       }
     ) }) }),
-    /* @__PURE__ */ jsx213(Dock.Panel, { id: "assets", children: /* @__PURE__ */ jsx213(PanelColumn, { footer: lintButton, children: /* @__PURE__ */ jsx213(
+    /* @__PURE__ */ jsx214(Dock.Panel, { id: "assets", children: /* @__PURE__ */ jsx214(PanelColumn, { footer: lintButton, children: /* @__PURE__ */ jsx214(
       AssetsTab,
       {
         projectId,
@@ -86152,8 +86188,8 @@ function StudioLeftPanels({
         onAddAssetToTimeline
       }
     ) }) }),
-    /* @__PURE__ */ jsx213(Dock.Panel, { id: "code", children: /* @__PURE__ */ jsx213(PanelColumn, { footer: lintButton, children: /* @__PURE__ */ jsxs170("div", { className: "flex min-h-0 flex-1", children: [
-      fileTree.length > 0 && /* @__PURE__ */ jsx213("div", { className: "w-[160px] shrink-0 border-r border-neutral-800 overflow-y-auto", children: /* @__PURE__ */ jsx213(
+    /* @__PURE__ */ jsx214(Dock.Panel, { id: "code", children: /* @__PURE__ */ jsx214(PanelColumn, { footer: lintButton, children: /* @__PURE__ */ jsxs171("div", { className: "flex min-h-0 flex-1", children: [
+      fileTree.length > 0 && /* @__PURE__ */ jsx214("div", { className: "w-[160px] shrink-0 border-r border-neutral-800 overflow-y-auto", children: /* @__PURE__ */ jsx214(
         FileTree,
         {
           files: fileTree,
@@ -86169,7 +86205,7 @@ function StudioLeftPanels({
           lintFindingsByFile
         }
       ) }),
-      /* @__PURE__ */ jsx213("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ jsx213(
+      /* @__PURE__ */ jsx214("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ jsx214(
         CodeBody,
         {
           projectId,
@@ -86179,7 +86215,7 @@ function StudioLeftPanels({
         }
       ) })
     ] }) }) }),
-    /* @__PURE__ */ jsx213(Dock.Panel, { id: "catalog", children: /* @__PURE__ */ jsx213(PanelColumn, { footer: lintButton, children: /* @__PURE__ */ jsx213(BlocksTab, { onAddBlock, onPreviewBlock }) }) })
+    /* @__PURE__ */ jsx214(Dock.Panel, { id: "catalog", children: /* @__PURE__ */ jsx214(PanelColumn, { footer: lintButton, children: /* @__PURE__ */ jsx214(BlocksTab, { onAddBlock, onPreviewBlock }) }) })
   ] });
 }
 function CodeBody({
@@ -86189,19 +86225,19 @@ function CodeBody({
   onChange
 }) {
   if (!editingFile) {
-    return /* @__PURE__ */ jsx213("div", { className: "flex items-center justify-center h-full text-neutral-600 text-sm", children: "Select a file to edit" });
+    return /* @__PURE__ */ jsx214("div", { className: "flex items-center justify-center h-full text-neutral-600 text-sm", children: "Select a file to edit" });
   }
   if (isMediaFile(editingFile.path)) {
-    return /* @__PURE__ */ jsx213(MediaPreview, { projectId, filePath: editingFile.path });
+    return /* @__PURE__ */ jsx214(MediaPreview, { projectId, filePath: editingFile.path });
   }
   if (editingFile.content == null) {
-    return /* @__PURE__ */ jsxs170("div", { className: "flex h-full items-center justify-center text-[11px] text-neutral-600", children: [
+    return /* @__PURE__ */ jsxs171("div", { className: "flex h-full items-center justify-center text-[11px] text-neutral-600", children: [
       "Loading ",
       editingFile.path,
       "\u2026"
     ] });
   }
-  return /* @__PURE__ */ jsx213(
+  return /* @__PURE__ */ jsx214(
     SourceEditor,
     {
       content: editingFile.content,
@@ -86427,7 +86463,7 @@ function getVisibleLayers(layers, collapsed) {
 }
 
 // src/components/editor/LayersPanel.tsx
-import { jsx as jsx214, jsxs as jsxs171 } from "react/jsx-runtime";
+import { jsx as jsx215, jsxs as jsxs172 } from "react/jsx-runtime";
 var LAYERS_PANEL_MAX_ROWS = 80;
 var TAG_ICONS = {
   video: "Vi",
@@ -86714,24 +86750,24 @@ var LayersPanel = memo44(function LayersPanel2() {
     onSingleSibling: handleSingleSibling
   });
   if (layers.length === 0) {
-    return /* @__PURE__ */ jsxs171("div", { className: "flex h-full flex-col items-center justify-center bg-panel-bg px-6 text-center", children: [
-      /* @__PURE__ */ jsx214(Layers, { size: 18, className: "mb-3 text-panel-text-5" }),
-      /* @__PURE__ */ jsx214("p", { className: "text-sm font-medium text-panel-text-1", children: "No layers" }),
-      /* @__PURE__ */ jsx214("p", { className: "mt-1 text-xs text-neutral-500", children: "Load a composition to see its element tree" })
+    return /* @__PURE__ */ jsxs172("div", { className: "flex h-full flex-col items-center justify-center bg-panel-bg px-6 text-center", children: [
+      /* @__PURE__ */ jsx215(Layers, { size: 18, className: "mb-3 text-panel-text-5" }),
+      /* @__PURE__ */ jsx215("p", { className: "text-sm font-medium text-panel-text-1", children: "No layers" }),
+      /* @__PURE__ */ jsx215("p", { className: "mt-1 text-xs text-neutral-500", children: "Load a composition to see its element tree" })
     ] });
   }
-  return /* @__PURE__ */ jsxs171(
+  return /* @__PURE__ */ jsxs172(
     "div",
     {
       className: "flex h-full min-h-0 flex-col overflow-hidden bg-panel-bg",
       onPointerLeave: () => handleLayerHover(null),
       children: [
-        /* @__PURE__ */ jsxs171("div", { className: "border-b border-panel-border px-3 py-2 text-[11px] text-panel-text-3", children: [
+        /* @__PURE__ */ jsxs172("div", { className: "border-b border-panel-border px-3 py-2 text-[11px] text-panel-text-3", children: [
           layers.length,
           " layer",
           layers.length === 1 ? "" : "s"
         ] }),
-        /* @__PURE__ */ jsxs171(
+        /* @__PURE__ */ jsxs172(
           "div",
           {
             ref: scrollContainerRef,
@@ -86740,15 +86776,15 @@ var LayersPanel = memo44(function LayersPanel2() {
             onPointerUp: handleContainerPointerUp,
             onPointerCancel: handleContainerPointerUp,
             children: [
-              activeGroupElement && /* @__PURE__ */ jsxs171(
+              activeGroupElement && /* @__PURE__ */ jsxs172(
                 "button",
                 {
                   type: "button",
                   onClick: () => setActiveGroupElement(null),
                   className: "flex w-full items-center gap-1.5 px-2 py-1 text-left text-[11px] text-panel-text-3 hover:bg-panel-hover/40 hover:text-panel-text-1",
                   children: [
-                    /* @__PURE__ */ jsx214("span", { "aria-hidden": "true", children: "\u2190" }),
-                    /* @__PURE__ */ jsx214("span", { className: "truncate", children: activeGroupElement.getAttribute("data-hf-group") || "Group" })
+                    /* @__PURE__ */ jsx215("span", { "aria-hidden": "true", children: "\u2190" }),
+                    /* @__PURE__ */ jsx215("span", { className: "truncate", children: activeGroupElement.getAttribute("data-hf-group") || "Group" })
                   ]
                 }
               ),
@@ -86759,7 +86795,7 @@ var LayersPanel = memo44(function LayersPanel2() {
                 const isCollapsed = collapsed[layer.key] ?? false;
                 const hasChildren = layer.childCount > 0;
                 const isCompHost = isCompositionHost(layer.element);
-                return /* @__PURE__ */ jsxs171(
+                return /* @__PURE__ */ jsxs172(
                   "div",
                   {
                     "data-layer-index": index,
@@ -86779,7 +86815,7 @@ var LayersPanel = memo44(function LayersPanel2() {
                     style: { paddingLeft: 8 + layer.depth * 16 },
                     title: draggable ? layer.element.hasAttribute("data-hf-group") ? "Double-click to enter group" : void 0 : "This layer can't be reordered",
                     children: [
-                      hasChildren ? /* @__PURE__ */ jsx214(
+                      hasChildren ? /* @__PURE__ */ jsx215(
                         "button",
                         {
                           type: "button",
@@ -86787,7 +86823,7 @@ var LayersPanel = memo44(function LayersPanel2() {
                           "aria-expanded": !isCollapsed,
                           "aria-label": isCollapsed ? "Expand children" : "Collapse children",
                           className: "relative flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-neutral-500 hover:text-neutral-300 before:absolute before:-inset-1.5 before:content-['']",
-                          children: /* @__PURE__ */ jsx214(
+                          children: /* @__PURE__ */ jsx215(
                             "svg",
                             {
                               width: "8",
@@ -86795,26 +86831,26 @@ var LayersPanel = memo44(function LayersPanel2() {
                               viewBox: "0 0 8 8",
                               fill: "currentColor",
                               className: `transition-transform ${isCollapsed ? "" : "rotate-90"}`,
-                              children: /* @__PURE__ */ jsx214("path", { d: "M2 1l4 3-4 3z" })
+                              children: /* @__PURE__ */ jsx215("path", { d: "M2 1l4 3-4 3z" })
                             }
                           )
                         }
-                      ) : /* @__PURE__ */ jsx214("span", { className: "w-4 shrink-0" }),
-                      /* @__PURE__ */ jsx214(
+                      ) : /* @__PURE__ */ jsx215("span", { className: "w-4 shrink-0" }),
+                      /* @__PURE__ */ jsx215(
                         "span",
                         {
                           className: `flex h-5 w-5 shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${selected ? "bg-panel-accent/18 text-panel-accent" : isCompHost ? "bg-panel-accent/40 text-panel-accent" : "bg-panel-hover text-panel-text-4"}`,
                           children: getTagBadge(layer.tagName)
                         }
                       ),
-                      /* @__PURE__ */ jsx214("span", { className: "min-w-0 flex-1 truncate text-[11px]", children: layer.label }),
-                      hasChildren && /* @__PURE__ */ jsx214("span", { className: "text-[9px] tabular-nums text-panel-text-5", children: layer.childCount })
+                      /* @__PURE__ */ jsx215("span", { className: "min-w-0 flex-1 truncate text-[11px]", children: layer.label }),
+                      hasChildren && /* @__PURE__ */ jsx215("span", { className: "text-[9px] tabular-nums text-panel-text-5", children: layer.childCount })
                     ]
                   },
                   layer.key
                 );
               }),
-              insertionLineY != null && /* @__PURE__ */ jsx214(
+              insertionLineY != null && /* @__PURE__ */ jsx215(
                 "div",
                 {
                   className: "pointer-events-none absolute left-2 right-2 h-0.5 bg-studio-accent",
@@ -86837,18 +86873,18 @@ import { memo as memo45, useCallback as useCallback161 } from "react";
 
 // src/captions/components/shared.tsx
 import { useEffect as useEffect138, useRef as useRef176, useState as useState139 } from "react";
-import { jsx as jsx215, jsxs as jsxs172 } from "react/jsx-runtime";
+import { jsx as jsx216, jsxs as jsxs173 } 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 }) {
-  return /* @__PURE__ */ jsxs172("div", { className: "mb-3", children: [
-    /* @__PURE__ */ jsx215("div", { className: "flex items-center gap-1.5 mt-2 mb-1.5", children: /* @__PURE__ */ jsx215("span", { className: "text-2xs font-medium text-neutral-500 uppercase tracking-wider", children: label }) }),
-    /* @__PURE__ */ jsx215("div", { className: "space-y-1", children })
+  return /* @__PURE__ */ jsxs173("div", { className: "mb-3", children: [
+    /* @__PURE__ */ jsx216("div", { className: "flex items-center gap-1.5 mt-2 mb-1.5", children: /* @__PURE__ */ jsx216("span", { className: "text-2xs font-medium text-neutral-500 uppercase tracking-wider", children: label }) }),
+    /* @__PURE__ */ jsx216("div", { className: "space-y-1", children })
   ] });
 }
 function Row({ label, children }) {
-  return /* @__PURE__ */ jsxs172("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx215("span", { className: "text-2xs text-neutral-600 w-14 text-right shrink-0", children: label }),
-    /* @__PURE__ */ jsx215("div", { className: "flex-1 min-w-0", children })
+  return /* @__PURE__ */ jsxs173("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx216("span", { className: "text-2xs text-neutral-600 w-14 text-right shrink-0", children: label }),
+    /* @__PURE__ */ jsx216("div", { className: "flex-1 min-w-0", children })
   ] });
 }
 function NumberField2({
@@ -86878,7 +86914,7 @@ function NumberField2({
       onCommit(clamped);
     }
   };
-  return /* @__PURE__ */ jsx215(
+  return /* @__PURE__ */ jsx216(
     "input",
     {
       type: "number",
@@ -86903,7 +86939,7 @@ function NumberField2({
 }
 
 // src/captions/components/CaptionAnimationPanel.tsx
-import { jsx as jsx216, jsxs as jsxs173 } from "react/jsx-runtime";
+import { jsx as jsx217, jsxs as jsxs174 } from "react/jsx-runtime";
 var ENTRANCE_PRESETS = [
   "none",
   "fade",
@@ -86969,8 +87005,8 @@ function AnimationPhase({
   const ease = animation?.ease ?? "power2.out";
   const stagger = animation?.stagger ?? 0;
   const intensity = animation?.intensity ?? 1;
-  return /* @__PURE__ */ jsxs173(Section2, { label, children: [
-    /* @__PURE__ */ jsx216(Row, { label: "Preset", children: /* @__PURE__ */ jsx216(
+  return /* @__PURE__ */ jsxs174(Section2, { label, children: [
+    /* @__PURE__ */ jsx217(Row, { label: "Preset", children: /* @__PURE__ */ jsx217(
       "select",
       {
         value: preset,
@@ -86978,10 +87014,10 @@ function AnimationPhase({
         "aria-label": `${label} preset`,
         onChange: (e) => onChange({ preset: e.target.value }),
         className: inputCls,
-        children: presets.map((p) => /* @__PURE__ */ jsx216("option", { value: p, children: p }, p))
+        children: presets.map((p) => /* @__PURE__ */ jsx217("option", { value: p, children: p }, p))
       }
     ) }),
-    /* @__PURE__ */ jsx216(Row, { label: "Duration", children: /* @__PURE__ */ jsx216(
+    /* @__PURE__ */ jsx217(Row, { label: "Duration", children: /* @__PURE__ */ jsx217(
       NumberField2,
       {
         value: duration,
@@ -86993,7 +87029,7 @@ function AnimationPhase({
         onCommit: (v) => onChange({ duration: v })
       }
     ) }),
-    /* @__PURE__ */ jsx216(Row, { label: "Ease", children: /* @__PURE__ */ jsx216(
+    /* @__PURE__ */ jsx217(Row, { label: "Ease", children: /* @__PURE__ */ jsx217(
       "select",
       {
         value: ease,
@@ -87001,10 +87037,10 @@ function AnimationPhase({
         "aria-label": `${label} ease`,
         onChange: (e) => onChange({ ease: e.target.value }),
         className: inputCls,
-        children: EASE_PRESETS2.map((e) => /* @__PURE__ */ jsx216("option", { value: e, children: e }, e))
+        children: EASE_PRESETS2.map((e) => /* @__PURE__ */ jsx217("option", { value: e, children: e }, e))
       }
     ) }),
-    /* @__PURE__ */ jsx216(Row, { label: "Stagger", children: /* @__PURE__ */ jsx216(
+    /* @__PURE__ */ jsx217(Row, { label: "Stagger", children: /* @__PURE__ */ jsx217(
       NumberField2,
       {
         value: stagger,
@@ -87016,8 +87052,8 @@ function AnimationPhase({
         onCommit: (v) => onChange({ stagger: v })
       }
     ) }),
-    showIntensity && /* @__PURE__ */ jsx216(Row, { label: "Intensity", children: /* @__PURE__ */ jsxs173("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx216(
+    showIntensity && /* @__PURE__ */ jsx217(Row, { label: "Intensity", children: /* @__PURE__ */ jsxs174("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx217(
         "input",
         {
           type: "range",
@@ -87034,7 +87070,7 @@ function AnimationPhase({
           className: "flex-1 accent-studio-accent disabled:opacity-40"
         }
       ),
-      /* @__PURE__ */ jsx216("span", { className: "text-2xs text-neutral-400 font-mono w-8 text-right shrink-0", children: intensity.toFixed(2) })
+      /* @__PURE__ */ jsx217("span", { className: "text-2xs text-neutral-400 font-mono w-8 text-right shrink-0", children: intensity.toFixed(2) })
     ] }) })
   ] });
 }
@@ -87080,13 +87116,13 @@ var CaptionAnimationPanel = memo45(function CaptionAnimationPanel2() {
     if (animation) applyAnimationToAll(animation);
   }, [animation, applyAnimationToAll]);
   if (!group || !resolvedGroupId || !animation) {
-    return /* @__PURE__ */ jsx216("div", { className: "flex items-center justify-center h-full px-4 text-center", children: /* @__PURE__ */ jsx216("p", { className: "text-xs text-neutral-500", children: "Select a caption word to edit animations" }) });
+    return /* @__PURE__ */ jsx217("div", { className: "flex items-center justify-center h-full px-4 text-center", children: /* @__PURE__ */ jsx217("p", { className: "text-xs text-neutral-500", children: "Select a caption word to edit animations" }) });
   }
   const gated = !ANIMATION_PIPELINE_WIRED;
-  return /* @__PURE__ */ jsxs173("div", { className: "flex flex-col h-full min-h-0", children: [
-    gated && /* @__PURE__ */ jsx216("div", { className: "shrink-0 mx-3 mt-2 px-2 py-1.5 rounded-sm border border-amber-500/30 bg-amber-500/10", children: /* @__PURE__ */ jsx216("p", { className: "text-2xs text-amber-300/90 leading-snug", children: "Animation editing isn't applied to playback or saved yet, so these controls are disabled." }) }),
-    /* @__PURE__ */ jsxs173("div", { className: "flex-1 overflow-y-auto px-3 py-2", children: [
-      /* @__PURE__ */ jsx216(
+  return /* @__PURE__ */ jsxs174("div", { className: "flex flex-col h-full min-h-0", children: [
+    gated && /* @__PURE__ */ jsx217("div", { className: "shrink-0 mx-3 mt-2 px-2 py-1.5 rounded-sm border border-amber-500/30 bg-amber-500/10", children: /* @__PURE__ */ jsx217("p", { className: "text-2xs text-amber-300/90 leading-snug", children: "Animation editing isn't applied to playback or saved yet, so these controls are disabled." }) }),
+    /* @__PURE__ */ jsxs174("div", { className: "flex-1 overflow-y-auto px-3 py-2", children: [
+      /* @__PURE__ */ jsx217(
         AnimationPhase,
         {
           label: "Entrance",
@@ -87096,7 +87132,7 @@ var CaptionAnimationPanel = memo45(function CaptionAnimationPanel2() {
           onChange: handleEntranceChange
         }
       ),
-      /* @__PURE__ */ jsx216(
+      /* @__PURE__ */ jsx217(
         AnimationPhase,
         {
           label: "Highlight",
@@ -87107,7 +87143,7 @@ var CaptionAnimationPanel = memo45(function CaptionAnimationPanel2() {
           onChange: handleHighlightChange
         }
       ),
-      /* @__PURE__ */ jsx216(
+      /* @__PURE__ */ jsx217(
         AnimationPhase,
         {
           label: "Exit",
@@ -87118,7 +87154,7 @@ var CaptionAnimationPanel = memo45(function CaptionAnimationPanel2() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx216("div", { className: "shrink-0 px-3 py-2 border-t border-neutral-800", children: /* @__PURE__ */ jsx216(
+    /* @__PURE__ */ jsx217("div", { className: "shrink-0 px-3 py-2 border-t border-neutral-800", children: /* @__PURE__ */ jsx217(
       "button",
       {
         type: "button",
@@ -87133,7 +87169,7 @@ var CaptionAnimationPanel = memo45(function CaptionAnimationPanel2() {
 });
 
 // src/captions/components/CaptionPropertyPanel.tsx
-import { jsx as jsx217, jsxs as jsxs174 } from "react/jsx-runtime";
+import { jsx as jsx218, jsxs as jsxs175 } from "react/jsx-runtime";
 function isMixedValue(model, selectedSegmentIds, key2, fallback) {
   if (!model || selectedSegmentIds.size < 2) return false;
   let first2;
@@ -87262,7 +87298,7 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
     [selectedGroupId, updateGroupStyle, updateSelectedStyle, applyToIframeDom]
   );
   if (selectedSegmentIds.size === 0) {
-    return /* @__PURE__ */ jsx217("div", { className: "flex items-center justify-center h-full px-4 text-center", children: /* @__PURE__ */ jsx217("p", { className: "text-xs text-neutral-500", children: "Select caption words to edit their style" }) });
+    return /* @__PURE__ */ jsx218("div", { className: "flex items-center justify-center h-full px-4 text-center", children: /* @__PURE__ */ jsx218("p", { className: "text-xs text-neutral-500", children: "Select caption words to edit their style" }) });
   }
   const x = effectiveStyle.x ?? 0;
   const y = effectiveStyle.y ?? 0;
@@ -87273,11 +87309,11 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
   const scaleMixed = isMixedValue(model, selectedSegmentIds, "scaleX", 1);
   const rotationMixed = isMixedValue(model, selectedSegmentIds, "rotation", 0);
   const countLabel = selectedSegmentIds.size === 1 ? "1 word" : `${selectedSegmentIds.size} words`;
-  return /* @__PURE__ */ jsxs174("div", { className: "flex flex-col h-full min-h-0", children: [
-    /* @__PURE__ */ jsxs174("div", { className: "px-3 py-2 border-b border-neutral-800 shrink-0", children: [
-      /* @__PURE__ */ jsx217("div", { className: "flex items-center justify-between mb-1.5", children: /* @__PURE__ */ jsx217("span", { className: "text-2xs text-neutral-500", children: countLabel }) }),
-      /* @__PURE__ */ jsxs174("div", { className: "flex gap-1", role: "tablist", "aria-label": "Caption editing tabs", children: [
-        /* @__PURE__ */ jsx217(
+  return /* @__PURE__ */ jsxs175("div", { className: "flex flex-col h-full min-h-0", children: [
+    /* @__PURE__ */ jsxs175("div", { className: "px-3 py-2 border-b border-neutral-800 shrink-0", children: [
+      /* @__PURE__ */ jsx218("div", { className: "flex items-center justify-between mb-1.5", children: /* @__PURE__ */ jsx218("span", { className: "text-2xs text-neutral-500", children: countLabel }) }),
+      /* @__PURE__ */ jsxs175("div", { className: "flex gap-1", role: "tablist", "aria-label": "Caption editing tabs", children: [
+        /* @__PURE__ */ jsx218(
           "button",
           {
             type: "button",
@@ -87291,7 +87327,7 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
             children: "Style"
           }
         ),
-        /* @__PURE__ */ jsx217(
+        /* @__PURE__ */ jsx218(
           "button",
           {
             type: "button",
@@ -87307,10 +87343,10 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
         )
       ] })
     ] }),
-    activeTab === "animation" && /* @__PURE__ */ jsx217(CaptionAnimationPanel, {}),
-    activeTab === "style" && /* @__PURE__ */ jsxs174("div", { className: "flex-1 overflow-y-auto px-3 py-2", children: [
-      /* @__PURE__ */ jsxs174(Section2, { label: "Position", children: [
-        /* @__PURE__ */ jsx217(Row, { label: "X", children: /* @__PURE__ */ jsx217(
+    activeTab === "animation" && /* @__PURE__ */ jsx218(CaptionAnimationPanel, {}),
+    activeTab === "style" && /* @__PURE__ */ jsxs175("div", { className: "flex-1 overflow-y-auto px-3 py-2", children: [
+      /* @__PURE__ */ jsxs175(Section2, { label: "Position", children: [
+        /* @__PURE__ */ jsx218(Row, { label: "X", children: /* @__PURE__ */ jsx218(
           NumberField2,
           {
             value: x,
@@ -87319,7 +87355,7 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
             onCommit: (v) => handleStyleChange({ x: v })
           }
         ) }),
-        /* @__PURE__ */ jsx217(Row, { label: "Y", children: /* @__PURE__ */ jsx217(
+        /* @__PURE__ */ jsx218(Row, { label: "Y", children: /* @__PURE__ */ jsx218(
           NumberField2,
           {
             value: y,
@@ -87329,8 +87365,8 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs174(Section2, { label: "Transform", children: [
-        /* @__PURE__ */ jsx217(Row, { label: "Scale", children: /* @__PURE__ */ jsx217(
+      /* @__PURE__ */ jsxs175(Section2, { label: "Transform", children: [
+        /* @__PURE__ */ jsx218(Row, { label: "Scale", children: /* @__PURE__ */ jsx218(
           NumberField2,
           {
             value: scaleX,
@@ -87340,7 +87376,7 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
             onCommit: (v) => handleStyleChange({ scaleX: v, scaleY: v })
           }
         ) }),
-        /* @__PURE__ */ jsx217(Row, { label: "Rotation", children: /* @__PURE__ */ jsx217(
+        /* @__PURE__ */ jsx218(Row, { label: "Rotation", children: /* @__PURE__ */ jsx218(
           NumberField2,
           {
             value: rotation,
@@ -87356,7 +87392,7 @@ var CaptionPropertyPanel = memo46(function CaptionPropertyPanel2({
 
 // src/components/editor/BlockParamsPanel.tsx
 import { memo as memo47, useCallback as useCallback163, useEffect as useEffect139, useRef as useRef177, useState as useState141 } from "react";
-import { jsx as jsx218, jsxs as jsxs175 } from "react/jsx-runtime";
+import { jsx as jsx219, jsxs as jsxs176 } from "react/jsx-runtime";
 var BlockParamsPanel = memo47(function BlockParamsPanel2({
   blockName,
   blockTitle,
@@ -87455,17 +87491,17 @@ var BlockParamsPanel = memo47(function BlockParamsPanel2({
     commitTimersRef.current.clear();
   };
   useEffect139(() => () => flushRef.current(), []);
-  return /* @__PURE__ */ jsxs175("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ jsxs175("div", { className: "flex items-center justify-between px-3 py-2 border-b border-neutral-800", children: [
-      /* @__PURE__ */ jsx218("div", { className: "text-[11px] font-semibold text-neutral-200 truncate", children: blockTitle }),
-      /* @__PURE__ */ jsx218(
+  return /* @__PURE__ */ jsxs176("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs176("div", { className: "flex items-center justify-between px-3 py-2 border-b border-neutral-800", children: [
+      /* @__PURE__ */ jsx219("div", { className: "text-[11px] font-semibold text-neutral-200 truncate", children: blockTitle }),
+      /* @__PURE__ */ jsx219(
         "button",
         {
           type: "button",
           onClick: onClose,
           "aria-label": "Close block parameters",
           className: "p-1.5 -m-1 text-neutral-500 hover:text-neutral-300 active:scale-[0.97] transition-colors",
-          children: /* @__PURE__ */ jsxs175(
+          children: /* @__PURE__ */ jsxs176(
             "svg",
             {
               width: "14",
@@ -87477,19 +87513,19 @@ var BlockParamsPanel = memo47(function BlockParamsPanel2({
               strokeLinecap: "round",
               strokeLinejoin: "round",
               children: [
-                /* @__PURE__ */ jsx218("path", { d: "M18 6 6 18" }),
-                /* @__PURE__ */ jsx218("path", { d: "m6 6 12 12" })
+                /* @__PURE__ */ jsx219("path", { d: "M18 6 6 18" }),
+                /* @__PURE__ */ jsx219("path", { d: "m6 6 12 12" })
               ]
             }
           )
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs175("div", { className: "flex-1 overflow-y-auto p-3 space-y-3", children: [
-      /* @__PURE__ */ jsx218("div", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider", children: "Parameters" }),
-      params.length === 0 && /* @__PURE__ */ jsx218("div", { className: "text-[10px] text-neutral-500", children: "This block has no editable parameters." }),
-      !fileManager && params.length > 0 && /* @__PURE__ */ jsx218("div", { className: "text-[10px] text-amber-400/90", children: "Block params can't be edited here \u2014 no project file access." }),
-      params.map((param) => /* @__PURE__ */ jsx218(
+    /* @__PURE__ */ jsxs176("div", { className: "flex-1 overflow-y-auto p-3 space-y-3", children: [
+      /* @__PURE__ */ jsx219("div", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider", children: "Parameters" }),
+      params.length === 0 && /* @__PURE__ */ jsx219("div", { className: "text-[10px] text-neutral-500", children: "This block has no editable parameters." }),
+      !fileManager && params.length > 0 && /* @__PURE__ */ jsx219("div", { className: "text-[10px] text-amber-400/90", children: "Block params can't be edited here \u2014 no project file access." }),
+      params.map((param) => /* @__PURE__ */ jsx219(
         ParamControl,
         {
           param,
@@ -87499,12 +87535,12 @@ var BlockParamsPanel = memo47(function BlockParamsPanel2({
         },
         param.key
       )),
-      commitState.tone === "saving" && /* @__PURE__ */ jsx218("div", { className: "text-[10px] text-neutral-500", role: "status", children: "Saving\u2026" }),
-      commitState.tone === "saved" && /* @__PURE__ */ jsxs175("div", { className: "text-[10px] text-emerald-500/90", role: "status", children: [
+      commitState.tone === "saving" && /* @__PURE__ */ jsx219("div", { className: "text-[10px] text-neutral-500", role: "status", children: "Saving\u2026" }),
+      commitState.tone === "saved" && /* @__PURE__ */ jsxs176("div", { className: "text-[10px] text-emerald-500/90", role: "status", children: [
         "Saved to ",
         compositionPath
       ] }),
-      commitState.tone === "error" && /* @__PURE__ */ jsx218("div", { className: "text-[10px] text-red-400", role: "alert", children: commitState.message })
+      commitState.tone === "error" && /* @__PURE__ */ jsx219("div", { className: "text-[10px] text-red-400", role: "alert", children: commitState.message })
     ] })
   ] });
 });
@@ -87514,10 +87550,10 @@ function ParamControl({
   disabled,
   onChange
 }) {
-  return /* @__PURE__ */ jsxs175("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsx218("label", { className: "text-[10px] font-medium text-neutral-400", children: param.label }),
-    param.type === "color" && /* @__PURE__ */ jsxs175("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx218(
+  return /* @__PURE__ */ jsxs176("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx219("label", { className: "text-[10px] font-medium text-neutral-400", children: param.label }),
+    param.type === "color" && /* @__PURE__ */ jsxs176("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx219(
         "input",
         {
           type: "color",
@@ -87528,7 +87564,7 @@ function ParamControl({
           className: "w-7 h-7 rounded-sm border border-neutral-700 bg-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
         }
       ),
-      /* @__PURE__ */ jsx218(
+      /* @__PURE__ */ jsx219(
         "input",
         {
           type: "text",
@@ -87540,8 +87576,8 @@ function ParamControl({
         }
       )
     ] }),
-    param.type === "number" && /* @__PURE__ */ jsxs175("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx218(
+    param.type === "number" && /* @__PURE__ */ jsxs176("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx219(
         "input",
         {
           type: "range",
@@ -87555,9 +87591,9 @@ function ParamControl({
           className: "flex-1 disabled:cursor-not-allowed disabled:opacity-50"
         }
       ),
-      /* @__PURE__ */ jsx218("span", { className: "text-[10px] text-neutral-400 w-8 text-right tabular-nums", children: value })
+      /* @__PURE__ */ jsx219("span", { className: "text-[10px] text-neutral-400 w-8 text-right tabular-nums", children: value })
     ] }),
-    param.type === "text" && /* @__PURE__ */ jsx218(
+    param.type === "text" && /* @__PURE__ */ jsx219(
       "input",
       {
         type: "text",
@@ -87568,7 +87604,7 @@ function ParamControl({
         className: "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 disabled:cursor-not-allowed disabled:opacity-50"
       }
     ),
-    param.type === "select" && param.options && /* @__PURE__ */ jsx218(
+    param.type === "select" && param.options && /* @__PURE__ */ jsx219(
       "select",
       {
         value,
@@ -87576,7 +87612,7 @@ function ParamControl({
         "aria-label": param.label,
         onChange: (e) => onChange(e.target.value),
         className: "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 disabled:cursor-not-allowed disabled:opacity-50",
-        children: param.options.map((opt) => /* @__PURE__ */ jsx218("option", { value: opt.value, children: opt.label }, opt.value))
+        children: param.options.map((opt) => /* @__PURE__ */ jsx219("option", { value: opt.value, children: opt.label }, opt.value))
       }
     )
   ] });
@@ -87592,7 +87628,7 @@ import { CANVAS_DIMENSIONS } from "@hyperframes/parsers";
 
 // src/components/renders/RenderQueueItem.tsx
 import { memo as memo48, useCallback as useCallback164, useState as useState142 } from "react";
-import { Fragment as Fragment58, jsx as jsx219, jsxs as jsxs176 } from "react/jsx-runtime";
+import { Fragment as Fragment58, jsx as jsx220, jsxs as jsxs177 } from "react/jsx-runtime";
 function formatDuration2(ms) {
   if (ms < 1e3) return `${ms}ms`;
   const s = Math.round(ms / 1e3);
@@ -87630,7 +87666,7 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
   const viewSrc = fileSrc;
   const isComplete = job.status === "complete";
   const isRendering = job.status === "rendering";
-  return /* @__PURE__ */ jsx219(
+  return /* @__PURE__ */ jsx220(
     "div",
     {
       onPointerEnter: () => setHovered(true),
@@ -87640,8 +87676,8 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
         setConfirmingDelete(false);
       },
       className: "px-3 py-2.5 border-b border-border last:border-0 transition-colors duration-150 hover:bg-hover/30",
-      children: /* @__PURE__ */ jsxs176("div", { className: "flex items-center gap-2.5", children: [
-        /* @__PURE__ */ jsxs176(
+      children: /* @__PURE__ */ jsxs177("div", { className: "flex items-center gap-2.5", children: [
+        /* @__PURE__ */ jsxs177(
           "button",
           {
             type: "button",
@@ -87654,8 +87690,8 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
               isComplete ? "cursor-pointer" : "cursor-default"
             ].join(" "),
             children: [
-              isComplete && /* @__PURE__ */ jsxs176(Fragment58, { children: [
-                hovered && /* @__PURE__ */ jsx219(
+              isComplete && /* @__PURE__ */ jsxs177(Fragment58, { children: [
+                hovered && /* @__PURE__ */ jsx220(
                   "video",
                   {
                     src: viewSrc,
@@ -87668,35 +87704,35 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
                     style: { opacity: videoReady ? 1 : 0 }
                   }
                 ),
-                /* @__PURE__ */ jsx219(
+                /* @__PURE__ */ jsx220(
                   "div",
                   {
                     className: "absolute inset-0 transition-opacity duration-150",
                     style: { opacity: hovered && videoReady ? 0 : 1 },
-                    children: /* @__PURE__ */ jsx219(VideoFrameThumbnail, { src: viewSrc })
+                    children: /* @__PURE__ */ jsx220(VideoFrameThumbnail, { src: viewSrc })
                   }
                 )
               ] }),
-              isRendering && /* @__PURE__ */ jsx219("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx219("div", { className: "w-2 h-2 rounded-full bg-accent animate-pulse motion-reduce:animate-none" }) }),
-              job.status === "failed" && /* @__PURE__ */ jsx219("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx219("div", { className: "w-2 h-2 rounded-full bg-danger" }) }),
-              job.status === "cancelled" && /* @__PURE__ */ jsx219("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx219("div", { className: "w-2 h-2 rounded-full bg-text-5" }) })
+              isRendering && /* @__PURE__ */ jsx220("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx220("div", { className: "w-2 h-2 rounded-full bg-accent animate-pulse motion-reduce:animate-none" }) }),
+              job.status === "failed" && /* @__PURE__ */ jsx220("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx220("div", { className: "w-2 h-2 rounded-full bg-danger" }) }),
+              job.status === "cancelled" && /* @__PURE__ */ jsx220("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx220("div", { className: "w-2 h-2 rounded-full bg-text-5" }) })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs176("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxs176("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx219("span", { className: "text-step-11 font-medium text-text-2 truncate", children: job.filename }),
-            job.durationMs && /* @__PURE__ */ jsx219("span", { className: "text-step-9 text-text-5 shrink-0", children: formatDuration2(job.durationMs) })
+        /* @__PURE__ */ jsxs177("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs177("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx220("span", { className: "text-step-11 font-medium text-text-2 truncate", children: job.filename }),
+            job.durationMs && /* @__PURE__ */ jsx220("span", { className: "text-step-9 text-text-5 shrink-0", children: formatDuration2(job.durationMs) })
           ] }),
-          isRendering && /* @__PURE__ */ jsxs176("div", { className: "mt-1", children: [
-            /* @__PURE__ */ jsxs176("div", { className: "flex items-center justify-between mb-0.5", children: [
-              /* @__PURE__ */ jsx219("span", { className: "text-step-9 text-text-4", children: job.stage || "Rendering" }),
-              /* @__PURE__ */ jsxs176("span", { className: "text-step-9 font-mono text-accent", children: [
+          isRendering && /* @__PURE__ */ jsxs177("div", { className: "mt-1", children: [
+            /* @__PURE__ */ jsxs177("div", { className: "flex items-center justify-between mb-0.5", children: [
+              /* @__PURE__ */ jsx220("span", { className: "text-step-9 text-text-4", children: job.stage || "Rendering" }),
+              /* @__PURE__ */ jsxs177("span", { className: "text-step-9 font-mono text-accent", children: [
                 job.progress,
                 "%"
               ] })
             ] }),
-            /* @__PURE__ */ jsx219(
+            /* @__PURE__ */ jsx220(
               "div",
               {
                 className: "w-full h-1 bg-border rounded-full overflow-hidden",
@@ -87705,7 +87741,7 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
                 "aria-valuemin": 0,
                 "aria-valuemax": 100,
                 "aria-label": `Render progress: ${job.progress}%`,
-                children: /* @__PURE__ */ jsx219(
+                children: /* @__PURE__ */ jsx220(
                   "div",
                   {
                     className: "h-full bg-accent rounded-full transition-all duration-300",
@@ -87715,11 +87751,11 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
               }
             )
           ] }),
-          job.status === "failed" && job.error && /* @__PURE__ */ jsx219("span", { className: "text-step-9 text-danger mt-0.5 block", children: job.error }),
-          job.status === "cancelled" && /* @__PURE__ */ jsx219("span", { className: "text-step-9 text-text-4 mt-0.5 block", children: "Cancelled" }),
-          !isRendering && /* @__PURE__ */ jsx219("span", { className: "text-step-9 text-text-5", children: formatTimeAgo(job.createdAt) })
+          job.status === "failed" && job.error && /* @__PURE__ */ jsx220("span", { className: "text-step-9 text-danger mt-0.5 block", children: job.error }),
+          job.status === "cancelled" && /* @__PURE__ */ jsx220("span", { className: "text-step-9 text-text-4 mt-0.5 block", children: "Cancelled" }),
+          !isRendering && /* @__PURE__ */ jsx220("span", { className: "text-step-9 text-text-5", children: formatTimeAgo(job.createdAt) })
         ] }),
-        /* @__PURE__ */ jsx219("div", { className: "flex items-center gap-1.5 shrink-0", children: isRendering ? /* @__PURE__ */ jsx219(
+        /* @__PURE__ */ jsx220("div", { className: "flex items-center gap-1.5 shrink-0", children: isRendering ? /* @__PURE__ */ jsx220(
           Button,
           {
             size: "sm",
@@ -87730,8 +87766,8 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
             },
             children: "Cancel"
           }
-        ) : confirmingDelete ? /* @__PURE__ */ jsxs176(Fragment58, { children: [
-          /* @__PURE__ */ jsx219(
+        ) : confirmingDelete ? /* @__PURE__ */ jsxs177(Fragment58, { children: [
+          /* @__PURE__ */ jsx220(
             Button,
             {
               size: "sm",
@@ -87744,7 +87780,7 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
               children: "Delete?"
             }
           ),
-          /* @__PURE__ */ jsx219(
+          /* @__PURE__ */ jsx220(
             Button,
             {
               size: "sm",
@@ -87756,15 +87792,15 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
               children: "Keep"
             }
           )
-        ] }) : /* @__PURE__ */ jsxs176(Fragment58, { children: [
-          /* @__PURE__ */ jsx219(Tooltip, { label: isComplete ? "Download" : "Available when the render finishes", children: /* @__PURE__ */ jsx219(
+        ] }) : /* @__PURE__ */ jsxs177(Fragment58, { children: [
+          /* @__PURE__ */ jsx220(Tooltip, { label: isComplete ? "Download" : "Available when the render finishes", children: /* @__PURE__ */ jsx220(
             IconButton,
             {
               size: "sm",
               onClick: handleDownload,
               disabled: !isComplete,
               "aria-label": `Download ${job.filename}`,
-              icon: /* @__PURE__ */ jsxs176(
+              icon: /* @__PURE__ */ jsxs177(
                 "svg",
                 {
                   width: "12",
@@ -87777,15 +87813,15 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
                   strokeLinejoin: "round",
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ jsx219("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" }),
-                    /* @__PURE__ */ jsx219("polyline", { points: "7 10 12 15 17 10" }),
-                    /* @__PURE__ */ jsx219("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+                    /* @__PURE__ */ jsx220("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" }),
+                    /* @__PURE__ */ jsx220("polyline", { points: "7 10 12 15 17 10" }),
+                    /* @__PURE__ */ jsx220("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
                   ]
                 }
               )
             }
           ) }),
-          /* @__PURE__ */ jsx219(Tooltip, { label: "Delete render file", children: /* @__PURE__ */ jsx219(
+          /* @__PURE__ */ jsx220(Tooltip, { label: "Delete render file", children: /* @__PURE__ */ jsx220(
             IconButton,
             {
               size: "sm",
@@ -87794,7 +87830,7 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
                 setConfirmingDelete(true);
               },
               "aria-label": `Delete ${job.filename}`,
-              icon: /* @__PURE__ */ jsx219(
+              icon: /* @__PURE__ */ jsx220(
                 "svg",
                 {
                   width: "12",
@@ -87805,7 +87841,7 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
                   strokeWidth: "2",
                   strokeLinecap: "round",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx219("path", { d: "M18 6L6 18M6 6l12 12" })
+                  children: /* @__PURE__ */ jsx220("path", { d: "M18 6L6 18M6 6l12 12" })
                 }
               )
             }
@@ -87818,7 +87854,7 @@ var RenderQueueItem = memo48(function RenderQueueItem2({
 
 // src/components/renders/FfmpegRequiredNotice.tsx
 import { memo as memo49, useEffect as useEffect140, useRef as useRef178, useState as useState143 } from "react";
-import { jsx as jsx220, jsxs as jsxs177 } from "react/jsx-runtime";
+import { jsx as jsx221, jsxs as jsxs178 } from "react/jsx-runtime";
 var DOWNLOAD_URL = "https://ffmpeg.org/download.html";
 var CUE_MS = 1600;
 var FOCUS_RING = "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent";
@@ -87847,19 +87883,19 @@ var FfmpegRequiredNotice = memo49(function FfmpegRequiredNotice2({
     setCopied(true);
     window.setTimeout(() => setCopied(false), CUE_MS);
   };
-  return /* @__PURE__ */ jsxs177(
+  return /* @__PURE__ */ jsxs178(
     "div",
     {
       role: "alert",
       className: "flex flex-col gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-2.5",
       children: [
-        /* @__PURE__ */ jsxs177("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsx220("span", { className: "text-[11px] font-semibold text-amber-300", children: status.title ?? "FFmpeg not found" }),
-          /* @__PURE__ */ jsx220("span", { className: "text-[10px] leading-snug text-pretty text-panel-text-2", children: status.detail ?? "FFmpeg is required to encode video." })
+        /* @__PURE__ */ jsxs178("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx221("span", { className: "text-[11px] font-semibold text-amber-300", children: status.title ?? "FFmpeg not found" }),
+          /* @__PURE__ */ jsx221("span", { className: "text-[10px] leading-snug text-pretty text-panel-text-2", children: status.detail ?? "FFmpeg is required to encode video." })
         ] }),
-        status.command ? /* @__PURE__ */ jsxs177("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx220("code", { className: "flex-1 overflow-x-auto whitespace-nowrap rounded-xs bg-black/40 px-2 py-1 text-[10px] text-panel-text-2", children: status.command }),
-          /* @__PURE__ */ jsx220(
+        status.command ? /* @__PURE__ */ jsxs178("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx221("code", { className: "flex-1 overflow-x-auto whitespace-nowrap rounded-xs bg-black/40 px-2 py-1 text-[10px] text-panel-text-2", children: status.command }),
+          /* @__PURE__ */ jsx221(
             "button",
             {
               type: "button",
@@ -87868,9 +87904,9 @@ var FfmpegRequiredNotice = memo49(function FfmpegRequiredNotice2({
               children: copied ? "Copied" : "Copy"
             }
           )
-        ] }) : status.hint && /* @__PURE__ */ jsx220("span", { className: "text-[10px] leading-snug text-pretty text-panel-text-2", children: status.hint }),
-        /* @__PURE__ */ jsxs177("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx220(
+        ] }) : status.hint && /* @__PURE__ */ jsx221("span", { className: "text-[10px] leading-snug text-pretty text-panel-text-2", children: status.hint }),
+        /* @__PURE__ */ jsxs178("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx221(
             "button",
             {
               type: "button",
@@ -87880,7 +87916,7 @@ var FfmpegRequiredNotice = memo49(function FfmpegRequiredNotice2({
               children: checking ? "Checking\u2026" : "Recheck"
             }
           ),
-          /* @__PURE__ */ jsx220(
+          /* @__PURE__ */ jsx221(
             "a",
             {
               href: DOWNLOAD_URL,
@@ -87890,7 +87926,7 @@ var FfmpegRequiredNotice = memo49(function FfmpegRequiredNotice2({
               children: "Other install options"
             }
           ),
-          /* @__PURE__ */ jsx220(
+          /* @__PURE__ */ jsx221(
             "span",
             {
               "aria-live": "polite",
@@ -87905,7 +87941,7 @@ var FfmpegRequiredNotice = memo49(function FfmpegRequiredNotice2({
 });
 
 // src/components/renders/RenderQueue.tsx
-import { jsx as jsx221, jsxs as jsxs178 } from "react/jsx-runtime";
+import { jsx as jsx222, jsxs as jsxs179 } from "react/jsx-runtime";
 var SCALE_OPTION_ORDER = ["auto", "1080p", "4k"];
 var SCALE_LABEL = {
   auto: "Auto",
@@ -87993,8 +88029,8 @@ function FormatInfoTooltip({ format }) {
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open]);
   const info = FORMAT_INFO[format];
-  return /* @__PURE__ */ jsxs178("div", { ref: triggerRef, className: "relative", onPointerEnter: show, onPointerLeave: hide, children: [
-    /* @__PURE__ */ jsx221(
+  return /* @__PURE__ */ jsxs179("div", { ref: triggerRef, className: "relative", onPointerEnter: show, onPointerLeave: hide, children: [
+    /* @__PURE__ */ jsx222(
       "button",
       {
         type: "button",
@@ -88005,7 +88041,7 @@ function FormatInfoTooltip({ format }) {
         onBlur: hide,
         onClick: () => setOpen((prev) => !prev),
         className: "flex items-center justify-center p-0.5 -m-0.5 rounded-sm text-text-5 hover:text-text-3 transition-colors cursor-help outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-accent",
-        children: /* @__PURE__ */ jsxs178(
+        children: /* @__PURE__ */ jsxs179(
           "svg",
           {
             width: "12",
@@ -88018,16 +88054,16 @@ function FormatInfoTooltip({ format }) {
             strokeLinejoin: "round",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx221("circle", { cx: "12", cy: "12", r: "10" }),
-              /* @__PURE__ */ jsx221("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" }),
-              /* @__PURE__ */ jsx221("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+              /* @__PURE__ */ jsx222("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsx222("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" }),
+              /* @__PURE__ */ jsx222("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
             ]
           }
         )
       }
     ),
     open && createPortal10(
-      /* @__PURE__ */ jsxs178(
+      /* @__PURE__ */ jsxs179(
         "div",
         {
           id: panelId,
@@ -88037,10 +88073,10 @@ function FormatInfoTooltip({ format }) {
           className: "fixed w-52 p-2 rounded-sm bg-input border border-border-input shadow-menu z-200",
           style: { left: position?.left ?? -9999, top: position?.top ?? -9999 },
           children: [
-            /* @__PURE__ */ jsx221("p", { className: "text-step-10 font-semibold text-text-1 mb-0.5", children: info.label }),
-            /* @__PURE__ */ jsx221("p", { className: "text-step-9 text-text-3 leading-tight", children: info.desc }),
-            /* @__PURE__ */ jsx221("div", { className: "mt-1.5 pt-1.5 border-t border-border", children: ["mp4", "mov", "webm"].filter((f) => f !== format).map((f) => /* @__PURE__ */ jsxs178("p", { className: "text-step-9 text-text-4 leading-relaxed", children: [
-              /* @__PURE__ */ jsx221("span", { className: "text-text-3 font-medium", children: FORMAT_INFO[f].label }),
+            /* @__PURE__ */ jsx222("p", { className: "text-step-10 font-semibold text-text-1 mb-0.5", children: info.label }),
+            /* @__PURE__ */ jsx222("p", { className: "text-step-9 text-text-3 leading-tight", children: info.desc }),
+            /* @__PURE__ */ jsx222("div", { className: "mt-1.5 pt-1.5 border-t border-border", children: ["mp4", "mov", "webm"].filter((f) => f !== format).map((f) => /* @__PURE__ */ jsxs179("p", { className: "text-step-9 text-text-4 leading-relaxed", children: [
+              /* @__PURE__ */ jsx222("span", { className: "text-text-3 font-medium", children: FORMAT_INFO[f].label }),
               " \u2014 ",
               FORMAT_INFO[f].desc
             ] }, f)) })
@@ -88086,8 +88122,8 @@ function FormatExportButton({
   const [fps, setFps] = useState144(persisted.fps);
   const missingFfmpeg = ffmpeg && !ffmpeg.ok ? ffmpeg : null;
   const showQuality = format !== "mov";
-  return /* @__PURE__ */ jsxs178("div", { className: "flex flex-col gap-3", children: [
-    missingFfmpeg && /* @__PURE__ */ jsx221(
+  return /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-3", children: [
+    missingFfmpeg && /* @__PURE__ */ jsx222(
       FfmpegRequiredNotice,
       {
         status: missingFfmpeg,
@@ -88095,13 +88131,13 @@ function FormatExportButton({
         onRecheck: onRecheckFfmpeg
       }
     ),
-    /* @__PURE__ */ jsxs178("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsxs178("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsxs178("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx221("span", { className: "text-step-10 text-text-4", children: "Format" }),
-          /* @__PURE__ */ jsx221(FormatInfoTooltip, { format })
+    /* @__PURE__ */ jsxs179("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs179("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx222("span", { className: "text-step-10 text-text-4", children: "Format" }),
+          /* @__PURE__ */ jsx222(FormatInfoTooltip, { format })
         ] }),
-        /* @__PURE__ */ jsx221(
+        /* @__PURE__ */ jsx222(
           Select,
           {
             label: "Format",
@@ -88116,9 +88152,9 @@ function FormatExportButton({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs178("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx221("span", { className: "text-step-10 text-text-4", children: "Resolution" }),
-        /* @__PURE__ */ jsx221(
+      /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx222("span", { className: "text-step-10 text-text-4", children: "Resolution" }),
+        /* @__PURE__ */ jsx222(
           Select,
           {
             label: "Resolution",
@@ -88133,9 +88169,9 @@ function FormatExportButton({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs178("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx221("span", { className: "text-step-10 text-text-4", children: "Frame rate" }),
-        /* @__PURE__ */ jsx221(
+      /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx222("span", { className: "text-step-10 text-text-4", children: "Frame rate" }),
+        /* @__PURE__ */ jsx222(
           Select,
           {
             label: "Frame rate",
@@ -88150,9 +88186,9 @@ function FormatExportButton({
           }
         )
       ] }),
-      showQuality && /* @__PURE__ */ jsxs178("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx221("span", { className: "text-step-10 text-text-4", children: "Quality" }),
-        /* @__PURE__ */ jsx221(
+      showQuality && /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx222("span", { className: "text-step-10 text-text-4", children: "Quality" }),
+        /* @__PURE__ */ jsx222(
           Select,
           {
             label: "Quality",
@@ -88168,7 +88204,7 @@ function FormatExportButton({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx221(
+    /* @__PURE__ */ jsx222(
       Button,
       {
         variant: "primary",
@@ -88187,7 +88223,7 @@ function FormatExportButton({
         children: isRendering ? "Rendering\u2026" : "Export"
       }
     ),
-    lastRenderDurationMs !== void 0 && !isRendering && /* @__PURE__ */ jsxs178("p", { className: "text-step-9 text-text-5 text-center -mt-1.5", children: [
+    lastRenderDurationMs !== void 0 && !isRendering && /* @__PURE__ */ jsxs179("p", { className: "text-step-9 text-text-5 text-center -mt-1.5", children: [
       "Last render took ",
       formatEta(lastRenderDurationMs)
     ] })
@@ -88218,8 +88254,8 @@ var RenderQueue = memo50(function RenderQueue2({
   }, [jobs.length]);
   const completedCount = jobs.filter((j) => j.status !== "rendering").length;
   const lastRenderDurationMs = [...jobs].reverse().find((j) => j.status === "complete" && j.durationMs !== void 0)?.durationMs;
-  return /* @__PURE__ */ jsxs178("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ jsx221("div", { className: "px-3 py-3 border-b border-border shrink-0", children: /* @__PURE__ */ jsx221(
+  return /* @__PURE__ */ jsxs179("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx222("div", { className: "px-3 py-3 border-b border-border shrink-0", children: /* @__PURE__ */ jsx222(
       FormatExportButton,
       {
         onStartRender,
@@ -88231,21 +88267,21 @@ var RenderQueue = memo50(function RenderQueue2({
         onRecheckFfmpeg
       }
     ) }),
-    actionError && /* @__PURE__ */ jsxs178(
+    actionError && /* @__PURE__ */ jsxs179(
       "div",
       {
         role: "alert",
         className: "flex items-start justify-between gap-2 px-3 py-2 border-b border-border bg-danger/10",
         children: [
-          /* @__PURE__ */ jsx221("span", { className: "text-step-10 text-danger", children: actionError }),
-          onDismissActionError && /* @__PURE__ */ jsx221(
+          /* @__PURE__ */ jsx222("span", { className: "text-step-10 text-danger", children: actionError }),
+          onDismissActionError && /* @__PURE__ */ jsx222(
             IconButton,
             {
               size: "sm",
               onClick: onDismissActionError,
               "aria-label": "Dismiss error",
               className: "shrink-0",
-              icon: /* @__PURE__ */ jsx221(
+              icon: /* @__PURE__ */ jsx222(
                 "svg",
                 {
                   width: "10",
@@ -88256,7 +88292,7 @@ var RenderQueue = memo50(function RenderQueue2({
                   strokeWidth: "2",
                   strokeLinecap: "round",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx221("path", { d: "M18 6L6 18M6 6l12 12" })
+                  children: /* @__PURE__ */ jsx222("path", { d: "M18 6L6 18M6 6l12 12" })
                 }
               )
             }
@@ -88264,11 +88300,11 @@ var RenderQueue = memo50(function RenderQueue2({
         ]
       }
     ),
-    /* @__PURE__ */ jsx221("div", { ref: listRef, className: "flex-1 overflow-y-auto", children: loadError && jobs.length === 0 ? /* @__PURE__ */ jsxs178("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", role: "alert", children: [
-      /* @__PURE__ */ jsx221("p", { className: "text-step-10 text-danger text-center", children: loadError }),
-      onRetryLoad && /* @__PURE__ */ jsx221(Button, { size: "sm", variant: "secondary", onClick: onRetryLoad, children: "Retry" })
-    ] }) : jobs.length === 0 ? /* @__PURE__ */ jsxs178("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", children: [
-      /* @__PURE__ */ jsxs178(
+    /* @__PURE__ */ jsx222("div", { ref: listRef, className: "flex-1 overflow-y-auto", children: loadError && jobs.length === 0 ? /* @__PURE__ */ jsxs179("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", role: "alert", children: [
+      /* @__PURE__ */ jsx222("p", { className: "text-step-10 text-danger text-center", children: loadError }),
+      onRetryLoad && /* @__PURE__ */ jsx222(Button, { size: "sm", variant: "secondary", onClick: onRetryLoad, children: "Retry" })
+    ] }) : jobs.length === 0 ? /* @__PURE__ */ jsxs179("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", children: [
+      /* @__PURE__ */ jsxs179(
         "svg",
         {
           width: "20",
@@ -88279,7 +88315,7 @@ var RenderQueue = memo50(function RenderQueue2({
           strokeWidth: "1.5",
           className: "text-text-5",
           children: [
-            /* @__PURE__ */ jsx221(
+            /* @__PURE__ */ jsx222(
               "rect",
               {
                 x: "2",
@@ -88292,7 +88328,7 @@ var RenderQueue = memo50(function RenderQueue2({
                 strokeLinejoin: "round"
               }
             ),
-            /* @__PURE__ */ jsx221(
+            /* @__PURE__ */ jsx222(
               "path",
               {
                 d: "M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5M17 17h5M17 7h5",
@@ -88303,17 +88339,17 @@ var RenderQueue = memo50(function RenderQueue2({
           ]
         }
       ),
-      /* @__PURE__ */ jsx221("p", { className: "text-step-10 text-text-5 text-center", children: "No renders yet" })
-    ] }) : /* @__PURE__ */ jsxs178("div", { children: [
-      completedCount > 0 && /* @__PURE__ */ jsxs178("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-border", children: [
-        /* @__PURE__ */ jsxs178("span", { className: "text-step-10 text-text-4", children: [
+      /* @__PURE__ */ jsx222("p", { className: "text-step-10 text-text-5 text-center", children: "No renders yet" })
+    ] }) : /* @__PURE__ */ jsxs179("div", { children: [
+      completedCount > 0 && /* @__PURE__ */ jsxs179("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-border", children: [
+        /* @__PURE__ */ jsxs179("span", { className: "text-step-10 text-text-4", children: [
           jobs.length,
           " render",
           jobs.length === 1 ? "" : "s"
         ] }),
-        /* @__PURE__ */ jsx221(Tooltip, { label: "Hide finished renders from this list (files stay on disk)", children: /* @__PURE__ */ jsx221(Button, { size: "sm", variant: "ghost", onClick: onClearCompleted, children: "Hide finished" }) })
+        /* @__PURE__ */ jsx222(Tooltip, { label: "Hide finished renders from this list (files stay on disk)", children: /* @__PURE__ */ jsx222(Button, { size: "sm", variant: "ghost", onClick: onClearCompleted, children: "Hide finished" }) })
       ] }),
-      jobs.map((job) => /* @__PURE__ */ jsx221(
+      jobs.map((job) => /* @__PURE__ */ jsx222(
         RenderQueueItem,
         {
           job,
@@ -88328,10 +88364,10 @@ var RenderQueue = memo50(function RenderQueue2({
 });
 
 // src/components/renders/RenderQueuePanel.tsx
-import { jsx as jsx222 } from "react/jsx-runtime";
+import { jsx as jsx223 } from "react/jsx-runtime";
 var RenderQueuePanel = memo51(function RenderQueuePanel2() {
   const { projectId, compositionDimensions, waitForPendingDomEditSaves, renderQueue } = useStudioShellContext();
-  return /* @__PURE__ */ jsx222(
+  return /* @__PURE__ */ jsx223(
     RenderQueue,
     {
       jobs: renderQueue.jobs,
@@ -88370,13 +88406,13 @@ import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
 import { useState as useState145, useCallback as useCallback165, useId as useId8 } from "react";
-import { jsx as jsx223, jsxs as jsxs179 } from "react/jsx-runtime";
+import { jsx as jsx224, jsxs as jsxs180 } from "react/jsx-runtime";
 function SectionHeader({
   children,
   expanded,
   onToggle
 }) {
-  return /* @__PURE__ */ jsxs179(
+  return /* @__PURE__ */ jsxs180(
     "button",
     {
       type: "button",
@@ -88384,8 +88420,8 @@ function SectionHeader({
       onClick: onToggle,
       "aria-expanded": expanded,
       children: [
-        /* @__PURE__ */ jsx223("span", { children }),
-        /* @__PURE__ */ jsx223("span", { className: "text-[10px] text-neutral-600", children: expanded ? "\u25B2" : "\u25BC" })
+        /* @__PURE__ */ jsx224("span", { children }),
+        /* @__PURE__ */ jsx224("span", { className: "text-[10px] text-neutral-600", children: expanded ? "\u25B2" : "\u25BC" })
       ]
     }
   );
@@ -88403,12 +88439,12 @@ function SlideList({
   const orderedSlideScenes = slides.map((sl) => sceneById.get(sl.sceneId)).filter((s) => s !== void 0);
   const nonSlideScenes = scenes.filter((sc) => !slideIds.has(sc.id));
   const rows = [...orderedSlideScenes, ...nonSlideScenes];
-  return /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-px", children: [
+  return /* @__PURE__ */ jsxs180("div", { className: "flex flex-col gap-px", children: [
     rows.map((scene) => {
       const isSlide = slideIds.has(scene.id);
       const isSelected = selectedSceneId === scene.id;
       const slideIndex = slides.findIndex((s) => s.sceneId === scene.id);
-      return /* @__PURE__ */ jsxs179(
+      return /* @__PURE__ */ jsxs180(
         "div",
         {
           role: "button",
@@ -88423,7 +88459,7 @@ function SlideList({
             }
           },
           children: [
-            /* @__PURE__ */ jsx223(
+            /* @__PURE__ */ jsx224(
               "input",
               {
                 type: "checkbox",
@@ -88434,9 +88470,9 @@ function SlideList({
                 className: "accent-studio-accent shrink-0"
               }
             ),
-            /* @__PURE__ */ jsx223("span", { className: "flex-1 truncate", children: scene.label || scene.id }),
-            isSlide && /* @__PURE__ */ jsxs179("span", { className: "flex gap-0.5 shrink-0", children: [
-              /* @__PURE__ */ jsx223(
+            /* @__PURE__ */ jsx224("span", { className: "flex-1 truncate", children: scene.label || scene.id }),
+            isSlide && /* @__PURE__ */ jsxs180("span", { className: "flex gap-0.5 shrink-0", children: [
+              /* @__PURE__ */ jsx224(
                 "button",
                 {
                   type: "button",
@@ -88451,7 +88487,7 @@ function SlideList({
                   children: "\u25B2"
                 }
               ),
-              /* @__PURE__ */ jsx223(
+              /* @__PURE__ */ jsx224(
                 "button",
                 {
                   type: "button",
@@ -88472,7 +88508,7 @@ function SlideList({
         scene.id
       );
     }),
-    scenes.length === 0 && /* @__PURE__ */ jsx223("p", { className: "px-3 py-2 text-[11px] text-neutral-500 italic", children: "No scenes found" })
+    scenes.length === 0 && /* @__PURE__ */ jsx224("p", { className: "px-3 py-2 text-[11px] text-neutral-500 italic", children: "No scenes found" })
   ] });
 }
 function SlideInspector({
@@ -88484,14 +88520,14 @@ function SlideInspector({
   onRemoveFragment
 }) {
   const fragments = slide?.fragments ?? [];
-  return /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
-    /* @__PURE__ */ jsxs179("p", { className: "text-[10px] text-neutral-500 font-medium uppercase tracking-wide truncate", children: [
+  return /* @__PURE__ */ jsxs180("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs180("p", { className: "text-[10px] text-neutral-500 font-medium uppercase tracking-wide truncate", children: [
       "Scene: ",
       sceneId
     ] }),
-    /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx223("label", { className: "text-[11px] text-neutral-400", children: "Notes" }),
-      /* @__PURE__ */ jsx223(
+    /* @__PURE__ */ jsxs180("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx224("label", { className: "text-[11px] text-neutral-400", children: "Notes" }),
+      /* @__PURE__ */ jsx224(
         "textarea",
         {
           className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1.5 text-[11px] text-white resize-none placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
@@ -88502,10 +88538,10 @@ function SlideInspector({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsxs179("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx223("span", { className: "text-[11px] text-neutral-400", children: "Fragment hold-points" }),
-        /* @__PURE__ */ jsxs179(
+    /* @__PURE__ */ jsxs180("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs180("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx224("span", { className: "text-[11px] text-neutral-400", children: "Fragment hold-points" }),
+        /* @__PURE__ */ jsxs180(
           "button",
           {
             type: "button",
@@ -88520,14 +88556,14 @@ function SlideInspector({
           }
         )
       ] }),
-      fragments.length > 0 ? /* @__PURE__ */ jsx223("div", { className: "flex flex-wrap gap-1", children: fragments.map((t, i) => /* @__PURE__ */ jsxs179(
+      fragments.length > 0 ? /* @__PURE__ */ jsx224("div", { className: "flex flex-wrap gap-1", children: fragments.map((t, i) => /* @__PURE__ */ jsxs180(
         "span",
         {
           className: "inline-flex items-center gap-1 bg-neutral-700 rounded-sm px-1.5 py-0.5 text-[10px] text-neutral-200",
           children: [
             t.toFixed(2),
             "s",
-            /* @__PURE__ */ jsx223(
+            /* @__PURE__ */ jsx224(
               "button",
               {
                 type: "button",
@@ -88540,7 +88576,7 @@ function SlideInspector({
           ]
         },
         `frag-${i}`
-      )) }) : /* @__PURE__ */ jsx223("p", { className: "text-[10px] text-neutral-600 italic", children: "No hold-points yet" })
+      )) }) : /* @__PURE__ */ jsx224("p", { className: "text-[10px] text-neutral-600 italic", children: "No hold-points yet" })
     ] })
   ] });
 }
@@ -88563,9 +88599,9 @@ function BranchTree({
     onCreateSequence(label);
     setNewLabel("");
   }, [newLabel, onCreateSequence]);
-  return /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
-    /* @__PURE__ */ jsxs179("div", { className: "flex gap-1.5", children: [
-      /* @__PURE__ */ jsx223(
+  return /* @__PURE__ */ jsxs180("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs180("div", { className: "flex gap-1.5", children: [
+      /* @__PURE__ */ jsx224(
         "input",
         {
           id: inputId,
@@ -88580,7 +88616,7 @@ function BranchTree({
           "aria-label": "New branch sequence name"
         }
       ),
-      /* @__PURE__ */ jsx223(
+      /* @__PURE__ */ jsx224(
         "button",
         {
           type: "button",
@@ -88590,7 +88626,7 @@ function BranchTree({
         }
       )
     ] }),
-    sequences.length === 0 ? /* @__PURE__ */ jsx223("p", { className: "text-[10px] text-neutral-600 italic", children: "No branches yet" }) : /* @__PURE__ */ jsx223("div", { className: "flex flex-col gap-3", children: sequences.map((seq) => /* @__PURE__ */ jsx223(
+    sequences.length === 0 ? /* @__PURE__ */ jsx224("p", { className: "text-[10px] text-neutral-600 italic", children: "No branches yet" }) : /* @__PURE__ */ jsx224("div", { className: "flex flex-col gap-3", children: sequences.map((seq) => /* @__PURE__ */ jsx224(
       BranchItem,
       {
         seq,
@@ -88624,9 +88660,9 @@ function BranchItem({
     if (label && label !== seq.label) onRename(seq.id, label);
     setEditing(false);
   }, [draft, onRename, seq.id, seq.label]);
-  return /* @__PURE__ */ jsxs179("div", { className: "border border-neutral-700/60 rounded-sm p-2 flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs179("div", { className: "flex items-center gap-1", children: [
-      editing ? /* @__PURE__ */ jsx223(
+  return /* @__PURE__ */ jsxs180("div", { className: "border border-neutral-700/60 rounded-sm p-2 flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs180("div", { className: "flex items-center gap-1", children: [
+      editing ? /* @__PURE__ */ jsx224(
         "input",
         {
           className: "flex-1 bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-0.5 text-[11px] text-white focus:border-studio-accent/60 focus:outline-hidden",
@@ -88640,7 +88676,7 @@ function BranchItem({
           },
           "aria-label": `Rename branch ${seq.label}`
         }
-      ) : /* @__PURE__ */ jsx223(
+      ) : /* @__PURE__ */ jsx224(
         "span",
         {
           role: "button",
@@ -88657,7 +88693,7 @@ function BranchItem({
           children: seq.label
         }
       ),
-      /* @__PURE__ */ jsx223(
+      /* @__PURE__ */ jsx224(
         "button",
         {
           type: "button",
@@ -88668,16 +88704,16 @@ function BranchItem({
         }
       )
     ] }),
-    confirmingDelete && /* @__PURE__ */ jsxs179("div", { className: "px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex flex-col gap-1 rounded-xs", children: [
-      /* @__PURE__ */ jsxs179("span", { className: "text-[10px] text-red-400", children: [
+    confirmingDelete && /* @__PURE__ */ jsxs180("div", { className: "px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex flex-col gap-1 rounded-xs", children: [
+      /* @__PURE__ */ jsxs180("span", { className: "text-[10px] text-red-400", children: [
         "Delete branch \u201C",
         seq.label,
         "\u201D",
         seq.slides.length > 0 ? ` and its ${seq.slides.length} slide${seq.slides.length === 1 ? "" : "s"}` : "",
         "? Hotspots pointing to it will no longer resolve."
       ] }),
-      /* @__PURE__ */ jsxs179("div", { className: "flex items-center justify-end gap-1", children: [
-        /* @__PURE__ */ jsx223(
+      /* @__PURE__ */ jsxs180("div", { className: "flex items-center justify-end gap-1", children: [
+        /* @__PURE__ */ jsx224(
           "button",
           {
             type: "button",
@@ -88689,7 +88725,7 @@ function BranchItem({
             children: "Delete"
           }
         ),
-        /* @__PURE__ */ jsx223(
+        /* @__PURE__ */ jsx224(
           "button",
           {
             type: "button",
@@ -88700,16 +88736,16 @@ function BranchItem({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-px pl-2", children: [
+    /* @__PURE__ */ jsxs180("div", { className: "flex flex-col gap-px pl-2", children: [
       scenes.map((scene) => {
         const assigned = seq.slides.some((s) => s.sceneId === scene.id);
         const isSelected = selectedSequenceId === seq.id && selectedSceneId === scene.id;
-        return /* @__PURE__ */ jsxs179(
+        return /* @__PURE__ */ jsxs180(
           "div",
           {
             className: "flex items-center gap-1.5 py-0.5 text-[11px] text-neutral-400",
             children: [
-              /* @__PURE__ */ jsx223(
+              /* @__PURE__ */ jsx224(
                 "input",
                 {
                   type: "checkbox",
@@ -88719,7 +88755,7 @@ function BranchItem({
                   className: "accent-studio-accent shrink-0"
                 }
               ),
-              assigned ? /* @__PURE__ */ jsx223(
+              assigned ? /* @__PURE__ */ jsx224(
                 "button",
                 {
                   type: "button",
@@ -88728,13 +88764,13 @@ function BranchItem({
                   onClick: () => onSelectBranchSlide(seq.id, scene.id),
                   children: scene.label || scene.id
                 }
-              ) : /* @__PURE__ */ jsx223("span", { className: "flex-1 truncate", children: scene.label || scene.id })
+              ) : /* @__PURE__ */ jsx224("span", { className: "flex-1 truncate", children: scene.label || scene.id })
             ]
           },
           scene.id
         );
       }),
-      scenes.length === 0 && /* @__PURE__ */ jsx223("p", { className: "text-[10px] text-neutral-600 italic", children: "No scenes" })
+      scenes.length === 0 && /* @__PURE__ */ jsx224("p", { className: "text-[10px] text-neutral-600 italic", children: "No scenes" })
     ] })
   ] });
 }
@@ -88760,19 +88796,19 @@ function HotspotTool({
     setHotspotLabel("");
   }, [selectedSceneId, targetSequenceId, elementKey3, hotspotLabel, onAddHotspot]);
   if (!selectedSceneId) {
-    return /* @__PURE__ */ jsx223("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsx223("p", { className: "text-[11px] text-neutral-500 italic", children: "Select a scene in the Slides list" }) });
+    return /* @__PURE__ */ jsx224("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsx224("p", { className: "text-[11px] text-neutral-500 italic", children: "Select a scene in the Slides list" }) });
   }
-  return /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
-    /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsxs179("p", { className: "text-[11px] text-neutral-400", children: [
+  return /* @__PURE__ */ jsxs180("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs180("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs180("p", { className: "text-[11px] text-neutral-400", children: [
         "Selected element:",
         " ",
-        /* @__PURE__ */ jsx223("span", { className: "text-neutral-200 font-mono", children: elementKey3 ?? "none" })
+        /* @__PURE__ */ jsx224("span", { className: "text-neutral-200 font-mono", children: elementKey3 ?? "none" })
       ] }),
-      !elementKey3 && /* @__PURE__ */ jsx223("p", { className: "text-[10px] text-neutral-500 italic", children: "Click an element on the canvas to choose the hotspot target." }),
-      sequences.length === 0 && /* @__PURE__ */ jsx223("p", { className: "text-[10px] text-neutral-500 italic", children: "Create a branch in the Branches section first \u2014 hotspots jump to a branch." }),
-      /* @__PURE__ */ jsx223("label", { className: "text-[11px] text-neutral-400", children: "Hotspot label" }),
-      /* @__PURE__ */ jsx223(
+      !elementKey3 && /* @__PURE__ */ jsx224("p", { className: "text-[10px] text-neutral-500 italic", children: "Click an element on the canvas to choose the hotspot target." }),
+      sequences.length === 0 && /* @__PURE__ */ jsx224("p", { className: "text-[10px] text-neutral-500 italic", children: "Create a branch in the Branches section first \u2014 hotspots jump to a branch." }),
+      /* @__PURE__ */ jsx224("label", { className: "text-[11px] text-neutral-400", children: "Hotspot label" }),
+      /* @__PURE__ */ jsx224(
         "input",
         {
           type: "text",
@@ -88783,8 +88819,8 @@ function HotspotTool({
           "aria-label": "Hotspot label"
         }
       ),
-      /* @__PURE__ */ jsx223("label", { className: "text-[11px] text-neutral-400", children: "Target branch" }),
-      /* @__PURE__ */ jsxs179(
+      /* @__PURE__ */ jsx224("label", { className: "text-[11px] text-neutral-400", children: "Target branch" }),
+      /* @__PURE__ */ jsxs180(
         "select",
         {
           className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-white focus:border-studio-accent/60 focus:outline-hidden",
@@ -88792,12 +88828,12 @@ function HotspotTool({
           onChange: (e) => setTargetSequenceId(e.target.value),
           "aria-label": "Target branch sequence",
           children: [
-            /* @__PURE__ */ jsx223("option", { value: "", children: "\u2014 select branch \u2014" }),
-            sequences.map((seq) => /* @__PURE__ */ jsx223("option", { value: seq.id, children: seq.label }, seq.id))
+            /* @__PURE__ */ jsx224("option", { value: "", children: "\u2014 select branch \u2014" }),
+            sequences.map((seq) => /* @__PURE__ */ jsx224("option", { value: seq.id, children: seq.label }, seq.id))
           ]
         }
       ),
-      /* @__PURE__ */ jsx223(
+      /* @__PURE__ */ jsx224(
         "button",
         {
           type: "button",
@@ -88809,21 +88845,21 @@ function HotspotTool({
         }
       )
     ] }),
-    hotspots.length > 0 && /* @__PURE__ */ jsxs179("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsx223("p", { className: "text-[11px] text-neutral-400 font-medium", children: "Hotspots on this slide" }),
+    hotspots.length > 0 && /* @__PURE__ */ jsxs180("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx224("p", { className: "text-[11px] text-neutral-400 font-medium", children: "Hotspots on this slide" }),
       hotspots.map((h) => {
         const seqLabel = sequences.find((s) => s.id === h.target)?.label ?? h.target;
-        return /* @__PURE__ */ jsxs179(
+        return /* @__PURE__ */ jsxs180(
           "div",
           {
             className: "flex items-center gap-2 bg-neutral-800 rounded-sm px-2 py-1",
             children: [
-              /* @__PURE__ */ jsxs179("span", { className: "flex-1 text-[11px] text-neutral-200 truncate", children: [
+              /* @__PURE__ */ jsxs180("span", { className: "flex-1 text-[11px] text-neutral-200 truncate", children: [
                 h.label,
                 " \u2192 ",
-                /* @__PURE__ */ jsx223("span", { className: "text-neutral-400", children: seqLabel })
+                /* @__PURE__ */ jsx224("span", { className: "text-neutral-400", children: seqLabel })
               ] }),
-              /* @__PURE__ */ jsx223(
+              /* @__PURE__ */ jsx224(
                 "button",
                 {
                   type: "button",
@@ -88973,7 +89009,7 @@ function removeHotspot(manifest, sceneId, hotspotId, sequenceId) {
 }
 
 // src/components/panels/SlideshowPanel.tsx
-import { Fragment as Fragment59, jsx as jsx224, jsxs as jsxs180 } from "react/jsx-runtime";
+import { Fragment as Fragment59, jsx as jsx225, jsxs as jsxs181 } from "react/jsx-runtime";
 function safeParseManifest(html2) {
   try {
     return parseSlideshowManifest(html2) ?? { slides: [] };
@@ -89237,7 +89273,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSequenceId, applyManifest]
   );
-  return /* @__PURE__ */ jsxs180(
+  return /* @__PURE__ */ jsxs181(
     "div",
     {
       className: "flex flex-col h-full overflow-y-auto text-white",
@@ -89251,14 +89287,14 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
         }
       },
       children: [
-        persistError && /* @__PURE__ */ jsxs180(
+        persistError && /* @__PURE__ */ jsxs181(
           "div",
           {
             role: "alert",
             className: "flex items-center justify-between gap-2 px-3 py-2 bg-red-950/40 border-b border-red-500/40",
             children: [
-              /* @__PURE__ */ jsx224("span", { className: "text-[11px] text-red-300", children: "Changes not saved" }),
-              /* @__PURE__ */ jsx224(
+              /* @__PURE__ */ jsx225("span", { className: "text-[11px] text-red-300", children: "Changes not saved" }),
+              /* @__PURE__ */ jsx225(
                 "button",
                 {
                   type: "button",
@@ -89271,7 +89307,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             ]
           }
         ),
-        undoDepth > 0 && /* @__PURE__ */ jsx224("div", { className: "flex items-center justify-end px-3 py-1 border-b border-neutral-800/60", children: /* @__PURE__ */ jsxs180(
+        undoDepth > 0 && /* @__PURE__ */ jsx225("div", { className: "flex items-center justify-end px-3 py-1 border-b border-neutral-800/60", children: /* @__PURE__ */ jsxs181(
           "button",
           {
             type: "button",
@@ -89285,7 +89321,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs180(
+        /* @__PURE__ */ jsxs181(
           SectionHeader,
           {
             expanded: expandedSections.has("slides"),
@@ -89297,7 +89333,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             ]
           }
         ),
-        expandedSections.has("slides") && /* @__PURE__ */ jsx224("div", { className: "py-1", children: /* @__PURE__ */ jsx224(
+        expandedSections.has("slides") && /* @__PURE__ */ jsx225("div", { className: "py-1", children: /* @__PURE__ */ jsx225(
           SlideList,
           {
             scenes,
@@ -89311,7 +89347,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             onReorder: handleReorder
           }
         ) }),
-        /* @__PURE__ */ jsx224(
+        /* @__PURE__ */ jsx225(
           SectionHeader,
           {
             expanded: expandedSections.has("inspector"),
@@ -89319,7 +89355,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             children: "Slide Inspector"
           }
         ),
-        expandedSections.has("inspector") && /* @__PURE__ */ jsx224(Fragment59, { children: selectedSceneId ? /* @__PURE__ */ jsx224(
+        expandedSections.has("inspector") && /* @__PURE__ */ jsx225(Fragment59, { children: selectedSceneId ? /* @__PURE__ */ jsx225(
           SlideInspector,
           {
             sceneId: selectedSceneId,
@@ -89329,8 +89365,8 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             onMarkFragment: handleMarkFragment,
             onRemoveFragment: handleRemoveFragment
           }
-        ) : /* @__PURE__ */ jsx224("p", { className: "px-3 py-2 text-[11px] text-neutral-500 italic", children: "Select a scene above to inspect" }) }),
-        /* @__PURE__ */ jsxs180(
+        ) : /* @__PURE__ */ jsx225("p", { className: "px-3 py-2 text-[11px] text-neutral-500 italic", children: "Select a scene above to inspect" }) }),
+        /* @__PURE__ */ jsxs181(
           SectionHeader,
           {
             expanded: expandedSections.has("branches"),
@@ -89342,7 +89378,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             ]
           }
         ),
-        expandedSections.has("branches") && /* @__PURE__ */ jsx224(
+        expandedSections.has("branches") && /* @__PURE__ */ jsx225(
           BranchTree,
           {
             sequences,
@@ -89356,7 +89392,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             onSelectBranchSlide: handleSelectBranchSlide
           }
         ),
-        /* @__PURE__ */ jsx224(
+        /* @__PURE__ */ jsx225(
           SectionHeader,
           {
             expanded: expandedSections.has("hotspot"),
@@ -89364,7 +89400,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             children: "Hotspot Tool"
           }
         ),
-        expandedSections.has("hotspot") && /* @__PURE__ */ jsx224(
+        expandedSections.has("hotspot") && /* @__PURE__ */ jsx225(
           HotspotTool,
           {
             selectedSceneId,
@@ -89506,7 +89542,7 @@ function useEditVariablesInFile(deps) {
 
 // src/components/panels/VariablesDeclarationForm.tsx
 import { useState as useState148 } from "react";
-import { jsx as jsx225, jsxs as jsxs181 } from "react/jsx-runtime";
+import { jsx as jsx226, jsxs as jsxs182 } from "react/jsx-runtime";
 var VARIABLE_TYPES = [
   "string",
   "number",
@@ -89608,8 +89644,8 @@ function declarationFromDraft(draft) {
   }
 }
 function Field({ label, children }) {
-  return /* @__PURE__ */ jsxs181("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsx225("label", { className: "text-[9px] font-medium text-neutral-500", children: label }),
+  return /* @__PURE__ */ jsxs182("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx226("label", { className: "text-[9px] font-medium text-neutral-500", children: label }),
     children
   ] });
 }
@@ -89618,20 +89654,20 @@ function DefaultField({
   onChange
 }) {
   if (draft.type === "boolean") {
-    return /* @__PURE__ */ jsxs181(
+    return /* @__PURE__ */ jsxs182(
       "select",
       {
         value: draft.defaultRaw === "true" ? "true" : "false",
         onChange: (e) => onChange(e.target.value),
         className: VARIABLES_INPUT_CLASS,
         children: [
-          /* @__PURE__ */ jsx225("option", { value: "false", children: "false" }),
-          /* @__PURE__ */ jsx225("option", { value: "true", children: "true" })
+          /* @__PURE__ */ jsx226("option", { value: "false", children: "false" }),
+          /* @__PURE__ */ jsx226("option", { value: "true", children: "true" })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx225(
+  return /* @__PURE__ */ jsx226(
     "input",
     {
       type: "text",
@@ -89660,9 +89696,9 @@ function DeclarationForm({
     setError(null);
     onSubmit(result);
   };
-  return /* @__PURE__ */ jsxs181("div", { className: "space-y-2 rounded-lg border border-neutral-800 bg-neutral-900/60 p-2", children: [
-    /* @__PURE__ */ jsxs181("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsx225(Field, { label: "ID", children: /* @__PURE__ */ jsx225(
+  return /* @__PURE__ */ jsxs182("div", { className: "space-y-2 rounded-lg border border-neutral-800 bg-neutral-900/60 p-2", children: [
+    /* @__PURE__ */ jsxs182("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsx226(Field, { label: "ID", children: /* @__PURE__ */ jsx226(
         "input",
         {
           type: "text",
@@ -89673,7 +89709,7 @@ function DeclarationForm({
           className: `${VARIABLES_INPUT_CLASS} font-mono disabled:opacity-50`
         }
       ) }),
-      /* @__PURE__ */ jsx225(Field, { label: "Label", children: /* @__PURE__ */ jsx225(
+      /* @__PURE__ */ jsx226(Field, { label: "Label", children: /* @__PURE__ */ jsx226(
         "input",
         {
           type: "text",
@@ -89684,8 +89720,8 @@ function DeclarationForm({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs181("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsx225(Field, { label: "Type", children: /* @__PURE__ */ jsx225(
+    /* @__PURE__ */ jsxs182("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsx226(Field, { label: "Type", children: /* @__PURE__ */ jsx226(
         "select",
         {
           value: draft.type,
@@ -89694,12 +89730,12 @@ function DeclarationForm({
             if (type) set({ type });
           },
           className: VARIABLES_INPUT_CLASS,
-          children: VARIABLE_TYPES.map((t) => /* @__PURE__ */ jsx225("option", { value: t, children: t }, t))
+          children: VARIABLE_TYPES.map((t) => /* @__PURE__ */ jsx226("option", { value: t, children: t }, t))
         }
       ) }),
-      /* @__PURE__ */ jsx225(Field, { label: "Default", children: /* @__PURE__ */ jsx225(DefaultField, { draft, onChange: (defaultRaw) => set({ defaultRaw }) }) })
+      /* @__PURE__ */ jsx226(Field, { label: "Default", children: /* @__PURE__ */ jsx226(DefaultField, { draft, onChange: (defaultRaw) => set({ defaultRaw }) }) })
     ] }),
-    draft.type === "number" && /* @__PURE__ */ jsx225("div", { className: "grid grid-cols-3 gap-2", children: ["min", "max", "step"].map((key2) => /* @__PURE__ */ jsx225(Field, { label: key2, children: /* @__PURE__ */ jsx225(
+    draft.type === "number" && /* @__PURE__ */ jsx226("div", { className: "grid grid-cols-3 gap-2", children: ["min", "max", "step"].map((key2) => /* @__PURE__ */ jsx226(Field, { label: key2, children: /* @__PURE__ */ jsx226(
       "input",
       {
         type: "text",
@@ -89708,7 +89744,7 @@ function DeclarationForm({
         className: `${VARIABLES_INPUT_CLASS} tabular-nums`
       }
     ) }, key2)) }),
-    draft.type === "enum" && /* @__PURE__ */ jsx225(Field, { label: "Options (one per line, value:Label)", children: /* @__PURE__ */ jsx225(
+    draft.type === "enum" && /* @__PURE__ */ jsx226(Field, { label: "Options (one per line, value:Label)", children: /* @__PURE__ */ jsx226(
       "textarea",
       {
         value: draft.optionsRaw,
@@ -89717,7 +89753,7 @@ function DeclarationForm({
         className: `${VARIABLES_INPUT_CLASS} resize-y font-mono`
       }
     ) }),
-    /* @__PURE__ */ jsx225(Field, { label: "Description (optional)", children: /* @__PURE__ */ jsx225(
+    /* @__PURE__ */ jsx226(Field, { label: "Description (optional)", children: /* @__PURE__ */ jsx226(
       "input",
       {
         type: "text",
@@ -89726,9 +89762,9 @@ function DeclarationForm({
         className: VARIABLES_INPUT_CLASS
       }
     ) }),
-    error && /* @__PURE__ */ jsx225("p", { className: "text-[10px] text-red-400", children: error }),
-    /* @__PURE__ */ jsxs181("div", { className: "flex items-center justify-end gap-2 pt-1", children: [
-      /* @__PURE__ */ jsx225(
+    error && /* @__PURE__ */ jsx226("p", { className: "text-[10px] text-red-400", children: error }),
+    /* @__PURE__ */ jsxs182("div", { className: "flex items-center justify-end gap-2 pt-1", children: [
+      /* @__PURE__ */ jsx226(
         "button",
         {
           type: "button",
@@ -89737,7 +89773,7 @@ function DeclarationForm({
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ jsx225(
+      /* @__PURE__ */ jsx226(
         "button",
         {
           type: "button",
@@ -89751,14 +89787,14 @@ function DeclarationForm({
 }
 
 // src/components/panels/VariablesRowAction.tsx
-import { jsx as jsx226 } from "react/jsx-runtime";
+import { jsx as jsx227 } from "react/jsx-runtime";
 function RowAction({
   label,
   title,
   danger,
   onClick
 }) {
-  return /* @__PURE__ */ jsx226(
+  return /* @__PURE__ */ jsx227(
     "button",
     {
       type: "button",
@@ -89771,7 +89807,7 @@ function RowAction({
 }
 
 // src/components/panels/VariablesOtherCompositions.tsx
-import { jsx as jsx227, jsxs as jsxs182 } from "react/jsx-runtime";
+import { jsx as jsx228, jsxs as jsxs183 } from "react/jsx-runtime";
 function CompositionSection({
   group,
   editingKey,
@@ -89779,8 +89815,8 @@ function CompositionSection({
   onSave,
   onRemove
 }) {
-  return /* @__PURE__ */ jsxs182("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ jsx227(
+  return /* @__PURE__ */ jsxs183("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsx228(
       "p",
       {
         className: "truncate text-[9px] font-medium uppercase tracking-wider text-neutral-500",
@@ -89791,12 +89827,12 @@ function CompositionSection({
     group.variables.map((decl) => {
       const key2 = `${group.path}::${decl.id}`;
       const editing = editingKey === key2;
-      return /* @__PURE__ */ jsxs182("div", { className: "space-y-1.5 rounded-lg border border-neutral-800/70 p-2", children: [
-        /* @__PURE__ */ jsxs182("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx227("span", { className: "truncate text-[10px] font-medium text-neutral-300", children: decl.label }),
-          /* @__PURE__ */ jsx227("span", { className: "rounded-sm bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500", children: decl.type }),
-          /* @__PURE__ */ jsxs182("span", { className: "ml-auto flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx227(
+      return /* @__PURE__ */ jsxs183("div", { className: "space-y-1.5 rounded-lg border border-neutral-800/70 p-2", children: [
+        /* @__PURE__ */ jsxs183("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx228("span", { className: "truncate text-[10px] font-medium text-neutral-300", children: decl.label }),
+          /* @__PURE__ */ jsx228("span", { className: "rounded-sm bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500", children: decl.type }),
+          /* @__PURE__ */ jsxs183("span", { className: "ml-auto flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx228(
               RowAction,
               {
                 label: "Edit",
@@ -89804,7 +89840,7 @@ function CompositionSection({
                 onClick: () => onToggleEdit(editing ? null : key2)
               }
             ),
-            /* @__PURE__ */ jsx227(
+            /* @__PURE__ */ jsx228(
               RowAction,
               {
                 label: "\u2715",
@@ -89815,8 +89851,8 @@ function CompositionSection({
             )
           ] })
         ] }),
-        decl.description && /* @__PURE__ */ jsx227("p", { className: "text-[9px] text-neutral-500", children: decl.description }),
-        editing && /* @__PURE__ */ jsx227(
+        decl.description && /* @__PURE__ */ jsx228("p", { className: "text-[9px] text-neutral-500", children: decl.description }),
+        editing && /* @__PURE__ */ jsx228(
           DeclarationForm,
           {
             initial: draftFromDeclaration(decl),
@@ -89874,9 +89910,9 @@ function VariablesOtherCompositions({
     [editInFile]
   );
   if (groups.length === 0) return null;
-  return /* @__PURE__ */ jsxs182("div", { className: "space-y-3 border-t border-neutral-800 pt-3", children: [
-    /* @__PURE__ */ jsx227("p", { className: "text-[9px] font-medium uppercase tracking-wider text-neutral-600", children: "Other compositions" }),
-    groups.map((group) => /* @__PURE__ */ jsx227(
+  return /* @__PURE__ */ jsxs183("div", { className: "space-y-3 border-t border-neutral-800 pt-3", children: [
+    /* @__PURE__ */ jsx228("p", { className: "text-[9px] font-medium uppercase tracking-wider text-neutral-600", children: "Other compositions" }),
+    groups.map((group) => /* @__PURE__ */ jsx228(
       CompositionSection,
       {
         group,
@@ -89892,7 +89928,7 @@ function VariablesOtherCompositions({
 
 // src/components/panels/VariablesPanel.tsx
 import { isScalarVariableValue as isScalar } from "@hyperframes/core/variables";
-import { jsx as jsx228, jsxs as jsxs183 } from "react/jsx-runtime";
+import { jsx as jsx229, jsxs as jsxs184 } from "react/jsx-runtime";
 function shellSingleQuote(value) {
   return `'${value.replace(/'/g, `'\\''`)}'`;
 }
@@ -89908,7 +89944,7 @@ function formatIssue(issue) {
 }
 function ValidationStrip({ issues }) {
   if (issues.length === 0) return null;
-  return /* @__PURE__ */ jsx228("div", { className: "space-y-1 rounded-lg border border-red-900/60 bg-red-950/30 p-2", children: issues.map((issue) => /* @__PURE__ */ jsx228("p", { className: "text-[10px] text-red-300", children: formatIssue(issue) }, `${issue.kind}:${issue.variableId}`)) });
+  return /* @__PURE__ */ jsx229("div", { className: "space-y-1 rounded-lg border border-red-900/60 bg-red-950/30 p-2", children: issues.map((issue) => /* @__PURE__ */ jsx229("p", { className: "text-[10px] text-red-300", children: formatIssue(issue) }, `${issue.kind}:${issue.variableId}`)) });
 }
 function VariableRow({
   decl,
@@ -89922,11 +89958,11 @@ function VariableRow({
   onSaveEdit,
   onRemove
 }) {
-  return /* @__PURE__ */ jsxs183("div", { className: "space-y-1.5 rounded-lg border border-neutral-800/70 p-2", children: [
-    /* @__PURE__ */ jsxs183("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx228("span", { className: "truncate text-[10px] font-medium text-neutral-300", children: decl.label }),
-      /* @__PURE__ */ jsx228("span", { className: "rounded-sm bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500", children: decl.type }),
-      unused && /* @__PURE__ */ jsx228(
+  return /* @__PURE__ */ jsxs184("div", { className: "space-y-1.5 rounded-lg border border-neutral-800/70 p-2", children: [
+    /* @__PURE__ */ jsxs184("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx229("span", { className: "truncate text-[10px] font-medium text-neutral-300", children: decl.label }),
+      /* @__PURE__ */ jsx229("span", { className: "rounded-sm bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500", children: decl.type }),
+      unused && /* @__PURE__ */ jsx229(
         "span",
         {
           className: "rounded-sm bg-amber-900/40 px-1 py-px text-[8px] text-amber-400",
@@ -89934,9 +89970,9 @@ function VariableRow({
           children: "unused"
         }
       ),
-      overridden && /* @__PURE__ */ jsx228("span", { className: "h-1.5 w-1.5 rounded-full bg-studio-accent" }),
-      /* @__PURE__ */ jsxs183("span", { className: "ml-auto flex items-center gap-1", children: [
-        overridden && isScalar(value) && /* @__PURE__ */ jsx228(
+      overridden && /* @__PURE__ */ jsx229("span", { className: "h-1.5 w-1.5 rounded-full bg-studio-accent" }),
+      /* @__PURE__ */ jsxs184("span", { className: "ml-auto flex items-center gap-1", children: [
+        overridden && isScalar(value) && /* @__PURE__ */ jsx229(
           RowAction,
           {
             label: "Set default",
@@ -89944,12 +89980,12 @@ function VariableRow({
             onClick: () => onSetDefault(value)
           }
         ),
-        /* @__PURE__ */ jsx228(RowAction, { label: "Edit", title: "Edit declaration", onClick: onToggleEdit }),
-        /* @__PURE__ */ jsx228(RowAction, { label: "\u2715", title: "Remove declaration", danger: true, onClick: onRemove })
+        /* @__PURE__ */ jsx229(RowAction, { label: "Edit", title: "Edit declaration", onClick: onToggleEdit }),
+        /* @__PURE__ */ jsx229(RowAction, { label: "\u2715", title: "Remove declaration", danger: true, onClick: onRemove })
       ] })
     ] }),
-    decl.description && /* @__PURE__ */ jsx228("p", { className: "text-[9px] text-neutral-500", children: decl.description }),
-    editing ? /* @__PURE__ */ jsx228(
+    decl.description && /* @__PURE__ */ jsx229("p", { className: "text-[9px] text-neutral-500", children: decl.description }),
+    editing ? /* @__PURE__ */ jsx229(
       DeclarationForm,
       {
         initial: draftFromDeclaration(decl),
@@ -89957,7 +89993,7 @@ function VariableRow({
         onSubmit: (edited) => onSaveEdit(mergeDeclarationEdit(decl, edited)),
         onCancel: onToggleEdit
       }
-    ) : /* @__PURE__ */ jsx228(PreviewValueControl, { decl, value, onCommit: onCommitPreview })
+    ) : /* @__PURE__ */ jsx229(PreviewValueControl, { decl, value, onCommit: onCommitPreview })
   ] });
 }
 function UndeclaredReads({
@@ -89965,11 +90001,11 @@ function UndeclaredReads({
   onDeclare
 }) {
   if (!usage || usage.undeclaredReads.length === 0) return null;
-  return /* @__PURE__ */ jsxs183("div", { className: "space-y-1 rounded-lg border border-neutral-800/70 bg-neutral-900/40 p-2", children: [
-    /* @__PURE__ */ jsx228("p", { className: "text-[9px] font-medium uppercase tracking-wider text-neutral-500", children: "Read by scripts, not declared" }),
-    usage.undeclaredReads.map((id) => /* @__PURE__ */ jsxs183("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx228("code", { className: "font-mono text-[10px] text-neutral-400", children: id }),
-      /* @__PURE__ */ jsx228(
+  return /* @__PURE__ */ jsxs184("div", { className: "space-y-1 rounded-lg border border-neutral-800/70 bg-neutral-900/40 p-2", children: [
+    /* @__PURE__ */ jsx229("p", { className: "text-[9px] font-medium uppercase tracking-wider text-neutral-500", children: "Read by scripts, not declared" }),
+    usage.undeclaredReads.map((id) => /* @__PURE__ */ jsxs184("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx229("code", { className: "font-mono text-[10px] text-neutral-400", children: id }),
+      /* @__PURE__ */ jsx229(
         RowAction,
         {
           label: "Declare",
@@ -89985,10 +90021,10 @@ function PreviewModeHeader({
   onReset
 }) {
   const hasOverrides = overrideCount > 0;
-  return /* @__PURE__ */ jsxs183("div", { className: "flex items-center justify-between border-b border-neutral-800 px-3 py-2", children: [
-    /* @__PURE__ */ jsxs183("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx228("span", { className: "text-[11px] font-semibold text-neutral-200", children: "Variables" }),
-      /* @__PURE__ */ jsx228(
+  return /* @__PURE__ */ jsxs184("div", { className: "flex items-center justify-between border-b border-neutral-800 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs184("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx229("span", { className: "text-[11px] font-semibold text-neutral-200", children: "Variables" }),
+      /* @__PURE__ */ jsx229(
         "span",
         {
           className: `rounded-full px-2 py-0.5 text-[9px] font-medium ${hasOverrides ? "bg-studio-accent/20 text-studio-accent" : "bg-neutral-800 text-neutral-500"}`,
@@ -89996,7 +90032,7 @@ function PreviewModeHeader({
         }
       )
     ] }),
-    hasOverrides && /* @__PURE__ */ jsx228(
+    hasOverrides && /* @__PURE__ */ jsx229(
       "button",
       {
         type: "button",
@@ -90014,11 +90050,11 @@ function HandoffFooter({
 }) {
   const json = JSON.stringify(effectiveValues);
   const command = `npx hyperframes render ${shellSingleQuote(compPath)} --variables ${shellSingleQuote(json)}`;
-  return /* @__PURE__ */ jsxs183("div", { className: "space-y-1.5 rounded-lg border border-neutral-800/70 bg-neutral-900/40 p-2", children: [
-    /* @__PURE__ */ jsx228("p", { className: "text-[9px] font-medium uppercase tracking-wider text-neutral-500", children: "Use this template" }),
-    /* @__PURE__ */ jsx228("code", { className: "block truncate font-mono text-[9px] text-neutral-500", title: command, children: command }),
-    /* @__PURE__ */ jsxs183("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx228(
+  return /* @__PURE__ */ jsxs184("div", { className: "space-y-1.5 rounded-lg border border-neutral-800/70 bg-neutral-900/40 p-2", children: [
+    /* @__PURE__ */ jsx229("p", { className: "text-[9px] font-medium uppercase tracking-wider text-neutral-500", children: "Use this template" }),
+    /* @__PURE__ */ jsx229("code", { className: "block truncate font-mono text-[9px] text-neutral-500", title: command, children: command }),
+    /* @__PURE__ */ jsxs184("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx229(
         RowAction,
         {
           label: "Copy render command",
@@ -90026,7 +90062,7 @@ function HandoffFooter({
           onClick: () => onCopy(command, "Render command")
         }
       ),
-      /* @__PURE__ */ jsx228(
+      /* @__PURE__ */ jsx229(
         RowAction,
         {
           label: "Copy values JSON",
@@ -90037,15 +90073,15 @@ function HandoffFooter({
     ] })
   ] });
 }
-var EMPTY_STATE = /* @__PURE__ */ jsxs183("p", { className: "text-[10px] leading-relaxed text-neutral-500", children: [
+var EMPTY_STATE = /* @__PURE__ */ jsxs184("p", { className: "text-[10px] leading-relaxed text-neutral-500", children: [
   "No variables declared. Variables make parts of this composition dynamic \u2014 declare them here (or in ",
-  /* @__PURE__ */ jsx228("code", { className: "font-mono", children: "data-composition-variables" }),
+  /* @__PURE__ */ jsx229("code", { className: "font-mono", children: "data-composition-variables" }),
   "), read them with",
   " ",
-  /* @__PURE__ */ jsx228("code", { className: "font-mono", children: "getVariables()" }),
+  /* @__PURE__ */ jsx229("code", { className: "font-mono", children: "getVariables()" }),
   ", and pass values at render time with",
   " ",
-  /* @__PURE__ */ jsx228("code", { className: "font-mono", children: "--variables" }),
+  /* @__PURE__ */ jsx229("code", { className: "font-mono", children: "--variables" }),
   "."
 ] });
 var VariablesPanel = memo52(function VariablesPanel2({
@@ -90229,18 +90265,18 @@ var VariablesPanel = memo52(function VariablesPanel2({
   );
   const bindableSelection = domEditSelection?.hfId && domEditSelection.sourceFile === (activeCompPath ?? "index.html") ? domEditSelection : null;
   if (!sdkSession) {
-    return /* @__PURE__ */ jsx228("div", { className: "flex h-full items-center justify-center px-6 text-center", children: /* @__PURE__ */ jsx228("p", { className: "text-xs text-neutral-500", children: "Open a composition to manage its variables." }) });
+    return /* @__PURE__ */ jsx229("div", { className: "flex h-full items-center justify-center px-6 text-center", children: /* @__PURE__ */ jsx229("p", { className: "text-xs text-neutral-500", children: "Open a composition to manage its variables." }) });
   }
-  return /* @__PURE__ */ jsxs183("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ jsx228(
+  return /* @__PURE__ */ jsxs184("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx229(
       PreviewModeHeader,
       {
         overrideCount: previewValues ? Object.keys(previewValues).length : 0,
         onReset: resetPreview
       }
     ),
-    /* @__PURE__ */ jsxs183("div", { className: "flex-1 space-y-3 overflow-y-auto p-3", children: [
-      bindableSelection && /* @__PURE__ */ jsx228(
+    /* @__PURE__ */ jsxs184("div", { className: "flex-1 space-y-3 overflow-y-auto p-3", children: [
+      bindableSelection && /* @__PURE__ */ jsx229(
         VariablesBindElement,
         {
           selection: bindableSelection,
@@ -90249,9 +90285,9 @@ var VariablesPanel = memo52(function VariablesPanel2({
         },
         bindableSelection.hfId
       ),
-      /* @__PURE__ */ jsx228(ValidationStrip, { issues }),
+      /* @__PURE__ */ jsx229(ValidationStrip, { issues }),
       declarations.length === 0 && !addOpen && EMPTY_STATE,
-      declarations.map((decl) => /* @__PURE__ */ jsx228(
+      declarations.map((decl) => /* @__PURE__ */ jsx229(
         VariableRow,
         {
           decl,
@@ -90267,15 +90303,15 @@ var VariablesPanel = memo52(function VariablesPanel2({
         },
         decl.id
       )),
-      /* @__PURE__ */ jsx228(
+      /* @__PURE__ */ jsx229(
         UndeclaredReads,
         {
           usage,
           onDeclare: (id) => handleAdd({ id, type: "string", label: id, default: "" })
         }
       ),
-      usage?.scanIncomplete && /* @__PURE__ */ jsx228("p", { className: "text-[9px] text-neutral-600", children: "Scripts access variables dynamically \u2014 usage info may be incomplete." }),
-      declarations.length > 0 && /* @__PURE__ */ jsx228(
+      usage?.scanIncomplete && /* @__PURE__ */ jsx229("p", { className: "text-[9px] text-neutral-600", children: "Scripts access variables dynamically \u2014 usage info may be incomplete." }),
+      declarations.length > 0 && /* @__PURE__ */ jsx229(
         HandoffFooter,
         {
           effectiveValues,
@@ -90283,7 +90319,7 @@ var VariablesPanel = memo52(function VariablesPanel2({
           onCopy: copyToClipboard
         }
       ),
-      addOpen ? /* @__PURE__ */ jsx228(
+      addOpen ? /* @__PURE__ */ jsx229(
         DeclarationForm,
         {
           initial: EMPTY_DRAFT,
@@ -90291,7 +90327,7 @@ var VariablesPanel = memo52(function VariablesPanel2({
           onSubmit: handleAdd,
           onCancel: () => setAddOpen(false)
         }
-      ) : /* @__PURE__ */ jsx228(
+      ) : /* @__PURE__ */ jsx229(
         "button",
         {
           type: "button",
@@ -90300,7 +90336,7 @@ var VariablesPanel = memo52(function VariablesPanel2({
           children: "+ Add variable"
         }
       ),
-      /* @__PURE__ */ jsx228(
+      /* @__PURE__ */ jsx229(
         VariablesOtherCompositions,
         {
           fileTree,
@@ -90433,7 +90469,7 @@ function useSlideshowTabState(params) {
 
 // src/components/DesignPanelPromoteProvider.tsx
 import { useCallback as useCallback172 } from "react";
-import { jsx as jsx229 } from "react/jsx-runtime";
+import { jsx as jsx230 } from "react/jsx-runtime";
 function DesignPanelPromoteProvider({
   selection,
   projectId,
@@ -90463,7 +90499,7 @@ function DesignPanelPromoteProvider({
     (error) => showToast(getStudioSaveErrorMessage(error), "error"),
     [showToast]
   );
-  return /* @__PURE__ */ jsx229(
+  return /* @__PURE__ */ jsx230(
     VariablePromoteProvider,
     {
       session: handle.session,
@@ -90740,7 +90776,7 @@ function useRemoveBackground(projectId, refreshFileTree, showToast) {
 }
 
 // src/components/StudioRightPanels.tsx
-import { Fragment as Fragment60, jsx as jsx230, jsxs as jsxs184 } from "react/jsx-runtime";
+import { Fragment as Fragment60, jsx as jsx231, jsxs as jsxs185 } from "react/jsx-runtime";
 function StudioRightPanels({
   activeBlockParams,
   onCloseBlockParams,
@@ -90903,7 +90939,7 @@ function StudioRightPanels({
     const keys = timelineKeysForSelections(domEditGroupSelections, elements, activeCompPath);
     if (keys.length > 0) void onToggleElementHidden?.(keys, true);
   };
-  const propertyPanel = /* @__PURE__ */ jsx230(
+  const propertyPanel = /* @__PURE__ */ jsx231(
     DesignPanelPromoteProvider,
     {
       selection: domEditGroupSelections.length > 1 ? null : domEditSelection,
@@ -90915,7 +90951,7 @@ function StudioRightPanels({
       recordEdit,
       reloadPreview,
       forceReloadSharedSdkSession: forceReloadSdkSession,
-      children: /* @__PURE__ */ jsx230(
+      children: /* @__PURE__ */ jsx231(
         PropertyPanel,
         {
           projectId,
@@ -90985,9 +91021,9 @@ function StudioRightPanels({
   );
   let designBody = propertyPanel;
   if (captionEditMode) {
-    designBody = /* @__PURE__ */ jsx230(CaptionPropertyPanel, { iframeRef: previewIframeRef });
+    designBody = /* @__PURE__ */ jsx231(CaptionPropertyPanel, { iframeRef: previewIframeRef });
   } else if (activeBlockParams) {
-    designBody = /* @__PURE__ */ jsx230(
+    designBody = /* @__PURE__ */ jsx231(
       BlockParamsPanel,
       {
         blockName: activeBlockParams.blockName,
@@ -90999,18 +91035,18 @@ function StudioRightPanels({
       }
     );
   }
-  return /* @__PURE__ */ jsxs184(Fragment60, { children: [
-    /* @__PURE__ */ jsx230(Dock.Panel, { id: "design", children: designBody }),
-    /* @__PURE__ */ jsx230(Dock.Panel, { id: "layers", children: /* @__PURE__ */ jsx230(LayersPanel, {}) }),
-    /* @__PURE__ */ jsx230(
+  return /* @__PURE__ */ jsxs185(Fragment60, { children: [
+    /* @__PURE__ */ jsx231(Dock.Panel, { id: "design", children: designBody }),
+    /* @__PURE__ */ jsx231(Dock.Panel, { id: "layers", children: /* @__PURE__ */ jsx231(LayersPanel, {}) }),
+    /* @__PURE__ */ jsx231(
       Dock.Panel,
       {
         id: "renders",
         title: renderJobs.length > 0 ? `Renders (${renderJobs.length})` : void 0,
-        children: /* @__PURE__ */ jsx230(RenderQueuePanel, {})
+        children: /* @__PURE__ */ jsx231(RenderQueuePanel, {})
       }
     ),
-    /* @__PURE__ */ jsx230(Dock.Panel, { id: "variables", children: /* @__PURE__ */ jsx230(
+    /* @__PURE__ */ jsx231(Dock.Panel, { id: "variables", children: /* @__PURE__ */ jsx231(
       VariablesPanel,
       {
         sdkSession,
@@ -91019,7 +91055,7 @@ function StudioRightPanels({
         recordEdit
       }
     ) }),
-    /* @__PURE__ */ jsx230(Dock.Panel, { id: "slideshow", children: /* @__PURE__ */ jsx230(
+    /* @__PURE__ */ jsx231(Dock.Panel, { id: "slideshow", children: /* @__PURE__ */ jsx231(
       SlideshowPanel,
       {
         scenes: slideshowScenes,
@@ -91446,9 +91482,9 @@ function useKeyframeKeyboard({
 }
 
 // src/components/icons/AudioMetersIcon.tsx
-import { jsx as jsx231 } from "react/jsx-runtime";
+import { jsx as jsx232 } from "react/jsx-runtime";
 function AudioMetersIcon({ size = 16 }) {
-  return /* @__PURE__ */ jsx231(
+  return /* @__PURE__ */ jsx232(
     "svg",
     {
       width: size,
@@ -91459,15 +91495,15 @@ function AudioMetersIcon({ size = 16 }) {
       strokeWidth: 1.5,
       strokeLinecap: "round",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx231("path", { d: "M2.5 13h2m-2-3h2M7 13h2m-2-3h2m-2-3h2m-2-3h2M11.5 13h2m-2-3h2m-2-3h2" })
+      children: /* @__PURE__ */ jsx232("path", { d: "M2.5 13h2m-2-3h2M7 13h2m-2-3h2m-2-3h2m-2-3h2M11.5 13h2m-2-3h2m-2-3h2" })
     }
   );
 }
 
 // src/components/icons/RippleEditIcon.tsx
-import { jsx as jsx232, jsxs as jsxs185 } from "react/jsx-runtime";
+import { jsx as jsx233, jsxs as jsxs186 } from "react/jsx-runtime";
 function RippleEditIcon({ size = 16 }) {
-  return /* @__PURE__ */ jsxs185(
+  return /* @__PURE__ */ jsxs186(
     "svg",
     {
       width: size,
@@ -91480,9 +91516,9 @@ function RippleEditIcon({ size = 16 }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx232("rect", { x: "1.5", y: "8", width: "4", height: "5", rx: "0.5" }),
-        /* @__PURE__ */ jsx232("rect", { x: "10.5", y: "8", width: "4", height: "5", rx: "0.5" }),
-        /* @__PURE__ */ jsx232("path", { d: "M13 4H6m2-2L6 4l2 2" })
+        /* @__PURE__ */ jsx233("rect", { x: "1.5", y: "8", width: "4", height: "5", rx: "0.5" }),
+        /* @__PURE__ */ jsx233("rect", { x: "10.5", y: "8", width: "4", height: "5", rx: "0.5" }),
+        /* @__PURE__ */ jsx233("path", { d: "M13 4H6m2-2L6 4l2 2" })
       ]
     }
   );
@@ -91495,10 +91531,10 @@ var flatActive = `${flatBtn} bg-white/8 text-neutral-100 active:scale-[0.98]`;
 var flatDisabled = `${flatBtn} text-neutral-700 cursor-not-allowed`;
 
 // src/components/TimelineHistoryButtons.tsx
-import { Fragment as Fragment61, jsx as jsx233, jsxs as jsxs186 } from "react/jsx-runtime";
+import { Fragment as Fragment61, jsx as jsx234, jsxs as jsxs187 } from "react/jsx-runtime";
 function HistoryButton({ action, enabled, label, onClick }) {
   const Icon = action === "undo" ? RotateCcw : RotateCw;
-  return /* @__PURE__ */ jsx233(Tooltip, { label: historyTooltipLabel(action, label), children: /* @__PURE__ */ jsx233(
+  return /* @__PURE__ */ jsx234(Tooltip, { label: historyTooltipLabel(action, label), children: /* @__PURE__ */ jsx234(
     "button",
     {
       type: "button",
@@ -91509,14 +91545,14 @@ function HistoryButton({ action, enabled, label, onClick }) {
         trackStudioEvent("toolbar_action", { action });
         void onClick();
       },
-      children: /* @__PURE__ */ jsx233(Icon, { size: 16 })
+      children: /* @__PURE__ */ jsx234(Icon, { size: 16 })
     }
   ) });
 }
 function TimelineHistoryButtons() {
   const { editHistory, handleUndo, handleRedo } = useStudioShellContext();
-  return /* @__PURE__ */ jsxs186(Fragment61, { children: [
-    /* @__PURE__ */ jsx233(
+  return /* @__PURE__ */ jsxs187(Fragment61, { children: [
+    /* @__PURE__ */ jsx234(
       HistoryButton,
       {
         action: "undo",
@@ -91525,7 +91561,7 @@ function TimelineHistoryButtons() {
         onClick: handleUndo
       }
     ),
-    /* @__PURE__ */ jsx233(
+    /* @__PURE__ */ jsx234(
       HistoryButton,
       {
         action: "redo",
@@ -91538,7 +91574,7 @@ function TimelineHistoryButtons() {
 }
 
 // src/components/TimelineToolbar.tsx
-import { jsx as jsx234, jsxs as jsxs187 } from "react/jsx-runtime";
+import { jsx as jsx235, jsxs as jsxs188 } from "react/jsx-runtime";
 var NO_KEYFRAME_TOGGLE = {
   state: "none",
   isMotionPath: false,
@@ -91647,10 +91683,10 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
   return (
     // The "TIMELINE" label is dropped for CapCut-like density — the pane's
     // position (tracks right below) makes it self-evident.
-    /* @__PURE__ */ jsx234("div", { className: "border-b border-neutral-800/60", children: /* @__PURE__ */ jsxs187("div", { className: "flex items-center justify-between px-2 py-0.5", children: [
-      /* @__PURE__ */ jsxs187("div", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ jsx234(TimelineHistoryButtons, {}),
-        /* @__PURE__ */ jsx234(Tooltip, { label: "Selection tool (V)", children: /* @__PURE__ */ jsx234(
+    /* @__PURE__ */ jsx235("div", { className: "border-b border-neutral-800/60", children: /* @__PURE__ */ jsxs188("div", { className: "flex items-center justify-between px-2 py-0.5", children: [
+      /* @__PURE__ */ jsxs188("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsx235(TimelineHistoryButtons, {}),
+        /* @__PURE__ */ jsx235(Tooltip, { label: "Selection tool (V)", children: /* @__PURE__ */ jsx235(
           "button",
           {
             type: "button",
@@ -91658,10 +91694,10 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
             "aria-label": "Selection tool",
             "aria-pressed": activeTool === "select",
             className: activeTool === "select" ? flatActive : flatIdle,
-            children: /* @__PURE__ */ jsx234("svg", { width: "16", height: "16", viewBox: "0 0 12 12", fill: "currentColor", children: /* @__PURE__ */ jsx234("path", { d: "M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" }) })
+            children: /* @__PURE__ */ jsx235("svg", { width: "16", height: "16", viewBox: "0 0 12 12", fill: "currentColor", children: /* @__PURE__ */ jsx235("path", { d: "M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" }) })
           }
         ) }),
-        /* @__PURE__ */ jsx234(Tooltip, { label: "Razor tool (B) \u2014 Shift+click splits all tracks", children: /* @__PURE__ */ jsx234(
+        /* @__PURE__ */ jsx235(Tooltip, { label: "Razor tool (B) \u2014 Shift+click splits all tracks", children: /* @__PURE__ */ jsx235(
           "button",
           {
             type: "button",
@@ -91669,11 +91705,11 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
             "aria-label": "Razor tool",
             "aria-pressed": activeTool === "razor",
             className: activeTool === "razor" ? flatActive : flatIdle,
-            children: /* @__PURE__ */ jsx234(Scissors, { size: 16 })
+            children: /* @__PURE__ */ jsx235(Scissors, { size: 16 })
           }
         ) }),
-        /* @__PURE__ */ jsx234("div", { "aria-hidden": "true", className: "mx-1 h-4 w-px bg-neutral-800" }),
-        /* @__PURE__ */ jsx234(Tooltip, { label: timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)", children: /* @__PURE__ */ jsx234(
+        /* @__PURE__ */ jsx235("div", { "aria-hidden": "true", className: "mx-1 h-4 w-px bg-neutral-800" }),
+        /* @__PURE__ */ jsx235(Tooltip, { label: timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)", children: /* @__PURE__ */ jsx235(
           "button",
           {
             type: "button",
@@ -91681,14 +91717,14 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
             "aria-label": "Toggle timeline snapping",
             "aria-pressed": timelineSnapEnabled,
             className: timelineSnapEnabled ? flatActive : flatIdle,
-            children: /* @__PURE__ */ jsx234(Magnet, { size: 16, weight: "bold", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx235(Magnet, { size: 16, weight: "bold", "aria-hidden": "true" })
           }
         ) }),
-        /* @__PURE__ */ jsx234(
+        /* @__PURE__ */ jsx235(
           Tooltip,
           {
             label: rippleEditEnabled ? "Ripple on \u2014 keeps the main track gapless" : "Ripple off \u2014 deleting a main-track clip leaves a gap",
-            children: /* @__PURE__ */ jsx234(
+            children: /* @__PURE__ */ jsx235(
               "button",
               {
                 type: "button",
@@ -91696,12 +91732,12 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
                 "aria-label": "Toggle ripple edit",
                 "aria-pressed": rippleEditEnabled,
                 className: rippleEditEnabled ? flatActive : flatIdle,
-                children: /* @__PURE__ */ jsx234(RippleEditIcon, { size: 16 })
+                children: /* @__PURE__ */ jsx235(RippleEditIcon, { size: 16 })
               }
             )
           }
         ),
-        projectHasAudio && /* @__PURE__ */ jsx234(Tooltip, { label: audioMetersVisible ? "Hide audio meters" : "Show audio meters", children: /* @__PURE__ */ jsx234(
+        projectHasAudio && /* @__PURE__ */ jsx235(Tooltip, { label: audioMetersVisible ? "Hide audio meters" : "Show audio meters", children: /* @__PURE__ */ jsx235(
           "button",
           {
             type: "button",
@@ -91709,14 +91745,14 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
             "aria-label": "Toggle audio meters",
             "aria-pressed": audioMetersVisible,
             className: audioMetersVisible ? flatActive : flatIdle,
-            children: /* @__PURE__ */ jsx234(AudioMetersIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx235(AudioMetersIcon, { size: 16 })
           }
         ) }),
-        /* @__PURE__ */ jsx234(
+        /* @__PURE__ */ jsx235(
           Tooltip,
           {
             label: keyframePathEndpoint ? "Motion path endpoints cannot be removed" : !onToggleKeyframe ? "Select an animated element to add keyframes" : keyframeIsMotionPath ? keyframeWillExtend ? "Extend motion path to playhead (K)" : keyframeState === "active" ? "Remove waypoint from motion path (K)" : "Add waypoint to motion path (K)" : keyframeState === "active" ? "Remove keyframe at playhead (K)" : keyframeState === "inactive" ? keyframeWillExtend ? "Add keyframe at playhead, extends animation (K)" : "Add keyframe at playhead (K)" : "Add keyframe (K)",
-            children: /* @__PURE__ */ jsx234(
+            children: /* @__PURE__ */ jsx235(
               "button",
               {
                 type: "button",
@@ -91724,7 +91760,7 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
                 onClick: onToggleKeyframe,
                 "aria-label": keyframePathEndpoint ? "Motion path endpoint" : keyframeIsMotionPath ? keyframeState === "active" ? "Remove motion path waypoint" : keyframeWillExtend ? "Extend motion path to playhead" : "Add motion path waypoint" : keyframeState === "active" ? "Remove keyframe at playhead" : "Add keyframe at playhead",
                 className: !onToggleKeyframe ? flatDisabled : `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${keyframeState === "active" ? "text-studio-accent" : keyframeState === "inactive" ? "text-neutral-400 hover:text-studio-accent" : "text-neutral-600 hover:text-neutral-400"}`,
-                children: /* @__PURE__ */ jsx234("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "currentColor", children: keyframeState === "active" ? /* @__PURE__ */ jsx234("path", { d: "M5 0.5L9.5 5L5 9.5L0.5 5Z" }) : /* @__PURE__ */ jsx234(
+                children: /* @__PURE__ */ jsx235("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "currentColor", children: keyframeState === "active" ? /* @__PURE__ */ jsx235("path", { d: "M5 0.5L9.5 5L5 9.5L0.5 5Z" }) : /* @__PURE__ */ jsx235(
                   "path",
                   {
                     d: "M5 1.2L8.8 5L5 8.8L1.2 5Z",
@@ -91737,11 +91773,11 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx234(
+        /* @__PURE__ */ jsx235(
           Tooltip,
           {
             label: autoKeyframeEnabled ? "Auto-record manual edits as keyframes (click to turn off)" : "Manual edits will not be recorded as keyframes (click to turn on)",
-            children: /* @__PURE__ */ jsx234(
+            children: /* @__PURE__ */ jsx235(
               "button",
               {
                 type: "button",
@@ -91749,9 +91785,9 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
                 "aria-label": "Auto-record manual edits as keyframes",
                 "aria-pressed": autoKeyframeEnabled,
                 className: `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${autoKeyframeEnabled ? "text-red-400 hover:text-red-300" : "text-neutral-600 hover:text-neutral-400"}`,
-                children: /* @__PURE__ */ jsxs187("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", children: [
-                  /* @__PURE__ */ jsx234("path", { d: "M5 0.7L9.3 5L5 9.3L0.7 5Z", stroke: "currentColor", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsx234(
+                children: /* @__PURE__ */ jsxs188("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", children: [
+                  /* @__PURE__ */ jsx235("path", { d: "M5 0.7L9.3 5L5 9.3L0.7 5Z", stroke: "currentColor", strokeWidth: "1" }),
+                  /* @__PURE__ */ jsx235(
                     "circle",
                     {
                       cx: "5",
@@ -91771,11 +91807,11 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
           const el = selectedElementId ? elements.find((e) => (e.key ?? e.id) === selectedElementId) : null;
           const splittable = el != null && canSplitElement(el);
           const canSplit = splittable && currentTime > el.start && currentTime < el.start + el.duration;
-          return /* @__PURE__ */ jsx234(
+          return /* @__PURE__ */ jsx235(
             Tooltip,
             {
               label: canSplit ? "Split at playhead (S)" : splittable ? "Move the playhead inside the clip to split" : "Select a clip to split",
-              children: /* @__PURE__ */ jsx234(
+              children: /* @__PURE__ */ jsx235(
                 "button",
                 {
                   type: "button",
@@ -91785,7 +91821,7 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
                     if (canSplit && el) onSplitElement(el, currentTime);
                   },
                   className: canSplit ? flatIdle : flatDisabled,
-                  children: /* @__PURE__ */ jsxs187(
+                  children: /* @__PURE__ */ jsxs188(
                     "svg",
                     {
                       width: "16",
@@ -91798,8 +91834,8 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
                       strokeLinejoin: "round",
                       "aria-hidden": "true",
                       children: [
-                        /* @__PURE__ */ jsx234("path", { d: "M5 3 L7 3 L7 13 L5 13" }),
-                        /* @__PURE__ */ jsx234("path", { d: "M11 3 L9 3 L9 13 L11 13" })
+                        /* @__PURE__ */ jsx235("path", { d: "M5 3 L7 3 L7 13 L5 13" }),
+                        /* @__PURE__ */ jsx235("path", { d: "M11 3 L9 3 L9 13 L11 13" })
                       ]
                     }
                   )
@@ -91810,11 +91846,11 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
         })(),
         (() => {
           const canAdd = beatAnalysisReady && canAddBeatAt(currentTime);
-          return /* @__PURE__ */ jsx234(
+          return /* @__PURE__ */ jsx235(
             Tooltip,
             {
               label: !beatAnalysisReady ? "Add a music track with beat analysis to place beats" : canAdd ? "Add beat at playhead" : "A beat already exists at the playhead",
-              children: /* @__PURE__ */ jsx234(
+              children: /* @__PURE__ */ jsx235(
                 "button",
                 {
                   type: "button",
@@ -91824,7 +91860,7 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
                     if (canAdd) addBeatAtCompositionTime(currentTime);
                   },
                   className: canAdd ? `${flatBtn} text-neutral-400 hover:bg-white/6 hover:text-[#22c55e] active:scale-[0.98]` : flatDisabled,
-                  children: /* @__PURE__ */ jsx234("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx234(
+                  children: /* @__PURE__ */ jsx235("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx235(
                     "path",
                     {
                       d: "M21 10C21 12.2091 16.9706 14 12 14M21 10C21 7.79086 16.9706 6 12 6C7.02944 6 3 7.79086 3 10M21 10V16C21 18.2091 16.9706 20 12 20M12 14C7.02944 14 3 12.2091 3 10M12 14V20M3 10V16C3 18.2091 7.02944 20 12 20M7 19.3264V13.3264M17 19.3264V13.3264M12 10L20 4",
@@ -91840,12 +91876,12 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
           );
         })()
       ] }),
-      /* @__PURE__ */ jsxs187("div", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ jsx234(
+      /* @__PURE__ */ jsxs188("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsx235(
           Tooltip,
           {
             label: thumbnailsVisible ? "Hide thumbnails \u2014 labels only" : "Show thumbnails \u2014 posters stay visible; richer previews appear on interaction",
-            children: /* @__PURE__ */ jsx234(
+            children: /* @__PURE__ */ jsx235(
               "button",
               {
                 type: "button",
@@ -91853,12 +91889,12 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
                 "aria-pressed": thumbnailsVisible,
                 onClick: () => setThumbnailMode(thumbnailsVisible ? "hidden" : "adaptive"),
                 className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${thumbnailsVisible ? "bg-studio-accent/10 text-studio-accent" : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"}`,
-                children: /* @__PURE__ */ jsx234(Image3, { size: 16, "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx235(Image3, { size: 16, "aria-hidden": "true" })
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx234(Tooltip, { label: "Fit timeline to width", children: /* @__PURE__ */ jsx234(
+        /* @__PURE__ */ jsx235(Tooltip, { label: "Fit timeline to width", children: /* @__PURE__ */ jsx235(
           "button",
           {
             type: "button",
@@ -91867,7 +91903,7 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
             children: "Fit"
           }
         ) }),
-        /* @__PURE__ */ jsx234(Tooltip, { label: "Zoom out", children: /* @__PURE__ */ jsx234(
+        /* @__PURE__ */ jsx235(Tooltip, { label: "Zoom out", children: /* @__PURE__ */ jsx235(
           "button",
           {
             type: "button",
@@ -91879,10 +91915,10 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
               );
             },
             className: flatIdle,
-            children: /* @__PURE__ */ jsx234(MagnifyingGlassMinus, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx235(MagnifyingGlassMinus, { size: 16, "aria-hidden": "true" })
           }
         ) }),
-        /* @__PURE__ */ jsx234(
+        /* @__PURE__ */ jsx235(
           "input",
           {
             type: "range",
@@ -91900,7 +91936,7 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
             className: "mx-1 h-6 w-[96px] cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-neutral-700 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0a0a0a,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
           }
         ),
-        /* @__PURE__ */ jsx234(Tooltip, { label: "Zoom in", children: /* @__PURE__ */ jsx234(
+        /* @__PURE__ */ jsx235(Tooltip, { label: "Zoom in", children: /* @__PURE__ */ jsx235(
           "button",
           {
             type: "button",
@@ -91912,10 +91948,10 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
               );
             },
             className: flatIdle,
-            children: /* @__PURE__ */ jsx234(MagnifyingGlassPlus, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx235(MagnifyingGlassPlus, { size: 16, "aria-hidden": "true" })
           }
         ) }),
-        /* @__PURE__ */ jsx234(
+        /* @__PURE__ */ jsx235(
           "span",
           {
             className: "ml-1 w-[38px] text-right font-mono text-[11px] tabular-nums text-neutral-500 select-none",
@@ -91929,18 +91965,18 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
 }
 
 // src/components/StudioSplash.tsx
-import { jsx as jsx235, jsxs as jsxs188 } from "react/jsx-runtime";
+import { jsx as jsx236, jsxs as jsxs189 } from "react/jsx-runtime";
 function StudioSplash({ waiting }) {
-  return /* @__PURE__ */ jsx235("div", { className: "h-full w-full bg-neutral-950 flex items-center justify-center", children: waiting ? /* @__PURE__ */ jsxs188("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
-    /* @__PURE__ */ jsx235("div", { className: "w-4 h-4 rounded-full border-2 border-neutral-700 border-t-neutral-500 animate-spin motion-reduce:animate-none" }),
-    /* @__PURE__ */ jsxs188("p", { className: "text-xs text-neutral-600", children: [
+  return /* @__PURE__ */ jsx236("div", { className: "h-full w-full bg-neutral-950 flex items-center justify-center", children: waiting ? /* @__PURE__ */ jsxs189("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
+    /* @__PURE__ */ jsx236("div", { className: "w-4 h-4 rounded-full border-2 border-neutral-700 border-t-neutral-500 animate-spin motion-reduce:animate-none" }),
+    /* @__PURE__ */ jsxs189("p", { className: "text-xs text-neutral-600", children: [
       "Waiting for preview server\u2026 run",
       " ",
-      /* @__PURE__ */ jsx235("code", { className: "text-neutral-500 font-mono", children: "npm run dev" })
+      /* @__PURE__ */ jsx236("code", { className: "text-neutral-500 font-mono", children: "npm run dev" })
     ] })
-  ] }) : /* @__PURE__ */ jsxs188("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
-    /* @__PURE__ */ jsx235("div", { className: "w-4 h-4 rounded-full bg-studio-accent animate-pulse motion-reduce:animate-none" }),
-    /* @__PURE__ */ jsx235("p", { className: "text-xs text-neutral-600", children: "Connecting to project\u2026" })
+  ] }) : /* @__PURE__ */ jsxs189("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
+    /* @__PURE__ */ jsx236("div", { className: "w-4 h-4 rounded-full bg-studio-accent animate-pulse motion-reduce:animate-none" }),
+    /* @__PURE__ */ jsx236("p", { className: "text-xs text-neutral-600", children: "Connecting to project\u2026" })
   ] }) });
 }
 
@@ -92207,7 +92243,7 @@ function useActiveComposition({
 }
 
 // src/App.tsx
-import { Fragment as Fragment62, jsx as jsx236, jsxs as jsxs189 } from "react/jsx-runtime";
+import { Fragment as Fragment62, jsx as jsx237, jsxs as jsxs190 } from "react/jsx-runtime";
 var getTimelineSelectionSet = () => usePlayerStore.getState().selectedElementIds;
 function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   const { projectId, resolving, waitingForServer } = useServerConnection();
@@ -92266,7 +92302,8 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     activeCompPath,
     masterCompPath,
     fileManager.fileTree,
-    fileManager.fileTreeLoaded
+    fileManager.fileTreeLoaded,
+    fileManager.refreshFileTree
   );
   const activeCompPathRef = useRef185(activeCompPath);
   activeCompPathRef.current = activeCompPath;
@@ -92565,7 +92602,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     refreshPreviewDocumentVersion
   });
   const timelineToolbar = useMemo77(
-    () => /* @__PURE__ */ jsx236(
+    () => /* @__PURE__ */ jsx237(
       TimelineToolbar,
       {
         domEditSession,
@@ -92575,15 +92612,15 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     [domEditSession, timelineEditing.handleTimelineElementSplit]
   );
   if (resolving || waitingForServer || !projectId)
-    return /* @__PURE__ */ jsx236(StudioSplash, { waiting: waitingForServer });
-  return /* @__PURE__ */ jsx236(StudioShellProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx236(StudioPlaybackProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx236(PanelLayoutProvider, { value: layout, children: /* @__PURE__ */ jsx236(FileManagerProvider, { value: fileManager, children: /* @__PURE__ */ jsx236(DomEditProvider, { value: domEditSession, children: /* @__PURE__ */ jsxs189(
+    return /* @__PURE__ */ jsx237(StudioSplash, { waiting: waitingForServer });
+  return /* @__PURE__ */ jsx237(StudioShellProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx237(StudioPlaybackProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx237(PanelLayoutProvider, { value: layout, children: /* @__PURE__ */ jsx237(FileManagerProvider, { value: fileManager, children: /* @__PURE__ */ jsx237(DomEditProvider, { value: domEditSession, children: /* @__PURE__ */ jsxs190(
     "div",
     {
       className: "flex flex-col h-full w-full bg-neutral-950 relative",
       onDragOver: fileDrop.onDragOver,
       onDrop: fileDrop.onDrop,
       children: [
-        /* @__PURE__ */ jsx236(
+        /* @__PURE__ */ jsx237(
           StudioHeader,
           {
             captureFrameHref: frameCapture.captureFrameHref,
@@ -92601,22 +92638,23 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
             }
           }
         ),
-        previewPersistence.domEditSaveQueuePaused && !externalFileChanges.blocked && /* @__PURE__ */ jsx236(
+        previewPersistence.domEditSaveQueuePaused && !externalFileChanges.blocked && /* @__PURE__ */ jsx237(
           SaveQueuePausedBanner,
           {
             message: previewPersistence.domEditSaveQueuePaused,
             onRetry: previewPersistence.resetDomEditSaveQueueBreaker
           }
         ),
-        /* @__PURE__ */ jsx236(ExternalFileConflictBanner, { coordinator: externalFileChanges }),
-        sdkHandle.unreachableProject && /* @__PURE__ */ jsx236(ProjectUnreachableBanner, { projectId: sdkHandle.unreachableProject }),
-        /* @__PURE__ */ jsx236(
+        /* @__PURE__ */ jsx237(ExternalFileConflictBanner, { coordinator: externalFileChanges }),
+        sdkHandle.unreachableProject && /* @__PURE__ */ jsx237(ProjectUnreachableBanner, { projectId: sdkHandle.unreachableProject }),
+        sdkHandle.compositionMissing && activeCompPath && /* @__PURE__ */ jsx237(CompositionMissingBanner, { path: activeCompPath }),
+        /* @__PURE__ */ jsx237(
           EditorShell,
           {
             readOnlyPreview,
             readOnlyPreviewReason,
-            panels: /* @__PURE__ */ jsxs189(Fragment62, { children: [
-              /* @__PURE__ */ jsx236(
+            panels: /* @__PURE__ */ jsxs190(Fragment62, { children: [
+              /* @__PURE__ */ jsx237(
                 StudioLeftPanels,
                 {
                   onSelectComposition: handleSelectComposition,
@@ -92631,7 +92669,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
                   onAddCompositionToTimeline: handleAddCompositionAtPlayhead
                 }
               ),
-              /* @__PURE__ */ jsx236(
+              /* @__PURE__ */ jsx237(
                 StudioRightPanels,
                 {
                   activeBlockParams,
@@ -92686,7 +92724,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
             recordingState: gestureState,
             onToggleRecording: handleToggleRecording,
             blockPreview,
-            gestureOverlay: gestureState === "recording" && previewIframe ? /* @__PURE__ */ jsx236(
+            gestureOverlay: gestureState === "recording" && previewIframe ? /* @__PURE__ */ jsx237(
               GestureTrailOverlay,
               {
                 samples: gestureRecording.samplesRef.current,
@@ -92699,7 +92737,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
             ) : void 0
           }
         ),
-        /* @__PURE__ */ jsx236(
+        /* @__PURE__ */ jsx237(
           StudioOverlays,
           {
             projectId,