@hyperframes/studio 0.8.99 → 0.8.101

package/dist/index.js

@@ -43,6 +43,7 @@ import {
   isTimelineIgnoredElement,
   liveTime,
   panelsInZone,
+  parseDockLayout,
   playbackStartAttributeForElement,
   previewElementFinder,
   readLayerRevealPriorZ,
@@ -66,7 +67,7 @@ import {
   whenPreviewBooted,
   wrapTimeline,
   writeStudioUiPreferences
-} from "./chunk-U3EE4ACX.js";
+} from "./chunk-7X4XRP3L.js";
 import {
   Button,
   ContextMenu,
@@ -3338,6 +3339,73 @@ function isLaneFree(elements, track2, start, end, excludeKey) {
   );
 }
 
+// src/player/components/timelineSnapping.ts
+function resolveSnapGuide(moving, trimming) {
+  const source = moving?.started ? moving : trimming;
+  if (source?.snapTime == null || source.snapType == null) return null;
+  return { time: source.snapTime, type: source.snapType };
+}
+var TIMELINE_SNAP_PX = 8;
+var TYPE_PRIORITY = {
+  playhead: 0,
+  "clip-edge": 1,
+  beat: 2
+};
+function collectTimelineSnapTargets(input) {
+  const byTime = /* @__PURE__ */ new Map();
+  const add = (time, type) => {
+    if (!Number.isFinite(time) || time < 0) return;
+    const rounded2 = Math.round(time * 1e3) / 1e3;
+    const existing = byTime.get(rounded2);
+    if (!existing || TYPE_PRIORITY[type] < TYPE_PRIORITY[existing.type]) {
+      byTime.set(rounded2, { time: rounded2, type });
+    }
+  };
+  for (const beat of input.beatTimes) add(beat, "beat");
+  for (const el of input.elements) {
+    if (input.excludeElementKey != null && (el.key ?? el.id) === input.excludeElementKey) continue;
+    add(el.start, "clip-edge");
+    add(el.start + el.duration, "clip-edge");
+  }
+  if (input.playheadTime != null && input.includePlayhead !== false)
+    add(input.playheadTime, "playhead");
+  return Array.from(byTime.values()).sort((a, b) => a.time - b.time);
+}
+function snapTimelineTime(time, targets, thresholdSecs) {
+  let best = null;
+  let bestDist = thresholdSecs;
+  for (const target of targets) {
+    const d = Math.abs(target.time - time);
+    if (d < bestDist || d === bestDist && best && TYPE_PRIORITY[target.type] < TYPE_PRIORITY[best.type]) {
+      bestDist = d;
+      best = target;
+    }
+  }
+  return best ? { time: best.time, target: best } : { time, target: null };
+}
+function snapMoveToTargets(start, duration, targets, pixelsPerSecond, timelineDuration2) {
+  if (targets.length === 0) return { start, snapTime: null, snapType: null };
+  const thresholdSecs = TIMELINE_SNAP_PX / Math.max(pixelsPerSecond, 1);
+  const startSnap = snapTimelineTime(start, targets, thresholdSecs);
+  const endSnap = snapTimelineTime(start + duration, targets, thresholdSecs);
+  const startMoved = startSnap.target !== null;
+  const endMoved = endSnap.target !== null;
+  let candidate = start;
+  let target = null;
+  if (startMoved && (!endMoved || Math.abs(startSnap.time - start) <= Math.abs(endSnap.time - (start + duration)))) {
+    candidate = startSnap.time;
+    target = startSnap.target;
+  } else if (endMoved) {
+    candidate = endSnap.time - duration;
+    target = endSnap.target;
+  }
+  const maxStart = Math.max(0, timelineDuration2 - duration);
+  const roundedCandidate = Math.round(candidate * 1e3) / 1e3;
+  const clamped = Math.max(0, Math.min(maxStart, roundedCandidate));
+  if (target && Math.abs(clamped - roundedCandidate) > 1e-6) target = null;
+  return { start: clamped, snapTime: target?.time ?? null, snapType: target?.type ?? null };
+}
+
 // src/player/components/timelineDragDrop.ts
 function applyJsonDropPayload(raw, pick, apply, placement) {
   try {
@@ -3358,12 +3426,20 @@ function resolveDropInsertRow(contentY, rowHeights, trackCount) {
   if (rowFloat >= trackCount) return null;
   return resolveInsertRow(rowFloat, trackCount);
 }
-function placeDrop(geometry, clientX, clientY, canInsertTrack) {
+function alignDropStart(placement, elements, pixelsPerSecond) {
+  const laneHasClips = placement.insertRow == null && elements.some((el) => el.track === placement.track);
+  if (!laneHasClips) return { ...placement, start: 0 };
+  if (!usePlayerStore.getState().timelineSnapEnabled) return placement;
+  const targets = collectTimelineSnapTargets({ elements, playheadTime: null, beatTimes: [] });
+  const threshold = TIMELINE_SNAP_PX / Math.max(pixelsPerSecond, 1);
+  return { ...placement, start: snapTimelineTime(placement.start, targets, threshold).time };
+}
+function placeDrop(geometry, elements, clientX, clientY, canInsertTrack) {
   const placement = resolveTimelineAssetDrop(geometry, clientX, clientY);
-  if (!canInsertTrack) return placement;
   const contentY = clientY - geometry.rectTop + geometry.scrollTop;
-  const insertRow = resolveDropInsertRow(contentY, geometry.rowHeights, geometry.trackOrder.length);
-  return insertRow == null ? placement : { ...placement, insertRow, trackOrder: geometry.trackOrder };
+  const insertRow = canInsertTrack ? resolveDropInsertRow(contentY, geometry.rowHeights, geometry.trackOrder.length) : null;
+  const aimed = insertRow == null ? placement : { ...placement, insertRow, trackOrder: geometry.trackOrder };
+  return alignDropStart(aimed, elements, geometry.pixelsPerSecond);
 }
 function invokeDropCallback(callback) {
   try {
@@ -3391,6 +3467,7 @@ function useTimelineAssetDrop({
   scrollRef,
   ppsRef,
   trackOrderRef,
+  elementsRef,
   rowGeometryRef,
   contentOrigin,
   onFileDrop,
@@ -3458,12 +3535,13 @@ function useTimelineAssetDrop({
           rowHeights: rowGeometryRef.current.rowHeights,
           trackOrder: trackOrderRef.current
         },
+        elementsRef.current,
         clientX,
         clientY,
         canInsertTrack
       );
     },
-    [scrollRef, ppsRef, trackOrderRef, rowGeometryRef, contentOrigin]
+    [scrollRef, ppsRef, trackOrderRef, elementsRef, rowGeometryRef, contentOrigin]
   );
   const handleAssetDragOver = useCallback6(
     (e) => {
@@ -3558,73 +3636,6 @@ function useTimelineAssetDrop({
 // src/player/components/useTimelineClipDrag.ts
 import { useRef as useRef7, useState as useState4, useCallback as useCallback7, useMemo as useMemo3, useEffect as useEffect7 } from "react";
 
-// src/player/components/timelineSnapping.ts
-function resolveSnapGuide(moving, trimming) {
-  const source = moving?.started ? moving : trimming;
-  if (source?.snapTime == null || source.snapType == null) return null;
-  return { time: source.snapTime, type: source.snapType };
-}
-var TIMELINE_SNAP_PX = 8;
-var TYPE_PRIORITY = {
-  playhead: 0,
-  "clip-edge": 1,
-  beat: 2
-};
-function collectTimelineSnapTargets(input) {
-  const byTime = /* @__PURE__ */ new Map();
-  const add = (time, type) => {
-    if (!Number.isFinite(time) || time < 0) return;
-    const rounded2 = Math.round(time * 1e3) / 1e3;
-    const existing = byTime.get(rounded2);
-    if (!existing || TYPE_PRIORITY[type] < TYPE_PRIORITY[existing.type]) {
-      byTime.set(rounded2, { time: rounded2, type });
-    }
-  };
-  for (const beat of input.beatTimes) add(beat, "beat");
-  for (const el of input.elements) {
-    if (input.excludeElementKey != null && (el.key ?? el.id) === input.excludeElementKey) continue;
-    add(el.start, "clip-edge");
-    add(el.start + el.duration, "clip-edge");
-  }
-  if (input.playheadTime != null && input.includePlayhead !== false)
-    add(input.playheadTime, "playhead");
-  return Array.from(byTime.values()).sort((a, b) => a.time - b.time);
-}
-function snapTimelineTime(time, targets, thresholdSecs) {
-  let best = null;
-  let bestDist = thresholdSecs;
-  for (const target of targets) {
-    const d = Math.abs(target.time - time);
-    if (d < bestDist || d === bestDist && best && TYPE_PRIORITY[target.type] < TYPE_PRIORITY[best.type]) {
-      bestDist = d;
-      best = target;
-    }
-  }
-  return best ? { time: best.time, target: best } : { time, target: null };
-}
-function snapMoveToTargets(start, duration, targets, pixelsPerSecond, timelineDuration2) {
-  if (targets.length === 0) return { start, snapTime: null, snapType: null };
-  const thresholdSecs = TIMELINE_SNAP_PX / Math.max(pixelsPerSecond, 1);
-  const startSnap = snapTimelineTime(start, targets, thresholdSecs);
-  const endSnap = snapTimelineTime(start + duration, targets, thresholdSecs);
-  const startMoved = startSnap.target !== null;
-  const endMoved = endSnap.target !== null;
-  let candidate = start;
-  let target = null;
-  if (startMoved && (!endMoved || Math.abs(startSnap.time - start) <= Math.abs(endSnap.time - (start + duration)))) {
-    candidate = startSnap.time;
-    target = startSnap.target;
-  } else if (endMoved) {
-    candidate = endSnap.time - duration;
-    target = endSnap.target;
-  }
-  const maxStart = Math.max(0, timelineDuration2 - duration);
-  const roundedCandidate = Math.round(candidate * 1e3) / 1e3;
-  const clamped = Math.max(0, Math.min(maxStart, roundedCandidate));
-  if (target && Math.abs(clamped - roundedCandidate) > 1e-6) target = null;
-  return { start: clamped, snapTime: target?.time ?? null, snapType: target?.type ?? null };
-}
-
 // src/player/components/timelineAuthoredMoveTarget.ts
 function canMoveTimelineElement(element) {
   return getTimelineEditCapabilities({
@@ -13033,6 +13044,7 @@ function useTimelineProviderState({
     scrollRef,
     ppsRef,
     trackOrderRef,
+    elementsRef: timelineElementsRef,
     rowGeometryRef,
     contentOrigin,
     onFileDrop: pinnedOnFileDrop,
@@ -32383,6 +32395,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 +32834,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 +32850,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 +32895,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 +32921,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 +32935,7 @@ function createManualOffsetDragMember(input) {
         selection: input.selection,
         element: input.element,
         initialOffset,
+        plainTranslate,
         baseGsap,
         initialPathOffset,
         gestureToken,
@@ -32610,6 +32951,7 @@ function createManualOffsetDragMember(input) {
       selection: input.selection,
       element: input.element,
       initialOffset,
+      plainTranslate,
       baseGsap,
       initialPathOffset,
       gestureToken,
@@ -32626,24 +32968,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 +32999,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 +33010,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 +33037,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 +33690,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 +33755,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 +33785,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 +33815,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;
@@ -33619,6 +33967,7 @@ var DomEditSaveQueueOpenError = class extends Error {
 function createDomEditSaveQueue(options = {}) {
   const failureThreshold = options.failureThreshold ?? DEFAULT_FAILURE_THRESHOLD;
   let tail = Promise.resolve();
+  let queuedCount = 0;
   let consecutiveFailures = 0;
   let breakerOpen = false;
   let drainError = null;
@@ -33657,13 +34006,14 @@ function createDomEditSaveQueue(options = {}) {
   return {
     enqueue(save) {
       if (breakerOpen) return Promise.reject(new DomEditSaveQueueOpenError());
+      queuedCount += 1;
       const queued = tail.catch(() => void 0).then(() => {
         if (breakerOpen) throw new DomEditSaveQueueOpenError();
         return run(save);
       });
       tail = queued.then(
-        () => void 0,
-        () => void 0
+        () => void (queuedCount -= 1),
+        () => void (queuedCount -= 1)
       );
       return queued;
     },
@@ -33675,6 +34025,7 @@ function createDomEditSaveQueue(options = {}) {
       if (drainError != null) return { status: "failed", error: drainError };
       return { status: "clean" };
     },
+    isIdle: () => queuedCount === 0,
     reset,
     destroy() {
       reset(false);
@@ -34185,7 +34536,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 +34726,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 +42488,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);
@@ -45044,12 +45135,13 @@ import { CornersIn, CornersOut, DotsThree, X as X2 } from "@phosphor-icons/react
 import { create as create6 } from "zustand";
 var useDockLayoutStore = create6((set, get) => ({
   controller: null,
+  panels: PANEL_IDS,
   openPanels: new Set(PANEL_IDS),
   visiblePanels: new Set(PANEL_IDS),
   activePanel: null,
   lastActive: {},
   pendingActivation: null,
-  attach: (controller) => set({ controller }),
+  attach: (controller, panels = PANEL_IDS) => set({ controller, panels }),
   detach: () => set({ controller: null, lastActive: {} }),
   sync: (snapshot3) => set((state) => {
     const lastActive = { ...state.lastActive };
@@ -45325,6 +45417,8 @@ var MIN_TIMELINE_H = 100;
 var MIN_SIDE_W = 200;
 var MIN_SIDE_W_FLOOR = 120;
 var DEFAULT_TIMELINE_H = 360;
+var DEFAULT_LEFT = ["compositions", "assets", "code", "catalog"];
+var DEFAULT_RIGHT = ["design", "layers", "renders", "variables"];
 function defaultSideWidths(viewportWidth) {
   const floor = sideMinimumWidth(viewportWidth);
   const left = Math.max(floor, Math.min(384, Math.round(viewportWidth * 0.257)));
@@ -45380,24 +45474,25 @@ function addRegisteredPanel(api, id, position) {
     ...position ? { position } : {}
   });
 }
-function buildEditLayout(api, viewportWidth) {
+function addSideColumn(api, ids, panels, direction) {
+  const [first, ...rest] = ids.filter((id) => panels.includes(id));
+  if (!first) return void 0;
+  addRegisteredPanel(api, first, { referencePanel: "preview", direction });
+  for (const id of rest)
+    addRegisteredPanel(api, id, { referencePanel: first, direction: "within" });
+  api.getPanel(first)?.api.setActive();
+  return first;
+}
+function buildEditLayout(api, viewportWidth, panels = PANEL_IDS) {
   api.clear();
   const widths = defaultSideWidths(viewportWidth);
   addRegisteredPanel(api, "preview");
   addRegisteredPanel(api, "timeline", { referencePanel: "preview", direction: "below" });
-  addRegisteredPanel(api, "compositions", { referencePanel: "preview", direction: "left" });
-  for (const id of ["assets", "code", "catalog"]) {
-    addRegisteredPanel(api, id, { referencePanel: "compositions", direction: "within" });
-  }
-  addRegisteredPanel(api, "design", { referencePanel: "preview", direction: "right" });
-  for (const id of ["layers", "renders", "variables"]) {
-    addRegisteredPanel(api, id, { referencePanel: "design", direction: "within" });
-  }
-  api.getPanel("compositions")?.api.setActive();
-  api.getPanel("design")?.api.setActive();
+  const left = addSideColumn(api, DEFAULT_LEFT, panels, "left");
+  const right = addSideColumn(api, DEFAULT_RIGHT, panels, "right");
   applySideMinimums(api, viewportWidth);
-  api.getPanel("compositions")?.group.api.setSize({ width: widths.left });
-  api.getPanel("design")?.group.api.setSize({ width: widths.right });
+  if (left) api.getPanel(left)?.group.api.setSize({ width: widths.left });
+  if (right) api.getPanel(right)?.group.api.setSize({ width: widths.right });
   api.getPanel("timeline")?.group.api.setSize({ height: DEFAULT_TIMELINE_H });
 }
 
@@ -45442,10 +45537,11 @@ function snapshot(api) {
     groupActivePanels
   };
 }
-function createController(api) {
+function createController(api, options) {
   const open = (id) => {
     if (api.getPanel(id)) return;
-    const { zone, reopen } = PANEL_DEFINITIONS[id];
+    const { zone, reopen: preferred } = PANEL_DEFINITIONS[id];
+    const reopen = zone === "center" || options.panels.includes(preferred.near) ? preferred : { near: "preview", direction: zone };
     const sibling = zone === "center" ? void 0 : panelsInZone(zone).find((other) => other !== id && api.getPanel(other));
     if (sibling) {
       addRegisteredPanel(api, id, { referencePanel: sibling, direction: "within" });
@@ -45467,11 +45563,12 @@ function createController(api) {
     },
     setTitle: (id, title) => api.getPanel(id)?.api.setTitle(title),
     setGroupVisible: (id, visible) => api.getPanel(id)?.group.api.setVisible(visible),
-    reset: () => buildEditLayout(api, window.innerWidth)
+    reset: () => buildEditLayout(api, options.dockWidth(), options.panels)
   };
 }
-function restoreOrBuild(api, projectId) {
-  const stored = readStudioUiPreferences(void 0, projectId).dockLayout;
+function restoreOrBuild(api, projectId, options) {
+  const { dockLayout } = readStudioUiPreferences(void 0, projectId, options.storageKey);
+  const stored = parseDockLayout(dockLayout, options.panels);
   if (stored) {
     try {
       api.fromJSON(stored);
@@ -45479,9 +45576,16 @@ function restoreOrBuild(api, projectId) {
     } catch {
     }
   }
-  buildEditLayout(api, window.innerWidth);
+  buildEditLayout(api, options.dockWidth(), options.panels);
 }
-function Root({ projectId, children }) {
+var windowWidth = () => window.innerWidth;
+function Root({
+  projectId,
+  panels = PANEL_IDS,
+  storageKey,
+  dockWidth = windowWidth,
+  children
+}) {
   const [slots, setSlots] = useState50({});
   const registerSlot = useCallback70((id, element) => {
     setSlots((prev) => {
@@ -45498,17 +45602,18 @@ function Root({ projectId, children }) {
   const onReady = useCallback70(
     ({ api }) => {
       disposeRef.current();
-      restoreOrBuild(api, projectId);
-      applySideMinimums(api);
+      const options = { panels, storageKey, dockWidth };
+      restoreOrBuild(api, projectId, options);
+      applySideMinimums(api, dockWidth());
       const root = api.groups[0]?.element.closest(".hf-dock");
       const disposeAccessibility = root ? installDockAccessibility(api, root) : () => {
       };
       const disposeTabFill = root ? installTabFill(api, root) : () => {
       };
-      const resizeObserver = new ResizeObserver(() => applySideMinimums(api, window.innerWidth));
+      const resizeObserver = new ResizeObserver(() => applySideMinimums(api, dockWidth()));
       if (root) resizeObserver.observe(root);
       const store = useDockLayoutStore.getState();
-      store.attach(createController(api));
+      store.attach(createController(api, options), panels);
       store.sync(snapshot(api));
       const pending2 = store.takePendingActivation();
       if (pending2) api.getPanel(pending2)?.api.setActive();
@@ -45516,7 +45621,7 @@ function Root({ projectId, children }) {
       const persist2 = () => {
         clearTimeout(timer);
         timer = setTimeout(() => {
-          writeStudioUiPreferences({ dockLayout: api.toJSON() }, void 0, projectId);
+          writeStudioUiPreferences({ dockLayout: api.toJSON() }, void 0, projectId, storageKey);
         }, PERSIST_DEBOUNCE_MS2);
       };
       const onDockChange = () => {
@@ -45525,11 +45630,11 @@ function Root({ projectId, children }) {
       };
       const subscriptions = [
         api.onDidAddPanel(() => {
-          applySideMinimums(api);
+          applySideMinimums(api, dockWidth());
           onDockChange();
         }),
         api.onDidMovePanel(() => {
-          applySideMinimums(api);
+          applySideMinimums(api, dockWidth());
           onDockChange();
         }),
         api.onDidRemovePanel(onDockChange),
@@ -45545,7 +45650,7 @@ function Root({ projectId, children }) {
         useDockLayoutStore.getState().detach();
       };
     },
-    [projectId]
+    [projectId, panels, storageKey, dockWidth]
   );
   return /* @__PURE__ */ jsxs71(SlotsContext.Provider, { value: { slots, registerSlot }, children: [
     /* @__PURE__ */ jsx101(
@@ -45580,6 +45685,7 @@ function Panel({ id, title, children }) {
 }
 function WindowMenu() {
   const openPanels = useDockLayoutStore((state) => state.openPanels);
+  const panels = useDockLayoutStore((state) => state.panels);
   const togglePanel = useDockLayoutStore((state) => state.togglePanel);
   const resetLayout = useDockLayoutStore((state) => state.resetLayout);
   const [open, setOpen] = useState50(false);
@@ -45610,7 +45716,7 @@ function WindowMenu() {
         role: "menu",
         className: "absolute right-0 top-8 z-50 w-44 rounded-md border border-neutral-800 bg-neutral-900 py-1 shadow-lg",
         children: [
-          PANEL_IDS.map((id) => /* @__PURE__ */ jsxs71(
+          panels.map((id) => /* @__PURE__ */ jsxs71(
             "button",
             {
               type: "button",
@@ -47838,7 +47944,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,
@@ -48988,6 +49094,13 @@ function inspectDrainFailures(results) {
   }
   return { firstFailure };
 }
+function focusedField() {
+  const active = document.activeElement;
+  return active instanceof HTMLElement && active.matches('input, textarea, select, [contenteditable="true"], [role="textbox"]') ? active : null;
+}
+function hasStudioPendingEdits() {
+  return pendingEditPromises.size > 0 || focusedField() !== null;
+}
 function trackStudioPendingEdit(result) {
   if (!result) return void 0;
   const promise = Promise.resolve(result);
@@ -48999,8 +49112,8 @@ function trackStudioPendingEdit(result) {
   return promise;
 }
 async function flushStudioPendingEdits() {
-  const active = document.activeElement;
-  if (active instanceof HTMLElement && active.matches('input, textarea, select, [contenteditable="true"], [role="textbox"]')) {
+  const active = focusedField();
+  if (active) {
     active.blur();
     await Promise.resolve();
     await waitForPostBlurEffects();
@@ -64921,7 +65034,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;
@@ -68027,6 +68140,60 @@ function useCaptionSync(projectId) {
 // src/hooks/usePersistentEditHistory.ts
 import { useCallback as useCallback97, useEffect as useEffect105, useMemo as useMemo65, useRef as useRef124, useState as useState104 } from "react";
 var EMPTY3 = { entries: [], back: null, forward: null };
+var OWN_ENTRIES_KEPT = 100;
+function createOwnHistory() {
+  const own = /* @__PURE__ */ new Map();
+  let next = null;
+  let changes = 0;
+  const remember = (id, files) => {
+    const known = own.get(id) ?? {};
+    for (const [path, { before, after }] of Object.entries(files)) {
+      known[path] = { before: known[path]?.before ?? before, after };
+    }
+    own.delete(id);
+    own.set(id, known);
+    if (own.size > OWN_ENTRIES_KEPT) own.delete(own.keys().next().value);
+  };
+  return {
+    remember,
+    overtake: () => {
+      changes += 1;
+      next = null;
+      return changes;
+    },
+    offered: (seen, view) => {
+      if (seen === changes) next = { undo: view.back, redo: view.forward };
+    },
+    changes: () => changes,
+    stepped: (entry2) => {
+      const undone = entry2.undoes ? own.get(entry2.undoes) : void 0;
+      if (!undone) return;
+      const swapped = Object.entries(undone).map(([path, f]) => [
+        path,
+        { before: f.after, after: f.before }
+      ]);
+      remember(entry2.id, Object.fromEntries(swapped));
+    },
+    afterOf: (id) => Object.fromEntries(Object.entries(id && own.get(id) || {}).map(([p, f]) => [p, f.after])),
+    predict: (direction) => {
+      const step = next?.[direction];
+      const files = step ? own.get(step.id) : void 0;
+      const paths = files ? Object.keys(files) : [];
+      if (!files || paths.length !== step.paths.length || !paths.every((p) => step.paths.includes(p)))
+        return null;
+      const restore = paths.map((path) => [
+        path,
+        { previous: files[path].after, restored: files[path].before }
+      ]);
+      return { id: step.id, files: Object.fromEntries(restore) };
+    },
+    clear: () => {
+      own.clear();
+      next = null;
+      changes += 1;
+    }
+  };
+}
 var DEFAULT_COALESCE_MS = 300;
 function historyUrl(projectId, path = "") {
   return `/api/projects/${encodeURIComponent(projectId)}/history${path}`;
@@ -68045,10 +68212,11 @@ async function post(url, body, headers = {}) {
   return { ok: false, status: response.status, error: reply?.error ?? `HTTP ${response.status}` };
 }
 function claimHeld(reply, label) {
-  if (reply.ok) return Boolean(reply.body?.claimed);
+  if (reply.ok)
+    return reply.body?.claimed?.id ?? null;
   if (reply.status !== 404)
     console.error(`"${label}" was not recorded as your edit: ${reply.error}`);
-  return false;
+  return null;
 }
 async function overwroteVersions(files) {
   const pairs = await Promise.all(
@@ -68086,38 +68254,47 @@ function usePersistentEditHistory({ projectId }) {
   const heldClaimRef = useRef124(null);
   const projectIdRef = useRef124(projectId);
   projectIdRef.current = projectId;
+  const [own] = useState104(createOwnHistory);
   const refresh = useCallback97(async () => {
     if (!projectId) return;
+    const seen = own.changes();
     const response = await fetch(historyUrl(projectId)).catch(() => null);
     const next = response?.ok ? await response.json() : EMPTY3;
-    if (projectIdRef.current === projectId) setView(next);
-  }, [projectId]);
+    if (projectIdRef.current !== projectId) return;
+    setView(next);
+    own.offered(seen, next);
+  }, [projectId, own]);
   useEffect105(() => {
     setView(EMPTY3);
     setLoaded(false);
     heldClaimRef.current = null;
+    own.clear();
     void refresh().finally(() => setLoaded(true));
-  }, [refresh]);
+  }, [refresh, own]);
   const recordEdit = useCallback97(
     async ({ label, coalesceKey, coalesceMs, files }) => {
       if (!projectId) return;
       const paths = Object.keys(files);
+      own.overtake();
       const reply = await post(historyUrl(projectId, "/claim"), {
         label,
         paths,
         overwrote: await overwroteVersions(files),
         ...coalesceKey && { coalesceKey, idleMs: coalesceMs ?? DEFAULT_COALESCE_MS }
       });
-      heldClaimRef.current = claimHeld(reply, label) && coalesceKey ? { paths, at: Date.now() } : null;
+      const claimed = claimHeld(reply, label);
+      if (claimed) own.remember(claimed, files);
+      heldClaimRef.current = claimed && coalesceKey ? { paths, at: Date.now() } : null;
       void refresh();
     },
-    [projectId, refresh]
+    [projectId, refresh, own]
   );
   const step = useCallback97(
     async (direction, callbacks) => {
       if (!projectId) return { ok: false, reason: "empty" };
       const next = direction === "undo" ? view.back : view.forward;
       const paths = [.../* @__PURE__ */ new Set([...next?.paths ?? [], ...heldClaimRef.current?.paths ?? []])];
+      own.overtake();
       const run = async () => {
         const previous = await readAll(paths, callbacks.readFile);
         const posted = await post(
@@ -68135,18 +68312,28 @@ function usePersistentEditHistory({ projectId }) {
           return { ok: false, reason: "content-mismatch", paths: files };
         }
         if (!reply.entry) return { ok: false, reason: "empty" };
+        own.stepped(reply.entry);
         const changed = reply.entry.files.map((file) => file.path);
         return {
           ok: true,
           label: reply.entry.label,
+          undoes: reply.entry.undoes,
           paths: changed,
-          files: await restoredFiles(changed, previous, callbacks.readFile)
+          files: await restoredFiles(
+            changed,
+            { ...own.afterOf(reply.entry.undoes), ...previous },
+            callbacks.readFile
+          )
         };
       };
       return callbacks.serialize ? callbacks.serialize(paths, run) : run();
     },
-    [projectId, view, refresh]
+    [projectId, view, refresh, own]
   );
+  const noteOutsideChange = useCallback97(() => {
+    own.overtake();
+    void refresh();
+  }, [own, refresh]);
   const undo = useCallback97((callbacks) => step("undo", callbacks), [step]);
   const redo = useCallback97((callbacks) => step("redo", callbacks), [step]);
   const state = useMemo65(() => {
@@ -68168,7 +68355,9 @@ function usePersistentEditHistory({ projectId }) {
     state,
     recordEdit,
     undo,
-    redo
+    redo,
+    predict: own.predict,
+    noteOutsideChange
   };
 }
 
@@ -68934,6 +69123,7 @@ function useFileManager({
 import { useCallback as useCallback103, useRef as useRef129, useState as useState107 } from "react";
 
 // src/utils/gsapUndoRestore.ts
+import { isCompositionTemplate as isCompositionTemplate2 } from "@hyperframes/parsers/hf-ids";
 function elementIdentityKey(el) {
   const hfId = el.getAttribute("data-hf-id");
   if (hfId) return `hf:${hfId}`;
@@ -68942,9 +69132,9 @@ function elementIdentityKey(el) {
   return null;
 }
 var IDENTITY_SELECTOR = "[id], [data-hf-id]";
-function identityElementMap(doc) {
+function identityElementMap(root) {
   const map = /* @__PURE__ */ new Map();
-  for (const el of doc.querySelectorAll(IDENTITY_SELECTOR)) {
+  for (const el of root.querySelectorAll(IDENTITY_SELECTOR)) {
     const key2 = elementIdentityKey(el);
     if (!key2) continue;
     if (map.has(key2)) return null;
@@ -68952,8 +69142,18 @@ function identityElementMap(doc) {
   }
   return map;
 }
-function normalizeSoftResidual(doc) {
-  for (const el of doc.querySelectorAll(IDENTITY_SELECTOR)) {
+function parseRestoreSource(html2) {
+  const doc = new DOMParser().parseFromString(html2, "text/html");
+  for (const template of Array.from(doc.querySelectorAll("template")).filter(
+    isCompositionTemplate2
+  )) {
+    template.replaceWith(template.content);
+  }
+  return doc;
+}
+function normalizeSoftResidual(root) {
+  const self = root.matches(IDENTITY_SELECTOR) ? [root] : [];
+  for (const el of [...self, ...root.querySelectorAll(IDENTITY_SELECTOR)]) {
     const id = el.getAttribute("id");
     const hfId = el.getAttribute("data-hf-id");
     for (const name of [...el.getAttributeNames()]) {
@@ -68962,7 +69162,7 @@ function normalizeSoftResidual(doc) {
     if (id) el.setAttribute("id", id);
     if (hfId) el.setAttribute("data-hf-id", hfId);
   }
-  for (const script of findGsapScriptElements(doc)) script.textContent = "";
+  for (const script of findGsapScriptElements(root)) script.textContent = "";
 }
 function attributesEqual(a, b) {
   const aNames = a.getAttributeNames();
@@ -68972,15 +69172,7 @@ function attributesEqual(a, b) {
   }
   return true;
 }
-function diffSoftReloadableRestore(previous, restored) {
-  let prevDoc;
-  let nextDoc;
-  try {
-    prevDoc = new DOMParser().parseFromString(previous, "text/html");
-    nextDoc = new DOMParser().parseFromString(restored, "text/html");
-  } catch {
-    return null;
-  }
+function diffRestoreDocs(prevDoc, nextDoc) {
   const prevByKey = identityElementMap(prevDoc);
   const nextByKey = identityElementMap(nextDoc);
   if (!prevByKey || !nextByKey) return null;
@@ -68991,10 +69183,12 @@ function diffSoftReloadableRestore(previous, restored) {
     if (!prevEl || prevEl.tagName !== nextEl.tagName) return null;
     if (!attributesEqual(prevEl, nextEl)) changedElementKeys.push(key2);
   }
-  normalizeSoftResidual(prevDoc);
-  normalizeSoftResidual(nextDoc);
-  if (prevDoc.documentElement.outerHTML !== nextDoc.documentElement.outerHTML) return null;
-  return { changedElementKeys };
+  const [prevRest, nextRest] = [prevDoc, nextDoc].map((doc) => {
+    const root = doc.documentElement.cloneNode(true);
+    normalizeSoftResidual(root);
+    return root.outerHTML;
+  });
+  return prevRest === nextRest ? changedElementKeys : null;
 }
 function syncElementAttributes(target, source) {
   for (const name of [...target.getAttributeNames()]) {
@@ -69013,16 +69207,84 @@ function syncStaleEditMarks(doc, restored) {
     }
   }
 }
-function readGsapScriptTexts(html2) {
-  const doc = new DOMParser().parseFromString(html2, "text/html");
-  return findGsapScriptElements(doc).map((script) => script.textContent ?? "");
-}
-function hasAmbiguousGsapScriptChange(previous, restored) {
-  const previousScripts = readGsapScriptTexts(previous);
-  const restoredScripts = readGsapScriptTexts(restored);
+function hasAmbiguousGsapScriptChange(previousScripts, restoredScripts) {
   if (previousScripts.length <= 1 && restoredScripts.length <= 1) return false;
   return previousScripts.length !== restoredScripts.length || previousScripts.some((script, index) => script !== restoredScripts[index]);
 }
+function restoreScripted(prevDoc, nextDoc, isActive) {
+  const [before, after] = [prevDoc, nextDoc].map(
+    (doc) => findGsapScriptElements(doc).map((script) => script.textContent ?? "")
+  );
+  const scripted = before.length > 0 || after.length > 0;
+  if (scripted && !isActive) return null;
+  return hasAmbiguousGsapScriptChange(before, after) ? null : scripted;
+}
+function liveScopes(doc, path, isActive) {
+  if (isActive) return [doc];
+  return Array.from(doc.querySelectorAll(`[data-composition-file="${CSS.escape(path)}"]`));
+}
+function scopeTargets(scope, keys, restoredByKey) {
+  const liveByKey = identityElementMap(scope);
+  if (!liveByKey) return null;
+  const targets = [];
+  for (const key2 of keys) {
+    const live = liveByKey.get(key2);
+    const restored = restoredByKey.get(key2);
+    if (!live || !restored || live.hasAttribute("data-hf-inner-root")) return null;
+    targets.push({ live, restored });
+  }
+  return targets;
+}
+function fileTargets(doc, path, isActive, file) {
+  const prevDoc = parseRestoreSource(file.previous);
+  const nextDoc = parseRestoreSource(file.restored);
+  const scripted = restoreScripted(prevDoc, nextDoc, isActive);
+  if (scripted === null) return null;
+  const keys = diffRestoreDocs(prevDoc, nextDoc);
+  const restoredByKey = identityElementMap(nextDoc);
+  if (!keys || !restoredByKey) return null;
+  const found = liveScopes(doc, path, isActive).map(
+    (scope) => scopeTargets(scope, keys, restoredByKey)
+  );
+  if (!found.length || found.includes(null)) return null;
+  return { targets: found.flat(), scripted };
+}
+function planRestoreTargets(doc, activeDocPath, files) {
+  const plan = { targets: [], scripted: false };
+  for (const [path, file] of Object.entries(files)) {
+    const found = fileTargets(doc, path, path === activeDocPath, file);
+    if (!found) return null;
+    plan.targets.push(...found.targets);
+    plan.scripted ||= found.scripted;
+  }
+  return plan;
+}
+function finalizeInPlace(iframe, win, currentTime) {
+  if (applySoftReloadFinalization(iframe, currentTime)) return true;
+  try {
+    win.__player?.seek?.(currentTime);
+    win.__hfStudioManualEditsApply?.();
+    return true;
+  } catch {
+    return false;
+  }
+}
+function showRestoreInPlace(iframe, activeCompPath, files, currentTime) {
+  const doc = iframe?.contentDocument;
+  const win = iframe?.contentWindow;
+  const plan = doc && win ? planRestoreTargets(doc, activeCompPath ?? "index.html", files) : null;
+  if (!iframe || !win || !plan || plan.scripted) return null;
+  const before = plan.targets.map(({ live }) => [live, live.cloneNode(false)]);
+  for (const { live, restored } of plan.targets) syncElementAttributes(live, restored);
+  const putBack = (time) => {
+    if (iframe.contentDocument !== doc) return false;
+    for (const [live, attributes] of before) syncElementAttributes(live, attributes);
+    return finalizeInPlace(iframe, win, time);
+  };
+  if (finalizeInPlace(iframe, win, currentTime)) return putBack;
+  putBack(currentTime);
+  return null;
+}
 function applyUndoRestoreToPreview(iframe, activeCompPath, files, currentTime, reload) {
   const activeDocPath = activeCompPath ?? "index.html";
   const paths = files ? Object.keys(files) : [];
@@ -69030,51 +69292,23 @@ function applyUndoRestoreToPreview(iframe, activeCompPath, files, currentTime, r
     markScenesStale(iframe, paths);
     reload();
   };
-  if (!iframe || !files || paths.length !== 1 || paths[0] !== activeDocPath) {
-    reloadPreview();
-    return "full";
-  }
-  const doc = iframe.contentDocument;
-  const win = iframe.contentWindow;
-  if (!doc || !win) {
-    reloadPreview();
-    return "full";
-  }
-  const { previous, restored } = files[activeDocPath];
-  const diff = diffSoftReloadableRestore(previous, restored);
-  if (!diff) {
-    reloadPreview();
-    return "full";
-  }
-  if (hasAmbiguousGsapScriptChange(previous, restored)) {
-    reloadPreview();
-    return "full";
-  }
-  const liveByKey = identityElementMap(doc);
-  const restoredByKey = identityElementMap(new DOMParser().parseFromString(restored, "text/html"));
-  if (!liveByKey || !restoredByKey) {
+  const doc = iframe?.contentDocument;
+  const win = iframe?.contentWindow;
+  const plan = doc && files && win ? planRestoreTargets(doc, activeDocPath, files) : null;
+  if (!iframe || !doc || !files || !win || !plan) {
     reloadPreview();
     return "full";
   }
-  const changedTargets = [];
-  for (const key2 of diff.changedElementKeys) {
-    const liveEl = liveByKey.get(key2);
-    const restoredEl = restoredByKey.get(key2);
-    if (!liveEl || !restoredEl) {
-      reloadPreview();
-      return "full";
-    }
-    changedTargets.push({ live: liveEl, restored: restoredEl });
-  }
-  for (const target of changedTargets) syncElementAttributes(target.live, target.restored);
-  const restoredScript = extractGsapScriptText(restored);
-  const previousScript = extractGsapScriptText(previous);
+  for (const target of plan.targets) syncElementAttributes(target.live, target.restored);
+  const active = files[activeDocPath];
+  const restoredScript = active ? extractGsapScriptText(active.restored) : null;
+  const previousScript = active ? extractGsapScriptText(active.previous) : null;
   if (restoredScript && restoredScript !== previousScript) {
-    syncStaleEditMarks(doc, restored);
+    syncStaleEditMarks(doc, active.restored);
     const result = applySoftReload(iframe, restoredScript, {
       onAsyncFailure: reloadPreview,
       currentTimeOverride: currentTime,
-      authoredHtml: restored
+      authoredHtml: active.restored
     });
     if (result === "cannot-soft-reload") {
       reloadPreview();
@@ -69082,15 +69316,9 @@ function applyUndoRestoreToPreview(iframe, activeCompPath, files, currentTime, r
     }
     return "soft";
   }
-  if (applySoftReloadFinalization(iframe, currentTime)) return "soft";
-  try {
-    win.__player?.seek?.(currentTime);
-    win.__hfStudioManualEditsApply?.();
-  } catch {
-    reloadPreview();
-    return "full";
-  }
-  return "soft";
+  if (finalizeInPlace(iframe, win, currentTime)) return "soft";
+  reloadPreview();
+  return "full";
 }
 
 // src/player/lib/automationStoreSync.ts
@@ -69274,6 +69502,20 @@ function usePreviewPersistence({
     },
     [previewIframeRef, activeCompPathRef, reloadPreview]
   );
+  const showHistoryRestoreNow = useCallback103(
+    (files) => {
+      if (!domEditSaveQueueRef.current?.isIdle() || hasStudioPendingEdits()) return null;
+      const iframe = previewIframeRef.current;
+      const now2 = () => usePlayerStore.getState().currentTime;
+      const putBack = showRestoreInPlace(iframe, activeCompPathRef.current, files, now2());
+      if (!putBack) return null;
+      return () => {
+        if (putBack(now2())) syncStoredAutomationFromPreview(iframe?.contentDocument ?? null);
+        else void syncHistoryPreviewAfterApply({ paths: Object.keys(files) });
+      };
+    },
+    [previewIframeRef, activeCompPathRef, syncHistoryPreviewAfterApply]
+  );
   useMountEffect(() => {
     void clearLegacyStudioMotionFile(_readOptionalProjectFile, _writeProjectFile);
   });
@@ -69288,7 +69530,8 @@ function usePreviewPersistence({
     resetDomEditSaveQueueBreaker,
     applyCurrentStudioManualEditsToPreview,
     applyStudioManualEditsToPreview,
-    syncHistoryPreviewAfterApply
+    syncHistoryPreviewAfterApply,
+    showHistoryRestoreNow
   };
 }
 
@@ -73716,10 +73959,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 +73981,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 +74094,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 +74131,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 +74143,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 +74160,6 @@ function useDomEditTextCommits({
       activeCompPath,
       applyDomSelection,
       buildDomSelectionFromTarget,
-      domEditSelection,
       persistDomEditOperations,
       previewIframeRef,
       showToast
@@ -74122,9 +74377,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 +77877,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 +77944,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(
@@ -79519,14 +79797,18 @@ function useStudioExternalFileChanges({
   fileManager,
   previewPersistence,
   pendingTimelineEditPathRef,
-  reloadPreview
+  reloadPreview,
+  onOutsideChange
 }) {
   const { flushPendingSourceSave, discardPendingSourceSave } = fileManager;
   const { drainPendingDomEditSaves, resetDomEditSaveQueueBreaker } = previewPersistence;
   const bumpThumbnailRevisions = usePlayerStore((state) => state.bumpThumbnailRevisions);
   const onAcceptedPersistedFileChange = useCallback143(
-    (_path, affectedCompositions) => bumpThumbnailRevisions(affectedCompositions),
-    [bumpThumbnailRevisions]
+    (_path, affectedCompositions) => {
+      onOutsideChange?.();
+      bumpThumbnailRevisions(affectedCompositions);
+    },
+    [bumpThumbnailRevisions, onOutsideChange]
   );
   const drainPendingChanges = useCallback143(async () => {
     const source = await flushPendingSourceSave();
@@ -80093,6 +80375,7 @@ function useEditHistoryActions({
   writeProjectFile,
   showToast,
   syncHistoryPreviewAfterApply,
+  showHistoryRestoreNow,
   waitForPendingDomEditSaves,
   onAfterUndoRedo,
   activeCompPath,
@@ -80109,11 +80392,20 @@ function useEditHistoryActions({
   const apply = useCallback145(
     async (direction) => {
       const noun = direction === "undo" ? "Undo" : "Redo";
-      await waitForPendingDomEditSaves();
-      const result = await editHistory[direction]({
-        readFile: readHistoryFile,
-        serialize: serializeHistoryFiles
-      });
+      const predicted = editHistory.predict?.(direction) ?? null;
+      const putBack = predicted ? showHistoryRestoreNow?.(predicted.files) ?? null : null;
+      let result = { ok: false, reason: "failed" };
+      let serverSteppedShown = false;
+      try {
+        await waitForPendingDomEditSaves();
+        result = await editHistory[direction]({
+          readFile: readHistoryFile,
+          serialize: serializeHistoryFiles
+        });
+        serverSteppedShown = Boolean(putBack && result.ok && result.label) && result.undoes === predicted?.id;
+      } finally {
+        if (putBack && !serverSteppedShown) putBack();
+      }
       if (!result.ok && result.reason === "content-mismatch") {
         showToast(
           `Can't ${direction}: ${result.paths?.join(", ")} changed since that edit.`,
@@ -80126,7 +80418,8 @@ function useEditHistoryActions({
         return;
       }
       if (result.ok && result.label) {
-        const restore = { paths: result.paths, files: result.files };
+        const files = serverSteppedShown ? fromShown(result.files, predicted.files) : result.files;
+        const restore = { paths: result.paths, files };
         onAfterUndoRedo?.(restore);
         if (activeCompPath && result.paths?.includes(activeCompPath)) {
           forceReloadSdkSession?.();
@@ -80140,6 +80433,7 @@ function useEditHistoryActions({
       readHistoryFile,
       showToast,
       syncHistoryPreviewAfterApply,
+      showHistoryRestoreNow,
       waitForPendingDomEditSaves,
       serializeHistoryFiles,
       onAfterUndoRedo,
@@ -80151,6 +80445,15 @@ function useEditHistoryActions({
   const redo = useCallback145(() => apply("redo"), [apply]);
   return useMemo71(() => ({ undo, redo }), [undo, redo]);
 }
+function fromShown(files, shown2) {
+  if (!files) return files;
+  return Object.fromEntries(
+    Object.entries(files).map(([path, f]) => [
+      path,
+      { previous: shown2[path]?.restored ?? f.previous, restored: f.restored }
+    ])
+  );
+}
 
 // src/hooks/useAppHotkeys.ts
 function iframeContentWindow(iframe) {
@@ -80166,9 +80469,9 @@ function safeAddListener(t, type, h, capture = false) {
   } catch {
   }
 }
-function safeRemoveListener(t, type, h) {
+function safeRemoveListener(t, type, h, capture = false) {
   try {
-    t?.removeEventListener(type, h);
+    t?.removeEventListener(type, h, capture);
   } catch {
   }
 }
@@ -80195,6 +80498,7 @@ function useAppHotkeys({
   writeProjectFile,
   showToast,
   syncHistoryPreviewAfterApply,
+  showHistoryRestoreNow,
   waitForPendingDomEditSaves,
   handleCopy: handleCopy2,
   handlePaste: handlePaste2,
@@ -80218,6 +80522,7 @@ function useAppHotkeys({
     writeProjectFile,
     showToast,
     syncHistoryPreviewAfterApply,
+    showHistoryRestoreNow,
     waitForPendingDomEditSaves,
     onAfterUndoRedo,
     activeCompPath,
@@ -80274,38 +80579,17 @@ function useAppHotkeys({
     window.addEventListener("keydown", handleAppKeyDown, true);
     return () => window.removeEventListener("keydown", handleAppKeyDown, true);
   }, [handleAppKeyDown]);
-  const handleHistoryHotkey = useCallback146((event) => {
-    if (!(event.metaKey || event.ctrlKey) || shouldIgnoreHistoryShortcut(event.target)) return;
-    handleUndoRedoKey(
-      event,
-      () => void cbRef.current.handleUndo(),
-      () => void cbRef.current.handleRedo()
-    );
-  }, []);
   const syncPreviewHotkeys = useCallback146(
     (iframe) => {
       previewHistoryCleanupRef.current?.();
       previewHistoryCleanupRef.current = null;
       const win = iframeContentWindow(iframe);
-      let doc = null;
-      try {
-        doc = iframe?.contentDocument ?? null;
-      } catch {
-        doc = null;
-      }
-      if (!win && !doc) return;
-      const handler = handleHistoryHotkey;
+      if (!win) return;
       const appHandler = handleAppKeyDown;
-      safeAddListener(win, "keydown", handler, true);
       safeAddListener(win, "keydown", appHandler, true);
-      doc?.addEventListener("keydown", handleHistoryHotkey, true);
-      previewHistoryCleanupRef.current = () => {
-        safeRemoveListener(win, "keydown", handler);
-        safeRemoveListener(win, "keydown", appHandler);
-        doc?.removeEventListener("keydown", handleHistoryHotkey, true);
-      };
+      previewHistoryCleanupRef.current = () => safeRemoveListener(win, "keydown", appHandler, true);
     },
-    [handleAppKeyDown, handleHistoryHotkey]
+    [handleAppKeyDown]
   );
   useEffect121(
     () => () => {
@@ -91691,7 +91975,8 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     fileManager,
     previewPersistence,
     pendingTimelineEditPathRef,
-    reloadPreview
+    reloadPreview,
+    onOutsideChange: editHistory.noteOutsideChange
   });
   const invalidateGsapCacheRef = useRef181(() => {
   });
@@ -91793,6 +92078,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     writeProjectFile: fileManager.writeProjectFile,
     showToast,
     syncHistoryPreviewAfterApply: previewPersistence.syncHistoryPreviewAfterApply,
+    showHistoryRestoreNow: previewPersistence.showHistoryRestoreNow,
     waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
     handleCopy: handleCopy2,
     handlePaste: handlePaste2,
@@ -92681,6 +92967,7 @@ export {
   ConnectedDomEditOverlay,
   ContextMenu,
   DEFAULT_SHORTCUT_SECTIONS,
+  Dock,
   DomEditOverlay,
   DomEditProvider,
   EditorShell,
@@ -92776,6 +93063,7 @@ export {
   snapEngagedForTravel,
   useClipboard,
   useCompositionStack,
+  useDockLayoutStore,
   useDomEditSelectionContext,
   useDomEditSession,
   useDomGeometryCommit,