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

package/dist/index.d.mts

@@ -6,14 +6,14 @@ declare class DataTable extends DataTable_base {
   static shadowRootOptions: ShadowRootInit;
   static styles: _$lit.CSSResult;
   /**
-   * The row data — `model: true`, so a committed cell/row edit writes a **fresh** array back through `r-model:data` (uncontrolled fallback `dataDefault`). A stable reference per Rozie's setup-once model — fed directly into table-core (never map/cloned in the watcher).
+   * The row data — `model: true`, so a committed cell/row edit writes a **fresh** array back through the two-way `data` binding (uncontrolled fallback `dataDefault`). A stable reference per Rozie's setup-once model — fed directly into table-core (never map/cloned in the watcher).
    * @example
    * <rozie-data-table .data=${rows} @data-change=${…} .columns=${cols}></rozie-data-table>
    */
   _data_attr: any[];
   private _dataControllable;
   /**
-   * Config-array column fallback (lower precedence than `<Column>` children). Each entry: `{ id?, field, header?, sortable?, filterable?, pinned?, width? }`. Columns may come from this array, from `<Column>` children, or both (id-keyed last-write-wins union).
+   * Config-array column fallback (lower precedence than `<Column>` children). Each entry: `{ id?, field, header?, sortable?, filterable?, pinned?, width? }`. Columns may come from this array, from `<Column>` children, or both (id-keyed last-write-wins union). A `pinned` value of `'left'` or `'right'` is applied once as the table's initial `columnPinning` state — identical to `<Column pinned>` — which also REORDERS that column, since table-core orders visible cells `[left-pinned, center, right-pinned]`. A consumer who has already expressed a pin (an initial two-way `columnPinning` model value or an interactive pin) owns the slice and this declaration is ignored.
    */
   columns: any[];
   /**
@@ -53,7 +53,7 @@ declare class DataTable extends DataTable_base {
    */
   pageCount: number | null;
   /**
-   * Opt-in **expandable rows**. When `true`, a leading chevron expander column auto-injects (after the select column) and `getExpandedRowModel` activates; default `false` is byte-identical-off. Every row can expand to reveal a `#detail` panel unless `getSubRows` is supplied (then only rows with children expand). Bind `:expandable="true"` (a bare attr only coerces on Vue+Lit).
+   * Opt-in **expandable rows**. When `true`, a leading chevron expander column auto-injects (after the select column) and `getExpandedRowModel` activates; default `false` is byte-identical-off. Every row can expand to reveal a `#detail` panel unless `getSubRows` is supplied (then only rows with children expand). Pass `expandable` as a real boolean — a valueless attribute only coerces to `true` on Vue and Lit.
    */
   expandable: boolean;
   /**
@@ -70,7 +70,7 @@ declare class DataTable extends DataTable_base {
    */
   groupable: boolean;
   /**
-   * `GroupingState` — an ordered `string[]` of column ids (multi-column → nested groups, e.g. `['region','category']`). An empty/unbound list is ungrouped (byte-identical-off). Group-header rows are collapsible (they ride the expand model). Surfaces through `group-change`; uncontrolled fallback (`$data.groupingDefault`, default `[]`) when unbound — the default is `null` (mirroring `expanded`) so the uncontrolled fallback is reachable and the grouping auto-expand default can activate when a consumer applies grouping without binding `r-model:grouping` (a non-null `[]` default would short-circuit it). All reads are null-guarded, so table-core still receives an array.
+   * `GroupingState` — an ordered `string[]` of column ids (multi-column → nested groups, e.g. `['region','category']`). An empty/unbound list is ungrouped (byte-identical-off). Group-header rows are collapsible (they ride the expand model). Surfaces through `group-change`; uncontrolled fallback (`$data.groupingDefault`, default `[]`) when unbound — the default is `null` (mirroring `expanded`) so the uncontrolled fallback is reachable and the grouping auto-expand default can activate when a consumer applies grouping without binding the two-way `grouping` model (a non-null `[]` default would short-circuit it). All reads are null-guarded, so table-core still receives an array.
    */
   _grouping_attr: any[] | null;
   private _groupingControllable;
@@ -104,7 +104,7 @@ declare class DataTable extends DataTable_base {
    */
   stickyHeader: boolean;
   /**
-   * `'table'` (default, row-oriented, byte-behaviorally identical to a plain accessible table) | `'grid'` (GA since Phase 63) — lights up the full WAI-ARIA **[grid interaction mode](/components/data-table-grid-mode)**: `role="grid"`, a roving single tab-stop, 2-D APG arrow-key cell navigation, range selection, and clipboard support.
+   * `'table'` (default, row-oriented, byte-behaviorally identical to a plain accessible table) | `'grid'` — lights up the full WAI-ARIA **[grid interaction mode](/components/data-table-grid-mode)**: `role="grid"`, a roving single tab-stop, 2-D APG arrow-key cell navigation, range selection, and clipboard support.
    */
   interactionMode: string;
   /**
@@ -305,6 +305,8 @@ declare class DataTable extends DataTable_base {
   expandedTouched: boolean;
   groupingActiveDefault: () => boolean;
   effectiveColumnPinning: () => any;
+  pinSeedApplied: boolean;
+  seedColumnPinning: () => void;
   currentState: () => any;
   currentData: () => any;
   buildConfigDef: (c: any) => {
@@ -385,6 +387,7 @@ declare class DataTable extends DataTable_base {
   onColumnSizingChangeCb: (updater: any) => void;
   onColumnOrderChangeCb: (updater: any) => void;
   onColumnPinningChangeCb: (updater: any) => void;
+  columnSizingInfoSync: any;
   onColumnSizingInfoChangeCb: (updater: any) => void;
   resolveVirtual: () => "rows" | "columns" | "both" | "off";
   rowsWindowed: () => boolean;
@@ -779,7 +782,7 @@ declare class Column extends Column_base {
    */
   filterable: boolean;
   /**
-   * Pin side: `''` (unpinned) | `'left'` | `'right'`. Reserved metadata carried into the parent's column pinning state.
+   * Initial pin side: `''` (unpinned) | `'left'` | `'right'`. Applied once as the table's starting `columnPinning` state, so `getIsPinned()` reports it and the column joins the matching sticky rail — which also reorders it, since visible cells are ordered `[left-pinned, center, right-pinned]`. Ignored if the consumer has already pinned something; an interactive unpin is never re-applied.
    */
   pinned: string;
   /**
@@ -803,7 +806,7 @@ declare class Column extends Column_base {
    */
   editable: boolean;
   /**
-   * Built-in editor type for this column: `'text'` | `'number'` | `'select'` | `'checkbox'`. Ignored when a custom `#editor` scoped slot handles the column. Default `'text'`.
+   * Editor type for this column: `'text'` | `'number'` | `'select'` | `'checkbox'` (built-in inputs), or `'custom'` to hand rendering to the `#editor` scoped slot (or a per-column `editor-<columnId>` fill). Default `'text'`. **`'custom'` is the gate:** a column left on a built-in type ignores any `#editor` fill and renders the built-in input. Requires `editable: true` — and, for any pointer or keyboard edit entry, `interactionMode="grid"` on the table.
    */
   editor: string;
   /**

package/dist/index.mjs

@@ -439,6 +439,34 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				left: rail.concat(deduped)
 			};
 		};
+		this.pinSeedApplied = false;
+		this.seedColumnPinning = () => {
+			if (this.pinSeedApplied) return;
+			const live = this.columnPinning != null ? this.columnPinning : this._columnPinningDefault.value;
+			const isRealPin = (id) => id !== this.SELECT_COL_ID && id !== this.EXPANDER_COL_ID;
+			if ((live && live.left ? live.left : []).filter(isRealPin).length > 0 || (live && live.right ? live.right : []).filter(isRealPin).length > 0) {
+				this.pinSeedApplied = true;
+				return;
+			}
+			const defs = this.columnDefs();
+			if (!defs.length) return;
+			const left = [];
+			const right = [];
+			for (let i = 0; i < defs.length; i++) {
+				const def = defs[i];
+				if (!def) continue;
+				if (def.pinned === "left") left.push(def.id);
+				else if (def.pinned === "right") right.push(def.id);
+			}
+			if (!left.length && !right.length) return;
+			this.pinSeedApplied = true;
+			const seeded = {
+				left,
+				right
+			};
+			this._columnPinningDefault.value = seeded;
+			this._columnPinningControllable.write(seeded);
+		};
 		this.currentState = () => ({
 			sorting: this.sorting != null ? this.sorting : this._sortingDefault.value,
 			globalFilter: this.globalFilter != null ? this.globalFilter : this._globalFilterDefault.value,
@@ -835,9 +863,12 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.onColumnPinningChangeCb = (updater) => {
 			this.writeColumnPinning(applyUpdater(updater, this.currentState().columnPinning));
 		};
+		this.columnSizingInfoSync = null;
 		this.onColumnSizingInfoChangeCb = (updater) => {
-			const next = applyUpdater(updater, this._columnSizingInfo.value);
-			this._columnSizingInfo.value = next != null ? next : this._columnSizingInfo.value;
+			const next = applyUpdater(updater, this.columnSizingInfoSync != null ? this.columnSizingInfoSync : this._columnSizingInfo.value);
+			if (next == null) return;
+			this.columnSizingInfoSync = next;
+			this._columnSizingInfo.value = next;
 		};
 		this.resolveVirtual = () => {
 			const v = this.virtual;
@@ -2976,6 +3007,11 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const tryFocus = () => {
 				const el = this.resolveCellEl(String(row), col);
 				if (el) {
+					const ae = this.gridRoot && this.gridRoot.getRootNode ? this.gridRoot.getRootNode().activeElement : null;
+					if (ae && ae !== el && this.gridRoot.contains && this.gridRoot.contains(ae) && ae.closest) {
+						const aeCell = ae.closest("[data-grid-cell]");
+						if (aeCell && aeCell !== el) return;
+					}
 					el.focus();
 					return;
 				}
@@ -3596,6 +3632,34 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 	static {
 		this.styles = css`
 :host{display:contents}
+:host {
+  --rdt-font: var(--rozie-data-table-font);
+  --rdt-color: var(--rozie-data-table-fg);
+  --rdt-cell-padding: var(--rozie-data-table-cell-padding);
+  --rdt-border: 1px solid var(--rozie-data-table-border-color);
+  --rdt-header-bg: var(--rozie-data-table-header-bg);
+  --rdt-header-weight: var(--rozie-data-table-header-weight);
+  --rdt-sort-ind-opacity: var(--rozie-data-table-sort-indicator-opacity);
+  --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-filter-radius: var(--rozie-data-table-radius);
+  --rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-page-btn-radius: var(--rozie-data-table-radius);
+  --rdt-page-btn-disabled-opacity: var(--rozie-data-table-disabled-opacity);
+  --rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-page-size-radius: var(--rozie-data-table-radius);
+  --rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color);
+  --rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active);
+  --rdt-pin-btn-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-pin-btn-radius: var(--rozie-data-table-radius);
+  --rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg);
+  --rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-colvis-summary-radius: var(--rozie-data-table-radius);
+  --rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color);
+  --rdt-colvis-menu-radius: var(--rozie-data-table-radius);
+  --rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg);
+  --rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow);
+  --rdt-select-accent: var(--rozie-data-table-select-accent);
+}
 .rozie-data-table[data-rozie-s-d5dcab4c] {
   border-collapse: collapse;
   width: 100%;
@@ -4107,6 +4171,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					return;
 				}
 				(() => {
+					this.seedColumnPinning();
 					this.reFeed();
 					this.maybeClearHistoryOnExternalSwap();
 				})();
@@ -4146,6 +4211,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}))(this));
 		}));
 		this._dataDefault.value = this.data || [];
+		this.seedColumnPinning();
 		this.table = createTable({
 			data: this.currentData(),
 			columns: this.tableColumns(),
@@ -4240,6 +4306,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				}
 				if (this.colsWindowed()) {
 					if (!(this.gridScrollEl ? this.gridScrollEl.clientWidth : 0)) 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");
+					this.bumpWindowVer();
 				}
 			};
 			if (typeof requestAnimationFrame === "function") requestAnimationFrame(() => requestAnimationFrame(afterFirstFrame));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-lit",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -45,7 +45,7 @@
     "src"
   ],
   "dependencies": {
-    "@rozie/runtime-lit": "0.7.3"
+    "@rozie/runtime-lit": "^0.7.4"
   },
   "peerDependencies": {
     "lit": "^3.2",

package/src/Column.ts

@@ -34,7 +34,7 @@ export default class Column extends SignalWatcher(LitElement) {
    */
   @property({ type: Boolean, reflect: true }) filterable: boolean = false;
   /**
-   * Pin side: `''` (unpinned) | `'left'` | `'right'`. Reserved metadata carried into the parent's column pinning state.
+   * Initial pin side: `''` (unpinned) | `'left'` | `'right'`. Applied once as the table's starting `columnPinning` state, so `getIsPinned()` reports it and the column joins the matching sticky rail — which also reorders it, since visible cells are ordered `[left-pinned, center, right-pinned]`. Ignored if the consumer has already pinned something; an interactive unpin is never re-applied.
    */
   @property({ type: String, reflect: true }) pinned: string = '';
   /**
@@ -58,7 +58,7 @@ export default class Column extends SignalWatcher(LitElement) {
    */
   @property({ type: Boolean, reflect: true }) editable: boolean = false;
   /**
-   * Built-in editor type for this column: `'text'` | `'number'` | `'select'` | `'checkbox'`. Ignored when a custom `#editor` scoped slot handles the column. Default `'text'`.
+   * Editor type for this column: `'text'` | `'number'` | `'select'` | `'checkbox'` (built-in inputs), or `'custom'` to hand rendering to the `#editor` scoped slot (or a per-column `editor-<columnId>` fill). Default `'text'`. **`'custom'` is the gate:** a column left on a built-in type ignores any `#editor` fill and renders the built-in input. Requires `editable: true` — and, for any pointer or keyboard edit entry, `interactionMode="grid"` on the table.
    */
   @property({ type: String, reflect: true }) editor: string = 'text';
   /**

package/src/DataTable.ts

@@ -130,6 +130,34 @@ export default class DataTable extends SignalWatcher(LitElement) {
 
   static styles = css`
 :host{display:contents}
+:host {
+  --rdt-font: var(--rozie-data-table-font);
+  --rdt-color: var(--rozie-data-table-fg);
+  --rdt-cell-padding: var(--rozie-data-table-cell-padding);
+  --rdt-border: 1px solid var(--rozie-data-table-border-color);
+  --rdt-header-bg: var(--rozie-data-table-header-bg);
+  --rdt-header-weight: var(--rozie-data-table-header-weight);
+  --rdt-sort-ind-opacity: var(--rozie-data-table-sort-indicator-opacity);
+  --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-filter-radius: var(--rozie-data-table-radius);
+  --rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-page-btn-radius: var(--rozie-data-table-radius);
+  --rdt-page-btn-disabled-opacity: var(--rozie-data-table-disabled-opacity);
+  --rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-page-size-radius: var(--rozie-data-table-radius);
+  --rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color);
+  --rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active);
+  --rdt-pin-btn-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-pin-btn-radius: var(--rozie-data-table-radius);
+  --rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg);
+  --rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-colvis-summary-radius: var(--rozie-data-table-radius);
+  --rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color);
+  --rdt-colvis-menu-radius: var(--rozie-data-table-radius);
+  --rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg);
+  --rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow);
+  --rdt-select-accent: var(--rozie-data-table-select-accent);
+}
 .rozie-data-table[data-rozie-s-d5dcab4c] {
   border-collapse: collapse;
   width: 100%;
@@ -467,14 +495,14 @@ export default class DataTable extends SignalWatcher(LitElement) {
 `;
 
   /**
-   * The row data — `model: true`, so a committed cell/row edit writes a **fresh** array back through `r-model:data` (uncontrolled fallback `dataDefault`). A stable reference per Rozie's setup-once model — fed directly into table-core (never map/cloned in the watcher).
+   * The row data — `model: true`, so a committed cell/row edit writes a **fresh** array back through the two-way `data` binding (uncontrolled fallback `dataDefault`). A stable reference per Rozie's setup-once model — fed directly into table-core (never map/cloned in the watcher).
    * @example
    * <rozie-data-table .data=${rows} @data-change=${…} .columns=${cols}></rozie-data-table>
    */
   @property({ type: Array, attribute: 'data' }) _data_attr!: any[];
   private _dataControllable = createLitControllableProperty<any[]>({ host: this, eventName: 'data-change', defaultValue: [], initialControlledValue: undefined });
   /**
-   * Config-array column fallback (lower precedence than `<Column>` children). Each entry: `{ id?, field, header?, sortable?, filterable?, pinned?, width? }`. Columns may come from this array, from `<Column>` children, or both (id-keyed last-write-wins union).
+   * Config-array column fallback (lower precedence than `<Column>` children). Each entry: `{ id?, field, header?, sortable?, filterable?, pinned?, width? }`. Columns may come from this array, from `<Column>` children, or both (id-keyed last-write-wins union). A `pinned` value of `'left'` or `'right'` is applied once as the table's initial `columnPinning` state — identical to `<Column pinned>` — which also REORDERS that column, since table-core orders visible cells `[left-pinned, center, right-pinned]`. A consumer who has already expressed a pin (an initial two-way `columnPinning` model value or an interactive pin) owns the slice and this declaration is ignored.
    */
   @property({ type: Array }) columns: any[] = [];
   /**
@@ -520,7 +548,7 @@ export default class DataTable extends SignalWatcher(LitElement) {
    */
   @property({ type: Number, reflect: true }) pageCount: number | null = null;
   /**
-   * Opt-in **expandable rows**. When `true`, a leading chevron expander column auto-injects (after the select column) and `getExpandedRowModel` activates; default `false` is byte-identical-off. Every row can expand to reveal a `#detail` panel unless `getSubRows` is supplied (then only rows with children expand). Bind `:expandable="true"` (a bare attr only coerces on Vue+Lit).
+   * Opt-in **expandable rows**. When `true`, a leading chevron expander column auto-injects (after the select column) and `getExpandedRowModel` activates; default `false` is byte-identical-off. Every row can expand to reveal a `#detail` panel unless `getSubRows` is supplied (then only rows with children expand). Pass `expandable` as a real boolean — a valueless attribute only coerces to `true` on Vue and Lit.
    */
   @property({ type: Boolean, reflect: true }) expandable: boolean = false;
   /**
@@ -537,7 +565,7 @@ export default class DataTable extends SignalWatcher(LitElement) {
    */
   @property({ type: Boolean, reflect: true }) groupable: boolean = false;
   /**
-   * `GroupingState` — an ordered `string[]` of column ids (multi-column → nested groups, e.g. `['region','category']`). An empty/unbound list is ungrouped (byte-identical-off). Group-header rows are collapsible (they ride the expand model). Surfaces through `group-change`; uncontrolled fallback (`$data.groupingDefault`, default `[]`) when unbound — the default is `null` (mirroring `expanded`) so the uncontrolled fallback is reachable and the grouping auto-expand default can activate when a consumer applies grouping without binding `r-model:grouping` (a non-null `[]` default would short-circuit it). All reads are null-guarded, so table-core still receives an array.
+   * `GroupingState` — an ordered `string[]` of column ids (multi-column → nested groups, e.g. `['region','category']`). An empty/unbound list is ungrouped (byte-identical-off). Group-header rows are collapsible (they ride the expand model). Surfaces through `group-change`; uncontrolled fallback (`$data.groupingDefault`, default `[]`) when unbound — the default is `null` (mirroring `expanded`) so the uncontrolled fallback is reachable and the grouping auto-expand default can activate when a consumer applies grouping without binding the two-way `grouping` model (a non-null `[]` default would short-circuit it). All reads are null-guarded, so table-core still receives an array.
    */
   @property({ type: Array, attribute: 'grouping' }) _grouping_attr: any[] | null = null;
   private _groupingControllable = createLitControllableProperty<any[]>({ host: this, eventName: 'grouping-change', defaultValue: null, initialControlledValue: undefined });
@@ -577,7 +605,7 @@ export default class DataTable extends SignalWatcher(LitElement) {
    */
   @property({ type: Boolean, reflect: true }) stickyHeader: boolean = false;
   /**
-   * `'table'` (default, row-oriented, byte-behaviorally identical to a plain accessible table) | `'grid'` (GA since Phase 63) — lights up the full WAI-ARIA **[grid interaction mode](/components/data-table-grid-mode)**: `role="grid"`, a roving single tab-stop, 2-D APG arrow-key cell navigation, range selection, and clipboard support.
+   * `'table'` (default, row-oriented, byte-behaviorally identical to a plain accessible table) | `'grid'` — lights up the full WAI-ARIA **[grid interaction mode](/components/data-table-grid-mode)**: `role="grid"`, a roving single tab-stop, 2-D APG arrow-key cell navigation, range selection, and clipboard support.
    */
   @property({ type: String, reflect: true }) interactionMode: string = 'table';
   /**
@@ -912,6 +940,12 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     // (Consumers memoize the array as with $props.data/$props.sorting; the uncontrolled
     // <Column>-children path leaves $props.columns undefined — a stable no-op getter.)
     this.columns, this._colReg.value])(); untracked(() => { if (this.__rozieWatchInitial_0) { this.__rozieWatchInitial_0 = false; return; } (() => {
+      // Seed BEFORE the re-feed so the pinning this call may write is part of the state object
+      // table-core receives on this same tick (rather than landing a frame late and re-ordering
+      // getVisibleCells() a render after the columns appear). One-shot and self-latching — see
+      // seedColumnPinning() in stateAssembly.rzts. This is the `<Column>`-children entry point:
+      // those register during mount, so the $onMount call below can find zero columns.
+      this.seedColumnPinning();
       this.reFeed();
       this.maybeClearHistoryOnExternalSwap();
     })(); }); }));
@@ -945,6 +979,19 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     // a one-way `:data`) has a base array to whole-array-replace. currentData() then sources
     // the bound prop when controlled, this fallback otherwise.
     this._dataDefault.value = this.data || [];
+    // Apply any per-column `pinned` declaration as the INITIAL pinning state BEFORE createTable
+    // reads currentState() below, so the first row model table-core builds is already correctly
+    // ordered (getVisibleCells() returns [left-pinned, center, right-pinned]) rather than
+    // re-ordering a render later. Covers the `:columns` config-array form, which is available
+    // now; `<Column>` children register during mount and are covered by the re-feed watch's own
+    // call. One-shot and self-latching — see seedColumnPinning() in stateAssembly.rzts.
+    // Apply any per-column `pinned` declaration as the INITIAL pinning state BEFORE createTable
+    // reads currentState() below, so the first row model table-core builds is already correctly
+    // ordered (getVisibleCells() returns [left-pinned, center, right-pinned]) rather than
+    // re-ordering a render later. Covers the `:columns` config-array form, which is available
+    // now; `<Column>` children register during mount and are covered by the re-feed watch's own
+    // call. One-shot and self-latching — see seedColumnPinning() in stateAssembly.rzts.
+    this.seedColumnPinning();
     // Build the table instance HERE so the closures below capture the live `table`.
     // Build the table instance HERE so the closures below capture the live `table`.
     this.table = createTable({
@@ -1267,6 +1314,31 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
           if (!w) {
             console.warn('[rozie-data-table] virtual is on for columns but the scroll container has no bounded width; set a CSS width on an ancestor so the column window can be measured');
           }
+          // COLUMN-AXIS FIRST-WINDOW BUMP (quick 260908-vcy). The mount-kick above fires right
+          // after `new Virtualizer(...)` — BEFORE colVirtualizer has measured, and before the
+          // spacer effects even exist. Any fine-grained subscriber created inside that measure
+          // gap takes colPadLeft()/colPadRight()'s `if (!items.length) return 0` early return,
+          // which reads ONLY windowVer + editVer and never reaches the live path's reads
+          // (forcedColumns()/columnSize()/column state). Its dependency set is therefore those
+          // two counters alone — and without this bump nothing ever touches them again, so the
+          // subscriber stays frozen at 0 for the lifetime of the component. Measured on Svelte:
+          // the FIRST header row's trailing spacer froze at 0px while its siblings (created
+          // after measurement, on the live path) tracked correctly; under table-layout:fixed the
+          // first row alone establishes column widths, so that one cell collapsed the whole
+          // table's scrollWidth from 9000 to 1350. The five other targets re-render wholesale
+          // (Solid re-creates these rows), which masked it.
+          //
+          // The ROW axis has always been safe here only by accident: remeasureWindow() above
+          // already routes through bumpWindowVer() on this same post-first-frame callback. This
+          // is the column axis's missing equivalent — not a Svelte workaround (the emitted
+          // Svelte binding is a correct reactive template_effect; the dependency set is what was
+          // wrong), so it is fixed once, in the shared engine's consumer, for all six targets.
+          //
+          // Routed through bumpWindowVer() rather than a raw `$data.windowVer = $data.windowVer + 1`
+          // to keep 87-10's microtask coalescing AND to avoid manufacturing the ROZ138
+          // false positive that a second in-body counter self-read would trip (see the
+          // mount-kick's own comment above).
+          this.bumpWindowVer();
         }
       };
       if (typeof requestAnimationFrame === 'function') requestAnimationFrame(() => requestAnimationFrame(afterFirstFrame));else setTimeout(afterFirstFrame, 0);
@@ -1287,12 +1359,12 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     this.maybeClearHistoryOnExternalSwap();
     if (!this.table) return;
     // Phase 51 req-4: track currentData() (the bound prop OR the uncontrolled
-    // $data.dataDefault) so a committed edit re-feeds on Lit whether or not r-model:data is
-    // bound. Compare by reference AND length so a same-length single-cell edit (fresh array,
+    // $data.dataDefault) so a committed edit re-feeds on Lit whether or not the two-way
+    // `data` model is bound. Compare by reference AND length so a same-length single-cell edit (fresh array,
     // identical length) still re-feeds.
     // Phase 51 req-4: track currentData() (the bound prop OR the uncontrolled
-    // $data.dataDefault) so a committed edit re-feeds on Lit whether or not r-model:data is
-    // bound. Compare by reference AND length so a same-length single-cell edit (fresh array,
+    // $data.dataDefault) so a committed edit re-feeds on Lit whether or not the two-way
+    // `data` model is bound. Compare by reference AND length so a same-length single-cell edit (fresh array,
     // identical length) still re-feeds.
     const d = this.currentData() || [];
     if (d === this.lastData && d.length === this.lastDataLen) return;
@@ -1733,6 +1805,96 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   };
 };
 
+  // seedColumnPinning(): apply the per-column `pinned` declaration ('left' | 'right') — from the
+  // `:columns` config array or a `<Column pinned="...">` child — as the INITIAL columnPinning
+  // state, exactly once.
+  //
+  // Until now that field was carried onto every ColumnDef by columnBuilders.rzts and then read by
+  // nobody: `column.getIsPinned()` returned false for a column declared `pinned="left"`, so the
+  // documented per-column API was inert while `r-model:columnPinning` was the only mechanism that
+  // actually pinned anything.
+  //
+  // Three invariants, each load-bearing:
+  //   1. ONE-SHOT, LATCHED ON THE OUTCOME — never merely on "we ran". The latch flips only when
+  //      a seed is actually applied, or when a consumer pin is observed; a call that finds no
+  //      declared pins leaves it DOWN and will look again on the next re-feed. Latching on the
+  //      first call that saw any column at all was wrong, and Lit proved it: `<Column>` children
+  //      register INCREMENTALLY there, one re-feed per child, so the first call sees only
+  //      `name` — no pins declared yet — and a run-once latch would disable the seed
+  //      permanently before `amount pinned="right"` ever registered. The other five targets
+  //      batch all children into a single flush, which hid the race entirely. Once a seed HAS
+  //      been applied the latch holds, so a subsequent interactive UNPIN is never re-seeded —
+  //      which is the whole reason this is not folded into effectiveColumnPinning().
+  //   2. ONLY WHEN NOTHING IS PINNED YET. Note this is NOT an `$props.columnPinning == null`
+  //      check: the prop carries `default: () => ({ left: [], right: [] })`, so it is never null
+  //      and a bound-vs-unbound test is impossible here. The meaningful question is whether the
+  //      consumer has actually expressed a pin — if they have, they own the slice and the
+  //      per-column declaration must not fight it; if the state is empty, `pinned` IS the
+  //      initial state and applying it is the whole point.
+  //   3. NO CHROME IDS. The select/expander rail is injected by effectiveColumnPinning() on read
+  //      and stripped by writeColumnPinning() on write; the persisted state must never contain
+  //      them. Seeding only real column ids keeps that discipline.
+  //
+  // Writes BOTH the uncontrolled holder and `$model.columnPinning` so a consumer with a two-way
+  // binding sees the pinning that is actually in effect rather than a stale empty object — but
+  // does NOT emit `pin-change`: this is initial state derived from the consumer's own markup, not
+  // a user action, and firing a change event for it on mount would be noise.
+  //
+  // Called from $onMount (covers the `:columns` config-array form, known at mount) AND from the
+  // re-feed watch (covers `<Column>` children, which register during mount, and a runtime
+  // `:columns` swap that arrives before any pin interaction). The `!defs.length` bail is what
+  // makes the mount call harmless when columns are not known yet — the latch stays down and the
+  // next re-feed seeds instead.
+  pinSeedApplied = false;
+
+  seedColumnPinning = (): void => {
+  if (this.pinSeedApplied) return;
+  // Invariant 2: bail if the consumer already pinned something (either an initial bound value
+  // or an interaction that beat us here). Read the same source order effectiveColumnPinning()
+  // does, minus the chrome rail it injects on read — the rail is structural, not a consumer pin.
+  const live = this.columnPinning != null ? this.columnPinning : this._columnPinningDefault.value;
+  const isRealPin = (id: string) => id !== this.SELECT_COL_ID && id !== this.EXPANDER_COL_ID;
+  const pinnedAlready = (live && live.left ? live.left : []).filter(isRealPin).length > 0 || (live && live.right ? live.right : []).filter(isRealPin).length > 0;
+  if (pinnedAlready) {
+    this.pinSeedApplied = true;
+    return;
+  }
+  const defs = this.columnDefs();
+  if (!defs.length) return;
+  const left: string[] = [];
+  const right: string[] = [];
+  for (let i = 0; i < defs.length; i++) {
+    const def = defs[i];
+    if (!def) continue;
+    if (def.pinned === 'left') left.push(def.id);else if (def.pinned === 'right') right.push(def.id);
+  }
+  // Invariant 1: no declared pins in the column set we can currently SEE is not evidence there
+  // are none — on Lit the set is still filling in. Leave the latch down and try again on the
+  // next re-feed; the only exits are "seeded" (below) and "consumer already pinned" (above).
+  if (!left.length && !right.length) return;
+  this.pinSeedApplied = true;
+  // Nothing was pinned (invariant 2 above), so this is a plain assignment, not a merge — the
+  // only ids that could be in `live` are the structural chrome rail, which must never be
+  // persisted (invariant 3). Writes the uncontrolled holder AND the two-way model so both
+  // binding modes observe the pinning that is actually in effect; deliberately does NOT route
+  // through writeColumnPinning(), whose job is to emit `pin-change` for real user actions.
+  // Annotated `any` for the same reason currentState() is (see its comment below): the
+  // uncontrolled holder's initial value is the empty literal `{ left: [], right: [] }`, so the
+  // emitted per-target state holder infers `{ left: never[]; right: never[] }` and a genuinely
+  // populated `{ left: string[]; right: string[] }` will not assign to it under the strict
+  // bundled-leaf tsc (react TS2345 on setColumnPinningDefault, solid TS2769, lit TS2322 — one
+  // per target, all the same never[] inference). The runtime shape is correct; this is the
+  // established idiom here rather than widening three per-leaf strict baselines for it.
+  // writeColumnPinning() never hits this because its payload flows through `strip()`, which
+  // returns `any[]`.
+  const seeded: any = {
+    left,
+    right
+  };
+  this._columnPinningDefault.value = seeded;
+  this._columnPinningControllable.write(seeded);
+};
+
   // Assemble the live state object from bound r-model slices (?? uncontrolled fallback).
   // All NINE slices are wired (each ?? its own $data.<slice>Default). table-core reads
   // this whole object as `state`. Return type annotated `any`: the inferred object-literal
@@ -2467,9 +2629,43 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this.writeColumnPinning(applyUpdater(updater, this.currentState().columnPinning));
 };
 
+  // columnSizingInfo is the ONLY slice table-core drives as a rapid, multi-call gesture: a resize
+  // drag fires this updater once on pointerdown (seeding startOffset/startSize/isResizingColumn)
+  // and then again on EVERY mousemove, each call reading the values the previous one wrote.
+  //
+  // That read-your-own-last-write requirement is what makes a plain `$data` read wrong here on
+  // React. These callbacks are handed to createTable in $onMount, so on React the closure binds a
+  // MOUNT-TIME `$data.columnSizingInfo` and never sees its own writes. Measured on the shipped
+  // leaf (quick 260909, instrumented build): pointerdown correctly wrote
+  // `{ startOffset: 163, isResizingColumn: 'col0' }`, and then every single mousemove still saw
+  // `startOffset: null, isResizingColumn: false` — so it computed deltaOffset from 0 instead of
+  // 163 (179, 195, 211… instead of 16, 32, 48…) AND wrote `isResizingColumn: false` back, wiping
+  // the gesture on the first move. Net effect: column resizing did nothing at all on React while
+  // working on the other five. It was masked because the one VR case that drives a real drag was
+  // `test.fixme`'d on React as a presumed harness limitation (87-05 Task 3) — a real CDP drag
+  // with intermediate steps fails there too, which is what proved it a product bug.
+  //
+  // Why not just read `currentState().columnSizingInfo` like the eleven siblings above: that
+  // idiom relies on the re-feed $watch re-passing fresh callbacks into setOptions, and that watch
+  // fires on data/column changes — NOT on every render, and never mid-gesture. It is sufficient
+  // for one-shot updaters (a sort toggle, a selection click) and insufficient here, where
+  // table-core issues a burst of updaters between any two re-feeds.
+  //
+  // Fix: a synchronous module-scope mirror, written on the same tick as the state. Reads prefer
+  // the mirror, so each updater in a gesture composes on the previous one's result regardless of
+  // when the host framework commits. Behaviourally identical on the five targets whose state read
+  // was already synchronous (mirror and state agree), and the slice is transient gesture state
+  // owned entirely by table-core — nothing else writes it — so the mirror cannot drift.
+  // Same trick as the `committedThisSession` commit latch (editCellLifecycle.rzts), for the same
+  // reason: a sync latch survives React's async window.
+  columnSizingInfoSync: any = null;
+
   onColumnSizingInfoChangeCb = (updater: any) => {
-  const next = applyUpdater(updater, this._columnSizingInfo.value);
-  this._columnSizingInfo.value = next != null ? next : this._columnSizingInfo.value;
+  const base = this.columnSizingInfoSync != null ? this.columnSizingInfoSync : this._columnSizingInfo.value;
+  const next = applyUpdater(updater, base);
+  if (next == null) return;
+  this.columnSizingInfoSync = next;
+  this._columnSizingInfo.value = next;
 };
 
   // ══ Vertical row windowing (phase 53, req-1/2/3/6/9/10) — the virtual-core bridge ════════
@@ -6938,6 +7134,21 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   const tryFocus = () => {
     const el = this.resolveCellEl(String(row), col);
     if (el) {
+      // B-05 / F-07: do NOT stomp focus a later interaction has already placed on a DIFFERENT
+      // grid cell. This poll runs up to 30 frames after commit/cancel, so without this guard a
+      // user (or a test) who moves to the next cell in that window gets yanked BACK to the cell
+      // they just left — and because the steal depends on rAF timing it presents as a flake that
+      // rotates across targets rather than as a reproducible bug. Measured 2026-09-12: the
+      // data-table-dropins editor case failed with the active cell pinned to the PREVIOUS column
+      // (want 0/2, active 0/1; want 0/1, active 0/0) with no editor open.
+      // focusEditorWhenReady already carries the equivalent guard against the same class of
+      // theft; this is its missing twin. Compare the OWNING CELL (not node identity) so a
+      // node-replacing re-render on Solid still resolves a genuinely dropped focus as recoverable.
+      const ae = this.gridRoot && this.gridRoot.getRootNode ? this.gridRoot.getRootNode().activeElement : null;
+      if (ae && ae !== el && this.gridRoot.contains && this.gridRoot.contains(ae) && ae.closest) {
+        const aeCell = ae.closest('[data-grid-cell]');
+        if (aeCell && aeCell !== el) return;
+      }
       el.focus();
       return;
     }