@rozie-ui/data-table-lit 0.4.0 → 0.6.0

package/src/DataTable.ts

@@ -5,7 +5,7 @@ import { RozieSlotDistributor, createLitControllableProperty, rozieAttr, rozieDi
 import { ContextProvider, createContext } from '@lit/context';
 import { repeat } from 'lit/directives/repeat.js';
 import '@rozie-ui/popover-lit';
-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';
@@ -37,6 +37,15 @@ 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).
+
 const __rozieCtx_data_table_columns = createContext(Symbol.for("rozie:data-table:columns"));
 
 interface RozieGroupBarSlotCtx {
@@ -63,9 +72,15 @@ interface RozieDynamicFilterSlotCtx {
   value: any;
   uniqueValues: any;
   minMax: any;
+  columnLabel: any;
   setFilter: any;
 }
 
+interface RoziePlaceholderSlotCtx {
+  index: any;
+  columnId: any;
+}
+
 interface RozieSelectCellSlotCtx {
   row: any;
   checked: any;
@@ -86,6 +101,7 @@ interface RozieDynamicEditorSlotCtx {
   value: any;
   commit: any;
   cancel: any;
+  columnLabel: any;
   autofocus: any;
 }
 
@@ -104,6 +120,7 @@ interface RozieFilterSlotCtx {
   value: any;
   uniqueValues: any;
   minMax: any;
+  columnLabel: any;
   setFilter: any;
 }
 
@@ -121,6 +138,7 @@ interface RozieEditorSlotCtx {
   value: any;
   commit: any;
   cancel: any;
+  columnLabel: any;
   autofocus: any;
 }
 
@@ -130,6 +148,32 @@ export default class DataTable extends SignalWatcher(LitElement) {
 
   static styles = css`
 :host{display:contents}
+:host {
+  --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;
   width: 100%;
@@ -264,6 +308,16 @@ export default class DataTable extends SignalWatcher(LitElement) {
   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);
@@ -302,6 +356,9 @@ export default class DataTable extends SignalWatcher(LitElement) {
 .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));
@@ -421,6 +478,9 @@ export default class DataTable extends SignalWatcher(LitElement) {
 .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);
@@ -459,6 +519,51 @@ export default class DataTable extends SignalWatcher(LitElement) {
   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;
@@ -467,14 +572,14 @@ export default class DataTable extends SignalWatcher(LitElement) {
 `;
 
   /**
-   * The row data — `model: true`, so a committed cell/row edit writes a **fresh** array back through `r-model:data` (uncontrolled fallback `dataDefault`). A stable reference per Rozie's setup-once model — fed directly into table-core (never map/cloned in the watcher).
+   * The row data — `model: true`, so a committed cell/row edit writes a **fresh** array back through the two-way `data` binding (uncontrolled fallback `dataDefault`). A stable reference per Rozie's setup-once model — fed directly into table-core (never map/cloned in the watcher).
    * @example
    * <rozie-data-table .data=${rows} @data-change=${…} .columns=${cols}></rozie-data-table>
    */
   @property({ type: Array, attribute: 'data' }) _data_attr!: any[];
   private _dataControllable = createLitControllableProperty<any[]>({ host: this, eventName: 'data-change', defaultValue: [], initialControlledValue: undefined });
   /**
-   * Config-array column fallback (lower precedence than `<Column>` children). Each entry: `{ id?, field, header?, sortable?, filterable?, pinned?, width? }`. Columns may come from this array, from `<Column>` children, or both (id-keyed last-write-wins union).
+   * Config-array column fallback (lower precedence than `<Column>` children). Each entry: `{ id?, field, header?, sortable?, filterable?, pinned?, width? }`. Columns may come from this array, from `<Column>` children, or both (id-keyed last-write-wins union). A `pinned` value of `'left'` or `'right'` is applied once as the table's initial `columnPinning` state — identical to `<Column pinned>` — which also REORDERS that column, since table-core orders visible cells `[left-pinned, center, right-pinned]`. A consumer who has already expressed a pin (an initial two-way `columnPinning` model value or an interactive pin) owns the slice and this declaration is ignored.
    */
   @property({ type: Array }) columns: any[] = [];
   /**
@@ -520,7 +625,7 @@ export default class DataTable extends SignalWatcher(LitElement) {
    */
   @property({ type: Number, reflect: true }) pageCount: number | null = null;
   /**
-   * Opt-in **expandable rows**. When `true`, a leading chevron expander column auto-injects (after the select column) and `getExpandedRowModel` activates; default `false` is byte-identical-off. Every row can expand to reveal a `#detail` panel unless `getSubRows` is supplied (then only rows with children expand). Bind `:expandable="true"` (a bare attr only coerces on Vue+Lit).
+   * Opt-in **expandable rows**. When `true`, a leading chevron expander column auto-injects (after the select column) and `getExpandedRowModel` activates; default `false` is byte-identical-off. Every row can expand to reveal a `#detail` panel unless `getSubRows` is supplied (then only rows with children expand). Pass `expandable` as a real boolean — a valueless attribute only coerces to `true` on Vue and Lit.
    */
   @property({ type: Boolean, reflect: true }) expandable: boolean = false;
   /**
@@ -528,6 +633,10 @@ export default class DataTable extends SignalWatcher(LitElement) {
    */
   @property({ type: Object, attribute: 'expanded' }) _expanded_attr: any | boolean = null;
   private _expandedControllable = createLitControllableProperty<any | boolean>({ host: this, eventName: 'expanded-change', defaultValue: null, initialControlledValue: undefined });
+  /**
+   * 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.
+   */
+  @property({ type: Function }) getRowId: ((...args: any[]) => any) | null = 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.
    */
@@ -537,7 +646,7 @@ export default class DataTable extends SignalWatcher(LitElement) {
    */
   @property({ type: Boolean, reflect: true }) groupable: boolean = false;
   /**
-   * `GroupingState` — an ordered `string[]` of column ids (multi-column → nested groups, e.g. `['region','category']`). An empty/unbound list is ungrouped (byte-identical-off). Group-header rows are collapsible (they ride the expand model). Surfaces through `group-change`; uncontrolled fallback (`$data.groupingDefault`, default `[]`) when unbound — the default is `null` (mirroring `expanded`) so the uncontrolled fallback is reachable and the grouping auto-expand default can activate when a consumer applies grouping without binding `r-model:grouping` (a non-null `[]` default would short-circuit it). All reads are null-guarded, so table-core still receives an array.
+   * `GroupingState` — an ordered `string[]` of column ids (multi-column → nested groups, e.g. `['region','category']`). An empty/unbound list is ungrouped (byte-identical-off). Group-header rows are collapsible (they ride the expand model). Surfaces through `group-change`; uncontrolled fallback (`$data.groupingDefault`, default `[]`) when unbound — the default is `null` (mirroring `expanded`) so the uncontrolled fallback is reachable and the grouping auto-expand default can activate when a consumer applies grouping without binding the two-way `grouping` model (a non-null `[]` default would short-circuit it). All reads are null-guarded, so table-core still receives an array.
    */
   @property({ type: Array, attribute: 'grouping' }) _grouping_attr: any[] | null = null;
   private _groupingControllable = createLitControllableProperty<any[]>({ host: this, eventName: 'grouping-change', defaultValue: null, initialControlledValue: undefined });
@@ -577,7 +686,7 @@ export default class DataTable extends SignalWatcher(LitElement) {
    */
   @property({ type: Boolean, reflect: true }) stickyHeader: boolean = false;
   /**
-   * `'table'` (default, row-oriented, byte-behaviorally identical to a plain accessible table) | `'grid'` (GA since Phase 63) — lights up the full WAI-ARIA **[grid interaction mode](/components/data-table-grid-mode)**: `role="grid"`, a roving single tab-stop, 2-D APG arrow-key cell navigation, range selection, and clipboard support.
+   * `'table'` (default, row-oriented, byte-behaviorally identical to a plain accessible table) | `'grid'` — lights up the full WAI-ARIA **[grid interaction mode](/components/data-table-grid-mode)**: `role="grid"`, a roving single tab-stop, 2-D APG arrow-key cell navigation, range selection, and clipboard support.
    */
   @property({ type: String, reflect: true }) interactionMode: string = 'table';
   /**
@@ -655,15 +764,27 @@ export default class DataTable extends SignalWatcher(LitElement) {
   private _rangeAnchor = signal<any>(null);
   private _rangeFocus = signal<any>(null);
   private _pasteAnnounce = signal('');
+  private _rangeAnnounce = signal('');
   private _liveAnnounce = signal('');
   @query('[data-rozie-ref="__rozieRoot"]') private _ref__rozieRoot!: HTMLElement;
 private __rozieWatchInitial_0 = true;
 private __rozieWatchInitial_1 = true;
+private __rozieWatchInitial_2 = true;
 private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { context: __rozieCtx_data_table_columns, initialValue: ((__rozieCtxHost) => ({
   registerColumn: (id: any, spec: any) => {
     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 = __rozieCtxHost._colReg.value ? (__rozieCtxHost._colReg.value as Record<string, any>)[key] : undefined;
+    if (prev !== undefined && columnSpecsEquivalent(prev, spec)) return;
     __rozieCtxHost._colReg.value = {
       ...__rozieCtxHost._colReg.value,
       [key]: spec
@@ -693,6 +814,9 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
   @queryAssignedElements({ flatten: true }) private _slotDynamicColHeaderElements!: Element[];
   @state() private _hasSlotDynamicFilter = false;
   @queryAssignedElements({ flatten: true }) private _slotDynamicFilterElements!: Element[];
+  @state() private _hasSlotPlaceholder = false;
+  @queryAssignedElements({ slot: 'placeholder', flatten: true }) private _slotPlaceholderElements!: Element[];
+  @property({ attribute: false }) placeholder?: (scope: { index: any; columnId: any }) => unknown;
   @state() private _hasSlotSelectCell = false;
   @queryAssignedElements({ slot: 'selectCell', flatten: true }) private _slotSelectCellElements!: Element[];
   @property({ attribute: false }) selectCell?: (scope: { row: any; checked: any; toggle: any }) => unknown;
@@ -708,13 +832,13 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
   @property({ attribute: false }) colHeader?: (scope: { columnId: any; column: any; label: any }) => unknown;
   @state() private _hasSlotFilter = false;
   @queryAssignedElements({ slot: 'filter', flatten: true }) private _slotFilterElements!: Element[];
-  @property({ attribute: false }) filter?: (scope: { columnId: any; value: any; uniqueValues: any; minMax: any; setFilter: any }) => unknown;
+  @property({ attribute: false }) filter?: (scope: { columnId: any; value: any; uniqueValues: any; minMax: any; columnLabel: any; setFilter: any }) => unknown;
   @state() private _hasSlotCell = false;
   @queryAssignedElements({ slot: 'cell', flatten: true }) private _slotCellElements!: Element[];
   @property({ attribute: false }) cell?: (scope: { columnId: any; column: any; row: any; value: any }) => unknown;
   @state() private _hasSlotEditor = false;
   @queryAssignedElements({ slot: 'editor', flatten: true }) private _slotEditorElements!: Element[];
-  @property({ attribute: false }) editor?: (scope: { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; autofocus: any }) => unknown;
+  @property({ attribute: false }) editor?: (scope: { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; columnLabel: any; autofocus: any }) => unknown;
   // Phase 79 Plan 08 (R4) contract for 79-09: the record intake for
   // record-routed slot fills. 79-09's consumer-side emitSlotFiller
   // accumulates an object literal onto the SAME `.rozieSlots=${{ ... }}`
@@ -724,7 +848,7 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
   // named function-prop / <slot> fallback (AC-9). Attribute
   // deserialization is disabled — this is a function-valued record,
   // never reflected to/from an HTML attribute.
-  @property({ attribute: false }) rozieSlots?: { [key: `colHeader-${string}`]: (scope: { columnId: any; column: any; label: any }) => unknown; [key: `filter-${string}`]: (scope: { columnId: any; value: any; uniqueValues: any; minMax: any; setFilter: any }) => unknown; [key: `cell-${string}`]: (scope: { columnId: any; column: any; row: any; value: any }) => unknown; [key: `editor-${string}`]: (scope: { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; autofocus: any }) => unknown; } & Record<string, (scope: any) => unknown>;
+  @property({ attribute: false }) rozieSlots?: { [key: `colHeader-${string}`]: (scope: { columnId: any; column: any; label: any }) => unknown; [key: `filter-${string}`]: (scope: { columnId: any; value: any; uniqueValues: any; minMax: any; columnLabel: any; setFilter: any }) => unknown; [key: `cell-${string}`]: (scope: { columnId: any; column: any; row: any; value: any }) => unknown; [key: `editor-${string}`]: (scope: { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; columnLabel: any; autofocus: any }) => unknown; } & Record<string, (scope: any) => unknown>;
 
   private _disconnectCleanups: Array<() => void> = [];
   // Re-parenting guard: set true once the deferred teardown has actually
@@ -787,6 +911,17 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
       }
     }
 
+    {
+      const slotEl = this.shadowRoot?.querySelector('slot[name="placeholder"]');
+      if (slotEl !== null && slotEl !== undefined) {
+        const update = () => { this._hasSlotPlaceholder = this._slotPlaceholderElements.length > 0; };
+        slotEl.addEventListener('slotchange', update);
+        // CR-05 fix: push cleanup so the listener is removed on disconnectedCallback.
+        this._disconnectCleanups.push(() => slotEl.removeEventListener('slotchange', update));
+        update();
+      }
+    }
+
     {
       const slotEl = this.shadowRoot?.querySelector('slot[name="selectCell"]');
       if (slotEl !== null && slotEl !== undefined) {
@@ -883,6 +1018,7 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     this._hasSlotSelectAll = Array.from(this.children).some((el) => el.getAttribute('slot') === 'selectAll');
     this._hasSlotDynamicColHeader = Array.from(this.children).some((el) => !el.hasAttribute('slot') && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
     this._hasSlotDynamicFilter = Array.from(this.children).some((el) => !el.hasAttribute('slot') && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
+    this._hasSlotPlaceholder = Array.from(this.children).some((el) => el.getAttribute('slot') === 'placeholder');
     this._hasSlotSelectCell = Array.from(this.children).some((el) => el.getAttribute('slot') === 'selectCell');
     this._hasSlotDynamicCell = Array.from(this.children).some((el) => !el.hasAttribute('slot') && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
     this._hasSlotDynamicEditor = Array.from(this.children).some((el) => !el.hasAttribute('slot') && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
@@ -898,6 +1034,7 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
   firstUpdated(): void {
     this._armListeners();
 
+    this._disconnectCleanups.push(effect(() => { const __watchVal = (() => this._windowVer.value)(); untracked(() => { if (this.__rozieWatchInitial_0) { this.__rozieWatchInitial_0 = false; return; } (() => this.emitVisibleRangeIfChanged())(); }); }));
     this._disconnectCleanups.push(effect(() => { const __watchVal = (() => [this.sorting, this.globalFilter, this.columnFilters, this.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
     // Next button availability track the new total.
@@ -911,11 +1048,17 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     // columnDefs()/tableColumns() build the UNION of both, and reFeed re-passes columns.
     // (Consumers memoize the array as with $props.data/$props.sorting; the uncontrolled
     // <Column>-children path leaves $props.columns undefined — a stable no-op getter.)
-    this.columns, this._colReg.value])(); untracked(() => { if (this.__rozieWatchInitial_0) { this.__rozieWatchInitial_0 = false; return; } (() => {
+    this.columns, this._colReg.value])(); untracked(() => { if (this.__rozieWatchInitial_1) { this.__rozieWatchInitial_1 = false; return; } (() => {
+      // Seed BEFORE the re-feed so the pinning this call may write is part of the state object
+      // table-core receives on this same tick (rather than landing a frame late and re-ordering
+      // getVisibleCells() a render after the columns appear). One-shot and self-latching — see
+      // seedColumnPinning() in stateAssembly.rzts. This is the `<Column>`-children entry point:
+      // those register during mount, so the $onMount call below can find zero columns.
+      this.seedColumnPinning();
       this.reFeed();
       this.maybeClearHistoryOnExternalSwap();
     })(); }); }));
-    this._disconnectCleanups.push(effect(() => { const __watchVal = (() => [this.sorting, this.columnFilters, this.globalFilter, this._sortingDefault.value, this._columnFiltersDefault.value, this._globalFilterDefault.value])(); untracked(() => { if (this.__rozieWatchInitial_1) { this.__rozieWatchInitial_1 = false; return; } (() => {
+    this._disconnectCleanups.push(effect(() => { const __watchVal = (() => [this.sorting, this.columnFilters, this.globalFilter, this._sortingDefault.value, this._columnFiltersDefault.value, this._globalFilterDefault.value])(); untracked(() => { if (this.__rozieWatchInitial_2) { this.__rozieWatchInitial_2 = false; return; } (() => {
       const msg = this.buildSortFilterAnnounce();
       if (msg) this._liveAnnounce.value = msg;
     })(); }); }));
@@ -925,6 +1068,16 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
         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 = __rozieCtxHost._colReg.value ? (__rozieCtxHost._colReg.value as Record<string, any>)[key] : undefined;
+        if (prev !== undefined && columnSpecsEquivalent(prev, spec)) return;
         __rozieCtxHost._colReg.value = {
           ...__rozieCtxHost._colReg.value,
           [key]: spec
@@ -945,6 +1098,19 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     // a one-way `:data`) has a base array to whole-array-replace. currentData() then sources
     // the bound prop when controlled, this fallback otherwise.
     this._dataDefault.value = this.data || [];
+    // Apply any per-column `pinned` declaration as the INITIAL pinning state BEFORE createTable
+    // reads currentState() below, so the first row model table-core builds is already correctly
+    // ordered (getVisibleCells() returns [left-pinned, center, right-pinned]) rather than
+    // re-ordering a render later. Covers the `:columns` config-array form, which is available
+    // now; `<Column>` children register during mount and are covered by the re-feed watch's own
+    // call. One-shot and self-latching — see seedColumnPinning() in stateAssembly.rzts.
+    // Apply any per-column `pinned` declaration as the INITIAL pinning state BEFORE createTable
+    // reads currentState() below, so the first row model table-core builds is already correctly
+    // ordered (getVisibleCells() returns [left-pinned, center, right-pinned]) rather than
+    // re-ordering a render later. Covers the `:columns` config-array form, which is available
+    // now; `<Column>` children register during mount and are covered by the re-feed watch's own
+    // call. One-shot and self-latching — see seedColumnPinning() in stateAssembly.rzts.
+    this.seedColumnPinning();
     // Build the table instance HERE so the closures below capture the live `table`.
     // Build the table instance HERE so the closures below capture the live `table`.
     this.table = createTable({
@@ -956,7 +1122,7 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
       // 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: this.currentData(),
+      data: this.feedData(),
       columns: this.tableColumns(),
       state: this.currentState(),
       getCoreRowModel: getCoreRowModel(),
@@ -971,7 +1137,10 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
       // default `!!subRows.length` rule applies (only parents with children expand).
       getExpandedRowModel: getExpandedRowModel(),
       getSubRows: (this.getSubRows || undefined) as any,
-      getRowCanExpand: this.expandable === true && this.getSubRows == null ? () => true : undefined,
+      // Row identity (quick 260925-rew) — see rowIdOption(). Re-passed on re-feed like the
+      // other row-model fns.
+      getRowId: this.rowIdOption(),
+      getRowCanExpand: this.expandable === true && this.getSubRows == null ? (row: any) => !this.rowIsLazyPlaceholder(row) : undefined,
       onExpandedChange: this.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
@@ -1016,7 +1185,7 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
       // 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: this.selectionMode !== 'none',
+      enableRowSelection: this.rowSelectionOption(),
       enableMultiRowSelection: this.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
@@ -1060,6 +1229,10 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
       // 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 (this.rowsWindowed() && this.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.
+        this.migratePlaceholderSizeCache();
         this.virtualizer.setOptions(this.virtualizerOptions());
         this.virtualizer._willUpdate();
       }
@@ -1135,6 +1308,24 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     // 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.
     this.gridRoot = this._ref__rozieRoot ? this._ref__rozieRoot.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".
+    // 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') {
+      this.docPointerDown = (ev: any) => {
+        if (!this.gridRoot) {
+          this.outsidePointerDown = false;
+          return;
+        }
+        const path = ev && typeof ev.composedPath === 'function' ? ev.composedPath() : null;
+        const inside = path ? path.indexOf(this.gridRoot) !== -1 : !!(ev && ev.target && this.gridRoot.contains && this.gridRoot.contains(ev.target));
+        this.outsidePointerDown = !inside;
+      };
+      document.addEventListener('pointerdown', this.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
@@ -1267,6 +1458,31 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
           if (!w) {
             console.warn('[rozie-data-table] virtual is on for columns but the scroll container has no bounded width; set a CSS width on an ancestor so the column window can be measured');
           }
+          // COLUMN-AXIS FIRST-WINDOW BUMP (quick 260908-vcy). The mount-kick above fires right
+          // after `new Virtualizer(...)` — BEFORE colVirtualizer has measured, and before the
+          // spacer effects even exist. Any fine-grained subscriber created inside that measure
+          // gap takes colPadLeft()/colPadRight()'s `if (!items.length) return 0` early return,
+          // which reads ONLY windowVer + editVer and never reaches the live path's reads
+          // (forcedColumns()/columnSize()/column state). Its dependency set is therefore those
+          // two counters alone — and without this bump nothing ever touches them again, so the
+          // subscriber stays frozen at 0 for the lifetime of the component. Measured on Svelte:
+          // the FIRST header row's trailing spacer froze at 0px while its siblings (created
+          // after measurement, on the live path) tracked correctly; under table-layout:fixed the
+          // first row alone establishes column widths, so that one cell collapsed the whole
+          // table's scrollWidth from 9000 to 1350. The five other targets re-render wholesale
+          // (Solid re-creates these rows), which masked it.
+          //
+          // The ROW axis has always been safe here only by accident: remeasureWindow() above
+          // already routes through bumpWindowVer() on this same post-first-frame callback. This
+          // is the column axis's missing equivalent — not a Svelte workaround (the emitted
+          // Svelte binding is a correct reactive template_effect; the dependency set is what was
+          // wrong), so it is fixed once, in the shared engine's consumer, for all six targets.
+          //
+          // Routed through bumpWindowVer() rather than a raw `$data.windowVer = $data.windowVer + 1`
+          // to keep 87-10's microtask coalescing AND to avoid manufacturing the ROZ138
+          // false positive that a second in-body counter self-read would trip (see the
+          // mount-kick's own comment above).
+          this.bumpWindowVer();
         }
       };
       if (typeof requestAnimationFrame === 'function') requestAnimationFrame(() => requestAnimationFrame(afterFirstFrame));else setTimeout(afterFirstFrame, 0);
@@ -1285,14 +1501,34 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
 
   updated(changedProperties: Map<string, unknown>): void {
     this.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.
+    // 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.
+    this.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.
+    // 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.
+    this.remeasureColumnSizes();
     if (!this.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 r-model:data is
-    // bound. Compare by reference AND length so a same-length single-cell edit (fresh array,
+    // $data.dataDefault) so a committed edit re-feeds on Lit whether or not the two-way
+    // `data` model is bound. Compare by reference AND length so a same-length single-cell edit (fresh array,
     // identical length) still re-feeds.
     // 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 r-model:data is
-    // bound. Compare by reference AND length so a same-length single-cell edit (fresh array,
+    // $data.dataDefault) so a committed edit re-feeds on Lit whether or not the two-way
+    // `data` model is bound. Compare by reference AND length so a same-length single-cell edit (fresh array,
     // identical length) still re-feeds.
     const d = this.currentData() || [];
     if (d === this.lastData && d.length === this.lastDataLen) return;
@@ -1307,6 +1543,12 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
       if (this.isConnected || this._rozieTornDown) return;
       this._rozieTornDown = true;
       () => {
+        // 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 (this.docPointerDown && typeof document !== 'undefined') {
+          document.removeEventListener('pointerdown', this.docPointerDown, true);
+          this.docPointerDown = null;
+        }
         if (this.virtualizerCleanup) this.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).
@@ -1352,7 +1594,7 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
 
 <div class="rdt-column-defs" style="display:none" aria-hidden="true" data-rozie-s-d5dcab4c><slot></slot></div>
 
-${!!this._invalidMsg.value ? html`<div class="rdt-sr-live" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._invalidMsg.value}</div>` : nothing}${!!this._pasteAnnounce.value ? html`<div class="rdt-sr-live rdt-sr-paste" data-testid="paste-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._pasteAnnounce.value}</div>` : nothing}${!!this._liveAnnounce.value ? html`<div class="rdt-sr-live rdt-sr-sortfilter" data-testid="sortfilter-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._liveAnnounce.value}</div>` : nothing}<div class="rdt-toolbar" data-rozie-s-d5dcab4c>
+${!!this._invalidMsg.value ? html`<div class="rdt-sr-live" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._invalidMsg.value}</div>` : nothing}${!!this._pasteAnnounce.value ? html`<div class="rdt-sr-live rdt-sr-paste" data-testid="paste-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._pasteAnnounce.value}</div>` : nothing}${!!this._rangeAnnounce.value ? html`<div class="rdt-sr-live rdt-sr-range" data-testid="range-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._rangeAnnounce.value}</div>` : nothing}${!!this._liveAnnounce.value ? html`<div class="rdt-sr-live rdt-sr-sortfilter" data-testid="sortfilter-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._liveAnnounce.value}</div>` : nothing}<div class="rdt-toolbar" data-rozie-s-d5dcab4c>
   <input class="rdt-global-filter" type="text" role="searchbox" aria-label="Search table" .value=${this.globalFilterValue()} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onGlobalFilterInput($event); }} data-rozie-s-d5dcab4c />
   
   ${this.allLeafColumns().length ? html`<details class="rdt-colvis" data-rozie-s-d5dcab4c>
@@ -1371,11 +1613,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     ${repeat<any>(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => html`<span class="rdt-group-token" data-group-token="" data-rozie-s-d5dcab4c>${rozieDisplay(gk)}</span>`)}
   </slot>`}
 </div>` : nothing}${this.isWindowed() ? html`<div class="rdt-scroll" style=${rozieStyle(this.rowsWindowed() && this.maxHeight ? 'max-height:' + this.maxHeight + ';overflow:auto;--rozie-data-table-max-height:' + this.maxHeight : 'overflow:auto')} data-rozie-s-d5dcab4c>
-<table class="${Object.entries({ "rozie-data-table": true, 'rdt-sticky': this.stickyHeader, 'rdt-col-windowed': this.colsWindowed() }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridKeyDown($event); }} @focusin=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.syncActiveFromEvent($event); }} @focusout=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridFocusOut($event); }} @mousedown=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridMouseDown($event); }} @dblclick=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridDblClick($event); }} @click=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridClick($event); }} data-rozie-s-d5dcab4c>
+<table class="${Object.entries({ "rozie-data-table": true, 'rdt-sticky': this.stickyHeader, 'rdt-col-windowed': this.colsWindowed() }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} aria-colcount=${rozieAttr(this.gridAriaColCount())} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridKeyDown($event); }} @focusin=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.syncActiveFromEvent($event); }} @focusout=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridFocusOut($event); }} @mousedown=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridMouseDown($event); }} @dblclick=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridDblClick($event); }} @click=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridClick($event); }} data-rozie-s-d5dcab4c>
   <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
     ${repeat<any>(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
       
-      ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle('width:' + this.colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c></th>` : nothing}${repeat<any>(this.windowedHeadersFor(hg, hgLevel), (wh, _idx) => wh.header.id, (wh, _idx) => html`<th class="${Object.entries({ "rdt-th": true, 'rdt-select-th': this.isSelectColumn(wh.header.column.id), 'rdt-expander-th': this.isExpanderColumn(wh.header.column.id), 'rdt-th-resizing': this.columnIsResizing(wh.header.column.id), 'rdt-cell-active': this.isActiveCell('__header', this.headerColIndexOf(hg, wh.header), hgLevel) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" 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(this.headerColIndexOf(hg, wh.header))} tabindex=${rozieAttr(this.cellTabindex('__header', this.headerColIndexOf(hg, wh.header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(wh.header.column.id))} style=${rozieStyle(this.thStyle(wh.header))} data-rozie-s-d5dcab4c>
+      ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle('width:' + this.colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c></th>` : nothing}${repeat<any>(this.windowedHeadersFor(hg, hgLevel), (wh, _idx) => wh.header.id, (wh, _idx) => html`<th class="${Object.entries({ "rdt-th": true, 'rdt-select-th': this.isSelectColumn(wh.header.column.id), 'rdt-expander-th': this.isExpanderColumn(wh.header.column.id), 'rdt-pinned': this.columnPinSide(wh.header.column.id) !== '', 'rdt-th-resizing': this.columnIsResizing(wh.header.column.id), 'rdt-cell-active': this.isActiveCell('__header', this.headerColIndexOf(hg, wh.header), hgLevel) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" 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(this.headerColIndexOf(hg, wh.header))} aria-colindex=${rozieAttr(this.headerLeafStart(hg, wh.header) + 1)} tabindex=${rozieAttr(this.cellTabindex('__header', this.headerColIndexOf(hg, wh.header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(wh.header.column.id))} style=${rozieStyle(this.thStyle(wh.header, wh.width))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.selectAll !== undefined ? this.selectAll({checked: this.isAllRowsSelected(), indeterminate: this.isSomeRowsSelected(), toggle: this.onToggleAllRows}) : html`<slot name="selectAll" data-rozie-params=${(() => { try { return JSON.stringify({checked: this.isAllRowsSelected(), indeterminate: this.isSomeRowsSelected()}); } catch { return '{}'; } })()} @rozie-select-all-toggle=${($event: CustomEvent) => ((this.onToggleAllRows) as (...args: any[]) => any)($event.detail)}>
             ${this.selectionMode === 'multiple' ? html`<input class="rdt-select-all" type="checkbox" aria-label="Select all rows" ?checked=${this.isAllRowsSelected()} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onToggleAllRows($event); }} data-rozie-s-d5dcab4c />` : nothing}</slot>`}
@@ -1406,11 +1648,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
       ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle('width:' + this.colPadRight() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c></th>` : nothing}</tr>`)}
     
     ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
-      ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle('width:' + this.colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c></th>` : nothing}${repeat<any>(this.windowedHeadersFor(this._headerGroups.value[this._headerGroups.value.length - 1], this._headerGroups.value.length - 1), (wh, _idx) => wh.header.id, (wh, _idx) => html`<th class="rdt-filter-cell" role="presentation" data-col=${rozieAttr(wh.header.column.id)} style=${rozieStyle(this.pinStyle(wh.header.column.id))} data-rozie-s-d5dcab4c>
+      ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle('width:' + this.colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c></th>` : nothing}${repeat<any>(this.windowedHeadersFor(this._headerGroups.value[this._headerGroups.value.length - 1], this._headerGroups.value.length - 1), (wh, _idx) => wh.header.id, (wh, _idx) => html`<th class="${Object.entries({ "rdt-filter-cell": true, 'rdt-pinned': this.columnPinSide(wh.header.column.id) !== '' }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="presentation" data-col=${rozieAttr(wh.header.column.id)} style=${rozieStyle(this.pinStyle(wh.header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.columnIsFilterable(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.rozieSlots?.[`filter-${wh.header.column.id}`] !== undefined ? this.rozieSlots?.[`filter-${wh.header.column.id}`]!({columnId: wh.header.column.id, value: this.columnFilterValue(wh.header.column.id), uniqueValues: this.getFacetedUniqueValues(wh.header.column.id), minMax: this.getFacetedMinMaxValues(wh.header.column.id), setFilter: this.setColumnFilter}) : html`<slot name="${`filter-${wh.header.column.id}`}" data-rozie-params=${(() => { try { return JSON.stringify({columnId: wh.header.column.id, value: this.columnFilterValue(wh.header.column.id), uniqueValues: this.getFacetedUniqueValues(wh.header.column.id), minMax: this.getFacetedMinMaxValues(wh.header.column.id)}); } catch { return '{}'; } })()} @rozie-default-set-filter=${($event: CustomEvent) => ((this.setColumnFilter) as (...args: any[]) => any)($event.detail)}>
-              ${this.filter !== undefined ? this.filter({columnId: wh.header.column.id, value: this.columnFilterValue(wh.header.column.id), uniqueValues: this.getFacetedUniqueValues(wh.header.column.id), minMax: this.getFacetedMinMaxValues(wh.header.column.id), setFilter: this.setColumnFilter}) : html`<slot name="filter" data-rozie-params=${(() => { try { return JSON.stringify({columnId: wh.header.column.id, value: this.columnFilterValue(wh.header.column.id), uniqueValues: this.getFacetedUniqueValues(wh.header.column.id), minMax: this.getFacetedMinMaxValues(wh.header.column.id)}); } catch { return '{}'; } })()} @rozie-filter-set-filter=${($event: CustomEvent) => ((this.setColumnFilter) as (...args: any[]) => any)($event.detail)}>
+            ${this.rozieSlots?.[`filter-${wh.header.column.id}`] !== undefined ? this.rozieSlots?.[`filter-${wh.header.column.id}`]!({columnId: wh.header.column.id, value: this.columnFilterValue(wh.header.column.id), uniqueValues: this.getFacetedUniqueValues(wh.header.column.id), minMax: this.getFacetedMinMaxValues(wh.header.column.id), columnLabel: this.headerLabel(wh.header.column.id), setFilter: this.setColumnFilter}) : html`<slot name="${`filter-${wh.header.column.id}`}" data-rozie-params=${(() => { try { return JSON.stringify({columnId: wh.header.column.id, value: this.columnFilterValue(wh.header.column.id), uniqueValues: this.getFacetedUniqueValues(wh.header.column.id), minMax: this.getFacetedMinMaxValues(wh.header.column.id), columnLabel: this.headerLabel(wh.header.column.id)}); } catch { return '{}'; } })()} @rozie-default-set-filter=${($event: CustomEvent) => ((this.setColumnFilter) as (...args: any[]) => any)($event.detail)}>
+              ${this.filter !== undefined ? this.filter({columnId: wh.header.column.id, value: this.columnFilterValue(wh.header.column.id), uniqueValues: this.getFacetedUniqueValues(wh.header.column.id), minMax: this.getFacetedMinMaxValues(wh.header.column.id), columnLabel: this.headerLabel(wh.header.column.id), setFilter: this.setColumnFilter}) : html`<slot name="filter" data-rozie-params=${(() => { try { return JSON.stringify({columnId: wh.header.column.id, value: this.columnFilterValue(wh.header.column.id), uniqueValues: this.getFacetedUniqueValues(wh.header.column.id), minMax: this.getFacetedMinMaxValues(wh.header.column.id), columnLabel: this.headerLabel(wh.header.column.id)}); } catch { return '{}'; } })()} @rozie-filter-set-filter=${($event: CustomEvent) => ((this.setColumnFilter) as (...args: any[]) => any)($event.detail)}>
                 <input class="rdt-col-filter" type="text" aria-label=${rozieAttr('Filter ' + this.headerLabel(wh.header.column.id))} .value=${this.columnFilterValue(wh.header.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onColumnFilterInput(wh.header.column.id, $event); }} @click=${($event: MouseEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.stopEvent($event); }} data-rozie-s-d5dcab4c />
               </slot>`}
             </slot>`}
@@ -1424,11 +1666,19 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     </tr>
     
     ${repeat<any>(this.windowedRows(), (wr, _idx) => wr.row.id, (wr, _idx) => html`
-    <tr class="${Object.entries({ "rdt-tr": true, 'rdt-group-header': this.rowIsGrouped(wr.row), 'rdt-row-pinned': wr.pinned }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="row" data-row=${rozieAttr(wr.vi.index)} aria-rowindex=${rozieAttr(this.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(this.rowIsGrouped(wr.row) ? wr.row.id : null)} data-group-leaf=${rozieAttr(this.groupingActive() && !this.rowIsGrouped(wr.row) ? wr.row.id : null)} aria-expanded=${rozieAttr(this.rowIsGrouped(wr.row) ? !!this.rowIsExpanded(wr.row) : null)} aria-selected=${rozieAttr(this.selectionMode !== 'none' ? !!this.rowIsSelected(wr.row) : null)} aria-level=${rozieAttr(this.groupingActive() ? wr.row.depth + 1 : null)} data-rozie-s-d5dcab4c>
+    <tr class="${Object.entries({ "rdt-tr": true, 'rdt-group-header': this.rowIsGrouped(wr.row), 'rdt-row-pinned': wr.pinned, 'rdt-placeholder-row': this.rowIsLazyPlaceholder(wr.row) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="row" data-row=${rozieAttr(wr.vi.index)} aria-rowindex=${rozieAttr(this.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(this.rowIsGrouped(wr.row) ? wr.row.id : null)} data-group-leaf=${rozieAttr(this.groupingActive() && !this.rowIsGrouped(wr.row) ? wr.row.id : null)} aria-expanded=${rozieAttr(this.rowIsGrouped(wr.row) ? !!this.rowIsExpanded(wr.row) : null)} aria-selected=${rozieAttr(this.selectionMode !== 'none' ? !!this.rowIsSelected(wr.row) : null)} aria-level=${rozieAttr(this.groupingActive() ? wr.row.depth + 1 : null)} aria-busy=${rozieAttr(this.rowIsLazyPlaceholder(wr.row) ? 'true' : null)} data-rozie-s-d5dcab4c>
       
-      ${this.colsWindowed() ? html`<td class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle('width:' + this.colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c></td>` : nothing}${repeat<any>(this.windowedCells(wr.row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({ "rdt-td": true, 'rdt-select-td': this.isSelectColumn(cell.column.id), 'rdt-expander-td': this.isExpanderColumn(cell.column.id), 'rdt-in-range': this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)), 'rdt-cell-active': this.isActiveCell(String(wr.vi.index), this.colIndexOf(wr.row, cell)) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(wr.vi.index)} data-col-index=${rozieAttr(this.colIndexOf(wr.row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${rozieStyle(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? 'true' : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
+      ${this.colsWindowed() ? html`<td class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle('width:' + this.colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c></td>` : nothing}${repeat<any>(this.windowedCells(wr.row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({ "rdt-td": true, 'rdt-select-td': this.isSelectColumn(cell.column.id), 'rdt-expander-td': this.isExpanderColumn(cell.column.id), 'rdt-pinned': this.columnPinSide(cell.column.id) !== '', 'rdt-in-range': this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)), 'rdt-cell-active': this.isActiveCell(String(wr.vi.index), this.colIndexOf(wr.row, cell)) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(wr.vi.index)} data-col-index=${rozieAttr(this.colIndexOf(wr.row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${rozieStyle(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} aria-colindex=${rozieAttr(this.colIndexOf(wr.row, cell) + 1)} aria-selected=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? 'true' : null)} data-in-range=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? 'true' : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
         
-        ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+        
+        ${this.rowIsLazyPlaceholder(wr.row) && this.isSelectColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+          
+          <input class="rdt-select-placeholder" type="checkbox" disabled="" tabindex="-1" aria-hidden="true" style="visibility:hidden" data-rozie-s-d5dcab4c />
+        </span>` : this.rowIsLazyPlaceholder(wr.row) && this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.rowIsLazyPlaceholder(wr.row) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+          ${this.placeholder !== undefined ? this.placeholder({index: wr.vi.index, columnId: cell.column.id}) : html`<slot name="placeholder" data-rozie-params=${(() => { try { return JSON.stringify({index: wr.vi.index, columnId: cell.column.id}); } catch { return '{}'; } })()}>
+            <span class="rdt-skeleton" aria-hidden="true" data-rozie-s-d5dcab4c>&#8203;</span>
+          </slot>`}
+        </span>` : this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.rowCanExpand(wr.row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(wr.row)} aria-label=${rozieAttr(this.rowIsExpanded(wr.row) ? 'Collapse row' : 'Expand row')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onToggleExpand(wr.row, $event); }} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(wr.row) ? '▾' : '▸')}</button>` : nothing}</span>` : this.isSelectColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.selectCell !== undefined ? this.selectCell({row: this.cellSlotRow(wr.row), checked: this.rowIsSelected(wr.row), toggle: e => this.onToggleRow(wr.row, e)}) : html`<slot name="selectCell" data-rozie-params=${(() => { try { return JSON.stringify({row: this.cellSlotRow(wr.row), checked: this.rowIsSelected(wr.row)}); } catch { return '{}'; } })()} @rozie-select-cell-toggle=${($event: CustomEvent) => ((e => this.onToggleRow(wr.row, e)) as (...args: any[]) => any)($event.detail)}>
             <input class="rdt-select-row" type="checkbox" aria-label="Select row" ?checked=${this.rowIsSelected(wr.row)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onToggleRow(wr.row, $event); }} data-rozie-s-d5dcab4c />
@@ -1442,15 +1692,15 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
           </span>
           <span class="rdt-group-count" data-rozie-s-d5dcab4c>${rozieDisplay('(' + this.groupSubRowCount(wr.row) + ')')}</span>
         </span>` : this.isEditing(wr.vi.index, this.colIndexOf(wr.row, cell)) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-          ${this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
-            ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
-          </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" data-builtin-editor="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'custom' ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.rozieSlots?.[`editor-${cell.column.id}`] !== undefined ? this.rozieSlots?.[`editor-${cell.column.id}`]!({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}) : html`<slot name="${`editor-${cell.column.id}`}" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}); } catch { return '{}'; } })()}>
-              ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}); } catch { return '{}'; } })()}>
-                <input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />
+          ${this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? 'true' : null)} .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? 'true' : null)} .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
+            ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} ?selected=${opt.value === this.editorValueFor(cell.column.id)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
+          </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? 'true' : null)} ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'custom' ? html`<span style="display:contents" @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onEditorDropinKeyDown($event); }} data-rozie-s-d5dcab4c>
+            ${this.rozieSlots?.[`editor-${cell.column.id}`] !== undefined ? this.rozieSlots?.[`editor-${cell.column.id}`]!({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), columnLabel: this.headerLabel(cell.column.id), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}) : html`<slot name="${`editor-${cell.column.id}`}" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), columnLabel: this.headerLabel(cell.column.id), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}); } catch { return '{}'; } })()}>
+              ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), columnLabel: this.headerLabel(cell.column.id), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), columnLabel: this.headerLabel(cell.column.id), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}); } catch { return '{}'; } })()}>
+                <input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? 'true' : null)} .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />
               </slot>`}
             </slot>`}
-          </span>` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
+          </span>` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? 'true' : null)} .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
           ${this.rozieSlots?.[`cell-${cell.column.id}`] !== undefined ? this.rozieSlots?.[`cell-${cell.column.id}`]!({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: cell.getValue()}) : html`<slot name="${`cell-${cell.column.id}`}" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: cell.getValue()}); } catch { return '{}'; } })()}>
             ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
           </slot>`}
@@ -1469,10 +1719,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     </tr>
   </tbody>
 </table>
-</div>` : html`<table class="${Object.entries({ "rozie-data-table": true, 'rdt-sticky': this.stickyHeader }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridKeyDown($event); }} @focusin=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.syncActiveFromEvent($event); }} @focusout=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridFocusOut($event); }} @mousedown=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridMouseDown($event); }} @dblclick=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridDblClick($event); }} @click=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridClick($event); }} data-rozie-s-d5dcab4c>
+</div>` : html`<table class="${Object.entries({ "rozie-data-table": true, 'rdt-sticky': this.stickyHeader }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} aria-colcount=${rozieAttr(this.gridAriaColCount())} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridKeyDown($event); }} @focusin=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.syncActiveFromEvent($event); }} @focusout=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridFocusOut($event); }} @mousedown=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridMouseDown($event); }} @dblclick=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridDblClick($event); }} @click=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridClick($event); }} data-rozie-s-d5dcab4c>
   <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
     ${repeat<any>(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
-      ${repeat<any>(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({ "rdt-th": true, 'rdt-select-th': this.isSelectColumn(header.column.id), 'rdt-expander-th': this.isExpanderColumn(header.column.id), 'rdt-th-resizing': this.columnIsResizing(header.column.id), 'rdt-cell-active': this.isActiveCell('__header', this.headerColIndexOf(hg, header), hgLevel) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" 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(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex('__header', this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header))} data-rozie-s-d5dcab4c>
+      ${repeat<any>(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({ "rdt-th": true, 'rdt-select-th': this.isSelectColumn(header.column.id), 'rdt-expander-th': this.isExpanderColumn(header.column.id), 'rdt-pinned': this.columnPinSide(header.column.id) !== '', 'rdt-th-resizing': this.columnIsResizing(header.column.id), 'rdt-cell-active': this.isActiveCell('__header', this.headerColIndexOf(hg, header), hgLevel) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" 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(this.headerColIndexOf(hg, header))} aria-colindex=${rozieAttr(this.headerLeafStart(hg, header) + 1)} tabindex=${rozieAttr(this.cellTabindex('__header', this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header))} data-rozie-s-d5dcab4c>
         
         
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -1508,11 +1758,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     </tr>`)}
     
     ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
-      ${repeat<any>(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
+      ${repeat<any>(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({ "rdt-filter-cell": true, 'rdt-pinned': this.columnPinSide(header.column.id) !== '' }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.columnIsFilterable(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.rozieSlots?.[`filter-${header.column.id}`] !== undefined ? this.rozieSlots?.[`filter-${header.column.id}`]!({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id), setFilter: this.setColumnFilter}) : html`<slot name="${`filter-${header.column.id}`}" data-rozie-params=${(() => { try { return JSON.stringify({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id)}); } catch { return '{}'; } })()} @rozie-default-set-filter=${($event: CustomEvent) => ((this.setColumnFilter) as (...args: any[]) => any)($event.detail)}>
-              ${this.filter !== undefined ? this.filter({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id), setFilter: this.setColumnFilter}) : html`<slot name="filter" data-rozie-params=${(() => { try { return JSON.stringify({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id)}); } catch { return '{}'; } })()} @rozie-filter-set-filter=${($event: CustomEvent) => ((this.setColumnFilter) as (...args: any[]) => any)($event.detail)}>
+            ${this.rozieSlots?.[`filter-${header.column.id}`] !== undefined ? this.rozieSlots?.[`filter-${header.column.id}`]!({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id), columnLabel: this.headerLabel(header.column.id), setFilter: this.setColumnFilter}) : html`<slot name="${`filter-${header.column.id}`}" data-rozie-params=${(() => { try { return JSON.stringify({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id), columnLabel: this.headerLabel(header.column.id)}); } catch { return '{}'; } })()} @rozie-default-set-filter=${($event: CustomEvent) => ((this.setColumnFilter) as (...args: any[]) => any)($event.detail)}>
+              ${this.filter !== undefined ? this.filter({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id), columnLabel: this.headerLabel(header.column.id), setFilter: this.setColumnFilter}) : html`<slot name="filter" data-rozie-params=${(() => { try { return JSON.stringify({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id), columnLabel: this.headerLabel(header.column.id)}); } catch { return '{}'; } })()} @rozie-filter-set-filter=${($event: CustomEvent) => ((this.setColumnFilter) as (...args: any[]) => any)($event.detail)}>
                 <input class="rdt-col-filter" type="text" aria-label=${rozieAttr('Filter ' + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onColumnFilterInput(header.column.id, $event); }} @click=${($event: MouseEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.stopEvent($event); }} data-rozie-s-d5dcab4c />
               </slot>`}
             </slot>`}
@@ -1523,7 +1773,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     
     ${repeat<any>(this._rows.value, (row, _idx) => row.id, (row, _idx) => html`
     <tr class="${Object.entries({ "rdt-tr": true, 'rdt-group-header': this.rowIsGrouped(row) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="row" data-depth=${rozieAttr(row.depth)} aria-rowindex=${rozieAttr(this.bodyAriaRowIndex(row))} data-group-header=${rozieAttr(this.rowIsGrouped(row) ? row.id : null)} data-group-leaf=${rozieAttr(this.groupingActive() && !this.rowIsGrouped(row) ? row.id : null)} aria-expanded=${rozieAttr(this.rowIsGrouped(row) ? !!this.rowIsExpanded(row) : null)} aria-selected=${rozieAttr(this.selectionMode !== 'none' ? !!this.rowIsSelected(row) : null)} aria-level=${rozieAttr(this.groupingActive() ? row.depth + 1 : null)} data-rozie-s-d5dcab4c>
-      ${repeat<any>(this.visibleCellsFor(row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({ "rdt-td": true, 'rdt-select-td': this.isSelectColumn(cell.column.id), 'rdt-expander-td': this.isExpanderColumn(cell.column.id), 'rdt-in-range': this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)), 'rdt-cell-active': this.isActiveCell(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(this.rowIndexOf(row))} data-col-index=${rozieAttr(this.colIndexOf(row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${rozieStyle(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? 'true' : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
+      ${repeat<any>(this.visibleCellsFor(row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({ "rdt-td": true, 'rdt-select-td': this.isSelectColumn(cell.column.id), 'rdt-expander-td': this.isExpanderColumn(cell.column.id), 'rdt-pinned': this.columnPinSide(cell.column.id) !== '', 'rdt-in-range': this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)), 'rdt-cell-active': this.isActiveCell(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(this.rowIndexOf(row))} data-col-index=${rozieAttr(this.colIndexOf(row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${rozieStyle(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} aria-colindex=${rozieAttr(this.colIndexOf(row, cell) + 1)} aria-selected=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? 'true' : null)} data-in-range=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? 'true' : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
         
         ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.rowCanExpand(row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(row)} aria-label=${rozieAttr(this.rowIsExpanded(row) ? 'Collapse row' : 'Expand row')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onToggleExpand(row, $event); }} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(row) ? '▾' : '▸')}</button>` : nothing}</span>` : this.isSelectColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -1539,15 +1789,15 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
           </span>
           <span class="rdt-group-count" data-rozie-s-d5dcab4c>${rozieDisplay('(' + this.groupSubRowCount(row) + ')')}</span>
         </span>` : this.isEditing(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-          ${this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
-            ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
-          </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" data-builtin-editor="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'custom' ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.rozieSlots?.[`editor-${cell.column.id}`] !== undefined ? this.rozieSlots?.[`editor-${cell.column.id}`]!({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}) : html`<slot name="${`editor-${cell.column.id}`}" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}); } catch { return '{}'; } })()}>
-              ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}); } catch { return '{}'; } })()}>
-                <input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />
+          ${this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? 'true' : null)} .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? 'true' : null)} .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
+            ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} ?selected=${opt.value === this.editorValueFor(cell.column.id)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
+          </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? 'true' : null)} ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'custom' ? html`<span style="display:contents" @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onEditorDropinKeyDown($event); }} data-rozie-s-d5dcab4c>
+            ${this.rozieSlots?.[`editor-${cell.column.id}`] !== undefined ? this.rozieSlots?.[`editor-${cell.column.id}`]!({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), columnLabel: this.headerLabel(cell.column.id), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}) : html`<slot name="${`editor-${cell.column.id}`}" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), columnLabel: this.headerLabel(cell.column.id), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}); } catch { return '{}'; } })()}>
+              ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), columnLabel: this.headerLabel(cell.column.id), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), columnLabel: this.headerLabel(cell.column.id), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}); } catch { return '{}'; } })()}>
+                <input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? 'true' : null)} .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />
               </slot>`}
             </slot>`}
-          </span>` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
+          </span>` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? 'true' : null)} .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
           ${this.rozieSlots?.[`cell-${cell.column.id}`] !== undefined ? this.rozieSlots?.[`cell-${cell.column.id}`]!({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: cell.getValue()}) : html`<slot name="${`cell-${cell.column.id}`}" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: cell.getValue()}); } catch { return '{}'; } })()}>
             ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
           </slot>`}
@@ -1567,10 +1817,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   </span>
   <button class="rdt-page-btn rdt-page-next" type="button" ?disabled=${!this.canNextPage()} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onNextPage(); }} data-rozie-s-d5dcab4c>Next</button>
   <select class="rdt-page-size" aria-label="Rows per page" .value=${this.pageSize()} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onPageSizeChange($event); }} data-rozie-s-d5dcab4c>
-    <option value=${10} data-rozie-s-d5dcab4c>10</option>
-    <option value=${25} data-rozie-s-d5dcab4c>25</option>
-    <option value=${50} data-rozie-s-d5dcab4c>50</option>
-    <option value=${100} data-rozie-s-d5dcab4c>100</option>
+    <option value=${10} ?selected=${10 === this.pageSize()} data-rozie-s-d5dcab4c>10</option>
+    <option value=${25} ?selected=${25 === this.pageSize()} data-rozie-s-d5dcab4c>25</option>
+    <option value=${50} ?selected=${50 === this.pageSize()} data-rozie-s-d5dcab4c>50</option>
+    <option value=${100} ?selected=${100 === this.pageSize()} data-rozie-s-d5dcab4c>100</option>
   </select>
 </div>` : nothing}</div>
 `;
@@ -1622,6 +1872,15 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   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.
+  scrollEndPinned: boolean = false;
+
+  scrollEndPinnedCount: number = -1;
+
+  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
   // via the same focusActiveCell() scroll-into-view seam — kept a top-level const so that
@@ -1635,6 +1894,20 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // computed/template binding (ROZ123).
   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.
+  outsidePointerDown = false;
+
+  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.
   programmatic = 0;
@@ -1733,6 +2006,96 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   };
 };
 
+  // seedColumnPinning(): apply the per-column `pinned` declaration ('left' | 'right') — from the
+  // `:columns` config array or a `<Column pinned="...">` child — as the INITIAL columnPinning
+  // state, exactly once.
+  //
+  // Until now that field was carried onto every ColumnDef by columnBuilders.rzts and then read by
+  // nobody: `column.getIsPinned()` returned false for a column declared `pinned="left"`, so the
+  // documented per-column API was inert while `r-model:columnPinning` was the only mechanism that
+  // actually pinned anything.
+  //
+  // Three invariants, each load-bearing:
+  //   1. ONE-SHOT, LATCHED ON THE OUTCOME — never merely on "we ran". The latch flips only when
+  //      a seed is actually applied, or when a consumer pin is observed; a call that finds no
+  //      declared pins leaves it DOWN and will look again on the next re-feed. Latching on the
+  //      first call that saw any column at all was wrong, and Lit proved it: `<Column>` children
+  //      register INCREMENTALLY there, one re-feed per child, so the first call sees only
+  //      `name` — no pins declared yet — and a run-once latch would disable the seed
+  //      permanently before `amount pinned="right"` ever registered. The other five targets
+  //      batch all children into a single flush, which hid the race entirely. Once a seed HAS
+  //      been applied the latch holds, so a subsequent interactive UNPIN is never re-seeded —
+  //      which is the whole reason this is not folded into effectiveColumnPinning().
+  //   2. ONLY WHEN NOTHING IS PINNED YET. Note this is NOT an `$props.columnPinning == null`
+  //      check: the prop carries `default: () => ({ left: [], right: [] })`, so it is never null
+  //      and a bound-vs-unbound test is impossible here. The meaningful question is whether the
+  //      consumer has actually expressed a pin — if they have, they own the slice and the
+  //      per-column declaration must not fight it; if the state is empty, `pinned` IS the
+  //      initial state and applying it is the whole point.
+  //   3. NO CHROME IDS. The select/expander rail is injected by effectiveColumnPinning() on read
+  //      and stripped by writeColumnPinning() on write; the persisted state must never contain
+  //      them. Seeding only real column ids keeps that discipline.
+  //
+  // Writes BOTH the uncontrolled holder and `$model.columnPinning` so a consumer with a two-way
+  // binding sees the pinning that is actually in effect rather than a stale empty object — but
+  // does NOT emit `pin-change`: this is initial state derived from the consumer's own markup, not
+  // a user action, and firing a change event for it on mount would be noise.
+  //
+  // Called from $onMount (covers the `:columns` config-array form, known at mount) AND from the
+  // re-feed watch (covers `<Column>` children, which register during mount, and a runtime
+  // `:columns` swap that arrives before any pin interaction). The `!defs.length` bail is what
+  // makes the mount call harmless when columns are not known yet — the latch stays down and the
+  // next re-feed seeds instead.
+  pinSeedApplied = false;
+
+  seedColumnPinning = (): void => {
+  if (this.pinSeedApplied) return;
+  // Invariant 2: bail if the consumer already pinned something (either an initial bound value
+  // or an interaction that beat us here). Read the same source order effectiveColumnPinning()
+  // does, minus the chrome rail it injects on read — the rail is structural, not a consumer pin.
+  const live = this.columnPinning != null ? this.columnPinning : this._columnPinningDefault.value;
+  const isRealPin = (id: string) => id !== this.SELECT_COL_ID && id !== this.EXPANDER_COL_ID;
+  const pinnedAlready = (live && live.left ? live.left : []).filter(isRealPin).length > 0 || (live && live.right ? live.right : []).filter(isRealPin).length > 0;
+  if (pinnedAlready) {
+    this.pinSeedApplied = true;
+    return;
+  }
+  const defs = this.columnDefs();
+  if (!defs.length) return;
+  const left: string[] = [];
+  const right: string[] = [];
+  for (let i = 0; i < defs.length; i++) {
+    const def = defs[i];
+    if (!def) continue;
+    if (def.pinned === 'left') left.push(def.id);else if (def.pinned === 'right') right.push(def.id);
+  }
+  // Invariant 1: no declared pins in the column set we can currently SEE is not evidence there
+  // are none — on Lit the set is still filling in. Leave the latch down and try again on the
+  // next re-feed; the only exits are "seeded" (below) and "consumer already pinned" (above).
+  if (!left.length && !right.length) return;
+  this.pinSeedApplied = true;
+  // Nothing was pinned (invariant 2 above), so this is a plain assignment, not a merge — the
+  // only ids that could be in `live` are the structural chrome rail, which must never be
+  // persisted (invariant 3). Writes the uncontrolled holder AND the two-way model so both
+  // binding modes observe the pinning that is actually in effect; deliberately does NOT route
+  // through writeColumnPinning(), whose job is to emit `pin-change` for real user actions.
+  // Annotated `any` for the same reason currentState() is (see its comment below): the
+  // uncontrolled holder's initial value is the empty literal `{ left: [], right: [] }`, so the
+  // emitted per-target state holder infers `{ left: never[]; right: never[] }` and a genuinely
+  // populated `{ left: string[]; right: string[] }` will not assign to it under the strict
+  // bundled-leaf tsc (react TS2345 on setColumnPinningDefault, solid TS2769, lit TS2322 — one
+  // per target, all the same never[] inference). The runtime shape is correct; this is the
+  // established idiom here rather than widening three per-leaf strict baselines for it.
+  // writeColumnPinning() never hits this because its payload flows through `strip()`, which
+  // returns `any[]`.
+  const seeded: any = {
+    left,
+    right
+  };
+  this._columnPinningDefault.value = seeded;
+  this._columnPinningControllable.write(seeded);
+};
+
   // Assemble the live state object from bound r-model slices (?? uncontrolled fallback).
   // All NINE slices are wired (each ?? its own $data.<slice>Default). table-core reads
   // this whole object as `state`. Return type annotated `any`: the inferred object-literal
@@ -1786,6 +2149,56 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // ({ 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.
+   */
+  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.
+  editorWarned = Object.create(null);
+
+  checkEditorKind = (id: any, editor: any) => {
+  const msg = editorKindWarning(id, editor);
+  if (!msg) return editor;
+  const key = id + '\u0000' + String(editor);
+  if (this.editorWarned[key]) return editor;
+  this.editorWarned[key] = true;
+  console.warn(msg);
+  return editor;
+};
+
   buildConfigDef = (c: any) => {
   if (!c) return null;
   // Grouped (multi-level) header column: an entry carrying a `columns` array. table-core's
@@ -1841,11 +2254,17 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     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`.
+    ...(this.parseWidthToSize(c.width) != null ? {
+      size: this.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 ? this.checkEditorKind(id, c.editor) : 'text',
       editorOptions: c.editorOptions != null ? c.editorOptions : [],
       validate: typeof c.validate === 'function' ? c.validate : null
     }
@@ -1930,10 +2349,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
       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.
+      ...(this.parseWidthToSize(spec.width) != null ? {
+        size: this.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 ? this.checkEditorKind(id, spec.editor) : 'text',
         editorOptions: spec.editorOptions != null ? spec.editorOptions : [],
         validate: typeof spec.validate === 'function' ? spec.validate : null
       }
@@ -2467,9 +2890,43 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this.writeColumnPinning(applyUpdater(updater, this.currentState().columnPinning));
 };
 
+  // columnSizingInfo is the ONLY slice table-core drives as a rapid, multi-call gesture: a resize
+  // drag fires this updater once on pointerdown (seeding startOffset/startSize/isResizingColumn)
+  // and then again on EVERY mousemove, each call reading the values the previous one wrote.
+  //
+  // That read-your-own-last-write requirement is what makes a plain `$data` read wrong here on
+  // React. These callbacks are handed to createTable in $onMount, so on React the closure binds a
+  // MOUNT-TIME `$data.columnSizingInfo` and never sees its own writes. Measured on the shipped
+  // leaf (quick 260909, instrumented build): pointerdown correctly wrote
+  // `{ startOffset: 163, isResizingColumn: 'col0' }`, and then every single mousemove still saw
+  // `startOffset: null, isResizingColumn: false` — so it computed deltaOffset from 0 instead of
+  // 163 (179, 195, 211… instead of 16, 32, 48…) AND wrote `isResizingColumn: false` back, wiping
+  // the gesture on the first move. Net effect: column resizing did nothing at all on React while
+  // working on the other five. It was masked because the one VR case that drives a real drag was
+  // `test.fixme`'d on React as a presumed harness limitation (87-05 Task 3) — a real CDP drag
+  // with intermediate steps fails there too, which is what proved it a product bug.
+  //
+  // Why not just read `currentState().columnSizingInfo` like the eleven siblings above: that
+  // idiom relies on the re-feed $watch re-passing fresh callbacks into setOptions, and that watch
+  // fires on data/column changes — NOT on every render, and never mid-gesture. It is sufficient
+  // for one-shot updaters (a sort toggle, a selection click) and insufficient here, where
+  // table-core issues a burst of updaters between any two re-feeds.
+  //
+  // Fix: a synchronous module-scope mirror, written on the same tick as the state. Reads prefer
+  // the mirror, so each updater in a gesture composes on the previous one's result regardless of
+  // when the host framework commits. Behaviourally identical on the five targets whose state read
+  // was already synchronous (mirror and state agree), and the slice is transient gesture state
+  // owned entirely by table-core — nothing else writes it — so the mirror cannot drift.
+  // Same trick as the `committedThisSession` commit latch (editCellLifecycle.rzts), for the same
+  // reason: a sync latch survives React's async window.
+  columnSizingInfoSync: any = null;
+
   onColumnSizingInfoChangeCb = (updater: any) => {
-  const next = applyUpdater(updater, this._columnSizingInfo.value);
-  this._columnSizingInfo.value = next != null ? next : this._columnSizingInfo.value;
+  const base = this.columnSizingInfoSync != null ? this.columnSizingInfoSync : this._columnSizingInfo.value;
+  const next = applyUpdater(updater, base);
+  if (next == null) return;
+  this.columnSizingInfoSync = next;
+  this._columnSizingInfo.value = next;
 };
 
   // ══ Vertical row windowing (phase 53, req-1/2/3/6/9/10) — the virtual-core bridge ════════
@@ -2581,9 +3038,18 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     }
   }
   // 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 (!this._activeIsHeader.value && this._activeColIndex.value >= 0 && out.indexOf(this._activeColIndex.value) === -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 (this._activeColIndex.value >= 0 && out.indexOf(this._activeColIndex.value) === -1) {
     out.push(this._activeColIndex.value);
   }
   // Editing column (D-10): required or an open editor unmounts mid-keystroke when a
@@ -2660,21 +3126,65 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   //     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.
+  REMEASURE_MAX_FRAMES = 10;
+
   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 (this.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 (this.virtualizer && this.gridScrollEl && !this.virtualizer.scrollState && this.gridScrollEl.scrollTop !== this.scrollEndPinnedTop) {
+    this.scrollEndPinnedTop = this.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).
+    this.scrollEndPinned = this.virtualizer.getVirtualDistanceFromEnd() <= 1;
+    this.scrollEndPinnedCount = this.windowSource().length;
+  }
   if (this.remeasurePending) return;
   this.remeasurePending = true;
   let ranMicro = false;
   const microPass = () => {
     this.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 = () => {
     this.remeasureRaf = null;
+    const covered = this.remeasureWindow();
+    rafAttempts = rafAttempts + 1;
+    if (!covered && rafAttempts < this.REMEASURE_MAX_FRAMES && !this.remeasureDisposed && typeof requestAnimationFrame === 'function') {
+      this.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 (this.scrollEndPinned && this.gridScrollEl && !this.remeasureDisposed && this.windowSource().length === this.scrollEndPinnedCount) {
+      const maxTop = this.gridScrollEl.scrollHeight - this.gridScrollEl.clientHeight;
+      if (maxTop - this.gridScrollEl.scrollTop > 1) {
+        this.gridScrollEl.scrollTop = maxTop;
+        this.scrollEndPinnedTop = this.gridScrollEl.scrollTop;
+      }
+    }
     this.remeasurePending = false;
-    this.remeasureWindow();
   };
   if (typeof queueMicrotask !== 'undefined') {
     ranMicro = true;
@@ -2708,9 +3218,25 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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.
   pinnedEditIndex = () => {
   if (this._editingRow.value >= 0) return this._editingRow.value;
   if (this._editingRowIndex.value != null) return this._editingRowIndex.value;
+  if (this.interactionMode === 'grid' && !this._activeIsHeader.value && this._activeRow.value >= 0) return this._activeRow.value;
   return -1;
 };
 
@@ -2738,8 +3264,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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 (this.remeasureDisposed) return;
-  if (!this.virtualizer || !this.gridRoot) return;
+  if (this.remeasureDisposed) return true;
+  if (!this.virtualizer || !this.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
@@ -2747,9 +3273,23 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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 (this.virtualizer.scrollState) return;
+  if (this.virtualizer.scrollState) return true;
   const trs = this.gridRoot.querySelectorAll('tbody.rdt-tbody > tr[data-index]');
-  for (const tr of trs as any) this.virtualizer.measureElement(tr);
+  const rendered = new Set();
+  for (const tr of trs as any) {
+    this.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 = this.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
@@ -2758,6 +3298,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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 (this.afterRowRemeasure) this.afterRowRemeasure();
+  return covered;
 };
 
   // D-04: this shell exports ONLY the impure, data-table-specific host pieces. The pure windowing
@@ -2766,6 +3307,119 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // `@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`.
+  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.
+  LAZY_PLACEHOLDER_ROW_ID_PREFIX = '__rdt_ph_';
+
+  lazyPlaceholders: Record<number, any> = {};
+
+  lazyRowsActive = () => this.rowsWindowed() && !!this.manual && this.rowCount != null && this.rowCount > 0;
+
+  isLazyPlaceholder = (orig: any): boolean => !!orig && orig[this.LAZY_PLACEHOLDER_KEY] === true;
+
+  rowIsLazyPlaceholder = (row: any): boolean => !!row && this.isLazyPlaceholder(row.original);
+
+  feedData = () => {
+  const d: any[] = this.currentData() || [];
+  if (!this.lazyRowsActive()) return d;
+  const n = Math.max(d.length, Number(this.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 (!this.lazyPlaceholders[i]) this.lazyPlaceholders[i] = {
+        [this.LAZY_PLACEHOLDER_KEY]: true,
+        index: i
+      };
+      out[i] = this.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).
+  migratePlaceholderSizeCache = (): void => {
+  if (!this.virtualizer || !this.virtualizer.itemSizeCache || !this.table) return;
+  const cache = this.virtualizer.itemSizeCache;
+  const coreRows = this.table.getCoreRowModel().rows;
+  let migrated = false;
+  for (const oldKey of Array.from(cache.keys()) as any) {
+    if (typeof oldKey !== 'string' || oldKey.indexOf(this.LAZY_PLACEHOLDER_ROW_ID_PREFIX) !== 0) continue;
+    const i = Number(oldKey.slice(this.LAZY_PLACEHOLDER_ROW_ID_PREFIX.length));
+    const row = coreRows[i];
+    if (!row || this.rowIsLazyPlaceholder(row) || row.id === oldKey) continue;
+    cache.set(row.id, cache.get(oldKey));
+    cache.delete(oldKey);
+    migrated = true;
+  }
+  if (!migrated) return;
+  this.virtualizer.itemSizeCache = new Map(cache);
+  if (typeof this.virtualizer.itemSizeCacheVersion === 'number') this.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.
+  lastRangeStart = -1;
+
+  lastRangeEnd = -1;
+
+  emitVisibleRangeIfChanged = () => {
+  if (!this.rowsWindowed() || !this.virtualizer) return;
+  const items = this.virtualizer.getVirtualItems();
+  if (!items.length) return;
+  const start = items[0].index;
+  const end = items[items.length - 1].index + 1;
+  if (start === this.lastRangeStart && end === this.lastRangeEnd) return;
+  this.lastRangeStart = start;
+  this.lastRangeEnd = end;
+  this.dispatchEvent(new CustomEvent("visible-range-change", {
+    detail: {
+      start,
+      end
+    },
+    bubbles: true,
+    composed: true
+  }));
+};
+
   // ══ 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
@@ -3147,6 +3801,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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).
   this.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.
+  this.scheduleRemeasure();
 };
 
   // The FULL virtualizer options. virtual-core's setOptions REPLACES options with
@@ -3545,6 +4203,25 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   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.
+  rowIdOption = () => {
+  const f = this.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) => this.isLazyPlaceholder(originalRow) ? this.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.
+  rowSelectionOption = () => {
+  if (this.selectionMode === 'none') return false;
+  return this.lazyRowsActive() ? (row: any) => !this.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.
   reFeed = () => {
@@ -3557,10 +4234,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // below (`maybeClearHistoryOnExternalSwap`), which runs on all six targets.
   this.table.setOptions((prev: any) => ({
     ...prev,
-    data: this.currentData(),
+    data: this.feedData(),
     columns: this.tableColumns(),
     state: this.currentState(),
-    enableRowSelection: this.selectionMode !== 'none',
+    enableRowSelection: this.rowSelectionOption(),
     enableMultiRowSelection: this.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
@@ -3573,7 +4250,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     // onExpandedChange callback must re-capture fresh currentState each cycle, F6).
     getExpandedRowModel: getExpandedRowModel(),
     getSubRows: (this.getSubRows || undefined) as any,
-    getRowCanExpand: this.expandable === true && this.getSubRows == null ? () => true : undefined,
+    // Row identity (quick 260925-rew) — see rowIdOption(). Re-passed on re-feed like the
+    // other row-model fns.
+    getRowId: this.rowIdOption(),
+    getRowCanExpand: this.expandable === true && this.getSubRows == null ? (row: any) => !this.rowIsLazyPlaceholder(row) : undefined,
     onExpandedChange: this.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
@@ -3913,9 +4593,17 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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).
-  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.
+  thStyle = (header: any, widthPx = null) => {
   let s = '';
-  const w = this.headerWidth(header);
+  const w = widthPx != null && widthPx > 0 ? widthPx + 'px' : this.headerWidth(header);
   if (w) s += 'width:' + w + ';';
   s += this.pinStyle(header && header.column ? header.column.id : null, 2);
   return s;
@@ -4301,7 +4989,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   if (this.selectAllBox) this.selectAllBox.indeterminate = this.isSomeRowsSelected() && !this.isAllRowsSelected();
 };
 
-  // The registry API handed to <Column> children (whole-object-replace — T-48-PP guard).
   // Imperative handle (consumer-callable). Each verb is a PRE-DECLARED top-level
   // `const` (the canonical $expose contract — `$expose({ name })` references a
   // binding ALREADY in scope; an INLINE-defined verb `$expose({ name: () => {} })`
@@ -4422,6 +5109,23 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // headerColIndexOf: a header cell's position in its header group's leaf headers.
   headerColIndexOf = (hg: any, header: any) => (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.
+  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
@@ -4507,7 +5211,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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).
-  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).
+  resolveCellEl = (rowKey: any, colIndex: any, level: number | null = null) => {
   if (!this.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
@@ -4567,10 +5274,18 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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 = this.rowsWindowed() && this.virtualizer && this.rowIsOutsideWindow(r);
   const colOut = this.colsWindowed() && this.colVirtualizer && this.colIsOutsideWindow(c);
-  if (!header && (rowOut || colOut)) {
-    if (rowOut) this.virtualizer.scrollToIndex(r, {
+  const rowScroll = !header && rowOut;
+  if (rowScroll || colOut) {
+    if (rowScroll) this.virtualizer.scrollToIndex(r, {
       align: 'center'
     });
     if (colOut) this.colVirtualizer.scrollToIndex(c, {
@@ -4594,7 +5309,9 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
       // 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 (this.focusIntentEpoch !== myEpoch) return;
-      const el = this.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 = this.resolveCellEl(header ? '__header' : String(r), c, header ? lvl : null);
       if (el) {
         el.focus();
         return;
@@ -4626,8 +5343,23 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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.
   totalRowCount = () => {
   if (!this.table) return (this._rows.value || []).length;
+  if (this.manual === true) {
+    if (this.rowCount != null) return this.rowCount;
+    if (this.pageCount != null) return this.pageCount * this.pageSize();
+  }
   const fm = this.table.getFilteredRowModel();
   return fm && fm.rows ? fm.rows.length : (this._rows.value || []).length;
 };
@@ -4661,6 +5393,25 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // `headerRowCount() + wr.vi.index + 1` inline (wr.vi.index is already the absolute full-model index).
   bodyAriaRowIndex = (row: any) => this.headerRowCount() + this.rowIndexOf(row) + this.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.
+  gridAriaColCount = () => this.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.
@@ -4921,6 +5672,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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).
+  activeCellHasControls = () => focusables(this.currentCellEl()).length > 0;
+
   enterControl = () => {
   const cellEl = this.currentCellEl();
   const list = focusables(cellEl);
@@ -5013,7 +5768,9 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // nextRow/nextCol locals and FALLS THROUGH to the shared focus seam (like Ctrl+Home/End). ──
   if ((e.ctrlKey || e.metaKey) && e.shiftKey && !this._activeIsHeader.value && (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight')) {
     e.preventDefault();
-    if (key === 'ArrowUp') this.extendRange(-this._activeRow.value, 0);else if (key === 'ArrowDown') this.extendRange(this.bodyRowCount() - 1 - this._activeRow.value, 0);else if (key === 'ArrowLeft') this.extendRange(0, -this._activeColIndex.value);else this.extendRange(0, this.visibleColCount() - 1 - this._activeColIndex.value);
+    // 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') this.extendRange(-this.rangeFocusRow(), 0);else if (key === 'ArrowDown') this.extendRange(this.bodyRowCount() - 1 - this.rangeFocusRow(), 0);else if (key === 'ArrowLeft') this.extendRange(0, -this.rangeFocusCol());else this.extendRange(0, this.visibleColCount() - 1 - this.rangeFocusCol());
     return;
   } else if ((e.ctrlKey || e.metaKey) && !this._activeIsHeader.value && (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight')) {
     e.preventDefault();
@@ -5111,11 +5868,17 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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) && this.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) && this.clipboardActiveAllowed() && this.clipboardWriteAvailable()) {
     e.preventDefault();
     this.copyRange();
     return;
-  } else if ((key === 'v' || key === 'V') && (e.ctrlKey || e.metaKey) && this.clipboardActiveAllowed()) {
+  } else if ((key === 'v' || key === 'V') && (e.ctrlKey || e.metaKey) && this.clipboardActiveAllowed() && this.clipboardReadAvailable()) {
     e.preventDefault();
     this.pasteRange();
     return;
@@ -5125,7 +5888,9 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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) && this.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) && this.clipboardActiveAllowed() && this.clipboardWriteAvailable()) {
     e.preventDefault();
     this.cutRange();
     return;
@@ -5177,6 +5942,44 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     if (!this._activeIsHeader.value) this.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 && !this._activeIsHeader.value) {
+    e.preventDefault();
+    if (this.selectionMode !== 'none') {
+      const selRow = (this._rows.value || [])[this._activeRow.value];
+      if (selRow && selRow.toggleSelected) selRow.toggleSelected(!this.rowIsSelected(selRow));
+    }
+    return;
+  } else if (key === ' ' && (e.ctrlKey || e.metaKey) && !e.shiftKey && !this._activeIsHeader.value) {
+    e.preventDefault();
+    this.selectActiveColumn();
+    return;
+  } else if (key === 'Escape') {
+    if (this.rangeActive || this._rangeAnchor.value != null) {
+      e.preventDefault();
+      this.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
@@ -5256,6 +6059,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     // rAF poll must not steal focus back after the user has already ArrowDown'd to another row.
     this.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' && !this._activeIsHeader.value && !this.activeCellHasControls()) {
+    e.preventDefault();
+    this.activateRowAt(this._activeRow.value, 'keyboard');
+    return;
   } else if (key === 'Enter' || key === 'F2') {
     e.preventDefault();
     this.enterControl();
@@ -5354,11 +6165,18 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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 (this.rangeTransition) {
     this.rangeTransition = false;
-  } else if (this.rangeClickPending) {
-    this.rangeClickPending = false;
+  } else if (this.rangeClickPending && this.rangeClickPending.isHeader === isHeader && this.rangeClickPending.r === movedRow && this.rangeClickPending.c === col) {
+    this.rangeClickPending = null;
   } else {
+    this.rangeClickPending = null;
     this.clearRange();
   }
   // The cell box (not an inner control) receiving focus = navigation mode.
@@ -5396,13 +6214,26 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     this._activeIsHeader.value = false;
     this._activeRow.value = row;
     this._activeColIndex.value = col;
-    this.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).
+    this.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 (this.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).
   this.beginRangeDrag(row, col);
 };
 
@@ -5459,7 +6290,57 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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.
+  activateRowAt = (index: any, trigger: any) => {
+  const row = (this._rows.value || [])[index];
+  if (!row || this.rowIsGrouped(row) || this.rowIsLazyPlaceholder(row)) return;
+  this.dispatchEvent(new CustomEvent("row-activate", {
+    detail: {
+      row: row.original,
+      index,
+      trigger
+    },
+    bubbles: true,
+    composed: true
+  }));
+};
+
+  // 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.
+  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).
+  maybeActivateRowFromClick = (e: any) => {
+  if (!e || e.shiftKey || e.ctrlKey || e.metaKey || e.altKey) return;
+  if (this.rangeDragMoved) return;
+  const tgt = e.target;
+  if (!tgt || !tgt.closest) return;
+  const cellEl = tgt.closest('[data-row]');
+  if (!cellEl) return;
+  const control = tgt.closest(this.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 (this.isGrid() && this.singleClickEdit) {
+    const colAttr = cellEl.getAttribute('data-col-index');
+    const col = colAttr == null ? NaN : parseInt(colAttr, 10);
+    const colId = Number.isFinite(col) ? this.columnIdAt(index, col) : null;
+    if (colId != null && this.columnEditable(colId)) return;
+  }
+  this.activateRowAt(index, 'click');
+};
+
   onGridClick = (e: any) => {
+  this.maybeActivateRowFromClick(e);
   if (!this.isGrid() || !e) return;
   if (!this.singleClickEdit) return;
   if (e.shiftKey) return;
@@ -5655,12 +6536,26 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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.
   windowedHeadersFor = (hg: any, hgLevel: any) => {
   const headers = hg && hg.headers || [];
   if (!this.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 = this.windowedColIndices();
@@ -5675,10 +6570,15 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     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 + this.columnSize(c);
+    }
     if (span > 0) out.push({
       header: h,
-      span
+      span,
+      width
     });
   }
   return out;
@@ -5691,6 +6591,37 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // (byte-identical).
   windowedColSpan = () => this.colsWindowed() ? this.windowedColIndices().length + 2 : this.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.
+  lastColSizeSig = 0;
+
+  remeasureColumnSizes = () => {
+  if (!this.colsWindowed() || !this.colVirtualizer || !this.colVirtualizer.measure) return;
+  const n = this.columnCount();
+  let sig = n;
+  for (let i = 0; i < n; i++) sig = Math.imul(sig, 31) + this.columnSize(i) | 0;
+  if (sig === this.lastColSizeSig) return;
+  this.lastColSizeSig = sig;
+  this.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
@@ -5704,6 +6635,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   remeasureColumnWindow = () => {
   if (!this.colsWindowed() || !this.colVirtualizer) return;
   this.colVirtualizer.setOptions(this.columnVirtualizerOptions());
+  this.remeasureColumnSizes();
   this.colVirtualizer._willUpdate();
 };
 
@@ -5740,8 +6672,13 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   // 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.
-  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.
+  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-
@@ -5812,7 +6749,27 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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.
+  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';
+};
+
   emitRangeChange = (anchor: any, focus: any) => {
+  this._rangeAnnounce.value = this.rangeSummary(anchor, focus);
   this.dispatchEvent(new CustomEvent("range-change", {
     detail: {
       anchor,
@@ -5872,14 +6829,39 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   }
 };
 
-  // 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.
-  setRangeFocus = (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.
+  setRangeFocus = (rIdx: any, cIdx: any, anchorR = null, anchorC = null) => {
   const maxRow = this.bodyRowCount() - 1;
   const maxCol = this.visibleColCount() - 1;
   if (maxRow < 0 || maxCol < 0) return;
   let anchor = this._rangeAnchor.value;
+  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: this._activeRow.value,
     colIndex: this._activeColIndex.value
@@ -5920,6 +6902,54 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this.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.
+  rangeFocusRow = () => {
+  const f = this._rangeFocus.value;
+  return f && f.rowIndex != null ? f.rowIndex : this._activeRow.value;
+};
+
+  rangeFocusCol = () => {
+  const f = this._rangeFocus.value;
+  return f && f.colIndex != null ? f.colIndex : this._activeColIndex.value;
+};
+
+  // 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.
+  selectActiveColumn = () => {
+  const maxRow = this.bodyRowCount() - 1;
+  const maxCol = this.visibleColCount() - 1;
+  if (maxRow < 0 || maxCol < 0) return;
+  const c = clamp(Math.trunc(Number(this._activeColIndex.value)) || 0, 0, maxCol);
+  const anchor = {
+    rowIndex: 0,
+    colIndex: c
+  };
+  const focus = {
+    rowIndex: maxRow,
+    colIndex: c
+  };
+  this._rangeAnchor.value = anchor;
+  this._rangeFocus.value = focus;
+  this.rangeActive = true;
+  this.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
@@ -6054,6 +7084,18 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   // 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.
+  clipboardWriteAvailable = () => typeof navigator !== 'undefined' && !!navigator.clipboard && typeof navigator.clipboard.writeText === 'function';
+
+  clipboardReadAvailable = () => typeof navigator !== 'undefined' && !!navigator.clipboard && typeof navigator.clipboard.readText === 'function';
+
   copyRange = () => {
   // B11: never copy from a header-active state (the reusable clipboard guard).
   if (!this.clipboardActiveAllowed()) return;
@@ -6072,15 +7114,33 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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 }.
-  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.
+  applyGridToRange = (grid: any, originRow: any, originCol: any, verb: any) => {
+  const opVerb = typeof verb === 'string' && verb !== '' ? verb : 'pasted';
   const maxRow = this.bodyRowCount() - 1;
   const maxCol = this.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 = this.currentData();
@@ -6094,15 +7154,25 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     // it to this single funnel, so guarding the four callers individually would be four
     // chances to miss one.
     const rowGrouped = this.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 = this.rowIsLazyPlaceholder((this._rows.value || [])[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 = this.columnIdAt(r, c);
       if (colId == null || !this.columnEditable(colId)) continue;
       const rowObj = this.rowOriginalAt(r);
@@ -6116,6 +7186,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
       const field = this.fieldOfColId(colId);
       const srcIndex = this.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: this.rowIdAt(r),
@@ -6123,26 +7197,41 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
         oldValue,
         newValue: value
       });
-      wrote = wrote + 1;
     }
   }
-  if (wrote > 0) {
+  if (committed.length > 0) {
     this.editTransition = true;
     this.writeData(next);
     this.editTransition = false;
     // One cell-edit-commit per COMMITTED cell (the per-cell event contract, D-03).
-    for (let i = 0; i < committed.length; i++) this.dispatchEvent(new CustomEvent("cell-edit-commit", {
-      detail: committed[i],
-      bubbles: true,
-      composed: true
-    }));
+    // 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 {
+        this.dispatchEvent(new CustomEvent("cell-edit-commit", {
+          detail: committed[i],
+          bubbles: true,
+          composed: true
+        }));
+      } 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) this.announce(wrote + ' of ' + total + ' cells pasted');else if (total > 0) this.announce('No cells pasted — ' + total + ' cells were invalid or read-only');
+  if (applied > 0) this.announce(applied + ' of ' + total + ' cells ' + opVerb);else if (total > 0) this.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
   };
 };
@@ -6190,14 +7279,26 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     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);
-    this.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);
+      this.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
@@ -6231,7 +7332,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     for (let c = c0; c <= c1; c++) cols.push('');
     grid.push(cols);
   }
-  this.applyGridToRange(grid, r0, c0);
+  this.applyGridToRange(grid, r0, c0, 'cut');
 };
 
   // clearActiveRange(): the §7 (260709-3qt) Delete/Backspace clear — cutRange() MINUS the clipboard
@@ -6257,7 +7358,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     for (let c = c0; c <= c1; c++) cols.push('');
     grid.push(cols);
   }
-  this.applyGridToRange(grid, r0, c0);
+  this.applyGridToRange(grid, r0, c0, 'cleared');
 };
 
   // fillRange(sourceBox): drag-fill (D-04 — VALUE-COPY ONLY, no series detection). B7: the fill
@@ -6312,7 +7413,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     }
     grid.push(cols);
   }
-  this.applyGridToRange(grid, box.r0, box.c0);
+  this.applyGridToRange(grid, box.r0, box.c0, 'filled');
 };
 
   // onFillHandlePointerDown: begin a fill-handle drag (req-8 / D-04). The handle sits on the
@@ -6600,10 +7701,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this.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
@@ -6628,7 +7733,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     if (cell && (cell.r !== lastCell.r || cell.c !== lastCell.c)) {
       lastCell = cell;
       this.rangeDragMoved = true;
-      this.setRangeFocus(cell.r, cell.c);
+      this.setRangeFocus(cell.r, cell.c, anchorR, anchorC);
     }
   };
   const up = () => {
@@ -6666,6 +7771,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // row reaches the group-toggle branch below them instead of opening an editor.
   isActiveCellEditable = () => {
   if (this.rowIndexIsGrouped(this._activeRow.value)) return false;
+  // A lazy placeholder (a row not loaded yet) has nothing to edit (quick 260925-dtl part 2).
+  if (this.rowIsLazyPlaceholder((this._rows.value || [])[this._activeRow.value])) return false;
   const colId = this.activeCellColumnId();
   return colId != null && this.columnEditable(colId);
 };
@@ -6900,6 +8007,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // calls beginEdit directly gated ONLY on columnEditable — isActiveCellEditable (Layer 1)
   // does not run on that path at all.
   if (this.rowIndexIsGrouped(rowIndex)) return;
+  if (this.rowIsLazyPlaceholder((this._rows.value || [])[rowIndex])) return;
   const colId = this.columnIdAt(rowIndex, colIndex);
   if (colId == null || !this.columnEditable(colId)) return;
   // A new edit session starts — reset the sync idempotency latch so THIS session's eventual
@@ -6910,6 +8018,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // editor clears any row-edit state so isEditing never resolves both modes for one cell.
   this._editingRowIndex.value = null;
   this._rowDraft.value = {};
+  this.rowDraftSync = {};
   this._editingRow.value = rowIndex;
   this._editingCol.value = colIndex;
   this._draftValue.value = seed != null ? seed : this.cellValueAt(rowIndex, colIndex);
@@ -6938,6 +8047,21 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   const tryFocus = () => {
     const el = this.resolveCellEl(String(row), col);
     if (el) {
+      // B-05 / F-07: do NOT stomp focus a later interaction has already placed on a DIFFERENT
+      // grid cell. This poll runs up to 30 frames after commit/cancel, so without this guard a
+      // user (or a test) who moves to the next cell in that window gets yanked BACK to the cell
+      // they just left — and because the steal depends on rAF timing it presents as a flake that
+      // rotates across targets rather than as a reproducible bug. Measured 2026-09-12: the
+      // data-table-dropins editor case failed with the active cell pinned to the PREVIOUS column
+      // (want 0/2, active 0/1; want 0/1, active 0/0) with no editor open.
+      // focusEditorWhenReady already carries the equivalent guard against the same class of
+      // theft; this is its missing twin. Compare the OWNING CELL (not node identity) so a
+      // node-replacing re-render on Solid still resolves a genuinely dropped focus as recoverable.
+      const ae = this.gridRoot && this.gridRoot.getRootNode ? this.gridRoot.getRootNode().activeElement : null;
+      if (ae && ae !== el && this.gridRoot.contains && this.gridRoot.contains(ae) && ae.closest) {
+        const aeCell = ae.closest('[data-grid-cell]');
+        if (aeCell && aeCell !== el) return;
+      }
       el.focus();
       return;
     }
@@ -6967,6 +8091,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   endRowEdit = () => {
   this._editingRowIndex.value = null;
   this._rowDraft.value = {};
+  this.rowDraftSync = {};
   this._invalidMsg.value = '';
   this._activeInControl.value = false;
   this._editVer.value = this._editVer.value + 1;
@@ -6995,7 +8120,28 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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).
   coerceCellValue = (colId: any, raw: any) => {
-  if (this.editorTypeOf(colId) !== 'number') return raw;
+  const kind = this.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();
@@ -7119,11 +8265,17 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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 (this.rowIndexIsGrouped(this._activeRow.value)) return;
-  const colId = this.columnIdAt(this._activeRow.value, this._activeColIndex.value);
-  if (colId == null || !this.columnEditable(colId)) return;
   const rowList = this._rows.value || [];
   const row = rowList[this._activeRow.value];
   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 (this.rowIsLazyPlaceholder(row)) return;
+  const colId = this.columnIdAt(this._activeRow.value, this._activeColIndex.value);
+  if (colId == null || !this.columnEditable(colId)) return;
   const rowOriginal = row.original;
   const rowId = row.id;
   const oldValue = this.cellValueAt(this._activeRow.value, this._activeColIndex.value);
@@ -7260,6 +8412,13 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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 (this.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 (this.rowIsLazyPlaceholder((this._rows.value || [])[rowIndex])) return;
   const editable = this.editableColumnsForRow(rowIndex);
   if (editable.length === 0) return;
   // A new edit session starts — reset the sync idempotency latch (see editCellLifecycle.rzts).
@@ -7279,6 +8438,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     draft[ec.colId] = orig ? orig[ec.field] : null;
   }
   this._rowDraft.value = draft;
+  this.rowDraftSync = draft;
   this._editingRowIndex.value = rowIndex;
   this._activeInControl.value = true;
   this._editVer.value = this._editVer.value + 1;
@@ -7309,7 +8469,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   const r = rowList[rowIndex];
   const rowOriginal = r ? r.original : null;
   const rowId = r ? r.id : null;
-  const draft = this._rowDraft.value || {};
+  // C-05: the SYNC mirror, not `$data.rowDraft` — see rowDraftSync in DataTable.rozie.
+  const draft = this.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
@@ -7505,6 +8666,25 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // A top-level `let` (React hoists to useRef → persists).
   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.
+  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).
+  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
@@ -7528,6 +8708,16 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     this.setRowDraft(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 (this.dropinTabFlush) {
+    this.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 (this.commitEdit(value, true)) this.dropinTabFlush.committed = true;
+    return;
+  }
   this.commitEdit(value);
 };
 
@@ -7565,10 +8755,13 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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).
   setRowDraft = (colId: any, value: any) => {
-  const src = this._rowDraft.value || {};
+  // 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 = this.rowDraftSync || {};
   const next = {};
   for (const k in src) next[k] = src[k];
   next[colId] = value;
+  this.rowDraftSync = next;
   this._rowDraft.value = next;
 };
 
@@ -7658,6 +8851,105 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   }
 };
 
+  // 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.
+  onEditorDropinKeyDown = (e: any) => {
+  if (!e) return;
+  const key = e.key;
+  if (this.inRowEdit()) {
+    if (key === 'Enter') {
+      e.preventDefault();
+      this.commitRow();
+      return;
+    }
+    if (key === 'Escape') {
+      e.preventDefault();
+      this.cancelRow();
+      return;
+    }
+    if (key === 'Tab') {
+      e.preventDefault();
+      this.rowEditTab(e.target, e.shiftKey);
+      return;
+    }
+    return;
+  }
+  if (key !== 'Tab' || e.defaultPrevented) return;
+  e.preventDefault();
+  const fromRow = this._editingRow.value;
+  const fromCol = this._editingCol.value;
+  const target = e.shiftKey ? this.prevEditableCell(fromRow, fromCol) : this.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
+  };
+  this.dropinTabFlush = flush;
+  if (ownCell && ownCell.focus) ownCell.focus();else if (el && el.blur) el.blur();
+  this.dropinTabFlush = null;
+  if (!flush.called) {
+    this.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) {
+    this._activeRow.value = target.row;
+    this._activeColIndex.value = target.col;
+    this.beginEdit(target.row, target.col, null);
+  } else {
+    // B5 twin: no editable cell in the Tab direction — keep focus INSIDE the grid.
+    this.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
@@ -7694,11 +8986,52 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   }
   if (this._editingRow.value < 0 || this.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 (!this.outsidePointerDown) return;
+    this.outsidePointerDown = false;
+    if (!fromCell) return;
+    if (fromCell.getAttribute('data-row') !== String(this._editingRow.value) || fromCell.getAttribute('data-col-index') !== String(this._editingCol.value)) 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.
+    this.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 (!(this.gridRoot && this.gridRoot.contains && this.gridRoot.contains(next))) {
@@ -7709,7 +9042,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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).