@hyperframes/studio 0.7.56 → 0.7.58

package/src/player/components/timelineZones.ts

@@ -3,8 +3,8 @@ import { isAudioTimelineElement } from "../../utils/timelineInspector";
 
 /**
  * Free-form vertical zones, top → bottom: visual, audio. There is no "main track"
- * — layering is CSS z-index (the renderer ignores track index), so the timeline's
- * only job is to keep visual clips grouped above audio clips.
+ * — canvas layering is CSS z-index (the renderer ignores track index), so the
+ * timeline's only job is to keep visual clips grouped above audio clips.
  */
 export type TrackZone = "visual" | "audio";
 
@@ -16,9 +16,6 @@ export function classifyZone(el: TimelineElement): TrackZone {
 
 const keyOf = (el: TimelineElement) => el.key ?? el.id;
 
-/** Stacking order for a clip: missing / "auto" z is treated as 0. */
-const zOf = (el: TimelineElement) => (Number.isFinite(el.zIndex) ? (el.zIndex as number) : 0);
-
 const EPS = 1e-6;
 
 /** Two clips overlap when their half-open [start, end) intervals intersect. */
@@ -26,173 +23,123 @@ function overlaps(a: TimelineElement, b: TimelineElement): boolean {
   return a.start < b.start + b.duration - EPS && b.start < a.start + a.duration - EPS;
 }
 
-/** A clip paired with its position in the discovery/document (input) order. */
-interface IndexedClip {
-  el: TimelineElement;
-  /** Index in the input `elements` array = discovery/DOM order. */
-  domIndex: number;
-}
-
-/** One display lane: the clips packed onto it, in placement order. */
-interface Lane {
-  occupants: IndexedClip[];
-  /** The single authored track all occupants share, or null once mixed (never
-   *  happens — we only ever add same-track clips to an existing lane). */
-  track: number;
-}
-
-/**
- * Lowest lane index a clip may occupy: strictly above every already-placed lane
- * holding a clip it overlaps in time (all of which out-stack it by the z-desc
- * placement order).
- */
-function lowestAllowedLane(lanes: Lane[], item: IndexedClip): number {
-  let minLane = 0;
-  for (let i = 0; i < lanes.length; i++) {
-    if (lanes[i].occupants.some((o) => overlaps(o.el, item.el))) minLane = i + 1;
-  }
-  return minLane;
-}
-
-/**
- * First lane at index ≥ minLane that holds solely this clip's authored track and
- * nothing overlapping (so sequential same-track clips share a lane); -1 when none
- * qualifies and a fresh lane must open.
- */
-function findReusableLane(lanes: Lane[], minLane: number, item: IndexedClip): number {
-  for (let i = minLane; i < lanes.length; i++) {
-    const lane = lanes[i];
-    if (lane.track !== item.el.track) continue;
-    if (lane.occupants.some((o) => overlaps(o.el, item.el))) continue;
-    return i;
-  }
-  return -1;
+/** Deterministic order on the stable clip id (never the mutated lane/track). */
+function byStableId(a: TimelineElement, b: TimelineElement): number {
+  const ka = keyOf(a);
+  const kb = keyOf(b);
+  return ka < kb ? -1 : ka > kb ? 1 : 0;
 }
 
 /**
- * Pack a WHOLE zone's clips onto display lanes with a single constrained pass so
- * that, for EVERY pair of time-overlapping clips, lane order (upper = lower index)
- * equals canvas stacking order. This replaces the old two-stage
- * `orderTrackBlocksByZ` + per-track `packTrackLanes`, which ordered whole authored
- * tracks by their MAX z and so lifted a low-z clip above a clip that covers it
- * whenever it shared a track with a high-z clip (the qa-clean ralu/video bug — a
- * low-z image rode its z=3 trackmate above the z=2 video that paints over it). No
- * whole-track mapping can fix that; the mapping must be per-clip.
+ * Pack ONE authored track's clips onto sub-lanes so no two time-overlapping clips
+ * share a lane. Clips are ordered by their STABLE id (a function of the input, not
+ * of the lane being computed — the historical oscillation bug tie-broke on the
+ * mutated track) and placed first-fit, so sequential (non-overlapping) clips
+ * collapse onto a single lane and only genuine time overlaps spill onto adjacent
+ * sub-lanes. Writes each clip's absolute display lane into `laneOf`; returns the
+ * number of lanes used (≥ 1 when non-empty).
  *
- * Algorithm:
- *   1. Order clips by z DESC; z-tie → INPUT-ARRAY-INDEX (DOM order) DESC (CSS
- *      paints equal-z siblings by DOM order — LATER in DOM paints on top, so it
- *      must place first / upper); final tie → stable key. NEVER tie-break on the
- *      mutated lane/track index (historic oscillation bug — the tie-break must be
- *      a stable function of the input, not of the output being computed).
- *   2. Place each clip at lane ≥ (1 + highest lane among already-placed clips it
- *      OVERLAPS IN TIME). By z-desc placement every already-placed overlapping
- *      clip out-stacks this one (higher z, or equal z but later in DOM), so this
- *      guarantees lane order == stacking order for every overlapping pair.
- *   3. To preserve the "distinct authored tracks stay distinct / sequential
- *      same-track clips share a lane" feel, reuse an existing lane at index ≥ that
- *      minimum ONLY when the lane's occupants are all from the SAME authored track
- *      AND none overlaps this clip in time; otherwise open a fresh lane.
+ * The editor enforces no per-track time overlap, so the spill only fires on legacy
+ * files. It is DISPLAY-ONLY — a drag commit persists just the dragged clip, never
+ * this re-lane — so it never rewrites the source.
  *
- * Writes each clip's absolute display lane (`base + laneIndex`) into `laneOf` and
- * returns the number of lanes used (≥ 1 when non-empty).
+ * Spill sub-lanes ARE legal drop targets (Timeline's trackOrder lists every
+ * display lane). Because every occupant of a sub-lane shares the base lane's
+ * authored track by construction, dropping a clip onto one persists that shared
+ * authored track — a legitimate same-track join. On the next normalize the
+ * joined track re-packs (stable-id first-fit), so the clip may display on a
+ * DIFFERENT sub-lane than it was dropped on; the packing is deterministic, and
+ * the persisted source value is correct either way.
  */
-function packZoneLanes(clips: IndexedClip[], base: number, laneOf: Map<string, number>): number {
-  const ordered = [...clips].sort(
-    (a, b) =>
-      zOf(b.el) - zOf(a.el) || b.domIndex - a.domIndex || (keyOf(a.el) < keyOf(b.el) ? -1 : 1),
-  );
-  const lanes: Lane[] = [];
-  for (const item of ordered) {
-    const minLane = lowestAllowedLane(lanes, item);
-    let placed = findReusableLane(lanes, minLane, item);
-    if (placed === -1) {
-      placed = lanes.length;
-      lanes.push({ occupants: [], track: item.el.track });
+function packTrackLanes(
+  clips: TimelineElement[],
+  base: number,
+  laneOf: Map<string, number>,
+): number {
+  const ordered = [...clips].sort(byStableId);
+  const lanes: TimelineElement[][] = [];
+  for (const el of ordered) {
+    let sub = lanes.findIndex((occ) => occ.every((o) => !overlaps(o, el)));
+    if (sub === -1) {
+      sub = lanes.length;
+      lanes.push([]);
     }
-    lanes[placed].occupants.push(item);
-    laneOf.set(keyOf(item.el), base + placed);
+    lanes[sub].push(el);
+    laneOf.set(keyOf(el), base + sub);
   }
-  return lanes.length;
+  return Math.max(1, lanes.length);
 }
 
 /**
- * Legacy per-track interval packing for the AUDIO zone (no z semantics): pack one
- * authored track's clips onto sub-lanes so no two overlap in time — sequential
- * clips share a lane, overlapping ones spill onto the next (first-fit). Ordered by
- * start (then stable key) so the layout is deterministic and idempotent. Returns
- * the number of lanes used (≥ 1 when non-empty).
+ * Pack a whole zone's clips onto contiguous display lanes, CapCut-stable: lanes
+ * follow the authored `data-track-index` (ASCENDING; ties by stable id) — NEVER a
+ * z-rank. Each distinct authored track owns its own lane (in ascending order);
+ * sequential same-track clips share it; time-overlapping same-track clips spill to
+ * adjacent sub-lanes (packTrackLanes). Returns the number of lanes used.
+ *
+ * This REPLACES the old global-z-rank interval pack. That pack ordered visual
+ * lanes by z-index and interval-packed overlaps, so editing one clip's z (or the
+ * whole-set re-pack a lane drag triggered) silently re-laned OTHER clips. The
+ * product decision is the opposite: a clip's lane is its track, period — z is
+ * canvas paint order only, and lane assignment must ignore it.
  */
-function packAudioTrackLanes(
-  clips: IndexedClip[],
+function packZoneLanes(
+  clips: TimelineElement[],
   base: number,
   laneOf: Map<string, number>,
 ): number {
-  const ordered = [...clips].sort(
-    (a, b) => a.el.start - b.el.start || (keyOf(a.el) < keyOf(b.el) ? -1 : 1),
-  );
-  const lanes: IndexedClip[][] = [];
-  for (const item of ordered) {
-    let sub = lanes.findIndex((occ) => occ.every((o) => !overlaps(o.el, item.el)));
-    if (sub === -1) {
-      sub = lanes.length;
-      lanes.push([]);
-    }
-    lanes[sub].push(item);
-    laneOf.set(keyOf(item.el), base + sub);
+  const byTrack = new Map<number, TimelineElement[]>();
+  for (const el of clips) {
+    const list = byTrack.get(el.track);
+    if (list) list.push(el);
+    else byTrack.set(el.track, [el]);
   }
-  return Math.max(1, lanes.length);
+  let used = 0;
+  for (const track of [...byTrack.keys()].sort((a, b) => a - b)) {
+    used += packTrackLanes(byTrack.get(track)!, base + used, laneOf);
+  }
+  return used;
 }
 
 /**
  * Assign display lanes for the timeline: visual lanes on top, audio lanes below.
  *
- * The VISUAL zone is packed per-clip (packZoneLanes) so the timeline's vertical
- * order matches the canvas's CSS stacking for EVERY time-overlapping pair — a
- * low-z clip sinks below a clip that covers it even if it shares an authored track
- * with a higher-z clip. Time-overlapping clips still split onto separate lanes
- * (standard NLE), sequential same-track clips still share a lane, and distinct
- * authored tracks stay distinct.
- *
- * The AUDIO zone keeps the original behavior — authored-track order, per-track
- * interval packing — because audio has no z / stacking semantics.
+ * Both zones are packed the SAME way — by authored track-index, ascending (see
+ * packZoneLanes) — so the timeline's vertical order follows each clip's track and
+ * nothing else. z-index does not participate in lane assignment (it is canvas
+ * paint order only; the lane ↔ z stacking sync in timelineStackingSync runs the
+ * other direction, only on a deliberate vertical edit). Time-overlapping same-track
+ * clips still split onto separate sub-lanes (legacy files only — the editor forbids
+ * per-track overlap), and that split is display-only, never persisted.
  *
  * Pure — returns a new array; unchanged clips keep their identity. Display-only
  * (runs on discovery); it does not rewrite the source. Idempotent (running it on
- * its own output is a fixed point).
+ * its own output is a fixed point): the lanes it emits are contiguous integers in
+ * ascending track order, and re-running groups by those same integers unchanged.
  */
 export function normalizeToZones(elements: TimelineElement[]): TimelineElement[] {
   if (elements.length === 0) return elements;
 
   const laneOf = new Map<string, number>();
-  let nextLane = 0;
-
-  const visual: IndexedClip[] = [];
-  const audio: IndexedClip[] = [];
-  elements.forEach((el, domIndex) => {
-    (classifyZone(el) === "audio" ? audio : visual).push({ el, domIndex });
-  });
+  const visual: TimelineElement[] = [];
+  const audio: TimelineElement[] = [];
+  for (const el of elements) {
+    (classifyZone(el) === "audio" ? audio : visual).push(el);
+  }
 
+  let nextLane = 0;
   nextLane += packZoneLanes(visual, nextLane, laneOf);
-
-  // Audio: preserve legacy behavior — group by authored track (ascending), pack
-  // each track's overlapping clips onto sub-lanes.
-  const audioByTrack = new Map<number, IndexedClip[]>();
-  for (const item of audio) {
-    const list = audioByTrack.get(item.el.track);
-    if (list) list.push(item);
-    else audioByTrack.set(item.el.track, [item]);
-  }
-  for (const track of [...audioByTrack.keys()].sort((a, b) => a - b)) {
-    nextLane += packAudioTrackLanes(audioByTrack.get(track)!, 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 };
+    // Record the source-file track the first time a clip is remapped so lane
+    // edits can persist in AUTHORED space (see TimelineElement.authoredTrack).
+    // Re-normalizing already-remapped elements must keep the original value.
+    return { ...el, track: lane, authoredTrack: el.authoredTrack ?? el.track };
   });
   return changed ? remapped : elements;
 }

package/src/player/components/timelineZoom.test.ts

@@ -45,11 +45,11 @@ describe("getTimelinePixelsPerSecond", () => {
 
 describe("getNextTimelineZoomPercent", () => {
   it("zooms out from fit relative to 100 percent", () => {
-    expect(getNextTimelineZoomPercent("out", "fit", 375)).toBe(80);
+    expect(getNextTimelineZoomPercent("out", "fit", 375)).toBe(50);
   });
 
   it("zooms in from fit relative to 100 percent", () => {
-    expect(getNextTimelineZoomPercent("in", "fit", 375)).toBe(125);
+    expect(getNextTimelineZoomPercent("in", "fit", 375)).toBe(200);
   });
 
   it("clamps the lower bound", () => {

package/src/player/components/timelineZoom.ts

@@ -2,9 +2,13 @@ import type { ZoomMode } from "../store/playerStore";
 
 export const MIN_TIMELINE_ZOOM_PERCENT = 10;
 export const MAX_TIMELINE_ZOOM_PERCENT = 2000;
-const ZOOM_OUT_FACTOR = 0.8;
-const ZOOM_IN_FACTOR = 1.25;
-const PINCH_ZOOM_SENSITIVITY = 0.0035;
+// CapCut-strength steps: one button press / pinch gesture moves the zoom
+// meaningfully (user feedback, twice-doubled: 1.25×/0.8× + 0.0035 felt like
+// "zooming several times to get anywhere", then 1.5× + 0.007 still too soft).
+// Kept reciprocal (2 × 0.5 = 1) so in+out round-trips.
+const ZOOM_OUT_FACTOR = 0.5;
+const ZOOM_IN_FACTOR = 2;
+const PINCH_ZOOM_SENSITIVITY = 0.014;
 
 export function clampTimelineZoomPercent(percent: number): number {
   if (!Number.isFinite(percent)) return 100;

package/src/player/components/useTimelineClipDrag.ts

@@ -76,7 +76,7 @@ interface UseTimelineClipDragInput {
    * commitDraggedClipMove. Both optional → absent = no-op (backward compatible).
    */
   readZIndex?: (element: TimelineElement) => number;
-  onStackingPatches?: (patches: StackingPatch[]) => void;
+  onStackingPatches?: (patches: StackingPatch[]) => Promise<unknown> | void;
 }
 
 export function useTimelineClipDrag({

package/src/player/components/useTimelineGapHighlights.test.ts

@@ -0,0 +1,119 @@
+import { describe, expect, it } from "vitest";
+import type { TimelineElement } from "../store/playerStore";
+import { buildTimelineGapStrips } from "./useTimelineGapHighlights";
+
+function el(id: string, track: number, start: number, duration: number): TimelineElement {
+  return { id, key: id, tag: "video", start, duration, track, domId: id };
+}
+
+const laneA = [el("a1", 0, 1, 2), el("a2", 0, 5, 2)]; // gaps: [0,1), [3,5)
+const laneB = [el("b1", 1, 0, 2), el("b2", 1, 2, 3)]; // contiguous
+const tracks: [number, TimelineElement[]][] = [
+  [0, laneA],
+  [1, laneB],
+];
+const expandedElements = [...laneA, ...laneB];
+
+const base = {
+  gapHighlight: null,
+  tracks,
+  selectedElementId: null,
+  selectedElementIds: new Set<string>(),
+  expandedElements,
+  dragActive: false,
+  displayDuration: 60,
+};
+
+describe("buildTimelineGapStrips", () => {
+  it("emits a loud hover strip set from the gap-menu highlight", () => {
+    const strips = buildTimelineGapStrips({
+      ...base,
+      gapHighlight: { track: 0, intervals: [{ start: 3, end: 5 }] },
+    });
+    expect(strips).toEqual([{ track: 0, intervals: [{ start: 3, end: 5 }], kind: "hover" }]);
+  });
+
+  it("click-selection lights the WHOLE lane minus clips, trailing space included", () => {
+    const strips = buildTimelineGapStrips({ ...base, selectedElementId: "a1" });
+    expect(strips).toEqual([
+      {
+        track: 0,
+        intervals: [
+          { start: 0, end: 1 },
+          { start: 3, end: 5 },
+          { start: 7, end: 60 },
+        ],
+        kind: "selected",
+      },
+    ]);
+  });
+
+  it("a contiguous lane still lights its trailing open space", () => {
+    expect(buildTimelineGapStrips({ ...base, selectedElementId: "b1" })).toEqual([
+      { track: 1, intervals: [{ start: 5, end: 60 }], kind: "selected" },
+    ]);
+  });
+
+  it("a lane filling the whole rendered extent emits nothing", () => {
+    const laneFull = [el("f1", 5, 0, 60)];
+    const strips = buildTimelineGapStrips({
+      ...base,
+      tracks: [...tracks, [5, laneFull]],
+      expandedElements: [...expandedElements, ...laneFull],
+      selectedElementId: "f1",
+    });
+    expect(strips).toEqual([]);
+  });
+
+  it("a one-member selectedElementIds mirror of the click still counts as single", () => {
+    // The store mirrors a plain click into selectedElementIds = {clicked}.
+    const strips = buildTimelineGapStrips({
+      ...base,
+      selectedElementId: "a1",
+      selectedElementIds: new Set(["a1"]),
+    });
+    expect(strips).toHaveLength(1);
+    expect(strips[0].kind).toBe("selected");
+  });
+
+  it("marquee multi-selection never emits the selected hint", () => {
+    const strips = buildTimelineGapStrips({
+      ...base,
+      selectedElementId: "a1",
+      selectedElementIds: new Set(["a1", "b1"]),
+    });
+    expect(strips).toEqual([]);
+  });
+
+  it("hover wins on its own lane — no doubled strips for the same track", () => {
+    const strips = buildTimelineGapStrips({
+      ...base,
+      gapHighlight: { track: 0, intervals: [{ start: 3, end: 5 }] },
+      selectedElementId: "a1",
+    });
+    expect(strips).toHaveLength(1);
+    expect(strips[0].kind).toBe("hover");
+  });
+
+  it("hover and selection on DIFFERENT lanes coexist", () => {
+    const laneC = [el("c1", 2, 4, 2)];
+    const strips = buildTimelineGapStrips({
+      ...base,
+      tracks: [...tracks, [2, laneC]],
+      expandedElements: [...expandedElements, ...laneC],
+      gapHighlight: { track: 2, intervals: [{ start: 0, end: 4 }] },
+      selectedElementId: "a1",
+    });
+    expect(strips.map((s) => s.kind)).toEqual(["hover", "selected"]);
+  });
+
+  it("a live drag suppresses every strip", () => {
+    const strips = buildTimelineGapStrips({
+      ...base,
+      dragActive: true,
+      gapHighlight: { track: 0, intervals: [{ start: 3, end: 5 }] },
+      selectedElementId: "a1",
+    });
+    expect(strips).toEqual([]);
+  });
+});

package/src/player/components/useTimelineGapHighlights.ts

@@ -0,0 +1,110 @@
+import { useMemo } from "react";
+import type { TimelineElement } from "../store/playerStore";
+import { laneGapFloor, resolveLaneEmptyIntervals, type TrackGapInterval } from "./timelineGaps";
+import type { TrackGapHighlight } from "./useTrackGapMenu";
+
+/**
+ * One lane's gap strips for the TimelineCanvas overlay.
+ *
+ * kind "hover"    — the gap(s) a hovered "Close gap" / "Close all gaps" menu
+ *                   row would collapse: the loud affordance.
+ * kind "selected" — every empty interval on a click-selected clip's lane: the
+ *                   quiet always-on hint (single click-selection only — a
+ *                   marquee multi-select spans lanes and would paint noise).
+ */
+export interface TimelineLaneGapStrips {
+  track: number;
+  intervals: TrackGapInterval[];
+  kind: "hover" | "selected";
+}
+
+/**
+ * Derive the gap strips TimelineCanvas paints. The menu-hover highlight wins
+ * on its lane (painting both would just double the same strips); the
+ * selected-clip hint renders on the selection's lane otherwise. Suppressed
+ * entirely during a live drag — the drop placeholder / insert line own that
+ * moment, and the lane set is in flux.
+ */
+interface GapHighlightInput {
+  gapHighlight: TrackGapHighlight | null;
+  tracks: [number, TimelineElement[]][];
+  selectedElementId: string | null;
+  selectedElementIds: ReadonlySet<string>;
+  expandedElements: TimelineElement[];
+  dragActive: boolean;
+  /** Rendered timeline extent (seconds) — the selected-lane highlight spans the
+   *  WHOLE lane minus its clips, trailing open space included. */
+  displayDuration: number;
+}
+
+/**
+ * Single selection only: the store mirrors a plain click into a one-member
+ * selectedElementIds set (setSelectedElementId collapses the multi-select),
+ * so "single" means empty OR exactly the selected clip itself. A marquee
+ * multi-select spans lanes and stays hint-free.
+ */
+function isSingleSelection(selectedElementId: string, ids: ReadonlySet<string>): boolean {
+  return ids.size === 0 || (ids.size === 1 && ids.has(selectedElementId));
+}
+
+/** The subtle strips for a single click-selected clip's lane, or null. */
+function selectedLaneStrips(input: GapHighlightInput): TimelineLaneGapStrips | null {
+  const { selectedElementId, selectedElementIds, expandedElements, tracks, gapHighlight } = input;
+  if (!selectedElementId || !isSingleSelection(selectedElementId, selectedElementIds)) return null;
+  const selected = expandedElements.find((el) => (el.key ?? el.id) === selectedElementId);
+  if (!selected || selected.track === gapHighlight?.track) return null;
+  const laneElements = tracks.find(([t]) => t === selected.track)?.[1] ?? [];
+  const intervals = resolveLaneEmptyIntervals(
+    laneElements,
+    input.displayDuration,
+    undefined,
+    laneGapFloor(laneElements),
+  );
+  return intervals.length > 0 ? { track: selected.track, intervals, kind: "selected" } : null;
+}
+
+/** Pure strip derivation — exported for direct unit testing. */
+export function buildTimelineGapStrips(input: GapHighlightInput): TimelineLaneGapStrips[] {
+  if (input.dragActive) return [];
+  const strips: TimelineLaneGapStrips[] = [];
+  if (input.gapHighlight && input.gapHighlight.intervals.length > 0) {
+    strips.push({ ...input.gapHighlight, kind: "hover" });
+  }
+  // Single click-selection → subtle gap hint on that clip's lane.
+  const selected = selectedLaneStrips(input);
+  if (selected) strips.push(selected);
+  return strips;
+}
+
+export function useTimelineGapHighlights(input: GapHighlightInput): TimelineLaneGapStrips[] {
+  const {
+    gapHighlight,
+    tracks,
+    selectedElementId,
+    selectedElementIds,
+    expandedElements,
+    dragActive,
+    displayDuration,
+  } = input;
+  return useMemo(
+    () =>
+      buildTimelineGapStrips({
+        gapHighlight,
+        tracks,
+        selectedElementId,
+        selectedElementIds,
+        expandedElements,
+        dragActive,
+        displayDuration,
+      }),
+    [
+      gapHighlight,
+      tracks,
+      selectedElementId,
+      selectedElementIds,
+      expandedElements,
+      dragActive,
+      displayDuration,
+    ],
+  );
+}

package/src/player/components/useTimelinePlayhead.ts

@@ -4,6 +4,7 @@ import { useMountEffect } from "../../hooks/useMountEffect";
 import { getPinchTimelineZoomPercent } from "./timelineZoom";
 import {
   GUTTER,
+  TRACKS_LEFT_PAD,
   getTimelinePlayheadLeft,
   getTimelineScrollLeftForZoomTransition,
   getTimelineScrollLeftForZoomAnchor,
@@ -73,7 +74,7 @@ export function useTimelinePlayhead({
     const nextScrollLeft = getTimelineScrollLeftForZoomAnchor({
       pointerX: scroll.clientWidth / 2,
       currentScrollLeft: scroll.scrollLeft,
-      gutter: GUTTER,
+      gutter: GUTTER + TRACKS_LEFT_PAD,
       currentPixelsPerSecond: prevPps,
       nextPixelsPerSecond: pps,
       duration: durationRef.current,
@@ -129,7 +130,7 @@ export function useTimelinePlayhead({
       const el = scrollRef.current;
       if (!el || effectiveDuration <= 0) return;
       const rect = el.getBoundingClientRect();
-      const x = clientX - rect.left + el.scrollLeft - GUTTER;
+      const x = clientX - rect.left + el.scrollLeft - GUTTER - TRACKS_LEFT_PAD;
       if (x < 0) return;
       const time = Math.max(0, Math.min(effectiveDuration, x / pps));
       liveTime.notify(time);
@@ -185,7 +186,7 @@ export function useTimelinePlayhead({
       const nextScrollLeft = getTimelineScrollLeftForZoomAnchor({
         pointerX: e.clientX - rect.left,
         currentScrollLeft: scroll.scrollLeft,
-        gutter: GUTTER,
+        gutter: GUTTER + TRACKS_LEFT_PAD,
         currentPixelsPerSecond: ppsRef.current,
         nextPixelsPerSecond: nextPps,
         duration: durationRef.current,

package/src/player/components/useTimelineRangeSelection.ts

@@ -7,7 +7,7 @@ import {
 } from "./timelineEditing";
 import type { TimelineElement } from "../store/playerStore";
 import { liveTime, usePlayerStore } from "../store/playerStore";
-import { GUTTER } from "./timelineLayout";
+import { GUTTER, TRACKS_LEFT_PAD } from "./timelineLayout";
 import {
   computeMarqueeSelection,
   getMarqueeRect,
@@ -228,7 +228,8 @@ export function useTimelineRangeSelection({
       setShowPopover(false);
       const rect = scrollRef.current?.getBoundingClientRect();
       if (rect) {
-        const x = e.clientX - rect.left + (scrollRef.current?.scrollLeft ?? 0) - GUTTER;
+        const x =
+          e.clientX - rect.left + (scrollRef.current?.scrollLeft ?? 0) - GUTTER - TRACKS_LEFT_PAD;
         const time = Math.max(0, x / pps);
         rangeAnchorTime.current = time;
         setRangeSelection({ start: time, end: time, anchorX: e.clientX, anchorY: e.clientY });
@@ -285,7 +286,7 @@ export function useTimelineRangeSelection({
       const el = scrollRef.current;
       if (el) {
         const rect = el.getBoundingClientRect();
-        const x = clientX - rect.left + el.scrollLeft - GUTTER;
+        const x = clientX - rect.left + el.scrollLeft - GUTTER - TRACKS_LEFT_PAD;
         if (x >= 0) {
           const dur = el.scrollWidth / pps;
           liveTime.notify(Math.max(0, Math.min(dur, x / pps)));
@@ -309,7 +310,8 @@ export function useTimelineRangeSelection({
       if (isRangeSelecting.current) {
         const rect = scrollRef.current?.getBoundingClientRect();
         if (rect) {
-          const x = e.clientX - rect.left + (scrollRef.current?.scrollLeft ?? 0) - GUTTER;
+          const x =
+            e.clientX - rect.left + (scrollRef.current?.scrollLeft ?? 0) - GUTTER - TRACKS_LEFT_PAD;
           setRangeSelection((prev) =>
             prev
               ? { ...prev, end: Math.max(0, x / pps), anchorX: e.clientX, anchorY: e.clientY }