@hyperframes/studio 0.7.106 → 0.7.108

package/src/player/components/TimelineAutomationLaneSlot.test.tsx

@@ -0,0 +1,193 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { createRoot } from "react-dom/client";
+import { TimelineAutomationLaneSlot } from "./TimelineAutomationLane";
+import { AUTOMATION_LANE_H } from "./automationLaneHeight";
+import { PAD_X } from "./automationLaneGeometry";
+import { getTimelineLaneTop } from "./timelineLayout";
+import { elementAutomation, elementAutomationLanes, elementFxChain } from "./automationLaneData";
+import type { AutomationLaneBinding, UseAutomationLanesResult } from "./useAutomationLanes";
+import type { TimelineElement } from "../store/timelineElement";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const element: TimelineElement = {
+  id: "bgm",
+  key: "bgm",
+  tag: "audio",
+  start: 0,
+  duration: 6,
+  track: 0,
+};
+
+function mountSlot(binding: Partial<AutomationLaneBinding>) {
+  const onRangeClear = vi.fn();
+  const lanes: UseAutomationLanesResult = {
+    bind: () => ({
+      automation: { version: 1, lanes: [] },
+      lanes: [{ target: "volume", points: [{ t: 0, v: 1 }] }],
+      chain: null,
+      onPreview: vi.fn(),
+      onCommit: vi.fn(),
+      onSelect: vi.fn(),
+      readOnly: false,
+      commitTargetKey: "bgm",
+      selection: null,
+      onRangeSelect: vi.fn(),
+      onRangeClear,
+      ...binding,
+    }),
+  };
+  const host = document.createElement("div");
+  document.body.append(host);
+  act(() => {
+    createRoot(host).render(
+      <TimelineAutomationLaneSlot
+        elements={[element]}
+        isSelected={() => false}
+        lanes={lanes}
+        pps={100}
+        laneCount={0}
+        accentColor="#0af"
+        currentTime={0}
+      />,
+    );
+  });
+  return { onRangeClear };
+}
+
+/** Two narration slices sharing a row, each with its own chain. */
+const chainOf = (nodes: unknown[]) => JSON.stringify({ version: 1, nodes });
+const lanesOf = (...targets: string[]) =>
+  JSON.stringify({
+    version: 1,
+    lanes: targets.map((target) => ({ target, points: [{ t: 0, v: 1 }] })),
+  });
+
+const narration1: TimelineElement = {
+  ...element,
+  id: "narration-1",
+  key: "narration-1",
+  start: 0,
+  duration: 4,
+  fxChain: chainOf([
+    { type: "lowpass", id: "n1", params: { frequency: 8000, q: 0.7, poles: "2" } },
+    { type: "peaking", id: "n2", params: { frequency: 1000, gain: -3, q: 1.4 } },
+  ]),
+  automation: lanesOf("fx.n2.q"),
+};
+const narration2: TimelineElement = {
+  ...element,
+  id: "narration-2",
+  key: "narration-2",
+  start: 4,
+  duration: 4,
+  fxChain: chainOf([{ type: "peaking", id: "n1", params: { frequency: 1000, gain: -6, q: 1.4 } }]),
+  automation: lanesOf("fx.n1.q", "volume"),
+};
+
+/** Reads what a clip really carries, the way the live binding does. */
+const readingBind = (element: TimelineElement, isSelected: boolean): AutomationLaneBinding => ({
+  automation: elementAutomation(element),
+  lanes: elementAutomationLanes(element),
+  chain: elementFxChain(element),
+  onPreview: vi.fn(),
+  onCommit: vi.fn(),
+  onSelect: vi.fn(),
+  readOnly: !isSelected,
+  commitTargetKey: null,
+  selection: null,
+  onRangeSelect: vi.fn(),
+  onRangeClear: vi.fn(),
+});
+
+function renderRow(elements: readonly TimelineElement[], selectedKey?: string): HTMLElement {
+  const host = document.createElement("div");
+  document.body.append(host);
+  act(() => {
+    createRoot(host).render(
+      <TimelineAutomationLaneSlot
+        elements={elements}
+        isSelected={(el) => el.key === selectedKey}
+        lanes={{ bind: readingBind }}
+        pps={100}
+        laneCount={0}
+        accentColor="#0af"
+        currentTime={0}
+      />,
+    );
+  });
+  return host;
+}
+
+/** Every drawn envelope as `row @ left`, which is the whole claim under test. */
+function mountRow(elements: readonly TimelineElement[], selectedKey?: string) {
+  return [...renderRow(elements, selectedKey).querySelectorAll<HTMLElement>(".hf-automation-lane")]
+    .map((lane) => `${lane.style.top} @ ${lane.querySelector("svg")?.style.left}`)
+    .sort();
+}
+
+const ROW_0 = `${getTimelineLaneTop(0)}px`;
+const ROW_1 = `${getTimelineLaneTop(0) + AUTOMATION_LANE_H}px`;
+
+describe("TimelineAutomationLaneSlot shared rows", () => {
+  it("draws two clips' envelopes for one property in the same row", () => {
+    // One lane track, two envelopes — same row, each over its own span. The
+    // 1 kHz peaking Q is `fx.n2.q` on one clip and `fx.n1.q` on the other.
+    expect(mountRow([narration1, narration2])).toEqual(
+      [
+        `${ROW_0} @ ${0 - PAD_X}px`,
+        `${ROW_0} @ ${400 - PAD_X}px`,
+        `${ROW_1} @ ${400 - PAD_X}px`,
+      ].sort(),
+    );
+  });
+
+  it("leaves a clip's stretch empty in a row it does not automate", () => {
+    // Only narration-2 has a volume envelope, so row 1 carries one curve and
+    // narration-1's half of it stays blank rather than drawing a flat line.
+    expect(mountRow([narration1, narration2]).filter((row) => row.startsWith(ROW_1))).toEqual([
+      `${ROW_1} @ ${400 - PAD_X}px`,
+    ]);
+  });
+
+  it("lets each clip's envelope be reached, not just the one drawn last", () => {
+    // Every clip mounts a band spanning the WHOLE row (the row separator needs
+    // the full width), so three bands sit on top of each other here. If a band
+    // took the pointer, the last one rendered would swallow hover and drag over
+    // its siblings' envelopes — handles appeared only on the final clip, and
+    // only on rows that a single clip happened to own.
+    const host = renderRow([narration1, narration2]);
+    const bands = [...host.querySelectorAll<HTMLElement>(".hf-automation-lane")];
+    expect(bands.length).toBeGreaterThan(1);
+    for (const band of bands) {
+      expect(band.className).toContain("pointer-events-none");
+      expect(band.querySelector("svg")?.getAttribute("class")).toContain("pointer-events-auto");
+    }
+  });
+
+  it("keeps the same rows whichever clip is selected", () => {
+    // The bug this replaces: the row listed only the selected clip's lanes, so
+    // clicking a sibling swapped which envelopes existed.
+    expect(mountRow([narration1, narration2], "narration-1")).toEqual(
+      mountRow([narration1, narration2], "narration-2"),
+    );
+  });
+});
+
+describe("TimelineAutomationLaneSlot stale-selection guard", () => {
+  it("clears the selection when its lane's target no longer exists", () => {
+    const { onRangeClear } = mountSlot({
+      selection: { elementKey: "bgm", target: "fx.gone.wet", t0: 1, t1: 2, v0: 0, v1: 1 },
+    });
+    expect(onRangeClear).toHaveBeenCalledTimes(1);
+  });
+
+  it("leaves an in-scope selection alone", () => {
+    const { onRangeClear } = mountSlot({
+      selection: { elementKey: "bgm", target: "volume", t0: 1, t1: 2, v0: 0, v1: 1 },
+    });
+    expect(onRangeClear).not.toHaveBeenCalled();
+  });
+});

package/src/player/components/TimelineLanes.test.tsx

@@ -232,10 +232,23 @@ describe("TimelineLanes track numbering", () => {
 describe("TimelineLanes disclosure target", () => {
   const ANIMATIONS = new Map([["clip-a", [positionTween("clip-a")]]]);
 
-  function ariaControlsTarget(host: HTMLElement): HTMLElement | null {
+  /**
+   * `aria-controls` is an ID LIST, and the caret needs one: it reveals the
+   * active clip's keyframe lanes AND the track's automation lanes, which cannot
+   * be one element — one belongs to a clip, the other to the row.
+   */
+  function ariaControlsIds(host: HTMLElement): string[] {
     const caret = host.querySelector("button[aria-controls]");
-    const id = caret?.getAttribute("aria-controls");
-    return id ? host.querySelector<HTMLElement>(`#${id}`) : null;
+    return (caret?.getAttribute("aria-controls") ?? "").split(/\s+/).filter(Boolean);
+  }
+
+  function ariaControlsTargets(host: HTMLElement): (HTMLElement | null)[] {
+    return ariaControlsIds(host).map((id) => host.querySelector<HTMLElement>(`#${id}`));
+  }
+
+  /** The first region named, which is the keyframe lanes. */
+  function ariaControlsTarget(host: HTMLElement): HTMLElement | null {
+    return ariaControlsTargets(host)[0] ?? null;
   }
 
   // aria-controls used to name a div in the sticky label column: it computed to
@@ -246,6 +259,9 @@ describe("TimelineLanes disclosure target", () => {
 
     expect(target).not.toBeNull();
     expect(target?.querySelectorAll("[data-timeline-property-lane]").length).toBeGreaterThan(0);
+    // Every region it names has to exist, or the caret points at nothing.
+    expect(ariaControlsTargets(view.host).length).toBeGreaterThan(1);
+    expect(ariaControlsTargets(view.host).every(Boolean)).toBe(true);
     act(() => view.root.unmount());
   });
 
@@ -255,6 +271,9 @@ describe("TimelineLanes disclosure target", () => {
 
     expect(target).not.toBeNull();
     expect(target?.querySelectorAll("[data-timeline-property-lane]")).toHaveLength(0);
+    // Including the automation region, which is mounted empty while collapsed
+    // for exactly this reason.
+    expect(ariaControlsTargets(view.host).every(Boolean)).toBe(true);
     act(() => view.root.unmount());
   });
 
@@ -266,8 +285,8 @@ describe("TimelineLanes disclosure target", () => {
     const second = renderLanes({ animations: ANIMATIONS, expandedClipIds: ["clip-a"] });
 
     const idsFor = (host: HTMLElement) =>
-      Array.from(host.querySelectorAll("button[aria-controls]")).map((caret) =>
-        caret.getAttribute("aria-controls"),
+      Array.from(host.querySelectorAll("button[aria-controls]")).flatMap((caret) =>
+        (caret.getAttribute("aria-controls") ?? "").split(/\s+/).filter(Boolean),
       );
     const firstIds = idsFor(first.host);
     const secondIds = idsFor(second.host);

package/src/player/components/TimelineLanes.tsx

@@ -3,25 +3,30 @@ import { BeatStrip, BeatBackgroundLines } from "./BeatStrip";
 import { TimelineClip } from "./TimelineClip";
 import { TimelineCompactDiamonds } from "./TimelineCompactDiamonds";
 import { TimelinePropertyLanes } from "./TimelinePropertyLanes";
+import { TimelineAutomationLaneSlot } from "./TimelineAutomationLane";
+import { useAutomationLanes } from "./useAutomationLanes";
+import { useAutomationSelectionKeyboard } from "../../hooks/useAutomationSelectionKeyboard";
 import { TimelineTrackHeader } from "./TimelineTrackHeader";
-import { resolveTrackKeyframeClip } from "./useTimelineTrackLayout";
+import {
+  isTrackRowExpanded,
+  resolveTrackKeyframeClip,
+  trackShowsBeatStrip,
+} from "./useTimelineTrackLayout";
 import { trackDisplayNumber, trackDisplaySuffix } from "./timelineTrackDisplay";
 import { clipTimingStart } from "../../hooks/gsapShared";
-import { getTimelineEditCapabilities, resolveBlockedTimelineEditIntent } from "./timelineEditing";
-import { CLIP_Y, CLIP_HANDLE_W, TRACK_H } from "./timelineLayout";
-import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { getTimelineEditCapabilities } from "./timelineEditing";
+import { CLIP_Y, TRACK_H } from "./timelineLayout";
+import { usePlayerStore } from "../store/playerStore";
 import {
   isMultiDragActive,
   isMultiDragPassenger,
   multiDragDeltaSeconds,
-  type MultiDragPreviewInput,
   multiDragPassengerOffsetPx,
 } from "./timelineMultiDragPreview";
-import type { TimelineLaneBaseProps } from "./timelineLaneProps";
-import type { TimelineEditCallbacks } from "./timelineCallbacks";
+import type { TimelineLanesProps } from "./timelineLaneProps";
 import { trackStudioKeyframeLaneExpand } from "../../telemetry/events";
-import { SPLIT_BOUNDARY_EPSILON_S } from "../../utils/timelineElementSplit";
 import { isAudioTimelineElement, isMusicTrack } from "../../utils/timelineInspector";
+import { createClipGestureHandlers } from "./timelineClipGestureHandlers";
 import { renderClipChildren, resolveClipRenderContext } from "./timelineClipChildren";
 import { TimelineTrackRow } from "./TimelineTrackRow";
 import { isTimelineClipActive } from "./useTimelineActiveClips";
@@ -31,18 +36,6 @@ import type { TimelineLogicalRow } from "./timelineKeyboardNavigation";
 import { timelineClipFocusId } from "./timelineNavigationIdentity";
 import { useTimelineKeyboardActor } from "./useTimelineKeyboardActor";
 
-interface TimelineLanesProps extends TimelineLaneBaseProps {
-  /** Live-derived by TimelineCanvas from {@link TimelineLaneBaseProps.draggedClip}. */
-  draggedElement: TimelineElement | null;
-  multiDragPreview: MultiDragPreviewInput | null;
-  onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"];
-  onTogglePropertyGroupKeyframe: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
-  onResizeElement: TimelineEditCallbacks["onResizeElement"];
-  onMoveElement: TimelineEditCallbacks["onMoveElement"];
-  onRazorSplit: TimelineEditCallbacks["onRazorSplit"];
-  onRazorSplitAll: TimelineEditCallbacks["onRazorSplitAll"];
-}
-
 export function TimelineLanes({
   pps,
   contentOrigin,
@@ -109,6 +102,10 @@ export function TimelineLanes({
   // from resolving into a second timeline that renders the same logical rows.
   const lanesIdPrefix = `timeline-lanes${useId().replaceAll(":", "")}`;
   const expandedClipIds = usePlayerStore((s) => s.expandedClipIds);
+  const automationLanes = useAutomationLanes();
+  useAutomationSelectionKeyboard({ lanes: automationLanes });
+  const expandClips = usePlayerStore((s) => s.expandClips);
+  const setClipExpanded = usePlayerStore((s) => s.setClipExpanded);
   const toggleClipExpanded = usePlayerStore((s) => s.toggleClipExpanded);
   const logicalRowsByTrack = useMemo(() => {
     const byTrack = new Map<number, TimelineLogicalRow[]>();
@@ -119,6 +116,16 @@ export function TimelineLanes({
     }
     return byTrack;
   }, [logicalRows]);
+  // The caret belongs to the ROW, so it opens and closes every clip on it at
+  // once. Toggling only the active clip left the row's state depending on which
+  // sibling happened to be selected: expand one, click another, and the row
+  // collapsed under a caret that still pointed down.
+  const toggleRowExpandedTracked = (keys: readonly string[]) => {
+    const willExpand = !keys.some((key) => expandedClipIds.has(key));
+    trackStudioKeyframeLaneExpand({ expanded: willExpand });
+    if (willExpand) expandClips(keys);
+    else for (const key of keys) setClipExpanded(key, false);
+  };
   const toggleClipExpandedTracked = (key: string) => {
     const willExpand = !expandedClipIds.has(key);
     trackStudioKeyframeLaneExpand({ expanded: willExpand });
@@ -184,12 +191,13 @@ export function TimelineLanes({
             draggedClip?.started === true && !trackOrder.includes(trackNum) && els.length === 0;
           // All lanes use the same uniform color — no alternating stripes.
           const rowBackground = theme.rowBackground;
-          // Keep diamonds below the beat strip on the active/music track.
-          const beatStripOnTrack =
-            (beatAnalysis?.beatTimes?.length ?? 0) >= 2 &&
-            (selectedElementId
-              ? els.some((e) => (e.key ?? e.id) === selectedElementId)
-              : els.some(isMusicTrack));
+          // The beat-dot strip occupies the top of this track's lane (active track,
+          // or the music track when nothing is selected). When shown, keyframe
+          // diamonds shrink + drop to the bottom half so they don't collide with it.
+          const beatStripOnTrack = trackShowsBeatStrip(els, beatAnalysis?.beatTimes, {
+            selectedElementId,
+            isMusicTrack,
+          });
           const isTrackHidden = els.length > 0 && els.every((element) => element.hidden === true);
           const isAudioTrack = els.length > 0 && els.some(isAudioTimelineElement);
           // Only the selected/most-keyframed clip owns expanded lanes on a shared track.
@@ -200,10 +208,45 @@ export function TimelineLanes({
             selectedElementIds,
           );
           const keyframeClipKey = keyframeClip?.key ?? keyframeClip?.id;
-          const keyframeClipExpanded =
-            keyframeClipKey != null && expandedClipIds.has(keyframeClipKey);
-          // Link the sticky caret to the canvas lanes with a stable display-row id.
+          const rowExpanded = isTrackRowExpanded(els, expandedClipIds);
+          // How tall a clip BAR is drawn. An expanded row is mostly lanes, and a
+          // clip left to fill it painted its waveform straight over them — so the
+          // bar is capped for every clip on the row, not just the one whose
+          // property lanes are showing. Undefined means "fill the row", which is
+          // right only while it is collapsed and the row is nothing but bar.
+          const clipBarHeight = rowExpanded ? TRACK_H - 2 * CLIP_Y : undefined;
+          // The clips whose envelopes this row draws, at their dragged positions.
+          // Once per row, not once per clip in the map below.
+          const automationElements = els.map(getPreviewElement);
+          // Minted here because this is the only place that sees BOTH ends of
+          // the disclosure: the caret in the sticky header and the diamond lanes
+          // on the canvas. Keyed by display row, not by `trackNum`, which is a
+          // fractional sort key and would mint ids like `...-0.16666666666666666`.
           const lanesId = `${lanesIdPrefix}-track-${row}`;
+          // The caret reveals two canvas regions now: the active clip's keyframe
+          // lanes and the track's automation lanes. They cannot be one element —
+          // one belongs to a clip, the other to the row — so the caret names both.
+          const automationLanesId = `${lanesId}-automation`;
+          // The header's remove buttons write through the same binding the lanes
+          // themselves edit through, so a deletion persists exactly like dragging
+          // a point does — and the binding reports read-only for an unselected
+          // clip, which is what leaves the buttons off rather than offering one
+          // that cannot act.
+          const headerLanes =
+            keyframeClip && keyframeClipKey
+              ? automationLanes.bind(
+                  keyframeClip,
+                  selectedElementId === keyframeClipKey || selectedElementIds.has(keyframeClipKey),
+                )
+              : null;
+          const removeAutomationLane =
+            headerLanes && !headerLanes.readOnly
+              ? (target: string) =>
+                  headerLanes.onCommit({
+                    version: 1,
+                    lanes: headerLanes.lanes.filter((lane) => lane.target !== target),
+                  })
+              : undefined;
           return (
             <TimelineTrackRow
               key={rowKey}
@@ -212,6 +255,7 @@ export function TimelineLanes({
               logicalRow={logicalRow}
               propertyRows={trackLogicalRows.slice(1)}
               lanesId={lanesId}
+              headerLanesId={`${lanesId} ${automationLanesId}`}
               top={rowGeometry.getRowTop(row)}
               height={rowHeight}
               virtualized={rowsVirtualized}
@@ -230,23 +274,24 @@ export function TimelineLanes({
                   els[0]?.id ??
                   `Track${trackDisplaySuffix(displayNumber)}`
                 }
-                lanesId={lanesId}
+                lanesId={`${lanesId} ${automationLanesId}`}
                 contentOrigin={contentOrigin}
                 keyframeClip={keyframeClip}
+                trackElements={els}
                 clipCount={els.length}
-                isExpanded={keyframeClipExpanded}
+                isExpanded={rowExpanded}
                 animations={keyframeClipKey ? (gsapAnimations.get(keyframeClipKey) ?? []) : []}
                 currentTime={currentTime}
                 isTrackHidden={isTrackHidden}
                 isAudioTrack={isAudioTrack}
                 theme={theme}
                 onToggleClipExpanded={() => {
-                  if (keyframeClipKey) {
-                    toggleClipExpandedTracked(keyframeClipKey);
-                  }
+                  const keys = els.map(getTimelineElementIdentity);
+                  if (keys.length > 0) toggleRowExpandedTracked(keys);
                 }}
                 onToggleTrackHidden={onToggleTrackHidden}
                 onTogglePropertyGroupKeyframe={onTogglePropertyGroupKeyframe}
+                onRemoveAutomationLane={removeAutomationLane}
                 onSeek={onSeek}
                 rovingTargetId={keyboard.rovingTargetId}
               />
@@ -319,7 +364,7 @@ export function TimelineLanes({
                     // other clips (incl. siblings on a shared track) show compact
                     // diamonds on their own bar instead.
                     const isTrackKeyframeClip = elementKey === keyframeClipKey;
-                    const showsLanes = isTrackKeyframeClip && keyframeClipExpanded;
+                    const showsLanes = isTrackKeyframeClip && rowExpanded;
                     const capabilities = getTimelineEditCapabilities(el);
                     const isSelected =
                       selectedElementId === elementKey || selectedElementIds.has(elementKey);
@@ -344,6 +389,29 @@ export function TimelineLanes({
                     const passengerOffsetPx = isPassenger
                       ? multiDragPassengerOffsetPx(clipKey, pps, multiDragPreview)
                       : 0;
+                    const clipGestures = createClipGestureHandlers(
+                      el,
+                      elementKey,
+                      previewElement,
+                      capabilities,
+                      {
+                        pps,
+                        onResizeElement,
+                        onMoveElement,
+                        onRazorSplit,
+                        onRazorSplitAll,
+                        blockedClipRef,
+                        shiftClickClipRef,
+                        suppressClickRef,
+                        scrollRef,
+                        setShowPopover,
+                        setRangeSelection,
+                        setResizingClip,
+                        setDraggedClip,
+                        setSelectedElementId,
+                        onSelectElement,
+                      },
+                    );
                     const clip = (
                       <TimelineClip
                         key={clipKey}
@@ -354,7 +422,7 @@ export function TimelineLanes({
                         el={previewElement}
                         pps={pps}
                         clipY={CLIP_Y}
-                        clipHeight={showsLanes ? TRACK_H - 2 * CLIP_Y : undefined}
+                        clipHeight={clipBarHeight}
                         isSelected={isSelected}
                         isHovered={hoveredClip === clipKey}
                         isDragging={false}
@@ -368,123 +436,9 @@ export function TimelineLanes({
                         }
                         onHoverStart={() => setHoveredClip(clipKey)}
                         onHoverEnd={() => setHoveredClip(null)}
-                        onResizeStart={
-                          // fallow-ignore-next-line complexity
-                          (edge, e) => {
-                            if (e.button !== 0 || e.shiftKey || !onResizeElement) return;
-                            if (edge === "start" && !capabilities.canTrimStart) return;
-                            if (edge === "end" && !capabilities.canTrimEnd) return;
-                            e.stopPropagation();
-                            blockedClipRef.current = null;
-                            setShowPopover(false);
-                            setRangeSelection(null);
-                            setResizingClip({
-                              pointerId: e.pointerId,
-                              element: el,
-                              edge,
-                              originClientX: e.clientX,
-                              originScrollLeft: scrollRef.current?.scrollLeft ?? 0,
-                              previewStart: el.start,
-                              previewDuration: el.duration,
-                              previewPlaybackStart: el.playbackStart,
-                              started: false,
-                            });
-                          }
-                        }
-                        onPointerDown={
-                          // fallow-ignore-next-line complexity
-                          (e) => {
-                            if (e.button !== 0) return;
-                            if (usePlayerStore.getState().activeTool === "razor") return;
-                            if (e.shiftKey) {
-                              shiftClickClipRef.current = {
-                                element: el,
-                                anchorX: e.clientX,
-                                anchorY: e.clientY,
-                              };
-                              return;
-                            }
-                            const target = e.currentTarget as HTMLElement;
-                            const rect = target.getBoundingClientRect();
-                            const blockedIntent = resolveBlockedTimelineEditIntent({
-                              width: rect.width,
-                              offsetX: e.clientX - rect.left,
-                              handleWidth: CLIP_HANDLE_W,
-                              capabilities,
-                            });
-                            if (
-                              blockedIntent &&
-                              ((blockedIntent === "move" && onMoveElement) ||
-                                (blockedIntent !== "move" && onResizeElement))
-                            ) {
-                              blockedClipRef.current = {
-                                pointerId: e.pointerId,
-                                element: el,
-                                intent: blockedIntent,
-                                originClientX: e.clientX,
-                                originClientY: e.clientY,
-                                started: false,
-                              };
-                              return;
-                            }
-                            if (!onMoveElement || !capabilities.canMove) return;
-                            blockedClipRef.current = null;
-                            setShowPopover(false);
-                            setRangeSelection(null);
-                            setDraggedClip({
-                              pointerId: e.pointerId,
-                              element: el,
-                              originClientX: e.clientX,
-                              originClientY: e.clientY,
-                              originScrollLeft: scrollRef.current?.scrollLeft ?? 0,
-                              originScrollTop: scrollRef.current?.scrollTop ?? 0,
-                              pointerClientX: e.clientX,
-                              pointerClientY: e.clientY,
-                              pointerOffsetX: e.clientX - rect.left,
-                              pointerOffsetY: e.clientY - rect.top,
-                              previewStart: el.start,
-                              previewTrack: el.track,
-                              desiredTrack: el.track,
-                              insertRow: null,
-                              snapTime: null,
-                              snapType: null,
-                              started: false,
-                            });
-                          }
-                        }
-                        onClick={
-                          // fallow-ignore-next-line complexity
-                          (e) => {
-                            e.stopPropagation();
-                            if (suppressClickRef.current) return;
-                            const { activeTool } = usePlayerStore.getState();
-                            if (activeTool === "razor" && onRazorSplit) {
-                              const clipRect = (
-                                e.currentTarget as HTMLElement
-                              ).getBoundingClientRect();
-                              const clickOffsetX = e.clientX - clipRect.left;
-                              const splitTime = previewElement.start + clickOffsetX / pps;
-                              const clampedTime = Math.max(
-                                previewElement.start + SPLIT_BOUNDARY_EPSILON_S,
-                                Math.min(
-                                  previewElement.start +
-                                    previewElement.duration -
-                                    SPLIT_BOUNDARY_EPSILON_S,
-                                  splitTime,
-                                ),
-                              );
-                              if (e.shiftKey && onRazorSplitAll) {
-                                onRazorSplitAll(clampedTime);
-                              } else {
-                                onRazorSplit(el, clampedTime);
-                              }
-                              return;
-                            }
-                            // Clip selection is idempotent; empty timeline space owns deselection.
-                            setSelectedElementId(elementKey);
-                            onSelectElement?.(el);
-                          }
-                        }
+                        onResizeStart={clipGestures.onResizeStart}
+                        onPointerDown={clipGestures.onPointerDown}
+                        onClick={clipGestures.onClick}
                         onDoubleClick={(e) => {
                           e.stopPropagation();
                           if (suppressClickRef.current) return;
@@ -562,7 +516,11 @@ export function TimelineLanes({
                         suppressClickRef={suppressClickRef}
                       />
                     );
-                    // One keyed child prevents window shifts from remounting focused clips.
+
+                    // Keep one keyed top-level child per element. Returning an
+                    // array here makes React reconcile the outer array by
+                    // position, so a window shift remounts otherwise stable
+                    // clip keys and can tear down focus mid-reveal.
                     if (!isPassenger) {
                       return (
                         <Fragment key={clipKey}>
@@ -590,6 +548,36 @@ export function TimelineLanes({
                     );
                   })
                 }
+                {/* The automation lanes belong to the ROW, so they are mounted
+                    here rather than under the active clip's property lanes.
+                    Hanging off that clip meant selecting a sibling moved the
+                    whole subtree into a different clip's element and remounted
+                    every lane — which threw away each lane's hover state (and
+                    any gesture mid-flight), so pressing a lane to select its
+                    clip made the handles you were reaching for disappear.
+
+                    Mounted in BOTH disclosure states, empty while collapsed, so
+                    the caret's aria-controls resolves either way — same reason
+                    the keyframe lanes are. Absolute positions inside resolve
+                    against this same relative row, so the geometry is unchanged
+                    by the move. */}
+                <div id={automationLanesId}>
+                  {rowExpanded ? (
+                    <TimelineAutomationLaneSlot
+                      elements={automationElements}
+                      isSelected={(element) => {
+                        const key = getTimelineElementIdentity(element);
+                        return selectedElementId === key || selectedElementIds.has(key);
+                      }}
+                      lanes={automationLanes}
+                      pps={pps}
+                      laneCount={keyframeClipKey ? (laneCounts.get(keyframeClipKey) ?? 0) : 0}
+                      accentColor={getTrackStyle(keyframeClip?.tag ?? "").accent}
+                      currentTime={currentTime}
+                      beatTimes={beatAnalysis?.beatTimes}
+                    />
+                  ) : null}
+                </div>
               </div>
             </TimelineTrackRow>
           );