@toclocoinc/lattice-grid 1.63.2 → 1.64.0

package/docs/API.html

@@ -360,7 +360,7 @@
 <div class="shell">
   <aside class="rail">
     <p class="rail__brand">Lattice Grid</p>
-    <p class="rail__sub">API reference · v1.63.2</p>
+    <p class="rail__sub">API reference · v1.64.0</p>
     <nav>
       <div class="rail__group">
         <span class="rail__label">Start</span>
@@ -421,6 +421,7 @@
         <a href="#units">Units of your own</a>
         <a href="#chartsmodule">The charts module</a>
         <a href="#layout">The dashboard layout</a>
+        <a href="#datarouter">The data router</a>
         <a href="#mocksocket">The mock socket</a>
         <a href="#charts">In-cell charts</a>
         <a href="#formulas">Formulas</a>
@@ -443,7 +444,7 @@
     </header>
 
     <p class="chips">
-      <span class="chip">Version 1.63.2</span>
+      <span class="chip">Version 1.64.0</span>
       <span class="chip">Zero dependencies</span>
       <span class="chip"><a href="api-detail.html">Developer guide &rarr;</a></span>
     </p>
@@ -1392,7 +1393,7 @@ grid.destroy();
       <table>
         <thead><tr><th>Member</th><th>Returns</th><th>Description</th></tr></thead>
         <tbody>
-          <tr><td class="sig">getVersion()</td><td class="type">string</td><td class="desc">The version this grid came from, e.g. <code>'1.63.2'</code>. Also on the module as <code>getVersion()</code>, for when you have no grid to hand.</td></tr>
+          <tr><td class="sig">getVersion()</td><td class="type">string</td><td class="desc">The version this grid came from, e.g. <code>'1.64.0'</code>. Also on the module as <code>getVersion()</code>, for when you have no grid to hand.</td></tr>
           <tr><td class="sig">get(key)</td><td class="type">unknown</td><td class="desc">Read any configuration key.</td></tr>
           <tr><td class="sig">set(key, value)</td><td class="type">void</td><td class="desc">Write one key. Every key is live; nothing needs a rebuild.</td></tr>
           <tr><td class="sig">setAll(values)</td><td class="type">void</td><td class="desc">Write several in one pass. Emits one <code>config:changed</code> for the batch, not one per key.</td></tr>
@@ -5163,7 +5164,7 @@ const chart = createChart({
           <tr><td class="sig">Part to whole</td><td><code>pie</code>, <code>donut</code>, <code>sunburst</code>, <code>treemap</code></td><td><code>x</code>, <code>y</code>; or the grid's grouping, see below</td></tr>
           <tr><td class="sig">Specialist</td><td><code>radar</code>, <code>gauge</code>, <code>funnel</code>, <code>candlestick</code></td><td>varies; candlestick takes four <code>measures</code> in open, high, low, close order</td></tr>
           <tr><td class="sig">Geographic</td><td><code>geomap</code></td><td><code>x</code> as an ISO code, <code>y</code> as the value</td></tr>
-          <tr><td class="sig">Flow</td><td><code>sankey</code>, <code>chord</code>, <code>network</code></td><td><code>source</code>, <code>target</code>, <code>y</code></td></tr>
+          <tr><td class="sig">Flow</td><td><code>sankey</code>, <code>chord</code>, <code>network</code></td><td><code>source</code>, <code>target</code>, <code>y</code>; a <code>network</code> also takes <code>nodes</code> &mdash; see <a href="#network-map">Network diagrams</a></td></tr>
           <tr><td class="sig">Over time</td><td><code>stream</code>, <code>marimekko</code>, <code>violin</code>, <code>gantt</code></td><td>varies; gantt takes <code>label</code>, <code>start</code>, <code>end</code></td></tr>
         </tbody>
       </table>
@@ -5210,6 +5211,9 @@ const chart = createChart({
           <tr><td class="name">code / codeProperty</td><td class="type">string</td><td class="desc">A geomap's ISO code column, and the property carrying the code in your <code>shapes</code>.</td></tr>
           <tr><td class="name">columns / method / values</td><td class="type">string[] / string / boolean</td><td class="desc">Correlogram: which columns to correlate, by <code>pearson</code>, <code>spearman</code> or <code>kendall</code>, and whether to print the coefficients in the cells.</td></tr>
           <tr><td class="name">iterations</td><td class="type">number</td><td class="desc">Network layouts: how many relaxation passes to run.</td></tr>
+          <tr><td class="name">nodes</td><td class="type">ChartNode[]</td><td class="desc">A <code>network</code>'s nodes, named by you rather than inferred from the rows: <code>{ id, label, icon, x, y }</code>. <code>id</code> matches a value in the <code>source</code> or <code>target</code> column; <code>icon</code> is any name in the grid's icon registry; <code>x</code>/<code>y</code> are fractions of the plot (0&nbsp;to&nbsp;1) and <strong>pin</strong> the node there, out of the force simulation. A node listed here that appears in no row is still drawn. See <a href="#network-map">Network diagrams</a>.</td></tr>
+          <tr><td class="name">icon</td><td class="type">string</td><td class="desc">The default glyph for a <code>network</code> node that names none of its own. Unset, an undeclared node is a plain disc.</td></tr>
+          <tr><td class="name">linkWidth</td><td class="type">number</td><td class="desc">Fix a <code>network</code> link's stroke width in pixels. Unset, width follows the link's value as a share of the heaviest link.</td></tr>
           <tr><td class="name">spec / baseline / rules / confidence</td><td class="type">object / number / string / number</td><td class="desc">Control and capability charts: a tolerance overriding the column's own <code>spec</code>, how many leading readings fix the control limits, which rule set judges the violations (<code>westernElectric</code> or <code>nelson</code>), and the level for the capability interval.</td></tr>
         </tbody>
       </table>
@@ -5485,6 +5489,97 @@ createChart({ grid, container: '#us', type: 'geomap', code: 'state', y: 'sales',
 
     <div class="note"><p>The module imports nothing from the grid: <code>createChart</code> is handed a grid rather than importing one. That is what keeps the charts bundle to the drawing, and it is why the grid must be created first, and why a chart cannot outlive it.</p></div>
 
+    <h3 id="network-map">Network diagrams &mdash; icon nodes, links coloured by their value</h3>
+    <p>A <code>network</code> draws the grid's rows as a graph: <code>source</code> and <code>target</code> name the two endpoint columns and <code>y</code> carries the value on the link between them. Three things make it a picture of <em>your</em> network rather than a generic hairball, and each is a fact only you have.</p>
+    <p><strong>Nodes you name.</strong> <code>nodes: [{ id, label, icon, x, y }]</code> gives a node a glyph from the grid's own icon registry &mdash; a built-in name, or one you registered &mdash; and a label drawn beneath it. A node that appears in the rows but not in <code>nodes</code> takes the chart's <code>icon</code> default (a plain disc when there is none) and its own id as its label. A node listed in <code>nodes</code> that appears in <em>no</em> row is still drawn: a device with no links is a fact worth seeing. The glyphs are SVG paths from the same registry the cells paint from, so they are sharp at any chart size and take the chart's theme colours.</p>
+    <p><strong>Positions you choose.</strong> <code>x</code> and <code>y</code> are fractions of the plot, measured from its top-left. A node giving <em>both</em> is <strong>pinned</strong> there and takes no part in the force simulation; everything else is laid out around it by the same deterministic relaxation as before, so &ldquo;core on top, regions below&rdquo; needs no hand-placed SVG. Half a position is not a position: a node with only <code>x</code> is laid out. A fraction outside 0&nbsp;to&nbsp;1 clamps to the edge of the plot rather than drawing where nobody can see it. Pinning one node never reshuffles the others &mdash; the layout's seeding draws for every node, pinned or not, precisely so that it cannot.</p>
+    <p><strong>Colours from the rules you already wrote.</strong> Each link's stroke comes from the value column's own conditional-formatting rules, through <code>grid.formatting.styleFor(col, value)</code> &mdash; the colour order is <code>background</code>, then <code>backgroundColor</code>, then <code>color</code>; a gradient (a data bar, an icon set) is not a colour and is not read. A link no rule matches keeps the chart's default link colour. <strong>There is no chart-level threshold option, deliberately</strong>: a second place to say &ldquo;red above 80&rdquo; is a second place for the chart and the cell to disagree. The legend lists the rules that actually fired, with their own labels and their own swatches; a rule that matched nothing is not advertised. Change a rule and the links recolour on the next frame without the layout re-running, so nothing moves.</p>
+    <p><strong>Links are undirected, and parallel links stay parallel.</strong> There are no arrowheads, and <code>A,B</code> is the same pair as <code>B,A</code> &mdash; a cable has two ends and no direction. <strong>Several rows between the same pair are drawn as several lines</strong>, side by side, offset perpendicular to the pair by 4&nbsp;px and symmetric about it, in row order, each with its own value and its own colour. They are <em>not</em> summed: three circuits between two sites are three readings, and one line carrying 120% would be a number nothing measured. The tooltip on any one line names both endpoints and that line's own value, and the pointer picks out the line you are actually over rather than the pair. Width follows the value unless <code>linkWidth</code> fixes it.</p>
+    <p><strong>Linked like every other chart.</strong> The graph is drawn from the grid's filtered rows and follows filter and sort. With <code>selection: true</code>, clicking a link selects its row and clicking a node selects every row it is an end of; the grid's selection then lights those links and nodes and dims the rest. A <code>click</code> handler still fires first and can <code>preventDefault()</code>.</p>
+
+    <h4 id="network-map-example">The picture, executed</h4>
+    <p class="section-note">Two core routers pinned across the top, three regional routers pinned below, two circuits between every pair, and one rule set on the <code>load</code> column doing all the colouring. Thirteen rows, thirteen lines, three colours, five glyphs, and a legend that names the three rules.</p>
+    <pre data-run="js" data-expect="13 links, #107c41/#a4262c/#f0b400 | pinned true | gap 4 | 5 icons | Healthy,Busy,Saturated" data-covers="export:createChart export:createGrid config:formatting config:selection"><code>const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
+const { createGrid } = await import('../packages/dom/src/index.js');
+const { createChart } = await import('../packages/modules/charts/index.js');
+
+const { document, root } = createTestDom({ width: 640, height: 420 });
+
+// Two circuits between every core and every region: six pairs, twelve rows.
+const rows = [];
+for (const core of ['core-1', 'core-2']) {
+  for (const site of ['emea', 'amer', 'apac']) {
+    for (const [n, load] of [['a', 18], ['b', 92]]) {
+      rows.push({ id: `${core}/${site}/${n}`, from: core, to: site, load });
+    }
+  }
+}
+rows.push({ id: 'core-1/core-2/x', from: 'core-1', to: 'core-2', load: 61 });
+
+const grid = createGrid(root, {
+  rowKey: 'id',
+  selection: 'multiple',
+  columns: [{ field: 'from' }, { field: 'to' }, { field: 'load', type: 'number' }],
+  rows,
+  // One rule set on the column. The cells and the links read it together.
+  formatting: {
+    load: [
+      { id: 'ok', label: 'Healthy', when: { op: 'lt', value: 40 }, style: { background: '#107c41' } },
+      { id: 'busy', label: 'Busy', when: { op: 'lt', value: 80 }, style: { background: '#f0b400' } },
+      { id: 'hot', label: 'Saturated', when: { op: 'gte', value: 80 }, style: { background: '#a4262c' } },
+    ],
+  },
+});
+
+const container = document.createElement('div');
+container.rect = { width: 600, height: 400, top: 0, left: 0 };
+root.appendChild(container);
+
+const chart = createChart({
+  grid, container, type: 'network', source: 'from', target: 'to',
+  y: { col: 'load', fn: 'sum' }, selection: true,
+  nodes: [
+    { id: 'core-1', label: 'Core', icon: 'square', x: 0.3, y: 0.15 },
+    { id: 'core-2', label: 'Core', icon: 'square', x: 0.7, y: 0.15 },
+    { id: 'emea', label: 'EMEA', icon: 'circleFilled', x: 0.2, y: 0.8 },
+    { id: 'amer', label: 'AMER', icon: 'circleFilled', x: 0.5, y: 0.8 },
+    { id: 'apac', label: 'APAC', icon: 'circleFilled', x: 0.8, y: 0.8 },
+  ],
+});
+
+const find = (tag, cls) =&gt; [...container.querySelectorAll(tag)]
+  .filter((n) =&gt; (n.getAttribute('class') || '').includes(cls));
+const at = (key) =&gt; find('circle', '__node').find((c) =&gt; c.getAttribute('data-node') === key);
+const num = (el, name) =&gt; Number(el.getAttribute(name));
+
+// The picture: two cores on one row, three regions on another below them.
+const top = [at('core-1'), at('core-2')].map((c) =&gt; num(c, 'cy'));
+const bottom = ['emea', 'amer', 'apac'].map((k) =&gt; num(at(k), 'cy'));
+const rowsPinned = top[0] === top[1] &amp;&amp; bottom.every((y) =&gt; y === bottom[0]) &amp;&amp; bottom[0] &gt; top[0]
+  &amp;&amp; num(at('core-1'), 'cx') &lt; num(at('core-2'), 'cx');
+
+// Every link its own line, coloured by the rule its value matched.
+const edges = find('path', '__edge');
+const stroke = (e) =&gt; ((e.getAttribute('style') || '').match(/stroke:\s*([^;]+)/) || [])[1];
+const colours = [...new Set(edges.map(stroke))].sort();
+
+// Two circuits between core-1 and emea, drawn side by side 4px apart.
+const ends = (d) =&gt; d.match(/-?\d+(?:\.\d+)?/g).map(Number);
+const pair = edges.slice(0, 2).map((e) =&gt; ends(e.getAttribute('d')));
+const gap = Math.round(Math.hypot(pair[0][0] - pair[1][0], pair[0][1] - pair[1][1]));
+
+// Five glyphs, drawn from the registry the host extended.
+const glyphs = find('path', '__node-icon').length;
+
+// The legend names the rules that fired, not a palette.
+const legend = [...container.querySelectorAll('button')]
+  .filter((b) =&gt; (b.getAttribute('class') || '').includes('__legend-item'))
+  .map((b) =&gt; b.textContent).join(',');
+
+chart.destroy();
+grid.destroy();
+return `${edges.length} links, ${colours.join('/')} | pinned ${rowsPinned} | gap ${gap} | ${glyphs} icons | ${legend}`;</code></pre>
+
     <h3 id="chart-extension-types">Extension chart types — pay only for what you draw</h3>
     <p>The base charts bundle draws the built-in <code>TYPES</code> and nothing else. A new chart type is a <strong>separate, opt-in module</strong> a caller imports only if they use it (BACKLOG-0000886, on the slim-core seam BACKLOG-0000884). Importing it self-registers the type with the base module through <code>registerChartType</code>; the base <code>Chart</code> consults that registry for any type it does not draw natively. Because the base never imports the extension, the base bundle <strong>does not grow</strong> for a type a caller never uses.</p>
     <pre><code><span class="kw">import</span> '@toclocoinc/lattice-grid/modules/charts';           <span class="cmt">// the base</span>
@@ -5600,6 +5695,62 @@ grid.destroy();
   typeof hexmap.drawHexMap, typeof hexmap.bindHexMap,
 ].join(' | ');</code></pre>
 
+    <h3 id="chart-markermap">Map markers &mdash; a figure per location, coloured by its own rule</h3>
+    <p><code>modules/chart-markermap</code> registers <code>markermap</code>: one marker per row, placed by <code>lon</code>/<code>lat</code> over a geometry pack's outlines, showing the row's <code>label</code> and its <code>value</code> beside the dot. Two things come from the grid rather than from the chart, and that is the whole point of the type. The <strong>number</strong> is the value column's own formatted cell text, so a percentage, a currency or a unit reads on the map exactly as it reads in the table. The <strong>colour</strong> is whatever <code>grid.formatting.styleFor(valueColumn, value)</code> returns for that row &mdash; the rule's <code>background</code>, or its <code>color</code> where it sets no background &mdash; so a red / amber / green availability wall is one rule set on one column plus one chart configuration. There is deliberately no chart-level thresholds option and no colour column: the rules are the one source, and a legend lists the rules that actually fired, with each rule's own swatch.</p>
+    <p>With <code>shapes</code> it draws the pack's regions underneath, through the pack's own <code>projection</code>, and pans and zooms exactly as a <a href="#geometry-packs">geomap</a> of that pack does; without <code>shapes</code> the markers fall back to the projection alone. A row whose coordinates are absent, non-numeric or outside &plusmn;180 / &plusmn;90 draws no marker and is counted in <code>chart.data().unplaced</code>, which the map also writes under itself. Labels are deconflicted by trying four positions in a fixed order &mdash; right of the dot, then left, then above, then below &mdash; and a label with nowhere to go is dropped rather than overprinted; <code>labels: false</code> turns them all off on a dense map and leaves the tooltip, which carries the name, the value, the coordinates and the status. With <code>selection: true</code> a click on a marker selects that row in the grid, and the grid's selection emphasises the marker.</p>
+    <pre data-run="js" data-expect="#1b7f3b #1b7f3b #c8a415 #c0392b | London 99.95% / Sydney 99.91% / Frankfurt 99.62% / New York 98.05% | unplaced 0" data-covers="export:drawMarkerMap export:bindMarkerMap"><code><span class="kw">const</span> { createTestDom } = <span class="kw">await</span> import('../packages/dom/src/renderer/testdom.js');
+<span class="kw">const</span> { document, root } = createTestDom({ width: 700, height: 460 });
+<span class="kw">const</span> panel = document.createElement('div');
+panel.rect = { width: 700, height: 460, top: 0, left: 0 };
+root.appendChild(panel);
+
+<span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+<span class="kw">const</span> { createChart } = <span class="kw">await</span> import('../packages/modules/charts/index.js');
+<span class="cmt">// Importing the module registers `markermap`; its drawer is drawMarkerMap.</span>
+<span class="kw">const</span> markermap = <span class="kw">await</span> import('../packages/modules/chart-markermap/index.js');
+<span class="kw">const</span> { pack } = <span class="kw">await</span> import('../packages/modules/geo-world-110m/index.js');
+
+<span class="kw">const</span> grid = createHeadlessGrid({
+  rowKey: 'id',
+  columns: [
+    { field: 'site', type: 'text' }, { field: 'lng', type: 'number' },
+    { field: 'lat', type: 'number' }, { field: 'avail', type: 'number', format: '0.00%' },
+  ],
+  rows: [
+    { id: 'ldn', site: 'London', lng: -0.13, lat: 51.5, avail: 0.9995 },
+    { id: 'syd', site: 'Sydney', lng: 151.2, lat: -33.87, avail: 0.9991 },
+    { id: 'fra', site: 'Frankfurt', lng: 8.68, lat: 50.11, avail: 0.9962 },
+    { id: 'nyc', site: 'New York', lng: -74.0, lat: 40.71, avail: 0.9805 },
+  ],
+});
+<span class="cmt">// Three rules on the column. Nothing below repeats a threshold or a colour.</span>
+grid.formatting.add('avail', { when: { op: 'gte', value: 0.999 }, style: { background: '#1b7f3b' }, label: 'Healthy' });
+grid.formatting.add('avail', { when: { op: 'gte', value: 0.99 }, style: { background: '#c8a415' }, label: 'Watch' });
+grid.formatting.add('avail', { when: { op: 'lt', value: 0.99 }, style: { background: '#c0392b' }, label: 'Breached' });
+
+<span class="kw">const</span> chart = createChart({
+  grid, container: panel, type: 'markermap',
+  lon: 'lng', lat: 'lat', label: 'site', value: 'avail', shapes: pack,
+});
+
+<span class="cmt">// What was painted: a fill per marker, and the text beside each dot.</span>
+<span class="kw">const</span> fills = [];
+<span class="kw">const</span> labels = [];
+<span class="kw">const</span> walk = (node) =&gt; {
+  <span class="kw">for</span> (<span class="kw">const</span> child <span class="kw">of</span> node.children || []) {
+    <span class="kw">const</span> cls = String(child.getAttribute('class') || '');
+    <span class="kw">if</span> (cls.includes('markermap-dot')) fills.push(child.getAttribute('fill'));
+    <span class="kw">if</span> (cls.includes('data-label')) labels.push(child.textContent);
+    walk(child);
+  }
+};
+walk(chart.element);
+
+<span class="cmt">// The binder is public too, for a host that wants the placed rows itself.</span>
+<span class="kw">const</span> bound = markermap.bindMarkerMap(grid, { lon: 'lng', lat: 'lat', label: 'site', value: 'avail' });
+chart.destroy();
+<span class="kw">return</span> `${fills.join(' ')} | ${labels.join(' / ')} | unplaced ${bound.unplaced}`;</code></pre>
+
     <h2 id="datarouter">The data router</h2>
     <p><code>modules/data-router</code> is a host-layer demultiplexer: it takes <strong>one</strong> arriving stream or dataset, splits it by what each record <em>is</em>, and routes each partition to its own grid &mdash; or to a headless grid driving a chart. One round-trip, or one live feed, hydrates a whole screen of grids that each see only their slice. It is optional, imports nothing from the grid, and adds no core hook: every grid is driven through the <strong>public</strong> incremental path, <code>grid.rows.apply({ add, update, remove })</code>. <strong>The router never opens a connection itself &mdash; the host owns the connection (a <code>WebSocket</code>, SSE, CDC, a message bus, a plain fetch), and the router owns everything once a message has arrived</strong>; see <a href="#datarouter-websocket-example">a live WebSocket feed</a> for the worked, runnable integration.</p>
     <pre><code>import { createDataRouter } from '@toclocoinc/lattice-grid/modules/data-router';
@@ -5630,12 +5781,12 @@ router.load(snapshot);                        <span class="cmt">// every viewer
       <table>
         <thead><tr><th>Member</th><th>Description</th></tr></thead>
         <tbody>
-          <tr><td class="sig">createDataRouter({ key, rowKey?, overlap?, onUnrouted?, seq?, dedupe?, batch?, coalesce?, time?, now?, onWrite?, onConflict?, config? })</td><td class="desc">Create a router. <code>key</code> is the partition (property or <code>fn(row)</code>); <code>rowKey</code> the default identity within a grid; <code>overlap</code> fans a record to all matching routes; <code>onUnrouted</code> is a sink for unmatched records. <strong>v3:</strong> <code>seq</code> (a version field or <code>fn(row)</code>) turns on ordered de-duplication, <code>dedupe: false</code> opts out; <code>batch</code> (interval ms or <code>{ intervalMs }</code>) / <code>coalesce: true</code> buffer a high-frequency <code>push</code>. <strong>v4:</strong> <code>time</code> (a timestamp field or <code>fn(row)</code>) and an injectable <code>now</code> clock drive time-domain scrubbing. <strong>v8:</strong> <code>onWrite</code>/<code>onConflict</code> are the router-global write-back callbacks. <strong>v5:</strong> <code>config</code> is a declarative routing spec, desugared through <code>configure</code>.</td></tr>
+          <tr><td class="sig">createDataRouter({ key?, rowKey?, overlap?, onUnrouted?, selectionDebounce?, metricsInterval?, seq?, dedupe?, batch?, coalesce?, time?, now?, onWrite?, onConflict?, config? })</td><td class="desc">Create a router. <code>key</code> is the partition (property or <code>fn(row)</code>) &mdash; optional, since a router whose routes all use <code>fn(row)</code> predicates never reads it; <code>rowKey</code> the default identity within a grid; <code>overlap</code> fans a record to all matching routes; <code>onUnrouted</code> is a sink for unmatched records (it receives the row on <code>load</code> and <code>query</code>, and the whole delta on <code>apply</code>). <code>selectionDebounce</code> is the debounce in ms for cross-grid selection refilters (default 16; <code>0</code> refilters synchronously). <strong>v10:</strong> <code>metricsInterval</code> is the ms between periodic <code>on('metrics')</code> emits (default 1000; <code>0</code> disables the timer). <strong>v3:</strong> <code>seq</code> (a version field or <code>fn(row)</code>) turns on ordered de-duplication, <code>dedupe: false</code> opts out; <code>batch</code> (interval ms or <code>{ intervalMs }</code>) / <code>coalesce: true</code> buffer a high-frequency <code>push</code>. <strong>v4:</strong> <code>time</code> (a timestamp field or <code>fn(row)</code>) and an injectable <code>now</code> clock drive time-domain scrubbing. <strong>v8:</strong> <code>onWrite</code>/<code>onConflict</code> are the router-global write-back callbacks. <strong>v5:</strong> <code>config</code> is a declarative routing spec, desugared through <code>configure</code>.</td></tr>
           <tr><td class="sig">attach(grid, predicate, { rowKey? })</td><td class="desc">Route to <code>grid</code> when <code>predicate</code> matches: a value compared to <code>key</code>, or a <code>fn(row) =&gt; boolean</code>. <code>rowKey</code> overrides the router default for this grid.</td></tr>
           <tr><td class="sig">attachDefault(grid, { rowKey? })</td><td class="desc">The "rest" sink: the grid that receives every record no explicit route matched.</td></tr>
           <tr><td class="sig">load(snapshot)</td><td class="desc">Apply a full snapshot as a keyed diff per grid. Returns per-route <code>{ added, updated, removed }</code> counts in attach order.</td></tr>
           <tr><td class="sig">apply(deltas)</td><td class="desc">Apply <code>{ op: 'upsert' | 'delete', row }</code> deltas in place by <code>rowKey</code>.</td></tr>
-          <tr><td class="sig">unrouted</td><td class="desc">How many records matched no route (reset by <code>load</code>, running for deltas).</td></tr>
+          <tr><td class="sig">unrouted</td><td class="desc">How many records matched no route. Reset to zero by <code>load</code> and by <code>query</code>, then running for deltas &mdash; so read it straight after the call you care about, not at the end of a session.</td></tr>
           <tr><td class="sig">link(source, target, relation)</td><td class="desc"><strong>v2:</strong> make a selection in <code>source</code> filter what <code>target</code> receives. <code>relation</code> is a key map <code>{ from, to }</code> (target rows whose <code>to</code> value is among the selected source rows' <code>from</code> values &mdash; multi-select is an IN set, ANY match) or a function <code>fn(selectedSourceRows) =&gt; (row) =&gt; boolean</code>. No selection shows the full partition; changes are debounced.</td></tr>
           <tr><td class="sig">flush()</td><td class="desc"><strong>v2:</strong> apply any debounced selection refilter now, for a deterministic point (and for tests).</td></tr>
           <tr><td class="sig">attach(grid, predicate, { rollup })</td><td class="desc"><strong>v3:</strong> feed the grid a grouped/summarised view &mdash; <code>rollup: { groupBy, aggregate }</code> gives one summary row per group (<code>op</code> of <code>sum</code>/<code>avg</code>/<code>min</code>/<code>max</code>/<code>count</code> over a <code>field</code>, or a <code>fn(rows)</code>). Applied by keyed diff, so only a moved group repaints.</td></tr>
@@ -5650,8 +5801,9 @@ router.load(snapshot);                        <span class="cmt">// every viewer
           <tr><td class="sig">attach(grid, predicate, { writable, onWrite?, onConflict? })</td><td class="desc"><strong>v8 (BACKLOG-0000912):</strong> make a route <strong>writable</strong> &mdash; the router captures the grid's committed edits off its public edit surface (<code>grid.on('cell:changed')</code> &rarr; <code>grid.edit.setCells</code>) and routes them to <code>onWrite(change, { route, source })</code> (per-route here, or the router-global <code>onWrite</code>), reverting the cell on reject and re-entering an accepted write as a normal delta. <code>onConflict(change, { serverRow })</code> surfaces a last-write-wins conflict. A derived (<code>rollup</code>/<code>transform</code>) route cannot be writable &mdash; its edits are reverted and warned.</td></tr>
           <tr><td class="sig">attach(grid, predicate, { where })</td><td class="desc"><strong>v7 (BACKLOG-0000914):</strong> a route-level <code>where</code> &mdash; a filter-wire condition <code>{ col, op, value }</code> or an <code>and</code>/<code>or</code>/<code>not</code> group &mdash; used only by query-slice routing (<code>query()</code>): the router pushes it <em>down</em> to the engine where the adapter allows and finishes the residual client-side. Distinct from <code>filter</code> (a <code>fn(row)</code> that only ever runs in the browser).</td></tr>
           <tr><td class="sig">attach(grid, predicate, { label, backpressure })</td><td class="desc"><strong>v10/v13:</strong> a human <code>label</code> for the route (shown in <code>metrics()</code> and the devtools panel), and a per-route <strong>backpressure</strong> policy that throttles / coalesces / samples how that route's viewer is refreshed under load &mdash; <em>without</em> touching the keyed store or any other route. <code>backpressure: { maxHz, minInterval?, sample?, maxLag? }</code>: <code>maxLag</code> (a backlog depth) sets when it engages (below it, changes pass straight through); <code>maxHz</code>/<code>minInterval</code> cap the refresh rate; <code>sample</code> (an integer &gt; 1) thins intermediate refreshes. A trailing flush always lands the latest state (deletes included), so the viewer converges and is never left stale.</td></tr>
+          <tr><td class="sig">flushBackpressure()</td><td class="desc"><strong>v13 (BACKLOG-0000962):</strong> refresh every backpressured route to the latest state now. A route with a <code>backpressure</code> policy holds its viewer refresh until its rate limit or sample count allows one, so a test &mdash; or a teardown &mdash; can observe a route that has not caught up yet; this forces the deferred flush for every route at once and gives you a deterministic point. A no-op for routes without a policy or with nothing pending, and it never touches the keyed store: the rows were always current, only the refresh was held.</td></tr>
           <tr><td class="sig">query(adapter, request?)</td><td class="desc"><strong>v7 (BACKLOG-0000914):</strong> source the router from a DFQL/DuckDB (or any pushdown) adapter. Runs <code>adapter.execute</code>, partitions the result across the routes and drives the grids by the same keyed diff <code>load()</code> uses; a route's <code>where</code> is planned against the adapter's capabilities (pushed down where allowed, residual finished client-side). Composes with per-route <code>transform</code>/<code>filter</code>/<code>sort</code>/<code>rollup</code> and links/graph. Async &mdash; resolves once every slice is fetched and applied.</td></tr>
-          <tr><td class="sig">lastQueryPlan()</td><td class="desc"><strong>v7:</strong> the pushed/residual split of the last <code>query()</code>, per fetch &mdash; whether a filter reached the engine and what work was left client-side. <code>null</code> before any query. Provenance, so a slow slice is diagnosed rather than guessed.</td></tr>
+          <tr><td class="sig">lastQueryPlan()</td><td class="desc"><strong>v7:</strong> the pushed/residual split of the last <code>query()</code>, per fetch &mdash; whether a filter reached the engine and what work was left client-side. <code>null</code> before any query. Each entry is <code>{ route, pushedFilter, residual }</code> for a <code>where</code> route &mdash; <code>route</code> the grid, <code>pushedFilter</code> whether its filter reached the engine, <code>residual</code> the work finished client-side &mdash; or <code>{ base: true, pushedFilter, residual }</code> for the single base fetch that fed every route without a <code>where</code>. Provenance, so a slow slice is diagnosed rather than guessed.</td></tr>
           <tr><td class="sig">buffer({ window?, max? })</td><td class="desc"><strong>v4 (BACKLOG-0000911):</strong> turn on time-travel buffering &mdash; record the ordered, de-duplicated stream into a <strong>bounded</strong> ring (a time <code>window</code> in ms and/or a <code>max</code> delta count; eviction folds the oldest into a moving base, so memory never grows unbounded; a default cap applies if you name neither). Seeded from the current world, so it can be turned on at any time. Opt-in and off by default.</td></tr>
           <tr><td class="sig">scrubTo(target, { by? })</td><td class="desc"><strong>v4:</strong> scrub the grids to a past point &mdash; the base snapshot plus the buffered deltas up to <code>target</code> (a seq when the router has one, else a timestamp; <code>{ by: 'seq' | 'time' }</code> chooses). Pushed by keyed diff, so each view keeps scroll and selection and only changed rows repaint. Live deltas keep arriving into the buffer but do not disturb the view.</td></tr>
           <tr><td class="sig">replay(from, to, { speed?, by? })</td><td class="desc"><strong>v4:</strong> walk an incident &mdash; scrub to <code>from</code>, then apply each buffered delta in <code>(from, to]</code> in order, one per <code>speed</code> ms (default <code>0</code>). Returns a promise resolving when the range finishes (or is superseded); the router stays parked at <code>to</code> until <code>live()</code>.</td></tr>
@@ -5664,7 +5816,7 @@ router.load(snapshot);                        <span class="cmt">// every viewer
           <tr><td class="sig">removeSource(ref) / sources()</td><td class="desc"><strong>v9:</strong> drop exactly the rows a feed contributed (by source id or handle) from every route and unregister it; and list the registered source ids.</td></tr>
           <tr><td class="sig">metrics()</td><td class="desc"><strong>v10 (BACKLOG-0000932):</strong> a cheap point-in-time observability snapshot &mdash; per-route row counts and throughput (rows/sec since the previous read), per-source rates and totals (fan-in), and the global <code>unrouted</code> / <code>dropped</code> / <code>buffered</code> / <code>lag</code> figures. Throughput is sampled over the interval since the last <code>metrics()</code> call or emit. Each entry in <code>routes[]</code> also carries its <code>label</code> and, when the route declares a backpressure policy, a <code>backpressure: { pending, coalesced }</code> object &mdash; <code>pending</code> is the held backlog since the last flush (the route's lag) and <code>coalesced</code> the cumulative change-events it has absorbed into deferred refreshes (<code>null</code> when the route has no policy).</td></tr>
           <tr><td class="sig">on('metrics', handler)</td><td class="desc"><strong>v10:</strong> subscribe to the periodic <code>metrics</code> emit (the <code>metricsInterval</code> ms, default 1000; <code>0</code> disables it). The timer runs only while at least one listener is registered and stops when the last is removed. Returns an unsubscribe function.</td></tr>
-          <tr><td class="sig">mountDevtools(el, { interval? })</td><td class="desc"><strong>v10:</strong> mount an opt-in, DOM-touching live panel (in the module's own <code>devtools.js</code>, so the core stays DOM-free) that renders <code>metrics()</code> into <code>el</code> and refreshes on each emit. Returns a controller with <code>destroy()</code>. Off unless called.</td></tr>
+          <tr><td class="sig">mountDevtools(el)</td><td class="desc"><strong>v10:</strong> mount an opt-in, DOM-touching live panel (in the module's own <code>devtools.js</code>, so the core stays DOM-free) that renders <code>metrics()</code> into <code>el</code> and re-renders on each <code>on('metrics')</code> emit &mdash; so the panel's cadence is the router's <code>metricsInterval</code>, not a setting of its own. Returns a controller with <code>refresh()</code>, which forces an immediate re-render, and <code>destroy()</code>, which unsubscribes and removes the panel from the DOM. The same panel is available without a router: <code>mountRouterDevtools(router, el)</code> is a named export of <code>modules/data-router/devtools.js</code>, and <code>mountDevtools</code> is a one-line wrapper over it. Off unless called.</td></tr>
           <tr><td class="sig">persist({ key?, debounce?, storage?, indexedDB?, dbName?, storeName? })</td><td class="desc"><strong>v12 (BACKLOG-0000961):</strong> turn on durable persistence &mdash; snapshot the keyed store and the time-travel ring to a durable async key/value store so an offline reload or a browser refresh resumes exactly where it left off. The default backend is <strong>IndexedDB</strong> (native, no dependency), opened lazily and guarded so private-mode or blocked storage degrades to in-memory with a one-time warning rather than throwing. Writes a coalesced snapshot after each <code>load</code>/<code>apply</code> (debounced by <code>debounce</code> ms, default 250; <code>0</code> is eager). Pass <code>storage</code> &mdash; any object with async <code>get(key)</code>/<code>set(key, value)</code> &mdash; to use another backend (a server, a test double). Opt-in and off by default.</td></tr>
           <tr><td class="sig">restore()</td><td class="desc"><strong>v12:</strong> resume from the durable snapshot. Read the last persisted state and apply it &mdash; <code>load</code> the live head through the ordinary keyed diff (so grids attached before this call repaint only what differs), restore the resume checkpoint and, when the snapshot carried a time-travel ring, restore buffering and the ring so <code>scrubTo</code>/<code>replay</code>/<code>live</code> work straight after a reload. Call it once, after attaching the grids. <code>async</code>; resolves <code>true</code> when a snapshot was found and applied, <code>false</code> when persistence is off/degraded or nothing was stored.</td></tr>
           <tr><td class="sig">flushPersist() / persisting</td><td class="desc"><strong>v12:</strong> flush any pending durable write now (<code>async</code>; cancels the debounce and resolves once the write settles &mdash; for a <code>beforeunload</code> handler, a deterministic checkpoint, or a test), and whether durable persistence is on and not degraded to in-memory.</td></tr>
@@ -5673,13 +5825,14 @@ router.load(snapshot);                        <span class="cmt">// every viewer
         </tbody>
       </table>
     </div>
+    <p class="section-note"><strong>Four things worth knowing before you build on this.</strong> <code>attachDefault</code> keeps <em>one</em> sink: calling it twice replaces the first, silently, along with whatever slice it held &mdash; attach the sink once, at setup. An <code>alert</code> has no removal: <code>detach</code> drops routes, links and graph edges but leaves alerts running against their own partition, so an alert added at setup keeps firing until <code>destroy()</code>, even after every grid is gone. <code>detach</code> does take a <code>subscribe</code> handler as well as a grid &mdash; pass the same function you handed <code>subscribe</code> and the subscription goes with it. And a <code>join</code> accepts three spellings the examples below do not use: <code>on</code> for <code>localKey</code>, <code>fromKey</code> for <code>foreignKey</code>, and <code>select</code> for <code>fields</code>; they are equivalent, and a spec the router cannot honour degrades to plain fan-in with a one-time warning rather than throwing.</p>
     <p>The router keeps a small <code>Map&lt;rowKey, row&gt;</code> per route to compute the snapshot diff. That is deliberate for v1; a future optimisation could diff against the grid's own key index rather than a shadow copy. Ordering and dedupe across a live feed are the host's to guarantee &mdash; a caller that must drop stale out-of-order deltas can carry its own version or sequence field and filter before <code>apply</code>; v1 imposes no version scheme.</p>
     <p><strong>Cross-grid selection filtering (v2, BACKLOG-0000880).</strong> <code>link</code> keeps each target's <em>full partition</em> separate from what it currently shows: when the source's selection changes, the router recomputes the shown subset from the relation and re-pushes it through the same keyed-diff path, so the target grid stays dumb &mdash; it only ever receives rows, never a query or a reference to the source. Selection <em>in</em> the target survives an unrelated refilter, because the keyed path preserves it. No selection (or one the router cannot resolve to routed rows) shows the full partition, and deselecting restores it. The source grid must have selection enabled; still no grid-core change. Debounce is controlled by <code>selectionDebounce</code> (default 16&nbsp;ms; <code>0</code> is synchronous), and <code>flush()</code> forces it.</p>
     <h3 id="datarouter-v2-example">Cross-grid selection filtering, executed</h3>
     <p class="section-note">A customers grid and an orders grid off one feed; selecting customers filters the orders
     grid to their regions through the keyed-diff path, and deselecting restores the full set. Run headless
     on every build.</p>
-    <pre data-run="js" data-expect="3 | 2 | 3 | 3" data-covers="export:createDataRouter"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+    <pre data-run="js" data-expect="3 | 2 | 3 | 3" data-covers="export:createDataRouter config:key config:selectionDebounce"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
 <span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
 
 <span class="kw">const</span> cols = [{ id: 'id', field: 'id' }, { id: 'type', field: 'type' }, { id: 'region', field: 'region', type: 'text' }];
@@ -5744,7 +5897,7 @@ g.destroy(); router.destroy();
 <span class="kw">return</span> out.join(' | ');</code></pre>
 
     <p><strong>Aggregate/rollup routes (v3, BACKLOG-0000887).</strong> A route can be fed a <em>grouped, summarised</em> view of its partition instead of the raw rows &mdash; a per-category total for a chart route, say. <code>attach(grid, predicate, { rollup: { groupBy, aggregate } })</code> gives the grid one summary row per group: <code>groupBy</code> is a property, a <code>fn(row)</code> or an array of either, and each <code>aggregate</code> entry is a <code>{ op, field }</code> (<code>sum</code>, <code>avg</code>, <code>min</code>, <code>max</code>, <code>count</code>) or a <code>fn(rows) =&gt; value</code>. A route <code>filter</code> runs on the raw rows before grouping; <code>sort</code> and <code>transform</code> run on the summaries. The summary is applied by the same keyed diff, so only a group that actually moved repaints &mdash; the router owns the roll-up, the grid stays dumb.</p>
-    <pre data-run="js" data-expect="2 | amer | 115" data-covers="export:createDataRouter"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+    <pre data-run="js" data-expect="2 | amer | 115" data-covers="export:createDataRouter config:rollup"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
 <span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
 
 <span class="kw">const</span> cols = [{ id: 'region', field: 'region' }, { id: 'total', field: 'total', type: 'number' }];
@@ -5772,7 +5925,7 @@ chart.destroy(); router.destroy();
 <span class="kw">return</span> [groups, top, emeaTotal].join(' | ');</code></pre>
 
     <p><strong>The relationship graph (v3, BACKLOG-0000887).</strong> <code>relate([...])</code> is the scalable form of v2's pairwise <code>link()</code>. Each edge is <code>{ from, to, on }</code>, where <code>on</code> is a key map <code>{ from, to }</code> or a function <code>fn(sourceRows) =&gt; (row) =&gt; boolean</code>. The router resolves the whole graph on any selection change, so it handles <strong>multi-hop</strong> chains (A&rarr;B&rarr;C: a selection in A narrows B and, through B's resulting rows, C &mdash; with no selection in B), <strong>several sources into one target</strong> (their filters AND together), and <strong>mutual</strong> edges (<code>mutual: true</code> &mdash; selecting in either linked view narrows the other; requires a key-map <code>on</code>). A node's effective set is its own selection when it has one, otherwise the rows its incoming edges leave &mdash; that is what carries a selection transitively down a chain. Additive to <code>link()</code>; the two compose.</p>
-    <pre data-run="js" data-expect="o1,o3 | l1,l3,l4" data-covers="export:createDataRouter"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+    <pre data-run="js" data-expect="o1,o3 | l1,l3,l4" data-covers="export:createDataRouter config:relate"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
 <span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
 
 <span class="kw">const</span> cols = [{ id: 'id', field: 'id' }, { id: 'type', field: 'type' }, { id: 'region', field: 'region', type: 'text' }, { id: 'orderId', field: 'orderId', type: 'text' }];
@@ -5797,11 +5950,11 @@ customers.destroy(); orders.destroy(); lines.destroy(); router.destroy();
 <span class="kw">return</span> out.join(' | ');</code></pre>
 
     <p><strong>Stream hygiene (v3, BACKLOG-0000887).</strong> A production feed arrives out of order, gets replayed, and comes faster than a grid should repaint. Configure a <code>seq</code> (a version field or <code>fn(row)</code>) and the router orders each batch by it and <strong>drops</strong> any delta not newer than the one it already applied for that record (counted in <code>router.dropped</code>) &mdash; an out-of-order or replayed feed converges to the newest state. <code>push(delta)</code> with a <code>batch</code> interval or <code>coalesce: true</code> buffers a high-frequency feed and coalesces rapid updates to one key into a single apply (flush a deterministic point with <code>flushStream()</code>). When the host's own connection drops and it reconnects, resume precisely: <code>load</code> a fresh snapshot (a keyed diff that preserves grid state) and replay from <code>lastSeq()</code>/<code>checkpoint()</code> &mdash; the deltas the router already saw are dropped by the same gate. The router does not detect or recover from the drop itself; see <a href="#datarouter-websocket-example">a live WebSocket feed</a> for the worked reconnect example. <code>seenThrough(mark)</code> primes the checkpoint from a persisted one.</p>
-    <pre data-run="js" data-expect="30 | 1 | 4" data-covers="export:createDataRouter"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+    <pre data-run="js" data-expect="30 | 1 | 4" data-covers="export:createDataRouter config:seq config:dedupe"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
 <span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
 
 <span class="kw">const</span> g = createHeadlessGrid({ rowKey: 'id', columns: [{ id: 'id', field: 'id' }, { id: 'n', field: 'n', type: 'number' }] });
-<span class="kw">const</span> router = createDataRouter({ rowKey: 'id', seq: 'v' });
+<span class="kw">const</span> router = createDataRouter({ rowKey: 'id', seq: 'v', dedupe: true });
 router.attach(g, () =&gt; true);
 router.load([]);
 
@@ -5823,12 +5976,12 @@ g.destroy(); router.destroy();
     dropped by the <code>seq</code> checkpoint while a genuinely new one lands. Swapping in a real
     <code>WebSocket</code> is a one-line constructor change — see <a href="#mocksocket">the mock socket</a>.
     Run headless on every build.</p>
-    <pre data-run="js" data-expect="A@3 | 3 | A@4 | 2" data-covers="export:createDataRouter export:MockWebSocket"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+    <pre data-run="js" data-expect="A@3 | 3 | A@4 | 2" data-covers="export:createDataRouter config:seq config:dedupe export:MockWebSocket"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
 <span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
 <span class="kw">const</span> { MockWebSocket } = <span class="kw">await</span> import('../packages/modules/mock-socket/index.js');
 
 <span class="kw">const</span> g = createHeadlessGrid({ rowKey: 'id', columns: [{ id: 'id', field: 'id' }, { id: 'label', field: 'label' }] });
-<span class="kw">const</span> router = createDataRouter({ rowKey: 'id', seq: 'v' });
+<span class="kw">const</span> router = createDataRouter({ rowKey: 'id', seq: 'v', dedupe: true });
 router.attach(g, () =&gt; <span class="kw">true</span>);
 
 <span class="cmt">// THE INTEGRATION: a snapshot message loads, a delta message applies. This is</span>
@@ -5850,7 +6003,7 @@ router.attach(g, () =&gt; <span class="kw">true</span>);
 }
 <span class="kw">const</span> socketA = <span class="kw">new</span> MockWebSocket({ feed: feedA(), rate: 5, jitter: 0, snapshotDelay: 5 });
 wireRouter(router, socketA);
-<span class="kw">await</span> wait(30);
+<span class="kw">await</span> wait(80);
 <span class="kw">const</span> beforeDrop = g.rows.value('a', 'label');  <span class="cmt">// A@3</span>
 <span class="kw">const</span> resumeFrom = router.lastSeq();             <span class="cmt">// 3 — the resume cursor</span>
 socketA.close();
@@ -5866,7 +6019,7 @@ socketA.close();
 <span class="kw">const</span> droppedBefore = router.dropped;
 <span class="kw">const</span> socketB = <span class="kw">new</span> MockWebSocket({ feed: feedB(), rate: 5, jitter: 0, snapshotDelay: 5 });
 wireRouter(router, socketB);
-<span class="kw">await</span> wait(30);
+<span class="kw">await</span> wait(80);
 <span class="kw">const</span> afterReconnect = g.rows.value('a', 'label');        <span class="cmt">// A@4 — only the new delta advanced it</span>
 <span class="kw">const</span> replaysDropped = router.dropped - droppedBefore;    <span class="cmt">// 2 — both replays dropped</span>
 socketB.close();
@@ -5913,7 +6066,7 @@ orders.destroy(); invoices.destroy(); rest.destroy(); router.destroy();
     <h3 id="datarouter-v4-example">Scrub and return to live, executed</h3>
     <p class="section-note">A versioned feed buffered into a bounded ring; the view scrubs to a past seq, reads the
     reconstructed value, then returns to the live head. Run headless on every build.</p>
-    <pre data-run="js" data-expect="30 | 10 | true | 30" data-covers="export:createDataRouter"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+    <pre data-run="js" data-expect="30 | 10 | true | 30" data-covers="export:createDataRouter config:buffer config:seq"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
 <span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
 
 <span class="kw">const</span> g = createHeadlessGrid({ rowKey: 'id', columns: [{ id: 'id', field: 'id' }, { id: 'n', field: 'n', type: 'number' }] });
@@ -5974,7 +6127,7 @@ big.destroy(); small.destroy(); router.destroy();
     <h3 id="datarouter-v9-example">Fan-in from two feeds, executed</h3>
     <p class="section-note">Two feeds with a colliding raw id, namespaced per source so they merge without clobbering;
     removing one feed drops exactly its rows. Run headless on every build.</p>
-    <pre data-run="js" data-expect="3 | crm,erp | 2" data-covers="export:createDataRouter"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+    <pre data-run="js" data-expect="3 | crm,erp | 2 | 2" data-covers="export:createDataRouter config:id config:key config:load config:size config:remove"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
 <span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
 
 <span class="kw">const</span> cols = [{ id: 'id', field: 'id' }, { id: 'type', field: 'type' }, { id: 'n', field: 'n', type: 'number' }];
@@ -5989,12 +6142,13 @@ crm.load([{ id: '1', type: 'order', n: 10 }, { id: '2', type: 'order', n: 20 }])
 erp.load([{ id: '1', type: 'order', n: 99 }]);  <span class="cmt">// same raw id '1' — merged, not clobbered</span>
 <span class="kw">const</span> merged = g.rows.count();               <span class="cmt">// 3</span>
 <span class="kw">const</span> ids = router.sources().join(',');       <span class="cmt">// crm,erp</span>
+<span class="kw">const</span> held = crm.size;                        <span class="cmt">// 2 — what this one feed holds live</span>
 
-router.removeSource('erp');                    <span class="cmt">// drops exactly erp's row</span>
+erp.remove();                                  <span class="cmt">// drops exactly erp's row; the handle knows its own feed</span>
 <span class="kw">const</span> afterRemove = g.rows.count();          <span class="cmt">// 2</span>
 
 g.destroy(); router.destroy();
-<span class="kw">return</span> [merged, ids, afterRemove].join(' | ');</code></pre>
+<span class="kw">return</span> [merged, ids, held, afterRemove].join(' | ');</code></pre>
 
     <p><strong>Fan-in JOIN / enrichment (v11, BACKLOG-0000957).</strong> Fan-in above <em>merges</em> feeds side by side; a <code>join</code> spec goes further and <em>enriches</em> one feed's rows with fields looked up from <em>another</em> registered source &mdash; e.g. an <code>orders</code> feed enriched with <code>name</code>/<code>tier</code> from a <code>customers</code> source keyed by <code>customerId</code>. Declared per source: <code>addSource('orders', { join: { from: 'customers', localKey: 'customerId', fields: ['name', 'tier'], missing: 'hold' } })</code>. <code>localKey</code> is the field on the enriched (left) row holding the foreign key (a field name or <code>fn(row)</code>); <code>foreignKey</code> is the field matched on the lookup row (defaults to <code>localKey</code>'s name); <code>fields</code> is what to pull &mdash; an array, a <code>{ src: dest }</code> rename map, or <code>select(lookupRow, leftRow) =&gt; object</code>. No second store is built: the lookup source <em>is</em> an ordinary fan-in source, and the join probes its existing keyed store by an index of join-key&nbsp;&rarr;&nbsp;store-id. <code>missing</code> chooses what happens when the lookup is absent or late: <code>hold</code> withholds the row from viewers until its lookup arrives, <code>passthrough</code> (the default) lets it flow unenriched, and <code>null</code> flows it with the pulled fields set to <code>null</code>. Enriched rows reach viewers through the ordinary keyed-diff path. <strong>Late lookups re-enrich:</strong> when a lookup row arrives, changes, or is deleted, every already-seated left row that references it is re-enriched and re-emitted &mdash; a held row is released, a <code>null</code>/<code>passthrough</code> row gains its fields, and a row whose lookup vanished is nulled/stripped (or, under <code>hold</code>, withheld again). Enrichment always recomputes from the untouched base row, so it is idempotent.</p>
     <p><strong>Durable resume and backpressure (v12/v13, BACKLOG-0000961 / BACKLOG-0000962).</strong> <code>persist({ key })</code> turns on durability: the router snapshots its keyed store and time-travel ring to a durable async store (IndexedDB by default, or any <code>{ get, set }</code> you pass as <code>storage</code>) after each <code>load</code>/<code>apply</code>, and <code>await router.restore()</code> &mdash; called once after the grids are attached &mdash; rehydrates them through the ordinary keyed diff, so an offline reload or a browser refresh resumes exactly where it left off (blocked/private storage degrades to in-memory with a one-time warning, never a throw). Independently, a route can declare <strong>backpressure</strong> &mdash; <code>attach(grid, type, { label, backpressure: { maxHz } })</code> &mdash; to cap how often its viewer repaints under load without slowing the store or any sibling route: <code>maxHz</code>/<code>minInterval</code> rate-limit the refresh, <code>sample</code> thins intermediate ones, and <code>maxLag</code> sets the backlog depth at which throttling engages; a trailing flush always lands the latest state so the viewer converges. What it cost is observable: <code>router.metrics().routes[].backpressure</code> is <code>{ pending, coalesced }</code> &mdash; the held backlog and the cumulative change-events folded into deferred refreshes (<code>null</code> for a route with no policy).</p>
@@ -6028,15 +6182,15 @@ g.destroy(); router.destroy();
     <h3 id="datarouter-v10-example">A metrics snapshot, executed</h3>
     <p class="section-note">A snapshot fanned to a route and a sink; the metrics read reports the route's row count and the
     unrouted total, and <code>on('metrics')</code> returns an unsubscribe. Run headless on every build.</p>
-    <pre data-run="js" data-expect="2 | 1 | function" data-covers="export:createDataRouter"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+    <pre data-run="js" data-expect="2 | 1 | function" data-covers="export:createDataRouter config:metricsInterval"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
 <span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
 
 <span class="kw">const</span> cols = [{ id: 'id', field: 'id' }, { id: 'type', field: 'type' }];
 <span class="kw">const</span> g = createHeadlessGrid({ rowKey: 'id', columns: cols });
-<span class="kw">const</span> router = createDataRouter({ key: 'type', rowKey: 'id' });
+<span class="kw">const</span> router = createDataRouter({ key: 'type', rowKey: 'id', metricsInterval: 0 });  <span class="cmt">// 0: no periodic emit; read on demand</span>
 router.attach(g, 'order');
 
-<span class="kw">const</span> off = router.on('metrics', () =&gt; {});   <span class="cmt">// register; starts the timer, returns unsubscribe</span>
+<span class="kw">const</span> off = router.on('metrics', () =&gt; {});   <span class="cmt">// register; returns unsubscribe (no timer at interval 0)</span>
 router.load([
   { id: 'o1', type: 'order' },
   { id: 'o2', type: 'order' },
@@ -6045,11 +6199,192 @@ router.load([
 <span class="kw">const</span> m = router.metrics();
 <span class="kw">const</span> rows = m.routes[0].rows;               <span class="cmt">// 2</span>
 <span class="kw">const</span> unrouted = m.unrouted;                 <span class="cmt">// 1</span>
-off();                                        <span class="cmt">// stops the timer (last listener gone)</span>
+off();                                        <span class="cmt">// last listener gone</span>
 
 g.destroy(); router.destroy();
 <span class="kw">return</span> [rows, unrouted, typeof off].join(' | ');</code></pre>
 
+
+    <h3 id="datarouter-options-examples">The remaining options, each executed</h3>
+    <p class="section-note">One short example per option family the eight above do not reach: overlap and the unrouted sink, coalesced pushes, write-back, the declarative graph, durable resume, backpressure, and time-domain scrubbing. Each is run headless on every build.</p>
+    <h3 id="datarouter-overlap-example">Fan one value to two viewers, and log the strays, executed</h3>
+    <p class="section-note">With <code>overlap</code> a record goes to <em>every</em> route it matches, so a grid and a second viewer can share one partition; <code>onUnrouted</code> receives what matched none, which is the right sink when a stray record is a bug to log rather than a row to show. Run headless on every build.</p>
+    <pre data-run="js" data-expect="1 | 1 | x1 | 1" data-covers="export:createDataRouter config:overlap config:onUnrouted"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+<span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
+
+<span class="kw">const</span> cols = [{ id: 'id', field: 'id' }, { id: 'type', field: 'type' }];
+<span class="kw">const</span> g1 = createHeadlessGrid({ rowKey: 'id', columns: cols });
+<span class="kw">const</span> g2 = createHeadlessGrid({ rowKey: 'id', columns: cols });
+<span class="kw">const</span> strays = [];
+<span class="kw">const</span> router = createDataRouter({ key: 'type', rowKey: 'id', overlap: true, onUnrouted: (row) =&gt; strays.push(row.id) });
+router.attach(g1, 'order');
+router.attach(g2, 'order');            // a second viewer on the same value: allowed because overlap is on
+router.load([{ id: 'o1', type: 'order' }, { id: 'x1', type: 'ticket' }]);
+<span class="kw">const</span> out = [g1.rows.count(), g2.rows.count(), strays.join(','), router.unrouted];
+g1.destroy(); g2.destroy(); router.destroy();
+<span class="kw">return</span> out.join(' | ');</code></pre>
+    <h3 id="datarouter-coalesce-example">Coalesce a burst into one repaint, executed</h3>
+    <p class="section-note">A high-frequency feed goes through <code>push</code>; with <code>coalesce</code> (or a <code>batch</code> interval) rapid updates to one key fold into a single <code>apply</code>, and <code>flushStream</code> gives a deterministic point. Run headless on every build.</p>
+    <pre data-run="js" data-expect="0 | 1 | 3" data-covers="export:createDataRouter config:push config:coalesce config:batch"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+<span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
+
+<span class="cmt">// A hand-rolled viewer, grid-shaped: the router accepts anything with rows.apply.</span>
+<span class="kw">const</span> rows = <span class="kw">new</span> Map(); <span class="kw">let</span> applies = 0;
+<span class="kw">const</span> g = { rows: { apply(change) {
+  applies += 1;
+  <span class="kw">for</span> (<span class="kw">const</span> row <span class="kw">of</span> [...(change.add || []), ...(change.update || [])]) rows.set(row.id, row);
+} } };
+<span class="kw">const</span> router = createDataRouter({ rowKey: 'id', coalesce: true, batch: { intervalMs: 50 } });
+router.attach(g, () =&gt; true);
+router.push({ op: 'upsert', row: { id: 'a', n: 1 } });
+router.push({ op: 'upsert', row: { id: 'a', n: 2 } });
+router.push({ op: 'upsert', row: { id: 'a', n: 3 } });
+<span class="kw">const</span> before = applies;                    // 0: nothing applied inside the batch window
+router.flushStream();                      // one apply, carrying the latest value
+<span class="kw">const</span> after = applies;
+<span class="kw">const</span> n = rows.get('a').n;
+router.destroy();
+<span class="kw">return</span> [before, after, n].join(' | ');</code></pre>
+    <h3 id="datarouter-writeback-example">A writable route, a conflict, executed</h3>
+    <p class="section-note">A route attached <code>writable</code> captures the grid&rsquo;s committed edits and routes them to <code>onWrite</code>; when the server answers with a conflict, <code>onConflict</code> fires with the server row and the optimistic value stands (last-write-wins, no merge engine). Run headless on every build.</p>
+    <pre data-run="js" data-expect="1 | 7 | 99" data-covers="export:createDataRouter config:writable config:onWrite config:onConflict"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+<span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
+
+<span class="kw">const</span> cols = [{ id: 'id', field: 'id' }, { id: 'type', field: 'type' }, { id: 'amt', field: 'amt', type: 'number', edit: true }];
+<span class="kw">const</span> g = createHeadlessGrid({ rowKey: 'id', columns: cols });
+<span class="kw">const</span> conflicts = [];
+<span class="kw">const</span> router = createDataRouter({ key: 'type', rowKey: 'id', onConflict: (change, ctx) =&gt; conflicts.push(ctx.serverRow.amt) });
+router.attach(g, 'a', { writable: true, onWrite: () =&gt; ({ conflict: { id: 'r1', type: 'a', amt: 7 } }) });
+router.load([{ id: 'r1', type: 'a', amt: 10 }]);
+g.edit.setCells([{ key: 'r1', colId: 'amt', value: 99 }]);   // the user's edit, routed to onWrite
+<span class="kw">const</span> out = [conflicts.length, conflicts[0], g.rows.byKey('r1').data.amt];
+g.destroy(); router.destroy();
+<span class="kw">return</span> out.join(' | ');</code></pre>
+    <h3 id="datarouter-configure-example">The routing graph as one declarative spec, executed</h3>
+    <p class="section-note">The same routes and links the imperative calls would make, as data: <code>routes</code> attach a grid <code>when</code> a value matches, <code>links</code> filter one grid by another&rsquo;s selection. Run headless on every build.</p>
+    <pre data-run="js" data-expect="2 | 1" data-covers="export:createDataRouter config:routes config:links"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+<span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
+
+<span class="kw">const</span> cols = [{ id: 'id', field: 'id' }, { id: 'type', field: 'type' }, { id: 'region', field: 'region' }];
+<span class="kw">const</span> customers = createHeadlessGrid({ rowKey: 'id', columns: cols, selection: 'multiple' });
+<span class="kw">const</span> orders = createHeadlessGrid({ rowKey: 'id', columns: cols });
+<span class="kw">const</span> router = createDataRouter({ key: 'type', rowKey: 'id', selectionDebounce: 0 });
+router.configure({
+  routes: [{ grid: customers, when: 'customer' }, { grid: orders, when: 'order' }],
+  links: [{ from: customers, to: orders, on: { from: 'region', to: 'region' } }],
+});
+router.load([
+  { id: 'c1', type: 'customer', region: 'emea' },
+  { id: 'o1', type: 'order', region: 'emea' },
+  { id: 'o2', type: 'order', region: 'amer' },
+]);
+<span class="kw">const</span> all = orders.rows.count();           // 2: no selection shows the whole partition
+customers.selection.set(['c1']);
+router.flush();
+<span class="kw">const</span> linked = orders.rows.count();        // 1: only emea orders
+customers.destroy(); orders.destroy(); router.destroy();
+<span class="kw">return</span> [all, linked].join(' | ');</code></pre>
+    <h3 id="datarouter-persist-example">Durable resume through a store of your own, executed</h3>
+    <p class="section-note">The router snapshots to IndexedDB by default &mdash; <code>dbName</code> and <code>storeName</code> say where, and <code>indexedDB</code> lets you hand it a factory (here a tiny fake, so the example is deterministic) &mdash; or to any <code>storage</code> with async <code>get</code>/<code>set</code>. A second router over the same store <code>restore</code>s what the first one wrote. Run headless on every build.</p>
+    <pre data-run="js" data-expect="demo | router | true | 2 | true | 1" data-covers="export:createDataRouter config:storage config:indexedDB config:dbName config:storeName"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+<span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
+
+<span class="cmt">// A fake IDBFactory: one database, one object store, put/get in a transaction.</span>
+<span class="kw">const</span> dbs = <span class="kw">new</span> Map(); <span class="kw">const</span> opened = [];
+<span class="kw">const</span> req = () =&gt; ({ onsuccess: null, onerror: null, onupgradeneeded: null, result: undefined, error: null });
+<span class="kw">const</span> fakeIndexedDB = { open(name) {
+  <span class="kw">const</span> r = req(); opened.push(name);
+  queueMicrotask(() =&gt; {
+    <span class="kw">const</span> fresh = !dbs.has(name); <span class="kw">if</span> (fresh) dbs.set(name, <span class="kw">new</span> Map());
+    <span class="kw">const</span> stores = dbs.get(name);
+    r.result = {
+      objectStoreNames: { contains: (n) =&gt; stores.has(n) },
+      ['createObjectStore'](n) { stores.set(n, <span class="kw">new</span> Map()); <span class="kw">return</span> {}; },
+      transaction(n) {
+        <span class="kw">const</span> store = stores.get(Array.isArray(n) ? n[0] : n); <span class="kw">const</span> tx = { oncomplete: null, onerror: null, onabort: null }; <span class="kw">const</span> ops = [];
+        tx.objectStore = () =&gt; ({
+          put(v, k) { <span class="kw">const</span> q = req(); ops.push(() =&gt; { store.set(k, v); <span class="kw">if</span> (q.onsuccess) q.onsuccess({ target: q }); }); <span class="kw">return</span> q; },
+          get(k) { <span class="kw">const</span> q = req(); ops.push(() =&gt; { q.result = store.get(k); <span class="kw">if</span> (q.onsuccess) q.onsuccess({ target: q }); }); <span class="kw">return</span> q; },
+        });
+        queueMicrotask(() =&gt; { <span class="kw">for</span> (<span class="kw">const</span> op <span class="kw">of</span> ops) op(); <span class="kw">if</span> (tx.oncomplete) tx.oncomplete(); });
+        <span class="kw">return</span> tx;
+      },
+      close() {},
+    };
+    <span class="kw">if</span> (fresh &amp;&amp; r.onupgradeneeded) r.onupgradeneeded({ target: r });
+    <span class="kw">if</span> (r.onsuccess) r.onsuccess({ target: r });
+  });
+  <span class="kw">return</span> r;
+} };
+
+<span class="kw">const</span> cols = [{ id: 'id', field: 'id' }, { id: 'type', field: 'type' }];
+<span class="kw">const</span> a = createDataRouter({ key: 'type', rowKey: 'id' });
+<span class="kw">const</span> ga = createHeadlessGrid({ rowKey: 'id', columns: cols });
+a.attach(ga, 'order');
+a.persist({ indexedDB: fakeIndexedDB, dbName: 'demo', storeName: 'router', debounce: 0 });
+a.load([{ id: 'o1', type: 'order' }, { id: 'o2', type: 'order' }]);
+<span class="kw">await</span> a.flushPersist();
+
+<span class="kw">const</span> b = createDataRouter({ key: 'type', rowKey: 'id' });      // "after the reload"
+<span class="kw">const</span> gb = createHeadlessGrid({ rowKey: 'id', columns: cols });
+b.attach(gb, 'order');
+b.persist({ indexedDB: fakeIndexedDB, dbName: 'demo', storeName: 'router' });
+<span class="kw">const</span> found = <span class="kw">await</span> b.restore();
+<span class="kw">const</span> store = [...dbs.get('demo').keys()][0];
+
+<span class="cmt">// Or skip IndexedDB entirely: any async get/set pair is a store.</span>
+<span class="kw">const</span> mem = <span class="kw">new</span> Map();
+<span class="kw">const</span> c = createDataRouter({ key: 'type', rowKey: 'id' });
+c.attach(createHeadlessGrid({ rowKey: 'id', columns: cols }), 'order');
+c.persist({ storage: { get: <span class="kw">async</span> (k) =&gt; mem.get(k), set: <span class="kw">async</span> (k, v) =&gt; { mem.set(k, v); } }, debounce: 0 });
+c.load([{ id: 'o9', type: 'order' }]);
+<span class="kw">await</span> c.flushPersist();
+<span class="kw">const</span> out = [opened[0], store, found, gb.rows.count(), b.persisting, mem.size];
+ga.destroy(); gb.destroy(); a.destroy(); b.destroy(); c.destroy();
+<span class="kw">return</span> out.join(' | ');</code></pre>
+    <h3 id="datarouter-backpressure-example">Throttle one viewer under load, executed</h3>
+    <p class="section-note">A <code>backpressure</code> policy on one route caps how often <em>that</em> viewer is refreshed without slowing the store or any sibling; a burst inside the window is held to one leading refresh, and <code>flushBackpressure</code> lands the coalesced latest state. Run headless on every build.</p>
+    <pre data-run="js" data-expect="1 | 2 | 9 | 3" data-covers="export:createDataRouter config:backpressure"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+<span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
+
+<span class="kw">let</span> clock = 0;
+<span class="kw">const</span> router = createDataRouter({ key: 'type', rowKey: 'id', now: () =&gt; clock });
+<span class="kw">const</span> view = { refreshes: 0, rows: <span class="kw">new</span> Map() };
+router.subscribe('x', (change) =&gt; {
+  view.refreshes += 1;
+  <span class="kw">for</span> (<span class="kw">const</span> row <span class="kw">of</span> [...change.add, ...change.update]) view.rows.set(row.id, row);
+  <span class="kw">for</span> (<span class="kw">const</span> key <span class="kw">of</span> change.remove) view.rows.delete(key);
+}, { backpressure: { maxHz: 100 } });      // at most one refresh per 10 ms
+<span class="kw">const</span> up = (id, n) =&gt; ({ op: 'upsert', row: { id, type: 'x', n } });
+router.apply([up('a', 1)]);                // leading edge: refreshes at once
+router.apply([up('b', 2)]);                // inside the window: held
+router.apply([up('c', 3)]);
+router.apply([up('a', 9)]);                // still held; a's latest value wins
+<span class="kw">const</span> held = view.refreshes;               // 1
+clock = 10;
+router.flushBackpressure();                // window open: one trailing refresh
+<span class="kw">const</span> out = [held, view.refreshes, view.rows.get('a').n, view.rows.size];
+router.destroy();
+<span class="kw">return</span> out.join(' | ');</code></pre>
+    <h3 id="datarouter-time-example">Scrub by wall-clock time, executed</h3>
+    <p class="section-note">When rows carry a timestamp, <code>time</code> names it and the buffer works in the time domain: <code>scrubTo</code> takes a moment rather than a seq, and <code>live</code> returns to the head. Run headless on every build.</p>
+    <pre data-run="js" data-expect="1 | 3" data-covers="export:createDataRouter config:time config:buffer"><code><span class="kw">const</span> { createHeadlessGrid } = <span class="kw">await</span> import('../packages/core/src/index.js');
+<span class="kw">const</span> { createDataRouter } = <span class="kw">await</span> import('../packages/modules/data-router/index.js');
+
+<span class="kw">const</span> cols = [{ id: 'id', field: 'id' }, { id: 'ts', field: 'ts', type: 'number' }];
+<span class="kw">const</span> g = createHeadlessGrid({ rowKey: 'id', columns: cols });
+<span class="kw">const</span> router = createDataRouter({ rowKey: 'id', time: 'ts' });
+router.attach(g, () =&gt; true);
+router.buffer({ window: 10000 });
+router.apply([{ op: 'upsert', row: { id: 'a', ts: 100 } }]);
+router.apply([{ op: 'upsert', row: { id: 'b', ts: 200 } }]);
+router.apply([{ op: 'upsert', row: { id: 'c', ts: 300 } }]);
+router.scrubTo(150, { by: 'time' });       // what the grid showed at t=150
+<span class="kw">const</span> then = g.rows.count();               // 1
+router.live();
+<span class="kw">const</span> now = g.rows.count();                // 3
+g.destroy(); router.destroy();
+<span class="kw">return</span> [then, now].join(' | ');</code></pre>
     <h2 id="ganttmodule">The Gantt module</h2>
     <p><code>modules/gantt</code> is a separate, opt-in project-planning module &mdash; its own bundle, imported only when you want it, changing nothing in the grid core. It turns a task list into a real schedule: a <strong>CPM (Critical Path Method) engine</strong> computes each task's early/late start and finish, its slack (total float), and the zero-float <strong>critical path</strong>, recomputing on every edit. <code>computeSchedule(tasks, deps)</code> is the pure engine; <code>createGantt(opts)</code> is a controller that holds the model, recomputes on <code>setTasks</code>/<code>setDependencies</code>/<code>applyEdit</code>, and emits <code>schedule</code> (or <code>error</code>). Dependencies are the four standard link types &mdash; <code>LINK_TYPES</code> is <code>['FS','SS','FF','SF']</code> &mdash; each with optional lag/lead. A <strong>milestone</strong> is a zero-duration task scheduled as a point; a <strong>summary</strong> task (any task named as another's <code>parent</code>) is derived from its children (start = earliest child, end = latest child, duration-weighted progress) and is not scheduled itself. Bad input never throws or loops: a dependency cycle is refused and reported with a code from <code>SCHEDULE_ERROR</code>, and <code>findViolations</code> flags any task placed earlier than its predecessors allow. <code>toISODate</code> converts an engine day-number back to a calendar date for display.</p>
     <p><strong>Feed it the rows you already have.</strong> <code>fields</code> names your own task properties for the scheduler &mdash; <code>{ id: 'taskId', start: 'startDate', name: 'jobName', duration: 'dur' }</code>, each a field name or a reader <code>(row) =&gt; value</code> &mdash; so a task list arrives as it is rather than being renamed first. The vocabulary is <code>id</code>, <code>name</code>, <code>start</code>, <code>end</code>, <code>duration</code>, <code>milestone</code>, <code>percentComplete</code>, <code>parent</code>, <code>baselineStart</code>, <code>baselineEnd</code>, <code>constraint</code> and <code>constraintDate</code>; anything you leave unmapped reads its canonical name, so an existing plan is unaffected. <code>rowKey</code> reaches the scheduler too, so a row carrying <code>taskId</code> and no <code>id</code> is identified by it &mdash; a task's own <code>id</code> still wins where it has one. It is a <strong>read</strong> mapping: <code>applyEdit</code> and <code>level()</code> write the canonical property, so each says so plainly rather than writing to a field the schedule is not read from, and <code>assignee</code>/<code>cost</code>/<code>actualCost</code> belong to the resource and earned-value layers rather than to this list.</p>
@@ -6496,6 +6831,52 @@ const kpi = createKPI(document.querySelector('#kpis'), {
       </table>
     </div>
     <p><strong>Interaction is light and host-driven.</strong> A tile emits <code>tile:click</code> (also from the keyboard) carrying the tile model, so a host can drill down or, in a demo, filter a routed grid &mdash; the wiring lives in the host, not the module. This is deliberately not a dashboard layout engine (that is the parked dashboard generator) and charting beyond a minimal sparkline belongs to the charts module.</p>
+    <h3 id="kpi-clock">The clock tile: the device clock, not an aggregate</h3>
+    <p><code>{ kind: 'clock', label, timeZone?, locale?, seconds?, date? }</code> in <code>tiles</code> renders a tile that shows the current date and time instead of a figure &mdash; the date on one line, the time on the next, e.g. <code>Mon, 21 Apr 2025</code> over <code>14:32:18</code> &mdash; styled like any other tile, so a panel of zone clocks beside a panel of figures reads as one visual system with no host CSS.</p>
+    <pre><code>const kpi = createKPI(document.querySelector('#kpis'), {
+  tiles: [
+    { kind: 'clock', label: 'London',   timeZone: 'Europe/London' },
+    { kind: 'clock', label: 'New York', timeZone: 'America/New_York', locale: 'en-US' },
+    { id: 'open', label: 'Open deals', aggregation: 'count', filter: (r) =&gt; r.stage !== 'won' },
+  ],
+});</code></pre>
+    <p><strong>Where the time comes from.</strong> The device clock, read every second in exact alignment with the second boundary &mdash; not a fixed <code>setInterval(1000)</code>, which drifts &mdash; so every clock tile on a panel ticks in the same repaint. One timer serves the <em>whole panel</em>, not one per tile: a panel of three zone clocks runs one shared interval, not three. The timer stops when the panel is <code>destroy()</code>ed or the document goes into the background (<code>document.hidden</code>) and resumes correctly &mdash; catching up immediately, then re-aligning &mdash; when the tab returns. A panel with no clock tile starts no timer at all.</p>
+    <p><strong>Zone and format.</strong> <code>timeZone</code> is any IANA zone name; omitted, the tile shows the viewer's local time. A name <code>Intl.DateTimeFormat</code> does not recognise is reported through the usual <code>[lattice]</code> diagnostics warning, by name, and the tile falls back to local time rather than rendering nothing. The date and time are formatted for <code>locale</code> &mdash; the tile's own, else the panel's <code>locale</code>, else the browser's default &mdash; entirely through <code>Intl.DateTimeFormat</code>: a 24-hour clock where the locale uses one, 12-hour with an AM/PM marker where it does not, because that is the locale's own convention rather than a second option to set. <code>seconds: false</code> drops the seconds from the time line; <code>date: false</code> drops the date line entirely. Every formatter is built once, at tile resolution, and reused on every tick.</p>
+    <p><strong>Inert everywhere a stat tile measures.</strong> A clock tile takes none of a stat tile's measurement options &mdash; <code>aggregation</code>, <code>field</code>, <code>format</code>, <code>thresholds</code>, <code>bands</code>, <code>target</code>, <code>baseline</code>, <code>sparkline</code> &mdash; because a tile that measures nothing has nothing for them to apply to. Supplying any of them is reported as a configuration warning by name and ignored: the tile still renders the clock, nothing else. It contributes nothing to the panel's totals, to a parent's rolled-up status in a <a href="#kpi-tree">tree</a> (its own <code>status</code> is always <code>null</code>, never <code>unknown</code> &mdash; a clock tile is never &ldquo;not measured&rdquo;, it always has a reading) and nothing to what a host reads out of <code>onChange</code> beyond its own text. It otherwise behaves exactly like any other tile: it sits in <code>tiles()</code>/<code>tile(id)</code> and a <a href="#kpi-tree">tree</a> alongside stat tiles, responds to <code>columns</code>, fires <code>tile:click</code>/<code>tile:dblclick</code>/<code>tile:contextmenu</code>, and its accessible name (<code>aria-label</code>) carries the same date and time text the two visible lines show.</p>
+    <h3 id="kpi-clock-example">A clock tile, two zones, executed</h3>
+    <p class="section-note">Structural assertions only &mdash; the clock reads the real device clock, so a doc example run on every build cannot pin a literal
+    time without freezing it. The <a href="#kpi-clock">formatting itself</a> is pinned for two locales and two zones with a fixed clock
+    in the test suite. Run headless on every build.</p>
+    <pre data-run="js" data-expect="clock clock null null null | true true | clock" data-covers="export:createKPI"><code><span class="kw">const</span> { createKPI } = <span class="kw">await</span> import('../packages/modules/kpi/index.js');
+
+<span class="kw">const</span> kpi = createKPI(null, {
+  tiles: [
+    { kind: 'clock', id: 'london', label: 'London', timeZone: 'Europe/London', locale: 'en-GB' },
+    <span class="cmt">// aggregation/thresholds are measurement options a clock tile refuses (warned, ignored):</span>
+    { kind: 'clock', id: 'ny', label: 'New York', timeZone: 'America/New_York', locale: 'en-US',
+      aggregation: 'sum', thresholds: { warn: 1, critical: 2 } },
+  ],
+});
+
+<span class="kw">const</span> london = kpi.tile('london');
+<span class="kw">const</span> ny = kpi.tile('ny');
+
+<span class="cmt">// kind, status and bar are the same three neutral values on every clock tile,</span>
+<span class="cmt">// whatever was supplied for the ignored options above (String(), because</span>
+<span class="cmt">// Array#join renders null as '' rather than 'null'):</span>
+<span class="kw">const</span> shapes = [london.kind, ny.kind, String(london.status), String(ny.status), String(ny.bar)].join(' '); <span class="cmt">// clock clock null null null</span>
+
+<span class="cmt">// The date and time lines hold the shape the formatting spec promises:</span>
+<span class="kw">const</span> shaped = [
+  /^[A-Za-z]{3}, \d{2} [A-Za-z]{3,4} \d{4}$/.test(london.clock.date),
+  /^\d{2}:\d{2}:\d{2}(\s?[AP]M)?$/.test(ny.clock.time),
+].join(' '); <span class="cmt">// true true</span>
+
+<span class="cmt">// The ignored `aggregation: 'sum'` never took effect:</span>
+<span class="kw">const</span> ignoredAgg = ny.aggregation; <span class="cmt">// clock</span>
+
+kpi.destroy();
+<span class="kw">return</span> [shapes, shaped, ignoredAgg].join(' | ');</code></pre>
     <h3 id="kpi-tree">The KPI tree: top-level items that expand to the indicators beneath them</h3>
     <p>Set <code>tree</code> and the panel becomes a <strong>rail</strong> instead of a grid of tiles: a small number of top-level items, each expanding to the indicators underneath it, with the parent telling you at a glance whether anything below needs attention. <code>Compute</code> expands to <code>psi</code> and <code>cpu</code>; collapsed, it still shows you that one of them is in breach.</p>
     <pre><code>const kpi = createKPI(document.querySelector('#rail'), {
@@ -6692,7 +7073,7 @@ grid.destroy();
 <span class="kw">return</span> `${by['risk.atRisk'].display} at risk | SPI ${by['risk.spi'].display} | ${by['risk.sla.breaches'].display} breaches`;</code></pre>
 
     <h2 id="tabs">The tabbed grid</h2>
-    <p><code>modules/tabs</code> is an opt-in top-of-grid tab strip where <strong>each tab is its own full, independently-configured grid instance</strong> &mdash; "configure each tab as per a normal grid" rather than one grid whose state is swapped. That is a deliberate rejection of the cheaper alternative: <code>grid.state.get()</code>/<code>.apply()</code> only repositions, hides, resizes and sorts <strong>existing</strong> columns by id (no field, type, editor or row data), so a state-swap only works when every tab shares one column schema and one source &mdash; strictly less than the ask. A tab may instead declare <code>from: '&lt;tabId&gt;'</code> plus a narrowing (<code>where</code>, <code>group</code>, <code>join</code>, &hellip;), and the module wires a <code>source: { mode: 'derived', from: &lt;the parent tab's live grid&gt;, &hellip; }</code> for it &mdash; the shipped derived-source mechanism, not a new config-inheritance one. <code>createGrid</code> is <strong>injected</strong> (the same pattern the React/Vue/Svelte adapters use), so the module imports no engine code regardless of how it is loaded — its own minified ESM build (<code>tabs.esm.min.js</code>) is ~65KB gzipped, the same size class as the KPI and framework-adapter modules (~61&ndash;66KB), rather than the ~700KB a module that inlines the whole engine (the web component, htmx) ships.</p>
+    <p><code>modules/tabs</code> is an opt-in top-of-grid tab strip where <strong>each tab is its own full, independently-configured grid instance</strong> &mdash; "configure each tab as per a normal grid" rather than one grid whose state is swapped. That is a deliberate rejection of the cheaper alternative: <code>grid.state.get()</code>/<code>.apply()</code> only repositions, hides, resizes and sorts <strong>existing</strong> columns by id (no field, type, editor or row data), so a state-swap only works when every tab shares one column schema and one source &mdash; strictly less than the ask. A tab may instead declare <code>from: '&lt;tabId&gt;'</code> plus a narrowing (<code>where</code>, <code>group</code>, <code>join</code>, &hellip;), and the module wires a <code>source: { mode: 'derived', from: &lt;the parent tab's live grid&gt;, &hellip; }</code> for it &mdash; the shipped derived-source mechanism, not a new config-inheritance one. <code>createGrid</code> is <strong>injected</strong> (the same pattern the React/Vue/Svelte adapters use), so the module imports no engine code regardless of how it is loaded — its own minified ESM build (<code>tabs.esm.min.js</code>) is about 12KB gzipped &mdash; the module and nothing else. A module bundle carries its own code plus a small shared runtime, not the engine: the framework adapters are 3&ndash;11KB, the KPI module about 50KB, while a module that inlines the whole engine (the web component, htmx) ships at roughly 760KB.</p>
     <pre><code>import { createGrid } from '@toclocoinc/lattice-grid';
 import { createTabs } from '@toclocoinc/lattice-grid/modules/tabs';
 
@@ -6834,7 +7215,7 @@ tabs.destroy();
 
     <h2 id="layout">The dashboard layout</h2>
     <p><code>modules/layout</code> is an opt-in <strong>reconfigurable dashboard surface</strong>: a cell grid inside an element, and a set of windows placed on it that a user can move, resize and close &mdash; by drag <em>or</em> by keyboard. It is the thing a customer would otherwise reach for GridStack or react-grid-layout to get, which means a second dependency, a second sizing model, and a seam where the viewers in it do not resize properly.</p>
-    <p><strong>It is payload-agnostic, and that is the whole design.</strong> A window body is a <code>div</code> with an <code>id</code>. The module creates it, sizes it, and never reads or writes its contents &mdash; it does not import <code>createGrid</code>, does not know what a payload is, and never calls into one. What it does instead is emit <code>window:resized</code> with the measured content box, which is the contract. That rule is what keeps its own code to <strong>12,890 bytes gzipped</strong> (measured: a 77,190-byte bundle over a 62,206-byte fixed floor, of which 2,094 bytes are the two shared module helpers) and what makes it usable for a payload we have not written yet.</p>
+    <p><strong>It is payload-agnostic, and that is the whole design.</strong> A window body is a <code>div</code> with an <code>id</code>. The module creates it, sizes it, and never reads or writes its contents &mdash; it does not import <code>createGrid</code>, does not know what a payload is, and never calls into one. What it does instead is emit <code>window:resized</code> with the measured content box, which is the contract. That rule is what keeps the whole module to <strong>about 17,500 bytes gzipped</strong> (measured on the built bundle: its own code over a shared module runtime of roughly 2KB) and what makes it usable for a payload we have not written yet.</p>
     <pre><code>import { createLayout } from '@toclocoinc/lattice-grid/modules/layout';
 
 const layout = createLayout(document.querySelector('#dash'), {
@@ -8500,6 +8881,7 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
           <tr><td class="name">text</td><td class="type">string</td><td class="desc">The label of a `text` mark. Required for `text`, ignored for other types. <small>(optional)</small></td></tr>
           <tr><td class="name">fontSize</td><td class="type">number</td><td class="desc">A `text` mark's font size in content pixels (before presentation scale). Defaults to 14. <small>(optional)</small></td></tr>
           <tr><td class="name">background</td><td class="type">string</td><td class="desc">An optional backing colour drawn behind a `text` mark's label. <small>(optional)</small></td></tr>
+          <tr><td class="name">region</td><td class="type">'start' | 'centre' | 'end'</td><td class="desc">Which columns the mark belongs to: a pinned region holds still while the grid scrolls sideways, the centre moves with it. Set from where a stroke began; omitted (the centre) for every mark that is not over a pinned column, so a mark saved before this existed reads unchanged. <small>(optional)</small></td></tr>
         </tbody>
       </table>
     </div>
@@ -8774,6 +9156,20 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
         </tbody>
       </table>
     </div>
+    <h3 id="type-ChartNode">ChartNode</h3>
+    <p class="section-note">One node of a `network` chart, as the host declares it. `x` and `y` are fractions of the plot, 0 to 1, measured from its top-left. A node giving both is **pinned** there and takes no part in the force simulation; the rest are laid out around it, deterministically. Giving only one of the two is not a position and the node is laid out.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">id</td><td class="type">string</td><td class="desc">Matches a value in the `source` or `target` column.</td></tr>
+          <tr><td class="name">label</td><td class="type">string</td><td class="desc">Drawn beneath the node. The id is used when this is absent. <small>(optional)</small></td></tr>
+          <tr><td class="name">icon</td><td class="type">string</td><td class="desc">A name in the grid's icon registry, drawn inside the node's disc. <small>(optional)</small></td></tr>
+          <tr><td class="name">x</td><td class="type">number</td><td class="desc">Where to pin it, as a fraction of the plot's width. <small>(optional)</small></td></tr>
+          <tr><td class="name">y</td><td class="type">number</td><td class="desc">Where to pin it, as a fraction of the plot's height. <small>(optional)</small></td></tr>
+        </tbody>
+      </table>
+    </div>
     <h3 id="type-ChartSpec">ChartSpec</h3>
     <p class="section-note">What a chart draws and how. `grid` and `container` are required; everything else describes the chart. A chart reads the grid's *filtered* rows, so it follows the grid without being told to.</p>
     <div class="table-wrap">
@@ -8812,6 +9208,9 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
           <tr><td class="name">diverging</td><td class="type">boolean</td><td class="desc">A diverging colour ramp, for heatmap and geomap. <small>(optional)</small></td></tr>
           <tr><td class="name">shapes</td><td class="type">unknown</td><td class="desc">Country outlines, for a geomap drawing countries rather than continents. Either GeoJSON, an object of code to SVG path data, or a geometry {@link GeoPack} imported from an optional `modules/geo-*` package (BACKLOG-0001321) — as the pack itself, or as `{ pack: id }` once its module has been imported and registered. <small>(optional)</small></td></tr>
           <tr><td class="name">codeProperty</td><td class="type">string</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">lon</td><td class="type">string</td><td class="desc">The longitude column, for the types that place a row by where it is rather than by a code: `markermap`, `bubblemap` and `hexmap`. Degrees east, -180 to 180; a row outside that, or with no reading, is left off the map and counted. <small>(optional)</small></td></tr>
+          <tr><td class="name">lat</td><td class="type">string</td><td class="desc">The latitude column, beside {@link ChartSpec.lon}. Degrees north, -90 to 90, on the same terms. <small>(optional)</small></td></tr>
+          <tr><td class="name">value</td><td class="type">string</td><td class="desc">The measure a `markermap` writes beside each dot and colours it by. Its text is the column's own formatted cell text and its colour is whatever the column's conditional-formatting rules give that value, so a map and the table beside it say the same thing about the same number. <small>(optional)</small></td></tr>
           <tr><td class="name">layer</td><td class="type">string</td><td class="desc">Which layer of a multi-layer geometry pack to draw — the UK pack, for instance, ships `regions`, `local-authorities` and `constituencies` together (BACKLOG-0001321). Ignored for a single-layer pack. <small>(optional)</small></td></tr>
           <tr><td class="name">projection</td><td class="type">'equalEarth' | 'robinson' | 'mercator' | 'equirectangular' | 'albers'</td><td class="desc">The map projection a geomap draws through (BACKLOG-0001321): `'equalEarth'` (the default for a world), `'robinson'`, `'mercator'`, `'equirectangular'`, `'albers'`, `'transverseMercator'`, or a projection function of the caller's own `(lon: number, lat: number) =&gt; [number, number]`. Left unset, a geometry pack draws through the projection it declares. <small>(optional)</small></td></tr>
           <tr><td class="name">projectionOptions</td><td class="type">{ parallels?: [number, number]; centre?: [number, number] }</td><td class="desc">Parameters for the projections that take them: `parallels` and `centre` for `albers`, `centre` for `transverseMercator` (BACKLOG-0001321). <small>(optional)</small></td></tr>
@@ -8838,6 +9237,9 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
           <tr><td class="name">method</td><td class="type">'pearson' | 'spearman' | 'kendall'</td><td class="desc"><small>(optional)</small></td></tr>
           <tr><td class="name">values</td><td class="type">boolean</td><td class="desc"><small>(optional)</small></td></tr>
           <tr><td class="name">iterations</td><td class="type">number</td><td class="desc">Network layouts: how many relaxation passes to run. <small>(optional)</small></td></tr>
+          <tr><td class="name">nodes</td><td class="type">ChartNode[]</td><td class="desc">The nodes of a `network`, named by the host rather than inferred from the rows: an icon per device, a label, and a position the layout must honour. A node listed here that appears in no row is still drawn. A node in the rows that is not listed here takes the chart's `icon` default and its own id as its label. <small>(optional)</small></td></tr>
+          <tr><td class="name">icon</td><td class="type">string</td><td class="desc">The default glyph for a `network` node that names none of its own: any name in the grid's icon registry (see {@link Grid.icons}). Unset, a node with no icon is a plain disc. <small>(optional)</small></td></tr>
+          <tr><td class="name">linkWidth</td><td class="type">number</td><td class="desc">A `network` link's stroke width in pixels, fixed. Unset, width follows the link's value as a share of the heaviest link, as it always has. <small>(optional)</small></td></tr>
           <tr><td class="name">spec</td><td class="type">{ lower?: number; upper?: number; target?: number }</td><td class="desc">Control and capability charts: a tolerance overriding the column's own `spec`, how many leading readings fix the control limits, which rule set the violations are judged against, and the level for the capability interval. <small>(optional)</small></td></tr>
           <tr><td class="name">baseline</td><td class="type">number</td><td class="desc"><small>(optional)</small></td></tr>
           <tr><td class="name">rules</td><td class="type">'westernElectric' | 'nelson'</td><td class="desc"><small>(optional)</small></td></tr>
@@ -9476,18 +9878,75 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
       <table>
         <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
         <tbody>
-          <tr><td class="name">attach</td><td class="type">(grid: unknown, predicate: RoutePredicate, opts?: RouteOptions): DataRouter</td><td class="desc">Attach a grid behind a predicate; `opts` may reshape/filter/sort the route (v3).</td></tr>
-          <tr><td class="name">attachDefault</td><td class="type">(grid: unknown, opts?: RouteOptions): DataRouter</td><td class="desc">Attach the "rest" sink for records no explicit route matched.</td></tr>
-          <tr><td class="name">detach</td><td class="type">(grid: unknown): DataRouter</td><td class="desc">Detach a grid; the host still owns and destroys it.</td></tr>
-          <tr><td class="name">load</td><td class="type">(snapshot: RouterRecord[]): RouteDiff[]</td><td class="desc">Apply a full snapshot as a keyed diff per grid; returns per-route counts.</td></tr>
-          <tr><td class="name">apply</td><td class="type">(deltas: { op: 'upsert' | 'delete'; row: RouterRecord }[]): void</td><td class="desc">Apply incremental deltas, routed and applied in place by `rowKey`.</td></tr>
+          <tr><td class="name">attach</td><td class="type">(grid: unknown, predicate: RoutePredicate, opts?: RouteOptions): DataRouter</td><td class="desc">Attach a grid behind a predicate; `opts` may reshape, filter, sort, summarise or throttle the route.</td></tr>
+          <tr><td class="name">attachDefault</td><td class="type">(grid: unknown, opts?: RouteOptions): DataRouter</td><td class="desc">Attach the "rest" sink for records no explicit route matched. A second call replaces the first.</td></tr>
+          <tr><td class="name">subscribe</td><td class="type">(predicate: RoutePredicate, handler: (change: RouterChange) =&gt; void, opts?: RouteOptions): DataRouter</td><td class="desc">Route a partition slice to any non-grid view (v5): the handler receives the same keyed diff a grid would.</td></tr>
+          <tr><td class="name">alert</td><td class="type">(predicate: RoutePredicate, condition: (rows: RouterRecord[]) =&gt; unknown, handler: (signal: unknown, rows: RouterRecord[]) =&gt; void, opts?: AlertOptions): DataRouter</td><td class="desc">Watch a slice and emit on a rising edge of `condition` rather than render (v5). Removed only by `destroy`.</td></tr>
+          <tr><td class="name">configure</td><td class="type">(spec?: RouterConfig): DataRouter</td><td class="desc">Take the whole routing graph as one declarative spec (v5); desugars to the calls above and composes with them.</td></tr>
           <tr><td class="name">link</td><td class="type">(source: unknown, target: unknown, relation: SelectionRelation): DataRouter</td><td class="desc">Link a source grid's selection to what a target grid receives (v2, BACKLOG-0000880): the target shows the subset of its partition the `relation` admits, re-pushed through the keyed-diff path. No selection shows the full partition; changes are debounced.</td></tr>
+          <tr><td class="name">relate</td><td class="type">(edges: RouterEdge[]): DataRouter</td><td class="desc">Declare a relationship graph (v3): multi-hop, several-into-one and mutual edges — the scalable form of `link`.</td></tr>
           <tr><td class="name">flush</td><td class="type">(): DataRouter</td><td class="desc">Apply any debounced selection refilter synchronously (for tests/determinism).</td></tr>
-          <tr><td class="name">unrouted</td><td class="type">number</td><td class="desc">How many records matched no route. <small>(read-only)</small></td></tr>
+          <tr><td class="name">detach</td><td class="type">(grid: unknown): DataRouter</td><td class="desc">Detach a grid — or a `subscribe` handler — and drop any link it is part of; the host still owns and destroys it.</td></tr>
+          <tr><td class="name">load</td><td class="type">(snapshot: RouterRecord[]): RouteDiff[]</td><td class="desc">Apply a full snapshot as a keyed diff per grid; returns per-route counts. Resets `unrouted`.</td></tr>
+          <tr><td class="name">apply</td><td class="type">(deltas: RouterDelta[]): void</td><td class="desc">Apply incremental deltas, routed and applied in place by `rowKey`; ordered and de-duplicated when `seq` is on.</td></tr>
+          <tr><td class="name">push</td><td class="type">(delta: RouterDelta | RouterDelta[]): DataRouter</td><td class="desc">Enqueue deltas for batched or coalesced application (v3); applies at once when no batching mode is on.</td></tr>
+          <tr><td class="name">flushStream</td><td class="type">(): DataRouter</td><td class="desc">Apply the buffered deltas now as a single `apply` (v3) — a deterministic point, and for tests.</td></tr>
+          <tr><td class="name">flushBackpressure</td><td class="type">(): DataRouter</td><td class="desc">Refresh every backpressured route to the latest state now (v13); a no-op with nothing pending.</td></tr>
+          <tr><td class="name">addSource</td><td class="type">(feed: string | RouterSourceOptions, opts?: RouterSourceOptions): RouterSourceHandle</td><td class="desc">Register a source feed for fan-in (v9): its rows are normalised and namespaced into the one keyed store.</td></tr>
+          <tr><td class="name">removeSource</td><td class="type">(ref: string | RouterSourceHandle): DataRouter</td><td class="desc">Remove a source feed by id or handle (v9): delete exactly its rows from every route, then unregister it.</td></tr>
+          <tr><td class="name">sources</td><td class="type">(): string[]</td><td class="desc">The registered source ids (v9).</td></tr>
+          <tr><td class="name">metrics</td><td class="type">(): RouterMetrics</td><td class="desc">A cheap point-in-time snapshot of the router's runtime (v10); throughput is measured since the previous read.</td></tr>
+          <tr><td class="name">on</td><td class="type">(event: 'metrics', handler: (snapshot: RouterMetrics) =&gt; void): () =&gt; void</td><td class="desc">Subscribe to the periodic `metrics` emit (v10) — the only event; the timer runs only while a listener is registered. Returns the unsubscribe.</td></tr>
+          <tr><td class="name">mountDevtools</td><td class="type">(el: unknown): RouterDevtoolsPanel</td><td class="desc">Mount the live devtools panel into `el` (v10); it re-renders on each `metrics` emit.</td></tr>
+          <tr><td class="name">unrouted</td><td class="type">number</td><td class="desc">How many records matched no route since the last `load` or `query`, running for deltas. <small>(read-only)</small></td></tr>
+          <tr><td class="name">dropped</td><td class="type">number</td><td class="desc">How many stale or duplicate deltas the dedupe gate dropped since creation (v3). <small>(read-only)</small></td></tr>
+          <tr><td class="name">lastSeq</td><td class="type">(): number | undefined</td><td class="desc">The highest seq applied — the resume point to request the feed from after a dropped socket (v3).</td></tr>
+          <tr><td class="name">checkpoint</td><td class="type">(): Map&lt;string, number&gt;</td><td class="desc">A copy of the per-record resume checkpoint: record identity → last applied seq (v3).</td></tr>
+          <tr><td class="name">seenThrough</td><td class="type">(mark: Map&lt;string, number&gt; | Record&lt;string, number&gt;): DataRouter</td><td class="desc">Prime the resume checkpoint from a persisted one, so replayed deltas at or below those seqs are dropped (v3).</td></tr>
+          <tr><td class="name">persist</td><td class="type">(opts?: RouterPersistOptions): DataRouter</td><td class="desc">Turn on durable persistence of the router's state (v12).</td></tr>
+          <tr><td class="name">restore</td><td class="type">(): Promise&lt;boolean&gt;</td><td class="desc">Resume from the durable snapshot (v12); resolves true when one was found and applied.</td></tr>
+          <tr><td class="name">flushPersist</td><td class="type">(): Promise&lt;DataRouter&gt;</td><td class="desc">Flush any pending durable write now (v12); resolves once it has settled.</td></tr>
+          <tr><td class="name">persisting</td><td class="type">boolean</td><td class="desc">Whether durable persistence is on and not degraded to in-memory (v12). <small>(read-only)</small></td></tr>
+          <tr><td class="name">buffer</td><td class="type">(opts?: { window?: number; max?: number }): DataRouter</td><td class="desc">Record the stream into a bounded ring for time travel (v4): a time `window` in ms and/or a `max` delta count.</td></tr>
+          <tr><td class="name">scrubTo</td><td class="type">(target: number, opts?: { by?: 'seq' | 'time' }): DataRouter</td><td class="desc">Scrub the attached grids to a past seq or timestamp (v4).</td></tr>
+          <tr><td class="name">replay</td><td class="type">(from: number, to: number, opts?: { speed?: number; by?: 'seq' | 'time' }): Promise&lt;void&gt;</td><td class="desc">Replay a buffered range step by step (v4); resolves when it completes or is superseded.</td></tr>
+          <tr><td class="name">pause</td><td class="type">(): DataRouter</td><td class="desc">Pause an in-flight replay at the current step (v4); a no-op when nothing is replaying.</td></tr>
+          <tr><td class="name">resume</td><td class="type">(): DataRouter</td><td class="desc">Resume a paused replay from where it stopped (v4); a no-op when not paused.</td></tr>
+          <tr><td class="name">live</td><td class="type">(): DataRouter</td><td class="desc">Return to live (v4): rebuild the head from the base plus every buffered delta.</td></tr>
+          <tr><td class="name">traveling</td><td class="type">boolean</td><td class="desc">Whether the grids are currently showing a reconstructed past (v4). <small>(read-only)</small></td></tr>
+          <tr><td class="name">buffered</td><td class="type">number</td><td class="desc">How many deltas the bounded buffer currently holds (v4). <small>(read-only)</small></td></tr>
+          <tr><td class="name">broadcast</td><td class="type">(opts: { channel: string }): DataRouter</td><td class="desc">Mirror the ordered, de-duplicated deltas to other tabs over a BroadcastChannel (v6), with no echo loop.</td></tr>
+          <tr><td class="name">broadcasting</td><td class="type">boolean</td><td class="desc">Whether the router is mirroring to a BroadcastChannel (v6). <small>(read-only)</small></td></tr>
+          <tr><td class="name">query</td><td class="type">(adapter: RouterQueryAdapter, request?: Record&lt;string, unknown&gt;): Promise&lt;DataRouter&gt;</td><td class="desc">Source the router from a pushdown adapter (v7): each `where` route is planned against the adapter's capabilities.</td></tr>
+          <tr><td class="name">lastQueryPlan</td><td class="type">(): RouterQueryPlanEntry[] | null</td><td class="desc">The pushed/residual split of the last `query()` (v7), per fetch, or null before any.</td></tr>
           <tr><td class="name">destroy</td><td class="type">(): void</td><td class="desc">Detach every grid and drop every link (the host destroys the grids themselves).</td></tr>
         </tbody>
       </table>
     </div>
+    <h3 id="type-DataRouterOptions">DataRouterOptions</h3>
+    <p class="section-note">Options for `createDataRouter`. `key` is the partition property or `fn(row)`; optional, since a router whose routes all use `fn(row)` predicates never reads it. `rowKey` is the identity within a grid; `overlap` fans a record to every matching route (default: first match wins); `onUnrouted` receives what matched no route — the row on `load` and `query`, the whole delta on `apply`; `selectionDebounce` is the ms debounce for cross-grid selection refilters (default 16; `0` is synchronous). `seq` names the per-record version that orders and de-duplicates a feed (v3), `dedupe` (default on with `seq`) drops stale and duplicate deltas; `batch` (ms, or `{ intervalMs }`) and `coalesce` buffer a high-frequency feed for `push`; `time` reads a row's timestamp for time-domain scrubbing and `now` overrides the clock (v4); `config` is a declarative routing graph applied at construction (v5); `onWrite` and `onConflict` are the defaults for every writable route (v8); `metricsInterval` is the ms between `metrics` emits (default 1000; `0` disables the timer) (v10).</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">key</td><td class="type">RouterKey</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">rowKey</td><td class="type">RouterKey</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">overlap</td><td class="type">boolean</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">onUnrouted</td><td class="type">(item: RouterRecord | RouterDelta) =&gt; void</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">selectionDebounce</td><td class="type">number</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">seq</td><td class="type">RouterKey</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">dedupe</td><td class="type">boolean</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">batch</td><td class="type">number | { intervalMs: number }</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">coalesce</td><td class="type">boolean</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">time</td><td class="type">RouterKey</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">now</td><td class="type">() =&gt; number</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">config</td><td class="type">RouterConfig</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">onWrite</td><td class="type">(change: RouterWrite, ctx: { route: unknown; source: unknown }) =&gt; unknown</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">onConflict</td><td class="type">(change: RouterWrite, ctx: { serverRow: RouterRecord }) =&gt; void</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">metricsInterval</td><td class="type">number</td><td class="desc"><small>(optional)</small></td></tr>
+        </tbody>
+      </table>
+    </div>
     <h3 id="type-DatasetColumnDifference">DatasetColumnDifference</h3>
     <div class="table-wrap">
       <table>
@@ -10598,6 +11057,7 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
           <tr><td class="name">setPinnedRows</td><td class="type">(rows: unknown[], opts?: { edge?: 'top' | 'bottom' }): void</td><td class="desc">Pin rows above or below the scrolling body. The rows render through the ordinary column pipeline but are not part of the data: not counted, sorted, filtered, grouped, selectable or exported. Pass a new array rather than mutating the one you passed before: array identity is how the grid knows the pinned rows have changed.</td></tr>
           <tr><td class="name">getPinnedRows</td><td class="type">(opts?: { edge?: 'top' | 'bottom' }): unknown[]</td><td class="desc">The objects currently pinned at one edge, as a copy.</td></tr>
           <tr><td class="name">form</td><td class="type">RowFormApi</td><td class="desc">The row form. Declines when `rowForm` is not configured. <small>(read-only)</small></td></tr>
+          <tr><td class="name">icons</td><td class="type">IconRegistryApi</td><td class="desc">The grid's icon registry, read-only. The same sprite set `registerIcon` writes to and every cell paints from, reachable from the grid instance so that code outside the grid bundle — an optional module drawing its own glyph, a network chart putting a `router` on a node — draws from the one registry rather than a second, empty copy of it. Register with `registerIcon` or `config.icons`, as before. <small>(read-only)</small></td></tr>
           <tr><td class="name">getVersion</td><td class="type">(): string</td><td class="desc">The library version.</td></tr>
           <tr><td class="name">destroy</td><td class="type">(): void</td><td class="desc">Release everything: listeners, timers, workers and the DOM the grid made.</td></tr>
         </tbody>
@@ -10925,6 +11385,29 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
         </tbody>
       </table>
     </div>
+    <h3 id="type-IconGlyph">IconGlyph</h3>
+    <p class="section-note">One sprite: its view box, its path data, and how it is painted.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">viewBox</td><td class="type">string</td><td class="desc"></td></tr>
+          <tr><td class="name">paths</td><td class="type">string[]</td><td class="desc"></td></tr>
+          <tr><td class="name">paint</td><td class="type">'stroke' | 'fill'</td><td class="desc"></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <h3 id="type-IconRegistryApi">IconRegistryApi</h3>
+    <p class="section-note">Read access to the grid's icon sprite set (see {@link Grid.icons}).</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">get</td><td class="type">(name: string): IconGlyph | null</td><td class="desc">One glyph, as a copy, or null when the name is not registered.</td></tr>
+          <tr><td class="name">names</td><td class="type">(): string[]</td><td class="desc">Every registered name, in registration order.</td></tr>
+        </tbody>
+      </table>
+    </div>
     <h3 id="type-IconSetSpec">IconSetSpec</h3>
     <p class="section-note">An icon set (BACKLOG-0000955): a glyph placed beside the value by the band it falls in. Drawn as a `background-image` with padding, so it too needs no extra element and stays a plain style value. `set` names a built-in — `'arrows'`, `'trafficLights'` or `'ratings'` (see {@link ICON_SETS}) — or supply your own ordered `icons` (SVG documents, data URIs or `url(...)` values). Bands are split at `thresholds` (ascending, one fewer than the icons); without them the column's distribution is cut into equal-count bands. `reverse` flips the order so a high value can read as red.</p>
     <div class="table-wrap">
@@ -11391,6 +11874,22 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
         </tbody>
       </table>
     </div>
+    <h3 id="type-KPIClockTile">KPIClockTile</h3>
+    <p class="section-note">A clock tile: the device clock, not an aggregate (BACKLOG-0001640) — the date on one line and the time on the next, ticking once a second from one shared panel timer. It takes none of a stat tile's measurement options (`aggregation`, `field`, `format`, `thresholds`, `bands`, `target`, `baseline`, `sparkline`): supplying any of them is reported as a configuration warning by name and ignored, because a tile that measures nothing has nothing for them to apply to.</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">'clock'</td><td class="desc">Discriminates a clock tile from an aggregate stat tile.</td></tr>
+          <tr><td class="name">id</td><td class="type">string</td><td class="desc">A stable identity for the tile (defaults to the label, then the index). <small>(optional)</small></td></tr>
+          <tr><td class="name">label</td><td class="type">string</td><td class="desc">The tile's accessible label (e.g. the city or zone it names). <small>(optional)</small></td></tr>
+          <tr><td class="name">timeZone</td><td class="type">string</td><td class="desc">Any IANA zone name (`'Europe/London'`). Omitted, the tile shows the viewer's local time. A name `Intl.DateTimeFormat` does not recognise is reported through the usual diagnostics warning and the tile falls back to local time rather than rendering nothing. <small>(optional)</small></td></tr>
+          <tr><td class="name">locale</td><td class="type">string</td><td class="desc">The locale the date and time are formatted in — the tile's own, else the panel's `KPIConfig.locale`, else the browser's default. A 24-hour clock or a 12-hour one with an AM/PM marker follows from the locale itself (`Intl.DateTimeFormat`'s own convention), never a separate option. <small>(optional)</small></td></tr>
+          <tr><td class="name">seconds</td><td class="type">boolean</td><td class="desc">Show the seconds on the time line. Default `true`. <small>(optional)</small></td></tr>
+          <tr><td class="name">date</td><td class="type">boolean</td><td class="desc">Show the date line at all. Default `true`. <small>(optional)</small></td></tr>
+        </tbody>
+      </table>
+    </div>
     <h3 id="type-KPIConfig">KPIConfig</h3>
     <p class="section-note">KPI panel configuration.</p>
     <div class="table-wrap">
@@ -11405,6 +11904,7 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
           <tr><td class="name">columns</td><td class="type">number</td><td class="desc"><small>(optional)</small></td></tr>
           <tr><td class="name">ariaLabel</td><td class="type">string</td><td class="desc"><small>(optional)</small></td></tr>
           <tr><td class="name">nullText</td><td class="type">string</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">locale</td><td class="type">string</td><td class="desc">The default locale a clock tile formats in when the tile itself declares none (BACKLOG-0001640); falls back to the browser's default. No effect on a stat tile, which takes its own `format.locale`. <small>(optional)</small></td></tr>
           <tr><td class="name">tree</td><td class="type">KPITreeConfig | false</td><td class="desc">Arrange the tiles as a hierarchy; `false` keeps the panel flat. <small>(optional)</small></td></tr>
           <tr><td class="name">messages</td><td class="type">{ t(key: string, params?: Record&lt;string, unknown&gt;): string }</td><td class="desc">The catalogue the panel's own text is read from. A panel routinely has no grid to borrow one off — two of its three input modes have none — so this is the first-class way to translate it. A grid's own `messages` satisfies the shape; a key it does not carry falls back to English. <small>(optional)</small></td></tr>
           <tr><td class="name">onTileClick</td><td class="type">(event: KPIEvent) =&gt; void</td><td class="desc"><small>(optional)</small></td></tr>
@@ -11475,24 +11975,13 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
         </tbody>
       </table>
     </div>
-    <h3 id="type-KPIThresholds">KPIThresholds</h3>
-    <p class="section-note">A semantic threshold: two cut points and a direction. `higherIsBetter` (the default) makes a value at/above `warn` good, at/above `critical` a warning, below it critical; `lowerIsBetter` mirrors it. Colour is a host concern.</p>
-    <div class="table-wrap">
-      <table>
-        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
-        <tbody>
-          <tr><td class="name">warn</td><td class="type">number</td><td class="desc"></td></tr>
-          <tr><td class="name">critical</td><td class="type">number</td><td class="desc"></td></tr>
-          <tr><td class="name">direction</td><td class="type">'higherIsBetter' | 'lowerIsBetter'</td><td class="desc"><small>(optional)</small></td></tr>
-        </tbody>
-      </table>
-    </div>
-    <h3 id="type-KPITile">KPITile</h3>
-    <p class="section-note">One tile: an aggregate over the routed rows, with optional filter, format, threshold and trend.</p>
+    <h3 id="type-KPIStatTile">KPIStatTile</h3>
+    <p class="section-note">An aggregate stat tile: the routed rows reduced to one number, with optional filter, format, threshold and trend.</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">'stat'</td><td class="desc">Absent, or `'stat'`: the default tile kind. <small>(optional)</small></td></tr>
           <tr><td class="name">id</td><td class="type">string</td><td class="desc">A stable identity for the tile (defaults to the label, then the index). <small>(optional)</small></td></tr>
           <tr><td class="name">label</td><td class="type">string</td><td class="desc">The tile's accessible label. <small>(optional)</small></td></tr>
           <tr><td class="name">aggregation</td><td class="type">KPIAggregation | ((rows: KPIRow[], tile: object) =&gt; unknown)</td><td class="desc">The aggregation kind, or a reducer `(rows, tile) =&gt; value` for a custom tile. <small>(optional)</small></td></tr>
@@ -11508,6 +11997,18 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
         </tbody>
       </table>
     </div>
+    <h3 id="type-KPIThresholds">KPIThresholds</h3>
+    <p class="section-note">A semantic threshold: two cut points and a direction. `higherIsBetter` (the default) makes a value at/above `warn` good, at/above `critical` a warning, below it critical; `lowerIsBetter` mirrors it. Colour is a host concern.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">warn</td><td class="type">number</td><td class="desc"></td></tr>
+          <tr><td class="name">critical</td><td class="type">number</td><td class="desc"></td></tr>
+          <tr><td class="name">direction</td><td class="type">'higherIsBetter' | 'lowerIsBetter'</td><td class="desc"><small>(optional)</small></td></tr>
+        </tbody>
+      </table>
+    </div>
     <h3 id="type-KPITileModel">KPITileModel</h3>
     <p class="section-note">A computed tile, as it appears in the model.</p>
     <div class="table-wrap">
@@ -11516,10 +12017,12 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
         <tbody>
           <tr><td class="name">id</td><td class="type">string</td><td class="desc"></td></tr>
           <tr><td class="name">label</td><td class="type">string</td><td class="desc"></td></tr>
+          <tr><td class="name">kind</td><td class="type">'stat' | 'clock'</td><td class="desc">`'stat'` for an aggregate tile, `'clock'` for a clock tile (BACKLOG-0001640).</td></tr>
           <tr><td class="name">aggregation</td><td class="type">string</td><td class="desc"></td></tr>
           <tr><td class="name">field</td><td class="type">string</td><td class="desc"><small>(optional)</small></td></tr>
-          <tr><td class="name">value</td><td class="type">unknown</td><td class="desc"></td></tr>
-          <tr><td class="name">formatted</td><td class="type">string</td><td class="desc"></td></tr>
+          <tr><td class="name">value</td><td class="type">unknown</td><td class="desc">For a clock tile, the read instant as epoch milliseconds.</td></tr>
+          <tr><td class="name">formatted</td><td class="type">string</td><td class="desc">For a clock tile, the date and time text joined by a space (the same text `clock.date` and `clock.time` carry separately).</td></tr>
+          <tr><td class="name">clock</td><td class="type">{ date: string | null; time: string }</td><td class="desc">Present only on a clock tile: the date and time lines rendered separately. `date` is `null` when the tile was given `date: false`. <small>(optional)</small></td></tr>
           <tr><td class="name">status</td><td class="type">'good' | 'warn' | 'critical' | 'unknown' | null</td><td class="desc">The tile's semantic band, or `unknown` when the tile measured nothing. `unknown` is decided from data presence before any threshold is consulted: an aggregation over nothing returns the identity of its operation (`sum` and `count` return 0), and 0 is a number a threshold grades, so without it an empty panel would report as a healthy one. Two things make a tile `unknown`: the panel holds no rows at all, or the tile's `field` names no column on the bound grid, so it never read a cell to reduce over. A tile whose `filter` matches none of the rows the panel *does* hold is neither — it has measured a real zero and is banded normally. `null` means the tile has no thresholds or bands configured.</td></tr>
           <tr><td class="name">target</td><td class="type">number</td><td class="desc"><small>(optional)</small></td></tr>
           <tr><td class="name">baseline</td><td class="type">number</td><td class="desc"><small>(optional)</small></td></tr>
@@ -12589,15 +13092,133 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
       </table>
     </div>
     <h3 id="type-RouteOptions">RouteOptions</h3>
-    <p class="section-note">Per-route reshaping options (v3, BACKLOG-0000887): `transform` maps/renames/ derives each row before the grid sees it; `filter` gives the grid only the rows it admits; `sort` (a comparator or `{ key, dir }`) orders what the grid receives. `rowKey` overrides the router default. All optional.</p>
+    <p class="section-note">Per-route options, shared by `attach`, `attachDefault` and `subscribe`. `rowKey` overrides the router default for this route. `transform` reshapes each row before the viewer sees it; `filter` admits a subset; `sort` orders what the viewer receives; `rollup` summarises the slice (v3). A `transform` or `rollup` route is derived and cannot be `writable`. `where` is read only by `query()` (v7). `writable` routes the grid's committed edits to `onWrite`, reverting on reject, with `onConflict` for a last- write-wins conflict (v8); both default to the router's own. `label` names the route in metrics and the devtools panel; `backpressure` throttles its refresh under load (v13).</p>
     <div class="table-wrap">
       <table>
         <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
         <tbody>
-          <tr><td class="name">rowKey</td><td class="type">(string | ((row: RouterRecord) =&gt; unknown))</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">rowKey</td><td class="type">RouterKey</td><td class="desc"><small>(optional)</small></td></tr>
           <tr><td class="name">transform</td><td class="type">(row: RouterRecord) =&gt; RouterRecord</td><td class="desc"><small>(optional)</small></td></tr>
           <tr><td class="name">filter</td><td class="type">(row: RouterRecord) =&gt; boolean</td><td class="desc"><small>(optional)</small></td></tr>
-          <tr><td class="name">sort</td><td class="type">(((a: RouterRecord, b: RouterRecord) =&gt; number) | { key: string; dir?: 'asc' | 'desc' })</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">sort</td><td class="type">RouteSort</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">rollup</td><td class="type">RouteRollup</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">where</td><td class="type">RouteWhere</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">writable</td><td class="type">boolean</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">onWrite</td><td class="type">(change: RouterWrite, ctx: { route: unknown; source: unknown }) =&gt; unknown</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">onConflict</td><td class="type">(change: RouterWrite, ctx: { serverRow: RouterRecord }) =&gt; void</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">label</td><td class="type">string</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">backpressure</td><td class="type">RouteBackpressure</td><td class="desc"><small>(optional)</small></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <h3 id="type-RouterConfig">RouterConfig</h3>
+    <p class="section-note">A declarative routing graph (v5, BACKLOG-0000910): the same routes, links, relationship edges and buffer the imperative calls would make, as one data spec. Desugars to those calls and composes with them.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">routes</td><td class="type">Record&lt;string, unknown&gt;[]</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">links</td><td class="type">{ from: unknown; to: unknown; on?: SelectionRelation; relation?: SelectionRelation }[]</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">relate</td><td class="type">RouterEdge[]</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">buffer</td><td class="type">{ window?: number; max?: number }</td><td class="desc"><small>(optional)</small></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <h3 id="type-RouterJoin">RouterJoin</h3>
+    <p class="section-note">A fan-in source's lookup join (v11): `from` is the lookup source's id; `localKey` (alias `on`) reads the joining value off this source's row; `foreignKey` (alias `fromKey`) reads it off the lookup row, defaulting to a string `localKey`; `fields` (alias `select`) picks the lookup fields to carry — a list, a rename map, or a function of both rows; `missing` says what to do while the lookup row has not arrived: `hold` the row back, `passthrough` it unjoined, or fill the fields with `null`.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">from</td><td class="type">string</td><td class="desc"></td></tr>
+          <tr><td class="name">localKey</td><td class="type">RouterKey</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">on</td><td class="type">RouterKey</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">foreignKey</td><td class="type">RouterKey</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">fromKey</td><td class="type">RouterKey</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">fields</td><td class="type">string[] | Record&lt;string, string&gt; | ((lookupRow: RouterRecord | null, leftRow: RouterRecord) =&gt; RouterRecord)</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">select</td><td class="type">string[] | Record&lt;string, string&gt; | ((lookupRow: RouterRecord | null, leftRow: RouterRecord) =&gt; RouterRecord)</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">missing</td><td class="type">'hold' | 'passthrough' | 'null'</td><td class="desc"><small>(optional)</small></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <h3 id="type-RouterMetrics">RouterMetrics</h3>
+    <p class="section-note">A `metrics()` snapshot (v10): per-route and per-source counts and throughput (rows/sec since the previous read), and the global unrouted, dropped (duplicate), buffered and lag figures.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">routes</td><td class="type">RouterRouteMetrics[]</td><td class="desc"></td></tr>
+          <tr><td class="name">sources</td><td class="type">RouterSourceMetrics[]</td><td class="desc"></td></tr>
+          <tr><td class="name">unrouted</td><td class="type">number</td><td class="desc"></td></tr>
+          <tr><td class="name">dropped</td><td class="type">number</td><td class="desc"></td></tr>
+          <tr><td class="name">buffered</td><td class="type">number</td><td class="desc"></td></tr>
+          <tr><td class="name">lag</td><td class="type">number</td><td class="desc"></td></tr>
+          <tr><td class="name">throughput</td><td class="type">number</td><td class="desc"></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <h3 id="type-RouteRollup">RouteRollup</h3>
+    <p class="section-note">A rollup route's summary spec (v3): one summary row per `groupBy` group, each `aggregate` a named reducer over the group's rows or a `{ op, field }` shorthand (`sum`, `avg`, `min`, `max`, `count`).</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">groupBy</td><td class="type">RouterKey | RouterKey[]</td><td class="desc"></td></tr>
+          <tr><td class="name">aggregate</td><td class="type">Record&lt;string, ((rows: RouterRecord[]) =&gt; unknown) | { op: string; field?: string }&gt;</td><td class="desc"><small>(optional)</small></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <h3 id="type-RouterPersistOptions">RouterPersistOptions</h3>
+    <p class="section-note">Durable persistence options (v12): `key` names the snapshot, `debounce` (ms) coalesces writes, `storage` is a `{ get, set }` pair of your own, or `indexedDB` / `dbName` / `storeName` select the browser store.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">key</td><td class="type">string</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">debounce</td><td class="type">number</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">storage</td><td class="type">{ get: (key: string) =&gt; Promise&lt;unknown&gt;; set: (key: string, value: unknown) =&gt; Promise&lt;void&gt; }</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">indexedDB</td><td class="type">unknown</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">dbName</td><td class="type">string</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">storeName</td><td class="type">string</td><td class="desc"><small>(optional)</small></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <h3 id="type-RouterQueryAdapter">RouterQueryAdapter</h3>
+    <p class="section-note">A pushdown adapter `query()` can source the router from (v7): anything with an `execute(query, request)` returning rows, and optional `capabilities` the planner consults to decide what it may push down.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">capabilities</td><td class="type">Record&lt;string, unknown&gt;</td><td class="desc"><small>(optional)</small></td></tr>
+          <tr><td class="name">execute</td><td class="type">(query: Record&lt;string, unknown&gt;, request?: Record&lt;string, unknown&gt;) =&gt; Promise&lt;{ rows: RouterRecord[]; total?: number }&gt;</td><td class="desc"></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <h3 id="type-RouterRouteMetrics">RouterRouteMetrics</h3>
+    <p class="section-note">One route's figures in a `metrics()` snapshot (v10).</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">label</td><td class="type">string | null</td><td class="desc"></td></tr>
+          <tr><td class="name">rows</td><td class="type">number</td><td class="desc"></td></tr>
+          <tr><td class="name">shown</td><td class="type">number</td><td class="desc"></td></tr>
+          <tr><td class="name">throughput</td><td class="type">number</td><td class="desc"></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <h3 id="type-RouterSourceHandle">RouterSourceHandle</h3>
+    <p class="section-note">The handle `addSource` returns for one feed (v9). Its `load` is a per-source snapshot — a keyed diff over this feed's rows only, other feeds untouched; `apply` and `push` take this feed's deltas through the router's ordinary and batched paths; `remove` deletes exactly the rows it holds and unregisters it, returning the router.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Type</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="name">id</td><td class="type">string</td><td class="desc">The source id. <small>(read-only)</small></td></tr>
+          <tr><td class="name">size</td><td class="type">number</td><td class="desc">How many rows this source currently holds live. <small>(read-only)</small></td></tr>
+          <tr><td class="name">load</td><td class="type">(rows: RouterRecord[]): RouterSourceHandle</td><td class="desc">Apply a per-source snapshot: upsert its current rows, delete the ones it no longer has.</td></tr>
+          <tr><td class="name">apply</td><td class="type">(deltas: RouterDelta[]): RouterSourceHandle</td><td class="desc">Apply per-source deltas through the router's ordinary apply path.</td></tr>
+          <tr><td class="name">push</td><td class="type">(delta: RouterDelta | RouterDelta[]): RouterSourceHandle</td><td class="desc">Enqueue per-source deltas through the router's stream path (batching honoured).</td></tr>
+          <tr><td class="name">remove</td><td class="type">(): DataRouter</td><td class="desc">Remove this source: delete exactly the rows it holds from every route, then unregister it.</td></tr>
         </tbody>
       </table>
     </div>
@@ -13444,7 +14065,7 @@ return `next ${p.mean.toFixed(1)}; r2 ${f.r2.toFixed(1)}; band ${p.upper - p.low
 <!-- END GENERATED TYPE REFERENCE -->
 
     <footer>
-      Lattice Grid 1.63.2 · Copyright © 2026 TOCLOCO Inc. All rights reserved.
+      Lattice Grid 1.64.0 · Copyright © 2026 TOCLOCO Inc. All rights reserved.
       This document describes the behaviour of the shipped library. Where this guide and the code
       disagree, the code wins: please <a href="https://www.latticegrid.dev">tell us</a>.
     </footer>