@hyperframes/studio 0.8.98 → 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;
 }
@@ -19808,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}`);
@@ -20007,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,
@@ -20023,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,
@@ -20043,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,
@@ -30159,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));
@@ -30206,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);
@@ -30944,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(
@@ -30958,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) {
@@ -31317,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(/^\.?\//, "");
 }
@@ -31523,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;
@@ -31594,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);
 }
@@ -31604,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;
@@ -31667,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`);
@@ -31697,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);
 }
@@ -31735,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) {
@@ -31753,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`)
   );
 }
 
@@ -31921,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);
@@ -32050,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);
@@ -32303,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
   };
@@ -34301,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;
@@ -34341,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,
@@ -34351,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
   );
@@ -34392,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) => {
@@ -34438,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);
@@ -34803,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
@@ -36270,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,
@@ -37576,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(
@@ -39854,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");
@@ -40034,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,
@@ -40063,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) {
@@ -40080,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));
@@ -40411,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 };
@@ -42451,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, {
@@ -70976,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,
@@ -70996,7 +71154,7 @@ function useTimelineGroupEditing({
           skipRefresh: true
         }
       );
-      return cutoverCommittedOrThrow(result);
+      return cutoverCommittedOrThrow(result) ? { sdkGsap: sdkTimingGsapSync(result) } : null;
     },
     [
       activeCompPath,
@@ -71033,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)
@@ -71044,7 +71202,7 @@ function useTimelineGroupEditing({
           coalesceKey,
           coalesceMs
         });
-        if (!handledBySdk) {
+        if (!sdk) {
           await persistServerBatch(
             projectId,
             label,
@@ -71075,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;
@@ -71134,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),
@@ -71146,7 +71305,7 @@ function useTimelineGroupEditing({
           coalesceKey,
           coalesceMs
         });
-        if (!handledBySdk) {
+        if (!sdk) {
           await persistServerBatch(
             projectId,
             "Resize timeline clips",
@@ -71174,6 +71333,7 @@ function useTimelineGroupEditing({
             writeProjectFile,
             activeCompPath,
             changes,
+            sdkGsap: sdk?.sdkGsap,
             resolveChangePath: (element) => targetPathFor(element, activeCompPath),
             mutateChange: (change, changePath) => {
               const domId = change.element.domId;
@@ -71378,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,
@@ -71392,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) {
@@ -71418,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();
@@ -71467,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,
@@ -71481,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,
@@ -71504,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();
@@ -73925,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";
@@ -73935,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) {
@@ -74238,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));
@@ -74250,6 +74413,7 @@ function useDomGeometryCommits({
       }).catch((error) => {
         restoreStudioBoxSize(selection.element, beforeSize);
         if (beforeOffset) restoreStudioPathOffset(selection.element, beforeOffset);
+        crop?.revert();
         throw error;
       });
     },
@@ -74520,6 +74684,7 @@ function useDomEditCommits({
     handleDomAddTextField,
     handleDomRemoveTextField,
     stageElementPositionOffset,
+    commitPositionPatchToHtml,
     handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
@@ -76874,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 () => {
@@ -76901,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,
@@ -77291,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];
@@ -77329,7 +77494,7 @@ function useAnimatedPropertyCommit(deps) {
               ),
               pct,
               iframe,
-              { commitMutation: gsapCommitMutation },
+              { commitMutation: commit },
               `Edit ${primaryProp} (whole animation)`
             );
             return;
@@ -77342,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)) {
@@ -77363,7 +77522,7 @@ function useAnimatedPropertyCommit(deps) {
             propEntries,
             selector,
             selectedGsapAnimations,
-            gsapCommitMutation
+            commit
           );
           return;
         }
@@ -77379,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",
@@ -77408,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()) {
@@ -77432,6 +77587,7 @@ function useGsapAwareEditing({
   trackGsapInteractionFailure,
   stageElementPositionOffset,
   handleDomBoxSizeCommit,
+  commitPositionPatchToHtml,
   addGsapAnimation,
   convertToKeyframes,
   setArcPath,
@@ -77609,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",
@@ -77635,6 +77793,7 @@ function useGsapAwareEditing({
                 makeFetchFallback(selection)
               );
               assertGsapEditPersisted(outcome);
+              cropUndoKey = coalesceKey;
               const ownsDragOffset = outcome.status === "persisted" && outcome.ownsDragOffset === true;
               logResize("intercept-handled", {
                 scaleRoute,
@@ -77669,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();
@@ -77679,6 +77843,7 @@ function useGsapAwareEditing({
     },
     [
       handleDomBoxSizeCommit,
+      commitPositionPatchToHtml,
       stageElementPositionOffset,
       gsapCommitMutation,
       previewIframeRef,
@@ -77716,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),
@@ -77730,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) => {
@@ -78252,6 +78418,7 @@ function useDomEditSession({
     handleDomAddTextField,
     handleDomRemoveTextField,
     stageElementPositionOffset,
+    commitPositionPatchToHtml,
     handleDomBoxSizeCommit,
     handleDomManualEditsReset,
     handleDomEditElementsDelete,
@@ -78482,6 +78649,7 @@ function useDomEditSession({
     trackGsapInteractionFailure,
     stageElementPositionOffset,
     handleDomBoxSizeCommit,
+    commitPositionPatchToHtml,
     addGsapAnimation,
     convertToKeyframes,
     setArcPath,
@@ -80155,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) {
@@ -80354,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));
@@ -92455,6 +92623,7 @@ function useDomGeometryCommit({
     trackGsapInteractionFailure,
     stageElementPositionOffset,
     handleDomBoxSizeCommit: noDomBoxSizeRoute,
+    commitPositionPatchToHtml: commitWithFreshQueue,
     addGsapAnimation: gsap3.addGsapAnimation,
     convertToKeyframes: gsap3.convertToKeyframes,
     setArcPath: gsap3.setArcPath,