@dashforge/tw 0.5.0-beta → 0.7.0-beta

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { useMemo, forwardRef, useContext, useId, useRef, useEffect, useCallback, useState, Fragment, createContext, Children, isValidElement, cloneElement } from 'react';
+import { useMemo, forwardRef, useContext, useId, useRef, useEffect, useCallback, useState, Fragment, createContext, Children, isValidElement, cloneElement, useLayoutEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -5292,8 +5292,12 @@ const SnackbarContext = /*#__PURE__*/ createContext(null);
             warning: 'text-warning-700 dark:text-warning-400',
             danger: 'text-danger-700 dark:text-danger-400',
             info: 'text-info-700 dark:text-info-400',
-            neutral: 'text-neutral-900 dark:text-neutral-100',
-            muted: 'text-neutral-600 dark:text-neutral-400'
+            // Neutral palette auto-inverts via the dashforgePreset() CSS-var
+            // swap — no `dark:` variants. `text-neutral-900` resolves to
+            // dark text in light mode and light text in dark mode; same
+            // applies to `text-neutral-600` (muted).
+            neutral: 'text-neutral-900',
+            muted: 'text-neutral-600'
         },
         /*
          * `weight` overrides the variant's default weight. When unset, the
@@ -5494,7 +5498,13 @@ Typography.displayName = 'Typography';
          */ variant: {
             plain: '',
             outlined: 'border',
-            elevated: 'bg-white dark:bg-neutral-900',
+            // `bg-white` is hardcoded (does NOT auto-invert via CSS vars),
+            // so the `dark:` variant is required. Target `dark:bg-neutral-100`
+            // resolves to `#171717` via the inversion → one elevation tier
+            // above the page surface (`bg-neutral-50` = `#0a0a0a`) in dark
+            // mode. `dark:bg-neutral-900` was wrong (resolved to near-white
+            // in dark mode — overpowering elevation).
+            elevated: 'bg-white dark:bg-neutral-100',
             soft: '',
             solid: ''
         },
@@ -5666,7 +5676,11 @@ Typography.displayName = 'Typography';
         {
             variant: 'outlined',
             color: 'neutral',
-            class: 'border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-900'
+            // border-neutral-200 auto-inverts via CSS var swap (no `dark:`
+            // needed). bg-white is hardcoded — `dark:bg-neutral-100` keeps
+            // elevation tier above page surface in dark mode (NOT
+            // `dark:bg-neutral-900` which renders near-white).
+            class: 'border-neutral-200 bg-white dark:bg-neutral-100'
         },
         // ─── soft × color ─────────────────────────────────────────────────
         {
@@ -5702,7 +5716,9 @@ Typography.displayName = 'Typography';
         {
             variant: 'soft',
             color: 'neutral',
-            class: 'bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
+            // Both neutral classes auto-invert via the dashforgePreset() CSS
+            // var swap — no `dark:` variants needed.
+            class: 'bg-neutral-100 text-neutral-900'
         },
         // ─── solid × color ────────────────────────────────────────────────
         {
@@ -5738,7 +5754,14 @@ Typography.displayName = 'Typography';
         {
             variant: 'solid',
             color: 'neutral',
-            class: 'bg-neutral-900 text-white dark:bg-neutral-100 dark:text-neutral-900'
+            // Solid neutral is the high-emphasis "always-foreground accent"
+            // variant. Both classes auto-invert: dark surface + light text
+            // in light mode (`#171717` / `#fafafa`) flips to light surface +
+            // dark text in dark mode (`#f5f5f5` / `#0a0a0a`). The
+            // accent inverts WITH the page surface — consistent with the
+            // identity rule. Previously used `text-white` (no auto-invert)
+            // which forced double-inversion to keep readable.
+            class: 'bg-neutral-900 text-neutral-50'
         }
     ],
     defaultVariants: {
@@ -6526,7 +6549,8 @@ Container.displayName = 'Container';
             dotted: 'border-dotted'
         },
         color: {
-            neutral: 'border-neutral-200 dark:border-neutral-800',
+            // Neutral palette auto-inverts via CSS-var swap (no `dark:`).
+            neutral: 'border-neutral-200',
             primary: 'border-primary-300 dark:border-primary-700',
             secondary: 'border-secondary-300 dark:border-secondary-700',
             success: 'border-success-300 dark:border-success-700',
@@ -6668,7 +6692,7 @@ Container.displayName = 'Container';
                 className: cn(lineCommon, leftStubClass)
             }),
             jsx("span", {
-                className: cn('shrink-0 text-sm text-neutral-500 dark:text-neutral-400', labelPadding),
+                className: cn('shrink-0 text-sm text-neutral-500', labelPadding),
                 children: children
             }),
             jsx("span", {
@@ -6821,21 +6845,25 @@ VisuallyHidden.displayName = 'VisuallyHidden';
         ],
         content: [
             'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',
-            'w-full bg-white dark:bg-neutral-900 rounded-lg shadow-xl',
-            'border border-neutral-200 dark:border-neutral-800',
+            // bg-white hardcoded (doesn't auto-invert) so `dark:` is needed.
+            // Target `dark:bg-neutral-100` = #171717 in dark mode (one
+            // elevation tier above page surface).
+            'w-full bg-white dark:bg-neutral-100 rounded-lg shadow-xl',
+            // border-neutral-200 auto-inverts — no `dark:` needed.
+            'border border-neutral-200',
             'p-6 flex flex-col gap-4 max-h-[90vh]',
             'focus:outline-none',
             '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',
             'motion-reduce:transition-none motion-reduce:duration-0'
         ],
-        title: 'text-lg font-semibold leading-tight text-neutral-900 dark:text-neutral-50',
-        description: 'text-sm text-neutral-600 dark:text-neutral-400',
+        // All neutral text classes auto-invert via CSS-var swap.
+        title: 'text-lg font-semibold leading-tight text-neutral-900',
+        description: 'text-sm text-neutral-600',
         closeButton: [
             'absolute top-4 right-4 inline-flex items-center justify-center',
             'h-8 w-8 rounded-md text-neutral-500 hover:text-neutral-900',
-            'dark:text-neutral-400 dark:hover:text-neutral-50',
-            'hover:bg-neutral-100 dark:hover:bg-neutral-800',
+            'hover:bg-neutral-100',
             'focus:outline-none focus:ring-2 focus:ring-primary-500',
             'transition-colors'
         ],
@@ -6952,21 +6980,32 @@ const tabsVariants = tv({
     variants: {
         variant: {
             underline: {
-                list: 'border-b border-neutral-200 dark:border-neutral-800',
+                // Neutral palette auto-inverts via CSS-var swap.
+                list: 'border-b border-neutral-200',
                 trigger: [
-                    'px-3 py-2 border-b-2 border-transparent text-neutral-600 dark:text-neutral-400',
-                    'hover:text-neutral-900 dark:hover:text-neutral-50',
+                    'px-3 py-2 border-b-2 border-transparent text-neutral-600',
+                    'hover:text-neutral-900',
+                    // Primary palette does NOT auto-invert — `dark:` shift is
+                    // an intentional tone refinement (kept).
                     'data-[state=active]:border-primary-500 data-[state=active]:text-primary-700',
                     'dark:data-[state=active]:text-primary-400'
                 ]
             },
             pill: {
-                list: 'rounded-lg bg-neutral-100 dark:bg-neutral-800 p-1',
+                // Pill list bg uses the elevation tier — auto-inverts.
+                list: 'rounded-lg bg-neutral-100 p-1',
                 trigger: [
-                    'px-3 py-1.5 rounded-md text-neutral-600 dark:text-neutral-400',
-                    'hover:text-neutral-900 dark:hover:text-neutral-50',
-                    'data-[state=active]:bg-white dark:data-[state=active]:bg-neutral-900',
-                    'data-[state=active]:text-neutral-900 dark:data-[state=active]:text-neutral-50',
+                    'px-3 py-1.5 rounded-md text-neutral-600',
+                    'hover:text-neutral-900',
+                    // Active pill is one tier above the list bg
+                    // (`bg-neutral-100`-inverted = #171717 in dark).
+                    // `bg-white` is hardcoded so a `dark:` is required —
+                    // target `dark:bg-neutral-200` (= #262626 in dark) sits
+                    // ONE TIER above the list bg, preserving the elevation
+                    // semantic from light mode (where `bg-white` sits above
+                    // `bg-neutral-100` = #f5f5f5).
+                    'data-[state=active]:bg-white dark:data-[state=active]:bg-neutral-200',
+                    'data-[state=active]:text-neutral-900',
                     'data-[state=active]:shadow-sm'
                 ]
             }
@@ -7042,14 +7081,24 @@ const tooltipVariants = tv({
     slots: {
         content: [
             'z-50 max-w-xs rounded-md px-3 py-1.5 text-xs font-medium',
+            // Auto-invert via the dashforgePreset() CSS-var swap:
+            //  - Light mode: `bg-neutral-900` = #171717 (dark surface) +
+            //    `text-neutral-50` = #fafafa (light text) — DARK tooltip
+            //    on the light page (high contrast).
+            //  - Dark mode: `bg-neutral-900` flips to #f5f5f5 (light) +
+            //    `text-neutral-50` flips to #0a0a0a (dark text) — LIGHT
+            //    tooltip on the dark page (high contrast against page).
+            // Adding `dark:bg-neutral-50 dark:text-neutral-900` (the old
+            // pattern) would force the dark-mode tooltip back to a dark
+            // surface — invisible against the dark page.
             'bg-neutral-900 text-neutral-50',
-            'dark:bg-neutral-50 dark:text-neutral-900',
             'shadow-md',
             'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95',
             'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
             'motion-reduce:transition-none motion-reduce:duration-0'
         ],
-        arrow: 'fill-neutral-900 dark:fill-neutral-50'
+        // Arrow tracks the content bg — auto-inverts the same way.
+        arrow: 'fill-neutral-900'
     }
 });
 
@@ -7114,15 +7163,21 @@ const tooltipVariants = tv({
 const popoverVariants = tv({
     slots: {
         content: [
-            'z-50 rounded-md border border-neutral-200 dark:border-neutral-800',
-            'bg-white dark:bg-neutral-900 p-4 shadow-lg',
-            'text-sm text-neutral-900 dark:text-neutral-50',
+            // Neutral border auto-inverts via CSS-var swap.
+            'z-50 rounded-md border border-neutral-200',
+            // bg-white hardcoded (no auto-invert) so `dark:` is required.
+            // Target `dark:bg-neutral-100` resolves to #171717 in dark mode
+            // (one elevation tier above the page surface).
+            'bg-white dark:bg-neutral-100 p-4 shadow-lg',
+            // Text auto-inverts.
+            'text-sm text-neutral-900',
             'focus:outline-none',
             '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',
             'motion-reduce:transition-none motion-reduce:duration-0'
         ],
-        arrow: 'fill-white dark:fill-neutral-900'
+        // Arrow follows content bg: `fill-white` in light + matching dark target.
+        arrow: 'fill-white dark:fill-neutral-100'
     }
 });
 
@@ -7173,11 +7228,13 @@ const popoverVariants = tv({
 const accordionVariants = tv({
     slots: {
         root: 'w-full',
-        item: 'border-b border-neutral-200 dark:border-neutral-800',
+        // Neutral palette auto-inverts via the dashforgePreset() CSS-var
+        // swap — no `dark:` variant needed (would double-invert).
+        item: 'border-b border-neutral-200',
         header: 'flex',
         trigger: [
             'flex flex-1 items-center justify-between py-3 text-left',
-            'text-sm font-medium text-neutral-900 dark:text-neutral-50',
+            'text-sm font-medium text-neutral-900',
             'transition-all hover:underline',
             'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:rounded',
             '[&[data-state=open]>svg]:rotate-180',
@@ -7185,7 +7242,7 @@ const accordionVariants = tv({
             'motion-reduce:transition-none'
         ],
         content: [
-            'overflow-hidden text-sm text-neutral-700 dark:text-neutral-300',
+            'overflow-hidden text-sm text-neutral-700',
             'data-[state=open]:animate-accordion-down',
             'data-[state=closed]:animate-accordion-up',
             'motion-reduce:animate-none'
@@ -7316,7 +7373,8 @@ const accordionVariants = tv({
     slots: {
         root: [
             'block',
-            'bg-neutral-200 dark:bg-neutral-800',
+            // Neutral palette auto-inverts via CSS-var swap (no `dark:`).
+            'bg-neutral-200',
             'motion-reduce:animate-none'
         ]
     },
@@ -7430,28 +7488,34 @@ const accordionVariants = tv({
  */ const paginationVariants = tv({
     slots: {
         root: 'flex flex-wrap items-center gap-3',
-        summary: 'text-neutral-600 dark:text-neutral-400',
+        // All neutral classes auto-invert via the dashforgePreset() CSS-var
+        // swap. `bg-neutral-50` provides the button surface (matches page
+        // surface; the border gives the separation). `hover:bg-neutral-100`
+        // is the one-tier elevation that works in both modes.
+        summary: 'text-neutral-600',
         list: 'inline-flex items-center gap-1',
         pageButton: [
             'inline-flex items-center justify-center rounded-md',
-            'border border-neutral-300 dark:border-neutral-700',
-            'bg-white dark:bg-neutral-900',
-            'text-neutral-700 dark:text-neutral-300',
-            'hover:bg-neutral-50 dark:hover:bg-neutral-800',
+            'border border-neutral-300',
+            'bg-neutral-50',
+            'text-neutral-700',
+            'hover:bg-neutral-100',
             'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
             'transition-colors motion-reduce:transition-none',
             'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none'
         ],
         activeButton: [
+            // Primary palette does NOT auto-invert — `dark:` shift is a
+            // design choice for tone refinement (kept).
             'bg-primary-500 text-white border-primary-500',
             'hover:bg-primary-600 dark:hover:bg-primary-400'
         ],
         navButton: [
             'inline-flex items-center justify-center rounded-md',
-            'border border-neutral-300 dark:border-neutral-700',
-            'bg-white dark:bg-neutral-900',
-            'text-neutral-700 dark:text-neutral-300',
-            'hover:bg-neutral-50 dark:hover:bg-neutral-800',
+            'border border-neutral-300',
+            'bg-neutral-50',
+            'text-neutral-700',
+            'hover:bg-neutral-100',
             'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
             'transition-colors motion-reduce:transition-none',
             'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none'
@@ -7459,12 +7523,12 @@ const accordionVariants = tv({
         ellipsis: 'inline-flex items-center justify-center text-neutral-500 px-1',
         pageSizeSelector: [
             'inline-flex items-center gap-2',
-            'text-neutral-700 dark:text-neutral-300'
+            'text-neutral-700'
         ],
         jumpInput: [
-            'rounded-md border border-neutral-300 dark:border-neutral-700',
-            'bg-white dark:bg-neutral-900',
-            'text-neutral-900 dark:text-neutral-50',
+            'rounded-md border border-neutral-300',
+            'bg-neutral-50',
+            'text-neutral-900',
             'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
             'transition-colors motion-reduce:transition-none'
         ]
@@ -7601,7 +7665,7 @@ function range(start, end) {
     }, (_, i)=>start + i);
 }
 
-const DEFAULT_LABELS = {
+const DEFAULT_LABELS$2 = {
     first: 'First',
     prev: 'Previous',
     next: 'Next',
@@ -7649,7 +7713,7 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [
  */ function Pagination(props) {
     var _slotProps_root, _slotProps_summary, _slotProps_summary1, _slotProps_list, _slotProps_navButton, _slotProps_navButton1, _slotProps_navButton2, _slotProps_navButton3, _slotProps_pageSizeSelector, _slotProps_jumpInput;
     const { page, pageSize, totalCount, onPageChange, onPageSizeChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, siblingCount = 1, boundaryCount = 1, showFirstLast = true, showJumpInput = true, disabled = false, labels: labelsProp, variant = 'default', size = 'md', sx, slotProps } = props;
-    const labels = _extends({}, DEFAULT_LABELS, labelsProp);
+    const labels = _extends({}, DEFAULT_LABELS$2, labelsProp);
     const v = paginationVariants({
         variant,
         size
@@ -7807,7 +7871,9 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [
                         onChange: handlePageSize,
                         disabled: disabled,
                         "aria-label": labels.perPage,
-                        className: cn('rounded-md border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500'),
+                        className: cn(// Auto-invert via CSS-var swap — no `dark:` variants needed
+                        // on neutral palette.
+                        'rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500'),
                         children: pageSizeOptions.map((opt)=>jsx("option", {
                                 value: opt,
                                 children: opt
@@ -7844,6 +7910,2393 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [
     });
 }
 
+/**
+ * `<Table>` variant recipe.
+ *
+ * Slots:
+ *  - `root`              — outer wrapper
+ *  - `toolbar`           — search + filter chips row above table
+ *  - `search`            — search input
+ *  - `scroll`            — `<div class="overflow-auto">` wrapping the table
+ *  - `table`             — `<table>` element
+ *  - `thead`             — `<thead>` (sticky positioning here)
+ *  - `tbody`             — `<tbody>`
+ *  - `headerRow`         — `<tr>` inside `<thead>`
+ *  - `headerCell`        — `<th>` cell
+ *  - `headerCellButton`  — `<button>` inside sortable `<th>`
+ *  - `row`               — `<tr>` inside `<tbody>` (data row)
+ *  - `cell`              — `<td>` data cell
+ *  - `selectionCell`     — first `<td>` when selection mode active
+ *  - `expandToggleCell`  — second `<td>` when expandable active
+ *  - `expandedRow`       — full-width `<tr>` rendered after an expanded row
+ *  - `rowActionsCell`    — last `<td>` when `rowActions` provided
+ *  - `emptyState`        — placeholder when rows is empty
+ *  - `loadingOverlay`    — skeleton overlay when loading
+ *  - `bulkActionFooter`  — sticky footer with bulk actions
+ *
+ * Variant axes:
+ *  - `variant` — visual row-division style:
+ *      - `plain`    — minimal separators
+ *      - `lines`    — Stripe-style thin horizontal dividers (default)
+ *      - `striped`  — alternating row backgrounds (zebra)
+ *      - `bordered` — full cell borders
+ *      - `card`     — each row rendered as a separate surface card
+ *  - `size`    — `sm` / `md` (default) / `lg`
+ *  - `density` — `compact` (40px row) / `comfortable` (default 48px) / `spacious` (56px)
+ *
+ * Smart-default alignment (per column) is applied by the Table
+ * component code, NOT here — it depends on the runtime-detected
+ * value type, which the recipe doesn't see.
+ *
+ * **Dashforge identity rule** (memory: `feedback_dashforge_preset_is_identity`):
+ * This recipe uses NO `dark:` variants on the neutral palette. The
+ * `dashforgePreset()` CSS-variable swap auto-inverts neutral tokens
+ * (`bg-neutral-50` is light surface in light mode, dark surface in
+ * dark mode — same class, different physical color). Adding a
+ * `dark:` variant on neutral palette = DOUBLE inversion = breaks
+ * dark mode. The selected-row state uses the canonical LeftNav
+ * `itemActive` pattern (`bg-primary-100 text-primary-900 font-medium`),
+ * which works in both modes because the primary palette has no
+ * inversion (both `bg` and `text` resolve to the same physical
+ * colors regardless of mode → guaranteed contrast).
+ */ const tableVariants = tv({
+    slots: {
+        root: 'w-full',
+        toolbar: 'flex flex-wrap items-center gap-3 mb-3',
+        search: [
+            'inline-flex items-center gap-2',
+            'w-full max-w-sm rounded-md',
+            'border border-neutral-300',
+            // bg-neutral-50 auto-inverts via CSS var swap (light in light mode,
+            // dark in dark mode). Same semantic as TextField wrapper.
+            'bg-neutral-50',
+            'focus-within:ring-2 focus-within:ring-primary-500',
+            'transition-colors motion-reduce:transition-none'
+        ],
+        scroll: 'relative w-full overflow-auto rounded-md',
+        table: 'w-full caption-bottom text-left',
+        // thead matches the page surface (auto-inverts). When sticky the
+        // header sits opaque against the scroll content beneath it.
+        thead: 'bg-neutral-50',
+        tbody: '',
+        headerRow: '',
+        headerCell: [
+            // Less prominent than the body — secondary-text intent
+            // (auto-inverts: dark grey in light mode, light grey in dark).
+            'text-neutral-700',
+            'font-semibold whitespace-nowrap select-none',
+            'border-b border-neutral-200'
+        ],
+        headerCellButton: [
+            'group inline-flex items-center gap-1 select-none',
+            // hover increases prominence (auto-inverts).
+            'hover:text-neutral-900',
+            'focus:outline-none focus-visible:underline',
+            'transition-colors motion-reduce:transition-none'
+        ],
+        row: [
+            'group/row transition-colors motion-reduce:transition-none',
+            // bg-neutral-100 = "elevated above surface" in both modes via
+            // auto-inversion. Slightly visible against the table bg.
+            'hover:bg-neutral-100',
+            // Canonical LeftNav `itemActive` pattern — primary palette
+            // doesn't invert, so dark-navy text on light-blue bg in BOTH
+            // modes. Guaranteed contrast.
+            'data-[selected=true]:bg-primary-100',
+            'data-[selected=true]:text-primary-900',
+            'data-[selected=true]:font-medium'
+        ],
+        cell: [
+            // Auto-inverts — dark text in light mode, light text in dark mode.
+            'text-neutral-900',
+            'border-b border-neutral-200',
+            'align-middle'
+        ],
+        selectionCell: 'w-10 text-center',
+        expandToggleCell: 'w-10 text-center',
+        // Expanded panel uses one tier of elevation above the page surface.
+        expandedRow: 'bg-neutral-100',
+        rowActionsCell: [
+            'w-12 text-right',
+            // Row actions hidden until row is hovered or focus-within
+            // (Pencil & Paper UX pattern: reveal-on-hover reduces visual density).
+            'opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100',
+            'transition-opacity motion-reduce:transition-none'
+        ],
+        emptyState: [
+            'py-12 text-center text-neutral-500'
+        ],
+        loadingOverlay: [
+            'pointer-events-none'
+        ],
+        bulkActionFooter: [
+            'sticky bottom-0 z-20',
+            'flex flex-wrap items-center justify-between gap-3',
+            'px-3 py-2 mt-0',
+            'border-t border-neutral-200',
+            // Surface-elevated bg + shadow ladder.
+            'bg-neutral-50 shadow-md'
+        ]
+    },
+    variants: {
+        variant: {
+            plain: {},
+            lines: {
+            },
+            striped: {
+                // bg-neutral-100/60 = subtle elevation tier (auto-inverts).
+                row: 'odd:bg-neutral-100/60'
+            },
+            bordered: {
+                table: 'border border-neutral-200',
+                cell: 'border-r last:border-r-0 border-neutral-200',
+                headerCell: 'border-r last:border-r-0 border-neutral-200'
+            },
+            card: {
+                scroll: 'overflow-visible',
+                table: 'border-separate border-spacing-y-2',
+                row: [
+                    'rounded-lg shadow-sm',
+                    // Each row becomes an elevated card above the surface.
+                    'bg-neutral-50'
+                ],
+                cell: 'border-b-0 first:rounded-l-lg last:rounded-r-lg',
+                headerCell: 'border-b-0'
+            }
+        },
+        size: {
+            sm: {
+                headerCell: 'text-xs',
+                cell: 'text-xs',
+                search: 'text-xs'
+            },
+            md: {
+                headerCell: 'text-sm',
+                cell: 'text-sm',
+                search: 'text-sm'
+            },
+            lg: {
+                headerCell: 'text-base',
+                cell: 'text-base',
+                search: 'text-base'
+            }
+        },
+        density: {
+            // Pencil & Paper UX research: 40px / 48px / 56px row height.
+            compact: {
+                headerCell: 'px-2 py-1',
+                cell: 'px-2 py-1'
+            },
+            comfortable: {
+                headerCell: 'px-3 py-2',
+                cell: 'px-3 py-2'
+            },
+            spacious: {
+                headerCell: 'px-4 py-3',
+                cell: 'px-4 py-3'
+            }
+        },
+        stickyHeader: {
+            true: {
+                thead: 'sticky top-0 z-10'
+            },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        variant: 'lines',
+        size: 'md',
+        density: 'comfortable',
+        stickyHeader: true
+    }
+});
+
+/**
+ * Generic "controllable" state hook — switches between controlled
+ * (via parent-supplied value + setter) and uncontrolled (internal
+ * `useState`).
+ *
+ * - If `controlledValue !== undefined`, the hook is in **controlled**
+ *   mode: the internal state is ignored; the returned setter calls
+ *   `onControlledChange` only.
+ * - Otherwise it's in **uncontrolled** mode: internal `useState`,
+ *   defaulting to `defaultValue`. The optional `onControlledChange`
+ *   is still fired on every change so the parent can react.
+ *
+ * The control mode is determined per-render. Mixing modes (passing
+ * `controlledValue` undefined sometimes) is a consumer bug — we don't
+ * try to "remember" the last mode (React's rules-of-hooks make that
+ * unsafe).
+ */ function useControllableState(args) {
+    const { controlledValue, defaultValue, onChange } = args;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    // Stable ref to `onChange` so the setter doesn't change identity
+    // every render (consumer can pass an inline lambda safely).
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const setValue = useCallback((next)=>{
+        const resolved = typeof next === 'function' ? next(value) : next;
+        if (!isControlled) {
+            setUncontrolledValue(resolved);
+        }
+        onChangeRef.current == null ? void 0 : onChangeRef.current.call(onChangeRef, resolved);
+    }, [
+        isControlled,
+        value
+    ]);
+    return [
+        value,
+        setValue
+    ];
+}
+
+/**
+ * Returns a debounced version of `value` — only updates after `delayMs`
+ * of no further changes. Used by the search input so we don't re-filter
+ * the entire row set on every keystroke.
+ *
+ * `delayMs <= 0` short-circuits to the input value (no debounce —
+ * useful for tests).
+ */ function useDebouncedValue(value, delayMs) {
+    const [debounced, setDebounced] = useState(value);
+    useEffect(()=>{
+        if (delayMs <= 0) {
+            setDebounced(value);
+            return;
+        }
+        const timer = setTimeout(()=>setDebounced(value), delayMs);
+        return ()=>clearTimeout(timer);
+    }, [
+        value,
+        delayMs
+    ]);
+    return debounced;
+}
+
+/**
+ * Walk a dotted path through an object and return the value, or
+ * `undefined` if any segment is missing / nullish.
+ *
+ * Bug fix from the MUI-side Table (Sprint 4.1 motivation): the
+ * existing wrapper typed `field: NestedKeyOf<T>` but performed a
+ * flat `row[col.field]` lookup at runtime — nested keys silently
+ * returned `undefined`. This helper makes the runtime match the
+ * type contract.
+ *
+ * @example
+ * ```ts
+ * getNestedValue({ user: { name: 'Jane' } }, 'user.name')  // 'Jane'
+ * getNestedValue({ user: null }, 'user.name')              // undefined
+ * getNestedValue({}, 'a.b.c')                              // undefined
+ * getNestedValue({ a: { b: 0 } }, 'a.b')                   // 0 (NOT undefined)
+ * ```
+ */ function getNestedValue(row, path) {
+    if (!path) return undefined;
+    const segments = path.split('.');
+    let current = row;
+    for (const segment of segments){
+        if (current == null) return undefined;
+        if (typeof current !== 'object') return undefined;
+        current = current[segment];
+    }
+    return current;
+}
+
+/**
+ * Stringify any value into a search-comparable form. Handles all
+ * the edge cases that bit the MUI-side Table:
+ *
+ *   - `null` / `undefined`      → `''`
+ *   - `string`                  → as-is
+ *   - `number` / `bigint`       → `String(value)`
+ *   - `boolean`                 → `'true'` / `'false'`
+ *   - `Date`                    → ISO 8601
+ *   - `Array` / object          → `JSON.stringify` (best effort)
+ */ function stringifyForSearch(value) {
+    if (value == null) return '';
+    if (typeof value === 'string') return value;
+    if (typeof value === 'number' || typeof value === 'bigint') return String(value);
+    if (typeof value === 'boolean') return value ? 'true' : 'false';
+    if (value instanceof Date) return value.toISOString();
+    if (Array.isArray(value)) {
+        try {
+            return value.map(stringifyForSearch).join(' ');
+        } catch (unused) {
+            return '';
+        }
+    }
+    if (typeof value === 'object') {
+        try {
+            return JSON.stringify(value);
+        } catch (unused) {
+            return '';
+        }
+    }
+    return String(value);
+}
+/**
+ * Filters `rows` by `query` against the columns flagged
+ * `searchable: true`. Empty / whitespace-only query is a no-op
+ * (returns the original rows).
+ *
+ * Case-insensitive substring match. The caller is responsible for
+ * debouncing the input (use `useDebouncedValue`).
+ */ function useTableSearch(rows, cols, query) {
+    return useMemo(()=>{
+        const trimmed = query.trim();
+        if (!trimmed) return rows;
+        const needle = trimmed.toLowerCase();
+        const searchableCols = cols.filter((c)=>c.searchable);
+        if (searchableCols.length === 0) return rows;
+        return rows.filter((row)=>searchableCols.some((col)=>stringifyForSearch(getNestedValue(row, col.field)).toLowerCase().includes(needle)));
+    }, [
+        rows,
+        cols,
+        query
+    ]);
+}
+
+/**
+ * Filters `rows` by the per-column filter model. v1 only supports
+ * the `contains` operator (text substring) — additional ops
+ * (`equals`, `in`, `gte`, `lte`, `between`, `before`, `after`)
+ * land in v1-bis once the filter UI surface for each shape is
+ * fleshed out.
+ *
+ * AND semantics across columns: a row must match EVERY active
+ * filter. Within a single filter, the op decides the predicate.
+ */ function useTableFilter(rows, filterModel) {
+    return useMemo(()=>{
+        if (!filterModel || filterModel.length === 0) return rows;
+        return rows.filter((row)=>filterModel.every((filter)=>{
+                const value = getNestedValue(row, filter.field);
+                const stringValue = stringifyForSearch(value).toLowerCase();
+                const needle = filter.value.trim().toLowerCase();
+                if (!needle) return true; // empty filter == no-op
+                switch(filter.op){
+                    case 'contains':
+                        return stringValue.includes(needle);
+                    default:
+                        return true;
+                }
+            }));
+    }, [
+        rows,
+        filterModel
+    ]);
+}
+
+/**
+ * Default comparator. Handles the common primitive types in a
+ * sensible way:
+ *
+ *  - `null` / `undefined` always sort LAST (stable across asc/desc)
+ *  - `number` / `bigint`         → numeric comparison
+ *  - `string`                    → locale-aware compare via `Intl.Collator`
+ *  - `Date` / ISO-string-date    → numeric compare on epoch ms
+ *  - `boolean`                   → `false < true`
+ *  - mixed types fall back to string compare
+ *
+ * The locale collator is created once per call (cheap; cached
+ * upstream via memoization).
+ */ function defaultCompare(a, b) {
+    // Numbers
+    if (typeof a === 'number' && typeof b === 'number') {
+        return a - b;
+    }
+    if (typeof a === 'bigint' && typeof b === 'bigint') {
+        return a < b ? -1 : a > b ? 1 : 0;
+    }
+    // Dates
+    if (a instanceof Date && b instanceof Date) {
+        return a.getTime() - b.getTime();
+    }
+    // Booleans
+    if (typeof a === 'boolean' && typeof b === 'boolean') {
+        return a === b ? 0 : a ? 1 : -1;
+    }
+    // Strings (incl. ISO date strings — natural lexical ordering matches chronology)
+    if (typeof a === 'string' && typeof b === 'string') {
+        return a.localeCompare(b, undefined, {
+            numeric: true,
+            sensitivity: 'base'
+        });
+    }
+    // Fallback: stringify and compare
+    return String(a).localeCompare(String(b), undefined, {
+        numeric: true,
+        sensitivity: 'base'
+    });
+}
+/**
+ * Applies the `sortModel` to `rows`. Returns a NEW sorted array
+ * (does not mutate input). Stable sort guaranteed by the underlying
+ * `Array.prototype.sort` in modern engines.
+ *
+ * Multi-column sort: items earlier in `sortModel` have higher
+ * precedence. Equal values fall through to the next sort item; if
+ * all sort items tie, the original order is preserved (stable).
+ */ function useTableSort(rows, cols, sortModel) {
+    return useMemo(()=>{
+        if (!sortModel || sortModel.length === 0) return rows;
+        const sortConfigs = sortModel.map((item)=>{
+            const col = cols.find((c)=>c.field === item.field);
+            if (!col || !col.sortable) return null;
+            const customCompare = typeof col.sortable === 'function' ? col.sortable : undefined;
+            return {
+                item,
+                col,
+                customCompare
+            };
+        }).filter((x)=>x != null);
+        if (sortConfigs.length === 0) return rows;
+        // Decorate-sort-undecorate for stability across engines.
+        //
+        // Per sort item: null/undefined values always sort LAST, regardless
+        // of direction. This invariant lives outside the comparator so it's
+        // not inverted by `-cmp` when direction is `desc`. (Without this
+        // separation, `desc` flipped null-handling and placed nulls FIRST,
+        // which broke user expectations — fixed in the v1 implementation.)
+        return [
+            ...rows
+        ].sort((a, b)=>{
+            for (const { item, customCompare } of sortConfigs){
+                const aVal = customCompare ? a : getNestedValue(a, item.field);
+                const bVal = customCompare ? b : getNestedValue(b, item.field);
+                // Null-last (direction-independent)
+                const aNull = aVal == null;
+                const bNull = bVal == null;
+                if (aNull && bNull) continue;
+                if (aNull) return 1;
+                if (bNull) return -1;
+                const cmp = customCompare ? customCompare(a, b) : defaultCompare(aVal, bVal);
+                if (cmp !== 0) {
+                    return item.direction === 'desc' ? -cmp : cmp;
+                }
+            }
+            return 0;
+        });
+    }, [
+        rows,
+        cols,
+        sortModel
+    ]);
+}
+/**
+ * Three-state sort cycler: `none` → `asc` → `desc` → `none`.
+ *
+ * Used by the header click handler. Returns the next sort model
+ * to apply, given the current model + the clicked field + whether
+ * the user is multi-sorting (shift key).
+ */ function cycleSortFor(current, field, multi) {
+    const existing = current.find((s)=>s.field === field);
+    const nextDirection = !existing ? 'asc' : existing.direction === 'asc' ? 'desc' : null;
+    if (multi) {
+        // Multi-sort: keep other entries, update / add / remove this one.
+        const rest = current.filter((s)=>s.field !== field);
+        if (nextDirection == null) return rest;
+        return [
+            ...rest,
+            {
+                field,
+                direction: nextDirection
+            }
+        ];
+    }
+    // Single-sort: replace the whole model.
+    if (nextDirection == null) return [];
+    return [
+        {
+            field,
+            direction: nextDirection
+        }
+    ];
+}
+
+/**
+ * Selection logic helper. Given the controllable selection state +
+ * the setter (from `useControllableState`), exposes ergonomic
+ * helpers the Table calls from its render path.
+ *
+ *  - `single` mode: at most one row selected. Toggling another
+ *    replaces the previous.
+ *  - `multiple` mode: any subset selectable; toggling adds/removes.
+ *  - `none` mode: every toggle is a no-op (the Table shouldn't
+ *    render the checkbox cells anyway, but this is defensive).
+ */ function useTableSelection(mode, selectedRowIds, setSelectedRowIds) {
+    const selectedSet = useMemo(()=>new Set(selectedRowIds), [
+        selectedRowIds
+    ]);
+    const isSelected = useCallback((rowId)=>selectedSet.has(rowId), [
+        selectedSet
+    ]);
+    const toggleRow = useCallback((rowId)=>{
+        if (mode === 'none') return;
+        if (mode === 'single') {
+            setSelectedRowIds(selectedSet.has(rowId) ? [] : [
+                rowId
+            ]);
+            return;
+        }
+        // multiple
+        setSelectedRowIds((prev)=>{
+            const next = new Set(prev);
+            if (next.has(rowId)) next.delete(rowId);
+            else next.add(rowId);
+            return [
+                ...next
+            ];
+        });
+    }, [
+        mode,
+        selectedSet,
+        setSelectedRowIds
+    ]);
+    const toggleAll = useCallback((allRowIds)=>{
+        if (mode !== 'multiple') return;
+        const allSelected = allRowIds.every((id)=>selectedSet.has(id));
+        setSelectedRowIds(allSelected ? [] : [
+            ...allRowIds
+        ]);
+    }, [
+        mode,
+        selectedSet,
+        setSelectedRowIds
+    ]);
+    const clearSelection = useCallback(()=>{
+        setSelectedRowIds([]);
+    }, [
+        setSelectedRowIds
+    ]);
+    const isAllSelected = useCallback((allRowIds)=>{
+        if (allRowIds.length === 0) return false;
+        return allRowIds.every((id)=>selectedSet.has(id));
+    }, [
+        selectedSet
+    ]);
+    const isIndeterminate = useCallback((allRowIds)=>{
+        if (allRowIds.length === 0) return false;
+        const some = allRowIds.some((id)=>selectedSet.has(id));
+        const all = allRowIds.every((id)=>selectedSet.has(id));
+        return some && !all;
+    }, [
+        selectedSet
+    ]);
+    return {
+        selectedRowIds,
+        isSelected,
+        toggleRow,
+        toggleAll,
+        clearSelection,
+        isAllSelected,
+        isIndeterminate
+    };
+}
+
+/**
+ * Auto-detects the primitive type of each column by scanning the
+ * first non-null value across the supplied rows. Drives smart
+ * defaults for `align` and `monospace` on the cell render path.
+ *
+ * Scans only the first N rows (default 50) for performance — if the
+ * dataset's first 50 rows are unrepresentative, the consumer can
+ * override per-column via explicit `align` / `monospace` props.
+ *
+ * Returns `Map<columnField, inferredType>`.
+ */ function useColumnAutoDetect(rows, cols, sampleSize = 50) {
+    return useMemo(()=>{
+        const result = new Map();
+        const sample = rows.slice(0, sampleSize);
+        for (const col of cols){
+            const field = col.field;
+            let inferred = 'unknown';
+            for (const row of sample){
+                const value = getNestedValue(row, field);
+                if (value == null) continue;
+                inferred = inferType(value);
+                break; // first non-null wins
+            }
+            result.set(field, inferred);
+        }
+        return result;
+    }, [
+        rows,
+        cols,
+        sampleSize
+    ]);
+}
+function inferType(value) {
+    if (typeof value === 'number') return 'number';
+    if (typeof value === 'boolean') return 'boolean';
+    if (value instanceof Date) return 'date';
+    if (typeof value === 'string') {
+        // Heuristic: ISO date string (YYYY-MM-DD[T...]) → 'date'
+        if (/^\d{4}-\d{2}-\d{2}/.test(value)) return 'date';
+        return 'string';
+    }
+    return 'unknown';
+}
+/**
+ * Resolves the effective `align` for a column, honoring explicit
+ * `col.align` first and falling back to the inferred type.
+ */ function resolveAlign(col, inferred) {
+    if (col.align) return col.align;
+    switch(inferred){
+        case 'number':
+            return 'right';
+        case 'boolean':
+            return 'center';
+        default:
+            return 'left';
+    }
+}
+/**
+ * Resolves the effective `tabularNums` flag for a column.
+ *
+ * `tabular-nums` is a `font-variant-numeric` rule that makes every
+ * digit occupy the same width — it does NOT change the font family.
+ * Auto-applied for `number` and `date` columns so currency values
+ * and ISO dates align cleanly. Explicit `col.tabularNums` wins.
+ */ function resolveTabularNums(col, inferred) {
+    if (col.tabularNums !== undefined) return col.tabularNums;
+    return inferred === 'number' || inferred === 'date';
+}
+/**
+ * Resolves the effective `monospace` flag for a column.
+ *
+ * `font-mono` changes the font FAMILY to a monospace stack, which
+ * would override the consumer's theme `font-sans`. The library
+ * never auto-applies it — only an explicit `col.monospace: true`
+ * opts in. Consumers wanting a custom mono stack configure it
+ * through Tailwind's `theme.extend.fontFamily.mono` in their own
+ * preset (the dashforgePreset does not own the `fontFamily` axis).
+ */ function resolveMonospace(col) {
+    return col.monospace === true;
+}
+
+const DEFAULT_LABELS$1 = {
+    searchPlaceholder: 'Search...',
+    noData: 'No data',
+    loading: 'Loading…',
+    ariaSortNone: 'Not sorted. Click to sort ascending.',
+    ariaSortAscending: 'Sorted ascending. Click to sort descending.',
+    ariaSortDescending: 'Sorted descending. Click to clear sort.',
+    ariaSelectRow: 'Select row',
+    ariaSelectAllRows: 'Select all rows',
+    ariaExpandRow: 'Expand row',
+    ariaCollapseRow: 'Collapse row',
+    selectedCount: '{count} selected',
+    clearSelection: 'Clear selection',
+    filterColumn: 'Filter',
+    filterApply: 'Apply',
+    filterClear: 'Clear',
+    density: 'Density',
+    densityCompact: 'Compact',
+    densityComfortable: 'Comfortable',
+    densitySpacious: 'Spacious'
+};
+const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
+/**
+ * Dashforge TW `<Table>` — declarative-first, market-grounded table.
+ *
+ * Design references:
+ *  - Visual: Stripe (clean line dividers, hover row actions, sticky header)
+ *  - Density: Pencil & Paper UX research (compact / comfortable / spacious)
+ *  - A11Y: W3C WAI Table tutorial (semantic `<table>`, scope, aria-sort)
+ *  - Column model: extended from Dashforge MUI Table existing API
+ *
+ * Smart defaults: column types auto-detected → numbers right-aligned
+ * + tabular-nums, dates monospace, booleans center-aligned. Override
+ * via explicit `align` / `monospace` per column.
+ *
+ * State (sort / search / filter / selection / expansion) is internal
+ * by default; pass the controlled prop + matching change handler to
+ * lift state up — same pattern as `<TextField>` value.
+ *
+ * i18n: pass `header: t('users.name')` for column headers; pass
+ * `labels={{ searchPlaceholder: t('...'), ... }}` for internal default
+ * strings.
+ */ function Table(props) {
+    var _slotProps_root, _slotProps_toolbar, _slotProps_search, _slotProps_scroll, _slotProps_table, _slotProps_thead, _slotProps_headerRow, _slotProps_headerCell, _slotProps_selectionCell, _slotProps_headerCell1, _slotProps_expandToggleCell, _slotProps_headerCell2, _slotProps_tbody, _slotProps_row, _slotProps_cell, _slotProps_emptyState, _slotProps_bulkActionFooter;
+    const { rows, cols, getRowId = DEFAULT_GET_ROW_ID, // State props (controllable)
+    sortModel: sortModelProp, onSortChange, defaultSortModel, enableSearch = false, searchQuery: searchQueryProp, onSearchQueryChange, searchPlaceholder, searchDebounceMs = 200, filterModel: filterModelProp, onFilterChange, rowSelection = 'none', selectedRowIds: selectedRowIdsProp, onSelectionChange, bulkActions, expandable, rowActions, loading = false, loadingRowCount = 5, emptyState, stickyHeader = true, caption, showCaption = false, access: tableAccess, labels: labelsProp, variant, size, density, sx, slotProps } = props;
+    const labels = _extends({}, DEFAULT_LABELS$1, labelsProp);
+    const tableAccessState = useAccessState(tableAccess);
+    // ───── Controllable state machinery ─────
+    const [sortModel, setSortModel] = useControllableState({
+        controlledValue: sortModelProp,
+        defaultValue: defaultSortModel != null ? defaultSortModel : [],
+        onChange: onSortChange
+    });
+    const [searchQuery, setSearchQuery] = useControllableState({
+        controlledValue: searchQueryProp,
+        defaultValue: '',
+        onChange: onSearchQueryChange
+    });
+    const filterModel = filterModelProp != null ? filterModelProp : [];
+    const [selectedRowIds, setSelectedRowIds] = useControllableState({
+        controlledValue: selectedRowIdsProp,
+        defaultValue: [],
+        onChange: onSelectionChange
+    });
+    const [expandedRowIds, setExpandedRowIds] = useControllableState({
+        controlledValue: expandable == null ? void 0 : expandable.expandedRowIds,
+        defaultValue: [],
+        onChange: expandable == null ? void 0 : expandable.onExpandChange
+    });
+    // ───── RBAC: filter out hidden columns ─────
+    const visibleCols = useMemo(()=>cols.filter((col)=>!col.access || col.access.onUnauthorized !== 'hide'), [
+        cols
+    ]);
+    // ───── Smart-default column types ─────
+    const columnTypes = useColumnAutoDetect(rows, visibleCols);
+    // ───── Pipeline: search → filter → sort ─────
+    const debouncedSearchQuery = useDebouncedValue(searchQuery, searchDebounceMs);
+    const searchedRows = useTableSearch(rows, visibleCols, debouncedSearchQuery);
+    const filteredRows = useTableFilter(searchedRows, filterModel);
+    const sortedRows = useTableSort(filteredRows, visibleCols, sortModel);
+    // ───── Selection helpers ─────
+    const visibleRowIds = useMemo(()=>sortedRows.map((row, idx)=>getRowId(row, idx)), [
+        sortedRows,
+        getRowId
+    ]);
+    const selection = useTableSelection(rowSelection, selectedRowIds, setSelectedRowIds);
+    const selectedRows = useMemo(()=>sortedRows.filter((row, idx)=>selection.isSelected(getRowId(row, idx))), [
+        sortedRows,
+        selection,
+        getRowId
+    ]);
+    // ───── Variant recipe ─────
+    const v = tableVariants({
+        variant,
+        size,
+        density,
+        stickyHeader
+    });
+    // ───── Render ─────
+    if (!tableAccessState.visible) return null;
+    const isTableInteractive = !tableAccessState.disabled;
+    const showSelectionColumn = rowSelection !== 'none';
+    const showExpandColumn = expandable != null;
+    const showRowActionsColumn = rowActions != null;
+    const totalColumnCount = visibleCols.length + (showSelectionColumn ? 1 : 0) + (showExpandColumn ? 1 : 0) + (showRowActionsColumn ? 1 : 0);
+    return jsxs("div", {
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        "data-disabled": !isTableInteractive ? 'true' : undefined,
+        children: [
+            enableSearch && jsx("div", {
+                className: cn(v.toolbar(), slotProps == null ? void 0 : (_slotProps_toolbar = slotProps.toolbar) == null ? void 0 : _slotProps_toolbar.className),
+                children: jsxs("label", {
+                    className: cn(v.search(), slotProps == null ? void 0 : (_slotProps_search = slotProps.search) == null ? void 0 : _slotProps_search.className),
+                    children: [
+                        jsx("span", {
+                            className: "sr-only",
+                            children: labels.searchPlaceholder
+                        }),
+                        jsx(SearchIcon$1, {
+                            className: "ml-2 shrink-0 text-neutral-500"
+                        }),
+                        jsx("input", {
+                            type: "text",
+                            value: searchQuery,
+                            onChange: (e)=>setSearchQuery(e.target.value),
+                            placeholder: searchPlaceholder != null ? searchPlaceholder : labels.searchPlaceholder,
+                            disabled: !isTableInteractive,
+                            className: cn('flex-1 bg-transparent border-0 outline-none', 'px-2 py-1.5', // placeholder color auto-inverts via the CSS-var preset;
+                            // no `dark:` variant needed on neutral palette.
+                            'placeholder:text-neutral-400', 'disabled:opacity-50 disabled:cursor-not-allowed')
+                        })
+                    ]
+                })
+            }),
+            jsx("div", {
+                className: cn(v.scroll(), slotProps == null ? void 0 : (_slotProps_scroll = slotProps.scroll) == null ? void 0 : _slotProps_scroll.className),
+                children: jsxs("table", {
+                    className: cn(v.table(), slotProps == null ? void 0 : (_slotProps_table = slotProps.table) == null ? void 0 : _slotProps_table.className),
+                    children: [
+                        caption != null && jsx("caption", {
+                            className: cn(!showCaption && 'sr-only', 'py-2 text-sm text-neutral-500'),
+                            children: caption
+                        }),
+                        jsx("thead", {
+                            className: cn(v.thead(), slotProps == null ? void 0 : (_slotProps_thead = slotProps.thead) == null ? void 0 : _slotProps_thead.className),
+                            children: jsxs("tr", {
+                                className: cn(v.headerRow(), slotProps == null ? void 0 : (_slotProps_headerRow = slotProps.headerRow) == null ? void 0 : _slotProps_headerRow.className),
+                                children: [
+                                    showSelectionColumn && jsx("th", {
+                                        scope: "col",
+                                        className: cn(v.headerCell(), v.selectionCell(), slotProps == null ? void 0 : (_slotProps_headerCell = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell.className, slotProps == null ? void 0 : (_slotProps_selectionCell = slotProps.selectionCell) == null ? void 0 : _slotProps_selectionCell.className),
+                                        children: rowSelection === 'multiple' && jsx("input", {
+                                            type: "checkbox",
+                                            "aria-label": labels.ariaSelectAllRows,
+                                            checked: selection.isAllSelected(visibleRowIds),
+                                            ref: (el)=>{
+                                                if (el) el.indeterminate = selection.isIndeterminate(visibleRowIds);
+                                            },
+                                            onChange: ()=>selection.toggleAll(visibleRowIds),
+                                            disabled: !isTableInteractive,
+                                            className: "cursor-pointer"
+                                        })
+                                    }),
+                                    showExpandColumn && jsx("th", {
+                                        scope: "col",
+                                        "aria-hidden": "true",
+                                        className: cn(v.headerCell(), v.expandToggleCell(), slotProps == null ? void 0 : (_slotProps_headerCell1 = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell1.className, slotProps == null ? void 0 : (_slotProps_expandToggleCell = slotProps.expandToggleCell) == null ? void 0 : _slotProps_expandToggleCell.className)
+                                    }),
+                                    visibleCols.map((col)=>{
+                                        var _slotProps_headerCell;
+                                        return jsx(HeaderCell$1, {
+                                            col: col,
+                                            sortModel: sortModel,
+                                            onSortClick: (e)=>handleSortClick$1(col, e, sortModel, setSortModel),
+                                            inferredType: columnTypes.get(col.field),
+                                            labels: labels,
+                                            className: cn(v.headerCell(), slotProps == null ? void 0 : (_slotProps_headerCell = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell.className),
+                                            buttonClassName: v.headerCellButton(),
+                                            disabled: !isTableInteractive
+                                        }, col.field);
+                                    }),
+                                    showRowActionsColumn && jsx("th", {
+                                        scope: "col",
+                                        "aria-hidden": "true",
+                                        className: cn(v.headerCell(), 'w-12', slotProps == null ? void 0 : (_slotProps_headerCell2 = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell2.className)
+                                    })
+                                ]
+                            })
+                        }),
+                        jsx("tbody", {
+                            className: cn(v.tbody(), slotProps == null ? void 0 : (_slotProps_tbody = slotProps.tbody) == null ? void 0 : _slotProps_tbody.className),
+                            children: loading ? renderLoadingRows$1({
+                                count: loadingRowCount,
+                                visibleCols,
+                                showSelectionColumn,
+                                showExpandColumn,
+                                showRowActionsColumn,
+                                rowClass: cn(v.row(), slotProps == null ? void 0 : (_slotProps_row = slotProps.row) == null ? void 0 : _slotProps_row.className),
+                                cellClass: cn(v.cell(), slotProps == null ? void 0 : (_slotProps_cell = slotProps.cell) == null ? void 0 : _slotProps_cell.className)
+                            }) : sortedRows.length === 0 ? renderEmptyState$1({
+                                totalColumnCount,
+                                emptyState,
+                                fallback: labels.noData,
+                                cellClass: cn(v.cell(), v.emptyState(), slotProps == null ? void 0 : (_slotProps_emptyState = slotProps.emptyState) == null ? void 0 : _slotProps_emptyState.className)
+                            }) : sortedRows.map((row, idx)=>{
+                                var _slotProps_row, _slotProps_cell, _slotProps_cell1, _slotProps_selectionCell, _slotProps_cell2, _slotProps_expandToggleCell, _slotProps_cell3, _slotProps_rowActionsCell, _slotProps_expandedRow;
+                                const rowId = getRowId(row, idx);
+                                const isSelected = selection.isSelected(rowId);
+                                const isExpanded = expandedRowIds.includes(rowId);
+                                return jsx(Row, {
+                                    row: row,
+                                    rowId: rowId,
+                                    rowIndex: idx,
+                                    isSelected: isSelected,
+                                    isExpanded: isExpanded,
+                                    visibleCols: visibleCols,
+                                    columnTypes: columnTypes,
+                                    rowSelection: rowSelection,
+                                    showSelectionColumn: showSelectionColumn,
+                                    showExpandColumn: showExpandColumn,
+                                    showRowActionsColumn: showRowActionsColumn,
+                                    expandable: expandable,
+                                    rowActions: rowActions,
+                                    labels: labels,
+                                    toggleRow: selection.toggleRow,
+                                    toggleExpand: (id)=>setExpandedRowIds((prev)=>prev.includes(id) ? prev.filter((p)=>p !== id) : [
+                                                ...prev,
+                                                id
+                                            ]),
+                                    isInteractive: isTableInteractive,
+                                    rowClass: cn(v.row(), slotProps == null ? void 0 : (_slotProps_row = slotProps.row) == null ? void 0 : _slotProps_row.className),
+                                    cellClass: cn(v.cell(), slotProps == null ? void 0 : (_slotProps_cell = slotProps.cell) == null ? void 0 : _slotProps_cell.className),
+                                    selectionCellClass: cn(v.cell(), v.selectionCell(), slotProps == null ? void 0 : (_slotProps_cell1 = slotProps.cell) == null ? void 0 : _slotProps_cell1.className, slotProps == null ? void 0 : (_slotProps_selectionCell = slotProps.selectionCell) == null ? void 0 : _slotProps_selectionCell.className),
+                                    expandToggleCellClass: cn(v.cell(), v.expandToggleCell(), slotProps == null ? void 0 : (_slotProps_cell2 = slotProps.cell) == null ? void 0 : _slotProps_cell2.className, slotProps == null ? void 0 : (_slotProps_expandToggleCell = slotProps.expandToggleCell) == null ? void 0 : _slotProps_expandToggleCell.className),
+                                    rowActionsCellClass: cn(v.cell(), v.rowActionsCell(), slotProps == null ? void 0 : (_slotProps_cell3 = slotProps.cell) == null ? void 0 : _slotProps_cell3.className, slotProps == null ? void 0 : (_slotProps_rowActionsCell = slotProps.rowActionsCell) == null ? void 0 : _slotProps_rowActionsCell.className),
+                                    expandedRowClass: cn(v.expandedRow(), slotProps == null ? void 0 : (_slotProps_expandedRow = slotProps.expandedRow) == null ? void 0 : _slotProps_expandedRow.className),
+                                    totalColumnCount: totalColumnCount
+                                }, rowId);
+                            })
+                        })
+                    ]
+                })
+            }),
+            bulkActions && selectedRows.length > 0 && jsxs("div", {
+                className: cn(v.bulkActionFooter(), slotProps == null ? void 0 : (_slotProps_bulkActionFooter = slotProps.bulkActionFooter) == null ? void 0 : _slotProps_bulkActionFooter.className),
+                role: "region",
+                "aria-label": labels.selectedCount.replace('{count}', String(selectedRows.length)),
+                children: [
+                    jsx("span", {
+                        className: "text-sm text-neutral-700",
+                        children: labels.selectedCount.replace('{count}', String(selectedRows.length))
+                    }),
+                    jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            bulkActions(selectedRows),
+                            jsx("button", {
+                                type: "button",
+                                onClick: selection.clearSelection,
+                                className: cn(// text-neutral-500 → text-neutral-900 on hover; both auto-invert.
+                                'text-sm text-neutral-500 hover:text-neutral-900', 'underline-offset-2 hover:underline', 'focus:outline-none focus-visible:underline'),
+                                children: labels.clearSelection
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+// ───── Header cell (with sort button) ─────
+function HeaderCell$1(props) {
+    const { col, sortModel, onSortClick, inferredType, labels, className, buttonClassName, disabled } = props;
+    const align = resolveAlign(col, inferredType);
+    const alignClass = align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
+    const sortEntry = sortModel.find((s)=>s.field === col.field);
+    const ariaSort = (sortEntry == null ? void 0 : sortEntry.direction) === 'asc' ? 'ascending' : (sortEntry == null ? void 0 : sortEntry.direction) === 'desc' ? 'descending' : 'none';
+    const headerContent = typeof col.header === 'function' ? col.header() : col.header;
+    const cellStyle = {
+        width: col.width != null ? `${col.width}px` : undefined,
+        minWidth: col.minWidth != null ? `${col.minWidth}px` : undefined,
+        flex: col.flex
+    };
+    if (col.sortable) {
+        return jsx("th", {
+            scope: "col",
+            "aria-sort": ariaSort,
+            className: cn(className, alignClass),
+            style: cellStyle,
+            children: jsxs("button", {
+                type: "button",
+                onClick: onSortClick,
+                disabled: disabled,
+                "aria-label": ariaSort === 'ascending' ? labels.ariaSortAscending : ariaSort === 'descending' ? labels.ariaSortDescending : labels.ariaSortNone,
+                className: cn(buttonClassName, align === 'right' && 'flex-row-reverse', 'disabled:cursor-not-allowed disabled:opacity-50'),
+                children: [
+                    jsx("span", {
+                        children: headerContent
+                    }),
+                    jsx(SortIcon$1, {
+                        direction: sortEntry == null ? void 0 : sortEntry.direction
+                    })
+                ]
+            })
+        });
+    }
+    return jsx("th", {
+        scope: "col",
+        className: cn(className, alignClass),
+        style: cellStyle,
+        children: headerContent
+    });
+}
+// ───── Data row ─────
+function Row(props) {
+    const { row, rowId, rowIndex, isSelected, isExpanded, visibleCols, columnTypes, rowSelection, showSelectionColumn, showExpandColumn, showRowActionsColumn, expandable, rowActions, labels, toggleRow, toggleExpand, isInteractive, rowClass, cellClass, selectionCellClass, expandToggleCellClass, rowActionsCellClass, expandedRowClass, totalColumnCount } = props;
+    return jsxs(Fragment$1, {
+        children: [
+            jsxs("tr", {
+                "data-selected": isSelected ? 'true' : 'false',
+                "aria-selected": rowSelection !== 'none' ? isSelected : undefined,
+                className: rowClass,
+                children: [
+                    showSelectionColumn && jsx("td", {
+                        className: selectionCellClass,
+                        children: jsx("input", {
+                            type: "checkbox",
+                            "aria-label": labels.ariaSelectRow,
+                            checked: isSelected,
+                            onChange: ()=>toggleRow(rowId),
+                            disabled: !isInteractive,
+                            className: "cursor-pointer"
+                        })
+                    }),
+                    showExpandColumn && jsx("td", {
+                        className: expandToggleCellClass,
+                        children: jsx("button", {
+                            type: "button",
+                            onClick: ()=>toggleExpand(rowId),
+                            "aria-label": isExpanded ? labels.ariaCollapseRow : labels.ariaExpandRow,
+                            "aria-expanded": isExpanded,
+                            disabled: !isInteractive,
+                            className: cn('inline-flex items-center justify-center h-6 w-6 rounded', // text-neutral-500 + hover bump; both auto-invert via CSS-var preset.
+                            'text-neutral-500 hover:text-neutral-900', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', 'transition-transform motion-reduce:transition-none', isExpanded && 'rotate-90'),
+                            children: jsx(ChevronRightIcon, {})
+                        })
+                    }),
+                    visibleCols.map((col)=>jsx(DataCell$1, {
+                            col: col,
+                            row: row,
+                            rowIndex: rowIndex,
+                            isSelected: isSelected,
+                            isExpanded: isExpanded,
+                            inferredType: columnTypes.get(col.field),
+                            cellClass: cellClass
+                        }, col.field)),
+                    showRowActionsColumn && rowActions && jsx("td", {
+                        className: rowActionsCellClass,
+                        children: rowActions(row)
+                    })
+                ]
+            }),
+            isExpanded && expandable && jsx("tr", {
+                className: expandedRowClass,
+                children: jsx("td", {
+                    colSpan: totalColumnCount,
+                    className: "p-3",
+                    children: expandable.render(row)
+                })
+            })
+        ]
+    });
+}
+// ───── Data cell ─────
+function DataCell$1(props) {
+    const { col, row, rowIndex, isSelected, isExpanded, inferredType, cellClass } = props;
+    const value = getNestedValue(row, col.field);
+    const align = resolveAlign(col, inferredType);
+    // tabularNums = digit alignment via font-variant-numeric — does NOT
+    // change the font family. Auto-true for number / date columns.
+    const tabularNums = resolveTabularNums(col, inferredType);
+    // monospace = font-family override (font-mono). Library never
+    // auto-picks a font family — only explicit consumer opt-in. The
+    // consumer's theme font-sans is preserved by default.
+    const monospace = resolveMonospace(col);
+    const alignClass = align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
+    // Per-column RBAC state for the cellRenderer context
+    const columnAccessState = col.access ? {
+        hidden: col.access.onUnauthorized === 'hide',
+        disabled: col.access.onUnauthorized === 'disable',
+        readonly: col.access.onUnauthorized === 'readonly'
+    } : null;
+    const content = col.cellRenderer ? col.cellRenderer({
+        row,
+        value,
+        rowIndex,
+        isSelected,
+        isExpanded,
+        access: columnAccessState
+    }) : renderDefaultCell$1(value);
+    return jsx("td", {
+        className: cn(cellClass, alignClass, tabularNums && 'tabular-nums', monospace && 'font-mono'),
+        style: {
+            width: col.width != null ? `${col.width}px` : undefined,
+            minWidth: col.minWidth != null ? `${col.minWidth}px` : undefined
+        },
+        children: content
+    });
+}
+// ───── Helpers ─────
+function renderDefaultCell$1(value) {
+    if (value == null) return null;
+    if (typeof value === 'boolean') return value ? '✓' : '✗';
+    if (value instanceof Date) return value.toISOString().slice(0, 10);
+    if (typeof value === 'object') return JSON.stringify(value);
+    return value;
+}
+function handleSortClick$1(col, event, current, setSortModel) {
+    if (!col.sortable) return;
+    const multi = event.shiftKey;
+    setSortModel((prev)=>cycleSortFor(prev, col.field, multi));
+}
+function renderLoadingRows$1(args) {
+    const { count, visibleCols, showSelectionColumn, showExpandColumn, showRowActionsColumn, rowClass, cellClass } = args;
+    return Array.from({
+        length: count
+    }).map((_, i)=>jsxs("tr", {
+            className: rowClass,
+            "aria-busy": "true",
+            children: [
+                showSelectionColumn && jsx("td", {
+                    className: cellClass,
+                    children: jsx(Skeleton, {
+                        variant: "rectangle",
+                        width: "16px",
+                        height: "16px"
+                    })
+                }),
+                showExpandColumn && jsx("td", {
+                    className: cellClass,
+                    children: jsx(Skeleton, {
+                        variant: "rectangle",
+                        width: "16px",
+                        height: "16px"
+                    })
+                }),
+                visibleCols.map((col)=>jsx("td", {
+                        className: cellClass,
+                        children: jsx(Skeleton, {
+                            variant: "text",
+                            width: "80%"
+                        })
+                    }, col.field)),
+                showRowActionsColumn && jsx("td", {
+                    className: cellClass,
+                    children: jsx(Skeleton, {
+                        variant: "rectangle",
+                        width: "24px",
+                        height: "24px"
+                    })
+                })
+            ]
+        }, `loading-${i}`));
+}
+function renderEmptyState$1(args) {
+    var _args_emptyState;
+    return jsx("tr", {
+        children: jsx("td", {
+            colSpan: args.totalColumnCount,
+            className: args.cellClass,
+            children: (_args_emptyState = args.emptyState) != null ? _args_emptyState : args.fallback
+        })
+    });
+}
+// ───── Icons ─────
+function SortIcon$1(props) {
+    return jsx("svg", {
+        width: "0.75em",
+        height: "0.75em",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        className: "shrink-0 opacity-60 group-hover:opacity-100",
+        children: props.direction === 'asc' ? jsx("path", {
+            d: "M8 4l4 6H4z"
+        }) : props.direction === 'desc' ? jsx("path", {
+            d: "M8 12L4 6h8z"
+        }) : jsxs(Fragment$1, {
+            children: [
+                jsx("path", {
+                    d: "M8 3l3 4H5z",
+                    opacity: "0.5"
+                }),
+                jsx("path", {
+                    d: "M8 13l-3-4h6z",
+                    opacity: "0.5"
+                })
+            ]
+        })
+    });
+}
+function ChevronRightIcon() {
+    return jsx("svg", {
+        width: "0.875em",
+        height: "0.875em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: jsx("path", {
+            d: "M6 4l4 4-4 4"
+        })
+    });
+}
+function SearchIcon$1(props) {
+    return jsxs("svg", {
+        width: "0.875em",
+        height: "0.875em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        className: props.className,
+        children: [
+            jsx("circle", {
+                cx: "7",
+                cy: "7",
+                r: "4.5"
+            }),
+            jsx("path", {
+                d: "M11 11l3 3"
+            })
+        ]
+    });
+}
+
+/**
+ * Plain text cell renderer. Wraps the value in a `<span>` and
+ * optionally truncates on overflow. Use this for the most common
+ * case: render a single string value.
+ *
+ * The Table component does NOT use this by default for plain
+ * string columns — it just renders `{value}` directly. Use
+ * `RenderText` when you need the truncate / muted styling.
+ */ function RenderText(props) {
+    const { value, truncate, muted, className } = props;
+    return jsx("span", {
+        className: cn(truncate && 'block max-w-full truncate', // Neutral palette auto-inverts via dashforgePreset() CSS-var swap.
+        muted && 'text-neutral-500', className),
+        children: value
+    });
+}
+
+/**
+ * Two-line cell renderer: a bold primary line stacked above a muted
+ * secondary line. Useful for `Name + email`, `Title + ID`, etc.
+ *
+ * Replaces the MUI-side `RenderTwoLineCell` without the magic-number
+ * vertical-align fudges (`mt: 0.8 / 0.2`) — flexbox handles the
+ * vertical layout cleanly.
+ *
+ * Dashforge identity rule: text colors auto-invert via the
+ * `dashforgePreset()` CSS-variable swap. No `dark:` variants needed
+ * on neutral palette.
+ */ function RenderTwoLine(props) {
+    const { primary, secondary, className } = props;
+    return jsxs("div", {
+        className: cn('flex flex-col leading-tight', className),
+        children: [
+            jsx("span", {
+                className: "font-medium text-neutral-900",
+                children: primary
+            }),
+            jsx("span", {
+                className: "text-xs text-neutral-500 mt-0.5",
+                children: secondary
+            })
+        ]
+    });
+}
+
+/**
+ * Internal mini-chip used by the cell renderer library. Not exported
+ * from `@dashforge/tw` as a standalone component (per Sprint 4.1
+ * scope decision — a standalone `<Chip>` may ship in Sprint 5 if
+ * demand emerges).
+ *
+ * Variants:
+ *  - `color`: 7 intents (neutral / primary / success / warning /
+ *    danger / info / secondary)
+ *  - `variant`: `soft` (default) / `solid` / `outline`
+ *  - `size`: `sm` / `md`
+ */ const chipVariants = tv({
+    base: [
+        'inline-flex items-center gap-1 rounded-full font-medium',
+        'whitespace-nowrap'
+    ],
+    variants: {
+        color: {
+            neutral: '',
+            primary: '',
+            success: '',
+            warning: '',
+            danger: '',
+            info: '',
+            secondary: ''
+        },
+        variant: {
+            soft: '',
+            solid: '',
+            outline: ''
+        },
+        size: {
+            sm: 'h-5 px-2 text-xs',
+            md: 'h-6 px-2.5 text-xs'
+        }
+    },
+    compoundVariants: [
+        // soft = subtle bg + dark text.
+        // Neutral row uses NO `dark:` variants — the dashforgePreset()
+        // CSS-var swap auto-inverts the neutral palette already.
+        // Color rows below KEEP `dark:` variants because color palettes
+        // don't auto-invert: the `dark:` shift is an intentional design
+        // choice (darker bg + lighter text in dark mode for visual cohesion).
+        {
+            variant: 'soft',
+            color: 'neutral',
+            class: 'bg-neutral-100 text-neutral-700'
+        },
+        {
+            variant: 'soft',
+            color: 'primary',
+            class: 'bg-primary-100 dark:bg-primary-950 text-primary-700 dark:text-primary-300'
+        },
+        {
+            variant: 'soft',
+            color: 'success',
+            class: 'bg-success-100 dark:bg-success-950 text-success-700 dark:text-success-300'
+        },
+        {
+            variant: 'soft',
+            color: 'warning',
+            class: 'bg-warning-100 dark:bg-warning-950 text-warning-700 dark:text-warning-300'
+        },
+        {
+            variant: 'soft',
+            color: 'danger',
+            class: 'bg-danger-100 dark:bg-danger-950 text-danger-700 dark:text-danger-300'
+        },
+        {
+            variant: 'soft',
+            color: 'info',
+            class: 'bg-info-100 dark:bg-info-950 text-info-700 dark:text-info-300'
+        },
+        {
+            variant: 'soft',
+            color: 'secondary',
+            class: 'bg-secondary-100 dark:bg-secondary-950 text-secondary-700 dark:text-secondary-300'
+        },
+        // solid = full bg + light text
+        // solid neutral: bg + text both anchored to neutral palette
+        // (auto-inverts). `text-white` would not invert and would break
+        // contrast in light mode against a `bg-neutral-700` dark bg, so
+        // we stick to `text-neutral-50` (light text in light mode, dark
+        // in dark — wait, that's wrong too). Actually `text-neutral-50`
+        // auto-inverts: light text in light mode (against dark bg) is
+        // what we want; in dark mode `bg-neutral-700` becomes light AND
+        // `text-neutral-50` becomes dark — contrast preserved.
+        {
+            variant: 'solid',
+            color: 'neutral',
+            class: 'bg-neutral-700 text-neutral-50'
+        },
+        {
+            variant: 'solid',
+            color: 'primary',
+            class: 'bg-primary-500 text-white'
+        },
+        {
+            variant: 'solid',
+            color: 'success',
+            class: 'bg-success-500 text-white'
+        },
+        {
+            variant: 'solid',
+            color: 'warning',
+            class: 'bg-warning-500 text-white'
+        },
+        {
+            variant: 'solid',
+            color: 'danger',
+            class: 'bg-danger-500 text-white'
+        },
+        {
+            variant: 'solid',
+            color: 'info',
+            class: 'bg-info-500 text-white'
+        },
+        {
+            variant: 'solid',
+            color: 'secondary',
+            class: 'bg-secondary-500 text-white'
+        },
+        // outline = border + colored text
+        // outline neutral: both border + text auto-invert via CSS-var swap.
+        {
+            variant: 'outline',
+            color: 'neutral',
+            class: 'border border-neutral-300 text-neutral-700'
+        },
+        {
+            variant: 'outline',
+            color: 'primary',
+            class: 'border border-primary-500 text-primary-700 dark:text-primary-300'
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: 'border border-success-500 text-success-700 dark:text-success-300'
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: 'border border-warning-500 text-warning-700 dark:text-warning-300'
+        },
+        {
+            variant: 'outline',
+            color: 'danger',
+            class: 'border border-danger-500 text-danger-700 dark:text-danger-300'
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: 'border border-info-500 text-info-700 dark:text-info-300'
+        },
+        {
+            variant: 'outline',
+            color: 'secondary',
+            class: 'border border-secondary-500 text-secondary-700 dark:text-secondary-300'
+        }
+    ],
+    defaultVariants: {
+        color: 'neutral',
+        variant: 'soft',
+        size: 'sm'
+    }
+});
+function RenderChip(props) {
+    const { children, color, variant, size, className } = props;
+    return jsx("span", {
+        className: cn(chipVariants({
+            color,
+            variant,
+            size
+        }), className),
+        children: children
+    });
+}
+
+/**
+ * Inline button cell renderer. Thin wrapper over `<Button>` with
+ * the size narrowed to `sm` by default (table density expects compact
+ * controls).
+ */ function RenderButton(props) {
+    const { label, onClick, variant = 'ghost', size = 'sm' } = props, rest = _object_without_properties_loose(props, [
+        "label",
+        "onClick",
+        "variant",
+        "size"
+    ]);
+    return jsx(Button, _extends({
+        variant: variant,
+        size: size,
+        onClick: onClick
+    }, rest, {
+        children: label
+    }));
+}
+
+/**
+ * 3-dot row actions menu. Renders a trigger button that opens a
+ * Popover (Sprint 3 component) with a list of action menu items.
+ *
+ * Replaces the MUI-side `RowActions.tsx` (IconButton + Menu) with
+ * the TW equivalents. Per-action RBAC honored: hidden actions are
+ * filtered out, disabled actions render disabled.
+ */ function RowActionsMenu(props) {
+    const { row, actions, trigger, ariaLabel = 'Row actions' } = props;
+    const [open, setOpen] = useState(false);
+    // Filter actions by RBAC (hidden actions removed entirely)
+    const visibleActions = actions.filter((action)=>{
+        if (!action.access) return true;
+        return action.access.onUnauthorized !== 'hide';
+    });
+    if (visibleActions.length === 0) return null;
+    return jsx(Popover, {
+        open: open,
+        onOpenChange: setOpen,
+        side: "bottom",
+        align: "end",
+        content: jsx("ul", {
+            className: "flex flex-col gap-0.5 min-w-[140px]",
+            role: "menu",
+            children: visibleActions.map((action, idx)=>jsx(RowActionMenuItem, {
+                    action: action,
+                    row: row,
+                    onClose: ()=>setOpen(false)
+                }, idx))
+        }),
+        children: trigger != null ? trigger : jsx("button", {
+            type: "button",
+            "aria-label": ariaLabel,
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            className: cn('inline-flex items-center justify-center h-8 w-8 rounded-md', // Neutral palette auto-inverts via the dashforgePreset()
+            // CSS-var swap — no `dark:` variant needed.
+            'text-neutral-500 hover:text-neutral-900', 'hover:bg-neutral-100', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', 'transition-colors motion-reduce:transition-none'),
+            children: jsxs("svg", {
+                width: "1em",
+                height: "1em",
+                viewBox: "0 0 16 16",
+                fill: "currentColor",
+                "aria-hidden": "true",
+                children: [
+                    jsx("circle", {
+                        cx: "8",
+                        cy: "3",
+                        r: "1.4"
+                    }),
+                    jsx("circle", {
+                        cx: "8",
+                        cy: "8",
+                        r: "1.4"
+                    }),
+                    jsx("circle", {
+                        cx: "8",
+                        cy: "13",
+                        r: "1.4"
+                    })
+                ]
+            })
+        })
+    });
+}
+function RowActionMenuItem(props) {
+    const { action, row, onClose } = props;
+    const accessState = useAccessState(action.access);
+    const isDisabled = action.disabled || accessState.disabled || accessState.readonly;
+    return jsx("li", {
+        role: "none",
+        children: jsxs("button", {
+            type: "button",
+            role: "menuitem",
+            disabled: isDisabled,
+            onClick: ()=>{
+                onClose();
+                action.onClick(row);
+            },
+            className: cn('flex items-center gap-2 w-full text-left', 'px-3 py-1.5 rounded-md text-sm', // Neutral palette auto-inverts; danger/warning are color
+            // palettes (no auto-invert) so they keep their `dark:` shift
+            // intentionally — design choice, not a bug.
+            'hover:bg-neutral-100', 'focus:outline-none focus-visible:bg-neutral-100', 'transition-colors motion-reduce:transition-none', 'disabled:opacity-50 disabled:pointer-events-none', action.color === 'danger' && 'text-danger-700 dark:text-danger-300', action.color === 'warning' && 'text-warning-700 dark:text-warning-300'),
+            children: [
+                action.icon && jsx("span", {
+                    className: "inline-flex shrink-0",
+                    "aria-hidden": "true",
+                    children: action.icon
+                }),
+                jsx("span", {
+                    children: action.label
+                })
+            ]
+        })
+    });
+}
+
+/**
+ * `<DataGrid>` variant recipe.
+ *
+ * Sibling of `tableVariants` — shares the same visual axes (variant /
+ * size / density) and the same identity-rule patterns:
+ *  - No `dark:` variants on neutral palette (auto-invert via the
+ *    dashforgePreset() CSS var swap).
+ *  - Selected row uses LeftNav `itemActive` pattern
+ *    (`bg-primary-100 text-primary-900`) — guaranteed contrast.
+ *  - Hover uses one-tier elevation (`bg-neutral-100`).
+ *
+ * DataGrid-specific slot additions vs Table:
+ *  - `stickyLeftCell` — column that uses `cols[i].sticky === 'left'`.
+ *    Z-index ordering: `thead` (z-10) < `stickyLeftCell` (z-11) <
+ *    `header × stickyLeft top-left corner cell` (z-20).
+ *  - `paginationFooter` — wraps the optional `<Pagination>`.
+ */ const dataGridVariants = tv({
+    slots: {
+        root: 'w-full',
+        toolbar: 'flex flex-wrap items-center gap-3 mb-3',
+        search: [
+            'inline-flex items-center gap-2',
+            'w-full max-w-sm rounded-md',
+            'border border-neutral-300',
+            'bg-neutral-50',
+            'focus-within:ring-2 focus-within:ring-primary-500',
+            'transition-colors motion-reduce:transition-none'
+        ],
+        // The scroll container needs an explicit bounded height for
+        // virtualization to compute the window. The consumer passes
+        // `height` prop (inline style) or sets it via `sx` / parent
+        // layout — DataGrid does NOT default a height (would be wrong
+        // for most layouts).
+        scroll: 'relative w-full overflow-auto rounded-md',
+        table: 'w-full caption-bottom text-left',
+        thead: 'bg-neutral-50 sticky top-0 z-10',
+        tbody: '',
+        headerRow: '',
+        headerCell: [
+            'text-neutral-700',
+            'font-semibold whitespace-nowrap select-none',
+            'border-b border-neutral-200',
+            'bg-neutral-50'
+        ],
+        headerCellButton: [
+            'group inline-flex items-center gap-1 select-none',
+            'hover:text-neutral-900',
+            'focus:outline-none focus-visible:underline',
+            'transition-colors motion-reduce:transition-none'
+        ],
+        row: [
+            'group/row transition-colors motion-reduce:transition-none',
+            'hover:bg-neutral-100',
+            'data-[selected=true]:bg-primary-100',
+            'data-[selected=true]:text-primary-900',
+            'data-[selected=true]:font-medium'
+        ],
+        cell: [
+            'text-neutral-900',
+            'border-b border-neutral-200',
+            'align-middle'
+        ],
+        selectionCell: 'w-10 text-center',
+        rowActionsCell: [
+            'w-12 text-right',
+            'opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100',
+            'transition-opacity motion-reduce:transition-none'
+        ],
+        emptyState: 'py-12 text-center text-neutral-500',
+        loadingOverlay: 'pointer-events-none',
+        bulkActionFooter: [
+            'sticky bottom-0 z-20',
+            'flex flex-wrap items-center justify-between gap-3',
+            'px-3 py-2',
+            'border-t border-neutral-200',
+            'bg-neutral-50 shadow-md'
+        ],
+        // Sticky left column — uses `position: sticky; left: 0` + z-index
+        // so the column stays pinned during horizontal scroll. The
+        // `bg-neutral-50` ensures the column doesn't bleed when content
+        // scrolls underneath.
+        stickyLeftCell: 'sticky left-0 z-[1] bg-neutral-50',
+        // Sticky left × header intersection (top-left corner): higher
+        // z-index than both header (`z-10`) and sticky col (`z-[1]`).
+        stickyLeftHeaderCell: 'sticky left-0 z-20 bg-neutral-50',
+        paginationFooter: 'flex justify-end mt-3'
+    },
+    variants: {
+        variant: {
+            plain: {},
+            lines: {},
+            striped: {
+                row: 'odd:bg-neutral-100/60'
+            },
+            bordered: {
+                table: 'border border-neutral-200',
+                cell: 'border-r last:border-r-0 border-neutral-200',
+                headerCell: 'border-r last:border-r-0 border-neutral-200'
+            }
+        },
+        size: {
+            sm: {
+                headerCell: 'text-xs',
+                cell: 'text-xs',
+                search: 'text-xs'
+            },
+            md: {
+                headerCell: 'text-sm',
+                cell: 'text-sm',
+                search: 'text-sm'
+            },
+            lg: {
+                headerCell: 'text-base',
+                cell: 'text-base',
+                search: 'text-base'
+            }
+        },
+        density: {
+            compact: {
+                headerCell: 'px-2 py-1',
+                cell: 'px-2 py-1'
+            },
+            comfortable: {
+                headerCell: 'px-3 py-2',
+                cell: 'px-3 py-2'
+            },
+            spacious: {
+                headerCell: 'px-4 py-3',
+                cell: 'px-4 py-3'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'lines',
+        size: 'md',
+        density: 'comfortable'
+    }
+});
+
+/**
+ * Compute the visible window of rows + the spacer heights given the
+ * current scroll position. Pure function — exported for testability.
+ *
+ * @example
+ * ```ts
+ * computeWindow({ totalCount: 1000, rowHeight: 48, viewportHeight: 600,
+ *                 scrollTop: 0, overscan: 5 });
+ * // → { startIndex: 0, endIndex: 17, paddingTop: 0, paddingBottom: 47136 }
+ * ```
+ */ function computeWindow(args) {
+    const { totalCount, rowHeight, viewportHeight, scrollTop, overscan = 5 } = args;
+    if (totalCount <= 0 || rowHeight <= 0 || viewportHeight <= 0) {
+        return {
+            startIndex: 0,
+            endIndex: -1,
+            paddingTop: 0,
+            paddingBottom: 0
+        };
+    }
+    // Raw visible range from scrollTop alone.
+    const rawStart = Math.floor(scrollTop / rowHeight);
+    const rawEnd = Math.ceil((scrollTop + viewportHeight) / rowHeight);
+    // Apply overscan + clamp to [0, totalCount - 1].
+    const startIndex = Math.max(0, rawStart - overscan);
+    const endIndex = Math.min(totalCount - 1, rawEnd + overscan);
+    const paddingTop = startIndex * rowHeight;
+    const paddingBottom = Math.max(0, (totalCount - 1 - endIndex) * rowHeight);
+    return {
+        startIndex,
+        endIndex,
+        paddingTop,
+        paddingBottom
+    };
+}
+/**
+ * `useVirtualizer` — viewport-based row windowing for `<DataGrid>`.
+ *
+ * Hand-rolled (no `@tanstack/react-virtual` dep — constraint memorized
+ * in `feedback_dashforge_preset_is_identity` companion: "no new
+ * external runtime deps"). Uses scroll event + `requestAnimationFrame`
+ * debounce + `ResizeObserver` on the container. Fixed row height
+ * only in v1 — variable-height with measurement cache deferred to
+ * v1-bis.
+ *
+ * Returns:
+ *  - `scrollRef`: attach to the scroll container `<div>`.
+ *  - `window`: which row indices to mount + top/bottom spacer heights
+ *    to preserve scroll-area size.
+ *  - `viewportHeight`: current container height (re-measured on
+ *    `ResizeObserver` ticks).
+ *
+ * The DataGrid renders `rows.slice(window.startIndex, window.endIndex + 1)`
+ * between two spacer `<tr style={{ height: paddingTop }} />` elements
+ * (above and below). This preserves `<table>` semantics — screen
+ * readers see a continuous structure with `aria-hidden` spacers.
+ *
+ * @example
+ * ```tsx
+ * const { scrollRef, window } = useVirtualizer({
+ *   totalCount: rows.length,
+ *   rowHeight: 48,
+ *   overscan: 5,
+ * });
+ *
+ * return (
+ *   <div ref={scrollRef} style={{ height: 600, overflow: 'auto' }}>
+ *     <table>
+ *       <tbody>
+ *         <tr aria-hidden="true" style={{ height: window.paddingTop }} />
+ *         {rows.slice(window.startIndex, window.endIndex + 1).map(...)}
+ *         <tr aria-hidden="true" style={{ height: window.paddingBottom }} />
+ *       </tbody>
+ *     </table>
+ *   </div>
+ * );
+ * ```
+ */ function useVirtualizer(args) {
+    const { totalCount, rowHeight, overscan = 5, initialViewportHeight = 400 } = args;
+    const scrollRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [viewportHeight, setViewportHeight] = useState(initialViewportHeight);
+    // Debounce scroll handler via requestAnimationFrame so we never
+    // re-render more than once per paint frame even when the scroll
+    // event fires rapidly during fast scrolling.
+    const rafIdRef = useRef(null);
+    const handleScroll = useCallback(()=>{
+        if (rafIdRef.current != null) return;
+        rafIdRef.current = requestAnimationFrame(()=>{
+            rafIdRef.current = null;
+            const el = scrollRef.current;
+            if (!el) return;
+            setScrollTop(el.scrollTop);
+        });
+    }, []);
+    // Attach scroll listener.
+    useEffect(()=>{
+        const el = scrollRef.current;
+        if (!el) return;
+        el.addEventListener('scroll', handleScroll, {
+            passive: true
+        });
+        return ()=>{
+            el.removeEventListener('scroll', handleScroll);
+            if (rafIdRef.current != null) {
+                cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
+        };
+    }, [
+        handleScroll
+    ]);
+    // Track container viewport height via ResizeObserver — re-virtualize
+    // when the container size changes (window resize, sidebar collapse,
+    // etc.). Use `useLayoutEffect` so the first measurement happens
+    // before paint to avoid a flash of stale window.
+    //
+    // **Defensive**: only accept measurements > 0. jsdom (test env)
+    // returns `clientHeight === 0` for unmounted containers, which would
+    // collapse the window to empty. The hook keeps the
+    // `initialViewportHeight` fallback in that case.
+    useLayoutEffect(()=>{
+        const el = scrollRef.current;
+        if (!el) return;
+        if (el.clientHeight > 0) {
+            setViewportHeight(el.clientHeight);
+        }
+        if (typeof ResizeObserver === 'undefined') return;
+        const observer = new ResizeObserver((entries)=>{
+            const entry = entries[0];
+            if (!entry || entry.contentRect.height <= 0) return;
+            setViewportHeight(entry.contentRect.height);
+        });
+        observer.observe(el);
+        return ()=>observer.disconnect();
+    }, []);
+    const window = computeWindow({
+        totalCount,
+        rowHeight,
+        viewportHeight,
+        scrollTop,
+        overscan
+    });
+    return {
+        scrollRef,
+        window,
+        viewportHeight
+    };
+}
+
+const DEFAULT_LABELS = {
+    searchPlaceholder: 'Search...',
+    noData: 'No data',
+    loading: 'Loading…',
+    ariaSortNone: 'Not sorted. Click to sort ascending.',
+    ariaSortAscending: 'Sorted ascending. Click to sort descending.',
+    ariaSortDescending: 'Sorted descending. Click to clear sort.',
+    ariaSelectRow: 'Select row',
+    ariaSelectAllRows: 'Select all rows',
+    ariaExpandRow: 'Expand row',
+    ariaCollapseRow: 'Collapse row',
+    selectedCount: '{count} selected',
+    clearSelection: 'Clear selection',
+    filterColumn: 'Filter',
+    filterApply: 'Apply',
+    filterClear: 'Clear',
+    density: 'Density',
+    densityCompact: 'Compact',
+    densityComfortable: 'Comfortable',
+    densitySpacious: 'Spacious'
+};
+/**
+ * Dashforge TW `<DataGrid>` — virtualized data table.
+ *
+ * Companion to `<Table>` for large data sets (~500+ rows up to
+ * millions via virtualization). Same column model, sort/search/
+ * filter/selection logic (shared via `_shared/data/` helpers) —
+ * differs in render path: only the visible window of rows is mounted
+ * in DOM, with spacer `<tr>` above and below to preserve scrollbar
+ * size.
+ *
+ * Virtualization: hand-rolled (`useVirtualizer`) using
+ * `IntersectionObserver` + scroll-event + `requestAnimationFrame`
+ * debounce + `ResizeObserver`. Zero new runtime deps.
+ *
+ * Server-side mode (4 independent opt-in flags):
+ *  - `serverSideSort` — emits `onSortChange` but does NOT sort locally
+ *  - `serverSideFilter` — emits `onFilterChange` but does NOT filter
+ *  - `serverSideSearch` — emits `onSearchQueryChange` (debounced)
+ *  - `serverSidePagination` — `totalCount` prop sizes the virtual
+ *    scrollbar; `rows` is the page slice from the server
+ *
+ * Selection at scale: `selectAllScope`:
+ *  - `'allLoaded'` (default) — header checkbox toggles all rows in
+ *    `rows` prop
+ *  - `'visible'` — toggles only the current viewport window
+ */ function DataGrid(props) {
+    var _slotProps_root, _slotProps_toolbar, _slotProps_search, _slotProps_scroll, _slotProps_table, _slotProps_thead, _slotProps_headerRow, _slotProps_headerCell, _slotProps_selectionCell, _slotProps_headerCell1, _slotProps_tbody, _slotProps_row, _slotProps_cell, _slotProps_emptyState, _slotProps_row1, _slotProps_cell1, _slotProps_cell2, _slotProps_selectionCell1, _slotProps_cell3, _slotProps_rowActionsCell, _slotProps_bulkActionFooter, _slotProps_pagination;
+    const { rows, cols, getRowId, totalCount: totalCountProp, rowHeight, overscan = 5, height, sortModel: sortModelProp, onSortChange, defaultSortModel, serverSideSort = false, enableSearch = false, searchQuery: searchQueryProp, onSearchQueryChange, searchPlaceholder, searchDebounceMs = 200, serverSideSearch = false, filterModel: filterModelProp, onFilterChange, serverSideFilter = false, rowSelection = 'none', selectedRowIds: selectedRowIdsProp, onSelectionChange, bulkActions, selectAllScope = 'allLoaded', pagination, serverSidePagination = false, rowActions, loading = false, loadingRowCount = 8, emptyState, stickyHeader = true, caption, showCaption = false, access: gridAccess, labels: labelsProp, variant, size, density, sx, slotProps } = props;
+    const labels = _extends({}, DEFAULT_LABELS, labelsProp);
+    const gridAccessState = useAccessState(gridAccess);
+    // ───── Controllable state ─────
+    const [sortModel, setSortModel] = useControllableState({
+        controlledValue: sortModelProp,
+        defaultValue: defaultSortModel != null ? defaultSortModel : [],
+        onChange: onSortChange
+    });
+    const [searchQuery, setSearchQuery] = useControllableState({
+        controlledValue: searchQueryProp,
+        defaultValue: '',
+        onChange: onSearchQueryChange
+    });
+    const filterModel = filterModelProp != null ? filterModelProp : [];
+    const [selectedRowIds, setSelectedRowIds] = useControllableState({
+        controlledValue: selectedRowIdsProp,
+        defaultValue: [],
+        onChange: onSelectionChange
+    });
+    // ───── RBAC: filter columns ─────
+    const visibleCols = useMemo(()=>cols.filter((col)=>!col.access || col.access.onUnauthorized !== 'hide'), [
+        cols
+    ]);
+    // ───── Smart-default column types ─────
+    const columnTypes = useColumnAutoDetect(rows, visibleCols);
+    // ───── Pipeline: search → filter → sort (skip when server-side) ─────
+    //
+    // Each pipeline hook is ALWAYS called (React hooks rules). The
+    // server-side flags decide whether to use the local-computed result
+    // or pass the upstream rows through unchanged. The hooks are
+    // `useMemo`-based internally so they're cheap when their inputs
+    // are unchanged.
+    const debouncedSearchQuery = useDebouncedValue(searchQuery, searchDebounceMs);
+    const localSearched = useTableSearch(rows, visibleCols, debouncedSearchQuery);
+    const searchedRows = serverSideSearch ? rows : localSearched;
+    const localFiltered = useTableFilter(searchedRows, filterModel);
+    const filteredRows = serverSideFilter ? searchedRows : localFiltered;
+    const localSorted = useTableSort(filteredRows, visibleCols, sortModel);
+    const sortedRows = serverSideSort ? filteredRows : localSorted;
+    // ───── Virtualization ─────
+    // Effective row count for the virtual scrollbar:
+    // - Client-side: actual sorted rows count
+    // - Server-side pagination: caller-provided totalCount
+    const effectiveTotalCount = serverSidePagination ? totalCountProp != null ? totalCountProp : sortedRows.length : sortedRows.length;
+    const initialViewportHeight = height ? parseInt(height, 10) || 400 : 400;
+    const { scrollRef, window: vWindow } = useVirtualizer({
+        totalCount: effectiveTotalCount,
+        rowHeight,
+        overscan,
+        initialViewportHeight
+    });
+    // The rows actually mounted in DOM.
+    const renderedRows = useMemo(()=>{
+        if (serverSidePagination) {
+            // In server-side pagination, `rows` IS the page slice; we
+            // render all of it (virtualization within the page is still
+            // useful for very large page sizes).
+            return rows.slice(vWindow.startIndex, vWindow.endIndex + 1);
+        }
+        return sortedRows.slice(vWindow.startIndex, vWindow.endIndex + 1);
+    }, [
+        serverSidePagination,
+        rows,
+        sortedRows,
+        vWindow.startIndex,
+        vWindow.endIndex
+    ]);
+    // ───── Selection helpers ─────
+    // For `selectAllScope='visible'`, the select-all scope is the
+    // current window. For `'allLoaded'`, it's the whole sorted set.
+    const selectAllPool = useMemo(()=>{
+        if (selectAllScope === 'visible') {
+            return renderedRows.map((row, idx)=>getRowId(row, vWindow.startIndex + idx));
+        }
+        return sortedRows.map((row, idx)=>getRowId(row, idx));
+    }, [
+        selectAllScope,
+        renderedRows,
+        sortedRows,
+        getRowId,
+        vWindow.startIndex
+    ]);
+    const selection = useTableSelection(rowSelection, selectedRowIds, setSelectedRowIds);
+    const selectedRows = useMemo(()=>sortedRows.filter((row, idx)=>selection.isSelected(getRowId(row, idx))), [
+        sortedRows,
+        selection,
+        getRowId
+    ]);
+    // ───── Variant recipe ─────
+    const v = dataGridVariants({
+        variant,
+        size,
+        density
+    });
+    // ───── Render ─────
+    if (!gridAccessState.visible) return null;
+    const isInteractive = !gridAccessState.disabled;
+    const showSelectionColumn = rowSelection !== 'none';
+    const showRowActionsColumn = rowActions != null;
+    const totalColumnCount = visibleCols.length + (showSelectionColumn ? 1 : 0) + (showRowActionsColumn ? 1 : 0);
+    return jsxs("div", {
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        "data-disabled": !isInteractive ? 'true' : undefined,
+        children: [
+            enableSearch && jsx("div", {
+                className: cn(v.toolbar(), slotProps == null ? void 0 : (_slotProps_toolbar = slotProps.toolbar) == null ? void 0 : _slotProps_toolbar.className),
+                children: jsxs("label", {
+                    className: cn(v.search(), slotProps == null ? void 0 : (_slotProps_search = slotProps.search) == null ? void 0 : _slotProps_search.className),
+                    children: [
+                        jsx("span", {
+                            className: "sr-only",
+                            children: labels.searchPlaceholder
+                        }),
+                        jsx(SearchIcon, {
+                            className: "ml-2 shrink-0 text-neutral-500"
+                        }),
+                        jsx("input", {
+                            type: "text",
+                            value: searchQuery,
+                            onChange: (e)=>setSearchQuery(e.target.value),
+                            placeholder: searchPlaceholder != null ? searchPlaceholder : labels.searchPlaceholder,
+                            disabled: !isInteractive,
+                            className: cn('flex-1 bg-transparent border-0 outline-none', 'px-2 py-1.5', 'placeholder:text-neutral-400', 'disabled:opacity-50 disabled:cursor-not-allowed')
+                        })
+                    ]
+                })
+            }),
+            jsx("div", {
+                ref: scrollRef,
+                className: cn(v.scroll(), slotProps == null ? void 0 : (_slotProps_scroll = slotProps.scroll) == null ? void 0 : _slotProps_scroll.className),
+                style: height ? {
+                    height,
+                    maxHeight: height
+                } : undefined,
+                children: jsxs("table", {
+                    className: cn(v.table(), slotProps == null ? void 0 : (_slotProps_table = slotProps.table) == null ? void 0 : _slotProps_table.className),
+                    children: [
+                        caption != null && jsx("caption", {
+                            className: cn(!showCaption && 'sr-only', 'py-2 text-sm text-neutral-500'),
+                            children: caption
+                        }),
+                        jsx("thead", {
+                            className: cn(stickyHeader ? v.thead() : 'bg-neutral-50', slotProps == null ? void 0 : (_slotProps_thead = slotProps.thead) == null ? void 0 : _slotProps_thead.className),
+                            children: jsxs("tr", {
+                                className: cn(v.headerRow(), slotProps == null ? void 0 : (_slotProps_headerRow = slotProps.headerRow) == null ? void 0 : _slotProps_headerRow.className),
+                                children: [
+                                    showSelectionColumn && jsx("th", {
+                                        scope: "col",
+                                        className: cn(v.headerCell(), v.selectionCell(), v.stickyLeftHeaderCell(), slotProps == null ? void 0 : (_slotProps_headerCell = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell.className, slotProps == null ? void 0 : (_slotProps_selectionCell = slotProps.selectionCell) == null ? void 0 : _slotProps_selectionCell.className),
+                                        children: rowSelection === 'multiple' && jsx("input", {
+                                            type: "checkbox",
+                                            "aria-label": labels.ariaSelectAllRows,
+                                            checked: selection.isAllSelected(selectAllPool),
+                                            ref: (el)=>{
+                                                if (el) el.indeterminate = selection.isIndeterminate(selectAllPool);
+                                            },
+                                            onChange: ()=>selection.toggleAll(selectAllPool),
+                                            disabled: !isInteractive,
+                                            className: "cursor-pointer"
+                                        })
+                                    }),
+                                    visibleCols.map((col)=>{
+                                        var _slotProps_headerCell;
+                                        return jsx(HeaderCell, {
+                                            col: col,
+                                            sortModel: sortModel,
+                                            onSortClick: (e)=>handleSortClick(col, e, sortModel, setSortModel),
+                                            inferredType: columnTypes.get(col.field),
+                                            labels: labels,
+                                            className: cn(v.headerCell(), col.sticky === 'left' && v.stickyLeftHeaderCell(), slotProps == null ? void 0 : (_slotProps_headerCell = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell.className),
+                                            buttonClassName: v.headerCellButton(),
+                                            disabled: !isInteractive
+                                        }, col.field);
+                                    }),
+                                    showRowActionsColumn && jsx("th", {
+                                        scope: "col",
+                                        "aria-hidden": "true",
+                                        className: cn(v.headerCell(), 'w-12', slotProps == null ? void 0 : (_slotProps_headerCell1 = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell1.className)
+                                    })
+                                ]
+                            })
+                        }),
+                        jsx("tbody", {
+                            className: cn(v.tbody(), slotProps == null ? void 0 : (_slotProps_tbody = slotProps.tbody) == null ? void 0 : _slotProps_tbody.className),
+                            children: loading ? renderLoadingRows({
+                                count: loadingRowCount,
+                                visibleCols,
+                                showSelectionColumn,
+                                showRowActionsColumn,
+                                rowHeight,
+                                rowClass: cn(v.row(), slotProps == null ? void 0 : (_slotProps_row = slotProps.row) == null ? void 0 : _slotProps_row.className),
+                                cellClass: cn(v.cell(), slotProps == null ? void 0 : (_slotProps_cell = slotProps.cell) == null ? void 0 : _slotProps_cell.className)
+                            }) : sortedRows.length === 0 ? renderEmptyState({
+                                totalColumnCount,
+                                emptyState,
+                                fallback: labels.noData,
+                                cellClass: cn(v.cell(), v.emptyState(), slotProps == null ? void 0 : (_slotProps_emptyState = slotProps.emptyState) == null ? void 0 : _slotProps_emptyState.className)
+                            }) : renderVirtualizedBody({
+                                vWindow,
+                                renderedRows,
+                                visibleCols,
+                                columnTypes,
+                                selection,
+                                rowSelection,
+                                showSelectionColumn,
+                                showRowActionsColumn,
+                                rowActions,
+                                getRowId,
+                                isInteractive,
+                                labels,
+                                classes: {
+                                    row: cn(v.row(), slotProps == null ? void 0 : (_slotProps_row1 = slotProps.row) == null ? void 0 : _slotProps_row1.className),
+                                    cell: cn(v.cell(), slotProps == null ? void 0 : (_slotProps_cell1 = slotProps.cell) == null ? void 0 : _slotProps_cell1.className),
+                                    selectionCell: cn(v.cell(), v.selectionCell(), v.stickyLeftCell(), slotProps == null ? void 0 : (_slotProps_cell2 = slotProps.cell) == null ? void 0 : _slotProps_cell2.className, slotProps == null ? void 0 : (_slotProps_selectionCell1 = slotProps.selectionCell) == null ? void 0 : _slotProps_selectionCell1.className),
+                                    stickyLeftCell: v.stickyLeftCell(),
+                                    rowActionsCell: cn(v.cell(), v.rowActionsCell(), slotProps == null ? void 0 : (_slotProps_cell3 = slotProps.cell) == null ? void 0 : _slotProps_cell3.className, slotProps == null ? void 0 : (_slotProps_rowActionsCell = slotProps.rowActionsCell) == null ? void 0 : _slotProps_rowActionsCell.className)
+                                }
+                            })
+                        })
+                    ]
+                })
+            }),
+            bulkActions && selectedRows.length > 0 && jsxs("div", {
+                className: cn(v.bulkActionFooter(), slotProps == null ? void 0 : (_slotProps_bulkActionFooter = slotProps.bulkActionFooter) == null ? void 0 : _slotProps_bulkActionFooter.className),
+                role: "region",
+                "aria-label": labels.selectedCount.replace('{count}', String(selectedRows.length)),
+                children: [
+                    jsx("span", {
+                        className: "text-sm text-neutral-700",
+                        children: labels.selectedCount.replace('{count}', String(selectedRows.length))
+                    }),
+                    jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            bulkActions(selectedRows),
+                            jsx("button", {
+                                type: "button",
+                                onClick: selection.clearSelection,
+                                className: cn('text-sm text-neutral-500 hover:text-neutral-900', 'underline-offset-2 hover:underline', 'focus:outline-none focus-visible:underline'),
+                                children: labels.clearSelection
+                            })
+                        ]
+                    })
+                ]
+            }),
+            pagination && jsx("div", {
+                className: cn(v.paginationFooter(), slotProps == null ? void 0 : (_slotProps_pagination = slotProps.pagination) == null ? void 0 : _slotProps_pagination.className),
+                children: jsx(Pagination, {
+                    page: pagination.page,
+                    pageSize: pagination.pageSize,
+                    totalCount: totalCountProp != null ? totalCountProp : sortedRows.length,
+                    onPageChange: pagination.onPageChange,
+                    onPageSizeChange: pagination.onPageSizeChange,
+                    pageSizeOptions: pagination.pageSizeOptions
+                })
+            })
+        ]
+    });
+}
+// ───── Header cell ─────
+function HeaderCell(props) {
+    const { col, sortModel, onSortClick, inferredType, labels, className, buttonClassName, disabled } = props;
+    const align = resolveAlign(col, inferredType);
+    const alignClass = align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
+    const sortEntry = sortModel.find((s)=>s.field === col.field);
+    const ariaSort = (sortEntry == null ? void 0 : sortEntry.direction) === 'asc' ? 'ascending' : (sortEntry == null ? void 0 : sortEntry.direction) === 'desc' ? 'descending' : 'none';
+    const headerContent = typeof col.header === 'function' ? col.header() : col.header;
+    const cellStyle = {
+        width: col.width != null ? `${col.width}px` : undefined,
+        minWidth: col.minWidth != null ? `${col.minWidth}px` : undefined,
+        flex: col.flex
+    };
+    if (col.sortable) {
+        return jsx("th", {
+            scope: "col",
+            "aria-sort": ariaSort,
+            className: cn(className, alignClass),
+            style: cellStyle,
+            children: jsxs("button", {
+                type: "button",
+                onClick: onSortClick,
+                disabled: disabled,
+                "aria-label": ariaSort === 'ascending' ? labels.ariaSortAscending : ariaSort === 'descending' ? labels.ariaSortDescending : labels.ariaSortNone,
+                className: cn(buttonClassName, align === 'right' && 'flex-row-reverse', 'disabled:cursor-not-allowed disabled:opacity-50'),
+                children: [
+                    jsx("span", {
+                        children: headerContent
+                    }),
+                    jsx(SortIcon, {
+                        direction: sortEntry == null ? void 0 : sortEntry.direction
+                    })
+                ]
+            })
+        });
+    }
+    return jsx("th", {
+        scope: "col",
+        className: cn(className, alignClass),
+        style: cellStyle,
+        children: headerContent
+    });
+}
+// ───── Virtualized body ─────
+function renderVirtualizedBody(args) {
+    const { vWindow, renderedRows, visibleCols, columnTypes, selection, rowSelection, showSelectionColumn, showRowActionsColumn, rowActions, getRowId, isInteractive, labels, classes } = args;
+    return jsxs(Fragment$1, {
+        children: [
+            vWindow.paddingTop > 0 && jsx("tr", {
+                "aria-hidden": "true",
+                style: {
+                    height: vWindow.paddingTop
+                }
+            }),
+            renderedRows.map((row, localIdx)=>{
+                const absoluteIdx = vWindow.startIndex + localIdx;
+                const rowId = getRowId(row, absoluteIdx);
+                const isSelected = selection.isSelected(rowId);
+                return jsxs("tr", {
+                    "data-selected": isSelected ? 'true' : 'false',
+                    "aria-selected": rowSelection !== 'none' ? isSelected : undefined,
+                    className: classes.row,
+                    children: [
+                        showSelectionColumn && jsx("td", {
+                            className: classes.selectionCell,
+                            children: jsx("input", {
+                                type: "checkbox",
+                                "aria-label": labels.ariaSelectRow,
+                                checked: isSelected,
+                                onChange: ()=>selection.toggleRow(rowId),
+                                disabled: !isInteractive,
+                                className: "cursor-pointer"
+                            })
+                        }),
+                        visibleCols.map((col)=>jsx(DataCell, {
+                                col: col,
+                                row: row,
+                                rowIndex: absoluteIdx,
+                                isSelected: isSelected,
+                                inferredType: columnTypes.get(col.field),
+                                cellClass: classes.cell,
+                                stickyLeftClass: classes.stickyLeftCell
+                            }, col.field)),
+                        showRowActionsColumn && rowActions && jsx("td", {
+                            className: classes.rowActionsCell,
+                            children: rowActions(row)
+                        })
+                    ]
+                }, rowId);
+            }),
+            vWindow.paddingBottom > 0 && jsx("tr", {
+                "aria-hidden": "true",
+                style: {
+                    height: vWindow.paddingBottom
+                }
+            })
+        ]
+    });
+}
+// ───── Data cell ─────
+function DataCell(props) {
+    const { col, row, rowIndex, isSelected, inferredType, cellClass, stickyLeftClass } = props;
+    const value = getNestedValue(row, col.field);
+    const align = resolveAlign(col, inferredType);
+    const tabularNums = resolveTabularNums(col, inferredType);
+    const monospace = resolveMonospace(col);
+    const alignClass = align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
+    const columnAccessState = col.access ? {
+        hidden: col.access.onUnauthorized === 'hide',
+        disabled: col.access.onUnauthorized === 'disable',
+        readonly: col.access.onUnauthorized === 'readonly'
+    } : null;
+    const content = col.cellRenderer ? col.cellRenderer({
+        row,
+        value,
+        rowIndex,
+        isSelected,
+        isExpanded: false,
+        access: columnAccessState
+    }) : renderDefaultCell(value);
+    return jsx("td", {
+        className: cn(cellClass, alignClass, tabularNums && 'tabular-nums', monospace && 'font-mono', col.sticky === 'left' && stickyLeftClass),
+        style: {
+            width: col.width != null ? `${col.width}px` : undefined,
+            minWidth: col.minWidth != null ? `${col.minWidth}px` : undefined
+        },
+        children: content
+    });
+}
+// ───── Helpers ─────
+function renderDefaultCell(value) {
+    if (value == null) return null;
+    if (typeof value === 'boolean') return value ? '✓' : '✗';
+    if (value instanceof Date) return value.toISOString().slice(0, 10);
+    if (typeof value === 'object') return JSON.stringify(value);
+    return value;
+}
+function handleSortClick(col, event, current, setSortModel) {
+    if (!col.sortable) return;
+    const multi = event.shiftKey;
+    setSortModel((prev)=>cycleSortFor(prev, col.field, multi));
+}
+function renderLoadingRows(args) {
+    const { count, visibleCols, showSelectionColumn, showRowActionsColumn, rowHeight, rowClass, cellClass } = args;
+    return Array.from({
+        length: count
+    }).map((_, i)=>jsxs("tr", {
+            className: rowClass,
+            "aria-busy": "true",
+            style: {
+                height: rowHeight
+            },
+            children: [
+                showSelectionColumn && jsx("td", {
+                    className: cellClass,
+                    children: jsx(Skeleton, {
+                        variant: "rectangle",
+                        width: "16px",
+                        height: "16px"
+                    })
+                }),
+                visibleCols.map((col)=>jsx("td", {
+                        className: cellClass,
+                        children: jsx(Skeleton, {
+                            variant: "text",
+                            width: "80%"
+                        })
+                    }, col.field)),
+                showRowActionsColumn && jsx("td", {
+                    className: cellClass,
+                    children: jsx(Skeleton, {
+                        variant: "rectangle",
+                        width: "24px",
+                        height: "24px"
+                    })
+                })
+            ]
+        }, `loading-${i}`));
+}
+function renderEmptyState(args) {
+    var _args_emptyState;
+    return jsx("tr", {
+        children: jsx("td", {
+            colSpan: args.totalColumnCount,
+            className: args.cellClass,
+            children: (_args_emptyState = args.emptyState) != null ? _args_emptyState : args.fallback
+        })
+    });
+}
+// ───── Icons ─────
+function SortIcon(props) {
+    return jsx("svg", {
+        width: "0.75em",
+        height: "0.75em",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        className: "shrink-0 opacity-60 group-hover:opacity-100",
+        children: props.direction === 'asc' ? jsx("path", {
+            d: "M8 4l4 6H4z"
+        }) : props.direction === 'desc' ? jsx("path", {
+            d: "M8 12L4 6h8z"
+        }) : jsxs(Fragment$1, {
+            children: [
+                jsx("path", {
+                    d: "M8 3l3 4H5z",
+                    opacity: "0.5"
+                }),
+                jsx("path", {
+                    d: "M8 13l-3-4h6z",
+                    opacity: "0.5"
+                })
+            ]
+        })
+    });
+}
+function SearchIcon(props) {
+    return jsxs("svg", {
+        width: "0.875em",
+        height: "0.875em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        className: props.className,
+        children: [
+            jsx("circle", {
+                cx: "7",
+                cy: "7",
+                r: "4.5"
+            }),
+            jsx("path", {
+                d: "M11 11l3 3"
+            })
+        ]
+    });
+}
+
 /**
  * @dashforge/tw
  *
@@ -7871,6 +10324,6 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [
  */ // ───── Components ─────
 /**
  * Package version (synced with `package.json` at publish time).
- */ const VERSION = '0.5.0-beta';
+ */ const VERSION = '0.7.0-beta';
 
-export { Accordion, AppShell, AspectRatio, Autocomplete, Box, Breadcrumbs, Button, Checkbox, ConfirmDialogProvider, Container, DateTimePicker, Dialog, Divider, Grid, LeftNav, NumberField, OTPField, Pagination, Popover, RadioGroup, Skeleton, SnackbarProvider, Stack, Switch, Tabs, TextField, Textarea, Tooltip, TopBar, Typography, VERSION, VisuallyHidden, accordionVariants, appShellVariants, autocompleteVariants, boxVariants, breadcrumbsVariants, buttonVariants, checkboxVariants, cn, confirmDialogVariants, containerVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, gridVariants, isoToInputValue, leftNavVariants, numberFieldVariants, otpFieldVariants, paginationVariants, popoverVariants, radioGroupVariants, skeletonVariants, snackbarVariants, stackVariants, switchVariants, tabsVariants, textFieldVariants, textareaVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar };
+export { Accordion, AppShell, AspectRatio, Autocomplete, Box, Breadcrumbs, Button, Checkbox, ConfirmDialogProvider, Container, DataGrid, DateTimePicker, Dialog, Divider, Grid, LeftNav, NumberField, OTPField, Pagination, Popover, RadioGroup, RenderButton, RenderChip, RenderText, RenderTwoLine, RowActionsMenu, Skeleton, SnackbarProvider, Stack, Switch, Table, Tabs, TextField, Textarea, Tooltip, TopBar, Typography, VERSION, VisuallyHidden, accordionVariants, appShellVariants, autocompleteVariants, boxVariants, breadcrumbsVariants, buttonVariants, checkboxVariants, cn, confirmDialogVariants, containerVariants, dataGridVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, getNestedValue, gridVariants, isoToInputValue, leftNavVariants, numberFieldVariants, otpFieldVariants, paginationVariants, popoverVariants, radioGroupVariants, skeletonVariants, snackbarVariants, stackVariants, switchVariants, tableVariants, tabsVariants, textFieldVariants, textareaVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar };