hyperframes 0.8.97 → 0.8.98

package/dist/studio/index.js

@@ -12872,6 +12872,7 @@ function useTimelineProviderState({
   onPasteClip,
   onDuplicateClip,
   canPasteClip,
+  clipMenuItems,
   theme: themeOverrides,
   showAudioEffects = true,
   showKeyframes = true,
@@ -13170,6 +13171,7 @@ function useTimelineProviderState({
     onPasteClip,
     onDuplicateClip,
     canPasteClip,
+    clipMenuItems,
     onSelectElement,
     selectedElementId,
     setRangeSelectionRef,
@@ -21575,7 +21577,7 @@ var TimelineCanvas = memo13(function TimelineCanvas2() {
 });
 
 // src/player/components/TimelineOverlays.tsx
-import { useEffect as useEffect30 } from "react";
+import { useEffect as useEffect30, useMemo as useMemo32 } from "react";
 
 // src/player/components/EditModal.tsx
 import { useState as useState24, useCallback as useCallback33, useMemo as useMemo31, useRef as useRef40 } from "react";
@@ -21831,7 +21833,9 @@ function useMenuKeyboardNav(menuRef) {
     menu.addEventListener("keydown", onKeyDown);
     return () => {
       menu.removeEventListener("keydown", onKeyDown);
-      if (previouslyFocused instanceof HTMLElement && document.contains(previouslyFocused)) {
+      const active = document.activeElement;
+      const focusLeftWithMenu = active === null || active === document.body || menu.contains(active);
+      if (focusLeftWithMenu && previouslyFocused instanceof HTMLElement && document.contains(previouslyFocused)) {
         previouslyFocused.focus();
       }
     };
@@ -21967,6 +21971,36 @@ function KeyframeDiamondContextMenu({
 import { memo as memo14 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { Fragment as Fragment18, jsx as jsx58, jsxs as jsxs38 } from "react/jsx-runtime";
+var itemClass = (enabled) => `w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-none${enabled ? " focus-visible:bg-neutral-800 text-neutral-300 hover:bg-neutral-800 cursor-pointer" : " text-neutral-600 cursor-not-allowed"}`;
+function HostItems({
+  items,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxs38(Fragment18, { children: [
+    items.map((item) => /* @__PURE__ */ jsxs38(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        className: itemClass(!item.disabled),
+        disabled: item.disabled,
+        onClick: () => {
+          onClose();
+          item.onSelect();
+        },
+        children: [
+          /* @__PURE__ */ jsxs38("span", { className: "flex items-center gap-2", children: [
+            item.icon,
+            item.label
+          ] }),
+          item.shortcut && /* @__PURE__ */ jsx58("span", { className: "text-neutral-500 text-[10px] ml-3", children: item.shortcut })
+        ]
+      },
+      item.id
+    )),
+    /* @__PURE__ */ jsx58("div", { className: "my-1 border-t border-neutral-700/60" })
+  ] });
+}
 var ClipContextMenu = memo14(function ClipContextMenu2({
   x,
   y,
@@ -21978,7 +22012,8 @@ var ClipContextMenu = memo14(function ClipContextMenu2({
   onCopy,
   onPaste,
   onDuplicate,
-  canPaste
+  canPaste,
+  hostItems = []
 }) {
   const menuRef = useContextMenuDismiss(onClose);
   useMenuKeyboardNav(menuRef);
@@ -21990,14 +22025,14 @@ var ClipContextMenu = memo14(function ClipContextMenu2({
   const canSplit = isSplittable && currentTime > element.start && currentTime < element.start + element.duration;
   const splitLabel = !isSplittable ? null : canSplit ? `Split at ${currentTime.toFixed(2)}s` : "Split (move playhead inside clip)";
   const clipboardItemCount = [onCopy, onPaste, onDuplicate].filter(Boolean).length;
-  const rowCount = (splitLabel ? 1 : 0) + clipboardItemCount + 1;
-  const dividerCount = (splitLabel ? 1 : 0) + (clipboardItemCount > 0 ? 1 : 0);
+  const hostRows = hostItems.length;
+  const rowCount = hostRows + (splitLabel ? 1 : 0) + clipboardItemCount + 1;
+  const dividerCount = (hostRows > 0 ? 1 : 0) + (splitLabel ? 1 : 0) + (clipboardItemCount > 0 ? 1 : 0);
   const menuWidth = 200;
   const menuHeight = rowCount * 30 + dividerCount * 9 + 8;
   const overflowY = y + menuHeight - window.innerHeight;
   const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
   const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
-  const itemClass = (enabled) => `w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-none${enabled ? " focus-visible:bg-neutral-800 text-neutral-300 hover:bg-neutral-800 cursor-pointer" : " text-neutral-600 cursor-not-allowed"}`;
   return createPortal4(
     /* @__PURE__ */ jsxs38(
       "div",
@@ -22008,6 +22043,7 @@ var ClipContextMenu = memo14(function ClipContextMenu2({
         className: "fixed z-200 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]",
         style: { left: adjustedX, top: adjustedY },
         children: [
+          hostRows > 0 && /* @__PURE__ */ jsx58(HostItems, { items: hostItems, onClose }),
           splitLabel && /* @__PURE__ */ jsxs38(Fragment18, { children: [
             /* @__PURE__ */ jsxs38(
               "button",
@@ -22128,7 +22164,7 @@ var TrackGapContextMenu = memo15(function TrackGapContextMenu2({
   const overflowY = y + menuHeight - window.innerHeight;
   const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
   const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
-  const itemClass = (enabled) => `w-full flex items-center justify-between px-3 py-1.5 text-xs text-left ${enabled ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer" : "text-neutral-600 cursor-not-allowed"}`;
+  const itemClass2 = (enabled) => `w-full flex items-center justify-between px-3 py-1.5 text-xs text-left ${enabled ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer" : "text-neutral-600 cursor-not-allowed"}`;
   const closeGapTitle = canCloseGap ? void 0 : gapWidth == null ? "No gap here" : "A clip on this track can't be moved";
   const closeAllTitle = canCloseAllGaps ? void 0 : hasAnyGaps ? "A clip on this track can't be moved" : "No gaps on this track";
   return createPortal5(
@@ -22144,7 +22180,7 @@ var TrackGapContextMenu = memo15(function TrackGapContextMenu2({
             "button",
             {
               type: "button",
-              className: itemClass(canCloseGap),
+              className: itemClass2(canCloseGap),
               disabled: !canCloseGap,
               title: closeGapTitle,
               onPointerEnter: () => onHoverAction(canCloseGap ? "close-gap" : null),
@@ -22166,7 +22202,7 @@ var TrackGapContextMenu = memo15(function TrackGapContextMenu2({
             "button",
             {
               type: "button",
-              className: itemClass(canCloseAllGaps),
+              className: itemClass2(canCloseAllGaps),
               disabled: !canCloseAllGaps,
               title: closeAllTitle,
               onPointerEnter: () => onHoverAction(canCloseAllGaps ? "close-all" : null),
@@ -22330,6 +22366,11 @@ function TimelineClipMenuOverlay() {
   useEffect30(() => {
     if (clipContextMenu && !element) setClipContextMenu(null);
   }, [element, clipContextMenu, setClipContextMenu]);
+  const { clipMenuItems } = overlay;
+  const hostItems = useMemo32(
+    () => element ? clipMenuItems?.(element) : void 0,
+    [clipMenuItems, element]
+  );
   if (!clipContextMenu || !element) return null;
   const readCurrentElement = () => resolveTimelineContextElement({
     capturedElement: element,
@@ -22360,7 +22401,8 @@ function TimelineClipMenuOverlay() {
       onCopy: overlay.onCopyClip,
       onPaste: overlay.onPasteClip,
       onDuplicate: overlay.onDuplicateClip,
-      canPaste: overlay.canPasteClip?.() ?? false
+      canPaste: overlay.canPasteClip?.() ?? false,
+      hostItems
     }
   );
 }
@@ -22570,7 +22612,7 @@ var Timeline = Object.assign(TimelineComposed, {
 });
 
 // src/player/components/VideoThumbnail.tsx
-import { memo as memo17, useMemo as useMemo32 } from "react";
+import { memo as memo17, useMemo as useMemo33 } from "react";
 
 // src/hooks/useThumbnailLease.ts
 import { useCallback as useCallback34, useLayoutEffect as useLayoutEffect7, useRef as useRef41, useSyncExternalStore as useSyncExternalStore3 } from "react";
@@ -23260,7 +23302,7 @@ var VideoThumbnail = memo17(function VideoThumbnail2({
   const requestFrameCount = quantizeThumbnailFrameCount(
     computeThumbnailStrip(container.width, 16 / 9, container.height).frameCount
   );
-  const requestProps = useMemo32(
+  const requestProps = useMemo33(
     () => ({
       videoSrc,
       sourceStart,
@@ -23272,11 +23314,11 @@ var VideoThumbnail = memo17(function VideoThumbnail2({
     }),
     [duration, priority, projectId, sessionEpoch, sourceRangeDuration, sourceStart, videoSrc]
   );
-  const posterRequest = useMemo32(
+  const posterRequest = useMemo33(
     () => createVideoThumbnailRequest(requestProps, 1, false),
     [requestProps]
   );
-  const richRequest = useMemo32(
+  const richRequest = useMemo33(
     () => createVideoThumbnailRequest(requestProps, requestFrameCount, true),
     [requestFrameCount, requestProps]
   );
@@ -23340,7 +23382,7 @@ var VideoThumbnail = memo17(function VideoThumbnail2({
 });
 
 // src/player/components/CompositionThumbnail.tsx
-import { memo as memo18, useMemo as useMemo33 } from "react";
+import { memo as memo18, useMemo as useMemo34 } from "react";
 import { jsx as jsx66, jsxs as jsxs45 } from "react/jsx-runtime";
 var THUMBNAIL_URL_VERSION = "v3";
 var THUMBNAIL_SEEK_TIME_SECONDS = 3;
@@ -23419,7 +23461,7 @@ var CompositionThumbnail = memo18(function CompositionThumbnail2({
     origin: window.location.origin,
     contentRevision
   });
-  const request = useMemo33(
+  const request = useMemo34(
     () => ({
       key: createThumbnailKey({ kind: "composition", url }),
       projectId,
@@ -26406,7 +26448,7 @@ function useTimelinePlayer({
 }
 
 // src/player/hooks/usePlayerHandle.ts
-import { useCallback as useCallback43, useMemo as useMemo34 } from "react";
+import { useCallback as useCallback43, useMemo as useMemo35 } from "react";
 
 // src/components/nle/NLEContext.tsx
 import { useContext as useContext7, useState as useState29, useCallback as useCallback42, useRef as useRef48, useEffect as useEffect33 } from "react";
@@ -26784,7 +26826,7 @@ function usePlayerHandle() {
   const subscribeTime = useCallback43((listener2) => {
     return liveTime.subscribe(listener2);
   }, []);
-  const handleElements = useMemo34(() => elements.map(toHandleElement), [elements]);
+  const handleElements = useMemo35(() => elements.map(toHandleElement), [elements]);
   return {
     ready,
     playing,
@@ -27697,7 +27739,7 @@ function CompositionBreadcrumb({ stack, onNavigate }) {
 import { useCallback as useCallback48, useRef as useRef53, useState as useState32 } from "react";
 
 // src/components/editor/previewReadOnlyContext.tsx
-import { useContext as useContext8, useMemo as useMemo35 } from "react";
+import { useContext as useContext8, useMemo as useMemo36 } from "react";
 import { jsx as jsx72 } from "react/jsx-runtime";
 var DEFAULT_REASON = "Preview is read-only.";
 var PreviewReadOnlyContext = createStableContext("PreviewReadOnlyContext", {
@@ -27709,7 +27751,7 @@ function PreviewReadOnlyProvider({
   reason,
   children
 }) {
-  const value = useMemo35(() => ({ readOnly, reason: reason ?? DEFAULT_REASON }), [readOnly, reason]);
+  const value = useMemo36(() => ({ readOnly, reason: reason ?? DEFAULT_REASON }), [readOnly, reason]);
   return /* @__PURE__ */ jsx72(PreviewReadOnlyContext, { value, children });
 }
 function usePreviewReadOnly() {
@@ -28457,7 +28499,7 @@ import {
   memo as memo21,
   useCallback as useCallback51,
   useEffect as useEffect38,
-  useMemo as useMemo37,
+  useMemo as useMemo38,
   useRef as useRef58
 } from "react";
 import {
@@ -28480,7 +28522,7 @@ var useAudioMetersVisible = create5((set) => ({
 }));
 
 // src/utils/audioMeterMath.ts
-import { useMemo as useMemo36 } from "react";
+import { useMemo as useMemo37 } from "react";
 import { audioDbToGain, audioGainToDb } from "@hyperframes/core/audio-gain";
 var METER_DB_MARKS = [0, -3, -6, -12, -24];
 var FLOOR_DB = -60;
@@ -28520,7 +28562,7 @@ function hasProjectAudio(elements) {
 }
 function useProjectHasAudio() {
   const elements = usePlayerStore((s) => s.elements);
-  return useMemo36(() => hasProjectAudio(elements), [elements]);
+  return useMemo37(() => hasProjectAudio(elements), [elements]);
 }
 
 // src/components/nle/AudioMeterStrip.tsx
@@ -28531,7 +28573,7 @@ var RED_AT = markFraction(-3);
 function useStrips() {
   const elements = usePlayerStore((s) => s.elements);
   const masterVolume = usePlayerStore((s) => s.audioVolume);
-  return useMemo37(() => {
+  return useMemo38(() => {
     const labels = /* @__PURE__ */ new Map();
     const volumes = /* @__PURE__ */ new Map();
     for (const el of elements) {
@@ -28878,7 +28920,8 @@ function TimelinePane({
   onCopyClip,
   onPasteClip,
   onDuplicateClip,
-  canPasteClip
+  canPasteClip,
+  clipMenuItems
 }) {
   const {
     seek,
@@ -28933,7 +28976,8 @@ function TimelinePane({
                     onCopyClip,
                     onPasteClip,
                     onDuplicateClip,
-                    canPasteClip
+                    canPasteClip,
+                    clipMenuItems
                   }
                 ) }),
                 /* @__PURE__ */ jsx78(AudioMeterStrip, {})
@@ -29594,7 +29638,7 @@ var CaptionOverlay = memo22(function CaptionOverlay2({ iframeRef }) {
 });
 
 // src/components/editor/DomEditOverlay.tsx
-import { memo as memo25, useEffect as useEffect49, useMemo as useMemo38, useRef as useRef69 } from "react";
+import { memo as memo25, useEffect as useEffect49, useMemo as useMemo39, useRef as useRef69 } from "react";
 
 // src/components/editor/marqueeCommit.ts
 import { useCallback as useCallback53, useEffect as useEffect40, useRef as useRef60, useState as useState36 } from "react";
@@ -34600,7 +34644,6 @@ function DomEditGroupChrome({
   allowBodyDrag,
   groupCanMove,
   gestures,
-  onBoxMouseDown,
   onBoxClick
 }) {
   const canManipulate = allowCanvasMovement && !usePreviewReadOnly();
@@ -34635,7 +34678,6 @@ function DomEditGroupChrome({
           if (!canManipulate || !allowBodyDrag || e.shiftKey && !groupCanMove) return;
           gestures.startGroupDrag(e);
         },
-        onMouseDown: onBoxMouseDown,
         onClick: onBoxClick
       }
     )
@@ -34654,7 +34696,6 @@ function DomEditSelectionChrome({
   groupSelectionCount,
   gestures,
   onStyleCommit,
-  onBoxMouseDown,
   onBoxClick,
   inlineText
 }) {
@@ -34709,7 +34750,6 @@ function DomEditSelectionChrome({
                 }
                 if (!e.shiftKey) gestures.startBlockedMove(e, selection);
               },
-              onMouseDown: onBoxMouseDown,
               onClick: onBoxClick,
               children: cropOutlineInsetPx && /* @__PURE__ */ jsx86(
                 "div",
@@ -36163,8 +36203,6 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
   const groupGestureRef = useRef69(null);
   const blockedMoveRef = useRef69(null);
   const suppressNextBoxClickRef = useRef69(false);
-  const suppressNextBoxMouseDownRef = useRef69(false);
-  const suppressNextOverlayMouseDownRef = useRef69(false);
   const snapGuidesRef = useRef69(null);
   const rafPausedRef = useRef69(false);
   const selectionRef = useRef69(selection);
@@ -36295,11 +36333,11 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
     selectionRef,
     gestures
   });
-  const selectionKey = useMemo38(() => {
+  const selectionKey = useMemo39(() => {
     if (!selection) return "none";
     return `${selection.sourceFile}:${selection.id ?? selection.selector ?? selection.label}:${selection.selectorIndex ?? 0}`;
   }, [selection]);
-  const groupBounds = useMemo38(
+  const groupBounds = useMemo39(
     () => resolveDomEditGroupOverlayRect(groupOverlayItems.map((item) => item.rect)),
     [groupOverlayItems]
   );
@@ -36307,24 +36345,11 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
   const groupCanMove = hasGroupSelection && groupOverlayItems.length > 1 && groupOverlayItems.every((item) => item.selection.capabilities.canApplyManualOffset);
   const handleOverlayMouseDown = (event) => {
     if (!allowCanvasMovement) return;
-    if (suppressNextOverlayMouseDownRef.current) {
-      logSelect("mousedown-suppressed", { shift: event.shiftKey });
-      suppressNextOverlayMouseDownRef.current = false;
-      suppressNextBoxMouseDownRef.current = false;
-      suppressNextBoxClickRef.current = false;
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
     const target = event.target;
     const onBox = Boolean(target?.closest('[data-dom-edit-selection-box="true"]'));
     logSelect("mousedown", { shift: event.shiftKey, onBox });
     if (onBox) return;
     onCanvasMouseDown(event, { hoverSelection: hoverSelectionRef.current });
-    if (event.shiftKey) {
-      suppressNextBoxMouseDownRef.current = true;
-      suppressNextBoxClickRef.current = true;
-    }
   };
   const handleOverlayPointerDown = (event) => {
     if (!allowCanvasMovement || hostInput || event.button !== 0) return;
@@ -36342,8 +36367,6 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
       if (!candidate) return;
       event.preventDefault();
       event.stopPropagation();
-      suppressNextOverlayMouseDownRef.current = true;
-      suppressNextBoxMouseDownRef.current = true;
       suppressNextBoxClickRef.current = true;
       onSelectionChangeRef.current(candidate, { additive: true });
       return;
@@ -36367,7 +36390,6 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
       if (overlayRef.current) {
         event.preventDefault();
         event.stopPropagation();
-        suppressNextOverlayMouseDownRef.current = true;
         marquee.begin(event);
         return;
       }
@@ -36383,12 +36405,6 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
     }
     onCanvasMouseDown(event, { hoverSelection: hoverSelectionRef.current });
   };
-  const suppressBoxMouseDown = (e) => {
-    if (!suppressNextBoxMouseDownRef.current) return;
-    suppressNextBoxMouseDownRef.current = false;
-    e.preventDefault();
-    e.stopPropagation();
-  };
   const { contextMenu, closeContextMenu, handleContextMenu } = useCanvasContextMenuState({
     selection,
     selectionRef,
@@ -36446,7 +36462,6 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
             allowBodyDrag: bodyDrag,
             groupCanMove,
             gestures,
-            onBoxMouseDown: suppressBoxMouseDown,
             onBoxClick: handleBoxClick
           }
         ),
@@ -36466,7 +36481,6 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
             groupSelectionCount: groupSelections.length,
             gestures,
             onStyleCommit: onStyleCommitRef.current,
-            onBoxMouseDown: suppressBoxMouseDown,
             onBoxClick: handleBoxClick
           }
         ),
@@ -41558,10 +41572,10 @@ function PreviewOverlays({
 }
 
 // src/components/nle/useTimelineEditCallbacks.ts
-import { useCallback as useCallback65, useMemo as useMemo40 } from "react";
+import { useCallback as useCallback65, useMemo as useMemo41 } from "react";
 
 // src/hooks/useGsapTweenCache.ts
-import { useEffect as useEffect56, useMemo as useMemo39, useRef as useRef76, useState as useState49, useCallback as useCallback64 } from "react";
+import { useEffect as useEffect56, useMemo as useMemo40, useRef as useRef76, useState as useState49, useCallback as useCallback64 } from "react";
 
 // src/hooks/gsapRuntimeReaders.ts
 import { classifyPropertyGroup as classifyPropertyGroup3 } from "@hyperframes/core/gsap-parser";
@@ -42557,7 +42571,6 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
   const [multipleTimelines, setMultipleTimelines] = useState49(false);
   const [unsupportedTimelinePattern, setUnsupportedTimelinePattern] = useState49(false);
   const lastFetchKeyRef = useRef76("");
-  const retryTimerRef = useRef76(null);
   const domClipChildrenKey = usePlayerStore(
     (s) => s.domClipChildren.map((c) => `${c.id}<${c.hostId}`).join("|")
   );
@@ -42566,10 +42579,6 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
     const fetchKey = `${projectId}:${sourceFile}:${version}:${targetKey}`;
     if (fetchKey === lastFetchKeyRef.current) return;
     lastFetchKeyRef.current = fetchKey;
-    if (retryTimerRef.current) {
-      clearTimeout(retryTimerRef.current);
-      retryTimerRef.current = null;
-    }
     if (!projectId) {
       setAllAnimations([]);
       setMultipleTimelines(false);
@@ -42590,29 +42599,14 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
       setAllAnimations(parsed.animations);
       setMultipleTimelines(parsed.multipleTimelines === true);
       setUnsupportedTimelinePattern(parsed.unsupportedTimelinePattern === true);
-      if (parsed.animations.length === 0 && targetKey) {
-        retryTimerRef.current = setTimeout(() => {
-          if (cancelled) return;
-          fetchParsedAnimations(projectId, sourceFile).then((retryParsed) => {
-            if (cancelled) return;
-            if (retryParsed && retryParsed.animations.length > 0) {
-              setAllAnimations(retryParsed.animations);
-            }
-          });
-        }, 800);
-      }
     });
     return () => {
       cancelled = true;
-      if (retryTimerRef.current) {
-        clearTimeout(retryTimerRef.current);
-        retryTimerRef.current = null;
-      }
     };
   }, [projectId, sourceFile, version, target?.id, target?.selector]);
   const targetId = target?.id ?? null;
   const targetSelector = target?.selector ?? null;
-  const rawAnimations = useMemo39(() => {
+  const rawAnimations = useMemo40(() => {
     if (!targetId && !targetSelector) return [];
     const element = target ? findPreviewNode(iframeRef?.current?.contentDocument, target) : null;
     return getAnimationsForElement(
@@ -42621,7 +42615,7 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
       element
     );
   }, [allAnimations, target, version, iframeRef]);
-  const animations = useMemo39(() => {
+  const animations = useMemo40(() => {
     const iframe = iframeRef?.current;
     let result = rawAnimations;
     if (iframe) {
@@ -42947,7 +42941,7 @@ function useTimelineEditCallbacks({
     },
     [handleGsapRemoveKeyframe]
   );
-  return useMemo40(
+  return useMemo41(
     () => ({
       onMoveElement: handleTimelineElementMove,
       onMoveElements: handleTimelineElementsMove,
@@ -43254,7 +43248,7 @@ var CaptionTimeline = memo29(function CaptionTimeline2({
 });
 
 // src/hooks/useTimelineSelectionPreviewSync.ts
-import { useEffect as useEffect57, useMemo as useMemo41, useRef as useRef77 } from "react";
+import { useEffect as useEffect57, useMemo as useMemo42, useRef as useRef77 } from "react";
 var MAX_UNRESOLVED_SYNC_RETRIES = 3;
 function orderSelectedIds(ids, anchor2) {
   const ordered = [...ids];
@@ -43301,7 +43295,7 @@ function useTimelineSelectionPreviewSync({
   applyMarqueeSelection,
   onSelectionNotFound
 }) {
-  const selectedIds = useMemo41(
+  const selectedIds = useMemo42(
     () => orderSelectedIds(selectedElementIds, selectedElementId),
     [selectedElementId, selectedElementIds]
   );
@@ -43390,7 +43384,7 @@ function useTimelineSelectionPreviewSync({
 }
 
 // src/webmcp/StudioAgentTools.tsx
-import { useCallback as useCallback67, useEffect as useEffect59, useMemo as useMemo42 } from "react";
+import { useCallback as useCallback67, useEffect as useEffect59, useMemo as useMemo43 } from "react";
 
 // src/webmcp/useStudioAgentTools.ts
 import { useEffect as useEffect58, useRef as useRef78 } from "react";
@@ -44713,7 +44707,7 @@ function StudioAgentTools() {
     editHistory,
     previewIframeRef
   ]);
-  const deps = useMemo42(
+  const deps = useMemo43(
     () => ({
       getSnapshot,
       getPreviewDocument: () => previewIframeRef.current?.contentDocument ?? null,
@@ -45522,6 +45516,7 @@ function EditorShell({
   onPasteClip,
   onDuplicateClip,
   canPasteClip,
+  clipMenuItems,
   setCompIdToSrc,
   setCompositionLoading,
   shouldShowMotionPath,
@@ -45609,6 +45604,7 @@ function EditorShell({
           onPasteClip,
           onDuplicateClip,
           canPasteClip,
+          clipMenuItems,
           previewOverlay: /* @__PURE__ */ jsx102(
             PreviewOverlays,
             {
@@ -45643,7 +45639,8 @@ function EditorShellBody({
   onCopyClip,
   onPasteClip,
   onDuplicateClip,
-  canPasteClip
+  canPasteClip,
+  clipMenuItems
 }) {
   const { compositionStack, updateCompositionStack, containerRef } = useNLEContext();
   const seekCaptionTime = useCallback71((time) => {
@@ -45689,6 +45686,7 @@ function EditorShellBody({
               onPasteClip,
               onDuplicateClip,
               canPasteClip,
+              clipMenuItems,
               onSelectTimelineElement,
               timelineFooter: captionEditMode ? /* @__PURE__ */ jsxs72("div", { className: "border-t border-neutral-800/30 shrink-0", style: { height: 60 }, children: [
                 /* @__PURE__ */ jsx102("div", { className: "flex items-center gap-1.5 px-2 py-0.5", children: /* @__PURE__ */ jsx102("span", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider", children: "Captions" }) }),
@@ -45704,7 +45702,7 @@ function EditorShellBody({
 }
 
 // src/player/components/AudioWaveform.tsx
-import { memo as memo30, useCallback as useCallback72, useEffect as useEffect61, useMemo as useMemo43, useRef as useRef80 } from "react";
+import { memo as memo30, useCallback as useCallback72, useEffect as useEffect61, useMemo as useMemo44, useRef as useRef80 } from "react";
 
 // src/player/components/audioWaveformPeaks.ts
 var LOUDNESS_OPACITY_FLOOR = 0.64;
@@ -45839,7 +45837,7 @@ var AudioWaveform = memo30(function AudioWaveform2({
   const canvasRef = useRef80(null);
   const observerRef = useRef80(null);
   const cacheKey = waveformUrl ?? audioUrl;
-  const request = useMemo43(
+  const request = useMemo44(
     () => ({
       key: createThumbnailKey({ kind: "waveform", source: cacheKey }),
       projectId,
@@ -45946,7 +45944,7 @@ var AudioWaveform = memo30(function AudioWaveform2({
 });
 
 // src/player/components/ImageThumbnail.tsx
-import { memo as memo31, useMemo as useMemo44 } from "react";
+import { memo as memo31, useMemo as useMemo45 } from "react";
 
 // src/player/lib/thumbnailImageDecoder.ts
 function thumbnailSource(source) {
@@ -46024,7 +46022,7 @@ var ImageThumbnail = memo31(function ImageThumbnail2({
   rich = false
 }) {
   const [container, setContainerRef] = useThumbnailStripSize();
-  const request = useMemo44(
+  const request = useMemo45(
     () => ({
       key: createThumbnailKey({ kind: "image", source: imageSrc, rich: Number(rich) }),
       projectId,
@@ -46418,13 +46416,13 @@ var SourceEditor = memo32(function SourceEditor2({
 });
 
 // src/components/editor/PropertyPanel.tsx
-import { memo as memo36, useMemo as useMemo60, useRef as useRef112, useState as useState94 } from "react";
+import { memo as memo36, useMemo as useMemo61, useRef as useRef112, useState as useState94 } from "react";
 
 // src/components/editor/InspectorHeaderActions.tsx
 import { Eye as Eye3, EyeSlash as EyeSlash2 } from "@phosphor-icons/react";
 
 // src/contexts/DesignPanelInputContext.tsx
-import { useCallback as useCallback75, useContext as useContext11, useMemo as useMemo45 } from "react";
+import { useCallback as useCallback75, useContext as useContext11, useMemo as useMemo46 } from "react";
 
 // src/utils/designInputTracking.ts
 var COALESCE_WINDOW_MS = 600;
@@ -46467,7 +46465,7 @@ function DesignPanelInputProvider({
   children
 }) {
   const parent = useContext11(DesignPanelInputContext);
-  const value = useMemo45(
+  const value = useMemo46(
     () => ({ ui: ui ?? parent.ui, section: section ?? parent.section }),
     [ui, section, parent.ui, parent.section]
   );
@@ -48084,7 +48082,7 @@ function MediaSection({
 import { isHfColorGradingActive as isHfColorGradingActive2 } from "@hyperframes/core/color-grading";
 
 // src/components/editor/propertyPanelColorGradingControls.tsx
-import { useMemo as useMemo46, useRef as useRef86, useState as useState56 } from "react";
+import { useMemo as useMemo47, useRef as useRef86, useState as useState56 } from "react";
 import {
   HF_COLOR_GRADING_PRESETS,
   normalizeHfColorGrading
@@ -48528,7 +48526,7 @@ function ColorGradingControls({
   const [detailSettings, setDetailSettings] = useState56(null);
   const [lutImporting, setLutImporting] = useState56(false);
   const [lutImportError, setLutImportError] = useState56(null);
-  const lutAssets = useMemo46(
+  const lutAssets = useMemo47(
     () => assets.filter((asset) => LUT_EXT.test(asset)).sort((a, b) => a.localeCompare(b)),
     [assets]
   );
@@ -48808,7 +48806,7 @@ function ColorGradingControls({
 }
 
 // src/components/editor/useColorGradingController.ts
-import { useCallback as useCallback80, useEffect as useEffect69, useMemo as useMemo47, useRef as useRef88, useState as useState58 } from "react";
+import { useCallback as useCallback80, useEffect as useEffect69, useMemo as useMemo48, useRef as useRef88, useState as useState58 } from "react";
 import {
   HF_COLOR_GRADING_ATTR,
   hasHfColorGradingAuthoredValues,
@@ -49229,7 +49227,7 @@ function useColorGradingController({
     state: "pending",
     message: "Waiting for runtime"
   }));
-  const selectedAssetPath = useMemo47(
+  const selectedAssetPath = useMemo48(
     () => selectedMediaAssetPath(element, projectId),
     [element, projectId]
   );
@@ -49276,7 +49274,7 @@ function useColorGradingController({
       trackStudioPendingEdit(onSetAttributeLive(COLOR_GRADING_DATA_KEY, value));
     };
   }, [identityKey]);
-  const target = useMemo47(
+  const target = useMemo48(
     () => ({
       id: element.id ?? null,
       hfId: element.hfId ?? null,
@@ -50256,7 +50254,7 @@ function ColorField({
 }
 
 // src/components/editor/propertyPanelFont.tsx
-import { useEffect as useEffect71, useMemo as useMemo48, useRef as useRef90, useState as useState60 } from "react";
+import { useEffect as useEffect71, useMemo as useMemo49, useRef as useRef90, useState as useState60 } from "react";
 
 // src/components/editor/fontAssets.ts
 var FONT_EXT_RE = /\.(eot|otf|ttc|ttf|woff2?)$/i;
@@ -50480,13 +50478,14 @@ function FontFamilyField({
       setImportingFonts(false);
     }
   };
-  const projectFontAssets = useMemo48(
+  const projectFontAssets = useMemo49(
     () => uniqueFontOptions(
       importedFonts.map((f) => ({ family: f.family, source: "Imported" }))
     ),
     [importedFonts]
   );
-  const options = useMemo48(() => {
+  const options = useMemo49(() => {
+    if (!open) return [];
     const documentFonts = collectDocumentFontFamilies();
     const googleSet = new Set(googleFonts.map((f) => f.toLowerCase()));
     const taggedLocal = localFonts.map(
@@ -50505,8 +50504,8 @@ function FontFamilyField({
         ...DEFAULT_FONT_FAMILIES.map((f) => ({ family: f, source: "System" }))
       ])
     );
-  }, [currentFamily, googleFonts, localFonts, projectFontAssets]);
-  const filteredOptions = useMemo48(() => {
+  }, [open, currentFamily, googleFonts, localFonts, projectFontAssets]);
+  const filteredOptions = useMemo49(() => {
     const matches = options.filter((o) => fontMatchesQuery(o.family, query));
     if (query.trim()) return matches.slice(0, 200);
     const bySource = /* @__PURE__ */ new Map();
@@ -50742,7 +50741,7 @@ function FontFamilyField({
 import { useEffect as useEffect73 } from "react";
 
 // src/components/panels/VariablesBindElement.tsx
-import { useMemo as useMemo49, useState as useState62 } from "react";
+import { useMemo as useMemo50, useState as useState62 } from "react";
 
 // src/components/panels/VariablesValueControls.tsx
 import { useState as useState61 } from "react";
@@ -51024,7 +51023,7 @@ function VariablesBindElement({
 }) {
   const [activeKey, setActiveKey] = useState62(null);
   const [idDraft, setIdDraft] = useState62("");
-  const actions = useMemo49(() => buildBindActions(selection, sdkSession), [selection, sdkSession]);
+  const actions = useMemo50(() => buildBindActions(selection, sdkSession), [selection, sdkSession]);
   if (actions.length === 0) return null;
   const active = actions.find((a) => a.key === activeKey) ?? null;
   const trimmedId = sanitizeId(idDraft);
@@ -51135,7 +51134,7 @@ function uniqueId(base2, existing) {
 }
 
 // src/contexts/VariablePromoteContext.tsx
-import { useContext as useContext12, useEffect as useEffect72, useMemo as useMemo50, useState as useState63 } from "react";
+import { useContext as useContext12, useEffect as useEffect72, useMemo as useMemo51, useState as useState63 } from "react";
 import { jsx as jsx118 } from "react/jsx-runtime";
 var VariablePromoteContext = createStableContext(
   "VariablePromoteContext",
@@ -51158,15 +51157,15 @@ function VariablePromoteProvider({
     if (!session) return;
     return session.on("change", () => setRevision((r) => r + 1));
   }, [session]);
-  const actions = useMemo50(() => {
+  const actions = useMemo51(() => {
     if (!session || !selection) return [];
     return buildBindActions(selection, session);
   }, [session, selection, revision]);
-  const declarations = useMemo50(() => {
+  const declarations = useMemo51(() => {
     if (!session) return [];
     return session.getVariableDeclarations();
   }, [session, revision]);
-  const value = useMemo50(
+  const value = useMemo51(
     () => ({ session, selection, actions, declarations, persist: persist2, onPersistError }),
     [session, selection, actions, declarations, persist2, onPersistError]
   );
@@ -51175,7 +51174,7 @@ function VariablePromoteProvider({
 function useVariablePromoteChannel(channel) {
   const ctx3 = useContext12(VariablePromoteContext);
   const key2 = channel.kind === "style" ? `style:${channel.prop}` : channel.kind;
-  return useMemo50(() => {
+  return useMemo51(() => {
     if (!ctx3 || !ctx3.session || !ctx3.selection?.hfId) return null;
     const { session, selection, actions, declarations, persist: persist2, onPersistError } = ctx3;
     const hfId = selection.hfId;
@@ -51610,7 +51609,7 @@ function parseColorString(value) {
 }
 
 // src/components/editor/propertyPanelFill.tsx
-import { useMemo as useMemo51, useRef as useRef91, useState as useState64 } from "react";
+import { useMemo as useMemo52, useRef as useRef91, useState as useState64 } from "react";
 
 // src/components/icons/ReverseGradientIcon.tsx
 import { jsx as jsx120, jsxs as jsxs86 } from "react/jsx-runtime";
@@ -51685,8 +51684,8 @@ function ImageFillField({
   const fileInputRef = useRef91(null);
   const [uploading, setUploading] = useState64(false);
   const [uploadError, setUploadError] = useState64(null);
-  const imageAssets = useMemo51(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
-  const selectedAsset = useMemo51(
+  const imageAssets = useMemo52(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
+  const selectedAsset = useMemo52(
     () => resolveSelectedAsset(value, sourceFile, imageAssets),
     [imageAssets, sourceFile, value]
   );
@@ -53168,7 +53167,7 @@ import { useCallback as useCallback85, useState as useState69 } from "react";
 import { useShallow } from "zustand/react/shallow";
 
 // src/components/editor/AnimationCard.tsx
-import { memo as memo34, useCallback as useCallback84, useEffect as useEffect76, useMemo as useMemo52, useRef as useRef94, useState as useState68 } from "react";
+import { memo as memo34, useCallback as useCallback84, useEffect as useEffect76, useMemo as useMemo53, useRef as useRef94, useState as useState68 } from "react";
 import { SUPPORTED_EASES, SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
 
 // src/components/editor/gsapAnimationHelpers.ts
@@ -53709,21 +53708,21 @@ var AnimationCard = memo34(function AnimationCard2({
     segment?.scrollIntoView({ block: "nearest", behavior: "smooth" });
     pendingAutoScrollRef.current = false;
   }, [expandedKfPct]);
-  const usedProps = useMemo52(
+  const usedProps = useMemo53(
     () => new Set(Object.keys(animation.properties)),
     [animation.properties]
   );
-  const availableProps = useMemo52(
+  const availableProps = useMemo53(
     () => SUPPORTED_PROPS.filter(
       (p) => !usedProps.has(p) && (animation.method === "set" || !BOOLEAN_PROPS.has(p))
     ),
     [usedProps, animation.method]
   );
-  const usedFromProps = useMemo52(
+  const usedFromProps = useMemo53(
     () => new Set(Object.keys(animation.fromProperties ?? {})),
     [animation.fromProperties]
   );
-  const availableFromProps = useMemo52(
+  const availableFromProps = useMemo53(
     () => SUPPORTED_PROPS.filter((p) => !usedFromProps.has(p) && !BOOLEAN_PROPS.has(p)),
     [usedFromProps]
   );
@@ -53770,7 +53769,7 @@ var AnimationCard = memo34(function AnimationCard2({
   const easeName = (animation.keyframes ? animation.keyframes.easeEach : void 0) ?? animation.ease ?? "none";
   const easeLabel = easeName.startsWith("custom(") ? "Custom curve" : EASE_LABELS[easeName] ?? easeName;
   const endTime = typeof animation.position === "number" ? animation.position + (animation.duration ?? 0) : animation.position;
-  const summary = useMemo52(() => buildTweenSummary(animation), [animation]);
+  const summary = useMemo53(() => buildTweenSummary(animation), [animation]);
   const setKeys = Object.keys(animation.properties);
   if (animation.method === "set" && // `every` is vacuously true on an empty bag — require at least one key so a
   // property-less set doesn't masquerade as a position row.
@@ -54918,7 +54917,7 @@ function PropertyPanel3dTransform({
 }
 
 // src/components/editor/PropertyPanelFlat.tsx
-import { useEffect as useEffect97, useMemo as useMemo59, useRef as useRef111, useState as useState93 } from "react";
+import { useEffect as useEffect97, useMemo as useMemo60, useRef as useRef111, useState as useState93 } from "react";
 import { useShallow as useShallow2 } from "zustand/react/shallow";
 
 // src/components/editor/audioFxSummary.ts
@@ -57088,7 +57087,7 @@ function motionSectionLabel(args) {
 }
 
 // src/components/editor/propertyPanelAudioFxGroup.tsx
-import { useMemo as useMemo55, useState as useState81 } from "react";
+import { useMemo as useMemo56, useState as useState81 } from "react";
 import {
   HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR6,
   HF_AUDIO_FX_DATA_KEY as HF_AUDIO_FX_DATA_KEY2,
@@ -57108,7 +57107,7 @@ import {
 } from "@hyperframes/core/audio-automation";
 
 // src/components/editor/propertyPanelFxSection.tsx
-import { useCallback as useCallback88, useEffect as useEffect84, useMemo as useMemo54, useRef as useRef99, useState as useState79 } from "react";
+import { useCallback as useCallback88, useEffect as useEffect84, useMemo as useMemo55, useRef as useRef99, useState as useState79 } from "react";
 
 // src/components/editor/audioFxRevealTarget.ts
 import { parseAutomationTarget as parseAutomationTarget2 } from "@hyperframes/core/audio-automation";
@@ -58055,7 +58054,7 @@ function FxEqModule({
 import { getAudioFxPreset as getAudioFxPreset3 } from "@hyperframes/core/audio-fx-presets";
 
 // src/components/editor/propertyPanelFxNodeRow.tsx
-import { useMemo as useMemo53, useState as useState78 } from "react";
+import { useMemo as useMemo54, useState as useState78 } from "react";
 import {
   defaultAudioFxParams as defaultAudioFxParams3,
   getAudioFxDef as getAudioFxDef3
@@ -58481,11 +58480,11 @@ function FxNodeRow({
   trackKind
 }) {
   const registryDef = getAudioFxDef3(node.type);
-  const def = useMemo53(() => registryDef ? plainDef(registryDef) : null, [registryDef]);
+  const def = useMemo54(() => registryDef ? plainDef(registryDef) : null, [registryDef]);
   const primary = registryDef ? primaryParamOf(registryDef) : null;
   const profile = getAudioFxProfile2(node.type);
-  const derived = useMemo53(() => profileParam(node.type), [node.type]);
-  const onlyPrimary = useMemo53(
+  const derived = useMemo54(() => profileParam(node.type), [node.type]);
+  const onlyPrimary = useMemo54(
     () => def && primary ? { ...def, params: def.params.filter((p) => p.key === primary) } : def,
     [def, primary]
   );
@@ -59131,12 +59130,12 @@ function FxSection({
     [chain.nodes, mutate, onRemoveNodeAutomation, trackKind]
   );
   const [carveOpen, setCarveOpen] = useState79(true);
-  const carveNodes = useMemo54(() => chain.nodes.filter((n) => n.fromCarve), [chain.nodes]);
-  const handBuilt = useMemo54(
+  const carveNodes = useMemo55(() => chain.nodes.filter((n) => n.fromCarve), [chain.nodes]);
+  const handBuilt = useMemo55(
     () => chain.nodes.map((node, i) => ({ node, i })).filter(({ node }) => !node.fromCarve && !node.fromEq),
     [chain.nodes]
   );
-  const runs = useMemo54(() => {
+  const runs = useMemo55(() => {
     const out = [];
     for (const item of handBuilt) {
       const preset = item.node.fromPreset;
@@ -59147,8 +59146,8 @@ function FxSection({
     return out;
   }, [handBuilt]);
   const [collapsedRuns, setCollapsedRuns] = useState79(/* @__PURE__ */ new Set());
-  const eqIds = useMemo54(() => audioEqIds(chain), [chain]);
-  const positions = useMemo54(() => {
+  const eqIds = useMemo55(() => audioEqIds(chain), [chain]);
+  const positions = useMemo55(() => {
     const map = /* @__PURE__ */ new Map();
     let at = (showCarve ? 1 : 0) + eqIds.length;
     for (const { i } of handBuilt) map.set(i, ++at);
@@ -59941,7 +59940,7 @@ function AudioFxGroup({
   const removeNodeAutomation = (nodeId) => removeNodesAutomation([nodeId]);
   const [analysing, setAnalysing] = useState81(false);
   const storeElements = usePlayerStore((s) => s.elements);
-  const signalPath = useMemo55(() => {
+  const signalPath = useMemo56(() => {
     const doc = element.element?.ownerDocument;
     return audioFxSignalPath(
       element.tagName?.toLowerCase(),
@@ -60609,7 +60608,7 @@ function createGsapLivePreview(iframeRef) {
 }
 
 // src/components/editor/propertyPanelFlatColorGradingSection.tsx
-import { useEffect as useEffect94, useMemo as useMemo57, useRef as useRef110, useState as useState89 } from "react";
+import { useEffect as useEffect94, useMemo as useMemo58, useRef as useRef110, useState as useState89 } from "react";
 import {
   HF_COLOR_GRADING_GRADE_PRESETS,
   normalizeHfColorGrading as normalizeHfColorGrading5,
@@ -60644,7 +60643,7 @@ function presetPreviewHandlers({
 import { useState as useState85 } from "react";
 
 // src/components/editor/propertyPanelColorCurveGraph.tsx
-import { useMemo as useMemo56, useRef as useRef103 } from "react";
+import { useMemo as useMemo57, useRef as useRef103 } from "react";
 import {
   compileHfColorCurve,
   compileHfHueCurve,
@@ -60832,8 +60831,8 @@ function CurveGraph({
   onCancel
 }) {
   const pointerRef = useRef103(null);
-  const samples = useMemo56(() => samplesFor(points, tab), [points, tab]);
-  const path = useMemo56(() => curvePath(samples, tab), [samples, tab]);
+  const samples = useMemo57(() => samplesFor(points, tab), [points, tab]);
+  const path = useMemo57(() => curvePath(samples, tab), [samples, tab]);
   const selectRelativePoint = (offset) => {
     if (points.length === 0) return;
     const current = selectedIndex ?? (offset > 0 ? -1 : 0);
@@ -62630,14 +62629,14 @@ function FlatColorGradingSection({
   const lutInputRef = useRef110(null);
   const [lutOpen, setLutOpen] = useState89(false);
   const [detailSettingsOpen, setDetailSettingsOpen] = useState89(null);
-  const lutAssets = useMemo57(
+  const lutAssets = useMemo58(
     () => assets.filter((asset) => LUT_EXT.test(asset)).sort((a, b) => a.localeCompare(b)),
     [assets]
   );
   const lut = grading.lut;
   const selectedLutName = lut?.src ? lut.src.split("/").pop() ?? lut.src : null;
-  const resolvedGrading = useMemo57(() => resolveColorGrading(grading), [grading]);
-  const secondaryInputGrading = useMemo57(
+  const resolvedGrading = useMemo58(() => resolveColorGrading(grading), [grading]);
+  const secondaryInputGrading = useMemo58(
     () => resolveColorGrading({
       intensity: 1,
       adjust: resolvedGrading.adjust,
@@ -62655,7 +62654,7 @@ function FlatColorGradingSection({
     ]
   );
   const actions = createColorGradingActions(grading, onCommitColorGrading);
-  const scopesRefreshKey = useMemo57(() => serializeHfColorGrading2(grading), [grading]);
+  const scopesRefreshKey = useMemo58(() => serializeHfColorGrading2(grading), [grading]);
   useEffect94(() => {
     if (presetPreviews.status === "idle") onRequestPresetPreviews();
   }, [onRequestPresetPreviews, presetPreviews.status]);
@@ -63785,7 +63784,7 @@ function FlatEffectsSection({
 import { useState as useState92 } from "react";
 
 // src/hooks/useBlockCatalog.ts
-import { useState as useState91, useEffect as useEffect96, useMemo as useMemo58 } from "react";
+import { useState as useState91, useEffect as useEffect96, useMemo as useMemo59 } from "react";
 
 // src/utils/blockCategories.ts
 import {
@@ -63852,7 +63851,7 @@ function useBlockCatalog() {
       cancelled = true;
     };
   }, []);
-  const filteredBlocks = useMemo58(() => {
+  const filteredBlocks = useMemo59(() => {
     let result = blocks;
     if (category) {
       result = result.filter((b) => b.category === category);
@@ -64168,7 +64167,7 @@ function PropertyPanelFlat({
     currentTime,
     onSetAttributeQuiet ?? onSetAttributeLive
   );
-  const audioGroupLabel = useMemo59(() => {
+  const audioGroupLabel = useMemo60(() => {
     const doc = element.element?.ownerDocument;
     const id = element.id;
     if (!doc || !id) return void 0;
@@ -64729,12 +64728,12 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
   const cacheEntry = usePlayerStore((s) => s.keyframeCache.get(cacheElementKey));
   const iframeRef = previewIframeRef ?? { current: null };
   const gsapAnimIdForMemo = element ? gsapAnimations?.find((a) => a.keyframes)?.id ?? gsapAnimations?.[0]?.id ?? null : null;
-  const gsapRuntimeValues = useMemo60(
+  const gsapRuntimeValues = useMemo61(
     () => element ? readGsapRuntimeValuesForPanel(gsapAnimIdForMemo, gsapAnimations, element, iframeRef) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps -- iframeRef is stable; currentTime drives re-reads during playback
     [gsapAnimIdForMemo, gsapAnimations, element, currentTime]
   );
-  const gsapBorderRadius = useMemo60(
+  const gsapBorderRadius = useMemo61(
     () => element ? readGsapBorderRadiusForPanel(gsapRuntimeValues, gsapAnimations, element, iframeRef) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [gsapRuntimeValues, gsapAnimations, element, currentTime]
@@ -65122,11 +65121,11 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
 });
 
 // src/components/editor/FileTree.tsx
-import { memo as memo38, useState as useState96, useCallback as useCallback90, useMemo as useMemo62, useRef as useRef114 } from "react";
+import { memo as memo38, useState as useState96, useCallback as useCallback90, useMemo as useMemo63, useRef as useRef114 } from "react";
 import { Plus as Plus2, FolderSimplePlus as FolderSimplePlus2 } from "@phosphor-icons/react";
 
 // src/components/editor/FileTreeNodes.tsx
-import { memo as memo37, useState as useState95, useCallback as useCallback89, useMemo as useMemo61, useRef as useRef113, useEffect as useEffect98 } from "react";
+import { memo as memo37, useState as useState95, useCallback as useCallback89, useMemo as useMemo62, useRef as useRef113, useEffect as useEffect98 } from "react";
 import {
   PencilSimple,
   Copy,
@@ -65609,7 +65608,7 @@ var TreeFolder = memo37(function TreeFolder2({
 }) {
   const [isOpen, setIsOpen] = useState95(defaultOpen);
   const toggle = useCallback89(() => setIsOpen((v) => !v), []);
-  const children = useMemo61(() => sortChildren(node.children), [node.children]);
+  const children = useMemo62(() => sortChildren(node.children), [node.children]);
   const Chevron = isOpen ? ChevronDown : ChevronRight;
   const isDragOver = dragOverFolder === node.fullPath;
   const isRenaming = inlineInput?.mode === "rename" && inlineInput.originalPath === node.fullPath;
@@ -65740,8 +65739,8 @@ var FileTree = memo38(function FileTree2({
   onImportFiles,
   lintFindingsByFile
 }) {
-  const tree = useMemo62(() => buildTree(files), [files]);
-  const children = useMemo62(() => sortChildren(tree.children), [tree]);
+  const tree = useMemo63(() => buildTree(files), [files]);
+  const children = useMemo63(() => sortChildren(tree.children), [tree]);
   const [contextMenu, setContextMenu] = useState96(null);
   const [inlineInput, setInlineInput] = useState96(null);
   const [deleteTarget, setDeleteTarget] = useState96(null);
@@ -66008,7 +66007,7 @@ var FileTree = memo38(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState149, useCallback as useCallback185, useRef as useRef181, useMemo as useMemo80, useLayoutEffect as useLayoutEffect13 } from "react";
+import { useState as useState149, useCallback as useCallback185, useRef as useRef181, useMemo as useMemo81, useLayoutEffect as useLayoutEffect13 } from "react";
 
 // src/hooks/useRightPanelIntents.ts
 import { useCallback as useCallback91, useEffect as useEffect99, useRef as useRef115 } from "react";
@@ -66059,7 +66058,7 @@ function useRightPanelIntent() {
 }
 
 // src/components/renders/useRenderQueue.ts
-import { useState as useState98, useEffect as useEffect101, useCallback as useCallback93, useRef as useRef117, useMemo as useMemo63 } from "react";
+import { useState as useState98, useEffect as useEffect101, useCallback as useCallback93, useRef as useRef117, useMemo as useMemo64 } from "react";
 
 // src/components/renders/serverError.ts
 async function readServerError(res) {
@@ -66582,7 +66581,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
     };
   }, [projectId]);
   const isRendering = jobs.some((j) => j.status === "rendering");
-  return useMemo63(
+  return useMemo64(
     () => ({
       jobs,
       isRendering,
@@ -67868,7 +67867,7 @@ function useCaptionSync(projectId) {
 }
 
 // src/hooks/usePersistentEditHistory.ts
-import { useCallback as useCallback97, useEffect as useEffect105, useMemo as useMemo64, useRef as useRef124, useState as useState104 } from "react";
+import { useCallback as useCallback97, useEffect as useEffect105, useMemo as useMemo65, useRef as useRef124, useState as useState104 } from "react";
 var EMPTY3 = { entries: [], back: null, forward: null };
 var DEFAULT_COALESCE_MS = 300;
 function historyUrl(projectId, path = "") {
@@ -67992,7 +67991,7 @@ function usePersistentEditHistory({ projectId }) {
   );
   const undo = useCallback97((callbacks) => step("undo", callbacks), [step]);
   const redo = useCallback97((callbacks) => step("redo", callbacks), [step]);
-  const state = useMemo64(() => {
+  const state = useMemo65(() => {
     const backAt = Math.max(view.back?.endedAt ?? 0, heldClaimRef.current?.at ?? 0);
     const redoAt = redoneAt(view);
     return {
@@ -68072,7 +68071,7 @@ function usePanelLayout(initialState2) {
 import { useState as useState106, useCallback as useCallback102, useRef as useRef128 } from "react";
 
 // src/hooks/useFileTree.ts
-import { useState as useState105, useCallback as useCallback99, useEffect as useEffect107, useMemo as useMemo65, useRef as useRef126 } from "react";
+import { useState as useState105, useCallback as useCallback99, useEffect as useEffect107, useMemo as useMemo66, useRef as useRef126 } from "react";
 var EMPTY_FILE_LIST = [];
 function useFileTree({ projectId, projectIdRef }) {
   const [fetched, setFetched] = useState105(null);
@@ -68136,11 +68135,11 @@ function useFileTree({ projectId, projectIdRef }) {
       );
     }
   }, [projectIdRef]);
-  const assets = useMemo65(
+  const assets = useMemo66(
     () => fileTree.filter((f) => !f.endsWith(".html") && !f.endsWith(".md") && !f.endsWith(".json")),
     [fileTree]
   );
-  const fontAssets = useMemo65(
+  const fontAssets = useMemo66(
     () => (projectId ? assets : []).filter((asset) => FONT_EXT.test(asset)).map((asset) => ({
       family: fontFamilyFromAssetPath(asset),
       path: asset,
@@ -68284,9 +68283,9 @@ function useEditorSave({
 }
 
 // src/hooks/useProjectFileWriter.ts
-import { useCallback as useCallback101, useMemo as useMemo66 } from "react";
+import { useCallback as useCallback101, useMemo as useMemo67 } from "react";
 function useProjectFileWriter({ projectId }) {
-  const fileVersionScope = useMemo66(
+  const fileVersionScope = useMemo67(
     () => ({ projectId, versions: /* @__PURE__ */ new Map() }),
     [projectId]
   );
@@ -68391,7 +68390,7 @@ function useProjectFileWriter({ projectId }) {
     },
     [fileVersions, projectId]
   );
-  return useMemo66(
+  return useMemo67(
     () => ({
       fileVersions,
       readProjectFile,
@@ -74664,7 +74663,7 @@ function useGroupCommits(params) {
 }
 
 // src/hooks/useGsapScriptCommits.ts
-import { useCallback as useCallback132, useMemo as useMemo67, useRef as useRef144 } from "react";
+import { useCallback as useCallback132, useMemo as useMemo68, useRef as useRef144 } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/hooks/gsapRuntimePatch.ts
@@ -75987,7 +75986,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     const { instantPatch: _instantPatch, ...batchOptions } = options;
     await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, instantPatches.length > 0 ? { ...batchOptions, instantPatches } : batchOptions);
   }, [showToast, finalizeSuccessfulMutation]);
-  const commitMutation = useMemo67(() => {
+  const commitMutation = useMemo68(() => {
     const serializeFile = (file, task) => {
       if (writeProjectFile) {
         return serializeStudioFileMutation(writeProjectFile, file, task);
@@ -76052,7 +76051,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     },
     [activeProjectId]
   );
-  const sdkDeps = useMemo67(
+  const sdkDeps = useMemo68(
     () => writeProjectFile ? {
       editHistory: { recordEdit: editHistory.recordEdit },
       writeProjectFile,
@@ -76199,8 +76198,6 @@ function useDomEditPreviewSync({
 
 // src/hooks/useGsapAnimationFetchFallback.ts
 import { useCallback as useCallback133 } from "react";
-var COLD_PARSE_RETRIES = 5;
-var COLD_PARSE_DELAY_MS = 120;
 var FETCH_ERROR_RETRIES = 1;
 var FETCH_ERROR_DELAY_MS = 120;
 var delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -76209,32 +76206,22 @@ function gsapSourceFileForSelection(selection) {
 }
 function selectElementAnimationsOrRetry(parsed, target, element) {
   if (!parsed) return { kind: "fetch-error" };
-  if (parsed.animations.length === 0) return { kind: "cold" };
   return {
     kind: "resolved",
     animations: getAnimationsForElement(parsed.animations, target, element)
   };
 }
 async function fetchElementAnimationsWithRetry(projectId, gsapSourceFile, target, element, failOnFetchError, fresh) {
-  let coldAttempts = 0;
-  let errorAttempts = 0;
-  for (; ; ) {
+  for (let errorAttempts = 0; ; errorAttempts++) {
     const parsed = await fetchParsedAnimations(projectId, gsapSourceFile, { fresh });
     fresh = false;
     const outcome = selectElementAnimationsOrRetry(parsed, target, element);
     if (outcome.kind === "resolved") return outcome.animations;
-    if (outcome.kind === "fetch-error") {
-      if (errorAttempts >= FETCH_ERROR_RETRIES) {
-        if (failOnFetchError) throw new Error("GSAP animation ownership could not be verified");
-        return [];
-      }
-      errorAttempts++;
-      await delay(FETCH_ERROR_DELAY_MS);
-      continue;
+    if (errorAttempts >= FETCH_ERROR_RETRIES) {
+      if (failOnFetchError) throw new Error("GSAP animation ownership could not be verified");
+      return [];
     }
-    if (coldAttempts >= COLD_PARSE_RETRIES) return [];
-    coldAttempts++;
-    await delay(COLD_PARSE_DELAY_MS);
+    await delay(FETCH_ERROR_DELAY_MS);
   }
 }
 function useGsapAnimationFetchFallback(projectId) {
@@ -78005,15 +77992,10 @@ function useKeyframeEaseCommits({
 }
 
 // src/hooks/useCommitPreflightCapabilities.ts
-import { useEffect as useEffect116, useMemo as useMemo68, useRef as useRef149, useState as useState112 } from "react";
+import { useEffect as useEffect116, useMemo as useMemo69, useRef as useRef149, useState as useState112 } from "react";
 function runCommitPreflights(selection, fileAnimations, iframe, group) {
   const target = { id: selection.id ?? null, selector: selection.selector ?? null };
-  const matched = selectElementAnimationsOrRetry(
-    { animations: fileAnimations },
-    target,
-    selection.element
-  );
-  const animations = matched.kind === "resolved" ? matched.animations : [];
+  const animations = getAnimationsForElement(fileAnimations, target, selection.element);
   return {
     offset: dragEditOutcome(selection, animations, iframe, [], group),
     size: preflightGsapResizeIntercept(selection, animations, iframe),
@@ -78079,7 +78061,7 @@ function useCommitPreflightCapabilities({
       });
     }
   }, [enabled, projectId, selection, groupSelections, version]);
-  return useMemo68(() => {
+  return useMemo69(() => {
     void parseTick;
     if (!enabled || !projectId) return { selection, groupSelections };
     const group = groupSelections.length > 1;
@@ -79411,7 +79393,7 @@ function useStudioExternalFileChanges({
 }
 
 // src/hooks/useBlockHandlers.ts
-import { useCallback as useCallback144, useMemo as useMemo69, useRef as useRef152, useState as useState115 } from "react";
+import { useCallback as useCallback144, useMemo as useMemo70, useRef as useRef152, useState as useState115 } from "react";
 
 // src/utils/blockInstaller.ts
 function getMaxZIndexFromIframe(iframe) {
@@ -79605,7 +79587,7 @@ function useBlockHandlers({
   setRightPanelTab
 }) {
   const [activeBlockParams, setActiveBlockParams] = useState115(null);
-  const blockCtx = useMemo69(
+  const blockCtx = useMemo70(
     () => ({
       activeCompPath: blockCtxDeps.activeCompPath,
       timelineElements: blockCtxDeps.timelineElements,
@@ -79935,7 +79917,7 @@ function dispatchPlainKey(event, key2, cb) {
 }
 
 // src/hooks/useEditHistoryActions.ts
-import { useCallback as useCallback145, useMemo as useMemo70 } from "react";
+import { useCallback as useCallback145, useMemo as useMemo71 } from "react";
 function useEditHistoryActions({
   editHistory,
   readOptionalProjectFile,
@@ -79999,7 +79981,7 @@ function useEditHistoryActions({
   );
   const undo = useCallback145(() => apply("undo"), [apply]);
   const redo = useCallback145(() => apply("redo"), [apply]);
-  return useMemo70(() => ({ undo, redo }), [undo, redo]);
+  return useMemo71(() => ({ undo, redo }), [undo, redo]);
 }
 
 // src/hooks/useAppHotkeys.ts
@@ -81192,7 +81174,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState118, useCallback as useCallback150, useEffect as useEffect124, useRef as useRef158, useMemo as useMemo71 } from "react";
+import { useState as useState118, useCallback as useCallback150, useEffect as useEffect124, useRef as useRef158, useMemo as useMemo72 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -81265,8 +81247,8 @@ function useLintModal(projectId, refreshKey) {
     },
     [backgroundFindings]
   );
-  const findingsByElement = useMemo71(() => groupFindings((f) => f.elementId), [groupFindings]);
-  const findingsByFile = useMemo71(() => groupFindings((f) => f.file), [groupFindings]);
+  const findingsByElement = useMemo72(() => groupFindings((f) => f.elementId), [groupFindings]);
+  const findingsByFile = useMemo72(() => groupFindings((f) => f.file), [groupFindings]);
   const badgeFindings = lintModal ?? backgroundFindings;
   const lintFindingCount = badgeFindings.length;
   const hasLintError = badgeFindings.some((f) => f.severity === "error");
@@ -81731,16 +81713,16 @@ function useStudioUrlState({
 }
 
 // src/hooks/useEffectiveTimelineDuration.ts
-import { useMemo as useMemo72 } from "react";
+import { useMemo as useMemo73 } from "react";
 function useEffectiveTimelineDuration(timelineDuration2, timelineElements) {
-  return useMemo72(
+  return useMemo73(
     () => getEffectiveTimelineDuration(timelineDuration2, timelineElements),
     [timelineDuration2, timelineElements]
   );
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback153, useMemo as useMemo73 } from "react";
+import { useCallback as useCallback153, useMemo as useMemo74 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -81768,7 +81750,7 @@ function buildStudioContextValue(input) {
   };
 }
 function useInspectorState(rightPanel, isPlaying, domEditSelection, isGestureRecording) {
-  return useMemo73(() => {
+  return useMemo74(() => {
     const inspectorPanelActive = rightPanel === "layers" || rightPanel === "design";
     return {
       inspectorPanelActive,
@@ -81811,7 +81793,7 @@ function useGlobalFileDrop(handleTimelineFileDrop) {
 }
 
 // src/contexts/PanelLayoutContext.tsx
-import { useContext as useContext13, useMemo as useMemo74 } from "react";
+import { useContext as useContext13, useMemo as useMemo75 } from "react";
 import { jsx as jsx188 } from "react/jsx-runtime";
 var PanelLayoutContext = createStableContext("PanelLayoutContext", null);
 function usePanelLayoutContext() {
@@ -81823,7 +81805,7 @@ function PanelLayoutProvider({
   value: { rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab },
   children
 }) {
-  const stable = useMemo74(
+  const stable = useMemo75(
     () => ({ rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab }),
     [rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab]
   );
@@ -82766,7 +82748,7 @@ function useGestureCommit({
 }
 
 // src/components/editor/GestureTrailOverlay.tsx
-import { memo as memo40, useMemo as useMemo75 } from "react";
+import { memo as memo40, useMemo as useMemo76 } from "react";
 import { Fragment as Fragment53, jsx as jsx191, jsxs as jsxs150 } from "react/jsx-runtime";
 var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
   samples,
@@ -82778,7 +82760,7 @@ var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
   mode,
   accentColor = "#3CE6AC"
 }) {
-  const trailPoints = useMemo75(() => {
+  const trailPoints = useMemo76(() => {
     if (!canvasRect) return "";
     if (trail2 && trail2.length > 1) {
       return trail2.map((p) => `${p.x - canvasRect.left},${p.y - canvasRect.top}`).join(" ");
@@ -82786,7 +82768,7 @@ var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
     if (samples.length === 0) return "";
     return samples.filter((s) => s.properties.x != null && s.properties.y != null).map((s) => `${s.properties.x},${s.properties.y}`).join(" ");
   }, [samples, trail2, sampleCount, canvasRect?.left, canvasRect?.top]);
-  const simplifiedPath = useMemo75(() => {
+  const simplifiedPath = useMemo76(() => {
     if (!simplifiedPoints || simplifiedPoints.size === 0) return "";
     const pts = [];
     for (const [pct, props] of simplifiedPoints) {
@@ -82798,7 +82780,7 @@ var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
     if (pts.length === 0) return "";
     return pts.map((p) => `${p.x},${p.y}`).join(" ");
   }, [simplifiedPoints]);
-  const diamondPositions = useMemo75(() => {
+  const diamondPositions = useMemo76(() => {
     if (!simplifiedPoints || simplifiedPoints.size === 0) return [];
     const pts = [];
     for (const [pct, props] of simplifiedPoints) {
@@ -82997,7 +82979,7 @@ function MediaPreview({ projectId, filePath }) {
 }
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo41, useState as useState129, useCallback as useCallback159, useRef as useRef166, useMemo as useMemo77, useEffect as useEffect133 } from "react";
+import { memo as memo41, useState as useState129, useCallback as useCallback159, useRef as useRef166, useMemo as useMemo78, useEffect as useEffect133 } from "react";
 
 // src/components/ui/SearchInput.tsx
 import { jsx as jsx193, jsxs as jsxs152 } from "react/jsx-runtime";
@@ -83609,7 +83591,7 @@ function AudioRow({
 }
 
 // src/components/sidebar/GlobalAssetsView.tsx
-import { useEffect as useEffect130, useMemo as useMemo76, useState as useState126 } from "react";
+import { useEffect as useEffect130, useMemo as useMemo77, useState as useState126 } from "react";
 import { jsx as jsx196, jsxs as jsxs155 } from "react/jsx-runtime";
 function globalAssetRows(records, query = "") {
   const q = query.trim().toLowerCase();
@@ -83636,7 +83618,7 @@ function GlobalAssetsView({ searchQuery }) {
       cancelled = true;
     };
   }, []);
-  const rows = useMemo76(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
+  const rows = useMemo77(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
   if (records === null) {
     return /* @__PURE__ */ jsx196("p", { className: "px-4 py-3 text-[11px] text-panel-text-5", children: "Loading global assets\u2026" });
   }
@@ -84198,12 +84180,12 @@ var AssetsTab = memo41(function AssetsTab2({
     setTimeout(() => setCopyFeedback(null), copied ? 1500 : 3e3);
   }, []);
   const elements = usePlayerStore((s) => s.elements);
-  const usedPaths = useMemo77(() => deriveUsedPaths(elements), [elements]);
-  const allMediaAssets = useMemo77(
+  const usedPaths = useMemo78(() => deriveUsedPaths(elements), [elements]);
+  const allMediaAssets = useMemo78(
     () => assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a)),
     [assets]
   );
-  const mediaAssets = useMemo77(() => {
+  const mediaAssets = useMemo78(() => {
     const all = filterByUsage(allMediaAssets, usedPaths, usageFilter);
     if (!searchQuery) return all;
     const q = searchQuery.toLowerCase();
@@ -84213,7 +84195,7 @@ var AssetsTab = memo41(function AssetsTab2({
       return rec?.description?.toLowerCase().includes(q);
     });
   }, [allMediaAssets, searchQuery, manifest, usageFilter, usedPaths]);
-  const categorized = useMemo77(() => {
+  const categorized = useMemo78(() => {
     const groups = { audio: [], images: [], video: [], fonts: [] };
     for (const a of mediaAssets) {
       const cat = getCategory(a);
@@ -84228,12 +84210,12 @@ var AssetsTab = memo41(function AssetsTab2({
     }
     return groups;
   }, [mediaAssets, usedPaths]);
-  const counts = useMemo77(() => {
+  const counts = useMemo78(() => {
     const c = { all: mediaAssets.length };
     for (const cat of FILTER_ORDER) c[cat] = categorized[cat].length;
     return c;
   }, [mediaAssets, categorized]);
-  const usageCounts = useMemo77(
+  const usageCounts = useMemo78(
     () => countUsage(
       assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a)),
       usedPaths
@@ -88614,7 +88596,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo52, useCallback as useCallback175, useEffect as useEffect144, useMemo as useMemo78, useState as useState146 } from "react";
+import { memo as memo52, useCallback as useCallback175, useEffect as useEffect144, useMemo as useMemo79, useState as useState146 } from "react";
 
 // src/hooks/useVariablesPersist.ts
 import { useCallback as useCallback172 } from "react";
@@ -89310,22 +89292,22 @@ var VariablesPanel = memo52(function VariablesPanel2({
     reloadPreview,
     publishSdkSession
   });
-  const declarations = useMemo78(
+  const declarations = useMemo79(
     () => sdkSession?.getVariableDeclarations() ?? [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const usage = useMemo78(
+  const usage = useMemo79(
     () => sdkSession?.getVariableUsage() ?? null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const issues = useMemo78(
+  const issues = useMemo79(
     () => previewValues && sdkSession ? sdkSession.validateVariableValues(previewValues) : [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
   );
-  const effectiveValues = useMemo78(
+  const effectiveValues = useMemo79(
     () => sdkSession?.getVariableValues(previewValues ?? void 0) ?? {},
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
@@ -89640,15 +89622,15 @@ function useSlideshowPersist({
 }
 
 // src/hooks/useSlideshowTabState.ts
-import { useMemo as useMemo79 } from "react";
+import { useMemo as useMemo80 } from "react";
 import { SLIDESHOW_ISLAND_TYPE as SLIDESHOW_ISLAND_TYPE2, slideshowIslandRegex as slideshowIslandRegex2 } from "@hyperframes/core/slideshow";
 function useSlideshowTabState(params) {
   const { editingFileContent, previewIframeRef, refreshKey, slideshowVisible } = params;
-  const isSlideshowComposition = useMemo79(() => {
+  const isSlideshowComposition = useMemo80(() => {
     if (!editingFileContent || !editingFileContent.includes(SLIDESHOW_ISLAND_TYPE2)) return false;
     return slideshowIslandRegex2("i").test(editingFileContent);
   }, [editingFileContent]);
-  const slideshowScenes = useMemo79(() => {
+  const slideshowScenes = useMemo80(() => {
     try {
       const win = previewIframeRef.current?.contentWindow;
       return (win?.__clipManifest?.scenes ?? []).map((s) => ({
@@ -91501,7 +91483,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     recordEdit: editHistory.recordEdit,
     setRefreshKey
   });
-  const masterCompPath = useMemo80(
+  const masterCompPath = useMemo81(
     () => resolveMasterCompositionPath(fileManager.compositions),
     [fileManager.compositions]
   );
@@ -91605,7 +91587,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   });
   const dismissBlockParams = useCallback185(() => setActiveBlockParams(null), [setActiveBlockParams]);
   const setRightPanelTab = useDismissingTabSetter(panelLayout.setRightPanelTab, dismissBlockParams);
-  const layout = useMemo80(
+  const layout = useMemo81(
     () => ({ ...panelLayout, setRightPanelTab }),
     [panelLayout, setRightPanelTab]
   );
@@ -91823,7 +91805,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     handlePreviewIframeRef,
     refreshPreviewDocumentVersion
   });
-  const timelineToolbar = useMemo80(
+  const timelineToolbar = useMemo81(
     () => /* @__PURE__ */ jsx229(
       TimelineToolbar,
       {
@@ -92340,7 +92322,7 @@ function findElementBlock(html2, elementId2) {
 }
 
 // src/hooks/useDomStyleCommit.ts
-import { useCallback as useCallback187, useMemo as useMemo81, useRef as useRef183, useState as useState151 } from "react";
+import { useCallback as useCallback187, useMemo as useMemo82, useRef as useRef183, useState as useState151 } from "react";
 var noop = () => {
 };
 function useDomStyleCommit({
@@ -92356,7 +92338,7 @@ function useDomStyleCommit({
   const [queue2] = useState151(createDomEditSaveQueue);
   useMountEffect(() => () => queue2.destroy());
   const versions = useRef183(/* @__PURE__ */ new Map()).current;
-  const editHistory = useMemo81(() => ({ recordEdit }), [recordEdit]);
+  const editHistory = useMemo82(() => ({ recordEdit }), [recordEdit]);
   const persistDomEditOperations = useDomEditPersist({
     activeCompPath,
     previewIframeRef: iframeRef,
@@ -92388,7 +92370,7 @@ function useDomStyleCommit({
 }
 
 // src/hooks/useDomGeometryCommit.ts
-import { useCallback as useCallback188, useMemo as useMemo82, useRef as useRef184, useState as useState152 } from "react";
+import { useCallback as useCallback188, useMemo as useMemo83, useRef as useRef184, useState as useState152 } from "react";
 var noop2 = () => {
 };
 var NO_SELECTED_ANIMATIONS = [];
@@ -92405,7 +92387,7 @@ function useDomGeometryCommit({
   const projectIdRef = useRef184(projectId);
   projectIdRef.current = projectId;
   const pending2 = useRef184(/* @__PURE__ */ new Set()).current;
-  const editHistory = useMemo82(() => ({ recordEdit }), [recordEdit]);
+  const editHistory = useMemo83(() => ({ recordEdit }), [recordEdit]);
   const reload = useCallback188(
     () => reloadPreview ? reloadPreview() : iframeRef.current?.contentWindow?.location.reload(),
     [reloadPreview, iframeRef]
@@ -92497,7 +92479,7 @@ function useDomGeometryCommit({
     },
     [pending2, showToast]
   );
-  return useMemo82(
+  return useMemo83(
     () => ({
       commitPathOffset: (selection, next, modifiers) => saved2(() => handleGsapAwarePathOffsetCommit(selection, next, modifiers)),
       commitGroupPathOffset: (updates) => saved2(() => handleGsapAwareGroupPathOffsetCommit(updates)),