snice 7.8.0 → 7.9.0

package/dist/components/table/snice-table.js

@@ -6,6 +6,7 @@ import '../button/snice-button.js';
 import '../checkbox/snice-checkbox.js';
 import '../modal/snice-modal.js';
 import '../empty-state/snice-empty-state.js';
+import '../progress/snice-progress.js';
 import './snice-cell.js';
 import './snice-cell-text.js';
 import './snice-cell-number.js';
@@ -31,7 +32,7 @@ import './snice-cell-image.js';
 import './snice-column.js';
 import './snice-row.js';
 import { TableVirtualizer } from './table-virtualizer.js';
-import { TableColumnManager } from './table-column-manager.js';
+import { horizontalCellChrome, TableColumnManager } from './table-column-manager.js';
 import { TableFilterEngine } from './table-filter-engine.js';
 import { TableEditor } from './table-editor.js';
 import { TableKeyboard } from './table-keyboard.js';
@@ -42,16 +43,22 @@ import { TableTreeData } from './table-tree-data.js';
 import { TableGrouping } from './table-grouping.js';
 import { TableColumnMenu } from './table-column-menu.js';
 import { TableRowDnD, TableColumnDnD } from './table-row-dnd.js';
+import { defaultCellAlign, emptyCellValue } from './table-cell-presentation.js';
 import '../utils.js';
 import '../icons/index.js';
 import '../form-control-validity.js';
 import '../form-label-association.js';
 import '../select/snice-option.js';
 import '../snice-cell-l6czK2XW.js';
-import './table-cell-presentation.js';
+import './table-date.js';
 import '../rating/snice-rating.js';
 import './snice-progress.js';
 
+/**
+ * The one string both loading affordances use — the zero-row message row shows
+ * it, the refetch overlay announces it. Kept together so they can never drift.
+ */
+const LOADING_LABEL = 'Loading…';
 let SniceTable = (() => {
     let _classDecorators = [element('snice-table')];
     let _classDescriptor;
@@ -146,6 +153,9 @@ let SniceTable = (() => {
     let _density_decorators;
     let _density_initializers = [];
     let _density_extraInitializers = [];
+    let _columnFit_decorators;
+    let _columnFit_initializers = [];
+    let _columnFit_extraInitializers = [];
     let _headerFilters_decorators;
     let _headerFilters_initializers = [];
     let _headerFilters_extraInitializers = [];
@@ -221,6 +231,7 @@ let SniceTable = (() => {
     let _handleColumnReorderChange_decorators;
     let _handleLazyLoadChange_decorators;
     let _handleColumnMenuChange_decorators;
+    let _handleColumnFitChange_decorators;
     let _dispatchPageChange_decorators;
     let _dispatchRowSelectionChanged_decorators;
     let _dispatchRowClicked_decorators;
@@ -258,8 +269,8 @@ let SniceTable = (() => {
             _totalItems_decorators = [property({ type: Number, attribute: 'total-items' })];
             _pageSizes_decorators = [property({ type: Array, attribute: false })];
             _searchDebounce_decorators = [property({ type: Number, attribute: 'search-debounce' })];
-            _columns_decorators = [property({ attribute: false })];
-            _data_decorators = [property({ attribute: false })];
+            _columns_decorators = [property({ attribute: false, hasChanged: () => true })];
+            _data_decorators = [property({ attribute: false, hasChanged: () => true })];
             _mode_decorators = [property()];
             _currentSort_decorators = [property({ type: Array, attribute: false })];
             _selector_decorators = [property({ type: String, attribute: 'selector' })];
@@ -272,6 +283,7 @@ let SniceTable = (() => {
             _editable_decorators = [property({ type: Boolean, attribute: 'editable' })];
             _editMode_decorators = [property({ attribute: 'edit-mode' })];
             _density_decorators = [property({ attribute: 'density' })];
+            _columnFit_decorators = [property({ attribute: 'column-fit' })];
             _headerFilters_decorators = [property({ type: Boolean, attribute: 'header-filters' })];
             _quickFilter_decorators = [property({ type: Boolean, attribute: 'quick-filter' })];
             _rowReorder_decorators = [property({ type: Boolean, attribute: 'row-reorder' })];
@@ -319,6 +331,7 @@ let SniceTable = (() => {
             _handleColumnReorderChange_decorators = [watch('columnReorder', { immediate: false })];
             _handleLazyLoadChange_decorators = [watch('lazyLoad', 'lazyLoadThreshold', { immediate: false })];
             _handleColumnMenuChange_decorators = [watch('columnMenu', { immediate: false })];
+            _handleColumnFitChange_decorators = [watch('columnFit', { immediate: false })];
             _dispatchPageChange_decorators = [dispatch('page-change', { bubbles: true, composed: true })];
             _dispatchRowSelectionChanged_decorators = [dispatch('table-row-selection-changed', { bubbles: true, composed: true })];
             _dispatchRowClicked_decorators = [dispatch('row-clicked', { bubbles: true, composed: true })];
@@ -368,6 +381,7 @@ let SniceTable = (() => {
             __esDecorate(this, null, _handleColumnReorderChange_decorators, { kind: "method", name: "handleColumnReorderChange", static: false, private: false, access: { has: obj => "handleColumnReorderChange" in obj, get: obj => obj.handleColumnReorderChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleLazyLoadChange_decorators, { kind: "method", name: "handleLazyLoadChange", static: false, private: false, access: { has: obj => "handleLazyLoadChange" in obj, get: obj => obj.handleLazyLoadChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleColumnMenuChange_decorators, { kind: "method", name: "handleColumnMenuChange", static: false, private: false, access: { has: obj => "handleColumnMenuChange" in obj, get: obj => obj.handleColumnMenuChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleColumnFitChange_decorators, { kind: "method", name: "handleColumnFitChange", static: false, private: false, access: { has: obj => "handleColumnFitChange" in obj, get: obj => obj.handleColumnFitChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchPageChange_decorators, { kind: "method", name: "dispatchPageChange", static: false, private: false, access: { has: obj => "dispatchPageChange" in obj, get: obj => obj.dispatchPageChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchRowSelectionChanged_decorators, { kind: "method", name: "dispatchRowSelectionChanged", static: false, private: false, access: { has: obj => "dispatchRowSelectionChanged" in obj, get: obj => obj.dispatchRowSelectionChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchRowClicked_decorators, { kind: "method", name: "dispatchRowClicked", static: false, private: false, access: { has: obj => "dispatchRowClicked" in obj, get: obj => obj.dispatchRowClicked }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -412,6 +426,7 @@ let SniceTable = (() => {
             __esDecorate(null, null, _editable_decorators, { kind: "field", name: "editable", static: false, private: false, access: { has: obj => "editable" in obj, get: obj => obj.editable, set: (obj, value) => { obj.editable = value; } }, metadata: _metadata }, _editable_initializers, _editable_extraInitializers);
             __esDecorate(null, null, _editMode_decorators, { kind: "field", name: "editMode", static: false, private: false, access: { has: obj => "editMode" in obj, get: obj => obj.editMode, set: (obj, value) => { obj.editMode = value; } }, metadata: _metadata }, _editMode_initializers, _editMode_extraInitializers);
             __esDecorate(null, null, _density_decorators, { kind: "field", name: "density", static: false, private: false, access: { has: obj => "density" in obj, get: obj => obj.density, set: (obj, value) => { obj.density = value; } }, metadata: _metadata }, _density_initializers, _density_extraInitializers);
+            __esDecorate(null, null, _columnFit_decorators, { kind: "field", name: "columnFit", static: false, private: false, access: { has: obj => "columnFit" in obj, get: obj => obj.columnFit, set: (obj, value) => { obj.columnFit = value; } }, metadata: _metadata }, _columnFit_initializers, _columnFit_extraInitializers);
             __esDecorate(null, null, _headerFilters_decorators, { kind: "field", name: "headerFilters", static: false, private: false, access: { has: obj => "headerFilters" in obj, get: obj => obj.headerFilters, set: (obj, value) => { obj.headerFilters = value; } }, metadata: _metadata }, _headerFilters_initializers, _headerFilters_extraInitializers);
             __esDecorate(null, null, _quickFilter_decorators, { kind: "field", name: "quickFilter", static: false, private: false, access: { has: obj => "quickFilter" in obj, get: obj => obj.quickFilter, set: (obj, value) => { obj.quickFilter = value; } }, metadata: _metadata }, _quickFilter_initializers, _quickFilter_extraInitializers);
             __esDecorate(null, null, _rowReorder_decorators, { kind: "field", name: "rowReorder", static: false, private: false, access: { has: obj => "rowReorder" in obj, get: obj => obj.rowReorder, set: (obj, value) => { obj.rowReorder = value; } }, metadata: _metadata }, _rowReorder_initializers, _rowReorder_extraInitializers);
@@ -455,6 +470,11 @@ let SniceTable = (() => {
             // Wait for next frame to ensure DOM is updated
             await new Promise(resolve => requestAnimationFrame(resolve));
             this.renderHeader();
+            // The body render the columns assignment queued above can have been
+            // consumed against a not-yet-committed <tbody>. Repainting the header
+            // without the rows is what leaves a remote table showing headings over an
+            // empty frame, so this pass owns both.
+            this.renderBody();
             this.renderControls();
             return config;
         }
@@ -484,8 +504,7 @@ let SniceTable = (() => {
                 if (response.totalItems !== undefined) {
                     this.totalItems = response.totalItems;
                 }
-                this.loadError = null;
-                this.classList.remove('table--error');
+                this.clearLoadError();
                 this.loading = false;
                 // Wait for next frame to ensure DOM is updated
                 await new Promise(resolve => requestAnimationFrame(resolve));
@@ -504,14 +523,49 @@ let SniceTable = (() => {
                 this.loading = false;
                 // Wait for next frame to ensure DOM is updated
                 await new Promise(resolve => requestAnimationFrame(resolve));
+                // Same guard the success path applies above: a newer request can settle
+                // (and paint) inside this frame, and this failure's repaint would then be
+                // a second full body rebuild owed to nobody.
+                if (seq !== this.dataRequestSeq)
+                    return;
                 this.renderBody();
             }
         }
+        /**
+         * Requeue a body render whose target had not been committed yet. A frame is
+         * the right granularity — the shadow template commits between frames — and
+         * the paint is dropped again (silently, as before) once the retries run out.
+         *
+         * The retry CHAINS: a template that needs more than one frame to commit is
+         * the whole reason this exists, so a retry that still finds no <tbody> spends
+         * one more of the budget rather than giving the frame back and quitting.
+         */
+        rearmBodyRender() {
+            if (this.bodyRenderRetryQueued || this.bodyRenderRetries >= 3)
+                return;
+            this.bodyRenderRetryQueued = true;
+            this.bodyRenderRetries++;
+            requestAnimationFrame(() => {
+                this.bodyRenderRetryQueued = false;
+                if (this.tbody)
+                    this.renderBody();
+                else
+                    this.rearmBodyRender();
+            });
+        }
         scheduleRender(what) {
             if (what === 'header' || what === 'both')
                 this.pendingHeaderRender = true;
-            if (what === 'body' || what === 'both')
+            if (what === 'body' || what === 'both') {
                 this.pendingBodyRender = true;
+                // A NEWLY requested paint gets a fresh budget. The bound exists to stop
+                // one render from spinning against a template that structurally has no
+                // <tbody> (the slotted-rows branch), not to disqualify the table forever:
+                // without this reset, three misses during the slotted phase silently
+                // cancel every body render that follows a later flip to the native table.
+                if (!this.bodyRenderRetryQueued)
+                    this.bodyRenderRetries = 0;
+            }
             if (this.renderQueued)
                 return;
             this.renderQueued = true;
@@ -526,14 +580,28 @@ let SniceTable = (() => {
                     const doBody = this.pendingBodyRender;
                     this.pendingHeaderRender = false;
                     this.pendingBodyRender = false;
-                    if (doHeader)
-                        this.renderHeader();
+                    try {
+                        if (doHeader)
+                            this.renderHeader();
+                    }
+                    catch (error) {
+                        // Both flags are already consumed. Letting a header failure escape
+                        // would cancel the body paint queued alongside it and leave the rows
+                        // permanently stale — the exact "header fine, rows blank" symptom.
+                        console.error('Error rendering table header:', error);
+                    }
                     if (doBody)
                         this.renderBody();
                 });
             });
         }
         debouncedDataRequest() {
+            // The supersede decision belongs to the moment the NEW request is decided
+            // on, not to the moment its timeout fires. Bumping here closes the 150ms
+            // window in which an already-obsolete in-flight response still satisfied
+            // `seq === this.dataRequestSeq` and painted rows for the previous sort /
+            // filter / page under a header that already advertises the new one.
+            this.dataRequestSeq++;
             // Set loading immediately for instant feedback
             if (!this.loading) {
                 this.loading = true;
@@ -621,6 +689,72 @@ let SniceTable = (() => {
         /* no border or radius — handled by .table-frame */
       }
 
+      /* column-fit="squish": the frame's width is the constraint.
+       *
+       * The arithmetic (syncColumnWidthsToFrame → fitVisibleColumns) already
+       * lands the columns on the frame's content width, and fixed layout hands
+       * any rounding slack back to the columns, so the rightmost edge sits on
+       * the frame's inner edge. These rules are the guarantee behind that:
+       * hiding the horizontal overflow means a stray pixel — a sub-pixel
+       * border, a browser rounding a percentage the other way — can never turn
+       * into a scrollbar the mode promised would not appear. Vertical scrolling
+       * is untouched. */
+      :host([column-fit="squish"]) .table-frame {
+        overflow-x: hidden;
+      }
+
+      :host([column-fit="squish"]) table {
+        max-width: 100%;
+      }
+
+      /* Squished columns are narrower than their content by design, so the
+       * content has to end in an ellipsis rather than wrap the row taller (or
+       * push a word past the clip edge). */
+      :host([column-fit="squish"]) th,
+      :host([column-fit="squish"]) td {
+        white-space: nowrap;
+      }
+
+      :host([column-fit="squish"]) td > snice-cell-text,
+      :host([column-fit="squish"]) td > .custom-cell,
+      :host([column-fit="squish"]) td > .tree-label {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* The typed cells (email, status, link, phone, location, json, colour,
+       * image, actions) each declare a 100px floor on their host AND on their
+       * inner .cell-content. That floor is a sensible default at natural width
+       * and fatal here: a squished column is routinely narrower than 100px, the
+       * cell refuses to shrink to it, and the td's own overflow: hidden then
+       * chops the label mid-glyph — no ellipsis, because the element that owns
+       * the ellipsis never got small enough to trigger it.
+       *
+       * .cell-content lives in the cell's shadow root, so no descendant
+       * selector from here can reach it. A custom property can: it inherits
+       * across the boundary, the cells read it with the same 100px as the
+       * fallback, and nothing outside a squished td sees any change. */
+      :host([column-fit="squish"]) td {
+        --snice-table-cell-min-width: 0;
+      }
+
+      /* The header label is the table's own markup and needs the same promise:
+       * "Department" clipped to "Departme" reads as a different word. A
+       * sortable header puts the label in a flex row beside the sort
+       * indicator, and a flex item only shrinks below its content once it is
+       * allowed to — hence min-width: 0 alongside the ellipsis. A plain header
+       * is bare text in the th, which ellipsises on the th itself. */
+      :host([column-fit="squish"]) th {
+        text-overflow: ellipsis;
+      }
+
+      :host([column-fit="squish"]) th .sort-header > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 0;
+      }
+
       /* Super-header (slotted area above column headers) */
       .table-superheader {
         background: var(--snice-color-surface, rgb(255 255 255));
@@ -743,9 +877,13 @@ let SniceTable = (() => {
         background-color: var(--snice-color-surface-container-low, rgb(245 245 245));
       }
 
-      /* Row styling */
+      /* Row styling. The zebra tint is an ALPHA overlay, not a surface step:
+         surface-container-low sits ~2 luminance points from the body surface
+         on dark themes, so striped rendered as no striping at all there.
+         An overlay also composites over pinned/tinted cells instead of
+         replacing their color. */
       :host([striped]) tbody tr:nth-child(even) {
-        background-color: var(--snice-color-surface-container-low, rgb(245 245 245));
+        background-color: var(--snice-table-stripe-bg, var(--snice-color-overlay-stripe, hsl(0 0% 0% / 0.02)));
       }
 
       :host([hoverable]) tbody tr:hover {
@@ -1009,12 +1147,14 @@ let SniceTable = (() => {
         justify-content: center;
       }
 
-      /* Loading fade */
-      tbody {
+      /* Loading fade. Scoped to ROWS, never the whole tbody: with no rows the
+         only thing in there is the loading indicator, and dimming that halves
+         the contrast of the one element whose entire job is to be seen. */
+      tbody > tr {
         transition: opacity var(--snice-transition-normal, 250ms);
       }
 
-      :host([loading]) tbody {
+      :host([loading]) tbody > tr:not(.table-message-row) {
         opacity: 0.5;
       }
 
@@ -1029,6 +1169,33 @@ let SniceTable = (() => {
         z-index: 2;
       }
 
+      /* Zero-row loading: spinner + the word, centred in the empty body. */
+      .table-loading-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--snice-spacing-xs, 0.5rem);
+        color: var(--snice-color-text-secondary, rgb(82 82 82));
+      }
+
+      .table-loading-label {
+        font-size: var(--snice-font-size-sm, 0.875rem);
+        line-height: 1;
+      }
+
+      /* snice-progress draws its circular track at 20% alpha, which disappears
+         entirely on a dark surface — the ring the field report saw was a
+         near-black hairline on near-black. Both table spinners opt out and use
+         the border token at full strength, so the track reads in either
+         theme and the primary arc always has something to travel around. */
+      .table-loading-state snice-progress,
+      .table-loading-overlay snice-progress {
+        --progress-track-opacity: 1;
+        --progress-bg: var(--snice-color-border, rgb(226 226 226));
+        --progress-color: var(--snice-color-primary, rgb(37 99 235));
+      }
+
       .no-data {
         text-align: center;
         padding: var(--snice-spacing-lg, 1.5rem);
@@ -1170,10 +1337,58 @@ let SniceTable = (() => {
         background: var(--snice-color-primary, rgb(37 99 235));
       }
 
-      /* Pinned column separator */
+      /* Pinned columns.
+
+         A frozen column must be opaque — scrolled cells pass underneath it —
+         and a header keeps the header's own surface rather than borrowing the
+         body's. The frozen EDGE (the inner-most pinned column on each side) is
+         what the reader actually needs to see: a heavier divider plus a soft
+         shadow cast INTO the scrolling region, mirrored per side. Between two
+         columns pinned to the same side there is no boundary to mark, so they
+         keep the ordinary cell border.
+
+         The shadow is a border-token tint, not black: a black drop shadow is
+         invisible against a dark surface, which is exactly how pinning came to
+         have no affordance at all in the dark theme. */
       .pinned-cell {
         background: var(--snice-color-surface, rgb(255 255 255));
-        box-shadow: 2px 0 4px -1px rgb(0 0 0 / 0.1);
+      }
+
+      th.pinned-cell {
+        background: var(--snice-color-surface-container-low, rgb(245 245 245));
+      }
+
+      .pinned-cell--left.pinned-cell--edge {
+        border-right: 2px solid var(--snice-color-border, rgb(226 226 226));
+        box-shadow: 6px 0 8px -6px var(--snice-color-border, rgb(226 226 226));
+      }
+
+      .pinned-cell--right.pinned-cell--edge {
+        border-left: 2px solid var(--snice-color-border, rgb(226 226 226));
+        box-shadow: -6px 0 8px -6px var(--snice-color-border, rgb(226 226 226));
+      }
+
+      /* A right-pinned header is often the last cell in the row, where the
+         shared rule above strips the right border. Its divider is on the left,
+         so nothing to restore — but the edge border must survive that rule. */
+      th:last-child.pinned-cell--right.pinned-cell--edge,
+      td:last-child.pinned-cell--right.pinned-cell--edge {
+        border-right: none;
+      }
+
+      /* Pin marker: the only cue when the table is wide enough not to scroll. */
+      .pin-indicator {
+        display: inline-flex;
+        align-items: center;
+        margin-left: var(--snice-spacing-2xs, 0.25rem);
+        color: var(--snice-color-text-secondary, rgb(82 82 82));
+        opacity: 0.65;
+        vertical-align: middle;
+        pointer-events: none;
+      }
+
+      .pin-indicator--right {
+        transform: scaleX(-1);
       }
 
       /* Density: compact */
@@ -1596,7 +1811,7 @@ let SniceTable = (() => {
       }
 
       :host([striped]) .snice-table--slotted .table-body::slotted(snice-row:nth-child(even)) {
-        background-color: var(--snice-color-surface-container-low, rgb(245 245 245));
+        background-color: var(--snice-table-stripe-bg, var(--snice-color-overlay-stripe, hsl(0 0% 0% / 0.02)));
       }
 
       :host([hoverable]) .snice-table--slotted .table-body::slotted(snice-row:hover) {
@@ -1702,9 +1917,18 @@ let SniceTable = (() => {
             }
             container.appendChild(controlsDiv);
         }
-        // Re-derive the fill row whenever the frame's box changes (host resized,
-        // fullscreen toggled) — the leftover space below the rows changes with it.
+        // Re-derive the frame-dependent layout whenever the frame's box changes
+        // (host resized, fullscreen toggled): the columns share its width, and the
+        // leftover space below the rows changes with its height.
         handleFrameResize() {
+            // Only when the width actually moved. Fitting rewrites header widths, which
+            // can change row heights, which can flip the frame's vertical scrollbar and
+            // call us straight back — the guard stops that becoming a cycle.
+            const width = this.shadowRoot?.querySelector('.table-frame')?.clientWidth ?? 0;
+            if (width > 0 && width !== this.lastFittedFrameWidth) {
+                this.lastFittedFrameWidth = width;
+                this.syncColumnWidthsToFrame();
+            }
             this.updateFillRow();
         }
         async initialize() {
@@ -1807,7 +2031,18 @@ let SniceTable = (() => {
                     }
                 }
                 this.data.splice(toIndex, 0, item);
-                this.data = [...this.data];
+                // Reordering the SAME rows is not a delivery: a failed reload keeps its
+                // error until data actually arrives, so a drag must not dismiss it.
+                // Everything else the data watcher does (row index, detail prep, render)
+                // is still wanted here — hence a narrow flag rather than
+                // `settingSortedData`, which skips all of it.
+                this.reorderingRows = true;
+                try {
+                    this.data = [...this.data];
+                }
+                finally {
+                    this.reorderingRows = false;
+                }
                 this.selectedRows = selectedRows
                     .map((row) => this.indexOfRow(row))
                     .filter((index) => index >= 0);
@@ -1921,7 +2156,17 @@ let SniceTable = (() => {
             this.renderHeader(); // Re-render header to show/hide sort indicators
         }
         handleSelectableChange() {
-            this.render(); // Re-render both header and body for checkbox columns
+            this.render(); // host template (the structural mode can change)
+            // The checkbox tool column is structural: like the sibling selection-mode
+            // watcher, a post-mount toggle has to rebuild the header (select-all th)
+            // AND every row (row checkbox) — the host template render leaves the
+            // imperatively built thead/tbody untouched, so without this the two
+            // disagree and every data cell sits one column off its header. Rows are
+            // never recycled stale across the toggle: computeStructuralSig folds in
+            // `sel=`. Skipped before the first render — the initial paint reads
+            // `selectable` itself.
+            if (this.thead)
+                this.scheduleRender('both');
             queueMicrotask(() => this.syncSlottedSelectionState());
         }
         // C1: reactive columns. A new column set can change cell types/formatting
@@ -1930,8 +2175,12 @@ let SniceTable = (() => {
         // construction is deferred to the coalescing queue (setter-stack landmine).
         handleColumnsAssignment() {
             this.renderedRows = new Map();
+            // A new array is a NEW CONFIGURATION: its order / pinned / width / declared
+            // set replace whatever the column model is holding, and states for columns
+            // it no longer declares are dropped. initialize() is the render-path resync
+            // that must NOT do this (it would undo a drag-resize on every paint).
             if (this.columns.length > 0)
-                this.columnManager.initialize(this.columns, this);
+                this.columnManager.applyConfiguration(this.columns, this);
             // F: a column set change can add/remove an `aggregate` — resync the grouping
             // model's aggregator list and drop its stale flattened snapshot.
             this.grouping.setColumns(this.columns);
@@ -2004,9 +2253,21 @@ let SniceTable = (() => {
         // and the row-index map, then renders the body. The internal sort path
         // (sortLocalData) reassigns this.data with a re-sorted view of the SAME rows
         // and owns its own snapshot/render — settingSortedData tells us to skip.
-        handleDataAssignment() {
+        handleDataAssignment(oldVal) {
             if (this.settingSortedData)
                 return;
+            // A load error describes the LAST delivery ATTEMPT, so a dataset arriving
+            // from any source supersedes it — including the app falling back to local
+            // rows (or to none) after the remote load failed. Clearing it only on the
+            // remote success path left `loadError` and the `table--error` host class
+            // alive forever, so the next zero-row render showed the stale ⚠️ where the
+            // empty state belonged.
+            //
+            // A REORDER is not an arrival: the row-reorder handler republishes the same
+            // rows in a new array, and dragging a row must not dismiss the ⚠️ the
+            // contract says survives until data actually arrives.
+            if (!this.reorderingRows)
+                this.clearLoadError();
             this.unsortedData = [...this.data];
             // C3: rows delivered while a client-side sort is active must land in that
             // sorted order — the currentSort watcher only fires when the sort itself
@@ -2015,11 +2276,25 @@ let SniceTable = (() => {
             if (this.mode !== 'remote' && this.currentSort.length > 0)
                 this.applyLocalSortOrder();
             this.rebuildRowIndex();
+            // Re-delivering the SAME rows in a different order must not move the
+            // selection to whatever row inherited the index (no-op for a new dataset).
+            if (oldVal)
+                this.remapSelectionAfterReorder(oldVal);
             this.masterDetail.prepare(this.data, row => this.rowValueSignature(row));
             if (this.settingDataImperative)
                 return; // imperative setData(): caller renders
             this.scheduleRender('body');
         }
+        /**
+         * Drop the failed-load state: the ⚠️ message row's text and the `table--error`
+         * host class always move together, so they are cleared together and from one
+         * place. Idempotent, and deliberately does NOT render — every caller is either
+         * mid-delivery (the data watcher renders) or already renders itself.
+         */
+        clearLoadError() {
+            this.loadError = null;
+            this.classList.remove('table--error');
+        }
         handleDataChange() {
             this.renderBody();
             this.updateLoadingOverlay();
@@ -2039,11 +2314,12 @@ let SniceTable = (() => {
                 overlay = document.createElement('div');
                 overlay.className = 'table-loading-overlay';
                 overlay.setAttribute('part', 'loading-overlay');
-                const spinner = document.createElement('snice-progress');
-                spinner.setAttribute('variant', 'circular');
-                spinner.setAttribute('indeterminate', '');
-                spinner.setAttribute('size', 'small');
-                overlay.appendChild(spinner);
+                // The overlay sits ON TOP of readable rows, so it carries its label as
+                // an aria-label rather than visible text — but it must still announce.
+                overlay.setAttribute('role', 'status');
+                overlay.setAttribute('aria-live', 'polite');
+                overlay.setAttribute('aria-label', LOADING_LABEL);
+                overlay.appendChild(this.createLoadingSpinner('medium'));
                 frame.appendChild(overlay);
             }
             else if (!show && overlay) {
@@ -2106,11 +2382,26 @@ let SniceTable = (() => {
                 this.sortLocalData();
         }
         handleCurrentPageChange() {
+            // A clamp written by the display model itself is not a navigation — see
+            // clampCurrentPage().
+            if (this.clampingPage)
+                return;
             if (this.paginationMode === 'server' && this.mode === 'remote')
                 this.debouncedDataRequest();
             else
                 this.scheduleRender('body');
         }
+        clampCurrentPage(page) {
+            if (page === this.currentPage)
+                return;
+            this.clampingPage = true;
+            try {
+                this.currentPage = page;
+            }
+            finally {
+                this.clampingPage = false;
+            }
+        }
         handlePageSizeChange() {
             this.currentPage = 1;
             if (this.paginationMode === 'server' && this.mode === 'remote')
@@ -2126,7 +2417,9 @@ let SniceTable = (() => {
         }
         handleListChange() {
             this.renderedRows = new Map();
-            this.scheduleRender('body');
+            // The header is part of the mode: entering list mode with a renderer drops
+            // the columnar header, and leaving it must bring the header back.
+            this.scheduleRender('both');
         }
         handleEditableChange() {
             if (this.editable)
@@ -2184,6 +2477,17 @@ let SniceTable = (() => {
                 this.initColumnMenu();
             this.scheduleRender('header');
         }
+        /**
+         * Switching fit policy re-decides every unsized column's width, so the frame
+         * has to be re-fitted from scratch: the cached width would otherwise make the
+         * resize observer's "did the frame move?" guard swallow the very next pass.
+         */
+        handleColumnFitChange() {
+            this.columnManager.setFitMode(this.columnFit);
+            this.lastFittedFrameWidth = 0;
+            this.syncColumnWidthsToFrame();
+            this.scheduleRender('header');
+        }
         /** Column definitions in their actual painted order. Column state owns
          * visibility/order; pinned columns are partitioned to their physical edges
          * so right-pinned cells do not overlap later unpinned columns. */
@@ -2200,9 +2504,124 @@ let SniceTable = (() => {
                 .map((state) => byKey.get(state.key))
                 .filter((column) => !!column);
         }
+        /**
+         * Cells one full-width row spans: every visible data column plus the tool
+         * columns that precede them. Group, aggregate, detail, empty-state, and
+         * virtual-spacer rows all measure themselves against this — a row that spans
+         * MORE than the table has invents columns, and `table-layout: fixed` then
+         * spends the frame's leftover width on the phantoms.
+         */
+        getTotalColumnSpan() {
+            const managed = this.columnManager.getAllStates();
+            const dataColumns = managed.length > 0
+                ? this.columnManager.getVisibleColumns().length
+                : this.columns.length;
+            return dataColumns
+                + (this.hasSelectionColumn() ? 1 : 0)
+                + (this.masterDetail.isEnabled() ? 1 : 0)
+                + (this.rowReorder && this.rowDnD.isEnabled() ? 1 : 0);
+        }
+        /**
+         * Re-fit the columns nobody sized to the frame they are painted in.
+         *
+         * A column width is a CONTENT width, so the frame's budget has to be reduced
+         * by each column's own padding + border and by the fixed tool columns before
+         * it can be shared out. Both are read off the live header — the previous
+         * render's, on the first pass — rather than guessed, so the fitted table
+         * lands on the frame's width instead of a few pixels past it.
+         *
+         * Widths are written straight onto the header cells: under fixed layout the
+         * first row owns the column grid, so no body repaint is needed and this can
+         * run inside a resize observer without a render cascade.
+         */
+        syncColumnWidthsToFrame() {
+            // The policy is the table's, the arithmetic is the manager's: hand it over
+            // before every fit so a `columnFit` change is honoured on the next pass
+            // whether it arrived as a property, an attribute, or an upgrade.
+            this.columnManager.setFitMode(this.columnFit);
+            const frame = this.shadowRoot?.querySelector('.table-frame');
+            const headerRow = this.shadowRoot?.querySelector('thead tr.column-header-row');
+            if (!frame || !headerRow)
+                return false;
+            const available = frame.clientWidth;
+            // Layoutless DOM (or a display:none host): every measurement is 0 and
+            // fitting to it would slam the columns to their minimums for nothing.
+            if (!(available > 0))
+                return false;
+            const dataCells = Array.from(headerRow.querySelectorAll('th[data-key]'));
+            // An active list renderer drops the columnar header entirely; there is no
+            // column geometry to fit and no cell to measure the chrome from.
+            if (dataCells.length === 0)
+                return false;
+            let reserved = 0;
+            for (const cell of Array.from(headerRow.children)) {
+                if (!cell.hasAttribute('data-key'))
+                    reserved += cell.getBoundingClientRect().width;
+            }
+            const chrome = horizontalCellChrome(dataCells[0]);
+            if (!this.columnManager.fitVisibleColumns(available - reserved, chrome))
+                return false;
+            for (const cell of dataCells) {
+                const state = this.columnManager.getState(cell.getAttribute('data-key') || '');
+                if (state)
+                    cell.style.width = `${state.width}px`;
+            }
+            return true;
+        }
+        /**
+         * Sticky geometry plus the visible affordance for a pinned cell.
+         *
+         * Freezing a column is only communicated if the reader can see where the
+         * frozen region ends, so the inner-most pinned column on each side carries
+         * the divider (`--edge`); the header additionally carries a pin marker, which
+         * is the only cue when the table happens to be wide enough not to scroll.
+         */
+        applyPinnedCell(cell, key, state, zIndex) {
+            if (state.pinned !== 'left' && state.pinned !== 'right')
+                return;
+            const side = state.pinned;
+            const columns = side === 'left'
+                ? this.columnManager.getPinnedLeft()
+                : this.columnManager.getPinnedRight();
+            const offsets = side === 'left'
+                ? this.columnManager.getPinnedLeftOffsets()
+                : this.columnManager.getPinnedRightOffsets();
+            // The edge of the frozen region: the last left-pinned column, the first
+            // right-pinned one. Inner boundaries between two pinned columns are just
+            // ordinary cell borders.
+            const edgeKey = side === 'left' ? columns[columns.length - 1]?.key : columns[0]?.key;
+            cell.classList.add('pinned-cell', `pinned-cell--${side}`);
+            if (key === edgeKey)
+                cell.classList.add('pinned-cell--edge');
+            cell.style.position = 'sticky';
+            cell.style[side] = `${offsets.get(key) ?? 0}px`;
+            cell.style.zIndex = zIndex;
+        }
+        /** The pin marker a frozen header carries, so pinning reads at any width. */
+        static pinIndicator(side) {
+            return `<span class="pin-indicator pin-indicator--${side}" aria-hidden="true">`
+                + `<svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor">`
+                + `<path d="M9.5 1a1 1 0 0 0-.7 1.7l.3.3-3 3-2.4-.5a1 1 0 0 0-.9 1.7l3 3-3.6 3.6a.6.6 0 0 0 .8.8L6.6 12l3 3a1 1 0 0 0 1.7-.9l-.5-2.4 3-3 .3.3a1 1 0 0 0 1.4-1.4l-5.3-5.3A1 1 0 0 0 9.5 1Z"/>`
+                + `</svg></span>`;
+        }
+        /**
+         * List mode is only "list mode" once a renderer is installed: `list` alone is
+         * a border treatment and still paints normal columnar cells. With a renderer
+         * every row collapses to one full-width cell, so there is no column geometry
+         * left for a header to label.
+         */
+        usesListRowRenderer() {
+            return !!(this.list && this.listRenderer);
+        }
         renderHeader() {
             if (!this.thead)
                 return;
+            // A card/directory list has no columns, so a columnar header would promise
+            // fields that align with nothing. Suppress the data-column headers (and the
+            // equally columnar group and header-filter rows) while a list renderer is
+            // active; the tool columns below still have real body cells to head, so
+            // select-all is kept rather than lost as collateral.
+            const listRows = this.usesListRowRenderer();
             const headerRow = document.createElement('tr');
             headerRow.className = 'column-header-row';
             // Tool column headers — must match createRow order
@@ -2240,7 +2659,7 @@ let SniceTable = (() => {
                 }
                 headerRow.appendChild(selectCell);
             }
-            const visibleColumns = this.getVisibleColumnDefinitions();
+            const visibleColumns = listRows ? [] : this.getVisibleColumnDefinitions();
             visibleColumns.forEach(column => {
                 const th = document.createElement('th');
                 th.setAttribute('data-key', column.key);
@@ -2257,23 +2676,10 @@ let SniceTable = (() => {
                 }
                 // Apply column width
                 const state = this.columnManager.getState(column.key);
+                const pinnedSide = state?.pinned === 'left' || state?.pinned === 'right' ? state.pinned : null;
                 if (state) {
                     th.style.width = `${state.width}px`;
-                    // Pinned column sticky positioning
-                    if (state.pinned === 'left') {
-                        const offsets = this.columnManager.getPinnedLeftOffsets();
-                        th.classList.add('pinned-cell');
-                        th.style.position = 'sticky';
-                        th.style.left = `${offsets.get(column.key) ?? 0}px`;
-                        th.style.zIndex = '2';
-                    }
-                    else if (state.pinned === 'right') {
-                        const offsets = this.columnManager.getPinnedRightOffsets();
-                        th.classList.add('pinned-cell');
-                        th.style.position = 'sticky';
-                        th.style.right = `${offsets.get(column.key) ?? 0}px`;
-                        th.style.zIndex = '2';
-                    }
+                    this.applyPinnedCell(th, column.key, state, '2');
                 }
                 if (this.sortable && column.sortable !== false) {
                     th.classList.add('sortable');
@@ -2281,11 +2687,22 @@ let SniceTable = (() => {
                     // A role=button must be focusable and named, or the keyboard cannot
                     // sort at all. Matches the declarative header in snice-header.ts.
                     th.setAttribute('tabindex', '0');
-                    th.setAttribute('aria-label', `Sort by ${column.label}`);
+                    // Frozen columns say so: the divider is a visual cue only.
+                    th.setAttribute('aria-label', pinnedSide
+                        ? `Sort by ${column.label}, pinned ${pinnedSide}`
+                        : `Sort by ${column.label}`);
                     th.innerHTML = this.renderSortableHeader(column);
                 }
                 else {
                     th.textContent = column.label;
+                    if (pinnedSide)
+                        th.setAttribute('aria-label', `${column.label}, pinned ${pinnedSide}`);
+                }
+                if (pinnedSide) {
+                    // Inside the label, not after it: `.sort-header` is a full-width flex
+                    // row, so a sibling would be pushed onto a second line.
+                    const label = th.querySelector('.sort-header > span') ?? th;
+                    label.insertAdjacentHTML('beforeend', SniceTable.pinIndicator(pinnedSide));
                 }
                 // Filter indicator
                 if (this.filterEngine.hasColumnFilter(column.key)) {
@@ -2338,7 +2755,7 @@ let SniceTable = (() => {
             });
             this.thead.innerHTML = '';
             // Column groups header row (if any)
-            const groups = this.columnManager.getColumnGroups();
+            const groups = listRows ? [] : this.columnManager.getColumnGroups();
             if (groups.length > 0) {
                 const groupRow = document.createElement('tr');
                 groupRow.className = 'column-group-row';
@@ -2360,9 +2777,12 @@ let SniceTable = (() => {
                 groupRow.appendChild(groupedHeaders.content);
                 this.thead.appendChild(groupRow);
             }
-            this.thead.appendChild(headerRow);
+            // A list-mode header row with no tool columns has nothing to show; leaving
+            // it out keeps the thead empty so it paints no strip above the cards.
+            if (!listRows || headerRow.children.length > 0)
+                this.thead.appendChild(headerRow);
             // Header filter row (if enabled)
-            if (this.headerFilters) {
+            if (this.headerFilters && !listRows) {
                 const filterRow = document.createElement('tr');
                 filterRow.className = 'header-filter-row';
                 if (this.rowReorder && this.rowDnD.isEnabled()) {
@@ -2399,6 +2819,11 @@ let SniceTable = (() => {
                 });
                 this.thead.appendChild(filterRow);
             }
+            // The header is in the DOM, so its real chrome and tool-column widths are
+            // measurable: fit the unsized columns to the frame before the browser
+            // paints. Widths land on the header cells that were just created, so this
+            // never re-enters renderHeader.
+            this.syncColumnWidthsToFrame();
         }
         renderSortableHeader(column) {
             const sortItem = this.currentSort.find(s => s.column === column.key);
@@ -2430,9 +2855,90 @@ let SniceTable = (() => {
       </div>
     `;
         }
+        /**
+         * The single message row a zero-row body shows: loading spinner, load error,
+         * or the empty state (the `empty-state` slot cloned fresh, else the default
+         * placeholder). Returns null when there is data to render. Shared by the
+         * ordinary and virtualized paths — the virtualizer wipes the tbody itself, so
+         * it asks for this row rather than leaving a virtualized empty table blank.
+         */
+        /**
+         * The spinner both loading affordances draw. `snice-progress` paints its
+         * track at 20% alpha, which vanishes against a dark surface — the table pins
+         * `--progress-track-opacity` in its own stylesheet so the ring reads on any
+         * theme; the indicator arc keeps the primary color.
+         */
+        createLoadingSpinner(size) {
+            const spinner = document.createElement('snice-progress');
+            spinner.setAttribute('variant', 'circular');
+            spinner.setAttribute('indeterminate', '');
+            spinner.setAttribute('size', size);
+            return spinner;
+        }
+        createEmptyBodyRow() {
+            if (this.data.length > 0 || this.columns.length === 0)
+                return null;
+            const toolCols = (this.hasSelectionColumn() ? 1 : 0)
+                + (this.masterDetail.isEnabled() ? 1 : 0)
+                + (this.rowReorder && this.rowDnD.isEnabled() ? 1 : 0);
+            const tr = document.createElement('tr');
+            tr.className = 'table-message-row';
+            const td = document.createElement('td');
+            td.colSpan = this.columns.length + toolCols;
+            td.className = 'no-data';
+            tr.appendChild(td);
+            if (this.loading) {
+                // A bare ring in an otherwise empty rectangle reads as a rendering
+                // artefact, not as "we are fetching your rows": at `small` it is 24px of
+                // low-contrast stroke with nothing naming it. The zero-row body has the
+                // space for a full-size spinner AND the word, and the pair is what makes
+                // the state legible — visually and to a screen reader.
+                const status = document.createElement('div');
+                status.className = 'table-loading-state';
+                status.setAttribute('role', 'status');
+                status.setAttribute('aria-live', 'polite');
+                status.appendChild(this.createLoadingSpinner('medium'));
+                const label = document.createElement('span');
+                label.className = 'table-loading-label';
+                label.textContent = LOADING_LABEL;
+                status.appendChild(label);
+                td.appendChild(status);
+            }
+            else if (this.loadError) {
+                // Surfaces a failed remote load instead of silently falling through to
+                // the generic "No data" empty state.
+                const errorDiv = document.createElement('div');
+                errorDiv.className = 'table-error-message';
+                errorDiv.textContent = `⚠️ ${this.loadError}`;
+                td.appendChild(errorDiv);
+            }
+            else {
+                const slotted = this.querySelector('[slot="empty-state"]');
+                if (slotted) {
+                    td.appendChild(slotted.cloneNode(true));
+                }
+                else {
+                    const empty = document.createElement('snice-empty-state');
+                    empty.setAttribute('size', 'small');
+                    empty.setAttribute('icon', '📭');
+                    empty.setAttribute('title', 'No data');
+                    empty.setAttribute('description', 'No records to display.');
+                    td.appendChild(empty);
+                }
+            }
+            return tr;
+        }
         renderBody() {
-            if (!this.tbody)
+            // The queue flush consumed `pendingBodyRender` before calling us, so a body
+            // render that arrives while the shadow template has not committed its
+            // <tbody> (a `table/config` response landing before @ready, a structural
+            // branch flip mid-flight) would simply vanish — the header repaints and the
+            // rows stay stale forever. Re-arm it for the next frame instead.
+            if (!this.tbody) {
+                this.rearmBodyRender();
                 return;
+            }
+            this.bodyRenderRetries = 0;
             // Update column manager when columns change
             if (this.columns.length > 0) {
                 this.columnManager.initialize(this.columns, this);
@@ -2464,8 +2970,7 @@ let SniceTable = (() => {
             // NOT the raw filtered data — otherwise the virtualizer windows the wrong
             // dataset and expand/collapse silently no-ops.
             if (this.virtualize && this.virtualizer.isEnabled()) {
-                this.virtualRowsSnapshot = this.getVirtualRows();
-                this.virtualizer.setTotalRows(this.virtualRowsSnapshot.length);
+                this.syncVirtualRows();
                 // The virtualizer's afterRender hook re-establishes grid ARIA/focus on
                 // the freshly inserted window.
                 // Still render pagination
@@ -2474,64 +2979,15 @@ let SniceTable = (() => {
                 this.updateSelectAllState();
                 return;
             }
-            if (this.data.length === 0 && this.columns.length > 0) {
+            const emptyBodyRow = this.createEmptyBodyRow();
+            if (emptyBodyRow) {
                 // Empty / loading / error states replace the body with a single message
                 // row. Reset the recycler map so a later data render starts from a clean
                 // slate (no stale reuse candidates pointing at removed rows).
                 this.tbody.innerHTML = '';
                 this.renderedRows = new Map();
-                const toolCols = (this.hasSelectionColumn() ? 1 : 0)
-                    + (this.masterDetail.isEnabled() ? 1 : 0)
-                    + (this.rowReorder && this.rowDnD.isEnabled() ? 1 : 0);
-                const colSpan = this.columns.length + toolCols;
-                if (this.loading) {
-                    // Show loading spinner
-                    const tr = document.createElement('tr');
-                    const td = document.createElement('td');
-                    td.colSpan = colSpan;
-                    td.className = 'no-data';
-                    td.innerHTML = '<snice-progress variant="circular" indeterminate size="small"></snice-progress>';
-                    tr.appendChild(td);
-                    this.tbody.appendChild(tr);
-                    return;
-                }
-                else if (this.loadError) {
-                    // Show error state — surfaces a failed remote load instead of
-                    // silently falling through to the generic "No data" empty state.
-                    const tr = document.createElement('tr');
-                    const td = document.createElement('td');
-                    td.colSpan = colSpan;
-                    td.className = 'no-data';
-                    const errorDiv = document.createElement('div');
-                    errorDiv.className = 'table-error-message';
-                    errorDiv.textContent = `⚠️ ${this.loadError}`;
-                    td.appendChild(errorDiv);
-                    tr.appendChild(td);
-                    this.tbody.appendChild(tr);
-                    return;
-                }
-                else {
-                    // Show empty state
-                    const tr = document.createElement('tr');
-                    const td = document.createElement('td');
-                    td.colSpan = colSpan;
-                    td.className = 'no-data';
-                    const slotted = this.querySelector('[slot="empty-state"]');
-                    if (slotted) {
-                        td.appendChild(slotted.cloneNode(true));
-                    }
-                    else {
-                        const empty = document.createElement('snice-empty-state');
-                        empty.setAttribute('size', 'small');
-                        empty.setAttribute('icon', '📭');
-                        empty.setAttribute('title', 'No data');
-                        empty.setAttribute('description', 'No records to display.');
-                        td.appendChild(empty);
-                    }
-                    tr.appendChild(td);
-                    this.tbody.appendChild(tr);
-                    return;
-                }
+                this.tbody.appendChild(emptyBodyRow);
+                return;
             }
             // Apply client-side filters (cached snapshot — see getFilteredData).
             const filteredData = this.getFilteredData();
@@ -2543,15 +2999,23 @@ let SniceTable = (() => {
             if (this.pagination && this.paginationMode === 'client'
                 && !this.usesGroupingDisplayModel() && !this.treeData.isEnabled()) {
                 this.totalItems = filteredData.length;
-                const startIndex = (this.currentPage - 1) * this.pageSize;
+                // Re-clamp before slicing. A shorter re-delivery (or a filter) can leave
+                // `currentPage` past the new last page; slicing at the stale offset lands
+                // off the end and renders an EMPTY body while the pager still advertises
+                // the tail rows — blank until the user clicks a page button. Same
+                // [1, totalPages] clamp goToPage() applies, and the same one the grouping
+                // and tree display models already do before their own slice.
+                // An empty set is left alone: a render before the rows arrive must not
+                // rewrite the host's declared starting page.
+                const totalPages = filteredData.length > 0
+                    ? Math.ceil(filteredData.length / this.pageSize)
+                    : this.currentPage;
+                const page = Math.max(1, Math.min(this.currentPage, totalPages));
+                this.clampCurrentPage(page);
+                const startIndex = (page - 1) * this.pageSize;
                 displayData = filteredData.slice(startIndex, startIndex + this.pageSize);
             }
-            const extraCols = (this.hasSelectionColumn() ? 1 : 0) + (this.masterDetail.isEnabled() ? 1 : 0) + (this.rowReorder && this.rowDnD.isEnabled() ? 1 : 0);
-            const managedColumns = this.columnManager.getAllStates();
-            const visibleColumnCount = managedColumns.length > 0
-                ? this.columnManager.getVisibleColumns().length
-                : this.columns.length;
-            const totalColSpan = visibleColumnCount + extraCols;
+            const totalColSpan = this.getTotalColumnSpan();
             const structuralSig = this.computeStructuralSig();
             // Task B: describe the desired body as an ordered list of keyed entries,
             // then reconcile the tbody to match. Rows whose object + signature are
@@ -2647,6 +3111,19 @@ let SniceTable = (() => {
                         restampIndex: index,
                         create: () => this.createRow(rowData, index, treeRow),
                     });
+                    // Tree data must compose with master-detail exactly like the ordinary
+                    // and grouping paths: createRow renders the toggle for every tree row,
+                    // so omitting this entry left that control inert. Generated gap nodes
+                    // (index -1) carry no data row and therefore no panel.
+                    if (index >= 0 && this.masterDetail.isEnabled() && this.masterDetail.isExpanded(index)) {
+                        entries.push({
+                            key: `__detail_${index}`,
+                            sig: 'detail',
+                            alwaysRebuild: true,
+                            create: () => this.masterDetail.createDetailRow(rowData, index, totalColSpan) ??
+                                document.createElement('tr'),
+                        });
+                    }
                 });
             }
             else {
@@ -2704,6 +3181,20 @@ let SniceTable = (() => {
          * data row, so column widths, pinning, and alignment track the table
          * engine natively. Removed entirely when content fills (or overflows) the
          * frame, restoring the plain last-row styling.
+         *
+         * INVARIANT — the filler may only consume space the frame ALREADY has; space
+         * that exists only BECAUSE of the filler must be given back. The filler is
+         * table content, and `@observe('resize', '.table-frame')` re-derives it from
+         * the frame's box, so on a host whose height is content-driven (the
+         * documented `:host { height: 100% }` resolving against an auto or
+         * max-content container — a stretched grid/flex item, a plain block parent)
+         * the filler is an input to the very measurement that produced it: the frame
+         * grows, the observer fires, the leftover computes positive again, and the
+         * table inflates by one slack per animation frame without bound. No static
+         * check distinguishes a content-driven frame from a genuinely sized one, so
+         * this measures instead: apply the filler, then confirm the frame kept its
+         * height. Any growth is self-inflicted and is subtracted from the filler;
+         * once nothing honest is left, the frame had no free space to fill at all.
          */
         updateFillRow() {
             const frame = this.shadowRoot?.querySelector('.table-frame');
@@ -2718,22 +3209,45 @@ let SniceTable = (() => {
             const lastRow = rows[rows.length - 1];
             if (!lastRow)
                 return;
-            const leftover = Math.floor(frame.clientHeight - tableEl.offsetHeight);
+            // Baseline: the frame's height with no filler of ours in the box. Every
+            // later reading is compared against it, so the correction below can never
+            // hand back more than the filler itself created.
+            const baseline = frame.clientHeight;
+            let leftover = Math.floor(baseline - tableEl.offsetHeight);
             if (leftover <= 1)
                 return;
             const fill = lastRow.cloneNode(true);
             fill.className = 'table-fill-row';
-            for (const attr of ['data-index', 'data-selected', 'role', 'aria-rowindex', 'aria-selected', 'tabindex', 'id']) {
+            // `part` goes with the rest of the row identity: the filler is not "each
+            // native body row", so a consumer's ::part(row)/::part(cell) rule must not
+            // paint a phantom row across it.
+            for (const attr of ['data-index', 'data-selected', 'role', 'aria-rowindex', 'aria-selected', 'tabindex', 'id', 'part']) {
                 fill.removeAttribute(attr);
             }
             fill.setAttribute('aria-hidden', 'true');
             fill.querySelectorAll('td').forEach(td => {
                 td.replaceChildren();
-                for (const attr of ['role', 'aria-colindex', 'tabindex', 'aria-selected'])
+                for (const attr of ['role', 'aria-colindex', 'tabindex', 'aria-selected', 'part'])
                     td.removeAttribute(attr);
             });
             fill.style.height = `${leftover}px`;
             tbody.appendChild(fill);
+            // Feedback check. Reading `clientHeight` flushes layout, so each pass sees
+            // the frame as it stands WITH the filler in it. A frame that kept its
+            // baseline is genuinely sized and the filler stays; growth means the frame
+            // is (partly) sized by its own content, so give exactly that back. Two
+            // corrections settle every real case — a fully self-made leftover reaches
+            // zero on the first — and the bounded loop guarantees termination.
+            for (let attempt = 0; attempt < 3; attempt++) {
+                const selfMade = frame.clientHeight - baseline;
+                if (selfMade <= 0)
+                    return;
+                leftover -= selfMade;
+                if (leftover <= 1)
+                    break;
+                fill.style.height = `${leftover}px`;
+            }
+            fill.remove();
         }
         // ── Task B: render-path reconciler ──────────────────────────────────────
         //
@@ -2891,7 +3405,7 @@ let SniceTable = (() => {
         restampRowIndex(el, index) {
             el.setAttribute('data-index', String(index));
             const isSelected = this.selectedRows.includes(index);
-            el.setAttribute('data-selected', String(isSelected));
+            this.stampRowSelection(el, isSelected);
             const checkbox = el.querySelector('snice-checkbox.row-select');
             if (checkbox) {
                 checkbox.setAttribute('data-row-index', String(index));
@@ -3078,24 +3592,30 @@ let SniceTable = (() => {
                 span.textContent = rendered == null ? '' : String(rendered);
                 return span;
             }
-            const tagName = this.getCellTagName(column.type);
+            // A declared display formatter resolves the whole pipeline here — the
+            // documented precedence is `formatter` first, `valueFormatter` as the
+            // fallback — and its output is TEXT, so the column renders through the text
+            // cell: a rating/progress/link/boolean cell cannot carry a display string
+            // (its value channel is typed) and renders structure rather than text. This
+            // is the rule the declarative <snice-row> path already uses.
+            const displayText = this.cellDisplayText(column, value, row);
+            const tagName = displayText === null ? this.getCellTagName(column.type) : 'snice-cell-text';
             const el = document.createElement(tagName);
             // Base attributes. Only force `align` if the column definition specifies
             // one; otherwise let the cell pick its type-appropriate default (numbers
             // right, rating/boolean center, text left). Hard-coding 'left' here fought
-            // the cell's own type-based text-align and made number values drift.
+            // the cell's own type-based text-align and made number values drift — and a
+            // formatted column keeps its TYPE's default, not the text cell's.
             el.setAttribute('type', column.type || 'text');
             if (column.align)
                 el.setAttribute('align', column.align);
+            else if (displayText !== null)
+                el.setAttribute('align', defaultCellAlign(column.type));
             el.setAttribute('in-table', 'true');
-            // A declared display formatter makes the cell's value its DISPLAY text:
-            // the pipeline (valueGetter -> formatter, valueFormatter as the fallback)
-            // is resolved here, once, so the `value` channel a caller reads is what the
-            // cell actually shows. The cell is marked `formatted` and handed a column
-            // without the formatters, which keeps it from formatting again and tells
-            // the shared presentation contract to paint the text over any type-specific
-            // rendering (a rating/progress/link cell cannot render display text).
-            const displayText = this.cellDisplayText(column, value, row);
+            // The cell's value IS its display value: with a formatter declared the cell
+            // receives the formatted text and a column with the formatters removed, so
+            // nothing formats twice and the `value` channel a caller reads is what the
+            // cell shows.
             const cellColumn = displayText === null
                 ? column
                 : { ...column, formatter: undefined, valueFormatter: undefined };
@@ -3103,7 +3623,6 @@ let SniceTable = (() => {
             // JSON, action, and tag cells without a lossy attribute conversion. Keep a
             // primitive attribute for declarative inspection and CSS selectors.
             if (displayText !== null) {
-                el.setAttribute('formatted', '');
                 el.value = displayText;
                 el.setAttribute('value', displayText);
             }
@@ -3113,9 +3632,12 @@ let SniceTable = (() => {
                     el.data = value;
             }
             else {
-                el.value = value ?? '';
-                if (value === null || typeof value !== 'object') {
-                    el.setAttribute('value', String(value ?? ''));
+                // An empty row value (null, or a field the row never carried) falls back
+                // to the typed cell's own documented empty value, never to a blanket ''.
+                const resolved = value ?? emptyCellValue(column.type);
+                el.value = resolved;
+                if (resolved !== null && typeof resolved !== 'object') {
+                    el.setAttribute('value', String(resolved));
                 }
             }
             // Column definition as property (for formatter access etc.)
@@ -3332,16 +3854,36 @@ let SniceTable = (() => {
         updateRowSelectionState() {
             if (!this.tbody)
                 return;
-            const rows = this.tbody.querySelectorAll('tr');
-            rows.forEach((row, index) => {
+            // Key off each row's own `data-index`, never its DOM position: group
+            // headers, aggregate footers, virtual spacers, and the inert fill row share
+            // the tbody, so a positional walk hands a raw-data index to a non-data row
+            // (and drifts every real row after it — on page 2 of a client-paged table
+            // the offsets never lined up at all).
+            const rows = this.tbody.querySelectorAll('tr[data-index]');
+            rows.forEach(row => {
+                const index = Number(row.getAttribute('data-index'));
                 const isSelected = this.selectedRows.includes(index);
-                row.setAttribute('data-selected', String(isSelected));
+                this.stampRowSelection(row, isSelected);
                 const checkbox = row.querySelector('snice-checkbox.row-select');
                 if (checkbox) {
                     checkbox.checked = isSelected;
                 }
             });
         }
+        /**
+         * The two selection reflections a row carries, written together: `data-selected`
+         * drives the CSS, `aria-selected` is the documented a11y contract ("selected
+         * data rows expose aria-selected"). The keyboard module stamps ARIA only on a
+         * full body render, so the delta paths below have to carry it themselves —
+         * otherwise a screen reader never hears an interaction-driven selection.
+         */
+        stampRowSelection(row, isSelected) {
+            row.setAttribute('data-selected', String(isSelected));
+            if (isSelected)
+                row.setAttribute('aria-selected', 'true');
+            else
+                row.removeAttribute('aria-selected');
+        }
         // A2: reflect one row's selection into the DOM (located by data-index). The
         // reconciler (Task B) re-stamps data-index on moved rows, so this stays
         // correct after reorder. No-op if the row isn't in the current window.
@@ -3351,7 +3893,7 @@ let SniceTable = (() => {
             const row = this.tbody.querySelector(`tr[data-index="${index}"]`);
             if (!row)
                 return;
-            row.setAttribute('data-selected', String(isSelected));
+            this.stampRowSelection(row, isSelected);
             const checkbox = row.querySelector('snice-checkbox.row-select');
             if (checkbox)
                 checkbox.checked = isSelected;
@@ -3452,14 +3994,54 @@ let SniceTable = (() => {
             this.settingSortedData = false;
         }
         sortLocalData() {
+            const previous = this.data;
             this.applyLocalSortOrder();
             // Sort replaced this.data (new order + reference) — resync the row-index
             // map and drop the stale filtered snapshot before re-rendering. Render is
             // queued (not synchronous): sortLocalData is reachable from the currentSort
             // setter stack via handleControlledSort, and cells must never construct there.
             this.rebuildRowIndex();
+            this.remapSelectionAfterReorder(previous);
             this.scheduleRender('body');
         }
+        /**
+         * Selection is anchored to the ROW, not to its position. `selectedRows` holds
+         * indices into `data`, so any reorder of that array — a local sort, or a
+         * re-delivery of the same row objects in another order — has to re-resolve
+         * them; otherwise the indices keep pointing at whatever row now occupies the
+         * slot and the user's checkmark silently jumps to a different row (the same
+         * remap the row-reorder/DnD path performs).
+         *
+         * Only a permutation is remapped: same length, same identities, no duplicates.
+         * A genuinely new dataset keeps the documented raw-index semantics untouched,
+         * and rows carrying no identity (duplicate objects) have nothing to anchor to.
+         * Call AFTER rebuildRowIndex() — the remap reads the fresh row-index map.
+         */
+        remapSelectionAfterReorder(previous) {
+            if (this.selectedRows.length === 0)
+                return;
+            if (previous === this.data || previous.length !== this.data.length)
+                return;
+            const identities = new Set(this.data);
+            if (identities.size !== this.data.length)
+                return;
+            // BOTH sides have to be duplicate-free for "same length + subset" to mean
+            // permutation: previous=[A,A] against data=[A,B] satisfies the subset test
+            // while actually being a NEW dataset, and remapping it would move the
+            // selection off the row the raw-index contract points at.
+            if (new Set(previous).size !== previous.length)
+                return;
+            for (const row of previous)
+                if (!identities.has(row))
+                    return;
+            const remapped = this.selectedRows
+                .map((index) => this.indexOfRow(previous[index]))
+                .filter((index) => index >= 0);
+            if (remapped.length === this.selectedRows.length
+                && remapped.every((index, i) => index === this.selectedRows[i]))
+                return;
+            this.selectedRows = remapped;
+        }
         dispatchRowSelectionChanged(rowIndex, selected) {
             return {
                 selectedRows: this.selectedRows,
@@ -3579,20 +4161,37 @@ let SniceTable = (() => {
             const scrollContainer = this.getScrollContainer();
             if (!scrollContainer)
                 return;
-            this.virtualRowsSnapshot = this.getVirtualRows();
+            this.syncVirtualRows();
             this.virtualizer.attach({
                 rowHeight: (displayIndex) => this.getVirtualRowHeight(displayIndex),
                 bufferPx: this.virtualBuffer,
                 totalRows: this.virtualRowsSnapshot.length,
                 scrollContainer,
+                // The host template swaps its structural branch (slotted rows ⇄ native
+                // table) without re-attaching. Re-resolving keeps the window painting into
+                // the LIVE tbody instead of the detached branch's orphaned one.
+                resolveScrollContainer: () => this.getScrollContainer(),
                 renderRange: (start, end) => this.renderRowRange(start, end),
+                // Spacers span the real grid. A spacer wider than the table invents
+                // columns for fixed layout to spend the frame's spare width on.
+                resolveColumnSpan: () => this.getTotalColumnSpan(),
                 // Pinned rows live outside the windowed range so they are always present,
                 // exactly like the non-virtual path (renderBody).
                 renderPinnedTop: () => this.renderPinnedRows(this.pinnedTopRows, 'top'),
                 renderPinnedBottom: () => this.renderPinnedRows(this.pinnedBottomRows, 'bottom'),
+                // A zero-row window still owes the user the empty/loading/error row the
+                // ordinary path renders.
+                renderEmptyBody: () => this.createEmptyBodyRow(),
                 // Scroll-driven windows bypass renderBody; restore grid roles, logical
                 // row indices, and roving focus after every inserted range.
-                afterRender: () => this.keyboard.refresh(),
+                afterRender: () => {
+                    this.keyboard.refresh();
+                    // Every window rebuilds the tbody from scratch, taking any filler with
+                    // it. Virtualization is not exempt from the fill-row contract, and
+                    // renderBody()'s own tail call never runs on the virtual path, so the
+                    // filler is re-evaluated here instead.
+                    this.updateFillRow();
+                },
             });
         }
         getVirtualRowHeight(displayIndex) {
@@ -3611,6 +4210,30 @@ let SniceTable = (() => {
          * virtualized); otherwise it is the filtered data. Each descriptor carries
          * the logical index used for `data-index`, selection, and detail lookups.
          */
+        /**
+         * Re-derive the windowed row model and hand it to the virtualizer.
+         *
+         * `virtualRowsSnapshot` is the ONLY state the paint pipeline caches, and
+         * `renderRowRange` paints from it. Any caller that resolves a display index
+         * against a FRESH `getVirtualRows()` and then asks the virtualizer to paint
+         * (scrollToRow, the keyboard ensure-visible hook) must republish that model
+         * first, or it scrolls to an offset computed in one list and paints rows from
+         * another — the requested row never appears. Returns the fresh model so the
+         * caller indexes exactly what will be painted.
+         *
+         * `paint` false leaves the repaint to the caller (scrollToIndex refreshes the
+         * window itself). Those callers must not paint from here: the virtualizer's
+         * afterRender hook re-runs keyboard.refresh(), whose ensure-visible callback
+         * lands back in ensureKeyboardRowRendered — an unbounded recursion.
+         */
+        syncVirtualRows(paint = true) {
+            this.virtualRowsSnapshot = this.getVirtualRows();
+            // Not yet attached during setupVirtualization; attach() takes the count.
+            if (this.virtualizer.isEnabled()) {
+                this.virtualizer.setTotalRows(this.virtualRowsSnapshot.length, paint);
+            }
+            return this.virtualRowsSnapshot;
+        }
         getVirtualRows() {
             const filtered = this.getFilteredData();
             // F: the flattened group+row+aggregate list is the virtual model when
@@ -3633,14 +4256,7 @@ let SniceTable = (() => {
             const rows = this.virtualRowsSnapshot.length > 0
                 ? this.virtualRowsSnapshot
                 : this.getVirtualRows();
-            const extraCols = (this.hasSelectionColumn() ? 1 : 0) +
-                (this.masterDetail.isEnabled() ? 1 : 0) +
-                (this.rowReorder && this.rowDnD.isEnabled() ? 1 : 0);
-            const managedColumns = this.columnManager.getAllStates();
-            const visibleColumnCount = managedColumns.length > 0
-                ? this.columnManager.getVisibleColumns().length
-                : this.columns.length;
-            const totalColSpan = visibleColumnCount + extraCols;
+            const totalColSpan = this.getTotalColumnSpan();
             const structuralSig = this.computeStructuralSig();
             // Task B: recycle rows that stay in the window across a scroll shift. A row
             // still visible after scrolling keeps its data-object key and signature, so
@@ -3686,9 +4302,10 @@ let SniceTable = (() => {
                 // Master-detail: render the expanded detail row in-window. The detail
                 // A fixed detailHeight participates in virtual spacer math through
                 // getVirtualRowHeight. Auto-height content is still rendered in-window
-                // and contributes through normal table layout. Tree rows never carry
-                // detail panels, so skip them.
-                if (!treeRow && this.masterDetail.isEnabled() && this.masterDetail.isExpanded(dataIndex)) {
+                // and contributes through normal table layout. Tree rows compose with
+                // master-detail like any other row; only generated gap nodes (index -1)
+                // have no data row to describe.
+                if (dataIndex >= 0 && this.masterDetail.isEnabled() && this.masterDetail.isExpanded(dataIndex)) {
                     const detailRow = this.masterDetail.createDetailRow(data, dataIndex, totalColSpan);
                     if (detailRow)
                         fragment.appendChild(detailRow);
@@ -3714,7 +4331,8 @@ let SniceTable = (() => {
             // data row rather than an unrelated header/subtotal.
             if (this.usesGroupingDisplayModel() || this.treeData.isEnabled()) {
                 const row = this.data[index];
-                const displayIndex = this.getVirtualRows().findIndex((entry) => entry.data === row);
+                // Resolve against the model the virtualizer is about to paint from.
+                const displayIndex = this.syncVirtualRows(false).findIndex((entry) => entry.data === row);
                 if (displayIndex >= 0)
                     this.virtualizer.scrollToIndex(displayIndex);
                 return;
@@ -3723,6 +4341,14 @@ let SniceTable = (() => {
         }
         /** Rows currently reachable by grid keyboard navigation, in display order. */
         getKeyboardColumnCount() {
+            // List mode paints tool cells plus ONE full-width cell per row, and its
+            // header no longer mirrors the body — count the body shape directly.
+            if (this.usesListRowRenderer()) {
+                return 1
+                    + (this.rowReorder && this.rowDnD.isEnabled() ? 1 : 0)
+                    + (this.masterDetail.isEnabled() ? 1 : 0)
+                    + (this.hasSelectionColumn() ? 1 : 0);
+            }
             const rendered = this.shadowRoot?.querySelectorAll('thead tr.column-header-row > th').length ?? 0;
             if (rendered > 0)
                 return rendered;
@@ -3778,7 +4404,9 @@ let SniceTable = (() => {
             const row = this.getKeyboardRows()[rowIndex];
             if (row === undefined)
                 return;
-            const displayIndex = this.getVirtualRows().findIndex((entry) => entry.data === row);
+            // The window is painted from `virtualRowsSnapshot`; republish it so the
+            // offset we scroll to and the rows that land there come from one model.
+            const displayIndex = this.syncVirtualRows(false).findIndex((entry) => entry.data === row);
             if (displayIndex >= 0)
                 this.virtualizer.scrollToIndex(displayIndex);
         }
@@ -3906,8 +4534,7 @@ let SniceTable = (() => {
                 return items;
             const totalPages = Math.max(1, Math.ceil(items.length / this.pageSize));
             const page = Math.max(1, Math.min(this.currentPage, totalPages));
-            if (page !== this.currentPage)
-                this.currentPage = page;
+            this.clampCurrentPage(page);
             const start = (page - 1) * this.pageSize;
             return items.slice(start, start + this.pageSize);
         }
@@ -3927,8 +4554,7 @@ let SniceTable = (() => {
                 return rows;
             const totalPages = Math.max(1, Math.ceil(rows.length / this.pageSize));
             const page = Math.max(1, Math.min(this.currentPage, totalPages));
-            if (page !== this.currentPage)
-                this.currentPage = page;
+            this.clampCurrentPage(page);
             const start = (page - 1) * this.pageSize;
             return rows.slice(start, start + this.pageSize);
         }
@@ -3990,16 +4616,21 @@ let SniceTable = (() => {
             this.renderBody();
             this.dispatchColumnPinChange(key, false);
         }
+        // A measured width is the column's width, not the header's: the body has to
+        // be repainted with it too, or the th and its tds carry different numbers
+        // and the next body-only re-render paints the stale one.
         autoSizeColumn(key) {
             if (this.tbody) {
                 this.columnManager.autoSizeColumn(key, this.tbody);
                 this.renderHeader();
+                this.renderBody();
             }
         }
         autoSizeAllColumns() {
             if (this.tbody) {
                 this.columnManager.autoSizeAll(this.tbody);
                 this.renderHeader();
+                this.renderBody();
             }
         }
         moveColumn(key, toIndex) {
@@ -4259,8 +4890,7 @@ let SniceTable = (() => {
             this.masterDetail.onHeightChange = () => {
                 if (!this.virtualize || !this.virtualizer.isEnabled())
                     return;
-                this.virtualRowsSnapshot = this.getVirtualRows();
-                this.virtualizer.setTotalRows(this.virtualRowsSnapshot.length);
+                this.syncVirtualRows();
             };
             this.masterDetail.prepare(this.data);
             this.renderHeader();
@@ -4487,6 +5117,9 @@ let SniceTable = (() => {
             // The row recycler cannot infer that a callback identity changed from
             // row data alone. Force fresh rows so list markup replaces table cells.
             this.renderedRows = new Map();
+            // Installing a renderer removes the column geometry the header describes;
+            // clearing it back to null restores columnar rows AND their header.
+            this.renderHeader();
             this.renderBody();
         }
         setListViewRenderer(fn) {
@@ -4505,7 +5138,7 @@ let SniceTable = (() => {
                 tr.style.height = `${this.rowHeight}px`;
             }
             const isSelected = this.selectedRows.includes(index);
-            tr.setAttribute('data-selected', String(isSelected));
+            this.stampRowSelection(tr, isSelected);
             // Row DnD handle
             if (this.rowReorder && this.rowDnD.isEnabled()) {
                 tr.appendChild(this.rowDnD.createDragHandle());
@@ -4576,7 +5209,18 @@ let SniceTable = (() => {
                     const toggle = this.treeData.createToggle(treeRow);
                     td.appendChild(toggle);
                     const textSpan = document.createElement('span');
-                    textSpan.textContent = value == null ? '' : String(value);
+                    textSpan.className = 'tree-label';
+                    // The group cell keeps its plain label next to the indent/chevron, but
+                    // it is still a cell: renderCell owns it outright, and otherwise the
+                    // documented display pipeline (formatter, then valueFormatter) decides
+                    // the text. Only a column with neither shows the raw working value.
+                    if (typeof column.renderCell === 'function') {
+                        textSpan.appendChild(this.createCellElement(column, value, rowData));
+                    }
+                    else {
+                        textSpan.textContent = this.cellDisplayText(column, value, rowData)
+                            ?? (value == null ? '' : String(value));
+                    }
                     // Clicking the text label also toggles expand/collapse
                     if (treeRow.hasChildren) {
                         textSpan.style.cursor = 'pointer';
@@ -4595,21 +5239,7 @@ let SniceTable = (() => {
                 const state = this.columnManager.getState(column.key);
                 if (state) {
                     td.style.width = `${state.width}px`;
-                    // Pinned column sticky positioning
-                    if (state.pinned === 'left') {
-                        const offsets = this.columnManager.getPinnedLeftOffsets();
-                        td.classList.add('pinned-cell');
-                        td.style.position = 'sticky';
-                        td.style.left = `${offsets.get(column.key) ?? 0}px`;
-                        td.style.zIndex = '1';
-                    }
-                    else if (state.pinned === 'right') {
-                        const offsets = this.columnManager.getPinnedRightOffsets();
-                        td.classList.add('pinned-cell');
-                        td.style.position = 'sticky';
-                        td.style.right = `${offsets.get(column.key) ?? 0}px`;
-                        td.style.zIndex = '1';
-                    }
+                    this.applyPinnedCell(td, column.key, state, '1');
                 }
                 tr.appendChild(td);
             });
@@ -4773,20 +5403,7 @@ let SniceTable = (() => {
                 const state = this.columnManager.getState(column.key);
                 if (state) {
                     td.style.width = `${state.width}px`;
-                    if (state.pinned === 'left') {
-                        const offsets = this.columnManager.getPinnedLeftOffsets();
-                        td.classList.add('pinned-cell');
-                        td.style.position = 'sticky';
-                        td.style.left = `${offsets.get(column.key) ?? 0}px`;
-                        td.style.zIndex = '1';
-                    }
-                    else if (state.pinned === 'right') {
-                        const offsets = this.columnManager.getPinnedRightOffsets();
-                        td.classList.add('pinned-cell');
-                        td.style.position = 'sticky';
-                        td.style.right = `${offsets.get(column.key) ?? 0}px`;
-                        td.style.zIndex = '1';
-                    }
+                    this.applyPinnedCell(td, column.key, state, '1');
                 }
                 tr.appendChild(td);
             });
@@ -4967,6 +5584,26 @@ let SniceTable = (() => {
             // C1: reactive, no attribute reflection. A post-mount assignment (or the
             // setData/setColumns aliases) re-renders through the microtask-coalesced
             // queue — see handleColumnsAssignment / handleDataAssignment.
+            //
+            // `hasChanged: () => true` — ASSIGNMENT IS THE SIGNAL, NOT IDENTITY.
+            // The core dirty-check (notEqual in packages/core/src/utils.ts, applied by the
+            // @property setter in element.ts) is identity-based and stays that way for
+            // every other property: that is the right default for reactivity in general.
+            // But `data` and `columns` are bulk payloads that callers routinely mutate in
+            // place and then publish by re-assigning the SAME array reference
+            // (`rows.push(row); table.data = rows`). The documented contract is that
+            // assigning `data`/`columns` rerenders, so these two properties opt OUT of the
+            // identity gate locally rather than weakening it globally.
+            //
+            // Tradeoff — double-render cost: a genuinely redundant assignment
+            // (`table.data = table.data` with nothing changed) now costs a render that the
+            // identity gate used to swallow, and a caller who assigns both `columns` and
+            // `data` pays two schedule calls instead of one. It is bounded: both watchers
+            // go through scheduleRender(), which coalesces a burst within a tick into a
+            // single microtask flush, so the worst case is one extra body paint per tick,
+            // never per assignment. Deep-equality diffing was rejected as the alternative
+            // — it is O(rows x columns) on every assignment, i.e. a cost paid by the
+            // common (genuinely-changed) path to save the rare redundant one.
             this.columns = (__runInitializers(this, _searchDebounce_extraInitializers), __runInitializers(this, _columns_initializers, []));
             this.data = (__runInitializers(this, _columns_extraInitializers), __runInitializers(this, _data_initializers, []));
             /**
@@ -4987,7 +5624,8 @@ let SniceTable = (() => {
             this.selector = __runInitializers(this, _selector_initializers, '');
             this.selectorOptions = (__runInitializers(this, _selector_extraInitializers), __runInitializers(this, _selectorOptions_initializers, []));
             this.loading = (__runInitializers(this, _selectorOptions_extraInitializers), __runInitializers(this, _loading_initializers, false));
-            // Set when a remote-mode load fails; cleared on the next successful load.
+            // Set when a remote-mode load fails; cleared by clearLoadError() as soon as
+            // ANY fresh dataset arrives (see there).
             // Not a @property — renderBody() reads it directly, no attribute needed.
             this.loadError = (__runInitializers(this, _loading_extraInitializers), null);
             this.virtualize = __runInitializers(this, _virtualize_initializers, false);
@@ -4997,7 +5635,16 @@ let SniceTable = (() => {
             this.editable = (__runInitializers(this, _columnResize_extraInitializers), __runInitializers(this, _editable_initializers, false));
             this.editMode = (__runInitializers(this, _editable_extraInitializers), __runInitializers(this, _editMode_initializers, 'cell'));
             this.density = (__runInitializers(this, _editMode_extraInitializers), __runInitializers(this, _density_initializers, 'standard'));
-            this.headerFilters = (__runInitializers(this, _density_extraInitializers), __runInitializers(this, _headerFilters_initializers, false));
+            /**
+             * How the columns relate to the frame's width.
+             *
+             * `scroll` keeps every column at or above its `minWidth` and lets the frame
+             * scroll horizontally when they no longer fit. `squish` makes the frame the
+             * hard constraint instead: minimums relax, content ellipsises, and the table
+             * never scrolls sideways. See the `ColumnFit` docs in snice-table.types.ts.
+             */
+            this.columnFit = (__runInitializers(this, _density_extraInitializers), __runInitializers(this, _columnFit_initializers, 'scroll'));
+            this.headerFilters = (__runInitializers(this, _columnFit_extraInitializers), __runInitializers(this, _headerFilters_initializers, false));
             this.quickFilter = (__runInitializers(this, _headerFilters_extraInitializers), __runInitializers(this, _quickFilter_initializers, false));
             this.rowReorder = (__runInitializers(this, _quickFilter_extraInitializers), __runInitializers(this, _rowReorder_initializers, false));
             this.columnReorder = (__runInitializers(this, _rowReorder_extraInitializers), __runInitializers(this, _columnReorder_initializers, false));
@@ -5049,7 +5696,9 @@ let SniceTable = (() => {
             this.table = __runInitializers(this, _table_initializers, void 0);
             this.thead = (__runInitializers(this, _table_extraInitializers), __runInitializers(this, _thead_initializers, void 0));
             this.tbody = (__runInitializers(this, _thead_extraInitializers), __runInitializers(this, _tbody_initializers, void 0));
-            this.unsortedData = (__runInitializers(this, _tbody_extraInitializers), []);
+            /** Frame width the columns were last fitted to — see handleFrameResize. */
+            this.lastFittedFrameWidth = (__runInitializers(this, _tbody_extraInitializers), 0);
+            this.unsortedData = [];
             this.dataRequestTimeout = null;
             // A1: row-object → its index in `this.data`. Replaces the O(n) `data.indexOf`
             // that ran per row on every selection toggle (was O(n²) for select-all).
@@ -5081,6 +5730,10 @@ let SniceTable = (() => {
             // C1: set while the imperative setData() runs so the data @watch resyncs the
             // model but skips the auto-render (the caller drives the body fill).
             this.settingDataImperative = false;
+            // Set while the row-reorder handler re-publishes `this.data` as a new array
+            // of the SAME rows. Tells the data @watch that no fresh dataset arrived, so a
+            // pending load error must survive the drag.
+            this.reorderingRows = false;
             // C1/C2: microtask-coalesced render queue. Reactive assignments schedule a
             // render here instead of calling renderHeader/renderBody synchronously —
             // MANDATORY, because happy-dom crashes constructing cell elements inside a
@@ -5088,6 +5741,32 @@ let SniceTable = (() => {
             this.renderQueued = false;
             this.pendingHeaderRender = false;
             this.pendingBodyRender = false;
+            // Re-arm bookkeeping for a body render that found no <tbody> to paint into.
+            // Bounded: the slotted-rows template legitimately has no <tbody>, and an
+            // unbounded retry there would spin every frame.
+            this.bodyRenderRetries = 0;
+            this.bodyRenderRetryQueued = false;
+            /**
+             * Write a page number the display model just derived (a re-clamp after the
+             * row set shortened), WITHOUT re-entering the render scheduler.
+             *
+             * The three clamp sites all sit inside a display-model computation whose
+             * caller paints immediately afterwards with the clamped page — the ordinary
+             * body path slices with it and then renders the pager, the grouping and tree
+             * models return the clamped slice. Letting the @watch fire here queued a
+             * second, byte-identical body pass per delivery — the measured cost, and what
+             * the regression test pins. Suppressing the write's watcher makes the clamp
+             * cost zero extra passes and makes an oscillating clamp structurally unable
+             * to loop.
+             *
+             * All three sites are reachable only under `paginationMode === 'client'`, so
+             * the watcher's server branch (debouncedDataRequest, whose `loading = true`
+             * re-enters renderBody SYNCHRONOUSLY through the loading watcher — from the
+             * middle of a render) is not reachable from a clamp today. It is the reason
+             * to keep this guard rather than to drop the watcher suppression if a fourth
+             * clamp site ever lands outside that guard.
+             */
+            this.clampingPage = false;
             /**
              * A structural fingerprint of everything `createRow` reads that is NOT
              * per-row data: visible columns + their widths/pinning/offsets, tool columns,