@rozie-ui/data-table-solid 0.5.0 → 0.6.0

package/src/DataTable.tsx

@@ -3,7 +3,7 @@ import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, s
 import { Key } from '@solid-primitives/keyed';
 import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from '@rozie/runtime-solid';
 import Popover from '@rozie-ui/popover-solid';
-import { isSafeKey, wrapAggregationFn, indexDefsById, collectGroupableLeafDefs } from './helpers/columnDefUtils';
+import { isSafeKey, wrapAggregationFn, indexDefsById, editorKindWarning, collectGroupableLeafDefs } from './helpers/columnDefUtils';
 import { applyUpdater, clamp, focusables } from './helpers/indexMath';
 import { escapeTsvField, parseTsv, tileGridToBox, tileIndex } from './helpers/tsvGrid';
 import { replaceRowValue, indexOfRowIn, replaceRowValues } from './helpers/rowValueUtils';
@@ -35,33 +35,40 @@ import { Virtualizer, elementScroll, observeElementRect, observeElementOffset, m
 // snapshot (the rete stale-closure anti-pattern — a top-level $computed/useCallback
 // freezes the table at the empty-initial state on React).
 
+// C-09's value-equality guard. Imported HERE, in DataTable.rozie's OWN script, because that
+// is where it is USED: a `.rzts` partial's import of a symbol the partial itself never
+// references is dropped as unused, and the host script then reaches a free identifier. That
+// failed at RUNTIME, not at compile time — `ReferenceError: columnSpecsEquivalent is not
+// defined` on the first paste — which is the only way this class of mistake shows up.
+import { columnSpecsEquivalent } from './helpers/columnDefUtils';
+
+// The registry API handed to <Column> children (whole-object-replace — T-48-PP guard).
+
 __rozieInjectStyle('DataTable-d5dcab4c', `[data-rozie-s-d5dcab4c]:host {
-  --rdt-font: var(--rozie-data-table-font);
-  --rdt-color: var(--rozie-data-table-fg);
-  --rdt-cell-padding: var(--rozie-data-table-cell-padding);
-  --rdt-border: 1px solid var(--rozie-data-table-border-color);
-  --rdt-header-bg: var(--rozie-data-table-header-bg);
-  --rdt-header-weight: var(--rozie-data-table-header-weight);
-  --rdt-sort-ind-opacity: var(--rozie-data-table-sort-indicator-opacity);
-  --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color);
-  --rdt-filter-radius: var(--rozie-data-table-radius);
-  --rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color);
-  --rdt-page-btn-radius: var(--rozie-data-table-radius);
-  --rdt-page-btn-disabled-opacity: var(--rozie-data-table-disabled-opacity);
-  --rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color);
-  --rdt-page-size-radius: var(--rozie-data-table-radius);
-  --rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color);
-  --rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active);
-  --rdt-pin-btn-border: 1px solid var(--rozie-data-table-control-border-color);
-  --rdt-pin-btn-radius: var(--rozie-data-table-radius);
-  --rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg);
-  --rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color);
-  --rdt-colvis-summary-radius: var(--rozie-data-table-radius);
-  --rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color);
-  --rdt-colvis-menu-radius: var(--rozie-data-table-radius);
-  --rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg);
-  --rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow);
-  --rdt-select-accent: var(--rozie-data-table-select-accent);
+  --rdt-color: var(--rozie-data-table-fg, var(--rdt-ds-fg));
+  --rdt-select-accent: var(--rozie-data-table-select-accent, var(--rozie-data-table-accent, var(--rdt-ds-select-accent)));
+  --rdt-border: 1px solid var(--rozie-data-table-border-color, var(--rdt-ds-border-color));
+  --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color, var(--rdt-ds-control-border-color));
+  --rdt-filter-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
+  --rdt-font: var(--rozie-data-table-font, var(--rdt-ds-font));
+  --rdt-cell-padding: var(--rozie-data-table-cell-padding, var(--rdt-ds-cell-padding));
+  --rdt-header-bg: var(--rozie-data-table-header-bg, var(--rdt-ds-header-bg));
+  --rdt-header-weight: var(--rozie-data-table-header-weight, var(--rdt-ds-header-weight));
+  --rdt-sort-ind-opacity: var(--rozie-data-table-sort-indicator-opacity, var(--rdt-ds-sort-indicator-opacity));
+  --rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color, var(--rdt-ds-resize-grip-color));
+  --rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active, var(--rozie-data-table-accent, var(--rdt-ds-resize-grip-active)));
+  --rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg, var(--rdt-ds-pin-active-bg));
+  --rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg, var(--rdt-ds-menu-bg));
+  --rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow, var(--rdt-ds-menu-shadow));
+  --rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color, var(--rdt-ds-border-color));
+  --rdt-colvis-menu-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
+  --rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color, var(--rdt-ds-control-border-color));
+  --rdt-colvis-summary-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
+  --rdt-page-btn-disabled-opacity: var(--rozie-data-table-disabled-opacity, var(--rdt-ds-disabled-opacity));
+  --rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color, var(--rdt-ds-control-border-color));
+  --rdt-page-btn-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
+  --rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color, var(--rdt-ds-control-border-color));
+  --rdt-page-size-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
 }
 .rozie-data-table[data-rozie-s-d5dcab4c] {
   border-collapse: collapse;
@@ -189,6 +196,16 @@ __rozieInjectStyle('DataTable-d5dcab4c', `[data-rozie-s-d5dcab4c]:host {
   flex-direction: column;
   gap: var(--rdt-chrome-gap, 0.5rem);
 }
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-skeleton[data-rozie-s-d5dcab4c] {
+  /* inline-block on the cell's own line box, exactly like a text value (a block box was 2px
+     short of a text row). */
+  display: inline-block;
+  width: 100%;
+  vertical-align: baseline;
+  border-radius: 4px;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  color: transparent;
+}
 .rozie-data-table-wrap[data-rozie-s-d5dcab4c] .rdt-toolbar[data-rozie-s-d5dcab4c] {
   display: flex;
   gap: var(--rdt-toolbar-gap, 0.5rem);
@@ -214,6 +231,9 @@ __rozieInjectStyle('DataTable-d5dcab4c', `[data-rozie-s-d5dcab4c]:host {
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-filter-row[data-rozie-s-d5dcab4c] {
   background: var(--rdt-filter-row-bg, rgba(0, 0, 0, 0.015));
 }
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-pinned[data-rozie-s-d5dcab4c] {
+  box-sizing: border-box;
+}
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-filter-cell[data-rozie-s-d5dcab4c] {
   padding: var(--rdt-filter-cell-padding, 0.35rem 0.75rem);
   border-bottom: var(--rdt-border, 1px solid rgba(0, 0, 0, 0.08));
@@ -333,6 +353,9 @@ __rozieInjectStyle('DataTable-d5dcab4c', `[data-rozie-s-d5dcab4c]:host {
 .rozie-data-table-wrap[data-rozie-s-d5dcab4c] .rdt-colvis-summary[data-rozie-s-d5dcab4c] {
   cursor: pointer;
   font: inherit;
+  /* Own the margin too: content-site typography styles bare \`summary\` (VitePress sets
+     \`margin: 16px 0\`), which grew the <details> and stretched the toolbar's search input. */
+  margin: 0;
   padding: var(--rdt-colvis-summary-padding, 0.25rem 0.6rem);
   border: var(--rdt-colvis-summary-border, 1px solid rgba(0, 0, 0, 0.2));
   border-radius: var(--rdt-colvis-summary-radius, 4px);
@@ -371,6 +394,51 @@ __rozieInjectStyle('DataTable-d5dcab4c', `[data-rozie-s-d5dcab4c]:host {
   text-align: var(--rdt-expander-col-align, center);
   white-space: nowrap;
 }
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="1"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="2"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="3"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="4"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="5"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="6"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="7"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="8"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  content: '';
+  display: inline-block;
+  vertical-align: middle;
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="1"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(1 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="2"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(2 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="3"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(3 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="4"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(4 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="5"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(5 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="6"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(6 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="7"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(7 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="8"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(8 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[role="grid"][data-rozie-s-d5dcab4c] {
+  user-select: none;
+}
+.rozie-data-table[role="grid"][data-rozie-s-d5dcab4c] input[data-rozie-s-d5dcab4c],
+.rozie-data-table[role="grid"][data-rozie-s-d5dcab4c] textarea[data-rozie-s-d5dcab4c],
+.rozie-data-table[role="grid"][data-rozie-s-d5dcab4c] select[data-rozie-s-d5dcab4c],
+.rozie-data-table[role="grid"][data-rozie-s-d5dcab4c] [contenteditable="true"][data-rozie-s-d5dcab4c] {
+  user-select: text;
+}
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-select-all[data-rozie-s-d5dcab4c],
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-select-row[data-rozie-s-d5dcab4c] {
   cursor: pointer;
@@ -381,17 +449,19 @@ interface GroupBarSlotCtx { grouping: any; groupableColumns: any; applyGrouping:
 
 interface SelectAllSlotCtx { checked: any; indeterminate: any; toggle: any; }
 
+interface PlaceholderSlotCtx { index: any; columnId: any; }
+
 interface SelectCellSlotCtx { row: any; checked: any; toggle: any; }
 
 interface DetailSlotCtx { row: any; }
 
 interface ColHeaderSlotCtx { columnId: any; column: any; label: any; }
 
-interface FilterSlotCtx { columnId: any; value: any; uniqueValues: any; minMax: any; setFilter: any; }
+interface FilterSlotCtx { columnId: any; value: any; uniqueValues: any; minMax: any; columnLabel: any; setFilter: any; }
 
 interface CellSlotCtx { columnId: any; column: any; row: any; value: any; }
 
-interface EditorSlotCtx { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; autofocus: any; }
+interface EditorSlotCtx { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; columnLabel: any; autofocus: any; }
 
 interface DataTableProps {
   /**
@@ -456,6 +526,10 @@ interface DataTableProps {
   expanded?: (Record<string, any> | boolean) | null;
   defaultExpanded?: (Record<string, any> | boolean) | null;
   onExpandedChange?: (expanded: (Record<string, any> | boolean) | null) => void;
+  /**
+   * Row identity `(originalRow, index, parentRow?) => string | number` — the key `rowSelection`, `expanded` and the per-row caches use. Default null → table-core keys rows by position (`"0"`, `"1"`, … and `"0.1"` for sub-rows), so inserting or removing rows above a selected or expanded row moves that state onto whatever row now sits at its index. Supply it whenever rows can be added or removed while state is held (server push, live lists); the result is coerced to a string.
+   */
+  getRowId?: ((...args: any[]) => any) | null;
   /**
    * Table-level child-row accessor `(originalRow, index) => TData[] | undefined` that drives nested sub-rows. When supplied (with `expandable`), table-core flattens the hierarchy and the expand seam reveals depth-indented child rows. Null → the `#detail` scoped slot is the expand mode.
    */
@@ -547,7 +621,9 @@ interface DataTableProps {
   onReorderChange?: (...args: unknown[]) => void;
   onPinChange?: (...args: unknown[]) => void;
   onHistoryChange?: (...args: unknown[]) => void;
+  onVisibleRangeChange?: (...args: unknown[]) => void;
   onActivecellChange?: (...args: unknown[]) => void;
+  onRowActivate?: (...args: unknown[]) => void;
   onRangeChange?: (...args: unknown[]) => void;
   onCellEditCommit?: (...args: unknown[]) => void;
   onRowEditCommit?: (...args: unknown[]) => void;
@@ -555,13 +631,14 @@ interface DataTableProps {
   children?: JSX.Element;
   groupBarSlot?: (ctx: GroupBarSlotCtx) => JSX.Element;
   selectAllSlot?: (ctx: SelectAllSlotCtx) => JSX.Element;
+  placeholderSlot?: (ctx: PlaceholderSlotCtx) => JSX.Element;
   selectCellSlot?: (ctx: SelectCellSlotCtx) => JSX.Element;
   detailSlot?: (ctx: DetailSlotCtx) => JSX.Element;
   colHeaderSlot?: (ctx: ColHeaderSlotCtx) => JSX.Element;
   filterSlot?: (ctx: FilterSlotCtx) => JSX.Element;
   cellSlot?: (ctx: CellSlotCtx) => JSX.Element;
   editorSlot?: (ctx: EditorSlotCtx) => JSX.Element;
-  slots?: { [key: `colHeader-${string}`]: ((ctx: { columnId: any; column: any; label: any }) => JSX.Element) | undefined; [key: `filter-${string}`]: ((ctx: { columnId: any; value: any; uniqueValues: any; minMax: any; setFilter: any }) => JSX.Element) | undefined; [key: `cell-${string}`]: ((ctx: { columnId: any; column: any; row: any; value: any }) => JSX.Element) | undefined; [key: `editor-${string}`]: ((ctx: { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; autofocus: any }) => JSX.Element) | undefined; [key: string]: ((...args: any[]) => JSX.Element) | undefined; };
+  slots?: { [key: `colHeader-${string}`]: ((ctx: { columnId: any; column: any; label: any }) => JSX.Element) | undefined; [key: `filter-${string}`]: ((ctx: { columnId: any; value: any; uniqueValues: any; minMax: any; columnLabel: any; setFilter: any }) => JSX.Element) | undefined; [key: `cell-${string}`]: ((ctx: { columnId: any; column: any; row: any; value: any }) => JSX.Element) | undefined; [key: `editor-${string}`]: ((ctx: { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; columnLabel: any; autofocus: any }) => JSX.Element) | undefined; [key: string]: ((...args: any[]) => JSX.Element) | undefined; };
   ref?: (h: DataTableHandle) => void;
 }
 
@@ -603,8 +680,8 @@ export interface DataTableHandle {
 }
 
 export default function DataTable(_props: DataTableProps): JSX.Element {
-  const _merged = mergeProps({ columns: (() => [])() as any[], selectionMode: 'none', manual: false, rowCount: null, pageCount: null, expandable: false, getSubRows: null, groupable: false, stickyHeader: false, interactionMode: 'table', singleClickEdit: false, undoable: false, undoLimit: 100, virtual: false, estimateRowHeight: 40, autoMeasure: false, maxHeight: '' }, _props);
-  const [local, attrs] = splitProps(_merged, ['data', 'columns', 'selectionMode', 'sorting', 'globalFilter', 'columnFilters', 'pagination', 'manual', 'rowCount', 'pageCount', 'expandable', 'expanded', 'getSubRows', 'groupable', 'grouping', 'rowSelection', 'columnVisibility', 'columnSizing', 'columnOrder', 'columnPinning', 'stickyHeader', 'interactionMode', 'singleClickEdit', 'undoable', 'undoLimit', 'virtual', 'estimateRowHeight', 'autoMeasure', 'maxHeight', 'children', 'ref', 'onSortChange', 'onExpandChange', 'onGroupChange', 'onFilterChange', 'onPageChange', 'onSelectionChange', 'onVisibilityChange', 'onResizeChange', 'onReorderChange', 'onPinChange', 'onHistoryChange', 'onActivecellChange', 'onRangeChange', 'onCellEditCommit', 'onRowEditCommit']);
+  const _merged = mergeProps({ columns: (() => [])() as any[], selectionMode: 'none', manual: false, rowCount: null, pageCount: null, expandable: false, getRowId: null, getSubRows: null, groupable: false, stickyHeader: false, interactionMode: 'table', singleClickEdit: false, undoable: false, undoLimit: 100, virtual: false, estimateRowHeight: 40, autoMeasure: false, maxHeight: '' }, _props);
+  const [local, attrs] = splitProps(_merged, ['data', 'columns', 'selectionMode', 'sorting', 'globalFilter', 'columnFilters', 'pagination', 'manual', 'rowCount', 'pageCount', 'expandable', 'expanded', 'getRowId', 'getSubRows', 'groupable', 'grouping', 'rowSelection', 'columnVisibility', 'columnSizing', 'columnOrder', 'columnPinning', 'stickyHeader', 'interactionMode', 'singleClickEdit', 'undoable', 'undoLimit', 'virtual', 'estimateRowHeight', 'autoMeasure', 'maxHeight', 'children', 'ref', 'onSortChange', 'onExpandChange', 'onGroupChange', 'onFilterChange', 'onPageChange', 'onSelectionChange', 'onVisibilityChange', 'onResizeChange', 'onReorderChange', 'onPinChange', 'onHistoryChange', 'onVisibleRangeChange', 'onActivecellChange', 'onRowActivate', 'onRangeChange', 'onCellEditCommit', 'onRowEditCommit']);
   const resolved = () => local.children;
   onMount(() => { local.ref?.({ sortColumn, clearSorting, toggleRowExpanded, expandAll, collapseAll, getExpandedRows, applyGrouping, clearGrouping, getFacetedUniqueValues, getFacetedMinMaxValues, getColumnDefs, toggleAllRows, clearSelection, getSelectedRows, setPage, setRowsPerPage, toggleColumnVisibility, applyColumnOrder, resetColumnSizing, pinColumn, focusCell, getActiveCell, clearActiveCell, getRowIndexRelativeToPage, editCell, commitEditing, editRow, getSelectedRange, cut, undo, redo, canUndo, canRedo, clearHistory }); });
 
@@ -674,6 +751,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   const [rangeAnchor, setRangeAnchor] = createSignal<any>(null);
   const [rangeFocus, setRangeFocus] = createSignal<any>(null);
   const [pasteAnnounce, setPasteAnnounce] = createSignal('');
+  const [rangeAnnounce, setRangeAnnounce] = createSignal('');
   const [liveAnnounce, setLiveAnnounce] = createSignal('');
   onMount(() => {
     // Seed the uncontrolled `data` fallback (Phase 51 req-4) from the initial prop so an
@@ -698,7 +776,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       // the getter bought nothing. Snapshot the initial data here; setOptions owns updates.
       // currentData() = the bound prop when controlled, else the uncontrolled $data.dataDefault
       // (Phase 51 req-4 — so a committed edit's writeData re-feed is observed either way).
-      data: currentData(),
+      data: feedData(),
       columns: tableColumns(),
       state: currentState(),
       getCoreRowModel: getCoreRowModel(),
@@ -713,7 +791,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       // default `!!subRows.length` rule applies (only parents with children expand).
       getExpandedRowModel: getExpandedRowModel(),
       getSubRows: (local.getSubRows || undefined) as any,
-      getRowCanExpand: local.expandable === true && local.getSubRows == null ? () => true : undefined,
+      // Row identity (quick 260925-rew) — see rowIdOption(). Re-passed on re-feed like the
+      // other row-model fns.
+      getRowId: rowIdOption(),
+      getRowCanExpand: local.expandable === true && local.getSubRows == null ? (row: any) => !rowIsLazyPlaceholder(row) : undefined,
       onExpandedChange: onExpandedChangeCb,
       // Grouping auto-expand (phase 50 req-4): table-core's autoResetExpanded defaults TRUE, so a
       // POST-MOUNT setGrouping (the consumer #groupBar / applyGrouping verb) auto-fires
@@ -758,7 +839,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       // Row selection (req-7): enabled unless 'none'; 'single' caps at ≤1
       // (enableMultiRowSelection:false). Select-all scope = filtered rows (TanStack
       // default, D-06 — NOT overridden).
-      enableRowSelection: local.selectionMode !== 'none',
+      enableRowSelection: rowSelectionOption(),
       enableMultiRowSelection: local.selectionMode === 'multiple',
       // PER-SLICE callbacks (Open-Q1: each maps 1:1 to a slice's r-model + change event,
       // no global onStateChange diff) — hoisted top-level consts, re-passed by the re-feed
@@ -802,6 +883,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       // NEVER in a render helper (Pitfall 1). Pass the COMPLETE options set (virtual-core's
       // setOptions replaces, not merges). Guarded so the off path executes no virtual-core code.
       if (rowsWindowed() && virtualizer) {
+        // Rekey any placeholder rows this re-feed just filled (quick 260926, VR probe) BEFORE
+        // handing the virtualizer its fresh options — see migratePlaceholderSizeCache()'s own
+        // comment (virtualization.rzts) for the itemSizeCache/getMeasurements memo root cause.
+        migratePlaceholderSizeCache();
         virtualizer.setOptions(virtualizerOptions());
         virtualizer._willUpdate();
       }
@@ -872,6 +957,21 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // cell selectors hang off (the exact idiom proven ×6 by plan 01's probe). Captured here
     // (post-mount) so it is non-null and ROZ123-clean.
     gridRoot = __rozieRootRef! ? __rozieRootRef!.querySelector('.rozie-data-table') : null;
+    // B-02: the click-away detector. `composedPath()` rather than `ev.target` because on Lit the
+    // grid lives in a shadow root and a document-level listener sees the retargeted HOST element,
+    // which is never `gridRoot.contains(...)` — every in-grid click would read as "outside".
+    if (typeof document !== 'undefined') {
+      docPointerDown = (ev: any) => {
+        if (!gridRoot) {
+          outsidePointerDown = false;
+          return;
+        }
+        const path = ev && typeof ev.composedPath === 'function' ? ev.composedPath() : null;
+        const inside = path ? path.indexOf(gridRoot) !== -1 : !!(ev && ev.target && gridRoot.contains && gridRoot.contains(ev.target));
+        outsidePointerDown = !inside;
+      };
+      document.addEventListener('pointerdown', docPointerDown, true);
+    }
     // WR-04: NO on-mount auto-focus of the entry cell. Auto-focusing here stole focus on
     // page load AND was non-deterministic on React/Solid (the entry cell may not be
     // committed to the DOM yet at the $onMount microtask). The roving tabindex="0" entry
@@ -1001,6 +1101,12 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     announceState.globalFilter = effectiveGlobalFilter();
   });
   onCleanup(() => {
+    // B-02: drop the document click-away listener (it is attached for the instance's lifetime,
+    // not per edit session — attaching it per session would freeze a stale closure on React).
+    if (docPointerDown && typeof document !== 'undefined') {
+      document.removeEventListener('pointerdown', docPointerDown, true);
+      docPointerDown = null;
+    }
     if (virtualizerCleanup) virtualizerCleanup();
     // Phase 87 87-04: tear down the column virtualizer's scroll-element ResizeObserver too.
     // No-op when column windowing was off (cleanup stays null).
@@ -1020,6 +1126,17 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   });
   createEffect(() => {
     maybeClearHistoryOnExternalSwap();
+    // visible-range-change backstop (quick 260925-dtl part 2): a re-render from new data can move
+    // the rendered window WITHOUT a window-version bump (measured on React: filling placeholders
+    // shifted the window by two rows and nothing was reported). Deduped, so a render that leaves
+    // the window where it was emits nothing.
+    emitVisibleRangeIfChanged();
+    // A-02: the post-render hook is the one place that observes EVERY column-width change on all
+    // six targets — an interactive resize writes `columnSizing` through table-core under
+    // `columnResizeMode: 'onChange'` and never reaches the coarse re-feed watch (which keys on
+    // `$props.columnSizing`, undefined on the uncontrolled path). Self-guarded on the width
+    // signature, so a tick that changed no width costs one loop over the leaf columns.
+    remeasureColumnSizes();
     if (!table) return;
     // Phase 51 req-4: track currentData() (the bound prop OR the uncontrolled
     // $data.dataDefault) so a committed edit re-feeds on Lit whether or not the two-way
@@ -1031,6 +1148,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     lastDataLen = d.length;
     reFeed();
   });
+  createEffect(on(() => (() => windowVer())(), (v) => untrack(() => (() => emitVisibleRangeIfChanged())()), { defer: true }));
   createEffect(on(() => (() => [sorting(), globalFilter(), columnFilters(), pagination(),
   // Server-side page-count sources (#2): re-feed when the consumer's rowCount/pageCount
   // changes at runtime (e.g. a server response updates the total) so getPageCount() and the
@@ -1105,6 +1223,12 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // handle and TS2322s on a numeric seed.
   let remeasureRaf: any = null;
   let remeasureDisposed = false;
+  // D-19 (quick 260923-rrr): "the user scrolled to the end" — recorded only when the scroll
+  // offset actually MOVED (a growth-driven onChange leaves it where it was), with the row count
+  // and offset at that moment. See scheduleRemeasure() in virtualization.rzts.
+  let scrollEndPinned: boolean = false;
+  let scrollEndPinnedCount: number = -1;
+  let scrollEndPinnedTop: number = -1;
 
   // ── Grid interaction-mode constants + DOM root (phase 49, REQ-2/6) ────────────────────
   // Fixed PageUp/PageDown row step (D-06). Phase 53 swaps this for the visible-window size
@@ -1117,6 +1241,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // querySelector-off-root precedent, proven ×6 by plan 01's probe). NEVER read in a
   // computed/template binding (ROZ123).
   let gridRoot: any = null;
+  // ── B-02: "did the user just click OUTSIDE the grid?" ──────────────────────────────────
+  // Set by the document-level pointerdown listener registered in $onMount, consumed by
+  // onEditorBlur's null-relatedTarget branch (editorBindings.rzts), which explains in full why
+  // the decision has to come from here and be routed back there. In short: a null relatedTarget
+  // on its own cannot tell a click onto a non-focusable page region (the edit must commit) from
+  // an editor being recycled out of the virtual window (it must NOT), and a document listener
+  // cannot commit for itself on React because it closes over the render that attached it — the
+  // draft it would write is the one from editor-open. A plain module-let is hoisted to a
+  // per-instance `useRef` there, so it is read FRESH from the template-bound blur handler.
+  // Capture phase, so a stopPropagation anywhere in the page cannot hide the click from us.
+  let outsidePointerDown = false;
+  let docPointerDown: any = null;
 
   // Echo-guard: while WE are writing a slice back, the re-feed watcher must not re-enter
   // the funnel. A counter (not a boolean) so nested writes are safe.
@@ -1360,6 +1496,54 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // ({ id?, header, columns: [...] }) maps to a multi-level header GROUP column
   // whose children are built recursively (B12 — grouped/multi-level column headers).
   // Returns null for an unusable entry (no id/field, unsafe key, empty group).
+  /**
+   * A-01 — translate the public per-column `width` into table-core's `size`.
+   *
+   * `width` was written onto the ColumnDef in both build branches and read by NOTHING:
+   * table-core resolves column width from `size` (a NUMBER of px), which only the two
+   * chrome columns ever set. So the documented API was completely inert — the exact
+   * sibling of the inert `pinned` that 0.5.0 closed.
+   *
+   * `size` is numeric px by construction, so only a number or a px string can map onto
+   * it; any other CSS length (`12rem`, `20%`, `auto`) has no numeric px value at build
+   * time and is deliberately NOT guessed — it returns null and the column keeps
+   * table-core's default. The `width` prop's docs say exactly this.
+   *
+   * Returns null (not undefined) for "no usable width" so callers can test `!= null`
+   * without tripping over a legitimate 0.
+   */
+  function parseWidthToSize(w: any) {
+    if (typeof w === 'number') return Number.isFinite(w) && w > 0 ? w : null;
+    if (typeof w !== 'string') return null;
+    const t = w.trim();
+    if (t === '') return null;
+    const m = /^(\d+(?:\.\d+)?)(px)?$/i.exec(t);
+    if (!m) return null;
+    const n = Number.parseFloat(m[1]);
+    return Number.isFinite(n) && n > 0 ? n : null;
+  }
+
+  // ── E-03 ────────────────────────────────────────────────────────────────────────────────
+  // The union check itself is `editorKindWarning` in helpers/columnDefUtils.ts (pure, so the
+  // contract is unit-testable). Here we own the two things that are not pure: WHEN it runs and
+  // how often it speaks.
+  //
+  // WHEN: at column-BUILD time, not in `editorTypeOf`, which is called per cell per render (D-23).
+  // HOW OFTEN: latched per `id:value`, so a rebuild — the memo misses whenever the column set
+  // changes identity — cannot turn one misconfiguration into a console flood.
+  // Unguarded console.warn, matching the D-07/D-08 virtual-misconfig warns in DataTable.rozie:
+  // a process.env guard is not bundler-portable across six targets, and always-warn-on-misconfig
+  // is the established call in this component.
+  const editorWarned = Object.create(null);
+  function checkEditorKind(id: any, editor: any) {
+    const msg = editorKindWarning(id, editor);
+    if (!msg) return editor;
+    const key = id + '\u0000' + String(editor);
+    if (editorWarned[key]) return editor;
+    editorWarned[key] = true;
+    console.warn(msg);
+    return editor;
+  }
   function buildConfigDef(c: any) {
     if (!c) return null;
     // Grouped (multi-level) header column: an entry carrying a `columns` array. table-core's
@@ -1415,11 +1599,17 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       aggregationFn: wrapAggregationFn(c.aggregationFn),
       pinned: c.pinned != null ? c.pinned : '',
       width: c.width != null ? c.width : '',
+      // A-01 — `width` alone is inert; table-core sizes from `size`. Spread so an
+      // unusable width leaves `size` ABSENT rather than explicitly undefined, which
+      // would override a consumer's `defaultColumn.size`.
+      ...(parseWidthToSize(c.width) != null ? {
+        size: parseWidthToSize(c.width)
+      } : {}),
       // Editable-cell config (Phase 51) → ColumnDef.meta, the table-core per-column
       // metadata carrier the display↔editor branch + runValidator read. Off by default.
       meta: {
         editable: c.editable === true,
-        editor: c.editor != null ? c.editor : 'text',
+        editor: c.editor != null ? checkEditorKind(id, c.editor) : 'text',
         editorOptions: c.editorOptions != null ? c.editorOptions : [],
         validate: typeof c.validate === 'function' ? c.validate : null
       }
@@ -1499,10 +1689,14 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         aggregationFn: wrapAggregationFn(spec.aggregationFn),
         pinned: spec.pinned != null ? spec.pinned : '',
         width: spec.width != null ? spec.width : '',
+        // A-01 — see buildConfigDef; same mapping for the <Column> registry branch.
+        ...(parseWidthToSize(spec.width) != null ? {
+          size: parseWidthToSize(spec.width)
+        } : {}),
         // Editable-cell config (Phase 51) → ColumnDef.meta from the <Column> registry spec.
         meta: {
           editable: spec.editable === true,
-          editor: spec.editor != null ? spec.editor : 'text',
+          editor: spec.editor != null ? checkEditorKind(id, spec.editor) : 'text',
           editorOptions: spec.editorOptions != null ? spec.editorOptions : [],
           validate: typeof spec.validate === 'function' ? spec.validate : null
         }
@@ -2130,9 +2324,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       }
     }
     // Active cell's column (D-10): required or focusActiveCell()'s [data-col-index="N"]
-    // querySelector cannot resolve for an off-window active cell. Body cells only — a header-
-    // active cell has no column-axis rendering dependency here (headers window separately).
-    if (!activeIsHeader() && activeColIndex() >= 0 && out.indexOf(activeColIndex()) === -1) {
+    // querySelector cannot resolve for an off-window active cell.
+    //
+    // B-03: this used to be body-cells-only, on the stated grounds that "a header-active cell
+    // has no column-axis rendering dependency here (headers window separately)". That is false —
+    // `windowedHeadersFor()` slices the header row from `windowedColIndices()`, the very set this
+    // function feeds, so a header cell has EXACTLY the same dependency a body cell does. With the
+    // active header column unforced, focusing a leaf header in a 60-column windowed grid and
+    // pressing End left `resolveCellEl` with nothing to find: focus froze on the old `<th>` while
+    // the roving model moved on, and `cellTabindex` handed `tabindex="0"` to a cell that does not
+    // exist — so the grid had no tab stop at all. The gate is gone; the column is forced for
+    // whichever axis the active cell is on.
+    if (activeColIndex() >= 0 && out.indexOf(activeColIndex()) === -1) {
       out.push(activeColIndex());
     }
     // Editing column (D-10): required or an open editor unmounts mid-keystroke when a
@@ -2210,21 +2413,64 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   //     committed yet), so the rAF pass is what observes React's recycled rows.
   // Each pass only OBSERVES + measures the live window; measureElement is idempotent on an
   // already-observed node, so running both is cheap and loop-free.
+  // Upper bound on the frames scheduleRemeasure() will wait for the framework to commit a recycled
+  // window (N-05). Measured commit lag is 1 frame on React/Angular; 10 is generous headroom.
+  const REMEASURE_MAX_FRAMES = 10;
   function scheduleRemeasure() {
     // 87-13: never arm a new sweep after teardown — an onChange can still fire from a
     // virtualizer whose own ResizeObserver cleanup has run but whose queued tick was already
     // in flight.
     if (remeasureDisposed) return;
+    // D-19 (quick 260923-rrr): remember whether the view is at the END — but only when the scroll
+    // offset MOVED since the last record. A measurement-driven onChange (rows growing) arrives
+    // with the offset unchanged, and it is exactly that growth that moves the view off the end,
+    // so it must not clear the pin. (virtual-core's isScrolling cannot tell the two apart: it
+    // stays true for 150ms after the user's scroll, spanning the growth.)
+    if (virtualizer && gridScrollEl && !virtualizer.scrollState && gridScrollEl.scrollTop !== scrollEndPinnedTop) {
+      scrollEndPinnedTop = gridScrollEl.scrollTop;
+      // Judged on virtual-core's MODEL (total size − viewport − offset), not DOM geometry: its own
+      // above-viewport adjustments move scrollTop before the framework commits the matching
+      // spacer, so the DOM transiently reads "not at the end" for a view that is (measured on
+      // Angular: a 12px adjustment cleared a DOM-judged pin and left the view 12px short).
+      scrollEndPinned = virtualizer.getVirtualDistanceFromEnd() <= 1;
+      scrollEndPinnedCount = windowSource().length;
+    }
     if (remeasurePending) return;
     remeasurePending = true;
     let ranMicro = false;
     const microPass = () => {
       remeasureWindow();
     };
+    // N-05 (quick 260923-rrr): the rAF pass keys on the OUTCOME, not on "a frame went by". React
+    // and Angular commit the recycled window AFTER that first rAF, so a single pass measured the
+    // OLD rows and the new ones were only handed to measureElement when virtual-core's 150ms
+    // scrolling-ended tick fired an onChange — the user saw the un-adjusted layout, then a 1–3 row
+    // jump (measured). While the committed <tr> set does not yet cover the virtualizer's window,
+    // re-run next frame, bounded so a window that can never be covered cannot spin forever.
+    let rafAttempts = 0;
     const rafPass = () => {
       remeasureRaf = null;
+      const covered = remeasureWindow();
+      rafAttempts = rafAttempts + 1;
+      if (!covered && rafAttempts < REMEASURE_MAX_FRAMES && !remeasureDisposed && typeof requestAnimationFrame === 'function') {
+        remeasureRaf = requestAnimationFrame(rafPass);
+        return;
+      }
+      // D-19: keep a user who scrolled to the END at the end. When rows at/above the viewport
+      // measure taller than their estimate, virtual-core compensates with a scroll adjustment — but
+      // on React/Angular that adjustment is written BEFORE the framework commits the taller spacer,
+      // so the browser clamps it to the OLD maximum and it is lost (measured: the view ended
+      // 593–1025px above the bottom on React, 30px on Angular). This pass runs after the commit, so
+      // the real maximum is known. Not when the row count changed: appending rows must not
+      // auto-follow them.
+      if (scrollEndPinned && gridScrollEl && !remeasureDisposed && windowSource().length === scrollEndPinnedCount) {
+        const maxTop = gridScrollEl.scrollHeight - gridScrollEl.clientHeight;
+        if (maxTop - gridScrollEl.scrollTop > 1) {
+          gridScrollEl.scrollTop = maxTop;
+          scrollEndPinnedTop = gridScrollEl.scrollTop;
+        }
+      }
       remeasurePending = false;
-      remeasureWindow();
     };
     if (typeof queueMicrotask !== 'undefined') {
       ranMicro = true;
@@ -2258,9 +2504,25 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // unioned into the windowed slice when it scrolls off-window and its height is subtracted from
   // the appropriate spacer so the total stays exactly getTotalSize() (the 51-01-proven mechanism).
   // This is the data-table half of the D-05 windowing.rzts pin-extension hook (listbox provides none).
+  //
+  // B-06 widens this from "the editing row" to "the row that must not recycle out of the
+  // window", which now includes the ACTIVE row in grid mode. The active cell is the grid's ONLY
+  // `tabindex="0"` — `cellTabindex()` returns 0 for it and -1 for every other cell — so once a
+  // wheel-scroll carried it out of the window the grid had NO tab stop at all: Tab could not
+  // re-enter it, and the roving model still pointed at a cell with no DOM node, so
+  // `resolveCellEl` returned null and a subsequent arrow key moved state with nothing to focus.
+  // The column axis has forced the active-cell COLUMN since D-10 (`forcedColumns`); this is the
+  // row-axis twin of that decision, and it costs at most one extra rendered row, in flow, with
+  // its height subtracted from the spacer by the same 51-01 mechanism the editing pin uses.
+  //
+  // `$props.interactionMode` is read directly rather than through `isGrid()` (gridFocusNav.rzts):
+  // that partial is imported AFTER this one, and this file's header documents the
+  // forward-cross-partial-reference TDZ on React that the 87-02 lesson established. A prop read
+  // has no such hazard.
   function pinnedEditIndex() {
     if (editingRow() >= 0) return editingRow();
     if (editingRowIndex() != null) return editingRowIndex();
+    if (local.interactionMode === 'grid' && !activeIsHeader() && activeRow() >= 0) return activeRow();
     return -1;
   }
   // pinnedMeasurement(pin): the virtual-core measurement { index, start, size, end, key } for the
@@ -2287,8 +2549,8 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // cover unmount — virtualizer/gridRoot are assigned in $onMount and never nulled — so this
     // is the only thing standing between a pass queued pre-unmount and refineRowEstimate()'s
     // setOptions/scrollTop/$data.windowVer writes against a torn-down instance.
-    if (remeasureDisposed) return;
-    if (!virtualizer || !gridRoot) return;
+    if (remeasureDisposed) return true;
+    if (!virtualizer || !gridRoot) return true;
     // Bail ONLY while a PROGRAMMATIC scroll is in flight: virtualizer.scrollState is non-null
     // exclusively during scrollToIndex / scrollToOffset (the D-12 scroll-then-focus seam) and
     // null for ordinary user/scrollTop-driven scrolling (verified virtual-core@3.17.1: set in
@@ -2296,9 +2558,23 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // resizeItem nudge the offset and starve the scroll target (the Solid off-window focus
     // regression); the next settled onChange re-measures the stable window. Manual-scroll
     // recycling (the CR-01 case) has scrollState === null, so it measures normally.
-    if (virtualizer.scrollState) return;
+    if (virtualizer.scrollState) return true;
     const trs = gridRoot.querySelectorAll('tbody.rdt-tbody > tr[data-index]');
-    for (const tr of trs as any) virtualizer.measureElement(tr);
+    const rendered = new Set();
+    for (const tr of trs as any) {
+      virtualizer.measureElement(tr);
+      rendered.add(tr.getAttribute('data-index'));
+    }
+    // N-05: did the committed rows cover the virtualizer's CURRENT window? False while the
+    // framework has not yet committed the recycled set (see scheduleRemeasure).
+    let covered = true;
+    const items = virtualizer.getVirtualItems();
+    for (let i = 0; i < items.length; i++) {
+      if (!rendered.has(String(items[i].index))) {
+        covered = false;
+        break;
+      }
+    }
     // D-15 (Phase 87 87-07): trigger the shared engine's post-measurement fold + hysteresis
     // re-feed via the afterRowRemeasure mutable-let hook (DataTable.rozie's own script,
     // assigned to windowing.rzts's refineRowEstimate()) — NEVER a direct call from this file
@@ -2307,6 +2583,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // documents for columnVirtualizerOptions()). Inert (no-op) until the host assigns it; the
     // off/pre-mount path never reaches this line since virtualizer is null there.
     if (afterRowRemeasure) afterRowRemeasure();
+    return covered;
   }
 
   // D-04: this shell exports ONLY the impure, data-table-specific host pieces. The pure windowing
@@ -2315,6 +2592,113 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // `@rozie-ui/headless-core/windowing.rzts` via bare specifier — the P0-proven cross-package inline
   // path that DISSOLVES the partial into the leaf (a re-export-from THROUGH this shell would survive as
   // a runtime import, not inline — verified). The math closes over these host symbols by convention.
+  // ── Lazy rows (quick 260925-dtl part 2, oinbox dogfooding) ─────────────────────────────────────
+  // `virtual` + `manual` + `rowCount`: the row space is rowCount long and `data` may be SPARSE —
+  // an `undefined`/`null` entry (or anything past data.length) is a row not loaded yet. Such holes
+  // are fed to table-core as placeholder sentinels (one cached object per index, so a re-feed does
+  // not churn them) that render as placeholder rows and can't be selected, expanded, edited or
+  // activated. ONLY the table-core feed is padded: every write-back derives from currentData(), the
+  // consumer's own array, so a sentinel can never leak into `data`.
+  const LAZY_PLACEHOLDER_KEY = '__rdtLazyPlaceholder';
+  // LAZY_PLACEHOLDER_ROW_ID_PREFIX: the table-core row-id table.rowIdOption() (DataTable.rozie)
+  // assigns to a placeholder ('__rdt_ph_' + index — no consumer row to ask, so it keys by
+  // position). Shared here (not re-literaled) because migratePlaceholderSizeCache() below and
+  // rowIdOption() must agree byte-for-byte on the prefix or the migration's key scan silently
+  // finds nothing.
+  const LAZY_PLACEHOLDER_ROW_ID_PREFIX = '__rdt_ph_';
+  let lazyPlaceholders: Record<number, any> = {};
+  function lazyRowsActive() {
+    return rowsWindowed() && !!local.manual && local.rowCount != null && local.rowCount > 0;
+  }
+  function isLazyPlaceholder(orig: any): boolean {
+    return !!orig && orig[LAZY_PLACEHOLDER_KEY] === true;
+  }
+  function rowIsLazyPlaceholder(row: any): boolean {
+    return !!row && isLazyPlaceholder(row.original);
+  }
+  function feedData() {
+    const d: any[] = currentData() || [];
+    if (!lazyRowsActive()) return d;
+    const n = Math.max(d.length, Number(local.rowCount));
+    const out: any[] = new Array(n);
+    for (let i = 0; i < n; i++) {
+      const v = d[i];
+      if (v != null) {
+        out[i] = v;
+      } else {
+        if (!lazyPlaceholders[i]) lazyPlaceholders[i] = {
+          [LAZY_PLACEHOLDER_KEY]: true,
+          index: i
+        };
+        out[i] = lazyPlaceholders[i];
+      }
+    }
+    return out;
+  }
+
+  // migratePlaceholderSizeCache() (quick 260926, VR probe on data-table-lazy [react]): a filled
+  // placeholder's row id changes ('__rdt_ph_' + i -> the real getRowId id), and virtual-core's
+  // getItemKey re-keys by it — but virtual-core's itemSizeCache (dist/esm/index.js@3.17.1) is a
+  // bare Map keyed by the OLD key, so the new key has no entry. The next getMeasurements() recompute
+  // then estimates that row at $props.estimateRowHeight instead of its already-known measured size;
+  // the CR-01 sweep re-measures it moments later and each delta fires one applyScrollAdjustment,
+  // walking the window's anchor off by their sum (measured: 9 rows x -4px = -36px, row 5000 -> 4999
+  // on React — the other 5 targets happened to keep reading the stale pre-refeed measurements array
+  // and never saw the estimate at all). Fix: carry the cached size across the rekey, keyed off
+  // table-core's OWN freshly-assigned id (table.getCoreRowModel().rows[i].id, NOT a locally
+  // recomputed getRowId() call — must be byte-identical to what virtualItemKey(i) reads next) so
+  // the cache is already correct before the caller's virtualizer.setOptions()/_willUpdate() re-feed.
+  // Invalidating the memo needs BOTH strategies below, not just one: getMeasurements() is
+  // memoized on [getMeasurementOptions(), itemSizeCacheVersion] on 3.15+ (confirmed from the
+  // installed source; the same fact windowing.rzts's refineRowEstimate() comment documents) —
+  // but our peer range is `^3`, and versions <=3.14 have NO itemSizeCacheVersion at all and key
+  // the SAME memo on `this.itemSizeCache` (Map IDENTITY) instead — verified against the 3.14.0
+  // tarball, whose own resizeItem() invalidates by reassigning `this.itemSizeCache = new Map(...)`,
+  // never by bumping a version counter. Mutating the Map in place would be silently invisible to
+  // that memo on <=3.14 (a stray `itemSizeCacheVersion++` there just creates a NaN-valued own
+  // property nobody reads). So this reassigns the Map (a public field on every 3.x we support —
+  // harmless on 3.15+, whose memo body re-reads `this.itemSizeCache` fresh) AND bumps the version
+  // counter only where it actually exists. Scans the CACHE's own placeholder-prefixed keys
+  // (bounded by rows actually measured so far), never rowCount (unbounded — 10,000+ here).
+  function migratePlaceholderSizeCache(): void {
+    if (!virtualizer || !virtualizer.itemSizeCache || !table) return;
+    const cache = virtualizer.itemSizeCache;
+    const coreRows = table.getCoreRowModel().rows;
+    let migrated = false;
+    for (const oldKey of Array.from(cache.keys()) as any) {
+      if (typeof oldKey !== 'string' || oldKey.indexOf(LAZY_PLACEHOLDER_ROW_ID_PREFIX) !== 0) continue;
+      const i = Number(oldKey.slice(LAZY_PLACEHOLDER_ROW_ID_PREFIX.length));
+      const row = coreRows[i];
+      if (!row || rowIsLazyPlaceholder(row) || row.id === oldKey) continue;
+      cache.set(row.id, cache.get(oldKey));
+      cache.delete(oldKey);
+      migrated = true;
+    }
+    if (!migrated) return;
+    virtualizer.itemSizeCache = new Map(cache);
+    if (typeof virtualizer.itemSizeCacheVersion === 'number') virtualizer.itemSizeCacheVersion++;
+  }
+
+  // `visible-range-change { start, end }` — the RENDERED row window (overscan included), `end`
+  // exclusive, over the full row space. Driven by the window-version bump every virtualizer change
+  // routes through, deduped here so a scroll that doesn't move the window emits nothing.
+  let lastRangeStart = -1;
+  let lastRangeEnd = -1;
+  function emitVisibleRangeIfChanged() {
+    if (!rowsWindowed() || !virtualizer) return;
+    const items = virtualizer.getVirtualItems();
+    if (!items.length) return;
+    const start = items[0].index;
+    const end = items[items.length - 1].index + 1;
+    if (start === lastRangeStart && end === lastRangeEnd) return;
+    lastRangeStart = start;
+    lastRangeEnd = end;
+    _props.onVisibleRangeChange?.({
+      start,
+      end
+    });
+  }
+
   // ══ Generic vertical windowing math (Phase 64, D-04) — the target-agnostic virtual-core bridge ══
   // Lifted verbatim from the DataTable virtualization.rzts (the Phase 53/63 B13 baseline). This partial
   // holds ONLY the PURE windowing math; every DOM/refs/virtualizer-instance impurity stays per-consumer
@@ -2691,6 +3075,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // makes the eventual render land strictly AFTER this fold + re-feed has fully landed, on
     // every target (the 87-10 fix for the confirmed Solid-specific rendering gap).
     bumpWindowVer();
+    // D-19 (quick 260923-rrr): a re-feed changes every unmeasured row's size, but — unlike a
+    // measurement — it does not go through virtual-core's onChange, so the host's post-commit
+    // pass (which restores an at-the-end view the growth moved off) never ran for it. Schedule it.
+    scheduleRemeasure();
   }
 
   // The FULL virtualizer options. virtual-core's setOptions REPLACES options with
@@ -3090,6 +3478,25 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     }
     return '';
   }
+
+  // The table-core `getRowId` option (quick 260925-rew). Without it table-core keys
+  // rowSelection / expanded by position, so a row inserted above a selected one moves the
+  // selection onto another row. The prop is captured into a local so the null check narrows
+  // inside the arrow (TS2721 on the Vue leaf otherwise), and String() because table-core
+  // compares ids as strings.
+  function rowIdOption() {
+    const f = local.getRowId;
+    // A lazy placeholder has no consumer row to ask — key it by its index (see feedData()).
+    // Prefix shared with migratePlaceholderSizeCache() (virtualization.rzts) — see its own comment.
+    return f ? (originalRow: any, index: any, parent: any) => isLazyPlaceholder(originalRow) ? LAZY_PLACEHOLDER_ROW_ID_PREFIX + originalRow.index : String(f(originalRow, index, parent)) : undefined;
+  }
+
+  // table-core `enableRowSelection`: off for selectionMode 'none'; with lazy rows a placeholder
+  // (a row not loaded yet) is never selectable, so select-all takes the loaded rows only.
+  function rowSelectionOption() {
+    if (local.selectionMode === 'none') return false;
+    return lazyRowsActive() ? (row: any) => !rowIsLazyPlaceholder(row) : true;
+  }
   // Push fresh options into table-core + re-pull the row model. Extracted so BOTH the
   // re-feed $watch (above) and the Lit data-change $onUpdate (below) call it.
   function reFeed() {
@@ -3102,10 +3509,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // below (`maybeClearHistoryOnExternalSwap`), which runs on all six targets.
     table.setOptions((prev: any) => ({
       ...prev,
-      data: currentData(),
+      data: feedData(),
       columns: tableColumns(),
       state: currentState(),
-      enableRowSelection: local.selectionMode !== 'none',
+      enableRowSelection: rowSelectionOption(),
       enableMultiRowSelection: local.selectionMode === 'multiple',
       // Re-pass the server-side page-count sources (#2) so a RUNTIME rowCount/pageCount change
       // takes effect: setOptions REPLACES via `...prev`, which holds the value captured at
@@ -3118,7 +3525,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       // onExpandedChange callback must re-capture fresh currentState each cycle, F6).
       getExpandedRowModel: getExpandedRowModel(),
       getSubRows: (local.getSubRows || undefined) as any,
-      getRowCanExpand: local.expandable === true && local.getSubRows == null ? () => true : undefined,
+      // Row identity (quick 260925-rew) — see rowIdOption(). Re-passed on re-feed like the
+      // other row-model fns.
+      getRowId: rowIdOption(),
+      getRowCanExpand: local.expandable === true && local.getSubRows == null ? (row: any) => !rowIsLazyPlaceholder(row) : undefined,
       onExpandedChange: onExpandedChangeCb,
       // Grouping auto-expand (phase 50 req-4): table-core's autoResetExpanded defaults TRUE, so a
       // POST-MOUNT setGrouping (the consumer #groupBar / applyGrouping verb) auto-fires
@@ -3444,9 +3854,17 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // read header.getSize() — the group-aware size (see headerWidth's own comment). pinStyle still
   // keys off the plain column id (pinning is a leaf-column-only concern; a grouped header never
   // pins as a unit in this codebase's model).
-  function thStyle(header: any) {
+  // A-03: `widthPx` is the in-window leaf-width sum windowedHeadersFor() computed alongside the
+  // clamped colspan. When it is present it WINS over headerWidth(), which reports
+  // Header.getSize() — every descendant leaf, in-window or not — and so over-declares a straddling
+  // group by exactly the leaves the colspan already excluded. Null on the unwindowed path and from
+  // the non-windowed header body, which both keep headerWidth() verbatim.
+  // `widthPx` carries an EXPLICIT `= null` default for the same reason setRangeFocus's anchor
+  // params do: the emitted signature types a declared param as required, and the non-windowed
+  // header body calls `thStyle(header)` with one argument — TS2554 on the strict leaf typecheck.
+  function thStyle(header: any, widthPx = null) {
     let s = '';
-    const w = headerWidth(header);
+    const w = widthPx != null && widthPx > 0 ? widthPx + 'px' : headerWidth(header);
     if (w) s += 'width:' + w + ';';
     s += pinStyle(header && header.column ? header.column.id : null, 2);
     return s;
@@ -3830,7 +4248,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     if (selectAllBox) selectAllBox.indeterminate = isSomeRowsSelected() && !isAllRowsSelected();
   }
 
-  // The registry API handed to <Column> children (whole-object-replace — T-48-PP guard).
+  // C-09's value-equality guard. Imported HERE, in DataTable.rozie's OWN script, because that
+  // is where it is USED: a `.rzts` partial's import of a symbol the partial itself never
+  // references is dropped as unused, and the host script then reaches a free identifier. That
+  // failed at RUNTIME, not at compile time — `ReferenceError: columnSpecsEquivalent is not
+  // defined` on the first paste — which is the only way this class of mistake shows up.
 
   // Imperative handle (consumer-callable). Each verb is a PRE-DECLARED top-level
   // `const` (the canonical $expose contract — `$expose({ name })` references a
@@ -3955,6 +4377,23 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     return (hg && hg.headers ? hg.headers : []).indexOf(header);
   }
 
+  // E-05 — a header's ABSOLUTE LEAF-column start index, which is NOT the same as its position
+  // in the group's header array: a grouped header occupies ONE array slot but spans colSpan leaf
+  // columns, so positions and leaf indices diverge the moment a header group exists. Walk the
+  // group accumulating colSpan to the target. Window-independent by construction (a header's
+  // leaf start is a full-model property), so both the windowed grid header and the plain
+  // non-grid header can share it.
+  function headerLeafStart(hg: any, header: any) {
+    const list = hg && hg.headers ? hg.headers : [];
+    let leaf = 0;
+    for (let i = 0; i < list.length; i++) {
+      if (list[i] === header) return leaf;
+      const h = list[i];
+      leaf = leaf + (h && h.colSpan > 1 ? h.colSpan : 1);
+    }
+    return -1;
+  }
+
   // ── C1 (phase 63 wave-6) absolute-index bridge ─────────────────────────────────────────
   // The PUBLIC active-cell rowIndex (focusCell/getActiveCell/activecell-change) is the ABSOLUTE
   // display-order position in getPrePaginationRowModel().rows (filter+sort+expand applied, BEFORE
@@ -4041,7 +4480,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // post-mount root. Uniform on all six, shadow-safe (the query runs from inside the
   // component's own scope). rowKey is the literal '__header' or a String(integer index) and
   // colIndex is an integer — NO consumer string is interpolated into the selector (T-49-01).
-  function resolveCellEl(rowKey: any, colIndex: any, level = null) {
+  // `level` is ANNOTATED, not just defaulted: an untyped `level = null` infers the param type as
+  // `null`, so every header call site passing a real level (`lvl`, activeHeaderLevel) was a
+  // TS2345 under the strict leaf typecheck (quick 260922-mkb — B-03 added one more such call).
+  function resolveCellEl(rowKey: any, colIndex: any, level: number | null = null) {
     if (!gridRoot) return null;
     // B12: a grouped multi-level header has MULTIPLE cells sharing data-row="__header" at the
     // same data-col-index across levels (parent vs leaf). Disambiguate header lookups by the
@@ -4101,10 +4543,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // both are out, and the ONE existing poll below is reused unchanged — it already resolves the
     // target cell by BOTH (row, col) via resolveCellEl(String(r), c), so a cell that becomes
     // reachable via the column axis needs no new poll logic (per the plan's own key_links note).
+    // B-03: the COLUMN axis applies to HEADER cells too. This guard used to be `!header &&
+    // (rowOut || colOut)`, so a header-active move to an off-window column never scrolled it in:
+    // `resolveCellEl` returned null, focus froze on the old `<th>` while the state and the ring
+    // ran away to a column with no DOM node, and `cellTabindex` then reported 0 for an unrendered
+    // cell — leaving the grid with ZERO `tabindex="0"` cells and no way back in with Tab. Header
+    // rows genuinely have no ROW-axis window (headers are not row-virtualized), so the row half
+    // stays body-only; only the column half widens.
     const rowOut = rowsWindowed() && virtualizer && rowIsOutsideWindow(r);
     const colOut = colsWindowed() && colVirtualizer && colIsOutsideWindow(c);
-    if (!header && (rowOut || colOut)) {
-      if (rowOut) virtualizer.scrollToIndex(r, {
+    const rowScroll = !header && rowOut;
+    if (rowScroll || colOut) {
+      if (rowScroll) virtualizer.scrollToIndex(r, {
         align: 'center'
       });
       if (colOut) colVirtualizer.scrollToIndex(c, {
@@ -4128,7 +4578,9 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         // A newer focus intent superseded this poll — abort WITHOUT focusing (the user has since
         // navigated / clicked elsewhere; re-focusing this off-window target would yank focus back).
         if (focusIntentEpoch !== myEpoch) return;
-        const el = resolveCellEl(String(r), c);
+        // B-03: resolve with the SAME key the synchronous path below uses, so the poll can
+        // find a header cell. `String(r)` alone addresses body rows only.
+        const el = resolveCellEl(header ? '__header' : String(r), c, header ? lvl : null);
         if (el) {
           el.focus();
           return;
@@ -4161,8 +4613,23 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // HTMLElement ARIA-reflected property (`Element.ariaRowCount: string`), so a same-named method
   // becomes a class field that shadows it on Lit → TS2416 cascades to EVERY @property decorator
   // (the `valueOf`/`nodeType` inherited-DOM-member collision class, authoring playbook §6).
+  // A-04: under `manual` the filtered row model is NOT the total — table-core holds only the
+  // page the consumer handed it, so getFilteredRowModel().rows.length is the PAGE SIZE. The
+  // server-side total lives in the props the consumer passes for exactly this purpose
+  // (`rowCount`, else `pageCount`), which is also table-core's own precedence for getPageCount()
+  // (explicit pageCount wins, else ⌈rowCount / pageSize⌉). Taking them here keeps aria-rowcount
+  // consistent with bodyAriaRowIndex, which already offsets by pageIndex * pageSize and would
+  // otherwise hand a screen reader an index LARGER than the advertised count on any page past
+  // the first. `pageCount * pageSize` is an upper bound (the last page is usually partial) —
+  // an over-count is the safe direction: an aria-rowindex can never exceed it.
+  // With `manual` and NEITHER count set, table-core pins getCanNextPage() to false, so pageIndex
+  // stays 0, the offset is 0 and page-slice-as-total is self-consistent; we leave it alone.
   function totalRowCount() {
     if (!table) return (rows() || []).length;
+    if (local.manual === true) {
+      if (local.rowCount != null) return local.rowCount;
+      if (local.pageCount != null) return local.pageCount * pageSize();
+    }
     const fm = table.getFilteredRowModel();
     return fm && fm.rows ? fm.rows.length : (rows() || []).length;
   }
@@ -4201,6 +4668,27 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     return headerRowCount() + rowIndexOf(row) + ariaPageOffset() + 1;
   }
 
+  // ── E-05: the COLUMN-axis twin of gridAriaRowCount / bodyAriaRowIndex ────────────────
+  // WAI-ARIA: when aria-colcount is set, every cell must carry an aria-colindex and the count
+  // must equal the largest index any cell declares. The row axis has had this since #13; the
+  // column axis had NOTHING repo-wide (0 occurrences of aria-colcount/aria-colindex), which
+  // matters most under column windowing — the rendered <td>s are a WINDOW, so without an
+  // explicit index a screen reader counts the window and announces "column 3 of 6" while the
+  // user sits in absolute column 41.
+  //
+  // The index space is `visibleCellsFor(row)` / the header group's leaf headers — the same one
+  // `colIndexOf` and `data-col-index` already use, INCLUDING the auto-injected select/expander
+  // chrome columns (they are real columns in that list). `visibleColCount()` counts the same
+  // list, so count and indices are mutually consistent by construction.
+  //
+  // NB named gridAriaColCount, NOT ariaColCount: `Element.ariaColCount` / `.ariaColIndex` are
+  // inherited ARIA-reflected properties, so a same-named method becomes a Lit class field that
+  // shadows them → TS2416 cascading to every @property decorator. Exactly the rename discipline
+  // totalRowCount / gridAriaRowCount / bodyAriaRowIndex already document above.
+  function gridAriaColCount() {
+    return visibleColCount();
+  }
+
   // Column count = the visible cell list length (uniform header+body in a flat grid). Reads
   // $data.rows (reactive) so it is fine-grained-correct on Solid/Lit; falls back to the
   // header leaf count when there are no body rows.
@@ -4458,6 +4946,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // Enter/F2 → enter interaction mode: focus the active cell's FIRST interactive control
   // (D-07 — uniform for header sort buttons and body controls; Enter does NOT sort directly).
   // No-op (stay in navigation mode) if the cell has no focusable control.
+  // True when the active cell holds its own focusable controls (a link, a button, a drop-in
+  // widget). Enter then ENTERS them (enterControl) rather than activating the row (row-activate).
+  function activeCellHasControls() {
+    return focusables(currentCellEl()).length > 0;
+  }
   function enterControl() {
     const cellEl = currentCellEl();
     const list = focusables(cellEl);
@@ -4550,7 +5043,9 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // nextRow/nextCol locals and FALLS THROUGH to the shared focus seam (like Ctrl+Home/End). ──
     if ((e.ctrlKey || e.metaKey) && e.shiftKey && !activeIsHeader() && (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight')) {
       e.preventDefault();
-      if (key === 'ArrowUp') extendRange(-activeRow(), 0);else if (key === 'ArrowDown') extendRange(bodyRowCount() - 1 - activeRow(), 0);else if (key === 'ArrowLeft') extendRange(0, -activeColIndex());else extendRange(0, visibleColCount() - 1 - activeColIndex());
+      // B-04: measured from the range's FOCUS corner, which is what extendRange moves — not
+      // from the active cell, which a drag-select or Ctrl+A leaves somewhere else entirely.
+      if (key === 'ArrowUp') extendRange(-rangeFocusRow(), 0);else if (key === 'ArrowDown') extendRange(bodyRowCount() - 1 - rangeFocusRow(), 0);else if (key === 'ArrowLeft') extendRange(0, -rangeFocusCol());else extendRange(0, visibleColCount() - 1 - rangeFocusCol());
       return;
     } else if ((e.ctrlKey || e.metaKey) && !activeIsHeader() && (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight')) {
       e.preventDefault();
@@ -4648,11 +5143,17 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // gated by clipboardActiveAllowed() (== !activeIsHeader) so a header-active Ctrl+C/Ctrl+V
     // falls through to NATIVE behavior — never preventDefault'd, never a silent body mutation
     // (copyRange/pasteRange also self-guard; the verb guard is what plan 63-09's Cut reuses). ──
-    else if ((key === 'c' || key === 'C') && (e.ctrlKey || e.metaKey) && clipboardActiveAllowed()) {
+    // B-07: `clipboardWriteAvailable()` / `clipboardReadAvailable()` are part of the BRANCH
+    // CONDITION, not a guard inside the verb. preventDefault ran first and copyRange/pasteRange
+    // then returned early when `navigator.clipboard` was absent — an insecure `http://` origin, a
+    // permissions policy, an older embedded webview — so the browser's own copy/paste was
+    // suppressed and nothing replaced it: Ctrl+C did nothing whatsoever. Falling through leaves
+    // the native default in charge, which is the only correct behaviour when we cannot act.
+    else if ((key === 'c' || key === 'C') && (e.ctrlKey || e.metaKey) && clipboardActiveAllowed() && clipboardWriteAvailable()) {
       e.preventDefault();
       copyRange();
       return;
-    } else if ((key === 'v' || key === 'V') && (e.ctrlKey || e.metaKey) && clipboardActiveAllowed()) {
+    } else if ((key === 'v' || key === 'V') && (e.ctrlKey || e.metaKey) && clipboardActiveAllowed() && clipboardReadAvailable()) {
       e.preventDefault();
       pasteRange();
       return;
@@ -4662,7 +5163,9 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // Ctrl+C/Ctrl+V (clipboardActiveAllowed) so a header-active Ctrl+X falls through to NATIVE cut
     // and never silently clears a body cell (cutRange also self-guards). Placed beside the C/V
     // shortcuts, BEFORE the printable-key edit-entry branch (which excludes ctrl/meta). ──
-    else if ((key === 'x' || key === 'X') && (e.ctrlKey || e.metaKey) && clipboardActiveAllowed()) {
+    // B-07 applies to Cut too, and gating it on WRITE availability is deliberate: a cut that
+    // cannot copy is data destruction with nothing on the clipboard to paste back.
+    else if ((key === 'x' || key === 'X') && (e.ctrlKey || e.metaKey) && clipboardActiveAllowed() && clipboardWriteAvailable()) {
       e.preventDefault();
       cutRange();
       return;
@@ -4714,6 +5217,44 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       if (!activeIsHeader()) selectAllBody();
       return;
     }
+    // ── B-15: the APG grid pattern's row/column selection keys, and Escape in NAVIGATION mode.
+    // All three were simply absent. They are placed HERE, before every `key === ' '` branch
+    // below, because the boolean in-place toggle matches a bare `' '` without excluding
+    // modifiers — so a Shift+Space on a checkbox cell would have toggled the checkbox instead
+    // of selecting the row, and Ctrl+Space likewise.
+    //
+    // Shift+Space selects the ROW (table-core's own rowSelection slice, through the row's
+    // toggleSelected — the same funnel the per-row checkbox uses, so the change event and the
+    // two-way model behave identically). A no-op when selectionMode is 'none', which is the
+    // honest behaviour: there is no row selection to make.
+    //
+    // Ctrl+Space selects the COLUMN as a full-height CELL RANGE rather than inventing a third
+    // selection concept — the same corners Ctrl+A and shift+arrow drive, so Ctrl+C / Ctrl+X /
+    // Delete / the fill handle all act on it unchanged.
+    //
+    // Escape in navigation mode collapses the range. In-control mode already consumed Escape at
+    // the top of this handler; in navigation mode it did nothing at all, leaving a user who had
+    // shift-arrowed out a rectangle with no keyboard way to drop it short of an arrow key, which
+    // also MOVES. Only preventDefault'd when there is a range to clear, so a consumer's own
+    // Escape handling on a table with no selection is untouched.
+    else if (key === ' ' && e.shiftKey && !e.ctrlKey && !e.metaKey && !activeIsHeader()) {
+      e.preventDefault();
+      if (local.selectionMode !== 'none') {
+        const selRow = (rows() || [])[activeRow()];
+        if (selRow && selRow.toggleSelected) selRow.toggleSelected(!rowIsSelected(selRow));
+      }
+      return;
+    } else if (key === ' ' && (e.ctrlKey || e.metaKey) && !e.shiftKey && !activeIsHeader()) {
+      e.preventDefault();
+      selectActiveColumn();
+      return;
+    } else if (key === 'Escape') {
+      if (rangeActive || rangeAnchor() != null) {
+        e.preventDefault();
+        clearRange();
+      }
+      return;
+    }
     // ── Full-row edit entry (phase 51 req-6 / D-06) — Shift+F2 on an editable active cell puts
     // EVERY editable cell in the active row into edit at once. Tested BEFORE the plain F2 branch
     // (a Shift+F2 must NOT fall through to single-cell F2). Shift+F2 was chosen for the lowest
@@ -4793,6 +5334,14 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       // rAF poll must not steal focus back after the user has already ArrowDown'd to another row.
       recoverGridFocus(String(grpRow), grpCol, null, true);
       return;
+    }
+    // ── row-activate (quick 260925-dtl): Enter on a NON-editable body cell with no controls of
+    // its own opens the row (a list-style "open this item"). Reached only after every edit-entry
+    // and group-toggle branch above has declined; a cell WITH controls keeps entering them.
+    else if (key === 'Enter' && !activeIsHeader() && !activeCellHasControls()) {
+      e.preventDefault();
+      activateRowAt(activeRow(), 'keyboard');
+      return;
     } else if (key === 'Enter' || key === 'F2') {
       e.preventDefault();
       enterControl();
@@ -4887,11 +5436,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // focusin that follows a Shift+Click (rangeClickPending): @mousedown already set the range
     // BEFORE this focusin fires, and a focusin carries no reliable shiftKey, so the @mousedown
     // path owns the shift case and flags it here so the collapse is skipped.
+    // B-11: `rangeClickPending` carries the CELL the Shift+Click landed on, not a bare boolean.
+    // A boolean leaks: Shift+Click on the cell that ALREADY holds focus fires no focusin at all,
+    // so nothing consumed the flag, and the next ordinary navigation click (or Tab) hit this
+    // branch instead and skipped its collapse — leaving a stale rectangle painted while the
+    // active cell moved away. Matching on the coordinates makes a leak self-healing: a focusin on
+    // any OTHER cell falls through to clearRange() and clears the flag on the way past.
     if (rangeTransition) {
       rangeTransition = false;
-    } else if (rangeClickPending) {
-      rangeClickPending = false;
+    } else if (rangeClickPending && rangeClickPending.isHeader === isHeader && rangeClickPending.r === movedRow && rangeClickPending.c === col) {
+      rangeClickPending = null;
     } else {
+      rangeClickPending = null;
       clearRange();
     }
     // The cell box (not an inner control) receiving focus = navigation mode.
@@ -4929,13 +5485,26 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       setActiveIsHeader(false);
       setActiveRow(row);
       setActiveColIndex(col);
-      rangeClickPending = true;
+      // B-11: arm the skip for THIS cell only (see syncActiveFromEvent). Body cell → isHeader
+      // false; the header path never reaches here (rowAttr === '__header' returned above).
+      rangeClickPending = {
+        isHeader: false,
+        r: row,
+        c: col
+      };
       return;
     }
-    // §6 plain mousedown → begin a document-level drag-select anchored at this cell. The mousedown's
-    // native focusin commits the ACTIVE cell to (row,col); beginRangeDrag's first cross-cell
-    // pointermove paints the range via setRangeFocus (anchored at the active cell). A mousedown with
-    // no move collapses to a single active cell (no range).
+    // B-16: a mousedown INSIDE the cell that is currently in edit belongs to the editor — it is
+    // the user placing a caret or drag-selecting TEXT. Starting a cell drag-select from it paints
+    // a grid range over the very cell being typed into, and (with `undoable`) a drag that leaves
+    // the cell then lets Delete/Ctrl+X act on a rectangle the user was never selecting. The
+    // editor owns the gesture; return before any document listener is attached.
+    if (isEditing(row, col)) return;
+    // §6 plain mousedown → begin a document-level drag-select anchored at this cell. The anchor is
+    // passed EXPLICITLY into setRangeFocus by beginRangeDrag (B-01) rather than seeded from the
+    // active cell, which is still the PRE-mousedown one at this point (native focus is a default
+    // action that runs after this handler). A mousedown with no move collapses to a single active
+    // cell (no range).
     beginRangeDrag(row, col);
   }
 
@@ -4992,7 +5561,52 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // editor). A plain click on an EDITABLE body cell opens its editor via the SAME beginEdit funnel;
   // shift+click (range extend) and non-editable cells are unaffected. Same closest/parse/header-skip
   // /finite guards as onGridDblClick. isGrid()-gated so 'table' mode never runs it.
+  // ── row-activate (quick 260925-dtl, oinbox dogfooding) ─────────────────────────────────────
+  // `row-activate { row, index, trigger }`: `row` = the original data object, `index` = its
+  // position in the rendered model ($data.rows — page-relative, or the full model when virtual).
+  // Group-header rows never activate; detail rows carry no data-row so a click there never
+  // resolves a row.
+  function activateRowAt(index: any, trigger: any) {
+    const row = (rows() || [])[index];
+    if (!row || rowIsGrouped(row) || rowIsLazyPlaceholder(row)) return;
+    _props.onRowActivate?.({
+      row: row.original,
+      index,
+      trigger
+    });
+  }
+
+  // Controls a click must not activate THROUGH — the selection checkbox, the expander, links,
+  // drop-in widgets and an open editor. Matched only INSIDE the clicked cell, so a host page that
+  // happens to wrap the table in one of these does not silence every row.
+  const ROW_ACTIVATE_CONTROLS = 'input, button, a[href], select, textarea, label, summary, [contenteditable=""], [contenteditable="true"], [role="button"], [role="checkbox"], [role="link"], [data-editing-cell]';
+
+  // Both interaction modes: a plain click on a body data cell, outside any control. Not a
+  // modified click (shift/ctrl/meta are selection gestures), not the end of a drag-select, and
+  // not a singleClickEdit gesture on an editable grid cell (that click opens the editor instead).
+  function maybeActivateRowFromClick(e: any) {
+    if (!e || e.shiftKey || e.ctrlKey || e.metaKey || e.altKey) return;
+    if (rangeDragMoved) return;
+    const tgt = e.target;
+    if (!tgt || !tgt.closest) return;
+    const cellEl = tgt.closest('[data-row]');
+    if (!cellEl) return;
+    const control = tgt.closest(ROW_ACTIVATE_CONTROLS);
+    if (control && cellEl.contains(control)) return;
+    const rowAttr = cellEl.getAttribute('data-row');
+    if (rowAttr == null || rowAttr === '__header') return;
+    const index = parseInt(rowAttr, 10);
+    if (!Number.isFinite(index)) return;
+    if (isGrid() && local.singleClickEdit) {
+      const colAttr = cellEl.getAttribute('data-col-index');
+      const col = colAttr == null ? NaN : parseInt(colAttr, 10);
+      const colId = Number.isFinite(col) ? columnIdAt(index, col) : null;
+      if (colId != null && columnEditable(colId)) return;
+    }
+    activateRowAt(index, 'click');
+  }
   function onGridClick(e: any) {
+    maybeActivateRowFromClick(e);
     if (!isGrid() || !e) return;
     if (!local.singleClickEdit) return;
     if (e.shiftKey) return;
@@ -5188,12 +5802,26 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // UNCHANGED (span = the header's own colSpan, or 1) when columns are not windowed — the
   // off-path the template's `:colspan="wh.span > 1 ? wh.span : null"` binding preserves
   // byte-identically (a bare colspan="1" would change the emitted markup on the unwindowed path).
+  //
+  // A-03: the emitted entry also carries the WIDTH of the in-window leaves, because the colspan
+  // clamp above is only half the job. `thStyle` declared `Header.getSize()` — the sum of ALL
+  // descendant leaves — against a colspan clamped to the leaves actually rendered. Under
+  // `table-layout: fixed` a first-row spanning cell's declared width is divided across the
+  // columns it spans, and only the first row establishes widths, so a group straddling the window
+  // edge inflated every column it still rendered: measured on "Group A" (cols 10-14 @150px,
+  // getSize() 750), each rendered group column went 150 -> 187.5 -> 250 -> 375 -> 750px as the
+  // group scrolled out, and scrollWidth with it, 9000 -> 9600. Identical on all five light-DOM
+  // targets. This is the SAME getSize()-vs-colspan mismatch the earlier Column.getSize() ->
+  // Header.getSize() fix cured for the fully-in-window case, inverted: that one was a 5x
+  // COLLAPSE, this is a 5x EXPANSION for the partial case. Summing the same leaves the clamp
+  // counted keeps the declared width and the colspan describing the same set by construction.
   function windowedHeadersFor(hg: any, hgLevel: any) {
     const headers = hg && hg.headers || [];
     if (!colsWindowed()) {
       return headers.map((h: any) => ({
         header: h,
-        span: h && h.colSpan > 1 ? h.colSpan : 1
+        span: h && h.colSpan > 1 ? h.colSpan : 1,
+        width: null
       }));
     }
     const idx = windowedColIndices();
@@ -5208,10 +5836,15 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       const end = cursor + leafCount;
       cursor = end;
       let span = 0;
-      for (let c = start; c < end; c++) if (idxSet[c]) span = span + 1;
+      let width = 0;
+      for (let c = start; c < end; c++) if (idxSet[c]) {
+        span = span + 1;
+        width = width + columnSize(c);
+      }
       if (span > 0) out.push({
         header: h,
-        span
+        span,
+        width
       });
     }
     return out;
@@ -5224,6 +5857,36 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function windowedColSpan() {
     return colsWindowed() ? windowedColIndices().length + 2 : visibleColCount();
   }
+  // ── A-02: a column RESIZE must invalidate the column virtualizer's measurement cache ──────
+  // `setOptions` is not enough, and this is a property of virtual-core, not of how we call it.
+  // `getMeasurements()` is memoized on `[getMeasurementOptions(), itemSizeCacheVersion]`, and
+  // `getMeasurementOptions()` is itself memoized on count / paddingStart / scrollMargin /
+  // getItemKey / enabled / lanes / laneAssignmentMode — `estimateSize` is NOT among them. The
+  // column axis feeds its widths ENTIRELY through `estimateSize: (i) => columnSize(i)` (it never
+  // calls `measureElement`), so after a resize the memo returns the array built from the OLD
+  // widths: measured on a 60x150px grid, dragging one column +1200px left `scrollWidth`
+  // oscillating 9000 <-> 10200 as that column entered and left the window, and at scrollLeft 6000
+  // the window started at index 37 where fresh geometry predicts 29. `measure()` is the only API
+  // that bumps `itemSizeCacheVersion`, and it appeared ZERO times in this package or in
+  // headless-core. Same defect for `resetColumnSizing()` and any programmatic `columnSizing` write.
+  //
+  // Guarded on a SIGNATURE rather than called unconditionally. `columnResizeMode` is 'onChange',
+  // so `writeColumnSizing` fires on every pointermove of a drag; `measure()` clears the size cache
+  // and calls `notify(false)`, which bumps `$data.windowVer` and therefore re-renders. Hashing the
+  // widths (order-sensitive, so a pure A<->B swap that preserves the sum still trips it) makes the
+  // steady state a ~N-integer-op no-op and guarantees the notify cannot feed itself: the second
+  // pass sees an unchanged signature and returns.
+  let lastColSizeSig = 0;
+  function remeasureColumnSizes() {
+    if (!colsWindowed() || !colVirtualizer || !colVirtualizer.measure) return;
+    const n = columnCount();
+    let sig = n;
+    for (let i = 0; i < n; i++) sig = Math.imul(sig, 31) + columnSize(i) | 0;
+    if (sig === lastColSizeSig) return;
+    lastColSizeSig = sig;
+    colVirtualizer.measure();
+  }
+
   // remeasureColumnWindow() (Phase 87 87-04): push a fresh column count/size into the SECOND
   // (horizontal) virtualizer on every row-model refresh — mirrors the row axis's
   // virtualizer.setOptions(virtualizerOptions()) + _willUpdate() re-feed in refreshRowModel, so a
@@ -5237,6 +5900,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function remeasureColumnWindow() {
     if (!colsWindowed() || !colVirtualizer) return;
     colVirtualizer.setOptions(columnVirtualizerOptions());
+    remeasureColumnSizes();
     colVirtualizer._willUpdate();
   }
 
@@ -5273,8 +5937,13 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   let rangeTransition = false;
   // rangeClickPending: set by onGridMouseDown on a Shift+Click (the range is set off the
   // pointer event's shiftKey BEFORE the cell's focusin fires); the follow-up focusin reads it
-  // to SKIP the range-collapse (a focusin carries no reliable shiftKey). Reset on consumption.
-  let rangeClickPending = false;
+  // to SKIP the range-collapse (a focusin carries no reliable shiftKey).
+  // B-11: it holds the CELL `{ isHeader, r, c }` the Shift+Click landed on, not a boolean, and
+  // is null when idle. Shift+Click on the already-focused cell fires no focusin, so a boolean
+  // was left armed and the NEXT ordinary click/Tab consumed it and skipped its own collapse,
+  // stranding a painted rectangle. Coordinate-matched, that leak is self-healing: a focusin on
+  // any other cell clears it and collapses normally. Cleared on BOTH branches of the consume.
+  let rangeClickPending: any = null;
   // B19: a SYNCHRONOUS mirror of "a range currently exists" — extendRange/setRangeFocus set it
   // true, clearRange/clampRange-to-empty set it false. clearRange is invoked TWICE in one plain-
   // arrow keydown (the explicit collapse + the focusin that follows the programmatic focus move);
@@ -5343,7 +6012,26 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // pre-write value (ROZ138). extendRange/setRangeFocus thread the just-computed locals through
   // here so the emitted payload matches the write. The single call site keeps the count
   // predictable (React multi-emit dedup, D-07). One-way notification.
+  // B-10 — announce the selection alongside the emit. This is the SINGLE site every range
+  // mutation funnels through (shift+arrow via extendRange, shift+click and drag-select and
+  // fill-drag via setRangeFocus, Ctrl+A via selectAllBody), so one announce here covers all of
+  // them; guarding the callers individually would be five chances to miss one.
+  //
+  // Writes $data.rangeAnnounce directly rather than importing clipboardFill's announce(): that
+  // helper drives pasteAnnounce, and a range move must not overwrite a paste/validation message
+  // the user has not heard yet (hence the separate key + region). `polite` + `aria-atomic` means
+  // a fast drag replaces the pending text instead of queueing every intermediate rectangle.
+  function rangeSummary(anchor: any, focus: any) {
+    if (!anchor || !focus) return '';
+    const rows = Math.abs(focus.rowIndex - anchor.rowIndex) + 1;
+    const cols = Math.abs(focus.colIndex - anchor.colIndex) + 1;
+    if (rows === 1 && cols === 1) return '1 cell selected';
+    const rowPart = rows + (rows === 1 ? ' row' : ' rows');
+    const colPart = cols + (cols === 1 ? ' column' : ' columns');
+    return rowPart + ' by ' + colPart + ' selected, ' + rows * cols + ' cells';
+  }
   function emitRangeChange(anchor: any, focus: any) {
+    setRangeAnnounce(rangeSummary(anchor, focus));
     _props.onRangeChange?.({
       anchor,
       focus
@@ -5399,14 +6087,39 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     }
   }
 
-  // setRangeFocus(rIdx, cIdx): set the moving corner to an explicit cell (Shift+Click),
-  // seeding the anchor from the active cell when no range exists yet. Clamped to bounds.
-  // Emits range-change from this single site.
-  function setRangeFocus$local(rIdx: any, cIdx: any) {
+  // setRangeFocus(rIdx, cIdx, anchorR, anchorC): set the moving corner to an explicit cell
+  // (Shift+Click, or a drag-select's pointermove), seeding the anchor when no range exists yet.
+  // Clamped to bounds. Emits range-change from this single site.
+  //
+  // B-01: the anchor seed is EXPLICIT when the caller knows it. Seeding it from
+  // `$data.activeRow`/`$data.activeColIndex` is only correct if that state is live at the moment
+  // the seed happens — and inside a drag-select it is not on React, where the document
+  // pointermove closure captures the render-scoped consts from the render that ran BEFORE the
+  // mousedown. Native focus moves as mousedown's DEFAULT ACTION, after handlers return, so at
+  // `beginRangeDrag` time the active cell is still the PRE-mousedown one and React can never
+  // show that closure a newer value. Dragging (5,2)→(7,3) on a fresh grid anchored at (0,0) and
+  // selected the whole rectangle from there — which Ctrl+X and Delete then destroy.
+  // The other five targets read `$data.activeRow` LIVE inside `move` (by then focusin has synced
+  // it), so they were accidentally correct; taking the anchor from the caller removes the read
+  // entirely and makes all six correct for the same reason. Falls back to the active cell when no
+  // explicit anchor is passed — Shift+Click, where "the anchor is where you already were" IS the
+  // active cell and the read happens synchronously in the same handler.
+  // The two anchor params carry EXPLICIT `= null` defaults, and that is load-bearing, not style:
+  // the emitted per-target signature types every declared param as REQUIRED, so the Shift+Click
+  // call site's two-argument `setRangeFocus(row, col)` fails the strict leaf typecheck with
+  // TS2554 "Expected 4 arguments, but got 2" on react and solid. Same rule the `focusActiveCell`
+  // comment in gridKeydownHandlers records for its own optional params.
+  function setRangeFocus$local(rIdx: any, cIdx: any, anchorR = null, anchorC = null) {
     const maxRow = bodyRowCount() - 1;
     const maxCol = visibleColCount() - 1;
     if (maxRow < 0 || maxCol < 0) return;
     let anchor = rangeAnchor();
+    if (!anchor && anchorR != null && anchorC != null) {
+      anchor = {
+        rowIndex: clamp(Math.trunc(Number(anchorR)) || 0, 0, maxRow),
+        colIndex: clamp(Math.trunc(Number(anchorC)) || 0, 0, maxCol)
+      };
+    }
     if (!anchor) anchor = {
       rowIndex: activeRow(),
       colIndex: activeColIndex()
@@ -5447,6 +6160,53 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     emitRangeChange(anchor, focus);
   }
 
+  // ── B-04: where does a range EXTENSION measure its delta from? ──────────────────────────
+  // `extendRange(dRow, dCol)` applies its delta to the range's FOCUS corner, not to the active
+  // cell. For shift+arrow the two always agree (extendRange writes the active cell to the new
+  // focus on every step), but two paths deliberately move the focus corner WITHOUT syncing the
+  // active cell: a drag-select (`setRangeFocus`, which leaves the active cell on the mousedown
+  // anchor) and Ctrl+A (`selectAllBody`, which sets both corners outright). After either,
+  // Ctrl/Cmd+Shift+Arrow computed "distance from the active cell to the edge" and then added it
+  // to a DIFFERENT cell. Drag (5,2)->(7,3) then Ctrl+Shift+ArrowUp extended to row 2 instead of
+  // row 0; Ctrl+Shift+ArrowLeft to column 1 instead of column 0 — an extend-to-edge that stops
+  // short of the edge by exactly the gap between the two.
+  //
+  // These report the corner extendRange will actually move, so the delta and its target are the
+  // same cell by construction. No range yet -> the active cell IS the focus corner.
+  function rangeFocusRow() {
+    const f = rangeFocus();
+    return f && f.rowIndex != null ? f.rowIndex : activeRow();
+  }
+  function rangeFocusCol() {
+    const f = rangeFocus();
+    return f && f.colIndex != null ? f.colIndex : activeColIndex();
+  }
+
+  // B-15: the APG grid pattern's Ctrl+Space — select the COLUMN containing the focused cell.
+  // Expressed as a full-height rectangle over the SAME range corners shift+arrow and Ctrl+A
+  // drive, so Ctrl+C / Ctrl+X / Delete / the fill handle all act on it with no new machinery
+  // and no second selection concept for a consumer to reason about. Emits through the single
+  // emitRangeChange funnel (fresh corners, never a $data re-read). No-op on an empty grid, and
+  // header-active is gated OUT by the caller, exactly as selectAllBody is.
+  function selectActiveColumn() {
+    const maxRow = bodyRowCount() - 1;
+    const maxCol = visibleColCount() - 1;
+    if (maxRow < 0 || maxCol < 0) return;
+    const c = clamp(Math.trunc(Number(activeColIndex())) || 0, 0, maxCol);
+    const anchor = {
+      rowIndex: 0,
+      colIndex: c
+    };
+    const focus = {
+      rowIndex: maxRow,
+      colIndex: c
+    };
+    setRangeAnchor(anchor);
+    setRangeFocus(focus);
+    rangeActive = true;
+    emitRangeChange(anchor, focus);
+  }
+
   // clearRange(): drop the rectangle (a non-shift navigation / edit-entry collapses any
   // range back to a single active cell). Cheap no-op when no range is set (the guard keeps a
   // plain navigation with no active range from emitting). B19: when a range DID exist, emit
@@ -5583,6 +6343,20 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
 
   // copyRange(): write the current range as TSV to the clipboard (async). No-op when the
   // async Clipboard API is unavailable (older/insecure contexts) — a copy is best-effort.
+  // B-07: is the async Clipboard API actually usable? Ctrl+C / Ctrl+X / Ctrl+V used to
+  // `e.preventDefault()` FIRST and only then call a verb that self-guards on
+  // `navigator.clipboard`, so on any page where the API is absent — an insecure `http://` origin,
+  // a permissions policy, an older embedded webview — the browser's OWN copy/cut/paste was
+  // suppressed and nothing took its place. The keystroke did nothing at all. These predicates
+  // move the check into the keymap's branch CONDITION (gridKeydownHandlers.rzts), so an
+  // unavailable API means the branch does not match and the native default runs. Separate
+  // read/write predicates because a context can grant one and not the other.
+  function clipboardWriteAvailable() {
+    return typeof navigator !== 'undefined' && !!navigator.clipboard && typeof navigator.clipboard.writeText === 'function';
+  }
+  function clipboardReadAvailable() {
+    return typeof navigator !== 'undefined' && !!navigator.clipboard && typeof navigator.clipboard.readText === 'function';
+  }
   function copyRange() {
     // B11: never copy from a header-active state (the reusable clipboard guard).
     if (!clipboardActiveAllowed()) return;
@@ -5601,15 +6375,33 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // running fresh array (replaceRowValue) and record the committed cell. After the walk: ONE
   // writeData (the single r-model:data write), ONE cell-edit-commit per COMMITTED cell, and the
   // N-of-M aria-live announce. Returns { wrote, total }.
-  function applyGridToRange(grid: any, originRow: any, originCol: any) {
+  // B-09 — `verb` names the OPERATION in the aria-live summary. This funnel serves paste, cut,
+  // range-delete AND fill, so hardcoding "pasted" made a Cut announce "3 of 3 cells pasted" and a
+  // Delete announce the same — actively wrong for a screen-reader user, who has no other signal
+  // that the destructive operation they invoked actually happened. Defaults to 'pasted' so the
+  // paste path's wording is unchanged.
+  function applyGridToRange(grid: any, originRow: any, originCol: any, verb: any) {
+    const opVerb = typeof verb === 'string' && verb !== '' ? verb : 'pasted';
     const maxRow = bodyRowCount() - 1;
     const maxCol = visibleColCount() - 1;
     if (maxRow < 0 || maxCol < 0) return {
       wrote: 0,
+      changed: 0,
       total: 0
     };
+    // B-08: `applied` and `committed` are DIFFERENT counts and used to be one.
+    //   applied   — targets whose value now equals what was pasted, INCLUDING the ones that
+    //               already did. This is the announce's numerator: from the user's point of
+    //               view a cell that already held the pasted value was pasted successfully, and
+    //               reporting "3 of 5" for a 5-cell paste where 2 matched would be a lie.
+    //   committed — targets whose value actually CHANGED. This drives the write, the per-cell
+    //               `cell-edit-commit` emits and (through writeData) the undo step.
+    // Conflating them meant an unchanged cell emitted an edit event and recorded an undo entry:
+    // a 1->5 fill fired 5 commits when 4 cells already held the value, and a Delete over an
+    // already-empty cell pushed an undo step that undoes nothing. Consumers persisting on
+    // `cell-edit-commit` were issuing writes for data that had not moved.
     let total = 0;
-    let wrote = 0;
+    let applied = 0;
     const committed = [];
     // Build the fresh data array incrementally so the whole paste is ONE writeData.
     let next = currentData();
@@ -5623,15 +6415,25 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       // it to this single funnel, so guarding the four callers individually would be four
       // chances to miss one.
       const rowGrouped = rowIndexIsGrouped(r);
+      // Debug 260926-dtl-edit-guard: a LAZY PLACEHOLDER row (virtual+manual+rowCount, a row not
+      // loaded yet) has no real underlying record — rowOriginalAt(r) returns the placeholder
+      // sentinel ({__rdtLazyPlaceholder:true,index:i}, virtualization.rzts), which is never IN
+      // currentData() (only the consumer's own array is), so sourceIndexOfRow's data.indexOf(...)
+      // is always -1 and falls back to the VISIBLE index — either a no-op write with a FABRICATED
+      // cell-edit-commit, or, inside a sparse hole, the hole gets clobbered with a partial row via
+      // replaceRowValue. Hoisted per-ROW exactly like rowGrouped above (the SAME single placement
+      // closes pasteRange/cutRange/clearActiveRange/fillRange all at once).
+      const rowPlaceholder = rowIsLazyPlaceholder((rows() || [])[r]);
       const cols = grid[gr] || [];
       for (let gc = 0; gc < cols.length; gc++) {
         const c = originCol + gc;
         if (c > maxCol) break;
-        // A group-row cell still counts toward `total` — it is a skipped TARGET, exactly like
-        // a non-editable or validator-rejected cell — so the "N of M cells pasted" / "no cells
-        // pasted" announce keeps its existing semantics (never silently under-reports M).
+        // A group-row / placeholder-row cell still counts toward `total` — it is a skipped
+        // TARGET, exactly like a non-editable or validator-rejected cell — so the "N of M cells
+        // pasted" / "no cells pasted" announce keeps its existing semantics (never silently
+        // under-reports M).
         total = total + 1;
-        if (rowGrouped) continue;
+        if (rowGrouped || rowPlaceholder) continue;
         const colId = columnIdAt(r, c);
         if (colId == null || !columnEditable(colId)) continue;
         const rowObj = rowOriginalAt(r);
@@ -5645,6 +6447,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         const field = fieldOfColId(colId);
         const srcIndex = sourceIndexOfRow(r);
         const oldValue = rowObj ? rowObj[field] : null;
+        applied = applied + 1;
+        // B-08: the cell already holds this value — it counts as applied, but there is nothing
+        // to write, nothing to emit and nothing to undo.
+        if (oldValue === value) continue;
         next = replaceRowValue(next, srcIndex, field, value);
         committed.push({
           rowId: rowIdAt(r),
@@ -5652,22 +6458,37 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
           oldValue,
           newValue: value
         });
-        wrote = wrote + 1;
       }
     }
-    if (wrote > 0) {
+    if (committed.length > 0) {
       editTransition = true;
       writeData(next);
       editTransition = false;
       // One cell-edit-commit per COMMITTED cell (the per-cell event contract, D-03).
-      for (let i = 0; i < committed.length; i++) _props.onCellEditCommit?.(committed[i]);
+      // A-08: each emit is guarded INDIVIDUALLY. These listeners are consumer code, and a single
+      // throwing one used to abort the loop — so on a 40-cell paste, cells 0..k notified and
+      // k+1..39 silently never did, leaving a consumer persisting on this event with a partial
+      // write of a model that had already been fully updated. Measured while building this: a
+      // throwing VALIDATOR is NOT the reachable vehicle here — `runValidator`
+      // (editCellLifecycle.rzts) already catches and reports 'Invalid value' — so the listener
+      // is the first-party code that actually escapes.
+      for (let i = 0; i < committed.length; i++) {
+        try {
+          _props.onCellEditCommit?.(committed[i]);
+        } catch (err: any) {
+          console.error('[rozie-data-table] paste failed partway: a cell-edit-commit listener threw. The ' + 'model was already written; the remaining cells still notify.', err);
+        }
+      }
     }
     // WR-02: announce the N-of-M summary only when at least one cell was written. When the paste
     // targeted real cells but every one was skipped (validation-failed / non-editable), announce a
     // distinct validation-failed message instead of a misleading "0 of M cells pasted".
-    if (wrote > 0) announce(wrote + ' of ' + total + ' cells pasted');else if (total > 0) announce('No cells pasted — ' + total + ' cells were invalid or read-only');
+    if (applied > 0) announce(applied + ' of ' + total + ' cells ' + opVerb);else if (total > 0) announce('No cells ' + opVerb + ' — ' + total + ' cells were invalid or read-only');
+    // `wrote` stays the ANNOUNCED count (targets satisfied), not the written one, so every
+    // existing caller and assertion keeps its meaning; `changed` is the new, narrower number.
     return {
-      wrote,
+      wrote: applied,
+      changed: committed.length,
       total
     };
   }
@@ -5714,14 +6535,26 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       return;
     }
     if (!p || !p.then) return;
+    // A-08: the two failure modes are separated. A REJECTED clipboard read (permission denied,
+    // insecure context, an empty selection) is a legitimate silent no-op — that is the rejection
+    // handler, the second argument. Anything the fulfilment handler throws is FIRST-PARTY: a
+    // consumer's row accessor, a `data`-model setter, or a `cell-edit-commit` listener (which
+    // `applyGridToRange` now also guards per-emit). A single trailing `.catch(() => {})`
+    // swallowed both, so consumer code failing inside a paste produced no error, no warning and
+    // nothing in the console to search for. NOT a column validator: `runValidator` already
+    // catches a throwing one and reports 'Invalid value' — checked rather than assumed.
     p.then((text: any) => {
-      const grid = parseTsv(text);
-      if (!grid.length) return;
-      // C3: tile the clipboard block to fill the destination range (single→range fill,
-      // smaller-tiles-into-larger); a clipboard larger than the box pastes its full block.
-      const tiled = tileGridToBox(grid, destBox);
-      applyGridToRange(tiled, anchorRow, anchorCol);
-    }).catch(() => {});
+      try {
+        const grid = parseTsv(text);
+        if (!grid.length) return;
+        // C3: tile the clipboard block to fill the destination range (single→range fill,
+        // smaller-tiles-into-larger); a clipboard larger than the box pastes its full block.
+        const tiled = tileGridToBox(grid, destBox);
+        applyGridToRange(tiled, anchorRow, anchorCol, 'pasted');
+      } catch (err: any) {
+        console.error('[rozie-data-table] paste failed: a row accessor, the data model setter or other ' + 'consumer code threw. The paste was abandoned.', err);
+      }
+    }, () => {/* clipboard read rejected (permission / insecure context) — silent by design */});
   }
 
   // cutRange(): C3 Cut — copy the current range to the clipboard (rangeToTsv — the SAME escaped
@@ -5755,7 +6588,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       for (let c = c0; c <= c1; c++) cols.push('');
       grid.push(cols);
     }
-    applyGridToRange(grid, r0, c0);
+    applyGridToRange(grid, r0, c0, 'cut');
   }
 
   // clearActiveRange(): the §7 (260709-3qt) Delete/Backspace clear — cutRange() MINUS the clipboard
@@ -5781,7 +6614,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       for (let c = c0; c <= c1; c++) cols.push('');
       grid.push(cols);
     }
-    applyGridToRange(grid, r0, c0);
+    applyGridToRange(grid, r0, c0, 'cleared');
   }
 
   // fillRange(sourceBox): drag-fill (D-04 — VALUE-COPY ONLY, no series detection). B7: the fill
@@ -5836,7 +6669,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       }
       grid.push(cols);
     }
-    applyGridToRange(grid, box.r0, box.c0);
+    applyGridToRange(grid, box.r0, box.c0, 'filled');
   }
 
   // onFillHandlePointerDown: begin a fill-handle drag (req-8 / D-04). The handle sits on the
@@ -6111,10 +6944,14 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     rangeDragging = false;
   }
 
-  // beginRangeDrag(anchorR, anchorC): start a drag-select anchored at the mousedown cell. The
-  // mousedown's native focus/focusin already committed the ACTIVE cell to (anchorR, anchorC), so
-  // setRangeFocus (which seeds the anchor from the ACTIVE cell) spans mousedown-cell→pointer-cell —
-  // we NEVER write $data.rangeAnchor directly (it is React-stale, ROZ138). rangeDragMoved starts
+  // beginRangeDrag(anchorR, anchorC): start a drag-select anchored at the mousedown cell.
+  // B-01: the anchor is handed to setRangeFocus EXPLICITLY, never left to be seeded from the
+  // active cell. The mousedown's native focus is a DEFAULT ACTION that runs after this handler
+  // returns, so at this point $data.activeRow/activeColIndex still hold the PRE-mousedown cell;
+  // on React the pointermove closure below is frozen at that render and can never observe the
+  // post-focusin value, so the whole gesture anchored at wherever the user happened to be
+  // (a fresh grid: (0,0)). We still never WRITE $data.rangeAnchor directly (React-stale,
+  // ROZ138) — setRangeFocus owns that write. rangeDragMoved starts
   // false and flips true only once the pointer reaches a DIFFERENT cell, so a mousedown-with-no-move
   // leaves a single active cell + no range (a normal click). lastCell dedups the many pointermove
   // events per cell (setRangeFocus emits range-change — only extend on a NEW cell, mirroring fillDrag's
@@ -6139,7 +6976,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       if (cell && (cell.r !== lastCell.r || cell.c !== lastCell.c)) {
         lastCell = cell;
         rangeDragMoved = true;
-        setRangeFocus$local(cell.r, cell.c);
+        setRangeFocus$local(cell.r, cell.c, anchorR, anchorC);
       }
     };
     const up = () => {
@@ -6177,6 +7014,8 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // row reaches the group-toggle branch below them instead of opening an editor.
   function isActiveCellEditable() {
     if (rowIndexIsGrouped(activeRow())) return false;
+    // A lazy placeholder (a row not loaded yet) has nothing to edit (quick 260925-dtl part 2).
+    if (rowIsLazyPlaceholder((rows() || [])[activeRow()])) return false;
     const colId = activeCellColumnId();
     return colId != null && columnEditable(colId);
   }
@@ -6408,6 +7247,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // calls beginEdit directly gated ONLY on columnEditable — isActiveCellEditable (Layer 1)
     // does not run on that path at all.
     if (rowIndexIsGrouped(rowIndex)) return;
+    if (rowIsLazyPlaceholder((rows() || [])[rowIndex])) return;
     const colId = columnIdAt(rowIndex, colIndex);
     if (colId == null || !columnEditable(colId)) return;
     // A new edit session starts — reset the sync idempotency latch so THIS session's eventual
@@ -6418,6 +7258,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // editor clears any row-edit state so isEditing never resolves both modes for one cell.
     setEditingRowIndex(null);
     setRowDraft({});
+    rowDraftSync = {};
     setEditingRow(rowIndex);
     setEditingCol(colIndex);
     setDraftValue(seed != null ? seed : cellValueAt(rowIndex, colIndex));
@@ -6490,6 +7331,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function endRowEdit() {
     setEditingRowIndex(null);
     setRowDraft({});
+    rowDraftSync = {};
     setInvalidMsg('');
     setActiveInControl(false);
     setEditVer(editVer() + 1);
@@ -6518,7 +7360,28 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // other editor type commits the value verbatim. Idempotent for the #editor drop-in path
   // (an already-numeric override passes through; an explicit null stays null).
   function coerceCellValue(colId: any, raw: any) {
-    if (editorTypeOf(colId) !== 'number') return raw;
+    const kind = editorTypeOf(colId);
+    // ── C-13 ────────────────────────────────────────────────────────────────────────────
+    // This funnel exists so "no mixed/garbage types ever reach the model" (B9, T-63-03-01), and
+    // it covered ONE of the four built-in editor types. Every path that writes without opening
+    // the built-in control — paste, Cut, Delete/Backspace over a range, a fill-drag — arrives
+    // here with a plain TSV STRING, so a `checkbox` column took `''` from a Delete and the
+    // literal text `'true'` from a paste, straight into a field the consumer declared boolean.
+    // `select` is deliberately NOT coerced: its model type IS the option string, so a string is
+    // already correct there, and an out-of-range option is a validation question (C-03's class),
+    // not a type one.
+    //
+    // Recognised spellings both ways; ANYTHING else — including '' and unrecognised text —
+    // becomes `false`. That is lossy by construction and deterministic by design: the
+    // alternative is letting a non-boolean reach a boolean field, which is the defect. It is
+    // documented in the editing page's emptied-cell table.
+    if (kind === 'checkbox') {
+      if (typeof raw === 'boolean') return raw;
+      if (raw == null) return false;
+      if (typeof raw === 'number') return raw !== 0;
+      return /^\s*(true|1|yes|y|on)\s*$/i.test(String(raw));
+    }
+    if (kind !== 'number') return raw;
     if (raw == null) return null;
     if (typeof raw === 'number') return Number.isNaN(raw) ? null : raw;
     const s = String(raw).trim();
@@ -6638,11 +7501,17 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // checkbox branch, so this line is redundant AT HEAD — it earns its place by making "no
     // write ever targets a group row" a property of the write funnels themselves.
     if (rowIndexIsGrouped(activeRow())) return;
-    const colId = columnIdAt(activeRow(), activeColIndex());
-    if (colId == null || !columnEditable(colId)) return;
     const rowList = rows() || [];
     const row = rowList[activeRow()];
     if (!row) return;
+    // Debug 260926-dtl-edit-guard: defense-in-depth, matching the redundant rowIndexIsGrouped
+    // check just above (Layer 4 is reachable ONLY through the Layer-1-gated checkbox branch in
+    // onGridKeyDown, whose isActiveCellEditable() already excludes a placeholder row — this makes
+    // "no write ever targets a placeholder row" a property of the write funnel itself, not just of
+    // its one caller).
+    if (rowIsLazyPlaceholder(row)) return;
+    const colId = columnIdAt(activeRow(), activeColIndex());
+    if (colId == null || !columnEditable(colId)) return;
     const rowOriginal = row.original;
     const rowId = row.id;
     const oldValue = cellValueAt(activeRow(), activeColIndex());
@@ -6775,6 +7644,13 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // redundant at HEAD; kept for the same reason as Layer 4 — it is a mutation entry point,
     // and the natural call site for a future #rowActions "Edit" drop-in button.
     if (rowIndexIsGrouped(rowIndex)) return;
+    // Debug 260926-dtl-edit-guard: a LAZY PLACEHOLDER row (a row not loaded yet, virtual+manual+
+    // rowCount) has nothing to edit — beginEdit (editCellLifecycle.rzts) already carries this
+    // guard for single-cell entry; this full-row twin was missing it, so the public editRow()
+    // verb (and, redundantly with isActiveCellEditable's own placeholder check, Shift+F2) could
+    // seed a row editor from a placeholder's undefined fields and commit through the same
+    // sourceIndexOfRow fallback bug applyGridToRange's placeholder skip closes.
+    if (rowIsLazyPlaceholder((rows() || [])[rowIndex])) return;
     const editable = editableColumnsForRow(rowIndex);
     if (editable.length === 0) return;
     // A new edit session starts — reset the sync idempotency latch (see editCellLifecycle.rzts).
@@ -6794,6 +7670,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       draft[ec.colId] = orig ? orig[ec.field] : null;
     }
     setRowDraft(draft);
+    rowDraftSync = draft;
     setEditingRowIndex(rowIndex);
     setActiveInControl(true);
     setEditVer(editVer() + 1);
@@ -6824,7 +7701,8 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     const r = rowList[rowIndex];
     const rowOriginal = r ? r.original : null;
     const rowId = r ? r.id : null;
-    const draft = rowDraft() || {};
+    // C-05: the SYNC mirror, not `$data.rowDraft` — see rowDraftSync in DataTable.rozie.
+    const draft = rowDraftSync || {};
     // Validate every edited column FIRST (D-01: a single failure blocks the whole row commit).
     // B3 (Rule 1): coerce each draft by the column's editor type BEFORE validation + write — a
     // 'number' editor must commit a real Number/null, never the raw editor STRING (the single-cell
@@ -7016,6 +7894,25 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // A top-level `let` (React hoists to useRef → persists).
   let committedThisSession = false;
 
+  // rowDraftSync (quick 260922-mkb, C-05): a SYNCHRONOUS mirror of `$data.rowDraft`, written at
+  // every rowDraft write and read by commitRow. A custom #editor drop-in stages its value with
+  // `commit(v)` → setRowDraft in the SAME keydown that then commits the row (the host's drop-in
+  // wrapper runs in the bubble phase right after the drop-in's own Enter handler). On React
+  // `$data.rowDraft` is a `useState` read, so commitRow in that same tick saw the pre-write draft,
+  // found no change and wrote nothing. The built-in editors never hit this only because they stage
+  // on every `input` event, long before Enter. Same top-level-`let` technique as
+  // committedThisSession above; on the five synchronous targets it always equals $data.rowDraft.
+  let rowDraftSync: Record<string, any> = {};
+
+  // dropinTabFlush (quick 260922-mkb, C-10): non-null only for the duration of the drop-in
+  // wrapper's Tab flush (see onEditorDropinKeyDown). While set, a drop-in's `commit(v)` records
+  // that it ran and whether it committed, and commits WITHOUT the focus return (the Tab handler
+  // moves focus on to the next editor itself).
+  let dropinTabFlush: {
+    called: boolean;
+    committed: boolean;
+  } | null = null;
+
   // ── Per-cell editor draft source (req-6) ──────────────────────────────────────────────
   // In single-cell mode every editor binds the shared $data.draftValue. In full-row mode
   // (editingRowIndex != null) each editable cell owns its OWN draft keyed by columnId in
@@ -7044,6 +7941,16 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         setRowDraft$local(colId, value);
         return;
       }
+      // C-10: during the drop-in wrapper's Tab flush, record the outcome and skip the focus
+      // return — the Tab handler advances focus to the next editor itself.
+      if (dropinTabFlush) {
+        dropinTabFlush.called = true;
+        // STICKY: only a successful commit may set the outcome. A re-entrant commit within the
+        // same flush (any blur the write itself provokes) is latched to false by commitEdit and
+        // must not clear it. Measured: before the Solid slot-fill fix this re-entry was real.
+        if (commitEdit(value, true)) dropinTabFlush.committed = true;
+        return;
+      }
       commitEdit(value);
     };
   }
@@ -7081,10 +7988,13 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // setRowDraft: write ONE key into a FRESH rowDraft object (whole-object replace — an
   // in-place mutation is silently dropped on React/Solid; the family immutable rule).
   function setRowDraft$local(colId: any, value: any) {
-    const src = rowDraft() || {};
+    // C-05: build from the SYNC mirror, so two same-tick writes (and a same-tick commitRow) never
+    // see a React-stale `$data.rowDraft`.
+    const src = rowDraftSync || {};
     const next = {};
     for (const k in src) next[k] = src[k];
     next[colId] = value;
+    rowDraftSync = next;
     setRowDraft(next);
   }
 
@@ -7174,6 +8084,105 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     }
   }
 
+  // DECLARED AFTER onEditorKeyDown ON PURPOSE. It delegates to it, and the React emitter lowers
+  // both to `useCallback`s whose DEPENDENCY ARRAY is evaluated EAGERLY at declaration time — so
+  // with this one first, its deps array referenced `onEditorKeyDown` before the const existed and
+  // every React cell in the family died with `ReferenceError: Cannot access 'ze' before
+  // initialization` at mount. That is the 87-02 useCallback-deps-array ordering lesson, and it is
+  // invisible on the other five targets. Keep this block below.
+  // ── C-10 + C-05: the grid keymap for a CUSTOM #editor drop-in ───────────────────────────
+  // The built-in editors bind `onEditorKeyDown` directly, so Tab commits-and-advances and, in
+  // row mode, Enter commits the row. A drop-in binds nothing of ours: it is consumer markup
+  // inside the `#editor` slot. Its own keydown handler covers Enter and Escape (the drop-in
+  // contract) and stops there, and the keydown then bubbles to the table root where
+  // `onGridKeyDown` early-returns because an editor is open. Result:
+  //   C-10 — Tab in a drop-in did not commit and advance. It fell through to NATIVE tab order
+  //          and walked focus out of the grid, leaving the editor open behind it.
+  //   C-05 — in FULL-ROW mode a drop-in's `commit(v)` is draft-only BY DESIGN (committing per
+  //          cell would split the row into N writes and N events), and the row commits only
+  //          through handlers bound on the built-in inputs — which a row of drop-ins does not
+  //          have. So Shift+F2, documented as "Enter commits the whole row in one
+  //          `r-model:data` write", wrote a draft and nothing else, `editingRowIndex` stayed
+  //          set, and `onGridKeyDown`'s early-return left arrow nav dead. The only exits were
+  //          Escape (reverting the whole row) and the imperative verb.
+  //
+  // Bound on the `display: contents` span that wraps the slot, so it sees the bubbled event
+  // from whatever the consumer rendered — including a bespoke editor that never heard of this
+  // component. The host owning the GRID keymap while the drop-in owns its own CONTROL is the
+  // same division the built-in path already has.
+  //
+  // Row mode ignores `defaultPrevented` for Enter/Escape on purpose: a drop-in preventDefaults
+  // Enter to mean "do not insert a newline", not "the row is handled". Its own handler has
+  // already run (target phase before bubble), so the draft is staged by the time we commit.
+  // Single-cell mode honours `defaultPrevented` for Tab, so a drop-in that genuinely implements
+  // its own Tab (a multi-field editor) keeps it.
+  //
+  // Single-cell Tab FLUSHES the drop-in before advancing (quick 260922-mkb). A drop-in owns its
+  // draft: the host's `draftValue` still holds the value the editor opened with, so routing Tab
+  // straight into onEditorKeyDown committed that stale value, opened the next cell's editor, and
+  // then the old drop-in's unmount blur ran `commit(typed)` against the NOW-editing cell — the
+  // typed text landed in the NEXT column (measured: `status=Zeta` from a Name edit, on four
+  // targets). Instead the handler blurs the drop-in while its own cell is still the editing one,
+  // so the drop-in's blur-commit (the drop-in contract) writes the right cell, and only then
+  // advances. `dropinTabFlush` tells editorCommitFor to report the outcome and skip the focus
+  // return. A drop-in that does not commit on blur (EditorCheckbox commits on change, so it holds
+  // nothing pending) falls back to the host-draft path, which is exactly right in that case.
+  function onEditorDropinKeyDown(e: any) {
+    if (!e) return;
+    const key = e.key;
+    if (inRowEdit()) {
+      if (key === 'Enter') {
+        e.preventDefault();
+        commitRow();
+        return;
+      }
+      if (key === 'Escape') {
+        e.preventDefault();
+        cancelRow();
+        return;
+      }
+      if (key === 'Tab') {
+        e.preventDefault();
+        rowEditTab(e.target, e.shiftKey);
+        return;
+      }
+      return;
+    }
+    if (key !== 'Tab' || e.defaultPrevented) return;
+    e.preventDefault();
+    const fromRow = editingRow();
+    const fromCol = editingCol();
+    const target = e.shiftKey ? prevEditableCell(fromRow, fromCol) : nextEditableCell(fromRow, fromCol);
+    const el = e.target;
+    // Move focus to the drop-in's OWN cell rather than calling blur(): that still fires the
+    // drop-in's blur-commit, but keeps focus inside the grid instead of dropping it to <body>.
+    const ownCell = el && el.closest ? el.closest('[data-grid-cell]') : null;
+    const flush = {
+      called: false,
+      committed: false
+    };
+    dropinTabFlush = flush;
+    if (ownCell && ownCell.focus) ownCell.focus();else if (el && el.blur) el.blur();
+    dropinTabFlush = null;
+    if (!flush.called) {
+      onEditorKeyDown(e);
+      return;
+    }
+    // A validation failure keeps the editor open: give the drop-in its focus back.
+    if (!flush.committed) {
+      if (el && el.focus) el.focus();
+      return;
+    }
+    if (target) {
+      setActiveRow(target.row);
+      setActiveColIndex(target.col);
+      beginEdit(target.row, target.col, null);
+    } else {
+      // B5 twin: no editable cell in the Tab direction — keep focus INSIDE the grid.
+      focusCellWhenReady(fromRow, fromCol);
+    }
+  }
+
   // onEditorBlur: commit on a genuine click/focus-away (D-01 — an invalid value keeps the
   // editor open via commitEdit's reject path). SKIP when:
   //  - editTransition is set (a synchronous commit/cancel teardown is unmounting the editor), or
@@ -7210,11 +8219,52 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     }
     if (editingRow() < 0 || editTransition) return;
     const next = e ? e.relatedTarget : null;
-    // A null relatedTarget is an unmount-blur (the editor left the DOM) or a focus drop the
-    // keyboard path owns; committing here would double-count (WR-04: the OLD editor's blur on
-    // a Tab-advance fires with a TRANSIENT null relatedTarget while it unmounts). Keep the
-    // conservative null=skip behavior.
-    if (next == null) return;
+    const fromCell = e && e.target && e.target.closest ? e.target.closest('[data-grid-cell]') : null;
+    // ── B-02 ────────────────────────────────────────────────────────────────────────────
+    // A null relatedTarget used to return unconditionally. That is correct for the WR-04 case
+    // the comment cited — a Tab-advance fires the OLD editor's blur with a TRANSIENT null
+    // relatedTarget while it unmounts, and committing there double-counts — but it is NOT the
+    // only shape. Clicking any non-focusable region of the page (the body, a heading, whitespace)
+    // also blurs the editor with a null relatedTarget, and that returned WITHOUT committing and
+    // WITHOUT endEdit(): the typed value was silently discarded, the editor stayed open, and
+    // `$data.editingRow` stayed >= 0 — which gridKeydownHandlers' `if ($data.editingRow >= 0)
+    // return` reads as "an editor owns the keyboard", so arrows/Enter/F2/Home/Ctrl+C were all
+    // dead until the user double-clicked somewhere else. There is no document-level click-away
+    // listener anywhere in the family to catch it afterwards.
+    //
+    // The two shapes ARE separable, with the discriminator the branch below already uses: on a
+    // Tab-advance the keyboard path has already moved the editing pair to the NEXT cell, so the
+    // blurring editor's own cell no longer matches ($data.editingRow/editingCol), while a
+    // click-away leaves the pair still sitting on it. The row-edit branch twenty lines above
+    // reaches the same conclusion by the same reasoning and commits on null; this is that branch's
+    // single-cell twin.
+    if (next == null) {
+      // Not a click-away unless a pointerdown OUTSIDE the grid just said so. `outsidePointerDown`
+      // is the discriminator, and nothing weaker works: an editor recycled out of the virtual
+      // window (or replaced by Solid's keyed-row reconcile) blurs with a null relatedTarget too,
+      // and `closest()` still resolves an owning `<td>` inside a DETACHED subtree, so every
+      // synchronous DOM test reads it as a click-away — measured, it closed the pinned editor in
+      // data-table-edit's "open editor + index-based range survive virtualization recycle" case on
+      // solid. Deferring a frame does not help either: by then the node is reattached, focus sits
+      // on <body>, and the state is indistinguishable from a real click-away.
+      //
+      // The flag is a plain module-let set by the document pointerdown listener in DataTable.rozie
+      // (NOT a $data field, and NOT a closure over one): a document listener is attached once, so
+      // on React any `$data` it closes over is frozen at attach time, and a commit driven from
+      // that closure would write the draft as of editor-OPEN and lose everything typed. Routing
+      // the decision back through THIS handler — template-bound, so React re-binds it every
+      // render — keeps the commit on the always-fresh path. Consume it here so an unmount blur
+      // arriving later can never inherit it.
+      if (!outsidePointerDown) return;
+      outsidePointerDown = false;
+      if (!fromCell) return;
+      if (fromCell.getAttribute('data-row') !== String(editingRow()) || fromCell.getAttribute('data-col-index') !== String(editingCol())) return;
+      // Genuine click-away onto a non-focusable region outside the grid → commit + close (D-01's
+      // reject path keeps the editor open on an invalid value, exactly as for a click onto another
+      // cell). skipFocusReturn: the user deliberately put focus elsewhere; do not yank it back.
+      commitEdit(undefined, true);
+      return;
+    }
     // Focus moving OUTSIDE the grid (a click into another widget) → commit (D-01 reject keeps
     // the editor open on an invalid value).
     if (!(gridRoot && gridRoot.contains && gridRoot.contains(next))) {
@@ -7225,7 +8275,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // keyboard handler already committed) from a genuine click-away to ANOTHER grid cell
     // (which must commit + close so the grid is not wedged with an open editor).
     const nextCell = next.closest ? next.closest('[data-grid-cell]') : null;
-    const fromCell = e && e.target && e.target.closest ? e.target.closest('[data-grid-cell]') : null;
     // Same cell (an inner control / the editing cell itself on an Enter focus-return) → a
     // controlled move; skip. Also skip when either cell can't be resolved (an unmounting
     // editor has no owning cell — the Tab-advance remount-blur path, never a click-away).
@@ -7560,6 +8609,16 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     if (id == null) return;
     const key = String(id);
     if (key === '__proto__' || key === 'constructor' || key === 'prototype') return;
+    // C-09: skip the state write when the incoming spec is EQUIVALENT to the stored one.
+    // `<Column>`'s re-register watch keys on reference-typed props whose documented wiring is
+    // an inline literal — a fresh identity every consumer render — so without this guard every
+    // render whole-object-replaced `$data.colReg`, which the parent's re-feed watch keys on,
+    // which re-rendered the parent, which produced a new identity: a feedback loop, not a slow
+    // path. Guarded HERE rather than in the watch because this is the single seam every
+    // registration passes through, and because value-equality is the correct test for the
+    // registry's own purpose (has anything the table renders from actually changed?).
+    const prev = colReg() ? (colReg() as Record<string, any>)[key] : undefined;
+    if (prev !== undefined && columnSpecsEquivalent(prev, spec)) return;
     setColReg({
       ...colReg(),
       [key]: spec
@@ -7580,7 +8639,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
 
     <div class={"rdt-column-defs"} style={{ display: "none" }} aria-hidden="true" data-rozie-s-d5dcab4c="">{resolved()}</div>
 
-    {<Show when={!!invalidMsg()}><div class={"rdt-sr-live"} role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c="">{invalidMsg()}</div></Show>}{<Show when={!!pasteAnnounce()}><div class={"rdt-sr-live rdt-sr-paste"} data-testid="paste-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c="">{pasteAnnounce()}</div></Show>}{<Show when={!!liveAnnounce()}><div class={"rdt-sr-live rdt-sr-sortfilter"} data-testid="sortfilter-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c="">{liveAnnounce()}</div></Show>}<div class={"rdt-toolbar"} data-rozie-s-d5dcab4c="">
+    {<Show when={!!invalidMsg()}><div class={"rdt-sr-live"} role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c="">{invalidMsg()}</div></Show>}{<Show when={!!pasteAnnounce()}><div class={"rdt-sr-live rdt-sr-paste"} data-testid="paste-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c="">{pasteAnnounce()}</div></Show>}{<Show when={!!rangeAnnounce()}><div class={"rdt-sr-live rdt-sr-range"} data-testid="range-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c="">{rangeAnnounce()}</div></Show>}{<Show when={!!liveAnnounce()}><div class={"rdt-sr-live rdt-sr-sortfilter"} data-testid="sortfilter-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c="">{liveAnnounce()}</div></Show>}<div class={"rdt-toolbar"} data-rozie-s-d5dcab4c="">
       <input type="text" role="searchbox" aria-label="Search table" class={"rdt-global-filter"} value={globalFilterValue()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onGlobalFilterInput($event); }} data-rozie-s-d5dcab4c="" />
       
       {<Show when={allLeafColumns().length}><details class={"rdt-colvis"} data-rozie-s-d5dcab4c="">
@@ -7596,10 +8655,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
 
     {<Show when={local.groupable}><div class={"rdt-group-bar-host"} data-rozie-s-d5dcab4c="">
       {(_props.groupBarSlot ?? _props.slots?.['groupBar'])?.({ get grouping() { return groupingKeys(); }, get groupableColumns() { return groupableColumns(); }, applyGrouping, clearGrouping }) ?? <Key each={groupingKeys() as readonly any[]} by={(gk) => gk}>{(gk) => <span class={"rdt-group-token"} data-group-token="" data-rozie-s-d5dcab4c="">{rozieDisplay(gk())}</span>}</Key>}
-    </div></Show>}{<Show when={isWindowed()} fallback={<table aria-rowcount={rozieAttr(gridAriaRowCount())} class={"rozie-data-table" + " " + rozieClass({ 'rdt-sticky': local.stickyHeader })} role={rozieAttr(tableRole())} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridKeyDown($event); }} onFocusIn={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { syncActiveFromEvent($event); }} onFocusOut={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridFocusOut($event); }} onMouseDown={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridMouseDown($event); }} onDblClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridDblClick($event); }} onClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridClick($event); }} data-rozie-s-d5dcab4c="">
+    </div></Show>}{<Show when={isWindowed()} fallback={<table aria-rowcount={rozieAttr(gridAriaRowCount())} aria-colcount={rozieAttr(gridAriaColCount())} class={"rozie-data-table" + " " + rozieClass({ 'rdt-sticky': local.stickyHeader })} role={rozieAttr(tableRole())} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridKeyDown($event); }} onFocusIn={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { syncActiveFromEvent($event); }} onFocusOut={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridFocusOut($event); }} onMouseDown={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridMouseDown($event); }} onDblClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridDblClick($event); }} onClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridClick($event); }} data-rozie-s-d5dcab4c="">
       <thead class={"rdt-thead"} role="rowgroup" data-rozie-s-d5dcab4c="">
         <Key each={headerGroups() as readonly any[]} by={(hg) => hg.id}>{(hg, hgLevel) => <tr class={"rdt-tr"} role="row" aria-rowindex={rozieAttr(hgLevel() + 1)} data-rozie-s-d5dcab4c="">
-          <Key each={hg().headers as readonly any[]} by={(header) => header.id}>{(header) => <th class={"rdt-th" + " " + rozieClass({ 'rdt-select-th': isSelectColumn(header().column.id), 'rdt-expander-th': isExpanderColumn(header().column.id), 'rdt-th-resizing': columnIsResizing(header().column.id), 'rdt-cell-active': isActiveCell('__header', headerColIndexOf(hg(), header()), hgLevel()) })} role="columnheader" data-col={rozieAttr(header().column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel())} colSpan={rozieAttr(header().colSpan > 1 ? header().colSpan : null)} data-col-index={rozieAttr(headerColIndexOf(hg(), header()))} tabIndex={rozieAttr(cellTabindex('__header', headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(header().column.id))} style={parseInlineStyle(thStyle(header()))} data-rozie-s-d5dcab4c="">
+          <Key each={hg().headers as readonly any[]} by={(header) => header.id}>{(header) => <th class={"rdt-th" + " " + rozieClass({ 'rdt-select-th': isSelectColumn(header().column.id), 'rdt-expander-th': isExpanderColumn(header().column.id), 'rdt-pinned': columnPinSide(header().column.id) !== '', 'rdt-th-resizing': columnIsResizing(header().column.id), 'rdt-cell-active': isActiveCell('__header', headerColIndexOf(hg(), header()), hgLevel()) })} role="columnheader" data-col={rozieAttr(header().column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel())} colSpan={rozieAttr(header().colSpan > 1 ? header().colSpan : null)} data-col-index={rozieAttr(headerColIndexOf(hg(), header()))} aria-colindex={rozieAttr(headerLeafStart(hg(), header()) + 1)} tabIndex={rozieAttr(cellTabindex('__header', headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(header().column.id))} style={parseInlineStyle(thStyle(header()))} data-rozie-s-d5dcab4c="">
             
             
             {<Show when={isSelectColumn(header().column.id)} fallback={<Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
@@ -7631,10 +8690,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         </tr>}</Key>
         
         {<Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
-          <Key each={headerGroups()[headerGroups().length - 1].headers as readonly any[]} by={(header) => header.id}>{(header) => <th class={"rdt-filter-cell"} role="presentation" style={parseInlineStyle(pinStyle(header().column.id))} data-rozie-s-d5dcab4c="">
+          <Key each={headerGroups()[headerGroups().length - 1].headers as readonly any[]} by={(header) => header.id}>{(header) => <th class={"rdt-filter-cell" + " " + rozieClass({ 'rdt-pinned': columnPinSide(header().column.id) !== '' })} role="presentation" style={parseInlineStyle(pinStyle(header().column.id))} data-rozie-s-d5dcab4c="">
             {<Show when={isSelectColumn(header().column.id)} fallback={<Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={columnIsFilterable(header().column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {_props.slots?.[`filter-${header().column.id}`]?.({ get columnId() { return header().column.id; }, get value() { return columnFilterValue(header().column.id); }, get uniqueValues() { return getFacetedUniqueValues(header().column.id); }, get minMax() { return getFacetedMinMaxValues(header().column.id); }, get setFilter() { return setColumnFilter; } }) ?? (_props.filterSlot ?? _props.slots?.['filter'])?.({ get columnId() { return header().column.id; }, get value() { return columnFilterValue(header().column.id); }, get uniqueValues() { return getFacetedUniqueValues(header().column.id); }, get minMax() { return getFacetedMinMaxValues(header().column.id); }, get setFilter() { return setColumnFilter; } }) ?? <input type="text" aria-label={rozieAttr('Filter ' + headerLabel(header().column.id))} class={"rdt-col-filter"} value={columnFilterValue(header().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onColumnFilterInput(header().column.id, $event); }} onClick={($event: MouseEvent & { currentTarget: HTMLInputElement; target: Element }) => { stopEvent($event); }} data-rozie-s-d5dcab4c="" />}
+                {_props.slots?.[`filter-${header().column.id}`]?.({ get columnId() { return header().column.id; }, get value() { return columnFilterValue(header().column.id); }, get uniqueValues() { return getFacetedUniqueValues(header().column.id); }, get minMax() { return getFacetedMinMaxValues(header().column.id); }, get columnLabel() { return headerLabel(header().column.id); }, get setFilter() { return setColumnFilter; } }) ?? (_props.filterSlot ?? _props.slots?.['filter'])?.({ get columnId() { return header().column.id; }, get value() { return columnFilterValue(header().column.id); }, get uniqueValues() { return getFacetedUniqueValues(header().column.id); }, get minMax() { return getFacetedMinMaxValues(header().column.id); }, get columnLabel() { return headerLabel(header().column.id); }, get setFilter() { return setColumnFilter; } }) ?? <input type="text" aria-label={rozieAttr('Filter ' + headerLabel(header().column.id))} class={"rdt-col-filter"} value={columnFilterValue(header().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onColumnFilterInput(header().column.id, $event); }} onClick={($event: MouseEvent & { currentTarget: HTMLInputElement; target: Element }) => { stopEvent($event); }} data-rozie-s-d5dcab4c="" />}
               </span></Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}</th>}</Key>
         </tr></Show>}</thead>
 
@@ -7642,16 +8701,16 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         
         <Key each={rows() as readonly any[]} by={(row) => row.id}>{(row) => <>
         <tr class={"rdt-tr" + " " + rozieClass({ 'rdt-group-header': rowIsGrouped(row()) })} role="row" data-depth={rozieAttr(row().depth)} aria-rowindex={rozieAttr(bodyAriaRowIndex(row()))} data-group-header={rozieAttr(rowIsGrouped(row()) ? row().id : null)} data-group-leaf={rozieAttr(groupingActive() && !rowIsGrouped(row()) ? row().id : null)} aria-expanded={(rowIsGrouped(row()) ? !!rowIsExpanded(row()) : null) ?? undefined} aria-selected={(local.selectionMode !== 'none' ? !!rowIsSelected(row()) : null) ?? undefined} aria-level={rozieAttr(groupingActive() ? row().depth + 1 : null)} data-rozie-s-d5dcab4c="">
-          <Key each={visibleCellsFor(row()) as readonly any[]} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td" + " " + rozieClass({ 'rdt-select-td': isSelectColumn(cell().column.id), 'rdt-expander-td': isExpanderColumn(cell().column.id), 'rdt-in-range': inRange(rowIndexOf(row()), colIndexOf(row(), cell())), 'rdt-cell-active': isActiveCell(String(rowIndexOf(row())), colIndexOf(row(), cell())) })} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(rowIndexOf(row()))} data-col-index={rozieAttr(colIndexOf(row(), cell()))} tabIndex={rozieAttr(cellTabindex(String(rowIndexOf(row())), colIndexOf(row(), cell())))} style={parseInlineStyle(bodyCellStyle(row(), cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(rowIndexOf(row()), colIndexOf(row(), cell())))} data-in-range={rozieAttr(inRange(rowIndexOf(row()), colIndexOf(row(), cell())) ? 'true' : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
+          <Key each={visibleCellsFor(row()) as readonly any[]} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td" + " " + rozieClass({ 'rdt-select-td': isSelectColumn(cell().column.id), 'rdt-expander-td': isExpanderColumn(cell().column.id), 'rdt-pinned': columnPinSide(cell().column.id) !== '', 'rdt-in-range': inRange(rowIndexOf(row()), colIndexOf(row(), cell())), 'rdt-cell-active': isActiveCell(String(rowIndexOf(row())), colIndexOf(row(), cell())) })} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(rowIndexOf(row()))} data-col-index={rozieAttr(colIndexOf(row(), cell()))} tabIndex={rozieAttr(cellTabindex(String(rowIndexOf(row())), colIndexOf(row(), cell())))} style={parseInlineStyle(bodyCellStyle(row(), cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(rowIndexOf(row()), colIndexOf(row(), cell())))} aria-colindex={rozieAttr(colIndexOf(row(), cell()) + 1)} aria-selected={(inRange(rowIndexOf(row()), colIndexOf(row(), cell())) ? 'true' : null) ?? undefined} data-in-range={rozieAttr(inRange(rowIndexOf(row()), colIndexOf(row(), cell())) ? 'true' : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
             
             {<Show when={isExpanderColumn(cell().column.id)} fallback={<Show when={isSelectColumn(cell().column.id)} fallback={<Show when={cellIsGrouped(cell())} fallback={<Show when={isEditing(rowIndexOf(row()), colIndexOf(row(), cell()))} fallback={<Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
               {_props.slots?.[`cell-${cell().column.id}`]?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(row()); }, get value() { return cell().getValue(); } }) ?? (_props.cellSlot ?? _props.slots?.['cell'])?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(row()); }, get value() { return cell().getValue(); } }) ?? rozieDisplay(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<Show when={editorTypeOf(cell().column.id) === 'custom'} fallback={<input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {_props.slots?.[`editor-${cell().column.id}`]?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(row()); }, get value() { return editorValueFor(cell().column.id); }, get commit() { return editorCommitFor(cell().column.id); }, get cancel() { return editorCancelFor(); }, get autofocus() { return editorAutofocusFor(cell().column.id, rowIndexOf(row())); } }) ?? (_props.editorSlot ?? _props.slots?.['editor'])?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(row()); }, get value() { return editorValueFor(cell().column.id); }, get commit() { return editorCommitFor(cell().column.id); }, get cancel() { return editorCancelFor(); }, get autofocus() { return editorAutofocusFor(cell().column.id, rowIndexOf(row())); } }) ?? <input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}
-              </span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
+              {<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<Show when={editorTypeOf(cell().column.id) === 'custom'} fallback={<input type="text" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onEditorDropinKeyDown($event); }} data-rozie-s-d5dcab4c="">
+                {_props.slots?.[`editor-${cell().column.id}`]?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(row()); }, get value() { return editorValueFor(cell().column.id); }, get commit() { return editorCommitFor(cell().column.id); }, get cancel() { return editorCancelFor(); }, get columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, rowIndexOf(row())); } }) ?? (_props.editorSlot ?? _props.slots?.['editor'])?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(row()); }, get value() { return editorValueFor(cell().column.id); }, get commit() { return editorCommitFor(cell().column.id); }, get cancel() { return editorCancelFor(); }, get columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, rowIndexOf(row())); } }) ?? <input type="text" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}
+              </span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id) as readonly any[]} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
-              </select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+              </select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={rozieAttr(rowIsExpanded(row()) ? 'Collapse group' : 'Expand group')} class={"rdt-expander rdt-group-toggle"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(row(), $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(row()) ? '▾' : '▸')}</button>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
                 {_props.slots?.[`cell-${cell().column.id}`]?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(row()); }, get value() { return cell().getValue(); } }) ?? (_props.cellSlot ?? _props.slots?.['cell'])?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(row()); }, get value() { return cell().getValue(); } }) ?? rozieDisplay(cell().getValue())}
@@ -7670,11 +8729,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         </tr></Show>}</>}</Key>
       </tbody>
     </table>}><div class={"rdt-scroll"} style={parseInlineStyle(rowsWindowed() && local.maxHeight ? 'max-height:' + local.maxHeight + ';overflow:auto;--rozie-data-table-max-height:' + local.maxHeight : 'overflow:auto')} data-rozie-s-d5dcab4c="">
-    <table aria-rowcount={rozieAttr(gridAriaRowCount())} class={"rozie-data-table" + " " + rozieClass({ 'rdt-sticky': local.stickyHeader, 'rdt-col-windowed': colsWindowed() })} role={rozieAttr(tableRole())} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridKeyDown($event); }} onFocusIn={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { syncActiveFromEvent($event); }} onFocusOut={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridFocusOut($event); }} onMouseDown={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridMouseDown($event); }} onDblClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridDblClick($event); }} onClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridClick($event); }} data-rozie-s-d5dcab4c="">
+    <table aria-rowcount={rozieAttr(gridAriaRowCount())} aria-colcount={rozieAttr(gridAriaColCount())} class={"rozie-data-table" + " " + rozieClass({ 'rdt-sticky': local.stickyHeader, 'rdt-col-windowed': colsWindowed() })} role={rozieAttr(tableRole())} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridKeyDown($event); }} onFocusIn={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { syncActiveFromEvent($event); }} onFocusOut={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridFocusOut($event); }} onMouseDown={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridMouseDown($event); }} onDblClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridDblClick($event); }} onClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridClick($event); }} data-rozie-s-d5dcab4c="">
       <thead class={"rdt-thead"} role="rowgroup" data-rozie-s-d5dcab4c="">
         <Key each={headerGroups() as readonly any[]} by={(hg) => hg.id}>{(hg, hgLevel) => <tr class={"rdt-tr"} role="row" aria-rowindex={rozieAttr(hgLevel() + 1)} data-rozie-s-d5dcab4c="">
           
-          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedHeadersFor(hg(), hgLevel()) as readonly any[]} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-th" + " " + rozieClass({ 'rdt-select-th': isSelectColumn(wh().header.column.id), 'rdt-expander-th': isExpanderColumn(wh().header.column.id), 'rdt-th-resizing': columnIsResizing(wh().header.column.id), 'rdt-cell-active': isActiveCell('__header', headerColIndexOf(hg(), wh().header), hgLevel()) })} role="columnheader" data-col={rozieAttr(wh().header.column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel())} colSpan={rozieAttr(wh().span > 1 ? wh().span : null)} data-col-index={rozieAttr(headerColIndexOf(hg(), wh().header))} tabIndex={rozieAttr(cellTabindex('__header', headerColIndexOf(hg(), wh().header), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(wh().header.column.id))} style={parseInlineStyle(thStyle(wh().header))} data-rozie-s-d5dcab4c="">
+          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedHeadersFor(hg(), hgLevel()) as readonly any[]} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-th" + " " + rozieClass({ 'rdt-select-th': isSelectColumn(wh().header.column.id), 'rdt-expander-th': isExpanderColumn(wh().header.column.id), 'rdt-pinned': columnPinSide(wh().header.column.id) !== '', 'rdt-th-resizing': columnIsResizing(wh().header.column.id), 'rdt-cell-active': isActiveCell('__header', headerColIndexOf(hg(), wh().header), hgLevel()) })} role="columnheader" data-col={rozieAttr(wh().header.column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel())} colSpan={rozieAttr(wh().span > 1 ? wh().span : null)} data-col-index={rozieAttr(headerColIndexOf(hg(), wh().header))} aria-colindex={rozieAttr(headerLeafStart(hg(), wh().header) + 1)} tabIndex={rozieAttr(cellTabindex('__header', headerColIndexOf(hg(), wh().header), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(wh().header.column.id))} style={parseInlineStyle(thStyle(wh().header, wh().width))} data-rozie-s-d5dcab4c="">
             {<Show when={isSelectColumn(wh().header.column.id)} fallback={<Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={wh().header.column.getCanSort && wh().header.column.getCanSort()} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
                 <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
@@ -7702,10 +8761,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
           {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadRight() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}</tr>}</Key>
         
         {<Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
-          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedHeadersFor(headerGroups()[headerGroups().length - 1], headerGroups().length - 1) as readonly any[]} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-filter-cell"} role="presentation" data-col={rozieAttr(wh().header.column.id)} style={parseInlineStyle(pinStyle(wh().header.column.id))} data-rozie-s-d5dcab4c="">
+          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedHeadersFor(headerGroups()[headerGroups().length - 1], headerGroups().length - 1) as readonly any[]} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-filter-cell" + " " + rozieClass({ 'rdt-pinned': columnPinSide(wh().header.column.id) !== '' })} role="presentation" data-col={rozieAttr(wh().header.column.id)} style={parseInlineStyle(pinStyle(wh().header.column.id))} data-rozie-s-d5dcab4c="">
             {<Show when={isSelectColumn(wh().header.column.id)} fallback={<Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={columnIsFilterable(wh().header.column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {_props.slots?.[`filter-${wh().header.column.id}`]?.({ get columnId() { return wh().header.column.id; }, get value() { return columnFilterValue(wh().header.column.id); }, get uniqueValues() { return getFacetedUniqueValues(wh().header.column.id); }, get minMax() { return getFacetedMinMaxValues(wh().header.column.id); }, get setFilter() { return setColumnFilter; } }) ?? (_props.filterSlot ?? _props.slots?.['filter'])?.({ get columnId() { return wh().header.column.id; }, get value() { return columnFilterValue(wh().header.column.id); }, get uniqueValues() { return getFacetedUniqueValues(wh().header.column.id); }, get minMax() { return getFacetedMinMaxValues(wh().header.column.id); }, get setFilter() { return setColumnFilter; } }) ?? <input type="text" aria-label={rozieAttr('Filter ' + headerLabel(wh().header.column.id))} class={"rdt-col-filter"} value={columnFilterValue(wh().header.column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onColumnFilterInput(wh().header.column.id, $event); }} onClick={($event: MouseEvent & { currentTarget: HTMLInputElement; target: Element }) => { stopEvent($event); }} data-rozie-s-d5dcab4c="" />}
+                {_props.slots?.[`filter-${wh().header.column.id}`]?.({ get columnId() { return wh().header.column.id; }, get value() { return columnFilterValue(wh().header.column.id); }, get uniqueValues() { return getFacetedUniqueValues(wh().header.column.id); }, get minMax() { return getFacetedMinMaxValues(wh().header.column.id); }, get columnLabel() { return headerLabel(wh().header.column.id); }, get setFilter() { return setColumnFilter; } }) ?? (_props.filterSlot ?? _props.slots?.['filter'])?.({ get columnId() { return wh().header.column.id; }, get value() { return columnFilterValue(wh().header.column.id); }, get uniqueValues() { return getFacetedUniqueValues(wh().header.column.id); }, get minMax() { return getFacetedMinMaxValues(wh().header.column.id); }, get columnLabel() { return headerLabel(wh().header.column.id); }, get setFilter() { return setColumnFilter; } }) ?? <input type="text" aria-label={rozieAttr('Filter ' + headerLabel(wh().header.column.id))} class={"rdt-col-filter"} value={columnFilterValue(wh().header.column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onColumnFilterInput(wh().header.column.id, $event); }} onClick={($event: MouseEvent & { currentTarget: HTMLInputElement; target: Element }) => { stopEvent($event); }} data-rozie-s-d5dcab4c="" />}
               </span></Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}</th>}</Key>
           {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadRight() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}</tr></Show>}</thead>
 
@@ -7716,18 +8775,19 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         </tr>
         
         <Key each={windowedRows() as readonly any[]} by={(wr) => wr.row.id}>{(wr) => <>
-        <tr class={"rdt-tr" + " " + rozieClass({ 'rdt-group-header': rowIsGrouped(wr().row), 'rdt-row-pinned': wr().pinned })} role="row" data-row={rozieAttr(wr().vi.index)} aria-rowindex={rozieAttr(headerRowCount() + wr().vi.index + 1)} data-index={rozieAttr(wr().vi.index)} data-pinned={rozieAttr(wr().pinned ? 'true' : null)} data-depth={rozieAttr(wr().row.depth)} data-group-header={rozieAttr(rowIsGrouped(wr().row) ? wr().row.id : null)} data-group-leaf={rozieAttr(groupingActive() && !rowIsGrouped(wr().row) ? wr().row.id : null)} aria-expanded={(rowIsGrouped(wr().row) ? !!rowIsExpanded(wr().row) : null) ?? undefined} aria-selected={(local.selectionMode !== 'none' ? !!rowIsSelected(wr().row) : null) ?? undefined} aria-level={rozieAttr(groupingActive() ? wr().row.depth + 1 : null)} data-rozie-s-d5dcab4c="">
+        <tr class={"rdt-tr" + " " + rozieClass({ 'rdt-group-header': rowIsGrouped(wr().row), 'rdt-row-pinned': wr().pinned, 'rdt-placeholder-row': rowIsLazyPlaceholder(wr().row) })} role="row" data-row={rozieAttr(wr().vi.index)} aria-rowindex={rozieAttr(headerRowCount() + wr().vi.index + 1)} data-index={rozieAttr(wr().vi.index)} data-pinned={rozieAttr(wr().pinned ? 'true' : null)} data-depth={rozieAttr(wr().row.depth)} data-group-header={rozieAttr(rowIsGrouped(wr().row) ? wr().row.id : null)} data-group-leaf={rozieAttr(groupingActive() && !rowIsGrouped(wr().row) ? wr().row.id : null)} aria-expanded={(rowIsGrouped(wr().row) ? !!rowIsExpanded(wr().row) : null) ?? undefined} aria-selected={(local.selectionMode !== 'none' ? !!rowIsSelected(wr().row) : null) ?? undefined} aria-level={rozieAttr(groupingActive() ? wr().row.depth + 1 : null)} aria-busy={(rowIsLazyPlaceholder(wr().row) ? 'true' : null) ?? undefined} data-rozie-s-d5dcab4c="">
           
-          {<Show when={colsWindowed()}><td class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedCells(wr().row) as readonly any[]} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td" + " " + rozieClass({ 'rdt-select-td': isSelectColumn(cell().column.id), 'rdt-expander-td': isExpanderColumn(cell().column.id), 'rdt-in-range': inRange(wr().vi.index, colIndexOf(wr().row, cell())), 'rdt-cell-active': isActiveCell(String(wr().vi.index), colIndexOf(wr().row, cell())) })} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(wr().vi.index)} data-col-index={rozieAttr(colIndexOf(wr().row, cell()))} tabIndex={rozieAttr(cellTabindex(String(wr().vi.index), colIndexOf(wr().row, cell())))} style={parseInlineStyle(bodyCellStyle(wr().row, cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(wr().vi.index, colIndexOf(wr().row, cell())))} data-in-range={rozieAttr(inRange(wr().vi.index, colIndexOf(wr().row, cell())) ? 'true' : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
+          {<Show when={colsWindowed()}><td class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedCells(wr().row) as readonly any[]} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td" + " " + rozieClass({ 'rdt-select-td': isSelectColumn(cell().column.id), 'rdt-expander-td': isExpanderColumn(cell().column.id), 'rdt-pinned': columnPinSide(cell().column.id) !== '', 'rdt-in-range': inRange(wr().vi.index, colIndexOf(wr().row, cell())), 'rdt-cell-active': isActiveCell(String(wr().vi.index), colIndexOf(wr().row, cell())) })} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(wr().vi.index)} data-col-index={rozieAttr(colIndexOf(wr().row, cell()))} tabIndex={rozieAttr(cellTabindex(String(wr().vi.index), colIndexOf(wr().row, cell())))} style={parseInlineStyle(bodyCellStyle(wr().row, cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(wr().vi.index, colIndexOf(wr().row, cell())))} aria-colindex={rozieAttr(colIndexOf(wr().row, cell()) + 1)} aria-selected={(inRange(wr().vi.index, colIndexOf(wr().row, cell())) ? 'true' : null) ?? undefined} data-in-range={rozieAttr(inRange(wr().vi.index, colIndexOf(wr().row, cell())) ? 'true' : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
             
-            {<Show when={isExpanderColumn(cell().column.id)} fallback={<Show when={isSelectColumn(cell().column.id)} fallback={<Show when={cellIsGrouped(cell())} fallback={<Show when={isEditing(wr().vi.index, colIndexOf(wr().row, cell()))} fallback={<Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
+            
+            {<Show when={rowIsLazyPlaceholder(wr().row) && isSelectColumn(cell().column.id)} fallback={<Show when={rowIsLazyPlaceholder(wr().row) && isExpanderColumn(cell().column.id)} fallback={<Show when={rowIsLazyPlaceholder(wr().row)} fallback={<Show when={isExpanderColumn(cell().column.id)} fallback={<Show when={isSelectColumn(cell().column.id)} fallback={<Show when={cellIsGrouped(cell())} fallback={<Show when={isEditing(wr().vi.index, colIndexOf(wr().row, cell()))} fallback={<Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
               {_props.slots?.[`cell-${cell().column.id}`]?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(wr().row); }, get value() { return cell().getValue(); } }) ?? (_props.cellSlot ?? _props.slots?.['cell'])?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(wr().row); }, get value() { return cell().getValue(); } }) ?? rozieDisplay(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<Show when={editorTypeOf(cell().column.id) === 'custom'} fallback={<input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {_props.slots?.[`editor-${cell().column.id}`]?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(wr().row); }, get value() { return editorValueFor(cell().column.id); }, get commit() { return editorCommitFor(cell().column.id); }, get cancel() { return editorCancelFor(); }, get autofocus() { return editorAutofocusFor(cell().column.id, wr().vi.index); } }) ?? (_props.editorSlot ?? _props.slots?.['editor'])?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(wr().row); }, get value() { return editorValueFor(cell().column.id); }, get commit() { return editorCommitFor(cell().column.id); }, get cancel() { return editorCancelFor(); }, get autofocus() { return editorAutofocusFor(cell().column.id, wr().vi.index); } }) ?? <input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}
-              </span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
+              {<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<Show when={editorTypeOf(cell().column.id) === 'custom'} fallback={<input type="text" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onEditorDropinKeyDown($event); }} data-rozie-s-d5dcab4c="">
+                {_props.slots?.[`editor-${cell().column.id}`]?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(wr().row); }, get value() { return editorValueFor(cell().column.id); }, get commit() { return editorCommitFor(cell().column.id); }, get cancel() { return editorCancelFor(); }, get columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, wr().vi.index); } }) ?? (_props.editorSlot ?? _props.slots?.['editor'])?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(wr().row); }, get value() { return editorValueFor(cell().column.id); }, get commit() { return editorCommitFor(cell().column.id); }, get cancel() { return editorCancelFor(); }, get columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, wr().vi.index); } }) ?? <input type="text" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}
+              </span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id) as readonly any[]} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
-              </select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+              </select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? 'Collapse group' : 'Expand group')} class={"rdt-expander rdt-group-toggle"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(wr().row, $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? '▾' : '▸')}</button>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
                 {_props.slots?.[`cell-${cell().column.id}`]?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(wr().row); }, get value() { return cell().getValue(); } }) ?? (_props.cellSlot ?? _props.slots?.['cell'])?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(wr().row); }, get value() { return cell().getValue(); } }) ?? rozieDisplay(cell().getValue())}
@@ -7736,7 +8796,12 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectCellSlot ?? _props.slots?.['selectCell'])?.({ get row() { return cellSlotRow(wr().row); }, get checked() { return rowIsSelected(wr().row); }, toggle: e => onToggleRow(wr().row, e) }) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(wr().row)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleRow(wr().row, $event); }} data-rozie-s-d5dcab4c="" />}
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={rowCanExpand(wr().row)}><button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? 'Collapse row' : 'Expand row')} class={"rdt-expander"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(wr().row, $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? '▾' : '▸')}</button></Show>}</span></Show>}{<Show when={isFillHandleCell(wr().vi.index, colIndexOf(wr().row, cell()))}><span data-fill-handle="" data-testid="fill-handle" aria-hidden="true" class={"rdt-fill-handle"} onPointerDown={($event: PointerEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c="" /></Show>}</td>}</Key>
+              {<Show when={rowCanExpand(wr().row)}><button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? 'Collapse row' : 'Expand row')} class={"rdt-expander"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(wr().row, $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? '▾' : '▸')}</button></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+              {(_props.placeholderSlot ?? _props.slots?.['placeholder'])?.({ get index() { return wr().vi.index; }, get columnId() { return cell().column.id; } }) ?? <span class={"rdt-skeleton"} aria-hidden="true" data-rozie-s-d5dcab4c="">&#8203;</span>}
+            </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+              
+              <input class={"rdt-select-placeholder"} type="checkbox" disabled={true} tabIndex={-1} aria-hidden="true" style={{ visibility: "hidden" }} data-rozie-s-d5dcab4c="" />
+            </span></Show>}{<Show when={isFillHandleCell(wr().vi.index, colIndexOf(wr().row, cell()))}><span data-fill-handle="" data-testid="fill-handle" aria-hidden="true" class={"rdt-fill-handle"} onPointerDown={($event: PointerEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c="" /></Show>}</td>}</Key>
           
           {<Show when={colsWindowed()}><td class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadRight() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}</tr>