@hyperframes/studio 0.8.144 → 0.8.146

package/dist/index.js

@@ -1,12 +1,14 @@
 import {
   HyperframesLogo
-} from "./chunk-EEXSYY5F.js";
+} from "./chunk-C5BDT7NG.js";
 import {
   DOCK_PANEL_COMPONENT,
   PANEL_DEFINITIONS,
   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-PHGBG7OG.js";
 import {
   Button,
   ContextMenu,
@@ -72,13 +79,9 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-Y2OHHNM2.js";
+} from "./chunk-PVFBY7KR.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-HZDCMUG4.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,10 +169,11 @@ import {
   sameTimelineText,
   setCompositionSourceMap,
   splitTimelineElementKey,
+  studioApiFetch,
   toHexColor,
   wrapTimeline
-} from "./chunk-3GHTHPZD.js";
-import "./chunk-PZ5AY32C.js";
+} from "./chunk-T43DM7Q6.js";
+import "./chunk-MLKGABMK.js";
 
 // src/components/EditorShell.tsx
 import { memo as memo34, useCallback as useCallback74 } from "react";
@@ -871,7 +878,7 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
                       )
                     }
                   ) })
-                ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-600", children: "\u2014" }) })
+                ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-600", children: "Not set" }) })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -901,7 +908,7 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
                       )
                     }
                   ) })
-                ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-600", children: "\u2014" }) })
+                ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-600", children: "Not set" }) })
               ] })
             ] })
           ] }),
@@ -1462,7 +1469,7 @@ function createStableContext(name, defaultValue) {
   const store = registry();
   if (store.has(name) && seenNames.get(name) !== defaultValue) {
     console.warn(
-      `[hmrStableContext] "${name}" was registered twice with different defaults \u2014 two contexts are sharing one identity. Use module path + export name.`
+      `[hmrStableContext] "${name}" was registered twice with different defaults: two contexts are sharing one identity. Use module path + export name.`
     );
   }
   seenNames.set(name, defaultValue);
@@ -5994,7 +6001,7 @@ var METHOD_LABELS = {
   fromTo: "From \u2192 To"
 };
 var METHOD_TOOLTIPS = {
-  set: "Instantly snap to these values \u2014 no transition",
+  set: "Instantly snap to these values, no transition",
   to: "Smoothly animate the element to these target values",
   from: "Element starts at these values and transitions to its normal state",
   fromTo: "Animate from one state to another"
@@ -6064,7 +6071,7 @@ var PROP_TOOLTIPS = {
   rotationY: "Rotate around the vertical Y axis",
   rotationZ: "Rotate around the screen-facing Z axis",
   perspective: "3D depth context for child elements; set it on a parent when rotating children in 3D",
-  transformPerspective: "3D depth for THIS element's own X/Y rotation \u2014 lower = stronger perspective (try 600\u20131000)",
+  transformPerspective: "3D depth for THIS element's own X/Y rotation: lower = stronger perspective (try 600 to 1000)",
   transformOrigin: "Pivot point for transforms, for example center center or 50% 50%",
   width: "Element width",
   height: "Element height",
@@ -10132,7 +10139,7 @@ function persistMoveEdits(edits, deps, coalesceKey, operation = "timing") {
   const { updateElement, onMoveElement, onMoveElements } = deps;
   if (!onMoveElements) {
     console.warn(
-      onMoveElement ? `[Timeline] persistMoveEdits: only single-clip onMoveElement wired \u2014 this ${edits.length}-clip move degrades to a per-clip persist race (no atomic single-undo)` : `[Timeline] persistMoveEdits: no move persist handler wired \u2014 ${edits.length} edit(s) applied to the store only, not saved`
+      onMoveElement ? `[Timeline] persistMoveEdits: only single-clip onMoveElement wired, so this ${edits.length}-clip move degrades to a per-clip persist race (no atomic single-undo)` : `[Timeline] persistMoveEdits: no move persist handler wired, so ${edits.length} edit(s) applied to the store only, not saved`
     );
   }
   const prev = edits.map((e) => ({
@@ -18882,7 +18889,7 @@ function resolveResizePlaybackStart(original, target, element, updates) {
 function applyTimelineMoveAttributes(original, target, start, duration, track2, audioGroup) {
   if (!Number.isFinite(start) || !Number.isFinite(duration)) {
     console.warn(
-      `[Timeline] applyTimelineMoveAttributes: non-finite timing (start=${start}, duration=${duration}) \u2014 patch skipped`
+      `[Timeline] applyTimelineMoveAttributes: non-finite timing (start=${start}, duration=${duration}). Patch skipped`
     );
     return original;
   }
@@ -19392,7 +19399,7 @@ var OutOfSyncBadge = memo12(function OutOfSyncBadge2({ el }) {
         tabIndex: -1,
         "aria-haspopup": "menu",
         "aria-label": `Out of sync with ${partnerName} by ${label} frames`,
-        title: `Out of sync with ${partnerName} by ${label} \u2014 click for Move or Slip into Sync`,
+        title: `Out of sync with ${partnerName} by ${label}. Click for Move or Slip into Sync`,
         "data-testid": "out-of-sync-badge",
         className: "absolute bottom-0.5 left-1 z-[12] cursor-pointer rounded-[3px] bg-red-600 px-1 font-mono text-[9px] leading-[14px] text-white tabular-nums",
         onPointerDown: stop,
@@ -19546,7 +19553,7 @@ var TimelineClip = memo13(function TimelineClip2({
       "aria-description": isGestureActor || !capabilities.canMove ? void 0 : "Space picks up. Up and Down choose a new track. Enter drops. Escape cancels.",
       className: clipClassName,
       style,
-      title: isComposition ? `${el.compositionSrc} \u2022 Double-click to open` : `${displayLabel} \u2022 ${startLabel}s \u2013 ${endLabel}s`,
+      title: isComposition ? `${el.compositionSrc} \u2022 Double-click to open` : `${displayLabel} \u2022 ${startLabel}s to ${endLabel}s`,
       onPointerEnter: onHoverStart,
       onPointerLeave: onHoverEnd,
       onPointerDown,
@@ -21556,7 +21563,7 @@ function ClipAutomationLanes({
         onSelect: bound.onSelect,
         snapTimes,
         readOnly: bound.readOnly || isCarveLane(lane.target, bound.chain),
-        readOnlyNote: isCarveLane(lane.target, bound.chain) ? "Owned by the voiceover carve \u2014 re-derived on every analysis. Change strength in the FX rack, or turn the carve off to edit these by hand." : bound.readOnly ? "Read-only here." : void 0,
+        readOnlyNote: isCarveLane(lane.target, bound.chain) ? "Owned by the voiceover carve and re-derived on every analysis. Change strength in the FX rack, or turn the carve off to edit these by hand." : bound.readOnly ? "Read-only here." : void 0,
         rangeSelection: bound.selection?.target === lane.target ? {
           t0: bound.selection.t0,
           t1: bound.selection.t1,
@@ -22870,7 +22877,7 @@ function TimelineFxButton(props) {
           type: "button",
           tabIndex: -1,
           ref: buttonRef,
-          "aria-label": "Effects \u2014 group these clips first",
+          "aria-label": "Effects: group these clips first",
           title: "Group these clips to add effects to all of them",
           className: "flex h-6 items-center justify-center rounded-sm border-0 bg-transparent px-1 text-[10px] font-semibold text-[var(--timeline-text-faint)] hover:text-[var(--timeline-text-soft)]",
           onPointerDown: (event) => event.stopPropagation(),
@@ -22909,7 +22916,7 @@ function TimelineFxButton(props) {
         type: "button",
         tabIndex: -1,
         ref: buttonRef,
-        "aria-label": nodeCount > 0 ? `Effects \u2014 ${nodeCount} applied` : "Effects",
+        "aria-label": nodeCount > 0 ? `Effects: ${nodeCount} applied` : "Effects",
         title: "Effects",
         className: `flex h-6 items-center justify-center gap-0.5 rounded border-0 bg-transparent px-1 text-[10px] font-semibold transition-colors ${open || nodeCount > 0 ? "text-[var(--timeline-accent)]" : "text-[var(--timeline-text-faint)] hover:text-[var(--timeline-text-soft)]"}`,
         onPointerDown: (event) => event.stopPropagation(),
@@ -23385,7 +23392,7 @@ function AutomationLaneHeaderRow({
                 {
                   "data-automation-lane-also": "",
                   className: "truncate text-[9px] text-warning-ink",
-                  title: `${alsoAutomatedBy} is also fading this \u2014 the two multiply.`,
+                  title: `${alsoAutomatedBy} is also fading this. The two multiply.`,
                   children: [
                     alsoAutomatedBy,
                     " is also fading this."
@@ -25689,8 +25696,9 @@ function AudioGainDialog({
                 }
               ),
               /* @__PURE__ */ jsxs40("div", { className: "mt-3 text-neutral-400", "data-testid": "audio-gain-peak", children: [
-                "Peak Amplitude: ",
-                peaks === null ? "measuring\u2026" : peakDb === null ? "\u2014" : dbText(peakDb)
+                "Peak Amplitude:",
+                " ",
+                peaks === null ? "measuring\u2026" : peakDb === null ? "Unavailable" : dbText(peakDb)
               ] }),
               outOfRange && /* @__PURE__ */ jsx63("div", { className: "mt-1 text-red-400", children: "Peak targets must be 0 dB or lower." }),
               /* @__PURE__ */ jsxs40("div", { className: "mt-4 flex justify-end gap-2", children: [
@@ -25898,7 +25906,7 @@ function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }) {
         /* @__PURE__ */ jsx64("div", { className: "w-1.5 h-1.5 rounded-full bg-studio-accent" }),
         /* @__PURE__ */ jsxs41("span", { className: "text-[11px] font-medium text-neutral-300", children: [
           formatTime(start),
-          " \u2014 ",
+          " to ",
           formatTime(end)
         ] })
       ] }),
@@ -25932,7 +25940,7 @@ function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }) {
         className: "w-full px-3 py-2 text-xs bg-neutral-800/60 border border-neutral-700/40 rounded-lg text-neutral-200 placeholder:text-neutral-600 resize-none focus:outline-hidden focus:border-studio-accent/40 transition-colors"
       }
     ) }),
-    copyError && /* @__PURE__ */ jsx64("p", { className: "px-3 pb-2 text-[10px] text-danger-ink", role: "alert", children: "Copy failed \u2014 check clipboard permissions and try again." }),
+    copyError && /* @__PURE__ */ jsx64("p", { className: "px-3 pb-2 text-[10px] text-danger-ink", role: "alert", children: "Copy failed. Check clipboard permissions and try again." }),
     /* @__PURE__ */ jsxs41("div", { className: "grid grid-cols-2 gap-2 px-3 pb-3", children: [
       /* @__PURE__ */ jsx64(
         "button",
@@ -26047,7 +26055,7 @@ function KeyframeDiamondContextMenu({
               onClick: () => {
                 void handleCopyProperties();
               },
-              children: copyStatus === "copied" ? "Copied!" : copyStatus === "failed" ? "Copy failed \u2014 check permissions" : "Copy Properties"
+              children: copyStatus === "copied" ? "Copied!" : copyStatus === "failed" ? "Copy failed. Check permissions" : "Copy Properties"
             }
           ),
           onDelete && /* @__PURE__ */ jsx65(
@@ -31514,79 +31522,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;
@@ -35924,7 +35859,7 @@ var CaptionOverlay = memo26(function CaptionOverlay2({ iframeRef }) {
       onPointerUp: handlePointerUp,
       onLostPointerCapture: handlePointerUp,
       children: [
-        wordBoxes.length === 0 && model && model.segments.size > 0 && /* @__PURE__ */ jsx91("div", { className: "absolute inset-x-0 top-3 flex justify-center pointer-events-none", children: /* @__PURE__ */ jsx91("span", { className: "px-2.5 py-1 rounded-full bg-black/60 border border-neutral-700 text-2xs text-neutral-300", children: "No captions visible at this frame \u2014 scrub to a caption, or select one in the track below" }) }),
+        wordBoxes.length === 0 && model && model.segments.size > 0 && /* @__PURE__ */ jsx91("div", { className: "absolute inset-x-0 top-3 flex justify-center pointer-events-none", children: /* @__PURE__ */ jsx91("span", { className: "px-2.5 py-1 rounded-full bg-black/60 border border-neutral-700 text-2xs text-neutral-300", children: "No captions visible at this frame. Scrub to a caption, or select one in the track below" }) }),
         wordBoxes.map((box) => {
           const isSelected2 = selectedSegmentIds.has(box.segmentId);
           return /* @__PURE__ */ jsx91(
@@ -37575,7 +37510,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-SMVA3FEW.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -37596,7 +37531,7 @@ function OffCanvasIndicators({
         "aria-label": `Select off-canvas element ${r.key}`,
         className: "pointer-events-auto absolute inset-0 border-2 border-dashed border-studio-accent/10 rounded-md cursor-pointer hover:border-studio-accent hover:bg-studio-accent/10 transition-colors",
         style: clipOutside ? { clipPath: clipOutside } : void 0,
-        title: `Off-canvas: ${r.key} \u2014 click to select`,
+        title: `Off-canvas: ${r.key}. Click to select`,
         onClick: handleClick,
         onKeyDown: (e) => {
           if (e.key === "Enter" || e.key === " ") {
@@ -48485,7 +48420,7 @@ var SnapToolbar = memo31(function SnapToolbar2() {
                 if (gridPopoverOpen) settleGridSpacing();
                 setGridPopoverOpen((v) => !v);
               },
-              title: prefs.gridVisible ? "Grid visible (G) \u2014 right-click for spacing options" : "Grid hidden (G) \u2014 right-click for spacing options",
+              title: prefs.gridVisible ? "Grid visible (G). Right-click for spacing options" : "Grid hidden (G). Right-click for spacing options",
               "aria-label": "Toggle grid",
               children: /* @__PURE__ */ jsx109(GridFour, { size: 16, weight: prefs.gridVisible ? "fill" : "regular" })
             }
@@ -54560,7 +54495,7 @@ function createTransformCommitHandlers({
     if (await commitAnimatedTransformValue(
       axis,
       parsed,
-      "This element's position can't be edited here yet \u2014 it is driven by its animation"
+      "This element's position can't be edited here yet: its animation drives it"
     ))
       return;
     const plainTranslate = editsPlainCss(element.element, "move");
@@ -54583,7 +54518,7 @@ function createTransformCommitHandlers({
       return;
     }
     if (hasGsapAnimation) {
-      showToast?.("This element's size can't be edited here yet \u2014 it is driven by its animation");
+      showToast?.("This element's size can't be edited here yet: its animation drives it");
       return;
     }
     const current = readStudioBoxSize(element.element);
@@ -54602,7 +54537,7 @@ function createTransformCommitHandlers({
     if (await commitAnimatedTransformValue(
       "rotation",
       parsed,
-      "This element's rotation can't be edited here yet \u2014 it is driven by its animation"
+      "This element's rotation can't be edited here yet: its animation drives it"
     ))
       return;
     await Promise.resolve(onSetManualRotation(element, { angle: parsed }));
@@ -55599,7 +55534,7 @@ function ColorGradingControls({
                 setLutImporting(true);
                 setLutImportError(null);
                 void actions.importLut(files, onImportAssets, () => track2("button", "Import LUT")).catch(
-                  () => setLutImportError("LUT import failed \u2014 check the .cube file and try again.")
+                  () => setLutImportError("LUT import failed. Check the .cube file and try again.")
                 ).finally(() => setLutImporting(false));
                 event.currentTarget.value = "";
               }
@@ -56209,7 +56144,7 @@ function useColorGradingController({
         const reverted = confirmedGradingRef.current;
         latestGradingRef.current = reverted;
         setGrading(reverted);
-        setRuntimeStatus({ state: "unavailable", message: "Save failed \u2014 reverted" });
+        setRuntimeStatus({ state: "unavailable", message: "Save failed, changes reverted" });
       };
       const result = setAttributeLive(COLOR_GRADING_DATA_KEY, value ?? null, applySettled);
       return trackStudioPendingEdit(
@@ -57367,7 +57302,7 @@ function FontFamilyField({
         setFontNotice("No supported font files were imported.");
       }
     } catch {
-      setFontNotice("Font import failed \u2014 the files were not added. Try again.");
+      setFontNotice("Font import failed. The files were not added. Try again.");
     } finally {
       setImportingFonts(false);
     }
@@ -57445,10 +57380,10 @@ function FontFamilyField({
           setQuery("");
           setOpen(false);
         } else {
-          setFontNotice(`Couldn't import "${option.family}" \u2014 the font was not applied.`);
+          setFontNotice(`Couldn't import "${option.family}", so the font was not applied.`);
         }
       } catch {
-        setFontNotice(`Couldn't import "${option.family}" \u2014 the font was not applied.`);
+        setFontNotice(`Couldn't import "${option.family}", so the font was not applied.`);
       } finally {
         setImportingFonts(false);
       }
@@ -57947,7 +57882,7 @@ function VariablesBindElement({
           String(existingDecl.default),
           ")"
         ] }),
-        `, not the element's own \u2014 binding won't change "`,
+        `, not the element's own, so binding won't change "`,
         trimmedId,
         '".'
       ] }),
@@ -58107,7 +58042,7 @@ function PromotableControl({
   useEffect79(() => {
     if (danglingId != null) {
       console.warn(
-        `[hyperframes] Control is bound to variable "${danglingId}", but no such declaration exists. The element still carries the binding on disk \u2014 re-declare the variable or unbind the element.`
+        `[hyperframes] Control is bound to variable "${danglingId}", but no such declaration exists. The element still carries the binding on disk. Re-declare the variable or unbind the element.`
       );
     }
   }, [danglingId]);
@@ -58602,7 +58537,7 @@ function ImageFillField({
         commitImage(toProjectRootAssetPath(nextImage), true);
       }
     } catch {
-      setUploadError("Upload failed \u2014 check the file and try again.");
+      setUploadError("Upload failed. Check the file and try again.");
     } finally {
       setUploading(false);
     }
@@ -60110,7 +60045,7 @@ function buildTweenSummary(animation2) {
       const label = (PROP_LABELS[p] ?? p).toLowerCase();
       return `${label} ${formatPropValue(p, v)}`;
     });
-    const fromText = fromDescs.length > 0 ? fromDescs.join(", ") : "\u2014";
+    const fromText = fromDescs.length > 0 ? fromDescs.join(", ") : "none";
     return `Starting at ${pos}s, over ${dur}s, ${target} animates from [${fromText}] to [${propText}] using a ${ease.toLowerCase()} curve.`;
   }
   return `Starting at ${pos}s, over ${dur}s, animate ${target}'s ${propText} using a ${ease.toLowerCase()} curve.`;
@@ -60253,14 +60188,14 @@ function ComputedTweenNotice({
   const editability = editabilityForProvenance2(provenance);
   if (editability === "direct") return null;
   if (editability === "source") {
-    return /* @__PURE__ */ jsx142("div", { className: "rounded-md border border-neutral-800 bg-neutral-900/50 px-2 py-1.5 text-[9px] text-neutral-400", children: "Computed value \u2014 edit it in the Code tab." });
+    return /* @__PURE__ */ jsx142("div", { className: "rounded-md border border-neutral-800 bg-neutral-900/50 px-2 py-1.5 text-[9px] text-neutral-400", children: "Computed value. Edit it in the Code tab." });
   }
   const source = provenance?.fn ? `${provenance.fn}()` : "a loop";
   return /* @__PURE__ */ jsxs104("div", { className: "flex items-center justify-between gap-2 rounded-md border border-neutral-800 bg-neutral-900/50 px-2 py-1.5 text-[9px] text-neutral-400", children: [
     /* @__PURE__ */ jsxs104("span", { children: [
       "Generated by ",
       source,
-      " \u2014 not directly editable."
+      ", not directly editable."
     ] }),
     onUnroll && /* @__PURE__ */ jsx142(
       "button",
@@ -60468,7 +60403,7 @@ function PropertyRow({
             onClick: () => onCommit(isVisible ? "hidden" : "visible"),
             className: "shrink-0 rounded-full transition-colors duration-200 relative",
             style: { width: 28, height: 16, background: isVisible ? P.accent : P.borderInput },
-            title: isVisible ? "Visible \u2014 click to hide" : "Hidden \u2014 click to show",
+            title: isVisible ? "Visible: click to hide" : "Hidden: click to show",
             children: /* @__PURE__ */ jsx144(
               "span",
               {
@@ -60732,7 +60667,7 @@ var AnimationCard = memo38(function AnimationCard2({
                   children: [
                     typeof animation2.position === "number" ? `${parseFloat(animation2.position.toFixed(3))}s` : animation2.position,
                     " ",
-                    "\u2013 ",
+                    "to ",
                     typeof endTime === "number" ? `${parseFloat(endTime.toFixed(3))}s` : endTime
                   ]
                 }
@@ -60782,7 +60717,7 @@ var AnimationCard = memo38(function AnimationCard2({
                     }
                   }
                 ),
-                "Keyframed \u2014 click a segment below to edit its curve"
+                "Keyframed: click a segment below to edit its curve"
               ] }),
               runEase && runEase !== "none" && /* @__PURE__ */ jsxs107("p", { className: "mt-1 text-[9px] text-neutral-500", "data-card-run-ease": true, children: [
                 "Run ease: ",
@@ -60799,7 +60734,7 @@ var AnimationCard = memo38(function AnimationCard2({
                   setTimeout(() => setCopied(false), 1500);
                 },
                 className: "shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300",
-                title: "Copy description to clipboard \u2014 paste into agent prompts",
+                title: "Copy description for agent prompts",
                 children: copied ? "Copied" : "Copy"
               }
             )
@@ -61138,7 +61073,7 @@ function GsapAnimationList({
     }
   }, [focusedHere]);
   return /* @__PURE__ */ jsxs109("div", { className: "space-y-2", children: [
-    animations.length === 0 && /* @__PURE__ */ jsx147("p", { className: "text-[11px] leading-4 text-neutral-500", children: "No animations on this element yet \u2014 add an effect below to animate it." }),
+    animations.length === 0 && /* @__PURE__ */ jsx147("p", { className: "text-[11px] leading-4 text-neutral-500", children: "No animations on this element yet. Add an effect below to animate it." }),
     animations.map((animation2, index) => /* @__PURE__ */ createElement2(
       AnimationCard,
       {
@@ -61175,7 +61110,7 @@ var GsapAnimationSection = memo39(function GsapAnimationSection2({
   ...callbacks
 }) {
   return /* @__PURE__ */ jsxs110(Section, { title: "Animation", icon: /* @__PURE__ */ jsx148(Film, { size: 15 }), children: [
-    multipleTimelines && /* @__PURE__ */ jsx148("p", { className: "mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: "This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss \u2014 consolidate into a single timeline to enable editing." }),
+    multipleTimelines && /* @__PURE__ */ jsx148("p", { className: "mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: "This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss. Consolidate into a single timeline to enable editing." }),
     unsupportedTimelinePattern && /* @__PURE__ */ jsx148("p", { className: "mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: `This timeline uses a computed key (window.__timelines[variable]) the editor can't resolve statically. Use a string-literal key (window.__timelines["id"]) or a variable declaration (const tl = gsap.timeline()) to enable editing.` }),
     multipleTimelines || unsupportedTimelinePattern ? null : /* @__PURE__ */ jsx148(
       GsapAnimationList,
@@ -61515,7 +61450,7 @@ function Transform3DCube({
       {
         type: "button",
         onClick: onKeyframe,
-        title: keyframed ? "3D transform is keyframed \u2014 click a field diamond to add keyframes" : "Keyframe the 3D transform (animate it over time)",
+        title: keyframed ? "3D transform is keyframed. Click a field diamond to add keyframes" : "Keyframe the 3D transform (animate it over time)",
         "aria-label": "Keyframe 3D transform",
         "aria-pressed": keyframed,
         className: `absolute left-1.5 top-1.5 rounded p-0.5 hover:bg-neutral-800 ${keyframed ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"}`,
@@ -62235,7 +62170,7 @@ function FlatSelectRow({
         {
           type: "button",
           "data-flat-select-reset": "true",
-          title: "Remove \u2014 fall back to default",
+          title: "Remove and fall back to default",
           disabled,
           onClick: () => {
             track2("button", `Reset ${trackName}`);
@@ -62296,7 +62231,7 @@ function FlatRow({
         {
           type: "button",
           "data-flat-row-reset": "true",
-          title: "Remove \u2014 fall back to default",
+          title: "Remove and fall back to default",
           onClick: () => {
             track2("button", `Reset ${label}`);
             onReset();
@@ -62623,7 +62558,7 @@ function FlatSlider({
       {
         type: "button",
         "data-flat-slider-reset": "true",
-        title: "Remove \u2014 fall back to default",
+        title: "Remove and fall back to default",
         disabled,
         onClick: () => {
           track2("button", `Reset ${label}`);
@@ -62664,7 +62599,7 @@ var ALIGN_OPTIONS = [
   { key: "justify", label: "justify", node: "J" }
 ];
 var CASE_OPTIONS = [
-  { key: "none", label: "none", node: "\u2013" },
+  { key: "none", label: "none", node: "None" },
   { key: "uppercase", label: "uppercase", node: "AG" },
   { key: "lowercase", label: "lowercase", node: "ag" },
   { key: "capitalize", label: "capitalize", node: "Ag" }
@@ -63890,7 +63825,7 @@ function TimingSection({
         onCommit: commitDuration
       }
     ) }),
-    derived && /* @__PURE__ */ jsx161("p", { className: "mt-2 text-[10px] leading-snug text-neutral-500", children: "Inferred from this element\u2019s animation \u2014 edit to pin an explicit clip range." })
+    derived && /* @__PURE__ */ jsx161("p", { className: "mt-2 text-[10px] leading-snug text-neutral-500", children: "Inferred from this element\u2019s animation. Edit to pin an explicit clip range." })
   ] });
 }
 
@@ -63984,7 +63919,7 @@ function FlatTimingRow({
     cell("Start", formatTimingValue(start), commitStart),
     cell("End", formatTimingValue(end), commitEnd),
     cell("Duration", formatTimingValue(duration), commitDuration),
-    derived && /* @__PURE__ */ jsx162("p", { className: "col-span-3 mt-1 text-[10px] leading-snug text-panel-text-3", children: "Inferred from this element's animation \u2014 edit to pin an explicit clip range." })
+    derived && /* @__PURE__ */ jsx162("p", { className: "col-span-3 mt-1 text-[10px] leading-snug text-panel-text-3", children: "Inferred from this element's animation. Edit to pin an explicit clip range." })
   ] });
 }
 function FlatMotionSection({
@@ -64011,7 +63946,7 @@ function FlatMotionSection({
       }
     ),
     showEffects && /* @__PURE__ */ jsxs122(Fragment46, { children: [
-      multipleTimelines && /* @__PURE__ */ jsx162("p", { className: "rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: "This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss \u2014 consolidate into a single timeline to enable editing." }),
+      multipleTimelines && /* @__PURE__ */ jsx162("p", { className: "rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: "This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss. Consolidate into a single timeline to enable editing." }),
       unsupportedTimelinePattern && /* @__PURE__ */ jsx162("p", { className: "rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink", children: "This timeline uses a computed key the editor can't resolve statically." }),
       !multipleTimelines && !unsupportedTimelinePattern && /* @__PURE__ */ jsx162(
         GsapAnimationList,
@@ -64030,7 +63965,7 @@ function motionSectionLabel(args) {
   if (args.timingOnly) {
     return {
       title: "Timing",
-      summary: `${formatTimingValue(args.start)} \u2013 ${formatTimingValue(args.start + args.duration)}`
+      summary: `${formatTimingValue(args.start)} to ${formatTimingValue(args.start + args.duration)}`
     };
   }
   return {
@@ -65052,7 +64987,7 @@ function FxBandRuler({ band, at }) {
       return /* @__PURE__ */ jsx166(
         "span",
         {
-          title: `${range.name} \u2014 ${range.says}`,
+          title: `${range.name}: ${range.says}`,
           className: range.name === here.name ? "hf-fx-ruler-band bg-panel-accent" : reachable ? "hf-fx-ruler-band bg-panel-text-4/50" : "hf-fx-ruler-band bg-panel-text-4/15",
           style: {
             width: `${(positionOf(range.to) - positionOf(range.from)) * 100}%`
@@ -65063,7 +64998,7 @@ function FxBandRuler({ band, at }) {
     }) }),
     /* @__PURE__ */ jsxs126("p", { className: "hf-fx-ruler-label truncate pt-0.5 text-[9px] text-panel-text-2", children: [
       /* @__PURE__ */ jsx166("span", { className: "hf-fx-ruler-name text-panel-text-1", children: here.name }),
-      " \u2014 ",
+      ": ",
       here.says
     ] })
   ] });
@@ -65286,12 +65221,12 @@ function FxNodeOpenBody({
         onClick: onToggleDetails,
         children: [
           /* @__PURE__ */ jsx168("span", { "aria-hidden": "true", children: details ? "\u25BE" : "\u25B8" }),
-          "Details \u2014 ",
+          "Details: ",
           registryDef.label
         ]
       }
     ) : /* @__PURE__ */ jsxs127("p", { className: "hf-fx-node-mechanism border-t border-panel-border-input px-1.5 pt-1 font-mono text-[9px] uppercase tracking-wide text-panel-text-2", children: [
-      "Details \u2014 ",
+      "Details: ",
       registryDef.label
     ] }),
     details || !oneKnob ? /* @__PURE__ */ jsx168(
@@ -71680,12 +71615,12 @@ var PropertyPanel = memo40(function PropertyPanel2(props) {
   const handleCopyElementInfo = () => {
     const text = buildElementInfoText(element, sourceLabel, gsapAnimations, previewIframeRef);
     navigator.clipboard.writeText(text).then(() => {
-      showToast(`Copied element info for ${element.label} \u2014 paste into any AI agent`, "info");
+      showToast(`Copied element info for ${element.label}. Paste it into any AI agent`, "info");
       setClipboardCopied(true);
       clearTimeout(clipboardTimerRef.current);
       clipboardTimerRef.current = setTimeout(() => setClipboardCopied(false), 1500);
     }).catch(() => {
-      showToast("Couldn't copy to the clipboard \u2014 check browser permissions", "error");
+      showToast("Couldn't copy to the clipboard. Check browser permissions", "error");
     });
   };
   if (STUDIO_FLAT_INSPECTOR_ENABLED) {
@@ -72822,7 +72757,7 @@ var FileTree = memo42(function FileTree2({
           ),
           children.length === 0 && !inlineInput && /* @__PURE__ */ jsxs150("div", { className: "px-3 py-4 text-center text-[11px] text-neutral-600", children: [
             "No files yet",
-            hasFileOps ? " \u2014 use + above to create one" : "",
+            hasFileOps ? ". Use + above to create one" : "",
             "."
           ] }),
           children.map(
@@ -73366,6 +73301,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;
       }
@@ -73466,7 +73402,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
       try {
         const res = await studioApiFetch(`/api/render/${jobId}/cancel`, { method: "POST" });
         if (!res.ok && res.status !== 404) {
-          setActionError("Couldn't cancel on the server \u2014 the render may still be running.");
+          setActionError("Couldn't cancel on the server. The render may still be running.");
           return;
         }
         if (res.ok) {
@@ -73476,7 +73412,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
           }
         }
       } catch {
-        setActionError("Couldn't reach the server to cancel \u2014 the render may still be running.");
+        setActionError("Couldn't reach the server to cancel. The render may still be running.");
       }
     },
     [closeActiveEventSource, loadRenders]
@@ -73488,7 +73424,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
       try {
         const res = await studioApiFetch(`/api/render/${jobId}`, { method: "DELETE" });
         if (!res.ok) {
-          setActionError("Couldn't delete the render \u2014 it's still on disk.");
+          setActionError("Couldn't delete the render. It's still on disk.");
           return;
         }
       } catch {
@@ -73727,7 +73663,7 @@ ${pathLine}${lines.join("\n\n")}`;
               {
                 onClick: handleCopyToAgent,
                 className: `px-3 py-1 text-xs font-medium rounded-lg transition-colors active:scale-[0.98] ${copied ? "bg-accent text-on-accent" : copyFailed ? "bg-danger text-on-danger" : "bg-accent hover:bg-accent-hover text-on-accent"}`,
-                children: copied ? "Copied!" : copyFailed ? "Copy failed \u2014 check permissions" : "Copy to Agent"
+                children: copied ? "Copied!" : copyFailed ? "Copy failed. Check permissions" : "Copy to Agent"
               }
             ) }),
             /* @__PURE__ */ jsxs151("div", { className: "flex-1 overflow-y-auto px-5 py-3", children: [
@@ -74628,7 +74564,7 @@ function ProjectUnreachableBanner({ projectId }) {
             ]
           }
         )
-      ] }) : /* @__PURE__ */ jsx202("span", { children: "Couldn't open this project \u2014 it may have been renamed, moved, or deleted." })
+      ] }) : /* @__PURE__ */ jsx202("span", { children: "Couldn't open this project. It may have been renamed, moved, or deleted." })
     }
   );
 }
@@ -74809,7 +74745,7 @@ function useCaptionSync(projectId) {
       suppressSaveRef.current = true;
       useCaptionStore.getState().setModel({ ...model, segments: newSegments });
     } catch {
-      useCaptionStore.getState().setSyncError("caption-overrides.json is corrupt \u2014 earlier caption edits didn't load");
+      useCaptionStore.getState().setSyncError("caption-overrides.json is corrupt, so earlier caption edits didn't load");
     }
   }, []);
   return { save, loadOverrides };
@@ -75268,7 +75204,7 @@ function useEditorSave({
       if (lastFailureToastAtRef.current === null || now2 - lastFailureToastAtRef.current >= FAILURE_BURST_MS) {
         lastFailureToastAtRef.current = now2;
         showToast(
-          `Couldn't save ${path} \u2014 your latest edits are NOT persisted. Check the preview server; editing again retries the save.`,
+          `Couldn't save ${path}. Your latest edits are NOT persisted. Check the preview server; editing again retries the save.`,
           "error"
         );
       }
@@ -76386,7 +76322,6 @@ function buildCutTarget(element, target, splitTime) {
     elementDuration: element.duration,
     ...element.playbackStart != null ? { playbackStart: element.playbackStart } : {},
     ...element.playbackRate != null ? { playbackRate: element.playbackRate } : {},
-    ...element.kind === "composition" ? { isComposition: true } : {},
     // Pin both halves to the current track: unstamped, the runtime's positional
     // fallback (parseAuthoredTrack) renumbers the new sibling onto a new row.
     track: resolveElementTrack(element)
@@ -78409,7 +78344,7 @@ async function createAudioGroupAndAssignMembers({
   pendingTimelineEditPathRef
 }) {
   if (elements.length < 2) {
-    throw new Error(`Cannot group ${elements.length} clip(s) \u2014 a group needs at least two`);
+    throw new Error(`Cannot group ${elements.length} clip(s): a group needs at least two`);
   }
   if (!GROUP_ID_PATTERN.test(groupId)) {
     throw new Error(`Invalid audio group id ${JSON.stringify(groupId)}`);
@@ -83315,7 +83250,7 @@ function showUnchangedMutationFeedback(mutations, result, showToast) {
 async function runMutationRequest(mutations, options, showToast, request2) {
   const unsafeFields = mutations.flatMap((mutation) => findUnsafeMutationValues(mutation));
   if (unsafeFields.length > 0) {
-    showToast?.("Couldn't read element layout \u2014 try again at a different playhead time", "error");
+    showToast?.("Couldn't read element layout. Try again at a different playhead time", "error");
     if (options.skipReload) return;
     throw markStudioSaveErrorAlreadyToasted(
       new Error(
@@ -86419,7 +86354,7 @@ function useDomEditSession({
     }
     if (members.some((m) => isAudioDomElement(m.element))) {
       showToast(
-        members.every((m) => isAudioDomElement(m.element)) ? "Audio clips group into a bus \u2014 use FX on the track header" : "Can't group audio clips with layout elements",
+        members.every((m) => isAudioDomElement(m.element)) ? "Audio clips group into a bus. Use FX on the track header" : "Can't group audio clips with layout elements",
         "info"
       );
       return;
@@ -87716,7 +87651,7 @@ function useBlockHandlers({
   const runBlockInstall = useCallback152(
     async (blockName, install) => {
       if (installingBlockRef.current) {
-        showToast("A block is already installing \u2014 one moment\u2026", "info");
+        showToast("A block is already installing. One moment\u2026", "info");
         return null;
       }
       installingBlockRef.current = true;
@@ -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]);
@@ -89295,7 +89230,7 @@ function useFrameCapture({
         } catch (fetchErr) {
           clearTimeout(timeout);
           if (fetchErr instanceof DOMException && fetchErr.name === "AbortError") {
-            throw new Error("Capture timed out \u2014 the server took too long to respond");
+            throw new Error("Capture timed out: the server took too long to respond");
           }
           throw fetchErr;
         }
@@ -91004,11 +90939,11 @@ function useGestureCommit({
       }
       const duration = frozenSamples.length > 0 ? frozenSamples[frozenSamples.length - 1]?.time ?? 0 : 0;
       if (frozenSamples.length <= 2) {
-        showToast("No gesture detected \u2014 move the pointer while recording", "error");
+        showToast("No gesture detected. Move the pointer while recording", "error");
         return;
       }
       if (duration <= 0) {
-        showToast("Recording too short \u2014 try again", "error");
+        showToast("Recording too short. Try again", "error");
         return;
       }
       const simplified = simplifyGestureSamples(frozenSamples, duration, (key2) => {
@@ -91023,7 +90958,7 @@ function useGestureCommit({
       }
       const selector = sel.id ? idSelector(sel.id) : sel.selector;
       if (!selector) {
-        showToast("Cannot save \u2014 element has no selector", "error");
+        showToast("Cannot save: element has no selector", "error");
         return;
       }
       const writeSelector = writeTargetSelector(sel);
@@ -91191,7 +91126,7 @@ function useGestureCommit({
       }
       const iframe = previewIframeRef.current;
       if (!iframe) {
-        showToast("Preview not ready \u2014 try again", "error");
+        showToast("Preview not ready. Try again", "error");
         return;
       }
       const store = usePlayerStore.getState();
@@ -91406,7 +91341,7 @@ function MediaErrorPanel({ name, filePath }) {
     ),
     /* @__PURE__ */ jsx212("span", { className: "text-sm text-neutral-400 font-medium", children: name }),
     /* @__PURE__ */ jsx212("span", { className: "text-[11px] text-neutral-600 font-mono", children: filePath }),
-    /* @__PURE__ */ jsx212("span", { className: "text-[10px] text-neutral-500", children: "Couldn't load this file \u2014 it may be missing or corrupt" })
+    /* @__PURE__ */ jsx212("span", { className: "text-[10px] text-neutral-500", children: "Couldn't load this file. It may be missing or corrupt" })
   ] });
 }
 function MediaPreview({ projectId, filePath }) {
@@ -91493,7 +91428,7 @@ function MediaPreview({ projectId, filePath }) {
     ),
     /* @__PURE__ */ jsx212("span", { className: "text-sm text-neutral-400 font-medium", children: name }),
     /* @__PURE__ */ jsx212("span", { className: "text-[11px] text-neutral-600 font-mono", children: filePath }),
-    /* @__PURE__ */ jsx212("span", { className: "text-[10px] text-neutral-600", children: "Binary file \u2014 preview not available" })
+    /* @__PURE__ */ jsx212("span", { className: "text-[10px] text-neutral-600", children: "Binary file: preview not available" })
   ] });
 }
 
@@ -92019,7 +91954,7 @@ function AudioRow({
         onPointerUp: handlePointerUp,
         role: "button",
         tabIndex: 0,
-        "aria-label": `${name} \u2014 open, drag to timeline, right-click for actions`,
+        "aria-label": `${name}: open, drag to timeline, right-click for actions`,
         onKeyDown: (e) => {
           if (e.target !== e.currentTarget) return;
           if (e.key === "Enter" || e.key === " ") {
@@ -92358,7 +92293,7 @@ function AssetCard({
         draggable: true,
         role: "button",
         tabIndex: 0,
-        "aria-label": `${name} \u2014 open, drag to timeline, right-click for actions`,
+        "aria-label": `${name}: open, drag to timeline, right-click for actions`,
         onPointerDown: handlePointerDown,
         onPointerUp: handlePointerUp,
         onKeyDown: (e) => {
@@ -92452,7 +92387,7 @@ function FontRow({
         draggable: true,
         role: "button",
         tabIndex: 0,
-        "aria-label": `${name} \u2014 copy path, drag to timeline, right-click for actions`,
+        "aria-label": `${name}: copy path, drag to timeline, right-click for actions`,
         onClick: () => onCopy(asset),
         onKeyDown: (e) => {
           if (e.target !== e.currentTarget) return;
@@ -92953,7 +92888,7 @@ function PromptPreviewModal({
           ref: containerRef,
           role: "dialog",
           "aria-modal": "true",
-          "aria-label": `Ask agent \u2014 ${title}`,
+          "aria-label": `Ask agent: ${title}`,
           tabIndex: -1,
           className: "w-[560px] max-h-[80vh] flex flex-col rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl outline-hidden",
           onClick: (e) => e.stopPropagation(),
@@ -93144,7 +93079,7 @@ function formatCompositionContext(ctx3) {
       "",
       `Elements visible at ${formatTime(ctx3.currentTime)}:`,
       ...visibleNow.map(
-        (el) => `- ${el.label || el.id} (track ${el.track}, ${formatTime(el.start)}\u2013${formatTime(el.start + el.duration)}${el.compositionSrc ? `, src: ${el.compositionSrc}` : ""})`
+        (el) => `- ${el.label || el.id} (track ${el.track}, ${formatTime(el.start)} to ${formatTime(el.start + el.duration)}${el.compositionSrc ? `, src: ${el.compositionSrc}` : ""})`
       )
     );
   }
@@ -93170,7 +93105,7 @@ function buildAgentPrompt(title, name, description, category, blockType, context
     transitions: [
       `Using /hyperframes, add the "${title}" transition (registry: ${name}) between my scenes.`,
       `${description}`,
-      `Place this transition at the cut point between the current scene and the next. Set the duration to 0.5\u20131s, position it at the scene boundary on the timeline, and make sure the z-index is above both scenes. Adjust colors to match my palette.`
+      `Place this transition at the cut point between the current scene and the next. Set the duration to 0.5 to 1s, position it at the scene boundary on the timeline, and make sure the z-index is above both scenes. Adjust colors to match my palette.`
     ].join("\n\n"),
     effects: [
       `Using /hyperframes, add the "${title}" effect (registry: ${name}) as an overlay on my composition.`,
@@ -93671,8 +93606,8 @@ function CompCard({
                 isRoot && /* @__PURE__ */ jsx222(
                   "span",
                   {
-                    "aria-label": "Root composition \u2014 opens automatically on load",
-                    title: "Root composition \u2014 opens automatically on load",
+                    "aria-label": "Root composition: opens automatically on load",
+                    title: "Root composition: opens automatically on load",
                     className: "flex-shrink-0 rounded-full bg-neutral-700/60 px-1.5 py-px text-[8px] font-bold uppercase tracking-wide text-neutral-300",
                     children: "Root"
                   }
@@ -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]
   );
@@ -95200,7 +95136,7 @@ var BlockParamsPanel = memo54(function BlockParamsPanel2({
         if (matches === 0) {
           setCommitState({
             tone: "error",
-            message: `Couldn't find the current value in ${compositionPath} \u2014 it may have been edited by hand.`
+            message: `Couldn't find the current value in ${compositionPath}. It may have been edited by hand.`
           });
           trackBlockParamCommit({ tone: "error", blockName, key: key2 });
           return;
@@ -95208,7 +95144,7 @@ var BlockParamsPanel = memo54(function BlockParamsPanel2({
         if (matches > 1) {
           setCommitState({
             tone: "error",
-            message: `"${previous}" appears ${matches}\xD7 in ${compositionPath} \u2014 the panel can't tell which one belongs to this parameter, so it won't risk changing unrelated content. Edit the file directly to disambiguate.`
+            message: `"${previous}" appears ${matches}\xD7 in ${compositionPath}. The panel can't tell which one belongs to this parameter, so it won't risk changing unrelated content. Edit the file directly to disambiguate.`
           });
           trackBlockParamCommit({ tone: "error", blockName, key: key2 });
           return;
@@ -95297,7 +95233,7 @@ var BlockParamsPanel = memo54(function BlockParamsPanel2({
     /* @__PURE__ */ jsxs182("div", { className: "flex-1 overflow-y-auto p-3 space-y-3", children: [
       /* @__PURE__ */ jsx230("div", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider", children: "Parameters" }),
       params.length === 0 && /* @__PURE__ */ jsx230("div", { className: "text-[10px] text-neutral-500", children: "This block has no editable parameters." }),
-      !fileManager && params.length > 0 && /* @__PURE__ */ jsx230("div", { className: "text-[10px] text-warning-ink", children: "Block params can't be edited here \u2014 no project file access." }),
+      !fileManager && params.length > 0 && /* @__PURE__ */ jsx230("div", { className: "text-[10px] text-warning-ink", children: "Block params can't be edited here: no project file access." }),
       params.map((param) => /* @__PURE__ */ jsx230(
         ParamControl,
         {
@@ -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",
@@ -95750,7 +95716,7 @@ function scaleOptionLabel(scale, dims) {
   const resolved2 = resolvedDimensions(scale, dims);
   const base2 = resolved2 ? `${SCALE_LABEL[scale]} \xB7 ${resolved2.width}\xD7${resolved2.height}` : SCALE_LABEL[scale];
   if (dims && !scaleApplies(scale, dims)) {
-    return `${base2} \u2014 not an integer scale of ${dims.width}\xD7${dims.height}`;
+    return `${base2} (not an integer scale of ${dims.width}\xD7${dims.height})`;
   }
   return base2;
 }
@@ -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,11 +95812,11 @@ 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 }),
-              " \u2014 ",
+            /* @__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 }),
+              ": ",
               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. 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: "Select branch" }),
+            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: [
-  "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" }),
+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. Declare them here (or in ",
+  /* @__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({
@@ -98024,7 +98004,7 @@ var VariablesPanel = memo59(function VariablesPanel2({
       const wanted = action.declaration(id).type;
       if (existing && existing.type !== wanted) {
         showToast(
-          `"${id}" is already a ${existing.type} variable \u2014 pick another id for this ${wanted} binding`,
+          `"${id}" is already a ${existing.type} variable. Pick another id for this ${wanted} binding`,
           "error"
         );
         return;
@@ -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, so 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,
@@ -98696,7 +98676,7 @@ var StudioRightPanels = memo60(function StudioRightPanels2({
   );
   const handleHideAllSelected = useCallback188(() => {
     if (!canHideSelections(domEditGroupSelections)) {
-      showToast("Audio can't be hidden \u2014 use the group's own controls", "info");
+      showToast("Audio can't be hidden. Use the group's own controls", "info");
       return;
     }
     const { elements } = usePlayerStore.getState();
@@ -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(
+        label: linkedSelection ? "Linked Selection on: a click selects both halves (\u2325-click for one)" : "Linked Selection off: a click selects one clip",
+        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(
+          label: rippleEditEnabled ? "Ripple on: keeps the main track gapless" : "Ripple off: deleting a main-track clip leaves a gap",
+          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,26 +99390,26 @@ 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(
+          label: thumbnailsVisible ? "Hide thumbnails: labels only" : "Show thumbnails: posters stay visible; richer previews appear on interaction",
+          children: /* @__PURE__ */ jsx250(
             "button",
             {
               type: "button",
-              "aria-label": thumbnailsVisible ? "Hide thumbnails \u2014 labels only" : "Show thumbnails \u2014 posters stay visible; richer previews appear on interaction",
+              "aria-label": thumbnailsVisible ? "Hide thumbnails: labels only" : "Show thumbnails: posters stay visible; richer previews appear on interaction",
               "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,
@@ -100968,4 +100949,3 @@ export {
   useTimelinePlayer,
   zoomTimelineToRange
 };
-//# sourceMappingURL=index.js.map