hyperframes 0.8.98 → 0.8.100

package/dist/studio/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,13 +32376,341 @@ 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
   };
 }
 
+// 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);
+}
+var POSITION_CHANNELS = [
+  "x",
+  "y",
+  "xPercent",
+  "yPercent",
+  "left",
+  "top",
+  // readTween reads the authored translateX/Y; GSAP normalizes them to x/y only at play time.
+  "translateX",
+  "translateY"
+];
+var MOVE_CHANNELS = [...POSITION_CHANNELS, "motionPath"];
+function gsapWritesChannels(el, channels) {
+  const win = el.ownerDocument.defaultView;
+  return Object.values(win?.__timelines ?? {}).some(
+    (tl) => (tl?.getChildren?.(true) ?? []).some(
+      (tween) => !!tween.vars && matchesElement(tween, el) && (channels.some((ch) => ch in tween.vars) || keyframeVarsCarryChannel(tween.vars, channels))
+    )
+  );
+}
+function gsapWritesPosition(el) {
+  const cache2 = el._gsap;
+  return !!cache2?.renderTransform || gsapWritesChannels(el, MOVE_CHANNELS);
+}
+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/plainTranslate.ts
+var TERM = /^(-?\d*\.?\d+(?:e[-+]?\d+)?)(px|%)$/i;
+var SIGN = { "+": 1, "-": -1 };
+function termPx(term, side) {
+  const match = TERM.exec(term ?? "");
+  return match ? Number(match[1]) * (match[2] === "%" ? side / 100 : 1) : null;
+}
+function resolveLength(value, side) {
+  const parts = (/^calc\((.*)\)$/.exec(value)?.[1] ?? value).split(" ");
+  if (parts.length % 2 === 0) return null;
+  let total = termPx(parts[0], side);
+  for (let i = 1; i < parts.length && total !== null; i += 2) {
+    const term = termPx(parts[i + 1], side);
+    const sign = SIGN[parts[i] ?? ""];
+    total = term === null || !sign ? null : total + sign * term;
+  }
+  return total;
+}
+function borderBox(cs, size, a, b) {
+  const n = (prop) => Number.parseFloat(cs.getPropertyValue(prop)) || 0;
+  const pad = n(`padding-${a}`) + n(`padding-${b}`) + n(`border-${a}-width`) + n(`border-${b}-width`);
+  return n(size) + (cs.boxSizing === "border-box" ? 0 : pad);
+}
+function resolveInTransform(el, x, y) {
+  const style = el.style;
+  const saved2 = [style.getPropertyValue("transform"), style.getPropertyPriority("transform")];
+  style.setProperty("transform", `translate(${x}, ${y})`, "important");
+  try {
+    const resolved2 = el.ownerDocument.defaultView?.getComputedStyle(el).transform ?? "";
+    const matrix = new DOMMatrixReadOnly(resolved2.startsWith("matrix") ? resolved2 : void 0);
+    return { x: matrix.m41, y: matrix.m42 };
+  } finally {
+    style.setProperty("transform", saved2[0] ?? "", saved2[1] ?? "");
+  }
+}
+function readTranslatePx(el) {
+  const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
+  const value = el.style.getPropertyValue("translate") || cs?.translate || "none";
+  if (value === "none") return { x: 0, y: 0 };
+  const [x = "0px", y = "0px"] = splitTopLevelWhitespace(value);
+  const px = cs && resolveLength(x, borderBox(cs, "width", "left", "right"));
+  const py = cs && resolveLength(y, borderBox(cs, "height", "top", "bottom"));
+  return px != null && py != null ? { x: px, y: py } : resolveInTransform(el, x, y);
+}
+function formatTranslatePx(p) {
+  return `${roundTo3(p.x)}px ${roundTo3(p.y)}px`;
+}
+function translatePatch(p) {
+  return { type: "inline-style", property: "translate", value: formatTranslatePx(p) };
+}
+function writeTranslatePx(el, p) {
+  el.style.setProperty("translate", formatTranslatePx(p));
+}
+function readMoveOffset(el) {
+  return gsapWritesPosition(el) ? readStudioPathOffset(el) : readTranslatePx(el);
+}
+
 // src/components/editor/manualOffsetDrag.ts
 function getOffsetDragGsap(element) {
   const win = element.ownerDocument.defaultView;
@@ -32421,14 +32822,15 @@ function measureManualOffsetDragScreenToOffsetMatrix(element, initialOffset, opt
   if (!Number.isFinite(probeSize) || probeSize <= 0) {
     return { ok: false, reason: "Invalid movement probe size." };
   }
+  const draw = options.plainTranslate ? writeTranslatePx : applyStudioPathOffsetDraft;
   const snapshot3 = captureStudioPathOffset(element);
   try {
-    applyStudioPathOffsetDraft(element, initialOffset);
+    draw(element, initialOffset);
     const origin = getRectCenter(element);
     if (!origin) {
       return { ok: false, reason: "Element has no measurable box." };
     }
-    applyStudioPathOffsetDraft(element, {
+    draw(element, {
       x: initialOffset.x + probeSize,
       y: initialOffset.y
     });
@@ -32436,7 +32838,7 @@ function measureManualOffsetDragScreenToOffsetMatrix(element, initialOffset, opt
     if (!probeX) {
       return { ok: false, reason: "Element X movement could not be measured." };
     }
-    applyStudioPathOffsetDraft(element, {
+    draw(element, {
       x: initialOffset.x,
       y: initialOffset.y + probeSize
     });
@@ -32481,14 +32883,13 @@ function resolveManualOffsetForPointerDelta(input) {
   };
 }
 function createManualOffsetDragMember(input) {
-  const initialOffset = readAppliedStudioPathOffset(input.element);
-  input.element.setAttribute("data-hf-drag-initial-offset-x", String(initialOffset.x));
-  input.element.setAttribute("data-hf-drag-initial-offset-y", String(initialOffset.y));
+  const plainTranslate = !!input.gesture && !gsapWritesPosition(input.element);
+  const initialOffset = plainTranslate ? readTranslatePx(input.element) : readAppliedStudioPathOffset(input.element);
   const win = input.element.ownerDocument.defaultView;
-  const gsapX = win?.gsap?.getProperty?.(input.element, "x") || 0;
-  const gsapY = win?.gsap?.getProperty?.(input.element, "y") || 0;
-  input.element.setAttribute("data-hf-drag-gsap-base-x", String(gsapX));
-  input.element.setAttribute("data-hf-drag-gsap-base-y", String(gsapY));
+  const gsapX = !plainTranslate && win?.gsap?.getProperty?.(input.element, "x") || 0;
+  const gsapY = !plainTranslate && win?.gsap?.getProperty?.(input.element, "y") || 0;
+  const baseGsap = { x: gsapX, y: gsapY };
+  if (!plainTranslate) stampGestureBase(input.element, initialOffset, baseGsap);
   if (win?.__timelines) {
     const paused = [];
     for (const [id, tl] of Object.entries(win.__timelines)) {
@@ -32508,9 +32909,9 @@ function createManualOffsetDragMember(input) {
   const gestureToken = beginStudioManualEditGesture(input.element);
   const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset, {
     scaleX: input.rect.editScaleX,
-    scaleY: input.rect.editScaleY
+    scaleY: input.rect.editScaleY,
+    plainTranslate
   });
-  const baseGsap = { x: gsapX, y: gsapY };
   if (!measured.ok) {
     const scaleX = input.rect.editScaleX || 1;
     const scaleY = input.rect.editScaleY || 1;
@@ -32522,6 +32923,7 @@ function createManualOffsetDragMember(input) {
         selection: input.selection,
         element: input.element,
         initialOffset,
+        plainTranslate,
         baseGsap,
         initialPathOffset,
         gestureToken,
@@ -32537,6 +32939,7 @@ function createManualOffsetDragMember(input) {
       selection: input.selection,
       element: input.element,
       initialOffset,
+      plainTranslate,
       baseGsap,
       initialPathOffset,
       gestureToken,
@@ -32553,24 +32956,27 @@ function resolveManualOffsetDragMemberOffset(member, dx, dy) {
     dy
   });
 }
+function drawMemberOffset(member, offset, commit) {
+  if (member.plainTranslate) writeTranslatePx(member.element, offset);
+  else if (applyOffsetDragDraftViaGsap(member.element, offset, member.baseGsap)) return;
+  else if (commit) applyStudioPathOffset(member.element, offset);
+  else applyStudioPathOffsetDraft(member.element, offset);
+}
 function applyManualOffsetDragDraft(member, dx, dy) {
   const offset = resolveManualOffsetDragMemberOffset(member, dx, dy);
-  if (!applyOffsetDragDraftViaGsap(member.element, offset, member.baseGsap)) {
-    applyStudioPathOffsetDraft(member.element, offset);
-  }
+  drawMemberOffset(member, offset, false);
   return offset;
 }
-function restampManualOffsetDragGestureBase(member) {
-  member.element.setAttribute("data-hf-drag-gsap-base-x", String(member.baseGsap.x));
-  member.element.setAttribute("data-hf-drag-gsap-base-y", String(member.baseGsap.y));
-  member.element.setAttribute("data-hf-drag-initial-offset-x", String(member.initialOffset.x));
-  member.element.setAttribute("data-hf-drag-initial-offset-y", String(member.initialOffset.y));
+function stampGestureBase(el, initialOffset, baseGsap) {
+  el.setAttribute("data-hf-drag-gsap-base-x", String(baseGsap.x));
+  el.setAttribute("data-hf-drag-gsap-base-y", String(baseGsap.y));
+  el.setAttribute("data-hf-drag-initial-offset-x", String(initialOffset.x));
+  el.setAttribute("data-hf-drag-initial-offset-y", String(initialOffset.y));
 }
 function applyManualOffsetCommitValue(member, offset) {
-  restampManualOffsetDragGestureBase(member);
-  if (!applyOffsetDragDraftViaGsap(member.element, offset, member.baseGsap)) {
-    applyStudioPathOffset(member.element, offset);
-  }
+  if (!member.plainTranslate)
+    stampGestureBase(member.element, member.initialOffset, member.baseGsap);
+  drawMemberOffset(member, offset, true);
   return offset;
 }
 function applyManualOffsetDragCommit(member, dx, dy) {
@@ -32581,9 +32987,7 @@ function applyManualOffsetNudgeDraft(member, delta) {
     x: member.initialOffset.x + delta.x,
     y: member.initialOffset.y + delta.y
   };
-  if (!applyOffsetDragDraftViaGsap(member.element, offset, member.baseGsap)) {
-    applyStudioPathOffsetDraft(member.element, offset);
-  }
+  drawMemberOffset(member, offset, false);
   return offset;
 }
 function applyManualOffsetNudgeCommit(member, delta) {
@@ -32594,7 +32998,9 @@ function applyManualOffsetNudgeCommit(member, delta) {
 }
 function restoreManualOffsetDragMember(member) {
   restoreStudioPathOffset(member.element, member.initialPathOffset);
-  getOffsetDragGsap(member.element)?.set(member.element, { ...member.baseGsap });
+  if (!member.plainTranslate) {
+    getOffsetDragGsap(member.element)?.set(member.element, { ...member.baseGsap });
+  }
   endStudioManualEditGesture(member.element, member.gestureToken);
 }
 function restoreManualOffsetDragMembers(members) {
@@ -32619,7 +33025,7 @@ function endManualOffsetDragMembers(members) {
     member.element.removeAttribute("data-hf-drag-initial-offset-y");
     member.element.removeAttribute("data-hf-drag-gsap-base-x");
     member.element.removeAttribute("data-hf-drag-gsap-base-y");
-    const gsapOwnsPosition = Boolean(getOffsetDragGsap(member.element));
+    const gsapOwnsPosition = !member.plainTranslate && Boolean(getOffsetDragGsap(member.element));
     if (gsapOwnsPosition) clearStudioPathOffset(member.element);
     settleDraftTranslate(member.element, gsapOwnsPosition);
     resumeGsapTimelines(member.element);
@@ -33272,7 +33678,8 @@ function startGroupDrag(e, opts) {
       key: item.key,
       selection: item.selection,
       element: item.element,
-      rect: item.rect
+      rect: item.rect,
+      gesture: "drag"
     });
     if (!result.ok) {
       restoreManualOffsetDragMembers(members);
@@ -33336,7 +33743,6 @@ function startGesture(kind, e, opts, options) {
   if (kind === "resize" && (!Number.isFinite(rect.width) || !Number.isFinite(rect.height)))
     return false;
   const size = readStudioBoxSize(sel.element);
-  const rotation = { angle: readGsapRotation(sel.element) + readStudioRotation(sel.element).angle };
   const layoutWidth = sel.element.offsetWidth;
   const layoutHeight = sel.element.offsetHeight;
   const actualWidth = size.width > 0 ? size.width : layoutWidth > 0 ? layoutWidth : rect.width / rect.editScaleX;
@@ -33367,7 +33773,8 @@ function startGesture(kind, e, opts, options) {
       key: selectionCacheKey(sel),
       selection: sel,
       element: sel.element,
-      rect
+      rect,
+      gesture: "drag"
     });
     if (!result.ok) {
       opts.onBlockedMoveRef.current(result.selection);
@@ -33396,6 +33803,8 @@ function startGesture(kind, e, opts, options) {
       manualEditDragToken = beginStudioManualEditGesture(sel.element);
     }
   }
+  const gsapRotation = pathOffsetMember?.plainTranslate ? 0 : readGsapRotation(sel.element);
+  const rotation = { angle: gsapRotation + readStudioRotation(sel.element).angle };
   const overlayBounds = overlayEl?.getBoundingClientRect();
   const centerX = (overlayBounds?.left ?? 0) + rect.left + rect.width / 2;
   const centerY = (overlayBounds?.top ?? 0) + rect.top + rect.height / 2;
@@ -34112,7 +34521,7 @@ function useDomEditNudge(params) {
     if (!targets) return null;
     const members = [];
     for (const target of targets) {
-      const result = createManualOffsetDragMember(target);
+      const result = createManualOffsetDragMember({ ...target, gesture: "nudge" });
       if (!result.ok) {
         restoreManualOffsetDragMembers(members);
         return null;
@@ -34301,6 +34710,93 @@ var SnapGuideOverlay = memo23(function SnapGuideOverlay2({
 
 // src/components/editor/DomEditCropHandles.tsx
 import { useEffect as useEffect44, useRef as useRef65, useState as useState40 } from "react";
+
+// 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 +34837,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 +34848,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 +34879,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 +34928,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 +35284,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 +36751,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 +38057,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 +40340,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 +40524,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 +40553,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 +40570,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 +40901,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 };
@@ -42226,19 +42473,6 @@ function getAnimationsForElement(animations, target, element) {
 }
 
 // src/hooks/gsapRuntimeBridge.ts
-var POSITION_CHANNELS = [
-  "x",
-  "y",
-  "xPercent",
-  "yPercent",
-  "left",
-  "top",
-  // GSAP normalizes translateX/Y to x/y at play time, but readTween reads the
-  // AUTHORED shape — include them so a hand-authored translateX/Y position tween
-  // still counts as a live position tween.
-  "translateX",
-  "translateY"
-];
 var POSITION_CHANNEL_SET = new Set(POSITION_CHANNELS);
 var ROTATION_CHANNELS = ["rotation", "rotationX", "rotationY", "rotationZ"];
 var ROTATION_CHANNEL_SET = new Set(ROTATION_CHANNELS);
@@ -42451,7 +42685,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, {
@@ -47680,7 +47914,7 @@ function createTransformCommitHandlers({
       "This element's position can't be edited here yet \u2014 it is driven by its animation"
     ))
       return;
-    const current = readStudioPathOffset(element.element);
+    const current = readMoveOffset(element.element);
     await Promise.resolve(
       onSetManualOffset(element, {
         x: axis === "x" ? parsed : current.x,
@@ -64763,7 +64997,7 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
   const sourceLabel = element.id ? `#${element.id}` : element.selector ?? "";
   const sections = resolveEditingSections(domEditSelectionToFacts(element, gsapAnimations.length));
   const showEditableSections = element.capabilities.canEditStyles && sections.style;
-  const manualOffset = readStudioPathOffset(element.element);
+  const manualOffset = readMoveOffset(element.element);
   const manualSize = readStudioBoxSize(element.element);
   const resolvedWidth = manualSize.width > 0 ? manualSize.width : parsePxMetricValue(styles.width ?? "") ?? element.boundingBox.width;
   const resolvedHeight = manualSize.height > 0 ? manualSize.height : parsePxMetricValue(styles.height ?? "") ?? element.boundingBox.height;
@@ -70976,7 +71210,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 +71230,7 @@ function useTimelineGroupEditing({
           skipRefresh: true
         }
       );
-      return cutoverCommittedOrThrow(result);
+      return cutoverCommittedOrThrow(result) ? { sdkGsap: sdkTimingGsapSync(result) } : null;
     },
     [
       activeCompPath,
@@ -71033,7 +71267,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 +71278,7 @@ function useTimelineGroupEditing({
           coalesceKey,
           coalesceMs
         });
-        if (!handledBySdk) {
+        if (!sdk) {
           await persistServerBatch(
             projectId,
             label,
@@ -71075,6 +71309,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 +71369,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 +71381,7 @@ function useTimelineGroupEditing({
           coalesceKey,
           coalesceMs
         });
-        if (!handledBySdk) {
+        if (!sdk) {
           await persistServerBatch(
             projectId,
             "Resize timeline clips",
@@ -71174,6 +71409,7 @@ function useTimelineGroupEditing({
             writeProjectFile,
             activeCompPath,
             changes,
+            sdkGsap: sdk?.sdkGsap,
             resolveChangePath: (element) => targetPathFor(element, activeCompPath),
             mutateChange: (change, changePath) => {
               const domId = change.element.domId;
@@ -71378,10 +71614,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 +71626,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 +71653,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 +71702,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 +71716,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 +71740,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();
@@ -73556,10 +73792,6 @@ function canCommitInlineTextSelection(selection, element) {
   if (selection.isCompositionHost || selection.isInsideLockedComposition) return false;
   return canEditElementTextInline(element);
 }
-function ownsCurrentPreviewElement(selection, element, document2) {
-  if (!document2 || !element.isConnected) return false;
-  return element === selection.element && element.ownerDocument === document2;
-}
 async function resyncDomTextSelectionFromPreview(doc, selection, activeCompPath, buildDomSelectionFromTarget, applyDomSelection) {
   if (!doc) return;
   const refreshed = findElementForSelection(doc, selection, activeCompPath);
@@ -73582,6 +73814,8 @@ function useDomEditTextCommits({
 }) {
   const latestReadOnlyPreviewRef = useRef142(readOnlyPreview);
   latestReadOnlyPreviewRef.current = readOnlyPreview;
+  const latestSelectionRef = useRef142(domEditSelection);
+  latestSelectionRef.current = domEditSelection;
   const domTextCommitVersionRef = useRef142(/* @__PURE__ */ new Map());
   const domStyleCommitVersionRef = useRef142(/* @__PURE__ */ new Map());
   const {
@@ -73693,18 +73927,32 @@ function useDomEditTextCommits({
   );
   const handleDomRichTextCommit = useCallback123(
     async ({ element, html: html2, previousHtml }) => {
-      if (!domEditSelection) return;
-      if (latestReadOnlyPreviewRef.current) {
+      const putBack = () => {
         if (element.isConnected && element.innerHTML === html2) element.innerHTML = previousHtml;
-        return;
+      };
+      if (latestReadOnlyPreviewRef.current) return putBack();
+      const refuse = (reason) => {
+        console.error("[Studio] text edit not saved:", reason, element);
+        showToast(`Couldn't save the text edit: ${reason}`, "error");
+        putBack();
+      };
+      const doc = previewIframeRef.current?.contentDocument;
+      if (!doc || !element.isConnected || element.ownerDocument !== doc) {
+        return refuse("the text's element is gone from the preview");
+      }
+      const selection = await buildDomSelectionFromTarget(element, {
+        exactTarget: true,
+        skipSourceProbe: true
+      });
+      if (selection?.element !== element) {
+        return refuse("this text was not found in the composition's source");
+      }
+      if (!canCommitInlineTextSelection(selection, element)) {
+        return refuse("this text can't be edited in place");
       }
-      if (!canCommitInlineTextSelection(domEditSelection, element)) return;
-      const iframe = previewIframeRef.current;
-      const doc = iframe?.contentDocument;
-      if (!ownsCurrentPreviewElement(domEditSelection, element, doc)) return;
       const isLatestTextCommit = bumpDomEditCommitMapVersion(
         domTextCommitVersionRef.current,
-        getDomEditTargetKey(domEditSelection)
+        getDomEditTargetKey(selection)
       );
       const operations = [buildDomEditRichTextPatchOperation(html2)];
       let appliedHtml = "";
@@ -73716,7 +73964,7 @@ function useDomEditTextCommits({
           appliedHtml = element.innerHTML;
         },
         persist: async () => {
-          await persistDomEditOperations(domEditSelection, operations, {
+          await persistDomEditOperations(selection, operations, {
             label: "Edit text",
             skipRefresh: true,
             shouldSave: isLatestTextCommit
@@ -73728,11 +73976,12 @@ function useDomEditTextCommits({
             element.innerHTML = previousHtml;
           }
         },
-        onError: (error) => reportDomEditPersistFailure(domEditSelection, operations, error, showToast),
-        shouldResync: isLatestTextCommit,
+        onError: (error) => reportDomEditPersistFailure(selection, operations, error, showToast),
+        // Re-select only what is still selected: the selection may have moved on, or a host cleared it.
+        shouldResync: () => isLatestTextCommit() && latestSelectionRef.current?.element === element,
         resync: () => resyncDomTextSelectionFromPreview(
           doc,
-          domEditSelection,
+          selection,
           activeCompPath,
           buildDomSelectionFromTarget,
           applyDomSelection
@@ -73744,7 +73993,6 @@ function useDomEditTextCommits({
       activeCompPath,
       applyDomSelection,
       buildDomSelectionFromTarget,
-      domEditSelection,
       persistDomEditOperations,
       previewIframeRef,
       showToast
@@ -73925,8 +74173,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 +74183,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) {
@@ -73962,9 +74210,29 @@ function settleGsapDraftAtGestureStart(el) {
   const y = Number.parseFloat(el.getAttribute("data-hf-drag-gsap-base-y") ?? "");
   if (gsap3 && Number.isFinite(x) && Number.isFinite(y)) gsap3.set(el, { x, y });
 }
+var plainMoveCounter = 0;
+function stagePlainTranslate(commitPositionPatchToHtml, selection, next, coalesceKey) {
+  const style = selection.element.style;
+  const before = style.getPropertyValue("translate");
+  const patch = translatePatch(next);
+  style.setProperty("translate", patch.value);
+  const rollback = () => {
+    if (style.getPropertyValue("translate") === patch.value) style.setProperty("translate", before);
+  };
+  const key2 = coalesceKey ?? `move:${++plainMoveCounter}`;
+  const options = { label: "Move layer", coalesceKey: key2, coalesceMs: Number.POSITIVE_INFINITY };
+  const save = () => commitPositionPatchToHtml(selection, [patch], options).catch((error) => {
+    rollback();
+    throw error;
+  });
+  return { save, rollback };
+}
 function stageElementOffset({ commitPositionPatchToHtml, showToast, readOnlyPreview }, selection, next, coalesceKey) {
   const el = selection.element;
   if (readOnlyPreview) return { save: () => Promise.resolve(), rollback: () => void 0 };
+  if (!gsapWritesPosition(el)) {
+    return stagePlainTranslate(commitPositionPatchToHtml, selection, next, coalesceKey);
+  }
   const previous = { position: el.style.position, left: el.style.left, top: el.style.top };
   const liftMarker = el.getAttribute(LAYER_REVEAL_PRIOR_POSITION_ATTR);
   const result = applyElementPositionOffset(el, next);
@@ -74238,8 +74506,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 +74521,7 @@ function useDomGeometryCommits({
       }).catch((error) => {
         restoreStudioBoxSize(selection.element, beforeSize);
         if (beforeOffset) restoreStudioPathOffset(selection.element, beforeOffset);
+        crop?.revert();
         throw error;
       });
     },
@@ -74520,6 +74792,7 @@ function useDomEditCommits({
     handleDomAddTextField,
     handleDomRemoveTextField,
     stageElementPositionOffset,
+    commitPositionPatchToHtml,
     handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
@@ -76874,8 +77147,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 +77174,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 +77564,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 +77602,7 @@ function useAnimatedPropertyCommit(deps) {
               ),
               pct,
               iframe,
-              { commitMutation: gsapCommitMutation },
+              { commitMutation: commit },
               `Edit ${primaryProp} (whole animation)`
             );
             return;
@@ -77342,18 +77615,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 +77630,7 @@ function useAnimatedPropertyCommit(deps) {
             propEntries,
             selector,
             selectedGsapAnimations,
-            gsapCommitMutation
+            commit
           );
           return;
         }
@@ -77379,7 +77646,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 +77675,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 +77695,7 @@ function useGsapAwareEditing({
   trackGsapInteractionFailure,
   stageElementPositionOffset,
   handleDomBoxSizeCommit,
+  commitPositionPatchToHtml,
   addGsapAnimation,
   convertToKeyframes,
   setArcPath,
@@ -77446,6 +77710,8 @@ function useGsapAwareEditing({
   );
   const handleGsapAwarePathOffsetCommit = useCallback138(
     async (selection, next, modifiers) => {
+      if (!gsapWritesPosition(selection.element))
+        return stageElementPositionOffset(selection, next).save();
       if (gsapCommitMutation) {
         try {
           const ownedAnimations = getGsapAnimationsForSelection(selection);
@@ -77511,6 +77777,7 @@ function useGsapAwareEditing({
       const offsetMembers = /* @__PURE__ */ new Set();
       const preflightResults = await Promise.allSettled(
         updates.map(async ({ selection }) => {
+          if (!gsapWritesPosition(selection.element)) return void offsetMembers.add(selection);
           const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
           preflightAnimations.set(selection, animations);
           const outcome = await tryGsapDragIntercept(
@@ -77609,6 +77876,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 +77904,7 @@ function useGsapAwareEditing({
                 makeFetchFallback(selection)
               );
               assertGsapEditPersisted(outcome);
+              cropUndoKey = coalesceKey;
               const ownsDragOffset = outcome.status === "persisted" && outcome.ownsDragOffset === true;
               logResize("intercept-handled", {
                 scaleRoute,
@@ -77669,7 +77939,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 +77954,7 @@ function useGsapAwareEditing({
     },
     [
       handleDomBoxSizeCommit,
+      commitPositionPatchToHtml,
       stageElementPositionOffset,
       gsapCommitMutation,
       previewIframeRef,
@@ -77716,10 +77992,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 +78003,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 +78529,7 @@ function useDomEditSession({
     handleDomAddTextField,
     handleDomRemoveTextField,
     stageElementPositionOffset,
+    commitPositionPatchToHtml,
     handleDomBoxSizeCommit,
     handleDomManualEditsReset,
     handleDomEditElementsDelete,
@@ -78482,6 +78760,7 @@ function useDomEditSession({
     trackGsapInteractionFailure,
     stageElementPositionOffset,
     handleDomBoxSizeCommit,
+    commitPositionPatchToHtml,
     addGsapAnimation,
     convertToKeyframes,
     setArcPath,
@@ -80155,7 +80434,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 +80633,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 +92734,7 @@ function useDomGeometryCommit({
     trackGsapInteractionFailure,
     stageElementPositionOffset,
     handleDomBoxSizeCommit: noDomBoxSizeRoute,
+    commitPositionPatchToHtml: commitWithFreshQueue,
     addGsapAnimation: gsap3.addGsapAnimation,
     convertToKeyframes: gsap3.convertToKeyframes,
     setArcPath: gsap3.setArcPath,