@hyperframes/studio 0.8.97 → 0.8.99

package/dist/index.js

@@ -2173,6 +2173,9 @@ function getTimelinePlayheadTransform(time, pixelsPerSecond, contentOrigin, atRe
 function roundTo3(val) {
   return Math.round(val * 1e3) / 1e3;
 }
+function roundToLayoutPx(val) {
+  return Math.round(val);
+}
 function roundToCenti(val) {
   return Math.round(val * 100) / 100;
 }
@@ -12872,6 +12875,7 @@ function useTimelineProviderState({
   onPasteClip,
   onDuplicateClip,
   canPasteClip,
+  clipMenuItems,
   theme: themeOverrides,
   showAudioEffects = true,
   showKeyframes = true,
@@ -13170,6 +13174,7 @@ function useTimelineProviderState({
     onPasteClip,
     onDuplicateClip,
     canPasteClip,
+    clipMenuItems,
     onSelectElement,
     selectedElementId,
     setRangeSelectionRef,
@@ -19806,6 +19811,8 @@ async function postGsapMutation(projectId, filePath, mutation, fallback) {
 }
 
 // src/hooks/timelineTimingSync.ts
+import { findTimelineScript } from "@hyperframes/core/gsap-parser-acorn";
+import { walkCompositionDescendants } from "@hyperframes/parsers/hf-ids";
 async function readFileContent(projectId, targetPath) {
   if (targetPath.includes("\0") || targetPath.includes("..")) {
     throw new Error(`Unsafe path: ${targetPath}`);
@@ -20005,8 +20012,19 @@ async function scaleGsapPositions(projectId, filePath, elementId2, oldStart, old
     "scale-positions failed"
   );
 }
+function sdkTimingGsapSync(result) {
+  const timelineText = (html2) => {
+    const scripts = [];
+    walkCompositionDescendants(new DOMParser().parseFromString(html2, "text/html"), (el) => {
+      if (el.tagName.toLowerCase() === "script") scripts.push(el);
+    });
+    return findTimelineScript(scripts)?.textContent ?? null;
+  };
+  if (timelineText(result.before) === timelineText(result.after)) return null;
+  return { mutated: true, scriptText: extractGsapScriptText(result.after) };
+}
 function finishClipTimingFallback(input) {
-  const { projectId, targetPath, domId, edit } = input;
+  const { projectId, targetPath, domId, edit, sdkGsap } = input;
   const timingChanged = edit.kind === "shift" ? edit.delta !== 0 : edit.from.start !== edit.to.start || edit.from.duration !== edit.to.duration;
   const runMutation = (pid, id) => edit.kind === "shift" ? shiftGsapPositions(pid, targetPath, id, edit.delta) : scaleGsapPositions(
     pid,
@@ -20021,7 +20039,7 @@ function finishClipTimingFallback(input) {
   return finishTimelineTimingFallback({
     iframe: input.iframe,
     reloadPreview: input.reloadPreview,
-    gsapMutation: timingChanged && domId && projectId ? () => foldGsapMutationIntoHistory({
+    gsapMutation: sdkGsap ? () => Promise.resolve(sdkGsap) : timingChanged && domId && projectId ? () => foldGsapMutationIntoHistory({
       writeFile: input.writeProjectFile,
       paths: [targetPath],
       projectId,
@@ -20041,6 +20059,17 @@ async function finishGroupTimingGsapFallback(input) {
     (change) => input.resolveChangePath(change.element) !== activePath
   );
   const onGsapError = (err) => console.error(`[Timeline] ${input.errorLabel}`, err);
+  const { sdkGsap } = input;
+  if (sdkGsap) {
+    await finishTimelineTimingFallback({
+      iframe: input.iframe,
+      reloadPreview: input.reloadPreview,
+      gsapMutation: () => Promise.resolve(sdkGsap),
+      onGsapError,
+      rebindWhenUnmutated: !otherFileChanged
+    });
+    return;
+  }
   await finishTimelineTimingFallback({
     iframe: input.iframe,
     reloadPreview: input.reloadPreview,
@@ -21575,7 +21604,7 @@ var TimelineCanvas = memo13(function TimelineCanvas2() {
 });
 
 // src/player/components/TimelineOverlays.tsx
-import { useEffect as useEffect30 } from "react";
+import { useEffect as useEffect30, useMemo as useMemo32 } from "react";
 
 // src/player/components/EditModal.tsx
 import { useState as useState24, useCallback as useCallback33, useMemo as useMemo31, useRef as useRef40 } from "react";
@@ -21831,7 +21860,9 @@ function useMenuKeyboardNav(menuRef) {
     menu.addEventListener("keydown", onKeyDown);
     return () => {
       menu.removeEventListener("keydown", onKeyDown);
-      if (previouslyFocused instanceof HTMLElement && document.contains(previouslyFocused)) {
+      const active = document.activeElement;
+      const focusLeftWithMenu = active === null || active === document.body || menu.contains(active);
+      if (focusLeftWithMenu && previouslyFocused instanceof HTMLElement && document.contains(previouslyFocused)) {
         previouslyFocused.focus();
       }
     };
@@ -21967,6 +21998,36 @@ function KeyframeDiamondContextMenu({
 import { memo as memo14 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { Fragment as Fragment18, jsx as jsx58, jsxs as jsxs38 } from "react/jsx-runtime";
+var itemClass = (enabled) => `w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-none${enabled ? " focus-visible:bg-neutral-800 text-neutral-300 hover:bg-neutral-800 cursor-pointer" : " text-neutral-600 cursor-not-allowed"}`;
+function HostItems({
+  items,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxs38(Fragment18, { children: [
+    items.map((item) => /* @__PURE__ */ jsxs38(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        className: itemClass(!item.disabled),
+        disabled: item.disabled,
+        onClick: () => {
+          onClose();
+          item.onSelect();
+        },
+        children: [
+          /* @__PURE__ */ jsxs38("span", { className: "flex items-center gap-2", children: [
+            item.icon,
+            item.label
+          ] }),
+          item.shortcut && /* @__PURE__ */ jsx58("span", { className: "text-neutral-500 text-[10px] ml-3", children: item.shortcut })
+        ]
+      },
+      item.id
+    )),
+    /* @__PURE__ */ jsx58("div", { className: "my-1 border-t border-neutral-700/60" })
+  ] });
+}
 var ClipContextMenu = memo14(function ClipContextMenu2({
   x,
   y,
@@ -21978,7 +22039,8 @@ var ClipContextMenu = memo14(function ClipContextMenu2({
   onCopy,
   onPaste,
   onDuplicate,
-  canPaste
+  canPaste,
+  hostItems = []
 }) {
   const menuRef = useContextMenuDismiss(onClose);
   useMenuKeyboardNav(menuRef);
@@ -21990,14 +22052,14 @@ var ClipContextMenu = memo14(function ClipContextMenu2({
   const canSplit = isSplittable && currentTime > element.start && currentTime < element.start + element.duration;
   const splitLabel = !isSplittable ? null : canSplit ? `Split at ${currentTime.toFixed(2)}s` : "Split (move playhead inside clip)";
   const clipboardItemCount = [onCopy, onPaste, onDuplicate].filter(Boolean).length;
-  const rowCount = (splitLabel ? 1 : 0) + clipboardItemCount + 1;
-  const dividerCount = (splitLabel ? 1 : 0) + (clipboardItemCount > 0 ? 1 : 0);
+  const hostRows = hostItems.length;
+  const rowCount = hostRows + (splitLabel ? 1 : 0) + clipboardItemCount + 1;
+  const dividerCount = (hostRows > 0 ? 1 : 0) + (splitLabel ? 1 : 0) + (clipboardItemCount > 0 ? 1 : 0);
   const menuWidth = 200;
   const menuHeight = rowCount * 30 + dividerCount * 9 + 8;
   const overflowY = y + menuHeight - window.innerHeight;
   const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
   const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
-  const itemClass = (enabled) => `w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-none${enabled ? " focus-visible:bg-neutral-800 text-neutral-300 hover:bg-neutral-800 cursor-pointer" : " text-neutral-600 cursor-not-allowed"}`;
   return createPortal4(
     /* @__PURE__ */ jsxs38(
       "div",
@@ -22008,6 +22070,7 @@ var ClipContextMenu = memo14(function ClipContextMenu2({
         className: "fixed z-200 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]",
         style: { left: adjustedX, top: adjustedY },
         children: [
+          hostRows > 0 && /* @__PURE__ */ jsx58(HostItems, { items: hostItems, onClose }),
           splitLabel && /* @__PURE__ */ jsxs38(Fragment18, { children: [
             /* @__PURE__ */ jsxs38(
               "button",
@@ -22128,7 +22191,7 @@ var TrackGapContextMenu = memo15(function TrackGapContextMenu2({
   const overflowY = y + menuHeight - window.innerHeight;
   const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
   const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
-  const itemClass = (enabled) => `w-full flex items-center justify-between px-3 py-1.5 text-xs text-left ${enabled ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer" : "text-neutral-600 cursor-not-allowed"}`;
+  const itemClass2 = (enabled) => `w-full flex items-center justify-between px-3 py-1.5 text-xs text-left ${enabled ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer" : "text-neutral-600 cursor-not-allowed"}`;
   const closeGapTitle = canCloseGap ? void 0 : gapWidth == null ? "No gap here" : "A clip on this track can't be moved";
   const closeAllTitle = canCloseAllGaps ? void 0 : hasAnyGaps ? "A clip on this track can't be moved" : "No gaps on this track";
   return createPortal5(
@@ -22144,7 +22207,7 @@ var TrackGapContextMenu = memo15(function TrackGapContextMenu2({
             "button",
             {
               type: "button",
-              className: itemClass(canCloseGap),
+              className: itemClass2(canCloseGap),
               disabled: !canCloseGap,
               title: closeGapTitle,
               onPointerEnter: () => onHoverAction(canCloseGap ? "close-gap" : null),
@@ -22166,7 +22229,7 @@ var TrackGapContextMenu = memo15(function TrackGapContextMenu2({
             "button",
             {
               type: "button",
-              className: itemClass(canCloseAllGaps),
+              className: itemClass2(canCloseAllGaps),
               disabled: !canCloseAllGaps,
               title: closeAllTitle,
               onPointerEnter: () => onHoverAction(canCloseAllGaps ? "close-all" : null),
@@ -22330,6 +22393,11 @@ function TimelineClipMenuOverlay() {
   useEffect30(() => {
     if (clipContextMenu && !element) setClipContextMenu(null);
   }, [element, clipContextMenu, setClipContextMenu]);
+  const { clipMenuItems } = overlay;
+  const hostItems = useMemo32(
+    () => element ? clipMenuItems?.(element) : void 0,
+    [clipMenuItems, element]
+  );
   if (!clipContextMenu || !element) return null;
   const readCurrentElement = () => resolveTimelineContextElement({
     capturedElement: element,
@@ -22360,7 +22428,8 @@ function TimelineClipMenuOverlay() {
       onCopy: overlay.onCopyClip,
       onPaste: overlay.onPasteClip,
       onDuplicate: overlay.onDuplicateClip,
-      canPaste: overlay.canPasteClip?.() ?? false
+      canPaste: overlay.canPasteClip?.() ?? false,
+      hostItems
     }
   );
 }
@@ -22570,7 +22639,7 @@ var Timeline = Object.assign(TimelineComposed, {
 });
 
 // src/player/components/VideoThumbnail.tsx
-import { memo as memo17, useMemo as useMemo32 } from "react";
+import { memo as memo17, useMemo as useMemo33 } from "react";
 
 // src/hooks/useThumbnailLease.ts
 import { useCallback as useCallback34, useLayoutEffect as useLayoutEffect7, useRef as useRef41, useSyncExternalStore as useSyncExternalStore3 } from "react";
@@ -23260,7 +23329,7 @@ var VideoThumbnail = memo17(function VideoThumbnail2({
   const requestFrameCount = quantizeThumbnailFrameCount(
     computeThumbnailStrip(container.width, 16 / 9, container.height).frameCount
   );
-  const requestProps = useMemo32(
+  const requestProps = useMemo33(
     () => ({
       videoSrc,
       sourceStart,
@@ -23272,11 +23341,11 @@ var VideoThumbnail = memo17(function VideoThumbnail2({
     }),
     [duration, priority, projectId, sessionEpoch, sourceRangeDuration, sourceStart, videoSrc]
   );
-  const posterRequest = useMemo32(
+  const posterRequest = useMemo33(
     () => createVideoThumbnailRequest(requestProps, 1, false),
     [requestProps]
   );
-  const richRequest = useMemo32(
+  const richRequest = useMemo33(
     () => createVideoThumbnailRequest(requestProps, requestFrameCount, true),
     [requestFrameCount, requestProps]
   );
@@ -23340,7 +23409,7 @@ var VideoThumbnail = memo17(function VideoThumbnail2({
 });
 
 // src/player/components/CompositionThumbnail.tsx
-import { memo as memo18, useMemo as useMemo33 } from "react";
+import { memo as memo18, useMemo as useMemo34 } from "react";
 import { jsx as jsx66, jsxs as jsxs45 } from "react/jsx-runtime";
 var THUMBNAIL_URL_VERSION = "v3";
 var THUMBNAIL_SEEK_TIME_SECONDS = 3;
@@ -23419,7 +23488,7 @@ var CompositionThumbnail = memo18(function CompositionThumbnail2({
     origin: window.location.origin,
     contentRevision
   });
-  const request = useMemo33(
+  const request = useMemo34(
     () => ({
       key: createThumbnailKey({ kind: "composition", url }),
       projectId,
@@ -26406,7 +26475,7 @@ function useTimelinePlayer({
 }
 
 // src/player/hooks/usePlayerHandle.ts
-import { useCallback as useCallback43, useMemo as useMemo34 } from "react";
+import { useCallback as useCallback43, useMemo as useMemo35 } from "react";
 
 // src/components/nle/NLEContext.tsx
 import { useContext as useContext7, useState as useState29, useCallback as useCallback42, useRef as useRef48, useEffect as useEffect33 } from "react";
@@ -26784,7 +26853,7 @@ function usePlayerHandle() {
   const subscribeTime = useCallback43((listener2) => {
     return liveTime.subscribe(listener2);
   }, []);
-  const handleElements = useMemo34(() => elements.map(toHandleElement), [elements]);
+  const handleElements = useMemo35(() => elements.map(toHandleElement), [elements]);
   return {
     ready,
     playing,
@@ -27697,7 +27766,7 @@ function CompositionBreadcrumb({ stack, onNavigate }) {
 import { useCallback as useCallback48, useRef as useRef53, useState as useState32 } from "react";
 
 // src/components/editor/previewReadOnlyContext.tsx
-import { useContext as useContext8, useMemo as useMemo35 } from "react";
+import { useContext as useContext8, useMemo as useMemo36 } from "react";
 import { jsx as jsx72 } from "react/jsx-runtime";
 var DEFAULT_REASON = "Preview is read-only.";
 var PreviewReadOnlyContext = createStableContext("PreviewReadOnlyContext", {
@@ -27709,7 +27778,7 @@ function PreviewReadOnlyProvider({
   reason,
   children
 }) {
-  const value = useMemo35(() => ({ readOnly, reason: reason ?? DEFAULT_REASON }), [readOnly, reason]);
+  const value = useMemo36(() => ({ readOnly, reason: reason ?? DEFAULT_REASON }), [readOnly, reason]);
   return /* @__PURE__ */ jsx72(PreviewReadOnlyContext, { value, children });
 }
 function usePreviewReadOnly() {
@@ -28457,7 +28526,7 @@ import {
   memo as memo21,
   useCallback as useCallback51,
   useEffect as useEffect38,
-  useMemo as useMemo37,
+  useMemo as useMemo38,
   useRef as useRef58
 } from "react";
 import {
@@ -28480,7 +28549,7 @@ var useAudioMetersVisible = create5((set) => ({
 }));
 
 // src/utils/audioMeterMath.ts
-import { useMemo as useMemo36 } from "react";
+import { useMemo as useMemo37 } from "react";
 import { audioDbToGain, audioGainToDb } from "@hyperframes/core/audio-gain";
 var METER_DB_MARKS = [0, -3, -6, -12, -24];
 var FLOOR_DB = -60;
@@ -28520,7 +28589,7 @@ function hasProjectAudio(elements) {
 }
 function useProjectHasAudio() {
   const elements = usePlayerStore((s) => s.elements);
-  return useMemo36(() => hasProjectAudio(elements), [elements]);
+  return useMemo37(() => hasProjectAudio(elements), [elements]);
 }
 
 // src/components/nle/AudioMeterStrip.tsx
@@ -28531,7 +28600,7 @@ var RED_AT = markFraction(-3);
 function useStrips() {
   const elements = usePlayerStore((s) => s.elements);
   const masterVolume = usePlayerStore((s) => s.audioVolume);
-  return useMemo37(() => {
+  return useMemo38(() => {
     const labels = /* @__PURE__ */ new Map();
     const volumes = /* @__PURE__ */ new Map();
     for (const el of elements) {
@@ -28878,7 +28947,8 @@ function TimelinePane({
   onCopyClip,
   onPasteClip,
   onDuplicateClip,
-  canPasteClip
+  canPasteClip,
+  clipMenuItems
 }) {
   const {
     seek,
@@ -28933,7 +29003,8 @@ function TimelinePane({
                     onCopyClip,
                     onPasteClip,
                     onDuplicateClip,
-                    canPasteClip
+                    canPasteClip,
+                    clipMenuItems
                   }
                 ) }),
                 /* @__PURE__ */ jsx78(AudioMeterStrip, {})
@@ -29594,7 +29665,7 @@ var CaptionOverlay = memo22(function CaptionOverlay2({ iframeRef }) {
 });
 
 // src/components/editor/DomEditOverlay.tsx
-import { memo as memo25, useEffect as useEffect49, useMemo as useMemo38, useRef as useRef69 } from "react";
+import { memo as memo25, useEffect as useEffect49, useMemo as useMemo39, useRef as useRef69 } from "react";
 
 // src/components/editor/marqueeCommit.ts
 import { useCallback as useCallback53, useEffect as useEffect40, useRef as useRef60, useState as useState36 } from "react";
@@ -30115,12 +30186,52 @@ function cropRectFromInsets(rect, insets, scaleX, scaleY) {
     height: Math.max(0, rect.height - (insets.top + insets.bottom) * sy)
   };
 }
-function readElementCropInsets(element) {
+var cropLifts = /* @__PURE__ */ new WeakMap();
+function liftSelector(element) {
+  const quote = (value) => `"${value.replace(/["\\]/g, "\\$&")}"`;
+  const hfId = element.getAttribute("data-hf-id");
+  if (hfId) return `[data-hf-id=${quote(hfId)}]`;
+  return element.id ? `[id=${quote(element.id)}]` : null;
+}
+function liftElementCrop(element) {
+  const selector = liftSelector(element);
+  if (!selector || cropLifts.has(element)) return;
+  const doc = element.ownerDocument;
+  const rule = doc.createElement("style");
+  rule.textContent = `${selector}{clip-path:none!important}`;
+  (doc.head ?? doc.documentElement).append(rule);
+  cropLifts.set(element, { rule });
+}
+function dropElementCropLift(element) {
+  cropLifts.get(element)?.rule.remove();
+  cropLifts.delete(element);
+}
+function isElementCropLifted(element) {
+  return cropLifts.has(element);
+}
+var computedClipPath = (element) => element.ownerDocument.defaultView?.getComputedStyle(element).clipPath.trim() || "";
+function readElementClipPath(element) {
   const inline = element.style.getPropertyValue("clip-path").trim();
-  const value = inline || element.ownerDocument.defaultView?.getComputedStyle(element).clipPath.trim() || "";
+  const lift = cropLifts.get(element);
+  if (inline || !lift) return inline || computedClipPath(element);
+  if (lift.sheetClip === void 0) {
+    const { parentNode, nextSibling } = lift.rule;
+    lift.rule.remove();
+    lift.sheetClip = computedClipPath(element);
+    parentNode?.insertBefore(lift.rule, nextSibling);
+  }
+  return lift.sheetClip;
+}
+function parseCropClipPath(value) {
   if (!value || value === "none") return { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
   return parseInsetClipPathSides(value);
 }
+function readElementCropInsets(element) {
+  return parseCropClipPath(readElementClipPath(element));
+}
+function hasCropInsets(insets) {
+  return insets.top > 0 || insets.right > 0 || insets.bottom > 0 || insets.left > 0;
+}
 function clampInset(value, max) {
   if (!Number.isFinite(value)) return 0;
   return Math.min(Math.max(0, value), Math.max(0, max));
@@ -30162,7 +30273,7 @@ function resolveCropInsetFromMoveDrag(input) {
   return { left, right: totalX - left, top, bottom: totalY - top };
 }
 function hugRectForElement(rect, element) {
-  const insets = readElementCropInsets(element);
+  const insets = isElementCropLifted(element) ? null : readElementCropInsets(element);
   if (!insets || insets.top <= 0 && insets.right <= 0 && insets.bottom <= 0 && insets.left <= 0)
     return rect;
   return cropRectFromInsets(rect, insets, rect.editScaleX, rect.editScaleY);
@@ -30900,9 +31011,6 @@ function pointerAngleDegrees(centerX, centerY, x, y) {
 function normalizeAngleDelta(delta) {
   return ((delta + 180) % 360 + 360) % 360 - 180;
 }
-function roundAngle(angle) {
-  return Math.round(angle * 10) / 10;
-}
 function resolveDomEditRotationGesture(input) {
   const startAngle = pointerAngleDegrees(input.centerX, input.centerY, input.startX, input.startY);
   const currentAngle = pointerAngleDegrees(
@@ -30914,7 +31022,7 @@ function resolveDomEditRotationGesture(input) {
   const delta = normalizeAngleDelta(currentAngle - startAngle);
   const angle = input.actualAngle + delta;
   return {
-    angle: input.snap ? Math.round(angle / ROTATION_SNAP_DEGREES) * ROTATION_SNAP_DEGREES : roundAngle(angle)
+    angle: input.snap ? Math.round(angle / ROTATION_SNAP_DEGREES) * ROTATION_SNAP_DEGREES : roundTo3(angle)
   };
 }
 function hasDomEditRotationChanged(initialAngle, nextAngle) {
@@ -31273,9 +31381,6 @@ var STUDIO_ROTATION_TRANSFORM_ORIGIN = "center center";
 function finiteNumber2(value) {
   return typeof value === "number" && Number.isFinite(value) ? value : null;
 }
-function roundRotationAngle(angle) {
-  return Math.round(angle * 10) / 10;
-}
 function normalizeStudioFileChangePath(path) {
   return path.trim().replace(/\\/g, "/").replace(/^\.?\//, "");
 }
@@ -31479,8 +31584,8 @@ function prepareStudioPathOffsetBase(element, updateBase) {
 function writeStudioPathOffsetVars(element, offset, options = {}) {
   prepareStudioPathOffsetBase(element, options.updateBase ?? true);
   element.setAttribute(STUDIO_PATH_OFFSET_ATTR, "true");
-  element.style.setProperty(STUDIO_OFFSET_X_PROP, `${Math.round(offset.x)}px`);
-  element.style.setProperty(STUDIO_OFFSET_Y_PROP, `${Math.round(offset.y)}px`);
+  element.style.setProperty(STUDIO_OFFSET_X_PROP, `${roundTo3(offset.x)}px`);
+  element.style.setProperty(STUDIO_OFFSET_Y_PROP, `${roundTo3(offset.y)}px`);
 }
 function isIdentityAfterTranslateStrip(m) {
   return m.is2D && m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1;
@@ -31550,7 +31655,7 @@ function applyStudioPathOffsetDraft(element, offset) {
   if (applyStudioPathOffsetViaGsap(element, offset)) return;
   element.style.setProperty(
     "translate",
-    composeTranslateValue(element, `${Math.round(offset.x)}px`, `${Math.round(offset.y)}px`)
+    composeTranslateValue(element, `${roundTo3(offset.x)}px`, `${roundTo3(offset.y)}px`)
   );
   stripGsapTranslateFromTransform(element);
 }
@@ -31560,7 +31665,7 @@ function readParentFlexBasisPixels(element, size) {
   const display2 = readStyleOrComputed(parent, "display").trim();
   if (display2 !== "flex" && display2 !== "inline-flex") return null;
   const direction = readStyleOrComputed(parent, "flex-direction").trim();
-  return Math.round(Math.max(1, direction.startsWith("column") ? size.height : size.width));
+  return roundToLayoutPx(Math.max(1, direction.startsWith("column") ? size.height : size.width));
 }
 function restoreStaleStudioScaleResize(element) {
   if (!element.hasAttribute(STUDIO_ORIGINAL_SCALE_ATTR)) return;
@@ -31623,14 +31728,14 @@ function writeStudioBoxSizeVars(element, size) {
     element.setAttribute(STUDIO_ORIGINAL_DISPLAY_ATTR, element.style.getPropertyValue("display"));
   }
   element.setAttribute(STUDIO_BOX_SIZE_ATTR, "true");
-  element.style.setProperty(STUDIO_WIDTH_PROP, `${Math.round(Math.max(1, size.width))}px`);
-  element.style.setProperty(STUDIO_HEIGHT_PROP, `${Math.round(Math.max(1, size.height))}px`);
+  element.style.setProperty(STUDIO_WIDTH_PROP, `${roundToLayoutPx(Math.max(1, size.width))}px`);
+  element.style.setProperty(STUDIO_HEIGHT_PROP, `${roundToLayoutPx(Math.max(1, size.height))}px`);
 }
 function applyStudioBoxSizeDimensions(element, size) {
   writeStudioBoxSizeVars(element, size);
   restoreStaleStudioScaleResize(element);
-  const width = Math.round(Math.max(1, size.width));
-  const height = Math.round(Math.max(1, size.height));
+  const width = roundToLayoutPx(Math.max(1, size.width));
+  const height = roundToLayoutPx(Math.max(1, size.height));
   element.style.setProperty("box-sizing", "border-box");
   element.style.setProperty("width", `${width}px`);
   element.style.setProperty("height", `${height}px`);
@@ -31653,7 +31758,17 @@ function applyStudioBoxSize(element, size) {
   promoteInlineForTransform(element);
   applyStudioBoxSizeDimensions(element, size);
 }
+var boxSizeDraftBases = /* @__PURE__ */ new WeakMap();
+function readStudioBoxSizeDraftBase(element) {
+  return boxSizeDraftBases.get(element) ?? null;
+}
+function forgetStudioBoxSizeDraftBase(element) {
+  boxSizeDraftBases.delete(element);
+}
 function applyStudioBoxSizeDraft(element, size) {
+  if (!boxSizeDraftBases.has(element)) {
+    boxSizeDraftBases.set(element, { width: element.offsetWidth, height: element.offsetHeight });
+  }
   promoteInlineForTransform(element);
   applyStudioBoxSizeDimensions(element, size);
 }
@@ -31691,7 +31806,7 @@ function prepareStudioRotationBase(element, updateBase) {
 function writeStudioRotationVars(element, rotation, options = {}) {
   prepareStudioRotationBase(element, options.updateBase ?? true);
   element.setAttribute(STUDIO_ROTATION_ATTR, "true");
-  element.style.setProperty(STUDIO_ROTATION_PROP, `${roundRotationAngle(rotation.angle)}deg`);
+  element.style.setProperty(STUDIO_ROTATION_PROP, `${roundTo3(rotation.angle)}deg`);
   element.style.setProperty("transform-origin", STUDIO_ROTATION_TRANSFORM_ORIGIN);
 }
 function applyStudioRotation(element, rotation) {
@@ -31709,7 +31824,7 @@ function applyStudioRotationDraft(element, rotation) {
   element.setAttribute(STUDIO_ROTATION_DRAFT_ATTR, "true");
   element.style.setProperty(
     "rotate",
-    composeStudioRotationValue(element, `${roundRotationAngle(rotation.angle)}deg`)
+    composeStudioRotationValue(element, `${roundTo3(rotation.angle)}deg`)
   );
 }
 
@@ -31877,6 +31992,7 @@ function restoreStyleProperty(element, property, value) {
   else element.style.removeProperty(property);
 }
 function restoreStudioBoxSize(element, previous) {
+  forgetStudioBoxSizeDraftBase(element);
   restoreStyleProperty(element, "width", previous.width);
   restoreStyleProperty(element, "height", previous.height);
   restoreStyleProperty(element, "min-width", previous.minWidth);
@@ -32006,6 +32122,7 @@ function clearStudioRotation(element) {
   element.removeAttribute(STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR);
 }
 function clearStudioBoxSize(element) {
+  forgetStudioBoxSizeDraftBase(element);
   if (element.hasAttribute(STUDIO_BOX_SIZE_ATTR) || styleUsesStudioSize(element.style.getPropertyValue("width")) || styleUsesStudioSize(element.style.getPropertyValue("height")) || element.hasAttribute(STUDIO_ORIGINAL_SCALE_ATTR)) {
     restoreOriginalBoxSizeProperty(element, "width", STUDIO_ORIGINAL_WIDTH_ATTR);
     restoreOriginalBoxSizeProperty(element, "height", STUDIO_ORIGINAL_HEIGHT_ATTR);
@@ -32259,8 +32376,8 @@ function computeDraggedGsapPosition(element, studioOffset, fallbackBase) {
   const baseGsapX = Number.isFinite(parsedBaseX) ? parsedBaseX : fallbackBase.x;
   const baseGsapY = Number.isFinite(parsedBaseY) ? parsedBaseY : fallbackBase.y;
   return {
-    newX: Math.round(baseGsapX + adjX),
-    newY: Math.round(baseGsapY + adjY),
+    newX: roundTo3(baseGsapX + adjX),
+    newY: roundTo3(baseGsapY + adjY),
     baseGsapX,
     baseGsapY
   };
@@ -34257,6 +34374,340 @@ var SnapGuideOverlay = memo23(function SnapGuideOverlay2({
 
 // src/components/editor/DomEditCropHandles.tsx
 import { useEffect as useEffect44, useRef as useRef65, useState as useState40 } from "react";
+
+// src/hooks/gsapRuntimeKeyframes.ts
+import { buildArcPath } from "@hyperframes/core/gsap-parser-acorn";
+var FLAT_SKIP_KEYS = /* @__PURE__ */ new Set([
+  "ease",
+  "duration",
+  "delay",
+  "stagger",
+  "motionPath",
+  "overwrite",
+  "immediateRender",
+  "onComplete",
+  "onUpdate",
+  "onStart",
+  "keyframes"
+]);
+function timelinesOf(iframe) {
+  if (!iframe?.contentWindow) return null;
+  try {
+    return iframe.contentWindow.__timelines ?? null;
+  } catch {
+    return null;
+  }
+}
+function isXY(p) {
+  return !!p && typeof p.x === "number" && typeof p.y === "number";
+}
+function isZeroDurationSet(duration) {
+  return !(duration > 0);
+}
+function coordsFromMotionPath(mp) {
+  if (!mp || typeof mp !== "object") return null;
+  const obj = mp;
+  const pathVal = Array.isArray(mp) ? mp : obj.path;
+  if (!Array.isArray(pathVal)) return null;
+  const coords = pathVal.filter(isXY).map((p) => ({ x: p.x, y: p.y }));
+  if (coords.length < 2) return null;
+  const curviness = typeof obj.curviness === "number" ? obj.curviness : 1;
+  const autoRotate = typeof obj.autoRotate === "number" ? obj.autoRotate : obj.autoRotate === true;
+  return { coords, curviness, autoRotate, isCubic: obj.type === "cubic" };
+}
+function flatTweenKeyframes(vars) {
+  const properties = {};
+  for (const [k, v] of Object.entries(vars)) {
+    if (FLAT_SKIP_KEYS.has(k)) continue;
+    if (typeof v === "number") properties[k] = roundTo3(v);
+    else if (typeof v === "string") properties[k] = v;
+  }
+  if (Object.keys(properties).length === 0) return null;
+  return [
+    { percentage: 0, properties },
+    { percentage: 100, properties }
+  ];
+}
+function readTween(vars) {
+  if (vars.keyframes && typeof vars.keyframes === "object") {
+    const parsed = parsePercentageKeyframes(vars.keyframes);
+    if (parsed) return parsed;
+  }
+  const mp = coordsFromMotionPath(vars.motionPath);
+  if (mp) {
+    const shape = buildArcPath(mp.coords, mp.curviness, mp.autoRotate, mp.isCubic);
+    if (shape) {
+      const n = shape.waypoints.length;
+      const keyframes = shape.waypoints.map((wp, i) => ({
+        percentage: n > 1 ? Math.round(i / (n - 1) * 100) : 0,
+        properties: { x: wp.x, y: wp.y }
+      }));
+      return { keyframes, arcPath: shape.arcPath };
+    }
+  }
+  const flat = flatTweenKeyframes(vars);
+  return flat ? { keyframes: flat } : null;
+}
+function matchesElement(tween, el) {
+  if (!tween.targets) return false;
+  for (const t of tween.targets()) {
+    if (t === el || el.id && t.id === el.id) return true;
+  }
+  return false;
+}
+function tweenTiming(tween) {
+  const rawStart = typeof tween.startTime === "function" ? tween.startTime() : 0;
+  const rawDur = typeof tween.duration === "function" ? tween.duration() : 0;
+  return {
+    start: Number.isFinite(rawStart) ? rawStart : 0,
+    duration: Number.isFinite(rawDur) ? rawDur : 0
+  };
+}
+function varsCarryChannel(vars, channels) {
+  if (!vars) return false;
+  for (const ch of channels) {
+    if (Object.prototype.hasOwnProperty.call(vars, ch)) return true;
+  }
+  return false;
+}
+function keyframeVarsCarryChannel(vars, channels) {
+  const kf = vars?.keyframes;
+  if (!kf || typeof kf !== "object") return false;
+  if (!Array.isArray(kf) && channels.some((ch) => Object.prototype.hasOwnProperty.call(kf, ch)))
+    return true;
+  const steps = Array.isArray(kf) ? kf : Object.values(kf);
+  return steps.some(
+    (step) => step != null && typeof step === "object" && channels.some((ch) => Object.prototype.hasOwnProperty.call(step, ch))
+  );
+}
+function resolveRuntimeTween(iframe, selector, kind, compositionId, channels) {
+  const timelines = timelinesOf(iframe);
+  if (!timelines) return null;
+  let targetEl = null;
+  try {
+    targetEl = iframe?.contentDocument?.querySelector(selector) ?? null;
+  } catch {
+    return null;
+  }
+  if (!targetEl) return null;
+  const tlIds = compositionId ? [compositionId] : Object.keys(timelines).filter((k) => typeof timelines[k]?.getChildren === "function");
+  const wantChannels = channels && channels.length > 0 ? channels : null;
+  let first = null;
+  let channelMatch = null;
+  for (const tlId of tlIds) {
+    const timeline = timelines[tlId];
+    if (!timeline?.getChildren) continue;
+    const now2 = typeof timeline.time === "function" ? timeline.time() : null;
+    for (const tween of timeline.getChildren(true)) {
+      if (!tween.vars || !matchesElement(tween, targetEl)) continue;
+      const dur = typeof tween.duration === "function" ? tween.duration() : 0;
+      const isSet = !(dur > 0);
+      if (kind === "set" ? !isSet : isSet) continue;
+      if (wantChannels) {
+        const carries = kind === "set" ? varsCarryChannel(tween.vars, wantChannels) : keyframeVarsCarryChannel(tween.vars, wantChannels);
+        if (carries) {
+          if (channelMatch === null) channelMatch = { tween, timeline };
+        } else if (first === null) {
+          first = { tween, timeline };
+        }
+        continue;
+      }
+      if (first === null) first = { tween, timeline };
+      if (kind === "keyframe" && now2 != null) {
+        const start = typeof tween.startTime === "function" ? tween.startTime() : 0;
+        if (now2 >= start - 1e-3 && now2 <= start + dur + 1e-3) return { tween, timeline };
+      }
+    }
+  }
+  return channelMatch ?? first;
+}
+function readCarriesChannel(read, channels) {
+  return read.keyframes.some((kf) => channels.some((c) => kf.properties[c] != null));
+}
+function readRuntimeKeyframes(iframe, selector, compositionId, requireChannels) {
+  const timelines = timelinesOf(iframe);
+  if (!timelines) return null;
+  let targetEl = null;
+  try {
+    targetEl = iframe?.contentDocument?.querySelector(selector) ?? null;
+  } catch {
+    return null;
+  }
+  if (!targetEl) return null;
+  const tlIds = compositionId ? [compositionId] : Object.keys(timelines).filter((k) => typeof timelines[k]?.getChildren === "function");
+  if (tlIds.length === 0) return null;
+  let firstRead = null;
+  for (const tlId of tlIds) {
+    const timeline = timelines[tlId];
+    if (!timeline?.getChildren) continue;
+    const now2 = typeof timeline.time === "function" ? timeline.time() : null;
+    for (const tween of timeline.getChildren(true)) {
+      if (!tween.vars || !matchesElement(tween, targetEl)) continue;
+      const dur = typeof tween.duration === "function" ? tween.duration() : 0;
+      if (isZeroDurationSet(dur)) continue;
+      const read = readTween(tween.vars);
+      if (!read) continue;
+      if (requireChannels && !readCarriesChannel(read, requireChannels)) continue;
+      if (firstRead === null) firstRead = read;
+      if (now2 != null) {
+        const start = typeof tween.startTime === "function" ? tween.startTime() : 0;
+        if (now2 >= start - 1e-3 && now2 <= start + dur + 1e-3) return read;
+      }
+    }
+  }
+  return firstRead;
+}
+function hasNonHoldTweenForElement(iframe, selector, compositionId, channels) {
+  let targetEl = null;
+  try {
+    targetEl = iframe?.contentDocument?.querySelector(selector) ?? null;
+  } catch {
+    return false;
+  }
+  return !!targetEl && hasNonHoldTween(timelinesOf(iframe), targetEl, channels, compositionId);
+}
+function elementHasNonHoldTween(el, channels) {
+  const win = el.ownerDocument.defaultView;
+  return hasNonHoldTween(win?.__timelines ?? null, el, channels);
+}
+function hasNonHoldTween(timelines, targetEl, channels, compositionId) {
+  if (!timelines) return false;
+  for (const tlId of compositionId ? [compositionId] : Object.keys(timelines)) {
+    for (const tween of timelines[tlId]?.getChildren?.(true) ?? []) {
+      if (!tween.vars || !matchesElement(tween, targetEl)) continue;
+      const dur = typeof tween.duration === "function" ? tween.duration() : 0;
+      if (isZeroDurationSet(dur)) continue;
+      if (channels && keyframeVarsCarryChannel(tween.vars, channels)) return true;
+      const read = readTween(tween.vars);
+      if (read && (!channels || readCarriesChannel(read, channels))) return true;
+    }
+  }
+  return false;
+}
+function toClipRelative(keyframes, tweenStart, tweenDuration, clip) {
+  if (!clip || clip.duration <= 0) return keyframes;
+  return keyframes.map((kf) => {
+    const abs = toAbsoluteTime(tweenStart, tweenDuration, kf.percentage);
+    return { ...kf, percentage: Math.round((abs - clip.start) / clip.duration * 1e5) / 1e3 };
+  });
+}
+function buildEntry(read, start, duration, clip) {
+  return {
+    keyframes: toClipRelative(read.keyframes, start, duration, clip),
+    tweenStart: start,
+    tweenDuration: duration,
+    ...read.easeEach ? { easeEach: read.easeEach } : {},
+    ...read.arcPath ? { arcPath: read.arcPath } : {}
+  };
+}
+function addScanEntry(result, tween, clipById) {
+  if (!tween.targets || !tween.vars) return;
+  const { start, duration } = tweenTiming(tween);
+  if (isZeroDurationSet(duration)) return;
+  const read = readTween(tween.vars);
+  if (!read) return;
+  for (const target of tween.targets()) {
+    const id = target.id;
+    if (id && !result.has(id)) result.set(id, buildEntry(read, start, duration, clipById?.get(id)));
+  }
+}
+function scanAllRuntimeKeyframes(iframe, clipById) {
+  const result = /* @__PURE__ */ new Map();
+  const timelines = timelinesOf(iframe);
+  if (!timelines) return result;
+  for (const timeline of Object.values(timelines)) {
+    if (!timeline?.getChildren) continue;
+    for (const tween of timeline.getChildren(true)) addScanEntry(result, tween, clipById);
+  }
+  return result;
+}
+
+// src/components/editor/cropResize.ts
+var boxOf = (element) => ({
+  width: element.offsetWidth,
+  height: element.offsetHeight
+});
+function cropFollows(element) {
+  const clip = gsapAnimatesProperty(element, "clipPath");
+  return {
+    width: !clip && !elementHasNonHoldTween(element, ["width"]),
+    height: !clip && !elementHasNonHoldTween(element, ["height"])
+  };
+}
+function scaleCrop(crop, from, to, follows) {
+  const sx = follows.width && from.width > 0 ? to.width / from.width : 1;
+  const sy = follows.height && from.height > 0 ? to.height / from.height : 1;
+  return {
+    top: crop.top * sy,
+    right: crop.right * sx,
+    bottom: crop.bottom * sy,
+    left: crop.left * sx,
+    radius: crop.radius
+  };
+}
+function readCropFollowingResize(element) {
+  const crop = readElementCropInsets(element);
+  const base2 = readStudioBoxSizeDraftBase(element);
+  return crop && base2 ? scaleCrop(crop, base2, boxOf(element), cropFollows(element)) : crop;
+}
+function prepareCropResize(element) {
+  const from = readStudioBoxSizeDraftBase(element) ?? boxOf(element);
+  const before = element.style.getPropertyValue("clip-path");
+  const priority = element.style.getPropertyPriority("clip-path");
+  const follows = cropFollows(element);
+  const crop = readElementCropInsets(element);
+  return () => {
+    forgetStudioBoxSizeDraftBase(element);
+    const to = boxOf(element);
+    const untouched = element.style.getPropertyValue("clip-path") === before;
+    if (!crop || !hasCropInsets(crop) || !untouched || !(to.width > 0 && to.height > 0))
+      return null;
+    const clip = buildInsetClipPathSides(scaleCrop(crop, from, to, follows), crop.radius);
+    if (clip === buildInsetClipPathSides(crop, crop.radius)) return null;
+    element.style.setProperty("clip-path", clip, priority);
+    return {
+      patch: {
+        type: "inline-style",
+        property: "clip-path",
+        value: priority ? `${clip} !important` : clip
+      },
+      revert: () => {
+        if (before) element.style.setProperty("clip-path", before, priority);
+        else element.style.removeProperty("clip-path");
+      }
+    };
+  };
+}
+async function saveCropResize(stage, selection, commit, coalesceKey) {
+  const crop = stage();
+  if (!crop) return;
+  try {
+    await commit(selection, [crop.patch], {
+      label: "Resize layer",
+      coalesceKey,
+      coalesceMs: Number.POSITIVE_INFINITY
+    });
+  } catch (error) {
+    crop.revert();
+    throw error;
+  }
+}
+var sizeWriteCounter = 0;
+async function writeSizeWithCrop(selection, properties, mutation, commit, write) {
+  if (!mutation || !("width" in properties || "height" in properties)) return write();
+  const stage = prepareCropResize(selection.element);
+  const coalesceKey = `size-write:${++sizeWriteCounter}`;
+  const undoStep = { coalesceKey, coalesceMs: Number.POSITIVE_INFINITY };
+  const keyed = (s, m, options) => mutation(s, m, { ...options, ...undoStep });
+  if (mutation.batch) {
+    const batch = mutation.batch;
+    keyed.batch = (calls, options) => batch(calls, { ...options, ...undoStep });
+  }
+  await write(keyed);
+  await saveCropResize(stage, selection, commit, coalesceKey);
+}
+
+// src/components/editor/DomEditCropHandles.tsx
 import { Fragment as Fragment26, jsx as jsx84, jsxs as jsxs57 } from "react/jsx-runtime";
 var EDGE_HIT_THICKNESS = 12;
 var EDGE_HIT_LENGTH = 32;
@@ -34297,6 +34748,7 @@ function repositionHandleSize(rect) {
   return Math.min(REPOSITION_HANDLE_PX, Math.max(rect.width, rect.height) - RESIZE_HANDLE_HIT_PX);
 }
 var EDGES = ["top", "right", "bottom", "left"];
+var NO_CROP = { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
 function DomEditCropHandles({
   selection,
   overlayRect,
@@ -34307,38 +34759,28 @@ function DomEditCropHandles({
   const [hotEdge, setHotEdge] = useState40(null);
   const cropStateFor = (element) => {
     const parsed = readElementCropInsets(element);
-    const { radius, ...insets } = parsed ?? { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
-    return { element, croppable: parsed !== null, insets, radius };
+    const { top, right, bottom, left } = parsed ?? NO_CROP;
+    return { element, croppable: parsed !== null, insets: { top, right, bottom, left } };
   };
   const [state, setState] = useState40(() => cropStateFor(selection.element));
   if (state.element !== selection.element) {
     setState(cropStateFor(selection.element));
   }
-  const hasCrop = state.insets.top > 0 || state.insets.right > 0 || state.insets.bottom > 0 || state.insets.left > 0;
-  const liftedRef = useRef65(false);
-  const preLiftInlineClipRef = useRef65("");
-  const committedClipRef = useRef65(null);
+  const committed = readCropFollowingResize(selection.element) ?? NO_CROP;
+  const insets = dragging ? state.insets : committed;
+  const hasCrop = hasCropInsets(insets);
   useEffect44(() => {
     const el = selection.element;
     if (readElementCropInsets(el) === null) return;
-    preLiftInlineClipRef.current = el.style.getPropertyValue("clip-path");
-    committedClipRef.current = null;
-    el.style.setProperty("clip-path", "none");
-    liftedRef.current = true;
-    return () => {
-      liftedRef.current = false;
-      const committed = committedClipRef.current;
-      const restore = committed !== null ? committed || null : preLiftInlineClipRef.current || null;
-      if (restore) el.style.setProperty("clip-path", restore);
-      else el.style.removeProperty("clip-path");
-    };
+    liftElementCrop(el);
+    return () => dropElementCropLift(el);
   }, [selection.element]);
   const frame = readElementCropFrame(selection.element, overlayRect);
   const width = frame.width / frame.scaleX;
   const height = frame.height / frame.scaleY;
   const cropRect = cropRectFromInsets(
     { left: 0, top: 0, width: frame.width, height: frame.height },
-    state.insets,
+    insets,
     frame.scaleX,
     frame.scaleY
   );
@@ -34348,17 +34790,20 @@ function DomEditCropHandles({
     event.preventDefault();
     event.stopPropagation();
     event.currentTarget.setPointerCapture(event.pointerId);
+    const pressed = readCropFollowingResize(selection.element) ?? NO_CROP;
     gestureRef.current = {
       edge,
       pointerId: event.pointerId,
       startX: event.clientX,
       startY: event.clientY,
-      startInsets: state.insets,
-      insets: state.insets,
+      startInsets: pressed,
+      insets: pressed,
+      radius: pressed.radius,
       angleDeg: frame.angleDeg,
       scaleX: frame.scaleX,
       scaleY: frame.scaleY
     };
+    setState((prev) => ({ ...prev, insets: pressed }));
     setDragging(true);
   };
   const updateCropGesture = (event) => {
@@ -34394,19 +34839,10 @@ function DomEditCropHandles({
   const finishCropGesture = (event) => {
     const gesture = endCropGesture(event);
     if (!gesture) return;
-    const el = selection.element;
-    const reLift = () => {
-      if (liftedRef.current) el.style.setProperty("clip-path", "none");
-    };
-    const { insets } = gesture;
-    const committedValue = buildInsetClipPathSides(insets, state.radius);
-    if (committedValue === buildInsetClipPathSides(gesture.startInsets, state.radius)) return;
-    const cropped = insets.top > 0 || insets.right > 0 || insets.bottom > 0 || insets.left > 0;
-    const commit = onStyleCommit?.("clip-path", committedValue);
-    reLift();
-    void Promise.resolve(commit).then(() => {
-      committedClipRef.current = cropped ? committedValue : "";
-    }, reLift);
+    const value = buildInsetClipPathSides(gesture.insets, gesture.radius);
+    if (value === buildInsetClipPathSides(gesture.startInsets, gesture.radius)) return;
+    const commit = onStyleCommit?.("clip-path", value);
+    void Promise.resolve(commit).catch(() => void 0);
   };
   const cancelCropGesture = (event) => {
     const gesture = endCropGesture(event);
@@ -34600,7 +35036,6 @@ function DomEditGroupChrome({
   allowBodyDrag,
   groupCanMove,
   gestures,
-  onBoxMouseDown,
   onBoxClick
 }) {
   const canManipulate = allowCanvasMovement && !usePreviewReadOnly();
@@ -34635,7 +35070,6 @@ function DomEditGroupChrome({
           if (!canManipulate || !allowBodyDrag || e.shiftKey && !groupCanMove) return;
           gestures.startGroupDrag(e);
         },
-        onMouseDown: onBoxMouseDown,
         onClick: onBoxClick
       }
     )
@@ -34654,7 +35088,6 @@ function DomEditSelectionChrome({
   groupSelectionCount,
   gestures,
   onStyleCommit,
-  onBoxMouseDown,
   onBoxClick,
   inlineText
 }) {
@@ -34709,7 +35142,6 @@ function DomEditSelectionChrome({
                 }
                 if (!e.shiftKey) gestures.startBlockedMove(e, selection);
               },
-              onMouseDown: onBoxMouseDown,
               onClick: onBoxClick,
               children: cropOutlineInsetPx && /* @__PURE__ */ jsx86(
                 "div",
@@ -34763,19 +35195,19 @@ function DomEditSelectionChrome({
 // src/hooks/useCropOverlay.ts
 function useCropOverlay(params) {
   const { selection, overlayRect } = params;
-  const cropInsets = selection ? readElementCropInsets(selection.element) : null;
-  const hasCropInsets = Boolean(
+  const cropInsets = selection && !isElementCropLifted(selection.element) ? readElementCropInsets(selection.element) : null;
+  const hasCropInsets2 = Boolean(
     cropInsets && (cropInsets.top > 0 || cropInsets.right > 0 || cropInsets.bottom > 0 || cropInsets.left > 0)
   );
   const sx = overlayRect && overlayRect.editScaleX > 0 ? overlayRect.editScaleX : 1;
   const sy = overlayRect && overlayRect.editScaleY > 0 ? overlayRect.editScaleY : 1;
-  const cropOutlineInsetPx = cropInsets && hasCropInsets ? {
+  const cropOutlineInsetPx = cropInsets && hasCropInsets2 ? {
     top: cropInsets.top * sy,
     right: cropInsets.right * sx,
     bottom: cropInsets.bottom * sy,
     left: cropInsets.left * sx
   } : void 0;
-  return { hasCropInsets, cropOutlineInsetPx };
+  return { hasCropInsets: hasCropInsets2, cropOutlineInsetPx };
 }
 
 // src/components/editor/domEditOverlayShape.ts
@@ -36163,8 +36595,6 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
   const groupGestureRef = useRef69(null);
   const blockedMoveRef = useRef69(null);
   const suppressNextBoxClickRef = useRef69(false);
-  const suppressNextBoxMouseDownRef = useRef69(false);
-  const suppressNextOverlayMouseDownRef = useRef69(false);
   const snapGuidesRef = useRef69(null);
   const rafPausedRef = useRef69(false);
   const selectionRef = useRef69(selection);
@@ -36232,11 +36662,11 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
   const compRect = useDomEditCompositionRect({ iframeRef, overlayRef });
   const compRectRef = useRef69(compRect);
   compRectRef.current = compRect;
-  const { hasCropInsets, cropOutlineInsetPx } = useCropOverlay({
+  const { hasCropInsets: hasCropInsets2, cropOutlineInsetPx } = useCropOverlay({
     selection,
     overlayRect
   });
-  const boxClipPath = hasCropInsets ? void 0 : selectionShapeStyles.clipPath;
+  const boxClipPath = hasCropInsets2 ? void 0 : selectionShapeStyles.clipPath;
   const boxChromeClass = resolveBoxChromeClass(Boolean(cropOutlineInsetPx), boxClipPath);
   const { offCanvasRects, offCanvasElementsRef } = useOffCanvasIndicators({
     iframeRef,
@@ -36295,11 +36725,11 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
     selectionRef,
     gestures
   });
-  const selectionKey = useMemo38(() => {
+  const selectionKey = useMemo39(() => {
     if (!selection) return "none";
     return `${selection.sourceFile}:${selection.id ?? selection.selector ?? selection.label}:${selection.selectorIndex ?? 0}`;
   }, [selection]);
-  const groupBounds = useMemo38(
+  const groupBounds = useMemo39(
     () => resolveDomEditGroupOverlayRect(groupOverlayItems.map((item) => item.rect)),
     [groupOverlayItems]
   );
@@ -36307,24 +36737,11 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
   const groupCanMove = hasGroupSelection && groupOverlayItems.length > 1 && groupOverlayItems.every((item) => item.selection.capabilities.canApplyManualOffset);
   const handleOverlayMouseDown = (event) => {
     if (!allowCanvasMovement) return;
-    if (suppressNextOverlayMouseDownRef.current) {
-      logSelect("mousedown-suppressed", { shift: event.shiftKey });
-      suppressNextOverlayMouseDownRef.current = false;
-      suppressNextBoxMouseDownRef.current = false;
-      suppressNextBoxClickRef.current = false;
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
     const target = event.target;
     const onBox = Boolean(target?.closest('[data-dom-edit-selection-box="true"]'));
     logSelect("mousedown", { shift: event.shiftKey, onBox });
     if (onBox) return;
     onCanvasMouseDown(event, { hoverSelection: hoverSelectionRef.current });
-    if (event.shiftKey) {
-      suppressNextBoxMouseDownRef.current = true;
-      suppressNextBoxClickRef.current = true;
-    }
   };
   const handleOverlayPointerDown = (event) => {
     if (!allowCanvasMovement || hostInput || event.button !== 0) return;
@@ -36342,8 +36759,6 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
       if (!candidate) return;
       event.preventDefault();
       event.stopPropagation();
-      suppressNextOverlayMouseDownRef.current = true;
-      suppressNextBoxMouseDownRef.current = true;
       suppressNextBoxClickRef.current = true;
       onSelectionChangeRef.current(candidate, { additive: true });
       return;
@@ -36367,7 +36782,6 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
       if (overlayRef.current) {
         event.preventDefault();
         event.stopPropagation();
-        suppressNextOverlayMouseDownRef.current = true;
         marquee.begin(event);
         return;
       }
@@ -36383,12 +36797,6 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
     }
     onCanvasMouseDown(event, { hoverSelection: hoverSelectionRef.current });
   };
-  const suppressBoxMouseDown = (e) => {
-    if (!suppressNextBoxMouseDownRef.current) return;
-    suppressNextBoxMouseDownRef.current = false;
-    e.preventDefault();
-    e.stopPropagation();
-  };
   const { contextMenu, closeContextMenu, handleContextMenu } = useCanvasContextMenuState({
     selection,
     selectionRef,
@@ -36446,7 +36854,6 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
             allowBodyDrag: bodyDrag,
             groupCanMove,
             gestures,
-            onBoxMouseDown: suppressBoxMouseDown,
             onBoxClick: handleBoxClick
           }
         ),
@@ -36466,7 +36873,6 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
             groupSelectionCount: groupSelections.length,
             gestures,
             onStyleCommit: onStyleCommitRef.current,
-            onBoxMouseDown: suppressBoxMouseDown,
             onBoxClick: handleBoxClick
           }
         ),
@@ -37562,7 +37968,12 @@ async function commitCandidateEdit(edit, targetPath, originalContent, deps, opti
     });
   }
   if (refreshTarget) refreshCommittedEdit(edit.after, deps, options);
-  return { status: "committed", version: hashContent(edit.after) };
+  return {
+    status: "committed",
+    version: hashContent(edit.after),
+    before: originalContent,
+    after: edit.after
+  };
 }
 async function persistSdkCandidateMutation(live, targetPath, originalContent, deps, mutate, options, sourceSnapshot) {
   return serializeStudioFileMutation(
@@ -39840,6 +40251,10 @@ var GsapEditBlockedError = class extends Error {
 function assertGsapEditPersisted(outcome) {
   if (outcome.status === "blocked") throw new GsapEditBlockedError(outcome.reason, outcome.detail);
 }
+async function saveMove(outcome, saveOnElement) {
+  if (outcome.status === "element-offset") return saveOnElement();
+  assertGsapEditPersisted(outcome);
+}
 function assertGsapAnimationDirectlyEditable(animation) {
   const editability = editabilityForProvenance(animation.provenance);
   if (editability === "unroll") throw new GsapEditBlockedError("unroll-required");
@@ -40020,8 +40435,8 @@ async function commitStaticGsapRotation(selection, newRotation, selector, existi
   );
 }
 async function commitStaticGsapSize(selection, size, selector, existingSet, callbacks) {
-  const width = Math.round(size.width);
-  const height = Math.round(size.height);
+  const width = roundToLayoutPx(size.width);
+  const height = roundToLayoutPx(size.height);
   if (existingSet) {
     await callbacks.commitMutation(
       selection,
@@ -40049,7 +40464,7 @@ async function commitStaticGsapSize(selection, size, selector, existingSet, call
   );
 }
 function positiveOr(n, fallback) {
-  return Number.isFinite(n) && n > 0 ? Math.round(n) : fallback;
+  return Number.isFinite(n) && n > 0 ? roundToLayoutPx(n) : fallback;
 }
 function resolvePriorSize(sizeSet, el, fallbackW, fallbackH) {
   if (sizeSet) {
@@ -40066,8 +40481,8 @@ async function commitKeyframedSizeFromResize(selection, size, selector, sizeSet,
   const ts = resolveTweenStart(animatedTween) ?? 0;
   const td = resolveTweenDuration(animatedTween);
   if (!(td > 0)) return false;
-  const newW = Math.round(size.width);
-  const newH = Math.round(size.height);
+  const newW = roundToLayoutPx(size.width);
+  const newH = roundToLayoutPx(size.height);
   const prior = resolvePriorSize(sizeSet, selection.element, newW, newH);
   const ct = usePlayerStore.getState().currentTime;
   const pct = Math.max(0, Math.min(100, Math.round((ct - ts) / td * 1e3) / 10));
@@ -40397,249 +40812,6 @@ function commitCreatePath(targetSelector, position, x, y, commit) {
 
 // src/components/editor/useMotionPathData.ts
 import { useEffect as useEffect52, useRef as useRef73, useState as useState45 } from "react";
-
-// src/hooks/gsapRuntimeKeyframes.ts
-import { buildArcPath } from "@hyperframes/core/gsap-parser-acorn";
-var FLAT_SKIP_KEYS = /* @__PURE__ */ new Set([
-  "ease",
-  "duration",
-  "delay",
-  "stagger",
-  "motionPath",
-  "overwrite",
-  "immediateRender",
-  "onComplete",
-  "onUpdate",
-  "onStart",
-  "keyframes"
-]);
-function timelinesOf(iframe) {
-  if (!iframe?.contentWindow) return null;
-  try {
-    return iframe.contentWindow.__timelines ?? null;
-  } catch {
-    return null;
-  }
-}
-function isXY(p) {
-  return !!p && typeof p.x === "number" && typeof p.y === "number";
-}
-function isZeroDurationSet(duration) {
-  return !(duration > 0);
-}
-function coordsFromMotionPath(mp) {
-  if (!mp || typeof mp !== "object") return null;
-  const obj = mp;
-  const pathVal = Array.isArray(mp) ? mp : obj.path;
-  if (!Array.isArray(pathVal)) return null;
-  const coords = pathVal.filter(isXY).map((p) => ({ x: p.x, y: p.y }));
-  if (coords.length < 2) return null;
-  const curviness = typeof obj.curviness === "number" ? obj.curviness : 1;
-  const autoRotate = typeof obj.autoRotate === "number" ? obj.autoRotate : obj.autoRotate === true;
-  return { coords, curviness, autoRotate, isCubic: obj.type === "cubic" };
-}
-function flatTweenKeyframes(vars) {
-  const properties = {};
-  for (const [k, v] of Object.entries(vars)) {
-    if (FLAT_SKIP_KEYS.has(k)) continue;
-    if (typeof v === "number") properties[k] = roundTo3(v);
-    else if (typeof v === "string") properties[k] = v;
-  }
-  if (Object.keys(properties).length === 0) return null;
-  return [
-    { percentage: 0, properties },
-    { percentage: 100, properties }
-  ];
-}
-function readTween(vars) {
-  if (vars.keyframes && typeof vars.keyframes === "object") {
-    const parsed = parsePercentageKeyframes(vars.keyframes);
-    if (parsed) return parsed;
-  }
-  const mp = coordsFromMotionPath(vars.motionPath);
-  if (mp) {
-    const shape = buildArcPath(mp.coords, mp.curviness, mp.autoRotate, mp.isCubic);
-    if (shape) {
-      const n = shape.waypoints.length;
-      const keyframes = shape.waypoints.map((wp, i) => ({
-        percentage: n > 1 ? Math.round(i / (n - 1) * 100) : 0,
-        properties: { x: wp.x, y: wp.y }
-      }));
-      return { keyframes, arcPath: shape.arcPath };
-    }
-  }
-  const flat = flatTweenKeyframes(vars);
-  return flat ? { keyframes: flat } : null;
-}
-function matchesElement(tween, el) {
-  if (!tween.targets) return false;
-  for (const t of tween.targets()) {
-    if (t === el || el.id && t.id === el.id) return true;
-  }
-  return false;
-}
-function tweenTiming(tween) {
-  const rawStart = typeof tween.startTime === "function" ? tween.startTime() : 0;
-  const rawDur = typeof tween.duration === "function" ? tween.duration() : 0;
-  return {
-    start: Number.isFinite(rawStart) ? rawStart : 0,
-    duration: Number.isFinite(rawDur) ? rawDur : 0
-  };
-}
-function varsCarryChannel(vars, channels) {
-  if (!vars) return false;
-  for (const ch of channels) {
-    if (Object.prototype.hasOwnProperty.call(vars, ch)) return true;
-  }
-  return false;
-}
-function keyframeVarsCarryChannel(vars, channels) {
-  const kf = vars?.keyframes;
-  if (!kf || typeof kf !== "object") return false;
-  const steps = Array.isArray(kf) ? kf : Object.values(kf);
-  return steps.some(
-    (step) => step != null && typeof step === "object" && channels.some((ch) => Object.prototype.hasOwnProperty.call(step, ch))
-  );
-}
-function resolveRuntimeTween(iframe, selector, kind, compositionId, channels) {
-  const timelines = timelinesOf(iframe);
-  if (!timelines) return null;
-  let targetEl = null;
-  try {
-    targetEl = iframe?.contentDocument?.querySelector(selector) ?? null;
-  } catch {
-    return null;
-  }
-  if (!targetEl) return null;
-  const tlIds = compositionId ? [compositionId] : Object.keys(timelines).filter((k) => typeof timelines[k]?.getChildren === "function");
-  const wantChannels = channels && channels.length > 0 ? channels : null;
-  let first = null;
-  let channelMatch = null;
-  for (const tlId of tlIds) {
-    const timeline = timelines[tlId];
-    if (!timeline?.getChildren) continue;
-    const now2 = typeof timeline.time === "function" ? timeline.time() : null;
-    for (const tween of timeline.getChildren(true)) {
-      if (!tween.vars || !matchesElement(tween, targetEl)) continue;
-      const dur = typeof tween.duration === "function" ? tween.duration() : 0;
-      const isSet = !(dur > 0);
-      if (kind === "set" ? !isSet : isSet) continue;
-      if (wantChannels) {
-        const carries = kind === "set" ? varsCarryChannel(tween.vars, wantChannels) : keyframeVarsCarryChannel(tween.vars, wantChannels);
-        if (carries) {
-          if (channelMatch === null) channelMatch = { tween, timeline };
-        } else if (first === null) {
-          first = { tween, timeline };
-        }
-        continue;
-      }
-      if (first === null) first = { tween, timeline };
-      if (kind === "keyframe" && now2 != null) {
-        const start = typeof tween.startTime === "function" ? tween.startTime() : 0;
-        if (now2 >= start - 1e-3 && now2 <= start + dur + 1e-3) return { tween, timeline };
-      }
-    }
-  }
-  return channelMatch ?? first;
-}
-function readCarriesChannel(read, channels) {
-  return read.keyframes.some((kf) => channels.some((c) => kf.properties[c] != null));
-}
-function readRuntimeKeyframes(iframe, selector, compositionId, requireChannels) {
-  const timelines = timelinesOf(iframe);
-  if (!timelines) return null;
-  let targetEl = null;
-  try {
-    targetEl = iframe?.contentDocument?.querySelector(selector) ?? null;
-  } catch {
-    return null;
-  }
-  if (!targetEl) return null;
-  const tlIds = compositionId ? [compositionId] : Object.keys(timelines).filter((k) => typeof timelines[k]?.getChildren === "function");
-  if (tlIds.length === 0) return null;
-  let firstRead = null;
-  for (const tlId of tlIds) {
-    const timeline = timelines[tlId];
-    if (!timeline?.getChildren) continue;
-    const now2 = typeof timeline.time === "function" ? timeline.time() : null;
-    for (const tween of timeline.getChildren(true)) {
-      if (!tween.vars || !matchesElement(tween, targetEl)) continue;
-      const dur = typeof tween.duration === "function" ? tween.duration() : 0;
-      if (isZeroDurationSet(dur)) continue;
-      const read = readTween(tween.vars);
-      if (!read) continue;
-      if (requireChannels && !readCarriesChannel(read, requireChannels)) continue;
-      if (firstRead === null) firstRead = read;
-      if (now2 != null) {
-        const start = typeof tween.startTime === "function" ? tween.startTime() : 0;
-        if (now2 >= start - 1e-3 && now2 <= start + dur + 1e-3) return read;
-      }
-    }
-  }
-  return firstRead;
-}
-function hasNonHoldTweenForElement(iframe, selector, compositionId, channels) {
-  const timelines = timelinesOf(iframe);
-  if (!timelines) return false;
-  const tlId = compositionId || Object.keys(timelines).find((k) => typeof timelines[k]?.getChildren === "function");
-  if (!tlId) return false;
-  const timeline = timelines[tlId];
-  if (!timeline?.getChildren) return false;
-  let targetEl = null;
-  try {
-    targetEl = iframe?.contentDocument?.querySelector(selector) ?? null;
-  } catch {
-    return false;
-  }
-  if (!targetEl) return false;
-  for (const tween of timeline.getChildren(true)) {
-    if (!tween.vars || !matchesElement(tween, targetEl)) continue;
-    const dur = typeof tween.duration === "function" ? tween.duration() : 0;
-    if (isZeroDurationSet(dur)) continue;
-    const read = readTween(tween.vars);
-    if (read && (!channels || readCarriesChannel(read, channels))) return true;
-  }
-  return false;
-}
-function toClipRelative(keyframes, tweenStart, tweenDuration, clip) {
-  if (!clip || clip.duration <= 0) return keyframes;
-  return keyframes.map((kf) => {
-    const abs = toAbsoluteTime(tweenStart, tweenDuration, kf.percentage);
-    return { ...kf, percentage: Math.round((abs - clip.start) / clip.duration * 1e5) / 1e3 };
-  });
-}
-function buildEntry(read, start, duration, clip) {
-  return {
-    keyframes: toClipRelative(read.keyframes, start, duration, clip),
-    tweenStart: start,
-    tweenDuration: duration,
-    ...read.easeEach ? { easeEach: read.easeEach } : {},
-    ...read.arcPath ? { arcPath: read.arcPath } : {}
-  };
-}
-function addScanEntry(result, tween, clipById) {
-  if (!tween.targets || !tween.vars) return;
-  const { start, duration } = tweenTiming(tween);
-  if (isZeroDurationSet(duration)) return;
-  const read = readTween(tween.vars);
-  if (!read) return;
-  for (const target of tween.targets()) {
-    const id = target.id;
-    if (id && !result.has(id)) result.set(id, buildEntry(read, start, duration, clipById?.get(id)));
-  }
-}
-function scanAllRuntimeKeyframes(iframe, clipById) {
-  const result = /* @__PURE__ */ new Map();
-  const timelines = timelinesOf(iframe);
-  if (!timelines) return result;
-  for (const timeline of Object.values(timelines)) {
-    if (!timeline?.getChildren) continue;
-    for (const tween of timeline.getChildren(true)) addScanEntry(result, tween, clipById);
-  }
-  return result;
-}
-
-// src/components/editor/useMotionPathData.ts
 function transformTranslate(el) {
   const t = el.ownerDocument?.defaultView?.getComputedStyle(el).transform;
   if (!t || t === "none") return { x: 0, y: 0 };
@@ -41558,10 +41730,10 @@ function PreviewOverlays({
 }
 
 // src/components/nle/useTimelineEditCallbacks.ts
-import { useCallback as useCallback65, useMemo as useMemo40 } from "react";
+import { useCallback as useCallback65, useMemo as useMemo41 } from "react";
 
 // src/hooks/useGsapTweenCache.ts
-import { useEffect as useEffect56, useMemo as useMemo39, useRef as useRef76, useState as useState49, useCallback as useCallback64 } from "react";
+import { useEffect as useEffect56, useMemo as useMemo40, useRef as useRef76, useState as useState49, useCallback as useCallback64 } from "react";
 
 // src/hooks/gsapRuntimeReaders.ts
 import { classifyPropertyGroup as classifyPropertyGroup3 } from "@hyperframes/core/gsap-parser";
@@ -42437,7 +42609,7 @@ async function tryGsapRotationIntercept(selection, angle, animations, iframe, co
   if (!anim) {
     anim = workingAnimations.find((a) => animationWritesAnyProperty(a, ROTATION_CHANNEL_SET)) ?? null;
   }
-  const newRotation = Math.round(angle);
+  const newRotation = roundTo3(angle);
   if (!anim || isInstantHold(anim)) {
     const existingSet = anim ?? findRotationSetAnimation(resolvedAnimations, selector, selection.element);
     await commitStaticGsapRotation(selection, newRotation, selector, existingSet, {
@@ -42557,7 +42729,6 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
   const [multipleTimelines, setMultipleTimelines] = useState49(false);
   const [unsupportedTimelinePattern, setUnsupportedTimelinePattern] = useState49(false);
   const lastFetchKeyRef = useRef76("");
-  const retryTimerRef = useRef76(null);
   const domClipChildrenKey = usePlayerStore(
     (s) => s.domClipChildren.map((c) => `${c.id}<${c.hostId}`).join("|")
   );
@@ -42566,10 +42737,6 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
     const fetchKey = `${projectId}:${sourceFile}:${version}:${targetKey}`;
     if (fetchKey === lastFetchKeyRef.current) return;
     lastFetchKeyRef.current = fetchKey;
-    if (retryTimerRef.current) {
-      clearTimeout(retryTimerRef.current);
-      retryTimerRef.current = null;
-    }
     if (!projectId) {
       setAllAnimations([]);
       setMultipleTimelines(false);
@@ -42590,29 +42757,14 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
       setAllAnimations(parsed.animations);
       setMultipleTimelines(parsed.multipleTimelines === true);
       setUnsupportedTimelinePattern(parsed.unsupportedTimelinePattern === true);
-      if (parsed.animations.length === 0 && targetKey) {
-        retryTimerRef.current = setTimeout(() => {
-          if (cancelled) return;
-          fetchParsedAnimations(projectId, sourceFile).then((retryParsed) => {
-            if (cancelled) return;
-            if (retryParsed && retryParsed.animations.length > 0) {
-              setAllAnimations(retryParsed.animations);
-            }
-          });
-        }, 800);
-      }
     });
     return () => {
       cancelled = true;
-      if (retryTimerRef.current) {
-        clearTimeout(retryTimerRef.current);
-        retryTimerRef.current = null;
-      }
     };
   }, [projectId, sourceFile, version, target?.id, target?.selector]);
   const targetId = target?.id ?? null;
   const targetSelector = target?.selector ?? null;
-  const rawAnimations = useMemo39(() => {
+  const rawAnimations = useMemo40(() => {
     if (!targetId && !targetSelector) return [];
     const element = target ? findPreviewNode(iframeRef?.current?.contentDocument, target) : null;
     return getAnimationsForElement(
@@ -42621,7 +42773,7 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
       element
     );
   }, [allAnimations, target, version, iframeRef]);
-  const animations = useMemo39(() => {
+  const animations = useMemo40(() => {
     const iframe = iframeRef?.current;
     let result = rawAnimations;
     if (iframe) {
@@ -42947,7 +43099,7 @@ function useTimelineEditCallbacks({
     },
     [handleGsapRemoveKeyframe]
   );
-  return useMemo40(
+  return useMemo41(
     () => ({
       onMoveElement: handleTimelineElementMove,
       onMoveElements: handleTimelineElementsMove,
@@ -43254,7 +43406,7 @@ var CaptionTimeline = memo29(function CaptionTimeline2({
 });
 
 // src/hooks/useTimelineSelectionPreviewSync.ts
-import { useEffect as useEffect57, useMemo as useMemo41, useRef as useRef77 } from "react";
+import { useEffect as useEffect57, useMemo as useMemo42, useRef as useRef77 } from "react";
 var MAX_UNRESOLVED_SYNC_RETRIES = 3;
 function orderSelectedIds(ids, anchor2) {
   const ordered = [...ids];
@@ -43301,7 +43453,7 @@ function useTimelineSelectionPreviewSync({
   applyMarqueeSelection,
   onSelectionNotFound
 }) {
-  const selectedIds = useMemo41(
+  const selectedIds = useMemo42(
     () => orderSelectedIds(selectedElementIds, selectedElementId),
     [selectedElementId, selectedElementIds]
   );
@@ -43390,7 +43542,7 @@ function useTimelineSelectionPreviewSync({
 }
 
 // src/webmcp/StudioAgentTools.tsx
-import { useCallback as useCallback67, useEffect as useEffect59, useMemo as useMemo42 } from "react";
+import { useCallback as useCallback67, useEffect as useEffect59, useMemo as useMemo43 } from "react";
 
 // src/webmcp/useStudioAgentTools.ts
 import { useEffect as useEffect58, useRef as useRef78 } from "react";
@@ -44713,7 +44865,7 @@ function StudioAgentTools() {
     editHistory,
     previewIframeRef
   ]);
-  const deps = useMemo42(
+  const deps = useMemo43(
     () => ({
       getSnapshot,
       getPreviewDocument: () => previewIframeRef.current?.contentDocument ?? null,
@@ -45522,6 +45674,7 @@ function EditorShell({
   onPasteClip,
   onDuplicateClip,
   canPasteClip,
+  clipMenuItems,
   setCompIdToSrc,
   setCompositionLoading,
   shouldShowMotionPath,
@@ -45609,6 +45762,7 @@ function EditorShell({
           onPasteClip,
           onDuplicateClip,
           canPasteClip,
+          clipMenuItems,
           previewOverlay: /* @__PURE__ */ jsx102(
             PreviewOverlays,
             {
@@ -45643,7 +45797,8 @@ function EditorShellBody({
   onCopyClip,
   onPasteClip,
   onDuplicateClip,
-  canPasteClip
+  canPasteClip,
+  clipMenuItems
 }) {
   const { compositionStack, updateCompositionStack, containerRef } = useNLEContext();
   const seekCaptionTime = useCallback71((time) => {
@@ -45689,6 +45844,7 @@ function EditorShellBody({
               onPasteClip,
               onDuplicateClip,
               canPasteClip,
+              clipMenuItems,
               onSelectTimelineElement,
               timelineFooter: captionEditMode ? /* @__PURE__ */ jsxs72("div", { className: "border-t border-neutral-800/30 shrink-0", style: { height: 60 }, children: [
                 /* @__PURE__ */ jsx102("div", { className: "flex items-center gap-1.5 px-2 py-0.5", children: /* @__PURE__ */ jsx102("span", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider", children: "Captions" }) }),
@@ -45704,7 +45860,7 @@ function EditorShellBody({
 }
 
 // src/player/components/AudioWaveform.tsx
-import { memo as memo30, useCallback as useCallback72, useEffect as useEffect61, useMemo as useMemo43, useRef as useRef80 } from "react";
+import { memo as memo30, useCallback as useCallback72, useEffect as useEffect61, useMemo as useMemo44, useRef as useRef80 } from "react";
 
 // src/player/components/audioWaveformPeaks.ts
 var LOUDNESS_OPACITY_FLOOR = 0.64;
@@ -45839,7 +45995,7 @@ var AudioWaveform = memo30(function AudioWaveform2({
   const canvasRef = useRef80(null);
   const observerRef = useRef80(null);
   const cacheKey = waveformUrl ?? audioUrl;
-  const request = useMemo43(
+  const request = useMemo44(
     () => ({
       key: createThumbnailKey({ kind: "waveform", source: cacheKey }),
       projectId,
@@ -45946,7 +46102,7 @@ var AudioWaveform = memo30(function AudioWaveform2({
 });
 
 // src/player/components/ImageThumbnail.tsx
-import { memo as memo31, useMemo as useMemo44 } from "react";
+import { memo as memo31, useMemo as useMemo45 } from "react";
 
 // src/player/lib/thumbnailImageDecoder.ts
 function thumbnailSource(source) {
@@ -46024,7 +46180,7 @@ var ImageThumbnail = memo31(function ImageThumbnail2({
   rich = false
 }) {
   const [container, setContainerRef] = useThumbnailStripSize();
-  const request = useMemo44(
+  const request = useMemo45(
     () => ({
       key: createThumbnailKey({ kind: "image", source: imageSrc, rich: Number(rich) }),
       projectId,
@@ -46418,13 +46574,13 @@ var SourceEditor = memo32(function SourceEditor2({
 });
 
 // src/components/editor/PropertyPanel.tsx
-import { memo as memo36, useMemo as useMemo60, useRef as useRef112, useState as useState94 } from "react";
+import { memo as memo36, useMemo as useMemo61, useRef as useRef112, useState as useState94 } from "react";
 
 // src/components/editor/InspectorHeaderActions.tsx
 import { Eye as Eye3, EyeSlash as EyeSlash2 } from "@phosphor-icons/react";
 
 // src/contexts/DesignPanelInputContext.tsx
-import { useCallback as useCallback75, useContext as useContext11, useMemo as useMemo45 } from "react";
+import { useCallback as useCallback75, useContext as useContext11, useMemo as useMemo46 } from "react";
 
 // src/utils/designInputTracking.ts
 var COALESCE_WINDOW_MS = 600;
@@ -46467,7 +46623,7 @@ function DesignPanelInputProvider({
   children
 }) {
   const parent = useContext11(DesignPanelInputContext);
-  const value = useMemo45(
+  const value = useMemo46(
     () => ({ ui: ui ?? parent.ui, section: section ?? parent.section }),
     [ui, section, parent.ui, parent.section]
   );
@@ -48084,7 +48240,7 @@ function MediaSection({
 import { isHfColorGradingActive as isHfColorGradingActive2 } from "@hyperframes/core/color-grading";
 
 // src/components/editor/propertyPanelColorGradingControls.tsx
-import { useMemo as useMemo46, useRef as useRef86, useState as useState56 } from "react";
+import { useMemo as useMemo47, useRef as useRef86, useState as useState56 } from "react";
 import {
   HF_COLOR_GRADING_PRESETS,
   normalizeHfColorGrading
@@ -48528,7 +48684,7 @@ function ColorGradingControls({
   const [detailSettings, setDetailSettings] = useState56(null);
   const [lutImporting, setLutImporting] = useState56(false);
   const [lutImportError, setLutImportError] = useState56(null);
-  const lutAssets = useMemo46(
+  const lutAssets = useMemo47(
     () => assets.filter((asset) => LUT_EXT.test(asset)).sort((a, b) => a.localeCompare(b)),
     [assets]
   );
@@ -48808,7 +48964,7 @@ function ColorGradingControls({
 }
 
 // src/components/editor/useColorGradingController.ts
-import { useCallback as useCallback80, useEffect as useEffect69, useMemo as useMemo47, useRef as useRef88, useState as useState58 } from "react";
+import { useCallback as useCallback80, useEffect as useEffect69, useMemo as useMemo48, useRef as useRef88, useState as useState58 } from "react";
 import {
   HF_COLOR_GRADING_ATTR,
   hasHfColorGradingAuthoredValues,
@@ -49229,7 +49385,7 @@ function useColorGradingController({
     state: "pending",
     message: "Waiting for runtime"
   }));
-  const selectedAssetPath = useMemo47(
+  const selectedAssetPath = useMemo48(
     () => selectedMediaAssetPath(element, projectId),
     [element, projectId]
   );
@@ -49276,7 +49432,7 @@ function useColorGradingController({
       trackStudioPendingEdit(onSetAttributeLive(COLOR_GRADING_DATA_KEY, value));
     };
   }, [identityKey]);
-  const target = useMemo47(
+  const target = useMemo48(
     () => ({
       id: element.id ?? null,
       hfId: element.hfId ?? null,
@@ -50256,7 +50412,7 @@ function ColorField({
 }
 
 // src/components/editor/propertyPanelFont.tsx
-import { useEffect as useEffect71, useMemo as useMemo48, useRef as useRef90, useState as useState60 } from "react";
+import { useEffect as useEffect71, useMemo as useMemo49, useRef as useRef90, useState as useState60 } from "react";
 
 // src/components/editor/fontAssets.ts
 var FONT_EXT_RE = /\.(eot|otf|ttc|ttf|woff2?)$/i;
@@ -50480,13 +50636,14 @@ function FontFamilyField({
       setImportingFonts(false);
     }
   };
-  const projectFontAssets = useMemo48(
+  const projectFontAssets = useMemo49(
     () => uniqueFontOptions(
       importedFonts.map((f) => ({ family: f.family, source: "Imported" }))
     ),
     [importedFonts]
   );
-  const options = useMemo48(() => {
+  const options = useMemo49(() => {
+    if (!open) return [];
     const documentFonts = collectDocumentFontFamilies();
     const googleSet = new Set(googleFonts.map((f) => f.toLowerCase()));
     const taggedLocal = localFonts.map(
@@ -50505,8 +50662,8 @@ function FontFamilyField({
         ...DEFAULT_FONT_FAMILIES.map((f) => ({ family: f, source: "System" }))
       ])
     );
-  }, [currentFamily, googleFonts, localFonts, projectFontAssets]);
-  const filteredOptions = useMemo48(() => {
+  }, [open, currentFamily, googleFonts, localFonts, projectFontAssets]);
+  const filteredOptions = useMemo49(() => {
     const matches = options.filter((o) => fontMatchesQuery(o.family, query));
     if (query.trim()) return matches.slice(0, 200);
     const bySource = /* @__PURE__ */ new Map();
@@ -50742,7 +50899,7 @@ function FontFamilyField({
 import { useEffect as useEffect73 } from "react";
 
 // src/components/panels/VariablesBindElement.tsx
-import { useMemo as useMemo49, useState as useState62 } from "react";
+import { useMemo as useMemo50, useState as useState62 } from "react";
 
 // src/components/panels/VariablesValueControls.tsx
 import { useState as useState61 } from "react";
@@ -51024,7 +51181,7 @@ function VariablesBindElement({
 }) {
   const [activeKey, setActiveKey] = useState62(null);
   const [idDraft, setIdDraft] = useState62("");
-  const actions = useMemo49(() => buildBindActions(selection, sdkSession), [selection, sdkSession]);
+  const actions = useMemo50(() => buildBindActions(selection, sdkSession), [selection, sdkSession]);
   if (actions.length === 0) return null;
   const active = actions.find((a) => a.key === activeKey) ?? null;
   const trimmedId = sanitizeId(idDraft);
@@ -51135,7 +51292,7 @@ function uniqueId(base2, existing) {
 }
 
 // src/contexts/VariablePromoteContext.tsx
-import { useContext as useContext12, useEffect as useEffect72, useMemo as useMemo50, useState as useState63 } from "react";
+import { useContext as useContext12, useEffect as useEffect72, useMemo as useMemo51, useState as useState63 } from "react";
 import { jsx as jsx118 } from "react/jsx-runtime";
 var VariablePromoteContext = createStableContext(
   "VariablePromoteContext",
@@ -51158,15 +51315,15 @@ function VariablePromoteProvider({
     if (!session) return;
     return session.on("change", () => setRevision((r) => r + 1));
   }, [session]);
-  const actions = useMemo50(() => {
+  const actions = useMemo51(() => {
     if (!session || !selection) return [];
     return buildBindActions(selection, session);
   }, [session, selection, revision]);
-  const declarations = useMemo50(() => {
+  const declarations = useMemo51(() => {
     if (!session) return [];
     return session.getVariableDeclarations();
   }, [session, revision]);
-  const value = useMemo50(
+  const value = useMemo51(
     () => ({ session, selection, actions, declarations, persist: persist2, onPersistError }),
     [session, selection, actions, declarations, persist2, onPersistError]
   );
@@ -51175,7 +51332,7 @@ function VariablePromoteProvider({
 function useVariablePromoteChannel(channel) {
   const ctx3 = useContext12(VariablePromoteContext);
   const key2 = channel.kind === "style" ? `style:${channel.prop}` : channel.kind;
-  return useMemo50(() => {
+  return useMemo51(() => {
     if (!ctx3 || !ctx3.session || !ctx3.selection?.hfId) return null;
     const { session, selection, actions, declarations, persist: persist2, onPersistError } = ctx3;
     const hfId = selection.hfId;
@@ -51610,7 +51767,7 @@ function parseColorString(value) {
 }
 
 // src/components/editor/propertyPanelFill.tsx
-import { useMemo as useMemo51, useRef as useRef91, useState as useState64 } from "react";
+import { useMemo as useMemo52, useRef as useRef91, useState as useState64 } from "react";
 
 // src/components/icons/ReverseGradientIcon.tsx
 import { jsx as jsx120, jsxs as jsxs86 } from "react/jsx-runtime";
@@ -51685,8 +51842,8 @@ function ImageFillField({
   const fileInputRef = useRef91(null);
   const [uploading, setUploading] = useState64(false);
   const [uploadError, setUploadError] = useState64(null);
-  const imageAssets = useMemo51(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
-  const selectedAsset = useMemo51(
+  const imageAssets = useMemo52(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
+  const selectedAsset = useMemo52(
     () => resolveSelectedAsset(value, sourceFile, imageAssets),
     [imageAssets, sourceFile, value]
   );
@@ -53168,7 +53325,7 @@ import { useCallback as useCallback85, useState as useState69 } from "react";
 import { useShallow } from "zustand/react/shallow";
 
 // src/components/editor/AnimationCard.tsx
-import { memo as memo34, useCallback as useCallback84, useEffect as useEffect76, useMemo as useMemo52, useRef as useRef94, useState as useState68 } from "react";
+import { memo as memo34, useCallback as useCallback84, useEffect as useEffect76, useMemo as useMemo53, useRef as useRef94, useState as useState68 } from "react";
 import { SUPPORTED_EASES, SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
 
 // src/components/editor/gsapAnimationHelpers.ts
@@ -53709,21 +53866,21 @@ var AnimationCard = memo34(function AnimationCard2({
     segment?.scrollIntoView({ block: "nearest", behavior: "smooth" });
     pendingAutoScrollRef.current = false;
   }, [expandedKfPct]);
-  const usedProps = useMemo52(
+  const usedProps = useMemo53(
     () => new Set(Object.keys(animation.properties)),
     [animation.properties]
   );
-  const availableProps = useMemo52(
+  const availableProps = useMemo53(
     () => SUPPORTED_PROPS.filter(
       (p) => !usedProps.has(p) && (animation.method === "set" || !BOOLEAN_PROPS.has(p))
     ),
     [usedProps, animation.method]
   );
-  const usedFromProps = useMemo52(
+  const usedFromProps = useMemo53(
     () => new Set(Object.keys(animation.fromProperties ?? {})),
     [animation.fromProperties]
   );
-  const availableFromProps = useMemo52(
+  const availableFromProps = useMemo53(
     () => SUPPORTED_PROPS.filter((p) => !usedFromProps.has(p) && !BOOLEAN_PROPS.has(p)),
     [usedFromProps]
   );
@@ -53770,7 +53927,7 @@ var AnimationCard = memo34(function AnimationCard2({
   const easeName = (animation.keyframes ? animation.keyframes.easeEach : void 0) ?? animation.ease ?? "none";
   const easeLabel = easeName.startsWith("custom(") ? "Custom curve" : EASE_LABELS[easeName] ?? easeName;
   const endTime = typeof animation.position === "number" ? animation.position + (animation.duration ?? 0) : animation.position;
-  const summary = useMemo52(() => buildTweenSummary(animation), [animation]);
+  const summary = useMemo53(() => buildTweenSummary(animation), [animation]);
   const setKeys = Object.keys(animation.properties);
   if (animation.method === "set" && // `every` is vacuously true on an empty bag — require at least one key so a
   // property-less set doesn't masquerade as a position row.
@@ -54918,7 +55075,7 @@ function PropertyPanel3dTransform({
 }
 
 // src/components/editor/PropertyPanelFlat.tsx
-import { useEffect as useEffect97, useMemo as useMemo59, useRef as useRef111, useState as useState93 } from "react";
+import { useEffect as useEffect97, useMemo as useMemo60, useRef as useRef111, useState as useState93 } from "react";
 import { useShallow as useShallow2 } from "zustand/react/shallow";
 
 // src/components/editor/audioFxSummary.ts
@@ -57088,7 +57245,7 @@ function motionSectionLabel(args) {
 }
 
 // src/components/editor/propertyPanelAudioFxGroup.tsx
-import { useMemo as useMemo55, useState as useState81 } from "react";
+import { useMemo as useMemo56, useState as useState81 } from "react";
 import {
   HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR6,
   HF_AUDIO_FX_DATA_KEY as HF_AUDIO_FX_DATA_KEY2,
@@ -57108,7 +57265,7 @@ import {
 } from "@hyperframes/core/audio-automation";
 
 // src/components/editor/propertyPanelFxSection.tsx
-import { useCallback as useCallback88, useEffect as useEffect84, useMemo as useMemo54, useRef as useRef99, useState as useState79 } from "react";
+import { useCallback as useCallback88, useEffect as useEffect84, useMemo as useMemo55, useRef as useRef99, useState as useState79 } from "react";
 
 // src/components/editor/audioFxRevealTarget.ts
 import { parseAutomationTarget as parseAutomationTarget2 } from "@hyperframes/core/audio-automation";
@@ -58055,7 +58212,7 @@ function FxEqModule({
 import { getAudioFxPreset as getAudioFxPreset3 } from "@hyperframes/core/audio-fx-presets";
 
 // src/components/editor/propertyPanelFxNodeRow.tsx
-import { useMemo as useMemo53, useState as useState78 } from "react";
+import { useMemo as useMemo54, useState as useState78 } from "react";
 import {
   defaultAudioFxParams as defaultAudioFxParams3,
   getAudioFxDef as getAudioFxDef3
@@ -58481,11 +58638,11 @@ function FxNodeRow({
   trackKind
 }) {
   const registryDef = getAudioFxDef3(node.type);
-  const def = useMemo53(() => registryDef ? plainDef(registryDef) : null, [registryDef]);
+  const def = useMemo54(() => registryDef ? plainDef(registryDef) : null, [registryDef]);
   const primary = registryDef ? primaryParamOf(registryDef) : null;
   const profile = getAudioFxProfile2(node.type);
-  const derived = useMemo53(() => profileParam(node.type), [node.type]);
-  const onlyPrimary = useMemo53(
+  const derived = useMemo54(() => profileParam(node.type), [node.type]);
+  const onlyPrimary = useMemo54(
     () => def && primary ? { ...def, params: def.params.filter((p) => p.key === primary) } : def,
     [def, primary]
   );
@@ -59131,12 +59288,12 @@ function FxSection({
     [chain.nodes, mutate, onRemoveNodeAutomation, trackKind]
   );
   const [carveOpen, setCarveOpen] = useState79(true);
-  const carveNodes = useMemo54(() => chain.nodes.filter((n) => n.fromCarve), [chain.nodes]);
-  const handBuilt = useMemo54(
+  const carveNodes = useMemo55(() => chain.nodes.filter((n) => n.fromCarve), [chain.nodes]);
+  const handBuilt = useMemo55(
     () => chain.nodes.map((node, i) => ({ node, i })).filter(({ node }) => !node.fromCarve && !node.fromEq),
     [chain.nodes]
   );
-  const runs = useMemo54(() => {
+  const runs = useMemo55(() => {
     const out = [];
     for (const item of handBuilt) {
       const preset = item.node.fromPreset;
@@ -59147,8 +59304,8 @@ function FxSection({
     return out;
   }, [handBuilt]);
   const [collapsedRuns, setCollapsedRuns] = useState79(/* @__PURE__ */ new Set());
-  const eqIds = useMemo54(() => audioEqIds(chain), [chain]);
-  const positions = useMemo54(() => {
+  const eqIds = useMemo55(() => audioEqIds(chain), [chain]);
+  const positions = useMemo55(() => {
     const map = /* @__PURE__ */ new Map();
     let at = (showCarve ? 1 : 0) + eqIds.length;
     for (const { i } of handBuilt) map.set(i, ++at);
@@ -59941,7 +60098,7 @@ function AudioFxGroup({
   const removeNodeAutomation = (nodeId) => removeNodesAutomation([nodeId]);
   const [analysing, setAnalysing] = useState81(false);
   const storeElements = usePlayerStore((s) => s.elements);
-  const signalPath = useMemo55(() => {
+  const signalPath = useMemo56(() => {
     const doc = element.element?.ownerDocument;
     return audioFxSignalPath(
       element.tagName?.toLowerCase(),
@@ -60609,7 +60766,7 @@ function createGsapLivePreview(iframeRef) {
 }
 
 // src/components/editor/propertyPanelFlatColorGradingSection.tsx
-import { useEffect as useEffect94, useMemo as useMemo57, useRef as useRef110, useState as useState89 } from "react";
+import { useEffect as useEffect94, useMemo as useMemo58, useRef as useRef110, useState as useState89 } from "react";
 import {
   HF_COLOR_GRADING_GRADE_PRESETS,
   normalizeHfColorGrading as normalizeHfColorGrading5,
@@ -60644,7 +60801,7 @@ function presetPreviewHandlers({
 import { useState as useState85 } from "react";
 
 // src/components/editor/propertyPanelColorCurveGraph.tsx
-import { useMemo as useMemo56, useRef as useRef103 } from "react";
+import { useMemo as useMemo57, useRef as useRef103 } from "react";
 import {
   compileHfColorCurve,
   compileHfHueCurve,
@@ -60832,8 +60989,8 @@ function CurveGraph({
   onCancel
 }) {
   const pointerRef = useRef103(null);
-  const samples = useMemo56(() => samplesFor(points, tab), [points, tab]);
-  const path = useMemo56(() => curvePath(samples, tab), [samples, tab]);
+  const samples = useMemo57(() => samplesFor(points, tab), [points, tab]);
+  const path = useMemo57(() => curvePath(samples, tab), [samples, tab]);
   const selectRelativePoint = (offset) => {
     if (points.length === 0) return;
     const current = selectedIndex ?? (offset > 0 ? -1 : 0);
@@ -62630,14 +62787,14 @@ function FlatColorGradingSection({
   const lutInputRef = useRef110(null);
   const [lutOpen, setLutOpen] = useState89(false);
   const [detailSettingsOpen, setDetailSettingsOpen] = useState89(null);
-  const lutAssets = useMemo57(
+  const lutAssets = useMemo58(
     () => assets.filter((asset) => LUT_EXT.test(asset)).sort((a, b) => a.localeCompare(b)),
     [assets]
   );
   const lut = grading.lut;
   const selectedLutName = lut?.src ? lut.src.split("/").pop() ?? lut.src : null;
-  const resolvedGrading = useMemo57(() => resolveColorGrading(grading), [grading]);
-  const secondaryInputGrading = useMemo57(
+  const resolvedGrading = useMemo58(() => resolveColorGrading(grading), [grading]);
+  const secondaryInputGrading = useMemo58(
     () => resolveColorGrading({
       intensity: 1,
       adjust: resolvedGrading.adjust,
@@ -62655,7 +62812,7 @@ function FlatColorGradingSection({
     ]
   );
   const actions = createColorGradingActions(grading, onCommitColorGrading);
-  const scopesRefreshKey = useMemo57(() => serializeHfColorGrading2(grading), [grading]);
+  const scopesRefreshKey = useMemo58(() => serializeHfColorGrading2(grading), [grading]);
   useEffect94(() => {
     if (presetPreviews.status === "idle") onRequestPresetPreviews();
   }, [onRequestPresetPreviews, presetPreviews.status]);
@@ -63785,7 +63942,7 @@ function FlatEffectsSection({
 import { useState as useState92 } from "react";
 
 // src/hooks/useBlockCatalog.ts
-import { useState as useState91, useEffect as useEffect96, useMemo as useMemo58 } from "react";
+import { useState as useState91, useEffect as useEffect96, useMemo as useMemo59 } from "react";
 
 // src/utils/blockCategories.ts
 import {
@@ -63852,7 +64009,7 @@ function useBlockCatalog() {
       cancelled = true;
     };
   }, []);
-  const filteredBlocks = useMemo58(() => {
+  const filteredBlocks = useMemo59(() => {
     let result = blocks;
     if (category) {
       result = result.filter((b) => b.category === category);
@@ -64168,7 +64325,7 @@ function PropertyPanelFlat({
     currentTime,
     onSetAttributeQuiet ?? onSetAttributeLive
   );
-  const audioGroupLabel = useMemo59(() => {
+  const audioGroupLabel = useMemo60(() => {
     const doc = element.element?.ownerDocument;
     const id = element.id;
     if (!doc || !id) return void 0;
@@ -64729,12 +64886,12 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
   const cacheEntry = usePlayerStore((s) => s.keyframeCache.get(cacheElementKey));
   const iframeRef = previewIframeRef ?? { current: null };
   const gsapAnimIdForMemo = element ? gsapAnimations?.find((a) => a.keyframes)?.id ?? gsapAnimations?.[0]?.id ?? null : null;
-  const gsapRuntimeValues = useMemo60(
+  const gsapRuntimeValues = useMemo61(
     () => element ? readGsapRuntimeValuesForPanel(gsapAnimIdForMemo, gsapAnimations, element, iframeRef) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps -- iframeRef is stable; currentTime drives re-reads during playback
     [gsapAnimIdForMemo, gsapAnimations, element, currentTime]
   );
-  const gsapBorderRadius = useMemo60(
+  const gsapBorderRadius = useMemo61(
     () => element ? readGsapBorderRadiusForPanel(gsapRuntimeValues, gsapAnimations, element, iframeRef) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [gsapRuntimeValues, gsapAnimations, element, currentTime]
@@ -65122,11 +65279,11 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
 });
 
 // src/components/editor/FileTree.tsx
-import { memo as memo38, useState as useState96, useCallback as useCallback90, useMemo as useMemo62, useRef as useRef114 } from "react";
+import { memo as memo38, useState as useState96, useCallback as useCallback90, useMemo as useMemo63, useRef as useRef114 } from "react";
 import { Plus as Plus2, FolderSimplePlus as FolderSimplePlus2 } from "@phosphor-icons/react";
 
 // src/components/editor/FileTreeNodes.tsx
-import { memo as memo37, useState as useState95, useCallback as useCallback89, useMemo as useMemo61, useRef as useRef113, useEffect as useEffect98 } from "react";
+import { memo as memo37, useState as useState95, useCallback as useCallback89, useMemo as useMemo62, useRef as useRef113, useEffect as useEffect98 } from "react";
 import {
   PencilSimple,
   Copy,
@@ -65609,7 +65766,7 @@ var TreeFolder = memo37(function TreeFolder2({
 }) {
   const [isOpen, setIsOpen] = useState95(defaultOpen);
   const toggle = useCallback89(() => setIsOpen((v) => !v), []);
-  const children = useMemo61(() => sortChildren(node.children), [node.children]);
+  const children = useMemo62(() => sortChildren(node.children), [node.children]);
   const Chevron = isOpen ? ChevronDown : ChevronRight;
   const isDragOver = dragOverFolder === node.fullPath;
   const isRenaming = inlineInput?.mode === "rename" && inlineInput.originalPath === node.fullPath;
@@ -65740,8 +65897,8 @@ var FileTree = memo38(function FileTree2({
   onImportFiles,
   lintFindingsByFile
 }) {
-  const tree = useMemo62(() => buildTree(files), [files]);
-  const children = useMemo62(() => sortChildren(tree.children), [tree]);
+  const tree = useMemo63(() => buildTree(files), [files]);
+  const children = useMemo63(() => sortChildren(tree.children), [tree]);
   const [contextMenu, setContextMenu] = useState96(null);
   const [inlineInput, setInlineInput] = useState96(null);
   const [deleteTarget, setDeleteTarget] = useState96(null);
@@ -66008,7 +66165,7 @@ var FileTree = memo38(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState149, useCallback as useCallback185, useRef as useRef181, useMemo as useMemo80, useLayoutEffect as useLayoutEffect13 } from "react";
+import { useState as useState149, useCallback as useCallback185, useRef as useRef181, useMemo as useMemo81, useLayoutEffect as useLayoutEffect13 } from "react";
 
 // src/hooks/useRightPanelIntents.ts
 import { useCallback as useCallback91, useEffect as useEffect99, useRef as useRef115 } from "react";
@@ -66059,7 +66216,7 @@ function useRightPanelIntent() {
 }
 
 // src/components/renders/useRenderQueue.ts
-import { useState as useState98, useEffect as useEffect101, useCallback as useCallback93, useRef as useRef117, useMemo as useMemo63 } from "react";
+import { useState as useState98, useEffect as useEffect101, useCallback as useCallback93, useRef as useRef117, useMemo as useMemo64 } from "react";
 
 // src/components/renders/serverError.ts
 async function readServerError(res) {
@@ -66582,7 +66739,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
     };
   }, [projectId]);
   const isRendering = jobs.some((j) => j.status === "rendering");
-  return useMemo63(
+  return useMemo64(
     () => ({
       jobs,
       isRendering,
@@ -67868,7 +68025,7 @@ function useCaptionSync(projectId) {
 }
 
 // src/hooks/usePersistentEditHistory.ts
-import { useCallback as useCallback97, useEffect as useEffect105, useMemo as useMemo64, useRef as useRef124, useState as useState104 } from "react";
+import { useCallback as useCallback97, useEffect as useEffect105, useMemo as useMemo65, useRef as useRef124, useState as useState104 } from "react";
 var EMPTY3 = { entries: [], back: null, forward: null };
 var DEFAULT_COALESCE_MS = 300;
 function historyUrl(projectId, path = "") {
@@ -67992,7 +68149,7 @@ function usePersistentEditHistory({ projectId }) {
   );
   const undo = useCallback97((callbacks) => step("undo", callbacks), [step]);
   const redo = useCallback97((callbacks) => step("redo", callbacks), [step]);
-  const state = useMemo64(() => {
+  const state = useMemo65(() => {
     const backAt = Math.max(view.back?.endedAt ?? 0, heldClaimRef.current?.at ?? 0);
     const redoAt = redoneAt(view);
     return {
@@ -68072,7 +68229,7 @@ function usePanelLayout(initialState2) {
 import { useState as useState106, useCallback as useCallback102, useRef as useRef128 } from "react";
 
 // src/hooks/useFileTree.ts
-import { useState as useState105, useCallback as useCallback99, useEffect as useEffect107, useMemo as useMemo65, useRef as useRef126 } from "react";
+import { useState as useState105, useCallback as useCallback99, useEffect as useEffect107, useMemo as useMemo66, useRef as useRef126 } from "react";
 var EMPTY_FILE_LIST = [];
 function useFileTree({ projectId, projectIdRef }) {
   const [fetched, setFetched] = useState105(null);
@@ -68136,11 +68293,11 @@ function useFileTree({ projectId, projectIdRef }) {
       );
     }
   }, [projectIdRef]);
-  const assets = useMemo65(
+  const assets = useMemo66(
     () => fileTree.filter((f) => !f.endsWith(".html") && !f.endsWith(".md") && !f.endsWith(".json")),
     [fileTree]
   );
-  const fontAssets = useMemo65(
+  const fontAssets = useMemo66(
     () => (projectId ? assets : []).filter((asset) => FONT_EXT.test(asset)).map((asset) => ({
       family: fontFamilyFromAssetPath(asset),
       path: asset,
@@ -68284,9 +68441,9 @@ function useEditorSave({
 }
 
 // src/hooks/useProjectFileWriter.ts
-import { useCallback as useCallback101, useMemo as useMemo66 } from "react";
+import { useCallback as useCallback101, useMemo as useMemo67 } from "react";
 function useProjectFileWriter({ projectId }) {
-  const fileVersionScope = useMemo66(
+  const fileVersionScope = useMemo67(
     () => ({ projectId, versions: /* @__PURE__ */ new Map() }),
     [projectId]
   );
@@ -68391,7 +68548,7 @@ function useProjectFileWriter({ projectId }) {
     },
     [fileVersions, projectId]
   );
-  return useMemo66(
+  return useMemo67(
     () => ({
       fileVersions,
       readProjectFile,
@@ -70977,7 +71134,7 @@ function useTimelineGroupEditing({
     async (input) => {
       const sharedPath = allChangesSharePath(input.changes, activeCompPath);
       const canUseSdk = !input.needsExtension && sharedPath !== null && input.eligible && input.sdkChanges.every((change) => change !== null);
-      if (!canUseSdk) return false;
+      if (!canUseSdk) return null;
       const result = await sdkTimingBatchPersist(
         input.sdkChanges.filter((change) => change !== null),
         sharedPath,
@@ -70997,7 +71154,7 @@ function useTimelineGroupEditing({
           skipRefresh: true
         }
       );
-      return cutoverCommittedOrThrow(result);
+      return cutoverCommittedOrThrow(result) ? { sdkGsap: sdkTimingGsapSync(result) } : null;
     },
     [
       activeCompPath,
@@ -71034,7 +71191,7 @@ function useTimelineGroupEditing({
       const label = options?.label ?? "Move timeline clips";
       return enqueueGroupOperation(label, async (projectId) => {
         await options?.beforeTiming;
-        const handledBySdk = await trySdkBatchPersist({
+        const sdk = await trySdkBatchPersist({
           changes,
           sdkChanges: toSdkTimingChanges(changes, (change) => ({
             start: toAuthoredStart(change.element, change.start)
@@ -71045,7 +71202,7 @@ function useTimelineGroupEditing({
           coalesceKey,
           coalesceMs
         });
-        if (!handledBySdk) {
+        if (!sdk) {
           await persistServerBatch(
             projectId,
             label,
@@ -71076,6 +71233,7 @@ function useTimelineGroupEditing({
             writeProjectFile,
             activeCompPath,
             changes,
+            sdkGsap: sdk?.sdkGsap,
             resolveChangePath: (element) => targetPathFor(element, activeCompPath),
             mutateChange: (change, changePath) => {
               const delta = change.start - change.element.start;
@@ -71135,7 +71293,7 @@ function useTimelineGroupEditing({
       const coalesceMs = options?.coalesceMs;
       return enqueueGroupOperation("Resize timeline clips", async (projectId) => {
         await options?.beforeTiming;
-        const handledBySdk = await trySdkBatchPersist({
+        const sdk = await trySdkBatchPersist({
           changes,
           sdkChanges: toSdkTimingChanges(changes, (change) => ({
             start: toAuthoredStart(change.element, change.start),
@@ -71147,7 +71305,7 @@ function useTimelineGroupEditing({
           coalesceKey,
           coalesceMs
         });
-        if (!handledBySdk) {
+        if (!sdk) {
           await persistServerBatch(
             projectId,
             "Resize timeline clips",
@@ -71175,6 +71333,7 @@ function useTimelineGroupEditing({
             writeProjectFile,
             activeCompPath,
             changes,
+            sdkGsap: sdk?.sdkGsap,
             resolveChangePath: (element) => targetPathFor(element, activeCompPath),
             mutateChange: (change, changePath) => {
               const domId = change.element.domId;
@@ -71379,10 +71538,8 @@ function useTimelineEditing({
           );
         };
         const coalesceKey = `timeline-move:${element.hfId ?? element.id}`;
-        const finishMoveGsapSync = () => (
-          // Every timing writer converges the same GSAP positions after its
-          // durable clip-start commit. The SDK owns the attribute write; this
-          // sync owns only the dependent animation rewrite and preview refresh.
+        const finishMoveGsapSync = (sdkGsap) => (
+          // One GSAP sync per edit: the SDK commit's own (sdkGsap), else the server rewrite here.
           finishClipTimingFallback({
             iframe: previewIframeRef.current,
             reloadPreview,
@@ -71393,11 +71550,12 @@ function useTimelineEditing({
             coalesceKey,
             recordEdit,
             writeProjectFile,
-            edit: { kind: "shift", delta: updates.start - element.start }
+            edit: { kind: "shift", delta: updates.start - element.start },
+            sdkGsap
           }).finally(() => invalidateGsapCache?.())
         );
         const moveFallback = () => enqueueEdit(element, "Move timeline clip", buildMovePatches, coalesceKey).then(
-          finishMoveGsapSync
+          () => finishMoveGsapSync()
         );
         return reorderDone.then(() => {
           if (sdkSession && element.hfId && !needsExtension && !trackChanged) {
@@ -71419,7 +71577,7 @@ function useTimelineEditing({
               { label: "Move timeline clip", coalesceKey, skipRefresh: true }
             ).then((result) => {
               if (!cutoverCommittedOrThrow(result)) return moveFallback();
-              return finishMoveGsapSync();
+              return finishMoveGsapSync(sdkTimingGsapSync(result));
             });
           }
           return moveFallback();
@@ -71468,7 +71626,7 @@ function useTimelineEditing({
       };
       const hasPbsAdjustment = updates.playbackStart != null || updates.start !== element.start && element.playbackStart != null;
       const coalesceKey = `timeline-resize:${element.hfId ?? element.id}`;
-      const finishResizeGsapSync = () => finishClipTimingFallback({
+      const finishResizeGsapSync = (sdkGsap) => finishClipTimingFallback({
         iframe: previewIframeRef.current,
         reloadPreview,
         projectId: projectIdRef.current,
@@ -71482,10 +71640,11 @@ function useTimelineEditing({
           kind: "scale",
           from: { start: toCompositionTime(element, element.start), duration: element.duration },
           to: { start: toCompositionTime(element, updates.start), duration: updates.duration }
-        }
+        },
+        sdkGsap
       }).finally(() => invalidateGsapCache?.());
       const resizeFallback = () => enqueueEdit(element, "Resize timeline clip", buildResizePatches, coalesceKey).then(
-        finishResizeGsapSync
+        () => finishResizeGsapSync()
       );
       const persistDone = sdkSession && element.hfId && !hasPbsAdjustment && !needsExtension ? sdkTimingPersist(
         element.hfId,
@@ -71505,7 +71664,7 @@ function useTimelineEditing({
         { label: "Resize timeline clip", coalesceKey, skipRefresh: true }
       ).then((result) => {
         if (!cutoverCommittedOrThrow(result)) return resizeFallback();
-        return finishResizeGsapSync();
+        return finishResizeGsapSync(sdkTimingGsapSync(result));
       }) : resizeFallback();
       return persistDone.catch((error) => {
         rollbackDuration();
@@ -73926,8 +74085,8 @@ function readDragStart(el, axis) {
 function applyElementPositionOffset(el, gestureOffset) {
   const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
   if (!cs) return "anchored";
-  const dx = Math.round(gestureOffset.x - readDragStart(el, "x"));
-  const dy = Math.round(gestureOffset.y - readDragStart(el, "y"));
+  const dx = roundTo3(gestureOffset.x - readDragStart(el, "x"));
+  const dy = roundTo3(gestureOffset.y - readDragStart(el, "y"));
   const lifted = el.getAttribute(LAYER_REVEAL_PRIOR_POSITION_ATTR) === "static";
   const isStatic = lifted || !/^(relative|absolute|fixed|sticky)$/.test(cs.position);
   if (!isStatic && (cs.left.endsWith("%") || cs.top.endsWith("%"))) return "percent";
@@ -73936,8 +74095,8 @@ function applyElementPositionOffset(el, gestureOffset) {
   const previous = { position: el.style.position, left: el.style.left, top: el.style.top };
   const before = layoutBox(el);
   if (isStatic) el.style.position = "relative";
-  el.style.left = `${Math.round(baseLeft) + dx}px`;
-  el.style.top = `${Math.round(baseTop) + dy}px`;
+  el.style.left = `${roundTo3(baseLeft + dx)}px`;
+  el.style.top = `${roundTo3(baseTop + dy)}px`;
   const after = layoutBox(el);
   const shiftedExactly = Math.abs(after.left - before.left - dx) <= 1 && Math.abs(after.top - before.top - dy) <= 1 && Math.abs(after.width - before.width) <= 1 && Math.abs(after.height - before.height) <= 1;
   if (!shiftedExactly) {
@@ -74239,8 +74398,11 @@ function useDomGeometryCommits({
       if (gsapFallback) return gsapFallback;
       const beforeSize = captureStudioBoxSize(selection.element);
       const beforeOffset = offset ? captureStudioPathOffset(selection.element) : null;
+      const stageCrop = prepareCropResize(selection.element);
       applyStudioBoxSize(selection.element, next);
+      const crop = stageCrop();
       const patches = buildBoxSizePatches(selection.element);
+      if (crop) patches.push(crop.patch);
       if (offset) {
         applyStudioPathOffset(selection.element, offset);
         patches.push(...buildPathOffsetPatches(selection.element));
@@ -74251,6 +74413,7 @@ function useDomGeometryCommits({
       }).catch((error) => {
         restoreStudioBoxSize(selection.element, beforeSize);
         if (beforeOffset) restoreStudioPathOffset(selection.element, beforeOffset);
+        crop?.revert();
         throw error;
       });
     },
@@ -74521,6 +74684,7 @@ function useDomEditCommits({
     handleDomAddTextField,
     handleDomRemoveTextField,
     stageElementPositionOffset,
+    commitPositionPatchToHtml,
     handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
@@ -74664,7 +74828,7 @@ function useGroupCommits(params) {
 }
 
 // src/hooks/useGsapScriptCommits.ts
-import { useCallback as useCallback132, useMemo as useMemo67, useRef as useRef144 } from "react";
+import { useCallback as useCallback132, useMemo as useMemo68, useRef as useRef144 } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/hooks/gsapRuntimePatch.ts
@@ -75987,7 +76151,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     const { instantPatch: _instantPatch, ...batchOptions } = options;
     await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, instantPatches.length > 0 ? { ...batchOptions, instantPatches } : batchOptions);
   }, [showToast, finalizeSuccessfulMutation]);
-  const commitMutation = useMemo67(() => {
+  const commitMutation = useMemo68(() => {
     const serializeFile = (file, task) => {
       if (writeProjectFile) {
         return serializeStudioFileMutation(writeProjectFile, file, task);
@@ -76052,7 +76216,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     },
     [activeProjectId]
   );
-  const sdkDeps = useMemo67(
+  const sdkDeps = useMemo68(
     () => writeProjectFile ? {
       editHistory: { recordEdit: editHistory.recordEdit },
       writeProjectFile,
@@ -76199,8 +76363,6 @@ function useDomEditPreviewSync({
 
 // src/hooks/useGsapAnimationFetchFallback.ts
 import { useCallback as useCallback133 } from "react";
-var COLD_PARSE_RETRIES = 5;
-var COLD_PARSE_DELAY_MS = 120;
 var FETCH_ERROR_RETRIES = 1;
 var FETCH_ERROR_DELAY_MS = 120;
 var delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -76209,32 +76371,22 @@ function gsapSourceFileForSelection(selection) {
 }
 function selectElementAnimationsOrRetry(parsed, target, element) {
   if (!parsed) return { kind: "fetch-error" };
-  if (parsed.animations.length === 0) return { kind: "cold" };
   return {
     kind: "resolved",
     animations: getAnimationsForElement(parsed.animations, target, element)
   };
 }
 async function fetchElementAnimationsWithRetry(projectId, gsapSourceFile, target, element, failOnFetchError, fresh) {
-  let coldAttempts = 0;
-  let errorAttempts = 0;
-  for (; ; ) {
+  for (let errorAttempts = 0; ; errorAttempts++) {
     const parsed = await fetchParsedAnimations(projectId, gsapSourceFile, { fresh });
     fresh = false;
     const outcome = selectElementAnimationsOrRetry(parsed, target, element);
     if (outcome.kind === "resolved") return outcome.animations;
-    if (outcome.kind === "fetch-error") {
-      if (errorAttempts >= FETCH_ERROR_RETRIES) {
-        if (failOnFetchError) throw new Error("GSAP animation ownership could not be verified");
-        return [];
-      }
-      errorAttempts++;
-      await delay(FETCH_ERROR_DELAY_MS);
-      continue;
+    if (errorAttempts >= FETCH_ERROR_RETRIES) {
+      if (failOnFetchError) throw new Error("GSAP animation ownership could not be verified");
+      return [];
     }
-    if (coldAttempts >= COLD_PARSE_RETRIES) return [];
-    coldAttempts++;
-    await delay(COLD_PARSE_DELAY_MS);
+    await delay(FETCH_ERROR_DELAY_MS);
   }
 }
 function useGsapAnimationFetchFallback(projectId) {
@@ -76887,8 +77039,8 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     }
   } else {
     resizeProps = {
-      width: Math.round(size.width),
-      height: Math.round(size.height)
+      width: roundToLayoutPx(size.width),
+      height: roundToLayoutPx(size.height)
     };
   }
   const finalizeScaleResizeCommit = async () => {
@@ -76914,8 +77066,8 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       return true;
     }
     const corrected = {
-      x: Math.round(base2.x + residual.x),
-      y: Math.round(base2.y + residual.y)
+      x: roundTo3(base2.x + residual.x),
+      y: roundTo3(base2.y + residual.y)
     };
     logResize("scale-finalize", {
       dropPoint: scaleDraftDropPoint,
@@ -77304,8 +77456,8 @@ function useAnimatedPropertyCommit(deps) {
   const commitAnimatedProperties = useCallback137(
     // This is the single routing boundary for set, keyframe, whole-tween, and first-group writes.
     // fallow-ignore-next-line complexity
-    async (selection, props) => {
-      if (!gsapCommitMutation) return;
+    async (selection, props, commit = gsapCommitMutation) => {
+      if (!commit) return;
       const propEntries = Object.entries(props);
       if (propEntries.length === 0) return;
       const primaryProp = propEntries[0][0];
@@ -77342,7 +77494,7 @@ function useAnimatedPropertyCommit(deps) {
               ),
               pct,
               iframe,
-              { commitMutation: gsapCommitMutation },
+              { commitMutation: commit },
               `Edit ${primaryProp} (whole animation)`
             );
             return;
@@ -77355,18 +77507,12 @@ function useAnimatedPropertyCommit(deps) {
             primaryProp,
             selector,
             iframe,
-            gsapCommitMutation
+            commit
           );
           return;
         }
         if (!elementHasKeyframes) {
-          await commitStaticSet(
-            selection,
-            propEntries,
-            selector,
-            selectedGsapAnimations,
-            gsapCommitMutation
-          );
+          await commitStaticSet(selection, propEntries, selector, selectedGsapAnimations, commit);
           return;
         }
         if (anim && isInstantHold(anim)) {
@@ -77376,7 +77522,7 @@ function useAnimatedPropertyCommit(deps) {
             propEntries,
             selector,
             selectedGsapAnimations,
-            gsapCommitMutation
+            commit
           );
           return;
         }
@@ -77392,7 +77538,7 @@ function useAnimatedPropertyCommit(deps) {
             { percentage: 0, properties: { ...newProps, _auto: 1 } },
             { percentage: pct, properties: newProps }
           ];
-          await gsapCommitMutation(
+          await commit(
             selection,
             {
               type: "add-with-keyframes",
@@ -77421,10 +77567,6 @@ function useAnimatedPropertyCommit(deps) {
 }
 
 // src/hooks/useGsapAwareEditing.ts
-async function saveMove(outcome, saveOnElement) {
-  if (outcome.status === "element-offset") return saveOnElement();
-  assertGsapEditPersisted(outcome);
-}
 var groupDragCommitCounter = 0;
 function firstPreflightFailure(results, updates) {
   for (const [index, result] of results.entries()) {
@@ -77445,6 +77587,7 @@ function useGsapAwareEditing({
   trackGsapInteractionFailure,
   stageElementPositionOffset,
   handleDomBoxSizeCommit,
+  commitPositionPatchToHtml,
   addGsapAnimation,
   convertToKeyframes,
   setArcPath,
@@ -77622,6 +77765,8 @@ function useGsapAwareEditing({
         animGroups: targetAnimations.map((a) => `${a.propertyGroup}:${a.method}`)
       });
       let anchorMove = null;
+      const stageCrop = prepareCropResize(selection.element);
+      let cropUndoKey = null;
       return runGestureTransaction({
         element: selection.element,
         label: "Resize layer",
@@ -77648,6 +77793,7 @@ function useGsapAwareEditing({
                 makeFetchFallback(selection)
               );
               assertGsapEditPersisted(outcome);
+              cropUndoKey = coalesceKey;
               const ownsDragOffset = outcome.status === "persisted" && outcome.ownsDragOffset === true;
               logResize("intercept-handled", {
                 scaleRoute,
@@ -77682,7 +77828,12 @@ function useGsapAwareEditing({
           logResizeSettle(selection.element, "dom-route");
           await handleDomBoxSizeCommit(selection, next, offset);
         },
-        afterBufferedCommitsSaved: () => anchorMove?.save() ?? Promise.resolve(),
+        afterBufferedCommitsSaved: async () => {
+          await anchorMove?.save();
+          if (cropUndoKey) {
+            await saveCropResize(stageCrop, selection, commitPositionPatchToHtml, cropUndoKey);
+          }
+        },
         restore: () => {
           anchorMove?.rollback();
           restore();
@@ -77692,6 +77843,7 @@ function useGsapAwareEditing({
     },
     [
       handleDomBoxSizeCommit,
+      commitPositionPatchToHtml,
       stageElementPositionOffset,
       gsapCommitMutation,
       previewIframeRef,
@@ -77729,10 +77881,7 @@ function useGsapAwareEditing({
       getGsapAnimationsForSelection
     ]
   );
-  const {
-    commitAnimatedProperty: commitAnimatedPropertyRaw,
-    commitAnimatedProperties: commitAnimatedPropertiesRaw
-  } = useAnimatedPropertyCommit({
+  const { commitAnimatedProperties: commitAnimatedPropertiesRaw } = useAnimatedPropertyCommit({
     selectedGsapAnimations,
     gsapCommitMutation,
     addGsapAnimation: (sel, method, time) => addGsapAnimation(sel, method, time),
@@ -77743,24 +77892,28 @@ function useGsapAwareEditing({
   const commitAnimatedProperties = useCallback138(
     async (selection, properties) => {
       try {
-        await commitAnimatedPropertiesRaw(selection, properties);
+        await writeSizeWithCrop(
+          selection,
+          properties,
+          gsapCommitMutation,
+          commitPositionPatchToHtml,
+          (keyed) => commitAnimatedPropertiesRaw(selection, properties, keyed)
+        );
       } catch (error) {
         trackGsapInteractionFailure(error, selection, "property", "Edit animated property");
         throw error;
       }
     },
-    [commitAnimatedPropertiesRaw, trackGsapInteractionFailure]
+    [
+      commitAnimatedPropertiesRaw,
+      commitPositionPatchToHtml,
+      gsapCommitMutation,
+      trackGsapInteractionFailure
+    ]
   );
   const commitAnimatedProperty = useCallback138(
-    async (selection, property, value) => {
-      try {
-        await commitAnimatedPropertyRaw(selection, property, value);
-      } catch (error) {
-        trackGsapInteractionFailure(error, selection, "property", "Edit animated property");
-        throw error;
-      }
-    },
-    [commitAnimatedPropertyRaw, trackGsapInteractionFailure]
+    (selection, property, value) => commitAnimatedProperties(selection, { [property]: value }),
+    [commitAnimatedProperties]
   );
   const handleSetArcPath = useCallback138(
     (animId, config) => {
@@ -78005,15 +78158,10 @@ function useKeyframeEaseCommits({
 }
 
 // src/hooks/useCommitPreflightCapabilities.ts
-import { useEffect as useEffect116, useMemo as useMemo68, useRef as useRef149, useState as useState112 } from "react";
+import { useEffect as useEffect116, useMemo as useMemo69, useRef as useRef149, useState as useState112 } from "react";
 function runCommitPreflights(selection, fileAnimations, iframe, group) {
   const target = { id: selection.id ?? null, selector: selection.selector ?? null };
-  const matched = selectElementAnimationsOrRetry(
-    { animations: fileAnimations },
-    target,
-    selection.element
-  );
-  const animations = matched.kind === "resolved" ? matched.animations : [];
+  const animations = getAnimationsForElement(fileAnimations, target, selection.element);
   return {
     offset: dragEditOutcome(selection, animations, iframe, [], group),
     size: preflightGsapResizeIntercept(selection, animations, iframe),
@@ -78079,7 +78227,7 @@ function useCommitPreflightCapabilities({
       });
     }
   }, [enabled, projectId, selection, groupSelections, version]);
-  return useMemo68(() => {
+  return useMemo69(() => {
     void parseTick;
     if (!enabled || !projectId) return { selection, groupSelections };
     const group = groupSelections.length > 1;
@@ -78270,6 +78418,7 @@ function useDomEditSession({
     handleDomAddTextField,
     handleDomRemoveTextField,
     stageElementPositionOffset,
+    commitPositionPatchToHtml,
     handleDomBoxSizeCommit,
     handleDomManualEditsReset,
     handleDomEditElementsDelete,
@@ -78500,6 +78649,7 @@ function useDomEditSession({
     trackGsapInteractionFailure,
     stageElementPositionOffset,
     handleDomBoxSizeCommit,
+    commitPositionPatchToHtml,
     addGsapAnimation,
     convertToKeyframes,
     setArcPath,
@@ -79411,7 +79561,7 @@ function useStudioExternalFileChanges({
 }
 
 // src/hooks/useBlockHandlers.ts
-import { useCallback as useCallback144, useMemo as useMemo69, useRef as useRef152, useState as useState115 } from "react";
+import { useCallback as useCallback144, useMemo as useMemo70, useRef as useRef152, useState as useState115 } from "react";
 
 // src/utils/blockInstaller.ts
 function getMaxZIndexFromIframe(iframe) {
@@ -79605,7 +79755,7 @@ function useBlockHandlers({
   setRightPanelTab
 }) {
   const [activeBlockParams, setActiveBlockParams] = useState115(null);
-  const blockCtx = useMemo69(
+  const blockCtx = useMemo70(
     () => ({
       activeCompPath: blockCtxDeps.activeCompPath,
       timelineElements: blockCtxDeps.timelineElements,
@@ -79935,7 +80085,7 @@ function dispatchPlainKey(event, key2, cb) {
 }
 
 // src/hooks/useEditHistoryActions.ts
-import { useCallback as useCallback145, useMemo as useMemo70 } from "react";
+import { useCallback as useCallback145, useMemo as useMemo71 } from "react";
 function useEditHistoryActions({
   editHistory,
   readOptionalProjectFile,
@@ -79999,7 +80149,7 @@ function useEditHistoryActions({
   );
   const undo = useCallback145(() => apply("undo"), [apply]);
   const redo = useCallback145(() => apply("redo"), [apply]);
-  return useMemo70(() => ({ undo, redo }), [undo, redo]);
+  return useMemo71(() => ({ undo, redo }), [undo, redo]);
 }
 
 // src/hooks/useAppHotkeys.ts
@@ -80173,7 +80323,7 @@ function useAppHotkeys({
 
 // src/hooks/useClipboard.ts
 import { useCallback as useCallback147, useRef as useRef154 } from "react";
-import { EXCLUDED_TAGS, mintHfId, walkCompositionDescendants } from "@hyperframes/parsers/hf-ids";
+import { EXCLUDED_TAGS, mintHfId, walkCompositionDescendants as walkCompositionDescendants2 } from "@hyperframes/parsers/hf-ids";
 
 // src/utils/clipboardPayload.ts
 function insertAsSibling(source, newHtml, selector, selectorIndex) {
@@ -80372,7 +80522,7 @@ function remintHfIds(html2, parser, taken) {
     return html2.replace(/\sdata-hf-id=("[^"]*"|'[^']*')/g, "");
   }
   const elements = [root];
-  walkCompositionDescendants(root, (el) => elements.push(el));
+  walkCompositionDescendants2(root, (el) => elements.push(el));
   for (const el of elements) {
     if (EXCLUDED_TAGS.has(el.tagName.toLowerCase())) el.removeAttribute("data-hf-id");
     else el.setAttribute("data-hf-id", mintHfId(el, taken));
@@ -81192,7 +81342,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState118, useCallback as useCallback150, useEffect as useEffect124, useRef as useRef158, useMemo as useMemo71 } from "react";
+import { useState as useState118, useCallback as useCallback150, useEffect as useEffect124, useRef as useRef158, useMemo as useMemo72 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -81265,8 +81415,8 @@ function useLintModal(projectId, refreshKey) {
     },
     [backgroundFindings]
   );
-  const findingsByElement = useMemo71(() => groupFindings((f) => f.elementId), [groupFindings]);
-  const findingsByFile = useMemo71(() => groupFindings((f) => f.file), [groupFindings]);
+  const findingsByElement = useMemo72(() => groupFindings((f) => f.elementId), [groupFindings]);
+  const findingsByFile = useMemo72(() => groupFindings((f) => f.file), [groupFindings]);
   const badgeFindings = lintModal ?? backgroundFindings;
   const lintFindingCount = badgeFindings.length;
   const hasLintError = badgeFindings.some((f) => f.severity === "error");
@@ -81731,16 +81881,16 @@ function useStudioUrlState({
 }
 
 // src/hooks/useEffectiveTimelineDuration.ts
-import { useMemo as useMemo72 } from "react";
+import { useMemo as useMemo73 } from "react";
 function useEffectiveTimelineDuration(timelineDuration2, timelineElements) {
-  return useMemo72(
+  return useMemo73(
     () => getEffectiveTimelineDuration(timelineDuration2, timelineElements),
     [timelineDuration2, timelineElements]
   );
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback153, useMemo as useMemo73 } from "react";
+import { useCallback as useCallback153, useMemo as useMemo74 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -81768,7 +81918,7 @@ function buildStudioContextValue(input) {
   };
 }
 function useInspectorState(rightPanel, isPlaying, domEditSelection, isGestureRecording) {
-  return useMemo73(() => {
+  return useMemo74(() => {
     const inspectorPanelActive = rightPanel === "layers" || rightPanel === "design";
     return {
       inspectorPanelActive,
@@ -81811,7 +81961,7 @@ function useGlobalFileDrop(handleTimelineFileDrop) {
 }
 
 // src/contexts/PanelLayoutContext.tsx
-import { useContext as useContext13, useMemo as useMemo74 } from "react";
+import { useContext as useContext13, useMemo as useMemo75 } from "react";
 import { jsx as jsx188 } from "react/jsx-runtime";
 var PanelLayoutContext = createStableContext("PanelLayoutContext", null);
 function usePanelLayoutContext() {
@@ -81823,7 +81973,7 @@ function PanelLayoutProvider({
   value: { rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab },
   children
 }) {
-  const stable = useMemo74(
+  const stable = useMemo75(
     () => ({ rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab }),
     [rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab]
   );
@@ -82766,7 +82916,7 @@ function useGestureCommit({
 }
 
 // src/components/editor/GestureTrailOverlay.tsx
-import { memo as memo40, useMemo as useMemo75 } from "react";
+import { memo as memo40, useMemo as useMemo76 } from "react";
 import { Fragment as Fragment53, jsx as jsx191, jsxs as jsxs150 } from "react/jsx-runtime";
 var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
   samples,
@@ -82778,7 +82928,7 @@ var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
   mode,
   accentColor = "#3CE6AC"
 }) {
-  const trailPoints = useMemo75(() => {
+  const trailPoints = useMemo76(() => {
     if (!canvasRect) return "";
     if (trail2 && trail2.length > 1) {
       return trail2.map((p) => `${p.x - canvasRect.left},${p.y - canvasRect.top}`).join(" ");
@@ -82786,7 +82936,7 @@ var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
     if (samples.length === 0) return "";
     return samples.filter((s) => s.properties.x != null && s.properties.y != null).map((s) => `${s.properties.x},${s.properties.y}`).join(" ");
   }, [samples, trail2, sampleCount, canvasRect?.left, canvasRect?.top]);
-  const simplifiedPath = useMemo75(() => {
+  const simplifiedPath = useMemo76(() => {
     if (!simplifiedPoints || simplifiedPoints.size === 0) return "";
     const pts = [];
     for (const [pct, props] of simplifiedPoints) {
@@ -82798,7 +82948,7 @@ var GestureTrailOverlay = memo40(function GestureTrailOverlay2({
     if (pts.length === 0) return "";
     return pts.map((p) => `${p.x},${p.y}`).join(" ");
   }, [simplifiedPoints]);
-  const diamondPositions = useMemo75(() => {
+  const diamondPositions = useMemo76(() => {
     if (!simplifiedPoints || simplifiedPoints.size === 0) return [];
     const pts = [];
     for (const [pct, props] of simplifiedPoints) {
@@ -82997,7 +83147,7 @@ function MediaPreview({ projectId, filePath }) {
 }
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo41, useState as useState129, useCallback as useCallback159, useRef as useRef166, useMemo as useMemo77, useEffect as useEffect133 } from "react";
+import { memo as memo41, useState as useState129, useCallback as useCallback159, useRef as useRef166, useMemo as useMemo78, useEffect as useEffect133 } from "react";
 
 // src/components/ui/SearchInput.tsx
 import { jsx as jsx193, jsxs as jsxs152 } from "react/jsx-runtime";
@@ -83609,7 +83759,7 @@ function AudioRow({
 }
 
 // src/components/sidebar/GlobalAssetsView.tsx
-import { useEffect as useEffect130, useMemo as useMemo76, useState as useState126 } from "react";
+import { useEffect as useEffect130, useMemo as useMemo77, useState as useState126 } from "react";
 import { jsx as jsx196, jsxs as jsxs155 } from "react/jsx-runtime";
 function globalAssetRows(records, query = "") {
   const q = query.trim().toLowerCase();
@@ -83636,7 +83786,7 @@ function GlobalAssetsView({ searchQuery }) {
       cancelled = true;
     };
   }, []);
-  const rows = useMemo76(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
+  const rows = useMemo77(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
   if (records === null) {
     return /* @__PURE__ */ jsx196("p", { className: "px-4 py-3 text-[11px] text-panel-text-5", children: "Loading global assets\u2026" });
   }
@@ -84198,12 +84348,12 @@ var AssetsTab = memo41(function AssetsTab2({
     setTimeout(() => setCopyFeedback(null), copied ? 1500 : 3e3);
   }, []);
   const elements = usePlayerStore((s) => s.elements);
-  const usedPaths = useMemo77(() => deriveUsedPaths(elements), [elements]);
-  const allMediaAssets = useMemo77(
+  const usedPaths = useMemo78(() => deriveUsedPaths(elements), [elements]);
+  const allMediaAssets = useMemo78(
     () => assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a)),
     [assets]
   );
-  const mediaAssets = useMemo77(() => {
+  const mediaAssets = useMemo78(() => {
     const all = filterByUsage(allMediaAssets, usedPaths, usageFilter);
     if (!searchQuery) return all;
     const q = searchQuery.toLowerCase();
@@ -84213,7 +84363,7 @@ var AssetsTab = memo41(function AssetsTab2({
       return rec?.description?.toLowerCase().includes(q);
     });
   }, [allMediaAssets, searchQuery, manifest, usageFilter, usedPaths]);
-  const categorized = useMemo77(() => {
+  const categorized = useMemo78(() => {
     const groups = { audio: [], images: [], video: [], fonts: [] };
     for (const a of mediaAssets) {
       const cat = getCategory(a);
@@ -84228,12 +84378,12 @@ var AssetsTab = memo41(function AssetsTab2({
     }
     return groups;
   }, [mediaAssets, usedPaths]);
-  const counts = useMemo77(() => {
+  const counts = useMemo78(() => {
     const c = { all: mediaAssets.length };
     for (const cat of FILTER_ORDER) c[cat] = categorized[cat].length;
     return c;
   }, [mediaAssets, categorized]);
-  const usageCounts = useMemo77(
+  const usageCounts = useMemo78(
     () => countUsage(
       assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a)),
       usedPaths
@@ -88614,7 +88764,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo52, useCallback as useCallback175, useEffect as useEffect144, useMemo as useMemo78, useState as useState146 } from "react";
+import { memo as memo52, useCallback as useCallback175, useEffect as useEffect144, useMemo as useMemo79, useState as useState146 } from "react";
 
 // src/hooks/useVariablesPersist.ts
 import { useCallback as useCallback172 } from "react";
@@ -89310,22 +89460,22 @@ var VariablesPanel = memo52(function VariablesPanel2({
     reloadPreview,
     publishSdkSession
   });
-  const declarations = useMemo78(
+  const declarations = useMemo79(
     () => sdkSession?.getVariableDeclarations() ?? [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const usage = useMemo78(
+  const usage = useMemo79(
     () => sdkSession?.getVariableUsage() ?? null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const issues = useMemo78(
+  const issues = useMemo79(
     () => previewValues && sdkSession ? sdkSession.validateVariableValues(previewValues) : [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
   );
-  const effectiveValues = useMemo78(
+  const effectiveValues = useMemo79(
     () => sdkSession?.getVariableValues(previewValues ?? void 0) ?? {},
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
@@ -89640,15 +89790,15 @@ function useSlideshowPersist({
 }
 
 // src/hooks/useSlideshowTabState.ts
-import { useMemo as useMemo79 } from "react";
+import { useMemo as useMemo80 } from "react";
 import { SLIDESHOW_ISLAND_TYPE as SLIDESHOW_ISLAND_TYPE2, slideshowIslandRegex as slideshowIslandRegex2 } from "@hyperframes/core/slideshow";
 function useSlideshowTabState(params) {
   const { editingFileContent, previewIframeRef, refreshKey, slideshowVisible } = params;
-  const isSlideshowComposition = useMemo79(() => {
+  const isSlideshowComposition = useMemo80(() => {
     if (!editingFileContent || !editingFileContent.includes(SLIDESHOW_ISLAND_TYPE2)) return false;
     return slideshowIslandRegex2("i").test(editingFileContent);
   }, [editingFileContent]);
-  const slideshowScenes = useMemo79(() => {
+  const slideshowScenes = useMemo80(() => {
     try {
       const win = previewIframeRef.current?.contentWindow;
       return (win?.__clipManifest?.scenes ?? []).map((s) => ({
@@ -91501,7 +91651,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     recordEdit: editHistory.recordEdit,
     setRefreshKey
   });
-  const masterCompPath = useMemo80(
+  const masterCompPath = useMemo81(
     () => resolveMasterCompositionPath(fileManager.compositions),
     [fileManager.compositions]
   );
@@ -91605,7 +91755,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   });
   const dismissBlockParams = useCallback185(() => setActiveBlockParams(null), [setActiveBlockParams]);
   const setRightPanelTab = useDismissingTabSetter(panelLayout.setRightPanelTab, dismissBlockParams);
-  const layout = useMemo80(
+  const layout = useMemo81(
     () => ({ ...panelLayout, setRightPanelTab }),
     [panelLayout, setRightPanelTab]
   );
@@ -91823,7 +91973,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     handlePreviewIframeRef,
     refreshPreviewDocumentVersion
   });
-  const timelineToolbar = useMemo80(
+  const timelineToolbar = useMemo81(
     () => /* @__PURE__ */ jsx229(
       TimelineToolbar,
       {
@@ -92340,7 +92490,7 @@ function findElementBlock(html2, elementId2) {
 }
 
 // src/hooks/useDomStyleCommit.ts
-import { useCallback as useCallback187, useMemo as useMemo81, useRef as useRef183, useState as useState151 } from "react";
+import { useCallback as useCallback187, useMemo as useMemo82, useRef as useRef183, useState as useState151 } from "react";
 var noop = () => {
 };
 function useDomStyleCommit({
@@ -92356,7 +92506,7 @@ function useDomStyleCommit({
   const [queue2] = useState151(createDomEditSaveQueue);
   useMountEffect(() => () => queue2.destroy());
   const versions = useRef183(/* @__PURE__ */ new Map()).current;
-  const editHistory = useMemo81(() => ({ recordEdit }), [recordEdit]);
+  const editHistory = useMemo82(() => ({ recordEdit }), [recordEdit]);
   const persistDomEditOperations = useDomEditPersist({
     activeCompPath,
     previewIframeRef: iframeRef,
@@ -92388,7 +92538,7 @@ function useDomStyleCommit({
 }
 
 // src/hooks/useDomGeometryCommit.ts
-import { useCallback as useCallback188, useMemo as useMemo82, useRef as useRef184, useState as useState152 } from "react";
+import { useCallback as useCallback188, useMemo as useMemo83, useRef as useRef184, useState as useState152 } from "react";
 var noop2 = () => {
 };
 var NO_SELECTED_ANIMATIONS = [];
@@ -92405,7 +92555,7 @@ function useDomGeometryCommit({
   const projectIdRef = useRef184(projectId);
   projectIdRef.current = projectId;
   const pending2 = useRef184(/* @__PURE__ */ new Set()).current;
-  const editHistory = useMemo82(() => ({ recordEdit }), [recordEdit]);
+  const editHistory = useMemo83(() => ({ recordEdit }), [recordEdit]);
   const reload = useCallback188(
     () => reloadPreview ? reloadPreview() : iframeRef.current?.contentWindow?.location.reload(),
     [reloadPreview, iframeRef]
@@ -92473,6 +92623,7 @@ function useDomGeometryCommit({
     trackGsapInteractionFailure,
     stageElementPositionOffset,
     handleDomBoxSizeCommit: noDomBoxSizeRoute,
+    commitPositionPatchToHtml: commitWithFreshQueue,
     addGsapAnimation: gsap3.addGsapAnimation,
     convertToKeyframes: gsap3.convertToKeyframes,
     setArcPath: gsap3.setArcPath,
@@ -92497,7 +92648,7 @@ function useDomGeometryCommit({
     },
     [pending2, showToast]
   );
-  return useMemo82(
+  return useMemo83(
     () => ({
       commitPathOffset: (selection, next, modifiers) => saved2(() => handleGsapAwarePathOffsetCommit(selection, next, modifiers)),
       commitGroupPathOffset: (updates) => saved2(() => handleGsapAwareGroupPathOffsetCommit(updates)),