@hyperframes/studio 0.8.143 → 0.8.145

package/dist/index.js

@@ -7,6 +7,8 @@ import {
   PANEL_IDS,
   Player,
   STUDIO_PREVIEW_FPS,
+  announcePreviewDocumentLoaded,
+  announcePreviewPromoted,
   applyPreviewVariablesToUrl,
   clampTimelineZoomPercent,
   clampToDuration,
@@ -26,10 +28,15 @@ import {
   isPreviewBooted,
   isRevealedAudioFxRequestCurrent,
   liveTime,
+  markScenesStale,
+  onPreviewContentReplaced,
+  onPreviewDocumentLoaded,
+  onPreviewPromoted,
   panelsInZone,
   parseDockLayout,
   patchElements,
   readStudioUiPreferences,
+  sceneSwapFor,
   secondsToFrame,
   stepFrameTime,
   thumbnailRevisionOf,
@@ -40,7 +47,7 @@ import {
   usePreviewVariablesStore,
   whenPreviewBooted,
   writeStudioUiPreferences
-} from "./chunk-H2DUOXTF.js";
+} from "./chunk-NZPJUZKT.js";
 import {
   Button,
   ContextMenu,
@@ -72,13 +79,9 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-LOVBLSMR.js";
+} from "./chunk-Y2OHHNM2.js";
 import {
   DOM_EDIT_LAYER_OBSERVER_INIT,
-  STUDIO_FLAT_INSPECTOR_ENABLED,
-  STUDIO_SDK_CUTOVER_ENABLED,
-  STUDIO_SDK_CUTOVER_FAMILIES,
-  STUDIO_SDK_RESOLVER_SHADOW_ENABLED,
   buildDefaultDomEditTextField,
   buildDomEditPatchTarget,
   buildDomEditRichTextPatchOperation,
@@ -96,19 +99,20 @@ import {
   getDomEditTargetKey,
   getDomLayerPatchTarget,
   isElementComputedVisible,
-  isSdkFamilyEnabled,
   isTextEditableSelection,
   liveLayerElement,
-  manualEditingAvailability_exports,
   readHfId,
   resolveAllVisualDomEditTargets,
   resolveDomEditSelection,
-  serializeDomEditTextFields,
-  studioApiFetch
-} from "./chunk-UYWON5AX.js";
+  serializeDomEditTextFields
+} from "./chunk-TP6D3U37.js";
 import {
   LAYER_REVEAL_PRIOR_POSITION_ATTR,
   LAYER_REVEAL_PRIOR_Z_ATTR,
+  STUDIO_FLAT_INSPECTOR_ENABLED,
+  STUDIO_SDK_CUTOVER_ENABLED,
+  STUDIO_SDK_CUTOVER_FAMILIES,
+  STUDIO_SDK_RESOLVER_SHADOW_ENABLED,
   applyMediaMetadataFromElement,
   buildProjectApiPath,
   buildProjectHash,
@@ -136,8 +140,10 @@ import {
   isAudibleVideoNode,
   isElementVisibleThroughAncestors,
   isHtmlElement,
+  isSdkFamilyEnabled,
   isTimelineIgnoredElement,
   isVideoAudible,
+  manualEditingAvailability_exports,
   normalizeTimelineCompositionSource,
   parseCssColor,
   parseProjectHashRoute,
@@ -158,13 +164,15 @@ import {
   roundTo3,
   roundToCenti,
   roundToLayoutPx,
+  roundToLayoutSize,
   runtimeAudioId,
   sameTimelineText,
   setCompositionSourceMap,
   splitTimelineElementKey,
+  studioApiFetch,
   toHexColor,
   wrapTimeline
-} from "./chunk-TFLU2MGI.js";
+} from "./chunk-6JY3MTIX.js";
 import "./chunk-PZ5AY32C.js";
 
 // src/components/EditorShell.tsx
@@ -16486,17 +16494,24 @@ var measure = (entries) => isTimelineZoomPreviewing() || commit(
   })
 );
 var onPresence = (entries) => measure(entries.filter((entry2) => entry2.isIntersecting));
-var onResize = (entries) => measure(
-  entries.map(({ target, contentRect: { width, height } }) => ({
-    target,
-    size: { width, height }
-  }))
-);
+var pendingSizes = /* @__PURE__ */ new Map();
+var pendingSizesFrame = 0;
+var applyPendingSizes = () => {
+  pendingSizesFrame = 0;
+  const entries = [...pendingSizes].map(([target, size]) => ({ target, size }));
+  pendingSizes.clear();
+  measure(entries);
+};
+var applyResizesNextFrame = (entries) => {
+  for (const { target, contentRect } of entries)
+    pendingSizes.set(target, { width: contentRect.width, height: contentRect.height });
+  pendingSizesFrame ||= requestAnimationFrame(applyPendingSizes);
+};
 var observeIntersections = (callback) => typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver(callback, GAP_WARNING);
 function acquire() {
   if (users++ === 0) {
     shared = {
-      resize: new ResizeObserver(onResize),
+      resize: new ResizeObserver(applyResizesNextFrame),
       presence: observeIntersections(onPresence),
       gaps: observeIntersections(
         (entries) => entries.some((entry2) => entry2.isIntersecting) && scheduleRefresh()
@@ -16517,6 +16532,9 @@ function release() {
   window.removeEventListener("scroll", scheduleRefresh, { capture: true });
   cancelAnimationFrame(frame2);
   frame2 = 0;
+  cancelAnimationFrame(pendingSizesFrame);
+  pendingSizesFrame = 0;
+  pendingSizes.clear();
 }
 var watchGap = (gap) => {
   if (!gap) return;
@@ -16557,6 +16575,7 @@ function useThumbnailStripSize() {
       resize.unobserve(target);
       presence?.unobserve(target);
       strips.delete(target);
+      pendingSizes.delete(target);
       release();
     };
   }, []);
@@ -17575,8 +17594,8 @@ import { motionPathPluginUrl } from "@hyperframes/core/gsap-cdn";
 // src/utils/authoredSource.ts
 import { ensureHfIds, isCompositionTemplate } from "@hyperframes/parsers/hf-ids";
 import {
-  STUDIO_PREVIEW_LAZY_ATTR,
-  STUDIO_PREVIEW_UPCOMING_ATTR
+  PREVIEW_ONLY_ATTRS,
+  STUDIO_PREVIEW_LAZY_ATTR
 } from "@hyperframes/core/studio-preview-mark";
 function parseSavedSource(html2) {
   return new DOMParser().parseFromString(ensureHfIds(html2), "text/html");
@@ -17657,10 +17676,8 @@ function authoredMarkup(authored, live, sourceFile) {
 function liveMarkupWithoutPreviewMarks(live) {
   const copy = live.cloneNode(true);
   for (const el of [copy, ...Array.from(copy.querySelectorAll("*"))]) {
-    el.removeAttribute(STUDIO_PREVIEW_UPCOMING_ATTR);
-    if (!el.hasAttribute(STUDIO_PREVIEW_LAZY_ATTR)) continue;
-    el.removeAttribute("loading");
-    el.removeAttribute(STUDIO_PREVIEW_LAZY_ATTR);
+    if (el.hasAttribute(STUDIO_PREVIEW_LAZY_ATTR)) el.removeAttribute("loading");
+    for (const attr of PREVIEW_ONLY_ATTRS) el.removeAttribute(attr);
   }
   return copy.outerHTML;
 }
@@ -29909,9 +29926,10 @@ function buildStandaloneRootTimelineElement(params) {
 
 // src/player/hooks/timelineSyncHydration.ts
 import { resolveCssStackingContextId as resolveCssStackingContextId2 } from "@hyperframes/core/runtime/stacking-context";
+import { LOOP_INFLATED_TIMELINE_SECONDS } from "@hyperframes/core/runtime/composition-length";
 import { HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR3 } from "@hyperframes/core/audio-groups";
 function sanitizeDurationSeconds(value) {
-  return Number.isFinite(value) && value > 0 && value < 7200 ? value : 0;
+  return Number.isFinite(value) && value > 0 && value < LOOP_INFLATED_TIMELINE_SECONDS ? value : 0;
 }
 function readChildAudioGroupState(child) {
   const audioGroup = child.getAttribute(HF_AUDIO_GROUP_ATTR3);
@@ -31289,7 +31307,7 @@ function readParentFlexBasisPixels(element, size) {
   const display2 = readStyleOrComputed(parent, "display").trim();
   if (display2 !== "flex" && display2 !== "inline-flex") return null;
   const direction = readStyleOrComputed(parent, "flex-direction").trim();
-  return roundToLayoutPx(Math.max(1, direction.startsWith("column") ? size.height : size.width));
+  return direction.startsWith("column") ? size.height : size.width;
 }
 function restoreStaleStudioScaleResize(element) {
   if (!element.hasAttribute(STUDIO_ORIGINAL_SCALE_ATTR)) return;
@@ -31352,17 +31370,16 @@ function writeStudioBoxSizeVars(element, size) {
     element.setAttribute(STUDIO_ORIGINAL_DISPLAY_ATTR, element.style.getPropertyValue("display"));
   }
   element.setAttribute(STUDIO_BOX_SIZE_ATTR, "true");
-  element.style.setProperty(STUDIO_WIDTH_PROP, `${roundToLayoutPx(Math.max(1, size.width))}px`);
-  element.style.setProperty(STUDIO_HEIGHT_PROP, `${roundToLayoutPx(Math.max(1, size.height))}px`);
+  element.style.setProperty(STUDIO_WIDTH_PROP, `${size.width}px`);
+  element.style.setProperty(STUDIO_HEIGHT_PROP, `${size.height}px`);
 }
-function applyStudioBoxSizeDimensions(element, size) {
+function applyStudioBoxSizeDimensions(element, wantedSize) {
+  const size = roundToLayoutSize(wantedSize);
   writeStudioBoxSizeVars(element, size);
   restoreStaleStudioScaleResize(element);
-  const width = roundToLayoutPx(Math.max(1, size.width));
-  const height = roundToLayoutPx(Math.max(1, size.height));
   element.style.setProperty("box-sizing", "border-box");
-  element.style.setProperty("width", `${width}px`);
-  element.style.setProperty("height", `${height}px`);
+  element.style.setProperty("width", `${size.width}px`);
+  element.style.setProperty("height", `${size.height}px`);
   element.style.setProperty("min-width", "0px");
   element.style.setProperty("min-height", "0px");
   element.style.setProperty("max-width", "none");
@@ -31377,6 +31394,7 @@ function applyStudioBoxSizeDimensions(element, size) {
   if (computedDisplay === "inline") {
     element.style.setProperty("display", "inline-block");
   }
+  return size;
 }
 function applyStudioBoxSize(element, size) {
   promoteInlineForTransform(element);
@@ -31394,7 +31412,7 @@ function applyStudioBoxSizeDraft(element, size) {
     boxSizeDraftBases.set(element, { width: element.offsetWidth, height: element.offsetHeight });
   }
   promoteInlineForTransform(element);
-  applyStudioBoxSizeDimensions(element, size);
+  return applyStudioBoxSizeDimensions(element, size);
 }
 function isSimpleRotateAngle(value) {
   return /^-?(?:\d+(?:\.\d+)?|\.\d+)(?:deg|rad|turn|grad)$/.test(value.trim());
@@ -31503,79 +31521,6 @@ function isPreviewChanging() {
   return changing() && !givenUp;
 }
 
-// src/player/sceneSwap.ts
-var SCENES_SWAPPED = "hf-scenes-swapped";
-var SCENE_SWAP_MS = 5e3;
-function onPreviewContentReplaced(iframe, onReplaced) {
-  iframe.addEventListener("load", onReplaced);
-  iframe.addEventListener(SCENES_SWAPPED, onReplaced);
-  return () => {
-    iframe.removeEventListener("load", onReplaced);
-    iframe.removeEventListener(SCENES_SWAPPED, onReplaced);
-  };
-}
-var PREVIEW_PROMOTED = "hf-preview-promoted";
-function announcePreviewPromoted(promotion) {
-  promotion.live.ownerDocument.dispatchEvent(
-    new CustomEvent(PREVIEW_PROMOTED, { detail: promotion })
-  );
-}
-function onPreviewPromoted(doc, listener2) {
-  const handle = (event) => listener2(event.detail);
-  doc.addEventListener(PREVIEW_PROMOTED, handle);
-  return () => doc.removeEventListener(PREVIEW_PROMOTED, handle);
-}
-function markScenesStale(iframe, files) {
-  const doc = iframe?.contentDocument;
-  const meta = doc?.querySelector('meta[name="hf-scene-parts"]');
-  if (!doc || !meta) return;
-  let parts;
-  try {
-    parts = JSON.parse(meta.content);
-  } catch {
-    return;
-  }
-  for (const file of files) {
-    const hosts = doc.querySelectorAll(`[data-composition-file="${CSS.escape(file)}"]`);
-    if (hosts.length === 0 && file.endsWith(".html")) parts.shared = "";
-    for (const host of hosts) {
-      const scene = host.closest("[data-hf-scene]")?.getAttribute("data-hf-scene");
-      if (scene && scene in parts.scenes) parts.scenes[scene] = "";
-    }
-  }
-  meta.content = JSON.stringify(parts);
-}
-function sceneSwapFor(iframe) {
-  const win = iframe.contentWindow;
-  const swap = win?.__hfSwapScenes;
-  if (typeof swap !== "function") return null;
-  return async (url, isCurrent, cancel) => {
-    if (cancel?.aborted) throw cancel.reason;
-    const deadline = new AbortController();
-    const timer = setTimeout(
-      () => deadline.abort(new Error("the preview took too long to swap")),
-      SCENE_SWAP_MS
-    );
-    cancel?.addEventListener("abort", () => deadline.abort(cancel.reason), { once: true });
-    const swapping = (async () => {
-      const response = await studioApiFetch(url, { signal: deadline.signal });
-      if (!response.ok) throw new Error(`preview request failed with ${response.status}`);
-      const html2 = await response.text();
-      if (!isCurrent()) throw new Error("superseded by a newer reload");
-      await swap.call(win, html2, deadline.signal);
-    })();
-    const expired = new Promise(
-      (_resolve, reject) => deadline.signal.addEventListener("abort", () => reject(deadline.signal.reason))
-    );
-    try {
-      await Promise.race([swapping, expired]);
-    } finally {
-      clearTimeout(timer);
-    }
-    iframe.dispatchEvent(new Event(SCENES_SWAPPED));
-  };
-}
-
 // src/player/hooks/useShadowPreviewReload.ts
 var SHADOW_READY_TIMEOUT_MS = 15e3;
 var SHADOW_READY_BUDGETS = 3;
@@ -37564,7 +37509,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-KBTPQKGA.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-PTP2ICGM.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -37620,7 +37565,7 @@ function ChildRectOutlines({
 
 // src/components/editor/domEditResizeLocal.ts
 var MIN_RESIZE_LOCAL_PX = 1;
-var DEGENERATE_START_DIST_PX = 3;
+var DEGENERATE_START_DIST_PX = 0.5;
 function resolveCenterResizeScale(input) {
   const startDist = Math.hypot(
     input.pointerStart.x - input.centerStart.x,
@@ -37675,6 +37620,17 @@ function resolveRotatedResizeCursor(handle, rotationDeg) {
   const bucket = Math.round(normalized / 45) % 8;
   return CURSORS_8[bucket];
 }
+function resizeRemainderShift(corners, grab, { wanted, written }) {
+  const u = { x: corners.ne.x - corners.nw.x, y: corners.ne.y - corners.nw.y };
+  const v = { x: corners.sw.x - corners.nw.x, y: corners.sw.y - corners.nw.y };
+  const det = u.x * v.y - u.y * v.x;
+  if (!det) return { x: 0, y: 0 };
+  const su = Math.sign((grab.x * v.y - grab.y * v.x) / det);
+  const sv = Math.sign((u.x * grab.y - u.y * grab.x) / det);
+  const kw = su * (wanted.width - written.width) / (2 * written.width);
+  const kh = sv * (wanted.height - written.height) / (2 * written.height);
+  return { x: u.x * kw + v.x * kh, y: u.y * kw + v.y * kh };
+}
 function computeNextResizeAnchor(prev, fixedStart, fixedNow) {
   const base2 = prev ?? { dx: 0, dy: 0 };
   return { dx: base2.dx + (fixedStart.x - fixedNow.x), dy: base2.dy + (fixedStart.y - fixedNow.y) };
@@ -39602,6 +39558,7 @@ function startGesture(kind, e, opts, options) {
       manualEditDragToken,
       snapContext,
       resizeHandle: kind === "resize" ? options?.resizeHandle ?? "se" : void 0,
+      resizePressFromCorner: kind === "resize" && options?.resizeCorner ? { x: e.clientX - options.resizeCorner.x, y: e.clientY - options.resizeCorner.y } : void 0,
       resizeFixedCenterStart
     };
     if (kind === "resize") {
@@ -39695,7 +39652,7 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
     offerUndo();
   };
   const drawPressedBox = (origin2) => origin2 && ((dx, dy) => opts.setOverlayRect(shiftedOverlayRect(origin2, dx, dy)));
-  const drawResizedBox = (origin2, press) => {
+  const drawResizedBox = (origin2, grabbed) => {
     if (!origin2) return null;
     const bounds = opts.overlayRef.current?.getBoundingClientRect();
     const centre = {
@@ -39703,8 +39660,12 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
       y: (bounds?.top ?? 0) + origin2.top + origin2.height / 2
     };
     return (dx, dy) => {
-      const pointer = { x: press.x + dx, y: press.y + dy };
-      const scale = resolveCenterResizeScale({ pointer, pointerStart: press, centerStart: centre });
+      const pointer = { x: grabbed.x + dx, y: grabbed.y + dy };
+      const scale = resolveCenterResizeScale({
+        pointer,
+        pointerStart: grabbed,
+        centerStart: centre
+      });
       const [width, height] = [origin2.width * scale, origin2.height * scale];
       opts.setOverlayRect({
         ...origin2,
@@ -39823,7 +39784,10 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
     let draw = null;
     if (kind === "drag") draw = drawPressedBox(opts.overlayRectRef.current);
     if (kind === "resize")
-      draw = drawResizedBox(opts.overlayRectRef.current, { x: e.clientX, y: e.clientY });
+      draw = drawResizedBox(
+        opts.overlayRectRef.current,
+        options?.resizeCorner ?? { x: e.clientX, y: e.clientY }
+      );
     return startOnShownPreview(
       e,
       () => {
@@ -39838,6 +39802,7 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
           selection,
           rect,
           resizeHandle: options?.resizeHandle,
+          resizeCorner: options?.resizeCorner,
           at
         });
       },
@@ -39848,10 +39813,14 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
 }
 
 // src/components/editor/resizeDraft.ts
-function resolveResizeAnchor(g, corners, measureOrientedRect) {
+function resolveResizeAnchor(g, corners, measureOrientedRect, sizes) {
   const fixedStart = g.resizeFixedCenterStart;
   if (corners && fixedStart) {
-    return computeNextResizeAnchor(g.lastResizeAnchor, fixedStart, overlayCornersCentroid(corners));
+    const press = g.resizePressFromCorner ?? { x: 0, y: 0 };
+    const grab = { x: g.startX - press.x - g.centerX, y: g.startY - press.y - g.centerY };
+    const shift = resizeRemainderShift(corners, grab, sizes);
+    const target = { x: fixedStart.x + shift.x, y: fixedStart.y + shift.y };
+    return computeNextResizeAnchor(g.lastResizeAnchor, target, overlayCornersCentroid(corners));
   }
   const fallbackRect = measureOrientedRect();
   return resolveResizeCenterAnchorOffset({
@@ -39861,9 +39830,9 @@ function resolveResizeAnchor(g, corners, measureOrientedRect) {
     overlayHeight: fallbackRect ? fallbackRect.height : g.originHeight
   });
 }
-function resolveAnchoredResizeDraft(g, member, element, overlayEl, iframe, measureOrientedRect) {
+function resolveAnchoredResizeDraft(g, member, element, overlayEl, iframe, measureOrientedRect, sizes) {
   const corners = overlayEl && iframe ? elementCornerOverlayPoints(overlayEl, iframe, element) : null;
-  const anchor2 = resolveResizeAnchor(g, corners, measureOrientedRect);
+  const anchor2 = resolveResizeAnchor(g, corners, measureOrientedRect, sizes);
   g.lastResizeAnchor = anchor2;
   applyManualOffsetDragDraft(member, anchor2.dx, anchor2.dy);
   return measureOrientedRect() ?? {
@@ -39876,7 +39845,7 @@ function resolveAnchoredResizeDraft(g, member, element, overlayEl, iframe, measu
     angle: g.actualRotation
   };
 }
-function resolveResizeDraftRect(g, element, overlayEl, iframe, measureOrientedRect) {
+function resolveResizeDraftRect(g, element, overlayEl, iframe, measureOrientedRect, sizes) {
   if (g.pathOffsetMember) {
     return resolveAnchoredResizeDraft(
       g,
@@ -39884,7 +39853,8 @@ function resolveResizeDraftRect(g, element, overlayEl, iframe, measureOrientedRe
       element,
       overlayEl,
       iframe,
-      measureOrientedRect
+      measureOrientedRect,
+      sizes
     );
   }
   return measureOrientedRect() ?? {
@@ -40209,14 +40179,15 @@ function createDomEditOverlayGestureHandlers(opts) {
       }
       if (g.pathOffsetMember) applyManualOffsetDragDraft(g.pathOffsetMember, dx, dy);
     } else {
+      const grab = g.resizePressFromCorner ?? { x: 0, y: 0 };
       const nextSize = resolveCenterResizeSize({
         baseWidth: g.actualWidth,
         baseHeight: g.actualHeight,
-        pointer: { x: e.clientX, y: e.clientY },
-        pointerStart: { x: g.startX, y: g.startY },
+        pointer: { x: e.clientX - grab.x, y: e.clientY - grab.y },
+        pointerStart: { x: g.startX - grab.x, y: g.startY - grab.y },
         centerStart: { x: g.centerX, y: g.centerY }
       });
-      applyStudioBoxSizeDraft(sel.element, nextSize);
+      const writtenSize = applyStudioBoxSizeDraft(sel.element, nextSize);
       const overlayEl = opts.overlayRef.current;
       const iframe = opts.iframeRef.current;
       const measureOrientedRect = () => overlayEl && iframe ? orientedOverlayRect(overlayEl, iframe, sel.element) : null;
@@ -40225,7 +40196,8 @@ function createDomEditOverlayGestureHandlers(opts) {
         sel.element,
         overlayEl,
         iframe,
-        measureOrientedRect
+        measureOrientedRect,
+        { wanted: nextSize, written: writtenSize }
       );
       logResizeMove({
         pointer: { x: e.clientX, y: e.clientY },
@@ -41302,13 +41274,22 @@ var RESIZE_HANDLE_DEFS = [
   { handle: "se", cursor: "nwse-resize", x: "right", y: "bottom" }
 ];
 var NO_CROP_INSET = { top: 0, right: 0, bottom: 0, left: 0 };
-function resizeHandleStyle(def, overlayRect, cropInset) {
+function resizeHandleLayout(def, overlayRect, cropInset) {
   const half = RESIZE_HANDLE_HIT_PX / 2;
   const inset = cropInset ?? NO_CROP_INSET;
-  const style = { cursor: def.cursor, touchAction: "none" };
-  style.left = def.x === "left" ? overlayRect.left + inset.left - half : overlayRect.left + overlayRect.width - inset.right - half;
-  style.top = def.y === "top" ? overlayRect.top + inset.top - half : overlayRect.top + overlayRect.height - inset.bottom - half;
-  return style;
+  const cornerX = def.x === "left" ? overlayRect.left + inset.left : overlayRect.left + overlayRect.width - inset.right;
+  const cornerY = def.y === "top" ? overlayRect.top + inset.top : overlayRect.top + overlayRect.height - inset.bottom;
+  const slideOutToFreeMiddleX = (def.x === "left" ? -1 : 1) * Math.max(0, half - (overlayRect.width - inset.left - inset.right) / 4);
+  const slideOutToFreeMiddleY = (def.y === "top" ? -1 : 1) * Math.max(0, half - (overlayRect.height - inset.top - inset.bottom) / 4);
+  return {
+    style: {
+      cursor: def.cursor,
+      touchAction: "none",
+      left: cornerX - half + slideOutToFreeMiddleX,
+      top: cornerY - half + slideOutToFreeMiddleY
+    },
+    anchor: { left: half - slideOutToFreeMiddleX, top: half - slideOutToFreeMiddleY }
+  };
 }
 function DomEditGroupChrome({
   groupOverlayItems,
@@ -41440,26 +41421,42 @@ function DomEditSelectionChrome({
             },
             selectionKey
           ),
-          canManipulate && !editing && selection.capabilities.canApplyManualSize && RESIZE_HANDLE_DEFS.map(
-            (def) => def.handle !== "se" && !selection.capabilities.canApplyManualOffset ? null : /* @__PURE__ */ jsx99(
+          canManipulate && !editing && selection.capabilities.canApplyManualSize && RESIZE_HANDLE_DEFS.map((def) => {
+            if (def.handle !== "se" && !selection.capabilities.canApplyManualOffset) return null;
+            const layout = resizeHandleLayout(def, overlayRect, cropOutlineInsetPx ?? void 0);
+            return /* @__PURE__ */ jsxs69(
               "div",
               {
                 className: "pointer-events-auto absolute flex h-4 w-4 items-center justify-center",
                 style: {
-                  ...resizeHandleStyle(def, overlayRect, cropOutlineInsetPx ?? void 0),
+                  ...layout.style,
                   // Cursor rotates with the object: bucket the corner's base
                   // diagonal + element rotation into the 8 CSS resize cursors.
                   cursor: resolveRotatedResizeCursor(def.handle, overlayRect.angle ?? 0)
                 },
                 onPointerDown: (e) => {
                   e.stopPropagation();
-                  gestures.startGesture("resize", e, { resizeHandle: def.handle });
+                  const corner = e.currentTarget.querySelector("[data-resize-corner]")?.getBoundingClientRect();
+                  gestures.startGesture("resize", e, {
+                    resizeHandle: def.handle,
+                    resizeCorner: corner && { x: corner.left, y: corner.top }
+                  });
                 },
-                children: /* @__PURE__ */ jsx99("div", { className: "pointer-events-none h-[12px] w-[12px] rounded-full border-[1.5px] border-studio-accent bg-white shadow-[0_0_3px_rgba(0,0,0,0.45)]" })
+                children: [
+                  /* @__PURE__ */ jsx99(
+                    "span",
+                    {
+                      "data-resize-corner": true,
+                      className: "pointer-events-none absolute",
+                      style: layout.anchor
+                    }
+                  ),
+                  /* @__PURE__ */ jsx99("div", { className: "pointer-events-none h-[12px] w-[12px] rounded-full border-[1.5px] border-studio-accent bg-white shadow-[0_0_3px_rgba(0,0,0,0.45)]" })
+                ]
               },
               def.handle
-            )
-          )
+            );
+          })
         ]
       }
     ),
@@ -73303,6 +73300,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
       }
       if (resolution && resolution !== "auto") body.resolution = resolution;
       if (composition) body.composition = composition;
+      if (opts.gpu) body.gpu = true;
       if (opts.variables && Object.keys(opts.variables).length > 0) {
         body.variables = opts.variables;
       }
@@ -84776,6 +84774,9 @@ function tweenUsesScaleLonghands(anim) {
   );
   return inKeyframes || Object.keys(anim?.properties ?? {}).some(isLonghand);
 }
+function rectCentre(rect) {
+  return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+}
 async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations, dragOffset, draw = (run) => run(), stamp) {
   const moment = editMoment(stamp);
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
@@ -84890,8 +84891,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     scaleDraftEl = el;
     committedScale = useScaleLonghands ? { x: newScaleX, y: newScaleY } : { x: newScaleX, y: newScaleX };
     if (el) {
-      const dropRect = draw(() => el.getBoundingClientRect());
-      scaleDraftDropPoint = { x: dropRect.x, y: dropRect.y };
+      scaleDraftDropPoint = draw(() => rectCentre(el.getBoundingClientRect()));
     }
   } else {
     resizeProps = {
@@ -84922,31 +84922,31 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       );
       const base3 = { x: baseGsapX, y: baseGsapY };
       setElementGsapPosition(draftEl, base3.x, base3.y);
-      const post2 = draftEl.getBoundingClientRect();
-      const residual = { x: dropPoint.x - post2.x, y: dropPoint.y - post2.y };
-      if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return null;
-      if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
-        logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base: base3 });
-        return "settled";
-      }
+      const post2 = rectCentre(draftEl.getBoundingClientRect());
+      const residual2 = { x: dropPoint.x - post2.x, y: dropPoint.y - post2.y };
+      if (!Number.isFinite(residual2.x) || !Number.isFinite(residual2.y)) return null;
       const corrected2 = {
-        x: roundTo3(base3.x + residual.x),
-        y: roundTo3(base3.y + residual.y)
+        x: roundTo3(base3.x + residual2.x),
+        y: roundTo3(base3.y + residual2.y)
       };
+      if (corrected2.x === roundTo3(base3.x) && corrected2.y === roundTo3(base3.y)) {
+        logResize("scale-finalize", { skipped: "already-on-drop-point", residual: residual2, base: base3 });
+        return "settled";
+      }
       logResize("scale-finalize", {
         dropPoint,
-        post: { x: post2.x, y: post2.y },
-        residual,
+        post: post2,
+        residual: residual2,
         gsapPos,
         base: base3,
         corrected: corrected2
       });
       setElementGsapPosition(draftEl, corrected2.x, corrected2.y);
-      return { base: base3, corrected: corrected2 };
+      return { base: base3, corrected: corrected2, residual: residual2 };
     });
     if (measured === null) return false;
     if (measured === "settled") return true;
-    const { base: base2, corrected } = measured;
+    const { base: base2, corrected, residual } = measured;
     const currentAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : resolved2?.animations ?? animations;
     const delta = { x: corrected.x - base2.x, y: corrected.y - base2.y };
     const positionTween = pickClosestToPlayhead(
@@ -84956,6 +84956,10 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       moment.time
     );
     if (positionTween) {
+      if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
+        draw(() => setElementGsapPosition(draftEl, base2.x, base2.y));
+        return true;
+      }
       logResize("scale-finalize", { route: "position-keyframe", tweenId: positionTween.id });
       assertGsapEditPersisted(
         await commitGsapPositionFromDrag(selection, positionTween, delta, base2, iframe, {
@@ -89138,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]);
@@ -93779,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 {
   }
 }
@@ -93837,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]
   );
@@ -95644,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",
@@ -95733,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",
@@ -95745,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",
@@ -95758,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,
@@ -95777,10 +95812,10 @@ function FormatInfoTooltip({ format }) {
           className: "fixed w-52 p-2 rounded-sm bg-input border border-border-input shadow-menu z-200",
           style: { left: position?.left ?? -9999, top: position?.top ?? -9999 },
           children: [
-            /* @__PURE__ */ jsx233("p", { className: "text-step-10 font-semibold text-text-1 mb-0.5", children: info.label }),
-            /* @__PURE__ */ jsx233("p", { className: "text-step-9 text-text-3 leading-tight", children: info.desc }),
-            /* @__PURE__ */ jsx233("div", { className: "mt-1.5 pt-1.5 border-t border-border", children: ["mp4", "mov", "webm"].filter((f) => f !== format).map((f) => /* @__PURE__ */ jsxs185("p", { className: "text-step-9 text-text-4 leading-relaxed", children: [
-              /* @__PURE__ */ jsx233("span", { className: "text-text-3 font-medium", children: FORMAT_INFO[f].label }),
+            /* @__PURE__ */ jsx234("p", { className: "text-step-10 font-semibold text-text-1 mb-0.5", children: info.label }),
+            /* @__PURE__ */ jsx234("p", { className: "text-step-9 text-text-3 leading-tight", children: info.desc }),
+            /* @__PURE__ */ jsx234("div", { className: "mt-1.5 pt-1.5 border-t border-border", children: ["mp4", "mov", "webm"].filter((f) => f !== format).map((f) => /* @__PURE__ */ jsxs186("p", { className: "text-step-9 text-text-4 leading-relaxed", children: [
+              /* @__PURE__ */ jsx234("span", { className: "text-text-3 font-medium", children: FORMAT_INFO[f].label }),
               " \u2014 ",
               FORMAT_INFO[f].desc
             ] }, f)) })
@@ -95824,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,
@@ -95835,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",
@@ -95856,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",
@@ -95873,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",
@@ -95890,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",
@@ -95908,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",
@@ -95921,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)
     ] })
@@ -95958,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,
@@ -95971,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",
@@ -95996,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" })
                 }
               )
             }
@@ -96004,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",
@@ -96019,7 +96067,7 @@ var RenderQueue = memo57(function RenderQueue2({
           strokeWidth: "1.5",
           className: "text-text-5",
           children: [
-            /* @__PURE__ */ jsx233(
+            /* @__PURE__ */ jsx234(
               "rect",
               {
                 x: "2",
@@ -96032,7 +96080,7 @@ var RenderQueue = memo57(function RenderQueue2({
                 strokeLinejoin: "round"
               }
             ),
-            /* @__PURE__ */ jsx233(
+            /* @__PURE__ */ jsx234(
               "path",
               {
                 d: "M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5M17 17h5M17 7h5",
@@ -96043,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,
@@ -96068,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,
@@ -96086,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
@@ -96110,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",
@@ -96124,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" })
       ]
     }
   );
@@ -96143,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",
@@ -96163,7 +96212,7 @@ function SlideList({
             }
           },
           children: [
-            /* @__PURE__ */ jsx235(
+            /* @__PURE__ */ jsx236(
               "input",
               {
                 type: "checkbox",
@@ -96174,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",
@@ -96191,7 +96240,7 @@ function SlideList({
                   children: "\u25B2"
                 }
               ),
-              /* @__PURE__ */ jsx235(
+              /* @__PURE__ */ jsx236(
                 "button",
                 {
                   type: "button",
@@ -96212,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({
@@ -96224,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",
@@ -96242,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",
@@ -96260,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",
@@ -96280,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" })
     ] })
   ] });
 }
@@ -96303,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,
@@ -96320,7 +96369,7 @@ function BranchTree({
           "aria-label": "New branch sequence name"
         }
       ),
-      /* @__PURE__ */ jsx235(
+      /* @__PURE__ */ jsx236(
         "button",
         {
           type: "button",
@@ -96330,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,
@@ -96364,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",
@@ -96380,7 +96429,7 @@ function BranchItem({
           },
           "aria-label": `Rename branch ${seq.label}`
         }
-      ) : /* @__PURE__ */ jsx235(
+      ) : /* @__PURE__ */ jsx236(
         "span",
         {
           role: "button",
@@ -96397,7 +96446,7 @@ function BranchItem({
           children: seq.label
         }
       ),
-      /* @__PURE__ */ jsx235(
+      /* @__PURE__ */ jsx236(
         "button",
         {
           type: "button",
@@ -96408,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",
@@ -96429,7 +96478,7 @@ function BranchItem({
             children: "Delete"
           }
         ),
-        /* @__PURE__ */ jsx235(
+        /* @__PURE__ */ jsx236(
           "button",
           {
             type: "button",
@@ -96440,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",
@@ -96459,7 +96508,7 @@ function BranchItem({
                   className: "accent-studio-accent shrink-0"
                 }
               ),
-              assigned ? /* @__PURE__ */ jsx235(
+              assigned ? /* @__PURE__ */ jsx236(
                 "button",
                 {
                   type: "button",
@@ -96468,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" })
     ] })
   ] });
 }
@@ -96500,19 +96549,19 @@ function HotspotTool({
     setHotspotLabel("");
   }, [selectedSceneId, targetSequenceId, elementKey3, hotspotLabel, onAddHotspot]);
   if (!selectedSceneId) {
-    return /* @__PURE__ */ jsx235("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsx235("p", { className: "text-[11px] text-neutral-500 italic", children: "Select a scene in the Slides list" }) });
+    return /* @__PURE__ */ jsx236("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsx236("p", { className: "text-[11px] text-neutral-500 italic", children: "Select a scene in the Slides list" }) });
   }
-  return /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
-    /* @__PURE__ */ jsxs186("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsxs186("p", { className: "text-[11px] text-neutral-400", children: [
+  return /* @__PURE__ */ jsxs187("div", { className: "flex flex-col gap-3 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs187("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs187("p", { className: "text-[11px] text-neutral-400", children: [
         "Selected element:",
         " ",
-        /* @__PURE__ */ jsx235("span", { className: "text-neutral-200 font-mono", children: elementKey3 ?? "none" })
+        /* @__PURE__ */ jsx236("span", { className: "text-neutral-200 font-mono", children: elementKey3 ?? "none" })
       ] }),
-      !elementKey3 && /* @__PURE__ */ jsx235("p", { className: "text-[10px] text-neutral-500 italic", children: "Click an element on the canvas to choose the hotspot target." }),
-      sequences.length === 0 && /* @__PURE__ */ jsx235("p", { className: "text-[10px] text-neutral-500 italic", children: "Create a branch in the Branches section first \u2014 hotspots jump to a branch." }),
-      /* @__PURE__ */ jsx235("label", { className: "text-[11px] text-neutral-400", children: "Hotspot label" }),
-      /* @__PURE__ */ jsx235(
+      !elementKey3 && /* @__PURE__ */ jsx236("p", { className: "text-[10px] text-neutral-500 italic", children: "Click an element on the canvas to choose the hotspot target." }),
+      sequences.length === 0 && /* @__PURE__ */ jsx236("p", { className: "text-[10px] text-neutral-500 italic", children: "Create a branch in the Branches section first \u2014 hotspots jump to a branch." }),
+      /* @__PURE__ */ jsx236("label", { className: "text-[11px] text-neutral-400", children: "Hotspot label" }),
+      /* @__PURE__ */ jsx236(
         "input",
         {
           type: "text",
@@ -96523,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",
@@ -96532,12 +96581,12 @@ function HotspotTool({
           onChange: (e) => setTargetSequenceId(e.target.value),
           "aria-label": "Target branch sequence",
           children: [
-            /* @__PURE__ */ jsx235("option", { value: "", children: "\u2014 select branch \u2014" }),
-            sequences.map((seq) => /* @__PURE__ */ jsx235("option", { value: seq.id, children: seq.label }, seq.id))
+            /* @__PURE__ */ jsx236("option", { value: "", children: "\u2014 select branch \u2014" }),
+            sequences.map((seq) => /* @__PURE__ */ jsx236("option", { value: seq.id, children: seq.label }, seq.id))
           ]
         }
       ),
-      /* @__PURE__ */ jsx235(
+      /* @__PURE__ */ jsx236(
         "button",
         {
           type: "button",
@@ -96549,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",
@@ -96713,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: [] };
@@ -96981,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",
@@ -96992,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",
@@ -97012,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",
@@ -97026,7 +97075,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs187(
+        /* @__PURE__ */ jsxs188(
           SectionHeader,
           {
             expanded: expandedSections.has("slides"),
@@ -97038,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,
@@ -97052,7 +97101,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             onReorder: handleReorder
           }
         ) }),
-        /* @__PURE__ */ jsx236(
+        /* @__PURE__ */ jsx237(
           SectionHeader,
           {
             expanded: expandedSections.has("inspector"),
@@ -97060,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,
@@ -97070,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"),
@@ -97083,7 +97132,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             ]
           }
         ),
-        expandedSections.has("branches") && /* @__PURE__ */ jsx236(
+        expandedSections.has("branches") && /* @__PURE__ */ jsx237(
           BranchTree,
           {
             sequences,
@@ -97097,7 +97146,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             onSelectBranchSlide: handleSelectBranchSlide
           }
         ),
-        /* @__PURE__ */ jsx236(
+        /* @__PURE__ */ jsx237(
           SectionHeader,
           {
             expanded: expandedSections.has("hotspot"),
@@ -97105,7 +97154,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
             children: "Hotspot Tool"
           }
         ),
-        expandedSections.has("hotspot") && /* @__PURE__ */ jsx236(
+        expandedSections.has("hotspot") && /* @__PURE__ */ jsx237(
           HotspotTool,
           {
             selectedSceneId,
@@ -97247,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",
@@ -97349,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
   ] });
 }
@@ -97359,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",
@@ -97401,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",
@@ -97414,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",
@@ -97425,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,
@@ -97435,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",
@@ -97449,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,
@@ -97458,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",
@@ -97467,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",
@@ -97478,7 +97527,7 @@ function DeclarationForm({
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ jsx237(
+      /* @__PURE__ */ jsx238(
         "button",
         {
           type: "button",
@@ -97492,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",
@@ -97512,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,
@@ -97520,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",
@@ -97532,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",
@@ -97545,7 +97594,7 @@ function CompositionSection({
                 onClick: () => onToggleEdit(editing ? null : key2)
               }
             ),
-            /* @__PURE__ */ jsx239(
+            /* @__PURE__ */ jsx240(
               RowAction,
               {
                 label: "\u2715",
@@ -97556,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),
@@ -97615,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,
@@ -97633,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, `'\\''`)}'`;
 }
@@ -97649,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,
@@ -97663,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",
@@ -97675,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",
@@ -97685,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),
@@ -97698,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({
@@ -97706,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",
@@ -97726,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"}`,
@@ -97737,7 +97786,7 @@ function PreviewModeHeader({
         }
       )
     ] }),
-    hasOverrides && /* @__PURE__ */ jsx240(
+    hasOverrides && /* @__PURE__ */ jsx241(
       "button",
       {
         type: "button",
@@ -97755,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",
@@ -97767,7 +97816,7 @@ function HandoffFooter({
           onClick: () => onCopy(command, "Render command")
         }
       ),
-      /* @__PURE__ */ jsx240(
+      /* @__PURE__ */ jsx241(
         RowAction,
         {
           label: "Copy values JSON",
@@ -97778,15 +97827,15 @@ function HandoffFooter({
     ] })
   ] });
 }
-var EMPTY_STATE = /* @__PURE__ */ jsxs190("p", { className: "text-[10px] leading-relaxed text-neutral-500", children: [
+var EMPTY_STATE = /* @__PURE__ */ jsxs191("p", { className: "text-[10px] leading-relaxed text-neutral-500", children: [
   "No variables declared. Variables make parts of this composition dynamic \u2014 declare them here (or in ",
-  /* @__PURE__ */ jsx240("code", { className: "font-mono", children: "data-composition-variables" }),
+  /* @__PURE__ */ jsx241("code", { className: "font-mono", children: "data-composition-variables" }),
   "), read them with",
   " ",
-  /* @__PURE__ */ jsx240("code", { className: "font-mono", children: "getVariables()" }),
+  /* @__PURE__ */ jsx241("code", { className: "font-mono", children: "getVariables()" }),
   ", and pass values at render time with",
   " ",
-  /* @__PURE__ */ jsx240("code", { className: "font-mono", children: "--variables" }),
+  /* @__PURE__ */ jsx241("code", { className: "font-mono", children: "--variables" }),
   "."
 ] });
 var VariablesPanel = memo59(function VariablesPanel2({
@@ -97970,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,
@@ -97990,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,
@@ -98008,15 +98057,15 @@ var VariablesPanel = memo59(function VariablesPanel2({
         },
         decl.id
       )),
-      /* @__PURE__ */ jsx240(
+      /* @__PURE__ */ jsx241(
         UndeclaredReads,
         {
           usage,
           onDeclare: (id) => handleAdd({ id, type: "string", label: id, default: "" })
         }
       ),
-      usage?.scanIncomplete && /* @__PURE__ */ jsx240("p", { className: "text-[9px] text-neutral-600", children: "Scripts access variables dynamically \u2014 usage info may be incomplete." }),
-      declarations.length > 0 && /* @__PURE__ */ jsx240(
+      usage?.scanIncomplete && /* @__PURE__ */ jsx241("p", { className: "text-[9px] text-neutral-600", children: "Scripts access variables dynamically \u2014 usage info may be incomplete." }),
+      declarations.length > 0 && /* @__PURE__ */ jsx241(
         HandoffFooter,
         {
           effectiveValues,
@@ -98024,7 +98073,7 @@ var VariablesPanel = memo59(function VariablesPanel2({
           onCopy: copyToClipboard
         }
       ),
-      addOpen ? /* @__PURE__ */ jsx240(
+      addOpen ? /* @__PURE__ */ jsx241(
         DeclarationForm,
         {
           initial: EMPTY_DRAFT,
@@ -98032,7 +98081,7 @@ var VariablesPanel = memo59(function VariablesPanel2({
           onSubmit: handleAdd,
           onCancel: () => setAddOpen(false)
         }
-      ) : /* @__PURE__ */ jsx240(
+      ) : /* @__PURE__ */ jsx241(
         "button",
         {
           type: "button",
@@ -98041,7 +98090,7 @@ var VariablesPanel = memo59(function VariablesPanel2({
           children: "+ Add variable"
         }
       ),
-      /* @__PURE__ */ jsx240(
+      /* @__PURE__ */ jsx241(
         VariablesOtherCompositions,
         {
           compositionPaths: compositions,
@@ -98174,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,
@@ -98204,7 +98253,7 @@ function DesignPanelPromoteProvider({
     (error) => showToast(getStudioSaveErrorMessage(error), "error"),
     [showToast]
   );
-  return /* @__PURE__ */ jsx241(
+  return /* @__PURE__ */ jsx242(
     VariablePromoteProvider,
     {
       session: handle.session,
@@ -98509,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,
@@ -98638,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,
@@ -98650,7 +98699,7 @@ var StudioRightPanels = memo60(function StudioRightPanels2({
       recordEdit,
       reloadPreview,
       forceReloadSharedSdkSession: forceReloadSdkSession,
-      children: /* @__PURE__ */ jsx242(
+      children: /* @__PURE__ */ jsx243(
         PropertyPanel,
         {
           projectId,
@@ -98721,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,
@@ -98735,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,
@@ -98755,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,
@@ -98767,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]
   );
@@ -98813,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,
@@ -98826,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,
@@ -98847,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",
@@ -98871,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 })
     }
   ) });
 }
@@ -98879,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",
@@ -98889,7 +98938,7 @@ function TimelineHistoryButtons(props) {
         onClick: onUndo
       }
     ),
-    /* @__PURE__ */ jsx246(
+    /* @__PURE__ */ jsx247(
       HistoryButton,
       {
         action: "redo",
@@ -98903,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);
@@ -98914,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")
     }
@@ -98931,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",
@@ -98957,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
           ] })
@@ -98983,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,
@@ -98998,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",
@@ -99010,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"
             ]
           }
@@ -99025,12 +99074,12 @@ function LinkedSelectionToggle() {
   const setLinkedSelection = useLinkedClipPreferences((s) => s.setLinkedSelection);
   const [menuAt, setMenuAt] = useState160(null);
   const closeMenu = useCallback190(() => setMenuAt(null), []);
-  return /* @__PURE__ */ jsxs196(Fragment69, { children: [
-    /* @__PURE__ */ jsx248(
+  return /* @__PURE__ */ jsxs197(Fragment69, { children: [
+    /* @__PURE__ */ jsx249(
       Tooltip,
       {
         label: linkedSelection ? "Linked Selection on \u2014 a click selects both halves (\u2325-click for one)" : "Linked Selection off \u2014 a click selects one clip",
-        children: /* @__PURE__ */ jsx248(
+        children: /* @__PURE__ */ jsx249(
           "button",
           {
             type: "button",
@@ -99042,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,
@@ -99165,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",
@@ -99179,14 +99228,14 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
           "aria-label": "Toggle timeline snapping",
           "aria-pressed": timelineSnapEnabled,
           className: timelineSnapEnabled ? flatActive : flatIdle,
-          children: /* @__PURE__ */ jsx249(Magnet, { size: 16, weight: "bold", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx250(Magnet, { size: 16, weight: "bold", "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx249(
+      /* @__PURE__ */ jsx250(
         Tooltip,
         {
           label: rippleEditEnabled ? "Ripple on \u2014 keeps the main track gapless" : "Ripple off \u2014 deleting a main-track clip leaves a gap",
-          children: /* @__PURE__ */ jsx249(
+          children: /* @__PURE__ */ jsx250(
             "button",
             {
               type: "button",
@@ -99194,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",
@@ -99207,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",
@@ -99223,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",
@@ -99236,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",
@@ -99248,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",
@@ -99271,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",
@@ -99285,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",
@@ -99298,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" })
                     ]
                   }
                 )
@@ -99311,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",
@@ -99325,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",
@@ -99341,13 +99390,13 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
         );
       })()
     ] }),
-    /* @__PURE__ */ jsxs197("div", { className: "flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsxs198("div", { className: "flex items-center gap-0.5", children: [
       rightActions,
-      /* @__PURE__ */ jsx249(
+      /* @__PURE__ */ jsx250(
         Tooltip,
         {
           label: thumbnailsVisible ? "Hide thumbnails \u2014 labels only" : "Show thumbnails \u2014 posters stay visible; richer previews appear on interaction",
-          children: /* @__PURE__ */ jsx249(
+          children: /* @__PURE__ */ jsx250(
             "button",
             {
               type: "button",
@@ -99355,12 +99404,12 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
               "aria-pressed": thumbnailsVisible,
               onClick: () => setThumbnailMode(thumbnailsVisible ? "hidden" : "adaptive"),
               className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${thumbnailsVisible ? "bg-studio-accent/10 text-accent-ink" : "text-neutral-400 hover:bg-hover hover:text-neutral-200"}`,
-              children: /* @__PURE__ */ jsx249(Image3, { size: 16, "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx250(Image3, { size: 16, "aria-hidden": "true" })
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx249(Tooltip, { label: "Fit timeline to width", children: /* @__PURE__ */ jsx249(
+      /* @__PURE__ */ jsx250(Tooltip, { label: "Fit timeline to width", children: /* @__PURE__ */ jsx250(
         "button",
         {
           type: "button",
@@ -99368,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",
@@ -99396,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",
@@ -99419,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" })
   ] }) });
 }
 
@@ -99700,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();
@@ -100071,7 +100120,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     refreshPreviewDocumentVersion
   });
   const timelineToolbar = useMemo89(
-    () => /* @__PURE__ */ jsx251(
+    () => /* @__PURE__ */ jsx252(
       TimelineToolbar,
       {
         domEditSession: toolbarSession,
@@ -100119,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,
@@ -100140,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,
@@ -100194,7 +100243,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
             gestureOverlay
           }
         ),
-        /* @__PURE__ */ jsx251(
+        /* @__PURE__ */ jsx252(
           StudioOverlays,
           {
             projectId,
@@ -100829,6 +100878,7 @@ export {
   Toggle,
   Tooltip,
   VideoThumbnail,
+  announcePreviewDocumentLoaded,
   applyPatch,
   buildCompositionSnapTarget,
   buildGridSnapEdges,