@dashforge/tw 0.6.0-beta → 0.8.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$1 = {
+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$1, 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
@@ -8193,28 +8259,99 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [
 }
 
 /**
- * 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.
+ * Coerce a value to a number for range comparison. Returns
+ * `null` if not coercible.
+ */ function toNumber(value) {
+    if (value == null) return null;
+    if (typeof value === 'number') return Number.isFinite(value) ? value : null;
+    if (typeof value === 'bigint') return Number(value);
+    if (typeof value === 'string') {
+        const n = Number(value);
+        return Number.isFinite(n) ? n : null;
+    }
+    return null;
+}
+/**
+ * Coerce a value to a Date's epoch ms for date-range comparison.
+ * Accepts `Date` instances + ISO 8601 strings. Returns `null` if
+ * not coercible.
+ */ function toDateMs(value) {
+    if (value == null) return null;
+    if (value instanceof Date) return value.getTime();
+    if (typeof value === 'string') {
+        const d = new Date(value);
+        const t = d.getTime();
+        return Number.isNaN(t) ? null : t;
+    }
+    return null;
+}
+/**
+ * Test one row × one filter. Returns `true` if the row passes the
+ * filter. The operator decides the predicate:
+ *
+ *  - `contains` → substring match on stringified value (text filter)
+ *  - `equals` → strict equality (boolean filter mostly)
+ *  - `between` → `value: [min, max]` tuple. Each end can be `null`
+ *    for an open range. Used by number range + date range filters.
+ *
+ * Empty filter is a no-op (passes every row).
+ */ function passesFilter(rowValue, op, filterValue) {
+    switch(op){
+        case 'contains':
+            {
+                const needle = typeof filterValue === 'string' ? filterValue.trim().toLowerCase() : '';
+                if (!needle) return true;
+                return stringifyForSearch(rowValue).toLowerCase().includes(needle);
+            }
+        case 'equals':
+            {
+                if (filterValue == null) return true;
+                return rowValue === filterValue;
+            }
+        case 'between':
+            {
+                if (!Array.isArray(filterValue) || filterValue.length !== 2) return true;
+                const [min, max] = filterValue;
+                if (min == null && max == null) return true;
+                // Try number range first.
+                const rowNum = toNumber(rowValue);
+                const minNum = min == null ? null : toNumber(min);
+                const maxNum = max == null ? null : toNumber(max);
+                if (rowNum != null && (minNum != null || maxNum != null)) {
+                    if (minNum != null && rowNum < minNum) return false;
+                    if (maxNum != null && rowNum > maxNum) return false;
+                    return true;
+                }
+                // Fall through to date range.
+                const rowMs = toDateMs(rowValue);
+                const minMs = min == null ? null : toDateMs(min);
+                const maxMs = max == null ? null : toDateMs(max);
+                if (rowMs != null && (minMs != null || maxMs != null)) {
+                    if (minMs != null && rowMs < minMs) return false;
+                    if (maxMs != null && rowMs > maxMs) return false;
+                    return true;
+                }
+                // If neither coercion worked, let the row pass (defensive).
+                return true;
+            }
+        default:
+            return true;
+    }
+}
+/**
+ * Filters `rows` by the per-column filter model. AND semantics
+ * across columns — a row must pass EVERY active filter.
+ *
+ * Each filter item specifies an `op` (`'contains'` / `'equals'` /
+ * `'between'`) and a `value` whose shape matches the operator
+ * (string for contains; primitive for equals; `[min, max]` tuple
+ * for between).
  */ 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;
-                }
+                return passesFilter(value, filter.op, filter.value);
             }));
     }, [
         rows,
@@ -8510,7 +8647,7 @@ function inferType(value) {
     return col.monospace === true;
 }
 
-const DEFAULT_LABELS = {
+const DEFAULT_LABELS$1 = {
     searchPlaceholder: 'Search...',
     noData: 'No data',
     loading: 'Loading…',
@@ -8526,10 +8663,23 @@ const DEFAULT_LABELS = {
     filterColumn: 'Filter',
     filterApply: 'Apply',
     filterClear: 'Clear',
+    filterMin: 'Min',
+    filterMax: 'Max',
+    filterFrom: 'From',
+    filterTo: 'To',
+    filterAll: 'All',
+    filterTrue: 'True',
+    filterFalse: 'False',
     density: 'Density',
     densityCompact: 'Compact',
     densityComfortable: 'Comfortable',
-    densitySpacious: 'Spacious'
+    densitySpacious: 'Spacious',
+    columnsButton: 'Columns',
+    columnsTitle: 'Manage columns',
+    columnsDescription: 'Show or hide columns. Required columns cannot be toggled.',
+    columnsShowAll: 'Show all',
+    columnsHideAll: 'Hide all',
+    columnsDone: 'Done'
 };
 const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
 /**
@@ -8556,7 +8706,7 @@ const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
     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, labelsProp);
+    const labels = _extends({}, DEFAULT_LABELS$1, labelsProp);
     const tableAccessState = useAccessState(tableAccess);
     // ───── Controllable state machinery ─────
     const [sortModel, setSortModel] = useControllableState({
@@ -8629,7 +8779,7 @@ const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
                             className: "sr-only",
                             children: labels.searchPlaceholder
                         }),
-                        jsx(SearchIcon, {
+                        jsx(SearchIcon$1, {
                             className: "ml-2 shrink-0 text-neutral-500"
                         }),
                         jsx("input", {
@@ -8681,10 +8831,10 @@ const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
                                     }),
                                     visibleCols.map((col)=>{
                                         var _slotProps_headerCell;
-                                        return jsx(HeaderCell, {
+                                        return jsx(HeaderCell$1, {
                                             col: col,
                                             sortModel: sortModel,
-                                            onSortClick: (e)=>handleSortClick(col, e, sortModel, setSortModel),
+                                            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),
@@ -8702,7 +8852,7 @@ const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
                         }),
                         jsx("tbody", {
                             className: cn(v.tbody(), slotProps == null ? void 0 : (_slotProps_tbody = slotProps.tbody) == null ? void 0 : _slotProps_tbody.className),
-                            children: loading ? renderLoadingRows({
+                            children: loading ? renderLoadingRows$1({
                                 count: loadingRowCount,
                                 visibleCols,
                                 showSelectionColumn,
@@ -8710,7 +8860,7 @@ const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
                                 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({
+                            }) : sortedRows.length === 0 ? renderEmptyState$1({
                                 totalColumnCount,
                                 emptyState,
                                 fallback: labels.noData,
@@ -8782,7 +8932,7 @@ const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
     });
 }
 // ───── Header cell (with sort button) ─────
-function HeaderCell(props) {
+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';
@@ -8810,7 +8960,7 @@ function HeaderCell(props) {
                     jsx("span", {
                         children: headerContent
                     }),
-                    jsx(SortIcon, {
+                    jsx(SortIcon$1, {
                         direction: sortEntry == null ? void 0 : sortEntry.direction
                     })
                 ]
@@ -8858,7 +9008,7 @@ function Row(props) {
                             children: jsx(ChevronRightIcon, {})
                         })
                     }),
-                    visibleCols.map((col)=>jsx(DataCell, {
+                    visibleCols.map((col)=>jsx(DataCell$1, {
                             col: col,
                             row: row,
                             rowIndex: rowIndex,
@@ -8885,7 +9035,7 @@ function Row(props) {
     });
 }
 // ───── Data cell ─────
-function DataCell(props) {
+function DataCell$1(props) {
     const { col, row, rowIndex, isSelected, isExpanded, inferredType, cellClass } = props;
     const value = getNestedValue(row, col.field);
     const align = resolveAlign(col, inferredType);
@@ -8910,7 +9060,7 @@ function DataCell(props) {
         isSelected,
         isExpanded,
         access: columnAccessState
-    }) : renderDefaultCell(value);
+    }) : renderDefaultCell$1(value);
     return jsx("td", {
         className: cn(cellClass, alignClass, tabularNums && 'tabular-nums', monospace && 'font-mono'),
         style: {
@@ -8921,19 +9071,19 @@ function DataCell(props) {
     });
 }
 // ───── Helpers ─────
-function renderDefaultCell(value) {
+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(col, event, current, setSortModel) {
+function handleSortClick$1(col, event, current, setSortModel) {
     if (!col.sortable) return;
     const multi = event.shiftKey;
     setSortModel((prev)=>cycleSortFor(prev, col.field, multi));
 }
-function renderLoadingRows(args) {
+function renderLoadingRows$1(args) {
     const { count, visibleCols, showSelectionColumn, showExpandColumn, showRowActionsColumn, rowClass, cellClass } = args;
     return Array.from({
         length: count
@@ -8975,7 +9125,7 @@ function renderLoadingRows(args) {
             ]
         }, `loading-${i}`));
 }
-function renderEmptyState(args) {
+function renderEmptyState$1(args) {
     var _args_emptyState;
     return jsx("tr", {
         children: jsx("td", {
@@ -8986,7 +9136,7 @@ function renderEmptyState(args) {
     });
 }
 // ───── Icons ─────
-function SortIcon(props) {
+function SortIcon$1(props) {
     return jsx("svg", {
         width: "0.75em",
         height: "0.75em",
@@ -9028,7 +9178,7 @@ function ChevronRightIcon() {
         })
     });
 }
-function SearchIcon(props) {
+function SearchIcon$1(props) {
     return jsxs("svg", {
         width: "0.875em",
         height: "0.875em",
@@ -9393,6 +9543,1778 @@ function RowActionMenuItem(props) {
     });
 }
 
+/**
+ * `<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',
+        // Sticky RIGHT column — mirror of stickyLeftCell. The first
+        // right-sticky column gets a `border-l` to separate it visually
+        // from the scrollable area (the consumer can override via
+        // slotProps if they don't want it).
+        stickyRightCell: 'sticky right-0 z-[1] bg-neutral-50 border-l border-neutral-200',
+        stickyRightHeaderCell: 'sticky right-0 z-20 bg-neutral-50 border-l border-neutral-200',
+        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
+    };
+}
+
+/**
+ * Per-column filter UI for DataGrid.
+ *
+ * `<ColumnFilterTrigger>` renders the filter icon button in the
+ * column header — when clicked, opens a Popover with the
+ * appropriate filter UI for the column type:
+ *
+ *  - `text` → `<TextFilter>` with single input (op: `contains`)
+ *  - `number` → `<NumberRangeFilter>` with min/max inputs (op: `between`)
+ *  - `boolean` → `<BooleanFilter>` with true/false/all radio (op: `equals`)
+ *  - `date` → `<DateRangeFilter>` with min/max date inputs (op: `between`)
+ *
+ * Each filter UI has Apply + Clear actions; Apply commits the
+ * filter to the model, Clear removes any existing filter for that
+ * column.
+ */ // ───── Helper: read/write filter model for a single column ─────
+function findFilter(model, field) {
+    return model.find((f)=>f.field === field);
+}
+function setFilter(model, field, next) {
+    const rest = model.filter((f)=>f.field !== field);
+    if (next == null) return rest;
+    return [
+        ...rest,
+        next
+    ];
+}
+const DEFAULT_FILTER_LABELS = {
+    filterColumn: 'Filter',
+    filterApply: 'Apply',
+    filterClear: 'Clear',
+    filterMin: 'Min',
+    filterMax: 'Max',
+    filterFrom: 'From',
+    filterTo: 'To',
+    filterAll: 'All',
+    filterTrue: 'True',
+    filterFalse: 'False'
+};
+function ColumnFilterTrigger(props) {
+    const { field, filterType, filterModel, onFilterChange, disabled, labels: labelsProp } = props;
+    const labels = _extends({}, DEFAULT_FILTER_LABELS, labelsProp);
+    const [open, setOpen] = useState(false);
+    const active = findFilter(filterModel, field) != null;
+    return jsx(Popover, {
+        open: open,
+        onOpenChange: setOpen,
+        side: "bottom",
+        align: "end",
+        content: jsx(FilterPanel, {
+            field: field,
+            filterType: filterType,
+            filterModel: filterModel,
+            onFilterChange: (next)=>{
+                onFilterChange(next);
+                setOpen(false);
+            },
+            labels: labels
+        }),
+        children: jsx("button", {
+            type: "button",
+            "aria-label": labels.filterColumn,
+            "aria-pressed": active,
+            disabled: disabled,
+            className: cn('inline-flex items-center justify-center h-6 w-6 rounded', 'text-neutral-500 hover:text-neutral-900', active && 'text-primary-700', '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'),
+            children: jsx(FilterIcon, {})
+        })
+    });
+}
+// ───── Panel — dispatches to the right filter UI ─────
+function FilterPanel(props) {
+    const { field, filterType, filterModel, onFilterChange, labels } = props;
+    const current = findFilter(filterModel, field);
+    const commit = (next)=>{
+        onFilterChange(setFilter(filterModel, field, next));
+    };
+    switch(filterType){
+        case 'number':
+            return jsx(NumberRangeFilter, {
+                field: field,
+                current: current,
+                onCommit: commit,
+                labels: labels
+            });
+        case 'boolean':
+            return jsx(BooleanFilter, {
+                field: field,
+                current: current,
+                onCommit: commit,
+                labels: labels
+            });
+        case 'date':
+            return jsx(DateRangeFilter, {
+                field: field,
+                current: current,
+                onCommit: commit,
+                labels: labels
+            });
+        case 'text':
+        default:
+            return jsx(TextFilter, {
+                field: field,
+                current: current,
+                onCommit: commit,
+                labels: labels
+            });
+    }
+}
+// ───── Text filter ─────
+function TextFilter(props) {
+    const { field, current, onCommit, labels } = props;
+    const [value, setValue] = useState(typeof (current == null ? void 0 : current.value) === 'string' ? current.value : '');
+    return jsxs("div", {
+        className: "flex flex-col gap-2 min-w-[200px]",
+        children: [
+            jsx("input", {
+                type: "text",
+                value: value,
+                onChange: (e)=>setValue(e.target.value),
+                placeholder: "\u2026",
+                autoFocus: true,
+                className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+            }),
+            jsx(FilterActions, {
+                onApply: ()=>onCommit(value.trim() ? {
+                        field,
+                        op: 'contains',
+                        value
+                    } : null),
+                onClear: ()=>{
+                    setValue('');
+                    onCommit(null);
+                },
+                labels: labels
+            })
+        ]
+    });
+}
+// ───── Number range filter ─────
+function NumberRangeFilter(props) {
+    const { field, current, onCommit, labels } = props;
+    const currentValue = current == null ? void 0 : current.value;
+    const currentTuple = Array.isArray(currentValue) ? currentValue : [
+        null,
+        null
+    ];
+    const [min, setMin] = useState(currentTuple[0] != null ? String(currentTuple[0]) : '');
+    const [max, setMax] = useState(currentTuple[1] != null ? String(currentTuple[1]) : '');
+    const apply = ()=>{
+        const minN = min.trim() ? Number(min) : null;
+        const maxN = max.trim() ? Number(max) : null;
+        if ((minN == null || Number.isFinite(minN)) && (maxN == null || Number.isFinite(maxN))) {
+            if (minN == null && maxN == null) {
+                onCommit(null);
+            } else {
+                onCommit({
+                    field,
+                    op: 'between',
+                    value: [
+                        minN,
+                        maxN
+                    ]
+                });
+            }
+        }
+    };
+    return jsxs("div", {
+        className: "flex flex-col gap-2 min-w-[220px]",
+        children: [
+            jsxs("div", {
+                className: "grid grid-cols-2 gap-2",
+                children: [
+                    jsxs("label", {
+                        className: "flex flex-col gap-1 text-xs text-neutral-700",
+                        children: [
+                            jsx("span", {
+                                children: labels.filterMin
+                            }),
+                            jsx("input", {
+                                type: "number",
+                                value: min,
+                                onChange: (e)=>setMin(e.target.value),
+                                autoFocus: true,
+                                className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+                            })
+                        ]
+                    }),
+                    jsxs("label", {
+                        className: "flex flex-col gap-1 text-xs text-neutral-700",
+                        children: [
+                            jsx("span", {
+                                children: labels.filterMax
+                            }),
+                            jsx("input", {
+                                type: "number",
+                                value: max,
+                                onChange: (e)=>setMax(e.target.value),
+                                className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            jsx(FilterActions, {
+                onApply: apply,
+                onClear: ()=>{
+                    setMin('');
+                    setMax('');
+                    onCommit(null);
+                },
+                labels: labels
+            })
+        ]
+    });
+}
+// ───── Boolean filter ─────
+function BooleanFilter(props) {
+    const { field, current, onCommit, labels } = props;
+    const initial = (current == null ? void 0 : current.value) === true ? 'true' : (current == null ? void 0 : current.value) === false ? 'false' : 'all';
+    const [value, setValue] = useState(initial);
+    const apply = ()=>{
+        if (value === 'all') onCommit(null);
+        else onCommit({
+            field,
+            op: 'equals',
+            value: value === 'true'
+        });
+    };
+    return jsxs("div", {
+        className: "flex flex-col gap-2 min-w-[160px]",
+        children: [
+            jsx("fieldset", {
+                className: "flex flex-col gap-1",
+                children: [
+                    'all',
+                    'true',
+                    'false'
+                ].map((opt)=>jsxs("label", {
+                        className: "flex items-center gap-2 text-sm cursor-pointer",
+                        children: [
+                            jsx("input", {
+                                type: "radio",
+                                name: `filter-${field}`,
+                                value: opt,
+                                checked: value === opt,
+                                onChange: ()=>setValue(opt),
+                                className: "cursor-pointer"
+                            }),
+                            jsx("span", {
+                                children: opt === 'all' ? labels.filterAll : opt === 'true' ? labels.filterTrue : labels.filterFalse
+                            })
+                        ]
+                    }, opt))
+            }),
+            jsx(FilterActions, {
+                onApply: apply,
+                onClear: ()=>{
+                    setValue('all');
+                    onCommit(null);
+                },
+                labels: labels
+            })
+        ]
+    });
+}
+// ───── Date range filter ─────
+function DateRangeFilter(props) {
+    const { field, current, onCommit, labels } = props;
+    const currentValue = current == null ? void 0 : current.value;
+    const currentTuple = Array.isArray(currentValue) ? currentValue : [
+        null,
+        null
+    ];
+    const [from, setFrom] = useState(typeof currentTuple[0] === 'string' ? currentTuple[0] : '');
+    const [to, setTo] = useState(typeof currentTuple[1] === 'string' ? currentTuple[1] : '');
+    const apply = ()=>{
+        if (!from && !to) {
+            onCommit(null);
+        } else {
+            onCommit({
+                field,
+                op: 'between',
+                value: [
+                    from || null,
+                    to || null
+                ]
+            });
+        }
+    };
+    return jsxs("div", {
+        className: "flex flex-col gap-2 min-w-[220px]",
+        children: [
+            jsxs("div", {
+                className: "grid grid-cols-2 gap-2",
+                children: [
+                    jsxs("label", {
+                        className: "flex flex-col gap-1 text-xs text-neutral-700",
+                        children: [
+                            jsx("span", {
+                                children: labels.filterFrom
+                            }),
+                            jsx("input", {
+                                type: "date",
+                                value: from,
+                                onChange: (e)=>setFrom(e.target.value),
+                                autoFocus: true,
+                                className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+                            })
+                        ]
+                    }),
+                    jsxs("label", {
+                        className: "flex flex-col gap-1 text-xs text-neutral-700",
+                        children: [
+                            jsx("span", {
+                                children: labels.filterTo
+                            }),
+                            jsx("input", {
+                                type: "date",
+                                value: to,
+                                onChange: (e)=>setTo(e.target.value),
+                                className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            jsx(FilterActions, {
+                onApply: apply,
+                onClear: ()=>{
+                    setFrom('');
+                    setTo('');
+                    onCommit(null);
+                },
+                labels: labels
+            })
+        ]
+    });
+}
+// ───── Apply + Clear actions ─────
+function FilterActions(props) {
+    return jsxs("div", {
+        className: "flex justify-end gap-2 pt-1 border-t border-neutral-200",
+        children: [
+            jsx("button", {
+                type: "button",
+                onClick: props.onClear,
+                className: "text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline px-2 py-1",
+                children: props.labels.filterClear
+            }),
+            jsx("button", {
+                type: "button",
+                onClick: props.onApply,
+                className: "text-xs bg-primary-500 text-white rounded-md hover:bg-primary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 px-3 py-1",
+                children: props.labels.filterApply
+            })
+        ]
+    });
+}
+// ───── Icon ─────
+function FilterIcon() {
+    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: "M2 3h12M4 8h8M6 13h4"
+        })
+    });
+}
+
+const DEFAULT_VISIBILITY_LABELS = {
+    columnsButton: 'Columns',
+    columnsTitle: 'Manage columns',
+    columnsDescription: 'Show or hide columns. Required columns cannot be toggled.',
+    columnsShowAll: 'Show all',
+    columnsHideAll: 'Hide all',
+    columnsDone: 'Done'
+};
+function ColumnVisibilityTrigger(props) {
+    const { cols, hiddenColumns, onChange, disabled, labels: labelsProp } = props;
+    const labels = _extends({}, DEFAULT_VISIBILITY_LABELS, labelsProp);
+    const [open, setOpen] = useState(false);
+    // Hideable cols are the only ones the user can toggle. `hideable`
+    // defaults to `true` — a column is hideable unless explicitly opted
+    // out with `hideable: false` (structurally required column).
+    const hideableCols = cols.filter((c)=>c.hideable !== false);
+    return jsxs(Fragment$1, {
+        children: [
+            jsxs("button", {
+                type: "button",
+                onClick: ()=>setOpen(true),
+                disabled: disabled,
+                className: cn('inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md', 'text-sm text-neutral-700 hover:text-neutral-900', 'border border-neutral-300 bg-neutral-50 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'),
+                children: [
+                    jsx(ColumnsIcon, {}),
+                    jsx("span", {
+                        children: labels.columnsButton
+                    })
+                ]
+            }),
+            jsx(Dialog, {
+                open: open,
+                onOpenChange: setOpen,
+                title: labels.columnsTitle,
+                description: labels.columnsDescription,
+                size: "sm",
+                children: jsx(ColumnVisibilityBody, {
+                    cols: hideableCols,
+                    hiddenColumns: hiddenColumns,
+                    onChange: onChange,
+                    onDone: ()=>setOpen(false),
+                    labels: labels
+                })
+            })
+        ]
+    });
+}
+// ───── Dialog body ─────
+function ColumnVisibilityBody(props) {
+    const { cols, hiddenColumns, onChange, onDone, labels } = props;
+    // Local draft so the user can stage changes; commit on Done.
+    const [draft, setDraft] = useState(hiddenColumns);
+    // Re-sync when the dialog re-opens with a different external state.
+    useEffect(()=>{
+        setDraft(hiddenColumns);
+    }, [
+        hiddenColumns
+    ]);
+    const toggle = (field)=>{
+        setDraft((prev)=>prev.includes(field) ? prev.filter((f)=>f !== field) : [
+                ...prev,
+                field
+            ]);
+    };
+    const showAll = ()=>setDraft([]);
+    const hideAll = ()=>setDraft(cols.map((c)=>c.field));
+    return jsxs("div", {
+        className: "flex flex-col gap-3",
+        children: [
+            jsxs("div", {
+                className: "flex items-center gap-2 pb-2 border-b border-neutral-200",
+                children: [
+                    jsx("button", {
+                        type: "button",
+                        onClick: showAll,
+                        className: "text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline",
+                        children: labels.columnsShowAll
+                    }),
+                    jsx("span", {
+                        className: "text-neutral-300",
+                        children: "\u00B7"
+                    }),
+                    jsx("button", {
+                        type: "button",
+                        onClick: hideAll,
+                        className: "text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline",
+                        children: labels.columnsHideAll
+                    })
+                ]
+            }),
+            jsx("ul", {
+                className: "flex flex-col gap-1.5 max-h-72 overflow-auto",
+                children: cols.map((col)=>{
+                    const field = col.field;
+                    const hidden = draft.includes(field);
+                    const header = typeof col.header === 'function' ? col.header() : col.header;
+                    return jsx("li", {
+                        children: jsxs("label", {
+                            className: "flex items-center gap-2 cursor-pointer py-1 px-1 rounded hover:bg-neutral-100",
+                            children: [
+                                jsx("input", {
+                                    type: "checkbox",
+                                    checked: !hidden,
+                                    onChange: ()=>toggle(field),
+                                    className: "cursor-pointer"
+                                }),
+                                jsx("span", {
+                                    className: "text-sm text-neutral-900",
+                                    children: header
+                                })
+                            ]
+                        })
+                    }, field);
+                })
+            }),
+            jsx("div", {
+                className: "flex justify-end gap-2 pt-2 border-t border-neutral-200",
+                children: jsx("button", {
+                    type: "button",
+                    onClick: ()=>{
+                        onChange(draft);
+                        onDone();
+                    },
+                    className: "text-sm bg-primary-500 text-white rounded-md hover:bg-primary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 px-3 py-1.5",
+                    children: labels.columnsDone
+                })
+            })
+        ]
+    });
+}
+// ───── Icon ─────
+function ColumnsIcon() {
+    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",
+        children: [
+            jsx("rect", {
+                x: "2",
+                y: "3",
+                width: "3.5",
+                height: "10",
+                rx: "0.5"
+            }),
+            jsx("rect", {
+                x: "6.25",
+                y: "3",
+                width: "3.5",
+                height: "10",
+                rx: "0.5"
+            }),
+            jsx("rect", {
+                x: "10.5",
+                y: "3",
+                width: "3.5",
+                height: "10",
+                rx: "0.5"
+            })
+        ]
+    });
+}
+
+function useColumnResize(args) {
+    const { widths, onChange, minWidth = 40, maxWidth = 1200 } = args;
+    // We need the LATEST widths inside the pointermove closure. Stick
+    // them in a ref so the closure captured at pointerdown stays valid
+    // for the duration of the drag.
+    const widthsRef = useRef(widths);
+    widthsRef.current = widths;
+    const startResize = useCallback((field, startWidth, clampMin, clampMax)=>{
+        return (e)=>{
+            // Only respond to the primary mouse button (or touch / pen).
+            if (e.pointerType === 'mouse' && e.button !== 0) return;
+            e.preventDefault();
+            e.stopPropagation();
+            const startX = e.clientX;
+            const target = e.currentTarget;
+            try {
+                target.setPointerCapture(e.pointerId);
+            } catch (unused) {
+            // jsdom or older browsers — fine to fall back to global listeners.
+            }
+            const effectiveMin = Math.max(minWidth, clampMin);
+            const effectiveMax = Math.min(maxWidth, clampMax);
+            const handleMove = (ev)=>{
+                const delta = ev.clientX - startX;
+                const next = clamp(startWidth + delta, effectiveMin, effectiveMax);
+                onChange(_extends({}, widthsRef.current, {
+                    [field]: next
+                }));
+            };
+            const handleEnd = (ev)=>{
+                try {
+                    target.releasePointerCapture(ev.pointerId);
+                } catch (unused) {
+                /* noop */ }
+                target.removeEventListener('pointermove', handleMove);
+                target.removeEventListener('pointerup', handleEnd);
+                target.removeEventListener('pointercancel', handleEnd);
+            };
+            target.addEventListener('pointermove', handleMove);
+            target.addEventListener('pointerup', handleEnd);
+            target.addEventListener('pointercancel', handleEnd);
+        };
+    }, [
+        onChange,
+        minWidth,
+        maxWidth
+    ]);
+    return {
+        startResize
+    };
+}
+function clamp(n, min, max) {
+    if (n < min) return min;
+    if (n > max) return max;
+    return n;
+}
+
+function useColumnReorder(args) {
+    const { order, onChange } = args;
+    const sourceRef = useRef(null);
+    const [dropTarget, setDropTarget] = useState(null);
+    const [draggingField, setDraggingField] = useState(null);
+    const dragStart = useCallback((field)=>(e)=>{
+            sourceRef.current = field;
+            setDraggingField(field);
+            try {
+                e.dataTransfer.effectAllowed = 'move';
+                // Some browsers refuse to start a drag if no data is set.
+                e.dataTransfer.setData('text/plain', field);
+            } catch (unused) {
+            /* noop — jsdom doesn't implement dataTransfer fully. */ }
+        }, []);
+    const dragOver = useCallback((field)=>(e)=>{
+            if (sourceRef.current == null) return;
+            if (field === sourceRef.current) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'move';
+            // Determine LEFT vs RIGHT half of the target.
+            const rect = e.currentTarget.getBoundingClientRect();
+            const midpoint = rect.left + rect.width / 2;
+            const side = e.clientX < midpoint ? 'left' : 'right';
+            setDropTarget((prev)=>prev && prev.field === field && prev.side === side ? prev : {
+                    field,
+                    side
+                });
+        }, []);
+    const drop = useCallback((field)=>(e)=>{
+            e.preventDefault();
+            const source = sourceRef.current;
+            sourceRef.current = null;
+            setDraggingField(null);
+            const target = dropTarget;
+            setDropTarget(null);
+            if (!source || source === field) return;
+            const side = (target == null ? void 0 : target.field) === field ? target.side : 'right';
+            const next = moveColumn(order, source, field, side);
+            if (!arraysEqual(next, order)) onChange(next);
+        }, [
+        order,
+        onChange,
+        dropTarget
+    ]);
+    const dragEnd = useCallback(()=>{
+        sourceRef.current = null;
+        setDraggingField(null);
+        setDropTarget(null);
+    }, []);
+    return {
+        dropTarget,
+        draggingField,
+        dragStart,
+        dragOver,
+        drop,
+        dragEnd
+    };
+}
+/**
+ * Move `source` next to `target` in the `order` list.
+ * `side='left'` inserts before; `side='right'` inserts after.
+ * Exposed for unit testing.
+ */ function moveColumn(order, source, target, side) {
+    const withoutSource = order.filter((f)=>f !== source);
+    const targetIndex = withoutSource.indexOf(target);
+    if (targetIndex === -1) return order;
+    const insertAt = side === 'left' ? targetIndex : targetIndex + 1;
+    return [
+        ...withoutSource.slice(0, insertAt),
+        source,
+        ...withoutSource.slice(insertAt)
+    ];
+}
+function arraysEqual(a, b) {
+    if (a === b) return true;
+    if (a.length !== b.length) return false;
+    for(let i = 0; i < a.length; i++){
+        if (a[i] !== b[i]) return false;
+    }
+    return true;
+}
+
+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',
+    filterMin: 'Min',
+    filterMax: 'Max',
+    filterFrom: 'From',
+    filterTo: 'To',
+    filterAll: 'All',
+    filterTrue: 'True',
+    filterFalse: 'False',
+    density: 'Density',
+    densityCompact: 'Compact',
+    densityComfortable: 'Comfortable',
+    densitySpacious: 'Spacious',
+    columnsButton: 'Columns',
+    columnsTitle: 'Manage columns',
+    columnsDescription: 'Show or hide columns. Required columns cannot be toggled.',
+    columnsShowAll: 'Show all',
+    columnsHideAll: 'Hide all',
+    columnsDone: 'Done'
+};
+/**
+ * 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, hiddenColumns: hiddenColumnsProp, onHiddenColumnsChange, enableColumnVisibility = true, columnWidths: columnWidthsProp, onColumnWidthsChange, enableColumnResize = true, columnOrder: columnOrderProp, onColumnOrderChange, enableColumnReorder = true, 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
+    });
+    // filterModel: in v1-bis the per-column header UI commits filter
+    // items to this controllable state. Consumer can lift it via
+    // filterModelProp + onFilterChange to drive server-side filtering.
+    const [filterModel, setFilterModel] = useControllableState({
+        controlledValue: filterModelProp,
+        defaultValue: [],
+        onChange: onFilterChange
+    });
+    const [selectedRowIds, setSelectedRowIds] = useControllableState({
+        controlledValue: selectedRowIdsProp,
+        defaultValue: [],
+        onChange: onSelectionChange
+    });
+    // ───── Column visibility ─────
+    // Seed default hidden set from `defaultHidden` flag on columns.
+    // Memoized to avoid the seed shifting on every render — the
+    // controllable state keeps internal state stable thereafter.
+    const defaultHiddenColumns = useMemo(()=>cols.filter((c)=>c.defaultHidden === true).map((c)=>c.field), [
+        cols
+    ]);
+    const [hiddenColumns, setHiddenColumns] = useControllableState({
+        controlledValue: hiddenColumnsProp,
+        defaultValue: defaultHiddenColumns,
+        onChange: onHiddenColumnsChange
+    });
+    // ───── Column widths (resize state) ─────
+    // Seed from any `col.width` declared statically. Internal state is
+    // applied only when the user actually starts dragging; until then
+    // we fall back to the static width from the column def.
+    const defaultColumnWidths = useMemo(()=>{
+        const map = {};
+        for (const c of cols){
+            if (typeof c.width === 'number') {
+                map[c.field] = c.width;
+            }
+        }
+        return map;
+    }, [
+        cols
+    ]);
+    const [columnWidths, setColumnWidths] = useControllableState({
+        controlledValue: columnWidthsProp,
+        defaultValue: defaultColumnWidths,
+        onChange: onColumnWidthsChange
+    });
+    const { startResize } = useColumnResize({
+        widths: columnWidths,
+        onChange: setColumnWidths
+    });
+    // ───── Column order (reorder state) ─────
+    const defaultColumnOrder = useMemo(()=>cols.map((c)=>c.field), [
+        cols
+    ]);
+    const [columnOrder, setColumnOrder] = useControllableState({
+        controlledValue: columnOrderProp,
+        defaultValue: defaultColumnOrder,
+        onChange: onColumnOrderChange
+    });
+    const reorderHandlers = useColumnReorder({
+        order: columnOrder,
+        onChange: setColumnOrder
+    });
+    // Apply the active order to the columns list. Cols not in the
+    // order array (e.g. newly-added columns at runtime) are appended
+    // in their original position from `cols`.
+    const orderedCols = useMemo(()=>{
+        if (!columnOrder || columnOrder.length === 0) return cols;
+        const byField = new Map(cols.map((c)=>[
+                c.field,
+                c
+            ]));
+        const seen = new Set();
+        const result = [];
+        for (const field of columnOrder){
+            const c = byField.get(field);
+            if (c) {
+                result.push(c);
+                seen.add(field);
+            }
+        }
+        for (const c of cols){
+            if (!seen.has(c.field)) result.push(c);
+        }
+        return result;
+    }, [
+        cols,
+        columnOrder
+    ]);
+    // ───── RBAC + visibility + reorder: derive final column list ─────
+    //  - `access.onUnauthorized === 'hide'` removes a column entirely.
+    //  - `hiddenColumns` is the user-toggled hidden set from the
+    //    column-visibility dialog.
+    //  - `orderedCols` is the user-reordered version of `cols`.
+    // NOTE: filtering happens on `orderedCols` so the active order is
+    // preserved through visibility changes.
+    const visibleCols = useMemo(()=>orderedCols.filter((col)=>{
+            if (col.access && col.access.onUnauthorized === 'hide') return false;
+            if (hiddenColumns.includes(col.field)) return false;
+            return true;
+        }), [
+        orderedCols,
+        hiddenColumns
+    ]);
+    // ───── 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 || enableColumnVisibility) && jsxs("div", {
+                className: cn(v.toolbar(), slotProps == null ? void 0 : (_slotProps_toolbar = slotProps.toolbar) == null ? void 0 : _slotProps_toolbar.className),
+                children: [
+                    enableSearch && 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')
+                            })
+                        ]
+                    }),
+                    enableColumnVisibility && jsx(ColumnVisibilityTrigger, {
+                        cols: cols.filter((c)=>// RBAC-hidden columns are never offered in the dialog.
+                            !c.access || c.access.onUnauthorized !== 'hide'),
+                        hiddenColumns: hiddenColumns,
+                        onChange: setHiddenColumns,
+                        disabled: !isInteractive,
+                        labels: {
+                            columnsButton: labels.columnsButton,
+                            columnsTitle: labels.columnsTitle,
+                            columnsDescription: labels.columnsDescription,
+                            columnsShowAll: labels.columnsShowAll,
+                            columnsHideAll: labels.columnsHideAll,
+                            columnsDone: labels.columnsDone
+                        }
+                    })
+                ]
+            }),
+            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),
+                                            filterModel: filterModel,
+                                            onFilterChange: setFilterModel,
+                                            effectiveWidth: resolveColumnWidth(col, columnWidths),
+                                            resizable: enableColumnResize && col.resizable !== false,
+                                            startResize: startResize,
+                                            reorderable: enableColumnReorder && col.reorderable !== false,
+                                            reorderHandlers: reorderHandlers,
+                                            labels: labels,
+                                            className: cn(v.headerCell(), col.sticky === 'left' && v.stickyLeftHeaderCell(), col.sticky === 'right' && v.stickyRightHeaderCell(), 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,
+                                columnWidths,
+                                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(),
+                                    stickyRightCell: v.stickyRightCell(),
+                                    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, filterModel, onFilterChange, effectiveWidth, resizable, startResize, reorderable, reorderHandlers, 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: effectiveWidth != null ? `${effectiveWidth}px` : undefined,
+        minWidth: col.minWidth != null ? `${col.minWidth}px` : undefined,
+        flex: effectiveWidth != null ? undefined : col.flex,
+        position: resizable || reorderable ? 'relative' : undefined
+    };
+    // Drop indicator for reorder: a 2px vertical bar at the LEFT or
+    // RIGHT edge of this th when it's the active drop target.
+    const dropTarget = reorderHandlers.dropTarget;
+    const dropIndicatorClass = dropTarget != null && dropTarget.field === col.field ? dropTarget.side === 'left' ? 'before:absolute before:top-0 before:bottom-0 before:left-0 before:w-0.5 before:bg-primary-500' : 'after:absolute after:top-0 after:bottom-0 after:right-0 after:w-0.5 after:bg-primary-500' : '';
+    const isDragging = reorderHandlers.draggingField === col.field;
+    // Drag attributes only attach when reorderable; we DO NOT make the
+    // entire th `draggable` if it isn't — keeps the keyboard focus
+    // behavior unchanged.
+    const dragAttrs = reorderable ? {
+        draggable: true,
+        onDragStart: reorderHandlers.dragStart(col.field),
+        onDragOver: reorderHandlers.dragOver(col.field),
+        onDrop: reorderHandlers.drop(col.field),
+        onDragEnd: reorderHandlers.dragEnd
+    } : {};
+    const resizeHandle = resizable ? jsx("span", {
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": `Resize ${typeof col.header === 'string' ? col.header : col.field}`,
+        onPointerDown: (e)=>{
+            var _ref, _col_minWidth, _col_maxWidth;
+            const handle = e.currentTarget;
+            const th = handle.parentElement;
+            const startWidth = (_ref = effectiveWidth != null ? effectiveWidth : th == null ? void 0 : th.getBoundingClientRect().width) != null ? _ref : 120;
+            const min = (_col_minWidth = col.minWidth) != null ? _col_minWidth : 40;
+            const max = (_col_maxWidth = col.maxWidth) != null ? _col_maxWidth : 1200;
+            startResize(col.field, startWidth, min, max)(e);
+        },
+        className: cn('absolute top-0 bottom-0 right-0 w-1.5', 'cursor-col-resize select-none touch-none', 'hover:bg-primary-300 active:bg-primary-400', 'transition-colors motion-reduce:transition-none')
+    }) : null;
+    const filterType = col.filterable ? resolveFilterType(col, inferredType) : null;
+    const filterTrigger = col.filterable && filterType ? jsx(ColumnFilterTrigger, {
+        field: col.field,
+        filterType: filterType,
+        filterModel: filterModel,
+        onFilterChange: onFilterChange,
+        disabled: disabled,
+        labels: {
+            filterColumn: labels.filterColumn,
+            filterApply: labels.filterApply,
+            filterClear: labels.filterClear,
+            filterMin: labels.filterMin,
+            filterMax: labels.filterMax,
+            filterFrom: labels.filterFrom,
+            filterTo: labels.filterTo,
+            filterAll: labels.filterAll,
+            filterTrue: labels.filterTrue,
+            filterFalse: labels.filterFalse
+        }
+    }) : null;
+    // Layout strategy:
+    //  - sortable only → sort button is the cell content
+    //  - filterable only → header text + filter trigger in a flex row
+    //  - both → sort button + filter trigger in a flex row
+    //  - neither → plain header text
+    const wrapperJustify = align === 'right' ? 'justify-end' : align === 'center' ? 'justify-center' : 'justify-start';
+    if (col.sortable) {
+        const sortButton = 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 jsxs("th", _extends({
+            scope: "col",
+            "aria-sort": ariaSort,
+            className: cn(className, alignClass, dropIndicatorClass, isDragging && 'opacity-50'),
+            style: cellStyle
+        }, dragAttrs, {
+            children: [
+                filterTrigger ? jsxs("div", {
+                    className: cn('flex items-center gap-1', wrapperJustify),
+                    children: [
+                        sortButton,
+                        filterTrigger
+                    ]
+                }) : sortButton,
+                resizeHandle
+            ]
+        }));
+    }
+    return jsxs("th", _extends({
+        scope: "col",
+        className: cn(className, alignClass, dropIndicatorClass, isDragging && 'opacity-50'),
+        style: cellStyle
+    }, dragAttrs, {
+        children: [
+            filterTrigger ? jsxs("div", {
+                className: cn('flex items-center gap-1', wrapperJustify),
+                children: [
+                    jsx("span", {
+                        children: headerContent
+                    }),
+                    filterTrigger
+                ]
+            }) : headerContent,
+            resizeHandle
+        ]
+    }));
+}
+/**
+ * Resolve the effective width (px) for a column. User-driven resize
+ * (`columnWidths[field]`) wins over the static `col.width`. Returns
+ * `undefined` if neither source has a width set — the consumer falls
+ * back to the column's `flex` value or browser auto-layout.
+ */ function resolveColumnWidth(col, columnWidths) {
+    const resized = columnWidths[col.field];
+    if (resized != null) return resized;
+    return col.width;
+}
+/**
+ * Resolve the filter UI type for a column. Explicit `col.filterType`
+ * wins; otherwise we map the auto-detected primitive type:
+ *  - `number` → number range
+ *  - `boolean` → true/false/all select
+ *  - `date` → date range
+ *  - anything else (string / unknown) → text contains
+ */ function resolveFilterType(col, inferred) {
+    if (col.filterType) return col.filterType;
+    switch(inferred){
+        case 'number':
+            return 'number';
+        case 'boolean':
+            return 'boolean';
+        case 'date':
+            return 'date';
+        default:
+            return 'text';
+    }
+}
+// ───── Virtualized body ─────
+function renderVirtualizedBody(args) {
+    const { vWindow, renderedRows, visibleCols, columnTypes, columnWidths, 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),
+                                effectiveWidth: resolveColumnWidth(col, columnWidths),
+                                cellClass: classes.cell,
+                                stickyLeftClass: classes.stickyLeftCell,
+                                stickyRightClass: classes.stickyRightCell
+                            }, 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, effectiveWidth, cellClass, stickyLeftClass, stickyRightClass } = 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, col.sticky === 'right' && stickyRightClass),
+        style: {
+            width: effectiveWidth != null ? `${effectiveWidth}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
  *
@@ -9420,6 +11342,6 @@ function RowActionMenuItem(props) {
  */ // ───── Components ─────
 /**
  * Package version (synced with `package.json` at publish time).
- */ const VERSION = '0.6.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, 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, 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 };
+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 };