@hyperframes/studio 0.8.133 → 0.8.134

package/dist/index.js

@@ -9465,15 +9465,24 @@ function focusedField() {
 function hasStudioPendingEdits() {
   return pendingEdits.size > 0 || focusedField() !== null;
 }
+var shownRestores = /* @__PURE__ */ new Set();
+function beginStudioShownRestore() {
+  let end = () => {
+  };
+  const landed = new Promise((resolve) => end = resolve);
+  shownRestores.add(landed);
+  void landed.then(() => shownRestores.delete(landed));
+  return end;
+}
 function isStudioEditSaving() {
-  return pendingEdits.size > 0;
+  return pendingEdits.size > 0 || shownRestores.size > 0;
 }
 function afterStudioPendingEdits(run) {
   let waiting = true;
   const check = () => {
     if (!waiting) return;
     if (isStudioEditSaving()) {
-      void Promise.allSettled([...pendingEdits.keys()]).then(check);
+      void Promise.allSettled([...pendingEdits.keys(), ...shownRestores]).then(check);
       return;
     }
     waiting = false;
@@ -17122,6 +17131,12 @@ function setElementGsapScale(element, x, y) {
   gsap3.set(element, { scaleX: x, scaleY: y });
   return true;
 }
+function setElementGsapSize(element, width, height) {
+  const gsap3 = gsapOf(element);
+  if (!gsap3?.set) return false;
+  gsap3.set(element, { width, height });
+  return true;
+}
 function elementTargets(tween) {
   return (tween.targets?.() ?? []).filter(
     (t2) => Boolean(t2?.style && t2.nodeType)
@@ -30342,9 +30357,12 @@ var gestureSaves = /* @__PURE__ */ new WeakMap();
 function studioManualEditSavesIn(doc) {
   return gestureSaves.get(doc) ?? 0;
 }
+function countStudioPreviewChange(doc) {
+  gestureSaves.set(doc, studioManualEditSavesIn(doc) + 1);
+}
 function countStudioManualEditSave(element, save) {
   const doc = element.ownerDocument;
-  const count = () => void gestureSaves.set(doc, studioManualEditSavesIn(doc) + 1);
+  const count = () => countStudioPreviewChange(doc);
   count();
   const result = save();
   void Promise.resolve(result).then(count, count);
@@ -37412,22 +37430,31 @@ function readCssRotation(element, withRotate = true) {
     return angle(transform);
   }
 }
-function computeDraggedGsapPosition(element, studioOffset, fallbackBase) {
+function readDragStamp(element) {
+  const read2 = (name) => Number.parseFloat(element.getAttribute(name) ?? "");
+  return {
+    origX: read2("data-hf-drag-initial-offset-x") || 0,
+    origY: read2("data-hf-drag-initial-offset-y") || 0,
+    baseX: read2("data-hf-drag-gsap-base-x"),
+    baseY: read2("data-hf-drag-gsap-base-y")
+  };
+}
+var freezeDragStamp = (element) => ({
+  ...readDragStamp(element),
+  frozen: true
+});
+function computeDraggedGsapPosition(element, studioOffset, fallbackBase, stamp = readDragStamp(element)) {
   const rotStyle = element.style.getPropertyValue("--hf-studio-rotation");
   const rotDeg = Number.parseFloat(rotStyle) || 0;
   const rad = -rotDeg * Math.PI / 180;
   const cos = Math.cos(rad);
   const sin = Math.sin(rad);
-  const origX = Number.parseFloat(element.getAttribute("data-hf-drag-initial-offset-x") ?? "") || 0;
-  const origY = Number.parseFloat(element.getAttribute("data-hf-drag-initial-offset-y") ?? "") || 0;
-  const deltaX = studioOffset.x - origX;
-  const deltaY = studioOffset.y - origY;
+  const deltaX = studioOffset.x - stamp.origX;
+  const deltaY = studioOffset.y - stamp.origY;
   const adjX = deltaX * cos - deltaY * sin;
   const adjY = deltaX * sin + deltaY * cos;
-  const parsedBaseX = Number.parseFloat(element.getAttribute("data-hf-drag-gsap-base-x") ?? "");
-  const parsedBaseY = Number.parseFloat(element.getAttribute("data-hf-drag-gsap-base-y") ?? "");
-  const baseGsapX = Number.isFinite(parsedBaseX) ? parsedBaseX : fallbackBase.x;
-  const baseGsapY = Number.isFinite(parsedBaseY) ? parsedBaseY : fallbackBase.y;
+  const baseGsapX = Number.isFinite(stamp.baseX) ? stamp.baseX : fallbackBase.x;
+  const baseGsapY = Number.isFinite(stamp.baseY) ? stamp.baseY : fallbackBase.y;
   return {
     newX: roundTo3(baseGsapX + adjX),
     newY: roundTo3(baseGsapY + adjY),
@@ -37435,10 +37462,10 @@ function computeDraggedGsapPosition(element, studioOffset, fallbackBase) {
     baseGsapY
   };
 }
-function restoreDragOffset(element) {
-  const origin2 = (axis) => Number.parseFloat(element.getAttribute(`data-hf-drag-initial-offset-${axis}`) ?? "") || 0;
-  element.style.setProperty("--hf-studio-offset-x", `${origin2("x")}px`);
-  element.style.setProperty("--hf-studio-offset-y", `${origin2("y")}px`);
+function restoreDragOffset(element, stamp = readDragStamp(element)) {
+  if (stamp.frozen) return;
+  element.style.setProperty("--hf-studio-offset-x", `${stamp.origX}px`);
+  element.style.setProperty("--hf-studio-offset-y", `${stamp.origY}px`);
   element.removeAttribute("data-hf-drag-initial-offset-x");
   element.removeAttribute("data-hf-drag-initial-offset-y");
 }
@@ -37512,6 +37539,12 @@ function readTranslatePx(el) {
     y: evaluateLength(y, side("height", "top", "bottom"))
   };
 }
+function readTranslatePxLeavingPercent(el) {
+  const value = el.ownerDocument.defaultView?.getComputedStyle(el).translate || "none";
+  const [x = "0px", y = "0px"] = value === "none" ? [] : splitTopLevelWhitespace(value);
+  const px = (part) => roundTo3(evaluateLength(part, 0)) || 0;
+  return { x: px(x), y: px(y) };
+}
 var UNREADABLE_TRANSLATE = "Studio can't read this layer's translate. Move it in the Code tab.";
 function formatTranslatePx(p) {
   return `${roundTo3(p.x)}px ${roundTo3(p.y)}px`;
@@ -45740,7 +45773,12 @@ function refuseStepListRewrite(anim) {
   if (step) throw new GsapEditBlockedError("keyframes-uneditable", step);
 }
 async function commitStaticGsapPosition(selection, studioOffset, gsapPos, selector, existingSet, callbacks) {
-  const { newX, newY } = computeDraggedGsapPosition(selection.element, studioOffset, gsapPos);
+  const { newX, newY } = computeDraggedGsapPosition(
+    selection.element,
+    studioOffset,
+    gsapPos,
+    callbacks.stamp
+  );
   if (existingSet) {
     if (existingSet.keyframes) {
       await replaceKeyframedPositionHold(
@@ -45859,21 +45897,16 @@ async function commitStaticGsapSize(selection, size, selector, existingSet, call
 }
 async function commitWholePathOffset(selection, anim, studioOffset, gsapPos, iframe, selector, callbacks) {
   const el = selection.element;
+  const stamp = callbacks.stamp ?? readDragStamp(el);
   const { newX, newY, baseGsapX, baseGsapY } = computeDraggedGsapPosition(
     el,
     studioOffset,
-    gsapPos
+    gsapPos,
+    stamp
   );
   const deltaX = newX - baseGsapX;
   const deltaY = newY - baseGsapY;
-  const origX = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-x") ?? "") || 0;
-  const origY = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-y") ?? "") || 0;
-  const restoreOffset = () => {
-    el.style.setProperty("--hf-studio-offset-x", `${origX}px`);
-    el.style.setProperty("--hf-studio-offset-y", `${origY}px`);
-    el.removeAttribute("data-hf-drag-initial-offset-x");
-    el.removeAttribute("data-hf-drag-initial-offset-y");
-  };
+  const restoreOffset = () => restoreDragOffset(el, stamp);
   let effectiveAnim = anim;
   if (anim.keyframes) {
     refuseStepListRewrite(anim);
@@ -47811,19 +47844,14 @@ function gsapPositionFromDragOutcome(selection, anim, studioOffset, gsapPos, ifr
 }
 async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos, iframe, callbacks) {
   const el = selection.element;
+  const stamp = callbacks.stamp ?? readDragStamp(el);
   const { newX, newY, baseGsapX, baseGsapY } = computeDraggedGsapPosition(
     el,
     studioOffset,
-    gsapPos
+    gsapPos,
+    stamp
   );
-  const origX = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-x") ?? "") || 0;
-  const origY = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-y") ?? "") || 0;
-  const restoreOffset = () => {
-    el.style.setProperty("--hf-studio-offset-x", `${origX}px`);
-    el.style.setProperty("--hf-studio-offset-y", `${origY}px`);
-    el.removeAttribute("data-hf-drag-initial-offset-x");
-    el.removeAttribute("data-hf-drag-initial-offset-y");
-  };
+  const restoreOffset = () => restoreDragOffset(el, stamp);
   if (anim.arcPath?.enabled) {
     const { activeKeyframePct, currentTime, setActiveKeyframePct } = usePlayerStore.getState();
     const tweenStart = resolveTweenStart(anim);
@@ -48086,7 +48114,8 @@ async function tryGsapDragIntercept(selection, offset, allAnimations, iframe, ge
     const existingSet = posAnim && isInstantHold(posAnim) && posAnim.targetSelector === selector ? posAnim : findExistingPositionWrite(resolvedAnimations, selector, selection.element);
     await commitStaticGsapPosition(selection, offset, gsapPos, selector, existingSet, {
       commitMutation,
-      fetchAnimations: fetchFallbackAnimations
+      fetchAnimations: fetchFallbackAnimations,
+      stamp: options?.stamp
     });
     return { status: "persisted" };
   }
@@ -48104,7 +48133,7 @@ async function tryGsapDragIntercept(selection, offset, allAnimations, iframe, ge
       posAnim = freshMatch;
     }
   }
-  const cbs = { commitMutation, fetchAnimations: fetchFallbackAnimations };
+  const cbs = { commitMutation, fetchAnimations: fetchFallbackAnimations, stamp: options?.stamp };
   if (route === "whole-path") {
     await commitWholePathOffset(selection, posAnim, offset, gsapPos, iframe, selector, cbs);
   } else {
@@ -74787,7 +74816,8 @@ function showRestoreInPlace(iframe, activeCompPath, files, currentTime) {
   const doc = iframe?.contentDocument;
   const win = iframe?.contentWindow;
   const plan = doc && win ? planRestoreTargets(doc, activeCompPath ?? "index.html", files) : null;
-  if (!iframe || !win || !plan || plan.scripted) return null;
+  if (!iframe || !doc || !win || !plan || plan.scripted) return null;
+  countStudioPreviewChange(doc);
   const before = plan.targets.map(
     ({ live, restored }) => [live, live.cloneNode(false), restored]
   );
@@ -74821,6 +74851,7 @@ function applyUndoRestoreToPreview(iframe, activeCompPath, files, currentTime, r
     reloadPreview();
     return "full";
   }
+  countStudioPreviewChange(doc);
   for (const target of plan.targets)
     syncElementAttributes(target.live, target.restored, target.previous);
   const active = files[activeDocPath];
@@ -78180,7 +78211,7 @@ function useTimelineMoveEditsHandler(handleTimelineGroupMove) {
 }
 
 // src/hooks/useDomEditSession.ts
-import { useCallback as useCallback148 } from "react";
+import { useCallback as useCallback149 } from "react";
 
 // src/hooks/useAskAgentModal.ts
 import { useState as useState117, useCallback as useCallback125, useRef as useRef140, useEffect as useEffect115 } from "react";
@@ -83164,7 +83195,7 @@ function useGsapAwareGroupMove({
 }
 
 // src/hooks/useGsapAwareEditing.ts
-import { useCallback as useCallback146 } from "react";
+import { useCallback as useCallback147 } from "react";
 
 // src/hooks/gsapResizePreflight.ts
 function resizeRoute(animations, fetchedAnimations) {
@@ -83196,9 +83227,339 @@ function preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnim
   return { status: "persisted" };
 }
 
+// src/hooks/useEnableKeyframes.ts
+import { useCallback as useCallback145 } from "react";
+var enableKeyframesTransactionCounter = 0;
+function animatedProps(anim) {
+  if (!anim) return ["x", "y"];
+  const own = Object.keys(anim.properties ?? {});
+  if (own.length > 0) return own;
+  const stops = anim.keyframes?.keyframes;
+  if (stops?.length) {
+    const keys = /* @__PURE__ */ new Set();
+    for (const stop2 of stops) for (const k of Object.keys(stop2.properties ?? {})) keys.add(k);
+    if (keys.size > 0) return [...keys];
+  }
+  return ["x", "y"];
+}
+function isPlayheadWithinTween(anim, currentTime) {
+  const start = resolveTweenStart(anim);
+  if (start === null) return true;
+  return isTimeWithinTween(currentTime, start, resolveTweenDuration(anim));
+}
+async function replaceSetWithSingleKeyframe(session, sel, setAnim, t2, iframe, selector) {
+  const position = readElementPosition(iframe, sel, setAnim);
+  if (Object.keys(position).length === 0) {
+    for (const [key2, held] of Object.entries(setAnim.properties ?? {})) {
+      if (typeof held === "number") position[key2] = held;
+    }
+  }
+  if (Object.keys(position).length === 0 || !session.commitMutation) return;
+  const range = resolveNewTweenRange(sel.dataAttributes?.start, sel.dataAttributes?.duration, t2);
+  await session.commitMutation(
+    {
+      type: "replace-with-keyframes",
+      animationId: setAnim.id,
+      targetSelector: selector,
+      position: roundTo3(range.start),
+      duration: roundTo3(range.duration),
+      keyframes: [{ percentage: 0, properties: position }],
+      ease: setAnim.ease
+    },
+    { label: "Enable keyframes", keyframeAction: "add", softReload: true }
+  );
+}
+function readElementPosition(iframe, sel, anim) {
+  const result = {};
+  if (!iframe?.contentWindow) return result;
+  let gsap3;
+  try {
+    gsap3 = iframe.contentWindow.gsap;
+  } catch {
+    return result;
+  }
+  const element = sel.element;
+  if (!element?.isConnected || !gsap3?.getProperty) return result;
+  const props = animatedProps(anim);
+  for (const prop of props) {
+    const val = Number(gsap3.getProperty(element, prop));
+    if (!Number.isFinite(val)) continue;
+    result[prop] = POSITION_PROPS.has(prop) ? Math.round(val) : roundTo3(val);
+  }
+  return result;
+}
+function resolveNewTweenRange(authoredStart, authoredDuration, currentTime) {
+  const t2 = Math.max(0, roundTo3(currentTime));
+  const start = authoredStart != null ? Number.parseFloat(authoredStart) : Number.NaN;
+  const duration = authoredDuration != null ? Number.parseFloat(authoredDuration) : Number.NaN;
+  if (!Number.isFinite(start) || !Number.isFinite(duration) || duration <= 0) {
+    return { start: t2, duration: 1 };
+  }
+  const end = start + duration;
+  const clampedStart = Math.min(Math.max(t2, start), end);
+  return { start: clampedStart, duration: Math.max(0.5, roundTo3(end - clampedStart)) };
+}
+function singleKeyTweenMutation(sel, properties, currentTime) {
+  const targetSelector = writeTargetSelector(sel);
+  if (!targetSelector) return null;
+  const { start, duration } = resolveNewTweenRange(
+    sel.dataAttributes?.start,
+    sel.dataAttributes?.duration,
+    currentTime
+  );
+  return {
+    type: "add-with-keyframes",
+    targetSelector,
+    position: roundTo3(start),
+    duration: roundTo3(duration),
+    keyframes: [{ percentage: 0, properties }]
+  };
+}
+async function tryFetchAnimationsForElement(sel) {
+  const projectId = window.location.hash.match(/project\/([^?/]+)/)?.[1];
+  if (!projectId) return null;
+  const sourceFile = sel.sourceFile || "index.html";
+  const parsed = await fetchParsedAnimations(projectId, sourceFile);
+  if (!parsed) return null;
+  return getAnimationsForElement(parsed.animations, {
+    id: sel.id,
+    selector: sel.selector
+  });
+}
+async function fetchAnimationsForElement(sel) {
+  return await tryFetchAnimationsForElement(sel) ?? [];
+}
+async function extendKeyframedTweenToPlayhead(session, sel, anim, currentTime, duration, iframe, commitOverrides) {
+  const selector = existingTweenTargetSelector(anim, sel);
+  const position = readElementPosition(iframe, sel, anim);
+  if (!selector || Object.keys(position).length === 0 || !session.commitMutation) return;
+  const extended = buildExtendedKeyframes(anim, currentTime, position, duration);
+  await session.commitMutation(
+    {
+      type: "replace-with-keyframes",
+      animationId: anim.id,
+      targetSelector: selector,
+      position: extended.position,
+      duration: extended.duration,
+      keyframes: extended.keyframes,
+      ...keyframeEases(anim)
+    },
+    {
+      label: "Add keyframe",
+      keyframeAction: "add",
+      softReload: true,
+      ...commitOverrides
+    }
+  );
+}
+async function applyKeyframeAtPlayhead(session, sel, kfAnim, t2, iframe, commitOverrides, liveTween) {
+  const keepAuthoredDuration = kfAnim.durationUnresolved === true;
+  if (keepAuthoredDuration) {
+    kfAnim = withLiveTiming(kfAnim, liveTween ?? findParsedTween(iframe, sel.element, kfAnim));
+  }
+  if (keepAuthoredDuration && kfAnim.duration == null) return;
+  const duration = resolveTweenDuration(kfAnim);
+  const start = resolveTweenStart(kfAnim);
+  if (start !== null && !isTimeWithinTween(t2, start, duration)) {
+    if (keepAuthoredDuration) return;
+    await extendKeyframedTweenToPlayhead(
+      session,
+      sel,
+      kfAnim,
+      t2,
+      duration,
+      iframe,
+      commitOverrides
+    );
+    return;
+  }
+  const pct = start === null ? computeElementPercentage(t2, sel) : absoluteToPercentageForAnimation(t2, kfAnim) ?? 0;
+  const existing = kfAnim.keyframes?.keyframes.find((k) => playsNear(kfAnim, k.percentage, pct));
+  if (existing) {
+    session.handleGsapRemoveKeyframe(kfAnim.id, existing.percentage);
+    return;
+  }
+  if (session.handleGsapAddKeyframeBatch) {
+    const position = readElementPosition(iframe, sel, kfAnim);
+    if (Object.keys(position).length > 0) {
+      await session.handleGsapAddKeyframeBatch(kfAnim.id, pct, position, commitOverrides);
+    }
+  }
+}
+async function promoteSetToKeyframes(session, sel, setAnim, t2, iframe) {
+  const selector = existingTweenTargetSelector(setAnim, sel);
+  const setStart = resolveTweenStart(setAnim) ?? 0;
+  if (!selector || !session.commitMutation) return;
+  if (t2 <= setStart) {
+    await replaceSetWithSingleKeyframe(session, sel, setAnim, t2, iframe, selector);
+    return;
+  }
+  const endPosition = readElementPosition(iframe, sel, setAnim);
+  if (Object.keys(endPosition).length === 0) return;
+  const startPosition = {};
+  for (const key2 of Object.keys(endPosition)) {
+    const held = setAnim.properties?.[key2];
+    if (typeof held === "number") startPosition[key2] = held;
+  }
+  await session.commitMutation(
+    {
+      type: "replace-with-keyframes",
+      animationId: setAnim.id,
+      targetSelector: selector,
+      position: roundTo3(setStart),
+      duration: roundTo3(t2 - setStart),
+      keyframes: [
+        {
+          percentage: 0,
+          properties: Object.keys(startPosition).length > 0 ? startPosition : endPosition,
+          auto: true
+        },
+        { percentage: 100, properties: endPosition }
+      ],
+      ease: setAnim.ease
+    },
+    { label: "Add keyframe", keyframeAction: "add", softReload: true }
+  );
+}
+async function applyArcKeyframeAtPlayhead(session, sel, arcAnim, t2, iframe) {
+  if (!session.commitMutation) return;
+  const targetSelector = existingTweenTargetSelector(arcAnim, sel);
+  if (!targetSelector) return;
+  const start = resolveTweenStart(arcAnim) ?? 0;
+  const duration = resolveTweenDuration(arcAnim);
+  if (!isTimeWithinTween(t2, start, duration)) {
+    const held = readElementPosition(iframe, sel, arcAnim);
+    if (t2 <= start || typeof held.x !== "number" || typeof held.y !== "number") return;
+    const extended = buildExtendedKeyframes(arcAnim, t2, { x: held.x, y: held.y }, duration, "none");
+    await session.commitMutation(
+      {
+        type: "replace-with-keyframes",
+        animationId: arcAnim.id,
+        targetSelector,
+        position: extended.position,
+        duration: extended.duration,
+        keyframes: extended.keyframes,
+        ease: "none"
+      },
+      { label: "Add keyframe", keyframeAction: "add", softReload: true }
+    );
+    return;
+  }
+  const nodes = linearArcKeyframes(arcAnim);
+  const playheadPercentage = absoluteToPercentage(t2, start, duration);
+  const timedNodeIndex = nodes.findIndex(
+    (node) => Math.abs(node.percentage - playheadPercentage) <= KEYFRAME_PCT_MATCH
+  );
+  if (timedNodeIndex !== -1) {
+    if (timedNodeIndex > 0 && timedNodeIndex < nodes.length - 1) {
+      await session.commitMutation(
+        {
+          type: "replace-with-keyframes",
+          animationId: arcAnim.id,
+          targetSelector,
+          position: roundTo3(start),
+          duration: roundTo3(duration),
+          keyframes: nodes.filter((_, index) => index !== timedNodeIndex),
+          ease: "none"
+        },
+        { label: "Remove keyframe", softReload: true }
+      );
+    }
+    return;
+  }
+  const live = readElementPosition(iframe, sel, arcAnim);
+  if (typeof live.x !== "number" || typeof live.y !== "number") return;
+  await session.commitMutation(
+    {
+      type: "replace-with-keyframes",
+      animationId: arcAnim.id,
+      targetSelector,
+      position: roundTo3(start),
+      duration: roundTo3(duration),
+      keyframes: buildTemporalArcKeyframes(arcAnim, playheadPercentage, {
+        x: live.x,
+        y: live.y
+      }),
+      ease: "none"
+    },
+    { label: "Add keyframe", keyframeAction: "add", softReload: true }
+  );
+}
+function useEnableKeyframes(sessionRef) {
+  return useCallback145(async () => {
+    const session = sessionRef.current;
+    if (!session) return;
+    const sel = session.domEditSelection;
+    if (!sel) return;
+    const t2 = usePlayerStore.getState().currentTime;
+    const iframe = session.previewIframeRef?.current ?? null;
+    const fetched = await tryFetchAnimationsForElement(sel);
+    const anims = fetched ?? session.selectedGsapAnimations;
+    const arcAnim = anims.find((a) => a.arcPath);
+    const kfAnim = anims.find((a) => a.keyframes && !a.arcPath);
+    const setAnim = anims.find((a) => isInstantHold(a) && !a.keyframes && !a.arcPath);
+    const flatAnim = anims.find((a) => !a.keyframes && !a.arcPath && !isInstantHold(a));
+    if (arcAnim) {
+      await applyArcKeyframeAtPlayhead(session, sel, arcAnim, t2, iframe);
+    } else if (kfAnim) {
+      await applyKeyframeAtPlayhead(session, sel, kfAnim, t2, iframe);
+    } else if (setAnim) {
+      await promoteSetToKeyframes(session, sel, setAnim, t2, iframe);
+    } else if (flatAnim) {
+      const flatLive = flatAnim.durationUnresolved ? findParsedTween(iframe, sel.element, flatAnim) : void 0;
+      enableKeyframesTransactionCounter += 1;
+      const coalesceKey = `enable-keyframes:${flatAnim.id}:${enableKeyframesTransactionCounter}`;
+      const convertCommitOverrides = {
+        keyframeTelemetry: false,
+        skipReload: true,
+        coalesceKey,
+        coalesceMs: Number.POSITIVE_INFINITY
+      };
+      await session.handleGsapConvertToKeyframes(
+        flatAnim.id,
+        void 0,
+        void 0,
+        convertCommitOverrides
+      );
+      const converted = (await fetchAnimationsForElement(sel)).find((a) => a.keyframes);
+      if (converted) {
+        const applyCommitOverrides = {
+          softReload: true,
+          coalesceKey,
+          // Must match the convert phase's window: editHistory keys coalescing
+          // off the incoming entry, so without Infinity here the apply (landing
+          // after two POSTs + a fetch) falls back to the 300ms default and the
+          // conversion splits into two undo entries under real latency.
+          coalesceMs: Number.POSITIVE_INFINITY
+        };
+        await applyKeyframeAtPlayhead(
+          session,
+          sel,
+          converted,
+          t2,
+          iframe,
+          applyCommitOverrides,
+          flatLive
+        );
+      }
+    } else {
+      const position = readElementPosition(iframe, sel, null);
+      if (Object.keys(position).length === 0)
+        Object.assign(position, readTranslatePxLeavingPercent(sel.element));
+      const mutation = singleKeyTweenMutation(sel, position, t2);
+      if (mutation && session.commitMutation) {
+        await session.commitMutation(mutation, { label: "Enable keyframes", softReload: true });
+      } else {
+        session.handleGsapAddAnimation("to");
+      }
+    }
+  }, [sessionRef]);
+}
+
 // src/hooks/gsapResizeIntercept.ts
 var SIZE_PROPS = /* @__PURE__ */ new Set(["width", "height"]);
 var POSITION_XY = /* @__PURE__ */ new Set(["x", "y"]);
+var MOVED_OR_SIZED = /* @__PURE__ */ new Set(["x", "y", "xPercent", "yPercent", "width", "height"]);
 function originalBoxSize(el, measuredAttr, inlineProperty) {
   const measured = Number.parseFloat(el?.getAttribute(measuredAttr) ?? "");
   if (Number.isFinite(measured) && measured > 0) return measured;
@@ -83218,7 +83579,8 @@ async function commitSizeAtPlayhead(selection, anim, size, iframe, dragOffset, c
   const anchor2 = moves && animationWritesAnyProperty(anim, POSITION_XY) ? computeDraggedGsapPosition(
     selection.element,
     dragOffset,
-    readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 }
+    readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 },
+    callbacks.stamp
   ) : null;
   const written = await commitValueAtPlayhead(
     selection,
@@ -83232,11 +83594,28 @@ async function commitSizeAtPlayhead(selection, anim, size, iframe, dragOffset, c
         ...preGestureBoxSize(selection.element),
         ...anchor2 && { x: anchor2.baseGsapX, y: anchor2.baseGsapY }
       },
-      ...anchor2 && { beforeReload: () => restoreDragOffset(selection.element) }
+      ...anchor2 && { beforeReload: () => restoreDragOffset(selection.element, callbacks.stamp) }
     }
   );
   return written.status === "persisted" && anchor2 ? { ...written, ownsDragOffset: true } : written;
 }
+function handOverDraftSize(selection, written, size, draw) {
+  const { width, height } = size;
+  if (written.status !== "persisted" || width == null || height == null) return written;
+  draw(() => {
+    clearStudioBoxSize(selection.element);
+    setElementGsapSize(selection.element, width, height);
+  });
+  return written;
+}
+function firstSizeKey(selection, size, resizeGroup, animations) {
+  const { autoKeyframeEnabled, currentTime } = usePlayerStore.getState();
+  const keyframed = animations.some(
+    (a) => a.keyframes && animationWritesAnyProperty(a, MOVED_OR_SIZED)
+  );
+  if (resizeGroup !== "size" || !autoKeyframeEnabled || !keyframed) return null;
+  return singleKeyTweenMutation(selection, size, currentTime);
+}
 function tweenUsesScaleLonghands(anim) {
   const isLonghand = (name) => name === "scaleX" || name === "scaleY";
   const inKeyframes = (anim?.keyframes?.keyframes ?? []).some(
@@ -83244,7 +83623,7 @@ function tweenUsesScaleLonghands(anim) {
   );
   return inKeyframes || Object.keys(anim?.properties ?? {}).some(isLonghand);
 }
-async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations, dragOffset, draw = (run) => run()) {
+async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations, dragOffset, draw = (run) => run(), stamp) {
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const outcome = preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnimations);
   if (outcome.status === "blocked") return outcome;
@@ -83269,10 +83648,16 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     size
   });
   if (!anim || isInstantHold(anim)) {
+    const sized = { width: roundToLayoutPx(size.width), height: roundToLayoutPx(size.height) };
     const scriptWritesSize = allKnownAnimations.some(
       (a) => animationWritesAnyProperty(a, SIZE_PROPS)
     );
-    if (!scriptWritesSize) return { status: "element-size" };
+    if (!scriptWritesSize) {
+      const firstKey = firstSizeKey(selection, sized, resizeGroup, workingAnimations);
+      if (!firstKey) return { status: "element-size" };
+      await commitMutation(selection, firstKey, { label: "Resize", softReload: true });
+      return handOverDraftSize(selection, { status: "persisted" }, sized, draw);
+    }
     const sel = selectorFromSelection(selection) ?? writeTargetSelector(selection);
     if (!sel) return { status: "blocked", reason: "no-selector" };
     const sizeSet = resizeGroup === "size" ? anim ?? findSizeSetAnimation(workingAnimations, sel, selection.element) : findSizeSetAnimation(workingAnimations, sel, selection.element);
@@ -83284,11 +83669,19 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       );
       if (animatedTween) {
         logResize("intercept-route", { route: "keyframed-size", tweenId: animatedTween.id });
-        const sized = { width: roundToLayoutPx(size.width), height: roundToLayoutPx(size.height) };
-        return commitSizeAtPlayhead(selection, animatedTween, sized, iframe, dragOffset, {
-          commitMutation,
-          fetchAnimations: fetchFallbackAnimations
-        });
+        const written2 = await commitSizeAtPlayhead(
+          selection,
+          animatedTween,
+          sized,
+          iframe,
+          dragOffset,
+          {
+            commitMutation,
+            fetchAnimations: fetchFallbackAnimations,
+            stamp
+          }
+        );
+        return handOverDraftSize(selection, written2, sized, draw);
       }
     }
     logResize("intercept-route", { route: "static-size-set", hadSizeSet: !!sizeSet, resizeGroup });
@@ -83367,7 +83760,8 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       const { baseGsapX, baseGsapY } = computeDraggedGsapPosition(
         selection.element,
         { x: 0, y: 0 },
-        gsapPos
+        gsapPos,
+        stamp
       );
       const base3 = { x: baseGsapX, y: baseGsapY };
       setElementGsapPosition(draftEl, base3.x, base3.y);
@@ -83408,7 +83802,8 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       assertGsapEditPersisted(
         await commitGsapPositionFromDrag(selection, positionTween, delta, base2, iframe, {
           commitMutation,
-          fetchAnimations: fetchFallbackAnimations
+          fetchAnimations: fetchFallbackAnimations,
+          stamp
         })
       );
       return true;
@@ -83416,7 +83811,8 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     const existingSet = findExistingPositionWrite(currentAnimations, selector, selection.element);
     await commitStaticGsapPosition(selection, delta, base2, selector, existingSet, {
       commitMutation,
-      fetchAnimations: fetchFallbackAnimations
+      fetchAnimations: fetchFallbackAnimations,
+      stamp
     });
     return true;
   };
@@ -83433,9 +83829,18 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     );
     return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
   }
-  const callbacks = { commitMutation, fetchAnimations: fetchFallbackAnimations };
-  if (resizeGroup === "size")
-    return commitSizeAtPlayhead(selection, anim, resizeProps, iframe, dragOffset, callbacks);
+  const callbacks = { commitMutation, fetchAnimations: fetchFallbackAnimations, stamp };
+  if (resizeGroup === "size") {
+    const written2 = await commitSizeAtPlayhead(
+      selection,
+      anim,
+      resizeProps,
+      iframe,
+      dragOffset,
+      callbacks
+    );
+    return handOverDraftSize(selection, written2, resizeProps, draw);
+  }
   const written = await commitValueAtPlayhead(selection, anim, resizeProps, iframe, callbacks, {
     label: "Resize",
     backfill: resizeBackfill
@@ -83445,7 +83850,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
 }
 
 // src/hooks/useAnimatedPropertyCommit.ts
-import { useCallback as useCallback145 } from "react";
+import { useCallback as useCallback146 } from "react";
 import { classifyPropertyGroup as classifyPropertyGroup4 } from "@hyperframes/core/gsap-parser";
 function pickBestAnimation(animations, selector, property) {
   const targetGroup = property ? classifyPropertyGroup4(property) : void 0;
@@ -83683,7 +84088,7 @@ async function commitKeyframeProps(selection, anim, props, propEntries, primaryP
 }
 function useAnimatedPropertyCommit(deps) {
   const { selectedGsapAnimations, gsapCommitMutation, previewIframeRef, bumpGsapCache } = deps;
-  const commitAnimatedProperties = useCallback145(
+  const commitAnimatedProperties = useCallback146(
     // This is the single routing boundary for set, keyframe, whole-tween, and first-group writes.
     // fallow-ignore-next-line complexity
     async (selection, props, commit2 = gsapCommitMutation) => {
@@ -83789,7 +84194,7 @@ function useAnimatedPropertyCommit(deps) {
     },
     [selectedGsapAnimations, gsapCommitMutation, previewIframeRef, bumpGsapCache]
   );
-  const commitAnimatedProperty = useCallback145(
+  const commitAnimatedProperty = useCallback146(
     (selection, property, value) => commitAnimatedProperties(selection, { [property]: value }),
     [commitAnimatedProperties]
   );
@@ -83816,14 +84221,14 @@ function useGsapAwareEditing({
   setArcPath,
   updateArcSegment
 }) {
-  const getGsapAnimationsForSelection = useCallback146(
+  const getGsapAnimationsForSelection = useCallback147(
     (selection) => {
       if (domEditSelection?.element === selection.element) return selectedGsapAnimations;
       return makeFetchFallback(selection, { failOnFetchError: true })();
     },
     [domEditSelection, selectedGsapAnimations, makeFetchFallback]
   );
-  const handleGsapAwarePathOffsetCommit = useCallback146(
+  const handleGsapAwarePathOffsetCommit = useCallback147(
     async (selection, next, modifiers) => {
       const writes = observeGsapGesture(gsapCommitMutation);
       if (modifiers?.plainTranslate ?? editsPlainCss(selection.element, "move")) {
@@ -83874,8 +84279,9 @@ function useGsapAwareEditing({
     stageElementPositionOffset,
     showToast
   });
-  const handleGsapAwareBoxSizeCommit = useCallback146(
+  const handleGsapAwareBoxSizeCommit = useCallback147(
     async (selection, next, offset, restore2 = () => void 0, route) => {
+      const stamp = freezeDragStamp(selection.element);
       const writes = observeGsapGesture(gsapCommitMutation);
       if (route?.plainTranslate ?? editsPlainCss(selection.element, "resize")) {
         const result = await handleDomBoxSizeCommit(selection, next, offset, restore2);
@@ -83916,7 +84322,8 @@ function useGsapAwareEditing({
             targetAnimations,
             previewIframeRef.current,
             commitMutation2,
-            makeFetchFallback(selection)
+            makeFetchFallback(selection),
+            { stamp }
           );
           await saveMove(dragOutcome, async () => {
             const plainAfterSettle = editsPlainCss(selection.element, "move");
@@ -83937,7 +84344,12 @@ function useGsapAwareEditing({
               x: 0,
               y: 0
             };
-            const { newX, newY } = computeDraggedGsapPosition(selection.element, offset, gsapPos);
+            const { newX, newY } = computeDraggedGsapPosition(
+              selection.element,
+              offset,
+              gsapPos,
+              stamp
+            );
             logResize("sync-settle", { gsapPos, offset, newX, newY });
             setElementGsapPosition(selection.element, newX, newY);
           });
@@ -83954,7 +84366,8 @@ function useGsapAwareEditing({
                 commitMutation2,
                 makeFetchFallback(selection),
                 offset,
-                writes.drawKeepingUndone
+                writes.drawKeepingUndone,
+                stamp
               );
               assertGsapEditPersisted(outcome);
               if (outcome.status === "element-size") {
@@ -84008,7 +84421,7 @@ function useGsapAwareEditing({
       getGsapAnimationsForSelection
     ]
   );
-  const handleGsapAwareRotationCommit = useCallback146(
+  const handleGsapAwareRotationCommit = useCallback147(
     async (selection, next) => {
       const writes = observeGsapGesture(gsapCommitMutation);
       if (next.plain === void 0 ? editsPlainCss(selection.element, "rotate") : next.plain) {
@@ -84051,7 +84464,7 @@ function useGsapAwareEditing({
     previewIframeRef,
     bumpGsapCache
   });
-  const commitAnimatedProperties = useCallback146(
+  const commitAnimatedProperties = useCallback147(
     async (selection, properties) => {
       try {
         await writeSizeWithCrop(
@@ -84073,25 +84486,25 @@ function useGsapAwareEditing({
       trackGsapInteractionFailure
     ]
   );
-  const commitAnimatedProperty = useCallback146(
+  const commitAnimatedProperty = useCallback147(
     (selection, property, value) => commitAnimatedProperties(selection, { [property]: value }),
     [commitAnimatedProperties]
   );
-  const handleSetArcPath = useCallback146(
+  const handleSetArcPath = useCallback147(
     (animId, config) => {
       if (!domEditSelection) return;
       setArcPath(domEditSelection, animId, config);
     },
     [domEditSelection, setArcPath]
   );
-  const handleUpdateArcSegment = useCallback146(
+  const handleUpdateArcSegment = useCallback147(
     (animId, segmentIndex, update) => {
       if (!domEditSelection) return;
       updateArcSegment(domEditSelection, animId, segmentIndex, update);
     },
     [domEditSelection, updateArcSegment]
   );
-  const noopCommit = useCallback146(async () => {
+  const noopCommit = useCallback147(async () => {
   }, []);
   const trackGsapSaveFailure = useGsapSaveFailureTelemetry(null);
   const safeGsapCommit = useSafeGsapCommitMutation(
@@ -84099,14 +84512,14 @@ function useGsapAwareEditing({
     trackGsapSaveFailure,
     showToast
   );
-  const commitMutation = useCallback146(
+  const commitMutation = useCallback147(
     async (mutation, options, selection = domEditSelection) => {
       if (!selection) return;
       await safeGsapCommit(selection, mutation, options);
     },
     [domEditSelection, safeGsapCommit]
   );
-  const handleUnroll = useCallback146(() => {
+  const handleUnroll = useCallback147(() => {
     void commitMutation(
       { type: "unroll-timeline" },
       { label: "Unroll to literal tweens", softReload: true }
@@ -84257,12 +84670,12 @@ function useStudioSelectionPublisher({
 }
 
 // src/hooks/useKeyframeEaseCommits.ts
-import { useCallback as useCallback147 } from "react";
+import { useCallback as useCallback148 } from "react";
 function useKeyframeEaseCommits({
   gsapCommitMutation,
   domEditSelectionRef
 }) {
-  const handleUpdateSegmentEase = useCallback147(
+  const handleUpdateSegmentEase = useCallback148(
     (targets, ease) => {
       const selection = domEditSelectionRef.current;
       if (!selection || targets.length === 0) return;
@@ -84296,11 +84709,11 @@ function useKeyframeEaseCommits({
     },
     [gsapCommitMutation, domEditSelectionRef]
   );
-  const handleUpdateKeyframeEase = useCallback147(
+  const handleUpdateKeyframeEase = useCallback148(
     (animationId, percentage, ease) => handleUpdateSegmentEase([{ animationId, tweenPercentage: percentage }], ease),
     [handleUpdateSegmentEase]
   );
-  const handleSetAllKeyframeEases = useCallback147(
+  const handleSetAllKeyframeEases = useCallback148(
     (animationId, ease) => {
       const sel = domEditSelectionRef.current;
       if (!sel) return;
@@ -84736,7 +85149,7 @@ function useDomEditSession({
     forceReloadSdkSession,
     timelineElements
   });
-  const handleDomEditElementDelete = useCallback148(
+  const handleDomEditElementDelete = useCallback149(
     async (selection, options) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -84759,7 +85172,7 @@ function useDomEditSession({
       timelineElements
     ]
   );
-  const handleGroupSelection = useCallback148(() => {
+  const handleGroupSelection = useCallback149(() => {
     const group = domEditGroupSelectionsRef.current;
     const single = domEditSelectionRef.current;
     const members = group.length > 0 ? group : single ? [single] : [];
@@ -84777,7 +85190,7 @@ function useDomEditSession({
     trackStudioEvent("group", { action: "create", count: members.length });
     void groupSelection(members);
   }, [domEditGroupSelectionsRef, domEditSelectionRef, groupSelection, showToast]);
-  const handleUngroupSelection = useCallback148(() => {
+  const handleUngroupSelection = useCallback149(() => {
     const sel = domEditSelectionRef.current;
     if (!sel?.element.hasAttribute("data-hf-group")) {
       showToast("Select a group to ungroup", "info");
@@ -84885,7 +85298,7 @@ function useDomEditSession({
     setArcPath,
     updateArcSegment
   });
-  const handleDomGroupMoveBy = useCallback148(
+  const handleDomGroupMoveBy = useCallback149(
     (moves) => moveDomGroupBy(
       moves,
       (updates) => handleGsapAwareGroupPathOffsetCommit(updates, { refusalToast: false })
@@ -85011,7 +85424,7 @@ function useSdkSelectionSync(session, domEditSelection, domEditGroupSelections)
 import { useEffect as useEffect126 } from "react";
 
 // src/hooks/useSdkSession.ts
-import { useState as useState121, useEffect as useEffect125, useCallback as useCallback149, useRef as useRef154 } from "react";
+import { useState as useState121, useEffect as useEffect125, useCallback as useCallback150, useRef as useRef154 } from "react";
 import { openComposition as openComposition3 } from "@hyperframes/sdk";
 
 // src/hooks/externalFileReloadBus.ts
@@ -85225,8 +85638,8 @@ function useSdkSession(projectId, activeCompPath, fileTree = [], fileTreeLoaded
       }
     };
   }, [projectId, activeCompPath, reloadToken]);
-  const forceReload = useCallback149(() => setReloadToken((t2) => t2 + 1), []);
-  const publish = useCallback149(({ candidate, expectedSession, targetPath }) => {
+  const forceReload = useCallback150(() => setReloadToken((t2) => t2 + 1), []);
+  const publish = useCallback150(({ candidate, expectedSession, targetPath }) => {
     const expectedOwner = sessionOwnersRef.current.get(expectedSession);
     const current = ownedSessionRef.current;
     if (!isSessionOwnerActive(
@@ -85269,7 +85682,7 @@ function useStudioSdkSessions(projectId, activeCompPath, masterCompPath, fileTre
 }
 
 // src/hooks/useStudioExternalFileChanges.ts
-import { useCallback as useCallback151 } from "react";
+import { useCallback as useCallback152 } from "react";
 
 // src/utils/externalConflictStorage.ts
 var DB_NAME = "hyperframes-studio-external-conflicts";
@@ -85370,7 +85783,7 @@ async function deleteExternalConflictSnapshot(projectId, filePath) {
 }
 
 // src/hooks/useExternalFileChangeCoordinator.ts
-import { useCallback as useCallback150, useEffect as useEffect127, useRef as useRef155, useState as useState122 } from "react";
+import { useCallback as useCallback151, useEffect as useEffect127, useRef as useRef155, useState as useState122 } from "react";
 function testHotAdapter() {
   const value = globalThis.__HF_STUDIO_HOT_TEST_ADAPTER__;
   if (!value || typeof value !== "object") return null;
@@ -85431,7 +85844,7 @@ function useExternalFileChangeCoordinator({
   const drainingRef = useRef155(false);
   const pendingPayloadRef = useRef155(null);
   blockedRef.current = blocked;
-  const setBlocked = useCallback150((next) => {
+  const setBlocked = useCallback151((next) => {
     setBlockedState(
       (held) => next && held ? { ...next, payload: mergeFileChangeAffectedCompositions(held.payload, next.payload) } : next
     );
@@ -85486,7 +85899,7 @@ function useExternalFileChangeCoordinator({
       cancelled = true;
     };
   }, [loadConflictSnapshot, projectId, recoveryFilePath, setBlocked]);
-  const reloadAcceptedGeneration = useCallback150(
+  const reloadAcceptedGeneration = useCallback151(
     (path, affectsPreview = true) => {
       logReload(affectsPreview ? "reload" : "file-tree only", {
         path,
@@ -85498,7 +85911,7 @@ function useExternalFileChangeCoordinator({
     },
     [reloadPreview, reloadSdkSession, refreshFileTree]
   );
-  const persistSnapshotInOrder = useCallback150(async (write) => {
+  const persistSnapshotInOrder = useCallback151(async (write) => {
     const next = snapshotWriteTailRef.current.catch(() => void 0).then(write);
     snapshotWriteTailRef.current = next.then(
       () => void 0,
@@ -85506,7 +85919,7 @@ function useExternalFileChangeCoordinator({
     );
     await next;
   }, []);
-  const drainOnePending = useCallback150(
+  const drainOnePending = useCallback151(
     // fallow-ignore-next-line complexity
     async (payload) => {
       const path = readStudioFileChangePath(payload);
@@ -85605,7 +86018,7 @@ function useExternalFileChangeCoordinator({
       onAcceptedPersistedFileChange
     ]
   );
-  const startDrainLoop = useCallback150(async () => {
+  const startDrainLoop = useCallback151(async () => {
     if (drainingRef.current) return;
     drainingRef.current = true;
     try {
@@ -85619,7 +86032,7 @@ function useExternalFileChangeCoordinator({
       drainingRef.current = false;
     }
   }, [drainOnePending]);
-  const processChange = useCallback150(
+  const processChange = useCallback151(
     // fallow-ignore-next-line complexity
     (payload) => {
       const path = readStudioFileChangePath(payload);
@@ -85678,14 +86091,14 @@ function useExternalFileChangeCoordinator({
     }
     return sseFileChangeChannel(handler);
   }, []);
-  const retry = useCallback150(async () => {
+  const retry = useCallback151(async () => {
     const current = blockedRef.current;
     if (!current || current.status === "conflict" || current.recovered) return;
     resetSaveQueues?.();
     lastEventIdentityRef.current = null;
     processChange(current.payload);
   }, [processChange, resetSaveQueues]);
-  const useExternalFile = useCallback150(
+  const useExternalFile = useCallback151(
     // fallow-ignore-next-line complexity
     async () => {
       const current = blockedRef.current;
@@ -85713,7 +86126,7 @@ function useExternalFileChangeCoordinator({
       resetSaveQueues
     ]
   );
-  const keepStudioFile = useCallback150(async () => {
+  const keepStudioFile = useCallback151(async () => {
     const current = blockedRef.current;
     if (!current || !projectId) return;
     if (current.generation !== generationRef.current) return;
@@ -85784,19 +86197,19 @@ function useStudioExternalFileChanges({
   const { flushPendingSourceSave, discardPendingSourceSave } = fileManager;
   const { drainPendingDomEditSaves, resetDomEditSaveQueueBreaker } = previewPersistence;
   const bumpThumbnailRevisions = usePlayerStore((state) => state.bumpThumbnailRevisions);
-  const onAcceptedPersistedFileChange = useCallback151(
+  const onAcceptedPersistedFileChange = useCallback152(
     (_path, affectedCompositions) => {
       onOutsideChange?.();
       bumpThumbnailRevisions(affectedCompositions);
     },
     [bumpThumbnailRevisions, onOutsideChange]
   );
-  const drainPendingChanges = useCallback151(async () => {
+  const drainPendingChanges = useCallback152(async () => {
     const source = await flushPendingSourceSave();
     if (source.status !== "clean") return source;
     return drainPendingDomEditSaves();
   }, [drainPendingDomEditSaves, flushPendingSourceSave]);
-  const discardPendingChanges = useCallback151(() => {
+  const discardPendingChanges = useCallback152(() => {
     discardPendingSourceSave();
     resetDomEditSaveQueueBreaker();
   }, [discardPendingSourceSave, resetDomEditSaveQueueBreaker]);
@@ -85824,7 +86237,7 @@ function useStudioExternalFileChanges({
 }
 
 // src/hooks/useBlockHandlers.ts
-import { useCallback as useCallback152, useMemo as useMemo75, useRef as useRef156, useState as useState123 } from "react";
+import { useCallback as useCallback153, useMemo as useMemo75, useRef as useRef156, useState as useState123 } from "react";
 
 // src/utils/blockInstaller.ts
 function getMaxZIndexFromIframe(iframe) {
@@ -86043,7 +86456,7 @@ function useBlockHandlers({
   );
   const installingBlockRef = useRef156(false);
   const { showToast, dismissToast } = blockCtxDeps;
-  const runBlockInstall = useCallback152(
+  const runBlockInstall = useCallback153(
     async (blockName, install) => {
       if (installingBlockRef.current) {
         showToast("A block is already installing \u2014 one moment\u2026", "info");
@@ -86060,7 +86473,7 @@ function useBlockHandlers({
     },
     [showToast, dismissToast]
   );
-  const handleAddBlock = useCallback152(
+  const handleAddBlock = useCallback153(
     (blockName) => {
       if (!projectId) return;
       void (async () => {
@@ -86090,7 +86503,7 @@ function useBlockHandlers({
     },
     [projectId, blockCtx, previewIframeRef, runBlockInstall, setRightCollapsed, setRightPanelTab]
   );
-  const handleTimelineBlockDrop = useCallback152(
+  const handleTimelineBlockDrop = useCallback153(
     (blockName, placement) => {
       if (!projectId) return;
       void runBlockInstall(
@@ -86109,7 +86522,7 @@ function useBlockHandlers({
     },
     [projectId, blockCtx, previewIframeRef, runBlockInstall]
   );
-  const handleAddMediaOverlay = useCallback152(
+  const handleAddMediaOverlay = useCallback153(
     async (blockName, placement) => {
       if (!projectId) return;
       const { compositionPath, ...timelinePlacement } = placement;
@@ -86128,7 +86541,7 @@ function useBlockHandlers({
     },
     [projectId, blockCtx, previewIframeRef, runBlockInstall]
   );
-  const handlePreviewBlockDrop = useCallback152(
+  const handlePreviewBlockDrop = useCallback153(
     (blockName, position) => {
       if (!projectId) return;
       void runBlockInstall(
@@ -86158,7 +86571,7 @@ function useBlockHandlers({
 }
 
 // src/hooks/useAppHotkeys.ts
-import { useCallback as useCallback154, useEffect as useEffect128, useRef as useRef157 } from "react";
+import { useCallback as useCallback155, useEffect as useEffect128, useRef as useRef157 } from "react";
 
 // src/hooks/appHotkeysDispatch.ts
 function handleUndoRedoKey(event, onUndo, onRedo) {
@@ -86355,7 +86768,7 @@ function dispatchPlainKey(event, key2, cb) {
 }
 
 // src/hooks/useEditHistoryActions.ts
-import { useCallback as useCallback153, useMemo as useMemo76 } from "react";
+import { useCallback as useCallback154, useMemo as useMemo76 } from "react";
 function useEditHistoryActions({
   editHistory,
   readOptionalProjectFile,
@@ -86369,20 +86782,21 @@ function useEditHistoryActions({
   activeCompPath,
   forceReloadSdkSession
 }) {
-  const readHistoryFile = useCallback153(
+  const readHistoryFile = useCallback154(
     (path) => path === STUDIO_MOTION_PATH ? readOptionalProjectFile(path) : readProjectFile(path),
     [readOptionalProjectFile, readProjectFile]
   );
-  const serializeHistoryFiles = useCallback153(
+  const serializeHistoryFiles = useCallback154(
     (paths, task) => serializeStudioFileMutations(writeProjectFile, paths, task),
     [writeProjectFile]
   );
-  const apply = useCallback153(
+  const apply = useCallback154(
     async (direction) => {
       const noun = direction === "undo" ? "Undo" : "Redo";
       const pendingEditShown = direction === "undo" ? paintBackNewestStudioPendingEdit() : null;
       const predicted = pendingEditShown ? null : editHistory.predict?.(direction) ?? null;
       const predictedShown = predicted ? showHistoryRestoreNow?.(predicted.files) ?? null : null;
+      const shownLanded = predictedShown ? beginStudioShownRestore() : null;
       const putBack = predictedShown ?? pendingEditShown?.showAgain;
       const claimedAfter = pendingEditShown?.claimsAtBegin ?? (direction === "undo" && hasStudioPendingEdits() ? editHistory.claims?.() : void 0);
       let result = { ok: false, reason: "failed" };
@@ -86402,6 +86816,7 @@ function useEditHistoryActions({
         serverSteppedShown = predictedShown ? stepped && result.undoes === predicted?.id : stepped && editClaimed;
       } finally {
         if (putBack && !serverSteppedShown && !revertIsTheUndo) putBack();
+        shownLanded?.();
       }
       if (!result.ok && result.reason === "content-mismatch") {
         showToast(
@@ -86438,8 +86853,8 @@ function useEditHistoryActions({
       forceReloadSdkSession
     ]
   );
-  const undo = useCallback153(() => apply("undo"), [apply]);
-  const redo = useCallback153(() => apply("redo"), [apply]);
+  const undo = useCallback154(() => apply("undo"), [apply]);
+  const redo = useCallback154(() => apply("redo"), [apply]);
   return useMemo76(() => ({ undo, redo }), [undo, redo]);
 }
 function fromShown(files, shown2) {
@@ -86528,7 +86943,7 @@ function useAppHotkeys({
     activeCompPath,
     forceReloadSdkSession
   });
-  const applyHistory = useCallback154(
+  const applyHistory = useCallback155(
     async (direction) => {
       const captionState = useCaptionStore.getState();
       if (captionState.isEditMode && isCaptionPreviewVisible()) {
@@ -86544,8 +86959,8 @@ function useAppHotkeys({
     },
     [editHistory.state, fileHistory, showToast]
   );
-  const handleUndo = useCallback154(() => applyHistory("undo"), [applyHistory]);
-  const handleRedo = useCallback154(() => applyHistory("redo"), [applyHistory]);
+  const handleUndo = useCallback155(() => applyHistory("undo"), [applyHistory]);
+  const handleRedo = useCallback155(() => applyHistory("redo"), [applyHistory]);
   const cbRef = useRef157(null);
   cbRef.current = {
     handleTimelineElementsDelete,
@@ -86568,7 +86983,7 @@ function useAppHotkeys({
     showToast,
     readOnlyPreview
   };
-  const handleAppKeyDown = useCallback154((event) => {
+  const handleAppKeyDown = useCallback155((event) => {
     const cb = cbRef.current;
     const key2 = event.key.toLowerCase();
     if (dispatchLinkShortcut(event, cb)) return;
@@ -86582,7 +86997,7 @@ function useAppHotkeys({
     window.addEventListener("keydown", handleAppKeyDown, true);
     return () => window.removeEventListener("keydown", handleAppKeyDown, true);
   }, [handleAppKeyDown]);
-  const syncPreviewHotkeys = useCallback154(
+  const syncPreviewHotkeys = useCallback155(
     (iframe) => {
       previewHistoryCleanupRef.current?.();
       previewHistoryCleanupRef.current = null;
@@ -86612,7 +87027,7 @@ function useAppHotkeys({
 }
 
 // src/hooks/useClipboard.ts
-import { useCallback as useCallback155, useRef as useRef158 } from "react";
+import { useCallback as useCallback156, useRef as useRef158 } from "react";
 import { EXCLUDED_TAGS, mintHfId, walkCompositionDescendants as walkCompositionDescendants2 } from "@hyperframes/parsers/hf-ids";
 
 // src/utils/clipboardPayload.ts
@@ -86892,7 +87307,7 @@ function useClipboard({
   const clipboardRef = useRef158(null);
   const projectIdRef = useRef158(projectId);
   projectIdRef.current = projectId;
-  const readSaved = useCallback155(
+  const readSaved = useCallback156(
     async (path) => {
       const pid = projectIdRef.current;
       if (!pid) throw new Error("No project is open.");
@@ -86906,7 +87321,7 @@ function useClipboard({
     },
     [waitForPendingDomEditSaves, writeProjectFile]
   );
-  const findSelectedClips = useCallback155(() => {
+  const findSelectedClips = useCallback156(() => {
     const selected = getSelectedElements();
     if (selected.length === 0) return null;
     const lives = [];
@@ -86920,7 +87335,7 @@ function useClipboard({
     }
     return { elements: selected, lives };
   }, [activeCompPath, previewIframeRef, showToast]);
-  const readClips = useCallback155(
+  const readClips = useCallback156(
     async (targets) => {
       const paths = targets.elements.map((el) => el.sourceFile || activeCompPath || "index.html");
       const markup = await readSavedMarkup(readSaved, paths, targets.lives);
@@ -86936,7 +87351,7 @@ function useClipboard({
     },
     [activeCompPath, readSaved]
   );
-  const copyTimelineSelection = useCallback155(() => {
+  const copyTimelineSelection = useCallback156(() => {
     const targets = findSelectedClips();
     if (!targets) return null;
     const sourceFile = targets.elements[0]?.sourceFile || activeCompPath || "index.html";
@@ -86951,7 +87366,7 @@ function useClipboard({
       };
     });
   }, [activeCompPath, findSelectedClips, readClips, showToast]);
-  const copyDomSelection = useCallback155(
+  const copyDomSelection = useCallback156(
     (domSelection) => {
       const live = getSelectedDomElement(previewIframeRef, domSelection, activeCompPath);
       if (!live) {
@@ -86973,7 +87388,7 @@ function useClipboard({
     },
     [activeCompPath, previewIframeRef, readSaved, showToast]
   );
-  const copyToClipboard = useCallback155(() => {
+  const copyToClipboard = useCallback156(() => {
     const domSelection = domEditSelectionRef.current;
     let pending2;
     if (usePlayerStore.getState().selectedElementId) pending2 = copyTimelineSelection();
@@ -86995,8 +87410,8 @@ function useClipboard({
     });
     return own;
   }, [copyDomSelection, copyTimelineSelection, domEditSelectionRef, showToast]);
-  const handleCopy2 = useCallback155(() => copyToClipboard() !== null, [copyToClipboard]);
-  const handlePaste2 = useCallback155(
+  const handleCopy2 = useCallback156(() => copyToClipboard() !== null, [copyToClipboard]);
+  const handlePaste2 = useCallback156(
     async (options) => {
       const payload = await clipboardRef.current;
       if (!payload) {
@@ -87044,7 +87459,7 @@ function useClipboard({
     },
     [activeCompPath, recordEdit, reloadPreview, showToast, writeProjectFile]
   );
-  const handleDuplicate = useCallback155(
+  const handleDuplicate = useCallback156(
     async (options) => {
       const targets = findSelectedClips();
       if (!targets) return false;
@@ -87096,7 +87511,7 @@ function useClipboard({
       writeProjectFile
     ]
   );
-  const handleCut = useCallback155(async () => {
+  const handleCut = useCallback156(async () => {
     const selected = getSelectedElements();
     const domSelection = domEditSelectionRef.current;
     const copied = copyToClipboard();
@@ -87116,7 +87531,7 @@ function useClipboard({
     handleTimelineElementsDelete,
     handleDomEditElementDelete
   ]);
-  const canPaste = useCallback155(() => clipboardRef.current !== null, []);
+  const canPaste = useCallback156(() => clipboardRef.current !== null, []);
   return { handleCopy: handleCopy2, handlePaste: handlePaste2, handleCut, handleDuplicate, canPaste };
 }
 
@@ -87475,11 +87890,11 @@ function useCaptionDetection({
 }
 
 // src/hooks/useConsoleErrorCapture.ts
-import { useCallback as useCallback156, useEffect as useEffect130, useRef as useRef160, useState as useState124 } from "react";
+import { useCallback as useCallback157, useEffect as useEffect130, useRef as useRef160, useState as useState124 } from "react";
 function useConsoleErrorCapture(previewIframe) {
   const [consoleErrors, setConsoleErrors] = useState124(null);
   const consoleErrorsRef = useRef160([]);
-  const resetErrors = useCallback156(() => {
+  const resetErrors = useCallback157(() => {
     consoleErrorsRef.current = [];
     setConsoleErrors(null);
   }, []);
@@ -87548,7 +87963,7 @@ function useConsoleErrorCapture(previewIframe) {
 }
 
 // src/hooks/useFrameCapture.ts
-import { useMemo as useMemo77, useState as useState125, useCallback as useCallback157, useRef as useRef161 } from "react";
+import { useMemo as useMemo77, useState as useState125, useCallback as useCallback158, useRef as useRef161 } from "react";
 function useFrameCapture({
   projectId,
   activeCompPath,
@@ -87566,16 +87981,16 @@ function useFrameCapture({
       livePlayheadRef.current = time;
     })
   );
-  const playheadTime = useCallback157(() => {
+  const playheadTime = useCallback158(() => {
     const { isPlaying, currentTime } = usePlayerStore.getState();
     return isPlaying ? livePlayheadRef.current : currentTime;
   }, []);
   const [captureStamp, setCaptureStamp] = useState125(Date.now);
-  const refreshCaptureFrameTime = useCallback157(() => {
+  const refreshCaptureFrameTime = useCallback158(() => {
     setCaptureFrameTime(playheadTime());
     setCaptureStamp(Date.now());
   }, [playheadTime]);
-  const handleCaptureFrameClick = useCallback157(
+  const handleCaptureFrameClick = useCallback158(
     async (event) => {
       if (!projectId) return;
       event.preventDefault();
@@ -87659,7 +88074,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState126, useCallback as useCallback158, useEffect as useEffect131, useRef as useRef162, useMemo as useMemo78 } from "react";
+import { useState as useState126, useCallback as useCallback159, useEffect as useEffect131, useRef as useRef162, useMemo as useMemo78 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -87679,7 +88094,7 @@ function useLintModal(projectId, refreshKey) {
   const [linting, setLinting] = useState126(false);
   const [backgroundFindings, setBackgroundFindings] = useState126([]);
   const autoLintRanRef = useRef162(false);
-  const runBackgroundLint = useCallback158(async () => {
+  const runBackgroundLint = useCallback159(async () => {
     if (!projectId) return;
     if (!isPreviewBooted(projectId) && !await whenPreviewBooted(projectId)) return;
     try {
@@ -87687,7 +88102,7 @@ function useLintModal(projectId, refreshKey) {
     } catch {
     }
   }, [projectId]);
-  const handleLint = useCallback158(async () => {
+  const handleLint = useCallback159(async () => {
     if (!projectId) return;
     setLinting(true);
     try {
@@ -87716,8 +88131,8 @@ function useLintModal(projectId, refreshKey) {
     const timer = setTimeout(() => void runBackgroundLint(), 1e3);
     return () => clearTimeout(timer);
   }, [projectId, refreshKey, runBackgroundLint]);
-  const closeLintModal = useCallback158(() => setLintModal(null), []);
-  const groupFindings = useCallback158(
+  const closeLintModal = useCallback159(() => setLintModal(null), []);
+  const groupFindings = useCallback159(
     (keyFn) => {
       const map = /* @__PURE__ */ new Map();
       for (const f of backgroundFindings) {
@@ -87754,7 +88169,7 @@ function useLintModal(projectId, refreshKey) {
 }
 
 // src/hooks/useToast.ts
-import { useState as useState127, useCallback as useCallback159, useRef as useRef163 } from "react";
+import { useState as useState127, useCallback as useCallback160, useRef as useRef163 } from "react";
 var AUTO_DISMISS_MS2 = 4e3;
 var EXIT_MS2 = 160;
 var MAX_TOASTS = 3;
@@ -87762,21 +88177,21 @@ var nextToastId = 1;
 function useToast() {
   const [toasts, setToasts] = useState127([]);
   const timersRef = useRef163(/* @__PURE__ */ new Map());
-  const clearTimer = useCallback159((id) => {
+  const clearTimer = useCallback160((id) => {
     const timer = timersRef.current.get(id);
     if (timer) {
       clearTimeout(timer);
       timersRef.current.delete(id);
     }
   }, []);
-  const removeToast = useCallback159(
+  const removeToast = useCallback160(
     (id) => {
       clearTimer(id);
       setToasts((prev) => prev.filter((t2) => t2.id !== id));
     },
     [clearTimer]
   );
-  const dismissToast = useCallback159(
+  const dismissToast = useCallback160(
     (id) => {
       clearTimer(id);
       setToasts((prev) => prev.map((t2) => t2.id === id ? { ...t2, leaving: true } : t2));
@@ -87785,7 +88200,7 @@ function useToast() {
     },
     [clearTimer, removeToast]
   );
-  const showToast = useCallback159(
+  const showToast = useCallback160(
     (message, tone = "error") => {
       const id = nextToastId++;
       setToasts((prev) => {
@@ -87812,7 +88227,7 @@ function useToast() {
 }
 
 // src/hooks/useStudioUrlState.ts
-import { useCallback as useCallback160, useEffect as useEffect132, useRef as useRef164, useState as useState128 } from "react";
+import { useCallback as useCallback161, useEffect as useEffect132, useRef as useRef164, useState as useState128 } from "react";
 
 // src/utils/studioUrlState.ts
 var VALID_TABS = ["layers", "design", "renders", "slideshow", "variables"];
@@ -88051,7 +88466,7 @@ function useStudioUrlState({
   const pendingSelectionRef = useRef164(initialState2.selection);
   const stableTimeRef = useRef164(initialState2.currentTime);
   const selectionApplySeqRef = useRef164(0);
-  const buildUrlState = useCallback160(
+  const buildUrlState = useCallback161(
     () => ({
       activeCompPath,
       currentTime: stableTimeRef.current,
@@ -88062,7 +88477,7 @@ function useStudioUrlState({
     }),
     [activeCompPath, domEditGroupSelections, domEditSelection, rightCollapsed, rightPanelTab]
   );
-  const applyUrlSelection = useCallback160(
+  const applyUrlSelection = useCallback161(
     (selection) => {
       const applySeq = ++selectionApplySeqRef.current;
       if (!selection) {
@@ -88207,7 +88622,7 @@ function useEffectiveTimelineDuration(timelineDuration2, timelineElements) {
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback161, useMemo as useMemo80 } from "react";
+import { useCallback as useCallback162, useMemo as useMemo80 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -88252,11 +88667,11 @@ function useInspectorState(rightPanel, isPlaying, domEditSelection, isGestureRec
   }, [rightPanel, isPlaying, isGestureRecording, domEditSelection]);
 }
 function useFileDropTarget(onImportFiles) {
-  const onDragOver = useCallback161((e) => {
+  const onDragOver = useCallback162((e) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
   }, []);
-  const onDrop = useCallback161(
+  const onDrop = useCallback162(
     (e) => {
       if (e.defaultPrevented) return;
       e.preventDefault();
@@ -88267,7 +88682,7 @@ function useFileDropTarget(onImportFiles) {
   return { onDragOver, onDrop };
 }
 function useGlobalFileDrop(handleTimelineFileDrop) {
-  const onDrop = useCallback161(
+  const onDrop = useCallback162(
     (files) => {
       const start = usePlayerStore.getState().currentTime;
       void handleTimelineFileDrop(Array.from(files), { start, track: 0 });
@@ -88754,10 +89169,10 @@ var StudioHeader = memo44(function StudioHeader2({
 });
 
 // src/hooks/useGestureCommit.ts
-import { useState as useState131, useCallback as useCallback163, useRef as useRef167, useEffect as useEffect135 } from "react";
+import { useState as useState131, useCallback as useCallback164, useRef as useRef167, useEffect as useEffect135 } from "react";
 
 // src/hooks/useGestureRecording.ts
-import { useCallback as useCallback162, useEffect as useEffect134, useRef as useRef166, useState as useState130 } from "react";
+import { useCallback as useCallback163, useEffect as useEffect134, useRef as useRef166, useState as useState130 } from "react";
 function readBasePosition(element, iframeEl) {
   let baseOpacity = 1;
   let baseScale = 1;
@@ -88914,7 +89329,7 @@ function useGestureRecording() {
       r.cleanup = null;
     };
   }, []);
-  const startRecording = useCallback162(
+  const startRecording = useCallback163(
     (element, iframeEl, elementEndTime) => {
       if (isRecordingRef.current) return;
       isRecordingRef.current = true;
@@ -89013,7 +89428,7 @@ function useGestureRecording() {
     []
     // No deps — uses refs only for all mutable state
   );
-  const stopRecording = useCallback162(() => {
+  const stopRecording = useCallback163(() => {
     if (!isRecordingRef.current) return [];
     isRecordingRef.current = false;
     const r = refs.current;
@@ -89025,7 +89440,7 @@ function useGestureRecording() {
     setIsRecording(false);
     return frozen;
   }, []);
-  const clearSamples = useCallback162(() => {
+  const clearSamples = useCallback163(() => {
     const r = refs.current;
     r.samples = [];
     r.trail = [];
@@ -89297,7 +89712,7 @@ function useGestureCommit({
   const capturedSelectionRef = useRef167(null);
   const capturedAnimationsRef = useRef167([]);
   useEffect135(() => () => clearInterval(recordingAutoStopRef.current), []);
-  const cancelRecording = useCallback163(() => {
+  const cancelRecording = useCallback164(() => {
     clearInterval(recordingAutoStopRef.current);
     gestureRecording.stopRecording();
     gestureRecording.clearSamples();
@@ -89309,7 +89724,7 @@ function useGestureCommit({
   useEffect135(() => {
     if (readOnlyPreview && gestureStateRef.current === "recording") cancelRecording();
   }, [cancelRecording, readOnlyPreview]);
-  const stopAndCommitRecording = useCallback163(async () => {
+  const stopAndCommitRecording = useCallback164(async () => {
     clearInterval(recordingAutoStopRef.current);
     if (commitInFlightRef.current) {
       return;
@@ -89488,7 +89903,7 @@ function useGestureCommit({
       commitInFlightRef.current = false;
     }
   }, [gestureRecording, showToast, isGestureRecordingRef, domEditSessionRef]);
-  const armAutoStop = useCallback163(
+  const armAutoStop = useCallback164(
     (elementEnd) => {
       clearInterval(recordingAutoStopRef.current);
       const autoStopAt = elementEnd ?? Infinity;
@@ -89502,7 +89917,7 @@ function useGestureCommit({
     },
     [stopAndCommitRecording]
   );
-  const startRecording = useCallback163(
+  const startRecording = useCallback164(
     (method) => {
       if (readOnlyPreview) return;
       const sel = domEditSessionRef.current.domEditSelection;
@@ -89537,7 +89952,7 @@ function useGestureCommit({
       armAutoStop
     ]
   );
-  const handleToggleRecording = useCallback163(
+  const handleToggleRecording = useCallback164(
     (method = "button") => {
       if (commitInFlightRef.current) return;
       if (gestureStateRef.current === "recording") {
@@ -89699,7 +90114,7 @@ function useGestureTrailOverlay({
 import { useMemo as useMemo88 } from "react";
 
 // src/components/StudioLeftPanels.tsx
-import { memo as memo49, useCallback as useCallback171 } from "react";
+import { memo as memo49, useCallback as useCallback172 } from "react";
 
 // src/components/MediaPreview.tsx
 import { useState as useState132 } from "react";
@@ -89818,7 +90233,7 @@ function MediaPreview({ projectId, filePath }) {
 }
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo46, useState as useState138, useCallback as useCallback167, useRef as useRef172, useMemo as useMemo84, useEffect as useEffect141 } from "react";
+import { memo as memo46, useState as useState138, useCallback as useCallback168, useRef as useRef172, useMemo as useMemo84, useEffect as useEffect141 } from "react";
 
 // src/components/ui/SearchInput.tsx
 import { jsx as jsx210, jsxs as jsxs167 } from "react/jsx-runtime";
@@ -89929,11 +90344,11 @@ var CATEGORY_LABELS = {
 var FILTER_ORDER = ["audio", "images", "video", "fonts"];
 
 // src/components/sidebar/AudioRow.tsx
-import { useState as useState134, useRef as useRef170, useEffect as useEffect137, useCallback as useCallback165 } from "react";
+import { useState as useState134, useRef as useRef170, useEffect as useEffect137, useCallback as useCallback166 } from "react";
 import { classifyWebAudioMediaRoute } from "@hyperframes/core/runtime/web-audio-route";
 
 // src/components/sidebar/AssetContextMenu.tsx
-import { useCallback as useCallback164, useEffect as useEffect136, useLayoutEffect as useLayoutEffect14, useRef as useRef169, useState as useState133 } from "react";
+import { useCallback as useCallback165, useEffect as useEffect136, useLayoutEffect as useLayoutEffect14, useRef as useRef169, useState as useState133 } from "react";
 import { Fragment as Fragment59, jsx as jsx211, jsxs as jsxs168 } from "react/jsx-runtime";
 function isValidAssetName(name) {
   return name.length > 0 && !/[/\\]/.test(name) && !name.includes("..");
@@ -89993,7 +90408,7 @@ function ContextMenu3({
       menuRef.current?.querySelector('[role="menuitem"]')?.focus();
     }
   }, [mode]);
-  const commitRename = useCallback164(() => {
+  const commitRename = useCallback165(() => {
     const trimmed = renameDraft.trim();
     if (trimmed === filename(asset)) {
       onClose();
@@ -90209,7 +90624,7 @@ function AudioRow({
   const serveUrl = resolveMediaPreviewUrl(asset, projectId);
   const isCopied = copyFeedback?.path === asset && copyFeedback.ok;
   const copyFailed = copyFeedback?.path === asset && !copyFeedback.ok;
-  const stopPlayback = useCallback165(() => {
+  const stopPlayback = useCallback166(() => {
     audioRef.current?.pause();
     setPlaying(false);
     cancelAnimationFrame(animRef.current);
@@ -90220,7 +90635,7 @@ function AudioRow({
   const elements = usePlayerStore((s) => s.elements);
   const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
   const clearPreviewAsset = useAssetPreviewStore((s) => s.clearPreviewAsset);
-  const activateRow = useCallback165(() => {
+  const activateRow = useCallback166(() => {
     if (used) {
       const clip = findClipForAsset(elements, asset);
       if (clip) {
@@ -90242,10 +90657,10 @@ function AudioRow({
     setPreviewAsset,
     clearPreviewAsset
   ]);
-  const handlePointerDown = useCallback165((e) => {
+  const handlePointerDown = useCallback166((e) => {
     pointerDownRef.current = { x: e.clientX, y: e.clientY };
   }, []);
-  const handlePointerUp = useCallback165(
+  const handlePointerUp = useCallback166(
     (e) => {
       const origin2 = pointerDownRef.current;
       pointerDownRef.current = null;
@@ -90291,7 +90706,7 @@ function AudioRow({
     }
     return () => cancelAnimationFrame(animRef.current);
   }, [playing]);
-  const togglePlay = useCallback165(async () => {
+  const togglePlay = useCallback166(async () => {
     if (playing) {
       stopPlayback();
       if (stopCurrentPreview === stopPlayback) stopCurrentPreview = null;
@@ -90489,7 +90904,7 @@ function GlobalAssetsView({ searchQuery }) {
 }
 
 // src/components/sidebar/AssetCard.tsx
-import { useState as useState137, useEffect as useEffect140, useRef as useRef171, useCallback as useCallback166 } from "react";
+import { useState as useState137, useEffect as useEffect140, useRef as useRef171, useCallback as useCallback167 } from "react";
 
 // src/components/ui/VideoFrameThumbnail.tsx
 import { useState as useState136, useEffect as useEffect139 } from "react";
@@ -90636,10 +91051,10 @@ function AssetCard({
   const elements = usePlayerStore((s) => s.elements);
   const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
   const clearPreviewAsset = useAssetPreviewStore((s) => s.clearPreviewAsset);
-  const handlePointerDown = useCallback166((e) => {
+  const handlePointerDown = useCallback167((e) => {
     pointerDownRef.current = { x: e.clientX, y: e.clientY };
   }, []);
-  const activateCard = useCallback166(() => {
+  const activateCard = useCallback167(() => {
     if (used) {
       const clip = findClipForAsset(elements, asset);
       if (clip) {
@@ -90661,7 +91076,7 @@ function AssetCard({
     setPreviewAsset,
     clearPreviewAsset
   ]);
-  const handlePointerUp = useCallback166(
+  const handlePointerUp = useCallback167(
     (e) => {
       const origin2 = pointerDownRef.current;
       pointerDownRef.current = null;
@@ -90993,7 +91408,7 @@ var AssetsTab = memo46(function AssetsTab2({
       cancelled = true;
     };
   }, [projectId, assetsKey]);
-  const handleImport = useCallback167(
+  const handleImport = useCallback168(
     async (files) => {
       if (!onImport) return;
       setImporting(true);
@@ -91005,7 +91420,7 @@ var AssetsTab = memo46(function AssetsTab2({
     },
     [onImport]
   );
-  const handleDrop = useCallback167(
+  const handleDrop = useCallback168(
     (e) => {
       e.preventDefault();
       setDragOver(false);
@@ -91013,7 +91428,7 @@ var AssetsTab = memo46(function AssetsTab2({
     },
     [handleImport]
   );
-  const handleCopyPath = useCallback167(async (path) => {
+  const handleCopyPath = useCallback168(async (path) => {
     const copied = await copyTextToClipboard(path);
     setCopyFeedback({ path, ok: copied });
     setTimeout(() => setCopyFeedback(null), copied ? 1500 : 3e3);
@@ -91223,11 +91638,11 @@ var AssetsTab = memo46(function AssetsTab2({
 });
 
 // src/components/sidebar/BlocksTab.tsx
-import { memo as memo47, useState as useState140, useCallback as useCallback169, useRef as useRef174, useEffect as useEffect143 } from "react";
+import { memo as memo47, useState as useState140, useCallback as useCallback170, useRef as useRef174, useEffect as useEffect143 } from "react";
 import { createPortal as createPortal13 } from "react-dom";
 
 // src/components/sidebar/PromptPreviewModal.tsx
-import { useState as useState139, useCallback as useCallback168, useEffect as useEffect142, useRef as useRef173 } from "react";
+import { useState as useState139, useCallback as useCallback169, useEffect as useEffect142, useRef as useRef173 } from "react";
 import { jsx as jsx217, jsxs as jsxs173 } from "react/jsx-runtime";
 function PromptPreviewModal({
   title,
@@ -91253,7 +91668,7 @@ function PromptPreviewModal({
       textareaRef.current?.focus();
     });
   }, []);
-  const handleCopy2 = useCallback168(async () => {
+  const handleCopy2 = useCallback169(async () => {
     try {
       await navigator.clipboard.writeText(valueRef.current);
       setCopyState("copied");
@@ -91539,13 +91954,13 @@ function BlockCard({
   const hoverTimer = useRef174(null);
   const colors = getCategoryColors(category);
   const needsWebGL = tags?.includes("html-in-canvas") || tags?.includes("webgl");
-  const handleEnter = useCallback169(() => {
+  const handleEnter = useCallback170(() => {
     hoverTimer.current = setTimeout(() => {
       setHovered(true);
       onPreview?.({ videoUrl, posterUrl, title });
     }, 300);
   }, [onPreview, videoUrl, posterUrl, title]);
-  const handleLeave = useCallback169(() => {
+  const handleLeave = useCallback170(() => {
     if (hoverTimer.current) {
       clearTimeout(hoverTimer.current);
       hoverTimer.current = null;
@@ -91558,7 +91973,7 @@ function BlockCard({
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
     };
   }, []);
-  const handleAdd = useCallback169(
+  const handleAdd = useCallback170(
     async (e) => {
       e.stopPropagation();
       if (addState !== "idle" || !onAdd) return;
@@ -91574,7 +91989,7 @@ function BlockCard({
     [onAdd, addState]
   );
   const { activeCompPath, compositionDimensions } = useStudioShellContext();
-  const handleShowPrompt = useCallback169(
+  const handleShowPrompt = useCallback170(
     (e) => {
       e.stopPropagation();
       const state = usePlayerStore.getState();
@@ -91714,7 +92129,7 @@ function BlockCard({
 }
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo48, useCallback as useCallback170, useEffect as useEffect144, useLayoutEffect as useLayoutEffect15, useMemo as useMemo85, useRef as useRef175, useState as useState141 } from "react";
+import { memo as memo48, useCallback as useCallback171, useEffect as useEffect144, useLayoutEffect as useLayoutEffect15, useMemo as useMemo85, useRef as useRef175, useState as useState141 } from "react";
 import { jsx as jsx219, jsxs as jsxs175 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -91825,7 +92240,7 @@ function CompCard({
   const hoverTimer = useRef175(null);
   const syncTimer = useRef175(null);
   const draggedRef = useRef175(false);
-  const requestIframePlaybackSync = useCallback170((shouldPlay) => {
+  const requestIframePlaybackSync = useCallback171((shouldPlay) => {
     if (syncTimer.current) {
       clearTimeout(syncTimer.current);
       syncTimer.current = null;
@@ -92205,7 +92620,7 @@ var StudioLeftPanels = memo49(function StudioLeftPanels2({
     handleImportFiles,
     handleContentChange
   } = useFileManagerContext();
-  const handleRenderComposition = useCallback171(
+  const handleRenderComposition = useCallback172(
     async (comp) => {
       if (renderQueue.ffmpegMissing) {
         useDockLayoutStore.getState().activatePanel("renders");
@@ -92315,13 +92730,13 @@ function CodeBody({
 }
 
 // src/components/StudioRightPanels.tsx
-import { memo as memo59, useCallback as useCallback188 } from "react";
+import { memo as memo59, useCallback as useCallback189 } from "react";
 
 // src/components/editor/LayersPanel.tsx
-import { memo as memo50, useState as useState143, useCallback as useCallback173, useEffect as useEffect145, useRef as useRef177 } from "react";
+import { memo as memo50, useState as useState143, useCallback as useCallback174, useEffect as useEffect145, useRef as useRef177 } from "react";
 
 // src/components/editor/useLayerDrag.ts
-import { useRef as useRef176, useState as useState142, useCallback as useCallback172 } from "react";
+import { useRef as useRef176, useState as useState142, useCallback as useCallback173 } from "react";
 var DRAG_THRESHOLD_PX4 = 4;
 function isLayerDraggable(layer) {
   if (!(layer.selector || layer.id)) return false;
@@ -92391,7 +92806,7 @@ function useLayerDrag({
   const dragRef = useRef176(null);
   const [dragKey, setDragKey] = useState142(null);
   const [insertionLineY, setInsertionLineY] = useState142(null);
-  const handleRowPointerDown = useCallback172(
+  const handleRowPointerDown = useCallback173(
     (layerIndex, e) => {
       if (e.button !== 0) return;
       const layer = visibleLayers[layerIndex];
@@ -92418,7 +92833,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef, onSingleSibling]
   );
-  const handleContainerPointerMove = useCallback172(
+  const handleContainerPointerMove = useCallback173(
     (e) => {
       const drag = dragRef.current;
       if (!drag) return;
@@ -92444,7 +92859,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef]
   );
-  const handleContainerPointerUp = useCallback172(() => {
+  const handleContainerPointerUp = useCallback173(() => {
     const drag = dragRef.current;
     dragRef.current = null;
     setDragKey(null);
@@ -92619,7 +93034,7 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
   });
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
   const livePreviewIframe = useLivePreviewIframe();
-  const collectLayers = useCallback173(() => {
+  const collectLayers = useCallback174(() => {
     const iframe = previewIframeRef.current;
     if (!iframe) return;
     let doc = null;
@@ -92667,7 +93082,7 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
       throttle.cancel();
     };
   }, [collectLayers]);
-  const resolveSelection = useCallback173(
+  const resolveSelection = useCallback174(
     (layer) => {
       const doc = previewIframeRef.current?.contentDocument;
       const el = liveLayerElement(layer, doc, activeCompPath);
@@ -92680,7 +93095,7 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
     },
     [activeCompPath, isMasterView, previewIframeRef, activeGroupElement]
   );
-  const seekToLayer = useCallback173(
+  const seekToLayer = useCallback174(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (!selection) return;
@@ -92709,7 +93124,7 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
     },
     [currentTime, resolveSelection, timelineElements]
   );
-  const handleSelectLayer = useCallback173(
+  const handleSelectLayer = useCallback174(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (!selection) return;
@@ -92719,7 +93134,7 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
     },
     [resolveSelection, applyDomSelection, seekToLayer, scheduleReveal]
   );
-  const handleLayerDoubleClick = useCallback173(
+  const handleLayerDoubleClick = useCallback174(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (selection?.element.hasAttribute("data-hf-group")) {
@@ -92730,7 +93145,7 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
     },
     [resolveSelection, setActiveGroupElement, handleSelectLayer]
   );
-  const handleLayerHover = useCallback173(
+  const handleLayerHover = useCallback174(
     async (layer) => {
       if (!layer) {
         updateDomEditHoverSelection(null);
@@ -92741,11 +93156,11 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
     },
     [resolveSelection, updateDomEditHoverSelection]
   );
-  const toggleCollapse = useCallback173((key2, e) => {
+  const toggleCollapse = useCallback174((key2, e) => {
     e.stopPropagation();
     setCollapsed((prev) => ({ ...prev, [key2]: !prev[key2] }));
   }, []);
-  const handleReorder = useCallback173(
+  const handleReorder = useCallback174(
     (event) => {
       const { siblingLayers, fromIndex, toIndex } = event;
       const reordered = [...siblingLayers];
@@ -92808,7 +93223,7 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
   );
   const selectedKey = domEditSelection ? getDomEditLayerKey(domEditSelection) : null;
   const visibleLayers = getVisibleLayers(layers, collapsed);
-  const handleSingleSibling = useCallback173(() => {
+  const handleSingleSibling = useCallback174(() => {
     showToast("Only one layer at this level", "info");
   }, [showToast]);
   const {
@@ -92940,10 +93355,10 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
 });
 
 // src/captions/components/CaptionPropertyPanel.tsx
-import { memo as memo52, useCallback as useCallback175, useState as useState145 } from "react";
+import { memo as memo52, useCallback as useCallback176, useState as useState145 } from "react";
 
 // src/captions/components/CaptionAnimationPanel.tsx
-import { memo as memo51, useCallback as useCallback174 } from "react";
+import { memo as memo51, useCallback as useCallback175 } from "react";
 
 // src/captions/components/shared.tsx
 import { useEffect as useEffect146, useRef as useRef178, useState as useState144 } from "react";
@@ -93168,25 +93583,25 @@ var CaptionAnimationPanel = memo51(function CaptionAnimationPanel2() {
   }
   const group = resolvedGroupId ? model?.groups.get(resolvedGroupId) : void 0;
   const animation = group?.animation;
-  const handleEntranceChange = useCallback174(
+  const handleEntranceChange = useCallback175(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "entrance", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleHighlightChange = useCallback174(
+  const handleHighlightChange = useCallback175(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "highlight", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleExitChange = useCallback174(
+  const handleExitChange = useCallback175(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "exit", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleApplyToAll = useCallback174(() => {
+  const handleApplyToAll = useCallback175(() => {
     if (animation) applyAnimationToAll(animation);
   }, [animation, applyAnimationToAll]);
   if (!group || !resolvedGroupId || !animation) {
@@ -93286,7 +93701,7 @@ var CaptionPropertyPanel = memo52(function CaptionPropertyPanel2({
     ...groupStyle,
     ...segmentOverrides
   };
-  const applyToIframeDom = useCallback175(
+  const applyToIframeDom = useCallback176(
     (updates) => {
       const iframe = iframeRef.current;
       if (!iframe || !model) return;
@@ -93360,7 +93775,7 @@ var CaptionPropertyPanel = memo52(function CaptionPropertyPanel2({
     },
     [iframeRef, model, selectedSegmentIds]
   );
-  const handleStyleChange = useCallback175(
+  const handleStyleChange = useCallback176(
     (updates) => {
       if (selectedGroupId) {
         updateGroupStyle(selectedGroupId, updates);
@@ -93465,7 +93880,7 @@ var CaptionPropertyPanel = memo52(function CaptionPropertyPanel2({
 });
 
 // src/components/editor/BlockParamsPanel.tsx
-import { memo as memo53, useCallback as useCallback176, useEffect as useEffect147, useRef as useRef179, useState as useState146 } from "react";
+import { memo as memo53, useCallback as useCallback177, useEffect as useEffect147, useRef as useRef179, useState as useState146 } from "react";
 import { jsx as jsx227, jsxs as jsxs182 } from "react/jsx-runtime";
 var BlockParamsPanel = memo53(function BlockParamsPanel2({
   blockName,
@@ -93488,7 +93903,7 @@ var BlockParamsPanel = memo53(function BlockParamsPanel2({
   );
   const [commitState, setCommitState] = useState146({ tone: "idle" });
   const commitTimersRef = useRef179(/* @__PURE__ */ new Map());
-  const commitParamNow = useCallback176(
+  const commitParamNow = useCallback177(
     async (key2, nextValue) => {
       if (!fileManager) return;
       const previous = appliedRef.current[key2];
@@ -93533,7 +93948,7 @@ var BlockParamsPanel = memo53(function BlockParamsPanel2({
     },
     [fileManager, compositionPath, setRefreshKey, blockName]
   );
-  const commitParam = useCallback176(
+  const commitParam = useCallback177(
     (key2, nextValue) => fileManager ? serializeStudioFileMutation(
       fileManager.writeProjectFile,
       compositionPath,
@@ -93541,7 +93956,7 @@ var BlockParamsPanel = memo53(function BlockParamsPanel2({
     ) : Promise.resolve(),
     [commitParamNow, compositionPath, fileManager]
   );
-  const handleChange = useCallback176(
+  const handleChange = useCallback177(
     (key2, value) => {
       setValues((prev) => ({ ...prev, [key2]: value }));
       const timers = commitTimersRef.current;
@@ -93704,7 +94119,7 @@ import { createPortal as createPortal14 } from "react-dom";
 import { CANVAS_DIMENSIONS } from "@hyperframes/parsers";
 
 // src/components/renders/RenderQueueItem.tsx
-import { memo as memo54, useCallback as useCallback177, useState as useState147 } from "react";
+import { memo as memo54, useCallback as useCallback178, useState as useState147 } from "react";
 import { Fragment as Fragment64, jsx as jsx228, jsxs as jsxs183 } from "react/jsx-runtime";
 function formatDuration2(ms) {
   if (ms < 1e3) return `${ms}ms`;
@@ -93727,10 +94142,10 @@ var RenderQueueItem = memo54(function RenderQueueItem2({
   const [videoReady, setVideoReady] = useState147(false);
   const [confirmingDelete, setConfirmingDelete] = useState147(false);
   const fileSrc = buildProjectApiPath(projectId, `/renders/file/${job.filename}`);
-  const handleOpen = useCallback177(() => {
+  const handleOpen = useCallback178(() => {
     window.open(fileSrc, "_blank");
   }, [fileSrc]);
-  const handleDownload = useCallback177(
+  const handleDownload = useCallback178(
     (e) => {
       e.stopPropagation();
       const a = document.createElement("a");
@@ -94478,11 +94893,11 @@ var RenderQueuePanel = memo57(function RenderQueuePanel2() {
 });
 
 // src/components/panels/SlideshowPanel.tsx
-import { useState as useState151, useEffect as useEffect150, useCallback as useCallback179, useRef as useRef182 } from "react";
+import { useState as useState151, useEffect as useEffect150, useCallback as useCallback180, useRef as useRef182 } from "react";
 import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
-import { useState as useState150, useCallback as useCallback178, useId as useId6 } from "react";
+import { useState as useState150, useCallback as useCallback179, useId as useId6 } from "react";
 import { jsx as jsx232, jsxs as jsxs186 } from "react/jsx-runtime";
 function SectionHeader({
   children,
@@ -94670,7 +95085,7 @@ function BranchTree({
 }) {
   const [newLabel, setNewLabel] = useState150("");
   const inputId = useId6();
-  const handleCreate = useCallback178(() => {
+  const handleCreate = useCallback179(() => {
     const label = newLabel.trim();
     if (!label) return;
     onCreateSequence(label);
@@ -94732,7 +95147,7 @@ function BranchItem({
   const [editing, setEditing] = useState150(false);
   const [draft, setDraft] = useState150(seq.label);
   const [confirmingDelete, setConfirmingDelete] = useState150(false);
-  const commitRename = useCallback178(() => {
+  const commitRename = useCallback179(() => {
     const label = draft.trim();
     if (label && label !== seq.label) onRename(seq.id, label);
     setEditing(false);
@@ -94865,7 +95280,7 @@ function HotspotTool({
   const selectedElementId = domEditSelection?.element?.id ?? null;
   const selectedHfId = domEditSelection?.hfId ?? null;
   const elementKey3 = selectedElementId || selectedHfId;
-  const handleMakeHotspot = useCallback178(() => {
+  const handleMakeHotspot = useCallback179(() => {
     if (!selectedSceneId || !targetSequenceId || !elementKey3) return;
     const id = `hotspot-${elementKey3}-${generateId()}`;
     const label = hotspotLabel.trim() || elementKey3;
@@ -95190,7 +95605,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     setUndoDepth(0);
     setPersistError(false);
   }, [compHtml]);
-  const applyManifest = useCallback179(
+  const applyManifest = useCallback180(
     async (next, opts) => {
       const merged = notesCtrlRef.current.mergeIntoDiscrete(next);
       if (!opts?.skipUndo) {
@@ -95210,14 +95625,14 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [onPersist]
   );
-  const handleUndo = useCallback179(() => {
+  const handleUndo = useCallback180(() => {
     const prev = undoStackRef.current.pop();
     if (!prev) return;
     setUndoDepth(undoStackRef.current.length);
     applyManifest(prev, { skipUndo: true }).catch(() => {
     });
   }, [applyManifest]);
-  const handleRetryPersist = useCallback179(async () => {
+  const handleRetryPersist = useCallback180(async () => {
     setRetrying(true);
     try {
       await onPersist(manifestRef.current);
@@ -95228,7 +95643,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
       setRetrying(false);
     }
   }, [onPersist]);
-  const applyNotesManifest = useCallback179(
+  const applyNotesManifest = useCallback180(
     (next) => {
       setManifest(next);
       manifestRef.current = next;
@@ -95242,7 +95657,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
       ctrl.flush();
     };
   }, []);
-  const toggleSection = useCallback179((key2) => {
+  const toggleSection = useCallback180((key2) => {
     setExpandedSections((prev) => {
       const next = new Set(prev);
       if (next.has(key2)) {
@@ -95256,25 +95671,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 = useCallback179((sequenceId, sceneId) => {
+  const handleSelectBranchSlide = useCallback180((sequenceId, sceneId) => {
     setSelectedSceneId(sceneId);
     setSelectedSequenceId(sequenceId);
   }, []);
-  const handleToggleSlide = useCallback179(
+  const handleToggleSlide = useCallback180(
     (sceneId) => {
       applyManifest(toggleMainLineSlide(manifestRef.current, sceneId)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleReorder = useCallback179(
+  const handleReorder = useCallback180(
     (sceneId, dir) => {
       applyManifest(reorderMainLineSlide(manifestRef.current, sceneId, dir)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleSetNotes = useCallback179(
+  const handleSetNotes = useCallback180(
     (notes) => {
       if (!selectedSceneId) return;
       applyNotesManifest(
@@ -95283,7 +95698,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSceneId, selectedSequenceId, applyNotesManifest]
   );
-  const handleMarkFragment = useCallback179(() => {
+  const handleMarkFragment = useCallback180(() => {
     if (!selectedSceneId) return;
     applyManifest(
       addFragment(
@@ -95295,7 +95710,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     ).catch(() => {
     });
   }, [selectedSceneId, selectedSequenceId, currentTime, applyManifest]);
-  const handleRemoveFragment = useCallback179(
+  const handleRemoveFragment = useCallback180(
     (time) => {
       if (!selectedSceneId) return;
       applyManifest(
@@ -95305,7 +95720,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSceneId, selectedSequenceId, applyManifest]
   );
-  const handleCreateSequence = useCallback179(
+  const handleCreateSequence = useCallback180(
     (label) => {
       const id = `seq-${generateId()}`;
       applyManifest(createSequence(manifestRef.current, id, label)).catch(() => {
@@ -95313,21 +95728,21 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleRenameSequence = useCallback179(
+  const handleRenameSequence = useCallback180(
     (id, label) => {
       applyManifest(renameSequence(manifestRef.current, id, label)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleDeleteSequence = useCallback179(
+  const handleDeleteSequence = useCallback180(
     (id) => {
       applyManifest(deleteSequence(manifestRef.current, id)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleAssign = useCallback179(
+  const handleAssign = useCallback180(
     (sequenceId, sceneId, assign) => {
       applyManifest(assignToBranch(manifestRef.current, sequenceId, sceneId, assign)).catch(
         () => {
@@ -95336,7 +95751,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleAddHotspot = useCallback179(
+  const handleAddHotspot = useCallback180(
     (sceneId, hotspot) => {
       applyManifest(
         addHotspot(manifestRef.current, sceneId, hotspot, selectedSequenceId ?? void 0)
@@ -95345,7 +95760,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSequenceId, applyManifest]
   );
-  const handleRemoveHotspot = useCallback179(
+  const handleRemoveHotspot = useCallback180(
     (sceneId, hotspotId) => {
       applyManifest(
         removeHotspot(manifestRef.current, sceneId, hotspotId, selectedSequenceId ?? void 0)
@@ -95495,10 +95910,10 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo58, useCallback as useCallback183, useEffect as useEffect152, useMemo as useMemo86, useState as useState155 } from "react";
+import { memo as memo58, useCallback as useCallback184, useEffect as useEffect152, useMemo as useMemo86, useState as useState155 } from "react";
 
 // src/hooks/useVariablesPersist.ts
-import { useCallback as useCallback180 } from "react";
+import { useCallback as useCallback181 } from "react";
 function useVariablesPersist({
   sdkSession,
   activeCompPath,
@@ -95508,7 +95923,7 @@ function useVariablesPersist({
   reloadPreview,
   publishSdkSession
 }) {
-  return useCallback180(
+  return useCallback181(
     async (label, mutate) => {
       if (!sdkSession) return false;
       const path = activeCompPath ?? "index.html";
@@ -95543,10 +95958,10 @@ function useVariablesPersist({
 }
 
 // src/components/panels/VariablesOtherCompositions.tsx
-import { useCallback as useCallback182, useState as useState154 } from "react";
+import { useCallback as useCallback183, useState as useState154 } from "react";
 
 // src/hooks/useProjectCompositionVariables.ts
-import { useCallback as useCallback181, useEffect as useEffect151, useState as useState152 } from "react";
+import { useCallback as useCallback182, useEffect as useEffect151, useState as useState152 } from "react";
 import { openComposition as openComposition4 } from "@hyperframes/sdk";
 async function readGroup(path, readProjectFile) {
   let content;
@@ -95589,7 +96004,7 @@ function useProjectCompositionVariables(compositionPaths, excludePath, readProje
 }
 function useEditVariablesInFile(deps) {
   const { readProjectFile, writeProjectFile, recordEdit, reloadPreview } = deps;
-  return useCallback181(
+  return useCallback182(
     async (path, label, mutate) => {
       const originalContent = await readProjectFile(path);
       await persistSdkSerialize(
@@ -95966,7 +96381,7 @@ function VariablesOtherCompositions({
     reloadPreview
   });
   const [editingKey, setEditingKey] = useState154(null);
-  const onSave = useCallback182(
+  const onSave = useCallback183(
     (path, decl) => {
       setEditingKey(null);
       void editInFile(
@@ -95977,7 +96392,7 @@ function VariablesOtherCompositions({
     },
     [editInFile]
   );
-  const onRemove = useCallback182(
+  const onRemove = useCallback183(
     (path, id) => {
       void editInFile(
         path,
@@ -96211,7 +96626,7 @@ var VariablesPanel = memo58(function VariablesPanel2({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
   );
-  const copyToClipboard = useCallback183(
+  const copyToClipboard = useCallback184(
     (text, what) => {
       void copyTextToClipboard(text).then(
         (ok) => showToast(
@@ -96222,7 +96637,7 @@ var VariablesPanel = memo58(function VariablesPanel2({
     },
     [showToast]
   );
-  const dropPreviewOverride = useCallback183(
+  const dropPreviewOverride = useCallback184(
     (id) => {
       if (previewValues && id in previewValues) {
         const next = { ...previewValues };
@@ -96232,7 +96647,7 @@ var VariablesPanel = memo58(function VariablesPanel2({
     },
     [previewValues, setPreviewValues]
   );
-  const commitPreviewValue = useCallback183(
+  const commitPreviewValue = useCallback184(
     (id, value, declDefault) => {
       const next = { ...previewValues ?? {} };
       if (JSON.stringify(value) === JSON.stringify(declDefault)) {
@@ -96245,7 +96660,7 @@ var VariablesPanel = memo58(function VariablesPanel2({
     },
     [previewValues, setPreviewValues, reloadPreview]
   );
-  const runSchemaEdit = useCallback183(
+  const runSchemaEdit = useCallback184(
     async (label, mutate) => {
       try {
         const changed = await persistVariables(label, mutate);
@@ -96259,7 +96674,7 @@ var VariablesPanel = memo58(function VariablesPanel2({
     },
     [persistVariables, showToast]
   );
-  const handleAdd = useCallback183(
+  const handleAdd = useCallback184(
     (decl) => {
       if (!sdkSession) return;
       const check = sdkSession.can({ type: "declareVariable", declaration: decl });
@@ -96272,7 +96687,7 @@ var VariablesPanel = memo58(function VariablesPanel2({
     },
     [sdkSession, runSchemaEdit, showToast]
   );
-  const handleUpdate = useCallback183(
+  const handleUpdate = useCallback184(
     (decl) => {
       if (!sdkSession) return;
       const check = sdkSession.can({
@@ -96292,7 +96707,7 @@ var VariablesPanel = memo58(function VariablesPanel2({
     },
     [sdkSession, runSchemaEdit, showToast]
   );
-  const handleRemove = useCallback183(
+  const handleRemove = useCallback184(
     (id) => {
       if (!sdkSession) return;
       const check = sdkSession.can({ type: "removeVariableDeclaration", id });
@@ -96308,18 +96723,18 @@ var VariablesPanel = memo58(function VariablesPanel2({
     },
     [sdkSession, runSchemaEdit, dropPreviewOverride, showToast]
   );
-  const handleSetDefault = useCallback183(
+  const handleSetDefault = useCallback184(
     (id, value) => {
       void runSchemaEdit(`Set default for "${id}"`, (s) => s.setVariableValue(id, value));
       dropPreviewOverride(id);
     },
     [runSchemaEdit, dropPreviewOverride]
   );
-  const resetPreview = useCallback183(() => {
+  const resetPreview = useCallback184(() => {
     setPreviewValues(null);
     reloadPreview();
   }, [setPreviewValues, reloadPreview]);
-  const handleBind = useCallback183(
+  const handleBind = useCallback184(
     // Guard chain (session, selection, type-compat) — one branch per guard.
     // fallow-ignore-next-line complexity
     (action, id) => {
@@ -96431,7 +96846,7 @@ var VariablesPanel = memo58(function VariablesPanel2({
 });
 
 // src/hooks/useSlideshowPersist.ts
-import { useCallback as useCallback184 } from "react";
+import { useCallback as useCallback185 } from "react";
 
 // src/utils/setSlideshowManifest.ts
 import {
@@ -96488,7 +96903,7 @@ function useSlideshowPersist({
   publishSdkSession,
   coalesceKey
 }) {
-  return useCallback184(
+  return useCallback185(
     async (manifest) => {
       if (!sdkSession) return;
       const path = activeCompPath ?? "index.html";
@@ -96546,7 +96961,7 @@ function useSlideshowTabState(params) {
 }
 
 // src/components/DesignPanelPromoteProvider.tsx
-import { useCallback as useCallback185 } from "react";
+import { useCallback as useCallback186 } from "react";
 import { jsx as jsx238 } from "react/jsx-runtime";
 function DesignPanelPromoteProvider({
   selection,
@@ -96565,7 +96980,7 @@ function DesignPanelPromoteProvider({
     publishSdkSession: handle.publish,
     activeCompPath: targetPath
   });
-  const persist2 = useCallback185(
+  const persist2 = useCallback186(
     async (label, mutate) => {
       const committed = await rawPersist(label, mutate);
       if (committed) forceReloadSharedSdkSession?.();
@@ -96573,7 +96988,7 @@ function DesignPanelPromoteProvider({
     },
     [rawPersist, forceReloadSharedSdkSession]
   );
-  const handlePersistError = useCallback185(
+  const handlePersistError = useCallback186(
     (error) => showToast(getStudioSaveErrorMessage(error), "error"),
     [showToast]
   );
@@ -96590,7 +97005,7 @@ function DesignPanelPromoteProvider({
 }
 
 // src/hooks/useRemoveBackground.ts
-import { useCallback as useCallback186, useEffect as useEffect153, useRef as useRef183 } from "react";
+import { useCallback as useCallback187, useEffect as useEffect153, useRef as useRef183 } from "react";
 
 // src/components/studioMediaJobs.ts
 var MEDIA_JOB_RECONNECT_TIMEOUT_MS = 15e3;
@@ -96703,7 +97118,7 @@ function useRemoveBackground(projectId, refreshFileTree, showToast) {
     },
     []
   );
-  return useCallback186(
+  return useCallback187(
     // fallow-ignore-next-line complexity
     async (inputPath, options) => {
       const response = await studioApiFetch(
@@ -96742,7 +97157,7 @@ function useRemoveBackground(projectId, refreshFileTree, showToast) {
 }
 
 // src/hooks/useApplyColorGradingScope.ts
-import { useCallback as useCallback187 } from "react";
+import { useCallback as useCallback188 } from "react";
 
 // src/components/editor/colorGradingScopePatch.ts
 var MEDIA_TAG_RE = /<\s*(video|img)\b(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
@@ -96846,7 +97261,7 @@ function useApplyColorGradingScope(recordEdit, reloadPreview) {
   const { projectId, activeCompPath, showToast, waitForPendingDomEditSaves } = useStudioShellContext();
   const { domEditSelection } = useDomEditContext();
   const { readProjectFile, writeProjectFile, compositions } = useFileManagerContext();
-  return useCallback187(
+  return useCallback188(
     async (scope, value) => applyColorGradingScopeUpdate({
       scope,
       value,
@@ -96994,11 +97409,11 @@ var StudioRightPanels = memo59(function StudioRightPanels2({
   useCaptionDesignFocus(captionEditMode);
   const handleApplyColorGradingScope = useApplyColorGradingScope(recordEdit, reloadPreview);
   const handleRemoveBackground = useRemoveBackground(projectId, refreshFileTree, showToast);
-  const setAttributeWhileDragging = useCallback188(
+  const setAttributeWhileDragging = useCallback189(
     (attr, value) => handleDomAttributeLiveCommit(attr, value, void 0, { previewOnly: true }),
     [handleDomAttributeLiveCommit]
   );
-  const handleHideAllSelected = useCallback188(() => {
+  const handleHideAllSelected = useCallback189(() => {
     if (!canHideSelections(domEditGroupSelections)) {
       showToast("Audio can't be hidden \u2014 use the group's own controls", "info");
       return;
@@ -97007,7 +97422,7 @@ var StudioRightPanels = memo59(function StudioRightPanels2({
     const keys = timelineKeysForSelections(domEditGroupSelections, elements, activeCompPath);
     if (keys.length > 0) void onToggleElementHidden?.(keys, true);
   }, [domEditGroupSelections, showToast, activeCompPath, onToggleElementHidden]);
-  const convertToKeyframes = useCallback188(
+  const convertToKeyframes = useCallback189(
     (animId, duration) => handleGsapConvertToKeyframes(animId, void 0, duration),
     [handleGsapConvertToKeyframes]
   );
@@ -97163,340 +97578,6 @@ import {
   MagnifyingGlassPlus
 } from "@phosphor-icons/react";
 
-// src/hooks/useEnableKeyframes.ts
-import { useCallback as useCallback189 } from "react";
-var enableKeyframesTransactionCounter = 0;
-function animatedProps(anim) {
-  if (!anim) return ["x", "y"];
-  const own = Object.keys(anim.properties ?? {});
-  if (own.length > 0) return own;
-  const stops = anim.keyframes?.keyframes;
-  if (stops?.length) {
-    const keys = /* @__PURE__ */ new Set();
-    for (const stop2 of stops) for (const k of Object.keys(stop2.properties ?? {})) keys.add(k);
-    if (keys.size > 0) return [...keys];
-  }
-  return ["x", "y"];
-}
-function isPlayheadWithinTween(anim, currentTime) {
-  const start = resolveTweenStart(anim);
-  if (start === null) return true;
-  return isTimeWithinTween(currentTime, start, resolveTweenDuration(anim));
-}
-async function replaceSetWithSingleKeyframe(session, sel, setAnim, t2, iframe, selector) {
-  const position = readElementPosition(iframe, sel, setAnim);
-  if (Object.keys(position).length === 0) {
-    for (const [key2, held] of Object.entries(setAnim.properties ?? {})) {
-      if (typeof held === "number") position[key2] = held;
-    }
-  }
-  if (Object.keys(position).length === 0 || !session.commitMutation) return;
-  const range = resolveNewTweenRange(sel.dataAttributes?.start, sel.dataAttributes?.duration, t2);
-  await session.commitMutation(
-    {
-      type: "replace-with-keyframes",
-      animationId: setAnim.id,
-      targetSelector: selector,
-      position: roundTo3(range.start),
-      duration: roundTo3(range.duration),
-      keyframes: [{ percentage: 0, properties: position }],
-      ease: setAnim.ease
-    },
-    { label: "Enable keyframes", keyframeAction: "add", softReload: true }
-  );
-}
-function readElementPosition(iframe, sel, anim) {
-  const result = {};
-  if (!iframe?.contentWindow) return result;
-  let gsap3;
-  try {
-    gsap3 = iframe.contentWindow.gsap;
-  } catch {
-    return result;
-  }
-  const element = sel.element;
-  if (!element?.isConnected || !gsap3?.getProperty) return result;
-  const props = animatedProps(anim);
-  for (const prop of props) {
-    const val = Number(gsap3.getProperty(element, prop));
-    if (!Number.isFinite(val)) continue;
-    result[prop] = POSITION_PROPS.has(prop) ? Math.round(val) : roundTo3(val);
-  }
-  return result;
-}
-function resolveNewTweenRange(authoredStart, authoredDuration, currentTime) {
-  const t2 = Math.max(0, roundTo3(currentTime));
-  const start = authoredStart != null ? Number.parseFloat(authoredStart) : Number.NaN;
-  const duration = authoredDuration != null ? Number.parseFloat(authoredDuration) : Number.NaN;
-  if (!Number.isFinite(start) || !Number.isFinite(duration) || duration <= 0) {
-    return { start: t2, duration: 1 };
-  }
-  const end = start + duration;
-  const clampedStart = Math.min(Math.max(t2, start), end);
-  return { start: clampedStart, duration: Math.max(0.5, roundTo3(end - clampedStart)) };
-}
-async function tryFetchAnimationsForElement(sel) {
-  const projectId = window.location.hash.match(/project\/([^?/]+)/)?.[1];
-  if (!projectId) return null;
-  const sourceFile = sel.sourceFile || "index.html";
-  const parsed = await fetchParsedAnimations(projectId, sourceFile);
-  if (!parsed) return null;
-  return getAnimationsForElement(parsed.animations, {
-    id: sel.id,
-    selector: sel.selector
-  });
-}
-async function fetchAnimationsForElement(sel) {
-  return await tryFetchAnimationsForElement(sel) ?? [];
-}
-async function extendKeyframedTweenToPlayhead(session, sel, anim, currentTime, duration, iframe, commitOverrides) {
-  const selector = existingTweenTargetSelector(anim, sel);
-  const position = readElementPosition(iframe, sel, anim);
-  if (!selector || Object.keys(position).length === 0 || !session.commitMutation) return;
-  const extended = buildExtendedKeyframes(anim, currentTime, position, duration);
-  await session.commitMutation(
-    {
-      type: "replace-with-keyframes",
-      animationId: anim.id,
-      targetSelector: selector,
-      position: extended.position,
-      duration: extended.duration,
-      keyframes: extended.keyframes,
-      ...keyframeEases(anim)
-    },
-    {
-      label: "Add keyframe",
-      keyframeAction: "add",
-      softReload: true,
-      ...commitOverrides
-    }
-  );
-}
-async function applyKeyframeAtPlayhead(session, sel, kfAnim, t2, iframe, commitOverrides, liveTween) {
-  const keepAuthoredDuration = kfAnim.durationUnresolved === true;
-  if (keepAuthoredDuration) {
-    kfAnim = withLiveTiming(kfAnim, liveTween ?? findParsedTween(iframe, sel.element, kfAnim));
-  }
-  if (keepAuthoredDuration && kfAnim.duration == null) return;
-  const duration = resolveTweenDuration(kfAnim);
-  const start = resolveTweenStart(kfAnim);
-  if (start !== null && !isTimeWithinTween(t2, start, duration)) {
-    if (keepAuthoredDuration) return;
-    await extendKeyframedTweenToPlayhead(
-      session,
-      sel,
-      kfAnim,
-      t2,
-      duration,
-      iframe,
-      commitOverrides
-    );
-    return;
-  }
-  const pct = start === null ? computeElementPercentage(t2, sel) : absoluteToPercentageForAnimation(t2, kfAnim) ?? 0;
-  const existing = kfAnim.keyframes?.keyframes.find((k) => playsNear(kfAnim, k.percentage, pct));
-  if (existing) {
-    session.handleGsapRemoveKeyframe(kfAnim.id, existing.percentage);
-    return;
-  }
-  if (session.handleGsapAddKeyframeBatch) {
-    const position = readElementPosition(iframe, sel, kfAnim);
-    if (Object.keys(position).length > 0) {
-      await session.handleGsapAddKeyframeBatch(kfAnim.id, pct, position, commitOverrides);
-    }
-  }
-}
-async function promoteSetToKeyframes(session, sel, setAnim, t2, iframe) {
-  const selector = existingTweenTargetSelector(setAnim, sel);
-  const setStart = resolveTweenStart(setAnim) ?? 0;
-  if (!selector || !session.commitMutation) return;
-  if (t2 <= setStart) {
-    await replaceSetWithSingleKeyframe(session, sel, setAnim, t2, iframe, selector);
-    return;
-  }
-  const endPosition = readElementPosition(iframe, sel, setAnim);
-  if (Object.keys(endPosition).length === 0) return;
-  const startPosition = {};
-  for (const key2 of Object.keys(endPosition)) {
-    const held = setAnim.properties?.[key2];
-    if (typeof held === "number") startPosition[key2] = held;
-  }
-  await session.commitMutation(
-    {
-      type: "replace-with-keyframes",
-      animationId: setAnim.id,
-      targetSelector: selector,
-      position: roundTo3(setStart),
-      duration: roundTo3(t2 - setStart),
-      keyframes: [
-        {
-          percentage: 0,
-          properties: Object.keys(startPosition).length > 0 ? startPosition : endPosition,
-          auto: true
-        },
-        { percentage: 100, properties: endPosition }
-      ],
-      ease: setAnim.ease
-    },
-    { label: "Add keyframe", keyframeAction: "add", softReload: true }
-  );
-}
-async function applyArcKeyframeAtPlayhead(session, sel, arcAnim, t2, iframe) {
-  if (!session.commitMutation) return;
-  const targetSelector = existingTweenTargetSelector(arcAnim, sel);
-  if (!targetSelector) return;
-  const start = resolveTweenStart(arcAnim) ?? 0;
-  const duration = resolveTweenDuration(arcAnim);
-  if (!isTimeWithinTween(t2, start, duration)) {
-    const held = readElementPosition(iframe, sel, arcAnim);
-    if (t2 <= start || typeof held.x !== "number" || typeof held.y !== "number") return;
-    const extended = buildExtendedKeyframes(arcAnim, t2, { x: held.x, y: held.y }, duration, "none");
-    await session.commitMutation(
-      {
-        type: "replace-with-keyframes",
-        animationId: arcAnim.id,
-        targetSelector,
-        position: extended.position,
-        duration: extended.duration,
-        keyframes: extended.keyframes,
-        ease: "none"
-      },
-      { label: "Add keyframe", keyframeAction: "add", softReload: true }
-    );
-    return;
-  }
-  const nodes = linearArcKeyframes(arcAnim);
-  const playheadPercentage = absoluteToPercentage(t2, start, duration);
-  const timedNodeIndex = nodes.findIndex(
-    (node) => Math.abs(node.percentage - playheadPercentage) <= KEYFRAME_PCT_MATCH
-  );
-  if (timedNodeIndex !== -1) {
-    if (timedNodeIndex > 0 && timedNodeIndex < nodes.length - 1) {
-      await session.commitMutation(
-        {
-          type: "replace-with-keyframes",
-          animationId: arcAnim.id,
-          targetSelector,
-          position: roundTo3(start),
-          duration: roundTo3(duration),
-          keyframes: nodes.filter((_, index) => index !== timedNodeIndex),
-          ease: "none"
-        },
-        { label: "Remove keyframe", softReload: true }
-      );
-    }
-    return;
-  }
-  const live = readElementPosition(iframe, sel, arcAnim);
-  if (typeof live.x !== "number" || typeof live.y !== "number") return;
-  await session.commitMutation(
-    {
-      type: "replace-with-keyframes",
-      animationId: arcAnim.id,
-      targetSelector,
-      position: roundTo3(start),
-      duration: roundTo3(duration),
-      keyframes: buildTemporalArcKeyframes(arcAnim, playheadPercentage, {
-        x: live.x,
-        y: live.y
-      }),
-      ease: "none"
-    },
-    { label: "Add keyframe", keyframeAction: "add", softReload: true }
-  );
-}
-function useEnableKeyframes(sessionRef) {
-  return useCallback189(async () => {
-    const session = sessionRef.current;
-    if (!session) return;
-    const sel = session.domEditSelection;
-    if (!sel) return;
-    const t2 = usePlayerStore.getState().currentTime;
-    const iframe = session.previewIframeRef?.current ?? null;
-    const fetched = await tryFetchAnimationsForElement(sel);
-    const anims = fetched ?? session.selectedGsapAnimations;
-    const arcAnim = anims.find((a) => a.arcPath);
-    const kfAnim = anims.find((a) => a.keyframes && !a.arcPath);
-    const setAnim = anims.find((a) => isInstantHold(a) && !a.keyframes && !a.arcPath);
-    const flatAnim = anims.find((a) => !a.keyframes && !a.arcPath && !isInstantHold(a));
-    if (arcAnim) {
-      await applyArcKeyframeAtPlayhead(session, sel, arcAnim, t2, iframe);
-    } else if (kfAnim) {
-      await applyKeyframeAtPlayhead(session, sel, kfAnim, t2, iframe);
-    } else if (setAnim) {
-      await promoteSetToKeyframes(session, sel, setAnim, t2, iframe);
-    } else if (flatAnim) {
-      const flatLive = flatAnim.durationUnresolved ? findParsedTween(iframe, sel.element, flatAnim) : void 0;
-      enableKeyframesTransactionCounter += 1;
-      const coalesceKey = `enable-keyframes:${flatAnim.id}:${enableKeyframesTransactionCounter}`;
-      const convertCommitOverrides = {
-        keyframeTelemetry: false,
-        skipReload: true,
-        coalesceKey,
-        coalesceMs: Number.POSITIVE_INFINITY
-      };
-      await session.handleGsapConvertToKeyframes(
-        flatAnim.id,
-        void 0,
-        void 0,
-        convertCommitOverrides
-      );
-      const converted = (await fetchAnimationsForElement(sel)).find((a) => a.keyframes);
-      if (converted) {
-        const applyCommitOverrides = {
-          softReload: true,
-          coalesceKey,
-          // Must match the convert phase's window: editHistory keys coalescing
-          // off the incoming entry, so without Infinity here the apply (landing
-          // after two POSTs + a fetch) falls back to the 300ms default and the
-          // conversion splits into two undo entries under real latency.
-          coalesceMs: Number.POSITIVE_INFINITY
-        };
-        await applyKeyframeAtPlayhead(
-          session,
-          sel,
-          converted,
-          t2,
-          iframe,
-          applyCommitOverrides,
-          flatLive
-        );
-      }
-    } else {
-      const position = readElementPosition(iframe, sel, null);
-      const { start: elStart, duration: elDuration } = resolveNewTweenRange(
-        sel.dataAttributes?.start,
-        sel.dataAttributes?.duration,
-        t2
-      );
-      const selector = writeTargetSelector(sel);
-      if (!selector) {
-        session.handleGsapAddAnimation("to");
-        return;
-      }
-      if (Object.keys(position).length === 0) {
-        position.x = 0;
-        position.y = 0;
-      }
-      const keyframes = [{ percentage: 0, properties: { ...position } }];
-      if (session.commitMutation) {
-        await session.commitMutation(
-          {
-            type: "add-with-keyframes",
-            targetSelector: selector,
-            position: roundTo3(elStart),
-            duration: roundTo3(elDuration),
-            keyframes
-          },
-          { label: "Enable keyframes", softReload: true }
-        );
-      } else {
-        session.handleGsapAddAnimation("to");
-      }
-    }
-  }, [sessionRef]);
-}
-
 // src/hooks/useKeyframeKeyboard.ts
 import { useEffect as useEffect154, useCallback as useCallback190 } from "react";
 function useKeyframeKeyboard({ enabled, onAddKeyframe }) {