@rozie-ui/data-table-lit 0.7.2 → 0.7.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @rozie-ui/data-table-lit
 
+## 0.7.4
+
+### Patch Changes
+
+- 05cb9db: Regenerated with the Lit nullable model prop typing fix: the two-way `grouping` property is now typed `any[] | null` (its default is `null`, so the narrower `any[]` was never true), which a strict TypeScript consumer reading `element.grouping` now sees. Rendered markup and runtime behaviour are unchanged.
+  - @rozie/runtime-lit@0.10.1
+
+## 0.7.3
+
+### Patch Changes
+
+- cf49212: Regenerated with the compiler fixes found while building `@rozie-ui/select`. Depending on the target and the component:
+  - Angular: a two-way (`model: true`) prop is now controlled while the consumer binds a value — a write by the component only emits `<name>Change`, so a consumer that refuses the change keeps the control on its value. The prop keeps its `ModelSignal` type. `$onUpdate` hooks now run (after every render); they never ran before. An output named like a native bubbling event (`change`, `submit`, `reset`, `select`) no longer also delivers the native event to a consumer's binding.
+  - Vue: a two-way prop bound one-way (`:value` without `v-model`) is now controlled too: the component's write emits `update:value` and the control keeps the consumer's value.
+  - React: an `$expose` verb now runs in `flushSync`, so calls made in one tick each see what the call before left; primitive script constants are plain `const`s; a body statement no longer reads a binding declared after it on the first render.
+  - Svelte, Solid: a `$watch` now sees a `$data` write made in `$onMount`.
+  - Lit: a `$watch` whose getter reads both props and `$data` re-runs when only the prop changes; duplicated comments in lifecycle bodies are gone.
+  - @rozie/runtime-lit@0.10.0
+
 ## 0.7.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -421,6 +421,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		this.__rozieWatchInitial_0 = true;
 		this.__rozieWatchInitial_1 = true;
 		this.__rozieWatchInitial_2 = true;
+		this.__rozieFirstUpdateDone = false;
 		this.__rozieCtxProvider_data_table_columns = new _lit_context.ContextProvider(this, {
 			context: __rozieCtx_data_table_columns$1,
 			initialValue: ((__rozieCtxHost) => ({
@@ -4664,8 +4665,31 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			});
 		}));
 		this._disconnectCleanups.push((0, _lit_labs_preact_signals.effect)(() => {
-			this.sorting, this.globalFilter, this.columnFilters, this.pagination, this.rowCount, this.pageCount, this.rowSelection, this.expanded, this.expandable, this.grouping, this.groupable, this.columnVisibility, this.columnSizing, this.columnOrder, this.columnPinning, this.selectionMode, (this.data || []).length, this.data, this._dataDefault.value, this.columns, this._colReg.value;
+			const __watchVal = [
+				this.sorting,
+				this.globalFilter,
+				this.columnFilters,
+				this.pagination,
+				this.rowCount,
+				this.pageCount,
+				this.rowSelection,
+				this.expanded,
+				this.expandable,
+				this.grouping,
+				this.groupable,
+				this.columnVisibility,
+				this.columnSizing,
+				this.columnOrder,
+				this.columnPinning,
+				this.selectionMode,
+				(this.data || []).length,
+				this.data,
+				this._dataDefault.value,
+				this.columns,
+				this._colReg.value
+			];
 			(0, _lit_labs_preact_signals.untracked)(() => {
+				this.__rozieWatchPrev_1 = __watchVal;
 				if (this.__rozieWatchInitial_1) {
 					this.__rozieWatchInitial_1 = false;
 					return;
@@ -4833,15 +4857,51 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		this.announceState.globalFilter = this.effectiveGlobalFilter();
 	}
 	updated(changedProperties) {
-		this.maybeClearHistoryOnExternalSwap();
-		this.emitVisibleRangeIfChanged();
-		this.remeasureColumnSizes();
-		if (!this.table) return;
-		const d = this.currentData() || [];
-		if (d === this.lastData && d.length === this.lastDataLen) return;
-		this.lastData = d;
-		this.lastDataLen = d.length;
-		this.reFeed();
+		if (this.__rozieFirstUpdateDone && (changedProperties.has("rowCount") || changedProperties.has("pageCount") || changedProperties.has("expandable") || changedProperties.has("groupable") || changedProperties.has("selectionMode") || changedProperties.has("columns"))) {
+			const __watchVal = (0, _lit_labs_preact_signals.untracked)(() => [
+				this.sorting,
+				this.globalFilter,
+				this.columnFilters,
+				this.pagination,
+				this.rowCount,
+				this.pageCount,
+				this.rowSelection,
+				this.expanded,
+				this.expandable,
+				this.grouping,
+				this.groupable,
+				this.columnVisibility,
+				this.columnSizing,
+				this.columnOrder,
+				this.columnPinning,
+				this.selectionMode,
+				(this.data || []).length,
+				this.data,
+				this._dataDefault.value,
+				this.columns,
+				this._colReg.value
+			]);
+			if (!Object.is(__watchVal, this.__rozieWatchPrev_1)) {
+				this.__rozieWatchPrev_1 = __watchVal;
+				(0, _lit_labs_preact_signals.untracked)(() => (() => {
+					this.seedColumnPinning();
+					this.reFeed();
+					this.maybeClearHistoryOnExternalSwap();
+				})());
+			}
+		}
+		this.__rozieFirstUpdateDone = true;
+		(() => {
+			this.maybeClearHistoryOnExternalSwap();
+			this.emitVisibleRangeIfChanged();
+			this.remeasureColumnSizes();
+			if (!this.table) return;
+			const d = this.currentData() || [];
+			if (d === this.lastData && d.length === this.lastDataLen) return;
+			this.lastData = d;
+			this.lastDataLen = d.length;
+			this.reFeed();
+		})();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -6166,12 +6226,14 @@ let Column = class Column extends (0, _lit_labs_preact_signals.SignalWatcher)(li
 			})();
 		}
 		this.__rozieFirstUpdateDone = true;
-		if (this.registered) return;
-		const live = this.registry;
-		if (live == null) return;
-		this.reg = live;
-		this.registered = true;
-		this.reg.registerColumn(this.colId(), this.buildSpec());
+		(() => {
+			if (this.registered) return;
+			const live = this.registry;
+			if (live == null) return;
+			this.reg = live;
+			this.registered = true;
+			this.reg.registerColumn(this.colId(), this.buildSpec());
+		})();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -6899,6 +6961,7 @@ let FilterNumberRange = class FilterNumberRange extends (0, _lit_labs_preact_sig
 		this._maxDraft = (0, _lit_labs_preact_signals.signal)("");
 		this._touched = (0, _lit_labs_preact_signals.signal)(false);
 		this.__rozieWatchInitial_0 = true;
+		this.__rozieFirstUpdateDone = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
 		this.minDraftValue = () => this._touched.value ? this._minDraft.value : Array.isArray(this.value) && this.value[0] != null ? String(this.value[0]) : "";
@@ -6937,8 +7000,9 @@ let FilterNumberRange = class FilterNumberRange extends (0, _lit_labs_preact_sig
 	}
 	firstUpdated() {
 		this._disconnectCleanups.push((0, _lit_labs_preact_signals.effect)(() => {
-			Array.isArray(this.value) && String(this.value[0]) + "" + String(this.value[1]);
+			const __watchVal = Array.isArray(this.value) ? String(this.value[0]) + "\0" + String(this.value[1]) : "";
 			(0, _lit_labs_preact_signals.untracked)(() => {
+				this.__rozieWatchPrev_0 = __watchVal;
 				if (this.__rozieWatchInitial_0) {
 					this.__rozieWatchInitial_0 = false;
 					return;
@@ -6947,6 +7011,16 @@ let FilterNumberRange = class FilterNumberRange extends (0, _lit_labs_preact_sig
 			});
 		}));
 	}
+	updated(changedProperties) {
+		if (this.__rozieFirstUpdateDone && changedProperties.has("value")) {
+			const __watchVal = (0, _lit_labs_preact_signals.untracked)(() => Array.isArray(this.value) ? String(this.value[0]) + "\0" + String(this.value[1]) : "");
+			if (!Object.is(__watchVal, this.__rozieWatchPrev_0)) {
+				this.__rozieWatchPrev_0 = __watchVal;
+				(0, _lit_labs_preact_signals.untracked)(() => (this._touched.value = false, void 0));
+			}
+		}
+		this.__rozieFirstUpdateDone = true;
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		queueMicrotask(() => {

package/dist/index.d.cts

@@ -278,8 +278,10 @@ declare class DataTable extends DataTable_base {
   private _liveAnnounce;
   private _ref__rozieRoot;
   private __rozieWatchInitial_0;
+  private __rozieWatchPrev_1;
   private __rozieWatchInitial_1;
   private __rozieWatchInitial_2;
+  private __rozieFirstUpdateDone;
   private __rozieCtxProvider_data_table_columns;
   private _rozieSlotDistributor;
   private _hasSlotDefault;
@@ -900,8 +902,8 @@ declare class DataTable extends DataTable_base {
   set pagination(v: any);
   get expanded(): any | boolean;
   set expanded(v: any | boolean);
-  get grouping(): any[];
-  set grouping(v: any[]);
+  get grouping(): any[] | null;
+  set grouping(v: any[] | null);
   get rowSelection(): any;
   set rowSelection(v: any);
   get columnVisibility(): any;
@@ -1356,10 +1358,13 @@ declare class FilterNumberRange extends FilterNumberRange_base {
   private _minDraft;
   private _maxDraft;
   private _touched;
+  private __rozieWatchPrev_0;
   private __rozieWatchInitial_0;
+  private __rozieFirstUpdateDone;
   private _disconnectCleanups;
   private _rozieTornDown;
   firstUpdated(): void;
+  updated(changedProperties: Map<string, unknown>): void;
   disconnectedCallback(): void;
   render(): _$lit.TemplateResult<1>;
   minDraftValue: () => string;

package/dist/index.d.mts

@@ -278,8 +278,10 @@ declare class DataTable extends DataTable_base {
   private _liveAnnounce;
   private _ref__rozieRoot;
   private __rozieWatchInitial_0;
+  private __rozieWatchPrev_1;
   private __rozieWatchInitial_1;
   private __rozieWatchInitial_2;
+  private __rozieFirstUpdateDone;
   private __rozieCtxProvider_data_table_columns;
   private _rozieSlotDistributor;
   private _hasSlotDefault;
@@ -900,8 +902,8 @@ declare class DataTable extends DataTable_base {
   set pagination(v: any);
   get expanded(): any | boolean;
   set expanded(v: any | boolean);
-  get grouping(): any[];
-  set grouping(v: any[]);
+  get grouping(): any[] | null;
+  set grouping(v: any[] | null);
   get rowSelection(): any;
   set rowSelection(v: any);
   get columnVisibility(): any;
@@ -1356,10 +1358,13 @@ declare class FilterNumberRange extends FilterNumberRange_base {
   private _minDraft;
   private _maxDraft;
   private _touched;
+  private __rozieWatchPrev_0;
   private __rozieWatchInitial_0;
+  private __rozieFirstUpdateDone;
   private _disconnectCleanups;
   private _rozieTornDown;
   firstUpdated(): void;
+  updated(changedProperties: Map<string, unknown>): void;
   disconnectedCallback(): void;
   render(): _$lit.TemplateResult<1>;
   minDraftValue: () => string;

package/dist/index.mjs

@@ -417,6 +417,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.__rozieWatchInitial_0 = true;
 		this.__rozieWatchInitial_1 = true;
 		this.__rozieWatchInitial_2 = true;
+		this.__rozieFirstUpdateDone = false;
 		this.__rozieCtxProvider_data_table_columns = new ContextProvider(this, {
 			context: __rozieCtx_data_table_columns$1,
 			initialValue: ((__rozieCtxHost) => ({
@@ -4660,8 +4661,31 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			});
 		}));
 		this._disconnectCleanups.push(effect(() => {
-			this.sorting, this.globalFilter, this.columnFilters, this.pagination, this.rowCount, this.pageCount, this.rowSelection, this.expanded, this.expandable, this.grouping, this.groupable, this.columnVisibility, this.columnSizing, this.columnOrder, this.columnPinning, this.selectionMode, (this.data || []).length, this.data, this._dataDefault.value, this.columns, this._colReg.value;
+			const __watchVal = [
+				this.sorting,
+				this.globalFilter,
+				this.columnFilters,
+				this.pagination,
+				this.rowCount,
+				this.pageCount,
+				this.rowSelection,
+				this.expanded,
+				this.expandable,
+				this.grouping,
+				this.groupable,
+				this.columnVisibility,
+				this.columnSizing,
+				this.columnOrder,
+				this.columnPinning,
+				this.selectionMode,
+				(this.data || []).length,
+				this.data,
+				this._dataDefault.value,
+				this.columns,
+				this._colReg.value
+			];
 			untracked(() => {
+				this.__rozieWatchPrev_1 = __watchVal;
 				if (this.__rozieWatchInitial_1) {
 					this.__rozieWatchInitial_1 = false;
 					return;
@@ -4829,15 +4853,51 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.announceState.globalFilter = this.effectiveGlobalFilter();
 	}
 	updated(changedProperties) {
-		this.maybeClearHistoryOnExternalSwap();
-		this.emitVisibleRangeIfChanged();
-		this.remeasureColumnSizes();
-		if (!this.table) return;
-		const d = this.currentData() || [];
-		if (d === this.lastData && d.length === this.lastDataLen) return;
-		this.lastData = d;
-		this.lastDataLen = d.length;
-		this.reFeed();
+		if (this.__rozieFirstUpdateDone && (changedProperties.has("rowCount") || changedProperties.has("pageCount") || changedProperties.has("expandable") || changedProperties.has("groupable") || changedProperties.has("selectionMode") || changedProperties.has("columns"))) {
+			const __watchVal = untracked(() => [
+				this.sorting,
+				this.globalFilter,
+				this.columnFilters,
+				this.pagination,
+				this.rowCount,
+				this.pageCount,
+				this.rowSelection,
+				this.expanded,
+				this.expandable,
+				this.grouping,
+				this.groupable,
+				this.columnVisibility,
+				this.columnSizing,
+				this.columnOrder,
+				this.columnPinning,
+				this.selectionMode,
+				(this.data || []).length,
+				this.data,
+				this._dataDefault.value,
+				this.columns,
+				this._colReg.value
+			]);
+			if (!Object.is(__watchVal, this.__rozieWatchPrev_1)) {
+				this.__rozieWatchPrev_1 = __watchVal;
+				untracked(() => (() => {
+					this.seedColumnPinning();
+					this.reFeed();
+					this.maybeClearHistoryOnExternalSwap();
+				})());
+			}
+		}
+		this.__rozieFirstUpdateDone = true;
+		(() => {
+			this.maybeClearHistoryOnExternalSwap();
+			this.emitVisibleRangeIfChanged();
+			this.remeasureColumnSizes();
+			if (!this.table) return;
+			const d = this.currentData() || [];
+			if (d === this.lastData && d.length === this.lastDataLen) return;
+			this.lastData = d;
+			this.lastDataLen = d.length;
+			this.reFeed();
+		})();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -6162,12 +6222,14 @@ let Column$1 = class Column extends SignalWatcher(LitElement) {
 			})();
 		}
 		this.__rozieFirstUpdateDone = true;
-		if (this.registered) return;
-		const live = this.registry;
-		if (live == null) return;
-		this.reg = live;
-		this.registered = true;
-		this.reg.registerColumn(this.colId(), this.buildSpec());
+		(() => {
+			if (this.registered) return;
+			const live = this.registry;
+			if (live == null) return;
+			this.reg = live;
+			this.registered = true;
+			this.reg.registerColumn(this.colId(), this.buildSpec());
+		})();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -6895,6 +6957,7 @@ let FilterNumberRange = class FilterNumberRange extends SignalWatcher(LitElement
 		this._maxDraft = signal("");
 		this._touched = signal(false);
 		this.__rozieWatchInitial_0 = true;
+		this.__rozieFirstUpdateDone = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
 		this.minDraftValue = () => this._touched.value ? this._minDraft.value : Array.isArray(this.value) && this.value[0] != null ? String(this.value[0]) : "";
@@ -6933,8 +6996,9 @@ let FilterNumberRange = class FilterNumberRange extends SignalWatcher(LitElement
 	}
 	firstUpdated() {
 		this._disconnectCleanups.push(effect(() => {
-			Array.isArray(this.value) && String(this.value[0]) + "" + String(this.value[1]);
+			const __watchVal = Array.isArray(this.value) ? String(this.value[0]) + "\0" + String(this.value[1]) : "";
 			untracked(() => {
+				this.__rozieWatchPrev_0 = __watchVal;
 				if (this.__rozieWatchInitial_0) {
 					this.__rozieWatchInitial_0 = false;
 					return;
@@ -6943,6 +7007,16 @@ let FilterNumberRange = class FilterNumberRange extends SignalWatcher(LitElement
 			});
 		}));
 	}
+	updated(changedProperties) {
+		if (this.__rozieFirstUpdateDone && changedProperties.has("value")) {
+			const __watchVal = untracked(() => Array.isArray(this.value) ? String(this.value[0]) + "\0" + String(this.value[1]) : "");
+			if (!Object.is(__watchVal, this.__rozieWatchPrev_0)) {
+				this.__rozieWatchPrev_0 = __watchVal;
+				untracked(() => (this._touched.value = false, void 0));
+			}
+		}
+		this.__rozieFirstUpdateDone = true;
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		queueMicrotask(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-lit",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -46,7 +46,7 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@rozie/runtime-lit": "^0.9.0"
+    "@rozie/runtime-lit": "^0.10.1"
   },
   "peerDependencies": {
     "lit": "^3.2",

package/src/Column.ts

@@ -101,12 +101,14 @@ private get registry() { return this.__rozieCtxConsumer_data_table_columns.value
     })(); }
     this.__rozieFirstUpdateDone = true;
 
-    if (this.registered) return;
-    const live = this.registry;
-    if (live == null) return;
-    this.reg = live;
-    this.registered = true;
-    this.reg.registerColumn(this.colId(), this.buildSpec());
+    (() => {
+      if (this.registered) return;
+      const live = this.registry;
+      if (live == null) return;
+      this.reg = live;
+      this.registered = true;
+      this.reg.registerColumn(this.colId(), this.buildSpec());
+    })();
   }
 
   disconnectedCallback(): void {

package/src/DataTable.ts

@@ -753,7 +753,7 @@ export default class DataTable extends SignalWatcher(LitElement) {
    * `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 });
+  private _groupingControllable = createLitControllableProperty<any[] | null>({ host: this, eventName: 'grouping-change', defaultValue: null, initialControlledValue: undefined });
   /**
    * `RowSelectionState` — `{ [rowId]: true }`. Checkbox-only toggle (the row body does not select). Driven by the `selectionMode` chrome. Two-way: fires `selection-change` regardless of binding.
    */
@@ -872,8 +872,10 @@ export default class DataTable extends SignalWatcher(LitElement) {
   private _liveAnnounce = signal('');
   @query('[data-rozie-ref="__rozieRoot"]') private _ref__rozieRoot!: HTMLElement;
 private __rozieWatchInitial_0 = true;
+private __rozieWatchPrev_1: unknown;
 private __rozieWatchInitial_1 = true;
 private __rozieWatchInitial_2 = true;
+private __rozieFirstUpdateDone = false;
 private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { context: __rozieCtx_data_table_columns, initialValue: ((__rozieCtxHost) => ({
   registerColumn: (id: any, spec: any) => {
     if (id == null) return;
@@ -1152,7 +1154,7 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     // columnDefs()/tableColumns() build the UNION of both, and reFeed re-passes columns.
     // (Consumers memoize the array as with $props.data/$props.sorting; the uncontrolled
     // <Column>-children path leaves $props.columns undefined — a stable no-op getter.)
-    this.columns, this._colReg.value])(); untracked(() => { if (this.__rozieWatchInitial_1) { this.__rozieWatchInitial_1 = false; return; } (() => {
+    this.columns, this._colReg.value])(); untracked(() => { this.__rozieWatchPrev_1 = __watchVal; if (this.__rozieWatchInitial_1) { this.__rozieWatchInitial_1 = false; return; } (() => {
       // Seed BEFORE the re-feed so the pinning this call may write is part of the state object
       // table-core receives on this same tick (rather than landing a frame late and re-ordering
       // getVisibleCells() a render after the columns appear). One-shot and self-latching — see
@@ -1208,15 +1210,8 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     // 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({
       // Plain value (NOT a `get data()` getter): an object-literal getter rebinds
       // `this` to the options object, and the Angular/Lit emitters resolve $props via
@@ -1399,14 +1394,9 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
       if (typeof queueMicrotask !== 'undefined') queueMicrotask(this.syncIndeterminate);else Promise.resolve().then(this.syncIndeterminate);
     };
 
-    // initial pull
     // initial pull
     this.refreshRowModel();
 
-    // ── Grid mode: capture the table root ──────────────────────────────────────────────
-    // $el is the component root; the <table class="rozie-data-table"> is the grid root the
-    // cell selectors hang off (the exact idiom proven ×6 by plan 01's probe). Captured here
-    // (post-mount) so it is non-null and ROZ123-clean.
     // ── Grid mode: capture the table root ──────────────────────────────────────────────
     // $el is the component root; the <table class="rozie-data-table"> is the grid root the
     // cell selectors hang off (the exact idiom proven ×6 by plan 01's probe). Captured here
@@ -1415,9 +1405,6 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     // B-02: the click-away detector. `composedPath()` rather than `ev.target` because on Lit the
     // grid lives in a shadow root and a document-level listener sees the retargeted HOST element,
     // which is never `gridRoot.contains(...)` — every in-grid click would read as "outside".
-    // B-02: the click-away detector. `composedPath()` rather than `ev.target` because on Lit the
-    // grid lives in a shadow root and a document-level listener sees the retargeted HOST element,
-    // which is never `gridRoot.contains(...)` — every in-grid click would read as "outside".
     if (typeof document !== 'undefined') {
       this.docPointerDown = (ev: any) => {
         if (!this.gridRoot) {
@@ -1436,20 +1423,6 @@ 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.
 
-    // ── 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.
-
     // ── 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
@@ -1468,9 +1441,6 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     // 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();
@@ -1493,24 +1463,6 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     // 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;
     }
@@ -1520,12 +1472,6 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     // 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 = () => {
         if (this.rowsWindowed()) {
@@ -1592,9 +1538,6 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
       if (typeof requestAnimationFrame === 'function') requestAnimationFrame(() => requestAnimationFrame(afterFirstFrame));else setTimeout(afterFirstFrame, 0);
     }
 
-    // #14: seed the sort/filter announce baseline from the initial (post-mount) state so the LAZY
-    // watch's first fire — a real user sort/filter — compares against the true starting values and
-    // is classified correctly (a null sentinel would misread the first filter change as a sort change).
     // #14: seed the sort/filter announce baseline from the initial (post-mount) state so the LAZY
     // watch's first fire — a real user sort/filter — compares against the true starting values and
     // is classified correctly (a null sentinel would misread the first filter change as a sort change).
@@ -1604,41 +1547,55 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
   }
 
   updated(changedProperties: Map<string, unknown>): void {
-    this.maybeClearHistoryOnExternalSwap();
-    // visible-range-change backstop (quick 260925-dtl part 2): a re-render from new data can move
-    // the rendered window WITHOUT a window-version bump (measured on React: filling placeholders
-    // shifted the window by two rows and nothing was reported). Deduped, so a render that leaves
-    // the window where it was emits nothing.
-    // visible-range-change backstop (quick 260925-dtl part 2): a re-render from new data can move
-    // the rendered window WITHOUT a window-version bump (measured on React: filling placeholders
-    // shifted the window by two rows and nothing was reported). Deduped, so a render that leaves
-    // the window where it was emits nothing.
-    this.emitVisibleRangeIfChanged();
-    // A-02: the post-render hook is the one place that observes EVERY column-width change on all
-    // six targets — an interactive resize writes `columnSizing` through table-core under
-    // `columnResizeMode: 'onChange'` and never reaches the coarse re-feed watch (which keys on
-    // `$props.columnSizing`, undefined on the uncontrolled path). Self-guarded on the width
-    // signature, so a tick that changed no width costs one loop over the leaf columns.
-    // A-02: the post-render hook is the one place that observes EVERY column-width change on all
-    // six targets — an interactive resize writes `columnSizing` through table-core under
-    // `columnResizeMode: 'onChange'` and never reaches the coarse re-feed watch (which keys on
-    // `$props.columnSizing`, undefined on the uncontrolled path). Self-guarded on the width
-    // signature, so a tick that changed no width costs one loop over the leaf columns.
-    this.remeasureColumnSizes();
-    if (!this.table) return;
-    // Phase 51 req-4: track currentData() (the bound prop OR the uncontrolled
-    // $data.dataDefault) so a committed edit re-feeds on Lit whether or not 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 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;
-    this.lastData = d;
-    this.lastDataLen = d.length;
-    this.reFeed();
+    if (this.__rozieFirstUpdateDone && (changedProperties.has('rowCount') || changedProperties.has('pageCount') || changedProperties.has('expandable') || changedProperties.has('groupable') || changedProperties.has('selectionMode') || changedProperties.has('columns'))) { const __watchVal = untracked(() => [this.sorting, this.globalFilter, this.columnFilters, this.pagination, // Server-side page-count sources (#2): re-feed when the consumer's rowCount/pageCount
+    // changes at runtime (e.g. a server response updates the total) so getPageCount() and the
+    // Next button availability track the new total.
+    this.rowCount, this.pageCount, this.rowSelection, this.expanded, this.expandable, this.grouping, this.groupable, this.columnVisibility, this.columnSizing, this.columnOrder, this.columnPinning, this.selectionMode, (this.data || []).length, // Phase 51 req-4: key on the data REFERENCE (both sinks) so a committed edit re-feeds
+    // even when the fresh array is the SAME length (a single-cell edit replaces one row
+    // object → new array ref, identical length → the .length key alone would miss it). The
+    // controlled path observes $props.data; the uncontrolled path observes $data.dataDefault.
+    // writeData is echo-guarded (programmatic) and reFeed writes neither sink, so no loop.
+    this.data, this._dataDefault.value, // Column CONFIG prop (the `:columns` array form) — the sibling column source to
+    // $data.colReg (the `<Column>` children). Watch it so a runtime `:columns` swap re-feeds:
+    // columnDefs()/tableColumns() build the UNION of both, and reFeed re-passes columns.
+    // (Consumers memoize the array as with $props.data/$props.sorting; the uncontrolled
+    // <Column>-children path leaves $props.columns undefined — a stable no-op getter.)
+    this.columns, this._colReg.value]); if (!Object.is(__watchVal, this.__rozieWatchPrev_1)) { this.__rozieWatchPrev_1 = __watchVal; untracked(() => (() => {
+      // Seed BEFORE the re-feed so the pinning this call may write is part of the state object
+      // table-core receives on this same tick (rather than landing a frame late and re-ordering
+      // getVisibleCells() a render after the columns appear). One-shot and self-latching — see
+      // seedColumnPinning() in stateAssembly.rzts. This is the `<Column>`-children entry point:
+      // those register during mount, so the $onMount call below can find zero columns.
+      this.seedColumnPinning();
+      this.reFeed();
+      this.maybeClearHistoryOnExternalSwap();
+    })()); } }
+    this.__rozieFirstUpdateDone = true;
+
+    (() => {
+      this.maybeClearHistoryOnExternalSwap();
+      // visible-range-change backstop (quick 260925-dtl part 2): a re-render from new data can move
+      // the rendered window WITHOUT a window-version bump (measured on React: filling placeholders
+      // shifted the window by two rows and nothing was reported). Deduped, so a render that leaves
+      // the window where it was emits nothing.
+      this.emitVisibleRangeIfChanged();
+      // A-02: the post-render hook is the one place that observes EVERY column-width change on all
+      // six targets — an interactive resize writes `columnSizing` through table-core under
+      // `columnResizeMode: 'onChange'` and never reaches the coarse re-feed watch (which keys on
+      // `$props.columnSizing`, undefined on the uncontrolled path). Self-guarded on the width
+      // signature, so a tick that changed no width costs one loop over the leaf columns.
+      this.remeasureColumnSizes();
+      if (!this.table) return;
+      // Phase 51 req-4: track currentData() (the bound prop OR the uncontrolled
+      // $data.dataDefault) so a committed edit re-feeds on Lit whether or not 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;
+      this.lastData = d;
+      this.lastDataLen = d.length;
+      this.reFeed();
+    })();
   }
 
   disconnectedCallback(): void {
@@ -1683,7 +1640,7 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
     if (name === 'column-filters') this._columnFiltersControllable.notifyAttributeChange(value as unknown as any[]);
     if (name === 'pagination') this._paginationControllable.notifyAttributeChange(value as unknown as any);
     if (name === 'expanded') this._expandedControllable.notifyAttributeChange(value as unknown as any | boolean);
-    if (name === 'grouping') this._groupingControllable.notifyAttributeChange(value as unknown as any[]);
+    if (name === 'grouping') this._groupingControllable.notifyAttributeChange(value as unknown as any[] | null);
     if (name === 'row-selection') this._rowSelectionControllable.notifyAttributeChange(value as unknown as any);
     if (name === 'column-visibility') this._columnVisibilityControllable.notifyAttributeChange(value as unknown as any);
     if (name === 'column-sizing') this._columnSizingControllable.notifyAttributeChange(value as unknown as any);
@@ -5278,9 +5235,6 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // page-relative active row → absolute (display-order) index.
   toAbsRow = (localRow: any) => localRow + this.pageRowOffset();
 
-  // A body row's ABSOLUTE display-order index = its page-relative index + the page offset. Drives
-  // aria-rowindex on the non-virtual paginated body (B27); the virtual path uses wr.vi.index
-  // directly (already absolute). Reactive via rowIndexOf's tick().
   // Total filtered+sorted PRE-pagination row count — the clamp bound for an absolute focusCell.
   // 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.
@@ -9517,8 +9471,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   set pagination(v: any) { this._paginationControllable.notifyPropertyWrite(v); }
   get expanded(): any | boolean { return this._expandedControllable.read(); }
   set expanded(v: any | boolean) { this._expandedControllable.notifyPropertyWrite(v); }
-  get grouping(): any[] { return this._groupingControllable.read(); }
-  set grouping(v: any[]) { this._groupingControllable.notifyPropertyWrite(v); }
+  get grouping(): any[] | null { return this._groupingControllable.read(); }
+  set grouping(v: any[] | null) { this._groupingControllable.notifyPropertyWrite(v); }
   get rowSelection(): any { return this._rowSelectionControllable.read(); }
   set rowSelection(v: any) { this._rowSelectionControllable.notifyPropertyWrite(v); }
   get columnVisibility(): any { return this._columnVisibilityControllable.read(); }

package/src/FilterNumberRange.ts

@@ -36,7 +36,9 @@ export default class FilterNumberRange extends SignalWatcher(LitElement) {
   private _minDraft = signal('');
   private _maxDraft = signal('');
   private _touched = signal(false);
+private __rozieWatchPrev_0: unknown;
 private __rozieWatchInitial_0 = true;
+private __rozieFirstUpdateDone = false;
 
   private _disconnectCleanups: Array<() => void> = [];
   // Re-parenting guard: set true once the deferred teardown has actually
@@ -44,11 +46,18 @@ private __rozieWatchInitial_0 = true;
   private _rozieTornDown = false;
 
   firstUpdated(): void {
-    this._disconnectCleanups.push(effect(() => { const __watchVal = (() => Array.isArray(this.value) ? String(this.value[0]) + '\u0000' + String(this.value[1]) : '')(); untracked(() => { if (this.__rozieWatchInitial_0) { this.__rozieWatchInitial_0 = false; return; } (() => {
+    this._disconnectCleanups.push(effect(() => { const __watchVal = (() => Array.isArray(this.value) ? String(this.value[0]) + '\u0000' + String(this.value[1]) : '')(); untracked(() => { this.__rozieWatchPrev_0 = __watchVal; if (this.__rozieWatchInitial_0) { this.__rozieWatchInitial_0 = false; return; } (() => {
       this._touched.value = false;
     })(); }); }));
   }
 
+  updated(changedProperties: Map<string, unknown>): void {
+    if (this.__rozieFirstUpdateDone && (changedProperties.has('value'))) { const __watchVal = untracked(() => Array.isArray(this.value) ? String(this.value[0]) + '\u0000' + String(this.value[1]) : ''); if (!Object.is(__watchVal, this.__rozieWatchPrev_0)) { this.__rozieWatchPrev_0 = __watchVal; untracked(() => (() => {
+      this._touched.value = false;
+    })()); } }
+    this.__rozieFirstUpdateDone = true;
+  }
+
   disconnectedCallback(): void {
     super.disconnectedCallback();
     queueMicrotask(() => {