@hyperframes/studio 0.8.120 → 0.8.122

package/dist/index.js

@@ -8,6 +8,7 @@ import {
   Player,
   STUDIO_PREVIEW_FPS,
   applyPreviewVariablesToUrl,
+  clampToDuration,
   computePinnedZoomPercent,
   createTimelineResetState,
   effectiveThumbnailMode,
@@ -36,7 +37,7 @@ import {
   usePreviewVariablesStore,
   whenPreviewBooted,
   writeStudioUiPreferences
-} from "./chunk-J6Q572FA.js";
+} from "./chunk-246VB2G3.js";
 import {
   Button,
   ContextMenu,
@@ -2542,6 +2543,11 @@ import { clampPlaybackRate } from "@hyperframes/parsers/media-duration";
 
 // src/player/store/timelineElement.ts
 var authoredOffset = (element) => element.authoredStartIsMasterTime ? 0 : element.parentCompositionStart ?? 0;
+function savedClipEdges(element, start, resizedDuration) {
+  const savedStart = authoredOffset(element) + roundToCenti(toAuthoredStart(element, start));
+  const duration = resizedDuration === void 0 ? element.duration : roundToCenti(resizedDuration);
+  return { start: savedStart, end: savedStart + duration };
+}
 function clampToHostStart(element, masterTime) {
   return Math.max(Math.min(authoredOffset(element), element.start), masterTime);
 }
@@ -3405,7 +3411,8 @@ var TIMELINE_SNAP_PX = 8;
 var TYPE_PRIORITY = {
   playhead: 0,
   "clip-edge": 1,
-  beat: 2
+  beat: 2,
+  grid: 3
 };
 function collectTimelineSnapTargets(input) {
   const byTime = /* @__PURE__ */ new Map();
@@ -3423,11 +3430,18 @@ function collectTimelineSnapTargets(input) {
     add(el.start, "clip-edge");
     add(el.start + el.duration, "clip-edge");
   }
-  if (input.playheadTime != null && input.includePlayhead !== false)
-    add(input.playheadTime, "playhead");
+  if (input.playheadTime != null) add(input.playheadTime, "playhead");
   return Array.from(byTime.values()).sort((a, b) => a.time - b.time);
 }
-function snapTimelineTime(time, targets, thresholdSecs) {
+function nearestGridLine(time, gridStep, thresholdSecs) {
+  if (!(gridStep > 0)) return null;
+  const line = Math.round(time / gridStep) * gridStep;
+  const saved2 = roundToCenti(line);
+  const pixelsPerSecond = TIMELINE_SNAP_PX / thresholdSecs;
+  if (Math.abs(saved2 - line) * pixelsPerSecond >= 1) return null;
+  return Math.abs(saved2 - time) < thresholdSecs ? { time: saved2, type: "grid" } : null;
+}
+function snapTimelineTime(time, targets, thresholdSecs, gridStep = 0) {
   let best = null;
   let bestDist = thresholdSecs;
   for (const target of targets) {
@@ -3437,21 +3451,23 @@ function snapTimelineTime(time, targets, thresholdSecs) {
       best = target;
     }
   }
+  best ??= nearestGridLine(time, gridStep, thresholdSecs);
   return best ? { time: best.time, target: best } : { time, target: null };
 }
-function snapMoveToTargets(start, duration, targets, pixelsPerSecond, timelineDuration2) {
-  if (targets.length === 0) return { start, snapTime: null, snapType: null };
+function snapMoveToTargets(start, duration, targets, pixelsPerSecond, timelineDuration2, gridStep = 0) {
+  if (targets.length === 0 && !(gridStep > 0)) return { start, snapTime: null, snapType: null };
   const thresholdSecs = TIMELINE_SNAP_PX / Math.max(pixelsPerSecond, 1);
-  const startSnap = snapTimelineTime(start, targets, thresholdSecs);
-  const endSnap = snapTimelineTime(start + duration, targets, thresholdSecs);
-  const startMoved = startSnap.target !== null;
-  const endMoved = endSnap.target !== null;
+  const startSnap = snapTimelineTime(start, targets, thresholdSecs, gridStep);
+  const endSnap = snapTimelineTime(start + duration, targets, thresholdSecs, gridStep);
+  const rank = (snap, edgeTime2) => snap.target === null ? Infinity : Math.abs(snap.time - edgeTime2) + (snap.target.type === "grid" ? thresholdSecs : 0);
+  const startRank = rank(startSnap, start);
+  const endRank = rank(endSnap, start + duration);
   let candidate = start;
   let target = null;
-  if (startMoved && (!endMoved || Math.abs(startSnap.time - start) <= Math.abs(endSnap.time - (start + duration)))) {
+  if (startRank !== Infinity && startRank <= endRank) {
     candidate = startSnap.time;
     target = startSnap.target;
-  } else if (endMoved) {
+  } else if (endRank !== Infinity) {
     candidate = endSnap.time - duration;
     target = endSnap.target;
   }
@@ -3692,6 +3708,165 @@ function useTimelineAssetDrop({
 // src/player/components/useTimelineClipDrag.ts
 import { useRef as useRef12, useState as useState7, useCallback as useCallback9, useMemo as useMemo7, useEffect as useEffect11 } from "react";
 
+// src/player/components/timelineRulerGeometry.ts
+function getTimelineMajorTickInterval(duration, pixelsPerSecond, frameRate) {
+  const zoomIntervals = [
+    0.02,
+    0.05,
+    0.1,
+    0.2,
+    0.5,
+    1,
+    2,
+    5,
+    10,
+    15,
+    30,
+    60,
+    120,
+    300,
+    600,
+    900,
+    1800,
+    3600
+  ];
+  let interval;
+  if (Number.isFinite(pixelsPerSecond) && (pixelsPerSecond ?? 0) > 0) {
+    const targetMajorPx = 88;
+    interval = zoomIntervals.find((candidate) => candidate * (pixelsPerSecond ?? 0) >= targetMajorPx) ?? 3600;
+  } else {
+    const durationIntervals = [0.25, 0.5, 1, 2, 5, 10, 15, 30, 60];
+    const target = duration / 6;
+    interval = durationIntervals.find((candidate) => candidate >= target) ?? 60;
+  }
+  if (Number.isFinite(frameRate) && (frameRate ?? 0) > 0) {
+    const fps = frameRate ?? 0;
+    return Math.max(1, Math.ceil(interval * fps - 1e-6)) / fps;
+  }
+  return interval;
+}
+function getMinorSubdivisions(majorInterval, pixelsPerSecond, frameRate) {
+  const pps = Number.isFinite(pixelsPerSecond) ? pixelsPerSecond ?? 0 : 0;
+  if (pps <= 0) return 4;
+  const fps = Number.isFinite(frameRate) ? frameRate ?? 0 : 0;
+  const majorFrames = fps > 0 ? Math.round(majorInterval * fps) : 0;
+  const candidates = fps > 0 ? [4, 5, 3, 2] : [4, 2];
+  for (const parts of candidates) {
+    if (fps > 0 && majorFrames % parts !== 0) continue;
+    if (majorInterval / parts * pps >= 8) return parts;
+  }
+  return 0;
+}
+function roundTickValue(time) {
+  return Math.round(time * 1e6) / 1e6;
+}
+function isSupportedTickDuration(duration) {
+  return duration > 0 && Number.isFinite(duration) && duration <= 14400;
+}
+function getTickRange(duration, range) {
+  return {
+    start: Math.max(0, range?.start ?? 0),
+    end: Math.min(duration, range?.end ?? duration)
+  };
+}
+function appendMinorTicks(minor, majorTime, minorInterval, subdivisions, range, maxTicks, majorCount) {
+  for (let part = 1; part < subdivisions && majorCount + minor.length < maxTicks; part++) {
+    const time = majorTime + part * minorInterval;
+    if (time >= range.start - 1e-3 && time <= range.end + 1e-3) {
+      minor.push(roundTickValue(time));
+    }
+  }
+}
+function tickSpacing(duration, pixelsPerSecond, frameRate) {
+  const majorInterval = getTimelineMajorTickInterval(duration, pixelsPerSecond, frameRate);
+  const subdivisions = getMinorSubdivisions(majorInterval, pixelsPerSecond, frameRate);
+  return { majorInterval, subdivisions };
+}
+function rulerFrameRate(mode) {
+  return mode === "frame" ? STUDIO_PREVIEW_FPS : void 0;
+}
+function getTimelineGridStep(duration, pixelsPerSecond, frameRate) {
+  if (!isSupportedTickDuration(duration)) return 0;
+  const { majorInterval, subdivisions } = tickSpacing(duration, pixelsPerSecond, frameRate);
+  return subdivisions > 0 ? majorInterval / subdivisions : majorInterval;
+}
+function generateTicks(duration, pixelsPerSecond, frameRate, range) {
+  if (!isSupportedTickDuration(duration)) return { major: [], minor: [] };
+  const { majorInterval, subdivisions } = tickSpacing(duration, pixelsPerSecond, frameRate);
+  const minorInterval = subdivisions > 0 ? majorInterval / subdivisions : 0;
+  const major = [];
+  const minor = [];
+  const maxTicks = 2e3;
+  const tickRange = getTickRange(duration, range);
+  const firstMajorIndex = Math.max(0, Math.floor(tickRange.start / majorInterval));
+  for (let index = firstMajorIndex; major.length < maxTicks; index++) {
+    const time = index * majorInterval;
+    if (time > tickRange.end + 1e-3) break;
+    if (time >= tickRange.start - 1e-3) major.push(roundTickValue(time));
+    appendMinorTicks(minor, time, minorInterval, subdivisions, tickRange, maxTicks, major.length);
+  }
+  return { major, minor };
+}
+function formatTimelineTickLabel(time, duration, majorInterval) {
+  if (!Number.isFinite(time)) return "00:00";
+  const safeTime = Math.max(0, time);
+  if (majorInterval < 0.1) {
+    const totalHundredths = Math.round(safeTime * 100);
+    const wholeSeconds = Math.floor(totalHundredths / 100);
+    const hundredth = totalHundredths % 100;
+    return `${formatTime(wholeSeconds)}.${hundredth.toString().padStart(2, "0")}`;
+  }
+  if (majorInterval < 1) {
+    const totalTenths = Math.round(safeTime * 10);
+    const wholeSeconds = Math.floor(totalTenths / 10);
+    const tenth = totalTenths % 10;
+    return `${formatTime(wholeSeconds)}.${tenth}`;
+  }
+  if (duration >= 3600 || safeTime >= 3600) {
+    const totalSeconds = Math.floor(safeTime);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor(totalSeconds % 3600 / 60);
+    const seconds = totalSeconds % 60;
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  }
+  return formatTime(safeTime);
+}
+
+// src/player/store/previewFrameStore.ts
+import { create } from "zustand";
+var usePreviewFrameStore = create(() => ({ time: null }));
+var setPreviewFrame = (time) => usePreviewFrameStore.setState({ time });
+function showingPreviewFrame(adapter) {
+  let seeked = false;
+  const time = () => seeked ? adapter.getTime() : usePlayerStore.getState().currentTime;
+  return {
+    play: () => {
+      adapter.seek(time());
+      adapter.play();
+    },
+    pause: () => adapter.pause(),
+    seek: (t2, options) => {
+      seeked = true;
+      adapter.seek(t2, options);
+    },
+    getTime: time,
+    getDuration: () => adapter.getDuration(),
+    isPlaying: () => adapter.isPlaying()
+  };
+}
+function transportAdapter(adapter) {
+  const showing = usePreviewFrameStore.getState().time !== null;
+  return adapter && showing && !usePlayerStore.getState().isPlaying ? showingPreviewFrame(adapter) : adapter;
+}
+function subscribePreviewFrame(getAdapter) {
+  return usePreviewFrameStore.subscribe((state, prev) => {
+    if (state.time === prev.time || usePlayerStore.getState().isPlaying) return;
+    const adapter = getAdapter();
+    const time = state.time ?? usePlayerStore.getState().currentTime;
+    adapter?.seek(clampToDuration(time, adapter.getDuration()));
+  });
+}
+
 // src/player/components/timelineAuthoredMoveTarget.ts
 function canMoveTimelineElement(element) {
   return getTimelineEditCapabilities({
@@ -4019,7 +4194,8 @@ function computeDragPreview(drag, clientX, clientY, ctx3) {
     pps,
     // Relaxed clamp: allow the snapped start past the content, up to the
     // rendered extent (see dragMaxStart) — the composition grows on commit.
-    dragMaxStart + drag.element.duration
+    dragMaxStart + drag.element.duration,
+    ctx3.gridStep
   );
   const group = resolveGroupDrag(drag, ctx3);
   const dragKey = drag.element.key ?? drag.element.id;
@@ -4037,6 +4213,8 @@ function computeDragPreview(drag, clientX, clientY, ctx3) {
     return { ...drag, started: true };
   }
   const { track: previewTrack, insertRow } = placement;
+  const target = placement.start === snap.start && snap.snapTime !== null && snap.snapType !== null ? { time: snap.snapTime, type: snap.snapType } : null;
+  const guide = guideIfSaved(drag.element, { start: snap.start }, target, pps);
   return {
     ...drag,
     started: true,
@@ -4048,10 +4226,16 @@ function computeDragPreview(drag, clientX, clientY, ctx3) {
     // tell a deliberate vertical lane change from a horizontal drag.
     desiredTrack: nextMove.track,
     insertRow,
-    snapTime: placement.start === snap.start ? snap.snapTime : null,
-    snapType: placement.start === snap.start ? snap.snapType : null
+    snapTime: guide?.time ?? null,
+    snapType: guide?.type ?? null
   };
 }
+function guideIfSaved(element, clip, target, pps) {
+  if (!target) return null;
+  const saved2 = savedClipEdges(element, clip.start, clip.duration);
+  const off = Math.min(Math.abs(saved2.start - target.time), Math.abs(saved2.end - target.time));
+  return off * pps < 1 ? target : null;
+}
 var TRIM_END_FRAME_LEAD_S = 1 / STUDIO_PREVIEW_FPS;
 function trimPreviewTime(edge, start, duration) {
   return edge === "start" ? start : Math.max(start, start + duration - TRIM_END_FRAME_LEAD_S);
@@ -4085,28 +4269,33 @@ function computeResizePreview(resize2, clientX, ctx3) {
   );
   const trimTargets = buildSnapTargets(
     resize2.element.key ?? resize2.element.id,
-    !isMusicTrack(resize2.element),
-    false
+    !isMusicTrack(resize2.element)
   );
+  const gridStep = ctx3.gridStep ?? 0;
   let snap = null;
-  if (trimTargets.length > 0) {
+  if (trimTargets.length > 0 || gridStep > 0) {
     const snapSecs = TIMELINE_SNAP_PX / Math.max(pps, 1);
     if (resize2.edge === "end") {
       const edgeTime2 = nextResize.start + nextResize.duration;
-      const { time: snapped, target } = snapTimelineTime(edgeTime2, trimTargets, snapSecs);
+      const { time: snapped, target } = snapTimelineTime(edgeTime2, trimTargets, snapSecs, gridStep);
       const snappedDuration = Math.round((snapped - nextResize.start) * 1e3) / 1e3;
       if (target && snapped <= maxEnd + 1e-6 && snappedDuration >= resolveTimelineMinDuration() - 1e-6) {
         if (snapped !== edgeTime2) nextResize = { ...nextResize, duration: snappedDuration };
-        snap = target;
+        snap = guideIfSaved(resize2.element, nextResize, target, pps);
       }
     } else {
-      const { time: snapped, target } = snapTimelineTime(nextResize.start, trimTargets, snapSecs);
+      const { time: snapped, target } = snapTimelineTime(
+        nextResize.start,
+        trimTargets,
+        snapSecs,
+        gridStep
+      );
       const clip = { ...nextResize, playbackRate: resize2.element.playbackRate };
       const delta = snapped - nextResize.start;
       const bounds = clipStartTrimDeltaBounds(clip, minStart, resolveTimelineMinDuration());
       if (target && delta >= bounds.minDelta - 1e-6 && delta <= bounds.maxDelta + 1e-6) {
         if (snapped !== nextResize.start) nextResize = applyClipStartTrimDelta(clip, delta);
-        snap = target;
+        snap = guideIfSaved(resize2.element, nextResize, target, pps);
       }
     }
   }
@@ -4137,8 +4326,8 @@ function previewGroupResize(session, next, setResizeState) {
 }
 
 // src/utils/linkedClipPreferences.ts
-import { create } from "zustand";
-var useLinkedClipPreferences = create((set) => ({
+import { create as create2 } from "zustand";
+var useLinkedClipPreferences = create2((set) => ({
   linkedSelection: readStudioUiPreferences().linkedSelectionEnabled ?? true,
   setLinkedSelection: (enabled) => {
     writeStudioUiPreferences({ linkedSelectionEnabled: enabled });
@@ -9719,7 +9908,6 @@ function useTimelineClipDrag({
   onResizeElements,
   onBlockedEditAttempt,
   onLinkEdit,
-  onSeek,
   setShowPopover,
   setRangeSelectionRef,
   readZIndex,
@@ -9769,23 +9957,27 @@ function useTimelineClipDrag({
   const snapTargetsCacheRef = useRef12(/* @__PURE__ */ new Map());
   const dragAudioTracksRef = useRef12(null);
   const buildSnapTargets = useCallback9(
-    (excludeElementKey, includeBeats, includePlayhead = true) => {
+    (excludeElementKey, includeBeats) => {
       if (!snapContextRef.current.enabled) return [];
-      const cacheKey = `${excludeElementKey ?? ""}|${includeBeats ? 1 : 0}|${includePlayhead ? 1 : 0}`;
+      const cacheKey = `${excludeElementKey ?? ""}|${includeBeats ? 1 : 0}`;
       const cached5 = snapTargetsCacheRef.current.get(cacheKey);
       if (cached5) return cached5;
       const targets = collectTimelineSnapTargets({
         elements: elementsRef.current,
         playheadTime: usePlayerStore.getState().currentTime,
         beatTimes: includeBeats ? snapContextRef.current.beatTimes : [],
-        excludeElementKey,
-        includePlayhead
+        excludeElementKey
       });
       snapTargetsCacheRef.current.set(cacheKey, targets);
       return targets;
     },
     []
   );
+  const snapGridStep = useCallback9(() => {
+    if (!snapContextRef.current.enabled) return 0;
+    const frameRate = rulerFrameRate(usePlayerStore.getState().timeDisplayMode);
+    return getTimelineGridStep(durationRef.current, ppsRef.current, frameRate);
+  }, [durationRef, ppsRef]);
   const [draggedClip, setDraggedClipState] = useState7(null);
   const draggedClipRef = useRef12(null);
   const publishDraggedClip = useCallback9((next) => {
@@ -9874,9 +10066,6 @@ function useTimelineClipDrag({
   onResizeElementRef.current = onResizeElement;
   const onResizeElementsRef = useRef12(onResizeElements);
   onResizeElementsRef.current = onResizeElements;
-  const onSeekRef = useRef12(onSeek);
-  onSeekRef.current = onSeek;
-  const trimSeekOriginRef = useRef12(null);
   const readZIndexRef = useRef12(readZIndex);
   readZIndexRef.current = readZIndex;
   const onStackingPatchesRef = useRef12(onStackingPatches);
@@ -9902,7 +10091,8 @@ function useTimelineClipDrag({
         elements: elementsRef.current,
         selectedKeys: gestureSelectedKeysRef.current,
         buildSnapTargets,
-        audioTracks: dragAudioTracksRef.current
+        audioTracks: dragAudioTracksRef.current,
+        gridStep: snapGridStep()
       });
     },
     [
@@ -9912,7 +10102,8 @@ function useTimelineClipDrag({
       trackOrderRef,
       trackInsertLayoutRef,
       rowGeometryRef,
-      buildSnapTargets
+      buildSnapTargets,
+      snapGridStep
     ]
   );
   const applyResizePointer = useCallback9(
@@ -9922,14 +10113,11 @@ function useTimelineClipDrag({
         pps: ppsRef.current,
         buildSnapTargets,
         elements: elementsRef.current,
-        gestureKeys: gestureSelectedKeysRef.current
+        gestureKeys: gestureSelectedKeysRef.current,
+        gridStep: snapGridStep()
       });
-      trimSeekOriginRef.current ??= usePlayerStore.getState().currentTime;
       const setResizeState = (v) => {
-        onSeekRef.current?.(trimPreviewTime(resize2.edge, v.previewStart, v.previewDuration), {
-          keepPlaying: true,
-          follow: false
-        });
+        setPreviewFrame(trimPreviewTime(resize2.edge, v.previewStart, v.previewDuration));
         publishResizingClip(
           resizingClipRef.current ? { ...resizingClipRef.current, started: true, ...v } : null
         );
@@ -9958,7 +10146,7 @@ function useTimelineClipDrag({
       }
       previewGroupResize(session, next, setResizeState);
     },
-    [scrollRef, ppsRef, buildSnapTargets, publishResizingClip]
+    [scrollRef, ppsRef, buildSnapTargets, snapGridStep, publishResizingClip]
   );
   const applyResizePointerRef = useRef12(applyResizePointer);
   applyResizePointerRef.current = applyResizePointer;
@@ -9968,12 +10156,7 @@ function useTimelineClipDrag({
       cancelAnimationFrame(clipDragScrollRaf.current);
       clipDragScrollRaf.current = 0;
     }
-    if (trimSeekOriginRef.current != null) {
-      if (!usePlayerStore.getState().isPlaying) {
-        onSeekRef.current?.(trimSeekOriginRef.current, { keepPlaying: true, follow: false });
-      }
-      trimSeekOriginRef.current = null;
-    }
+    setPreviewFrame(null);
     snapTargetsCacheRef.current.clear();
     dragAudioTracksRef.current = null;
   }, []);
@@ -13152,122 +13335,8 @@ function useTimelineShiftModifier() {
 
 // src/player/components/useTimelineTicks.ts
 import { useMemo as useMemo18 } from "react";
-
-// src/player/components/timelineRulerGeometry.ts
-function getTimelineMajorTickInterval(duration, pixelsPerSecond, frameRate) {
-  const zoomIntervals = [
-    0.02,
-    0.05,
-    0.1,
-    0.2,
-    0.5,
-    1,
-    2,
-    5,
-    10,
-    15,
-    30,
-    60,
-    120,
-    300,
-    600,
-    900,
-    1800,
-    3600
-  ];
-  let interval;
-  if (Number.isFinite(pixelsPerSecond) && (pixelsPerSecond ?? 0) > 0) {
-    const targetMajorPx = 88;
-    interval = zoomIntervals.find((candidate) => candidate * (pixelsPerSecond ?? 0) >= targetMajorPx) ?? 3600;
-  } else {
-    const durationIntervals = [0.25, 0.5, 1, 2, 5, 10, 15, 30, 60];
-    const target = duration / 6;
-    interval = durationIntervals.find((candidate) => candidate >= target) ?? 60;
-  }
-  if (Number.isFinite(frameRate) && (frameRate ?? 0) > 0) {
-    const fps = frameRate ?? 0;
-    return Math.max(1, Math.ceil(interval * fps - 1e-6)) / fps;
-  }
-  return interval;
-}
-function getMinorSubdivisions(majorInterval, pixelsPerSecond, frameRate) {
-  const pps = Number.isFinite(pixelsPerSecond) ? pixelsPerSecond ?? 0 : 0;
-  if (pps <= 0) return 4;
-  const fps = Number.isFinite(frameRate) ? frameRate ?? 0 : 0;
-  const majorFrames = fps > 0 ? Math.round(majorInterval * fps) : 0;
-  const candidates = fps > 0 ? [4, 5, 3, 2] : [4, 2];
-  for (const parts of candidates) {
-    if (fps > 0 && majorFrames % parts !== 0) continue;
-    if (majorInterval / parts * pps >= 8) return parts;
-  }
-  return 0;
-}
-function roundTickValue(time) {
-  return Math.round(time * 1e6) / 1e6;
-}
-function isSupportedTickDuration(duration) {
-  return duration > 0 && Number.isFinite(duration) && duration <= 14400;
-}
-function getTickRange(duration, range) {
-  return {
-    start: Math.max(0, range?.start ?? 0),
-    end: Math.min(duration, range?.end ?? duration)
-  };
-}
-function appendMinorTicks(minor, majorTime, minorInterval, subdivisions, range, maxTicks, majorCount) {
-  for (let part = 1; part < subdivisions && majorCount + minor.length < maxTicks; part++) {
-    const time = majorTime + part * minorInterval;
-    if (time >= range.start - 1e-3 && time <= range.end + 1e-3) {
-      minor.push(roundTickValue(time));
-    }
-  }
-}
-function generateTicks(duration, pixelsPerSecond, frameRate, range) {
-  if (!isSupportedTickDuration(duration)) return { major: [], minor: [] };
-  const majorInterval = getTimelineMajorTickInterval(duration, pixelsPerSecond, frameRate);
-  const subdivisions = getMinorSubdivisions(majorInterval, pixelsPerSecond, frameRate);
-  const minorInterval = subdivisions > 0 ? majorInterval / subdivisions : 0;
-  const major = [];
-  const minor = [];
-  const maxTicks = 2e3;
-  const tickRange = getTickRange(duration, range);
-  const firstMajorIndex = Math.max(0, Math.floor(tickRange.start / majorInterval));
-  for (let index = firstMajorIndex; major.length < maxTicks; index++) {
-    const time = index * majorInterval;
-    if (time > tickRange.end + 1e-3) break;
-    if (time >= tickRange.start - 1e-3) major.push(roundTickValue(time));
-    appendMinorTicks(minor, time, minorInterval, subdivisions, tickRange, maxTicks, major.length);
-  }
-  return { major, minor };
-}
-function formatTimelineTickLabel(time, duration, majorInterval) {
-  if (!Number.isFinite(time)) return "00:00";
-  const safeTime = Math.max(0, time);
-  if (majorInterval < 0.1) {
-    const totalHundredths = Math.round(safeTime * 100);
-    const wholeSeconds = Math.floor(totalHundredths / 100);
-    const hundredth = totalHundredths % 100;
-    return `${formatTime(wholeSeconds)}.${hundredth.toString().padStart(2, "0")}`;
-  }
-  if (majorInterval < 1) {
-    const totalTenths = Math.round(safeTime * 10);
-    const wholeSeconds = Math.floor(totalTenths / 10);
-    const tenth = totalTenths % 10;
-    return `${formatTime(wholeSeconds)}.${tenth}`;
-  }
-  if (duration >= 3600 || safeTime >= 3600) {
-    const totalSeconds = Math.floor(safeTime);
-    const hours = Math.floor(totalSeconds / 3600);
-    const minutes = Math.floor(totalSeconds % 3600 / 60);
-    const seconds = totalSeconds % 60;
-    return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
-  }
-  return formatTime(safeTime);
-}
-
-// src/player/components/useTimelineTicks.ts
 function useTimelineTicks(duration, pixelsPerSecond, timeDisplayMode, renderTimeRange) {
-  const frameRate = timeDisplayMode === "frame" ? STUDIO_PREVIEW_FPS : void 0;
+  const frameRate = rulerFrameRate(timeDisplayMode);
   const ticks = useMemo18(
     () => generateTicks(duration, pixelsPerSecond, frameRate, renderTimeRange),
     [duration, frameRate, pixelsPerSecond, renderTimeRange]
@@ -14206,7 +14275,6 @@ function useTimelineProviderState({
     onResizeElements: pinnedOnResizeElements,
     onBlockedEditAttempt: oneShotEdits.onBlockedEditAttempt,
     onLinkEdit: oneShotEdits.onLinkEdit,
-    onSeek,
     setShowPopover,
     setRangeSelectionRef,
     readZIndex: zSyncEnabled ? readClipZIndex : void 0,
@@ -14997,7 +15065,8 @@ var DEFAULT_FADE_SECONDS = 0.5;
 var SNAP_LABEL = {
   playhead: "playhead",
   "clip-edge": "clip edge",
-  beat: "beat"
+  beat: "beat",
+  grid: "grid line"
 };
 var ClipFadesContext = createContext4(null);
 function useClipFadeDraft(el) {
@@ -16348,8 +16417,8 @@ import { HF_AUDIO_FX_ATTR } from "@hyperframes/core/audio-fx";
 import { HF_COLOR_GRADING_ATTR } from "@hyperframes/core/color-grading";
 
 // src/player/store/previewIframeStore.ts
-import { create as create2 } from "zustand";
-var usePreviewIframeStore = create2((set) => ({
+import { create as create3 } from "zustand";
+var usePreviewIframeStore = create3((set) => ({
   iframe: null,
   // Return the same state reference on a no-op set so zustand skips the
   // notify (Object.is check in setState) instead of merging a new object
@@ -17061,7 +17130,10 @@ function fileDocs(ownFile, written, nestedFiles) {
 }
 
 // src/utils/gsapSoftReload.ts
+var pendingReadyRetry = null;
 function ensureMotionPathPluginLoaded(iframe) {
+  if (pendingReadyRetry) window.removeEventListener("message", pendingReadyRetry);
+  pendingReadyRetry = null;
   if (!iframe?.contentWindow || !iframe.contentDocument) return;
   const win = iframe.contentWindow;
   const doc = iframe.contentDocument;
@@ -17072,7 +17144,19 @@ function ensureMotionPathPluginLoaded(iframe) {
     }
     return;
   }
-  if (!win.gsap?.registerPlugin) return;
+  if (!win.gsap?.registerPlugin) {
+    if (win.__playerReady) return;
+    const retry = (event) => {
+      const data = event.data;
+      if (event.source !== win || data?.source !== "hf-preview" || data.type !== "ready") return;
+      window.removeEventListener("message", retry);
+      pendingReadyRetry = null;
+      if (win.gsap?.registerPlugin) ensureMotionPathPluginLoaded(iframe);
+    };
+    pendingReadyRetry = retry;
+    window.addEventListener("message", retry);
+    return;
+  }
   if (win.__hfMotionPathPluginLoading) return;
   try {
     win.__hfMotionPathPluginLoading = true;
@@ -18062,8 +18146,8 @@ async function persistElementAttribute({
 }
 
 // src/components/editor/cropPresetStore.ts
-import { create as create3 } from "zustand";
-var useCropPresetBarStore = create3((set) => ({
+import { create as create4 } from "zustand";
+var useCropPresetBarStore = create4((set) => ({
   openFor: null,
   open: (target) => set({ openFor: target }),
   close: () => set({ openFor: null })
@@ -24330,8 +24414,8 @@ async function normalizeClipsLoudness(projectId, elements, writers) {
 }
 
 // src/player/components/audioGainDialogStore.ts
-import { create as create4 } from "zustand";
-var useAudioGainDialogStore = create4((set) => ({
+import { create as create5 } from "zustand";
+var useAudioGainDialogStore = create5((set) => ({
   targetKeys: null,
   open: (keys) => set({ targetKeys: keys }),
   close: () => set({ targetKeys: null })
@@ -27332,7 +27416,7 @@ import { useRef as useRef48, useCallback as useCallback42, useEffect as useEffec
 import { useRef as useRef45, useCallback as useCallback38 } from "react";
 
 // src/captions/store.ts
-import { create as create5 } from "zustand";
+import { create as create6 } from "zustand";
 var nextSplitId = 0;
 var HISTORY_CAP = 50;
 var HISTORY_COALESCE_MS = 800;
@@ -27362,7 +27446,7 @@ function pushHistory(state, key2) {
   const past = [...state.past, state.model].slice(-HISTORY_CAP);
   return { past, future: [] };
 }
-var useCaptionStore = create5((set, get) => ({
+var useCaptionStore = create6((set, get) => ({
   ...initialState,
   // Basic
   setEditMode: (active) => set({ isEditMode: active }),
@@ -30830,10 +30914,11 @@ function useTimelinePlayer({
         const iframe = overrideIframe !== void 0 ? overrideIframe : iframeRef.current;
         const win = iframe?.contentWindow;
         if (!iframe || !win) return null;
-        return resolvePlaybackAdapter(iframe, win, {
+        const adapter = resolvePlaybackAdapter(iframe, win, {
           cache: staticSeekAdapterRef,
           warned: staticSeekWarnedRef
         });
+        return transportAdapter(adapter);
       } catch {
         return null;
       }
@@ -30977,7 +31062,7 @@ function useTimelinePlayer({
         return false;
       }
       const duration = Math.max(0, adapter.getDuration());
-      const nextTime = Math.max(0, duration > 0 ? Math.min(duration, time) : time);
+      const nextTime = clampToDuration(time, duration);
       const keepPlaying = options?.keepPlaying === true;
       const shouldResumeAfterSeek = shouldResumeForwardPlaybackAfterSeek({
         keepPlaying,
@@ -31038,6 +31123,7 @@ function useTimelinePlayer({
       }
     });
   }, [seek, play, pause]);
+  useEffect35(() => subscribePreviewFrame(getAdapter), [getAdapter]);
   const { playbackKeyDownRef, playbackKeyUpRef, attachIframeShortcutListeners, togglePlay } = usePlaybackKeyboard({
     iframeRef,
     shuttleDirectionRef,
@@ -31333,8 +31419,8 @@ function useCompositionStack({
 }
 
 // src/utils/assetPreviewStore.ts
-import { create as create6 } from "zustand";
-var useAssetPreviewStore = create6((set) => ({
+import { create as create7 } from "zustand";
+var useAssetPreviewStore = create7((set) => ({
   previewAsset: null,
   previewProjectId: null,
   setPreviewAsset: (asset, projectId) => set({ previewAsset: asset, previewProjectId: projectId }),
@@ -31758,9 +31844,9 @@ function resolvePreviewVisibleRegion(input) {
 }
 
 // src/components/editor/previewGuidesStore.ts
-import { create as create7 } from "zustand";
+import { create as create8 } from "zustand";
 var RULER_GUTTER_PX = 16;
-var usePreviewGuidesStore = create7((set, get) => {
+var usePreviewGuidesStore = create8((set, get) => {
   const stored = readStudioUiPreferences();
   return {
     rulerVisible: stored.rulerVisible ?? false,
@@ -33303,8 +33389,8 @@ import {
 } from "@hyperframes/core/audio-gain";
 
 // src/utils/audioMeterVisibility.ts
-import { create as create8 } from "zustand";
-var useAudioMetersVisible = create8((set) => ({
+import { create as create9 } from "zustand";
+var useAudioMetersVisible = create9((set) => ({
   visible: readStudioUiPreferences().audioMetersVisible ?? false,
   setVisible: (visible) => {
     writeStudioUiPreferences({ audioMetersVisible: visible });
@@ -37894,7 +37980,6 @@ function startGesture(kind, e, opts, options) {
   let pathOffsetMember;
   if (kind === "drag") {
     opts.onManualDragStartRef.current?.();
-    opts.rafPausedRef.current = true;
     const result = createManualOffsetDragMember({
       key: selectionCacheKey(sel),
       selection: sel,
@@ -37904,6 +37989,7 @@ function startGesture(kind, e, opts, options) {
     });
     if (!result.ok) {
       opts.onBlockedMoveRef.current(result.selection, result.reason);
+      e.preventDefault();
       return false;
     }
     pathOffsetMember = result.member;
@@ -38691,6 +38777,7 @@ function useDomEditNudge(params) {
     const isGroup = groupItems.length > 1;
     const targets = isGroup ? resolveGroupNudgeTargets(groupItems) : resolveSingleNudgeTarget(p.selectionRef.current, p.overlayRectRef.current);
     if (!targets) return null;
+    p.onManualDragStartRef.current?.();
     const members = [];
     for (const target of targets) {
       const result = createManualOffsetDragMember({ ...target, gesture: "nudge" });
@@ -38702,7 +38789,6 @@ function useDomEditNudge(params) {
       members.push(result.member);
     }
     if (members.length === 0) return null;
-    p.onManualDragStartRef.current?.();
     const edit = beginStudioPendingEdit(manualOffsetMoveRevert(members));
     return { members, isGroup, accum: { x: 0, y: 0 }, timer: null, edit };
   };
@@ -45100,7 +45186,7 @@ function nearestPointOnPath(px, py, nodes) {
   }
   return best;
 }
-function buildMotionPathGeometry(read) {
+function buildMotionPathGeometry(read, base2 = { x: 0, y: 0 }) {
   if (!read) return null;
   const isArc = Boolean(read.arcPath);
   const nodes = [];
@@ -45112,8 +45198,8 @@ function buildMotionPathGeometry(read) {
     if (tweenHasX && !finite(kf.properties.x)) return;
     if (tweenHasY && !finite(kf.properties.y)) return;
     nodes.push({
-      x: tweenHasX ? kf.properties.x : 0,
-      y: tweenHasY ? kf.properties.y : 0,
+      x: tweenHasX ? kf.properties.x : base2.x,
+      y: tweenHasY ? kf.properties.y : base2.y,
       ref: isArc ? { type: "waypoint", index: i } : { type: "keyframe", pct: kf.percentage }
     });
   });
@@ -45139,6 +45225,97 @@ function editableAnimationId(animations, kind, sel) {
   return a?.id ?? null;
 }
 
+// src/components/editor/motionPathLayerNode.ts
+var LAYER_BOX = '[data-dom-edit-selection-box="true"]';
+var dotRadius = (r, selected) => selected ? r * 1.5 : r;
+function pressBelongsToLayer(e, point, pressed, dotR, live) {
+  if (live && Math.abs(pressed.x - live.x) < 0.5 && Math.abs(pressed.y - live.y) < 0.5) return true;
+  const hits = e.currentTarget.ownerDocument.elementsFromPoint(e.clientX, e.clientY);
+  const inBox = hits.some((el) => el.closest(LAYER_BOX));
+  return inBox && Math.hypot(point.x - pressed.ax, point.y - pressed.ay) > dotR;
+}
+function pressSelectedLayer(e) {
+  const box = e.currentTarget.ownerDocument.querySelector(LAYER_BOX);
+  if (!box || getComputedStyle(box).pointerEvents === "none") return false;
+  return !box.dispatchEvent(new PointerEvent("pointerdown", e.nativeEvent));
+}
+
+// src/hooks/gsapPositionDetection.ts
+function readGsapPositionFromIframe(iframe, elementSelector) {
+  const gsap3 = getIframeGsap(iframe);
+  if (!gsap3) return null;
+  const element = queryIframeElement(iframe, elementSelector);
+  if (!element) return null;
+  const x = Number(gsap3.getProperty(element, "x")) || 0;
+  const y = Number(gsap3.getProperty(element, "y")) || 0;
+  return { x, y };
+}
+function animHasPosition(anim) {
+  if (anim.keyframes?.keyframes.some((kf) => "x" in kf.properties || "y" in kf.properties))
+    return true;
+  if (anim.method === "fromTo") {
+    const from = anim.fromProperties;
+    return "x" in anim.properties || "y" in anim.properties || !!(from && ("x" in from || "y" in from));
+  }
+  return "x" in anim.properties || "y" in anim.properties;
+}
+function findGsapPositionAnimation(animations, selector) {
+  if (animations.length === 0) return null;
+  const currentTime = usePlayerStore.getState().currentTime;
+  const scored = animations.filter(animHasPosition).map((a) => {
+    let score = 0;
+    if (a.keyframes) score += 5;
+    if (selector && a.targetSelector === selector) score += 8;
+    else if (a.targetSelector.includes(",")) score -= 5;
+    return { anim: a, score: score + playheadProximity(a, currentTime) };
+  });
+  scored.sort((a, b) => b.score - a.score);
+  return scored[0]?.anim ?? null;
+}
+function playheadProximity(a, currentTime) {
+  const pos = a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0);
+  const dur = a.duration ?? 0;
+  if (currentTime >= pos - 0.05 && currentTime <= pos + dur + 0.05) return 50;
+  return -Math.round(Math.min(Math.abs(currentTime - pos), Math.abs(currentTime - pos - dur)) * 5);
+}
+function statesValueAt(anim, time) {
+  const duration = resolveTweenDuration(anim);
+  if (!(duration > 0)) return false;
+  const pct = (time - (resolveTweenStart(anim) ?? 0)) / duration * 100;
+  const near3 = (keyframe) => Math.abs(keyframe - pct) <= KEYFRAME_PCT_MATCH;
+  if (anim.keyframes) return anim.keyframes.keyframes.some((kf) => near3(kf.percentage));
+  if (anim.method === "from") return near3(0);
+  return near3(100) || anim.method === "fromTo" && near3(0);
+}
+function pickClosestToPlayhead(anims) {
+  if (anims.length <= 1) return anims[0] ?? null;
+  const ct = usePlayerStore.getState().currentTime;
+  return anims.reduce((best, a) => {
+    const dist = playheadDistance(a, ct);
+    const bestDist = playheadDistance(best, ct);
+    if (dist < bestDist) return a;
+    const stated = dist === 0 && bestDist === 0 ? statedValueWinner(a, best, ct) : null;
+    if (stated) return stated;
+    if (dist === bestDist && keyframeCount(a) > keyframeCount(best)) return a;
+    return best;
+  });
+}
+function playheadDistance(anim, time) {
+  const s = resolveTweenStart(anim) ?? 0;
+  const e = s + resolveTweenDuration(anim);
+  return time >= s && time <= e ? 0 : Math.min(Math.abs(time - s), Math.abs(time - e));
+}
+function statedValueWinner(a, b, time) {
+  const [mine, theirs] = [statesValueAt(a, time), statesValueAt(b, time)];
+  if (mine !== theirs) return mine ? a : b;
+  const [s, bS] = [resolveTweenStart(a) ?? 0, resolveTweenStart(b) ?? 0];
+  if (mine && s !== bS) return s > bS ? a : b;
+  return null;
+}
+function keyframeCount(anim) {
+  return anim.keyframes?.keyframes.length ?? 0;
+}
+
 // src/components/editor/MotionPathNode.tsx
 import { jsx as jsx103, jsxs as jsxs74 } from "react/jsx-runtime";
 var ACCENT = "var(--hf-accent, #3CE6AC)";
@@ -45147,7 +45324,7 @@ function MotionPathNode(props) {
   const bx = cx + r * 1.8;
   const by = cy - r * 1.8;
   const k = r * 0.55;
-  const side = (selected ? r * 1.5 : r) * 1.414;
+  const side = dotRadius(r, selected) * 1.414;
   return /* @__PURE__ */ jsxs74("g", { onPointerEnter: props.onEnter, onPointerLeave: props.onLeave, children: [
     /* @__PURE__ */ jsx103(
       "rect",
@@ -45394,7 +45571,8 @@ function useMotionPathData(iframeRef, selector) {
     }
     const recompute = () => {
       const read = readRuntimeKeyframes(iframeRef.current, selector, void 0, ["x", "y"]);
-      const next = buildMotionPathGeometry(read);
+      const base2 = read ? readGsapPositionFromIframe(iframeRef.current, selector) : null;
+      const next = buildMotionPathGeometry(read, base2 ?? void 0);
       setGeometry(
         (prev) => prev?.points === next?.points && prev?.kind === next?.kind ? prev : next
       );
@@ -45564,6 +45742,10 @@ var MotionPathOverlay = memo29(function MotionPathOverlay2({
     if (!interactive) return;
     if (e.button !== 0) return;
     e.stopPropagation();
+    const live = readGsapPositionFromIframe(iframeRef.current, selectorFor(selection) ?? "");
+    const dotR = dotRadius(nodeR, ref.type === "keyframe" && ref.pct === activeKeyframePct);
+    if (pressBelongsToLayer(e, clientToComp(e), abs[index], dotR, live) && pressSelectedLayer(e))
+      return;
     e.target.setPointerCapture(e.pointerId);
     dragRef.current = {
       index,
@@ -46532,10 +46714,10 @@ function normalize(edit) {
   const { anim } = edit;
   const data = anim.keyframes;
   if (data) {
-    if (!isLinear(anim.ease) || !isLinear(data.ease)) return { reason: "eased-keyframes" };
     if (data.format === "simple-array") return { reason: "simple-array-keyframes" };
     const arrayStep = data.format === "object-array";
     return {
+      runEase: data.ease ?? anim.ease,
       keyframes: data.keyframes.map((kf) => ({
         ...kf,
         properties: { ...kf.properties },
@@ -46573,8 +46755,9 @@ function valueAt(keyframes, prop, side) {
   const kf = side === "first" ? carrying[0] : carrying.at(-1);
   return kf ? { percentage: kf.percentage, value: kf.properties[prop] } : null;
 }
+var keyframeAt = (keyframes, percentage) => keyframes.find((kf) => Math.abs(kf.percentage - percentage) <= KEYFRAME_PCT_MATCH);
 function upsert(keyframes, percentage, properties, ease) {
-  const hit = keyframes.find((kf) => Math.abs(kf.percentage - percentage) <= KEYFRAME_PCT_MATCH);
+  const hit = keyframeAt(keyframes, percentage);
   if (hit) {
     Object.assign(hit.properties, properties);
     return hit;
@@ -46622,11 +46805,15 @@ function planValueAtPlayhead(edit) {
   let position = start;
   let span = duration;
   const pct = "percentage" in edit.at ? edit.at.percentage : roundPct2((edit.at.time - start) / duration * 100);
+  const eased = !isLinear(norm.runEase);
   if (pct >= -KEYFRAME_PCT_MATCH && pct <= 100 + KEYFRAME_PCT_MATCH) {
     const at = Math.min(100, Math.max(0, pct));
+    const hit = keyframeAt(keyframes, at);
+    if (eased && hit?.percentage !== 0 && hit?.percentage !== 100) return refuse("eased-keyframes");
     const next = [...keyframes].sort((a, b) => a.percentage - b.percentage).find((kf) => kf.percentage > at + KEYFRAME_PCT_MATCH);
     upsert(keyframes, at, { ...values }, next?.ease);
   } else {
+    if (eased) return refuse("eased-keyframes");
     const time = edit.at.time;
     const before = time < start;
     const held = heldEnds(norm, before ? "start" : "end", edit.implicitEndValue, backfilled);
@@ -46654,6 +46841,7 @@ function planValueAtPlayhead(edit) {
       position: roundTo3(position),
       duration: roundTo3(span),
       keyframes,
+      ...norm.runEase ? { ease: norm.runEase } : {},
       ...norm.easeEach ? { easeEach: norm.easeEach } : {}
     },
     added: keyframes.length > authored
@@ -46785,82 +46973,6 @@ async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos
   });
 }
 
-// src/hooks/gsapPositionDetection.ts
-function readGsapPositionFromIframe(iframe, elementSelector) {
-  const gsap3 = getIframeGsap(iframe);
-  if (!gsap3) return null;
-  const element = queryIframeElement(iframe, elementSelector);
-  if (!element) return null;
-  const x = Number(gsap3.getProperty(element, "x")) || 0;
-  const y = Number(gsap3.getProperty(element, "y")) || 0;
-  return { x, y };
-}
-function animHasPosition(anim) {
-  if (anim.keyframes?.keyframes.some((kf) => "x" in kf.properties || "y" in kf.properties))
-    return true;
-  if (anim.method === "fromTo") {
-    const from = anim.fromProperties;
-    return "x" in anim.properties || "y" in anim.properties || !!(from && ("x" in from || "y" in from));
-  }
-  return "x" in anim.properties || "y" in anim.properties;
-}
-function findGsapPositionAnimation(animations, selector) {
-  if (animations.length === 0) return null;
-  const currentTime = usePlayerStore.getState().currentTime;
-  const scored = animations.filter(animHasPosition).map((a) => {
-    let score = 0;
-    if (a.keyframes) score += 5;
-    if (selector && a.targetSelector === selector) score += 8;
-    else if (a.targetSelector.includes(",")) score -= 5;
-    return { anim: a, score: score + playheadProximity(a, currentTime) };
-  });
-  scored.sort((a, b) => b.score - a.score);
-  return scored[0]?.anim ?? null;
-}
-function playheadProximity(a, currentTime) {
-  const pos = a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0);
-  const dur = a.duration ?? 0;
-  if (currentTime >= pos - 0.05 && currentTime <= pos + dur + 0.05) return 50;
-  return -Math.round(Math.min(Math.abs(currentTime - pos), Math.abs(currentTime - pos - dur)) * 5);
-}
-function statesValueAt(anim, time) {
-  const duration = resolveTweenDuration(anim);
-  if (!(duration > 0)) return false;
-  const pct = (time - (resolveTweenStart(anim) ?? 0)) / duration * 100;
-  const near3 = (keyframe) => Math.abs(keyframe - pct) <= KEYFRAME_PCT_MATCH;
-  if (anim.keyframes) return anim.keyframes.keyframes.some((kf) => near3(kf.percentage));
-  if (anim.method === "from") return near3(0);
-  return near3(100) || anim.method === "fromTo" && near3(0);
-}
-function pickClosestToPlayhead(anims) {
-  if (anims.length <= 1) return anims[0] ?? null;
-  const ct = usePlayerStore.getState().currentTime;
-  return anims.reduce((best, a) => {
-    const dist = playheadDistance(a, ct);
-    const bestDist = playheadDistance(best, ct);
-    if (dist < bestDist) return a;
-    const stated = dist === 0 && bestDist === 0 ? statedValueWinner(a, best, ct) : null;
-    if (stated) return stated;
-    if (dist === bestDist && keyframeCount(a) > keyframeCount(best)) return a;
-    return best;
-  });
-}
-function playheadDistance(anim, time) {
-  const s = resolveTweenStart(anim) ?? 0;
-  const e = s + resolveTweenDuration(anim);
-  return time >= s && time <= e ? 0 : Math.min(Math.abs(time - s), Math.abs(time - e));
-}
-function statedValueWinner(a, b, time) {
-  const [mine, theirs] = [statesValueAt(a, time), statesValueAt(b, time)];
-  if (mine !== theirs) return mine ? a : b;
-  const [s, bS] = [resolveTweenStart(a) ?? 0, resolveTweenStart(b) ?? 0];
-  if (mine && s !== bS) return s > bS ? a : b;
-  return null;
-}
-function keyframeCount(anim) {
-  return anim.keyframes?.keyframes.length ?? 0;
-}
-
 // src/hooks/gsapElementMatch.ts
 function getAnimationsForElement(animations, target, element) {
   const matchers = /* @__PURE__ */ new Set();
@@ -49544,8 +49656,8 @@ import { useCallback as useCallback71, useSyncExternalStore as useSyncExternalSt
 import { CornersIn, CornersOut, DotsThree, X as X2 } from "@phosphor-icons/react";
 
 // src/components/dock/dockLayoutStore.ts
-import { create as create9 } from "zustand";
-var useDockLayoutStore = create9((set, get) => ({
+import { create as create10 } from "zustand";
+var useDockLayoutStore = create10((set, get) => ({
   controller: null,
   panels: PANEL_IDS,
   openPanels: new Set(PANEL_IDS),
@@ -50380,6 +50492,37 @@ function EditorShellBody({
   );
 }
 
+// src/hooks/linkShortcuts.ts
+var isDeleteKey = (event) => event.key === "Backspace" || event.key === "Delete";
+var hasMod = (event) => event.metaKey || event.ctrlKey;
+var SHORTCUTS = [
+  ["\u2318L", (e) => hasMod(e) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === "l"],
+  ["\u2325\u21E7D", (e) => !hasMod(e) && e.altKey && e.shiftKey && e.code === "KeyD"],
+  ["\u2325\u232B", (e) => !hasMod(e) && e.altKey && !e.shiftKey && isDeleteKey(e)]
+];
+function shortcutOf(event) {
+  return SHORTCUTS.find(([, matches]) => matches(event))?.[0] ?? null;
+}
+function dispatchLinkShortcut(event, cb) {
+  if (isTypingTarget(event.target)) return false;
+  const shortcut = shortcutOf(event);
+  if (!shortcut) return false;
+  const { elements, selectedElementId, selectedElementIds } = usePlayerStore.getState();
+  const element = elements.find((el) => (el.key ?? el.id) === selectedElementId);
+  if (!element) return false;
+  const item = resolveLinkMenuItems({
+    element,
+    elements,
+    selectedKeys: selectedElementIds,
+    onLinkEdit: cb.handleLinkEdit,
+    onDeleteElementOnly: cb.handleTimelineElementDeleteOnly
+  }).find((candidate) => candidate.shortcut === shortcut);
+  if (!item) return false;
+  event.preventDefault();
+  item.run();
+  return true;
+}
+
 // src/player/components/ImageThumbnail.tsx
 import { memo as memo34, useMemo as useMemo48 } from "react";
 
@@ -85076,36 +85219,6 @@ function useBlockHandlers({
 // src/hooks/useAppHotkeys.ts
 import { useCallback as useCallback154, useEffect as useEffect128, useRef as useRef158 } from "react";
 
-// src/hooks/linkShortcuts.ts
-var isDeleteKey = (event) => event.key === "Backspace" || event.key === "Delete";
-var hasMod = (event) => event.metaKey || event.ctrlKey;
-var SHORTCUTS = [
-  ["\u2318L", (e) => hasMod(e) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === "l"],
-  ["\u2325\u21E7D", (e) => !hasMod(e) && e.altKey && e.shiftKey && e.code === "KeyD"],
-  ["\u2325\u232B", (e) => !hasMod(e) && e.altKey && !e.shiftKey && isDeleteKey(e)]
-];
-function shortcutOf(event) {
-  return SHORTCUTS.find(([, matches]) => matches(event))?.[0] ?? null;
-}
-function dispatchLinkShortcut(event, cb) {
-  const shortcut = shortcutOf(event);
-  if (!shortcut) return false;
-  const { elements, selectedElementId, selectedElementIds } = usePlayerStore.getState();
-  const element = elements.find((el) => (el.key ?? el.id) === selectedElementId);
-  if (!element) return false;
-  const item = resolveLinkMenuItems({
-    element,
-    elements,
-    selectedKeys: selectedElementIds,
-    onLinkEdit: cb.handleLinkEdit,
-    onDeleteElementOnly: cb.handleTimelineElementDeleteOnly
-  }).find((candidate) => candidate.shortcut === shortcut);
-  if (!item) return false;
-  event.preventDefault();
-  item.run();
-  return true;
-}
-
 // src/hooks/appHotkeysDispatch.ts
 function handleUndoRedoKey(event, onUndo, onRedo) {
   const key2 = event.key.toLowerCase();
@@ -85516,7 +85629,7 @@ function useAppHotkeys({
   const handleAppKeyDown = useCallback154((event) => {
     const cb = cbRef.current;
     const key2 = event.key.toLowerCase();
-    if (!isTypingTarget(event.target) && dispatchLinkShortcut(event, cb)) return;
+    if (dispatchLinkShortcut(event, cb)) return;
     if (event.metaKey || event.ctrlKey) {
       dispatchModifierKey(event, key2, cb);
       return;
@@ -96558,6 +96671,7 @@ function useKeyframeToggle(session) {
 var TimelineToolbar = memo60(function TimelineToolbar2({
   domEditSession,
   onSplitElement,
+  splitShortcut = SPLIT_SHORTCUT_HINT,
   history: history2,
   showHistory = true,
   showSelectAroundPlayhead = true,
@@ -96725,7 +96839,7 @@ var TimelineToolbar = memo60(function TimelineToolbar2({
           return /* @__PURE__ */ jsx243(
             Tooltip,
             {
-              label: canSplit ? "Split at playhead (S)" : splittable ? "Move the playhead inside the clip to split" : "Select a clip to split",
+              label: canSplit ? `Split at playhead (${splitShortcut})` : splittable ? "Move the playhead inside the clip to split" : "Select a clip to split",
               children: /* @__PURE__ */ jsx243(
                 "button",
                 {
@@ -98306,6 +98420,7 @@ export {
   cn,
   collectSnapContext,
   collectStudioLookScene,
+  dispatchLinkShortcut,
   displayTrackOrder,
   extractSnapTargets,
   fadeHandleBoxes,