@toclocoinc/lattice-grid 1.18.1 → 1.20.0

package/README.md

@@ -4,7 +4,7 @@
 dependencies, no build step required. Optional adapters for React, Vue, Svelte
 and Web Components ship alongside it.
 
-Version 1.18.1 · [latticegrid.dev](https://www.latticegrid.dev) · TOCLOCO Inc
+Version 1.20.0 · [latticegrid.dev](https://www.latticegrid.dev) · TOCLOCO Inc
 
 ---
 

package/docs/API.html

@@ -871,6 +871,9 @@ autoInit(document); <span class="cmt">// builds every [data-lattice-grid] under
           <tr><td class="name">stripedRows</td><td class="type">boolean</td><td class="dflt">false</td><td class="desc">Shade alternate data rows (zebra striping). Strictly opt-in, so an existing grid is unchanged on upgrade. Parity follows each row's logical index, so a stripe survives a scroll; group headings, footers and the grand total are never striped; selection and hover still win. Uses the theme's <code>--lattice-surface-alt</code>, so dark, high-contrast and terminal come for free.</td></tr>
           <tr><td class="name">columnTagFilter</td><td class="type">boolean | { multiple, label }</td><td class="dflt">, </td><td class="desc">A bar above the headings for showing only the columns carrying a chosen tag. Draws nothing unless some column has <code>tags</code>. See <a href="api-detail.html#column-tags">Column tags</a>.</td></tr>
           <tr><td class="name">rowTemplate</td><td class="type">string | { template, cardsPerRow, maxCardWidth, gap, className, role, itemRole }</td><td class="dflt">, </td><td class="desc">Draw each row with a template instead of dividing it into columns, a card list, a feed, a search-result list. Compiles once; binds with <code>{{data.field}}</code>. <code>cardsPerRow</code> or <code>maxCardWidth</code> puts several on a line. The pipeline underneath is unchanged. See <a href="api-detail.html#cards">Cards, lists and feeds</a>.</td></tr>
+          <tr><td class="name">gallery</td><td class="type">boolean | { template, tileWidth, tileHeight, cardsPerRow, gap, className, role, itemRole }</td><td class="dflt">, </td><td class="desc">Present rows as a gallery of tiles, laid out by the same 2-D virtualisation the grid runs. <code>true</code> generates a tile per row from the columns; <code>tileWidth</code> sizes them and the count across follows the container, or <code>cardsPerRow</code> fixes it. Presentation only &mdash; sort, filter, group and export are unchanged. See <a href="api-detail.html#cards">Cards, lists and feeds</a>.</td></tr>
+          <tr><td class="name">recordCard</td><td class="type">boolean | { template, cardHeight, className, role, itemRole }</td><td class="dflt">, </td><td class="desc">Present each row as a record card &mdash; a form of label/value pairs, one line per column in display order, showing the same text the table shows. <code>true</code> generates the form from the columns. A card list underneath, so it inherits the virtualisation and every card interaction. Presentation only. See <a href="api-detail.html#cards">Cards, lists and feeds</a>.</td></tr>
+          <tr><td class="name">board</td><td class="type">boolean | { template, laneWidth, cardHeight, laneGap, gap, className, role, itemRole }</td><td class="dflt">, </td><td class="desc">Present rows as a board &mdash; a kanban of grouped lanes of cards. The top-level group becomes a lane and every leaf under it becomes a card stacked in it; group the grid to give the board its lanes. <code>true</code> generates a card per row from the columns. Both axes are virtualised, the lanes across and the cards down each, so a board of many long lanes draws only what is on screen. A board card is still a row: it clicks, selects and drags through the grid's own handlers. Presentation only &mdash; sort, filter, group and export are unchanged. See <a href="api-detail.html#cards">Cards, lists and feeds</a>.</td></tr>
           <tr><td class="name">responsive</td><td class="type">{ maxWidth, template, rowHeight }</td><td class="dflt">, </td><td class="desc">Collapse to cards when the <em>container</em> is at or below <code>maxWidth</code> (640 by default), and return to a table above it. Sorting, filtering and export keep working. Emits <code>presentation:changed</code>. See <a href="api-detail.html#cards">Cards, lists and feeds</a>.</td></tr>
           <tr><td class="name">rowForm</td><td class="type">boolean | { mode, load, fields, title, width, trigger, timeout, container }</td><td class="dflt">, </td><td class="desc">Open a row for editing on a form. <code>mode: 'drawer'</code> (default) or <code>'dialog'</code>; without <code>load</code> the fields are the grid's own columns. A field entry is <code>{ field, label, editor, type, props, lookup }</code>: any editor, including your own. Takes double-click on the row unless <code>trigger: false</code>. A load that has not answered within <code>timeout</code> milliseconds (2000; <code>false</code> waits indefinitely) is reported as a failure with a retry. <code>container</code> builds the form in an element of your own instead of over the grid. See <a href="api-detail.html#row-form">Editing a row on a form</a>.</td></tr>
           <tr><td class="name">showColumnFunctions</td><td class="type">boolean</td><td class="dflt">true</td><td class="desc"><code>false</code> leaves each heading as its label, with no sort, filter or menu control. Those remain reachable through the API, the keyboard and the tool panel.</td></tr>
@@ -4123,6 +4126,36 @@ grid.destroy();
   translated.total,
 ].join('|');</code></pre>
 
+    <h3 id="dhtmlx-spans-example">Cell spans, executed</h3>
+    <p class="section-note">dhtmlx's imperative <code>addSpan</code> maintains a span table, and that table drives
+    Lattice's own per-cell span functions — installed on each column's <code>cell</code> definition. A span
+    declared through the shim is read back through the very functions the renderer calls.</p>
+    <pre data-run="js" data-expect="3|2|1|1" data-covers="adapterKey:cell"><code><span class="cmt">// Aliased on import: the shim's span factory, bound to a local name.</span>
+<span class="kw">const</span> { createSpans: installSpans } = <span class="kw">await</span> import('../packages/modules/dhtmlx-compat/spans.js');
+
+<span class="cmt">// A minimal stand-in for a grid: it just holds its columns, which is all the</span>
+<span class="cmt">// span shim touches. `createSpans` installs `cell.spanRows`/`cell.spanColumns`</span>
+<span class="cmt">// on each column by re-setting them through its own wrapper.</span>
+<span class="kw">let</span> columns = [{ id: 'name', cell: {} }];
+<span class="kw">const</span> grid = {
+  get: () =&gt; columns,
+  set: (_, next) =&gt; { columns = next; },
+};
+
+<span class="kw">const</span> spans = installSpans(grid);
+spans.addSpan('R0', 'name', 3, 2); <span class="cmt">// rowspan 3, colspan 2</span>
+
+<span class="cmt">// The column's own cell functions now read the maintained table.</span>
+<span class="kw">const</span> { cell } = columns[0];
+<span class="kw">const</span> spanned = { row: { key: 'R0' }, colId: 'name' };
+<span class="kw">const</span> plain = { row: { key: 'R1' }, colId: 'name' };
+<span class="kw">return</span> [
+  cell.spanRows(spanned),
+  cell.spanColumns(spanned),
+  cell.spanRows(plain),
+  cell.spanColumns(plain),
+].join('|');</code></pre>
+
     <h3 id="module-exports-example">Every module export, executed</h3>
     <p class="section-note">Nine shipped modules, each export resolved against its own barrel on every build.</p>
     <pre data-run="js" data-expect="60" data-covers="export:ContextMenu export:Messages export:Registry export:autoInit export:createGrid export:createLocalViewStorage export:createMessages export:createStat export:deltaOf export:gridElementsWithin export:hydrateTable export:mountPanel export:readTable export:toneOf export:Chart export:PALETTE export:SCHEMES export:TYPES export:createChart export:chartRange export:canChartRange export:deriveRangeSpec export:registerScheme export:resolveScheme export:schemeNames export:setDefaultScheme export:HTML_ROW_WARNING_THRESHOLD export:QUERY_CHANGED_EVENT export:SCROLL_NEAR_END_EVENT export:attach export:destroyWithin export:driveInfiniteScroll export:driveOobUpdates export:driveServerMode export:ingestResponse export:initWithin export:queryParams export:restoreStateWithin export:rowsFromFragment export:rowsFromJson export:saveStateWithin export:ATTRIBUTE_CONFIG export:EVENT_PREFIX export:GridElementController export:LatticeGrid export:TAG_NAME export:createLatticeGridElement export:defineLatticeGrid export:domEventName export:observedAttributeNames export:CONSOLE_ACTIVATION export:createDevtools export:expose export:EVENT_NAMES export:handlerName export:createLatticeGrid export:dashedName export:createLatticeAction export:Grid export:warnIfLargeHtmlPayload"><code><span class="cmt">// Every declared export of every shipped module, resolved against its own</span>
@@ -4547,6 +4580,17 @@ grid.destroy();
         </tbody>
       </table>
     </div>
+    <h3 id="type-ApproximateEntry">ApproximateEntry</h3>
+    <p class="section-note">One entry of the approximate maintenance tier.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">sketch</td><td class="type">string</td><td class="desc">The sketch that backs this kernel: `HyperLogLog`, `KLL`, `SpaceSaving`.</td></tr>
+          <tr><td class="name">bound</td><td class="type">ErrorBound</td><td class="desc">The error bound the sketch is verified to meet.</td></tr>
+        </tbody>
+      </table>
+    </div>
     <h3 id="type-BooleanFormat">BooleanFormat</h3>
     <div class="table-wrap">
       <table>
@@ -4830,6 +4874,24 @@ grid.destroy();
         </tbody>
       </table>
     </div>
+    <h3 id="type-ColumnDifference">ColumnDifference</h3>
+    <p class="section-note">How one column differs between the filtered subset and its population.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">column</td><td class="type">string</td><td class="desc">The column id.</td></tr>
+          <tr><td class="name">name</td><td class="type">string</td><td class="desc">The column's display name, or its id.</td></tr>
+          <tr><td class="name">measure</td><td class="type">'standardizedMeanDifference' | 'categoricalTotalVariation'</td><td class="desc">The effect size reported for this column's family: the standardized mean difference for a numeric column, the total variation of the category mix for a categorical one. Never a p-value.</td></tr>
+          <tr><td class="name">magnitude</td><td class="type">number | null</td><td class="desc">The effect size in its own terms, or null when it has no scale here.</td></tr>
+          <tr><td class="name">distance</td><td class="type">number</td><td class="desc">The total variation distance between subset and population, 0 to 1 — the common scale both families reduce to, and what the ranking sorts by.</td></tr>
+          <tr><td class="name">direction</td><td class="type">number</td><td class="desc">+1 when the subset sits above the population, −1 below, 0 for a mix.</td></tr>
+          <tr><td class="name">subsetN</td><td class="type">number</td><td class="desc">How many rows the subset comparison stood on.</td></tr>
+          <tr><td class="name">populationN</td><td class="type">number</td><td class="desc">How many rows the population comparison stood on.</td></tr>
+          <tr><td class="name">reliable</td><td class="type">boolean</td><td class="desc">False when the subset is too small to read the difference from.</td></tr>
+        </tbody>
+      </table>
+    </div>
     <h3 id="type-ColumnDistribution">ColumnDistribution</h3>
     <div class="table-wrap">
       <table>
@@ -5044,6 +5106,8 @@ grid.destroy();
           <tr><td class="name">total</td><td class="type">TotalName | null</td><td class="desc"><small>(optional)</small></td></tr>
           <tr><td class="name">groupTotal</td><td class="type">TotalName | null</td><td class="desc">The group-subtotal override, when one differs from `total`. <small>(optional)</small></td></tr>
           <tr><td class="name">grandTotal</td><td class="type">TotalName | null</td><td class="desc">The grand-total override, when one differs from `total`. <small>(optional)</small></td></tr>
+          <tr><td class="name">decoration</td><td class="type">DecorationName | DecorationSpec | null</td><td class="desc">The column's runtime decoration (BACKLOG-0000723), present only when the column carries one, so a `columns.decorate()` survives a saved view and participates in undo/redo. Absent means "not recorded"; an explicit `null` on an undo patch clears a decoration back to plain text. <small>(optional)</small></td></tr>
+          <tr><td class="name">variant</td><td class="type">VariantSpec | null</td><td class="desc">The variant set alongside the decoration, when one is present. <small>(optional)</small></td></tr>
         </tbody>
       </table>
     </div>
@@ -5500,6 +5564,46 @@ grid.destroy();
         </tbody>
       </table>
     </div>
+    <h3 id="type-ErrorBound">ErrorBound</h3>
+    <p class="section-note">How an approximate reduction's error bound holds, and what it measures.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">kind</td><td class="type">'deterministic' | 'probabilistic' | 'exact'</td><td class="desc">`deterministic` every run, `probabilistic` in expectation, `exact` to float rounding.</td></tr>
+          <tr><td class="name">metric</td><td class="type">'absolute' | 'relative' | 'rank' | 'none'</td><td class="desc">What the number measures. `rank` is a fraction of the rank, for quantiles.</td></tr>
+          <tr><td class="name">value</td><td class="type">number</td><td class="desc">The bound itself, in the unit `metric` names.</td></tr>
+          <tr><td class="name">statement</td><td class="type">string</td><td class="desc">A one-line human reading of the guarantee.</td></tr>
+        </tbody>
+      </table>
+    </div>
+    <h3 id="type-ExcelBorderSpec">ExcelBorderSpec</h3>
+    <p class="section-note">A cell border, per edge. `true` means a thin line; a string names the style.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">left</td><td class="type">boolean | string</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">right</td><td class="type">boolean | string</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">top</td><td class="type">boolean | string</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">bottom</td><td class="type">boolean | string</td><td class="desc"><small>(optional)</small></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <h3 id="type-ExcelCellStyle">ExcelCellStyle</h3>
+    <p class="section-note">A conditional-formatting rule's rendering, returned by `cellStyle`.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">bold</td><td class="type">boolean</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">italic</td><td class="type">boolean</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">colour</td><td class="type">string</td><td class="desc">Font colour as 6- or 8-digit hex/ARGB, e.g. 'FFFF0000'. `color` is an alias. <small>(optional)</small></td></tr>
+          <tr><td class="name">color</td><td class="type">string</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">fill</td><td class="type">string</td><td class="desc">Solid fill colour as 6- or 8-digit hex/ARGB. <small>(optional)</small></td></tr>
+        </tbody>
+      </table>
+    </div>
     <h3 id="type-ExcelExportOptions">ExcelExportOptions</h3>
     <div class="table-wrap">
       <table>
@@ -5508,6 +5612,9 @@ grid.destroy();
           <tr><td class="name">sheetName</td><td class="type">string</td><td class="desc"><small>(optional)</small></td></tr>
           <tr><td class="name">freezePanes</td><td class="type">boolean</td><td class="desc"><small>(optional)</small></td></tr>
           <tr><td class="name">variantFills</td><td class="type">boolean</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">borders</td><td class="type">boolean | string | ExcelBorderSpec</td><td class="desc">Draw cell borders on the data grid. `false` (default) is borderless; `true` draws a thin box; a string names the line style; an object picks edges. <small>(optional)</small></td></tr>
+          <tr><td class="name">hiddenColumns</td><td class="type">'omit' | 'hidden'</td><td class="desc">What to do with grid-hidden columns. `'omit'` (default) drops them; `'hidden'` keeps them as Excel-hidden columns for round-trip fidelity. <small>(optional)</small></td></tr>
+          <tr><td class="name">merges</td><td class="type">string[]</td><td class="desc">Explicit merged body ranges in A1 form, e.g. ['A3:A4']. <small>(optional)</small></td></tr>
           <tr><td class="name">onProgress</td><td class="type">(p: { written: number; total: number }) =&gt; void</td><td class="desc"><small>(optional)</small></td></tr>
         </tbody>
       </table>
@@ -5828,6 +5935,9 @@ grid.destroy();
           <tr><td class="name">columnTagFilter</td><td class="type">boolean | { multiple?: boolean; label?: string }</td><td class="desc">Show a bar above the column headings for filtering columns by tag. Off by default, and it draws nothing unless some column carries a `tags` entry. `multiple: true` lets more than one tag be chosen at once. Only tagged columns are ever hidden, so an untagged account or total column stays visible whatever is selected. <small>(optional)</small></td></tr>
           <tr><td class="name">typeOptions</td><td class="type">Record&lt;string, {</td><td class="desc">Per-column options a data type reads. `ratio` and `percentRate` use `{ weight }` to name the column their average is weighted by. A unit type reads `{ significantFigures }` to render to a fixed precision rather than a fixed number of decimals. <small>(optional)</small></td></tr>
           <tr><td class="name">rowTemplate</td><td class="type">string | {</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">gallery</td><td class="type">boolean | {</td><td class="desc">Present rows as a gallery of tiles (§7.12). The tiled card layout with a size-driven column count: tiles as wide as `tileWidth` allows, as many across as the container holds, laid out by the same 2-D virtualisation the grid already runs. `true` draws a tile per row generated from the columns; an object sizes them or supplies a template. Presentation only — sort, filter, group and the data pipeline are unchanged. <small>(optional)</small></td></tr>
+          <tr><td class="name">recordCard</td><td class="type">boolean | {</td><td class="desc">Present each row as a record card — a form of label/value pairs (§7.11). For a screen where reading one record matters more than comparing many. `true` draws a card per row generated from the columns, each column a labelled line in display order, showing the same text the table shows. An object supplies a template or sizes the card. A card list underneath, so it inherits the virtualisation and every interaction a card carries. Presentation only — sort, filter, group and the data pipeline are unchanged. <small>(optional)</small></td></tr>
+          <tr><td class="name">board</td><td class="type">boolean | {</td><td class="desc">Present rows as a board — a kanban of grouped lanes of cards (§7.14). The top-level group becomes a lane and every leaf under it becomes a card stacked in that lane: a pipeline by stage, a task list by status, a backlog by owner. `true` draws a card per row generated from the columns; an object sizes the lanes and cards or supplies a template. Group the grid to give the board its lanes; an ungrouped board is a single lane of every card. A card is drawn through the same code the other card presentations use, so a board card is still a row: it clicks, selects and drags through the grid's own handlers, masks protected columns, and shows the same text the table shows. Both axes are virtualised — the lanes across and the cards down each — so a board of many long lanes renders only what is on screen. Presentation only: sort, filter, group and the data pipeline are unchanged. <small>(optional)</small></td></tr>
           <tr><td class="name">responsive</td><td class="type">{</td><td class="desc">Present rows as cards when the grid's container is too narrow to be a table honestly, a phone, or a narrow panel on a wide screen. Measured on the container, not the viewport, so a grid in a sidebar collapses and a grid filling a small tablet does not. Sorting, filtering and export continue to work; the tool panel is where they live when there are no column headings to click. Emits `presentation:changed`. <small>(optional)</small></td></tr>
           <tr><td class="name">rowForm</td><td class="type">boolean | {</td><td class="desc"><small>(optional)</small></td></tr>
           <tr><td class="name">showColumnFunctions</td><td class="type">boolean</td><td class="desc">Draw the sort, filter and menu controls in the column headings. `true` by default. `false` leaves each heading as its label alone, which is what a dense grid wants: three affordances take roughly fifty pixels, and on an eighty-pixel column that leaves the heading nothing and the label disappears entirely. Only the furniture goes. Sorting, filtering and the column menu are still reachable through the API, the keyboard and the tool panel. <small>(optional)</small></td></tr>
@@ -5849,8 +5959,8 @@ grid.destroy();
           <tr><td class="name">facets</td><td class="type">FacetConfig | boolean</td><td class="desc">Column header histograms and the filters clicking them creates. Off by default: the band roughly doubles header height, which is a cost no grid should pay without asking. Per-column settings layer over these. <small>(optional)</small></td></tr>
           <tr><td class="name">hostFilter</td><td class="type">{ active(): boolean; passes(row: Row): boolean }</td><td class="desc">A filter your application owns, applied alongside the grid's own and invisible to its filter UI. <small>(optional)</small></td></tr>
           <tr><td class="name">context</td><td class="type">unknown</td><td class="desc">Anything of yours, passed untouched to renderers, editors and sources. <small>(optional)</small></td></tr>
-          <tr><td class="name">workerThreshold</td><td class="type">number</td><td class="desc">Row count above which a column distribution is computed in a Worker. <small>(optional)</small></td></tr>
-          <tr><td class="name">useWorker</td><td class="type">boolean</td><td class="desc">Compute column distributions off the main thread. Sorting, filtering and grouping run on the main thread; see the reference for why. <small>(optional)</small></td></tr>
+          <tr><td class="name">workerThreshold</td><td class="type">number</td><td class="desc">Row count above which eligible work is computed in a Worker: column distributions, and a portable sort (a built-in collation with no custom comparator). Below it, everything runs on the main thread. <small>(optional)</small></td></tr>
+          <tr><td class="name">useWorker</td><td class="type">boolean</td><td class="desc">Compute eligible work off the main thread: column distributions, and a portable sort above {@link GridConfig.workerThreshold} (a re-sort recomputes off-thread while the grid keeps showing the prior order, then swaps to the new one when it lands). Filtering and grouping still run on the main thread. <small>(optional)</small></td></tr>
           <tr><td class="name">workerUrl</td><td class="type">string</td><td class="desc">Where to load the worker kernel from, when hosting it yourself. <small>(optional)</small></td></tr>
           <tr><td class="name">sharedMemory</td><td class="type">boolean</td><td class="desc">Use a shared buffer for the worker, where the page's headers allow it. <small>(optional)</small></td></tr>
           <tr><td class="name">groupFooter</td><td class="type">boolean</td><td class="desc">A totals line at the foot of each group as well as the grid. <small>(optional)</small></td></tr>
@@ -6055,6 +6165,18 @@ grid.destroy();
         </tbody>
       </table>
     </div>
+    <h3 id="type-MaintenanceTier">MaintenanceTier</h3>
+    <p class="section-note">The maintenance label for one kernel across both tiers.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">stat</td><td class="type">string</td><td class="desc">The kernel name.</td></tr>
+          <tr><td class="name">exact</td><td class="type">'maintained' | 'rescan' | null</td><td class="desc">Its exact tier, or null when it is not an exact kernel.</td></tr>
+          <tr><td class="name">approximate</td><td class="type">ApproximateEntry | null</td><td class="desc">The approximate alternative and bound, or null when none exists.</td></tr>
+        </tbody>
+      </table>
+    </div>
     <h3 id="type-MaximiseApi">MaximiseApi</h3>
     <div class="table-wrap">
       <table>
@@ -6931,6 +7053,7 @@ grid.destroy();
           <tr><td class="name">tracking</td><td class="type">(): { columns: string[]; rows: number; forgotten: number }</td><td class="desc">What the shadow histories are costing.</td></tr>
           <tr><td class="name">reduce</td><td class="type">(colId: string, fn: string): unknown</td><td class="desc">Reduce a column by a named kernel over the filtered rows.</td></tr>
           <tr><td class="name">profile</td><td class="type">(colId: string): ColumnProfile | null</td><td class="desc">Everything worth knowing about one column, in one pass each.</td></tr>
+          <tr><td class="name">subsetVsPopulation</td><td class="type">(opts?: { columns?: string[] }): SubsetComparison</td><td class="desc">Which columns differ most between the filtered subset and the whole population it was drawn from, ranked by effect size — never by a p-value. The measure is stated per column; a numeric and a categorical column are put on one bounded scale so they rank against each other.</td></tr>
           <tr><td class="name">correlation</td><td class="type">(a: string, b: string): number | null</td><td class="desc">Pearson's correlation between two columns.</td></tr>
           <tr><td class="name">covariance</td><td class="type">(a: string, b: string, opts?: { population?: boolean }): number | null</td><td class="desc">Covariance, a correlation before the scales are divided out.</td></tr>
           <tr><td class="name">regression</td><td class="type">(a: string, b: string): RegressionFit | null</td><td class="desc">Least-squares fit of `b` on `a`: in finance, beta and alpha.</td></tr>
@@ -6943,6 +7066,8 @@ grid.destroy();
           <tr><td class="name">weightedAverage</td><td class="type">(colId: string, weightId: string): number | null</td><td class="desc">A weighted average of one column by another.</td></tr>
           <tr><td class="name">keyOf</td><td class="type">(data: unknown): string | null</td><td class="desc">The key a row's data resolves to.</td></tr>
           <tr><td class="name">maintenance</td><td class="type">Readonly&lt;Record&lt;string, 'maintained' | 'rescan'&gt;&gt;</td><td class="desc">Which reductions can be maintained against a change, and which rescan. <small>(read-only)</small></td></tr>
+          <tr><td class="name">approximate</td><td class="type">Readonly&lt;Record&lt;string, ApproximateEntry&gt;&gt;</td><td class="desc">The approximate tier: kernels a sketch maintains in constant time per tick, keyed by kernel name, each carrying the sketch that backs it and the error bound that sketch is verified to meet. <small>(read-only)</small></td></tr>
+          <tr><td class="name">maintenanceTier</td><td class="type">(fn: string): MaintenanceTier</td><td class="desc">The honest tier for one kernel across both the exact and approximate maps: its exact tier and, when one exists, the approximate alternative and bound.</td></tr>
         </tbody>
       </table>
     </div>
@@ -6971,6 +7096,20 @@ grid.destroy();
         </tbody>
       </table>
     </div>
+    <h3 id="type-SubsetComparison">SubsetComparison</h3>
+    <p class="section-note">The subset-vs-population ranking (BACKLOG-0000653).</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">ranked</td><td class="type">ColumnDifference[]</td><td class="desc">Every compared column, largest difference first.</td></tr>
+          <tr><td class="name">subsetN</td><td class="type">number</td><td class="desc">How many rows the filtered subset holds.</td></tr>
+          <tr><td class="name">populationN</td><td class="type">number</td><td class="desc">How many rows the whole population holds.</td></tr>
+          <tr><td class="name">filtered</td><td class="type">boolean</td><td class="desc">Whether a filter is actually narrowing the set.</td></tr>
+          <tr><td class="name">measures</td><td class="type">{ numeric: string; categorical: string; common: string }</td><td class="desc">The measure each family reports, and the common scale, named for a legend.</td></tr>
+        </tbody>
+      </table>
+    </div>
     <h3 id="type-TextFormat">TextFormat</h3>
     <div class="table-wrap">
       <table>
@@ -7136,6 +7275,18 @@ grid.destroy();
         </tbody>
       </table>
     </div>
+    <h3 id="type-WindowSpec">WindowSpec</h3>
+    <p class="section-note">The window a windowed aggregate was computed over.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">kind</td><td class="type">'count' | 'time' | 'session'</td><td class="desc">Which window: last N ticks, last N ms, or the session.</td></tr>
+          <tr><td class="name">span</td><td class="type">number</td><td class="desc">The size: N ticks, N ms, or the session duration in ms.</td></tr>
+          <tr><td class="name">size</td><td class="type">number</td><td class="desc">How many values actually fell inside the window.</td></tr>
+        </tbody>
+      </table>
+    </div>
 <!-- END GENERATED TYPE REFERENCE -->
 
     <footer>

package/docs/api-detail.html

@@ -437,7 +437,7 @@
 <div class="shell">
   <aside class="rail">
     <p class="rail__brand">Lattice Grid</p>
-    <p class="rail__sub">Developer guide · v1.18.1</p>
+    <p class="rail__sub">Developer guide · v1.20.0</p>
     <nav>
       <div class="rail__group">
         <span class="rail__label">Start here</span>
@@ -3172,6 +3172,48 @@ columns: [
       record is a small piece of layout rather than a line of cells.
     </p>
 
+    <p class="lead-in">
+      Two shorthands sit on top of it for the shapes that recur. <code>recordCard</code> presents each
+      row as a record card &mdash; a form of label/value pairs, one line per column in display order,
+      showing the same text the table shows &mdash; for a screen where reading one record matters more
+      than comparing many. <code>gallery</code> presents the rows as a grid of tiles laid out by the
+      same 2-D virtualisation the grid already runs. Both take <code>true</code> to generate the layout
+      from the columns, or an object to size it or supply a template, and both are presentation only:
+      sort, filter, group and the data pipeline are unchanged.
+    </p>
+
+    <p class="lead-in">
+      <code>board</code> is the third shape: a kanban of grouped lanes of cards. Group the grid and the
+      top-level group becomes a lane, with every leaf under it a card stacked in that lane &mdash; a
+      pipeline by stage, a task list by status, a backlog by owner. Both axes are virtualised, the lanes
+      across and the cards down each, so a board of many long lanes draws only what is on screen. A board
+      card is still a row: it clicks, selects and drags through the grid's own handlers, and masks
+      protected columns exactly as every other card does. Like the others it is presentation only.
+    </p>
+
+    <div class="example">
+      <p class="example__label">The shorthands, and the config a grid reports back</p>
+      <pre data-run="js" data-expect="recordCard true, gallery 240px, board 300px" data-covers="config:recordCard config:gallery config:board"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+
+<span class="kw">const</span> grid = createHeadlessGrid({
+  columns: [{ field: 'name' }, { field: 'owner' }],
+  rows: [
+    { id: '1', name: 'Alpha', owner: 'Ada' },
+    { id: '2', name: 'Beta', owner: 'Ben' },
+  ],
+  rowKey: 'id',
+  <span class="cmt">// Each row as a labelled record card…</span>
+  recordCard: <span class="kw">true</span>,
+  <span class="cmt">// …or a gallery of size-driven tiles…</span>
+  gallery: { tileWidth: 240 },
+  <span class="cmt">// …or a kanban of grouped lanes. Presentation only.</span>
+  board: { laneWidth: 300 },
+});
+
+<span class="kw">const</span> c = grid.config();
+<span class="kw">return</span> `recordCard ${c.recordCard === <span class="kw">true</span>}, gallery ${c.gallery.tileWidth}px, board ${c.board.laneWidth}px`;</code></pre>
+    </div>
+
     <div class="example">
       <p class="example__label">A card list</p>
       <pre><code>createGrid(element, {
@@ -4265,9 +4307,11 @@ const providerFor = (id) =&gt; ({
       ordinary filters. Pausing the stream brings the charts back, a paused stream is a still
       one: unless you set <code>whilePaused: false</code>.</p>
       <p><strong>Counting runs off the main thread above <code>workerThreshold</code>.</strong>
-      Distributions are the only work the grid moves to a Worker. Sorting, filtering and grouping
-      run on the main thread; nothing waits on a histogram, which is what makes this one
-      offloadable. The column is copied, or shared where cross-origin isolation makes
+      A distribution was the first work the grid moved to a Worker: nothing waits on a histogram,
+      which is what made it offloadable without an async pipeline. A portable sort — a built-in
+      collation with no custom comparator — now also recomputes off-thread above the threshold,
+      serving the prior order until the new one lands. Filtering and grouping still run on the main
+      thread. The column is copied, or shared where cross-origin isolation makes
       <code>SharedArrayBuffer</code> available; it is never transferred, because transferring would
       detach the buffer the grid is still rendering from.</p>
       <p><strong>The Worker settings.</strong> <code>useWorker</code> and