hyperframes 0.7.18 → 0.7.20

package/dist/studio/index.js

@@ -21,9 +21,9 @@ import {
 
 // src/components/nle/NLELayout.tsx
 import {
-  useState as useState17,
+  useState as useState18,
   useCallback as useCallback20,
-  useRef as useRef20,
+  useRef as useRef21,
   useEffect as useEffect14,
   useSyncExternalStore,
   memo as memo15
@@ -572,6 +572,8 @@ Player.displayName = "Player";
 
 // src/player/components/PlayerControls.tsx
 import { useRef as useRef5, useCallback as useCallback4, useEffect as useEffect5, memo as memo3 } from "react";
+import gsap from "gsap";
+import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
 
 // src/player/lib/time.ts
 var STUDIO_PREVIEW_FPS = 30;
@@ -2068,14 +2070,28 @@ function useSeekBarDrag(refs, onSeek, disabled, duration) {
 // src/player/components/PlayerControls.tsx
 import { useState as useState5 } from "react";
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-function PlayIcon() {
-  return /* @__PURE__ */ jsx7("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "#FAFAFA", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("polygon", { points: "6,3 20,12 6,21" }) });
-}
-function PauseIcon() {
-  return /* @__PURE__ */ jsxs7("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "#FAFAFA", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx7("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
-    /* @__PURE__ */ jsx7("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
-  ] });
+gsap.registerPlugin(MorphSVGPlugin);
+var PLAY_BLADE_D = "M87.5129 57.5141L56.9696 73.5433C52.8371 75.7098 48.7046 73.2553 49.6688 69.2104L58.9483 30.1391C59.9125 26.0942 65.2097 23.6397 68.3154 25.8062L91.2447 41.8354C96.4668 45.4796 94.4631 53.8699 87.5129 57.5141Z";
+var PAUSE_BARS_D = "M56 28H67V71H56Z M73 28H84V71H73Z";
+function PlayPauseMorphIcon({ playing }) {
+  const pathRef = useRef5(null);
+  const isFirstRun = useRef5(true);
+  useEffect5(() => {
+    const el = pathRef.current;
+    if (!el) return;
+    const target = playing ? PAUSE_BARS_D : PLAY_BLADE_D;
+    const reduceMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (isFirstRun.current || reduceMotion) {
+      isFirstRun.current = false;
+      gsap.set(el, { morphSVG: target });
+      return;
+    }
+    const tween = gsap.to(el, { duration: 0.28, ease: "power2.inOut", morphSVG: target });
+    return () => {
+      tween.kill();
+    };
+  }, [playing]);
+  return /* @__PURE__ */ jsx7("span", { className: "relative inline-flex h-3 w-3 items-center justify-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("svg", { width: "12", height: "12", viewBox: "46 21 54 56", fill: "#FAFAFA", children: /* @__PURE__ */ jsx7("path", { ref: pathRef, d: playing ? PAUSE_BARS_D : PLAY_BLADE_D }) }) });
 }
 var MuteButton = memo3(function MuteButton2({
   audioMuted,
@@ -2402,7 +2418,7 @@ var PlayerControls = memo3(function PlayerControls2({
             disabled: controlsDisabled,
             className: "flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-lg disabled:opacity-30 disabled:pointer-events-none transition-colors",
             style: { background: "rgba(255,255,255,0.06)" },
-            children: isPlaying ? /* @__PURE__ */ jsx7(PauseIcon, {}) : /* @__PURE__ */ jsx7(PlayIcon, {})
+            children: /* @__PURE__ */ jsx7(PlayPauseMorphIcon, { playing: isPlaying })
           }
         ) }),
         /* @__PURE__ */ jsx7(
@@ -2481,7 +2497,7 @@ var PlayerControls = memo3(function PlayerControls2({
 });
 
 // src/player/components/Timeline.tsx
-import { useRef as useRef13, useMemo as useMemo8, useCallback as useCallback11, useState as useState11, useEffect as useEffect9, memo as memo11 } from "react";
+import { useRef as useRef14, useMemo as useMemo8, useCallback as useCallback11, useState as useState12, useEffect as useEffect9, memo as memo11 } from "react";
 
 // src/hooks/useMusicBeatAnalysis.ts
 import { useEffect as useEffect6, useMemo as useMemo2, useRef as useRef6 } from "react";
@@ -4783,7 +4799,40 @@ var TimelineClip = memo5(function TimelineClip2({
 });
 
 // src/player/components/TimelineClipDiamonds.tsx
-import { memo as memo6 } from "react";
+import { memo as memo6, useRef as useRef11, useState as useState10 } from "react";
+
+// src/components/editor/keyframeDrag.ts
+var KEYFRAME_DRAG_THRESHOLD_PX = 4;
+var NOOP_EPSILON_PCT = 0.1;
+var NEIGHBOR_EPSILON_PCT = 0.5;
+var clamp2 = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+function clampToNeighbors(clipPct, sortedClipPcts, draggedIndex) {
+  const left = draggedIndex > 0 ? (sortedClipPcts[draggedIndex - 1] ?? 0) + NEIGHBOR_EPSILON_PCT : 0;
+  const right = draggedIndex < sortedClipPcts.length - 1 ? (sortedClipPcts[draggedIndex + 1] ?? 100) - NEIGHBOR_EPSILON_PCT : 100;
+  if (left > right) return (left + right) / 2;
+  return clamp2(clipPct, left, right);
+}
+function resolveKeyframeDrag(opts) {
+  const dx = opts.pointerUpX - opts.pointerDownX;
+  if (Math.abs(dx) < KEYFRAME_DRAG_THRESHOLD_PX || opts.clipWidthPx <= 0) {
+    return { kind: "click" };
+  }
+  const rawClipPct = opts.draggedClipPct + dx / opts.clipWidthPx * 100;
+  const toClipPct = clampToNeighbors(rawClipPct, opts.sortedClipPcts, opts.draggedIndex);
+  if (Math.abs(toClipPct - opts.draggedClipPct) < NOOP_EPSILON_PCT) return { kind: "noop" };
+  return { kind: "move", toClipPct };
+}
+function previewClipPct(opts) {
+  if (opts.clipWidthPx <= 0) return opts.draggedClipPct;
+  const dx = opts.pointerMoveX - opts.pointerDownX;
+  return clampToNeighbors(
+    opts.draggedClipPct + dx / opts.clipWidthPx * 100,
+    opts.sortedClipPcts,
+    opts.draggedIndex
+  );
+}
+
+// src/player/components/TimelineClipDiamonds.tsx
 import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var DIAMOND_RATIO = 0.8;
 var KF_MIN_PCT = -5;
@@ -4800,23 +4849,20 @@ var TimelineClipDiamonds = memo6(function TimelineClipDiamonds2({
   selectedKeyframes,
   onClickKeyframe,
   onShiftClickKeyframe,
-  onContextMenuKeyframe
+  onContextMenuKeyframe,
+  onMoveKeyframe
 }) {
+  const dragRef = useRef11(null);
+  const [preview, setPreview] = useState10(null);
   if (clipWidthPx < 20) return null;
   const diamondSize = Math.round(clipHeightPx * (beatsActive ? 0.45 : DIAMOND_RATIO));
   const half = diamondSize / 2;
   const centerY = beatsActive ? BEAT_BAND_H + (clipHeightPx - BEAT_BAND_H) / 2 : clipHeightPx / 2;
   const sorted = keyframesData.keyframes.filter((kf) => kf.percentage >= KF_MIN_PCT && kf.percentage <= KF_MAX_PCT).sort((a, b) => a.percentage - b.percentage);
+  const sortedClipPcts = sorted.map((k) => k.percentage);
   const baseColor = isSelected ? accentColor : "#a3a3a3";
   const baseOpacity = isSelected ? 0.4 : 0.25;
-  const handleClick = (e, pct) => {
-    e.stopPropagation();
-    if (e.shiftKey) {
-      onShiftClickKeyframe?.(elementId, pct);
-    } else {
-      onClickKeyframe?.(pct);
-    }
-  };
+  const canDrag = isSelected && !!onMoveKeyframe;
   return /* @__PURE__ */ jsxs11("div", { className: "absolute inset-0", style: { zIndex: 3, pointerEvents: "none" }, children: [
     sorted.map((kf, i) => {
       if (i === 0) return null;
@@ -4843,12 +4889,72 @@ var TimelineClipDiamonds = memo6(function TimelineClipDiamonds2({
       );
     }),
     sorted.map((kf, i) => {
-      const leftPx = kf.percentage / 100 * clipWidthPx - half;
       const kfKey = `${elementId}:${kf.percentage}`;
+      const renderPct = preview?.kfKey === kfKey ? preview.clipPct : kf.percentage;
+      const leftPx = renderPct / 100 * clipWidthPx - half;
       const isKfSelected = selectedKeyframes.has(kfKey);
       const atPlayhead = isSelected && Math.abs(kf.percentage - currentPercentage) < 0.5;
       const isHighlighted = isKfSelected || atPlayhead;
       const color = isHighlighted ? accentColor : "#a3a3a3";
+      const onPointerDown = (e) => {
+        if (e.button !== 0) return;
+        e.stopPropagation();
+        if (canDrag) {
+          e.currentTarget.setPointerCapture?.(e.pointerId);
+          dragRef.current = {
+            kfKey,
+            startX: e.clientX,
+            fromClipPct: kf.percentage,
+            moved: false
+          };
+        }
+      };
+      const onPointerMove = (e) => {
+        const d = dragRef.current;
+        if (!d || d.kfKey !== kfKey) return;
+        if (!d.moved && Math.abs(e.clientX - d.startX) >= KEYFRAME_DRAG_THRESHOLD_PX) {
+          d.moved = true;
+        }
+        if (d.moved) {
+          setPreview({
+            kfKey,
+            clipPct: previewClipPct({
+              pointerDownX: d.startX,
+              pointerMoveX: e.clientX,
+              clipWidthPx,
+              draggedClipPct: d.fromClipPct,
+              draggedIndex: i,
+              sortedClipPcts
+            })
+          });
+        }
+      };
+      const onPointerUp = (e) => {
+        const d = dragRef.current;
+        if (!d || d.kfKey !== kfKey) {
+          if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
+          else onClickKeyframe?.(kf.percentage);
+          return;
+        }
+        e.stopPropagation();
+        dragRef.current = null;
+        setPreview(null);
+        e.currentTarget.releasePointerCapture?.(e.pointerId);
+        const res = resolveKeyframeDrag({
+          pointerDownX: d.startX,
+          pointerUpX: e.clientX,
+          clipWidthPx,
+          draggedClipPct: d.fromClipPct,
+          draggedIndex: i,
+          sortedClipPcts
+        });
+        if (res.kind === "click") {
+          if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
+          else onClickKeyframe?.(kf.percentage);
+        } else if (res.kind === "move" && res.toClipPct != null) {
+          onMoveKeyframe?.(elementId, d.fromClipPct, res.toClipPct);
+        }
+      };
       return /* @__PURE__ */ jsx14(
         "button",
         {
@@ -4864,10 +4970,13 @@ var TimelineClipDiamonds = memo6(function TimelineClipDiamonds2({
             pointerEvents: "auto",
             background: "none",
             border: "none",
-            cursor: "pointer",
-            padding: 0
+            cursor: canDrag ? "ew-resize" : "pointer",
+            padding: 0,
+            touchAction: "none"
           },
-          onClick: (e) => handleClick(e, kf.percentage),
+          onPointerDown,
+          onPointerMove,
+          onPointerUp,
           onContextMenu: (e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -5691,6 +5800,8 @@ function TimelineEditProvider({
       value.onDeleteKeyframe,
       value.onDeleteAllKeyframes,
       value.onChangeKeyframeEase,
+      value.onMoveKeyframeToPlayhead,
+      value.onMoveKeyframe,
       value.onToggleKeyframeAtPlayhead
     ]
   );
@@ -5762,6 +5873,7 @@ var TimelineCanvas = memo8(function TimelineCanvas2({
   onClickKeyframe,
   onShiftClickKeyframe,
   onContextMenuKeyframe,
+  onMoveKeyframe,
   onContextMenuClip,
   beatAnalysis
 }) {
@@ -6024,7 +6136,8 @@ var TimelineCanvas = memo8(function TimelineCanvas2({
                           selectedKeyframes,
                           onClickKeyframe: (pct) => onClickKeyframe?.(previewElement, pct),
                           onShiftClickKeyframe,
-                          onContextMenuKeyframe
+                          onContextMenuKeyframe,
+                          onMoveKeyframe
                         }
                       )
                     ]
@@ -6115,9 +6228,9 @@ import { memo as memo9 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/hooks/useContextMenuDismiss.ts
-import { useCallback as useCallback9, useEffect as useEffect8, useRef as useRef11 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect8, useRef as useRef12 } from "react";
 function useContextMenuDismiss(onClose) {
-  const menuRef = useRef11(null);
+  const menuRef = useRef12(null);
   const dismiss = useCallback9(
     (e) => {
       if (e instanceof KeyboardEvent && e.key !== "Escape") return;
@@ -6143,11 +6256,12 @@ var KeyframeDiamondContextMenu = memo9(function KeyframeDiamondContextMenu2({
   state,
   onClose,
   onDelete,
-  onDeleteAll
+  onDeleteAll,
+  onMoveToPlayhead
 }) {
   const menuRef = useContextMenuDismiss(onClose);
   const menuWidth = 200;
-  const menuHeight = 70;
+  const menuHeight = onMoveToPlayhead ? 100 : 70;
   const overflowY = state.y + menuHeight - window.innerHeight;
   const adjustedX = state.x + menuWidth > window.innerWidth ? state.x - menuWidth : state.x;
   const adjustedY = overflowY > 0 ? state.y - overflowY - 8 : state.y;
@@ -6159,13 +6273,25 @@ var KeyframeDiamondContextMenu = memo9(function KeyframeDiamondContextMenu2({
         className: "fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]",
         style: { left: adjustedX, top: adjustedY },
         children: [
+          onMoveToPlayhead && /* @__PURE__ */ jsx19(
+            "button",
+            {
+              type: "button",
+              className: "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-200 hover:bg-neutral-800 cursor-pointer text-left",
+              onClick: () => {
+                onMoveToPlayhead(state.elementId, state.percentage);
+                onClose();
+              },
+              children: "Move to Playhead"
+            }
+          ),
           /* @__PURE__ */ jsx19(
             "button",
             {
               type: "button",
               className: "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left",
               onClick: () => {
-                onDelete(state.elementId, state.tweenPercentage ?? state.percentage);
+                onDelete(state.elementId, state.percentage);
                 onClose();
               },
               children: "Delete Keyframe"
@@ -6191,7 +6317,7 @@ var KeyframeDiamondContextMenu = memo9(function KeyframeDiamondContextMenu2({
 });
 
 // src/player/components/useTimelineClipDrag.ts
-import { useRef as useRef12, useState as useState10, useCallback as useCallback10, useMemo as useMemo6 } from "react";
+import { useRef as useRef13, useState as useState11, useCallback as useCallback10, useMemo as useMemo6 } from "react";
 var BEAT_SNAP_PX = 8;
 var EMPTY_BEAT_TIMES = [];
 function snapToNearestBeat(time, beatTimes, thresholdSecs) {
@@ -6263,22 +6389,22 @@ function useTimelineClipDrag({
     musicPlaybackStart,
     musicDuration
   ]);
-  const beatTimesRef = useRef12([]);
+  const beatTimesRef = useRef13([]);
   beatTimesRef.current = adjustedBeatTimes;
-  const [draggedClip, setDraggedClip] = useState10(null);
-  const draggedClipRef = useRef12(null);
+  const [draggedClip, setDraggedClip] = useState11(null);
+  const draggedClipRef = useRef13(null);
   draggedClipRef.current = draggedClip;
-  const [resizingClip, setResizingClip] = useState10(null);
-  const resizingClipRef = useRef12(null);
+  const [resizingClip, setResizingClip] = useState11(null);
+  const resizingClipRef = useRef13(null);
   resizingClipRef.current = resizingClip;
-  const blockedClipRef = useRef12(null);
-  const suppressClickRef = useRef12(false);
-  const onMoveElementRef = useRef12(onMoveElement);
+  const blockedClipRef = useRef13(null);
+  const suppressClickRef = useRef13(false);
+  const onMoveElementRef = useRef13(onMoveElement);
   onMoveElementRef.current = onMoveElement;
-  const onResizeElementRef = useRef12(onResizeElement);
+  const onResizeElementRef = useRef13(onResizeElement);
   onResizeElementRef.current = onResizeElement;
-  const clipDragScrollRaf = useRef12(0);
-  const clipDragPointerRef = useRef12(null);
+  const clipDragScrollRaf = useRef13(0);
+  const clipDragPointerRef = useRef13(null);
   const updateDraggedClipPreview = useCallback10(
     (drag, clientX, clientY) => {
       const scroll = scrollRef.current;
@@ -6368,11 +6494,11 @@ function useTimelineClipDrag({
     },
     [scrollRef, stepClipDragAutoScroll]
   );
-  const updateDraggedClipPreviewRef = useRef12(updateDraggedClipPreview);
+  const updateDraggedClipPreviewRef = useRef13(updateDraggedClipPreview);
   updateDraggedClipPreviewRef.current = updateDraggedClipPreview;
-  const syncClipDragAutoScrollRef = useRef12(syncClipDragAutoScroll);
+  const syncClipDragAutoScrollRef = useRef13(syncClipDragAutoScroll);
   syncClipDragAutoScrollRef.current = syncClipDragAutoScroll;
-  const stopClipDragAutoScrollRef = useRef12(stopClipDragAutoScroll);
+  const stopClipDragAutoScrollRef = useRef13(stopClipDragAutoScroll);
   stopClipDragAutoScrollRef.current = stopClipDragAutoScroll;
   useMountEffect(() => {
     const clearSuppressedClick = () => {
@@ -6679,7 +6805,9 @@ var Timeline = memo11(function Timeline2({
     onRazorSplitAll,
     onDeleteKeyframe,
     onDeleteAllKeyframes,
-    onChangeKeyframeEase
+    onChangeKeyframeEase,
+    onMoveKeyframeToPlayhead,
+    onMoveKeyframe
   } = useResolvedTimelineEditCallbacks({
     onMoveElement: onMoveElementOverride,
     onResizeElement: onResizeElementOverride,
@@ -6703,14 +6831,14 @@ var Timeline = memo11(function Timeline2({
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { zoomMode, manualZoomPercent, setZoomMode, setManualZoomPercent } = useTimelineZoom();
-  const playheadRef = useRef13(null);
-  const containerRef = useRef13(null);
-  const scrollRef = useRef13(null);
+  const playheadRef = useRef14(null);
+  const containerRef = useRef14(null);
+  const scrollRef = useRef14(null);
   const activeTool = usePlayerStore((s) => s.activeTool);
-  const [hoveredClip, setHoveredClip] = useState11(null);
-  const isDragging = useRef13(false);
-  const [shiftHeld, setShiftHeld] = useState11(false);
-  const [razorGuideX, setRazorGuideX] = useState11(null);
+  const [hoveredClip, setHoveredClip] = useState12(null);
+  const isDragging = useRef14(false);
+  const [shiftHeld, setShiftHeld] = useState12(false);
+  const [razorGuideX, setRazorGuideX] = useState12(null);
   useMountEffect(() => {
     const down = (e) => e.key === "Shift" && setShiftHeld(true);
     const up = (e) => e.key === "Shift" && setShiftHeld(false);
@@ -6724,13 +6852,13 @@ var Timeline = memo11(function Timeline2({
       window.removeEventListener("blur", blur);
     };
   });
-  const [showPopover, setShowPopover] = useState11(false);
-  const [showShortcutHint, setShowShortcutHint] = useState11(true);
-  const [kfContextMenu, setKfContextMenu] = useState11(null);
-  const [clipContextMenu, setClipContextMenu] = useState11(null);
-  const [viewportWidth, setViewportWidth] = useState11(0);
-  const roRef = useRef13(null);
-  const shortcutHintRafRef = useRef13(0);
+  const [showPopover, setShowPopover] = useState12(false);
+  const [showShortcutHint, setShowShortcutHint] = useState12(true);
+  const [kfContextMenu, setKfContextMenu] = useState12(null);
+  const [clipContextMenu, setClipContextMenu] = useState12(null);
+  const [viewportWidth, setViewportWidth] = useState12(0);
+  const roRef = useRef14(null);
+  const shortcutHintRafRef = useRef14(0);
   const syncShortcutHintVisibility = useCallback11(() => {
     const scroll = scrollRef.current;
     setShowShortcutHint(
@@ -6790,12 +6918,12 @@ var Timeline = memo11(function Timeline2({
     return map;
   }, [tracks]);
   const trackOrder = useMemo8(() => tracks.map(([trackNum]) => trackNum), [tracks]);
-  const trackOrderRef = useRef13(trackOrder);
+  const trackOrderRef = useRef14(trackOrder);
   trackOrderRef.current = trackOrder;
-  const ppsRef = useRef13(100);
-  const durationRef = useRef13(effectiveDuration);
+  const ppsRef = useRef14(100);
+  const durationRef = useRef14(effectiveDuration);
   durationRef.current = effectiveDuration;
-  const setRangeSelectionRef = useRef13(null);
+  const setRangeSelectionRef = useRef14(null);
   const {
     draggedClip,
     setDraggedClip,
@@ -6828,17 +6956,17 @@ var Timeline = memo11(function Timeline2({
     () => expandedElements.find((element) => (element.key ?? element.id) === selectedElementId) ?? null,
     [expandedElements, selectedElementId]
   );
-  const selectedElementRef = useRef13(selectedElement);
+  const selectedElementRef = useRef14(selectedElement);
   selectedElementRef.current = selectedElement;
   const fitPps = viewportWidth > GUTTER && effectiveDuration > 0 ? (viewportWidth - GUTTER - 2) / effectiveDuration : 100;
   const pps = getTimelinePixelsPerSecond(fitPps, zoomMode, manualZoomPercent);
   ppsRef.current = pps;
   const trackContentWidth = Math.max(0, effectiveDuration * pps);
-  const zoomModeRef = useRef13(zoomMode);
+  const zoomModeRef = useRef14(zoomMode);
   zoomModeRef.current = zoomMode;
-  const manualZoomPercentRef = useRef13(manualZoomPercent);
+  const manualZoomPercentRef = useRef14(manualZoomPercent);
   manualZoomPercentRef.current = manualZoomPercent;
-  const fitPpsRef = useRef13(fitPps);
+  const fitPpsRef = useRef14(fitPps);
   fitPpsRef.current = fitPps;
   const { seekFromX, autoScrollDuringDrag, dragScrollRaf } = useTimelinePlayhead({
     playheadRef,
@@ -6881,7 +7009,7 @@ var Timeline = memo11(function Timeline2({
     setShowPopover
   });
   setRangeSelectionRef.current = setRangeSelection;
-  const prevSelectedRef = useRef13(selectedElementRef.current);
+  const prevSelectedRef = useRef14(selectedElementRef.current);
   useEffect9(() => {
     const prev = prevSelectedRef.current;
     const curr = selectedElementRef.current;
@@ -7033,6 +7161,7 @@ var Timeline = memo11(function Timeline2({
                   onShiftClickKeyframe: (elId, pct) => {
                     toggleSelectedKeyframe(`${elId}:${pct}`);
                   },
+                  onMoveKeyframe,
                   onContextMenuKeyframe: (e, elId, pct) => {
                     const el = expandedElements.find((x) => (x.key ?? x.id) === elId);
                     if (el) {
@@ -7113,6 +7242,7 @@ var Timeline = memo11(function Timeline2({
             onDelete: (elId, pct) => onDeleteKeyframe?.(elId, pct),
             onDeleteAll: (elId) => onDeleteAllKeyframes?.(elId),
             onChangeEase: (elId, pct, ease) => onChangeKeyframeEase?.(elId, pct, ease),
+            onMoveToPlayhead: onMoveKeyframeToPlayhead ? (elId, pct) => onMoveKeyframeToPlayhead(elId, pct) : void 0,
             onCopyProperties: (elId, pct) => {
               const kfData = keyframeCache.get(elId);
               const kf = kfData?.keyframes.find((k) => k.percentage === pct);
@@ -7140,7 +7270,7 @@ var Timeline = memo11(function Timeline2({
 });
 
 // src/player/components/VideoThumbnail.tsx
-import { memo as memo12, useRef as useRef14, useState as useState12, useCallback as useCallback12, useEffect as useEffect10 } from "react";
+import { memo as memo12, useRef as useRef15, useState as useState13, useCallback as useCallback12, useEffect as useEffect10 } from "react";
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var CLIP_HEIGHT = 66;
 var MAX_UNIQUE_FRAMES = 6;
@@ -7150,13 +7280,13 @@ var VideoThumbnail = memo12(function VideoThumbnail2({
   labelColor,
   duration = 5
 }) {
-  const [containerWidth, setContainerWidth] = useState12(0);
-  const [visible, setVisible] = useState12(false);
-  const [frames, setFrames] = useState12([]);
-  const [aspect, setAspect] = useState12(16 / 9);
-  const ioRef = useRef14(null);
-  const roRef = useRef14(null);
-  const extractingRef = useRef14(false);
+  const [containerWidth, setContainerWidth] = useState13(0);
+  const [visible, setVisible] = useState13(false);
+  const [frames, setFrames] = useState13([]);
+  const [aspect, setAspect] = useState13(16 / 9);
+  const ioRef = useRef15(null);
+  const roRef = useRef15(null);
+  const extractingRef = useRef15(false);
   const setContainerRef = useCallback12((el) => {
     ioRef.current?.disconnect();
     roRef.current?.disconnect();
@@ -7297,7 +7427,7 @@ var VideoThumbnail = memo12(function VideoThumbnail2({
 });
 
 // src/player/components/CompositionThumbnail.tsx
-import { memo as memo13, useCallback as useCallback13, useState as useState13, useRef as useRef15 } from "react";
+import { memo as memo13, useCallback as useCallback13, useState as useState14, useRef as useRef16 } from "react";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var CLIP_HEIGHT2 = 66;
 var THUMBNAIL_URL_VERSION = "v3";
@@ -7331,10 +7461,10 @@ var CompositionThumbnail = memo13(function CompositionThumbnail2({
   seekTime = 2,
   duration = 5
 }) {
-  const [containerWidth, setContainerWidth] = useState13(0);
-  const [loaded, setLoaded] = useState13(false);
-  const [aspect, setAspect] = useState13(16 / 9);
-  const roRef = useRef15(null);
+  const [containerWidth, setContainerWidth] = useState14(0);
+  const [loaded, setLoaded] = useState14(false);
+  const [aspect, setAspect] = useState14(16 / 9);
+  const roRef = useRef16(null);
   const setContainerRef = useCallback13((el) => {
     roRef.current?.disconnect();
     if (!el) return;
@@ -7417,10 +7547,10 @@ var CompositionThumbnail = memo13(function CompositionThumbnail2({
 });
 
 // src/player/hooks/useTimelinePlayer.ts
-import { useRef as useRef17, useCallback as useCallback16, useEffect as useEffect11 } from "react";
+import { useRef as useRef18, useCallback as useCallback16, useEffect as useEffect11 } from "react";
 
 // src/player/hooks/usePlaybackKeyboard.ts
-import { useRef as useRef16, useCallback as useCallback14 } from "react";
+import { useRef as useRef17, useCallback as useCallback14 } from "react";
 
 // src/captions/store.ts
 import { create as create2 } from "zustand";
@@ -7647,10 +7777,10 @@ function usePlaybackKeyboard({
   pause,
   seek
 }) {
-  const pressedKeysRef = useRef16(/* @__PURE__ */ new Set());
-  const playbackKeyDownRef = useRef16(() => {
+  const pressedKeysRef = useRef17(/* @__PURE__ */ new Set());
+  const playbackKeyDownRef = useRef17(() => {
   });
-  const playbackKeyUpRef = useRef16(() => {
+  const playbackKeyUpRef = useRef17(() => {
   });
   const stepFrames = useCallback14(
     (deltaFrames) => {
@@ -8180,18 +8310,18 @@ function timelineElementsChanged(prev, next) {
   });
 }
 function useTimelinePlayer() {
-  const iframeRef = useRef17(null);
-  const rafRef = useRef17(0);
-  const probeIntervalRef = useRef17(void 0);
-  const pendingSeekRef = useRef17(null);
-  const isRefreshingRef = useRef17(false);
-  const reverseRafRef = useRef17(0);
-  const shuttleDirectionRef = useRef17(null);
-  const shuttleSpeedIndexRef = useRef17(0);
-  const iframeShortcutCleanupRef = useRef17(null);
-  const lastTimelineMessageRef = useRef17(0);
-  const staticSeekAdapterRef = useRef17(null);
-  const staticSeekWarnedRef = useRef17(false);
+  const iframeRef = useRef18(null);
+  const rafRef = useRef18(0);
+  const probeIntervalRef = useRef18(void 0);
+  const pendingSeekRef = useRef18(null);
+  const isRefreshingRef = useRef18(false);
+  const reverseRafRef = useRef18(0);
+  const shuttleDirectionRef = useRef18(null);
+  const shuttleSpeedIndexRef = useRef18(0);
+  const iframeShortcutCleanupRef = useRef18(null);
+  const lastTimelineMessageRef = useRef18(0);
+  const staticSeekAdapterRef = useRef18(null);
+  const staticSeekWarnedRef = useRef18(false);
   const { setIsPlaying, setCurrentTime, setDuration, setTimelineReady, setElements } = usePlayerStore.getState();
   const syncTimelineElements = useCallback16(
     (elements, nextDuration) => {
@@ -8543,7 +8673,7 @@ function useTimelinePlayer() {
     url.searchParams.set("_t", String(Date.now()));
     iframe.src = url.toString();
   }, [saveSeekPosition]);
-  const getAdapterRef = useRef17(getAdapter);
+  const getAdapterRef = useRef18(getAdapter);
   getAdapterRef.current = getAdapter;
   useMountEffect(() => {
     const handleWindowKeyDown = (e) => playbackKeyDownRef.current(e);
@@ -8648,7 +8778,7 @@ function useTimelinePlayer() {
 }
 
 // src/components/nle/NLEPreview.tsx
-import { memo as memo14, useCallback as useCallback17, useEffect as useEffect12, useRef as useRef18, useState as useState14 } from "react";
+import { memo as memo14, useCallback as useCallback17, useEffect as useEffect12, useRef as useRef19, useState as useState15 } from "react";
 
 // src/components/nle/previewZoom.ts
 var MIN_PREVIEW_ZOOM_PERCENT = 25;
@@ -8814,21 +8944,21 @@ var NLEPreview = memo14(function NLEPreview2({
   onStageRef
 }) {
   const activeKey = getPreviewPlayerKey({ projectId, directUrl });
-  const viewportRef = useRef18(null);
-  const stageRef = useRef18(null);
-  const previewIframeRef = useRef18(null);
+  const viewportRef = useRef19(null);
+  const stageRef = useRef19(null);
+  const previewIframeRef = useRef19(null);
   useEffect12(() => {
     onStageRef?.(stageRef);
   }, [onStageRef]);
-  const [compositionSize, setCompositionSize] = useState14(null);
-  const [stageSize, setStageSize] = useState14(() => resolvePreviewStageSize(0, 0, null, portrait));
-  const zoomRef = useRef18(loadInitialZoom());
-  const [settledZoom, setSettledZoom] = useState14(() => zoomRef.current);
-  const hudRef = useRef18(null);
-  const hudTimerRef = useRef18(null);
-  const settleTimerRef = useRef18(null);
-  const zoomingRef = useRef18(false);
-  const dragRef = useRef18(null);
+  const [compositionSize, setCompositionSize] = useState15(null);
+  const [stageSize, setStageSize] = useState15(() => resolvePreviewStageSize(0, 0, null, portrait));
+  const zoomRef = useRef19(loadInitialZoom());
+  const [settledZoom, setSettledZoom] = useState15(() => zoomRef.current);
+  const hudRef = useRef19(null);
+  const hudTimerRef = useRef19(null);
+  const settleTimerRef = useRef19(null);
+  const zoomingRef = useRef19(false);
+  const dragRef = useRef19(null);
   useEffect12(() => {
     return () => {
       if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
@@ -8860,7 +8990,7 @@ var NLEPreview = memo14(function NLEPreview2({
     },
     [iframeRef]
   );
-  const stageSizeRef = useRef18(stageSize);
+  const stageSizeRef = useRef19(stageSize);
   stageSizeRef.current = stageSize;
   const writeTransform2 = useCallback17((state) => {
     const stage = stageRef.current;
@@ -9181,7 +9311,7 @@ function CompositionBreadcrumb({ stack, onNavigate }) {
 }
 
 // src/components/nle/usePreviewBlockDrop.ts
-import { useCallback as useCallback18, useState as useState15 } from "react";
+import { useCallback as useCallback18, useState as useState16 } from "react";
 function parseBlockPayload(raw) {
   try {
     const parsed = JSON.parse(raw);
@@ -9214,7 +9344,7 @@ function usePreviewBlockDrop({
   stageRef,
   onBlockDrop
 }) {
-  const [isDragOver, setIsDragOver] = useState15(false);
+  const [isDragOver, setIsDragOver] = useState16(false);
   const handleDragOver = useCallback18(
     (e) => {
       if (!onBlockDrop) return;
@@ -9253,16 +9383,16 @@ function usePreviewBlockDrop({
 }
 
 // src/components/nle/useCompositionStack.ts
-import { useState as useState16, useCallback as useCallback19, useRef as useRef19, useEffect as useEffect13 } from "react";
+import { useState as useState17, useCallback as useCallback19, useRef as useRef20, useEffect as useEffect13 } from "react";
 function useCompositionStack({
   projectId,
   activeCompositionPath,
   onCompositionChange
 }) {
-  const [compositionStack, setCompositionStack] = useState16([
+  const [compositionStack, setCompositionStack] = useState17([
     { id: "master", label: "Master", previewUrl: `/api/projects/${projectId}/preview` }
   ]);
-  const onCompositionChangeRef = useRef19(onCompositionChange);
+  const onCompositionChangeRef = useRef20(onCompositionChange);
   onCompositionChangeRef.current = onCompositionChange;
   const updateCompositionStack = useCallback19((action) => {
     setCompositionStack((prev) => {
@@ -9272,9 +9402,9 @@ function useCompositionStack({
       return next;
     });
   }, []);
-  const masterSeekRef = useRef19(0);
-  const [compIdToSrc, setCompIdToSrc] = useState16(/* @__PURE__ */ new Map());
-  const compIdToSrcRef = useRef19(compIdToSrc);
+  const masterSeekRef = useRef20(0);
+  const [compIdToSrc, setCompIdToSrc] = useState17(/* @__PURE__ */ new Map());
+  const compIdToSrcRef = useRef20(compIdToSrc);
   compIdToSrcRef.current = compIdToSrc;
   const handleNavigateComposition = useCallback19(
     (index) => {
@@ -9706,6 +9836,13 @@ function applySoftReload(iframe, scriptText, onAsyncFailure) {
         delete timelines[key];
       }
     }
+    const seenTargets = new Set(allTargets);
+    for (const el of doc.querySelectorAll("[style*='transform']")) {
+      if (el.style.transform && "_gsap" in el && !seenTargets.has(el)) {
+        seenTargets.add(el);
+        allTargets.push(el);
+      }
+    }
     if (allTargets.length > 0 && win.gsap?.set) {
       const saved = [];
       for (const el of allTargets) {
@@ -9829,7 +9966,7 @@ var NLELayout = memo15(function NLELayout2({
   useEffect14(() => {
     usePlayerStore.getState().reset();
   }, [projectId]);
-  const stageRefForDrop = useRef20(null);
+  const stageRefForDrop = useRef21(null);
   const handleStageRef = useCallback20((ref) => {
     stageRefForDrop.current = ref.current;
   }, []);
@@ -9843,7 +9980,7 @@ var NLELayout = memo15(function NLELayout2({
     stageRef: stageRefForDrop,
     onBlockDrop: onPreviewBlockDrop
   });
-  const prevRefreshKeyRef = useRef20(refreshKey);
+  const prevRefreshKeyRef = useRef21(refreshKey);
   useEffect14(() => {
     if (refreshKey === prevRefreshKeyRef.current) return;
     prevRefreshKeyRef.current = refreshKey;
@@ -9946,7 +10083,7 @@ var NLELayout = memo15(function NLELayout2({
     },
     [onSplitElement, toLocalElement]
   );
-  const compIdToSrcRef = useRef20(compIdToSrc);
+  const compIdToSrcRef = useRef21(compIdToSrc);
   compIdToSrcRef.current = compIdToSrc;
   useMountEffect(() => {
     fetch(`/api/projects/${projectId}/files/index.html`).then((r) => r.json()).then((data) => {
@@ -9995,9 +10132,9 @@ var NLELayout = memo15(function NLELayout2({
       patching = false;
     });
   }, [compIdToSrc]);
-  const [timelineH, setTimelineH] = useState17(DEFAULT_TIMELINE_H);
-  const hasLoadedOnceRef = useRef20(false);
-  const [compositionLoading, setCompositionLoadingRaw] = useState17(true);
+  const [timelineH, setTimelineH] = useState18(DEFAULT_TIMELINE_H);
+  const hasLoadedOnceRef = useRef21(false);
+  const [compositionLoading, setCompositionLoadingRaw] = useState18(true);
   const setCompositionLoading = useCallback20((loading) => {
     if (!loading) hasLoadedOnceRef.current = true;
     if (loading && hasLoadedOnceRef.current) return;
@@ -10009,8 +10146,8 @@ var NLELayout = memo15(function NLELayout2({
   }, [compositionLoading, onCompositionLoadingChangeParent]);
   const fullscreenElement = useSyncExternalStore(subscribeFullscreen, getFullscreenElement);
   const isTimelineVisible = timelineVisible ?? true;
-  const isDragging = useRef20(false);
-  const containerRef = useRef20(null);
+  const isDragging = useRef21(false);
+  const containerRef = useRef21(null);
   const isFullscreen = fullscreenElement === containerRef.current && fullscreenElement != null;
   const toggleFullscreen = useCallback20(() => {
     if (!containerRef.current) return;
@@ -10022,7 +10159,7 @@ var NLELayout = memo15(function NLELayout2({
   }, []);
   const currentLevel = compositionStack[compositionStack.length - 1];
   const directUrl = compositionStack.length > 1 ? currentLevel.previewUrl : void 0;
-  const onIframeRefStable = useRef20(onIframeRef);
+  const onIframeRefStable = useRef21(onIframeRef);
   onIframeRefStable.current = onIframeRef;
   useEffect14(() => {
     onIframeRefStable.current?.(iframeRef.current);
@@ -10239,7 +10376,7 @@ var NLELayout = memo15(function NLELayout2({
 });
 
 // src/components/editor/SourceEditor.tsx
-import { useRef as useRef21, useCallback as useCallback21, useEffect as useEffect15, memo as memo16 } from "react";
+import { useRef as useRef22, useCallback as useCallback21, useEffect as useEffect15, memo as memo16 } from "react";
 import {
   EditorView,
   keymap,
@@ -10297,11 +10434,11 @@ var SourceEditor = memo16(function SourceEditor2({
   readOnly = false,
   revealOffset
 }) {
-  const editorRef = useRef21(null);
-  const containerRef = useRef21(null);
-  const onChangeRef = useRef21(onChange);
+  const editorRef = useRef22(null);
+  const containerRef = useRef22(null);
+  const onChangeRef = useRef22(onChange);
   onChangeRef.current = onChange;
-  const contentRef = useRef21(content);
+  const contentRef = useRef22(content);
   contentRef.current = content;
   const mountEditor = useCallback21(
     (node) => {
@@ -10369,7 +10506,7 @@ var SourceEditor = memo16(function SourceEditor2({
 });
 
 // src/components/editor/PropertyPanel.tsx
-import { memo as memo22, useEffect as useEffect24, useMemo as useMemo15, useRef as useRef31, useState as useState33 } from "react";
+import { memo as memo22, useEffect as useEffect24, useMemo as useMemo15, useRef as useRef32, useState as useState34 } from "react";
 
 // src/icons/SystemIcons.tsx
 import {
@@ -10769,7 +10906,7 @@ function readCurrentTime(win, fallback) {
 function applyStudioMotionFromDom(document2, currentTime) {
   const win = document2.defaultView;
   if (!win) return 0;
-  const gsap = win.gsap;
+  const gsap2 = win.gsap;
   win.__timelines = win.__timelines ?? {};
   win.__timelines[STUDIO_MOTION_TIMELINE_ID]?.kill?.();
   delete win.__timelines[STUDIO_MOTION_TIMELINE_ID];
@@ -10783,8 +10920,8 @@ function applyStudioMotionFromDom(document2, currentTime) {
       motionElements.push({ element: el, motion: motionData });
     }
   }
-  if (!gsap?.timeline || motionElements.length === 0) return 0;
-  const timeline = gsap.timeline({
+  if (!gsap2?.timeline || motionElements.length === 0) return 0;
+  const timeline = gsap2.timeline({
     paused: true,
     defaults: { overwrite: "auto" }
   });
@@ -12256,14 +12393,14 @@ function readGsapRuntimeValuesForPanel(gsapAnimId, gsapAnimations, element, prev
   const selector = element.id ? `#${element.id}` : element.selector;
   if (!selector) return null;
   try {
-    const gsap = iframe.contentWindow.gsap;
-    if (!gsap?.getProperty) return null;
+    const gsap2 = iframe.contentWindow.gsap;
+    if (!gsap2?.getProperty) return null;
     const el = iframe.contentDocument?.querySelector(selector);
     if (!el) return null;
     const propKeys = collectPanelPropKeys(gsapAnimations);
     const result = {};
     for (const prop of propKeys) {
-      const v = Number(gsap.getProperty(el, prop));
+      const v = Number(gsap2.getProperty(el, prop));
       if (Number.isFinite(v)) result[prop] = roundToCenti(v);
     }
     return Object.keys(result).length > 0 ? result : null;
@@ -12298,7 +12435,7 @@ function readGsapBorderRadiusForPanel(gsapRuntimeValues, gsapAnimations, element
 }
 
 // src/components/editor/propertyPanelPrimitives.tsx
-import { useCallback as useCallback22, useEffect as useEffect16, useRef as useRef22, useState as useState18 } from "react";
+import { useCallback as useCallback22, useEffect as useEffect16, useRef as useRef23, useState as useState19 } from "react";
 import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 function CommitField({
   value,
@@ -12306,11 +12443,11 @@ function CommitField({
   liveCommit,
   onCommit
 }) {
-  const [draft, setDraft] = useState18(value);
-  const commitTimerRef = useRef22(null);
-  const valueRef = useRef22(value);
-  const draftRef = useRef22(draft);
-  const inputRef = useRef22(null);
+  const [draft, setDraft] = useState19(value);
+  const commitTimerRef = useRef23(null);
+  const valueRef = useRef23(value);
+  const draftRef = useRef23(draft);
+  const inputRef = useRef23(null);
   valueRef.current = value;
   draftRef.current = draft;
   useEffect16(() => {
@@ -12349,7 +12486,7 @@ function CommitField({
       if (nextDraft !== valueRef.current) onCommit(nextDraft);
     }, 120);
   };
-  const scheduleCommitRef = useRef22(scheduleCommit);
+  const scheduleCommitRef = useRef23(scheduleCommit);
   scheduleCommitRef.current = scheduleCommit;
   return /* @__PURE__ */ jsx31(
     "input",
@@ -12390,7 +12527,7 @@ function MetricField({
   tooltip,
   onCommit
 }) {
-  const scrubRef = useRef22(null);
+  const scrubRef = useRef23(null);
   const handleScrubPointerDown = useCallback22(
     (e) => {
       if (disabled || !scrub) return;
@@ -12454,9 +12591,9 @@ function SliderControl({
   disabled,
   onCommit
 }) {
-  const [draft, setDraft] = useState18(value);
-  const commitTimerRef = useRef22(null);
-  const valueRef = useRef22(value);
+  const [draft, setDraft] = useState19(value);
+  const commitTimerRef = useRef23(null);
+  const valueRef = useRef23(value);
   valueRef.current = value;
   useEffect16(() => {
     setDraft(value);
@@ -12555,7 +12692,7 @@ function Section({
   accessory,
   defaultCollapsed = false
 }) {
-  const [collapsed, setCollapsed] = useState18(defaultCollapsed);
+  const [collapsed, setCollapsed] = useState19(defaultCollapsed);
   const collapseIcon = collapsed ? /* @__PURE__ */ jsx31(
     "svg",
     {
@@ -12684,7 +12821,7 @@ function createTransformCommitHandlers({
 import { classifyPropertyGroup } from "@hyperframes/core/gsap-parser";
 
 // src/components/editor/propertyPanelMediaSection.tsx
-import { useState as useState19 } from "react";
+import { useState as useState20 } from "react";
 import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 var MEDIA_TAGS = /* @__PURE__ */ new Set(["video", "audio"]);
 function isMediaElement(element) {
@@ -12714,7 +12851,7 @@ function MediaSection({
   const sourceDuration = Number.parseFloat(element.dataAttributes["source-duration"] ?? "") || el.duration || 0;
   const mediaStartMax = Math.max(30, Math.ceil(sourceDuration || mediaStart + 10));
   const srcAttr = el.getAttribute("src") ?? "";
-  const [copied, setCopied] = useState19(false);
+  const [copied, setCopied] = useState20(false);
   const absoluteSrc = projectDir && srcAttr && !srcAttr.startsWith("http") ? `${projectDir}/${srcAttr}` : srcAttr;
   return /* @__PURE__ */ jsx32(
     Section,
@@ -12903,8 +13040,8 @@ import {
   useCallback as useCallback24,
   useEffect as useEffect18,
   useMemo as useMemo11,
-  useRef as useRef24,
-  useState as useState21
+  useRef as useRef25,
+  useState as useState22
 } from "react";
 import {
   HF_COLOR_GRADING_ATTR,
@@ -12915,7 +13052,7 @@ import {
 } from "@hyperframes/core/color-grading";
 
 // src/components/editor/propertyPanelColorGradingControls.tsx
-import { useCallback as useCallback23, useEffect as useEffect17, useMemo as useMemo10, useRef as useRef23, useState as useState20 } from "react";
+import { useCallback as useCallback23, useEffect as useEffect17, useMemo as useMemo10, useRef as useRef24, useState as useState21 } from "react";
 import {
   HF_COLOR_GRADING_PRESETS,
   normalizeHfColorGrading
@@ -12974,10 +13111,10 @@ function ColorGradingSliderControl({
   onCommit,
   onReset
 }) {
-  const [draftState, setDraftState] = useState20(null);
-  const [inputDraft, setInputDraft] = useState20(null);
-  const commitTimerRef = useRef23(null);
-  const valueRef = useRef23(value);
+  const [draftState, setDraftState] = useState21(null);
+  const [inputDraft, setInputDraft] = useState21(null);
+  const commitTimerRef = useRef24(null);
+  const valueRef = useRef24(value);
   valueRef.current = value;
   useEffect17(
     () => () => {
@@ -13175,7 +13312,7 @@ function ColorGradingControls({
   onImportAssets,
   onCommitColorGrading
 }) {
-  const lutInputRef = useRef23(null);
+  const lutInputRef = useRef24(null);
   const lutAssets = useMemo10(
     () => assets.filter((asset) => LUT_EXT.test(asset)).sort((a, b) => a.localeCompare(b)),
     [assets]
@@ -13453,16 +13590,16 @@ function ColorGradingSection({
   onImportAssets,
   onSetAttributeLive
 }) {
-  const [grading, setGrading] = useState21(() => readColorGradingFromElement(element));
-  const [compareEnabled, setCompareEnabled] = useState21(false);
-  const [runtimeStatus, setRuntimeStatus] = useState21(() => ({
+  const [grading, setGrading] = useState22(() => readColorGradingFromElement(element));
+  const [compareEnabled, setCompareEnabled] = useState22(false);
+  const [runtimeStatus, setRuntimeStatus] = useState22(() => ({
     state: "pending",
     message: "Waiting for runtime"
   }));
-  const persistTimerRef = useRef24(null);
-  const pendingPersistValueRef = useRef24(void 0);
-  const onSetAttributeLiveRef = useRef24(onSetAttributeLive);
-  const compareEnabledRef = useRef24(compareEnabled);
+  const persistTimerRef = useRef25(null);
+  const pendingPersistValueRef = useRef25(void 0);
+  const onSetAttributeLiveRef = useRef25(onSetAttributeLive);
+  const compareEnabledRef = useRef25(compareEnabled);
   onSetAttributeLiveRef.current = onSetAttributeLive;
   compareEnabledRef.current = compareEnabled;
   const target = useMemo11(
@@ -13616,7 +13753,7 @@ function ColorGradingSection({
 }
 
 // src/components/editor/propertyPanelSections.tsx
-import { useEffect as useEffect22, useRef as useRef28, useState as useState27 } from "react";
+import { useEffect as useEffect22, useRef as useRef29, useState as useState28 } from "react";
 
 // src/components/editor/domEditingAgentPrompt.ts
 function formatBoundingBox(bounds) {
@@ -13696,11 +13833,11 @@ function buildAgentContextPreview(selection, activeCompPath) {
 }
 
 // src/components/editor/propertyPanelColor.tsx
-import { useCallback as useCallback25, useEffect as useEffect19, useLayoutEffect as useLayoutEffect2, useRef as useRef25, useState as useState22 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect19, useLayoutEffect as useLayoutEffect2, useRef as useRef26, useState as useState23 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/components/editor/floatingPanel.ts
-function clamp2(value, min, max) {
+function clamp3(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
 function resolveFloatingPanelPosition(anchor, viewport, panel, options) {
@@ -13708,7 +13845,7 @@ function resolveFloatingPanelPosition(anchor, viewport, panel, options) {
   const margin = options?.margin ?? 12;
   const maxLeft = Math.max(margin, viewport.width - panel.width - margin);
   const preferredLeft = anchor.left + anchor.width / 2 - panel.width / 2;
-  const left = clamp2(preferredLeft, margin, maxLeft);
+  const left = clamp3(preferredLeft, margin, maxLeft);
   const belowTop = anchor.bottom + offset;
   const aboveTop = anchor.top - panel.height - offset;
   const fitsBelow = belowTop + panel.height <= viewport.height - margin;
@@ -13716,13 +13853,13 @@ function resolveFloatingPanelPosition(anchor, viewport, panel, options) {
   if (fitsBelow || !fitsAbove) {
     return {
       left,
-      top: clamp2(belowTop, margin, Math.max(margin, viewport.height - panel.height - margin)),
+      top: clamp3(belowTop, margin, Math.max(margin, viewport.height - panel.height - margin)),
       placement: "bottom"
     };
   }
   return {
     left,
-    top: clamp2(aboveTop, margin, Math.max(margin, viewport.height - panel.height - margin)),
+    top: clamp3(aboveTop, margin, Math.max(margin, viewport.height - panel.height - margin)),
     placement: "top"
   };
 }
@@ -13742,7 +13879,7 @@ function ColorSlider({
   disabled,
   onCommit
 }) {
-  const trackRef = useRef25(null);
+  const trackRef = useRef26(null);
   const percent = (value - min) / (max - min) * 100;
   const commitFromClientX = (clientX) => {
     const rect = trackRef.current?.getBoundingClientRect();
@@ -13817,12 +13954,12 @@ function ColorField({
   disabled,
   onCommit
 }) {
-  const buttonRef = useRef25(null);
-  const panelRef = useRef25(null);
-  const [open, setOpen] = useState22(false);
-  const [panelPosition, setPanelPosition] = useState22(null);
-  const [draftColor, setDraftColor] = useState22(() => colorFromCss(value));
-  const [hexDraft, setHexDraft] = useState22(() => toHexColor(colorFromCss(value)).toUpperCase());
+  const buttonRef = useRef26(null);
+  const panelRef = useRef26(null);
+  const [open, setOpen] = useState23(false);
+  const [panelPosition, setPanelPosition] = useState23(null);
+  const [draftColor, setDraftColor] = useState23(() => colorFromCss(value));
+  const [hexDraft, setHexDraft] = useState23(() => toHexColor(colorFromCss(value)).toUpperCase());
   const hsv = rgbToHsv(draftColor);
   const hueColor = formatCssColor({
     ...hsvToRgb({ hue: hsv.hue, saturation: 1, value: 1 }),
@@ -14084,7 +14221,7 @@ function ColorField({
 }
 
 // src/components/editor/propertyPanelFont.tsx
-import { useEffect as useEffect20, useMemo as useMemo12, useRef as useRef26, useState as useState23 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo12, useRef as useRef27, useState as useState24 } from "react";
 
 // src/components/editor/fontAssets.ts
 var FONT_EXT_RE = /\.(eot|otf|ttc|ttf|woff2?)$/i;
@@ -14196,18 +14333,18 @@ function FontFamilyField({
   onCommit
 }) {
   const currentFamily = primaryFontFamily(value);
-  const containerRef = useRef26(null);
-  const inputRef = useRef26(null);
-  const fontInputRef = useRef26(null);
-  const [open, setOpen] = useState23(false);
-  const [query, setQuery] = useState23("");
-  const [localFonts, setLocalFonts] = useState23([]);
-  const [localFontData, setLocalFontData] = useState23([]);
-  const [googleFonts, setGoogleFonts] = useState23(() => [...POPULAR_GOOGLE_FONT_FAMILIES]);
-  const [loadingLocalFonts, setLoadingLocalFonts] = useState23(false);
-  const [loadingGoogleFonts, setLoadingGoogleFonts] = useState23(false);
-  const [importingFonts, setImportingFonts] = useState23(false);
-  const [fontNotice, setFontNotice] = useState23(null);
+  const containerRef = useRef27(null);
+  const inputRef = useRef27(null);
+  const fontInputRef = useRef27(null);
+  const [open, setOpen] = useState24(false);
+  const [query, setQuery] = useState24("");
+  const [localFonts, setLocalFonts] = useState24([]);
+  const [localFontData, setLocalFontData] = useState24([]);
+  const [googleFonts, setGoogleFonts] = useState24(() => [...POPULAR_GOOGLE_FONT_FAMILIES]);
+  const [loadingLocalFonts, setLoadingLocalFonts] = useState24(false);
+  const [loadingGoogleFonts, setLoadingGoogleFonts] = useState24(false);
+  const [importingFonts, setImportingFonts] = useState24(false);
+  const [fontNotice, setFontNotice] = useState24(null);
   const canQueryLocalFonts = typeof window !== "undefined" && typeof window.queryLocalFonts === "function";
   useEffect20(() => {
     if (!open) return;
@@ -14496,7 +14633,7 @@ function FontFamilyField({
 }
 
 // src/components/editor/propertyPanelStyleSections.tsx
-import { useEffect as useEffect21, useState as useState26 } from "react";
+import { useEffect as useEffect21, useState as useState27 } from "react";
 
 // src/components/editor/gradientValue.ts
 var RADIAL_SIZE_KEYWORDS = [
@@ -14557,7 +14694,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 : clamp3(parsed, 0, 100);
+  return parsed == null ? fallback : clamp4(parsed, 0, 100);
 }
 function parseAngleToken(value) {
   const trimmed = value?.trim().toLowerCase();
@@ -14579,13 +14716,13 @@ function trailingPercentStart(value) {
   if (start === 0 || !isWhitespace(withoutUnit[start - 1])) return null;
   return start;
 }
-function clamp3(value, min, max) {
+function clamp4(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 : clamp3(parsed, 0, 100);
+  return parsed == null ? fallback : clamp4(parsed, 0, 100);
 }
 function parseColorStop(raw) {
   const trimmed = raw.trim();
@@ -14616,7 +14753,7 @@ function normalizeStops(stops) {
   }));
   return result.map((stop) => ({
     color: stop.color,
-    position: round(clamp3(stop.position, 0, 100))
+    position: round(clamp4(stop.position, 0, 100))
   }));
 }
 function splitGradientArgs(value) {
@@ -14779,7 +14916,7 @@ function formatHex(channel) {
   return channel.toString(16).padStart(2, "0");
 }
 function interpolateGradientStopColor(model, position) {
-  const clampedPosition = clamp3(position, 0, 100);
+  const clampedPosition = clamp4(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;
@@ -14803,7 +14940,7 @@ function interpolateGradientStopColor(model, position) {
   return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 }
 function insertGradientStop(model, position) {
-  const clampedPosition = round(clamp3(position, 0, 100));
+  const clampedPosition = round(clamp4(position, 0, 100));
   const color = interpolateGradientStopColor(model, clampedPosition);
   const nextStops = [...model.stops, { color, position: clampedPosition }].sort(
     (a, b) => a.position - b.position
@@ -14840,7 +14977,7 @@ function parseColorString(value) {
 }
 
 // src/components/editor/propertyPanelFill.tsx
-import { useMemo as useMemo13, useRef as useRef27, useState as useState24 } from "react";
+import { useMemo as useMemo13, useRef as useRef28, useState as useState25 } from "react";
 import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
 function normalizeProjectPath(value) {
   const trimmed = value.trim();
@@ -14881,8 +15018,8 @@ function ImageFillField({
   onCommit,
   onImportAssets
 }) {
-  const fileInputRef = useRef27(null);
-  const [uploading, setUploading] = useState24(false);
+  const fileInputRef = useRef28(null);
+  const [uploading, setUploading] = useState25(false);
   const imageAssets = useMemo13(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
   const selectedAsset = useMemo13(
     () => resolveSelectedAsset(value, sourceFile, imageAssets),
@@ -14981,7 +15118,7 @@ function GradientField({
   disabled,
   onCommit
 }) {
-  const previewRef = useRef27(null);
+  const previewRef = useRef28(null);
   const parsed = parseGradient(value) ?? buildDefaultGradientModel(fallbackColor);
   const commit = (next) => onCommit(serializeGradient(next));
   const patch = (partial) => commit({ ...parsed, ...partial });
@@ -15210,7 +15347,7 @@ function GradientField({
 }
 
 // src/components/editor/BorderRadiusEditor.tsx
-import { useCallback as useCallback26, useState as useState25 } from "react";
+import { useCallback as useCallback26, useState as useState26 } from "react";
 import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
 var PREVIEW_W = 72;
 var PREVIEW_H = 52;
@@ -15231,7 +15368,7 @@ function BorderRadiusEditor({
   onCommit
 }) {
   const uniform = tl === tr && tr === br && br === bl;
-  const [linked, setLinked] = useState25(uniform);
+  const [linked, setLinked] = useState26(uniform);
   const maxVal = Math.max(tl, tr, br, bl, 1);
   const sTL = scaleRadius(tl, maxVal);
   const sTR = scaleRadius(tr, maxVal);
@@ -15451,7 +15588,7 @@ function StyleSections({
   const backgroundImage = styles["background-image"] ?? "none";
   const hasTextControls = isTextEditableSelection(element);
   const fillMode = backgroundImage && backgroundImage !== "none" ? backgroundImage.includes("gradient") ? "Gradient" : "Image" : "Solid";
-  const [preferredFillMode, setPreferredFillMode] = useState26(fillMode);
+  const [preferredFillMode, setPreferredFillMode] = useState27(fillMode);
   const imageUrl = extractBackgroundImageUrl(backgroundImage);
   useEffect21(() => {
     setPreferredFillMode(fillMode);
@@ -15838,11 +15975,11 @@ function TextAreaField({
   autoFocus,
   onCommit
 }) {
-  const [draft, setDraft] = useState27(value);
-  const textareaRef = useRef28(null);
-  const commitTimerRef = useRef28(null);
-  const focusedRef = useRef28(false);
-  const valueRef = useRef28(value);
+  const [draft, setDraft] = useState28(value);
+  const textareaRef = useRef29(null);
+  const commitTimerRef = useRef29(null);
+  const focusedRef = useRef29(false);
+  const valueRef = useRef29(value);
   valueRef.current = value;
   useEffect22(() => {
     if (focusedRef.current) return;
@@ -16092,7 +16229,7 @@ function TextSection({
   onRemoveTextField
 }) {
   const hasTextControls = isTextEditableSelection(element);
-  const [activeTextFieldKey, setActiveTextFieldKey] = useState27(
+  const [activeTextFieldKey, setActiveTextFieldKey] = useState28(
     element.textFields[0]?.key ?? null
   );
   useEffect22(() => {
@@ -16185,7 +16322,7 @@ function TextSection({
 }
 
 // src/components/editor/GsapAnimationSection.tsx
-import { memo as memo19, useState as useState30 } from "react";
+import { memo as memo19, useState as useState31 } from "react";
 
 // src/components/editor/gsapAnimationConstants.ts
 var METHOD_LABELS = {
@@ -16350,7 +16487,7 @@ var ADD_METHOD_LABELS = {
 };
 
 // src/components/editor/AnimationCard.tsx
-import { memo as memo18, useCallback as useCallback29, useMemo as useMemo14, useState as useState29 } from "react";
+import { memo as memo18, useCallback as useCallback29, useMemo as useMemo14, useState as useState30 } from "react";
 import { SUPPORTED_EASES, SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
 
 // src/components/editor/gsapAnimationHelpers.ts
@@ -16388,7 +16525,7 @@ function buildTweenSummary(animation) {
 }
 
 // src/components/editor/EaseCurveSection.tsx
-import { useCallback as useCallback27, useRef as useRef29, useState as useState28 } from "react";
+import { useCallback as useCallback27, useRef as useRef30, useState as useState29 } from "react";
 import { Fragment as Fragment12, jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
 var PRESET_GRID_EASES = [
   "none",
@@ -16479,12 +16616,12 @@ function EaseCurveSection({
   const curveFromPreset = EASE_CURVES[ease];
   const customPoints = isCustom ? parseCustomEaseFromString(ease) : null;
   const curve = isCustom && customPoints ? [customPoints.x1, customPoints.y1, customPoints.x2, customPoints.y2] : curveFromPreset ?? null;
-  const [draft, setDraft] = useState28(null);
-  const [progress, setProgress] = useState28(null);
-  const [hover, setHover] = useState28(null);
-  const draggingRef = useRef29(null);
-  const svgRef = useRef29(null);
-  const rafRef = useRef29(0);
+  const [draft, setDraft] = useState29(null);
+  const [progress, setProgress] = useState29(null);
+  const [hover, setHover] = useState29(null);
+  const draggingRef = useRef30(null);
+  const svgRef = useRef30(null);
+  const rafRef = useRef30(0);
   const play = useCallback27(() => {
     const start = performance.now();
     const dur = 1100;
@@ -17168,10 +17305,10 @@ var AnimationCard = memo18(function AnimationCard2({
   onSetAllKeyframeEases,
   onUnroll
 }) {
-  const [expanded, setExpanded] = useState29(defaultExpanded);
-  const [addingProp, setAddingProp] = useState29(false);
-  const [addingFromProp, setAddingFromProp] = useState29(false);
-  const [expandedKfPct, setExpandedKfPct] = useState29(null);
+  const [expanded, setExpanded] = useState30(defaultExpanded);
+  const [addingProp, setAddingProp] = useState30(false);
+  const [addingFromProp, setAddingFromProp] = useState30(false);
+  const [expandedKfPct, setExpandedKfPct] = useState30(null);
   const usedProps = useMemo14(
     () => new Set(Object.keys(animation.properties)),
     [animation.properties]
@@ -17228,7 +17365,7 @@ var AnimationCard = memo18(function AnimationCard2({
     },
     [animation.id, onUpdateMeta]
   );
-  const [copied, setCopied] = useState29(false);
+  const [copied, setCopied] = useState30(false);
   const methodLabel = METHOD_LABELS[animation.method] ?? animation.method;
   const easeName = (animation.keyframes ? animation.keyframes.easeEach : void 0) ?? animation.ease ?? "none";
   const easeLabel = easeName.startsWith("custom(") ? "Custom curve" : EASE_LABELS[easeName] ?? easeName;
@@ -17505,7 +17642,7 @@ var GsapAnimationSection = memo19(function GsapAnimationSection2({
   onSetAllKeyframeEases,
   onUnroll
 }) {
-  const [addMenuOpen, setAddMenuOpen] = useState30(false);
+  const [addMenuOpen, setAddMenuOpen] = useState31(false);
   return /* @__PURE__ */ jsxs40(Section, { title: "Animation", icon: /* @__PURE__ */ jsx47(Film, { size: 15 }), children: [
     multipleTimelines && /* @__PURE__ */ jsx47("p", { className: "mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400", children: "This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss \u2014 consolidate into a single timeline to enable editing." }),
     unsupportedTimelinePattern && /* @__PURE__ */ jsx47("p", { className: "mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400", children: `This timeline uses a computed key (window.__timelines[variable]) the editor can't resolve statically. Use a string-literal key (window.__timelines["id"]) or a variable declaration (const tl = gsap.timeline()) to enable editing.` }),
@@ -17572,7 +17709,7 @@ var GsapAnimationSection = memo19(function GsapAnimationSection2({
 });
 
 // src/components/editor/propertyPanel3dTransform.tsx
-import { useState as useState32 } from "react";
+import { useState as useState33 } from "react";
 
 // src/components/editor/KeyframeNavigation.tsx
 import { memo as memo21 } from "react";
@@ -17753,7 +17890,7 @@ var KeyframeNavigation = memo21(function KeyframeNavigation2({
 });
 
 // src/components/editor/Transform3DCube.tsx
-import { useEffect as useEffect23, useRef as useRef30, useState as useState31 } from "react";
+import { useEffect as useEffect23, useRef as useRef31, useState as useState32 } from "react";
 
 // src/components/editor/transform3dProjection.ts
 var DEG = Math.PI / 180;
@@ -17867,14 +18004,14 @@ function Transform3DCube({
   onKeyframe,
   keyframed
 }) {
-  const [draft, setDraft] = useState31(null);
-  const [depthDraft, setDepthDraft] = useState31(null);
-  const dragRef = useRef30(null);
+  const [draft, setDraft] = useState32(null);
+  const [depthDraft, setDepthDraft] = useState32(null);
+  const dragRef = useRef31(null);
   const shown = draft ?? pose;
   const shownZ = depthDraft ?? z;
-  const svgRef = useRef30(null);
+  const svgRef = useRef31(null);
   const lens = perspective > 0 ? perspective : defaultPerspective;
-  const depthRef = useRef30({ z, onDepthDraft, onDepthCommit, lens });
+  const depthRef = useRef31({ z, onDepthDraft, onDepthCommit, lens });
   depthRef.current = { z, onDepthDraft, onDepthCommit, lens };
   useEffect23(() => {
     const el = svgRef.current;
@@ -18244,7 +18381,7 @@ function PropertyPanel3dTransform({
   onConvertToKeyframes,
   onLivePreviewProps
 }) {
-  const [collapsed, setCollapsed] = useState32(false);
+  const [collapsed, setCollapsed] = useState33(false);
   const ctx2 = {
     element,
     gsapRuntimeValues,
@@ -18510,12 +18647,12 @@ var PropertyPanel = memo22(function PropertyPanel2({
 }) {
   const styles = element?.computedStyles ?? EMPTY_STYLES;
   const { showToast } = useStudioShellContext();
-  const [clipboardCopied, setClipboardCopied] = useState33(false);
-  const clipboardTimerRef = useRef31(void 0);
+  const [clipboardCopied, setClipboardCopied] = useState34(false);
+  const clipboardTimerRef = useRef32(void 0);
   const storeTime = usePlayerStore((s) => s.currentTime);
   const isPlaying = usePlayerStore((s) => s.isPlaying);
-  const liveTimeRef = useRef31(storeTime);
-  const [, forceRender] = useState33(0);
+  const liveTimeRef = useRef32(storeTime);
+  const [, forceRender] = useState34(0);
   useEffect24(() => {
     if (!isPlaying) return;
     let timerId = 0;
@@ -18934,11 +19071,11 @@ var PropertyPanel = memo22(function PropertyPanel2({
 });
 
 // src/components/editor/FileTree.tsx
-import { memo as memo24, useState as useState35, useCallback as useCallback31, useMemo as useMemo17, useRef as useRef33 } from "react";
+import { memo as memo24, useState as useState36, useCallback as useCallback31, useMemo as useMemo17, useRef as useRef34 } from "react";
 import { Plus as Plus2, FolderSimplePlus as FolderSimplePlus2 } from "@phosphor-icons/react";
 
 // src/components/editor/FileTreeNodes.tsx
-import { memo as memo23, useState as useState34, useCallback as useCallback30, useMemo as useMemo16, useRef as useRef32, useEffect as useEffect25 } from "react";
+import { memo as memo23, useState as useState35, useCallback as useCallback30, useMemo as useMemo16, useRef as useRef33, useEffect as useEffect25 } from "react";
 import {
   PencilSimple,
   Copy,
@@ -19053,7 +19190,7 @@ function ContextMenu({
   onDuplicate,
   onDelete
 }) {
-  const menuRef = useRef32(null);
+  const menuRef = useRef33(null);
   useEffect25(() => {
     const handleClickOutside = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
@@ -19182,9 +19319,9 @@ function InlineInput({
   onCommit,
   onCancel
 }) {
-  const inputRef = useRef32(null);
-  const committedRef = useRef32(false);
-  const [value, setValue] = useState34(defaultValue);
+  const inputRef = useRef33(null);
+  const committedRef = useRef33(false);
+  const [value, setValue] = useState35(defaultValue);
   useEffect25(() => {
     const el = inputRef.current;
     if (!el) return;
@@ -19246,7 +19383,7 @@ function DeleteConfirm({
   onConfirm,
   onCancel
 }) {
-  const ref = useRef32(null);
+  const ref = useRef33(null);
   useEffect25(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") onCancel();
@@ -19364,7 +19501,7 @@ var TreeFolder = memo23(function TreeFolder2({
   dragOverFolder,
   lintFindingsByFile
 }) {
-  const [isOpen, setIsOpen] = useState34(defaultOpen);
+  const [isOpen, setIsOpen] = useState35(defaultOpen);
   const toggle = useCallback30(() => setIsOpen((v) => !v), []);
   const children = useMemo16(() => sortChildren(node.children), [node.children]);
   const Chevron = isOpen ? ChevronDown : ChevronRight;
@@ -19499,11 +19636,11 @@ var FileTree = memo24(function FileTree2({
 }) {
   const tree = useMemo17(() => buildTree(files), [files]);
   const children = useMemo17(() => sortChildren(tree.children), [tree]);
-  const [contextMenu, setContextMenu] = useState35(null);
-  const [inlineInput, setInlineInput] = useState35(null);
-  const [deleteTarget, setDeleteTarget] = useState35(null);
-  const [dragOverFolder, setDragOverFolder] = useState35(null);
-  const dragSourceRef = useRef33(null);
+  const [contextMenu, setContextMenu] = useState36(null);
+  const [inlineInput, setInlineInput] = useState36(null);
+  const [deleteTarget, setDeleteTarget] = useState36(null);
+  const [dragOverFolder, setDragOverFolder] = useState36(null);
+  const dragSourceRef = useRef34(null);
   const hasFileOps = !!(onCreateFile || onCreateFolder || onDeleteFile || onRenameFile || onDuplicateFile);
   const handleContextMenu = useCallback31(
     (e, path, isFolder) => {
@@ -19739,14 +19876,14 @@ var FileTree = memo24(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState91, useCallback as useCallback106, useRef as useRef89, useMemo as useMemo37, useEffect as useEffect66, useLayoutEffect as useLayoutEffect3 } from "react";
+import { useState as useState92, useCallback as useCallback108, useRef as useRef90, useMemo as useMemo37, useEffect as useEffect67, useLayoutEffect as useLayoutEffect3 } from "react";
 
 // src/components/renders/useRenderQueue.ts
-import { useState as useState36, useEffect as useEffect26, useCallback as useCallback32, useRef as useRef34, useMemo as useMemo18 } from "react";
+import { useState as useState37, useEffect as useEffect26, useCallback as useCallback32, useRef as useRef35, useMemo as useMemo18 } from "react";
 function useRenderQueue(projectId) {
-  const [jobs, setJobs] = useState36([]);
-  const eventSourceRef = useRef34(null);
-  const activeJobRef = useRef34(null);
+  const [jobs, setJobs] = useState37([]);
+  const eventSourceRef = useRef35(null);
+  const activeJobRef = useRef35(null);
   const loadRenders = useCallback32(async () => {
     if (!projectId) return;
     try {
@@ -19916,7 +20053,7 @@ function useRenderQueue(projectId) {
 }
 
 // src/components/LintModal.tsx
-import { useState as useState37 } from "react";
+import { useState as useState38 } from "react";
 import { XIcon, WarningIcon, CheckCircleIcon, CaretRightIcon } from "@phosphor-icons/react";
 import { jsx as jsx58, jsxs as jsxs49 } from "react/jsx-runtime";
 function LintModal({
@@ -19927,7 +20064,7 @@ function LintModal({
   const errors = findings.filter((f) => f.severity === "error");
   const warnings = findings.filter((f) => f.severity === "warning");
   const hasIssues = findings.length > 0;
-  const [copied, setCopied] = useState37(false);
+  const [copied, setCopied] = useState38(false);
   const handleCopyToAgent = async () => {
     const lines = findings.map((f) => {
       let line = `[${f.severity}] ${f.message}`;
@@ -20036,7 +20173,7 @@ ${lines.join("\n\n")}`;
 }
 
 // src/components/AskAgentModal.tsx
-import { useState as useState38, useRef as useRef35 } from "react";
+import { useState as useState39, useRef as useRef36 } from "react";
 
 // src/utils/studioHelpers.ts
 function getTimelineElementLabel(element) {
@@ -20218,8 +20355,8 @@ function AskAgentModal({
   onSubmit,
   onClose
 }) {
-  const [value, setValue] = useState38("");
-  const inputRef = useRef35(null);
+  const [value, setValue] = useState39("");
+  const inputRef = useRef36(null);
   const modalPositionStyle = getAgentModalPositionStyle(anchorPoint);
   useMountEffect(() => {
     requestAnimationFrame(() => inputRef.current?.focus());
@@ -20458,7 +20595,7 @@ function SaveQueuePausedBanner({ message, onDismiss }) {
 }
 
 // src/captions/hooks/useCaptionSync.ts
-import { useCallback as useCallback33, useRef as useRef36 } from "react";
+import { useCallback as useCallback33, useRef as useRef37 } from "react";
 function buildOverrides(model) {
   const entries = [];
   let globalWordIndex = 0;
@@ -20489,10 +20626,10 @@ function buildOverrides(model) {
   return entries;
 }
 function useCaptionSync(projectId) {
-  const projectIdRef = useRef36(projectId);
+  const projectIdRef = useRef37(projectId);
   projectIdRef.current = projectId;
-  const debounceRef = useRef36(null);
-  const suppressSaveRef = useRef36(false);
+  const debounceRef = useRef37(null);
+  const suppressSaveRef = useRef37(false);
   const save = useCallback33(() => {
     const state = useCaptionStore.getState();
     if (!state.model || !state.sourceFilePath || !state.isEditMode) return;
@@ -20581,7 +20718,7 @@ function useCaptionSync(projectId) {
 }
 
 // src/hooks/usePersistentEditHistory.ts
-import { useCallback as useCallback34, useEffect as useEffect27, useMemo as useMemo19, useRef as useRef37, useState as useState39 } from "react";
+import { useCallback as useCallback34, useEffect as useEffect27, useMemo as useMemo19, useRef as useRef38, useState as useState40 } from "react";
 
 // src/utils/editHistory.ts
 var DEFAULT_MAX_ENTRIES = 100;
@@ -20931,10 +21068,10 @@ function usePersistentEditHistory(options) {
     [options.storage]
   );
   const now = options.now ?? Date.now;
-  const [state, setState] = useState39(() => createEmptyEditHistory());
-  const [loaded, setLoaded] = useState39(false);
+  const [state, setState] = useState40(() => createEmptyEditHistory());
+  const [loaded, setLoaded] = useState40(false);
   const projectId = options.projectId;
-  const storeRef = useRef37(null);
+  const storeRef = useRef38(null);
   useEffect27(() => {
     let cancelled = false;
     const emptyState = createEmptyEditHistory();
@@ -20991,25 +21128,25 @@ function usePersistentEditHistory(options) {
 }
 
 // src/hooks/usePanelLayout.ts
-import { useState as useState40, useCallback as useCallback35, useRef as useRef38 } from "react";
+import { useState as useState41, useCallback as useCallback35, useRef as useRef39 } from "react";
 function getInitialRightInspectorPanes(tab) {
   if (tab === "layers") return { layers: true, design: false };
   return { layers: false, design: true };
 }
 function usePanelLayout(initialState2) {
-  const [leftWidth, setLeftWidth] = useState40(240);
-  const [rightWidth, setRightWidth] = useState40(400);
-  const [leftCollapsed, setLeftCollapsed] = useState40(
+  const [leftWidth, setLeftWidth] = useState41(240);
+  const [rightWidth, setRightWidth] = useState41(400);
+  const [leftCollapsed, setLeftCollapsed] = useState41(
     () => readStudioUiPreferences().leftCollapsed ?? false
   );
-  const [rightCollapsed, setRightCollapsed] = useState40(initialState2?.rightCollapsed ?? true);
-  const [rightPanelTab, setRightPanelTab] = useState40(
+  const [rightCollapsed, setRightCollapsed] = useState41(initialState2?.rightCollapsed ?? true);
+  const [rightPanelTab, setRightPanelTab] = useState41(
     initialState2?.rightPanelTab ?? "renders"
   );
-  const [rightInspectorPanes, setRightInspectorPanes] = useState40(
+  const [rightInspectorPanes, setRightInspectorPanes] = useState41(
     () => getInitialRightInspectorPanes(initialState2?.rightPanelTab)
   );
-  const panelDragRef = useRef38(null);
+  const panelDragRef = useRef39(null);
   const toggleLeftSidebar = useCallback35(() => {
     setLeftCollapsed((collapsed) => {
       writeStudioUiPreferences({ leftCollapsed: !collapsed });
@@ -21084,7 +21221,7 @@ function usePanelLayout(initialState2) {
 }
 
 // src/hooks/useFileManager.ts
-import { useState as useState42, useCallback as useCallback38, useRef as useRef40 } from "react";
+import { useState as useState43, useCallback as useCallback38, useRef as useRef41 } from "react";
 
 // src/utils/studioSaveDiagnostics.ts
 var STUDIO_SAVE_ATTEMPT_PROPERTY = "__studioSaveAttempt";
@@ -21227,12 +21364,12 @@ async function retryStudioSave(operation, options = {}) {
 }
 
 // src/hooks/useFileTree.ts
-import { useState as useState41, useCallback as useCallback36, useEffect as useEffect28, useMemo as useMemo20 } from "react";
+import { useState as useState42, useCallback as useCallback36, useEffect as useEffect28, useMemo as useMemo20 } from "react";
 function useFileTree({ projectId, projectIdRef }) {
-  const [projectDir, setProjectDir] = useState41(null);
-  const [fileTree, setFileTree] = useState41([]);
-  const [compositionPaths, setCompositionPaths] = useState41([]);
-  const [fileTreeLoaded, setFileTreeLoaded] = useState41(false);
+  const [projectDir, setProjectDir] = useState42(null);
+  const [fileTree, setFileTree] = useState42([]);
+  const [compositionPaths, setCompositionPaths] = useState42([]);
+  const [fileTreeLoaded, setFileTreeLoaded] = useState42(false);
   useEffect28(() => {
     if (!projectId) {
       setFileTreeLoaded(false);
@@ -21286,7 +21423,7 @@ function useFileTree({ projectId, projectIdRef }) {
 }
 
 // src/hooks/useEditorSave.ts
-import { useCallback as useCallback37, useRef as useRef39 } from "react";
+import { useCallback as useCallback37, useRef as useRef40 } from "react";
 function useEditorSave({
   editingPathRef,
   projectIdRef,
@@ -21296,8 +21433,8 @@ function useEditorSave({
   domEditSaveTimestampRef,
   setRefreshKey
 }) {
-  const saveRafRef = useRef39(null);
-  const refreshRafRef = useRef39(null);
+  const saveRafRef = useRef40(null);
+  const refreshRafRef = useRef40(null);
   const handleContentChange = useCallback37(
     (content) => {
       const pid = projectIdRef.current;
@@ -21351,13 +21488,13 @@ function useFileManager({
   domEditSaveTimestampRef,
   setRefreshKey
 }) {
-  const [editingFile, setEditingFile] = useState42(null);
-  const [revealSourceOffset, setRevealSourceOffset] = useState42(null);
-  const editingPathRef = useRef40(editingFile?.path);
+  const [editingFile, setEditingFile] = useState43(null);
+  const [revealSourceOffset, setRevealSourceOffset] = useState43(null);
+  const editingPathRef = useRef41(editingFile?.path);
   editingPathRef.current = editingFile?.path;
-  const projectIdRef = useRef40(projectId);
+  const projectIdRef = useRef41(projectId);
   projectIdRef.current = projectId;
-  const importedFontAssetsRef = useRef40([]);
+  const importedFontAssetsRef = useRef41([]);
   const {
     projectDir,
     fileTree,
@@ -21423,8 +21560,8 @@ function useFileManager({
     domEditSaveTimestampRef,
     setRefreshKey
   });
-  const revealRequestIdRef = useRef40(0);
-  const revealAbortRef = useRef40(null);
+  const revealRequestIdRef = useRef41(0);
+  const revealAbortRef = useRef41(null);
   const handleFileSelect = useCallback38((path) => {
     const pid = projectIdRef.current;
     if (!pid) return;
@@ -21683,7 +21820,7 @@ function useFileManager({
 }
 
 // src/hooks/usePreviewPersistence.ts
-import { useCallback as useCallback39, useRef as useRef41, useState as useState43 } from "react";
+import { useCallback as useCallback39, useRef as useRef42, useState as useState44 } from "react";
 
 // src/utils/domEditSaveQueue.ts
 var DEFAULT_FAILURE_THRESHOLD = 5;
@@ -21791,12 +21928,12 @@ function usePreviewPersistence({
 }) {
   void _recordEdit;
   void _activeCompPathRef;
-  const [domEditSaveQueuePaused, setDomEditSaveQueuePaused] = useState43(null);
-  const domTextCommitVersionRef = useRef41(0);
-  const showToastRef = useRef41(showToast);
+  const [domEditSaveQueuePaused, setDomEditSaveQueuePaused] = useState44(null);
+  const domTextCommitVersionRef = useRef42(0);
+  const showToastRef = useRef42(showToast);
   showToastRef.current = showToast;
-  const domEditSaveQueueRef = useRef41(null);
-  const applyStudioManualEditsToPreviewRef = useRef41(async () => {
+  const domEditSaveQueueRef = useRef42(null);
+  const applyStudioManualEditsToPreviewRef = useRef42(async () => {
   });
   if (!domEditSaveQueueRef.current) {
     domEditSaveQueueRef.current = createDomEditSaveQueue({
@@ -21816,7 +21953,7 @@ function usePreviewPersistence({
       }
     });
   }
-  const projectIdRef = useRef41(projectId);
+  const projectIdRef = useRef42(projectId);
   projectIdRef.current = projectId;
   const queueDomEditSave = useCallback39((save) => {
     return domEditSaveQueueRef.current?.enqueue(save) ?? save();
@@ -21897,10 +22034,10 @@ function usePreviewPersistence({
 }
 
 // src/hooks/useTimelineEditing.ts
-import { useCallback as useCallback41, useRef as useRef43 } from "react";
+import { useCallback as useCallback41, useRef as useRef44 } from "react";
 
 // src/hooks/useRazorSplit.ts
-import { useCallback as useCallback40, useRef as useRef42 } from "react";
+import { useCallback as useCallback40, useRef as useRef43 } from "react";
 function generateSplitId(existingIds, baseId) {
   let newId = `${baseId}-split`;
   let suffix = 2;
@@ -22007,7 +22144,7 @@ function useRazorSplit({
   reloadPreview,
   isRecordingRef
 }) {
-  const projectIdRef = useRef42(projectId);
+  const projectIdRef = useRef43(projectId);
   projectIdRef.current = projectId;
   const handleRazorSplit = useCallback40(
     // fallow-ignore-next-line complexity
@@ -22732,10 +22869,10 @@ function useTimelineEditing({
   sdkSession,
   forceReloadSdkSession
 }) {
-  const projectIdRef = useRef43(projectId);
+  const projectIdRef = useRef44(projectId);
   projectIdRef.current = projectId;
-  const editQueueRef = useRef43(Promise.resolve());
-  const lastBlockedTimelineToastAtRef = useRef43(0);
+  const editQueueRef = useRef44(Promise.resolve());
+  const lastBlockedTimelineToastAtRef = useRef44(0);
   const enqueueEdit = useCallback41(
     (element, label, buildPatches, coalesceKey) => {
       if (isRecordingRef?.current) {
@@ -23139,7 +23276,7 @@ function useTimelineEditing({
 import { useCallback as useCallback64 } from "react";
 
 // src/hooks/useAskAgentModal.ts
-import { useState as useState44, useCallback as useCallback42, useRef as useRef44, useEffect as useEffect29 } from "react";
+import { useState as useState45, useCallback as useCallback42, useRef as useRef45, useEffect as useEffect29 } from "react";
 function useAskAgentModal({
   activeCompPath,
   projectDir,
@@ -23148,14 +23285,14 @@ function useAskAgentModal({
   domEditSelectionRef,
   domEditSelection
 }) {
-  const [agentPromptTagSnippet, setAgentPromptTagSnippet] = useState44();
-  const [agentPromptSelectionContext, setAgentPromptSelectionContext] = useState44();
-  const [agentModalAnchorPoint, setAgentModalAnchorPoint] = useState44(
+  const [agentPromptTagSnippet, setAgentPromptTagSnippet] = useState45();
+  const [agentPromptSelectionContext, setAgentPromptSelectionContext] = useState45();
+  const [agentModalAnchorPoint, setAgentModalAnchorPoint] = useState45(
     null
   );
-  const [copiedAgentPrompt, setCopiedAgentPrompt] = useState44(false);
-  const [agentModalOpen, setAgentModalOpen] = useState44(false);
-  const copiedAgentTimerRef = useRef44(null);
+  const [copiedAgentPrompt, setCopiedAgentPrompt] = useState45(false);
+  const [agentModalOpen, setAgentModalOpen] = useState45(false);
+  const copiedAgentTimerRef = useRef45(null);
   const preloadAgentPromptSnippet = useCallback42(
     async (selection) => {
       const pid = projectIdRef.current;
@@ -23250,7 +23387,7 @@ function useAskAgentModal({
 }
 
 // src/hooks/useDomSelection.ts
-import { useState as useState45, useCallback as useCallback43, useRef as useRef45, useEffect as useEffect30 } from "react";
+import { useState as useState46, useCallback as useCallback43, useRef as useRef46, useEffect as useEffect30 } from "react";
 
 // src/utils/studioPreviewHelpers.ts
 var FULL_BLEED_RATIO = 0.95;
@@ -23476,14 +23613,14 @@ function useDomSelection({
   refreshKey,
   rightPanelTab
 }) {
-  const [domEditSelection, setDomEditSelection] = useState45(null);
-  const [domEditGroupSelections, setDomEditGroupSelections] = useState45([]);
-  const [domEditHoverSelection, setDomEditHoverSelection] = useState45(null);
-  const [activeGroupElement, setActiveGroupElementState] = useState45(null);
-  const domEditSelectionRef = useRef45(domEditSelection);
-  const domEditGroupSelectionsRef = useRef45(domEditGroupSelections);
-  const domEditHoverSelectionRef = useRef45(domEditHoverSelection);
-  const activeGroupElementRef = useRef45(activeGroupElement);
+  const [domEditSelection, setDomEditSelection] = useState46(null);
+  const [domEditGroupSelections, setDomEditGroupSelections] = useState46([]);
+  const [domEditHoverSelection, setDomEditHoverSelection] = useState46(null);
+  const [activeGroupElement, setActiveGroupElementState] = useState46(null);
+  const domEditSelectionRef = useRef46(domEditSelection);
+  const domEditGroupSelectionsRef = useRef46(domEditGroupSelections);
+  const domEditHoverSelectionRef = useRef46(domEditHoverSelection);
+  const activeGroupElementRef = useRef46(activeGroupElement);
   domEditSelectionRef.current = domEditSelection;
   domEditGroupSelectionsRef.current = domEditGroupSelections;
   domEditHoverSelectionRef.current = domEditHoverSelection;
@@ -23811,7 +23948,7 @@ function useDomSelection({
 }
 
 // src/hooks/usePreviewInteraction.ts
-import { useCallback as useCallback44, useRef as useRef46 } from "react";
+import { useCallback as useCallback44, useRef as useRef47 } from "react";
 var CYCLE_RADIUS_PX = 6;
 var CYCLE_WINDOW_MS = 600;
 var DOUBLE_CLICK_MS = 400;
@@ -23828,8 +23965,8 @@ function usePreviewInteraction({
   setActiveGroupElement,
   onClickToSource
 }) {
-  const cycleRef = useRef46(null);
-  const lastDownRef = useRef46(null);
+  const cycleRef = useRef47(null);
+  const lastDownRef = useRef47(null);
   const handlePreviewCanvasMouseDown = useCallback44(
     // fallow-ignore-next-line complexity
     async (e, options) => {
@@ -23964,7 +24101,7 @@ function usePreviewInteraction({
 }
 
 // src/hooks/useDomEditCommits.ts
-import { useCallback as useCallback49, useRef as useRef48 } from "react";
+import { useCallback as useCallback49, useRef as useRef49 } from "react";
 import { findUnsafeDomPatchValues as findUnsafeDomPatchValues2 } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/utils/studioFontHelpers.ts
@@ -24073,7 +24210,7 @@ function useDomEditPositionPatchCommit({
 }
 
 // src/hooks/useDomEditTextCommits.ts
-import { useCallback as useCallback46, useRef as useRef47 } from "react";
+import { useCallback as useCallback46, useRef as useRef48 } from "react";
 function applyPreviewAttribute(doc, selection, activeCompPath, attr, value, options = {}) {
   if (!doc) return;
   const el = findElementForSelection(doc, selection, activeCompPath);
@@ -24095,7 +24232,7 @@ function useDomEditTextCommits({
   persistDomEditOperations,
   resolveImportedFontAsset
 }) {
-  const domTextCommitVersionRef = useRef47(0);
+  const domTextCommitVersionRef = useRef48(0);
   const handleDomStyleCommit = useCallback46(
     async (property, value) => {
       if (!domEditSelection) return;
@@ -24921,8 +25058,8 @@ function computeElementPercentage(currentTime, selection, animation) {
 function getIframeGsap(iframe) {
   if (!iframe?.contentWindow) return null;
   try {
-    const gsap = iframe.contentWindow.gsap;
-    return gsap?.getProperty ? gsap : null;
+    const gsap2 = iframe.contentWindow.gsap;
+    return gsap2?.getProperty ? gsap2 : null;
   } catch {
     return null;
   }
@@ -25132,7 +25269,7 @@ function useDomEditCommits({
     },
     [fileTree, projectId, importedFontAssetsRef]
   );
-  const reportedUnresolvableRef = useRef48(/* @__PURE__ */ new Set());
+  const reportedUnresolvableRef = useRef49(/* @__PURE__ */ new Set());
   const persistDomEditOperations = useCallback49(
     // fallow-ignore-next-line complexity
     async (selection, operations, options) => {
@@ -25411,7 +25548,7 @@ function useGroupCommits(params) {
 }
 
 // src/hooks/useGsapScriptCommits.ts
-import { useCallback as useCallback56, useMemo as useMemo21, useRef as useRef50 } from "react";
+import { useCallback as useCallback56, useMemo as useMemo21, useRef as useRef51 } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/hooks/gsapKeyframeCacheHelpers.ts
@@ -26381,6 +26518,36 @@ function useGsapKeyframeOps({
     },
     [activeCompPath, commitMutation, trackGsapSaveFailure, sdkSession, sdkDeps]
   );
+  const moveKeyframe = useCallback53(
+    (selection, animationId, fromPercentage, toPercentage) => {
+      const mutation = { type: "move-keyframe", animationId, fromPercentage, toPercentage };
+      void commitMutation(selection, mutation, {
+        label: `Move keyframe to ${toPercentage}%`,
+        softReload: true
+      }).catch((error) => {
+        trackGsapSaveFailure(error, selection, mutation, `Move keyframe to ${toPercentage}%`);
+      });
+    },
+    [commitMutation, trackGsapSaveFailure]
+  );
+  const resizeKeyframedTween = useCallback53(
+    (selection, animationId, position, duration, pctRemap) => {
+      const mutation = {
+        type: "resize-keyframed-tween",
+        animationId,
+        position,
+        duration,
+        pctRemap
+      };
+      void commitMutation(selection, mutation, {
+        label: "Retime keyframe (resize tween)",
+        softReload: true
+      }).catch((error) => {
+        trackGsapSaveFailure(error, selection, mutation, "Retime keyframe (resize tween)");
+      });
+    },
+    [commitMutation, trackGsapSaveFailure]
+  );
   const convertToKeyframes = useCallback53(
     async (selection, animationId, resolvedFromValues, duration) => {
       if (sdkSession && sdkDeps) {
@@ -26407,8 +26574,10 @@ function useGsapKeyframeOps({
   );
   const removeAllKeyframes = useCallback53(
     async (selection, animationId) => {
+      const targetPath = selection.sourceFile || activeCompPath || "index.html";
+      const elementId = selection.id ?? selection.selector?.match(/^#([\w-]+)/)?.[1] ?? null;
+      if (elementId) clearKeyframeCacheForElement(targetPath, elementId);
       if (sdkSession && sdkDeps) {
-        const targetPath = selection.sourceFile || activeCompPath || "index.html";
         const handled = await sdkGsapRemoveAllKeyframesPersist(
           targetPath,
           animationId,
@@ -26434,6 +26603,8 @@ function useGsapKeyframeOps({
     addKeyframe,
     addKeyframeBatch,
     removeKeyframe,
+    moveKeyframe,
+    resizeKeyframedTween,
     convertToKeyframes,
     removeAllKeyframes,
     commitKeyframeAtTime
@@ -26441,7 +26612,7 @@ function useGsapKeyframeOps({
 }
 
 // src/hooks/useGsapPropertyDebounce.ts
-import { useCallback as useCallback54, useEffect as useEffect31, useRef as useRef49 } from "react";
+import { useCallback as useCallback54, useEffect as useEffect31, useRef as useRef50 } from "react";
 import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
 var DEBOUNCE_MS = 150;
 function mergeTweenProperties(sdkSession, animationId, edited, kind) {
@@ -26457,9 +26628,9 @@ function mergeTweenProperties(sdkSession, animationId, edited, kind) {
   }
 }
 function useGsapPropertyDebounce(commitMutationSafely, sdk) {
-  const pendingPropertyEditRef = useRef49(null);
-  const debounceTimerRef = useRef49(null);
-  const sdkRef = useRef49(sdk);
+  const pendingPropertyEditRef = useRef50(null);
+  const debounceTimerRef = useRef50(null);
+  const sdkRef = useRef50(sdk);
   sdkRef.current = sdk;
   const flushPendingPropertyEdit = useCallback54(async () => {
     const pending = pendingPropertyEditRef.current;
@@ -26762,7 +26933,7 @@ function applyPreviewSync(iframe, result, options, reloadPreview) {
   }
 }
 function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession, writeProjectFile, forceReloadSdkSession }) {
-  const serializerRef = useRef50(createKeyedSerializer());
+  const serializerRef = useRef51(createKeyedSerializer());
   const runCommit = useCallback56(async (selection, mutation, options) => {
     const pid = projectIdRef.current;
     if (!pid) return;
@@ -26881,19 +27052,19 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
 }
 
 // src/hooks/useGsapTweenCache.ts
-import { useEffect as useEffect32, useMemo as useMemo22, useRef as useRef51, useState as useState46, useCallback as useCallback57 } from "react";
+import { useEffect as useEffect32, useMemo as useMemo22, useRef as useRef52, useState as useState47, useCallback as useCallback57 } from "react";
 import { isStudioHoldSet } from "@hyperframes/core/gsap-parser";
 
 // src/hooks/gsapRuntimeReaders.ts
 import { classifyPropertyGroup as classifyPropertyGroup2 } from "@hyperframes/core/gsap-parser";
 function readGsapProperty(iframe, selector, prop) {
   if (!selector) return null;
-  const gsap = getIframeGsap(iframe);
-  if (!gsap) return null;
+  const gsap2 = getIframeGsap(iframe);
+  if (!gsap2) return null;
   const el = queryIframeElement(iframe, selector);
   if (!el) return null;
   try {
-    const val = Number(gsap.getProperty(el, prop));
+    const val = Number(gsap2.getProperty(el, prop));
     if (!Number.isFinite(val)) return null;
     return POSITION_PROPS.has(prop) ? Math.round(val) : roundTo3(val);
   } catch {
@@ -26924,8 +27095,8 @@ var GSAP_CONFIG_KEYS = /* @__PURE__ */ new Set([
 function readAllAnimatedProperties(iframe, selector, anim, group) {
   const result = {};
   if (!iframe) return result;
-  const gsap = getIframeGsap(iframe);
-  if (!gsap) return result;
+  const gsap2 = getIframeGsap(iframe);
+  if (!gsap2) return result;
   const el = queryIframeElement(iframe, selector);
   if (!el) return result;
   let doc = null;
@@ -26949,7 +27120,7 @@ function readAllAnimatedProperties(iframe, selector, anim, group) {
     }
   }
   for (const prop of propKeys) {
-    const val = Number(gsap.getProperty(el, prop));
+    const val = Number(gsap2.getProperty(el, prop));
     if (Number.isFinite(val)) {
       result[prop] = POSITION_PROPS.has(prop) ? Math.round(val) : roundTo3(val);
     }
@@ -27005,7 +27176,7 @@ function readAllAnimatedProperties(iframe, selector, anim, group) {
   for (const [prop, defaultVal] of Object.entries(UNIVERSAL_BASELINE)) {
     if (prop in result) continue;
     if (!allTweenedProps.has(prop)) continue;
-    const val = Number(gsap.getProperty(el, prop));
+    const val = Number(gsap2.getProperty(el, prop));
     if (Number.isFinite(val) && Math.round(val * 1e3) !== Math.round(defaultVal * 1e3)) {
       result[prop] = roundTo3(val);
     }
@@ -27035,7 +27206,7 @@ function readAllAnimatedProperties(iframe, selector, anim, group) {
   for (const prop of COMPUTED_BASELINE) {
     if (prop in result) continue;
     if (otherTweenProps.has(prop)) continue;
-    const gsapVal = Number(gsap.getProperty(el, prop));
+    const gsapVal = Number(gsap2.getProperty(el, prop));
     if (!Number.isFinite(gsapVal)) continue;
     let cssVal = NaN;
     if (computedStyle) {
@@ -27134,6 +27305,13 @@ function findPositionSetAnimation(animations, selector) {
     (a) => a.method === "set" && a.targetSelector === selector && ("x" in a.properties || "y" in a.properties)
   ) ?? null;
 }
+function findExistingPositionWrite(animations, selector) {
+  const set = findPositionSetAnimation(animations, selector);
+  if (set) return set;
+  return animations.find(
+    (a) => a.targetSelector === selector && a.propertyGroup === "position" && !a.keyframes && (a.duration ?? 0) === 0
+  ) ?? null;
+}
 async function commitStaticGsapPosition(selection, studioOffset, gsapPos, selector, existingSet, callbacks) {
   const { newX, newY } = computeDraggedGsapPosition(selection.element, studioOffset, gsapPos);
   if (existingSet) {
@@ -27434,8 +27612,8 @@ async function commitKeyframedPosition(selection, anim, properties, callbacks, b
 function resolveDragRuntime(iframe, selector) {
   if (!iframe || !selector) return null;
   const win = iframe.contentWindow;
-  const gsap = win?.gsap;
-  if (typeof gsap?.getProperty !== "function" || typeof gsap.set !== "function") return null;
+  const gsap2 = win?.gsap;
+  if (typeof gsap2?.getProperty !== "function" || typeof gsap2.set !== "function") return null;
   let el = null;
   try {
     el = iframe.contentDocument?.querySelector(selector) ?? null;
@@ -27447,7 +27625,7 @@ function resolveDragRuntime(iframe, selector) {
   const mainTl = timelines ? Object.values(timelines)[0] : void 0;
   if (typeof mainTl?.seek !== "function") return null;
   return {
-    gsapLib: gsap,
+    gsapLib: gsap2,
     el,
     mainTl
   };
@@ -27692,14 +27870,14 @@ async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos
   }
 }
 
-// src/hooks/gsapRuntimeBridge.ts
+// src/hooks/gsapPositionDetection.ts
 function readGsapPositionFromIframe(iframe, elementSelector) {
-  const gsap = getIframeGsap(iframe);
-  if (!gsap) return null;
+  const gsap2 = getIframeGsap(iframe);
+  if (!gsap2) return null;
   const element = queryIframeElement(iframe, elementSelector);
   if (!element) return null;
-  const x = Number(gsap.getProperty(element, "x")) || 0;
-  const y = Number(gsap.getProperty(element, "y")) || 0;
+  const x = Number(gsap2.getProperty(element, "x")) || 0;
+  const y = Number(gsap2.getProperty(element, "y")) || 0;
   return { x, y };
 }
 function animHasPosition(anim) {
@@ -27748,6 +27926,8 @@ function pickClosestToPlayhead(anims) {
     return best;
   });
 }
+
+// src/hooks/gsapRuntimeBridge.ts
 async function resolveGroupTween(group, animations, selection, commitMutation, fetchFallbackAnimations) {
   const groupAnims = animations.filter((a) => a.propertyGroup === group);
   const groupAnim = pickClosestToPlayhead(groupAnims);
@@ -27788,17 +27968,38 @@ async function tryGsapDragIntercept(selection, offset, animations, iframe, commi
   if (!selector) {
     return false;
   }
+  let workingAnimations = animations;
+  const isPosWrite = (a) => a.targetSelector === selector && a.propertyGroup === "position";
+  if (animations.filter(isPosWrite).length > 1 && fetchFallbackAnimations) {
+    const fresh = await fetchFallbackAnimations();
+    const dupes = fresh.filter(isPosWrite);
+    if (dupes.length > 1) {
+      const keeper = dupes.find((a) => a.keyframes) ?? dupes.find((a) => (a.duration ?? 0) > 0) ?? dupes[0];
+      await commitMutation(
+        selection,
+        {
+          type: "consolidate-position-writes",
+          targetSelector: selector,
+          keepAnimationId: keeper.id
+        },
+        { label: "Consolidate position writes", skipReload: true }
+      );
+      workingAnimations = await fetchFallbackAnimations();
+    } else {
+      workingAnimations = fresh;
+    }
+  }
   const resolved = await resolveGroupTween(
     "position",
-    animations,
+    workingAnimations,
     selection,
     commitMutation,
     fetchFallbackAnimations
   );
   let posAnim = resolved?.anim ?? null;
-  let resolvedAnimations = resolved?.animations ?? animations;
+  let resolvedAnimations = resolved?.animations ?? workingAnimations;
   if (!posAnim) {
-    posAnim = findGsapPositionAnimation(animations, selector);
+    posAnim = findGsapPositionAnimation(workingAnimations, selector);
     if (!posAnim && fetchFallbackAnimations) {
       const fresh = await fetchFallbackAnimations();
       resolvedAnimations = fresh;
@@ -27809,7 +28010,7 @@ async function tryGsapDragIntercept(selection, offset, animations, iframe, commi
   const hasNonHold = hasNonHoldTweenForElement(iframe, selector);
   const hasKeyframedPosTween = !!posAnim?.keyframes;
   if (!hasNonHold && !hasKeyframedPosTween) {
-    const existingSet = posAnim && posAnim.method === "set" && posAnim.targetSelector === selector ? posAnim : findPositionSetAnimation(resolvedAnimations, selector);
+    const existingSet = posAnim && posAnim.method === "set" && posAnim.targetSelector === selector ? posAnim : findExistingPositionWrite(resolvedAnimations, selector);
     await commitStaticGsapPosition(selection, offset, gsapPos, selector, existingSet, {
       commitMutation,
       fetchAnimations: fetchFallbackAnimations
@@ -28167,11 +28368,11 @@ function resolveClipTimingBasis(elementId, sourceFile, elements, domClipChildren
   return { elStart: host?.start ?? 0, elDuration: host?.duration ?? 1 };
 }
 function useGsapAnimationsForElement(projectId, sourceFile, target, version, iframeRef) {
-  const [allAnimations, setAllAnimations] = useState46([]);
-  const [multipleTimelines, setMultipleTimelines] = useState46(false);
-  const [unsupportedTimelinePattern, setUnsupportedTimelinePattern] = useState46(false);
-  const lastFetchKeyRef = useRef51("");
-  const retryTimerRef = useRef51(null);
+  const [allAnimations, setAllAnimations] = useState47([]);
+  const [multipleTimelines, setMultipleTimelines] = useState47(false);
+  const [unsupportedTimelinePattern, setUnsupportedTimelinePattern] = useState47(false);
+  const lastFetchKeyRef = useRef52("");
+  const retryTimerRef = useRef52(null);
   const domClipChildrenKey = usePlayerStore(
     (s) => s.domClipChildren.map((c) => `${c.id}<${c.hostId}`).join("|")
   );
@@ -28308,7 +28509,7 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
     let ease;
     let easeEach;
     for (const anim of animations) {
-      if (anim.method === "set" && Object.keys(anim.properties).every((k) => k === "x" || k === "y"))
+      if (!anim.keyframes && Object.keys(anim.properties).length > 0 && Object.keys(anim.properties).every((k) => k === "x" || k === "y") && (anim.method === "set" || (anim.duration ?? 0) === 0))
         continue;
       const kf = anim.keyframes ?? synthesizeFlatTweenKeyframes(anim);
       if (!kf) continue;
@@ -28348,7 +28549,7 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
   return { animations, multipleTimelines, unsupportedTimelinePattern };
 }
 function useGsapCacheVersion() {
-  const [version, setVersion] = useState46(0);
+  const [version, setVersion] = useState47(0);
   const bump = useCallback57(() => setVersion((v) => v + 1), []);
   return { version, bump };
 }
@@ -28357,9 +28558,9 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
   const domClipChildrenKey = usePlayerStore(
     (s) => s.domClipChildren.map((c) => `${c.id}<${c.hostId}`).join("|")
   );
-  const lastFetchKeyRef = useRef51("");
-  const runtimeScanDoneRef = useRef51("");
-  const astFetchDoneRef = useRef51("");
+  const lastFetchKeyRef = useRef52("");
+  const runtimeScanDoneRef = useRef52("");
+  const astFetchDoneRef = useRef52("");
   useEffect32(() => {
     const fetchKey = `kf-cache:${projectId}:${sourceFile}:${version}:${elementCount}:${domClipChildrenKey}`;
     if (fetchKey === lastFetchKeyRef.current) return;
@@ -28377,9 +28578,9 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
       const mergedByElement = /* @__PURE__ */ new Map();
       for (const anim of parsed.animations) {
         if (anim.hasUnresolvedKeyframes) continue;
-        if (anim.method === "set") {
+        if (!anim.keyframes && (anim.method === "set" || (anim.duration ?? 0) === 0)) {
           const propKeys = Object.keys(anim.properties).filter((k) => k !== "immediateRender");
-          if (propKeys.every((k) => k === "x" || k === "y")) {
+          if (propKeys.length > 0 && propKeys.every((k) => k === "x" || k === "y")) {
             continue;
           }
         }
@@ -28462,10 +28663,10 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
 }
 
 // src/hooks/useDomEditWiring.ts
-import { useCallback as useCallback61, useEffect as useEffect34, useRef as useRef54 } from "react";
+import { useCallback as useCallback61, useEffect as useEffect34, useRef as useRef55 } from "react";
 
 // src/hooks/useDomEditPreviewSync.ts
-import { useEffect as useEffect33, useRef as useRef52 } from "react";
+import { useEffect as useEffect33, useRef as useRef53 } from "react";
 function useDomEditPreviewSync({
   previewIframe,
   activeCompPath,
@@ -28531,7 +28732,7 @@ function useDomEditPreviewSync({
     applyStudioManualEditsToPreviewRef,
     gsapCacheVersion
   ]);
-  const openSourceRef = useRef52(openSourceForSelection);
+  const openSourceRef = useRef53(openSourceForSelection);
   openSourceRef.current = openSourceForSelection;
   useEffect33(
     // fallow-ignore-next-line complexity
@@ -28609,7 +28810,7 @@ function useGsapInteractionFailureTelemetry(activeCompPath, showToast) {
 }
 
 // src/hooks/useGsapSelectionHandlers.ts
-import { useCallback as useCallback60, useRef as useRef53 } from "react";
+import { useCallback as useCallback60, useRef as useRef54 } from "react";
 function useGsapSelectionHandlers({
   domEditSelection,
   updateGsapProperty,
@@ -28625,12 +28826,14 @@ function useGsapSelectionHandlers({
   addKeyframe,
   addKeyframeBatch,
   removeKeyframe,
+  moveKeyframe,
+  resizeKeyframedTween,
   convertToKeyframes,
   removeAllKeyframes,
   handleDomManualEditsReset,
   selectedGsapAnimations
 }) {
-  const lastSelectionRef = useRef53(null);
+  const lastSelectionRef = useRef54(null);
   if (domEditSelection) lastSelectionRef.current = domEditSelection;
   const trackGsapHandlerFailure = useCallback60(
     (error, selection, mutationType, label) => {
@@ -28755,6 +28958,35 @@ function useGsapSelectionHandlers({
     },
     [domEditSelection, removeKeyframe]
   );
+  const handleGsapMoveKeyframeToPlayhead = useCallback60(
+    (animId, fromPercentage, selectionOverride) => {
+      const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
+      if (!sel) return;
+      const anim = selectedGsapAnimations.find((a) => a.id === animId);
+      const toPercentage = computeCurrentPercentage(sel, anim);
+      trackStudioEvent("keyframe", { action: "move_to_playhead" });
+      moveKeyframe(sel, animId, fromPercentage, toPercentage);
+    },
+    [domEditSelection, selectedGsapAnimations, moveKeyframe]
+  );
+  const handleGsapMoveKeyframe = useCallback60(
+    (animId, fromPercentage, toPercentage, selectionOverride) => {
+      const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
+      if (!sel) return;
+      trackStudioEvent("keyframe", { action: "retime" });
+      moveKeyframe(sel, animId, fromPercentage, toPercentage);
+    },
+    [domEditSelection, moveKeyframe]
+  );
+  const handleGsapResizeKeyframedTween = useCallback60(
+    (animId, position, duration, pctRemap, selectionOverride) => {
+      const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
+      if (!sel) return;
+      trackStudioEvent("keyframe", { action: "retime_resize" });
+      resizeKeyframedTween(sel, animId, position, duration, pctRemap);
+    },
+    [domEditSelection, resizeKeyframedTween]
+  );
   const handleGsapConvertToKeyframes = useCallback60(
     (animId, resolvedFromValues, duration) => {
       if (!domEditSelection) return Promise.resolve();
@@ -28799,6 +29031,9 @@ function useGsapSelectionHandlers({
     handleGsapAddKeyframe,
     handleGsapAddKeyframeBatch,
     handleGsapRemoveKeyframe,
+    handleGsapMoveKeyframeToPlayhead,
+    handleGsapMoveKeyframe,
+    handleGsapResizeKeyframedTween,
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes
@@ -28840,6 +29075,8 @@ function useDomEditWiring({
   addKeyframe,
   addKeyframeBatch,
   removeKeyframe,
+  moveKeyframe,
+  resizeKeyframedTween,
   convertToKeyframes,
   removeAllKeyframes,
   handleDomManualEditsReset
@@ -28866,7 +29103,7 @@ function useDomEditWiring({
     const key = matchKey ? matchKey.key ?? matchKey.id : null;
     if (key && key !== selectedElementId) setSelectedElementId(key);
   }, [domEditSelection?.id]);
-  const prevRefreshKeyRef = useRef54(refreshKey);
+  const prevRefreshKeyRef = useRef55(refreshKey);
   useEffect34(() => {
     if (refreshKey !== prevRefreshKeyRef.current) {
       prevRefreshKeyRef.current = refreshKey;
@@ -28910,6 +29147,8 @@ function useDomEditWiring({
     addKeyframe,
     addKeyframeBatch,
     removeKeyframe,
+    moveKeyframe,
+    resizeKeyframedTween,
     convertToKeyframes,
     removeAllKeyframes,
     handleDomManualEditsReset,
@@ -29379,7 +29618,7 @@ function useGsapAwareEditing({
 }
 
 // src/hooks/useStudioSelectionPublisher.ts
-import { useEffect as useEffect35, useRef as useRef55 } from "react";
+import { useEffect as useEffect35, useRef as useRef56 } from "react";
 
 // src/utils/studioSelectionSnapshot.ts
 function round32(value) {
@@ -29469,8 +29708,8 @@ function useStudioSelectionPublisher({
   previewDocumentVersion,
   refreshDomEditSelectionFromPreview
 }) {
-  const lastSelectionRefreshKeyRef = useRef55(refreshKey);
-  const pendingSelectionRefreshKeyRef = useRef55(null);
+  const lastSelectionRefreshKeyRef = useRef56(refreshKey);
+  const pendingSelectionRefreshKeyRef = useRef56(null);
   useEffect35(() => {
     if (!projectId) return;
     const selection = domEditSelection?.element.isConnected ? buildStudioSelectionSnapshot({
@@ -29623,6 +29862,8 @@ function useDomEditSession({
     addKeyframe,
     addKeyframeBatch,
     removeKeyframe,
+    moveKeyframe,
+    resizeKeyframedTween,
     convertToKeyframes,
     removeAllKeyframes,
     setArcPath,
@@ -29758,6 +29999,9 @@ function useDomEditSession({
     handleGsapAddKeyframe,
     handleGsapAddKeyframeBatch,
     handleGsapRemoveKeyframe,
+    handleGsapMoveKeyframeToPlayhead,
+    handleGsapMoveKeyframe,
+    handleGsapResizeKeyframedTween,
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes
@@ -29795,6 +30039,8 @@ function useDomEditSession({
     addKeyframe,
     addKeyframeBatch,
     removeKeyframe,
+    moveKeyframe,
+    resizeKeyframedTween,
     convertToKeyframes,
     removeAllKeyframes,
     handleDomManualEditsReset
@@ -29943,6 +30189,9 @@ function useDomEditSession({
     handleGsapAddKeyframe,
     handleGsapAddKeyframeBatch,
     handleGsapRemoveKeyframe,
+    handleGsapMoveKeyframeToPlayhead,
+    handleGsapMoveKeyframe,
+    handleGsapResizeKeyframedTween,
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
@@ -29960,7 +30209,7 @@ function useDomEditSession({
 }
 
 // src/hooks/useSdkSession.ts
-import { useState as useState47, useEffect as useEffect36, useCallback as useCallback65 } from "react";
+import { useState as useState48, useEffect as useEffect36, useCallback as useCallback65 } from "react";
 import { openComposition } from "@hyperframes/sdk";
 async function readProjectFileOptional(projectId, path) {
   if (path.includes("\0") || path.includes("..")) return void 0;
@@ -29988,8 +30237,8 @@ function shouldReloadOnFileChange(activeCompPath, content, withinSuppressWindow)
   return !withinSuppressWindow;
 }
 function useSdkSession(projectId, activeCompPath, domEditSaveTimestampRef) {
-  const [session, setSession] = useState47(null);
-  const [reloadToken, setReloadToken] = useState47(0);
+  const [session, setSession] = useState48(null);
+  const [reloadToken, setReloadToken] = useState48(0);
   useEffect36(() => {
     if (!activeCompPath) return;
     const compPath = activeCompPath;
@@ -30057,7 +30306,7 @@ function useSdkSelectionSync(session, domEditSelection, domEditGroupSelections)
 }
 
 // src/hooks/useBlockHandlers.ts
-import { useCallback as useCallback66, useMemo as useMemo23, useState as useState48 } from "react";
+import { useCallback as useCallback66, useMemo as useMemo23, useState as useState49 } from "react";
 
 // src/utils/blockInstaller.ts
 function getMaxZIndexFromIframe(iframe) {
@@ -30201,7 +30450,7 @@ function useBlockHandlers({
   setRightCollapsed,
   setRightPanelTab
 }) {
-  const [activeBlockParams, setActiveBlockParams] = useState48(null);
+  const [activeBlockParams, setActiveBlockParams] = useState49(null);
   const blockCtx = useMemo23(
     () => ({
       activeCompPath: blockCtxDeps.activeCompPath,
@@ -30289,7 +30538,7 @@ function useBlockHandlers({
 }
 
 // src/hooks/useAppHotkeys.ts
-import { useCallback as useCallback67, useEffect as useEffect38, useRef as useRef56 } from "react";
+import { useCallback as useCallback67, useEffect as useEffect38, useRef as useRef57 } from "react";
 function iframeContentWindow(iframe) {
   try {
     return iframe?.contentWindow ?? null;
@@ -30497,8 +30746,8 @@ function useAppHotkeys({
   activeCompPath,
   forceReloadSdkSession
 }) {
-  const previewHotkeyWindowRef = useRef56(null);
-  const previewHistoryCleanupRef = useRef56(null);
+  const previewHotkeyWindowRef = useRef57(null);
+  const previewHistoryCleanupRef = useRef57(null);
   const handleTimelineToggleHotkey = useCallback67(
     (event) => {
       if (!shouldHandleTimelineToggleHotkey(event)) return;
@@ -30556,7 +30805,7 @@ function useAppHotkeys({
   );
   const handleUndo = useCallback67(() => applyHistory("undo"), [applyHistory]);
   const handleRedo = useCallback67(() => applyHistory("redo"), [applyHistory]);
-  const cbRef = useRef56(null);
+  const cbRef = useRef57(null);
   cbRef.current = {
     toggleTimelineVisibility,
     handleTimelineElementDelete,
@@ -30666,7 +30915,7 @@ function useAppHotkeys({
 }
 
 // src/hooks/useClipboard.ts
-import { useCallback as useCallback68, useRef as useRef57 } from "react";
+import { useCallback as useCallback68, useRef as useRef58 } from "react";
 
 // src/utils/clipboardPayload.ts
 function insertAsSibling(source, newHtml, selector, selectorIndex) {
@@ -30781,8 +31030,8 @@ function useClipboard({
   handleDomEditElementDelete,
   previewIframeRef
 }) {
-  const clipboardRef = useRef57(null);
-  const projectIdRef = useRef57(projectId);
+  const clipboardRef = useRef58(null);
+  const projectIdRef = useRef58(projectId);
   projectIdRef.current = projectId;
   const handleCopy = useCallback68(() => {
     const { selectedElementId, elements } = usePlayerStore.getState();
@@ -31269,7 +31518,7 @@ import { useCallback as useCallback70 } from "react";
 import { createElement } from "react";
 
 // src/player/components/AudioWaveform.tsx
-import { memo as memo25, useRef as useRef58, useState as useState49, useCallback as useCallback69, useEffect as useEffect40 } from "react";
+import { memo as memo25, useRef as useRef59, useState as useState50, useCallback as useCallback69, useEffect as useEffect40 } from "react";
 import { jsx as jsx64, jsxs as jsxs55 } from "react/jsx-runtime";
 var BAR_W = 2;
 var GAP = 1;
@@ -31317,11 +31566,11 @@ var AudioWaveform = memo25(function AudioWaveform2({
   trimStartFraction,
   trimEndFraction
 }) {
-  const containerRef = useRef58(null);
-  const barsRef = useRef58(null);
-  const roRef = useRef58(null);
+  const containerRef = useRef59(null);
+  const barsRef = useRef59(null);
+  const roRef = useRef59(null);
   const cacheKey = waveformUrl ?? audioUrl;
-  const [peaks, setPeaks] = useState49(peaksCache.get(cacheKey) ?? null);
+  const [peaks, setPeaks] = useState50(peaksCache.get(cacheKey) ?? null);
   useEffect40(() => {
     if (peaks || !cacheKey) return;
     let cancelled = false;
@@ -31523,10 +31772,10 @@ function useRenderClipContent({
 }
 
 // src/hooks/useConsoleErrorCapture.ts
-import { useCallback as useCallback71, useEffect as useEffect41, useRef as useRef59, useState as useState50 } from "react";
+import { useCallback as useCallback71, useEffect as useEffect41, useRef as useRef60, useState as useState51 } from "react";
 function useConsoleErrorCapture(previewIframe) {
-  const [consoleErrors, setConsoleErrors] = useState50(null);
-  const consoleErrorsRef = useRef59([]);
+  const [consoleErrors, setConsoleErrors] = useState51(null);
+  const consoleErrorsRef = useRef60([]);
   const resetErrors = useCallback71(() => {
     consoleErrorsRef.current = [];
     setConsoleErrors(null);
@@ -31596,7 +31845,7 @@ function useConsoleErrorCapture(previewIframe) {
 }
 
 // src/hooks/useFrameCapture.ts
-import { useState as useState51, useCallback as useCallback72 } from "react";
+import { useState as useState52, useCallback as useCallback72 } from "react";
 
 // src/utils/projectRouting.ts
 var PROJECT_HASH_PREFIX = "#project/";
@@ -31678,7 +31927,7 @@ function useFrameCapture({
   showToast,
   waitForPendingDomEditSaves
 }) {
-  const [captureFrameTime, setCaptureFrameTime] = useState51(0);
+  const [captureFrameTime, setCaptureFrameTime] = useState52(0);
   useMountEffect(() => {
     setCaptureFrameTime(usePlayerStore.getState().currentTime);
     return liveTime.subscribe(setCaptureFrameTime);
@@ -31756,7 +32005,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState52, useCallback as useCallback73, useEffect as useEffect42, useRef as useRef60, useMemo as useMemo24 } from "react";
+import { useState as useState53, useCallback as useCallback73, useEffect as useEffect42, useRef as useRef61, useMemo as useMemo24 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -31767,10 +32016,10 @@ function parseFinding(f) {
   };
 }
 function useLintModal(projectId, refreshKey) {
-  const [lintModal, setLintModal] = useState52(null);
-  const [linting, setLinting] = useState52(false);
-  const [backgroundFindings, setBackgroundFindings] = useState52([]);
-  const autoLintRanRef = useRef60(false);
+  const [lintModal, setLintModal] = useState53(null);
+  const [linting, setLinting] = useState53(false);
+  const [backgroundFindings, setBackgroundFindings] = useState53([]);
+  const autoLintRanRef = useRef61(false);
   const runLint = useCallback73(
     async (opts) => {
       if (!projectId) return;
@@ -31797,7 +32046,7 @@ function useLintModal(projectId, refreshKey) {
     [projectId]
   );
   const handleLint = useCallback73(() => runLint(), [runLint]);
-  const prevProjectIdRef = useRef60(projectId);
+  const prevProjectIdRef = useRef61(projectId);
   useEffect42(() => {
     if (projectId !== prevProjectIdRef.current) {
       autoLintRanRef.current = false;
@@ -31845,9 +32094,9 @@ function useLintModal(projectId, refreshKey) {
 }
 
 // src/hooks/useCompositionDimensions.ts
-import { useState as useState53 } from "react";
+import { useState as useState54 } from "react";
 function useCompositionDimensions() {
-  const [compositionDimensions, setCompositionDimensions] = useState53(
+  const [compositionDimensions, setCompositionDimensions] = useState54(
     null
   );
   useMountEffect(() => {
@@ -31867,10 +32116,10 @@ function useCompositionDimensions() {
 }
 
 // src/hooks/useToast.ts
-import { useState as useState54, useCallback as useCallback74, useRef as useRef61 } from "react";
+import { useState as useState55, useCallback as useCallback74, useRef as useRef62 } from "react";
 function useToast() {
-  const [appToast, setAppToast] = useState54(null);
-  const timerRef = useRef61(null);
+  const [appToast, setAppToast] = useState55(null);
+  const timerRef = useRef62(null);
   const showToast = useCallback74((message, tone = "error") => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setAppToast({ message, tone });
@@ -31887,7 +32136,7 @@ function useToast() {
 }
 
 // src/hooks/useStudioUrlState.ts
-import { useCallback as useCallback75, useEffect as useEffect43, useRef as useRef62, useState as useState55 } from "react";
+import { useCallback as useCallback75, useEffect as useEffect43, useRef as useRef63, useState as useState56 } from "react";
 
 // src/utils/studioUrlState.ts
 var VALID_TABS = ["layers", "design", "renders"];
@@ -32011,12 +32260,12 @@ function useStudioUrlState({
   initialState: initialState2
 }) {
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const hydratedSeekRef = useRef62(initialState2.currentTime == null);
-  const hydratedInitialTimeRef = useRef62(initialState2.currentTime == null);
-  const hydratedSelectionRef = useRef62(initialState2.selection == null);
-  const [selectionHydrated, setSelectionHydrated] = useState55(initialState2.selection == null);
-  const pendingSelectionRef = useRef62(initialState2.selection);
-  const stableTimeRef = useRef62(initialState2.currentTime);
+  const hydratedSeekRef = useRef63(initialState2.currentTime == null);
+  const hydratedInitialTimeRef = useRef63(initialState2.currentTime == null);
+  const hydratedSelectionRef = useRef63(initialState2.selection == null);
+  const [selectionHydrated, setSelectionHydrated] = useState56(initialState2.selection == null);
+  const pendingSelectionRef = useRef63(initialState2.selection);
+  const stableTimeRef = useRef63(initialState2.currentTime);
   const buildUrlState = useCallback75(
     () => ({
       activeCompPath,
@@ -32144,7 +32393,7 @@ function useStudioUrlState({
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback76, useMemo as useMemo25, useRef as useRef63, useState as useState56 } from "react";
+import { useCallback as useCallback76, useMemo as useMemo25, useRef as useRef64, useState as useState57 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -32188,8 +32437,8 @@ function useInspectorState(rightPanelTab, rightInspectorPanes, rightCollapsed, i
   }, [rightPanelTab, rightInspectorPanes, rightCollapsed, isPlaying, isGestureRecording]);
 }
 function useDragOverlay(onImportFiles) {
-  const [active, setActive] = useState56(false);
-  const counterRef = useRef63(0);
+  const [active, setActive] = useState57(false);
+  const counterRef = useRef64(0);
   const onDragOver = useCallback76((e) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
@@ -32292,7 +32541,7 @@ import {
   useContext as useContext5,
   useEffect as useEffect44,
   useMemo as useMemo27,
-  useState as useState57
+  useState as useState58
 } from "react";
 import { jsx as jsx66 } from "react/jsx-runtime";
 var VIEW_QUERY_PARAM = "view";
@@ -32311,7 +32560,7 @@ function writeViewModeToUrl(mode) {
   window.history.replaceState(window.history.state, "", url);
 }
 function useViewModeState(enabled) {
-  const [viewMode, setMode] = useState57(
+  const [viewMode, setMode] = useState58(
     () => enabled ? readViewModeFromUrl() : "timeline"
   );
   useEffect44(() => {
@@ -32688,22 +32937,22 @@ function StudioHeader({
 }
 
 // src/hooks/useGestureCommit.ts
-import { useState as useState59, useCallback as useCallback79, useRef as useRef65, useEffect as useEffect46 } from "react";
+import { useState as useState60, useCallback as useCallback79, useRef as useRef66, useEffect as useEffect46 } from "react";
 
 // src/hooks/useGestureRecording.ts
-import { useCallback as useCallback78, useEffect as useEffect45, useRef as useRef64, useState as useState58 } from "react";
+import { useCallback as useCallback78, useEffect as useEffect45, useRef as useRef65, useState as useState59 } from "react";
 function readBasePosition(element, iframeEl) {
   let baseOpacity = 1;
   let baseScale = 1;
   let baseX = 0;
   let baseY = 0;
   try {
-    const gsap = iframeEl.contentWindow.gsap;
-    if (gsap?.getProperty) {
-      baseOpacity = Number(gsap.getProperty(element, "opacity")) || 1;
-      baseScale = Number(gsap.getProperty(element, "scaleX")) || 1;
-      baseX = Number(gsap.getProperty(element, "x")) || 0;
-      baseY = Number(gsap.getProperty(element, "y")) || 0;
+    const gsap2 = iframeEl.contentWindow.gsap;
+    if (gsap2?.getProperty) {
+      baseOpacity = Number(gsap2.getProperty(element, "opacity")) || 1;
+      baseScale = Number(gsap2.getProperty(element, "scaleX")) || 1;
+      baseX = Number(gsap2.getProperty(element, "x")) || 0;
+      baseY = Number(gsap2.getProperty(element, "y")) || 0;
     }
   } catch {
   }
@@ -32808,12 +33057,12 @@ function createRecordingRefs() {
   };
 }
 function useGestureRecording() {
-  const [isRecording, setIsRecording] = useState58(false);
-  const [recordingDuration, setRecordingDuration] = useState58(0);
-  const isRecordingRef = useRef64(false);
-  const refs = useRef64(createRecordingRefs());
-  const samplesRef = useRef64(refs.current.samples);
-  const trailRef = useRef64(refs.current.trail);
+  const [isRecording, setIsRecording] = useState59(false);
+  const [recordingDuration, setRecordingDuration] = useState59(0);
+  const isRecordingRef = useRef65(false);
+  const refs = useRef65(createRecordingRefs());
+  const samplesRef = useRef65(refs.current.samples);
+  const trailRef = useRef65(refs.current.trail);
   useEffect45(() => {
     const r = refs.current;
     return () => {
@@ -33204,12 +33453,12 @@ function useGestureCommit({
   isGestureRecordingRef
 }) {
   const gestureRecording = useGestureRecording();
-  const [gestureState, setGestureState] = useState59("idle");
-  const gestureStateRef = useRef65("idle");
-  const recordingAutoStopRef = useRef65(void 0);
-  const recordingStartTimeRef = useRef65(0);
-  const commitInFlightRef = useRef65(false);
-  const capturedSelectionRef = useRef65(null);
+  const [gestureState, setGestureState] = useState60("idle");
+  const gestureStateRef = useRef66("idle");
+  const recordingAutoStopRef = useRef66(void 0);
+  const recordingStartTimeRef = useRef66(0);
+  const commitInFlightRef = useRef66(false);
+  const capturedSelectionRef = useRef66(null);
   useEffect46(() => () => clearInterval(recordingAutoStopRef.current), []);
   const stopAndCommitRecording = useCallback79(async () => {
     clearInterval(recordingAutoStopRef.current);
@@ -33526,15 +33775,15 @@ import { useCallback as useCallback85 } from "react";
 // src/components/sidebar/LeftSidebar.tsx
 import {
   memo as memo30,
-  useState as useState66,
+  useState as useState67,
   useCallback as useCallback84,
   useImperativeHandle,
-  useRef as useRef70,
+  useRef as useRef71,
   forwardRef as forwardRef3
 } from "react";
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo27, useCallback as useCallback80, useEffect as useEffect47, useRef as useRef66, useState as useState60 } from "react";
+import { memo as memo27, useCallback as useCallback80, useEffect as useEffect47, useRef as useRef67, useState as useState61 } from "react";
 import { jsx as jsx69, jsxs as jsxs58 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -33600,11 +33849,11 @@ function CompCard({
   isRendering,
   lintInfo
 }) {
-  const [hovered, setHovered] = useState60(false);
-  const [stageSize, setStageSize] = useState60(DEFAULT_PREVIEW_STAGE);
-  const iframeRef = useRef66(null);
-  const hoverTimer = useRef66(null);
-  const syncTimer = useRef66(null);
+  const [hovered, setHovered] = useState61(false);
+  const [stageSize, setStageSize] = useState61(DEFAULT_PREVIEW_STAGE);
+  const iframeRef = useRef67(null);
+  const hoverTimer = useRef67(null);
+  const syncTimer = useRef67(null);
   const requestIframePlaybackSync = useCallback80((shouldPlay) => {
     if (syncTimer.current) {
       clearTimeout(syncTimer.current);
@@ -33763,13 +34012,13 @@ var CompositionsTab = memo27(function CompositionsTab2({
 });
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo28, useState as useState63, useCallback as useCallback82, useRef as useRef68, useMemo as useMemo29, useEffect as useEffect50 } from "react";
+import { memo as memo28, useState as useState64, useCallback as useCallback82, useRef as useRef69, useMemo as useMemo29, useEffect as useEffect50 } from "react";
 
 // src/components/ui/VideoFrameThumbnail.tsx
-import { useState as useState61, useEffect as useEffect48 } from "react";
+import { useState as useState62, useEffect as useEffect48 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
 function VideoFrameThumbnail({ src }) {
-  const [frame, setFrame] = useState61(null);
+  const [frame, setFrame] = useState62(null);
   useEffect48(() => {
     const video = document.createElement("video");
     video.crossOrigin = "anonymous";
@@ -33905,7 +34154,7 @@ var CATEGORY_LABELS = {
 var FILTER_ORDER = ["audio", "images", "video", "fonts"];
 
 // src/components/sidebar/AudioRow.tsx
-import { useState as useState62, useRef as useRef67, useEffect as useEffect49, useCallback as useCallback81 } from "react";
+import { useState as useState63, useRef as useRef68, useEffect as useEffect49, useCallback as useCallback81 } from "react";
 import { Fragment as Fragment20, jsx as jsx72, jsxs as jsxs60 } from "react/jsx-runtime";
 function AudioRow({
   projectId,
@@ -33917,14 +34166,14 @@ function AudioRow({
   onDelete,
   onRename
 }) {
-  const [contextMenu, setContextMenu] = useState62(null);
-  const [playing, setPlaying] = useState62(false);
-  const [bars, setBars] = useState62([]);
-  const audioRef = useRef67(null);
-  const actxRef = useRef67(null);
-  const analyserRef = useRef67(null);
-  const sourceRef = useRef67(null);
-  const animRef = useRef67(0);
+  const [contextMenu, setContextMenu] = useState63(null);
+  const [playing, setPlaying] = useState63(false);
+  const [bars, setBars] = useState63([]);
+  const audioRef = useRef68(null);
+  const actxRef = useRef68(null);
+  const analyserRef = useRef68(null);
+  const sourceRef = useRef68(null);
+  const animRef = useRef68(0);
   const name = basename(asset);
   const subtype = getAudioSubtype(asset);
   const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
@@ -34082,8 +34331,8 @@ function ImageCard({
   onRename,
   size
 }) {
-  const [contextMenu, setContextMenu] = useState63(null);
-  const [hovered, setHovered] = useState63(false);
+  const [contextMenu, setContextMenu] = useState64(null);
+  const [hovered, setHovered] = useState64(false);
   const name = basename(asset);
   const extension = ext(asset);
   const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
@@ -34200,13 +34449,13 @@ var AssetsTab = memo28(function AssetsTab2({
   onDelete,
   onRename
 }) {
-  const fileInputRef = useRef68(null);
-  const [dragOver, setDragOver] = useState63(false);
-  const [copiedPath, setCopiedPath] = useState63(null);
-  const [activeFilter, setActiveFilter] = useState63("all");
-  const [searchQuery, setSearchQuery] = useState63("");
-  const [manifest, setManifest] = useState63(/* @__PURE__ */ new Map());
-  const manifest404Ref = useRef68(/* @__PURE__ */ new Set());
+  const fileInputRef = useRef69(null);
+  const [dragOver, setDragOver] = useState64(false);
+  const [copiedPath, setCopiedPath] = useState64(null);
+  const [activeFilter, setActiveFilter] = useState64("all");
+  const [searchQuery, setSearchQuery] = useState64("");
+  const [manifest, setManifest] = useState64(/* @__PURE__ */ new Map());
+  const manifest404Ref = useRef69(/* @__PURE__ */ new Set());
   const assetsKey = assets.join("|");
   useEffect50(() => {
     if (manifest404Ref.current.has(projectId)) return;
@@ -34492,11 +34741,11 @@ var AssetsTab = memo28(function AssetsTab2({
 });
 
 // src/components/sidebar/BlocksTab.tsx
-import { memo as memo29, useState as useState65, useCallback as useCallback83, useRef as useRef69, useEffect as useEffect52 } from "react";
+import { memo as memo29, useState as useState66, useCallback as useCallback83, useRef as useRef70, useEffect as useEffect52 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 
 // src/hooks/useBlockCatalog.ts
-import { useState as useState64, useEffect as useEffect51, useMemo as useMemo30 } from "react";
+import { useState as useState65, useEffect as useEffect51, useMemo as useMemo30 } from "react";
 
 // src/utils/blockCategories.ts
 import {
@@ -34520,11 +34769,11 @@ function getCategoryColors(category) {
 
 // src/hooks/useBlockCatalog.ts
 function useBlockCatalog() {
-  const [blocks, setBlocks] = useState64([]);
-  const [loading, setLoading] = useState64(true);
-  const [error, setError] = useState64(null);
-  const [search, setSearch] = useState64("");
-  const [category, setCategory] = useState64(null);
+  const [blocks, setBlocks] = useState65([]);
+  const [loading, setLoading] = useState65(true);
+  const [error, setError] = useState65(null);
+  const [search, setSearch] = useState65("");
+  const [category, setCategory] = useState65(null);
   useEffect51(() => {
     let cancelled = false;
     (async () => {
@@ -34579,7 +34828,7 @@ function useBlockCatalog() {
 import { jsx as jsx74, jsxs as jsxs62 } from "react/jsx-runtime";
 var BlocksTab = memo29(function BlocksTab2({ onAddBlock, onPreviewBlock }) {
   const { loading, error, search, setSearch, category, setCategory, filteredBlocks } = useBlockCatalog();
-  const [promptModal, setPromptModal] = useState65(null);
+  const [promptModal, setPromptModal] = useState66(null);
   if (loading) {
     return /* @__PURE__ */ jsx74("div", { className: "flex flex-1 items-center justify-center text-neutral-600 text-xs", children: "Loading blocks\u2026" });
   }
@@ -34784,9 +35033,9 @@ function BlockCard({
   onShowPrompt,
   onPreview
 }) {
-  const [hovered, setHovered] = useState65(false);
-  const [adding, setAdding] = useState65(false);
-  const hoverTimer = useRef69(null);
+  const [hovered, setHovered] = useState66(false);
+  const [adding, setAdding] = useState66(false);
+  const hoverTimer = useRef70(null);
   const colors = getCategoryColors(category);
   const needsWebGL = tags?.includes("html-in-canvas") || tags?.includes("webgl");
   const handleEnter = useCallback83(() => {
@@ -34955,9 +35204,9 @@ function PromptPreviewModal({
   prompt,
   onClose
 }) {
-  const [value, setValue] = useState65(prompt);
-  const [copied, setCopied] = useState65(false);
-  const textareaRef = useRef69(null);
+  const [value, setValue] = useState66(prompt);
+  const [copied, setCopied] = useState66(false);
+  const textareaRef = useRef70(null);
   useEffect52(() => {
     requestAnimationFrame(() => textareaRef.current?.focus());
   }, []);
@@ -35083,8 +35332,8 @@ var LeftSidebar = memo30(
     onPreviewBlock,
     takeoverContent
   }, ref) {
-    const [tab, setTab] = useState66(getPersistedTab);
-    const tabRef = useRef70(tab);
+    const [tab, setTab] = useState67(getPersistedTab);
+    const tabRef = useRef71(tab);
     tabRef.current = tab;
     const selectTab = useCallback84((t) => {
       setTab(t);
@@ -35491,10 +35740,10 @@ function StudioLeftSidebar({
 }
 
 // src/components/StudioPreviewArea.tsx
-import { useState as useState75, useMemo as useMemo33 } from "react";
+import { useState as useState76, useMemo as useMemo33, useCallback as useCallback92 } from "react";
 
 // src/captions/components/CaptionOverlay.tsx
-import { memo as memo31, useState as useState67, useCallback as useCallback86, useRef as useRef71 } from "react";
+import { memo as memo31, useState as useState68, useCallback as useCallback86, useRef as useRef72 } from "react";
 
 // src/captions/keyboard.ts
 var CAPTION_NUDGE_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
@@ -35611,13 +35860,13 @@ function getWordEl(iframe, groupIndex, wordIndex) {
   return wordEls[wordIndex] ?? null;
 }
 function readGsapTransform(el, iframeWin) {
-  const gsap = iframeWin.gsap;
-  if (gsap && gsap.getProperty) {
+  const gsap2 = iframeWin.gsap;
+  if (gsap2 && gsap2.getProperty) {
     return {
-      x: gsap.getProperty(el, "x") || 0,
-      y: gsap.getProperty(el, "y") || 0,
-      scale: gsap.getProperty(el, "scale") || 1,
-      rotation: gsap.getProperty(el, "rotation") || 0
+      x: gsap2.getProperty(el, "x") || 0,
+      y: gsap2.getProperty(el, "y") || 0,
+      scale: gsap2.getProperty(el, "scale") || 1,
+      rotation: gsap2.getProperty(el, "rotation") || 0
     };
   }
   const t = el.style.transform || "";
@@ -35645,9 +35894,9 @@ function getOrCreateWrapper(el) {
 }
 function writeTransform(el, iframeWin, x, y, scale, rotation) {
   const wrapper = getOrCreateWrapper(el);
-  const gsap = iframeWin.gsap;
-  if (gsap && gsap.set) {
-    gsap.set(wrapper, { x, y, scale, rotation });
+  const gsap2 = iframeWin.gsap;
+  if (gsap2 && gsap2.set) {
+    gsap2.set(wrapper, { x, y, scale, rotation });
   } else {
     wrapper.style.transform = `translate(${x.toFixed(1)}px, ${y.toFixed(1)}px) rotate(${rotation.toFixed(1)}deg) scale(${scale.toFixed(3)})`;
   }
@@ -35682,11 +35931,11 @@ var CaptionOverlay = memo31(function CaptionOverlay2({ iframeRef }) {
   const selectedSegmentIds = useCaptionStore((s) => s.selectedSegmentIds);
   const selectSegment = useCaptionStore((s) => s.selectSegment);
   const clearSelection = useCaptionStore((s) => s.clearSelection);
-  const [wordBoxes, setWordBoxes] = useState67([]);
-  const overlayRef = useRef71(null);
-  const modelRef = useRef71(model);
+  const [wordBoxes, setWordBoxes] = useState68([]);
+  const overlayRef = useRef72(null);
+  const modelRef = useRef72(model);
   modelRef.current = model;
-  const interactionRef = useRef71(null);
+  const interactionRef = useRef72(null);
   useMountEffect(() => {
     if (!isEditMode) return;
     let prevBoxes = [];
@@ -35973,7 +36222,7 @@ var CaptionOverlay = memo31(function CaptionOverlay2({ iframeRef }) {
 });
 
 // src/captions/components/CaptionTimeline.tsx
-import { memo as memo32, useCallback as useCallback87, useRef as useRef72 } from "react";
+import { memo as memo32, useCallback as useCallback87, useRef as useRef73 } from "react";
 import { jsx as jsx79, jsxs as jsxs67 } from "react/jsx-runtime";
 var GROUP_COLORS = [
   "#3CE6AC",
@@ -35996,7 +36245,7 @@ var CaptionTimeline = memo32(function CaptionTimeline2({
   const selectSegment = useCaptionStore((s) => s.selectSegment);
   const updateSegmentTiming = useCaptionStore((s) => s.updateSegmentTiming);
   const splitGroup = useCaptionStore((s) => s.splitGroup);
-  const dragRef = useRef72(null);
+  const dragRef = useRef73(null);
   const handleEdgePointerDown = useCallback87(
     (e, segId, edge, originalStart, originalEnd) => {
       e.stopPropagation();
@@ -36118,10 +36367,10 @@ var CaptionTimeline = memo32(function CaptionTimeline2({
 });
 
 // src/components/editor/DomEditOverlay.tsx
-import { memo as memo35, useEffect as useEffect53, useMemo as useMemo31, useRef as useRef76, useState as useState70 } from "react";
+import { memo as memo35, useEffect as useEffect53, useMemo as useMemo31, useRef as useRef77, useState as useState71 } from "react";
 
 // src/components/editor/marqueeCommit.ts
-import { useCallback as useCallback88, useRef as useRef73, useState as useState68 } from "react";
+import { useCallback as useCallback88, useRef as useRef74, useState as useState69 } from "react";
 
 // src/utils/marqueeGeometry.ts
 function rectsOverlap(a, b) {
@@ -36312,9 +36561,9 @@ async function runMarqueeIntersection(rect, iframe, overlayEl, activeComposition
   return hits;
 }
 function useMarqueeGestures(deps) {
-  const marqueeRef = useRef73(null);
-  const [marqueeRect, setMarqueeRect] = useState68(null);
-  const [candidateRects, setCandidateRects] = useState68([]);
+  const marqueeRef = useRef74(null);
+  const [marqueeRect, setMarqueeRect] = useState69(null);
+  const [candidateRects, setCandidateRects] = useState69([]);
   const commitMarquee = useCallback88(
     async (rect, additive) => {
       const iframe = deps.iframeRef.current;
@@ -36488,7 +36737,7 @@ function hasDomEditRotationChanged(initialAngle, nextAngle) {
 }
 
 // src/components/editor/useDomEditOverlayRects.ts
-import { useRef as useRef74, useState as useState69 } from "react";
+import { useRef as useRef75, useState as useState70 } from "react";
 function childRectsEqual(a, b) {
   if (a.length !== b.length) return false;
   for (let i = 0; i < a.length; i++) {
@@ -36505,17 +36754,17 @@ function useDomEditOverlayRects({
   hoverSelectionRef,
   rafPausedRef
 }) {
-  const [overlayRect, setOverlayRectState] = useState69(null);
-  const [hoverRect, setHoverRectState] = useState69(null);
-  const [groupOverlayItems, setGroupOverlayItemsState] = useState69([]);
-  const [childRects, setChildRectsState] = useState69([]);
-  const overlayRectRef = useRef74(null);
-  const hoverRectRef = useRef74(null);
-  const groupOverlayItemsRef = useRef74([]);
-  const resolvedElementRef = useRef74(null);
-  const resolvedHoverElementRef = useRef74(null);
-  const resolvedGroupElementRef = useRef74(/* @__PURE__ */ new Map());
-  const childRectsRef = useRef74([]);
+  const [overlayRect, setOverlayRectState] = useState70(null);
+  const [hoverRect, setHoverRectState] = useState70(null);
+  const [groupOverlayItems, setGroupOverlayItemsState] = useState70([]);
+  const [childRects, setChildRectsState] = useState70([]);
+  const overlayRectRef = useRef75(null);
+  const hoverRectRef = useRef75(null);
+  const groupOverlayItemsRef = useRef75([]);
+  const resolvedElementRef = useRef75(null);
+  const resolvedHoverElementRef = useRef75(null);
+  const resolvedGroupElementRef = useRef75(/* @__PURE__ */ new Map());
+  const childRectsRef = useRef75([]);
   const setOverlayRect = (next) => {
     if (rectsEqual(overlayRectRef.current, next)) return;
     overlayRectRef.current = next;
@@ -36746,27 +36995,27 @@ function OffCanvasIndicators({
 // src/components/editor/manualOffsetDrag.ts
 function getOffsetDragGsap(element) {
   const win = element.ownerDocument.defaultView;
-  const gsap = win?.gsap;
-  return gsap?.set && gsap.getProperty ? gsap : null;
+  const gsap2 = win?.gsap;
+  return gsap2?.set && gsap2.getProperty ? gsap2 : null;
 }
 function applyOffsetDragDraftViaGsap(element, offset, baseGsap) {
-  const gsap = getOffsetDragGsap(element);
-  if (!gsap) return false;
+  const gsap2 = getOffsetDragGsap(element);
+  if (!gsap2) return false;
   element.style.setProperty("translate", "none");
   const { newX, newY } = computeDraggedGsapPosition(element, offset, baseGsap);
-  gsap.set(element, { x: newX, y: newY });
+  gsap2.set(element, { x: newX, y: newY });
   return true;
 }
 function applyRotationDraftViaGsap(element, angle) {
-  const gsap = getOffsetDragGsap(element);
-  if (!gsap) return false;
+  const gsap2 = getOffsetDragGsap(element);
+  if (!gsap2) return false;
   element.style.setProperty("rotate", "none");
-  gsap.set(element, { rotation: angle });
+  gsap2.set(element, { rotation: angle });
   return true;
 }
 function readGsapRotation(element) {
-  const gsap = getOffsetDragGsap(element);
-  return gsap ? Number(gsap.getProperty(element, "rotation")) || 0 : 0;
+  const gsap2 = getOffsetDragGsap(element);
+  return gsap2 ? Number(gsap2.getProperty(element, "rotation")) || 0 : 0;
 }
 var DEFAULT_OFFSET_PROBE_PX = 100;
 var MIN_PROBE_VECTOR_LENGTH_PX = 0.01;
@@ -37971,7 +38220,7 @@ function createDomEditOverlayGestureHandlers(opts) {
 }
 
 // src/components/editor/SnapGuideOverlay.tsx
-import { memo as memo33, useRef as useRef75 } from "react";
+import { memo as memo33, useRef as useRef76 } from "react";
 import { jsx as jsx82, jsxs as jsxs69 } from "react/jsx-runtime";
 var MAX_GUIDES = 6;
 var MAX_SPACING_GUIDES = 4;
@@ -37983,12 +38232,12 @@ var SnapGuideOverlay = memo33(function SnapGuideOverlay2({
   overlayWidth,
   overlayHeight
 }) {
-  const guideElsRef = useRef75([]);
-  const spacingElsRef = useRef75([]);
-  const spacingLabelElsRef = useRef75([]);
-  const overlayWidthRef = useRef75(overlayWidth);
+  const guideElsRef = useRef76([]);
+  const spacingElsRef = useRef76([]);
+  const spacingLabelElsRef = useRef76([]);
+  const overlayWidthRef = useRef76(overlayWidth);
   overlayWidthRef.current = overlayWidth;
-  const overlayHeightRef = useRef75(overlayHeight);
+  const overlayHeightRef = useRef76(overlayHeight);
   overlayHeightRef.current = overlayHeight;
   useMountEffect(() => {
     let frame = 0;
@@ -38170,9 +38419,9 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
   onRotationCommit,
   onMarqueeSelect
 }) {
-  const overlayRef = useRef76(null);
-  const boxRef = useRef76(null);
-  const onMarqueeSelectRef = useRef76(onMarqueeSelect);
+  const overlayRef = useRef77(null);
+  const boxRef = useRef77(null);
+  const onMarqueeSelectRef = useRef77(onMarqueeSelect);
   onMarqueeSelectRef.current = onMarqueeSelect;
   const selectionShapeStyles = (() => {
     const fallback = {
@@ -38196,39 +38445,39 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
       return fallback;
     }
   })();
-  const gestureRef = useRef76(null);
-  const groupGestureRef = useRef76(null);
-  const blockedMoveRef = useRef76(null);
-  const suppressNextBoxClickRef = useRef76(false);
-  const suppressNextBoxMouseDownRef = useRef76(false);
-  const suppressNextOverlayMouseDownRef = useRef76(false);
-  const snapGuidesRef = useRef76(null);
-  const rafPausedRef = useRef76(false);
-  const selectionRef = useRef76(selection);
+  const gestureRef = useRef77(null);
+  const groupGestureRef = useRef77(null);
+  const blockedMoveRef = useRef77(null);
+  const suppressNextBoxClickRef = useRef77(false);
+  const suppressNextBoxMouseDownRef = useRef77(false);
+  const suppressNextOverlayMouseDownRef = useRef77(false);
+  const snapGuidesRef = useRef77(null);
+  const rafPausedRef = useRef77(false);
+  const selectionRef = useRef77(selection);
   selectionRef.current = selection;
-  const activeCompositionPathRef = useRef76(activeCompositionPath);
+  const activeCompositionPathRef = useRef77(activeCompositionPath);
   activeCompositionPathRef.current = activeCompositionPath;
-  const groupSelectionsRef = useRef76(groupSelections);
+  const groupSelectionsRef = useRef77(groupSelections);
   groupSelectionsRef.current = groupSelections;
-  const hoverSelectionRef = useRef76(hoverSelection);
+  const hoverSelectionRef = useRef77(hoverSelection);
   hoverSelectionRef.current = hoverSelection;
-  const onPathOffsetCommitRef = useRef76(onPathOffsetCommit);
+  const onPathOffsetCommitRef = useRef77(onPathOffsetCommit);
   onPathOffsetCommitRef.current = onPathOffsetCommit;
-  const onGroupPathOffsetCommitRef = useRef76(onGroupPathOffsetCommit);
+  const onGroupPathOffsetCommitRef = useRef77(onGroupPathOffsetCommit);
   onGroupPathOffsetCommitRef.current = onGroupPathOffsetCommit;
-  const onBoxSizeCommitRef = useRef76(onBoxSizeCommit);
+  const onBoxSizeCommitRef = useRef77(onBoxSizeCommit);
   onBoxSizeCommitRef.current = onBoxSizeCommit;
-  const onRotationCommitRef = useRef76(onRotationCommit);
+  const onRotationCommitRef = useRef77(onRotationCommit);
   onRotationCommitRef.current = onRotationCommit;
-  const onBlockedMoveRef = useRef76(onBlockedMove);
+  const onBlockedMoveRef = useRef77(onBlockedMove);
   onBlockedMoveRef.current = onBlockedMove;
-  const onManualDragStartRef = useRef76(onManualDragStart);
+  const onManualDragStartRef = useRef77(onManualDragStart);
   onManualDragStartRef.current = onManualDragStart;
-  const onCanvasPointerMoveRef = useRef76(onCanvasPointerMove);
+  const onCanvasPointerMoveRef = useRef77(onCanvasPointerMove);
   onCanvasPointerMoveRef.current = onCanvasPointerMove;
-  const onCanvasPointerLeaveRef = useRef76(onCanvasPointerLeave);
+  const onCanvasPointerLeaveRef = useRef77(onCanvasPointerLeave);
   onCanvasPointerLeaveRef.current = onCanvasPointerLeave;
-  const onSelectionChangeRef = useRef76(onSelectionChange);
+  const onSelectionChangeRef = useRef77(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
   const {
     overlayRect,
@@ -38248,7 +38497,7 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
     hoverSelectionRef,
     rafPausedRef
   });
-  const [compRect, setCompRect] = useState70({
+  const [compRect, setCompRect] = useState71({
     left: 0,
     top: 0,
     width: 0,
@@ -38283,8 +38532,8 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
     frame = requestAnimationFrame(update);
     return () => cancelAnimationFrame(frame);
   });
-  const offCanvasElementsRef = useRef76(/* @__PURE__ */ new Map());
-  const [offCanvasRects, setOffCanvasRects] = useState70([]);
+  const offCanvasElementsRef = useRef77(/* @__PURE__ */ new Map());
+  const [offCanvasRects, setOffCanvasRects] = useState71([]);
   useEffect53(() => {
     const iframe = iframeRef.current;
     const overlay = overlayRef.current;
@@ -38628,10 +38877,10 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
 });
 
 // src/components/editor/MotionPathOverlay.tsx
-import { memo as memo36, useEffect as useEffect55, useRef as useRef79, useState as useState72 } from "react";
+import { memo as memo36, useEffect as useEffect55, useRef as useRef80, useState as useState73 } from "react";
 
 // src/contexts/DomEditContext.tsx
-import { createContext as createContext6, useCallback as useCallback89, useContext as useContext6, useMemo as useMemo32, useRef as useRef77 } from "react";
+import { createContext as createContext6, useCallback as useCallback89, useContext as useContext6, useMemo as useMemo32, useRef as useRef78 } from "react";
 import { jsx as jsx85 } from "react/jsx-runtime";
 var DomEditActionsContext = createContext6(null);
 var DomEditSelectionContext = createContext6(null);
@@ -38710,6 +38959,9 @@ function DomEditProvider({
     handleGsapAddKeyframe,
     handleGsapAddKeyframeBatch,
     handleGsapRemoveKeyframe,
+    handleGsapMoveKeyframeToPlayhead,
+    handleGsapMoveKeyframe,
+    handleGsapResizeKeyframedTween,
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
@@ -38727,7 +38979,7 @@ function DomEditProvider({
   },
   children
 }) {
-  const commitMutationRef = useRef77(commitMutation);
+  const commitMutationRef = useRef78(commitMutation);
   commitMutationRef.current = commitMutation;
   const stableCommitMutation = useCallback89(
     (mutation, options) => commitMutationRef.current(mutation, options),
@@ -38783,6 +39035,9 @@ function DomEditProvider({
       handleGsapAddKeyframe,
       handleGsapAddKeyframeBatch,
       handleGsapRemoveKeyframe,
+      handleGsapMoveKeyframeToPlayhead,
+      handleGsapMoveKeyframe,
+      handleGsapResizeKeyframedTween,
       handleGsapConvertToKeyframes,
       handleGsapRemoveAllKeyframes,
       handleResetSelectedElementKeyframes,
@@ -38847,6 +39102,9 @@ function DomEditProvider({
       handleGsapAddKeyframe,
       handleGsapAddKeyframeBatch,
       handleGsapRemoveKeyframe,
+      handleGsapMoveKeyframeToPlayhead,
+      handleGsapMoveKeyframe,
+      handleGsapResizeKeyframedTween,
       handleGsapConvertToKeyframes,
       handleGsapRemoveAllKeyframes,
       handleResetSelectedElementKeyframes,
@@ -39078,7 +39336,7 @@ function commitCreatePath(targetSelector, position, x, y, commit) {
 }
 
 // src/components/editor/useMotionPathData.ts
-import { useEffect as useEffect54, useRef as useRef78, useState as useState71 } from "react";
+import { useEffect as useEffect54, useRef as useRef79, useState as useState72 } from "react";
 function transformTranslate(el) {
   const t = el.ownerDocument?.defaultView?.getComputedStyle(el).transform;
   if (!t || t === "none") return { x: 0, y: 0 };
@@ -39142,13 +39400,13 @@ function hasMotionPathPlugin(iframe) {
   }
 }
 function useMotionPathData(iframeRef, selector) {
-  const [rect, setRect] = useState71(null);
-  const [geometry, setGeometry] = useState71(null);
-  const resolvedForRef = useRef78(null);
+  const [rect, setRect] = useState72(null);
+  const [geometry, setGeometry] = useState72(null);
+  const resolvedForRef = useRef79(null);
   const geometryResolved = resolvedForRef.current === selector;
-  const [visibleInPreview, setVisibleInPreview] = useState71(true);
-  const [home, setHome] = useState71(null);
-  const [pScale, setPScale] = useState71(1);
+  const [visibleInPreview, setVisibleInPreview] = useState72(true);
+  const [home, setHome] = useState72(null);
+  const [pScale, setPScale] = useState72(1);
   useEffect54(() => {
     if (!selector) {
       setRect(null);
@@ -39226,22 +39484,23 @@ var MotionPathOverlay = memo36(function MotionPathOverlay2({
     commitMutation,
     selectedGsapAnimations,
     handleGsapRemoveKeyframe,
-    handleGsapDeleteAllForElement
+    handleGsapRemoveAllKeyframes,
+    handleGsapMoveKeyframeToPlayhead
   } = useDomEditContext();
   const { rect, geometry, geometryResolved, visibleInPreview, home, pScale } = useMotionPathData(
     iframeRef,
     selectorFor(selection)
   );
-  const [draft, setDraft] = useState72(null);
-  const [ghost, setGhost] = useState72(null);
-  const [hoverNode, setHoverNode] = useState72(null);
-  const [kfMenu, setKfMenu] = useState72(null);
+  const [draft, setDraft] = useState73(null);
+  const [ghost, setGhost] = useState73(null);
+  const [hoverNode, setHoverNode] = useState73(null);
+  const [kfMenu, setKfMenu] = useState73(null);
   const activeKeyframePct = usePlayerStore((s) => s.activeKeyframePct);
   const armed = usePlayerStore((s) => s.motionPathArmed);
   const setMotionPathArmed = usePlayerStore((s) => s.setMotionPathArmed);
   const setMotionPathCreateAvailable = usePlayerStore((s) => s.setMotionPathCreateAvailable);
-  const dragRef = useRef79(null);
-  const parkTimerRef = useRef79(void 0);
+  const dragRef = useRef80(null);
+  const parkTimerRef = useRef80(void 0);
   const animId = editableAnimationId(selectedGsapAnimations ?? [], geometry?.kind ?? "linear");
   useEffect55(() => () => clearTimeout(parkTimerRef.current), [animId]);
   const createMode = geometryResolved && !geometry && Boolean(selection?.element) && !isPlaying;
@@ -39549,14 +39808,15 @@ var MotionPathOverlay = memo36(function MotionPathOverlay2({
         state: kfMenu,
         onClose: () => setKfMenu(null),
         onDelete: (_elId, pct) => animId && handleGsapRemoveKeyframe(animId, pct),
-        onDeleteAll: (elId) => handleGsapDeleteAllForElement(`#${elId}`)
+        onDeleteAll: () => animId && handleGsapRemoveAllKeyframes(animId),
+        onMoveToPlayhead: (_elId, pct) => animId && handleGsapMoveKeyframeToPlayhead(animId, pct)
       }
     )
   ] });
 });
 
 // src/components/editor/SnapToolbar.tsx
-import { memo as memo37, useCallback as useCallback90, useEffect as useEffect56, useRef as useRef80, useState as useState73 } from "react";
+import { memo as memo37, useCallback as useCallback90, useEffect as useEffect56, useRef as useRef81, useState as useState74 } from "react";
 import { MagnetStraight, GridFour, Path } from "@phosphor-icons/react";
 import { jsx as jsx88, jsxs as jsxs73 } from "react/jsx-runtime";
 var SNAP_DEFAULTS = {
@@ -39575,13 +39835,13 @@ function readSnapPrefs() {
   };
 }
 var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
-  const [prefs, setPrefs] = useState73(readSnapPrefs);
-  const [gridPopoverOpen, setGridPopoverOpen] = useState73(false);
+  const [prefs, setPrefs] = useState74(readSnapPrefs);
+  const [gridPopoverOpen, setGridPopoverOpen] = useState74(false);
   const motionPathCreateAvailable = usePlayerStore((s) => s.motionPathCreateAvailable);
   const motionPathArmed = usePlayerStore((s) => s.motionPathArmed);
   const setMotionPathArmed = usePlayerStore((s) => s.setMotionPathArmed);
-  const popoverRef = useRef80(null);
-  const gridButtonRef = useRef80(null);
+  const popoverRef = useRef81(null);
+  const gridButtonRef = useRef81(null);
   const updatePrefs = useCallback90(
     (patch) => {
       setPrefs((prev) => {
@@ -39720,7 +39980,7 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
 });
 
 // src/components/StudioFeedbackBar.tsx
-import { memo as memo38, useState as useState74, useCallback as useCallback91, useRef as useRef81, useEffect as useEffect57 } from "react";
+import { memo as memo38, useState as useState75, useCallback as useCallback91, useRef as useRef82, useEffect as useEffect57 } from "react";
 import { Fragment as Fragment29, jsx as jsx89, jsxs as jsxs74 } from "react/jsx-runtime";
 var DEFAULT_FEEDBACK_INTERVAL = 10;
 var AUTO_DISMISS_MS = 2e4;
@@ -39774,13 +40034,13 @@ function markPrompted() {
   }
 }
 var StudioFeedbackBar = memo38(function StudioFeedbackBar2() {
-  const [visible, setVisible] = useState74(false);
-  const [rating, setRating] = useState74(null);
-  const [comment, setComment] = useState74("");
-  const [submitted, setSubmitted] = useState74(false);
-  const [exiting, setExiting] = useState74(false);
-  const inputRef = useRef81(null);
-  const dismissTimerRef = useRef81(null);
+  const [visible, setVisible] = useState75(false);
+  const [rating, setRating] = useState75(null);
+  const [comment, setComment] = useState75("");
+  const [submitted, setSubmitted] = useState75(false);
+  const [exiting, setExiting] = useState75(false);
+  const inputRef = useRef82(null);
+  const dismissTimerRef = useRef82(null);
   useEffect57(() => {
     incrementSessionCount();
     const showTimer = setTimeout(() => {
@@ -39900,6 +40160,46 @@ var StudioFeedbackBar = memo38(function StudioFeedbackBar2() {
   );
 });
 
+// src/components/editor/keyframeRetime.ts
+var NOOP_EPSILON_PCT2 = 0.1;
+var EPSILON_TIME = 1e-4;
+var round33 = (n) => Math.round(n * 1e3) / 1e3;
+var round1 = (n) => Math.round(n * 10) / 10;
+var clamp5 = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+function resolveKeyframeRetime(opts) {
+  const { keyframes, draggedTweenPct, tweenStart, tweenDuration, dropAbsTime } = opts;
+  if (tweenDuration <= 0) return { kind: "noop" };
+  const tweenEnd = tweenStart + tweenDuration;
+  if (dropAbsTime >= tweenStart - EPSILON_TIME && dropAbsTime <= tweenEnd + EPSILON_TIME) {
+    const toTweenPct = clamp5((dropAbsTime - tweenStart) / tweenDuration * 100, 0, 100);
+    if (Math.abs(toTweenPct - draggedTweenPct) < NOOP_EPSILON_PCT2) return { kind: "noop" };
+    return { kind: "move", toTweenPct };
+  }
+  if (keyframes.length === 0) return { kind: "noop" };
+  const newStart = Math.min(dropAbsTime, tweenStart);
+  const newEnd = Math.max(dropAbsTime, tweenEnd);
+  const newDuration = Math.max(0.01, newEnd - newStart);
+  let draggedIdx = 0;
+  let best = Infinity;
+  keyframes.forEach((kf, i) => {
+    const d = Math.abs(kf.percentage - draggedTweenPct);
+    if (d < best) {
+      best = d;
+      draggedIdx = i;
+    }
+  });
+  const pctRemap = keyframes.map((kf, i) => {
+    const absTime = i === draggedIdx ? dropAbsTime : tweenStart + kf.percentage / 100 * tweenDuration;
+    return { from: kf.percentage, to: round1((absTime - newStart) / newDuration * 100) };
+  });
+  return {
+    kind: "resize",
+    position: round33(newStart),
+    duration: round33(newDuration),
+    pctRemap
+  };
+}
+
 // src/components/StudioPreviewArea.tsx
 import { Fragment as Fragment30, jsx as jsx90, jsxs as jsxs75 } from "react/jsx-runtime";
 function StudioPreviewArea({
@@ -39961,14 +40261,17 @@ function StudioPreviewArea({
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleGsapRemoveKeyframe,
+    handleGsapMoveKeyframeToPlayhead,
+    handleGsapMoveKeyframe,
+    handleGsapResizeKeyframedTween,
     handleGsapUpdateMeta,
     handleGsapAddKeyframe,
     handleGsapConvertToKeyframes,
-    handleGsapDeleteAllForElement,
+    handleGsapRemoveAllKeyframes,
     buildDomSelectionForTimelineElement,
     applyMarqueeSelection
   } = useDomEditActionsContext();
-  const [snapPrefs, setSnapPrefs] = useState75(() => {
+  const [snapPrefs, setSnapPrefs] = useState76(() => {
     const p = readStudioUiPreferences();
     return {
       snapEnabled: p.snapEnabled ?? true,
@@ -39977,6 +40280,16 @@ function StudioPreviewArea({
       snapToGrid: p.snapToGrid ?? false
     };
   });
+  const resolveKeyframeTarget = useCallback92(
+    (pct) => {
+      const cached2 = usePlayerStore.getState().keyframeCache.get(domEditSelection?.id ?? "");
+      const kf = cached2?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
+      const group = kf?.propertyGroup;
+      const anim = (group ? selectedGsapAnimations.find((a) => a.propertyGroup === group) : void 0) ?? selectedGsapAnimations.find((a) => a.keyframes);
+      return anim ? { animId: anim.id, tweenPct: kf?.tweenPercentage ?? pct } : null;
+    },
+    [domEditSelection?.id, selectedGsapAnimations]
+  );
   const timelineEditCallbacks = useMemo33(
     () => ({
       onMoveElement: handleTimelineElementMove,
@@ -39985,19 +40298,61 @@ function StudioPreviewArea({
       onSplitElement: handleTimelineElementSplit,
       onRazorSplit: handleRazorSplit,
       onRazorSplitAll: handleRazorSplitAll,
-      onDeleteAllKeyframes: (elId) => {
-        const rawId = elId.includes("#") ? elId.split("#").pop() ?? elId : elId;
-        handleGsapDeleteAllForElement(`#${rawId}`);
+      onDeleteAllKeyframes: () => {
+        const anim = selectedGsapAnimations.find((a) => a.keyframes);
+        if (!anim) return;
+        handleGsapRemoveAllKeyframes(anim.id);
       },
-      // fallow-ignore-next-line complexity
       onDeleteKeyframe: (_elId, pct) => {
-        const cacheKey = domEditSelection?.id ?? "";
-        const cached2 = usePlayerStore.getState().keyframeCache.get(cacheKey);
-        const kf = cached2?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
-        const group = kf?.propertyGroup;
-        const anim = (group ? selectedGsapAnimations.find((a) => a.propertyGroup === group) : void 0) ?? selectedGsapAnimations.find((a) => a.keyframes);
-        if (!anim) return;
-        handleGsapRemoveKeyframe(anim.id, kf?.tweenPercentage ?? pct);
+        const target = resolveKeyframeTarget(pct);
+        if (target) handleGsapRemoveKeyframe(target.animId, target.tweenPct);
+      },
+      // Retime the keyframe to the playhead, preserving its value + ease.
+      onMoveKeyframeToPlayhead: (_elId, pct) => {
+        const target = resolveKeyframeTarget(pct);
+        if (target) handleGsapMoveKeyframeToPlayhead(target.animId, target.tweenPct);
+      },
+      // Drag-to-retime. The diamond reports clip-%s; resolveKeyframeTarget gives
+      // the dragged keyframe's anim + tween-%. We convert the clip-% drop to an
+      // absolute time (via the clip's timing basis) and let resolveKeyframeRetime
+      // decide: a drop inside the tween window is a plain move (re-key tween-%); a
+      // drop past the boundary (last keyframe past the end, first before the start)
+      // resizes the tween — position/duration grow so the dragged keyframe lands at
+      // the drop while every other keyframe keeps its absolute time (value+ease too).
+      onMoveKeyframe: (_elId, fromClipPct, toClipPct) => {
+        const target = resolveKeyframeTarget(fromClipPct);
+        const sel = domEditSelection;
+        if (!target || !sel) return;
+        const anim = selectedGsapAnimations.find((a) => a.id === target.animId);
+        const tweenStart = anim ? resolveTweenStart(anim) : null;
+        if (!anim || tweenStart === null) return;
+        const tweenDuration = anim.duration ?? resolveTweenDuration(anim);
+        const sourceFile = sel.sourceFile || activeCompPath || "index.html";
+        const { elements, domClipChildren } = usePlayerStore.getState();
+        const { elStart, elDuration } = resolveClipTimingBasis(
+          sel.id ?? "",
+          sourceFile,
+          elements,
+          domClipChildren
+        );
+        const dropAbsTime = elStart + toClipPct / 100 * elDuration;
+        const decision = resolveKeyframeRetime({
+          keyframes: anim.keyframes?.keyframes ?? [],
+          draggedTweenPct: target.tweenPct,
+          tweenStart,
+          tweenDuration,
+          dropAbsTime
+        });
+        if (decision.kind === "move" && decision.toTweenPct != null) {
+          handleGsapMoveKeyframe(target.animId, target.tweenPct, decision.toTweenPct);
+        } else if (decision.kind === "resize" && decision.pctRemap && decision.position != null && decision.duration != null) {
+          handleGsapResizeKeyframedTween(
+            target.animId,
+            decision.position,
+            decision.duration,
+            decision.pctRemap
+          );
+        }
       },
       onChangeKeyframeEase: (_elId, _pct, ease) => {
         for (const anim of selectedGsapAnimations) {
@@ -40030,16 +40385,20 @@ function StudioPreviewArea({
       handleTimelineElementSplit,
       handleRazorSplit,
       handleRazorSplitAll,
-      handleGsapDeleteAllForElement,
-      domEditSelection?.id,
+      handleGsapRemoveAllKeyframes,
+      resolveKeyframeTarget,
       selectedGsapAnimations,
       handleGsapRemoveKeyframe,
+      handleGsapMoveKeyframeToPlayhead,
+      handleGsapMoveKeyframe,
+      handleGsapResizeKeyframedTween,
       handleGsapUpdateMeta,
       handleGsapAddKeyframe,
       handleGsapConvertToKeyframes,
       buildDomSelectionForTimelineElement,
       projectId,
-      activeCompPath
+      activeCompPath,
+      domEditSelection
     ]
   );
   return /* @__PURE__ */ jsxs75("div", { className: "flex-1 flex flex-col relative min-w-0", children: [
@@ -40143,17 +40502,17 @@ function StudioPreviewArea({
 
 // src/components/StudioRightPanel.tsx
 import {
-  useCallback as useCallback101,
+  useCallback as useCallback102,
   useMemo as useMemo34,
-  useRef as useRef86,
-  useState as useState84
+  useRef as useRef87,
+  useState as useState85
 } from "react";
 
 // src/components/editor/LayersPanel.tsx
-import { memo as memo39, useState as useState77, useCallback as useCallback93, useEffect as useEffect58, useRef as useRef83 } from "react";
+import { memo as memo39, useState as useState78, useCallback as useCallback94, useEffect as useEffect58, useRef as useRef84 } from "react";
 
 // src/components/editor/useLayerDrag.ts
-import { useRef as useRef82, useState as useState76, useCallback as useCallback92 } from "react";
+import { useRef as useRef83, useState as useState77, useCallback as useCallback93 } from "react";
 var DRAG_THRESHOLD_PX2 = 4;
 function isLayerDraggable(layer) {
   if (!(layer.selector || layer.id)) return false;
@@ -40220,10 +40579,10 @@ function useLayerDrag({
   onReorder,
   onSingleSibling
 }) {
-  const dragRef = useRef82(null);
-  const [dragKey, setDragKey] = useState76(null);
-  const [insertionLineY, setInsertionLineY] = useState76(null);
-  const handleRowPointerDown = useCallback92(
+  const dragRef = useRef83(null);
+  const [dragKey, setDragKey] = useState77(null);
+  const [insertionLineY, setInsertionLineY] = useState77(null);
+  const handleRowPointerDown = useCallback93(
     (layerIndex, e) => {
       if (e.button !== 0) return;
       const layer = visibleLayers[layerIndex];
@@ -40250,7 +40609,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef, onSingleSibling]
   );
-  const handleContainerPointerMove = useCallback92(
+  const handleContainerPointerMove = useCallback93(
     (e) => {
       const drag = dragRef.current;
       if (!drag) return;
@@ -40276,7 +40635,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef]
   );
-  const handleContainerPointerUp = useCallback92(() => {
+  const handleContainerPointerUp = useCallback93(() => {
     const drag = dragRef.current;
     dragRef.current = null;
     setDragKey(null);
@@ -40348,12 +40707,12 @@ var LayersPanel = memo39(function LayersPanel2() {
     handleDomZIndexReorderCommit,
     setActiveGroupElement
   } = useDomEditContext();
-  const [layers, setLayers] = useState77([]);
-  const [collapsed, setCollapsed] = useState77({});
-  const prevDocVersionRef = useRef83(0);
-  const scrollContainerRef = useRef83(null);
+  const [layers, setLayers] = useState78([]);
+  const [collapsed, setCollapsed] = useState78({});
+  const prevDocVersionRef = useRef84(0);
+  const scrollContainerRef = useRef84(null);
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
-  const collectLayers = useCallback93(() => {
+  const collectLayers = useCallback94(() => {
     const iframe = previewIframeRef.current;
     if (!iframe) return;
     let doc = null;
@@ -40392,7 +40751,7 @@ var LayersPanel = memo39(function LayersPanel2() {
       return () => clearTimeout(timer);
     }
   }, [compositionLoading, collectLayers]);
-  const resolveSelection = useCallback93(
+  const resolveSelection = useCallback94(
     (layer) => {
       let el = layer.element;
       if (!el.isConnected) {
@@ -40412,7 +40771,7 @@ var LayersPanel = memo39(function LayersPanel2() {
     },
     [activeCompPath, isMasterView, previewIframeRef, activeGroupElement]
   );
-  const seekToLayer = useCallback93(
+  const seekToLayer = useCallback94(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (!selection) return;
@@ -40441,7 +40800,7 @@ var LayersPanel = memo39(function LayersPanel2() {
     },
     [currentTime, resolveSelection, timelineElements]
   );
-  const handleSelectLayer = useCallback93(
+  const handleSelectLayer = useCallback94(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (!selection) return;
@@ -40450,7 +40809,7 @@ var LayersPanel = memo39(function LayersPanel2() {
     },
     [resolveSelection, applyDomSelection, seekToLayer]
   );
-  const handleLayerDoubleClick = useCallback93(
+  const handleLayerDoubleClick = useCallback94(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (selection?.element.hasAttribute("data-hf-group")) {
@@ -40461,7 +40820,7 @@ var LayersPanel = memo39(function LayersPanel2() {
     },
     [resolveSelection, setActiveGroupElement, handleSelectLayer]
   );
-  const handleLayerHover = useCallback93(
+  const handleLayerHover = useCallback94(
     async (layer) => {
       if (!layer) {
         updateDomEditHoverSelection(null);
@@ -40472,11 +40831,11 @@ var LayersPanel = memo39(function LayersPanel2() {
     },
     [resolveSelection, updateDomEditHoverSelection]
   );
-  const toggleCollapse = useCallback93((key, e) => {
+  const toggleCollapse = useCallback94((key, e) => {
     e.stopPropagation();
     setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
   }, []);
-  const handleReorder = useCallback93(
+  const handleReorder = useCallback94(
     (event) => {
       const { siblingLayers, fromIndex, toIndex } = event;
       const reordered = [...siblingLayers];
@@ -40500,7 +40859,7 @@ var LayersPanel = memo39(function LayersPanel2() {
   );
   const selectedKey = domEditSelection ? getDomEditLayerKey(domEditSelection) : null;
   const visibleLayers = getVisibleLayers(layers, collapsed);
-  const handleSingleSibling = useCallback93(() => {
+  const handleSingleSibling = useCallback94(() => {
     showToast("Only one layer at this level", "info");
   }, [showToast]);
   const {
@@ -40700,10 +41059,10 @@ function getVisibleLayers(layers, collapsed) {
 }
 
 // src/captions/components/CaptionPropertyPanel.tsx
-import { memo as memo41, useCallback as useCallback95, useState as useState78 } from "react";
+import { memo as memo41, useCallback as useCallback96, useState as useState79 } from "react";
 
 // src/captions/components/CaptionAnimationPanel.tsx
-import { memo as memo40, useCallback as useCallback94 } from "react";
+import { memo as memo40, useCallback as useCallback95 } from "react";
 
 // src/captions/components/shared.tsx
 import { jsx as jsx92, jsxs as jsxs77 } from "react/jsx-runtime";
@@ -40866,25 +41225,25 @@ var CaptionAnimationPanel = memo40(function CaptionAnimationPanel2() {
   }
   const group = resolvedGroupId ? model?.groups.get(resolvedGroupId) : void 0;
   const animation = group?.animation;
-  const handleEntranceChange = useCallback94(
+  const handleEntranceChange = useCallback95(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "entrance", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleHighlightChange = useCallback94(
+  const handleHighlightChange = useCallback95(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "highlight", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleExitChange = useCallback94(
+  const handleExitChange = useCallback95(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "exit", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleApplyToAll = useCallback94(() => {
+  const handleApplyToAll = useCallback95(() => {
     if (animation) applyAnimationToAll(animation);
   }, [animation, applyAnimationToAll]);
   if (!group || !resolvedGroupId || !animation) {
@@ -40943,7 +41302,7 @@ var CaptionPropertyPanel = memo41(function CaptionPropertyPanel2({
   const selectedGroupId = useCaptionStore((s) => s.selectedGroupId);
   const updateSelectedStyle = useCaptionStore((s) => s.updateSelectedStyle);
   const updateGroupStyle = useCaptionStore((s) => s.updateGroupStyle);
-  const [activeTab, setActiveTab] = useState78("style");
+  const [activeTab, setActiveTab] = useState79("style");
   const firstSegmentId = selectedSegmentIds.size > 0 ? [...selectedSegmentIds][0] : void 0;
   const firstSegment = model?.segments.get(firstSegmentId ?? "");
   let ownerGroupId = null;
@@ -40962,7 +41321,7 @@ var CaptionPropertyPanel = memo41(function CaptionPropertyPanel2({
     ...groupStyle,
     ...segmentOverrides
   };
-  const applyToIframeDom = useCallback95(
+  const applyToIframeDom = useCallback96(
     (updates) => {
       const iframe = iframeRef.current;
       if (!iframe || !model) return;
@@ -41036,7 +41395,7 @@ var CaptionPropertyPanel = memo41(function CaptionPropertyPanel2({
     },
     [iframeRef, model, selectedSegmentIds]
   );
-  const handleStyleChange = useCallback95(
+  const handleStyleChange = useCallback96(
     (updates) => {
       if (selectedGroupId) {
         updateGroupStyle(selectedGroupId, updates);
@@ -41136,7 +41495,7 @@ var CaptionPropertyPanel = memo41(function CaptionPropertyPanel2({
 });
 
 // src/components/editor/BlockParamsPanel.tsx
-import { memo as memo42, useState as useState79, useCallback as useCallback96 } from "react";
+import { memo as memo42, useState as useState80, useCallback as useCallback97 } from "react";
 import { jsx as jsx95, jsxs as jsxs80 } from "react/jsx-runtime";
 var BlockParamsPanel = memo42(function BlockParamsPanel2({
   blockTitle,
@@ -41144,14 +41503,14 @@ var BlockParamsPanel = memo42(function BlockParamsPanel2({
   compositionPath: _compositionPath,
   onClose
 }) {
-  const [values, setValues] = useState79(() => {
+  const [values, setValues] = useState80(() => {
     const initial = {};
     for (const p of params) {
       initial[p.key] = p.default;
     }
     return initial;
   });
-  const handleChange = useCallback96((key, value) => {
+  const handleChange = useCallback97((key, value) => {
     setValues((prev) => ({ ...prev, [key]: value }));
   }, []);
   return /* @__PURE__ */ jsxs80("div", { className: "flex flex-col h-full", children: [
@@ -41261,10 +41620,10 @@ function ParamControl({
 }
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo44, useState as useState81, useRef as useRef84, useEffect as useEffect59 } from "react";
+import { memo as memo44, useState as useState82, useRef as useRef85, useEffect as useEffect59 } from "react";
 
 // src/components/renders/RenderQueueItem.tsx
-import { memo as memo43, useCallback as useCallback97, useState as useState80 } from "react";
+import { memo as memo43, useCallback as useCallback98, useState as useState81 } from "react";
 import { Fragment as Fragment31, jsx as jsx96, jsxs as jsxs81 } from "react/jsx-runtime";
 function formatDuration(ms) {
   if (ms < 1e3) return `${ms}ms`;
@@ -41282,12 +41641,12 @@ var RenderQueueItem = memo43(function RenderQueueItem2({
   projectId,
   onDelete
 }) {
-  const [hovered, setHovered] = useState80(false);
+  const [hovered, setHovered] = useState81(false);
   const fileSrc = `/api/projects/${projectId}/renders/file/${job.filename}`;
-  const handleOpen = useCallback97(() => {
+  const handleOpen = useCallback98(() => {
     window.open(fileSrc, "_blank");
   }, [fileSrc]);
-  const handleDownload = useCallback97(
+  const handleDownload = useCallback98(
     (e) => {
       e.stopPropagation();
       const a = document.createElement("a");
@@ -41475,8 +41834,8 @@ var FORMAT_INFO = {
   }
 };
 function FormatInfoTooltip({ format }) {
-  const [open, setOpen] = useState81(false);
-  const timeoutRef = useRef84(void 0);
+  const [open, setOpen] = useState82(false);
+  const timeoutRef = useRef85(void 0);
   const show = () => {
     clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -41528,10 +41887,10 @@ function FormatExportButton({
   compositionDimensions
 }) {
   const persisted = getPersistedRenderSettings();
-  const [format, setFormat] = useState81(persisted.format);
-  const [quality, setQuality] = useState81(persisted.quality);
-  const [resolution, setResolution] = useState81("auto");
-  const [fps, setFps] = useState81(persisted.fps);
+  const [format, setFormat] = useState82(persisted.format);
+  const [quality, setQuality] = useState82(persisted.quality);
+  const [resolution, setResolution] = useState82("auto");
+  const [fps, setFps] = useState82(persisted.fps);
   const showQuality = format !== "mov";
   const selectCls = "h-7 w-full px-2 text-[11px] bg-panel-input rounded-md text-panel-text-1 outline-none cursor-pointer disabled:opacity-50 hover:bg-panel-hover transition-colors";
   return /* @__PURE__ */ jsxs82("div", { className: "flex flex-col gap-3", children: [
@@ -41643,7 +42002,7 @@ var RenderQueue = memo44(function RenderQueue2({
   isRendering,
   compositionDimensions
 }) {
-  const listRef = useRef84(null);
+  const listRef = useRef85(null);
   useEffect59(() => {
     if (listRef.current) {
       listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
@@ -41726,11 +42085,11 @@ var RenderQueue = memo44(function RenderQueue2({
 });
 
 // src/components/panels/SlideshowPanel.tsx
-import { useState as useState83, useEffect as useEffect60, useCallback as useCallback99, useRef as useRef85 } from "react";
+import { useState as useState84, useEffect as useEffect60, useCallback as useCallback100, useRef as useRef86 } from "react";
 import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
-import { useState as useState82, useCallback as useCallback98, useId } from "react";
+import { useState as useState83, useCallback as useCallback99, useId } from "react";
 import { jsx as jsx98, jsxs as jsxs83 } from "react/jsx-runtime";
 function SectionHeader({
   children,
@@ -41913,9 +42272,9 @@ function BranchTree({
   selectedSequenceId,
   onSelectBranchSlide
 }) {
-  const [newLabel, setNewLabel] = useState82("");
+  const [newLabel, setNewLabel] = useState83("");
   const inputId = useId();
-  const handleCreate = useCallback98(() => {
+  const handleCreate = useCallback99(() => {
     const label = newLabel.trim();
     if (!label) return;
     onCreateSequence(label);
@@ -41974,9 +42333,9 @@ function BranchItem({
   selectedSequenceId,
   onSelectBranchSlide
 }) {
-  const [editing, setEditing] = useState82(false);
-  const [draft, setDraft] = useState82(seq.label);
-  const commitRename = useCallback98(() => {
+  const [editing, setEditing] = useState83(false);
+  const [draft, setDraft] = useState83(seq.label);
+  const commitRename = useCallback99(() => {
     const label = draft.trim();
     if (label && label !== seq.label) onRename(seq.id, label);
     setEditing(false);
@@ -42068,13 +42427,13 @@ function HotspotTool({
   onAddHotspot,
   onRemoveHotspot
 }) {
-  const [targetSequenceId, setTargetSequenceId] = useState82("");
-  const [hotspotLabel, setHotspotLabel] = useState82("");
+  const [targetSequenceId, setTargetSequenceId] = useState83("");
+  const [hotspotLabel, setHotspotLabel] = useState83("");
   const hotspots = slide?.hotspots ?? [];
   const selectedElementId = domEditSelection?.element?.id ?? null;
   const selectedHfId = domEditSelection?.hfId ?? null;
   const elementKey = selectedElementId || selectedHfId;
-  const handleMakeHotspot = useCallback98(() => {
+  const handleMakeHotspot = useCallback99(() => {
     if (!selectedSceneId || !targetSequenceId || !elementKey) return;
     const id = `hotspot-${elementKey}-${generateId()}`;
     const label = hotspotLabel.trim() || elementKey;
@@ -42352,19 +42711,19 @@ function makeSlideshowNotesController() {
 function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   const { editingFile } = useFileManagerContext();
   const compHtml = editingFile?.content ?? null;
-  const [manifest, setManifest] = useState83(() => {
+  const [manifest, setManifest] = useState84(() => {
     if (!compHtml) return { slides: [] };
     return safeParseManifest(compHtml);
   });
-  const [selectedSceneId, setSelectedSceneId] = useState83(null);
-  const [selectedSequenceId, setSelectedSequenceId] = useState83(null);
-  const [expandedSections, setExpandedSections] = useState83(
+  const [selectedSceneId, setSelectedSceneId] = useState84(null);
+  const [selectedSequenceId, setSelectedSequenceId] = useState84(null);
+  const [expandedSections, setExpandedSections] = useState84(
     () => /* @__PURE__ */ new Set(["slides", "inspector"])
   );
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { domEditSelection } = useDomEditSelectionContext();
-  const manifestRef = useRef85(manifest);
-  const notesCtrlRef = useRef85(makeSlideshowNotesController());
+  const manifestRef = useRef86(manifest);
+  const notesCtrlRef = useRef86(makeSlideshowNotesController());
   useEffect60(() => {
     if (!compHtml) {
       notesCtrlRef.current.flush();
@@ -42378,7 +42737,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     manifestRef.current = parsed;
     setSelectedSequenceId(null);
   }, [compHtml]);
-  const applyManifest = useCallback99(
+  const applyManifest = useCallback100(
     async (next) => {
       const merged = notesCtrlRef.current.mergeIntoDiscrete(next);
       setManifest(merged);
@@ -42391,7 +42750,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [onPersist]
   );
-  const applyNotesManifest = useCallback99(
+  const applyNotesManifest = useCallback100(
     (next) => {
       setManifest(next);
       manifestRef.current = next;
@@ -42405,7 +42764,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
       ctrl.flush();
     };
   }, []);
-  const toggleSection = useCallback99((key) => {
+  const toggleSection = useCallback100((key) => {
     setExpandedSections((prev) => {
       const next = new Set(prev);
       if (next.has(key)) {
@@ -42419,25 +42778,25 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   const activeSlides = selectedSequenceId ? (manifest.slideSequences ?? []).find((s) => s.id === selectedSequenceId)?.slides ?? [] : manifest.slides;
   const selectedSlide = activeSlides.find((s) => s.sceneId === selectedSceneId);
   const sequences = manifest.slideSequences ?? [];
-  const handleSelectBranchSlide = useCallback99((sequenceId, sceneId) => {
+  const handleSelectBranchSlide = useCallback100((sequenceId, sceneId) => {
     setSelectedSceneId(sceneId);
     setSelectedSequenceId(sequenceId);
   }, []);
-  const handleToggleSlide = useCallback99(
+  const handleToggleSlide = useCallback100(
     (sceneId) => {
       applyManifest(toggleMainLineSlide(manifestRef.current, sceneId)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleReorder = useCallback99(
+  const handleReorder = useCallback100(
     (sceneId, dir) => {
       applyManifest(reorderMainLineSlide(manifestRef.current, sceneId, dir)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleSetNotes = useCallback99(
+  const handleSetNotes = useCallback100(
     (notes) => {
       if (!selectedSceneId) return;
       applyNotesManifest(
@@ -42446,7 +42805,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSceneId, selectedSequenceId, applyNotesManifest]
   );
-  const handleMarkFragment = useCallback99(() => {
+  const handleMarkFragment = useCallback100(() => {
     if (!selectedSceneId) return;
     applyManifest(
       addFragment(
@@ -42458,7 +42817,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     ).catch(() => {
     });
   }, [selectedSceneId, selectedSequenceId, currentTime, applyManifest]);
-  const handleRemoveFragment = useCallback99(
+  const handleRemoveFragment = useCallback100(
     (time) => {
       if (!selectedSceneId) return;
       applyManifest(
@@ -42468,7 +42827,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSceneId, selectedSequenceId, applyManifest]
   );
-  const handleCreateSequence = useCallback99(
+  const handleCreateSequence = useCallback100(
     (label) => {
       const id = `seq-${generateId()}`;
       applyManifest(createSequence(manifestRef.current, id, label)).catch(() => {
@@ -42476,14 +42835,14 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleRenameSequence = useCallback99(
+  const handleRenameSequence = useCallback100(
     (id, label) => {
       applyManifest(renameSequence(manifestRef.current, id, label)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleDeleteSequence = useCallback99(
+  const handleDeleteSequence = useCallback100(
     (id) => {
       const seq = (manifestRef.current.slideSequences ?? []).find((s) => s.id === id);
       const count = seq?.slides.length ?? 0;
@@ -42497,7 +42856,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleAssign = useCallback99(
+  const handleAssign = useCallback100(
     (sequenceId, sceneId, assign) => {
       applyManifest(assignToBranch(manifestRef.current, sequenceId, sceneId, assign)).catch(
         () => {
@@ -42506,7 +42865,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleAddHotspot = useCallback99(
+  const handleAddHotspot = useCallback100(
     (sceneId, hotspot) => {
       applyManifest(
         addHotspot(manifestRef.current, sceneId, hotspot, selectedSequenceId ?? void 0)
@@ -42515,7 +42874,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSequenceId, applyManifest]
   );
-  const handleRemoveHotspot = useCallback99(
+  const handleRemoveHotspot = useCallback100(
     (sceneId, hotspotId) => {
       applyManifest(
         removeHotspot(manifestRef.current, sceneId, hotspotId, selectedSequenceId ?? void 0)
@@ -42619,7 +42978,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/hooks/useSlideshowPersist.ts
-import { useCallback as useCallback100 } from "react";
+import { useCallback as useCallback101 } from "react";
 
 // src/utils/setSlideshowManifest.ts
 import {
@@ -42676,7 +43035,7 @@ function useSlideshowPersist({
   domEditSaveTimestampRef,
   coalesceKey
 }) {
-  return useCallback100(
+  return useCallback101(
     async (manifest) => {
       if (!sdkSession) return;
       const path = activeCompPath ?? "index.html";
@@ -42812,9 +43171,9 @@ function StudioRightPanel({
     domEditSaveTimestampRef,
     coalesceKey: activeCompPath ? `slideshow-notes:${activeCompPath}` : "slideshow-notes"
   });
-  const [layersPanePercent, setLayersPanePercent] = useState84(40);
-  const splitContainerRef = useRef86(null);
-  const splitDragRef = useRef86(null);
+  const [layersPanePercent, setLayersPanePercent] = useState85(40);
+  const splitContainerRef = useRef87(null);
+  const splitDragRef = useRef87(null);
   const renderJobs = renderQueue.jobs;
   const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
   const slideshowScenes = useMemo34(() => {
@@ -42839,7 +43198,7 @@ function StudioRightPanel({
     }
     toggleRightInspectorPane(pane);
   };
-  const handleInspectorSplitResizeStart = useCallback101(
+  const handleInspectorSplitResizeStart = useCallback102(
     (event) => {
       event.preventDefault();
       event.currentTarget.setPointerCapture(event.pointerId);
@@ -42852,7 +43211,7 @@ function StudioRightPanel({
     },
     [layersPanePercent]
   );
-  const handleInspectorSplitResizeMove = useCallback101((event) => {
+  const handleInspectorSplitResizeMove = useCallback102((event) => {
     const drag = splitDragRef.current;
     if (!drag || drag.height <= 0) return;
     const deltaPercent = (event.clientY - drag.startY) / drag.height * 100;
@@ -42862,7 +43221,7 @@ function StudioRightPanel({
     );
     setLayersPanePercent(next);
   }, []);
-  const handleInspectorSplitResizeEnd = useCallback101(() => {
+  const handleInspectorSplitResizeEnd = useCallback102(() => {
     splitDragRef.current = null;
   }, []);
   const propertyPanel = /* @__PURE__ */ jsx100(
@@ -43050,10 +43409,10 @@ function StudioRightPanel({
 }
 
 // src/components/TimelineToolbar.tsx
-import { useRef as useRef87 } from "react";
+import { useRef as useRef88 } from "react";
 
 // src/hooks/useEnableKeyframes.ts
-import { useCallback as useCallback102 } from "react";
+import { useCallback as useCallback103 } from "react";
 function animatedProps(anim) {
   if (!anim) return ["x", "y"];
   const own = Object.keys(anim.properties ?? {});
@@ -43094,17 +43453,17 @@ function buildExtendedKeyframes(anim, currentTime, position) {
 function readElementPosition(iframe, sel, anim) {
   const result = {};
   if (!iframe?.contentWindow) return result;
-  let gsap;
+  let gsap2;
   try {
-    gsap = iframe.contentWindow.gsap;
+    gsap2 = iframe.contentWindow.gsap;
   } catch {
     return result;
   }
   const element = sel.element;
-  if (!element?.isConnected || !gsap?.getProperty) return result;
+  if (!element?.isConnected || !gsap2?.getProperty) return result;
   const props = animatedProps(anim);
   for (const prop of props) {
-    const val = Number(gsap.getProperty(element, prop));
+    const val = Number(gsap2.getProperty(element, prop));
     if (!Number.isFinite(val)) continue;
     result[prop] = POSITION_PROPS.has(prop) ? Math.round(val) : roundTo3(val);
   }
@@ -43263,7 +43622,7 @@ async function applyArcWaypointAtPlayhead(session, sel, arcAnim, t, iframe) {
   );
 }
 function useEnableKeyframes(sessionRef) {
-  return useCallback102(async () => {
+  return useCallback103(async () => {
     const session = sessionRef.current;
     if (!session) return;
     const sel = session.domEditSelection;
@@ -43321,11 +43680,87 @@ function useEnableKeyframes(sessionRef) {
   }, [sessionRef]);
 }
 
+// src/hooks/useKeyframeKeyboard.ts
+import { useEffect as useEffect61, useCallback as useCallback104 } from "react";
+function isTextInput(el) {
+  if (!el) return false;
+  const tag = el.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  return el.isContentEditable === true;
+}
+function useKeyframeKeyboard({
+  enabled,
+  onAddKeyframe,
+  onDeleteKeyframe,
+  onPrevKeyframe,
+  onNextKeyframe,
+  onToggleHold,
+  onToggleExpand,
+  onNudgeKeyframe
+}) {
+  const handler = useCallback104(
+    (e) => {
+      if (!enabled) return;
+      if (isTextInput(document.activeElement)) return;
+      if (e.metaKey || e.ctrlKey) return;
+      const hasSelectedKeyframes = usePlayerStore.getState().selectedKeyframes.size > 0;
+      const consume = (run) => {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        run();
+      };
+      switch (e.key.toLowerCase()) {
+        case "k":
+          if (onAddKeyframe) consume(onAddKeyframe);
+          break;
+        case "delete":
+        case "backspace":
+          if (onDeleteKeyframe && hasSelectedKeyframes) consume(onDeleteKeyframe);
+          break;
+        case "j": {
+          const nav = e.shiftKey ? onNextKeyframe : onPrevKeyframe;
+          if (nav) consume(nav);
+          break;
+        }
+        case "h":
+          if (onToggleHold && hasSelectedKeyframes) consume(onToggleHold);
+          break;
+        case "u":
+          if (onToggleExpand) consume(onToggleExpand);
+          break;
+        case "arrowleft":
+          if (onNudgeKeyframe && hasSelectedKeyframes && !e.altKey)
+            consume(() => onNudgeKeyframe(-1, e.shiftKey));
+          break;
+        case "arrowright":
+          if (onNudgeKeyframe && hasSelectedKeyframes && !e.altKey)
+            consume(() => onNudgeKeyframe(1, e.shiftKey));
+          break;
+      }
+    },
+    [
+      enabled,
+      onAddKeyframe,
+      onDeleteKeyframe,
+      onPrevKeyframe,
+      onNextKeyframe,
+      onToggleHold,
+      onToggleExpand,
+      onNudgeKeyframe
+    ]
+  );
+  useEffect61(() => {
+    if (!enabled) return;
+    window.addEventListener("keydown", handler, { capture: true });
+    return () => window.removeEventListener("keydown", handler, { capture: true });
+  }, [enabled, handler]);
+}
+
 // src/components/TimelineToolbar.tsx
 import { Fragment as Fragment34, jsx as jsx101, jsxs as jsxs86 } from "react/jsx-runtime";
 function useKeyframeToggle(session) {
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const sessionRef = useRef87(session);
+  const sessionRef = useRef88(session);
   sessionRef.current = session;
   const onToggle = useEnableKeyframes(
     sessionRef
@@ -43363,6 +43798,10 @@ function TimelineToolbar({
     willExtend: keyframeWillExtend,
     onToggle: onToggleKeyframe
   } = useKeyframeToggle(domEditSession);
+  useKeyframeKeyboard({
+    enabled: STUDIO_KEYFRAMES_ENABLED && Boolean(onToggleKeyframe),
+    onAddKeyframe: onToggleKeyframe
+  });
   return /* @__PURE__ */ jsx101("div", { className: "border-b border-neutral-800/40 bg-neutral-950/96", children: /* @__PURE__ */ jsxs86("div", { className: "flex items-center justify-between px-3 py-2", children: [
     /* @__PURE__ */ jsxs86("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx101("div", { className: "text-[10px] font-medium uppercase tracking-[0.16em] text-neutral-500", children: "Timeline" }),
@@ -43515,14 +43954,14 @@ function TimelineToolbar({
 }
 
 // src/hooks/useStoryboard.ts
-import { useCallback as useCallback103, useEffect as useEffect61, useState as useState85 } from "react";
+import { useCallback as useCallback105, useEffect as useEffect62, useState as useState86 } from "react";
 function useStoryboard(projectId) {
-  const [data, setData] = useState85(null);
-  const [loading, setLoading] = useState85(true);
-  const [error, setError] = useState85(null);
-  const [reloadKey, setReloadKey] = useState85(0);
-  const reload = useCallback103(() => setReloadKey((k) => k + 1), []);
-  useEffect61(() => {
+  const [data, setData] = useState86(null);
+  const [loading, setLoading] = useState86(true);
+  const [error, setError] = useState86(null);
+  const [reloadKey, setReloadKey] = useState86(0);
+  const reload = useCallback105(() => setReloadKey((k) => k + 1), []);
+  useEffect62(() => {
     if (!projectId) return;
     let cancelled = false;
     setLoading(true);
@@ -43545,7 +43984,7 @@ function useStoryboard(projectId) {
 }
 
 // src/components/storyboard/StoryboardLoaded.tsx
-import { useMemo as useMemo36, useState as useState89 } from "react";
+import { useMemo as useMemo36, useState as useState90 } from "react";
 
 // src/components/storyboard/StoryboardDirection.tsx
 import { jsx as jsx102, jsxs as jsxs87 } from "react/jsx-runtime";
@@ -43568,11 +44007,11 @@ function StoryboardDirection({ globals, frameCount }) {
 }
 
 // src/components/storyboard/FramePoster.tsx
-import { useEffect as useEffect62, useState as useState86 } from "react";
+import { useEffect as useEffect63, useState as useState87 } from "react";
 import { jsx as jsx103 } from "react/jsx-runtime";
 function FramePoster({ projectId, src, seconds, title, fit = "cover" }) {
-  const [failed2, setFailed] = useState86(false);
-  useEffect62(() => setFailed(false), [src, seconds]);
+  const [failed2, setFailed] = useState87(false);
+  useEffect63(() => setFailed(false), [src, seconds]);
   if (failed2) {
     return /* @__PURE__ */ jsx103("div", { className: "flex h-full w-full items-center justify-center text-[11px] text-neutral-600", children: "Preview unavailable" });
   }
@@ -43745,19 +44184,19 @@ function StoryboardScriptPanel({ script }) {
 }
 
 // src/components/storyboard/StoryboardSourceEditor.tsx
-import { useCallback as useCallback104, useEffect as useEffect63, useMemo as useMemo35, useRef as useRef88, useState as useState87 } from "react";
+import { useCallback as useCallback106, useEffect as useEffect64, useMemo as useMemo35, useRef as useRef89, useState as useState88 } from "react";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { jsx as jsx108, jsxs as jsxs91 } from "react/jsx-runtime";
 var DISCARD_PROMPT = "Discard unsaved markdown changes?";
 function useEditableFile(path, onSaved) {
   const { readProjectFile, writeProjectFile } = useFileManagerContext();
-  const [content, setContent] = useState87("");
-  const [saved, setSaved] = useState87("");
-  const [loading, setLoading] = useState87(true);
-  const [saving, setSaving] = useState87(false);
-  const [error, setError] = useState87(null);
-  useEffect63(() => {
+  const [content, setContent] = useState88("");
+  const [saved, setSaved] = useState88("");
+  const [loading, setLoading] = useState88(true);
+  const [saving, setSaving] = useState88(false);
+  const [error, setError] = useState88(null);
+  useEffect64(() => {
     if (!path) return;
     let cancelled = false;
     setLoading(true);
@@ -43775,7 +44214,7 @@ function useEditableFile(path, onSaved) {
       cancelled = true;
     };
   }, [path, readProjectFile]);
-  const save = useCallback104(() => {
+  const save = useCallback106(() => {
     if (saving) return;
     setSaving(true);
     setError(null);
@@ -43793,9 +44232,9 @@ function hardenLinks(node) {
   }
 }
 function useMarkdownPreview(source) {
-  const [debounced, setDebounced] = useState87(source);
-  const primed = useRef88(false);
-  useEffect63(() => {
+  const [debounced, setDebounced] = useState88(source);
+  const primed = useRef89(false);
+  useEffect64(() => {
     if (!primed.current && source !== "") {
       primed.current = true;
       setDebounced(source);
@@ -43823,12 +44262,12 @@ function StoryboardSourceEditor({
   onSaved,
   onDirtyChange
 }) {
-  const [selected, setSelected] = useState87(files[0]?.path ?? "");
+  const [selected, setSelected] = useState88(files[0]?.path ?? "");
   const activePath = files.some((f) => f.path === selected) ? selected : files[0]?.path ?? "";
   const file = useEditableFile(activePath, onSaved);
   const previewHtml = useMarkdownPreview(file.content);
-  useEffect63(() => onDirtyChange?.(file.dirty), [onDirtyChange, file.dirty]);
-  useEffect63(() => {
+  useEffect64(() => onDirtyChange?.(file.dirty), [onDirtyChange, file.dirty]);
+  useEffect64(() => {
     if (!file.dirty) return;
     const onBeforeUnload = (event) => {
       event.preventDefault();
@@ -43900,7 +44339,7 @@ function StoryboardSourceEditor({
 }
 
 // src/components/storyboard/StoryboardFrameFocus.tsx
-import { useCallback as useCallback105, useEffect as useEffect64, useState as useState88 } from "react";
+import { useCallback as useCallback107, useEffect as useEffect65, useState as useState89 } from "react";
 import { setFrameStatus, setFrameVoiceover } from "@hyperframes/core/storyboard";
 import { jsx as jsx109, jsxs as jsxs92 } from "react/jsx-runtime";
 function StoryboardFrameFocus({
@@ -43915,10 +44354,10 @@ function StoryboardFrameFocus({
 }) {
   const { readProjectFile, writeProjectFile } = useFileManagerContext();
   const { setViewMode } = useViewMode();
-  const [draft, setDraft] = useState88(frame.voiceover ?? "");
-  const [busy, setBusy] = useState88(false);
-  const [error, setError] = useState88(null);
-  const applyEdit = useCallback105(
+  const [draft, setDraft] = useState89(frame.voiceover ?? "");
+  const [busy, setBusy] = useState89(false);
+  const [error, setError] = useState89(null);
+  const applyEdit = useCallback107(
     async (edit) => {
       if (busy) return;
       setBusy(true);
@@ -43945,7 +44384,7 @@ function StoryboardFrameFocus({
   const handleNavigate = (delta) => {
     if (confirmLeave()) onNavigate(delta);
   };
-  useEffect64(() => {
+  useEffect65(() => {
     const onKey = (e) => {
       const el = document.activeElement;
       if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) return;
@@ -44124,9 +44563,9 @@ function StoryboardLoaded({
   reload,
   onSelectComposition
 }) {
-  const [subView, setSubView] = useState89("board");
-  const [sourceDirty, setSourceDirty] = useState89(false);
-  const [focusedIndex, setFocusedIndex] = useState89(null);
+  const [subView, setSubView] = useState90("board");
+  const [sourceDirty, setSourceDirty] = useState90(false);
+  const [focusedIndex, setFocusedIndex] = useState90(null);
   const sourceFiles = useMemo36(() => {
     const files = [{ path: data.path, label: data.path }];
     if (data.script?.exists) files.push({ path: data.script.path, label: data.script.path });
@@ -44261,11 +44700,11 @@ function StudioSplash({ waiting }) {
 }
 
 // src/hooks/useServerConnection.ts
-import { useEffect as useEffect65, useState as useState90 } from "react";
+import { useEffect as useEffect66, useState as useState91 } from "react";
 function useServerConnection() {
-  const [projectId, setProjectId] = useState90(null);
-  const [resolving, setResolving] = useState90(true);
-  const [waitingForServer, setWaitingForServer] = useState90(false);
+  const [projectId, setProjectId] = useState91(null);
+  const [resolving, setResolving] = useState91(true);
+  const [waitingForServer, setWaitingForServer] = useState91(false);
   useMountEffect(() => {
     const hashProjectId = parseProjectIdFromHash(window.location.hash);
     let cancelled = false;
@@ -44302,7 +44741,7 @@ function useServerConnection() {
       if (retryTimer !== null) clearTimeout(retryTimer);
     };
   });
-  useEffect65(() => {
+  useEffect66(() => {
     const onHashChange = () => {
       const next = parseProjectIdFromHash(window.location.hash);
       if (next && next !== projectId) setProjectId(next);
@@ -44317,28 +44756,28 @@ function useServerConnection() {
 import { jsx as jsx113, jsxs as jsxs96 } from "react/jsx-runtime";
 function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
-  const initialUrlStateRef = useRef89(readStudioUrlStateFromWindow());
+  const initialUrlStateRef = useRef90(readStudioUrlStateFromWindow());
   const viewModeValue = useViewModeState(STUDIO_STORYBOARD_ENABLED);
-  useEffect66(() => {
+  useEffect67(() => {
     if (resolving || waitingForServer) return;
     if (hasFiredSessionStart()) return;
     markSessionStartFired();
     trackStudioSessionStart({ has_project: projectId != null });
   }, [projectId, resolving, waitingForServer]);
-  const [activeCompPath, setActiveCompPath] = useState91(null);
-  const [activeCompPathHydrated, setActiveCompPathHydrated] = useState91(
+  const [activeCompPath, setActiveCompPath] = useState92(null);
+  const [activeCompPathHydrated, setActiveCompPathHydrated] = useState92(
     () => initialUrlStateRef.current.activeCompPath == null
   );
-  const [compIdToSrc, setCompIdToSrc] = useState91(/* @__PURE__ */ new Map());
-  const [previewIframe, setPreviewIframe] = useState91(null);
-  const [compositionLoading, setCompositionLoading] = useState91(true);
-  const [refreshKey, setRefreshKey] = useState91(0);
-  const [previewDocumentVersion, setPreviewDocumentVersion] = useState91(0);
-  const [blockPreview, setBlockPreview] = useState91(null);
-  const previewIframeRef = useRef89(null);
-  const activeCompPathRef = useRef89(activeCompPath);
+  const [compIdToSrc, setCompIdToSrc] = useState92(/* @__PURE__ */ new Map());
+  const [previewIframe, setPreviewIframe] = useState92(null);
+  const [compositionLoading, setCompositionLoading] = useState92(true);
+  const [refreshKey, setRefreshKey] = useState92(0);
+  const [previewDocumentVersion, setPreviewDocumentVersion] = useState92(0);
+  const [blockPreview, setBlockPreview] = useState92(null);
+  const previewIframeRef = useRef90(null);
+  const activeCompPathRef = useRef90(activeCompPath);
   activeCompPathRef.current = activeCompPath;
-  const leftSidebarRef = useRef89(null);
+  const leftSidebarRef = useRef90(null);
   const renderQueue = useRenderQueue(projectId);
   const captionEditMode = useCaptionStore((s) => s.isEditMode);
   const captionHasSelection = useCaptionStore((s) => s.selectedSegmentIds.size > 0);
@@ -44353,8 +44792,8 @@ function StudioApp() {
     const maxEnd = timelineElements.length > 0 ? Math.max(...timelineElements.map((el) => el.start + el.duration)) : 0;
     return Math.max(timelineDuration, maxEnd);
   }, [timelineDuration, timelineElements]);
-  const refreshTimersRef = useRef89([]);
-  const refreshPreviewDocumentVersion = useCallback106(() => {
+  const refreshTimersRef = useRef90([]);
+  const refreshPreviewDocumentVersion = useCallback108(() => {
     for (const id of refreshTimersRef.current) clearTimeout(id);
     refreshTimersRef.current = [];
     setPreviewDocumentVersion((v) => v + 1);
@@ -44363,16 +44802,16 @@ function StudioApp() {
       window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 300)
     );
   }, []);
-  useEffect66(
+  useEffect67(
     () => () => {
       for (const id of refreshTimersRef.current) clearTimeout(id);
     },
     []
   );
-  const [timelineVisible, setTimelineVisible] = useState91(
+  const [timelineVisible, setTimelineVisible] = useState92(
     () => initialUrlStateRef.current.timelineVisible ?? readStudioUiPreferences().timelineVisible ?? true
   );
-  const toggleTimelineVisibility = useCallback106(() => {
+  const toggleTimelineVisibility = useCallback108(() => {
     setTimelineVisible((v) => {
       writeStudioUiPreferences({ timelineVisible: !v });
       return !v;
@@ -44384,10 +44823,10 @@ function StudioApp() {
     rightPanelTab: initialUrlStateRef.current.rightPanelTab
   });
   const editHistory = usePersistentEditHistory({ projectId });
-  const domEditSaveTimestampRef = useRef89(0);
-  const pendingTimelineEditPathRef = useRef89(/* @__PURE__ */ new Set());
-  const isGestureRecordingRef = useRef89(false);
-  const reloadPreview = useCallback106(() => setRefreshKey((k) => k + 1), []);
+  const domEditSaveTimestampRef = useRef90(0);
+  const pendingTimelineEditPathRef = useRef90(/* @__PURE__ */ new Set());
+  const isGestureRecordingRef = useRef90(false);
+  const reloadPreview = useCallback108(() => setRefreshKey((k) => k + 1), []);
   const fileManager = useFileManager({
     projectId,
     showToast,
@@ -44396,7 +44835,7 @@ function StudioApp() {
     setRefreshKey
   });
   const sdkHandle = useSdkSession(projectId, activeCompPath, domEditSaveTimestampRef);
-  useEffect66(() => {
+  useEffect67(() => {
     if (activeCompPathHydrated) return;
     if (!fileManager.fileTreeLoaded) return;
     const nextCompPath = normalizeStudioCompositionPath(
@@ -44456,18 +44895,18 @@ function StudioApp() {
     setRightCollapsed: panelLayout.setRightCollapsed,
     setRightPanelTab: panelLayout.setRightPanelTab
   });
-  const clearDomSelectionRef = useRef89(() => {
+  const clearDomSelectionRef = useRef90(() => {
   });
-  const domEditSelectionBridgeRef = useRef89(null);
-  const handleDomEditElementDeleteRef = useRef89(
+  const domEditSelectionBridgeRef = useRef90(null);
+  const handleDomEditElementDeleteRef = useRef90(
     async () => {
     }
   );
   const domEditDeleteBridge = (s) => handleDomEditElementDeleteRef.current(s);
-  const resetKeyframesRef = useRef89(() => false);
-  const deleteSelectedKeyframesRef = useRef89(() => {
+  const resetKeyframesRef = useRef90(() => false);
+  const deleteSelectedKeyframesRef = useRef90(() => {
   });
-  const invalidateGsapCacheRef = useRef89(() => {
+  const invalidateGsapCacheRef = useRef90(() => {
   });
   const { handleCopy, handlePaste, handleCut } = useClipboard({
     projectId,
@@ -44510,7 +44949,7 @@ function StudioApp() {
     forceReloadSdkSession: sdkHandle.forceReload,
     onToggleRecording: STUDIO_KEYFRAMES_ENABLED ? () => handleToggleRecordingRef.current() : void 0
   });
-  const sidebarTabRef = useRef89({
+  const sidebarTabRef = useRef90({
     select: (t) => leftSidebarRef.current?.selectTab(t),
     get: () => leftSidebarRef.current?.getTab() ?? "compositions"
   });
@@ -44603,9 +45042,9 @@ function StudioApp() {
     resetErrors: resetConsoleErrors
   } = useConsoleErrorCapture(previewIframe);
   const dragOverlay = useDragOverlay(fileManager.handleImportFiles);
-  const handleToggleRecordingRef = useRef89(() => {
+  const handleToggleRecordingRef = useRef90(() => {
   });
-  const domEditSessionRef = useRef89(domEditSession);
+  const domEditSessionRef = useRef90(domEditSession);
   domEditSessionRef.current = domEditSession;
   const { gestureState, gestureRecording, handleToggleRecording } = useGestureCommit({
     domEditSessionRef,
@@ -44614,7 +45053,7 @@ function StudioApp() {
     isGestureRecordingRef
   });
   handleToggleRecordingRef.current = handleToggleRecording;
-  const canvasRectRef = useRef89(null);
+  const canvasRectRef = useRef90(null);
   useLayoutEffect3(() => {
     if (gestureState !== "recording" || !previewIframe) {
       canvasRectRef.current = null;
@@ -44623,7 +45062,7 @@ function StudioApp() {
     const r = previewIframe.getBoundingClientRect();
     canvasRectRef.current = { left: r.left, top: r.top, width: r.width, height: r.height };
   }, [gestureState, previewIframe]);
-  const handlePreviewIframeRef = useCallback106(
+  const handlePreviewIframeRef = useCallback108(
     (iframe) => {
       previewIframeRef.current = iframe;
       setPreviewIframe(iframe);
@@ -44634,7 +45073,7 @@ function StudioApp() {
     },
     [appHotkeys, resetConsoleErrors, refreshPreviewDocumentVersion]
   );
-  const handleSelectComposition = useCallback106(
+  const handleSelectComposition = useCallback108(
     (comp) => {
       setActiveCompPath(comp.endsWith(".html") ? comp : null);
       fileManager.setEditingFile({ path: comp, content: null });
@@ -44840,18 +45279,18 @@ function StudioApp() {
 }
 
 // src/hooks/useElementPicker.ts
-import { useState as useState92, useCallback as useCallback107, useRef as useRef90 } from "react";
+import { useState as useState93, useCallback as useCallback109, useRef as useRef91 } from "react";
 function useElementPicker(iframeRef, options) {
-  const [isPickMode, setIsPickMode] = useState92(false);
-  const [pickedElement, setPickedElement] = useState92(null);
-  const activeOverrideRef = useRef90(null);
-  const getActiveIframe = useCallback107(() => {
+  const [isPickMode, setIsPickMode] = useState93(false);
+  const [pickedElement, setPickedElement] = useState93(null);
+  const activeOverrideRef = useRef91(null);
+  const getActiveIframe = useCallback109(() => {
     return activeOverrideRef.current ?? iframeRef.current;
   }, [iframeRef]);
-  const setActiveIframe = useCallback107((el) => {
+  const setActiveIframe = useCallback109((el) => {
     activeOverrideRef.current = el;
   }, []);
-  const enablePick = useCallback107(() => {
+  const enablePick = useCallback109(() => {
     try {
       getActiveIframe()?.contentWindow?.postMessage(
         { source: "hf-parent", type: "control", action: "enable-pick-mode" },
@@ -44861,7 +45300,7 @@ function useElementPicker(iframeRef, options) {
     } catch {
     }
   }, [getActiveIframe]);
-  const disablePick = useCallback107(() => {
+  const disablePick = useCallback109(() => {
     try {
       getActiveIframe()?.contentWindow?.postMessage(
         { source: "hf-parent", type: "control", action: "disable-pick-mode" },
@@ -44871,7 +45310,7 @@ function useElementPicker(iframeRef, options) {
     }
     setIsPickMode(false);
   }, [getActiveIframe]);
-  const clearPick = useCallback107(() => {
+  const clearPick = useCallback109(() => {
     setPickedElement(null);
   }, []);
   useMountEffect(() => {
@@ -44923,9 +45362,9 @@ function useElementPicker(iframeRef, options) {
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   });
-  const optionsRef = useRef90(options);
+  const optionsRef = useRef91(options);
   optionsRef.current = options;
-  const syncToSource = useCallback107(
+  const syncToSource = useCallback109(
     (elementId, selector, op) => {
       const opts = optionsRef.current;
       if (!opts?.workspaceFiles || !opts.onSyncFiles || !elementId) return;
@@ -44941,7 +45380,7 @@ function useElementPicker(iframeRef, options) {
     },
     []
   );
-  const setStyle = useCallback107(
+  const setStyle = useCallback109(
     (prop, value) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -44983,7 +45422,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const setDataAttr = useCallback107(
+  const setDataAttr = useCallback109(
     (attr, value) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -45011,7 +45450,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const setTextContent = useCallback107(
+  const setTextContent = useCallback109(
     (text) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -45034,7 +45473,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const activeIframeRef = useRef90(null);
+  const activeIframeRef = useRef91(null);
   activeIframeRef.current = getActiveIframe();
   return {
     isPickMode,