@kinetixui/ui 0.17.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -44,7 +44,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.9.1",
-    "@kinetixui/tokens": "0.17.0",
+    "@kinetixui/tokens": "0.19.0",
     "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-aspect-ratio": "^1.1.15",

package/src/components/audio-player.tsx

@@ -66,7 +66,7 @@ const AudioPlayer = React.forwardRef<HTMLDivElement, AudioPlayerProps>(
         type="button"
         onClick={toggle}
         aria-label={playing ? "Pause" : "Play"}
-        className="grid shrink-0 place-items-center rounded-full bg-primary text-primary-foreground outline-none transition-transform hover:scale-105 focus-visible:shadow-focus"
+        className="grid shrink-0 place-items-center rounded-full bg-action text-action-foreground outline-none transition-transform hover:scale-105 focus-visible:shadow-focus"
         style={{ width: size, height: size }}
       >
         {playing ? <Pause className="size-1/3 fill-current" /> : <Play className="size-1/3 translate-x-px fill-current" />}
@@ -105,7 +105,7 @@ const AudioPlayer = React.forwardRef<HTMLDivElement, AudioPlayerProps>(
           </button>
           <PlayPause size={36} />
           <div className="absolute inset-x-0 bottom-0 h-1 bg-muted">
-            <div className="h-full bg-primary transition-[width]" style={{ width: `${pct}%` }} />
+            <div className="h-full bg-action transition-[width]" style={{ width: `${pct}%` }} />
           </div>
         </div>
       );

package/src/components/badge.tsx

@@ -19,7 +19,7 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground",
+        default: "bg-action text-action-foreground",
         secondary: "bg-secondary-foreground text-secondary",
         destructive: "bg-destructive text-destructive-foreground",
         outline: "border border-input text-foreground",

package/src/components/banner.tsx

@@ -56,7 +56,7 @@ const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
   ({ className, variant = "information", sticky, hideIcon, onDismiss, action, children, ...props }, ref) => {
     const Icon = ICON[variant ?? "information"];
     return (
-      <div ref={ref} role="banner" className={cn(bannerVariants({ variant, sticky }), className)} {...props}>
+      <div ref={ref} className={cn(bannerVariants({ variant, sticky }), className)} {...props}>
         {!hideIcon && <Icon />}
         <div className="mx-auto flex min-w-0 max-w-4xl flex-1 flex-wrap items-center justify-center gap-x-3 gap-y-1 text-center">
           <span>{children}</span>

package/src/components/button.tsx

@@ -41,7 +41,7 @@ const buttonVariants = cva(
         // (the old hover:bg-[--color-blue-600] was a hard-coded dark navy — on dark mode,
         //  where --primary is light, it inverted the button into the near-black background.)
         Primary:
-          "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/85 disabled:bg-border disabled:text-muted-foreground",
+          "bg-action text-action-foreground hover:bg-action/90 active:bg-action/85 disabled:bg-border disabled:text-muted-foreground",
         // rest = --secondary; hover/active promote to the --secondary-foreground fill with
         //  inverted text — theme-aware, unlike the previous hard-coded green primitives.
         //  Active is solid like hover: dimming it (90% was 3.97:1) drops the text under AA,
@@ -51,14 +51,14 @@ const buttonVariants = cva(
         // 1px outline; hover fills with accent + strengthens the edge to --ring so the
         // state stays visible on the darkest surfaces (WCAG 2.2 SC 1.4.11); active pins primary
         Outline:
-          "border border-input bg-transparent text-foreground hover:border-ring hover:bg-accent active:border-primary active:bg-accent active:text-primary disabled:border-input disabled:text-muted-foreground disabled:bg-transparent",
+          "border border-input bg-transparent text-foreground hover:border-ring hover:bg-accent active:border-action active:bg-accent active:text-action disabled:border-input disabled:text-muted-foreground disabled:bg-transparent",
         Destructive:
           "bg-destructive text-destructive-foreground hover:brightness-95 active:brightness-90 disabled:bg-border disabled:text-muted-foreground",
         // transparent rest; hover adds an inset --ring outline (the accent fill alone is
         // <3:1 against the page on dark) plus the accent fill; active pins primary text
         Ghost:
-          "bg-transparent text-foreground hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring active:bg-accent active:text-primary active:ring-0 disabled:text-muted-foreground disabled:bg-transparent",
-        Link: "bg-transparent text-primary underline-offset-4 hover:underline hover:text-foreground rounded-none px-0 disabled:text-muted-foreground disabled:no-underline",
+          "bg-transparent text-foreground hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring active:bg-accent active:text-action active:ring-0 disabled:text-muted-foreground disabled:bg-transparent",
+        Link: "bg-transparent text-link underline-offset-4 hover:underline hover:text-foreground rounded-none px-0 disabled:text-muted-foreground disabled:no-underline",
       },
       size: {
         // padding = Figma spacing/3 + spacing/2 ; type = Label Small (11/16, +0.5 tracking)
@@ -87,14 +87,14 @@ const buttonVariants = cva(
     },
     compoundVariants: [
       { variant: "Destructive", class: "focus-visible:shadow-focus-destructive" },
-      { variant: "Primary", state: "Hover", class: "bg-primary/90" },
-      { variant: "Primary", state: "Active", class: "bg-primary/85" },
+      { variant: "Primary", state: "Hover", class: "bg-action/90" },
+      { variant: "Primary", state: "Active", class: "bg-action/85" },
       { variant: "Secondary", state: "Hover", class: "bg-secondary-foreground text-secondary" },
       { variant: "Secondary", state: "Active", class: "bg-secondary-foreground text-secondary" },
       { variant: "Outline", state: "Hover", class: "border-ring bg-accent" },
-      { variant: "Outline", state: "Active", class: "border-primary bg-accent text-primary" },
+      { variant: "Outline", state: "Active", class: "border-action bg-accent text-action" },
       { variant: "Ghost", state: "Hover", class: "bg-accent ring-1 ring-inset ring-ring" },
-      { variant: "Ghost", state: "Active", class: "bg-accent text-primary" },
+      { variant: "Ghost", state: "Active", class: "bg-accent text-action" },
       { variant: "Link", state: "Hover", class: "underline text-foreground" },
       { variant: "Link", size: ["sm", "md", "lg"], class: "py-2 px-0 h-auto" },
     ],

package/src/components/calendar.tsx

@@ -45,7 +45,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         ),
         day_button: cn(
           buttonVariants({ variant: "Ghost", size: "icon" }),
-          "size-8 p-0 font-normal group-aria-selected:opacity-visible group-data-[selected=true]:bg-primary group-data-[selected=true]:text-primary-foreground group-data-[selected=true]:hover:bg-primary group-data-[selected=true]:hover:text-primary-foreground group-data-[selected=true]:focus:bg-primary group-data-[selected=true]:focus:text-primary-foreground",
+          "size-8 p-0 font-normal group-aria-selected:opacity-visible group-data-[selected=true]:bg-action group-data-[selected=true]:text-action-foreground group-data-[selected=true]:hover:bg-action group-data-[selected=true]:hover:text-action-foreground group-data-[selected=true]:focus:bg-action group-data-[selected=true]:focus:text-action-foreground",
         ),
         range_start: "day-range-start rounded-l-md",
         range_end: "day-range-end rounded-r-md",

package/src/components/chart.tsx

@@ -100,7 +100,7 @@ const ChartContainer = React.forwardRef<
         role={role ?? "img"}
         aria-label={name}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "flex aspect-video justify-center text-xs [&_.recharts-surface:focus-visible]:[outline:2px_solid_hsl(var(--ring))] [&_.recharts-surface:focus-visible]:rounded-sm [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className,
         )}
         {...props}
@@ -144,7 +144,7 @@ function ChartState({
           {[40, 72, 56, 88, 48, 64, 80].map((h, i) => (
             <span
               key={i}
-              className="w-full animate-pulse rounded-sm bg-muted"
+              className="w-full animate-pulse rounded-sm bg-muted motion-reduce:animate-none"
               style={{ height: `${h}px`, animationDelay: `${i * 90}ms` }}
             />
           ))}

package/src/components/checkbox.tsx

@@ -21,8 +21,8 @@ const Checkbox = React.forwardRef<
       "peer size-[18px] shrink-0 rounded-sm border-2 border-input outline-none transition-colors",
       "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
       "disabled:cursor-not-allowed disabled:opacity-disabled",
-      "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+      "data-[state=checked]:border-action data-[state=checked]:bg-action data-[state=checked]:text-action-foreground",
+      "data-[state=indeterminate]:border-action data-[state=indeterminate]:bg-action data-[state=indeterminate]:text-action-foreground",
       "aria-invalid:border-destructive aria-invalid:data-[state=checked]:border-destructive aria-invalid:data-[state=checked]:bg-destructive",
       className,
     )}

package/src/components/circular-progress.tsx

@@ -52,7 +52,7 @@ const CircularProgress = React.forwardRef<HTMLDivElement, CircularProgressProps>
             strokeLinecap="round"
             strokeDasharray={c}
             strokeDashoffset={c - (v / 100) * c}
-            className="stroke-primary transition-[stroke-dashoffset] duration-base"
+            className="stroke-action transition-[stroke-dashoffset] duration-base"
           />
         </svg>
         {(showValue || label != null) && (

package/src/components/code-block.tsx

@@ -53,7 +53,7 @@ const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
                   onClick={() => setActive(i)}
                   className={cn(
                     "border-b-2 px-3 py-2 text-body-sm transition-colors outline-none",
-                    i === active ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground",
+                    i === active ? "border-action text-foreground" : "border-transparent text-muted-foreground hover:text-foreground",
                   )}
                 >
                   {t.name || "code"}

package/src/components/color-picker.tsx

@@ -197,6 +197,9 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
           role="slider"
           tabIndex={0}
           aria-label="Saturation and value"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={Math.round(s)}
           aria-valuetext={`saturation ${Math.round(s)}%, value ${Math.round(v)}%`}
           onPointerDown={handleSquarePointerDown}
           onPointerMove={handleSquarePointerMove}
@@ -333,6 +336,7 @@ function HexField({
 
   return (
     <Input
+      aria-label="Hex color"
       value={draft}
       onChange={(e) => setDraft(e.target.value.replace(/[^0-9a-fA-F]/g, "").slice(0, alpha ? 8 : 6))}
       onBlur={commit}

package/src/components/data-grid.tsx

@@ -24,6 +24,14 @@ export interface DataGridColumn<TData> {
   onCellEdit?: (row: TData, rowIndex: number, value: string) => void;
 }
 
+/** A rectangular range of cells, in display order (after sorting and column reordering). */
+export interface DataGridSelection {
+  /** first and last selected row index, inclusive, into the *displayed* (sorted) rows */
+  rows: [number, number];
+  /** ids of the selected columns, in display order */
+  columns: string[];
+}
+
 export interface DataGridProps<TData> {
   columns: DataGridColumn<TData>[];
   data: TData[];
@@ -33,6 +41,14 @@ export interface DataGridProps<TData> {
   overscan?: number;
   getRowId?: (row: TData, index: number) => React.Key;
   className?: string;
+  /**
+   * Opt in to range selection: Shift+arrows / Shift+click extend a rectangle from the anchor cell,
+   * Ctrl/Cmd+A selects everything, Ctrl/Cmd+C copies the range as tab-separated text (each
+   * column's `value()`; empty where a column has none), Esc clears. Sets aria-multiselectable.
+   */
+  selectable?: boolean;
+  /** fires when the selected range changes; `null` when it is cleared */
+  onSelectionChange?: (selection: DataGridSelection | null) => void;
 }
 
 type SortState = { columnId: string; direction: "asc" | "desc" } | null;
@@ -61,6 +77,8 @@ function DataGrid<TData>({
   overscan = 6,
   getRowId,
   className,
+  selectable = false,
+  onSelectionChange,
 }: DataGridProps<TData>) {
   const columnById = React.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
   const [order, setOrder] = React.useState(() => columns.map((c) => c.id));
@@ -193,17 +211,239 @@ function DataGrid<TData>({
     endEdit(restoreFocus);
   }
 
+  // ── keyboard model (ARIA grid pattern) ─────────────────────────────────────────────────────
+  // The grid is ONE tab stop (roving tabindex). Arrows, Home/End (Ctrl = grid corners) and
+  // PageUp/PageDown move the active cell; the header row is row -1. Rows are virtualized, so a move
+  // first scrolls the target row into the rendered window and focus lands after the next render.
+  const HEADER_HEIGHT = 40; // h-10
+  type Pos = { row: number; columnId: string };
+  const [active, setActive] = React.useState<Pos>({ row: -1, columnId: columns[0]?.id ?? "" });
+  const pendingFocusRef = React.useRef<Pos | null>(null);
+  const [announcement, setAnnouncement] = React.useState("");
+
+  // ── range selection (opt-in) ──────────────────────────────────────────────────────────────
+  type Anchor = { row: number; columnId: string };
+  const [sel, setSel] = React.useState<{ anchor: Anchor; end: Anchor } | null>(null);
+  const onSelectionChangeRef = React.useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  const lastEmittedRef = React.useRef("null");
+
+  const rowCount = sortedData.length;
+  const colIds = renderedColumns.map((c) => c.id);
+  const activeCol = colIds.includes(active.columnId) ? active.columnId : (colIds[0] ?? "");
+  const activeRow = Math.min(active.row, rowCount - 1);
+  // if the active row has scrolled out of the rendered window, the header takes the tab stop so
+  // the grid stays reachable by Tab
+  const activeRendered = activeRow < 0 || (activeRow >= startIndex && activeRow < endIndex);
+  const tabStop: Pos = { row: activeRendered ? activeRow : -1, columnId: activeCol };
+  const colKey = colIds.join("|");
+  const range = React.useMemo(() => {
+    if (!selectable || !sel) return null;
+    const a = colIds.indexOf(sel.anchor.columnId);
+    const b = colIds.indexOf(sel.end.columnId);
+    if (a < 0 || b < 0) return null;
+    return { r0: Math.min(sel.anchor.row, sel.end.row), r1: Math.max(sel.anchor.row, sel.end.row), c0: Math.min(a, b), c1: Math.max(a, b) };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectable, sel, colKey]);
+
+  // Selection refers to displayed rows, so a re-sort or a different row count invalidates it.
+  React.useEffect(() => setSel(null), [sort, rowCount]);
+
+  React.useEffect(() => {
+    if (!selectable) return;
+    const value = range ? { rows: [range.r0, range.r1] as [number, number], columns: colIds.slice(range.c0, range.c1 + 1) } : null;
+    const key = JSON.stringify(value);
+    if (key === lastEmittedRef.current) return;
+    lastEmittedRef.current = key;
+    onSelectionChangeRef.current?.(value);
+    setAnnouncement(value ? `${(range!.r1 - range!.r0 + 1) * (range!.c1 - range!.c0 + 1)} cells selected` : "Selection cleared");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectable, range]);
+
+  function extendSelection(fromRow: number, fromCol: string, toRow: number, toCol: string) {
+    const anchor = sel?.anchor ?? { row: fromRow, columnId: fromCol };
+    const end = { row: Math.max(0, Math.min(toRow, rowCount - 1)), columnId: toCol };
+    setSel({ anchor, end });
+    moveTo(end.row, end.columnId);
+  }
+
+  function selectAll() {
+    if (rowCount === 0 || colIds.length === 0) return;
+    setSel({ anchor: { row: 0, columnId: colIds[0]! }, end: { row: rowCount - 1, columnId: colIds[colIds.length - 1]! } });
+  }
+
+  function copySelection() {
+    if (!range) return;
+    const ids = colIds.slice(range.c0, range.c1 + 1);
+    const text = sortedData
+      .slice(range.r0, range.r1 + 1)
+      .map((r) => ids.map((id) => { const c = columnById.get(id); return c?.value ? String(c.value(r)) : ""; }).join("\t"))
+      .join("\n");
+    try {
+      void navigator.clipboard?.writeText(text);
+      setAnnouncement(`Copied ${(range.r1 - range.r0 + 1) * ids.length} cells`);
+    } catch {
+      /* clipboard unavailable (insecure context / permission) — nothing to announce */
+    }
+  }
+
+  const pageRows = Math.max(1, Math.floor((viewportHeight - HEADER_HEIGHT) / rowHeight) - 1);
+  const labelOf = (c: DataGridColumn<TData>) => (typeof c.header === "string" ? c.header : c.id);
+
+  function ensureRowVisible(row: number) {
+    const el = containerRef.current;
+    if (!el) return;
+    if (row < 0) {
+      // the header is sticky and always visible, but moving to it means "back to the top"
+      if (scrollTop !== 0) {
+        el.scrollTop = 0;
+        setScrollTop(0);
+      }
+      return;
+    }
+    const top = HEADER_HEIGHT + row * rowHeight;
+    const bottom = top + rowHeight;
+    let next = scrollTop;
+    if (top < scrollTop + HEADER_HEIGHT) next = row * rowHeight; // under the sticky header
+    else if (bottom > scrollTop + viewportHeight) next = bottom - viewportHeight;
+    if (next !== scrollTop) {
+      el.scrollTop = next;
+      setScrollTop(next);
+    }
+  }
+
+  function moveTo(row: number, columnId: string) {
+    const r = Math.max(-1, Math.min(row, rowCount - 1));
+    ensureRowVisible(r);
+    pendingFocusRef.current = { row: r, columnId };
+    setActive({ row: r, columnId });
+  }
+
+  // Runs after every render until the pending target exists in the DOM (it may need a scroll first).
+  React.useEffect(() => {
+    const p = pendingFocusRef.current;
+    if (!p) return;
+    const selector = p.row < 0 ? `[data-header="${p.columnId}"]` : `[data-cell="${p.row}:${p.columnId}"]`;
+    const el = containerRef.current?.querySelector<HTMLElement>(selector);
+    if (el) {
+      pendingFocusRef.current = null;
+      el.focus();
+    }
+  });
+
+  function moveColumn(column: DataGridColumn<TData>, dir: 1 | -1) {
+    if (column.pinned) return;
+    const ids = unpinnedOrdered.map((c) => c.id);
+    const from = ids.indexOf(column.id);
+    const to = from + dir;
+    if (to < 0 || to >= ids.length) {
+      setAnnouncement(`${labelOf(column)} is already the ${dir < 0 ? "first" : "last"} movable column`);
+      return;
+    }
+    const targetId = ids[to]!;
+    setOrder((prev) => {
+      const next = prev.filter((id) => id !== column.id);
+      next.splice(next.indexOf(targetId) + (dir > 0 ? 1 : 0), 0, column.id);
+      return next;
+    });
+    pendingFocusRef.current = { row: -1, columnId: column.id }; // a reordered node loses focus; give it back
+    setAnnouncement(`${labelOf(column)} moved to position ${leftPinned.length + to + 1} of ${colIds.length}`);
+  }
+
+  function resizeColumn(column: DataGridColumn<TData>, delta: number) {
+    const current = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
+    const next = Math.max(column.minWidth ?? DEFAULT_MIN_WIDTH, current + delta);
+    setWidths((prev) => ({ ...prev, [column.id]: next }));
+    setAnnouncement(`${labelOf(column)} column width ${next} pixels`);
+  }
+
+  function onNavKeyDown(e: React.KeyboardEvent<HTMLElement>, row: number, column: DataGridColumn<TData>) {
+    if (e.target !== e.currentTarget) return; // keys inside an editing input are the input's own
+    const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+    const idx = colIds.indexOf(column.id);
+    const horizontal = e.key === "ArrowRight" ? (rtl ? -1 : 1) : e.key === "ArrowLeft" ? (rtl ? 1 : -1) : 0;
+
+    // header chords: Alt+Left/Right reorders the column, Shift+Left/Right resizes it (10px)
+    if (row < 0 && horizontal !== 0 && (e.altKey || e.shiftKey)) {
+      e.preventDefault();
+      if (e.altKey) moveColumn(column, horizontal as 1 | -1);
+      else resizeColumn(column, horizontal * 10);
+      return;
+    }
+
+    const mod = e.ctrlKey || e.metaKey;
+    if (selectable && row >= 0) {
+      if (mod && e.key.toLowerCase() === "a") {
+        e.preventDefault();
+        return selectAll();
+      }
+      if (mod && e.key.toLowerCase() === "c" && range) {
+        e.preventDefault();
+        return copySelection();
+      }
+      if (e.key === "Escape" && sel) {
+        e.preventDefault();
+        return setSel(null);
+      }
+    }
+    const extend = selectable && e.shiftKey && row >= 0;
+    const go = (r: number, i: number) => {
+      e.preventDefault();
+      const target = colIds[Math.max(0, Math.min(i, colIds.length - 1))]!;
+      if (extend) return extendSelection(row, column.id, r, target);
+      if (sel) setSel(null); // a plain move collapses the range
+      moveTo(r, target);
+    };
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowLeft":
+        return go(row, idx + horizontal);
+      case "ArrowDown":
+        return go(row + 1, idx);
+      case "ArrowUp":
+        return go(row - 1, idx);
+      case "Home":
+        return go(e.ctrlKey ? -1 : row, 0);
+      case "End":
+        return go(e.ctrlKey ? rowCount - 1 : row, colIds.length - 1);
+      case "PageDown":
+        return go(row + pageRows, idx);
+      case "PageUp":
+        return go(Math.max(row - pageRows, row >= 0 ? 0 : -1), idx);
+      case "Enter":
+      case " ":
+        if (row < 0 && column.sortable) {
+          e.preventDefault();
+          toggleSort(column.id);
+        } else if (row >= 0 && column.editable && e.key === "Enter") {
+          e.preventDefault();
+          setEditing({ rowIndex: row, columnId: column.id });
+        }
+        return;
+      case "F2":
+        if (row >= 0 && column.editable) {
+          e.preventDefault();
+          setEditing({ rowIndex: row, columnId: column.id });
+        }
+        return;
+    }
+  }
+
   return (
+    <>
     <div
       ref={containerRef}
       role="grid"
+      aria-rowcount={rowCount + 1}
+      aria-colcount={colIds.length}
+      aria-multiselectable={selectable || undefined}
       className={cn("relative overflow-auto rounded-md border font-sans text-sm", className)}
       style={{ height }}
       onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
     >
       <div style={{ width: totalWidth, minWidth: "100%" }}>
-        <div role="row" className="sticky top-0 z-[2] flex border-b bg-background">
-          {renderedColumns.map((column) => {
+        <div role="row" aria-rowindex={1} className="sticky top-0 z-[2] flex border-b bg-background">
+          {renderedColumns.map((column, colIdx) => {
             const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
             const pinnedStyle: React.CSSProperties =
               column.pinned === "left"
@@ -216,6 +456,9 @@ function DataGrid<TData>({
               <div
                 key={column.id}
                 role="columnheader"
+                data-header={column.id}
+                aria-colindex={colIdx + 1}
+                aria-keyshortcuts={`Shift+ArrowLeft Shift+ArrowRight${column.pinned ? "" : " Alt+ArrowLeft Alt+ArrowRight"}`}
                 {...(column.sortable
                   ? { "aria-sort": isSorted ? (sort!.direction === "asc" ? "ascending" : "descending") : "none" }
                   : {})}
@@ -239,18 +482,13 @@ function DataGrid<TData>({
                   });
                 }}
                 onClick={() => column.sortable && toggleSort(column.id)}
-                // a sortable header is a control: reachable with Tab, operated with Enter / Space
-                tabIndex={column.sortable ? 0 : undefined}
-                onKeyDown={(e) => {
-                  if (column.sortable && e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
-                    e.preventDefault();
-                    toggleSort(column.id);
-                  }
-                }}
+                // roving tabindex: the grid is one tab stop; arrows move between cells (see onNavKeyDown)
+                tabIndex={tabStop.row === -1 && tabStop.columnId === column.id ? 0 : -1}
+                onFocus={() => setActive({ row: -1, columnId: column.id })}
+                onKeyDown={(e) => onNavKeyDown(e, -1, column)}
                 className={cn(
-                  "relative flex h-10 shrink-0 select-none items-center gap-1 px-2 font-medium text-muted-foreground",
-                  column.sortable &&
-                    "cursor-pointer outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                  "relative flex h-10 shrink-0 select-none items-center gap-1 px-2 font-medium text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                  column.sortable && "cursor-pointer hover:text-foreground",
                   column.pinned && "bg-background",
                 )}
                 style={{ width, ...pinnedStyle }}
@@ -266,7 +504,7 @@ function DataGrid<TData>({
                     e.stopPropagation();
                     beginResize(column.id, column.minWidth ?? DEFAULT_MIN_WIDTH, e.clientX, width);
                   }}
-                  className="absolute right-0 top-0 h-full w-1 touch-none cursor-col-resize hover:bg-primary/50"
+                  className="absolute right-0 top-0 h-full w-1 touch-none cursor-col-resize hover:bg-action/50"
                 />
               </div>
             );
@@ -279,10 +517,11 @@ function DataGrid<TData>({
               <div
                 key={getRowId ? getRowId(row, rowIndex) : rowIndex}
                 role="row"
+                aria-rowindex={rowIndex + 2}
                 className="absolute flex w-full border-b hover:bg-muted/50"
                 style={{ top: rowIndex * rowHeight, height: rowHeight }}
               >
-                {renderedColumns.map((column) => {
+                {renderedColumns.map((column, colIdx) => {
                   const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
                   const pinnedStyle: React.CSSProperties =
                     column.pinned === "left"
@@ -291,24 +530,32 @@ function DataGrid<TData>({
                         ? { position: "sticky", right: rightOffsets[column.id], zIndex: 1 }
                         : {};
                   const isEditing = editing?.rowIndex === rowIndex && editing.columnId === column.id;
+                  const selected = selectable && !!range && rowIndex >= range.r0 && rowIndex <= range.r1 && colIdx >= range.c0 && colIdx <= range.c1;
                   return (
                     <div
                       key={column.id}
                       role="gridcell"
+                      aria-colindex={colIdx + 1}
+                      aria-selected={selectable ? selected : undefined}
                       data-cell={`${rowIndex}:${column.id}`}
-                      onDoubleClick={() => column.editable && setEditing({ rowIndex, columnId: column.id })}
-                      // an editable cell is reachable with Tab and entered with Enter or F2 (the spreadsheet convention)
-                      tabIndex={column.editable ? 0 : undefined}
-                      onKeyDown={(e) => {
-                        if (column.editable && e.target === e.currentTarget && (e.key === "Enter" || e.key === "F2")) {
+                      onMouseDown={(e) => {
+                        if (!selectable || e.button !== 0) return;
+                        if (e.shiftKey) {
+                          // extend from the previously active cell (focus has not moved yet on mousedown) — even when it has
+                          // since scrolled out of the rendered window
                           e.preventDefault();
-                          setEditing({ rowIndex, columnId: column.id });
-                        }
+                          extendSelection(activeRow >= 0 ? activeRow : rowIndex, activeCol, rowIndex, column.id);
+                        } else if (sel) setSel(null);
                       }}
+                      onDoubleClick={() => column.editable && setEditing({ rowIndex, columnId: column.id })}
+                      // roving tabindex; Enter or F2 edits an editable cell (the spreadsheet convention)
+                      tabIndex={tabStop.row === rowIndex && tabStop.columnId === column.id ? 0 : -1}
+                      onFocus={() => setActive({ row: rowIndex, columnId: column.id })}
+                      onKeyDown={(e) => onNavKeyDown(e, rowIndex, column)}
                       className={cn(
-                        "flex shrink-0 items-center px-2",
-                        column.editable && "outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                        "flex shrink-0 items-center px-2 outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
                         column.pinned && "bg-background",
+                        selected && "bg-accent",
                       )}
                       style={{ width, ...pinnedStyle }}
                     >
@@ -335,6 +582,11 @@ function DataGrid<TData>({
         </div>
       </div>
     </div>
+    {/* reorder / resize results, spoken politely; outside the grid because a grid's children must be rows */}
+    <div role="status" aria-live="polite" className="sr-only">
+      {announcement}
+    </div>
+    </>
   );
 }
 

package/src/components/diff-viewer.tsx

@@ -103,13 +103,14 @@ function UnifiedDiff({ ops }: { ops: DiffOp[] }) {
           role="row"
           className={cn("flex", op.type === "add" && "bg-success/10", op.type === "remove" && "bg-destructive/10")}
         >
-          <span className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
+          <span role="cell" className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
             {op.type !== "add" ? op.oldLine : ""}
           </span>
-          <span className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
+          <span role="cell" className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
             {op.type !== "remove" ? op.newLine : ""}
           </span>
           <span
+            role="cell"
             className={cn(
               "w-4 shrink-0 select-none text-center",
               op.type === "add" && "text-success",
@@ -118,7 +119,7 @@ function UnifiedDiff({ ops }: { ops: DiffOp[] }) {
           >
             {op.type === "add" ? "+" : op.type === "remove" ? "−" : ""}
           </span>
-          <span className="min-w-0 flex-1 whitespace-pre px-1">{op.text}</span>
+          <span role="cell" className="min-w-0 flex-1 whitespace-pre px-1">{op.text}</span>
         </div>
       ))}
     </div>
@@ -128,19 +129,19 @@ function UnifiedDiff({ ops }: { ops: DiffOp[] }) {
 function SplitDiff({ ops, oldLabel, newLabel }: { ops: DiffOp[]; oldLabel: string; newLabel: string }) {
   return (
     <div role="table">
-      <div className="flex border-b bg-muted/40 text-muted-foreground">
-        <div className="flex-1 px-2 py-1">{oldLabel}</div>
-        <div className="flex-1 border-l px-2 py-1">{newLabel}</div>
+      <div role="row" className="flex border-b bg-muted/40 text-muted-foreground">
+        <div role="columnheader" className="flex-1 px-2 py-1">{oldLabel}</div>
+        <div role="columnheader" className="flex-1 border-l px-2 py-1">{newLabel}</div>
       </div>
       {ops.map((op, i) => (
         <div key={i} role="row" className="flex">
-          <div className={cn("flex flex-1 items-start", op.type === "remove" && "bg-destructive/10")}>
+          <div role="cell" className={cn("flex flex-1 items-start", op.type === "remove" && "bg-destructive/10")}>
             <span className="w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground">
               {op.type !== "add" ? op.oldLine : ""}
             </span>
             <span className="min-w-0 flex-1 whitespace-pre px-1">{op.type !== "add" ? op.text : ""}</span>
           </div>
-          <div className={cn("flex flex-1 items-start border-l", op.type === "add" && "bg-success/10")}>
+          <div role="cell" className={cn("flex flex-1 items-start border-l", op.type === "add" && "bg-success/10")}>
             <span className="w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground">
               {op.type !== "remove" ? op.newLine : ""}
             </span>

package/src/components/fab.tsx

@@ -19,7 +19,7 @@ const fabVariants = cva(
   {
     variants: {
       variant: {
-        Primary: "bg-primary text-primary-foreground hover:bg-[--color-blue-600] active:bg-[--color-blue-700]",
+        Primary: "bg-action text-action-foreground hover:bg-action/90 active:bg-action/85",
         Secondary:
           "bg-secondary text-secondary-foreground hover:bg-[--color-green-500] hover:text-[--color-green-50] active:bg-[--color-green-600] active:text-[--color-green-50]",
       },