@cosxai/ui 0.25.0 → 1.0.0-alpha.1

package/src/components/Select.tsx

@@ -0,0 +1,351 @@
+import * as Popover from '@radix-ui/react-popover';
+import { Check, ChevronDown, Search, X } from 'lucide-react';
+import { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { useField } from './Field';
+import { controlFrame } from './forms-control';
+
+export type SelectOption = {
+  value: string;
+  label: string;
+  /** Right-aligned secondary text: a count, a date — or, on a disabled row, the reason. */
+  meta?: string | undefined;
+  /** Rows sharing a group label are headed by it, in source order. */
+  group?: string | undefined;
+  disabled?: boolean | undefined;
+};
+
+export type SelectProps = {
+  options: Array<string | SelectOption>;
+  value?: string | undefined;
+  onChange?: ((value: string) => void) | undefined;
+  /** @default "Choose one" */
+  placeholder?: string | undefined;
+  /** A filter field at the top of the menu. Defaults to on above 8 options. */
+  searchable?: boolean | undefined;
+  /** @default "Nothing matches that." */
+  emptyText?: string | undefined;
+  /** Placeholder of the filter field. @default "Filter" */
+  filterPlaceholder?: string | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** 32 · 38 · 44. @default "md" */
+  size?: 'sm' | 'md' | 'lg' | undefined;
+  /** auto (default): opens upward when below is short and above has more room; top / bottom force it. */
+  placement?: 'auto' | 'top' | 'bottom' | undefined;
+  /** Start open (uncontrolled). */
+  defaultOpen?: boolean | undefined;
+  id?: string | undefined;
+  name?: string | undefined;
+  className?: string | undefined;
+  'aria-label'?: string | undefined;
+  'aria-labelledby'?: string | undefined;
+  'aria-describedby'?: string | undefined;
+};
+
+const TYPEAHEAD_MS = 600;
+
+function normalise(options: SelectProps['options']): SelectOption[] {
+  return options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
+}
+
+/**
+ * Select — a styled listbox for a fixed set of 3 to 15 (two options: a
+ * switch or segment; many or remote: the async search select). The menu
+ * renders in a portal so dialogs don't clip it and opens upward when it
+ * must. Arrows move, Enter chooses, Esc closes, Home/End jump, a letter
+ * jumps to it. The chosen row sits on the brand colour; disabled rows stay
+ * visible with their reason. No shadow — paper lifted by its hairline.
+ */
+export function Select({
+  options,
+  value,
+  onChange,
+  placeholder = 'Choose one',
+  searchable,
+  emptyText = 'Nothing matches that.',
+  filterPlaceholder = 'Filter',
+  invalid,
+  disabled,
+  size,
+  placement = 'auto',
+  defaultOpen = false,
+  id,
+  name,
+  className,
+  ...aria
+}: SelectProps) {
+  const field = useField();
+  const auto = useId();
+  const listId = `sl${auto}-list`;
+  const triggerId = id ?? field?.id ?? `sl${auto}-trigger`;
+  const optionId = (i: number) => `sl${auto}-o${i}`;
+  const all = useMemo(() => normalise(options), [options]);
+  const canSearch = searchable ?? all.length > 8;
+  const selected = all.find((o) => o.value === value);
+  const bad = Boolean(invalid || field?.invalid);
+  const off = Boolean(disabled || field?.disabled);
+
+  const [open, setOpen] = useState(defaultOpen);
+  const [query, setQuery] = useState('');
+  const [active, setActive] = useState(() => (defaultOpen ? Math.max(0, all.findIndex((o) => o.value === value)) : -1));
+  const listRef = useRef<HTMLDivElement | null>(null);
+  const filterRef = useRef<HTMLInputElement | null>(null);
+  const typed = useRef({ text: '', at: 0 });
+
+  const shown = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return q ? all.filter((o) => `${o.label} ${o.meta ?? ''}`.toLowerCase().includes(q)) : all;
+  }, [all, query]);
+
+  const enabled = (i: number) => i >= 0 && i < shown.length && !shown[i]!.disabled;
+  const step = (from: number, dir: 1 | -1) => {
+    for (let i = from + dir; i >= 0 && i < shown.length; i += dir) if (enabled(i)) return i;
+    return from;
+  };
+  const first = () => step(-1, 1);
+  const last = () => step(shown.length, -1);
+
+  // Keep the active row in view.
+  useEffect(() => {
+    if (!open || active < 0) return;
+    const el = listRef.current?.querySelector<HTMLElement>(`#${CSS.escape(optionId(active))}`);
+    el?.scrollIntoView?.({ block: 'nearest' });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active, open]);
+
+  const openWith = (index?: number) => {
+    setQuery('');
+    const cur = all.findIndex((o) => o.value === value);
+    setActive(index ?? (cur >= 0 && !all[cur]!.disabled ? cur : step(-1, 1)));
+    setOpen(true);
+  };
+  const choose = (i: number) => {
+    const o = shown[i];
+    if (!o || o.disabled) return;
+    onChange?.(o.value);
+    setOpen(false);
+  };
+
+  /** First-letter jump: repeated keys cycle, fast typing matches a prefix. */
+  const typeahead = (key: string, from: number) => {
+    const now = Date.now();
+    const t = typed.current;
+    t.text = now - t.at < TYPEAHEAD_MS ? t.text + key.toLowerCase() : key.toLowerCase();
+    t.at = now;
+    const cycling = t.text.length > 1 && t.text.split('').every((c) => c === t.text[0]);
+    const prefix = cycling ? t.text[0]! : t.text;
+    const start = cycling || t.text.length === 1 ? from + 1 : from;
+    for (let n = 0; n < shown.length; n++) {
+      const i = (start + n) % shown.length;
+      if (enabled(i) && shown[i]!.label.toLowerCase().startsWith(prefix)) return i;
+    }
+    return -1;
+  };
+
+  const onTriggerKey = (e: KeyboardEvent<HTMLButtonElement>) => {
+    if (off || open) return;
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      openWith();
+    } else if (e.key.length === 1 && /\S/.test(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      const cur = all.findIndex((o) => o.value === value);
+      const hit = typeahead(e.key, cur);
+      if (hit >= 0) {
+        e.preventDefault();
+        openWith(hit);
+      }
+    }
+  };
+
+  const onMenuKey = (e: KeyboardEvent<HTMLElement>) => {
+    const inFilter = e.currentTarget === filterRef.current;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setActive((a) => (a < 0 ? first() : step(a, 1)));
+        return;
+      case 'ArrowUp':
+        e.preventDefault();
+        setActive((a) => (a < 0 ? last() : step(a, -1)));
+        return;
+      case 'Home':
+        if (inFilter) return;
+        e.preventDefault();
+        setActive(first());
+        return;
+      case 'End':
+        if (inFilter) return;
+        e.preventDefault();
+        setActive(last());
+        return;
+      case 'Enter':
+        e.preventDefault();
+        choose(active);
+        return;
+      case 'Tab':
+        setOpen(false);
+        return;
+      default:
+        if (!inFilter && e.key.length === 1 && /\S/.test(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) {
+          const hit = typeahead(e.key, active);
+          if (hit >= 0) {
+            e.preventDefault();
+            setActive(hit);
+          }
+        }
+    }
+  };
+
+  // Rows in source order, runs of a group wrapped in a labelled group.
+  const rows: ReactNode[] = [];
+  let i = 0;
+  while (i < shown.length) {
+    const group = shown[i]!.group;
+    const start = i;
+    while (i < shown.length && shown[i]!.group === group) i++;
+    const items = shown.slice(start, i).map((o, k) => {
+      const idx = start + k;
+      const on = o.value === value;
+      return (
+        <div
+          key={o.value}
+          id={optionId(idx)}
+          role="option"
+          aria-label={o.meta ? `${o.label}, ${o.meta}` : undefined}
+          aria-selected={on}
+          aria-disabled={o.disabled || undefined}
+          data-active={idx === active || undefined}
+          onMouseMove={() => enabled(idx) && idx !== active && setActive(idx)}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => choose(idx)}
+          className={cn(
+            'flex items-center gap-2 rounded-md px-2.5 py-2 text-[13px] leading-[1.35] text-fg transition-colors duration-[120ms] ease-standard',
+            o.disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer',
+            on ? 'bg-brand-field font-medium text-ink' : idx === active && 'bg-hover',
+          )}
+        >
+          <span className="min-w-0 flex-1 truncate">{o.label}</span>
+          {o.meta && <span className={cn('shrink-0 text-meta tabular-nums', on ? 'text-fg-on-yellow-secondary' : 'text-fg-secondary')}>{o.meta}</span>}
+          {on && <Check size={13} strokeWidth={2} aria-hidden className="shrink-0" />}
+        </div>
+      );
+    });
+    if (group) {
+      const gid = `sl${auto}-g${start}`;
+      rows.push(
+        <div key={gid} role="group" aria-labelledby={gid}>
+          <div id={gid} className="px-2.5 pt-2 pb-1 text-meta font-medium text-fg-secondary">
+            {group}
+          </div>
+          {items}
+        </div>,
+      );
+    } else rows.push(...items);
+  }
+
+  return (
+    <Popover.Root open={open} onOpenChange={(o) => (o ? openWith() : setOpen(false))}>
+      <Popover.Trigger asChild disabled={off}>
+        <button
+          type="button"
+          id={triggerId}
+          role="combobox"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          aria-controls={open ? listId : undefined}
+          aria-invalid={bad || undefined}
+          aria-label={aria['aria-label']}
+          aria-labelledby={aria['aria-labelledby']}
+          aria-describedby={cn(aria['aria-describedby'], field?.describedBy) || undefined}
+          disabled={off}
+          onKeyDown={onTriggerKey}
+          className={cn(
+            controlFrame({ size, invalid: bad, disabled: off }),
+            'cursor-pointer text-left outline-none focus-visible:border-fg focus-visible:shadow-(--focus-ring) disabled:cursor-not-allowed',
+            open && !bad && 'border-fg shadow-(--focus-ring)',
+            className,
+          )}
+        >
+          <span className={cn('min-w-0 flex-1 truncate', !selected && 'text-fg-secondary')}>{selected ? selected.label : placeholder}</span>
+          {selected?.meta && <span className="shrink-0 text-meta text-fg-secondary">{selected.meta}</span>}
+          <ChevronDown
+            size={14}
+            aria-hidden
+            className={cn('shrink-0 text-fg-secondary transition-transform duration-[320ms] ease-out', open && 'rotate-180')}
+          />
+        </button>
+      </Popover.Trigger>
+      {name && <input type="hidden" name={name} value={value ?? ''} />}
+      <Popover.Portal>
+        <Popover.Content
+          side={placement === 'top' ? 'top' : 'bottom'}
+          align="start"
+          sideOffset={6}
+          {...(aria['aria-labelledby'] ?? field?.labelId
+            ? { 'aria-labelledby': aria['aria-labelledby'] ?? field?.labelId }
+            : { 'aria-label': aria['aria-label'] ?? placeholder })}
+          collisionPadding={12}
+          avoidCollisions={placement === 'auto'}
+          onOpenAutoFocus={(e) => {
+            e.preventDefault();
+            (canSearch ? filterRef.current : listRef.current)?.focus();
+          }}
+          className="rise z-60 flex flex-col overflow-hidden rounded-lg border border-rule bg-page p-1 font-sans text-fg [--motion-reveal:200ms]"
+          style={{
+            minWidth: 'var(--radix-popover-trigger-width)',
+            maxHeight: 'min(280px, calc(var(--radix-popover-content-available-height) - 12px))',
+          }}
+        >
+          {canSearch && (
+            <div className="mb-1 flex shrink-0 items-center gap-[7px] border-b border-rule-soft px-2 pt-[5px] pb-2">
+              <Search size={13} aria-hidden className="shrink-0 text-fg-secondary" />
+              <input
+                ref={filterRef}
+                value={query}
+                onChange={(e) => {
+                  setQuery(e.target.value);
+                  setActive(-1);
+                }}
+                onKeyDown={onMenuKey}
+                placeholder={filterPlaceholder}
+                aria-label={filterPlaceholder}
+                aria-controls={listId}
+                aria-activedescendant={active >= 0 ? optionId(active) : undefined}
+                aria-autocomplete="list"
+                role="combobox"
+                aria-expanded
+                className="min-w-0 flex-1 border-none bg-transparent p-0 font-sans text-[13px] text-fg outline-none placeholder:text-fg-secondary"
+              />
+              {query && (
+                <button
+                  type="button"
+                  aria-label="Clear"
+                  onClick={() => {
+                    setQuery('');
+                    filterRef.current?.focus();
+                  }}
+                  className="inline-grid cursor-pointer place-items-center rounded-xs p-0.5 text-fg-secondary outline-none hover:text-fg focus-visible:shadow-(--focus-ring)"
+                >
+                  <X size={12} aria-hidden />
+                </button>
+              )}
+            </div>
+          )}
+          <div
+            ref={listRef}
+            id={listId}
+            role="listbox"
+            tabIndex={canSearch ? undefined : -1}
+            aria-activedescendant={!canSearch && active >= 0 ? optionId(active) : undefined}
+            onKeyDown={canSearch ? undefined : onMenuKey}
+            className="min-h-0 flex-1 overflow-y-auto outline-none"
+          >
+            {shown.length === 0 ? <div className="px-2.5 pt-2.5 pb-3 text-[12.5px] text-fg-secondary">{emptyText}</div> : rows}
+          </div>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

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/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/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>
+  );
+}