@hyperframes/studio 0.8.147 → 0.8.148

package/dist/index.js

@@ -47,7 +47,7 @@ import {
   usePreviewVariablesStore,
   whenPreviewBooted,
   writeStudioUiPreferences
-} from "./chunk-PHGBG7OG.js";
+} from "./chunk-4UHZLLQL.js";
 import {
   Button,
   ContextMenu,
@@ -79,7 +79,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-PVFBY7KR.js";
+} from "./chunk-FF5DM7BQ.js";
 import {
   DOM_EDIT_LAYER_OBSERVER_INIT,
   buildDefaultDomEditTextField,
@@ -182,7 +182,7 @@ import { memo as memo34, useCallback as useCallback74 } from "react";
 import { useCallback as useCallback51, useRef as useRef59, useSyncExternalStore as useSyncExternalStore6 } from "react";
 
 // src/player/components/PlayerControls.tsx
-import { useRef as useRef3, useEffect as useEffect3, memo as memo4 } from "react";
+import { useRef as useRef3, useEffect as useEffect2, memo as memo4 } from "react";
 import gsap from "gsap";
 import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
 
@@ -592,7 +592,7 @@ if (typeof window !== "undefined") {
 }
 
 // src/player/components/ShortcutsPanel.tsx
-import { useState, useCallback as useCallback2, useEffect as useEffect2, useId, useRef as useRef2, memo } from "react";
+import { useState, useCallback, useRef, memo } from "react";
 
 // src/components/timelineToolbarStyles.ts
 var flatBtn = "flex h-7 w-7 items-center justify-center rounded-md transition-colors";
@@ -600,34 +600,6 @@ var flatIdle = `${flatBtn} text-text-2 hover:bg-hover hover:text-text-0 active:b
 var flatActive = `${flatBtn} bg-on text-text-0 hover:bg-on-hover active:scale-[0.98]`;
 var flatDisabled = `${flatBtn} text-text-off cursor-not-allowed`;
 
-// src/hooks/useContextMenuDismiss.ts
-import { useCallback, useEffect, useRef } from "react";
-function useContextMenuDismiss(onClose) {
-  const menuRef = useRef(null);
-  const dismiss = useCallback(
-    (e) => {
-      if (e instanceof KeyboardEvent) {
-        if (e.key === "Escape") onClose();
-        return;
-      }
-      if (menuRef.current?.contains(e.target)) return;
-      onClose();
-    },
-    [onClose]
-  );
-  useEffect(() => {
-    document.addEventListener("pointerdown", dismiss, true);
-    document.addEventListener("mousedown", dismiss, true);
-    document.addEventListener("keydown", dismiss);
-    return () => {
-      document.removeEventListener("pointerdown", dismiss, true);
-      document.removeEventListener("mousedown", dismiss, true);
-      document.removeEventListener("keydown", dismiss);
-    };
-  }, [dismiss]);
-  return menuRef;
-}
-
 // src/player/components/studioShortcuts.ts
 var STUDIO_PLAIN_KEYS = {
   fullscreen: "f",
@@ -727,6 +699,7 @@ var DEFAULT_SHORTCUT_SECTIONS = [
 
 // src/player/components/ShortcutsPanel.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var STAY_ABOVE = { side: "none", align: "shift", fallbackAxisSide: "none" };
 var ShortcutsPanel = memo(function ShortcutsPanel2({
   disabled,
   duration,
@@ -739,33 +712,21 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
 }) {
   const [showShortcuts, setShowShortcuts] = useState(false);
   const [jumpFrame, setJumpFrame] = useState("");
-  const shortcutsPanelId = useId();
-  const closeShortcuts = useCallback2(() => setShowShortcuts(false), []);
-  const shortcutsPanelRef = useContextMenuDismiss(closeShortcuts);
-  const panelBodyRef = useRef2(null);
-  const triggerRef = useRef2(null);
-  useEffect2(() => {
-    if (!showShortcuts) return;
-    const trigger = triggerRef.current;
-    panelBodyRef.current?.focus();
-    return () => {
-      trigger?.focus();
-    };
-  }, [showShortcuts]);
-  const commitJumpFrame = useCallback2(() => {
+  const panelBodyRef = useRef(null);
+  const commitJumpFrame = useCallback(() => {
     if (disabled) return;
     const frame3 = Number.parseInt(jumpFrame, 10);
     if (!Number.isFinite(frame3) || duration <= 0) return;
     onSeek(Math.min(duration, frameToSeconds(Math.max(0, frame3))));
   }, [disabled, duration, jumpFrame, onSeek]);
-  const handleJumpSubmit = useCallback2(
+  const handleJumpSubmit = useCallback(
     (e) => {
       e.preventDefault();
       commitJumpFrame();
     },
     [commitJumpFrame]
   );
-  const handleJumpKeyDown = useCallback2(
+  const handleJumpKeyDown = useCallback(
     (e) => {
       if (e.key !== "Enter") return;
       e.preventDefault();
@@ -773,157 +734,150 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
     },
     [commitJumpFrame]
   );
-  return /* @__PURE__ */ jsxs("div", { ref: shortcutsPanelRef, className: "relative shrink-0", children: [
-    /* @__PURE__ */ jsx(Tooltip, { label: "Shortcuts and tools", children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref: triggerRef,
-        type: "button",
-        onClick: () => setShowShortcuts((v) => !v),
-        className: showShortcuts ? flatActive : flatIdle,
-        "aria-label": "Shortcuts and tools",
-        "aria-expanded": showShortcuts,
-        "aria-controls": shortcutsPanelId,
-        children: /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            width: "11",
-            height: "11",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "1.75",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
-              /* @__PURE__ */ jsx("path", { d: "M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M8 16h8" })
-            ]
-          }
-        )
-      }
-    ) }),
-    showShortcuts && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        id: shortcutsPanelId,
-        ref: panelBodyRef,
-        tabIndex: -1,
-        role: "dialog",
-        "aria-label": "Keyboard shortcuts and tools",
-        className: "absolute bottom-full right-0 mb-2 z-50 rounded-lg border border-border bg-raised shadow-popover min-w-[220px] overflow-y-auto outline-hidden",
-        style: {
-          maxHeight: "min(280px, calc(100vh - 80px))"
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "px-3 pt-3 pb-2.5", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5", children: "Jump to frame" }),
-            /* @__PURE__ */ jsxs("form", { onSubmit: handleJumpSubmit, className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  value: jumpFrame,
-                  onChange: (e) => setJumpFrame(e.target.value),
-                  disabled,
-                  inputMode: "numeric",
-                  pattern: "[0-9]*",
-                  "aria-label": "Jump to frame",
-                  placeholder: "frame number",
-                  className: "h-6 flex-1 rounded-sm border border-neutral-700 bg-neutral-900 px-2 text-[10px] font-mono tabular-nums text-neutral-200 outline-hidden transition-colors placeholder:text-neutral-600 focus:border-studio-accent/60",
-                  onKeyDown: handleJumpKeyDown,
-                  onBlur: commitJumpFrame
-                }
-              ),
-              /* @__PURE__ */ jsx(Tooltip, { label: "Jump to frame", children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "submit",
-                  disabled,
-                  className: "h-6 px-2 rounded-sm border border-neutral-700 text-[10px] text-neutral-300 transition-colors hover:border-neutral-500 hover:bg-neutral-800 disabled:opacity-40",
-                  children: "Go"
-                }
-              ) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "border-t border-border" }),
-          /* @__PURE__ */ jsxs("div", { className: "px-3 pt-2.5 pb-2", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5", children: "Work area" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover", children: "I" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: "In-point" })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: inPoint !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-neutral-300", children: formatTime(inPoint) }),
-                  /* @__PURE__ */ jsx(Tooltip, { label: "Clear in-point", children: /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setInPoint(null),
-                      className: "w-4 h-4 flex items-center justify-center rounded-sm text-neutral-500 hover:text-neutral-200 transition-colors",
-                      "aria-label": "Clear in-point",
-                      children: /* @__PURE__ */ jsx(
-                        "svg",
-                        {
-                          width: "8",
-                          height: "8",
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2.5",
-                          children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
-                        }
-                      )
-                    }
-                  ) })
-                ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-600", children: "Not set" }) })
+  return /* @__PURE__ */ jsx(Tooltip, { label: "Shortcuts and tools", children: /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open: showShortcuts,
+      onOpenChange: setShowShortcuts,
+      side: "top",
+      align: "end",
+      collisionAvoidance: STAY_ABOVE,
+      "aria-label": "Keyboard shortcuts and tools",
+      initialFocus: panelBodyRef,
+      className: "flex max-h-[min(280px,var(--available-height))] min-w-[220px] flex-col border-border bg-raised p-0",
+      trigger: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${showShortcuts ? flatActive : flatIdle} shrink-0`,
+          "aria-label": "Shortcuts and tools",
+          children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "11",
+              height: "11",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.75",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+                /* @__PURE__ */ jsx("path", { d: "M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M8 16h8" })
+              ]
+            }
+          )
+        }
+      ),
+      children: /* @__PURE__ */ jsxs("div", { ref: panelBodyRef, tabIndex: -1, className: "min-h-0 overflow-y-auto outline-hidden", children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-3 pt-3 pb-2.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5", children: "Jump to frame" }),
+          /* @__PURE__ */ jsxs("form", { onSubmit: handleJumpSubmit, className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: jumpFrame,
+                onChange: (e) => setJumpFrame(e.target.value),
+                disabled,
+                inputMode: "numeric",
+                pattern: "[0-9]*",
+                "aria-label": "Jump to frame",
+                placeholder: "frame number",
+                className: "h-6 flex-1 rounded-sm border border-neutral-700 bg-neutral-900 px-2 text-[10px] font-mono tabular-nums text-neutral-200 outline-hidden transition-colors placeholder:text-neutral-600 focus:border-studio-accent/60",
+                onKeyDown: handleJumpKeyDown,
+                onBlur: commitJumpFrame
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { label: "Jump to frame", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "submit",
+                disabled,
+                className: "h-6 px-2 rounded-sm border border-neutral-700 text-[10px] text-neutral-300 transition-colors hover:border-neutral-500 hover:bg-neutral-800 disabled:opacity-40",
+                children: "Go"
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "border-t border-border" }),
+        /* @__PURE__ */ jsxs("div", { className: "px-3 pt-2.5 pb-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5", children: "Work area" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover", children: "I" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: "In-point" })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover", children: "O" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: "Out-point" })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: outPoint !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-neutral-300", children: formatTime(outPoint) }),
-                  /* @__PURE__ */ jsx(Tooltip, { label: "Clear out-point", children: /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setOutPoint(null),
-                      className: "w-4 h-4 flex items-center justify-center rounded-sm text-neutral-500 hover:text-neutral-200 transition-colors",
-                      "aria-label": "Clear out-point",
-                      children: /* @__PURE__ */ jsx(
-                        "svg",
-                        {
-                          width: "8",
-                          height: "8",
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2.5",
-                          children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
-                        }
-                      )
-                    }
-                  ) })
-                ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-600", children: "Not set" }) })
-              ] })
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: inPoint !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-neutral-300", children: formatTime(inPoint) }),
+                /* @__PURE__ */ jsx(Tooltip, { label: "Clear in-point", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setInPoint(null),
+                    className: "w-4 h-4 flex items-center justify-center rounded-sm text-neutral-500 hover:text-neutral-200 transition-colors",
+                    "aria-label": "Clear in-point",
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        width: "8",
+                        height: "8",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2.5",
+                        children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+                      }
+                    )
+                  }
+                ) })
+              ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-600", children: "Not set" }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover", children: "O" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: "Out-point" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: outPoint !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-neutral-300", children: formatTime(outPoint) }),
+                /* @__PURE__ */ jsx(Tooltip, { label: "Clear out-point", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setOutPoint(null),
+                    className: "w-4 h-4 flex items-center justify-center rounded-sm text-neutral-500 hover:text-neutral-200 transition-colors",
+                    "aria-label": "Clear out-point",
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        width: "8",
+                        height: "8",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2.5",
+                        children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+                      }
+                    )
+                  }
+                ) })
+              ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-600", children: "Not set" }) })
             ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "border-t border-border" }),
-          /* @__PURE__ */ jsx("div", { className: "px-3 pt-2.5 pb-3 flex flex-col gap-3", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5", children: section.title }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: section.hints.map((hint, hintIndex) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center bg-hover", children: hint.key }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: hint.label })
-            ] }, hintIndex)) })
-          ] }, sectionIndex)) })
-        ]
-      }
-    )
-  ] });
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "border-t border-border" }),
+        /* @__PURE__ */ jsx("div", { className: "px-3 pt-2.5 pb-3 flex flex-col gap-3", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5", children: section.title }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: section.hints.map((hint, hintIndex) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center bg-hover", children: hint.key }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: hint.label })
+          ] }, hintIndex)) })
+        ] }, sectionIndex)) })
+      ] })
+    }
+  ) });
 });
 function ShortcutsButton({ sections, disabled = false, onSeek }) {
   const duration = usePlayerStore((s) => s.duration);
@@ -947,6 +901,36 @@ function ShortcutsButton({ sections, disabled = false, onSeek }) {
 
 // src/player/components/SpeedMenu.tsx
 import { useState as useState2, useCallback as useCallback3, memo as memo2 } from "react";
+
+// src/hooks/useContextMenuDismiss.ts
+import { useCallback as useCallback2, useEffect, useRef as useRef2 } from "react";
+function useContextMenuDismiss(onClose) {
+  const menuRef = useRef2(null);
+  const dismiss = useCallback2(
+    (e) => {
+      if (e instanceof KeyboardEvent) {
+        if (e.key === "Escape") onClose();
+        return;
+      }
+      if (menuRef.current?.contains(e.target)) return;
+      onClose();
+    },
+    [onClose]
+  );
+  useEffect(() => {
+    document.addEventListener("pointerdown", dismiss, true);
+    document.addEventListener("mousedown", dismiss, true);
+    document.addEventListener("keydown", dismiss);
+    return () => {
+      document.removeEventListener("pointerdown", dismiss, true);
+      document.removeEventListener("mousedown", dismiss, true);
+      document.removeEventListener("keydown", dismiss);
+    };
+  }, [dismiss]);
+  return menuRef;
+}
+
+// src/player/components/SpeedMenu.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SPEED_OPTIONS = [0.25, 0.5, 1, 1.5, 2];
 var SpeedMenu = memo2(function SpeedMenu2({
@@ -1102,7 +1086,7 @@ var PAUSE_BARS_D = "M56 28H67V71H56Z M73 28H84V71H73Z";
 function PlayPauseMorphIcon({ playing }) {
   const pathRef = useRef3(null);
   const isFirstRun = useRef3(true);
-  useEffect3(() => {
+  useEffect2(() => {
     const el = pathRef.current;
     if (!el) return;
     const target = playing ? PAUSE_BARS_D : PLAY_BLADE_D;
@@ -1229,7 +1213,7 @@ var PlayerControls = memo4(function PlayerControls2({
   const durationRef = useRef3(duration);
   durationRef.current = duration;
   const controlsDisabled = disabled || !timelineReady;
-  useEffect3(() => {
+  useEffect2(() => {
     if (!timeDisplayRef.current) return;
     const t2 = currentTimeRef.current;
     timeDisplayRef.current.textContent = timeDisplayMode === "frame" ? formatFrameTime(t2, duration) : formatTime(t2);
@@ -1342,7 +1326,7 @@ import {
 import { useRef as useRef25, useMemo as useMemo24, useCallback as useCallback22, useState as useState16 } from "react";
 
 // src/hooks/useMusicBeatAnalysis.ts
-import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef4 } from "react";
 
 // src/utils/timelineInspector.ts
 import { HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
@@ -1857,7 +1841,7 @@ function useMusicBeatAnalysis() {
       isFallbackTrack: resolved2?.isFallback ?? false
     };
   }, [elements]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!musicSrc) {
       setBeatAnalysis(null);
       setBeatEdits(null);
@@ -1903,7 +1887,7 @@ function useMusicBeatAnalysis() {
       cancelled = true;
     };
   }, [musicSrc, isFallbackTrack, setBeatAnalysis, setBeatEdits, resetBeatHistory]);
-  useEffect4(() => {
+  useEffect3(() => {
     const beatPath = beatFilePathForSrc(musicSrc);
     if (!musicSrc || !beatPath || !ioRef.current) {
       setBeatPersist(null);
@@ -2013,7 +1997,7 @@ function getRenderedTimelineElement({
 }
 
 // src/player/components/useTimelinePlayhead.ts
-import { useRef as useRef5, useCallback as useCallback4, useEffect as useEffect5, useLayoutEffect } from "react";
+import { useRef as useRef5, useCallback as useCallback4, useEffect as useEffect4, useLayoutEffect } from "react";
 
 // src/player/components/timelineZoomInput.ts
 import { useSyncExternalStore as useSyncExternalStore2 } from "react";
@@ -3441,7 +3425,7 @@ function useTimelinePlayhead({
     },
     [playheadRef, durationRef, ppsRef, contentOrigin]
   );
-  useEffect5(() => {
+  useEffect4(() => {
     syncPlayheadPosition(currentTime);
   }, [currentTime, pps, syncPlayheadPosition, timelineReady, elementsLength]);
   useLayoutEffect(() => {
@@ -3449,7 +3433,7 @@ function useTimelinePlayhead({
     if (!scroll || zoomMode !== "fit") return;
     scroll.scrollLeft = 0;
   }, [zoomMode, pps, scrollRef]);
-  useEffect5(() => {
+  useEffect4(() => {
     const scroll = scrollRef.current;
     if (!scroll) {
       previousZoomModeRef.current = zoomMode;
@@ -3561,7 +3545,7 @@ function useTimelinePlayhead({
     },
     [scrollRef, durationRef, fitPpsRef, ppsRef]
   );
-  useEffect5(() => {
+  useEffect4(() => {
     const scroll = scrollRef.current;
     if (!scroll) return;
     scroll.addEventListener("wheel", handlePinchWheel, { passive: false, capture: true });
@@ -3602,7 +3586,7 @@ function useTimelineZoom() {
 }
 
 // src/player/components/timelineDragDrop.ts
-import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef6, useState as useState4 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef6, useState as useState4 } from "react";
 
 // src/utils/timelineAssetDrop.ts
 import { encodeUrlPath } from "@hyperframes/parsers";
@@ -4150,14 +4134,14 @@ function useTimelineAssetDrop({
       sessionEpoch
     ]
   );
-  useEffect6(() => {
+  useEffect5(() => {
     window.addEventListener("dragend", clearDropPreview);
     return () => {
       window.removeEventListener("dragend", clearDropPreview);
       clearDropPreview();
     };
   }, [clearDropPreview]);
-  useEffect6(() => clearDropPreview(), [clearDropPreview, sessionEpoch]);
+  useEffect5(() => clearDropPreview(), [clearDropPreview, sessionEpoch]);
   return {
     isDragOver,
     dropPreview: dropPreview2,
@@ -4169,7 +4153,7 @@ function useTimelineAssetDrop({
 }
 
 // src/player/components/useTimelineClipDrag.ts
-import { useRef as useRef12, useState as useState8, useCallback as useCallback8, useMemo as useMemo7, useEffect as useEffect11 } from "react";
+import { useRef as useRef12, useState as useState8, useCallback as useCallback8, useMemo as useMemo7, useEffect as useEffect10 } from "react";
 
 // src/player/components/timelineRulerGeometry.ts
 function getTimelineMajorTickInterval(duration, pixelsPerSecond, frameRate) {
@@ -4812,7 +4796,7 @@ var useLinkedClipPreferences = create2((set) => ({
 var isLinkedSelectionOn = () => useLinkedClipPreferences.getState().linkedSelection;
 
 // src/player/components/timelineReadOnly.ts
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect7, useEffectEvent } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect6, useEffectEvent } from "react";
 var TimelineReadOnlyContext = createContext2(null);
 function useTimelineReadOnlyPress() {
   return useContext2(TimelineReadOnlyContext);
@@ -4832,7 +4816,7 @@ function refuseWhenReadOnly(readOnlyPress, callbacks) {
 }
 function useAbandonEditsOnReadOnly(readOnly, abandon) {
   const abandonNow = useEffectEvent(abandon);
-  useEffect7(() => {
+  useEffect6(() => {
     if (readOnly) abandonNow();
   }, [readOnly]);
 }
@@ -5373,7 +5357,7 @@ function synthesizeFlatTweenKeyframes(anim) {
 }
 
 // src/player/components/TimelineClipDiamonds.tsx
-import { memo as memo8, useEffect as useEffect10, useRef as useRef10, useState as useState7 } from "react";
+import { memo as memo8, useEffect as useEffect9, useRef as useRef10, useState as useState7 } from "react";
 
 // src/player/components/BeatStrip.tsx
 import { memo as memo5, useSyncExternalStore as useSyncExternalStore3 } from "react";
@@ -5745,7 +5729,7 @@ function previewClipPct(opts) {
 }
 
 // src/components/editor/EaseCurveSection.tsx
-import { useEffect as useEffect9, useId as useId3, useRef as useRef8, useState as useState6 } from "react";
+import { useEffect as useEffect8, useId as useId2, useRef as useRef8, useState as useState6 } from "react";
 import { evaluateSpringEase as evaluateSpringEase2, parseSpringBounce as parseSpringBounce3 } from "@hyperframes/core/spring-ease";
 import {
   evaluateWiggleEase as evaluateWiggleEase2,
@@ -6287,7 +6271,7 @@ function EaseModeToggle({
 }
 
 // src/components/editor/EaseParamFields.tsx
-import { useEffect as useEffect8, useId as useId2, useRef as useRef7, useState as useState5 } from "react";
+import { useEffect as useEffect7, useId, useRef as useRef7, useState as useState5 } from "react";
 import { parseSpringBounce as parseSpringBounce2 } from "@hyperframes/core/spring-ease";
 import {
   parseWiggleEase as parseWiggleEase2
@@ -6316,9 +6300,9 @@ function EaseBezierField({
 }) {
   const text = tuple.join(", ");
   const inputRef = useRef7(null);
-  const errorId = useId2();
+  const errorId = useId();
   const [error, setError] = useState5(null);
-  useEffect8(() => {
+  useEffect7(() => {
     if (inputRef.current) inputRef.current.value = text;
     setError(null);
   }, [text]);
@@ -6391,7 +6375,7 @@ function NumericCommitInput({
   onCommit
 }) {
   const [draft, setDraft] = useState5(String(value));
-  useEffect8(() => setDraft(String(value)), [value]);
+  useEffect7(() => setDraft(String(value)), [value]);
   const commit2 = () => {
     if (draft.trim() === "") {
       setDraft(String(value));
@@ -6524,8 +6508,8 @@ function EaseTypeDropdown({
   const [open, setOpen] = useState6(false);
   const triggerRef = useRef8(null);
   const menuRef = useRef8(null);
-  const menuId = useId3();
-  useEffect9(() => {
+  const menuId = useId2();
+  useEffect8(() => {
     if (!open) return;
     const menu = menuRef.current;
     const selected = menu?.querySelector('[role="menuitemradio"][aria-checked="true"]') ?? menu?.querySelector('[role="menuitemradio"]');
@@ -6707,7 +6691,7 @@ function EaseCurveSection({
   const [hover, setHover] = useState6(null);
   const draggingRef = useRef8(null);
   const svgRef = useRef8(null);
-  useEffect9(() => {
+  useEffect8(() => {
     setDraft(null);
     const inFlight = inFlightEasesRef.current;
     const landed = inFlight.indexOf(ease);
@@ -6719,7 +6703,7 @@ function EaseCurveSection({
     inFlight.splice(0, landed + 1);
     if (inFlight.length === 0) setPendingEase(null);
   }, [ease]);
-  useEffect9(() => {
+  useEffect8(() => {
     if (pendingEase === null) return;
     const timer = setTimeout(() => {
       inFlightEasesRef.current.length = 0;
@@ -8001,7 +7985,7 @@ var TimelineDiamondLane = memo8(function TimelineDiamondLane2({
   const readOnlyPress = useTimelineReadOnlyPress();
   const pendingRetimes = readPendingTimelineKeyframeRetimes(rootRef.current);
   const [preview2, setPreview] = useState7(null);
-  useEffect10(() => {
+  useEffect9(() => {
     const source = rootRef.current;
     if (!source) return;
     return subscribeTimelineKeyframeRetimePreview(source, (nextPreview) => {
@@ -11144,7 +11128,7 @@ function useTimelineClipDrag({
       lifecycleRef
     })
   );
-  useEffect11(() => {
+  useEffect10(() => {
     const movePickup = (drag, step, viewport2) => {
       const audioTracks = getTimelineElementIndexes(elementsRef.current).audioTracks;
       const row = nextKeyboardInsertRow({
@@ -11208,11 +11192,11 @@ function useTimelineClipDrag({
     trackOrderRef,
     trackInsertLayoutRef
   ]);
-  useEffect11(() => {
+  useEffect10(() => {
     cancelGestureRef.current();
   }, [sessionEpoch]);
   const previousOrderRef = useRef12(trackOrderRef.current);
-  useEffect11(() => {
+  useEffect10(() => {
     const order = trackOrderRef.current;
     const previous = previousOrderRef.current;
     previousOrderRef.current = order;
@@ -11499,7 +11483,7 @@ function useClipContextMenu(onSelectElement, dismissGapMenu, setClipContextMenu)
 }
 
 // src/player/components/useTimelineRangeSelection.ts
-import { useRef as useRef13, useState as useState10, useCallback as useCallback12, useEffect as useEffect12 } from "react";
+import { useRef as useRef13, useState as useState10, useCallback as useCallback12, useEffect as useEffect11 } from "react";
 
 // src/utils/marqueeGeometry.ts
 function rectsOverlap(a, b) {
@@ -12078,7 +12062,7 @@ function useTimelineRangeSelection({
     },
     [cancelActiveGesture, isGestureSessionCurrent]
   );
-  useEffect12(() => {
+  useEffect11(() => {
     const onBandEscape = (e) => {
       if (e.key !== "Escape" || !(marqueeRef.current || isRangeSelecting.current)) return;
       e.preventDefault();
@@ -12102,12 +12086,12 @@ function useTimelineRangeSelection({
     return () => listeners3.abort();
   }, [cancelActiveGesture, isDragging]);
   const previousSessionEpochRef = useRef13(sessionEpoch);
-  useEffect12(() => {
+  useEffect11(() => {
     if (previousSessionEpochRef.current === sessionEpoch) return;
     previousSessionEpochRef.current = sessionEpoch;
     cancelActiveGesture(true, false);
   }, [cancelActiveGesture, sessionEpoch]);
-  useEffect12(
+  useEffect11(
     () => () => {
       cancelActiveGesture(false, isGestureSessionCurrent());
     },
@@ -12126,14 +12110,14 @@ function useTimelineRangeSelection({
 }
 
 // src/player/components/usePublishRangeSelection.ts
-import { useEffect as useEffect13, useRef as useRef14 } from "react";
+import { useEffect as useEffect12, useRef as useRef14 } from "react";
 function usePublishRangeSelection(rangeSelection, onRangeSelect) {
   const onRangeSelectRef = useRef14(onRangeSelect);
   const publishedRangeRef = useRef14(null);
-  useEffect13(() => {
+  useEffect12(() => {
     onRangeSelectRef.current = onRangeSelect;
   }, [onRangeSelect]);
-  useEffect13(() => {
+  useEffect12(() => {
     const range = rangeSelection ? {
       t0: Math.min(rangeSelection.start, rangeSelection.end),
       t1: Math.max(rangeSelection.start, rangeSelection.end)
@@ -12145,7 +12129,7 @@ function usePublishRangeSelection(rangeSelection, onRangeSelect) {
     usePlayerStore.setState({ rangeSelection: range });
     onRangeSelectRef.current?.(range);
   }, [rangeSelection]);
-  useEffect13(
+  useEffect12(
     () => () => {
       const current = usePlayerStore.getState().rangeSelection;
       const published = publishedRangeRef.current;
@@ -12157,7 +12141,7 @@ function usePublishRangeSelection(rangeSelection, onRangeSelect) {
 }
 
 // src/player/components/useTimelineSelectionLifecycle.ts
-import { useEffect as useEffect14, useMemo as useMemo9, useRef as useRef15 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo9, useRef as useRef15 } from "react";
 function useTimelineSelectionLifecycle(elements, selectedElementId, setShowPopover, clearRangeSelection) {
   const selectedElement = useMemo9(
     () => elements.find((element) => getTimelineElementIdentity(element) === selectedElementId) ?? null,
@@ -12166,7 +12150,7 @@ function useTimelineSelectionLifecycle(elements, selectedElementId, setShowPopov
   const selectedElementRef = useRef15(selectedElement);
   selectedElementRef.current = selectedElement;
   const previousSelectedRef = useRef15(selectedElementRef.current);
-  useEffect14(() => {
+  useEffect13(() => {
     const previous = previousSelectedRef.current;
     const current = selectedElementRef.current;
     previousSelectedRef.current = current;
@@ -12178,7 +12162,7 @@ function useTimelineSelectionLifecycle(elements, selectedElementId, setShowPopov
 }
 
 // src/player/components/useTrackGapMenu.ts
-import { useCallback as useCallback13, useEffect as useEffect15, useMemo as useMemo10, useState as useState11 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect14, useMemo as useMemo10, useState as useState11 } from "react";
 
 // src/player/components/timelineGaps.ts
 var TRACK_GAP_EPSILON_S = 1e-3;
@@ -12387,7 +12371,7 @@ function useTrackGapMenu({
     setHoveredGapAction(null);
     setGapContextMenu(null);
   }, []);
-  useEffect15(() => {
+  useEffect14(() => {
     if (gapContextMenu && gapContextMenu.sessionEpoch !== sessionEpoch) dismissGapMenu();
   }, [dismissGapMenu, gapContextMenu, sessionEpoch]);
   return {
@@ -13375,7 +13359,7 @@ function useTimelineStackingSync({
 }
 
 // src/player/components/useTimelineGeometry.ts
-import { useEffect as useEffect16, useLayoutEffect as useLayoutEffect2, useRef as useRef18 } from "react";
+import { useEffect as useEffect15, useLayoutEffect as useLayoutEffect2, useRef as useRef18 } from "react";
 function useTimelineGeometry({
   viewportWidth,
   effectiveDuration,
@@ -13408,7 +13392,7 @@ function useTimelineGeometry({
   const zoomModeRef = useRef18(zoomMode);
   zoomModeRef.current = zoomMode;
   fitPpsRef.current = fitPps;
-  useEffect16(() => {
+  useEffect15(() => {
     if (zoomMode !== "manual" || isDragging.current) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -13421,7 +13405,7 @@ function useTimelineGeometry({
     });
     return () => cancelAnimationFrame(raf);
   }, [expandedElements, zoomMode]);
-  useEffect16(() => {
+  useEffect15(() => {
     usePlayerStore.getState().setTimelineScale(pps, fitPps);
   }, [pps, fitPps]);
   const hasClips = expandedElements.length > 0;
@@ -13444,7 +13428,7 @@ function useTimelineGeometry({
 }
 
 // src/player/components/useAutoExpandKeyframedClips.ts
-import { useEffect as useEffect17, useRef as useRef19 } from "react";
+import { useEffect as useEffect16, useRef as useRef19 } from "react";
 function freshLaneClips(gsapAnimations, clips) {
   for (const key2 of clips) {
     if (!gsapAnimations.has(key2)) clips.delete(key2);
@@ -13460,7 +13444,7 @@ function useAutoExpandKeyframedClips(gsapAnimations) {
   const expandClips = usePlayerStore((s) => s.expandClips);
   const projectId = useStudioShellContextOptional()?.projectId ?? null;
   const seen = useRef19({ projectId, source: gsapAnimations, clips: /* @__PURE__ */ new Set() });
-  useEffect17(() => {
+  useEffect16(() => {
     if (seen.current.projectId !== projectId) {
       const sourceChanged = seen.current.source !== gsapAnimations;
       seen.current = { projectId, source: gsapAnimations, clips: /* @__PURE__ */ new Set() };
@@ -13498,7 +13482,7 @@ function useTimelineKeyframeData(showKeyframes) {
 }
 
 // src/player/components/useTimelineScrollViewport.ts
-import { useCallback as useCallback17, useEffect as useEffect18, useRef as useRef20, useState as useState12 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect17, useRef as useRef20, useState as useState12 } from "react";
 
 // src/player/components/timelineRowVirtualizationFlag.ts
 var STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED = import.meta.env?.VITE_STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED !== "0";
@@ -13597,7 +13581,7 @@ function useTimelineScrollViewport(scrollRef, resyncShortcutHintOn) {
     if (viewportRafRef.current) cancelAnimationFrame(viewportRafRef.current);
     if (scrollSettledTimerRef.current) clearTimeout(scrollSettledTimerRef.current);
   });
-  useEffect18(() => {
+  useEffect17(() => {
     syncShortcutHintVisibility();
   }, [syncShortcutHintVisibility, ...resyncShortcutHintOn]);
   return { viewport: viewport2, showShortcutHint, setScrollRef, syncScrollViewport };
@@ -14065,7 +14049,7 @@ function useTimelineLaneMoveRefresh() {
 }
 
 // src/player/components/useTimelineFocusCoordinator.ts
-import { useEffect as useEffect19, useLayoutEffect as useLayoutEffect4, useMemo as useMemo20, useRef as useRef23 } from "react";
+import { useEffect as useEffect18, useLayoutEffect as useLayoutEffect4, useMemo as useMemo20, useRef as useRef23 } from "react";
 
 // src/player/components/timelineRevealScroll.ts
 var REVEAL_SCROLL_PADDING_PX = 12;
@@ -14204,7 +14188,7 @@ function useTimelineFocusCoordinator({
   useLayoutEffect4(() => {
     previousRowsRef.current = logicalRows;
   }, [logicalRows]);
-  useEffect19(() => {
+  useEffect18(() => {
     if (!isCurrentRequest(request2, projectId, sessionEpoch)) return;
     if (!resolution) {
       const withinBudget = recordRetryAttempt(
@@ -14337,7 +14321,7 @@ function resolveTimelineFocusIdentity(elements, elementId2) {
 }
 
 // src/player/components/useTimelineVirtualRows.ts
-import { useCallback as useCallback20, useEffect as useEffect20, useMemo as useMemo22 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect19, useMemo as useMemo22 } from "react";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 function extractTimelineVirtualRowRange(range, pinnedRowIndexes) {
   const indexes = new Set(defaultRangeExtractor(range));
@@ -14400,14 +14384,14 @@ function useTimelineVirtualRows({
     initialRect: { width: viewport2.clientWidth, height: viewport2.clientHeight },
     initialOffset
   });
-  useEffect20(() => {
+  useEffect19(() => {
     if (!enabled || !viewportReady) return;
     virtualizer.measure();
     scrollRef.current?.dispatchEvent(new Event("scroll"));
   }, [enabled, scrollRef, sessionEpoch, viewportReady, virtualizer]);
   const focusedRowIndex = focusedRowKey === void 0 ? -1 : rowGeometry.getRowIndex(focusedRowKey);
   const focusedRowHeight = focusedRowIndex < 0 ? 0 : rowGeometry.getRowHeight(focusedRowIndex);
-  useEffect20(() => {
+  useEffect19(() => {
     if (enabled && viewportReady && focusedRowIndex >= 0) {
       virtualizer.resizeItem(focusedRowIndex, focusedRowHeight);
     }
@@ -15488,7 +15472,7 @@ function TimelinePlayheadLayer({
 }
 
 // src/player/components/TimelineLanes.tsx
-import { Fragment as Fragment18, useId as useId4, useMemo as useMemo32, useRef as useRef42 } from "react";
+import { Fragment as Fragment18, useId as useId3, useMemo as useMemo32, useRef as useRef42 } from "react";
 
 // src/player/components/TimelineLaneClip.tsx
 import { memo as memo14 } from "react";
@@ -15499,7 +15483,7 @@ import { memo as memo13 } from "react";
 // src/player/components/TimelineClipFades.tsx
 import {
   createContext as createContext4,
-  useEffect as useEffect21,
+  useEffect as useEffect20,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo25,
   useRef as useRef28,
@@ -15760,7 +15744,7 @@ function TimelineClipFades({
     setDraft({ edge, seconds });
     onSetElementAttributeLive?.(el, attrFor(edge), attrText(seconds));
   };
-  useEffect21(() => {
+  useEffect20(() => {
     if (dragging === null) return;
     const cancelOnWindowEscape = (e) => {
       const g = gesture.current;
@@ -15982,7 +15966,7 @@ function FadeHandle({
 }
 
 // src/player/components/AudioWaveform.tsx
-import { memo as memo10, useCallback as useCallback27, useContext as useContext7, useEffect as useEffect22, useMemo as useMemo26, useRef as useRef30, useState as useState19 } from "react";
+import { memo as memo10, useCallback as useCallback27, useContext as useContext7, useEffect as useEffect21, useMemo as useMemo26, useRef as useRef30, useState as useState19 } from "react";
 import { fadeGain } from "@hyperframes/core/audio-fade";
 
 // src/hooks/useThumbnailLease.ts
@@ -16720,7 +16704,7 @@ var nearScreenListeners = /* @__PURE__ */ new Map();
 var nearScreen = null;
 function useNearScreen(element) {
   const [near4, setNear] = useState19(() => typeof IntersectionObserver === "undefined");
-  useEffect22(() => {
+  useEffect21(() => {
     if (!element || typeof IntersectionObserver === "undefined") return;
     nearScreen ??= new IntersectionObserver(
       (entries) => entries.forEach((entry2) => nearScreenListeners.get(entry2.target)?.(entry2.isIntersecting)),
@@ -16793,10 +16777,10 @@ var AudioWaveform = memo10(function AudioWaveform2({
     );
   }, [fades, from, muted, peaks, to, trimEndFraction, trimStartFraction]);
   const near4 = useNearScreen(root);
-  useEffect22(() => {
+  useEffect21(() => {
     if (near4) draw();
   }, [draw, near4, strip.width, strip.height]);
-  useEffect22(() => {
+  useEffect21(() => {
     const root2 = document.documentElement;
     const observer = new MutationObserver(draw);
     observer.observe(root2, {
@@ -16805,7 +16789,7 @@ var AudioWaveform = memo10(function AudioWaveform2({
     });
     return () => observer.disconnect();
   }, [draw]);
-  useEffect22(() => {
+  useEffect21(() => {
     const clip = root?.closest(".timeline-clip");
     if (!(clip instanceof HTMLElement)) return;
     if (muted) clip.setAttribute("data-audio-muted", "true");
@@ -17138,7 +17122,7 @@ function readClipEffects(state) {
 }
 
 // src/player/components/useClipToolState.ts
-import { useEffect as useEffect23, useState as useState20 } from "react";
+import { useEffect as useEffect22, useState as useState20 } from "react";
 import { HF_AUDIO_AUTOMATION_ATTR } from "@hyperframes/core/audio-automation";
 import { HF_AUDIO_CARVE_ATTR } from "@hyperframes/core/audio-carve";
 import { HF_AUDIO_FX_ATTR } from "@hyperframes/core/audio-fx";
@@ -17161,6 +17145,7 @@ function useOwnPreviewIframe() {
 
 // src/hooks/timelineEditingHelpers.ts
 import { isHtmlElement as isHtmlElement4 } from "@hyperframes/core/runtime/dom-realm";
+import { applyAuthoredTiming } from "@hyperframes/core/studio-preview-mark";
 
 // src/utils/sourcePatcher.ts
 import {
@@ -18856,7 +18841,7 @@ function patchIframeDomTiming(iframe, element, attrs, activeCompositionPath = nu
   try {
     const el = findTimelineElementInIframe(iframe, element, activeCompositionPath);
     if (!el) return;
-    for (const [name, value] of attrs) el.setAttribute(name, value);
+    applyAuthoredTiming(el, attrs);
   } catch {
   }
 }
@@ -19147,7 +19132,7 @@ function useClipToolState(el) {
   const iframe = useLivePreviewIframe();
   const activeCompPath = useStudioShellContextOptional()?.activeCompPath ?? null;
   const [state, setState] = useState20(() => toolStateFromElement(el));
-  useEffect23(() => {
+  useEffect22(() => {
     const node = findTimelineElementInIframe(iframe, el, activeCompPath);
     if (!node) {
       setState(toolStateFromElement(el));
@@ -19259,9 +19244,9 @@ import { createPortal } from "react-dom";
 import { formatSyncOffset } from "@hyperframes/core/media-link";
 
 // src/player/components/menuKeyboardNav.ts
-import { useEffect as useEffect24 } from "react";
+import { useEffect as useEffect23 } from "react";
 function useMenuKeyboardNav(menuRef) {
-  useEffect24(() => {
+  useEffect23(() => {
     const menu = menuRef.current;
     if (!menu) return;
     const previouslyFocused = document.activeElement;
@@ -19949,13 +19934,13 @@ function TimelineCompactDiamonds({
 }
 
 // src/player/components/TimelineAutomationLaneSlot.tsx
-import { useEffect as useEffect26, useMemo as useMemo28 } from "react";
+import { useEffect as useEffect25, useMemo as useMemo28 } from "react";
 import { resolveAutomationRange as resolveAutomationRange3 } from "@hyperframes/core/audio-automation";
 
 // src/player/components/TimelineAutomationLane.tsx
 import {
   useCallback as useCallback33,
-  useEffect as useEffect25,
+  useEffect as useEffect24,
   useMemo as useMemo27,
   useRef as useRef35,
   useState as useState27
@@ -21210,7 +21195,7 @@ function TimelineAutomationLane({
     () => draft ? { target, points: draft.points } : stored,
     [draft, target, stored]
   );
-  useEffect25(() => {
+  useEffect24(() => {
     setDraft(null);
   }, [target]);
   const h = AUTOMATION_LANE_H;
@@ -21285,7 +21270,7 @@ function TimelineAutomationLane({
     editing
   } = gestures;
   const gestureLive = [dragIndex, curveIndex, segmentDragIndex, edgeDrag].some((g) => g !== null);
-  useEffect25(() => {
+  useEffect24(() => {
     if (draft && draft.basedOn !== automation && !gestureLive) setDraft(null);
   }, [automation, draft, gestureLive]);
   const removeAt = useCallback33(
@@ -21535,7 +21520,7 @@ function ClipAutomationLanes({
     [beatTimes, element.start, element.duration]
   );
   const bound = lanes.bind(element, isSelected2);
-  useEffect26(() => {
+  useEffect25(() => {
     const target = bound.selection?.target;
     if (target !== void 0 && !bound.lanes.some((lane) => lane.target === target)) {
       bound.onRangeClear();
@@ -21744,7 +21729,7 @@ function useAutomationLanes() {
 }
 
 // src/hooks/useAutomationSelectionKeyboard.ts
-import { useEffect as useEffect27 } from "react";
+import { useEffect as useEffect26 } from "react";
 
 // src/player/components/automationClipboard.ts
 import {
@@ -22127,7 +22112,7 @@ function handleDelete(e, state, lanes, sel) {
 function useAutomationSelectionKeyboard({
   lanes
 }) {
-  useEffect27(() => {
+  useEffect26(() => {
     const handler = (e) => {
       if (isTypingTarget(document.activeElement)) return;
       if (e.defaultPrevented) return;
@@ -22447,7 +22432,7 @@ function carverAgainst(doc, id) {
 }
 
 // src/player/components/TimelineFxButton.tsx
-import { useEffect as useEffect30, useRef as useRef40, useState as useState28 } from "react";
+import { useEffect as useEffect29, useRef as useRef40, useState as useState28 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import {
   enabledAudioFxNodes,
@@ -22455,7 +22440,7 @@ import {
 } from "@hyperframes/core/audio-fx";
 
 // src/components/editor/TimelineFxPopover.tsx
-import { useEffect as useEffect29, useRef as useRef38 } from "react";
+import { useEffect as useEffect28, useRef as useRef38 } from "react";
 import { applyAudioFxPreset as applyAudioFxPreset2, getAudioFxPreset as getAudioFxPreset3 } from "@hyperframes/core/audio-fx-presets";
 
 // src/components/editor/propertyPanelFxPresetMenu.tsx
@@ -22535,7 +22520,7 @@ function FxPresetMenu({
 }
 
 // src/components/editor/useFxAudition.ts
-import { useCallback as useCallback35, useEffect as useEffect28, useRef as useRef37 } from "react";
+import { useCallback as useCallback35, useEffect as useEffect27, useRef as useRef37 } from "react";
 function useFxAudition(chain, onChainPreview, onAuditionTransport) {
   const auditionBase = useRef37(null);
   const audition = useCallback35(
@@ -22562,7 +22547,7 @@ function useFxAudition(chain, onChainPreview, onAuditionTransport) {
   previewRef.current = onChainPreview;
   const transportRef = useRef37(onAuditionTransport);
   transportRef.current = onAuditionTransport;
-  useEffect28(
+  useEffect27(
     () => () => {
       if (auditionBase.current) {
         transportRef.current?.(false);
@@ -22624,7 +22609,7 @@ function TimelineFxPopover({
     onChainPreview,
     onAuditionTransport
   );
-  useEffect29(() => {
+  useEffect28(() => {
     const onPointerDown = (event) => {
       if (rootRef.current && !rootRef.current.contains(event.target)) onClose();
     };
@@ -22772,7 +22757,7 @@ function GroupNameDialog({
 }) {
   const [label, setLabel] = useState28(defaultLabel ?? "Voiceover");
   const inputRef = useRef40(null);
-  useEffect30(() => inputRef.current?.select(), []);
+  useEffect29(() => inputRef.current?.select(), []);
   if (refusal2) {
     return /* @__PURE__ */ jsx49(
       "div",
@@ -23953,7 +23938,7 @@ function TimelineGroupHeader({
 import { sampleAutomationLane as sampleAutomationLane7 } from "@hyperframes/core/audio-automation";
 
 // src/hooks/useLivePlayheadTime.ts
-import { useEffect as useEffect31, useRef as useRef41, useState as useState29 } from "react";
+import { useEffect as useEffect30, useRef as useRef41, useState as useState29 } from "react";
 var THROTTLE_MS = 33;
 function useLivePlayheadTime() {
   const storeTime = usePlayerStore((s) => s.currentTime);
@@ -23961,7 +23946,7 @@ function useLivePlayheadTime() {
   const liveRef = useRef41(storeTime);
   const [, forceRender] = useState29(0);
   if (!isPlaying) liveRef.current = storeTime;
-  useEffect31(() => {
+  useEffect30(() => {
     if (!isPlaying) return;
     let timerId = 0;
     const unsubscribe = liveTime.subscribe((t2) => {
@@ -24465,7 +24450,7 @@ function TimelineLanes({
   onRazorSplit,
   onRazorSplitAll
 }) {
-  const lanesIdPrefix = `timeline-lanes${useId4().replaceAll(":", "")}`;
+  const lanesIdPrefix = `timeline-lanes${useId3().replaceAll(":", "")}`;
   const expandedClipIds = usePlayerStore((s) => s.expandedClipIds);
   const { collapsedGroupIds, expandedLaneOwnerIds, toggleGroupExpanded, toggleLaneOwnerExpanded } = useTimelineGroupDisclosure();
   const automationLanes = useAutomationLanes();
@@ -25209,7 +25194,7 @@ var TimelineCanvas = memo17(function TimelineCanvas2() {
 });
 
 // src/player/components/AudioGainDialog.tsx
-import { useEffect as useEffect32, useMemo as useMemo33, useState as useState30 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo33, useState as useState30 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { audioGainToDb as audioGainToDb2 } from "@hyperframes/core/audio-gain";
 
@@ -25551,7 +25536,7 @@ var currentGainDb = (el) => {
 var dbText = (db) => `${db < 0 ? "\u2212" : ""}${Math.abs(db).toFixed(1)} dB`;
 function useSourcePeaks(elements, projectId) {
   const [peaks, setPeaks] = useState30(null);
-  useEffect32(() => {
+  useEffect31(() => {
     if (!projectId) return;
     let live = true;
     void Promise.all(elements.map((el) => measureClipSourcePeak(el, projectId))).then((found) => {
@@ -25744,7 +25729,7 @@ function TimelineAudioGainOverlay() {
 }
 
 // src/player/components/TimelineOverlays.tsx
-import { useEffect as useEffect34, useMemo as useMemo35 } from "react";
+import { useEffect as useEffect33, useMemo as useMemo35 } from "react";
 
 // src/player/components/EditModal.tsx
 import { useState as useState31, useCallback as useCallback36, useMemo as useMemo34, useRef as useRef43 } from "react";
@@ -26099,7 +26084,7 @@ import { memo as memo18, useLayoutEffect as useLayoutEffect9, useState as useSta
 import { createPortal as createPortal6 } from "react-dom";
 
 // src/player/components/clipMenuToolItems.tsx
-import { useEffect as useEffect33, useRef as useRef44, useState as useState33 } from "react";
+import { useEffect as useEffect32, useRef as useRef44, useState as useState33 } from "react";
 import { HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR4 } from "@hyperframes/core/audio-fx";
 import { HF_COLOR_GRADING_ATTR as HF_COLOR_GRADING_ATTR2 } from "@hyperframes/core/color-grading";
 import { Fragment as Fragment19, jsx as jsx66, jsxs as jsxs43 } from "react/jsx-runtime";
@@ -26136,7 +26121,7 @@ function useHoverPreview(preview2) {
       previewRef.current?.apply(id);
     }, HOVER_PREVIEW_DELAY_MS);
   };
-  useEffect33(() => end, []);
+  useEffect32(() => end, []);
   return { start, end, settle };
 }
 function focusSibling(menu, step) {
@@ -27725,7 +27710,7 @@ function TimelineKeyframeMenuOverlay() {
     selectedElementId,
     elements: overlay.elements
   }) : null;
-  useEffect34(() => {
+  useEffect33(() => {
     if (kfContextMenu && !element) setKfContextMenu(null);
   }, [element, kfContextMenu, setKfContextMenu]);
   if (!kfContextMenu || !element) return null;
@@ -27793,7 +27778,7 @@ function TimelineClipMenuOverlay() {
     selectedElementId,
     elements: overlay.elements
   }) : null;
-  useEffect34(() => {
+  useEffect33(() => {
     if (clipContextMenu && !element) setClipContextMenu(null);
   }, [element, clipContextMenu, setClipContextMenu]);
   const { clipMenuItems } = overlay;
@@ -28614,7 +28599,7 @@ var CompositionThumbnail = memo22(function CompositionThumbnail2({
 });
 
 // src/player/hooks/useTimelinePlayer.ts
-import { useRef as useRef48, useCallback as useCallback41, useEffect as useEffect35 } from "react";
+import { useRef as useRef48, useCallback as useCallback41, useEffect as useEffect34 } from "react";
 
 // src/player/hooks/usePlaybackKeyboard.ts
 import { useRef as useRef45, useCallback as useCallback37 } from "react";
@@ -32517,13 +32502,13 @@ function useTimelinePlayer({
       shuttleSpeedIndexRef
     ]
   );
-  useEffect35(
+  useEffect34(
     () => usePlayerStore.subscribe((state, prev) => {
       if (state.playLocked && !prev.playLocked && state.isPlaying) pause();
     }),
     [pause]
   );
-  useEffect35(() => {
+  useEffect34(() => {
     return usePlayerStore.subscribe((state, prev) => {
       if (state.requestedSeekTime !== null && state.requestedSeekTime !== prev.requestedSeekTime) {
         seek(state.requestedSeekTime);
@@ -32540,7 +32525,7 @@ function useTimelinePlayer({
       }
     });
   }, [seek, play, pause]);
-  useEffect35(() => subscribePreviewFrame(getAdapter), [getAdapter]);
+  useEffect34(() => subscribePreviewFrame(getAdapter), [getAdapter]);
   const { playbackKeyDownRef, playbackKeyUpRef, attachIframeShortcutListeners, togglePlay } = usePlaybackKeyboard({
     iframeRef,
     shuttleDirectionRef,
@@ -32692,7 +32677,7 @@ function useTimelinePlayer({
     cancelPendingLoad();
     usePlayerStore.getState().reset();
   }, [stopRAFLoop, stopReverseLoop, cancelPendingLoad]);
-  useEffect35(() => {
+  useEffect34(() => {
     return usePlayerStore.subscribe((state, prev) => {
       const playbackRateChanged = state.playbackRate !== prev.playbackRate;
       const audioMutedChanged = state.audioMuted !== prev.audioMuted;
@@ -32727,10 +32712,10 @@ function useTimelinePlayer({
 import { useCallback as useCallback44, useMemo as useMemo38 } from "react";
 
 // src/components/nle/NLEContext.tsx
-import { useContext as useContext8, useState as useState38, useCallback as useCallback43, useRef as useRef50, useEffect as useEffect37 } from "react";
+import { useContext as useContext8, useState as useState38, useCallback as useCallback43, useRef as useRef50, useEffect as useEffect36 } from "react";
 
 // src/components/nle/useCompositionStack.ts
-import { useState as useState37, useCallback as useCallback42, useRef as useRef49, useEffect as useEffect36 } from "react";
+import { useState as useState37, useCallback as useCallback42, useRef as useRef49, useEffect as useEffect35 } from "react";
 function useCompositionStack({
   projectId,
   activeCompositionPath,
@@ -32801,7 +32786,7 @@ function useCompositionStack({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [projectId]
   );
-  useEffect36(() => {
+  useEffect35(() => {
     const master = {
       id: "master",
       label: "Master",
@@ -32889,13 +32874,13 @@ function NLEProvider({
     onShadowPromoted: () => shadowPromotedRef.current(),
     onPreviewReloadFailed
   });
-  useEffect37(() => {
+  useEffect36(() => {
     usePlayerStore.getState().beginTimelineSession(projectId);
     useAssetPreviewStore.getState().clearPreviewAsset();
   }, [projectId]);
   const [previewCompositionSize, setPreviewCompositionSize] = useState38(null);
   const prevRefreshKeyRef = useRef50(refreshKey);
-  useEffect37(() => {
+  useEffect36(() => {
     try {
       if (refreshKey === prevRefreshKeyRef.current) return;
       prevRefreshKeyRef.current = refreshKey;
@@ -32957,7 +32942,7 @@ function NLEProvider({
   compIdToSrcRef.current = compIdToSrc;
   const onCompIdToSrcChangeRef = useRef50(onCompIdToSrcChange);
   onCompIdToSrcChangeRef.current = onCompIdToSrcChange;
-  useEffect37(() => {
+  useEffect36(() => {
     const controller = new AbortController();
     let current = true;
     const emptyMap = /* @__PURE__ */ new Map();
@@ -32992,7 +32977,7 @@ function NLEProvider({
       controller.abort();
     };
   }, [projectId, setCompIdToSrc]);
-  useEffect37(() => {
+  useEffect36(() => {
     if (compIdToSrc.size === 0) return;
     const patchElements2 = (elements) => {
       const map = compIdToSrcRef.current;
@@ -33031,12 +33016,12 @@ function NLEProvider({
   }, []);
   const timelineDisabled = shouldDisableTimelineWhileCompositionLoading(compositionLoading);
   const timelineSessionEpoch = usePlayerStore((state) => state.timelineSessionEpoch);
-  useEffect37(() => {
+  useEffect36(() => {
     onCompositionLoadingChange?.(compositionLoading);
   }, [compositionLoading, onCompositionLoadingChange]);
   const onIframeRefStable = useRef50(onIframeRef);
   onIframeRefStable.current = onIframeRef;
-  useEffect37(() => {
+  useEffect36(() => {
     onIframeRefStable.current?.(iframeRef.current);
   }, [compositionStack.length, refreshKey, iframeRef]);
   const value = {
@@ -33145,7 +33130,7 @@ function readPreviewCompositionSize(iframe) {
 import {
   memo as memo23,
   useCallback as useCallback48,
-  useEffect as useEffect39,
+  useEffect as useEffect38,
   useLayoutEffect as useLayoutEffect10,
   useRef as useRef54,
   useState as useState40
@@ -33283,7 +33268,7 @@ var usePreviewGuidesStore = create8((set, get) => {
 });
 
 // src/components/nle/PreviewZoomOverlay.tsx
-import { useCallback as useCallback45, useEffect as useEffect38, useRef as useRef51 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect37, useRef as useRef51 } from "react";
 import { Fragment as Fragment24, jsx as jsx80, jsxs as jsxs55 } from "react/jsx-runtime";
 var NAVIGATOR_PX = 112;
 function zoomChipLabel(zoomPercent) {
@@ -33323,7 +33308,7 @@ function usePreviewNavigator(viewportRef, stageSize, zoomRef) {
     },
     [draw, zoomRef]
   );
-  useEffect38(() => draw(zoomRef.current), [stageSize, draw, zoomRef]);
+  useEffect37(() => draw(zoomRef.current), [stageSize, draw, zoomRef]);
   return { draw, setRegion };
 }
 function PreviewZoomOverlay({
@@ -33577,11 +33562,11 @@ var NLEPreview = memo23(function NLEPreview2({
   const viewportRef = useRef54(null);
   const stageRef = useRef54(null);
   const previewIframeRef = useRef54(null);
-  useEffect39(() => {
+  useEffect38(() => {
     onStageRef?.(stageRef);
   }, [onStageRef]);
   const previousActiveKeyRef = useRef54(activeKey);
-  useEffect39(() => {
+  useEffect38(() => {
     if (previousActiveKeyRef.current === activeKey) return;
     previousActiveKeyRef.current = activeKey;
     resetPreviewSlots();
@@ -33597,19 +33582,19 @@ var NLEPreview = memo23(function NLEPreview2({
   const hintHeight = compositionSizeHint?.height;
   const zoomRef = useRef54(DEFAULT_PREVIEW_ZOOM);
   const [settledZoom, setSettledZoom] = useState40(DEFAULT_PREVIEW_ZOOM);
-  useEffect39(() => postFrameDisplayScale(previewIframeRef.current), [settledZoom]);
+  useEffect38(() => postFrameDisplayScale(previewIframeRef.current), [settledZoom]);
   const hudRef = useRef54(null);
   const hudTimerRef = useRef54(null);
   const settleTimerRef = useRef54(null);
   const zoomingRef = useRef54(false);
   const dragRef = useRef54(null);
-  useEffect39(() => {
+  useEffect38(() => {
     return () => {
       if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
       if (hudTimerRef.current) clearTimeout(hudTimerRef.current);
     };
   }, []);
-  useEffect39(() => {
+  useEffect38(() => {
     const viewport2 = viewportRef.current;
     if (!viewport2) return;
     const updateStageSize = () => {
@@ -33638,7 +33623,7 @@ var NLEPreview = memo23(function NLEPreview2({
       (prev) => prev?.width === next?.width && prev?.height === next?.height ? prev : next
     );
   }, []);
-  useEffect39(() => {
+  useEffect38(() => {
     onCompositionSizeChangeRef.current?.(compositionSize);
   }, [compositionSize]);
   const setPreviewIframeRef = useCallback48(
@@ -33744,7 +33729,7 @@ var NLEPreview = memo23(function NLEPreview2({
       writeTransform3(zoomRef.current);
     }
   }, [writeTransform3]);
-  useEffect39(() => {
+  useEffect38(() => {
     const live = previewSlots.find((slot) => slot.role === "live");
     if (!live || live.gen === liveGenRef.current) return;
     const isPromotion = liveGenRef.current !== null;
@@ -33754,7 +33739,7 @@ var NLEPreview = memo23(function NLEPreview2({
     updateCompositionSizeFromPreview();
     applyInitialZoom();
   }, [previewSlots, iframeRef, updateCompositionSizeFromPreview, applyInitialZoom]);
-  useEffect39(() => {
+  useEffect38(() => {
     const viewport2 = viewportRef.current;
     if (!viewport2) return;
     const handleWheel = (event) => {
@@ -33800,7 +33785,7 @@ var NLEPreview = memo23(function NLEPreview2({
     document.addEventListener("wheel", handleWheel, { passive: false, capture: true });
     return () => document.removeEventListener("wheel", handleWheel, { capture: true });
   }, [applyZoom, applyPan]);
-  useEffect39(() => {
+  useEffect38(() => {
     const isInsideViewport = (clientX, clientY) => {
       const viewport2 = viewportRef.current;
       if (!viewport2) return null;
@@ -34160,7 +34145,7 @@ function usePreviewBlockDrop({
 }
 
 // src/components/nle/AssetPreviewOverlay.tsx
-import { useEffect as useEffect40, useCallback as useCallback50 } from "react";
+import { useEffect as useEffect39, useCallback as useCallback50 } from "react";
 
 // src/utils/assetPreviewDismiss.ts
 var TIME_EPSILON_S = 1e-6;
@@ -34239,12 +34224,12 @@ function AssetPreviewOverlay() {
     },
     [clearPreviewAsset]
   );
-  useEffect40(() => {
+  useEffect39(() => {
     if (!previewAsset) return;
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [previewAsset, handleKeyDown]);
-  useEffect40(() => {
+  useEffect39(() => {
     if (!previewAsset) return;
     const opened = usePlayerStore.getState();
     const openedTime = opened.currentTime;
@@ -34505,11 +34490,11 @@ function safeBoxInsetPercent(boxPercent) {
 import { createContext as createContext6, useContext as useContext10, useRef as useRef57, useState as useState43 } from "react";
 
 // src/components/editor/usePreviewCompositionRect.ts
-import { useEffect as useEffect41, useRef as useRef56 } from "react";
+import { useEffect as useEffect40, useRef as useRef56 } from "react";
 function usePreviewCompositionRect(overlayRef, iframe) {
   const iframeRef = useRef56(iframe);
   iframeRef.current = iframe;
-  useEffect41(() => {
+  useEffect40(() => {
     requestOverlayFrames();
   }, [iframe]);
   return useDomEditCompositionRect({ iframeRef, overlayRef });
@@ -34802,7 +34787,7 @@ function PreviewPane({
 import {
   memo as memo25,
   useCallback as useCallback52,
-  useEffect as useEffect42,
+  useEffect as useEffect41,
   useMemo as useMemo41,
   useRef as useRef60
 } from "react";
@@ -34983,7 +34968,7 @@ function useMeterLoop(strips2, bars, iframeRef, clip) {
   const previewIframeRef = iframeRef ?? shell?.previewIframeRef;
   const stripsRef = useRef60(strips2);
   stripsRef.current = strips2;
-  useEffect42(() => {
+  useEffect41(() => {
     let raf = 0;
     let active = null;
     let last = performance.now();
@@ -35170,7 +35155,7 @@ function MeterStrip({
     useRef60(null),
     useRef60(null)
   ];
-  useEffect42(() => {
+  useEffect41(() => {
     register(strip.id, [
       { mask: refs[0].current, peak: refs[1].current },
       { mask: refs[2].current, peak: refs[3].current }
@@ -35361,7 +35346,7 @@ function TimelinePane({
 import { useCallback as useCallback66 } from "react";
 
 // src/captions/components/CaptionOverlay.tsx
-import { memo as memo26, useEffect as useEffect43, useState as useState44, useCallback as useCallback53, useRef as useRef61 } from "react";
+import { memo as memo26, useEffect as useEffect42, useState as useState44, useCallback as useCallback53, useRef as useRef61 } from "react";
 
 // src/captions/keyboard.ts
 var CAPTION_NUDGE_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
@@ -35592,7 +35577,7 @@ var CaptionOverlay = memo26(function CaptionOverlay2({ iframeRef }) {
   modelRef.current = model;
   const cancelDragRef = useRef61(null);
   const interactionRef = useRef61(null);
-  useEffect43(() => {
+  useEffect42(() => {
     if (!isEditMode) return;
     const unregisterIframe = registerCaptionIframe(iframeRef);
     let prevBoxes = [];
@@ -35991,7 +35976,7 @@ var CaptionOverlay = memo26(function CaptionOverlay2({ iframeRef }) {
 });
 
 // src/components/editor/DomEditOverlay.tsx
-import { memo as memo29, useEffect as useEffect55, useMemo as useMemo42, useRef as useRef71 } from "react";
+import { memo as memo29, useEffect as useEffect54, useMemo as useMemo42, useRef as useRef71 } from "react";
 
 // src/utils/previewFeatureUsage.ts
 function trackPreviewFeatureUsed(feature, method) {
@@ -36006,7 +35991,7 @@ function trackPreviewEditResult(feature, method, result) {
 }
 
 // src/components/editor/marqueeCommit.ts
-import { useCallback as useCallback54, useEffect as useEffect44, useRef as useRef62, useState as useState45 } from "react";
+import { useCallback as useCallback54, useEffect as useEffect43, useRef as useRef62, useState as useState45 } from "react";
 
 // src/utils/studioPreviewHelpers.ts
 var FULL_BLEED_RATIO = 0.95;
@@ -37048,7 +37033,7 @@ function useMarqueeGestures(deps) {
     releaseCapture(marqueeRef.current);
     reset();
   }, [reset]);
-  useEffect44(() => {
+  useEffect43(() => {
     const cancelBandBeforeHostEscape = (e) => {
       if (e.key !== "Escape" || !marqueeRef.current) return;
       e.preventDefault();
@@ -37169,13 +37154,13 @@ function MarqueeOverlay({ candidateRects, marqueeRect }) {
 }
 
 // src/components/editor/useZOrderCrossedFlash.tsx
-import { useCallback as useCallback55, useEffect as useEffect45, useRef as useRef63, useState as useState46 } from "react";
+import { useCallback as useCallback55, useEffect as useEffect44, useRef as useRef63, useState as useState46 } from "react";
 import { jsx as jsx93 } from "react/jsx-runtime";
 var Z_ORDER_CROSSED_FLASH_MS = 600;
 function useZOrderCrossedFlash({ overlayRef, iframeRef }) {
   const [zOrderFlashRect, setZOrderFlashRect] = useState46(null);
   const timeoutRef = useRef63(null);
-  useEffect45(
+  useEffect44(
     () => () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     },
@@ -37213,7 +37198,7 @@ function ZOrderCrossedFlash({ rect }) {
 }
 
 // src/components/editor/useCanvasContextMenuState.ts
-import { useCallback as useCallback56, useEffect as useEffect46, useState as useState47 } from "react";
+import { useCallback as useCallback56, useEffect as useEffect45, useState as useState47 } from "react";
 function useCanvasContextMenuState({
   selection,
   selectionRef,
@@ -37223,7 +37208,7 @@ function useCanvasContextMenuState({
 }) {
   const [contextMenu, setContextMenu] = useState47(null);
   const closeContextMenu = useCallback56(() => setContextMenu(null), []);
-  useEffect46(() => {
+  useEffect45(() => {
     if (!contextMenu) return;
     if (!selection || selection.element !== contextMenu.sel.element) {
       setContextMenu(null);
@@ -40474,7 +40459,7 @@ function createDomEditOverlayGestureHandlers(opts) {
 }
 
 // src/components/editor/useDomEditNudge.ts
-import { useCallback as useCallback57, useEffect as useEffect47, useRef as useRef65 } from "react";
+import { useCallback as useCallback57, useEffect as useEffect46, useRef as useRef65 } from "react";
 
 // src/components/editor/domEditNudge.ts
 var CANVAS_NUDGE_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
@@ -40562,7 +40547,7 @@ function useDomEditNudge(params) {
   };
   const commitSessionRef = useRef65(commitSession);
   commitSessionRef.current = commitSession;
-  useEffect47(() => {
+  useEffect46(() => {
     if (params.allowCanvasMovement || !sessionRef.current) return;
     const session = sessionRef.current;
     sessionRef.current = null;
@@ -40623,8 +40608,8 @@ function useDomEditNudge(params) {
   });
   const selectionKey = selectionIdentityKey(params.selection);
   const groupSelectionsKey = groupSelectionsIdentityKey(params.groupSelections);
-  useEffect47(() => () => void commitSessionRef.current(), [selectionKey, groupSelectionsKey]);
-  useEffect47(() => {
+  useEffect46(() => () => void commitSessionRef.current(), [selectionKey, groupSelectionsKey]);
+  useEffect46(() => {
     const targets = params.groupSelections.length > 1 ? params.groupSelections : params.selection ? [params.selection] : [];
     if (!params.allowCanvasMovement || !canCanvasNudgeTargets(targets)) return;
     return acquireCanvasNudgeKeys();
@@ -40774,7 +40759,7 @@ var SnapGuideOverlay = memo27(function SnapGuideOverlay2({
 });
 
 // src/components/editor/DomEditCropHandles.tsx
-import { useEffect as useEffect49, useRef as useRef67, useState as useState49 } from "react";
+import { useEffect as useEffect48, useRef as useRef67, useState as useState49 } from "react";
 
 // src/components/editor/cropResize.ts
 var boxOf = (element) => ({
@@ -40862,7 +40847,7 @@ async function writeSizeWithCrop(selection, properties, mutation, commit2, write
 }
 
 // src/components/editor/CropPresetBar.tsx
-import { useEffect as useEffect48 } from "react";
+import { useEffect as useEffect47 } from "react";
 
 // src/components/editor/cropPresets.ts
 var CROP_ASPECT_PRESETS = [
@@ -40893,7 +40878,7 @@ function CropPresetBar({
   onApply,
   onDone
 }) {
-  useEffect48(() => {
+  useEffect47(() => {
     const onKeyDown = (event) => {
       if (event.key === "Escape") onDone();
     };
@@ -41001,7 +40986,7 @@ function DomEditCropHandles({
   const committed = readCropFollowingResize(selection.element) ?? NO_CROP;
   const insets = dragging ? state.insets : committed;
   const hasCrop2 = hasCropInsets(insets);
-  useEffect49(() => {
+  useEffect48(() => {
     const el = selection.element;
     if (readElementCropInsets(el) === null) return;
     liftElementCrop(el);
@@ -41685,10 +41670,10 @@ var CanvasContextMenu = memo28(function CanvasContextMenu2({
 });
 
 // src/components/editor/useInlineTextEditing.tsx
-import { useEffect as useEffect53, useRef as useRef69 } from "react";
+import { useEffect as useEffect52, useRef as useRef69 } from "react";
 
 // src/components/editor/InlineTextCaret.tsx
-import { useEffect as useEffect50, useState as useState50 } from "react";
+import { useEffect as useEffect49, useState as useState50 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
 import { jsx as jsx101 } from "react/jsx-runtime";
 var CARET_PX = 2;
@@ -41698,7 +41683,7 @@ function InlineTextCaret({
 }) {
   const [placement, setPlacement] = useState50(null);
   const element = session?.element ?? null;
-  useEffect50(() => {
+  useEffect49(() => {
     if (!element || !iframe) {
       setPlacement(null);
       return;
@@ -41849,7 +41834,7 @@ function neighbours({ startContainer: at, startOffset: offset }) {
 }
 
 // src/components/editor/InlineTextToolbar.tsx
-import { useCallback as useCallback58, useEffect as useEffect51, useState as useState51 } from "react";
+import { useCallback as useCallback58, useEffect as useEffect50, useState as useState51 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 
 // src/components/editor/inlineTextStyleRange.ts
@@ -42239,7 +42224,7 @@ function InlineTextToolbar({
   const refresh2 = useCallback58(() => {
     setPlacement(session && iframe ? placeOverSelection(session.element, iframe) : null);
   }, [session, iframe]);
-  useEffect51(() => {
+  useEffect50(() => {
     const doc = session?.element.ownerDocument;
     if (!doc) {
       setPlacement(null);
@@ -42417,7 +42402,7 @@ function isBold(weight) {
 }
 
 // src/hooks/useInlineTextEdit.ts
-import { useCallback as useCallback59, useEffect as useEffect52, useRef as useRef68, useState as useState52 } from "react";
+import { useCallback as useCallback59, useEffect as useEffect51, useRef as useRef68, useState as useState52 } from "react";
 import { sanitizeRichTextChildren } from "@hyperframes/core/rich-text-sanitize";
 var EDITABLE = "true";
 var EDITING_OUTLINE = "2px solid #3CE6AC";
@@ -42503,10 +42488,10 @@ function useInlineTextEdit({
     if (open.element.isConnected) open.element.innerHTML = open.original;
     teardown();
   }, [teardown]);
-  useEffect52(() => {
+  useEffect51(() => {
     if (readOnly && openRef.current) cancel();
   }, [cancel, readOnly]);
-  useEffect52(() => {
+  useEffect51(() => {
     const element = session?.element;
     if (!element) return;
     const onKeyDown = (event) => {
@@ -42548,7 +42533,7 @@ function useInlineTextEdit({
   }, [session, commit2]);
   const commitRef = useRef68(commit2);
   commitRef.current = commit2;
-  useEffect52(() => () => commitRef.current(), []);
+  useEffect51(() => () => commitRef.current(), []);
   return { session, start, commit: commit2, cancel };
 }
 function placeCaret(element, at) {
@@ -42665,7 +42650,7 @@ function useInlineTextEditing(selectionRef, { enterFromWindow = false } = {}) {
   };
   const handleKeyDownRef = useRef69(handleKeyDown);
   handleKeyDownRef.current = handleKeyDown;
-  useEffect53(() => {
+  useEffect52(() => {
     if (!enterFromWindow) return;
     const onKeyDown = (event) => {
       const { body, documentElement } = window.document;
@@ -42709,7 +42694,7 @@ function useInlineTextEditing(selectionRef, { enterFromWindow = false } = {}) {
 }
 
 // src/components/editor/useOffCanvasIndicators.ts
-import { useEffect as useEffect54, useRef as useRef70, useState as useState53 } from "react";
+import { useEffect as useEffect53, useRef as useRef70, useState as useState53 } from "react";
 
 // src/components/editor/offCanvasIndicatorGeometry.ts
 function rounded(value) {
@@ -42885,7 +42870,7 @@ function useOffCanvasIndicators({
       setRects: setOffCanvasRects
     })
   );
-  useEffect54(() => {
+  useEffect53(() => {
     offCanvasDirtyRef.current = true;
   }, [activeCompositionPath]);
   return { offCanvasRects, offCanvasElementsRef };
@@ -42953,7 +42938,7 @@ var DomEditOverlay = memo29(function DomEditOverlay2({
   const inlineText = useInlineTextEditing(selectionRef, { enterFromWindow: hostInput });
   const onTextEditingChangeRef = useRef71(onTextEditingChange);
   onTextEditingChangeRef.current = onTextEditingChange;
-  useEffect55(() => {
+  useEffect54(() => {
     if (!inlineText.editing) return;
     onTextEditingChangeRef.current?.(true);
     return () => onTextEditingChangeRef.current?.(false);
@@ -43045,7 +43030,7 @@ var DomEditOverlay = memo29(function DomEditOverlay2({
     onCanvasMouseDown,
     snapGuidesRef
   });
-  useEffect55(() => {
+  useEffect54(() => {
     if (readOnly) gestures.clearPointerState(selectionRef, true);
   }, [gestures, readOnly, selectionRef]);
   const cancelGestureRef = useRef71((_dropQueued) => {
@@ -43289,7 +43274,7 @@ import { useCallback as useCallback63, useMemo as useMemo43 } from "react";
 import { useCallback as useCallback61 } from "react";
 
 // src/components/editor/useLayerRevealOverride.ts
-import { useCallback as useCallback60, useEffect as useEffect56, useRef as useRef72 } from "react";
+import { useCallback as useCallback60, useEffect as useEffect55, useRef as useRef72 } from "react";
 var LAYER_REVEAL_LIFT_Z = "2147483000";
 var LAYER_REVEAL_PENDING_COMMIT_ATTR = "data-hf-studio-reveal-pending-commit";
 var revealCommitSequence = 0;
@@ -43518,13 +43503,13 @@ function useLayerRevealOverride({
     },
     [cancelScheduledReveal, reveal2]
   );
-  useEffect56(() => {
+  useEffect55(() => {
     const pending2 = pendingRevealRef.current;
     if (isPlaying || pending2 && pending2.element !== selectedElement) cancelScheduledReveal();
     const base2 = stateRef.current?.base;
     if (isPlaying || base2 && selectedElement !== base2) restoreReveal();
   }, [cancelScheduledReveal, isPlaying, restoreReveal, selectedElement]);
-  useEffect56(
+  useEffect55(
     () => () => {
       cancelScheduledReveal();
       restoreReveal();
@@ -45274,7 +45259,7 @@ function ConnectedDomEditOverlay({
 
 // src/components/editor/TopologyLens.tsx
 import {
-  useEffect as useEffect57,
+  useEffect as useEffect56,
   useLayoutEffect as useLayoutEffect11,
   useReducer,
   useRef as useRef74,
@@ -46093,8 +46078,8 @@ function useTopologyLensState() {
     lifecycle,
     (initialLifecycle) => reduceTopologyLens({ phase: "hidden" }, { type: "lifecycle", value: initialLifecycle })
   );
-  useEffect57(() => dispatch({ type: "lifecycle", value: lifecycle }), [lifecycle]);
-  useEffect57(() => {
+  useEffect56(() => dispatch({ type: "lifecycle", value: lifecycle }), [lifecycle]);
+  useEffect56(() => {
     if (state.phase === "hidden") return;
     const delay2 = state.phase === "acquiring" ? ACQUISITION_MS : state.phase === "sealing" ? SEAL_MS : state.terminal ? TERMINAL_RETRACT_MS : null;
     if (delay2 === null) return;
@@ -46140,13 +46125,13 @@ function TopologyLens({ iframeRef, activeCompositionPath }) {
     setMeasured(geometry2 ? { callId, geometry: geometry2 } : null);
   }, [activeCompositionPath, callId, handle, iframeRef, phase]);
   const livePreviewIframe = useLivePreviewIframe();
-  useEffect57(() => {
+  useEffect56(() => {
     const iframe = iframeRef.current;
     if (!iframe || !callId) return;
     const dismiss = () => studioEditLifecycle.dismiss(callId);
     return onPreviewContentReplaced(iframe, dismiss);
   }, [callId, iframeRef, livePreviewIframe]);
-  useEffect57(() => {
+  useEffect56(() => {
     if (pendingUnmountDismissRef.current !== null) {
       window.clearTimeout(pendingUnmountDismissRef.current);
       pendingUnmountDismissRef.current = null;
@@ -46414,7 +46399,7 @@ function writeKeyframeCache(sourceFile, elementId2, data) {
 }
 
 // src/components/editor/MotionPathOverlay.tsx
-import { memo as memo30, useEffect as useEffect59, useRef as useRef76, useState as useState56 } from "react";
+import { memo as memo30, useEffect as useEffect58, useRef as useRef76, useState as useState56 } from "react";
 
 // src/hooks/useGsapInteractionFailureTelemetry.ts
 import { useCallback as useCallback64 } from "react";
@@ -47827,7 +47812,7 @@ function elementHome(el) {
 }
 
 // src/components/editor/useMotionPathData.ts
-import { useEffect as useEffect58, useRef as useRef75, useState as useState55 } from "react";
+import { useEffect as useEffect57, useRef as useRef75, useState as useState55 } from "react";
 import { isHtmlElement as isHtmlElement8 } from "@hyperframes/core/runtime/dom-realm";
 function transformWDivisor(el) {
   const t2 = el.ownerDocument?.defaultView?.getComputedStyle(el).transform;
@@ -47858,7 +47843,7 @@ function useMotionPathData(iframeRef, selector) {
   const [pScale, setPScale] = useState55(1);
   const armed = usePlayerStore((s) => s.motionPathArmed);
   const drawn = geometry !== null || armed;
-  useEffect58(() => {
+  useEffect57(() => {
     if (!selector) {
       setRect(null);
       setHome(null);
@@ -47899,7 +47884,7 @@ function useMotionPathData(iframeRef, selector) {
     };
     return subscribeOverlayFrame(tick);
   }, [selector, iframeRef, drawn]);
-  useEffect58(() => {
+  useEffect57(() => {
     if (!selector) {
       setGeometry(null);
       return;
@@ -47975,20 +47960,20 @@ var MotionPathOverlay = memo30(function MotionPathOverlay2({
     geometry?.kind ?? "linear",
     selection
   );
-  useEffect59(() => () => clearTimeout(parkTimerRef.current), [animId]);
+  useEffect58(() => () => clearTimeout(parkTimerRef.current), [animId]);
   const createMode = geometryResolved && !geometry && Boolean(selection?.element) && !isPlaying;
   const createSelector = createMode ? selectorFor(selection) : null;
   const compW = compositionSize?.width ?? null;
   const livePreviewIframe = useLivePreviewIframe();
   const canCreate = createMode && !!createSelector && hasMotionPathPlugin(livePreviewIframe);
-  useEffect59(() => {
+  useEffect58(() => {
     setMotionPathCreateAvailable(Boolean(canCreate));
     return () => setMotionPathCreateAvailable(false);
   }, [canCreate, setMotionPathCreateAvailable]);
-  useEffect59(() => {
+  useEffect58(() => {
     if (armed && !canCreate) setMotionPathArmed(false);
   }, [armed, canCreate, setMotionPathArmed]);
-  useEffect59(() => {
+  useEffect58(() => {
     if (!armed || !createSelector || !compW) return;
     const surface = iframeRef.current?.ownerDocument?.querySelector(
       "[data-preview-pan-surface]"
@@ -48290,7 +48275,7 @@ var MotionPathOverlay = memo30(function MotionPathOverlay2({
 });
 
 // src/components/editor/SnapToolbar.tsx
-import { memo as memo31, useCallback as useCallback65, useEffect as useEffect60, useRef as useRef77, useState as useState57 } from "react";
+import { memo as memo31, useCallback as useCallback65, useEffect as useEffect59, useRef as useRef77, useState as useState57 } from "react";
 import { MagnetStraight, GridFour, Path, Ruler, FrameCorners } from "@phosphor-icons/react";
 import { jsx as jsx109, jsxs as jsxs77 } from "react/jsx-runtime";
 var SnapToolbar = memo31(function SnapToolbar2() {
@@ -48311,7 +48296,7 @@ var SnapToolbar = memo31(function SnapToolbar2() {
     if (previous !== null && previous !== currentGridSpacing.current)
       trackPreviewFeatureUsed("grid_spacing", "field");
   }, []);
-  useEffect60(() => settleGridSpacing, [settleGridSpacing]);
+  useEffect59(() => settleGridSpacing, [settleGridSpacing]);
   const updatePrefs = useCallback65(
     (patch) => {
       actions.setSnapPrefs(patch);
@@ -48326,7 +48311,7 @@ var SnapToolbar = memo31(function SnapToolbar2() {
     updatePrefs({ gridVisible: !prefs.gridVisible });
     trackPreviewFeatureUsed("grid", "button");
   }, [prefs.gridVisible, updatePrefs]);
-  useEffect60(() => {
+  useEffect59(() => {
     const handleKeyDown = (e) => {
       if (e.defaultPrevented) return;
       if (ownsPlainKeys(e.target)) return;
@@ -48345,7 +48330,7 @@ var SnapToolbar = memo31(function SnapToolbar2() {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [prefs.gridVisible, prefs.snapEnabled, updatePrefs]);
-  useEffect60(() => {
+  useEffect59(() => {
     if (!gridPopoverOpen) return;
     const handleClickOutside = (e) => {
       const target = e.target;
@@ -48536,7 +48521,7 @@ var GridOverlay = memo32(function GridOverlay2() {
 });
 
 // src/hooks/useCompositionDimensions.ts
-import { useEffect as useEffect61, useState as useState58 } from "react";
+import { useEffect as useEffect60, useState as useState58 } from "react";
 function readCompositionSizeMessage(data) {
   if (!isStageSizeMessage(data)) return null;
   const message = data;
@@ -48564,7 +48549,7 @@ function useCompositionDimensions(iframeRef) {
     null
   );
   const livePreviewIframe = useLivePreviewIframe();
-  useEffect61(() => {
+  useEffect60(() => {
     const dimensions = readPreviewCompositionSize(livePreviewIframe);
     if (!dimensions) return;
     setCompositionDimensions(
@@ -48725,7 +48710,7 @@ function PreviewOverlays({
 import { useCallback as useCallback68, useMemo as useMemo45 } from "react";
 
 // src/hooks/useGsapTweenCache.ts
-import { useEffect as useEffect62, useMemo as useMemo44, useRef as useRef78, useState as useState59, useCallback as useCallback67 } from "react";
+import { useEffect as useEffect61, useMemo as useMemo44, useRef as useRef78, useState as useState59, useCallback as useCallback67 } from "react";
 
 // src/hooks/gsapRuntimeBridge.ts
 import { isXYPositionWrite, PROPERTY_GROUPS } from "@hyperframes/parsers/gsap-constants";
@@ -49356,7 +49341,7 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
   const domClipChildrenKey = usePlayerStore(
     (s) => s.domClipChildren.map((c) => `${c.id}<${c.hostId}`).join("|")
   );
-  useEffect62(() => {
+  useEffect61(() => {
     const targetKey = target?.id ?? target?.selector ?? "";
     const fetchKey = `${projectId}:${sourceFile}:${version}:${targetKey}`;
     if (fetchKey === lastFetchKeyRef.current) return;
@@ -49448,7 +49433,7 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
     return result;
   }, [rawAnimations, allAnimations, iframeRef, targetId]);
   const elementId2 = target?.id ?? null;
-  useEffect62(() => {
+  useEffect61(() => {
     if (!elementId2) return;
     const sourceAnimations = animations.filter(
       (animation2) => !isStaticPositionHold(animation2) && (animation2.keyframes || synthesizeFlatTweenKeyframes(animation2))
@@ -49516,7 +49501,7 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
     files: /* @__PURE__ */ new Set()
   });
   const runtimeScanDoneRef = useRef78("");
-  useEffect62(() => {
+  useEffect61(() => {
     const dataKey = `kf-cache:${projectId}:${version}:${elementCount}:${domClipChildrenKey}:${compositionSrcKey}`;
     if (!projectId) return;
     const files = Array.from(
@@ -49536,7 +49521,7 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
       });
     }
   }, [projectId, sourceFile, version, elementCount, domClipChildrenKey, compositionSrcKey]);
-  useEffect62(() => {
+  useEffect61(() => {
     if (!projectId) return;
     const sf = sourceFile;
     let attempts = 0;
@@ -50042,7 +50027,7 @@ var CaptionTimeline = memo33(function CaptionTimeline2({
 });
 
 // src/hooks/useTimelineSelectionPreviewSync.ts
-import { useEffect as useEffect63, useMemo as useMemo46, useRef as useRef79 } from "react";
+import { useEffect as useEffect62, useMemo as useMemo46, useRef as useRef79 } from "react";
 var MAX_UNRESOLVED_SYNC_RETRIES = 3;
 function orderSelectedIds(ids, anchor2) {
   const ordered = [...ids];
@@ -50101,7 +50086,7 @@ function useTimelineSelectionPreviewSync({
   const unresolvedAttemptsRef = useRef79({ id: "", count: 0 });
   domEditSelectionRef.current = domEditSelection;
   domEditGroupSelectionsRef.current = domEditGroupSelections;
-  useEffect63(() => {
+  useEffect62(() => {
     const previousSelectedKey = lastSyncedSelectedKeyRef.current;
     lastSyncedSelectedKeyRef.current = selectedKey;
     const currentDomEditSelection = domEditSelectionRef.current;
@@ -50178,10 +50163,10 @@ function useTimelineSelectionPreviewSync({
 }
 
 // src/webmcp/StudioAgentTools.tsx
-import { useCallback as useCallback70, useEffect as useEffect65, useMemo as useMemo47 } from "react";
+import { useCallback as useCallback70, useEffect as useEffect64, useMemo as useMemo47 } from "react";
 
 // src/webmcp/useStudioAgentTools.ts
-import { useEffect as useEffect64, useRef as useRef80 } from "react";
+import { useEffect as useEffect63, useRef as useRef80 } from "react";
 
 // src/webmcp/types.ts
 function isModelContext(value) {
@@ -51402,7 +51387,7 @@ function readNumberInput(input, key2) {
 function useStudioAgentTools(deps) {
   const depsRef = useRef80(deps);
   depsRef.current = deps;
-  useEffect64(() => {
+  useEffect63(() => {
     if (readStudioUiPreferences().agentToolsEnabled === false) {
       log2("skipped", { why: "disabled by preference" });
       return;
@@ -51466,7 +51451,7 @@ function StudioAgentTools() {
     handleGsapDeleteAnimation,
     getGsapAnimationsForSelection
   } = useDomEditActionsContext();
-  useEffect65(() => {
+  useEffect64(() => {
     studioEditLifecycle.activateProject(projectId);
     return () => studioEditLifecycle.reset();
   }, [projectId]);
@@ -51587,7 +51572,7 @@ import {
   createContext as createContext7,
   useCallback as useCallback73,
   useContext as useContext11,
-  useEffect as useEffect66,
+  useEffect as useEffect65,
   useRef as useRef81,
   useState as useState60
 } from "react";
@@ -52144,7 +52129,7 @@ function Root({
   }, []);
   const disposeRef = useRef81(() => {
   });
-  useEffect66(() => () => disposeRef.current(), []);
+  useEffect65(() => () => disposeRef.current(), []);
   const onReady = useCallback73(
     ({ api }) => {
       disposeRef.current();
@@ -52222,7 +52207,7 @@ function Panel({ id, title, children }) {
   const controller = useDockLayoutStore((state) => state.controller);
   const open = useDockLayoutStore((state) => state.openPanels.has(id));
   const label = title ?? PANEL_DEFINITIONS[id].title;
-  useEffect66(() => {
+  useEffect65(() => {
     if (open) controller?.setTitle(id, label);
   }, [controller, id, label, open]);
   const definition = PANEL_DEFINITIONS[id];
@@ -52236,7 +52221,7 @@ function WindowMenu() {
   const resetLayout = useDockLayoutStore((state) => state.resetLayout);
   const [open, setOpen] = useState60(false);
   const rootRef = useRef81(null);
-  useEffect66(() => {
+  useEffect65(() => {
     if (!open) return;
     const close = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
@@ -52751,7 +52736,7 @@ function AudibleVideoClipContent({
 }
 
 // src/player/components/ClipPeakMarks.tsx
-import { useContext as useContext12, useEffect as useEffect67, useState as useState61 } from "react";
+import { useContext as useContext12, useEffect as useEffect66, useState as useState61 } from "react";
 import { jsx as jsx120, jsxs as jsxs86 } from "react/jsx-runtime";
 var dbText2 = (db) => `${db < 0 ? "\u2212" : "+"}${Math.abs(db).toFixed(1)} dBFS`;
 function ClipPeakMarks({
@@ -52761,7 +52746,7 @@ function ClipPeakMarks({
   children
 }) {
   const [map, setMap] = useState61(null);
-  useEffect67(() => {
+  useEffect66(() => {
     if (!peaksUrl) return;
     let live = true;
     void loadPeakMap(peaksUrl).then((loaded) => {
@@ -52774,7 +52759,7 @@ function ClipPeakMarks({
   const { runs, peakDbfs } = map ? clipPeakRuns(map, sourceWindow, gain) : { runs: [], peakDbfs: null };
   const detail = runs.length > 0 && peakDbfs !== null ? `Peaks ${dbText2(peakDbfs)} at this volume; export lowers the whole mix` : null;
   const setDetail = useContext12(ClipPeakDescriptionContext);
-  useEffect67(() => {
+  useEffect66(() => {
     setDetail?.(detail);
     return () => setDetail?.(null);
   }, [detail, setDetail]);
@@ -53011,7 +52996,7 @@ function useThumbnailStill(url, projectId, { sessionEpoch = 0, priority = "visib
 }
 
 // src/components/editor/SourceEditor.tsx
-import { useRef as useRef82, useCallback as useCallback76, useEffect as useEffect68, memo as memo36 } from "react";
+import { useRef as useRef82, useCallback as useCallback76, useEffect as useEffect67, memo as memo36 } from "react";
 import {
   EditorView as EditorView2,
   keymap,
@@ -53208,7 +53193,7 @@ var SourceEditor = memo36(function SourceEditor2({
     },
     [filePath, language, readOnly]
   );
-  useEffect68(() => {
+  useEffect67(() => {
     const view = editorRef.current;
     if (!view) return;
     const current = view.state.doc.toString();
@@ -53219,7 +53204,7 @@ var SourceEditor = memo36(function SourceEditor2({
       annotations: [ExternalSync.of(true)]
     });
   }, [content]);
-  useEffect68(() => {
+  useEffect67(() => {
     const view = editorRef.current;
     if (!view || revealOffset == null || revealOffset < 0) return;
     const docLen = view.state.doc.length;
@@ -53895,13 +53880,13 @@ function buildElementInfoText(element, sourceLabel, gsapAnimations, previewIfram
 }
 
 // src/components/editor/propertyPanelPrimitives.tsx
-import { useCallback as useCallback79, useEffect as useEffect71, useRef as useRef85, useState as useState64 } from "react";
+import { useCallback as useCallback79, useEffect as useEffect70, useRef as useRef85, useState as useState64 } from "react";
 
 // src/components/editor/propertyPanelCommitField.tsx
-import { useEffect as useEffect70, useRef as useRef84, useState as useState63 } from "react";
+import { useEffect as useEffect69, useRef as useRef84, useState as useState63 } from "react";
 
 // src/components/editor/useInspectorGestureTransaction.ts
-import { useCallback as useCallback78, useEffect as useEffect69, useRef as useRef83, useState as useState62 } from "react";
+import { useCallback as useCallback78, useEffect as useEffect68, useRef as useRef83, useState as useState62 } from "react";
 function isPromiseCommit(result) {
   return Boolean(result && typeof result.then === "function");
 }
@@ -53993,7 +53978,7 @@ function useInspectorGestureTransaction({
       previewRef.current(active.before);
     }
   }, []);
-  useEffect69(() => cancel, [cancel]);
+  useEffect68(() => cancel, [cancel]);
   return { begin, preview: preview2, settle, cancel, activeRef };
 }
 function useInspectorGestureDraft({
@@ -54013,7 +53998,7 @@ function useInspectorGestureDraft({
       return onCommit(next);
     }
   });
-  useEffect69(() => {
+  useEffect68(() => {
     if (!transaction.activeRef.current) setDraft(sourceValue);
   }, [sourceValue, transaction.activeRef]);
   return { draft, setDraft, transaction };
@@ -54153,11 +54138,11 @@ function CommitField({
     }
     previewNumericKeyStep(event);
   };
-  useEffect70(() => {
+  useEffect69(() => {
     if (focusedRef.current && dirtyRef.current) return;
     setDraft(value);
   }, [value]);
-  useEffect70(() => {
+  useEffect69(() => {
     const el = inputRef.current;
     if (!el) return;
     const handler = (event) => {
@@ -54308,10 +54293,10 @@ function SliderControl({
   const interactionChangedRef = useRef85(false);
   const valueRef = useRef85(value);
   valueRef.current = value;
-  useEffect71(() => {
+  useEffect70(() => {
     setDraft(value);
   }, [value]);
-  useEffect71(
+  useEffect70(
     () => () => {
       if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
     },
@@ -54549,7 +54534,7 @@ function createTransformCommitHandlers({
 import { resolveEditingSections } from "@hyperframes/core/editing";
 
 // src/components/editor/propertyPanelMediaSection.tsx
-import { useEffect as useEffect72, useState as useState65 } from "react";
+import { useEffect as useEffect71, useState as useState65 } from "react";
 import {
   AUDIO_GAIN_FADER_MAX as AUDIO_GAIN_FADER_MAX2,
   AUDIO_GAIN_FADER_MIN as AUDIO_GAIN_FADER_MIN2,
@@ -54659,7 +54644,7 @@ function MediaSection({
   const absoluteSrc = projectDir && projectSrc ? `${projectDir}/${projectSrc}` : srcAttr;
   const canRemoveBackground = Boolean(onRemoveBackground && isVisualMedia && projectSrc);
   const panelTitle = isImage ? "Image" : isVideo ? "Video" : "Audio";
-  useEffect72(() => {
+  useEffect71(() => {
     setRemoveProgress(null);
     setCreatePlate(false);
   }, [srcAttr]);
@@ -54954,7 +54939,7 @@ import {
 } from "@hyperframes/core/color-grading";
 
 // src/components/editor/propertyPanelColorGradingSlider.tsx
-import { useCallback as useCallback80, useEffect as useEffect73, useRef as useRef86, useState as useState66 } from "react";
+import { useCallback as useCallback80, useEffect as useEffect72, useRef as useRef86, useState as useState66 } from "react";
 import { jsx as jsx127, jsxs as jsxs90 } from "react/jsx-runtime";
 var SLIDER_THUMB_SIZE = 10;
 var SLIDER_THUMB_RADIUS = SLIDER_THUMB_SIZE / 2;
@@ -54997,7 +54982,7 @@ function ColorGradingSliderControl({
   const interactionChangedRef = useRef86(false);
   const valueRef = useRef86(value);
   valueRef.current = value;
-  useEffect73(
+  useEffect72(
     () => () => {
       if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
     },
@@ -55671,7 +55656,7 @@ function ColorGradingControls({
 }
 
 // src/components/editor/useColorGradingController.ts
-import { useCallback as useCallback82, useEffect as useEffect75, useMemo as useMemo52, useRef as useRef89, useState as useState69 } from "react";
+import { useCallback as useCallback82, useEffect as useEffect74, useMemo as useMemo52, useRef as useRef89, useState as useState69 } from "react";
 import {
   HF_COLOR_GRADING_ATTR as HF_COLOR_GRADING_ATTR3,
   hasHfColorGradingAuthoredValues,
@@ -55681,7 +55666,7 @@ import {
 } from "@hyperframes/core/color-grading";
 
 // src/components/editor/useColorGradingPreviews.ts
-import { useCallback as useCallback81, useEffect as useEffect74, useRef as useRef88, useState as useState68 } from "react";
+import { useCallback as useCallback81, useEffect as useEffect73, useRef as useRef88, useState as useState68 } from "react";
 import {
   HF_COLOR_GRADING_ACTIVE_EFFECT_KEYS,
   HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS,
@@ -55762,7 +55747,7 @@ function useColorGradingPreviews({
   }
   const previews = state.identityKey === identityKey ? state.previews : emptyPreviews();
   const livePreviewIframe = useLivePreviewIframe();
-  useEffect74(() => {
+  useEffect73(() => {
     if (!request2) return;
     const { kind } = request2;
     const iframe = previewIframeRef?.current;
@@ -55909,7 +55894,7 @@ function useColorGradingPreviews({
     },
     [gradingRef, postColorGrading, previewIframeRef, stopAnimatedPreview, target]
   );
-  useEffect74(() => stopAnimatedPreview, [identityKey, stopAnimatedPreview]);
+  useEffect73(() => stopAnimatedPreview, [identityKey, stopAnimatedPreview]);
   const requestPreviews = useCallback81(
     (kind, effects) => {
       setRequest((current) => ({
@@ -56065,7 +56050,7 @@ function useColorGradingController({
     setRuntimeStatus({ state: "pending", message: "Waiting for runtime" });
     setMediaMetadata(null);
   }
-  useEffect75(() => {
+  useEffect74(() => {
     return () => {
       for (const timer of statusTimersRef.current) clearTimeout(timer);
       statusTimersRef.current = [];
@@ -56093,7 +56078,7 @@ function useColorGradingController({
   const refreshRuntimeStatus = useCallback82(() => {
     setRuntimeStatus(readRuntimeColorGradingStatus(previewIframeRef?.current, target));
   }, [previewIframeRef, target]);
-  useEffect75(() => {
+  useEffect74(() => {
     setMediaMetadata(null);
     if (!selectedAssetPath) return;
     const cacheKey = mediaMetadataUrl(projectId, selectedAssetPath);
@@ -56129,7 +56114,7 @@ function useColorGradingController({
       (delay2) => window.setTimeout(refreshRuntimeStatus, delay2)
     );
   }, [clearStatusTimers, refreshRuntimeStatus]);
-  useEffect75(() => {
+  useEffect74(() => {
     refreshRuntimeStatus();
   }, [refreshRuntimeStatus]);
   const persistColorGradingValue = useCallback82(
@@ -56177,8 +56162,8 @@ function useColorGradingController({
       onSetAttributeLive
     );
   }, [onSetAttributeLive, persistColorGradingValue]);
-  useEffect75(() => addStudioPendingEditFlushListener(flushPendingPersist), [flushPendingPersist]);
-  useEffect75(() => {
+  useEffect74(() => addStudioPendingEditFlushListener(flushPendingPersist), [flushPendingPersist]);
+  useEffect74(() => {
     return () => {
       clearStatusTimers();
       void flushPendingPersist();
@@ -56215,7 +56200,7 @@ function useColorGradingController({
     [previewIframeRef, target]
   );
   const livePreviewIframe = useLivePreviewIframe();
-  useEffect75(() => {
+  useEffect74(() => {
     const iframe = previewIframeRef?.current;
     if (!iframe) return;
     const refreshAndReplay = () => {
@@ -56247,7 +56232,7 @@ function useColorGradingController({
     scheduleRuntimeStatusRefresh,
     livePreviewIframe
   ]);
-  useEffect75(
+  useEffect74(
     () => () => {
       postCompare(false);
     },
@@ -56551,10 +56536,10 @@ function ColorGradingSection({
 }
 
 // src/components/editor/propertyPanelSections.tsx
-import { useEffect as useEffect81, useRef as useRef94, useState as useState78 } from "react";
+import { useEffect as useEffect80, useRef as useRef94, useState as useState78 } from "react";
 
 // src/components/editor/propertyPanelColor.tsx
-import { useCallback as useCallback83, useEffect as useEffect76, useLayoutEffect as useLayoutEffect12, useRef as useRef90, useState as useState70 } from "react";
+import { useCallback as useCallback83, useEffect as useEffect75, useLayoutEffect as useLayoutEffect12, useRef as useRef90, useState as useState70 } from "react";
 import { createPortal as createPortal12 } from "react-dom";
 import { jsx as jsx130, jsxs as jsxs93 } from "react/jsx-runtime";
 var COLOR_PICKER_SIZE = { width: 292, height: 386 };
@@ -56733,7 +56718,7 @@ function ColorField({
       if (resolved2) persistColorValue(resolved2.value);
     }
   });
-  useEffect76(() => {
+  useEffect75(() => {
     const nextColor = colorFromCss(value);
     setDraftColor(nextColor);
     setHexDraft(toHexColor(nextColor).toUpperCase());
@@ -56764,7 +56749,7 @@ function ColorField({
       window.removeEventListener("scroll", handlePositionInvalidated, true);
     };
   }, [open, updatePanelPosition]);
-  useEffect76(() => {
+  useEffect75(() => {
     if (!open) return;
     panelRef.current?.focus();
     const restoreTarget = buttonRef.current;
@@ -57061,7 +57046,7 @@ function ColorField({
 }
 
 // src/components/editor/propertyPanelFont.tsx
-import { useEffect as useEffect77, useMemo as useMemo53, useRef as useRef91, useState as useState71, useSyncExternalStore as useSyncExternalStore10 } from "react";
+import { useEffect as useEffect76, useMemo as useMemo53, useRef as useRef91, useState as useState71, useSyncExternalStore as useSyncExternalStore10 } from "react";
 
 // src/components/editor/fontAssets.ts
 var FONT_EXT_RE = /\.(eot|otf|ttc|ttf|woff2?)$/i;
@@ -57237,7 +57222,7 @@ function FontFamilyField({
     if (nextValue !== value) track2("select", "Font family");
     onCommit(nextValue);
   };
-  useEffect77(() => {
+  useEffect76(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -57247,14 +57232,14 @@ function FontFamilyField({
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [open]);
-  useEffect77(() => {
+  useEffect76(() => {
     if (!open) return;
     requestAnimationFrame(() => inputRef.current?.focus());
   }, [open]);
-  useEffect77(() => {
+  useEffect76(() => {
     if (open) loadFontLists();
   }, [open]);
-  useEffect77(() => {
+  useEffect76(() => {
     if (lists.googleKeys.has(currentFamily.toLowerCase())) {
       loadGoogleFontStylesheet(currentFamily);
     }
@@ -57562,7 +57547,7 @@ function FontFamilyField({
 }
 
 // src/components/editor/PromotableControl.tsx
-import { useEffect as useEffect79 } from "react";
+import { useEffect as useEffect78 } from "react";
 
 // src/components/panels/VariablesBindElement.tsx
 import { useMemo as useMemo54, useState as useState73 } from "react";
@@ -57958,7 +57943,7 @@ function uniqueId(base2, existing) {
 }
 
 // src/contexts/VariablePromoteContext.tsx
-import { useContext as useContext14, useEffect as useEffect78, useMemo as useMemo55, useState as useState74 } from "react";
+import { useContext as useContext14, useEffect as useEffect77, useMemo as useMemo55, useState as useState74 } from "react";
 import { jsx as jsx134 } from "react/jsx-runtime";
 var VariablePromoteContext = createStableContext(
   "VariablePromoteContext",
@@ -57977,7 +57962,7 @@ function VariablePromoteProvider({
   children
 }) {
   const [revision, setRevision] = useState74(0);
-  useEffect78(() => {
+  useEffect77(() => {
     if (!session) return;
     return session.on("change", () => setRevision((r) => r + 1));
   }, [session]);
@@ -58039,7 +58024,7 @@ function PromotableControl({
 }) {
   const promote = useVariablePromoteChannel(channel);
   const danglingId = enabled && promote && promote.boundId != null && promote.declaration == null ? promote.boundId : null;
-  useEffect79(() => {
+  useEffect78(() => {
     if (danglingId != null) {
       console.warn(
         `[hyperframes] Control is bound to variable "${danglingId}", but no such declaration exists. The element still carries the binding on disk. Re-declare the variable or unbind the element.`
@@ -58089,7 +58074,7 @@ function PromotableControl({
 }
 
 // src/components/editor/propertyPanelStyleSections.tsx
-import { useEffect as useEffect80, useRef as useRef93, useState as useState77 } from "react";
+import { useEffect as useEffect79, useRef as useRef93, useState as useState77 } from "react";
 
 // src/components/editor/gradientValue.ts
 var RADIAL_SIZE_KEYWORDS = [
@@ -59125,10 +59110,10 @@ function StyleSections({
   const lastGradientRef = useRef93(
     backgroundImage.includes("gradient") ? backgroundImage : null
   );
-  useEffect80(() => {
+  useEffect79(() => {
     lastGradientRef.current = null;
   }, [element.id, element.selector]);
-  useEffect80(() => {
+  useEffect79(() => {
     setPreferredFillMode(fillMode);
     if (backgroundImage.includes("gradient")) {
       lastGradientRef.current = backgroundImage;
@@ -59585,17 +59570,17 @@ function TextAreaField({
   const focusedRef = useRef94(false);
   const valueRef = useRef94(value);
   valueRef.current = value;
-  useEffect81(() => {
+  useEffect80(() => {
     if (focusedRef.current) return;
     setDraft(value);
   }, [value]);
-  useEffect81(
+  useEffect80(
     () => () => {
       if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
     },
     []
   );
-  useEffect81(() => {
+  useEffect80(() => {
     if (!autoFocus) return;
     textareaRef.current?.focus();
   }, [autoFocus]);
@@ -59892,7 +59877,7 @@ function TextSection({
   const [activeTextFieldKey, setActiveTextFieldKey] = useState78(
     element.textFields[0]?.key ?? null
   );
-  useEffect81(() => {
+  useEffect80(() => {
     const nextFields = element.textFields;
     setActiveTextFieldKey((current) => {
       if (current && nextFields.some((field) => field.key === current)) return current;
@@ -59994,7 +59979,7 @@ import { useCallback as useCallback87, useState as useState80 } from "react";
 import { useShallow } from "zustand/react/shallow";
 
 // src/components/editor/AnimationCard.tsx
-import { memo as memo38, useCallback as useCallback86, useEffect as useEffect82, useMemo as useMemo57, useRef as useRef95, useState as useState79 } from "react";
+import { memo as memo38, useCallback as useCallback86, useEffect as useEffect81, useMemo as useMemo57, useRef as useRef95, useState as useState79 } from "react";
 import { SUPPORTED_EASES, SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
 
 // src/components/editor/gsapAnimationHelpers.ts
@@ -60541,7 +60526,7 @@ var AnimationCard = memo38(function AnimationCard2({
   const [focusedCollidingAnimationTargets, setFocusedCollidingAnimationTargets] = useState79();
   const cardRef = useRef95(null);
   const pendingAutoScrollRef = useRef95(false);
-  useEffect82(() => {
+  useEffect81(() => {
     if (!focusedSegment) return;
     setExpanded(true);
     pendingAutoScrollRef.current = true;
@@ -60549,7 +60534,7 @@ var AnimationCard = memo38(function AnimationCard2({
     setFocusedCollidingAnimationTargets(focusedSegment.collidingAnimationTargets);
     onFocusSegmentConsumed?.();
   }, [focusedSegment, onFocusSegmentConsumed]);
-  useEffect82(() => {
+  useEffect81(() => {
     if (!pendingAutoScrollRef.current || expandedKfPct === null) return;
     const segment = cardRef.current?.querySelector(
       `[data-ease-segment-pct="${expandedKfPct}"]`
@@ -61129,7 +61114,7 @@ var GsapAnimationSection = memo39(function GsapAnimationSection2({
 import { useState as useState82 } from "react";
 
 // src/components/editor/Transform3DCube.tsx
-import { useEffect as useEffect83, useRef as useRef96, useState as useState81 } from "react";
+import { useEffect as useEffect82, useRef as useRef96, useState as useState81 } from "react";
 
 // src/components/editor/transform3dProjection.ts
 var DEG = Math.PI / 180;
@@ -61252,7 +61237,7 @@ function Transform3DCube({
   const lens = perspective > 0 ? perspective : defaultPerspective;
   const depthRef = useRef96({ z, onDepthDraft, onDepthCommit, lens });
   depthRef.current = { z, onDepthDraft, onDepthCommit, lens };
-  useEffect83(() => {
+  useEffect82(() => {
     const el = svgRef.current;
     if (!el) return;
     let pending2 = null;
@@ -61773,7 +61758,7 @@ function PropertyPanel3dTransform({
 }
 
 // src/components/editor/PropertyPanelFlat.tsx
-import { useEffect as useEffect103, useMemo as useMemo64, useRef as useRef112, useState as useState104 } from "react";
+import { useEffect as useEffect102, useMemo as useMemo64, useRef as useRef112, useState as useState104 } from "react";
 import { useShallow as useShallow2 } from "zustand/react/shallow";
 
 // src/components/editor/audioFxSummary.ts
@@ -62006,10 +61991,10 @@ function PropertyPanelFlatFooter({
 }
 
 // src/components/editor/propertyPanelFlatPrimitives.tsx
-import { useEffect as useEffect85, useRef as useRef98, useState as useState84 } from "react";
+import { useEffect as useEffect84, useRef as useRef98, useState as useState84 } from "react";
 
 // src/components/editor/propertyPanelFlatSliderReadout.tsx
-import { useEffect as useEffect84, useRef as useRef97, useState as useState83 } from "react";
+import { useEffect as useEffect83, useRef as useRef97, useState as useState83 } from "react";
 import { jsx as jsx153 } from "react/jsx-runtime";
 function FlatSliderReadout({
   label,
@@ -62024,7 +62009,7 @@ function FlatSliderReadout({
   const [invalid, setInvalid] = useState83(false);
   const inputRef = useRef97(null);
   const editable = Boolean(onCommitText) && !disabled;
-  useEffect84(() => {
+  useEffect83(() => {
     if (!editing) return;
     inputRef.current?.focus();
     inputRef.current?.select();
@@ -62380,12 +62365,12 @@ function FlatSlider({
   const explicitReleaseRef = useRef98(false);
   const dragStartValueRef = useRef98(value);
   const activePointerIdRef = useRef98(null);
-  useEffect85(() => {
+  useEffect84(() => {
     if (draggingRef.current) return;
     setDraft(value);
     lastCommittedRef.current = value;
   }, [value]);
-  useEffect85(
+  useEffect84(
     () => () => {
       if (commitTimerRef.current) {
         clearTimeout(commitTimerRef.current);
@@ -62590,7 +62575,7 @@ function isSelectionHidden(fromTimeline, element) {
 }
 
 // src/components/editor/propertyPanelFlatTextSection.tsx
-import { useEffect as useEffect86, useState as useState85 } from "react";
+import { useEffect as useEffect85, useState as useState85 } from "react";
 import { Fragment as Fragment42, jsx as jsx157, jsxs as jsxs117 } from "react/jsx-runtime";
 var ALIGN_OPTIONS = [
   { key: "left", label: "left", node: "L" },
@@ -62803,7 +62788,7 @@ function FlatTextSection({
     element.textFields[0]?.key ?? null
   );
   const [autoFocusFieldKey, setAutoFocusFieldKey] = useState85(null);
-  useEffect86(() => {
+  useEffect85(() => {
     const nextFields = element.textFields;
     setActiveFieldKey((current) => {
       if (current && nextFields.some((field) => field.key === current)) return current;
@@ -62955,7 +62940,7 @@ function FlatTextLayerList({
 }
 
 // src/components/editor/propertyPanelFlatStyleSections.tsx
-import { useEffect as useEffect87, useState as useState86 } from "react";
+import { useEffect as useEffect86, useState as useState86 } from "react";
 
 // src/components/editor/propertyPanelFlatStyleHelpers.ts
 var STROKE_STYLE_OPTIONS = [
@@ -63081,7 +63066,7 @@ function FlatFillFields({
   }
   const [preferredFillMode, setPreferredFillMode] = useState86(fillMode);
   const imageUrl = extractBackgroundImageUrl(backgroundImage);
-  useEffect87(() => {
+  useEffect86(() => {
     setPreferredFillMode(fillMode);
   }, [fillMode, element.id, element.selector, backgroundImage]);
   const handleFillModeChange = (nextMode) => {
@@ -63995,7 +63980,7 @@ import {
 } from "@hyperframes/core/audio-automation";
 
 // src/components/editor/propertyPanelFxSection.tsx
-import { useCallback as useCallback90, useEffect as useEffect90, useMemo as useMemo59, useRef as useRef100, useState as useState90 } from "react";
+import { useCallback as useCallback90, useEffect as useEffect89, useMemo as useMemo59, useRef as useRef100, useState as useState90 } from "react";
 
 // src/components/editor/audioFxRevealTarget.ts
 import { parseAutomationTarget as parseAutomationTarget2 } from "@hyperframes/core/audio-automation";
@@ -64075,7 +64060,7 @@ import { DEFAULT_CARVE as DEFAULT_CARVE2 } from "@hyperframes/core/audio-carve";
 import { fxAutomationTarget as fxAutomationTarget3 } from "@hyperframes/core/audio-automation";
 
 // src/components/editor/propertyPanelFxControls.tsx
-import { useCallback as useCallback88, useEffect as useEffect88, useRef as useRef99, useState as useState87 } from "react";
+import { useCallback as useCallback88, useEffect as useEffect87, useRef as useRef99, useState as useState87 } from "react";
 import { jsx as jsx163, jsxs as jsxs123 } from "react/jsx-runtime";
 function toSlider(p, value) {
   if (p.scale !== "log" || p.min <= 0) return value;
@@ -64128,10 +64113,10 @@ function FxParamRow({
   const [pending2, setPending] = useState87(null);
   const [typing, setTyping] = useState87(null);
   const edited = useRef99(false);
-  useEffect88(() => {
+  useEffect87(() => {
     if (!dragging) setLocal(value);
   }, [value, dragging]);
-  useEffect88(() => {
+  useEffect87(() => {
     setPending(null);
   }, [value]);
   const handleNumber = useCallback88(
@@ -64795,7 +64780,7 @@ function CarveAnalysis({
 }
 
 // src/components/editor/propertyPanelFxEqModule.tsx
-import { useCallback as useCallback89, useEffect as useEffect89, useState as useState88 } from "react";
+import { useCallback as useCallback89, useEffect as useEffect88, useState as useState88 } from "react";
 import {
   audioEqSummary,
   HF_AUDIO_EQ_RANGE_DB
@@ -64817,7 +64802,7 @@ function Fader2({
 }) {
   const [local, setLocal] = useState88(band.gain);
   const [dragging, setDragging] = useState88(false);
-  useEffect89(() => {
+  useEffect88(() => {
     if (!dragging) setLocal(band.gain);
   }, [band.gain, dragging]);
   const value = dragging ? local : band.gain;
@@ -66111,7 +66096,7 @@ function FxSection({
     }
     setPendingReveal(where && revealTarget ? { nonce: revealNonce, target: revealTarget } : null);
   }
-  useEffect90(() => {
+  useEffect89(() => {
     const target = pendingReveal?.target;
     if (target && scrollRevealedRowIntoView(rootRef.current, target, chain)) {
       setPendingReveal(null);
@@ -66308,7 +66293,7 @@ function FxSection({
 }
 
 // src/components/editor/useFxChainObserved.ts
-import { useEffect as useEffect91, useRef as useRef101 } from "react";
+import { useEffect as useEffect90, useRef as useRef101 } from "react";
 import { classifyAudioName as classifyAudioName3 } from "@hyperframes/core/audio-carve";
 function useFxChainObserved(element, chain, carve, automation, onSetAttributeQuietRaw) {
   const lastShape = useRef101(null);
@@ -66317,7 +66302,7 @@ function useFxChainObserved(element, chain, carve, automation, onSetAttributeQui
     panelEdits.current += 1;
     return onSetAttributeQuietRaw(attr, value);
   };
-  useEffect91(() => {
+  useEffect90(() => {
     const shape = JSON.stringify([
       chain.nodes.map((n) => `${n.type}:${n.fromPreset ?? ""}:${n.fromCarve ? 1 : 0}`),
       carve?.enabled ?? false,
@@ -66345,7 +66330,7 @@ function useFxChainObserved(element, chain, carve, automation, onSetAttributeQui
 }
 
 // src/components/editor/useFxCarve.ts
-import { useEffect as useEffect92, useRef as useRef102 } from "react";
+import { useEffect as useEffect91, useRef as useRef102 } from "react";
 import {
   HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR9,
   serializeAudioFxChain as serializeAudioFxChain6
@@ -66456,13 +66441,13 @@ function useFxCarve(element, chain, carve, automation, onSetAttributeQuiet, writ
       setAnalysing(false);
     }
   };
-  useEffect92(() => {
+  useEffect91(() => {
     if (carvedAgainstBy || !carve?.enabled) return;
     if (survivingSources.length === carve.sources.length) return;
     void setCarve({ ...carve, sources: survivingSources });
   }, [carve, carvedAgainstBy, survivingSources.join(" ")]);
   const candidateIds = autoSourceIds.join("\0");
-  useEffect92(() => {
+  useEffect91(() => {
     if (carvedAgainstBy || !autoBed || autoSourceIds.length <= 1) return;
     if (autoCarveInFlight.current) return;
     const all = autoSourceIds;
@@ -66472,7 +66457,7 @@ function useFxCarve(element, chain, carve, automation, onSetAttributeQuiet, writ
     }
     if (carve.enabled && carve.sources.length === 0) setCarveAuto({ ...carve, sources: all });
   }, [carve, carvedAgainstBy, autoBed, candidateIds]);
-  useEffect92(() => {
+  useEffect91(() => {
     if (carvedAgainstBy || !autoBed || autoSourceIds.length !== 1) return;
     if (autoCarveInFlight.current) return;
     const only = autoSourceIds[0];
@@ -66861,14 +66846,14 @@ function useVolumeAutomation(element, currentTime, onSetAttributeQuiet, linkedSp
 }
 
 // src/components/editor/useAudioFxRevealSection.ts
-import { useEffect as useEffect93, useState as useState93 } from "react";
+import { useEffect as useEffect92, useState as useState93 } from "react";
 function useAudioFxRevealSection(input) {
   const revealedAudioFxTarget = usePlayerStore((s) => s.revealedAudioFxTarget);
   const timelineProjectId = usePlayerStore((s) => s.timelineProjectId);
   const timelineSessionEpoch = usePlayerStore((s) => s.timelineSessionEpoch);
   const clearRevealedAudioFxTarget = usePlayerStore((s) => s.clearRevealedAudioFxTarget);
   const [consumed, setConsumed] = useState93(null);
-  useEffect93(() => {
+  useEffect92(() => {
     if (consumed === null) return;
     return () => clearRevealedAudioFxTarget(consumed);
   }, [consumed, clearRevealedAudioFxTarget]);
@@ -66883,7 +66868,7 @@ function useAudioFxRevealSection(input) {
 }
 
 // src/components/editor/propertyPanelFlatMediaSection.tsx
-import { useEffect as useEffect94, useState as useState94 } from "react";
+import { useEffect as useEffect93, useState as useState94 } from "react";
 
 // src/components/editor/propertyPanelFlatToggle.tsx
 import { jsx as jsx175, jsxs as jsxs133 } from "react/jsx-runtime";
@@ -67049,7 +67034,7 @@ function FlatMediaSection({
   const projectSrc = srcAttr && !/^(?:https?:|data:|blob:)/i.test(srcAttr) ? authoredSrcPath(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr) : "";
   const absoluteSrc = projectDir && projectSrc ? `${projectDir}/${projectSrc}` : srcAttr;
   const canRemoveBackground = Boolean(onRemoveBackground && isVisualMedia && projectSrc);
-  useEffect94(() => {
+  useEffect93(() => {
     setRemoveProgress(null);
     setCreatePlate(false);
   }, [srcAttr]);
@@ -67385,7 +67370,7 @@ function createGsapLivePreview(iframeRef) {
 }
 
 // src/components/editor/propertyPanelFlatColorGradingSection.tsx
-import { useEffect as useEffect100, useMemo as useMemo62, useRef as useRef111, useState as useState100 } from "react";
+import { useEffect as useEffect99, useMemo as useMemo62, useRef as useRef111, useState as useState100 } from "react";
 import {
   HF_COLOR_GRADING_GRADE_PRESETS,
   normalizeHfColorGrading as normalizeHfColorGrading6,
@@ -67843,7 +67828,7 @@ function formatPointValue(value, tab, axis) {
 }
 
 // src/components/editor/propertyPanelGradingNumberField.tsx
-import { useEffect as useEffect95, useRef as useRef105, useState as useState95 } from "react";
+import { useEffect as useEffect94, useRef as useRef105, useState as useState95 } from "react";
 import { jsx as jsx178, jsxs as jsxs136 } from "react/jsx-runtime";
 function GradingNumberField({
   label,
@@ -67866,7 +67851,7 @@ function GradingNumberField({
   const cancelBlurRef = useRef105(false);
   const baselineRef = useRef105(value);
   const dirtyRef = useRef105(false);
-  useEffect95(() => {
+  useEffect94(() => {
     if (!focusedRef.current) setDraft(formatValue2(value));
   }, [formatValue2, value]);
   const settle = () => {
@@ -68095,10 +68080,10 @@ function ColorCurves({
 }
 
 // src/components/editor/propertyPanelColorScopes.tsx
-import { useEffect as useEffect97, useRef as useRef107, useState as useState98 } from "react";
+import { useEffect as useEffect96, useRef as useRef107, useState as useState98 } from "react";
 
 // src/components/editor/useColorGradingScopes.ts
-import { useEffect as useEffect96, useRef as useRef106, useState as useState97 } from "react";
+import { useEffect as useEffect95, useRef as useRef106, useState as useState97 } from "react";
 
 // src/components/editor/colorGradingFrameAnalysis.ts
 import {
@@ -68260,7 +68245,7 @@ function useColorGradingScopes({
   const [refreshVersion, setRefreshVersion] = useState97(0);
   const captureRef = useRef106(captureFrame);
   captureRef.current = captureFrame;
-  useEffect96(() => {
+  useEffect95(() => {
     if (!open) {
       setAnalysis(null);
       setStatus("idle");
@@ -68442,7 +68427,7 @@ function PropertyPanelColorScopes({
     captureFrame,
     refreshKey
   });
-  useEffect97(() => {
+  useEffect96(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     if (analysis) {
@@ -68506,7 +68491,7 @@ function PropertyPanelColorScopes({
 }
 
 // src/components/editor/propertyPanelColorSecondary.tsx
-import { useEffect as useEffect98, useRef as useRef108, useState as useState99 } from "react";
+import { useEffect as useEffect97, useRef as useRef108, useState as useState99 } from "react";
 import {
   getHfColorGradingCapabilities,
   normalizeHfColorGrading as normalizeHfColorGrading5
@@ -68559,7 +68544,7 @@ function PropertyPanelColorSecondary({
   const matteCanvasRef = useRef108(null);
   const activeIndex = Math.min(selectedIndex, Math.max(0, secondaries.length - 1));
   const selected = secondaries[activeIndex];
-  useEffect98(() => {
+  useEffect97(() => {
     const canvas = matteCanvasRef.current;
     if (!showMatte || !canvas || !sampleFrame || !samplePixels || !selected) return;
     const context = canvas.getContext("2d");
@@ -69225,7 +69210,7 @@ function ColorWheels({
 }
 
 // src/components/editor/propertyPanelFlatColorGradingAccessory.tsx
-import { useEffect as useEffect99, useRef as useRef110 } from "react";
+import { useEffect as useEffect98, useRef as useRef110 } from "react";
 import { isHfColorGradingActive as isHfColorGradingActive3 } from "@hyperframes/core/color-grading";
 import { jsx as jsx183, jsxs as jsxs141 } from "react/jsx-runtime";
 var STATUS_DOT_CLASS = {
@@ -69242,7 +69227,7 @@ function FlatColorGradingAccessory({
   const { grading, compareEnabled, runtimeStatus, commitCompare, resetGrading } = state;
   const gradingActive = isHfColorGradingActive3(grading);
   const releaseRef = useRef110(null);
-  useEffect99(
+  useEffect98(
     () => () => {
       releaseRef.current?.();
       releaseRef.current = null;
@@ -69425,7 +69410,7 @@ function FlatColorGradingSection({
   );
   const actions = createColorGradingActions(grading, onCommitColorGrading);
   const scopesRefreshKey = useMemo62(() => serializeHfColorGrading2(grading), [grading]);
-  useEffect100(() => {
+  useEffect99(() => {
     if (presetPreviews.status === "idle") onRequestPresetPreviews();
   }, [onRequestPresetPreviews, presetPreviews.status]);
   const resolvePreset = (presetId) => {
@@ -69436,7 +69421,7 @@ function FlatColorGradingSection({
       palette: grading.palette
     } : grading;
   };
-  useEffect100(() => () => onPreviewColorGrading(null), [onPreviewColorGrading]);
+  useEffect99(() => () => onPreviewColorGrading(null), [onPreviewColorGrading]);
   const renderDetailSlider = (key2) => {
     const spec = detailByKey(key2);
     const value = grading.details[key2];
@@ -69784,7 +69769,7 @@ function FlatColorGradingSection({
 }
 
 // src/components/editor/propertyPanelFlatEffectsSection.tsx
-import { useEffect as useEffect101, useState as useState101 } from "react";
+import { useEffect as useEffect100, useState as useState101 } from "react";
 import {
   HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS as HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS3,
   HF_COLOR_GRADING_EFFECT_PRESETS,
@@ -70166,7 +70151,7 @@ function FlatEffectsSection({
     activeEffects[0]?.key ?? null
   );
   const selectedEffect = activeEffects.find((effect) => effect.key === selectedKey) ?? activeEffects[0] ?? null;
-  useEffect101(() => {
+  useEffect100(() => {
     if (!catalogOpen) return;
     const group = EFFECT_GROUPS.find((candidate) => candidate.label === catalogGroup);
     if (!group) return;
@@ -70187,7 +70172,7 @@ function FlatEffectsSection({
     previews.images,
     previews.status
   ]);
-  useEffect101(() => () => onPreviewColorGrading(null), [onPreviewColorGrading]);
+  useEffect100(() => () => onPreviewColorGrading(null), [onPreviewColorGrading]);
   const commitEffects = (effects) => {
     onCommitColorGrading({
       ...grading,
@@ -70554,7 +70539,7 @@ function FlatEffectsSection({
 import { useState as useState103 } from "react";
 
 // src/hooks/useBlockCatalog.ts
-import { useState as useState102, useEffect as useEffect102, useMemo as useMemo63 } from "react";
+import { useState as useState102, useEffect as useEffect101, useMemo as useMemo63 } from "react";
 
 // src/utils/blockCategories.ts
 import {
@@ -70634,7 +70619,7 @@ function useBlockCatalog() {
   const [error, setError] = useState102(null);
   const [search, setSearch] = useState102("");
   const [category, setCategory] = useState102(null);
-  useEffect102(() => {
+  useEffect101(() => {
     if (catalogCache) return;
     let cancelled = false;
     (async () => {
@@ -70915,7 +70900,7 @@ function PropertyPanelFlat({
   const [justToggledIds, setJustToggledIds] = useState104([]);
   const justToggledTimeoutRef = useRef112(null);
   const panelBodyRef = useRef112(null);
-  useEffect103(() => {
+  useEffect102(() => {
     return () => {
       if (justToggledTimeoutRef.current) clearTimeout(justToggledTimeoutRef.current);
     };
@@ -71930,7 +71915,7 @@ import { memo as memo42, useState as useState107, useCallback as useCallback92,
 import { Plus as Plus2, FolderSimplePlus as FolderSimplePlus2 } from "@phosphor-icons/react";
 
 // src/components/editor/FileTreeNodes.tsx
-import { memo as memo41, useState as useState106, useCallback as useCallback91, useMemo as useMemo66, useRef as useRef114, useEffect as useEffect104 } from "react";
+import { memo as memo41, useState as useState106, useCallback as useCallback91, useMemo as useMemo66, useRef as useRef114, useEffect as useEffect103 } from "react";
 import {
   PencilSimple,
   Copy,
@@ -72067,7 +72052,7 @@ function ContextMenu2({
 }) {
   const menuRef = useRef114(null);
   const restoreFocusRef = useRef114(null);
-  useEffect104(() => {
+  useEffect103(() => {
     restoreFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     const firstItem = menuRef.current?.querySelector("button");
     if (firstItem instanceof HTMLElement) firstItem.focus();
@@ -72233,7 +72218,7 @@ function InlineInput({
     if (name.includes("..")) return "Name can't contain ..";
     return null;
   };
-  useEffect104(() => {
+  useEffect103(() => {
     const el = inputRef.current;
     if (!el) return;
     el.focus();
@@ -72310,7 +72295,7 @@ function DeleteConfirm({
   onCancel
 }) {
   const ref = useRef114(null);
-  useEffect104(() => {
+  useEffect103(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") onCancel();
     };
@@ -72907,11 +72892,11 @@ function useToolbarSession(session) {
 }
 
 // src/hooks/useRightPanelIntents.ts
-import { useCallback as useCallback93, useEffect as useEffect105, useRef as useRef117 } from "react";
+import { useCallback as useCallback93, useEffect as useEffect104, useRef as useRef117 } from "react";
 function useSlideshowDockPanel(isSlideshowComposition) {
   const controller = useDockLayoutStore((state) => state.controller);
   const wasSlideshow = useRef117(false);
-  useEffect105(() => {
+  useEffect104(() => {
     if (!controller) return;
     const inDock = useDockLayoutStore.getState().openPanels.has("slideshow");
     if (isSlideshowComposition && !inDock) controller.open("slideshow");
@@ -72924,7 +72909,7 @@ function useBlockParamsDismissal({
   onDismiss
 }) {
   const designVisible = useDockLayoutStore((state) => state.visiblePanels.has("design"));
-  useEffect105(() => {
+  useEffect104(() => {
     if (hasBlockParams && !designVisible) onDismiss();
   }, [hasBlockParams, designVisible, onDismiss]);
 }
@@ -72942,7 +72927,7 @@ function useCaptionDesignFocus(captionEditMode) {
   const rightShown = useDockLayoutStore(
     (state) => visiblePanelInZone("right", state.lastActive, state.visiblePanels) !== null
   );
-  useEffect105(() => {
+  useEffect104(() => {
     if (captionEditMode && rightShown && !designVisible) {
       useDockLayoutStore.getState().activatePanel("design");
     }
@@ -72955,7 +72940,7 @@ function useRightPanelIntent() {
 }
 
 // src/components/renders/useRenderQueue.ts
-import { useState as useState109, useEffect as useEffect107, useCallback as useCallback95, useRef as useRef119, useMemo as useMemo69 } from "react";
+import { useState as useState109, useEffect as useEffect106, useCallback as useCallback95, useRef as useRef119, useMemo as useMemo69 } from "react";
 
 // src/components/renders/serverError.ts
 async function readServerError(res) {
@@ -72973,7 +72958,7 @@ async function readServerError(res) {
 }
 
 // src/components/renders/useFfmpegStatus.ts
-import { useCallback as useCallback94, useEffect as useEffect106, useRef as useRef118, useState as useState108 } from "react";
+import { useCallback as useCallback94, useEffect as useEffect105, useRef as useRef118, useState as useState108 } from "react";
 function ffmpegInstallMessage(status) {
   const title = status?.title ?? "FFmpeg not found";
   const remedy = status?.command ?? status?.hint;
@@ -73005,7 +72990,7 @@ function useFfmpegStatus() {
   const [status, setStatus] = useState108(cached4);
   const [checking, setChecking] = useState108(cached4 === null);
   const mounted = useRef118(true);
-  useEffect106(() => {
+  useEffect105(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -73019,7 +73004,7 @@ function useFfmpegStatus() {
     setStatus(next);
     setChecking(false);
   }, []);
-  useEffect106(() => {
+  useEffect105(() => {
     if (cached4 !== null) return;
     void run();
   }, [run]);
@@ -73247,7 +73232,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
       setLoadError("Couldn't load render history. Is the studio server running?");
     }
   }, [projectId]);
-  useEffect107(() => {
+  useEffect106(() => {
     loadRenders();
   }, [loadRenders]);
   const startRender = useCallback95(
@@ -73447,7 +73432,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
     });
   }, [projectId]);
   const dismissActionError = useCallback95(() => setActionError(null), []);
-  useEffect107(() => {
+  useEffect106(() => {
     for (const job of jobs) {
       if (job.status === "rendering" || job.status === "cancelled") continue;
       const settings = sessionJobs.current.get(job.id);
@@ -73472,7 +73457,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
       });
     }
   }, [jobs]);
-  useEffect107(() => {
+  useEffect106(() => {
     return () => {
       eventSourceRef.current?.close();
       eventSourceRef.current = null;
@@ -73525,7 +73510,7 @@ import { useRef as useRef121, useState as useState110 } from "react";
 import { XIcon, WarningIcon, CheckCircleIcon, CaretRightIcon } from "@phosphor-icons/react";
 
 // src/components/ui/useDialogBehavior.ts
-import { useEffect as useEffect108, useCallback as useCallback96, useRef as useRef120 } from "react";
+import { useEffect as useEffect107, useCallback as useCallback96, useRef as useRef120 } from "react";
 var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
 function useDialogBehavior({
   open,
@@ -73543,7 +73528,7 @@ function useDialogBehavior({
     if (guard && !guard()) return;
     onCloseRef.current();
   }, []);
-  useEffect108(() => {
+  useEffect107(() => {
     if (!open) return;
     const previouslyFocused = document.activeElement;
     restoreRef.current = previouslyFocused instanceof HTMLElement ? previouslyFocused : null;
@@ -73883,7 +73868,7 @@ function toastSurface(isError) {
 }
 
 // src/components/feedback/StudioFeedbackCard.tsx
-import { memo as memo43, useState as useState112, useCallback as useCallback97, useRef as useRef123, useEffect as useEffect109 } from "react";
+import { memo as memo43, useState as useState112, useCallback as useCallback97, useRef as useRef123, useEffect as useEffect108 } from "react";
 
 // src/components/feedback/projectProvenance.ts
 var CONFIG_FILE = "hyperframes.json";
@@ -74003,7 +73988,7 @@ var StudioFeedbackCard = memo43(function StudioFeedbackCard2() {
     },
     [clearTimer]
   );
-  useEffect109(
+  useEffect108(
     () => subscribeToFeedbackRequests((next) => {
       setRequest(next);
       setRating(null);
@@ -74015,12 +74000,12 @@ var StudioFeedbackCard = memo43(function StudioFeedbackCard2() {
     }),
     []
   );
-  useEffect109(() => {
+  useEffect108(() => {
     if (!request2 || step === "thanks" || rating !== null || comment !== "") return;
     timerRef.current = setTimeout(() => close("timeout"), AUTO_DISMISS_MS);
     return clearTimer;
   }, [request2, step, rating, comment, close, clearTimer]);
-  useEffect109(() => {
+  useEffect108(() => {
     if (step === "comment") inputRef.current?.focus();
   }, [step]);
   const submit = useCallback97(
@@ -74520,11 +74505,11 @@ function ExternalFileConflictBanner({
 }
 
 // src/components/ProjectUnreachableBanner.tsx
-import { useEffect as useEffect110, useState as useState114 } from "react";
+import { useEffect as useEffect109, useState as useState114 } from "react";
 import { Fragment as Fragment57, jsx as jsx202, jsxs as jsxs158 } from "react/jsx-runtime";
 function ProjectUnreachableBanner({ projectId }) {
   const [served, setServed] = useState114(null);
-  useEffect110(() => {
+  useEffect109(() => {
     let cancelled = false;
     studioApiFetch("/api/projects").then((res) => res.ok ? res.json() : { projects: [] }).then((data) => {
       if (!cancelled) setServed(data.projects ?? []);
@@ -74752,7 +74737,7 @@ function useCaptionSync(projectId) {
 }
 
 // src/hooks/usePersistentEditHistory.ts
-import { useCallback as useCallback99, useEffect as useEffect111, useMemo as useMemo70, useRef as useRef126, useState as useState115 } from "react";
+import { useCallback as useCallback99, useEffect as useEffect110, useMemo as useMemo70, useRef as useRef126, useState as useState115 } from "react";
 var EMPTY3 = { entries: [], back: null, forward: null };
 var OWN_ENTRIES_KEPT = 100;
 function createOwnHistory() {
@@ -74898,14 +74883,14 @@ function usePersistentEditHistory({ projectId }) {
     setView(next);
     own.offered(seen, next);
   }, [projectId, own]);
-  useEffect111(() => {
+  useEffect110(() => {
     setView(EMPTY3);
     setLoaded(false);
     heldClaimRef.current = null;
     own.clear();
     void refresh2().finally(() => setLoaded(true));
   }, [refresh2, own]);
-  useEffect111(() => {
+  useEffect110(() => {
     setStudioPendingEditClaimClock(own.claimCount);
     return () => setStudioPendingEditClaimClock(null);
   }, [own]);
@@ -75015,7 +75000,7 @@ function usePersistentEditHistory({ projectId }) {
 }
 
 // src/hooks/usePanelLayout.ts
-import { useCallback as useCallback100, useEffect as useEffect112, useRef as useRef127 } from "react";
+import { useCallback as useCallback100, useEffect as useEffect111, useRef as useRef127 } from "react";
 function panelForTab(tab) {
   return tab === "block-params" ? "design" : tab;
 }
@@ -75027,7 +75012,7 @@ function usePanelLayout(initialState2) {
   const lastActive = useDockLayoutStore((state) => state.lastActive);
   const visiblePanels = useDockLayoutStore((state) => state.visiblePanels);
   const initialRef = useRef127(initialState2);
-  useEffect112(() => {
+  useEffect111(() => {
     if (!controller) return;
     const { rightCollapsed: rightCollapsed2, rightPanelTab: rightPanelTab2 } = initialRef.current ?? {};
     initialRef.current = void 0;
@@ -75074,7 +75059,7 @@ function usePanelLayout(initialState2) {
 import { useState as useState117, useCallback as useCallback104, useRef as useRef130 } from "react";
 
 // src/hooks/useFileTree.ts
-import { useState as useState116, useCallback as useCallback101, useEffect as useEffect113, useMemo as useMemo71, useRef as useRef128 } from "react";
+import { useState as useState116, useCallback as useCallback101, useEffect as useEffect112, useMemo as useMemo71, useRef as useRef128 } from "react";
 import { encodeUrlPath as encodeUrlPath4 } from "@hyperframes/parsers";
 var EMPTY_FILE_LIST = [];
 function useFileTree({ projectId, projectIdRef }) {
@@ -75084,7 +75069,7 @@ function useFileTree({ projectId, projectIdRef }) {
   const compositionPaths = current?.compositionPaths ?? EMPTY_FILE_LIST;
   const projectDir = current?.projectDir ?? null;
   const fileTreeLoaded = current?.loaded ?? false;
-  useEffect113(() => {
+  useEffect112(() => {
     if (!projectId) return;
     let cancelled = false;
     setFetched({ projectId, loaded: false, fileTree: [], compositionPaths: [], projectDir: null });
@@ -76279,7 +76264,7 @@ function usePreviewPersistence({
 }
 
 // src/hooks/usePreviewDocumentVersion.ts
-import { useCallback as useCallback106, useEffect as useEffect114, useRef as useRef132, useState as useState119 } from "react";
+import { useCallback as useCallback106, useEffect as useEffect113, useRef as useRef132, useState as useState119 } from "react";
 function usePreviewDocumentVersion() {
   const [previewDocumentVersion, setPreviewDocumentVersion] = useState119(0);
   const refreshTimersRef = useRef132([]);
@@ -76292,7 +76277,7 @@ function usePreviewDocumentVersion() {
       window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 300)
     );
   }, []);
-  useEffect114(
+  useEffect113(
     () => () => {
       for (const id of refreshTimersRef.current) clearTimeout(id);
     },
@@ -79350,7 +79335,7 @@ function useTimelineMoveEditsHandler(handleTimelineGroupMove) {
 import { useCallback as useCallback148 } from "react";
 
 // src/hooks/useAskAgentModal.ts
-import { useState as useState121, useCallback as useCallback124, useRef as useRef141, useEffect as useEffect115 } from "react";
+import { useState as useState121, useCallback as useCallback124, useRef as useRef141, useEffect as useEffect114 } from "react";
 function useAskAgentModal({
   activeCompPath,
   projectDir,
@@ -79432,13 +79417,13 @@ function useAskAgentModal({
       showToast
     ]
   );
-  useEffect115(() => {
+  useEffect114(() => {
     setAgentPromptTagSnippet(void 0);
     setAgentPromptSelectionContext(void 0);
     setAgentModalAnchorPoint(null);
     setCopiedAgentPrompt(false);
   }, [domEditSelection]);
-  useEffect115(
+  useEffect114(
     () => () => {
       if (copiedAgentTimerRef.current) clearTimeout(copiedAgentTimerRef.current);
     },
@@ -79462,7 +79447,7 @@ function useAskAgentModal({
 }
 
 // src/hooks/useDomSelection.ts
-import { useState as useState122, useCallback as useCallback125, useRef as useRef142, useEffect as useEffect117 } from "react";
+import { useState as useState122, useCallback as useCallback125, useRef as useRef142, useEffect as useEffect116 } from "react";
 
 // src/utils/domEditHelpers.ts
 function domEditSelectionsTargetSame(a, b) {
@@ -79498,7 +79483,7 @@ function seedDomEditGroupWithSelection(group, selection) {
 }
 
 // src/hooks/useStudioTestHooks.ts
-import { useEffect as useEffect116 } from "react";
+import { useEffect as useEffect115 } from "react";
 
 // src/player/lib/timelinePerformanceDiagnostics.ts
 function readNonNegativeNumber(value) {
@@ -79581,7 +79566,7 @@ function useStudioTestHooks({
   buildDomSelectionFromTarget,
   applyDomSelection
 }) {
-  useEffect116(() => {
+  useEffect115(() => {
     if (!STUDIO_TEST_HOOKS_ENABLED || typeof window === "undefined") return;
     const api = {
       runtimeMode: STUDIO_RUNTIME_MODE,
@@ -79964,13 +79949,13 @@ function useDomSelection({
     },
     [activeCompPath, announceTimelineSelection2, buildDomSelectionFromTarget, previewIframeRef]
   );
-  useEffect117(() => {
+  useEffect116(() => {
     refreshDomEditGroupSelectionsFromPreviewRef.current = refreshDomEditGroupSelectionsFromPreview;
   }, [refreshDomEditGroupSelectionsFromPreview]);
-  useEffect117(() => {
+  useEffect116(() => {
     updateDomEditHoverSelection(null);
   }, [activeCompPath, projectId, previewIframe, refreshKey, updateDomEditHoverSelection]);
-  useEffect117(() => {
+  useEffect116(() => {
     const previous = compositionIdentityRef.current;
     if (previous.activeCompPath === activeCompPath && previous.projectId === projectId) return;
     compositionIdentityRef.current = { activeCompPath, projectId };
@@ -79978,7 +79963,7 @@ function useDomSelection({
     setActiveGroupElementState(null);
     applyDomSelection(null, { revealPanel: false });
   }, [activeCompPath, projectId, applyDomSelection]);
-  useEffect117(() => {
+  useEffect116(() => {
     if (!domEditHoverSelection) return;
     const shouldClear = captionEditMode || domEditSelectionsTargetSame(domEditHoverSelection, domEditSelection) || domEditSelectionInGroup(domEditGroupSelections, domEditHoverSelection) || !domEditHoverSelection.element.isConnected;
     if (shouldClear) updateDomEditHoverSelection(null);
@@ -79989,7 +79974,7 @@ function useDomSelection({
     domEditGroupSelections,
     updateDomEditHoverSelection
   ]);
-  useEffect117(() => {
+  useEffect116(() => {
     if (!captionEditMode) return;
     applyDomSelection(null, { revealPanel: false });
   }, [applyDomSelection, captionEditMode]);
@@ -82947,7 +82932,7 @@ function useGsapKeyframeOps({
 }
 
 // src/hooks/useGsapPropertyDebounce.ts
-import { useCallback as useCallback137, useEffect as useEffect118, useRef as useRef147 } from "react";
+import { useCallback as useCallback137, useEffect as useEffect117, useRef as useRef147 } from "react";
 import { parseGsapScriptAcorn as parseGsapScriptAcorn2 } from "@hyperframes/core/gsap-parser-acorn";
 var DEBOUNCE_MS = 150;
 function mergeTweenProperties(sdkSession, animationId, edited, kind) {
@@ -83017,7 +83002,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
     },
     [flushPendingPropertyEdit]
   );
-  useEffect118(() => {
+  useEffect117(() => {
     return () => {
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
       void flushPendingPropertyEdit();
@@ -83584,10 +83569,10 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
 }
 
 // src/hooks/useDomEditWiring.ts
-import { useCallback as useCallback142, useEffect as useEffect120, useRef as useRef151 } from "react";
+import { useCallback as useCallback142, useEffect as useEffect119, useRef as useRef151 } from "react";
 
 // src/hooks/useDomEditPreviewSync.ts
-import { useEffect as useEffect119, useRef as useRef149 } from "react";
+import { useEffect as useEffect118, useRef as useRef149 } from "react";
 function useDomEditPreviewSync({
   previewIframe,
   activeCompPath,
@@ -83604,7 +83589,7 @@ function useDomEditPreviewSync({
   openSourceForSelection,
   gsapCacheVersion
 }) {
-  useEffect119(() => {
+  useEffect118(() => {
     if (!previewIframe) return;
     const syncSelectionFromDocument = async () => {
       if (captionEditMode) return;
@@ -83666,7 +83651,7 @@ function useDomEditPreviewSync({
   ]);
   const openSourceRef = useRef149(openSourceForSelection);
   openSourceRef.current = openSourceForSelection;
-  useEffect119(
+  useEffect118(
     // fallow-ignore-next-line complexity
     () => {
       if (!domEditSelection || !openSourceRef.current) return;
@@ -84085,7 +84070,7 @@ function useDomEditWiring(params) {
     },
     [openSourceForSelection]
   );
-  useEffect120(() => {
+  useEffect119(() => {
     if (!domEditSelection?.id) return;
     const { selectedElementId, elements, setSelectedElementId } = usePlayerStore.getState();
     const matchKey = elements.find(
@@ -84095,7 +84080,7 @@ function useDomEditWiring(params) {
     if (key2 && key2 !== selectedElementId) setSelectedElementId(key2);
   }, [domEditSelection?.id]);
   const prevRefreshKeyRef = useRef151(refreshKey);
-  useEffect120(() => {
+  useEffect119(() => {
     if (refreshKey !== prevRefreshKeyRef.current) {
       prevRefreshKeyRef.current = refreshKey;
       bumpGsapCache();
@@ -85713,7 +85698,7 @@ function useGsapAwareEditing({
 }
 
 // src/hooks/useStudioSelectionPublisher.ts
-import { useEffect as useEffect121, useRef as useRef152 } from "react";
+import { useEffect as useEffect120, useRef as useRef152 } from "react";
 
 // src/utils/studioSelectionSnapshot.ts
 function round34(value) {
@@ -85806,7 +85791,7 @@ function useStudioSelectionPublisher({
 }) {
   const lastSelectionRefreshKeyRef = useRef152(refreshKey);
   const pendingSelectionRefreshKeyRef = useRef152(null);
-  useEffect121(() => {
+  useEffect120(() => {
     if (!projectId) return;
     const selection = domEditSelection?.element.isConnected ? buildStudioSelectionSnapshot({
       projectId,
@@ -85817,13 +85802,13 @@ function useStudioSelectionPublisher({
     void putSelection(projectId, selection, controller.signal).catch(reportSelectionPublishError);
     return () => controller.abort();
   }, [domEditSelection, projectId]);
-  useEffect121(() => {
+  useEffect120(() => {
     if (!projectId) return;
     return () => {
       void putSelection(projectId, null).catch(reportSelectionPublishError);
     };
   }, [projectId]);
-  useEffect121(() => {
+  useEffect120(() => {
     if (lastSelectionRefreshKeyRef.current === refreshKey) return;
     lastSelectionRefreshKeyRef.current = refreshKey;
     pendingSelectionRefreshKeyRef.current = domEditSelectionRef.current ? refreshKey : null;
@@ -85832,7 +85817,7 @@ function useStudioSelectionPublisher({
     void putSelection(projectId, null, controller.signal).catch(reportSelectionPublishError);
     return () => controller.abort();
   }, [domEditSelectionRef, projectId, refreshKey]);
-  useEffect121(() => {
+  useEffect120(() => {
     if (pendingSelectionRefreshKeyRef.current === null) return;
     pendingSelectionRefreshKeyRef.current = null;
     const selection = domEditSelectionRef.current;
@@ -85905,7 +85890,7 @@ function useKeyframeEaseCommits({
 }
 
 // src/hooks/useCommitPreflightCapabilities.ts
-import { useEffect as useEffect122, useMemo as useMemo74, useRef as useRef153, useState as useState123 } from "react";
+import { useEffect as useEffect121, useMemo as useMemo74, useRef as useRef153, useState as useState123 } from "react";
 function runCommitPreflights(selection, fileAnimations, iframe, group) {
   const target = { id: selection.id ?? null, selector: selection.selector ?? null };
   const animations = getAnimationsForElement(fileAnimations, target, selection.element);
@@ -85967,7 +85952,7 @@ function useCommitPreflightCapabilities({
 }) {
   const parsesRef = useRef153(/* @__PURE__ */ new Map());
   const [parseTick, setParseTick] = useState123(0);
-  useEffect122(() => {
+  useEffect121(() => {
     if (!enabled || !projectId) return;
     const targets = selection ? [selection, ...groupSelections] : groupSelections;
     for (const file of new Set(targets.map(gsapSourceFileForSelection))) {
@@ -86024,13 +86009,13 @@ function timelineElementsForDelete(members, elements) {
 }
 
 // src/hooks/useLivePreviewIframe.ts
-import { useEffect as useEffect123, useRef as useRef154, useState as useState124 } from "react";
+import { useEffect as useEffect122, useRef as useRef154, useState as useState124 } from "react";
 function useLivePreviewIframe2(host) {
   const [promoted, setPromoted] = useState124();
   const live = host && promoted?.host === host ? promoted.live : host;
   const liveRef = useRef154(live);
   liveRef.current = live;
-  useEffect123(() => {
+  useEffect122(() => {
     if (!host) return;
     return onPreviewPromoted(host.ownerDocument, ({ retired, live: next }) => {
       if (retired === liveRef.current) setPromoted({ host, live: next });
@@ -86580,23 +86565,23 @@ function useDomEditSession({
 }
 
 // src/hooks/useSdkSelectionSync.ts
-import { useEffect as useEffect124 } from "react";
+import { useEffect as useEffect123 } from "react";
 function toHfIds(group, primary) {
   const source = group.length > 0 ? group : primary ? [primary] : [];
   return source.flatMap((s) => s.hfId ? [s.hfId] : []);
 }
 function useSdkSelectionSync(session, domEditSelection, domEditGroupSelections) {
-  useEffect124(() => {
+  useEffect123(() => {
     if (!session) return;
     session.setSelection(toHfIds(domEditGroupSelections, domEditSelection));
   }, [session, domEditSelection, domEditGroupSelections]);
 }
 
 // src/hooks/useStudioSdkSessions.ts
-import { useEffect as useEffect126 } from "react";
+import { useEffect as useEffect125 } from "react";
 
 // src/hooks/useSdkSession.ts
-import { useState as useState125, useEffect as useEffect125, useCallback as useCallback149, useRef as useRef155 } from "react";
+import { useState as useState125, useEffect as useEffect124, useCallback as useCallback149, useRef as useRef155 } from "react";
 import { openComposition as openComposition3 } from "@hyperframes/sdk";
 
 // src/hooks/externalFileReloadBus.ts
@@ -86720,7 +86705,7 @@ function useSdkSession(projectId, activeCompPath, fileTree = [], fileTreeLoaded
   const [unreachableProject, setUnreachableProject] = useState125(null);
   const [compositionMissing, setCompositionMissing] = useState125(false);
   const refreshedAbsentPathsRef = useRef155(/* @__PURE__ */ new Set());
-  useEffect125(() => {
+  useEffect124(() => {
     refreshedAbsentPathsRef.current.clear();
   }, [projectId]);
   function handleReadFailure(read2, forProjectId, forPath) {
@@ -86733,7 +86718,7 @@ function useSdkSession(projectId, activeCompPath, fileTree = [], fileTreeLoaded
     refreshedAbsentPathsRef.current.add(key2);
     onAbsentRead?.(forPath);
   }
-  useEffect125(
+  useEffect124(
     () => addExternalFileReloadListener((changedPath) => {
       if (changedPath === "." || changedPath === activeCompPathRef.current) {
         setReloadToken((token) => token + 1);
@@ -86741,7 +86726,7 @@ function useSdkSession(projectId, activeCompPath, fileTree = [], fileTreeLoaded
     }),
     []
   );
-  useEffect125(() => {
+  useEffect124(() => {
     const generation = ++generationRef.current;
     let cancelled = false;
     const previous = ownedSessionRef.current;
@@ -86849,7 +86834,7 @@ function useStudioSdkSessions(projectId, activeCompPath, masterCompPath, fileTre
     refreshFileTree
   );
   const editFlowSdkSession = activeCompPath ? sdkHandle.session : null;
-  useEffect126(() => {
+  useEffect125(() => {
     usePreviewVariablesStore.getState().setValues(null);
   }, [projectId, activeCompPath]);
   return { sdkHandle: useStableHandlers(sdkHandle, projectId), editFlowSdkSession };
@@ -86957,7 +86942,7 @@ async function deleteExternalConflictSnapshot(projectId, filePath) {
 }
 
 // src/hooks/useExternalFileChangeCoordinator.ts
-import { useCallback as useCallback150, useEffect as useEffect127, useRef as useRef156, useState as useState126 } from "react";
+import { useCallback as useCallback150, useEffect as useEffect126, useRef as useRef156, useState as useState126 } from "react";
 function testHotAdapter() {
   const value = globalThis.__HF_STUDIO_HOT_TEST_ADAPTER__;
   if (!value || typeof value !== "object") return null;
@@ -87028,22 +87013,22 @@ function useExternalFileChangeCoordinator({
     blockedRef.current = current;
     setBlockedState(current);
   }, []);
-  useEffect127(() => {
+  useEffect126(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
       generationRef.current += 1;
     };
   }, []);
-  useEffect127(() => {
+  useEffect126(() => {
     pendingPayloadRef.current = null;
   }, [projectId]);
-  useEffect127(() => {
+  useEffect126(() => {
     generationRef.current += 1;
     setBlocked(null);
     lastEventIdentityRef.current = null;
   }, [projectId, activeCompPath, setBlocked]);
-  useEffect127(() => {
+  useEffect126(() => {
     if (!projectId || !recoveryFilePath || !loadConflictSnapshot) return;
     const generation = ++generationRef.current;
     let cancelled = false;
@@ -87268,7 +87253,7 @@ function useExternalFileChangeCoordinator({
   );
   const processChangeRef = useRef156(processChange);
   processChangeRef.current = processChange;
-  useEffect127(() => {
+  useEffect126(() => {
     const handler = (delivery) => processChangeRef.current(decodeFileChange(delivery));
     const adapter = testHotAdapter();
     if (adapter) {
@@ -87763,7 +87748,7 @@ function useBlockHandlers({
 }
 
 // src/hooks/useAppHotkeys.ts
-import { useCallback as useCallback154, useEffect as useEffect128, useRef as useRef158 } from "react";
+import { useCallback as useCallback154, useEffect as useEffect127, useRef as useRef158 } from "react";
 
 // src/hooks/appHotkeysDispatch.ts
 function handleUndoRedoKey(event, onUndo, onRedo) {
@@ -88186,7 +88171,7 @@ function useAppHotkeys({
     }
     dispatchPlainKey(event, key2, cb);
   }, []);
-  useEffect128(() => {
+  useEffect127(() => {
     window.addEventListener("keydown", handleAppKeyDown, true);
     return () => window.removeEventListener("keydown", handleAppKeyDown, true);
   }, [handleAppKeyDown]);
@@ -88202,7 +88187,7 @@ function useAppHotkeys({
     },
     [handleAppKeyDown]
   );
-  useEffect128(
+  useEffect127(
     () => () => {
       previewHistoryCleanupRef.current?.();
       previewHistoryCleanupRef.current = null;
@@ -88729,7 +88714,7 @@ function useClipboard({
 }
 
 // src/hooks/useCaptionDetection.ts
-import { useEffect as useEffect129, useRef as useRef160 } from "react";
+import { useEffect as useEffect128, useRef as useRef160 } from "react";
 
 // src/captions/types.ts
 var DEFAULT_STYLE = {
@@ -88983,7 +88968,7 @@ function useCaptionDetection({
 }) {
   const livePreviewIframe = useLivePreviewIframe();
   const prevCompPathRef = useRef160(activeCompPath);
-  useEffect129(() => {
+  useEffect128(() => {
     if (prevCompPathRef.current !== activeCompPath) {
       prevCompPathRef.current = activeCompPath;
       const store = useCaptionStore.getState();
@@ -88993,7 +88978,7 @@ function useCaptionDetection({
       }
     }
   }, [activeCompPath]);
-  useEffect129(() => {
+  useEffect128(() => {
     if (!projectId) return;
     let activating = false;
     const tryActivateCaptions = () => {
@@ -89075,7 +89060,7 @@ function useCaptionDetection({
       window.removeEventListener("message", handleMessage);
     };
   }, [activeCompPath, projectId, compIdToSrc, captionSync, previewIframeRef, livePreviewIframe]);
-  useEffect129(() => {
+  useEffect128(() => {
     if (captionEditMode) {
       setRightCollapsed(!captionHasSelection);
     }
@@ -89083,7 +89068,7 @@ function useCaptionDetection({
 }
 
 // src/hooks/useConsoleErrorCapture.ts
-import { useCallback as useCallback156, useEffect as useEffect130, useRef as useRef161, useState as useState128 } from "react";
+import { useCallback as useCallback156, useEffect as useEffect129, useRef as useRef161, useState as useState128 } from "react";
 import { STUDIO_PREVIEW_ERRORS } from "@hyperframes/core/studio-preview-mark";
 function useConsoleErrorCapture(previewIframe) {
   const [consoleErrors, setConsoleErrors] = useState128(null);
@@ -89092,7 +89077,7 @@ function useConsoleErrorCapture(previewIframe) {
     consoleErrorsRef.current = [];
     setConsoleErrors(null);
   }, []);
-  useEffect130(() => {
+  useEffect129(() => {
     resetErrors();
     if (!previewIframe) return;
     let patchedWin = null;
@@ -89263,7 +89248,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState130, useCallback as useCallback158, useEffect as useEffect131, useRef as useRef163, useMemo as useMemo78 } from "react";
+import { useState as useState130, useCallback as useCallback158, useEffect as useEffect130, useRef as useRef163, useMemo as useMemo78 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -89306,7 +89291,7 @@ function useLintModal(projectId, refreshKey) {
     }
   }, [projectId]);
   const prevProjectIdRef = useRef163(projectId);
-  useEffect131(() => {
+  useEffect130(() => {
     if (projectId !== prevProjectIdRef.current) {
       autoLintRanRef.current = false;
       prevProjectIdRef.current = projectId;
@@ -89315,7 +89300,7 @@ function useLintModal(projectId, refreshKey) {
     autoLintRanRef.current = true;
     void runBackgroundLint();
   }, [projectId, runBackgroundLint]);
-  useEffect131(() => {
+  useEffect130(() => {
     if (!projectId || !refreshKey) return;
     const timer = setTimeout(() => void runBackgroundLint(), 1e3);
     return () => clearTimeout(timer);
@@ -89341,7 +89326,7 @@ function useLintModal(projectId, refreshKey) {
   const badgeFindings = lintModal ?? backgroundFindings;
   const lintFindingCount = badgeFindings.length;
   const hasLintError = badgeFindings.some((f) => f.severity === "error");
-  useEffect131(() => {
+  useEffect130(() => {
     usePlayerStore.getState().setLintFindingsByElement(findingsByElement);
   }, [findingsByElement]);
   return {
@@ -89416,7 +89401,7 @@ function useToast() {
 }
 
 // src/hooks/useStudioUrlState.ts
-import { useCallback as useCallback160, useEffect as useEffect132, useRef as useRef165, useState as useState132 } from "react";
+import { useCallback as useCallback160, useEffect as useEffect131, useRef as useRef165, useState as useState132 } from "react";
 
 // src/utils/studioUrlState.ts
 var VALID_TABS = ["layers", "design", "renders", "slideshow", "variables"];
@@ -89720,7 +89705,7 @@ function useStudioUrlState({
       previewIframeRef
     ]
   );
-  useEffect132(() => {
+  useEffect131(() => {
     if (!projectId || hydratedSeekRef.current || compositionLoading) return;
     const nextTime = duration > 0 ? clampNumber(initialState2.currentTime ?? 0, 0, duration) : Math.max(0, initialState2.currentTime ?? 0);
     usePlayerStore.getState().requestSeek(nextTime);
@@ -89728,7 +89713,7 @@ function useStudioUrlState({
     hydratedSeekRef.current = true;
   }, [projectId, compositionLoading, duration, initialState2.currentTime]);
   const selectionHydrationTime = selectionHydrated ? 0 : currentTime;
-  useEffect132(() => {
+  useEffect131(() => {
     if (!projectId || hydratedSelectionRef.current || compositionLoading) return;
     if (!hydratedSeekRef.current) return;
     const targetTime = initialState2.currentTime;
@@ -89755,7 +89740,7 @@ function useStudioUrlState({
     projectId,
     refreshKey
   ]);
-  useEffect132(() => {
+  useEffect131(() => {
     if (hydratedInitialTimeRef.current) return;
     const targetTime = stableTimeRef.current;
     if (targetTime == null) {
@@ -89765,7 +89750,7 @@ function useStudioUrlState({
     if (Math.abs(currentTime - targetTime) > 0.05) return;
     hydratedInitialTimeRef.current = true;
   }, [currentTime]);
-  useEffect132(() => {
+  useEffect131(() => {
     if (!activeCompPathHydrated) return;
     if (!hydratedSeekRef.current) return;
     if (!hydratedInitialTimeRef.current) return;
@@ -89776,12 +89761,12 @@ function useStudioUrlState({
     }, 200);
     return () => window.clearTimeout(handle);
   }, [activeCompPathHydrated, buildUrlState, currentTime, duration, isPlaying, projectId]);
-  useEffect132(() => {
+  useEffect131(() => {
     if (!activeCompPathHydrated) return;
     if (!projectId) return;
     replaceHash(buildStudioHash(projectId, buildUrlState()));
   }, [activeCompPathHydrated, buildUrlState, projectId]);
-  useEffect132(() => {
+  useEffect131(() => {
     if (!projectId) return;
     const onHashChange = () => {
       if (parseProjectIdFromHash(window.location.hash) !== projectId) return;
@@ -89928,7 +89913,7 @@ function InspectorIcon({ size = 16 }) {
 }
 
 // src/components/OpenInDesktopButton.tsx
-import { useEffect as useEffect133, useRef as useRef166, useState as useState133 } from "react";
+import { useEffect as useEffect132, useRef as useRef166, useState as useState133 } from "react";
 
 // src/components/FrameyGlyph.tsx
 import { jsx as jsx206, jsxs as jsxs161 } from "react/jsx-runtime";
@@ -89991,7 +89976,7 @@ var GAZE = 2.2;
 var OPENING_MS = 1600;
 function useDesktopRoute() {
   const [route, setRoute] = useState133(null);
-  useEffect133(() => {
+  useEffect132(() => {
     let live = true;
     studioApiFetch(ROUTE).then((res) => res.ok ? res.json() : null).then((body) => {
       if (!live || body?.available !== true) return;
@@ -90007,7 +89992,7 @@ function useDesktopRoute() {
   return route;
 }
 function useGaze(anchor2, eye) {
-  useEffect133(() => {
+  useEffect132(() => {
     let frame3 = 0;
     const look = (event) => {
       cancelAnimationFrame(frame3);
@@ -90358,10 +90343,10 @@ var StudioHeader = memo45(function StudioHeader2({
 });
 
 // src/hooks/useGestureCommit.ts
-import { useState as useState135, useCallback as useCallback163, useRef as useRef168, useEffect as useEffect135 } from "react";
+import { useState as useState135, useCallback as useCallback163, useRef as useRef168, useEffect as useEffect134 } from "react";
 
 // src/hooks/useGestureRecording.ts
-import { useCallback as useCallback162, useEffect as useEffect134, useRef as useRef167, useState as useState134 } from "react";
+import { useCallback as useCallback162, useEffect as useEffect133, useRef as useRef167, useState as useState134 } from "react";
 function readBasePosition(element, iframeEl) {
   let baseOpacity = 1;
   let baseScale = 1;
@@ -90509,7 +90494,7 @@ function useGestureRecording() {
   const refs = useRef167(createRecordingRefs());
   const samplesRef = useRef167(refs.current.samples);
   const trailRef = useRef167(refs.current.trail);
-  useEffect134(() => {
+  useEffect133(() => {
     const r = refs.current;
     return () => {
       isRecordingRef.current = false;
@@ -90900,7 +90885,7 @@ function useGestureCommit({
   const commitInFlightRef = useRef168(false);
   const capturedSelectionRef = useRef168(null);
   const capturedAnimationsRef = useRef168([]);
-  useEffect135(() => () => clearInterval(recordingAutoStopRef.current), []);
+  useEffect134(() => () => clearInterval(recordingAutoStopRef.current), []);
   const cancelRecording = useCallback163(() => {
     clearInterval(recordingAutoStopRef.current);
     gestureRecording.stopRecording();
@@ -90910,7 +90895,7 @@ function useGestureCommit({
     capturedSelectionRef.current = null;
     setGestureState("idle");
   }, [gestureRecording, isGestureRecordingRef]);
-  useEffect135(() => {
+  useEffect134(() => {
     if (readOnlyPreview && gestureStateRef.current === "recording") cancelRecording();
   }, [cancelRecording, readOnlyPreview]);
   const stopAndCommitRecording = useCallback163(async () => {
@@ -91433,7 +91418,7 @@ function MediaPreview({ projectId, filePath }) {
 }
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo47, useState as useState142, useCallback as useCallback167, useRef as useRef173, useMemo as useMemo84, useEffect as useEffect141 } from "react";
+import { memo as memo47, useState as useState142, useCallback as useCallback167, useRef as useRef173, useMemo as useMemo84, useEffect as useEffect140 } from "react";
 
 // src/components/ui/SearchInput.tsx
 import { jsx as jsx213, jsxs as jsxs167 } from "react/jsx-runtime";
@@ -91544,11 +91529,11 @@ var CATEGORY_LABELS = {
 var FILTER_ORDER = ["audio", "images", "video", "fonts"];
 
 // src/components/sidebar/AudioRow.tsx
-import { useState as useState138, useRef as useRef171, useEffect as useEffect137, useCallback as useCallback165 } from "react";
+import { useState as useState138, useRef as useRef171, useEffect as useEffect136, useCallback as useCallback165 } from "react";
 import { classifyWebAudioMediaRoute } from "@hyperframes/core/runtime/web-audio-route";
 
 // src/components/sidebar/AssetContextMenu.tsx
-import { useCallback as useCallback164, useEffect as useEffect136, useLayoutEffect as useLayoutEffect14, useRef as useRef170, useState as useState137 } from "react";
+import { useCallback as useCallback164, useEffect as useEffect135, useLayoutEffect as useLayoutEffect14, useRef as useRef170, useState as useState137 } from "react";
 import { Fragment as Fragment59, jsx as jsx214, jsxs as jsxs168 } from "react/jsx-runtime";
 function isValidAssetName(name) {
   return name.length > 0 && !/[/\\]/.test(name) && !name.includes("..");
@@ -91578,7 +91563,7 @@ function ContextMenu3({
       y: Math.min(y, window.innerHeight - rect.height - margin)
     });
   }, [x, y, mode]);
-  useEffect136(() => {
+  useEffect135(() => {
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
         e.stopPropagation();
@@ -91603,7 +91588,7 @@ function ContextMenu3({
     document.addEventListener("keydown", onKeyDown, true);
     return () => document.removeEventListener("keydown", onKeyDown, true);
   }, [mode, onClose]);
-  useEffect136(() => {
+  useEffect135(() => {
     if (mode === "menu") {
       menuRef.current?.querySelector('[role="menuitem"]')?.focus();
     }
@@ -91870,7 +91855,7 @@ function AudioRow({
     },
     [activateRow]
   );
-  useEffect137(() => {
+  useEffect136(() => {
     return () => {
       cancelAnimationFrame(animRef.current);
       audioRef.current?.pause();
@@ -91878,7 +91863,7 @@ function AudioRow({
       if (stopCurrentPreview === stopPlayback) stopCurrentPreview = null;
     };
   }, [stopPlayback]);
-  useEffect137(() => {
+  useEffect136(() => {
     if (playing) {
       const barCount = 24;
       const loop = () => {
@@ -92045,7 +92030,7 @@ function AudioRow({
 }
 
 // src/components/sidebar/GlobalAssetsView.tsx
-import { useEffect as useEffect138, useMemo as useMemo83, useState as useState139 } from "react";
+import { useEffect as useEffect137, useMemo as useMemo83, useState as useState139 } from "react";
 import { jsx as jsx216, jsxs as jsxs170 } from "react/jsx-runtime";
 function globalAssetRows(records, query = "") {
   const q = query.trim().toLowerCase();
@@ -92061,7 +92046,7 @@ function globalAssetRows(records, query = "") {
 }
 function GlobalAssetsView({ searchQuery }) {
   const [records, setRecords] = useState139(null);
-  useEffect138(() => {
+  useEffect137(() => {
     let cancelled = false;
     studioApiFetch("/api/assets/global").then((r) => r.ok ? r.json() : { assets: [] }).then((d) => {
       if (!cancelled) setRecords(Array.isArray(d.assets) ? d.assets : []);
@@ -92104,10 +92089,10 @@ function GlobalAssetsView({ searchQuery }) {
 }
 
 // src/components/sidebar/AssetCard.tsx
-import { useState as useState141, useEffect as useEffect140, useRef as useRef172, useCallback as useCallback166 } from "react";
+import { useState as useState141, useEffect as useEffect139, useRef as useRef172, useCallback as useCallback166 } from "react";
 
 // src/components/ui/VideoFrameThumbnail.tsx
-import { useState as useState140, useEffect as useEffect139 } from "react";
+import { useState as useState140, useEffect as useEffect138 } from "react";
 import { jsx as jsx217 } from "react/jsx-runtime";
 function VideoFrameThumbnail({
   src,
@@ -92115,7 +92100,7 @@ function VideoFrameThumbnail({
 }) {
   const [frame3, setFrame] = useState140(null);
   const [failed2, setFailed] = useState140(false);
-  useEffect139(() => {
+  useEffect138(() => {
     setFailed(false);
     const video = document.createElement("video");
     video.crossOrigin = "anonymous";
@@ -92182,7 +92167,7 @@ function openAssetContextMenu(e, setContextMenu) {
 }
 function useProbedDuration(src, skip) {
   const [duration, setDuration] = useState141(void 0);
-  useEffect140(() => {
+  useEffect139(() => {
     if (skip) return;
     let cancelled = false;
     let retryTimer;
@@ -92581,7 +92566,7 @@ var AssetsTab = memo47(function AssetsTab2({
   const [manifest, setManifest] = useState142(/* @__PURE__ */ new Map());
   const manifest404Ref = useRef173(/* @__PURE__ */ new Set());
   const assetsKey = assets.join("|");
-  useEffect141(() => {
+  useEffect140(() => {
     if (manifest404Ref.current.has(projectId)) return;
     let cancelled = false;
     studioApiFetch(buildProjectApiPath(projectId, `/preview/.media/manifest.jsonl`)).then((r) => {
@@ -92838,11 +92823,11 @@ var AssetsTab = memo47(function AssetsTab2({
 });
 
 // src/components/sidebar/BlocksTab.tsx
-import { memo as memo48, useState as useState144, useCallback as useCallback169, useRef as useRef175, useEffect as useEffect143 } from "react";
+import { memo as memo48, useState as useState144, useCallback as useCallback169, useRef as useRef175, useEffect as useEffect142 } from "react";
 import { createPortal as createPortal13 } from "react-dom";
 
 // src/components/sidebar/PromptPreviewModal.tsx
-import { useState as useState143, useCallback as useCallback168, useEffect as useEffect142, useRef as useRef174 } from "react";
+import { useState as useState143, useCallback as useCallback168, useEffect as useEffect141, useRef as useRef174 } from "react";
 import { jsx as jsx220, jsxs as jsxs173 } from "react/jsx-runtime";
 function PromptPreviewModal({
   title,
@@ -92862,7 +92847,7 @@ function PromptPreviewModal({
     containerRef,
     canClose: () => valueRef.current === prompt
   });
-  useEffect142(() => {
+  useEffect141(() => {
     requestAnimationFrame(() => {
       setEntered(true);
       textareaRef.current?.focus();
@@ -93168,7 +93153,7 @@ function BlockCard({
     setHovered(false);
     onPreview?.(null);
   }, [onPreview]);
-  useEffect143(() => {
+  useEffect142(() => {
     return () => {
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
     };
@@ -93329,7 +93314,7 @@ function BlockCard({
 }
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo49, useCallback as useCallback170, useEffect as useEffect144, useLayoutEffect as useLayoutEffect15, useMemo as useMemo85, useRef as useRef176, useState as useState145 } from "react";
+import { memo as memo49, useCallback as useCallback170, useEffect as useEffect143, useLayoutEffect as useLayoutEffect15, useMemo as useMemo85, useRef as useRef176, useState as useState145 } from "react";
 import { jsx as jsx222, jsxs as jsxs175 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -93408,7 +93393,7 @@ function useLastFrame(request2, snapshot3) {
 function useNearViewport() {
   const [element, setElement] = useState145(null);
   const [near4, setNear] = useState145(false);
-  useEffect144(() => {
+  useEffect143(() => {
     if (!element || near4) return;
     if (typeof IntersectionObserver === "undefined") return setNear(true);
     const observer = new IntersectionObserver(
@@ -93489,13 +93474,13 @@ function CompCard({
   });
   const thumbnailOffsetX = (CARD_W - stageSize.width * previewScale) / 2;
   const thumbnailOffsetY = (CARD_H - stageSize.height * previewScale) / 2;
-  useEffect144(() => {
+  useEffect143(() => {
     if (hovered) requestIframePlaybackSync(true);
   }, [hovered, requestIframePlaybackSync]);
-  useEffect144(() => {
+  useEffect143(() => {
     if (livePreviewLoaded) postFrameDisplayScale(iframeRef.current);
   }, [livePreviewLoaded, previewScale]);
-  useEffect144(() => {
+  useEffect143(() => {
     if (!hovered) return;
     const onRuntimeReady = (event) => {
       const frame3 = iframeRef.current;
@@ -93506,7 +93491,7 @@ function CompCard({
     window.addEventListener("message", onRuntimeReady);
     return () => window.removeEventListener("message", onRuntimeReady);
   }, [hovered]);
-  useEffect144(() => {
+  useEffect143(() => {
     return () => {
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
       if (syncTimer.current) clearTimeout(syncTimer.current);
@@ -93948,7 +93933,7 @@ function CodeBody({
 import { memo as memo60, useCallback as useCallback188 } from "react";
 
 // src/components/editor/LayersPanel.tsx
-import { memo as memo51, useState as useState147, useCallback as useCallback173, useEffect as useEffect145, useRef as useRef178 } from "react";
+import { memo as memo51, useState as useState147, useCallback as useCallback173, useEffect as useEffect144, useRef as useRef178 } from "react";
 
 // src/components/editor/layerKind.ts
 function isCompositionHost(el) {
@@ -94267,10 +94252,10 @@ var LayersPanel = memo51(function LayersPanel2({ host }) {
     );
     setLayers(sortLayersByZIndex(items));
   }, [previewIframeRef, activeCompPath, isMasterView, activeGroupElement, setActiveGroupElement]);
-  useEffect145(() => {
+  useEffect144(() => {
     collectLayers();
   }, [collectLayers, refreshKey, zEditVersion, livePreviewIframe]);
-  useEffect145(() => {
+  useEffect144(() => {
     const iframe = previewIframeRef.current;
     if (!iframe) return;
     const handleLoad = () => {
@@ -94279,13 +94264,13 @@ var LayersPanel = memo51(function LayersPanel2({ host }) {
     };
     return onPreviewContentReplaced(iframe, handleLoad);
   }, [previewIframeRef, livePreviewIframe, collectLayers]);
-  useEffect145(() => {
+  useEffect144(() => {
     if (!compositionLoading) {
       const timer = setTimeout(collectLayers, 100);
       return () => clearTimeout(timer);
     }
   }, [compositionLoading, collectLayers]);
-  useEffect145(() => {
+  useEffect144(() => {
     const throttle = createRafThrottle(collectLayers, 100);
     const unsubscribe = liveTime.subscribe(throttle.invoke);
     return () => {
@@ -94578,7 +94563,7 @@ import { memo as memo53, useCallback as useCallback175, useState as useState149
 import { memo as memo52, useCallback as useCallback174 } from "react";
 
 // src/captions/components/shared.tsx
-import { useEffect as useEffect146, useRef as useRef179, useState as useState148 } from "react";
+import { useEffect as useEffect145, useRef as useRef179, useState as useState148 } from "react";
 import { jsx as jsx227, jsxs as jsxs179 } from "react/jsx-runtime";
 var inputCls = "w-full bg-neutral-900 border border-neutral-800 rounded-sm px-1.5 py-0.5 text-2xs text-neutral-200 font-mono outline-hidden focus:border-studio-accent disabled:opacity-40 disabled:cursor-not-allowed";
 function Section2({ label, children }) {
@@ -94605,7 +94590,7 @@ function NumberField2({
 }) {
   const [draft, setDraft] = useState148(null);
   const focusedRef = useRef179(false);
-  useEffect146(() => {
+  useEffect145(() => {
     if (!focusedRef.current) setDraft(null);
   }, [value]);
   const display2 = draft !== null ? draft : mixed ? "" : String(value ?? 0);
@@ -95097,7 +95082,7 @@ var CaptionPropertyPanel = memo53(function CaptionPropertyPanel2({
 });
 
 // src/components/editor/BlockParamsPanel.tsx
-import { memo as memo54, useCallback as useCallback176, useEffect as useEffect147, useRef as useRef180, useState as useState150 } from "react";
+import { memo as memo54, useCallback as useCallback176, useEffect as useEffect146, useRef as useRef180, useState as useState150 } from "react";
 import { jsx as jsx230, jsxs as jsxs182 } from "react/jsx-runtime";
 var BlockParamsPanel = memo54(function BlockParamsPanel2({
   blockName,
@@ -95199,7 +95184,7 @@ var BlockParamsPanel = memo54(function BlockParamsPanel2({
     }
     commitTimersRef.current.clear();
   };
-  useEffect147(() => () => flushRef.current(), []);
+  useEffect146(() => () => flushRef.current(), []);
   return /* @__PURE__ */ jsxs182("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxs182("div", { className: "flex items-center justify-between px-3 py-2 border-b border-neutral-800", children: [
       /* @__PURE__ */ jsx230("div", { className: "text-[11px] font-semibold text-neutral-200 truncate", children: blockTitle }),
@@ -95331,7 +95316,7 @@ function ParamControl({
 import { memo as memo58 } from "react";
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo57, useState as useState153, useRef as useRef182, useEffect as useEffect149, useLayoutEffect as useLayoutEffect16, useId as useId5 } from "react";
+import { memo as memo57, useState as useState153, useRef as useRef182, useEffect as useEffect148, useLayoutEffect as useLayoutEffect16, useId as useId4 } from "react";
 import { createPortal as createPortal14 } from "react-dom";
 import { CANVAS_DIMENSIONS } from "@hyperframes/parsers";
 
@@ -95562,7 +95547,7 @@ var RenderQueueItem = memo55(function RenderQueueItem2({
 });
 
 // src/components/renders/FfmpegRequiredNotice.tsx
-import { memo as memo56, useEffect as useEffect148, useRef as useRef181, useState as useState152 } from "react";
+import { memo as memo56, useEffect as useEffect147, useRef as useRef181, useState as useState152 } from "react";
 import { jsx as jsx232, jsxs as jsxs184 } from "react/jsx-runtime";
 var DOWNLOAD_URL = "https://ffmpeg.org/download.html";
 var CUE_MS = 1600;
@@ -95576,16 +95561,16 @@ var FfmpegRequiredNotice = memo56(function FfmpegRequiredNotice2({
   const [recheckFailed, setRecheckFailed] = useState152(false);
   const wasChecking = useRef181(false);
   const cueTimer = useRef181(void 0);
-  useEffect148(() => {
+  useEffect147(() => {
     if (wasChecking.current && !checking) setRecheckFailed(true);
     wasChecking.current = checking;
   }, [checking]);
-  useEffect148(() => {
+  useEffect147(() => {
     if (!recheckFailed) return;
     cueTimer.current = setTimeout(() => setRecheckFailed(false), CUE_MS);
     return () => clearTimeout(cueTimer.current);
   }, [recheckFailed]);
-  useEffect148(() => () => clearTimeout(cueTimer.current), []);
+  useEffect147(() => () => clearTimeout(cueTimer.current), []);
   const copy = async (command) => {
     const ok = await copyTextToClipboard(command);
     if (!ok) return;
@@ -95737,7 +95722,7 @@ function FormatInfoTooltip({ format }) {
   const [position, setPosition] = useState153(null);
   const triggerRef = useRef182(null);
   const timeoutRef = useRef182(void 0);
-  const panelId = useId5();
+  const panelId = useId4();
   const show = () => {
     clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -95745,7 +95730,7 @@ function FormatInfoTooltip({ format }) {
   const hide = () => {
     timeoutRef.current = setTimeout(() => setOpen(false), 120);
   };
-  useEffect149(() => () => clearTimeout(timeoutRef.current), []);
+  useEffect148(() => () => clearTimeout(timeoutRef.current), []);
   useLayoutEffect16(() => {
     if (!open) return;
     const el = triggerRef.current;
@@ -95759,7 +95744,7 @@ function FormatInfoTooltip({ format }) {
       )
     );
   }, [open]);
-  useEffect149(() => {
+  useEffect148(() => {
     if (!open) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -95999,7 +95984,7 @@ var RenderQueue = memo57(function RenderQueue2({
   onRecheckFfmpeg
 }) {
   const listRef = useRef182(null);
-  useEffect149(() => {
+  useEffect148(() => {
     if (listRef.current) {
       listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
     }
@@ -96154,11 +96139,11 @@ var RenderQueuePanel = memo58(function RenderQueuePanel2() {
 });
 
 // src/components/panels/SlideshowPanel.tsx
-import { useState as useState155, useEffect as useEffect150, useCallback as useCallback179, useRef as useRef183 } from "react";
+import { useState as useState155, useEffect as useEffect149, useCallback as useCallback179, useRef as useRef183 } from "react";
 import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
-import { useState as useState154, useCallback as useCallback178, useId as useId6 } from "react";
+import { useState as useState154, useCallback as useCallback178, useId as useId5 } from "react";
 import { jsx as jsx236, jsxs as jsxs187 } from "react/jsx-runtime";
 function SectionHeader({
   children,
@@ -96345,7 +96330,7 @@ function BranchTree({
   onSelectBranchSlide
 }) {
   const [newLabel, setNewLabel] = useState154("");
-  const inputId = useId6();
+  const inputId = useId5();
   const handleCreate = useCallback178(() => {
     const label = newLabel.trim();
     if (!label) return;
@@ -96850,7 +96835,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   const { domEditSelection } = useDomEditSelectionContext();
   const manifestRef = useRef183(manifest);
   const notesCtrlRef = useRef183(makeSlideshowNotesController());
-  useEffect150(() => {
+  useEffect149(() => {
     if (!compHtml) {
       notesCtrlRef.current.flush();
       setManifest({ slides: [] });
@@ -96912,7 +96897,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [onPersistNotes]
   );
-  useEffect150(() => {
+  useEffect149(() => {
     const ctrl = notesCtrlRef.current;
     return () => {
       ctrl.flush();
@@ -97171,7 +97156,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo59, useCallback as useCallback183, useEffect as useEffect152, useMemo as useMemo86, useState as useState159 } from "react";
+import { memo as memo59, useCallback as useCallback183, useEffect as useEffect151, useMemo as useMemo86, useState as useState159 } from "react";
 
 // src/hooks/useVariablesPersist.ts
 import { useCallback as useCallback180 } from "react";
@@ -97222,7 +97207,7 @@ function useVariablesPersist({
 import { useCallback as useCallback182, useState as useState158 } from "react";
 
 // src/hooks/useProjectCompositionVariables.ts
-import { useCallback as useCallback181, useEffect as useEffect151, useState as useState156 } from "react";
+import { useCallback as useCallback181, useEffect as useEffect150, useState as useState156 } from "react";
 import { openComposition as openComposition4 } from "@hyperframes/sdk";
 async function readGroup(path, readProjectFile) {
   let content;
@@ -97246,7 +97231,7 @@ async function readGroup(path, readProjectFile) {
 }
 function useProjectCompositionVariables(compositionPaths, excludePath, readProjectFile, refreshKey) {
   const [groups, setGroups] = useState156([]);
-  useEffect151(() => {
+  useEffect150(() => {
     let cancelled = false;
     const htmlFiles = compositionPaths.filter((p) => p !== excludePath);
     void (async () => {
@@ -97852,7 +97837,7 @@ var VariablesPanel = memo59(function VariablesPanel2({
   const previewValues = usePreviewVariablesStore((s) => s.values);
   const setPreviewValues = usePreviewVariablesStore((s) => s.setValues);
   const [revision, setRevision] = useState159(0);
-  useEffect152(() => {
+  useEffect151(() => {
     if (!sdkSession) return;
     return sdkSession.on("change", () => setRevision((r) => r + 1));
   }, [sdkSession]);
@@ -98266,7 +98251,7 @@ function DesignPanelPromoteProvider({
 }
 
 // src/hooks/useRemoveBackground.ts
-import { useCallback as useCallback186, useEffect as useEffect153, useRef as useRef184 } from "react";
+import { useCallback as useCallback186, useEffect as useEffect152, useRef as useRef184 } from "react";
 
 // src/components/studioMediaJobs.ts
 var MEDIA_JOB_RECONNECT_TIMEOUT_MS = 15e3;
@@ -98373,7 +98358,7 @@ function waitForMediaJob(jobId, onProgress, signal) {
 // src/hooks/useRemoveBackground.ts
 function useRemoveBackground(projectId, refreshFileTree, showToast) {
   const abortRef = useRef184(null);
-  useEffect153(
+  useEffect152(
     () => () => {
       abortRef.current?.abort();
     },
@@ -98830,7 +98815,7 @@ function useStudioSidePanels(left, right, projectId) {
 }
 
 // src/components/TimelineToolbar.tsx
-import { memo as memo61, useEffect as useEffect155, useRef as useRef185 } from "react";
+import { memo as memo61, useEffect as useEffect154, useRef as useRef185 } from "react";
 import {
   ArrowsOutLineHorizontal,
   Image as Image3,
@@ -98840,7 +98825,7 @@ import {
 } from "@phosphor-icons/react";
 
 // src/hooks/useKeyframeKeyboard.ts
-import { useEffect as useEffect154, useCallback as useCallback189 } from "react";
+import { useEffect as useEffect153, useCallback as useCallback189 } from "react";
 function useKeyframeKeyboard({ enabled, onAddKeyframe }) {
   const handler = useCallback189(
     (e) => {
@@ -98854,7 +98839,7 @@ function useKeyframeKeyboard({ enabled, onAddKeyframe }) {
     },
     [enabled, onAddKeyframe]
   );
-  useEffect154(() => {
+  useEffect153(() => {
     if (!enabled) return;
     window.addEventListener("keydown", handler, { capture: true });
     return () => window.removeEventListener("keydown", handler, { capture: true });
@@ -99200,10 +99185,10 @@ var TimelineToolbar = memo61(function TimelineToolbar2({
     enabled: showKeyframes && Boolean(onToggleKeyframe),
     onAddKeyframe: onToggleKeyframe
   });
-  useEffect155(() => {
+  useEffect154(() => {
     if (!showKeyframes) setAutoKeyframeEnabled(false);
   }, [showKeyframes, setAutoKeyframeEnabled]);
-  useEffect155(() => {
+  useEffect154(() => {
     const onKeyDown = (e) => {
       if (e.key !== "n" && e.key !== "N") return;
       if (e.metaKey || e.ctrlKey || e.altKey) return;
@@ -99484,7 +99469,7 @@ function StudioSplash({ waiting }) {
 }
 
 // src/hooks/useServerConnection.ts
-import { useEffect as useEffect156, useState as useState161 } from "react";
+import { useEffect as useEffect155, useState as useState161 } from "react";
 async function resolveHashProject(id) {
   try {
     const res = await studioApiFetch(`/api/projects/${encodeURIComponent(id)}`);
@@ -99558,7 +99543,7 @@ function useServerConnection() {
       if (retryTimer !== null) clearTimeout(retryTimer);
     };
   });
-  useEffect156(() => {
+  useEffect155(() => {
     const onHashChange = () => {
       const next = parseProjectIdFromHash(window.location.hash);
       if (!next || next === projectId) return;
@@ -99584,9 +99569,9 @@ function useServerConnection() {
 }
 
 // src/hooks/useStudioSessionStart.ts
-import { useEffect as useEffect157 } from "react";
+import { useEffect as useEffect156 } from "react";
 function useStudioSessionStart(projectId, resolving, waitingForServer) {
-  useEffect157(() => {
+  useEffect156(() => {
     if (resolving || waitingForServer || hasFiredSessionStart()) return;
     markSessionStartFired();
     trackStudioSessionStart({ has_project: projectId != null });
@@ -99613,7 +99598,7 @@ function useTimelineAddAtPlayhead(addAsset, addComposition, projectId) {
 import { useState as useState162 } from "react";
 
 // src/hooks/useHydrateActiveCompPathFromUrl.ts
-import { useEffect as useEffect158 } from "react";
+import { useEffect as useEffect157 } from "react";
 function useHydrateActiveCompPathFromUrl({
   hydrated,
   fileTreeLoaded,
@@ -99622,7 +99607,7 @@ function useHydrateActiveCompPathFromUrl({
   setActiveCompPath,
   setHydrated
 }) {
-  useEffect158(() => {
+  useEffect157(() => {
     if (hydrated) return;
     if (!fileTreeLoaded) return;
     const nextCompPath = normalizeStudioCompositionPath(
@@ -99635,7 +99620,7 @@ function useHydrateActiveCompPathFromUrl({
 }
 
 // src/hooks/useAutoOpenRootComposition.ts
-import { useEffect as useEffect159, useRef as useRef186 } from "react";
+import { useEffect as useEffect158, useRef as useRef186 } from "react";
 function useAutoOpenRootComposition({
   projectId,
   activeCompPath,
@@ -99644,7 +99629,7 @@ function useAutoOpenRootComposition({
   onSelectComposition
 }) {
   const settledForProjectRef = useRef186(void 0);
-  useEffect159(() => {
+  useEffect158(() => {
     if (settledForProjectRef.current === projectId) return;
     if (!activeCompPathHydrated) return;
     if (activeCompPath !== null) {