@hyperframes/studio 0.8.48 → 0.8.49

package/dist/index.js

@@ -1195,6 +1195,9 @@ function deriveTimelineStoreKey(params) {
   if (!params.domId && !params.selector) return void 0;
   return buildTimelineElementKey({ id: "", fallbackIndex: 0, ...params });
 }
+function deriveTimelineStoreKeyForDomId(domId, sourceFile) {
+  return deriveTimelineStoreKey({ domId, sourceFile });
+}
 function getTimelineDomNodes(doc) {
   const rootComp = doc.querySelector("[data-composition-id]");
   return Array.from(doc.querySelectorAll("[data-start]")).filter(
@@ -18623,6 +18626,71 @@ function snapMoveToTargets(start, duration, targets, pixelsPerSecond, timelineDu
   return { start: clamped, snapTime: target?.time ?? null, snapType: target?.type ?? null };
 }
 
+// src/player/components/timelineZones.ts
+function classifyZone(el) {
+  return isAudioTimelineElement(el) ? "audio" : "visual";
+}
+function isMainTrackElement(el) {
+  return el.track === 0 && classifyZone(el) === "visual" && el.expandedParentStart == null;
+}
+var keyOf = (el) => el.key ?? el.id;
+var EPS = 1e-6;
+function overlaps2(a, b) {
+  return a.start < b.start + b.duration - EPS && b.start < a.start + a.duration - EPS;
+}
+function byStableId(a, b) {
+  const ka = keyOf(a);
+  const kb = keyOf(b);
+  return ka < kb ? -1 : ka > kb ? 1 : 0;
+}
+function packTrackLanes(clips, base2, laneOf) {
+  const ordered = [...clips].sort(byStableId);
+  const lanes = [];
+  for (const el of ordered) {
+    let sub = lanes.findIndex((occ) => occ.every((o) => !overlaps2(o, el)));
+    if (sub === -1) {
+      sub = lanes.length;
+      lanes.push([]);
+    }
+    lanes[sub].push(el);
+    laneOf.set(keyOf(el), base2 + sub);
+  }
+  return Math.max(1, lanes.length);
+}
+function packZoneLanes(clips, base2, laneOf) {
+  const byTrack = /* @__PURE__ */ new Map();
+  for (const el of clips) {
+    const list = byTrack.get(el.track);
+    if (list) list.push(el);
+    else byTrack.set(el.track, [el]);
+  }
+  let used = 0;
+  for (const track2 of [...byTrack.keys()].sort((a, b) => a - b)) {
+    used += packTrackLanes(byTrack.get(track2), base2 + used, laneOf);
+  }
+  return used;
+}
+function normalizeToZones(elements) {
+  if (elements.length === 0) return elements;
+  const laneOf = /* @__PURE__ */ new Map();
+  const visual = [];
+  const audio = [];
+  for (const el of elements) {
+    (classifyZone(el) === "audio" ? audio : visual).push(el);
+  }
+  let nextLane = 0;
+  nextLane += packZoneLanes(visual, nextLane, laneOf);
+  packZoneLanes(audio, nextLane, laneOf);
+  let changed = false;
+  const remapped = elements.map((el) => {
+    const lane = laneOf.get(keyOf(el));
+    if (lane == null || lane === el.track) return el;
+    changed = true;
+    return { ...el, track: lane, authoredTrack: el.authoredTrack ?? el.track };
+  });
+  return changed ? remapped : elements;
+}
+
 // src/player/components/timelineCollision.ts
 function clampTrackToZone(targetTrack, trackOrder, audioRow, isAudio) {
   if (audioRow < 0) return targetTrack;
@@ -18675,6 +18743,21 @@ function resolveZoneDropPlacement(input) {
   }
   return { track: placement.track, insertRow: null };
 }
+function landsOnMainTrack(landingTrack, isAudio) {
+  return isMainTrackElement({
+    id: "",
+    tag: isAudio ? "audio" : "video",
+    start: 0,
+    duration: 0,
+    track: landingTrack
+  });
+}
+function resolveMainTrackDropStart(others, originTrack, landingTrack, isAudio, desiredStart) {
+  if (originTrack === landingTrack || !landsOnMainTrack(landingTrack, isAudio)) {
+    return desiredStart;
+  }
+  return others.some(isMainTrackElement) ? desiredStart : 0;
+}
 function resolveInsertRow(rowFloat, trackCount, band = INSERT_BOUNDARY_BAND) {
   if (trackCount === 0) return 0;
   if (rowFloat <= 0) return 0;
@@ -18720,6 +18803,197 @@ function resolvePlacement({
   return { track: desiredTrack, needsInsert: true };
 }
 
+// src/player/components/timelineAuthoredMoveTarget.ts
+function canMoveTimelineElement(element) {
+  return getTimelineEditCapabilities({
+    tag: element.tag,
+    kind: element.kind,
+    duration: element.duration,
+    domId: element.domId,
+    hfId: element.hfId,
+    selector: element.selector,
+    compositionSrc: element.compositionSrc,
+    playbackStart: element.playbackStart,
+    playbackStartAttr: element.playbackStartAttr,
+    sourceDuration: element.sourceDuration,
+    timingSource: element.timingSource,
+    timelineLocked: element.timelineLocked
+  }).canMove;
+}
+function resolveExpandedHostAlias(drag, deps) {
+  const selectedKeys = deps.selectedKeys;
+  if (!selectedKeys) return null;
+  const collapsedKeys = new Set(selectedKeys);
+  const candidates = deps.elements.includes(drag.element) ? deps.elements : [...deps.elements, drag.element];
+  for (const element of candidates) {
+    const hostKey2 = element.expandedHostKey;
+    const childKey2 = getTimelineElementIdentity(element);
+    if (hostKey2 && collapsedKeys.has(hostKey2) && collapsedKeys.has(childKey2)) {
+      collapsedKeys.delete(childKey2);
+    }
+  }
+  const hostKey = drag.element.expandedHostKey;
+  const childKey = getTimelineElementIdentity(drag.element);
+  if (!hostKey || collapsedKeys.has(childKey)) {
+    if (collapsedKeys.size === selectedKeys.size) return null;
+    return { drag, selectedKeys: collapsedKeys };
+  }
+  const host = deps.elements.find((element) => getTimelineElementIdentity(element) === hostKey);
+  if (!host || !canMoveTimelineElement(host)) return null;
+  const delta = drag.previewStart - drag.element.start;
+  const mapTrack = (track2) => track2 === drag.element.track ? host.track : track2;
+  return {
+    drag: {
+      ...drag,
+      element: host,
+      previewStart: Math.max(0, Math.round((host.start + delta) * 1e3) / 1e3),
+      previewTrack: mapTrack(drag.previewTrack) ?? host.track,
+      desiredTrack: mapTrack(drag.desiredTrack)
+    },
+    selectedKeys: collapsedKeys
+  };
+}
+
+// src/player/components/timelineAuthoredTrack.ts
+var keyOf2 = (element) => element.key ?? element.id;
+var sameSourceFile = (a, b) => (a.sourceFile ?? null) === (b.sourceFile ?? null);
+function authoredTrackForLane(lane, elements, dragged) {
+  const dragKey = keyOf2(dragged);
+  const peers = elements.filter((element) => {
+    return keyOf2(element) !== dragKey && sameSourceFile(element, dragged);
+  });
+  const occupant = peers.find((element) => element.track === lane);
+  if (occupant) return occupant.authoredTrack ?? occupant.track;
+  let nearest = null;
+  for (const peer of peers) {
+    if (!nearest || Math.abs(peer.track - lane) < Math.abs(nearest.track - lane)) nearest = peer;
+  }
+  if (!nearest) return lane;
+  return Math.round((nearest.authoredTrack ?? nearest.track) + (lane - nearest.track));
+}
+
+// src/player/components/timelineGaps.ts
+var TRACK_GAP_EPSILON_S = 1e-3;
+var keyOf3 = (e) => e.key ?? e.id;
+function laneGapFloor(elements) {
+  return Math.max(0, ...elements.map((e) => e.expandedParentStart ?? 0));
+}
+var round3 = (v) => Math.round(v * 1e3) / 1e3;
+var endOf = (e) => e.start + e.duration;
+function sortedLaneClips(elements) {
+  return [...elements].sort((a, b) => a.start - b.start || keyOf3(a).localeCompare(keyOf3(b)));
+}
+function resolveTrackGapAt(elements, time, epsilon = TRACK_GAP_EPSILON_S, floor = 0) {
+  const clips = sortedLaneClips(elements);
+  const occupied = clips.some((c) => time >= c.start - epsilon && time < endOf(c) - epsilon);
+  if (occupied) return null;
+  const following = clips.filter((c) => c.start > time - epsilon);
+  if (following.length === 0) return null;
+  const gapEnd = following[0].start;
+  const gapStart = Math.max(
+    floor,
+    ...clips.filter((c) => c.start <= time - epsilon).map((c) => endOf(c))
+  );
+  if (gapEnd - gapStart <= epsilon) return null;
+  return { gapStart, gapEnd, followingKeys: following.map(keyOf3) };
+}
+function resolveAllGapIntervals(elements, epsilon = TRACK_GAP_EPSILON_S, floor = 0) {
+  const gaps = [];
+  let cursor = floor;
+  for (const clip of sortedLaneClips(elements)) {
+    if (clip.start - cursor > epsilon) gaps.push({ start: cursor, end: clip.start });
+    cursor = Math.max(cursor, endOf(clip));
+  }
+  return gaps;
+}
+function resolveAllTrackGaps(elements, epsilon = TRACK_GAP_EPSILON_S, floor = 0) {
+  const shifts = [];
+  let cursor = floor;
+  for (const clip of sortedLaneClips(elements)) {
+    const newStart = round3(cursor);
+    if (Math.abs(newStart - clip.start) > epsilon) {
+      shifts.push({ key: keyOf3(clip), newStart });
+    }
+    cursor += clip.duration;
+  }
+  return shifts;
+}
+function resolveLaneEmptyIntervals(elements, end, epsilon = TRACK_GAP_EPSILON_S, floor = 0) {
+  const gaps = resolveAllGapIntervals(elements, epsilon, floor);
+  const maxEnd = Math.max(floor, ...elements.map(endOf));
+  if (end - maxEnd > epsilon) gaps.push({ start: maxEnd, end });
+  return gaps;
+}
+function resolveCloseGapShifts(elements, gap) {
+  const width = gap.gapEnd - gap.gapStart;
+  const followSet = new Set(gap.followingKeys);
+  return sortedLaneClips(elements).filter((c) => followSet.has(keyOf3(c))).map((c) => ({ key: keyOf3(c), newStart: Math.max(gap.gapStart, round3(c.start - width)) }));
+}
+
+// src/player/components/timelineDragLanding.ts
+var keyOf4 = (e) => e.key ?? e.id;
+function insertTrackValue(trackOrder, insertRow) {
+  if (trackOrder.length === 0) return 0;
+  if (insertRow <= 0) return trackOrder[0] - 0.5;
+  if (insertRow >= trackOrder.length) return trackOrder[trackOrder.length - 1] + 0.5;
+  return (trackOrder[insertRow - 1] + trackOrder[insertRow]) / 2;
+}
+function layoutAfterTrackInsert(element, previewStart, insertRow, multi, deps) {
+  const { elements, trackOrder } = deps;
+  const editKey = keyOf4(element);
+  if (element.expandedParentStart != null) return null;
+  const targetTrack = insertTrackValue(trackOrder, insertRow);
+  const writableZone = classifyZone(element);
+  const writable = (src) => sameSourceFile(src, element) && classifyZone(src) === writableZone && src.expandedParentStart == null;
+  const topologyOrder = [...new Set(elements.filter(writable).map((e) => e.track))].sort(
+    (a, b) => a - b
+  );
+  const topologyInsertRow = topologyOrder.filter((track2) => track2 < targetTrack).length;
+  const topologyTargetTrack = insertTrackValue(topologyOrder, topologyInsertRow);
+  const normalized = normalizeToZones(
+    elements.filter(writable).map((e) => {
+      if (keyOf4(e) === editKey) {
+        return { ...e, start: previewStart, track: topologyTargetTrack };
+      }
+      if (multi?.keys.has(keyOf4(e))) return { ...e, start: multi.movedStart(e) };
+      return e;
+    })
+  );
+  return { normalized, targetTrack, writable };
+}
+function resolveDragLandingStart(drag, deps) {
+  const alias = resolveExpandedHostAlias(drag, deps);
+  const target = alias?.drag ?? drag;
+  const keys = alias?.selectedKeys ?? deps.selectedKeys;
+  const element = target.element;
+  const key2 = keyOf4(element);
+  if (keys && keys.size > 1 && keys.has(key2)) return drag.previewStart;
+  let landingTrack = target.previewTrack;
+  let renumbered = /* @__PURE__ */ new Map();
+  if (target.insertRow != null) {
+    const layout = layoutAfterTrackInsert(
+      element,
+      target.previewStart,
+      target.insertRow,
+      null,
+      deps
+    );
+    if (layout) {
+      renumbered = new Map(layout.normalized.map((n) => [keyOf4(n), n.track]));
+      landingTrack = renumbered.get(key2) ?? layout.targetTrack;
+    }
+  }
+  const others = deps.elements.filter((e) => keyOf4(e) !== key2).map((e) => renumbered.has(keyOf4(e)) ? { ...e, track: renumbered.get(keyOf4(e)) } : e);
+  const snapped = resolveMainTrackDropStart(
+    others,
+    element.track,
+    landingTrack,
+    isAudioTimelineElement(element),
+    target.previewStart
+  );
+  return snapped === target.previewStart ? drag.previewStart : round3(drag.previewStart + snapped - target.previewStart);
+}
+
 // src/player/components/timelineClipDragPreview.ts
 function getTimelineDragOverlayPosition(drag, scroll) {
   if (!drag.started || !scroll) return null;
@@ -18818,12 +19092,18 @@ function computeDragPreview(drag, clientX, clientY, ctx3) {
     nextMove.track,
     ctx3
   );
+  const placed = { ...drag, previewStart, previewTrack, insertRow };
+  const snappedStart = resolveDragLandingStart(placed, {
+    elements,
+    trackOrder,
+    selectedKeys
+  });
   return {
     ...drag,
     started: true,
     pointerClientX: clientX,
     pointerClientY: clientY,
-    previewStart,
+    previewStart: snappedStart,
     previewTrack,
     // The lane the POINTER aims at (pre-collision): the commit reads it to tell a
     // deliberate vertical lane change from a horizontal drag merely bumped sideways.
@@ -19179,71 +19459,6 @@ var TimelineCanvas = memo13(function TimelineCanvas2(props) {
 // src/player/components/useTimelineClipDrag.ts
 import { useRef as useRef29, useState as useState17, useCallback as useCallback19, useMemo as useMemo16, useEffect as useEffect21 } from "react";
 
-// src/player/components/timelineZones.ts
-function classifyZone(el) {
-  return isAudioTimelineElement(el) ? "audio" : "visual";
-}
-function isMainTrackElement(el) {
-  return el.track === 0 && classifyZone(el) === "visual" && el.expandedParentStart == null;
-}
-var keyOf = (el) => el.key ?? el.id;
-var EPS = 1e-6;
-function overlaps2(a, b) {
-  return a.start < b.start + b.duration - EPS && b.start < a.start + a.duration - EPS;
-}
-function byStableId(a, b) {
-  const ka = keyOf(a);
-  const kb = keyOf(b);
-  return ka < kb ? -1 : ka > kb ? 1 : 0;
-}
-function packTrackLanes(clips, base2, laneOf) {
-  const ordered = [...clips].sort(byStableId);
-  const lanes = [];
-  for (const el of ordered) {
-    let sub = lanes.findIndex((occ) => occ.every((o) => !overlaps2(o, el)));
-    if (sub === -1) {
-      sub = lanes.length;
-      lanes.push([]);
-    }
-    lanes[sub].push(el);
-    laneOf.set(keyOf(el), base2 + sub);
-  }
-  return Math.max(1, lanes.length);
-}
-function packZoneLanes(clips, base2, laneOf) {
-  const byTrack = /* @__PURE__ */ new Map();
-  for (const el of clips) {
-    const list = byTrack.get(el.track);
-    if (list) list.push(el);
-    else byTrack.set(el.track, [el]);
-  }
-  let used = 0;
-  for (const track2 of [...byTrack.keys()].sort((a, b) => a - b)) {
-    used += packTrackLanes(byTrack.get(track2), base2 + used, laneOf);
-  }
-  return used;
-}
-function normalizeToZones(elements) {
-  if (elements.length === 0) return elements;
-  const laneOf = /* @__PURE__ */ new Map();
-  const visual = [];
-  const audio = [];
-  for (const el of elements) {
-    (classifyZone(el) === "audio" ? audio : visual).push(el);
-  }
-  let nextLane = 0;
-  nextLane += packZoneLanes(visual, nextLane, laneOf);
-  packZoneLanes(audio, nextLane, laneOf);
-  let changed = false;
-  const remapped = elements.map((el) => {
-    const lane = laneOf.get(keyOf(el));
-    if (lane == null || lane === el.track) return el;
-    changed = true;
-    return { ...el, track: lane, authoredTrack: el.authoredTrack ?? el.track };
-  });
-  return changed ? remapped : elements;
-}
-
 // src/player/components/timelineStackingSync.ts
 var EPS2 = 1e-6;
 var paintScopeKey = (el) => JSON.stringify([el.sourceFile ?? null, el.stackingContextId ?? null]);
@@ -19359,57 +19574,6 @@ function computeStackingPatches(elements, editedKeys) {
   return patches;
 }
 
-// src/player/components/timelineAuthoredMoveTarget.ts
-function canMoveTimelineElement(element) {
-  return getTimelineEditCapabilities({
-    tag: element.tag,
-    kind: element.kind,
-    duration: element.duration,
-    domId: element.domId,
-    hfId: element.hfId,
-    selector: element.selector,
-    compositionSrc: element.compositionSrc,
-    playbackStart: element.playbackStart,
-    playbackStartAttr: element.playbackStartAttr,
-    sourceDuration: element.sourceDuration,
-    timingSource: element.timingSource,
-    timelineLocked: element.timelineLocked
-  }).canMove;
-}
-function resolveExpandedHostAlias(drag, deps) {
-  const selectedKeys = deps.selectedKeys;
-  if (!selectedKeys) return null;
-  const collapsedKeys = new Set(selectedKeys);
-  const candidates = deps.elements.includes(drag.element) ? deps.elements : [...deps.elements, drag.element];
-  for (const element of candidates) {
-    const hostKey2 = element.expandedHostKey;
-    const childKey2 = getTimelineElementIdentity(element);
-    if (hostKey2 && collapsedKeys.has(hostKey2) && collapsedKeys.has(childKey2)) {
-      collapsedKeys.delete(childKey2);
-    }
-  }
-  const hostKey = drag.element.expandedHostKey;
-  const childKey = getTimelineElementIdentity(drag.element);
-  if (!hostKey || collapsedKeys.has(childKey)) {
-    if (collapsedKeys.size === selectedKeys.size) return null;
-    return { drag, selectedKeys: collapsedKeys };
-  }
-  const host = deps.elements.find((element) => getTimelineElementIdentity(element) === hostKey);
-  if (!host || !canMoveTimelineElement(host)) return null;
-  const delta = drag.previewStart - drag.element.start;
-  const mapTrack = (track2) => track2 === drag.element.track ? host.track : track2;
-  return {
-    drag: {
-      ...drag,
-      element: host,
-      previewStart: Math.max(0, Math.round((host.start + delta) * 1e3) / 1e3),
-      previewTrack: mapTrack(drag.previewTrack) ?? host.track,
-      desiredTrack: mapTrack(drag.desiredTrack)
-    },
-    selectedKeys: collapsedKeys
-  };
-}
-
 // src/player/components/timelineOptimisticRevision.ts
 var revisionsByUpdater = /* @__PURE__ */ new WeakMap();
 function beginTimelineOptimisticGesture(updateElement, keys) {
@@ -19485,27 +19649,9 @@ function refreshAfterDurableLaneMove(pending2, deps) {
   });
 }
 
-// src/player/components/timelineAuthoredTrack.ts
-var keyOf2 = (element) => element.key ?? element.id;
-var sameSourceFile = (a, b) => (a.sourceFile ?? null) === (b.sourceFile ?? null);
-function authoredTrackForLane(lane, elements, dragged) {
-  const dragKey = keyOf2(dragged);
-  const peers = elements.filter((element) => {
-    return keyOf2(element) !== dragKey && sameSourceFile(element, dragged);
-  });
-  const occupant = peers.find((element) => element.track === lane);
-  if (occupant) return occupant.authoredTrack ?? occupant.track;
-  let nearest = null;
-  for (const peer of peers) {
-    if (!nearest || Math.abs(peer.track - lane) < Math.abs(nearest.track - lane)) nearest = peer;
-  }
-  if (!nearest) return lane;
-  return Math.round((nearest.authoredTrack ?? nearest.track) + (lane - nearest.track));
-}
-
 // src/player/components/timelineClipDragCommit.ts
-var keyOf3 = (e) => e.key ?? e.id;
-var round3 = (v) => Math.round(v * 1e3) / 1e3;
+var keyOf5 = (e) => e.key ?? e.id;
+var round32 = (v) => Math.round(v * 1e3) / 1e3;
 var laneChangeGestureSeq = 0;
 function persistMoveEdits(edits, deps, coalesceKey, operation = "timing", coalesceMs) {
   if (edits.length === 0) return Promise.resolve(true);
@@ -19516,19 +19662,19 @@ function persistMoveEdits(edits, deps, coalesceKey, operation = "timing", coales
     );
   }
   const prev = edits.map((e) => ({
-    key: keyOf3(e.element),
+    key: keyOf5(e.element),
     start: e.element.start,
     track: e.element.track,
     authoredTrack: e.element.authoredTrack
   }));
   const revision = beginTimelineOptimisticGesture(
     updateElement,
-    edits.map((edit) => keyOf3(edit.element))
+    edits.map((edit) => keyOf5(edit.element))
   );
   const applyEdit = (e) => {
     const writtenTrack = e.persistTrack ?? (e.updates.track !== e.element.track ? e.updates.track : void 0);
     updateElement(
-      keyOf3(e.element),
+      keyOf5(e.element),
       writtenTrack == null ? e.updates : { ...e.updates, authoredTrack: writtenTrack }
     );
   };
@@ -19540,7 +19686,7 @@ function persistMoveEdits(edits, deps, coalesceKey, operation = "timing", coales
   return Promise.resolve(persisted).then(
     () => {
       for (const e of edits) {
-        const key2 = keyOf3(e.element);
+        const key2 = keyOf5(e.element);
         if (isLatestTimelineOptimisticGesture(updateElement, revision, key2)) applyEdit(e);
       }
       return true;
@@ -19556,34 +19702,29 @@ function persistMoveEdits(edits, deps, coalesceKey, operation = "timing", coales
     }
   );
 }
-function insertTrackValue(trackOrder, insertRow) {
-  if (trackOrder.length === 0) return 0;
-  if (insertRow <= 0) return trackOrder[0] - 0.5;
-  if (insertRow >= trackOrder.length) return trackOrder[trackOrder.length - 1] + 0.5;
-  return (trackOrder[insertRow - 1] + trackOrder[insertRow]) / 2;
-}
 function resolveMultiSelection(drag, deps) {
   const { elements, selectedKeys } = deps;
-  const dragKey = keyOf3(drag.element);
+  const dragKey = keyOf5(drag.element);
   if (!selectedKeys || selectedKeys.size <= 1 || !selectedKeys.has(dragKey)) return null;
   const keys = new Set(
     [...selectedKeys].filter((k) => {
-      const el = elements.find((e) => keyOf3(e) === k);
+      const el = elements.find((e) => keyOf5(e) === k);
       return el ? canMoveTimelineElement(el) : false;
     })
   );
   const delta = drag.previewStart - drag.element.start;
-  const movedStart = (e) => keyOf3(e) === dragKey ? drag.previewStart : Math.max(0, round3(e.start + delta));
+  const movedStart = (e) => keyOf5(e) === dragKey ? drag.previewStart : Math.max(0, round32(e.start + delta));
   return { keys, movedStart };
 }
-function commitDraggedClipMove(drag, deps) {
+function commitDraggedClipMove(rawDrag, deps) {
+  const drag = { ...rawDrag, previewStart: resolveDragLandingStart(rawDrag, deps) };
   const hostAlias = resolveExpandedHostAlias(drag, deps);
   if (hostAlias) {
     commitDraggedClipMove(hostAlias.drag, { ...deps, selectedKeys: hostAlias.selectedKeys });
     return;
   }
   const { elements, updateElement, onMoveElement } = deps;
-  const dragKey = keyOf3(drag.element);
+  const dragKey = keyOf5(drag.element);
   const isInsert = drag.insertRow != null;
   const laneChanged = drag.previewTrack !== drag.element.track;
   const aimTrack = drag.desiredTrack ?? drag.previewTrack;
@@ -19593,7 +19734,7 @@ function commitDraggedClipMove(drag, deps) {
     const delta = drag.previewStart - drag.element.start;
     if (delta === 0) return;
     if (multi) {
-      const edits2 = elements.filter((e) => multi.keys.has(keyOf3(e))).map((e) => ({
+      const edits2 = elements.filter((e) => multi.keys.has(keyOf5(e))).map((e) => ({
         element: e,
         updates: { start: multi.movedStart(e), track: e.track }
       })).filter((e) => e.updates.start !== e.element.start);
@@ -19625,14 +19766,14 @@ function commitDraggedClipMove(drag, deps) {
   const edits = [dragEdit];
   if (multi) {
     for (const e of elements) {
-      if (keyOf3(e) === dragKey || !multi.keys.has(keyOf3(e))) continue;
+      if (keyOf5(e) === dragKey || !multi.keys.has(keyOf5(e))) continue;
       const start = multi.movedStart(e);
       if (start !== e.start) edits.push({ element: e, updates: { start, track: e.track } });
     }
   }
   const candidate = elements.map((e) => {
-    if (keyOf3(e) === dragKey) return { ...e, start: drag.previewStart, track: drag.previewTrack };
-    if (multi?.keys.has(keyOf3(e))) return { ...e, start: multi.movedStart(e) };
+    if (keyOf5(e) === dragKey) return { ...e, start: drag.previewStart, track: drag.previewTrack };
+    if (multi?.keys.has(keyOf5(e))) return { ...e, start: multi.movedStart(e) };
     return e;
   });
   const multiKeys = multi ? multi.keys : null;
@@ -19660,45 +19801,30 @@ function commitDraggedClipMove(drag, deps) {
   ).catch(() => void 0);
 }
 function buildTrackInsertEdits(element, previewStart, insertRow, multi, deps) {
-  const { elements, trackOrder } = deps;
-  const editKey = keyOf3(element);
-  if (element.expandedParentStart != null) return null;
-  const targetTrack = insertTrackValue(trackOrder, insertRow);
-  const candidate = elements.map((e) => {
-    if (keyOf3(e) === editKey) return { ...e, start: previewStart, track: targetTrack };
-    if (multi?.keys.has(keyOf3(e))) return { ...e, start: multi.movedStart(e) };
-    return e;
-  });
-  const writableZone = classifyZone(element);
-  const writable = (src) => sameSourceFile(src, element) && classifyZone(src) === writableZone && src.expandedParentStart == null;
-  const topologyOrder = [...new Set(elements.filter(writable).map((e) => e.track))].sort(
-    (a, b) => a - b
-  );
-  const topologyInsertRow = topologyOrder.filter((track2) => track2 < targetTrack).length;
-  const topologyTargetTrack = insertTrackValue(topologyOrder, topologyInsertRow);
-  const normalized = normalizeToZones(
-    elements.filter(writable).map((e) => {
-      if (keyOf3(e) === editKey) {
-        return { ...e, start: previewStart, track: topologyTargetTrack };
-      }
-      if (multi?.keys.has(keyOf3(e))) return { ...e, start: multi.movedStart(e) };
-      return e;
-    })
-  );
-  const bySrc = new Map(elements.map((e) => [keyOf3(e), e]));
+  const { elements } = deps;
+  const editKey = keyOf5(element);
+  const layout = layoutAfterTrackInsert(element, previewStart, insertRow, multi, deps);
+  if (!layout) return null;
+  const { normalized, targetTrack, writable } = layout;
+  const bySrc = new Map(elements.map((e) => [keyOf5(e), e]));
   for (const norm of normalized) {
-    const src = bySrc.get(keyOf3(norm));
+    const src = bySrc.get(keyOf5(norm));
     if (src && writable(src) && !canMoveTimelineElement(src) && norm.track !== (src.authoredTrack ?? src.track)) {
       console.warn(
-        `[Timeline] Track insert refused: locked clip ${keyOf3(src)} would need renumbering`
+        `[Timeline] Track insert refused: locked clip ${keyOf5(src)} would need renumbering`
       );
       return null;
     }
   }
+  const candidate = elements.map((e) => {
+    if (keyOf5(e) === editKey) return { ...e, start: previewStart, track: targetTrack };
+    if (multi?.keys.has(keyOf5(e))) return { ...e, start: multi.movedStart(e) };
+    return e;
+  });
   const edits = [];
   if (multi) {
     for (const src of elements) {
-      const srcKey = keyOf3(src);
+      const srcKey = keyOf5(src);
       if (srcKey !== editKey && multi.keys.has(srcKey) && !writable(src) && canMoveTimelineElement(src)) {
         edits.push({
           element: src,
@@ -19709,15 +19835,18 @@ function buildTrackInsertEdits(element, previewStart, insertRow, multi, deps) {
     }
   }
   for (const norm of normalized) {
-    const src = bySrc.get(keyOf3(norm));
+    const src = bySrc.get(keyOf5(norm));
     if (!src || !canMoveTimelineElement(src)) continue;
-    const start = keyOf3(norm) === editKey || multi?.keys.has(keyOf3(norm)) ? multi?.movedStart(src) ?? previewStart : src.start;
+    const normKey = keyOf5(norm);
+    let start = src.start;
+    if (normKey === editKey) start = previewStart;
+    else if (multi?.keys.has(normKey)) start = multi.movedStart(src);
     edits.push({ element: src, updates: { start, track: norm.track } });
   }
   return { candidate, edits };
 }
 function commitTrackInsert(drag, deps, multi) {
-  const dragKey = keyOf3(drag.element);
+  const dragKey = keyOf5(drag.element);
   const built = buildTrackInsertEdits(
     drag.element,
     drag.previewStart,
@@ -19779,7 +19908,7 @@ function syncStackingForEdit(candidate, dragKey, currentLane, aimedLane, multiKe
   if (!readZIndex || !onStackingPatches) return Promise.resolve();
   if (aimedLane === currentLane) return Promise.resolve();
   const stackingEls = candidate.map((el, domIndex) => ({
-    key: keyOf3(el),
+    key: keyOf5(el),
     start: el.start,
     duration: el.duration,
     track: el.track,
@@ -21721,9 +21850,10 @@ function useTimelineGeometry({
   useEffect24(() => {
     if (zoomMode !== "manual" || isDragging.current) return;
     const el = scrollRef.current;
-    const target = lastScrollLeftRef.current;
-    if (!el || target <= 0) return;
+    if (!el) return;
     const raf = requestAnimationFrame(() => {
+      const target = lastScrollLeftRef.current;
+      if (target <= 0) return;
       const max = Math.max(0, el.scrollWidth - el.clientWidth);
       const next = Math.min(target, max);
       if (Math.abs(el.scrollLeft - next) > 0.5) el.scrollLeft = next;
@@ -21918,69 +22048,11 @@ function useResolvedTimelineEditCallbacks(overrides) {
 // src/player/components/useTrackGapMenu.ts
 import { useCallback as useCallback24, useEffect as useEffect27, useMemo as useMemo21, useState as useState21 } from "react";
 
-// src/player/components/timelineGaps.ts
-var TRACK_GAP_EPSILON_S = 1e-3;
-var keyOf4 = (e) => e.key ?? e.id;
-function laneGapFloor(elements) {
-  return Math.max(0, ...elements.map((e) => e.expandedParentStart ?? 0));
-}
-var round32 = (v) => Math.round(v * 1e3) / 1e3;
-var endOf = (e) => e.start + e.duration;
-function sortedLaneClips(elements) {
-  return [...elements].sort((a, b) => a.start - b.start || keyOf4(a).localeCompare(keyOf4(b)));
-}
-function resolveTrackGapAt(elements, time, epsilon = TRACK_GAP_EPSILON_S, floor = 0) {
-  const clips = sortedLaneClips(elements);
-  const occupied = clips.some((c) => time >= c.start - epsilon && time < endOf(c) - epsilon);
-  if (occupied) return null;
-  const following = clips.filter((c) => c.start > time - epsilon);
-  if (following.length === 0) return null;
-  const gapEnd = following[0].start;
-  const gapStart = Math.max(
-    floor,
-    ...clips.filter((c) => c.start <= time - epsilon).map((c) => endOf(c))
-  );
-  if (gapEnd - gapStart <= epsilon) return null;
-  return { gapStart, gapEnd, followingKeys: following.map(keyOf4) };
-}
-function resolveAllGapIntervals(elements, epsilon = TRACK_GAP_EPSILON_S, floor = 0) {
-  const gaps = [];
-  let cursor = floor;
-  for (const clip of sortedLaneClips(elements)) {
-    if (clip.start - cursor > epsilon) gaps.push({ start: cursor, end: clip.start });
-    cursor = Math.max(cursor, endOf(clip));
-  }
-  return gaps;
-}
-function resolveAllTrackGaps(elements, epsilon = TRACK_GAP_EPSILON_S, floor = 0) {
-  const shifts = [];
-  let cursor = floor;
-  for (const clip of sortedLaneClips(elements)) {
-    const newStart = round32(cursor);
-    if (Math.abs(newStart - clip.start) > epsilon) {
-      shifts.push({ key: keyOf4(clip), newStart });
-    }
-    cursor += clip.duration;
-  }
-  return shifts;
-}
-function resolveLaneEmptyIntervals(elements, end, epsilon = TRACK_GAP_EPSILON_S, floor = 0) {
-  const gaps = resolveAllGapIntervals(elements, epsilon, floor);
-  const maxEnd = Math.max(floor, ...elements.map(endOf));
-  if (end - maxEnd > epsilon) gaps.push({ start: maxEnd, end });
-  return gaps;
-}
-function resolveCloseGapShifts(elements, gap) {
-  const width = gap.gapEnd - gap.gapStart;
-  const followSet = new Set(gap.followingKeys);
-  return sortedLaneClips(elements).filter((c) => followSet.has(keyOf4(c))).map((c) => ({ key: keyOf4(c), newStart: Math.max(gap.gapStart, round32(c.start - width)) }));
-}
-
 // src/player/components/timelineGapCommit.ts
-var keyOf5 = (e) => e.key ?? e.id;
+var keyOf6 = (e) => e.key ?? e.id;
 var gapCloseGestureSeq = 0;
 function resolveShiftedElements(elements, shifts) {
-  const byKey = new Map(elements.map((e) => [keyOf5(e), e]));
+  const byKey = new Map(elements.map((e) => [keyOf6(e), e]));
   return shifts.flatMap((s) => {
     const element = byKey.get(s.key);
     return element ? [{ element, start: s.newStart }] : [];
@@ -22023,9 +22095,9 @@ function resolveMainTrackDeleteRippleShifts(survivingElements, deletedElements,
   for (const survivor of survivors) {
     const width = deletedMainTrack.filter((d) => d.start < survivor.start).reduce((sum, d) => sum + d.duration, 0);
     if (width <= 0) continue;
-    const newStart = round32(Math.max(laneGapFloor(survivors), survivor.start - width));
+    const newStart = round3(Math.max(laneGapFloor(survivors), survivor.start - width));
     if (Math.abs(newStart - survivor.start) > TRACK_GAP_EPSILON_S) {
-      shifts.push({ key: keyOf5(survivor), newStart });
+      shifts.push({ key: keyOf6(survivor), newStart });
     }
   }
   if (shifts.length === 0 || !canShiftTrackGapClips(survivors, shifts)) return null;
@@ -22608,6 +22680,14 @@ function computeRevealScroll(input) {
   };
 }
 
+// src/utils/retryBudget.ts
+function recordRetryAttempt(ref, id, maxRetries) {
+  const previous = ref.current;
+  const count = previous.id === id ? previous.count + 1 : 1;
+  ref.current = { id, count };
+  return count <= maxRetries;
+}
+
 // src/player/components/useTimelineFocusCoordinator.ts
 function isCurrentRequest(request, projectId, sessionEpoch) {
   return request !== null && request.projectId === projectId && request.sessionEpoch === sessionEpoch;
@@ -22629,7 +22709,7 @@ function focusElement(container, targetId) {
   });
   return true;
 }
-function scrollToTarget(container, resolution, elements, rowGeometry, pixelsPerSecond, contentOrigin, allowHorizontal) {
+function scrollToTarget(container, resolution, elements, rowGeometry, pixelsPerSecond, contentOrigin, allowHorizontal, lastScrollLeftRef) {
   const rowIndex = rowGeometry.getRowIndex(resolution.row.physicalTrackKey);
   if (rowIndex < 0) return false;
   const elementId2 = resolution.target.kind === "row" ? resolution.row.elementId : resolution.target.elementId;
@@ -22651,10 +22731,15 @@ function scrollToTarget(container, resolution, elements, rowGeometry, pixelsPerS
     stickyTop: RULER_H,
     allowHorizontal: allowHorizontal && left !== null
   });
-  if (target.left !== null) container.scrollLeft = target.left;
+  if (target.left !== null) {
+    container.scrollLeft = target.left;
+    lastScrollLeftRef.current = target.left;
+  }
   if (target.top !== null) container.scrollTop = target.top;
   return target.left !== null || target.top !== null;
 }
+var MAX_UNRESOLVED_FOCUS_RETRIES = 5;
+var UNRESOLVED_FOCUS_TIMEOUT_MS = 4e3;
 function useTimelineFocusCoordinator({
   scrollRef,
   logicalRows,
@@ -22666,12 +22751,14 @@ function useTimelineFocusCoordinator({
   viewportVersion,
   projectId,
   sessionEpoch,
-  syncScrollViewport
+  syncScrollViewport,
+  lastScrollLeftRef
 }) {
   const request = usePlayerStore((state) => state.timelineFocus);
   const previousRowsRef = useRef37(logicalRows);
   const resolvedRef = useRef37(null);
   const appliedRef = useRef37(null);
+  const unresolvedFocusAttemptsRef = useRef37({ id: -1, count: 0 });
   const resolution = useMemo26(() => {
     if (isCurrentRequest(request, projectId, sessionEpoch)) {
       if (resolvedRef.current?.nonce !== request.nonce) {
@@ -22701,8 +22788,23 @@ function useTimelineFocusCoordinator({
   useEffect29(() => {
     if (!isCurrentRequest(request, projectId, sessionEpoch)) return;
     if (!resolution) {
-      usePlayerStore.getState().clearTimelineFocus(request.nonce);
-      return;
+      const withinBudget = recordRetryAttempt(
+        unresolvedFocusAttemptsRef,
+        request.nonce,
+        MAX_UNRESOLVED_FOCUS_RETRIES
+      );
+      if (!withinBudget) {
+        usePlayerStore.getState().clearTimelineFocus(request.nonce);
+        return;
+      }
+      const nonce = request.nonce;
+      const timeout = setTimeout(() => {
+        usePlayerStore.getState().clearTimelineFocus(nonce);
+      }, UNRESOLVED_FOCUS_TIMEOUT_MS);
+      return () => clearTimeout(timeout);
+    }
+    if (unresolvedFocusAttemptsRef.current.count !== 0) {
+      unresolvedFocusAttemptsRef.current = { id: -1, count: 0 };
     }
     if (resolution.target.id !== request.id) {
       usePlayerStore.getState().requestTimelineFocus(resolution.target.id);
@@ -22720,7 +22822,8 @@ function useTimelineFocusCoordinator({
       rowGeometry,
       pixelsPerSecond,
       contentOrigin,
-      allowHorizontal
+      allowHorizontal,
+      lastScrollLeftRef
     )) {
       syncScrollViewport(container);
     }
@@ -22730,6 +22833,7 @@ function useTimelineFocusCoordinator({
     allowHorizontal,
     contentOrigin,
     elements,
+    lastScrollLeftRef,
     pixelsPerSecond,
     projectId,
     request,
@@ -23037,7 +23141,8 @@ function useTimelineLogicalFocus(input) {
     viewportVersion: input.viewport,
     projectId,
     sessionEpoch: input.sessionEpoch,
-    syncScrollViewport: input.syncScrollViewport
+    syncScrollViewport: input.syncScrollViewport,
+    lastScrollLeftRef: input.lastScrollLeftRef
   });
   const rows = useTimelineRowVirtualization({
     scrollRef: input.scrollRef,
@@ -38885,9 +38990,14 @@ function isResolverDisagreement(session, hfId) {
     return false;
   }
 }
-function shouldUseSdkCutover(flagEnabled, hasSession, hfId, ops) {
-  return flagEnabled && hasSession && !!hfId && ops.length > 0 && ops.every((o) => CUTOVER_OP_TYPES.has(o.type)) && // SDK edit ops target only the element hfId; child-scoped patch ops need the server path.
-  !hasChildScopedOp(ops) && !ops.some(mapsToReservedAttr) && !hasUnsafeHtmlAttributeOp(ops);
+function sdkCutoverIneligibleReason(hfId, ops) {
+  if (!hfId) return "target_unaddressable";
+  if (ops.length === 0) return "no_ops";
+  if (!ops.every((o) => CUTOVER_OP_TYPES.has(o.type))) return "unsupported_op_type";
+  if (hasChildScopedOp(ops)) return "child_scoped_op";
+  if (ops.some(mapsToReservedAttr)) return "reserved_attribute";
+  if (hasUnsafeHtmlAttributeOp(ops)) return "unsafe_html_attribute";
+  return null;
 }
 
 // src/utils/sdkEditTransaction.ts
@@ -39097,11 +39207,11 @@ function gsapReadSource(deps, targetPath) {
   return read ? () => read(targetPath) : void 0;
 }
 async function sdkCutoverPersist(selection, ops, originalContent, targetPath, sdkSession, deps, options) {
-  if (!shouldUseSdkCutover(sdkFamilyEnabled("dom"), !!sdkSession, selection.hfId, ops))
-    return declinedCutover("ineligible_operation", "dom");
+  if (!sdkFamilyEnabled("dom")) return declinedCutover("feature_disabled", "dom");
   if (!sdkSession) return declinedCutover("session_unavailable", "dom");
   const hfId = selection.hfId;
-  if (!hfId) return declinedCutover("target_unaddressable", "dom");
+  const ineligible = sdkCutoverIneligibleReason(hfId, ops);
+  if (ineligible || !hfId) return declinedCutover(ineligible ?? "target_unaddressable", "dom");
   const target = sdkSession.getElement(hfId);
   if (!target)
     return declinedCutover("target_not_found", "dom", isResolverDisagreement(sdkSession, hfId));
@@ -39676,12 +39786,12 @@ function useElementLifecycleOps({
 import { useCallback as useCallback55, useRef as useRef66 } from "react";
 
 // src/player/components/timelineZMirror.ts
-var keyOf6 = (el) => el.key ?? el.id;
+var keyOf7 = (el) => el.key ?? el.id;
 function expandedChildAllowedLanes(element, elements) {
   if (element.expandedParentStart == null) return null;
-  const selfKey = keyOf6(element);
+  const selfKey = keyOf7(element);
   return new Set(
-    elements.filter((el) => keyOf6(el) !== selfKey && sameSourceFile(el, element)).map((el) => el.track)
+    elements.filter((el) => keyOf7(el) !== selfKey && sameSourceFile(el, element)).map((el) => el.track)
   );
 }
 function displayTrackOrder(elements) {
@@ -39691,12 +39801,12 @@ function resolveZMirrorLaneMove(input) {
   const { action, element, elements } = input;
   if (classifyZone(element) === "audio") return null;
   if (!(element.duration > 0)) return null;
-  const selfKey = keyOf6(element);
+  const selfKey = keyOf7(element);
   const start = element.start;
   const end = element.start + element.duration;
   const up = action === "bring-forward" || action === "bring-to-front";
   const overlapSet = elements.filter(
-    (el) => keyOf6(el) !== selfKey && classifyZone(el) === "visual" && samePaintScope(el, element) && timeRangesOverlap(start, end, el.start, el.start + el.duration)
+    (el) => keyOf7(el) !== selfKey && classifyZone(el) === "visual" && samePaintScope(el, element) && timeRangesOverlap(start, end, el.start, el.start + el.duration)
   );
   const referenceLane = resolveReferenceLane(input, overlapSet, up);
   if (referenceLane == null) return null;
@@ -39732,13 +39842,13 @@ function resolveRepositionLaneMove(input) {
   const { element, elements, desiredOrderKeys } = input;
   if (classifyZone(element) === "audio") return null;
   if (!(element.duration > 0)) return null;
-  const selfKey = keyOf6(element);
+  const selfKey = keyOf7(element);
   const selfIdx = desiredOrderKeys.indexOf(selfKey);
   if (selfIdx === -1) return null;
   const clipLaneForKey = (key2) => {
     if (key2 == null) return null;
-    const el = elements.find((candidate) => keyOf6(candidate) === key2);
-    return el && classifyZone(el) === "visual" && el.duration > 0 && samePaintScope(el, element) && keyOf6(el) !== selfKey ? el.track : null;
+    const el = elements.find((candidate) => keyOf7(candidate) === key2);
+    return el && classifyZone(el) === "visual" && el.duration > 0 && samePaintScope(el, element) && keyOf7(el) !== selfKey ? el.track : null;
   };
   let aboveLane = null;
   for (let i = selfIdx + 1; i < desiredOrderKeys.length && aboveLane == null; i++) {
@@ -39817,7 +39927,7 @@ function resolveReferenceLane(input, overlapSet, up) {
 }
 function crossedNeighborLane({ elements, crossedKey }) {
   if (crossedKey == null) return null;
-  const crossed = elements.find((el) => keyOf6(el) === crossedKey);
+  const crossed = elements.find((el) => keyOf7(el) === crossedKey);
   return crossed && classifyZone(crossed) === "visual" ? crossed.track : null;
 }
 
@@ -41789,6 +41899,7 @@ var CaptionTimeline = memo27(function CaptionTimeline2({
 
 // src/hooks/useTimelineSelectionPreviewSync.ts
 import { useEffect as useEffect49, useMemo as useMemo36, useRef as useRef68 } from "react";
+var MAX_UNRESOLVED_SYNC_RETRIES = 3;
 function orderSelectedIds(ids, anchor2) {
   const ordered = [...ids];
   if (!anchor2 || !ids.has(anchor2)) return ordered;
@@ -41806,6 +41917,22 @@ function selectionIdsMatch(currentIds, selectedIds, currentAnchor, wantedAnchor)
 function anchorIsOutsideSelection(anchor2, selectedIds) {
   return anchor2 !== null && !selectedIds.includes(anchor2);
 }
+async function resolveSelectionsForIds(ids, timelineElements, buildDomSelectionForTimelineElement) {
+  const elements = ids.map((id) => timelineElements.find((item) => (item.key ?? item.id) === id)).filter((element) => Boolean(element));
+  const resolved2 = await Promise.all(
+    elements.map((element) => buildDomSelectionForTimelineElement(element))
+  );
+  return resolved2.filter((selection) => Boolean(selection));
+}
+function applyResolvedSelections(selections, applyDomSelection, applyMarqueeSelection) {
+  if (selections.length === 0) {
+    applyDomSelection(null, { revealPanel: false });
+  } else if (selections.length === 1) {
+    applyDomSelection(selections[0]);
+  } else {
+    applyMarqueeSelection(selections, false);
+  }
+}
 function useTimelineSelectionPreviewSync({
   selectedElementId,
   selectedElementIds,
@@ -41827,6 +41954,7 @@ function useTimelineSelectionPreviewSync({
   const domEditGroupSelectionsRef = useRef68(domEditGroupSelections);
   const lastSyncedSelectedKeyRef = useRef68("");
   const missingSelectionKeyRef = useRef68("");
+  const unresolvedAttemptsRef = useRef68({ id: "", count: 0 });
   domEditSelectionRef.current = domEditSelection;
   domEditGroupSelectionsRef.current = domEditGroupSelections;
   useEffect49(() => {
@@ -41841,6 +41969,7 @@ function useTimelineSelectionPreviewSync({
     const currentAnchor = currentDomEditSelection ? resolveTimelineIdForSelection(currentDomEditSelection, timelineElements, activeCompPath) : null;
     if (selectedIds.length === 0) {
       missingSelectionKeyRef.current = "";
+      unresolvedAttemptsRef.current = { id: "", count: 0 };
       logSelect("timeline-empty", {
         had: currentIds.length,
         previousKey: previousSelectedKey.length > 0,
@@ -41862,36 +41991,30 @@ function useTimelineSelectionPreviewSync({
       onSelectionNotFound();
     };
     const syncSelection = async () => {
-      const selections = [];
-      let resolvableCount = 0;
-      for (const id of selectedIds) {
-        const element = timelineElements.find((item) => (item.key ?? item.id) === id);
-        if (!element) continue;
-        resolvableCount += 1;
-        const selection = await buildDomSelectionForTimelineElement(element);
-        if (selection) selections.push(selection);
-      }
+      const selections = await resolveSelectionsForIds(
+        selectedIds,
+        timelineElements,
+        buildDomSelectionForTimelineElement
+      );
       if (cancelled) return;
-      if (selections.length < resolvableCount) {
-        warnSelectionMissingOnce();
-        if (anchorIsOutsideSelection(currentAnchor, selectedIds)) {
-          applyDomSelection(null, { revealPanel: false, announce: false });
+      if (selections.length < selectedIds.length) {
+        if (recordRetryAttempt(unresolvedAttemptsRef, selectedKey, MAX_UNRESOLVED_SYNC_RETRIES)) {
+          if (anchorIsOutsideSelection(currentAnchor, selectedIds)) {
+            applyDomSelection(null, { revealPanel: false, announce: false });
+          }
+          return;
         }
-        return;
+        warnSelectionMissingOnce();
+      } else {
+        unresolvedAttemptsRef.current = { id: "", count: 0 };
+        missingSelectionKeyRef.current = "";
       }
-      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) {
-        applyDomSelection(selections[0]);
-      } else {
-        applyMarqueeSelection(selections, false);
-      }
+      applyResolvedSelections(selections, applyDomSelection, applyMarqueeSelection);
     };
     void syncSelection();
     return () => {
@@ -66615,7 +66738,7 @@ async function commitTimelineCompositionInsertion(input) {
       await input.writeFile(input.targetPath, result.before, result.after);
       throw error;
     }
-    input.selectHost(`${input.targetPath}#${result.hostId}`);
+    input.selectHost(deriveTimelineStoreKeyForDomId(result.hostId, input.targetPath));
     try {
       input.resync?.();
     } catch (error) {
@@ -66629,6 +66752,13 @@ async function commitTimelineCompositionInsertion(input) {
   });
 }
 
+// src/player/components/timelineDropReveal.ts
+function selectAndRevealTimelineElement(key2) {
+  const store = usePlayerStore.getState();
+  store.setSelectedElementId(key2);
+  store.requestTimelineFocus(timelineClipFocusId(key2));
+}
+
 // src/hooks/useTimelineAssetDropOps.ts
 function useTimelineAssetDropOps({
   projectIdRef,
@@ -66699,6 +66829,7 @@ function useTimelineAssetDropOps({
           writeFile: writeProjectFile,
           recordEdit
         });
+        selectAndRevealTimelineElement(deriveTimelineStoreKeyForDomId(newId, targetPath));
         forceReloadSdkSession?.();
         reloadPreview();
       } catch (error) {
@@ -66768,7 +66899,7 @@ function useTimelineAssetDropOps({
           writeFile: writeProjectFile,
           recordEdit,
           observeVersion: observeProjectFileVersion,
-          selectHost: (key2) => usePlayerStore.getState().setSelectedElementId(key2),
+          selectHost: selectAndRevealTimelineElement,
           resync: forceReloadSdkSession,
           refresh: reloadPreview
         });
@@ -75724,8 +75855,9 @@ async function addBlockToProject(opts) {
       currentTime: opts.currentTime ?? 0
     });
     const { width, height } = resolveTimelineAssetCompositionSize(originalContent);
+    const hostId = buildUniqueCompositionId(block.name, collectHtmlIds(originalContent));
     const subComposition = buildSubCompositionHtml({
-      id: buildUniqueCompositionId(block.name, collectHtmlIds(originalContent)),
+      id: hostId,
       compositionFile,
       start,
       duration,
@@ -75751,7 +75883,11 @@ async function addBlockToProject(opts) {
     });
     await refreshFileTree();
     reloadPreview();
-    return { block, compositionPath: compositionFile };
+    return {
+      block,
+      compositionPath: compositionFile,
+      hostKey: deriveTimelineStoreKeyForDomId(hostId, targetPath)
+    };
   } catch (error) {
     const message = error instanceof Error ? error.message : "Failed to add block";
     showToast(message);
@@ -75851,7 +75987,9 @@ function useBlockHandlers({
           previewIframe: previewIframeRef.current,
           currentTime: usePlayerStore.getState().currentTime
         })
-      );
+      ).then((result) => {
+        if (result) selectAndRevealTimelineElement(result.hostKey);
+      });
     },
     [projectId, blockCtx, previewIframeRef, runBlockInstall]
   );
@@ -75887,7 +76025,9 @@ function useBlockHandlers({
           previewIframe: previewIframeRef.current,
           currentTime: usePlayerStore.getState().currentTime
         })
-      );
+      ).then((result) => {
+        if (result) selectAndRevealTimelineElement(result.hostKey);
+      });
     },
     [projectId, blockCtx, previewIframeRef, runBlockInstall]
   );