@toclocoinc/lattice-grid 1.111.4 → 1.111.6

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.111.4</p>
+    <p class="rail__sub">Developer guide · v1.111.6</p>
     <nav>
       <div class="rail__group">
         <span class="rail__label">Start here</span>
@@ -554,7 +554,7 @@
         <a href="API.html">reference tables</a> are the shorter version for when you already know.
       </p>
       <p class="chips">
-        <span class="chip">Version 1.111.4</span>
+        <span class="chip">Version 1.111.6</span>
           <span class="chip">Zero dependencies</span>
         <span class="chip">No build step</span>
       </p>
@@ -1896,7 +1896,7 @@ off();                                       <span class="cmt">// every subscrip
     </p>
     <div class="example">
       <p class="example__label">Which version am I running?</p>
-      <pre><code>grid.getVersion();          <span class="cmt">// '1.111.4'</span>
+      <pre><code>grid.getVersion();          <span class="cmt">// '1.111.6'</span>
 LatticeGrid.getVersion();   <span class="cmt">// the same, when you have no grid to hand</span></code></pre>
     </div>
     <p class="lead-in">
@@ -11319,7 +11319,7 @@ grid.import.apply(preview);</code></pre>
           <tr><td class="name">openContextMenu</td><td class="desc">The trigger helper for a context menu (module <code>contextmenu</code>): open one anchored to a <code>contextmenu</code> event (whose default it claims, so the browser’s own menu does not open over it), a <code>{ clientX, clientY }</code> point, or an element it anchors below, kept inside the viewport. <code>openContextMenu(event, { items, ctx, returnFocus: event.target })</code>.</td></tr>
           <tr><td class="name">resolveMenuItems</td><td class="desc">The pure item-resolution rule behind a context menu (module <code>contextmenu</code>): turn a raw <code>items</code> list — objects, the string <code>'separator'</code>, bare strings, or functions <code>(ctx) =&gt; item | string | null | false</code> — into the resolved entries, recursing into <code>children</code>/<code>subMenu</code>, dropping filtered-out entries and the dividers a filter leaves stray at either edge.</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. The router never opens a connection itself — it takes rows, not a URL or a socket — so the host owns the connection (a <code>WebSocket</code>, SSE, CDC, long-poll, anything) and this module owns everything once a message has arrived; see <a href="#router-websocket-guide">a live WebSocket feed</a> for the worked, runnable example. By default routing is first-match-wins (<code>overlap: false</code>); to fan one partition value to several viewers at once (a grid <em>and</em> a KPI panel <em>and</em> a chart off one feed) create the router with <code>overlap: true</code> — with the default, a second viewer on the same value receives nothing and the router emits a one-time dev warning naming the clash. 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. v3 also adds per-route reshaping — <code>transform</code>/<code>filter</code>/<code>sort</code> and <code>rollup</code> ({ groupBy, aggregate }) summaries — a relationship graph (<code>relate(edges)</code>: multi-hop, several-into-one AND, and mutual edges) that scales v2's pairwise <code>link</code>, and stream hygiene: a <code>seq</code>/version orders and de-duplicates a feed (stale/duplicate deltas dropped, counted in <code>dropped</code>), <code>push</code> with a <code>batch</code>/<code>coalesce</code> buffers a high-frequency feed (<code>flushStream</code> for a deterministic point), and <code>lastSeq</code>/<code>checkpoint</code>/<code>seenThrough</code> let the host resume precisely after its own connection drops and reconnects. v4 adds time-travel: <code>buffer({ window, max })</code> records the ordered stream into a bounded ring over a moving base, so <code>scrubTo</code> reconstructs a past point, <code>replay</code> (with <code>pause</code>/<code>resume</code>) walks a range, and <code>live</code> returns to the head — every state pushed by the same keyed diff, <code>traveling</code>/<code>buffered</code> reporting the state. v6 adds cross-tab sync: <code>broadcast({ channel })</code> mirrors the ordered, de-duplicated deltas to other tabs/windows over a BroadcastChannel with no echo loop, a popped-out grid joining the same feed with no second socket and resyncing mid-stream via the reconnect path. v7 adds query-slice routing: <code>query(adapter, request)</code> sources the router from a DFQL/DuckDB (or any pushdown) adapter, partitioning one result across the routes; a route-level <code>where</code> is pushed down where the adapter's capabilities allow and the residual finished client-side, with <code>lastQueryPlan</code> reporting the split. v8 adds write-back: a <code>writable</code> route captures the grid's committed edits off its public edit surface and routes them to <code>onWrite(change, ctx)</code> (per-route or router-global), reverting on reject, re-entering an accepted write as a delta, and surfacing a last-write-wins <code>onConflict</code>; a derived route cannot be writable. v9 adds fan-in: <code>addSource(feed, { map, key })</code> returns a per-feed handle (<code>load</code>/<code>apply</code>/<code>push</code>/<code>remove</code>) whose rows are normalized and namespaced so many feeds merge into one keyed store without id collisions, <code>removeSource</code> dropping exactly a feed's rows and <code>sources</code> listing them. v10 adds observability: <code>metrics()</code> is a cheap snapshot of per-route/per-source counts and throughput plus the global unrouted/dropped/buffered/lag figures, <code>on('metrics')</code> drives a periodic emit (off unless a listener is registered), and <code>mountDevtools(el)</code> renders a live panel from the module's own DOM file. v16 adds a SPREAD join: <code>addSource('company', { join: { from: 'companyAttr', foreignKey: 'companyId', spread: { name: 'attribute', value: 'value', prefix: 'cf_' } } })</code> turns each EAV attribute row into its own field on the parent (gaining <code>cf_industry</code>, <code>cf_tier</code> as attributes arrive), reported per route through <code>fieldsOf(ref)</code> and the <code>fields:changed</code> event so a host can add or drop grid columns as custom attributes appear and disappear. v18 adds parent-delete integrity: <code>onParentDelete: 'cascade' | 'orphan' | 'keep'</code> on a collect join or an unnest, and standalone <code>relateRows({ child, parent, foreignKey, onParentDelete, writeBack })</code>, decide what deleting a parent does to its children — <code>cascade</code> deletes them (recursively, with cycle protection), <code>orphan</code> keeps them marked <code>__orphan: true</code> and warns once, <code>keep</code> leaves them bare; cascaded deletes write back only when <code>writeBack: true</code>. 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 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>); on a standalone board (not <code>grid</code>-bound, which ignores <code>rows.apply</code> and routes to the bound grid instead) <code>rows.apply({ update })</code> merges each patch into the row already stored under its key, matching the grid's own <code>rows.apply({ update })</code> — a field the patch omits is preserved, and a patch that does change the grouping property still moves the card — while <code>add</code> sets the row outright; 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. Columns fill the board by default: <code>columnWidth: 'fill'</code> shares the width equally (never below <code>minColumnWidth</code>, default 240px), a number fixes every column at that many pixels, and <code>'auto'</code> keeps the natural token width, while a host-set <code>--lattice-board-column-width</code> still overrides. 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">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 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>); on a standalone board (not <code>grid</code>-bound, which ignores <code>rows.apply</code> and routes to the bound grid instead) <code>rows.apply({ update })</code> merges each patch into the row already stored under its key, matching the grid's own <code>rows.apply({ update })</code> — a field the patch omits is preserved, and a patch that does change the grouping property still moves the card — while <code>add</code> sets the row outright; 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. Columns fill the board by default: <code>columnWidth: 'fill'</code> shares the width equally (never below <code>minColumnWidth</code>, default 240px, and never above the optional <code>maxColumnWidth</code>, so a few columns stay left aligned at that width instead of stretching), a number fixes every column at that many pixels, and <code>'auto'</code> keeps the natural token width, while a host-set <code>--lattice-board-column-width</code> still overrides; <code>setColumnWidth</code> changes any of the three at runtime and re-flows with no remount, and a <code>minColumnWidth</code> above <code>maxColumnWidth</code> resolves to the minimum for both, with one warning. 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">createCalendar</td><td class="desc">Create a calendar viewer (module <code>calendar</code>) of rows as cards on a month grid, a week day-grid or a <code>week-time</code>/<code>day</code> time grid, keyed by a date field. Point events by default (<code>startProperty</code>); an <code>endProperty</code> turns them into multi-day spans, drawn as one continuous bar across the days they cover and clipped at the range edges. The time grid adds a vertical hour axis: a row with a start time is a block positioned at its start and sized by its end (<code>defaultDuration</code> when none), overlapping blocks split the column side by side, all-day rows stack in a top all-day row, <code>businessHours</code> shades the working span, and a now line marks the current time in the current day column. <code>slotDuration</code>, <code>slotMinTime</code>/<code>slotMaxTime</code>, <code>scrollTime</code> and <code>weekNumbers</code> tune the axis, and times read through the <code>timeZone</code> rule. The built-in header (prev/next/today, the <code>SEP 28 – OCT 4, 2026</code> / <code>SEPTEMBER 2026</code> title via <code>Intl.DateTimeFormat(locale)</code>, and the week/month toggle) renders unless <code>header: false</code>; cells grow with their cards (no inner scroll). A field-mapped <code>card</code> template plus a host <code>renderCard(row, el)</code> whose element stays mounted across updates (the async image-swap contract), <code>colorProperty</code>/<code>colorMap</code> edge colouring, <code>eventOrder</code>, <code>dayMaxEvents</code> <code>+N more</code> overflow, and granular <code>readonly</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 (plus <code>rows.get(key)</code>) a grid exposes, so a Data Router can <code>attach(value, calendar)</code> and drive a calendar beside a grid and a chart off one feed. Events: <code>card:click</code>/<code>card:dblclick</code>/<code>card:contextmenu</code> <code>{ row, key, clientX, clientY, nativeEvent }</code>, <code>card:mount</code> <code>{ row, key, el }</code>, and <code>range:change</code> <code>{ start, end, view }</code> on every prev/next/today/goTo/setView (not on a data update). Navigation: <code>prev()</code>/<code>next()</code>/<code>today()</code>/<code>goTo(date)</code>/<code>setView(view)</code>/<code>getRange()</code>. Accessibility is built in — <code>role="grid"</code> with columnheader/gridcell, a roving-tabindex focus ring, arrows by day/week (by slot in the time grid), PageUp/PageDown by period, a live region, an announced time slot on each timed block — and <code>getState()</code>/<code>setState()</code> round-trip the arrangement (<code>{ version: 2, view, date, firstDay, slotDuration, scrollTime }</code>). Pass <code>null</code> as the element for a headless calendar that computes the same model without a DOM. UMD global <code>LatticeGridCalendar</code>.</td></tr>
           <tr><td class="name">createCalendar</td><td class="desc">Create a calendar viewer (module <code>calendar</code>) of rows as cards on a month grid or a week day-grid, keyed by a date field. Point events by default (<code>startProperty</code>); an <code>endProperty</code> turns them into multi-day spans clipped at the range edges and marked continuing. The built-in header (prev/next/today, the <code>SEP 28 – OCT 4, 2026</code> / <code>SEPTEMBER 2026</code> title via <code>Intl.DateTimeFormat(locale)</code>, and the week/month toggle) renders unless <code>header: false</code>; cells grow with their cards (no inner scroll). A field-mapped <code>card</code> template plus a host <code>renderCard(row, el)</code> whose element stays mounted across updates (the async image-swap contract), <code>colorProperty</code>/<code>colorMap</code> edge colouring, <code>eventOrder</code>, <code>dayMaxEvents</code> <code>+N more</code> overflow, and granular <code>readonly</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 (plus <code>rows.get(key)</code>) a grid exposes, so a Data Router can <code>attach(value, calendar)</code> and drive a calendar beside a grid and a chart off one feed. Events: <code>card:click</code>/<code>card:dblclick</code>/<code>card:contextmenu</code> <code>{ row, key, clientX, clientY, nativeEvent }</code>, <code>card:mount</code> <code>{ row, key, el }</code>, and <code>range:change</code> <code>{ start, end, view }</code> on every prev/next/today/goTo/setView (not on a data update). Navigation: <code>prev()</code>/<code>next()</code>/<code>today()</code>/<code>goTo(date)</code>/<code>setView(view)</code>/<code>getRange()</code>, and <code>rebind(grid)</code> points a grid-bound calendar at a replacement grid after an htmx swap (a no-op on a standalone calendar). Accessibility is built in — <code>role="grid"</code> with columnheader/gridcell, a roving-tabindex focus ring, arrows by day/week, PageUp/PageDown by period, a live region — and <code>getState()</code>/<code>setState()</code> round-trip the arrangement (<code>{ version: 1, view, date, firstDay }</code>). Pass <code>null</code> as the element for a headless calendar that computes the same model without a DOM. UMD global <code>LatticeGridCalendar</code>.</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>, <code>median</code>, a <code>percentile</code> (with <code>p</code>, 0 to 1) 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>
@@ -13297,6 +13297,32 @@ return (`count ${countTodo} | cards ${cardsCount} | setColumns ${columnsAfter} |
       </p>
     </div>
 
+    <div class="example">
+      <p class="example__label">Column-width range, at construction and at runtime (BACKLOG-0005252), executed</p>
+      <pre data-run="js" data-expect="built 260,360 | after-max 260,300 | min-wins 500,500" data-covers="config:KanbanConfig.minColumnWidth config:KanbanConfig.maxColumnWidth method:kanban.setColumnWidth"><code>const { createKanban } = await import('../packages/modules/kanban/index.js');
+const b = createKanban(null, {
+  rows: [], rowKey: 'id', columnProperty: 'status', columns: [{ id: 'todo' }],
+  minColumnWidth: 260, maxColumnWidth: 360,
+});
+const built = `${b.minColumnWidth},${b.maxColumnWidth}`;
+b.setColumnWidth({ maxColumnWidth: 300 }); // minColumnWidth left alone
+const afterMax = `${b.minColumnWidth},${b.maxColumnWidth}`;
+b.setColumnWidth({ minColumnWidth: 500 }); // above maxColumnWidth: the minimum wins for both
+const minWins = `${b.minColumnWidth},${b.maxColumnWidth}`;
+return (`built ${built} | after-max ${afterMax} | min-wins ${minWins}`);
+</code></pre>
+      <p>
+        In <code>columnWidth: 'fill'</code> (the default), every expanded column shares the host width
+        equally, never below <code>minColumnWidth</code> (default 240) and never above
+        <code>maxColumnWidth</code> (default none) — a cap left columns at their natural width,
+        left aligned, rather than stretched. <code>setColumnWidth</code> changes either end (or
+        the mode itself) at runtime and re-flows in place with no remount — scroll, focus,
+        selection and an open pop-out all survive. A <code>minColumnWidth</code> raised above
+        <code>maxColumnWidth</code> resolves to the minimum for both, with one warning
+        (<code>kanban:min-max-column-width</code>) rather than an unexplained fixed width.
+      </p>
+    </div>
+
     <div class="example">
       <p class="example__label">Blocked cards and dependencies, executed</p>
       <pre data-run="js" data-expect="c true Waiting on design | b a true | filter 2 | cleared false | toggled true | ready true" data-covers="config:blockedProperty config:blockedByProperty config:blockedFilter method:kanban.setBlocked method:kanban.toggleBlocked method:kanban.setBlockedFilter"><code>const { createKanban } = await import('../packages/modules/kanban/index.js');
@@ -14905,7 +14931,7 @@ grid.licence.state();   <span class="cmt">// 'licensed' | 'localhost' | 'trial'<
 
     <footer>
       <p>
-        Lattice Grid 1.111.4 · Copyright © 2026 TOCLOCO Inc. All rights reserved.
+        Lattice Grid 1.111.6 · Copyright © 2026 TOCLOCO Inc. All rights reserved.
         Written against the shipped source. Where this guide and the code disagree, the code wins,
         please <a href="https://www.latticegrid.dev">tell us</a>.
       </p>

package/docs/warnings.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.111.4",
+  "version": "1.111.6",
   "generated": "tools/build.js from docs/warnings/catalogue.json",
   "about": "Every developer-facing diagnostic Lattice Grid prints to the console, by the key it de-duplicates on. The key is the stable identifier: it is the `id` of every reported entry `grid.diagnostics.warnings()` hands back, what the devtools panel lists, and what to quote in a support conversation. A `*` in an id stands for a value filled in at runtime (a column id, a chart id, an event name), so `icon:*` is one entry covering every column the icon renderer refuses.",
   "fields": {
@@ -14,7 +14,7 @@
     "snippet": "the smallest configuration that fixes it, where configuration is the answer",
     "docs": "the section of the API reference that covers the feature"
   },
-  "count": 780,
+  "count": 781,
   "warnings": [
     {
       "id": "ai:actorbar:no-el",
@@ -5639,6 +5639,16 @@
       "snippet": "createKanban(el, { rows, columnProperty: 'status' });",
       "docs": "api/kanban.html#kanban"
     },
+    {
+      "id": "kanban:min-max-column-width",
+      "module": "kanban",
+      "severity": "warn",
+      "since": "1.112.0",
+      "message": "\"minColumnWidth\" ({min}) is greater than \"maxColumnWidth\" ({max}); the minimum wins, and both resolve to {min}.",
+      "meaning": "The board (or a `setColumnWidth` call) configured a `minColumnWidth` greater than `maxColumnWidth`, a pair `'fill'` cannot honour both ends of — a CSS `min-width` always wins over a smaller `max-width` anyway. Rather than rendering a column at an unexplained fixed width, the minimum wins outright: both resolve to `minColumnWidth`.",
+      "fix": "Raise `maxColumnWidth` above `minColumnWidth`, or drop one of the two.",
+      "docs": "api/kanban.html#kanban"
+    },
     {
       "id": "kanban:event:*",
       "module": "kanban",

package/lattice-grid.d.ts

@@ -1,5 +1,5 @@
 /*!
- * Lattice Grid 1.111.4, type declarations
+ * Lattice Grid 1.111.6, type declarations
  * Copyright (c) 2026 TOCLOCO Inc. All rights reserved.
  * https://latticegrid.dev
  */