@hyperframes/studio 0.8.144 → 0.8.145

package/dist/index.js

@@ -7,6 +7,8 @@ import {
   PANEL_IDS,
   Player,
   STUDIO_PREVIEW_FPS,
+  announcePreviewDocumentLoaded,
+  announcePreviewPromoted,
   applyPreviewVariablesToUrl,
   clampTimelineZoomPercent,
   clampToDuration,
@@ -26,10 +28,15 @@ import {
   isPreviewBooted,
   isRevealedAudioFxRequestCurrent,
   liveTime,
+  markScenesStale,
+  onPreviewContentReplaced,
+  onPreviewDocumentLoaded,
+  onPreviewPromoted,
   panelsInZone,
   parseDockLayout,
   patchElements,
   readStudioUiPreferences,
+  sceneSwapFor,
   secondsToFrame,
   stepFrameTime,
   thumbnailRevisionOf,
@@ -40,7 +47,7 @@ import {
   usePreviewVariablesStore,
   whenPreviewBooted,
   writeStudioUiPreferences
-} from "./chunk-G3EDKRZH.js";
+} from "./chunk-NZPJUZKT.js";
 import {
   Button,
   ContextMenu,
@@ -75,10 +82,6 @@ import {
 } from "./chunk-Y2OHHNM2.js";
 import {
   DOM_EDIT_LAYER_OBSERVER_INIT,
-  STUDIO_FLAT_INSPECTOR_ENABLED,
-  STUDIO_SDK_CUTOVER_ENABLED,
-  STUDIO_SDK_CUTOVER_FAMILIES,
-  STUDIO_SDK_RESOLVER_SHADOW_ENABLED,
   buildDefaultDomEditTextField,
   buildDomEditPatchTarget,
   buildDomEditRichTextPatchOperation,
@@ -96,19 +99,20 @@ import {
   getDomEditTargetKey,
   getDomLayerPatchTarget,
   isElementComputedVisible,
-  isSdkFamilyEnabled,
   isTextEditableSelection,
   liveLayerElement,
-  manualEditingAvailability_exports,
   readHfId,
   resolveAllVisualDomEditTargets,
   resolveDomEditSelection,
-  serializeDomEditTextFields,
-  studioApiFetch
-} from "./chunk-PEAKCOUW.js";
+  serializeDomEditTextFields
+} from "./chunk-TP6D3U37.js";
 import {
   LAYER_REVEAL_PRIOR_POSITION_ATTR,
   LAYER_REVEAL_PRIOR_Z_ATTR,
+  STUDIO_FLAT_INSPECTOR_ENABLED,
+  STUDIO_SDK_CUTOVER_ENABLED,
+  STUDIO_SDK_CUTOVER_FAMILIES,
+  STUDIO_SDK_RESOLVER_SHADOW_ENABLED,
   applyMediaMetadataFromElement,
   buildProjectApiPath,
   buildProjectHash,
@@ -136,8 +140,10 @@ import {
   isAudibleVideoNode,
   isElementVisibleThroughAncestors,
   isHtmlElement,
+  isSdkFamilyEnabled,
   isTimelineIgnoredElement,
   isVideoAudible,
+  manualEditingAvailability_exports,
   normalizeTimelineCompositionSource,
   parseCssColor,
   parseProjectHashRoute,
@@ -163,9 +169,10 @@ import {
   sameTimelineText,
   setCompositionSourceMap,
   splitTimelineElementKey,
+  studioApiFetch,
   toHexColor,
   wrapTimeline
-} from "./chunk-3GHTHPZD.js";
+} from "./chunk-6JY3MTIX.js";
 import "./chunk-PZ5AY32C.js";
 
 // src/components/EditorShell.tsx
@@ -31514,79 +31521,6 @@ function isPreviewChanging() {
   return changing() && !givenUp;
 }
 
-// src/player/sceneSwap.ts
-var SCENES_SWAPPED = "hf-scenes-swapped";
-var SCENE_SWAP_MS = 5e3;
-function onPreviewContentReplaced(iframe, onReplaced) {
-  iframe.addEventListener("load", onReplaced);
-  iframe.addEventListener(SCENES_SWAPPED, onReplaced);
-  return () => {
-    iframe.removeEventListener("load", onReplaced);
-    iframe.removeEventListener(SCENES_SWAPPED, onReplaced);
-  };
-}
-var PREVIEW_PROMOTED = "hf-preview-promoted";
-function announcePreviewPromoted(promotion) {
-  promotion.live.ownerDocument.dispatchEvent(
-    new CustomEvent(PREVIEW_PROMOTED, { detail: promotion })
-  );
-}
-function onPreviewPromoted(doc, listener2) {
-  const handle = (event) => listener2(event.detail);
-  doc.addEventListener(PREVIEW_PROMOTED, handle);
-  return () => doc.removeEventListener(PREVIEW_PROMOTED, handle);
-}
-function markScenesStale(iframe, files) {
-  const doc = iframe?.contentDocument;
-  const meta = doc?.querySelector('meta[name="hf-scene-parts"]');
-  if (!doc || !meta) return;
-  let parts;
-  try {
-    parts = JSON.parse(meta.content);
-  } catch {
-    return;
-  }
-  for (const file of files) {
-    const hosts = doc.querySelectorAll(`[data-composition-file="${CSS.escape(file)}"]`);
-    if (hosts.length === 0 && file.endsWith(".html")) parts.shared = "";
-    for (const host of hosts) {
-      const scene = host.closest("[data-hf-scene]")?.getAttribute("data-hf-scene");
-      if (scene && scene in parts.scenes) parts.scenes[scene] = "";
-    }
-  }
-  meta.content = JSON.stringify(parts);
-}
-function sceneSwapFor(iframe) {
-  const win = iframe.contentWindow;
-  const swap = win?.__hfSwapScenes;
-  if (typeof swap !== "function") return null;
-  return async (url, isCurrent, cancel) => {
-    if (cancel?.aborted) throw cancel.reason;
-    const deadline = new AbortController();
-    const timer = setTimeout(
-      () => deadline.abort(new Error("the preview took too long to swap")),
-      SCENE_SWAP_MS
-    );
-    cancel?.addEventListener("abort", () => deadline.abort(cancel.reason), { once: true });
-    const swapping = (async () => {
-      const response = await studioApiFetch(url, { signal: deadline.signal });
-      if (!response.ok) throw new Error(`preview request failed with ${response.status}`);
-      const html2 = await response.text();
-      if (!isCurrent()) throw new Error("superseded by a newer reload");
-      await swap.call(win, html2, deadline.signal);
-    })();
-    const expired = new Promise(
-      (_resolve, reject) => deadline.signal.addEventListener("abort", () => reject(deadline.signal.reason))
-    );
-    try {
-      await Promise.race([swapping, expired]);
-    } finally {
-      clearTimeout(timer);
-    }
-    iframe.dispatchEvent(new Event(SCENES_SWAPPED));
-  };
-}
-
 // src/player/hooks/useShadowPreviewReload.ts
 var SHADOW_READY_TIMEOUT_MS = 15e3;
 var SHADOW_READY_BUDGETS = 3;
@@ -37575,7 +37509,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-PYST4G45.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-PTP2ICGM.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -73366,6 +73300,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
       }
       if (resolution && resolution !== "auto") body.resolution = resolution;
       if (composition) body.composition = composition;
+      if (opts.gpu) body.gpu = true;
       if (opts.variables && Object.keys(opts.variables).length > 0) {
         body.variables = opts.variables;
       }
@@ -89207,9 +89142,9 @@ function useConsoleErrorCapture(previewIframe) {
       }
     };
     attachErrorCapture();
-    previewIframe.addEventListener("load", attachErrorCapture);
+    const stopLoaded = onPreviewDocumentLoaded(previewIframe, attachErrorCapture);
     return () => {
-      previewIframe.removeEventListener("load", attachErrorCapture);
+      stopLoaded();
       detachErrorCapture();
     };
   }, [previewIframe, resetErrors]);
@@ -93848,16 +93783,17 @@ function getPersistedRenderSettings() {
       return {
         format: ["mp4", "webm", "mov"].includes(parsed.format) ? parsed.format : "mp4",
         quality: ["draft", "standard", "high"].includes(parsed.quality) ? parsed.quality : "standard",
-        fps: [24, 30, 60].includes(parsed.fps) ? parsed.fps : 30
+        fps: [24, 30, 60].includes(parsed.fps) ? parsed.fps : 30,
+        gpu: parsed.gpu === true
       };
     }
   } catch {
   }
-  return { format: "mp4", quality: "standard", fps: 30 };
+  return { format: "mp4", quality: "standard", fps: 30, gpu: false };
 }
-function persistRenderSettings(format, quality, fps) {
+function persistRenderSettings(format, quality, fps, gpu = getPersistedRenderSettings().gpu) {
   try {
-    localStorage.setItem(RENDER_SETTINGS_KEY, JSON.stringify({ format, quality, fps }));
+    localStorage.setItem(RENDER_SETTINGS_KEY, JSON.stringify({ format, quality, fps, gpu }));
   } catch {
   }
 }
@@ -93906,8 +93842,8 @@ var StudioLeftPanels = memo50(function StudioLeftPanels2({
         return;
       }
       await waitForPendingDomEditSaves();
-      const { format, quality, fps } = getPersistedRenderSettings();
-      await renderQueue.startRender({ composition: comp, format, quality, fps });
+      const { format, quality, fps, gpu } = getPersistedRenderSettings();
+      await renderQueue.startRender({ composition: comp, format, quality, fps, gpu });
     },
     [renderQueue, waitForPendingDomEditSaves]
   );
@@ -95713,8 +95649,38 @@ var FfmpegRequiredNotice = memo56(function FfmpegRequiredNotice2({
   );
 });
 
-// src/components/renders/RenderQueue.tsx
+// src/components/renders/GpuEncodingToggle.tsx
 import { jsx as jsx233, jsxs as jsxs185 } from "react/jsx-runtime";
+function GpuEncodingToggle({
+  format,
+  checked,
+  disabled,
+  onToggle
+}) {
+  if (format !== "mp4") return null;
+  return /* @__PURE__ */ jsxs185(
+    "label",
+    {
+      className: `flex items-center gap-2 text-step-10 text-text-4 ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"}`,
+      children: [
+        /* @__PURE__ */ jsx233(
+          "input",
+          {
+            type: "checkbox",
+            checked,
+            disabled,
+            onChange: onToggle,
+            className: "accent-studio-accent"
+          }
+        ),
+        /* @__PURE__ */ jsx233("span", { children: "Use GPU encoding" })
+      ]
+    }
+  );
+}
+
+// src/components/renders/RenderQueue.tsx
+import { jsx as jsx234, jsxs as jsxs186 } from "react/jsx-runtime";
 var SCALE_OPTION_ORDER = ["auto", "1080p", "4k"];
 var SCALE_LABEL = {
   auto: "Auto",
@@ -95802,8 +95768,8 @@ function FormatInfoTooltip({ format }) {
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open]);
   const info = FORMAT_INFO[format];
-  return /* @__PURE__ */ jsxs185("div", { ref: triggerRef, className: "relative", onPointerEnter: show, onPointerLeave: hide, children: [
-    /* @__PURE__ */ jsx233(
+  return /* @__PURE__ */ jsxs186("div", { ref: triggerRef, className: "relative", onPointerEnter: show, onPointerLeave: hide, children: [
+    /* @__PURE__ */ jsx234(
       "button",
       {
         type: "button",
@@ -95814,7 +95780,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__ */ jsxs185(
+        children: /* @__PURE__ */ jsxs186(
           "svg",
           {
             width: "12",
@@ -95827,16 +95793,16 @@ function FormatInfoTooltip({ format }) {
             strokeLinejoin: "round",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx233("circle", { cx: "12", cy: "12", r: "10" }),
-              /* @__PURE__ */ jsx233("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" }),
-              /* @__PURE__ */ jsx233("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+              /* @__PURE__ */ jsx234("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsx234("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" }),
+              /* @__PURE__ */ jsx234("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
             ]
           }
         )
       }
     ),
     open && createPortal14(
-      /* @__PURE__ */ jsxs185(
+      /* @__PURE__ */ jsxs186(
         "div",
         {
           id: panelId,
@@ -95846,10 +95812,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__ */ jsx233("p", { className: "text-step-10 font-semibold text-text-1 mb-0.5", children: info.label }),
-            /* @__PURE__ */ jsx233("p", { className: "text-step-9 text-text-3 leading-tight", children: info.desc }),
-            /* @__PURE__ */ jsx233("div", { className: "mt-1.5 pt-1.5 border-t border-border", children: ["mp4", "mov", "webm"].filter((f) => f !== format).map((f) => /* @__PURE__ */ jsxs185("p", { className: "text-step-9 text-text-4 leading-relaxed", children: [
-              /* @__PURE__ */ jsx233("span", { className: "text-text-3 font-medium", children: FORMAT_INFO[f].label }),
+            /* @__PURE__ */ jsx234("p", { className: "text-step-10 font-semibold text-text-1 mb-0.5", children: info.label }),
+            /* @__PURE__ */ jsx234("p", { className: "text-step-9 text-text-3 leading-tight", children: info.desc }),
+            /* @__PURE__ */ jsx234("div", { className: "mt-1.5 pt-1.5 border-t border-border", children: ["mp4", "mov", "webm"].filter((f) => f !== format).map((f) => /* @__PURE__ */ jsxs186("p", { className: "text-step-9 text-text-4 leading-relaxed", children: [
+              /* @__PURE__ */ jsx234("span", { className: "text-text-3 font-medium", children: FORMAT_INFO[f].label }),
               " \u2014 ",
               FORMAT_INFO[f].desc
             ] }, f)) })
@@ -95893,10 +95859,11 @@ function FormatExportButton({
   const [quality, setQuality] = useState153(persisted.quality);
   const [resolution, setResolution] = useState153("auto");
   const [fps, setFps] = useState153(persisted.fps);
+  const [gpu, setGpu] = useState153(persisted.gpu);
   const missingFfmpeg = ffmpeg && !ffmpeg.ok ? ffmpeg : null;
   const showQuality = format !== "mov";
-  return /* @__PURE__ */ jsxs185("div", { className: "flex flex-col gap-3", children: [
-    missingFfmpeg && /* @__PURE__ */ jsx233(
+  return /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-3", children: [
+    missingFfmpeg && /* @__PURE__ */ jsx234(
       FfmpegRequiredNotice,
       {
         status: missingFfmpeg,
@@ -95904,13 +95871,13 @@ function FormatExportButton({
         onRecheck: onRecheckFfmpeg
       }
     ),
-    /* @__PURE__ */ jsxs185("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsxs185("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsxs185("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx233("span", { className: "text-step-10 text-text-4", children: "Format" }),
-          /* @__PURE__ */ jsx233(FormatInfoTooltip, { format })
+    /* @__PURE__ */ jsxs186("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs186("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx234("span", { className: "text-step-10 text-text-4", children: "Format" }),
+          /* @__PURE__ */ jsx234(FormatInfoTooltip, { format })
         ] }),
-        /* @__PURE__ */ jsx233(
+        /* @__PURE__ */ jsx234(
           Select,
           {
             label: "Format",
@@ -95925,9 +95892,9 @@ function FormatExportButton({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs185("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx233("span", { className: "text-step-10 text-text-4", children: "Resolution" }),
-        /* @__PURE__ */ jsx233(
+      /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx234("span", { className: "text-step-10 text-text-4", children: "Resolution" }),
+        /* @__PURE__ */ jsx234(
           Select,
           {
             label: "Resolution",
@@ -95942,9 +95909,9 @@ function FormatExportButton({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs185("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx233("span", { className: "text-step-10 text-text-4", children: "Frame rate" }),
-        /* @__PURE__ */ jsx233(
+      /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx234("span", { className: "text-step-10 text-text-4", children: "Frame rate" }),
+        /* @__PURE__ */ jsx234(
           Select,
           {
             label: "Frame rate",
@@ -95959,9 +95926,9 @@ function FormatExportButton({
           }
         )
       ] }),
-      showQuality && /* @__PURE__ */ jsxs185("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx233("span", { className: "text-step-10 text-text-4", children: "Quality" }),
-        /* @__PURE__ */ jsx233(
+      showQuality && /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx234("span", { className: "text-step-10 text-text-4", children: "Quality" }),
+        /* @__PURE__ */ jsx234(
           Select,
           {
             label: "Quality",
@@ -95977,7 +95944,19 @@ function FormatExportButton({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx233(
+    /* @__PURE__ */ jsx234(
+      GpuEncodingToggle,
+      {
+        format,
+        checked: gpu,
+        disabled: isRendering,
+        onToggle: () => {
+          setGpu(!gpu);
+          persistRenderSettings(format, quality, fps, !gpu);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx234(
       Button,
       {
         variant: "primary",
@@ -95990,13 +95969,13 @@ function FormatExportButton({
           if (isRendering || missingFfmpeg) return;
           const outputResolution = resolveResolution(resolution, compositionDimensions);
           trackStudioEvent("render_start", { format, quality, resolution: outputResolution, fps });
-          void onStartRender(format, quality, outputResolution, fps);
+          void onStartRender(format, quality, outputResolution, fps, gpu);
         },
         className: "w-full",
         children: isRendering ? "Rendering\u2026" : "Export"
       }
     ),
-    lastRenderDurationMs !== void 0 && !isRendering && /* @__PURE__ */ jsxs185("p", { className: "text-step-9 text-text-5 text-center -mt-1.5", children: [
+    lastRenderDurationMs !== void 0 && !isRendering && /* @__PURE__ */ jsxs186("p", { className: "text-step-9 text-text-5 text-center -mt-1.5", children: [
       "Last render took ",
       formatEta(lastRenderDurationMs)
     ] })
@@ -96027,8 +96006,8 @@ var RenderQueue = memo57(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__ */ jsxs185("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ jsx233("div", { className: "px-3 py-3 border-b border-border shrink-0", children: /* @__PURE__ */ jsx233(
+  return /* @__PURE__ */ jsxs186("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx234("div", { className: "px-3 py-3 border-b border-border shrink-0", children: /* @__PURE__ */ jsx234(
       FormatExportButton,
       {
         onStartRender,
@@ -96040,21 +96019,21 @@ var RenderQueue = memo57(function RenderQueue2({
         onRecheckFfmpeg
       }
     ) }),
-    actionError && /* @__PURE__ */ jsxs185(
+    actionError && /* @__PURE__ */ jsxs186(
       "div",
       {
         role: "alert",
         className: "flex items-start justify-between gap-2 px-3 py-2 border-b border-border bg-danger/10",
         children: [
-          /* @__PURE__ */ jsx233("span", { className: "text-step-10 text-danger-ink", children: actionError }),
-          onDismissActionError && /* @__PURE__ */ jsx233(
+          /* @__PURE__ */ jsx234("span", { className: "text-step-10 text-danger-ink", children: actionError }),
+          onDismissActionError && /* @__PURE__ */ jsx234(
             IconButton,
             {
               size: "sm",
               onClick: onDismissActionError,
               "aria-label": "Dismiss error",
               className: "shrink-0",
-              icon: /* @__PURE__ */ jsx233(
+              icon: /* @__PURE__ */ jsx234(
                 "svg",
                 {
                   width: "10",
@@ -96065,7 +96044,7 @@ var RenderQueue = memo57(function RenderQueue2({
                   strokeWidth: "2",
                   strokeLinecap: "round",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx233("path", { d: "M18 6L6 18M6 6l12 12" })
+                  children: /* @__PURE__ */ jsx234("path", { d: "M18 6L6 18M6 6l12 12" })
                 }
               )
             }
@@ -96073,11 +96052,11 @@ var RenderQueue = memo57(function RenderQueue2({
         ]
       }
     ),
-    /* @__PURE__ */ jsx233("div", { ref: listRef, className: "flex-1 overflow-y-auto", children: loadError && jobs.length === 0 ? /* @__PURE__ */ jsxs185("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", role: "alert", children: [
-      /* @__PURE__ */ jsx233("p", { className: "text-step-10 text-danger-ink text-center", children: loadError }),
-      onRetryLoad && /* @__PURE__ */ jsx233(Button, { size: "sm", variant: "secondary", onClick: onRetryLoad, children: "Retry" })
-    ] }) : jobs.length === 0 ? /* @__PURE__ */ jsxs185("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", children: [
-      /* @__PURE__ */ jsxs185(
+    /* @__PURE__ */ jsx234("div", { ref: listRef, className: "flex-1 overflow-y-auto", children: loadError && jobs.length === 0 ? /* @__PURE__ */ jsxs186("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", role: "alert", children: [
+      /* @__PURE__ */ jsx234("p", { className: "text-step-10 text-danger-ink text-center", children: loadError }),
+      onRetryLoad && /* @__PURE__ */ jsx234(Button, { size: "sm", variant: "secondary", onClick: onRetryLoad, children: "Retry" })
+    ] }) : jobs.length === 0 ? /* @__PURE__ */ jsxs186("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-2", children: [
+      /* @__PURE__ */ jsxs186(
         "svg",
         {
           width: "20",
@@ -96088,7 +96067,7 @@ var RenderQueue = memo57(function RenderQueue2({
           strokeWidth: "1.5",
           className: "text-text-5",
           children: [
-            /* @__PURE__ */ jsx233(
+            /* @__PURE__ */ jsx234(
               "rect",
               {
                 x: "2",
@@ -96101,7 +96080,7 @@ var RenderQueue = memo57(function RenderQueue2({
                 strokeLinejoin: "round"
               }
             ),
-            /* @__PURE__ */ jsx233(
+            /* @__PURE__ */ jsx234(
               "path",
               {
                 d: "M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5M17 17h5M17 7h5",
@@ -96112,17 +96091,17 @@ var RenderQueue = memo57(function RenderQueue2({
           ]
         }
       ),
-      /* @__PURE__ */ jsx233("p", { className: "text-step-10 text-text-5 text-center", children: "No renders yet" })
-    ] }) : /* @__PURE__ */ jsxs185("div", { children: [
-      completedCount > 0 && /* @__PURE__ */ jsxs185("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-border", children: [
-        /* @__PURE__ */ jsxs185("span", { className: "text-step-10 text-text-4", children: [
+      /* @__PURE__ */ jsx234("p", { className: "text-step-10 text-text-5 text-center", children: "No renders yet" })
+    ] }) : /* @__PURE__ */ jsxs186("div", { children: [
+      completedCount > 0 && /* @__PURE__ */ jsxs186("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-border", children: [
+        /* @__PURE__ */ jsxs186("span", { className: "text-step-10 text-text-4", children: [
           jobs.length,
           " render",
           jobs.length === 1 ? "" : "s"
         ] }),
-        /* @__PURE__ */ jsx233(Tooltip, { label: "Hide finished renders from this list (files stay on disk)", children: /* @__PURE__ */ jsx233(Button, { size: "sm", variant: "ghost", onClick: onClearCompleted, children: "Hide finished" }) })
+        /* @__PURE__ */ jsx234(Tooltip, { label: "Hide finished renders from this list (files stay on disk)", children: /* @__PURE__ */ jsx234(Button, { size: "sm", variant: "ghost", onClick: onClearCompleted, children: "Hide finished" }) })
       ] }),
-      jobs.map((job) => /* @__PURE__ */ jsx233(
+      jobs.map((job) => /* @__PURE__ */ jsx234(
         RenderQueueItem,
         {
           job,
@@ -96137,10 +96116,10 @@ var RenderQueue = memo57(function RenderQueue2({
 });
 
 // src/components/renders/RenderQueuePanel.tsx
-import { jsx as jsx234 } from "react/jsx-runtime";
+import { jsx as jsx235 } from "react/jsx-runtime";
 var RenderQueuePanel = memo58(function RenderQueuePanel2() {
   const { projectId, compositionDimensions, waitForPendingDomEditSaves, renderQueue } = useStudioShellContext();
-  return /* @__PURE__ */ jsx234(
+  return /* @__PURE__ */ jsx235(
     RenderQueue,
     {
       jobs: renderQueue.jobs,
@@ -96155,13 +96134,14 @@ var RenderQueuePanel = memo58(function RenderQueuePanel2() {
       ffmpeg: renderQueue.ffmpeg,
       ffmpegChecking: renderQueue.ffmpegChecking,
       onRecheckFfmpeg: renderQueue.recheckFfmpeg,
-      onStartRender: async (format, quality, resolution, fps) => {
+      onStartRender: async (format, quality, resolution, fps, gpu) => {
         await waitForPendingDomEditSaves();
         await renderQueue.startRender({
           fps,
           quality,
           format,
           resolution,
+          gpu,
           // Render what the user is previewing: active variable overrides
           // from the Variables panel ride along (undefined = defaults).
           variables: usePreviewVariablesStore.getState().values ?? void 0
@@ -96179,13 +96159,13 @@ import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
 import { useState as useState154, useCallback as useCallback178, useId as useId6 } from "react";
-import { jsx as jsx235, jsxs as jsxs186 } from "react/jsx-runtime";
+import { jsx as jsx236, jsxs as jsxs187 } from "react/jsx-runtime";
 function SectionHeader({
   children,
   expanded,
   onToggle
 }) {
-  return /* @__PURE__ */ jsxs186(
+  return /* @__PURE__ */ jsxs187(
     "button",
     {
       type: "button",
@@ -96193,8 +96173,8 @@ function SectionHeader({
       onClick: onToggle,
       "aria-expanded": expanded,
       children: [
-        /* @__PURE__ */ jsx235("span", { children }),
-        /* @__PURE__ */ jsx235("span", { className: "text-[10px] text-neutral-600", children: expanded ? "\u25B2" : "\u25BC" })
+        /* @__PURE__ */ jsx236("span", { children }),
+        /* @__PURE__ */ jsx236("span", { className: "text-[10px] text-neutral-600", children: expanded ? "\u25B2" : "\u25BC" })
       ]
     }
   );
@@ -96212,12 +96192,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__ */ jsxs186("div", { className: "flex flex-col gap-px", children: [
+  return /* @__PURE__ */ jsxs187("div", { className: "flex flex-col gap-px", children: [
     rows.map((scene) => {
       const isSlide = slideIds.has(scene.id);
       const isSelected2 = selectedSceneId === scene.id;
       const slideIndex = slides.findIndex((s) => s.sceneId === scene.id);
-      return /* @__PURE__ */ jsxs186(
+      return /* @__PURE__ */ jsxs187(
         "div",
         {
           role: "button",
@@ -96232,7 +96212,7 @@ function SlideList({
             }
           },
           children: [
-            /* @__PURE__ */ jsx235(
+            /* @__PURE__ */ jsx236(
               "input",
               {
                 type: "checkbox",
@@ -96243,9 +96223,9 @@ function SlideList({
                 className: "accent-studio-accent shrink-0"
               }
             ),
-            /* @__PURE__ */ jsx235("span", { className: "flex-1 truncate", children: scene.label || scene.id }),
-            isSlide && /* @__PURE__ */ jsxs186("span", { className: "flex gap-0.5 shrink-0", children: [
-              /* @__PURE__ */ jsx235(
+            /* @__PURE__ */ jsx236("span", { className: "flex-1 truncate", children: scene.label || scene.id }),
+            isSlide && /* @__PURE__ */ jsxs187("span", { className: "flex gap-0.5 shrink-0", children: [
+              /* @__PURE__ */ jsx236(
                 "button",
                 {
                   type: "button",
@@ -96260,7 +96240,7 @@ function SlideList({
                   children: "\u25B2"
                 }
               ),
-              /* @__PURE__ */ jsx235(
+              /* @__PURE__ */ jsx236(
                 "button",
                 {
                   type: "button",
@@ -96281,7 +96261,7 @@ function SlideList({
         scene.id
       );
     }),
-    scenes.length === 0 && /* @__PURE__ */ jsx235("p", { className: "px-3 py-2 text-[11px] text-neutral-500 italic", children: "No scenes found" })
+    scenes.length === 0 && /* @__PURE__ */ jsx236("p", { className: "px-3 py-2 text-[11px] text-neutral-500 italic", children: "No scenes found" })
   ] });
 }
 function SlideInspector({
@@ -96293,14 +96273,14 @@ function SlideInspector({
   onRemoveFragment
 }) {
   const fragments = slide?.fragments ?? [];
-  return /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
-    /* @__PURE__ */ jsxs186("p", { className: "text-[10px] text-neutral-500 font-medium uppercase tracking-wide truncate", children: [
+  return /* @__PURE__ */ jsxs187("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs187("p", { className: "text-[10px] text-neutral-500 font-medium uppercase tracking-wide truncate", children: [
       "Scene: ",
       sceneId
     ] }),
-    /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx235("label", { className: "text-[11px] text-neutral-400", children: "Notes" }),
-      /* @__PURE__ */ jsx235(
+    /* @__PURE__ */ jsxs187("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx236("label", { className: "text-[11px] text-neutral-400", children: "Notes" }),
+      /* @__PURE__ */ jsx236(
         "textarea",
         {
           className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1.5 text-[11px] text-text-0 resize-none placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden",
@@ -96311,10 +96291,10 @@ function SlideInspector({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsxs186("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx235("span", { className: "text-[11px] text-neutral-400", children: "Fragment hold-points" }),
-        /* @__PURE__ */ jsxs186(
+    /* @__PURE__ */ jsxs187("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs187("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx236("span", { className: "text-[11px] text-neutral-400", children: "Fragment hold-points" }),
+        /* @__PURE__ */ jsxs187(
           "button",
           {
             type: "button",
@@ -96329,14 +96309,14 @@ function SlideInspector({
           }
         )
       ] }),
-      fragments.length > 0 ? /* @__PURE__ */ jsx235("div", { className: "flex flex-wrap gap-1", children: fragments.map((t2, i) => /* @__PURE__ */ jsxs186(
+      fragments.length > 0 ? /* @__PURE__ */ jsx236("div", { className: "flex flex-wrap gap-1", children: fragments.map((t2, i) => /* @__PURE__ */ jsxs187(
         "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: [
             t2.toFixed(2),
             "s",
-            /* @__PURE__ */ jsx235(
+            /* @__PURE__ */ jsx236(
               "button",
               {
                 type: "button",
@@ -96349,7 +96329,7 @@ function SlideInspector({
           ]
         },
         `frag-${i}`
-      )) }) : /* @__PURE__ */ jsx235("p", { className: "text-[10px] text-neutral-600 italic", children: "No hold-points yet" })
+      )) }) : /* @__PURE__ */ jsx236("p", { className: "text-[10px] text-neutral-600 italic", children: "No hold-points yet" })
     ] })
   ] });
 }
@@ -96372,9 +96352,9 @@ function BranchTree({
     onCreateSequence(label);
     setNewLabel("");
   }, [newLabel, onCreateSequence]);
-  return /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
-    /* @__PURE__ */ jsxs186("div", { className: "flex gap-1.5", children: [
-      /* @__PURE__ */ jsx235(
+  return /* @__PURE__ */ jsxs187("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs187("div", { className: "flex gap-1.5", children: [
+      /* @__PURE__ */ jsx236(
         "input",
         {
           id: inputId,
@@ -96389,7 +96369,7 @@ function BranchTree({
           "aria-label": "New branch sequence name"
         }
       ),
-      /* @__PURE__ */ jsx235(
+      /* @__PURE__ */ jsx236(
         "button",
         {
           type: "button",
@@ -96399,7 +96379,7 @@ function BranchTree({
         }
       )
     ] }),
-    sequences.length === 0 ? /* @__PURE__ */ jsx235("p", { className: "text-[10px] text-neutral-600 italic", children: "No branches yet" }) : /* @__PURE__ */ jsx235("div", { className: "flex flex-col gap-3", children: sequences.map((seq) => /* @__PURE__ */ jsx235(
+    sequences.length === 0 ? /* @__PURE__ */ jsx236("p", { className: "text-[10px] text-neutral-600 italic", children: "No branches yet" }) : /* @__PURE__ */ jsx236("div", { className: "flex flex-col gap-3", children: sequences.map((seq) => /* @__PURE__ */ jsx236(
       BranchItem,
       {
         seq,
@@ -96433,9 +96413,9 @@ function BranchItem({
     if (label && label !== seq.label) onRename(seq.id, label);
     setEditing(false);
   }, [draft, onRename, seq.id, seq.label]);
-  return /* @__PURE__ */ jsxs186("div", { className: "border border-neutral-700/60 rounded-sm p-2 flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs186("div", { className: "flex items-center gap-1", children: [
-      editing ? /* @__PURE__ */ jsx235(
+  return /* @__PURE__ */ jsxs187("div", { className: "border border-neutral-700/60 rounded-sm p-2 flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs187("div", { className: "flex items-center gap-1", children: [
+      editing ? /* @__PURE__ */ jsx236(
         "input",
         {
           className: "flex-1 bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-0.5 text-[11px] text-text-0 focus:border-studio-accent/60 focus:outline-hidden",
@@ -96449,7 +96429,7 @@ function BranchItem({
           },
           "aria-label": `Rename branch ${seq.label}`
         }
-      ) : /* @__PURE__ */ jsx235(
+      ) : /* @__PURE__ */ jsx236(
         "span",
         {
           role: "button",
@@ -96466,7 +96446,7 @@ function BranchItem({
           children: seq.label
         }
       ),
-      /* @__PURE__ */ jsx235(
+      /* @__PURE__ */ jsx236(
         "button",
         {
           type: "button",
@@ -96477,16 +96457,16 @@ function BranchItem({
         }
       )
     ] }),
-    confirmingDelete && /* @__PURE__ */ jsxs186("div", { className: "px-2 py-1.5 bg-danger/15 border-l-2 border-red-500 flex flex-col gap-1 rounded-xs", children: [
-      /* @__PURE__ */ jsxs186("span", { className: "text-[10px] text-danger-ink", children: [
+    confirmingDelete && /* @__PURE__ */ jsxs187("div", { className: "px-2 py-1.5 bg-danger/15 border-l-2 border-red-500 flex flex-col gap-1 rounded-xs", children: [
+      /* @__PURE__ */ jsxs187("span", { className: "text-[10px] text-danger-ink", 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__ */ jsxs186("div", { className: "flex items-center justify-end gap-1", children: [
-        /* @__PURE__ */ jsx235(
+      /* @__PURE__ */ jsxs187("div", { className: "flex items-center justify-end gap-1", children: [
+        /* @__PURE__ */ jsx236(
           "button",
           {
             type: "button",
@@ -96498,7 +96478,7 @@ function BranchItem({
             children: "Delete"
           }
         ),
-        /* @__PURE__ */ jsx235(
+        /* @__PURE__ */ jsx236(
           "button",
           {
             type: "button",
@@ -96509,16 +96489,16 @@ function BranchItem({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-px pl-2", children: [
+    /* @__PURE__ */ jsxs187("div", { className: "flex flex-col gap-px pl-2", children: [
       scenes.map((scene) => {
         const assigned = seq.slides.some((s) => s.sceneId === scene.id);
         const isSelected2 = selectedSequenceId === seq.id && selectedSceneId === scene.id;
-        return /* @__PURE__ */ jsxs186(
+        return /* @__PURE__ */ jsxs187(
           "div",
           {
             className: "flex items-center gap-1.5 py-0.5 text-[11px] text-neutral-400",
             children: [
-              /* @__PURE__ */ jsx235(
+              /* @__PURE__ */ jsx236(
                 "input",
                 {
                   type: "checkbox",
@@ -96528,7 +96508,7 @@ function BranchItem({
                   className: "accent-studio-accent shrink-0"
                 }
               ),
-              assigned ? /* @__PURE__ */ jsx235(
+              assigned ? /* @__PURE__ */ jsx236(
                 "button",
                 {
                   type: "button",
@@ -96537,13 +96517,13 @@ function BranchItem({
                   onClick: () => onSelectBranchSlide(seq.id, scene.id),
                   children: scene.label || scene.id
                 }
-              ) : /* @__PURE__ */ jsx235("span", { className: "flex-1 truncate", children: scene.label || scene.id })
+              ) : /* @__PURE__ */ jsx236("span", { className: "flex-1 truncate", children: scene.label || scene.id })
             ]
           },
           scene.id
         );
       }),
-      scenes.length === 0 && /* @__PURE__ */ jsx235("p", { className: "text-[10px] text-neutral-600 italic", children: "No scenes" })
+      scenes.length === 0 && /* @__PURE__ */ jsx236("p", { className: "text-[10px] text-neutral-600 italic", children: "No scenes" })
     ] })
   ] });
 }
@@ -96569,19 +96549,19 @@ function HotspotTool({
     setHotspotLabel("");
   }, [selectedSceneId, targetSequenceId, elementKey3, hotspotLabel, onAddHotspot]);
   if (!selectedSceneId) {
-    return /* @__PURE__ */ jsx235("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsx235("p", { className: "text-[11px] text-neutral-500 italic", children: "Select a scene in the Slides list" }) });
+    return /* @__PURE__ */ jsx236("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsx236("p", { className: "text-[11px] text-neutral-500 italic", children: "Select a scene in the Slides list" }) });
   }
-  return /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
-    /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsxs186("p", { className: "text-[11px] text-neutral-400", children: [
+  return /* @__PURE__ */ jsxs187("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs187("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs187("p", { className: "text-[11px] text-neutral-400", children: [
         "Selected element:",
         " ",
-        /* @__PURE__ */ jsx235("span", { className: "text-neutral-200 font-mono", children: elementKey3 ?? "none" })
+        /* @__PURE__ */ jsx236("span", { className: "text-neutral-200 font-mono", children: elementKey3 ?? "none" })
       ] }),
-      !elementKey3 && /* @__PURE__ */ jsx235("p", { className: "text-[10px] text-neutral-500 italic", children: "Click an element on the canvas to choose the hotspot target." }),
-      sequences.length === 0 && /* @__PURE__ */ jsx235("p", { className: "text-[10px] text-neutral-500 italic", children: "Create a branch in the Branches section first \u2014 hotspots jump to a branch." }),
-      /* @__PURE__ */ jsx235("label", { className: "text-[11px] text-neutral-400", children: "Hotspot label" }),
-      /* @__PURE__ */ jsx235(
+      !elementKey3 && /* @__PURE__ */ jsx236("p", { className: "text-[10px] text-neutral-500 italic", children: "Click an element on the canvas to choose the hotspot target." }),
+      sequences.length === 0 && /* @__PURE__ */ jsx236("p", { className: "text-[10px] text-neutral-500 italic", children: "Create a branch in the Branches section first \u2014 hotspots jump to a branch." }),
+      /* @__PURE__ */ jsx236("label", { className: "text-[11px] text-neutral-400", children: "Hotspot label" }),
+      /* @__PURE__ */ jsx236(
         "input",
         {
           type: "text",
@@ -96592,8 +96572,8 @@ function HotspotTool({
           "aria-label": "Hotspot label"
         }
       ),
-      /* @__PURE__ */ jsx235("label", { className: "text-[11px] text-neutral-400", children: "Target branch" }),
-      /* @__PURE__ */ jsxs186(
+      /* @__PURE__ */ jsx236("label", { className: "text-[11px] text-neutral-400", children: "Target branch" }),
+      /* @__PURE__ */ jsxs187(
         "select",
         {
           className: "bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-text-0 focus:border-studio-accent/60 focus:outline-hidden",
@@ -96601,12 +96581,12 @@ function HotspotTool({
           onChange: (e) => setTargetSequenceId(e.target.value),
           "aria-label": "Target branch sequence",
           children: [
-            /* @__PURE__ */ jsx235("option", { value: "", children: "\u2014 select branch \u2014" }),
-            sequences.map((seq) => /* @__PURE__ */ jsx235("option", { value: seq.id, children: seq.label }, seq.id))
+            /* @__PURE__ */ jsx236("option", { value: "", children: "\u2014 select branch \u2014" }),
+            sequences.map((seq) => /* @__PURE__ */ jsx236("option", { value: seq.id, children: seq.label }, seq.id))
           ]
         }
       ),
-      /* @__PURE__ */ jsx235(
+      /* @__PURE__ */ jsx236(
         "button",
         {
           type: "button",
@@ -96618,21 +96598,21 @@ function HotspotTool({
         }
       )
     ] }),
-    hotspots.length > 0 && /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsx235("p", { className: "text-[11px] text-neutral-400 font-medium", children: "Hotspots on this slide" }),
+    hotspots.length > 0 && /* @__PURE__ */ jsxs187("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx236("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__ */ jsxs186(
+        return /* @__PURE__ */ jsxs187(
           "div",
           {
             className: "flex items-center gap-2 bg-neutral-800 rounded-sm px-2 py-1",
             children: [
-              /* @__PURE__ */ jsxs186("span", { className: "flex-1 text-[11px] text-neutral-200 truncate", children: [
+              /* @__PURE__ */ jsxs187("span", { className: "flex-1 text-[11px] text-neutral-200 truncate", children: [
                 h.label,
                 " \u2192 ",
-                /* @__PURE__ */ jsx235("span", { className: "text-neutral-400", children: seqLabel })
+                /* @__PURE__ */ jsx236("span", { className: "text-neutral-400", children: seqLabel })
               ] }),
-              /* @__PURE__ */ jsx235(
+              /* @__PURE__ */ jsx236(
                 "button",
                 {
                   type: "button",
@@ -96782,7 +96762,7 @@ function removeHotspot(manifest, sceneId, hotspotId, sequenceId) {
 }
 
 // src/components/panels/SlideshowPanel.tsx
-import { Fragment as Fragment65, jsx as jsx236, jsxs as jsxs187 } from "react/jsx-runtime";
+import { Fragment as Fragment65, jsx as jsx237, jsxs as jsxs188 } from "react/jsx-runtime";
 function safeParseManifest(html2) {
   try {
     return parseSlideshowManifest(html2) ?? { slides: [] };
@@ -97050,7 +97030,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSequenceId, applyManifest]
   );
-  return /* @__PURE__ */ jsxs187(
+  return /* @__PURE__ */ jsxs188(
     "div",
     {
       className: "flex flex-col h-full overflow-y-auto text-text-0",
@@ -97061,14 +97041,14 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
         handleUndo();
       },
       children: [
-        persistError && /* @__PURE__ */ jsxs187(
+        persistError && /* @__PURE__ */ jsxs188(
           "div",
           {
             role: "alert",
             className: "flex items-center justify-between gap-2 px-3 py-2 bg-danger/15 border-b border-red-500/40",
             children: [
-              /* @__PURE__ */ jsx236("span", { className: "text-[11px] text-danger-ink", children: "Changes not saved" }),
-              /* @__PURE__ */ jsx236(
+              /* @__PURE__ */ jsx237("span", { className: "text-[11px] text-danger-ink", children: "Changes not saved" }),
+              /* @__PURE__ */ jsx237(
                 "button",
                 {
                   type: "button",
@@ -97081,7 +97061,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             ]
           }
         ),
-        undoDepth > 0 && /* @__PURE__ */ jsx236("div", { className: "flex items-center justify-end px-3 py-1 border-b border-neutral-800/60", children: /* @__PURE__ */ jsxs187(
+        undoDepth > 0 && /* @__PURE__ */ jsx237("div", { className: "flex items-center justify-end px-3 py-1 border-b border-neutral-800/60", children: /* @__PURE__ */ jsxs188(
           "button",
           {
             type: "button",
@@ -97095,7 +97075,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs187(
+        /* @__PURE__ */ jsxs188(
           SectionHeader,
           {
             expanded: expandedSections.has("slides"),
@@ -97107,7 +97087,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             ]
           }
         ),
-        expandedSections.has("slides") && /* @__PURE__ */ jsx236("div", { className: "py-1", children: /* @__PURE__ */ jsx236(
+        expandedSections.has("slides") && /* @__PURE__ */ jsx237("div", { className: "py-1", children: /* @__PURE__ */ jsx237(
           SlideList,
           {
             scenes,
@@ -97121,7 +97101,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             onReorder: handleReorder
           }
         ) }),
-        /* @__PURE__ */ jsx236(
+        /* @__PURE__ */ jsx237(
           SectionHeader,
           {
             expanded: expandedSections.has("inspector"),
@@ -97129,7 +97109,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             children: "Slide Inspector"
           }
         ),
-        expandedSections.has("inspector") && /* @__PURE__ */ jsx236(Fragment65, { children: selectedSceneId ? /* @__PURE__ */ jsx236(
+        expandedSections.has("inspector") && /* @__PURE__ */ jsx237(Fragment65, { children: selectedSceneId ? /* @__PURE__ */ jsx237(
           SlideInspector,
           {
             sceneId: selectedSceneId,
@@ -97139,8 +97119,8 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             onMarkFragment: handleMarkFragment,
             onRemoveFragment: handleRemoveFragment
           }
-        ) : /* @__PURE__ */ jsx236("p", { className: "px-3 py-2 text-[11px] text-neutral-500 italic", children: "Select a scene above to inspect" }) }),
-        /* @__PURE__ */ jsxs187(
+        ) : /* @__PURE__ */ jsx237("p", { className: "px-3 py-2 text-[11px] text-neutral-500 italic", children: "Select a scene above to inspect" }) }),
+        /* @__PURE__ */ jsxs188(
           SectionHeader,
           {
             expanded: expandedSections.has("branches"),
@@ -97152,7 +97132,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             ]
           }
         ),
-        expandedSections.has("branches") && /* @__PURE__ */ jsx236(
+        expandedSections.has("branches") && /* @__PURE__ */ jsx237(
           BranchTree,
           {
             sequences,
@@ -97166,7 +97146,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             onSelectBranchSlide: handleSelectBranchSlide
           }
         ),
-        /* @__PURE__ */ jsx236(
+        /* @__PURE__ */ jsx237(
           SectionHeader,
           {
             expanded: expandedSections.has("hotspot"),
@@ -97174,7 +97154,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             children: "Hotspot Tool"
           }
         ),
-        expandedSections.has("hotspot") && /* @__PURE__ */ jsx236(
+        expandedSections.has("hotspot") && /* @__PURE__ */ jsx237(
           HotspotTool,
           {
             selectedSceneId,
@@ -97316,7 +97296,7 @@ function useEditVariablesInFile(deps) {
 
 // src/components/panels/VariablesDeclarationForm.tsx
 import { useState as useState157 } from "react";
-import { jsx as jsx237, jsxs as jsxs188 } from "react/jsx-runtime";
+import { jsx as jsx238, jsxs as jsxs189 } from "react/jsx-runtime";
 var VARIABLE_TYPES = [
   "string",
   "number",
@@ -97418,8 +97398,8 @@ function declarationFromDraft(draft) {
   }
 }
 function Field({ label, children }) {
-  return /* @__PURE__ */ jsxs188("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsx237("label", { className: "text-[9px] font-medium text-neutral-500", children: label }),
+  return /* @__PURE__ */ jsxs189("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx238("label", { className: "text-[9px] font-medium text-neutral-500", children: label }),
     children
   ] });
 }
@@ -97428,20 +97408,20 @@ function DefaultField({
   onChange
 }) {
   if (draft.type === "boolean") {
-    return /* @__PURE__ */ jsxs188(
+    return /* @__PURE__ */ jsxs189(
       "select",
       {
         value: draft.defaultRaw === "true" ? "true" : "false",
         onChange: (e) => onChange(e.target.value),
         className: VARIABLES_INPUT_CLASS,
         children: [
-          /* @__PURE__ */ jsx237("option", { value: "false", children: "false" }),
-          /* @__PURE__ */ jsx237("option", { value: "true", children: "true" })
+          /* @__PURE__ */ jsx238("option", { value: "false", children: "false" }),
+          /* @__PURE__ */ jsx238("option", { value: "true", children: "true" })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx237(
+  return /* @__PURE__ */ jsx238(
     "input",
     {
       type: "text",
@@ -97470,9 +97450,9 @@ function DeclarationForm({
     setError(null);
     onSubmit(result);
   };
-  return /* @__PURE__ */ jsxs188("div", { className: "space-y-2 rounded-lg border border-neutral-800 bg-neutral-900/60 p-2", children: [
-    /* @__PURE__ */ jsxs188("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsx237(Field, { label: "ID", children: /* @__PURE__ */ jsx237(
+  return /* @__PURE__ */ jsxs189("div", { className: "space-y-2 rounded-lg border border-neutral-800 bg-neutral-900/60 p-2", children: [
+    /* @__PURE__ */ jsxs189("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsx238(Field, { label: "ID", children: /* @__PURE__ */ jsx238(
         "input",
         {
           type: "text",
@@ -97483,7 +97463,7 @@ function DeclarationForm({
           className: `${VARIABLES_INPUT_CLASS} font-mono disabled:opacity-50`
         }
       ) }),
-      /* @__PURE__ */ jsx237(Field, { label: "Label", children: /* @__PURE__ */ jsx237(
+      /* @__PURE__ */ jsx238(Field, { label: "Label", children: /* @__PURE__ */ jsx238(
         "input",
         {
           type: "text",
@@ -97494,8 +97474,8 @@ function DeclarationForm({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs188("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsx237(Field, { label: "Type", children: /* @__PURE__ */ jsx237(
+    /* @__PURE__ */ jsxs189("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsx238(Field, { label: "Type", children: /* @__PURE__ */ jsx238(
         "select",
         {
           value: draft.type,
@@ -97504,12 +97484,12 @@ function DeclarationForm({
             if (type) set({ type });
           },
           className: VARIABLES_INPUT_CLASS,
-          children: VARIABLE_TYPES.map((t2) => /* @__PURE__ */ jsx237("option", { value: t2, children: t2 }, t2))
+          children: VARIABLE_TYPES.map((t2) => /* @__PURE__ */ jsx238("option", { value: t2, children: t2 }, t2))
         }
       ) }),
-      /* @__PURE__ */ jsx237(Field, { label: "Default", children: /* @__PURE__ */ jsx237(DefaultField, { draft, onChange: (defaultRaw) => set({ defaultRaw }) }) })
+      /* @__PURE__ */ jsx238(Field, { label: "Default", children: /* @__PURE__ */ jsx238(DefaultField, { draft, onChange: (defaultRaw) => set({ defaultRaw }) }) })
     ] }),
-    draft.type === "number" && /* @__PURE__ */ jsx237("div", { className: "grid grid-cols-3 gap-2", children: ["min", "max", "step"].map((key2) => /* @__PURE__ */ jsx237(Field, { label: key2, children: /* @__PURE__ */ jsx237(
+    draft.type === "number" && /* @__PURE__ */ jsx238("div", { className: "grid grid-cols-3 gap-2", children: ["min", "max", "step"].map((key2) => /* @__PURE__ */ jsx238(Field, { label: key2, children: /* @__PURE__ */ jsx238(
       "input",
       {
         type: "text",
@@ -97518,7 +97498,7 @@ function DeclarationForm({
         className: `${VARIABLES_INPUT_CLASS} tabular-nums`
       }
     ) }, key2)) }),
-    draft.type === "enum" && /* @__PURE__ */ jsx237(Field, { label: "Options (one per line, value:Label)", children: /* @__PURE__ */ jsx237(
+    draft.type === "enum" && /* @__PURE__ */ jsx238(Field, { label: "Options (one per line, value:Label)", children: /* @__PURE__ */ jsx238(
       "textarea",
       {
         value: draft.optionsRaw,
@@ -97527,7 +97507,7 @@ function DeclarationForm({
         className: `${VARIABLES_INPUT_CLASS} resize-y font-mono`
       }
     ) }),
-    /* @__PURE__ */ jsx237(Field, { label: "Description (optional)", children: /* @__PURE__ */ jsx237(
+    /* @__PURE__ */ jsx238(Field, { label: "Description (optional)", children: /* @__PURE__ */ jsx238(
       "input",
       {
         type: "text",
@@ -97536,9 +97516,9 @@ function DeclarationForm({
         className: VARIABLES_INPUT_CLASS
       }
     ) }),
-    error && /* @__PURE__ */ jsx237("p", { className: "text-[10px] text-danger-ink", children: error }),
-    /* @__PURE__ */ jsxs188("div", { className: "flex items-center justify-end gap-2 pt-1", children: [
-      /* @__PURE__ */ jsx237(
+    error && /* @__PURE__ */ jsx238("p", { className: "text-[10px] text-danger-ink", children: error }),
+    /* @__PURE__ */ jsxs189("div", { className: "flex items-center justify-end gap-2 pt-1", children: [
+      /* @__PURE__ */ jsx238(
         "button",
         {
           type: "button",
@@ -97547,7 +97527,7 @@ function DeclarationForm({
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ jsx237(
+      /* @__PURE__ */ jsx238(
         "button",
         {
           type: "button",
@@ -97561,14 +97541,14 @@ function DeclarationForm({
 }
 
 // src/components/panels/VariablesRowAction.tsx
-import { jsx as jsx238 } from "react/jsx-runtime";
+import { jsx as jsx239 } from "react/jsx-runtime";
 function RowAction({
   label,
   title,
   danger,
   onClick
 }) {
-  return /* @__PURE__ */ jsx238(
+  return /* @__PURE__ */ jsx239(
     "button",
     {
       type: "button",
@@ -97581,7 +97561,7 @@ function RowAction({
 }
 
 // src/components/panels/VariablesOtherCompositions.tsx
-import { jsx as jsx239, jsxs as jsxs189 } from "react/jsx-runtime";
+import { jsx as jsx240, jsxs as jsxs190 } from "react/jsx-runtime";
 function CompositionSection({
   group,
   editingKey,
@@ -97589,8 +97569,8 @@ function CompositionSection({
   onSave,
   onRemove
 }) {
-  return /* @__PURE__ */ jsxs189("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ jsx239(
+  return /* @__PURE__ */ jsxs190("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsx240(
       "p",
       {
         className: "truncate text-[9px] font-medium uppercase tracking-wider text-neutral-500",
@@ -97601,12 +97581,12 @@ function CompositionSection({
     group.variables.map((decl) => {
       const key2 = `${group.path}::${decl.id}`;
       const editing = editingKey === key2;
-      return /* @__PURE__ */ jsxs189("div", { className: "space-y-1.5 rounded-lg border border-neutral-800/70 p-2", children: [
-        /* @__PURE__ */ jsxs189("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx239("span", { className: "truncate text-[10px] font-medium text-neutral-300", children: decl.label }),
-          /* @__PURE__ */ jsx239("span", { className: "rounded-sm bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500", children: decl.type }),
-          /* @__PURE__ */ jsxs189("span", { className: "ml-auto flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx239(
+      return /* @__PURE__ */ jsxs190("div", { className: "space-y-1.5 rounded-lg border border-neutral-800/70 p-2", children: [
+        /* @__PURE__ */ jsxs190("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx240("span", { className: "truncate text-[10px] font-medium text-neutral-300", children: decl.label }),
+          /* @__PURE__ */ jsx240("span", { className: "rounded-sm bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500", children: decl.type }),
+          /* @__PURE__ */ jsxs190("span", { className: "ml-auto flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx240(
               RowAction,
               {
                 label: "Edit",
@@ -97614,7 +97594,7 @@ function CompositionSection({
                 onClick: () => onToggleEdit(editing ? null : key2)
               }
             ),
-            /* @__PURE__ */ jsx239(
+            /* @__PURE__ */ jsx240(
               RowAction,
               {
                 label: "\u2715",
@@ -97625,8 +97605,8 @@ function CompositionSection({
             )
           ] })
         ] }),
-        decl.description && /* @__PURE__ */ jsx239("p", { className: "text-[9px] text-neutral-500", children: decl.description }),
-        editing && /* @__PURE__ */ jsx239(
+        decl.description && /* @__PURE__ */ jsx240("p", { className: "text-[9px] text-neutral-500", children: decl.description }),
+        editing && /* @__PURE__ */ jsx240(
           DeclarationForm,
           {
             initial: draftFromDeclaration(decl),
@@ -97684,9 +97664,9 @@ function VariablesOtherCompositions({
     [editInFile]
   );
   if (groups.length === 0) return null;
-  return /* @__PURE__ */ jsxs189("div", { className: "space-y-3 border-t border-neutral-800 pt-3", children: [
-    /* @__PURE__ */ jsx239("p", { className: "text-[9px] font-medium uppercase tracking-wider text-neutral-600", children: "Other compositions" }),
-    groups.map((group) => /* @__PURE__ */ jsx239(
+  return /* @__PURE__ */ jsxs190("div", { className: "space-y-3 border-t border-neutral-800 pt-3", children: [
+    /* @__PURE__ */ jsx240("p", { className: "text-[9px] font-medium uppercase tracking-wider text-neutral-600", children: "Other compositions" }),
+    groups.map((group) => /* @__PURE__ */ jsx240(
       CompositionSection,
       {
         group,
@@ -97702,7 +97682,7 @@ function VariablesOtherCompositions({
 
 // src/components/panels/VariablesPanel.tsx
 import { isScalarVariableValue as isScalar } from "@hyperframes/core/variables";
-import { jsx as jsx240, jsxs as jsxs190 } from "react/jsx-runtime";
+import { jsx as jsx241, jsxs as jsxs191 } from "react/jsx-runtime";
 function shellSingleQuote(value) {
   return `'${value.replace(/'/g, `'\\''`)}'`;
 }
@@ -97718,7 +97698,7 @@ function formatIssue(issue) {
 }
 function ValidationStrip({ issues }) {
   if (issues.length === 0) return null;
-  return /* @__PURE__ */ jsx240("div", { className: "space-y-1 rounded-lg border border-danger/40 bg-danger/15 p-2", children: issues.map((issue) => /* @__PURE__ */ jsx240("p", { className: "text-[10px] text-danger-ink", children: formatIssue(issue) }, `${issue.kind}:${issue.variableId}`)) });
+  return /* @__PURE__ */ jsx241("div", { className: "space-y-1 rounded-lg border border-danger/40 bg-danger/15 p-2", children: issues.map((issue) => /* @__PURE__ */ jsx241("p", { className: "text-[10px] text-danger-ink", children: formatIssue(issue) }, `${issue.kind}:${issue.variableId}`)) });
 }
 function VariableRow({
   decl,
@@ -97732,11 +97712,11 @@ function VariableRow({
   onSaveEdit,
   onRemove
 }) {
-  return /* @__PURE__ */ jsxs190("div", { className: "space-y-1.5 rounded-lg border border-neutral-800/70 p-2", children: [
-    /* @__PURE__ */ jsxs190("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx240("span", { className: "truncate text-[10px] font-medium text-neutral-300", children: decl.label }),
-      /* @__PURE__ */ jsx240("span", { className: "rounded-sm bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500", children: decl.type }),
-      unused && /* @__PURE__ */ jsx240(
+  return /* @__PURE__ */ jsxs191("div", { className: "space-y-1.5 rounded-lg border border-neutral-800/70 p-2", children: [
+    /* @__PURE__ */ jsxs191("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx241("span", { className: "truncate text-[10px] font-medium text-neutral-300", children: decl.label }),
+      /* @__PURE__ */ jsx241("span", { className: "rounded-sm bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500", children: decl.type }),
+      unused && /* @__PURE__ */ jsx241(
         "span",
         {
           className: "rounded-sm bg-amber-500/15 px-1 py-px text-[8px] text-warning-ink",
@@ -97744,9 +97724,9 @@ function VariableRow({
           children: "unused"
         }
       ),
-      overridden && /* @__PURE__ */ jsx240("span", { className: "h-1.5 w-1.5 rounded-full bg-studio-accent" }),
-      /* @__PURE__ */ jsxs190("span", { className: "ml-auto flex items-center gap-1", children: [
-        overridden && isScalar(value) && /* @__PURE__ */ jsx240(
+      overridden && /* @__PURE__ */ jsx241("span", { className: "h-1.5 w-1.5 rounded-full bg-studio-accent" }),
+      /* @__PURE__ */ jsxs191("span", { className: "ml-auto flex items-center gap-1", children: [
+        overridden && isScalar(value) && /* @__PURE__ */ jsx241(
           RowAction,
           {
             label: "Set default",
@@ -97754,12 +97734,12 @@ function VariableRow({
             onClick: () => onSetDefault(value)
           }
         ),
-        /* @__PURE__ */ jsx240(RowAction, { label: "Edit", title: "Edit declaration", onClick: onToggleEdit }),
-        /* @__PURE__ */ jsx240(RowAction, { label: "\u2715", title: "Remove declaration", danger: true, onClick: onRemove })
+        /* @__PURE__ */ jsx241(RowAction, { label: "Edit", title: "Edit declaration", onClick: onToggleEdit }),
+        /* @__PURE__ */ jsx241(RowAction, { label: "\u2715", title: "Remove declaration", danger: true, onClick: onRemove })
       ] })
     ] }),
-    decl.description && /* @__PURE__ */ jsx240("p", { className: "text-[9px] text-neutral-500", children: decl.description }),
-    editing ? /* @__PURE__ */ jsx240(
+    decl.description && /* @__PURE__ */ jsx241("p", { className: "text-[9px] text-neutral-500", children: decl.description }),
+    editing ? /* @__PURE__ */ jsx241(
       DeclarationForm,
       {
         initial: draftFromDeclaration(decl),
@@ -97767,7 +97747,7 @@ function VariableRow({
         onSubmit: (edited) => onSaveEdit(mergeDeclarationEdit(decl, edited)),
         onCancel: onToggleEdit
       }
-    ) : /* @__PURE__ */ jsx240(PreviewValueControl, { decl, value, onCommit: onCommitPreview })
+    ) : /* @__PURE__ */ jsx241(PreviewValueControl, { decl, value, onCommit: onCommitPreview })
   ] });
 }
 function UndeclaredReads({
@@ -97775,11 +97755,11 @@ function UndeclaredReads({
   onDeclare
 }) {
   if (!usage || usage.undeclaredReads.length === 0) return null;
-  return /* @__PURE__ */ jsxs190("div", { className: "space-y-1 rounded-lg border border-neutral-800/70 bg-neutral-900/40 p-2", children: [
-    /* @__PURE__ */ jsx240("p", { className: "text-[9px] font-medium uppercase tracking-wider text-neutral-500", children: "Read by scripts, not declared" }),
-    usage.undeclaredReads.map((id) => /* @__PURE__ */ jsxs190("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx240("code", { className: "font-mono text-[10px] text-neutral-400", children: id }),
-      /* @__PURE__ */ jsx240(
+  return /* @__PURE__ */ jsxs191("div", { className: "space-y-1 rounded-lg border border-neutral-800/70 bg-neutral-900/40 p-2", children: [
+    /* @__PURE__ */ jsx241("p", { className: "text-[9px] font-medium uppercase tracking-wider text-neutral-500", children: "Read by scripts, not declared" }),
+    usage.undeclaredReads.map((id) => /* @__PURE__ */ jsxs191("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx241("code", { className: "font-mono text-[10px] text-neutral-400", children: id }),
+      /* @__PURE__ */ jsx241(
         RowAction,
         {
           label: "Declare",
@@ -97795,10 +97775,10 @@ function PreviewModeHeader({
   onReset
 }) {
   const hasOverrides = overrideCount > 0;
-  return /* @__PURE__ */ jsxs190("div", { className: "flex items-center justify-between border-b border-neutral-800 px-3 py-2", children: [
-    /* @__PURE__ */ jsxs190("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx240("span", { className: "text-[11px] font-semibold text-neutral-200", children: "Variables" }),
-      /* @__PURE__ */ jsx240(
+  return /* @__PURE__ */ jsxs191("div", { className: "flex items-center justify-between border-b border-neutral-800 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs191("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx241("span", { className: "text-[11px] font-semibold text-neutral-200", children: "Variables" }),
+      /* @__PURE__ */ jsx241(
         "span",
         {
           className: `rounded-full px-2 py-0.5 text-[9px] font-medium ${hasOverrides ? "bg-studio-accent/20 text-accent-ink" : "bg-neutral-800 text-neutral-500"}`,
@@ -97806,7 +97786,7 @@ function PreviewModeHeader({
         }
       )
     ] }),
-    hasOverrides && /* @__PURE__ */ jsx240(
+    hasOverrides && /* @__PURE__ */ jsx241(
       "button",
       {
         type: "button",
@@ -97824,11 +97804,11 @@ function HandoffFooter({
 }) {
   const json = JSON.stringify(effectiveValues);
   const command = `npx hyperframes render ${shellSingleQuote(compPath)} --variables ${shellSingleQuote(json)}`;
-  return /* @__PURE__ */ jsxs190("div", { className: "space-y-1.5 rounded-lg border border-neutral-800/70 bg-neutral-900/40 p-2", children: [
-    /* @__PURE__ */ jsx240("p", { className: "text-[9px] font-medium uppercase tracking-wider text-neutral-500", children: "Use this template" }),
-    /* @__PURE__ */ jsx240("code", { className: "block truncate font-mono text-[9px] text-neutral-500", title: command, children: command }),
-    /* @__PURE__ */ jsxs190("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx240(
+  return /* @__PURE__ */ jsxs191("div", { className: "space-y-1.5 rounded-lg border border-neutral-800/70 bg-neutral-900/40 p-2", children: [
+    /* @__PURE__ */ jsx241("p", { className: "text-[9px] font-medium uppercase tracking-wider text-neutral-500", children: "Use this template" }),
+    /* @__PURE__ */ jsx241("code", { className: "block truncate font-mono text-[9px] text-neutral-500", title: command, children: command }),
+    /* @__PURE__ */ jsxs191("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx241(
         RowAction,
         {
           label: "Copy render command",
@@ -97836,7 +97816,7 @@ function HandoffFooter({
           onClick: () => onCopy(command, "Render command")
         }
       ),
-      /* @__PURE__ */ jsx240(
+      /* @__PURE__ */ jsx241(
         RowAction,
         {
           label: "Copy values JSON",
@@ -97847,15 +97827,15 @@ function HandoffFooter({
     ] })
   ] });
 }
-var EMPTY_STATE = /* @__PURE__ */ jsxs190("p", { className: "text-[10px] leading-relaxed text-neutral-500", children: [
+var EMPTY_STATE = /* @__PURE__ */ jsxs191("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__ */ jsx240("code", { className: "font-mono", children: "data-composition-variables" }),
+  /* @__PURE__ */ jsx241("code", { className: "font-mono", children: "data-composition-variables" }),
   "), read them with",
   " ",
-  /* @__PURE__ */ jsx240("code", { className: "font-mono", children: "getVariables()" }),
+  /* @__PURE__ */ jsx241("code", { className: "font-mono", children: "getVariables()" }),
   ", and pass values at render time with",
   " ",
-  /* @__PURE__ */ jsx240("code", { className: "font-mono", children: "--variables" }),
+  /* @__PURE__ */ jsx241("code", { className: "font-mono", children: "--variables" }),
   "."
 ] });
 var VariablesPanel = memo59(function VariablesPanel2({
@@ -98039,18 +98019,18 @@ var VariablesPanel = memo59(function VariablesPanel2({
   );
   const bindableSelection = domEditSelection?.hfId && domEditSelection.sourceFile === (activeCompPath ?? "index.html") ? domEditSelection : null;
   if (!sdkSession) {
-    return /* @__PURE__ */ jsx240("div", { className: "flex h-full items-center justify-center px-6 text-center", children: /* @__PURE__ */ jsx240("p", { className: "text-xs text-neutral-500", children: "Open a composition to manage its variables." }) });
+    return /* @__PURE__ */ jsx241("div", { className: "flex h-full items-center justify-center px-6 text-center", children: /* @__PURE__ */ jsx241("p", { className: "text-xs text-neutral-500", children: "Open a composition to manage its variables." }) });
   }
-  return /* @__PURE__ */ jsxs190("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ jsx240(
+  return /* @__PURE__ */ jsxs191("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx241(
       PreviewModeHeader,
       {
         overrideCount: previewValues ? Object.keys(previewValues).length : 0,
         onReset: resetPreview
       }
     ),
-    /* @__PURE__ */ jsxs190("div", { className: "flex-1 space-y-3 overflow-y-auto p-3", children: [
-      bindableSelection && /* @__PURE__ */ jsx240(
+    /* @__PURE__ */ jsxs191("div", { className: "flex-1 space-y-3 overflow-y-auto p-3", children: [
+      bindableSelection && /* @__PURE__ */ jsx241(
         VariablesBindElement,
         {
           selection: bindableSelection,
@@ -98059,9 +98039,9 @@ var VariablesPanel = memo59(function VariablesPanel2({
         },
         bindableSelection.hfId
       ),
-      /* @__PURE__ */ jsx240(ValidationStrip, { issues }),
+      /* @__PURE__ */ jsx241(ValidationStrip, { issues }),
       declarations.length === 0 && !addOpen && EMPTY_STATE,
-      declarations.map((decl) => /* @__PURE__ */ jsx240(
+      declarations.map((decl) => /* @__PURE__ */ jsx241(
         VariableRow,
         {
           decl,
@@ -98077,15 +98057,15 @@ var VariablesPanel = memo59(function VariablesPanel2({
         },
         decl.id
       )),
-      /* @__PURE__ */ jsx240(
+      /* @__PURE__ */ jsx241(
         UndeclaredReads,
         {
           usage,
           onDeclare: (id) => handleAdd({ id, type: "string", label: id, default: "" })
         }
       ),
-      usage?.scanIncomplete && /* @__PURE__ */ jsx240("p", { className: "text-[9px] text-neutral-600", children: "Scripts access variables dynamically \u2014 usage info may be incomplete." }),
-      declarations.length > 0 && /* @__PURE__ */ jsx240(
+      usage?.scanIncomplete && /* @__PURE__ */ jsx241("p", { className: "text-[9px] text-neutral-600", children: "Scripts access variables dynamically \u2014 usage info may be incomplete." }),
+      declarations.length > 0 && /* @__PURE__ */ jsx241(
         HandoffFooter,
         {
           effectiveValues,
@@ -98093,7 +98073,7 @@ var VariablesPanel = memo59(function VariablesPanel2({
           onCopy: copyToClipboard
         }
       ),
-      addOpen ? /* @__PURE__ */ jsx240(
+      addOpen ? /* @__PURE__ */ jsx241(
         DeclarationForm,
         {
           initial: EMPTY_DRAFT,
@@ -98101,7 +98081,7 @@ var VariablesPanel = memo59(function VariablesPanel2({
           onSubmit: handleAdd,
           onCancel: () => setAddOpen(false)
         }
-      ) : /* @__PURE__ */ jsx240(
+      ) : /* @__PURE__ */ jsx241(
         "button",
         {
           type: "button",
@@ -98110,7 +98090,7 @@ var VariablesPanel = memo59(function VariablesPanel2({
           children: "+ Add variable"
         }
       ),
-      /* @__PURE__ */ jsx240(
+      /* @__PURE__ */ jsx241(
         VariablesOtherCompositions,
         {
           compositionPaths: compositions,
@@ -98243,7 +98223,7 @@ function useSlideshowTabState(params) {
 
 // src/components/DesignPanelPromoteProvider.tsx
 import { useCallback as useCallback185 } from "react";
-import { jsx as jsx241 } from "react/jsx-runtime";
+import { jsx as jsx242 } from "react/jsx-runtime";
 function DesignPanelPromoteProvider({
   selection,
   projectId,
@@ -98273,7 +98253,7 @@ function DesignPanelPromoteProvider({
     (error) => showToast(getStudioSaveErrorMessage(error), "error"),
     [showToast]
   );
-  return /* @__PURE__ */ jsx241(
+  return /* @__PURE__ */ jsx242(
     VariablePromoteProvider,
     {
       session: handle.session,
@@ -98578,7 +98558,7 @@ function useApplyColorGradingScope(recordEdit, reloadPreview) {
 }
 
 // src/components/StudioRightPanels.tsx
-import { Fragment as Fragment66, jsx as jsx242, jsxs as jsxs191 } from "react/jsx-runtime";
+import { Fragment as Fragment66, jsx as jsx243, jsxs as jsxs192 } from "react/jsx-runtime";
 var seekToTime = (t2) => usePlayerStore.getState().requestSeek(t2);
 var StudioRightPanels = memo60(function StudioRightPanels2({
   activeBlockParams,
@@ -98707,7 +98687,7 @@ var StudioRightPanels = memo60(function StudioRightPanels2({
     (animId, duration) => handleGsapConvertToKeyframes(animId, void 0, duration),
     [handleGsapConvertToKeyframes]
   );
-  const propertyPanel = /* @__PURE__ */ jsx242(
+  const propertyPanel = /* @__PURE__ */ jsx243(
     DesignPanelPromoteProvider,
     {
       selection: domEditGroupSelections.length > 1 ? null : domEditSelection,
@@ -98719,7 +98699,7 @@ var StudioRightPanels = memo60(function StudioRightPanels2({
       recordEdit,
       reloadPreview,
       forceReloadSharedSdkSession: forceReloadSdkSession,
-      children: /* @__PURE__ */ jsx242(
+      children: /* @__PURE__ */ jsx243(
         PropertyPanel,
         {
           projectId,
@@ -98790,9 +98770,9 @@ var StudioRightPanels = memo60(function StudioRightPanels2({
   );
   let designBody = propertyPanel;
   if (captionEditMode) {
-    designBody = /* @__PURE__ */ jsx242(CaptionPropertyPanel, { iframeRef: previewIframeRef });
+    designBody = /* @__PURE__ */ jsx243(CaptionPropertyPanel, { iframeRef: previewIframeRef });
   } else if (activeBlockParams) {
-    designBody = /* @__PURE__ */ jsx242(
+    designBody = /* @__PURE__ */ jsx243(
       BlockParamsPanel,
       {
         blockName: activeBlockParams.blockName,
@@ -98804,18 +98784,18 @@ var StudioRightPanels = memo60(function StudioRightPanels2({
       }
     );
   }
-  return /* @__PURE__ */ jsxs191(Fragment66, { children: [
-    /* @__PURE__ */ jsx242(Dock.Panel, { id: "design", children: designBody }),
-    /* @__PURE__ */ jsx242(Dock.Panel, { id: "layers", children: /* @__PURE__ */ jsx242(LayersPanel, {}) }),
-    /* @__PURE__ */ jsx242(
+  return /* @__PURE__ */ jsxs192(Fragment66, { children: [
+    /* @__PURE__ */ jsx243(Dock.Panel, { id: "design", children: designBody }),
+    /* @__PURE__ */ jsx243(Dock.Panel, { id: "layers", children: /* @__PURE__ */ jsx243(LayersPanel, {}) }),
+    /* @__PURE__ */ jsx243(
       Dock.Panel,
       {
         id: "renders",
         title: renderJobs.length > 0 ? `Renders (${renderJobs.length})` : void 0,
-        children: /* @__PURE__ */ jsx242(RenderQueuePanel, {})
+        children: /* @__PURE__ */ jsx243(RenderQueuePanel, {})
       }
     ),
-    /* @__PURE__ */ jsx242(Dock.Panel, { id: "variables", children: /* @__PURE__ */ jsx242(
+    /* @__PURE__ */ jsx243(Dock.Panel, { id: "variables", children: /* @__PURE__ */ jsx243(
       VariablesPanel,
       {
         sdkSession,
@@ -98824,7 +98804,7 @@ var StudioRightPanels = memo60(function StudioRightPanels2({
         recordEdit
       }
     ) }),
-    /* @__PURE__ */ jsx242(Dock.Panel, { id: "slideshow", children: /* @__PURE__ */ jsx242(
+    /* @__PURE__ */ jsx243(Dock.Panel, { id: "slideshow", children: /* @__PURE__ */ jsx243(
       SlideshowPanel,
       {
         scenes: slideshowScenes,
@@ -98836,14 +98816,14 @@ var StudioRightPanels = memo60(function StudioRightPanels2({
 });
 
 // src/hooks/useStudioSidePanels.tsx
-import { Fragment as Fragment67, jsx as jsx243, jsxs as jsxs192 } from "react/jsx-runtime";
+import { Fragment as Fragment67, jsx as jsx244, jsxs as jsxs193 } from "react/jsx-runtime";
 function useStudioSidePanels(left, right, projectId) {
   const stableLeft = useStableHandlers(left, projectId);
   const stableRight = useStableHandlers(right, projectId);
   return useMemo88(
-    () => /* @__PURE__ */ jsxs192(Fragment67, { children: [
-      /* @__PURE__ */ jsx243(StudioLeftPanels, { ...stableLeft }),
-      /* @__PURE__ */ jsx243(StudioRightPanels, { ...stableRight })
+    () => /* @__PURE__ */ jsxs193(Fragment67, { children: [
+      /* @__PURE__ */ jsx244(StudioLeftPanels, { ...stableLeft }),
+      /* @__PURE__ */ jsx244(StudioRightPanels, { ...stableRight })
     ] }),
     [stableLeft, stableRight]
   );
@@ -98882,9 +98862,9 @@ function useKeyframeKeyboard({ enabled, onAddKeyframe }) {
 }
 
 // src/components/icons/AudioMetersIcon.tsx
-import { jsx as jsx244 } from "react/jsx-runtime";
+import { jsx as jsx245 } from "react/jsx-runtime";
 function AudioMetersIcon({ size = 16 }) {
-  return /* @__PURE__ */ jsx244(
+  return /* @__PURE__ */ jsx245(
     "svg",
     {
       width: size,
@@ -98895,15 +98875,15 @@ function AudioMetersIcon({ size = 16 }) {
       strokeWidth: 1.5,
       strokeLinecap: "round",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx244("path", { d: "M2.5 13h2m-2-3h2M7 13h2m-2-3h2m-2-3h2m-2-3h2M11.5 13h2m-2-3h2m-2-3h2" })
+      children: /* @__PURE__ */ jsx245("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 jsx245, jsxs as jsxs193 } from "react/jsx-runtime";
+import { jsx as jsx246, jsxs as jsxs194 } from "react/jsx-runtime";
 function RippleEditIcon({ size = 16 }) {
-  return /* @__PURE__ */ jsxs193(
+  return /* @__PURE__ */ jsxs194(
     "svg",
     {
       width: size,
@@ -98916,20 +98896,20 @@ function RippleEditIcon({ size = 16 }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx245("rect", { x: "1.5", y: "8", width: "4", height: "5", rx: "0.5" }),
-        /* @__PURE__ */ jsx245("rect", { x: "10.5", y: "8", width: "4", height: "5", rx: "0.5" }),
-        /* @__PURE__ */ jsx245("path", { d: "M13 4H6m2-2L6 4l2 2" })
+        /* @__PURE__ */ jsx246("rect", { x: "1.5", y: "8", width: "4", height: "5", rx: "0.5" }),
+        /* @__PURE__ */ jsx246("rect", { x: "10.5", y: "8", width: "4", height: "5", rx: "0.5" }),
+        /* @__PURE__ */ jsx246("path", { d: "M13 4H6m2-2L6 4l2 2" })
       ]
     }
   );
 }
 
 // src/components/TimelineHistoryButtons.tsx
-import { Fragment as Fragment68, jsx as jsx246, jsxs as jsxs194 } from "react/jsx-runtime";
+import { Fragment as Fragment68, jsx as jsx247, jsxs as jsxs195 } from "react/jsx-runtime";
 function HistoryButton({ action, can, label, onClick }) {
   const Icon = action === "undo" ? RotateCcw : RotateCw;
   const enabled = Boolean(onClick) && can;
-  return /* @__PURE__ */ jsx246(Tooltip, { label: historyTooltipLabel(action, label), children: /* @__PURE__ */ jsx246(
+  return /* @__PURE__ */ jsx247(Tooltip, { label: historyTooltipLabel(action, label), children: /* @__PURE__ */ jsx247(
     "button",
     {
       type: "button",
@@ -98940,7 +98920,7 @@ function HistoryButton({ action, can, label, onClick }) {
         trackStudioEvent("toolbar_action", { action });
         void onClick?.();
       },
-      children: /* @__PURE__ */ jsx246(Icon, { size: 16 })
+      children: /* @__PURE__ */ jsx247(Icon, { size: 16 })
     }
   ) });
 }
@@ -98948,8 +98928,8 @@ function TimelineHistoryButtons(props) {
   const shell = useStudioShellContextOptional();
   const onUndo = props.onUndo ?? shell?.handleUndo;
   const onRedo = props.onRedo ?? shell?.handleRedo;
-  return /* @__PURE__ */ jsxs194(Fragment68, { children: [
-    /* @__PURE__ */ jsx246(
+  return /* @__PURE__ */ jsxs195(Fragment68, { children: [
+    /* @__PURE__ */ jsx247(
       HistoryButton,
       {
         action: "undo",
@@ -98958,7 +98938,7 @@ function TimelineHistoryButtons(props) {
         onClick: onUndo
       }
     ),
-    /* @__PURE__ */ jsx246(
+    /* @__PURE__ */ jsx247(
       HistoryButton,
       {
         action: "redo",
@@ -98972,9 +98952,9 @@ function TimelineHistoryButtons(props) {
 
 // src/components/TimelineToolPicker.tsx
 import { ArrowLineLeft, ArrowLineRight, CaretDown } from "@phosphor-icons/react";
-import { jsx as jsx247, jsxs as jsxs195 } from "react/jsx-runtime";
+import { jsx as jsx248, jsxs as jsxs196 } from "react/jsx-runtime";
 function SelectIcon() {
-  return /* @__PURE__ */ jsx247("svg", { width: "16", height: "16", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx247("path", { d: "M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" }) });
+  return /* @__PURE__ */ jsx248("svg", { width: "16", height: "16", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx248("path", { d: "M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" }) });
 }
 function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
   const activeTool = usePlayerStore((s) => s.activeTool);
@@ -98983,14 +98963,14 @@ function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
     {
       label: "Select",
       shortcut: "V",
-      icon: /* @__PURE__ */ jsx247(SelectIcon, {}),
+      icon: /* @__PURE__ */ jsx248(SelectIcon, {}),
       active: activeTool === "select",
       run: () => store().setActiveTool("select")
     },
     {
       label: "Split",
       shortcut: "B",
-      icon: /* @__PURE__ */ jsx247(Scissors, { size: 16 }),
+      icon: /* @__PURE__ */ jsx248(Scissors, { size: 16 }),
       active: activeTool === "razor",
       run: () => store().setActiveTool("razor")
     }
@@ -99000,25 +98980,25 @@ function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
       {
         label: "Select leftward",
         shortcut: "[",
-        icon: /* @__PURE__ */ jsx247(ArrowLineLeft, { size: 16, "aria-hidden": "true" }),
+        icon: /* @__PURE__ */ jsx248(ArrowLineLeft, { size: 16, "aria-hidden": "true" }),
         active: false,
         run: () => store().selectLeftward()
       },
       {
         label: "Select rightward",
         shortcut: "]",
-        icon: /* @__PURE__ */ jsx247(ArrowLineRight, { size: 16, "aria-hidden": "true" }),
+        icon: /* @__PURE__ */ jsx248(ArrowLineRight, { size: 16, "aria-hidden": "true" }),
         active: false,
         run: () => store().selectRightward()
       }
     );
   }
   const current = rows.find((row) => row.active) ?? rows[0];
-  return /* @__PURE__ */ jsx247(
+  return /* @__PURE__ */ jsx248(
     Menu,
     {
       "aria-label": "Timeline tools",
-      trigger: /* @__PURE__ */ jsxs195(
+      trigger: /* @__PURE__ */ jsxs196(
         "button",
         {
           type: "button",
@@ -99026,18 +99006,18 @@ function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
           className: cn(flatIdle, "gap-0.5"),
           children: [
             current.icon,
-            /* @__PURE__ */ jsx247(CaretDown, { size: 10, weight: "bold", "aria-hidden": "true" })
+            /* @__PURE__ */ jsx248(CaretDown, { size: 10, weight: "bold", "aria-hidden": "true" })
           ]
         }
       ),
-      children: rows.map((row) => /* @__PURE__ */ jsx247(
+      children: rows.map((row) => /* @__PURE__ */ jsx248(
         MenuItem,
         {
           shortcut: row.shortcut,
           onClick: row.run,
           "data-active": row.active || void 0,
           className: row.active ? "bg-press text-text-0" : void 0,
-          children: /* @__PURE__ */ jsxs195("span", { className: "flex items-center gap-2", children: [
+          children: /* @__PURE__ */ jsxs196("span", { className: "flex items-center gap-2", children: [
             row.icon,
             row.label
           ] })
@@ -99052,14 +99032,14 @@ function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
 import { useCallback as useCallback190, useState as useState160 } from "react";
 import { createPortal as createPortal15 } from "react-dom";
 import { LinkSimple } from "@phosphor-icons/react";
-import { Fragment as Fragment69, jsx as jsx248, jsxs as jsxs196 } from "react/jsx-runtime";
+import { Fragment as Fragment69, jsx as jsx249, jsxs as jsxs197 } from "react/jsx-runtime";
 function SyncIndicatorMenu({ x, y, onClose }) {
   const menuRef = useContextMenuDismiss(onClose);
   useMenuKeyboardNav(menuRef);
   const visible = useLinkedClipPreferences((s) => s.syncIndicatorsVisible);
   const setVisible = useLinkedClipPreferences((s) => s.setSyncIndicatorsVisible);
   return createPortal15(
-    /* @__PURE__ */ jsx248(
+    /* @__PURE__ */ jsx249(
       "div",
       {
         ref: menuRef,
@@ -99067,7 +99047,7 @@ function SyncIndicatorMenu({ x, y, onClose }) {
         "aria-label": "Linked clips",
         className: `${menuClasses.panel} fixed z-200 min-w-[200px]`,
         style: { left: x, top: y },
-        children: /* @__PURE__ */ jsxs196(
+        children: /* @__PURE__ */ jsxs197(
           "button",
           {
             type: "button",
@@ -99079,7 +99059,7 @@ function SyncIndicatorMenu({ x, y, onClose }) {
               onClose();
             },
             children: [
-              /* @__PURE__ */ jsx248("span", { className: "w-3 text-studio-accent", children: visible ? "\u2713" : "" }),
+              /* @__PURE__ */ jsx249("span", { className: "w-3 text-studio-accent", children: visible ? "\u2713" : "" }),
               "Show out-of-sync indicators"
             ]
           }
@@ -99094,12 +99074,12 @@ function LinkedSelectionToggle() {
   const setLinkedSelection = useLinkedClipPreferences((s) => s.setLinkedSelection);
   const [menuAt, setMenuAt] = useState160(null);
   const closeMenu = useCallback190(() => setMenuAt(null), []);
-  return /* @__PURE__ */ jsxs196(Fragment69, { children: [
-    /* @__PURE__ */ jsx248(
+  return /* @__PURE__ */ jsxs197(Fragment69, { children: [
+    /* @__PURE__ */ jsx249(
       Tooltip,
       {
         label: linkedSelection ? "Linked Selection on \u2014 a click selects both halves (\u2325-click for one)" : "Linked Selection off \u2014 a click selects one clip",
-        children: /* @__PURE__ */ jsx248(
+        children: /* @__PURE__ */ jsx249(
           "button",
           {
             type: "button",
@@ -99111,17 +99091,17 @@ function LinkedSelectionToggle() {
             "aria-label": "Linked Selection",
             "aria-pressed": linkedSelection,
             className: linkedSelection ? flatActive : flatIdle,
-            children: /* @__PURE__ */ jsx248(LinkSimple, { size: 16, weight: "bold", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx249(LinkSimple, { size: 16, weight: "bold", "aria-hidden": "true" })
           }
         )
       }
     ),
-    menuAt && /* @__PURE__ */ jsx248(SyncIndicatorMenu, { x: menuAt.x, y: menuAt.y, onClose: closeMenu })
+    menuAt && /* @__PURE__ */ jsx249(SyncIndicatorMenu, { x: menuAt.x, y: menuAt.y, onClose: closeMenu })
   ] });
 }
 
 // src/components/TimelineToolbar.tsx
-import { Fragment as Fragment70, jsx as jsx249, jsxs as jsxs197 } from "react/jsx-runtime";
+import { Fragment as Fragment70, jsx as jsx250, jsxs as jsxs198 } from "react/jsx-runtime";
 var NO_KEYFRAME_TOGGLE = {
   state: "none",
   isMotionPath: false,
@@ -99234,13 +99214,13 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, []);
-  return /* @__PURE__ */ jsx249("div", { className: "border-b border-neutral-800/60", children: /* @__PURE__ */ jsxs197("div", { className: "flex items-center justify-between px-2 py-0.5", children: [
-    /* @__PURE__ */ jsxs197("div", { className: "flex items-center gap-0.5", children: [
-      showHistory && /* @__PURE__ */ jsx249(TimelineHistoryButtons, { ...history2 }),
-      /* @__PURE__ */ jsx249(TimelineToolPicker, { showSelectAroundPlayhead }),
-      /* @__PURE__ */ jsx249("div", { "aria-hidden": "true", className: "mx-1 h-4 w-px bg-neutral-800" }),
-      /* @__PURE__ */ jsx249(LinkedSelectionToggle, {}),
-      /* @__PURE__ */ jsx249(Tooltip, { label: timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)", children: /* @__PURE__ */ jsx249(
+  return /* @__PURE__ */ jsx250("div", { className: "border-b border-neutral-800/60", children: /* @__PURE__ */ jsxs198("div", { className: "flex items-center justify-between px-2 py-0.5", children: [
+    /* @__PURE__ */ jsxs198("div", { className: "flex items-center gap-0.5", children: [
+      showHistory && /* @__PURE__ */ jsx250(TimelineHistoryButtons, { ...history2 }),
+      /* @__PURE__ */ jsx250(TimelineToolPicker, { showSelectAroundPlayhead }),
+      /* @__PURE__ */ jsx250("div", { "aria-hidden": "true", className: "mx-1 h-4 w-px bg-neutral-800" }),
+      /* @__PURE__ */ jsx250(LinkedSelectionToggle, {}),
+      /* @__PURE__ */ jsx250(Tooltip, { label: timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)", children: /* @__PURE__ */ jsx250(
         "button",
         {
           type: "button",
@@ -99248,14 +99228,14 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
           "aria-label": "Toggle timeline snapping",
           "aria-pressed": timelineSnapEnabled,
           className: timelineSnapEnabled ? flatActive : flatIdle,
-          children: /* @__PURE__ */ jsx249(Magnet, { size: 16, weight: "bold", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx250(Magnet, { size: 16, weight: "bold", "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx249(
+      /* @__PURE__ */ jsx250(
         Tooltip,
         {
           label: rippleEditEnabled ? "Ripple on \u2014 keeps the main track gapless" : "Ripple off \u2014 deleting a main-track clip leaves a gap",
-          children: /* @__PURE__ */ jsx249(
+          children: /* @__PURE__ */ jsx250(
             "button",
             {
               type: "button",
@@ -99263,12 +99243,12 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
               "aria-label": "Toggle ripple edit",
               "aria-pressed": rippleEditEnabled,
               className: rippleEditEnabled ? flatActive : flatIdle,
-              children: /* @__PURE__ */ jsx249(RippleEditIcon, { size: 16 })
+              children: /* @__PURE__ */ jsx250(RippleEditIcon, { size: 16 })
             }
           )
         }
       ),
-      projectHasAudio && /* @__PURE__ */ jsx249(Tooltip, { label: audioMetersVisible ? "Hide audio meters" : "Show audio meters", children: /* @__PURE__ */ jsx249(
+      projectHasAudio && /* @__PURE__ */ jsx250(Tooltip, { label: audioMetersVisible ? "Hide audio meters" : "Show audio meters", children: /* @__PURE__ */ jsx250(
         "button",
         {
           type: "button",
@@ -99276,15 +99256,15 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
           "aria-label": "Toggle audio meters",
           "aria-pressed": audioMetersVisible,
           className: audioMetersVisible ? flatActive : flatIdle,
-          children: /* @__PURE__ */ jsx249(AudioMetersIcon, { size: 16 })
+          children: /* @__PURE__ */ jsx250(AudioMetersIcon, { size: 16 })
         }
       ) }),
-      showKeyframes && /* @__PURE__ */ jsxs197(Fragment70, { children: [
-        /* @__PURE__ */ jsx249(
+      showKeyframes && /* @__PURE__ */ jsxs198(Fragment70, { children: [
+        /* @__PURE__ */ jsx250(
           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__ */ jsx249(
+            children: /* @__PURE__ */ jsx250(
               "button",
               {
                 type: "button",
@@ -99292,7 +99272,7 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
                 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-hover ${keyframeState === "active" ? "text-accent-ink" : keyframeState === "inactive" ? "text-neutral-400 hover:text-accent-ink" : "text-neutral-600 hover:text-neutral-400"}`,
-                children: /* @__PURE__ */ jsx249("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "currentColor", children: keyframeState === "active" ? /* @__PURE__ */ jsx249("path", { d: "M5 0.5L9.5 5L5 9.5L0.5 5Z" }) : /* @__PURE__ */ jsx249(
+                children: /* @__PURE__ */ jsx250("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "currentColor", children: keyframeState === "active" ? /* @__PURE__ */ jsx250("path", { d: "M5 0.5L9.5 5L5 9.5L0.5 5Z" }) : /* @__PURE__ */ jsx250(
                   "path",
                   {
                     d: "M5 1.2L8.8 5L5 8.8L1.2 5Z",
@@ -99305,11 +99285,11 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
             )
           }
         ),
-        /* @__PURE__ */ jsx249(
+        /* @__PURE__ */ jsx250(
           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__ */ jsx249(
+            children: /* @__PURE__ */ jsx250(
               "button",
               {
                 type: "button",
@@ -99317,9 +99297,9 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
                 "aria-label": "Auto-record manual edits as keyframes",
                 "aria-pressed": autoKeyframeEnabled,
                 className: `${flatBtn} active:scale-[0.98] hover:bg-hover ${autoKeyframeEnabled ? "text-danger-ink" : "text-neutral-600 hover:text-neutral-400"}`,
-                children: /* @__PURE__ */ jsxs197("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", children: [
-                  /* @__PURE__ */ jsx249("path", { d: "M5 0.7L9.3 5L5 9.3L0.7 5Z", stroke: "currentColor", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsx249(
+                children: /* @__PURE__ */ jsxs198("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", children: [
+                  /* @__PURE__ */ jsx250("path", { d: "M5 0.7L9.3 5L5 9.3L0.7 5Z", stroke: "currentColor", strokeWidth: "1" }),
+                  /* @__PURE__ */ jsx250(
                     "circle",
                     {
                       cx: "5",
@@ -99340,11 +99320,11 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
         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__ */ jsx249(
+        return /* @__PURE__ */ jsx250(
           Tooltip,
           {
             label: canSplit ? `Split at playhead (${splitShortcut})` : splittable ? "Move the playhead inside the clip to split" : "Select a clip to split",
-            children: /* @__PURE__ */ jsx249(
+            children: /* @__PURE__ */ jsx250(
               "button",
               {
                 type: "button",
@@ -99354,7 +99334,7 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
                   if (canSplit && el) onSplitElement(el, currentTime);
                 },
                 className: canSplit ? flatIdle : flatDisabled,
-                children: /* @__PURE__ */ jsxs197(
+                children: /* @__PURE__ */ jsxs198(
                   "svg",
                   {
                     width: "16",
@@ -99367,8 +99347,8 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
                     strokeLinejoin: "round",
                     "aria-hidden": "true",
                     children: [
-                      /* @__PURE__ */ jsx249("path", { d: "M5 3 L7 3 L7 13 L5 13" }),
-                      /* @__PURE__ */ jsx249("path", { d: "M11 3 L9 3 L9 13 L11 13" })
+                      /* @__PURE__ */ jsx250("path", { d: "M5 3 L7 3 L7 13 L5 13" }),
+                      /* @__PURE__ */ jsx250("path", { d: "M11 3 L9 3 L9 13 L11 13" })
                     ]
                   }
                 )
@@ -99380,11 +99360,11 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
       (() => {
         if (!showAddBeat) return null;
         const canAdd = beatAnalysisReady && canAddBeatAt(currentTime);
-        return /* @__PURE__ */ jsx249(
+        return /* @__PURE__ */ jsx250(
           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__ */ jsx249(
+            children: /* @__PURE__ */ jsx250(
               "button",
               {
                 type: "button",
@@ -99394,7 +99374,7 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
                   if (canAdd) addBeatAtCompositionTime(currentTime);
                 },
                 className: canAdd ? `${flatBtn} text-text-2 hover:bg-hover hover:text-accent-ink active:scale-[0.98]` : flatDisabled,
-                children: /* @__PURE__ */ jsx249("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx249(
+                children: /* @__PURE__ */ jsx250("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx250(
                   "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",
@@ -99410,13 +99390,13 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
         );
       })()
     ] }),
-    /* @__PURE__ */ jsxs197("div", { className: "flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsxs198("div", { className: "flex items-center gap-0.5", children: [
       rightActions,
-      /* @__PURE__ */ jsx249(
+      /* @__PURE__ */ jsx250(
         Tooltip,
         {
           label: thumbnailsVisible ? "Hide thumbnails \u2014 labels only" : "Show thumbnails \u2014 posters stay visible; richer previews appear on interaction",
-          children: /* @__PURE__ */ jsx249(
+          children: /* @__PURE__ */ jsx250(
             "button",
             {
               type: "button",
@@ -99424,12 +99404,12 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
               "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-accent-ink" : "text-neutral-400 hover:bg-hover hover:text-neutral-200"}`,
-              children: /* @__PURE__ */ jsx249(Image3, { size: 16, "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx250(Image3, { size: 16, "aria-hidden": "true" })
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx249(Tooltip, { label: "Fit timeline to width", children: /* @__PURE__ */ jsx249(
+      /* @__PURE__ */ jsx250(Tooltip, { label: "Fit timeline to width", children: /* @__PURE__ */ jsx250(
         "button",
         {
           type: "button",
@@ -99437,20 +99417,20 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
           "aria-label": "Fit timeline to width",
           "aria-pressed": zoomMode === "fit",
           className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${zoomMode === "fit" ? "bg-studio-accent/10 text-accent-ink" : "text-neutral-400 hover:bg-hover hover:text-neutral-200"}`,
-          children: /* @__PURE__ */ jsx249(ArrowsOutLineHorizontal, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx250(ArrowsOutLineHorizontal, { size: 16, "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx249(Tooltip, { label: "Zoom out", children: /* @__PURE__ */ jsx249(
+      /* @__PURE__ */ jsx250(Tooltip, { label: "Zoom out", children: /* @__PURE__ */ jsx250(
         "button",
         {
           type: "button",
           "aria-label": "Zoom out",
           onClick: () => zoomTimelineStep("out"),
           className: flatIdle,
-          children: /* @__PURE__ */ jsx249(MagnifyingGlassMinus, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx250(MagnifyingGlassMinus, { size: 16, "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx249(
+      /* @__PURE__ */ jsx250(
         "input",
         {
           type: "range",
@@ -99465,17 +99445,17 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
           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-text-0 [&::-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__ */ jsx249(Tooltip, { label: "Zoom in", children: /* @__PURE__ */ jsx249(
+      /* @__PURE__ */ jsx250(Tooltip, { label: "Zoom in", children: /* @__PURE__ */ jsx250(
         "button",
         {
           type: "button",
           "aria-label": "Zoom in",
           onClick: () => zoomTimelineStep("in"),
           className: flatIdle,
-          children: /* @__PURE__ */ jsx249(MagnifyingGlassPlus, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx250(MagnifyingGlassPlus, { size: 16, "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx249(
+      /* @__PURE__ */ jsx250(
         "span",
         {
           className: "ml-1 w-[38px] text-right font-mono text-[11px] tabular-nums text-neutral-500 select-none",
@@ -99488,18 +99468,18 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
 });
 
 // src/components/StudioSplash.tsx
-import { jsx as jsx250, jsxs as jsxs198 } from "react/jsx-runtime";
+import { jsx as jsx251, jsxs as jsxs199 } from "react/jsx-runtime";
 function StudioSplash({ waiting }) {
-  return /* @__PURE__ */ jsx250("div", { className: "h-full w-full bg-neutral-950 flex items-center justify-center", children: waiting ? /* @__PURE__ */ jsxs198("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
-    /* @__PURE__ */ jsx250("div", { className: "w-4 h-4 rounded-full border-2 border-neutral-700 border-t-neutral-500 animate-spin motion-reduce:animate-none" }),
-    /* @__PURE__ */ jsxs198("p", { className: "text-xs text-neutral-600", children: [
+  return /* @__PURE__ */ jsx251("div", { className: "h-full w-full bg-neutral-950 flex items-center justify-center", children: waiting ? /* @__PURE__ */ jsxs199("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
+    /* @__PURE__ */ jsx251("div", { className: "w-4 h-4 rounded-full border-2 border-neutral-700 border-t-neutral-500 animate-spin motion-reduce:animate-none" }),
+    /* @__PURE__ */ jsxs199("p", { className: "text-xs text-neutral-600", children: [
       "Waiting for preview server\u2026 run",
       " ",
-      /* @__PURE__ */ jsx250("code", { className: "text-neutral-500 font-mono", children: "npm run dev" })
+      /* @__PURE__ */ jsx251("code", { className: "text-neutral-500 font-mono", children: "npm run dev" })
     ] })
-  ] }) : /* @__PURE__ */ jsxs198("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
-    /* @__PURE__ */ jsx250("div", { className: "w-4 h-4 rounded-full bg-studio-accent animate-pulse motion-reduce:animate-none" }),
-    /* @__PURE__ */ jsx250("p", { className: "text-xs text-neutral-600", children: "Connecting to project\u2026" })
+  ] }) : /* @__PURE__ */ jsxs199("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
+    /* @__PURE__ */ jsx251("div", { className: "w-4 h-4 rounded-full bg-studio-accent animate-pulse motion-reduce:animate-none" }),
+    /* @__PURE__ */ jsx251("p", { className: "text-xs text-neutral-600", children: "Connecting to project\u2026" })
   ] }) });
 }
 
@@ -99769,7 +99749,7 @@ function useActiveComposition({
 }
 
 // src/App.tsx
-import { jsx as jsx251, jsxs as jsxs199 } from "react/jsx-runtime";
+import { jsx as jsx252, jsxs as jsxs200 } from "react/jsx-runtime";
 var getTimelineSelectionSet = () => usePlayerStore.getState().selectedElementIds;
 function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   const { projectId, resolving, waitingForServer } = useServerConnection();
@@ -100140,7 +100120,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     refreshPreviewDocumentVersion
   });
   const timelineToolbar = useMemo89(
-    () => /* @__PURE__ */ jsx251(
+    () => /* @__PURE__ */ jsx252(
       TimelineToolbar,
       {
         domEditSession: toolbarSession,
@@ -100188,15 +100168,15 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     projectId
   );
   if (resolving || waitingForServer || !projectId)
-    return /* @__PURE__ */ jsx251(StudioSplash, { waiting: waitingForServer });
-  return /* @__PURE__ */ jsx251(StudioShellProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx251(StudioPlaybackProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx251(PanelLayoutProvider, { value: layout, children: /* @__PURE__ */ jsx251(FileManagerProvider, { value: fileManager, children: /* @__PURE__ */ jsx251(DomEditProvider, { value: domEditSession, children: /* @__PURE__ */ jsxs199(
+    return /* @__PURE__ */ jsx252(StudioSplash, { waiting: waitingForServer });
+  return /* @__PURE__ */ jsx252(StudioShellProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx252(StudioPlaybackProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx252(PanelLayoutProvider, { value: layout, children: /* @__PURE__ */ jsx252(FileManagerProvider, { value: fileManager, children: /* @__PURE__ */ jsx252(DomEditProvider, { value: domEditSession, children: /* @__PURE__ */ jsxs200(
     "div",
     {
       className: "flex flex-col h-full w-full bg-neutral-950 relative",
       onDragOver: fileDrop.onDragOver,
       onDrop: fileDrop.onDrop,
       children: [
-        /* @__PURE__ */ jsx251(
+        /* @__PURE__ */ jsx252(
           StudioHeader,
           {
             captureFrameHref: frameCapture.captureFrameHref,
@@ -100209,17 +100189,17 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
             onExport: handleExport
           }
         ),
-        previewPersistence.domEditSaveQueuePaused && !externalFileChanges.blocked && /* @__PURE__ */ jsx251(
+        previewPersistence.domEditSaveQueuePaused && !externalFileChanges.blocked && /* @__PURE__ */ jsx252(
           SaveQueuePausedBanner,
           {
             message: previewPersistence.domEditSaveQueuePaused,
             onRetry: previewPersistence.resetDomEditSaveQueueBreaker
           }
         ),
-        /* @__PURE__ */ jsx251(ExternalFileConflictBanner, { coordinator: externalFileChanges }),
-        sdkHandle.unreachableProject && /* @__PURE__ */ jsx251(ProjectUnreachableBanner, { projectId: sdkHandle.unreachableProject }),
-        sdkHandle.compositionMissing && activeCompPath && /* @__PURE__ */ jsx251(CompositionMissingBanner, { path: activeCompPath }),
-        /* @__PURE__ */ jsx251(
+        /* @__PURE__ */ jsx252(ExternalFileConflictBanner, { coordinator: externalFileChanges }),
+        sdkHandle.unreachableProject && /* @__PURE__ */ jsx252(ProjectUnreachableBanner, { projectId: sdkHandle.unreachableProject }),
+        sdkHandle.compositionMissing && activeCompPath && /* @__PURE__ */ jsx252(CompositionMissingBanner, { path: activeCompPath }),
+        /* @__PURE__ */ jsx252(
           EditorShell,
           {
             readOnlyPreview,
@@ -100263,7 +100243,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
             gestureOverlay
           }
         ),
-        /* @__PURE__ */ jsx251(
+        /* @__PURE__ */ jsx252(
           StudioOverlays,
           {
             projectId,
@@ -100898,6 +100878,7 @@ export {
   Toggle,
   Tooltip,
   VideoThumbnail,
+  announcePreviewDocumentLoaded,
   applyPatch,
   buildCompositionSnapTarget,
   buildGridSnapEdges,