@dashforge/tw 0.6.0-beta → 0.7.0-beta

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { useMemo, forwardRef, useContext, useId, useRef, useEffect, useCallback, useState, Fragment, createContext, Children, isValidElement, cloneElement } from 'react';
+import { useMemo, forwardRef, useContext, useId, useRef, useEffect, useCallback, useState, Fragment, createContext, Children, isValidElement, cloneElement, useLayoutEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -5292,8 +5292,12 @@ const SnackbarContext = /*#__PURE__*/ createContext(null);
             warning: 'text-warning-700 dark:text-warning-400',
             danger: 'text-danger-700 dark:text-danger-400',
             info: 'text-info-700 dark:text-info-400',
-            neutral: 'text-neutral-900 dark:text-neutral-100',
-            muted: 'text-neutral-600 dark:text-neutral-400'
+            // Neutral palette auto-inverts via the dashforgePreset() CSS-var
+            // swap — no `dark:` variants. `text-neutral-900` resolves to
+            // dark text in light mode and light text in dark mode; same
+            // applies to `text-neutral-600` (muted).
+            neutral: 'text-neutral-900',
+            muted: 'text-neutral-600'
         },
         /*
          * `weight` overrides the variant's default weight. When unset, the
@@ -5494,7 +5498,13 @@ Typography.displayName = 'Typography';
          */ variant: {
             plain: '',
             outlined: 'border',
-            elevated: 'bg-white dark:bg-neutral-900',
+            // `bg-white` is hardcoded (does NOT auto-invert via CSS vars),
+            // so the `dark:` variant is required. Target `dark:bg-neutral-100`
+            // resolves to `#171717` via the inversion → one elevation tier
+            // above the page surface (`bg-neutral-50` = `#0a0a0a`) in dark
+            // mode. `dark:bg-neutral-900` was wrong (resolved to near-white
+            // in dark mode — overpowering elevation).
+            elevated: 'bg-white dark:bg-neutral-100',
             soft: '',
             solid: ''
         },
@@ -5666,7 +5676,11 @@ Typography.displayName = 'Typography';
         {
             variant: 'outlined',
             color: 'neutral',
-            class: 'border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-900'
+            // border-neutral-200 auto-inverts via CSS var swap (no `dark:`
+            // needed). bg-white is hardcoded — `dark:bg-neutral-100` keeps
+            // elevation tier above page surface in dark mode (NOT
+            // `dark:bg-neutral-900` which renders near-white).
+            class: 'border-neutral-200 bg-white dark:bg-neutral-100'
         },
         // ─── soft × color ─────────────────────────────────────────────────
         {
@@ -5702,7 +5716,9 @@ Typography.displayName = 'Typography';
         {
             variant: 'soft',
             color: 'neutral',
-            class: 'bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
+            // Both neutral classes auto-invert via the dashforgePreset() CSS
+            // var swap — no `dark:` variants needed.
+            class: 'bg-neutral-100 text-neutral-900'
         },
         // ─── solid × color ────────────────────────────────────────────────
         {
@@ -5738,7 +5754,14 @@ Typography.displayName = 'Typography';
         {
             variant: 'solid',
             color: 'neutral',
-            class: 'bg-neutral-900 text-white dark:bg-neutral-100 dark:text-neutral-900'
+            // Solid neutral is the high-emphasis "always-foreground accent"
+            // variant. Both classes auto-invert: dark surface + light text
+            // in light mode (`#171717` / `#fafafa`) flips to light surface +
+            // dark text in dark mode (`#f5f5f5` / `#0a0a0a`). The
+            // accent inverts WITH the page surface — consistent with the
+            // identity rule. Previously used `text-white` (no auto-invert)
+            // which forced double-inversion to keep readable.
+            class: 'bg-neutral-900 text-neutral-50'
         }
     ],
     defaultVariants: {
@@ -6526,7 +6549,8 @@ Container.displayName = 'Container';
             dotted: 'border-dotted'
         },
         color: {
-            neutral: 'border-neutral-200 dark:border-neutral-800',
+            // Neutral palette auto-inverts via CSS-var swap (no `dark:`).
+            neutral: 'border-neutral-200',
             primary: 'border-primary-300 dark:border-primary-700',
             secondary: 'border-secondary-300 dark:border-secondary-700',
             success: 'border-success-300 dark:border-success-700',
@@ -6668,7 +6692,7 @@ Container.displayName = 'Container';
                 className: cn(lineCommon, leftStubClass)
             }),
             jsx("span", {
-                className: cn('shrink-0 text-sm text-neutral-500 dark:text-neutral-400', labelPadding),
+                className: cn('shrink-0 text-sm text-neutral-500', labelPadding),
                 children: children
             }),
             jsx("span", {
@@ -6821,21 +6845,25 @@ VisuallyHidden.displayName = 'VisuallyHidden';
         ],
         content: [
             'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',
-            'w-full bg-white dark:bg-neutral-900 rounded-lg shadow-xl',
-            'border border-neutral-200 dark:border-neutral-800',
+            // bg-white hardcoded (doesn't auto-invert) so `dark:` is needed.
+            // Target `dark:bg-neutral-100` = #171717 in dark mode (one
+            // elevation tier above page surface).
+            'w-full bg-white dark:bg-neutral-100 rounded-lg shadow-xl',
+            // border-neutral-200 auto-inverts — no `dark:` needed.
+            'border border-neutral-200',
             'p-6 flex flex-col gap-4 max-h-[90vh]',
             'focus:outline-none',
             'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
             'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
             'motion-reduce:transition-none motion-reduce:duration-0'
         ],
-        title: 'text-lg font-semibold leading-tight text-neutral-900 dark:text-neutral-50',
-        description: 'text-sm text-neutral-600 dark:text-neutral-400',
+        // All neutral text classes auto-invert via CSS-var swap.
+        title: 'text-lg font-semibold leading-tight text-neutral-900',
+        description: 'text-sm text-neutral-600',
         closeButton: [
             'absolute top-4 right-4 inline-flex items-center justify-center',
             'h-8 w-8 rounded-md text-neutral-500 hover:text-neutral-900',
-            'dark:text-neutral-400 dark:hover:text-neutral-50',
-            'hover:bg-neutral-100 dark:hover:bg-neutral-800',
+            'hover:bg-neutral-100',
             'focus:outline-none focus:ring-2 focus:ring-primary-500',
             'transition-colors'
         ],
@@ -6952,21 +6980,32 @@ const tabsVariants = tv({
     variants: {
         variant: {
             underline: {
-                list: 'border-b border-neutral-200 dark:border-neutral-800',
+                // Neutral palette auto-inverts via CSS-var swap.
+                list: 'border-b border-neutral-200',
                 trigger: [
-                    'px-3 py-2 border-b-2 border-transparent text-neutral-600 dark:text-neutral-400',
-                    'hover:text-neutral-900 dark:hover:text-neutral-50',
+                    'px-3 py-2 border-b-2 border-transparent text-neutral-600',
+                    'hover:text-neutral-900',
+                    // Primary palette does NOT auto-invert — `dark:` shift is
+                    // an intentional tone refinement (kept).
                     'data-[state=active]:border-primary-500 data-[state=active]:text-primary-700',
                     'dark:data-[state=active]:text-primary-400'
                 ]
             },
             pill: {
-                list: 'rounded-lg bg-neutral-100 dark:bg-neutral-800 p-1',
+                // Pill list bg uses the elevation tier — auto-inverts.
+                list: 'rounded-lg bg-neutral-100 p-1',
                 trigger: [
-                    'px-3 py-1.5 rounded-md text-neutral-600 dark:text-neutral-400',
-                    'hover:text-neutral-900 dark:hover:text-neutral-50',
-                    'data-[state=active]:bg-white dark:data-[state=active]:bg-neutral-900',
-                    'data-[state=active]:text-neutral-900 dark:data-[state=active]:text-neutral-50',
+                    'px-3 py-1.5 rounded-md text-neutral-600',
+                    'hover:text-neutral-900',
+                    // Active pill is one tier above the list bg
+                    // (`bg-neutral-100`-inverted = #171717 in dark).
+                    // `bg-white` is hardcoded so a `dark:` is required —
+                    // target `dark:bg-neutral-200` (= #262626 in dark) sits
+                    // ONE TIER above the list bg, preserving the elevation
+                    // semantic from light mode (where `bg-white` sits above
+                    // `bg-neutral-100` = #f5f5f5).
+                    'data-[state=active]:bg-white dark:data-[state=active]:bg-neutral-200',
+                    'data-[state=active]:text-neutral-900',
                     'data-[state=active]:shadow-sm'
                 ]
             }
@@ -7042,14 +7081,24 @@ const tooltipVariants = tv({
     slots: {
         content: [
             'z-50 max-w-xs rounded-md px-3 py-1.5 text-xs font-medium',
+            // Auto-invert via the dashforgePreset() CSS-var swap:
+            //  - Light mode: `bg-neutral-900` = #171717 (dark surface) +
+            //    `text-neutral-50` = #fafafa (light text) — DARK tooltip
+            //    on the light page (high contrast).
+            //  - Dark mode: `bg-neutral-900` flips to #f5f5f5 (light) +
+            //    `text-neutral-50` flips to #0a0a0a (dark text) — LIGHT
+            //    tooltip on the dark page (high contrast against page).
+            // Adding `dark:bg-neutral-50 dark:text-neutral-900` (the old
+            // pattern) would force the dark-mode tooltip back to a dark
+            // surface — invisible against the dark page.
             'bg-neutral-900 text-neutral-50',
-            'dark:bg-neutral-50 dark:text-neutral-900',
             'shadow-md',
             'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95',
             'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
             'motion-reduce:transition-none motion-reduce:duration-0'
         ],
-        arrow: 'fill-neutral-900 dark:fill-neutral-50'
+        // Arrow tracks the content bg — auto-inverts the same way.
+        arrow: 'fill-neutral-900'
     }
 });
 
@@ -7114,15 +7163,21 @@ const tooltipVariants = tv({
 const popoverVariants = tv({
     slots: {
         content: [
-            'z-50 rounded-md border border-neutral-200 dark:border-neutral-800',
-            'bg-white dark:bg-neutral-900 p-4 shadow-lg',
-            'text-sm text-neutral-900 dark:text-neutral-50',
+            // Neutral border auto-inverts via CSS-var swap.
+            'z-50 rounded-md border border-neutral-200',
+            // bg-white hardcoded (no auto-invert) so `dark:` is required.
+            // Target `dark:bg-neutral-100` resolves to #171717 in dark mode
+            // (one elevation tier above the page surface).
+            'bg-white dark:bg-neutral-100 p-4 shadow-lg',
+            // Text auto-inverts.
+            'text-sm text-neutral-900',
             'focus:outline-none',
             'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
             'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
             'motion-reduce:transition-none motion-reduce:duration-0'
         ],
-        arrow: 'fill-white dark:fill-neutral-900'
+        // Arrow follows content bg: `fill-white` in light + matching dark target.
+        arrow: 'fill-white dark:fill-neutral-100'
     }
 });
 
@@ -7173,11 +7228,13 @@ const popoverVariants = tv({
 const accordionVariants = tv({
     slots: {
         root: 'w-full',
-        item: 'border-b border-neutral-200 dark:border-neutral-800',
+        // Neutral palette auto-inverts via the dashforgePreset() CSS-var
+        // swap — no `dark:` variant needed (would double-invert).
+        item: 'border-b border-neutral-200',
         header: 'flex',
         trigger: [
             'flex flex-1 items-center justify-between py-3 text-left',
-            'text-sm font-medium text-neutral-900 dark:text-neutral-50',
+            'text-sm font-medium text-neutral-900',
             'transition-all hover:underline',
             'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:rounded',
             '[&[data-state=open]>svg]:rotate-180',
@@ -7185,7 +7242,7 @@ const accordionVariants = tv({
             'motion-reduce:transition-none'
         ],
         content: [
-            'overflow-hidden text-sm text-neutral-700 dark:text-neutral-300',
+            'overflow-hidden text-sm text-neutral-700',
             'data-[state=open]:animate-accordion-down',
             'data-[state=closed]:animate-accordion-up',
             'motion-reduce:animate-none'
@@ -7316,7 +7373,8 @@ const accordionVariants = tv({
     slots: {
         root: [
             'block',
-            'bg-neutral-200 dark:bg-neutral-800',
+            // Neutral palette auto-inverts via CSS-var swap (no `dark:`).
+            'bg-neutral-200',
             'motion-reduce:animate-none'
         ]
     },
@@ -7430,28 +7488,34 @@ const accordionVariants = tv({
  */ const paginationVariants = tv({
     slots: {
         root: 'flex flex-wrap items-center gap-3',
-        summary: 'text-neutral-600 dark:text-neutral-400',
+        // All neutral classes auto-invert via the dashforgePreset() CSS-var
+        // swap. `bg-neutral-50` provides the button surface (matches page
+        // surface; the border gives the separation). `hover:bg-neutral-100`
+        // is the one-tier elevation that works in both modes.
+        summary: 'text-neutral-600',
         list: 'inline-flex items-center gap-1',
         pageButton: [
             'inline-flex items-center justify-center rounded-md',
-            'border border-neutral-300 dark:border-neutral-700',
-            'bg-white dark:bg-neutral-900',
-            'text-neutral-700 dark:text-neutral-300',
-            'hover:bg-neutral-50 dark:hover:bg-neutral-800',
+            'border border-neutral-300',
+            'bg-neutral-50',
+            'text-neutral-700',
+            'hover:bg-neutral-100',
             'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
             'transition-colors motion-reduce:transition-none',
             'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none'
         ],
         activeButton: [
+            // Primary palette does NOT auto-invert — `dark:` shift is a
+            // design choice for tone refinement (kept).
             'bg-primary-500 text-white border-primary-500',
             'hover:bg-primary-600 dark:hover:bg-primary-400'
         ],
         navButton: [
             'inline-flex items-center justify-center rounded-md',
-            'border border-neutral-300 dark:border-neutral-700',
-            'bg-white dark:bg-neutral-900',
-            'text-neutral-700 dark:text-neutral-300',
-            'hover:bg-neutral-50 dark:hover:bg-neutral-800',
+            'border border-neutral-300',
+            'bg-neutral-50',
+            'text-neutral-700',
+            'hover:bg-neutral-100',
             'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
             'transition-colors motion-reduce:transition-none',
             'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none'
@@ -7459,12 +7523,12 @@ const accordionVariants = tv({
         ellipsis: 'inline-flex items-center justify-center text-neutral-500 px-1',
         pageSizeSelector: [
             'inline-flex items-center gap-2',
-            'text-neutral-700 dark:text-neutral-300'
+            'text-neutral-700'
         ],
         jumpInput: [
-            'rounded-md border border-neutral-300 dark:border-neutral-700',
-            'bg-white dark:bg-neutral-900',
-            'text-neutral-900 dark:text-neutral-50',
+            'rounded-md border border-neutral-300',
+            'bg-neutral-50',
+            'text-neutral-900',
             'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
             'transition-colors motion-reduce:transition-none'
         ]
@@ -7601,7 +7665,7 @@ function range(start, end) {
     }, (_, i)=>start + i);
 }
 
-const DEFAULT_LABELS$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
@@ -8510,7 +8576,7 @@ function inferType(value) {
     return col.monospace === true;
 }
 
-const DEFAULT_LABELS = {
+const DEFAULT_LABELS$1 = {
     searchPlaceholder: 'Search...',
     noData: 'No data',
     loading: 'Loading…',
@@ -8556,7 +8622,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 +8695,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 +8747,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 +8768,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 +8776,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 +8848,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 +8876,7 @@ function HeaderCell(props) {
                     jsx("span", {
                         children: headerContent
                     }),
-                    jsx(SortIcon, {
+                    jsx(SortIcon$1, {
                         direction: sortEntry == null ? void 0 : sortEntry.direction
                     })
                 ]
@@ -8858,7 +8924,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 +8951,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 +8976,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 +8987,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 +9041,7 @@ function renderLoadingRows(args) {
             ]
         }, `loading-${i}`));
 }
-function renderEmptyState(args) {
+function renderEmptyState$1(args) {
     var _args_emptyState;
     return jsx("tr", {
         children: jsx("td", {
@@ -8986,7 +9052,7 @@ function renderEmptyState(args) {
     });
 }
 // ───── Icons ─────
-function SortIcon(props) {
+function SortIcon$1(props) {
     return jsx("svg", {
         width: "0.75em",
         height: "0.75em",
@@ -9028,7 +9094,7 @@ function ChevronRightIcon() {
         })
     });
 }
-function SearchIcon(props) {
+function SearchIcon$1(props) {
     return jsxs("svg", {
         width: "0.875em",
         height: "0.875em",
@@ -9393,6 +9459,844 @@ 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',
+        paginationFooter: 'flex justify-end mt-3'
+    },
+    variants: {
+        variant: {
+            plain: {},
+            lines: {},
+            striped: {
+                row: 'odd:bg-neutral-100/60'
+            },
+            bordered: {
+                table: 'border border-neutral-200',
+                cell: 'border-r last:border-r-0 border-neutral-200',
+                headerCell: 'border-r last:border-r-0 border-neutral-200'
+            }
+        },
+        size: {
+            sm: {
+                headerCell: 'text-xs',
+                cell: 'text-xs',
+                search: 'text-xs'
+            },
+            md: {
+                headerCell: 'text-sm',
+                cell: 'text-sm',
+                search: 'text-sm'
+            },
+            lg: {
+                headerCell: 'text-base',
+                cell: 'text-base',
+                search: 'text-base'
+            }
+        },
+        density: {
+            compact: {
+                headerCell: 'px-2 py-1',
+                cell: 'px-2 py-1'
+            },
+            comfortable: {
+                headerCell: 'px-3 py-2',
+                cell: 'px-3 py-2'
+            },
+            spacious: {
+                headerCell: 'px-4 py-3',
+                cell: 'px-4 py-3'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'lines',
+        size: 'md',
+        density: 'comfortable'
+    }
+});
+
+/**
+ * Compute the visible window of rows + the spacer heights given the
+ * current scroll position. Pure function — exported for testability.
+ *
+ * @example
+ * ```ts
+ * computeWindow({ totalCount: 1000, rowHeight: 48, viewportHeight: 600,
+ *                 scrollTop: 0, overscan: 5 });
+ * // → { startIndex: 0, endIndex: 17, paddingTop: 0, paddingBottom: 47136 }
+ * ```
+ */ function computeWindow(args) {
+    const { totalCount, rowHeight, viewportHeight, scrollTop, overscan = 5 } = args;
+    if (totalCount <= 0 || rowHeight <= 0 || viewportHeight <= 0) {
+        return {
+            startIndex: 0,
+            endIndex: -1,
+            paddingTop: 0,
+            paddingBottom: 0
+        };
+    }
+    // Raw visible range from scrollTop alone.
+    const rawStart = Math.floor(scrollTop / rowHeight);
+    const rawEnd = Math.ceil((scrollTop + viewportHeight) / rowHeight);
+    // Apply overscan + clamp to [0, totalCount - 1].
+    const startIndex = Math.max(0, rawStart - overscan);
+    const endIndex = Math.min(totalCount - 1, rawEnd + overscan);
+    const paddingTop = startIndex * rowHeight;
+    const paddingBottom = Math.max(0, (totalCount - 1 - endIndex) * rowHeight);
+    return {
+        startIndex,
+        endIndex,
+        paddingTop,
+        paddingBottom
+    };
+}
+/**
+ * `useVirtualizer` — viewport-based row windowing for `<DataGrid>`.
+ *
+ * Hand-rolled (no `@tanstack/react-virtual` dep — constraint memorized
+ * in `feedback_dashforge_preset_is_identity` companion: "no new
+ * external runtime deps"). Uses scroll event + `requestAnimationFrame`
+ * debounce + `ResizeObserver` on the container. Fixed row height
+ * only in v1 — variable-height with measurement cache deferred to
+ * v1-bis.
+ *
+ * Returns:
+ *  - `scrollRef`: attach to the scroll container `<div>`.
+ *  - `window`: which row indices to mount + top/bottom spacer heights
+ *    to preserve scroll-area size.
+ *  - `viewportHeight`: current container height (re-measured on
+ *    `ResizeObserver` ticks).
+ *
+ * The DataGrid renders `rows.slice(window.startIndex, window.endIndex + 1)`
+ * between two spacer `<tr style={{ height: paddingTop }} />` elements
+ * (above and below). This preserves `<table>` semantics — screen
+ * readers see a continuous structure with `aria-hidden` spacers.
+ *
+ * @example
+ * ```tsx
+ * const { scrollRef, window } = useVirtualizer({
+ *   totalCount: rows.length,
+ *   rowHeight: 48,
+ *   overscan: 5,
+ * });
+ *
+ * return (
+ *   <div ref={scrollRef} style={{ height: 600, overflow: 'auto' }}>
+ *     <table>
+ *       <tbody>
+ *         <tr aria-hidden="true" style={{ height: window.paddingTop }} />
+ *         {rows.slice(window.startIndex, window.endIndex + 1).map(...)}
+ *         <tr aria-hidden="true" style={{ height: window.paddingBottom }} />
+ *       </tbody>
+ *     </table>
+ *   </div>
+ * );
+ * ```
+ */ function useVirtualizer(args) {
+    const { totalCount, rowHeight, overscan = 5, initialViewportHeight = 400 } = args;
+    const scrollRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [viewportHeight, setViewportHeight] = useState(initialViewportHeight);
+    // Debounce scroll handler via requestAnimationFrame so we never
+    // re-render more than once per paint frame even when the scroll
+    // event fires rapidly during fast scrolling.
+    const rafIdRef = useRef(null);
+    const handleScroll = useCallback(()=>{
+        if (rafIdRef.current != null) return;
+        rafIdRef.current = requestAnimationFrame(()=>{
+            rafIdRef.current = null;
+            const el = scrollRef.current;
+            if (!el) return;
+            setScrollTop(el.scrollTop);
+        });
+    }, []);
+    // Attach scroll listener.
+    useEffect(()=>{
+        const el = scrollRef.current;
+        if (!el) return;
+        el.addEventListener('scroll', handleScroll, {
+            passive: true
+        });
+        return ()=>{
+            el.removeEventListener('scroll', handleScroll);
+            if (rafIdRef.current != null) {
+                cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
+        };
+    }, [
+        handleScroll
+    ]);
+    // Track container viewport height via ResizeObserver — re-virtualize
+    // when the container size changes (window resize, sidebar collapse,
+    // etc.). Use `useLayoutEffect` so the first measurement happens
+    // before paint to avoid a flash of stale window.
+    //
+    // **Defensive**: only accept measurements > 0. jsdom (test env)
+    // returns `clientHeight === 0` for unmounted containers, which would
+    // collapse the window to empty. The hook keeps the
+    // `initialViewportHeight` fallback in that case.
+    useLayoutEffect(()=>{
+        const el = scrollRef.current;
+        if (!el) return;
+        if (el.clientHeight > 0) {
+            setViewportHeight(el.clientHeight);
+        }
+        if (typeof ResizeObserver === 'undefined') return;
+        const observer = new ResizeObserver((entries)=>{
+            const entry = entries[0];
+            if (!entry || entry.contentRect.height <= 0) return;
+            setViewportHeight(entry.contentRect.height);
+        });
+        observer.observe(el);
+        return ()=>observer.disconnect();
+    }, []);
+    const window = computeWindow({
+        totalCount,
+        rowHeight,
+        viewportHeight,
+        scrollTop,
+        overscan
+    });
+    return {
+        scrollRef,
+        window,
+        viewportHeight
+    };
+}
+
+const DEFAULT_LABELS = {
+    searchPlaceholder: 'Search...',
+    noData: 'No data',
+    loading: 'Loading…',
+    ariaSortNone: 'Not sorted. Click to sort ascending.',
+    ariaSortAscending: 'Sorted ascending. Click to sort descending.',
+    ariaSortDescending: 'Sorted descending. Click to clear sort.',
+    ariaSelectRow: 'Select row',
+    ariaSelectAllRows: 'Select all rows',
+    ariaExpandRow: 'Expand row',
+    ariaCollapseRow: 'Collapse row',
+    selectedCount: '{count} selected',
+    clearSelection: 'Clear selection',
+    filterColumn: 'Filter',
+    filterApply: 'Apply',
+    filterClear: 'Clear',
+    density: 'Density',
+    densityCompact: 'Compact',
+    densityComfortable: 'Comfortable',
+    densitySpacious: 'Spacious'
+};
+/**
+ * Dashforge TW `<DataGrid>` — virtualized data table.
+ *
+ * Companion to `<Table>` for large data sets (~500+ rows up to
+ * millions via virtualization). Same column model, sort/search/
+ * filter/selection logic (shared via `_shared/data/` helpers) —
+ * differs in render path: only the visible window of rows is mounted
+ * in DOM, with spacer `<tr>` above and below to preserve scrollbar
+ * size.
+ *
+ * Virtualization: hand-rolled (`useVirtualizer`) using
+ * `IntersectionObserver` + scroll-event + `requestAnimationFrame`
+ * debounce + `ResizeObserver`. Zero new runtime deps.
+ *
+ * Server-side mode (4 independent opt-in flags):
+ *  - `serverSideSort` — emits `onSortChange` but does NOT sort locally
+ *  - `serverSideFilter` — emits `onFilterChange` but does NOT filter
+ *  - `serverSideSearch` — emits `onSearchQueryChange` (debounced)
+ *  - `serverSidePagination` — `totalCount` prop sizes the virtual
+ *    scrollbar; `rows` is the page slice from the server
+ *
+ * Selection at scale: `selectAllScope`:
+ *  - `'allLoaded'` (default) — header checkbox toggles all rows in
+ *    `rows` prop
+ *  - `'visible'` — toggles only the current viewport window
+ */ function DataGrid(props) {
+    var _slotProps_root, _slotProps_toolbar, _slotProps_search, _slotProps_scroll, _slotProps_table, _slotProps_thead, _slotProps_headerRow, _slotProps_headerCell, _slotProps_selectionCell, _slotProps_headerCell1, _slotProps_tbody, _slotProps_row, _slotProps_cell, _slotProps_emptyState, _slotProps_row1, _slotProps_cell1, _slotProps_cell2, _slotProps_selectionCell1, _slotProps_cell3, _slotProps_rowActionsCell, _slotProps_bulkActionFooter, _slotProps_pagination;
+    const { rows, cols, getRowId, totalCount: totalCountProp, rowHeight, overscan = 5, height, sortModel: sortModelProp, onSortChange, defaultSortModel, serverSideSort = false, enableSearch = false, searchQuery: searchQueryProp, onSearchQueryChange, searchPlaceholder, searchDebounceMs = 200, serverSideSearch = false, filterModel: filterModelProp, onFilterChange, serverSideFilter = false, rowSelection = 'none', selectedRowIds: selectedRowIdsProp, onSelectionChange, bulkActions, selectAllScope = 'allLoaded', pagination, serverSidePagination = false, rowActions, loading = false, loadingRowCount = 8, emptyState, stickyHeader = true, caption, showCaption = false, access: gridAccess, labels: labelsProp, variant, size, density, sx, slotProps } = props;
+    const labels = _extends({}, DEFAULT_LABELS, labelsProp);
+    const gridAccessState = useAccessState(gridAccess);
+    // ───── Controllable state ─────
+    const [sortModel, setSortModel] = useControllableState({
+        controlledValue: sortModelProp,
+        defaultValue: defaultSortModel != null ? defaultSortModel : [],
+        onChange: onSortChange
+    });
+    const [searchQuery, setSearchQuery] = useControllableState({
+        controlledValue: searchQueryProp,
+        defaultValue: '',
+        onChange: onSearchQueryChange
+    });
+    const filterModel = filterModelProp != null ? filterModelProp : [];
+    const [selectedRowIds, setSelectedRowIds] = useControllableState({
+        controlledValue: selectedRowIdsProp,
+        defaultValue: [],
+        onChange: onSelectionChange
+    });
+    // ───── RBAC: filter columns ─────
+    const visibleCols = useMemo(()=>cols.filter((col)=>!col.access || col.access.onUnauthorized !== 'hide'), [
+        cols
+    ]);
+    // ───── Smart-default column types ─────
+    const columnTypes = useColumnAutoDetect(rows, visibleCols);
+    // ───── Pipeline: search → filter → sort (skip when server-side) ─────
+    //
+    // Each pipeline hook is ALWAYS called (React hooks rules). The
+    // server-side flags decide whether to use the local-computed result
+    // or pass the upstream rows through unchanged. The hooks are
+    // `useMemo`-based internally so they're cheap when their inputs
+    // are unchanged.
+    const debouncedSearchQuery = useDebouncedValue(searchQuery, searchDebounceMs);
+    const localSearched = useTableSearch(rows, visibleCols, debouncedSearchQuery);
+    const searchedRows = serverSideSearch ? rows : localSearched;
+    const localFiltered = useTableFilter(searchedRows, filterModel);
+    const filteredRows = serverSideFilter ? searchedRows : localFiltered;
+    const localSorted = useTableSort(filteredRows, visibleCols, sortModel);
+    const sortedRows = serverSideSort ? filteredRows : localSorted;
+    // ───── Virtualization ─────
+    // Effective row count for the virtual scrollbar:
+    // - Client-side: actual sorted rows count
+    // - Server-side pagination: caller-provided totalCount
+    const effectiveTotalCount = serverSidePagination ? totalCountProp != null ? totalCountProp : sortedRows.length : sortedRows.length;
+    const initialViewportHeight = height ? parseInt(height, 10) || 400 : 400;
+    const { scrollRef, window: vWindow } = useVirtualizer({
+        totalCount: effectiveTotalCount,
+        rowHeight,
+        overscan,
+        initialViewportHeight
+    });
+    // The rows actually mounted in DOM.
+    const renderedRows = useMemo(()=>{
+        if (serverSidePagination) {
+            // In server-side pagination, `rows` IS the page slice; we
+            // render all of it (virtualization within the page is still
+            // useful for very large page sizes).
+            return rows.slice(vWindow.startIndex, vWindow.endIndex + 1);
+        }
+        return sortedRows.slice(vWindow.startIndex, vWindow.endIndex + 1);
+    }, [
+        serverSidePagination,
+        rows,
+        sortedRows,
+        vWindow.startIndex,
+        vWindow.endIndex
+    ]);
+    // ───── Selection helpers ─────
+    // For `selectAllScope='visible'`, the select-all scope is the
+    // current window. For `'allLoaded'`, it's the whole sorted set.
+    const selectAllPool = useMemo(()=>{
+        if (selectAllScope === 'visible') {
+            return renderedRows.map((row, idx)=>getRowId(row, vWindow.startIndex + idx));
+        }
+        return sortedRows.map((row, idx)=>getRowId(row, idx));
+    }, [
+        selectAllScope,
+        renderedRows,
+        sortedRows,
+        getRowId,
+        vWindow.startIndex
+    ]);
+    const selection = useTableSelection(rowSelection, selectedRowIds, setSelectedRowIds);
+    const selectedRows = useMemo(()=>sortedRows.filter((row, idx)=>selection.isSelected(getRowId(row, idx))), [
+        sortedRows,
+        selection,
+        getRowId
+    ]);
+    // ───── Variant recipe ─────
+    const v = dataGridVariants({
+        variant,
+        size,
+        density
+    });
+    // ───── Render ─────
+    if (!gridAccessState.visible) return null;
+    const isInteractive = !gridAccessState.disabled;
+    const showSelectionColumn = rowSelection !== 'none';
+    const showRowActionsColumn = rowActions != null;
+    const totalColumnCount = visibleCols.length + (showSelectionColumn ? 1 : 0) + (showRowActionsColumn ? 1 : 0);
+    return jsxs("div", {
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        "data-disabled": !isInteractive ? 'true' : undefined,
+        children: [
+            enableSearch && jsx("div", {
+                className: cn(v.toolbar(), slotProps == null ? void 0 : (_slotProps_toolbar = slotProps.toolbar) == null ? void 0 : _slotProps_toolbar.className),
+                children: jsxs("label", {
+                    className: cn(v.search(), slotProps == null ? void 0 : (_slotProps_search = slotProps.search) == null ? void 0 : _slotProps_search.className),
+                    children: [
+                        jsx("span", {
+                            className: "sr-only",
+                            children: labels.searchPlaceholder
+                        }),
+                        jsx(SearchIcon, {
+                            className: "ml-2 shrink-0 text-neutral-500"
+                        }),
+                        jsx("input", {
+                            type: "text",
+                            value: searchQuery,
+                            onChange: (e)=>setSearchQuery(e.target.value),
+                            placeholder: searchPlaceholder != null ? searchPlaceholder : labels.searchPlaceholder,
+                            disabled: !isInteractive,
+                            className: cn('flex-1 bg-transparent border-0 outline-none', 'px-2 py-1.5', 'placeholder:text-neutral-400', 'disabled:opacity-50 disabled:cursor-not-allowed')
+                        })
+                    ]
+                })
+            }),
+            jsx("div", {
+                ref: scrollRef,
+                className: cn(v.scroll(), slotProps == null ? void 0 : (_slotProps_scroll = slotProps.scroll) == null ? void 0 : _slotProps_scroll.className),
+                style: height ? {
+                    height,
+                    maxHeight: height
+                } : undefined,
+                children: jsxs("table", {
+                    className: cn(v.table(), slotProps == null ? void 0 : (_slotProps_table = slotProps.table) == null ? void 0 : _slotProps_table.className),
+                    children: [
+                        caption != null && jsx("caption", {
+                            className: cn(!showCaption && 'sr-only', 'py-2 text-sm text-neutral-500'),
+                            children: caption
+                        }),
+                        jsx("thead", {
+                            className: cn(stickyHeader ? v.thead() : 'bg-neutral-50', slotProps == null ? void 0 : (_slotProps_thead = slotProps.thead) == null ? void 0 : _slotProps_thead.className),
+                            children: jsxs("tr", {
+                                className: cn(v.headerRow(), slotProps == null ? void 0 : (_slotProps_headerRow = slotProps.headerRow) == null ? void 0 : _slotProps_headerRow.className),
+                                children: [
+                                    showSelectionColumn && jsx("th", {
+                                        scope: "col",
+                                        className: cn(v.headerCell(), v.selectionCell(), v.stickyLeftHeaderCell(), slotProps == null ? void 0 : (_slotProps_headerCell = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell.className, slotProps == null ? void 0 : (_slotProps_selectionCell = slotProps.selectionCell) == null ? void 0 : _slotProps_selectionCell.className),
+                                        children: rowSelection === 'multiple' && jsx("input", {
+                                            type: "checkbox",
+                                            "aria-label": labels.ariaSelectAllRows,
+                                            checked: selection.isAllSelected(selectAllPool),
+                                            ref: (el)=>{
+                                                if (el) el.indeterminate = selection.isIndeterminate(selectAllPool);
+                                            },
+                                            onChange: ()=>selection.toggleAll(selectAllPool),
+                                            disabled: !isInteractive,
+                                            className: "cursor-pointer"
+                                        })
+                                    }),
+                                    visibleCols.map((col)=>{
+                                        var _slotProps_headerCell;
+                                        return jsx(HeaderCell, {
+                                            col: col,
+                                            sortModel: sortModel,
+                                            onSortClick: (e)=>handleSortClick(col, e, sortModel, setSortModel),
+                                            inferredType: columnTypes.get(col.field),
+                                            labels: labels,
+                                            className: cn(v.headerCell(), col.sticky === 'left' && v.stickyLeftHeaderCell(), slotProps == null ? void 0 : (_slotProps_headerCell = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell.className),
+                                            buttonClassName: v.headerCellButton(),
+                                            disabled: !isInteractive
+                                        }, col.field);
+                                    }),
+                                    showRowActionsColumn && jsx("th", {
+                                        scope: "col",
+                                        "aria-hidden": "true",
+                                        className: cn(v.headerCell(), 'w-12', slotProps == null ? void 0 : (_slotProps_headerCell1 = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell1.className)
+                                    })
+                                ]
+                            })
+                        }),
+                        jsx("tbody", {
+                            className: cn(v.tbody(), slotProps == null ? void 0 : (_slotProps_tbody = slotProps.tbody) == null ? void 0 : _slotProps_tbody.className),
+                            children: loading ? renderLoadingRows({
+                                count: loadingRowCount,
+                                visibleCols,
+                                showSelectionColumn,
+                                showRowActionsColumn,
+                                rowHeight,
+                                rowClass: cn(v.row(), slotProps == null ? void 0 : (_slotProps_row = slotProps.row) == null ? void 0 : _slotProps_row.className),
+                                cellClass: cn(v.cell(), slotProps == null ? void 0 : (_slotProps_cell = slotProps.cell) == null ? void 0 : _slotProps_cell.className)
+                            }) : sortedRows.length === 0 ? renderEmptyState({
+                                totalColumnCount,
+                                emptyState,
+                                fallback: labels.noData,
+                                cellClass: cn(v.cell(), v.emptyState(), slotProps == null ? void 0 : (_slotProps_emptyState = slotProps.emptyState) == null ? void 0 : _slotProps_emptyState.className)
+                            }) : renderVirtualizedBody({
+                                vWindow,
+                                renderedRows,
+                                visibleCols,
+                                columnTypes,
+                                selection,
+                                rowSelection,
+                                showSelectionColumn,
+                                showRowActionsColumn,
+                                rowActions,
+                                getRowId,
+                                isInteractive,
+                                labels,
+                                classes: {
+                                    row: cn(v.row(), slotProps == null ? void 0 : (_slotProps_row1 = slotProps.row) == null ? void 0 : _slotProps_row1.className),
+                                    cell: cn(v.cell(), slotProps == null ? void 0 : (_slotProps_cell1 = slotProps.cell) == null ? void 0 : _slotProps_cell1.className),
+                                    selectionCell: cn(v.cell(), v.selectionCell(), v.stickyLeftCell(), slotProps == null ? void 0 : (_slotProps_cell2 = slotProps.cell) == null ? void 0 : _slotProps_cell2.className, slotProps == null ? void 0 : (_slotProps_selectionCell1 = slotProps.selectionCell) == null ? void 0 : _slotProps_selectionCell1.className),
+                                    stickyLeftCell: v.stickyLeftCell(),
+                                    rowActionsCell: cn(v.cell(), v.rowActionsCell(), slotProps == null ? void 0 : (_slotProps_cell3 = slotProps.cell) == null ? void 0 : _slotProps_cell3.className, slotProps == null ? void 0 : (_slotProps_rowActionsCell = slotProps.rowActionsCell) == null ? void 0 : _slotProps_rowActionsCell.className)
+                                }
+                            })
+                        })
+                    ]
+                })
+            }),
+            bulkActions && selectedRows.length > 0 && jsxs("div", {
+                className: cn(v.bulkActionFooter(), slotProps == null ? void 0 : (_slotProps_bulkActionFooter = slotProps.bulkActionFooter) == null ? void 0 : _slotProps_bulkActionFooter.className),
+                role: "region",
+                "aria-label": labels.selectedCount.replace('{count}', String(selectedRows.length)),
+                children: [
+                    jsx("span", {
+                        className: "text-sm text-neutral-700",
+                        children: labels.selectedCount.replace('{count}', String(selectedRows.length))
+                    }),
+                    jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            bulkActions(selectedRows),
+                            jsx("button", {
+                                type: "button",
+                                onClick: selection.clearSelection,
+                                className: cn('text-sm text-neutral-500 hover:text-neutral-900', 'underline-offset-2 hover:underline', 'focus:outline-none focus-visible:underline'),
+                                children: labels.clearSelection
+                            })
+                        ]
+                    })
+                ]
+            }),
+            pagination && jsx("div", {
+                className: cn(v.paginationFooter(), slotProps == null ? void 0 : (_slotProps_pagination = slotProps.pagination) == null ? void 0 : _slotProps_pagination.className),
+                children: jsx(Pagination, {
+                    page: pagination.page,
+                    pageSize: pagination.pageSize,
+                    totalCount: totalCountProp != null ? totalCountProp : sortedRows.length,
+                    onPageChange: pagination.onPageChange,
+                    onPageSizeChange: pagination.onPageSizeChange,
+                    pageSizeOptions: pagination.pageSizeOptions
+                })
+            })
+        ]
+    });
+}
+// ───── Header cell ─────
+function HeaderCell(props) {
+    const { col, sortModel, onSortClick, inferredType, labels, className, buttonClassName, disabled } = props;
+    const align = resolveAlign(col, inferredType);
+    const alignClass = align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
+    const sortEntry = sortModel.find((s)=>s.field === col.field);
+    const ariaSort = (sortEntry == null ? void 0 : sortEntry.direction) === 'asc' ? 'ascending' : (sortEntry == null ? void 0 : sortEntry.direction) === 'desc' ? 'descending' : 'none';
+    const headerContent = typeof col.header === 'function' ? col.header() : col.header;
+    const cellStyle = {
+        width: col.width != null ? `${col.width}px` : undefined,
+        minWidth: col.minWidth != null ? `${col.minWidth}px` : undefined,
+        flex: col.flex
+    };
+    if (col.sortable) {
+        return jsx("th", {
+            scope: "col",
+            "aria-sort": ariaSort,
+            className: cn(className, alignClass),
+            style: cellStyle,
+            children: jsxs("button", {
+                type: "button",
+                onClick: onSortClick,
+                disabled: disabled,
+                "aria-label": ariaSort === 'ascending' ? labels.ariaSortAscending : ariaSort === 'descending' ? labels.ariaSortDescending : labels.ariaSortNone,
+                className: cn(buttonClassName, align === 'right' && 'flex-row-reverse', 'disabled:cursor-not-allowed disabled:opacity-50'),
+                children: [
+                    jsx("span", {
+                        children: headerContent
+                    }),
+                    jsx(SortIcon, {
+                        direction: sortEntry == null ? void 0 : sortEntry.direction
+                    })
+                ]
+            })
+        });
+    }
+    return jsx("th", {
+        scope: "col",
+        className: cn(className, alignClass),
+        style: cellStyle,
+        children: headerContent
+    });
+}
+// ───── Virtualized body ─────
+function renderVirtualizedBody(args) {
+    const { vWindow, renderedRows, visibleCols, columnTypes, selection, rowSelection, showSelectionColumn, showRowActionsColumn, rowActions, getRowId, isInteractive, labels, classes } = args;
+    return jsxs(Fragment$1, {
+        children: [
+            vWindow.paddingTop > 0 && jsx("tr", {
+                "aria-hidden": "true",
+                style: {
+                    height: vWindow.paddingTop
+                }
+            }),
+            renderedRows.map((row, localIdx)=>{
+                const absoluteIdx = vWindow.startIndex + localIdx;
+                const rowId = getRowId(row, absoluteIdx);
+                const isSelected = selection.isSelected(rowId);
+                return jsxs("tr", {
+                    "data-selected": isSelected ? 'true' : 'false',
+                    "aria-selected": rowSelection !== 'none' ? isSelected : undefined,
+                    className: classes.row,
+                    children: [
+                        showSelectionColumn && jsx("td", {
+                            className: classes.selectionCell,
+                            children: jsx("input", {
+                                type: "checkbox",
+                                "aria-label": labels.ariaSelectRow,
+                                checked: isSelected,
+                                onChange: ()=>selection.toggleRow(rowId),
+                                disabled: !isInteractive,
+                                className: "cursor-pointer"
+                            })
+                        }),
+                        visibleCols.map((col)=>jsx(DataCell, {
+                                col: col,
+                                row: row,
+                                rowIndex: absoluteIdx,
+                                isSelected: isSelected,
+                                inferredType: columnTypes.get(col.field),
+                                cellClass: classes.cell,
+                                stickyLeftClass: classes.stickyLeftCell
+                            }, col.field)),
+                        showRowActionsColumn && rowActions && jsx("td", {
+                            className: classes.rowActionsCell,
+                            children: rowActions(row)
+                        })
+                    ]
+                }, rowId);
+            }),
+            vWindow.paddingBottom > 0 && jsx("tr", {
+                "aria-hidden": "true",
+                style: {
+                    height: vWindow.paddingBottom
+                }
+            })
+        ]
+    });
+}
+// ───── Data cell ─────
+function DataCell(props) {
+    const { col, row, rowIndex, isSelected, inferredType, cellClass, stickyLeftClass } = props;
+    const value = getNestedValue(row, col.field);
+    const align = resolveAlign(col, inferredType);
+    const tabularNums = resolveTabularNums(col, inferredType);
+    const monospace = resolveMonospace(col);
+    const alignClass = align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
+    const columnAccessState = col.access ? {
+        hidden: col.access.onUnauthorized === 'hide',
+        disabled: col.access.onUnauthorized === 'disable',
+        readonly: col.access.onUnauthorized === 'readonly'
+    } : null;
+    const content = col.cellRenderer ? col.cellRenderer({
+        row,
+        value,
+        rowIndex,
+        isSelected,
+        isExpanded: false,
+        access: columnAccessState
+    }) : renderDefaultCell(value);
+    return jsx("td", {
+        className: cn(cellClass, alignClass, tabularNums && 'tabular-nums', monospace && 'font-mono', col.sticky === 'left' && stickyLeftClass),
+        style: {
+            width: col.width != null ? `${col.width}px` : undefined,
+            minWidth: col.minWidth != null ? `${col.minWidth}px` : undefined
+        },
+        children: content
+    });
+}
+// ───── Helpers ─────
+function renderDefaultCell(value) {
+    if (value == null) return null;
+    if (typeof value === 'boolean') return value ? '✓' : '✗';
+    if (value instanceof Date) return value.toISOString().slice(0, 10);
+    if (typeof value === 'object') return JSON.stringify(value);
+    return value;
+}
+function handleSortClick(col, event, current, setSortModel) {
+    if (!col.sortable) return;
+    const multi = event.shiftKey;
+    setSortModel((prev)=>cycleSortFor(prev, col.field, multi));
+}
+function renderLoadingRows(args) {
+    const { count, visibleCols, showSelectionColumn, showRowActionsColumn, rowHeight, rowClass, cellClass } = args;
+    return Array.from({
+        length: count
+    }).map((_, i)=>jsxs("tr", {
+            className: rowClass,
+            "aria-busy": "true",
+            style: {
+                height: rowHeight
+            },
+            children: [
+                showSelectionColumn && jsx("td", {
+                    className: cellClass,
+                    children: jsx(Skeleton, {
+                        variant: "rectangle",
+                        width: "16px",
+                        height: "16px"
+                    })
+                }),
+                visibleCols.map((col)=>jsx("td", {
+                        className: cellClass,
+                        children: jsx(Skeleton, {
+                            variant: "text",
+                            width: "80%"
+                        })
+                    }, col.field)),
+                showRowActionsColumn && jsx("td", {
+                    className: cellClass,
+                    children: jsx(Skeleton, {
+                        variant: "rectangle",
+                        width: "24px",
+                        height: "24px"
+                    })
+                })
+            ]
+        }, `loading-${i}`));
+}
+function renderEmptyState(args) {
+    var _args_emptyState;
+    return jsx("tr", {
+        children: jsx("td", {
+            colSpan: args.totalColumnCount,
+            className: args.cellClass,
+            children: (_args_emptyState = args.emptyState) != null ? _args_emptyState : args.fallback
+        })
+    });
+}
+// ───── Icons ─────
+function SortIcon(props) {
+    return jsx("svg", {
+        width: "0.75em",
+        height: "0.75em",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        className: "shrink-0 opacity-60 group-hover:opacity-100",
+        children: props.direction === 'asc' ? jsx("path", {
+            d: "M8 4l4 6H4z"
+        }) : props.direction === 'desc' ? jsx("path", {
+            d: "M8 12L4 6h8z"
+        }) : jsxs(Fragment$1, {
+            children: [
+                jsx("path", {
+                    d: "M8 3l3 4H5z",
+                    opacity: "0.5"
+                }),
+                jsx("path", {
+                    d: "M8 13l-3-4h6z",
+                    opacity: "0.5"
+                })
+            ]
+        })
+    });
+}
+function SearchIcon(props) {
+    return jsxs("svg", {
+        width: "0.875em",
+        height: "0.875em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        className: props.className,
+        children: [
+            jsx("circle", {
+                cx: "7",
+                cy: "7",
+                r: "4.5"
+            }),
+            jsx("path", {
+                d: "M11 11l3 3"
+            })
+        ]
+    });
+}
+
 /**
  * @dashforge/tw
  *
@@ -9420,6 +10324,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 };