@toclocoinc/lattice-grid 1.98.1 → 1.98.2

package/docs/api/scheduler.html

@@ -13,7 +13,7 @@
   Self-contained: no stylesheet, script or font is fetched, so this opens from disk, from
   a file share or from behind a firewall with nothing else present.
 -->
-<title>Scheduler API Reference — Lattice Grid 1.98.1</title>
+<title>Scheduler API Reference — Lattice Grid 1.98.2</title>
 <style>
   /* ---------------------------------------------------------------
      Palette lifted from the grid's own theme, so the reference reads as an
@@ -450,11 +450,13 @@ const scheduler = createScheduler(document.querySelector('#scheduler'), {
   resources: [{ id: 'alice', name: 'Alice', role: 'Design', capacity: 4 }],
   events: [{ id: 1, resourceId: 'alice', name: 'Review', startDate: '2026-03-02 09:00', endDate: '2026-03-02 11:00' }],
   createGrid,                   // the page's own grid factory (injected, never bundled)
-  zoom: 'day',                  // 'hour' | 'day' | 'week' | 'month' | 'quarter' | px-per-day
+  zoom: 'day',                  // 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'fit' | px-per-day
+  resourceWidth: 320,           // the left resource pane's width in px (drag its divider, or setResourceWidth)
   fields: { resourceId: 'resourceId', startDate: 'startDate', endDate: 'endDate', name: 'name' },
 });</code></pre>
-    <p>The time axis reuses the Gantt's own zoom scale — <code>hour</code>, <code>day</code>, <code>week</code>, <code>month</code> and <code>quarter</code> presets, or a bare pixels-per-day number — with pointer-wheel (Ctrl+wheel) and keyboard (+/&minus;) zoom and arrow-key scrolling. A <code>todayLine</code> marks today, and with <code>nonWorking</code> (default on) each resource's own calendar shades its non-working days exactly as the Gantt shades them: a <code>'weekends'</code> string, a <code>{ workdays, holidays }</code> spec, or a name looked up in <code>calendars</code>. Overlapping events in one resource stack into sub-lanes, so a two-hour review never hides the sketch behind it. Rows and time are both virtualised — only the rows and days under the viewport (plus <code>overscan</code>) create DOM, so 500 resources &times; 20 000 events stays bounded and scrollable. An event whose start cannot be read is counted in <code>unscheduled</code> and reported once, never thrown. With <code>workload: true</code>, each row also draws a histogram band across the bottom of the time axis — one cell per zoom bucket whose fill height is the booked share of the resource's own capacity, computed by the Gantt's <code>computeWorkload</code> against the resource's own calendar and capacity. An over-allocated bucket is highlighted with the theme's danger tokens <em>and</em> a warning glyph (never colour alone), and named resource-by-resource with its periods in an accessible live-region summary, which re-derives live when <code>setEvents(events)</code> replaces the feed. Pass <code>null</code> for the element and the same model answers headlessly.</p>
+    <p>The time axis reuses the Gantt's own zoom scale — <code>hour</code>, <code>day</code>, <code>week</code>, <code>month</code> and <code>quarter</code> presets, a bare pixels-per-day number, or <code>'fit'</code> to size the pixels-per-day to the timeline's width so the plan fills it — with pointer-wheel (Ctrl+wheel) and keyboard (+/&minus;) zoom and arrow-key scrolling. Whatever the pixels-per-day, the axis picks a label granularity and format that fit (BACKLOG-0002164): shorter day names, every nth day, or week/month labels, so no two labels overlap and none is clipped at any scale. A <code>todayLine</code> marks today, and with <code>nonWorking</code> (default on) each resource's own calendar shades its non-working days exactly as the Gantt shades them: a <code>'weekends'</code> string, a <code>{ workdays, holidays }</code> spec, or a name looked up in <code>calendars</code>. Overlapping events in one resource stack into sub-lanes, so a two-hour review never hides the sketch behind it. Rows and time are both virtualised — only the rows and days under the viewport (plus <code>overscan</code>) create DOM, so 500 resources &times; 20 000 events stays bounded and scrollable. An event whose start cannot be read is counted in <code>unscheduled</code> and reported once, never thrown. With <code>workload: true</code>, each row also draws a histogram band across the bottom of the time axis — one cell per zoom bucket whose fill height is the booked share of the resource's own capacity, computed by the Gantt's <code>computeWorkload</code> against the resource's own calendar and capacity. An over-allocated bucket is highlighted with the theme's danger tokens <em>and</em> a warning glyph (never colour alone), and named resource-by-resource with its periods in an accessible live-region summary, which re-derives live when <code>setEvents(events)</code> replaces the feed. Pass <code>null</code> for the element and the same model answers headlessly.</p>
     <p><strong>Find and read the plan.</strong> A <code>groupBy</code> — a field name or a per-resource function — groups the resources into collapsible group rows, driven by the left grid's own grouping so the two panes can never disagree; the timeline mirrors the grid's expand/collapse state, and a toggle in either pane collapses the other. A <code>search</code> query narrows both sides at once, matching any string or number field of a resource or event (a row stays when its own text <em>or</em> one of its events' text matches, so a match never orphans its bar). A <code>resourceFilter</code> hides rows, an <code>eventFilter</code> hides bars, and each takes a predicate a row must pass. The Gantt's tooltip card — the same card its bars show — opens on an event's hover and keyboard focus with its start, end, duration and resource. Every bar, row, group header and the time axis is named for screen readers, and the keyboard alone reaches every event: the arrow keys walk between events and rows (roving focus), Enter activates, Home/End jump a row's ends, and +/&minus; zoom — so the scheduler passes the same accessibility audit the grid does.</p>
+    <p><strong>Resize the resource pane</strong> (BACKLOG-0002163). The left resource table's width is the documented <code>resourceWidth</code> option (default 300px). A draggable, keyboard-operable divider between the pane and the time axis resizes it live — drag the handle, or focus it and press the arrow keys (8px, or 32px with Shift) — clamped between a floor and the time axis's minimum share, and the handle is a <code>role="separator"</code> that announces its value to screen readers. The width is carried by <code>getState()</code>/<code>setState(state)</code> alongside the zoom and scroll, and <code>setResourceWidth(px)</code> sets it programmatically. When the resources are grouped, the group column adopts its own column width (or the 120px synthesised default) instead of a fixed width, so every person's name stays fully visible — or, where a column is too narrow, ellipsises with the full name as its native title, never a mid-word clip.</p>
     <p><strong>Events are editable</strong> (BACKLOG-0002124): drag a bar to move it in time, drop it onto another resource row to reassign it, drag either edge to resize it, drag over empty time in a row to create an event, and press Delete (or use the right-click menu) to delete one. Every change snaps to the zoom step, writes back through <code>events.apply</code> &mdash; so a bound dataset sees it exactly as it sees a grid edit &mdash; and is one undo step: <code>undo()</code>/<code>redo()</code> or Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z. Each change raises the one cancellable <code>beforeEventChange</code> (call <code>preventDefault()</code> to refuse it, data untouched) and then one <code>event:change</code> carrying the event id and the old and new values. <code>editable: false</code> switches editing off; an event or a resource marked <code>readOnly: true</code> &mdash; or named by <code>readOnlyWhen</code>/<code>resourceReadOnlyWhen</code> &mdash; refuses the gesture with a catalogued reason.</p>
     <div class="table-wrap">
       <table>
@@ -463,7 +465,7 @@ const scheduler = createScheduler(document.querySelector('#scheduler'), {
           <tr><td class="sig">createScheduler(el, config)</td><td class="desc">Create a scheduler. Pass a DOM element to render into, or <code>null</code> for a headless scheduler that computes the same placement and axis model.</td></tr>
           <tr><td class="sig">rows.apply({ add, update, remove }) / rows.forEach / rows.count / rows.get(key)</td><td class="desc">The keyed-diff consumer contract over the resources (the left grid's rows), keyed by <code>resourceKey</code>.</td></tr>
           <tr><td class="sig">events.apply({ add, update, remove }) / events.forEach / events.count / events.get(key)</td><td class="desc">The same keyed-diff contract over the events, keyed by <code>eventKey</code>.</td></tr>
-          <tr><td class="sig">setZoom('hour'|'day'|'week'|'month'|'quarter'|number) / getZoom()</td><td class="desc">Change the axis scale, re-render and fire <code>zoom:change</code>; a bare number is pixels-per-day and picks the tick level that reads best at that density.</td></tr>
+          <tr><td class="sig">setZoom('hour'|'day'|'week'|'month'|'quarter'|'fit'|number) / getZoom()</td><td class="desc">Change the axis scale, re-render and fire <code>zoom:change</code>; a bare number is pixels-per-day and picks the tick level that reads best at that density, and <code>'fit'</code> sizes the pixels-per-day so the plan fills the timeline width.</td></tr>
           <tr><td class="sig">groupBy / setGroupBy(field | (resource) =&gt; value)</td><td class="desc">Group the resources into collapsible group rows by a field name or function; <code>null</code> is flat. The left grid does the grouping and the timeline mirrors its collapse state.</td></tr>
           <tr><td class="sig">search / setSearch(query)</td><td class="desc">A case-insensitive query that narrows both the resource rows and the event bars, matching any string or number field (a row stays when one of its events matches).</td></tr>
           <tr><td class="sig">resourceFilter / setResourceFilter(fn)</td><td class="desc">A predicate a resource must pass to stay visible; <code>null</code> clears it.</td></tr>
@@ -477,7 +479,8 @@ const scheduler = createScheduler(document.querySelector('#scheduler'), {
           <tr><td class="sig">edit.move(key, deltaDays) / edit.reassign(key, resourceKey) / edit.resize(key, edge, day) / edit.create(resourceKey, startDay, endDay) / edit.remove(key)</td><td class="desc">The editing controller: move in time, reassign to a row, resize one edge, create and delete &mdash; each one undo step and one <code>event:change</code>, refused on a read-only event or resource.</td></tr>
           <tr><td class="sig">undo() / redo() / canUndo() / canRedo()</td><td class="desc">Step the edit history back and forth (Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z from the keyboard do the same).</td></tr>
           <tr><td class="sig">reassign(key, resourceId)</td><td class="desc">Move an event to another resource row and fire <code>change</code>; returns false for an unknown key or an unchanged resource.</td></tr>
-          <tr><td class="sig">getState() / setState(state)</td><td class="desc">Serialise and reapply the restorable view state (<code>zoom</code> and the timeline <code>scroll</code>) across browser history.</td></tr>
+          <tr><td class="sig">resourceWidth / setResourceWidth(px)</td><td class="desc">The left resource pane's width in px (default 300): the option sets it at mount, <code>setResourceWidth</code> resizes programmatically, and the draggable/keyboard divider resizes it by hand — all clamped into the pane's range and carried by <code>getState</code>.</td></tr>
+          <tr><td class="sig">getState() / setState(state)</td><td class="desc">Serialise and reapply the restorable view state (<code>zoom</code>, the timeline <code>scroll</code> and the <code>resourceWidth</code>) across browser history.</td></tr>
           <tr><td class="sig">schedulerFromGantt(el, gantt, opts) / schedulerFromRows(el, rows, opts) / schedulerFromCalendar(el, calendar, opts)</td><td class="desc">Build a scheduler over a Gantt plan's assignments (wired so a reassign writes back), a plain dataset, or a calendar's events.</td></tr>
           <tr><td class="sig">on(name, fn) / off(name, fn)</td><td class="desc">Events: <code>zoom:change</code> <code>{ level, px }</code>; <code>change</code> <code>{ id, kind, resource: { from, to }, row }</code> on a reassign; the cancellable <code>beforeEventChange</code> (veto with <code>preventDefault()</code>), <code>eventChange:cancelled</code>, and <code>event:change</code> <code>{ id, action, changes, oldValues, newValues }</code>.</td></tr>
           <tr><td class="sig">destroy()</td><td class="desc">Destroy the left grid, empty the element, remove only what the module added, and drop handlers and caches. The host still owns the element.</td></tr>
@@ -487,7 +490,7 @@ const scheduler = createScheduler(document.querySelector('#scheduler'), {
     <h3 id="scheduler-example">Placement, lanes, workload, zoom, grouping, search, editing and export, executed</h3>
     <p class="section-note">Two resources, three events (two overlapping into two sub-lanes on Alice's row), the day axis, the
     keyed-diff contract, the per-resource workload band, grouping, search and the two filters, an edit and its undo, and a print-safe SVG export of the visible range, run headless on every build.</p>
-    <pre data-run="js" data-expect="2|3|2|0|26|true|2|1|1|1|1|2|0|true|2026-03-03 09:00|2026-03-02 09:00|week|3|true|true|true|false" data-covers="export:createScheduler config:SchedulerConfig.resources config:SchedulerConfig.events config:SchedulerConfig.fields config:SchedulerConfig.resourceKey config:SchedulerConfig.eventKey config:SchedulerConfig.zoom config:SchedulerConfig.date config:SchedulerConfig.defaultDuration config:SchedulerConfig.rowHeight config:SchedulerConfig.weekStartDay config:SchedulerConfig.todayLine config:SchedulerConfig.nonWorking config:SchedulerConfig.calendars config:SchedulerConfig.workload config:SchedulerConfig.colorProperty config:SchedulerConfig.colorMap config:SchedulerConfig.ariaLabel config:SchedulerConfig.labels config:SchedulerConfig.overscan config:SchedulerConfig.groupBy config:SchedulerConfig.search config:SchedulerConfig.resourceFilter config:SchedulerConfig.eventFilter config:SchedulerConfig.editable config:SchedulerConfig.readOnlyWhen config:SchedulerConfig.resourceReadOnlyWhen"><code>const { createScheduler } = await import('../packages/modules/scheduler/index.js');
+    <pre data-run="js" data-expect="2|3|2|0|26|true|2|1|1|1|1|2|0|320|400|true|2026-03-03 09:00|2026-03-02 09:00|week|3|true|true|true|false|fit" data-covers="export:createScheduler config:SchedulerConfig.resources config:SchedulerConfig.events config:SchedulerConfig.fields config:SchedulerConfig.resourceKey config:SchedulerConfig.eventKey config:SchedulerConfig.zoom config:SchedulerConfig.date config:SchedulerConfig.defaultDuration config:SchedulerConfig.rowHeight config:SchedulerConfig.resourceWidth config:SchedulerConfig.weekStartDay config:SchedulerConfig.todayLine config:SchedulerConfig.nonWorking config:SchedulerConfig.calendars config:SchedulerConfig.workload config:SchedulerConfig.colorProperty config:SchedulerConfig.colorMap config:SchedulerConfig.ariaLabel config:SchedulerConfig.labels config:SchedulerConfig.overscan config:SchedulerConfig.groupBy config:SchedulerConfig.search config:SchedulerConfig.resourceFilter config:SchedulerConfig.eventFilter config:SchedulerConfig.editable config:SchedulerConfig.readOnlyWhen config:SchedulerConfig.resourceReadOnlyWhen"><code>const { createScheduler } = await import('../packages/modules/scheduler/index.js');
 const sched = createScheduler(null, {
   resources: [
     { id: 'alice', name: 'Alice', role: 'Design', capacity: 4, calendar: 'weekends' },
@@ -501,7 +504,7 @@ const sched = createScheduler(null, {
   fields: { resourceId: 'resourceId', startDate: 'startDate', endDate: 'endDate', name: 'name' },
   resourceKey: 'id', eventKey: 'id',
   zoom: 'day', date: '2026-03-02',
-  defaultDuration: 60, rowHeight: 34, weekStartDay: 1,
+  defaultDuration: 60, rowHeight: 34, resourceWidth: 320, weekStartDay: 1,
   todayLine: true, nonWorking: true,
   calendars: { weekends: 'weekends' },
   workload: true,
@@ -534,6 +537,9 @@ const filteredResources = sched.ctx.visibleResources.length; // 1
 sched.setResourceFilter(null);
 const wlRows = sched.workload.rows.size;                  // 2 (one band row per resource)
 const wlOver = sched.workload.overAllocated.length;       // 0 (nothing over-allocated)
+const rwBefore = sched.getState().resourceWidth;          // 320 (the configured pane width)
+sched.setResourceWidth(400);
+const rwAfter = sched.getState().resourceWidth;           // 400 (resized via the API)
 const changed = sched.edit.move(1, 1).ok;                 // true (moved one day)
 const movedStart = sched.events.get(1).startDate;         // 2026-03-03 09:00
 sched.undo();
@@ -547,8 +553,10 @@ const isSvg = /^&lt;svg /.test(svg);                      // true
 const hasBars = (svg.match(/&lt;rect /g) || []).length &gt;= 3;  // true (one bar per placed event)
 const noVar = svg.includes('var(') === false;             // true (print-safe palette, no tokens)
 const printed = sched.print();                            // false (no window to open, headless)
+sched.setZoom('fit');
+const fit = sched.getZoom().level;                        // fit (fills the timeline width)
 sched.destroy();
-return [resources, events, overlap, unscheduled, px, hasTicks, groups, matchedEvents, matchedResources, filteredEvents, filteredResources, wlRows, wlOver, changed, movedStart, undone, zoom, after, isSvg, hasBars, noVar, printed].join('|');</code></pre>
+return [resources, events, overlap, unscheduled, px, hasTicks, groups, matchedEvents, matchedResources, filteredEvents, filteredResources, wlRows, wlOver, rwBefore, rwAfter, changed, movedStart, undone, zoom, after, isSvg, hasBars, noVar, printed, fit].join('|');</code></pre>
     <h2 id="ref-scheduler-reference">Type reference</h2>
     <p class="section-note">Generated from the type declarations, so it always matches the release. Each surface lists its properties, its methods and the events it raises as three tables; an option or value type lists its members once.</p>
     <h3 id="ref-module-scheduler">The scheduler module</h3>
@@ -649,10 +657,11 @@ return [resources, events, overlap, unscheduled, px, hasTicks, groups, matchedEv
           <tr><td class="name">resourceKey</td><td class="type">string</td><td class="desc">The resource identity field. Default `'id'`. <small>(optional)</small></td></tr>
           <tr><td class="name">eventKey</td><td class="type">string</td><td class="desc">The event identity field. Default `'id'`. <small>(optional)</small></td></tr>
           <tr><td class="name">columns</td><td class="type">unknown[]</td><td class="desc">The left table's columns; defaults to name/role/capacity. <small>(optional)</small></td></tr>
-          <tr><td class="name">zoom</td><td class="type"><a href="types.html#type-SchedulerZoom">SchedulerZoom</a> <small class="literals">'hour' | 'day' | 'week' | 'month' | 'quarter' | number</small></td><td class="desc">The zoom: a preset name or px-per-day. Default `'day'`. <small>(optional)</small></td></tr>
+          <tr><td class="name">zoom</td><td class="type"><a href="types.html#type-SchedulerZoom">SchedulerZoom</a> <small class="literals">'hour' | 'day' | 'week' | 'month' | 'quarter' | 'fit' | number</small></td><td class="desc">The zoom: a preset name (`'fit'` fills the timeline width), or px-per-day. Default `'day'`. <small>(optional)</small></td></tr>
           <tr><td class="name">date</td><td class="type">Date | string | number</td><td class="desc">The anchor date the axis centres on. Default the earliest event start, else today. <small>(optional)</small></td></tr>
           <tr><td class="name">defaultDuration</td><td class="type">number</td><td class="desc">The minutes an event without an end runs. Default 60. <small>(optional)</small></td></tr>
           <tr><td class="name">rowHeight</td><td class="type">number</td><td class="desc">The row height in px. Default 34. <small>(optional)</small></td></tr>
+          <tr><td class="name">resourceWidth</td><td class="type">number</td><td class="desc">The resource pane's width in px (the left table). Default 300; drag the divider or use `setResourceWidth` to change it. <small>(optional)</small></td></tr>
           <tr><td class="name">locale</td><td class="type">string</td><td class="desc">BCP-47 locale for tick labels. <small>(optional)</small></td></tr>
           <tr><td class="name">timeZone</td><td class="type">string</td><td class="desc">IANA time-zone name for tick labels. Default UTC. <small>(optional)</small></td></tr>
           <tr><td class="name">weekStartDay</td><td class="type">number</td><td class="desc">Week-start weekday, 0=Sun…6=Sat. <small>(optional)</small></td></tr>
@@ -784,12 +793,13 @@ return [resources, events, overlap, unscheduled, px, hasTicks, groups, matchedEv
         <tbody>
           <tr><td class="name">refresh</td><td class="type">(): <a href="#type-Scheduler">Scheduler</a></td><td class="desc">&mdash;</td><td class="type"><code><a href="#type-Scheduler">Scheduler</a></code></td><td class="desc">Re-seed from the config arrays (unless a diff landed) and re-render.</td></tr>
           <tr><td class="name">setEvents</td><td class="type">(events: <a href="types.html#type-SchedulerRow">SchedulerRow</a>[]): <a href="#type-Scheduler">Scheduler</a></td><td class="desc"><code>events: <a href="types.html#type-SchedulerRow">SchedulerRow</a>[]</code></td><td class="type"><code><a href="#type-Scheduler">Scheduler</a></code></td><td class="desc">Replace every event and re-render, keyed by `eventKey`.</td></tr>
-          <tr><td class="name">setZoom</td><td class="type">(zoom: <a href="types.html#type-SchedulerZoom">SchedulerZoom</a>): <a href="#type-Scheduler">Scheduler</a></td><td class="desc"><code>zoom: <a href="types.html#type-SchedulerZoom">SchedulerZoom</a></code></td><td class="type"><code><a href="#type-Scheduler">Scheduler</a></code></td><td class="desc">Change the zoom and re-render, firing `zoom:change`.</td></tr>
-          <tr><td class="name">getZoom</td><td class="type">(): { level: string; px: number }</td><td class="desc">&mdash;</td><td class="type"><code>{ level: string; px: number }</code></td><td class="desc">The current zoom `{ level, px }`.</td></tr>
+          <tr><td class="name">setZoom</td><td class="type">(zoom: <a href="types.html#type-SchedulerZoom">SchedulerZoom</a>): <a href="#type-Scheduler">Scheduler</a></td><td class="desc"><code>zoom: <a href="types.html#type-SchedulerZoom">SchedulerZoom</a></code></td><td class="type"><code><a href="#type-Scheduler">Scheduler</a></code></td><td class="desc">Change the zoom and re-render, firing `zoom:change`. `'fit'` fills the timeline width.</td></tr>
+          <tr><td class="name">getZoom</td><td class="type">(): { level: string; px: number }</td><td class="desc">&mdash;</td><td class="type"><code>{ level: string; px: number }</code></td><td class="desc">The current zoom `{ level, px }` — `level` is `'fit'` when zoomed to fit.</td></tr>
           <tr><td class="name">setGroupBy</td><td class="type">(groupBy: string | ((resource: <a href="types.html#type-SchedulerRow">SchedulerRow</a>) =&gt; unknown) | null): <a href="#type-Scheduler">Scheduler</a></td><td class="desc"><code>groupBy: string | ((resource: <a href="types.html#type-SchedulerRow">SchedulerRow</a>) =&gt; unknown) | null</code></td><td class="type"><code><a href="#type-Scheduler">Scheduler</a></code></td><td class="desc">Group the resources by a field or function, re-mounting the left grid.</td></tr>
           <tr><td class="name">setSearch</td><td class="type">(query: string): <a href="#type-Scheduler">Scheduler</a></td><td class="desc"><code>query: string</code></td><td class="type"><code><a href="#type-Scheduler">Scheduler</a></code></td><td class="desc">Set the search query that narrows rows and bars; `''` clears it.</td></tr>
           <tr><td class="name">setResourceFilter</td><td class="type">(fn: ((resource: <a href="types.html#type-SchedulerRow">SchedulerRow</a>) =&gt; unknown) | null): <a href="#type-Scheduler">Scheduler</a></td><td class="desc"><code>fn: ((resource: <a href="types.html#type-SchedulerRow">SchedulerRow</a>) =&gt; unknown) | null</code></td><td class="type"><code><a href="#type-Scheduler">Scheduler</a></code></td><td class="desc">Set the resource filter; `null` clears it.</td></tr>
           <tr><td class="name">setEventFilter</td><td class="type">(fn: ((event: <a href="types.html#type-SchedulerRow">SchedulerRow</a>) =&gt; unknown) | null): <a href="#type-Scheduler">Scheduler</a></td><td class="desc"><code>fn: ((event: <a href="types.html#type-SchedulerRow">SchedulerRow</a>) =&gt; unknown) | null</code></td><td class="type"><code><a href="#type-Scheduler">Scheduler</a></code></td><td class="desc">Set the event filter; `null` clears it.</td></tr>
+          <tr><td class="name">setResourceWidth</td><td class="type">(width: number): <a href="#type-Scheduler">Scheduler</a></td><td class="desc"><code>width: number</code></td><td class="type"><code><a href="#type-Scheduler">Scheduler</a></code></td><td class="desc">Resize the resource pane to a pixel width, clamped into the divider's range.</td></tr>
           <tr><td class="name">toggleGroup</td><td class="type">(value: unknown): <a href="#type-Scheduler">Scheduler</a></td><td class="desc"><code>value: unknown</code></td><td class="type"><code><a href="#type-Scheduler">Scheduler</a></code></td><td class="desc">Expand or collapse one group by its value.</td></tr>
           <tr><td class="name">undo</td><td class="type">(opts?: { origin?: string }): boolean</td><td class="desc"><code>opts?: { origin?: string }</code></td><td class="type"><code>boolean</code></td><td class="desc">Undo the most recent edit.</td></tr>
           <tr><td class="name">redo</td><td class="type">(opts?: { origin?: string }): boolean</td><td class="desc"><code>opts?: { origin?: string }</code></td><td class="type"><code>boolean</code></td><td class="desc">Redo the most recently undone edit.</td></tr>
@@ -801,7 +811,7 @@ return [resources, events, overlap, unscheduled, px, hasTicks, groups, matchedEv
           <tr><td class="name">toPNG</td><td class="type">(pngOpts?: { range?: { from?: number | string | Date; to?: number | string | Date }; scale?: number; background?: string; }): Promise&lt;Blob | null&gt;</td><td class="desc"><code>pngOpts?: { range?: { from?: number | string | Date; to?: number | string | Date }; scale?: number; background?: string; }</code></td><td class="type"><code>Promise&lt;Blob | null&gt;</code></td><td class="desc">This scheduler as a PNG (BACKLOG-0002128): `toSVG` rasterised through a canvas. Makes no network request. `null` when nothing is laid out or there is no canvas to rasterise with.</td></tr>
           <tr><td class="name">print</td><td class="type">(printOpts?: { paper?: 'A4' | 'Letter' | 'A3'; orientation?: 'landscape' | 'portrait'; fitToWidth?: boolean; scale?: number; title?: string | false; header?: string | ((page: number, pages: number) =&gt; string) | false; footer?: string | ((page: number, pages: number) =&gt; string) | false; }): boolean</td><td class="desc"><code>printOpts?: { paper?: 'A4' | 'Letter' | 'A3'; orientation?: 'landscape' | 'portrait'; fitToWidth?: boolean; scale?: number; title?: string | false; header?: string | ((page: number, pages: number) =&gt; string) | false; footer?: string | ((page: number, pages: number) =&gt; string) | false; }</code></td><td class="type"><code>boolean</code></td><td class="desc">Print this scheduler — the resource table, the time axis and the bars — paged and scaled (BACKLOG-0002128): the table header and time header repeat on every page and no row is split across a page boundary. Opens the browser's own print path over a standalone document; "PDF" is whatever the browser's print dialog offers ("Save as PDF") — no server, no dependency. Always prints in a fixed, print-safe light palette, independent of the mounted theme.</td></tr>
           <tr><td class="name">reassign</td><td class="type">(key: unknown, resourceId: unknown): boolean</td><td class="desc"><code>key: unknown</code><br><code>resourceId: unknown</code></td><td class="type"><code>boolean</code></td><td class="desc">Move an event to another resource row and fire `change` (`{ id, kind: 'reassign', resource: { from, to }, row }`). Returns false when the event key is unknown or the resource is unchanged.</td></tr>
-          <tr><td class="name">getState</td><td class="type">(): { version: number; zoom: string; scroll: { left: number; top: number } }</td><td class="desc">&mdash;</td><td class="type"><code>{ version: number; zoom: string; scroll: { left: number; top: number } }</code></td><td class="desc">Serialise the restorable view state: `{ version, zoom, scroll }`.</td></tr>
+          <tr><td class="name">getState</td><td class="type">(): { version: number; zoom: string; scroll: { left: number; top: number }; resourceWidth: number }</td><td class="desc">&mdash;</td><td class="type"><code>{ version: number; zoom: string; scroll: { left: number; top: number }; resourceWidth: number }</code></td><td class="desc">Serialise the restorable view state: `{ version, zoom, scroll, resourceWidth }`.</td></tr>
           <tr><td class="name">setState</td><td class="type">(state: object): <a href="#type-Scheduler">Scheduler</a></td><td class="desc"><code>state: object</code></td><td class="type"><code><a href="#type-Scheduler">Scheduler</a></code></td><td class="desc">Reapply a state snapshot from {@link Scheduler.getState}.</td></tr>
           <tr><td class="name">destroy</td><td class="type">(): void</td><td class="desc">&mdash;</td><td class="type"><code>void</code></td><td class="desc">Tear the scheduler down.</td></tr>
         </tbody>

package/docs/api/shell.html

@@ -13,7 +13,7 @@
   Self-contained: no stylesheet, script or font is fetched, so this opens from disk, from
   a file share or from behind a firewall with nothing else present.
 -->
-<title>Shell API Reference — Lattice Grid 1.98.1</title>
+<title>Shell API Reference — Lattice Grid 1.98.2</title>
 <style>
   /* ---------------------------------------------------------------
      Palette lifted from the grid's own theme, so the reference reads as an

package/docs/api/tabs.html

@@ -13,7 +13,7 @@
   Self-contained: no stylesheet, script or font is fetched, so this opens from disk, from
   a file share or from behind a firewall with nothing else present.
 -->
-<title>Tabs API Reference — Lattice Grid 1.98.1</title>
+<title>Tabs API Reference — Lattice Grid 1.98.2</title>
 <style>
   /* ---------------------------------------------------------------
      Palette lifted from the grid's own theme, so the reference reads as an

package/docs/api/types.html

@@ -13,7 +13,7 @@
   Self-contained: no stylesheet, script or font is fetched, so this opens from disk, from
   a file share or from behind a firewall with nothing else present.
 -->
-<title>Types API Reference — Lattice Grid 1.98.1</title>
+<title>Types API Reference — Lattice Grid 1.98.2</title>
 <style>
   /* ---------------------------------------------------------------
      Palette lifted from the grid's own theme, so the reference reads as an
@@ -3564,8 +3564,8 @@
     <p class="type-def"><code>type SchedulerRow = Record&lt;string, unknown&gt;</code></p>
     <p class="section-note"><small>Declared in <code>lattice-grid/modules/scheduler</code>.</small></p>
     <h4 id="type-SchedulerZoom">SchedulerZoom</h4>
-    <p class="section-note">A scheduler zoom level name, or a bare pixels-per-day number.</p>
-    <p class="type-def"><code>type SchedulerZoom = 'hour' | 'day' | 'week' | 'month' | 'quarter' | number</code></p>
+    <p class="section-note">A scheduler zoom level name (`'fit'` sizes px-per-day to the timeline width), or a bare pixels-per-day number.</p>
+    <p class="type-def"><code>type SchedulerZoom = 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'fit' | number</code></p>
     <p class="section-note"><small>Declared in <code>lattice-grid/modules/scheduler</code>.</small></p>
     <h4 id="type-ScrollbarMode">ScrollbarMode</h4>
     <p class="section-note">How the grid's scroll viewport draws its scrollbars (BACKLOG-0000990, BACKLOG-0001288). `auto` is the platform's native behaviour — overlay scrollbars fade away when idle. `always` keeps that native bar shown whether or not the pointer is over the grid, so the affordance never disappears on a touchpad or an overlay OS. `custom` replaces it with a bar the grid draws itself: the same size, colour and hit area in every browser, sized by the `--lattice-scrollbar-*` tokens, for a target bigger than the platform's own thin overlay ribbon.</p>

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.98.1</p>
+    <p class="rail__sub">Developer guide · v1.98.2</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.98.1</span>
+        <span class="chip">Version 1.98.2</span>
           <span class="chip">Zero dependencies</span>
         <span class="chip">No build step</span>
       </p>
@@ -1866,7 +1866,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.98.1'</span>
+      <pre><code>grid.getVersion();          <span class="cmt">// '1.98.2'</span>
 LatticeGrid.getVersion();   <span class="cmt">// the same, when you have no grid to hand</span></code></pre>
     </div>
     <p class="lead-in">
@@ -10804,6 +10804,14 @@ return boundCount + '|' + routed;</code></pre>
       <p><strong>Overlaps stack, not collide.</strong> Events that share a resource and a span split
       into sub-lanes, so two events in one row sit side by side. A bar's colour comes from
       <code>colorProperty</code> and <code>colorMap</code>.</p>
+      <p><strong>The resource pane resizes.</strong> The left table's width is the
+      <code>resourceWidth</code> option (300px default), resized live by a draggable,
+      keyboard-operable divider between it and the time axis, or programmatically with
+      <code>setResourceWidth(px)</code>; the width is carried by
+      <code>getState()</code>/<code>setState()</code> so a restored view keeps it. When the resources
+      are grouped, the group column honours its own column width instead of a fixed one, so a
+      person's name stays fully visible &mdash; or, in a column too narrow for it, ellipsises with the
+      full name as its native title, never a mid-word clip.</p>
       <p><strong>Find and read the plan.</strong> A <code>groupBy</code> &mdash; a field name or a
       per-resource function &mdash; groups the resources into collapsible rows, driven by the left
       grid's own grouping so the two panes can never disagree, and a <code>search</code> query narrows
@@ -12957,7 +12965,7 @@ grid.licence.state();   <span class="cmt">// 'licensed' | 'localhost' | 'trial'<
 
     <footer>
       <p>
-        Lattice Grid 1.98.1 · Copyright © 2026 TOCLOCO Inc. All rights reserved.
+        Lattice Grid 1.98.2 · 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.98.1",
+  "version": "1.98.2",
   "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": {

package/lattice-grid.d.ts

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