tosijs-ui 1.12.0 → 1.12.1

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # Changelog
 
+## 1.12.1
+
+### The Playwright lane no longer fights itself
+
+Local workers are pinned to **6** rather than Playwright's default (~half the cores, 9 here).
+Every engine had taken a turn producing a `page.goto` timeout or a `docs.json` load failure —
+roughly one full run in five, always passing in isolation — because 9 browsers were hitting one
+dev server. 1.11.0 fixed the client half (`fetchCorpus` retries); this reduces the contention
+instead of surviving it.
+
+Measured, not guessed: 9 workers ran the suite in 82s and 6 in 81s, so the lane is not
+CPU-bound at 9 and a third of the load is free; 4 workers costs 106s and buys nothing further.
+6/6 clean afterwards. Contributor-facing only — CI already runs at 1 worker.
+
+### `<tosi-schema-form>`: all three perf guards, and they cover different things
+
+The keystroke perf guard counts DOM lookups, and provably could not see `syncValues` — which
+runs on add/remove-item, not on keystrokes. A root-scoped per-field scan reintroduced there
+passed the existing test. There is now a sibling test on that path; mutation-testing takes it
+from 1 lookup per add to 41 → 161 as field count grows, while the keystroke test stays green
+under the same mutation.
+
+Wall-clock is back alongside them, too. It was removed in 1.11.0 for flaking; with the lane
+quiet the isolated and loaded distributions now overlap (3.20-4.57 vs 2.64-4.14 across all
+three engines, against 4.0 for linear and 16 for quadratic), so a threshold of 8 separates
+them. It earns its place by catching what counting cannot: an O(N) scan per field that uses no
+selector at all fails it at 9.63x while both count guards pass.
+
+### `<tosi-table>`: the header and body can no longer describe different columns (#102)
+
+Reported from a host app that changes column visibility when the page size changes. `set
+columns` updates the column list **synchronously** but defers the rebuild to the next frame,
+so between the assignment and that frame anything recomputing widths — a resize drag, a scroll
+handler, or the host's own page-size code — wrote a grid template for the NEW columns over the
+cells the OLD ones had built.
+
+Why that reads as _disagreement_ rather than a missing column, which is what made it confusing
+to report: with fewer tracks than cells, CSS Grid auto-places the surplus into **implicit**
+tracks, and implicit tracks size to content. Header text and body text differ, so the two rows
+resolve them to different widths and the columns visibly step apart.
+
+`setColumnWidths()` now describes the column set the DOM was actually built from, refreshed by
+`render()` on the frame that installs those cells. A column change is therefore **deferred, not
+dropped** — and because column objects are shared by reference, a resize drag still moves
+widths immediately: it is the shape that is pinned to the DOM, not the widths. All three
+properties have tests, and the fix is mutation-verified (reverting it fails with
+`tracks: 3, headerCells: 4`).
+
+The caller arguably should not reassign columns mid-render. It does not matter — a table that
+can show a header and a body describing different columns is our defect whenever the
+assignment lands.
+
 ## 1.12.0
 
 ### tosijs-ui is Apache-2.0 as of this release (MIT through 1.11.1)

package/dist/data-table.d.ts

@@ -202,6 +202,7 @@ export declare class TosiTable extends WebComponent {
     private rowData;
     private _array;
     private _columns;
+    private _renderedCols;
     private _filter;
     private _sort?;
     private _rowGroupId;

package/dist/data-table.js

@@ -1311,6 +1311,11 @@ export class TosiTable extends WebComponent {
     };
     _array = [];
     _columns = null;
+    /*
+    The columns the CURRENT DOM was built from — see `setColumnWidths`. Not `_columns`: that one
+    changes the instant a caller assigns it, which is exactly the window this exists to cover.
+    */
+    _renderedCols = [];
     _filter = passThru;
     _sort;
     _rowGroupId = null;
@@ -2611,7 +2616,30 @@ export class TosiTable extends WebComponent {
         this.addEventListener('keydown', this.handleKeyNav);
     }
     setColumnWidths() {
-        const cols = this.visibleColumns;
+        /*
+        The widths describe the columns the DOM ACTUALLY HAS, not the ones it is about to get.
+    
+        `set columns` updates `_columns` synchronously but defers the rebuild to `queueRender()`,
+        so between the assignment and the frame, `visibleColumns` already answers for a column set
+        no cell in the document belongs to. Anything that recomputes widths in that window — a
+        resize drag, a scroll handler, a host reacting to a page-size change — used to write a
+        template for the NEW columns over the OLD cells.
+    
+        That reads as the header disagreeing with the body (#102), and the reason it looks like
+        disagreement rather than simple breakage is worth knowing: with fewer tracks than cells,
+        CSS Grid auto-places the surplus into IMPLICIT tracks, which size to content. Header text
+        and body text differ, so the two rows resolve those tracks to different widths and the
+        columns visibly step apart.
+    
+        `_renderedCols` is the set the last render built the cells from; `render()` refreshes it
+        immediately before calling here, so a legitimate column change still takes effect on the
+        very frame that installs its cells. Column objects are shared by reference, so a resize
+        drag that mutates `column.width` is still reflected — it is the SHAPE that is pinned to
+        the DOM, not the widths.
+        */
+        const cols = this._renderedCols.length
+            ? this._renderedCols
+            : this.visibleColumns;
         const total = cols.reduce((w, c) => w + c.width, 0);
         /*
         `fullWidthHeader` lets ONE column absorb whatever width is left over, so a table narrower
@@ -2886,6 +2914,8 @@ export class TosiTable extends WebComponent {
         if (cols.length === 0)
             return;
         const stickyInfo = this.computeStickyInfo(cols);
+        // Before setColumnWidths, so the widths describe the cells this render is about to build.
+        this._renderedCols = cols;
         this.style.setProperty('--tosi-table-row-height', this.rowHeight > 0 ? `${this.rowHeight}px` : 'auto');
         this.setColumnWidths();
         // Build the regions. Header + optional pinned tbodies are siblings