@toclocoinc/lattice-grid 1.32.0 → 1.34.0

package/README.md

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

package/docs/API.html

@@ -4094,6 +4094,93 @@ createGrid(el, {
 
     <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="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>
+<span class="kw">import</span> '@toclocoinc/lattice-grid/modules/chart-ridgeline';  <span class="cmt">// opt in to one type</span>
+
+createChart({ grid, container: '#dist', type: 'ridgeline', x: 'segment', y: 'value' });</code></pre>
+    <p>An extension declares <code>{ draw, bind?, freeform?, labelled? }</code>. Its <code>draw(ctx)</code> receives the same context a built-in drawer gets — <code>plot</code>, <code>bound</code>, <code>groups</code>, <code>scheme</code>, <code>typography</code>, <code>labels</code>, <code>grid</code>, <code>spec</code> — plus <code>ctx.helpers</code>, the base's own toolkit (element factory, scales, axis drawers, mark pool, distribution kernels). So an extension imports nothing heavy from the base: it receives the toolkit and ships only its own geometry. <code>registeredChartTypes()</code> lists what is registered. <strong>Ridgeline</strong> (<code>drawRidgeline</code>) is the first: one kernel-density ridge per category, stacked and overlapping, over the distribution of a measure — the reading for "how did this distribution change across segments".</p>
+    <pre data-run="js" data-expect="true | true | function" data-covers="export:registerChartType export:registeredChartTypes export:drawRidgeline"><code><span class="kw">const</span> charts = <span class="kw">await</span> import('../packages/modules/charts/index.js');
+<span class="kw">const</span> ridge = <span class="kw">await</span> import('../packages/modules/chart-ridgeline/index.js');
+
+<span class="cmt">// Importing the module self-registered the type against the base registry.</span>
+<span class="kw">const</span> registered = charts.registeredChartTypes().includes('ridgeline');
+<span class="cmt">// registerChartType is idempotent by name, so re-registering is safe.</span>
+charts.registerChartType('ridgeline', { draw: ridge.drawRidgeline });
+
+<span class="kw">return</span> [
+  registered,
+  charts.registeredChartTypes().includes('ridgeline'),
+  typeof ridge.drawRidgeline,
+].join(' | ');</code></pre>
+
+    <p>More lead-pick types ship the same way, each in its own opt-in module — the base bundle stays flat as they are added. <strong>Calendar heatmap</strong> (<code>drawCalendar</code>, <code>type: 'calendar'</code>) lays a measure out value-by-day, GitHub-style, from a date column. <strong>Scatter-plot matrix</strong> (<code>drawSplom</code>/<code>bindSplom</code>, <code>type: 'splom'</code>) crosses every pair of numeric <code>columns</code>. <strong>Hexbin</strong> (<code>drawHexbin</code>/<code>bindHexbin</code>, <code>type: 'hexbin'</code>) bins a scatter into count-shaded hexagons so a million rows read as a density field. Each reads the grid through the public row API, so it follows the grid's filters and sort.</p>
+    <pre data-run="js" data-expect="true | function | function | function | function | function" data-covers="export:drawCalendar export:drawSplom export:bindSplom export:drawHexbin export:bindHexbin"><code><span class="kw">const</span> charts = <span class="kw">await</span> import('../packages/modules/charts/index.js');
+<span class="kw">const</span> cal = <span class="kw">await</span> import('../packages/modules/chart-calendar/index.js');
+<span class="kw">const</span> splom = <span class="kw">await</span> import('../packages/modules/chart-splom/index.js');
+<span class="kw">const</span> hex = <span class="kw">await</span> import('../packages/modules/chart-hexbin/index.js');
+
+<span class="cmt">// Each import self-registered its type; the base bundle carries none of them.</span>
+<span class="kw">const</span> types = charts.registeredChartTypes();
+<span class="kw">return</span> [
+  ['calendar', 'splom', 'hexbin'].every((t) =&gt; types.includes(t)),
+  typeof cal.drawCalendar,
+  typeof splom.drawSplom, typeof splom.bindSplom,
+  typeof hex.drawHexbin, typeof hex.bindHexbin,
+].join(' | ');</code></pre>
+
+    <p>The model-evaluation and time-series lead picks ship the same way. <strong>ROC / PR / calibration</strong> (<code>drawRoc</code>/<code>bindRoc</code>, <code>type: 'roc'</code>, <code>curve: 'roc' | 'pr' | 'calibration'</code>) evaluates a classifier from a <code>label</code> and a <code>score</code> column, with the AUC. <strong>Fan / forecast</strong> (<code>drawFan</code>/<code>bindFan</code>, <code>type: 'fan'</code>) draws history, a point forecast, and a widening prediction interval from <code>y</code>/<code>forecast</code>/<code>lower</code>/<code>upper</code>. <strong>Decomposition panel</strong> (<code>drawDecomposition</code>/<code>bindDecomposition</code>, <code>type: 'decomposition'</code>) stacks the <code>observed</code>/<code>trend</code>/<code>seasonal</code>/<code>residual</code> components on one x axis — the companion to the grid's own time-series shadow columns.</p>
+    <pre data-run="js" data-expect="true | function | function | function | function | function | function" data-covers="export:drawRoc export:bindRoc export:drawFan export:bindFan export:drawDecomposition export:bindDecomposition"><code><span class="kw">const</span> charts = <span class="kw">await</span> import('../packages/modules/charts/index.js');
+<span class="kw">const</span> roc = <span class="kw">await</span> import('../packages/modules/chart-roc/index.js');
+<span class="kw">const</span> fan = <span class="kw">await</span> import('../packages/modules/chart-fan/index.js');
+<span class="kw">const</span> decomp = <span class="kw">await</span> import('../packages/modules/chart-decomposition/index.js');
+
+<span class="kw">const</span> types = charts.registeredChartTypes();
+<span class="kw">return</span> [
+  ['roc', 'fan', 'decomposition'].every((t) =&gt; types.includes(t)),
+  typeof roc.drawRoc, typeof roc.bindRoc,
+  typeof fan.drawFan, typeof fan.bindFan,
+  typeof decomp.drawDecomposition, typeof decomp.bindDecomposition,
+].join(' | ');</code></pre>
+
+    <p>The comparison and ranking family ships the same way. <strong>Slope</strong> (<code>drawSlope</code>, <code>type: 'slope'</code>) connects each series across two periods; <strong>dumbbell</strong> (<code>drawDumbbell</code>/<code>bindDumbbell</code>, <code>type: 'dumbbell'</code>) shows a <code>start</code>/<code>end</code> gap per category; <strong>bump</strong> (<code>drawBump</code>, <code>type: 'bump'</code>) plots rank-over-time; <strong>diverging</strong> (<code>drawDiverging</code>, <code>type: 'diverging'</code>) grows bars from a central zero; <strong>parallel coordinates</strong> (<code>drawParallel</code>/<code>bindParallel</code>, <code>type: 'parallel'</code>) draws one polyline per row across several numeric axes.</p>
+    <pre data-run="js" data-expect="true | function | function | function | function | function | function | function" data-covers="export:drawSlope export:drawDumbbell export:bindDumbbell export:drawBump export:drawDiverging export:drawParallel export:bindParallel"><code><span class="kw">const</span> charts = <span class="kw">await</span> import('../packages/modules/charts/index.js');
+<span class="kw">const</span> slope = <span class="kw">await</span> import('../packages/modules/chart-slope/index.js');
+<span class="kw">const</span> dumbbell = <span class="kw">await</span> import('../packages/modules/chart-dumbbell/index.js');
+<span class="kw">const</span> bump = <span class="kw">await</span> import('../packages/modules/chart-bump/index.js');
+<span class="kw">const</span> diverging = <span class="kw">await</span> import('../packages/modules/chart-diverging/index.js');
+<span class="kw">const</span> parallel = <span class="kw">await</span> import('../packages/modules/chart-parallel/index.js');
+
+<span class="kw">const</span> types = charts.registeredChartTypes();
+<span class="kw">return</span> [
+  ['slope', 'dumbbell', 'bump', 'diverging', 'parallel'].every((t) =&gt; types.includes(t)),
+  typeof slope.drawSlope,
+  typeof dumbbell.drawDumbbell, typeof dumbbell.bindDumbbell,
+  typeof bump.drawBump,
+  typeof diverging.drawDiverging,
+  typeof parallel.drawParallel, typeof parallel.bindParallel,
+].join(' | ');</code></pre>
+
+    <p>The hierarchy, flow and geographic remainder ships the same way — treemap, sunburst, funnel, radar, sankey, chord and network are already built in, so the new opt-in modules are: <strong>icicle</strong> (<code>drawIcicle</code>, <code>type: 'icicle'</code>, drawn from the grid's group tree), <strong>waffle</strong> (<code>drawWaffle</code>, <code>type: 'waffle'</code>), <strong>alluvial</strong> (<code>drawAlluvial</code>/<code>bindAlluvial</code>, <code>type: 'alluvial'</code>), <strong>arc diagram</strong> (<code>drawArc</code>/<code>bindArc</code>, <code>type: 'arc'</code>), <strong>bubble map</strong> (<code>drawBubbleMap</code>/<code>bindBubbleMap</code>, <code>type: 'bubblemap'</code>) and <strong>hexbin map</strong> (<code>drawHexMap</code>/<code>bindHexMap</code>, <code>type: 'hexmap'</code>). The two maps place <code>lon</code>/<code>lat</code> directly, so they need no outline data and fetch nothing.</p>
+    <pre data-run="js" data-expect="true | function | function | function | function | function | function | function | function | function | function" data-covers="export:drawIcicle export:drawWaffle export:drawAlluvial export:bindAlluvial export:drawArc export:bindArc export:drawBubbleMap export:bindBubbleMap export:drawHexMap export:bindHexMap"><code><span class="kw">const</span> charts = <span class="kw">await</span> import('../packages/modules/charts/index.js');
+<span class="kw">const</span> icicle = <span class="kw">await</span> import('../packages/modules/chart-icicle/index.js');
+<span class="kw">const</span> waffle = <span class="kw">await</span> import('../packages/modules/chart-waffle/index.js');
+<span class="kw">const</span> alluvial = <span class="kw">await</span> import('../packages/modules/chart-alluvial/index.js');
+<span class="kw">const</span> arc = <span class="kw">await</span> import('../packages/modules/chart-arc/index.js');
+<span class="kw">const</span> bubblemap = <span class="kw">await</span> import('../packages/modules/chart-bubblemap/index.js');
+<span class="kw">const</span> hexmap = <span class="kw">await</span> import('../packages/modules/chart-hexmap/index.js');
+
+<span class="kw">const</span> types = charts.registeredChartTypes();
+<span class="kw">return</span> [
+  ['icicle', 'waffle', 'alluvial', 'arc', 'bubblemap', 'hexmap'].every((t) =&gt; types.includes(t)),
+  typeof icicle.drawIcicle, typeof waffle.drawWaffle,
+  typeof alluvial.drawAlluvial, typeof alluvial.bindAlluvial,
+  typeof arc.drawArc, typeof arc.bindArc,
+  typeof bubblemap.drawBubbleMap, typeof bubblemap.bindBubbleMap,
+  typeof hexmap.drawHexMap, typeof hexmap.bindHexMap,
+].join(' | ');</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>.</p>
     <pre><code>import { createDataRouter } from '@toclocoinc/lattice-grid/modules/data-router';
@@ -4131,6 +4218,9 @@ router.apply([{ op: 'upsert', row }, { op: 'delete', row }]); <span class="cmt">
           <tr><td class="sig">flushStream()</td><td class="desc"><strong>v3:</strong> apply the buffered deltas now, coalesced into a single apply (a deterministic point, and for tests).</td></tr>
           <tr><td class="sig">dropped</td><td class="desc"><strong>v3:</strong> how many stale/duplicate deltas the <code>seq</code> dedupe gate has dropped.</td></tr>
           <tr><td class="sig">lastSeq() / checkpoint() / seenThrough(mark)</td><td class="desc"><strong>v3:</strong> the resume point &mdash; the highest applied <code>seq</code>, a per-record checkpoint to persist, and a way to prime it after a reconnect so an early replay is dropped.</td></tr>
+          <tr><td class="sig">subscribe(predicate, handler, opts?)</td><td class="desc"><strong>v5:</strong> route a slice to any non-grid view. <code>handler(change)</code> receives the same keyed diff <code>{ add, update, remove }</code> a grid does &mdash; drive a KPI tile, detail pane, map or form. A peer to <code>attach</code>: same partitioning and the same <code>transform</code>/<code>filter</code>/<code>sort</code>/<code>rollup</code> options; grids and charts are unchanged.</td></tr>
+          <tr><td class="sig">alert(predicate, condition, handler, { filter?, debounce?, rowKey? })</td><td class="desc"><strong>v5:</strong> watch a slice and emit rather than render. <code>condition(rows)</code> is evaluated over the slice on every load and delta; when it first becomes truthy, <code>handler(signal, rows)</code> fires. Edge-triggered (once per crossing, re-arms on release), <code>debounce</code> coalesces a burst, and it never competes for a partition or touches a grid.</td></tr>
+          <tr><td class="sig">configure(spec)</td><td class="desc"><strong>v5:</strong> the whole routing graph as one data spec &mdash; <code>routes</code> (grid/<code>default</code>/<code>subscribe</code>/<code>alert</code> entries), <code>links</code>, <code>relate</code>, <code>buffer</code> &mdash; desugared to the imperative API. Composes with imperative calls and round-trips to identical behaviour. Also accepted as <code>createDataRouter({ config })</code>.</td></tr>
           <tr><td class="sig">detach(grid)</td><td class="desc">Stop routing to a grid and forget its slice; drop any link/edge it is part of (restoring a filtered sibling). The host still owns and destroys the grid.</td></tr>
           <tr><td class="sig">destroy()</td><td class="desc">Detach every grid, drop every link, edge and subscription. <strong>Detaches only</strong> &mdash; the host owns and destroys its grids.</td></tr>
         </tbody>
@@ -4313,6 +4403,331 @@ router.apply([{ op: 'upsert', row: { id: 'o2', type: 'invoice', amt: 25 } }]);
 orders.destroy(); invoices.destroy(); rest.destroy(); router.destroy();
 <span class="kw">return</span> [fanned, moved, router.unrouted].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>
+    <pre><code>import { createGantt, computeSchedule } from '@toclocoinc/lattice-grid/modules/gantt';
+
+const plan = createGantt({
+  tasks: [
+    { id: 'design', duration: 5 },
+    { id: 'build', duration: 6 },
+    { id: 'launch', milestone: true },
+  ],
+  dependencies: [
+    { from: 'design', to: 'build', type: 'FS' },
+    { from: 'build', to: 'launch', type: 'FS' },
+  ],
+});
+plan.on('schedule', (s) =&gt; console.log(s.critical, s.projectDuration));
+plan.applyEdit({ id: 'design', duration: 7 }); // recomputes; the critical path shifts</code></pre>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Function</th><th>What it does</th></tr></thead>
+        <tbody>
+          <tr><td class="sig">createGantt({ tasks?, dependencies?, projectStart?, autoSchedule?, grid? })</td><td class="desc">Create a controller over a task list and a dependency list. Computes the CPM schedule immediately and on every edit; <code>on('schedule'|'error', fn)</code> subscribes; <code>applyEdit</code>/<code>setTasks</code>/<code>setDependencies</code> mutate and recompute; <code>grid</code> is kept for the write-back binding.</td></tr>
+          <tr><td class="sig">computeSchedule(tasks, deps?, { projectStart? })</td><td class="desc">The pure CPM engine: forward/backward passes over the leaf tasks honouring FS/SS/FF/SF + lag, slack/float and the zero-float critical path, with summaries derived and cycles refused. Returns <code>{ ok, tasks, critical, criticalPaths, projectDuration, ... }</code> or <code>{ ok:false, error }</code>.</td></tr>
+          <tr><td class="sig">findViolations(tasks, schedule)</td><td class="desc">The tasks whose user-placed start begins earlier than CPM allows (the manual-with-validation flag). Summaries, whose dates are derived, are skipped.</td></tr>
+          <tr><td class="sig">toISODate(day)</td><td class="desc">Format an engine day-number as an ISO calendar date (<code>YYYY-MM-DD</code>, UTC).</td></tr>
+          <tr><td class="sig">LINK_TYPES</td><td class="desc">The four dependency link types, in order: <code>['FS','SS','FF','SF']</code>.</td></tr>
+          <tr><td class="sig">SCHEDULE_ERROR</td><td class="desc">The error codes the engine reports rather than throwing (<code>cycle</code>, <code>duplicate-id</code>, <code>unknown-task</code>, <code>bad-duration</code>, <code>bad-link-type</code>, <code>unknown-parent</code>, <code>parent-cycle</code>, &hellip;).</td></tr>
+        </tbody>
+      </table>
+    </div>
+    <pre data-run="js" data-expect="15 | design-build-test-launch | 1970-01-01 | FS,SS,FF,SF | true | 0" data-covers="export:computeSchedule export:createGantt export:findViolations export:LINK_TYPES export:SCHEDULE_ERROR export:toISODate"><code>const { computeSchedule, findViolations, createGantt, LINK_TYPES, SCHEDULE_ERROR, toISODate } = await import('../packages/modules/gantt/index.js');
+const tasks = [
+  { id: 'design', duration: 5, percentComplete: 100 },
+  { id: 'build', duration: 6, percentComplete: 50 },
+  { id: 'test', duration: 4 },
+  { id: 'launch', milestone: true },
+];
+const deps = [
+  { from: 'design', to: 'build' },
+  { from: 'build', to: 'test' },
+  { from: 'test', to: 'launch' },
+];
+const s = computeSchedule(tasks, deps);
+const plan = createGantt({ tasks, dependencies: deps });
+const cyc = computeSchedule([{ id: 'a', duration: 1 }, { id: 'b', duration: 1 }], [{ from: 'a', to: 'b' }, { from: 'b', to: 'a' }]);
+return [plan.schedule.projectDuration, s.critical.join('-'), toISODate(0), LINK_TYPES.join(','), cyc.error.code === SCHEDULE_ERROR.CYCLE, findViolations(tasks, s).length].join(' | ');</code></pre>
+    <p>Milestones and summary (WBS) tasks: a summary is derived from its children and a dependency may target it.</p>
+    <pre data-run="js" data-expect="0 | 5 | 60 | true | 5" data-covers="export:computeSchedule"><code>const { computeSchedule } = await import('../packages/modules/gantt/index.js');
+const tasks = [
+  { id: 'phase', name: 'Phase 1' },
+  { id: 'a', duration: 3, parent: 'phase', percentComplete: 100 },
+  { id: 'b', duration: 2, parent: 'phase', percentComplete: 0 },
+  { id: 'ship', milestone: true },
+];
+const s = computeSchedule(tasks, [{ from: 'a', to: 'b' }, { from: 'phase', to: 'ship' }]);
+const phase = s.tasks.get('phase');
+return [phase.es, phase.ef, phase.percentComplete, phase.isSummary, s.tasks.get('ship').es].join(' | ');</code></pre>
+    <p>Render the plan as an SVG timeline with <code>mount(container, options)</code> &mdash; bars on a time scale, dependency arrows with a per-link-type anchor and a lag/lead label, the critical path highlighted, a today line, optional non-working-day shading, milestones as diamonds, a progress bar-fill and configurable labels. The view redraws itself whenever the schedule recomputes; <code>unmount()</code> detaches it. All geometry is computed from the schedule, so it draws identically headless or in a browser.</p>
+    <pre><code>import { createGantt } from '@toclocoinc/lattice-grid/modules/gantt';
+
+const gantt = createGantt({ tasks, dependencies });
+gantt.mount(document.querySelector('#plan'), {
+  today: 20340,             // a day-number; draws the today line
+  nonWorking: 'weekends',   // shade Saturdays and Sundays
+  label: 'percent',         // bar label: 'name' | 'percent' | 'dates' | (task) =&gt; string
+  dateAxis: true,           // axis ticks as calendar dates
+  zoom: 'week',             // 'day' | 'week' | 'month' | 'quarter' | pixels-per-day; omit to fit width
+  scrollToToday: true,      // scroll so the today line is in view
+  groupBy: 'assignee',      // swimlanes by a task property or (task) =&gt; key
+  rowHeight: 26,
+  width: 720,
+});
+gantt.view.scrollToToday();  // also callable on demand
+gantt.applyEdit({ id: 'design', duration: 7 }); // the view redraws automatically
+gantt.unmount();</code></pre>
+    <p>Bars are draggable: drag the body to move a task, drag the right edge to resize it. When a <code>grid</code> and a <code>columns</code> map are given, each drag writes the new dates back through the grid's public edit surface (<code>grid.edit.setCells</code>) and reconciles a reverted or conflicted write; <code>autoSchedule: true</code> cascades dependents. A task placed earlier than its predecessors allow is flagged (<code>findViolations</code>), not silently moved.</p>
+    <pre><code>import { createGantt } from '@toclocoinc/lattice-grid/modules/gantt';
+
+const gantt = createGantt({
+  tasks, dependencies, grid,          // a Lattice grid over the same tasks
+  columns: { start: 'start', duration: 'duration' }, // task field -> grid column
+  autoSchedule: true,
+});
+gantt.mount(document.querySelector('#plan'), { editable: true });
+// drag a bar -> gantt.applyEdit(..., { writeBack: true }) -> grid.edit.setCells(...)</code></pre>
+    <p>Hovering a bar shows a tooltip with its dates, duration, % complete and slack. Tasks are flagged when they slip: <strong>overdue</strong> (incomplete and finishing before <code>today</code>) and <strong>at-risk</strong> (negative total float). Negative float needs a target: pass a <code>deadline</code> (a day-number) to <code>createGantt</code> and any task that cannot meet it gets negative slack and is drawn at-risk.</p>
+    <p>Export: <code>gantt.toCSV()</code> writes the scheduled tasks as CSV (<code>{ dates: true }</code> for ISO dates); when a grid is bound, the grid's own Excel/CSV export works too. <code>gantt.view.toSVG()</code> serialises the drawn chart to a standalone SVG string — the handoff for turning it into an image or PDF.</p>
+    <p>Accessibility: bars are focusable and carry an <code>aria-label</code> describing the task (name, dates, progress, slack, critical). With the keyboard, arrows move a focused task, Shift+arrows resize it, and <kbd>L</kbd> links two tasks (press it on the source, then on the successor) with a finish-to-start dependency; every edit is announced in a polite live region and focus follows the edited task. Set <code>keyboard: false</code> to opt out.</p>
+    <p><strong>Split view.</strong> The Gantt does not build a grid or the two-pane layout — you create and place a normal Lattice grid over the same task rows, and the Gantt <em>consumes</em> it. Binding is two-way: a drag on the timeline writes back through the grid (cycle 3), and an edit in the grid pane (any editor) reflects on the timeline. v1 assumes both panes share the same row height; <code>view.linkVerticalScroll(el)</code> mirrors vertical scroll so the rows stay aligned.</p>
+    <pre><code>&lt;div class="split" style="display:grid;grid-template-columns:360px 1fr"&gt;
+  &lt;div id="tasks"&gt;&lt;/div&gt;   &lt;!-- the grid pane --&gt;
+  &lt;div id="plan"&gt;&lt;/div&gt;    &lt;!-- the timeline pane --&gt;
+&lt;/div&gt;
+&lt;script type="module"&gt;
+import { createGrid } from '@toclocoinc/lattice-grid';
+import { createGantt } from '@toclocoinc/lattice-grid/modules/gantt';
+
+const grid = createGrid({
+  element: document.querySelector('#tasks'),
+  columns: [{ field: 'name' }, { field: 'start', type: 'number', edit: { enabled: true } },
+            { field: 'duration', type: 'number', edit: { enabled: true } }],
+  rows: tasks, rowKey: 'id', edit: { enabled: true },
+});
+const gantt = createGantt({ tasks, dependencies, grid, columns: { start: 'start', duration: 'duration' } });
+gantt.mount(document.querySelector('#plan'));
+gantt.view.linkVerticalScroll(grid.element);   // keep the two panes aligned
+&lt;/script&gt;</code></pre>
+    <p><strong>Live data.</strong> The Gantt exposes the same consumer surface as the grid — <code>gantt.rows.apply({ add, update, remove })</code>, keyed by its <code>rowKey</code> (default <code>id</code>) — so a <a href="#datarouter">Data Router</a> attaches to it exactly as it does a grid, a board or a chart. One arriving stream can hydrate and update a whole screen, the Gantt included; each change recomputes the schedule and redraws.</p>
+    <pre><code>import { createDataRouter } from '@toclocoinc/lattice-grid/modules/data-router';
+
+const router = createDataRouter({ key: 'kind', rowKey: 'id' });
+router.attach(grid, 'order').attach(gantt, 'task');  // one feed drives both
+router.load(snapshot);                                // task rows land in the Gantt
+router.apply(deltas);                                 // updates recompute the schedule</code></pre>
+
+    <h2 id="kanban">The board (kanban) view</h2>
+    <p><code>modules/kanban</code> is an opt-in view of grid rows as <strong>cards</strong>, grouped into <strong>columns</strong> by a configurable property &mdash; a status, a stage, a state GUID, whatever the host's schema calls it. It is a separate bundle in the same shape as charts and the data router: it adds no weight to a page that does not load it, changes nothing in grid core, and pulls in no dependency. A board is <em>just another dataset viewer</em>: it consumes data through the same keyed-diff contract a grid exposes, <code>board.rows.apply({ add, update, remove })</code>, so a Data Router can <code>attach(value, board)</code> and drive a kanban beside a grid and a chart off one feed. (Distinct from the grid-core board <em>presentation mode</em>, <code>config.board</code> in §7.14, which lays a single grid's rows out as lanes; this is a standalone view module.)</p>
+    <pre><code>import { createKanban } from '@toclocoinc/lattice-grid/modules/kanban';
+
+const board = createKanban(document.querySelector('#board'), {
+  rows,                        <span class="cmt">// or { grid } to bind to a live grid; reuses its column formatters</span>
+  rowKey: 'id',
+  columnProperty: 'status',    <span class="cmt">// the group-by property (configurable)</span>
+  columns: [                   <span class="cmt">// shown even when empty; this order is honoured</span>
+    { id: 'todo', title: 'To do' },
+    { id: 'doing', title: 'In progress', wipLimit: 3 },
+    { id: 'done', title: 'Done', color: '#2e7d32' },
+  ],
+  pointsProperty: 'points',    <span class="cmt">// configurable; drives the header points sum</span>
+  showPoints: true,
+  card: { title: 'title', subtitle: 'assignee', labels: 'tags' },
+  readonly: { columns: { done: true } },     <span class="cmt">// granular: whole board / per column / per card</span>
+  onCardClick: ({ card }) =&gt; open(card.row),
+});</code></pre>
+    <p>Every structural property is named in config &mdash; <code>columnProperty</code>, <code>pointsProperty</code>, <code>orderProperty</code>, <code>swimlaneProperty</code>, <code>sprintProperty</code>, <code>epicProperty</code> &mdash; so the same board maps DemandFlow (a status field, <code>points</code>, <code>sprint</code>, <code>epic</code>, a swimlane) and any customer schema without code change. Configured columns show even when empty; a data value outside them gets its own column rather than being dropped. Each column header carries its card <strong>count</strong> and, with <code>showPoints</code>, its <strong>points sum</strong>, and is flagged when the count exceeds a column's <code>wipLimit</code>. Accessibility is built in: the board is a labelled group, each column a labelled list, each card a list item in a roving-tabindex focus ring with arrow-key navigation, and a polite live region is present for the move announcements a later cycle adds.</p>
+    <div class="table-wrap">
+      <table>
+        <thead><tr><th>Member</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td class="sig">createKanban(el, config)</td><td class="desc">Create a board. Pass a DOM element to render into, or <code>null</code> for a headless board that computes the same column/card model without a DOM.</td></tr>
+          <tr><td class="sig">columns() / column(id)</td><td class="desc">The columns with their cards and aggregates, or one column by id (<code>id</code>, <code>title</code>, <code>count</code>, <code>points</code>, <code>wipLimit</code>, <code>over</code>, <code>cards</code>).</td></tr>
+          <tr><td class="sig">count(id) / points(id)</td><td class="desc">A column's card count, and its points sum from <code>pointsProperty</code>.</td></tr>
+          <tr><td class="sig">cards() / card(key)</td><td class="desc">Every card model, or one by its key.</td></tr>
+          <tr><td class="sig">rows.apply({ add, update, remove })</td><td class="desc">The keyed-diff consumer contract a grid shares, so the board is a drop-in Data Router target. Also <code>rows.forEach</code> and <code>rows.count</code>.</td></tr>
+          <tr><td class="sig">move(keys, toColumn, toIndex?)</td><td class="desc">Move one or more cards to a column (and, with <code>orderProperty</code>, to a position within it) — the entry point behind drag-and-drop and keyboard move. Runs <code>onBeforeMove</code> first, then writes through the grid's shipped write-back path.</td></tr>
+          <tr><td class="sig">select / selection / isSelected / clearSelection</td><td class="desc">Card selection: <code>select(keys, 'set'|'add'|'toggle'|'remove')</code>, the selected keys, a membership test, and a clear. Click selects; Ctrl/Cmd toggles; Shift extends within a column.</td></tr>
+          <tr><td class="sig">collapseColumn(id) / collapseLane(id)</td><td class="desc">Collapse, expand or toggle a column or swimlane; emits <code>column:collapse</code> / <code>swimlane:collapse</code>. State survives a keyed-diff update.</td></tr>
+          <tr><td class="sig">reorderColumns(order) / moveColumn(id, before)</td><td class="desc">Reorder the columns (also done by dragging a column header); emits <code>column:reorder</code>.</td></tr>
+          <tr><td class="sig">setQuickFilter(text) / setFilter(fn) / facets(property)</td><td class="desc">Quick text search across card fields, a predicate filter, and distinct-value counts for a facet control.</td></tr>
+          <tr><td class="sig">setSprint(id) / showBacklog() / sprints()</td><td class="desc">Sprint view and switcher: show one sprint, the backlog (<code>board.BACKLOG</code> — cards with no sprint), or all; and the distinct sprint values. Emits <code>sprint:changed</code>.</td></tr>
+          <tr><td class="sig">setEpic(id) / epics() / epicRollup() / rollup(property)</td><td class="desc">Epic view and rollup: filter to an epic, list epics, and roll rows up by epic (or any property) into count, points, and progress toward the <code>done</code> columns.</td></tr>
+          <tr><td class="sig">expand(key) / closeDetail() / canExpand(card)</td><td class="desc">Pop a card's children out as a nested child grid (or board) in a drawer/modal/inline container; emits <code>card:expand</code> and <code>card:drill</code>.</td></tr>
+          <tr><td class="sig">editCard(key, field) / applyEdit(key, field, value)</td><td class="desc">Inline-edit a card field opted in with <code>card: { title: { field, edit: true } }</code>: grid-bound it commits through the grid's own field editor path (<code>grid.edit.setCells</code>); standalone it uses a host editor factory or a default input, reverting when <code>onCardEdit</code> rejects. Double-click a card to edit; emits <code>card:edit</code>.</td></tr>
+          <tr><td class="sig">addCard(columnId, seed?)</td><td class="desc">Add a card to a column (with <code>config.addCard</code>'s per-column affordance) and open it in inline edit; a host <code>onAddCard(columnId)</code> supplies the row, or one is generated (grid-bound via <code>grid.edit.addRow</code>). Emits <code>card:add</code>.</td></tr>
+          <tr><td class="sig">getState() / setState(snapshot)</td><td class="desc">Serialise and restore the board state — collapsed columns/lanes, column order, quick filter, sprint/epic selection and selection. Also accepted as <code>config.state</code> at construction.</td></tr>
+          <tr><td class="sig">setLoading(bool) / setError(message)</td><td class="desc">A loading state and a host-supplied error banner; empty columns already render their placeholder.</td></tr>
+          <tr><td class="sig">setRows(rows) / refresh()</td><td class="desc">Replace the source rows, or recompute and re-render.</td></tr>
+          <tr><td class="sig">on(name, fn) / off(name, fn)</td><td class="desc">Events: <code>card:click</code>, <code>card:dblclick</code>, <code>card:contextmenu</code>, <code>card:move</code>, <code>card:reverted</code>, <code>selection:changed</code>, <code>drag:start</code>, <code>drag:end</code> (plus the vocabulary the later cycles emit).</td></tr>
+          <tr><td class="sig">readonly(scope)</td><td class="desc">Whether a scope is readonly &mdash; the whole board, a <code>{ column }</code> or a <code>{ card }</code>. A readonly card is not draggable; a move into a readonly column is refused.</td></tr>
+          <tr><td class="sig">destroy()</td><td class="desc">Empty the element and drop the model. The host still owns any bound grid.</td></tr>
+        </tbody>
+      </table>
+    </div>
+    <p><strong>Drag-and-drop and keyboard move (write-back).</strong> Cards drag between columns (writing <code>columnProperty</code>) and within a column into a position (writing <code>orderProperty</code> with fractional ranking, so only the moved cards' order is written). The same move is available from the keyboard: focus a card, press <kbd>Space</kbd> to grab it, use the arrows to choose a target column and position (announced on a live region), <kbd>Space</kbd>/<kbd>Enter</kbd> to drop, <kbd>Escape</kbd> to cancel. Multi-select drags every selected card. A move calls <code>onBeforeMove(card, from, to, index)</code> first — return <code>false</code> (or a promise of it) to veto — then persists: <strong>grid-bound</strong>, through <code>grid.edit.setCells</code> (the same public edit-commit path inline editing and the write-back adapter use, so the grid's own pipeline owns the optimistic apply, the confirm and the revert); <strong>standalone</strong>, optimistically with a revert when <code>onCardMove</code> returns <code>false</code>/rejects. A configurable per-card <code>contextMenu</code> (an array or <code>fn(card, selected)</code>) replaces the <code>card:contextmenu</code> event when present.</p>
+    <p><strong>Swimlanes, collapse, reorder and search.</strong> Set <code>swimlanes: true</code> to render a 2D lane&times;column grid grouped by <code>swimlaneProperty</code>: one band per lane with its own count/points, columns aligned across every lane, the board scrolling vertically through lanes and horizontally through columns inside its own box. A drag across lanes writes the swimlane property too. Columns and lanes collapse (their state survives a keyed-diff update); columns reorder by dragging their header (<code>reorderColumns</code>/<code>moveColumn</code>). <code>setQuickFilter(text)</code> searches across card fields, <code>setFilter(fn)</code> applies a predicate, and <code>facets(property)</code> returns distinct-value counts to build a facet control. Naming the <code>swimlaneProperty</code> is separate from turning on the lane view, so a board can carry it for a cross-lane move without switching layout.</p>
+    <p><strong>Sprint, epic and card pop-out.</strong> <code>setSprint(id)</code> shows one sprint, <code>showBacklog()</code> the cards with no sprint, and <code>sprints()</code> feeds a switcher; <code>setEpic(id)</code> narrows to an epic and <code>epicRollup()</code> (or <code>rollup(property)</code>) returns per-epic count, points and progress toward the <code>done</code> columns. A card can <strong>pop out a nested grid of its children</strong> — an epic's stories, a story's tasks, recursively. The child relationship is a <code>childrenProperty</code> (parent-id within the dataset) and/or a <code>loadChildren(card)</code> (per-card dataset or async fetch), and the child is a full composed <code>createGrid</code> (sort/filter/edit/write-back) — supplied as <code>children.factory</code> — opened in a <code>drawer</code> (default), <code>modal</code> or <code>inline</code>. With <code>children.asBoard</code> the child is itself a board, so it can pop its own children. This reuses the grid by composition and adds no grid-core coupling. <code>expand(key)</code> and the per-card drill affordance emit <code>card:expand</code>; a deeper open emits <code>card:drill</code>.</p>
+    <p><strong>Live updates.</strong> Because the board consumes data through the same keyed-diff contract a grid does, a <a href="#datarouter">Data Router</a> drives it directly — <code>router.attach(board, predicate)</code> — and one feed fans out to a grid, a kanban, a chart and a KPI tile at once. A live <code>rows.apply({ add, update, remove })</code> is applied as a keyed diff (an unchanged card keeps its model) and re-rendered <strong>preserving</strong> scroll, focus, selection, collapsed columns/lanes and any open pop-out, so a card can appear, move or update under the user without losing their place.</p>
+    <p><strong>Scale, state and accessibility.</strong> <code>virtualize</code> renders only a scroll window of a tall column (with true-height spacers so the scrollbar stays honest), for boards of thousands of cards. <code>getState()</code>/<code>setState()</code> (and <code>config.state</code>) save and restore the collapsed columns and lanes, the column order, the quick filter and the sprint/epic selection, so a reopened board comes back as it was; <code>setLoading</code>/<code>setError</code> add loading and error states. Accessibility runs throughout: the board is a labelled group of labelled column lists, cards are a roving-tabindex focus ring (arrows to move focus, Enter to activate), the move is fully keyboard-driven (<kbd>Space</kbd> grab, arrows for column/position, <kbd>Alt</kbd>+<kbd>↑/↓</kbd> across swimlanes, <kbd>Space</kbd>/<kbd>Enter</kbd> drop, <kbd>Escape</kbd> cancel) with live-region announcements, and every affordance carries a name.</p>
+    <p><strong>Inline edit and add-card.</strong> A field is opted into inline edit with the object mapping form — <code>card: { title: { field: 'title', edit: true } }</code>. Double-clicking a card (or <code>editCard(key, field)</code>) edits it in place: <strong>grid-bound</strong>, through the grid's own field editor for that column via its public edit path, so the column's parse, validate and optimistic/confirm/revert all run; <strong>standalone</strong>, through a host <code>editor</code> factory (or a default input), reverting when <code>onCardEdit</code> rejects. A per-column add-card affordance (<code>config.addCard</code>) creates a card carrying the column's group value — from a host <code>onAddCard(columnId)</code>, or generated, or appended through <code>grid.edit.addRow</code> when bound — and opens it straight in inline edit on its title, so the user just types. The module imports nothing from the grid's DOM package: grid-bound edits ride the grid's public edit API, standalone edits use the host's editor, so a board-only page never pulls the grid in.</p>
+    <h3 id="kanban-example">A board, grouped and aggregated, executed</h3>
+    <p class="section-note">A DemandFlow-shaped set &mdash; statuses as columns, points, an empty configured column,
+    a WIP limit, and one status outside the configured set &mdash; grouped headless, then a keyed diff applied
+    through the same <code>rows.apply</code> contract the Data Router drives. Run on every build.</p>
+    <pre data-run="js" data-expect="1/3 | 2/7 | over | archived | 2/13" data-covers="export:createKanban"><code><span class="kw">const</span> { createKanban } = <span class="kw">await</span> import('../packages/modules/kanban/index.js');
+
+<span class="kw">const</span> board = createKanban(null, {
+  rows: [
+    { id: 'a', status: 'todo', points: 3, title: 'Login form' },
+    { id: 'b', status: 'doing', points: 5, title: 'OAuth' },
+    { id: 'c', status: 'doing', points: 2, title: 'Reset flow' },
+    { id: 'd', status: 'done', points: 8, title: 'Audit log' },
+    { id: 'z', status: 'archived', points: 1, title: 'Old ticket' }, <span class="cmt">// outside the configured columns</span>
+  ],
+  rowKey: 'id',
+  columnProperty: 'status',
+  columns: [
+    { id: 'todo', title: 'To do' },
+    { id: 'doing', title: 'In progress', wipLimit: 1 },
+    { id: 'done', title: 'Done' },
+    { id: 'blocked', title: 'Blocked' },   <span class="cmt">// configured but empty; still shown</span>
+  ],
+  pointsProperty: 'points',
+  card: { title: 'title' },
+});
+
+<span class="kw">const</span> todo = board.count('todo') + '/' + board.points('todo');       <span class="cmt">// 1/3</span>
+<span class="kw">const</span> doing = board.count('doing') + '/' + board.points('doing');    <span class="cmt">// 2/7</span>
+<span class="kw">const</span> over = board.column('doing').over ? 'over' : 'ok';             <span class="cmt">// over the WIP limit of 1</span>
+<span class="kw">const</span> extra = board.column('archived') ? 'archived' : 'dropped';     <span class="cmt">// an out-of-set value is kept</span>
+
+<span class="cmt">// The keyed-diff consumer contract a Data Router drives: move b to done, drop c.</span>
+board.rows.apply({ update: [{ id: 'b', status: 'done', points: 5, title: 'OAuth' }], remove: ['c'] });
+<span class="kw">const</span> done = board.count('done') + '/' + board.points('done');       <span class="cmt">// 2/13</span>
+
+board.destroy();
+<span class="kw">return</span> [todo, doing, over, extra, done].join(' | ');</code></pre>
+
+    <h3 id="kanban-move-example">Move, reorder and veto, executed</h3>
+    <p class="section-note">The move path drag-and-drop and keyboard move share: a reorder writes the order
+    property with fractional ranking, a cross-column move writes the column property, and
+    <code>onBeforeMove</code> can veto. Run headless on every build.</p>
+    <pre data-run="js" data-expect="c,a,b | done | todo" data-covers="export:createKanban"><code><span class="kw">const</span> { createKanban } = <span class="kw">await</span> import('../packages/modules/kanban/index.js');
+
+<span class="kw">const</span> board = createKanban(null, {
+  rows: [
+    { id: 'a', status: 'todo', ord: 1, title: 'A' },
+    { id: 'b', status: 'todo', ord: 2, title: 'B' },
+    { id: 'c', status: 'todo', ord: 3, title: 'C' },
+  ],
+  rowKey: 'id',
+  columnProperty: 'status',
+  columns: [{ id: 'todo' }, { id: 'doing' }, { id: 'done' }],
+  orderProperty: 'ord',
+  <span class="cmt">// Veto any move into 'doing'; allow the rest.</span>
+  onBeforeMove: (card, from, to) =&gt; to !== 'doing',
+});
+
+<span class="kw">await</span> board.move('c', 'todo', 0);          <span class="cmt">// reorder C to the top of todo</span>
+<span class="kw">const</span> order = board.column('todo').cards.map((x) =&gt; x.key).join(',');  <span class="cmt">// c,a,b</span>
+
+<span class="kw">await</span> board.move('a', 'done');             <span class="cmt">// cross-column move writes the column</span>
+<span class="kw">const</span> moved = board.card('a').columnId;    <span class="cmt">// done</span>
+
+<span class="kw">await</span> board.move('b', 'doing');            <span class="cmt">// vetoed by onBeforeMove</span>
+<span class="kw">const</span> vetoed = board.card('b').columnId;   <span class="cmt">// still todo</span>
+
+<span class="kw">return</span> [order, moved, vetoed].join(' | ');</code></pre>
+
+    <h3 id="kanban-swimlane-example">Swimlanes, collapse and search, executed</h3>
+    <p class="section-note">Lanes with per-lane aggregates, a collapsed column, a reorder, and a quick-filter —
+    all headless, run on every build.</p>
+    <pre data-run="js" data-expect="Ann 2/8 | done,todo,doing | 1" data-covers="export:createKanban"><code><span class="kw">const</span> { createKanban } = <span class="kw">await</span> import('../packages/modules/kanban/index.js');
+
+<span class="kw">const</span> board = createKanban(null, {
+  rows: [
+    { id: 1, status: 'todo', assignee: 'Ann', points: 3, title: 'Login' },
+    { id: 2, status: 'doing', assignee: 'Ann', points: 5, title: 'OAuth' },
+    { id: 3, status: 'doing', assignee: 'Bob', points: 2, title: 'Reset' },
+    { id: 4, status: 'done', assignee: 'Bob', points: 8, title: 'Audit' },
+  ],
+  rowKey: 'id',
+  columnProperty: 'status',
+  columns: [{ id: 'todo' }, { id: 'doing' }, { id: 'done' }],
+  swimlaneProperty: 'assignee',
+  swimlanes: true,
+  pointsProperty: 'points',
+  card: { title: 'title' },
+});
+
+<span class="kw">const</span> ann = board.model.lanes.find((l) =&gt; l.id === 'Ann');
+<span class="kw">const</span> lane = 'Ann ' + ann.count + '/' + ann.points;   <span class="cmt">// Ann 2/8</span>
+
+board.reorderColumns(['done', 'todo', 'doing']);
+<span class="kw">const</span> order = board.columns().map((c) =&gt; c.id).join(',');  <span class="cmt">// done,todo,doing</span>
+
+board.setQuickFilter('reset');
+<span class="kw">const</span> shown = board.model.cardsByKey.size;             <span class="cmt">// 1 (only "Reset" matches)</span>
+
+<span class="kw">return</span> [lane, order, shown].join(' | ');</code></pre>
+
+    <h3 id="kanban-sprint-example">Sprint, backlog and epic rollup, executed</h3>
+    <p class="section-note">A sprint view, the backlog, and an epic rollup with progress toward the done column —
+    headless, run on every build.</p>
+    <pre data-run="js" data-expect="2 | 1 | 10 0.5" data-covers="export:createKanban"><code><span class="kw">const</span> { createKanban } = <span class="kw">await</span> import('../packages/modules/kanban/index.js');
+
+<span class="kw">const</span> board = createKanban(null, {
+  rows: [
+    { id: 's1', status: 'todo', epic: 'E', sprint: 'S1', points: 3, title: 'Story 1' },
+    { id: 's2', status: 'done', epic: 'E', sprint: 'S1', points: 5, title: 'Story 2' },
+    { id: 's3', status: 'todo', epic: 'E', sprint: null, points: 2, title: 'Story 3' },
+  ],
+  rowKey: 'id',
+  columnProperty: 'status',
+  columns: [{ id: 'todo' }, { id: 'done', done: true }],
+  pointsProperty: 'points',
+  sprintProperty: 'sprint',
+  epicProperty: 'epic',
+});
+
+board.setSprint('S1');
+<span class="kw">const</span> inSprint = board.model.cardsByKey.size;   <span class="cmt">// 2 (s1, s2 are in S1; s3 has no sprint)</span>
+board.showBacklog();
+<span class="kw">const</span> backlog = board.model.cardsByKey.size;    <span class="cmt">// 1 (s3)</span>
+board.setSprint(undefined);
+
+<span class="kw">const</span> e = board.epicRollup()[0];
+<span class="kw">const</span> rollup = e.points + ' ' + e.progress;      <span class="cmt">// 10 0.5</span>
+
+<span class="kw">return</span> [inSprint, backlog, rollup].join(' | ');</code></pre>
+
+    <h3 id="kanban-live-example">Live, driven by a Data Router, executed</h3>
+    <p class="section-note">One feed, routed to a board through the same keyed-diff contract a grid uses:
+    a snapshot hydrates it and a delta moves a card. Run headless on every build.</p>
+    <pre data-run="js" data-expect="1,1 | 0,2" data-covers="export:createKanban"><code><span class="kw">const</span> { createKanban } = <span class="kw">await</span> import('../packages/modules/kanban/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> board = createKanban(null, {
+  rows: [], rowKey: 'id', columnProperty: 'status',
+  columns: [{ id: 'todo' }, { id: 'done' }], card: { title: 'title' },
+});
+
+<span class="kw">const</span> router = createDataRouter({ key: 'kind', rowKey: 'id' });
+router.attach(board, 'task');                <span class="cmt">// the board is a drop-in router target</span>
+router.load([
+  { id: 't1', kind: 'task', status: 'todo', title: 'T1' },
+  { id: 't2', kind: 'task', status: 'done', title: 'T2' },
+]);
+<span class="kw">const</span> hydrated = board.count('todo') + ',' + board.count('done');   <span class="cmt">// 1,1</span>
+
+router.apply([{ op: 'upsert', row: { id: 't1', kind: 'task', status: 'done', title: 'T1' } }]);
+<span class="kw">const</span> afterDelta = board.count('todo') + ',' + board.count('done'); <span class="cmt">// 0,2</span>
+
+router.destroy();
+<span class="kw">return</span> [hydrated, afterDelta].join(' | ');</code></pre>
+
     <h2 id="mocksocket">The mock socket</h2>
     <p><code>modules/mock-socket</code> is a serverless stand-in for a live <code>WebSocket</code> feed, for building and demonstrating a real-time UI with <strong>no backend</strong>. <code>MockWebSocket</code> presents the same surface as the browser's <code>WebSocket</code> &mdash; the same <code>readyState</code> and state constants, the same <code>onopen</code>, <code>onmessage</code>, <code>onclose</code> and <code>onerror</code>, <code>addEventListener</code>, <code>send</code> and <code>close</code> &mdash; so the code that reads it does not change when it is swapped for a real one. It fires an initial snapshot the moment it opens, then a stream of deltas on a timer, all from a generator you hand it. It is a dev and test utility: optional, imports nothing from the grid, and is never pulled into the core bundle. It pairs naturally with the data router (one mock stream, partitioned to many grids), but depends on it no more than a real socket does.</p>
     <pre><code>import { MockWebSocket, opsFeed } from '@toclocoinc/lattice-grid/modules/mock-socket';
@@ -4893,8 +5308,8 @@ spans.addSpan('R0', 'name', 3, 2); <span class="cmt">// rowspan 3, colspan 2</sp
 ].join('|');</code></pre>
 
     <h3 id="module-exports-example">Every module export, executed</h3>
-    <p class="section-note">Nine shipped modules, each export resolved against its own barrel on every build.</p>
-    <pre data-run="js" data-expect="66" data-covers="export:ContextMenu export:Messages export:Registry export:autoInit export:createGrid export:createLocalViewStorage export:createMessages export:createStat export:deltaOf export:gridElementsWithin export:hydrateTable export:mountPanel export:readTable export:toneOf export:Chart export:PALETTE export:SCHEMES export:TYPES export:createChart export:chartRange export:canChartRange export:deriveRangeSpec export:regressionPlots export:registerScheme export:resolveScheme export:schemeNames export:setDefaultScheme export:HTML_ROW_WARNING_THRESHOLD export:QUERY_CHANGED_EVENT export:SCROLL_NEAR_END_EVENT export:attach export:destroyWithin export:driveInfiniteScroll export:driveOobUpdates export:driveServerMode export:ingestResponse export:initWithin export:queryParams export:restoreStateWithin export:rowsFromFragment export:rowsFromJson export:saveStateWithin export:ATTRIBUTE_CONFIG export:EVENT_PREFIX export:GridElementController export:LatticeGrid export:TAG_NAME export:createLatticeGridElement export:defineLatticeGrid export:domEventName export:observedAttributeNames export:CONSOLE_ACTIVATION export:createDevtools export:expose export:EVENT_NAMES export:handlerName export:createLatticeGrid export:dashedName export:createLatticeAction export:Grid export:warnIfLargeHtmlPayload export:createDataRouter export:MockWebSocket export:rng export:opsFeed export:priceFeed"><code><span class="cmt">// Every declared export of every shipped module, resolved against its own</span>
+    <p class="section-note">Every shipped module’s exports, resolved against its own barrel on every build.</p>
+    <pre data-run="js" data-expect="67" data-covers="export:ContextMenu export:Messages export:Registry export:autoInit export:createGrid export:createLocalViewStorage export:createMessages export:createStat export:deltaOf export:gridElementsWithin export:hydrateTable export:mountPanel export:readTable export:toneOf export:Chart export:PALETTE export:SCHEMES export:TYPES export:createChart export:chartRange export:canChartRange export:deriveRangeSpec export:regressionPlots export:registerScheme export:resolveScheme export:schemeNames export:setDefaultScheme export:HTML_ROW_WARNING_THRESHOLD export:QUERY_CHANGED_EVENT export:SCROLL_NEAR_END_EVENT export:attach export:destroyWithin export:driveInfiniteScroll export:driveOobUpdates export:driveServerMode export:ingestResponse export:initWithin export:queryParams export:restoreStateWithin export:rowsFromFragment export:rowsFromJson export:saveStateWithin export:ATTRIBUTE_CONFIG export:EVENT_PREFIX export:GridElementController export:LatticeGrid export:TAG_NAME export:createLatticeGridElement export:defineLatticeGrid export:domEventName export:observedAttributeNames export:CONSOLE_ACTIVATION export:createDevtools export:expose export:EVENT_NAMES export:handlerName export:createLatticeGrid export:dashedName export:createLatticeAction export:Grid export:warnIfLargeHtmlPayload export:createDataRouter export:MockWebSocket export:rng export:opsFeed export:priceFeed export:createKanban"><code><span class="cmt">// Every declared export of every shipped module, resolved against its own</span>
 <span class="cmt">// barrel. A module that stopped exporting something fails here.</span>
 <span class="kw">const</span> modules = [
   [<span class="kw">await</span> import('../packages/dom/src/index.js'), [
@@ -4941,6 +5356,9 @@ spans.addSpan('R0', 'name', 3, 2); <span class="cmt">// rowspan 3, colspan 2</sp
   [<span class="kw">await</span> import('../packages/modules/mock-socket/index.js'), [
     'MockWebSocket', 'rng', 'opsFeed', 'priceFeed',
   ]],
+  [<span class="kw">await</span> import('../packages/modules/kanban/index.js'), [
+    'createKanban',
+  ]],
 ];
 
 <span class="kw">let</span> present = 0;

package/docs/api-detail.html

@@ -437,7 +437,7 @@
 <div class="shell">
   <aside class="rail">
     <p class="rail__brand">Lattice Grid</p>
-    <p class="rail__sub">Developer guide · v1.32.0</p>
+    <p class="rail__sub">Developer guide · v1.34.0</p>
     <nav>
       <div class="rail__group">
         <span class="rail__label">Start here</span>
@@ -6238,12 +6238,15 @@ grid.state.apply(savedView.state);
           <tr><td class="name">canChartRange</td><td class="desc">Whether <code>chartRange</code> would draw something for the grid’s current selection — the question a menu asks before offering the item.</td></tr>
           <tr><td class="name">deriveRangeSpec</td><td class="desc">Decide what a chart of a range should be without drawing it: the type, the category column, the measures, and a spec ready for <code>createChart</code>.</td></tr>
           <tr><td class="name">regressionPlots</td><td class="desc">Turn a fitted regression model into diagnostic chart specs ready for <code>createChart</code>: the fit line with its confidence band, residuals-vs-fitted, a QQ plot of the residuals, and a multicollinearity correlogram with the model’s VIF. The plots that need a per-row or per-coefficient quantity the grid has no column for (scale-location, residuals-vs-leverage, the coefficient forest) are returned as a null spec carrying the reason rather than dropped.</td></tr>
-          <tr><td class="name">createDataRouter</td><td class="desc">Split one arriving stream or dataset across many grids by what each record is — a property or a predicate — driving each grid through the public keyed <code>rows.apply</code> path so a snapshot is a diff, a delta is applied in place, a moved partition moves the row rather than duplicating it, and an unmatched record is counted, sunk and never dropped. v2 adds cross-grid selection filtering: <code>link(source, target, relation)</code> makes a selection in one grid filter what another receives — by a key map or a predicate function, multi-select as an IN set, debounced — re-pushed through the same keyed-diff path so the target stays dumb. Detaches its grids on <code>destroy</code>; the host owns them.</td></tr>
+          <tr><td class="name">createDataRouter</td><td class="desc">Split one arriving stream or dataset across many grids by what each record is — a property or a predicate — driving each grid through the public keyed <code>rows.apply</code> path so a snapshot is a diff, a delta is applied in place, a moved partition moves the row rather than duplicating it, and an unmatched record is counted, sunk and never dropped. v2 adds cross-grid selection filtering: <code>link(source, target, relation)</code> makes a selection in one grid filter what another receives — by a key map or a predicate function, multi-select as an IN set, debounced — re-pushed through the same keyed-diff path so the target stays dumb. v5 adds wedge-conversion primitives: <code>subscribe(value, handler)</code> routes a slice to any non-grid view (KPI tile, detail pane, map, form) as the same keyed diff a grid gets; <code>alert(value, condition, handler)</code> evaluates a condition over a slice and emits (edge-triggered, debounced) rather than rendering; and <code>configure(spec)</code> (or <code>createDataRouter({ config })</code>) takes the whole routing graph as one declarative data spec that desugars to the imperative API and composes with it. Detaches its grids on <code>destroy</code>; the host owns them.</td></tr>
+          <tr><td class="name">createKanban</td><td class="desc">A board (kanban) view of rows as cards, grouped into columns by a configurable property (a status, a stage, a state field), with per-column card count and an optional points sum, a WIP over-limit flag, configured columns shown even when empty, granular readonly (whole board / per column / per card), field-mapped card templates that reuse the grid’s own column formatters when a grid is bound, and the core pointer events (<code>card:click</code>, <code>card:dblclick</code>, <code>card:contextmenu</code>). It is a dataset viewer like any other: it consumes data through the same keyed-diff <code>rows.apply({ add, update, remove })</code> contract a grid exposes, so a Data Router can <code>attach(value, board)</code> and drive a kanban beside a grid and a chart off one feed. Accessibility is built in from the start — a labelled group of labelled column lists, cards in a roving-tabindex focus ring with arrow-key navigation, and a polite live region. Every structural property is named in config (<code>columnProperty</code>, <code>pointsProperty</code>, <code>orderProperty</code>, <code>swimlaneProperty</code>, <code>sprintProperty</code>, <code>epicProperty</code>) so it maps DemandFlow and any customer schema without code change. Pass <code>null</code> as the element for a headless board that computes the same model without a DOM. Cards drag between columns (writing the column property) and within a column into a position (writing the order property with fractional ranking), and the same move is keyboard-accessible — <kbd>Space</kbd> to grab, arrows to choose a target, <kbd>Space</kbd>/<kbd>Enter</kbd> to drop, <kbd>Escape</kbd> to cancel — announced on the live region; multi-select drags every selected card. A move calls <code>onBeforeMove(card, from, to, index)</code> first (return <code>false</code> to veto) and then persists through the grid’s shipped write-back path — grid-bound via <code>grid.edit.setCells</code> (the same public edit-commit path inline editing uses, so the grid’s pipeline owns optimistic apply / confirm / revert), standalone with a revert when <code>onCardMove</code> rejects — emitting <code>card:move</code>. A configurable per-card <code>contextMenu</code> replaces the <code>card:contextmenu</code> event when present. With <code>swimlanes: true</code> it renders a 2D lane&times;column grid grouped by <code>swimlaneProperty</code> (per-lane count/points, columns aligned across lanes, a cross-lane drag writing the swimlane property); columns and lanes collapse (state surviving a keyed-diff update), columns reorder by header drag, and <code>setQuickFilter</code>/<code>setFilter</code>/<code>facets</code> drive search and faceting. <code>setSprint</code>/<code>showBacklog</code>/<code>sprints</code> give a sprint view, switcher and backlog; <code>setEpic</code>/<code>epicRollup</code>/<code>rollup</code> give an epic view and rollups (count, points, progress toward the <code>done</code> columns). A card can pop out a nested grid of its children (an epic's stories, a story's tasks, recursively) via a <code>childrenProperty</code> and/or <code>loadChildren(card)</code>: the child is a full composed <code>createGrid</code> (or, with <code>asBoard</code>, a nested board) opened in a drawer/modal/inline container — reuse by composition, no grid-core coupling — emitting <code>card:expand</code>/<code>card:drill</code>. Live updates arrive through the same keyed-diff contract a grid uses, so a Data Router drives the board directly (<code>attach(board, predicate)</code>); a live <code>rows.apply</code> re-renders preserving scroll, focus, selection, collapse and any open pop-out. <code>virtualize</code> renders only a scroll window of a tall column; <code>getState</code>/<code>setState</code> (and <code>config.state</code>) save and restore collapse, order, filter and sprint/epic selection; <code>setLoading</code>/<code>setError</code> give loading and error states. The move is fully keyboard-driven — Space to grab, arrows for column/position, Alt+Up/Down across swimlanes, Space/Enter to drop, Escape to cancel — announced on a live region. A field opted in with <code>card: { title: { field, edit: true } }</code> edits inline (double-click or <code>editCard</code>): grid-bound through the grid's own field editor via its public edit path, standalone through a host editor factory or a default input with an <code>onCardEdit</code> revert; a per-column add-card (<code>config.addCard</code>/<code>onAddCard</code>, or <code>grid.edit.addRow</code>) creates a card and opens it in edit. The module imports nothing from the grid's DOM package.</td></tr>
           <tr><td class="name">createDevtools</td><td class="desc">Mount the devtools panel against a grid, including its accessibility checks.</td></tr>
+          <tr><td class="name">createGantt</td><td class="desc">Create a project-planning Gantt controller (module <code>gantt</code>) over a task list and a dependency list. A CPM engine (<code>computeSchedule</code>) computes each task's early/late start and finish, its slack and the zero-float critical path, honouring the four link types (<code>LINK_TYPES</code>: FS/SS/FF/SF) with lag, and recomputes on every edit — emitting <code>schedule</code> or, on a dependency cycle or bad input, <code>error</code> (a code from <code>SCHEDULE_ERROR</code>). Milestones are zero-duration points; summary (WBS) tasks are derived from their children (earliest start, latest finish, weighted progress) rather than scheduled; <code>findViolations</code> flags a task placed earlier than its predecessors allow, and <code>toISODate</code> maps an engine day-number back to a calendar date.</td></tr>
           <tr><td class="name">createLatticeGridElement</td><td class="desc">Build the element class without registering it, for a custom registry.</td></tr>
           <tr><td class="name">createMessages</td><td class="desc">Build a message catalogue. A partial set lays over the built-in British English one.</td></tr>
           <tr><td class="name">defineLatticeGrid</td><td class="desc">Register &amp;lt;lattice-grid&amp;gt;, or your own tag name.</td></tr>
           <tr><td class="name">defineUnit</td><td class="desc">Add one unit to a system, or override one of ours under the same name.</td></tr>
+          <tr><td class="name">registerChartType</td><td class="desc">Register an extension chart type so <code>createChart({ type })</code> can draw it (BACKLOG-0000886). Extension types ship as their own opt-in modules (e.g. <code>modules/chart-ridgeline</code>), so the base charts bundle does not grow for a type a caller never imports — you pay only for the charts you use. <code>registeredChartTypes()</code> lists what is registered.</td></tr>
           <tr><td class="name">registerModules</td><td class="desc">Install optional modules once, for every grid on the page.</td></tr>
           <tr><td class="name">registerScheme</td><td class="desc">Add a colour scheme, or replace one of ours under the same name.</td></tr>
           <tr><td class="name">restoreStateWithin</td><td class="desc">Put it back afterwards.</td></tr>