cursedbelt 5.81.2 → 5.85.0

package/src/react/components/ChipFilterStrip.tsx

@@ -51,6 +51,7 @@ export function ChipFilterStrip({
   multi = false,
   allLabel = 'All',
   className,
+  ...rest
 }: ChipFilterStripProps) {
   const allActive = isAll(value);
 
@@ -73,7 +74,7 @@ export function ChipFilterStrip({
     // container to its chips' intrinsic width — the ScrollArea below owns overflow
     // (2026-07-17: a chips row stretched a PluginCard body into a phantom
     // horizontal scroller on mobile).
-    <fieldset aria-label='Filter options' className={cn('m-0 min-w-0 max-w-full border-0 p-0', className)}>
+    <fieldset {...rest} aria-label='Filter options' className={cn('m-0 min-w-0 max-w-full border-0 p-0', className)}>
       <ScrollArea
         axis='x'
         space='none'

package/src/react/components/ChoiceGroup.tsx

@@ -94,6 +94,7 @@ export function ChoiceGroup<T extends string = string>({
   layout = 'text',
   tileSize = 64,
   className,
+  ...rest
 }: ChoiceGroupProps<T>) {
   const id = useId();
   const labelId = label != null ? `${id}-label` : undefined;
@@ -102,7 +103,7 @@ export function ChoiceGroup<T extends string = string>({
   const describedBy = [descriptionId, reasonId].filter(Boolean).join(' ') || undefined;
 
   return (
-    <div className={cn('flex min-w-0 flex-col gap-1.5', className)} data-cb-choice-group=''>
+    <div {...rest} className={cn('flex min-w-0 flex-col gap-1.5', className)} data-cb-choice-group=''>
       {label != null ? (
         <span id={labelId} className={cn('text-sm font-medium text-foreground', disabled && 'opacity-60')}>
           {label}

package/src/react/components/ChoiceMenu.tsx

@@ -119,6 +119,7 @@ export function ChoiceMenu({
   align = 'start',
   side = 'bottom',
   className,
+  ...rest
 }: ChoiceMenuProps) {
   const many = plural ?? pluralize(noun);
   const items: DropdownMenuItem[] = [];
@@ -165,6 +166,7 @@ export function ChoiceMenu({
 
   return (
     <DropdownMenu
+      {...rest}
       align={align}
       side={side}
       className={className}

package/src/react/components/CodeArea.tsx

@@ -72,6 +72,7 @@ export function CodeArea({
   label = 'Code',
   onKeyDown: onKeyDownProp,
   className,
+  ...rest
 }: CodeAreaProps) {
   const id = useId();
   const editable = onChange != null && !readOnly;
@@ -88,6 +89,7 @@ export function CodeArea({
 
   return (
     <div
+      {...rest}
       // guardrails-ignore no-hand-rolled-surface: a code INPUT's well — it carries the field focus ring (focus-within), which makes it a control, not a surface
       className={cn(
         'group relative flex min-h-0 flex-col overflow-hidden rounded-md border border-border bg-surface-sunken',

package/src/react/components/CodeFieldInput.tsx

@@ -44,6 +44,7 @@ export function CodeFieldInput({
   'aria-invalid': ariaInvalid,
   'aria-describedby': ariaDescribedBy,
   className,
+  ...rest
 }: CodeFieldInputProps) {
   const reactId = useId();
   const textareaId = id ?? reactId;
@@ -53,7 +54,7 @@ export function CodeFieldInput({
   };
 
   return (
-    <div className='relative'>
+    <div {...rest} className='relative'>
       {language ? (
         <span className='pointer-events-none absolute right-2 top-2 z-10 rounded bg-muted px-1.5 py-0.5 font-mono text-caption uppercase tracking-wide text-muted-foreground'>
           {language}

package/src/react/components/Collapsible.tsx

@@ -40,9 +40,11 @@ export function Collapsible({
   disabled,
   className,
   contentClassName,
+  ...passThrough
 }: CollapsibleProps) {
   return (
     <RadixCollapsible.Root
+      {...passThrough}
       open={open}
       defaultOpen={defaultOpen}
       onOpenChange={onOpenChange}

package/src/react/components/ColorField.tsx

@@ -36,12 +36,14 @@ export function ColorField({
   'aria-describedby': ariaDescribedBy,
   className,
   size = 'md',
+  ...rest
 }: ColorFieldProps) {
   // guardrails-ignore no-hardcoded-colors: color-picker preview swatch must render the
   // arbitrary hex value the user is choosing, not a theme token.
   const swatch = HEX6.test(value) ? value : '#000000';
   return (
     <div
+      {...rest}
       aria-invalid={ariaInvalid}
       className={cn(
         'flex w-full items-center gap-2 rounded-field border border-field-border bg-field-bg pl-1.5 pr-3 transition focus-within:border-field-ring focus-within:ring-2 focus-within:ring-field-ring/30 aria-[invalid=true]:border-field-error',

package/src/react/components/ColorSwatches.tsx

@@ -50,6 +50,7 @@ export function ColorSwatches({
   size = 'md',
   'aria-label': ariaLabel = 'Colour',
   className,
+  ...rest
 }: ColorSwatchesProps) {
   const current = value?.toLowerCase();
   const isPreset = current !== undefined && presets.some((color) => color.toLowerCase() === current);
@@ -63,7 +64,7 @@ export function ColorSwatches({
     if (well.current && wellHex && well.current.value !== wellHex) well.current.value = wellHex;
   }, [wellHex]);
   return (
-    <div data-slot='color-swatches' className={cn('flex flex-wrap items-center gap-1.5', className)}>
+    <div {...rest} data-slot='color-swatches' className={cn('flex flex-wrap items-center gap-1.5', className)}>
       <SwatchPicker
         aria-label={ariaLabel}
         size={size}

package/src/react/components/ComboboxField.tsx

@@ -156,6 +156,12 @@ export function ComboboxField(props: ComboboxFieldProps) {
     'aria-describedby': ariaDescribedBy,
     className,
     size = 'md',
+    // Named so they stay off the input: the discriminated union's own shape, read via
+    // `(props as …).multiple`/`.value`/`.onChange` below, never off this destructuring.
+    multiple: _multiple,
+    value: _value,
+    onChange: _onChange,
+    ...rest
   } = props;
 
   const isAsync = Boolean(loadOptions);
@@ -279,6 +285,7 @@ export function ComboboxField(props: ComboboxFieldProps) {
           </Combobox.Chips>
         )}
         <Combobox.Input
+          {...rest}
           id={id}
           aria-describedby={ariaDescribedBy}
           aria-invalid={ariaInvalid}

package/src/react/components/CommentThread.tsx

@@ -336,12 +336,13 @@ export function CommentThread({
   className,
   emptyMessage = 'No comments yet — start the conversation.',
   placeholder = 'Add a comment… (⌘/Ctrl+Enter to send)',
+  ...rest
 }: CommentThreadProps) {
   const topLevel = comments.filter((c) => !c.parentId);
   const repliesOf = (id: string) => comments.filter((c) => c.parentId === id);
 
   return (
-    <div className={cn('space-y-3', className)}>
+    <div {...rest} className={cn('space-y-3', className)}>
       {!isLoading &&
         topLevel.map((c) => (
           <CommentItem

package/src/react/components/ConfirmDialog.tsx

@@ -41,11 +41,13 @@ export function ConfirmDialog({
   destructive = false,
   loading = false,
   className,
+  ...rest
 }: ConfirmDialogProps) {
   const contentRef = useRef<HTMLDivElement>(null);
 
   return (
     <Dialog
+      {...rest}
       open={open}
       onOpenChange={(v) => {
         if (!v) onCancel();

package/src/react/components/ConnectionHealer.tsx

@@ -146,11 +146,16 @@ export const ConnectionHealer = ({
   error,
   title = 'Server unreachable',
   children,
-  ...heal
+  url,
+  requireOk,
+  onHealed,
+  initialDelayMs,
+  maxDelayMs,
+  ...rest
 }: ConnectionHealerProps) => {
-  const { attempts, healed } = useServerHeal(heal);
+  const { attempts, healed } = useServerHeal({ url, requireOk, onHealed, initialDelayMs, maxDelayMs });
   return (
-    <Alert tone='warning' title={title}>
+    <Alert {...rest} tone='warning' title={title}>
       <div className='flex items-center gap-2'>
         <Spinner size='sm' />
         <span>

package/src/react/components/ControlPanel.tsx

@@ -52,11 +52,12 @@ const COLUMN_MIN: Record<NonNullable<ControlPanelProps['columnMin']>, string> =
  * phone the groups become stacked accordions (the first open), so the canvas above stays in view
  * and no column is squeezed past use.
  */
-export function ControlPanel({ title, actions, children, columnMin = 'md', className }: ControlPanelProps) {
+export function ControlPanel({ title, actions, children, columnMin = 'md', className, ...rest }: ControlPanelProps) {
   const phone = useMediaQuery(PHONE_QUERY);
   const name = typeof title === 'string' ? title : undefined;
   return (
     <section
+      {...rest}
       className={cn('flex min-w-0 flex-col gap-4', className)}
       data-cb-control-panel={phone ? 'stacked' : 'columns'}
       aria-label={name}
@@ -90,12 +91,12 @@ export function ControlPanel({ title, actions, children, columnMin = 'md', class
  * One topic column of a {@link ControlPanel}: a `.cb-meta-label` eyebrow over a {@link FieldGrid},
  * cardless. On a phone it is a collapsible section instead.
  */
-export function ControlGroup({ title, children, defaultOpen, labelWidth = 'md', className }: ControlGroupProps) {
+export function ControlGroup({ title, children, defaultOpen, labelWidth = 'md', className, ...rest }: ControlGroupProps) {
   const phone = useMediaQuery(PHONE_QUERY);
   const body = <FieldGrid labelWidth={labelWidth}>{children}</FieldGrid>;
   if (phone) {
     return (
-      <div className={className} data-cb-control-group=''>
+      <div {...rest} className={className} data-cb-control-group=''>
         <Collapsible
           trigger={<span className='cb-meta-label'>{title}</span>}
           defaultOpen={defaultOpen}
@@ -107,7 +108,7 @@ export function ControlGroup({ title, children, defaultOpen, labelWidth = 'md',
     );
   }
   return (
-    <fieldset className={cn('m-0 min-w-0 border-0 p-0', className)} data-cb-control-group=''>
+    <fieldset {...rest} className={cn('m-0 min-w-0 border-0 p-0', className)} data-cb-control-group=''>
       <legend className='cb-meta-label mb-3 p-0'>{title}</legend>
       {body}
     </fieldset>

package/src/react/components/CopyButton.tsx

@@ -71,6 +71,7 @@ export function CopyButton({
   resetMs,
   className,
   disabled,
+  ...rest
 }: CopyButtonProps) {
   const { copied, copy } = useCopyToClipboard(resetMs, onCopy);
 
@@ -92,6 +93,7 @@ export function CopyButton({
 
   return (
     <Button
+      {...rest}
       variant='ghost'
       aria-label={copied ? copiedLabel : label}
       tooltip={tooltip ?? (copied ? copiedLabel : label)}

package/src/react/components/CopyableText.tsx

@@ -38,10 +38,12 @@ export function CopyableText({
   block = false,
   copyLabel,
   className,
+  ...rest
 }: CopyableTextProps) {
   if (block) {
     return (
       <div
+        {...rest}
         className={cn(
           'flex items-start justify-between gap-2',
           mono ? 'cb-code' : 'rounded-md bg-muted px-2.5 py-1.5 text-xs text-foreground',
@@ -55,7 +57,7 @@ export function CopyableText({
   }
   const display = truncateMiddle(value, maxLength);
   return (
-    <span className={cn('inline-flex min-w-0 items-center gap-1', className)}>
+    <span {...rest} className={cn('inline-flex min-w-0 items-center gap-1', className)}>
       <TruncatedText
         // The elision here is `truncateMiddle`'s, not the browser's, so nothing
         // overflows and a width measurement would never fire — the hint is forced on

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

@@ -41,10 +41,11 @@ export function CardView<TRow extends Record<string, unknown>>({
   selectFor,
   cardMinWidth = '16rem',
   className,
+  ...rest
 }: CardViewProps<TRow>) {
   const visible = columns.filter((c) => !c.hidden);
   return (
-    <Grid min={cardMinWidth} gap={4} className={className}>
+    <Grid {...rest} min={cardMinWidth} gap={4} className={className}>
       {data.map((row, i) => {
         const key = getRowId ? getRowId(row) : `card-${i}`;
         const body = <CardRowContent columns={visible} row={row} />;

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

@@ -49,6 +49,7 @@ export function ColumnChecklist({
   selectNoneLabel = 'Deselect all',
   'aria-label': ariaLabel,
   className,
+  ...rest
 }: ColumnChecklistProps) {
   const toggleable = items.filter((item) => !item.disabled);
   const allOn = toggleable.length > 0 && toggleable.every((item) => item.checked);
@@ -58,7 +59,7 @@ export function ColumnChecklist({
     // A real <fieldset> rather than role='group' — the UA reset strips its
     // default border/margin, and biome's useSemanticElements is right that a
     // group of checkboxes is what fieldset IS.
-    <fieldset className={cn('flex min-w-52 min-w-0 flex-col gap-1 border-0 p-0', className)} aria-label={ariaLabel}>
+    <fieldset {...rest} className={cn('flex min-w-52 min-w-0 flex-col gap-1 border-0 p-0', className)} aria-label={ariaLabel}>
       <div className='flex items-center gap-1 border-b border-border pb-1.5'>
         <button
           // guardrails-ignore no-raw-action-button: view-state bulk toggle, not a mutating action.

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

@@ -1004,6 +1004,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
   columnVisibility: columnVisibilityProp,
   onColumnVisibilityChange,
   columnsPersistKey,
+  ...passThrough
 }: DataTableProps<TRow>) {
   // Vertical cell padding for the wide grid tier — the one lever the density knob
   // pulls (headers + body cells stay aligned by sharing it).
@@ -1829,7 +1830,7 @@ export function DataTable<TRow extends Record<string, unknown>>({
   return (
     // `@container`: the card/grid switch below keys off THIS element's width, so the
     // right layout appears in a narrow pane on a wide screen, not just on phones.
-    <div ref={outerRef} className={cn('@container flex min-h-0 flex-col', className)}>
+    <div {...passThrough} ref={outerRef} className={cn('@container flex min-h-0 flex-col', className)}>
       {toolbarNode}
 
       {summaryNode != null ? (

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

@@ -17,7 +17,7 @@ export interface TablePaginationProps<TRow> {
  * unchanged, for `serverSide` manual paging (it reads `getRowCount()` / `getPageCount()`,
  * which the table derives from the caller-supplied `rowCount` / `pageCount`).
  */
-export function TablePagination<TRow>({ table, pageSizeOptions }: TablePaginationProps<TRow>) {
+export function TablePagination<TRow>({ table, pageSizeOptions, ...rest }: TablePaginationProps<TRow>) {
   const { pageIndex, pageSize } = table.getState().pagination;
   const total = table.getRowCount();
   const pageCount = table.getPageCount();
@@ -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 text-sm text-muted-foreground'>
+    <div {...rest} 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

@@ -46,6 +46,7 @@ export function RowActions<TRow>({
   action,
   menuOpen,
   onMenuOpenChange,
+  ...rest
 }: RowActionsProps<TRow>) {
   const kebab = (
     <IconButton label={menuLabel} className='size-8 pointer-coarse:min-w-11 [&_svg]:size-4'>
@@ -56,6 +57,7 @@ export function RowActions<TRow>({
     // biome-ignore lint/a11y/noStaticElementInteractions: bubble fence only — these handlers never act, they stop row-click; the real interactions are the IconButtons/menu inside
     // biome-ignore lint/a11y/useKeyWithClickEvents: bubble fence only — keyboard interaction lives on the IconButtons/menu inside
     <div
+      {...rest}
       className='flex items-center justify-end gap-0.5'
       // The kebab's Radix trigger opens on pointerdown — stop the bubble here so opening
       // the menu never doubles as a row click.

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

@@ -1,8 +1,8 @@
-import { ChevronDown, Search } from 'lucide-react';
+import { ChevronDown } from 'lucide-react';
 import { useState } from 'react';
 import { cn, RAW_BUTTON } from '../../lib/cn.js';
-import { Input } from '../Input.js';
 import { Popover } from '../Popover.js';
+import { SearchInput } from '../SearchInput.js';
 import { ColumnChecklist } from './ColumnChecklist.js';
 
 export interface SearchScopeColumn {
@@ -59,6 +59,7 @@ export function SearchBox({
   onScopeChange,
   placeholder = 'Search…',
   className,
+  ...rest
 }: SearchBoxProps) {
   const [open, setOpen] = useState(false);
   const chosen = scope ?? columns.map((c) => c.key);
@@ -78,21 +79,18 @@ export function SearchBox({
   };
 
   return (
-    <div className={cn('flex min-w-0 items-center gap-1', className)}>
-      <div className='relative min-w-0 max-w-xs flex-1'>
-        <Search
-          className='-translate-y-1/2 pointer-events-none absolute top-1/2 left-2.5 size-4 text-muted-foreground'
-          aria-hidden
-        />
-        <Input
-          type='search'
-          aria-label='Search'
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={placeholder}
-          className='h-9 pl-8'
-        />
-      </div>
+    <div {...rest} className={cn('flex min-w-0 items-center gap-1', className)}>
+      {/* The belt's one search box, so the table's search clears with the same ✕ as every other
+          (owner, 2026-10-20). `syntax={false}`: the table matches plain text, so no badge. */}
+      <SearchInput
+        aria-label='Search'
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        syntax={false}
+        className='max-w-xs flex-1'
+        inputClassName='h-9'
+      />
       {columns.length > 1 ? (
         <Popover
           open={open}

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

@@ -1,6 +1,6 @@
 import type { Column } from '@tanstack/react-table';
 import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import { Tooltip } from '../Tooltip.js';
 import { cn, RAW_BUTTON } from '../../lib/cn.js';
 import { TAP_TARGET } from '../../lib/tapTarget.js';
@@ -49,7 +49,7 @@ function HeaderLabel({ label, icon }: { label: string; icon?: ReactNode }) {
   );
 }
 
-export interface SortHeaderProps<TRow> {
+export interface SortHeaderProps<TRow> extends HTMLAttributes<HTMLElement> {
   column: Column<TRow, unknown>;
   label: string;
   /** `ColDef.headerIcon` — drawn instead of the label when the table is narrower than 42rem. */
@@ -91,6 +91,7 @@ export function SortHeader<TRow>({
   sortIndex = -1,
   onSort,
   disabledReason,
+  ...rest
 }: SortHeaderProps<TRow>) {
   // The label truncates inside its own track, sortable or not. A header is the
   // one piece of a table with no wrapping story of its own — it is a single
@@ -102,9 +103,9 @@ export function SortHeader<TRow>({
     return withLabelTip(
       label,
       icon == null ? (
-        <span className='block truncate'>{label}</span>
+        <span {...rest} className='block truncate'>{label}</span>
       ) : (
-        <span className='flex min-w-0 items-center'>
+        <span {...rest} className='flex min-w-0 items-center'>
           <HeaderLabel label={label} icon={icon} />
         </span>
       ),
@@ -118,6 +119,7 @@ export function SortHeader<TRow>({
     return withLabelTip(
       disabledReason,
       <button
+        {...rest}
         // guardrails-ignore no-raw-action-button: column-header sort toggle, inert — see above.
         type='button'
         aria-disabled
@@ -130,6 +132,7 @@ export function SortHeader<TRow>({
   return withLabelTip(
     label,
     <button
+      {...rest}
       // guardrails-ignore no-raw-action-button: column-header sort toggle — non-mutating
       // view state, not a destructive action.
       type='button'

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

@@ -38,6 +38,7 @@ export function SortStack({
   onRemove,
   onClear,
   className,
+  ...rest
 }: SortStackProps) {
   if (sorting.length === 0) return null;
   return (
@@ -45,6 +46,7 @@ export function SortStack({
     // ordinal on each chip is the list index made visible, and screen readers
     // get the priority for free instead of from the number glyph.
     <ol
+      {...rest}
       data-cb-sort-stack=''
       aria-label='Sort order'
       className={cn('flex min-w-0 list-none flex-wrap items-center gap-1 p-0', className)}

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

@@ -94,6 +94,7 @@ export function TableFilterBuilder({
   onChange,
   className,
   defaultOpen = false,
+  ...rest
 }: TableFilterBuilderProps) {
   const [open, setOpen] = useState(defaultOpen);
   const activeCount = countActiveConditions(value);
@@ -111,6 +112,7 @@ export function TableFilterBuilder({
 
   return (
     <Popover
+      {...rest}
       open={open}
       onOpenChange={setOpen}
       align='start'

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

@@ -22,9 +22,10 @@ export interface TableViewToggleProps {
  * as decoration and gets ignored — the owner's complaint about not being able
  * to tell what a control does is the same complaint one level down.
  */
-export function TableViewToggle({ value, onChange, className }: TableViewToggleProps) {
+export function TableViewToggle({ value, onChange, className, ...rest }: TableViewToggleProps) {
   return (
     <SegmentedControl<TableViewMode>
+      {...rest}
       className={className}
       aria-label='View as'
       value={value}

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

@@ -63,6 +63,7 @@ export function TableToolbar<TRow>({
   onAdd,
   addLabel = 'Add',
   extraActions,
+  ...passThrough
 }: TableToolbarProps<TRow>) {
   const controls = table.options.meta?.cbControls;
   // 🔴 `controls.searchText`, not `getState().globalFilter` — that state now
@@ -80,7 +81,7 @@ export function TableToolbar<TRow>({
     // and read "Sea" (forge task 2657, e2e/table-layout.spec.ts "toolbar @…"). There the
     // left group goes `contents`, so Filter and Columns share the second row instead of
     // taking one each.
-    <Split className='@container gap-2 border-b border-border px-2 py-2'>
+    <Split {...passThrough} className='@container gap-2 border-b border-border px-2 py-2'>
       <div className='flex min-w-0 flex-1 flex-wrap items-center gap-2 @max-xl:contents'>
         {enableSearch ? (
           <SearchBox

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

@@ -27,7 +27,7 @@ export interface ViewOptionsMenuProps<TRow> {
  * An `alwaysVisible` column has `getCanHide() === false` and never appears —
  * offering a toggle that refuses is worse than not offering one.
  */
-export function ViewOptionsMenu<TRow>({ table, label = 'Columns' }: ViewOptionsMenuProps<TRow>) {
+export function ViewOptionsMenu<TRow>({ table, label = 'Columns', ...rest }: ViewOptionsMenuProps<TRow>) {
   const [open, setOpen] = useState(false);
   const columns = table.getAllColumns().filter((c) => c.getCanHide());
   // The checkbox column is not a TanStack column, so it comes off the table's controls — and it
@@ -39,6 +39,7 @@ export function ViewOptionsMenu<TRow>({ table, label = 'Columns' }: ViewOptionsM
 
   return (
     <Popover
+      {...rest}
       open={open}
       onOpenChange={setOpen}
       align='end'

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

@@ -346,6 +346,10 @@ export function getCellRenderer(type: string): FC<CellRendererProps> {
 export function CellRenderer<TRow extends Record<string, unknown>>(props: CellRendererProps<TRow>) {
   // A column that draws itself wins over its type — see `ColDef.render`.
   if (props.col.render) return <>{props.col.render(props.row)}</>;
-  const Comp = getCellRenderer(props.col.type);
-  return <Comp {...(props as CellRendererProps)} />;
+  const { col, value, row, onEdit, ...rest } = props;
+  const Comp = getCellRenderer(col.type);
+  // `col` carries the generic `TRow`; the registry's renderers are typed for the default
+  // `Record<string, unknown>` — safe, since every base renderer reads a row's fields only
+  // through `ColDef`'s own (already-`TRow`-typed) accessors (`displayValue`, `render`).
+  return <Comp {...rest} col={col as ColDef} value={value} row={row} onEdit={onEdit} />;
 }

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

@@ -11,10 +11,11 @@ export interface CodeCellProps {
  * at a max width. Clicking the row opens the record `Drawer`, where the full value is
  * shown/edited by the `code` field input.
  */
-export function CodeCell({ value, language }: CodeCellProps) {
+export function CodeCell({ value, language, ...rest }: CodeCellProps) {
   if (!value) return null;
   return (
     <TruncatedText
+      {...rest}
       as='code'
       data-language={language}
       className='block max-w-60 rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground'

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

@@ -19,9 +19,10 @@ export interface LinkCellProps {
  * became a live href in the page's own origin, in every DataTable in the fleet. The
  * shared primitive refuses any non-http(s) value and renders it as inert text.
  */
-export function LinkCell({ href, label }: LinkCellProps): JSX.Element | null {
+export function LinkCell({ href, label, ...rest }: LinkCellProps): JSX.Element | null {
   return (
     <ExternalLink
+      {...rest}
       url={href}
       {...(label === undefined ? {} : { display: label })}
       stopPropagation

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

@@ -13,11 +13,11 @@ export interface PasswordCellProps {
  * copy-on-reveal here (a screen recorder could capture the reveal→copy sequence). The
  * `CopyButton` (task 11) is a separate, explicit affordance; never bundle the two.
  */
-export function PasswordCell({ value }: PasswordCellProps) {
+export function PasswordCell({ value, ...rest }: PasswordCellProps) {
   const [revealed, setRevealed] = useState(false);
   if (!value) return null;
   return (
-    <span className='inline-flex items-center gap-1.5'>
+    <span {...rest} className='inline-flex items-center gap-1.5'>
       <span className='font-mono text-sm'>{revealed ? value : '••••••••'}</span>
       <IconButton
         label={revealed ? 'Hide value' : 'Show value'}

package/src/react/components/DatePicker.tsx

@@ -58,6 +58,7 @@ export function DatePicker({
   'aria-invalid': ariaInvalid,
   'aria-describedby': ariaDescribedBy,
   size = 'md',
+  ...rest
 }: DatePickerProps) {
   const [open, setOpen] = useState(false);
   const isMobile = useMediaQuery('(max-width: 639px)');
@@ -84,6 +85,7 @@ export function DatePicker({
 
   const trigger = (
     <button
+      {...rest}
       // guardrails-ignore no-raw-action-button: presentational popover/drawer trigger for
       // the calendar (opens a picker, doesn't mutate) — styled as a field via
       // fieldControlClass and needs to be a plain <button> to work as both the Popover

package/src/react/components/DateRangePicker.tsx

@@ -55,6 +55,7 @@ export function DateRangePicker({
   'aria-invalid': ariaInvalid,
   'aria-describedby': ariaDescribedBy,
   size = 'md',
+  ...rest
 }: DateRangePickerProps) {
   const [open, setOpen] = useState(false);
   const isMobile = useMediaQuery('(max-width: 639px)');
@@ -92,6 +93,7 @@ export function DateRangePicker({
 
   const trigger = (
     <button
+      {...rest}
       // guardrails-ignore no-raw-action-button: presentational popover/drawer trigger for
       // the calendar (opens a picker, doesn't mutate) — styled as a field via
       // fieldControlClass and needs to be a plain <button> to work as both the Popover