@hyperframes/studio 0.7.99 → 0.7.101

package/dist/index.js

@@ -32,7 +32,7 @@ import {
 import { useCallback as useCallback50 } from "react";
 
 // src/components/nle/PreviewPane.tsx
-import { useCallback as useCallback35, useRef as useRef38, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useCallback as useCallback34, useRef as useRef37, useSyncExternalStore as useSyncExternalStore3 } from "react";
 
 // src/player/components/Player.tsx
 import { forwardRef as forwardRef2, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
@@ -621,7 +621,7 @@ var Player = forwardRef2(
           player.removeEventListener("error", handleError);
           if (assetPollRef.current) clearInterval(assetPollRef.current);
           assetPollRef.current = null;
-          container.removeChild(player);
+          player.remove();
           if (retryPreviewRef.current === retryPreview) retryPreviewRef.current = null;
           if (typeof ref === "function") {
           } else if (ref) {
@@ -15465,7 +15465,7 @@ function copyWithSelection(text) {
   } catch {
     return false;
   } finally {
-    document.body.removeChild(textarea);
+    textarea.remove();
   }
 }
 function shouldCopyWithSelectionFirst() {
@@ -21608,8 +21608,8 @@ import {
   createContext as createContext5,
   useContext as useContext5,
   useState as useState23,
-  useCallback as useCallback33,
-  useRef as useRef37,
+  useCallback as useCallback32,
+  useRef as useRef36,
   useEffect as useEffect26
 } from "react";
 
@@ -21710,94 +21710,57 @@ function useCompositionStack({
   };
 }
 
-// src/components/nle/TimelineResizeDivider.tsx
-import { useCallback as useCallback32, useRef as useRef36 } from "react";
-import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
+// src/utils/fitPanels.ts
+var MIN_PREVIEW_W = 360;
+var MIN_PREVIEW_H = 200;
+var MIN_LEFT = 200;
+var MIN_RIGHT = 280;
+var RAIL_W = 42;
 var MIN_TIMELINE_H = 100;
-var MIN_PREVIEW_H = 120;
-function TimelineResizeDivider({
-  timelineH,
-  setTimelineH,
-  persistTimelineH,
-  containerRef,
-  disabled
-}) {
-  const isDragging = useRef36(false);
-  const timelineHRef = useRef36(timelineH);
-  timelineHRef.current = timelineH;
-  const handlePointerDown = useCallback32(
-    (e) => {
-      if (disabled) return;
-      e.preventDefault();
-      isDragging.current = true;
-      e.target.setPointerCapture(e.pointerId);
-    },
-    [disabled]
-  );
-  const handlePointerMove = useCallback32(
-    (e) => {
-      if (disabled) return;
-      if (!isDragging.current || !containerRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const mouseY = e.clientY - rect.top;
-      const containerH = rect.height;
-      const newTimelineH = Math.max(
-        MIN_TIMELINE_H,
-        Math.min(containerH - MIN_PREVIEW_H, containerH - mouseY)
-      );
-      setTimelineH(newTimelineH);
-    },
-    [disabled, containerRef, setTimelineH]
-  );
-  const handlePointerUp = useCallback32(() => {
-    if (isDragging.current) persistTimelineH(timelineHRef.current);
-    isDragging.current = false;
-  }, [persistTimelineH]);
-  const handleKeyDown = useCallback32(
-    (e) => {
-      if (disabled) return;
-      if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-      e.preventDefault();
-      const containerH = containerRef.current?.getBoundingClientRect().height ?? Infinity;
-      const delta = e.key === "ArrowUp" ? 16 : -16;
-      setTimelineH((prev) => {
-        const next = Math.max(MIN_TIMELINE_H, Math.min(containerH - MIN_PREVIEW_H, prev + delta));
-        persistTimelineH(next);
-        return next;
-      });
-    },
-    [disabled, containerRef, setTimelineH, persistTimelineH]
-  );
-  return (
-    // Horizontal resize divider: 3px visible seam (h-[3px]), 10px pointer-capture
-    // zone via the absolutely-positioned inner hit area so the layout gap stays
-    // at 3px while draggability is preserved over the full band.
-    /* @__PURE__ */ jsxs37(
-      "div",
-      {
-        role: "separator",
-        "aria-orientation": "horizontal",
-        "aria-label": "Resize timeline (arrow keys)",
-        "aria-valuenow": Math.round(timelineH),
-        "aria-valuemin": MIN_TIMELINE_H,
-        "aria-valuemax": Math.round(
-          (containerRef.current?.getBoundingClientRect().height ?? 600) - MIN_PREVIEW_H
-        ),
-        tabIndex: 0,
-        className: "group relative h-[3px] flex-shrink-0 cursor-row-resize z-10 outline-none focus-visible:bg-studio-accent/20",
-        style: { touchAction: "none" },
-        onPointerDown: handlePointerDown,
-        onPointerMove: handlePointerMove,
-        onPointerUp: handlePointerUp,
-        onPointerCancel: handlePointerUp,
-        onKeyDown: handleKeyDown,
-        children: [
-          /* @__PURE__ */ jsx49("div", { className: "absolute inset-x-0 -top-[4px] h-[10px]" }),
-          /* @__PURE__ */ jsx49("div", { className: "h-[3px] w-full bg-transparent transition-colors group-hover:bg-white/12 group-active:bg-white/18 group-focus-visible:bg-studio-accent/60" })
-        ]
-      }
-    )
-  );
+var PANEL_SEAM_W = 6;
+var PANEL_MAX_RATIO = 0.4;
+var RAIL_LEFT_BELOW = 860;
+var RAIL_RIGHT_BELOW = 700;
+function railsEngaged(viewportWidth) {
+  return viewportWidth < RAIL_LEFT_BELOW;
+}
+function clamp5(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function defaultPanelWidths(viewportWidth) {
+  return {
+    left: Math.max(MIN_LEFT, Math.min(384, Math.round(viewportWidth * 0.257))),
+    right: Math.max(MIN_RIGHT, Math.min(424, Math.round(viewportWidth * 0.284)))
+  };
+}
+function fitPanelWidths(viewportWidth, preferred, reopened = { left: false, right: false }) {
+  const vw = Number.isFinite(viewportWidth) ? Math.max(0, viewportWidth) : 0;
+  if (vw <= 0) {
+    return { ...preferred, preview: 0, autoCollapseLeft: false, autoCollapseRight: false };
+  }
+  const autoCollapseLeft = vw < RAIL_LEFT_BELOW && !reopened.left;
+  const autoCollapseRight = vw < RAIL_RIGHT_BELOW && !reopened.right;
+  const cap = Math.floor(vw * PANEL_MAX_RATIO);
+  const leftFloor = autoCollapseLeft ? RAIL_W : MIN_LEFT;
+  const rightFloor = autoCollapseRight ? 0 : MIN_RIGHT;
+  let left = autoCollapseLeft ? RAIL_W : clamp5(preferred.left, MIN_LEFT, Math.max(MIN_LEFT, cap));
+  let right = autoCollapseRight ? 0 : clamp5(preferred.right, MIN_RIGHT, Math.max(MIN_RIGHT, cap));
+  const budget = vw - MIN_PREVIEW_W - PANEL_SEAM_W;
+  if (left + right > budget) right = Math.max(rightFloor, budget - left);
+  if (left + right > budget) left = Math.max(leftFloor, budget - right);
+  return {
+    left,
+    right,
+    preview: Math.max(0, vw - left - right - PANEL_SEAM_W),
+    autoCollapseLeft,
+    autoCollapseRight
+  };
+}
+function fitTimelineHeight(containerHeight, preferred) {
+  const h = Number.isFinite(containerHeight) ? containerHeight : 0;
+  const wanted = Number.isFinite(preferred) ? preferred : MIN_TIMELINE_H;
+  if (h <= 0) return Math.max(MIN_TIMELINE_H, wanted);
+  return clamp5(wanted, MIN_TIMELINE_H, Math.max(MIN_TIMELINE_H, h - MIN_PREVIEW_H));
 }
 
 // src/utils/assetPreviewStore.ts
@@ -21810,7 +21773,7 @@ var useAssetPreviewStore = create4((set) => ({
 }));
 
 // src/components/nle/NLEContext.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var DEFAULT_TIMELINE_H = 360;
 function shouldDisableTimelineWhileCompositionLoading(compositionLoading) {
   return compositionLoading;
@@ -21843,13 +21806,13 @@ function NLEProvider({
     useAssetPreviewStore.getState().clearPreviewAsset();
   }, [projectId]);
   const [previewCompositionSize, setPreviewCompositionSize] = useState23(null);
-  const prevRefreshKeyRef = useRef37(refreshKey);
+  const prevRefreshKeyRef = useRef36(refreshKey);
   useEffect26(() => {
     if (refreshKey === prevRefreshKeyRef.current) return;
     prevRefreshKeyRef.current = refreshKey;
     refreshPlayer();
   }, [refreshKey, refreshPlayer]);
-  const onIframeLoad = useCallback33(() => {
+  const onIframeLoad = useCallback32(() => {
     baseOnIframeLoad();
     ensureMotionPathPluginLoaded(iframeRef.current);
     onIframeRef?.(iframeRef.current);
@@ -21867,7 +21830,7 @@ function NLEProvider({
     onCompositionChange
   });
   const iframeRef_ = iframeRef;
-  const handleDrillDown = useCallback33(
+  const handleDrillDown = useCallback32(
     (element) => {
       if (!element.compositionSrc) return;
       usePlayerStore.getState().setSelectedElementId(null);
@@ -21894,9 +21857,9 @@ function NLEProvider({
     },
     [compIdToSrc, drillDown, iframeRef_]
   );
-  const compIdToSrcRef = useRef37(compIdToSrc);
+  const compIdToSrcRef = useRef36(compIdToSrc);
   compIdToSrcRef.current = compIdToSrc;
-  const onCompIdToSrcChangeRef = useRef37(onCompIdToSrcChange);
+  const onCompIdToSrcChangeRef = useRef36(onCompIdToSrcChange);
   onCompIdToSrcChangeRef.current = onCompIdToSrcChange;
   useEffect26(() => {
     const controller = new AbortController();
@@ -21967,19 +21930,26 @@ function NLEProvider({
     const stored = readStudioUiPreferences().timelineHeight;
     return stored !== void 0 && stored >= MIN_TIMELINE_H ? stored : DEFAULT_TIMELINE_H;
   });
-  const persistTimelineH = useCallback33((height) => {
+  const persistTimelineH = useCallback32((height) => {
     writeStudioUiPreferences({ timelineHeight: Math.round(height) });
   }, []);
-  const containerRef = useRef37(null);
+  const containerRef = useRef36(null);
   useEffect26(() => {
-    const containerH = containerRef.current?.getBoundingClientRect().height;
-    if (!containerH) return;
-    const max = containerH - MIN_PREVIEW_H;
-    setTimelineH((prev) => prev > max ? Math.max(MIN_TIMELINE_H, max) : prev);
+    const element = containerRef.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const reconcile = () => {
+      const containerH = element.getBoundingClientRect().height;
+      if (!containerH) return;
+      setTimelineH((prev) => fitTimelineHeight(containerH, prev));
+    };
+    reconcile();
+    const observer = new ResizeObserver(reconcile);
+    observer.observe(element);
+    return () => observer.disconnect();
   }, []);
-  const hasLoadedOnceRef = useRef37(false);
+  const hasLoadedOnceRef = useRef36(false);
   const [compositionLoading, setCompositionLoadingRaw] = useState23(true);
-  const setCompositionLoading = useCallback33((loading) => {
+  const setCompositionLoading = useCallback32((loading) => {
     if (!loading) hasLoadedOnceRef.current = true;
     if (loading && hasLoadedOnceRef.current) return;
     setCompositionLoadingRaw(loading);
@@ -21989,7 +21959,7 @@ function NLEProvider({
   useEffect26(() => {
     onCompositionLoadingChange?.(compositionLoading);
   }, [compositionLoading, onCompositionLoadingChange]);
-  const onIframeRefStable = useRef37(onIframeRef);
+  const onIframeRefStable = useRef36(onIframeRef);
   onIframeRefStable.current = onIframeRef;
   useEffect26(() => {
     onIframeRefStable.current?.(iframeRef.current);
@@ -22018,11 +21988,11 @@ function NLEProvider({
     previewCompositionSize,
     setPreviewCompositionSize
   };
-  return /* @__PURE__ */ jsx50(NLEContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx49(NLEContext.Provider, { value, children });
 }
 
 // src/components/nle/AssetPreviewOverlay.tsx
-import { useEffect as useEffect27, useCallback as useCallback34 } from "react";
+import { useEffect as useEffect27, useCallback as useCallback33 } from "react";
 
 // src/utils/assetPreviewDismiss.ts
 var TIME_EPSILON_S = 1e-6;
@@ -22033,7 +22003,7 @@ function shouldDismissAssetPreview(openedTime, snapshot) {
 }
 
 // src/components/nle/AssetPreviewOverlay.tsx
-import { jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
 function basename(path) {
   return path.split("/").pop() ?? path;
 }
@@ -22048,10 +22018,10 @@ function AssetPreviewMedia({
   name
 }) {
   if (kind === "image") {
-    return /* @__PURE__ */ jsx51("img", { src: serveUrl, alt: name, className: "max-w-full max-h-[40vh] rounded object-contain" });
+    return /* @__PURE__ */ jsx50("img", { src: serveUrl, alt: name, className: "max-w-full max-h-[40vh] rounded object-contain" });
   }
   if (kind === "video") {
-    return /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx50(
       "video",
       {
         src: serveUrl,
@@ -22063,8 +22033,8 @@ function AssetPreviewMedia({
       }
     );
   }
-  return /* @__PURE__ */ jsxs38("div", { className: "flex flex-col items-center gap-3 px-6 py-4", children: [
-    /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs37("div", { className: "flex flex-col items-center gap-3 px-6 py-4", children: [
+    /* @__PURE__ */ jsxs37(
       "svg",
       {
         width: "40",
@@ -22075,20 +22045,20 @@ function AssetPreviewMedia({
         strokeWidth: "1.5",
         className: "text-neutral-500",
         children: [
-          /* @__PURE__ */ jsx51("path", { d: "M9 18V5l12-2v13", strokeLinecap: "round", strokeLinejoin: "round" }),
-          /* @__PURE__ */ jsx51("circle", { cx: "6", cy: "18", r: "3" }),
-          /* @__PURE__ */ jsx51("circle", { cx: "18", cy: "16", r: "3" })
+          /* @__PURE__ */ jsx50("path", { d: "M9 18V5l12-2v13", strokeLinecap: "round", strokeLinejoin: "round" }),
+          /* @__PURE__ */ jsx50("circle", { cx: "6", cy: "18", r: "3" }),
+          /* @__PURE__ */ jsx50("circle", { cx: "18", cy: "16", r: "3" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx51("audio", { src: serveUrl, controls: true, className: "w-64" })
+    /* @__PURE__ */ jsx50("audio", { src: serveUrl, controls: true, className: "w-64" })
   ] });
 }
 function AssetPreviewOverlay() {
   const previewAsset = useAssetPreviewStore((s) => s.previewAsset);
   const previewProjectId = useAssetPreviewStore((s) => s.previewProjectId);
   const clearPreviewAsset = useAssetPreviewStore((s) => s.clearPreviewAsset);
-  const handleKeyDown = useCallback34(
+  const handleKeyDown = useCallback33(
     (e) => {
       if (e.key === "Escape") clearPreviewAsset();
     },
@@ -22114,20 +22084,20 @@ function AssetPreviewOverlay() {
   if (!previewAsset || !previewProjectId) return null;
   const serveUrl = resolveMediaPreviewUrl(previewAsset, previewProjectId);
   const name = basename(previewAsset);
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
       className: "absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/20",
       onClick: clearPreviewAsset,
       role: "dialog",
       "aria-label": `Preview: ${name}`,
-      children: /* @__PURE__ */ jsxs38(
+      children: /* @__PURE__ */ jsxs37(
         "div",
         {
           className: "relative flex flex-col items-center gap-2 max-w-[58%] rounded-lg border border-neutral-800 bg-neutral-950/95 p-2 pt-8 shadow-2xl",
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx51(
+            /* @__PURE__ */ jsx50(
               "button",
               {
                 className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-neutral-800 hover:bg-neutral-700 text-neutral-300 hover:text-white flex items-center justify-center transition-colors z-10",
@@ -22136,7 +22106,7 @@ function AssetPreviewOverlay() {
                   clearPreviewAsset();
                 },
                 "aria-label": "Close preview",
-                children: /* @__PURE__ */ jsxs38(
+                children: /* @__PURE__ */ jsxs37(
                   "svg",
                   {
                     width: "12",
@@ -22147,15 +22117,15 @@ function AssetPreviewOverlay() {
                     fill: "none",
                     strokeLinecap: "round",
                     children: [
-                      /* @__PURE__ */ jsx51("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                      /* @__PURE__ */ jsx51("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                      /* @__PURE__ */ jsx50("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ jsx50("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                     ]
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx51(AssetPreviewMedia, { kind: resolveAssetKind(previewAsset), serveUrl, name }),
-            /* @__PURE__ */ jsx51("span", { className: "text-[12px] text-neutral-400 truncate max-w-full px-2 text-center", children: name })
+            /* @__PURE__ */ jsx50(AssetPreviewMedia, { kind: resolveAssetKind(previewAsset), serveUrl, name }),
+            /* @__PURE__ */ jsx50("span", { className: "text-[12px] text-neutral-400 truncate max-w-full px-2 text-center", children: name })
           ]
         }
       )
@@ -22164,7 +22134,7 @@ function AssetPreviewOverlay() {
 }
 
 // src/components/nle/PreviewPane.tsx
-import { jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
 function subscribeFullscreen(cb) {
   document.addEventListener("fullscreenchange", cb);
   return () => document.removeEventListener("fullscreenchange", cb);
@@ -22199,8 +22169,8 @@ function PreviewPane({
     previewCompositionSize,
     setPreviewCompositionSize
   } = useNLEContext();
-  const stageRefForDrop = useRef38(null);
-  const handleStageRef = useCallback35((ref) => {
+  const stageRefForDrop = useRef37(null);
+  const handleStageRef = useCallback34((ref) => {
     stageRefForDrop.current = ref.current;
   }, []);
   const {
@@ -22215,10 +22185,10 @@ function PreviewPane({
     stageRef: stageRefForDrop,
     onBlockDrop: onPreviewBlockDrop
   });
-  const containerRef = useRef38(null);
+  const containerRef = useRef37(null);
   const fullscreenElement = useSyncExternalStore3(subscribeFullscreen, getFullscreenElement);
   const isFullscreen = fullscreenElement === containerRef.current && fullscreenElement != null;
-  const toggleFullscreen = useCallback35(() => {
+  const toggleFullscreen = useCallback34(() => {
     if (!containerRef.current) return;
     if (document.fullscreenElement) {
       void document.exitFullscreen();
@@ -22228,14 +22198,14 @@ function PreviewPane({
   }, []);
   const currentLevel = compositionStack[compositionStack.length - 1];
   const directUrl = compositionStack.length > 1 ? currentLevel.previewUrl : void 0;
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       ref: containerRef,
       className: `flex-1 min-h-0 flex flex-col overflow-hidden bg-neutral-950 ${isFullscreen ? "" : "rounded-lg border border-neutral-800/50"}`,
       "data-studio-fullscreen-target": "",
       children: [
-        /* @__PURE__ */ jsxs39(
+        /* @__PURE__ */ jsxs38(
           "div",
           {
             className: "flex-1 min-h-0 relative overflow-hidden",
@@ -22246,8 +22216,8 @@ function PreviewPane({
             onDragLeave: handlePreviewDragLeave,
             onDrop: handlePreviewDrop,
             children: [
-              /* @__PURE__ */ jsxs39("div", { className: "absolute inset-0 overflow-hidden", children: [
-                /* @__PURE__ */ jsx52(
+              /* @__PURE__ */ jsxs38("div", { className: "absolute inset-0 overflow-hidden", children: [
+                /* @__PURE__ */ jsx51(
                   NLEPreview,
                   {
                     projectId,
@@ -22261,16 +22231,16 @@ function PreviewPane({
                     onCompositionSizeChange: setPreviewCompositionSize
                   }
                 ),
-                previewDragOver && /* @__PURE__ */ jsx52("div", { className: "absolute inset-2 z-40 rounded-lg border-2 border-dashed border-studio-accent/50 bg-studio-accent/[0.04] pointer-events-none" }),
-                /* @__PURE__ */ jsx52(AssetPreviewOverlay, {})
+                previewDragOver && /* @__PURE__ */ jsx51("div", { className: "absolute inset-2 z-40 rounded-lg border-2 border-dashed border-studio-accent/50 bg-studio-accent/[0.04] pointer-events-none" }),
+                /* @__PURE__ */ jsx51(AssetPreviewOverlay, {})
               ] }),
               !isFullscreen && previewOverlay
             ]
           }
         ),
-        /* @__PURE__ */ jsxs39("div", { className: "flex-shrink-0", children: [
-          !isFullscreen && compositionStack.length > 1 && /* @__PURE__ */ jsx52(CompositionBreadcrumb, { stack: compositionStack, onNavigate: handleNavigateComposition }),
-          /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsxs38("div", { className: "flex-shrink-0", children: [
+          !isFullscreen && compositionStack.length > 1 && /* @__PURE__ */ jsx51(CompositionBreadcrumb, { stack: compositionStack, onNavigate: handleNavigateComposition }),
+          /* @__PURE__ */ jsx51(
             PlayerControls,
             {
               onTogglePlay: togglePlay,
@@ -22288,6 +22258,91 @@ function PreviewPane({
 
 // src/components/nle/TimelinePane.tsx
 import { useCallback as useCallback36 } from "react";
+
+// src/components/nle/TimelineResizeDivider.tsx
+import { useCallback as useCallback35, useRef as useRef38 } from "react";
+import { jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
+function TimelineResizeDivider({
+  timelineH,
+  setTimelineH,
+  persistTimelineH,
+  containerRef,
+  disabled
+}) {
+  const isDragging = useRef38(false);
+  const timelineHRef = useRef38(timelineH);
+  timelineHRef.current = timelineH;
+  const handlePointerDown = useCallback35(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      isDragging.current = true;
+      e.target.setPointerCapture(e.pointerId);
+    },
+    [disabled]
+  );
+  const handlePointerMove = useCallback35(
+    (e) => {
+      if (disabled) return;
+      if (!isDragging.current || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const mouseY = e.clientY - rect.top;
+      setTimelineH(fitTimelineHeight(rect.height, rect.height - mouseY));
+    },
+    [disabled, containerRef, setTimelineH]
+  );
+  const handlePointerUp = useCallback35(() => {
+    if (isDragging.current) persistTimelineH(timelineHRef.current);
+    isDragging.current = false;
+  }, [persistTimelineH]);
+  const handleKeyDown = useCallback35(
+    (e) => {
+      if (disabled) return;
+      if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+      e.preventDefault();
+      const containerH = containerRef.current?.getBoundingClientRect().height ?? 0;
+      const delta = e.key === "ArrowUp" ? 16 : -16;
+      setTimelineH((prev) => {
+        const next = fitTimelineHeight(containerH, prev + delta);
+        persistTimelineH(next);
+        return next;
+      });
+    },
+    [disabled, containerRef, setTimelineH, persistTimelineH]
+  );
+  return (
+    // Horizontal resize divider: 3px visible seam (h-[3px]), 10px pointer-capture
+    // zone via the absolutely-positioned inner hit area so the layout gap stays
+    // at 3px while draggability is preserved over the full band.
+    /* @__PURE__ */ jsxs39(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "horizontal",
+        "aria-label": "Resize timeline (arrow keys)",
+        "aria-valuenow": Math.round(timelineH),
+        "aria-valuemin": MIN_TIMELINE_H,
+        "aria-valuemax": Math.round(
+          (containerRef.current?.getBoundingClientRect().height ?? 600) - MIN_PREVIEW_H
+        ),
+        tabIndex: 0,
+        className: "group relative h-[3px] flex-shrink-0 cursor-row-resize z-10 outline-none focus-visible:bg-studio-accent/20",
+        style: { touchAction: "none" },
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx52("div", { className: "absolute inset-x-0 -top-[4px] h-[10px]" }),
+          /* @__PURE__ */ jsx52("div", { className: "h-[3px] w-full bg-transparent transition-colors group-hover:bg-white/12 group-active:bg-white/18 group-focus-visible:bg-studio-accent/60" })
+        ]
+      }
+    )
+  );
+}
+
+// src/components/nle/TimelinePane.tsx
 import { Fragment as Fragment15, jsx as jsx53, jsxs as jsxs40 } from "react/jsx-runtime";
 function forwardRebasedTimelineMoveElements(edits, coalesceKey, operation, onMoveElements, coalesceMs) {
   return onMoveElements(
@@ -28696,7 +28751,19 @@ function scopedElementKey(element) {
   return `${element.sourceFile || "index.html"}#${element.id}`;
 }
 function elementCacheKeys(sourceFile, elementId2) {
-  return sourceFile === "index.html" ? [`index.html#${elementId2}`, elementId2] : [`${sourceFile}#${elementId2}`, `index.html#${elementId2}`, elementId2];
+  const id = typeof elementId2 === "string" ? elementId2 : coerceCacheKeyId(elementId2, sourceFile);
+  return sourceFile === "index.html" ? [`index.html#${id}`, id] : [`${sourceFile}#${id}`, `index.html#${id}`, id];
+}
+function coerceCacheKeyId(elementId2, sourceFile) {
+  trackStudioEvent("cache_key_non_string", {
+    value_type: typeof elementId2,
+    // An Element lands here as "HTMLDivElement", a boxed id as "Number" — enough
+    // to name the producer without shipping user content to telemetry.
+    constructor_name: elementId2?.constructor?.name ?? null,
+    is_array: Array.isArray(elementId2),
+    source_file: sourceFile
+  });
+  return String(elementId2);
 }
 function replaceKeyframeCacheForFile(sourceFile, entries, animationsByElement) {
   publishKeyframeCache((draft) => {
@@ -33452,7 +33519,9 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
     }
     if (allKeyframes.length === 0) {
       const { keyframeCache } = usePlayerStore.getState();
-      const hasCached = keyframeCache.has(`${sourceFile}#${elementId2}`) || keyframeCache.has(elementId2);
+      const hasCached = elementCacheKeys(sourceFile, elementId2).some(
+        (key2) => keyframeCache.has(key2)
+      );
       if (!hasCached) clearKeyframeCacheForElement(sourceFile, elementId2);
       return;
     }
@@ -33464,8 +33533,9 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
       ...easeEach ? { easeEach } : {}
     };
     publishKeyframeCache((draft) => {
-      draft.keyframeCache.set(`${sourceFile}#${elementId2}`, merged);
-      draft.keyframeCache.set(elementId2, merged);
+      for (const key2 of elementCacheKeys(sourceFile, elementId2)) {
+        draft.keyframeCache.set(key2, merged);
+      }
     });
   }, [elementId2, sourceFile, animations, domClipChildrenKey]);
   return { animations, multipleTimelines, unsupportedTimelinePattern };
@@ -33519,10 +33589,8 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
       if (scanned.size === 0) return false;
       publishKeyframeCache((draft) => {
         for (const [id, data] of scanned) {
-          const cacheKey = `${sf}#${id}`;
-          const fallbackKey = `index.html#${id}`;
-          const alreadyCached = draft.keyframeCache.has(cacheKey) || draft.keyframeCache.has(fallbackKey) || draft.keyframeCache.has(id);
-          if (alreadyCached) continue;
+          const keys = elementCacheKeys(sf, id);
+          if (keys.some((key2) => draft.keyframeCache.has(key2))) continue;
           const isPosOnly = data.keyframes.length === 1 && Object.keys(data.keyframes[0].properties).every((k) => k === "x" || k === "y");
           if (isPosOnly) {
             continue;
@@ -33532,9 +33600,7 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
             keyframes: data.keyframes,
             ...data.easeEach ? { easeEach: data.easeEach } : {}
           };
-          draft.keyframeCache.set(cacheKey, entry);
-          if (sf !== "index.html") draft.keyframeCache.set(fallbackKey, entry);
-          draft.keyframeCache.set(id, entry);
+          for (const key2 of keys) draft.keyframeCache.set(key2, entry);
         }
       });
       runtimeScanDoneRef.current = `kf-cache:${projectId}:${sf}:${version}`;
@@ -33554,7 +33620,7 @@ var NOOP_EPSILON_PCT2 = 0.1;
 var EPSILON_TIME = 1e-4;
 var MIN_TWEEN_DURATION = 0.01;
 var round33 = (n) => Math.round(n * 1e3) / 1e3;
-var clamp5 = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+var clamp6 = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
 function resolveFlatTweenBoundaryRetime(opts) {
   const { keyframeCount, draggedTweenPct, tweenStart, tweenEnd, dropAbsTime } = opts;
   if (keyframeCount > 0) return null;
@@ -33585,7 +33651,7 @@ function resolveKeyframeRetime(opts) {
   });
   if (flatBoundary) return flatBoundary;
   if (dropAbsTime >= tweenStart - EPSILON_TIME && dropAbsTime <= tweenEnd + EPSILON_TIME) {
-    const toTweenPct = round33(clamp5((dropAbsTime - tweenStart) / tweenDuration * 100, 0, 100));
+    const toTweenPct = round33(clamp6((dropAbsTime - tweenStart) / tweenDuration * 100, 0, 100));
     if (Math.abs(toTweenPct - draggedTweenPct) < NOOP_EPSILON_PCT2) return { kind: "noop" };
     return { kind: "move", toTweenPct };
   }
@@ -39622,7 +39688,7 @@ function hasCssWord(value, word) {
 function parsePercentToken(value, fallback) {
   if (!value?.endsWith("%")) return fallback;
   const parsed = parseCssNumber(value.slice(0, -1));
-  return parsed == null ? fallback : clamp6(parsed, 0, 100);
+  return parsed == null ? fallback : clamp7(parsed, 0, 100);
 }
 function parseAngleToken(value) {
   const trimmed = value?.trim().toLowerCase();
@@ -39644,13 +39710,13 @@ function trailingPercentStart(value) {
   if (start === 0 || !isWhitespace(withoutUnit[start - 1])) return null;
   return start;
 }
-function clamp6(value, min, max) {
+function clamp7(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
 var round = roundToCenti;
 function parsePercent(value, fallback) {
   const parsed = parseCssNumber(value);
-  return parsed == null ? fallback : clamp6(parsed, 0, 100);
+  return parsed == null ? fallback : clamp7(parsed, 0, 100);
 }
 function parseColorStop(raw) {
   const trimmed = raw.trim();
@@ -39681,7 +39747,7 @@ function normalizeStops(stops) {
   }));
   return result.map((stop) => ({
     color: stop.color,
-    position: round(clamp6(stop.position, 0, 100))
+    position: round(clamp7(stop.position, 0, 100))
   }));
 }
 function splitGradientArgs(value) {
@@ -39844,7 +39910,7 @@ function formatHex(channel) {
   return channel.toString(16).padStart(2, "0");
 }
 function interpolateGradientStopColor(model, position) {
-  const clampedPosition = clamp6(position, 0, 100);
+  const clampedPosition = clamp7(position, 0, 100);
   const sortedStops = [...model.stops].sort((a, b) => a.position - b.position);
   const exact = sortedStops.find((stop) => Math.abs(stop.position - clampedPosition) < 1e-3);
   if (exact) return exact.color;
@@ -39868,7 +39934,7 @@ function interpolateGradientStopColor(model, position) {
   return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 }
 function insertGradientStop(model, position) {
-  const clampedPosition = round(clamp6(position, 0, 100));
+  const clampedPosition = round(clamp7(position, 0, 100));
   const color = interpolateGradientStopColor(model, clampedPosition);
   const nextStops = [...model.stops, { color, position: clampedPosition }].sort(
     (a, b) => a.position - b.position
@@ -50734,7 +50800,7 @@ var FileTree = memo33(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState133, useCallback as useCallback152, useRef as useRef142, useMemo as useMemo66, useEffect as useEffect121, useLayoutEffect as useLayoutEffect9 } from "react";
+import { useState as useState133, useCallback as useCallback152, useRef as useRef142, useMemo as useMemo66, useEffect as useEffect122, useLayoutEffect as useLayoutEffect9 } from "react";
 
 // src/components/renders/useRenderQueue.ts
 import { useState as useState77, useEffect as useEffect71, useCallback as useCallback65, useRef as useRef83, useMemo as useMemo46 } from "react";
@@ -52315,33 +52381,26 @@ function usePersistentEditHistory(options) {
 }
 
 // src/hooks/usePanelLayout.ts
-import { useState as useState82, useCallback as useCallback69, useRef as useRef90 } from "react";
+import { useState as useState82, useCallback as useCallback69, useRef as useRef90, useEffect as useEffect74 } from "react";
+var NO_OVERRIDE = { left: false, right: false };
 function getInitialRightInspectorPanes(tab) {
   if (tab === "layers") return { layers: true, design: false };
   return { layers: false, design: true };
 }
-function getInitialPanelWidths() {
-  const viewportWidth = typeof window === "undefined" ? 1496 : window.innerWidth;
+function readViewportWidth() {
+  return typeof window === "undefined" ? 1496 : window.innerWidth;
+}
+function getPreferredPanelWidths() {
   const preferences = readStudioUiPreferences();
-  const leftDefault = Math.max(240, Math.min(384, Math.round(viewportWidth * 0.257)));
-  const rightDefault = Math.max(320, Math.min(424, Math.round(viewportWidth * 0.284)));
+  const defaults = defaultPanelWidths(readViewportWidth());
   return {
-    left: Math.max(
-      160,
-      Math.min(Math.floor(viewportWidth * 0.5), preferences.leftWidth ?? leftDefault)
-    ),
-    right: Math.max(160, Math.min(600, preferences.rightWidth ?? rightDefault))
+    left: preferences.leftWidth ?? defaults.left,
+    right: preferences.rightWidth ?? defaults.right
   };
 }
-function clampPanelWidth(side, width) {
-  const max = side === "left" ? Math.floor(window.innerWidth * 0.5) : 600;
-  return Math.max(160, Math.min(max, width));
-}
 function usePanelLayout(initialState2) {
-  const [initialPanelWidths] = useState82(getInitialPanelWidths);
-  const [leftWidth, setLeftWidth] = useState82(initialPanelWidths.left);
-  const [rightWidth, setRightWidth] = useState82(initialPanelWidths.right);
-  const panelWidthsRef = useRef90(initialPanelWidths);
+  const [preferredWidths, setPreferredWidths] = useState82(getPreferredPanelWidths);
+  const [viewportWidth, setViewportWidth] = useState82(readViewportWidth);
   const [leftCollapsed, setLeftCollapsed] = useState82(
     () => readStudioUiPreferences().leftCollapsed ?? false
   );
@@ -52352,33 +52411,65 @@ function usePanelLayout(initialState2) {
   const [rightInspectorPanes, setRightInspectorPanes] = useState82(
     () => getInitialRightInspectorPanes(initialState2?.rightPanelTab)
   );
+  const [autoCollapseOverride, setAutoCollapseOverride] = useState82(NO_OVERRIDE);
+  useEffect74(() => {
+    if (typeof window === "undefined") return;
+    const handleResize = () => {
+      const width = window.innerWidth;
+      setViewportWidth(width);
+      if (!railsEngaged(width)) {
+        setAutoCollapseOverride((prev) => prev.left || prev.right ? NO_OVERRIDE : prev);
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const fitted = fitPanelWidths(viewportWidth, preferredWidths, autoCollapseOverride);
+  const leftCollapsedByWidth = fitted.autoCollapseLeft;
+  const rightCollapsedByWidth = fitted.autoCollapseRight;
+  const fittedRef = useRef90(fitted);
+  fittedRef.current = fitted;
   const panelDragRef = useRef90(null);
-  const updatePanelWidth = useCallback69((side, width) => {
-    const next = clampPanelWidth(side, width);
-    panelWidthsRef.current[side] = next;
-    if (side === "left") setLeftWidth(next);
-    else setRightWidth(next);
+  const preferredRef = useRef90(preferredWidths);
+  const setPreferred = useCallback69((side, width) => {
+    const next = Math.max(0, Math.round(width));
+    preferredRef.current = { ...preferredRef.current, [side]: next };
+    setPreferredWidths(preferredRef.current);
     return next;
   }, []);
+  const updatePanelWidth = useCallback69(
+    (side, width) => {
+      setPreferred(side, width);
+    },
+    [setPreferred]
+  );
   const commitPanelWidth = useCallback69(
     (side, width) => {
-      const next = updatePanelWidth(side, Math.round(width));
-      writeStudioUiPreferences(side === "left" ? { leftWidth: next } : { rightWidth: next });
+      const candidate = { ...preferredRef.current, [side]: Math.max(0, Math.round(width)) };
+      const settled = fitPanelWidths(readViewportWidth(), candidate)[side];
+      setPreferred(side, settled);
+      writeStudioUiPreferences(side === "left" ? { leftWidth: settled } : { rightWidth: settled });
     },
-    [updatePanelWidth]
+    [setPreferred]
   );
   const adjustPanelWidth = useCallback69(
     (side, delta) => {
-      commitPanelWidth(side, panelWidthsRef.current[side] + delta);
+      commitPanelWidth(side, preferredRef.current[side] + delta);
     },
     [commitPanelWidth]
   );
+  const effectiveLeftCollapsedRef = useRef90(false);
+  effectiveLeftCollapsedRef.current = leftCollapsed || leftCollapsedByWidth;
   const toggleLeftSidebar = useCallback69(() => {
-    setLeftCollapsed((collapsed) => {
-      writeStudioUiPreferences({ leftCollapsed: !collapsed });
-      trackStudioEvent("panel_toggle", { panel: "left_sidebar", collapsed: !collapsed });
-      return !collapsed;
-    });
+    const next = !effectiveLeftCollapsedRef.current;
+    setLeftCollapsed(next);
+    writeStudioUiPreferences({ leftCollapsed: next });
+    trackStudioEvent("panel_toggle", { panel: "left_sidebar", collapsed: next });
+    if (!next) setAutoCollapseOverride((prev) => ({ ...prev, left: true }));
+  }, []);
+  const setRightCollapsedWithOverride = useCallback69((collapsed) => {
+    setRightCollapsed(collapsed);
+    if (!collapsed) setAutoCollapseOverride((prev) => ({ ...prev, right: true }));
   }, []);
   const handlePanelResizeStart = useCallback69((side, e) => {
     e.preventDefault();
@@ -52386,7 +52477,7 @@ function usePanelLayout(initialState2) {
     panelDragRef.current = {
       side,
       startX: e.clientX,
-      startW: panelWidthsRef.current[side]
+      startW: fittedRef.current[side]
     };
   }, []);
   const handlePanelResizeMove = useCallback69(
@@ -52400,7 +52491,7 @@ function usePanelLayout(initialState2) {
   );
   const handlePanelResizeEnd = useCallback69(() => {
     const side = panelDragRef.current?.side;
-    if (side) commitPanelWidth(side, panelWidthsRef.current[side]);
+    if (side) commitPanelWidth(side, preferredRef.current[side]);
     panelDragRef.current = null;
   }, [commitPanelWidth]);
   const trackedSetRightPanelTab = useCallback69(
@@ -52426,13 +52517,22 @@ function usePanelLayout(initialState2) {
     setRightInspectorPanes({ design: pane === "design", layers: pane === "layers" });
   }, []);
   return {
-    leftWidth,
-    rightWidth,
+    leftWidth: fitted.left,
+    rightWidth: fitted.right,
     adjustPanelWidth,
+    /**
+     * User intent. Persisted to localStorage; never written by auto-collapse.
+     * Deliberately read-only outside this hook: `toggleLeftSidebar` is the only
+     * writer, so it cannot be flipped without also clearing the rail override
+     * (which would open the sidebar and then immediately rail it again).
+     */
     leftCollapsed,
-    setLeftCollapsed,
+    /** User intent. Synced into the shareable URL; never written by auto-collapse. */
     rightCollapsed,
-    setRightCollapsed,
+    setRightCollapsed: setRightCollapsedWithOverride,
+    /** What the shell actually renders: intent OR the window forcing a rail. */
+    effectiveLeftCollapsed: leftCollapsed || leftCollapsedByWidth,
+    effectiveRightCollapsed: rightCollapsed || rightCollapsedByWidth,
     rightPanelTab,
     setRightPanelTab: trackedSetRightPanelTab,
     rightInspectorPanes,
@@ -52483,13 +52583,13 @@ function createStudioWriteToken() {
 }
 
 // src/hooks/useFileTree.ts
-import { useState as useState83, useCallback as useCallback70, useEffect as useEffect74, useMemo as useMemo48 } from "react";
+import { useState as useState83, useCallback as useCallback70, useEffect as useEffect75, useMemo as useMemo48 } from "react";
 function useFileTree({ projectId, projectIdRef }) {
   const [projectDir, setProjectDir] = useState83(null);
   const [fileTree, setFileTree] = useState83([]);
   const [compositionPaths, setCompositionPaths] = useState83([]);
   const [fileTreeLoaded, setFileTreeLoaded] = useState83(false);
-  useEffect74(() => {
+  useEffect75(() => {
     if (!projectId) {
       setFileTreeLoaded(false);
       return;
@@ -53476,7 +53576,7 @@ function usePreviewPersistence({
 }
 
 // src/hooks/usePreviewDocumentVersion.ts
-import { useCallback as useCallback74, useEffect as useEffect75, useRef as useRef94, useState as useState86 } from "react";
+import { useCallback as useCallback74, useEffect as useEffect76, useRef as useRef94, useState as useState86 } from "react";
 function usePreviewDocumentVersion() {
   const [previewDocumentVersion, setPreviewDocumentVersion] = useState86(0);
   const refreshTimersRef = useRef94([]);
@@ -53489,7 +53589,7 @@ function usePreviewDocumentVersion() {
       window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 300)
     );
   }, []);
-  useEffect75(
+  useEffect76(
     () => () => {
       for (const id of refreshTimersRef.current) clearTimeout(id);
     },
@@ -55034,7 +55134,7 @@ function persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps,
 import { useCallback as useCallback102 } from "react";
 
 // src/hooks/useAskAgentModal.ts
-import { useState as useState87, useCallback as useCallback80, useRef as useRef97, useEffect as useEffect76 } from "react";
+import { useState as useState87, useCallback as useCallback80, useRef as useRef97, useEffect as useEffect77 } from "react";
 function useAskAgentModal({
   activeCompPath,
   projectDir,
@@ -55115,13 +55215,13 @@ function useAskAgentModal({
       showToast
     ]
   );
-  useEffect76(() => {
+  useEffect77(() => {
     setAgentPromptTagSnippet(void 0);
     setAgentPromptSelectionContext(void 0);
     setAgentModalAnchorPoint(null);
     setCopiedAgentPrompt(false);
   }, [domEditSelection]);
-  useEffect76(
+  useEffect77(
     () => () => {
       if (copiedAgentTimerRef.current) clearTimeout(copiedAgentTimerRef.current);
     },
@@ -55145,7 +55245,7 @@ function useAskAgentModal({
 }
 
 // src/hooks/useDomSelection.ts
-import { useState as useState88, useCallback as useCallback81, useRef as useRef98, useEffect as useEffect78 } from "react";
+import { useState as useState88, useCallback as useCallback81, useRef as useRef98, useEffect as useEffect79 } from "react";
 
 // src/utils/domEditHelpers.ts
 function domEditSelectionsTargetSame(a, b) {
@@ -55178,7 +55278,7 @@ function seedDomEditGroupWithSelection(group, selection) {
 }
 
 // src/hooks/useStudioTestHooks.ts
-import { useEffect as useEffect77 } from "react";
+import { useEffect as useEffect78 } from "react";
 
 // src/player/lib/timelinePerformanceDiagnostics.ts
 function readNonNegativeNumber(value) {
@@ -55261,7 +55361,7 @@ function useStudioTestHooks({
   buildDomSelectionFromTarget,
   applyDomSelection
 }) {
-  useEffect77(() => {
+  useEffect78(() => {
     if (!STUDIO_TEST_HOOKS_ENABLED || typeof window === "undefined") return;
     const api = {
       runtimeMode: STUDIO_RUNTIME_MODE,
@@ -55562,10 +55662,10 @@ function useDomSelection({
       previewIframeRef
     ]
   );
-  useEffect78(() => {
+  useEffect79(() => {
     updateDomEditHoverSelection(null);
   }, [activeCompPath, projectId, previewIframe, refreshKey, updateDomEditHoverSelection]);
-  useEffect78(() => {
+  useEffect79(() => {
     const previous = compositionIdentityRef.current;
     if (previous.activeCompPath === activeCompPath && previous.projectId === projectId) return;
     compositionIdentityRef.current = { activeCompPath, projectId };
@@ -55573,7 +55673,7 @@ function useDomSelection({
     setActiveGroupElementState(null);
     applyDomSelection(null, { revealPanel: false });
   }, [activeCompPath, projectId, applyDomSelection]);
-  useEffect78(() => {
+  useEffect79(() => {
     if (!domEditHoverSelection) return;
     const shouldClear = captionEditMode || domEditSelectionsTargetSame(domEditHoverSelection, domEditSelection) || domEditSelectionInGroup(domEditGroupSelections, domEditHoverSelection) || !domEditHoverSelection.element.isConnected;
     if (shouldClear) updateDomEditHoverSelection(null);
@@ -55584,7 +55684,7 @@ function useDomSelection({
     domEditGroupSelections,
     updateDomEditHoverSelection
   ]);
-  useEffect78(() => {
+  useEffect79(() => {
     if (!captionEditMode) return;
     applyDomSelection(null, { revealPanel: false });
   }, [applyDomSelection, captionEditMode]);
@@ -58330,7 +58430,7 @@ function useGsapKeyframeOps({
 }
 
 // src/hooks/useGsapPropertyDebounce.ts
-import { useCallback as useCallback92, useEffect as useEffect79, useRef as useRef103 } from "react";
+import { useCallback as useCallback92, useEffect as useEffect80, useRef as useRef103 } from "react";
 import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
 var DEBOUNCE_MS = 150;
 function mergeTweenProperties(sdkSession, animationId, edited, kind) {
@@ -58400,7 +58500,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
     },
     [flushPendingPropertyEdit]
   );
-  useEffect79(() => {
+  useEffect80(() => {
     return () => {
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
       void flushPendingPropertyEdit();
@@ -58941,10 +59041,10 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
 }
 
 // src/hooks/useDomEditWiring.ts
-import { useCallback as useCallback98, useEffect as useEffect81, useRef as useRef107 } from "react";
+import { useCallback as useCallback98, useEffect as useEffect82, useRef as useRef107 } from "react";
 
 // src/hooks/useDomEditPreviewSync.ts
-import { useEffect as useEffect80, useRef as useRef105 } from "react";
+import { useEffect as useEffect81, useRef as useRef105 } from "react";
 function useDomEditPreviewSync({
   previewIframe,
   activeCompPath,
@@ -58960,7 +59060,7 @@ function useDomEditPreviewSync({
   getSidebarTab,
   gsapCacheVersion
 }) {
-  useEffect80(() => {
+  useEffect81(() => {
     if (!previewIframe) return;
     const syncSelectionFromDocument = async () => {
       if (captionEditMode) return;
@@ -59012,7 +59112,7 @@ function useDomEditPreviewSync({
   ]);
   const openSourceRef = useRef105(openSourceForSelection);
   openSourceRef.current = openSourceForSelection;
-  useEffect80(
+  useEffect81(
     // fallow-ignore-next-line complexity
     () => {
       if (!domEditSelection || !openSourceRef.current || !getSidebarTab) return;
@@ -59449,7 +59549,7 @@ function useDomEditWiring({
     },
     [openSourceForSelection, selectSidebarTab]
   );
-  useEffect81(() => {
+  useEffect82(() => {
     if (!domEditSelection?.id) return;
     const { selectedElementId, elements, setSelectedElementId } = usePlayerStore.getState();
     const matchKey = elements.find(
@@ -59459,7 +59559,7 @@ function useDomEditWiring({
     if (key2 && key2 !== selectedElementId) setSelectedElementId(key2);
   }, [domEditSelection?.id]);
   const prevRefreshKeyRef = useRef107(refreshKey);
-  useEffect81(() => {
+  useEffect82(() => {
     if (refreshKey !== prevRefreshKeyRef.current) {
       prevRefreshKeyRef.current = refreshKey;
       bumpGsapCache();
@@ -59597,7 +59697,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
   if (!anim || isInstantHold(anim)) {
     const sel = selectorFromSelection(selection) ?? writeTargetSelector(selection);
     if (!sel) return { status: "blocked", reason: "no-selector" };
-    const sizeSet = anim ?? findSizeSetAnimation(workingAnimations, sel, selection.element);
+    const sizeSet = resizeGroup === "size" ? anim ?? findSizeSetAnimation(workingAnimations, sel, selection.element) : findSizeSetAnimation(workingAnimations, sel, selection.element);
     if (resizeGroup === "size") {
       const animatedTween = pickClosestToPlayhead(
         workingAnimations.filter((a) => !isInstantHold(a) && resolveTweenDuration(a) > 0)
@@ -59645,7 +59745,8 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     const liveScaleY = rawLiveScaleY > 0 ? rawLiveScaleY : 1;
     const newScaleX = roundTo3(size.width * liveScaleX / cssW);
     const newScaleY = roundTo3(size.height * liveScaleY / cssH);
-    nonUniformScale = Math.abs(newScaleX - newScaleY) > 0.01;
+    const uniformDrift = Math.abs(newScaleX - newScaleY) * cssH;
+    nonUniformScale = uniformDrift > 0.5;
     useScaleLonghands = nonUniformScale || tweenUsesScaleLonghands(anim);
     resizeProps = useScaleLonghands ? { scaleX: newScaleX, scaleY: newScaleY } : { scale: newScaleX };
     logResize("intercept-route", {
@@ -59671,9 +59772,9 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     };
   }
   const finalizeScaleResizeCommit = async () => {
-    if (!scaleDraftEl) return;
+    if (!scaleDraftEl) return false;
     clearStudioBoxSize(scaleDraftEl);
-    if (!scaleDraftDropPoint || !selector) return;
+    if (!scaleDraftDropPoint || !selector) return false;
     if (committedScale) {
       setElementGsapScale(scaleDraftEl, committedScale.x, committedScale.y);
     }
@@ -59687,10 +59788,10 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     setElementGsapPosition(scaleDraftEl, base2.x, base2.y);
     const post = scaleDraftEl.getBoundingClientRect();
     const residual = { x: scaleDraftDropPoint.x - post.x, y: scaleDraftDropPoint.y - post.y };
-    if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return;
+    if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return false;
     if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
       logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base: base2 });
-      return;
+      return true;
     }
     const corrected = {
       x: Math.round(base2.x + residual.x),
@@ -59718,13 +59819,14 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
         commitMutation,
         fetchAnimations: fetchFallbackAnimations
       });
-      return;
+      return true;
     }
     const existingSet = findExistingPositionWrite(currentAnimations, selector, selection.element);
     await commitStaticGsapPosition(selection, delta, base2, selector, existingSet, {
       commitMutation,
       fetchAnimations: fetchFallbackAnimations
     });
+    return true;
   };
   if (!usePlayerStore.getState().autoKeyframeEnabled) {
     if (activeKeyframePct != null) setActiveKeyframePct(null);
@@ -59737,8 +59839,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       { commitMutation, fetchAnimations: fetchFallbackAnimations },
       "Resize animation"
     );
-    await finalizeScaleResizeCommit();
-    return { status: "persisted" };
+    return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
   }
   const ct = usePlayerStore.getState().currentTime;
   const ts = resolveTweenStart(anim);
@@ -59817,8 +59918,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
         softReload: true
       }
     );
-    await finalizeScaleResizeCommit();
-    return { status: "persisted" };
+    return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
   }
   const SIZE_PROPS = /* @__PURE__ */ new Set(["width", "height"]);
   const backfillDefaults = {};
@@ -59837,8 +59937,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     },
     { label: `Resize (keyframe ${pct}%)`, softReload: true }
   );
-  await finalizeScaleResizeCommit();
-  return { status: "persisted" };
+  return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
 }
 
 // src/hooks/useAnimatedPropertyCommit.ts
@@ -60338,11 +60437,13 @@ function useGsapAwareEditing({
                 makeFetchFallback(selection)
               );
               assertGsapEditPersisted(outcome);
+              const ownsDragOffset = outcome.status === "persisted" && outcome.ownsDragOffset === true;
               logResize("intercept-handled", {
                 scaleRoute,
-                willForwardOffset: !!(offset && !scaleRoute)
+                ownsDragOffset,
+                willForwardOffset: !!(offset && !ownsDragOffset)
               });
-              if (offset && !scaleRoute) {
+              if (offset && !ownsDragOffset) {
                 const dragOutcome = await tryGsapDragIntercept(
                   selection,
                   offset,
@@ -60353,7 +60454,7 @@ function useGsapAwareEditing({
                 );
                 assertGsapEditPersisted(dragOutcome);
               }
-              logResizeSettle(selection.element, scaleRoute ? "gsap-scale" : "gsap-size");
+              logResizeSettle(selection.element, ownsDragOffset ? "gsap-scale" : "gsap-size");
               return;
             } catch (error) {
               trackGsapInteractionFailure(error, selection, "resize", "Resize animated layer");
@@ -60491,7 +60592,7 @@ function useGsapAwareEditing({
 }
 
 // src/hooks/useStudioSelectionPublisher.ts
-import { useEffect as useEffect82, useRef as useRef108 } from "react";
+import { useEffect as useEffect83, useRef as useRef108 } from "react";
 
 // src/utils/studioSelectionSnapshot.ts
 function round34(value) {
@@ -60584,7 +60685,7 @@ function useStudioSelectionPublisher({
 }) {
   const lastSelectionRefreshKeyRef = useRef108(refreshKey);
   const pendingSelectionRefreshKeyRef = useRef108(null);
-  useEffect82(() => {
+  useEffect83(() => {
     if (!projectId) return;
     const selection = domEditSelection?.element.isConnected ? buildStudioSelectionSnapshot({
       projectId,
@@ -60595,13 +60696,13 @@ function useStudioSelectionPublisher({
     void putSelection(projectId, selection, controller.signal).catch(reportSelectionPublishError);
     return () => controller.abort();
   }, [domEditSelection, projectId]);
-  useEffect82(() => {
+  useEffect83(() => {
     if (!projectId) return;
     return () => {
       void putSelection(projectId, null).catch(reportSelectionPublishError);
     };
   }, [projectId]);
-  useEffect82(() => {
+  useEffect83(() => {
     if (lastSelectionRefreshKeyRef.current === refreshKey) return;
     lastSelectionRefreshKeyRef.current = refreshKey;
     pendingSelectionRefreshKeyRef.current = domEditSelectionRef.current ? refreshKey : null;
@@ -60610,7 +60711,7 @@ function useStudioSelectionPublisher({
     void putSelection(projectId, null, controller.signal).catch(reportSelectionPublishError);
     return () => controller.abort();
   }, [domEditSelectionRef, projectId, refreshKey]);
-  useEffect82(() => {
+  useEffect83(() => {
     if (pendingSelectionRefreshKeyRef.current === null) return;
     pendingSelectionRefreshKeyRef.current = null;
     const selection = domEditSelectionRef.current;
@@ -61127,23 +61228,23 @@ function useDomEditSession({
 }
 
 // src/hooks/useSdkSelectionSync.ts
-import { useEffect as useEffect83 } from "react";
+import { useEffect as useEffect84 } 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) {
-  useEffect83(() => {
+  useEffect84(() => {
     if (!session) return;
     session.setSelection(toHfIds(domEditGroupSelections, domEditSelection));
   }, [session, domEditSelection, domEditGroupSelections]);
 }
 
 // src/hooks/useStudioSdkSessions.ts
-import { useEffect as useEffect85 } from "react";
+import { useEffect as useEffect86 } from "react";
 
 // src/hooks/useSdkSession.ts
-import { useState as useState89, useEffect as useEffect84, useCallback as useCallback103, useRef as useRef109 } from "react";
+import { useState as useState89, useEffect as useEffect85, useCallback as useCallback103, useRef as useRef109 } from "react";
 import { openComposition as openComposition3 } from "@hyperframes/sdk";
 
 // src/hooks/externalFileReloadBus.ts
@@ -61203,13 +61304,13 @@ function useSdkSession(projectId, activeCompPath) {
   const [reloadToken, setReloadToken] = useState89(0);
   const reloadTokenRef = useRef109(reloadToken);
   reloadTokenRef.current = reloadToken;
-  useEffect84(
+  useEffect85(
     () => addExternalFileReloadListener((changedPath) => {
       if (changedPath === activeCompPathRef.current) setReloadToken((token) => token + 1);
     }),
     []
   );
-  useEffect84(() => {
+  useEffect85(() => {
     const generation = ++generationRef.current;
     let cancelled = false;
     const previous = ownedSessionRef.current;
@@ -61293,7 +61394,7 @@ function useSdkSession(projectId, activeCompPath) {
 function useStudioSdkSessions(projectId, activeCompPath, masterCompPath) {
   const sdkHandle = useSdkSession(projectId, activeCompPath ?? masterCompPath);
   const editFlowSdkSession = activeCompPath ? sdkHandle.session : null;
-  useEffect85(() => {
+  useEffect86(() => {
     usePreviewVariablesStore.getState().setValues(null);
   }, [projectId, activeCompPath]);
   return { sdkHandle, editFlowSdkSession };
@@ -61401,7 +61502,7 @@ async function deleteExternalConflictSnapshot(projectId, filePath) {
 }
 
 // src/hooks/useExternalFileChangeCoordinator.ts
-import { useCallback as useCallback104, useEffect as useEffect86, useRef as useRef110, useState as useState90 } from "react";
+import { useCallback as useCallback104, useEffect as useEffect87, useRef as useRef110, useState as useState90 } from "react";
 function testHotAdapter() {
   const value = globalThis.__HF_STUDIO_HOT_TEST_ADAPTER__;
   if (!value || typeof value !== "object") return null;
@@ -61458,19 +61559,19 @@ function useExternalFileChangeCoordinator({
   const blockedRef = useRef110(blocked);
   const snapshotWriteTailRef = useRef110(Promise.resolve());
   blockedRef.current = blocked;
-  useEffect86(() => {
+  useEffect87(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
       generationRef.current += 1;
     };
   }, []);
-  useEffect86(() => {
+  useEffect87(() => {
     generationRef.current += 1;
     setBlocked(null);
     lastEventIdentityRef.current = null;
   }, [projectId, activeCompPath]);
-  useEffect86(() => {
+  useEffect87(() => {
     if (!projectId || !recoveryFilePath || !loadConflictSnapshot) return;
     const generation = ++generationRef.current;
     let cancelled = false;
@@ -61621,7 +61722,7 @@ function useExternalFileChangeCoordinator({
       reloadAcceptedGeneration
     ]
   );
-  useEffect86(() => {
+  useEffect87(() => {
     const handler = (payload) => processChange(payload);
     const adapter = testHotAdapter();
     if (adapter) {
@@ -62087,7 +62188,7 @@ function useBlockHandlers({
 }
 
 // src/hooks/useAppHotkeys.ts
-import { useCallback as useCallback107, useEffect as useEffect87, useRef as useRef112 } from "react";
+import { useCallback as useCallback107, useEffect as useEffect88, useRef as useRef112 } from "react";
 function iframeContentWindow(iframe) {
   try {
     return iframe?.contentWindow ?? null;
@@ -62380,7 +62481,7 @@ function useAppHotkeys({
     }
     if (!isEditableTarget(event.target)) dispatchPlainKey(event, key2, cb);
   }, []);
-  useEffect87(() => {
+  useEffect88(() => {
     window.addEventListener("keydown", handleAppKeyDown, true);
     return () => window.removeEventListener("keydown", handleAppKeyDown, true);
   }, [handleAppKeyDown]);
@@ -62398,7 +62499,7 @@ function useAppHotkeys({
     },
     [handleAppKeyDown]
   );
-  useEffect87(
+  useEffect88(
     () => () => {
       safeRemoveListener(
         previewHotkeyWindowRef.current,
@@ -62439,7 +62540,7 @@ function useAppHotkeys({
     },
     [handleHistoryHotkey]
   );
-  useEffect87(
+  useEffect88(
     () => () => {
       previewHistoryCleanupRef.current?.();
       previewHistoryCleanupRef.current = null;
@@ -62697,7 +62798,7 @@ function useClipboard({
 }
 
 // src/hooks/useCaptionDetection.ts
-import { useEffect as useEffect88 } from "react";
+import { useEffect as useEffect89 } from "react";
 
 // src/captions/types.ts
 var DEFAULT_STYLE = {
@@ -62949,7 +63050,7 @@ function useCaptionDetection({
   captionSync,
   setRightCollapsed
 }) {
-  useEffect88(() => {
+  useEffect89(() => {
     if (!projectId) return;
     let activating = false;
     const tryActivateCaptions = () => {
@@ -63029,7 +63130,7 @@ function useCaptionDetection({
       window.removeEventListener("message", handleMessage);
     };
   }, [activeCompPath, projectId, compIdToSrc, captionSync, previewIframeRef]);
-  useEffect88(() => {
+  useEffect89(() => {
     if (captionEditMode) {
       setRightCollapsed(!captionHasSelection);
     }
@@ -63466,7 +63567,7 @@ function useRenderClipContent({
 }
 
 // src/hooks/useConsoleErrorCapture.ts
-import { useCallback as useCallback112, useEffect as useEffect89, useRef as useRef116, useState as useState93 } from "react";
+import { useCallback as useCallback112, useEffect as useEffect90, useRef as useRef116, useState as useState93 } from "react";
 function useConsoleErrorCapture(previewIframe) {
   const [consoleErrors, setConsoleErrors] = useState93(null);
   const consoleErrorsRef = useRef116([]);
@@ -63474,7 +63575,7 @@ function useConsoleErrorCapture(previewIframe) {
     consoleErrorsRef.current = [];
     setConsoleErrors(null);
   }, []);
-  useEffect89(() => {
+  useEffect90(() => {
     if (!previewIframe) return;
     let patchedWin = null;
     let origConsoleError = null;
@@ -63663,7 +63764,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState95, useCallback as useCallback114, useEffect as useEffect90, useRef as useRef118, useMemo as useMemo54 } from "react";
+import { useState as useState95, useCallback as useCallback114, useEffect as useEffect91, useRef as useRef118, useMemo as useMemo54 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -63705,7 +63806,7 @@ function useLintModal(projectId, refreshKey) {
   );
   const handleLint = useCallback114(() => runLint(), [runLint]);
   const prevProjectIdRef = useRef118(projectId);
-  useEffect90(() => {
+  useEffect91(() => {
     if (projectId !== prevProjectIdRef.current) {
       autoLintRanRef.current = false;
       prevProjectIdRef.current = projectId;
@@ -63714,7 +63815,7 @@ function useLintModal(projectId, refreshKey) {
     autoLintRanRef.current = true;
     void runLint({ background: true });
   }, [projectId, runLint]);
-  useEffect90(() => {
+  useEffect91(() => {
     if (!projectId || !refreshKey) return;
     const timer = setTimeout(() => void runLint({ background: true }), 1e3);
     return () => clearTimeout(timer);
@@ -63737,7 +63838,7 @@ function useLintModal(projectId, refreshKey) {
   );
   const findingsByElement = useMemo54(() => groupFindings((f) => f.elementId), [groupFindings]);
   const findingsByFile = useMemo54(() => groupFindings((f) => f.file), [groupFindings]);
-  useEffect90(() => {
+  useEffect91(() => {
     usePlayerStore.getState().setLintFindingsByElement(findingsByElement);
   }, [findingsByElement]);
   return {
@@ -63835,7 +63936,7 @@ function useCompositionContentLoader({
 }
 
 // src/hooks/useStudioUrlState.ts
-import { useCallback as useCallback117, useEffect as useEffect91, useRef as useRef120, useState as useState97 } from "react";
+import { useCallback as useCallback117, useEffect as useEffect92, useRef as useRef120, useState as useState97 } from "react";
 
 // src/utils/studioUrlState.ts
 var VALID_TABS = ["layers", "design", "renders", "slideshow", "variables"];
@@ -64011,7 +64112,7 @@ function useStudioUrlState({
     },
     [activeCompPath, applyDomSelection, buildDomSelectionFromTarget, previewIframeRef]
   );
-  useEffect91(() => {
+  useEffect92(() => {
     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);
@@ -64019,7 +64120,7 @@ function useStudioUrlState({
     hydratedSeekRef.current = true;
   }, [projectId, compositionLoading, duration, initialState2.currentTime]);
   const selectionHydrationTime = selectionHydrated ? 0 : currentTime;
-  useEffect91(() => {
+  useEffect92(() => {
     if (!projectId || hydratedSelectionRef.current || compositionLoading) return;
     if (!hydratedSeekRef.current) return;
     const targetTime = initialState2.currentTime;
@@ -64046,7 +64147,7 @@ function useStudioUrlState({
     projectId,
     refreshKey
   ]);
-  useEffect91(() => {
+  useEffect92(() => {
     if (hydratedInitialTimeRef.current) return;
     const targetTime = stableTimeRef.current;
     if (targetTime == null) {
@@ -64056,7 +64157,7 @@ function useStudioUrlState({
     if (Math.abs(currentTime - targetTime) > 0.05) return;
     hydratedInitialTimeRef.current = true;
   }, [currentTime]);
-  useEffect91(() => {
+  useEffect92(() => {
     if (!activeCompPathHydrated) return;
     if (!hydratedSeekRef.current) return;
     if (!hydratedInitialTimeRef.current) return;
@@ -64067,12 +64168,12 @@ function useStudioUrlState({
     }, 200);
     return () => window.clearTimeout(handle);
   }, [activeCompPathHydrated, buildUrlState, currentTime, duration, isPlaying, projectId]);
-  useEffect91(() => {
+  useEffect92(() => {
     if (!activeCompPathHydrated) return;
     if (!projectId) return;
     replaceHash(buildStudioHash(projectId, buildUrlState()));
   }, [activeCompPathHydrated, buildUrlState, projectId]);
-  useEffect91(() => {
+  useEffect92(() => {
     if (!projectId) return;
     const onHashChange = () => {
       if (parseProjectIdFromHash(window.location.hash) !== projectId) return;
@@ -64205,9 +64306,10 @@ function PanelLayoutProvider({
     rightWidth,
     adjustPanelWidth,
     leftCollapsed,
-    setLeftCollapsed,
     rightCollapsed,
     setRightCollapsed,
+    effectiveLeftCollapsed,
+    effectiveRightCollapsed,
     rightPanelTab,
     setRightPanelTab,
     rightInspectorPanes,
@@ -64226,9 +64328,10 @@ function PanelLayoutProvider({
       rightWidth,
       adjustPanelWidth,
       leftCollapsed,
-      setLeftCollapsed,
       rightCollapsed,
       setRightCollapsed,
+      effectiveLeftCollapsed,
+      effectiveRightCollapsed,
       rightPanelTab,
       setRightPanelTab,
       rightInspectorPanes,
@@ -64244,9 +64347,10 @@ function PanelLayoutProvider({
       rightWidth,
       adjustPanelWidth,
       leftCollapsed,
-      setLeftCollapsed,
       rightCollapsed,
       setRightCollapsed,
+      effectiveLeftCollapsed,
+      effectiveRightCollapsed,
       rightPanelTab,
       setRightPanelTab,
       rightInspectorPanes,
@@ -64266,7 +64370,7 @@ import {
   createContext as createContext9,
   useCallback as useCallback119,
   useContext as useContext9,
-  useEffect as useEffect92,
+  useEffect as useEffect93,
   useMemo as useMemo57,
   useRef as useRef122,
   useState as useState99
@@ -64304,7 +64408,7 @@ function useViewModeState() {
     }
     return true;
   }, []);
-  useEffect92(() => {
+  useEffect93(() => {
     const onPopState = () => {
       const mode = readViewModeFromUrl();
       if (mode !== viewMode && !canSetViewMode(mode)) {
@@ -64586,6 +64690,9 @@ function ViewModeToggle() {
     }
   );
 }
+function shouldOpenInspector(effectiveRightCollapsed, inspectorPanelActive) {
+  return effectiveRightCollapsed || !inspectorPanelActive;
+}
 function StudioHeader({
   captureFrameHref,
   captureFrameFilename,
@@ -64597,7 +64704,7 @@ function StudioHeader({
   onExport
 }) {
   const { projectId, editHistory, handleUndo, handleRedo, renderQueue } = useStudioShellContext();
-  const { rightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
+  const { effectiveRightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
   const isRendering = renderQueue.isRendering;
   return /* @__PURE__ */ jsxs118("div", { className: "flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 flex-shrink-0", children: [
     /* @__PURE__ */ jsxs118("div", { className: "flex items-center gap-3", children: [
@@ -64707,7 +64814,7 @@ function StudioHeader({
         {
           type: "button",
           onClick: () => {
-            if (rightCollapsed || !inspectorPanelActive) {
+            if (shouldOpenInspector(effectiveRightCollapsed, inspectorPanelActive)) {
               trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
               setRightPanelTab("design");
               setRightCollapsed(false);
@@ -64766,10 +64873,10 @@ function StudioHeader({
 }
 
 // src/hooks/useGestureCommit.ts
-import { useState as useState101, useCallback as useCallback121, useRef as useRef125, useEffect as useEffect94 } from "react";
+import { useState as useState101, useCallback as useCallback121, useRef as useRef125, useEffect as useEffect95 } from "react";
 
 // src/hooks/useGestureRecording.ts
-import { useCallback as useCallback120, useEffect as useEffect93, useRef as useRef124, useState as useState100 } from "react";
+import { useCallback as useCallback120, useEffect as useEffect94, useRef as useRef124, useState as useState100 } from "react";
 function readBasePosition(element, iframeEl) {
   let baseOpacity = 1;
   let baseScale = 1;
@@ -64918,7 +65025,7 @@ function useGestureRecording() {
   const refs = useRef124(createRecordingRefs());
   const samplesRef = useRef124(refs.current.samples);
   const trailRef = useRef124(refs.current.trail);
-  useEffect93(() => {
+  useEffect94(() => {
     const r = refs.current;
     return () => {
       isRecordingRef.current = false;
@@ -65301,7 +65408,7 @@ function useGestureCommit({
   const recordingStartTimeRef = useRef125(0);
   const commitInFlightRef = useRef125(false);
   const capturedSelectionRef = useRef125(null);
-  useEffect94(() => () => clearInterval(recordingAutoStopRef.current), []);
+  useEffect95(() => () => clearInterval(recordingAutoStopRef.current), []);
   const stopAndCommitRecording = useCallback121(async () => {
     clearInterval(recordingAutoStopRef.current);
     if (commitInFlightRef.current) {
@@ -65646,7 +65753,7 @@ import {
 } from "react";
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo37, useCallback as useCallback122, useEffect as useEffect95, useRef as useRef126, useState as useState102 } from "react";
+import { memo as memo37, useCallback as useCallback122, useEffect as useEffect96, useRef as useRef126, useState as useState102 } from "react";
 import { jsx as jsx144, jsxs as jsxs120 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -65764,10 +65871,10 @@ function CompCard({
   });
   const thumbnailOffsetX = (CARD_W - stageSize.width * previewScale) / 2;
   const thumbnailOffsetY = (CARD_H - stageSize.height * previewScale) / 2;
-  useEffect95(() => {
+  useEffect96(() => {
     if (hovered) requestIframePlaybackSync(true);
   }, [hovered, requestIframePlaybackSync]);
-  useEffect95(() => {
+  useEffect96(() => {
     return () => {
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
       if (syncTimer.current) clearTimeout(syncTimer.current);
@@ -65943,7 +66050,7 @@ var CompositionsTab = memo37(function CompositionsTab2({
 });
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo38, useState as useState107, useCallback as useCallback125, useRef as useRef129, useMemo as useMemo60, useEffect as useEffect100 } from "react";
+import { memo as memo38, useState as useState107, useCallback as useCallback125, useRef as useRef129, useMemo as useMemo60, useEffect as useEffect101 } from "react";
 
 // src/components/sidebar/assetHelpers.ts
 function getCategory(path) {
@@ -65993,7 +66100,7 @@ var CATEGORY_LABELS = {
 var FILTER_ORDER = ["audio", "images", "video", "fonts"];
 
 // src/components/sidebar/AudioRow.tsx
-import { useState as useState103, useRef as useRef127, useEffect as useEffect96, useCallback as useCallback123 } from "react";
+import { useState as useState103, useRef as useRef127, useEffect as useEffect97, useCallback as useCallback123 } from "react";
 
 // src/components/sidebar/AssetContextMenu.tsx
 import { jsx as jsx145, jsxs as jsxs121 } from "react/jsx-runtime";
@@ -66168,14 +66275,14 @@ function AudioRow({
       clearPreviewAsset
     ]
   );
-  useEffect96(() => {
+  useEffect97(() => {
     return () => {
       cancelAnimationFrame(animRef.current);
       audioRef.current?.pause();
       actxRef.current?.close();
     };
   }, []);
-  useEffect96(() => {
+  useEffect97(() => {
     if (playing) {
       const barCount = 24;
       const loop = () => {
@@ -66313,7 +66420,7 @@ function AudioRow({
 }
 
 // src/components/sidebar/GlobalAssetsView.tsx
-import { useEffect as useEffect97, useMemo as useMemo59, useState as useState104 } from "react";
+import { useEffect as useEffect98, useMemo as useMemo59, useState as useState104 } from "react";
 import { jsx as jsx147, jsxs as jsxs123 } from "react/jsx-runtime";
 function globalAssetRows(records, query = "") {
   const q = query.trim().toLowerCase();
@@ -66329,7 +66436,7 @@ function globalAssetRows(records, query = "") {
 }
 function GlobalAssetsView({ searchQuery }) {
   const [records, setRecords] = useState104(null);
-  useEffect97(() => {
+  useEffect98(() => {
     let cancelled = false;
     fetch("/api/assets/global").then((r) => r.ok ? r.json() : { assets: [] }).then((d) => {
       if (!cancelled) setRecords(Array.isArray(d.assets) ? d.assets : []);
@@ -66372,10 +66479,10 @@ function GlobalAssetsView({ searchQuery }) {
 }
 
 // src/components/sidebar/AssetCard.tsx
-import { useState as useState106, useEffect as useEffect99, useRef as useRef128, useCallback as useCallback124 } from "react";
+import { useState as useState106, useEffect as useEffect100, useRef as useRef128, useCallback as useCallback124 } from "react";
 
 // src/components/ui/VideoFrameThumbnail.tsx
-import { useState as useState105, useEffect as useEffect98 } from "react";
+import { useState as useState105, useEffect as useEffect99 } from "react";
 import { jsx as jsx148 } from "react/jsx-runtime";
 function VideoFrameThumbnail({
   src,
@@ -66383,7 +66490,7 @@ function VideoFrameThumbnail({
 }) {
   const [frame, setFrame] = useState105(null);
   const [failed2, setFailed] = useState105(false);
-  useEffect98(() => {
+  useEffect99(() => {
     setFailed(false);
     const video = document.createElement("video");
     video.crossOrigin = "anonymous";
@@ -66436,7 +66543,7 @@ function openAssetContextMenu(e, setContextMenu) {
 }
 function useProbedDuration(src, skip) {
   const [duration, setDuration] = useState106(void 0);
-  useEffect99(() => {
+  useEffect100(() => {
     if (skip) return;
     let cancelled = false;
     let retryTimer;
@@ -66709,7 +66816,7 @@ var AssetsTab = memo38(function AssetsTab2({
   const [manifest, setManifest] = useState107(/* @__PURE__ */ new Map());
   const manifest404Ref = useRef129(/* @__PURE__ */ new Set());
   const assetsKey = assets.join("|");
-  useEffect100(() => {
+  useEffect101(() => {
     if (manifest404Ref.current.has(projectId)) return;
     let cancelled = false;
     fetch(`/api/projects/${projectId}/preview/.media/manifest.jsonl`).then((r) => {
@@ -67028,7 +67135,7 @@ var AssetsTab = memo38(function AssetsTab2({
 });
 
 // src/components/sidebar/BlocksTab.tsx
-import { memo as memo39, useState as useState108, useCallback as useCallback126, useRef as useRef130, useEffect as useEffect101 } from "react";
+import { memo as memo39, useState as useState108, useCallback as useCallback126, useRef as useRef130, useEffect as useEffect102 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 import { jsx as jsx151, jsxs as jsxs126 } from "react/jsx-runtime";
 var BlocksTab = memo39(function BlocksTab2({ onAddBlock, onPreviewBlock }) {
@@ -67257,7 +67364,7 @@ function BlockCard({
     setHovered(false);
     onPreview?.(null);
   }, [onPreview]);
-  useEffect101(() => {
+  useEffect102(() => {
     return () => {
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
     };
@@ -67419,7 +67526,7 @@ function PromptPreviewModal({
   const [value, setValue] = useState108(prompt);
   const [copied, setCopied] = useState108(false);
   const textareaRef = useRef130(null);
-  useEffect101(() => {
+  useEffect102(() => {
     requestAnimationFrame(() => textareaRef.current?.focus());
   }, []);
   const handleCopy = useCallback126(() => {
@@ -67508,7 +67615,11 @@ function PromptPreviewModal({
 import { Fragment as Fragment47, jsx as jsx152, jsxs as jsxs127 } from "react/jsx-runtime";
 var STORAGE_KEY = "hf-studio-sidebar-tab";
 function getPersistedTab() {
-  const stored = localStorage.getItem(STORAGE_KEY);
+  let stored = null;
+  try {
+    stored = safeLocalStorage()?.getItem(STORAGE_KEY) ?? null;
+  } catch {
+  }
   if (stored === "assets") return "assets";
   if (stored === "code") return "code";
   if (stored === "blocks") return "blocks";
@@ -67551,7 +67662,10 @@ var LeftSidebar = memo40(
     tabRef.current = tab;
     const selectTab = useCallback127((t) => {
       setTab(t);
-      localStorage.setItem(STORAGE_KEY, t);
+      try {
+        safeLocalStorage()?.setItem(STORAGE_KEY, t);
+      } catch {
+      }
       trackStudioEvent("tab_switch", { panel: "left_sidebar", tab: t });
     }, []);
     const getTab = useCallback127(() => tabRef.current, []);
@@ -67870,7 +67984,7 @@ function StudioLeftSidebar({
   onAddCompositionToTimeline
 }) {
   const {
-    leftCollapsed,
+    effectiveLeftCollapsed,
     leftWidth,
     adjustPanelWidth,
     toggleLeftSidebar,
@@ -67903,7 +68017,7 @@ function StudioLeftSidebar({
     },
     [renderQueue, waitForPendingDomEditSaves]
   );
-  if (leftCollapsed) {
+  if (effectiveLeftCollapsed) {
     return /* @__PURE__ */ jsx154("div", { className: "mr-0.5 flex w-10 flex-shrink-0 flex-col items-center rounded-lg border border-neutral-800/50 bg-neutral-950 pt-1", children: /* @__PURE__ */ jsx154(
       "button",
       {
@@ -68015,10 +68129,10 @@ function StudioLeftSidebar({
 }
 
 // src/components/StudioRightPanel.tsx
-import { useCallback as useCallback144, useEffect as useEffect108, useRef as useRef137 } from "react";
+import { useCallback as useCallback144, useEffect as useEffect109, useRef as useRef137 } from "react";
 
 // src/components/editor/LayersPanel.tsx
-import { memo as memo41, useState as useState112, useCallback as useCallback130, useEffect as useEffect102, useRef as useRef133 } from "react";
+import { memo as memo41, useState as useState112, useCallback as useCallback130, useEffect as useEffect103, useRef as useRef133 } from "react";
 
 // src/components/editor/useLayerDrag.ts
 import { useRef as useRef132, useState as useState111, useCallback as useCallback129 } from "react";
@@ -68321,10 +68435,10 @@ var LayersPanel = memo41(function LayersPanel2() {
     });
     setLayers(sortLayersByZIndex(items));
   }, [previewIframeRef, activeCompPath, isMasterView, activeGroupElement, setActiveGroupElement]);
-  useEffect102(() => {
+  useEffect103(() => {
     collectLayers();
   }, [collectLayers, refreshKey, zEditVersion]);
-  useEffect102(() => {
+  useEffect103(() => {
     const iframe = previewIframeRef.current;
     if (!iframe) return;
     const handleLoad = () => {
@@ -68334,13 +68448,13 @@ var LayersPanel = memo41(function LayersPanel2() {
     iframe.addEventListener("load", handleLoad);
     return () => iframe.removeEventListener("load", handleLoad);
   }, [previewIframeRef, collectLayers]);
-  useEffect102(() => {
+  useEffect103(() => {
     if (!compositionLoading) {
       const timer = setTimeout(collectLayers, 100);
       return () => clearTimeout(timer);
     }
   }, [compositionLoading, collectLayers]);
-  useEffect102(() => {
+  useEffect103(() => {
     const throttle = createRafThrottle(collectLayers, 100);
     const unsubscribe = liveTime.subscribe(throttle.invoke);
     return () => {
@@ -69186,7 +69300,7 @@ function ParamControl({
 }
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo46, useState as useState116, useRef as useRef134, useEffect as useEffect103, useLayoutEffect as useLayoutEffect8, useId as useId6 } from "react";
+import { memo as memo46, useState as useState116, useRef as useRef134, useEffect as useEffect104, useLayoutEffect as useLayoutEffect8, useId as useId6 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { CANVAS_DIMENSIONS } from "@hyperframes/parsers";
 
@@ -69482,7 +69596,7 @@ function FormatInfoTooltip({ format }) {
   const hide = () => {
     timeoutRef.current = setTimeout(() => setOpen(false), 120);
   };
-  useEffect103(() => () => clearTimeout(timeoutRef.current), []);
+  useEffect104(() => () => clearTimeout(timeoutRef.current), []);
   useLayoutEffect8(() => {
     if (!open) return;
     const el = triggerRef.current;
@@ -69496,7 +69610,7 @@ function FormatInfoTooltip({ format }) {
       )
     );
   }, [open]);
-  useEffect103(() => {
+  useEffect104(() => {
     if (!open) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -69708,7 +69822,7 @@ var RenderQueue = memo46(function RenderQueue2({
   compositionDimensions
 }) {
   const listRef = useRef134(null);
-  useEffect103(() => {
+  useEffect104(() => {
     if (listRef.current) {
       listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
     }
@@ -69816,7 +69930,7 @@ var RenderQueue = memo46(function RenderQueue2({
 });
 
 // src/components/panels/SlideshowPanel.tsx
-import { useState as useState118, useEffect as useEffect104, useCallback as useCallback136, useRef as useRef135 } from "react";
+import { useState as useState118, useEffect as useEffect105, useCallback as useCallback136, useRef as useRef135 } from "react";
 import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
@@ -70455,7 +70569,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   const { domEditSelection } = useDomEditSelectionContext();
   const manifestRef = useRef135(manifest);
   const notesCtrlRef = useRef135(makeSlideshowNotesController());
-  useEffect104(() => {
+  useEffect105(() => {
     if (!compHtml) {
       notesCtrlRef.current.flush();
       setManifest({ slides: [] });
@@ -70489,7 +70603,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [onPersistNotes]
   );
-  useEffect104(() => {
+  useEffect105(() => {
     const ctrl = notesCtrlRef.current;
     return () => {
       ctrl.flush();
@@ -70709,7 +70823,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo47, useCallback as useCallback140, useEffect as useEffect106, useMemo as useMemo61, useState as useState122 } from "react";
+import { memo as memo47, useCallback as useCallback140, useEffect as useEffect107, useMemo as useMemo61, useState as useState122 } from "react";
 
 // src/hooks/useVariablesPersist.ts
 import { useCallback as useCallback137 } from "react";
@@ -70763,7 +70877,7 @@ function useVariablesPersist({
 import { useCallback as useCallback139, useState as useState121 } from "react";
 
 // src/hooks/useProjectCompositionVariables.ts
-import { useCallback as useCallback138, useEffect as useEffect105, useState as useState119 } from "react";
+import { useCallback as useCallback138, useEffect as useEffect106, useState as useState119 } from "react";
 import { openComposition as openComposition4 } from "@hyperframes/sdk";
 async function readGroup(path, readProjectFile) {
   let content;
@@ -70787,7 +70901,7 @@ async function readGroup(path, readProjectFile) {
 }
 function useProjectCompositionVariables(fileTree, excludePath, readProjectFile, refreshKey) {
   const [groups, setGroups] = useState119([]);
-  useEffect105(() => {
+  useEffect106(() => {
     let cancelled = false;
     const htmlFiles = fileTree.filter((p) => p.endsWith(".html") && p !== excludePath);
     void (async () => {
@@ -71397,7 +71511,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
   const previewValues = usePreviewVariablesStore((s) => s.values);
   const setPreviewValues = usePreviewVariablesStore((s) => s.setValues);
   const [revision, setRevision] = useState122(0);
-  useEffect106(() => {
+  useEffect107(() => {
     if (!sdkSession) return;
     return sdkSession.on("change", () => setRevision((r) => r + 1));
   }, [sdkSession]);
@@ -71767,7 +71881,7 @@ function useSlideshowPersist({
 }
 
 // src/hooks/useSlideshowTabState.ts
-import { useEffect as useEffect107, useMemo as useMemo62 } from "react";
+import { useEffect as useEffect108, useMemo as useMemo62 } from "react";
 import { SLIDESHOW_ISLAND_TYPE as SLIDESHOW_ISLAND_TYPE2, slideshowIslandRegex as slideshowIslandRegex2 } from "@hyperframes/core/slideshow";
 function useSlideshowTabState(params) {
   const { editingFileContent, previewIframeRef, refreshKey, rightPanelTab, setRightPanelTab } = params;
@@ -71788,7 +71902,7 @@ function useSlideshowTabState(params) {
       return [];
     }
   }, [previewIframeRef, rightPanelTab, refreshKey]);
-  useEffect107(() => {
+  useEffect108(() => {
     if (rightPanelTab === "slideshow" && !isSlideshowComposition) {
       setRightPanelTab("renders");
     }
@@ -72226,7 +72340,7 @@ function StudioRightPanel({
     handleInspectorSplitResizeEnd
   } = useInspectorSplitResize();
   const backgroundRemovalAbortRef = useRef137(null);
-  useEffect108(
+  useEffect109(
     () => () => {
       backgroundRemovalAbortRef.current?.abort();
     },
@@ -72594,7 +72708,7 @@ function StudioRightPanel({
 }
 
 // src/components/TimelineToolbar.tsx
-import { useEffect as useEffect110, useRef as useRef138 } from "react";
+import { useEffect as useEffect111, useRef as useRef138 } from "react";
 import { Image as Image2, Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
 
 // src/hooks/useEnableKeyframes.ts
@@ -72933,7 +73047,7 @@ function useEnableKeyframes(sessionRef) {
 }
 
 // src/hooks/useKeyframeKeyboard.ts
-import { useEffect as useEffect109, useCallback as useCallback146 } from "react";
+import { useEffect as useEffect110, useCallback as useCallback146 } from "react";
 function isTextInput(el) {
   if (!el) return false;
   const tag = el.tagName;
@@ -73001,7 +73115,7 @@ function useKeyframeKeyboard({
       onNudgeKeyframe
     ]
   );
-  useEffect109(() => {
+  useEffect110(() => {
     if (!enabled2) return;
     window.addEventListener("keydown", handler, { capture: true });
     return () => window.removeEventListener("keydown", handler, { capture: true });
@@ -73089,7 +73203,7 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
     enabled: Boolean(onToggleKeyframe),
     onAddKeyframe: onToggleKeyframe
   });
-  useEffect110(() => {
+  useEffect111(() => {
     const onKeyDown = (e) => {
       if (e.key !== "n" && e.key !== "N") return;
       if (e.metaKey || e.ctrlKey || e.altKey) return;
@@ -73367,7 +73481,7 @@ import { useState as useState131 } from "react";
 import { Copy as Copy2, Check as Check2 } from "@phosphor-icons/react";
 
 // src/hooks/useStoryboard.ts
-import { useCallback as useCallback147, useEffect as useEffect111, useRef as useRef139, useState as useState124 } from "react";
+import { useCallback as useCallback147, useEffect as useEffect112, useRef as useRef139, useState as useState124 } from "react";
 function useStoryboard(projectId) {
   const [data, setData] = useState124(null);
   const [loading, setLoading] = useState124(true);
@@ -73376,7 +73490,7 @@ function useStoryboard(projectId) {
   const hasDataRef = useRef139(false);
   const lastProjectRef = useRef139(null);
   const reload = useCallback147(() => setReloadKey((k) => k + 1), []);
-  useEffect111(() => {
+  useEffect112(() => {
     if (!projectId) return;
     let cancelled = false;
     if (lastProjectRef.current !== projectId) {
@@ -73408,7 +73522,7 @@ function useStoryboard(projectId) {
 }
 
 // src/hooks/useProjectSignaturePoll.ts
-import { useEffect as useEffect112, useRef as useRef140 } from "react";
+import { useEffect as useEffect113, useRef as useRef140 } from "react";
 var POLL_INTERVAL_MS = 2e3;
 async function fetchProjectSignature(projectId) {
   try {
@@ -73425,7 +73539,7 @@ function useProjectSignaturePoll(projectId, currentSignature, onChange) {
   const onChangeRef = useRef140(onChange);
   signatureRef.current = currentSignature;
   onChangeRef.current = onChange;
-  useEffect112(() => {
+  useEffect113(() => {
     if (!projectId) return;
     let disposed = false;
     let inFlight = false;
@@ -73452,7 +73566,7 @@ function useProjectSignaturePoll(projectId, currentSignature, onChange) {
 }
 
 // src/components/storyboard/StoryboardLoaded.tsx
-import { useEffect as useEffect118, useMemo as useMemo65, useState as useState130 } from "react";
+import { useEffect as useEffect119, useMemo as useMemo65, useState as useState130 } from "react";
 
 // src/components/storyboard/StoryboardDirection.tsx
 import { jsx as jsx172, jsxs as jsxs144 } from "react/jsx-runtime";
@@ -73475,7 +73589,7 @@ function StoryboardDirection({ globals, frameCount }) {
 }
 
 // src/components/storyboard/FramePoster.tsx
-import { useEffect as useEffect113, useState as useState125 } from "react";
+import { useEffect as useEffect114, useState as useState125 } from "react";
 import { jsx as jsx173 } from "react/jsx-runtime";
 function FramePoster({
   projectId,
@@ -73486,7 +73600,7 @@ function FramePoster({
   posterVersion
 }) {
   const [failed2, setFailed] = useState125(false);
-  useEffect113(() => setFailed(false), [src, seconds, posterVersion]);
+  useEffect114(() => setFailed(false), [src, seconds, posterVersion]);
   if (failed2) {
     return /* @__PURE__ */ jsx173("div", { className: "flex h-full w-full items-center justify-center text-[11px] text-neutral-600", children: "Preview unavailable" });
   }
@@ -73685,7 +73799,7 @@ function StoryboardScriptPanel({ script }) {
 }
 
 // src/components/storyboard/StoryboardSourceEditor.tsx
-import { useCallback as useCallback148, useEffect as useEffect114, useMemo as useMemo63, useRef as useRef141, useState as useState126 } from "react";
+import { useCallback as useCallback148, useEffect as useEffect115, useMemo as useMemo63, useRef as useRef141, useState as useState126 } from "react";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { jsx as jsx177, jsxs as jsxs147 } from "react/jsx-runtime";
@@ -73697,7 +73811,7 @@ function useEditableFile(path, onSaved) {
   const [loading, setLoading] = useState126(true);
   const [saving, setSaving] = useState126(false);
   const [error, setError] = useState126(null);
-  useEffect114(() => {
+  useEffect115(() => {
     if (!path) return;
     let cancelled = false;
     setLoading(true);
@@ -73735,7 +73849,7 @@ function hardenLinks(node) {
 function useMarkdownPreview(source) {
   const [debounced, setDebounced] = useState126(source);
   const primed = useRef141(false);
-  useEffect114(() => {
+  useEffect115(() => {
     if (!primed.current && source !== "") {
       primed.current = true;
       setDebounced(source);
@@ -73767,8 +73881,8 @@ function StoryboardSourceEditor({
   const activePath = files.some((f) => f.path === selected) ? selected : files[0]?.path ?? "";
   const file = useEditableFile(activePath, onSaved);
   const previewHtml = useMarkdownPreview(file.content);
-  useEffect114(() => onDirtyChange?.(file.dirty), [onDirtyChange, file.dirty]);
-  useEffect114(() => {
+  useEffect115(() => onDirtyChange?.(file.dirty), [onDirtyChange, file.dirty]);
+  useEffect115(() => {
     if (!file.dirty) return;
     const onBeforeUnload = (event) => {
       event.preventDefault();
@@ -73840,11 +73954,11 @@ function StoryboardSourceEditor({
 }
 
 // src/components/storyboard/StoryboardFrameFocus.tsx
-import { useCallback as useCallback149, useEffect as useEffect116, useState as useState128 } from "react";
+import { useCallback as useCallback149, useEffect as useEffect117, useState as useState128 } from "react";
 import { setFrameVoiceover } from "@hyperframes/core/storyboard";
 
 // src/components/storyboard/AgentChatMessageButton.tsx
-import { useEffect as useEffect115, useState as useState127 } from "react";
+import { useEffect as useEffect116, useState as useState127 } from "react";
 import { jsx as jsx178 } from "react/jsx-runtime";
 var APPLY_STORYBOARD_FEEDBACK_MESSAGE = "Read the storyboard feedback I saved in .hyperframes/frame-comments.json and revise the frames.";
 function AgentChatMessageButton({
@@ -73853,7 +73967,7 @@ function AgentChatMessageButton({
   onCopied
 }) {
   const [copyState, setCopyState] = useState127("idle");
-  useEffect115(() => {
+  useEffect116(() => {
     if (copyState !== "copied") return;
     const timeout = window.setTimeout(() => setCopyState("again"), 3e3);
     return () => window.clearTimeout(timeout);
@@ -73926,7 +74040,7 @@ function StoryboardFrameFocus({
     const saved = await applyEdit((src) => setFrameVoiceover(src, frame.index, draft));
     if (saved) setSavedVoiceover(draft);
   }, [applyEdit, frame.index, draft]);
-  useEffect116(() => {
+  useEffect117(() => {
     if (!dirty) return;
     const onBeforeUnload = (e) => {
       e.preventDefault();
@@ -73938,14 +74052,14 @@ function StoryboardFrameFocus({
     () => !dirty || window.confirm("Discard unsaved voiceover changes?"),
     [dirty]
   );
-  useEffect116(() => registerViewModeGuard(confirmLeave), [confirmLeave, registerViewModeGuard]);
+  useEffect117(() => registerViewModeGuard(confirmLeave), [confirmLeave, registerViewModeGuard]);
   const handleBack = () => {
     if (confirmLeave()) onBack();
   };
   const handleNavigate = (delta) => {
     if (confirmLeave()) onNavigate(delta);
   };
-  useEffect116(() => {
+  useEffect117(() => {
     const onKey = (e) => {
       const el = document.activeElement;
       if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) return;
@@ -74417,7 +74531,7 @@ function progressLabel(summary) {
 }
 
 // src/components/storyboard/useFrameComments.ts
-import { useCallback as useCallback150, useEffect as useEffect117, useMemo as useMemo64, useState as useState129 } from "react";
+import { useCallback as useCallback150, useEffect as useEffect118, useMemo as useMemo64, useState as useState129 } from "react";
 
 // src/components/storyboard/frameComments.ts
 var FRAME_COMMENTS_PATH = ".hyperframes/frame-comments.json";
@@ -74490,7 +74604,7 @@ function useFrameComments(frames) {
     } catch {
     }
   }, [readOptionalProjectFile]);
-  useEffect117(() => {
+  useEffect118(() => {
     void refreshPending();
     const onFocus = () => void refreshPending();
     window.addEventListener("focus", onFocus);
@@ -74551,10 +74665,10 @@ function StoryboardLoaded({
   const [feedbackMessageCopied, setFeedbackMessageCopied] = useState130(false);
   const comments = useFrameComments(data.frames);
   const { refreshPending } = comments;
-  useEffect118(() => {
+  useEffect119(() => {
     void refreshPending();
   }, [data.signature, refreshPending]);
-  useEffect118(() => {
+  useEffect119(() => {
     if (comments.draftCount > 0) setFeedbackMessageCopied(false);
   }, [comments.draftCount]);
   const saveFeedbackAndCopyMessage = async () => {
@@ -74903,7 +75017,7 @@ function StudioSplash({ waiting }) {
 }
 
 // src/hooks/useServerConnection.ts
-import { useEffect as useEffect119, useState as useState132 } from "react";
+import { useEffect as useEffect120, useState as useState132 } from "react";
 function useServerConnection() {
   const [projectId, setProjectId] = useState132(null);
   const [resolving, setResolving] = useState132(true);
@@ -74944,7 +75058,7 @@ function useServerConnection() {
       if (retryTimer !== null) clearTimeout(retryTimer);
     };
   });
-  useEffect119(() => {
+  useEffect120(() => {
     const onHashChange = () => {
       const next = parseProjectIdFromHash(window.location.hash);
       if (next && next !== projectId) setProjectId(next);
@@ -74956,9 +75070,9 @@ function useServerConnection() {
 }
 
 // src/hooks/useStudioSessionStart.ts
-import { useEffect as useEffect120 } from "react";
+import { useEffect as useEffect121 } from "react";
 function useStudioSessionStart(projectId, resolving, waitingForServer) {
-  useEffect120(() => {
+  useEffect121(() => {
     if (resolving || waitingForServer || hasFiredSessionStart()) return;
     markSessionStartFired();
     trackStudioSessionStart({ has_project: projectId != null });
@@ -75039,7 +75153,7 @@ function StudioApp() {
     activeCompPath,
     masterCompPath
   );
-  useEffect121(() => {
+  useEffect122(() => {
     if (activeCompPathHydrated) return;
     if (!fileManager.fileTreeLoaded) return;
     const nextCompPath = normalizeStudioCompositionPath(
@@ -75313,7 +75427,7 @@ function StudioApp() {
   } = useInspectorState(
     panelLayout.rightPanelTab,
     panelLayout.rightInspectorPanes,
-    panelLayout.rightCollapsed,
+    panelLayout.effectiveRightCollapsed,
     isPlaying,
     domEditSession.domEditSelection,
     gestureState === "recording"
@@ -75429,7 +75543,7 @@ function StudioApp() {
                 onAddCompositionToTimeline: handleAddCompositionAtPlayhead
               }
             ),
-            right: panelLayout.rightCollapsed ? null : /* @__PURE__ */ jsx184(
+            right: panelLayout.effectiveRightCollapsed ? null : /* @__PURE__ */ jsx184(
               StudioRightPanel,
               {
                 designPanelActive,