@cosxai/ui 1.0.0-alpha.0 → 1.0.0-alpha.2

package/src/components/SidePanel.tsx

@@ -0,0 +1,130 @@
+import { X } from 'lucide-react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import { cn } from '../lib/cn';
+import { IconButton } from './IconButton';
+
+type SlotContext = {
+  /** The panel in the slot, if any. */
+  openId: string | null;
+  open: (id: string) => void;
+  close: (id?: string) => void;
+  slot: HTMLElement | null;
+  setSlot: (el: HTMLElement | null) => void;
+};
+
+const SidePanelContext = createContext<SlotContext | null>(null);
+
+/**
+ * SidePanelProvider — the page's one right-hand slot. Opening a panel
+ * closes whatever held the slot (Share and the Agent drawer never show
+ * together). Place <SidePanelSlot/> beside the main content.
+ */
+export function SidePanelProvider({ children }: { children: ReactNode }) {
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [slot, setSlot] = useState<HTMLElement | null>(null);
+  const open = useCallback((id: string) => setOpenId(id), []);
+  const close = useCallback((id?: string) => setOpenId((cur) => (id === undefined || cur === id ? null : cur)), []);
+  const value = useMemo(() => ({ openId, open, close, slot, setSlot }), [openId, open, close, slot]);
+  return <SidePanelContext.Provider value={value}>{children}</SidePanelContext.Provider>;
+}
+
+/** The slot's state and controls. */
+export function useSidePanel() {
+  const ctx = useContext(SidePanelContext);
+  if (!ctx) throw new Error('useSidePanel needs a <SidePanelProvider>');
+  const { openId, open, close } = ctx;
+  return { openId, open, close };
+}
+
+/** Where the open panel renders: a flex sibling of the main content, so it pushes the content (no overlay). */
+export function SidePanelSlot({ className, ...rest }: ComponentProps<'div'>) {
+  const ctx = useContext(SidePanelContext);
+  const setSlot = ctx?.setSlot;
+  return <div ref={setSlot} className={cn('flex h-full shrink-0', className)} {...rest} />;
+}
+
+const WIDTH = { sm: 'sm:w-[360px]', md: 'sm:w-[480px]', lg: 'sm:w-[640px]' } as const;
+
+export type SidePanelProps = Omit<ComponentProps<'aside'>, 'title'> & {
+  /** The panel's id in the slot. */
+  id: string;
+  title: ReactNode;
+  /** A line above the title (the item it is about). */
+  eyebrow?: ReactNode;
+  /** 360 · 480 · 640. @default "sm" */
+  width?: keyof typeof WIDTH | undefined;
+  /** Pinned at the bottom (New share). */
+  footer?: ReactNode;
+  /** @default "Close" */
+  closeLabel?: string | undefined;
+  onClose?: (() => void) | undefined;
+};
+
+/**
+ * SidePanel — detail beside the page (sharing, properties, the Agent).
+ * No scrim and no focus trap: the page stays usable; it pushes the content
+ * aside. Esc closes it (unless a dialog is open above). On phones it pushes
+ * in full screen. Renders only while it holds the slot.
+ */
+export function SidePanel({ id, title, eyebrow, width = 'sm', footer, closeLabel = 'Close', onClose, className, children, ...rest }: SidePanelProps) {
+  const ctx = useContext(SidePanelContext);
+  if (!ctx) throw new Error('SidePanel needs a <SidePanelProvider>');
+  const { openId, close, slot } = ctx;
+  const isOpen = openId === id;
+  const titleId = useId();
+
+  const dismiss = useCallback(() => {
+    close(id);
+    onClose?.();
+  }, [close, id, onClose]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape' || e.defaultPrevented) return;
+      if (document.querySelector('[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"]')) return;
+      dismiss();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [isOpen, dismiss]);
+
+  if (!isOpen || !slot) return null;
+  return createPortal(
+    <aside
+      aria-labelledby={titleId}
+      className={cn(
+        'flex h-full flex-col border-l border-rule bg-page font-sans text-fg',
+        'max-sm:fixed max-sm:inset-0 max-sm:z-40 max-sm:w-full max-sm:border-l-0',
+        WIDTH[width],
+        className,
+      )}
+      {...rest}
+    >
+      <header className="flex items-start gap-3 border-b border-rule px-5 py-4">
+        <div className="min-w-0 flex-1">
+          {eyebrow && <div className="mb-1 text-meta font-medium text-fg-secondary">{eyebrow}</div>}
+          <h2 id={titleId} className="m-0 truncate text-[16px] leading-[1.3] font-medium">
+            {title}
+          </h2>
+        </div>
+        <IconButton icon={X} label={closeLabel} size="sm" onClick={dismiss} className="-mt-1 -mr-2" />
+      </header>
+      <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4 text-ui">{children}</div>
+      {footer && <footer className="border-t border-rule px-5 py-3.5">{footer}</footer>}
+    </aside>,
+    slot,
+  );
+}

package/src/components/Skeleton.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState, type ComponentProps } from 'react';
+
+import { cn } from '../lib/cn';
+import { useLoop } from './status-motion';
+
+export type SkeletonProps = ComponentProps<'div'>;
+
+/** Skeleton — a sunk placeholder block that breathes slowly (still under reduced motion). */
+export function Skeleton({ className, ...rest }: SkeletonProps) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  useLoop(ref, [{ opacity: 1 }, { opacity: 0.55 }, { opacity: 1 }], { duration: 1600, easing: 'ease-in-out' });
+  return <div ref={ref} aria-hidden className={cn('rounded-sm bg-well', className)} {...rest} />;
+}
+
+type Busy = { label?: string | undefined; className?: string | undefined };
+
+/** A list of rows loading. */
+export function SkeletonList({ rows = 6, label = 'Loading', className }: Busy & { rows?: number | undefined }) {
+  return (
+    <div role="status" aria-busy="true" aria-label={label} className={cn('flex flex-col', className)}>
+      {Array.from({ length: rows }, (_, i) => (
+        <div key={i} className="flex items-center gap-3 border-b border-rule-soft py-3">
+          <Skeleton className="size-8 rounded-md" />
+          <div className="flex flex-1 flex-col gap-2">
+            <Skeleton className="h-3 w-2/5" />
+            <Skeleton className="h-2.5 w-1/4" />
+          </div>
+          <Skeleton className="h-3 w-16" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** A grid of cards loading. */
+export function SkeletonCards({ count = 6, label = 'Loading', className }: Busy & { count?: number | undefined }) {
+  return (
+    <div role="status" aria-busy="true" aria-label={label} className={cn('grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-4', className)}>
+      {Array.from({ length: count }, (_, i) => (
+        <div key={i} className="flex flex-col gap-3 rounded-lg border border-rule p-3">
+          <Skeleton className="aspect-[4/3] w-full rounded-md" />
+          <Skeleton className="h-3 w-3/4" />
+          <Skeleton className="h-2.5 w-1/2" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export type SkeletonViewerProps = Busy & {
+  /** What the wait is called as it gets longer. @default Opening… then, after 3 s, Rendering page 1… */
+  messages?: { after: number; text: string }[] | undefined;
+};
+
+/** A document opening: a page placeholder whose wording changes on long waits. */
+export function SkeletonViewer({ messages = [{ after: 0, text: 'Opening…' }, { after: 3000, text: 'Rendering page 1…' }], className }: SkeletonViewerProps) {
+  const sorted = [...messages].sort((a, b) => a.after - b.after);
+  const [index, setIndex] = useState(0);
+  useEffect(() => {
+    const timers = sorted.slice(1).map((m, i) => setTimeout(() => setIndex(i + 1), m.after));
+    return () => timers.forEach(clearTimeout);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(sorted)]);
+  const text = sorted[index]?.text ?? '';
+  return (
+    <div role="status" aria-busy="true" className={cn('flex flex-col items-center gap-4 rounded-lg bg-sunk p-8', className)}>
+      <Skeleton className="aspect-[1/1.3] w-full max-w-[360px] rounded-md bg-page" />
+      <span aria-live="polite" className="text-meta font-medium text-fg-secondary">
+        {text}
+      </span>
+    </div>
+  );
+}

package/src/components/Spinner.tsx

@@ -0,0 +1,20 @@
+import { cn } from '../lib/cn';
+
+export type SpinnerProps = { size?: number | undefined; className?: string | undefined; label?: string | undefined };
+
+/** Spinner — a thin ring in currentColor. Still (a static arc) when the
+ *  user asks for reduced motion. Decorative unless labelled. */
+export function Spinner({ size = 14, className, label }: SpinnerProps) {
+  return (
+    <span
+      role={label ? 'status' : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      className={cn(
+        'inline-block shrink-0 rounded-pill border-[1.5px] border-current border-r-transparent motion-safe:animate-spin',
+        className,
+      )}
+      style={{ width: size, height: size }}
+    />
+  );
+}

package/src/components/StageProgress.tsx

@@ -0,0 +1,51 @@
+import { Check, X } from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { PulseDot } from './PulseDot';
+
+export type Stage = {
+  label: ReactNode;
+  state: 'done' | 'current' | 'todo' | 'failed';
+  /** Shown beside the state: "Batch 2 of 4", "Done", the failure. */
+  detail?: ReactNode;
+};
+
+export type StageProgressProps = Omit<ComponentProps<'ol'>, 'children'> & {
+  stages: Stage[];
+  /** Accessible name of the list. */
+  label?: string | undefined;
+};
+
+/**
+ * StageProgress — work that moves through named stages (Documents →
+ * People → Facts → Assessment → Report), not a percentage. Done stages are
+ * ink with a tick, the current one pulses on the brand colour, failed is red.
+ */
+export function StageProgress({ stages, label, className, ...rest }: StageProgressProps) {
+  return (
+    <ol aria-label={label} className={cn('m-0 flex list-none flex-wrap items-center gap-x-5 gap-y-2 p-0 font-sans', className)} {...rest}>
+      {stages.map((s, i) => (
+        <li key={i} aria-current={s.state === 'current' ? 'step' : undefined} data-state={s.state} className="flex items-center gap-2 text-small">
+          {s.state === 'done' ? (
+            <span className="grid size-4 place-items-center rounded-pill bg-fg text-page">
+              <Check size={10} strokeWidth={3} aria-hidden />
+            </span>
+          ) : s.state === 'failed' ? (
+            <span className="grid size-4 place-items-center rounded-pill bg-error text-white">
+              <X size={10} strokeWidth={3} aria-hidden />
+            </span>
+          ) : s.state === 'current' ? (
+            <span className="grid size-4 place-items-center">
+              <PulseDot size={9} />
+            </span>
+          ) : (
+            <span aria-hidden className="size-4 rounded-pill border border-rule" />
+          )}
+          <span className={cn(s.state === 'todo' ? 'text-fg-secondary' : 'text-fg', s.state === 'current' && 'font-medium')}>{s.label}</span>
+          {s.detail && <span className={cn('text-meta', s.state === 'failed' ? 'text-error-text' : 'text-fg-secondary')}>{s.detail}</span>}
+        </li>
+      ))}
+    </ol>
+  );
+}

package/src/components/Steps.tsx

@@ -0,0 +1,58 @@
+import { Check, Lock } from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type StepState = 'done' | 'current' | 'upcoming' | 'blocked';
+
+export type Step = {
+  title: ReactNode;
+  state: StepState;
+  /** The second line: "Done 22 Sep", "Current step", "Blocked · opens at the Term sheet stage". */
+  detail?: ReactNode;
+};
+
+export type StepsProps = Omit<ComponentProps<'ol'>, 'children'> & {
+  steps: Step[];
+  /** Read out for each state (the marker shows it visually). */
+  stateLabels?: Partial<Record<StepState, string>> | undefined;
+};
+
+const STATE_LABELS: Record<StepState, string> = { done: 'Done', current: 'Current step', upcoming: 'Not started', blocked: 'Blocked' };
+
+/**
+ * Steps — a path in four states: done (ink tick), current (brand disc,
+ * aria-current="step"), upcoming (outlined number), blocked (lock, with the
+ * reason in the detail line).
+ */
+export function Steps({ steps, stateLabels, className, ...rest }: StepsProps) {
+  const said = { ...STATE_LABELS, ...stateLabels };
+  return (
+    <ol className={cn('m-0 flex list-none flex-col p-0', className)} {...rest}>
+      {steps.map((s, i) => (
+        <li key={i} aria-current={s.state === 'current' ? 'step' : undefined} className="relative flex gap-3 pb-4 last:pb-0">
+          {i < steps.length - 1 && <span aria-hidden className="absolute top-6 bottom-0 left-[11px] w-px bg-rule" />}
+          <span
+            aria-hidden
+            className={cn(
+              'relative z-[1] grid size-[22px] shrink-0 place-items-center rounded-pill text-[11px] font-semibold tabular-nums',
+              s.state === 'done' && 'bg-fg text-page',
+              s.state === 'current' && 'bg-brand-mark text-ink',
+              s.state === 'upcoming' && 'border border-rule bg-page text-fg-secondary',
+              s.state === 'blocked' && 'bg-sunk text-fg-secondary',
+            )}
+          >
+            {s.state === 'done' ? <Check size={12} strokeWidth={2.5} /> : s.state === 'blocked' ? <Lock size={11} strokeWidth={2} /> : i + 1}
+          </span>
+          <div className="flex min-w-0 flex-col pt-0.5">
+            <span className={cn('text-ui font-medium', s.state === 'upcoming' || s.state === 'blocked' ? 'text-fg-secondary' : 'text-fg')}>
+              {s.title}
+              <span className="sr-only">, {said[s.state]}</span>
+            </span>
+            {s.detail && <span className="text-meta text-fg-secondary">{s.detail}</span>}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/src/components/Switch.tsx

@@ -0,0 +1,67 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { useId, type ComponentProps, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type SwitchProps = Omit<ComponentProps<typeof SwitchPrimitive.Root>, 'checked' | 'onCheckedChange' | 'onChange' | 'children'> & {
+  checked?: boolean | undefined;
+  /** Called when flipped — the setting applies at once. */
+  onChange?: ((checked: boolean) => void) | undefined;
+  /** Name the setting ("Require two-step verification"), never the action. */
+  label?: ReactNode;
+  description?: ReactNode;
+  /** Class for the whole row (className goes to the track). */
+  rowClassName?: string | undefined;
+};
+
+/**
+ * Switch — one setting that applies at once (a form choice is a
+ * Checkbox). Pill track: chrome when off, ink when on (linen in ink
+ * mode); the knob has no shadow. role="switch" with aria-checked.
+ */
+export function Switch({ checked, onChange, label, description, disabled, id, className, rowClassName, ...rest }: SwitchProps) {
+  const auto = useId();
+  const switchId = id ?? `sw${auto}`;
+  const descId = description ? `${switchId}-desc` : undefined;
+  const track = (
+    <SwitchPrimitive.Root
+      id={switchId}
+      {...(checked !== undefined && { checked })}
+      onCheckedChange={(v) => onChange?.(v)}
+      disabled={disabled}
+      aria-describedby={descId}
+      className={cn(
+        'relative inline-flex h-5 w-[34px] shrink-0 cursor-pointer items-center rounded-pill border border-rule bg-chrome p-0',
+        'transition-[background-color,border-color] duration-[120ms] ease-standard outline-none focus-visible:shadow-(--focus-ring)',
+        'data-[state=checked]:border-fg data-[state=checked]:bg-fg disabled:cursor-not-allowed',
+        className,
+      )}
+      {...rest}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'block size-3.5 translate-x-[2px] rounded-pill bg-paper transition-transform duration-[120ms] ease-standard',
+          'data-[state=checked]:translate-x-[16px] data-[state=checked]:bg-page',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+  if (!label && !description) return track;
+  return (
+    <div className={cn('inline-flex items-center gap-2.5 font-sans', description && 'items-start', disabled && 'opacity-40', rowClassName)}>
+      {track}
+      <span className="flex flex-col gap-0.5">
+        {label && (
+          <label htmlFor={switchId} className={cn('text-small leading-[1.45] text-fg', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}>
+            {label}
+          </label>
+        )}
+        {description && (
+          <span id={descId} className="text-meta leading-normal text-fg-secondary">
+            {description}
+          </span>
+        )}
+      </span>
+    </div>
+  );
+}

package/src/components/SyncStatus.tsx

@@ -0,0 +1,56 @@
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { PulseDot } from './PulseDot';
+
+/** synced (quiet) · syncing (pulsing brand dot) · error (red) · paused / off (grey ring). */
+export type SyncState = 'synced' | 'syncing' | 'error' | 'paused' | 'off';
+
+function Dot({ state }: { state: SyncState }) {
+  if (state === 'syncing') return <PulseDot size={8} />;
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        'inline-block size-2 shrink-0 rounded-pill',
+        state === 'error' && 'bg-error',
+        state === 'synced' && 'bg-fg-secondary',
+        (state === 'paused' || state === 'off') && 'border border-fg-secondary',
+      )}
+    />
+  );
+}
+
+export type SyncStatusProps = Omit<ComponentProps<'div'>, 'children'> & {
+  state: SyncState;
+  /** The wording, always present: "In sync", "Sync error", "Importing 2 batches". */
+  children: ReactNode;
+  /** Secondary detail: "Updated just now", "attempt 3". */
+  detail?: ReactNode;
+  /** One action, e.g. Retry. */
+  action?: ReactNode;
+  /** Dot only (the global indicator); the wording stays for screen readers and on hover. */
+  compact?: boolean | undefined;
+};
+
+/**
+ * SyncStatus — the global sync dot and the per-source sync lines ("Retrying
+ * after an error · attempt 3", "Paused by Wei Li", "Last synced 4 minutes
+ * ago"). Colour is never the only signal: the wording is always there.
+ */
+export function SyncStatus({ state, children, detail, action, compact = false, className, title, ...rest }: SyncStatusProps) {
+  return (
+    <div
+      role="status"
+      data-state={state}
+      title={compact ? (title ?? (typeof children === 'string' ? children : undefined)) : title}
+      className={cn('inline-flex items-center gap-2 font-sans text-small', state === 'error' ? 'text-error-text' : 'text-fg', className)}
+      {...rest}
+    >
+      <Dot state={state} />
+      <span className={compact ? 'sr-only' : undefined}>{children}</span>
+      {detail && <span className={cn('text-meta text-fg-secondary', compact && 'sr-only')}>{detail}</span>}
+      {action && !compact && <span className="ml-1">{action}</span>}
+    </div>
+  );
+}

package/src/components/Table.tsx

@@ -0,0 +1,196 @@
+import { ArrowDown, ArrowUp } from 'lucide-react';
+import type { ComponentProps, KeyboardEvent, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type TableSortDirection = 'asc' | 'desc';
+export type TableSort = { key: string; direction: TableSortDirection };
+
+export type TableColumn<R> = {
+  key: string;
+  label: ReactNode;
+  /** Numbers and dates right-aligned (tabular). @default "left" */
+  align?: 'left' | 'right' | undefined;
+  /** Quiet metadata cell: 12px grey, tabular. */
+  meta?: boolean | undefined;
+  width?: number | string | undefined;
+  /** Header click sorts by this column. */
+  sortable?: boolean | undefined;
+  render?: ((row: R) => ReactNode) | undefined;
+};
+
+export type TableRowBase = {
+  id: string | number;
+  /** attention (yellow wash) or error (red wash); progress and complete stay plain — the status column says them. */
+  status?: 'attention' | 'error' | 'progress' | 'complete' | 'neutral' | undefined;
+  [key: string]: unknown;
+};
+
+export type TableProps<R extends TableRowBase> = Omit<ComponentProps<'table'>, 'children'> & {
+  columns: TableColumn<R>[];
+  rows: R[];
+  /** Opening a row. The row is also reachable by keyboard (Enter). Prefer a real link in the first column (rowHref). */
+  onRowClick?: ((row: R) => void) | undefined;
+  /** Makes the first column a real link to the row. */
+  rowHref?: ((row: R) => string) | undefined;
+  sort?: TableSort | undefined;
+  onSortChange?: ((sort: TableSort) => void) | undefined;
+  dense?: boolean | undefined;
+  /** Keep the head and show five skeleton rows. */
+  loading?: boolean | undefined;
+  /** One line and one action for an empty table. */
+  empty?: ReactNode;
+  /** Accessible name / visible caption. */
+  caption?: ReactNode;
+};
+
+const ARIA_SORT = { asc: 'ascending', desc: 'descending' } as const;
+
+/**
+ * Table — a register: linen head, hairline rows, a wash on rows that need a
+ * person (attention yellow, overdue red). For lists people compare and
+ * sort; for browsing use list rows or cards. Six columns at most. On phones
+ * each row becomes a card: the first column as the title, the rest one
+ * line of metadata.
+ */
+export function Table<R extends TableRowBase>({
+  columns,
+  rows,
+  onRowClick,
+  rowHref,
+  sort,
+  onSortChange,
+  dense = false,
+  loading = false,
+  empty,
+  caption,
+  className,
+  ...rest
+}: TableProps<R>) {
+  const pad = dense ? 'px-3 py-[7px]' : 'px-3.5 py-2.5';
+  const cell = (r: R, c: TableColumn<R>) => (c.render ? c.render(r) : (r[c.key] as ReactNode));
+
+  return (
+    <table className={cn('w-full border-collapse font-sans text-[13px] text-fg', 'max-sm:block', className)} {...rest}>
+      {caption && <caption className="pb-2 text-left text-meta font-medium text-fg-secondary max-sm:block">{caption}</caption>}
+      <thead className="max-sm:sr-only">
+        <tr>
+          {columns.map((c) => {
+            const active = sort?.key === c.key;
+            const next: TableSort = { key: c.key, direction: active && sort?.direction === 'asc' ? 'desc' : 'asc' };
+            return (
+              <th
+                key={c.key}
+                scope="col"
+                aria-sort={c.sortable ? (active ? ARIA_SORT[sort!.direction] : 'none') : undefined}
+                style={c.width !== undefined ? { width: c.width } : undefined}
+                className={cn(pad, 'border-b border-rule bg-sunk text-meta font-medium whitespace-nowrap text-fg-secondary', c.align === 'right' ? 'text-right' : 'text-left')}
+              >
+                {c.sortable && onSortChange ? (
+                  <button
+                    type="button"
+                    onClick={() => onSortChange(next)}
+                    className={cn(
+                      'inline-flex cursor-pointer items-center gap-1 rounded-xs border-0 bg-transparent p-0 font-[inherit] text-[length:inherit] font-medium outline-none hover:text-fg focus-visible:shadow-(--focus-ring)',
+                      active ? 'text-fg' : 'text-fg-secondary',
+                      c.align === 'right' && 'flex-row-reverse',
+                    )}
+                  >
+                    {c.label}
+                    {active && (sort!.direction === 'asc' ? <ArrowUp size={12} aria-hidden /> : <ArrowDown size={12} aria-hidden />)}
+                  </button>
+                ) : (
+                  c.label
+                )}
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody className="max-sm:flex max-sm:w-full max-sm:flex-col max-sm:gap-2">
+        {loading
+          ? Array.from({ length: 5 }, (_, i) => (
+              <tr key={i} aria-hidden className="max-sm:flex max-sm:w-full max-sm:gap-3">
+                {columns.map((c) => (
+                  <td key={c.key} className={cn(pad, 'border-b border-rule-soft')}>
+                    <span className="block h-3 w-3/4 rounded-xs bg-well motion-safe:animate-pulse" />
+                  </td>
+                ))}
+              </tr>
+            ))
+          : rows.length === 0 && empty
+            ? (
+                <tr>
+                  <td colSpan={columns.length} className="px-3.5 py-6 text-center text-small text-fg-secondary">
+                    {empty}
+                  </td>
+                </tr>
+              )
+            : rows.map((r) => {
+                const wash =
+                  r.status === 'attention'
+                    ? 'bg-attention-wash ink:bg-yellow-accent/15'
+                    : r.status === 'error'
+                      ? 'bg-error-wash ink:bg-error/20'
+                      : 'hover:bg-hover';
+                const clickable = Boolean(onRowClick);
+                return (
+                  <tr
+                    key={r.id}
+                    data-status={r.status}
+                    onClick={clickable ? () => onRowClick!(r) : undefined}
+                    onKeyDown={
+                      clickable && !rowHref
+                        ? (e: KeyboardEvent<HTMLTableRowElement>) => {
+                            if (e.target === e.currentTarget && (e.key === 'Enter' || e.key === ' ')) {
+                              e.preventDefault();
+                              onRowClick!(r);
+                            }
+                          }
+                        : undefined
+                    }
+                    tabIndex={clickable && !rowHref ? 0 : undefined}
+                    className={cn(
+                      'transition-colors duration-[120ms] ease-standard outline-none focus-visible:shadow-[inset_0_0_0_2px_var(--text-primary)]',
+                      wash,
+                      clickable && 'cursor-pointer',
+                      'max-sm:box-border max-sm:flex max-sm:w-full max-sm:flex-wrap max-sm:gap-x-2 max-sm:rounded-lg max-sm:border max-sm:border-rule max-sm:px-4 max-sm:py-3',
+                    )}
+                  >
+                    {columns.map((c, i) => {
+                      const content = cell(r, c);
+                      return (
+                        <td
+                          key={c.key}
+                          className={cn(
+                            pad,
+                            'border-b border-rule-soft align-middle',
+                            c.align === 'right' && 'text-right tabular-nums',
+                            c.meta && 'text-meta whitespace-nowrap text-fg-secondary tabular-nums',
+                            // Phones: title line, then one line of metadata.
+                            'max-sm:border-0 max-sm:p-0',
+                            i === 0 ? 'max-sm:w-full max-sm:text-ui max-sm:font-medium' : 'max-sm:text-meta max-sm:text-fg-secondary',
+                            i > 1 && "max-sm:before:content-['·_']",
+                          )}
+                        >
+                          {i === 0 && rowHref ? (
+                            <a
+                              href={rowHref(r)}
+                              onClick={(e) => e.stopPropagation()}
+                              className="rounded-xs text-fg no-underline outline-none hover:underline focus-visible:shadow-(--focus-ring)"
+                            >
+                              {content}
+                            </a>
+                          ) : (
+                            content
+                          )}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                );
+              })}
+      </tbody>
+    </table>
+  );
+}