@hyperframes/studio 0.7.79 → 0.7.80

package/dist/index.js

@@ -3586,7 +3586,15 @@ function clampChildToParent(child, parentStart, parentEnd) {
   const clampedDuration = Math.min(childEnd, parentEnd) - clampedStart;
   return clampedDuration > 0 ? { start: clampedStart, duration: clampedDuration } : null;
 }
-function buildChildElements(siblings, display, editBasis, expandedHostKey) {
+function hostElementState(flat) {
+  if (!flat) return {};
+  return {
+    hidden: flat.hidden,
+    timelineLocked: flat.timelineLocked,
+    timelineRole: flat.timelineRole
+  };
+}
+function buildChildElements(siblings, display, editBasis, expandedHostKey, elements) {
   const result = [];
   for (const child of siblings) {
     const clamped = clampChildToParent(child, display.start, display.end);
@@ -3607,6 +3615,7 @@ function buildChildElements(siblings, display, editBasis, expandedHostKey) {
     });
     result.push({
       ...base2,
+      ...hostElementState(elements.find((element) => element.key === key)),
       key,
       start: clamped.start,
       duration: clamped.duration,
@@ -3681,7 +3690,8 @@ function buildExpandedElements(elements, manifest, parentMap, topLevelId, siblin
       track: topLevelElement.track
     },
     editBasis,
-    parentKey
+    parentKey,
+    elements
   );
   if (expanded.length === 0) return filterToTopLevel(elements, parentMap);
   const drillPath = /* @__PURE__ */ new Set();
@@ -7212,23 +7222,50 @@ function EaseParameterField({
   if (wiggleConfig !== null) return /* @__PURE__ */ jsx18(WiggleField, { config: wiggleConfig, onCommit });
   return /* @__PURE__ */ jsx18(EaseBezierField, { tuple, onCommit });
 }
+var PENDING_EASE_TIMEOUT_MS = 2e3;
 function EaseCurveSection({
   ease,
-  onCustomEaseCommit
+  onCustomEaseCommit,
+  collidingAnimationTargets
 }) {
-  const springBounce = parseSpringBounce3(ease);
+  const [pendingEase, setPendingEase] = useState9(null);
+  const inFlightEasesRef = useRef12([]);
+  const displayedEase = pendingEase ?? ease;
+  const springBounce = parseSpringBounce3(displayedEase);
   const isSpring = springBounce !== null;
-  const wiggleConfig = parseWiggleEase3(ease);
+  const wiggleConfig = parseWiggleEase3(displayedEase);
   const isWiggle = wiggleConfig !== null;
   const mode = isSpring ? "spring" : isWiggle ? "wiggle" : "curve";
-  const curve = resolveEditableCurve(ease, springBounce);
+  const curve = resolveEditableCurve(displayedEase, springBounce);
   const [draft, setDraft] = useState9(null);
   const [hover, setHover] = useState9(null);
   const draggingRef = useRef12(null);
   const svgRef = useRef12(null);
   useEffect11(() => {
     setDraft(null);
+    const inFlight = inFlightEasesRef.current;
+    const landed = inFlight.indexOf(ease);
+    if (landed < 0) {
+      inFlight.length = 0;
+      setPendingEase(null);
+      return;
+    }
+    inFlight.splice(0, landed + 1);
+    if (inFlight.length === 0) setPendingEase(null);
   }, [ease]);
+  useEffect11(() => {
+    if (pendingEase === null) return;
+    const timer = setTimeout(() => {
+      inFlightEasesRef.current.length = 0;
+      setPendingEase(null);
+    }, PENDING_EASE_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [pendingEase]);
+  const commitEase = (nextEase) => {
+    inFlightEasesRef.current.push(nextEase);
+    setPendingEase(nextEase);
+    onCustomEaseCommit(nextEase);
+  };
   const activeTuple = draft ?? curve;
   const displayTuple = activeTuple ?? DEFAULT_CURVE;
   const [x1, y1, x2, y2] = displayTuple;
@@ -7236,8 +7273,8 @@ function EaseCurveSection({
   const a1 = { x: xToSvg(1), y: yToSvg(1) };
   const p1 = { x: xToSvg(x1), y: yToSvg(clampView(y1)) };
   const p2 = { x: xToSvg(x2), y: yToSvg(clampView(y2)) };
-  const curvePath2 = curvePathFor(ease, springBounce, wiggleConfig, displayTuple);
-  const showGraph = activeTuple !== null || isWiggle || ease === "hold";
+  const curvePath2 = curvePathFor(displayedEase, springBounce, wiggleConfig, displayTuple);
+  const showGraph = activeTuple !== null || isWiggle || displayedEase === "hold";
   const showHandles = curve !== null && !isSpring && !isWiggle;
   const handlePointerDown = (handle, e) => {
     e.preventDefault();
@@ -7262,8 +7299,7 @@ function EaseCurveSection({
     if (!draggingRef.current || !draft) return;
     draggingRef.current = null;
     const path = `M0,0 C${draft[0]},${draft[1]} ${draft[2]},${draft[3]} 1,1`;
-    onCustomEaseCommit(`custom(${path})`);
-    queueMicrotask(() => setDraft(null));
+    commitEase(`custom(${path})`);
   };
   const handleKeyDown = (handle, event) => {
     const next = nudgeCurve(displayTuple, handle, event.key, event.shiftKey ? 0.1 : 0.01);
@@ -7271,17 +7307,21 @@ function EaseCurveSection({
     event.preventDefault();
     event.stopPropagation();
     setDraft(next);
-    onCustomEaseCommit(`custom(M0,0 C${next[0]},${next[1]} ${next[2]},${next[3]} 1,1)`);
-    queueMicrotask(() => setDraft(null));
+    commitEase(`custom(M0,0 C${next[0]},${next[1]} ${next[2]},${next[3]} 1,1)`);
   };
   const top = yToSvg(1);
   const bottom = yToSvg(0);
   const left = xToSvg(0);
   const right = xToSvg(1);
-  const label = resolveEditorLabel(ease, springBounce, isWiggle);
+  const label = resolveEditorLabel(displayedEase, springBounce, isWiggle);
   return /* @__PURE__ */ jsxs15("div", { className: "rounded-lg bg-neutral-900/50 p-2", children: [
-    /* @__PURE__ */ jsx18(EaseTypeDropdown, { kind: mode, ease, label, onSelect: onCustomEaseCommit }),
-    /* @__PURE__ */ jsx18(EaseModeToggle, { mode, onCommit: onCustomEaseCommit }),
+    /* @__PURE__ */ jsx18(EaseTypeDropdown, { kind: mode, ease: displayedEase, label, onSelect: commitEase }),
+    collidingAnimationTargets && collidingAnimationTargets.length > 1 && /* @__PURE__ */ jsxs15("p", { className: "mb-1 text-[9px] text-neutral-500", children: [
+      "Applies to ",
+      collidingAnimationTargets.length,
+      " animations"
+    ] }),
+    /* @__PURE__ */ jsx18(EaseModeToggle, { mode, onCommit: commitEase }),
     /* @__PURE__ */ jsxs15("span", { className: "sr-only", "aria-live": "polite", children: [
       MODE_LABELS[mode],
       " ease editor selected"
@@ -7441,7 +7481,7 @@ function EaseCurveSection({
           springBounce,
           wiggleConfig,
           tuple: displayTuple,
-          onCommit: onCustomEaseCommit
+          onCommit: commitEase
         }
       )
     ] }) : /* @__PURE__ */ jsxs15("p", { className: "px-0.5 py-1.5 text-[10px] leading-relaxed text-neutral-500", children: [
@@ -7463,7 +7503,6 @@ function TimelineDiamondConnectors({
   keyframeTarget: keyframeTarget2,
   onSelectSegment
 }) {
-  const pressXRef = useRef13(null);
   return /* @__PURE__ */ jsx19(Fragment9, { children: markers.map((marker, i) => {
     const previous = markers[i - 1];
     if (!previous) return null;
@@ -7473,9 +7512,6 @@ function TimelineDiamondConnectors({
     if (x2 - x1 < 1) return null;
     const connectorLeft = x1 + previous.visualSize / 2;
     const connectorWidth = x2 - x1 - previous.visualSize / 2 - marker.visualSize / 2;
-    const target = keyframeTarget2(kf);
-    const ease = kf.ease ?? globalEase;
-    const roomForFullTarget = connectorWidth >= 24;
     return /* @__PURE__ */ jsxs16(Fragment8, { children: [
       /* @__PURE__ */ jsx19(
         "div",
@@ -7494,66 +7530,90 @@ function TimelineDiamondConnectors({
           }
         }
       ),
-      onSelectSegment && !kf.easeAmbiguous && kf.animationId !== void 0 && /* @__PURE__ */ jsx19(
-        "div",
+      onSelectSegment && showsEaseControl(kf) && /* @__PURE__ */ jsx19(
+        SegmentEaseControl,
+        {
+          left: x1,
+          width: x2 - x1,
+          centerY,
+          ease: kf.ease ?? globalEase,
+          target: keyframeTarget2(kf),
+          roomForFullTarget: connectorWidth >= 24,
+          onSelectSegment
+        }
+      )
+    ] }, `line-${i}-${previous.keyframe.percentage}-${kf.percentage}`);
+  }) });
+}
+function showsEaseControl(kf) {
+  return kf.animationId !== void 0;
+}
+function SegmentEaseControl({
+  left,
+  width,
+  centerY,
+  ease,
+  target,
+  roomForFullTarget,
+  onSelectSegment
+}) {
+  const pressXRef = useRef13(null);
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: "group absolute",
+      "data-keyframe-ease-segment": "",
+      style: {
+        left,
+        top: centerY,
+        width,
+        height: 18,
+        transform: "translateY(-50%)",
+        // Own a stacking context above the diamond buttons. At fit zoom the 16px
+        // ease control can overlap its neighbouring diamond; without a z-index
+        // here the later diamond wins the hit test even though the child button
+        // has z-index 3.
+        zIndex: 3,
+        // Only the centered control is interactive. The transparent segment
+        // wrapper must not swallow connector/clip gestures.
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ jsx19(
+        "button",
         {
-          className: "group absolute",
-          "data-keyframe-ease-segment": "",
+          type: "button",
+          "data-keyframe-ease-button": "",
+          "aria-label": `Edit ${ease} easing`,
+          title: `Edit ${ease} easing`,
+          className: `absolute flex items-center justify-center rounded opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 ${roomForFullTarget ? "before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']" : ""}`,
           style: {
-            left: x1,
-            top: centerY,
-            width: x2 - x1,
-            height: 18,
-            transform: "translateY(-50%)",
-            // Own a stacking context above the diamond buttons. At fit
-            // zoom the 16px ease control can overlap its neighbouring
-            // diamond; without a z-index here the later diamond wins the
-            // hit test even though the child button has z-index 3.
+            left: "50%",
+            top: "50%",
+            width: 16,
+            height: 16,
+            transform: "translate(-50%, -50%)",
             zIndex: 3,
-            // Only the centered control is interactive. The transparent
-            // segment wrapper must not swallow connector/clip gestures.
-            pointerEvents: "none"
+            pointerEvents: "auto",
+            padding: 0,
+            border: "1px solid rgba(255, 255, 255, 0.14)",
+            background: "#171717",
+            cursor: "pointer"
           },
-          children: /* @__PURE__ */ jsx19(
-            "button",
-            {
-              type: "button",
-              "data-keyframe-ease-button": "",
-              "aria-label": `Edit ${ease} easing`,
-              title: `Edit ${ease} easing`,
-              className: `absolute flex items-center justify-center rounded opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 ${roomForFullTarget ? "before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']" : ""}`,
-              style: {
-                left: "50%",
-                top: "50%",
-                width: 16,
-                height: 16,
-                transform: "translate(-50%, -50%)",
-                zIndex: 3,
-                pointerEvents: "auto",
-                padding: 0,
-                border: "1px solid rgba(255, 255, 255, 0.14)",
-                background: "#171717",
-                cursor: "pointer"
-              },
-              onPointerDown: (e) => {
-                pressXRef.current = e.clientX;
-              },
-              onClick: (e) => {
-                e.stopPropagation();
-                const pressX = pressXRef.current;
-                pressXRef.current = null;
-                if (pressX !== null && Math.abs(e.clientX - pressX) >= KEYFRAME_DRAG_THRESHOLD_PX) {
-                  return;
-                }
-                onSelectSegment(target);
-              },
-              children: /* @__PURE__ */ jsx19(MiniCurveSvg, { ease, active: true, size: 12 })
-            }
-          )
+          onPointerDown: (e) => {
+            pressXRef.current = e.clientX;
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            const pressX = pressXRef.current;
+            pressXRef.current = null;
+            if (pressX !== null && Math.abs(e.clientX - pressX) >= KEYFRAME_DRAG_THRESHOLD_PX) return;
+            onSelectSegment(target);
+          },
+          children: /* @__PURE__ */ jsx19(MiniCurveSvg, { ease, active: true, size: 12 })
         }
       )
-    ] }, `line-${i}-${previous.keyframe.percentage}-${kf.percentage}`);
-  }) });
+    }
+  );
 }
 
 // src/components/editor/KeyframeNavigation.tsx
@@ -7800,7 +7860,8 @@ function keyframeTarget(keyframe) {
     percentage: keyframe.percentage,
     tweenPercentage: keyframe.tweenPercentage,
     propertyGroup: keyframe.propertyGroup,
-    animationId: keyframe.animationId
+    animationId: keyframe.animationId,
+    collidingAnimationTargets: keyframe.collidingAnimationTargets
   };
 }
 
@@ -8440,16 +8501,24 @@ function isStaticPositionHold(anim) {
   const propKeys = Object.keys(anim.properties).filter((k) => k !== "immediateRender");
   return propKeys.length > 0 && propKeys.every((k) => k === "x" || k === "y");
 }
+function accumulateCollidingAnimationTargets(keyframe, incoming) {
+  const primaryId = keyframe.animationId;
+  if (primaryId === incoming.animationId) return;
+  const collisionTargets = keyframe.collidingAnimationTargets;
+  if (collisionTargets?.some((target) => target.animationId === incoming.animationId)) return;
+  keyframe.collidingAnimationTargets = [
+    ...collisionTargets === void 0 || collisionTargets.length === 0 ? [{ animationId: primaryId, tweenPercentage: keyframe.tweenPercentage }] : collisionTargets,
+    { animationId: incoming.animationId, tweenPercentage: incoming.tweenPercentage }
+  ];
+}
 function deduplicateKeyframes(keyframes) {
   const byPct = /* @__PURE__ */ new Map();
   for (const kf of keyframes) {
     const existing = byPct.get(kf.percentage);
     if (existing) {
       existing.properties = { ...existing.properties, ...kf.properties };
-      if (existing.animationId !== void 0 && kf.animationId !== void 0 && existing.animationId !== kf.animationId) {
-        existing.easeAmbiguous = true;
-      }
-      if (existing.easeAmbiguous) delete existing.ease;
+      accumulateCollidingAnimationTargets(existing, kf);
+      if ((existing.collidingAnimationTargets?.length ?? 0) > 1) delete existing.ease;
       else if (kf.ease) existing.ease = kf.ease;
     } else {
       byPct.set(kf.percentage, { ...kf, properties: { ...kf.properties } });
@@ -13519,7 +13588,7 @@ var KeyframeDiamondContextMenu = memo11(function KeyframeDiamondContextMenu2({
     animationId: state.animationId
   };
   const menuWidth = 200;
-  const menuHeight = onMoveToPlayhead ? 100 : 70;
+  const menuHeight = 10 + (1 + (onMoveToPlayhead ? 1 : 0) + (onDelete ? 1 : 0)) * 30;
   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;
@@ -13543,7 +13612,7 @@ var KeyframeDiamondContextMenu = memo11(function KeyframeDiamondContextMenu2({
               children: "Move to Playhead"
             }
           ),
-          /* @__PURE__ */ jsx32(
+          onDelete && /* @__PURE__ */ jsx32(
             "button",
             {
               type: "button",
@@ -14025,7 +14094,8 @@ function DomEditProvider({
     commitMutation,
     applyMarqueeSelection,
     handleUpdateKeyframeEase,
-    handleSetAllKeyframeEases
+    handleSetAllKeyframeEases,
+    handleUpdateSegmentEase
   },
   children
 }) {
@@ -14102,6 +14172,7 @@ function DomEditProvider({
       commitMutation: stableCommitMutation,
       applyMarqueeSelection,
       handleUpdateKeyframeEase,
+      handleUpdateSegmentEase,
       handleSetAllKeyframeEases
     }),
     [
@@ -14170,6 +14241,7 @@ function DomEditProvider({
       stableCommitMutation,
       applyMarqueeSelection,
       handleUpdateKeyframeEase,
+      handleUpdateSegmentEase,
       handleSetAllKeyframeEases
     ]
   );
@@ -14835,6 +14907,7 @@ function useTimelineKeyframeHandlers({
       if (target.animationId !== void 0 && target.tweenPercentage !== void 0) {
         usePlayerStore.getState().setFocusedEaseSegment({
           animationId: target.animationId,
+          collidingAnimationTargets: target.collidingAnimationTargets,
           tweenPercentage: target.tweenPercentage,
           elementId: elId
         });
@@ -24898,6 +24971,154 @@ var DomEditOverlay = memo22(function DomEditOverlay2({
   );
 });
 
+// src/hooks/gsapKeyframeCacheHelpers.ts
+function sameEntries(before, after) {
+  if (before.size !== after.size) return false;
+  for (const [key, value] of before) {
+    if (after.get(key) !== value) return false;
+  }
+  return true;
+}
+function publishKeyframeCache(edit) {
+  const { keyframeCache, gsapAnimations } = usePlayerStore.getState();
+  const draft = {
+    keyframeCache: new Map(keyframeCache),
+    gsapAnimations: new Map(gsapAnimations)
+  };
+  edit(draft);
+  if (sameEntries(keyframeCache, draft.keyframeCache) && sameEntries(gsapAnimations, draft.gsapAnimations))
+    return;
+  usePlayerStore.setState({
+    keyframeCache: draft.keyframeCache,
+    gsapAnimations: draft.gsapAnimations
+  });
+}
+function updateKeyframeCacheFromParsed(animations, targetPath, selectionId, mutation, doc) {
+  const { elements, domClipChildren } = usePlayerStore.getState();
+  const idsWithKeyframes = /* @__PURE__ */ new Set();
+  const merged = /* @__PURE__ */ new Map();
+  const sourceAnimations = /* @__PURE__ */ new Map();
+  for (const anim of animations) {
+    const kfSource = anim.keyframes?.keyframes ?? synthesizeFlatTweenKeyframes(anim)?.keyframes ?? [];
+    if (kfSource.length === 0) continue;
+    for (const id of resolveSelectorElementIds(anim.targetSelector, doc)) {
+      idsWithKeyframes.add(id);
+      sourceAnimations.set(id, [...sourceAnimations.get(id) ?? [], anim]);
+      const { elStart, elDuration } = resolveClipTimingBasis(
+        id,
+        targetPath,
+        elements,
+        domClipChildren
+      );
+      const clipKeyframes = toClipKeyframes(kfSource, anim, elStart, elDuration);
+      const existing = merged.get(id);
+      if (existing) {
+        existing.keyframes = deduplicateKeyframes([...existing.keyframes, ...clipKeyframes]);
+      } else {
+        merged.set(id, {
+          ...anim.keyframes,
+          format: anim.keyframes?.format ?? "percentage",
+          keyframes: clipKeyframes
+        });
+      }
+    }
+  }
+  const mutationSelector = mutation.targetSelector;
+  const mutated = mutationSelector ? resolveSelectorElementIds(mutationSelector, doc) : [];
+  const targetIds = mutated.length > 0 ? mutated : selectionId ? [selectionId] : [];
+  publishKeyframeCache((draft) => {
+    for (const [id, entry] of merged) {
+      writeElementIntoDraft(draft, targetPath, id, entry, sourceAnimations.get(id));
+    }
+    for (const targetId of targetIds) {
+      if (!idsWithKeyframes.has(targetId)) deleteElementFromDraft(draft, targetPath, targetId);
+    }
+  });
+}
+function writeElementIntoDraft(draft, sourceFile, elementId, entry, animations) {
+  for (const key of elementCacheKeys(sourceFile, elementId)) {
+    draft.keyframeCache.set(key, entry);
+    if (animations) draft.gsapAnimations.set(key, animations);
+    else draft.gsapAnimations.delete(key);
+  }
+}
+function deleteElementFromDraft(draft, sourceFile, elementId) {
+  for (const key of elementCacheKeys(sourceFile, elementId)) {
+    draft.keyframeCache.delete(key);
+    draft.gsapAnimations.delete(key);
+  }
+}
+function clearKeyframeCacheForElement(sourceFile, elementId) {
+  publishKeyframeCache((draft) => deleteElementFromDraft(draft, sourceFile, elementId));
+}
+function cachedElementIdsForFile(sourceFile, keyframeCache, gsapAnimations) {
+  const sfPrefix = `${sourceFile}#`;
+  const ids = /* @__PURE__ */ new Set();
+  for (const key of [...keyframeCache.keys(), ...gsapAnimations.keys()]) {
+    if (!key.startsWith(sfPrefix)) continue;
+    ids.add(key.slice(sfPrefix.length));
+  }
+  return ids;
+}
+function pruneKeyframeCacheToFiles(files) {
+  const keep = new Set(files);
+  const { keyframeCache, gsapAnimations } = usePlayerStore.getState();
+  const stale = /* @__PURE__ */ new Map();
+  for (const key of [...keyframeCache.keys(), ...gsapAnimations.keys()]) {
+    const hash = key.indexOf("#");
+    if (hash < 0) continue;
+    const sourceFile = key.slice(0, hash);
+    if (keep.has(sourceFile)) continue;
+    const ids = stale.get(sourceFile) ?? /* @__PURE__ */ new Set();
+    ids.add(key.slice(hash + 1));
+    stale.set(sourceFile, ids);
+  }
+  publishKeyframeCache((draft) => {
+    for (const [sourceFile, ids] of stale) {
+      for (const id of ids) deleteElementFromDraft(draft, sourceFile, id);
+    }
+  });
+}
+function scopedElementKey(element) {
+  return `${element.sourceFile || "index.html"}#${element.id}`;
+}
+function elementCacheKeys(sourceFile, elementId) {
+  return sourceFile === "index.html" ? [`index.html#${elementId}`, elementId] : [`${sourceFile}#${elementId}`, `index.html#${elementId}`, elementId];
+}
+function replaceKeyframeCacheForFile(sourceFile, entries, animationsByElement) {
+  publishKeyframeCache((draft) => {
+    for (const id of cachedElementIdsForFile(
+      sourceFile,
+      draft.keyframeCache,
+      draft.gsapAnimations
+    )) {
+      deleteElementFromDraft(draft, sourceFile, id);
+    }
+    for (const [id, entry] of entries) {
+      writeElementIntoDraft(draft, sourceFile, id, entry, animationsByElement.get(id));
+    }
+  });
+}
+function writeGsapAnimationsForElement(sourceFile, elementId, animations) {
+  publishKeyframeCache((draft) => {
+    for (const key of elementCacheKeys(sourceFile, elementId)) {
+      if (animations) draft.gsapAnimations.set(key, animations);
+      else draft.gsapAnimations.delete(key);
+    }
+  });
+}
+function buildCacheKey(sourceFile, elementId) {
+  return `${sourceFile}#${elementId}`;
+}
+function readKeyframeSnapshot(sourceFile, elementId) {
+  if (!elementId) return void 0;
+  return usePlayerStore.getState().keyframeCache.get(buildCacheKey(sourceFile, elementId));
+}
+function writeKeyframeCache(sourceFile, elementId, data) {
+  if (!elementId) return;
+  usePlayerStore.getState().setKeyframeCache(buildCacheKey(sourceFile, elementId), data);
+}
+
 // src/components/editor/MotionPathOverlay.tsx
 import { memo as memo23, useEffect as useEffect30, useRef as useRef43, useState as useState32 } from "react";
 
@@ -26017,7 +26238,7 @@ var MotionPathOverlay = memo23(function MotionPathOverlay2({
   const activeKeyframePct = usePlayerStore((s) => s.activeKeyframePct);
   const timelineElement = usePlayerStore((state) => {
     if (!selection) return void 0;
-    const sourceScopedId = `${selection.sourceFile || "index.html"}#${selection.id}`;
+    const sourceScopedId = scopedElementKey(selection);
     return state.elements.find(
       (element) => (element.key ?? element.id) === sourceScopedId || element.id === selection.id
     );
@@ -26242,18 +26463,31 @@ var MotionPathOverlay = memo23(function MotionPathOverlay2({
   };
   const elementId = selection?.id ?? null;
   const onNodeContextMenu = (e, ref) => {
-    if (ref.type !== "keyframe" || !animId || !elementId || !timelineElement) return;
+    if (!animId || !elementId || !timelineElement) return;
     e.preventDefault();
     e.stopPropagation();
     setKfMenu({
-      x: e.clientX,
-      y: e.clientY,
-      element: timelineElement,
-      elementId,
-      percentage: ref.pct,
-      tweenPercentage: ref.pct
+      ref,
+      state: {
+        x: e.clientX,
+        y: e.clientY,
+        element: timelineElement,
+        elementId,
+        // A waypoint carries no percentage of its own: one tween-level ease owns
+        // every segment, and its index is the identity the delete acts on. The
+        // menu never reads this for a waypoint, because the only entry that
+        // would (Move to Playhead) is hidden below.
+        percentage: ref.type === "keyframe" ? ref.pct : 0,
+        tweenPercentage: ref.type === "keyframe" ? ref.pct : 0
+      }
     });
   };
+  const menuRef = kfMenu?.ref;
+  const onMenuDelete = menuRef === void 0 || !animId ? void 0 : menuRef.type === "keyframe" ? (_elId, keyframe) => {
+    handleGsapRemoveKeyframe(animId, keyframe.percentage);
+  } : removable ? () => {
+    void commitRemoveWaypoint(animId, menuRef.index, commitMutation);
+  } : void 0;
   return /* @__PURE__ */ jsxs48(Fragment21, { children: [
     /* @__PURE__ */ jsxs48(
       "svg",
@@ -26342,11 +26576,11 @@ var MotionPathOverlay = memo23(function MotionPathOverlay2({
     kfMenu && /* @__PURE__ */ jsx62(
       KeyframeDiamondContextMenu,
       {
-        state: kfMenu,
+        state: kfMenu.state,
         onClose: () => setKfMenu(null),
-        onDelete: (_elId, keyframe) => animId && handleGsapRemoveKeyframe(animId, keyframe.percentage),
+        onDelete: onMenuDelete,
         onDeleteAll: () => animId && handleGsapRemoveAllKeyframes(animId),
-        onMoveToPlayhead: (_element, keyframe) => animId && handleGsapMoveKeyframeToPlayhead(animId, keyframe.percentage)
+        onMoveToPlayhead: kfMenu.ref.type === "keyframe" ? (_element, keyframe) => animId && handleGsapMoveKeyframeToPlayhead(animId, keyframe.percentage) : void 0
       }
     )
   ] });
@@ -29238,106 +29472,6 @@ async function tryGsapRotationIntercept(selection, angle, animations, iframe, co
   return true;
 }
 
-// src/hooks/gsapKeyframeCacheHelpers.ts
-function updateKeyframeCacheFromParsed(animations, targetPath, selectionId, mutation, doc) {
-  const { setKeyframeCache, elements, domClipChildren } = usePlayerStore.getState();
-  const idsWithKeyframes = /* @__PURE__ */ new Set();
-  const merged = /* @__PURE__ */ new Map();
-  const sourceAnimations = /* @__PURE__ */ new Map();
-  for (const anim of animations) {
-    const kfSource = anim.keyframes?.keyframes ?? synthesizeFlatTweenKeyframes(anim)?.keyframes ?? [];
-    if (kfSource.length === 0) continue;
-    for (const id of resolveSelectorElementIds(anim.targetSelector, doc)) {
-      idsWithKeyframes.add(id);
-      sourceAnimations.set(id, [...sourceAnimations.get(id) ?? [], anim]);
-      const { elStart, elDuration } = resolveClipTimingBasis(
-        id,
-        targetPath,
-        elements,
-        domClipChildren
-      );
-      const clipKeyframes = toClipKeyframes(kfSource, anim, elStart, elDuration);
-      const existing = merged.get(id);
-      if (existing) {
-        existing.keyframes = deduplicateKeyframes([...existing.keyframes, ...clipKeyframes]);
-      } else {
-        merged.set(id, {
-          ...anim.keyframes,
-          format: anim.keyframes?.format ?? "percentage",
-          keyframes: clipKeyframes
-        });
-      }
-    }
-  }
-  for (const [id, entry] of merged) {
-    for (const key of elementCacheKeys(targetPath, id)) setKeyframeCache(key, entry);
-    writeGsapAnimationsForElement(targetPath, id, sourceAnimations.get(id));
-  }
-  const mutationSelector = mutation.targetSelector;
-  const mutated = mutationSelector ? resolveSelectorElementIds(mutationSelector, doc) : [];
-  const targetIds = mutated.length > 0 ? mutated : selectionId ? [selectionId] : [];
-  for (const targetId of targetIds) {
-    if (!idsWithKeyframes.has(targetId)) clearKeyframeCacheForElement(targetPath, targetId);
-  }
-}
-function clearKeyframeCacheForElement(sourceFile, elementId) {
-  const { keyframeCache, setKeyframeCache, gsapAnimations, setGsapAnimations } = usePlayerStore.getState();
-  const keys = elementCacheKeys(sourceFile, elementId);
-  for (const key of keys) {
-    if (keyframeCache.has(key)) setKeyframeCache(key, void 0);
-    if (gsapAnimations.has(key)) setGsapAnimations(key, void 0);
-  }
-}
-function clearKeyframeCacheForFile(sourceFile) {
-  const { keyframeCache, gsapAnimations } = usePlayerStore.getState();
-  const sfPrefix = `${sourceFile}#`;
-  const ids = /* @__PURE__ */ new Set();
-  for (const key of [...keyframeCache.keys(), ...gsapAnimations.keys()]) {
-    if (!key.startsWith(sfPrefix)) continue;
-    ids.add(key.slice(sfPrefix.length));
-  }
-  for (const id of ids) {
-    clearKeyframeCacheForElement(sourceFile, id);
-  }
-}
-function pruneKeyframeCacheToFiles(files) {
-  const keep = new Set(files);
-  const { keyframeCache, gsapAnimations } = usePlayerStore.getState();
-  const stale = /* @__PURE__ */ new Map();
-  for (const key of [...keyframeCache.keys(), ...gsapAnimations.keys()]) {
-    const hash = key.indexOf("#");
-    if (hash < 0) continue;
-    const sourceFile = key.slice(0, hash);
-    if (keep.has(sourceFile)) continue;
-    const ids = stale.get(sourceFile) ?? /* @__PURE__ */ new Set();
-    ids.add(key.slice(hash + 1));
-    stale.set(sourceFile, ids);
-  }
-  for (const [sourceFile, ids] of stale) {
-    for (const id of ids) clearKeyframeCacheForElement(sourceFile, id);
-  }
-}
-function elementCacheKeys(sourceFile, elementId) {
-  return sourceFile === "index.html" ? [`index.html#${elementId}`, elementId] : [`${sourceFile}#${elementId}`, `index.html#${elementId}`, elementId];
-}
-function writeGsapAnimationsForElement(sourceFile, elementId, animations) {
-  const { setGsapAnimations } = usePlayerStore.getState();
-  for (const key of elementCacheKeys(sourceFile, elementId)) {
-    setGsapAnimations(key, animations);
-  }
-}
-function buildCacheKey(sourceFile, elementId) {
-  return `${sourceFile}#${elementId}`;
-}
-function readKeyframeSnapshot(sourceFile, elementId) {
-  if (!elementId) return void 0;
-  return usePlayerStore.getState().keyframeCache.get(buildCacheKey(sourceFile, elementId));
-}
-function writeKeyframeCache(sourceFile, elementId, data) {
-  if (!elementId) return;
-  usePlayerStore.getState().setKeyframeCache(buildCacheKey(sourceFile, elementId), data);
-}
-
 // src/hooks/keyframeCacheAstLoad.ts
 import { isStudioHoldSet } from "@hyperframes/core/gsap-parser";
 function hasAnimations(value) {
@@ -29362,8 +29496,6 @@ async function fetchParsedAnimations(projectId, sourceFile) {
 async function populateKeyframeCacheFromAst(projectId, sf, doc) {
   const parsed = await fetchParsedAnimations(projectId, sf);
   if (!parsed) return;
-  const { setKeyframeCache } = usePlayerStore.getState();
-  clearKeyframeCacheForFile(sf);
   const { elements, domClipChildren } = usePlayerStore.getState();
   const mergedByElement = /* @__PURE__ */ new Map();
   const sourceByElement = /* @__PURE__ */ new Map();
@@ -29384,10 +29516,7 @@ async function populateKeyframeCacheFromAst(projectId, sf, doc) {
       }
     }
   }
-  for (const [id, kfData] of mergedByElement) {
-    for (const key of elementCacheKeys(sf, id)) setKeyframeCache(key, kfData);
-    writeGsapAnimationsForElement(sf, id, sourceByElement.get(id));
-  }
+  replaceKeyframeCacheForFile(sf, mergedByElement, sourceByElement);
 }
 
 // src/hooks/useGsapTweenCache.ts
@@ -29593,9 +29722,10 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
       ...ease ? { ease } : {},
       ...easeEach ? { easeEach } : {}
     };
-    const { setKeyframeCache } = usePlayerStore.getState();
-    setKeyframeCache(`${sourceFile}#${elementId}`, merged);
-    setKeyframeCache(elementId, merged);
+    publishKeyframeCache((draft) => {
+      draft.keyframeCache.set(`${sourceFile}#${elementId}`, merged);
+      draft.keyframeCache.set(elementId, merged);
+    });
   }, [elementId, sourceFile, animations, domClipChildrenKey]);
   return { animations, multipleTimelines, unsupportedTimelinePattern };
 }
@@ -29646,25 +29776,26 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
       }
       const scanned = scanAllRuntimeKeyframes(iframe, clipById);
       if (scanned.size === 0) return false;
-      const { setKeyframeCache, keyframeCache } = usePlayerStore.getState();
-      for (const [id, data] of scanned) {
-        const cacheKey = `${sf}#${id}`;
-        const fallbackKey = `index.html#${id}`;
-        const alreadyCached = keyframeCache.has(cacheKey) || keyframeCache.has(fallbackKey) || keyframeCache.has(id);
-        if (alreadyCached) continue;
-        const isPosOnly = data.keyframes.length === 1 && Object.keys(data.keyframes[0].properties).every((k) => k === "x" || k === "y");
-        if (isPosOnly) {
-          continue;
+      publishKeyframeCache((draft) => {
+        for (const [id, data] of scanned) {
+          const cacheKey = `${sf}#${id}`;
+          const fallbackKey = `index.html#${id}`;
+          const alreadyCached = draft.keyframeCache.has(cacheKey) || draft.keyframeCache.has(fallbackKey) || draft.keyframeCache.has(id);
+          if (alreadyCached) continue;
+          const isPosOnly = data.keyframes.length === 1 && Object.keys(data.keyframes[0].properties).every((k) => k === "x" || k === "y");
+          if (isPosOnly) {
+            continue;
+          }
+          const entry = {
+            format: "percentage",
+            keyframes: data.keyframes,
+            ...data.easeEach ? { easeEach: data.easeEach } : {}
+          };
+          draft.keyframeCache.set(cacheKey, entry);
+          if (sf !== "index.html") draft.keyframeCache.set(fallbackKey, entry);
+          draft.keyframeCache.set(id, entry);
         }
-        const entry = {
-          format: "percentage",
-          keyframes: data.keyframes,
-          ...data.easeEach ? { easeEach: data.easeEach } : {}
-        };
-        setKeyframeCache(cacheKey, entry);
-        if (sf !== "index.html") setKeyframeCache(fallbackKey, entry);
-        setKeyframeCache(id, entry);
-      }
+      });
       runtimeScanDoneRef.current = `kf-cache:${projectId}:${sf}:${version}`;
       return true;
     };
@@ -37558,6 +37689,7 @@ function KeyframeEaseList({
   keyframes,
   globalEase,
   expandedPct,
+  collidingAnimationTargets,
   onToggle,
   onEaseCommit,
   onApplyAll
@@ -37622,6 +37754,7 @@ function KeyframeEaseList({
               EaseCurveSection,
               {
                 ease: segEase,
+                collidingAnimationTargets,
                 onCustomEaseCommit: (ease) => onEaseCommit(kf.percentage, ease)
               }
             ) })
@@ -37831,6 +37964,7 @@ var AnimationCard = memo29(function AnimationCard2({
   onSetArcPath,
   onUpdateArcSegment,
   onUpdateKeyframeEase,
+  onUpdateSegmentEase,
   onSetAllKeyframeEases,
   onUnroll
 }) {
@@ -37838,6 +37972,7 @@ var AnimationCard = memo29(function AnimationCard2({
   const [addingProp, setAddingProp] = useState55(false);
   const [addingFromProp, setAddingFromProp] = useState55(false);
   const [expandedKfPct, setExpandedKfPct] = useState55(null);
+  const [focusedCollidingAnimationTargets, setFocusedCollidingAnimationTargets] = useState55();
   const cardRef = useRef62(null);
   const pendingAutoScrollRef = useRef62(false);
   useEffect49(() => {
@@ -37845,6 +37980,7 @@ var AnimationCard = memo29(function AnimationCard2({
     setExpanded(true);
     pendingAutoScrollRef.current = true;
     setExpandedKfPct(focusedSegment.tweenPercentage);
+    setFocusedCollidingAnimationTargets(focusedSegment.collidingAnimationTargets);
     onFocusSegmentConsumed?.();
   }, [focusedSegment, onFocusSegmentConsumed]);
   useEffect49(() => {
@@ -38057,9 +38193,17 @@ var AnimationCard = memo29(function AnimationCard2({
               keyframes: animation.keyframes.keyframes,
               globalEase: animation.keyframes.easeEach ?? animation.ease ?? "none",
               expandedPct: expandedKfPct,
-              onToggle: setExpandedKfPct,
+              collidingAnimationTargets: focusedCollidingAnimationTargets,
+              onToggle: (pct) => {
+                setExpandedKfPct(pct);
+                setFocusedCollidingAnimationTargets(void 0);
+              },
               onEaseCommit: (pct, ease) => {
-                onUpdateKeyframeEase(animation.id, pct, ease);
+                if (focusedCollidingAnimationTargets && focusedCollidingAnimationTargets.length > 1 && onUpdateSegmentEase) {
+                  onUpdateSegmentEase(focusedCollidingAnimationTargets, ease);
+                } else {
+                  onUpdateKeyframeEase(animation.id, pct, ease);
+                }
                 trackStudioSegmentEaseEdit({ action: "commit", ease });
               },
               onApplyAll: onSetAllKeyframeEases ? (ease) => onSetAllKeyframeEases(animation.id, ease) : void 0
@@ -38243,6 +38387,10 @@ function withTrackedGsapAnimationCallbacks(callbacks, track) {
     } : void 0,
     onLivePreview: callbacks.onLivePreview,
     onLivePreviewEnd: callbacks.onLivePreviewEnd,
+    onUpdateSegmentEase: callbacks.onUpdateSegmentEase ? (targets, ease) => {
+      track("select", "Segment ease");
+      callbacks.onUpdateSegmentEase?.(targets, ease);
+    } : void 0,
     onSetArcPath: callbacks.onSetArcPath ? (animationId, config) => {
       track("toggle", config.autoRotate !== void 0 ? "Auto rotate" : "Arc motion");
       callbacks.onSetArcPath?.(animationId, config);
@@ -38327,6 +38475,7 @@ import { jsx as jsx93, jsxs as jsxs75 } from "react/jsx-runtime";
 import { createElement } from "react";
 var GsapAnimationSection = memo30(function GsapAnimationSection2({
   animations,
+  elementId,
   multipleTimelines,
   unsupportedTimelinePattern,
   onAddAnimation,
@@ -38347,7 +38496,7 @@ var GsapAnimationSection = memo30(function GsapAnimationSection2({
           key: anim.id,
           animation: anim,
           defaultExpanded: index === 0,
-          focusedSegment: focusedEaseSegment?.animationId === anim.id ? focusedEaseSegment : null,
+          focusedSegment: focusedEaseSegment?.elementId === elementId && focusedEaseSegment.animationId === anim.id ? focusedEaseSegment : null,
           onFocusSegmentConsumed: clearFocusedEaseSegment
         }
       )),
@@ -40971,7 +41120,7 @@ function FlatMotionSection({
   const [addMenuOpen, setAddMenuOpen] = useState62(false);
   const trackedCallbacks = withTrackedGsapAnimationCallbacks(callbacks, track);
   const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment);
-  const renderedElementId = `${element.sourceFile}#${element.id}`;
+  const renderedElementId = scopedElementKey(element);
   const focusedHere = focusedEaseSegment && focusedEaseSegment.elementId === renderedElementId ? focusedEaseSegment : null;
   return /* @__PURE__ */ jsxs87("div", { className: "space-y-3", children: [
     showTiming && /* @__PURE__ */ jsx105(
@@ -44785,13 +44934,14 @@ function PropertyPanelFlat({
   onUpdateArcSegment,
   onUnroll,
   onUpdateKeyframeEase,
+  onUpdateSegmentEase,
   onSetAllKeyframeEases
 }) {
   const [openGroupId, setOpenGroupId] = useState73(
     () => isTextEditableSelection(element) ? "text" : showEditableSections ? "style" : sections.media ? "media" : "layout"
   );
   const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment);
-  const renderedElementId = `${element.sourceFile}#${element.id}`;
+  const renderedElementId = scopedElementKey(element);
   const [consumedFocus, setConsumedFocus] = useState73(focusedEaseSegment);
   if (focusedEaseSegment !== consumedFocus) {
     setConsumedFocus(focusedEaseSegment);
@@ -44848,6 +44998,7 @@ function PropertyPanelFlat({
     onUpdateArcSegment,
     onUnroll,
     onUpdateKeyframeEase,
+    onUpdateSegmentEase,
     onSetAllKeyframeEases
   } : null;
   const showMotionEffects = gsapEffectHandlers !== null;
@@ -45368,6 +45519,7 @@ var PropertyPanel = memo31(function PropertyPanel2(props) {
     onUpdateArcSegment,
     onUnroll,
     onUpdateKeyframeEase,
+    onUpdateSegmentEase,
     onSetAllKeyframeEases,
     onAddKeyframe,
     onRemoveKeyframe,
@@ -45764,6 +45916,7 @@ var PropertyPanel = memo31(function PropertyPanel2(props) {
       STUDIO_GSAP_PANEL_ENABLED && onUpdateGsapProperty && onUpdateGsapMeta && onDeleteGsapAnimation && onAddGsapProperty && onAddGsapAnimation && /* @__PURE__ */ jsx122(
         GsapAnimationSection,
         {
+          elementId: scopedElementKey(element),
           animations: gsapAnimations,
           multipleTimelines: gsapMultipleTimelines,
           unsupportedTimelinePattern: gsapUnsupportedTimelinePattern,
@@ -45781,7 +45934,8 @@ var PropertyPanel = memo31(function PropertyPanel2(props) {
           onUpdateArcSegment,
           onUnroll,
           onUpdateKeyframeEase,
-          onSetAllKeyframeEases
+          onSetAllKeyframeEases,
+          onUpdateSegmentEase
         }
       ),
       showEditableSections && /* @__PURE__ */ jsx122(
@@ -46607,7 +46761,7 @@ var FileTree = memo33(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState132, useCallback as useCallback143, useRef as useRef134, useMemo as useMemo53, useEffect as useEffect116, useLayoutEffect as useLayoutEffect4 } from "react";
+import { useState as useState132, useCallback as useCallback144, useRef as useRef134, useMemo as useMemo53, useEffect as useEffect116, useLayoutEffect as useLayoutEffect4 } from "react";
 
 // src/components/renders/useRenderQueue.ts
 import { useState as useState77, useEffect as useEffect66, useCallback as useCallback59, useRef as useRef77, useMemo as useMemo35 } from "react";
@@ -50602,7 +50756,7 @@ function persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps,
 }
 
 // src/hooks/useDomEditSession.ts
-import { useCallback as useCallback95 } from "react";
+import { useCallback as useCallback96 } from "react";
 
 // src/hooks/useAskAgentModal.ts
 import { useState as useState86, useCallback as useCallback74, useRef as useRef90, useEffect as useEffect71 } from "react";
@@ -55945,6 +56099,69 @@ function useStudioSelectionPublisher({
   }, [domEditSelectionRef, previewDocumentVersion, refreshDomEditSelectionFromPreview]);
 }
 
+// src/hooks/useKeyframeEaseCommits.ts
+import { useCallback as useCallback95 } from "react";
+function useKeyframeEaseCommits({
+  gsapCommitMutation,
+  domEditSelectionRef
+}) {
+  const handleUpdateSegmentEase = useCallback95(
+    (targets, ease) => {
+      const selection = domEditSelectionRef.current;
+      if (!selection || targets.length === 0) return;
+      const options = {
+        label: targets.length === 1 ? "Update keyframe ease" : "Update segment ease",
+        softReload: true
+      };
+      const calls = targets.map(({ animationId, tweenPercentage }) => ({
+        selection,
+        mutation: {
+          type: "update-keyframe",
+          animationId,
+          percentage: tweenPercentage,
+          properties: {},
+          ease
+        },
+        options
+      }));
+      if (calls.length === 1) {
+        const call = calls[0];
+        if (call) void gsapCommitMutation(call.selection, call.mutation, call.options);
+        return;
+      }
+      const batch = gsapCommitMutation.batch;
+      if (batch) {
+        void batch(calls, options);
+        return;
+      }
+      for (const call of calls)
+        void gsapCommitMutation(call.selection, call.mutation, call.options);
+    },
+    [gsapCommitMutation, domEditSelectionRef]
+  );
+  const handleUpdateKeyframeEase = useCallback95(
+    (animationId, percentage, ease) => handleUpdateSegmentEase([{ animationId, tweenPercentage: percentage }], ease),
+    [handleUpdateSegmentEase]
+  );
+  const handleSetAllKeyframeEases = useCallback95(
+    (animationId, ease) => {
+      const sel = domEditSelectionRef.current;
+      if (!sel) return;
+      gsapCommitMutation(
+        sel,
+        {
+          type: "update-meta",
+          animationId,
+          updates: { easeEach: ease, resetKeyframeEases: true }
+        },
+        { label: "Apply ease to all segments", softReload: true }
+      );
+    },
+    [gsapCommitMutation, domEditSelectionRef]
+  );
+  return { handleUpdateSegmentEase, handleUpdateKeyframeEase, handleSetAllKeyframeEases };
+}
+
 // src/hooks/useDomEditSession.ts
 function useDomEditSession({
   projectId,
@@ -56170,7 +56387,7 @@ function useDomEditSession({
     clearDomSelection,
     forceReloadSdkSession
   });
-  const handleGroupSelection = useCallback95(() => {
+  const handleGroupSelection = useCallback96(() => {
     const group = domEditGroupSelectionsRef.current;
     const single = domEditSelectionRef.current;
     const members = group.length > 0 ? group : single ? [single] : [];
@@ -56181,7 +56398,7 @@ function useDomEditSession({
     trackStudioEvent("group", { action: "create", count: members.length });
     void groupSelection(members);
   }, [domEditGroupSelectionsRef, domEditSelectionRef, groupSelection, showToast]);
-  const handleUngroupSelection = useCallback95(() => {
+  const handleUngroupSelection = useCallback96(() => {
     const sel = domEditSelectionRef.current;
     if (!sel?.element.hasAttribute("data-hf-group")) {
       showToast("Select a group to ungroup", "info");
@@ -56301,40 +56518,7 @@ function useDomEditSession({
     setArcPath,
     updateArcSegment
   });
-  const handleUpdateKeyframeEase = useCallback95(
-    (animationId, percentage, ease) => {
-      const sel = domEditSelectionRef.current;
-      if (!sel) return;
-      gsapCommitMutation(
-        sel,
-        {
-          type: "update-keyframe",
-          animationId,
-          percentage,
-          properties: {},
-          ease
-        },
-        { label: "Update keyframe ease", softReload: true }
-      );
-    },
-    [gsapCommitMutation, domEditSelectionRef]
-  );
-  const handleSetAllKeyframeEases = useCallback95(
-    (animationId, ease) => {
-      const sel = domEditSelectionRef.current;
-      if (!sel) return;
-      gsapCommitMutation(
-        sel,
-        {
-          type: "update-meta",
-          animationId,
-          updates: { easeEach: ease, resetKeyframeEases: true }
-        },
-        { label: "Apply ease to all segments", softReload: true }
-      );
-    },
-    [gsapCommitMutation, domEditSelectionRef]
-  );
+  const { handleUpdateSegmentEase, handleUpdateKeyframeEase, handleSetAllKeyframeEases } = useKeyframeEaseCommits({ gsapCommitMutation, domEditSelectionRef });
   return {
     // State
     domEditSelection,
@@ -56413,6 +56597,7 @@ function useDomEditSession({
     commitAnimatedProperty,
     commitAnimatedProperties,
     handleSetArcPath,
+    handleUpdateSegmentEase,
     handleUpdateArcSegment,
     handleUnroll,
     invalidateGsapCache: bumpGsapCache,
@@ -56438,7 +56623,7 @@ function useSdkSelectionSync(session, domEditSelection, domEditGroupSelections)
 import { useEffect as useEffect80 } from "react";
 
 // src/hooks/useSdkSession.ts
-import { useState as useState88, useEffect as useEffect79, useCallback as useCallback96, useRef as useRef102 } from "react";
+import { useState as useState88, useEffect as useEffect79, useCallback as useCallback97, useRef as useRef102 } from "react";
 import { openComposition as openComposition3 } from "@hyperframes/sdk";
 async function readProjectFileOptional(projectId, path) {
   if (path.includes("\0") || path.includes("..")) return void 0;
@@ -56575,8 +56760,8 @@ function useSdkSession(projectId, activeCompPath, domEditSaveTimestampRef) {
       }
     };
   }, [projectId, activeCompPath, reloadToken]);
-  const forceReload = useCallback96(() => setReloadToken((t) => t + 1), []);
-  const publish = useCallback96(({ candidate, expectedSession, targetPath }) => {
+  const forceReload = useCallback97(() => setReloadToken((t) => t + 1), []);
+  const publish = useCallback97(({ candidate, expectedSession, targetPath }) => {
     const expectedOwner = sessionOwnersRef.current.get(expectedSession);
     const current = ownedSessionRef.current;
     if (!isSessionOwnerActive(
@@ -56617,7 +56802,7 @@ function useStudioSdkSessions(projectId, activeCompPath, domEditSaveTimestampRef
 }
 
 // src/hooks/useBlockHandlers.ts
-import { useCallback as useCallback97, useMemo as useMemo40, useRef as useRef103, useState as useState89 } from "react";
+import { useCallback as useCallback98, useMemo as useMemo40, useRef as useRef103, useState as useState89 } from "react";
 
 // src/utils/blockInstaller.ts
 function getMaxZIndexFromIframe(iframe) {
@@ -56827,7 +57012,7 @@ function useBlockHandlers({
     ]
   );
   const installingBlockRef = useRef103(false);
-  const runBlockInstall = useCallback97(
+  const runBlockInstall = useCallback98(
     async (blockName, install) => {
       if (installingBlockRef.current) {
         blockCtx.showToast("A block is already installing \u2014 one moment\u2026", "info");
@@ -56843,7 +57028,7 @@ function useBlockHandlers({
     },
     [blockCtx]
   );
-  const handleAddBlock = useCallback97(
+  const handleAddBlock = useCallback98(
     (blockName) => {
       if (!projectId) return;
       void (async () => {
@@ -56873,7 +57058,7 @@ function useBlockHandlers({
     },
     [projectId, blockCtx, previewIframeRef, runBlockInstall, setRightCollapsed, setRightPanelTab]
   );
-  const handleTimelineBlockDrop = useCallback97(
+  const handleTimelineBlockDrop = useCallback98(
     (blockName, placement) => {
       if (!projectId) return;
       void runBlockInstall(
@@ -56890,7 +57075,7 @@ function useBlockHandlers({
     },
     [projectId, blockCtx, previewIframeRef, runBlockInstall]
   );
-  const handleAddMediaOverlay = useCallback97(
+  const handleAddMediaOverlay = useCallback98(
     async (blockName, placement) => {
       if (!projectId) return;
       const { compositionPath, ...timelinePlacement } = placement;
@@ -56909,7 +57094,7 @@ function useBlockHandlers({
     },
     [projectId, blockCtx, previewIframeRef, runBlockInstall]
   );
-  const handlePreviewBlockDrop = useCallback97(
+  const handlePreviewBlockDrop = useCallback98(
     (blockName, position) => {
       if (!projectId) return;
       void runBlockInstall(
@@ -56937,7 +57122,7 @@ function useBlockHandlers({
 }
 
 // src/hooks/useAppHotkeys.ts
-import { useCallback as useCallback98, useEffect as useEffect81, useRef as useRef104 } from "react";
+import { useCallback as useCallback99, useEffect as useEffect81, useRef as useRef104 } from "react";
 function iframeContentWindow(iframe) {
   try {
     return iframe?.contentWindow ?? null;
@@ -57147,22 +57332,22 @@ function useAppHotkeys({
 }) {
   const previewHotkeyWindowRef = useRef104(null);
   const previewHistoryCleanupRef = useRef104(null);
-  const readHistoryFile = useCallback98(
+  const readHistoryFile = useCallback99(
     (path) => path === STUDIO_MOTION_PATH ? readOptionalProjectFile(path) : readProjectFile(path),
     [readOptionalProjectFile, readProjectFile]
   );
-  const writeHistoryFile = useCallback98(
+  const writeHistoryFile = useCallback99(
     async (path, content) => {
       domEditSaveTimestampRef.current = Date.now();
       await writeProjectFile(path, content);
     },
     [domEditSaveTimestampRef, writeProjectFile]
   );
-  const serializeHistoryFiles = useCallback98(
+  const serializeHistoryFiles = useCallback99(
     (paths, task) => serializeStudioFileMutations(writeProjectFile, paths, task),
     [writeProjectFile]
   );
-  const applyHistory = useCallback98(
+  const applyHistory = useCallback99(
     async (direction) => {
       if (tryApplyBeatHistory(direction, editHistory.state, showToast)) return;
       await waitForPendingDomEditSaves();
@@ -57200,8 +57385,8 @@ function useAppHotkeys({
       forceReloadSdkSession
     ]
   );
-  const handleUndo = useCallback98(() => applyHistory("undo"), [applyHistory]);
-  const handleRedo = useCallback98(() => applyHistory("redo"), [applyHistory]);
+  const handleUndo = useCallback99(() => applyHistory("undo"), [applyHistory]);
+  const handleRedo = useCallback99(() => applyHistory("redo"), [applyHistory]);
   const cbRef = useRef104(null);
   cbRef.current = {
     handleTimelineElementDelete,
@@ -57221,7 +57406,7 @@ function useAppHotkeys({
     domEditSelectionRef,
     showToast
   };
-  const handleAppKeyDown = useCallback98((event) => {
+  const handleAppKeyDown = useCallback99((event) => {
     const cb = cbRef.current;
     const key = event.key.toLowerCase();
     if (event.metaKey || event.ctrlKey) {
@@ -57234,7 +57419,7 @@ function useAppHotkeys({
     window.addEventListener("keydown", handleAppKeyDown, true);
     return () => window.removeEventListener("keydown", handleAppKeyDown, true);
   }, [handleAppKeyDown]);
-  const syncPreviewTimelineHotkey = useCallback98(
+  const syncPreviewTimelineHotkey = useCallback99(
     (iframe) => {
       const nextWindow = iframeContentWindow(iframe);
       if (previewHotkeyWindowRef.current === nextWindow) return;
@@ -57259,7 +57444,7 @@ function useAppHotkeys({
     },
     [handleAppKeyDown]
   );
-  const handleHistoryHotkey = useCallback98((event) => {
+  const handleHistoryHotkey = useCallback99((event) => {
     if (!(event.metaKey || event.ctrlKey) || shouldIgnoreHistoryShortcut(event.target)) return;
     handleUndoRedoKey(
       event,
@@ -57267,7 +57452,7 @@ function useAppHotkeys({
       () => void cbRef.current.handleRedo()
     );
   }, []);
-  const syncPreviewHistoryHotkey = useCallback98(
+  const syncPreviewHistoryHotkey = useCallback99(
     (iframe) => {
       previewHistoryCleanupRef.current?.();
       previewHistoryCleanupRef.current = null;
@@ -57305,7 +57490,7 @@ function useAppHotkeys({
 }
 
 // src/hooks/useClipboard.ts
-import { useCallback as useCallback99, useRef as useRef105 } from "react";
+import { useCallback as useCallback100, useRef as useRef105 } from "react";
 
 // src/utils/clipboardPayload.ts
 function insertAsSibling(source, newHtml, selector, selectorIndex) {
@@ -57415,7 +57600,7 @@ function useClipboard({
   const clipboardRef = useRef105(null);
   const projectIdRef = useRef105(projectId);
   projectIdRef.current = projectId;
-  const handleCopy = useCallback99(() => {
+  const handleCopy = useCallback100(() => {
     const { selectedElementId, elements } = usePlayerStore.getState();
     if (selectedElementId) {
       const element = elements.find((el) => (el.key ?? el.id) === selectedElementId);
@@ -57469,7 +57654,7 @@ function useClipboard({
     }
     return false;
   }, [activeCompPath, domEditSelectionRef, previewIframeRef, showToast]);
-  const handlePaste = useCallback99(async () => {
+  const handlePaste = useCallback100(async () => {
     const payload = clipboardRef.current;
     if (!payload) {
       showToast("Nothing to paste.", "info");
@@ -57525,7 +57710,7 @@ function useClipboard({
     showToast,
     writeProjectFile
   ]);
-  const handleCut = useCallback99(async () => {
+  const handleCut = useCallback100(async () => {
     const copied = handleCopy();
     if (!copied) return false;
     const { selectedElementId, elements } = usePlayerStore.getState();
@@ -57887,11 +58072,11 @@ function useCaptionDetection({
 }
 
 // src/hooks/useRenderClipContent.ts
-import { useCallback as useCallback102 } from "react";
+import { useCallback as useCallback103 } from "react";
 import { createElement as createElement4 } from "react";
 
 // src/player/components/AudioWaveform.tsx
-import { memo as memo34, useRef as useRef106, useState as useState90, useCallback as useCallback100, useEffect as useEffect83 } from "react";
+import { memo as memo34, useRef as useRef106, useState as useState90, useCallback as useCallback101, useEffect as useEffect83 } from "react";
 import { jsx as jsx132, jsxs as jsxs112 } from "react/jsx-runtime";
 var BAR_W = 2;
 var GAP = 1;
@@ -57968,7 +58153,7 @@ var AudioWaveform = memo34(function AudioWaveform2({
       cancelled = true;
     };
   }, [audioUrl, waveformUrl, cacheKey, peaks]);
-  const draw = useCallback100(() => {
+  const draw = useCallback101(() => {
     const container = containerRef.current;
     const barsEl = barsRef.current;
     if (!container || !barsEl || !peaks) return;
@@ -57989,7 +58174,7 @@ var AudioWaveform = memo34(function AudioWaveform2({
     }
     barsEl.innerHTML = html2;
   }, [peaks, trimStartFraction, trimEndFraction]);
-  const setContainerRef = useCallback100(
+  const setContainerRef = useCallback101(
     (el) => {
       roRef.current?.disconnect();
       containerRef.current = el;
@@ -58033,7 +58218,7 @@ var AudioWaveform = memo34(function AudioWaveform2({
 });
 
 // src/player/components/ImageThumbnail.tsx
-import { memo as memo35, useRef as useRef107, useState as useState91, useCallback as useCallback101, useEffect as useEffect84 } from "react";
+import { memo as memo35, useRef as useRef107, useState as useState91, useCallback as useCallback102, useEffect as useEffect84 } from "react";
 import { jsx as jsx133, jsxs as jsxs113 } from "react/jsx-runtime";
 var ImageThumbnail = memo35(function ImageThumbnail2({
   imageSrc,
@@ -58046,7 +58231,7 @@ var ImageThumbnail = memo35(function ImageThumbnail2({
   const [aspect, setAspect] = useState91(16 / 9);
   const ioRef = useRef107(null);
   const roRef = useRef107(null);
-  const setContainerRef = useCallback101((el) => {
+  const setContainerRef = useCallback102((el) => {
     ioRef.current?.disconnect();
     roRef.current?.disconnect();
     if (!el) return;
@@ -58199,7 +58384,7 @@ function useRenderClipContent({
   activePreviewUrl,
   effectiveTimelineDuration
 }) {
-  return useCallback102(
+  return useCallback103(
     // Pre-existing clip-content dispatcher; reduced by extracting renderAudioClip.
     // fallow-ignore-next-line complexity
     (el, style) => {
@@ -58271,11 +58456,11 @@ function useRenderClipContent({
 }
 
 // src/hooks/useConsoleErrorCapture.ts
-import { useCallback as useCallback103, useEffect as useEffect85, useRef as useRef108, useState as useState92 } from "react";
+import { useCallback as useCallback104, useEffect as useEffect85, useRef as useRef108, useState as useState92 } from "react";
 function useConsoleErrorCapture(previewIframe) {
   const [consoleErrors, setConsoleErrors] = useState92(null);
   const consoleErrorsRef = useRef108([]);
-  const resetErrors = useCallback103(() => {
+  const resetErrors = useCallback104(() => {
     consoleErrorsRef.current = [];
     setConsoleErrors(null);
   }, []);
@@ -58344,7 +58529,7 @@ function useConsoleErrorCapture(previewIframe) {
 }
 
 // src/hooks/useFrameCapture.ts
-import { useState as useState93, useCallback as useCallback104, useRef as useRef109 } from "react";
+import { useState as useState93, useCallback as useCallback105, useRef as useRef109 } from "react";
 
 // src/utils/frameCapture.ts
 function normalizeCompositionPath(compositionPath) {
@@ -58387,10 +58572,10 @@ function useFrameCapture({
     setCaptureFrameTime(usePlayerStore.getState().currentTime);
     return liveTime.subscribe(setCaptureFrameTime);
   });
-  const refreshCaptureFrameTime = useCallback104(() => {
+  const refreshCaptureFrameTime = useCallback105(() => {
     setCaptureFrameTime(usePlayerStore.getState().currentTime);
   }, []);
-  const handleCaptureFrameClick = useCallback104(
+  const handleCaptureFrameClick = useCallback105(
     async (event) => {
       if (!projectId) return;
       event.preventDefault();
@@ -58467,7 +58652,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState94, useCallback as useCallback105, useEffect as useEffect86, useRef as useRef110, useMemo as useMemo41 } from "react";
+import { useState as useState94, useCallback as useCallback106, useEffect as useEffect86, useRef as useRef110, useMemo as useMemo41 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -58482,7 +58667,7 @@ function useLintModal(projectId, refreshKey) {
   const [linting, setLinting] = useState94(false);
   const [backgroundFindings, setBackgroundFindings] = useState94([]);
   const autoLintRanRef = useRef110(false);
-  const runLint = useCallback105(
+  const runLint = useCallback106(
     async (opts) => {
       if (!projectId) return;
       if (!opts?.background) setLinting(true);
@@ -58507,7 +58692,7 @@ function useLintModal(projectId, refreshKey) {
     },
     [projectId]
   );
-  const handleLint = useCallback105(() => runLint(), [runLint]);
+  const handleLint = useCallback106(() => runLint(), [runLint]);
   const prevProjectIdRef = useRef110(projectId);
   useEffect86(() => {
     if (projectId !== prevProjectIdRef.current) {
@@ -58523,8 +58708,8 @@ function useLintModal(projectId, refreshKey) {
     const timer = setTimeout(() => void runLint({ background: true }), 1e3);
     return () => clearTimeout(timer);
   }, [projectId, refreshKey, runLint]);
-  const closeLintModal = useCallback105(() => setLintModal(null), []);
-  const groupFindings = useCallback105(
+  const closeLintModal = useCallback106(() => setLintModal(null), []);
+  const groupFindings = useCallback106(
     (keyFn) => {
       const map = /* @__PURE__ */ new Map();
       for (const f of backgroundFindings) {
@@ -58556,7 +58741,7 @@ function useLintModal(projectId, refreshKey) {
 }
 
 // src/hooks/useToast.ts
-import { useState as useState95, useCallback as useCallback106, useRef as useRef111 } from "react";
+import { useState as useState95, useCallback as useCallback107, useRef as useRef111 } from "react";
 var AUTO_DISMISS_MS2 = 4e3;
 var EXIT_MS = 160;
 var MAX_TOASTS = 3;
@@ -58564,21 +58749,21 @@ var nextToastId = 1;
 function useToast() {
   const [toasts, setToasts] = useState95([]);
   const timersRef = useRef111(/* @__PURE__ */ new Map());
-  const clearTimer = useCallback106((id) => {
+  const clearTimer = useCallback107((id) => {
     const timer = timersRef.current.get(id);
     if (timer) {
       clearTimeout(timer);
       timersRef.current.delete(id);
     }
   }, []);
-  const removeToast = useCallback106(
+  const removeToast = useCallback107(
     (id) => {
       clearTimer(id);
       setToasts((prev) => prev.filter((t) => t.id !== id));
     },
     [clearTimer]
   );
-  const dismissToast = useCallback106(
+  const dismissToast = useCallback107(
     (id) => {
       clearTimer(id);
       setToasts((prev) => prev.map((t) => t.id === id ? { ...t, leaving: true } : t));
@@ -58587,7 +58772,7 @@ function useToast() {
     },
     [clearTimer, removeToast]
   );
-  const showToast = useCallback106(
+  const showToast = useCallback107(
     (message, tone = "error") => {
       const id = nextToastId++;
       setToasts((prev) => {
@@ -58613,14 +58798,14 @@ function useToast() {
 }
 
 // src/hooks/useCompositionContentLoader.ts
-import { useCallback as useCallback107 } from "react";
+import { useCallback as useCallback108 } from "react";
 function useCompositionContentLoader({
   projectId,
   setEditingFile,
   setActiveCompPath,
   showToast
 }) {
-  return useCallback107(
+  return useCallback108(
     (comp) => {
       setActiveCompPath(comp.endsWith(".html") ? comp : null);
       setEditingFile({ path: comp, content: null });
@@ -58639,7 +58824,7 @@ function useCompositionContentLoader({
 }
 
 // src/hooks/useStudioUrlState.ts
-import { useCallback as useCallback108, useEffect as useEffect87, useRef as useRef112, useState as useState96 } from "react";
+import { useCallback as useCallback109, useEffect as useEffect87, useRef as useRef112, useState as useState96 } from "react";
 
 // src/utils/studioUrlState.ts
 var VALID_TABS = ["layers", "design", "renders", "slideshow", "variables"];
@@ -58772,7 +58957,7 @@ function useStudioUrlState({
   const [selectionHydrated, setSelectionHydrated] = useState96(initialState2.selection == null);
   const pendingSelectionRef = useRef112(initialState2.selection);
   const stableTimeRef = useRef112(initialState2.currentTime);
-  const buildUrlState = useCallback108(
+  const buildUrlState = useCallback109(
     () => ({
       activeCompPath,
       currentTime: stableTimeRef.current,
@@ -58783,7 +58968,7 @@ function useStudioUrlState({
     }),
     [activeCompPath, domEditSelection, rightCollapsed, rightPanelTab]
   );
-  const applyUrlSelection = useCallback108(
+  const applyUrlSelection = useCallback109(
     (selection) => {
       if (!selection) {
         applyDomSelection(null, { revealPanel: false });
@@ -58899,7 +59084,7 @@ function useStudioUrlState({
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback109, useMemo as useMemo42, useRef as useRef113, useState as useState97 } from "react";
+import { useCallback as useCallback110, useMemo as useMemo42, useRef as useRef113, useState as useState97 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -58956,21 +59141,21 @@ function useInspectorState(rightPanelTab, rightInspectorPanes, rightCollapsed, i
 function useDragOverlay(onImportFiles) {
   const [active, setActive] = useState97(false);
   const counterRef = useRef113(0);
-  const onDragOver = useCallback109((e) => {
+  const onDragOver = useCallback110((e) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
   }, []);
-  const onDragEnter = useCallback109((e) => {
+  const onDragEnter = useCallback110((e) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
     counterRef.current++;
     setActive(true);
   }, []);
-  const onDragLeave = useCallback109(() => {
+  const onDragLeave = useCallback110(() => {
     counterRef.current--;
     if (counterRef.current === 0) setActive(false);
   }, []);
-  const onDrop = useCallback109(
+  const onDrop = useCallback110(
     (e) => {
       counterRef.current = 0;
       setActive(false);
@@ -58983,7 +59168,7 @@ function useDragOverlay(onImportFiles) {
   return { active, onDragOver, onDragEnter, onDragLeave, onDrop };
 }
 function useGlobalFileDrop(handleTimelineFileDrop) {
-  const onDrop = useCallback109(
+  const onDrop = useCallback110(
     (files) => {
       const start = usePlayerStore.getState().currentTime;
       void handleTimelineFileDrop(Array.from(files), { start, track: 0 });
@@ -59070,7 +59255,7 @@ function PanelLayoutProvider({
 // src/contexts/ViewModeContext.tsx
 import {
   createContext as createContext9,
-  useCallback as useCallback110,
+  useCallback as useCallback111,
   useContext as useContext9,
   useEffect as useEffect88,
   useMemo as useMemo44,
@@ -59104,7 +59289,7 @@ function useViewModeState() {
   const [viewMode, setMode] = useState98(() => readViewModeFromUrl());
   const guardsRef = useRef114(/* @__PURE__ */ new Set());
   const acceptedLocationRef = useRef114(readHistoryLocation());
-  const canSetViewMode = useCallback110((mode) => {
+  const canSetViewMode = useCallback111((mode) => {
     for (const guard of guardsRef.current) {
       if (!guard(mode)) return false;
     }
@@ -59126,7 +59311,7 @@ function useViewModeState() {
     window.addEventListener("popstate", onPopState);
     return () => window.removeEventListener("popstate", onPopState);
   }, [canSetViewMode, viewMode]);
-  const setViewMode = useCallback110(
+  const setViewMode = useCallback111(
     (mode) => {
       if (!canSetViewMode(mode)) return false;
       setMode(mode);
@@ -59136,7 +59321,7 @@ function useViewModeState() {
     },
     [canSetViewMode]
   );
-  const registerViewModeGuard = useCallback110((guard) => {
+  const registerViewModeGuard = useCallback111((guard) => {
     guardsRef.current.add(guard);
     return () => {
       guardsRef.current.delete(guard);
@@ -59581,10 +59766,10 @@ function StudioHeader({
 }
 
 // src/hooks/useGestureCommit.ts
-import { useState as useState100, useCallback as useCallback112, useRef as useRef117, useEffect as useEffect90 } from "react";
+import { useState as useState100, useCallback as useCallback113, useRef as useRef117, useEffect as useEffect90 } from "react";
 
 // src/hooks/useGestureRecording.ts
-import { useCallback as useCallback111, useEffect as useEffect89, useRef as useRef116, useState as useState99 } from "react";
+import { useCallback as useCallback112, useEffect as useEffect89, useRef as useRef116, useState as useState99 } from "react";
 function readBasePosition(element, iframeEl) {
   let baseOpacity = 1;
   let baseScale = 1;
@@ -59715,7 +59900,7 @@ function useGestureRecording() {
       isRecordingRef.current = false;
     };
   }, []);
-  const startRecording = useCallback111(
+  const startRecording = useCallback112(
     (element, iframeEl, elementEndTime) => {
       if (isRecordingRef.current) return;
       isRecordingRef.current = true;
@@ -59815,7 +60000,7 @@ function useGestureRecording() {
     []
     // No deps — uses refs only for all mutable state
   );
-  const stopRecording = useCallback111(() => {
+  const stopRecording = useCallback112(() => {
     if (!isRecordingRef.current) return [];
     isRecordingRef.current = false;
     const r = refs.current;
@@ -59845,7 +60030,7 @@ function useGestureRecording() {
     setIsRecording(false);
     return frozen;
   }, []);
-  const clearSamples = useCallback111(() => {
+  const clearSamples = useCallback112(() => {
     const r = refs.current;
     r.samples = [];
     r.trail = [];
@@ -60108,7 +60293,7 @@ function useGestureCommit({
   const commitInFlightRef = useRef117(false);
   const capturedSelectionRef = useRef117(null);
   useEffect90(() => () => clearInterval(recordingAutoStopRef.current), []);
-  const stopAndCommitRecording = useCallback112(async () => {
+  const stopAndCommitRecording = useCallback113(async () => {
     clearInterval(recordingAutoStopRef.current);
     if (commitInFlightRef.current) {
       return;
@@ -60281,7 +60466,7 @@ function useGestureCommit({
       commitInFlightRef.current = false;
     }
   }, [gestureRecording, showToast, isGestureRecordingRef, domEditSessionRef]);
-  const handleToggleRecording = useCallback112(() => {
+  const handleToggleRecording = useCallback113(() => {
     if (gestureStateRef.current === "recording") {
       void stopAndCommitRecording();
       return;
@@ -60439,20 +60624,20 @@ var GestureTrailOverlay = memo36(function GestureTrailOverlay2({
 });
 
 // src/components/StudioLeftSidebar.tsx
-import { useCallback as useCallback119 } from "react";
+import { useCallback as useCallback120 } from "react";
 
 // src/components/sidebar/LeftSidebar.tsx
 import {
   memo as memo40,
   useState as useState108,
-  useCallback as useCallback118,
+  useCallback as useCallback119,
   useImperativeHandle,
   useRef as useRef123,
   forwardRef as forwardRef3
 } from "react";
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo37, useCallback as useCallback113, useEffect as useEffect91, useRef as useRef118, useState as useState101 } from "react";
+import { memo as memo37, useCallback as useCallback114, useEffect as useEffect91, useRef as useRef118, useState as useState101 } from "react";
 import { jsx as jsx138, jsxs as jsxs116 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -60528,7 +60713,7 @@ function CompCard({
   const hoverTimer = useRef118(null);
   const syncTimer = useRef118(null);
   const draggedRef = useRef118(false);
-  const requestIframePlaybackSync = useCallback113((shouldPlay) => {
+  const requestIframePlaybackSync = useCallback114((shouldPlay) => {
     if (syncTimer.current) {
       clearTimeout(syncTimer.current);
       syncTimer.current = null;
@@ -60749,7 +60934,7 @@ var CompositionsTab = memo37(function CompositionsTab2({
 });
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo38, useState as useState106, useCallback as useCallback116, useRef as useRef121, useMemo as useMemo47, useEffect as useEffect96 } from "react";
+import { memo as memo38, useState as useState106, useCallback as useCallback117, useRef as useRef121, useMemo as useMemo47, useEffect as useEffect96 } from "react";
 
 // src/components/sidebar/assetHelpers.ts
 function getCategory(path) {
@@ -60799,7 +60984,7 @@ var CATEGORY_LABELS = {
 var FILTER_ORDER = ["audio", "images", "video", "fonts"];
 
 // src/components/sidebar/AudioRow.tsx
-import { useState as useState102, useRef as useRef119, useEffect as useEffect92, useCallback as useCallback114 } from "react";
+import { useState as useState102, useRef as useRef119, useEffect as useEffect92, useCallback as useCallback115 } from "react";
 
 // src/components/sidebar/AssetContextMenu.tsx
 import { jsx as jsx139, jsxs as jsxs117 } from "react/jsx-runtime";
@@ -60942,10 +61127,10 @@ function AudioRow({
   const elements = usePlayerStore((s) => s.elements);
   const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
   const clearPreviewAsset = useAssetPreviewStore((s) => s.clearPreviewAsset);
-  const handlePointerDown = useCallback114((e) => {
+  const handlePointerDown = useCallback115((e) => {
     pointerDownRef.current = { x: e.clientX, y: e.clientY };
   }, []);
-  const handlePointerUp = useCallback114(
+  const handlePointerUp = useCallback115(
     (e) => {
       const origin = pointerDownRef.current;
       pointerDownRef.current = null;
@@ -61009,7 +61194,7 @@ function AudioRow({
     }
     return () => cancelAnimationFrame(animRef.current);
   }, [playing]);
-  const togglePlay = useCallback114(async () => {
+  const togglePlay = useCallback115(async () => {
     if (playing) {
       audioRef.current?.pause();
       setPlaying(false);
@@ -61178,7 +61363,7 @@ function GlobalAssetsView({ searchQuery }) {
 }
 
 // src/components/sidebar/AssetCard.tsx
-import { useState as useState105, useEffect as useEffect95, useRef as useRef120, useCallback as useCallback115 } from "react";
+import { useState as useState105, useEffect as useEffect95, useRef as useRef120, useCallback as useCallback116 } from "react";
 
 // src/components/ui/VideoFrameThumbnail.tsx
 import { useState as useState104, useEffect as useEffect94 } from "react";
@@ -61309,10 +61494,10 @@ function AssetCard({
   const elements = usePlayerStore((s) => s.elements);
   const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
   const clearPreviewAsset = useAssetPreviewStore((s) => s.clearPreviewAsset);
-  const handlePointerDown = useCallback115((e) => {
+  const handlePointerDown = useCallback116((e) => {
     pointerDownRef.current = { x: e.clientX, y: e.clientY };
   }, []);
-  const handlePointerUp = useCallback115(
+  const handlePointerUp = useCallback116(
     (e) => {
       const origin = pointerDownRef.current;
       pointerDownRef.current = null;
@@ -61542,7 +61727,7 @@ var AssetsTab = memo38(function AssetsTab2({
       cancelled = true;
     };
   }, [projectId, assetsKey]);
-  const handleDrop = useCallback116(
+  const handleDrop = useCallback117(
     (e) => {
       e.preventDefault();
       setDragOver(false);
@@ -61550,7 +61735,7 @@ var AssetsTab = memo38(function AssetsTab2({
     },
     [onImport]
   );
-  const handleCopyPath = useCallback116(async (path) => {
+  const handleCopyPath = useCallback117(async (path) => {
     const copied = await copyTextToClipboard(path);
     if (copied) {
       setCopiedPath(path);
@@ -61834,7 +62019,7 @@ var AssetsTab = memo38(function AssetsTab2({
 });
 
 // src/components/sidebar/BlocksTab.tsx
-import { memo as memo39, useState as useState107, useCallback as useCallback117, useRef as useRef122, useEffect as useEffect97 } from "react";
+import { memo as memo39, useState as useState107, useCallback as useCallback118, useRef as useRef122, useEffect as useEffect97 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 import { jsx as jsx145, jsxs as jsxs122 } from "react/jsx-runtime";
 var BlocksTab = memo39(function BlocksTab2({ onAddBlock, onPreviewBlock }) {
@@ -62049,13 +62234,13 @@ function BlockCard({
   const hoverTimer = useRef122(null);
   const colors = getCategoryColors(category);
   const needsWebGL = tags?.includes("html-in-canvas") || tags?.includes("webgl");
-  const handleEnter = useCallback117(() => {
+  const handleEnter = useCallback118(() => {
     hoverTimer.current = setTimeout(() => {
       setHovered(true);
       onPreview?.({ videoUrl, posterUrl, title });
     }, 300);
   }, [onPreview, videoUrl, posterUrl, title]);
-  const handleLeave = useCallback117(() => {
+  const handleLeave = useCallback118(() => {
     if (hoverTimer.current) {
       clearTimeout(hoverTimer.current);
       hoverTimer.current = null;
@@ -62068,7 +62253,7 @@ function BlockCard({
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
     };
   }, []);
-  const handleAdd = useCallback117(
+  const handleAdd = useCallback118(
     (e) => {
       e.stopPropagation();
       if (adding || !onAdd) return;
@@ -62079,7 +62264,7 @@ function BlockCard({
     [onAdd, adding]
   );
   const { activeCompPath, compositionDimensions } = useStudioShellContext();
-  const handleShowPrompt = useCallback117(
+  const handleShowPrompt = useCallback118(
     (e) => {
       e.stopPropagation();
       const state = usePlayerStore.getState();
@@ -62228,7 +62413,7 @@ function PromptPreviewModal({
   useEffect97(() => {
     requestAnimationFrame(() => textareaRef.current?.focus());
   }, []);
-  const handleCopy = useCallback117(() => {
+  const handleCopy = useCallback118(() => {
     navigator.clipboard.writeText(value);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
@@ -62355,12 +62540,12 @@ var LeftSidebar = memo40(
     const [tab, setTab] = useState108(getPersistedTab);
     const tabRef = useRef123(tab);
     tabRef.current = tab;
-    const selectTab = useCallback118((t) => {
+    const selectTab = useCallback119((t) => {
       setTab(t);
       localStorage.setItem(STORAGE_KEY, t);
       trackStudioEvent("tab_switch", { panel: "left_sidebar", tab: t });
     }, []);
-    const getTab = useCallback118(() => tabRef.current, []);
+    const getTab = useCallback119(() => tabRef.current, []);
     useImperativeHandle(ref, () => ({ selectTab, getTab }), [selectTab, getTab]);
     return /* @__PURE__ */ jsx146(
       "div",
@@ -62703,7 +62888,7 @@ function StudioLeftSidebar({
     handleImportFiles,
     handleContentChange
   } = useFileManagerContext();
-  const handleRenderComposition = useCallback119(
+  const handleRenderComposition = useCallback120(
     async (comp) => {
       await waitForPendingDomEditSaves();
       const { format, quality, fps } = getPersistedRenderSettings();
@@ -62823,13 +63008,13 @@ function StudioLeftSidebar({
 }
 
 // src/components/StudioRightPanel.tsx
-import { useCallback as useCallback135, useEffect as useEffect104, useRef as useRef129 } from "react";
+import { useCallback as useCallback136, useEffect as useEffect104, useRef as useRef129 } from "react";
 
 // src/components/editor/LayersPanel.tsx
-import { memo as memo41, useState as useState111, useCallback as useCallback121, useEffect as useEffect98, useRef as useRef125 } from "react";
+import { memo as memo41, useState as useState111, useCallback as useCallback122, useEffect as useEffect98, useRef as useRef125 } from "react";
 
 // src/components/editor/useLayerDrag.ts
-import { useRef as useRef124, useState as useState110, useCallback as useCallback120 } from "react";
+import { useRef as useRef124, useState as useState110, useCallback as useCallback121 } from "react";
 var DRAG_THRESHOLD_PX3 = 4;
 function isLayerDraggable(layer) {
   if (!(layer.selector || layer.id)) return false;
@@ -62899,7 +63084,7 @@ function useLayerDrag({
   const dragRef = useRef124(null);
   const [dragKey, setDragKey] = useState110(null);
   const [insertionLineY, setInsertionLineY] = useState110(null);
-  const handleRowPointerDown = useCallback120(
+  const handleRowPointerDown = useCallback121(
     (layerIndex, e) => {
       if (e.button !== 0) return;
       const layer = visibleLayers[layerIndex];
@@ -62926,7 +63111,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef, onSingleSibling]
   );
-  const handleContainerPointerMove = useCallback120(
+  const handleContainerPointerMove = useCallback121(
     (e) => {
       const drag = dragRef.current;
       if (!drag) return;
@@ -62952,7 +63137,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef]
   );
-  const handleContainerPointerUp = useCallback120(() => {
+  const handleContainerPointerUp = useCallback121(() => {
     const drag = dragRef.current;
     dragRef.current = null;
     setDragKey(null);
@@ -63109,7 +63294,7 @@ var LayersPanel = memo41(function LayersPanel2() {
     selectedElement: domEditSelection?.element ?? null
   });
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
-  const collectLayers = useCallback121(() => {
+  const collectLayers = useCallback122(() => {
     const iframe = previewIframeRef.current;
     if (!iframe) return;
     let doc = null;
@@ -63156,7 +63341,7 @@ var LayersPanel = memo41(function LayersPanel2() {
       throttle.cancel();
     };
   }, [collectLayers]);
-  const resolveSelection = useCallback121(
+  const resolveSelection = useCallback122(
     (layer) => {
       let el = layer.element;
       if (!el.isConnected) {
@@ -63176,7 +63361,7 @@ var LayersPanel = memo41(function LayersPanel2() {
     },
     [activeCompPath, isMasterView, previewIframeRef, activeGroupElement]
   );
-  const seekToLayer = useCallback121(
+  const seekToLayer = useCallback122(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (!selection) return;
@@ -63205,7 +63390,7 @@ var LayersPanel = memo41(function LayersPanel2() {
     },
     [currentTime, resolveSelection, timelineElements]
   );
-  const handleSelectLayer = useCallback121(
+  const handleSelectLayer = useCallback122(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (!selection) return;
@@ -63215,7 +63400,7 @@ var LayersPanel = memo41(function LayersPanel2() {
     },
     [resolveSelection, applyDomSelection, seekToLayer, scheduleReveal]
   );
-  const handleLayerDoubleClick = useCallback121(
+  const handleLayerDoubleClick = useCallback122(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (selection?.element.hasAttribute("data-hf-group")) {
@@ -63226,7 +63411,7 @@ var LayersPanel = memo41(function LayersPanel2() {
     },
     [resolveSelection, setActiveGroupElement, handleSelectLayer]
   );
-  const handleLayerHover = useCallback121(
+  const handleLayerHover = useCallback122(
     async (layer) => {
       if (!layer) {
         updateDomEditHoverSelection(null);
@@ -63237,11 +63422,11 @@ var LayersPanel = memo41(function LayersPanel2() {
     },
     [resolveSelection, updateDomEditHoverSelection]
   );
-  const toggleCollapse = useCallback121((key, e) => {
+  const toggleCollapse = useCallback122((key, e) => {
     e.stopPropagation();
     setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
   }, []);
-  const handleReorder = useCallback121(
+  const handleReorder = useCallback122(
     (event) => {
       const { siblingLayers, fromIndex, toIndex } = event;
       const reordered = [...siblingLayers];
@@ -63304,7 +63489,7 @@ var LayersPanel = memo41(function LayersPanel2() {
   );
   const selectedKey = domEditSelection ? getDomEditLayerKey(domEditSelection) : null;
   const visibleLayers = getVisibleLayers(layers, collapsed);
-  const handleSingleSibling = useCallback121(() => {
+  const handleSingleSibling = useCallback122(() => {
     showToast("Only one layer at this level", "info");
   }, [showToast]);
   const {
@@ -63433,10 +63618,10 @@ var LayersPanel = memo41(function LayersPanel2() {
 });
 
 // src/captions/components/CaptionPropertyPanel.tsx
-import { memo as memo43, useCallback as useCallback123, useState as useState112 } from "react";
+import { memo as memo43, useCallback as useCallback124, useState as useState112 } from "react";
 
 // src/captions/components/CaptionAnimationPanel.tsx
-import { memo as memo42, useCallback as useCallback122 } from "react";
+import { memo as memo42, useCallback as useCallback123 } from "react";
 
 // src/captions/components/shared.tsx
 import { jsx as jsx150, jsxs as jsxs127 } from "react/jsx-runtime";
@@ -63599,25 +63784,25 @@ var CaptionAnimationPanel = memo42(function CaptionAnimationPanel2() {
   }
   const group = resolvedGroupId ? model?.groups.get(resolvedGroupId) : void 0;
   const animation = group?.animation;
-  const handleEntranceChange = useCallback122(
+  const handleEntranceChange = useCallback123(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "entrance", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleHighlightChange = useCallback122(
+  const handleHighlightChange = useCallback123(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "highlight", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleExitChange = useCallback122(
+  const handleExitChange = useCallback123(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "exit", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleApplyToAll = useCallback122(() => {
+  const handleApplyToAll = useCallback123(() => {
     if (animation) applyAnimationToAll(animation);
   }, [animation, applyAnimationToAll]);
   if (!group || !resolvedGroupId || !animation) {
@@ -63695,7 +63880,7 @@ var CaptionPropertyPanel = memo43(function CaptionPropertyPanel2({
     ...groupStyle,
     ...segmentOverrides
   };
-  const applyToIframeDom = useCallback123(
+  const applyToIframeDom = useCallback124(
     (updates) => {
       const iframe = iframeRef.current;
       if (!iframe || !model) return;
@@ -63769,7 +63954,7 @@ var CaptionPropertyPanel = memo43(function CaptionPropertyPanel2({
     },
     [iframeRef, model, selectedSegmentIds]
   );
-  const handleStyleChange = useCallback123(
+  const handleStyleChange = useCallback124(
     (updates) => {
       if (selectedGroupId) {
         updateGroupStyle(selectedGroupId, updates);
@@ -63869,7 +64054,7 @@ var CaptionPropertyPanel = memo43(function CaptionPropertyPanel2({
 });
 
 // src/components/editor/BlockParamsPanel.tsx
-import { memo as memo44, useState as useState113, useCallback as useCallback124 } from "react";
+import { memo as memo44, useState as useState113, useCallback as useCallback125 } from "react";
 import { jsx as jsx153, jsxs as jsxs130 } from "react/jsx-runtime";
 var BlockParamsPanel = memo44(function BlockParamsPanel2({
   blockTitle,
@@ -63884,7 +64069,7 @@ var BlockParamsPanel = memo44(function BlockParamsPanel2({
     }
     return initial;
   });
-  const handleChange = useCallback124((key, value) => {
+  const handleChange = useCallback125((key, value) => {
     setValues((prev) => ({ ...prev, [key]: value }));
   }, []);
   return /* @__PURE__ */ jsxs130("div", { className: "flex flex-col h-full", children: [
@@ -63997,7 +64182,7 @@ function ParamControl({
 import { memo as memo46, useState as useState115, useRef as useRef126, useEffect as useEffect99, useId as useId6 } from "react";
 
 // src/components/renders/RenderQueueItem.tsx
-import { memo as memo45, useCallback as useCallback125, useState as useState114 } from "react";
+import { memo as memo45, useCallback as useCallback126, useState as useState114 } from "react";
 import { Fragment as Fragment48, jsx as jsx154, jsxs as jsxs131 } from "react/jsx-runtime";
 function formatDuration2(ms) {
   if (ms < 1e3) return `${ms}ms`;
@@ -64020,10 +64205,10 @@ var RenderQueueItem = memo45(function RenderQueueItem2({
   const [videoReady, setVideoReady] = useState114(false);
   const [confirmingDelete, setConfirmingDelete] = useState114(false);
   const fileSrc = `/api/projects/${projectId}/renders/file/${job.filename}`;
-  const handleOpen = useCallback125(() => {
+  const handleOpen = useCallback126(() => {
     window.open(fileSrc, "_blank");
   }, [fileSrc]);
-  const handleDownload = useCallback125(
+  const handleDownload = useCallback126(
     (e) => {
       e.stopPropagation();
       const a = document.createElement("a");
@@ -64607,11 +64792,11 @@ var RenderQueue = memo46(function RenderQueue2({
 });
 
 // src/components/panels/SlideshowPanel.tsx
-import { useState as useState117, useEffect as useEffect100, useCallback as useCallback127, useRef as useRef127 } from "react";
+import { useState as useState117, useEffect as useEffect100, useCallback as useCallback128, useRef as useRef127 } from "react";
 import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
-import { useState as useState116, useCallback as useCallback126, useId as useId7 } from "react";
+import { useState as useState116, useCallback as useCallback127, useId as useId7 } from "react";
 import { jsx as jsx156, jsxs as jsxs133 } from "react/jsx-runtime";
 function SectionHeader({
   children,
@@ -64796,7 +64981,7 @@ function BranchTree({
 }) {
   const [newLabel, setNewLabel] = useState116("");
   const inputId = useId7();
-  const handleCreate = useCallback126(() => {
+  const handleCreate = useCallback127(() => {
     const label = newLabel.trim();
     if (!label) return;
     onCreateSequence(label);
@@ -64857,7 +65042,7 @@ function BranchItem({
 }) {
   const [editing, setEditing] = useState116(false);
   const [draft, setDraft] = useState116(seq.label);
-  const commitRename = useCallback126(() => {
+  const commitRename = useCallback127(() => {
     const label = draft.trim();
     if (label && label !== seq.label) onRename(seq.id, label);
     setEditing(false);
@@ -64955,7 +65140,7 @@ function HotspotTool({
   const selectedElementId = domEditSelection?.element?.id ?? null;
   const selectedHfId = domEditSelection?.hfId ?? null;
   const elementKey2 = selectedElementId || selectedHfId;
-  const handleMakeHotspot = useCallback126(() => {
+  const handleMakeHotspot = useCallback127(() => {
     if (!selectedSceneId || !targetSequenceId || !elementKey2) return;
     const id = `hotspot-${elementKey2}-${generateId()}`;
     const label = hotspotLabel.trim() || elementKey2;
@@ -65259,7 +65444,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     manifestRef.current = parsed;
     setSelectedSequenceId(null);
   }, [compHtml]);
-  const applyManifest = useCallback127(
+  const applyManifest = useCallback128(
     async (next) => {
       const merged = notesCtrlRef.current.mergeIntoDiscrete(next);
       setManifest(merged);
@@ -65272,7 +65457,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [onPersist]
   );
-  const applyNotesManifest = useCallback127(
+  const applyNotesManifest = useCallback128(
     (next) => {
       setManifest(next);
       manifestRef.current = next;
@@ -65286,7 +65471,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
       ctrl.flush();
     };
   }, []);
-  const toggleSection = useCallback127((key) => {
+  const toggleSection = useCallback128((key) => {
     setExpandedSections((prev) => {
       const next = new Set(prev);
       if (next.has(key)) {
@@ -65300,25 +65485,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 = useCallback127((sequenceId, sceneId) => {
+  const handleSelectBranchSlide = useCallback128((sequenceId, sceneId) => {
     setSelectedSceneId(sceneId);
     setSelectedSequenceId(sequenceId);
   }, []);
-  const handleToggleSlide = useCallback127(
+  const handleToggleSlide = useCallback128(
     (sceneId) => {
       applyManifest(toggleMainLineSlide(manifestRef.current, sceneId)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleReorder = useCallback127(
+  const handleReorder = useCallback128(
     (sceneId, dir) => {
       applyManifest(reorderMainLineSlide(manifestRef.current, sceneId, dir)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleSetNotes = useCallback127(
+  const handleSetNotes = useCallback128(
     (notes) => {
       if (!selectedSceneId) return;
       applyNotesManifest(
@@ -65327,7 +65512,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSceneId, selectedSequenceId, applyNotesManifest]
   );
-  const handleMarkFragment = useCallback127(() => {
+  const handleMarkFragment = useCallback128(() => {
     if (!selectedSceneId) return;
     applyManifest(
       addFragment(
@@ -65339,7 +65524,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     ).catch(() => {
     });
   }, [selectedSceneId, selectedSequenceId, currentTime, applyManifest]);
-  const handleRemoveFragment = useCallback127(
+  const handleRemoveFragment = useCallback128(
     (time) => {
       if (!selectedSceneId) return;
       applyManifest(
@@ -65349,7 +65534,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSceneId, selectedSequenceId, applyManifest]
   );
-  const handleCreateSequence = useCallback127(
+  const handleCreateSequence = useCallback128(
     (label) => {
       const id = `seq-${generateId()}`;
       applyManifest(createSequence(manifestRef.current, id, label)).catch(() => {
@@ -65357,14 +65542,14 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleRenameSequence = useCallback127(
+  const handleRenameSequence = useCallback128(
     (id, label) => {
       applyManifest(renameSequence(manifestRef.current, id, label)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleDeleteSequence = useCallback127(
+  const handleDeleteSequence = useCallback128(
     (id) => {
       const seq = (manifestRef.current.slideSequences ?? []).find((s) => s.id === id);
       const count = seq?.slides.length ?? 0;
@@ -65378,7 +65563,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleAssign = useCallback127(
+  const handleAssign = useCallback128(
     (sequenceId, sceneId, assign) => {
       applyManifest(assignToBranch(manifestRef.current, sequenceId, sceneId, assign)).catch(
         () => {
@@ -65387,7 +65572,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleAddHotspot = useCallback127(
+  const handleAddHotspot = useCallback128(
     (sceneId, hotspot) => {
       applyManifest(
         addHotspot(manifestRef.current, sceneId, hotspot, selectedSequenceId ?? void 0)
@@ -65396,7 +65581,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSequenceId, applyManifest]
   );
-  const handleRemoveHotspot = useCallback127(
+  const handleRemoveHotspot = useCallback128(
     (sceneId, hotspotId) => {
       applyManifest(
         removeHotspot(manifestRef.current, sceneId, hotspotId, selectedSequenceId ?? void 0)
@@ -65500,10 +65685,10 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo47, useCallback as useCallback131, useEffect as useEffect102, useMemo as useMemo48, useState as useState121 } from "react";
+import { memo as memo47, useCallback as useCallback132, useEffect as useEffect102, useMemo as useMemo48, useState as useState121 } from "react";
 
 // src/hooks/useVariablesPersist.ts
-import { useCallback as useCallback128 } from "react";
+import { useCallback as useCallback129 } from "react";
 function useVariablesPersist({
   sdkSession,
   activeCompPath,
@@ -65514,7 +65699,7 @@ function useVariablesPersist({
   domEditSaveTimestampRef,
   publishSdkSession
 }) {
-  return useCallback128(
+  return useCallback129(
     async (label, mutate) => {
       if (!sdkSession) return false;
       const path = activeCompPath ?? "index.html";
@@ -65551,10 +65736,10 @@ function useVariablesPersist({
 }
 
 // src/components/panels/VariablesOtherCompositions.tsx
-import { useCallback as useCallback130, useState as useState120 } from "react";
+import { useCallback as useCallback131, useState as useState120 } from "react";
 
 // src/hooks/useProjectCompositionVariables.ts
-import { useCallback as useCallback129, useEffect as useEffect101, useState as useState118 } from "react";
+import { useCallback as useCallback130, useEffect as useEffect101, useState as useState118 } from "react";
 import { openComposition as openComposition4 } from "@hyperframes/sdk";
 async function readGroup(path, readProjectFile) {
   let content;
@@ -65597,7 +65782,7 @@ function useProjectCompositionVariables(fileTree, excludePath, readProjectFile,
 }
 function useEditVariablesInFile(deps) {
   const { readProjectFile, writeProjectFile, recordEdit, reloadPreview, domEditSaveTimestampRef } = deps;
-  return useCallback129(
+  return useCallback130(
     async (path, label, mutate) => {
       const originalContent = await readProjectFile(path);
       await persistSdkSerialize(
@@ -65977,7 +66162,7 @@ function VariablesOtherCompositions({
     domEditSaveTimestampRef
   });
   const [editingKey, setEditingKey] = useState120(null);
-  const onSave = useCallback130(
+  const onSave = useCallback131(
     (path, decl) => {
       setEditingKey(null);
       void editInFile(
@@ -65988,7 +66173,7 @@ function VariablesOtherCompositions({
     },
     [editInFile]
   );
-  const onRemove = useCallback130(
+  const onRemove = useCallback131(
     (path, id) => {
       void editInFile(
         path,
@@ -66224,7 +66409,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
   );
-  const copyToClipboard = useCallback131(
+  const copyToClipboard = useCallback132(
     (text, what) => {
       void copyTextToClipboard(text).then(
         (ok) => showToast(
@@ -66235,7 +66420,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [showToast]
   );
-  const dropPreviewOverride = useCallback131(
+  const dropPreviewOverride = useCallback132(
     (id) => {
       if (previewValues && id in previewValues) {
         const next = { ...previewValues };
@@ -66245,7 +66430,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [previewValues, setPreviewValues]
   );
-  const commitPreviewValue = useCallback131(
+  const commitPreviewValue = useCallback132(
     (id, value, declDefault) => {
       const next = { ...previewValues ?? {} };
       if (JSON.stringify(value) === JSON.stringify(declDefault)) {
@@ -66258,7 +66443,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [previewValues, setPreviewValues, reloadPreview]
   );
-  const runSchemaEdit = useCallback131(
+  const runSchemaEdit = useCallback132(
     async (label, mutate) => {
       try {
         const changed = await persistVariables(label, mutate);
@@ -66272,7 +66457,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [persistVariables, showToast]
   );
-  const handleAdd = useCallback131(
+  const handleAdd = useCallback132(
     (decl) => {
       if (!sdkSession) return;
       const check = sdkSession.can({ type: "declareVariable", declaration: decl });
@@ -66285,7 +66470,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [sdkSession, runSchemaEdit, showToast]
   );
-  const handleUpdate = useCallback131(
+  const handleUpdate = useCallback132(
     (decl) => {
       if (!sdkSession) return;
       const check = sdkSession.can({
@@ -66305,7 +66490,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [sdkSession, runSchemaEdit, showToast]
   );
-  const handleRemove = useCallback131(
+  const handleRemove = useCallback132(
     (id) => {
       if (!sdkSession) return;
       const check = sdkSession.can({ type: "removeVariableDeclaration", id });
@@ -66321,18 +66506,18 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [sdkSession, runSchemaEdit, dropPreviewOverride, showToast]
   );
-  const handleSetDefault = useCallback131(
+  const handleSetDefault = useCallback132(
     (id, value) => {
       void runSchemaEdit(`Set default for "${id}"`, (s) => s.setVariableValue(id, value));
       dropPreviewOverride(id);
     },
     [runSchemaEdit, dropPreviewOverride]
   );
-  const resetPreview = useCallback131(() => {
+  const resetPreview = useCallback132(() => {
     setPreviewValues(null);
     reloadPreview();
   }, [setPreviewValues, reloadPreview]);
-  const handleBind = useCallback131(
+  const handleBind = useCallback132(
     // Guard chain (session, selection, type-compat) — one branch per guard.
     // fallow-ignore-next-line complexity
     (action, id) => {
@@ -66465,7 +66650,7 @@ function PanelTabButton({
 }
 
 // src/hooks/useSlideshowPersist.ts
-import { useCallback as useCallback132 } from "react";
+import { useCallback as useCallback133 } from "react";
 
 // src/utils/setSlideshowManifest.ts
 import {
@@ -66523,7 +66708,7 @@ function useSlideshowPersist({
   publishSdkSession,
   coalesceKey
 }) {
-  return useCallback132(
+  return useCallback133(
     async (manifest) => {
       if (!sdkSession) return;
       const path = activeCompPath ?? "index.html";
@@ -66588,7 +66773,7 @@ function useSlideshowTabState(params) {
 }
 
 // src/components/DesignPanelPromoteProvider.tsx
-import { useCallback as useCallback133 } from "react";
+import { useCallback as useCallback134 } from "react";
 import { jsx as jsx163 } from "react/jsx-runtime";
 function DesignPanelPromoteProvider({
   selection,
@@ -66607,7 +66792,7 @@ function DesignPanelPromoteProvider({
     publishSdkSession: handle.publish,
     activeCompPath: targetPath
   });
-  const persist2 = useCallback133(
+  const persist2 = useCallback134(
     async (label, mutate) => {
       const committed = await rawPersist(label, mutate);
       if (committed) forceReloadSharedSdkSession?.();
@@ -66615,7 +66800,7 @@ function DesignPanelPromoteProvider({
     },
     [rawPersist, forceReloadSharedSdkSession]
   );
-  const handlePersistError = useCallback133(
+  const handlePersistError = useCallback134(
     (error) => showToast(getStudioSaveErrorMessage(error), "error"),
     [showToast]
   );
@@ -66850,14 +67035,14 @@ async function applyColorGradingScopeUpdate({
 }
 
 // src/hooks/useInspectorSplitResize.ts
-import { useCallback as useCallback134, useRef as useRef128, useState as useState122 } from "react";
+import { useCallback as useCallback135, useRef as useRef128, useState as useState122 } from "react";
 var MIN_INSPECTOR_SPLIT_PERCENT = 20;
 var MAX_INSPECTOR_SPLIT_PERCENT = 75;
 function useInspectorSplitResize() {
   const [layersPanePercent, setLayersPanePercent] = useState122(40);
   const splitContainerRef = useRef128(null);
   const splitDragRef = useRef128(null);
-  const handleInspectorSplitResizeStart = useCallback134(
+  const handleInspectorSplitResizeStart = useCallback135(
     (event) => {
       event.preventDefault();
       event.currentTarget.setPointerCapture(event.pointerId);
@@ -66870,7 +67055,7 @@ function useInspectorSplitResize() {
     },
     [layersPanePercent]
   );
-  const handleInspectorSplitResizeMove = useCallback134((event) => {
+  const handleInspectorSplitResizeMove = useCallback135((event) => {
     const drag = splitDragRef.current;
     if (!drag || drag.height <= 0) return;
     const deltaPercent = (event.clientY - drag.startY) / drag.height * 100;
@@ -66880,7 +67065,7 @@ function useInspectorSplitResize() {
     );
     setLayersPanePercent(next);
   }, []);
-  const handleInspectorSplitResizeEnd = useCallback134(() => {
+  const handleInspectorSplitResizeEnd = useCallback135(() => {
     splitDragRef.current = null;
   }, []);
   return {
@@ -66970,6 +67155,7 @@ function StudioRightPanel({
     handleUpdateArcSegment,
     handleUnroll,
     handleUpdateKeyframeEase,
+    handleUpdateSegmentEase,
     handleSetAllKeyframeEases,
     handleGsapAddKeyframe,
     handleGsapRemoveKeyframe,
@@ -67044,7 +67230,7 @@ function StudioRightPanel({
     }
     toggleRightInspectorPane(pane);
   };
-  const handleApplyColorGradingScope = useCallback135(
+  const handleApplyColorGradingScope = useCallback136(
     async (scope, value) => applyColorGradingScopeUpdate({
       scope,
       value,
@@ -67079,7 +67265,7 @@ function StudioRightPanel({
       writeProjectFile
     ]
   );
-  const handleRemoveBackground = useCallback135(
+  const handleRemoveBackground = useCallback136(
     // fallow-ignore-next-line complexity
     async (inputPath, options) => {
       const response = await fetch(
@@ -67191,6 +67377,7 @@ function StudioRightPanel({
           onUnroll: handleUnroll,
           onUpdateKeyframeEase: handleUpdateKeyframeEase,
           onSetAllKeyframeEases: handleSetAllKeyframeEases,
+          onUpdateSegmentEase: handleUpdateSegmentEase,
           recordingState,
           recordingDuration,
           onToggleRecording
@@ -67389,7 +67576,7 @@ import { useEffect as useEffect106, useRef as useRef130 } from "react";
 import { Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
 
 // src/hooks/useEnableKeyframes.ts
-import { useCallback as useCallback136 } from "react";
+import { useCallback as useCallback137 } from "react";
 var enableKeyframesTransactionCounter = 0;
 function animatedProps(anim) {
   if (!anim) return ["x", "y"];
@@ -67642,7 +67829,7 @@ async function applyArcKeyframeAtPlayhead(session, sel, arcAnim, t, iframe) {
   );
 }
 function useEnableKeyframes(sessionRef) {
-  return useCallback136(async () => {
+  return useCallback137(async () => {
     const session = sessionRef.current;
     if (!session) return;
     const sel = session.domEditSelection;
@@ -67724,7 +67911,7 @@ function useEnableKeyframes(sessionRef) {
 }
 
 // src/hooks/useKeyframeKeyboard.ts
-import { useEffect as useEffect105, useCallback as useCallback137 } from "react";
+import { useEffect as useEffect105, useCallback as useCallback138 } from "react";
 function isTextInput(el) {
   if (!el) return false;
   const tag = el.tagName;
@@ -67741,7 +67928,7 @@ function useKeyframeKeyboard({
   onToggleExpand,
   onNudgeKeyframe
 }) {
-  const handler = useCallback137(
+  const handler = useCallback138(
     (e) => {
       if (!enabled2) return;
       if (isTextInput(document.activeElement)) return;
@@ -68134,7 +68321,7 @@ import { useState as useState130 } from "react";
 import { Copy as Copy2, Check as Check2 } from "@phosphor-icons/react";
 
 // src/hooks/useStoryboard.ts
-import { useCallback as useCallback138, useEffect as useEffect107, useRef as useRef131, useState as useState123 } from "react";
+import { useCallback as useCallback139, useEffect as useEffect107, useRef as useRef131, useState as useState123 } from "react";
 function useStoryboard(projectId) {
   const [data, setData] = useState123(null);
   const [loading, setLoading] = useState123(true);
@@ -68142,7 +68329,7 @@ function useStoryboard(projectId) {
   const [reloadKey, setReloadKey] = useState123(0);
   const hasDataRef = useRef131(false);
   const lastProjectRef = useRef131(null);
-  const reload = useCallback138(() => setReloadKey((k) => k + 1), []);
+  const reload = useCallback139(() => setReloadKey((k) => k + 1), []);
   useEffect107(() => {
     if (!projectId) return;
     let cancelled = false;
@@ -68452,7 +68639,7 @@ function StoryboardScriptPanel({ script }) {
 }
 
 // src/components/storyboard/StoryboardSourceEditor.tsx
-import { useCallback as useCallback139, useEffect as useEffect110, useMemo as useMemo50, useRef as useRef133, useState as useState125 } from "react";
+import { useCallback as useCallback140, useEffect as useEffect110, useMemo as useMemo50, useRef as useRef133, useState as useState125 } from "react";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { jsx as jsx171, jsxs as jsxs143 } from "react/jsx-runtime";
@@ -68482,7 +68669,7 @@ function useEditableFile(path, onSaved) {
       cancelled = true;
     };
   }, [path, readProjectFile]);
-  const save = useCallback139(() => {
+  const save = useCallback140(() => {
     if (saving) return;
     setSaving(true);
     setError(null);
@@ -68607,7 +68794,7 @@ function StoryboardSourceEditor({
 }
 
 // src/components/storyboard/StoryboardFrameFocus.tsx
-import { useCallback as useCallback140, useEffect as useEffect112, useState as useState127 } from "react";
+import { useCallback as useCallback141, useEffect as useEffect112, useState as useState127 } from "react";
 import { setFrameVoiceover } from "@hyperframes/core/storyboard";
 
 // src/components/storyboard/AgentChatMessageButton.tsx
@@ -68667,7 +68854,7 @@ function StoryboardFrameFocus({
   const [savedVoiceover, setSavedVoiceover] = useState127(frame.voiceover ?? "");
   const [busy, setBusy] = useState127(false);
   const [error, setError] = useState127(null);
-  const applyEdit = useCallback140(
+  const applyEdit = useCallback141(
     async (edit) => {
       if (busy) return false;
       setBusy(true);
@@ -68689,7 +68876,7 @@ function StoryboardFrameFocus({
   const title = frame.title ?? `Frame ${frame.index}`;
   const dirty = draft !== savedVoiceover;
   const canOpenPreview = frame.status !== "outline" && frame.srcExists && Boolean(frame.src);
-  const saveVoiceover = useCallback140(async () => {
+  const saveVoiceover = useCallback141(async () => {
     const saved = await applyEdit((src) => setFrameVoiceover(src, frame.index, draft));
     if (saved) setSavedVoiceover(draft);
   }, [applyEdit, frame.index, draft]);
@@ -68701,7 +68888,7 @@ function StoryboardFrameFocus({
     window.addEventListener("beforeunload", onBeforeUnload);
     return () => window.removeEventListener("beforeunload", onBeforeUnload);
   }, [dirty]);
-  const confirmLeave = useCallback140(
+  const confirmLeave = useCallback141(
     () => !dirty || window.confirm("Discard unsaved voiceover changes?"),
     [dirty]
   );
@@ -69184,7 +69371,7 @@ function progressLabel(summary) {
 }
 
 // src/components/storyboard/useFrameComments.ts
-import { useCallback as useCallback141, useEffect as useEffect113, useMemo as useMemo51, useState as useState128 } from "react";
+import { useCallback as useCallback142, useEffect as useEffect113, useMemo as useMemo51, useState as useState128 } from "react";
 
 // src/components/storyboard/frameComments.ts
 var FRAME_COMMENTS_PATH = ".hyperframes/frame-comments.json";
@@ -69250,7 +69437,7 @@ function useFrameComments(frames) {
   const [submitState, setSubmitState] = useState128("idle");
   const [submitError, setSubmitError] = useState128(null);
   const [pending, setPending] = useState128(null);
-  const refreshPending = useCallback141(async () => {
+  const refreshPending = useCallback142(async () => {
     try {
       const parsed = parseCommentsFile(await readOptionalProjectFile(FRAME_COMMENTS_PATH));
       setPending(parsed && parsed.comments.length > 0 ? parsed.comments : null);
@@ -69263,14 +69450,14 @@ function useFrameComments(frames) {
     window.addEventListener("focus", onFocus);
     return () => window.removeEventListener("focus", onFocus);
   }, [refreshPending]);
-  const setDraft = useCallback141((index, text) => {
+  const setDraft = useCallback142((index, text) => {
     setDrafts((prev) => ({ ...prev, [index]: text }));
   }, []);
   const draftCount = useMemo51(
     () => Object.values(drafts).filter((text) => text.trim().length > 0).length,
     [drafts]
   );
-  const submit = useCallback141(async () => {
+  const submit = useCallback142(async () => {
     if (draftCount === 0 || submitState === "saving") return false;
     setSubmitState("saving");
     setSubmitError(null);
@@ -69723,12 +69910,12 @@ function useServerConnection() {
 }
 
 // src/hooks/useTimelineAddAtPlayhead.ts
-import { useCallback as useCallback142 } from "react";
+import { useCallback as useCallback143 } from "react";
 function useTimelineAddAtPlayhead(addAsset, addComposition) {
   const placement = () => ({ start: usePlayerStore.getState().currentTime, track: 0 });
   return {
-    addAssetAtPlayhead: useCallback142((path) => addAsset(path, placement()), [addAsset]),
-    addCompositionAtPlayhead: useCallback142(
+    addAssetAtPlayhead: useCallback143((path) => addAsset(path, placement()), [addAsset]),
+    addCompositionAtPlayhead: useCallback143(
       (path) => addComposition(path, placement()),
       [addComposition]
     )
@@ -69784,7 +69971,7 @@ function StudioApp() {
   const handleDomZIndexReorderCommitRef = useRef134(null);
   const pendingTimelineEditPathRef = useRef134(/* @__PURE__ */ new Set());
   const isGestureRecordingRef = useRef134(false);
-  const reloadPreview = useCallback143(() => setRefreshKey((k) => k + 1), []);
+  const reloadPreview = useCallback144(() => setRefreshKey((k) => k + 1), []);
   const fileManager = useFileManager({
     projectId,
     showToast,
@@ -69826,7 +70013,7 @@ function StudioApp() {
   });
   const invalidateGsapCacheRef = useRef134(() => {
   });
-  const invalidateGsapCache = useCallback143(() => invalidateGsapCacheRef.current(), []);
+  const invalidateGsapCache = useCallback144(() => invalidateGsapCacheRef.current(), []);
   const timelineEditing = useTimelineEditing({
     projectId,
     activeCompPath,
@@ -69847,7 +70034,7 @@ function StudioApp() {
     invalidateGsapCache,
     handleDomZIndexReorderCommitRef
   });
-  const handleTimelineElementsMove = useCallback143(
+  const handleTimelineElementsMove = useCallback144(
     async (edits, coalesceKey, operation = "timing", coalesceMs) => {
       const deps = { handleTimelineGroupMove: timelineEditing.handleTimelineGroupMove };
       await persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps, coalesceMs);
@@ -70043,7 +70230,7 @@ function StudioApp() {
     }
     canvasRectRef.current = previewIframe.getBoundingClientRect();
   }, [gestureState, previewIframe]);
-  const handlePreviewIframeRef = useCallback143(
+  const handlePreviewIframeRef = useCallback144(
     (iframe) => {
       previewIframeRef.current = iframe;
       setPreviewIframe(iframe);
@@ -70267,32 +70454,32 @@ function StudioApp() {
 }
 
 // src/hooks/useElementPicker.ts
-import { useState as useState133, useCallback as useCallback144, useRef as useRef135 } from "react";
+import { useState as useState133, useCallback as useCallback145, useRef as useRef135 } from "react";
 function useElementPicker(iframeRef, options) {
   const [isPickMode, setIsPickMode] = useState133(false);
   const [pickedElement, setPickedElement] = useState133(null);
   const activeOverrideRef = useRef135(null);
-  const getActiveIframe = useCallback144(() => {
+  const getActiveIframe = useCallback145(() => {
     return activeOverrideRef.current ?? iframeRef.current;
   }, [iframeRef]);
-  const setActiveIframe = useCallback144((el) => {
+  const setActiveIframe = useCallback145((el) => {
     activeOverrideRef.current = el;
   }, []);
-  const enablePick = useCallback144(() => {
+  const enablePick = useCallback145(() => {
     try {
       postRuntimeControlMessage(getActiveIframe()?.contentWindow, "enable-pick-mode");
       setIsPickMode(true);
     } catch {
     }
   }, [getActiveIframe]);
-  const disablePick = useCallback144(() => {
+  const disablePick = useCallback145(() => {
     try {
       postRuntimeControlMessage(getActiveIframe()?.contentWindow, "disable-pick-mode");
     } catch {
     }
     setIsPickMode(false);
   }, [getActiveIframe]);
-  const clearPick = useCallback144(() => {
+  const clearPick = useCallback145(() => {
     setPickedElement(null);
   }, []);
   useMountEffect(() => {
@@ -70347,7 +70534,7 @@ function useElementPicker(iframeRef, options) {
   });
   const optionsRef = useRef135(options);
   optionsRef.current = options;
-  const syncToSource = useCallback144(
+  const syncToSource = useCallback145(
     (elementId, selector, op) => {
       const opts = optionsRef.current;
       if (!opts?.workspaceFiles || !opts.onSyncFiles || !elementId) return;
@@ -70363,7 +70550,7 @@ function useElementPicker(iframeRef, options) {
     },
     []
   );
-  const setStyle = useCallback144(
+  const setStyle = useCallback145(
     (prop, value) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -70405,7 +70592,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const setDataAttr = useCallback144(
+  const setDataAttr = useCallback145(
     (attr, value) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -70433,7 +70620,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const setTextContent = useCallback144(
+  const setTextContent = useCallback145(
     (text) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;