@hyperframes/studio 0.8.87 → 0.8.89

package/dist/index.js

@@ -66,7 +66,7 @@ import {
   whenPreviewBooted,
   wrapTimeline,
   writeStudioUiPreferences
-} from "./chunk-7PLTC6SV.js";
+} from "./chunk-KU4F7QZ3.js";
 import {
   Button,
   ContextMenu,
@@ -600,6 +600,8 @@ var DEFAULT_SHORTCUT_SECTIONS = [
       { key: "\u2318X", label: "Cut element" },
       { key: hintKey(STUDIO_PLAIN_KEYS.split), label: "Split clip at playhead" },
       { key: "\u21E7Click", label: "Razor tool: split all tracks" },
+      { key: "[", label: "Select clips starting before the playhead" },
+      { key: "]", label: "Select clips starting at or after the playhead" },
       { key: "\u2318G", label: "Group elements" },
       { key: "\u2318\u21E7G", label: "Ungroup" },
       { key: "Del", label: "Delete selected element (no keyframe selected)" }
@@ -10657,6 +10659,17 @@ function useTimelineLabelColumn(animationsByElement, elements) {
   return { labelMode, contentOrigin };
 }
 
+// src/player/components/useTimelineKeyframeData.ts
+var HIDDEN = {
+  gsapAnimations: /* @__PURE__ */ new Map(),
+  keyframeCache: /* @__PURE__ */ new Map()
+};
+function useTimelineKeyframeData(showKeyframes) {
+  const gsapAnimations = usePlayerStore((s) => s.gsapAnimations);
+  const keyframeCache = usePlayerStore((s) => s.keyframeCache);
+  return showKeyframes ? { gsapAnimations, keyframeCache } : HIDDEN;
+}
+
 // src/player/components/useTimelineScrollViewport.ts
 import { useCallback as useCallback14, useEffect as useEffect17, useRef as useRef19, useState as useState10 } from "react";
 
@@ -12743,6 +12756,7 @@ function useTimelineProviderState({
   canPasteClip,
   theme: themeOverrides,
   showAudioEffects = true,
+  showKeyframes = true,
   sessionEpoch = 0,
   previewIframeRef,
   onZIndexReorder
@@ -12779,8 +12793,9 @@ function useTimelineProviderState({
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const selectedElementIds = usePlayerStore((s) => s.selectedElementIds);
   const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment);
-  const gsapAnimations = usePlayerStore((s) => s.gsapAnimations);
-  const { labelMode, contentOrigin } = useTimelineLabelColumn(gsapAnimations, timelineElements);
+  const { gsapAnimations, keyframeCache } = useTimelineKeyframeData(showKeyframes);
+  const namedAnimations = usePlayerStore((s) => s.gsapAnimations);
+  const { labelMode, contentOrigin } = useTimelineLabelColumn(namedAnimations, timelineElements);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const currentTime = usePlayerStore((s) => s.currentTime);
   const beatDragging = usePlayerStore((s) => s.beatDragging);
@@ -12805,7 +12820,6 @@ function useTimelineProviderState({
     () => getEffectiveTimelineDuration(duration, timelineElements),
     [duration, timelineElements]
   );
-  const keyframeCache = usePlayerStore((s) => s.keyframeCache);
   useAutoExpandKeyframedClips(gsapAnimations);
   const {
     tracks,
@@ -77132,8 +77146,15 @@ function useGsapAwareEditing({
   );
   const handleGsapAwareBoxSizeCommit = useCallback135(
     async (selection, next, offset, restore = () => void 0) => {
-      const ownedAnimations = getGsapAnimationsForSelection(selection);
-      const targetAnimations = Array.isArray(ownedAnimations) ? ownedAnimations : await ownedAnimations;
+      let targetAnimations;
+      try {
+        const ownedAnimations = getGsapAnimationsForSelection(selection);
+        targetAnimations = Array.isArray(ownedAnimations) ? ownedAnimations : await ownedAnimations;
+      } catch (error) {
+        restore();
+        trackGsapInteractionFailure(error, selection, "resize", "Resize animated layer");
+        throw error;
+      }
       const scaleRoute = targetAnimations.some((anim) => anim.propertyGroup === "scale");
       const selector = selectorFromSelection(selection);
       const hasLivePositionTween = selector ? hasNonHoldTweenForElement(
@@ -79389,6 +79410,13 @@ function dispatchPlainKey(event, key2, cb) {
     usePlayerStore.getState().setActiveTool("select");
     return;
   }
+  if ((key2 === "[" || key2 === "]") && !event.shiftKey && !event.altKey) {
+    event.preventDefault();
+    const store = usePlayerStore.getState();
+    if (key2 === "[") store.selectLeftward();
+    else store.selectRightward();
+    return;
+  }
   if (key2 === "a" && !event.shiftKey && !event.altKey) {
     const { activeTool, setActiveTool } = usePlayerStore.getState();
     if (activeTool === "razor") {
@@ -90149,8 +90177,82 @@ function TimelineHistoryButtons(props) {
   ] });
 }
 
+// src/components/TimelineToolPicker.tsx
+import { ArrowLineLeft, ArrowLineRight, CaretDown } from "@phosphor-icons/react";
+import { jsx as jsx225, jsxs as jsxs179 } from "react/jsx-runtime";
+function SelectIcon() {
+  return /* @__PURE__ */ jsx225("svg", { width: "16", height: "16", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx225("path", { d: "M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" }) });
+}
+function TimelineToolPicker() {
+  const activeTool = usePlayerStore((s) => s.activeTool);
+  const store = () => usePlayerStore.getState();
+  const rows = [
+    {
+      label: "Select",
+      shortcut: "V",
+      icon: /* @__PURE__ */ jsx225(SelectIcon, {}),
+      active: activeTool === "select",
+      run: () => store().setActiveTool("select")
+    },
+    {
+      label: "Split",
+      shortcut: "B",
+      icon: /* @__PURE__ */ jsx225(Scissors, { size: 16 }),
+      active: activeTool === "razor",
+      run: () => store().setActiveTool("razor")
+    },
+    {
+      label: "Select leftward",
+      shortcut: "[",
+      icon: /* @__PURE__ */ jsx225(ArrowLineLeft, { size: 16, "aria-hidden": "true" }),
+      active: false,
+      run: () => store().selectLeftward()
+    },
+    {
+      label: "Select rightward",
+      shortcut: "]",
+      icon: /* @__PURE__ */ jsx225(ArrowLineRight, { size: 16, "aria-hidden": "true" }),
+      active: false,
+      run: () => store().selectRightward()
+    }
+  ];
+  const current = rows.find((row) => row.active) ?? rows[0];
+  return /* @__PURE__ */ jsx225(
+    Menu,
+    {
+      "aria-label": "Timeline tools",
+      trigger: /* @__PURE__ */ jsxs179(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Timeline tool: ${current.label}`,
+          className: cn(flatIdle, "gap-0.5"),
+          children: [
+            current.icon,
+            /* @__PURE__ */ jsx225(CaretDown, { size: 10, weight: "bold", "aria-hidden": "true" })
+          ]
+        }
+      ),
+      children: rows.map((row) => /* @__PURE__ */ jsx225(
+        MenuItem,
+        {
+          shortcut: row.shortcut,
+          onClick: row.run,
+          "data-active": row.active || void 0,
+          className: row.active ? "bg-neutral-800 text-white" : void 0,
+          children: /* @__PURE__ */ jsxs179("span", { className: "flex items-center gap-2", children: [
+            row.icon,
+            row.label
+          ] })
+        },
+        row.label
+      ))
+    }
+  );
+}
+
 // src/components/TimelineToolbar.tsx
-import { Fragment as Fragment63, jsx as jsx225, jsxs as jsxs179 } from "react/jsx-runtime";
+import { Fragment as Fragment63, jsx as jsx226, jsxs as jsxs180 } from "react/jsx-runtime";
 var NO_KEYFRAME_TOGGLE = {
   state: "none",
   isMotionPath: false,
@@ -90212,8 +90314,6 @@ function TimelineToolbar({
   showAddBeat = true,
   showKeyframes = true
 }) {
-  const activeTool = usePlayerStore((s) => s.activeTool);
-  const setActiveTool = usePlayerStore((s) => s.setActiveTool);
   const timelineSnapEnabled = usePlayerStore((s) => s.timelineSnapEnabled);
   const setTimelineSnapEnabled = usePlayerStore((s) => s.setTimelineSnapEnabled);
   const rippleEditEnabled = usePlayerStore((s) => s.rippleEditEnabled);
@@ -90268,33 +90368,12 @@ function TimelineToolbar({
   return (
     // The "TIMELINE" label is dropped for CapCut-like density — the pane's
     // position (tracks right below) makes it self-evident.
-    /* @__PURE__ */ jsx225("div", { className: "border-b border-neutral-800/60", children: /* @__PURE__ */ jsxs179("div", { className: "flex items-center justify-between px-2 py-0.5", children: [
-      /* @__PURE__ */ jsxs179("div", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ jsx225(TimelineHistoryButtons, { ...history2 }),
-        /* @__PURE__ */ jsx225(Tooltip, { label: "Selection tool (V)", children: /* @__PURE__ */ jsx225(
-          "button",
-          {
-            type: "button",
-            onClick: () => setActiveTool("select"),
-            "aria-label": "Selection tool",
-            "aria-pressed": activeTool === "select",
-            className: activeTool === "select" ? flatActive : flatIdle,
-            children: /* @__PURE__ */ jsx225("svg", { width: "16", height: "16", viewBox: "0 0 12 12", fill: "currentColor", children: /* @__PURE__ */ jsx225("path", { d: "M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" }) })
-          }
-        ) }),
-        /* @__PURE__ */ jsx225(Tooltip, { label: "Razor tool (B) \u2014 Shift+click splits all tracks", children: /* @__PURE__ */ jsx225(
-          "button",
-          {
-            type: "button",
-            onClick: () => setActiveTool("razor"),
-            "aria-label": "Razor tool",
-            "aria-pressed": activeTool === "razor",
-            className: activeTool === "razor" ? flatActive : flatIdle,
-            children: /* @__PURE__ */ jsx225(Scissors, { size: 16 })
-          }
-        ) }),
-        /* @__PURE__ */ jsx225("div", { "aria-hidden": "true", className: "mx-1 h-4 w-px bg-neutral-800" }),
-        /* @__PURE__ */ jsx225(Tooltip, { label: timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)", children: /* @__PURE__ */ jsx225(
+    /* @__PURE__ */ jsx226("div", { className: "border-b border-neutral-800/60", children: /* @__PURE__ */ jsxs180("div", { className: "flex items-center justify-between px-2 py-0.5", children: [
+      /* @__PURE__ */ jsxs180("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsx226(TimelineHistoryButtons, { ...history2 }),
+        /* @__PURE__ */ jsx226(TimelineToolPicker, {}),
+        /* @__PURE__ */ jsx226("div", { "aria-hidden": "true", className: "mx-1 h-4 w-px bg-neutral-800" }),
+        /* @__PURE__ */ jsx226(Tooltip, { label: timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)", children: /* @__PURE__ */ jsx226(
           "button",
           {
             type: "button",
@@ -90302,14 +90381,14 @@ function TimelineToolbar({
             "aria-label": "Toggle timeline snapping",
             "aria-pressed": timelineSnapEnabled,
             className: timelineSnapEnabled ? flatActive : flatIdle,
-            children: /* @__PURE__ */ jsx225(Magnet, { size: 16, weight: "bold", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx226(Magnet, { size: 16, weight: "bold", "aria-hidden": "true" })
           }
         ) }),
-        /* @__PURE__ */ jsx225(
+        /* @__PURE__ */ jsx226(
           Tooltip,
           {
             label: rippleEditEnabled ? "Ripple on \u2014 keeps the main track gapless" : "Ripple off \u2014 deleting a main-track clip leaves a gap",
-            children: /* @__PURE__ */ jsx225(
+            children: /* @__PURE__ */ jsx226(
               "button",
               {
                 type: "button",
@@ -90317,12 +90396,12 @@ function TimelineToolbar({
                 "aria-label": "Toggle ripple edit",
                 "aria-pressed": rippleEditEnabled,
                 className: rippleEditEnabled ? flatActive : flatIdle,
-                children: /* @__PURE__ */ jsx225(RippleEditIcon, { size: 16 })
+                children: /* @__PURE__ */ jsx226(RippleEditIcon, { size: 16 })
               }
             )
           }
         ),
-        projectHasAudio && /* @__PURE__ */ jsx225(Tooltip, { label: audioMetersVisible ? "Hide audio meters" : "Show audio meters", children: /* @__PURE__ */ jsx225(
+        projectHasAudio && /* @__PURE__ */ jsx226(Tooltip, { label: audioMetersVisible ? "Hide audio meters" : "Show audio meters", children: /* @__PURE__ */ jsx226(
           "button",
           {
             type: "button",
@@ -90330,15 +90409,15 @@ function TimelineToolbar({
             "aria-label": "Toggle audio meters",
             "aria-pressed": audioMetersVisible,
             className: audioMetersVisible ? flatActive : flatIdle,
-            children: /* @__PURE__ */ jsx225(AudioMetersIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx226(AudioMetersIcon, { size: 16 })
           }
         ) }),
-        showKeyframes && /* @__PURE__ */ jsxs179(Fragment63, { children: [
-          /* @__PURE__ */ jsx225(
+        showKeyframes && /* @__PURE__ */ jsxs180(Fragment63, { children: [
+          /* @__PURE__ */ jsx226(
             Tooltip,
             {
               label: keyframePathEndpoint ? "Motion path endpoints cannot be removed" : !onToggleKeyframe ? "Select an animated element to add keyframes" : keyframeIsMotionPath ? keyframeWillExtend ? "Extend motion path to playhead (K)" : keyframeState === "active" ? "Remove waypoint from motion path (K)" : "Add waypoint to motion path (K)" : keyframeState === "active" ? "Remove keyframe at playhead (K)" : keyframeState === "inactive" ? keyframeWillExtend ? "Add keyframe at playhead, extends animation (K)" : "Add keyframe at playhead (K)" : "Add keyframe (K)",
-              children: /* @__PURE__ */ jsx225(
+              children: /* @__PURE__ */ jsx226(
                 "button",
                 {
                   type: "button",
@@ -90346,7 +90425,7 @@ function TimelineToolbar({
                   onClick: onToggleKeyframe,
                   "aria-label": keyframePathEndpoint ? "Motion path endpoint" : keyframeIsMotionPath ? keyframeState === "active" ? "Remove motion path waypoint" : keyframeWillExtend ? "Extend motion path to playhead" : "Add motion path waypoint" : keyframeState === "active" ? "Remove keyframe at playhead" : "Add keyframe at playhead",
                   className: !onToggleKeyframe ? flatDisabled : `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${keyframeState === "active" ? "text-studio-accent" : keyframeState === "inactive" ? "text-neutral-400 hover:text-studio-accent" : "text-neutral-600 hover:text-neutral-400"}`,
-                  children: /* @__PURE__ */ jsx225("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "currentColor", children: keyframeState === "active" ? /* @__PURE__ */ jsx225("path", { d: "M5 0.5L9.5 5L5 9.5L0.5 5Z" }) : /* @__PURE__ */ jsx225(
+                  children: /* @__PURE__ */ jsx226("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "currentColor", children: keyframeState === "active" ? /* @__PURE__ */ jsx226("path", { d: "M5 0.5L9.5 5L5 9.5L0.5 5Z" }) : /* @__PURE__ */ jsx226(
                     "path",
                     {
                       d: "M5 1.2L8.8 5L5 8.8L1.2 5Z",
@@ -90359,11 +90438,11 @@ function TimelineToolbar({
               )
             }
           ),
-          /* @__PURE__ */ jsx225(
+          /* @__PURE__ */ jsx226(
             Tooltip,
             {
               label: autoKeyframeEnabled ? "Auto-record manual edits as keyframes (click to turn off)" : "Manual edits will not be recorded as keyframes (click to turn on)",
-              children: /* @__PURE__ */ jsx225(
+              children: /* @__PURE__ */ jsx226(
                 "button",
                 {
                   type: "button",
@@ -90371,9 +90450,9 @@ function TimelineToolbar({
                   "aria-label": "Auto-record manual edits as keyframes",
                   "aria-pressed": autoKeyframeEnabled,
                   className: `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${autoKeyframeEnabled ? "text-red-400 hover:text-red-300" : "text-neutral-600 hover:text-neutral-400"}`,
-                  children: /* @__PURE__ */ jsxs179("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", children: [
-                    /* @__PURE__ */ jsx225("path", { d: "M5 0.7L9.3 5L5 9.3L0.7 5Z", stroke: "currentColor", strokeWidth: "1" }),
-                    /* @__PURE__ */ jsx225(
+                  children: /* @__PURE__ */ jsxs180("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", children: [
+                    /* @__PURE__ */ jsx226("path", { d: "M5 0.7L9.3 5L5 9.3L0.7 5Z", stroke: "currentColor", strokeWidth: "1" }),
+                    /* @__PURE__ */ jsx226(
                       "circle",
                       {
                         cx: "5",
@@ -90394,11 +90473,11 @@ function TimelineToolbar({
           const el = selectedElementId ? elements.find((e) => (e.key ?? e.id) === selectedElementId) : null;
           const splittable = el != null && canSplitElement(el);
           const canSplit = splittable && currentTime > el.start && currentTime < el.start + el.duration;
-          return /* @__PURE__ */ jsx225(
+          return /* @__PURE__ */ jsx226(
             Tooltip,
             {
               label: canSplit ? "Split at playhead (S)" : splittable ? "Move the playhead inside the clip to split" : "Select a clip to split",
-              children: /* @__PURE__ */ jsx225(
+              children: /* @__PURE__ */ jsx226(
                 "button",
                 {
                   type: "button",
@@ -90408,7 +90487,7 @@ function TimelineToolbar({
                     if (canSplit && el) onSplitElement(el, currentTime);
                   },
                   className: canSplit ? flatIdle : flatDisabled,
-                  children: /* @__PURE__ */ jsxs179(
+                  children: /* @__PURE__ */ jsxs180(
                     "svg",
                     {
                       width: "16",
@@ -90421,8 +90500,8 @@ function TimelineToolbar({
                       strokeLinejoin: "round",
                       "aria-hidden": "true",
                       children: [
-                        /* @__PURE__ */ jsx225("path", { d: "M5 3 L7 3 L7 13 L5 13" }),
-                        /* @__PURE__ */ jsx225("path", { d: "M11 3 L9 3 L9 13 L11 13" })
+                        /* @__PURE__ */ jsx226("path", { d: "M5 3 L7 3 L7 13 L5 13" }),
+                        /* @__PURE__ */ jsx226("path", { d: "M11 3 L9 3 L9 13 L11 13" })
                       ]
                     }
                   )
@@ -90434,11 +90513,11 @@ function TimelineToolbar({
         (() => {
           if (!showAddBeat) return null;
           const canAdd = beatAnalysisReady && canAddBeatAt(currentTime);
-          return /* @__PURE__ */ jsx225(
+          return /* @__PURE__ */ jsx226(
             Tooltip,
             {
               label: !beatAnalysisReady ? "Add a music track with beat analysis to place beats" : canAdd ? "Add beat at playhead" : "A beat already exists at the playhead",
-              children: /* @__PURE__ */ jsx225(
+              children: /* @__PURE__ */ jsx226(
                 "button",
                 {
                   type: "button",
@@ -90448,7 +90527,7 @@ function TimelineToolbar({
                     if (canAdd) addBeatAtCompositionTime(currentTime);
                   },
                   className: canAdd ? `${flatBtn} text-neutral-400 hover:bg-white/6 hover:text-[#22c55e] active:scale-[0.98]` : flatDisabled,
-                  children: /* @__PURE__ */ jsx225("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx225(
+                  children: /* @__PURE__ */ jsx226("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx226(
                     "path",
                     {
                       d: "M21 10C21 12.2091 16.9706 14 12 14M21 10C21 7.79086 16.9706 6 12 6C7.02944 6 3 7.79086 3 10M21 10V16C21 18.2091 16.9706 20 12 20M12 14C7.02944 14 3 12.2091 3 10M12 14V20M3 10V16C3 18.2091 7.02944 20 12 20M7 19.3264V13.3264M17 19.3264V13.3264M12 10L20 4",
@@ -90464,12 +90543,12 @@ function TimelineToolbar({
           );
         })()
       ] }),
-      /* @__PURE__ */ jsxs179("div", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ jsx225(
+      /* @__PURE__ */ jsxs180("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsx226(
           Tooltip,
           {
             label: thumbnailsVisible ? "Hide thumbnails \u2014 labels only" : "Show thumbnails \u2014 posters stay visible; richer previews appear on interaction",
-            children: /* @__PURE__ */ jsx225(
+            children: /* @__PURE__ */ jsx226(
               "button",
               {
                 type: "button",
@@ -90477,12 +90556,12 @@ function TimelineToolbar({
                 "aria-pressed": thumbnailsVisible,
                 onClick: () => setThumbnailMode(thumbnailsVisible ? "hidden" : "adaptive"),
                 className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${thumbnailsVisible ? "bg-studio-accent/10 text-studio-accent" : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"}`,
-                children: /* @__PURE__ */ jsx225(Image3, { size: 16, "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx226(Image3, { size: 16, "aria-hidden": "true" })
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx225(Tooltip, { label: "Fit timeline to width", children: /* @__PURE__ */ jsx225(
+        /* @__PURE__ */ jsx226(Tooltip, { label: "Fit timeline to width", children: /* @__PURE__ */ jsx226(
           "button",
           {
             type: "button",
@@ -90490,10 +90569,10 @@ function TimelineToolbar({
             "aria-label": "Fit timeline to width",
             "aria-pressed": zoomMode === "fit",
             className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${zoomMode === "fit" ? "bg-studio-accent/10 text-studio-accent" : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"}`,
-            children: /* @__PURE__ */ jsx225(ArrowsOutLineHorizontal, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx226(ArrowsOutLineHorizontal, { size: 16, "aria-hidden": "true" })
           }
         ) }),
-        /* @__PURE__ */ jsx225(Tooltip, { label: "Zoom out", children: /* @__PURE__ */ jsx225(
+        /* @__PURE__ */ jsx226(Tooltip, { label: "Zoom out", children: /* @__PURE__ */ jsx226(
           "button",
           {
             type: "button",
@@ -90505,10 +90584,10 @@ function TimelineToolbar({
               );
             },
             className: flatIdle,
-            children: /* @__PURE__ */ jsx225(MagnifyingGlassMinus, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx226(MagnifyingGlassMinus, { size: 16, "aria-hidden": "true" })
           }
         ) }),
-        /* @__PURE__ */ jsx225(
+        /* @__PURE__ */ jsx226(
           "input",
           {
             type: "range",
@@ -90526,7 +90605,7 @@ function TimelineToolbar({
             className: "mx-1 h-6 w-[96px] cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-neutral-700 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0a0a0a,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
           }
         ),
-        /* @__PURE__ */ jsx225(Tooltip, { label: "Zoom in", children: /* @__PURE__ */ jsx225(
+        /* @__PURE__ */ jsx226(Tooltip, { label: "Zoom in", children: /* @__PURE__ */ jsx226(
           "button",
           {
             type: "button",
@@ -90538,10 +90617,10 @@ function TimelineToolbar({
               );
             },
             className: flatIdle,
-            children: /* @__PURE__ */ jsx225(MagnifyingGlassPlus, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx226(MagnifyingGlassPlus, { size: 16, "aria-hidden": "true" })
           }
         ) }),
-        /* @__PURE__ */ jsx225(
+        /* @__PURE__ */ jsx226(
           "span",
           {
             className: "ml-1 w-[38px] text-right font-mono text-[11px] tabular-nums text-neutral-500 select-none",
@@ -90555,18 +90634,18 @@ function TimelineToolbar({
 }
 
 // src/components/StudioSplash.tsx
-import { jsx as jsx226, jsxs as jsxs180 } from "react/jsx-runtime";
+import { jsx as jsx227, jsxs as jsxs181 } from "react/jsx-runtime";
 function StudioSplash({ waiting }) {
-  return /* @__PURE__ */ jsx226("div", { className: "h-full w-full bg-neutral-950 flex items-center justify-center", children: waiting ? /* @__PURE__ */ jsxs180("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
-    /* @__PURE__ */ jsx226("div", { className: "w-4 h-4 rounded-full border-2 border-neutral-700 border-t-neutral-500 animate-spin motion-reduce:animate-none" }),
-    /* @__PURE__ */ jsxs180("p", { className: "text-xs text-neutral-600", children: [
+  return /* @__PURE__ */ jsx227("div", { className: "h-full w-full bg-neutral-950 flex items-center justify-center", children: waiting ? /* @__PURE__ */ jsxs181("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
+    /* @__PURE__ */ jsx227("div", { className: "w-4 h-4 rounded-full border-2 border-neutral-700 border-t-neutral-500 animate-spin motion-reduce:animate-none" }),
+    /* @__PURE__ */ jsxs181("p", { className: "text-xs text-neutral-600", children: [
       "Waiting for preview server\u2026 run",
       " ",
-      /* @__PURE__ */ jsx226("code", { className: "text-neutral-500 font-mono", children: "npm run dev" })
+      /* @__PURE__ */ jsx227("code", { className: "text-neutral-500 font-mono", children: "npm run dev" })
     ] })
-  ] }) : /* @__PURE__ */ jsxs180("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
-    /* @__PURE__ */ jsx226("div", { className: "w-4 h-4 rounded-full bg-studio-accent animate-pulse motion-reduce:animate-none" }),
-    /* @__PURE__ */ jsx226("p", { className: "text-xs text-neutral-600", children: "Connecting to project\u2026" })
+  ] }) : /* @__PURE__ */ jsxs181("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
+    /* @__PURE__ */ jsx227("div", { className: "w-4 h-4 rounded-full bg-studio-accent animate-pulse motion-reduce:animate-none" }),
+    /* @__PURE__ */ jsx227("p", { className: "text-xs text-neutral-600", children: "Connecting to project\u2026" })
   ] }) });
 }
 
@@ -90833,7 +90912,7 @@ function useActiveComposition({
 }
 
 // src/App.tsx
-import { Fragment as Fragment64, jsx as jsx227, jsxs as jsxs181 } from "react/jsx-runtime";
+import { Fragment as Fragment64, jsx as jsx228, jsxs as jsxs182 } from "react/jsx-runtime";
 var getTimelineSelectionSet = () => usePlayerStore.getState().selectedElementIds;
 function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   const { projectId, resolving, waitingForServer } = useServerConnection();
@@ -91197,7 +91276,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     refreshPreviewDocumentVersion
   });
   const timelineToolbar = useMemo79(
-    () => /* @__PURE__ */ jsx227(
+    () => /* @__PURE__ */ jsx228(
       TimelineToolbar,
       {
         domEditSession,
@@ -91207,15 +91286,15 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     [domEditSession, timelineEditing.handleTimelineElementSplit]
   );
   if (resolving || waitingForServer || !projectId)
-    return /* @__PURE__ */ jsx227(StudioSplash, { waiting: waitingForServer });
-  return /* @__PURE__ */ jsx227(StudioShellProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx227(StudioPlaybackProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx227(PanelLayoutProvider, { value: layout, children: /* @__PURE__ */ jsx227(FileManagerProvider, { value: fileManager, children: /* @__PURE__ */ jsx227(DomEditProvider, { value: domEditSession, children: /* @__PURE__ */ jsxs181(
+    return /* @__PURE__ */ jsx228(StudioSplash, { waiting: waitingForServer });
+  return /* @__PURE__ */ jsx228(StudioShellProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx228(StudioPlaybackProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx228(PanelLayoutProvider, { value: layout, children: /* @__PURE__ */ jsx228(FileManagerProvider, { value: fileManager, children: /* @__PURE__ */ jsx228(DomEditProvider, { value: domEditSession, children: /* @__PURE__ */ jsxs182(
     "div",
     {
       className: "flex flex-col h-full w-full bg-neutral-950 relative",
       onDragOver: fileDrop.onDragOver,
       onDrop: fileDrop.onDrop,
       children: [
-        /* @__PURE__ */ jsx227(
+        /* @__PURE__ */ jsx228(
           StudioHeader,
           {
             captureFrameHref: frameCapture.captureFrameHref,
@@ -91233,23 +91312,23 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
             }
           }
         ),
-        previewPersistence.domEditSaveQueuePaused && !externalFileChanges.blocked && /* @__PURE__ */ jsx227(
+        previewPersistence.domEditSaveQueuePaused && !externalFileChanges.blocked && /* @__PURE__ */ jsx228(
           SaveQueuePausedBanner,
           {
             message: previewPersistence.domEditSaveQueuePaused,
             onRetry: previewPersistence.resetDomEditSaveQueueBreaker
           }
         ),
-        /* @__PURE__ */ jsx227(ExternalFileConflictBanner, { coordinator: externalFileChanges }),
-        sdkHandle.unreachableProject && /* @__PURE__ */ jsx227(ProjectUnreachableBanner, { projectId: sdkHandle.unreachableProject }),
-        sdkHandle.compositionMissing && activeCompPath && /* @__PURE__ */ jsx227(CompositionMissingBanner, { path: activeCompPath }),
-        /* @__PURE__ */ jsx227(
+        /* @__PURE__ */ jsx228(ExternalFileConflictBanner, { coordinator: externalFileChanges }),
+        sdkHandle.unreachableProject && /* @__PURE__ */ jsx228(ProjectUnreachableBanner, { projectId: sdkHandle.unreachableProject }),
+        sdkHandle.compositionMissing && activeCompPath && /* @__PURE__ */ jsx228(CompositionMissingBanner, { path: activeCompPath }),
+        /* @__PURE__ */ jsx228(
           EditorShell,
           {
             readOnlyPreview,
             readOnlyPreviewReason,
-            panels: /* @__PURE__ */ jsxs181(Fragment64, { children: [
-              /* @__PURE__ */ jsx227(
+            panels: /* @__PURE__ */ jsxs182(Fragment64, { children: [
+              /* @__PURE__ */ jsx228(
                 StudioLeftPanels,
                 {
                   onSelectComposition: handleSelectComposition,
@@ -91264,7 +91343,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
                   onAddCompositionToTimeline: handleAddCompositionAtPlayhead
                 }
               ),
-              /* @__PURE__ */ jsx227(
+              /* @__PURE__ */ jsx228(
                 StudioRightPanels,
                 {
                   activeBlockParams,
@@ -91319,7 +91398,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
             recordingState: gestureState,
             onToggleRecording: handleToggleRecording,
             blockPreview,
-            gestureOverlay: gestureState === "recording" && previewIframe ? /* @__PURE__ */ jsx227(
+            gestureOverlay: gestureState === "recording" && previewIframe ? /* @__PURE__ */ jsx228(
               GestureTrailOverlay,
               {
                 samples: gestureRecording.samplesRef.current,
@@ -91332,7 +91411,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
             ) : void 0
           }
         ),
-        /* @__PURE__ */ jsx227(
+        /* @__PURE__ */ jsx228(
           StudioOverlays,
           {
             projectId,
@@ -91760,6 +91839,101 @@ function useDomStyleCommit({
   return { commitStyle, waitForPendingSaves: queue2.waitForIdle };
 }
 
+// src/hooks/useDomGeometryCommit.ts
+import { useCallback as useCallback185, useMemo as useMemo81, useRef as useRef183 } from "react";
+var noop2 = () => {
+};
+var NO_SELECTED_ANIMATIONS = [];
+var noDomBoxSizeRoute = () => Promise.reject(new Error("Resize has no DOM route here"));
+function useDomGeometryCommit({
+  projectId,
+  iframeRef,
+  writeProjectFile,
+  recordEdit,
+  activeCompPath = null,
+  showToast = noop2,
+  reloadPreview
+}) {
+  const projectIdRef = useRef183(projectId);
+  projectIdRef.current = projectId;
+  const pending2 = useRef183(/* @__PURE__ */ new Set()).current;
+  const editHistory = useMemo81(() => ({ recordEdit }), [recordEdit]);
+  const reload = useCallback185(
+    () => reloadPreview ? reloadPreview() : iframeRef.current?.contentWindow?.location.reload(),
+    [reloadPreview, iframeRef]
+  );
+  const { bump: bumpGsapCache } = useGsapCacheVersion();
+  const gsap3 = useGsapScriptCommits({
+    projectIdRef,
+    activeCompPath,
+    previewIframeRef: iframeRef,
+    editHistory,
+    reloadPreview: reload,
+    onCacheInvalidate: bumpGsapCache,
+    showToast,
+    writeProjectFile
+  });
+  const makeFetchFallback = useGsapAnimationFetchFallback(projectId);
+  const trackGsapInteractionFailure = useGsapInteractionFailureTelemetry(activeCompPath, showToast);
+  const {
+    handleGsapAwarePathOffsetCommit,
+    handleGsapAwareGroupPathOffsetCommit,
+    handleGsapAwareBoxSizeCommit,
+    handleGsapAwareRotationCommit
+  } = useGsapAwareEditing({
+    // The host owns selection, so every gesture reads its element's animations from the server.
+    domEditSelection: null,
+    selectedGsapAnimations: NO_SELECTED_ANIMATIONS,
+    gsapCommitMutation: gsap3.commitMutation,
+    previewIframeRef: iframeRef,
+    showToast,
+    bumpGsapCache,
+    makeFetchFallback,
+    trackGsapInteractionFailure,
+    handleDomBoxSizeCommit: noDomBoxSizeRoute,
+    addGsapAnimation: gsap3.addGsapAnimation,
+    convertToKeyframes: gsap3.convertToKeyframes,
+    setArcPath: gsap3.setArcPath,
+    updateArcSegment: gsap3.updateArcSegment
+  });
+  const saved2 = useCallback185(
+    async (commit, restore = noop2) => {
+      const refusal2 = !projectIdRef.current ? "No project is open" : !isPreviewBooted(projectIdRef.current) ? "The preview for this project has not loaded yet" : null;
+      if (refusal2) {
+        restore();
+        showToast(refusal2, "error");
+        throw new Error(refusal2);
+      }
+      const run = commit();
+      pending2.add(run);
+      try {
+        await run;
+      } finally {
+        pending2.delete(run);
+      }
+      return { ok: true };
+    },
+    [pending2, showToast]
+  );
+  return useMemo81(
+    () => ({
+      commitPathOffset: (selection, next, modifiers) => saved2(() => handleGsapAwarePathOffsetCommit(selection, next, modifiers)),
+      commitGroupPathOffset: (updates) => saved2(() => handleGsapAwareGroupPathOffsetCommit(updates)),
+      commitBoxSize: (selection, next, offset, restore) => saved2(() => handleGsapAwareBoxSizeCommit(selection, next, offset, restore), restore),
+      commitRotation: (selection, next) => saved2(() => handleGsapAwareRotationCommit(selection, next)),
+      waitForPendingSaves: () => Promise.allSettled([...pending2]).then(noop2)
+    }),
+    [
+      saved2,
+      pending2,
+      handleGsapAwarePathOffsetCommit,
+      handleGsapAwareGroupPathOffsetCommit,
+      handleGsapAwareBoxSizeCommit,
+      handleGsapAwareRotationCommit
+    ]
+  );
+}
+
 // src/index.ts
 import {
   playSeamTransitionLoop
@@ -91869,6 +92043,7 @@ export {
   useCompositionStack,
   useDomEditSelectionContext,
   useDomEditSession,
+  useDomGeometryCommit,
   useDomStyleCommit,
   useEditHistoryActions,
   useElementPicker,