hyperframes 0.8.134 → 0.8.136

package/dist/studio/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;
@@ -9510,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);
@@ -9557,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
@@ -12142,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;
 }
@@ -17115,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;
@@ -17169,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(
@@ -17182,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) {
@@ -17215,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) => {
@@ -17378,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];
@@ -17409,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) {
@@ -17636,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);
@@ -17720,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?.() ?? []) {
@@ -17740,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;
@@ -17758,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) {
@@ -21261,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) => {
@@ -21306,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";
@@ -50812,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 = {
@@ -50821,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 () => {
@@ -50857,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")]));
@@ -58903,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;
@@ -58911,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)}`;
@@ -59125,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,
@@ -59159,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",
         {
@@ -59176,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",
                     {
@@ -59389,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,
@@ -59494,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);
@@ -59552,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(
@@ -59593,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(
@@ -59636,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) => {
@@ -70797,7 +70918,7 @@ import {
   Trash as Trash2,
   FilePlus,
   FolderSimplePlus,
-  FolderSimple
+  FolderSimple as FolderSimple2
 } from "@phosphor-icons/react";
 
 // src/components/editor/FileTreeIcons.tsx
@@ -70818,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;
@@ -70841,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]]
@@ -71139,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",
@@ -80537,6 +80658,7 @@ function savePlainRotation({ commitPositionPatchToHtml, readOnlyPreview }, selec
 }
 
 // src/hooks/useDomGeometryCommits.ts
+var boxSizeCommitCounter = 0;
 function useDomGeometryCommits({
   showToast,
   commitPositionPatchToHtml,
@@ -80566,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);
@@ -81004,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;
@@ -84045,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);
@@ -84057,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 }
     );
@@ -89818,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(
@@ -89840,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" }
               );
@@ -92735,6 +92872,21 @@ import { memo as memo59, useCallback as useCallback189 } from "react";
 // src/components/editor/LayersPanel.tsx
 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 useCallback173 } from "react";
 var DRAG_THRESHOLD_PX4 = 4;
@@ -92946,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;
@@ -93270,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" })
@@ -93284,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",
                   {
@@ -93300,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",
@@ -93324,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 }),