@hyperframes/studio 0.7.86 → 0.7.87

package/src/player/components/Timeline.virtualization.test.tsx

@@ -0,0 +1,400 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+class MockResizeObserver {
+  constructor(private readonly callback: ResizeObserverCallback) {}
+  observe(target: Element) {
+    this.callback(
+      [
+        {
+          target,
+          borderBoxSize: [{ inlineSize: target.clientWidth, blockSize: target.clientHeight }],
+        } as unknown as ResizeObserverEntry,
+      ],
+      this as unknown as ResizeObserver,
+    );
+  }
+  unobserve() {}
+  disconnect() {}
+}
+
+const originalResizeObserver = globalThis.ResizeObserver;
+const originalClientWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "clientWidth");
+const originalClientHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "clientHeight");
+let clientWidth = 900;
+let clientHeight = 240;
+
+beforeAll(() => {
+  vi.stubEnv("VITE_STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED", "1");
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  Object.defineProperty(HTMLElement.prototype, "clientWidth", {
+    configurable: true,
+    get: () => clientWidth,
+  });
+  Object.defineProperty(HTMLElement.prototype, "clientHeight", {
+    configurable: true,
+    get: () => clientHeight,
+  });
+});
+
+beforeEach(() => {
+  clientWidth = 900;
+  clientHeight = 240;
+});
+
+afterAll(() => {
+  vi.unstubAllEnvs();
+  globalThis.ResizeObserver = originalResizeObserver;
+  if (originalClientWidth)
+    Object.defineProperty(HTMLElement.prototype, "clientWidth", originalClientWidth);
+  if (originalClientHeight)
+    Object.defineProperty(HTMLElement.prototype, "clientHeight", originalClientHeight);
+  document.body.innerHTML = "";
+});
+
+/**
+ * The virtualized list only mounts rows/clips after its ResizeObserver and the
+ * follow-up layout effect have both flushed, which is more than one React tick.
+ * A fixed number of flushes is a coin flip once the rest of the suite is
+ * competing for workers, so wait for the DOM the assertions actually need.
+ */
+async function settleUntil(predicate: () => boolean, tries = 60): Promise<void> {
+  for (let attempt = 0; attempt < tries; attempt++) {
+    if (predicate()) return;
+    await act(async () => {
+      await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+    });
+  }
+}
+
+async function advanceFrame(): Promise<void> {
+  await act(async () => {
+    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+  });
+}
+
+async function mountTimeline(element: React.ReactElement) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  await act(async () => root.render(element));
+  await act(async () => {});
+  return { host, root };
+}
+
+async function dispatchScroll(scroller: HTMLElement): Promise<void> {
+  await act(async () => {
+    scroller.dispatchEvent(new Event("scroll"));
+    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+  });
+}
+
+function clipsByTrack(count: number, duration = 1, includeLabels = false) {
+  return Array.from({ length: count }, (_, track) => ({
+    id: `clip-${track}`,
+    ...(includeLabels ? { label: `Clip ${track}` } : {}),
+    tag: "div",
+    start: 0,
+    duration,
+    track,
+  }));
+}
+
+async function scrollTimelineHorizontally(
+  scroller: HTMLElement,
+  scrollLeft: number,
+): Promise<void> {
+  scroller.scrollLeft = scrollLeft;
+  await dispatchScroll(scroller);
+}
+
+// These tests mount 500-10,000 timeline elements and settle the virtualizer,
+// which lands right on the 5s default once the rest of the suite is competing
+// for workers. The generous ceiling is a flake guard, not an expected runtime.
+describe("Timeline row virtualization", { timeout: 30_000 }, () => {
+  it("keeps a zero-size first render bounded while the feature flag is enabled", async () => {
+    clientWidth = 0;
+    clientHeight = 0;
+    const [{ Timeline }, { usePlayerStore }] = await Promise.all([
+      import("./Timeline"),
+      import("../store/playerStore"),
+    ]);
+    usePlayerStore.setState({
+      duration: 60,
+      timelineReady: true,
+      elements: clipsByTrack(10_000),
+    });
+
+    const { host, root } = await mountTimeline(React.createElement(Timeline, { sessionEpoch: 2 }));
+
+    const rows = host.querySelectorAll('[role="listitem"]');
+    expect(rows.length).toBeGreaterThan(0);
+    expect(rows.length).toBeLessThanOrEqual(16);
+
+    act(() => root.unmount());
+    usePlayerStore.getState().reset();
+  });
+
+  it("defers rich clip content while scrolling without replacing the clip shell", async () => {
+    const [{ Timeline }, { usePlayerStore }] = await Promise.all([
+      import("./Timeline"),
+      import("../store/playerStore"),
+    ]);
+    usePlayerStore.setState({
+      duration: 60,
+      timelineReady: true,
+      selectedElementId: "clip-0",
+      elements: [{ id: "clip-0", label: "Clip 0", tag: "div", start: 0, duration: 10, track: 0 }],
+    });
+
+    const { host, root } = await mountTimeline(
+      React.createElement(Timeline, {
+        renderClipContent: () => React.createElement("span", { "data-rich-content": true }),
+      }),
+    );
+    try {
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 110));
+      });
+
+      const scroller = host.querySelector<HTMLElement>("[data-timeline-scroll-viewport]");
+      const clip = host.querySelector<HTMLElement>('[data-el-id="clip-0"]');
+      expect(scroller).not.toBeNull();
+      expect(clip).not.toBeNull();
+      expect(clip?.title).toBe("Clip 0 • 0.0s – 10.0s");
+      expect(host.querySelector("[data-rich-content]")).not.toBeNull();
+
+      if (scroller) await dispatchScroll(scroller);
+      expect(host.querySelector('[data-el-id="clip-0"]')).toBe(clip);
+      expect(host.querySelector("[data-rich-content]")).toBeNull();
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 110));
+      });
+      expect(host.querySelector('[data-el-id="clip-0"]')).toBe(clip);
+      expect(host.querySelector("[data-rich-content]")).not.toBeNull();
+    } finally {
+      act(() => root.unmount());
+      usePlayerStore.getState().reset();
+    }
+  });
+
+  it("mounts a bounded list range over the full geometry height", async () => {
+    const [{ Timeline }, { usePlayerStore }, { getTimelineCanvasHeight, TRACK_H }] =
+      await Promise.all([
+        import("./Timeline"),
+        import("../store/playerStore"),
+        import("./timelineLayout"),
+      ]);
+    usePlayerStore.setState({
+      duration: 60,
+      timelineReady: true,
+      elements: clipsByTrack(1_000),
+    });
+
+    const { host, root } = await mountTimeline(React.createElement(Timeline, { sessionEpoch: 3 }));
+
+    await settleUntil(
+      () =>
+        (host.querySelector('[role="list"]')?.querySelectorAll('[role="listitem"]').length ?? 0) >
+        0,
+    );
+    const list = host.querySelector<HTMLElement>('[role="list"]');
+    const rows = list?.querySelectorAll('[role="listitem"]') ?? [];
+    expect(rows.length).toBeGreaterThan(0);
+    expect(rows.length).toBeLessThanOrEqual(16);
+    expect(rows[0]?.getAttribute("aria-posinset")).toBe("1");
+    expect(rows[0]?.getAttribute("aria-setsize")).toBe("1000");
+    expect(list?.parentElement?.style.height).toBe(
+      `${getTimelineCanvasHeight(Array.from({ length: 1_000 }, () => TRACK_H))}px`,
+    );
+
+    const firstRow = rows[0] as HTMLElement;
+    const focusedControl = firstRow.querySelector<HTMLButtonElement>("button");
+    expect(focusedControl).not.toBeNull();
+    act(() => focusedControl?.focus());
+    const scroller = host.querySelector<HTMLElement>("[data-timeline-scroll-viewport]");
+    expect(scroller).not.toBeNull();
+    if (scroller) {
+      scroller.scrollTop = 500 * 48;
+      await act(async () => {
+        scroller.dispatchEvent(new Event("scroll"));
+      });
+    }
+    expect(list?.querySelector('[data-timeline-row-key="0"]')).not.toBeNull();
+    expect(document.activeElement).toBe(focusedControl);
+
+    act(() => root.unmount());
+    usePlayerStore.getState().reset();
+  });
+
+  it("windows clips and ruler cells while retaining an off-window selected clip", async () => {
+    const [{ Timeline }, { usePlayerStore }, { TIMELINE_VIEWPORT_BUDGETS }] = await Promise.all([
+      import("./Timeline"),
+      import("../store/playerStore"),
+      import("../lib/timelineViewportBudgets"),
+    ]);
+    usePlayerStore.setState({
+      duration: 1_000,
+      timelineReady: true,
+      zoomMode: "manual",
+      manualZoomPercent: 2_000,
+      selectedElementId: "clip-490",
+      selectedElementIds: new Set(["clip-490"]),
+      // Repeated fixture shape intentionally contrasts row and clip windowing scales.
+      // fallow-ignore-next-line code-duplication
+      elements: Array.from({ length: 500 }, (_, index) => ({
+        id: `clip-${index}`,
+        tag: "div",
+        start: index * 2,
+        duration: 1,
+        track: 0,
+      })),
+    });
+
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    await act(async () => root.render(React.createElement(Timeline, { sessionEpoch: 4 })));
+    await act(async () => {});
+
+    await settleUntil(() => host.querySelectorAll("[data-clip]").length > 1);
+    const initialClips = [...host.querySelectorAll<HTMLElement>("[data-clip]")];
+    const initialGridCells = host.querySelectorAll("[data-timeline-grid-cell]");
+    expect(initialClips.length).toBeGreaterThan(1);
+    expect(initialClips.length).toBeLessThanOrEqual(
+      TIMELINE_VIEWPORT_BUDGETS.maxMountedClipRootsPerRow + 1,
+    );
+    expect(initialGridCells.length).toBeLessThan(100);
+    expect(host.querySelector('[data-el-id="clip-490"]')).not.toBeNull();
+    const initialWindowIds = initialClips.map((clip) => clip.dataset.elId);
+
+    const scroller = host.querySelector<HTMLElement>("[data-timeline-scroll-viewport]");
+    expect(scroller).not.toBeNull();
+    if (scroller) await scrollTimelineHorizontally(scroller, 8_000);
+
+    const scrolledClips = [...host.querySelectorAll<HTMLElement>("[data-clip]")];
+    expect(scrolledClips.map((clip) => clip.dataset.elId)).not.toEqual(initialWindowIds);
+    expect(scrolledClips.length).toBeLessThanOrEqual(
+      TIMELINE_VIEWPORT_BUDGETS.maxMountedClipRootsPerRow + 1,
+    );
+    expect(host.querySelector('[data-el-id="clip-490"]')).not.toBeNull();
+    expect(host.querySelectorAll("[data-timeline-grid-cell]").length).toBeLessThan(100);
+
+    await act(async () => usePlayerStore.getState().requestClipReveal("clip-300"));
+    await advanceFrame();
+    await act(async () => {});
+    expect(usePlayerStore.getState().clipRevealRequest).toBeNull();
+    const focusedClip = host.querySelector('[data-el-id="clip-300"]');
+    expect(document.activeElement).toBe(focusedClip);
+    await advanceFrame();
+    expect(host.querySelector('[data-el-id="clip-300"]')).toBe(focusedClip);
+    expect(document.activeElement).toBe(focusedClip);
+    expect(host.querySelector('[data-el-id="clip-490"]')).not.toBeNull();
+
+    if (scroller) await scrollTimelineHorizontally(scroller, 0);
+    expect(host.querySelector('[data-el-id="clip-300"]')).toBe(focusedClip);
+    expect(document.activeElement).toBe(focusedClip);
+
+    act(() => root.unmount());
+    usePlayerStore.getState().reset();
+  });
+});
+
+/**
+ * The rollback build mounts every clip, so the scroll-time concessions
+ * windowing makes are pure cost there. This block pins that explicit fallback
+ * to doing no per-frame work while a gesture runs.
+ */
+describe("Timeline without row virtualization", { timeout: 30_000 }, () => {
+  async function renderUnvirtualizedTimeline() {
+    vi.stubEnv("VITE_STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED", "0");
+    vi.resetModules();
+    const [{ Timeline }, { usePlayerStore }] = await Promise.all([
+      import("./Timeline"),
+      import("../store/playerStore"),
+    ]);
+    usePlayerStore.setState({
+      duration: 60,
+      timelineReady: true,
+      selectedElementId: "clip-0",
+      elements: clipsByTrack(40, 10, true),
+    });
+
+    const { host, root } = await mountTimeline(
+      React.createElement(Timeline, {
+        renderClipContent: () => React.createElement("span", { "data-rich-content": true }),
+      }),
+    );
+    return {
+      host,
+      dispose: () => {
+        act(() => root.unmount());
+        usePlayerStore.getState().reset();
+        vi.stubEnv("VITE_STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED", "1");
+        vi.resetModules();
+      },
+    };
+  }
+
+  it("mounts every clip rather than a window", async () => {
+    const { host, dispose } = await renderUnvirtualizedTimeline();
+    try {
+      expect(host.querySelectorAll("[data-clip]").length).toBe(40);
+    } finally {
+      dispose();
+    }
+  });
+
+  it("keeps clip content mounted across a scroll gesture", async () => {
+    const { host, dispose } = await renderUnvirtualizedTimeline();
+    try {
+      const scroller = host.querySelector<HTMLElement>("[data-timeline-scroll-viewport]");
+      expect(scroller).not.toBeNull();
+      const richBefore = host.querySelectorAll("[data-rich-content]").length;
+      expect(richBefore).toBe(40);
+
+      if (scroller) await dispatchScroll(scroller);
+
+      expect(host.querySelectorAll("[data-rich-content]").length).toBe(richBefore);
+    } finally {
+      dispose();
+    }
+  });
+
+  it("does not swap clip content back in after the gesture settles", async () => {
+    const { host, dispose } = await renderUnvirtualizedTimeline();
+    try {
+      const scroller = host.querySelector<HTMLElement>("[data-timeline-scroll-viewport]");
+      const clip = host.querySelector<HTMLElement>('[data-el-id="clip-0"]');
+      if (scroller) await dispatchScroll(scroller);
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 150));
+      });
+
+      expect(host.querySelector('[data-el-id="clip-0"]')).toBe(clip);
+      expect(host.querySelectorAll("[data-rich-content]").length).toBe(40);
+    } finally {
+      dispose();
+    }
+  });
+
+  it("leaves the scroll position alone, so no snapshot round trip happens", async () => {
+    const { host, dispose } = await renderUnvirtualizedTimeline();
+    try {
+      const scroller = host.querySelector<HTMLElement>("[data-timeline-scroll-viewport]");
+      if (!scroller) throw new Error("Expected a timeline scroll viewport");
+      scroller.scrollTop = 400;
+      await dispatchScroll(scroller);
+
+      expect(scroller.scrollTop).toBe(400);
+    } finally {
+      dispose();
+    }
+  });
+});

package/src/player/components/TimelineCanvas.tsx

@@ -23,8 +23,9 @@ import { TimelineClip } from "./TimelineClip";
 import { TimelineLanes } from "./TimelineLanes";
 import type { TimelineLaneBaseProps } from "./timelineLaneProps";
 import { renderClipChildren } from "./timelineClipChildren";
-import { useTimelineRevealClip } from "./useTimelineRevealClip";
 import type { TimelineLaneGapStrips } from "./useTimelineGapHighlights";
+import { isTimelineClipActive } from "./useTimelineActiveClips";
+import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
 
 interface TimelineCanvasProps extends TimelineLaneBaseProps {
   major: number[];
@@ -62,14 +63,13 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
     onRazorSplitAll,
   } = useTimelineEditContextOptional();
   const beatDragging = usePlayerStore((s) => s.beatDragging);
-  // Scroll a clip into view when the sidebar (asset card) requests a reveal.
-  useTimelineRevealClip(scrollRef);
   const draggedElement = draggedClip?.element ?? null;
+  const draggedElementIdentity = draggedElement ? getTimelineElementIdentity(draggedElement) : null;
   const activeDraggedElement =
-    draggedClip?.started === true && draggedElement
+    draggedClip?.started === true && draggedElement && draggedElementIdentity
       ? getRenderedTimelineElement({
           element: draggedElement,
-          draggedElementId: draggedElement.key ?? draggedElement.id,
+          draggedElementId: draggedElementIdentity,
           previewStart: draggedClip.previewStart,
           previewTrack: draggedClip.previewTrack,
         })
@@ -85,10 +85,10 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
   // the wall together and never deforms. Matches what the commit will do — see
   // timelineMultiDragPreview + commit.
   const multiDragPreview: MultiDragPreviewInput | null =
-    draggedClip?.started === true && draggedElement
+    draggedClip?.started === true && draggedElement && draggedElementIdentity
       ? {
           dragStarted: true,
-          draggedKey: draggedElement.key ?? draggedElement.id,
+          draggedKey: draggedElementIdentity,
           draggedOriginStart: draggedElement.start,
           draggedPreviewStart: draggedClip.previewStart,
           selectedKeys: selectedElementIds,
@@ -126,11 +126,12 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
         theme={props.theme}
         beatAnalysis={props.beatAnalysis}
         contentOrigin={props.contentOrigin}
+        renderTimeRange={props.rowsVirtualized ? props.renderTimeRange : undefined}
       />
 
       {/* Breathing room between the sticky ruler and the first track lane — the
           top half of the CapCut-style padding (see TRACKS_TOP_PAD). */}
-      <div aria-hidden="true" style={{ height: TRACKS_TOP_PAD }} />
+      <div aria-hidden="true" style={{ height: props.rowsVirtualized ? 0 : TRACKS_TOP_PAD }} />
 
       <TimelineLanes
         {...props}
@@ -147,7 +148,7 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
       {/* Breathing room below the last track lane (~1.5 track heights) — a real
           scrollable surface, so a clip can be dragged into the void to create a
           new bottom track comfortably (see TRACKS_BOTTOM_PAD / getTimelineCanvasHeight). */}
-      <div aria-hidden="true" style={{ height: TRACKS_BOTTOM_PAD }} />
+      <div aria-hidden="true" style={{ height: props.rowsVirtualized ? 0 : TRACKS_BOTTOM_PAD }} />
 
       {/* Gap strips — loud dashed fill for the gap(s) a hovered "Close gap(s)"
           menu row would collapse; a quiet tint for every gap on the selected
@@ -157,7 +158,13 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
         const rowIndex = displayTrackOrder.indexOf(strip.track);
         if (rowIndex < 0) return null;
         const loud = strip.kind === "hover";
-        return strip.intervals.map((gap) => (
+        const visibleIntervals = props.rowsVirtualized
+          ? strip.intervals.filter(
+              (gap) =>
+                gap.start < props.renderTimeRange.end && gap.end > props.renderTimeRange.start,
+            )
+          : strip.intervals;
+        return visibleIntervals.map((gap) => (
           <div
             key={`gap-${strip.kind}-${strip.track}-${gap.start}`}
             className="pointer-events-none absolute"
@@ -249,6 +256,7 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
             }
             isHovered={false}
             isDragging={true}
+            isActive={isTimelineClipActive(activeDraggedElement, props.currentTime)}
             hasCustomContent={!!props.renderClipContent}
             capabilities={getTimelineEditCapabilities(activeDraggedElement)}
             theme={props.theme}

package/src/player/components/TimelineClip.tsx

@@ -12,6 +12,7 @@ interface TimelineClipProps {
   isSelected: boolean;
   isHovered: boolean;
   isDragging?: boolean;
+  isActive?: boolean;
   hasCustomContent: boolean;
   capabilities: TimelineEditCapabilities;
   theme?: TimelineTheme;
@@ -35,6 +36,7 @@ export const TimelineClip = memo(function TimelineClip({
   isSelected,
   isHovered,
   isDragging = false,
+  isActive = false,
   hasCustomContent,
   capabilities,
   theme = defaultTimelineTheme,
@@ -88,6 +90,8 @@ export const TimelineClip = memo(function TimelineClip({
       data-clip-start={el.start}
       data-clip-end={el.start + el.duration}
       data-clip-hidden={el.hidden ? "true" : undefined}
+      data-active={isActive ? "" : undefined}
+      tabIndex={-1}
       className={clipClassName}
       style={style}
       title={

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

@@ -33,6 +33,7 @@ function renderDiamonds(onClickKeyframe = vi.fn()) {
         }}
         clipWidthPx={200}
         clipHeightPx={48}
+        clipDuration={10}
         accentColor="#4ba3d2"
         isSelected
         currentPercentage={0}
@@ -46,10 +47,85 @@ function renderDiamonds(onClickKeyframe = vi.fn()) {
 }
 
 describe("TimelineClipDiamonds", () => {
-  // Dense rows narrow the DIAMOND so neighbours stay individually readable, but
-  // the hit box floors at KF_MIN_HIT_W — a gap-sized target gets unusable
-  // (~7px) at the zoom floor.
-  it("narrows dense keyframe visuals while flooring their hit regions", () => {
+  it("marks only the nearest keyframe in a dense lane as under the playhead", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <TimelineDiamondLane
+          keyframesData={{
+            format: "percentage",
+            keyframes: [34.6, 34.8, 35, 35.2, 35.4].map((percentage) => ({
+              percentage,
+              propertyGroup: "position",
+              properties: { x: percentage },
+            })),
+          }}
+          clipWidthPx={4000}
+          clipHeightPx={48}
+          clipDuration={12}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={35.05}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          groupAware
+        />,
+      );
+    });
+
+    expect(host.querySelectorAll('[data-keyframe-at-playhead="true"]')).toHaveLength(1);
+    expect(host.querySelector<HTMLButtonElement>('[data-keyframe-at-playhead="true"]')?.title).toBe(
+      "35%",
+    );
+    act(() => root.unmount());
+  });
+
+  it("distinguishes a playhead match from an explicitly selected keyframe", () => {
+    const selectedKey = timelineKeyframeSelectionKey("clip-1", {
+      percentage: 60,
+      propertyGroup: "position",
+    });
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <TimelineDiamondLane
+          keyframesData={{
+            format: "percentage",
+            keyframes: [
+              { percentage: 40, propertyGroup: "position", properties: { x: 40 } },
+              { percentage: 60, propertyGroup: "position", properties: { x: 60 } },
+            ],
+          }}
+          clipWidthPx={1200}
+          clipHeightPx={48}
+          clipDuration={10}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={40}
+          elementId="clip-1"
+          selectedKeyframes={new Set([selectedKey])}
+          groupAware
+        />,
+      );
+    });
+
+    const playheadDiamond = host.querySelector<HTMLButtonElement>('button[title="40%"]');
+    const selectedDiamond = host.querySelector<HTMLButtonElement>('button[title="60%"]');
+    expect(playheadDiamond?.dataset.keyframeAtPlayhead).toBe("true");
+    expect(playheadDiamond?.dataset.keyframeSelected).toBe("false");
+    expect(playheadDiamond?.querySelector("path:last-child")?.getAttribute("fill")).toBe("#a3a3a3");
+    expect(playheadDiamond?.querySelector('path[stroke="#4ba3d2"]')).not.toBeNull();
+    expect(selectedDiamond?.dataset.keyframeAtPlayhead).toBe("false");
+    expect(selectedDiamond?.dataset.keyframeSelected).toBe("true");
+    expect(selectedDiamond?.querySelector("path:last-child")?.getAttribute("fill")).toBe("#4ba3d2");
+    act(() => root.unmount());
+  });
+
+  it("keeps dense keyframe visuals full-size while bounding their hit regions", () => {
     const host = document.createElement("div");
     document.body.append(host);
     const root = createRoot(host);
@@ -80,7 +156,7 @@ describe("TimelineClipDiamonds", () => {
     expect(diamonds).toHaveLength(3);
     for (const diamond of diamonds) {
       expect(Number.parseFloat(diamond.style.width)).toBeCloseTo(12);
-      expect(Number(diamond.querySelector("svg")?.getAttribute("width"))).toBeCloseTo(8.8);
+      expect(Number(diamond.querySelector("svg")?.getAttribute("width"))).toBe(22);
     }
     act(() => root.unmount());
   });
@@ -123,6 +199,7 @@ describe("TimelineClipDiamonds", () => {
           keyframesData={{ format: "percentage", keyframes: [groupedKeyframe] }}
           clipWidthPx={200}
           clipHeightPx={48}
+          clipDuration={10}
           accentColor="#4ba3d2"
           isSelected
           currentPercentage={-10}
@@ -271,6 +348,7 @@ describe("TimelineClipDiamonds", () => {
           }}
           clipWidthPx={200}
           clipHeightPx={48}
+          clipDuration={10}
           accentColor="#4ba3d2"
           isSelected
           currentPercentage={0}
@@ -356,6 +434,7 @@ describe("TimelineClipDiamonds", () => {
           }}
           clipWidthPx={200}
           clipHeightPx={48}
+          clipDuration={10}
           accentColor="#4ba3d2"
           isSelected
           currentPercentage={0}
@@ -620,6 +699,7 @@ describe("TimelineClipDiamonds", () => {
           }}
           clipWidthPx={200}
           clipHeightPx={48}
+          clipDuration={10}
           accentColor="#4ba3d2"
           isSelected
           currentPercentage={0}