cursedbelt 5.40.0 → 5.45.0

package/src/react/components/BannerLane.tsx

@@ -0,0 +1,128 @@
+import { AlertTriangle, Info, XCircle } from 'lucide-react';
+import { type ReactNode, useId, useState } from 'react';
+import { cn } from '../lib/cn.js';
+import { Button } from './Button.js';
+import { ButtonLink } from './ButtonLink.js';
+
+export interface ShellBanner {
+  /** Stable key. */
+  id: string;
+  /** ONE sentence — what is wrong, in the owner's words. Never a paragraph (CPY-1). */
+  message: ReactNode;
+  /** `warning` (default) for a degraded app, `error` for a broken one, `info` for a plain fact. */
+  tone?: 'info' | 'warning' | 'error';
+  /** Leading icon. Omit for the tone's own. */
+  icon?: ReactNode;
+  /** The ONE thing to do about it — "Reconnect", "Wake the Mac". */
+  action?: { label: string; onClick?: () => void; href?: string };
+}
+
+export interface BannerLaneProps {
+  banners: readonly ShellBanner[];
+  className?: string;
+}
+
+const TONE = {
+  info: 'bg-accent/10 [&_[data-cb-banner-icon]]:text-accent',
+  warning: 'bg-warning/10 [&_[data-cb-banner-icon]]:text-warning',
+  error: 'bg-destructive/10 [&_[data-cb-banner-icon]]:text-destructive',
+} as const;
+
+const ICON = { info: <Info />, warning: <AlertTriangle />, error: <XCircle /> } as const;
+
+/** The worst tone in a set: an error outranks a warning outranks a fact. */
+const worst = (banners: readonly ShellBanner[]): keyof typeof TONE =>
+  banners.some((b) => b.tone === 'error')
+    ? 'error'
+    : banners.some((b) => (b.tone ?? 'warning') === 'warning')
+      ? 'warning'
+      : 'info';
+
+/**
+ * The shell's ONE banner lane (NAV-10): app-wide conditions — a sign-in broke, the Mac is
+ * asleep, the app is offline — as full-width, one-line ribbons between the header and the
+ * page. Icon, sentence, one action. Two or more collapse into "N problems · View", so a bad
+ * morning is one line tall until the reader asks for the list.
+ *
+ * A banner is never a card inside the page, and never repeated on the page it links to.
+ * `AppShell banners` renders this; a shell of an app's own can render it directly.
+ */
+export function BannerLane({ banners, className }: BannerLaneProps) {
+  const [open, setOpen] = useState(false);
+  const listId = useId();
+  if (banners.length === 0) return null;
+
+  const only = banners.length === 1 ? banners[0] : undefined;
+  return (
+    <section
+      aria-label='App alerts'
+      data-cb-banner-lane=''
+      className={cn('shrink-0 border-b border-border', className)}
+    >
+      {only ? (
+        <BannerLine banner={only} />
+      ) : (
+        <>
+          <div
+            data-cb-banner=''
+            className={cn('flex min-h-10 items-center gap-3 px-3 py-1.5 text-sm md:px-6', TONE[worst(banners)])}
+          >
+            <span data-cb-banner-icon='' aria-hidden='true' className='grid size-5 shrink-0 place-items-center [&_svg]:size-4'>
+              {ICON[worst(banners)]}
+            </span>
+            <span className='min-w-0 flex-1 truncate font-medium text-foreground'>{banners.length} problems</span>
+            <Button
+              variant='ghost'
+              size='sm'
+              aria-expanded={open}
+              aria-controls={listId}
+              onClick={() => setOpen((o) => !o)}
+              tooltip={open ? 'Hide the list' : `Show all ${banners.length}`}
+              tooltipMobile='off'
+            >
+              {open ? 'Hide' : 'View'}
+            </Button>
+          </div>
+          {open ? (
+            <ul id={listId} className='divide-y divide-border border-t border-border'>
+              {banners.map((banner) => (
+                <li key={banner.id}>
+                  <BannerLine banner={banner} />
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </>
+      )}
+    </section>
+  );
+}
+
+function BannerLine({ banner }: { banner: ShellBanner }) {
+  const tone = banner.tone ?? 'warning';
+  const { action } = banner;
+  return (
+    <div
+      data-cb-banner=''
+      role={tone === 'error' ? 'alert' : 'status'}
+      className={cn('flex min-h-10 items-center gap-3 px-3 py-1.5 text-sm md:px-6', TONE[tone])}
+    >
+      <span data-cb-banner-icon='' aria-hidden='true' className='grid size-5 shrink-0 place-items-center [&_svg]:size-4'>
+        {banner.icon ?? ICON[tone]}
+      </span>
+      {/* One line: a long sentence truncates rather than growing the lane (NAV-10). */}
+      <span className='min-w-0 flex-1 truncate text-foreground'>{banner.message}</span>
+      {action ? (
+        action.href ? (
+          <ButtonLink to={action.href} variant='ghost' size='sm' onClick={action.onClick} tooltip={action.label}>
+            {action.label} →
+          </ButtonLink>
+        ) : (
+          <Button variant='ghost' size='sm' onClick={action.onClick} tooltip={action.label} tooltipMobile='off'>
+            {action.label} →
+          </Button>
+        )
+      ) : null}
+    </div>
+  );
+}

package/src/react/components/Button.tsx

@@ -242,8 +242,10 @@ export function Button({
           resetTimer.current = setTimeout(() => setJustSucceeded(false), resetMs);
         } catch (err) {
           if (errorMessage !== false) {
+            // OVL-9: an error toast carries the action that resolves it.
             toast.error(
               typeof errorMessage === 'string' ? errorMessage : err instanceof Error ? err.message : String(err),
+              { action: { label: 'Retry', onClick: () => void handleClick?.(e) } },
             );
           }
         } finally {

package/src/react/components/ChipFilterStrip.tsx

@@ -121,7 +121,7 @@ function Chip({ active, onClick, children }: ChipProps) {
       className={cn(
         // 44 px min tap target height via py + min-h (STANDARDS §4a). px-4 keeps every
         // pill's internal padding identical regardless of label length.
-        'inline-flex min-h-[44px] shrink-0 cursor-pointer items-center rounded-full px-4 text-sm font-medium transition-colors',
+        'inline-flex min-h-11 shrink-0 cursor-pointer items-center rounded-full px-4 text-sm font-medium transition-colors',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
         // Soft active state — an accent tint + accent text (the standardized active
         // treatment shared with nav items and the `accent` Badge tone), not a stark

package/src/react/components/ComboboxField.tsx

@@ -4,7 +4,13 @@ import { Combobox } from '@base-ui/react/combobox';
 import { Check, ChevronDown, Loader2, Plus, X } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { cn } from '../lib/cn.js';
-import { CONTROL_HEIGHT_CLASS, CONTROL_MIN_HEIGHT_CLASS, type ControlSize, declareFieldWidth } from '../lib/field.js';
+import {
+  CONTROL_HEIGHT_CLASS,
+  CONTROL_MIN_HEIGHT_CLASS,
+  type ControlSize,
+  choiceFieldWidth,
+  declareFieldWidth,
+} from '../lib/field.js';
 import { FLOATING_COLLISION_PADDING,
   FLOATING_CONTENT_BASE, FLOATING_ITEM_BASE } from '../lib/floatingStyles.js';
 import { TAP_TARGET } from '../lib/tapTarget.js';
@@ -242,6 +248,10 @@ export function ComboboxField(props: ComboboxFieldProps) {
       value={(multiple ? multiValue : singleValue) as never}
       onValueChange={handleValueChange as never}
       onInputValueChange={(v) => setQuery(v)}
+      // The value is the option's `value` string, the items are option objects: without this
+      // Base UI writes `String(value)` into the closed input — "electric", not "Electric"
+      // (forge task 2514). Called with both shapes.
+      itemToStringLabel={((v: string | ComboboxOption) => (typeof v === 'string' ? labelForValue(v) : v.label)) as never}
     >
       <Combobox.InputGroup className={inputGroupClass}>
         {multiple && (
@@ -269,7 +279,9 @@ export function ComboboxField(props: ComboboxFieldProps) {
           id={id}
           aria-describedby={ariaDescribedBy}
           aria-invalid={ariaInvalid}
-          placeholder={placeholder}
+          // Once a chip is chosen the prompt has done its job: "Select…" beside "Idea ×" reads
+          // as if nothing were selected (forge task 2514).
+          placeholder={multiple && (multiValue?.length ?? 0) > 0 ? undefined : placeholder}
           className={cn(
             'min-w-24 flex-1 bg-transparent px-3 text-base text-field-fg outline-none placeholder:text-field-placeholder sm:text-sm',
             multiple && 'py-1.5',
@@ -320,4 +332,9 @@ export function ComboboxField(props: ComboboxFieldProps) {
   );
 }
 
-declareFieldWidth(ComboboxField, (props) => (props.multiple ? 'full' : 'md'));
+// FRM-3: a closed list is sized by its longest option, as SelectField is. A list that can hold
+// a value nobody has seen yet — fetched (`loadOptions`) or typed (`creatable`) — keeps a
+// name-length `md`; a chip row (`multiple`) keeps the whole row.
+declareFieldWidth(ComboboxField, (props) =>
+  props.multiple ? 'full' : props.loadOptions || props.creatable ? 'md' : choiceFieldWidth(props),
+);

package/src/react/components/CommentThread.tsx

@@ -108,7 +108,7 @@ function Composer({
           if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) submit();
           if (e.key === 'Escape') onCancel?.();
         }}
-        className={cn(FIELD_CLASS, 'min-h-[2.25rem] flex-1')}
+        className={cn(FIELD_CLASS, 'min-h-9 flex-1')}
       />
       <Button
         variant='primary'
@@ -177,7 +177,7 @@ function CommentItem({
                 value={draft}
                 rows={1}
                 onChange={(e) => setDraft(e.target.value)}
-                className={cn(FIELD_CLASS, 'min-h-[2.25rem] flex-1')}
+                className={cn(FIELD_CLASS, 'min-h-9 flex-1')}
               />
               <Button
                 variant='primary'

package/src/react/components/ConfirmDialog.tsx

@@ -53,7 +53,7 @@ export function ConfirmDialog({
       <DialogContent
         ref={contentRef}
         className={cn(
-          'fixed top-1/2 left-1/2 flex w-[calc(100vw-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 flex-col gap-4',
+          'fixed top-1/2 left-1/2 flex w-[calc(100vw-2rem)] max-w-[var(--modal-w-sm)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4',
           'rounded-xl border border-border bg-popover p-6 text-popover-foreground shadow-overlay',
           'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',

package/src/react/components/DataTable/DataTable.tsx

@@ -50,12 +50,14 @@ import { SortHeader } from './SortHeader.js';
 import type {
   ColDef,
   DataTableHandle,
+  DataTableRowAction,
   DataTableRowProps,
   DataTableSelectAll,
   DataTableServerWindow,
   TableViewMode,
 } from './types.js';
-import { resolveColumnAlign, SELECT_COLUMN_ID } from './types.js';
+import { isNumericColumn, resolveColumnAlign, SELECT_COLUMN_ID, untypedNumericColumn } from './types.js';
+import { devWarnOnce } from '../../lib/devWarn.js';
 import { AUTO_TRACK_FLOOR_PX, columnFloor, columnsDroppedForWidth } from './columnPriority.js';
 import { lazyPart } from './lazyPart.js';
 import type { TablePaginationProps } from './Pagination.js';
@@ -105,7 +107,7 @@ function ToolbarPlaceholder() {
 /** Where the pager will be, the height it will be. */
 function PaginationPlaceholder() {
   return (
-    <div data-cb-table-pagination-pending='' aria-hidden className='border-t border-border px-4 py-2.5'>
+    <div data-cb-table-pagination-pending='' aria-hidden className='border-t border-border px-4 py-2'>
       <div className={cn('h-8', TAP_TARGET_HEIGHT)} />
     </div>
   );
@@ -143,6 +145,8 @@ declare module '@tanstack/react-table' {
     minWidth?: number;
     hideBelow?: 'sm' | 'md' | 'lg';
     leading?: boolean;
+    /** The column's values are numbers — its header and cells set `tabular-nums` (DAT-1). */
+    numeric?: boolean;
   }
   interface TableMeta<TData extends RowData> {
     /** {@link DataTableControls} — see its doc for why it rides on the table. */
@@ -229,6 +233,12 @@ export interface DataTableProps<TRow extends Record<string, unknown>> {
   /** The kebab's accessible name for one row — `(row) => \`More for ${row.title}\``. Default
    *  `Row actions`, identical on every row. */
   rowMenuLabel?: (row: TRow) => string;
+  /**
+   * The row's ONE optional inline action, beside its `⋯` (DAT-5) — only when it is the row's
+   * reason to exist ("Play", "Retry"). Return `null` for a row that has none. Everything else
+   * goes in {@link rowMenu}. Renders the actions column.
+   */
+  rowAction?: (row: TRow) => DataTableRowAction | null;
   loading?: boolean;
   /** Shown when there are no rows (default: a plain "No results"). */
   emptyState?: ReactNode;
@@ -290,6 +300,14 @@ export interface DataTableProps<TRow extends Record<string, unknown>> {
    * cells vary wildly and that never claimed fixed lanes.
    */
   fixedLayout?: boolean;
+  /**
+   * Keep the table's MEASURE (DAT-3, LAY-2): it takes its columns' natural content width, up
+   * to its container, instead of stretching every column across a 1536px page. A dense table
+   * spread over a 2,560px monitor is a row nobody can track from its name to its numbers. The
+   * table hugs the left edge and the toolbar keeps the container's width. Off by default,
+   * because a fixed-layout table's proportional tracks need the full width to mean anything.
+   */
+  fit?: boolean;
   /**
    * EXTRA freeze floor for the wide grid (px): below this the columns stop
    * compressing and the wrapper scrolls horizontally instead — the design
@@ -910,6 +928,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
   onRowDelete,
   rowMenu,
   rowMenuLabel,
+  rowAction,
   loading,
   emptyState,
   toolbar,
@@ -925,6 +944,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
   rowClassName,
   hideEmptyColumns,
   fixedLayout,
+  fit = false,
   minTableWidth,
   scrollBody,
   virtualize,
@@ -1048,6 +1068,18 @@ export function DataTable<TRow extends Record<string, unknown>>({
     [columns, data, hideEmptyColumns],
   );
 
+  // DAT-1: a plain-text column of numbers left-aligns them in proportional digits, which is
+  // the misalignment the type system exists to prevent. Warn the author (dev only, once per
+  // column) instead of guessing — a column of zip codes or years is "numeric" and is not.
+  useEffect(() => {
+    if (data.length === 0) return;
+    const sample = data.slice(0, 50);
+    for (const col of columns) {
+      const warning = untypedNumericColumn(col, sample.map((row) => readPath(row, col.key)));
+      if (warning) devWarnOnce(`datatable-untyped-numeric:${col.key}`, warning);
+    }
+  }, [columns, data]);
+
   /**
    * The filter BUILDER is applied to the rows before TanStack ever sees them,
    * and that is deliberate: it is what makes the builder AND with the search box
@@ -1109,6 +1141,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
           label: col.label,
           menuLabel: col.menuLabel,
           align: resolveColumnAlign(col),
+          numeric: isNumericColumn(col),
           width: col.width,
           minWidth: col.minWidth,
           hideBelow: col.hideBelow,
@@ -1558,7 +1591,10 @@ export function DataTable<TRow extends Record<string, unknown>>({
   /** The spacers belong to the tier on screen; the hidden ones hold no rows and no padding. */
   const tierPad = (t: TableTier) =>
     virtualEnabled && activeTier === t ? { paddingTop: padTop, paddingBottom: padBottom } : undefined;
-  const hasActions = !!(onRowEdit || onRowDelete || rowMenu);
+  const hasActions = !!(onRowEdit || onRowDelete || rowMenu || rowAction);
+  // DAT-5: right-click opens the SAME menu the row's `⋯` opens — a desktop accelerator, never
+  // the only way in. Held by row id so the menu stays anchored to that row's kebab.
+  const [contextMenuRowId, setContextMenuRowId] = useState<string | null>(null);
 
   // ── Row selection (see the `selectedIds` prop doc) ──────────────────────────
   const canSelect = (row: TRow) => isRowSelectable?.(row) ?? true;
@@ -1769,7 +1805,23 @@ export function DataTable<TRow extends Record<string, unknown>>({
           ))}
         </div>
       ) : rows.length === 0 && windowTotal === 0 ? (
-        <div className='p-2'>{emptyState ?? <EmptyState title='No results' />}</div>
+        <div className='p-2'>
+          {emptyState ??
+            // STA-3: rows exist and the reader's search or filters hid them all — say so, and
+            // offer the one action that undoes it. A table with no data says "No results".
+            (data.length > 0 && !serverWindow ? (
+              <EmptyState
+                compact
+                onClearFilters={() => {
+                  setSearchText('');
+                  setFilterQuery(EMPTY_FILTER_QUERY);
+                  setColumnFilters([]);
+                }}
+              />
+            ) : (
+              <EmptyState title='No results' />
+            ))}
+        </div>
       ) : (
         // scrollBody makes the table body the one scroll container for BOTH axes —
         // required for stickyHeader to pin (see the prop doc); ScrollArea's
@@ -1859,7 +1911,8 @@ export function DataTable<TRow extends Record<string, unknown>>({
                         onEdit={onRowEdit}
                         onDelete={onRowDelete}
                         menu={rowMenu?.(row.original)}
-                            menuLabel={rowMenuLabel?.(row.original)}
+                        menuLabel={rowMenuLabel?.(row.original)}
+                        action={rowAction?.(row.original) ?? undefined}
                       />
                     ) : null
                   }
@@ -1998,6 +2051,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
                             onDelete={onRowDelete}
                             menu={rowMenu?.(row.original)}
                             menuLabel={rowMenuLabel?.(row.original)}
+                            action={rowAction?.(row.original) ?? undefined}
                           />
                         ) : null}
                       </div>
@@ -2057,7 +2111,8 @@ export function DataTable<TRow extends Record<string, unknown>>({
               aria-rowcount={
                 virtualEnabled ? (serverWindow ? windowTotal + 1 : onNearEnd ? -1 : rows.length + 1) : undefined
               }
-              className={cn('w-full border-collapse text-sm', fixedLayout && 'table-fixed')}
+              data-cb-table-fit={fit || undefined}
+              className={cn('border-collapse text-sm', fit ? 'w-auto max-w-full' : 'w-full', fixedLayout && 'table-fixed')}
               style={tableMinWidth != null ? { minWidth: tableMinWidth } : undefined}
             >
               {caption ? <caption className='sr-only'>{caption}</caption> : null}
@@ -2097,6 +2152,11 @@ export function DataTable<TRow extends Record<string, unknown>>({
                             'border-b border-border px-4 text-caption font-bold uppercase tracking-wider text-muted-foreground',
                             cellPadY,
                             align === 'right' ? 'text-right' : 'text-left',
+                            meta?.numeric && 'tabular-nums',
+                            // Under `fit` the column takes its CONTENT's width, and a truncating
+                            // label contributes none — "RUNS" read "R…" over a column of 2,472s.
+                            // The header's own width is the column's floor instead.
+                            fit && 'min-w-max [&>*]:max-w-none',
                             // Sticky pins per-<th> (a <tr> can't stick); needs its own
                             // near-opaque bg so rows scrolling beneath never bleed through.
                             stickyHeader &&
@@ -2143,7 +2203,8 @@ export function DataTable<TRow extends Record<string, unknown>>({
                     {hasActions ? (
                       <th
                         className={cn(
-                          'w-20 border-b border-border px-2',
+                          // A fixed trailing track (DAT-12): the ⋯ lines up down the list.
+                          rowAction ? 'w-32 border-b border-border px-2' : 'w-20 border-b border-border px-2',
                           stickyHeader && 'sticky top-0 z-10 bg-card/95 backdrop-blur-sm',
                         )}
                         aria-label='Row actions'
@@ -2220,6 +2281,13 @@ export function DataTable<TRow extends Record<string, unknown>>({
                         ),
                         tabIndex: onRowClick ? 0 : undefined,
                         onClick: onRowClick ? (event: MouseEvent<HTMLElement>) => onRowClick(row.original, event) : undefined,
+                        onContextMenu: rowMenu
+                          ? (event: MouseEvent<HTMLElement>) => {
+                              if (rowMenu(row.original).length === 0) return;
+                              event.preventDefault();
+                              setContextMenuRowId(row.id);
+                            }
+                          : undefined,
                         onKeyDown: onRowClick
                           ? (e: KeyboardEvent<HTMLElement>) => {
                               if (e.key === 'Enter') onRowClick(row.original);
@@ -2266,6 +2334,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
                               // has to escape its bounds.
                               fixedLayout && '[overflow-wrap:anywhere]',
                               cell.column.columnDef.meta?.align === 'right' && 'text-right',
+                              cell.column.columnDef.meta?.numeric && 'tabular-nums',
                               cell.column.columnDef.meta?.hideBelow &&
                                 HIDE_BELOW_CLASS[cell.column.columnDef.meta.hideBelow],
                               droppedByWidth.has(cell.column.id) && COLLAPSED_CLASS,
@@ -2310,7 +2379,10 @@ export function DataTable<TRow extends Record<string, unknown>>({
                               onEdit={onRowEdit}
                               onDelete={onRowDelete}
                               menu={rowMenu?.(row.original)}
-                            menuLabel={rowMenuLabel?.(row.original)}
+                              menuLabel={rowMenuLabel?.(row.original)}
+                              action={rowAction?.(row.original) ?? undefined}
+                              menuOpen={contextMenuRowId === row.id}
+                              onMenuOpenChange={(open) => setContextMenuRowId(open ? row.id : null)}
                             />
                           </td>
                         ) : null}

package/src/react/components/DataTable/Pagination.tsx

@@ -25,7 +25,7 @@ export function TablePagination<TRow>({ table, pageSizeOptions }: TablePaginatio
   const end = Math.min((pageIndex + 1) * pageSize, total);
 
   return (
-    <div className='flex flex-wrap items-center justify-between gap-3 border-t border-border px-4 py-2.5 text-sm text-muted-foreground'>
+    <div className='flex flex-wrap items-center justify-between gap-3 border-t border-border px-4 py-2 text-sm text-muted-foreground'>
       <div className='flex items-center gap-3'>
         <span>{total === 0 ? 'No results' : `${start}–${end} of ${total}`}</span>
         {pageSizeOptions?.length ? (

package/src/react/components/DataTable/RowActions.tsx

@@ -1,6 +1,8 @@
 import { EllipsisVertical, Pencil, Trash2 } from 'lucide-react';
+import { Button } from '../Button.js';
 import type { DropdownMenuItem } from '../DropdownMenu.js';
 import { IconButton } from '../IconButton.js';
+import type { DataTableRowAction } from './types.js';
 import { lazyPart } from './lazyPart.js';
 
 // The kebab's menu is Radix's Menu, and most tables never draw a kebab — so it loads
@@ -21,6 +23,11 @@ export interface RowActionsProps<TRow> {
   /** The kebab's accessible name and tooltip — say WHOSE actions (`More for Alien`). Default
    *  `Row actions`, which a screen reader repeats identically on every row. */
   menuLabel?: string;
+  /** The row's ONE inline action (DAT-5) — a quiet button before the kebab. */
+  action?: DataTableRowAction;
+  /** Controlled open state of the kebab's menu — how a right-click on the row opens it. */
+  menuOpen?: boolean;
+  onMenuOpenChange?: (open: boolean) => void;
 }
 
 /**
@@ -30,7 +37,16 @@ export interface RowActionsProps<TRow> {
  * caller's call (wrap `onDelete` with `confirm()` from task 10) — this primitive just
  * surfaces the intent.
  */
-export function RowActions<TRow>({ row, onEdit, onDelete, menu, menuLabel = 'Row actions' }: RowActionsProps<TRow>) {
+export function RowActions<TRow>({
+  row,
+  onEdit,
+  onDelete,
+  menu,
+  menuLabel = 'Row actions',
+  action,
+  menuOpen,
+  onMenuOpenChange,
+}: RowActionsProps<TRow>) {
   const kebab = (
     <IconButton label={menuLabel} className='size-8 pointer-coarse:min-w-11 [&_svg]:size-4'>
       <EllipsisVertical />
@@ -46,6 +62,37 @@ export function RowActions<TRow>({ row, onEdit, onDelete, menu, menuLabel = 'Row
       onClick={(e) => e.stopPropagation()}
       onPointerDown={(e) => e.stopPropagation()}
     >
+      {action ? (
+        action.icon ? (
+          <IconButton
+            label={action.label}
+            className='size-8 pointer-coarse:min-w-11 [&_svg]:size-4'
+            disabled={action.disabled && !action.disabledReason}
+            unavailableReason={action.disabled ? action.disabledReason : undefined}
+            onClick={(e) => {
+              e.stopPropagation();
+              action.onClick();
+            }}
+          >
+            {action.icon}
+          </IconButton>
+        ) : (
+          <Button
+            variant='ghost'
+            size='sm'
+            tooltip={action.label}
+            tooltipMobile='off'
+            disabled={action.disabled && !action.disabledReason}
+            unavailableReason={action.disabled ? action.disabledReason : undefined}
+            onClick={(e) => {
+              e.stopPropagation();
+              action.onClick();
+            }}
+          >
+            {action.label}
+          </Button>
+        )
+      ) : null}
       {onEdit ? (
         <IconButton
           label='Edit row'
@@ -73,7 +120,13 @@ export function RowActions<TRow>({ row, onEdit, onDelete, menu, menuLabel = 'Row
       {menu && menu.length > 0 ? (
         // Until the menu arrives the kebab is already there, the same button in the same
         // place — so nothing shifts and nothing flashes; a click in those milliseconds opens nothing.
-        <MenuPart align='end' trigger={kebab} items={menu} fallback={kebab} />
+        <MenuPart
+          align='end'
+          trigger={kebab}
+          items={menu}
+          fallback={kebab}
+          {...(onMenuOpenChange ? { open: menuOpen ?? false, onOpenChange: onMenuOpenChange } : {})}
+        />
       ) : null}
     </div>
   );

package/src/react/components/DataTable/TableFilterBuilder.tsx

@@ -152,7 +152,7 @@ export function TableFilterBuilder({
         ) : null}
 
         {/* guardrails-ignore no-raw-overflow: bounded builder body inside a portal panel. */}
-        <div className='flex max-h-[22rem] flex-col gap-2 overflow-y-auto'>
+        <div className='flex max-h-88 flex-col gap-2 overflow-y-auto'>
           {value.groups.map((group, groupIndex) => (
             <div key={group.id}>
               {groupIndex > 0 ? (

package/src/react/components/DataTable/cells/CodeCell.tsx

@@ -17,7 +17,7 @@ export function CodeCell({ value, language }: CodeCellProps) {
     <TruncatedText
       as='code'
       data-language={language}
-      className='block max-w-[240px] rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground'
+      className='block max-w-60 rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground'
     >
       {value}
     </TruncatedText>

package/src/react/components/DataTable/cells/LinkCell.tsx

@@ -25,7 +25,7 @@ export function LinkCell({ href, label }: LinkCellProps): JSX.Element | null {
       url={href}
       {...(label === undefined ? {} : { display: label })}
       stopPropagation
-      className={`max-w-[180px] truncate font-sans not-italic ${TAP_TARGET_HEIGHT}`}
+      className={`max-w-45 truncate font-sans not-italic ${TAP_TARGET_HEIGHT}`}
     />
   );
 }

package/src/react/components/DataTable/index.ts

@@ -71,6 +71,7 @@ export { resolveColumnAlign } from './types.js';
 export type {
   ColDef,
   DataTableHandle,
+  DataTableRowAction,
   DataTableRowProps,
   DataTableSelectAll,
   DataTableServerWindow,

package/src/react/components/DataTable/numericColumn.spec.ts

@@ -0,0 +1,19 @@
+import { describe, expect, test } from 'bun:test';
+import { isNumericColumn, untypedNumericColumn } from './types.js';
+
+describe('DAT-1 · what counts as a numeric column', () => {
+  test('money counts as numeric, text does not', () => {
+    expect(isNumericColumn({ key: 'a', label: 'A', type: 'money' })).toBe(true);
+    expect(isNumericColumn({ key: 'a', label: 'A', type: 'text' })).toBe(false);
+  });
+
+  test('a text column holding only numbers is named; a rendered or aligned one is left alone', () => {
+    const col = { key: 'code', label: 'Code', type: 'text' } as const;
+    expect(untypedNumericColumn(col, ['41', '7', '1,204'])).toContain("type 'number'");
+    expect(untypedNumericColumn(col, ['41', 'x'])).toBeNull();
+    expect(untypedNumericColumn(col, ['41'])).toBeNull();
+    expect(untypedNumericColumn({ ...col, align: 'left' }, ['41', '7'])).toBeNull();
+    expect(untypedNumericColumn({ ...col, render: () => null }, ['41', '7'])).toBeNull();
+  });
+
+});