cursedbelt 5.32.0 → 5.34.0

package/dist/react/components/DataTable/DataTable.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { Fragment, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useVirtualizer, useWindowVirtualizer } from '@tanstack/react-virtual';
+import { Fragment, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useResizeObserver } from '../../hooks/useResizeObserver.js';
 import { useScrollEdgeFade } from '../../hooks/useScrollEdgeFade.js';
 import { useRememberedPreference } from '../../media-gallery/rememberedPreference.js';
 import { cn } from '../../lib/cn.js';
@@ -19,6 +20,7 @@ import { preloadRowMenu, RowActions } from './RowActions.js';
 import { writeRowDrag } from './rowDrag.js';
 import { SortHeader } from './SortHeader.js';
 import { resolveColumnAlign, SELECT_COLUMN_ID } from './types.js';
+import { AUTO_TRACK_FLOOR_PX, columnFloor, columnsDroppedForWidth } from './columnPriority.js';
 import { lazyPart } from './lazyPart.js';
 // 🔴 The toolbar and the pager load only when a table DRAWS them (forge task 2309).
 // Between them they reach Radix's Select, Menu and Popover — ~20 kB gzip that a
@@ -105,7 +107,7 @@ function chainUpdaterResettingPage(set, setPagination, notify) {
  * zero — this is the share below which the division stops and the table
  * overflows its wrapper instead.
  */
-export const AUTO_TRACK_FLOOR_PX = 120;
+export { AUTO_TRACK_FLOOR_PX };
 /** The trailing row-actions column is a fixed `w-20`. */
 const ACTIONS_TRACK_PX = 80;
 /** The leading row-selection column is a fixed `w-11` (44px — a full tap target). */
@@ -150,13 +152,7 @@ const SELECT_TRACK_PX = 44;
  * spec here can see it.
  */
 export function declaredTrackFloor(columns, hasActions = false) {
-    const columnsTotal = columns.reduce((sum, col) => {
-        if (col.minWidth != null)
-            return sum + col.minWidth;
-        if (typeof col.width === 'number')
-            return sum + col.width;
-        return sum + AUTO_TRACK_FLOOR_PX;
-    }, 0);
+    const columnsTotal = columns.reduce((sum, col) => sum + columnFloor(col), 0);
     return columnsTotal + (hasActions ? ACTIONS_TRACK_PX : 0);
 }
 /**
@@ -227,6 +223,9 @@ const HIDE_BELOW_CLASS = {
     md: '@max-4xl:w-0! @max-4xl:min-w-0! @max-4xl:p-0! @max-4xl:border-0 @max-4xl:[&>*]:hidden',
     lg: '@max-6xl:w-0! @max-6xl:min-w-0! @max-6xl:p-0! @max-6xl:border-0 @max-6xl:[&>*]:hidden',
 };
+/** `ColDef.priority`'s collapse — {@link HIDE_BELOW_CLASS}'s, unconditional, for the same reason. */
+const COLLAPSED_CLASS = 'w-0! min-w-0! p-0! border-0 [&>*]:hidden';
+const NOTHING_DROPPED = new Set();
 /**
  * The table's own props for a row, with the caller's `getRowProps` merged on top: classes join,
  * styles spread, and a handler both set runs the table's first, then the caller's.
@@ -273,7 +272,7 @@ function isEmptyCellValue(v) {
  * full-width accordion detail row that never breaks column alignment, and an automatic
  * stacked-card layout under `sm` so phones are never handed a clipped grid.
  */
-export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRowDelete, rowMenu, loading, emptyState, toolbar, pageSize = 50, pageSizeOptions, hidePagination, caption, className, stickyHeader, stickyFirstColumn, renderExpanded, expandedRowId, rowClassName, hideEmptyColumns, fixedLayout, minTableWidth, scrollBody, virtualize, serverWindow, handleRef, scrollClassName, mobileCards = true, serverSide, pageCount, rowCount, onSortingChange, onColumnFiltersChange, onGlobalFilterChange, onPaginationChange, defaultSort, sorting: sortingProp, enableSortingRemoval = true, sortDisabledReason, density = 'comfortable', viewMode, onViewModeChange, cardMinWidth, searchable = true, searchPlaceholder, toolbarOptions, multiSort = true, filterQuery: filterQueryProp, onFilterQueryChange, getRowDrag, dragSourceId, selectedIds, onSelectionChange, isRowSelectable, unselectableReason, selectionLabel, selectionSummary, selectAll, getRowProps, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, columnsPersistKey, }) {
+export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRowDelete, rowMenu, rowMenuLabel, loading, emptyState, toolbar, pageSize = 50, pageSizeOptions, hidePagination, caption, className, stickyHeader, stickyFirstColumn, renderExpanded, expandedRowId, rowClassName, hideEmptyColumns, fixedLayout, minTableWidth, scrollBody, virtualize, serverWindow, handleRef, scrollClassName, mobileCards = true, serverSide, pageCount, rowCount, onSortingChange, onColumnFiltersChange, onGlobalFilterChange, onPaginationChange, defaultSort, sorting: sortingProp, enableSortingRemoval = true, sortDisabledReason, density = 'comfortable', viewMode, onViewModeChange, cardMinWidth, searchable = true, searchPlaceholder, toolbarOptions, multiSort = true, filterQuery: filterQueryProp, onFilterQueryChange, getRowDrag, dragSourceId, selectedIds, onSelectionChange, isRowSelectable, unselectableReason, selectionLabel, selectionSummary, selectAll, getRowProps, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, columnsPersistKey, }) {
     // Vertical cell padding for the wide grid tier — the one lever the density knob
     // pulls (headers + body cells stay aligned by sharing it).
     const cellPadY = density === 'compact' ? 'py-1.5' : 'py-2.5';
@@ -469,7 +468,8 @@ export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRo
      */
     const virtualOptions = virtualize === true || (serverWindow && !virtualize) ? {} : virtualize || null;
     const virtualEnabled = virtualOptions !== null;
-    const bodyScrolls = scrollBody || virtualEnabled;
+    const windowScroll = virtualEnabled && virtualOptions?.scroll === 'window' && !serverWindow;
+    const bodyScrolls = scrollBody || (virtualEnabled && !windowScroll);
     const paginationHidden = hidePagination || virtualEnabled;
     const selectionEnabled = selectedIds !== undefined;
     /** The checkbox column is ON and not hidden through the Columns menu. Hiding it hides the
@@ -584,6 +584,24 @@ export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRo
         : null;
     const estimateRowHeight = fixedRowHeight ?? virtualOptions?.estimateRowHeight ?? (density === 'compact' ? 36 : 44);
     const scrollRef = useRef(null);
+    const outerRef = useRef(null);
+    /**
+     * 🔴 The width tier ON SCREEN, read in JS so a virtualized table windows the ONE tier the
+     * reader sees and mounts no rows at all in the two that `display: none` hides. Until forge
+     * task 2404 `virtualize` windowed only the grid, and the phone cards and the tablet list each
+     * mounted EVERY row at every width — 5,000 rows put ~10,000 extra nodes on a phone, with every
+     * virtualization gate green because each one passed `mobileCards={false}`. A table that does
+     * not virtualize still renders all three tiers and lets the container query pick, as before.
+     */
+    const narrowTiers = virtualEnabled && mobileCards && viewMode !== 'card';
+    const [tier, setTier] = useState('grid');
+    const activeTier = narrowTiers ? tier : 'grid';
+    /** A narrow tier's row is a card or a two-line list row, nothing like the grid's height.
+     *  Only a seed: every rendered row is measured. */
+    const rowEstimate = activeTier === 'cards' ? CARD_ESTIMATE_PX : activeTier === 'list' ? LIST_ESTIMATE_PX : estimateRowHeight;
+    /** A {@link serverWindow}'s fixed height is the GRID row's. A card cannot be held to it, so
+     *  the narrow tiers measure — see {@link fixedRowHeight}. */
+    const fixedHeight = activeTier === 'grid' ? fixedRowHeight : null;
     /** Rows before the loaded window, and the size of the whole result set — both 0/`rows.length`
      *  without a {@link serverWindow}, which makes every index below the same number as before. */
     const windowStart = serverWindow ? Math.max(0, serverWindow.start) : 0;
@@ -603,10 +621,11 @@ export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRo
         if (settleRef.current)
             clearTimeout(settleRef.current);
     }, []);
-    const rowVirtualizer = useVirtualizer({
-        count: virtualEnabled ? windowTotal : 0,
+    const selfVirtualizer = useVirtualizer({
+        count: virtualEnabled && !windowScroll ? windowTotal : 0,
+        enabled: virtualEnabled && !windowScroll,
         getScrollElement: () => scrollRef.current,
-        estimateSize: () => estimateRowHeight,
+        estimateSize: () => rowEstimate,
         overscan: virtualOptions?.overscan ?? 8,
         onChange: serverWindow
             ? (instance) => {
@@ -658,8 +677,47 @@ export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRo
         // 🔴 MEASURED, not assumed. A wrapping cell, an expanded detail panel and the
         // `compact` density all change a row's height, and a caller cannot be asked to
         // compute any of them. `estimateSize` only seeds the spacer before first paint.
-        measureElement: (el) => fixedRowHeight ?? el.getBoundingClientRect().height,
+        measureElement: (el) => fixedHeight ?? el.getBoundingClientRect().height,
+    });
+    /**
+     * `virtualize.scroll: 'window'` — see the prop doc. Always called (hooks cannot be
+     * conditional) and `enabled: false` otherwise, so no other table on the page subscribes to
+     * the window's scroll. `scrollMargin` is the BODY's top in document coordinates: the
+     * virtualizer's offsets are measured from there, and the header, the toolbar and whatever the
+     * page draws above the table all sit inside that margin.
+     */
+    /** The active tier's row container — the grid's `<tbody>`, or a narrow tier's list. */
+    const bodyRef = useRef(null);
+    const [scrollMargin, setScrollMargin] = useState(0);
+    const readScrollMargin = useCallback(() => {
+        const body = bodyRef.current;
+        if (!body)
+            return;
+        const top = Math.round(body.getBoundingClientRect().top + window.scrollY);
+        setScrollMargin((prev) => (prev === top ? prev : top));
+    }, []);
+    // Every render: anything above the table (a banner, a toolbar wrapping to two lines) moves
+    // the body without resizing it. A no-op when the number is unchanged.
+    useLayoutEffect(() => {
+        if (windowScroll)
+            readScrollMargin();
     });
+    useEffect(() => {
+        if (!windowScroll)
+            return;
+        window.addEventListener('resize', readScrollMargin);
+        return () => window.removeEventListener('resize', readScrollMargin);
+    }, [readScrollMargin, windowScroll]);
+    const pageVirtualizer = useWindowVirtualizer({
+        count: windowScroll ? windowTotal : 0,
+        enabled: windowScroll,
+        estimateSize: () => rowEstimate,
+        overscan: virtualOptions?.overscan ?? 8,
+        scrollMargin,
+        measureElement: (el) => el.getBoundingClientRect().height,
+    });
+    // One interface from here on: the two differ only in what they measure against.
+    const rowVirtualizer = (windowScroll ? pageVirtualizer : selfVirtualizer);
     /**
      * 🔴 Invalidate the measurement cache when the row height changes.
      *
@@ -676,11 +734,22 @@ export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRo
      * exists so the third virtualizer does not pay for it a third time — and it is
      * what caught this one.
      */
-    // biome-ignore lint/correctness/useExhaustiveDependencies: `estimateRowHeight` is the POINT of this effect, not a value it reads — re-running when it changes is what invalidates the cached offsets. Dropping it makes the measure fire once and never again, which is the bug.
+    // The same holds for a TIER change: a card measured at 180px is a 56px list row a resize later.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `rowEstimate` and `activeTier` are the POINT of this effect, not values it reads — re-running when they change is what invalidates the cached offsets. Dropping them makes the measure fire once and never again, which is the bug.
     useEffect(() => {
         rowVirtualizer.measure();
-    }, [rowVirtualizer, estimateRowHeight]);
+    }, [rowVirtualizer, rowEstimate, activeTier]);
     const virtualRows = virtualEnabled ? rowVirtualizer.getVirtualItems() : [];
+    // `virtualize.onNearEnd`: the last rendered row is within `nearEndCount` of the end of `data`.
+    const lastRendered = virtualRows.at(-1)?.index ?? -1;
+    const onNearEnd = virtualOptions?.onNearEnd;
+    const nearEndCount = virtualOptions?.nearEndCount ?? 8;
+    useEffect(() => {
+        if (!onNearEnd || lastRendered < 0)
+            return;
+        if (lastRendered >= windowStart + rows.length - nearEndCount)
+            onNearEnd();
+    }, [lastRendered, nearEndCount, onNearEnd, rows.length, windowStart]);
     /** The rows to render, and the two spacers that keep the scrollbar honest about the
      *  ones that are not. Off, this is every row and no spacers — byte-identical output.
      *  `null` is a row a {@link serverWindow} has not loaded: a placeholder of the estimated
@@ -688,25 +757,36 @@ export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRo
     const bodyRows = virtualEnabled
         ? virtualRows.map((v) => rows[v.index - windowStart] ?? null)
         : rows;
+    /** What a tier renders: every row when nothing is virtualized; the window in the ONE tier on
+     *  screen, and nothing in the others. `index` is the row's position over the whole result set. */
+    const tierRows = (t) => !virtualEnabled
+        ? rows.map((row, index) => ({ row, index }))
+        : activeTier === t
+            ? bodyRows.map((row, i) => ({ row, index: virtualRows[i].index }))
+            : [];
     useImperativeHandle(handleRef, () => ({
         get scrollElement() {
             return scrollRef.current;
         },
         scrollToIndex(index, options = {}) {
-            const element = scrollRef.current;
+            const element = windowScroll ? window : scrollRef.current;
             if (!element || !virtualEnabled)
                 return null;
             const clamped = Math.max(0, Math.min(index, loadedRef.current.total - 1));
-            const [offset] = rowVirtualizer.getOffsetForIndex(clamped, options.align ?? 'center') ?? [clamped * estimateRowHeight];
+            const [offset] = rowVirtualizer.getOffsetForIndex(clamped, options.align ?? 'center') ?? [clamped * rowEstimate];
             const top = Math.max(0, Math.round(offset));
             element.scrollTo({ top, behavior: options.behavior ?? 'auto' });
             return top;
         },
-    }), [estimateRowHeight, rowVirtualizer, virtualEnabled]);
-    const padTop = virtualEnabled ? (virtualRows[0]?.start ?? 0) : 0;
+    }), [rowEstimate, rowVirtualizer, virtualEnabled, windowScroll]);
+    // Item offsets include the `scrollMargin` (0 unless the window scrolls); the spacers do not.
+    const margin = windowScroll ? rowVirtualizer.options.scrollMargin : 0;
+    const padTop = virtualEnabled ? Math.max(0, (virtualRows[0]?.start ?? margin) - margin) : 0;
     const padBottom = virtualEnabled
-        ? rowVirtualizer.getTotalSize() - (virtualRows.at(-1)?.end ?? 0)
+        ? Math.max(0, rowVirtualizer.getTotalSize() - ((virtualRows.at(-1)?.end ?? margin) - margin))
         : 0;
+    /** The spacers belong to the tier on screen; the hidden ones hold no rows and no padding. */
+    const tierPad = (t) => virtualEnabled && activeTier === t ? { paddingTop: padTop, paddingBottom: padBottom } : undefined;
     const hasActions = !!(onRowEdit || onRowDelete || rowMenu);
     // ── Row selection (see the `selectedIds` prop doc) ──────────────────────────
     const canSelect = (row) => isRowSelectable?.(row) ?? true;
@@ -817,19 +897,46 @@ export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRo
     // say so at the cut edge, or a narrow pane reads as a table with its right-hand
     // columns missing rather than one that scrolls (`useScrollEdgeFade`).
     const gridFade = useScrollEdgeFade();
+    // `ColDef.priority`: collapse the columns that do not fit the table's MEASURED width. Only a
+    // table that declares a priority re-renders on resize for it.
+    const hasPriority = liveColumns.some((c) => c.priority != null);
+    const [measuredWidth, setMeasuredWidth] = useState(0);
+    useResizeObserver(outerRef, (el) => {
+        if (hasPriority)
+            setMeasuredWidth(el.clientWidth);
+        if (narrowTiers)
+            setTier(tierForWidth(el));
+    }, { layout: true });
+    // The observer only fires on a RESIZE: a table that starts virtualizing reads its tier now.
+    useLayoutEffect(() => {
+        if (narrowTiers && outerRef.current)
+            setTier(tierForWidth(outerRef.current));
+    }, [narrowTiers]);
+    const droppedByWidth = hasPriority
+        ? columnsDroppedForWidth(cardColumns, measuredWidth, (hasActions ? ACTIONS_TRACK_PX : 0) + (selectionShown ? SELECT_TRACK_PX : 0))
+        : NOTHING_DROPPED;
     const tableMinWidth = fixedLayout
-        ? Math.max(minTableWidth ?? 0, declaredTrackFloor(cardColumns, hasActions) + (selectionShown ? SELECT_TRACK_PX : 0))
+        ? Math.max(minTableWidth ?? 0, declaredTrackFloor(cardColumns.filter((c) => !droppedByWidth.has(c.key)), hasActions) + (selectionShown ? SELECT_TRACK_PX : 0))
         : minTableWidth;
-    return (_jsxs("div", { className: cn('@container flex min-h-0 flex-col', className), children: [toolbarNode, summaryNode != null ? (_jsx("div", { "data-cb-table-selection-summary": '', "aria-live": 'polite', className: 'flex min-h-11 flex-wrap items-center gap-3 border-b border-border px-4 py-2 text-sm', children: summaryNode })) : null, loading ? (_jsx("div", { className: 'flex flex-col gap-2 p-4', children: Array.from({ length: 5 }).map((_, i) => (_jsx(Skeleton, { className: 'h-10 w-full' }, `dt-skeleton-${i}`))) })) : rows.length === 0 && windowTotal === 0 ? (_jsx("div", { className: 'p-2', children: emptyState ?? _jsx(EmptyState, { title: 'No results' }) })) : (_jsxs("div", { ref: scrollRef, "data-cb-table-scroll": bodyScrolls ? '' : undefined, 
+    return (_jsxs("div", { ref: outerRef, className: cn('@container flex min-h-0 flex-col', className), children: [toolbarNode, summaryNode != null ? (_jsx("div", { "data-cb-table-selection-summary": '', "aria-live": 'polite', className: 'flex min-h-11 flex-wrap items-center gap-3 border-b border-border px-4 py-2 text-sm', children: summaryNode })) : null, loading ? (_jsx("div", { className: 'flex flex-col gap-2 p-4', children: Array.from({ length: 5 }).map((_, i) => (_jsx(Skeleton, { className: 'h-10 w-full' }, `dt-skeleton-${i}`))) })) : rows.length === 0 && windowTotal === 0 ? (_jsx("div", { className: 'p-2', children: emptyState ?? _jsx(EmptyState, { title: 'No results' }) })) : (_jsxs("div", { ref: scrollRef, "data-cb-table-scroll": bodyScrolls ? '' : undefined, 
                 // guardrails-ignore no-raw-overflow: dual-axis table scroll container — sticky header pins to it; ScrollArea cannot own horizontal table scroll.
                 className: cn(bodyScrolls && 'min-h-0 flex-1 overflow-auto', scrollClassName), children: [selectionShown && (viewMode === 'card' || mobileCards) ? (_jsx("div", { "data-cb-table-select-all": '', className: cn('flex items-center px-2 py-1', viewMode !== 'card' && '@xl:hidden'), children: headerCheckbox('Select all') })) : null, viewMode === 'card' ? (_jsx(CardView, { columns: cardColumns, data: rows.map((row) => row.original), getRowId: getRowId, onRowClick: onRowClick, dragPropsFor: getRowDrag ? dragPropsFor : undefined, selectFor: selectionShown
                             ? (_row, index) => {
                                 const tsRow = rows[index];
                                 return tsRow ? rowCheckbox(tsRow) : null;
                             }
-                            : undefined, cardMinWidth: cardMinWidth, className: 'p-2' })) : (_jsxs(_Fragment, { children: [mobileCards && (_jsx("div", { "data-cb-table-cards": '', className: 'flex flex-col gap-3 @xl:hidden', children: rows.map((row) => (_jsx(MobileRowCard, { row: row, columns: cardColumns, className: rowClassName?.(row.original), onRowClick: onRowClick, dragProps: mergeRowProps(dragPropsFor(row.original), getRowProps?.(row.original, windowStart + row.index)), select: selectionShown ? rowCheckbox(row) : undefined, actions: hasActions ? (_jsx(RowActions, { row: row.original, onEdit: onRowEdit, onDelete: onRowDelete, menu: rowMenu?.(row.original) })) : null, expanded: renderExpanded && expandedRowId != null && row.id === expandedRowId
-                                        ? renderExpanded(row.original)
-                                        : null }, row.id))) })), mobileCards && (_jsx("div", { "data-cb-table-list": '', className: 'hidden @xl:block @3xl:hidden', children: (() => {
+                            : undefined, cardMinWidth: cardMinWidth, className: 'p-2' })) : (_jsxs(_Fragment, { children: [mobileCards && (_jsx("div", { ref: activeTier === 'cards' && narrowTiers ? bodyRef : undefined, "data-cb-table-cards": '', 
+                                // Virtualized, each card sits in a measured wrapper that carries the gap as padding —
+                                // a flex `gap` is outside every row, so the virtualizer would never count it.
+                                className: cn('flex flex-col @xl:hidden', !virtualEnabled && 'gap-3'), style: tierPad('cards'), children: tierRows('cards').map(({ row, index }) => {
+                                    if (row === null) {
+                                        return (_jsx("div", { ref: rowVirtualizer.measureElement, "data-index": index, "data-cb-placeholder": '', "aria-hidden": true, className: 'pb-3', children: _jsx(Skeleton, { className: 'w-full rounded-lg', style: { height: rowEstimate - 12 } }) }, `cb-placeholder-${index}`));
+                                    }
+                                    const card = (_jsx(MobileRowCard, { row: row, columns: cardColumns, className: rowClassName?.(row.original), onRowClick: onRowClick, dragProps: mergeRowProps(dragPropsFor(row.original), getRowProps?.(row.original, windowStart + row.index)), select: selectionShown ? rowCheckbox(row) : undefined, actions: hasActions ? (_jsx(RowActions, { row: row.original, onEdit: onRowEdit, onDelete: onRowDelete, menu: rowMenu?.(row.original), menuLabel: rowMenuLabel?.(row.original) })) : null, expanded: renderExpanded && expandedRowId != null && row.id === expandedRowId
+                                            ? renderExpanded(row.original)
+                                            : null }, row.id));
+                                    return virtualEnabled ? (_jsx("div", { ref: rowVirtualizer.measureElement, "data-index": index, className: 'pb-3', children: card }, row.id)) : (card);
+                                }) })), mobileCards && (_jsx("div", { "data-cb-table-list": '', className: 'hidden @xl:block @3xl:hidden', children: (() => {
                                     const [title, ...rest] = cardColumns;
                                     // ONE shared grid template for every row — parent and child rows
                                     // lock into identical column slots, so the status/ports/actions
@@ -855,18 +962,24 @@ export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRo
                                         ...(hasActions ? ['32px'] : []),
                                     ].join(' ');
                                     const header = (_jsxs("div", { "data-cb-table-list-header": '', className: 'grid items-center gap-3 border-b border-border px-4 py-2 text-caption font-bold uppercase tracking-wider text-muted-foreground', style: { gridTemplateColumns: template }, children: [selectionShown ? _jsx("span", { className: 'flex justify-center', children: headerCheckbox() }) : null, _jsx("span", { children: title?.label ?? '' }), rest.map((col) => (_jsx("span", { className: cn(resolveColumnAlign(col) === 'right' && 'text-right'), children: col.label }, col.key))), hasActions ? _jsx("span", { "aria-hidden": true }) : null] }));
-                                    const body = rows.map((row) => {
+                                    const body = tierRows('list').map(({ row, index }) => {
+                                        if (row === null) {
+                                            return (_jsx("div", { ref: rowVirtualizer.measureElement, "data-index": index, "data-cb-placeholder": '', "aria-hidden": true, className: 'flex items-center px-4', style: { height: rowEstimate }, children: _jsx(Skeleton, { className: 'h-3 w-40' }) }, `cb-placeholder-${index}`));
+                                        }
                                         const isExpanded = renderExpanded != null && expandedRowId != null && row.id === expandedRowId;
-                                        return (_jsxs(Fragment, { children: [_jsxs("div", { ...mergeRowProps({
+                                        const item = (_jsxs(_Fragment, { children: [_jsxs("div", { ...mergeRowProps({
                                                         ...dragPropsFor(row.original),
                                                         className: cn('grid items-center gap-3 px-4 py-3 transition-colors hover:bg-muted/40', getRowDrag && 'cursor-grab active:cursor-grabbing', rowClassName?.(row.original)),
                                                         style: { gridTemplateColumns: template },
-                                                    }, getRowProps?.(row.original, windowStart + row.index)), children: [selectionShown ? (_jsx("div", { ...selectCellProps(row), className: '-my-3 flex self-stretch items-center justify-center', children: rowCheckbox(row) })) : null, _jsx("div", { className: 'min-w-0', children: title ? (_jsx(CellRenderer, { col: title, value: row.original[title.key], row: row.original })) : null }), rest.map((col) => (_jsx("div", { className: cn(resolveColumnAlign(col) === 'right' && 'justify-self-end text-right'), children: _jsx(CellRenderer, { col: col, value: row.original[col.key], row: row.original }) }, col.key))), hasActions ? (_jsx(RowActions, { row: row.original, onEdit: onRowEdit, onDelete: onRowDelete, menu: rowMenu?.(row.original) })) : null] }), isExpanded ? (_jsx("div", { className: 'bg-muted/20 px-4 pt-1 pb-3', children: _jsx(Surface, { level: "raised", pad: "sm", radius: "lg", children: renderExpanded(row.original) }) })) : null] }, row.id));
+                                                    }, getRowProps?.(row.original, windowStart + row.index)), children: [selectionShown ? (_jsx("div", { ...selectCellProps(row), className: '-my-3 flex self-stretch items-center justify-center', children: rowCheckbox(row) })) : null, _jsx("div", { className: 'min-w-0', children: title ? (_jsx(CellRenderer, { col: title, value: row.original[title.key], row: row.original })) : null }), rest.map((col) => (_jsx("div", { className: cn(resolveColumnAlign(col) === 'right' && 'justify-self-end text-right'), children: _jsx(CellRenderer, { col: col, value: row.original[col.key], row: row.original }) }, col.key))), hasActions ? (_jsx(RowActions, { row: row.original, onEdit: onRowEdit, onDelete: onRowDelete, menu: rowMenu?.(row.original), menuLabel: rowMenuLabel?.(row.original) })) : null] }), isExpanded ? (_jsx("div", { className: 'bg-muted/20 px-4 pt-1 pb-3', children: _jsx(Surface, { level: "raised", pad: "sm", radius: "lg", children: renderExpanded(row.original) }) })) : null] }));
+                                        // Virtualized, the row AND its expansion are one measured node — the
+                                        // virtualizer's `data-index` names a row, not the first half of one.
+                                        return virtualEnabled ? (_jsx("div", { ref: rowVirtualizer.measureElement, "data-index": index, children: item }, row.id)) : (_jsx(Fragment, { children: item }, row.id));
                                     });
-                                    return (_jsxs(_Fragment, { children: [header, _jsx("div", { className: 'divide-y divide-border', children: body })] }));
+                                    return (_jsxs(_Fragment, { children: [header, _jsx("div", { ref: activeTier === 'list' && narrowTiers ? bodyRef : undefined, className: 'divide-y divide-border', style: tierPad('list'), children: body })] }));
                                 })() })), _jsx("div", { ref: bodyScrolls ? undefined : gridFade.ref, onScroll: bodyScrolls ? undefined : gridFade.onScroll, style: bodyScrolls ? undefined : gridFade.maskStyle, 
                                 // guardrails-ignore no-raw-overflow: content-sized horizontal table scroll, not a page-level vertical scroll region — see reasoning above. Under scrollBody the OUTER wrapper owns both axes (a nested overflow ancestor would un-stick the sticky header).
-                                className: cn(!bodyScrolls && 'overflow-x-auto', mobileCards && 'hidden @3xl:block'), children: _jsxs("table", { className: cn('w-full border-collapse text-sm', fixedLayout && 'table-fixed'), style: tableMinWidth != null ? { minWidth: tableMinWidth } : undefined, children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { children: table.getHeaderGroups().map((hg) => (_jsxs("tr", { children: [(() => {
+                                className: cn(!bodyScrolls && 'overflow-x-auto', mobileCards && 'hidden @3xl:block'), children: _jsxs("table", { "aria-rowcount": virtualEnabled ? (serverWindow ? windowTotal + 1 : onNearEnd ? -1 : rows.length + 1) : undefined, className: cn('w-full border-collapse text-sm', fixedLayout && 'table-fixed'), style: tableMinWidth != null ? { minWidth: tableMinWidth } : undefined, children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { children: table.getHeaderGroups().map((hg) => (_jsxs("tr", { "aria-rowindex": virtualEnabled ? 1 : undefined, children: [(() => {
                                                         // `ColDef.leading` columns sit BEFORE the checkbox column; see its doc.
                                                         const renderHeader = (h, headerIndex) => {
                                                             const sorted = h.column.getIsSorted();
@@ -897,13 +1010,13 @@ export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRo
                                                                 frozen &&
                                                                     (selectionShown
                                                                         ? 'sticky left-11 bg-card shadow-[1px_0_0_0_var(--color-border)]'
-                                                                        : 'sticky left-0 bg-card shadow-[1px_0_0_0_var(--color-border)]'), frozen && (stickyHeader ? 'z-30' : 'z-20'), meta?.hideBelow && HIDE_BELOW_CLASS[meta.hideBelow]), children: h.isPlaceholder
+                                                                        : 'sticky left-0 bg-card shadow-[1px_0_0_0_var(--color-border)]'), frozen && (stickyHeader ? 'z-30' : 'z-20'), meta?.hideBelow && HIDE_BELOW_CLASS[meta.hideBelow], droppedByWidth.has(h.column.id) && COLLAPSED_CLASS), children: h.isPlaceholder
                                                                     ? null
                                                                     : renderTemplate(h.column.columnDef.header, h.getContext()) }, h.id));
                                                         };
                                                         const isLeading = (h) => h.column.columnDef.meta?.leading === true;
                                                         return (_jsxs(_Fragment, { children: [hg.headers.filter(isLeading).map((h) => renderHeader(h, -1)), selectionShown ? (_jsx("th", { scope: 'col', className: cn('w-11 border-b border-border px-0 text-center', stickyHeader && 'sticky top-0 z-10 bg-card/95 backdrop-blur-sm', stickyFirstColumn && 'sticky left-0 bg-card', stickyFirstColumn && (stickyHeader ? 'z-30' : 'z-20')), children: headerCheckbox() })) : null, hg.headers.filter((h) => !isLeading(h)).map(renderHeader)] }));
-                                                    })(), hasActions ? (_jsx("th", { className: cn('w-20 border-b border-border px-2', stickyHeader && 'sticky top-0 z-10 bg-card/95 backdrop-blur-sm'), "aria-label": 'Row actions' })) : null] }, hg.id))) }), _jsxs("tbody", { children: [padTop > 0 ? (_jsx("tr", { "aria-hidden": true, style: { height: padTop }, children: _jsx("td", { colSpan: visibleColumnCount }) })) : null, bodyRows.map((row, sliceIndex) => {
+                                                    })(), hasActions ? (_jsx("th", { className: cn('w-20 border-b border-border px-2', stickyHeader && 'sticky top-0 z-10 bg-card/95 backdrop-blur-sm'), "aria-label": 'Row actions' })) : null] }, hg.id))) }), _jsxs("tbody", { ref: activeTier === 'grid' ? bodyRef : undefined, children: [padTop > 0 && activeTier === 'grid' ? (_jsx("tr", { "aria-hidden": true, style: { height: padTop }, children: _jsx("td", { colSpan: visibleColumnCount }) })) : null, (activeTier === 'grid' ? bodyRows : []).map((row, sliceIndex) => {
                                                     if (row === null) {
                                                         // A row the server window has not loaded yet: the estimated height, so
                                                         // the spacer arithmetic holds, and a skeleton line rather than a gap.
@@ -923,7 +1036,7 @@ export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRo
                                                                 // every measurement lands on index 0 and the spacer never grows.
                                                                 // (The ref stays OUT of the merge: `getRowProps` cannot take it.)
                                                                 ref: virtualEnabled && fixedRowHeight === null ? rowVirtualizer.measureElement : undefined, ...mergeRowProps({
-                                                                    ...(virtualEnabled ? { 'data-index': rowIndex } : {}),
+                                                                    ...(virtualEnabled ? { 'data-index': rowIndex, 'aria-rowindex': rowIndex + 2 } : {}),
                                                                     style: fixedRowHeight === null ? undefined : { height: fixedRowHeight },
                                                                     'data-expanded': isExpanded || undefined,
                                                                     ...dragPropsFor(row.original),
@@ -972,7 +1085,7 @@ export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRo
                                                                                 // `overflow: hidden`: a cell may host a menu/tooltip that
                                                                                 // has to escape its bounds.
                                                                                 fixedLayout && '[overflow-wrap:anywhere]', cell.column.columnDef.meta?.align === 'right' && 'text-right', cell.column.columnDef.meta?.hideBelow &&
-                                                                                    HIDE_BELOW_CLASS[cell.column.columnDef.meta.hideBelow]), children: renderTemplate(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                                                                    HIDE_BELOW_CLASS[cell.column.columnDef.meta.hideBelow], droppedByWidth.has(cell.column.id) && COLLAPSED_CLASS), children: renderTemplate(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                                                                         };
                                                                         return (_jsxs(_Fragment, { children: [cells.filter(isLeading).map((cell) => renderCell(cell, -1)), selectionShown ? (_jsx("td", { ...selectCellProps(row), style: stickyFirstColumn
                                                                                         ? {
@@ -981,22 +1094,33 @@ export function DataTable({ columns, data, getRowId, onRowClick, onRowEdit, onRo
                                                                                                 : 'var(--color-card)',
                                                                                         }
                                                                                         : undefined, className: cn('w-11 cursor-pointer px-0 text-center align-middle', stickyFirstColumn && 'sticky left-0 z-10 bg-[var(--cb-frozen-bg)]'), children: rowCheckbox(row) })) : null, cells.filter((cell) => !isLeading(cell)).map(renderCell)] }));
-                                                                    })(), hasActions ? (_jsx("td", { className: 'px-2 py-2', children: _jsx(RowActions, { row: row.original, onEdit: onRowEdit, onDelete: onRowDelete, menu: rowMenu?.(row.original) }) })) : null] }), isExpanded ? (_jsx("tr", { className: 'border-b border-border bg-muted/20', ref: (el) => {
+                                                                    })(), hasActions ? (_jsx("td", { className: 'px-2 py-2', children: _jsx(RowActions, { row: row.original, onEdit: onRowEdit, onDelete: onRowDelete, menu: rowMenu?.(row.original), menuLabel: rowMenuLabel?.(row.original) }) })) : null] }), isExpanded ? (_jsx("tr", { className: 'border-b border-border bg-muted/20', ref: (el) => {
                                                                     if (el && scrolledExpansionRef.current !== row.id) {
                                                                         scrolledExpansionRef.current = row.id;
                                                                         // A row expanded near the fold must reveal its panel.
                                                                         el.scrollIntoView({ block: 'nearest' });
                                                                     }
                                                                 }, children: _jsx("td", { colSpan: visibleColumnCount, className: 'p-0', children: _jsx("div", { className: 'animate-in fade-in slide-in-from-top-1 px-4 pt-1 pb-3 duration-200', children: _jsx(Surface, { level: "raised", pad: "sm", radius: "lg", children: renderExpanded(row.original) }) }) }) })) : null] }, row.id));
-                                                }), padBottom > 0 ? (_jsx("tr", { "aria-hidden": true, style: { height: padBottom }, children: _jsx("td", { colSpan: visibleColumnCount }) })) : null] })] }) })] })), bodyScrolls && (_jsx("div", { "aria-hidden": true, className: 'pointer-events-none sticky bottom-0 -mt-6 h-6 w-full bg-gradient-to-t from-card to-transparent' }))] })), !loading && rows.length > 0 && !paginationHidden ? (_jsx(PaginationPart, { table: table, pageSizeOptions: pageSizeOptions, fallback: _jsx(PaginationPlaceholder, {}) })) : null] }));
+                                                }), padBottom > 0 && activeTier === 'grid' ? (_jsx("tr", { "aria-hidden": true, style: { height: padBottom }, children: _jsx("td", { colSpan: visibleColumnCount }) })) : null] })] }) })] })), bodyScrolls && (_jsx("div", { "aria-hidden": true, className: 'pointer-events-none sticky bottom-0 -mt-6 h-6 w-full bg-gradient-to-t from-card to-transparent' }))] })), !loading && rows.length > 0 && !paginationHidden ? (_jsx(PaginationPart, { table: table, pageSizeOptions: pageSizeOptions, fallback: _jsx(PaginationPlaceholder, {}) })) : null] }));
 }
+/** Seeds for the narrow tiers' row heights; every rendered row is measured over them. */
+const CARD_ESTIMATE_PX = 160;
+const LIST_ESTIMATE_PX = 56;
 /**
- * One row rendered as a phone card: first visible column = the title zone (unlabeled,
- * full width), labeled columns = compact label/value pairs, empty-labeled columns
- * (an actions column) + the row-actions kebab = the bordered footer row, actions
- * anchored bottom-right inside the card bounds. Values render through the SAME
- * {@link CellRenderer} registry as the grid, so a custom cell shows identically here.
+ * The tier `mobileCards`' container query shows at `el`'s width: its two steps are 36rem and
+ * 48rem, both `min-width` against the container's CONTENT box — so padding comes off, and the
+ * rem is the root's, read live, because an app that scales its root size scales the ladder too.
  */
+function tierForWidth(el) {
+    // Nothing laid out (a hidden ancestor, happy-dom): no tier is on screen, and the grid is the
+    // one whose output a caller without layout can still inspect.
+    if (el.clientWidth === 0)
+        return 'grid';
+    const style = getComputedStyle(el);
+    const width = el.clientWidth - (Number.parseFloat(style.paddingLeft) || 0) - (Number.parseFloat(style.paddingRight) || 0);
+    const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    return width < 36 * rem ? 'cards' : width < 48 * rem ? 'list' : 'grid';
+}
 function MobileRowCard({ row, columns, className, onRowClick, dragProps, select, actions, expanded, }) {
     const visible = columns.filter((c) => !c.hidden);
     const [title, ...rest] = visible;