@hyperframes/studio 0.7.92 → 0.7.93

package/src/hooks/useStudioTestHooks.test.tsx

@@ -59,11 +59,15 @@ describe("timeline performance fixture", () => {
     expect(Math.max(...perTrack.values())).toBeLessThanOrEqual(128);
   });
 
-  it.each(PROFILES)("generates an identical 50k %s fixture", (profile) => {
-    const first = createTimelinePerformanceFixture({ elementCount: 50_000, profile });
-    const second = createTimelinePerformanceFixture({ elementCount: 50_000, profile });
-    expect(second).toEqual(first);
-  });
+  it.each(PROFILES)(
+    "generates an identical 50k %s fixture",
+    (profile) => {
+      const first = createTimelinePerformanceFixture({ elementCount: 50_000, profile });
+      const second = createTimelinePerformanceFixture({ elementCount: 50_000, profile });
+      expect(second).toEqual(first);
+    },
+    30_000,
+  );
 
   it.each(PROFILES)("builds the %s 1k scale profile", (profile) => {
     const fixture = createTimelinePerformanceFixture({ elementCount: 1_000, profile });
@@ -90,7 +94,7 @@ describe("timeline performance fixture", () => {
     usePlayerStore.setState({
       isPlaying: true,
       requestedSeekTime: 42,
-      clipRevealRequest: { elementId: "stale", nonce: 7 },
+      timelineFocus: { id: "stale", projectId: null, sessionEpoch: 0, nonce: 7 },
       clipManifest: [],
       lintFindingsByElement: new Map([["stale", { count: 1, messages: ["stale"] }]]),
     });
@@ -108,7 +112,7 @@ describe("timeline performance fixture", () => {
     expect(usePlayerStore.getState()).toMatchObject({
       isPlaying: false,
       requestedSeekTime: null,
-      clipRevealRequest: null,
+      timelineFocus: null,
       clipManifest: null,
       duration: 600,
       timelineReady: true,

package/src/player/components/LayerDisclosureRow.tsx

@@ -44,6 +44,8 @@ export function LayerDisclosureRow({
     >
       <button
         type="button"
+        // ponytail: No focus id here; keyboard routing belongs to the enclosing logical row.
+        tabIndex={-1}
         aria-expanded={isExpanded}
         aria-controls={lanesId}
         aria-label={`${isExpanded ? "Collapse" : "Expand"} ${name} keyframes`}

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

@@ -244,6 +244,25 @@ describe("Timeline provider boundary", () => {
     expect(propertyLane.style.background).toBe("");
     expect(propertyLane.style.border).toBe("");
     expect(propertyLane.style.borderRadius).toBe("");
+    const treegrid = host.querySelector<HTMLElement>('[role="treegrid"]');
+    const semanticRows = treegrid?.querySelectorAll<HTMLElement>('[role="row"]') ?? [];
+    expect(treegrid?.getAttribute("aria-rowcount")).toBe("3");
+    expect([...semanticRows].map((row) => row.getAttribute("aria-rowindex"))).toEqual([
+      "1",
+      "2",
+      "3",
+    ]);
+    expect(semanticRows[0]?.getAttribute("aria-level")).toBe("1");
+    expect(semanticRows[0]?.getAttribute("aria-expanded")).toBe("true");
+    expect(semanticRows[1]?.getAttribute("aria-level")).toBe("2");
+    expect(semanticRows[1]?.textContent).toContain("position");
+    expect(semanticRows[1]?.querySelector('[role="rowheader"]')?.getAttribute("aria-owns")).toBe(
+      headerLane.id,
+    );
+    expect(semanticRows[1]?.querySelector('[role="gridcell"]')?.getAttribute("aria-owns")).toBe(
+      propertyLane.id,
+    );
+    expect(semanticRows[2]?.hasAttribute("aria-expanded")).toBe(false);
     expect(trackHeader.style.width).toBe(`${LABEL_COL_W}px`);
     expect(rulerOrigin.style.width).toBe(`${LABEL_COL_W + GUTTER}px`);
     expect(playhead.style.left).toBe(`${LABEL_COL_W + GUTTER + 1000 - PLAYHEAD_HEAD_W / 2}px`);
@@ -295,12 +314,12 @@ describe("Timeline provider boundary", () => {
     const root = createRoot(host);
     act(() => root.render(React.createElement(Timeline)));
 
-    const list = host.querySelector<HTMLElement>('[role="list"]');
-    const rows = list?.querySelectorAll('[role="listitem"]') ?? [];
+    const treegrid = host.querySelector<HTMLElement>('[role="treegrid"]');
+    const rows = treegrid?.querySelectorAll('[role="row"]') ?? [];
     expect(rows).toHaveLength(12);
-    expect(rows[0]?.getAttribute("aria-posinset")).toBe("1");
-    expect(rows[0]?.getAttribute("aria-setsize")).toBe("12");
-    expect(rows[11]?.getAttribute("aria-posinset")).toBe("12");
+    expect(treegrid?.getAttribute("aria-rowcount")).toBe("12");
+    expect(rows[0]?.getAttribute("aria-rowindex")).toBe("1");
+    expect(rows[11]?.getAttribute("aria-rowindex")).toBe("12");
 
     act(() => root.unmount());
   });

package/src/player/components/Timeline.tsx

@@ -41,10 +41,10 @@ import { useTimelineShiftModifier } from "./useTimelineShiftModifier";
 import { useTimelineTicks } from "./useTimelineTicks";
 import { getTimelineElementIndexes } from "../lib/timelineElementIndexes";
 import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
-import { useTimelineRowVirtualization } from "./useTimelineRowVirtualization";
 import { useTimelineClipRenderWindow } from "./useTimelineClipRenderWindow";
 import { useTimelineActiveClips } from "./useTimelineActiveClips";
 import { useTimelineLaneMoveRefresh } from "./useTimelineLaneMoveRefresh";
+import { useTimelineLogicalFocus } from "./useTimelineLogicalFocus";
 
 export {
   shouldAutoScrollTimeline,
@@ -122,7 +122,6 @@ export const Timeline = memo(function Timeline({
   const timelineReady = usePlayerStore((s) => s.timelineReady);
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const selectedElementIds = usePlayerStore((s) => s.selectedElementIds);
-  const clipRevealRequest = usePlayerStore((s) => s.clipRevealRequest);
   const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment);
   const gsapAnimations = usePlayerStore((s) => s.gsapAnimations);
   const labelMode = useMemo(() => hasKeyframedTimelineClips(gsapAnimations), [gsapAnimations]);
@@ -171,7 +170,6 @@ export const Timeline = memo(function Timeline({
   const ppsRef = useRef(100);
   const durationRef = useRef(effectiveDuration);
   durationRef.current = effectiveDuration;
-  // Declared before the fitPps derivation so the edit-pin wrappers can close over it.
   const fitPpsRef = useRef(100);
   const {
     pinZoomBeforeEdit,
@@ -269,14 +267,36 @@ export const Timeline = memo(function Timeline({
       expandedElements.length,
       displayLayout.totalH,
     ]);
-  const rowWindow = useTimelineRowVirtualization({
+  const { pps, fitPps, displayContentWidth, displayDuration, zoomModeRef, manualZoomPercentRef } =
+    useTimelineGeometry({
+      viewportWidth: viewport.clientWidth,
+      effectiveDuration,
+      zoomMode,
+      manualZoomPercent,
+      ppsRef,
+      fitPpsRef,
+      draggedClip,
+      resizingClip,
+      expandedElements,
+      isDragging,
+      scrollRef,
+      lastScrollLeftRef,
+      contentOrigin,
+    });
+  const timelineFocus = useTimelineLogicalFocus({
     scrollRef,
+    tracks,
+    layout: displayLayout,
+    laneCounts,
+    selectedElementId,
+    selectedElementIds,
+    gsapAnimations,
+    elements: expandedElements,
+    pixelsPerSecond: pps,
+    contentOrigin,
+    allowHorizontal: zoomMode === "manual",
     viewport,
-    rowGeometry: displayLayout.rowGeometry,
     sessionEpoch,
-    elements: expandedElements,
-    selectedElementId,
-    revealElementId: clipRevealRequest?.elementId ?? null,
     draggedRowKey: draggedClip?.started ? draggedClip.previewTrack : undefined,
     resizingElementIds,
     clipContextMenuRowKey: clipContextMenu?.element.track,
@@ -284,7 +304,6 @@ export const Timeline = memo(function Timeline({
     lastScrollLeftRef,
     syncScrollViewport,
   });
-  const { enabled: rowVirtualizationActive, virtualRows, focusedElementId } = rowWindow;
   const selectedKeyframes = usePlayerStore((s) => s.selectedKeyframes);
   const toggleSelectedKeyframe = usePlayerStore((s) => s.toggleSelectedKeyframe);
   const { onClickKeyframe, onSelectSegment, onShiftClickKeyframe, onContextMenuKeyframe } =
@@ -297,22 +316,7 @@ export const Timeline = memo(function Timeline({
       setKfContextMenu,
       toggleSelectedKeyframe,
     });
-  const { pps, fitPps, displayContentWidth, displayDuration, zoomModeRef, manualZoomPercentRef } =
-    useTimelineGeometry({
-      viewportWidth: viewport.clientWidth,
-      effectiveDuration,
-      zoomMode,
-      manualZoomPercent,
-      ppsRef,
-      fitPpsRef,
-      draggedClip,
-      resizingClip,
-      expandedElements,
-      isDragging,
-      scrollRef,
-      lastScrollLeftRef,
-      contentOrigin,
-    });
+
   const { clipIndex, renderTimeRange, pinnedClipIdentities } = useTimelineClipRenderWindow({
     tracks,
     viewport,
@@ -322,7 +326,7 @@ export const Timeline = memo(function Timeline({
     selectedElementId: selectedElementId ?? undefined,
     draggedElementId: draggedClip ? getTimelineElementIdentity(draggedClip.element) : undefined,
     resizingElementIds,
-    revealElementId: clipRevealRequest?.elementId,
+    focusedElementId: timelineFocus.pinnedElementId,
     focusedEaseElementId: focusedEaseSegment?.elementId,
     clipContextMenuElementId: clipContextMenu
       ? getTimelineElementIdentity(clipContextMenu.element)
@@ -330,13 +334,6 @@ export const Timeline = memo(function Timeline({
     keyframeContextMenuElementId: kfContextMenu
       ? getTimelineElementIdentity(kfContextMenu.element)
       : undefined,
-    focusedElementId,
-    scrollRef,
-    elements: expandedElements,
-    rowGeometry: displayLayout.rowGeometry,
-    allowHorizontalReveal: zoomMode === "manual",
-    rowVirtualizationActive,
-    sessionEpoch,
   });
   useTimelineActiveClips({
     scrollRef,
@@ -423,7 +420,7 @@ export const Timeline = memo(function Timeline({
     displayDuration,
     pps,
     timeDisplayMode,
-    rowVirtualizationActive ? renderTimeRange : undefined,
+    timelineFocus.rowVirtualizationActive ? renderTimeRange : undefined,
   );
 
   const getPreviewElement = useCallback(
@@ -469,13 +466,12 @@ export const Timeline = memo(function Timeline({
           recordTimelineScroll(e.currentTarget);
           syncScrollViewport(e.currentTarget, true);
         }}
-        {...rowWindow.timelineFocusProps}
+        {...timelineFocus.timelineFocusProps}
         onDragOver={assetDrop.handleAssetDragOver}
         onDragLeave={assetDrop.handleAssetDragLeave}
         onDrop={assetDrop.handleAssetDrop}
         onPointerDown={(e) => {
-          // Let interactive controls (keyframe nav/toggle, caret, inputs) handle
-          // their own clicks — scrubbing here would preventDefault and eat them.
+          // Interactive controls own their clicks; scrubbing would preventDefault and eat them.
           if (e.target instanceof Element && e.target.closest("button, input, select, a")) return;
           if (splitAllAtPointer(e)) return;
           handlePointerDown(e);
@@ -502,8 +498,10 @@ export const Timeline = memo(function Timeline({
           displayTrackOrder={displayLayout.displayTrackOrder}
           rowHeights={displayLayout.displayRowHeights}
           rowGeometry={displayLayout.rowGeometry}
-          virtualRows={virtualRows}
-          rowsVirtualized={rowVirtualizationActive}
+          virtualRows={timelineFocus.virtualRows}
+          logicalRows={timelineFocus.logicalRows}
+          focusedTargetId={timelineFocus.focusedTargetId}
+          rowsVirtualized={timelineFocus.rowVirtualizationActive}
           clipIndex={clipIndex}
           renderTimeRange={renderTimeRange}
           pinnedClipIdentities={pinnedClipIdentities}
@@ -522,7 +520,9 @@ export const Timeline = memo(function Timeline({
           scrollRef={scrollRef}
           // Windowing drops content to mount a row cheaply; unvirtualized it is pure cost.
           renderClipContent={
-            rowVirtualizationActive && viewport.isScrolling ? undefined : renderClipContent
+            timelineFocus.rowVirtualizationActive && viewport.isScrolling
+              ? undefined
+              : renderClipContent
           }
           renderClipOverlay={renderClipOverlay}
           playheadRef={playheadRef}

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

@@ -132,7 +132,7 @@ describe("Timeline row virtualization", { timeout: 30_000 }, () => {
 
     const { host, root } = await mountTimeline(React.createElement(Timeline, { sessionEpoch: 2 }));
 
-    const rows = host.querySelectorAll('[role="listitem"]');
+    const rows = host.querySelectorAll("[data-timeline-row]");
     expect(rows.length).toBeGreaterThan(0);
     expect(rows.length).toBeLessThanOrEqual(16);
 
@@ -201,16 +201,17 @@ describe("Timeline row virtualization", { timeout: 30_000 }, () => {
 
     await settleUntil(
       () =>
-        (host.querySelector('[role="list"]')?.querySelectorAll('[role="listitem"]').length ?? 0) >
-        0,
+        (host.querySelector('[role="treegrid"]')?.querySelectorAll('[role="row"]').length ?? 0) > 0,
     );
-    const list = host.querySelector<HTMLElement>('[role="list"]');
-    const rows = list?.querySelectorAll('[role="listitem"]') ?? [];
+    const treegrid = host.querySelector<HTMLElement>('[role="treegrid"]');
+    const rows = treegrid?.querySelectorAll('[role="row"]') ?? [];
     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(
+    expect(rows[0]?.getAttribute("aria-rowindex")).toBe("1");
+    expect(treegrid?.getAttribute("aria-rowcount")).toBe("1000");
+    expect(treegrid?.hasAttribute("aria-multiselectable")).toBe(false);
+    expect(treegrid?.querySelectorAll('[data-timeline-focus-id][tabindex="0"]')).toHaveLength(1);
+    expect(treegrid?.parentElement?.style.height).toBe(
       `${getTimelineCanvasHeight(Array.from({ length: 1_000 }, () => TRACK_H))}px`,
     );
 
@@ -226,7 +227,44 @@ describe("Timeline row virtualization", { timeout: 30_000 }, () => {
         scroller.dispatchEvent(new Event("scroll"));
       });
     }
-    expect(list?.querySelector('[data-timeline-row-key="0"]')).not.toBeNull();
+    expect(treegrid?.querySelector('[data-timeline-row-key="0"]')).not.toBeNull();
+    expect(document.activeElement).toBe(focusedControl);
+
+    act(() => root.unmount());
+    usePlayerStore.getState().reset();
+  });
+
+  it("keeps focus pinning active after the scroll viewport remounts", async () => {
+    const [{ Timeline }, { usePlayerStore }] = await Promise.all([
+      import("./Timeline"),
+      import("../store/playerStore"),
+    ]);
+    usePlayerStore.setState({
+      duration: 60,
+      timelineReady: true,
+      elements: clipsByTrack(1_000),
+    });
+
+    const { host, root } = await mountTimeline(React.createElement(Timeline, { sessionEpoch: 9 }));
+    await settleUntil(() => host.querySelectorAll("[data-timeline-row]").length > 0);
+    const firstScroller = host.querySelector<HTMLElement>("[data-timeline-scroll-viewport]");
+
+    await act(async () => usePlayerStore.setState({ timelineReady: false }));
+    expect(host.querySelector("[data-timeline-scroll-viewport]")).toBeNull();
+    await act(async () => usePlayerStore.setState({ timelineReady: true }));
+    await settleUntil(() => host.querySelectorAll("[data-timeline-row]").length > 0);
+
+    const scroller = host.querySelector<HTMLElement>("[data-timeline-scroll-viewport]");
+    const firstRow = host.querySelector<HTMLElement>('[data-timeline-row-key="0"]');
+    const focusedControl = firstRow?.querySelector<HTMLButtonElement>("button");
+    expect(scroller).not.toBe(firstScroller);
+    expect(focusedControl).not.toBeNull();
+    act(() => focusedControl?.focus());
+    if (scroller) {
+      scroller.scrollTop = 500 * 48;
+      await dispatchScroll(scroller);
+    }
+    expect(host.querySelector('[data-timeline-row-key="0"]')).not.toBeNull();
     expect(document.activeElement).toBe(focusedControl);
 
     act(() => root.unmount());
@@ -242,6 +280,8 @@ describe("Timeline row virtualization", { timeout: 30_000 }, () => {
     usePlayerStore.setState({
       duration: 1_000,
       timelineReady: true,
+      timelineProjectId: "project-a",
+      timelineSessionEpoch: 4,
       zoomMode: "manual",
       manualZoomPercent: 2_000,
       selectedElementId: "clip-490",
@@ -286,10 +326,13 @@ describe("Timeline row virtualization", { timeout: 30_000 }, () => {
     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"));
+    const { timelineClipFocusId } = await import("./timelineNavigationIdentity");
+    await act(async () =>
+      usePlayerStore.getState().requestTimelineFocus(timelineClipFocusId("clip-300")),
+    );
     await advanceFrame();
     await act(async () => {});
-    expect(usePlayerStore.getState().clipRevealRequest).toBeNull();
+    expect(usePlayerStore.getState().timelineFocus?.id).toBe(timelineClipFocusId("clip-300"));
     const focusedClip = host.querySelector('[data-el-id="clip-300"]');
     expect(document.activeElement).toBe(focusedClip);
     await advanceFrame();

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

@@ -36,6 +36,7 @@ function renderClip({
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
+  const onClick = vi.fn();
 
   act(() => {
     root.render(
@@ -50,7 +51,7 @@ function renderClip({
         isComposition={false}
         onHoverStart={vi.fn()}
         onHoverEnd={vi.fn()}
-        onClick={vi.fn()}
+        onClick={onClick}
         onDoubleClick={vi.fn()}
       >
         <div data-custom-content="true" />
@@ -58,7 +59,7 @@ function renderClip({
     );
   });
 
-  return { host, root };
+  return { host, onClick, root };
 }
 
 describe("TimelineClip", () => {
@@ -113,4 +114,18 @@ describe("TimelineClip", () => {
 
     act(() => root.unmount());
   });
+
+  it("is a roving native button with explicit selection semantics", () => {
+    const { host, onClick, root } = renderClip({
+      element: { id: "hero", label: "Hero", tag: "div", start: 1, duration: 2, track: 0 },
+      isSelected: true,
+    });
+    const clip = host.querySelector<HTMLButtonElement>(".timeline-clip")!;
+    expect(clip.type).toBe("button");
+    expect(clip.tabIndex).toBe(-1);
+    expect(clip.getAttribute("aria-pressed")).toBe("true");
+    act(() => clip.click());
+    expect(onClick).toHaveBeenCalledOnce();
+    act(() => root.unmount());
+  });
 });

package/src/player/components/TimelineClip.tsx

@@ -3,6 +3,7 @@ import type { TimelineElement } from "../store/playerStore";
 import { defaultTimelineTheme, getClipHandleOpacity, type TimelineTheme } from "./timelineTheme";
 import type { TimelineEditCapabilities } from "./timelineEditing";
 import { isAudioTimelineElement } from "../../utils/timelineInspector";
+import { timelineClipFocusId } from "./timelineNavigationIdentity";
 
 interface TimelineClipProps {
   el: TimelineElement;
@@ -18,6 +19,7 @@ interface TimelineClipProps {
   capabilities: TimelineEditCapabilities;
   theme?: TimelineTheme;
   isComposition: boolean;
+  tabIndex?: 0 | -1;
   onHoverStart: () => void;
   onHoverEnd: () => void;
   onPointerDown?: (e: React.PointerEvent) => void;
@@ -43,6 +45,7 @@ export const TimelineClip = memo(function TimelineClip({
   capabilities,
   theme = defaultTimelineTheme,
   isComposition,
+  tabIndex = -1,
   onHoverStart,
   onHoverEnd,
   onPointerDown,
@@ -82,19 +85,28 @@ export const TimelineClip = memo(function TimelineClip({
     zIndex: isDragging ? 20 : isSelected ? 10 : isHovered ? 5 : 1,
     // Regular cursor over clips (CapCut-style, user preference) — no grab hand.
     cursor: "default",
+    appearance: "none",
+    color: "inherit",
+    font: "inherit",
+    padding: 0,
+    textAlign: "left",
     transform: isDragging ? "translateY(-1px)" : undefined,
   };
 
   return (
-    <div
+    <button
+      type="button"
       data-clip={isGestureActor ? undefined : "true"}
       data-el-id={isGestureActor ? undefined : (el.key ?? el.id)}
+      data-timeline-focus-id={isGestureActor ? undefined : timelineClipFocusId(el.key ?? el.id)}
       data-clip-start={el.start}
       data-clip-end={el.start + el.duration}
       data-clip-hidden={el.hidden ? "true" : undefined}
       data-active={isActive ? "" : undefined}
       aria-hidden={isGestureActor ? "true" : undefined}
-      tabIndex={isGestureActor ? undefined : -1}
+      tabIndex={isGestureActor ? undefined : tabIndex}
+      aria-label={`${displayLabel}, ${startLabel} to ${endLabel} seconds`}
+      aria-pressed={isGestureActor ? undefined : isSelected}
       className={clipClassName}
       style={style}
       title={
@@ -176,6 +188,6 @@ export const TimelineClip = memo(function TimelineClip({
         </span>
       )}
       {children}
-    </div>
+    </button>
   );
 });

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

@@ -46,7 +46,7 @@ function createTimelineHost() {
   return host;
 }
 
-function renderDiamonds(onClickKeyframe = vi.fn()) {
+function renderDiamonds(onClickKeyframe = vi.fn(), onShiftClickKeyframe = vi.fn()) {
   const host = createTimelineHost();
   const root = createRoot(host);
   act(() => {
@@ -61,19 +61,60 @@ function renderDiamonds(onClickKeyframe = vi.fn()) {
         }}
         clipWidthPx={200}
         clipHeightPx={48}
-        clipDuration={10}
         accentColor="#4ba3d2"
         isSelected
         currentPercentage={0}
         elementId="clip-1"
+        clipStart={10}
+        clipDuration={10}
         selectedKeyframes={new Set()}
         onClickKeyframe={onClickKeyframe}
+        onShiftClickKeyframe={onShiftClickKeyframe}
       />,
     );
   });
-  return { host, root, onClickKeyframe };
+  return { host, root, onClickKeyframe, onShiftClickKeyframe };
 }
 
+it("pins authored keyframes outside the clip to an inspectable boundary marker", () => {
+  const host = createTimelineHost();
+  const root = createRoot(host);
+  act(() => {
+    root.render(
+      <TimelineDiamondLane
+        keyframesData={{
+          format: "percentage",
+          keyframes: [
+            { percentage: -40, properties: { x: 0 }, propertyGroup: "position" },
+            { percentage: -20, properties: { x: 25 }, propertyGroup: "position" },
+            { percentage: 5, properties: { x: 50 }, propertyGroup: "position" },
+            { percentage: 120, properties: { x: 100 }, propertyGroup: "position" },
+          ],
+        }}
+        clipWidthPx={200}
+        clipHeightPx={48}
+        accentColor="#4ba3d2"
+        isSelected
+        currentPercentage={5}
+        elementId="clip-1"
+        clipStart={10}
+        clipDuration={10}
+        selectedKeyframes={new Set()}
+      />,
+    );
+  });
+
+  const before = host.querySelectorAll<HTMLButtonElement>('[data-keyframe-outside-clip="before"]');
+  const after = host.querySelector<HTMLButtonElement>('[data-keyframe-outside-clip="after"]');
+  expect(Array.from(before, (marker) => marker.style.left)).toEqual(["-35px", "-23px"]);
+  expect(before[0]?.getAttribute("aria-label")).toBe("position keyframe at 6s (before clip)");
+  expect(after?.style.left).toBe("201px");
+  expect(after?.getAttribute("aria-label")).toBe("position keyframe at 22s (after clip)");
+  expect(host.querySelectorAll('button[aria-label*="keyframe at"]')).toHaveLength(4);
+
+  act(() => root.unmount());
+});
+
 function renderRetimeLane(
   onMoveKeyframe = vi.fn().mockResolvedValue(true),
   strict = false,
@@ -261,6 +302,33 @@ describe("TimelineClipDiamonds", () => {
     act(() => root.unmount());
   });
 
+  it("gives keyframes time-based names and native keyboard selection semantics", () => {
+    const { host, root, onClickKeyframe } = renderDiamonds();
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]')!;
+    expect(diamond.getAttribute("aria-label")).toBe("Motion keyframe at 15s");
+    expect(diamond.getAttribute("aria-pressed")).toBe("false");
+    act(() => diamond.dispatchEvent(new MouseEvent("click", { bubbles: true, detail: 0 })));
+    expect(onClickKeyframe).toHaveBeenCalledWith(
+      "clip-1",
+      expect.objectContaining({ percentage: 50 }),
+    );
+    act(() => root.unmount());
+  });
+
+  it("uses Shift+Space's native click for additive keyframe selection", () => {
+    const { host, root, onClickKeyframe, onShiftClickKeyframe } = renderDiamonds();
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]')!;
+    act(() =>
+      diamond.dispatchEvent(new MouseEvent("click", { bubbles: true, detail: 0, shiftKey: true })),
+    );
+    expect(onShiftClickKeyframe).toHaveBeenCalledWith(
+      "clip-1",
+      expect.objectContaining({ percentage: 50 }),
+    );
+    expect(onClickKeyframe).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
   it("publishes retime previews after StrictMode effect replay", () => {
     const { diamond, host, root } = renderRetimeLane(undefined, true);
     const initialLeft = diamond.style.left;
@@ -1108,10 +1176,9 @@ describe("TimelineClipDiamonds", () => {
   // Regression: onClickKeyframe's state updates can re-render the diamond
   // button out from under the gesture before the browser auto-synthesizes the
   // "click" event that follows a button's pointerdown+pointerup. That orphaned
-  // click then bubbles to the ancestor clip's onClick, which toggles selection
-  // off whenever the clip is already selected — the state a diamond click
-  // always happens in — so every keyframe click immediately deselected its
-  // own clip. suppressClickRef lets that ancestor ignore the stray click.
+  // click then bubbles to the ancestor clip's onClick. That stray click can
+  // replace keyframe focus or collapse a marquee selection, so suppressClickRef
+  // lets the ancestor ignore it.
   it("arms suppressClickRef synchronously on a keyframe click", () => {
     const suppressClickRef = { current: false };
     const host = createTimelineHost();
@@ -1150,6 +1217,7 @@ describe("TimelineClipDiamonds", () => {
   const renderSegmentLane = (lastAmbiguous: boolean, clipWidthPx = 200) => {
     const host = createTimelineHost();
     const root = createRoot(host);
+    const onSelectSegment = vi.fn();
     const kf = (percentage: number, extra: Record<string, unknown> = {}) => ({
       percentage,
       tweenPercentage: percentage,
@@ -1182,13 +1250,15 @@ describe("TimelineClipDiamonds", () => {
           isSelected
           currentPercentage={0}
           elementId="clip-1"
+          clipStart={10}
+          clipDuration={10}
           selectedKeyframes={new Set()}
-          onSelectSegment={vi.fn()}
+          onSelectSegment={onSelectSegment}
           groupAware
         />,
       );
     });
-    return { host, root };
+    return { host, onSelectSegment, root };
   };
 
   it("shows the inline ease button on a colliding merged segment (bulk edit)", () => {
@@ -1201,8 +1271,23 @@ describe("TimelineClipDiamonds", () => {
   });
 
   it("shows the inline ease button on single-animation merged segments", () => {
-    const { host, root } = renderSegmentLane(false);
+    const { host, onSelectSegment, root } = renderSegmentLane(false);
     expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(2);
+    const ease = host.querySelector<HTMLButtonElement>("[data-keyframe-ease-button]")!;
+    expect(ease.getAttribute("aria-label")).toBe("Edit none easing after 10s");
+    expect(ease.classList.contains("opacity-0")).toBe(true);
+    act(() => ease.click());
+    expect(onSelectSegment).toHaveBeenCalledOnce();
+    expect(usePlayerStore.getState().requestedSeekTime).toBeNull();
+    act(() => root.unmount());
+  });
+
+  it("ends connectors at the diamond boundaries", () => {
+    const { host, root } = renderSegmentLane(false);
+    const connectors = host.querySelectorAll<HTMLElement>("[data-keyframe-connector]");
+
+    expect(Array.from(connectors, (connector) => connector.style.left)).toEqual(["11px", "111px"]);
+    expect(Array.from(connectors, (connector) => connector.style.width)).toEqual(["78px", "78px"]);
     act(() => root.unmount());
   });