@hyperframes/studio 0.8.133 → 0.8.135

package/dist/index.js

@@ -39,7 +39,7 @@ import {
   usePreviewVariablesStore,
   whenPreviewBooted,
   writeStudioUiPreferences
-} from "./chunk-FOEID72M.js";
+} from "./chunk-QRLKWENQ.js";
 import {
   Button,
   ContextMenu,
@@ -71,7 +71,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-5VSXRGIX.js";
+} from "./chunk-NM7BXNZ7.js";
 import {
   DOM_EDIT_LAYER_OBSERVER_INIT,
   STUDIO_FLAT_INSPECTOR_ENABLED,
@@ -4504,6 +4504,7 @@ function timingEase(runEase) {
   }
   return timingEases.get(runEase) ?? null;
 }
+var warpsTime = (runEase) => timingEase(runEase) !== null;
 function progressAtTime(runEase, timePercentage) {
   const run = timingEase(runEase);
   return run ? run(timePercentage / 100) * 100 : timePercentage;
@@ -4592,7 +4593,7 @@ var PROPERTY_DEFAULTS = {
 };
 function keyframeEases(anim) {
   if (!anim.keyframes) return { easeEach: anim.ease };
-  return { ease: anim.ease, easeEach: anim.keyframes.easeEach };
+  return { ease: runEaseOf(anim), easeEach: anim.keyframes.easeEach };
 }
 function isInstantHold(animation) {
   return animation.method === "set" || (animation.method === "to" || animation.method === "fromTo") && resolveTweenDuration(animation) === 0;
@@ -9465,15 +9466,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;
@@ -9501,14 +9511,35 @@ function trackStudioPendingEdit(result) {
   );
   return promise;
 }
-function trackedStudioEdit(edit) {
+var flushedSavesStillWriting = null;
+function commitOlderDebouncedEdits() {
+  if (typeof window === "undefined" || adopting) return;
+  const detail = { promises: [] };
+  window.dispatchEvent(
+    new CustomEvent(STUDIO_FLUSH_PENDING_EDITS_EVENT, { detail })
+  );
+  if (!detail.promises.length) return;
+  const saves = Promise.allSettled([flushedSavesStillWriting, ...detail.promises]);
+  flushedSavesStillWriting = saves;
+  void saves.then(() => {
+    if (flushedSavesStillWriting === saves) flushedSavesStillWriting = null;
+  });
+}
+function afterOlderSaves(run) {
+  return flushedSavesStillWriting && flushedSavesStillWriting.then(run);
+}
+function trackedStudioEdit(edit, { afterOlderSaves: waits = false } = {}) {
   return (...args) => {
+    commitOlderDebouncedEdits();
+    const deferred = waits && !adopting ? afterOlderSaves(() => edit(...args)) : null;
+    if (deferred) return trackStudioPendingEdit(deferred);
     const result = edit(...args);
     if (result instanceof Promise) trackStudioPendingEdit(result);
     return result;
   };
 }
 function beginStudioPendingEdit(revert) {
+  commitOlderDebouncedEdits();
   let settle;
   const promise = trackStudioPendingEdit(new Promise((resolve) => settle = resolve));
   const entry2 = pendingEdits.get(promise);
@@ -9548,7 +9579,8 @@ function beginStudioPendingEdit(revert) {
     // Only what `start` registers synchronously is adopted; a later write joins only through `within`.
     adopt(start) {
       try {
-        const committed = inFlight.within(start);
+        const deferred = afterOlderSaves(() => inFlight.within(start));
+        const committed = deferred ?? inFlight.within(start);
         landed = Promise.resolve(committed).then(
           () => true,
           () => saved2
@@ -12133,7 +12165,9 @@ function trackEditCommits(actions) {
   const tracked = { ...actions };
   for (const key2 of Object.keys(SAVES_AN_EDIT)) {
     if (!SAVES_AN_EDIT[key2]) continue;
-    tracked[key2] = trackedStudioEdit(actions[key2]);
+    tracked[key2] = trackedStudioEdit(actions[key2], {
+      afterOlderSaves: true
+    });
   }
   return tracked;
 }
@@ -17106,6 +17140,9 @@ function applyAuthoredInlineOpacity(style, authored) {
   else style.setProperty("opacity", authored);
 }
 
+// src/utils/softReloadTargets.ts
+import { parseGsapScript } from "@hyperframes/parsers/gsap-parser";
+
 // src/utils/elementGsap.ts
 function gsapOf(element) {
   return element.ownerDocument.defaultView?.gsap;
@@ -17122,6 +17159,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)
@@ -17154,7 +17197,7 @@ function addTweenTargets(tween, targets) {
     targets.set(el, seen);
   }
 }
-function collectResetTargets(win, doc, targetKeys) {
+function collectResetTargets(win, doc, targetKeys, outgoingScripts = []) {
   const targets = /* @__PURE__ */ new Map();
   const timelines = win.__timelines ?? {};
   const others = new Set(
@@ -17167,6 +17210,8 @@ function collectResetTargets(win, doc, targetKeys) {
     }
   }
   sweepHeldElements(doc, targetKeys, others, targets);
+  addLiveSetTargets(doc, targetKeys, targets);
+  for (const script of outgoingScripts) addStandaloneSetTargets(doc, script, targets);
   return targets;
 }
 function tweenTargetsIn(timelines) {
@@ -17200,6 +17245,43 @@ function sweepHeldElements(doc, targetKeys, others, targets) {
     }
   }
 }
+var liveSets = /* @__PURE__ */ new WeakMap();
+function recordLiveSet(el, vars) {
+  const byElement = liveSets.get(el.ownerDocument) ?? /* @__PURE__ */ new Map();
+  liveSets.set(el.ownerDocument, byElement);
+  const props = byElement.get(el) ?? /* @__PURE__ */ new Set();
+  for (const prop of tweenedProps(vars)) props.add(prop);
+  byElement.set(el, props);
+}
+function addLiveSetTargets(doc, targetKeys, targets) {
+  const roots = new Set(targetKeys.map((k) => compositionRoot(doc, k)));
+  for (const [el, props] of liveSets.get(doc) ?? []) {
+    if (!roots.has(el) && !roots.has(el.parentElement?.closest("[data-composition-id]"))) continue;
+    const seen = targets.get(el) ?? /* @__PURE__ */ new Set();
+    for (const prop of props) seen.add(prop);
+    targets.set(el, seen);
+  }
+}
+function forgetLiveSets(reset) {
+  for (const el of reset.keys()) liveSets.get(el.ownerDocument)?.delete(el);
+}
+function addStandaloneSetTargets(doc, outgoingScript, targets) {
+  if (!outgoingScript.includes("gsap.set(")) return;
+  for (const set of parseGsapScript(outgoingScript).animations) {
+    if (set.method !== "set" || !set.global) continue;
+    let els;
+    try {
+      els = [...doc.querySelectorAll(set.targetSelector)];
+    } catch {
+      continue;
+    }
+    for (const el of els) {
+      const seen = targets.get(el) ?? /* @__PURE__ */ new Set();
+      for (const prop of tweenedProps(set.properties)) seen.add(prop);
+      targets.set(el, seen);
+    }
+  }
+}
 function fileDocs(ownFile, written, nestedFiles) {
   const docs = /* @__PURE__ */ new Map();
   return (file) => {
@@ -17363,7 +17445,12 @@ function applySoftReload(iframe, scriptText, options = {}) {
   const readAuthoredOpacity = (el) => findAuthoredStyle(el)?.opacity ?? readStampedAuthoredOpacity(el);
   const doReload = () => {
     const timelines = win.__timelines;
-    const targets = collectResetTargets(win, doc, targetKeys);
+    const targets = collectResetTargets(
+      win,
+      doc,
+      targetKeys,
+      staleScripts.map((script) => script.textContent ?? "")
+    );
     if (timelines) {
       for (const key2 of targetKeys) {
         const tl = timelines[key2];
@@ -17394,6 +17481,7 @@ function applySoftReload(iframe, scriptText, options = {}) {
         }
       }
     }
+    forgetLiveSets(targets);
     for (const script of staleScripts) script.remove();
     const executeScript = () => {
       if (win.MotionPathPlugin && win.gsap?.registerPlugin) {
@@ -17621,25 +17709,33 @@ import { findTimelineScript } from "@hyperframes/core/gsap-parser-acorn";
 import { walkCompositionDescendants } from "@hyperframes/parsers/hf-ids";
 
 // src/utils/gsapLiveRetime.ts
-import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
+import { parseGsapScriptAcorn, scriptShape } from "@hyperframes/parsers/gsap-parser-acorn";
 import { hasExplicitTime } from "@hyperframes/parsers/gsap-writer-acorn";
 import { RUNTIME_FILLER } from "@hyperframes/core/runtime/protocol";
 var RERUN = { kind: "rerun" };
-var withoutLayout = (code) => code.replace(/\s+/g, " ").replace(/ ?([^\w$ ]) ?/g, "$1").trim();
 function untimedShape(animation) {
   const { id: _id, position: _p, resolvedStart: _s, duration: _d, ...rest } = animation;
   const provenance = rest.provenance && { ...rest.provenance, sourceRange: void 0 };
   return JSON.stringify(
     { ...rest, provenance },
-    (_key, value) => typeof value === "string" && value.startsWith("__raw:") ? withoutLayout(value) : value
+    (_key, value) => typeof value === "string" && value.startsWith("__raw:") ? scriptShape(`(${value.slice(6)}
+)`) ?? value : value
   );
 }
 var onTimeline = (animation) => !animation.global;
 var placedAlone = (animation) => hasExplicitTime(animation) && typeof animation.resolvedStart === "number";
 var lengthOf = (animation) => animation.method === "set" ? 0 : animation.durationUnresolved ? void 0 : animation.duration;
-var withoutNumbers = (script) => withoutLayout(script.replace(/(?<![\w$#.])\d*\.?\d+/g, "0"));
+var shapes = /* @__PURE__ */ new Map();
+function shapeOf(code) {
+  const shape = shapes.has(code) ? shapes.get(code) : scriptShape(code, true);
+  shapes.delete(code);
+  shapes.set(code, shape);
+  if (shapes.size > 2) shapes.delete(shapes.keys().next().value);
+  return shape;
+}
 function planLiveRetime(before, after) {
-  if (withoutNumbers(before) !== withoutNumbers(after)) return RERUN;
+  const shape = shapeOf(before);
+  if (shape === null || shape !== shapeOf(after)) return RERUN;
   const keys = timelineKeys(after);
   if (keys.length !== 1 || timelineKeys(before).join() !== keys.join()) return RERUN;
   const was = parseGsapScriptAcorn(before).animations.filter(onTimeline);
@@ -17705,15 +17801,10 @@ function sharesOneStretch(tweens) {
   );
   return stretch > 0 && fits;
 }
-function inOrHostsSubComposition(target, ownId) {
-  const element = target;
-  const owner = element.closest?.("[data-composition-id]");
-  return owner != null && owner.getAttribute("data-composition-id") !== ownId || element.querySelector?.("[data-composition-id]") != null;
-}
 var keepsOrder = (tweens) => tweens.every(
   (t2, k) => k === 0 || (tweens[k - 1].start - t2.start || tweens[k - 1].source - t2.source) < 0
 );
-function movesKeepEachElementsHistory(timeline, plan, children) {
+function movesKeepEachElementsHistory(timeline, plan, children, registry3) {
   const byElement = /* @__PURE__ */ new Map();
   children.forEach((child, i) => {
     for (const target of child.targets?.() ?? []) {
@@ -17725,16 +17816,25 @@ function movesKeepEachElementsHistory(timeline, plan, children) {
   const moved = /* @__PURE__ */ new Set();
   for (const [target, indexes] of byElement) {
     if (!indexes.some((i) => plan.tweens[i].moved)) continue;
-    if (inOrHostsSubComposition(target, plan.key)) return false;
     const tweens = indexes.map((i) => plan.tweens[i]);
     const shifted = tweens.every((t2) => t2.duration === t2.wasDuration);
     const undelayed = indexes.every((i) => !children[i].delay() && !children[i].repeatDelay?.());
     if (!keepsOrder(tweens) || !sharesOneStretch(tweens) || !(shifted || undelayed)) return false;
     moved.add(target);
   }
-  return !timeline.getChildren(false, false, true).some(
-    (sub) => sub.getChildren(true, true, false).some((tween) => tween.targets?.().some((t2) => moved.has(t2)))
+  return !animatedElsewhere(timeline, registry3, moved);
+}
+function animatedElsewhere(own, registry3, targets) {
+  const seen = /* @__PURE__ */ new Set([own]);
+  const visit = (timeline) => {
+    if (seen.has(timeline)) return false;
+    seen.add(timeline);
+    return timeline.getChildren(false, true, false).some((tween) => tween.targets?.().some((target) => targets.has(target))) || timeline.getChildren(false, false, true).some(visit);
+  };
+  const timelines = registry3.filter(
+    (entry2) => typeof entry2?.getChildren === "function"
   );
+  return own.getChildren(false, false, true).some(visit) || timelines.some(visit);
 }
 function applyLiveRetime(iframe, plan) {
   const win = iframe?.contentWindow;
@@ -17743,7 +17843,8 @@ function applyLiveRetime(iframe, plan) {
   const children = pairedLiveTweens(timeline, plan);
   if (!children) return false;
   if (plan.tweens.some((t2) => t2.moved)) {
-    if (!movesKeepEachElementsHistory(timeline, plan, children)) return false;
+    const registry3 = Object.values(win?.__timelines ?? {});
+    if (!movesKeepEachElementsHistory(timeline, plan, children, registry3)) return false;
     const bySource = plan.tweens.map((t2, i) => ({ ...t2, tween: children[i] })).sort((a, b) => a.source - b.source);
     for (const { tween } of bySource) timeline.remove(tween);
     for (const { tween, start, duration } of bySource) {
@@ -21246,7 +21347,10 @@ import {
   Scissors as PhScissors,
   Link as PhLink,
   Eyedropper as PhEyedropper,
-  Trash as PhTrash
+  Trash as PhTrash,
+  Image as PhImage,
+  BezierCurve,
+  FolderSimple
 } from "@phosphor-icons/react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var makeIcon = (Icon) => {
@@ -21291,6 +21395,9 @@ var Scissors = makeIcon(PhScissors);
 var Link = makeIcon(PhLink);
 var Eyedropper = makeIcon(PhEyedropper);
 var Trash = makeIcon(PhTrash);
+var ImageIcon = makeIcon(PhImage);
+var Vector = makeIcon(BezierCurve);
+var Folder = makeIcon(FolderSimple);
 
 // src/player/components/TrackClipCount.tsx
 import { jsx as jsx41 } from "react/jsx-runtime";
@@ -30342,9 +30449,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 +37522,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 +37554,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 +37631,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 +45865,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 +45989,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 +47936,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 +48206,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 +48225,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 {
@@ -50783,7 +50904,7 @@ function revealedScroll(shape, scrollLeft) {
   if (shape.left < scrollLeft) return shape.left;
   return Math.max(scrollLeft, shape.left + shape.size + 1 - shape.width);
 }
-function measureFill(list, shapes) {
+function measureFill(list, shapes2) {
   const fill = fillOf(list);
   const tab = list.querySelector(":scope > .dv-active-tab");
   const shape = {
@@ -50792,8 +50913,8 @@ function measureFill(list, shapes) {
     left: tab?.offsetLeft ?? 0,
     size: tab?.offsetWidth ?? 0
   };
-  const reveal2 = tab !== null && reshaped(shapes.get(list), shape);
-  if (shape.width > 0) shapes.set(list, shape);
+  const reveal2 = tab !== null && reshaped(shapes2.get(list), shape);
+  if (shape.width > 0) shapes2.set(list, shape);
   const scrollLeft = list.scrollLeft;
   const target = reveal2 ? revealedScroll(shape, scrollLeft) : scrollLeft;
   return () => {
@@ -50828,10 +50949,10 @@ function installTabFill(api, root) {
       observed.add(element);
     }
   }
-  const shapes = /* @__PURE__ */ new WeakMap();
+  const shapes2 = /* @__PURE__ */ new WeakMap();
   function placeAll() {
     const strips2 = [...lists()];
-    const writes = strips2.map((list) => measureFill(list, shapes));
+    const writes = strips2.map((list) => measureFill(list, shapes2));
     for (const write of writes) write();
     for (const list of strips2) markClippedEdges(list);
     observe(strips2.flatMap((list) => [list, ...list.querySelectorAll(":scope > .dv-tab")]));
@@ -58874,6 +58995,25 @@ function formatPropValue(prop, v) {
   if (PERCENT_PROPS.has(prop)) return `${Math.round(Number(v) * 100)}${unit}`;
   return `${v}${unit}`;
 }
+var easeLabel = (ease) => ease.startsWith("custom(") ? "custom" : EASE_LABELS[ease] ?? ease;
+function uniformSegmentEase(animation) {
+  const eases = keyframedTweenEases(animation);
+  const steps = animation.keyframes?.keyframes ?? [];
+  const segmentEases = new Set(steps.slice(1).map((kf) => eases.segment(kf)));
+  if (segmentEases.size === 0) return eases.segment({});
+  return segmentEases.size === 1 ? [...segmentEases][0] : null;
+}
+function keyframedTweenSummary(animation, pos, dur) {
+  const steps = animation.keyframes?.keyframes ?? [];
+  const props = [...new Set(steps.flatMap((kf) => Object.keys(kf.properties)))];
+  const propText = props.map((p) => (PROP_LABELS[p] ?? p).toLowerCase()).join(", ");
+  const segmentEase = uniformSegmentEase(animation);
+  const segmentText = steps.length < 2 ? "" : segmentEase ? `, each segment eased ${easeLabel(segmentEase)}` : ", with per-keyframe easing";
+  const run = keyframedTweenEases(animation).run;
+  const runText = run && run !== "none" ? `, across a ${easeLabel(run)} run` : "";
+  const count = `${steps.length} keyframe${steps.length === 1 ? "" : "s"}`;
+  return `Starting at ${pos}s, over ${dur}s, animate ${animation.targetSelector}'s ${propText || "no properties yet"} through ${count}${segmentText}${runText}.`;
+}
 function buildTweenSummary(animation) {
   const easeName = animation.ease ?? "none";
   const ease = EASE_LABELS[easeName] ?? easeName;
@@ -58882,6 +59022,7 @@ function buildTweenSummary(animation) {
   const dur = animation.duration ?? 0;
   const rawPos = animation.position;
   const pos = typeof rawPos === "number" ? parseFloat(rawPos.toFixed(3)) : rawPos;
+  if (animation.keyframes) return keyframedTweenSummary(animation, pos, dur);
   const propDescs = props.map(([p, v]) => {
     const label = (PROP_LABELS[p] ?? p).toLowerCase();
     return `${label} to ${formatPropValue(p, v)}`;
@@ -59096,6 +59237,7 @@ var APPLY_ALL_EASES = [
   "bounce.out",
   "bounce.inOut"
 ];
+var percentLabel = (pct) => pct > 0 && pct < 1e-3 ? "<0.001" : String(roundTo3(pct));
 function KeyframeEaseList({
   keyframes,
   globalEase,
@@ -59130,8 +59272,8 @@ function KeyframeEaseList({
       if (i === 0) return null;
       const segEase = kf.ease ?? globalEase;
       const isExpanded = expandedPct === kf.percentage;
-      const label = `${keyframes[i - 1].percentage}% \u2192 ${kf.percentage}%`;
-      const easeLabel = segEase.startsWith("custom(") ? "Custom" : EASE_LABELS[segEase] ?? segEase;
+      const label = `${percentLabel(keyframes[i - 1].percentage)}% \u2192 ${percentLabel(kf.percentage)}%`;
+      const easeLabel2 = segEase.startsWith("custom(") ? "Custom" : EASE_LABELS[segEase] ?? segEase;
       return /* @__PURE__ */ jsxs105(
         "div",
         {
@@ -59147,7 +59289,7 @@ function KeyframeEaseList({
                 className: "flex w-full items-center gap-2 px-2 py-1.5 text-left active:scale-[0.99]",
                 children: [
                   /* @__PURE__ */ jsx140("span", { className: "text-[10px] font-medium text-neutral-400", children: label }),
-                  /* @__PURE__ */ jsx140("span", { className: "ml-auto text-[9px] text-neutral-500", children: easeLabel }),
+                  /* @__PURE__ */ jsx140("span", { className: "ml-auto text-[9px] text-neutral-500", children: easeLabel2 }),
                   /* @__PURE__ */ jsx140(
                     "svg",
                     {
@@ -59360,6 +59502,7 @@ function parseNumericOrString(raw) {
 
 // src/components/editor/AnimationCard.tsx
 import { Fragment as Fragment40, jsx as jsx142, jsxs as jsxs107 } from "react/jsx-runtime";
+var easeDisplayName = (ease) => ease.startsWith("custom(") ? "Custom curve" : EASE_LABELS[ease] ?? ease;
 var AnimationCard = memo37(function AnimationCard2({
   animation,
   defaultExpanded,
@@ -59465,7 +59608,9 @@ var AnimationCard = memo37(function AnimationCard2({
   const [copied, setCopied] = useState75(false);
   const methodLabel = METHOD_LABELS[animation.method] ?? animation.method;
   const easeName = (animation.keyframes ? animation.keyframes.easeEach : void 0) ?? animation.ease ?? "none";
-  const easeLabel = easeName.startsWith("custom(") ? "Custom curve" : EASE_LABELS[easeName] ?? easeName;
+  const headerEase = animation.keyframes ? uniformSegmentEase(animation) : easeName;
+  const easeLabel2 = headerEase === null ? "Mixed" : easeDisplayName(headerEase);
+  const runEase = animation.keyframes ? keyframedTweenEases(animation).run : void 0;
   const endTime = typeof animation.position === "number" ? animation.position + (animation.duration ?? 0) : animation.position;
   const summary = useMemo57(() => buildTweenSummary(animation), [animation]);
   const setKeys = Object.keys(animation.properties);
@@ -59523,8 +59668,9 @@ var AnimationCard = memo37(function AnimationCard2({
                 "span",
                 {
                   className: `ml-auto text-[10px] ${flat ? "text-panel-text-3" : "text-neutral-500"}`,
-                  title: easeName,
-                  children: easeLabel
+                  title: headerEase ?? "Mixed",
+                  "data-card-ease": true,
+                  children: easeLabel2
                 }
               ),
               /* @__PURE__ */ jsx142(
@@ -59564,6 +59710,10 @@ var AnimationCard = memo37(function AnimationCard2({
                   }
                 ),
                 "Keyframed \u2014 click a segment below to edit its curve"
+              ] }),
+              runEase && runEase !== "none" && /* @__PURE__ */ jsxs107("p", { className: "mt-1 text-[9px] text-neutral-500", "data-card-run-ease": true, children: [
+                "Run ease: ",
+                easeDisplayName(runEase)
               ] })
             ] }),
             /* @__PURE__ */ jsx142(
@@ -59607,7 +59757,7 @@ var AnimationCard = memo37(function AnimationCard2({
             KeyframeEaseList,
             {
               keyframes: animation.keyframes.keyframes,
-              globalEase: animation.keyframes.easeEach ?? animation.ease ?? "none",
+              globalEase: keyframedTweenEases(animation).segment({}),
               expandedPct: expandedKfPct,
               collidingAnimationTargets: focusedCollidingAnimationTargets,
               onToggle: (pct) => {
@@ -70768,7 +70918,7 @@ import {
   Trash as Trash2,
   FilePlus,
   FolderSimplePlus,
-  FolderSimple
+  FolderSimple as FolderSimple2
 } from "@phosphor-icons/react";
 
 // src/components/editor/FileTreeIcons.tsx
@@ -70789,7 +70939,7 @@ import {
   File as File2,
   Waveform,
   TextAa,
-  Image as PhImage
+  Image as PhImage2
 } from "@phosphor-icons/react";
 import { jsx as jsx189 } from "react/jsx-runtime";
 var SZ = 14;
@@ -70812,7 +70962,7 @@ var ICONS = /* @__PURE__ */ new Map([
   ["txt", [FileTxt, GRAY]],
   ["png", [FilePng, GREEN]],
   ["jpg", [FileJpg, GREEN]],
-  ["webp", [PhImage, GREEN]],
+  ["webp", [PhImage2, GREEN]],
   ["mp4", [FileVideo, "text-[light-dark(oklch(0.59_0.2_304),oklch(0.71_0.2_304))]"]],
   ["mp3", [Waveform, "text-[light-dark(oklch(0.53_0.159_165),#3CE6AC)]"]],
   ["woff", [TextAa, DIM]]
@@ -71110,7 +71260,7 @@ function InlineInput({
       className: "flex items-center gap-2 py-0.5 min-h-7",
       style: { paddingLeft: `${8 + depth * 12 + (isFolder ? 0 : 14)}px` },
       children: [
-        isFolder ? /* @__PURE__ */ jsx190(FolderSimple, { size: SZ_ICON, weight: "duotone", className: `shrink-0 ${DIM}` }) : /* @__PURE__ */ jsx190(FileIcon, { path: value }),
+        isFolder ? /* @__PURE__ */ jsx190(FolderSimple2, { size: SZ_ICON, weight: "duotone", className: `shrink-0 ${DIM}` }) : /* @__PURE__ */ jsx190(FileIcon, { path: value }),
         /* @__PURE__ */ jsxs149("div", { className: "flex-1 min-w-0", children: [
           /* @__PURE__ */ jsx190(
             "input",
@@ -74787,7 +74937,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 +74972,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 +78332,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";
@@ -80506,6 +80658,7 @@ function savePlainRotation({ commitPositionPatchToHtml, readOnlyPreview }, selec
 }
 
 // src/hooks/useDomGeometryCommits.ts
+var boxSizeCommitCounter = 0;
 function useDomGeometryCommits({
   showToast,
   commitPositionPatchToHtml,
@@ -80535,7 +80688,10 @@ function useDomGeometryCommits({
       if (offset) patches.push(...writePlainMove(element, offset));
       return commitPositionPatchToHtml(selection, patches, {
         label: "Resize layer box",
-        ...undoKey ? { coalesceKey: undoKey, coalesceMs: Number.POSITIVE_INFINITY, deferRender: true } : { coalesceKey: `box-size:${getDomEditTargetKey(selection)}` }
+        ...undoKey ? { coalesceKey: undoKey, coalesceMs: Number.POSITIVE_INFINITY, deferRender: true } : {
+          coalesceKey: `box-size:${++boxSizeCommitCounter}`,
+          coalesceMs: Number.POSITIVE_INFINITY
+        }
       }).catch((error) => {
         restoreStudioBoxSize(element, beforeSize);
         if (offset) restoreStudioPathOffset(element, beforeOffset);
@@ -80973,6 +81129,7 @@ function applyGlobalSet(iframe, selector, props) {
     const numeric = finiteNumericProps(props);
     if (!gsapLib?.set || !el || !numeric) return false;
     gsapLib.set(el, numeric);
+    recordLiveSet(el, numeric);
     return true;
   } catch {
     return false;
@@ -83164,7 +83321,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 +83353,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 +83705,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 +83720,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 +83749,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 +83774,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 +83795,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 +83886,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 +83928,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 +83937,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 +83955,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 +83976,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;
@@ -83640,7 +84171,7 @@ async function commitKeyframeProps(selection, anim, props, propEntries, primaryP
       for (const k of Object.keys(properties)) {
         if (!(k in p) && backfillDefaults[k] != null) p[k] = backfillDefaults[k];
       }
-      return { percentage: newPct, properties: p };
+      return { percentage: newPct, properties: p, ...kf.ease ? { ease: kf.ease } : {} };
     });
     remapped.push({ percentage: toNewPct(ct), properties });
     remapped.sort((a, b) => a.percentage - b.percentage);
@@ -83652,7 +84183,8 @@ async function commitKeyframeProps(selection, anim, props, propEntries, primaryP
         targetSelector: anim.targetSelector,
         position: roundTo3(newStart),
         duration: roundTo3(newDuration),
-        keyframes: remapped
+        keyframes: remapped,
+        ...keyframeEases(anim)
       },
       { label: `Edit ${primaryProp} (extended keyframe)`, keyframeAction: "add", softReload: true }
     );
@@ -83683,7 +84215,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 +84321,7 @@ function useAnimatedPropertyCommit(deps) {
     },
     [selectedGsapAnimations, gsapCommitMutation, previewIframeRef, bumpGsapCache]
   );
-  const commitAnimatedProperty = useCallback145(
+  const commitAnimatedProperty = useCallback146(
     (selection, property, value) => commitAnimatedProperties(selection, { [property]: value }),
     [commitAnimatedProperties]
   );
@@ -83816,14 +84348,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 +84406,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 +84449,8 @@ function useGsapAwareEditing({
             targetAnimations,
             previewIframeRef.current,
             commitMutation2,
-            makeFetchFallback(selection)
+            makeFetchFallback(selection),
+            { stamp }
           );
           await saveMove(dragOutcome, async () => {
             const plainAfterSettle = editsPlainCss(selection.element, "move");
@@ -83937,7 +84471,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 +84493,8 @@ function useGsapAwareEditing({
                 commitMutation2,
                 makeFetchFallback(selection),
                 offset,
-                writes.drawKeepingUndone
+                writes.drawKeepingUndone,
+                stamp
               );
               assertGsapEditPersisted(outcome);
               if (outcome.status === "element-size") {
@@ -84008,7 +84548,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 +84591,7 @@ function useGsapAwareEditing({
     previewIframeRef,
     bumpGsapCache
   });
-  const commitAnimatedProperties = useCallback146(
+  const commitAnimatedProperties = useCallback147(
     async (selection, properties) => {
       try {
         await writeSizeWithCrop(
@@ -84073,25 +84613,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 +84639,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 +84797,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 +84836,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 +85276,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 +85299,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 +85317,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 +85425,7 @@ function useDomEditSession({
     setArcPath,
     updateArcSegment
   });
-  const handleDomGroupMoveBy = useCallback148(
+  const handleDomGroupMoveBy = useCallback149(
     (moves) => moveDomGroupBy(
       moves,
       (updates) => handleGsapAwareGroupPathOffsetCommit(updates, { refusalToast: false })
@@ -85011,7 +85551,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 +85765,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 +85809,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 +85910,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 +85971,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 +86026,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 +86038,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 +86046,7 @@ function useExternalFileChangeCoordinator({
     );
     await next;
   }, []);
-  const drainOnePending = useCallback150(
+  const drainOnePending = useCallback151(
     // fallow-ignore-next-line complexity
     async (payload) => {
       const path = readStudioFileChangePath(payload);
@@ -85605,7 +86145,7 @@ function useExternalFileChangeCoordinator({
       onAcceptedPersistedFileChange
     ]
   );
-  const startDrainLoop = useCallback150(async () => {
+  const startDrainLoop = useCallback151(async () => {
     if (drainingRef.current) return;
     drainingRef.current = true;
     try {
@@ -85619,7 +86159,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 +86218,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 +86253,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 +86324,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 +86364,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 +86583,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 +86600,7 @@ function useBlockHandlers({
     },
     [showToast, dismissToast]
   );
-  const handleAddBlock = useCallback152(
+  const handleAddBlock = useCallback153(
     (blockName) => {
       if (!projectId) return;
       void (async () => {
@@ -86090,7 +86630,7 @@ function useBlockHandlers({
     },
     [projectId, blockCtx, previewIframeRef, runBlockInstall, setRightCollapsed, setRightPanelTab]
   );
-  const handleTimelineBlockDrop = useCallback152(
+  const handleTimelineBlockDrop = useCallback153(
     (blockName, placement) => {
       if (!projectId) return;
       void runBlockInstall(
@@ -86109,7 +86649,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 +86668,7 @@ function useBlockHandlers({
     },
     [projectId, blockCtx, previewIframeRef, runBlockInstall]
   );
-  const handlePreviewBlockDrop = useCallback152(
+  const handlePreviewBlockDrop = useCallback153(
     (blockName, position) => {
       if (!projectId) return;
       void runBlockInstall(
@@ -86158,7 +86698,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 +86895,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 +86909,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 +86943,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 +86980,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 +87070,7 @@ function useAppHotkeys({
     activeCompPath,
     forceReloadSdkSession
   });
-  const applyHistory = useCallback154(
+  const applyHistory = useCallback155(
     async (direction) => {
       const captionState = useCaptionStore.getState();
       if (captionState.isEditMode && isCaptionPreviewVisible()) {
@@ -86544,8 +87086,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 +87110,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 +87124,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 +87154,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 +87434,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 +87448,7 @@ function useClipboard({
     },
     [waitForPendingDomEditSaves, writeProjectFile]
   );
-  const findSelectedClips = useCallback155(() => {
+  const findSelectedClips = useCallback156(() => {
     const selected = getSelectedElements();
     if (selected.length === 0) return null;
     const lives = [];
@@ -86920,7 +87462,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 +87478,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 +87493,7 @@ function useClipboard({
       };
     });
   }, [activeCompPath, findSelectedClips, readClips, showToast]);
-  const copyDomSelection = useCallback155(
+  const copyDomSelection = useCallback156(
     (domSelection) => {
       const live = getSelectedDomElement(previewIframeRef, domSelection, activeCompPath);
       if (!live) {
@@ -86973,7 +87515,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 +87537,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 +87586,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 +87638,7 @@ function useClipboard({
       writeProjectFile
     ]
   );
-  const handleCut = useCallback155(async () => {
+  const handleCut = useCallback156(async () => {
     const selected = getSelectedElements();
     const domSelection = domEditSelectionRef.current;
     const copied = copyToClipboard();
@@ -87116,7 +87658,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 +88017,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 +88090,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 +88108,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 +88201,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 +88221,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 +88229,7 @@ function useLintModal(projectId, refreshKey) {
     } catch {
     }
   }, [projectId]);
-  const handleLint = useCallback158(async () => {
+  const handleLint = useCallback159(async () => {
     if (!projectId) return;
     setLinting(true);
     try {
@@ -87716,8 +88258,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 +88296,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 +88304,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 +88327,7 @@ function useToast() {
     },
     [clearTimer, removeToast]
   );
-  const showToast = useCallback159(
+  const showToast = useCallback160(
     (message, tone = "error") => {
       const id = nextToastId++;
       setToasts((prev) => {
@@ -87812,7 +88354,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 +88593,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 +88604,7 @@ function useStudioUrlState({
     }),
     [activeCompPath, domEditGroupSelections, domEditSelection, rightCollapsed, rightPanelTab]
   );
-  const applyUrlSelection = useCallback160(
+  const applyUrlSelection = useCallback161(
     (selection) => {
       const applySeq = ++selectionApplySeqRef.current;
       if (!selection) {
@@ -88207,7 +88749,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 +88794,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 +88809,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 +89296,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 +89456,7 @@ function useGestureRecording() {
       r.cleanup = null;
     };
   }, []);
-  const startRecording = useCallback162(
+  const startRecording = useCallback163(
     (element, iframeEl, elementEndTime) => {
       if (isRecordingRef.current) return;
       isRecordingRef.current = true;
@@ -89013,7 +89555,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 +89567,7 @@ function useGestureRecording() {
     setIsRecording(false);
     return frozen;
   }, []);
-  const clearSamples = useCallback162(() => {
+  const clearSamples = useCallback163(() => {
     const r = refs.current;
     r.samples = [];
     r.trail = [];
@@ -89297,7 +89839,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 +89851,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;
@@ -89403,19 +89945,28 @@ function useGestureCommit({
             const overlaps3 = recStart < tweenEnd + 0.05 && recEnd > tweenStart - 0.05;
             if (overlaps3) {
               const existingKfs = existingPositionTween.keyframes?.keyframes ?? [];
-              const rangeStartPct = tweenDur > 0 ? Math.max(0, (recStart - tweenStart) / tweenDur * 100) : 0;
-              const rangeEndPct = tweenDur > 0 ? Math.min(100, (recEnd - tweenStart) / tweenDur * 100) : 100;
-              const preserved = existingKfs.filter(
-                (kf) => kf.percentage < rangeStartPct - 0.5 || kf.percentage > rangeEndPct + 0.5
-              ).map((kf) => ({
+              const startTimePct = tweenDur > 0 ? Math.max(0, (recStart - tweenStart) / tweenDur * 100) : 0;
+              const endTimePct = tweenDur > 0 ? Math.min(100, (recEnd - tweenStart) / tweenDur * 100) : 100;
+              const runEase = runEaseOf(existingPositionTween);
+              const roundPct3 = warpsTime(runEase) ? (pct) => pct : roundTo3;
+              const preserved = existingKfs.filter((kf) => {
+                const playsAt = timeAtProgress(runEase, kf.percentage);
+                return playsAt < startTimePct - 0.5 || playsAt > endTimePct + 0.5;
+              }).map((kf) => ({
                 percentage: kf.percentage,
                 properties: kf.properties,
                 ...kf.ease ? { ease: kf.ease } : {}
               }));
-              const mapped = keyframes.map((kf) => ({
-                percentage: rangeStartPct + kf.percentage / 100 * (rangeEndPct - rangeStartPct),
+              const constantSpeed = { ease: "none" };
+              const mapped = keyframes.map((kf, index) => ({
+                percentage: roundPct3(
+                  progressAtTime(
+                    runEase,
+                    startTimePct + kf.percentage / 100 * (endTimePct - startTimePct)
+                  )
+                ),
                 properties: kf.properties,
-                ...kf.ease ? { ease: kf.ease } : {}
+                ...kf.ease ? { ease: kf.ease } : index > 0 ? constantSpeed : {}
               }));
               const merged = [...preserved, ...mapped].sort((a, b) => a.percentage - b.percentage);
               await commit2(
@@ -89425,7 +89976,8 @@ function useGestureCommit({
                   targetSelector: selector,
                   position: typeof existingPositionTween.position === "number" ? existingPositionTween.position : tweenStart,
                   duration: tweenDur,
-                  keyframes: merged
+                  keyframes: merged,
+                  ...keyframeEases(existingPositionTween)
                 },
                 { label: "Gesture recording (merge)", softReload: true, keyframeAction: "add" }
               );
@@ -89488,7 +90040,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 +90054,7 @@ function useGestureCommit({
     },
     [stopAndCommitRecording]
   );
-  const startRecording = useCallback163(
+  const startRecording = useCallback164(
     (method) => {
       if (readOnlyPreview) return;
       const sel = domEditSessionRef.current.domEditSelection;
@@ -89537,7 +90089,7 @@ function useGestureCommit({
       armAutoStop
     ]
   );
-  const handleToggleRecording = useCallback163(
+  const handleToggleRecording = useCallback164(
     (method = "button") => {
       if (commitInFlightRef.current) return;
       if (gestureStateRef.current === "recording") {
@@ -89699,7 +90251,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 +90370,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 +90481,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 +90545,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 +90761,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 +90772,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 +90794,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 +90843,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 +91041,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 +91188,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 +91213,7 @@ function AssetCard({
     setPreviewAsset,
     clearPreviewAsset
   ]);
-  const handlePointerUp = useCallback166(
+  const handlePointerUp = useCallback167(
     (e) => {
       const origin2 = pointerDownRef.current;
       pointerDownRef.current = null;
@@ -90993,7 +91545,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 +91557,7 @@ var AssetsTab = memo46(function AssetsTab2({
     },
     [onImport]
   );
-  const handleDrop = useCallback167(
+  const handleDrop = useCallback168(
     (e) => {
       e.preventDefault();
       setDragOver(false);
@@ -91013,7 +91565,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 +91775,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 +91805,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 +92091,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 +92110,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 +92126,7 @@ function BlockCard({
     [onAdd, addState]
   );
   const { activeCompPath, compositionDimensions } = useStudioShellContext();
-  const handleShowPrompt = useCallback169(
+  const handleShowPrompt = useCallback170(
     (e) => {
       e.stopPropagation();
       const state = usePlayerStore.getState();
@@ -91714,7 +92266,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 +92377,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 +92757,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 +92867,28 @@ 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/layerKind.ts
+function isCompositionHost(el) {
+  return el.hasAttribute("data-composition-src") || el.hasAttribute("data-composition-file");
+}
+function layerKindOf(el, hasChildren) {
+  const tag = el.tagName.toLowerCase();
+  if (tag === "img" || tag === "picture") return "image";
+  if (tag === "video") return "video";
+  if (tag === "audio") return "audio";
+  if (tag === "svg") return "vector";
+  if (el.hasAttribute("data-hf-group") || isCompositionHost(el)) return "group";
+  if (hasOnlyFormattingChildren(el) && el.textContent?.trim()) return "text";
+  return hasChildren ? "group" : "shape";
+}
 
 // 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 +92958,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 +92985,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef, onSingleSibling]
   );
-  const handleContainerPointerMove = useCallback172(
+  const handleContainerPointerMove = useCallback173(
     (e) => {
       const drag = dragRef.current;
       if (!drag) return;
@@ -92444,7 +93011,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef]
   );
-  const handleContainerPointerUp = useCallback172(() => {
+  const handleContainerPointerUp = useCallback173(() => {
     const drag = dragRef.current;
     dragRef.current = null;
     setDragKey(null);
@@ -92531,36 +93098,17 @@ function getVisibleLayers(layers, collapsed) {
 // src/components/editor/LayersPanel.tsx
 import { jsx as jsx223, jsxs as jsxs178 } from "react/jsx-runtime";
 var LAYERS_PANEL_MAX_ROWS = 80;
-var TAG_ICONS = {
-  video: "Vi",
-  audio: "Au",
-  img: "Im",
-  svg: "Sv",
-  canvas: "Cn",
-  div: "Di",
-  section: "Se",
-  span: "Sp",
-  p: "P",
-  h1: "H1",
-  h2: "H2",
-  h3: "H3",
-  h4: "H4",
-  h5: "H5",
-  h6: "H6",
-  a: "A",
-  button: "Bt",
-  ul: "Ul",
-  ol: "Ol",
-  li: "Li",
-  style: "St",
-  template: "Te"
+var [CARET, ICON, GAP] = [16, 20, 6];
+var CHILD_INDENT = CARET + GAP + ICON + GAP;
+var KIND_ICON = {
+  image: ImageIcon,
+  video: Film,
+  audio: Music,
+  vector: Vector,
+  group: Folder,
+  text: Type,
+  shape: Square
 };
-function getTagBadge(tagName) {
-  return TAG_ICONS[tagName] ?? tagName.slice(0, 2).toUpperCase();
-}
-function isCompositionHost(el) {
-  return el.hasAttribute("data-composition-src") || el.hasAttribute("data-composition-file");
-}
 function createRafThrottle(run, throttleMs = 100) {
   let rafId = null;
   let lastFired = 0;
@@ -92619,7 +93167,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 +93215,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 +93228,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 +93257,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 +93267,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 +93278,7 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
     },
     [resolveSelection, setActiveGroupElement, handleSelectLayer]
   );
-  const handleLayerHover = useCallback173(
+  const handleLayerHover = useCallback174(
     async (layer) => {
       if (!layer) {
         updateDomEditHoverSelection(null);
@@ -92741,11 +93289,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 +93356,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 {
@@ -92855,7 +93403,7 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
                 {
                   type: "button",
                   onClick: () => setActiveGroupElement(null),
-                  className: "flex w-full items-center gap-1.5 px-2 py-1 text-left text-[11px] text-panel-text-3 hover:bg-panel-hover/40 hover:text-panel-text-1",
+                  className: "mx-1 flex w-[calc(100%-0.5rem)] items-center gap-1.5 rounded-md px-2 py-1 text-left text-[11px] text-panel-text-3 hover:bg-panel-hover/40 hover:text-panel-text-1",
                   children: [
                     /* @__PURE__ */ jsx223("span", { "aria-hidden": "true", children: "\u2190" }),
                     /* @__PURE__ */ jsx223("span", { className: "truncate", children: activeGroupElement.getAttribute("data-hf-group") || "Group" })
@@ -92869,6 +93417,10 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
                 const isCollapsed = collapsed[layer.key] ?? false;
                 const hasChildren = layer.childCount > 0;
                 const isCompHost = isCompositionHost(layer.element);
+                const kind = layerKindOf(layer.element, hasChildren);
+                const KindIcon = KIND_ICON[kind];
+                const kindName = kind[0].toUpperCase() + kind.slice(1);
+                const hint = draggable ? layer.element.hasAttribute("data-hf-group") ? "Double-click to enter group" : void 0 : "This layer can't be reordered";
                 return /* @__PURE__ */ jsxs178(
                   "div",
                   {
@@ -92885,9 +93437,9 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
                         handleSelectLayer(layer);
                       }
                     },
-                    className: `group flex w-full items-center gap-1.5 px-2 py-1 text-left transition-colors ${isDragged ? "opacity-40" : selected ? "bg-panel-accent/14 text-accent-ink" : "text-panel-text-2 hover:bg-panel-hover/40 hover:text-panel-text-1"} ${dragKey ? "cursor-grabbing" : "cursor-pointer"}`,
-                    style: { paddingLeft: 8 + layer.depth * 16 },
-                    title: draggable ? layer.element.hasAttribute("data-hf-group") ? "Double-click to enter group" : void 0 : "This layer can't be reordered",
+                    className: `group mx-1 flex items-center gap-1.5 rounded-md px-2 py-1 text-left transition-colors ${isDragged ? "opacity-40" : selected ? "bg-panel-accent/14 text-accent-ink" : "text-panel-text-2 hover:bg-panel-hover/40 hover:text-panel-text-1"} ${dragKey ? "cursor-grabbing" : "cursor-pointer"}`,
+                    style: { paddingLeft: 8 + layer.depth * CHILD_INDENT },
+                    title: hint,
                     children: [
                       hasChildren ? /* @__PURE__ */ jsx223(
                         "button",
@@ -92909,12 +93461,14 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
                             }
                           )
                         }
-                      ) : /* @__PURE__ */ jsx223("span", { className: "w-4 shrink-0" }),
+                      ) : null,
                       /* @__PURE__ */ jsx223(
                         "span",
                         {
-                          className: `flex h-5 w-5 shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${selected ? "bg-panel-accent/18 text-accent-ink" : isCompHost ? "bg-on text-accent-ink" : "bg-panel-hover text-panel-text-4"}`,
-                          children: getTagBadge(layer.tagName)
+                          "data-layer-kind": kind,
+                          title: hint ? `${kindName} \xB7 ${hint}` : kindName,
+                          className: `flex h-5 w-5 shrink-0 items-center justify-center rounded ${selected ? "bg-panel-accent/18 text-accent-ink" : isCompHost ? "bg-on text-accent-ink" : "bg-panel-hover text-panel-text-4"}`,
+                          children: /* @__PURE__ */ jsx223(KindIcon, { size: 12 })
                         }
                       ),
                       /* @__PURE__ */ jsx223("span", { className: "min-w-0 flex-1 truncate text-[11px]", children: layer.label }),
@@ -92940,10 +93494,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 +93722,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 +93840,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 +93914,7 @@ var CaptionPropertyPanel = memo52(function CaptionPropertyPanel2({
     },
     [iframeRef, model, selectedSegmentIds]
   );
-  const handleStyleChange = useCallback175(
+  const handleStyleChange = useCallback176(
     (updates) => {
       if (selectedGroupId) {
         updateGroupStyle(selectedGroupId, updates);
@@ -93465,7 +94019,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 +94042,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 +94087,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 +94095,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 +94258,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 +94281,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 +95032,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 +95224,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 +95286,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 +95419,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 +95744,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 +95764,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 +95782,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
       setRetrying(false);
     }
   }, [onPersist]);
-  const applyNotesManifest = useCallback179(
+  const applyNotesManifest = useCallback180(
     (next) => {
       setManifest(next);
       manifestRef.current = next;
@@ -95242,7 +95796,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 +95810,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 +95837,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSceneId, selectedSequenceId, applyNotesManifest]
   );
-  const handleMarkFragment = useCallback179(() => {
+  const handleMarkFragment = useCallback180(() => {
     if (!selectedSceneId) return;
     applyManifest(
       addFragment(
@@ -95295,7 +95849,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     ).catch(() => {
     });
   }, [selectedSceneId, selectedSequenceId, currentTime, applyManifest]);
-  const handleRemoveFragment = useCallback179(
+  const handleRemoveFragment = useCallback180(
     (time) => {
       if (!selectedSceneId) return;
       applyManifest(
@@ -95305,7 +95859,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 +95867,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 +95890,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 +95899,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 +96049,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 +96062,7 @@ function useVariablesPersist({
   reloadPreview,
   publishSdkSession
 }) {
-  return useCallback180(
+  return useCallback181(
     async (label, mutate) => {
       if (!sdkSession) return false;
       const path = activeCompPath ?? "index.html";
@@ -95543,10 +96097,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 +96143,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 +96520,7 @@ function VariablesOtherCompositions({
     reloadPreview
   });
   const [editingKey, setEditingKey] = useState154(null);
-  const onSave = useCallback182(
+  const onSave = useCallback183(
     (path, decl) => {
       setEditingKey(null);
       void editInFile(
@@ -95977,7 +96531,7 @@ function VariablesOtherCompositions({
     },
     [editInFile]
   );
-  const onRemove = useCallback182(
+  const onRemove = useCallback183(
     (path, id) => {
       void editInFile(
         path,
@@ -96211,7 +96765,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 +96776,7 @@ var VariablesPanel = memo58(function VariablesPanel2({
     },
     [showToast]
   );
-  const dropPreviewOverride = useCallback183(
+  const dropPreviewOverride = useCallback184(
     (id) => {
       if (previewValues && id in previewValues) {
         const next = { ...previewValues };
@@ -96232,7 +96786,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 +96799,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 +96813,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 +96826,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 +96846,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 +96862,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 +96985,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 +97042,7 @@ function useSlideshowPersist({
   publishSdkSession,
   coalesceKey
 }) {
-  return useCallback184(
+  return useCallback185(
     async (manifest) => {
       if (!sdkSession) return;
       const path = activeCompPath ?? "index.html";
@@ -96546,7 +97100,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 +97119,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 +97127,7 @@ function DesignPanelPromoteProvider({
     },
     [rawPersist, forceReloadSharedSdkSession]
   );
-  const handlePersistError = useCallback185(
+  const handlePersistError = useCallback186(
     (error) => showToast(getStudioSaveErrorMessage(error), "error"),
     [showToast]
   );
@@ -96590,7 +97144,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 +97257,7 @@ function useRemoveBackground(projectId, refreshFileTree, showToast) {
     },
     []
   );
-  return useCallback186(
+  return useCallback187(
     // fallow-ignore-next-line complexity
     async (inputPath, options) => {
       const response = await studioApiFetch(
@@ -96742,7 +97296,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 +97400,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 +97548,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 +97561,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 +97717,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 }) {