@toclocoinc/lattice-grid 1.49.0 → 1.51.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.49.0</p>
+    <p class="rail__sub">Developer guide · v1.51.0</p>
     <nav>
       <div class="rail__group">
         <span class="rail__label">Start here</span>
@@ -473,6 +473,7 @@
         <span class="rail__label">Connected grids</span>
         <a href="#pushdown">Querying an engine</a>
         <a href="#derived">Derived grids</a>
+        <a href="#derived-union">Combining several grids</a>
         <a href="#cross-filter">Cross-filtering</a>
         <a href="#joins">Joining two grids</a>
         <a href="#aggregate-safety">Aggregate safety</a>
@@ -3325,6 +3326,81 @@ createGrid(right, {
       </table>
     </div>
 
+    <h2 id="derived-union">Combining several grids into one</h2>
+    <p class="lead-in">
+      A <code>join</code> matches two grids on a shared key. Some questions have no key to share at
+      all &mdash; "the worst performers across two regional datasets" when the two regions use
+      unrelated ids &mdash; and for those, <code>from</code> takes an array of sources instead of one
+      grid: every source is read, concatenated in the order you declared them, and only then does the
+      rest of the pipeline run, once, over the combined set.
+    </p>
+    <div class="example">
+      <p class="example__label">Worst performers, two unrelated datasets</p>
+      <pre><code>createGrid(right, {
+  columns: [{ id: 'title' }, { id: 'severity', type: 'number' }, { id: '__source' }],
+  source: {
+    mode: 'derived',
+    from: [
+      { grid: eastIncidents, label: 'east' },
+      { grid: westIncidents, label: 'west', map: (row) =&gt; ({ title: row.name, severity: row.rating }) },
+    ],
+    sort: [{ col: 'severity', dir: 'desc' }],
+    limit: 10,
+  },
+});</code></pre>
+    </div>
+    <p>
+      <code>label</code> defaults to the source's position in the array (<code>'0'</code>,
+      <code>'1'</code>, &hellip;), and <code>follow</code> is independent per source &mdash; filtering
+      one narrows only its own contribution, exactly as a lone <code>from</code> follows its grid
+      today. A source with differently-named fields uses <code>map</code> to project them into a
+      common shape before it joins the rest.
+    </p>
+    <div class="why">
+      <p><strong><code>__source</code> is not optional.</strong> Every combined row carries it &mdash;
+      the entry's <code>label</code>, or its index when unlabelled &mdash; and it is an ordinary field
+      to <code>where</code>, <code>groupBy</code> and <code>select</code>. Leaving it out would mean a
+      combined list that cannot say where any row came from, which defeats most of the reason to
+      combine several sources in the first place.</p>
+      <p><strong>The union of fields, never a merge.</strong> A field only one source has is
+      <code>undefined</code> on the others' rows, not fabricated and not type-coerced &mdash; two
+      sources disagreeing about what a field means is yours to resolve with <code>map</code>, not
+      something the union guesses at. And there is no dedup: two sources reporting the same fact both
+      appear as separate rows. There is no UNION-vs-UNION-ALL distinction to draw; reach for
+      <code>join</code> when rows should be matched on a key rather than stacked.</p>
+      <p><strong>The key is namespaced, only where it needs to be.</strong> Two sources can easily
+      share row identifiers, so the derived <code>__key</code> is qualified by the source tag when
+      nothing is grouped. Grouped, <code>__key</code> is the group value exactly as it always has
+      been, and rows from different sources landing in the same group is what grouping a union is
+      <em>for</em>, not a collision.</p>
+      <p><strong>An empty source is fine; a broken one is loud.</strong> A source with no rows
+      contributes nothing. A source that throws while being read is named in a console warning and
+      skipped for that pass &mdash; a silently missing source would make "worst across both" quietly
+      wrong, so it is reported rather than swallowed.</p>
+      <p><strong>A cycle is refused when the source is built.</strong> If a union's sources include
+      the grid being derived, directly or through a chain of other derived grids, it is refused up
+      front, naming the offending source, rather than being recursed into.</p>
+      <p><strong>A union never patches &mdash; know the cost before you reach for one at scale.</strong>
+      A lone <code>from</code> maintains its grouping incrementally: an edit that names the rows it
+      touched re-reduces only the groups those rows belong to. A union does not do this for any of its
+      sources &mdash; every change on <em>any</em> parent re-reads and re-derives the <em>whole</em>
+      combined set from scratch. On a synthetic 200,000-row union across four sources, one row changed
+      on one parent cost on the order of <strong>800&nbsp;ms&ndash;3&nbsp;s</strong> (machine-dependent;
+      run <code>node bench/union-parents.mjs</code> against your own shape), against a few
+      milliseconds for the equivalent patched change on a lone <code>from</code> over the same row
+      count. And because a union is watched by as many independent change streams as it has sources,
+      that full-rescan cost is paid once <em>per source that moves</em>, not once per union &mdash;
+      four active parents each firing their own updates pay it four times over. Below a few tens of
+      thousands of combined rows this is unlikely to matter; above that, or with several sources each
+      updating on their own live feed, budget for it, keep <code>refresh</code> away from every tick
+      (<code>idle</code>, or a debounce), and prefer fewer, larger sources over many small ones where
+      the shape of your data allows it.</p>
+      <p><strong>Not supported alongside a union.</strong> <code>crossFilter</code> has no single
+      target once there is more than one parent; <code>profile</code> reduces one grid's own columns.
+      Both are refused with a warning rather than guessed at, and the top-level <code>follow</code> is
+      ignored in favour of each source's own.</p>
+    </div>
+
     <h2 id="cross-filter">Cross-filtering</h2>
     <p class="lead-in">
       A derived panel can filter the grid it summarises. Click a region in the summary and the
@@ -5982,6 +6058,162 @@ r.ok ? r.value : r.error;   <span class="cmt">// 42</span></code></pre>
       a missing <code>return</code> is a typo and deleting the whole menu is a harsh reading of
       one.</p>
     </div>
+    <h3 id="per-column-menu">Declaring a menu on the column itself</h3>
+    <p class="lead-in">
+      A cell menu can also be declared <strong>on the column</strong>, with
+      <code>contextMenu</code> on the column definition. It takes the same shapes the grid-level
+      option takes, plus a bare array for the common &ldquo;just these items here&rdquo; case:
+      <code>boolean | MenuItem[] | (params, defaults) =&gt; items</code>.
+    </p>
+    <div class="example">
+      <p class="example__label">Each column's menu logic beside the column it is about</p>
+      <pre><code>createGrid(el, {
+  columns: [
+    { field: 'account' },
+    <span class="cmt">// Just these items, here.</span>
+    { field: 'owner', contextMenu: [{ name: 'Reassign', action: reassign }] },
+    <span class="cmt">// Or the built-ins plus one, the same form the grid-level option takes.</span>
+    {
+      field: 'amount',
+      contextMenu: (params, defaults) =&gt; [
+        ...defaults,
+        { separator: <span class="kw">true</span> },
+        { name: `Reprice ${params.value}`, action: (ctx) =&gt; reprice(ctx.data) },
+      ],
+    },
+    <span class="cmt">// And nothing at all on a column nobody should act on from here.</span>
+    { field: 'nationalId', contextMenu: <span class="kw">false</span> },
+  ],
+});</code></pre>
+    </div>
+    <p class="lead-in">
+      This adds no power the grid-level option did not have &mdash; <code>params.colId</code> and
+      <code>params.column</code> always let one callback branch by column. What it adds is
+      <strong>locality</strong>: the menu for a column is declared where the column is, instead of
+      collecting into one growing <code>switch</code> a long way from the thing it is about.
+    </p>
+
+    <h4 id="per-column-menu-chain">The three levels compose as a chain</h4>
+    <p class="lead-in">
+      The built-in items go in first, then the grid-level <code>contextMenu</code>, then the
+      column's own &mdash; <strong>each handed the previous level's result as its
+      <code>defaults</code></strong>. A column that wants one extra item writes one extra item; it
+      never has to restate Paste, Clear and Fill&nbsp;down, nor whatever the grid-level builder just
+      added.
+    </p>
+    <div class="example">
+      <p class="example__label">Built-ins &rarr; grid &rarr; column, executed</p>
+      <pre data-run="js" data-expect="grid|column" data-covers="config:contextMenu"><code><span class="kw">const</span> { createTestDom, flushFrames } = <span class="kw">await</span> import('../packages/dom/src/renderer/testdom.js');
+<span class="kw">const</span> { createGrid } = <span class="kw">await</span> import('../packages/dom/src/index.js');
+<span class="kw">const</span> { root } = createTestDom({ width: 600, height: 300 });
+
+<span class="kw">let</span> handedToTheColumn = [];
+<span class="kw">const</span> grid = createGrid(root, {
+  rowKey: 'id',
+  rows: [{ id: 1, account: 'Acme', amount: 120 }],
+  columns: [
+    { field: 'account' },
+    {
+      field: 'amount',
+      contextMenu: (params, defaults) =&gt; {
+        handedToTheColumn = defaults.map((d) =&gt; d.name);
+        <span class="kw">return</span> [...defaults, { name: 'from the column', action() {} }];
+      },
+    },
+  ],
+  contextMenu: (params, defaults) =&gt; [...defaults, { name: 'from the grid', action() {} }],
+});
+flushFrames();
+
+<span class="kw">const</span> row = grid.rows.get(0);
+grid.emit('cell:contextmenu', {
+  row, key: row.key, index: 0, colId: 'amount',
+  column: grid.columns.get('amount'), value: 120,
+  event: { clientX: 10, clientY: 10, preventDefault() {} },
+});
+flushFrames();
+
+<span class="cmt">// The column builder was handed the grid builder's output, not the raw</span>
+<span class="cmt">// built-ins: 'from the grid' is already in its `defaults`.</span>
+<span class="kw">const</span> chained = handedToTheColumn.includes('from the grid');
+<span class="kw">const</span> shown = [...root.querySelectorAll('.lat-menu__item')]
+  .map((i) =&gt; String(i.textContent).trim());
+grid.destroy();
+<span class="kw">return</span> chained &amp;&amp; shown.includes('from the column') ? 'grid|column' : 'broken';</code></pre>
+    </div>
+    <p class="lead-in">
+      <strong>Suppression follows the same order, and the more specific level wins.</strong>
+      <code>contextMenu: false</code> on a column is a statement about <em>that column</em> and no
+      other. Equally, a column may declare a menu on a grid whose <code>contextMenu</code> is
+      <code>false</code> &mdash; which is how you say &ldquo;no menu anywhere except here&rdquo;.
+      <code>contextMenu: true</code> on a column means &ldquo;whatever came before&rdquo;, so it
+      restores the built-in menu on a grid that turned it off.
+    </p>
+    <table class="ref">
+      <thead><tr><th>Grid level</th><th>Column level</th><th>What opens on that column</th></tr></thead>
+      <tbody>
+        <tr><td><em>not set</em></td><td><em>not set</em></td><td>the built-in menu</td></tr>
+        <tr><td>a builder</td><td><em>not set</em></td><td>the builder's result</td></tr>
+        <tr><td>a builder</td><td>a builder</td><td>the column's builder, handed the grid builder's result</td></tr>
+        <tr><td>a builder</td><td>an array</td><td>the array &mdash; the grid level still ran, and was replaced</td></tr>
+        <tr><td>a builder, or not set</td><td><code>false</code></td><td><strong>nothing</strong> &mdash; the column suppresses, and no other column is affected</td></tr>
+        <tr><td><code>false</code></td><td><em>not set</em></td><td><strong>nothing</strong> &mdash; the grid-level off stands, as it always has</td></tr>
+        <tr><td><code>false</code></td><td>an array</td><td><strong>the column's array.</strong> The column opts back in: grid-level <code>false</code> is a default, not a lock</td></tr>
+        <tr><td><code>false</code></td><td>a builder</td><td><strong>the builder's result</strong>, handed the built-in items as its <code>defaults</code>. The column opts back in</td></tr>
+        <tr><td><code>false</code></td><td><code>true</code></td><td><strong>the built-in menu.</strong> The column opts back in and asks for the defaults</td></tr>
+      </tbody>
+    </table>
+    <div class="note">
+      <p><strong><code>contextMenu: false</code> on the grid is a default, not a lock.</strong> If
+      you set it as a safety property &mdash; a read-only grid, a screen where nobody should be
+      able to copy or clear from a right-click &mdash; be aware that a column declaring its own
+      <code>contextMenu</code> will still open one, because the more specific level wins in
+      <em>both</em> directions. That is deliberate: a read-only grid with one actionable column is a
+      real shape, and it is the only way to say &ldquo;no menu anywhere except here&rdquo;. But it
+      does mean grid-level <code>false</code> does not guarantee that no cell menu can open
+      anywhere &mdash; only that none opens unless a column asks for one. If you need the absolute
+      guarantee, do not declare <code>contextMenu</code> on any column.</p>
+    </div>
+    <div class="why">
+      <p><strong>A chain, not a replacement.</strong> If the column level replaced the grid level,
+      every column that wanted one extra item would have to restate everything the grid-level
+      builder does &mdash; and would then stop tracking it the first time it changed. This is the
+      same rule <code>columnMenu</code> already follows for the header: you are handed what came
+      before so you can add to it rather than reproduce it.</p>
+    </div>
+
+    <h4 id="per-column-menu-edges">A range, and rows that belong to no column</h4>
+    <p class="lead-in">
+      <strong>On a multi-column selection, the column you right-clicked decides.</strong> Not the
+      intersection of the selected columns' menus, which silently drops items; not their union,
+      which offers actions that are wrong for most of the selection. The clicked column is the one
+      the user pointed at, and it is the one that answers &mdash; the built-in range actions
+      (Copy, Clear, Fill&nbsp;down) still act on the whole range as they always did.
+    </p>
+    <p class="lead-in">
+      <strong>A row with no owning column falls back to the grid-level menu.</strong> Group rows,
+      pivot group rows and full-width rows do not belong to one column, so there is no column-level
+      declaration to consult; the chain simply has one fewer link and the grid-level menu stands.
+      Nothing errors and nothing silently shows an empty menu.
+    </p>
+    <p class="lead-in">
+      Every route honours the column: a right-click, and the keyboard's
+      <kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Context&nbsp;Menu</kbd> key on the focused cell.
+      The menu is a <code>role="menu"</code> of <code>role="menuitem"</code>s that takes focus and
+      closes on <kbd>Escape</kbd> wherever it was opened from.
+    </p>
+    <div class="why">
+      <p><strong>Trust is unchanged.</strong> A <code>MenuItem</code> is the same object it always
+      was, including <code>icon</code> markup being trusted at the same level as
+      <code>action</code>. Declaring one on a column changes <em>where</em> it is written, not who
+      is trusted to write it: a column definition is your code, exactly as a grid config is.</p>
+    </div>
+    <p class="lead-in">
+      A column preset or <code>columnDefaults</code> may supply <code>contextMenu</code> too, and
+      the column's own declaration outranks both &mdash; so a house rule like &ldquo;no cell menu on
+      anything tagged sensitive&rdquo; is written once.
+    </p>
+
     <p class="lead-in">
       <code>columnMenu</code> takes the same function form, for both routes into a column's menu:
       the header's 3-dot button and a right-click on the heading. Its <code>params</code> is
@@ -6643,7 +6875,8 @@ grid.import.apply(preview);</code></pre>
           <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">createKPI</td><td class="desc">A KPI / stat-tile view (module <code>kpi</code>) of a dataset as a panel of aggregate tiles — each tile a <code>sum</code>, <code>avg</code>, <code>min</code>, <code>max</code>, <code>count</code>, <code>countDistinct</code> or a <code>custom</code> reducer over the routed rows, with an optional <code>filter</code> predicate, number <code>format</code> (<code>number</code>/<code>currency</code>/<code>percent</code>/<code>compact</code>), a <code>baseline</code> for a delta, semantic threshold bands (<code>thresholds</code> with two cut points and a direction, or an explicit <code>bands</code> list, giving a <code>good</code>/<code>warn</code>/<code>critical</code> status kept separate from any accent), and an optional <code>sparkline</code> series. 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, kpi)</code> and drive a KPI panel beside a grid, a kanban and a chart off one feed. Updates are incremental — a delta adjusts each tile's running accumulator by only the rows it carries (an add contributes, a remove reverses, an update reverses-then-contributes), the two bounded exceptions being a <code>min</code>/<code>max</code> whose current extreme is removed (a rescan of that tile's own value multiset) and a <code>custom</code> reducer (recomputed over the filtered store, an arbitrary function having no inverse). Each tile is a labelled <code>&lt;figure&gt;</code>, focusable and keyboard-activatable, its value announced, the sparkline respecting <code>prefers-reduced-motion</code>; a <code>tile:click</code> event (also from the keyboard) lets a host drill down or filter a routed grid. Pass <code>null</code> as the element for a headless panel that computes the same tile model without a DOM. Not a dashboard layout engine (that is the parked dashboard generator) and no charting beyond the minimal sparkline (that is the charts module).</td></tr>
           <tr><td class="name">createAI</td><td class="desc">Create an AI narrative / insights controller (module <code>ai</code>) over a live grid. It produces a short, plain-language narrative of the grid's <em>computed</em> figures — a per-KPI / per-chart / per-column <code>explain</code>, or an <code>insights</code> panel over the current filtered view. The grid makes no AI call of its own: <code>createAI</code> imports no provider SDK, holds no key, and makes no network request; it calls one host callback, <code>ask({ system, messages, prompt, tools?, schema?, signal })</code> — your model, your key, your privacy decision — the same philosophy as the data adapters. Two grounding paths feed one guard: where the provider offers tool-use the model is given a curated read-only tool set (<code>getSchema</code>, <code>getProfile</code>, <code>getStatistics</code>, <code>getForecast</code>, <code>runQuery</code>) and the grid's own engine computes what it asks for; otherwise the module builds a facts packet from <code>grid.statistics</code>/the profile/forecasts/view counts and passes it in the prompt. Every figure in the narrative is reconciled against the values the engine produced this render — an ungrounded number is stripped before display (the number-reconciliation guard), so a hallucinated figure never reaches the user. The prompt is constrained to narrate-only; the layer is read-only and never mutates data. <code>redact</code> (a column id, a list, or a predicate) and <code>maxRows</code> bound what the module hands <code>ask()</code>, and the module sends nothing itself; an <code>ask()</code> error surfaces a friendly message and the grid stays fully usable, AI being additive rather than load-bearing. Complementary to <code>grid.ai</code> (the intent/plan skill layer): pass no <code>ask</code> and it adopts the grid's configured <code>ai.ask</code>, running the facts-packet path over it. Pass a headless grid for a DOM-free narrative; <code>facts(target)</code> returns the exact grounded packet without calling <code>ask()</code>. UMD global <code>LatticeGridAI</code>.</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">createTabs</td><td class="desc">Create a tabbed grid (module <code>tabs</code>): a <code>role="tablist"</code> strip above a stack of <code>role="tabpanel"</code> regions, each hosting its own, independently-configured <code>createGrid</code> instance — "configure each tab as per a normal grid" rather than one grid whose state is swapped (<code>ColumnModel#applyState</code> only repositions/hides/resizes existing columns by id; it carries no field, type or row data, so a state-swap only works when every tab shares one schema). <code>createGrid</code> is injected (<code>createTabs(el, { createGrid, tabs })</code>), the same pattern the React/Vue/Svelte adapters use, so the module imports no engine code and adds nothing to a page that does not load it. A tab that names <code>from: '&lt;tabId&gt;'</code> gets a <code>source: { mode: 'derived', from: &lt;the parent tab’s live grid&gt;, where, group, join, … }</code> wired for it automatically — reusing the shipped derived-source mechanism rather than a new config-inheritance one — and activating a derived tab materialises its whole ancestor chain first; a cyclic <code>from</code> graph is refused (naming the exact cycle) when <code>createTabs</code> is called, not at first click. A tab’s grid mounts on first activation and then stays alive, hidden, so its scroll/selection/filters/sort/grouping/expansion — and an open cell/row editor, left exactly as it was, uncommitted and undiscarded — survive a switch natively; <code>destroy()</code> tears every mounted tab down. The strip is a real tablist with <code>aria-selected</code>, a roving <code>tabindex</code>, and manual-activation keyboard handling (arrows/Home/End move focus, Enter/Space or a click activates). Events: <code>tab:changed</code>, a cancellable <code>beforeTabChange</code> paired with <code>tabChange:cancelled</code>. UMD global <code>LatticeGridTabs</code>.</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>