@hyperframes/studio 0.7.102 → 0.7.104

package/dist/index.js

@@ -1134,7 +1134,7 @@ var usePlayerStore = create2((set, get) => ({
   motionPathCreateAvailable: false,
   setMotionPathCreateAvailable: (available) => set({ motionPathCreateAvailable: available }),
   autoKeyframeEnabled: true,
-  setAutoKeyframeEnabled: (enabled2) => set({ autoKeyframeEnabled: enabled2 }),
+  setAutoKeyframeEnabled: (enabled) => set({ autoKeyframeEnabled: enabled }),
   selectedElementIds: /* @__PURE__ */ new Set(),
   setSelection: (ids, anchor) => set(resolveElementSelection(ids, anchor)),
   addSelectedElementId: (id) => set((s) => {
@@ -1228,14 +1228,14 @@ var usePlayerStore = create2((set, get) => ({
     writeStudioUiPreferences({ audioMuted: muted });
     set({ audioMuted: muted });
   },
-  setLoopEnabled: (enabled2) => set({ loopEnabled: enabled2 }),
+  setLoopEnabled: (enabled) => set({ loopEnabled: enabled }),
   setZoomMode: (mode) => set({ zoomMode: mode }),
   clearSelectedElementIds: () => set({ selectedElementIds: /* @__PURE__ */ new Set() }),
   setSelectedElementIds: (ids) => set({ selectedElementIds: new Set(ids) }),
   timelineSnapEnabled: readStudioUiPreferences().timelineSnapEnabled ?? true,
-  setTimelineSnapEnabled: (enabled2) => {
-    writeStudioUiPreferences({ timelineSnapEnabled: enabled2 });
-    set({ timelineSnapEnabled: enabled2 });
+  setTimelineSnapEnabled: (enabled) => {
+    writeStudioUiPreferences({ timelineSnapEnabled: enabled });
+    set({ timelineSnapEnabled: enabled });
   },
   timeDisplayMode: readStudioUiPreferences().timeDisplayMode ?? "time",
   setTimeDisplayMode: (mode) => {
@@ -1552,13 +1552,13 @@ function isAutomatedBrowser() {
   return navigator.webdriver === true;
 }
 var decisions = /* @__PURE__ */ new Map();
-var forcedOutcome = (enabled2) => ({
-  enabled: enabled2,
-  reason: enabled2 ? "forced_on" : "forced_off"
+var forcedOutcome = (enabled) => ({
+  enabled,
+  reason: enabled ? "forced_on" : "forced_off"
 });
-var cohortOutcome = (enabled2) => ({
-  enabled: enabled2,
-  reason: enabled2 ? "in_cohort" : "out_of_cohort"
+var cohortOutcome = (enabled) => ({
+  enabled,
+  reason: enabled ? "in_cohort" : "out_of_cohort"
 });
 function decideStudioCanary(name) {
   const definition = findCanary(name);
@@ -1589,8 +1589,8 @@ function resolveCanary(name) {
 function canaryEventProperties() {
   return canaryFeatureProperties(
     CANARIES.map((c) => {
-      const { enabled: enabled2, reason } = resolveCanary(c.name);
-      return { name: c.name, enabled: enabled2, reason };
+      const { enabled, reason } = resolveCanary(c.name);
+      return { name: c.name, enabled, reason };
     })
   );
 }
@@ -11932,6 +11932,45 @@ function patchDocumentRootDuration(doc, contentEnd) {
   return true;
 }
 
+// src/utils/studioFileVersion.ts
+var WRITE_TOKEN_TTL_MS = 5 * 6e4;
+var studioWriteTokens = /* @__PURE__ */ new Map();
+function pruneStudioWriteTokens(now2) {
+  for (const [token, createdAt] of studioWriteTokens) {
+    if (now2 - createdAt >= WRITE_TOKEN_TTL_MS) studioWriteTokens.delete(token);
+  }
+}
+function markStudioWriteToken(token, now2 = Date.now()) {
+  pruneStudioWriteTokens(now2);
+  studioWriteTokens.set(token, now2);
+}
+function consumeStudioWriteToken(token, now2 = Date.now()) {
+  pruneStudioWriteTokens(now2);
+  if (!token || !studioWriteTokens.has(token)) return false;
+  studioWriteTokens.delete(token);
+  return true;
+}
+async function studioFileContentVersion(content) {
+  const bytes = new TextEncoder().encode(content);
+  const digest = await globalThis.crypto.subtle.digest("SHA-256", bytes);
+  const hex = Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, "0")).join(
+    ""
+  );
+  return `"sha256:${hex}"`;
+}
+async function studioExpectedFileVersion(versions, path, expectedContent) {
+  if (expectedContent !== void 0) return studioFileContentVersion(expectedContent);
+  return versions.get(path);
+}
+function createStudioWriteToken() {
+  return globalThis.crypto.randomUUID();
+}
+function studioWriteHeaders() {
+  const token = createStudioWriteToken();
+  markStudioWriteToken(token);
+  return { "X-Hyperframes-Write-Token": token };
+}
+
 // src/hooks/timelineTimingSync.ts
 var GsapPreviewConvergenceError = class extends Error {
 };
@@ -11973,6 +12012,8 @@ async function rollbackOwnedMutation(projectId, targetPath, expected, restore) {
     `/api/projects/${encodeURIComponent(projectId)}/gsap-mutation-rollback/${encodeURIComponent(targetPath)}`,
     {
       method: "POST",
+      // Deliberately unclaimed: a rollback runs because a mutation did not
+      // converge, so let the restored file reload the preview.
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ expected, restore })
     }
@@ -12031,7 +12072,7 @@ async function postGsapMutation(projectId, filePath, mutation, fallback) {
       `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations/${encodeURIComponent(filePath)}`,
       {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
         body: JSON.stringify(mutation)
       }
     );
@@ -15791,7 +15832,7 @@ var TrackGapContextMenu = memo13(function TrackGapContextMenu2({
   const overflowY = y + menuHeight - window.innerHeight;
   const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
   const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
-  const itemClass = (enabled2) => `w-full flex items-center justify-between px-3 py-1.5 text-xs text-left ${enabled2 ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer" : "text-neutral-600 cursor-not-allowed"}`;
+  const itemClass = (enabled) => `w-full flex items-center justify-between px-3 py-1.5 text-xs text-left ${enabled ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer" : "text-neutral-600 cursor-not-allowed"}`;
   const closeGapTitle = canCloseGap ? void 0 : gapWidth == null ? "No gap here" : "A clip on this track can't be moved";
   const closeAllTitle = canCloseAllGaps ? void 0 : hasAnyGaps ? "A clip on this track can't be moved" : "No gaps on this track";
   return createPortal4(
@@ -17911,7 +17952,7 @@ function extractTimelineVirtualRowSeed(count, pinnedRowIndexes) {
   return [...indexes].sort((left, right) => left - right);
 }
 function useTimelineVirtualRows({
-  enabled: enabled2,
+  enabled,
   scrollRef,
   viewport,
   rowGeometry,
@@ -17944,7 +17985,7 @@ function useTimelineVirtualRows({
   );
   const initialOffset = useCallback19(() => viewport.scrollTop, [viewport.scrollTop]);
   const virtualizer = useVirtualizer({
-    enabled: enabled2 && viewportReady,
+    enabled: enabled && viewportReady,
     useFlushSync: false,
     count: rowGeometry.rowKeys.length,
     getScrollElement: () => scrollRef.current,
@@ -17957,20 +17998,20 @@ function useTimelineVirtualRows({
     initialOffset
   });
   useEffect22(() => {
-    if (!enabled2 || !viewportReady) return;
+    if (!enabled || !viewportReady) return;
     virtualizer.measure();
     scrollRef.current?.dispatchEvent(new Event("scroll"));
-  }, [enabled2, scrollRef, sessionEpoch, viewportReady, virtualizer]);
+  }, [enabled, scrollRef, sessionEpoch, viewportReady, virtualizer]);
   const focusedRowIndex = focusedRowKey === void 0 ? -1 : rowGeometry.getRowIndex(focusedRowKey);
   const focusedRowHeight = focusedRowIndex < 0 ? 0 : rowGeometry.getRowHeight(focusedRowIndex);
   useEffect22(() => {
-    if (enabled2 && viewportReady && focusedRowIndex >= 0) {
+    if (enabled && viewportReady && focusedRowIndex >= 0) {
       virtualizer.resizeItem(focusedRowIndex, focusedRowHeight);
     }
-  }, [enabled2, focusedRowHeight, focusedRowIndex, sessionEpoch, viewportReady, virtualizer]);
+  }, [enabled, focusedRowHeight, focusedRowIndex, sessionEpoch, viewportReady, virtualizer]);
   const compatibilityRows = useMemo23(
-    () => enabled2 ? null : rowGeometry.rowKeys.map((rowKey, index) => ({ index, rowKey })),
-    [enabled2, rowGeometry]
+    () => enabled ? null : rowGeometry.rowKeys.map((rowKey, index) => ({ index, rowKey })),
+    [enabled, rowGeometry]
   );
   if (compatibilityRows) return compatibilityRows;
   if (!viewportReady) {
@@ -18010,7 +18051,7 @@ function useTimelineRowVirtualization({
   lastScrollLeftRef,
   syncScrollViewport
 }) {
-  const enabled2 = STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED;
+  const enabled = STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED;
   const [domFocusedRowKey, setDomFocusedRowKey] = useState16();
   const onTimelineFocus = useCallback20((event) => {
     setDomFocusedRowKey(getFocusedTimelineRowKey(event.target));
@@ -18045,7 +18086,7 @@ function useTimelineRowVirtualization({
     ]
   );
   const virtualRows = useTimelineVirtualRows({
-    enabled: enabled2,
+    enabled,
     scrollRef,
     viewport,
     rowGeometry,
@@ -18080,7 +18121,7 @@ function useTimelineRowVirtualization({
     previousLayoutRef.current = rowGeometry;
   }, [lastScrollLeftRef, rowGeometry, scrollRef, sessionEpoch, syncScrollViewport]);
   return {
-    enabled: enabled2,
+    enabled,
     virtualRows,
     timelineFocusProps: { onFocus: onTimelineFocus, onBlur: onTimelineBlur }
   };
@@ -20219,6 +20260,29 @@ function useTimelinePlayerLoop({
   return { startRAFLoop, stopRAFLoop, stopReverseLoop };
 }
 
+// src/utils/studioDebug.ts
+function makeStudioDebugLogger(name) {
+  let enabled = null;
+  return (stage, data = {}) => {
+    if (enabled === null) {
+      try {
+        enabled = localStorage.getItem(`hf-${name}-debug`) === "1";
+      } catch {
+        enabled = false;
+      }
+    }
+    if (!enabled) return;
+    const details = typeof data === "function" ? data() : data;
+    if (!details) return;
+    console.log(
+      `[hf-${name}] ${JSON.stringify({ stage, t: Math.round(performance.now()), ...details })}`
+    );
+  };
+}
+
+// src/utils/reloadDebug.ts
+var logReload = makeStudioDebugLogger("reload");
+
 // src/player/lib/playbackScrub.ts
 function scrubMusicAtSeek(iframe, nextTime) {
   const s = usePlayerStore.getState();
@@ -20842,6 +20906,7 @@ function useTimelinePlayer() {
   const refreshPlayer = useCallback28(() => {
     const iframe = iframeRef.current;
     if (!iframe) return;
+    logReload("refreshPlayer", () => ({ stack: new Error("refreshPlayer").stack }));
     saveSeekPosition();
     iframe.style.visibility = "hidden";
     const src = iframe.src;
@@ -23763,7 +23828,14 @@ function readElementTransformSnapshot(win, element) {
   if (!DOMMatrixCtor) return null;
   const cs = win.getComputedStyle(element);
   try {
-    const matrix = new DOMMatrixCtor(cs.transform === "none" ? "" : cs.transform);
+    let matrix = new DOMMatrixCtor();
+    for (let node = element; node; node = node.parentElement) {
+      const transform = node === element ? cs.transform : win.getComputedStyle(node).transform;
+      if (transform && transform !== "none") {
+        matrix = new DOMMatrixCtor(transform).multiply(matrix);
+      }
+      if (node.hasAttribute("data-composition-id")) break;
+    }
     return { matrix, cs };
   } catch {
     return null;
@@ -23772,7 +23844,12 @@ function readElementTransformSnapshot(win, element) {
 function rotationDegreesFromMatrix(matrix) {
   const a = Number.isFinite(matrix.a) ? matrix.a : 1;
   const b = Number.isFinite(matrix.b) ? matrix.b : 0;
-  const deg = Math.atan2(b, a) * 180 / Math.PI;
+  const c = Number.isFinite(matrix.c) ? matrix.c : 0;
+  const d = Number.isFinite(matrix.d) ? matrix.d : 1;
+  const fromX = Math.atan2(b, a) * 180 / Math.PI;
+  const determinant = a * d - b * c;
+  const fromY = Math.atan2(-c, d) * 180 / Math.PI;
+  const deg = determinant < 0 && Math.abs(fromY) < Math.abs(fromX) ? fromY : fromX;
   return Number.isFinite(deg) ? deg : 0;
 }
 var ROTATION_GATE_EPSILON_DEG = 1e-4;
@@ -23903,6 +23980,10 @@ function orientedOverlayRect(overlayEl, iframe, element) {
     angle
   };
 }
+function orientedVisibleOverlayRect(overlayEl, iframe, element) {
+  const rect = orientedOverlayRect(overlayEl, iframe, element);
+  return rect ? { ...rect, ...hugRectForElement(rect, element) } : null;
+}
 var OVERLAY_RECT_EPSILON_PX = 0.5;
 var OVERLAY_RECT_ANGLE_EPSILON_DEG = 0.1;
 function rectsEqual(a, b) {
@@ -24234,6 +24315,9 @@ function useCanvasContextMenuState({
   return { contextMenu, closeContextMenu, handleContextMenu };
 }
 
+// src/utils/selectDebug.ts
+var logSelect = makeStudioDebugLogger("select");
+
 // src/components/editor/domEditOverlayGestures.ts
 var BLOCKED_MOVE_THRESHOLD_PX = 4;
 var ROTATION_COMMIT_EPSILON_DEGREES = 0.05;
@@ -24242,6 +24326,19 @@ var ROTATED_SNAP_BYPASS_DEGREES = 0.5;
 function focusDomEditOverlayElement(element) {
   element?.focus({ preventScroll: true });
 }
+function hoverCacheDescribesPoint(cachedElement, elementAtPoint) {
+  if (!cachedElement || !elementAtPoint) return false;
+  return cachedElement === elementAtPoint || cachedElement.contains(elementAtPoint);
+}
+function resolveShiftClickCandidate(input) {
+  const describes = hoverCacheDescribesPoint(input.cached?.element, input.elementAtPoint);
+  logSelect("shift-pointerdown", {
+    candidate: input.cached ? input.cached.selector ?? null : null,
+    pointTarget: input.elementAtPoint?.id ?? input.elementAtPoint?.tagName ?? null,
+    cacheIsAboutThisPoint: describes
+  });
+  return describes ? input.cached : null;
+}
 function resolveResizeCenterAnchorOffset(input) {
   return {
     dx: (input.originWidth - input.overlayWidth) / 2,
@@ -24381,7 +24478,7 @@ function useDomEditOverlayRects({
             for (let i = 0; i < descendants.length; i++) {
               const child = descendants[i];
               if (!child.getBoundingClientRect) continue;
-              const r = toVisibleOverlayRect(overlayEl, iframe, child);
+              const r = orientedVisibleOverlayRect(overlayEl, iframe, child);
               if (r && r.width > 2 && r.height > 2) nextChildRects.push(r);
             }
             if (!childRectsEqual(childRectsRef.current, nextChildRects)) {
@@ -25071,25 +25168,16 @@ function queryStudioElements(doc, attr) {
 }
 function reapplyPathOffsets(doc) {
   for (const el of queryStudioElements(doc, STUDIO_PATH_OFFSET_ATTR)) {
-    const gsapSkip = gsapAnimatesProperty(el, "x", "y");
+    if (gsapAnimatesProperty(el, "x", "y")) continue;
     const x = el.style.getPropertyValue(STUDIO_OFFSET_X_PROP);
     const y = el.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
-    if (gsapSkip) continue;
-    if (x || y) {
-      applyStudioPathOffset(
-        el,
-        {
-          x: Number.parseFloat(x) || 0,
-          y: Number.parseFloat(y) || 0
-        },
-        { updateBase: false }
-      );
-    }
+    if (!x && !y) continue;
+    const offset = { x: Number.parseFloat(x) || 0, y: Number.parseFloat(y) || 0 };
+    applyStudioPathOffset(el, offset, { updateBase: false });
   }
 }
 function reapplyBoxSizes(doc) {
   for (const el of queryStudioElements(doc, STUDIO_BOX_SIZE_ATTR)) {
-    if (gsapAnimatesProperty(el, "width", "height")) continue;
     const w = Number.parseFloat(el.style.getPropertyValue(STUDIO_WIDTH_PROP));
     const h = Number.parseFloat(el.style.getPropertyValue(STUDIO_HEIGHT_PROP));
     if (Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0) {
@@ -25658,12 +25746,6 @@ function readTransformWDivisor(element) {
   return Number.isFinite(w) && w > 0 ? w : 1;
 }
 function measureManualOffsetDragScreenToOffsetMatrix(element, initialOffset, options = {}) {
-  if (!element.hasAttribute("data-hf-studio-path-offset") && initialOffset.x === 0 && initialOffset.y === 0) {
-    const sx = options.scaleX || 1;
-    const sy = options.scaleY || 1;
-    const w = readTransformWDivisor(element);
-    return { ok: true, matrix: { a: w / sx, b: 0, c: 0, d: w / sy } };
-  }
   const probeSize = options.probeSize ?? DEFAULT_OFFSET_PROBE_PX;
   if (!Number.isFinite(probeSize) || probeSize <= 0) {
     return { ok: false, reason: "Invalid movement probe size." };
@@ -26011,6 +26093,10 @@ function readElementGsapNumber(element, prop) {
 
 // src/components/editor/snapEngine.ts
 var SNAP_THRESHOLD_PX = 6;
+var SNAP_ENGAGE_TRAVEL_PX = 4;
+function snapEngagedForTravel(dx, dy) {
+  return Math.hypot(dx, dy) >= SNAP_ENGAGE_TRAVEL_PX;
+}
 var EQUIDISTANCE_TOLERANCE_PX = 1;
 function rectRight(r) {
   return r.left + r.width;
@@ -26173,7 +26259,7 @@ var DISABLED_RESULT = (dx, dy) => ({
   spacingGuides: []
 });
 function resolveSnapAdjustment(input) {
-  if (input.disabled || input.threshold <= 0) {
+  if (input.disabled || input.disabledForTravel || input.threshold <= 0) {
     return DISABLED_RESULT(input.proposedDx, input.proposedDy);
   }
   const mr = input.movingRect;
@@ -26383,38 +26469,22 @@ function buildExcludeElements(input) {
 }
 
 // src/utils/resizeDebug.ts
+var logResize = makeStudioDebugLogger("resize");
 var moveN = 0;
-var enabled = null;
-function isEnabled2() {
-  if (enabled === null) {
-    try {
-      enabled = localStorage.getItem("hf-resize-debug") === "1";
-    } catch {
-      enabled = false;
-    }
-  }
-  return enabled;
-}
-function logResize(stage, data) {
-  if (!isEnabled2()) return;
-  console.log(
-    `[hf-resize] ${JSON.stringify({ stage, t: Math.round(performance.now()), ...data })}`
-  );
-}
 function logResizeMove(data) {
-  if (!isEnabled2()) return;
-  moveN += 1;
-  if (moveN % 8 === 1) logResize("move", { n: moveN, ...data });
+  logResize("move", () => {
+    moveN += 1;
+    return moveN % 8 === 1 ? { n: moveN, ...data } : null;
+  });
 }
 function resetResizeMoveLog() {
   moveN = 0;
 }
 function logResizeSettle(el, tag) {
-  if (!isEnabled2()) return;
-  const snap = (phase) => {
+  const snapshot = (phase) => {
     const r = el.getBoundingClientRect();
     const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
-    logResize("settle", {
+    return {
       tag,
       phase,
       rect: { x: r.x, y: r.y, w: r.width, h: r.height },
@@ -26422,10 +26492,75 @@ function logResizeSettle(el, tag) {
       cssH: cs?.height,
       transform: cs?.transform,
       inlineStyle: el.getAttribute("style")
-    });
+    };
   };
-  snap("t0");
-  setTimeout(() => snap("t200"), 200);
+  logResize("settle", () => {
+    const current = snapshot("t0");
+    el.ownerDocument.defaultView?.setTimeout(
+      () => logResize("settle", () => snapshot("t200")),
+      200
+    );
+    return current;
+  });
+}
+
+// src/utils/dragDebug.ts
+var logDrag = makeStudioDebugLogger("drag");
+var moveN2 = 0;
+function logDragMove(data) {
+  logDrag("move", () => {
+    moveN2 += 1;
+    return moveN2 % 8 === 1 ? { n: moveN2, ...data } : null;
+  });
+}
+function resetDragMoveLog() {
+  moveN2 = 0;
+}
+function readDragPositions(elements) {
+  const positions = {};
+  for (const { key: key2, element } of elements) {
+    const rect = element.getBoundingClientRect();
+    positions[key2] = `${Math.round(rect.left)},${Math.round(rect.top)}`;
+  }
+  return positions;
+}
+function findNonRigidMembers(before, after) {
+  const moves = /* @__PURE__ */ new Map();
+  for (const key2 of Object.keys(after)) {
+    const from = before[key2]?.split(",").map(Number);
+    const to = after[key2]?.split(",").map(Number);
+    if (!from || !to || from.length !== 2 || to.length !== 2) continue;
+    moves.set(key2, `${Math.round(to[0] - from[0])},${Math.round(to[1] - from[1])}`);
+  }
+  const counts = /* @__PURE__ */ new Map();
+  for (const move of moves.values()) counts.set(move, (counts.get(move) ?? 0) + 1);
+  let common = "";
+  let best = 0;
+  for (const [move, count] of counts) {
+    if (count > best) [common, best] = [move, count];
+  }
+  return [...moves].filter(([, move]) => move !== common).map(([key2, move]) => `${key2.split("|")[2] ?? key2} moved ${move}, group moved ${common}`);
+}
+function logDragSettle(stage, elements) {
+  logDrag(stage, () => {
+    const at = readDragPositions(elements);
+    const win = elements[0]?.element.ownerDocument.defaultView;
+    if (win) {
+      win.setTimeout(
+        () => logDrag(`${stage}+120ms`, () => ({ at: readDragPositions(elements) })),
+        120
+      );
+      win.setTimeout(
+        () => logDrag(`${stage}+400ms`, () => ({ at: readDragPositions(elements) })),
+        400
+      );
+      win.setTimeout(
+        () => logDrag(`${stage}+900ms`, () => ({ at: readDragPositions(elements) })),
+        900
+      );
+    }
+    return { at };
+  });
 }
 
 // src/components/editor/domEditOverlayStartGesture.ts
@@ -26460,6 +26595,22 @@ function startGroupDrag(e, opts) {
     }
     members.push(result.member);
   }
+  resetDragMoveLog();
+  logDrag("group-start", {
+    // A member whose mapping differs from its neighbours travels a different
+    // distance for the same pointer delta, which is the group coming apart.
+    members: Object.fromEntries(
+      members.map((member) => [
+        member.key,
+        {
+          map: `${member.screenToOffset.a.toFixed(3)},${member.screenToOffset.d.toFixed(3)}`,
+          base: `${Math.round(member.baseGsap.x)},${Math.round(member.baseGsap.y)}`,
+          offset: `${Math.round(member.initialOffset.x)},${Math.round(member.initialOffset.y)}`
+        }
+      ])
+    ),
+    at: readDragPositions(members)
+  });
   const overlayEl = opts.overlayRef.current;
   const iframe = opts.iframeRef.current;
   const snapContext = overlayEl && iframe ? collectSnapContext({
@@ -26624,6 +26775,76 @@ function startGesture(kind, e, opts, options) {
   return true;
 }
 
+// src/components/editor/groupDragMove.ts
+function createGroupDragMover(opts, setDraftGroupOverlayItems) {
+  let lastGroupPositions = {};
+  let lastGesture = null;
+  const snapGroupDelta = (groupG, e, proposed) => {
+    const sc = groupG.snapContext;
+    if (!sc?.snapEnabled || sc.targets.length === 0) return proposed;
+    if (!snapEngagedForTravel(proposed.dx, proposed.dy)) {
+      opts.snapGuidesRef.current = null;
+      return proposed;
+    }
+    const groupBounds = resolveDomEditGroupOverlayRect(groupG.originItems.map((i) => i.rect));
+    if (!groupBounds) return proposed;
+    const allTargets = sc.compositionTarget ? [...sc.targets, sc.compositionTarget] : sc.targets;
+    const snap = resolveSnapAdjustment({
+      movingRect: groupBounds,
+      proposedDx: proposed.dx,
+      proposedDy: proposed.dy,
+      targets: allTargets,
+      gridEdges: sc.gridEdges ?? void 0,
+      threshold: SNAP_THRESHOLD_PX,
+      disabled: e.altKey
+    });
+    const movingRect = {
+      ...groupBounds,
+      left: groupBounds.left + snap.dx,
+      top: groupBounds.top + snap.dy
+    };
+    const spacingGuides = e.altKey ? [] : resolveEquidistanceGuides({
+      movingRect,
+      targets: allTargets,
+      threshold: SNAP_THRESHOLD_PX
+    });
+    opts.snapGuidesRef.current = { guides: snap.guides, spacingGuides };
+    return { dx: snap.dx, dy: snap.dy };
+  };
+  const moveGroupDrag = (groupG, e) => {
+    if (groupG !== lastGesture) {
+      lastGesture = groupG;
+      lastGroupPositions = {};
+    }
+    const { dx, dy } = snapGroupDelta(groupG, e, {
+      dx: e.clientX - groupG.startX,
+      dy: e.clientY - groupG.startY
+    });
+    groupG.lastSnappedDx = dx;
+    groupG.lastSnappedDy = dy;
+    setDraftGroupOverlayItems(
+      groupG.originItems.map((i) => ({
+        ...i,
+        rect: { ...i.rect, left: i.rect.left + dx, top: i.rect.top + dy }
+      }))
+    );
+    const offsets = {};
+    for (const m of groupG.members) {
+      const n = applyManualOffsetDragDraft(m, dx, dy);
+      offsets[m.key] = `${Math.round(n.x)},${Math.round(n.y)}`;
+    }
+    const at = readDragPositions(groupG.members);
+    const px = Math.round(e.clientX - groupG.startX);
+    const py = Math.round(e.clientY - groupG.startY);
+    const trace = { pointer: `${px},${py}`, applied: `${Math.round(dx)},${Math.round(dy)}`, at };
+    const drift = findNonRigidMembers(lastGroupPositions, at);
+    if (drift.length > 0) logDrag("drift", { ...trace, drift });
+    lastGroupPositions = at;
+    logDragMove({ ...trace, offsets });
+  };
+  return moveGroupDrag;
+}
+
 // src/components/editor/useDomEditOverlayGestures.ts
 function createDomEditOverlayGestureHandlers(opts) {
   const setDraftOverlayRect = (next) => {
@@ -26652,6 +26873,7 @@ function createDomEditOverlayGestureHandlers(opts) {
   };
   const startGroupDrag2 = (e) => startGroupDrag(e, opts);
   const startGesture2 = (kind, e, options) => startGesture(kind, e, opts, options);
+  const moveGroupDrag = createGroupDragMover(opts, setDraftGroupOverlayItems);
   const onPointerMove = (e) => {
     const g = opts.gestureRef.current;
     const groupG = opts.groupGestureRef.current;
@@ -26672,49 +26894,7 @@ function createDomEditOverlayGestureHandlers(opts) {
       return;
     }
     if (groupG) {
-      let dx2 = e.clientX - groupG.startX;
-      let dy2 = e.clientY - groupG.startY;
-      const sc = groupG.snapContext;
-      if (sc?.snapEnabled && sc.targets.length > 0) {
-        const groupBounds = resolveDomEditGroupOverlayRect(
-          groupG.originItems.map((item) => item.rect)
-        );
-        if (groupBounds) {
-          const allTargets = sc.compositionTarget ? [...sc.targets, sc.compositionTarget] : sc.targets;
-          const snap = resolveSnapAdjustment({
-            movingRect: groupBounds,
-            proposedDx: dx2,
-            proposedDy: dy2,
-            targets: allTargets,
-            gridEdges: sc.gridEdges ?? void 0,
-            threshold: SNAP_THRESHOLD_PX,
-            disabled: e.altKey
-          });
-          dx2 = snap.dx;
-          dy2 = snap.dy;
-          const movedRect = {
-            left: groupBounds.left + dx2,
-            top: groupBounds.top + dy2,
-            width: groupBounds.width,
-            height: groupBounds.height
-          };
-          const spacingGuides = e.altKey ? [] : resolveEquidistanceGuides({
-            movingRect: movedRect,
-            targets: allTargets,
-            threshold: SNAP_THRESHOLD_PX
-          });
-          opts.snapGuidesRef.current = { guides: snap.guides, spacingGuides };
-        }
-      }
-      groupG.lastSnappedDx = dx2;
-      groupG.lastSnappedDy = dy2;
-      setDraftGroupOverlayItems(
-        groupG.originItems.map((item) => ({
-          ...item,
-          rect: { ...item.rect, left: item.rect.left + dx2, top: item.rect.top + dy2 }
-        }))
-      );
-      for (const member of groupG.members) applyManualOffsetDragDraft(member, dx2, dy2);
+      moveGroupDrag(groupG, e);
       return;
     }
     if (!g || !sel) return;
@@ -26756,6 +26936,9 @@ function createDomEditOverlayGestureHandlers(opts) {
           movingRect,
           proposedDx: dx,
           proposedDy: dy,
+          // Same reason as the group path: a snap on a drag that has not travelled
+          // yet moves the element while the pointer is still.
+          disabledForTravel: !snapEngagedForTravel(dx, dy),
           targets: allTargets,
           gridEdges: sc.gridEdges ?? void 0,
           threshold: SNAP_THRESHOLD_PX,
@@ -26840,9 +27023,9 @@ function createDomEditOverlayGestureHandlers(opts) {
       opts.rafPausedRef.current = false;
       const rawDx = e.clientX - groupG.startX;
       const rawDy = e.clientY - groupG.startY;
+      opts.suppressNextBoxClickRef.current = true;
       if (Math.hypot(rawDx, rawDy) < BLOCKED_MOVE_THRESHOLD_PX) {
         restoreGroupPathOffsets(groupG);
-        opts.suppressNextBoxClickRef.current = true;
         return;
       }
       const dx = groupG.lastSnappedDx ?? rawDx;
@@ -26857,12 +27040,27 @@ function createDomEditOverlayGestureHandlers(opts) {
         selection: member.selection,
         next: applyManualOffsetDragCommit(member, dx, dy)
       }));
+      logDrag("drop", {
+        pointer: `${Math.round(rawDx)},${Math.round(rawDy)}`,
+        applied: `${Math.round(dx)},${Math.round(dy)}`,
+        committed: Object.fromEntries(
+          updates.map((update, index) => [
+            groupG.members[index]?.key ?? String(index),
+            `${Math.round(update.next.x)},${Math.round(update.next.y)}`
+          ])
+        ),
+        at: readDragPositions(groupG.members)
+      });
       void Promise.resolve(opts.onGroupPathOffsetCommitRef.current(updates)).catch(() => {
         for (const member of groupG.members) {
           if (member.gestureToken && isStudioManualEditGestureCurrent(member.element, member.gestureToken))
             restoreStudioPathOffset(member.element, member.initialPathOffset);
         }
-      }).finally(() => endManualOffsetDragMembers(groupG.members));
+      }).finally(() => {
+        logDrag("committed", { at: readDragPositions(groupG.members) });
+        endManualOffsetDragMembers(groupG.members);
+        logDragSettle("settle", groupG.members);
+      });
       return;
     }
     if (!g || !sel) {
@@ -28194,18 +28392,18 @@ var CanvasContextMenu = memo21(function CanvasContextMenu2({
         },
         children: [
           hasZActions && Z_ACTIONS.map(({ action, label }) => {
-            const enabled2 = isZOrderActionEnabled(el, action);
+            const enabled = isZOrderActionEnabled(el, action);
             return /* @__PURE__ */ jsxs47(
               "button",
               {
                 type: "button",
-                className: `w-full flex items-center px-3 py-1.5 text-xs text-left ${enabled2 ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer" : "text-neutral-600 cursor-not-allowed"}`,
-                disabled: !enabled2,
+                className: `w-full flex items-center px-3 py-1.5 text-xs text-left ${enabled ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer" : "text-neutral-600 cursor-not-allowed"}`,
+                disabled: !enabled,
                 onPointerDown: (e) => {
                   if (e.button !== 0) return;
                   e.preventDefault();
                   e.stopPropagation();
-                  if (enabled2) handleZAction(action);
+                  if (enabled) handleZAction(action);
                 },
                 children: [
                   /* @__PURE__ */ jsx63(ZActionIcon, { action }),
@@ -28418,6 +28616,7 @@ var DomEditOverlay = memo22(function DomEditOverlay2({
   const handleOverlayMouseDown = (event) => {
     if (!allowCanvasMovement) return;
     if (suppressNextOverlayMouseDownRef.current) {
+      logSelect("mousedown-suppressed", { shift: event.shiftKey });
       suppressNextOverlayMouseDownRef.current = false;
       suppressNextBoxMouseDownRef.current = false;
       suppressNextBoxClickRef.current = false;
@@ -28426,7 +28625,9 @@ var DomEditOverlay = memo22(function DomEditOverlay2({
       return;
     }
     const target = event.target;
-    if (target?.closest('[data-dom-edit-selection-box="true"]')) return;
+    const onBox = Boolean(target?.closest('[data-dom-edit-selection-box="true"]'));
+    logSelect("mousedown", { shift: event.shiftKey, onBox });
+    if (onBox) return;
     onCanvasMouseDown(event, { hoverSelection: hoverSelectionRef.current });
     if (event.shiftKey) {
       suppressNextBoxMouseDownRef.current = true;
@@ -28436,7 +28637,16 @@ var DomEditOverlay = memo22(function DomEditOverlay2({
   const handleOverlayPointerDown = (event) => {
     if (!allowCanvasMovement || event.button !== 0) return;
     if (event.shiftKey) {
-      const candidate = hoverSelectionRef.current;
+      const shiftIframe = iframeRef.current;
+      const candidate = resolveShiftClickCandidate({
+        cached: hoverSelectionRef.current,
+        elementAtPoint: shiftIframe ? getPreviewTargetFromPointer(
+          shiftIframe,
+          event.clientX,
+          event.clientY,
+          activeCompositionPathRef.current
+        ) : null
+      });
       if (!candidate) return;
       event.preventDefault();
       event.stopPropagation();
@@ -28460,24 +28670,21 @@ var DomEditOverlay = memo22(function DomEditOverlay2({
       const overlayEl = overlayRef.current;
       if (overlayEl) {
         const oRect = overlayEl.getBoundingClientRect();
+        event.preventDefault();
+        event.stopPropagation();
+        suppressNextOverlayMouseDownRef.current = true;
+        event.currentTarget.setPointerCapture(event.pointerId);
         const cx = event.clientX - oRect.left;
         const cy = event.clientY - oRect.top;
-        const inComp = cx >= compRect.left && cx <= compRect.left + compRect.width && cy >= compRect.top && cy <= compRect.top + compRect.height;
-        if (inComp) {
-          event.preventDefault();
-          event.stopPropagation();
-          suppressNextOverlayMouseDownRef.current = true;
-          event.currentTarget.setPointerCapture(event.pointerId);
-          marquee.marqueeRef.current = {
-            startX: cx,
-            startY: cy,
-            currentX: cx,
-            currentY: cy,
-            pointerId: event.pointerId,
-            pastThreshold: false
-          };
-          return;
-        }
+        marquee.marqueeRef.current = {
+          startX: cx,
+          startY: cy,
+          currentX: cx,
+          currentY: cy,
+          pointerId: event.pointerId,
+          pastThreshold: false
+        };
+        return;
       }
     }
   };
@@ -28575,7 +28782,8 @@ var DomEditOverlay = memo22(function DomEditOverlay2({
               left: cr.left,
               top: cr.top,
               width: cr.width,
-              height: cr.height
+              height: cr.height,
+              transform: cr.angle ? `rotate(${cr.angle}deg)` : void 0
             }
           },
           i
@@ -28862,18 +29070,16 @@ async function dispatchBufferedCommits(calls) {
   }
   return reloadsRequested(calls);
 }
-function traceCommit(stage, data) {
-  if (import.meta.env.DEV) console.info(`[hf-commit] ${stage}`, data);
-}
+var logCommit = makeStudioDebugLogger("commit");
 function runGestureTransaction(tx) {
   const startedAt = performance.now();
   const coalesceKey = `tx:${tx.label}:${++transactionCounter}`;
   let mutationCount = 0;
   let reloadCount = 0;
   const bufferedCommits = [];
-  traceCommit("start", { label: tx.label, coalesceKey });
+  logCommit("start", { label: tx.label, coalesceKey });
   tx.settle();
-  traceCommit("settled", { label: tx.label, coalesceKey });
+  logCommit("settled", { label: tx.label, coalesceKey });
   const before = !tx.skipPixelAssert ? readPixelRect(tx.element) : null;
   const commit = (commitMutation) => {
     const wrapped = (selection, mutation, options) => {
@@ -28892,19 +29098,12 @@ function runGestureTransaction(tx) {
   return tx.persist(commit).then(async () => {
     reloadCount = await dispatchBufferedCommits(bufferedCommits);
     const durationMs = Math.round(performance.now() - startedAt);
-    traceCommit("persisted", { label: tx.label, coalesceKey });
+    logCommit("persisted", { label: tx.label, coalesceKey });
     if (before) {
       const after = readPixelRect(tx.element);
       const delta = pixelDelta(before, after);
       if (exceedsPixelTolerance(delta)) {
-        if (import.meta.env.DEV) {
-          console.error("[hf-commit] persist changed pixels", {
-            label: tx.label,
-            before,
-            after,
-            delta
-          });
-        }
+        logCommit("persist-changed-pixels", { label: tx.label, before, after, delta });
         trackStudioEvent("commit_invariant_violation", {
           label: tx.label,
           delta_x: roundToOneDecimal(delta.x),
@@ -28932,7 +29131,7 @@ function runGestureTransaction(tx) {
       error_name: error instanceof Error ? error.name : "unknown",
       restore_ran: true
     });
-    traceCommit("restore", { label: tx.label, coalesceKey });
+    logCommit("restore", { label: tx.label, coalesceKey });
     throw error;
   });
 }
@@ -31867,7 +32066,7 @@ function useElementLifecycleOps({
           `/api/projects/${pid}/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
           {
             method: "POST",
-            headers: { "Content-Type": "application/json" },
+            headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
             body: JSON.stringify({ target: patchTarget })
           }
         );
@@ -33285,7 +33484,19 @@ import { isStudioHoldSet } from "@hyperframes/core/gsap-parser";
 function hasAnimations(value) {
   return typeof value === "object" && value !== null && "animations" in value && Array.isArray(value.animations);
 }
-async function fetchParsedAnimations(projectId, sourceFile) {
+var inFlightParses = /* @__PURE__ */ new Map();
+function fetchParsedAnimations(projectId, sourceFile, options = {}) {
+  const key2 = `${projectId}|${sourceFile}`;
+  if (options.fresh) inFlightParses.delete(key2);
+  const inFlight = inFlightParses.get(key2);
+  if (inFlight) return inFlight;
+  const request = requestParsedAnimations(projectId, sourceFile).finally(() => {
+    if (inFlightParses.get(key2) === request) inFlightParses.delete(key2);
+  });
+  inFlightParses.set(key2, request);
+  return request;
+}
+async function requestParsedAnimations(projectId, sourceFile) {
   try {
     const res = await fetch(
       `/api/projects/${encodeURIComponent(projectId)}/gsap-animations/${encodeURIComponent(sourceFile)}`,
@@ -34317,6 +34528,11 @@ function useTimelineSelectionPreviewSync({
     const currentAnchor = currentDomEditSelection ? resolveTimelineIdForSelection(currentDomEditSelection, timelineElements, activeCompPath) : null;
     if (selectedIds.length === 0) {
       missingSelectionKeyRef.current = "";
+      logSelect("timeline-empty", {
+        had: currentIds.length,
+        previousKey: previousSelectedKey.length > 0,
+        clearing: previousSelectedKey.length > 0 && currentIds.length > 0
+      });
       if (previousSelectedKey.length > 0 && currentIds.length > 0) {
         applyDomSelection(null, { revealPanel: false });
       }
@@ -34346,6 +34562,11 @@ function useTimelineSelectionPreviewSync({
         return;
       }
       missingSelectionKeyRef.current = "";
+      logSelect("timeline-sync", {
+        wanted: selectedIds.length,
+        had: currentIds.length,
+        resolved: selections.length
+      });
       if (selections.length === 0) {
         applyDomSelection(null, { revealPanel: false });
       } else if (selections.length === 1) {
@@ -37799,13 +38020,13 @@ function useColorGradingController({
     postColorGrading
   });
   const postCompare = useCallback57(
-    (enabled2) => {
+    (enabled) => {
       postRuntimeControlMessage(
         previewIframeRef?.current?.contentWindow,
         "set-color-grading-compare",
         {
           target,
-          compare: { enabled: enabled2, position: 1, lineWidth: 0 }
+          compare: { enabled, position: 1, lineWidth: 0 }
         }
       );
     },
@@ -37886,8 +38107,8 @@ function useColorGradingController({
     ]
   );
   const commitCompare = useCallback57(
-    (enabled2) => {
-      const nextEnabled = enabled2 && isHfColorGradingActive(grading);
+    (enabled) => {
+      const nextEnabled = enabled && isHfColorGradingActive(grading);
       setCompareEnabled(nextEnabled);
       if (nextEnabled) postColorGrading(grading);
       postCompare(nextEnabled);
@@ -39572,11 +39793,11 @@ function useVariablePromoteChannel(channel) {
 import { Fragment as Fragment25, jsx as jsx86, jsxs as jsxs66 } from "react/jsx-runtime";
 function PromotableControl({
   channel,
-  enabled: enabled2 = true,
+  enabled = true,
   children
 }) {
   const promote = useVariablePromoteChannel(channel);
-  const danglingId = enabled2 && promote && promote.boundId != null && promote.declaration == null ? promote.boundId : null;
+  const danglingId = enabled && promote && promote.boundId != null && promote.declaration == null ? promote.boundId : null;
   useEffect51(() => {
     if (danglingId != null) {
       console.warn(
@@ -39584,7 +39805,7 @@ function PromotableControl({
       );
     }
   }, [danglingId]);
-  if (!promote || !enabled2) return /* @__PURE__ */ jsx86(Fragment25, { children: children({ bound: false }) });
+  if (!promote || !enabled) return /* @__PURE__ */ jsx86(Fragment25, { children: children({ bound: false }) });
   const bound = promote.boundId != null && promote.declaration != null;
   const canPromote = promote.action != null && !bound;
   const defaultValue = promote.declaration?.default;
@@ -42301,8 +42522,8 @@ var AnimationCard = memo29(function AnimationCard2({
                 animation.properties.x != null || animation.properties.y != null ? 1 : 0,
                 (animation.keyframes?.keyframes?.length ?? 0) - 1
               ),
-              onToggle: (enabled2) => onSetArcPath(animation.id, {
-                enabled: enabled2,
+              onToggle: (enabled) => onSetArcPath(animation.id, {
+                enabled,
                 segments: animation.arcPath?.segments
               }),
               onUpdateSegment: (index, update) => onUpdateArcSegment?.(animation.id, index, update),
@@ -46775,7 +46996,7 @@ function PropertyPanelColorSecondary({
         {
           label: "Selection enabled",
           checked: selected.enabled,
-          onChange: (enabled2) => replaceSelected({ ...selected, enabled: enabled2 })
+          onChange: (enabled) => replaceSelected({ ...selected, enabled })
         }
       ),
       /* @__PURE__ */ jsxs97(
@@ -51854,7 +52075,7 @@ function useCaptionSync(projectId) {
     const overrides = buildOverrides(state.model);
     fetch(`/api/projects/${pid}/files/${encodeURIComponent("caption-overrides.json")}`, {
       method: "PUT",
-      headers: { "Content-Type": "text/plain" },
+      headers: { "Content-Type": "text/plain", ...studioWriteHeaders() },
       body: JSON.stringify(overrides, null, 2)
     }).catch((error) => {
       trackEvent("studio_caption_autosave_failed", { error: String(error) });
@@ -52548,40 +52769,6 @@ function usePanelLayout(initialState2) {
 // src/hooks/useFileManager.ts
 import { useState as useState84, useCallback as useCallback72, useMemo as useMemo49, useRef as useRef92 } from "react";
 
-// src/utils/studioFileVersion.ts
-var WRITE_TOKEN_TTL_MS = 5 * 6e4;
-var studioWriteTokens = /* @__PURE__ */ new Map();
-function pruneStudioWriteTokens(now2) {
-  for (const [token, createdAt] of studioWriteTokens) {
-    if (now2 - createdAt >= WRITE_TOKEN_TTL_MS) studioWriteTokens.delete(token);
-  }
-}
-function markStudioWriteToken(token, now2 = Date.now()) {
-  pruneStudioWriteTokens(now2);
-  studioWriteTokens.set(token, now2);
-}
-function consumeStudioWriteToken(token, now2 = Date.now()) {
-  pruneStudioWriteTokens(now2);
-  if (!token || !studioWriteTokens.has(token)) return false;
-  studioWriteTokens.delete(token);
-  return true;
-}
-async function studioFileContentVersion(content) {
-  const bytes = new TextEncoder().encode(content);
-  const digest = await globalThis.crypto.subtle.digest("SHA-256", bytes);
-  const hex = Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, "0")).join(
-    ""
-  );
-  return `"sha256:${hex}"`;
-}
-async function studioExpectedFileVersion(versions, path, expectedContent) {
-  if (expectedContent !== void 0) return studioFileContentVersion(expectedContent);
-  return versions.get(path);
-}
-function createStudioWriteToken() {
-  return globalThis.crypto.randomUUID();
-}
-
 // src/hooks/useFileTree.ts
 import { useState as useState83, useCallback as useCallback70, useEffect as useEffect75, useMemo as useMemo48 } from "react";
 function useFileTree({ projectId, projectIdRef }) {
@@ -52827,8 +53014,6 @@ function useFileManager({
         }
       }
       await retryStudioSave(async () => {
-        const writeToken = createStudioWriteToken();
-        markStudioWriteToken(writeToken);
         let response;
         try {
           response = await fetch(
@@ -52837,7 +53022,7 @@ function useFileManager({
               method: "PUT",
               headers: {
                 "Content-Type": "text/plain",
-                "X-Hyperframes-Write-Token": writeToken,
+                ...studioWriteHeaders(),
                 ...expectedVersion ? { "If-Match": expectedVersion } : { "If-None-Match": "*" }
               },
               body: content
@@ -53704,6 +53889,7 @@ async function requestAtomicCut(projectId, intents) {
     });
   }
   const transactionToken = `cut:${crypto.randomUUID()}`;
+  markStudioWriteToken(transactionToken);
   const response = await fetch(buildProjectApiPath(projectId, "/file-mutations/split-batch"), {
     method: "POST",
     headers: {
@@ -53900,7 +54086,7 @@ async function insertTimelineComposition(input) {
     ),
     {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
       body: JSON.stringify({
         sourcePath: input.sourcePath,
         start: input.start,
@@ -55007,7 +55193,7 @@ function useTimelineEditing({
           `/api/projects/${pid}/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
           {
             method: "POST",
-            headers: { "Content-Type": "application/json" },
+            headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
             body: JSON.stringify({ target: patchTarget })
           }
         );
@@ -55407,6 +55593,42 @@ function useStudioTestHooks({
   }, [applyDomSelection, buildDomSelectionFromTarget, previewIframeRef]);
 }
 
+// src/hooks/domSelectionTimelineMirror.ts
+function announceTimelineSelection(deps, group, primary) {
+  const {
+    timelineElements,
+    getTimelineSelectionSet: getTimelineSelectionSet2,
+    setSelectedTimelineElementId,
+    setTimelineSelectionSet
+  } = deps;
+  if (!primary) {
+    setTimelineSelectionSet(/* @__PURE__ */ new Set());
+    setSelectedTimelineElementId(null);
+    return;
+  }
+  const timelineIdFor = (selection) => findMatchingTimelineElementId(selection, timelineElements) ?? findTimelineIdByAncestor(
+    selection.element,
+    timelineElements,
+    selection.sourceFile || "index.html"
+  );
+  const members = group.map(timelineIdFor).filter((id) => Boolean(id));
+  const anchor = timelineIdFor(primary);
+  const publishedMembers = new Set(members);
+  if (anchor) publishedMembers.add(anchor);
+  const timelineAnchor = anchor ?? members[0] ?? null;
+  logSelect("announce", {
+    group: group.length,
+    published: publishedMembers.size,
+    anchor,
+    anchorPublished: anchor != null && publishedMembers.has(anchor)
+  });
+  if (!timelineAnchor) return;
+  if (group.length > 1 || !getTimelineSelectionSet2().has(timelineAnchor)) {
+    setTimelineSelectionSet(publishedMembers);
+  }
+  setSelectedTimelineElementId(timelineAnchor, { preserveSet: true });
+}
+
 // src/hooks/useDomSelection.ts
 function useDomSelection({
   projectId,
@@ -55416,7 +55638,9 @@ function useDomSelection({
   captionEditMode,
   previewIframeRef,
   timelineElements,
+  getTimelineSelectionSet: getTimelineSelectionSet2,
   setSelectedTimelineElementId,
+  setTimelineSelectionSet,
   setRightCollapsed,
   setRightPanelTab,
   previewIframe,
@@ -55439,15 +55663,34 @@ function useDomSelection({
   domEditGroupSelectionsRef.current = domEditGroupSelections;
   domEditHoverSelectionRef.current = domEditHoverSelection;
   activeGroupElementRef.current = activeGroupElement;
+  const announceTimelineSelection2 = useCallback81(
+    (group, primary) => announceTimelineSelection(
+      {
+        timelineElements,
+        getTimelineSelectionSet: getTimelineSelectionSet2,
+        setSelectedTimelineElementId,
+        setTimelineSelectionSet
+      },
+      group,
+      primary
+    ),
+    [
+      getTimelineSelectionSet2,
+      setSelectedTimelineElementId,
+      setTimelineSelectionSet,
+      timelineElements
+    ]
+  );
   const applyDomSelection = useCallback81(
     // fallow-ignore-next-line complexity
     (selection, options) => {
       if (!selection) {
+        logSelect("clear", { hadGroup: domEditGroupSelectionsRef.current.length });
         domEditSelectionRef.current = null;
         domEditGroupSelectionsRef.current = [];
         setDomEditSelection(null);
         setDomEditGroupSelections([]);
-        setSelectedTimelineElementId(null);
+        announceTimelineSelection2([], null);
         return;
       }
       const isAdditiveSelection = Boolean(options?.additive);
@@ -55457,6 +55700,13 @@ function useDomSelection({
       const wasInGroup = domEditSelectionInGroup(currentGroup, selection);
       const nextGroup = options?.preserveGroup ? replaceDomEditGroupSelection(currentGroup, selection) : isAdditiveSelection ? toggleDomEditGroupSelection(currentGroup, selection) : [selection];
       const nextSelection = options?.preserveGroup ? selection : isAdditiveSelection && wasInGroup ? domEditSelectionsTargetSame(currentSelection, selection) ? nextGroup[0] ?? null : domEditSelectionInGroup(nextGroup, currentSelection) ? currentSelection : nextGroup[0] ?? null : selection;
+      logSelect("apply", {
+        additive: isAdditiveSelection,
+        target: selection.selector ?? selection.id ?? null,
+        wasInGroup,
+        prevGroup: previousGroup.length,
+        nextGroup: nextGroup.length
+      });
       domEditSelectionRef.current = nextSelection;
       domEditGroupSelectionsRef.current = nextGroup;
       setDomEditSelection(nextSelection);
@@ -55473,17 +55723,12 @@ function useDomSelection({
             setRightPanelTab("design");
           }
         }
-        const nextSelectedTimelineId = findMatchingTimelineElementId(nextSelection, timelineElements) ?? findTimelineIdByAncestor(
-          nextSelection.element,
-          timelineElements,
-          nextSelection.sourceFile || "index.html"
-        );
-        setSelectedTimelineElementId(nextSelectedTimelineId, { preserveSet: true });
+        announceTimelineSelection2(nextGroup, nextSelection);
         return;
       }
-      setSelectedTimelineElementId(null);
+      announceTimelineSelection2([], null);
     },
-    [setSelectedTimelineElementId, timelineElements, setRightCollapsed, setRightPanelTab]
+    [announceTimelineSelection2, setRightCollapsed, setRightPanelTab]
   );
   const clearDomSelection = useCallback81(() => {
     applyDomSelection(null, { revealPanel: false });
@@ -55595,6 +55840,8 @@ function useDomSelection({
     },
     [applyDomSelection, buildDomSelectionForTimelineElement]
   );
+  const refreshDomEditGroupSelectionsFromPreviewRef = useRef98(async () => {
+  });
   const refreshDomEditSelectionFromPreview = useCallback81(
     // fallow-ignore-next-line complexity
     async (selection) => {
@@ -55608,6 +55855,15 @@ function useDomSelection({
       if (!doc) return;
       const element = findElementForSelection(doc, selection, activeCompPath);
       if (!element) {
+        const group = domEditGroupSelectionsRef.current;
+        logSelect("refresh-lost", {
+          target: selection.selector ?? selection.id ?? null,
+          group: group.length
+        });
+        if (group.length > 1) {
+          await refreshDomEditGroupSelectionsFromPreviewRef.current(group);
+          return;
+        }
         applyDomSelection(null, { revealPanel: false });
         return;
       }
@@ -55646,22 +55902,13 @@ function useDomSelection({
       domEditGroupSelectionsRef.current = nextGroup;
       setDomEditSelection(nextSelection);
       setDomEditGroupSelections(nextGroup);
-      if (nextSelection) {
-        setSelectedTimelineElementId(
-          findMatchingTimelineElementId(nextSelection, timelineElements)
-        );
-      } else {
-        setSelectedTimelineElementId(null);
-      }
+      announceTimelineSelection2(nextGroup, nextSelection);
     },
-    [
-      activeCompPath,
-      buildDomSelectionFromTarget,
-      setSelectedTimelineElementId,
-      timelineElements,
-      previewIframeRef
-    ]
+    [activeCompPath, announceTimelineSelection2, buildDomSelectionFromTarget, previewIframeRef]
   );
+  useEffect79(() => {
+    refreshDomEditGroupSelectionsFromPreviewRef.current = refreshDomEditGroupSelectionsFromPreview;
+  }, [refreshDomEditGroupSelectionsFromPreview]);
   useEffect79(() => {
     updateDomEditHoverSelection(null);
   }, [activeCompPath, projectId, previewIframe, refreshKey, updateDomEditHoverSelection]);
@@ -55692,6 +55939,7 @@ function useDomSelection({
   const applyMarqueeSelection = useCallback81(
     // fallow-ignore-next-line complexity
     (selections, additive) => {
+      logSelect("marquee", { hits: selections.length, additive });
       if (selections.length === 0) {
         if (!additive) applyDomSelection(null, { revealPanel: false });
         return;
@@ -55715,14 +55963,9 @@ function useDomSelection({
       domEditGroupSelectionsRef.current = nextGroup;
       setDomEditSelection(nextSelection);
       setDomEditGroupSelections(nextGroup);
-      const nextTimelineId = findMatchingTimelineElementId(nextSelection, timelineElements) ?? findTimelineIdByAncestor(
-        nextSelection.element,
-        timelineElements,
-        nextSelection.sourceFile || "index.html"
-      );
-      setSelectedTimelineElementId(nextTimelineId);
+      announceTimelineSelection2(nextGroup, nextSelection);
     },
-    [applyDomSelection, timelineElements, setSelectedTimelineElementId]
+    [applyDomSelection, announceTimelineSelection2]
   );
   return {
     // State
@@ -57132,7 +57375,7 @@ async function assignGsapTargetAutoIdIfNeeded({
     `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-element/${encodeURIComponent(targetPath)}`,
     {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
       body: JSON.stringify(patchBody)
     }
   );
@@ -57198,7 +57441,7 @@ async function patchElementBatches(projectId, batches) {
       `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-element-batches`,
       {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
         body
       }
     );
@@ -57323,7 +57566,7 @@ function useDomEditCommits({
         `/api/projects/${pid}/file-mutations/patch-element/${encodeURIComponent(targetPath)}`,
         {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
+          headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
           body: JSON.stringify(patchBody)
         }
       );
@@ -57556,7 +57799,7 @@ async function commitStructuralMutation(pid, targetPath, route, body, label, dep
     `/api/projects/${pid}/file-mutations/${route}/${encodeURIComponent(targetPath)}`,
     {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
       body: JSON.stringify(body)
     }
   );
@@ -57785,7 +58028,7 @@ function applyChange(tween, change) {
     return rebuildKeyframeTween(tween, change.pct, change.props);
   return false;
 }
-function patchRuntimeTweenInPlace(iframe, selector, change, compositionId) {
+function patchRuntimeTweenInPlace(iframe, selector, change, compositionId, deferSeek = false) {
   if (!iframe) return false;
   if (change.kind === "global-set") return applyGlobalSet(iframe, selector, change.props);
   try {
@@ -57803,7 +58046,7 @@ function patchRuntimeTweenInPlace(iframe, selector, change, compositionId) {
     if (change.kind !== "keyframe-rebuild") {
       tween.invalidate?.();
     }
-    seekToCurrent(iframe, timeline);
+    if (!deferSeek) seekToCurrent(iframe, timeline);
     return true;
   } catch {
     return false;
@@ -58722,7 +58965,7 @@ async function mutateGsapScript(projectId, sourceFile, mutation) {
     `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations/${encodeURIComponent(sourceFile)}`,
     {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
       body: JSON.stringify(mutation)
     }
   );
@@ -58736,7 +58979,7 @@ async function mutateGsapScriptBatch(projectId, sourceFile, mutations) {
     `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations-batch/${encodeURIComponent(sourceFile)}`,
     {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
       body: JSON.stringify({ mutations })
     }
   );
@@ -58777,7 +59020,7 @@ async function runMutationRequest(mutations, options, showToast, request) {
 }
 function finishUnchangedMutation(iframe, result, options, reloadPreview) {
   if (result.changed !== false) return false;
-  if (!options.skipReload && options.instantPatch) {
+  if (!options.skipReload && (instantPatchesFor(options).length > 0 || options.previewFallbackLatch?.pending)) {
     applyPreviewSync(iframe, result, options, reloadPreview);
   }
   return true;
@@ -58834,15 +59077,31 @@ function softReloadOrEscalate(iframe, scriptText, reloadPreview, origin, authore
   if (result === "cannot-soft-reload") reloadPreview();
 }
 function applyPreviewSync(iframe, result, options, reloadPreview) {
-  if (options.instantPatch) {
-    const patched = patchRuntimeTweenInPlace(
-      iframe,
-      options.instantPatch.selector,
-      options.instantPatch.change
+  const patches = instantPatchesFor(options);
+  let needsFallback = options.previewFallbackLatch?.pending === true;
+  if (patches.length > 0) {
+    const deferSeek = options.deferPreviewSync === true;
+    const missed = patches.find(
+      (patch, index) => !patchRuntimeTweenInPlace(
+        iframe,
+        patch.selector,
+        patch.change,
+        void 0,
+        deferSeek || index < patches.length - 1
+      )
     );
-    if (patched) return;
-    trackStudioEvent("gsap_instant_patch_fallback", { selector: options.instantPatch.selector });
+    if (missed) {
+      trackStudioEvent("gsap_instant_patch_fallback", { selector: missed.selector });
+      needsFallback = true;
+    }
+    if (!needsFallback) return;
   }
+  if (options.deferPreviewSync && options.previewFallbackLatch) {
+    options.previewFallbackLatch.pending = needsFallback;
+    return;
+  }
+  if (options.deferPreviewSync && !needsFallback) return;
+  if (options.previewFallbackLatch) options.previewFallbackLatch.pending = false;
   if (options.softReload && result.scriptText) {
     softReloadOrEscalate(
       iframe,
@@ -58855,6 +59114,12 @@ function applyPreviewSync(iframe, result, options, reloadPreview) {
     reloadPreview();
   }
 }
+function instantPatchesFor(options) {
+  return [
+    ...options.instantPatches ?? [],
+    ...options.instantPatch ? [options.instantPatch] : []
+  ];
+}
 function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession, publishSdkSession, writeProjectFile, forceReloadSdkSession }) {
   const activeProjectId = projectIdRef.current;
   const activeCompPathRef = useRef104(activeCompPath);
@@ -58924,7 +59189,9 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     );
     if (!result) return;
     options.onResult?.(result);
-    await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, options);
+    const instantPatches = calls.map(({ options: callOptions }) => callOptions.instantPatch).filter((patch) => patch !== void 0);
+    const { instantPatch: _instantPatch, ...batchOptions } = options;
+    await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, instantPatches.length > 0 ? { ...batchOptions, instantPatches } : batchOptions);
   }, [showToast, finalizeSuccessfulMutation]);
   const commitMutation = useMemo50(() => {
     const serializeFile = (file, task) => {
@@ -59050,8 +59317,10 @@ function useDomEditPreviewSync({
   activeCompPath,
   captionEditMode,
   domEditSelectionRef,
+  domEditGroupSelectionsRef,
   domEditSelection,
   applyDomSelection,
+  refreshDomEditGroupSelectionsFromPreview,
   buildDomSelectionFromTarget,
   refreshPreviewDocumentVersion,
   syncPreviewHistoryHotkey,
@@ -59076,6 +59345,15 @@ function useDomEditPreviewSync({
       reapplyPositionEditsAfterSeek(doc);
       const nextElement = findElementForSelection(doc, currentSelection, activeCompPath);
       if (!nextElement) {
+        const group = domEditGroupSelectionsRef.current;
+        logSelect("preview-sync-lost", {
+          target: currentSelection.selector ?? currentSelection.id ?? null,
+          group: group.length
+        });
+        if (group.length > 1) {
+          await refreshDomEditGroupSelectionsFromPreview(group);
+          return;
+        }
         applyDomSelection(null, { revealPanel: false });
         return;
       }
@@ -59103,8 +59381,10 @@ function useDomEditPreviewSync({
     applyDomSelection,
     buildDomSelectionFromTarget,
     captionEditMode,
+    domEditGroupSelectionsRef,
     domEditSelectionRef,
     previewIframe,
+    refreshDomEditGroupSelectionsFromPreview,
     refreshPreviewDocumentVersion,
     syncPreviewHistoryHotkey,
     applyStudioManualEditsToPreviewRef,
@@ -59140,11 +59420,12 @@ function selectElementAnimationsOrRetry(parsed, target) {
   if (parsed.animations.length === 0) return { kind: "cold" };
   return { kind: "resolved", animations: getAnimationsForElement(parsed.animations, target) };
 }
-async function fetchElementAnimationsWithRetry(projectId, gsapSourceFile, target, failOnFetchError) {
+async function fetchElementAnimationsWithRetry(projectId, gsapSourceFile, target, failOnFetchError, fresh) {
   let coldAttempts = 0;
   let errorAttempts = 0;
   for (; ; ) {
-    const parsed = await fetchParsedAnimations(projectId, gsapSourceFile);
+    const parsed = await fetchParsedAnimations(projectId, gsapSourceFile, { fresh });
+    fresh = false;
     const outcome = selectElementAnimationsOrRetry(parsed, target);
     if (outcome.kind === "resolved") return outcome.animations;
     if (outcome.kind === "fetch-error") {
@@ -59170,7 +59451,8 @@ function useGsapAnimationFetchFallback(projectId, gsapSourceFile) {
         projectId,
         gsapSourceFile,
         target,
-        options?.failOnFetchError === true
+        options?.failOnFetchError === true,
+        options?.fresh === true
       );
     },
     [projectId, gsapSourceFile]
@@ -59185,12 +59467,12 @@ function useGsapInteractionFailureTelemetry(activeCompPath, showToast) {
       trackStudioSaveFailure({
         source: "gsap_commit",
         error,
-        filePath: selection.sourceFile ?? activeCompPath ?? "index.html",
+        filePath: selection?.sourceFile ?? activeCompPath ?? "index.html",
         mutationType,
         label,
-        targetId: selection.id,
-        targetSelector: selection.selector,
-        targetSourceFile: selection.sourceFile
+        targetId: selection?.id,
+        targetSelector: selection?.selector,
+        targetSourceFile: selection?.sourceFile
       });
       showToast(
         isGsapEditBlockedError(error) ? error.message : "Failed to save animated edit.",
@@ -59502,6 +59784,8 @@ function useDomEditWiring({
   activeCompPath,
   domEditSelection,
   domEditSelectionRef,
+  domEditGroupSelectionsRef,
+  refreshDomEditGroupSelectionsFromPreview,
   previewIframeRef,
   previewIframe,
   captionEditMode,
@@ -59615,8 +59899,10 @@ function useDomEditWiring({
     activeCompPath,
     captionEditMode,
     domEditSelectionRef,
+    domEditGroupSelectionsRef,
     domEditSelection,
     applyDomSelection,
+    refreshDomEditGroupSelectionsFromPreview,
     buildDomSelectionFromTarget,
     refreshPreviewDocumentVersion,
     syncPreviewHistoryHotkey,
@@ -60302,6 +60588,14 @@ function useAnimatedPropertyCommit(deps) {
 
 // src/hooks/useGsapAwareEditing.ts
 var groupDragCommitCounter = 0;
+function firstPreflightFailure(results, updates) {
+  for (const [index, result] of results.entries()) {
+    if (result.status !== "rejected") continue;
+    const selection = updates[index]?.selection;
+    if (selection) return { error: result.reason, selection };
+  }
+  return null;
+}
 function useGsapAwareEditing({
   domEditSelection,
   selectedGsapAnimations,
@@ -60349,14 +60643,37 @@ function useGsapAwareEditing({
     async (updates) => {
       if (!gsapCommitMutation || updates.length === 0) return;
       const coalesceKey = `group-drag:${++groupDragCommitCounter}`;
-      const coalescedCommit = (selection, mutation, options) => gsapCommitMutation(selection, mutation, {
+      let renderOnCommit = false;
+      const previewFallbackLatch = { pending: false };
+      const withGroupOptions = (options) => ({
         ...options,
         coalesceKey,
-        coalesceMs: Number.POSITIVE_INFINITY
+        coalesceMs: Number.POSITIVE_INFINITY,
+        deferPreviewSync: !renderOnCommit,
+        previewFallbackLatch
       });
+      const queued = [];
+      const flushQueued = async () => {
+        if (queued.length === 0) return;
+        const calls = queued.splice(0, queued.length);
+        if (!gsapCommitMutation.batch) {
+          for (const call of calls) {
+            await gsapCommitMutation(call.selection, call.mutation, call.options);
+          }
+          return;
+        }
+        await gsapCommitMutation.batch(calls, {
+          ...calls.at(-1)?.options ?? { label: "Move animated layer (group)" },
+          label: "Move animated layer (group)"
+        });
+      };
+      const coalescedCommit = (selection, mutation, options) => {
+        queued.push({ selection, mutation, options: withGroupOptions(options) });
+        return Promise.resolve();
+      };
       const preflightAnimations = /* @__PURE__ */ new Map();
-      for (const { selection } of updates) {
-        try {
+      const preflightResults = await Promise.allSettled(
+        updates.map(async ({ selection }) => {
           const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
           preflightAnimations.set(selection, animations);
           const outcome = await tryGsapDragIntercept(
@@ -60369,12 +60686,20 @@ function useGsapAwareEditing({
             { preflightOnly: true }
           );
           assertGsapEditPersisted(outcome);
-        } catch (error) {
-          trackGsapInteractionFailure(error, selection, "drag", "Move animated layer (group)");
-          throw error;
-        }
+        })
+      );
+      const preflightFailure = firstPreflightFailure(preflightResults, updates);
+      if (preflightFailure) {
+        trackGsapInteractionFailure(
+          preflightFailure.error,
+          preflightFailure.selection,
+          "drag",
+          "Move animated layer (group)"
+        );
+        throw preflightFailure.error;
       }
-      for (const { selection, next } of updates) {
+      for (const [index, { selection, next }] of updates.entries()) {
+        renderOnCommit = index === updates.length - 1;
         try {
           const outcome = await tryGsapDragIntercept(
             selection,
@@ -60382,7 +60707,13 @@ function useGsapAwareEditing({
             preflightAnimations.get(selection) ?? [],
             previewIframeRef.current,
             coalescedCommit,
-            makeFetchFallback(selection),
+            // The intercept re-reads the file to resolve a stale or shared tween.
+            // Anything already queued has to be on disk before that read, or it
+            // resolves against a file missing writes it is about to build on.
+            async () => {
+              await flushQueued();
+              return makeFetchFallback(selection, { fresh: true })();
+            },
             { preflightPassed: true }
           );
           assertGsapEditPersisted(outcome);
@@ -60391,6 +60722,12 @@ function useGsapAwareEditing({
           throw error;
         }
       }
+      try {
+        await flushQueued();
+      } catch (error) {
+        trackGsapInteractionFailure(error, null, "drag", "Move animated layer (group)");
+        throw error;
+      }
     },
     [gsapCommitMutation, previewIframeRef, makeFetchFallback, trackGsapInteractionFailure]
   );
@@ -60787,13 +61124,14 @@ function useKeyframeEaseCommits({
 function useDomEditSession({
   projectId,
   activeCompPath,
-  isMasterView,
   compIdToSrc,
   captionEditMode,
   compositionLoading,
   previewIframeRef,
   timelineElements,
+  getTimelineSelectionSet: getTimelineSelectionSet2,
   setSelectedTimelineElementId,
+  setTimelineSelectionSet,
   setRightCollapsed,
   setRightPanelTab,
   showToast,
@@ -60823,6 +61161,7 @@ function useDomEditSession({
   publishSdkSession,
   forceReloadSdkSession
 }) {
+  const isMasterView = !activeCompPath || activeCompPath === "index.html";
   void _setRefreshKey;
   const {
     domEditSelection,
@@ -60841,6 +61180,7 @@ function useDomEditSession({
     buildDomSelectionForTimelineElement,
     handleTimelineElementSelect,
     refreshDomEditSelectionFromPreview,
+    refreshDomEditGroupSelectionsFromPreview,
     applyMarqueeSelection
   } = useDomSelection({
     projectId,
@@ -60850,7 +61190,9 @@ function useDomEditSession({
     captionEditMode,
     previewIframeRef,
     timelineElements,
+    getTimelineSelectionSet: getTimelineSelectionSet2,
     setSelectedTimelineElementId,
+    setTimelineSelectionSet,
     setRightCollapsed,
     setRightPanelTab,
     previewIframe,
@@ -61061,6 +61403,8 @@ function useDomEditSession({
     activeCompPath,
     domEditSelection,
     domEditSelectionRef,
+    domEditGroupSelectionsRef,
+    refreshDomEditGroupSelectionsFromPreview,
     previewIframeRef,
     previewIframe,
     captionEditMode,
@@ -61611,6 +61955,7 @@ function useExternalFileChangeCoordinator({
   }, [loadConflictSnapshot, projectId, recoveryFilePath]);
   const reloadAcceptedGeneration = useCallback104(
     (path) => {
+      logReload("reload", { path, by: "external-change coordinator" });
       reloadPreview();
       reloadSdkSession(path);
     },
@@ -61632,10 +61977,21 @@ function useExternalFileChangeCoordinator({
       const pendingTimelinePaths = pendingTimelineEditPathRef.current;
       pendingTimelinePaths.delete(path);
       const content = readFileChangeContent(payload);
-      if (consumeStudioWriteToken(readFileChangeWriteToken(payload))) return;
-      if (content != null && isSelfWriteEcho(path, content)) return;
+      const token = readFileChangeWriteToken(payload);
+      logReload("file-change", { path, token: token ?? null, hasContent: content != null });
+      if (consumeStudioWriteToken(token)) {
+        logReload("suppressed", { path, why: "own write token" });
+        return;
+      }
+      if (content != null && isSelfWriteEcho(path, content)) {
+        logReload("suppressed", { path, why: "own content echo" });
+        return;
+      }
       const identity = eventIdentity(path, payload);
-      if (!allowDuplicate && identity != null && identity === lastEventIdentityRef.current) return;
+      if (!allowDuplicate && identity != null && identity === lastEventIdentityRef.current) {
+        logReload("suppressed", { path, why: "duplicate event" });
+        return;
+      }
       lastEventIdentityRef.current = identity;
       const generation = ++generationRef.current;
       const result = await drainPendingChanges();
@@ -63966,17 +64322,50 @@ function parseNumber(value) {
 function parseTab(value) {
   return VALID_TABS.includes(value) ? value : null;
 }
+function optionalString(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function normalizedIndex(value) {
+  return typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.floor(value)) : void 0;
+}
+function parseSelectionTarget(value) {
+  if (!value || typeof value !== "object") return null;
+  const sourceFile = optionalString(Reflect.get(value, "sourceFile"));
+  const id = optionalString(Reflect.get(value, "id"));
+  const selector = optionalString(Reflect.get(value, "selector"));
+  if (!id && !selector) return null;
+  return {
+    sourceFile,
+    id,
+    selector,
+    selectorIndex: normalizedIndex(Reflect.get(value, "selectorIndex"))
+  };
+}
+function parseGroup(value) {
+  if (!value) return void 0;
+  let parsed;
+  try {
+    parsed = JSON.parse(value);
+  } catch {
+    const legacy = value.split(",").map((id) => id.trim()).filter(Boolean).map((id) => ({ id }));
+    return legacy.length > 0 ? legacy : void 0;
+  }
+  if (!Array.isArray(parsed)) return void 0;
+  const targets = parsed.map(parseSelectionTarget).filter((target) => target !== null);
+  return targets.length > 0 ? targets : void 0;
+}
 function normalizeSelection(params) {
   const sourceFile = params.get("selFile") || void 0;
   const id = params.get("selId") || void 0;
   const selector = params.get("selSelector") || void 0;
-  const selectorIndex = parseNumber(params.get("selIndex"));
   if (!sourceFile && !id && !selector) return null;
+  const selectorIndex = parseNumber(params.get("selIndex"));
   return {
     sourceFile,
     id,
     selector,
-    selectorIndex: selectorIndex != null ? Math.max(0, Math.floor(selectorIndex)) : void 0
+    selectorIndex: selectorIndex != null ? Math.max(0, Math.floor(selectorIndex)) : void 0,
+    group: parseGroup(params.get("selGroup"))
   };
 }
 function defaultStudioUrlState() {
@@ -64023,13 +64412,15 @@ function buildStudioHash(projectId, state) {
     if (typeof state.selection.selectorIndex === "number") {
       params.set("selIndex", String(Math.max(0, Math.floor(state.selection.selectorIndex))));
     }
+    if (state.selection.group?.length) {
+      params.set("selGroup", JSON.stringify(state.selection.group));
+    }
   }
   return buildProjectHash(projectId, params);
 }
 
 // src/hooks/useStudioUrlState.ts
-function toPersistedSelection(selection) {
-  if (!selection) return null;
+function toPersistedTarget(selection) {
   if (!selection.id && !selection.selector) return null;
   return {
     sourceFile: selection.sourceFile || void 0,
@@ -64038,11 +64429,78 @@ function toPersistedSelection(selection) {
     selectorIndex: selection.selectorIndex ?? void 0
   };
 }
+function selectionTargetKey(selection) {
+  return [
+    selection.sourceFile ?? "",
+    selection.id ?? "",
+    selection.selector ?? "",
+    selection.selectorIndex ?? ""
+  ].join("|");
+}
+function toPersistedSelection(selection, group = []) {
+  if (!selection) return null;
+  const primary = toPersistedTarget(selection);
+  if (!primary) return null;
+  const primaryKey = selectionTargetKey(primary);
+  const members = /* @__PURE__ */ new Map();
+  for (const member of group) {
+    const target = toPersistedTarget(member);
+    if (!target) continue;
+    const key2 = selectionTargetKey(target);
+    if (key2 !== primaryKey) members.set(key2, target);
+  }
+  return {
+    ...primary,
+    group: members.size > 0 ? [...members.values()] : void 0
+  };
+}
 function replaceHash(nextHash) {
   if (typeof window === "undefined") return;
   if (window.location.hash === nextHash) return;
   window.history.replaceState(null, "", nextHash);
 }
+function findUrlSelectionElement(doc, target, fallbackSourceFile, activeCompPath) {
+  return findElementForSelection(
+    doc,
+    {
+      sourceFile: target.sourceFile ?? fallbackSourceFile,
+      id: target.id,
+      selector: target.selector,
+      selectorIndex: target.selectorIndex
+    },
+    activeCompPath
+  );
+}
+async function buildOptionalDomSelection(element, buildDomSelection) {
+  if (!element) return null;
+  return buildDomSelection(element, { preferClipAncestor: false });
+}
+async function resolveUrlSelections({
+  doc,
+  primaryElement,
+  selection,
+  group,
+  activeCompPath,
+  isCurrent,
+  buildDomSelection
+}) {
+  const primary = await buildDomSelection(primaryElement, { preferClipAncestor: false });
+  if (!isCurrent()) return null;
+  if (!primary) return [];
+  const members = [primary];
+  for (const member of group) {
+    const element = findUrlSelectionElement(
+      doc,
+      member,
+      selection.sourceFile ?? "",
+      activeCompPath
+    );
+    const resolved = await buildOptionalDomSelection(element, buildDomSelection);
+    if (!isCurrent()) return null;
+    if (resolved) members.push(resolved);
+  }
+  return members;
+}
 function useStudioUrlState({
   projectId,
   activeCompPath,
@@ -64055,6 +64513,8 @@ function useStudioUrlState({
   rightCollapsed,
   activeCompPathHydrated,
   domEditSelection,
+  domEditGroupSelections,
+  applyMarqueeSelection,
   buildDomSelectionFromTarget,
   applyDomSelection,
   setRightPanelTab,
@@ -64067,6 +64527,7 @@ function useStudioUrlState({
   const [selectionHydrated, setSelectionHydrated] = useState97(initialState2.selection == null);
   const pendingSelectionRef = useRef120(initialState2.selection);
   const stableTimeRef = useRef120(initialState2.currentTime);
+  const selectionApplySeqRef = useRef120(0);
   const buildUrlState = useCallback117(
     () => ({
       activeCompPath,
@@ -64074,12 +64535,13 @@ function useStudioUrlState({
       rightPanelTab,
       rightCollapsed,
       timelineVisible: null,
-      selection: hydratedSelectionRef.current ? toPersistedSelection(domEditSelection) : pendingSelectionRef.current
+      selection: hydratedSelectionRef.current ? toPersistedSelection(domEditSelection, domEditGroupSelections) : pendingSelectionRef.current
     }),
-    [activeCompPath, domEditSelection, rightCollapsed, rightPanelTab]
+    [activeCompPath, domEditGroupSelections, domEditSelection, rightCollapsed, rightPanelTab]
   );
   const applyUrlSelection = useCallback117(
     (selection) => {
+      const applySeq = ++selectionApplySeqRef.current;
       if (!selection) {
         applyDomSelection(null, { revealPanel: false });
         return true;
@@ -64105,12 +64567,31 @@ function useStudioUrlState({
         applyDomSelection(null, { revealPanel: false });
         return true;
       }
-      void buildDomSelectionFromTarget(element, { preferClipAncestor: false }).then((resolved) => {
-        applyDomSelection(resolved, { revealPanel: false });
+      const group = selection.group ?? [];
+      void resolveUrlSelections({
+        doc,
+        primaryElement: element,
+        selection,
+        group,
+        activeCompPath,
+        isCurrent: () => applySeq === selectionApplySeqRef.current,
+        buildDomSelection: buildDomSelectionFromTarget
+      }).then((members) => {
+        if (!members) return;
+        const primary = members[0];
+        if (!primary) return applyDomSelection(null, { revealPanel: false });
+        if (group.length === 0) return applyDomSelection(primary, { revealPanel: false });
+        applyMarqueeSelection(members, false);
       });
       return true;
     },
-    [activeCompPath, applyDomSelection, buildDomSelectionFromTarget, previewIframeRef]
+    [
+      activeCompPath,
+      applyDomSelection,
+      applyMarqueeSelection,
+      buildDomSelectionFromTarget,
+      previewIframeRef
+    ]
   );
   useEffect92(() => {
     if (!projectId || hydratedSeekRef.current || compositionLoading) return;
@@ -73055,7 +73536,7 @@ function isTextInput(el) {
   return el.isContentEditable === true;
 }
 function useKeyframeKeyboard({
-  enabled: enabled2,
+  enabled,
   onAddKeyframe,
   onDeleteKeyframe,
   onPrevKeyframe,
@@ -73066,7 +73547,7 @@ function useKeyframeKeyboard({
 }) {
   const handler = useCallback146(
     (e) => {
-      if (!enabled2) return;
+      if (!enabled) return;
       if (isTextInput(document.activeElement)) return;
       if (e.metaKey || e.ctrlKey) return;
       const hasSelectedKeyframes = usePlayerStore.getState().selectedKeyframes.size > 0;
@@ -73105,7 +73586,7 @@ function useKeyframeKeyboard({
       }
     },
     [
-      enabled2,
+      enabled,
       onAddKeyframe,
       onDeleteKeyframe,
       onPrevKeyframe,
@@ -73116,10 +73597,10 @@ function useKeyframeKeyboard({
     ]
   );
   useEffect110(() => {
-    if (!enabled2) return;
+    if (!enabled) return;
     window.addEventListener("keydown", handler, { capture: true });
     return () => window.removeEventListener("keydown", handler, { capture: true });
-  }, [enabled2, handler]);
+  }, [enabled, handler]);
 }
 
 // src/components/TimelineToolbar.tsx
@@ -75094,6 +75575,7 @@ function useTimelineAddAtPlayhead(addAsset, addComposition) {
 
 // src/App.tsx
 import { jsx as jsx184, jsxs as jsxs153 } from "react/jsx-runtime";
+var getTimelineSelectionSet = () => usePlayerStore.getState().selectedElementIds;
 function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
   const initialUrlStateRef = useRef142(readStudioUrlStateFromWindow());
@@ -75119,9 +75601,9 @@ function StudioApp() {
   const captionSync = useCaptionSync(projectId);
   const timelineElements = usePlayerStore((s) => s.elements);
   const setSelectedTimelineElementId = usePlayerStore((s) => s.setSelectedElementId);
+  const setTimelineSelectionSet = usePlayerStore((s) => s.setSelectedElementIds);
   const timelineDuration2 = usePlayerStore((s) => s.duration);
   const isPlaying = usePlayerStore((s) => s.isPlaying);
-  const isMasterView = !activeCompPath || activeCompPath === "index.html";
   const effectiveTimelineDuration = useMemo66(() => {
     const maxEnd = timelineElements.length > 0 ? Math.max(...timelineElements.map((el) => el.start + el.duration)) : 0;
     return Math.max(timelineDuration2, maxEnd);
@@ -75299,13 +75781,14 @@ function StudioApp() {
   const domEditSession = useDomEditSession({
     projectId,
     activeCompPath,
-    isMasterView,
     compIdToSrc,
     captionEditMode,
     compositionLoading,
     previewIframeRef,
     timelineElements,
+    getTimelineSelectionSet,
     setSelectedTimelineElementId,
+    setTimelineSelectionSet,
     setRightCollapsed: panelLayout.setRightCollapsed,
     setRightPanelTab: panelLayout.setRightPanelTab,
     showToast,
@@ -75444,6 +75927,8 @@ function StudioApp() {
     rightCollapsed: panelLayout.rightCollapsed,
     activeCompPathHydrated,
     domEditSelection: domEditSession.domEditSelection,
+    domEditGroupSelections: domEditSession.domEditGroupSelections,
+    applyMarqueeSelection: domEditSession.applyMarqueeSelection,
     buildDomSelectionFromTarget: domEditSession.buildDomSelectionFromTarget,
     applyDomSelection: domEditSession.applyDomSelection,
     setRightPanelTab: panelLayout.setRightPanelTab,