@hyperframes/studio 0.7.90 → 0.7.93

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

@@ -0,0 +1,90 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { defaultTimelineTheme } from "./timelineTheme";
+import { TimelineGestureOverlay } from "./TimelineGestureOverlay";
+import type { DraggedClipState } from "./timelineClipDragTypes";
+import { getTrackStyle } from "./useTimelineTrackLayout";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const drag: DraggedClipState = {
+  pointerId: 0,
+  element: { id: "hero", tag: "div", start: 2, duration: 3, track: 1 },
+  originClientX: 100,
+  originClientY: 100,
+  originScrollLeft: 0,
+  originScrollTop: 0,
+  pointerClientX: 350,
+  pointerClientY: 240,
+  pointerOffsetX: 20,
+  pointerOffsetY: 10,
+  previewStart: 4,
+  previewTrack: 2,
+  insertRow: null,
+  snapTime: null,
+  snapType: null,
+  started: true,
+};
+
+afterEach(() => document.body.replaceChildren());
+
+describe("TimelineGestureOverlay", () => {
+  it("keeps the drag actor mounted without a source-row node", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const scroll = {
+      scrollLeft: 500,
+      scrollTop: 300,
+      getBoundingClientRect: () => ({ left: 50, top: 40 }),
+    } as HTMLDivElement;
+    act(() => {
+      root.render(
+        <TimelineGestureOverlay
+          drag={drag}
+          scrollRef={{ current: scroll }}
+          pixelsPerSecond={100}
+          rowHeight={42}
+          selectedElementId="hero"
+          currentTime={4}
+          theme={defaultTimelineTheme}
+          getTrackStyle={getTrackStyle}
+        />,
+      );
+    });
+    const actor = host.querySelector<HTMLElement>('[data-timeline-gesture-actor="hero"]');
+    expect(actor?.style.left).toBe("780px");
+    expect(actor?.style.top).toBe("490px");
+    expect(actor?.querySelector(".timeline-clip")).not.toBeNull();
+    expect(actor?.querySelector("[data-el-id]")).toBeNull();
+    expect(actor?.querySelector("[data-clip]")).toBeNull();
+    expect(host.querySelector("[data-source-row]")).toBeNull();
+    act(() => root.unmount());
+  });
+
+  it("keeps the stable overlay host after terminal cleanup", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <TimelineGestureOverlay
+          drag={null}
+          scrollRef={{ current: null }}
+          pixelsPerSecond={100}
+          rowHeight={42}
+          selectedElementId={null}
+          currentTime={0}
+          theme={defaultTimelineTheme}
+          getTrackStyle={getTrackStyle}
+        />,
+      );
+    });
+    expect(host.querySelector("[data-timeline-gesture-overlay]")).not.toBeNull();
+    expect(host.querySelector("[data-timeline-gesture-actor]")).toBeNull();
+    act(() => root.unmount());
+  });
+});

package/src/player/components/TimelineGestureOverlay.tsx

@@ -0,0 +1,96 @@
+import { memo, type ReactNode } from "react";
+import type { TimelineElement } from "../store/playerStore";
+import type { TimelineTheme } from "./timelineTheme";
+import { getRenderedTimelineElement } from "./timelineTheme";
+import { TimelineClip } from "./TimelineClip";
+import { getTimelineEditCapabilities } from "./timelineEditing";
+import { renderClipChildren } from "./timelineClipChildren";
+import { getTimelineDragOverlayPosition } from "./timelineClipDragPreview";
+import type { DraggedClipState } from "./timelineClipDragTypes";
+import type { TrackVisualStyle } from "./timelineIcons";
+import { isTimelineClipActive } from "./useTimelineActiveClips";
+
+interface TimelineGestureOverlayProps {
+  drag: DraggedClipState | null;
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+  pixelsPerSecond: number;
+  rowHeight: number;
+  selectedElementId: string | null;
+  currentTime: number;
+  theme: TimelineTheme;
+  getTrackStyle: (tag: string) => TrackVisualStyle;
+  renderClipContent?: (
+    element: TimelineElement,
+    style: { clip: string; label: string },
+  ) => ReactNode;
+  renderClipOverlay?: (element: TimelineElement) => ReactNode;
+}
+
+/** Stable canvas child that owns the live drag actor independently of source rows. */
+export const TimelineGestureOverlay = memo(function TimelineGestureOverlay({
+  drag,
+  scrollRef,
+  pixelsPerSecond,
+  rowHeight,
+  selectedElementId,
+  currentTime,
+  theme,
+  getTrackStyle,
+  renderClipContent,
+  renderClipOverlay,
+}: TimelineGestureOverlayProps) {
+  const element =
+    drag?.started === true
+      ? getRenderedTimelineElement({
+          element: drag.element,
+          draggedElementId: drag.element.key ?? drag.element.id,
+          previewStart: drag.previewStart,
+          previewTrack: drag.previewTrack,
+        })
+      : null;
+  const position = drag ? getTimelineDragOverlayPosition(drag, scrollRef.current) : null;
+  return (
+    <div data-timeline-gesture-overlay className="absolute inset-0 pointer-events-none">
+      {element && position && (
+        <div
+          data-timeline-gesture-actor={element.key ?? element.id}
+          className="absolute"
+          style={{
+            top: position.top,
+            left: position.left,
+            width: Math.max(element.duration * pixelsPerSecond, 4),
+            height: rowHeight,
+            zIndex: 40,
+          }}
+        >
+          <TimelineClip
+            el={{ ...element, start: 0 }}
+            pps={pixelsPerSecond}
+            clipY={0}
+            isSelected={selectedElementId === (element.key ?? element.id)}
+            isHovered={false}
+            isDragging
+            isGestureActor
+            isActive={isTimelineClipActive(element, currentTime)}
+            hasCustomContent={!!renderClipContent}
+            capabilities={getTimelineEditCapabilities(element)}
+            theme={theme}
+            isComposition={!!element.compositionSrc}
+            onHoverStart={() => {}}
+            onHoverEnd={() => {}}
+            onResizeStart={() => {}}
+            onClick={() => {}}
+            onDoubleClick={() => {}}
+          >
+            {renderClipChildren(
+              element,
+              getTrackStyle(element.tag),
+              renderClipContent,
+              renderClipOverlay,
+            )}
+          </TimelineClip>
+        </div>
+      )}
+    </div>
+  );
+});

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

@@ -9,6 +9,7 @@ import { getTrackStyle } from "./timelineIcons";
 import { defaultTimelineTheme } from "./timelineTheme";
 import { TRACK_H, getTimelineRowGeometry } from "./timelineLayout";
 import { createTimelineClipIndex } from "../lib/timelineClipIndex";
+import { buildTimelineLogicalRows } from "./timelineKeyboardNavigation";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import type { MultiDragPreviewInput } from "./timelineMultiDragPreview";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
@@ -26,6 +27,17 @@ afterEach(() => {
 const TRACK_A = 1 / 6;
 const TRACK_B = 0.5;
 
+/** Every string a screen reader or a sighted user actually reads. */
+function visibleText(host: HTMLElement): string {
+  return host.textContent ?? "";
+}
+
+function ariaLabels(host: HTMLElement): string {
+  return Array.from(host.querySelectorAll("[aria-label]"))
+    .map((el) => el.getAttribute("aria-label") ?? "")
+    .join(" ");
+}
+
 function element(id: string, track: number): TimelineElement {
   return { id, label: id, tag: "div", start: 0, duration: 2, track };
 }
@@ -94,6 +106,16 @@ function renderLanes(options: RenderLanesOptions = {}): {
           rowGeometry={getTimelineRowGeometry(rowHeights)}
           virtualRows={displayTrackOrder.map((_, index) => ({ index, rowKey: index }))}
           rowsVirtualized={false}
+          focusedTargetId={null}
+          logicalRows={buildTimelineLogicalRows({
+            tracks,
+            displayTrackOrder,
+            laneCounts,
+            selectedElementId: null,
+            selectedElementIds: next.selectedElementIds ?? new Set(),
+            expandedClipIds: new Set(next.expandedClipIds ?? []),
+            gsapAnimations,
+          })}
           clipIndex={createTimelineClipIndex(tracks)}
           renderTimeRange={{ start: 0, end: Number.POSITIVE_INFINITY }}
           pinnedClipIdentities={new Set()}
@@ -116,7 +138,6 @@ function renderLanes(options: RenderLanesOptions = {}): {
           setResizingClip={vi.fn()}
           setDraggedClip={vi.fn()}
           setSelectedElementId={vi.fn()}
-          syncClipDragAutoScroll={vi.fn()}
           shiftClickClipRef={createRef()}
           getPreviewElement={(el) => el}
           getTrackStyle={getTrackStyle}
@@ -153,7 +174,11 @@ describe("TimelineLanes track numbering", () => {
 
     expect(visibilityLabels(view.host)).toEqual(["Hide track 1", "Hide track 2"]);
     expect(view.host.querySelectorAll("[data-timeline-row]")).toHaveLength(2);
-    expect(view.host.innerHTML).not.toContain("0.16666666666666666");
+    // Only what a user reads. The fractional key still identifies the row in
+    // `id` / `data-` attributes, which is exactly where an opaque sort key
+    // belongs.
+    expect(visibleText(view.host)).not.toContain("0.16666666666666666");
+    expect(ariaLabels(view.host)).not.toContain("0.16666666666666666");
     act(() => view.root.unmount());
   });
 
@@ -180,11 +205,12 @@ describe("TimelineLanes track numbering", () => {
       onContextMenuLane,
     });
 
-    // Row children: [sticky header column, time-mapped track content]. The rows
-    // sit inside the lanes list, which is what carries the virtualization
-    // positioning context.
-    const rows = Array.from(view.host.querySelectorAll('[role="listitem"]'));
-    const secondTrackContent = rows[1]?.children.item(1);
+    // The lane's own content cell: the track row's second child, after the
+    // sticky header column.
+    const secondTrackContent = view.host
+      .querySelectorAll("[data-timeline-row]")[1]
+      ?.querySelector('[role="row"]')
+      ?.children.item(1);
     act(() => {
       secondTrackContent?.dispatchEvent(
         new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: 100 }),
@@ -239,9 +265,40 @@ describe("TimelineLanes disclosure target", () => {
       );
     const firstIds = idsFor(first.host);
     const secondIds = idsFor(second.host);
+    const cellIdsFor = (host: HTMLElement) =>
+      new Set(
+        Array.from(host.querySelectorAll<HTMLElement>("[data-property-group][id]"), (cell) =>
+          cell.getAttribute("id"),
+        ).filter((id): id is string => id !== null),
+      );
+    const ownedIdsFor = (host: HTMLElement) =>
+      Array.from(host.querySelectorAll("[aria-owns]"), (owner) =>
+        owner.getAttribute("aria-owns"),
+      ).filter((id): id is string => id !== null);
+    const firstCellIds = cellIdsFor(first.host);
+    const secondCellIds = cellIdsFor(second.host);
 
+    for (const { host } of [first, second]) {
+      const treegrid = host.querySelector<HTMLElement>('[role="treegrid"]');
+      expect(treegrid?.getAttribute("aria-colcount")).toBe("2");
+      expect(treegrid?.hasAttribute("aria-multiselectable")).toBe(false);
+      expect(
+        [...host.querySelectorAll('[role="rowheader"]')].every(
+          (cell) => cell.getAttribute("aria-colindex") === "1",
+        ),
+      ).toBe(true);
+      expect(
+        [...host.querySelectorAll('[role="gridcell"]')].every(
+          (cell) => cell.getAttribute("aria-colindex") === "2",
+        ),
+      ).toBe(true);
+    }
     expect(firstIds.length).toBeGreaterThan(0);
     expect(firstIds.some((id) => secondIds.includes(id))).toBe(false);
+    expect(firstCellIds.size).toBeGreaterThan(0);
+    expect([...firstCellIds].some((id) => secondCellIds.has(id))).toBe(false);
+    expect(ownedIdsFor(first.host).every((id) => firstCellIds.has(id))).toBe(true);
+    expect(ownedIdsFor(second.host).every((id) => secondCellIds.has(id))).toBe(true);
     // Still a legal CSS id selector: the aria-controls lookups above use `#id`.
     for (const id of [...firstIds, ...secondIds]) {
       expect(id).toMatch(/^[A-Za-z][\w-]*$/);

package/src/player/components/TimelineLanes.tsx

@@ -1,7 +1,7 @@
-import { Fragment, useId } from "react";
+import { Fragment, useId, useMemo } from "react";
 import { BeatStrip, BeatBackgroundLines } from "./BeatStrip";
 import { TimelineClip } from "./TimelineClip";
-import { TimelineClipDiamonds } from "./TimelineClipDiamonds";
+import { TimelineCompactDiamonds } from "./TimelineCompactDiamonds";
 import { TimelinePropertyLanes } from "./TimelinePropertyLanes";
 import { TimelineTrackHeader } from "./TimelineTrackHeader";
 import { resolveTrackKeyframeClip } from "./useTimelineTrackLayout";
@@ -27,6 +27,9 @@ import { TimelineTrackRow } from "./TimelineTrackRow";
 import { isTimelineClipActive } from "./useTimelineActiveClips";
 import { queryTimelineClipIndex } from "../lib/timelineClipIndex";
 import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
+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}. */
@@ -49,6 +52,8 @@ export function TimelineLanes({
   displayTrackOrder,
   rowGeometry,
   virtualRows,
+  logicalRows,
+  focusedTargetId,
   rowsVirtualized,
   clipIndex,
   renderTimeRange,
@@ -76,7 +81,6 @@ export function TimelineLanes({
   setResizingClip,
   setDraggedClip,
   setSelectedElementId,
-  syncClipDragAutoScroll,
   shiftClickClipRef,
   getPreviewElement,
   getTrackStyle,
@@ -100,14 +104,20 @@ export function TimelineLanes({
   onRazorSplit,
   onRazorSplitAll,
 }: TimelineLanesProps) {
-  // Per-INSTANCE, so two timelines on one page (a mini-timeline in a modal
-  // beside the main one) cannot both mint `...-track-0` and have every caret's
-  // aria-controls resolve to whichever mounted first. React's useId embeds
-  // colons, which are legal in an id and in aria-controls but need escaping in
-  // a CSS `#id` selector, so they come out here and the prefix stays plain.
+  // ponytail: One per-instance namespace prevents aria-controls and aria-owns
+  // 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 toggleClipExpanded = usePlayerStore((s) => s.toggleClipExpanded);
+  const logicalRowsByTrack = useMemo(() => {
+    const byTrack = new Map<number, TimelineLogicalRow[]>();
+    for (const logicalRow of logicalRows) {
+      const trackRows = byTrack.get(logicalRow.physicalTrackKey) ?? [];
+      trackRows.push(logicalRow);
+      byTrack.set(logicalRow.physicalTrackKey, trackRows);
+    }
+    return byTrack;
+  }, [logicalRows]);
   const toggleClipExpandedTracked = (key: string) => {
     const willExpand = !expandedClipIds.has(key);
     trackStudioKeyframeLaneExpand({ expanded: willExpand });
@@ -129,10 +139,23 @@ export function TimelineLanes({
           },
         ]
       : [];
+  const keyboard = useTimelineKeyboardActor({
+    logicalRows,
+    focusedTargetId,
+    rowGeometry,
+    scrollRef,
+    onToggleRow: (row) => {
+      if (row.elementId) toggleClipExpandedTracked(row.elementId);
+    },
+  });
   return (
     <div
-      role="list"
+      role="treegrid"
       aria-label="Timeline tracks"
+      aria-rowcount={logicalRows.length}
+      aria-colcount={2}
+      onFocus={keyboard.onFocus}
+      onKeyDown={keyboard.onKeyDown}
       className={rowsVirtualized ? "absolute inset-0" : undefined}
     >
       {
@@ -141,6 +164,9 @@ export function TimelineLanes({
           const trackNum = displayTrackOrder[row];
           if (trackNum === undefined) return null;
           const displayNumber = trackDisplayNumber(displayTrackOrder, trackNum);
+          const trackLogicalRows = logicalRowsByTrack.get(trackNum) ?? [];
+          const logicalRow = trackLogicalRows[0];
+          if (!logicalRow) return null;
           const rowHeight = rowGeometry.getRowHeight(row);
           const els = tracks.find(([t]) => t === trackNum)?.[1] ?? [];
           const renderElements = rowsVirtualized
@@ -157,9 +183,7 @@ 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;
-          // 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.
+          // Keep diamonds below the beat strip on the active/music track.
           const beatStripOnTrack =
             (beatAnalysis?.beatTimes?.length ?? 0) >= 2 &&
             (selectedElementId
@@ -167,9 +191,7 @@ export function TimelineLanes({
               : els.some(isMusicTrack));
           const isTrackHidden = els.length > 0 && els.every((element) => element.hidden === true);
           const isAudioTrack = els.length > 0 && els.some(isAudioTimelineElement);
-          // The one keyframed element this track shows lanes for (selected, else
-          // most lanes). A track can hold several elements; scoping to one keeps
-          // their keyframes from cramming into a single row.
+          // Only the selected/most-keyframed clip owns expanded lanes on a shared track.
           const keyframeClip = resolveTrackKeyframeClip(
             els,
             laneCounts,
@@ -179,22 +201,22 @@ export function TimelineLanes({
           const keyframeClipKey = keyframeClip?.key ?? keyframeClip?.id;
           const keyframeClipExpanded =
             keyframeClipKey != null && expandedClipIds.has(keyframeClipKey);
-          // 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`.
+          // Link the sticky caret to the canvas lanes with a stable display-row id.
           const lanesId = `${lanesIdPrefix}-track-${row}`;
           return (
             <TimelineTrackRow
               key={rowKey}
               index={row}
               rowKey={rowKey}
-              rowCount={displayTrackOrder.length}
+              logicalRow={logicalRow}
+              propertyRows={trackLogicalRows.slice(1)}
+              lanesId={lanesId}
               top={rowGeometry.getRowTop(row)}
               height={rowHeight}
               virtualized={rowsVirtualized}
               background={rowBackground}
               borderColor={theme.rowBorder}
+              rovingTargetId={keyboard.rovingTargetId}
             >
               <TimelineTrackHeader
                 trackNumber={trackNum}
@@ -225,8 +247,11 @@ export function TimelineLanes({
                 onToggleTrackHidden={onToggleTrackHidden}
                 onTogglePropertyGroupKeyframe={onTogglePropertyGroupKeyframe}
                 onSeek={onSeek}
+                rovingTargetId={keyboard.rovingTargetId}
               />
               <div
+                role="gridcell"
+                aria-colindex={2}
                 style={{
                   width: trackContentWidth,
                   marginLeft: contentGutter, // room for a 0% diamond left of t=0
@@ -298,9 +323,8 @@ export function TimelineLanes({
                     const isSelected =
                       selectedElementId === elementKey || selectedElementIds.has(elementKey);
                     const isComposition = !!el.compositionSrc;
-                    // elementKey (el.key ?? el.id) is already unique per clip; do NOT
-                    // fold in the map index, or a splice/reorder remounts every clip
-                    // at/after the change (DOM flash, drag interruption).
+                    // The element identity is already unique per clip. Never fold in the map
+                    // index, or a splice/reorder remounts every clip at/after the change.
                     const clipKey = elementKey;
                     const isDraggingClip =
                       draggedClip?.started === true &&
@@ -308,11 +332,8 @@ export function TimelineLanes({
                       getTimelineElementIdentity(draggedElement) === elementKey;
                     if (isDraggingClip) return null;
                     const previewElement = getPreviewElement(el);
-                    // Passenger of a live multi-drag: slide by the SAME formation
-                    // delta (the grabbed clip's group-clamped delta) via a
-                    // compositor transform on a same-geometry wrapper (absolute
-                    // inset-0 → identical offset parent, so the clip's own
-                    // left/top are preserved), plus the ghost's elevated z/opacity.
+                    // Passenger of a live multi-drag: preserve the formation without changing
+                    // the passenger's timeline data until the owning drag commits.
                     const isPassenger =
                       multiDragPreview != null && isMultiDragPassenger(clipKey, multiDragPreview);
                     const passengerOffsetPx = isPassenger
@@ -337,6 +358,9 @@ export function TimelineLanes({
                         capabilities={capabilities}
                         theme={theme}
                         isComposition={isComposition}
+                        tabIndex={
+                          keyboard.rovingTargetId === timelineClipFocusId(elementKey) ? 0 : -1
+                        }
                         onHoverStart={() => setHoveredClip(clipKey)}
                         onHoverEnd={() => setHoveredClip(null)}
                         onResizeStart={
@@ -350,6 +374,7 @@ export function TimelineLanes({
                             setShowPopover(false);
                             setRangeSelection(null);
                             setResizingClip({
+                              pointerId: e.pointerId,
                               element: el,
                               edge,
                               originClientX: e.clientX,
@@ -388,6 +413,7 @@ export function TimelineLanes({
                                 (blockedIntent !== "move" && onResizeElement))
                             ) {
                               blockedClipRef.current = {
+                                pointerId: e.pointerId,
                                 element: el,
                                 intent: blockedIntent,
                                 originClientX: e.clientX,
@@ -401,6 +427,7 @@ export function TimelineLanes({
                             setShowPopover(false);
                             setRangeSelection(null);
                             setDraggedClip({
+                              pointerId: e.pointerId,
                               element: el,
                               originClientX: e.clientX,
                               originClientY: e.clientY,
@@ -418,7 +445,6 @@ export function TimelineLanes({
                               snapType: null,
                               started: false,
                             });
-                            syncClipDragAutoScroll(e.clientX, e.clientY);
                           }
                         }
                         onClick={
@@ -472,41 +498,33 @@ export function TimelineLanes({
                           renderClipContent,
                           renderClipOverlay,
                         )}
-                        {!showsLanes && keyframeCache?.get(elementKey) && (
-                          <TimelineClipDiamonds
-                            keyframesData={keyframeCache.get(elementKey)!}
-                            clipWidthPx={Math.max(previewElement.duration * pps, 4)}
-                            clipHeightPx={rowHeight - 2 * CLIP_Y}
-                            clipDuration={previewElement.duration}
-                            beatsActive={beatStripOnTrack}
-                            accentColor={clipStyle.accent}
-                            isSelected={isSelected}
-                            currentPercentage={
-                              previewElement.duration > 0
-                                ? ((currentTime - previewElement.start) / previewElement.duration) *
-                                  100
-                                : 0
-                            }
-                            elementId={elementKey}
-                            selectedKeyframes={selectedKeyframes}
-                            onClickKeyframe={(_elId, target) =>
-                              onClickKeyframe?.(previewElement, target)
-                            }
-                            onShiftClickKeyframe={onShiftClickKeyframe}
-                            onContextMenuKeyframe={onContextMenuKeyframe}
-                            onMoveKeyframe={onMoveKeyframe}
-                            onSelectSegment={onSelectSegment}
-                            suppressClickRef={suppressClickRef}
-                          />
-                        )}
                       </TimelineClip>
                     );
-                    // Mounted for the track's keyframe clip in BOTH disclosure
-                    // states, so the header caret's aria-controls resolves while
-                    // collapsed too; collapsed just feeds it no animations, so
-                    // the wrapper renders empty. The key is stable across a
-                    // multi-drag: without it the passenger branch below remounts
-                    // this subtree and interrupts the gesture.
+                    const compactKeyframes = keyframeCache?.get(elementKey);
+                    const compactDiamonds = !showsLanes && compactKeyframes && (
+                      <TimelineCompactDiamonds
+                        key={`${clipKey}-diamonds`}
+                        element={previewElement}
+                        elementId={elementKey}
+                        keyframesData={compactKeyframes}
+                        pixelsPerSecond={pps}
+                        rowHeight={rowHeight}
+                        beatsActive={beatStripOnTrack}
+                        accentColor={clipStyle.accent}
+                        isSelected={isSelected}
+                        currentTime={currentTime}
+                        selectedKeyframes={selectedKeyframes}
+                        rovingTargetId={keyboard.rovingTargetId}
+                        onClickKeyframe={onClickKeyframe}
+                        onShiftClickKeyframe={onShiftClickKeyframe}
+                        onContextMenuKeyframe={onContextMenuKeyframe}
+                        onMoveKeyframe={onMoveKeyframe}
+                        onSelectSegment={onSelectSegment}
+                        suppressClickRef={suppressClickRef}
+                      />
+                    );
+                    // Keep this shell mounted while collapsed so aria-controls stays valid
+                    // and multi-drag cannot remount the subtree mid-gesture.
                     const propertyLanes = isTrackKeyframeClip && (
                       <TimelinePropertyLanes
                         key={`${clipKey}-property-lanes`}
@@ -528,6 +546,7 @@ export function TimelineLanes({
                         }
                         elementId={elementKey}
                         selectedKeyframes={selectedKeyframes}
+                        rovingTargetId={keyboard.rovingTargetId}
                         onSelectSegment={(target) => onSelectSegment?.(elementKey, target)}
                         onClickKeyframe={(target) => onClickKeyframe?.(previewElement, target)}
                         onShiftClickKeyframe={(target) =>
@@ -543,14 +562,12 @@ export function TimelineLanes({
                         suppressClickRef={suppressClickRef}
                       />
                     );
-                    // 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.
+                    // One keyed child prevents window shifts from remounting focused clips.
                     if (!isPassenger) {
                       return (
                         <Fragment key={clipKey}>
                           {clip}
+                          {compactDiamonds}
                           {propertyLanes}
                         </Fragment>
                       );
@@ -567,6 +584,7 @@ export function TimelineLanes({
                         }}
                       >
                         {clip}
+                        {compactDiamonds}
                         {propertyLanes}
                       </div>
                     );