@hyperframes/studio 0.7.90 → 0.7.93

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

@@ -0,0 +1,161 @@
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { TimelineElement } from "../store/playerStore";
+import { usePlayerStore } from "../store/playerStore";
+import { type KeyframeDiamondContextMenuState } from "./KeyframeDiamondContextMenu";
+import { TimelineOverlays, resolveTimelineContextElement } from "./TimelineOverlays";
+import { defaultTimelineTheme } from "./timelineTheme";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const roots: Root[] = [];
+afterEach(() => {
+  for (const root of roots.splice(0)) act(() => root.unmount());
+  document.body.innerHTML = "";
+  usePlayerStore.setState({ selectedElementId: null, timelineSessionEpoch: 0 });
+});
+
+const captured: TimelineElement = {
+  id: "child",
+  key: "parent::child",
+  tag: "div",
+  start: 1,
+  duration: 2,
+  track: 3,
+};
+
+describe("resolveTimelineContextElement", () => {
+  it("returns the current expanded model instead of the captured snapshot", () => {
+    const current = { ...captured, start: 4, track: 7 };
+
+    expect(
+      resolveTimelineContextElement({
+        capturedElement: captured,
+        targetSessionEpoch: 2,
+        sessionEpoch: 2,
+        selectedElementId: "parent::child",
+        elements: [current],
+      }),
+    ).toBe(current);
+  });
+
+  it("resolves synthetic expanded children that are absent from raw store elements", () => {
+    expect(
+      resolveTimelineContextElement({
+        capturedElement: captured,
+        targetSessionEpoch: 2,
+        sessionEpoch: 2,
+        selectedElementId: "parent::child",
+        elements: [captured],
+      }),
+    ).toBe(captured);
+  });
+
+  it("rejects stale sessions, changed selection, and removed elements", () => {
+    const input = {
+      capturedElement: captured,
+      targetSessionEpoch: 2,
+      sessionEpoch: 2,
+      selectedElementId: "parent::child",
+      elements: [captured],
+    };
+
+    expect(resolveTimelineContextElement({ ...input, sessionEpoch: 3 })).toBeNull();
+    expect(resolveTimelineContextElement({ ...input, selectedElementId: "other" })).toBeNull();
+    expect(resolveTimelineContextElement({ ...input, elements: [] })).toBeNull();
+  });
+});
+
+function renderKeyframeOverlay(options: {
+  capturedElement: TimelineElement;
+  currentElement: TimelineElement;
+  setKfContextMenu?: ReturnType<typeof vi.fn>;
+  onDeleteAllKeyframes?: ReturnType<typeof vi.fn>;
+}) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  roots.push(root);
+  const elements = [options.currentElement];
+  const setKfContextMenu = options.setKfContextMenu ?? vi.fn();
+  const onDeleteAllKeyframes = options.onDeleteAllKeyframes ?? vi.fn();
+  const menu: KeyframeDiamondContextMenuState = {
+    x: 10,
+    y: 10,
+    sessionEpoch: 2,
+    element: options.capturedElement,
+    elementId: options.capturedElement.key ?? options.capturedElement.id,
+    percentage: 50,
+    animationId: "child-position",
+  };
+
+  act(() => {
+    usePlayerStore.setState({
+      selectedElementId: options.capturedElement.key ?? options.capturedElement.id,
+      timelineSessionEpoch: 2,
+    });
+    root.render(
+      createElement(TimelineOverlays, {
+        elements,
+        elementsRef: { current: elements },
+        theme: defaultTimelineTheme,
+        showShortcutHint: false,
+        showPopover: false,
+        rangeSelection: null,
+        setShowPopover: vi.fn(),
+        setRangeSelection: vi.fn(),
+        kfContextMenu: menu,
+        setKfContextMenu,
+        onDeleteKeyframe: vi.fn(),
+        onDeleteAllKeyframes,
+        onMoveKeyframeToPlayhead: vi.fn(),
+        clipContextMenu: null,
+        setClipContextMenu: vi.fn(),
+        currentTime: 0,
+        onSplitElement: vi.fn(),
+        pinZoomBeforeEdit: vi.fn(),
+        onDeleteElement: vi.fn(),
+        gapContextMenu: null,
+        onDismissGapContextMenu: vi.fn(),
+        onCloseTrackGap: vi.fn(),
+        onCloseAllTrackGaps: vi.fn(),
+        onHoverGapAction: vi.fn(),
+      }),
+    );
+  });
+  return { setKfContextMenu, onDeleteAllKeyframes };
+}
+
+describe("TimelineOverlays context lifecycle", () => {
+  it("dismisses a keyframe menu when its selected target becomes stale", () => {
+    const setKfContextMenu = vi.fn();
+    renderKeyframeOverlay({
+      capturedElement: captured,
+      currentElement: captured,
+      setKfContextMenu,
+    });
+
+    act(() => usePlayerStore.setState({ selectedElementId: "other" }));
+
+    expect(setKfContextMenu).toHaveBeenCalledExactlyOnceWith(null);
+  });
+
+  it("dispatches a menu action with the current model element", () => {
+    const current = { ...captured, start: 4, track: 7 };
+    const onDeleteAllKeyframes = vi.fn();
+    renderKeyframeOverlay({
+      capturedElement: captured,
+      currentElement: current,
+      onDeleteAllKeyframes,
+    });
+    const button = Array.from(document.body.querySelectorAll("button")).find(
+      (candidate) => candidate.textContent === "Delete All Keyframes",
+    );
+
+    act(() => button?.click());
+
+    expect(onDeleteAllKeyframes).toHaveBeenCalledExactlyOnceWith(current, "child-position");
+  });
+});

package/src/player/components/TimelineOverlays.tsx

@@ -1,4 +1,6 @@
+import { useEffect, type MutableRefObject } from "react";
 import type { TimelineElement } from "../store/playerStore";
+import { usePlayerStore } from "../store/playerStore";
 import type { TimelineTheme } from "./timelineTheme";
 import type { TimelineRangeSelection } from "./timelineEditing";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
@@ -11,10 +13,11 @@ import { ClipContextMenu } from "./ClipContextMenu";
 import { TrackGapContextMenu } from "./TrackGapContextMenu";
 import { TimelineShortcutHint } from "./TimelineShortcutHint";
 
-interface ClipContextMenuState {
+export interface ClipContextMenuState {
   x: number;
   y: number;
   element: TimelineElement;
+  sessionEpoch: number;
 }
 
 /** Resolved model for the empty-lane-space (track gap) context menu. */
@@ -28,6 +31,8 @@ interface TrackGapContextMenuState {
 }
 
 interface TimelineOverlaysProps {
+  elements: readonly TimelineElement[];
+  elementsRef: MutableRefObject<readonly TimelineElement[]>;
   theme: TimelineTheme;
   showShortcutHint: boolean;
   showPopover: boolean;
@@ -52,10 +57,49 @@ interface TimelineOverlaysProps {
   onHoverGapAction: (action: "close-gap" | "close-all" | null) => void;
 }
 
+interface TimelineContextTargetInput {
+  capturedElement: TimelineElement;
+  targetSessionEpoch: number | undefined;
+  sessionEpoch: number;
+  selectedElementId: string | null;
+  elements: readonly TimelineElement[];
+}
+
+/** The captured project session and current selection jointly own a context target. */
+export function resolveTimelineContextElement({
+  capturedElement,
+  targetSessionEpoch,
+  sessionEpoch,
+  selectedElementId,
+  elements,
+}: TimelineContextTargetInput): TimelineElement | null {
+  const identity = capturedElement.key ?? capturedElement.id;
+  if (targetSessionEpoch !== sessionEpoch) return null;
+  if (selectedElementId !== identity) return null;
+  return elements.find((element) => (element.key ?? element.id) === identity) ?? null;
+}
+
+function readTimelineContextElement(
+  capturedElement: TimelineElement,
+  targetSessionEpoch: number | undefined,
+  elements: readonly TimelineElement[],
+): TimelineElement | null {
+  const state = usePlayerStore.getState();
+  return resolveTimelineContextElement({
+    capturedElement,
+    targetSessionEpoch,
+    sessionEpoch: state.timelineSessionEpoch,
+    selectedElementId: state.selectedElementId,
+    elements,
+  });
+}
+
 // The timeline's floating overlays, rendered as siblings above the scroll area:
 // the shortcut hint, the range-edit popover, the keyframe-diamond context menu,
 // and the clip context menu.
 export function TimelineOverlays({
+  elements,
+  elementsRef,
   theme,
   showShortcutHint,
   showPopover,
@@ -79,6 +123,39 @@ export function TimelineOverlays({
   onCloseAllTrackGaps,
   onHoverGapAction,
 }: TimelineOverlaysProps) {
+  const selectedElementId = usePlayerStore((state) => state.selectedElementId);
+  const sessionEpoch = usePlayerStore((state) => state.timelineSessionEpoch);
+  const kfTargetSessionEpoch = kfContextMenu?.sessionEpoch;
+  const clipTargetSessionEpoch = clipContextMenu?.sessionEpoch;
+  const keyframeElement = kfContextMenu
+    ? resolveTimelineContextElement({
+        capturedElement: kfContextMenu.element,
+        targetSessionEpoch: kfTargetSessionEpoch,
+        sessionEpoch,
+        selectedElementId,
+        elements,
+      })
+    : null;
+  const clipElement = clipContextMenu
+    ? resolveTimelineContextElement({
+        capturedElement: clipContextMenu.element,
+        targetSessionEpoch: clipTargetSessionEpoch,
+        sessionEpoch,
+        selectedElementId,
+        elements,
+      })
+    : null;
+  const readCurrentElement = (element: TimelineElement, targetSessionEpoch: number | undefined) =>
+    readTimelineContextElement(element, targetSessionEpoch, elementsRef.current);
+
+  useEffect(() => {
+    if (kfContextMenu && !keyframeElement) setKfContextMenu(null);
+  }, [keyframeElement, kfContextMenu, setKfContextMenu]);
+
+  useEffect(() => {
+    if (clipContextMenu && !clipElement) setClipContextMenu(null);
+  }, [clipContextMenu, clipElement, setClipContextMenu]);
+
   return (
     <>
       {showShortcutHint && !showPopover && !rangeSelection && (
@@ -98,29 +175,45 @@ export function TimelineOverlays({
         />
       )}
 
-      {kfContextMenu && (
+      {kfContextMenu && keyframeElement && (
         <KeyframeDiamondContextMenu
-          state={kfContextMenu}
+          state={{ ...kfContextMenu, element: keyframeElement }}
           onClose={() => setKfContextMenu(null)}
-          onDelete={(elId, keyframe) => onDeleteKeyframe?.(elId, keyframe)}
-          onDeleteAll={(element) => onDeleteAllKeyframes?.(element)}
+          onDelete={(...args) => {
+            if (!readCurrentElement(keyframeElement, kfTargetSessionEpoch)) return;
+            onDeleteKeyframe?.(...args);
+          }}
+          onDeleteAll={(_element, animationId) => {
+            const element = readCurrentElement(keyframeElement, kfTargetSessionEpoch);
+            if (element) onDeleteAllKeyframes?.(element, animationId);
+          }}
           onMoveToPlayhead={
-            onMoveKeyframeToPlayhead ? (...args) => onMoveKeyframeToPlayhead(...args) : undefined
+            onMoveKeyframeToPlayhead
+              ? (_element, ...args) => {
+                  const element = readCurrentElement(keyframeElement, kfTargetSessionEpoch);
+                  if (element) onMoveKeyframeToPlayhead(element, ...args);
+                }
+              : undefined
           }
         />
       )}
 
-      {clipContextMenu && (
+      {clipContextMenu && clipElement && (
         <ClipContextMenu
           x={clipContextMenu.x}
           y={clipContextMenu.y}
-          element={clipContextMenu.element}
+          element={clipElement}
           currentTime={currentTime}
           onClose={() => setClipContextMenu(null)}
-          onSplit={(el, time) => onSplitElement?.(el, time)}
-          onDelete={(el) => {
+          onSplit={(_element, time) => {
+            const element = readCurrentElement(clipElement, clipTargetSessionEpoch);
+            if (element) onSplitElement?.(element, time);
+          }}
+          onDelete={() => {
+            const element = readCurrentElement(clipElement, clipTargetSessionEpoch);
+            if (!element) return;
             pinZoomBeforeEdit();
-            onDeleteElement?.(el);
+            onDeleteElement?.(element);
           }}
         />
       )}

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

@@ -70,6 +70,7 @@ function renderPropertyLanes(overrides: Partial<TimelinePropertyLanesProps> = {}
   act(() => {
     root.render(
       <TimelinePropertyLanes
+        id="timeline-property-lanes-test"
         animations={[]}
         clipStart={0}
         clipDuration={1}
@@ -367,6 +368,7 @@ describe("TimelinePropertyLanes", () => {
     act(() => {
       root.render(
         <TimelinePropertyLanes
+          id="timeline-property-lanes-selected-test"
           animations={animations}
           clipStart={0}
           clipDuration={1}
@@ -417,6 +419,7 @@ describe("TimelinePropertyLanes", () => {
     act(() => {
       root.render(
         <TimelinePropertyLanes
+          id="timeline-property-lanes-unselected-test"
           animations={animations}
           clipStart={0}
           clipDuration={1}
@@ -433,7 +436,7 @@ describe("TimelinePropertyLanes", () => {
     });
     const unselectedSegments = laneEaseSegments(host, "position");
     expect(unselectedSegments).toHaveLength(2);
-    expect(revealEaseButton(unselectedSegments[0]!)).not.toBeNull();
+    expect(laneEaseButtons(host, "position")).toHaveLength(2);
     act(() => root.unmount());
   });
 
@@ -461,13 +464,14 @@ describe("TimelinePropertyLanes", () => {
     expect(new Set(paths).size).toBe(3);
     // Uniqueness alone passes even when the curves are swapped between segments.
     // Each segment is labelled with the ease it draws, so pin the ORDER: a
-    // segment carries the ease of the keyframe it arrives at.
+    // segment carries the ease of the keyframe it arrives at. The trailing time
+    // is what separates two segments that share an ease name in the same lane.
     expect(
       segments.map((segment) => revealEaseButton(segment)?.getAttribute("aria-label")),
     ).toEqual([
-      "Edit none easing",
-      "Edit power2.out easing",
-      "Edit custom(M0,0 C0.1,0.2 0.3,0.9 1,1) easing",
+      "Edit none easing after 0s",
+      "Edit power2.out easing after 0.33s",
+      "Edit custom(M0,0 C0.1,0.2 0.3,0.9 1,1) easing after 0.66s",
     ]);
     act(() => root.unmount());
   });

package/src/player/components/TimelinePropertyLanes.tsx

@@ -9,6 +9,7 @@ import { synthesizeFlatTweenKeyframes } from "../../hooks/gsapTweenSynth";
 import { TimelineDiamondLane, type TimelineDiamondKeyframe } from "./TimelineClipDiamonds";
 import { LANE_H, getTimelineLaneTop } from "./timelineLayout";
 import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity";
+import { timelineLogicalRowCellId, timelinePropertyRowId } from "./timelineNavigationIdentity";
 
 export interface TimelinePropertyLanesProps {
   /**
@@ -16,7 +17,7 @@ export interface TimelinePropertyLanesProps {
    * `aria-controls` at the lanes a sighted user sees it reveal. Minted by
    * TimelineLanes, which owns both this subtree and the caret's.
    */
-  id?: string;
+  id: string;
   animations: readonly GsapAnimation[];
   clipStart: number;
   clipDuration: number;
@@ -27,6 +28,7 @@ export interface TimelinePropertyLanesProps {
   currentPercentage: number;
   elementId: string;
   selectedKeyframes: ReadonlySet<string>;
+  rovingTargetId?: string | null;
   onSelectSegment?: (target: TimelineKeyframeTarget) => void;
   onClickKeyframe?: (target: TimelineKeyframeTarget) => void;
   onShiftClickKeyframe?: (target: TimelineKeyframeTarget) => void;
@@ -187,6 +189,7 @@ export function TimelinePropertyLanes({
   currentPercentage,
   elementId,
   selectedKeyframes,
+  rovingTargetId = null,
   onSelectSegment,
   onClickKeyframe,
   onShiftClickKeyframe,
@@ -223,9 +226,11 @@ export function TimelinePropertyLanes({
       {laneData.map(({ group, keyframesData }, laneIndex) => (
         <div
           key={group}
+          id={timelineLogicalRowCellId(id, timelinePropertyRowId(elementId, group), "content")}
           role="group"
           aria-label={`${group} keyframes`}
           data-property-group={group}
+          data-timeline-element-id={elementId}
           data-timeline-property-lane=""
           data-timeline-lane-top={getTimelineLaneTop(laneIndex)}
           className="absolute"
@@ -240,12 +245,14 @@ export function TimelinePropertyLanes({
             keyframesData={keyframesData}
             clipWidthPx={clipWidthPx}
             clipHeightPx={LANE_H}
-            clipDuration={clipDuration}
             accentColor={accentColor}
             isSelected={isSelected}
             currentPercentage={currentPercentage}
             elementId={elementId}
+            clipStart={clipStart}
+            clipDuration={clipDuration}
             selectedKeyframes={selectedKeyframes}
+            rovingTargetId={rovingTargetId}
             onSelectSegment={onSelectSegment}
             onClickKeyframe={onClickKeyframe}
             onShiftClickKeyframe={onShiftClickKeyframe}

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

@@ -379,6 +379,7 @@ describe("TimelineTrackHeader", () => {
       act(() => {
         lanesRoot.render(
           <TimelinePropertyLanes
+            id="timeline-property-lanes-alignment-test"
             animations={animations}
             clipStart={0}
             clipDuration={2}

package/src/player/components/TimelineTrackHeader.tsx

@@ -16,6 +16,7 @@ import {
 } from "./trackHeaderLaneState";
 import { valueReadout } from "./trackHeaderLaneValues";
 import { trackDisplaySuffix } from "./timelineTrackDisplay";
+import { timelineLogicalRowCellId, timelinePropertyRowId } from "./timelineNavigationIdentity";
 
 interface TimelineTrackHeaderProps {
   /** The track's real key: a FRACTIONAL z-order sort value. Routes callbacks;
@@ -41,6 +42,7 @@ interface TimelineTrackHeaderProps {
   currentTime: number;
   isTrackHidden: boolean;
   isAudioTrack: boolean;
+  rovingTargetId?: string | null;
   theme: TimelineTheme;
   onToggleClipExpanded: () => void;
   onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"];
@@ -191,6 +193,7 @@ function PropertyGroupNavigation({
 }
 
 function PropertyGroupHeaderRow({
+  lanesId,
   lane,
   laneIndex,
   isLastLane,
@@ -201,7 +204,9 @@ function PropertyGroupHeaderRow({
   columnWidth,
   onTogglePropertyGroupKeyframe,
   onSeek,
+  rovingTargetId = null,
 }: {
+  lanesId: string;
   lane: TimelinePropertyLane;
   laneIndex: number;
   isLastLane: boolean;
@@ -212,7 +217,9 @@ function PropertyGroupHeaderRow({
   columnWidth: number;
   onTogglePropertyGroupKeyframe?: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
   onSeek?: (time: number) => void;
+  rovingTargetId: string | null;
 }) {
+  const elementId = expandedElement.key ?? expandedElement.id;
   const { navigation, values, label, toggleTarget } = resolveLaneHeaderState(
     lane,
     currentTime,
@@ -221,6 +228,10 @@ function PropertyGroupHeaderRow({
 
   return (
     <div
+      id={timelineLogicalRowCellId(lanesId, timelinePropertyRowId(elementId, lane.group), "header")}
+      data-timeline-focus-id={timelinePropertyRowId(elementId, lane.group)}
+      data-timeline-element-id={elementId}
+      tabIndex={rovingTargetId === timelinePropertyRowId(elementId, lane.group) ? 0 : -1}
       data-property-group={lane.group}
       data-timeline-lane-top={getTimelineLaneTop(laneIndex)}
       className="absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-white/65"
@@ -298,6 +309,7 @@ export function TimelineTrackHeader({
   onToggleTrackHidden,
   onTogglePropertyGroupKeyframe,
   onSeek,
+  rovingTargetId = null,
 }: TimelineTrackHeaderProps) {
   const clipPercentage = keyframeClip
     ? ((currentTime - keyframeClip.start) / keyframeClip.duration) * 100
@@ -314,6 +326,8 @@ export function TimelineTrackHeader({
 
   return (
     <div
+      role="rowheader"
+      aria-colindex={1}
       className={`sticky left-0 z-[12] shrink-0 ${
         !isKeyframeLayer
           ? showTrackLabel
@@ -374,6 +388,7 @@ export function TimelineTrackHeader({
             lanes.map((lane, laneIndex) => (
               <PropertyGroupHeaderRow
                 key={lane.group}
+                lanesId={lanesId}
                 lane={lane}
                 laneIndex={laneIndex}
                 isLastLane={laneIndex === lanes.length - 1}
@@ -384,6 +399,7 @@ export function TimelineTrackHeader({
                 columnWidth={showTrackLabel ? LABEL_COL_W : contentOrigin}
                 onTogglePropertyGroupKeyframe={onTogglePropertyGroupKeyframe}
                 onSeek={onSeek}
+                rovingTargetId={rovingTargetId}
               />
             ))}
         </>

package/src/player/components/TimelineTrackRow.tsx

@@ -1,14 +1,19 @@
 import type { ReactNode } from "react";
+import { timelineLogicalRowCellId } from "./timelineNavigationIdentity";
+import type { TimelineLogicalRow } from "./timelineKeyboardNavigation";
 
 interface TimelineTrackRowProps {
   index: number;
   rowKey: number;
-  rowCount: number;
+  logicalRow: TimelineLogicalRow;
+  propertyRows: readonly TimelineLogicalRow[];
+  lanesId: string;
   top: number;
   height: number;
   virtualized: boolean;
   background: string;
   borderColor: string;
+  rovingTargetId?: string | null;
   children: ReactNode;
 }
 
@@ -16,23 +21,24 @@ interface TimelineTrackRowProps {
 export function TimelineTrackRow({
   index,
   rowKey,
-  rowCount,
+  logicalRow,
+  propertyRows,
+  lanesId,
   top,
   height,
   virtualized,
   background,
   borderColor,
+  rovingTargetId = null,
   children,
 }: TimelineTrackRowProps) {
   return (
     <div
-      role="listitem"
-      aria-posinset={index + 1}
-      aria-setsize={rowCount}
+      role="rowgroup"
       data-index={index}
       data-timeline-row={index}
       data-timeline-row-key={rowKey}
-      className={`${virtualized ? "absolute left-0 right-0" : "relative"} flex`}
+      className={virtualized ? "absolute left-0 right-0" : "relative"}
       style={{
         top: virtualized ? top : undefined,
         height,
@@ -40,7 +46,52 @@ export function TimelineTrackRow({
         borderBottom: `1px solid ${borderColor}`,
       }}
     >
-      {children}
+      <div
+        role="row"
+        aria-rowindex={logicalRow.logicalIndex + 1}
+        aria-level={logicalRow.level}
+        aria-expanded={logicalRow.expandable ? logicalRow.expanded : undefined}
+        data-timeline-logical-row-id={logicalRow.id}
+        data-timeline-focus-id={logicalRow.id}
+        tabIndex={rovingTargetId === logicalRow.id ? 0 : -1}
+        className="flex"
+        style={{ height }}
+      >
+        {children}
+      </div>
+      {propertyRows.map((row) => {
+        const group = row.propertyGroup;
+        const keyframeCount = row.items.filter((item) => item.kind === "keyframe").length;
+        const easeCount = row.items.filter((item) => item.kind === "ease").length;
+        return (
+          // ponytail: aria-owns maps this hidden logical row onto the two visible
+          // property-lane cells without duplicating interactive controls.
+          <div
+            key={row.id}
+            role="row"
+            aria-rowindex={row.logicalIndex + 1}
+            aria-level={row.level}
+            data-property-group={group}
+            data-timeline-logical-row-id={row.id}
+            className="sr-only"
+          >
+            <div
+              role="rowheader"
+              aria-colindex={1}
+              aria-owns={timelineLogicalRowCellId(lanesId, row.id, "header")}
+            >
+              {group}
+            </div>
+            <div
+              role="gridcell"
+              aria-colindex={2}
+              aria-owns={timelineLogicalRowCellId(lanesId, row.id, "content")}
+            >
+              {keyframeCount} keyframes, {easeCount} ease controls
+            </div>
+          </div>
+        );
+      })}
     </div>
   );
 }

package/src/player/components/timelineCallbacks.ts

@@ -73,7 +73,7 @@ export interface TimelineEditCallbacks {
   onRazorSplit?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   onRazorSplitAll?: (splitTime: number) => Promise<void> | void;
   onDeleteKeyframe?: (elementId: string, keyframe: TimelineKeyframeTarget) => void;
-  onDeleteAllKeyframes?: (element: TimelineElement) => void;
+  onDeleteAllKeyframes?: (element: TimelineElement, animationId?: string) => void;
   onMoveKeyframeToPlayhead?: (element: TimelineElement, keyframe: TimelineKeyframeTarget) => void;
   /** Drag-to-retime: `keyframe` identifies the dragged keyframe (its percentage
    *  is clip-relative), `toClipPercentage` is the neighbour-clamped drop. */