snice 7.7.0 → 7.8.0

package/dist/cdn/table/snice-table.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.
@@ -4274,6 +4274,17 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
    * 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))
@@ -4320,15 +4331,21 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                       ? 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;
                   }
               }
           }
@@ -9421,6 +9438,15 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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;
@@ -9428,7 +9454,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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');
@@ -9440,7 +9466,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                           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;
@@ -9530,7 +9556,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
     `;
           }
           renderCell(column, columnIndex) {
-              this.data[column.key];
               const cellComponent = this.getCellComponent(column.formatter || column.valueFormatter ? 'text' : column.type);
               return snice.html /*html*/ `
       <div class="cell cell--${column.type}" part="cell" style="${this.getCellStyles(column)}">
@@ -11144,7 +11169,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           // 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));
@@ -11256,7 +11281,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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 {
@@ -11281,6 +11306,15 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           }
           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 '';
@@ -11385,6 +11419,8 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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;
@@ -11393,18 +11429,33 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           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))
@@ -15009,8 +15060,14 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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');
@@ -15466,6 +15523,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   // Still render pagination
                   if (this.pagination)
                       this.renderPagination();
+                  this.updateSelectAllState();
                   return;
               }
               if (this.data.length === 0 && this.columns.length > 0) {
@@ -15682,6 +15740,10 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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();
@@ -15814,15 +15876,41 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   `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)
@@ -16019,6 +16107,15 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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
@@ -16043,22 +16140,38 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               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;
@@ -16348,7 +16461,12 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   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];
               }
@@ -16363,16 +16481,19 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                       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;
                           }
@@ -16381,6 +16502,9 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   });
               }
               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