@rozie-ui/data-table-lit 0.2.7 → 0.3.2

package/src/DataTable.ts

@@ -5,6 +5,10 @@ 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 { applyUpdater, clamp, focusables } from './helpers/indexMath';
+import { escapeTsvField, parseTsv, tileGridToBox, tileIndex } from './helpers/tsvGrid';
+import { replaceRowValue, indexOfRowIn, replaceRowValues } from './helpers/rowValueUtils';
 import { createTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, getExpandedRowModel, getGroupedRowModel,
 // Faceted filtering (phase 50 reqs 8-9, D-03). All three are supplied UNCONDITIONALLY
 // (mirrors the expand/group models) — inert until a consumer READS a column facet via the
@@ -101,6 +105,13 @@ export default class DataTable extends SignalWatcher(LitElement) {
   font: var(--rdt-font, 14px system-ui, sans-serif);
   color: var(--rdt-color, inherit);
 }
+.rozie-data-table.rdt-col-windowed[data-rozie-s-d5dcab4c] {
+  table-layout: fixed;
+}
+.rozie-data-table.rdt-col-windowed[data-rozie-s-d5dcab4c] .rdt-th[data-rozie-s-d5dcab4c],
+.rozie-data-table.rdt-col-windowed[data-rozie-s-d5dcab4c] .rdt-td[data-rozie-s-d5dcab4c] {
+  box-sizing: border-box;
+}
 .rdt-sr-live[data-rozie-s-d5dcab4c] {
   position: absolute;
   width: 1px;
@@ -551,13 +562,17 @@ export default class DataTable extends SignalWatcher(LitElement) {
    */
   @property({ type: Number, reflect: true }) undoLimit: number = 100;
   /**
-   * Opt-in vertical **row windowing**. When `true`, only the visible slice of rows renders inside a bounded `rdt-scroll` container (with leading/trailing spacer rows preserving total scroll height), windowing over the full filtered + sorted (pre-pagination) model and suppressing the client pagination chrome. Default `false` is byte-identical to a non-virtual table.
+   * Opt-in windowing grammar: `false` (default, off — byte-identical to a non-virtual table) | `true` or `'rows'` (vertical row windowing; `true` is byte-behavior-identical to every existing consumer, zero churn) | `'columns'` (horizontal column windowing) | `'both'` (both axes windowed). Row windowing renders only the visible slice of rows inside a bounded `rdt-scroll` container (with leading/trailing spacer rows preserving total scroll height), windowing over the full filtered + sorted (pre-pagination) model and suppressing the client pagination chrome. Column windowing renders only the visible slice of leaf columns inside the same `rdt-scroll` container. An unrecognised string behaves as `false`.
    */
-  @property({ type: Boolean, reflect: true }) virtual: boolean = false;
+  @property({ converter: { fromAttribute: (v: string | null) => (v === null ? false : v === 'true' ? true : v === 'false' ? false : v === '' ? true : v) } }) virtual: boolean | string = false;
   /**
-   * Estimated row height (px) seeding the windowing engine before `measureElement` refines actual heights. Only consulted when `virtual` is on.
+   * Estimated row height (px) — the first-paint seed for the windowing engine before any row has been measured. Only consulted when rows are windowed. When `autoMeasure` is `true`, later renders progressively refine the estimate from measured content; when `autoMeasure` is `false` this remains the explicit override for every render.
    */
   @property({ type: Number, reflect: true }) estimateRowHeight: number = 40;
+  /**
+   * Opt-in content-driven row-size estimation. When `true`, the windowing engine feeds `estimateSize()` a running mean of measured row heights instead of the fixed `estimateRowHeight` seed, so `getTotalSize()` converges to the true content total on a large table with variable-height rows. Falls back to `estimateRowHeight` before any row has been measured. Default `false` keeps the estimate fixed at `estimateRowHeight` for every render (today's behavior).
+   */
+  @property({ type: Boolean, reflect: true }) autoMeasure: boolean = false;
   /**
    * A CSS length string bounding the `rdt-scroll` container when `virtual` is on (e.g. `'400px'`). Mirrored to the `--rozie-data-table-max-height` custom property; the prop wins, the token is the fallback.
    */
@@ -957,10 +972,15 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
       // into the virtualizer + reconcile IMPERATIVELY here (the table.setOptions re-feed path),
       // 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.virtual && this.virtualizer) {
+      if (this.rowsWindowed() && this.virtualizer) {
         this.virtualizer.setOptions(this.virtualizerOptions());
         this.virtualizer._willUpdate();
       }
+      // Phase 87 87-04: re-feed the column virtualizer's count/size on the SAME re-derive cycle
+      // (a column-visibility/order/pinning change is already in the $watch list below and re-pulls
+      // through here) — guarded internally on colsWindowed() && colVirtualizer, so this is a no-op
+      // on every other path.
+      this.remeasureColumnWindow();
       // D-05: on every data change (re-sort/filter/paginate/page-size — all re-pull here),
       // clamp the active cell to the new bounds (same indices, clamped if the grid shrank;
       // no row-id following, no top-bounce). isGrid()-gated so 'table' mode is untouched.
@@ -1005,7 +1025,7 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
       if (this.pendingEditFollow && this.isGrid()) {
         const follow = this.pendingEditFollow;
         this.pendingEditFollow = null;
-        const followIdx = this.indexOfRowIn(nextRows, follow.rowOriginal, follow.rowId);
+        const followIdx = indexOfRowIn(nextRows, follow.rowOriginal, follow.rowId);
         if (followIdx >= 0) this.focusCellWhenReady(followIdx, follow.col);
       }
       // keep the select-all checkbox's `indeterminate` DOM property in lockstep with the
@@ -1034,60 +1054,132 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     // cell IS the first Tab-in target (matching the Wave-0 probe's "no auto-focus on
     // mount"); the consumer drives focus by Tabbing/clicking in, never the component.
 
-    // ── Vertical windowing: construct the virtualizer (req-1/2 — ONLY when virtual) ───────
-    // Built HERE (post-mount) so getScrollElement resolves the rendered .rdt-scroll div and
-    // getPrePaginationRowModel reads the live table. ENTIRELY inside the $props.virtual guard:
-    // when off, NO virtual-core runtime code executes (byte-identical-off). _didMount() registers
-    // the scroll-element ResizeObserver and returns the teardown stored for $onUnmount.
+    // ── Windowing: capture the scroll element + construct the row virtualizer (req-1/2 — the
+    // row virtual-core instance ONLY when rows are windowed; the scroll-element capture whenever
+    // EITHER axis is windowed, since both axes observe the SAME .rdt-scroll element — D-03). Built
+    // HERE (post-mount) so getScrollElement resolves the rendered .rdt-scroll div and
+    // getPrePaginationRowModel reads the live table. ENTIRELY inside the isWindowed()/rowsWindowed()
+    // guards: when both axes are off, NO virtual-core runtime code executes (byte-identical-off).
+    // _didMount() registers the scroll-element ResizeObserver and returns the teardown stored for
+    // $onUnmount.
     // 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
     // cell IS the first Tab-in target (matching the Wave-0 probe's "no auto-focus on
     // mount"); the consumer drives focus by Tabbing/clicking in, never the component.
 
-    // ── Vertical windowing: construct the virtualizer (req-1/2 — ONLY when virtual) ───────
-    // Built HERE (post-mount) so getScrollElement resolves the rendered .rdt-scroll div and
-    // getPrePaginationRowModel reads the live table. ENTIRELY inside the $props.virtual guard:
-    // when off, NO virtual-core runtime code executes (byte-identical-off). _didMount() registers
-    // the scroll-element ResizeObserver and returns the teardown stored for $onUnmount.
-    if (this.virtual) {
+    // ── Windowing: capture the scroll element + construct the row virtualizer (req-1/2 — the
+    // row virtual-core instance ONLY when rows are windowed; the scroll-element capture whenever
+    // EITHER axis is windowed, since both axes observe the SAME .rdt-scroll element — D-03). Built
+    // HERE (post-mount) so getScrollElement resolves the rendered .rdt-scroll div and
+    // getPrePaginationRowModel reads the live table. ENTIRELY inside the isWindowed()/rowsWindowed()
+    // guards: when both axes are off, NO virtual-core runtime code executes (byte-identical-off).
+    // _didMount() registers the scroll-element ResizeObserver and returns the teardown stored for
+    // $onUnmount.
+    if (this.isWindowed()) {
       this.gridScrollEl = this._ref__rozieRoot ? this._ref__rozieRoot.querySelector('.rdt-scroll') : null;
+    }
+    if (this.rowsWindowed()) {
       this.virtualizer = new Virtualizer(this.virtualizerOptions());
       this.virtualizerCleanup = this.virtualizer._didMount();
-      // FINE-GRAINED FIRST-WINDOW KICK (Solid/Svelte): the windowed <For>/{#each} accessor was first
-      // evaluated at initial render — while `virtualizer` was still null — and (because windowedRows()
-      // reads $data.windowVer up top) subscribed to windowVer then returned []. `virtualizer` is a
-      // non-reactive `let`, so its assignment above does NOT notify the accessor; we must bump the
-      // SIGNAL it subscribed to. _didMount() computes the first window synchronously but its onChange
-      // only fires on SUBSEQUENT scroll/resize, so without this explicit bump the first window would
-      // never paint on the fine-grained targets. Idempotent + harmless on the coarse targets (they
-      // re-render wholesale anyway). One bump = one re-run that now sees the non-null virtualizer and
-      // pulls getVirtualItems().
+    }
+    // Phase 87 87-04: construct the SECOND, horizontal Virtualizer instance when the COLUMN
+    // axis is windowed — entirely inside its own colsWindowed() guard, byte-identical-off for
+    // 'rows'/true/false.
+    // Phase 87 87-04: construct the SECOND, horizontal Virtualizer instance when the COLUMN
+    // axis is windowed — entirely inside its own colsWindowed() guard, byte-identical-off for
+    // 'rows'/true/false.
+    if (this.colsWindowed()) {
+      this.colVirtualizer = new Virtualizer(this.columnVirtualizerOptions());
+      this.colVirtualizerCleanup = this.colVirtualizer._didMount();
+    }
+    // FINE-GRAINED FIRST-WINDOW KICK (Solid/Svelte), either axis: the windowed <For>/{#each}
+    // accessor was first evaluated at initial render — while `virtualizer`/`colVirtualizer` were
+    // still null — and (because windowedRows()/windowedColIndices() read $data.windowVer up top)
+    // subscribed to windowVer then returned []/the full set. Both `let`s are non-reactive, so
+    // their assignment above does NOT notify the accessor; we must bump the SIGNAL it subscribed
+    // to. _didMount() computes the first window synchronously but its onChange only fires on
+    // SUBSEQUENT scroll/resize, so without this explicit bump the first window would never paint
+    // on the fine-grained targets. Idempotent + harmless on the coarse targets (they re-render
+    // wholesale anyway). ONE bump here (not one per axis, Rule 1 — see the ROZ138 note below)
+    // covers both: windowedRows()/windowedColIndices() each simply re-derive against their own
+    // now-non-null virtualizer instance off the SAME counter (87-02 checkpoint decision (b): no
+    // separate $data.colWindowVer). Gated on isWindowed() (either axis) rather than two separate
+    // per-axis bumps: a second `$data.windowVer = $data.windowVer + 1` write later in this SAME
+    // $onMount body would dominate-flag ROZ138 (React stale-read) on its own right-hand-side read
+    // of the counter it had just written a few lines above — a false positive (this increment
+    // idiom lowers to a functional React setState update and is safe regardless of ordering, the
+    // same reasoning virtualizerOptions()'s onChange documents), but collapsing to one bump avoids
+    // manufacturing the false-positive warning at all rather than accepting it.
+    // FINE-GRAINED FIRST-WINDOW KICK (Solid/Svelte), either axis: the windowed <For>/{#each}
+    // accessor was first evaluated at initial render — while `virtualizer`/`colVirtualizer` were
+    // still null — and (because windowedRows()/windowedColIndices() read $data.windowVer up top)
+    // subscribed to windowVer then returned []/the full set. Both `let`s are non-reactive, so
+    // their assignment above does NOT notify the accessor; we must bump the SIGNAL it subscribed
+    // to. _didMount() computes the first window synchronously but its onChange only fires on
+    // SUBSEQUENT scroll/resize, so without this explicit bump the first window would never paint
+    // on the fine-grained targets. Idempotent + harmless on the coarse targets (they re-render
+    // wholesale anyway). ONE bump here (not one per axis, Rule 1 — see the ROZ138 note below)
+    // covers both: windowedRows()/windowedColIndices() each simply re-derive against their own
+    // now-non-null virtualizer instance off the SAME counter (87-02 checkpoint decision (b): no
+    // separate $data.colWindowVer). Gated on isWindowed() (either axis) rather than two separate
+    // per-axis bumps: a second `$data.windowVer = $data.windowVer + 1` write later in this SAME
+    // $onMount body would dominate-flag ROZ138 (React stale-read) on its own right-hand-side read
+    // of the counter it had just written a few lines above — a false positive (this increment
+    // idiom lowers to a functional React setState update and is safe regardless of ordering, the
+    // same reasoning virtualizerOptions()'s onChange documents), but collapsing to one bump avoids
+    // manufacturing the false-positive warning at all rather than accepting it.
+    if (this.isWindowed()) {
       this._windowVer.value = this._windowVer.value + 1;
-      // After the first window commits (next frame), refine heights + fire the dev-mode warns
-      // ONCE. Entirely inside the $props.virtual guard so the virtual=false emitted path adds NO
-      // code and these warns can never fire there (req-1 byte-identical-off preserved).
+    }
+    // After the first window commits (next frame), refine heights + fire the dev-mode warns ONCE.
+    // Entirely inside the isWindowed() guard so the off (neither axis windowed) emitted path adds
+    // NO code and these warns can never fire there (req-1 byte-identical-off preserved). The
+    // row-specific measurement + warns stay further guarded by rowsWindowed() (byte-identical to
+    // before this restructure); the column-axis warn (Phase 87 D-07(a)) is guarded by
+    // colsWindowed() so it can fire ONLY on the 'columns'/'both' path, never on 'rows'/true/false.
+    // After the first window commits (next frame), refine heights + fire the dev-mode warns ONCE.
+    // Entirely inside the isWindowed() guard so the off (neither axis windowed) emitted path adds
+    // NO code and these warns can never fire there (req-1 byte-identical-off preserved). The
+    // row-specific measurement + warns stay further guarded by rowsWindowed() (byte-identical to
+    // before this restructure); the column-axis warn (Phase 87 D-07(a)) is guarded by
+    // colsWindowed() so it can fire ONLY on the 'columns'/'both' path, never on 'rows'/true/false.
+    if (this.isWindowed()) {
       const afterFirstFrame = () => {
-        // D-10: measure the rendered rows.
-        this.remeasureWindow();
-        // D-08/A1: a dev-mode runtime warn when the scroll container has no bounded height (the
-        // bound may come from consumer CSS the compiler can't see — no compile diagnostic). No
-        // process.env guard (not bundler-portable); always-warn-on-misconfig is acceptable.
-        const h = this.gridScrollEl ? this.gridScrollEl.clientHeight : 0;
-        if (!h) {
-          console.warn('[rozie-data-table] virtual is on but the scroll container has no bounded height; set maxHeight or --rozie-data-table-max-height');
+        if (this.rowsWindowed()) {
+          // D-10: measure the rendered rows.
+          this.remeasureWindow();
+          // D-08/A1: a dev-mode runtime warn when the scroll container has no bounded height (the
+          // bound may come from consumer CSS the compiler can't see — no compile diagnostic). No
+          // process.env guard (not bundler-portable); always-warn-on-misconfig is acceptable.
+          const h = this.gridScrollEl ? this.gridScrollEl.clientHeight : 0;
+          if (!h) {
+            console.warn('[rozie-data-table] virtual is on but the scroll container has no bounded height; set maxHeight or --rozie-data-table-max-height');
+          }
+          // D-07 (RESOLVED — runtime warn, not a compile diagnostic): warn ONCE when the consumer
+          // CONFIGURED client pagination alongside virtual, in the non-manual case (the valid
+          // virtual+manual combo per D-09 is silent). The pagination prop carries a non-null default
+          // ({ pageIndex: 0, pageSize: 10 }) so it is never strictly null — "configured" is therefore
+          // detected as a pagination that DIFFERS from that default (a consumer who set a real page
+          // size / index). The uncontrolled default ({0,10}) does NOT trip the warn. Behavior + the
+          // virtual=false path are untouched (rowsWindowed()-guarded, as before this restructure).
+          const pg = this.pagination;
+          const pgConfigured = pg != null && !(pg.pageIndex === 0 && pg.pageSize === 10);
+          if (this.manual !== true && pgConfigured) {
+            console.warn('[rozie-data-table] virtual+pagination: client pagination is configured but virtual windowing replaces it — the pagination chrome is auto-suppressed. Remove the pagination prop or set manual to silence this.');
+          }
         }
-        // D-07 (RESOLVED — runtime warn, not a compile diagnostic): warn ONCE when the consumer
-        // CONFIGURED client pagination alongside virtual, in the non-manual case (the valid
-        // virtual+manual combo per D-09 is silent). The pagination prop carries a non-null default
-        // ({ pageIndex: 0, pageSize: 10 }) so it is never strictly null — "configured" is therefore
-        // detected as a pagination that DIFFERS from that default (a consumer who set a real page
-        // size / index). The uncontrolled default ({0,10}) does NOT trip the warn. Behavior + the
-        // virtual=false path are untouched (this lives entirely inside the $props.virtual guard).
-        const pg = this.pagination;
-        const pgConfigured = pg != null && !(pg.pageIndex === 0 && pg.pageSize === 10);
-        if (this.manual !== true && pgConfigured) {
-          console.warn('[rozie-data-table] virtual+pagination: client pagination is configured but virtual windowing replaces it — the pagination chrome is auto-suppressed. Remove the pagination prop or set manual to silence this.');
+        // Phase 87 Task 1(a) (D-07/D-08 precedent, APPROVED): a dev-mode runtime warn when the
+        // column axis is windowed but the scroll container has no bounded width — the horizontal
+        // failure mode is worse than the vertical one (an unbounded width renders every column
+        // with no scrollbar, so the feature silently does nothing and there is no compile
+        // diagnostic possible, since the bound may come from consumer CSS). Guarded by
+        // colsWindowed() so it can NEVER fire on the 'rows'/true/false path.
+        if (this.colsWindowed()) {
+          const w = this.gridScrollEl ? this.gridScrollEl.clientWidth : 0;
+          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');
+          }
         }
       };
       if (typeof requestAnimationFrame === 'function') requestAnimationFrame(() => requestAnimationFrame(afterFirstFrame));else setTimeout(afterFirstFrame, 0);
@@ -1129,6 +1221,17 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
       this._rozieTornDown = true;
       () => {
         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).
+        if (this.colVirtualizerCleanup) this.colVirtualizerCleanup();
+        // Gap-closure 87-09: disconnect the RTL dir-attribute MutationObserver (ensureColRtlWatch(),
+        // windowing.rzts). No-op if column windowing was never on (the observer was never attached).
+        this.teardownColRtlWatch();
+        // Gap-closure 87-13 (CR-01): cancel a deferred remeasure sweep still pending at unmount.
+        // Must run here — remeasureWindow()'s `!virtualizer || !gridRoot` guard never fires, since
+        // neither ref is nulled — or the pass reaches 87-07's refineRowEstimate() and writes
+        // $data.windowVer against a torn-down instance.
+        this.teardownRemeasure();
         // CR-04: remove any live fill-drag document listeners if we unmount mid-drag.
         this.teardownFillDrag();
         // §6 (260709-3qt): remove any live drag-select document listeners on a mid-drag unmount.
@@ -1180,82 +1283,86 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   ${this.groupBar !== undefined ? this.groupBar({grouping: this.groupingKeys(), groupableColumns: this.groupableColumns(), applyGrouping: this.applyGrouping, clearGrouping: this.clearGrouping}) : html`<slot name="groupBar" data-rozie-params=${(() => { try { return JSON.stringify({grouping: this.groupingKeys(), groupableColumns: this.groupableColumns()}); } catch { return '{}'; } })()} @rozie-group-bar-apply-grouping=${($event: CustomEvent) => ((this.applyGrouping) as (...args: any[]) => any)($event.detail)} @rozie-group-bar-clear-grouping=${($event: CustomEvent) => ((this.clearGrouping) as (...args: any[]) => any)($event.detail)}>
     ${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.virtual ? html`<div class="rdt-scroll" style=${rozieStyle(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 }).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>` : 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>
   <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.column.id))} data-rozie-s-d5dcab4c>
-        ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" 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.column.id))} 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>`}
-        </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>
-          ${header.column.getCanSort && header.column.getCanSort() ? html`<button class="rdt-sort-btn" type="button" @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onHeaderSort(header.column.id, $event); }} 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>
+          ${wh.header.column.getCanSort && wh.header.column.getCanSort() ? html`<button class="rdt-sort-btn" type="button" @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onHeaderSort(wh.header.column.id, $event); }} data-rozie-s-d5dcab4c>
             <span class="rdt-header-label" data-rozie-s-d5dcab4c>
-              ${this.colHeader !== undefined ? this.colHeader({columnId: header.column.id, column: header.column, label: this.headerLabel(header.column.id)}) : html`<slot name="colHeader" data-rozie-params=${(() => { try { return JSON.stringify({columnId: header.column.id, column: header.column, label: this.headerLabel(header.column.id)}); } catch { return '{}'; } })()}>${rozieDisplay(this.headerLabel(header.column.id))}</slot>`}
+              ${this.colHeader !== undefined ? this.colHeader({columnId: wh.header.column.id, column: wh.header.column, label: this.headerLabel(wh.header.column.id)}) : html`<slot name="colHeader" data-rozie-params=${(() => { try { return JSON.stringify({columnId: wh.header.column.id, column: wh.header.column, label: this.headerLabel(wh.header.column.id)}); } catch { return '{}'; } })()}>${rozieDisplay(this.headerLabel(wh.header.column.id))}</slot>`}
             </span>
-            <span class="rdt-sort-ind" aria-hidden="true" data-rozie-s-d5dcab4c>${rozieDisplay(this.sortIndicator(header.column.id))}</span>
+            <span class="rdt-sort-ind" aria-hidden="true" data-rozie-s-d5dcab4c>${rozieDisplay(this.sortIndicator(wh.header.column.id))}</span>
           </button>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
             <span class="rdt-header-label" data-rozie-s-d5dcab4c>
-              ${this.colHeader !== undefined ? this.colHeader({columnId: header.column.id, column: header.column, label: this.headerLabel(header.column.id)}) : html`<slot name="colHeader" data-rozie-params=${(() => { try { return JSON.stringify({columnId: header.column.id, column: header.column, label: this.headerLabel(header.column.id)}); } catch { return '{}'; } })()}>${rozieDisplay(this.headerLabel(header.column.id))}</slot>`}
+              ${this.colHeader !== undefined ? this.colHeader({columnId: wh.header.column.id, column: wh.header.column, label: this.headerLabel(wh.header.column.id)}) : html`<slot name="colHeader" data-rozie-params=${(() => { try { return JSON.stringify({columnId: wh.header.column.id, column: wh.header.column, label: this.headerLabel(wh.header.column.id)}); } catch { return '{}'; } })()}>${rozieDisplay(this.headerLabel(wh.header.column.id))}</slot>`}
             </span>
-          </span>`}<rozie-popover trigger="click" placement="bottom-end" strategy="fixed" .offset=${4} data-rozie-s-d5dcab4c><button class="rdt-col-menu-trigger" type="button" aria-label=${rozieAttr('Column options for ' + this.headerLabel(header.column.id))} data-rozie-s-d5dcab4c slot="anchor">⋯</button><div class="rdt-col-menu" role="menu" data-rozie-s-d5dcab4c>
-              <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${this.columnPinSide(header.column.id) === 'left'} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onPinColumn(header.column.id, 'left', $event); }} data-rozie-s-d5dcab4c>Pin left</button>
-              <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${this.columnPinSide(header.column.id) === 'right'} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onPinColumn(header.column.id, 'right', $event); }} data-rozie-s-d5dcab4c>Pin right</button>
-              <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${!this.columnPinSide(header.column.id)} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onPinColumn(header.column.id, false, $event); }} data-rozie-s-d5dcab4c>Unpin</button>
+          </span>`}<rozie-popover trigger="click" placement="bottom-end" strategy="fixed" .offset=${4} data-rozie-s-d5dcab4c><button class="rdt-col-menu-trigger" type="button" aria-label=${rozieAttr('Column options for ' + this.headerLabel(wh.header.column.id))} data-rozie-s-d5dcab4c slot="anchor">⋯</button><div class="rdt-col-menu" role="menu" data-rozie-s-d5dcab4c>
+              <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${this.columnPinSide(wh.header.column.id) === 'left'} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onPinColumn(wh.header.column.id, 'left', $event); }} data-rozie-s-d5dcab4c>Pin left</button>
+              <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${this.columnPinSide(wh.header.column.id) === 'right'} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onPinColumn(wh.header.column.id, 'right', $event); }} data-rozie-s-d5dcab4c>Pin right</button>
+              <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${!this.columnPinSide(wh.header.column.id)} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onPinColumn(wh.header.column.id, false, $event); }} data-rozie-s-d5dcab4c>Unpin</button>
               <hr class="rdt-col-menu-sep" data-rozie-s-d5dcab4c />
-              <button class="rdt-col-menu-item" type="button" role="menuitem" @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onHideColumn(header.column.id, $event); }} data-rozie-s-d5dcab4c>Hide column</button>
+              <button class="rdt-col-menu-item" type="button" role="menuitem" @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onHideColumn(wh.header.column.id, $event); }} data-rozie-s-d5dcab4c>Hide column</button>
             </div></rozie-popover>
-          <button class="rdt-resize-handle" type="button" aria-label=${rozieAttr('Resize ' + this.headerLabel(header.column.id))} @pointerdown=${($event: PointerEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onResizeStart(header.column.id, $event); }} @touchstart=${($event: TouchEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onResizeStart(header.column.id, $event); }} data-rozie-s-d5dcab4c><span class="rdt-resize-grip" aria-hidden="true" data-rozie-s-d5dcab4c></span></button>
+          <button class="rdt-resize-handle" type="button" aria-label=${rozieAttr('Resize ' + this.headerLabel(wh.header.column.id))} @pointerdown=${($event: PointerEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onResizeStart(wh.header.column.id, $event); }} @touchstart=${($event: TouchEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onResizeStart(wh.header.column.id, $event); }} data-rozie-s-d5dcab4c><span class="rdt-resize-grip" aria-hidden="true" data-rozie-s-d5dcab4c></span></button>
         </span>`}</th>`)}
-    </tr>`)}
+      
+      ${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>
-      ${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>
-        ${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) && !this.hasFilterSlot() ? html`<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 />` : nothing}${this.columnIsFilterable(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${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)}></slot>`}
+      ${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.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) && !this.hasFilterSlot() ? html`<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 />` : nothing}${this.columnIsFilterable(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+            ${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)}></slot>`}
           </span>` : nothing}</span>`}</th>`)}
-    </tr>` : nothing}</thead>
+      ${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>` : nothing}</thead>
 
   <tbody class="rdt-tbody" role="rowgroup" data-rozie-s-d5dcab4c>
     
     <tr class="rdt-spacer" aria-hidden="true" data-rozie-s-d5dcab4c>
-      <td colspan=${rozieAttr(this.visibleColCount())} style=${rozieStyle('height:' + this.padTop() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c></td>
+      <td colspan=${rozieAttr(this.windowedColSpan())} style=${rozieStyle('height:' + this.padTop() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c></td>
     </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>
-      ${repeat<any>(this.visibleCellsFor(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-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.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: wr.row.original, checked: this.rowIsSelected(wr.row), toggle: e => this.onToggleRow(wr.row, e)}) : html`<slot name="selectCell" data-rozie-params=${(() => { try { return JSON.stringify({row: wr.row.original, 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)}>
+          ${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 />
           </slot>`}
         </span>` : this.cellIsGrouped(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           <button class="rdt-expander rdt-group-toggle" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(wr.row)} aria-label=${rozieAttr(this.rowIsExpanded(wr.row) ? 'Collapse group' : 'Expand group')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onToggleExpand(wr.row, $event); }} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(wr.row) ? '▾' : '▸')}</button>
           <span class="rdt-group-value" data-rozie-s-d5dcab4c>
-            ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
+            ${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>`}
           </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.hasEditorSlot(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: wr.row.original, 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: wr.row.original, 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 '{}'; } })()}></slot>`}
+            ${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 '{}'; } })()}></slot>`}
           </span>` : this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" .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="" .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="" ?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 />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .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.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
+          ${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>`}
         </span>`}${this.isFillHandleCell(wr.vi.index, this.colIndexOf(wr.row, cell)) ? html`<span class="rdt-fill-handle" data-fill-handle="" data-testid="fill-handle" aria-hidden="true" @pointerdown=${($event: PointerEvent & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c></span>` : nothing}</td>`)}
-    </tr>
+      
+      ${this.colsWindowed() ? html`<td class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle('width:' + this.colPadRight() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c></td>` : nothing}</tr>
     
     ${this.rowShowsDetail(wr.row) ? html`<tr class="rdt-detail-row" role="row" data-detail-row=${rozieAttr(wr.row.id)} data-rozie-s-d5dcab4c>
-      <td class="rdt-detail-cell" colspan=${rozieAttr(this.visibleColCount())} data-rozie-s-d5dcab4c>
+      <td class="rdt-detail-cell" colspan=${rozieAttr(this.windowedColSpan())} data-rozie-s-d5dcab4c>
         ${this.detail !== undefined ? this.detail({row: wr.row.original}) : html`<slot name="detail" data-rozie-params=${(() => { try { return JSON.stringify({row: wr.row.original}); } catch { return '{}'; } })()}></slot>`}
       </td>
     </tr>` : nothing}`)}
     
     <tr class="rdt-spacer" aria-hidden="true" data-rozie-s-d5dcab4c>
-      <td colspan=${rozieAttr(this.visibleColCount())} style=${rozieStyle('height:' + this.padBottom() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c></td>
+      <td colspan=${rozieAttr(this.windowedColSpan())} style=${rozieStyle('height:' + this.padBottom() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c></td>
     </tr>
   </tbody>
 </table>
@@ -1309,22 +1416,22 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" 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>
-          ${this.selectCell !== undefined ? this.selectCell({row: row.original, checked: this.rowIsSelected(row), toggle: e => this.onToggleRow(row, e)}) : html`<slot name="selectCell" data-rozie-params=${(() => { try { return JSON.stringify({row: row.original, checked: this.rowIsSelected(row)}); } catch { return '{}'; } })()} @rozie-select-cell-toggle=${($event: CustomEvent) => ((e => this.onToggleRow(row, e)) as (...args: any[]) => any)($event.detail)}>
+          ${this.selectCell !== undefined ? this.selectCell({row: this.cellSlotRow(row), checked: this.rowIsSelected(row), toggle: e => this.onToggleRow(row, e)}) : html`<slot name="selectCell" data-rozie-params=${(() => { try { return JSON.stringify({row: this.cellSlotRow(row), checked: this.rowIsSelected(row)}); } catch { return '{}'; } })()} @rozie-select-cell-toggle=${($event: CustomEvent) => ((e => this.onToggleRow(row, e)) as (...args: any[]) => any)($event.detail)}>
             <input class="rdt-select-row" type="checkbox" aria-label="Select row" ?checked=${this.rowIsSelected(row)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onToggleRow(row, $event); }} data-rozie-s-d5dcab4c />
           </slot>`}
         </span>` : this.cellIsGrouped(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           <button class="rdt-expander rdt-group-toggle" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(row)} aria-label=${rozieAttr(this.rowIsExpanded(row) ? 'Collapse group' : 'Expand group')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onToggleExpand(row, $event); }} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(row) ? '▾' : '▸')}</button>
           <span class="rdt-group-value" data-rozie-s-d5dcab4c>
-            ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: row.original, value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: row.original, value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
+            ${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>`}
           </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.hasEditorSlot(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: row.original, 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: row.original, 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 '{}'; } })()}></slot>`}
+            ${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 '{}'; } })()}></slot>`}
           </span>` : this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" .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="" .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="" ?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 />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .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.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: row.original, value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: row.original, value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
+          ${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>`}
         </span>`}${this.isFillHandleCell(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? html`<span class="rdt-fill-handle" data-fill-handle="" data-testid="fill-handle" aria-hidden="true" @pointerdown=${($event: PointerEvent & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c></span>` : nothing}</td>`)}
     </tr>
     
@@ -1334,7 +1441,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
       </td>
     </tr>` : nothing}`)}
   </tbody>
-</table>`}${!this.virtual ? html`<div class="rdt-pagination" role="group" aria-label="Pagination" data-rozie-s-d5dcab4c>
+</table>`}${!this.rowsWindowed() ? html`<div class="rdt-pagination" role="group" aria-label="Pagination" data-rozie-s-d5dcab4c>
   <button class="rdt-page-btn rdt-page-prev" type="button" ?disabled=${!this.canPrevPage()} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onPrevPage(); }} data-rozie-s-d5dcab4c>Prev</button>
   <span class="rdt-page-status" aria-live="polite" data-rozie-s-d5dcab4c>
     ${rozieDisplay('Page ' + (this.pageIndex() + 1) + ' of ' + this.displayPageCount())}
@@ -1363,6 +1470,15 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   gridScrollEl: any = null;
 
+  // ── Horizontal (column-axis) windowing instance state (Phase 87 87-04) ─────────────────
+  // The SECOND, independent virtual-core instance (AXIS MECHANISM, windowing.rzts): mutable
+  // top-level `let`s (the `virtualizer` precedent above — React hoists to useRef). NULL until
+  // $onMount, and ONLY constructed when colsWindowed(). Shares gridScrollEl (the SAME
+  // .rdt-scroll element) with the row instance — D-03.
+  colVirtualizer: any = null;
+
+  colVirtualizerCleanup: any = null;
+
   // CR-01 remeasure scheduling state. remeasurePending dedupes the deferred sweep — at most ONE
   // rAF is in flight, so a burst of onChange ticks (a fast scroll) collapses to a single measure
   // pass per frame instead of piling up rAF callbacks that fire mid-gesture. The piled-up
@@ -1374,6 +1490,19 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // once motion settles between scroll steps) is unaffected.
   remeasurePending = false;
 
+  // Gap-closure 87-13: the deferred sweep's own rAF handle, plus a disposed latch. Until 87-07 a
+  // post-unmount sweep was inert — it re-measured a detached tree and wrote nothing. 87-07's D-15
+  // re-feed changed that: remeasureWindow() now reaches refineRowEstimate(), which calls
+  // virtualizer.setOptions()/_willUpdate(), mutates gridScrollEl.scrollTop, and WRITES
+  // $data.windowVer. remeasureWindow()'s existing `!virtualizer || !gridRoot` guard cannot catch
+  // this — neither ref is ever nulled after $onMount assigns it — so a scroll/resize burst that
+  // leaves a pass pending across unmount (a route transition mid-scroll) lands a state write on a
+  // torn-down instance. Handle init is `null`, never 0: an Angular leaf types this as the DOM
+  // handle and TS2322s on a numeric seed.
+  remeasureRaf: any = null;
+
+  remeasureDisposed = false;
+
   // ── 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
@@ -1533,34 +1662,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // re-feed sources here so editing works whether or not the consumer binds r-model:data.
   currentData = (): any => this.data != null ? this.data : this._dataDefault.value;
 
-  // Prototype-safe id-keyed column resolution (T-48-PP): the `:columns` config array is
-  // applied FIRST (lower precedence), then the <Column> registry OVERRIDES by id (LWW).
-  // byId is a null-prototype object so a consumer column id of "__proto__"/"constructor"
-  // cannot pollute Object.prototype. Returns the table-core ColumnDef[]. (No per-column
-  // render callbacks — cells render via the single #cell/#header scoped slot on this
-  // component, dispatched by columnId; <Column> carries metadata only.)
-  isSafeKey = (k: any) => k !== '__proto__' && k !== 'constructor' && k !== 'prototype';
-
-  // wrapAggregationFn (phase 50 req-5, D-05, threat T-50-04): resolve a per-column
-  // aggregationFn straight onto the ColumnDef (no component-side switch — RESEARCH
-  // anti-pattern). A built-in NAME string ('sum'/'min'/'max'/'extent'/'mean'/'median'/
-  // 'unique'/'uniqueCount'/'count') passes through verbatim — table-core resolves it from its
-  // built-in `aggregationFns` map. A CUSTOM function `(columnId, leafRows, childRows) => any`
-  // is DEFENSIVELY WRAPPED (the runValidator precedent): a consumer fn runs per group, so a
-  // throw is coerced to `undefined` and can never crash getGroupedRowModel (DoS guard).
-  // Anything else → undefined (no aggregation; the cell renders as a placeholder).
-  wrapAggregationFn = (fn: any) => {
-  if (typeof fn === 'string') return fn;
-  if (typeof fn !== 'function') return undefined;
-  return (columnId: any, leafRows: any, childRows: any) => {
-    try {
-      return fn(columnId, leafRows, childRows);
-    } catch (err: any) {
-      return undefined;
-    }
-  };
-};
-
   // Build the table-core ColumnDef for ONE config-array entry. A LEAF entry
   // ({ id?, field, header?, … }) maps to an accessor ColumnDef; a GROUP entry
   // ({ id?, header, columns: [...] }) maps to a multi-level header GROUP column
@@ -1590,7 +1691,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     if (gid == null) gid = c.header != null ? '__grp_' + kids.map((k: any) => k.id).join('_') : null;
     if (gid == null) return null;
     const id = String(gid);
-    if (!this.isSafeKey(id)) return null;
+    if (!isSafeKey(id)) return null;
     return {
       id,
       header: c.header != null ? c.header : id,
@@ -1600,7 +1701,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   const rawId = c.id != null ? c.id : c.field;
   if (rawId == null) return null;
   const id = String(rawId);
-  if (!this.isSafeKey(id)) return null;
+  if (!isSafeKey(id)) return null;
   return {
     id,
     accessorKey: c.field != null ? c.field : id,
@@ -1618,7 +1719,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     // aggregationFn (built-in name OR custom fn) flows straight onto the ColumnDef (D-05),
     // a custom fn defensively wrapped (T-50-04).
     groupable: c.groupable !== false,
-    aggregationFn: this.wrapAggregationFn(c.aggregationFn),
+    aggregationFn: wrapAggregationFn(c.aggregationFn),
     pinned: c.pinned != null ? c.pinned : '',
     width: c.width != null ? c.width : '',
     // Editable-cell config (Phase 51) → ColumnDef.meta, the table-core per-column
@@ -1632,10 +1733,58 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   };
 };
 
+  // ══ D-23 (gap-closure, Phase 87 follow-up) — columnDefs() memoization ═══════════════════
+  // ROOT CAUSE (confirmed via CPU profiling the D-13 [vue] fill-drag auto-scroll failure):
+  // defFor(colId) (columnChrome.rzts) — the sole resolver behind editMetaOf/columnEditable/
+  // editorTypeOf/isEditing, all called PER CELL, PER RENDER (isEditing's own header comment:
+  // "Called per-cell in both <td> bodies") — called columnDefs() with ZERO caching. columnDefs()
+  // rebuilds the FULL column-def array (buildConfigDef for every entry in $props.columns,
+  // including recursive group traversal) from scratch on every single invocation. With N
+  // columns and M rendered rows that is an O(N x M x N) = O(N^2 x M) cost PER RENDER COMMIT —
+  // on this plan's 60-column fixture, up to ~1200 cells x 60 rebuilt defs = ~72,000
+  // buildConfigDef calls per commit, repeated on every windowVer-driven re-render during a
+  // sustained scroll gesture (the fill-drag edge-auto-scroll rAF loop bumps windowVer on
+  // every frame). A CPU profile of the failing case showed buildConfigDef consuming ~39% of
+  // ALL wall-clock time during the gesture, with a FURTHER ~27% in Vue's own reactive-Proxy
+  // `get` trap — $props.columns/$data.colReg are reactive on Vue, so every one of the
+  // ~15 property reads buildConfigDef performs per column pays Vue's track()/Reflect.get
+  // overhead, an expense React's plain (non-Proxy) props do not pay. The SAME O(N^2 x M)
+  // algorithmic cost exists on all six targets (this is shared-engine code, dissolved
+  // identically everywhere) — Vue's per-access reactivity overhead is what tips an already
+  // wasteful recompute over the fixed real-time budget used by this test's rAF-driven
+  // auto-scroll hold, not a Vue-specific logic defect. Fixing the recompute (not the timing)
+  // removes the accidental n^2 blowup for every target, and Vue-specifically restores enough
+  // per-frame headroom to keep pace with the auto-scroll loop.
+  //
+  // FIX: cache the resolved array, keyed on the REFERENCE identity of $props.columns and
+  // $data.colReg — the exact two dependencies the reFeed() $watch (DataTable.rozie) already
+  // treats as "changed only when the reference changes" (columns is consumer-memoized like
+  // $props.data/$props.sorting; colReg is reassigned via `{ ...colReg, [key]: spec }` on every
+  // real mutation, NEVER written in place — see DataTable.rozie's own colReg-mutation comment).
+  // A cache hit is an O(1) reference-equality check; a cache miss re-runs the exact same
+  // computation as before (byte-identical output either way — this is a pure memoization, not
+  // a behavior change).
+  columnDefsCache: any[] | null = null;
+
+  columnDefsCacheColumnsRef: any = undefined;
+
+  columnDefsCacheColRegRef: any = undefined;
+
+  // B1 (quick 260906-afh) — the def-lookup index, populated INSIDE this SAME memo block on
+  // a cache MISS only (never rebuilt per call — a per-call recursive scan would restore the
+  // O(N^2 x M) blowup D-23 removed, T-AFH-03). A top-level `let` lowers to a per-instance
+  // `useRef` on React (verified in the emitted leaf), so this is instance-scoped like
+  // columnDefsCache above.
+  columnDefsIndexCache: any = null;
+
   columnDefs = () => {
+  const cfg = this.columns || [];
+  const reg = this._colReg.value || {};
+  if (this.columnDefsCache && this.columns === this.columnDefsCacheColumnsRef && this._colReg.value === this.columnDefsCacheColRegRef) {
+    return this.columnDefsCache;
+  }
   const byId = Object.create(null);
   const order = [];
-  const cfg = this.columns || [];
   for (const c of cfg as any) {
     const def = this.buildConfigDef(c);
     if (!def) continue;
@@ -1643,9 +1792,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     if (!(id in byId)) order.push(id);
     byId[id] = def;
   }
-  const reg = this._colReg.value || {};
   for (const id in reg) {
-    if (!this.isSafeKey(id)) continue;
+    if (!isSafeKey(id)) continue;
     const spec = reg[id];
     if (!spec) continue;
     if (!(id in byId)) order.push(id);
@@ -1660,7 +1808,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
       expandable: spec.expandable === true,
       // Grouping (phase 50 reqs 4-7) — same shape as the config branch (D-05 / T-50-04).
       groupable: spec.groupable !== false,
-      aggregationFn: this.wrapAggregationFn(spec.aggregationFn),
+      aggregationFn: wrapAggregationFn(spec.aggregationFn),
       pinned: spec.pinned != null ? spec.pinned : '',
       width: spec.width != null ? spec.width : '',
       // Editable-cell config (Phase 51) → ColumnDef.meta from the <Column> registry spec.
@@ -1674,9 +1822,23 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   }
   const out = [];
   for (const id of order as any) if (byId[id]) out.push(byId[id]);
+  this.columnDefsCache = out;
+  this.columnDefsCacheColumnsRef = this.columns;
+  this.columnDefsCacheColRegRef = this._colReg.value;
+  this.columnDefsIndexCache = indexDefsById(out);
   return out;
 };
 
+  // defIndex: the def-lookup map for the CURRENT columnDefs() array. Calling columnDefs()
+  // first is deliberate — either an O(1) reference-equality cache hit (columnDefsIndexCache
+  // is already fresh) or a miss that repopulates BOTH slots together, so the index can never
+  // go stale relative to the array. Falls back to an empty null-prototype map (never null/
+  // undefined) so a caller can read it unconditionally.
+  defIndex = () => {
+  this.columnDefs();
+  return this.columnDefsIndexCache || Object.create(null);
+};
+
   // The constant id of the auto-injected leading checkbox column (D-04). Distinct from
   // any consumer column id (the registry/config guard never produces a leading "__").
   SELECT_COL_ID = '__rdt_select';
@@ -1762,8 +1924,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this.programmatic--;
 };
 
-  applyUpdater = (updater: any, current: any) => typeof updater === 'function' ? updater(current) : updater;
-
   // ── expanded slice: STATIC-KEY fresh-value echo-guarded write funnel (A4) ──────────
   // table-core hands an Updater<ExpandedState> = value | (old)=>new; onExpandedChange
   // applies it against the CURRENT expanded, then this funnel writes a FRESH value to the
@@ -2145,51 +2305,51 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // fresh (recreated each render on React, reading fresh currentState) in the re-feed
   // keeps the Updater base value current. No-op cost on the other five.
   onSortingChangeCb = (updater: any) => {
-  this.writeSorting(this.applyUpdater(updater, this.currentState().sorting));
+  this.writeSorting(applyUpdater(updater, this.currentState().sorting));
 };
 
   onExpandedChangeCb = (updater: any) => {
-  this.writeExpanded(this.applyUpdater(updater, this.currentState().expanded));
+  this.writeExpanded(applyUpdater(updater, this.currentState().expanded));
 };
 
   onGroupingChangeCb = (updater: any) => {
-  this.writeGrouping(this.applyUpdater(updater, this.currentState().grouping));
+  this.writeGrouping(applyUpdater(updater, this.currentState().grouping));
 };
 
   onGlobalFilterChangeCb = (updater: any) => {
-  this.writeGlobalFilter(this.applyUpdater(updater, this.currentState().globalFilter));
+  this.writeGlobalFilter(applyUpdater(updater, this.currentState().globalFilter));
 };
 
   onColumnFiltersChangeCb = (updater: any) => {
-  this.writeColumnFilters(this.applyUpdater(updater, this.currentState().columnFilters));
+  this.writeColumnFilters(applyUpdater(updater, this.currentState().columnFilters));
 };
 
   onPaginationChangeCb = (updater: any) => {
-  this.writePagination(this.applyUpdater(updater, this.currentState().pagination));
+  this.writePagination(applyUpdater(updater, this.currentState().pagination));
 };
 
   onRowSelectionChangeCb = (updater: any) => {
-  this.writeRowSelection(this.applyUpdater(updater, this.currentState().rowSelection));
+  this.writeRowSelection(applyUpdater(updater, this.currentState().rowSelection));
 };
 
   onColumnVisibilityChangeCb = (updater: any) => {
-  this.writeColumnVisibility(this.applyUpdater(updater, this.currentState().columnVisibility));
+  this.writeColumnVisibility(applyUpdater(updater, this.currentState().columnVisibility));
 };
 
   onColumnSizingChangeCb = (updater: any) => {
-  this.writeColumnSizing(this.applyUpdater(updater, this.currentState().columnSizing));
+  this.writeColumnSizing(applyUpdater(updater, this.currentState().columnSizing));
 };
 
   onColumnOrderChangeCb = (updater: any) => {
-  this.writeColumnOrder(this.applyUpdater(updater, this.currentState().columnOrder));
+  this.writeColumnOrder(applyUpdater(updater, this.currentState().columnOrder));
 };
 
   onColumnPinningChangeCb = (updater: any) => {
-  this.writeColumnPinning(this.applyUpdater(updater, this.currentState().columnPinning));
+  this.writeColumnPinning(applyUpdater(updater, this.currentState().columnPinning));
 };
 
   onColumnSizingInfoChangeCb = (updater: any) => {
-  const next = this.applyUpdater(updater, this._columnSizingInfo.value);
+  const next = applyUpdater(updater, this._columnSizingInfo.value);
   this._columnSizingInfo.value = next != null ? next : this._columnSizingInfo.value;
 };
 
@@ -2209,13 +2369,157 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // dist-parity are the net). The host satisfies the windowing.rzts contract by convention:
   // windowSource() (the row source), pinnedEditIndex()/pinnedMeasurement() (the D-05 pin hook),
   // scheduleRemeasure(), and the gridScrollEl/virtualizer/virtual-core-fn references.
+  // ══ D-05 predicate layer (Phase 87 87-02) — resolves the windowing prop into an axis state,
+  // replacing every bare truthiness read of $props.virtual (which is unsafe once the prop widens
+  // to a string grammar in 87-03: 'columns' is truthy but does NOT mean "windows rows"). Modeled on
+  // resolveAppendTo() in CommandPalette.rozie (the D-01 value-grammar precedent): branch on
+  // typeof === 'string', switch on the known string values, fall back to the boolean cases. THIS
+  // plan still declares `virtual: Boolean` (87-03 widens the declaration to [Boolean, String]), so
+  // resolveVirtual() can currently only return 'off' or 'rows' and colsWindowed() is constantly
+  // false — inert until 87-03/87-04 land the column axis.
+  //
+  // Declared BEFORE windowSource() (below): windowSource() calls rowsWindowed(), and the React
+  // emitter lowers each of these to a useCallback whose dependency array is evaluated eagerly at
+  // the declaration site — a forward reference here is a genuine TDZ (TS2448), not just a style
+  // preference (found running the strict react typecheck gate this task, Rule 1).
+  resolveVirtual = () => {
+  const v = this.virtual;
+  if (typeof v === 'string') {
+    if (v === 'rows') return 'rows';
+    if (v === 'columns') return 'columns';
+    if (v === 'both') return 'both';
+    return 'off';
+  }
+  return v === true ? 'rows' : 'off';
+};
+
+  // rowsWindowed(): the windowing.rzts host-contract symbol (D-05). Byte-behaviorally identical to
+  // today's `$props.virtual` truthiness — this plan changes NO user-visible behavior.
+  rowsWindowed = () => {
+  const s = this.resolveVirtual();
+  return s === 'rows' || s === 'both';
+};
+
+  colsWindowed = () => {
+  const s = this.resolveVirtual();
+  return s === 'columns' || s === 'both';
+};
+
+  isWindowed = () => this.rowsWindowed() || this.colsWindowed();
+
+  // autoMeasureOn() (Phase 87 87-07, D-18): the windowing.rzts host-contract gate for the
+  // running-mean row-size estimator. Real body here: $props.autoMeasure === true. listbox/
+  // combobox define this as a permanent `() => false` one-liner (D-20) so estimateRowSize()'s
+  // accumulator branch is dead code for them.
+  autoMeasureOn = () => this.autoMeasure === true;
+
+  // D-10 column-axis host-contract symbols. columnCount()/columnSize() got REAL bodies in
+  // 87-04 (the tracer); forcedColumns() stays an empty-array stub until 87-05 gives it the
+  // pinned + active-cell + editing-column union. Explicit return-type annotations (columnSize /
+  // forcedColumns) copy the pinMeasurement() trick (windowing.rzts) so the strict bundled-leaf
+  // tsc does not flow-narrow a no-op host's return to `never`.
+  //
+  // columnCount(): the leaf-column count the column virtualizer windows over — visibleColCount()
+  // (gridFocusNav.rzts), the SAME index space colIndexOf()/data-col-index already address (D-08).
+  columnCount = (): number => this.visibleColCount();
+
+  // columnSize(i): the authoritative width of absolute leaf column i (D-06). Reads table-core's
+  // OWN getVisibleLeafColumns() directly — NOT the host's allLeafColumns() wrapper
+  // (columnChrome.rzts), which returns plain `{ id, label, visible }` POJOs with no getSize()
+  // and also EXCLUDES the auto-injected chrome columns (select/expander), breaking the index
+  // alignment with columnCount()/colIndexOf(). getVisibleLeafColumns() is the array
+  // row.getVisibleCells() itself is built from, so its index space matches exactly. Falls back
+  // to table-core's own default column width (150) when the index is out of range.
+  columnSize = (i: number): number => {
+  if (!this.table || !this.table.getVisibleLeafColumns) return 150;
+  const cols = this.table.getVisibleLeafColumns();
+  const c = cols[i];
+  return c && typeof c.getSize === 'function' ? c.getSize() : 150;
+};
+
+  // forcedColumns() (Phase 87 87-05, D-10): the column-axis mirror of pinnedEditIndex()/
+  // pinnedMeasurement() (the row axis's D-05 pin-extension hook) — unions pinned + active-cell +
+  // editing column indices into the window slice so none of them ever recycle out from under the
+  // user. Reads table.getVisibleLeafColumns() DIRECTLY (the SAME array columnCount()/columnSize()
+  // index against, and the array row.getVisibleCells() is itself built from) — NOT
+  // allLeafColumns() (columnChrome.rzts), which excludes the auto-injected chrome columns and
+  // returns plain POJOs with no getSize(), breaking the index alignment (the exact columnSize()
+  // Rule-1 fix from 87-04, mirrored here rather than repeated).
+  //
+  // The fill-handle corner is DELIBERATELY not forced (D-10 explicit) — no call to
+  // isFillHandleCell here. The whole selected RANGE is not forced either: a range's moving
+  // corner tracks into $data.activeColIndex (extendRange/setRangeFocus), so even a 200-column
+  // range forces at most the ONE active-cell column via the branch below, never the full span —
+  // forcing the whole range would defeat the feature precisely where it is most wanted (D-10).
+  forcedColumns = (): number[] => {
+  if (!this.colsWindowed()) return [];
+  const out = [];
+  if (this.table && this.table.getVisibleLeafColumns) {
+    const cols = this.table.getVisibleLeafColumns();
+    for (let i = 0; i < cols.length; i++) {
+      const c = cols[i];
+      if (c && c.getIsPinned && c.getIsPinned()) out.push(i);
+    }
+  }
+  // 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) {
+    out.push(this._activeColIndex.value);
+  }
+  // Editing column (D-10): required or an open editor unmounts mid-keystroke when a
+  // horizontal scroll recycles it — the exact failure D-02 was built to fix on the row axis
+  // (T-87-05-01, the phase's one HIGH-severity threat). Single-cell edit mode only
+  // ($data.editingRow/editingCol, mirroring editingColumnId()'s own index pair) — full-row
+  // edit mode (editingRowIndex) has no single "the editing column" to force.
+  if (this._editingRow.value >= 0 && this._editingCol.value >= 0 && out.indexOf(this._editingCol.value) === -1) {
+    out.push(this._editingCol.value);
+  }
+  return out;
+};
+
+  // windowedCells(row) (D-09): the TEMPLATE-ONLY windowed slice of a row's visible cells — wraps
+  // visibleCellsFor(row) (columnChrome.rzts) WITHOUT modifying it. Degrades to the full,
+  // unsliced set when columns are not windowed (byte-identical to today). visibleCellsFor()
+  // itself must never be sliced: colIndexOf/visibleColCount/columnIdAt/cellValueAt/beginEdit all
+  // index into its FULL result (the A2 invariant, 87-02), and slicing it would silently break
+  // all five with no compile error.
+  windowedCells = (row: any) => {
+  // subscribe-first (the windowedRows() discipline) so the fine-grained targets' body <td>
+  // r-for re-derives when the column window moves.
+  void this._windowVer.value;
+  const cells = this.visibleCellsFor(row);
+  if (!this.colsWindowed()) return cells;
+  const idx = this.windowedColIndices();
+  const out = [];
+  for (let i = 0; i < idx.length; i++) {
+    // WR-01 shrink-window guard, one axis over: drop any index that outruns the row's
+    // current cell list (a brief stale-count window analogous to windowedRows()'s WR-01).
+    const cell = cells[idx[i]];
+    if (cell) out.push(cell);
+  }
+  return out;
+};
+
+  // remeasureColumnWindow() (Phase 87 87-04) is declared in DataTable.rozie's OWN script, NOT
+  // here — even though it is conceptually this file's D-10 host-shell twin of remeasureWindow()
+  // above. Reason (Rule 1, found via the react typecheck gate): remeasureColumnWindow() must call
+  // columnVirtualizerOptions() (headless-core windowing.rzts). inlineScriptPartials() groups a
+  // RELATIVE partial import (this file) BEFORE a bare-package-specifier partial import
+  // (@rozie-ui/headless-core/windowing.rzts) in the merged per-target output, regardless of which
+  // import statement appears first in DataTable.rozie's own script (verified: columnVirtualizerOptions
+  // emits as a `useCallback` LATER in the react output than every symbol this file exports). A
+  // function declared HERE calling INTO windowing.rzts is therefore a forward reference — the
+  // exact TS2448 TDZ class the 87-02 predicate-layer reordering already fixed once. DataTable.rozie's
+  // OWN top-level script code lands AFTER both partial groups, so remeasureColumnWindow() is safe
+  // declared there instead (see the comment beside windowedHeaderRow()/windowedColSpan()).
   // windowSource(): the rows fed to the virtualizer AND held in $data.rows — the windowing.rzts
   // host-contract source. When virtual, the FULL filtered+sorted PRE-PAGINATION model
   // (A2-verified table.getPrePaginationRowModel()) so windowing REPLACES client pagination (req-9);
   // else the normal (paginated) row model — the non-virtual path is byte-unchanged.
   windowSource = () => {
   if (!this.table) return [];
-  if (this.virtual) return this.table.getPrePaginationRowModel().rows;
+  if (this.rowsWindowed()) return this.table.getPrePaginationRowModel().rows;
   return this.table.getRowModel().rows;
 };
 
@@ -2238,6 +2542,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // Each pass only OBSERVES + measures the live window; measureElement is idempotent on an
   // already-observed node, so running both is cheap and loop-free.
   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;
   if (this.remeasurePending) return;
   this.remeasurePending = true;
   let ranMicro = false;
@@ -2245,6 +2553,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     this.remeasureWindow();
   };
   const rafPass = () => {
+    this.remeasureRaf = null;
     this.remeasurePending = false;
     this.remeasureWindow();
   };
@@ -2252,7 +2561,25 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     ranMicro = true;
     queueMicrotask(microPass);
   }
-  if (typeof requestAnimationFrame === 'function') requestAnimationFrame(rafPass);else if (ranMicro) this.remeasurePending = false;else setTimeout(rafPass, 0);
+  // 87-13: retain the handle so teardownRemeasure() can cancel a pass that is still pending
+  // at unmount. Without this the callback survives teardown and writes $data.windowVer.
+  if (typeof requestAnimationFrame === 'function') this.remeasureRaf = requestAnimationFrame(rafPass);else if (ranMicro) this.remeasurePending = false;else this.remeasureRaf = setTimeout(rafPass, 0);
+};
+
+  // 87-13 (CR-01): idempotent teardown for the deferred sweep — the same discipline
+  // teardownFillDrag()/teardownRangeDrag() already follow. Cancels a pending pass and latches
+  // `remeasureDisposed` so the microtask twin (which carries no cancellable handle) and any
+  // in-flight onChange both bail instead of writing to a torn-down instance.
+  teardownRemeasure = () => {
+  this.remeasureDisposed = true;
+  if (this.remeasureRaf != null) {
+    // Discriminate on requestAnimationFrame — the SAME predicate scheduleRemeasure() branched
+    // on when it produced this handle. Testing cancelAnimationFrame instead would hand a
+    // setTimeout id to cancelAnimationFrame in any env where the two disagree.
+    if (typeof requestAnimationFrame === 'function') cancelAnimationFrame(this.remeasureRaf);else clearTimeout(this.remeasureRaf);
+    this.remeasureRaf = null;
+  }
+  this.remeasurePending = false;
 };
 
   // pinnedEditIndex(): the FULL-MODEL row index of the row currently in edit (D-02 pin-row),
@@ -2288,6 +2615,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // idempotent on an already-observed node (the `prevNode !== node` guard), so re-sweeping the
   // visible window each commit is cheap and loop-free.
   remeasureWindow = () => {
+  // 87-13 (CR-01): the disposed latch, checked BEFORE the ref guard below. That guard cannot
+  // 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;
   // 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
@@ -2299,6 +2631,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   if (this.virtualizer.scrollState) return;
   const trs = this.gridRoot.querySelectorAll('tbody.rdt-tbody > tr[data-index]');
   for (const tr of trs as any) this.virtualizer.measureElement(tr);
+  // 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
+  // into windowing.rzts (see windowing.rzts's HOST CONTRACT comment for the forward-
+  // reference TDZ this indirection avoids, the same class remeasureColumnWindow()'s comment
+  // 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();
 };
 
   // D-04: this shell exports ONLY the impure, data-table-specific host pieces. The pure windowing
@@ -2329,6 +2669,61 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   //                             defaulting to no-op): the DataTable host passes its edit-pinning hooks;
   //                             listbox passes nothing. Routing pinning through this host hook (NOT
   //                             inlining it) keeps DataTable's B13 edit-pinning behavior byte-identical.
+  //   - rowsWindowed(): boolean  — is the ROW axis windowed. REQUIRED, no default — replaces every bare
+  //                             truthiness read of the host's windowing prop (D-05); `windowedRows()` /
+  //                             `padTop()` / `padBottom()` / `rowIsOutsideWindow()` below call it by
+  //                             convention exactly as they already call `pinnedEditIndex()`.
+  //   - colsWindowed(): boolean  — is the COLUMN axis windowed. REQUIRED, no default. `false` for every
+  //                             host until it defines the real column-axis mechanism (87-04+).
+  //   - columnCount(): number    — the leaf-column count the column virtualizer windows over. REQUIRED,
+  //                             no default.
+  //   - columnSize(i: number): number — the authoritative width of absolute leaf column `i`, sourced
+  //                             from table-core's `getSize()` under D-06. REQUIRED, no default.
+  //   - forcedColumns(): number[] — the D-10 OPTIONAL column-axis mirror of `pinnedEditIndex()`: the
+  //                             DataTable host unions pinned + active-cell + editing column indices into
+  //                             the column-window slice; listbox/combobox pass an empty array (host-
+  //                             provided, defaulting to `[]`).
+  //   - colVirtualizer           — the host's SECOND virtual-core instance, windowing the COLUMN axis
+  //                             (see the AXIS MECHANISM note below). Host-provided, defaulting to `null`.
+  //   - autoMeasureOn(): boolean — the D-18 REQUIRED content-driven-estimate gate (Phase 87 87-07):
+  //                             data-table's real body reads `$props.autoMeasure === true`; listbox/
+  //                             combobox/command-palette return `false` so the accumulator branch
+  //                             estimateRowSize() gates on is dead code for them (D-20).
+  //   - afterRowRemeasure        — OPTIONAL host-owned mutable `let` (defaults to a no-op / undefined),
+  //                             assigned to refineRowEstimate() (below) by the host. The DataTable
+  //                             host's remeasureWindow() (virtualization.rzts) calls it AFTER its
+  //                             measureElement sweep so the fold + hysteresis re-feed run on every
+  //                             window commit. Routed through a mutable `let` rather than a direct
+  //                             call FROM virtualization.rzts INTO this file: a relative-partial CONST
+  //                             calling a bare-specifier-partial CONST is the exact forward-reference
+  //                             TDZ class remeasureColumnWindow()'s own DataTable.rozie comment
+  //                             documents for columnVirtualizerOptions() (inlineScriptPartials()
+  //                             groups the relative partial BEFORE the bare-specifier partial in the
+  //                             merged per-target output, regardless of source import order). A
+  //                             mutable `let` hoists to `useRef` on React and is excluded from a
+  //                             useCallback's dependency array, sidestepping the hazard entirely — the
+  //                             SAME mechanism `refreshRowModel` already relies on.
+  //
+  // AXIS MECHANISM (OQ1 / Assumption A1 — resolved from the installed source in 87-02;
+  // LANDED in 87-04: `columnVirtualizerOptions()` below IS the second, horizontal instance this
+  // note originally only documented). `horizontal` is a PER-INSTANCE field of `VirtualizerOptions`
+  // (`node_modules/@tanstack/virtual-core/dist/esm/index.d.ts:67`, installed version 3.17.1 per
+  // `package.json`), and every axis-sensitive internal read consults `instance.options.horizontal` —
+  // `measureElement`'s inlineSize/blockSize + offsetWidth/offsetHeight branch
+  // (`dist/esm/index.js:137,150`), `observeElementOffset`'s scrollLeft/scrollTop branch
+  // (`dist/esm/index.js:118-121`), `getMaxScrollOffset`'s scrollWidth/scrollHeight branch
+  // (`dist/esm/index.js:907-915`), and `scrollWithAdjustments`'s left/top branch
+  // (`dist/esm/index.js:152-161`). So ONE `Virtualizer` instance windows exactly ONE axis: the column
+  // axis needs its own SECOND, independent `Virtualizer` instance constructed with `horizontal: true`,
+  // sharing the SAME `getScrollElement()` (the `rdt-scroll` wrapper) the row instance already uses.
+  // Two options the row axis does not set that the column instance will need: `isRtl?: boolean`
+  // (data-table ships an RTL grid path) and `overscan?: number` (D-07 gives the column axis its own
+  // hardcoded constant, separate from the row axis's `overscan: 8` below).
+  //
+  // isRtl WIRING (gap-closure 87-09, LANDED — see `ensureColRtlWatch()`/`isColRtl()` below,
+  // immediately ahead of `columnVirtualizerOptions()`): data-table has no construction-time RTL
+  // signal (no `dir`/`rtl` prop), and `dir` can be set on `gridScrollEl` at ANY point relative to
+  // mount. `isRtl` is therefore computed LIVE via `getComputedStyle`, not baked in once.
   // getItemKey reads the LIVE source (never a frozen mount-render $data.rows closure — the F6
   // React stale-closure lesson) so virtual-core's measurement cache keys by stable full-model row
   // id across recycling, aligned with the windowed <tr> :key="row.id" (Pitfall 3 / req-10).
@@ -2337,16 +2732,321 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   return src && src[i] ? src[i].id : undefined;
 };
 
+  // COL_OVERSCAN (D-07): the column axis's own hardcoded overscan constant, separate from the
+  // row axis's `overscan: 8` below. Columns are far wider than rows are tall, so one number
+  // cannot serve both axes; no prop is exposed because no consumer has asked to tune the row
+  // overscan across the four phases it has shipped. Unused until 87-04 constructs the second,
+  // horizontal Virtualizer instance (see the AXIS MECHANISM note above).
+  COL_OVERSCAN = 3;
+
+  // columnVirtualizerOptions() (Phase 87 87-04): the SECOND, horizontal Virtualizer instance's
+  // full options set — the AXIS MECHANISM note's second instance, landed. Mirrors
+  // virtualizerOptions() exactly except: count/estimateSize read the COLUMN host symbols,
+  // horizontal:true selects the axis, overscan is the column axis's OWN constant (D-07), and
+  // there is NO getItemKey — columns have no stable per-column id in the virtual-core sense, so
+  // they key by index (virtual-core's default). onChange bumps the SAME $data.windowVer counter
+  // the row axis uses (87-02 checkpoint decision (b): no separate $data.colWindowVer) but does
+  // NOT call scheduleRemeasure(): under D-06 column widths come from table-core's getSize()
+  // oracle and are NEVER measured from the DOM, so a horizontal scroll has nothing new to
+  // observe (unlike the row axis's CR-01 recycled-row remeasure sweep).
+  // ══ Gap-closure 87-09 (dir="rtl" column windowing) ═══════════════════════════════════════
+  // virtual-core reads `instance.options.isRtl` FRESH on every native 'scroll' event — the
+  // negation lives inside `observeElementOffset`'s internal per-event closure
+  // (`dist/esm/index.js:119-120`: `el.scrollLeft * (isRtl && -1 || 1)`), called anew each time
+  // the browser fires 'scroll'. But `instance.options` itself is only a plain VALUE snapshot
+  // taken by the LAST `setOptions()` call (`dist/esm/index.js:277-280`:
+  // `for (const key in opts2) merged[key] = opts2[key]` copies the boolean, not a live binding
+  // or getter) — so a static `isRtl` computed ONCE at `colVirtualizer` construction would only
+  // ever reflect direction AT THAT INSTANT. `dir` can be set on `gridScrollEl` at any point
+  // relative to mount (data-table has no construction-time RTL prop), so a MutationObserver on
+  // `gridScrollEl`'s own `dir` attribute re-feeds `colVirtualizer`'s options — a cheap
+  // object-merge via `setOptions()`, deliberately NOT a forced `_willUpdate()` recompute, since
+  // nothing needs to repaint until the next real scroll — the moment direction flips. By the
+  // time the NEXT native 'scroll' event's own offset read runs, `instance.options.isRtl`
+  // already reflects the correction. Ordering is spec-guaranteed, not a race: MutationObserver
+  // callbacks run on the microtask queue, which the HTML event loop always drains before the
+  // next task — and a native 'scroll' event dispatched after a programmatic `scrollLeft` write
+  // is itself a subsequent task, not a microtask racing the same tick.
+  //
+  // F6 STALE-CLOSURE HAZARD (found + fixed this task, React only): calling
+  // columnVirtualizerOptions() FRESH from inside the MutationObserver's callback would
+  // re-derive `count`/`estimateSize` via columnCount() (virtualization.rzts's
+  // visibleColCount(), which reads `$data.rows`). The MutationObserver is attached ONCE,
+  // inside ensureColRtlWatch() at colVirtualizer CONSTRUCTION time ($onMount) — a closure
+  // FROZEN to that render's scope on React, where `$data.rows` is a useState value.
+  // $onMount's row-model seed (refreshRowModel()) resolves via an ASYNC setState, so AT THE
+  // EXACT INSTANT colVirtualizer is constructed, `rows` may still be `[]` in THAT render's
+  // closure — and unlike a `let`-hoisted ref (virtualizer, table, gridScrollEl — always read
+  // via `.current`, always live no matter which render's closure holds the reference),
+  // `$data.rows` is genuine React state: a plain local binding recreated fresh EVERY render,
+  // so a function captured from an OLDER render reads that OLDER render's snapshot FOREVER,
+  // no matter how many later renders populate it. Confirmed empirically: calling
+  // columnVirtualizerOptions() from the frozen callback read `count` back as 0 (not 60),
+  // collapsing getVirtualItems() to []. This is the exact class of bug `virtualItemKey`'s own
+  // header comment already documents ("never a frozen mount-render $data.rows closure") — and
+  // a MUTABLE-LET INDIRECTION (the `afterRowRemeasure` shape, 87-07) does NOT fix it here,
+  // because the hazard lives INSIDE columnVirtualizerOptions()'s own dependency chain
+  // ($data.rows), not in "which function identity gets called" — wrapping a stale call in
+  // another layer of ref does not make an inner React-state read fresh.
+  //
+  // FIX: never call columnVirtualizerOptions() again from this callback at all. Read
+  // `colVirtualizer.options` — virtual-core's OWN internal state, mutated in place on every
+  // setOptions() call regardless of which render's closure triggered it (a REAL object
+  // reference the SAME way `virtualizer`/`table` are, not React state) — and merge in ONLY
+  // the corrected `isRtl`. `count`/`estimateSize`/etc. keep whatever value the LAST correct
+  // setOptions() call gave them (from construction, or from remeasureColumnWindow()'s own
+  // FRESH-per-render re-feed via the $watch-driven refreshRowModel cycle) — untouched,
+  // because this dir-flip has nothing to do with row/column count. isColRtl() itself reads
+  // only `gridScrollEl` (also a ref) and does a live DOM getComputedStyle read — no React
+  // state involved, so it is never stale regardless of which render's closure calls it.
+  colRtlObserver: any = null;
+
+  colRtlObserverEl: any = null;
+
+  // isColRtl(): getComputedStyle (not a raw `.getAttribute('dir')` read) so an ANCESTOR's `dir`
+  // or a CSS `direction: rtl` rule is honored the same way the browser's own bidi layout honors
+  // it, not merely a literal attribute on gridScrollEl itself.
+  isColRtl = (): boolean => {
+  if (!this.gridScrollEl || typeof getComputedStyle !== 'function') return false;
+  return getComputedStyle(this.gridScrollEl).direction === 'rtl';
+};
+
+  // ensureColRtlWatch(): idempotent — a no-op once already attached to the CURRENT gridScrollEl
+  // (a stable ref for the component's lifetime once mounted). Self-attaching from inside
+  // columnVirtualizerOptions() means no new host-contract symbol is needed: listbox/combobox/
+  // command-palette never call columnVirtualizerOptions() at all (colsWindowed() is permanently
+  // false for them, D-20), so this code path — and the observer it creates — never exists there.
+  ensureColRtlWatch = (): void => {
+  if (!this.gridScrollEl || this.colRtlObserverEl === this.gridScrollEl || typeof MutationObserver !== 'function') return;
+  if (this.colRtlObserver) this.colRtlObserver.disconnect();
+  this.colRtlObserver = new MutationObserver(() => {
+    if (this.colVirtualizer) this.colVirtualizer.setOptions({
+      ...this.colVirtualizer.options,
+      isRtl: this.isColRtl()
+    });
+  });
+  this.colRtlObserver.observe(this.gridScrollEl, {
+    attributes: true,
+    attributeFilter: ['dir']
+  });
+  this.colRtlObserverEl = this.gridScrollEl;
+};
+
+  // teardownColRtlWatch(): exported so the DataTable host disconnects the observer alongside
+  // colVirtualizerCleanup() in $onUnmount — mirrors virtual-core's own _didMount()/teardown
+  // discipline for the ResizeObserver it manages internally. No-op if never attached.
+  teardownColRtlWatch = (): void => {
+  if (this.colRtlObserver) this.colRtlObserver.disconnect();
+  this.colRtlObserver = null;
+  this.colRtlObserverEl = null;
+};
+
+  columnVirtualizerOptions = (): any => {
+  this.ensureColRtlWatch();
+  return {
+    count: this.columnCount(),
+    getScrollElement: () => this.gridScrollEl,
+    estimateSize: (i: any) => this.columnSize(i),
+    horizontal: true,
+    isRtl: this.isColRtl(),
+    observeElementRect,
+    observeElementOffset,
+    scrollToFn: elementScroll,
+    measureElement,
+    overscan: this.COL_OVERSCAN,
+    onChange: () => {
+      this._windowVer.value = this._windowVer.value + 1;
+    }
+  };
+};
+
+  // ══ Phase 87 87-07 (D-15/D-18) — content-driven auto-measure: the shared engine's FIRST
+  // mutable top-level state. Hoisted to `useRef` PER-INSTANCE by the React emitter's
+  // hoistModuleLet — the SAME mechanism already load-bearing for `table`, `virtualizer`,
+  // `remeasurePending`, and `gridScrollEl` in the DataTable host (Task 1's confirmed
+  // precedent), so two DataTable instances on one page never share an accumulator
+  // (T-87-07-04). measuredRowTotal/measuredRowCount together give the running MEAN of every
+  // row folded in so far; lastFedRowEstimate is the estimate value most recently pushed into
+  // virtual-core (the hysteresis comparison baseline). ══
+  measuredRowTotal = 0;
+
+  measuredRowCount = 0;
+
+  lastFedRowEstimate = 0;
+
+  // foldedRowHeights: dedupe map (full-model row index -> its last-folded height) so a row
+  // measured TWICE (e.g. scrolled back into view) UPDATES the running mean rather than being
+  // added a second time (T-87-07-03) — a skewed mean produces a lying scrollbar, the exact
+  // defect this feature exists to remove.
+  foldedRowHeights: Record<number, number> = {};
+
+  // ══ Gap-closure 87-10 — windowVerBumpPending / bumpWindowVer(): coalesce EVERY $data.windowVer
+  // write behind a SINGLE microtask-deferred increment, regardless of how many callers request
+  // one within the same synchronous JS task. ══
+  //
+  // ROOT CAUSE (framework-agnostic; the Solid-specific symptom this closes only EXPOSES it) —
+  // confirmed by instrumenting the installed @tanstack/virtual-core@3.17.1 source directly
+  // (dist/esm/index.js), not by reasoning abstractly: virtual-core's resizeItem() calls
+  // `this.notify(false)` — synchronously invoking `virtualizerOptions().onChange` below — EVERY
+  // TIME a measured row's real size differs from its cached one (`delta !== 0`), independent of
+  // framework (dist/esm/index.js:836-874). remeasureWindow()'s CR-01 sweep
+  // (packages/ui/data-table/src/virtualization.rzts) measures EVERY currently-rendered `<tr>` in
+  // ONE for-loop BEFORE calling afterRowRemeasure() (refineRowEstimate() below) — so a single
+  // synchronous JS task (e.g. the very first measurement pass, which transitions N never-before-
+  // measured rows from the flat seed to their real heights) can fire onChange, and therefore an
+  // UNCOALESCED `$data.windowVer = $data.windowVer + 1`, MANY times in a row — well BEFORE
+  // refineRowEstimate()'s own fold-then-re-feed (which runs only AFTER that loop finishes) has
+  // folded those same measurements into the running mean or re-fed the converged estimate into
+  // virtual-core via setOptions(). A live trace of this exact sequence (instrumented resizeItem/
+  // getMeasurements calls, DataTableColumnVirtualDemo, autoMeasure on) showed Vue batching 3
+  // resizeItem calls before its ONE downstream re-render reads getMeasurements() — already
+  // reflecting the fully-folded, re-fed state — versus Solid re-running its padTop()/padBottom()
+  // effects SYNCHRONOUSLY and IMMEDIATELY on EVERY individual windowVer write (11 interleaved
+  // resize-then-immediate-recompute pairs, each recompute happening mid-sweep, before
+  // refineRowEstimate() had run even once). React/Vue/Svelte/Angular/Lit all batch their own
+  // reactivity to at least a microtask boundary, so their downstream reads land AFTER the whole
+  // synchronous burst (measurement sweep + fold + re-feed) completes — accidentally correct, not
+  // correct by construction. Solid does not auto-batch a signal write made from outside a
+  // Solid-owned event/effect context, so it is the one target where the mid-burst TORN read is
+  // externally observable. Because `setOptions()` + `_willUpdate()` alone do NOT invalidate
+  // virtual-core's own `getMeasurements()` memo (keyed on itemSizeCacheVersion /
+  // getMeasurementOptions() — never on the estimateSize FUNCTION reference itself; confirmed from
+  // the same installed source, dist/esm/index.js:585-587,624), Solid's LAST such mid-sweep
+  // recompute is also the LAST time getMeasurements() is ever invoked for that sweep once no
+  // further row happens to differ from its cache — so the DOM stays frozen on that stale,
+  // pre-fold/pre-re-feed snapshot indefinitely, even though the accumulator itself has already
+  // converged correctly (T-87-07's own confirmed finding).
+  //
+  // FIX: coalesce every requester of a windowVer bump — virtual-core's own onChange AND
+  // refineRowEstimate()'s explicit re-feed bump — behind ONE microtask-deferred write, the SAME
+  // idiom scheduleRemeasure() already uses in virtualization.rzts. This makes the render happen
+  // EXACTLY ONCE, strictly AFTER the entire synchronous burst (including refineRowEstimate()'s
+  // fold + re-feed) on EVERY target, by construction rather than by incidental host-framework
+  // batching. Scoped to the ROW axis only: colVirtualizer never calls resizeItem() at all (D-06 —
+  // column widths come from table-core's getSize() oracle, never measured from the DOM), so
+  // columnVirtualizerOptions()'s onChange cannot hit this burst class and is left untouched.
+  windowVerBumpPending = false;
+
+  bumpWindowVer = (): void => {
+  if (this.windowVerBumpPending) return;
+  this.windowVerBumpPending = true;
+  const flush = () => {
+    this.windowVerBumpPending = false;
+    this._windowVer.value = this._windowVer.value + 1;
+  };
+  // Mirrors scheduleRemeasure()'s own defensive queueMicrotask-with-setTimeout-fallback
+  // (virtualization.rzts) for environments where queueMicrotask is unavailable.
+  if (typeof queueMicrotask !== 'undefined') queueMicrotask(flush);else setTimeout(flush, 0);
+};
+
+  // ESTIMATE_REFEED_DELTA_PX (D-15): the hysteresis threshold gating a re-feed into
+  // virtual-core. Without it, a mean nudging by a fraction of a pixel on every fold would
+  // re-feed on every window commit — the T-87-07-01 DoS control, paired with virtual-core's
+  // own measureElement/resizeItem idempotence (see refineRowEstimate() below).
+  ESTIMATE_REFEED_DELTA_PX = 4;
+
+  // estimateRowSize(i) (D-15/D-17): the estimateSize() resolver. MUST check !autoMeasureOn()
+  // FIRST so the off path touches zero accumulator state and returns $props.estimateRowHeight
+  // verbatim (D-17's byte-behavioral no-op). The zero-measurements case (first paint,
+  // regardless of autoMeasure) still returns the seed — the very first render has nothing
+  // measured yet either way (D-15).
+  estimateRowSize = (i: number): number => {
+  if (!this.autoMeasureOn()) return this.estimateRowHeight;
+  if (this.measuredRowCount === 0) return this.estimateRowHeight;
+  return Math.round(this.measuredRowTotal / this.measuredRowCount);
+};
+
+  // foldMeasuredRow(index, height): fold ONE measured row's height into the running-mean
+  // accumulator, UPDATING (not double-adding) an already-folded index (T-87-07-03).
+  foldMeasuredRow = (index: number, height: number): void => {
+  const prev = this.foldedRowHeights[index];
+  if (prev === height) return;
+  if (prev == null) {
+    this.measuredRowTotal = this.measuredRowTotal + height;
+    this.measuredRowCount = this.measuredRowCount + 1;
+  } else {
+    this.measuredRowTotal = this.measuredRowTotal - prev + height;
+  }
+  this.foldedRowHeights[index] = height;
+};
+
+  // refineRowEstimate() (D-15/D-16, Phase 87 87-07): the shared engine's post-measurement
+  // orchestration, called via the host's afterRowRemeasure hook (see the HOST CONTRACT note
+  // above for why this is never called directly FROM virtualization.rzts). Folds every
+  // CURRENTLY RENDERED row's REAL measurement (from virtual-core's own getMeasurements() —
+  // never a DOM read), then hysteresis-gates a re-feed into virtual-core, reusing the EXACT
+  // `virtualizer.scrollState` bail remeasureWindow() already applies (T-87-07-02) rather than
+  // inventing a second gating mechanism, and finally (Task 3, D-16) anchor-corrects scrollTop
+  // around the re-feed so the row under the user's eye does not visibly lurch. Entirely a
+  // no-op when !autoMeasureOn() — the off path never folds a measurement, touches
+  // lastFedRowEstimate, or adjusts scrollTop (D-17).
+  refineRowEstimate = (): void => {
+  if (!this.autoMeasureOn() || !this.virtualizer) return;
+  const items = this.virtualizer.getVirtualItems();
+  const measurements = this.virtualizer.getMeasurements();
+  for (let i = 0; i < items.length; i++) {
+    const idx = items[i].index;
+    const m = measurements && measurements[idx];
+    if (m) this.foldMeasuredRow(idx, m.size);
+  }
+  // T-87-07-02: never re-feed while a PROGRAMMATIC scroll is in flight — the exact bail
+  // remeasureWindow() already applies (virtualizer.scrollState is non-null only during
+  // scrollToIndex/scrollToOffset).
+  if (this.virtualizer.scrollState) return;
+  const est = this.estimateRowSize(0);
+  if (Math.abs(est - this.lastFedRowEstimate) < this.ESTIMATE_REFEED_DELTA_PX) return;
+  // D-16 anchor capture: the topmost rendered row's full-model index + its CURRENT offset,
+  // taken from virtual-core's own measurements (never a getBoundingClientRect() layout read
+  // — slower, and inconsistent with the measurements the spacer math already uses) — taken
+  // BEFORE the re-feed so the correction below can compute exactly the delta the re-feed
+  // itself introduces. Not restricted to scroll offset 0 (D-16 explicit): a table restored
+  // mid-scroll, or whose content changes height after scrolling, must refine too.
+  const anchorIndex = items.length ? items[0].index : -1;
+  const anchorStart = items.length ? items[0].start : 0;
+  this.virtualizer.setOptions(this.virtualizerOptions());
+  this.virtualizer._willUpdate();
+  this.lastFedRowEstimate = est;
+  // D-16 anchor correction: read the SAME index's fresh measurement post-re-feed and adjust
+  // scrollTop by the delta so the row under the user's eye stays visually put. Guarded by
+  // the SAME path the re-feed itself is gated on (autoMeasureOn() && scrollState === null,
+  // both already checked above), so it can never fight a programmatic scroll (T-87-07-02).
+  if (anchorIndex >= 0 && this.gridScrollEl) {
+    const freshMeasurements = this.virtualizer.getMeasurements();
+    const fresh = freshMeasurements && freshMeasurements[anchorIndex];
+    if (fresh) {
+      const delta = fresh.start - anchorStart;
+      if (delta !== 0) this.gridScrollEl.scrollTop = this.gridScrollEl.scrollTop + delta;
+    }
+  }
+  // Explicit windowVer bump (87-07, Rule 1): virtual-core's own setOptions()+_willUpdate()
+  // re-feed above does NOT itself invoke notify()/onChange (confirmed from the installed
+  // source: _willUpdate() is a no-op once `scrollElement` is already set, dist/esm/
+  // index.js:389-393), so a re-feed needs its own explicit trigger to make the spacer
+  // re-derivation happen at all. Routed through bumpWindowVer() (87-10, see its own comment
+  // above) rather than a raw `$data.windowVer = $data.windowVer + 1` — coalescing this bump
+  // with any onChange-triggered ones already pending from the SAME synchronous sweep is what
+  // 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();
+};
+
   // The FULL virtualizer options. virtual-core's setOptions REPLACES options with
   // `{ ...defaults, ...opts }` (it does NOT merge with prior options — verified in the 3.17.1
   // source), so the re-feed MUST pass the complete set, exactly like every TanStack adapter.
   // Returned `any` (the currentState() precedent) so the strict bundled-leaf tsc does not choke
-  // on virtual-core's generic option inference. onChange uses the `$data.x = $data.x + 1`
-  // increment the React emitter lowers to functional setState — correct even from a mount closure.
+  // on virtual-core's generic option inference. onChange's windowVer write is routed through
+  // bumpWindowVer() (87-10) rather than a raw `$data.x = $data.x + 1` — resizeItem() can call
+  // this onChange MANY times in a single synchronous sweep (once per row whose real measured
+  // size differs from its cache, e.g. every never-before-measured row in the FIRST window),
+  // and coalescing those into one microtask-deferred write is what keeps every target's render
+  // landing strictly AFTER the whole sweep (see bumpWindowVer()'s own comment for the confirmed
+  // Solid-specific rendering gap this closes). The React emitter still lowers the underlying
+  // `$data.windowVer = $data.windowVer + 1` to functional setState — correct even deferred to a
+  // microtask, exactly as it was correct from a mount closure before.
   virtualizerOptions = (): any => ({
   count: this.windowSource().length,
   getScrollElement: () => this.gridScrollEl,
-  estimateSize: () => this.estimateRowHeight,
+  estimateSize: (i: any) => this.estimateRowSize(i),
   observeElementRect,
   observeElementOffset,
   scrollToFn: elementScroll,
@@ -2354,7 +3054,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   overscan: 8,
   getItemKey: this.virtualItemKey,
   onChange: () => {
-    this._windowVer.value = this._windowVer.value + 1;
+    this.bumpWindowVer();
     // CR-01: re-observe the freshly-committed window so RECYCLED rows get measured.
     // virtual-core only observe()s a node you explicitly hand to measureElement (it does
     // NOT auto-discover rendered rows — measureElement is the SOLE caller of
@@ -2406,14 +3106,23 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   void this._windowVer.value;
   void this._editVer.value;
   if (!this.virtualizer) {
-    // Virtual OFF → full set (the r-else table never calls this, but keep it total). Virtual ON
-    // but the virtualizer is not yet constructed (pre-$onMount first paint) → render NOTHING so
-    // the template never dereferences a null `vi` (the windowed bindings read wr.vi.index); the
-    // rows appear on the first onChange after _didMount.
-    if (!this.virtual) {
+    // Rows OFF (Phase 87 D-04: this now includes the colsWindowed()-only path, since the
+    // wrapper template is entered whenever isWindowed(), not just rowsWindowed() — the row
+    // virtualizer is never constructed when only the column axis is windowed, D-04) → the FULL
+    // set, with a SYNTHETIC `vi.index` set to each row's array position (matching rowIndexOf's
+    // own `$data.rows.indexOf(row)` semantics exactly, since $data.rows IS windowSource()'s
+    // output here). Every windowed body binding reads wr.vi.index (data-row, aria-rowindex,
+    // colIndexOf, isEditing, the fill handle) — a bare `null` there is a hard crash the moment
+    // this branch is reached with the wrapper mounted, which colsWindowed()-only now does.
+    // Row-virtual ON but the virtualizer is not yet constructed (pre-$onMount first paint) →
+    // render NOTHING so the template never dereferences a not-yet-real `vi`; the rows appear on
+    // the first onChange after _didMount.
+    if (!this.rowsWindowed()) {
       const rowList = this._rows.value || [];
-      return rowList.map((r: any) => ({
-        vi: null,
+      return rowList.map((r: any, i: any) => ({
+        vi: {
+          index: i
+        },
         row: r
       }));
     }
@@ -2470,7 +3179,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // and re-derives on the pin/unpin transition (the D-02 spacer subtraction below).
   void this._windowVer.value;
   void this._editVer.value;
-  if (!this.virtual || !this.virtualizer) return 0;
+  if (!this.rowsWindowed() || !this.virtualizer) return 0;
   const items = this.virtualizer.getVirtualItems();
   let pad = items.length ? items[0].start : 0;
   // D-02 spacer subtraction: when the pinned editing row sits ABOVE the window it is rendered
@@ -2491,7 +3200,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // on pin/unpin.
   void this._windowVer.value;
   void this._editVer.value;
-  if (!this.virtual || !this.virtualizer) return 0;
+  if (!this.rowsWindowed() || !this.virtualizer) return 0;
   const items = this.virtualizer.getVirtualItems();
   if (!items.length) return 0;
   let pad = this.virtualizer.getTotalSize() - items[items.length - 1].end;
@@ -2525,12 +3234,141 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // rowIsOutsideWindow(r): is the full-model row index r absent from the currently rendered
   // window? Used by the scroll-then-focus seam (req-5 — scroll a far row in before focusing).
   rowIsOutsideWindow = (r: any) => {
-  if (!this.virtual || !this.virtualizer) return false;
+  if (!this.rowsWindowed() || !this.virtualizer) return false;
   const items = this.virtualizer.getVirtualItems();
   for (const it of items as any) if (it.index === r) return false;
   return true;
 };
 
+  // ══ Phase 87 87-04 — the column-axis analogs of windowedRows()/padTop()/padBottom()/
+  // rowIsOutsideWindow() above. The column axis has no "row-shaped" identity to carry alongside
+  // a VirtualItem (a column is not a full-model object the way a row is), so windowedColIndices()
+  // returns bare ABSOLUTE leaf-column indices; the template resolves each index back to a header/
+  // cell through the host's own header-group / visibleCellsFor lookups (D-08/D-09). ══
+  // windowedColIndices(): the ordered array of ABSOLUTE leaf-column indices to render.
+  windowedColIndices = () => {
+  // SUBSCRIBE FIRST (the windowedRows() discipline): colVirtualizer is a non-reactive `let`,
+  // null at first render, so a $data.windowVer read placed BELOW the guards below would mean
+  // Solid's <For> / Svelte's {#each} accessors never subscribe — the column window would stay
+  // blank forever on exactly those two targets. Also subscribe to editVer (mirrors the row
+  // axis's pin/unpin re-derive — the D-10 forced-column union lands on top of this in 87-05).
+  void this._windowVer.value;
+  void this._editVer.value;
+  if (!this.colsWindowed()) {
+    // Columns OFF (or rows-only windowed) → every absolute index, the degrade-to-full-set
+    // path that keeps the caller (windowedCells / the header loop) axis-agnostic.
+    const n = this.columnCount();
+    const out = [];
+    for (let i = 0; i < n; i++) out.push(i);
+    return out;
+  }
+  // Columns windowed but the column virtualizer is not yet constructed (pre-$onMount first
+  // paint) → render NOTHING, matching windowedRows()'s pre-mount behavior.
+  if (!this.colVirtualizer) return [];
+  const items = this.colVirtualizer.getVirtualItems();
+  const idx = items.map((it: any) => it.index);
+  // D-10 forced-column union (host hook — empty array until 87-05 gives it a real body):
+  // dedupe-then-append any forced index not already in the virtualized window.
+  const forced = this.forcedColumns();
+  for (let i = 0; i < forced.length; i++) {
+    if (idx.indexOf(forced[i]) === -1) idx.push(forced[i]);
+  }
+  // Sorted ascending: the body <td> sequence and the header <th> sequence both follow visual
+  // left-to-right order, and the virtual items + forced union are not guaranteed sorted.
+  idx.sort((a: any, b: any) => a - b);
+  return idx;
+};
+
+  // colPadLeft() / colPadRight() (D-06): the horizontal spacer <td>/<th> widths — the leading
+  // spacer occupies items[0].start, the trailing spacer the gap between the last rendered
+  // item's end and getTotalSize(). Mirrors padTop()/padBottom() exactly, INCLUDING the D-02-style
+  // pin subtraction (87-05): forcedColumns() can return MULTIPLE forced indices (pinned + active +
+  // editing, not just one pin), so each forced index outside the virtual window is checked
+  // individually. A forced column rendered outside the window contributes its OWN real width to
+  // the row (via its <th>/<td>'s own inline width under table-layout:fixed), so that width must
+  // come OUT of the spacer or the row's total overshoots getTotalSize() and the horizontal
+  // scrollbar lengthens on every such scroll. WR-01: decide before/after the window by comparing
+  // the forced INDEX against the window's first/last item INDEX, never by start-OFFSET —
+  // measurement drift makes the offset comparison wrong for the variable-width case (mirrors
+  // padBottom()'s existing WR-01 discipline). A forced column's width is columnSize(i) (the
+  // table-core size oracle, D-06's authoritative source), never a DOM measurement.
+  colPadLeft = () => {
+  void this._windowVer.value;
+  void this._editVer.value;
+  if (!this.colsWindowed() || !this.colVirtualizer) return 0;
+  const items = this.colVirtualizer.getVirtualItems();
+  let pad = items.length ? items[0].start : 0;
+  if (items.length) {
+    const firstIdx = items[0].index;
+    const forced = this.forcedColumns();
+    for (let i = 0; i < forced.length; i++) {
+      if (forced[i] < firstIdx) pad = pad - this.columnSize(forced[i]);
+    }
+  }
+  return pad < 0 ? 0 : pad;
+};
+
+  colPadRight = () => {
+  void this._windowVer.value;
+  void this._editVer.value;
+  if (!this.colsWindowed() || !this.colVirtualizer) return 0;
+  const items = this.colVirtualizer.getVirtualItems();
+  if (!items.length) return 0;
+  let pad = this.colVirtualizer.getTotalSize() - items[items.length - 1].end;
+  const lastIdx = items[items.length - 1].index;
+  const forced = this.forcedColumns();
+  for (let i = 0; i < forced.length; i++) {
+    if (forced[i] > lastIdx) pad = pad - this.columnSize(forced[i]);
+  }
+  return pad < 0 ? 0 : pad;
+};
+
+  // colIsOutsideWindow(c): is the absolute leaf-column index c absent from the currently
+  // rendered column window? The column-axis analog of rowIsOutsideWindow(r) (D-12's
+  // scroll-then-focus seam, wired starting 87-06). Gated on colsWindowed() (never a bare prop
+  // truthiness read — the 87-02 prohibition gate).
+  colIsOutsideWindow = (c: any) => {
+  if (!this.colsWindowed() || !this.colVirtualizer) return false;
+  const items = this.colVirtualizer.getVirtualItems();
+  for (const it of items as any) if (it.index === c) return false;
+  return true;
+};
+
+  // afterRowRemeasure (Phase 87 87-07, D-15): a mutable-`let` indirection so
+  // virtualization.rzts's remeasureWindow() (a relative-partial CONST, textually EARLIER
+  // than windowing.rzts in the merged per-target output) can trigger the shared engine's
+  // post-measurement fold + hysteresis re-feed (refineRowEstimate(), windowing.rzts) without
+  // calling a bare-specifier-partial CONST directly — the exact forward-reference TDZ class
+  // remeasureColumnWindow()'s own comment below documents for columnVirtualizerOptions(). A
+  // mutable `let` hoists to `useRef` on React and never enters a useCallback's dependency
+  // array, sidestepping the hazard there.
+  //
+  // DECLARED HERE — a plain top-level statement placed AFTER both import lines above, NOT
+  // grouped with the other windowing `let`s near the top of this file, and NOT deferred into
+  // $onMount. Two Rule-1 bugs were found and fixed in this exact spot this task, both via the
+  // VR suite:
+  //   (a) A top-level `let X = refineRowEstimate` placed BEFORE the import statements (where
+  //       the other windowing `let`s live) reads a windowing.rzts symbol at its OWN
+  //       declaration's evaluation time. React's own emitter re-groups DataTable.rozie's
+  //       entire top-level script AFTER both inlined partials regardless of source position,
+  //       so it tolerated that placement — but Vue/Svelte/Solid/Angular/Lit splice each
+  //       partial's content at its IMPORT STATEMENT's source position, so a `let` positioned
+  //       BEFORE the import genuinely executes before `refineRowEstimate` exists:
+  //       `ReferenceError: Cannot access 'refineRowEstimate' before initialization`. Moving the
+  //       declaration to AFTER the windowing.rzts import fixes every non-React target — the
+  //       splice has already run by this point in the source.
+  //   (b) Deferring the assignment into $onMount instead (`afterRowRemeasure = refineRowEstimate`
+  //       inside the mount body, mirroring `refreshRowModel`) fixed (a) but broke REACT: it
+  //       triggered the react emitter's mount-referenced-helper stable-ref synthesis for
+  //       `refineRowEstimate` (a NEW code path for a plain script helper, not the `$computed`
+  //       case that mechanism was built for), producing a genuine
+  //       `ReferenceError: Cannot access '...' before initialization` in the component's
+  //       render body. Reverted; the emitter path itself is out of this plan's scope.
+  // This placement (top-level, immediately after the windowing.rzts import) is therefore the
+  // ONE spot that is simultaneously safe for React (unaffected by source position) and every
+  // other target (past the import-position splice).
+  afterRowRemeasure = this.refineRowEstimate;
+
   // ── Sort/filter live-announcement (#14) ─────────────────────────────────────────────
   // A polite aria-live announcement whenever the consumer changes sorting or filtering, so a
   // screen-reader user hears that the rows were reordered / narrowed (which is otherwise silent).
@@ -2740,10 +3578,18 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   // Template helpers reading the resolved column-def metadata by id (plain fns — used
   // in template predicates + interpolation; uniform on all 6, no $computed alias trap).
+  // B1 (quick 260906-afh): reads the O(1) def-lookup index (defIndex(), columnBuilders.rzts)
+  // instead of linearly scanning columnDefs() — which only ever held TOP-LEVEL entries, so a
+  // NESTED group leaf (a `columns:` group child) was invisible to every caller (headerLabel,
+  // columnIsFilterable, editMetaOf/columnEditable/editorTypeOf/editorOptionsOf) and silently
+  // took the "no def" fallback. defIndex() resolves both top-level AND nested leaf ids. This
+  // also removes the per-cell O(N) scan D-23 left in place — defIndex() is memoized in the
+  // SAME cache-invalidation block as columnDefs() itself, never rebuilt per call.
   defFor = (colId: any) => {
-  const defs = this.columnDefs();
-  for (const d of defs as any) if (d.id === colId) return d;
-  return null;
+  if (colId == null) return null;
+  const idx = this.defIndex();
+  const d = idx[String(colId)];
+  return d != null ? d : null;
 };
 
   // Per-row visible cells for the body loop. table-core memoizes row objects by id,
@@ -3105,6 +3951,15 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // rowIsGrouped: this flattened row is a group-header row.
   rowIsGrouped = (row: any) => !!(this.tick() >= 0 && row && row.getIsGrouped && row.getIsGrouped());
 
+  // rowIndexIsGrouped (quick 260906-cvo, C1/C2): THE single row-level editability/writability
+  // predicate — a group-header row is a SYNTHETIC row whose `original` is table-core's
+  // `leafRows[0].original` (the same fact cellSlotRow's header comment documents), so any
+  // edit or bulk write resolved through it silently lands on an UNRELATED record. Every edit/
+  // write guard in this component calls THIS predicate — never a re-implemented inline
+  // `getIsGrouped()` check — so the invariant has one definition. Indexes into the SAME
+  // `$data.rows` flattened row list rowIsGrouped reads.
+  rowIndexIsGrouped = (rowIndex: any) => this.rowIsGrouped((this._rows.value || [])[rowIndex]);
+
   // groupingActive: grouping is currently engaged (a non-empty ordered key list). Drives the
   // data-group-leaf marker so it is ABSENT when ungrouped (byte-identical-off, req-10).
   groupingActive = () => this.tick() >= 0 && (this.currentState().grouping || []).length > 0;
@@ -3117,34 +3972,119 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   cellIsAggregated = (cellCtx: any) => !!(this.tick() >= 0 && cellCtx && cellCtx.getIsAggregated && cellCtx.getIsAggregated());
 
-  // cellIsPlaceholder: a PLACEHOLDER cell on a group-header row — a non-grouped, non-aggregated
-  // cell that table-core fills with the FIRST leaf row's value (cell.getValue() leaks e.g.
-  // "Services"/"Edsger Dijkstra" onto the group line). Renders BLANK via a dedicated empty
-  // template branch so the leaked leaf value never paints. Tick-gated exactly like cellIsGrouped
-  // so the group chrome re-derives on a re-pull on the fine-grained targets (Solid/Lit).
+  // cellIsPlaceholder: VERIFIED against @tanstack/table-core@8.21.3 (ColumnGrouping.js:120-121,
+  // quick 260906-afh premise correction). A placeholder cell is a cell IN A GROUPING COLUMN
+  // that is NOT the row's OWN grouping column — `!cell.getIsGrouped() && column.getIsGrouped()`.
+  // That is true both on a group-header row (for every OTHER grouping column) and on every leaf
+  // row (for every grouping column) — it is NOT "never true on a group-header row" and it is NOT
+  // "any non-grouped, non-aggregated cell". The operative consequence for this component: a
+  // placeholder can only EVER be a grouping-column cell, so this branch can never reach a
+  // non-grouping column — it does NOT and CANNOT guard the AGGREGATED-cell `row` leak
+  // (cellSlotRow, below) fixes. Where it DOES apply (e.g. under multi-level grouping, the
+  // OTHER grouping column on a group-header row), table-core still fills cell.getValue() with
+  // the FIRST leaf row's value (cell.getValue() leaks e.g. "Oslo" onto a region-level group
+  // line whose grouping is 'region', not 'city'); this branch renders BLANK via a dedicated
+  // empty template so that leaked value never paints. Tick-gated exactly like cellIsGrouped so
+  // the group chrome re-derives on a re-pull on the fine-grained targets (Solid/Lit).
   cellIsPlaceholder = (cellCtx: any) => !!(this.tick() >= 0 && cellCtx && cellCtx.getIsPlaceholder && cellCtx.getIsPlaceholder());
 
-  // groupSubRowCount: the number of underlying LEAF RECORDS under a group-header row (the count
-  // shown in the header, e.g. "North (40)"). row.subRows is the IMMEDIATE members — for MULTI-LEVEL
-  // grouping those are sub-GROUPS, not records, so "North" with 2 categories / 40 records would show
-  // "North (2)". getLeafRows() returns all leaf descendants (the actual record count); keep the
-  // subRows fallback for safety. Single-level grouping is unchanged (getLeafRows == subRows when the
-  // children are already leaves).
-  groupSubRowCount = (row: any) => row && row.getLeafRows ? row.getLeafRows().length : row && row.subRows ? row.subRows.length : 0;
+  // groupSubRowCount: the number of underlying TRUE LEAF RECORDS under a group-header row (the
+  // count shown in the header, e.g. "North (40)"). row.subRows is the IMMEDIATE members — for
+  // MULTI-LEVEL grouping those are sub-GROUPS, not records, so "North" with 2 categories / 40
+  // records would show "North (2)" off subRows alone. row.getLeafRows() is table-core's
+  // `flattenBy(row.subRows, d => d.subRows)` (ColumnGrouping.js / utils.js, verified against
+  // @tanstack/table-core@8.21.3) — it pushes EVERY node it walks, INCLUDING intermediate group
+  // nodes, so under multi-level grouping it over-counts by exactly the number of sub-group
+  // nodes between the row and its true leaves (C4, quick 260906-cvo: North with 2 city
+  // sub-groups + 3 records reported 5, not 3). `row.getIsGrouped()` is `!!row.groupingColumnId`
+  // — precisely the predicate that separates a group node from a real record — so filter the
+  // flattened list on it rather than hand-rolling a recursive `subRows` walk (getLeafRows()
+  // already flattens; the defect is purely that it does not filter). Single-level grouping is
+  // numerically UNCHANGED: a leaf row has no `subRows`, so no node was ever miscounted there.
+  groupSubRowCount = (row: any) => {
+  if (row && row.getLeafRows) {
+    const leaves = row.getLeafRows();
+    let n = 0;
+    for (let i = 0; i < leaves.length; i++) {
+      const r = leaves[i];
+      if (!(r && r.getIsGrouped && r.getIsGrouped())) n = n + 1;
+    }
+    return n;
+  }
+  return row && row.subRows ? row.subRows.length : 0;
+};
+
+  // ── B2 (quick 260906-afh) — group-header row #cell slot descriptor ─────────────────────
+  // PROBLEM: table-core builds a flattened group-header row via
+  // `createRow(table, id, leafRows[0].original, …)` (getGroupedRowModel.js), so `row.original`
+  // on a group row IS the FIRST LEAF's record. The #cell scoped slot's existing 4 call sites
+  // all bound `:row="row.original"` (or `wr.row.original`), so an AGGREGATED cell (a
+  // non-grouping column on a group row — cellIsGrouped()===false, cellIsPlaceholder()===false,
+  // so it takes the #cell r-else branch, same as any ordinary leaf cell) silently handed a
+  // consumer template the WRONG record's fields (T-AFH-05). The grouped cell itself (the
+  // group's own column, .rdt-group-value) has the same #cell binding and the same leak.
+  //
+  // FIX: `cellSlotRow(row)` returns a STABLE GROUP DESCRIPTOR — never `row.original` — for a
+  // group-header row, and `row.original` unchanged for every other row. The descriptor is an
+  // OBJECT, never `null` (T-AFH-06 — a consumer already reading `row.foo` would throw on
+  // Vue/Angular if handed null).
+  //
+  // Descriptor cache (T-AFH-02/T-AFH-04): a null-prototype map keyed on `String(row.id)`,
+  // invalidated wholesale whenever `$data.rowModelVer` (bumped by every refreshRowModel, the
+  // SAME reactive re-derivation discipline visibleCellsFor/rowIsGrouped use) differs from the
+  // generation the map was built for — so the descriptor's REFERENCE IDENTITY is stable
+  // across every cell of one group row within a row-model generation (an unstable reference
+  // would thrash the fine-grained targets, Solid/Lit) and refreshed the moment the grouping
+  // changes. Group row ids are built from consumer grouping VALUES, so the map MUST be
+  // null-prototype — a `__proto__` grouping value must not reach Object.prototype.
+  groupRowDescriptorCache: any = null;
+
+  groupRowDescriptorCacheVer: any = undefined;
+
+  groupRowDescriptor = (row: any) => {
+  const ver = this._rowModelVer.value;
+  if (!this.groupRowDescriptorCache || this.groupRowDescriptorCacheVer !== ver) {
+    this.groupRowDescriptorCache = Object.create(null);
+    this.groupRowDescriptorCacheVer = ver;
+  }
+  const key = String(row.id);
+  let d = this.groupRowDescriptorCache[key];
+  if (!d) {
+    const groupingColumnId = row.groupingColumnId != null ? row.groupingColumnId : '';
+    const groupingValue = row.getGroupingValue ? row.getGroupingValue(groupingColumnId) : row.groupingValue;
+    d = {
+      isGroupRow: true,
+      groupId: row.id,
+      groupingColumnId,
+      groupingValue,
+      leafCount: this.groupSubRowCount(row)
+    };
+    this.groupRowDescriptorCache[key] = d;
+  }
+  return d;
+};
+
+  // cellSlotRow: the #cell slot's `:row=` value. A group-header row gets the stable
+  // descriptor above (never the leaked first-leaf record); every other row is unchanged.
+  cellSlotRow = (row: any) => this.rowIsGrouped(row) ? this.groupRowDescriptor(row) : row ? row.original : null;
 
   // groupingKeys: the live ordered grouping array — slot prop for the headless #groupBar + the
   // default styled-token reflection. Reads currentState() ($props.grouping ?? $data.groupingDefault),
   // both reactive sources, so the bar re-renders on a grouping change across all six targets.
   groupingKeys = () => this.currentState().grouping || [];
 
-  // groupableColumns: the data columns OFFERED to the headless #groupBar (those whose Column/config
-  // `groupable` is not false) — `[{ id, label }]`. Excludes the chrome columns (select/expander are
-  // not in columnDefs()). The consumer builds any bar/drag UI from this; the component ships none.
+  // groupableColumns: the data columns OFFERED to the headless #groupBar — `[{ id, label }]`.
+  // Excludes the chrome columns (select/expander are not in columnDefs()). C5+C6 (quick
+  // 260906-cvo): delegates the actual walk to collectGroupableLeafDefs (columnDefUtils.ts) —
+  // a GROUP column (a `columns:` group's own entry) is NEVER offered (it has no accessor and
+  // cannot produce a grouping value, regardless of any `groupable` flag on it), and every
+  // groupable NESTED leaf (a `columns:` group child, opted out via `groupable: false` like any
+  // top-level leaf) IS offered, in declaration order. The consumer builds any bar/drag UI from
+  // this; the component ships none.
   groupableColumns = () => {
   const out = [];
-  const defs = this.columnDefs();
+  const defs = collectGroupableLeafDefs(this.columnDefs());
   for (const d of defs as any) {
-    if (!d || d.groupable === false) continue;
     out.push({
       id: d.id,
       label: d.header != null ? d.header : d.id
@@ -3315,7 +4255,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // or inherited Lit DOM method named getRowIndexRelativeToPage (ROZ121/124/137 clear).
   getRowIndexRelativeToPage = (absRow: any) => {
   const abs = absRow == null ? this.toAbsRow(this._activeRow.value) : Math.trunc(Number(absRow)) || 0;
-  if (this.virtual) return abs;
+  if (this.rowsWindowed()) return abs;
   return abs - this.pageRowOffset();
 };
 
@@ -3334,11 +4274,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // DataTable.rozie) — so DataTable.rozie's $expose references them BY NAME with zero
   // indirection. This file stays the seam for verbs that need a rename/adapter, not a mandatory
   // stop for every $expose entry.
-  // ══ Grid interaction mode (phase 49) — STATE + STRUCTURE only ═══════════════════════════
-  // This plan (02) establishes the gated ARIA roles, the roving single-tab-stop tabindex,
-  // the active-cell index-pair state, the data-* cell markers, and the SINGLE
-  // focusActiveCell() seam. Plan 03 adds the keydown navigation math, the $expose verbs
-  // (focusCell/getActiveCell/clearActiveCell), and the activecell-change event ON TOP.
   // interactionMode gate. 'grid' lights up roving nav; 'table' (default) is byte-behaviorally
   // identical to phase 48 (roles fall back to the literals, tabindex drops).
   isGrid = () => this.interactionMode === 'grid';
@@ -3374,7 +4309,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // isGrid()-gated (the active-cell API is grid-only); pageIndex()/pageSize() read live table-core
   // state through the reactive tick (filterPaginationRowChrome), so this re-derives on a page change.
   pageRowOffset = () => {
-  if (!this.isGrid() || this.virtual) return 0;
+  if (!this.isGrid() || this.rowsWindowed()) return 0;
   return this.pageIndex() * this.pageSize();
 };
 
@@ -3388,7 +4323,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // In virtual mode $data.rows IS the full pre-pagination model (bodyRowCount suffices); in the
   // non-virtual paginated body $data.rows is only the page slice, so read the live model.
   prePaginationRowCount = () => {
-  if (!this.table || this.virtual) return this.bodyRowCount();
+  if (!this.table || this.rowsWindowed()) return this.bodyRowCount();
   const pm = this.table.getPrePaginationRowModel();
   return pm && pm.rows ? pm.rows.length : this.bodyRowCount();
 };
@@ -3494,24 +4429,37 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // here returns the PRE-write value, resolving focus to the BODY cell instead of the
   // header. Callers pass the fresh isHeader local; falls back to $data when omitted.
   const header = nextIsHeader == null ? this._activeIsHeader.value : nextIsHeader;
-  // ── phase 53 scroll-then-focus (D-12): when windowing AND the target body row is OUTSIDE the
-  // rendered window, scroll it in first, then defer focus to AFTER the new window commits (the
-  // double-rAF — a single rAF can fire before React's async commit, Pitfall 4). Header cells and
-  // in-window rows keep the synchronous path below (table-mode / non-windowed stay byte-stable).
-  // The guard reads the resolved `header` (NOT the raw `nextIsHeader`) so an omitted-arg call
-  // while a header cell is active falls back to $data.activeIsHeader and skips the scroll path.
-  if (this.virtual && this.virtualizer && !header && this.rowIsOutsideWindow(r)) {
-    this.virtualizer.scrollToIndex(r, {
+  // ── phase 53 scroll-then-focus (D-12): when windowing AND the target body row and/or column
+  // is OUTSIDE the rendered window, scroll it in first, then defer focus to AFTER the new
+  // window commits (the double-rAF — a single rAF can fire before React's async commit, Pitfall
+  // 4). Header cells and fully in-window cells keep the synchronous path below (table-mode /
+  // non-windowed stay byte-stable). The guard reads the resolved `header` (NOT the raw
+  // `nextIsHeader`) so an omitted-arg call while a header cell is active falls back to
+  // $data.activeIsHeader and skips the scroll path.
+  // Phase 87 87-06 (D-12): widened to the SECOND axis — colIsOutsideWindow(c)/colsWindowed()
+  // mirror rowIsOutsideWindow(r)/rowsWindowed() exactly (both landed in windowing.rzts in
+  // 87-04). Either axis being out triggers the scroll+poll; both scrollToIndex calls fire when
+  // 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).
+  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, {
+      align: 'center'
+    });
+    if (colOut) this.colVirtualizer.scrollToIndex(c, {
       align: 'center'
     });
     // Bounded rAF-poll-until-cell-present (D-12): scrollToIndex → virtual-core onChange → windowVer
-    // bump → the framework commits the scrolled-in row. On React that commit is async (setState →
-    // reconcile) and for a far scroll (e.g. row 4000) spans several frames — a one-shot double-rAF
-    // fires BEFORE resolveCellEl can find the cell, so focus is silently lost (the deterministic
-    // React off-window-focus failure). Poll resolveCellEl for up to ~30 frames: the five
-    // fast-committing targets resolve on the first attempt (behavior unchanged), React retries
-    // across the few frames its async commit needs. The poll ONLY focuses (never measures), so it
-    // cannot re-introduce the remeasure-vs-scroll fight. Inside the $props.virtual guard only.
+    // bump → the framework commits the scrolled-in row/column. On React that commit is async
+    // (setState → reconcile) and for a far scroll (e.g. row 4000, or col 55 on a 60-col table)
+    // spans several frames — a one-shot double-rAF fires BEFORE resolveCellEl can find the cell,
+    // so focus is silently lost (the deterministic React off-window-focus failure). Poll
+    // resolveCellEl for up to ~30 frames: the five fast-committing targets resolve on the first
+    // attempt (behavior unchanged), React retries across the few frames its async commit needs.
+    // The poll ONLY focuses (never measures), so it cannot re-introduce the remeasure-vs-scroll
+    // fight. Inside the rowOut||colOut guard only.
     let focusAttempts = 0;
     // #9: capture the epoch AFTER this call's own bump (above) so the poll never aborts itself
     // (its captured value equals the current epoch). A LATER focusActiveCell / focusCell /
@@ -3603,8 +4551,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   bodyRowCount = () => (this._rows.value || []).length;
 
-  clamp = (v: any, lo: any, hi: any) => v < lo ? lo : v > hi ? hi : v;
-
   // ── Multi-level (grouped) header addressing (B12) ──────────────────────────────────────
   // $data.headerGroups is ordered top→bottom; the LEAF header row (the one adjacent to the
   // body) is the LAST group. The roving active-header state carries activeHeaderLevel (the
@@ -3689,7 +4635,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // phantom cell past that level's headers. Body cells + the leaf header level keep visibleColCount().
   const count = this._activeIsHeader.value ? this.headerCountAtLevel(this._activeHeaderLevel.value) : this.visibleColCount();
   const max = count - 1;
-  const nextCol = this.clamp(this._activeColIndex.value + delta, 0, max < 0 ? 0 : max);
+  const nextCol = clamp(this._activeColIndex.value + delta, 0, max < 0 ? 0 : max);
   this._activeColIndex.value = nextCol;
   return nextCol;
 };
@@ -3734,7 +4680,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
       // (delta-1) continues the descent, so PageDown (delta=GRID_PAGE_STEP) lands a real
       // page-down body row, NOT row 0 (== ArrowDown). ArrowDown (delta=1) still lands row 0
       // (delta-1 = 0); clamped to the page-last body row.
-      const landRow = this.clamp(delta - 1, 0, maxRow);
+      const landRow = clamp(delta - 1, 0, maxRow);
       this._activeIsHeader.value = false;
       this._activeRow.value = landRow;
       return {
@@ -3779,7 +4725,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
       level: leafLevel
     };
   }
-  const nextRow = this.clamp(this._activeRow.value + delta, 0, maxRow);
+  const nextRow = clamp(this._activeRow.value + delta, 0, maxRow);
   this._activeRow.value = nextRow;
   this._activeIsHeader.value = false;
   return {
@@ -3847,19 +4793,12 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   return this.resolveCellEl(rowKey, this._activeColIndex.value, this._activeIsHeader.value ? this._activeHeaderLevel.value : null);
 };
 
-  // The focusable descendants of a cell (non-disabled), in DOM order. Pure DOM — uniform ×6.
-  focusables = (cellEl: any) => {
-  if (!cellEl || !cellEl.querySelectorAll) return [];
-  const list = Array.prototype.slice.call(cellEl.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'));
-  return list.filter((n: any) => !n.disabled);
-};
-
   // 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.
   enterControl = () => {
   const cellEl = this.currentCellEl();
-  const list = this.focusables(cellEl);
+  const list = focusables(cellEl);
   if (!list.length) return;
   this._activeInControl.value = true;
   list[0].focus();
@@ -3870,7 +4809,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // activeElement read: gridRoot.getRootNode().activeElement is the UNIFORM correct read on
   // ALL SIX (document in light DOM; the shadow root on Lit). Reuse verbatim — do NOT re-derive.
   cycleWithinCell = (cellEl: any, forward: any) => {
-  const list = this.focusables(cellEl);
+  const list = focusables(cellEl);
   if (!list.length) return;
   const active = this.gridRoot ? this.gridRoot.getRootNode().activeElement : null;
   const cur = list.indexOf(active);
@@ -4157,11 +5096,18 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     return;
   }
   // ── C2 (phase 63 wave-8): Enter on a GROUP-HEADER cell toggles that group's collapse/
-  // expand (APG treegrid). A group cell is NON-editable (isActiveCellEditable=false, the
-  // verified invariant) so it never hits the edit branches above and would otherwise fall to
-  // enterControl() — which merely FOCUSES the group-toggle button (requiring a second key).
-  // Route it to the SAME onToggleExpand path the chevron uses (group rows ride the expand
-  // model) so one Enter toggles the group. Body cells only (a header-active Enter is unchanged);
+  // expand (APG treegrid). C1 (quick 260906-cvo) CORRECTION: the comment here used to claim
+  // "a group cell is non-editable" as "the verified invariant" — that was FALSE AS WRITTEN.
+  // It held only for the grouping column's OWN cell (cellIsGrouped's branch renders before
+  // the editor branch); a non-grouping EDITABLE column's cell on a group row fell straight
+  // through the branch chain to isEditing(...) and opened an editor (the C1 defect this
+  // quick task closed). What is now TRUE, and WHY: isActiveCellEditable() carries an
+  // explicit rowIndexIsGrouped(...) row guard (filterPaginationRowChrome.rzts), so EVERY
+  // editable column's cell on a group row is non-editable — that is what makes the four
+  // edit-entry branches above fall through to this one, not an incidental property of the
+  // grouping column alone. Route it to the SAME onToggleExpand path the chevron uses (group
+  // rows ride the expand model) so one Enter toggles the group. Body cells only (a
+  // header-active Enter is unchanged);
   // ($data.rows || [])[$data.activeRow] is the active flattened row (page-relative non-virtual /
   // full-model virtual — both index $data.rows). Placed BEFORE the reserved enterControl branch.
   else if (key === 'Enter' && !this._activeIsHeader.value && this.rowIsGrouped((this._rows.value || [])[this._activeRow.value])) {
@@ -4515,7 +5461,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     }
   }
   const maxCol = colN - 1;
-  const col = this.clamp(this._activeColIndex.value, 0, maxCol < 0 ? 0 : maxCol);
+  const col = clamp(this._activeColIndex.value, 0, maxCol < 0 ? 0 : maxCol);
   if (col !== this._activeColIndex.value) this._activeColIndex.value = col;
   // B6: an empty / all-filtered grid has NO body cell to hold the active cell. Park the active
   // cell on the leaf-header fallback (col 0) so the roving tab-stop stays on a REAL cell (never
@@ -4550,7 +5496,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   if (!this._activeIsHeader.value) {
     const lastRow = rowN - 1;
     const maxRow = lastRow < 0 ? 0 : lastRow;
-    const row = this.clamp(this._activeRow.value, 0, maxRow);
+    const row = clamp(this._activeRow.value, 0, maxRow);
     if (row !== this._activeRow.value) this._activeRow.value = row;
   }
   // B8: clamp the range-selection corners to the same FRESH bounds (a sort/filter/paginate that
@@ -4561,12 +5507,81 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // when the shrink removed the focused cell. The target is the DOOMED cell's own coords clamped
   // into the fresh bounds (React-stale-safe — see the doomedRow/doomedCol note above).
   if (recoverFocus) {
-    const recRow = this.clamp(doomedRow, 0, rowN - 1);
-    const recCol = this.clamp(doomedCol, 0, maxCol < 0 ? 0 : maxCol);
+    const recRow = clamp(doomedRow, 0, rowN - 1);
+    const recCol = clamp(doomedCol, 0, maxCol < 0 ? 0 : maxCol);
     this.recoverGridFocus(String(recRow), recCol, null);
   }
 };
 
+  // ══ Phase 87 87-04/87-05 — column-axis template windowing (D-06/D-11; declared HERE (after
+  // the columnChrome/gridFocusNav imports above) so a forward cross-partial reference to
+  // colsWindowed()/windowedColIndices() in the merged per-target output never TDZs on React —
+  // the 87-02 useCallback-deps-array ordering lesson, the SAME reason remeasureColumnWindow()
+  // below stays out of virtualization.rzts). ══
+  // windowedHeadersFor(hg, hgLevel) (87-05): generalizes 87-04's windowedHeaderRow() (leaf-level
+  // only) to EVERY header level with a CLAMPED colspan (D-11). A header spans the CONTIGUOUS run
+  // of leaf-column indices [cursor, cursor + header.colSpan) — table-core lays out every header
+  // level's `headers` array left-to-right over the SAME full leaf-column order, so walking a
+  // running cursor by each header's OWN colSpan reconstructs its absolute leaf range with no
+  // extra table-core calls. Intersect that range with windowedColIndices() (which already unions
+  // the D-10 forced set): a header whose intersection is EMPTY is dropped entirely (a group
+  // wholly outside the window renders no <th> at all — D-11); otherwise it is emitted as
+  // { header, span } with span = the intersection SIZE (the clamp). Degrades to hg.headers
+  // 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).
+  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
+    }));
+  }
+  const idx = this.windowedColIndices();
+  const idxSet = {};
+  for (let i = 0; i < idx.length; i++) idxSet[idx[i]] = true;
+  let cursor = 0;
+  const out = [];
+  for (let i = 0; i < headers.length; i++) {
+    const h = headers[i];
+    const leafCount = h && h.colSpan ? h.colSpan : 1;
+    const start = cursor;
+    const end = cursor + leafCount;
+    cursor = end;
+    let span = 0;
+    for (let c = start; c < end; c++) if (idxSet[c]) span = span + 1;
+    if (span > 0) out.push({
+      header: h,
+      span
+    });
+  }
+  return out;
+};
+
+  // windowedColSpan(): the body row's rendered <td> COUNT under column windowing — the windowed
+  // cell slice length plus the two rdt-col-spacer cells, so the leading/trailing full-row spacer
+  // <tr>s and the #detail <tr> span the SAME column count the body row actually renders (D-06/
+  // D-11's alignment obligation under table-layout:fixed). Off → visibleColCount() unchanged
+  // (byte-identical).
+  windowedColSpan = () => this.colsWindowed() ? this.windowedColIndices().length + 2 : this.visibleColCount();
+
+  // 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
+  // runtime column-visibility/order/pinning change (all watched in the $watch list below) keeps
+  // the column virtualizer's count in sync. Never a render helper (Pitfall 1); rides the EXISTING
+  // refreshRowModel imperative re-feed cycle rather than adding a third scheduling path. Declared
+  // HERE (DataTable.rozie's own script), not in virtualization.rzts — see that file's comment for
+  // why: it must call columnVirtualizerOptions() (windowing.rzts), and a function inside
+  // virtualization.rzts calling into windowing.rzts is a forward-reference TDZ on React (the
+  // 87-02 predicate-layer lesson, one file-grouping boundary over).
+  remeasureColumnWindow = () => {
+  if (!this.colsWindowed() || !this.colVirtualizer) return;
+  this.colVirtualizer.setOptions(this.columnVirtualizerOptions());
+  this.colVirtualizer._willUpdate();
+};
+
   // B6 (phase 63 wave-11) — "the active cell is parked on the empty-grid header fallback" control
   // flag, written + read ONLY inside clampActiveCell (never bound in the template). It MUST be a
   // plain component-scope `let` (React hoists to useRef), NOT a $data reactive field: clampActiveCell
@@ -4645,8 +5660,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     focus: null
   };
   const clampCorner = (c: any) => c == null ? null : {
-    rowIndex: this.clamp(c.rowIndex, 0, maxRow),
-    colIndex: this.clamp(c.colIndex, 0, maxCol)
+    rowIndex: clamp(c.rowIndex, 0, maxRow),
+    colIndex: clamp(c.colIndex, 0, maxCol)
   };
   return {
     anchor: clampCorner(a),
@@ -4706,8 +5721,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
       colIndex: this._activeColIndex.value
     };
   }
-  const nextRow = this.clamp(focus.rowIndex + dRow, 0, maxRow);
-  const nextCol = this.clamp(focus.colIndex + dCol, 0, maxCol);
+  const nextRow = clamp(focus.rowIndex + dRow, 0, maxRow);
+  const nextCol = clamp(focus.colIndex + dCol, 0, maxCol);
   const nextFocus = {
     rowIndex: nextRow,
     colIndex: nextCol
@@ -4744,8 +5759,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     rowIndex: this._activeRow.value,
     colIndex: this._activeColIndex.value
   };
-  const r = this.clamp(Math.trunc(Number(rIdx)) || 0, 0, maxRow);
-  const c = this.clamp(Math.trunc(Number(cIdx)) || 0, 0, maxCol);
+  const r = clamp(Math.trunc(Number(rIdx)) || 0, 0, maxRow);
+  const c = clamp(Math.trunc(Number(cIdx)) || 0, 0, maxCol);
   const nextFocus = {
     rowIndex: r,
     colIndex: c
@@ -4822,16 +5837,16 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     return;
   }
   if (a) {
-    const ar = this.clamp(a.rowIndex, 0, maxRow);
-    const ac = this.clamp(a.colIndex, 0, maxCol);
+    const ar = clamp(a.rowIndex, 0, maxRow);
+    const ac = clamp(a.colIndex, 0, maxCol);
     if (ar !== a.rowIndex || ac !== a.colIndex) this._rangeAnchor.value = {
       rowIndex: ar,
       colIndex: ac
     };
   }
   if (f) {
-    const fr = this.clamp(f.rowIndex, 0, maxRow);
-    const fc = this.clamp(f.colIndex, 0, maxCol);
+    const fr = clamp(f.rowIndex, 0, maxRow);
+    const fc = clamp(f.colIndex, 0, maxCol);
     if (fr !== f.rowIndex || fc !== f.colIndex) this._rangeFocus.value = {
       rowIndex: fr,
       colIndex: fc
@@ -4839,14 +5854,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   }
 };
 
-  // ══ Clipboard (TSV copy/paste) + drag-fill (phase 51 plan 04 / req-8 / D-03 / D-04) ══════
-  // The async Clipboard API (grantPermissions confirmed in 51-01). Copy = range→TSV; paste =
-  // TSV→cells under the D-03 skip rule (editable AND validator-passing cells only) with an
-  // N-of-M aria-live announce + one cell-edit-commit per committed cell; drag-fill = value-copy
-  // ONLY (D-04, NO series detection). T-51-01 (BLOCKING-high): pasted TSV is UNTRUSTED — every
-  // cell is written as plain string DATA through the per-column validator and rendered via the
-  // SAME {{ }}/rozieDisplay text path as #cell (never innerHTML / a template / a selector); the
-  // cell-resolution query interpolates integer indices only (resolveCellEl, T-49-01).
   // announce(msg): write the polite aria-live PASTE-announce region (D-03 — "N of M cells
   // pasted"). SEPARATE from the validation invalidMsg region (different semantics). '' clears it.
   announce = (msg: any) => {
@@ -4882,10 +5889,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   const maxRow = this.bodyRowCount() - 1;
   const maxCol = this.visibleColCount() - 1;
   if (maxRow < 0 || maxCol < 0) return null;
-  const ar = this.clamp(a.rowIndex, 0, maxRow);
-  const ac = this.clamp(a.colIndex, 0, maxCol);
-  const fr = this.clamp(f.rowIndex, 0, maxRow);
-  const fc = this.clamp(f.colIndex, 0, maxCol);
+  const ar = clamp(a.rowIndex, 0, maxRow);
+  const ac = clamp(a.colIndex, 0, maxCol);
+  const fr = clamp(f.rowIndex, 0, maxRow);
+  const fc = clamp(f.colIndex, 0, maxCol);
   return {
     r0: ar < fr ? ar : fr,
     r1: ar > fr ? ar : fr,
@@ -4894,20 +5901,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   };
 };
 
-  // B10: escape a TSV field per the spreadsheet convention — a field containing a tab, a CR/LF,
-  // or a double-quote is wrapped in double-quotes with internal quotes DOUBLED; an ordinary
-  // field is emitted verbatim. parseTsv() unescapes symmetrically, so a cell carrying a tab /
-  // newline / quote round-trips without smearing into adjacent cells (T-63-03-02).
-  escapeTsvField = (s: any) => {
-  if (s.indexOf('\t') >= 0 || s.indexOf('\n') >= 0 || s.indexOf('\r') >= 0 || s.indexOf('"') >= 0) {
-    return '"' + s.replace(/"/g, '""') + '"';
-  }
-  return s;
-};
-
   // rangeToTsv(): serialize the current range to TSV — rows joined by '\n', cells by '\t',
   // reading each cell's value off the visible model by index (cellValueAt). A single active
   // cell (no range) serializes that one cell. Each field is B10-escaped. Pure read — never writes.
+  // C2 (quick 260906-cvo) — DELIBERATE NON-CHANGE: this is a READ, unlike applyGridToRange's
+  // write funnel, and stays UNGUARDED for a group-header row on purpose. cellValueAt reads the
+  // column's DISPLAYED aggregate value on a group row (table-core's cell.getValue()), which is
+  // exactly what the user sees — serializing it is correct behavior, not a leak. Do not "fix"
+  // this asymmetry; it is intentional.
   rangeToTsv = () => {
   const box = this.normalizedRange();
   const r0 = box ? box.r0 : this._activeRow.value;
@@ -4919,91 +5920,13 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     const cells = [];
     for (let c = c0; c <= c1; c++) {
       const v = this.cellValueAt(r, c);
-      cells.push(this.escapeTsvField(v == null ? '' : String(v)));
+      cells.push(escapeTsvField(v == null ? '' : String(v)));
     }
     lines.push(cells.join('\t'));
   }
   return lines.join('\n');
 };
 
-  // parseTsv(text): a TSV string → string[][] (rows of cells). Tolerates \r\n; a trailing
-  // newline does not add a phantom empty row. Pure — produces plain string DATA only (T-51-01:
-  // the cells are NEVER eval'd / interpolated into a selector / rendered as markup).
-  parseTsv = (text: any) => {
-  const str = text != null ? String(text) : '';
-  // CR-03: length guard BEFORE the parse — an empty string is a no-op, and a pathologically
-  // large clipboard payload (>2M chars) is rejected outright (DoS-shaped input) before the
-  // single-pass scan allocates a cell-per-character grid.
-  if (str === '' || str.length > 2000000) return [];
-  // B10: a quote-aware single-pass state machine (replaces the naive split, which corrupted a
-  // cell containing a tab/newline). A field that OPENS with a double-quote is "quoted": tabs,
-  // newlines, and doubled quotes ("") inside it are literal content until the closing quote;
-  // an unquoted field ends at the next tab/newline. CR/LF and CRLF all delimit a row.
-  const rows = [];
-  let row = [];
-  let field = '';
-  let inQuotes = false;
-  let i = 0;
-  const n = str.length;
-  while (i < n) {
-    const ch = str[i];
-    if (inQuotes) {
-      if (ch === '"') {
-        if (i + 1 < n && str[i + 1] === '"') {
-          field = field + '"';
-          i = i + 2;
-          continue;
-        }
-        inQuotes = false;
-        i = i + 1;
-        continue;
-      }
-      field = field + ch;
-      i = i + 1;
-      continue;
-    }
-    if (ch === '"' && field === '') {
-      inQuotes = true;
-      i = i + 1;
-      continue;
-    }
-    if (ch === '\t') {
-      row.push(field);
-      field = '';
-      i = i + 1;
-      continue;
-    }
-    if (ch === '\r') {
-      if (i + 1 < n && str[i + 1] === '\n') i = i + 1;
-      row.push(field);
-      field = '';
-      rows.push(row);
-      row = [];
-      i = i + 1;
-      continue;
-    }
-    if (ch === '\n') {
-      row.push(field);
-      field = '';
-      rows.push(row);
-      row = [];
-      i = i + 1;
-      continue;
-    }
-    field = field + ch;
-    i = i + 1;
-  }
-  // Flush the trailing field + row.
-  row.push(field);
-  rows.push(row);
-  // Drop a single trailing empty row (a TSV that ends with a newline → a phantom [''] row).
-  if (rows.length > 1) {
-    const last = rows[rows.length - 1];
-    if (last.length === 1 && last[0] === '') rows.pop();
-  }
-  return rows;
-};
-
   // 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.
   copyRange = () => {
@@ -5039,11 +5962,22 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   for (let gr = 0; gr < grid.length; gr++) {
     const r = originRow + gr;
     if (r > maxRow) break;
+    // C2 (quick 260906-cvo) — hoisted ONCE per ROW (never per cell): a group-header row's
+    // `original` is table-core's `leafRows[0].original` (a synthetic row), so a write
+    // resolved through it silently lands on an unrelated record. This ONE placement closes
+    // pasteRange, cutRange, clearActiveRange AND fillRange — all four build a grid and hand
+    // it to this single funnel, so guarding the four callers individually would be four
+    // chances to miss one.
+    const rowGrouped = this.rowIndexIsGrouped(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).
       total = total + 1;
+      if (rowGrouped) continue;
       const colId = this.columnIdAt(r, c);
       if (colId == null || !this.columnEditable(colId)) continue;
       const rowObj = this.rowOriginalAt(r);
@@ -5057,7 +5991,7 @@ ${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;
-      next = this.replaceRowValue(next, srcIndex, field, value);
+      next = replaceRowValue(next, srcIndex, field, value);
       committed.push({
         rowId: this.rowIdAt(r),
         columnId: colId,
@@ -5101,43 +6035,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   return row ? row.id : null;
 };
 
-  // C3: tile a parsed clipboard `grid` (string[][]) to fill a destination `box` — the spreadsheet
-  // paste-into-range semantics. The target rectangle is the MAX of the box dims and the source
-  // dims per axis, so a SMALLER clipboard TILES across a LARGER selection (a single 1×1 cell fills
-  // the whole range; a 2×2 block repeats — tiled[dr][dc] = src[dr % srcRows][dc % srcCols]), while a
-  // clipboard LARGER than the selection pastes its full block from the top-left (preserving the
-  // no-range "clipboard-sized block at the active cell" behavior — a 1×1 destBox + a 1×N clipboard
-  // yields the full 1×N block, byte-for-byte the prior path). Pure — returns a fresh grid; applies
-  // nothing. A ragged/short source row defaults the missing cell to '' (coerced per column on write).
-  tileGridToBox = (grid: any, box: any) => {
-  const srcRows = grid.length;
-  // srcCols is the MAX row width across ALL rows (not grid[0].length): a RAGGED clipboard
-  // (a later row WIDER than the first, e.g. TSV "a\tb\nc\td\te") would otherwise never read
-  // the extra column and silently drop those cells. A row SHORTER than srcCols tiles its
-  // missing cells as '' (the `v != null ? v : ''` coercion below), never undefined.
-  let srcCols = 0;
-  for (let i = 0; i < srcRows; i++) {
-    const w = grid[i] && grid[i].length ? grid[i].length : 0;
-    if (w > srcCols) srcCols = w;
-  }
-  if (srcRows <= 0 || srcCols <= 0) return grid;
-  const boxRows = box.r1 - box.r0 + 1;
-  const boxCols = box.c1 - box.c0 + 1;
-  const rows = boxRows > srcRows ? boxRows : srcRows;
-  const cols = boxCols > srcCols ? boxCols : srcCols;
-  const out = [];
-  for (let r = 0; r < rows; r++) {
-    const srcLine = grid[r % srcRows] || [];
-    const line = [];
-    for (let c = 0; c < cols; c++) {
-      const v = srcLine[c % srcCols];
-      line.push(v != null ? v : '');
-    }
-    out.push(line);
-  }
-  return out;
-};
-
   // pasteRange(): read TSV from the clipboard (async), parse it, TILE it over the destination
   // (C3), and apply it anchored at the destination top-left under the D-03 skip rule. The grid is
   // clamped to the grid bounds (T-51-02). A failed/empty read is a silent no-op.
@@ -5169,11 +6066,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   }
   if (!p || !p.then) return;
   p.then((text: any) => {
-    const grid = this.parseTsv(text);
+    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 = this.tileGridToBox(grid, destBox);
+    const tiled = tileGridToBox(grid, destBox);
     this.applyGridToRange(tiled, anchorRow, anchorCol);
   }).catch(() => {});
 };
@@ -5238,18 +6135,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this.applyGridToRange(grid, r0, c0);
 };
 
-  // tileIndex(i, lo, hi): map an index into the inclusive [lo,hi] source span by TILING (repeat
-  // the source block), handling indices below lo (negative offset) correctly. A 1-wide source
-  // (lo===hi) always returns lo. Used by fillRange to resolve, per target cell, WHICH source
-  // cell it copies — so each column copies its OWN source value down its OWN column.
-  tileIndex = (i: any, lo: any, hi: any) => {
-  const span = hi - lo + 1;
-  if (span <= 1) return lo;
-  let k = (i - lo) % span;
-  if (k < 0) k = k + span;
-  return lo + k;
-};
-
   // fillRange(sourceBox): drag-fill (D-04 — VALUE-COPY ONLY, no series detection). B7: the fill
   // SOURCE is the PRE-DRAG rectangle (`sourceBox`, captured at pointerdown before the drag grew
   // the range); each target cell copies the source cell in its OWN column (and row, when the
@@ -5295,8 +6180,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   for (let r = box.r0; r <= box.r1; r++) {
     const cols = [];
     for (let c = box.c0; c <= box.c1; c++) {
-      const sr = this.tileIndex(r, src.r0, src.r1);
-      const sc = this.tileIndex(c, src.c0, src.c1);
+      const sr = tileIndex(r, src.r0, src.r1);
+      const sc = tileIndex(c, src.c0, src.c1);
       const v = this.cellValueAt(sr, sc);
       cols.push(v == null ? '' : String(v));
     }
@@ -5318,6 +6203,52 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   fillDragUp: any = null;
 
+  // Phase 87 87-06 (D-13, T-87-06-02): the single rAF handle driving the fill-drag per-axis
+  // edge auto-scroll — a module-`let` beside fillDragMove/fillDragUp (the `let table` precedent;
+  // React hoists to useRef), cleared IDEMPOTENTLY in teardownFillDrag() so an interrupted gesture
+  // never leaves an orphaned scroll loop running forever.
+  fillEdgeScrollRaf: any = null;
+
+  // Phase 87 87-06 (D-13): per-axis edge-triggered auto-scroll for the fill drag.
+  // FILL_EDGE_SCROLL_PX — the pixel distance from the scroll container's edge, on either axis,
+  // that engages auto-scroll. 24px: comfortably wider than the fill handle's own hit target but
+  // well inside a typical row/column size, so the gesture recognizably nears an edge before
+  // scrolling engages (not so wide that an ordinary drag near the middle of the viewport
+  // spuriously triggers it).
+  FILL_EDGE_SCROLL_PX = 24;
+
+  // FILL_EDGE_SCROLL_STEP — pixels scrolled per animation frame while the pointer sits inside an
+  // edge zone. A fixed step (not distance-proportional) keeps the scroll speed predictable and
+  // the WR-01-style spacer/window math simple to reason about frame-to-frame.
+  FILL_EDGE_SCROLL_STEP = 16;
+
+  // edgeDelta(clientX, clientY): the per-frame (dx, dy) scroll delta for a pointer at the given
+  // screen position, relative to the scroll container `gridScrollEl` already observed by the row
+  // AND column virtualizers (D-03 — one shared `.rdt-scroll` wrapper for whichever axis/axes are
+  // windowed). Each axis is independently gated on colsWindowed()/rowsWindowed() (never a bare
+  // prop truthiness read — the 87-02 prohibition gate) so a drag near the left/right edge of a
+  // row-only-windowed table (or vice versa) never scrolls an axis that has nothing to reveal.
+  // Pure — reads no gesture state, only the live container rect + the windowing predicates.
+  edgeDelta = (clientX: any, clientY: any) => {
+  if (!this.gridScrollEl) return {
+    dx: 0,
+    dy: 0
+  };
+  const rect = this.gridScrollEl.getBoundingClientRect();
+  let dx = 0;
+  let dy = 0;
+  if (this.colsWindowed()) {
+    if (clientX - rect.left < this.FILL_EDGE_SCROLL_PX) dx = -this.FILL_EDGE_SCROLL_STEP;else if (rect.right - clientX < this.FILL_EDGE_SCROLL_PX) dx = this.FILL_EDGE_SCROLL_STEP;
+  }
+  if (this.rowsWindowed()) {
+    if (clientY - rect.top < this.FILL_EDGE_SCROLL_PX) dy = -this.FILL_EDGE_SCROLL_STEP;else if (rect.bottom - clientY < this.FILL_EDGE_SCROLL_PX) dy = this.FILL_EDGE_SCROLL_STEP;
+  }
+  return {
+    dx,
+    dy
+  };
+};
+
   teardownFillDrag = () => {
   if (typeof document !== 'undefined') {
     if (this.fillDragMove) document.removeEventListener('pointermove', this.fillDragMove);
@@ -5326,6 +6257,15 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this.fillDragMove = null;
   this.fillDragUp = null;
   this.fillDragging = false;
+  // D-13 (T-87-06-02): idempotent cleanup of the edge-auto-scroll rAF loop — the SAME discipline
+  // fillDragMove/fillDragUp already follow. Called both on a normal pointerup release AND at the
+  // TOP of the next onFillHandlePointerDown (the #leak guard below), so an interrupted gesture
+  // (pointer released off-window, context menu, alt-tab) can never leave a stray rAF scrolling
+  // the table forever.
+  if (this.fillEdgeScrollRaf != null) {
+    if (typeof cancelAnimationFrame === 'function') cancelAnimationFrame(this.fillEdgeScrollRaf);
+    this.fillEdgeScrollRaf = null;
+  }
 };
 
   cellIndexFromPoint = (clientX: any, clientY: any) => {
@@ -5363,7 +6303,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // pointerup was missed (pointer released off-window, context menu, alt-tab), the prior fillDrag's
   // document pointermove/pointerup stay attached; overwriting fillDragMove/fillDragUp below would
   // strand them (removeEventListener could never reach the old refs) → a permanent global
-  // pointermove leak. teardownFillDrag is idempotent (no-op when nothing is attached).
+  // pointermove leak. teardownFillDrag is idempotent (no-op when nothing is attached) — it ALSO
+  // cancels any orphaned edge-auto-scroll rAF from the same prior gesture.
   this.teardownFillDrag();
   this.fillDragging = true;
   // B7: snapshot the PRE-DRAG rectangle (the fill SOURCE) NOW, before pointermove grows the
@@ -5377,21 +6318,74 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     r: sourceBox.r1,
     c: sourceBox.c1
   } : null;
+  // D-13: the pointer's LAST known screen position, updated on every real pointermove AND read
+  // by the rAF loop below on every frame. The scroll loop must re-resolve the cell under this
+  // FIXED screen point each frame — the pointer itself may not move at all while the user simply
+  // holds it at the edge, but the content sliding beneath it means a DIFFERENT cell sits there
+  // each frame, which is what must extend the range (this is the whole point of "edge-triggered
+  // auto-scroll": a real pointermove would never fire on a stationary pointer).
+  let lastClientX = 0;
+  let lastClientY = 0;
+  // applyPointAt: resolve the cell under (clientX, clientY) and extend the range to it if it is
+  // a NEW cell (B20 dedup — unchanged from the pre-87-06 shape). Shared by both a real
+  // pointermove and every frame of the edge-auto-scroll loop.
+  const applyPointAt = (clientX: any, clientY: any) => {
+    const cell = this.cellIndexFromPoint(clientX, clientY);
+    if (cell && (!lastCell || cell.r !== lastCell.r || cell.c !== lastCell.c)) {
+      lastCell = cell;
+      this.setRangeFocus(cell.r, cell.c);
+    }
+  };
+  // scrollStep: the single rAF loop (T-87-06-02) — reads the LAST known pointer position each
+  // frame, scrolls the windowed axis/axes still within the edge threshold, then re-resolves the
+  // cell now under that same screen point. Self-terminates (never reschedules) the moment the
+  // gesture ends OR the pointer no longer sits in an edge zone — so leaving the edge, or a
+  // pointerup, stops the scroll immediately with no lingering frame.
+  const scrollStep = () => {
+    if (!this.fillDragging) {
+      this.fillEdgeScrollRaf = null;
+      return;
+    }
+    const d = this.edgeDelta(lastClientX, lastClientY);
+    if (d.dx === 0 && d.dy === 0) {
+      this.fillEdgeScrollRaf = null;
+      return;
+    }
+    if (this.gridScrollEl) {
+      // T-87-06-03: direct scrollLeft/scrollTop writes — NEVER virtualizer.scrollToOffset /
+      // colVirtualizer.scrollToOffset. A programmatic virtual-core scroll sets
+      // virtualizer.scrollState, which remeasureWindow() bails on for as long as it is non-null;
+      // a SUSTAINED auto-scroll driven through that API would suppress row remeasurement for the
+      // whole gesture. scrollLeft/scrollTop are ordinary user-scroll-shaped writes (scrollState
+      // stays null), so remeasureWindow() keeps observing recycled rows normally throughout.
+      if (d.dx !== 0) this.gridScrollEl.scrollLeft = this.gridScrollEl.scrollLeft + d.dx;
+      if (d.dy !== 0) this.gridScrollEl.scrollTop = this.gridScrollEl.scrollTop + d.dy;
+    }
+    applyPointAt(lastClientX, lastClientY);
+    this.fillEdgeScrollRaf = requestAnimationFrame(scrollStep);
+  };
   const move = (ev: any) => {
     if (!this.fillDragging) return;
-    const cell = this.cellIndexFromPoint(ev.clientX, ev.clientY);
+    lastClientX = ev.clientX;
+    lastClientY = ev.clientY;
     // B20: dedup by target cell. setRangeFocus emits range-change, so calling it on EVERY
     // pointermove (the pointer fires many per cell) spams the event with identical payloads.
     // Only extend (and emit) when the pointer enters a DIFFERENT cell than the last — lastCell
     // seeds from the pre-drag bottom-right corner, so a move that stays on the source corner
     // or re-enters the same cell is suppressed (the range is unchanged).
-    if (cell && (!lastCell || cell.r !== lastCell.r || cell.c !== lastCell.c)) {
-      lastCell = cell;
-      this.setRangeFocus(cell.r, cell.c);
+    applyPointAt(ev.clientX, ev.clientY);
+    // D-13: start the edge-auto-scroll loop the FIRST time the pointer enters an edge zone
+    // (idempotent — fillEdgeScrollRaf is only null when no loop is currently scheduled). The
+    // loop itself (scrollStep) re-evaluates edgeDelta every frame and self-terminates once the
+    // pointer leaves the zone, so no separate "still in zone" check is needed here.
+    if (this.fillEdgeScrollRaf == null && typeof requestAnimationFrame === 'function') {
+      const d = this.edgeDelta(ev.clientX, ev.clientY);
+      if (d.dx !== 0 || d.dy !== 0) this.fillEdgeScrollRaf = requestAnimationFrame(scrollStep);
     }
   };
   const up = () => {
-    // teardownFillDrag clears fillDragging + removes both listeners (CR-04 shared path).
+    // teardownFillDrag clears fillDragging + removes both listeners + cancels any in-flight
+    // edge-auto-scroll rAF (CR-04 / T-87-06-02 shared path).
     this.teardownFillDrag();
     // A plain click on the fill handle (pointerdown+up with NO intervening drag) leaves lastCell
     // at the source box's own origin corner (r1,c1), so fillRange(sourceBox, corner) would
@@ -5490,12 +6484,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   }
 };
 
-  // ══ Editable-cell lifecycle (phase 51 plan 02 — RESEARCH Pattern 1/3/4/5) ════════════════
-  // Single-cell, non-virtual. Index-based state (editingRow/editingCol over the visible model),
-  // the display↔editor branch in the keyed <td>, F2/Enter/printable entry off the reserved
-  // onGridKeyDown seam, commit on Enter/Tab/blur, cancel+revert on Escape, sync validation with
-  // D-01 keep-open. All gated by columnEditable() / the editing index pair so a table with no
-  // editable columns lowers byte-identical (the editor branch r-if is always false).
   // The column id at the active cell (the active row's visible cell list @ activeColIndex).
   // Null when out of range (no body rows, or active cell is a header / select column).
   activeCellColumnId = () => {
@@ -5511,7 +6499,13 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // isActiveCellEditable: the active cell sits in an editable column AND is a body cell
   // (req-1). Gates the F2/Enter/printable edit-entry branches in onGridKeyDown; a
   // non-editable active cell falls through to the reserved enterControl path.
+  // C1 (quick 260906-cvo) — Layer 1: a group-header row is NEVER editable, regardless of
+  // column. This is the single highest-value guard in the cluster: it closes Shift+F2, the
+  // checkbox toggle, and the F2/Enter/printable edit-entry branches in ONE edit (they are all
+  // `else if` branches gated on this predicate), AND restores fallthrough so Enter on a group
+  // row reaches the group-toggle branch below them instead of opening an editor.
   isActiveCellEditable = () => {
+  if (this.rowIndexIsGrouped(this._activeRow.value)) return false;
   const colId = this.activeCellColumnId();
   return colId != null && this.columnEditable(colId);
 };
@@ -5529,6 +6523,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // non-virtual, wr.vi.index virtual).
   isEditing = (rowIndex: any, colIndex: any) => {
   if (this._editVer.value < 0) return false;
+  // C1 (quick 260906-cvo) — Layer 6: the ONLY layer whose reachability does not depend on a
+  // keystroke. Editing state is INDEX-based over the visible model, and nothing clears it
+  // when the row model re-derives — a consumer that changes the grouping model WHILE a cell
+  // editor is open can move a group-header row under the index $data.editingRow/
+  // editingRowIndex still holds, rendering the editor on a group row with no beginEdit
+  // involved. Placed AFTER the editVer read (preserves the Svelte/Solid re-derivation
+  // discipline the header comment above documents).
+  if (this.rowIndexIsGrouped(rowIndex)) return false;
   if (this._editingRowIndex.value != null && this._editingRowIndex.value === rowIndex) {
     const colId = this.columnIdAt(rowIndex, colIndex);
     return colId != null && this.columnEditable(colId);
@@ -5568,29 +6570,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this._invalidMsg.value = msg != null ? msg : '';
 };
 
-  // replaceRowValue: build a FRESH array with ONE row object replaced (the column's field
-  // set to the new value); the rest share by reference (the family immutable whole-array
-  // replace — in-place mutation is silently dropped on React/Solid/Angular/Lit). rowIndex
-  // is over currentData() (== the visible model order for the non-virtual, unsorted/
-  // unfiltered single-cell case; the row id is carried for the commit payload).
-  replaceRowValue = (rows: any, rowIndex: any, field: any, value: any) => {
-  const src = rows || [];
-  const out = [];
-  for (let i = 0; i < src.length; i++) {
-    if (i === rowIndex) {
-      // WR-03: own-property spread, NOT `for (const k in orig)` which walks the prototype chain
-      // and would copy inherited enumerable props of typed/class-instance row objects.
-      out.push({
-        ...(src[i] || {}),
-        [field]: value
-      });
-    } else {
-      out.push(src[i]);
-    }
-  }
-  return out;
-};
-
   // Map a visible-model body-row index ($data.rows index) to its underlying currentData()
   // index via the row's original object identity (sorting/filtering/pagination may reorder
   // the visible model away from the source array order). Falls back to the same index.
@@ -5729,6 +6708,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // $data) so a Tab-advance that just setState'd activeRow/Col works on React. Clears any
   // prior invalid state. Focus moves into the editor.
   beginEdit = (rowIndex: any, colIndex: any, seed: any) => {
+  // C1 (quick 260906-cvo) — Layer 2: closes the `onGridClick` (singleClickEdit) path, which
+  // calls beginEdit directly gated ONLY on columnEditable — isActiveCellEditable (Layer 1)
+  // does not run on that path at all.
+  if (this.rowIndexIsGrouped(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
@@ -5775,23 +6758,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   if (typeof requestAnimationFrame === 'function') requestAnimationFrame(tryFocus);else setTimeout(tryFocus, 0);
 };
 
-  // B23: the index of a committed row WITHIN a given (fresh) visible-model array, resolved by
-  // row IDENTITY. table-core's default getRowId is source-index-based, so a row's id is stable
-  // across a re-sort (only its VISIBLE position moves); a committed edit replaces the row object
-  // via a fresh spread (the `original` reference changes), so match by `id` FIRST, `original`
-  // only as a fallback. Returns -1 when the row filtered out of the view. PURE (the caller passes
-  // the FRESH row list — refreshRowModel's just-pulled `nextRows`, never the React-stale state).
-  indexOfRowIn = (rows: any, rowOriginal: any, rowId: any) => {
-  const list = rows || [];
-  for (let i = 0; i < list.length; i++) {
-    const r = list[i];
-    if (!r) continue;
-    if (rowId != null && r.id === rowId) return i;
-    if (rowOriginal != null && r.original === rowOriginal) return i;
-  }
-  return -1;
-};
-
   // endEdit: tear down the editor (shared by commit/cancel). Clears the editing pair +
   // draft + invalid state and returns to navigation mode. Does NOT move focus (callers
   // decide where focus lands — commit/cancel return it to the owning cell).
@@ -5905,7 +6871,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this.committedThisSession = true;
   if (changed) {
     const srcIndex = this.sourceIndexOfRow(this._editingRow.value);
-    const next = this.replaceRowValue(this.currentData(), srcIndex, field, newValue);
+    const next = replaceRowValue(this.currentData(), srcIndex, field, newValue);
     this.writeData(next);
     // Exactly one emit per commit, from this single call site (writeData does NOT emit).
     this.dispatchEvent(new CustomEvent("cell-edit-commit", {
@@ -5956,6 +6922,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // editor:'checkbox' columns only (Space/Enter/F2), full-row edit mode is unaffected (the
   // editingRowIndex early return in onGridKeyDown already excludes it).
   toggleActiveBooleanCell = () => {
+  // C1 (quick 260906-cvo) — Layer 4: the only write funnel bypassing both beginEdit/
+  // commitEdit and applyGridToRange. Reachable today only through the Layer-1-gated
+  // 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 || [];
@@ -5979,7 +6950,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // Sync idempotency latch: this toggle is a commit-equivalent (mirrors commitEdit's D-07
   // single-emit discipline) — flip it too so a stray re-entry after this toggle no-ops.
   this.committedThisSession = true;
-  this.writeData(this.replaceRowValue(this.currentData(), srcIndex, field, newValue));
+  this.writeData(replaceRowValue(this.currentData(), srcIndex, field, newValue));
   // Exactly one emit per toggle, from this single call site (writeData does NOT emit) —
   // mirrors commitEdit's D-07 single-emit discipline.
   this.dispatchEvent(new CustomEvent("cell-edit-commit", {
@@ -6018,12 +6989,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this.focusCellWhenReady(focusRow, focusCol);
 };
 
-  // ══ Full-row edit lifecycle (phase 51 plan 03 / req-6 / D-06, RESEARCH Pattern 6) ════════
-  // Shift+F2 (and the editRow $expose verb) put EVERY editable cell in the active row into
-  // edit at once; one save commits the whole row in ONE writeData (a single fresh-array row
-  // replace) + ONE row-edit-commit event; Escape reverts the whole row as a unit. Per-column
-  // validation still runs on each edited cell at commit (D-01 keep-open if ANY fails). The
-  // editor template branch (isEditing's row arm) is re-used verbatim — no per-mode fork.
   // The editable [columnId, field] pairs for a body row at the given visible-model index,
   // in visible-cell order. field is the column's accessorKey (the row-object key to write).
   editableColumnsForRow = (rowIndex: any) => {
@@ -6093,6 +7058,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   beginRowEdit = (row: any) => {
   const rowIndex = this.rowIndexOf(row);
   if (rowIndex < 0) return;
+  // C1 (quick 260906-cvo) — Layer 5: a second, independent editing-state funnel that takes a
+  // row OBJECT from its caller. Reachable today only via Shift+F2 (Layer 1), so also
+  // 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;
   const editable = this.editableColumnsForRow(rowIndex);
   if (editable.length === 0) return;
   // A new edit session starts — reset the sync idempotency latch (see editCellLifecycle.rzts).
@@ -6200,7 +7170,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   if (changed) {
     // ONE fresh-array replace of the SINGLE row object with all field values applied at once.
     const srcIndex = this.sourceIndexOfRow(rowIndex);
-    const next = this.replaceRowValues(this.currentData(), srcIndex, fieldValues);
+    const next = replaceRowValues(this.currentData(), srcIndex, fieldValues);
     this.writeData(next);
     // EXACTLY ONE emit per row commit, from THIS single call site (React multi-emit dedup, D-07).
     this.dispatchEvent(new CustomEvent("row-edit-commit", {
@@ -6250,27 +7220,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this.focusCellWhenReady(focusRow, focusCol);
 };
 
-  // replaceRowValues: like replaceRowValue but applies a MAP of field→value to ONE row object
-  // in a single fresh-array replace (req-6 — the whole-row commit is ONE write, not per cell).
-  replaceRowValues = (rows: any, rowIndex: any, fieldValues: any) => {
-  const src = rows || [];
-  const fv = fieldValues || {};
-  const out = [];
-  for (let i = 0; i < src.length; i++) {
-    if (i === rowIndex) {
-      // WR-03: own-property spread (orig then the field→value map), NOT a `for..in`
-      // prototype-walking copy. Spread copies own enumerable props only.
-      out.push({
-        ...(src[i] || {}),
-        ...fv
-      });
-    } else {
-      out.push(src[i]);
-    }
-  }
-  return out;
-};
-
   // Compute the next editable cell for Tab-advance (req-3, RESEARCH Open-Q3 deterministic
   // rule): skip non-editable columns within the row; wrap to the NEXT row's first editable
   // cell at the row's end; stop (return null) at grid end. Pure index math over the visible
@@ -6602,8 +7551,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   const lastRow = this.bodyRowCount() - 1;
   const maxRow = lastRow < 0 ? 0 : lastRow;
   const maxCol = this.visibleColCount() - 1;
-  const r = this.clamp(Math.trunc(Number(rowIndex)) || 0, 0, maxRow);
-  const c = this.clamp(Math.trunc(Number(colIndex)) || 0, 0, maxCol < 0 ? 0 : maxCol);
+  const r = clamp(Math.trunc(Number(rowIndex)) || 0, 0, maxRow);
+  const c = clamp(Math.trunc(Number(colIndex)) || 0, 0, maxCol < 0 ? 0 : maxCol);
   // A new edit session starts — reset the sync idempotency latch (see editCellLifecycle.rzts).
   this.committedThisSession = false;
   this._activeIsHeader.value = false;
@@ -6634,7 +7583,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   editRow = (rowIndex: any) => {
   const lastRow = this.bodyRowCount() - 1;
   const maxRow = lastRow < 0 ? 0 : lastRow;
-  const r = this.clamp(Math.trunc(Number(rowIndex)) || 0, 0, maxRow);
+  const r = clamp(Math.trunc(Number(rowIndex)) || 0, 0, maxRow);
   const rowList = this._rows.value || [];
   const row = rowList[r];
   if (!row) return;
@@ -6706,16 +7655,24 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // or user nav bumps again → a pending focusAbsCellWhenReady from THIS call aborts.
   this.focusIntentEpoch = this.focusIntentEpoch + 1;
   const maxCol = this.visibleColCount() - 1;
-  const c = this.clamp(Math.trunc(Number(colIndex)) || 0, 0, maxCol < 0 ? 0 : maxCol);
+  const c = clamp(Math.trunc(Number(colIndex)) || 0, 0, maxCol < 0 ? 0 : maxCol);
   // C1: clamp the ABSOLUTE row index to the full filtered+sorted (pre-pagination) bounds.
   const absLast = this.prePaginationRowCount() - 1;
-  const absRow = this.clamp(Math.trunc(Number(rowIndex)) || 0, 0, absLast < 0 ? 0 : absLast);
+  const absRow = clamp(Math.trunc(Number(rowIndex)) || 0, 0, absLast < 0 ? 0 : absLast);
   // B14: snapshot the PRE-write ABSOLUTE position so the activecell-change emit fires ONLY on a
   // real move (mirrors the keyboard path's WR-06 suppression). A no-op focusCell to the already-
   // active cell must NOT emit; a header→body landing (prevIsHeader) is a real move.
+  // Phase 87 87-06 (D-08, deferred-items.md "87-03: focusCell's activecell-change emit guard
+  // ignores column-only moves"): also snapshot the PRE-write column so a column-ONLY move (e.g.
+  // focusCell(sameRow, differentCol) — the exact D-08 case) is recognized as a real move too. The
+  // pre-fix guard compared only the row, so DOM focus moved correctly but the event never fired —
+  // logged as a genuine, pre-existing bug in 87-03 and explicitly revisited here because this
+  // plan's absolute-column-index work (and its own acceptance criteria) makes fixing it correct
+  // and cheap now, rather than leaving it deferred.
   const prevAbs = this.toAbsRow(this._activeRow.value);
+  const prevCol = this._activeColIndex.value;
   const prevIsHeader = this._activeIsHeader.value;
-  if (this.virtual) {
+  if (this.rowsWindowed()) {
     // Virtual mode: $data.activeRow IS the full pre-pagination index (the wr.vi.index space), so
     // the absolute index maps 1:1. focusActiveCell already runs the D-12 off-window scroll-then-
     // focus path (scrollToIndex(absRow) → deferred-rAF focus) when the row is outside the window.
@@ -6749,7 +7706,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
       this.focusActiveCell(localRow, c, false);
     }
   }
-  if (absRow !== prevAbs || prevIsHeader) {
+  if (absRow !== prevAbs || c !== prevCol || prevIsHeader) {
     this.dispatchEvent(new CustomEvent("activecell-change", {
       detail: {
         rowIndex: absRow,