snice 7.7.0 → 7.8.0

package/dist/cdn/sankey/snice-sankey.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/segmented-control/snice-segmented-control.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/select/snice-select.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/skeleton/snice-skeleton.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/slider/snice-slider.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/sortable/snice-sortable.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/sparkline/snice-sparkline.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/spinner/snice-spinner.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/split-button/snice-split-button.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/split-pane/snice-split-pane.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/spotlight/snice-spotlight.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/stat-group/snice-stat-group.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/step-input/snice-step-input.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/stepper/snice-stepper.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/switch/snice-switch.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/table/README.md

@@ -11,8 +11,8 @@ CDN build of the Snice table component. Requires the Snice runtime (`snice-runti
 ```
 
 ## Size
-- Minified: 547.8 KB
-- Gzipped: 110.2 KB
+- Minified: 548.9 KB
+- Gzipped: 110.5 KB
 
 ## Bundled Components
 This CDN build includes the following child components:

package/dist/cdn/table/snice-table.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.6.0
+ * snice v7.7.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.
@@ -4272,6 +4272,17 @@ const appliedClasses = new WeakMap();
  * Give every standalone specialized table cell the common ColumnDefinition
  * presentation contract. The observer reapplies after Snice's differential
  * renderer changes shadow content; equality guards prevent mutation loops.
+ *
+ * Display formatters
+ * ------------------
+ * `formatter` is the column's display formatter and `valueFormatter` its
+ * fallback, so `formatter` wins. `formatterOverride` says the cell does NOT
+ * apply `column.formatter` itself, so this module owns both formatters for it.
+ *
+ * A host marked `formatted` was handed its display text as `value` by the
+ * table, which already resolved the pipeline. Its content is that text
+ * verbatim — the marker exists so a rating/progress/link/tag cell, which
+ * renders structure rather than text, still shows the formatted string.
  */
 function installCellPresentation(host, formatterOverride = false) {
     if (installed.has(host))
@@ -4318,15 +4329,21 @@ function installCellPresentation(host, formatterOverride = false) {
                     ? column.tooltip(host.value, host.rowData)
                     : (host.value == null ? '' : String(host.value));
             }
-            if (formatterOverride || column.valueFormatter) {
-                const formatter = formatterOverride
-                    ? (column.formatter || column.valueFormatter)
-                    : column.valueFormatter;
+            // `formatter` beats `valueFormatter`. A cell that applies `formatter`
+            // itself has already painted it, so the fallback must not overwrite that
+            // content — only a formatter-less column falls through to valueFormatter.
+            const formatter = column.formatter
+                ? (formatterOverride ? column.formatter : null)
+                : column.valueFormatter;
+            // Pre-formatted hosts read the attribute, not the property: a cell whose
+            // value property is typed (boolean, number) coerces the display string.
+            const display = host.hasAttribute('formatted')
+                ? (host.getAttribute('value') ?? '')
+                : (formatter ? String(formatter(host.value, host.rowData) ?? '') : null);
+            if (display !== null) {
                 const content = host.shadowRoot?.querySelector('[part~="content"]');
-                if (formatter && content) {
-                    const value = String(formatter(host.value, host.rowData) ?? '');
-                    if (content.textContent !== value || content.childElementCount > 0)
-                        content.textContent = value;
+                if (content && (content.textContent !== display || content.childElementCount > 0)) {
+                    content.textContent = display;
                 }
             }
         }
@@ -9419,6 +9436,15 @@ var cssContent$1 = ":host([hidden]){display:none}:host{display:block;width:100%;
             this.updateRowAttributes();
             this.configureCells();
         }
+        /**
+         * The column's working value for this row: `valueGetter` runs for display
+         * here exactly as it does on the table's own render path, so a column whose
+         * key names a server field rather than a row field still paints.
+         */
+        cellValue(column) {
+            const raw = this.data?.[column.key];
+            return column.valueGetter ? column.valueGetter(raw, this.data) : raw;
+        }
         configureCells() {
             if (!this.columns) {
                 return;
@@ -9426,7 +9452,7 @@ var cssContent$1 = ":host([hidden]){display:none}:host{display:block;width:100%;
             this.columns.forEach((column, index) => {
                 const cellElement = this.shadowRoot?.querySelector(`[data-column-index="${index}"]`);
                 if (cellElement) {
-                    const value = this.data[column.key];
+                    const value = this.cellValue(column);
                     if (typeof column.renderCell === 'function') {
                         const output = column.renderCell(value, this.data, column);
                         const replacement = output instanceof HTMLElement ? output : document.createElement('span');
@@ -9438,7 +9464,7 @@ var cssContent$1 = ":host([hidden]){display:none}:host{display:block;width:100%;
                         return;
                     }
                     const formatter = column.formatter || column.valueFormatter;
-                    cellElement.value = formatter ? formatter(value, this.data) : value;
+                    cellElement.value = formatter ? String(formatter(value, this.data) ?? '') : value;
                     cellElement.column = formatter
                         ? { ...column, type: 'text', formatter: undefined, valueFormatter: undefined }
                         : column;
@@ -9528,7 +9554,6 @@ var cssContent$1 = ":host([hidden]){display:none}:host{display:block;width:100%;
     `;
         }
         renderCell(column, columnIndex) {
-            this.data[column.key];
             const cellComponent = this.getCellComponent(column.formatter || column.valueFormatter ? 'text' : column.type);
             return html /*html*/ `
       <div class="cell cell--${column.type}" part="cell" style="${this.getCellStyles(column)}">
@@ -11142,7 +11167,7 @@ class TableExport {
         // Data rows
         for (const row of data) {
             const cells = exportColumns.map(c => {
-                const value = row[c.key];
+                const value = this.cellValue(row, c);
                 return this.escapeCSV(value == null ? '' : String(value), delimiter);
             });
             rows.push(cells.join(delimiter));
@@ -11254,7 +11279,7 @@ class TableExport {
         if (rows.length === 0)
             return false;
         const text = rows.map(row => columns.map(c => {
-            const value = row[c.key];
+            const value = this.cellValue(row, c);
             return useFormatted ? this.formatValue(value, row, c) : this.rawValue(value);
         }).join(delimiter)).join('\n');
         try {
@@ -11279,6 +11304,15 @@ class TableExport {
         }
         return value;
     }
+    /**
+     * The column's working value for a row: `valueGetter` "runs for display,
+     * sort, aggregation" — and for export, which must ship what the table shows,
+     * not a row field the column may not even have.
+     */
+    cellValue(row, column) {
+        const raw = row?.[column.key];
+        return column.valueGetter ? column.valueGetter(raw, row) : raw;
+    }
     rawValue(value) {
         if (value == null)
             return '';
@@ -11383,6 +11417,8 @@ class TableMasterDetail {
         this.options = null;
         this.tableElement = null;
         this.contentCache = new Map();
+        /** Last value signature seen per row, so in-place mutations evict the cache. */
+        this.fingerprints = new Map();
         this.rowByIndex = new Map();
         this.measuredHeights = new Map();
         this.onHeightChange = null;
@@ -11391,18 +11427,33 @@ class TableMasterDetail {
         this.tableElement = tableEl;
         this.options = options;
         this.contentCache.clear();
+        this.fingerprints.clear();
         this.rowByIndex.clear();
         this.measuredHeights.clear();
     }
-    /** Eagerly construct detail content when lazy=false. */
-    prepare(rows) {
+    /**
+     * Eagerly construct detail content when lazy=false.
+     *
+     * `fingerprint` (the table's per-row value signature) also evicts rows whose
+     * fields were mutated in place: the cache is keyed by row identity, so an
+     * unchanged identity would otherwise keep serving a panel built from the
+     * pre-mutation values.
+     */
+    prepare(rows, fingerprint) {
         if (!this.options)
             return;
         this.rowByIndex = new Map(rows.map((row, index) => [index, row]));
         const currentRows = new Set(rows);
-        for (const row of this.contentCache.keys()) {
+        for (const row of [...this.contentCache.keys()]) {
             if (!currentRows.has(row))
                 this.contentCache.delete(row);
+            else if (fingerprint && this.fingerprints.get(row) !== fingerprint(row)) {
+                this.contentCache.delete(row);
+                this.measuredHeights.delete(row);
+            }
+        }
+        if (fingerprint) {
+            this.fingerprints = new Map(rows.map(row => [row, fingerprint(row)]));
         }
         for (const row of this.measuredHeights.keys()) {
             if (!currentRows.has(row))
@@ -15007,8 +15058,14 @@ class TableColumnDnD {
             if (this.settingSortedData)
                 return;
             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
+            // changes, so without this the body silently contradicts the header. In
+            // remote mode the server owns the ordering.
+            if (this.mode !== 'remote' && this.currentSort.length > 0)
+                this.applyLocalSortOrder();
             this.rebuildRowIndex();
-            this.masterDetail.prepare(this.data);
+            this.masterDetail.prepare(this.data, row => this.rowValueSignature(row));
             if (this.settingDataImperative)
                 return; // imperative setData(): caller renders
             this.scheduleRender('body');
@@ -15464,6 +15521,7 @@ class TableColumnDnD {
                 // Still render pagination
                 if (this.pagination)
                     this.renderPagination();
+                this.updateSelectAllState();
                 return;
             }
             if (this.data.length === 0 && this.columns.length > 0) {
@@ -15680,6 +15738,10 @@ class TableColumnDnD {
             this.reconcileRows(entries);
             // Re-establish grid role + roving tabindex after the body changed.
             this.keyboard.refresh();
+            // The select-all control describes the *filtered* row set, so it goes stale
+            // whenever the denominator moves (rows delivered, filter cleared) even
+            // though `selectedRows` — its only other trigger — never changed.
+            this.updateSelectAllState();
             // Render pagination after body
             if (this.pagination) {
                 this.renderPagination();
@@ -15812,15 +15874,41 @@ class TableColumnDnD {
                 `tree=${this.treeData.isEnabled() ? this.treeData.getGroupColumn() : ''}`,
             ].join('|');
         }
+        /**
+         * A fingerprint of a row's own field values, so a row object that was mutated
+         * IN PLACE (the same identity re-delivered by a poll/websocket patch, or an
+         * array the app edits) is rebuilt instead of recycled with stale cells.
+         *
+         * Tradeoff, deliberately chosen: this walks the row's OWN, SHALLOW fields
+         * rather than running each column's valueGetter/formatter. It therefore costs
+         * one string build per rendered row — never a user callback, so call counts
+         * for `valueGetter` stay exactly one per row per render — and it still catches
+         * getter-derived columns, because a getter reads the fields this covers.
+         * Nested objects collapse to their String() form, so a mutation buried inside
+         * a nested object (or an object rendered by a JSON/progress cell) is not
+         * detected; those callers should hand over a new row object. Recycling keeps
+         * its payoff: rows whose values did not change are still reused untouched.
+         */
+        rowValueSignature(rowData) {
+            if (rowData === null || typeof rowData !== 'object')
+                return String(rowData);
+            const parts = [];
+            for (const key of Object.keys(rowData)) {
+                const value = rowData[key];
+                parts.push(`${key}=${value === null || value === undefined ? '' : String(value)}`);
+            }
+            // A separator keeps {a:'1b'} from colliding with {a:'1',b:''}.
+            return parts.join('|');
+        }
         /**
          * The per-row rebuild signature. Selection and the plain data-index are
          * re-stamped on reuse (not here) so they never force a rebuild; this captures
-         * only what a re-stamp cannot repair: tree node state, per-row height, and —
-         * when a feature embeds the index in a row-scoped closure (row DnD drag index,
-         * master-detail toggle index) — the index itself.
+         * the row's cell values plus what a re-stamp cannot repair: tree node state,
+         * per-row height, and — when a feature embeds the index in a row-scoped
+         * closure (row DnD drag index, master-detail toggle index) — the index itself.
          */
         rowSignature(rowData, index, structuralSig, treeRow) {
-            const parts = [structuralSig];
+            const parts = [structuralSig, `v:${this.rowValueSignature(rowData)}`];
             if (treeRow)
                 parts.push(`t:${treeRow.depth}:${treeRow.expanded ? 1 : 0}:${treeRow.hasChildren ? 1 : 0}`);
             if (this.rowHeightCallback)
@@ -16017,6 +16105,15 @@ class TableColumnDnD {
             const active = page === this.currentPage ? ' pagination__btn--active' : '';
             return `<button class="pagination__btn pagination__page${active}" data-page="${page}">${page}</button>`;
         }
+        /**
+         * The column's display text, or null when the column declares no display
+         * formatter. `formatter` (row-aware) is the display formatter and
+         * `valueFormatter` its documented fallback, so `formatter` wins.
+         */
+        cellDisplayText(column, value, row) {
+            const formatter = column.formatter || column.valueFormatter;
+            return formatter ? String(formatter(value, row) ?? '') : null;
+        }
         /** Create a cell element safely using createElement + setAttribute */
         createCellElement(column, value, row) {
             // E2: a custom renderCell bypasses the type-based cell entirely. A string
@@ -16041,22 +16138,38 @@ class TableColumnDnD {
             if (column.align)
                 el.setAttribute('align', column.align);
             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);
+            const cellColumn = displayText === null
+                ? column
+                : { ...column, formatter: undefined, valueFormatter: undefined };
             // Set the property directly so arrays/objects reach progress, sparkline,
             // JSON, action, and tag cells without a lossy attribute conversion. Keep a
             // primitive attribute for declarative inspection and CSS selectors.
-            if (column.type === 'sparkline' && value !== null && typeof value === 'object') {
+            if (displayText !== null) {
+                el.setAttribute('formatted', '');
+                el.value = displayText;
+                el.setAttribute('value', displayText);
+            }
+            else if (column.type === 'sparkline' && value !== null && typeof value === 'object') {
                 el.setAttribute('value', JSON.stringify(value));
                 if (Array.isArray(value))
                     el.data = value;
             }
             else {
                 el.value = value ?? '';
-            }
-            if (value === null || typeof value !== 'object') {
-                el.setAttribute('value', String(value ?? ''));
+                if (value === null || typeof value !== 'object') {
+                    el.setAttribute('value', String(value ?? ''));
+                }
             }
             // Column definition as property (for formatter access etc.)
-            el.column = column;
+            el.column = cellColumn;
             // Row-aware formatters, conditional formatting, and action-cell events all
             // consume the originating row through the cell's property API.
             el.rowData = row ?? null;
@@ -16346,7 +16459,12 @@ class TableColumnDnD {
                 this.sortLocalData();
             }
         }
-        sortLocalData() {
+        /**
+         * Reorder `this.data` to the current client-side sort (or back to delivery
+         * order when the sort was cleared). Split out of sortLocalData so a fresh
+         * delivery can land sorted without re-entering the render/index bookkeeping.
+         */
+        applyLocalSortOrder() {
             if (!this.unsortedData.length) {
                 this.unsortedData = [...this.data];
             }
@@ -16361,16 +16479,19 @@ class TableColumnDnD {
                     for (const { column, direction } of this.currentSort) {
                         const colDef = this.columns.find(c => c.key === column);
                         const customComparator = colDef?.sortComparator;
+                        // The value pipeline feeds BOTH sort paths: valueGetter "runs for
+                        // display, sort, aggregation", so a custom comparator sees the same
+                        // derived value the cell shows (remote columns routinely key on the
+                        // server's sort field and bridge the display with a getter).
+                        const aVal = colDef?.valueGetter ? colDef.valueGetter(a[column], a) : a[column];
+                        const bVal = colDef?.valueGetter ? colDef.valueGetter(b[column], b) : b[column];
                         if (customComparator) {
-                            const cmp = customComparator(a[column], b[column], direction);
+                            const cmp = customComparator(aVal, bVal, direction);
                             if (cmp !== 0)
                                 return cmp;
                         }
                         else {
-                            // Use value pipeline getter if available
-                            const aVal = colDef?.valueGetter ? colDef.valueGetter(a[column], a) : (a[column] ?? '');
-                            const bVal = colDef?.valueGetter ? colDef.valueGetter(b[column], b) : (b[column] ?? '');
-                            const cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true });
+                            const cmp = String(aVal ?? '').localeCompare(String(bVal ?? ''), undefined, { numeric: true });
                             if (cmp !== 0)
                                 return direction === 'asc' ? cmp : -cmp;
                         }
@@ -16379,6 +16500,9 @@ class TableColumnDnD {
                 });
             }
             this.settingSortedData = false;
+        }
+        sortLocalData() {
+            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