@hyperframes/studio 0.8.111 → 0.8.113

package/src/player/components/timelineClipDragPreview.ts

@@ -6,7 +6,12 @@ import {
 } from "./timelineGroupEditing";
 import type { TimelineElement } from "../store/playerStore";
 import { clampToHostStart } from "../store/timelineElement";
-import { getTimelineRowFromY } from "./timelineLayout";
+import {
+  CLIP_Y,
+  TRACK_H,
+  getTimelineRowGeometry,
+  type TimelineRowGeometry,
+} from "./timelineLayout";
 import { isMusicTrack, isAudioTimelineElement } from "../../utils/timelineInspector";
 import {
   TIMELINE_SNAP_PX,
@@ -38,6 +43,9 @@ export interface DragPreviewContext {
   duration: number;
   trackOrder: number[];
   rowHeights?: readonly number[];
+  rowGeometry?: TimelineRowGeometry;
+  allowedInsertRows?: ReadonlySet<number>;
+  groupTracks?: ReadonlyMap<number, readonly number[]>;
   elements: TimelineElement[];
   selectedKeys: ReadonlySet<string>;
   buildSnapTargets: BuildSnapTargets;
@@ -50,6 +58,33 @@ export interface DragPreviewContext {
   audioTracks?: ReadonlySet<number>;
 }
 
+export function createKeyboardClipDrag(
+  element: TimelineElement,
+  insertRow: number,
+  scrollLeft: number,
+  scrollTop: number,
+): DraggedClipState {
+  return {
+    pointerId: null,
+    element,
+    insertRow,
+    started: true,
+    previewStart: element.start,
+    previewTrack: element.track,
+    desiredTrack: element.track,
+    originClientX: 0,
+    originClientY: 0,
+    originScrollLeft: scrollLeft,
+    originScrollTop: scrollTop,
+    pointerClientX: 0,
+    pointerClientY: 0,
+    pointerOffsetX: 0,
+    pointerOffsetY: 0,
+    snapTime: null,
+    snapType: null,
+  };
+}
+
 /** Content-space position for the stable viewport drag actor. */
 export function getTimelineDragOverlayPosition(
   drag: DraggedClipState,
@@ -73,22 +108,50 @@ function resolveDragMaxStart(scroll: HTMLDivElement | null, pps: number, duratio
   return Math.max(duration, scroll && pps > 0 ? scroll.scrollWidth / pps : duration);
 }
 
+const INSERT_SEAM_PX = CLIP_Y;
+
+function physicalInsertRow(
+  rowFloat: number,
+  y: number,
+  ctx: Pick<DragPreviewContext, "trackOrder" | "allowedInsertRows">,
+  geometry: TimelineRowGeometry,
+) {
+  const boundary = Math.round(rowFloat);
+  const nearSeam = Math.abs(y - geometry.getRowTop(boundary)) <= INSERT_SEAM_PX;
+  const row = nearSeam
+    ? Math.max(0, Math.min(ctx.trackOrder.length, boundary))
+    : resolveInsertRow(rowFloat, ctx.trackOrder.length);
+  if (row !== null && ctx.allowedInsertRows && !ctx.allowedInsertRows.has(row)) return null;
+  return row;
+}
+
+function dragRowAim(
+  drag: DraggedClipState,
+  clientY: number,
+  ctx: DragPreviewContext,
+  geometry: TimelineRowGeometry,
+) {
+  let y = clientY - (ctx.scroll?.getBoundingClientRect().top ?? 0) + (ctx.scroll?.scrollTop ?? 0);
+  if (drag.started && drag.insertRow !== null) {
+    const top = geometry.getRowTop(drag.insertRow);
+    if (y >= top - INSERT_SEAM_PX && y <= top + TRACK_H + INSERT_SEAM_PX)
+      return { rowFloat: drag.insertRow, insertRow: drag.insertRow };
+    if (y > top + TRACK_H) y -= TRACK_H;
+  }
+  const rowFloat = geometry.getRowFromY(y);
+  return { rowFloat, insertRow: physicalInsertRow(rowFloat, y, ctx, geometry) };
+}
+
 /** The drop decision for the pointer's row (see resolveZoneDropPlacement). */
 function resolveDropPlacement(
   drag: DraggedClipState,
-  clientY: number,
+  aim: ReturnType<typeof dragRowAim>,
   previewStart: number,
   desiredTrack: number,
   ctx: DragPreviewContext,
   group: GroupDrag,
 ): { track: number; insertRow: number | null; start: number } {
-  const { scroll, trackOrder, rowHeights, elements } = ctx;
-  const rowFloat = scroll
-    ? getTimelineRowFromY(
-        clientY - scroll.getBoundingClientRect().top + scroll.scrollTop,
-        rowHeights,
-      )
-    : 0;
+  const { trackOrder, elements } = ctx;
   const dragKey = drag.element.key ?? drag.element.id;
   const audioTracks =
     ctx.audioTracks ?? new Set(elements.filter(isAudioTimelineElement).map((e) => e.track));
@@ -97,7 +160,9 @@ function resolveDropPlacement(
     audioTracks,
     elements: group.obstacles,
     desiredTrack,
-    deliberateInsertRow: resolveInsertRow(rowFloat, trackOrder.length),
+    deliberateInsertRow: aim.insertRow,
+    allowedInsertRows: ctx.allowedInsertRows,
+    groupTracks: ctx.groupTracks,
     start: previewStart,
     duration: drag.element.duration,
     dragKey,
@@ -144,13 +209,12 @@ export function computeDragPreview(
 ): DraggedClipState {
   const { scroll, pps, duration, trackOrder, buildSnapTargets } = ctx;
   const dragMaxStart = resolveDragMaxStart(scroll, pps, duration);
-  const scrollTop = scroll?.scrollTop ?? drag.originScrollTop;
   const scrollRectTop = scroll?.getBoundingClientRect().top ?? 0;
-  const originRow = getTimelineRowFromY(
-    drag.originClientY - scrollRectTop + drag.originScrollTop,
-    ctx.rowHeights,
-  );
-  const currentRow = getTimelineRowFromY(clientY - scrollRectTop + scrollTop, ctx.rowHeights);
+  const geometry =
+    ctx.rowGeometry ?? getTimelineRowGeometry(ctx.rowHeights ?? ctx.trackOrder.map(() => TRACK_H));
+  const originRow = geometry.getRowFromY(drag.originClientY - scrollRectTop + drag.originScrollTop);
+  const aim = dragRowAim(drag, clientY, ctx, geometry);
+  const currentRow = aim.rowFloat;
   // resolveTimelineMove's vertical axis is row indices, which is why the pointer
   // and scroll pixels are folded into originRow/currentRow above.
   const nextMove = resolveTimelineMove(
@@ -196,7 +260,7 @@ export function computeDragPreview(
   const origin = drag.element.start;
   const floored = Math.max(snap.start, group.floor);
   const previewStart = origin + Math.max(shift.min, Math.min(floored - origin, shift.max));
-  const placement = resolveDropPlacement(drag, clientY, previewStart, nextMove.track, ctx, group);
+  const placement = resolveDropPlacement(drag, aim, previewStart, nextMove.track, ctx, group);
   const placedShift = placement.start - origin;
   if (placedShift < shift.min - SHIFT_EPSILON_S || placedShift > shift.max + SHIFT_EPSILON_S) {
     return { ...drag, started: true };

package/src/player/components/timelineClipDragTypes.ts

@@ -4,8 +4,8 @@ import type { BlockedTimelineEditIntent } from "./timelineEditing";
 
 /* ── Shared clip-drag state types ───────────────────────────────── */
 export interface DraggedClipState {
-  /** Pointer captured by the stable viewport coordinator for this gesture. */
-  pointerId: number;
+  /** Pointer captured by the viewport coordinator; null for a keyboard pickup. */
+  pointerId: number | null;
   element: TimelineElement;
   originClientX: number;
   originClientY: number;
@@ -26,7 +26,7 @@ export interface DraggedClipState {
   /**
    * When non-null, the drop inserts a NEW track at this visual row boundary
    * (0 = above the top lane, trackOrder.length = below the bottom) instead of
-   * landing on previewTrack. Drives the insertion-line indicator.
+   * landing on previewTrack. Drives the opened preview lane.
    */
   insertRow: number | null;
   /** Snap target the clip will land on, for the guide highlight. */

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

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { fadeHandleBoxes } from "./timelineClipFadeGeometry";
+
+const flatClip = (width: number) => ({ width, height: 30, radius: 0, toolsLeft: null });
+
+describe("fadeHandleBoxes", () => {
+  it("centres each handle on its fade's end", () => {
+    const boxes = fadeHandleBoxes({
+      widthPx: 1000,
+      inPx: 100,
+      outPx: 200,
+      clipBox: flatClip(1000),
+      drawn: { in: true, out: true },
+    });
+    expect(boxes.in).toEqual({ left: 88, width: 24, height: 24, tabLeft: 12, top: -7 });
+    expect(boxes.out).toEqual({ left: 788, width: 24, height: 24, tabLeft: 12, top: -7 });
+  });
+
+  it("splits two overlapping handles at the midpoint between their tabs", () => {
+    const input = { widthPx: 100, inPx: 45, outPx: 45, clipBox: flatClip(100) };
+    const boxes = fadeHandleBoxes({ ...input, drawn: { in: true, out: true } });
+    expect(boxes.in).toMatchObject({ left: 26, width: 24, tabLeft: 19 });
+    expect(boxes.out).toMatchObject({ left: 50, width: 24, tabLeft: 5 });
+
+    // With its twin hidden, a handle keeps its full centred box.
+    const alone = fadeHandleBoxes({ ...input, drawn: { in: true, out: false } });
+    expect(alone.in).toMatchObject({ left: 33, width: 24 });
+  });
+});

package/src/player/components/timelineClipFadeGeometry.ts

@@ -0,0 +1,74 @@
+import { CLIP_TRIM_HIT_PX } from "./timelineTheme";
+
+export type FadeEdge = "in" | "out";
+
+export const FADE_TAB_WIDTH = 4;
+const FADE_HANDLE_HIT = 24;
+export const FADE_TAB_CENTER_IN_HIT = 8;
+const TAB_INSET = 7;
+
+/** The clip as drawn; `toolsLeft` is where its FX badge starts, null when it has none. */
+export interface FadeHandleClipBox {
+  width: number;
+  height: number;
+  radius: number;
+  toolsLeft: number | null;
+}
+
+/** A fade handle's hit box in px from the clip's top left; `tabLeft` is its tab's centre within it. */
+export interface FadeHandleBox {
+  left: number;
+  width: number;
+  height: number;
+  tabLeft: number;
+  top: number;
+}
+
+function topEdgeY(x: number, widthPx: number, heightPx: number, radiusPx: number): number {
+  const r = Math.min(radiusPx, widthPx / 2, heightPx / 2);
+  const d = x < r ? r - x : x > widthPx - r ? x - (widthPx - r) : 0;
+  return d > 0 ? r - Math.sqrt(Math.max(0, r * r - d * d)) : 0;
+}
+
+/**
+ * Where the fade handles sit on a clip `widthPx` wide: each centred on its fade's end, inside the
+ * clip and left of its tools; two drawn handles that would overlap split at the midpoint.
+ */
+export function fadeHandleBoxes(input: {
+  widthPx: number;
+  inPx: number;
+  outPx: number;
+  clipBox: FadeHandleClipBox;
+  drawn: Record<FadeEdge, boolean>;
+}): Record<FadeEdge, FadeHandleBox> {
+  const { widthPx, inPx, outPx, clipBox, drawn } = input;
+  const clipWidth = clipBox.toolsLeft === null ? widthPx : clipBox.width;
+  const edgeInset = clipBox.toolsLeft === null ? 0 : CLIP_TRIM_HIT_PX;
+  // Reserve FX horizontally so fades keep their top-edge lane above compact keyframe centres.
+  const rightEdge =
+    clipBox.toolsLeft === null ? clipWidth : Math.min(clipWidth - edgeInset, clipBox.toolsLeft);
+  const hitWidth = Math.min(FADE_HANDLE_HIT, (rightEdge - edgeInset) / 2);
+  const tabX = (edge: FadeEdge) => {
+    const knee = edge === "in" ? inPx : clipWidth - outPx;
+    const tabInset = edgeInset === 0 ? TAB_INSET : FADE_TAB_WIDTH;
+    const inset = Math.min(tabInset, (rightEdge - edgeInset) / 2);
+    return Math.min(rightEdge - inset, Math.max(edgeInset + inset, knee));
+  };
+  const boxLeft = (x: number) =>
+    Math.min(rightEdge - hitWidth, Math.max(edgeInset, x - hitWidth / 2));
+  const [inX, outX] = [tabX("in"), tabX("out")];
+  const mid = (inX + outX) / 2;
+  const overlap = drawn.in && drawn.out && boxLeft(inX) + hitWidth > boxLeft(outX);
+  const box = (edge: FadeEdge): FadeHandleBox => {
+    const x = edge === "in" ? inX : outX;
+    const [left, right] = !overlap
+      ? [boxLeft(x), boxLeft(x) + hitWidth]
+      : edge === "in"
+        ? [Math.max(edgeInset, mid - hitWidth), mid]
+        : [mid, Math.min(rightEdge, mid + hitWidth)];
+    const edgeY = topEdgeY(x, clipWidth, clipBox.height, clipBox.radius);
+    const top = edgeY + 1 - FADE_TAB_CENTER_IN_HIT;
+    return { left, width: right - left, height: FADE_HANDLE_HIT, tabLeft: x - left, top };
+  };
+  return { in: box("in"), out: box("out") };
+}

package/src/player/components/timelineCollision.ts

@@ -1,5 +1,17 @@
 import type { TimelineElement } from "../store/playerStore";
 
+/** Audio member tracks mark the audio zone, including members hidden by a group header. */
+export function timelineAudioRow(
+  order: number[],
+  audioTracks: ReadonlySet<number>,
+  groupTracks?: ReadonlyMap<number, readonly number[]>,
+): number {
+  return order.findIndex(
+    (track) =>
+      audioTracks.has(track) || groupTracks?.get(track)?.some((member) => audioTracks.has(member)),
+  );
+}
+
 /**
  * Keep a landing track inside the dragged clip's kind-zone: visual clips stay in
  * the rows ABOVE the first audio lane; audio clips stay AT/BELOW it. Prevents a
@@ -31,7 +43,10 @@ export function isInsertAllowedForZone(
   insertRow: number,
   audioRow: number,
   isAudio: boolean,
+  allowedRows?: ReadonlySet<number>,
 ): boolean {
+  if (allowedRows && !allowedRows.has(insertRow)) return false;
+  while (audioRow > 0 && allowedRows && !allowedRows.has(audioRow)) audioRow--;
   if (audioRow < 0) return true;
   return isAudio ? insertRow >= audioRow : insertRow <= audioRow;
 }
@@ -52,9 +67,8 @@ function outOfRangeZoneInsertRow(
   audioRow: number,
   desired: number,
 ): number {
-  // No lane of this kind yet: fall to the split (audioRow) or the very top.
-  // A visual-only timeline has audioRow -1 (top); an all-audio one has it at 0.
-  if (zoneTracks.length === 0) return audioRow < 0 ? 0 : audioRow;
+  // An empty audio zone opens below visual rows; an empty visual zone opens above audio.
+  if (zoneTracks.length === 0) return audioRow < 0 ? order.length : audioRow;
   // zoneTracks preserves `order` sequence, so its ends map to the zone boundary
   // rows: above the zone's min lane → its top boundary, else its bottom.
   const zoneTop = order.indexOf(zoneTracks[0]);
@@ -104,14 +118,31 @@ export function resolveNearestFreeStart(
   return clear ? origin : best;
 }
 
-// Where a dragged clip lands: on the aimed row of its kind, at the nearest free time there. Only an aim outside all
-// rows, or into a kind with no row yet, opens a track (`insertRow`).
+function groupHeaderAim(
+  input: Parameters<typeof resolveZoneDropPlacement>[0],
+):
+  | { kind: "ordinary" | "member"; track: number }
+  | { kind: "origin"; track: number; start: number } {
+  const members = input.groupTracks?.get(input.desiredTrack);
+  if (!members) return { kind: "ordinary", track: input.desiredTrack };
+  const memberTracks = new Set(members);
+  const member = input.order.find(
+    (track) => memberTracks.has(track) && input.audioTracks.has(track) === input.isAudio,
+  );
+  if (member !== undefined) return { kind: "member", track: member };
+  if (!input.origin) throw new Error("Group-header drop requires the clip origin");
+  return { kind: "origin", ...input.origin };
+}
+
+// A deliberate seam opens a track; other aims land at the nearest free time on a row of the clip's kind.
 export function resolveZoneDropPlacement(input: {
   order: number[];
   audioTracks: ReadonlySet<number>;
   elements: TimelineElement[];
   desiredTrack: number;
   deliberateInsertRow: number | null;
+  allowedInsertRows?: ReadonlySet<number>;
+  groupTracks?: ReadonlyMap<number, readonly number[]>;
   start: number;
   duration: number;
   dragKey: string;
@@ -123,24 +154,33 @@ export function resolveZoneDropPlacement(input: {
 }): { track: number; insertRow: number | null; start: number } {
   const { order, audioTracks, elements, desiredTrack, deliberateInsertRow } = input;
   const { start, duration, dragKey, isAudio, minStart } = input;
-  const audioRow = order.findIndex((t) => audioTracks.has(t));
+  const audioRow = timelineAudioRow(order, audioTracks, input.groupTracks);
 
   if (
     deliberateInsertRow !== null &&
-    isInsertAllowedForZone(deliberateInsertRow, audioRow, isAudio)
+    isInsertAllowedForZone(deliberateInsertRow, audioRow, isAudio, input.allowedInsertRows)
   ) {
     return { track: desiredTrack, insertRow: deliberateInsertRow, start };
   }
 
-  const desired = clampTrackToZone(desiredTrack, order, audioRow, isAudio);
-  const zoneTracks = order.filter((t) => audioTracks.has(t) === isAudio);
+  const aim = groupHeaderAim(input);
+  if (aim.kind === "origin") return { track: aim.track, start: aim.start, insertRow: null };
+  const firstVisibleAudioRow = order.findIndex((track) => audioTracks.has(track));
+  const zoneBoundary = isAudio ? firstVisibleAudioRow : audioRow;
+  const desired =
+    aim.kind === "member" ? aim.track : clampTrackToZone(aim.track, order, zoneBoundary, isAudio);
+  const zoneTracks = order.filter(
+    (t) => !input.groupTracks?.has(t) && audioTracks.has(t) === isAudio,
+  );
   // Only when the aim is outside the rows, or the clip's zone has no row yet.
   if (!zoneTracks.includes(desired)) {
     const desiredRow = order.indexOf(desired);
-    const insertRow =
-      desiredRow < 0
+    let insertRow =
+      desiredRow < 0 || zoneTracks.length === 0
         ? outOfRangeZoneInsertRow(order, zoneTracks, audioRow, desired)
         : desiredRow + 1;
+    while (insertRow > 0 && input.allowedInsertRows && !input.allowedInsertRows.has(insertRow))
+      insertRow--;
     return { track: desired, insertRow, start };
   }
   const origin = input.origin?.track === desired ? input.origin.start : null;

package/src/player/components/timelineDragLanding.ts

@@ -24,7 +24,7 @@ export function layoutAfterTrackInsert(
     keys: ReadonlySet<string>;
     movedStart: (e: TimelineElement) => number;
   } | null,
-  deps: Pick<DragCommitDeps, "elements" | "trackOrder">,
+  deps: Pick<DragCommitDeps, "elements" | "trackOrder" | "trackInsertLayout">,
 ): {
   normalized: TimelineElement[];
   targetTrack: number;
@@ -37,18 +37,32 @@ export function layoutAfterTrackInsert(
   const writableZone = classifyZone(element);
   const writable = (src: TimelineElement): boolean =>
     sameSourceFile(src, element) && classifyZone(src) === writableZone;
-  const topologyOrder = [...new Set(elements.filter(writable).map((e) => e.track))].sort(
+  let topologyOrder = [...new Set(elements.filter(writable).map((e) => e.track))].sort(
     (a, b) => a - b,
   );
-  const topologyInsertRow = topologyOrder.filter((track) => track < targetTrack).length;
-  const topologyTargetTrack = insertTrackValue(topologyOrder, topologyInsertRow);
+  let topologyInsertRow = topologyOrder.filter((track) => track < targetTrack).length;
+  const grouped = deps.trackInsertLayout;
+  let ranks: Map<number, number> | undefined;
+  if (grouped) {
+    const writableTracks = new Set(topologyOrder);
+    topologyOrder = grouped.trackOrder.filter((track) => writableTracks.has(track));
+    topologyInsertRow = grouped.trackOrder
+      .slice(0, grouped.topologyRows[insertRow])
+      .filter((track) => writableTracks.has(track)).length;
+    ranks = new Map(topologyOrder.map((track, index) => [track, index]));
+  }
+  const topologyTargetTrack = ranks
+    ? topologyInsertRow - 0.5
+    : insertTrackValue(topologyOrder, topologyInsertRow);
   const normalized = normalizeToZones(
     elements.filter(writable).map((e) => {
       if (keyOf(e) === editKey) {
         return { ...e, start: previewStart, track: topologyTargetTrack };
       }
-      if (multi?.keys.has(keyOf(e))) return { ...e, start: multi.movedStart(e) };
-      return e;
+      const track = ranks ? ranks.get(e.track) : e.track;
+      if (track === undefined) throw new Error("Writable track missing from insertion topology");
+      const start = multi?.keys.has(keyOf(e)) ? multi.movedStart(e) : e.start;
+      return track === e.track && start === e.start ? e : { ...e, start, track };
     }),
   );
   return { normalized, targetTrack, writable };

package/src/player/components/timelineLaneProps.ts

@@ -1,4 +1,3 @@
-import { type ReactNode } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { MusicBeatAnalysis } from "@hyperframes/core/beats";
 import type { TimelineElement, KeyframeCacheEntry } from "../store/playerStore";
@@ -13,7 +12,7 @@ import type { TimelineVirtualRow } from "./useTimelineVirtualRows";
 import type { MultiDragPreviewInput } from "./timelineMultiDragPreview";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import type { TimelineLogicalRow } from "./timelineKeyboardNavigation";
-import type { TimelineClipRenderContext } from "./TimelineTypes";
+import type { TimelineProps } from "./TimelineTypes";
 import type { TimelineTrackGroupInfo } from "./useTimelineTrackDerivations";
 
 /**
@@ -52,12 +51,8 @@ export interface TimelineLaneBaseProps {
   blockedClipRef: React.RefObject<BlockedClipState | null>;
   suppressClickRef: React.RefObject<boolean>;
   scrollRef: React.RefObject<HTMLDivElement | null>;
-  renderClipContent?: (
-    element: TimelineElement,
-    style: { clip: string; label: string },
-    context: TimelineClipRenderContext,
-  ) => ReactNode;
-  renderClipOverlay?: (element: TimelineElement) => ReactNode;
+  renderClipContent?: TimelineProps["renderClipContent"];
+  renderClipOverlay?: TimelineProps["renderClipOverlay"];
   onDrillDown?: (element: TimelineElement) => void;
   onSelectElement?: (element: TimelineElement | null) => void;
   setHoveredClip: (key: string | null) => void;

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

@@ -60,7 +60,7 @@ describe("timeline motion styles", () => {
     const timelineClipMotionRule = expectRule(motionMediaCss, ".timeline-clip");
 
     expect(expectDeclaration(timelineClipMotionRule, "transition")).toBe(
-      "background-color 120ms ease-out",
+      "background-color var(--timeline-clip-hover-duration) ease-out",
     );
   });
 
@@ -72,10 +72,9 @@ describe("timeline motion styles", () => {
     const audioClipHoverRule = expectRule(studioCss, ".timeline-clip.is-audio.is-hovered");
     const audioClipDraggingRule = expectRule(studioCss, ".timeline-clip.is-audio.is-dragging");
     const activeTimelineClipRule = expectRule(studioCss, ".timeline-clip[data-active]");
-    const selectedTimelineClipRule = expectRule(studioCss, ".timeline-clip.is-selected");
-    const activeSelectedTimelineClipRule = expectRule(
+    const selectedTimelineClipRule = expectRule(
       studioCss,
-      ".timeline-clip[data-active].is-selected",
+      ".timeline-clip.is-selected,\n.timeline-clip[data-active].is-selected",
     );
     const bloomOverlayRule = expectRule(studioCss, ".timeline-clip::before");
     const activeBloomOverlayRule = expectRule(studioCss, ".timeline-clip[data-active]::before");
@@ -92,7 +91,7 @@ describe("timeline motion styles", () => {
     expect(timelineClipTimecodeRule).toContain("color: var(--timeline-tick-text)");
     expect(themeCss).toContain("--timeline-clip-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.85)");
     expect(themeCss).toContain("--timeline-clip-selection-highlight: rgb(255 255 255 / 0.55)");
-    expect(themeCss).toContain("--timeline-clip-radius: 8px");
+    expect(themeCss).toContain("--timeline-clip-radius: 12px");
     expect(themeCss).toContain("--timeline-clip-audio-radius: 21px");
     expect(themeCss).toContain("--timeline-clip-highlight: rgb(255 255 255 / 0.08)");
     expect(themeCss).toContain("--timeline-clip-shadow: 0 2px 6px rgb(0 0 0 / 0.3)");
@@ -104,14 +103,8 @@ describe("timeline motion styles", () => {
     expect(audioClipRule).toContain("border-color: var(--timeline-clip-audio-border)");
     expect(audioClipHoverRule).toContain("background-color: var(--timeline-clip-audio-bg-hover)");
     expect(audioClipDraggingRule).toContain("var(--timeline-clip-audio-bg-dragging)");
-    expect(selectedTimelineClipRule).toContain(
-      "outline: 1.5px solid var(--timeline-clip-selection)",
-    );
-    expect(selectedTimelineClipRule).toContain("outline-offset: -1.5px");
-    expect(activeSelectedTimelineClipRule).toContain(
-      "outline: 1.5px solid var(--timeline-clip-selection)",
-    );
-    expect(activeSelectedTimelineClipRule).toContain("outline-offset: -1.5px");
+    expect(selectedTimelineClipRule).toContain("outline: 1px solid var(--timeline-clip-selection)");
+    expect(selectedTimelineClipRule).toContain("outline-offset: 0");
     expect(activeTimelineClipRule).not.toContain("background: linear-gradient");
     expect(activeTimelineClipRule).toContain("border-color: var(--clip-border-active)");
     expect(activeTimelineClipRule).not.toContain("box-shadow");

package/src/player/components/timelineMountFixtures.tsx

@@ -0,0 +1,65 @@
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { Timeline } from "./Timeline";
+import type { TimelineProps } from "./TimelineTypes";
+import { usePlayerStore } from "../store/playerStore";
+import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
+
+export async function mountThreeTrackTimeline(props: TimelineProps = {}) {
+  usePlayerStore.setState({
+    duration: 10,
+    currentTime: 0,
+    timelineReady: true,
+    gsapAnimations: new Map(),
+    selectedElementId: null,
+    selectedElementIds: new Set(),
+    elements: [0, 1, 2].map((track) => ({
+      id: `c${track}`,
+      key: `c${track}`,
+      domId: `c${track}`,
+      tag: "div",
+      start: 0,
+      duration: 2,
+      track,
+    })),
+  });
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  await act(async () => root.render(<Timeline {...props} />));
+  const viewport = host.querySelector<HTMLElement>("[data-timeline-scroll-viewport]")!;
+  const ghost = () => host.querySelector<HTMLElement>('[data-testid="timeline-ghost-lane"]');
+  return { host, root, viewport, ghost };
+}
+
+export function dragTimelineFixtureAsset(target: EventTarget, type: string, clientY: number): void {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  Object.defineProperties(event, {
+    clientX: { value: 400 },
+    clientY: { value: clientY },
+    dataTransfer: {
+      value: {
+        types: [TIMELINE_ASSET_MIME],
+        files: [],
+        dropEffect: "none",
+        getData: (mime: string) => (mime === TIMELINE_ASSET_MIME ? '{"path":"a.png"}' : ""),
+      },
+    },
+  });
+  act(() => void target.dispatchEvent(event));
+}
+
+export function pointerTimelineFixture(target: EventTarget, type: string, clientY: number): void {
+  act(
+    () =>
+      void target.dispatchEvent(
+        new PointerEvent(type, {
+          bubbles: true,
+          button: 0,
+          pointerId: 1,
+          clientX: 400,
+          clientY,
+        }),
+      ),
+  );
+}

package/src/player/components/timelineOptimisticRevision.ts

@@ -1,16 +1,23 @@
 import type { TimelineElement } from "../store/playerStore";
 
 type UpdateElement = (key: string, updates: Partial<TimelineElement>) => void;
-const revisionsByUpdater = new WeakMap<UpdateElement, Map<string, number>>();
+type RevisionScope = "timing" | "membership";
+const revisionsByUpdater = new WeakMap<UpdateElement, Map<RevisionScope, Map<string, number>>>();
 
 export function beginTimelineOptimisticGesture(
   updateElement: UpdateElement,
   keys: readonly string[],
+  scope: RevisionScope = "timing",
 ): Map<string, number> {
-  let revisions = revisionsByUpdater.get(updateElement);
+  let scopes = revisionsByUpdater.get(updateElement);
+  if (!scopes) {
+    scopes = new Map();
+    revisionsByUpdater.set(updateElement, scopes);
+  }
+  let revisions = scopes.get(scope);
   if (!revisions) {
     revisions = new Map();
-    revisionsByUpdater.set(updateElement, revisions);
+    scopes.set(scope, revisions);
   }
   const gesture = new Map<string, number>();
   for (const key of keys) {
@@ -25,8 +32,12 @@ export function isLatestTimelineOptimisticGesture(
   updateElement: UpdateElement,
   gesture: ReadonlyMap<string, number>,
   key: string,
+  scope: RevisionScope = "timing",
 ): boolean {
-  return revisionsByUpdater.get(updateElement)?.get(key) === gesture.get(key);
+  return (
+    gesture.has(key) &&
+    revisionsByUpdater.get(updateElement)?.get(scope)?.get(key) === gesture.get(key)
+  );
 }
 
 export function rollbackLatestTimelineOptimisticGesture(

package/src/player/components/timelineTheme.ts

@@ -1,5 +1,7 @@
 import type { TimelineElement } from "../store/playerStore";
 
+export const CLIP_TRIM_HIT_PX = 14;
+
 export interface TimelineTrackStyle {
   clip: string;
   accent: string;

package/src/player/components/timelineTrackDisplay.ts

@@ -6,7 +6,7 @@
  * routes through here; the raw key stays in callbacks and lookups only.
  */
 
-/** Ascending distinct track keys, the row order the timeline renders in. */
+/** Ascending distinct track keys; the drawn rows also group audio (`displayTrackOrder`). */
 export function timelineTrackOrder(elements: readonly { track: number }[]): number[] {
   return [...new Set(elements.map((element) => element.track))].sort((a, b) => a - b);
 }