@hyperframes/studio 0.8.99 → 0.8.100

package/dist/index.js

@@ -32383,6 +32383,334 @@ function computeDraggedGsapPosition(element, studioOffset, fallbackBase) {
   };
 }
 
+// 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;
@@ -32494,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
     });
@@ -32509,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
     });
@@ -32554,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)) {
@@ -32581,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;
@@ -32595,6 +32923,7 @@ function createManualOffsetDragMember(input) {
         selection: input.selection,
         element: input.element,
         initialOffset,
+        plainTranslate,
         baseGsap,
         initialPathOffset,
         gestureToken,
@@ -32610,6 +32939,7 @@ function createManualOffsetDragMember(input) {
       selection: input.selection,
       element: input.element,
       initialOffset,
+      plainTranslate,
       baseGsap,
       initialPathOffset,
       gestureToken,
@@ -32626,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) {
@@ -32654,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) {
@@ -32667,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) {
@@ -32692,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);
@@ -33345,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);
@@ -33409,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;
@@ -33440,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);
@@ -33469,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;
@@ -34185,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;
@@ -34375,253 +34711,6 @@ 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,
@@ -42384,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);
@@ -47838,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,
@@ -64921,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;
@@ -73716,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);
@@ -73742,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 {
@@ -73853,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 = "";
@@ -73876,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
@@ -73888,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
@@ -73904,7 +73993,6 @@ function useDomEditTextCommits({
       activeCompPath,
       applyDomSelection,
       buildDomSelectionFromTarget,
-      domEditSelection,
       persistDomEditOperations,
       previewIframeRef,
       showToast
@@ -74122,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);
@@ -77602,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);
@@ -77667,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(