Gantt API Reference

API reference › The Gantt module

All 29 pages Everything on one page → Developer guide →

The Gantt module

modules/gantt is a separate, opt-in project-planning module - its own bundle, imported only when you want it, changing nothing in the grid core. It turns a task list into a real schedule: a CPM (Critical Path Method) engine computes each task's early/late start and finish, its slack (total float), and the zero-float critical path, recomputing on every edit. computeSchedule(tasks, deps) is the pure engine; createGantt(opts) is a controller that holds the model, recomputes on setTasks/setDependencies/applyEdit, and emits schedule (or error). Dependencies are the four standard link types - LINK_TYPES is ['FS','SS','FF','SF'] - each with optional lag/lead. A milestone is a zero-duration task scheduled as a point; a summary task (any task named as another's parent) is derived from its children (start = earliest child, end = latest child, duration-weighted progress) and is not scheduled itself. Bad input never throws or loops: a dependency cycle is refused and reported with a code from SCHEDULE_ERROR, and findViolations flags any task placed earlier than its predecessors allow. toISODate converts an engine day-number back to a calendar date for display.

Touch. Task bars move and resize by a pointer gesture, so they work on phones and tablets as well as with a mouse. A mouse drag starts on movement; a touch or pen drag starts after a short press-and-hold on the bar (or on its right end, to resize), so an ordinary swipe still scrolls the timeline and the task table. Holding near the timeline's edge scrolls it, and the drop lands on the day under the finger. Escape or a second finger cancels the drag and restores the bar; the scheduling cascade, constraints and locks apply exactly as for a mouse drag. The two resize ends, the progress handle and a dependency-link connector work the same press-and-hold way and, on a coarse pointer, each gets an invisible hit area at least 24×24 CSS px without moving its drawn mark.

Feed it the rows you already have. fields names your own task properties for the scheduler - { id: 'taskId', start: 'startDate', name: 'jobName', duration: 'dur' }, each a field name or a reader (row) => value - so a task list arrives as it is rather than being renamed first. The vocabulary is id, name, start, end, duration, milestone, percentComplete, parent, baselineStart, baselineEnd, constraint and constraintDate; anything you leave unmapped reads its canonical name, so an existing plan is unaffected. rowKey reaches the scheduler too, so a row carrying taskId and no id is identified by it - a task's own id still wins where it has one. It is a read mapping: applyEdit and level() write the canonical property, so each says so plainly rather than writing to a field the schedule is not read from, and assignee/cost/actualCost belong to the resource and earned-value layers rather than to this list.

import { createGantt, computeSchedule } from '@toclocoinc/lattice-grid/modules/gantt';

const plan = createGantt({
  tasks: [
    { id: 'design', duration: 5 },
    { id: 'build', duration: 6 },
    { id: 'launch', milestone: true },
  ],
  dependencies: [
    { from: 'design', to: 'build', type: 'FS' },
    { from: 'build', to: 'launch', type: 'FS' },
  ],
});
plan.on('schedule', (s) => console.log(s.critical, s.projectDuration));
plan.applyEdit({ id: 'design', duration: 7 }); // recomputes; the critical path shifts

Effort-driven scheduling. A task's schedulingMode - 'fixedDuration' (the default), 'fixedEffort' or 'fixedUnits' - decides which of the three quantities in effort = duration × Σ units × hours​PerDay is held when another changes, set per task or as the createGantt default. On a fixedEffort task the duration is derived from the stated effort and the assigned resources' hours, so adding a resource shortens it; the duration is recomputed once, before the critical path, so the schedule, level(), the workload band and earned value all read the one number. reconcileEffort is the pure rule every edit funnels through; MODE 0/1/2 and EffortDriven round-trip through MSPDI.

const { createGantt, computeSchedule, reconcileEffort, resolveSchedulingMode, SCHEDULING_MODES } = await import('../packages/modules/gantt/index.js');

// SCHEDULING_MODES lists the three; a host spelling resolves to one of them.
const mode = resolveSchedulingMode('fixed-effort'); // 'fixedEffort'
if (!SCHEDULING_MODES.includes(mode)) throw new Error('unknown mode');

// A 40-hour fixed-effort task: a full-timer (8h/day) finishes it in 5 days.
const full = createGantt({
  tasks: [{ id: 'A', schedulingMode: mode, effort: 40, assignments: [{ resource: 'ren', units: 1 }] }],
  resources: [{ id: 'ren', calendar: { hoursPerDay: 8 } }],
  hoursPerDay: 8,
});
const fullDays = full.compute().tasks.get('A').duration;

// A part-timer (4h/day) accrues the same 40 hours over twice as long - 10 days.
const part = createGantt({
  tasks: [{ id: 'A', schedulingMode: mode, effort: 40, assignments: [{ resource: 'sam', units: 1 }] }],
  resources: [{ id: 'sam', calendar: { hoursPerDay: 4 } }],
  hoursPerDay: 8,
});
const partDays = part.compute().tasks.get('A').duration;

// Adding a second full unit to the full-timer's task halves its duration.
const added = reconcileEffort({ mode, duration: 5, units: 1, hoursPerDay: 8 }, { field: 'addResource', units: 1 });

// computeSchedule is the pure engine behind the controller.
const direct = computeSchedule(
  [{ id: 'A', schedulingMode: mode, effort: 40, assignments: [{ resource: 'ren', units: 1 }] }],
  [], { hoursPerDay: 8, resourceHours: new Map([['ren', 8]]) },
).tasks.get('A').duration;

full.destroy(); part.destroy();
return `full ${fullDays}, part ${partDays}, +resource ${added.duration}`;

Assigning resources. In the split view the assignee cell is a button that opens an assignment picker: a searchable, multi-select list of resources, each showing its load over the task's dates, a units percentage per assignment (100 by default) and a remove button. The load comes from the same computeResourceLoad as the workload band - previewAssignments(id, roster) runs it with that one task's roster swapped, so an over-allocating choice is announced (in a polite live region) before it is committed. Apply sends the whole roster as one applyEdit({ id, assignments }): the task reschedules once per its schedulingMode, the write-back follows the plan's columns and fields, and it is a single change event. The picker is a listbox you can drive from the keyboard (arrows, Enter, Escape, Tab stays inside). Add 'effort' and 'units' to the split view's columns for two optional columns that edit through the same applyEdit rule.

Single-assignee mode. A task states assignmentPicker: { max, units } to shape its own picker. max: 1 makes the roster single-assignee: choosing a second resource replaces the first (a larger max drops the oldest entry once the roster is full), and the list's aria-multiselectable reflects it. units shows the per-assignment percent field - the default since the picker shipped, so units: false renders rows without it. The roster is still committed as one applyEdit({ assignments }).

const { createGantt } = await import('../packages/modules/gantt/index.js');

const plan = createGantt({
  projectStart: '2027-01-04',
  resources: { Ann: 1, Bob: 1 },
  tasks: [
    { id: 'bob-busy', name: 'Bob is busy', start: '2027-01-04', duration: 4, assignee: 'Bob' },
    { id: 'build', name: 'Build', start: '2027-01-04', duration: 4, schedulingMode: 'fixedEffort',
      assignments: [{ resource: 'Ann', units: 1 }] },
  ],
});
let events = 0;
plan.on('schedule', () => { events += 1; });

// What the picker shows before anything is committed: the load with Bob added.
const roster = [{ resource: 'Ann', units: 1 }, { resource: 'Bob', units: 1 }];
const preview = plan.previewAssignments('build', roster);
const over = preview.overAllocations.find((o) => o.resource === 'Bob');
const warning = `over ${over.resource} ${over.load * 100}% of ${over.capacity * 100}%`;

// Apply: one edit, one change event; fixed-effort, so two people halve the duration.
plan.applyEdit({ id: 'build', assignments: roster });
const build = plan.schedule.tasks.get('build');
const out = `${warning}; duration ${build.duration}, effort ${build.effort}, events ${events}`;
plan.destroy();
return out;

const { createTestDom, TestEvent } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root, document } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  resources: { Ann: 1, Bob: 1 },
  tasks: [
    { id: 'build', name: 'Build', start: '2027-01-04', duration: 4,
      assignmentPicker: { max: 1, units: true }, assignee: 'Ann' },
  ],
});
const view = gantt.mountSplit(root, { columns: ['name', 'assignee', 'units'] });
const NS = 'lat-gantt-split';
const click = (el) => el.dispatchEvent(new TestEvent('click', { bubbles: true }));
// Open the picker and choose Bob: max: 1 replaces Ann rather than adding to her.
click(root.querySelector('[data-picker-for="build"]'));
const option = (name) => [...document.querySelectorAll('[role="option"]')]
  .find((o) => o.getAttribute('data-resource') === name);
click(option('Bob'));
const chosen = [...document.querySelectorAll('.' + NS + '__picker-row')]
  .map((row) => row.getAttribute('data-resource'));
const units = document.querySelector('.' + NS + '__picker-units') ? 'shown' : 'hidden';
click(document.querySelector('.' + NS + '__picker-apply'));
const roster = gantt.taskById('build').assignments;
view.destroy();
return `chosen ${chosen.join('+')}; units ${units}; roster ${roster.map((a) => `${a.resource} ${a.units * 100}%`).join('+')}`;

A standalone resource-load band. createResourceView(container, opts) draws the workload band on its own - resources and bookings, with no task Gantt, no plan and no CPM - for a resource-availability view by department, portfolio or scenario. It reuses the split view's workload band rather than forking it, so day/week/month/quarter buckets with the scale header and zoom, hours/percent/cost units with utilisation thresholds, expand-to-bookings, the workload:click bucket event, its own grid-backed column definitions and width round-trip, and SVG export all come across unchanged. Bookings are { resource, start, end, units | hours, label, group } (the workload.external shape), and a resource expands into its bookings grouped by group - one summed sub-row per group; setBookings applies a changed set live, and the time-bucket columns never carry a grid control.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGrid } = await import('../packages/dom/src/index.js');
const { createResourceView } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const rv = createResourceView(root, {
  createGrid,
  resources: [{ id: 'Ann', name: 'Ann', capacity: 1 }, { id: 'Bob', name: 'Bob', capacity: 1 }],
  bookings: [
    { resource: 'Ann', start: '2027-01-04', end: '2027-01-09', hours: 40, label: 'Project X', group: 'Portfolio A' },
    { resource: 'Bob', start: '2027-01-04', end: '2027-01-09', hours: 120, label: 'Project Y', group: 'Portfolio B' },
  ],
  zoom: 'week',
  unit: 'percent',
  thresholds: [{ at: 1.0, colour: 'red' }],
});
const countRows = () => { let n = 0; rv.grid.rows.forEach(() => { n += 1; }); return n; };
const rows = countRows();                       // Ann, Bob, totals
// Bob's 120h single week is over any capacity-1 week: its bucket cell flags.
// The buckets are grid cells, read through the bucket
// column's own cell spec - the class function the grid itself paints with.
const bucketIds = rv.grid.columns.visible().map((c) => c.id).filter((id) => /^\d{4}-\d{2}-\d{2}$/.test(id));
const cellClass = (key, colId) => {
  const row = rv.grid.rows.byKey(key);
  return rv.grid.columns.get(colId).cell.class({ row, value: rv.grid.rows.value(key, colId), data: row.data });
};
const over = bucketIds.some((id) => cellClass('Bob\u0000', id).includes('lat-gantt-split__wl-bucket--over')) ? 'yes' : 'no';
rv.setBookings([{ resource: 'Ann', start: '2027-01-04', end: '2027-01-09', hours: 40, group: 'Portfolio A' }]);
const after = countRows();                       // Ann, totals - Bob's gone
const svg = rv.toSVG().includes('<svg') ? 'yes' : 'no';
const unit = rv.getUnit();
rv.destroy();
return `unit ${unit}; rows ${rows}; after ${after}; over ${over}; svg ${svg}`;

Grouping the resources by a field. groupBy groups the resource rows by one of the resources' own fields - 'department', a business unit, a division - or by a function of the resource. Each group draws a collapsible header row carrying the group's summed load and available hours, so the thresholds and the percent unit read the group's own utilisation; resources that name no group (and Unassigned) collect last. A sort on the left-hand columns keeps every resource under its group; toggleGroup(value) collapses or expands a group.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGrid } = await import('../packages/dom/src/index.js');
const { createResourceView } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const rv = createResourceView(root, {
  createGrid,
  groupBy: 'department',
  resources: [
    { id: 'ann', name: 'Ann', capacity: 1, department: 'Engineering' },
    { id: 'bob', name: 'Bob', capacity: 1, department: 'Engineering' },
    { id: 'cat', name: 'Cat', capacity: 1, department: 'Design' },
  ],
  bookings: [
    { resource: 'ann', start: '2027-01-04', end: '2027-01-09', hours: 40, label: 'Project X' },
    { resource: 'bob', start: '2027-01-04', end: '2027-01-09', hours: 30, label: 'Project Y' },
    { resource: 'cat', start: '2027-01-04', end: '2027-01-09', hours: 10, label: 'Project Z' },
  ],
  zoom: 'week',
});
const labels = () => { const out = []; rv.grid.rows.forEach((r) => out.push(rv.grid.rows.text(r.key, 'resource'))); return out.join(', '); };
const shown = labels();
// The Engineering group header is a grid row; its bucket
// cells are grid cells whose values sum the group's resources: 40 + 30 = 70 h.
let engKey = null;
rv.grid.rows.forEach((r) => { if (rv.grid.rows.text(r.key, 'resource') === 'Engineering') engKey = r.key; });
const bucketIds = rv.grid.columns.visible().map((c) => c.id).filter((id) => /^\d{4}-\d{2}-\d{2}$/.test(id));
const engLoad = bucketIds.map((id) => rv.grid.rows.value(engKey, id)).filter((v) => v != null && v > 0).join('');
rv.toggleGroup('Engineering');
const collapsed = labels();
rv.destroy();
return `${shown} | Engineering ${engLoad} h | collapsed ${collapsed}`;

Plan-table defaults for the split view's grids. The task table and the band resource tables are plan tables, not data-entry grids, so mountSplit builds them with no cell-range selection and no fill handle (the task table keeps its row selection, keyboard navigation and editing); a band cell shows the focus outline only for keyboard focus. gridConfig is laid over those defaults and applies to every table, so gridConfig: { selection: { ranges: true, fillHandle: true } } restores both, and gridConfig.band is laid over it again for the workload and histogram band tables only.

const { createTestDom, resetTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGrid } = await import('../packages/dom/src/index.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const plan = { projectStart: '2027-01-04', tasks: [{ id: 'a', name: 'A', duration: 2, assignee: 'Ann' }] };
const probe = (gridConfig) => {
  const { root } = createTestDom();
  const gantt = createGantt(plan);
  const view = gantt.mountSplit(root, { createGrid, workload: {}, gridConfig });
  const sel = (g) => g.get('selection');
  const out = { tasks: sel(view.grids.tasks), band: sel(view.grids.workload) };
  view.destroy();
  return out;
};
const plain = probe(undefined);
const host = probe({ selection: { ranges: true, fillHandle: true } });
const bandOnly = probe({ band: { selection: { ranges: true } } });
return `default ranges ${plain.band.ranges} fill ${plain.band.fillHandle} | host ranges ${host.band.ranges} fill ${host.tasks.fillHandle} | band-only tasks ${bandOnly.tasks.ranges} band ${bandOnly.band.ranges}`;

Selecting tasks,. The selection is the task table's row selection, extended to the timeline bars: a click selects a task (as a row or a bar), Ctrl/Cmd-click toggles it, Shift-click selects a range, and the arrow keys move it; the selected rows and bars carry a theme token. It is driven from code with select(ids), deselect(ids) and read with selected(), each firing one selectionChange with { selectedIds, added, removed, cause }. It survives redraws, zoom and filters, and a selected task that a collapse or a filter hides stays selected - selectedHidden() reports which. Expanding or collapsing a summary row (by chevron, keyboard or view.toggle) raises the vetoable beforeTaskExpand/beforeTaskCollapse and then taskExpand/taskCollapse with the new expandedIds; the workload band's resource rows raise resourceExpand/resourceCollapse.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  tasks: [
    { id: 'phase', name: 'Phase' },
    { id: 'A', name: 'A', parent: 'phase', duration: 2 },
    { id: 'B', name: 'B', parent: 'phase', duration: 2 },
    { id: 'C', name: 'C', parent: 'phase', duration: 2 },
  ],
});
const view = gantt.mountSplit(root, {});
const changes = [];
gantt.on('selectionChange', (e) => changes.push(e.cause));
gantt.select('A');                 // one selectionChange, cause 'api'
gantt.select(['B', 'C']);          // adds B and C in one more
const picked = gantt.selected().join('+');
view.toggle('phase');              // collapse: A, B, C hide but stay selected
const hidden = gantt.selectedHidden().length;
gantt.deselect(['B']);             // remove B, leaving A and C
view.destroy();
return `selected ${picked} | hidden ${hidden} | after deselect ${gantt.selected().join('+')} | changes ${changes.length}`;

Copy, cut and paste. Ctrl/Cmd+C copies the selected tasks with their subtrees, Ctrl/Cmd+X cuts them, Ctrl/Cmd+V pastes below the focused row and Ctrl/Cmd+Shift+V pastes as its children. Each copy has a new id and keeps its assignments; links between two copied tasks are re-created and links to an outside task are dropped. From code: copyTasks(ids), cutTasks(ids) and pasteTasks({ below: id } | { childOf: id }). A paste is gated on the vetoable beforeTaskPaste (carrying the tasks about to be inserted; a veto raises taskPaste:cancelled) and is one undo step, so a cut then a paste is two, each reversible. The system clipboard also receives a tab-separated text form (name, start, end, duration, percent) for a spreadsheet, and tab-separated text pasted from outside (pasteTasks({ below: id, text }), or a browser paste event) creates tasks the same way.

const { createGantt } = await import('../packages/modules/gantt/index.js');

const gantt = createGantt({
  projectStart: '2027-01-04',
  tasks: [
    { id: 'X', name: 'Outside', duration: 2 },
    { id: 'S', name: 'Summary' },
    { id: 'S1', name: 'One', parent: 'S', duration: 2, assignee: 'Ann' },
    { id: 'S2', name: 'Two', parent: 'S', duration: 3 },
  ],
  dependencies: [{ from: 'S1', to: 'S2' }, { from: 'X', to: 'S1' }],
});
gantt.on('beforeTaskPaste', (e) => { if (e.tasks.length > 10) e.preventDefault('too many'); });
gantt.copyTasks(['S']);
const ids = gantt.pasteTasks({ below: 'X' });
const [, s1, s2] = ids;
const deps = gantt.dependencies;
const kept = deps.some((d) => d.from === s1 && d.to === s2) ? 'link kept' : 'link lost';
const external = deps.some((d) => d.to === s1 && d.from === 'X') ? 'external kept' : 'external dropped';
gantt.undo();
gantt.cutTasks(['S']);
const left = gantt.schedule.order.length;
gantt.undo();
return `copies ${ids.length} | ${kept} | ${external} | cut left ${left} | undo restores ${gantt.schedule.order.length}`;

Task actions. addTask(task?, { above | below | child | successorOf | predecessorOf: id }) returns the new id; convertToMilestone(id) / convertToTask(id) turn a task into a zero-duration diamond and back; deleteTask(id) removes a task and its links. Each is one undo step and gated by a vetoable event - beforeTaskAdd, beforeMilestoneConvert and the existing beforeTaskDelete - whose veto raises taskAdd:cancelled, milestoneConvert:cancelled or taskDelete:cancelled with the reason. A new task takes a catalogue name ("New task"), a duration of 1 and its sibling's start (or the project start); a successor or predecessor is linked finish-to-start, and the WBS code follows the new position. The split view's contextMenu: true offers them as default items (add task above / below, add subtask, add successor, add predecessor, convert to milestone, delete), and a contextMenu(task, event, defaults) function receives those items as its third argument to keep, reorder, hide or extend. From the keyboard, Insert adds a task below the focused row, Shift+Insert adds a child and Delete deletes (vetoable). A read-only task refuses an interface-driven child, successor, predecessor, convert or delete on itself (reason: 'readOnly'); a plain API call still works.

const { createGantt } = await import('../packages/modules/gantt/index.js');

const gantt = createGantt({
  projectStart: '2027-01-04',
  tasks: [
    { id: 'A', name: 'Design', duration: 3 },
    { id: 'B', name: 'Build', duration: 2 },
    { id: 'C', name: 'Ship', duration: 1 },
  ],
});
const below = gantt.addTask({}, { below: 'A' });
const next = gantt.addTask({ name: 'Review' }, { successorOf: 'B' });
const linked = gantt.dependencies.some((d) => d.from === 'B' && d.to === next && d.type === 'FS');
gantt.convertToMilestone('C');
const milestone = `milestone duration ${gantt.taskById('C').duration}`;
gantt.convertToTask('C');
const stop = gantt.on('beforeTaskDelete', (e) => e.preventDefault('keep'));
gantt.deleteTask('A');
const kept = gantt.schedule.order.length;
stop();
gantt.undo();   // reverts the Review task and its link together
gantt.undo();   // reverts the conversion back to a task
gantt.undo();   // reverts the milestone conversion
gantt.undo();   // reverts the first add
return `added ${below} | successor ${linked ? 'linked FS' : 'unlinked'} | ${milestone} | vetoed delete kept ${kept} | can undo ${gantt.canUndo()}`;

Scheduling conflicts. After each recompute the controller derives a normalised conflict set - a dependency cycle, an unhonoured dated constraint, a hard lock a predecessor would move, or a task past its deadline - and fires schedulingConflict only when that set changed, carrying { conflicts, added, resolved }, each conflict a { kind, tasks, links, message }. Read it any time from gantt.schedulingConflicts. A host load (setTasks, rows.apply) seeds the set silently. The split view's issuesPanel: true lists the set in a collapsible panel with a count badge, keyboard operable; a row click scrolls to and highlights its tasks, and each row offers the fix actions safe for its kind - remove the offending link, set the constraint to as-soon-as-possible, unlock the task, clear the deadline - each one undo step through the controller's own gated path.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  tasks: [{ id: 'a', name: 'A', duration: 2 }, { id: 'b', name: 'B', duration: 2 }],
  dependencies: [{ from: 'a', to: 'b', type: 'FS' }],
});
const view = gantt.mountSplit(root, { issuesPanel: true });
const seen = [];
gantt.on('schedulingConflict', (e) => seen.push(e));

// Close a loop a -> b -> a: one event names the cycle.
gantt.setDependencies([
  { from: 'a', to: 'b', type: 'FS' },
  { from: 'b', to: 'a', type: 'FS' },
]);
const added = `${seen[0].added[0].kind} | tasks ${[...seen[0].conflicts[0].tasks].sort().join(',')}`;

// Remove the offending link: the cycle is resolved.
gantt.deleteDependency({ from: 'b', to: 'a', type: 'FS' });
const resolved = seen[1].resolved[0].kind;
const panelRows = root.querySelectorAll('.lat-gantt-split__issues-row').length;
view.destroy();
return `added ${added} | resolved ${resolved} | panel ${panelRows}`;

Linked data bands. mountSplit(el, { dataBands: [...] }) stacks one or more collapsible bands under the gantt and the resource bands, each showing a different measure per task per timeline bucket - forecast cost per week, say - laid out like the workload band and scroll- and zoom-locked to the timeline. A band reads value(task, bucketStart, bucketEnd, ctx) per leaf task, or a series field on the task (task.cost = [{ date, value }] at any granularity), re-bucketed to the current zoom: interpolate: 'none' puts each point in its bucket, 'spread' spreads it over its days (a monthly figure over its month) and re-sums. Rows follow the task tree (collapsing in step with the gantt; rows: 'summaries', 'resources' or a host grouping function are the alternatives), summaries roll up by aggregate ('sum', 'avg', 'last', 'min', 'max' or a function), with a totals row and column (totals: { row, column }), a format ('currency', 'number', 'percent' or a function), thresholds (theme-token tones) and cellStyle(value, ctx). With createGrid injected the left-hand columns are a real grid (resize, sort, filter, state); the date (bucket) columns never carry a header control under any config. A moved or resized task onReschedule: 'shift' (default), 'stretch'es or 'keep's its series and fires dataBand:change with the new series to save; an editable band opens a cell editor on double-click (or Enter/F2), gated by the cancellable beforeDataBandEdit (dataBandEdit:cancelled when refused). The view's getDataBandState/setDataBandState (also under getState().dataBands), toggleDataBand(id) and getDataBandTable(id) (one column per bucket, for an Excel/CSV writer) round it out; toSVG and print carry every band.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGrid } = await import('../packages/dom/src/index.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  tasks: [
    { id: 'p', name: 'Phase' },
    { id: 'a', name: 'Design', parent: 'p', start: '2027-01-04', duration: 5,
      cost: [{ date: '2027-01-04', value: 100 }, { date: '2027-01-11', value: 30 }] },
    { id: 'b', name: 'Build', parent: 'p', start: '2027-01-11', duration: 5, cost: [{ date: '2027-01-12', value: 200 }] },
    { id: 'c', name: 'Alpha', start: '2027-01-04', duration: 3, cost: [{ date: '2027-01-05', value: 60 }] },
  ],
});
const view = gantt.mountSplit(root, {
  createGrid, zoom: 'week', weekStartDay: 1, locale: 'en-US',
  dataBands: [{ id: 'cost', title: 'Forecast cost', series: 'cost', format: 'currency', editable: true }],
});
const table = () => view.getDataBandTable('cost');
const week = table().columns.findIndex((c) => c.id === '2027-01-04');
const total = table().rows.find((r) => r[0] === 'Total');
const phase = table().rows.find((r) => r[0] === 'Phase');

// Move Build a week later: its cost moves with it.
let moved = '';
gantt.on('dataBand:change', (e) => { moved = e.series[0].date; });
gantt.applyEdit({ id: 'b', start: gantt.schedule.tasks.get('b').es + 7 }, { event: { type: 'pointerup' } });

// A host veto keeps the bucket as it was.
gantt.on('beforeDataBandEdit', (e) => e.preventDefault('locked'));
// Each band is a real grid (view.grids.dataBands[id]); its bucket cells edit
// through the grid, gated by beforeDataBandEdit. A refused edit leaves $30.
const bandGrid = view.grids.dataBands.cost;
bandGrid.edit.start('a', '2027-01-11');
bandGrid.edit.stop(false, { colId: '2027-01-11', value: 75 });
const col11 = table().columns.findIndex((c) => c.id === '2027-01-11');
const after = table().rows.find((r) => r[0] === 'Design')[col11];
view.destroy();
return `week of 4 Jan $${total[week]} | phase ${phase[1]} | moved to ${moved} | vetoed $${after}`;

Task-bar pointer events and the progress handle …,. Every bar gesture raises its own events on the controller (gantt.on), with id, rawTask (the task as you supplied it), the scheduled task, the view and the originating DOM event. Dates are ISO dates and end is the scheduled finish boundary. The before-events are cancellable with preventDefault(reason) and pair with a :cancelled event; a gesture cannot wait, so a handler that returns a Promise cancels it as 'deferred'. Keyboard edits raise the same start events as pointer drags (and a resize / progress edit its end / drop too); none fire for your own setTasks or rows.apply. A leaf bar (in both mount and mountSplit) shows a progress handle at its percent-complete point on hover or focus - a 16px target on the bar's bottom edge; dragging it previews the fill live and commits one percentComplete edit through beforeProgressChange and the undo history, snapped to progressStep (default 5) and clamped to 0-100. Alt+Shift+Left/Right on a focused bar change it by one step (Shift+arrows keep resizing). Milestones have no handle and summaries are read-only. The Lattice event names:

const { createTestDom, resetTestDom, TestEvent } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  tasks: [{ id: 'a', name: 'Alpha', duration: 6, percentComplete: 20 }],
});
gantt.mountSplit(root, { progressStep: 10 });
const seen = [];
for (const name of ['beforePercentBarDrag', 'percentBarDragStart', 'percentBarDrop', 'beforeTaskDrag', 'taskDragStart', 'taskClick']) {
  gantt.on(name, (e) => seen.push(name === 'percentBarDrop' ? `${name}(${e.from}→${e.to})` : name));
}
// Each edit redraws the timeline, so the bar is looked up afresh every time.
const row = () => root.querySelector('.lat-gantt-split__barrow[data-task="a"]');
const key = (k, extra = {}) => row().dispatchEvent(new TestEvent('keydown', { key: k, bubbles: true, ...extra }));

// Alt+Shift+ArrowRight: one progressStep, through beforeProgressChange and the undo history.
key('ArrowRight', { shiftKey: true, altKey: true });
const pct = gantt.tasks[0].percentComplete;
// Enter on a focused bar is a click.
key('Enter');
// A host refuses moves at the drag's start; the keyboard move raises the same gate.
gantt.on('beforeTaskDrag', (e) => e.preventDefault('frozen'));
let why = null;
gantt.on('taskDrag:cancelled', (e) => { why = e.reason; });
key('ArrowRight');
const moved = gantt.tasks[0].start != null;
const handle = root.querySelector('.lat-gantt-split__progresshandle') !== null;

gantt.destroy();
resetTestDom();

return `${seen.join(' ')} | ${pct}% | ${why} moved ${moved} | handle ${handle}`;

Dependency-link pointer events and the task tooltip. A link's arrow raises its own click / double-click / context-menu / hover, each carrying { from, to, linkType, lag, view, event } - the link's type is named linkType, not type, because every Gantt event payload's type is the event's own name; lag is read back from gantt.dependencies since it is not drawn on the arrow itself (the visible one is a separate label). A double click, or Enter/Space on a focused link, is the cancellable linkDblClick: claiming it stops the built-in type/lag editor from opening (the pointer route runs no default of its own, the same shape taskDblClick already has). linkContextMenu is cancellable the same way as taskContextMenu - neither view draws a menu for a link, so claiming it only suppresses the browser's own. The task tooltip's own tooltipShow is vetoable - preventDefault() keeps the built-in card from showing at all, for a host that wants its own in its place - fired once per distinct task shown, and its pair tooltipHide notifies only when a shown one is actually dismissed. The Lattice event names:

const { createTestDom, resetTestDom, TestEvent } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  tasks: [{ id: 'a', name: 'A', duration: 2 }, { id: 'b', name: 'B', duration: 2 }],
  dependencies: [{ from: 'a', to: 'b', type: 'FS', lag: 3 }],
});
const view = gantt.mountSplit(root, { tooltip: true });
const seen = [];
for (const name of ['taskContextMenu', 'linkClick', 'linkDblClick', 'linkContextMenu', 'linkHover', 'tooltipShow', 'tooltipHide']) {
  gantt.on(name, () => seen.push(name));
}
let lag = null;
let linkType = null;
gantt.on('linkClick', (e) => { lag = e.lag; linkType = e.linkType; });

// The link's own click / double-click / context menu / hover.
const link = root.querySelector('.lat-gantt-split__linkgroup[data-from="a"][data-to="b"]');
link.dispatchEvent(new TestEvent('pointerover', { bubbles: true }));
link.dispatchEvent(new TestEvent('click', { bubbles: true }));
link.dispatchEvent(new TestEvent('dblclick', { bubbles: true, cancelable: true }));
link.dispatchEvent(new TestEvent('contextmenu', { bubbles: true, cancelable: true }));

// A right-click on the bar's row: taskContextMenu (no built-in menu configured here).
root.querySelector('.lat-gantt-split__barrow[data-task="a"]')
  .dispatchEvent(new TestEvent('contextmenu', { bubbles: true, cancelable: true }));

// The task tooltip: shown, hidden on pointerleave, then vetoed.
const row = () => root.querySelector('.lat-gantt-split__barrow[data-task="a"]');
const bar = () => row().querySelector('.lat-gantt-split__bar');
const tip = () => root.querySelector('.lat-gantt-split__tooltip');
bar().dispatchEvent(new TestEvent('pointermove', { bubbles: true, clientX: 10, clientY: 10 }));
const shown = !tip().hasAttribute('hidden');
root.querySelector('.lat-gantt-split__time-body').dispatchEvent(new TestEvent('pointerleave', {}));
const hiddenAfterLeave = tip().hasAttribute('hidden');
gantt.on('tooltipShow', (e) => e.preventDefault('replaced'));
bar().dispatchEvent(new TestEvent('pointermove', { bubbles: true, clientX: 10, clientY: 10 }));
const stillHidden = tip().hasAttribute('hidden');

view.destroy();
resetTestDom();
return `${seen.join(' ')} | ${linkType} lag ${lag} | tooltip ${shown},${hiddenAfterLeave},${stillHidden}`;

Previewing a drag. While a bar is dragged or resized, both views redraw the dependency arrows into and out of it on every frame and shift the successors the scheduler will push. previewEdit({ id, start?, duration? }) is what they call: it dry-runs the edit and returns the schedule it would produce, without changing the model or emitting schedule, and returns null when the edit cannot be scheduled.

const { createGantt } = await import('../packages/modules/gantt/index.js');

const plan = createGantt({
  projectStart: '2027-01-04',
  tasks: [{ id: 'A', duration: 5 }, { id: 'B', duration: 4 }],
  dependencies: [{ from: 'A', to: 'B', type: 'FS' }],
});
let events = 0;
plan.on('schedule', () => { events += 1; });

// Stretch A by two days: B would be pushed two days right.
const base = plan.schedule.tasks.get('B').es;
const preview = plan.previewEdit({ id: 'A', duration: 7 });
const out = `preview B +${preview.tasks.get('B').es - base} | live B +${plan.schedule.tasks.get('B').es - base} | events ${events}`;
plan.destroy();
return out;

Reordering and re-parenting rows,. In the split view, a drag handle in the name column drags a row above or below a sibling to reorder it, or onto another row to make it a child; by keyboard, Alt+Up/Alt+Down move a focused row among its current siblings, and Tab/Shift+Tab indent or outdent it. Every gesture funnels through moveRow(id, { parent, index }), the same gated, undoable choke point: the cancellable beforeRowMove fires first - a handler may refuse with preventDefault(reason), which fires rowMove:cancelled and leaves the plan untouched - and once allowed, the task's parent and its position among the plan's own task order are written through the live re-parent path as one undo step, then rowMove fires once with { id, oldParent, newParent, oldIndex, newIndex }, so a host can store its own sort key. The same drop also raises the beforeRowDrop/rowDrop/rowDrop:cancelled trio - rowDrop is rowMove plus position ('before'/'after'/'inside') and target (the row the drop anchored to); beforeRowDrop gates first, so a drop-specific refusal reports rowDrop:cancelled rather than rowMove:cancelled. A drop onto the task itself or onto one of its own descendants (which would cycle the tree) is refused before anything is gated; a move that changes neither parent nor position is a silent no-op.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  tasks: [
    { id: 'phase', name: 'Phase' },
    { id: 'A', name: 'A', parent: 'phase', duration: 2 },
    { id: 'B', name: 'B', parent: 'phase', duration: 2 },
    { id: 'C', name: 'C', parent: 'phase', duration: 2 },
  ],
});
const view = gantt.mountSplit(root, { keyboard: true });
const order = () => [...root.querySelectorAll('.lat-gantt-split__row')].map((r) => r.getAttribute('data-task'));

let moves = 0;
let drops = [];
gantt.on('rowMove', () => { moves += 1; });
gantt.on('rowDrop', (e) => { drops.push(`${e.position}/${e.target}`); });

// Alt+ArrowUp on C's row moves it up one, ahead of B - a plain sibling reorder,
// and the drop reports position 'before' the row it landed on.
const rowC = root.querySelector('.lat-gantt-split__row[data-task="C"]');
rowC.dispatchEvent({ type: 'keydown', target: rowC, bubbles: true, key: 'ArrowUp', altKey: true });
const afterAlt = order().join(',');

// Tab on B (now the last sibling) indents it under its new previous sibling, C
// - position 'inside' C.
const rowB = root.querySelector('.lat-gantt-split__row[data-task="B"]');
rowB.dispatchEvent({ type: 'keydown', target: rowB, bubbles: true, key: 'Tab' });
const bParent = gantt.schedule.tasks.get('B').parent;

// A vetoed drop changes nothing and fires rowDrop:cancelled instead of rowDrop.
gantt.on('beforeRowDrop', (e) => e.preventDefault('locked'));
let cancelled = false;
gantt.on('rowDrop:cancelled', () => { cancelled = true; });
gantt.moveRow('A', { parent: 'C' });

view.destroy();
return `order ${afterAlt} | B under ${bParent} | moves ${moves} | drops ${drops.join(' ')} | veto cancelled ${cancelled}`;

WBS outline codes. Every scheduled task carries a derived wbs string - '1', '1.1', '1.2', '2', … - from its position in the tree, read off gantt.schedule.tasks.get(id).wbs; it renumbers on every reorder, indent/outdent, add or delete, with nothing written onto the task itself, so renumbering never adds an undo step of its own. gantt.taskByWbs(code) resolves a task by its current code - the lookup a predecessor reference by WBS will use. The built-in kind: 'wbs' split-view column shows it, read-only and sortable under the same tree-aware sort as every other column. An MSPDI task's own <WBS>, when the source plan supplied one, is kept verbatim by importMSPDI rather than overridden by the derived number, and exportMSPDI writes it back.

const { createGantt, importMSPDI, exportMSPDI } = await import('../packages/modules/gantt/index.js');

const plan = createGantt({
  tasks: [
    { id: 'p', name: 'Phase 1' },
    { id: 'a', name: 'A', parent: 'p', duration: 2 },
    { id: 'b', name: 'B', parent: 'p', duration: 2 },
    { id: 'q', name: 'Phase 2', duration: 1 },
  ],
});
const codes = ['p', 'a', 'b', 'q'].map((id) => plan.schedule.tasks.get(id).wbs).join(',');

// Moving b above a renumbers both - nothing stored, so nothing stale to fix.
plan.moveRow('b', { parent: 'p', index: 0 });
const moved = plan.schedule.tasks.get('b').wbs;
const lookup = plan.taskByWbs('1.2').id;
plan.destroy();

// A supplied, non-standard WBS (Project lets a plan carry a custom mask) is
// kept verbatim on import and written back unchanged on export.
const xml = '<Project xmlns="http://schemas.microsoft.com/project"><Tasks>' +
  '<Task><UID>1</UID><Name>Alpha</Name><OutlineLevel>1</OutlineLevel><WBS>A</WBS></Task>' +
  '<Task><UID>2</UID><Name>Beta</Name><OutlineLevel>1</OutlineLevel><WBS>B</WBS></Task>' +
  '</Tasks></Project>';
const back = importMSPDI(xml);
const custom = back.tasks.map((t) => t.wbs).join(',');
const xmlOut = exportMSPDI({ tasks: back.tasks });
const roundTrips = xmlOut.includes('<WBS>A</WBS>') && xmlOut.includes('<WBS>B</WBS>');

return `${codes} | moved ${moved} | lookup ${lookup} | custom ${custom} | roundtrip ${roundTrips}`;

The task tooltip. Hovering a bar, or focusing it by keyboard, in either view, shows a card anchored to it - above the bar by default, flipping below or sideways to stay inside the view, dismissed on pointer leave, blur, Escape or scroll, and suppressed mid-drag. The default content is the task name as a title, then labelled Start/End/Duration/Complete rows (dates in the grid's own locale), plus Effort, Assigned, Cost and Slack when the task has them; a milestone shows a single Date row instead. tooltip: { fields } picks and orders the rows from 'start', 'end', 'duration', 'percentComplete', 'effort', 'resources', 'cost', 'slack'; tooltip: (task, ctx) => ... renders your own string (always text) or DOM node (attached as it is), with ctx.formatDate the same locale formatter the default rows use; tooltip: false turns it off. The hovered or focused bar's aria-description always matches the card's own text exactly, whichever of the three produced it.

const { createTestDom, resetTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const plan = createGantt({
  tasks: [
    { id: 'design', name: 'Design', duration: 5, percentComplete: 40, cost: 1200 },
    { id: 'ship', name: 'Ship', milestone: true },
  ],
});
// `fields` picks and orders the rows; a milestone always shows just its Date.
plan.mount(root, { dateAxis: false, tooltip: { fields: ['start', 'percentComplete', 'cost'] } });
const hover = (sel) => {
  const row = root.querySelector(sel);
  const bar = row.querySelector('.lat-gantt__bar') || row.querySelector('.lat-gantt__milestone');
  bar.dispatchEvent({ type: 'pointermove', target: bar, bubbles: true });
  return row.getAttribute('aria-description').replace(/\n/g, ' / ');
};
const picked = hover('.lat-gantt__row[data-task="design"]');
const milestone = hover('.lat-gantt__row[data-task="ship"]');
plan.destroy();

// A host render function: a plain string is always text, never markup.
const { root: root2 } = createTestDom();
const custom = createGantt({ tasks: [{ id: 'a', name: 'Design', duration: 5 }] });
custom.mount(root2, { dateAxis: false, tooltip: (task, ctx) => `${task.name}: ${ctx.formatDate(task.es)}` });
const row2 = root2.querySelector('.lat-gantt__row[data-task="a"]');
const bar2 = row2.querySelector('.lat-gantt__bar');
bar2.dispatchEvent({ type: 'pointermove', target: bar2, bubbles: true });
const customText = row2.getAttribute('aria-description');
custom.destroy();
resetTestDom();

return `picked [${picked}] | milestone [${milestone}] | custom [${customText}]`;

Per-task bar colour. A task's colour field paints its bar, summary bar or milestone, and the bar's progress fill is the same hue darkened so the completed part still reads against it; the barColour(task) option on mount/mountSplit wins over the field. The colour is a data colour - written literally, not through a --lattice-* token - so it reads the same in dark mode, and it is re-applied on every redraw.

const { createTestDom, resetTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

// A task `colour` field paints its bar and its milestone; the progress fill is
// the same hue darkened.
const { root } = createTestDom();
const plan = createGantt({
  tasks: [
    { id: 'design', name: 'Design', duration: 5, percentComplete: 40, colour: '#3366cc' },
    { id: 'ship', name: 'Ship', milestone: true, colour: '#cc3333' },
  ],
});
plan.mount(root, { dateAxis: false });
const designRow = root.querySelector('.lat-gantt__row[data-task="design"]');
const shipRow = root.querySelector('.lat-gantt__row[data-task="ship"]');
const fills = `${designRow.querySelector('.lat-gantt__bar').style.fill} ${designRow.querySelector('.lat-gantt__progress').style.fill} ${shipRow.querySelector('.lat-gantt__milestone').style.fill}`;
plan.destroy();

// `barColour(task)` wins over the field.
const { root: root2 } = createTestDom();
const plan2 = createGantt({ tasks: [{ id: 'a', duration: 3, colour: '#3366cc' }] });
plan2.mount(root2, { dateAxis: false, barColour: (task) => (task.id === 'a' ? '#00aa00' : null) });
const overridden = root2.querySelector('.lat-gantt__row[data-task="a"]').querySelector('.lat-gantt__bar').style.fill;
plan2.destroy();
resetTestDom();

return `${fills} | ${overridden}`;

Bar label position. The split view's barLabelPosition - 'inside', 'right' or 'auto' - says where a task or summary bar's own label sits. 'right' (the default) keeps the label just past the bar's right edge, the behaviour the view shipped with; 'inside' centres it on the bar and swaps it to a contrasting fill so it stays readable over the solid bar in light and dark themes alike - a per-task colour picks its own text colour (near-black on a light fill, white on a dark one) because the token contrast is only guaranteed against the theme's own fills, not an arbitrary data colour; 'auto' centres the label only when it fits, estimating its width the same way the axis labels are thinned, and falls back to the right otherwise. A label too wide to read inside its bar falls back to the right under either 'inside' or 'auto', so it is never cut off at the bar's edges. Milestones draw no bar and so no label.

const { createTestDom, resetTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const NS = 'lat-gantt-split';
const tasks = [
  { id: 'go', name: 'Go', duration: 8 },
  { id: 'long', name: 'A very long task name that will not fit inside a narrow bar', duration: 1 },
];
const px = (v) => Number(String(v || '0'));

// `inside` centres the label on the bar and marks it with the contrasting fill.
const { root } = createTestDom();
const inside = createGantt({ projectStart: '2027-01-04', tasks });
inside.mountSplit(root, { barLabelPosition: 'inside' });
const goRow = root.querySelector(`.${NS}__barrow[data-task="go"]`);
const goBar = goRow.querySelector(`.${NS}__bar`);
const goLabel = goRow.querySelector(`.${NS}__barlabel`);
const centred = goLabel.getAttribute('data-inside') === 'true' && goLabel.getAttribute('text-anchor') === 'middle'
  && Math.abs(px(goLabel.getAttribute('x')) - (px(goBar.getAttribute('x')) + px(goBar.getAttribute('width')) / 2)) < 2;
inside.destroy();

// `auto` keeps a short label inside and pushes a too-wide one to the right.
const { root: root2 } = createTestDom();
const auto = createGantt({ projectStart: '2027-01-04', tasks });
auto.mountSplit(root2, { barLabelPosition: 'auto' });
const goAutoRow = root2.querySelector(`.${NS}__barrow[data-task="go"]`);
const longAutoRow = root2.querySelector(`.${NS}__barrow[data-task="long"]`);
const autoInside = goAutoRow.querySelector(`.${NS}__barlabel`).getAttribute('data-inside') === 'true';
const autoRight = longAutoRow.querySelector(`.${NS}__barlabel`).getAttribute('data-inside') === null;
auto.destroy();
resetTestDom();

return `inside centred ${centred} | auto short ${autoInside} long ${autoRight}`;

const { computeSchedule, findViolations, createGantt, LINK_TYPES, SCHEDULE_ERROR, toISODate } = await import('../packages/modules/gantt/index.js');
const tasks = [
  { id: 'design', duration: 5, percentComplete: 100 },
  { id: 'build', duration: 6, percentComplete: 50 },
  { id: 'test', duration: 4 },
  { id: 'launch', milestone: true },
];
const deps = [
  { from: 'design', to: 'build' },
  { from: 'build', to: 'test' },
  { from: 'test', to: 'launch' },
];
const s = computeSchedule(tasks, deps);
const plan = createGantt({ tasks, dependencies: deps });
const cyc = computeSchedule([{ id: 'a', duration: 1 }, { id: 'b', duration: 1 }], [{ from: 'a', to: 'b' }, { from: 'b', to: 'a' }]);
return [plan.schedule.projectDuration, s.critical.join('-'), toISODate(0), LINK_TYPES.join(','), cyc.error.code === SCHEDULE_ERROR.CYCLE, findViolations(tasks, s).length].join(' | ');

Milestones and summary (WBS) tasks: a summary is derived from its children and a dependency may target it.

const { computeSchedule } = await import('../packages/modules/gantt/index.js');
const tasks = [
  { id: 'phase', name: 'Phase 1' },
  { id: 'a', duration: 3, parent: 'phase', percentComplete: 100 },
  { id: 'b', duration: 2, parent: 'phase', percentComplete: 0 },
  { id: 'ship', milestone: true },
];
const s = computeSchedule(tasks, [{ from: 'a', to: 'b' }, { from: 'phase', to: 'ship' }]);
const phase = s.tasks.get('phase');
return [phase.es, phase.ef, phase.percentComplete, phase.isSummary, s.tasks.get('ship').es].join(' | ');

Locked tasks and hard constraints. A dated constraint like MSO is reported as a conflict when a predecessor would force it later, but the date still floats to wherever the predecessor pushed it - a completed task's own placement is not safe from a late-running predecessor. locked: true (or the equivalent constraintMode: 'hard') is the stronger guarantee: the scheduler never moves the task, full stop. A violating predecessor link is instead left unhonoured and reported in schedule.conflicts as a 'LOCKED' conflict naming the exact from/to edge, which a mounted view draws as a conflict arrow; dragging the locked task itself is refused by default. The plan-wide lockWhen(task) predicate (on createGantt and computeSchedule) locks by rule - typically "100% complete" - without setting locked on every finished task by hand. The same rule is exported as isTaskLocked(task, lockWhen) for a host that needs to ask before offering a drag or an edit: it reads locked, constraintMode: 'hard' and the plan's lockWhen predicate off the raw task, and a predicate that throws locks nothing.

const { computeSchedule, createGantt } = await import('../packages/modules/gantt/index.js');
const deps = [{ from: 'design', to: 'build', type: 'FS' }];
// `design` now overruns into what was `build`'s placed window.
const locked = computeSchedule(
  [{ id: 'design', duration: 10 }, { id: 'build', duration: 4, locked: true, start: 5 }],
  deps,
);
const hard = computeSchedule(
  [{ id: 'design', duration: 10 }, { id: 'build', duration: 4, constraintMode: 'hard', start: 5 }],
  deps,
);
const byRule = computeSchedule(
  [{ id: 'design', duration: 10 }, { id: 'build', duration: 4, percentComplete: 100, start: 5 }],
  deps,
  { lockWhen: (t) => t.percentComplete === 100 },
);
const plan = createGantt({ tasks: [{ id: 'build', duration: 4, locked: true, start: 5 }] });
const refused = plan.applyEdit({ id: 'build', start: 20 }); // beforeTaskMove refuses a locked task by default
return [
  locked.tasks.get('build').es, locked.conflicts[0].type, locked.conflicts[0].from,
  hard.tasks.get('build').es, byRule.tasks.get('build').es, refused === undefined,
].join(' | ');

Read-only tasks. task.readOnly: true (or the plan-wide readOnlyWhen(task) option on createGantt) refuses every user-driven edit on the task - pointer and keyboard drag, resize, progress drag, a dependency create/delete touching it, and a task-table cell edit on it - before the gesture's own before* event ever fires: the paired :cancelled event fires with reason 'readOnly', but no host handler is ever asked to veto an attempt that was never going to happen. It is a weaker promise than locked in two ways: the scheduler still pushes a read-only task's dates when a predecessor moves (unless the task is also locked), and applyEdit/setDependencies/deleteDependency called directly from code - carrying no originating DOM event - still work, because readOnly governs interactive editing, not the API. A read-only row and bar carry a --readonly class (a muted progress handle, no drag cursor) and an accessible description, in both the plain and split view.

const { createGantt } = await import('../packages/modules/gantt/index.js');
const plan = createGantt({
  tasks: [{ id: 'design', duration: 5 }, { id: 'build', duration: 4, readOnly: true }],
  dependencies: [{ from: 'design', to: 'build', type: 'FS' }],
});
let beforeFired = false;
plan.on('beforeTaskMove', () => { beforeFired = true; });
let reason = null;
plan.on('taskMove:cancelled', (e) => { reason = e.reason; });
// A UI-driven edit (one carrying an originating event, as a gesture commit or a
// task-table cell edit does) refuses before beforeTaskMove ever fires.
const refused = plan.applyEdit({ id: 'build', start: 1 }, { event: {} });
const pushedStart = plan.schedule.tasks.get('build').es;
// The scheduler still pushes the read-only task when its predecessor moves.
plan.applyEdit({ id: 'design', duration: 8 });
const pushedAgain = plan.schedule.tasks.get('build').es;
// A bare applyEdit call from the host (no originating event) still works.
const apiEdit = plan.applyEdit({ id: 'build', duration: 2 });
return [
  refused === undefined, beforeFired, reason,
  pushedStart, pushedAgain, apiEdit.ok, plan.schedule.tasks.get('build').duration,
].join(' | ');

Extra task-table columns. The split view’s columns list also takes constraint (an editable select over the constraint types, with catalogue labels), constraintDate (an editable date), the read-only earlyStart, lateStart, lateFinish, baselineStart and baselineEnd dates, variance (finish variance in days, signed, a late value drawn in the warning token), note (editable text) and sequence (the 1-based row number, renumbered as the table is sorted or filtered). Each is an ordinary grid column definition, so a host overrides it by id, the dates honour dateFormat, every one exports with the table, and the editable ones commit through applyEdit - one undo step, the usual before* vetoes.

const { createTestDom, flushFrames } = await import('../packages/dom/src/renderer/testdom.js');
const { createGrid } = await import('../packages/dom/src/index.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom({ width: 1200, height: 300 });
const gantt = createGantt({
  projectStart: '2027-01-04',
  tasks: [
    { id: 'a', name: 'Design', duration: 3, baselineStart: '2027-01-04', baselineEnd: '2027-01-05' },
    { id: 'b', name: 'Build', duration: 2, note: 'after design' },
  ],
  dependencies: [{ from: 'a', to: 'b' }],
});
const view = gantt.mountSplit(root, {
  createGrid, editable: true,
  columns: ['name', 'constraint', 'constraintDate', 'variance', 'sequence'],
});
flushFrames();
const grid = view.grids.tasks;
// A constraint and its date commit through applyEdit and reschedule the plan.
await grid.edit.setCells([{ key: 'b', colId: 'constraint', value: 'SNET' }], 'cell', { origin: 'user' });
await grid.edit.setCells([{ key: 'b', colId: 'constraintDate', value: '2027-01-11' }], 'cell', { origin: 'user' });
flushFrames();
await new Promise((r) => setTimeout(r, 5));
const out = [
  gantt.tasks[1].constraint, gantt.tasks[1].constraintDate,
  grid.rows.text('a', 'variance'), grid.rows.text('b', 'sequence'),
  (gantt.undo(), gantt.tasks[1].constraintDate ?? 'none'), // one undo step reverts the date edit
].join(' | ');
view.destroy();
return out;

Honouring stored dates. A host migrating an existing plan already has every task's dates, but the links may carry a wrong or absent lag. With honourDates: true the controller derives each link's lag from its two endpoints' start/duration on setTasks/setDependencies, so the computed schedule reproduces the stored dates and nothing moves; the derived lags are reflected in gantt.dependencies.

const { createGantt, computeSchedule } = await import('../packages/modules/gantt/index.js');

// Stored dates, and a link whose lag is wrong - 5, where the dates imply 1.
const tasks = [
  { id: 'design', start: 0, duration: 5 },
  { id: 'build', start: 6, duration: 4 },
];
const deps = [{ from: 'design', to: 'build', type: 'FS', lag: 5 }];

// Without honourDates the CPM obeys the wrong lag and pushes build to day 10.
const plain = createGantt({ tasks, dependencies: deps });
const moved = plain.schedule.tasks.get('build').es;
plain.destroy();

// With honourDates the lag is re-derived from the dates, so build stays on 6.
const plan = createGantt({ honourDates: true, tasks, dependencies: deps });
const kept = plan.schedule.tasks.get('build').es;
const lag = plan.dependencies[0].lag;
plan.destroy();

// computeSchedule accepts the option directly and returns the derived deps.
const direct = computeSchedule(tasks, deps, { honourDates: true });
if (direct.dependencies[0].lag !== 1) throw new Error('lag not derived');

return `moved ${moved}, kept ${kept}, lag ${lag}`;

Undo and redo. Every user or API edit - a move, resize, delete, link add/remove/lag, assignment or units change, a workload-band hour edit, a baseline applied to the plan, a task add through rows.apply, even a whole level() run - is one undo step, because they all funnel through the same controller mutators the recorder sits on. undo() restores the exact prior plan (tasks, dependencies, assignments and work contours) and re-runs scheduling to the identical result; redo() re-applies it. canUndo()/canRedo() drive a toolbar, and a history event { canUndo, canRedo, label } fires on every change. In a mounted view Ctrl/Cmd+Z undoes and Ctrl/Cmd+Shift+Z (or Ctrl+Y) redoes, scoped to the focused Gantt - and a Ctrl+Z typed into the split table's open cell editor is left to the grid's own text undo, never hijacked. History is session only: kept while the page is open, cleared by setTasks/setState and on reload, and NOT part of getState/setState. The depth is historyDepth (default 100), and clearHistory() empties it.

const { createGantt } = await import('../packages/modules/gantt/index.js');
const plan = createGantt({
  tasks: [{ id: 'design', duration: 5 }, { id: 'build', duration: 4 }],
  dependencies: [{ from: 'design', to: 'build', type: 'FS' }],
});
plan.applyEdit({ id: 'design', start: 3 });         // one edit = one undo step
const moved = plan.schedule.tasks.get('build').es;  // 8 - build (FS successor) followed
plan.undo();                                        // restore the exact prior plan + schedule
const undone = plan.schedule.tasks.get('build').es; // back to 5
plan.redo();                                         // and forward again
const redone = plan.schedule.tasks.get('build').es; // 8
// History is session only: clearing it (as setTasks/setState also do) empties both stacks.
plan.clearHistory();
return [moved, undone, redone, plan.canUndo(), plan.canRedo()].join(' | ');

Dirty tracking. gantt.changes() is the accumulated diff since the last commit() or load - { tasks: { added, updated, removed }, dependencies: { added, updated, removed }, assignments: { updated } } - and hasChanges is the boolean a Save button binds to. Both are computed fresh against a held committed baseline rather than an edit counter, so an add immediately removed nets to nothing and undoing back to the baseline clears hasChanges exactly as a fresh commit() would. The dirtyChange event { hasChanges } fires only the instant the flag flips, never on a second edit made while already dirty. commit() takes the plan as it stands now as the new baseline (leaving undo/redo untouched); setTasks/rows.apply reset the baseline to the load unless called with { keepChanges: true }, which keeps the load accumulating against whatever baseline was already held - the shape a live feed wants if its own upserts should still count as unsaved changes. mountSplit's dirtyMarks: true draws a small corner mark on every built-in task-table cell whose field is part of the diff, cleared the moment it is not.

const { createGantt } = await import('../packages/modules/gantt/index.js');
const plan = createGantt({ tasks: [{ id: 'a', name: 'A', duration: 5 }] });
const flips = [];
plan.on('dirtyChange', (e) => flips.push(e.hasChanges));

plan.applyEdit({ id: 'a', name: 'A renamed' });
const dirtyAfterEdit = plan.hasChanges;                          // true
const fields = Object.keys(plan.changes().tasks.updated[0].fields); // ['name']

plan.commit();                                                   // the rename is now the baseline
const dirtyAfterCommit = plan.hasChanges;                        // false

// A live-feed upsert that should still count as an unsaved change joins the
// baseline already held rather than resetting to it.
plan.rows.apply({ add: [{ id: 'b', name: 'B', duration: 2 }] }, { keepChanges: true });
const added = plan.changes().tasks.added.length;                 // 1

// ...and removing the same row nets back to nothing, diffed fresh rather
// than counted.
plan.rows.apply({ remove: ['b'] }, { keepChanges: true });
const nets = plan.hasChanges;                                     // false

plan.destroy();
return [dirtyAfterEdit, fields.join(','), dirtyAfterCommit, added, nets, flips.join(',')].join(' | ');

Resource management. Assign people (or machines) to tasks with assignee/assignees or explicit assignments: [{ resource, units }], and give each resource a capacity through the resources option. The controller then reports overAllocations - where one resource is booked beyond its capacity across concurrent tasks - and the full resourceLoad; the split view rings the over-booked avatars and outlines the clashing bars. gantt.level() auto-shifts the lower-priority tasks later to clear the over-allocation, honouring the critical path and the working-time calendar (pass { dryRun: true } to preview the moves).

Per-resource working calendars. A resource may carry its own calendar - workingDays (0=Sun…6=Sat), hoursPerDay (a flat number or a per-weekday map like { 1: 7.5, 5: 4 }), and holidays/leave (ISO dates, day-numbers or inclusive { from, to } ranges) - and a capacity in hours per day. Load, the workload band, the over-allocation marks and level() then measure that resource against ITS calendar: it has zero capacity on a day it does not work (so a booking there is wholly over-allocation), and level() never delays a task onto one of its non-working days. Anything the resource calendar omits is inherited from the plan calendar, and a resource with no calendar keeps the historical unitless capacity (1 = a full-time booking, a fraction of the plan's hoursPerDay), so a plan with no resource calendars is unchanged. The plan's full working day is the hoursPerDay option (default 8). Resource calendars round-trip through MSPDI as a Resource → CalendarUID → Calendar.

const { createGantt } = await import('../packages/modules/gantt/index.js');
const plan = createGantt({
  projectStart: '2027-01-04',   // a Monday
  calendar: 'weekends',
  // Pat works Mon/Tue/Wed at 7.5 h; the plan's full day is 8 h.
  resources: [{ id: 'Pat', calendar: { workingDays: [1, 2, 3], hoursPerDay: 7.5 } }],
  tasks: [{ id: 'T', duration: 5, assignee: 'Pat' }],
});
const load = plan.resources();
const over = load.overAllocations;
// Mon-Wed: over by the half hour Pat cannot cover (capacity 7.5/8 = 0.9375 u).
// Thu-Fri: Pat does not work, so capacity is 0 and the whole booking is over.
return [over.length, over[0].capacity, over[1].capacity, load.byResource.get('Pat').capacity].join(' | ');

Per-task and per-resource calendars. A task's calendar takes the plan calendar's shape (workdays, holidays or exceptions, hoursPerDay) or the id of an entry in the calendars: { id: spec } option; a resource's calendar likewise. The scheduler counts that task's durations and lags in its own working days, so five days on a seven-day calendar span five calendar days where the Monday-Friday plan spans seven. The split view shades each bar by its own calendar, the workload band and level() book the days that calendar works, schedule.tasks.get(id).calendar reports the resolved id ('plan' when the task follows the plan), and MSPDI export and import round-trip the calendars. An id that names no calendar refuses the schedule with an unknown-calendar entry in errors that names the task (or resource) and the id.

const { createGantt } = await import('../packages/modules/gantt/index.js');
const { computeSchedule } = await import('../packages/modules/gantt/schedule.js');
const plan = createGantt({
  projectStart: '2027-01-04',   // a Monday
  calendar: 'weekends',
  calendars: { seven: { workdays: [0, 1, 2, 3, 4, 5, 6] } },
  tasks: [
    { id: 'office', duration: 5 },
    { id: 'site', duration: 5, calendar: 'seven' },
  ],
});
const t = plan.schedule.tasks;
const span = (id) => t.get(id).ef - t.get(id).es;
const refused = computeSchedule([{ id: 'x', duration: 1, calendar: 'night-shift' }], [], { projectStart: '2027-01-04' });
return [span('office'), span('site'), t.get('site').calendar, t.get('office').calendar,
  refused.errors[0].code + ' ' + refused.errors[0].calendar].join(' | ');

Resource avatars. A resource may carry an avatar image URL; the split view draws it as a round chip in the assignee column, the workload band's resource rows and the assignment picker, sized by the --lattice-gantt-avatar-size theme token (defaulting to the row height). The picture's alt text is the resource's name, and a resource without a picture - or whose image fails to load - keeps its initials glyph, so nothing shifts while a picture loads.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');
const { root } = createTestDom();
const PICTURE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
const plan = createGantt({
  projectStart: '2027-01-04',
  // Ali carries an avatar (a data URL, so the example runs offline); Bo has
  // none and keeps her initials.
  resources: [
    { id: 'ann', name: 'Ali Mohsin', avatar: PICTURE },
    { id: 'bo', name: 'Bo Chen' },
  ],
  tasks: [
    { id: 'a', name: 'Design', start: '2027-01-04', duration: 2, assignee: 'ann' },
    { id: 'b', name: 'Build', start: '2027-01-04', duration: 2, assignee: 'bo' },
  ],
});
const view = plan.mountSplit(root, { columns: ['name', 'assignee'], workload: true });
const NS = 'lat-gantt-split';
// The assignee column's first picture is Ali's, alt = her name; the band draws
// the same chip per resource, and Bo's row keeps her initials.
const assigneeAlt = root.querySelector('.' + NS + '__avatar-img').getAttribute('alt');
const band = [...root.querySelectorAll('.' + NS + '__wl-row')]
  .map((row) => {
    const img = row.querySelector('.' + NS + '__avatar-img');
    const glyph = row.querySelector('.' + NS + '__avatar-glyph');
    return img ? img.getAttribute('alt') : (glyph ? glyph.getAttribute('data-initials') : null);
  })
  .filter(Boolean);
view.destroy();
plan.destroy();
return `${assigneeAlt} | band ${band.join('+')}`;

Microsoft Project. importMSPDI reads a Project .xml (MSPDI) document into a model for createGantt, and exportMSPDI (or gantt.toMSPDI()) writes one back - tasks, typed dependencies with lag, constraints, baseline, %complete, resources (including per-resource working calendars) and assignments all round-trip.

const { createGantt, exportMSPDI, importMSPDI } = await import('../packages/modules/gantt/index.js');
const plan = createGantt({
  tasks: [
    { id: '1', name: 'Design', duration: 5, assignee: 'Ada' },
    { id: '2', name: 'Build', duration: 3, assignee: 'Ada' },
  ],
});
const overBefore = plan.overAllocations.length;   // Ada is double-booked
plan.level();                                      // shift one task later
const overAfter = plan.overAllocations.length;     // now clear
const xml = exportMSPDI({ tasks: plan.tasks, dependencies: plan.dependencies, schedule: plan.schedule });
const back = importMSPDI(xml);
return [overBefore, overAfter, back.ok, back.tasks.length, xml.startsWith('<?xml')].join(' | ');

Earned-value analytics. With a captured baseline (captureBaseline) and per-task percentComplete, gantt.earnedValue({ statusDate }) (or the standalone computeEarnedValue(tasks, schedule, { statusDate })) reports EVM at a status date - Planned Value (PV/BCWS) from the baseline, Earned Value (EV/BCWP) from %complete, Actual Cost (AC/ACWP) from a per-task actualCost - and the derived Schedule Variance (EV−PV), Cost Variance (EV−AC), SPI (EV/PV) and CPI (EV/AC), per task and rolled up to summaries and the project. Give each task a cost for money-based EVM, or omit it for schedule-only EVM off the durations. The split view surfaces any metric through kind: 'evm' columns. This worked example reproduces the classic four-side fence: at the end of day 3, three sides are planned (PV 3000) but two are done (EV 2000) at a cost of 2500 (AC).

const { createGantt, computeEarnedValue } = await import('../packages/modules/gantt/index.js');
const tasks = [
  { id: 's1', name: 'Side 1', duration: 1, cost: 1000, percentComplete: 100, actualCost: 1250, baselineStart: 0, baselineEnd: 1 },
  { id: 's2', name: 'Side 2', duration: 1, cost: 1000, percentComplete: 100, actualCost: 1250, baselineStart: 1, baselineEnd: 2 },
  { id: 's3', name: 'Side 3', duration: 1, cost: 1000, percentComplete: 0, baselineStart: 2, baselineEnd: 3 },
  { id: 's4', name: 'Side 4', duration: 1, cost: 1000, percentComplete: 0, baselineStart: 3, baselineEnd: 4 },
];
const deps = [{ from: 's1', to: 's2' }, { from: 's2', to: 's3' }, { from: 's3', to: 's4' }];
const plan = createGantt({ tasks, dependencies: deps, projectStart: 0 });
const evm = plan.earnedValue({ statusDate: 3 });                          // via the controller
const direct = computeEarnedValue(tasks, plan.schedule, { statusDate: 3 }); // or standalone
const p = evm.project;
return [p.pv, p.ev, p.ac, p.sv, p.cv, p.spi.toFixed(2), p.cpi.toFixed(2), direct.project.ev].join(' | ');

S-curve. gantt.sCurve({ statusDate, bucket }) turns the same earned-value arithmetic into a cumulative curve - one { date, pv, ev, ac } point per bucket from the project start to the finish, with the final PV equal to the total budget; gantt.mountSCurve(container, opts) draws that curve (three lines, a status-date marker, a legend and a hidden table) and hands back a handle whose refresh() redraws it and destroy() detaches it.

const { createGantt, computeSCurve } = await import('../packages/modules/gantt/index.js');
const tasks = [
  { id: 'a', duration: 2, cost: 100, percentComplete: 100 },
  { id: 'b', duration: 2, cost: 200, percentComplete: 50 },
  { id: 'c', duration: 2, cost: 300, percentComplete: 0 },
];
const plan = createGantt({ projectStart: 0, tasks });
const curve = plan.sCurve({ statusDate: 2, bucket: 'day' });                       // via the controller
const direct = computeSCurve(tasks, plan.schedule, { statusDate: 2, bucket: 'day' }); // or standalone
const last = curve[curve.length - 1];
// Two day buckets; the last point lands on the finish with the whole 600 budget planned.
return [curve.length, last.pv, last.date, direct.length, direct[direct.length - 1].pv].join(' | ');

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');
const { root } = createTestDom({ width: 640, height: 240 });
const plan = createGantt({
  projectStart: 0,
  tasks: [
    { id: 'a', duration: 3, cost: 100, percentComplete: 100, actualCost: 110 },
    { id: 'b', duration: 3, cost: 100, percentComplete: 50, actualCost: 40 },
  ],
});
const handle = plan.mountSCurve(root, { statusDate: 2, bucket: 'day', width: 400, height: 200 });
// The handle detaches the chart; the chart draws the three series and the status marker.
const series = [...root.querySelectorAll('.lat-gantt-scurve__series')].map((s) => s.getAttribute('data-series'));
const out = [typeof handle.destroy, typeof handle.refresh, series.join(','), root.querySelector('.lat-gantt-scurve__status') != null].join(' | ');
handle.destroy();
plan.destroy();
return out;

Resource-rate cost. A resource may carry an hourly rate, dated rates: [{ from, rate }] changes, and a type ('work' default, 'material' cost per assignment unit, 'cost' a flat amount per assignment). gantt.cost() (or the standalone computeCost(tasks, schedule, { resources })) prices every task as Σ assignment effort × the rate in force each day, plus the task's own fixed cost, rolled up to summaries and the project - a task with no explicit cost and no rated assignment costs nothing, keeping a plan with no rate data unaffected. earnedValue() reads this same rate-derived figure as its BAC when a task carries no explicit cost. Ann is $50/h through day 2, then $60/h from day 2 on; task "a" (days 0-1) costs 16h at the old rate, task "b" (day 0 only, since it has no dependency on "a") costs 8h at the same old rate too.

const { createGantt, computeCost } = await import('../packages/modules/gantt/index.js');
const tasks = [
  { id: 'a', duration: 2, assignee: 'Ann' },
  { id: 'b', duration: 1, assignee: 'Ann' },
];
const resources = [{ id: 'Ann', rate: 50, rates: [{ from: 2, rate: 60 }] }];
const plan = createGantt({ projectStart: 0, tasks, resources });
const cost = plan.cost();                                            // via the controller
const direct = computeCost(tasks, plan.schedule, { resources });     // or standalone
const evm = plan.earnedValue();                                      // EV's BAC falls back to this same figure
return [cost.byTask.get('a').cost, cost.byTask.get('b').cost, cost.project.cost, direct.project.cost, evm.byTask.get('a').bac].join(' | ');

Render the plan as an SVG timeline with mount(container, options) - bars on a time scale, dependency arrows with a per-link-type anchor and a lag/lead label, the critical path highlighted, a today line, optional non-working-day shading, milestones as diamonds, a progress bar-fill and configurable labels. The view redraws itself whenever the schedule recomputes; unmount() detaches it. All geometry is computed from the schedule, so it draws identically headless or in a browser.

import { createGantt } from '@toclocoinc/lattice-grid/modules/gantt';

const gantt = createGantt({ tasks, dependencies });
gantt.mount(document.querySelector('#plan'), {
  today: '2026-03-06',      // a day-number, ISO date or Date; draws the today line
  nonWorking: 'weekends',   // shade Saturdays and Sundays
  label: 'percent',         // bar label: 'name' | 'percent' | 'dates' | (task) => string
  dateAxis: true,           // axis ticks as calendar dates
  zoom: 'week',             // 'day' | 'week' | 'month' | 'quarter' | pixels-per-day; omit to fit width
  scrollToToday: true,      // scroll so the today line is in view
  groupBy: 'assignee',      // swimlanes by a task property or (task) => key
  rowHeight: 26,
  width: 'container',       // the default: fill the container, and keep following it
  markers: [                // vertical date markers
    { date: '2026-03-09', label: 'Freeze', colour: '#e2513b', dashed: true },
    { from: '2026-03-11', to: '2026-03-13', label: 'Review' },
  ],
});

Vertical date markers. A markers array on mount or mountSplit draws display-only annotations through the whole plot: each { date, label } is a full-height line with its label in the time header, a { from, to } entry shades the range between the two dates with an edge line at each end, and colour/dashed restyle the line. Dates are day-numbers, ISO date strings or Dates; in the plain view a string/Date is rebased through projectEpoch like today. Markers are redrawn at every zoom and never touch the schedule; a marker that cannot resolve is skipped with a warning, and the rest of the plan still draws.

const { createTestDom, resetTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

// The plain view: a dashed, coloured line at a date and a shaded range.
const { root } = createTestDom();
const plain = createGantt({ tasks: [{ id: 'a', duration: 8 }] });
plain.mount(root, {
  markers: [
    { date: 2, label: 'Freeze', colour: '#e2513b', dashed: true },
    { from: 5, to: 7, label: 'Review' },
  ],
});
const line = root.querySelector('.lat-gantt__marker');
const plainOut = {
  lines: root.querySelectorAll('.lat-gantt__marker').length,
  labels: [...root.querySelectorAll('.lat-gantt__marker-label')].map((l) => l.textContent).join('+'),
  ranges: root.querySelectorAll('.lat-gantt__marker-range').length,
  dash: line.getAttribute('stroke-dasharray'),
  colour: line.getAttribute('stroke'),
};
plain.destroy();

// The split view draws the same markers, labels in its own time header.
const { root: root2 } = createTestDom();
const split = createGantt({ tasks: [{ id: 'a', duration: 8 }] });
split.mountSplit(root2, {
  markers: [{ date: 2, label: 'Freeze' }, { from: 5, to: 7, label: 'Review' }],
});
const splitOut = {
  lines: root2.querySelectorAll('.lat-gantt-split__marker').length,
  labels: [...root2.querySelectorAll('.lat-gantt-split__marker-label')].map((l) => l.textContent).join('+'),
  ranges: root2.querySelectorAll('.lat-gantt-split__marker-range').length,
};
split.destroy();
resetTestDom();

return `plain ${plainOut.lines} lines, ${plainOut.labels}, ${plainOut.ranges} range, ${plainOut.dash} ${plainOut.colour}; split ${splitOut.lines} lines, ${splitOut.labels}, ${splitOut.ranges} range`;

Sizing. width defaults to 'container': the view measures the box it was mounted into and redraws itself whenever that box changes, so a plan in a tab, a drawer, an accordion, a responsive panel or a split pane fits without the host writing a ResizeObserver of its own. A container with no box - a hidden tab, or an element that has not been laid out yet - is not treated as a container of zero width: the view holds a 720px fallback and adopts the real width the moment there is one. Pass a number to take the decision yourself; a numeric width is honoured exactly, installs no observer, and keeps the eight-tick axis it always had - only a container-sized plot thins its tick labels to the width it was given, because only a container-sized plot can be somewhere it had not been before. zoom and a numeric width are mutually exclusive: zoom wins - it fixes the pixels-per-day and lets the plot scroll past the container - and passing both now warns rather than discarding the width in silence.

The time axis thins its own labels. A Gantt picks its tick rhythm from the calendar - every day at zoom: 'day', every seven days at 'week', every month above that - and that rhythm knows nothing about how wide a date is. Where a label is wider than the gap between two ticks, only every nth label is drawn: the largest regular stride that leaves at least 6px of clear space between neighbours, so the axis keeps an even rhythm a reader can count on rather than the uneven gaps a greedy left-to-right fit would leave. The gridlines and the split view's week separators are not thinned with the text - the fine rhythm is information and costs nothing to read; it was only ever the text that collided. Both surfaces do it: mount's axis and mountSplit's timeline header, which is where a week-zoom header used to read Sun 05 Oct 2025 Sun 12 Oct 2025 Sun 19 Oct 2025 with each date painted across the next. Widening the Gantt now shows more dates rather than the same overlap, and the thinning is re-decided on every draw, so a resize or a zoom change re-fits the labels. An un-zoomed axis is untouched: it already chooses how many ticks to draw from the plot's own width, so its labels always fitted, and a host that passed an explicit width keeps exactly the drawing it had.

The project anchor. A mount option, not a mountSplit one: the joined split view below takes neither projectEpoch nor a date-valued today, and its weekend shading is unanchored. The engine's time line is whole days since the Unix epoch, so a plan written as day offsets (0, 4, 9…) legitimately renders as January 1970 - day 0 is 1970-01-01, and the module cannot tell an offset from a real epoch day, so it cannot warn about it. projectEpoch says which calendar date plan day 0 stands for. It and today take an ISO date string, a Date or a day number. A Date is read as the calendar date its local wall clock shows, the way a date column reads one: new Date(2026, 2, 2) is 2 March in every time zone, and a Date that carries a time of day is the local day it falls on. Before 1104 the UTC instant was floored, which put local midnight a day early everywhere east of Greenwich. A Date is therefore decided by the reader's zone; a string is the same day on every machine - '2026-03-02' is 2 March in Sydney and in New York alike - which is the form to prefer for an anchor stored with the plan. Recognise your own case: if you worked around the old behaviour by passing new Date(Date.UTC(y, m, d)), a reader west of Greenwich now sees the previous day, because UTC midnight is still the evening before in New York - pass new Date(y, m, d) or the ISO string instead. It is display-only: axis ticks, bar labels, tooltips, screen-reader text and the built-in weekend shading move with it, and nothing the scheduler, getState, the CSV or the MSPDI export produces does - every es/ef you read back is still the number you supplied. A host-supplied nonWorking function keeps receiving raw plan days, since it was written against your day numbers. Use projectStart instead when you want the model itself to be on calendar dates.

// A relative plan: offsets in the data, real dates on the screen.
gantt.mount(el, {
  projectEpoch: '2026-03-02',  // plan day 0 is this Monday
  nonWorking: 'weekends',      // so days 5-6 are the first weekend
  today: '2026-03-06',         // converted into plan space through the anchor
});
gantt.view.scrollToToday();  // also callable on demand
gantt.applyEdit({ id: 'design', duration: 7 }); // the view redraws automatically
gantt.unmount();

Dependency arrows. A link is routed by geometry. When the successor's anchor is at or beyond the predecessor's, it goes straight down and then in - a plain zero-lag finish-to-start link, where the two anchors share an x, is a clean vertical. When the anchor is behind the predecessor's - a negative lag (a lead), or two overlapping tasks - "down then in" does not exist, so the link takes a deliberate detour: out on the predecessor's own side, along a lane between the two rows, down, and in. Either way the final segment runs in the direction the arrowhead points, which is what stops a link doubling back on itself. The anchors themselves differ per link type - FS finish→start, SS start→start, FF finish→finish, SF start→finish - and so does the side the arrow arrives on, so an FF or SF link comes in from the right of the successor's finish rather than running through the bar to get there.

Link shorthand. A dependency's type accepts the MS Project string form as well as the structured one: 'FS+2', 'SS-1'. It normalises to { type: 'FS', lag: 2 } on the way in, so gantt.dependencies, the scheduler, the lag label and the MSPDI export all see the one canonical form. A shorthand lag alongside an explicit lag that disagrees warns; the explicit field wins.

createGantt({ tasks, dependencies: [
  { from: 'design', to: 'build', type: 'FS+2' },   // same as { type: 'FS', lag: 2 }
  { from: 'build',  to: 'test',  type: 'SS-1' },   // a lead
] });

Bars are draggable: drag the body to move a task, drag the right edge to resize it. When a grid and a columns map are given, each drag writes the new dates back through the grid's public edit surface (grid.edit.setCells) and reconciles a reverted or conflicted write; autoSchedule: true cascades dependents. A task placed earlier than its predecessors allow is flagged (findViolations), not silently moved.

import { createGantt } from '@toclocoinc/lattice-grid/modules/gantt';

const gantt = createGantt({
  tasks, dependencies, grid,          // a Lattice grid over the same tasks
  columns: { start: 'start', duration: 'duration' }, // task field -> grid column
  autoSchedule: true,
});
gantt.mount(document.querySelector('#plan'), { editable: true });
// drag a bar -> gantt.applyEdit(..., { writeBack: true }) -> grid.edit.setCells(...)

Hovering a bar shows a tooltip with its dates, duration, % complete and slack. Tasks are flagged when they slip: overdue (incomplete and finishing before today) and at-risk (negative total float). Negative float needs a target: pass a deadline (a day-number) to createGantt and any task that cannot meet it gets negative slack and is drawn at-risk.

Export: gantt.toCSV() writes the scheduled tasks as CSV ({ dates: true } for ISO dates); when a grid is bound, the grid's own Excel/CSV export works too. gantt.view.toSVG() serialises the drawn chart to a standalone SVG string - the handoff for turning it into an image or PDF.

Accessibility: bars are focusable and carry an aria-label describing the task (name, dates, progress, slack, critical). With the keyboard, arrows move a focused task, Shift+arrows resize it, and L links two tasks (press it on the source, then on the successor) with a finish-to-start dependency; every edit is announced in a polite live region and focus follows the edited task. Set keyboard: false to opt out.

Two panes, two ways. There are two arrangements, and which one you want depends on whether the left pane is your grid or the Gantt's own. gantt.mountSplit(container, options) - the joined split view, whose options are listed with GanttController in the type reference - draws both panes itself as one row-aligned surface, and is what to reach for unless you specifically need your own grid beside the timeline. The arrangement described here is the other one: you create and place a normal Lattice grid over the same task rows, mount the timeline beside it with gantt.mount(), and the Gantt consumes the grid rather than building it.

Binding a grid you built yourself. It is two-way. A drag on the timeline writes the new dates back through the grid's public edit surface (grid.edit.setCells) whenever createGantt was given a grid and a columns map - without both, the drag moves the bar and writes nothing - and an edit made in the grid pane, from any editor, reflects on the timeline. Both panes must be given the same row height for the rows to line up, and view.linkVerticalScroll(el) mirrors vertical scroll between them. Neither is needed with mountSplit, which shares one scroll and one row height by construction.

<div class="split" style="display:grid;grid-template-columns:360px 1fr">
  <div id="tasks"></div>   <!-- the grid pane -->
  <div id="plan"></div>    <!-- the timeline pane -->
</div>
<script type="module">
import { createGrid } from '@toclocoinc/lattice-grid';
import { createGantt } from '@toclocoinc/lattice-grid/modules/gantt';

const grid = createGrid({
  element: document.querySelector('#tasks'),
  columns: [{ field: 'name' }, { field: 'start', type: 'number', edit: { enabled: true } },
            { field: 'duration', type: 'number', edit: { enabled: true } }],
  rows: tasks, rowKey: 'id', edit: { enabled: true },
});
const gantt = createGantt({ tasks, dependencies, grid, columns: { start: 'start', duration: 'duration' } });
gantt.mount(document.querySelector('#plan'));
gantt.view.linkVerticalScroll(grid.element);   // keep the two panes aligned
</script>

Split view: the resource histogram. mountSplit's workload option draws a table of hours; its sibling histogram option draws the SAME numbers as bars instead - one row per resource, bars per time bucket, a dashed capacity line, and a tooltip on hover or keyboard focus. Both bands can be mounted together, the histogram drawn below the workload table; either alone is fine too. true takes the defaults; an object overrides resources (which to draw, and in what order - omitted draws every resource, Unassigned last), unit ('hours', the default, or 'percent' of capacity - a resource with no capacity falls back to hours for its own row), stacked ('task' splits a bar into one coloured segment per contributing task; the default draws one solid bar), height and rowHeight.

A bar that exceeds its resource's capacity carries two parts: the normal fill up to capacity, and the over-allocation fill above it - present whether or not stacked is on, since the over-allocated portion is always one thing to see, never split per task. The bars are positioned with the SAME day-to-pixel mapping as the timeline above them, so a bucket's edges line up with the scale header's own columns exactly as the workload band's do. A visually-hidden table (resource, period, hours or percent, capacity, over-allocated) carries the identical figures for a screen reader, rebuilt on every redraw.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  resources: { Ann: 1 },            // one unit of capacity: an 8-hour day
  tasks: [
    { id: 'design', name: 'Design', start: '2027-01-04', duration: 2, assignee: 'Ann' },
    { id: 'review', name: 'Review', start: '2027-01-05', duration: 3, assignee: 'Ann', work: 6 },
  ],
});
// Tuesday carries both tasks: design's 8h plus review's 2h is 10h against
// Ann's 8h capacity - over, and (stacked: 'task') splits it into two segments.
const view = gantt.mountSplit(root, { zoom: 'day', histogram: { stacked: 'task' } });
const NS = 'lat-gantt-split';
const tuesday = root.querySelector('.' + NS + '__hg-bargroup[data-resource="Ann"][data-bucket="2027-01-05"]');
const segments = tuesday.querySelectorAll('.' + NS + '__hg-bar').length;
const overAllocated = root.querySelectorAll('.' + NS + '__hg-bar--overalloc').length;
// One header row plus one row per bucket the timeline drew - the timeline now
// extends the domain to fill the 800px test pane, so there are 31 bucket rows.
const tableRows = root.querySelectorAll('tr').length;
view.destroy();
return [segments + ' segments', overAllocated + ' over-allocated', tableRows + ' table rows'].join('; ');

Split view: hours or percent. The workload band's own unit option - 'hours' (the default; an existing page is unchanged) or 'percent' of the resource's own available hours that bucket - reads booked ÷ available × 100, where available is the exact figure the over-capacity highlight already uses (the per-resource working calendar from included), never a second calculation; a bucket with a KNOWN zero available hours (a part-timer's non-working day, a week wholly on leave) reads the en-dash '-', never Infinity/NaN, and a resource with no known capacity at all falls back to hours, the same rule the histogram band already shipped. An <button aria-pressed> switch in the band's header toggles the unit live - the histogram band's, too, when one is mounted - and is reachable off the view directly as view.setWorkloadUnit(unit)/view.getWorkloadUnit(); toggling never itself changes the plan. Editing a bucket in percent mode writes HOURS: typing 50 books half the resource's available hours there, through the identical applyEdit path an hours edit already takes.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  resources: { Ann: 1 },           // one unit of capacity: an 8-hour day
  tasks: [{ id: 'design', name: 'Design', start: '2027-01-04', duration: 1, assignee: 'Ann' }],
});
const view = gantt.mountSplit(root, { zoom: 'day', workload: { unit: 'percent' } });
const NS = 'lat-gantt-split';
// Re-queried fresh each time: a unit switch redraws the band onto new cells,
// so a reference held from before the switch would read stale content.
const cellText = () => root.querySelector('.' + NS + '__wl-timerow[data-resource="Ann"]')
  .querySelector('.' + NS + '__wl-bucket[data-bucket="2027-01-04"]').textContent;
const before = cellText();    // 8h booked of Ann's 8h available Monday: 100%
view.setWorkloadUnit('hours'); // the same toggle the band's own switch drives
const after = cellText();     // the identical booking, read back as hours: 8
view.destroy();
return [before, after].join(' | ');

Split view: a band's maximum height. The workload and histogram bands used to keep one fixed height, so a long resource list squeezed the plan above them. workload.maxHeight (and histogram.maxHeight) changes what that height MEANS: instead of a fixed box, the band sizes itself to its rows - the header strip plus one row per resource (and the workload band's totals row and any expanded sub-rows) - capped at this many pixels. Past the ceiling the band scrolls vertically on its own, with its header pinned above the scrolling rows; under it the band shrinks to its content, so a two-resource plan gets a two-row band, not an empty box. Either way the plan keeps at least half the view whatever the ceiling (a ceiling that would not fit beside the plan is shrunk to what would), and the same is true in the grid-table mode. A band with no maxHeight keeps its fixed height, so an existing page is unchanged.

const { createTestDom, resetTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const NS = 'lat-gantt-split';
const flex = (root) => root.querySelector('.' + NS + '__wl').style.flex;
// Forty resources, one task each: content is (40 rows + totals + header) × 28px,
// so the 240px ceiling binds and the band scrolls past it.
const many = Array.from({ length: 40 }, (_, i) => ({ id: 't' + i, name: 'Task ' + i, start: '2027-01-04', duration: 1, assignee: 'r' + i }));
let { root } = createTestDom();
createGantt({ projectStart: '2027-01-04', tasks: many })
  .mountSplit(root, { height: 800, zoom: 'day', workload: { maxHeight: 240 } });
const capped = flex(root);
// Two resources: content is (2 + totals + header) × 28 = 112px - under the
// ceiling, so the band shrinks to its rows instead of keeping a fixed height.
resetTestDom();
({ root } = createTestDom());
createGantt({ projectStart: '2027-01-04', tasks: many.slice(0, 2) })
  .mountSplit(root, { height: 800, zoom: 'day', workload: { maxHeight: 240 } });
const sized = flex(root);
return capped + ' | ' + sized;

Split view: load from other projects. A resource's real load is not always this plan's own tasks. Two equivalent spellings book load that counts in the workload band, the histogram and the band's own over-allocation highlight without ever becoming a row or a bar on the timeline, and without ever touching the critical path, the project finish or a summary: a task carrying loadOnly: true books its own start/end/duration and assignments exactly as any task would, but the controller keeps it out of the schedule entirely; the workload.external option books { resource, start, end, units | hours, label, group } directly, with no task behind it at all. Either way the booking is listed under its resource's expanded sub-rows as another project's booking (drawn distinctly, never editable - there is no bar to drag and no contour to write back to).

const { createTestDom, resetTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-02-01',
  resources: { Ann: 1 },
  tasks: [
    { id: 'design', name: 'Design', start: '2027-02-01', duration: 1, assignee: 'Ann' },   // 8h Monday
    { id: 'review', name: 'Review', start: '2027-02-02', duration: 1, assignee: 'Ann' },   // 8h Tuesday
    // Another project's booking, carried as a task so it has its own dates,
    // but flagged load-only: counted in the band, never a row or a bar.
    { id: 'other', name: 'Other launch', start: '2027-02-02', duration: 1, assignee: 'Ann', work: 4, loadOnly: true },
  ],
});
const view = gantt.mountSplit(root, {
  zoom: 'day',
  workload: {
    // The non-task spelling of the same idea: no task at all behind it.
    external: [{ resource: 'Ann', start: '2027-02-01', end: '2027-02-02', hours: 2, label: 'Phoenix support' }],
  },
});
const NS = 'lat-gantt-split';
const bars = root.querySelectorAll('.' + NS + '__barrow').length; // design + review only
const total = root.querySelector('.' + NS + '__wl-row[data-resource="Ann"]')
  .querySelector('.' + NS + '__wl-cell--total').textContent;
// 8 (design) + 8 (review) + 4 (other, load-only) + 2 (external) = 22
view.toggleResource('Ann');
const otherProjectRows = root.querySelectorAll('.' + NS + '__wl-row--loadonly').length; // "other" + the external entry
const finish = gantt.schedule.projectFinish; // unaffected by "other" - it never reaches the CPM engine
view.destroy();
resetTestDom();
return `${bars} bars; total ${total}; ${otherProjectRows} other-project rows; finish unaffected: ${finish === gantt.schedule.tasks.get('review').ef}`;

Split view: resizable columns and divider. Every left-table column header (__colhead) carries a draggable right border with a col-resize cursor; once it is focused (by pointer or Tab), the arrow keys step it 8px a press, 32px with Shift. A column's own minWidth/maxWidth clamp how far it goes, and resizable: false omits the border entirely. The table/timeline divider (gridWidth) is the same gesture - a thin strip between the two panels, focusable and keyed the same way. A settled drag or keystroke on either - never mid-drag - fires exactly one columnResize event: { key, width, widths }, the divider reporting key: 'grid' and widths carrying every column's current width plus the divider's own. The same widths are reachable any time off the view as view.getColumnWidths(), and round-trip through gantt.getState()/setState() - restoring a saved state calls view.setColumnWidths() for you.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root, document } = createTestDom();
const columns = [
  { key: 'name', title: 'Task', width: 0, kind: 'name' },
  { key: 'duration', title: 'Days', width: 60, kind: 'duration', minWidth: 50, maxWidth: 90 },
  { key: 'locked', title: 'Locked', width: 40, resizable: false },
];
const gantt = createGantt({ projectStart: '2027-01-04', tasks: [{ id: 'design', name: 'Design', duration: 5 }] });
const view = gantt.mountSplit(root, { gridWidth: 300, columns });
const NS = 'lat-gantt-split';

let events = 0;
let lastKey = null;
gantt.on('columnResize', (e) => { events += 1; lastKey = e.key; });

// Drag the "Days" column's border 50px right - past its own 90px maxWidth.
const handle = root.querySelector('.' + NS + '__colresize[data-resize-key="duration"]');
handle.dispatchEvent({ type: 'pointerdown', target: handle, clientX: 0, clientY: 0, button: 0, bubbles: true });
document.documentElement.dispatchEvent({ type: 'pointermove', target: document.documentElement, clientX: 50, clientY: 0 });
document.documentElement.dispatchEvent({ type: 'pointerup', target: document.documentElement, clientX: 50, clientY: 0 });
const daysWidth = root.querySelectorAll('.' + NS + '__colhead')[1].style.width;

// `resizable: false` grows no border to drag at all.
const lockedHandle = root.querySelector('.' + NS + '__colresize[data-resize-key="locked"]');

// Shift+ArrowRight on the focused divider steps it 32px.
const divider = root.querySelector('.' + NS + '__divider--resize');
divider.dispatchEvent({ type: 'keydown', target: divider, key: 'ArrowRight', shiftKey: true, bubbles: true });

// Persist the resize, remount fresh, and restore it.
const saved = gantt.getState();
gantt.mountSplit(root, { gridWidth: 300, columns });
gantt.setState(saved);
const restored = gantt.getState();

view.destroy();
return [events, lastKey, daysWidth, lockedHandle ? 'handle' : 'none', restored.gridWidth, restored.columnWidths.duration].join(' | ');

Split view: the plain table keeps the name column legible. In the hand-built table (no createGrid) every column keeps its declared or natural width, and the name column is never squeezed below its 160px floor - overridable per column with minWidth - to fit gridWidth; when the columns are wider than the pane the pane scrolls sideways (header and body together) instead of compressing them. A task name renders on one line with one trailing ellipsis, its full text in the cell's native title and accessible name, and every row stays rowHeight. Pass wrapNames: true to opt back into wrapping, which grows the row to fit.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const NS = 'lat-gantt-split';
const gantt = createGantt({ projectStart: '2027-01-04', tasks: [
  { id: 'a', name: 'Design the landing page with a long name that would wrap', duration: 5 },
] });

const view = gantt.mountSplit(root, { gridWidth: 300 });
const widths = view.getColumnWidths();
const nameText = root.querySelector('.' + NS + '__name-text');
const row = root.querySelector('.' + NS + '__row[data-task="a"]');
const oneLine = nameText.classList.contains(NS + '__name-text--nowrap');
const rowH = row.style.height;

// `wrapNames: true` opts back into wrapping, so the row grows to fit.
gantt.mountSplit(root, { gridWidth: 300, wrapNames: true });
const wrapped = root.querySelector('.' + NS + '__row[data-task="a"]').style.height !== rowH;

view.destroy();
return [widths.name, widths.start, oneLine ? 'one' : 'wrap', rowH, wrapped ? 'true' : 'false'].join('|');

Split view: the critical-path highlight. By default every zero-float task and its dependency arrows are drawn in the critical colour. showCritical: false on mountSplit turns that off entirely, and view.setShowCritical(bool) toggles it live - a redraw in place, no remount. criticalStyle: 'fill' (the default) recolours a critical bar; criticalStyle: 'outline' keeps the bar's own fill and adds only the critical outline, so the marking sits over per-task colours. A kind: 'slack' left-panel column shows each task's total float in whole working days, read-only.

const { createTestDom, resetTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  tasks: [
    { id: 'a', name: 'Design', duration: 3 },
    { id: 'b', name: 'Build', duration: 2 },
    { id: 'd', name: 'Docs', duration: 1 },        // 4 days of float
  ],
  dependencies: [{ from: 'a', to: 'b', type: 'FS' }],
});
const NS = 'lat-gantt-split';
const barOf = (id) => {
  const r = root.querySelector('.' + NS + '__barrow[data-task="' + id + '"]');
  return r ? r.querySelector('.' + NS + '__bar') : null;
};

const view = gantt.mountSplit(root, { columns: ['name', 'slack'] });
const criticalOn = barOf('a').classList.contains(NS + '__bar--critical');
const slack = root.querySelector('.' + NS + '__grid-body')
  .querySelector('.' + NS + '__row[data-task="d"]')
  .querySelector('.' + NS + '__cell[data-col="1"]').textContent;

view.setShowCritical(false);                      // redraw, no remount
const toggledOff = !barOf('a').classList.contains(NS + '__bar--critical');
view.setShowCritical(true);
const toggledBack = barOf('a').classList.contains(NS + '__bar--critical');

const outline = gantt.mountSplit(root, { columns: ['name'], criticalStyle: 'outline' });
const outlineClass = barOf('a').classList.contains(NS + '__bar--critical-outline');
const keepsOwnFill = !barOf('a').classList.contains(NS + '__bar--critical');
outline.destroy();
resetTestDom();

return [criticalOn, slack, toggledOff, toggledBack, outlineClass, keepsOwnFill].join('|');

Split view: the tables as real grids. Inject your grid factory - mountSplit(el, { createGrid }), injected rather than imported so the Gantt bundle does not carry the grid - and the task table, the workload band’s resource table and the histogram band’s are mounted as real Lattice grids, configured with the normal column API: columns for the tasks, workload.columns and histogram.columns for the bands. Every built-in column (name, start, end, duration, progress, assignee, effort, units; a band’s resource and total) is an ordinary column: name it by id to show it, give an object with its id to override part of it (merged one level deep, so a reformatted start still reschedules the plan when edited), leave it out to remove it, and add any number of your own columns with the full grid spec. List order is display order; only name (tasks) and resource (bands) are required. Rows are drawn at the timeline’s own row heights and scroll with it; a grid sort or filter reorders the timeline (or the band’s plot) to match. Each table’s column order, widths, visibility, sort and filters round-trip through gantt.getState()/setState() under tables, and columnResize still fires. A band’s time buckets are grid columns too - one per timeline bucket, pinned under the timeline’s own scale - but every header control is switched off on them and a column definition wins over any restored state, so a bucket never carries a sort, filter, menu, drag, hide, resize or group control of any kind. The grids themselves are on view.grids.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGrid } = await import('../packages/dom/src/index.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({ projectStart: '2027-01-04', tasks: [
  { id: 'design', name: 'Design', duration: 5, cost: 1200, assignee: 'Ann' },
  { id: 'build', name: 'Build', duration: 3, cost: 800, assignee: 'Bob', dependsOn: ['design'] },
] });
const view = gantt.mountSplit(root, {
  createGrid,
  columns: [
    'name',
    { id: 'start', title: 'Begins', format: { type: 'date', pattern: 'dd/MM/yyyy' } }, // an overridden default
    { id: 'cost', field: 'cost', title: 'Cost', type: 'number' },                         // a host column
  ],
  workload: { columns: [{ id: 'resource', title: 'Who' }, 'total'] },
});

const grid = view.grids.tasks;
grid.sort.set([{ col: 'cost', dir: 'asc' }]);     // the timeline follows the grid's order
const saved = gantt.getState();                     // saved.tables.task carries the sort

const out = [
  grid.columns.visible().map((c) => c.id).join(','),
  grid.rows.text('design', 'start'),
  view.rowGeometry().map((g) => g.id).join(','),
  saved.tables.task.sort.map((s) => s.col + ':' + s.dir).join(','),
  view.grids.workload.columns.visible().filter((c) => !/^\d{4}-\d{2}-\d{2}$/.test(c.id)).map((c) => c.title).join(','),
].join(' | ');
view.destroy();
return out;

Split view: the bands’ own columns. workload.columns and histogram.columns are independent of the task table. Besides the built-in resource and total, a column is { key, title, width, align, value(resource, ctx), render(resource, ctx), subRows }. resource is the resource’s own spec from resources (a role, a team, a rate …) plus its key and display name; ctx carries the band’s figures for the row (capacity, total, cost, over, overCount, unit, tasks). A host can compute anything there: a cross-project peak, the weeks over-allocated. value is what the column sorts and filters on; render, when given, draws the cell (a string is set as text, a node is mounted). subRows is the rule for the task sub-rows beneath an expanded resource: 'blank' (default) shows nothing, 'inherit' repeats the resource’s value, and a function (task, resource, ctx) supplies the sub-row’s own. The totals row is blank. The grid header sorts and resizes the columns; a settled resize fires columnResize under a namespaced key (band:role for the workload band, histogram:role for the histogram), and getColumnWidths()/setColumnWidths() round-trip those keys. The time buckets are grid columns too but never get header controls - each is inert to sort, filter, resize and move whatever the config. Needs createGrid, as the other grid columns do.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGrid } = await import('../packages/dom/src/index.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  resources: [{ id: 'ann', name: 'Ann', role: 'Designer', capacity: 1 }],
  tasks: [{ id: 'a', name: 'Design', duration: 5, assignee: 'ann' }],
});
const view = gantt.mountSplit(root, {
  createGrid,
  workload: { columns: [
    'resource',
    { key: 'role', title: 'Role', width: 90, value: (r) => r.role, subRows: 'inherit' },
    { key: 'peak', title: 'Peak', width: 70, align: 'right', value: (r, ctx) => ctx.total },
  ] },
});
const grid = view.grids.workload;
view.toggleResource('ann');
view.setColumnWidths({ 'band:role': 120 });
const out = [
  grid.columns.visible().map((c) => c.id).filter((id) => !/^\d{4}-\d{2}-\d{2}$/.test(id)).join(','),
  grid.rows.text('ann\u0000', 'role'),
  grid.rows.text('ann\u0000a', 'role'),
  grid.rows.text('ann\u0000a', 'peak'),
  'band:role=' + view.getColumnWidths()['band:role'],
].join(' | ');
view.destroy();
return out;

Split view: the grid’s select and bounded-number editors. A host column can ask for one of the grid’s own editors with the plain editor shorthand instead of a full edit/lookup spec: editor: { type: 'select', options } gives the select editor - a dropdown of the options in the order given, committing the chosen option’s value - and editor: { type: 'number', min, max, step } gives the number editor, which clamps to the bounds and steps by step (a spinner is added, so the step is keyboard-operable). An editor makes the column editable unless editable/edit says otherwise, and it needs createGrid: the lightweight tables have no editors. A host column written with a pre-grid key and no field writes its field back under that id.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGrid, createEditor } = await import('../packages/dom/src/index.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root, document } = createTestDom();
const gantt = createGantt({ projectStart: '2027-01-04', tasks: [
  { id: 'design', name: 'Design', duration: 5, status: 'New', cost: 500 },
] });
const view = gantt.mountSplit(root, {
  createGrid,
  columns: [
    'name',
    { key: 'status', editor: { type: 'select', options: ['New', 'In progress', 'Done'] } }, // a dropdown column
    { key: 'cost', editor: { type: 'number', min: 0, max: 1000, step: 100 } },               // a bounded number column
  ],
});

const grid = view.grids.tasks;
const options = grid.columns.get('status').lookup.options().map((o) => o.label).join(',');

// The number editor clamps a typed value to the bound, and steps by `step`.
const number = createEditor({
  document, cell: document.createElement('div'), overlay: document.body,
  column: grid.columns.get('cost'), value: 500,
});
number.input.value = '2500';
const clamped = number.commit().value;

// The select editor commits the chosen option to the task's field.
grid.edit.setCells([{ key: 'design', colId: 'status', value: 'In progress' }], 'cell', { origin: 'user' });
await new Promise((r) => setTimeout(r, 5));
const chosen = gantt.taskById('design').status;

view.destroy();
return [options, chosen, clamped].join(' | ');

Split view: workload thresholds, showUnassigned and the click event. The workload band's thresholds option colours a cell - and the histogram band's bar for the same bucket - by how full the bucket is: each entry is { at, className | colour }, at a fraction of the bucket's available hours (0.8 = 80% booked), and either a className added to the cell/bar or a colour applied inline (spelled colour or color). The highest threshold a bucket reaches wins, and it applies in every unit - hours, percent and cost - because the fraction is read off the hours figures, which is also why it still works in cost mode, where the band has no capacity line. showUnassigned: false hides the Unassigned row. Clicking a cell fires workload:click: { resource, bucketStart, bucketEnd, booked, available, tasks }, the hour figures always hours whatever the band is drawing.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  resources: { Ann: 1 },            // one unit of capacity: an 8-hour day
  tasks: [
    { id: 'design', name: 'Design', start: '2027-01-04', duration: 1, assignee: 'Ann' },
    { id: 'loose', name: 'Loose', start: '2027-01-04', duration: 1 },   // no assignee
  ],
});
const view = gantt.mountSplit(root, {
  zoom: 'day',
  workload: { thresholds: [{ at: 0.5, colour: 'rgb(255, 0, 0)' }], showUnassigned: false },
});
const NS = 'lat-gantt-split';
// Monday: Ann books 8h of her 8h capacity - 100% meets the 0.5 threshold, so
// the configured colour lands on the cell (and would on the histogram bar).
const row = root.querySelector('.' + NS + '__wl-timerow[data-resource="Ann"]');
const cell = row.querySelector('.' + NS + '__wl-bucket[data-bucket="2027-01-04"]');
const coloured = cell.style.backgroundColor;
// The unassigned task's row is hidden.
const unassigned = root.querySelector('.' + NS + '__wl-timerow[data-resource=""]') ? 'shown' : 'hidden';
// A click on the cell reports the bucket's bookings.
let clicked = null;
gantt.on('workload:click', (e) => { clicked = e; });
cell.dispatchEvent({ type: 'click', target: cell, bubbles: true });
view.destroy();
return [coloured, unassigned, clicked.resource, clicked.bucketStart, clicked.booked, clicked.available, clicked.tasks.length, clicked.tasks[0].id].join(' | ');

Split view: the task table's own cell and row events. The task table became a real Lattice grid; this maps its own pointer and edit events onto the controller - cellClick/cellDblClick/cellContextMenu, rowClick/rowDblClick and the edit lifecycle beforeCellEditStart (vetoable) / cellEditStart / cellEditCommit / cellEditCancel - with id, rawTask, the scheduled task and the originating DOM event on every payload. A double-click, Enter or F2 on an editable cell with no editor already open raises beforeCellEditStart before the grid's own editor opens, for every one of those paths alike - Enter is also how a COMMIT is typed from inside an already-open editor, but that is told apart by whether an edit is already in progress, not by the key, so a commit is never mistaken for a fresh open attempt. A handler's preventDefault(reason) keeps the cell closed for that gesture - the grid's own cellDblClick is not raised either, since nothing reached the grid at all - and fires the paired cellEditStart:cancelled with that reason, the same before*/:cancelled contract every other gated Gantt event follows. Escape on an open editor raises cellEditCancel; Enter raises cellEditCommit with oldValue/newValue.

const { createTestDom, TestEvent, flushFrames } = await import('../packages/dom/src/renderer/testdom.js');
const { createGrid } = await import('../packages/dom/src/index.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  tasks: [{ id: 'a', name: 'Alpha' }, { id: 'b', name: 'Beta' }],
});
const view = gantt.mountSplit(root, { createGrid, editable: true, keyboard: true, columns: ['name'] });
flushFrames();
const seen = [];
for (const name of ['cellClick', 'rowClick', 'cellDblClick', 'beforeCellEditStart', 'cellEditStart', 'cellEditStart:cancelled', 'cellEditCommit', 'cellEditCancel']) {
  gantt.on(name, (e) => seen.push([name, e.id, e.columnKey, e.reason]));
}
const cellOf = (key) => { const row = root.querySelector(`.lat-row[data-key="${key}"]`); return row ? row.querySelector('.lat-cell[data-col="name"]') : null; };

// A click raises cellClick, then rowClick for the row under it.
cellOf('a').dispatchEvent(new TestEvent('click'));
const [click, rowClick] = seen.splice(0);

// A host veto on beforeCellEditStart keeps row b's cell closed for the
// gesture: no editor opens, cellDblClick is not raised for a gesture the
// gate claimed before the grid's own handler ever saw it, and the paired
// cellEditStart:cancelled carries the veto's reason.
gantt.on('beforeCellEditStart', (e) => { if (e.id === 'b') e.preventDefault('locked'); });
cellOf('b').dispatchEvent(new TestEvent('dblclick'));
const vetoed = !cellOf('b').querySelector('input');
const vetoBatch = seen.splice(0);
const vetoSeen = vetoBatch.map((e) => e[0]).join(',');
const vetoReason = vetoBatch.find((e) => e[0] === 'cellEditStart:cancelled')[3];

// Row a's double-click raises beforeCellEditStart, then cellDblClick and
// cellEditStart, and the grid's own editor opens.
cellOf('a').dispatchEvent(new TestEvent('dblclick'));
const opened = !!cellOf('a').querySelector('input');
const openSeen = seen.splice(0).map((e) => e[0]).join(',');

// Enter commits - cellEditCommit carries the old and new value.
const input = cellOf('a').querySelector('input');
input.value = 'Alpha v2';
input.dispatchEvent(new TestEvent('keydown', { key: 'Enter', bubbles: true }));
await new Promise((r) => setTimeout(r, 5));
const newName = gantt.taskById('a').name;
seen.length = 0;

// Escape abandons an open edit - cellEditCancel, no write.
cellOf('a').dispatchEvent(new TestEvent('dblclick'));
cellOf('a').querySelector('input').dispatchEvent(new TestEvent('keydown', { key: 'Escape', bubbles: true }));
const cancelled = seen.some((e) => e[0] === 'cellEditCancel');
seen.length = 0;

// Row a has no editor open now: Enter on it is an OPEN attempt, not a
// commit, so it raises beforeCellEditStart then cellEditStart exactly like
// the double-click above, and the grid's own editor opens - a key reaching
// an open editor is the only case Enter is ever read as a commit instead.
cellOf('a').dispatchEvent(new TestEvent('keydown', { key: 'Enter', bubbles: true }));
const enterOpened = !!cellOf('a').querySelector('input');
const enterOpenSeen = seen.splice(0).map((e) => e[0]).join(',');

view.destroy();
return [
  `click ${click[0]}+${rowClick[0]}`,
  `veto ${vetoed} (${vetoSeen}) ${vetoReason}`,
  `open ${opened} (${openSeen})`,
  `commit ${newName}`,
  `cancel ${cancelled}`,
  `enterOpen ${enterOpened} (${enterOpenSeen})`,
].join(' | ');

Split view: workload cell and resource events. The workload band's bucket cells and the histogram band's bars raise the same pointer vocabulary on the controller (gantt.on), with resource, resourceName, the half-open bucketStart/bucketEnd, the hours booked/available, the percent of capacity (when a capacity is known), the over flag, the band's unit, the view, the originating DOM event and the contributing tasks ({ id, name, hours, units }) - hour figures always hours, whatever the band is drawing. A per-task sub-row cell adds id, rawTask (the task as you supplied it) and the scheduled task; a resource-name cell raises workloadResourceClick with just resource/resourceName. workloadCellDblClick and workloadCellContextMenu are claimable with preventDefault() (a host's own editor or menu), pairing with no :cancelled - nothing was refused, only claimed. Keyboard focus and Enter/Space on a histogram bar raise the same events as pointer ones, and none fire for the host's own setTasks/rows.apply. Hovering a cell shows a built-in tooltip listing the contributing tasks; set workload.tooltip: false to hide it or workload.tooltip: (payload) => node | string to replace it. The Lattice event names:

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  resources: { Ann: 1 },            // one unit of capacity: an 8-hour day
  tasks: [
    { id: 'design', name: 'Design', start: '2027-01-04', duration: 1, assignee: 'Ann' },
    { id: 'extra', name: 'Extra', start: '2027-01-04', duration: 1, assignee: 'Ann', work: 2 },
  ],
});
const view = gantt.mountSplit(root, { zoom: 'day', workload: true });
const NS = 'lat-gantt-split';
// Monday: Ann books 10h of her 8h capacity - over-allocated, 125%.
let clicked = null;
gantt.on('workloadCellClick', (e) => { clicked = e; });
const row = root.querySelector('.' + NS + '__wl-timerow[data-resource="Ann"]');
const cell = row.querySelector('.' + NS + '__wl-bucket[data-bucket="2027-01-04"]');
cell.dispatchEvent({ type: 'click', target: cell, bubbles: true });
// The hover tooltip lists the contributing tasks.
cell.dispatchEvent({ type: 'pointerover', target: cell, bubbles: true });
const tip = root.querySelector('.' + NS + '__wl-tooltip');
const tipHasExtra = tip && /Extra/.test(tip.textContent) ? 'Extra' : '';
view.destroy();
return [clicked.resource, clicked.percent, clicked.over, clicked.tasks.length, tipHasExtra].join(' | ');

Split view: scroll and zoom with no remount. Three methods drive the view off a dashboard's own controls - a row picker, a date search, a zoom slider - without tearing it down and rebuilding it. view.scrollToTask(id) scrolls the least each axis needs to bring a task's row and bar fully into view: vertically to the row itself, horizontally to its bar's start/finish (a milestone's single point), leaving an axis alone when the row/bar is already fully shown on it. view.scrollToDate(date) (a day-number, ISO string or Date) centres that date in the timeline's own viewport. view.setZoom(level) takes the same preset ('day'/'week'/'month'/'quarter') or raw pixels-per-day mountSplit's own zoom option does, and repaints in place: collapsed summaries, every column width and the date centred in the timeline before the call are all exactly as they were after it, since nothing here unmounts the view or loses the state the DOM itself does not carry. All three fire the same draw event any other repaint does.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom({ width: 300, height: 50 });
const gantt = createGantt({ projectStart: '2027-01-04', rowKey: 'id', tasks: [
  { id: 'proj', name: 'P' },
  { id: 'a', name: 'A', parent: 'proj', start: '2027-01-04', duration: 2 },
  { id: 'b', name: 'B', parent: 'proj', start: '2027-01-08', duration: 2 },
  { id: 'c', name: 'C', start: '2027-03-01', duration: 2 },
] });
const view = gantt.mountSplit(root, { zoom: 'day', rowHeight: 30, gridWidth: 200 });
view.toggle('proj');                 // collapse the summary before any scroll/zoom
view.setColumnWidths({ name: 240 }); // and widen a column

const scroller = view.scroller;
view.scrollToTask('c');              // brings row c's row and bar into view
const taskScroll = scroller.scrollTop + ',' + scroller.scrollLeft;

view.scrollToDate('2027-01-20');     // centres that date in the timeline
const dateScroll = scroller.scrollLeft;

view.setZoom('week');                // no remount: both of the above still hold
const out = [
  taskScroll,
  dateScroll,
  scroller.scrollLeft,                      // the centred date followed the rescale
  [...view.collapsed].join(','),            // still collapsed
  view.getColumnWidths().name,              // still widened
  view.options.zoom,
].join(' | ');
view.destroy();
return out;

Split view: a built-in zoom control. The zoomControl option draws day / week / month / quarter / fit-to-plan buttons straight into the view’s own header - no host toolbar to build. Each button is a real <button> (so keyboard Enter/Space reaches it) carrying its catalogue label and an aria-pressed that tracks the level currently in effect; clicking one switches the zoom in place through the same setZoom/fitZoom a host would call, so collapsed summaries, every column width and the centred date all survive the change. fit picks the pixels-per-day that shows the whole plan and resets the scroll to its start. Pass an object instead of true to reorder or subset the buttons (levels) or to build the control detached and expose it as view.zoomControl for a host toolbar to place (position: 'toolbar', the default is 'header').

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom({ width: 300, height: 50 });
const gantt = createGantt({ projectStart: '2027-01-04', rowKey: 'id', tasks: [
  { id: 'proj', name: 'P' },
  { id: 'a', name: 'A', parent: 'proj', start: '2027-01-04', duration: 2 },
  { id: 'b', name: 'B', parent: 'proj', start: '2027-01-08', duration: 2 },
  { id: 'c', name: 'C', start: '2027-03-01', duration: 2 },
] });
// zoomControl: true draws the five buttons into the view's own header.
const view = gantt.mountSplit(root, { zoom: 'day', rowHeight: 30, gridWidth: 200, zoomControl: true });

const NS = 'lat-gantt-split';
const buttons = [...root.querySelectorAll('.' + NS + '__zoom-btn')];
const labels = buttons.map((b) => b.textContent).join('|');
const pressed = buttons.find((b) => b.getAttribute('aria-pressed') === 'true').getAttribute('data-zoom');

// Each is a real keyboard-operable ; its click is the same handler Enter/Space fire.
const click = (level) => {
  const btn = buttons.find((b) => b.getAttribute('data-zoom') === level);
  btn.dispatchEvent({ type: 'click', target: btn, bubbles: true });
};
click('week');   // repaints in place, exactly as setZoom('week') would
const weekZoom = view.options.zoom;
click('fit');    // fit picks the pixels-per-day that shows the whole plan

const fitPressed = buttons.find((b) => b.getAttribute('data-zoom') === 'fit').getAttribute('aria-pressed');
const fitZoom = Math.round(view.options.zoom * 100) / 100;   // 300px over ~62 days
const atStart = view.scroller.scrollLeft === 0;              // fit resets the scroll to the plan's start
view.destroy();
return [labels, pressed, weekZoom, fitPressed, fitZoom, atStart].join(' | ');

The object form. position: 'toolbar' builds the buttons detached from the view - nothing is drawn in the header - and hands them back as view.zoomControl for a host toolbar to place; levels keeps only the named buttons, in order. The detached control still tracks the view’s zoom, and its own buttons still drive the view, exactly as the header form does.

Pinch to zoom. On a touch screen a two-finger pinch over the split view’s timeline steps the zoom one level (quarter, month, week, day) through setZoom, firing one zoomChange with cause 'gesture' per level and keeping the date under the fingers in place; a two-finger drag scrolls, and pinchZoom: false turns it off.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom({ width: 300, height: 50 });
const gantt = createGantt({ projectStart: '2027-01-04', rowKey: 'id', tasks: [
  { id: 'a', name: 'A', start: '2027-01-04', duration: 2 },
  { id: 'b', name: 'B', start: '2027-01-08', duration: 2 },
] });
// position: 'toolbar' builds the buttons detached; levels keeps only these two.
const view = gantt.mountSplit(root, { zoom: 'day', gridWidth: 200, zoomControl: { position: 'toolbar', levels: ['month', 'fit'] } });

const NS = 'lat-gantt-split';
const control = view.zoomControl;   // the host places this where its toolbar lives
const levels = [...control.querySelectorAll('.' + NS + '__zoom-btn')].map((b) => b.getAttribute('data-zoom')).join('|');
const inHeader = root.querySelector('.' + NS + '__zoom') ? 'header' : 'toolbar';
view.destroy();
return [levels, inHeader].join(' | ');

View and viewport events,,. The view reports its own lifecycle and viewport on the controller (gantt.on), so a host can persist a zoom, follow a scroll, or build an overlay that lives exactly as long as the view. zoomChange fires once each time the split view’s time scale changes - a host view.setZoom/view.fitZoom (cause: 'api') or a click on its built-in zoom control ('control') - carrying { from, to, cause, pxPerDay }; pxPerDay is the pixels-per-day the repaint actually drew with, so a host can reproduce the scale without asking twice. visibleRangeChange fires the ISO dates now under the timeline’s left and right edges, and scroll the settled { top, left } offsets, each coalesced to at most one per animation frame - a burst of horizontal scroll, a resize and a zoom settle into one report, not dozens - and a scroll that settles where it already was is silent. draw fires once after every completed paint. viewMount fires once from mount or mountSplit after the first paint, and viewDestroy once as that view is torn down (a remount, unmount() or destroy()), both carrying the view and its root element. All six are reports, not gates - there is no before* form - and none fire for your own setTasks/rows.apply. The Lattice event names:

const { createTestDom, resetTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom({ width: 300, height: 50 });
const gantt = createGantt({ projectStart: '2027-01-04', rowKey: 'id', tasks: [
  { id: 'proj', name: 'P' },
  { id: 'a', name: 'A', parent: 'proj', start: '2027-01-04', duration: 2 },
  { id: 'b', name: 'B', parent: 'proj', start: '2027-01-08', duration: 2 },
  { id: 'c', name: 'C', start: '2027-03-01', duration: 2 },
] });

const heard = { viewMount: 0, zoomChange: [], viewDestroy: 0 };
gantt.on('viewMount', () => { heard.viewMount += 1; });
gantt.on('zoomChange', (e) => { heard.zoomChange.push(`${e.to}:${Math.round(e.pxPerDay)}`); });
gantt.on('viewDestroy', () => { heard.viewDestroy += 1; });

const view = gantt.mountSplit(root, { zoom: 'day', rowHeight: 30, gridWidth: 200 });
const mounted = heard.viewMount;               // one, synchronously from mountSplit

// The scroll event reports the settled offsets once per frame; the scroller
// exposes the same pair synchronously, so a burst of three scrolls reads 0,300.
view.scroller.setScroll(0, 100);
view.scroller.setScroll(0, 200);
view.scroller.setScroll(0, 300);
const scrolled = `${view.scroller.scrollTop},${view.scroller.scrollLeft}`;

view.setZoom('week');                          // one zoomChange, with the resolved pxPerDay
const zoomed = heard.zoomChange.join(';');

view.destroy();                                // one viewDestroy, root still attached
resetTestDom();

return `mount ${mounted} | scroll ${scrolled} | zoom ${zoomed} | destroy ${heard.viewDestroy}`;

Split view: the band label column sizes itself. The workload and histogram bands’ resource-name column no longer follows the task table’s first column - a narrow first column (a 52px WBS column, say) used to truncate every resource name to an ellipsis. It sizes itself instead: its own default width, or workload.labelWidth/histogram.labelWidth in pixels - and always carries the full name as a native title. totals: false drops the totals column and row entirely, rather than leaving an empty cell to take the rest of the grid width.

const { createTestDom } = await import('../packages/dom/src/renderer/testdom.js');
const { createGantt } = await import('../packages/modules/gantt/index.js');

const { root } = createTestDom();
const gantt = createGantt({
  projectStart: '2027-01-04',
  resources: { Ann: 1 },
  tasks: [{ id: 'design', name: 'Design', start: '2027-01-04', duration: 2, assignee: 'Ann' }],
});
// A narrow first task column; the bands below are sized on their own, not by it.
const view = gantt.mountSplit(root, {
  zoom: 'day',
  gridWidth: 400,
  columns: [
    { key: 'progress', title: '%', width: 52, kind: 'progress' },
    { key: 'name', title: 'Task', width: 0, kind: 'name' },
  ],
  workload: { labelWidth: 200, totals: false },
  histogram: { labelWidth: 160 },
});
const NS = 'lat-gantt-split';
const wlName = root.querySelector('.' + NS + '__wl-row').querySelector('.' + NS + '__wl-cell--name');
const width = wlName.style.width;
const title = wlName.querySelector('.' + NS + '__wl-name-text').getAttribute('title');
const totals = root.querySelector('.' + NS + '__wl-cell--total') ? 'present' : 'none';
const hgName = root.querySelector('.' + NS + '__hg-row').querySelector('.' + NS + '__hg-cell--name');
view.destroy();
return [width, title, totals, hgName.style.width].join(' | ');

Live data. The Gantt exposes the same consumer surface as the grid - gantt.rows.apply({ add, update, remove }), keyed by its rowKey (default id) - so a Data Router attaches to it exactly as it does a grid, a board or a chart. One arriving stream can hydrate and update a whole screen, the Gantt included; each change recomputes the schedule and redraws.

import { createDataRouter } from '@toclocoinc/lattice-grid/modules/data-router';

const router = createDataRouter({ key: 'kind', rowKey: 'id' });
router.attach(grid, 'order').attach(gantt, 'task');  // one feed drives both
router.load(snapshot);                                // task rows land in the Gantt
router.apply(deltas);                                 // updates recompute the schedule

Type reference

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.

The gantt module

GanttNamedCalendar

A named working calendar, the value of an entry in the `calendars` option: the plan calendar's shape, with the resource-calendar and exception spellings accepted. A member left out is inherited from the plan calendar.

GanttResolvedCalendar

One resolved calendar in a schedule: the working time a task was scheduled under.

GanttZoomControlOptions

The split view's built-in zoom control: a row of day / week / month / quarter / fit-to-plan buttons drawn in the view's own header. `position` picks where they go; `levels` subsets or reorders them.

GanttTooltipContext

What a host's own `tooltip` render function is given: the same scheduled task `label`'s own function gets, plus a `{ t, formatDate, dateAxis, rawTask }` context - `t` the resolved translator, `formatDate` the SAME locale-formatted-date helper the default card's Start/End/Date rows use, `dateAxis` the view's own option, and `rawTask` the host's original task object (for a custom field the scheduled shape does not carry).

GanttMarker

A vertical date marker: a labelled line drawn through the whole plot at a date, or - given `from`/`to` - a shaded range between two dates. Display-only: it annotates the timeline and never changes the schedule. Pass the `markers` option to `mount` or `mountSplit`.

GanttWorkloadExternal

One load-only booking from another project, named on the `workload.external` option rather than as a task: its hours count in the resource workload band, the histogram and the band's own over-allocation highlight, and it is listed as an "other project" sub-row under its resource, but it is never scheduled, never drawn as a row or a bar, and never touches the critical path, the project finish or a summary - there is no task for any of those to see. The equivalent per-task spelling is a task's own `loadOnly: true` flag.

GanttTask

A task in a Gantt plan. Give a `duration` or a `start`+`end` (a day-number, ISO date string or `Date`; one is derived from the other). `milestone: true` (or `duration: 0`) is a zero-duration point. `parent` nests a task under a summary, whose window and progress are DERIVED from its children. `baselineStart`/`baselineEnd` (host-stored) drive planned-vs-actual variance; `constraint` pins or pulls the task; `assignee` and `height` feed the split view's grid panel.

GanttAssignmentPicker

The assignment picker's per-task behaviour. A task states this to shape the picker the split view's assignee cell opens for it; the roster it produces is committed as one `applyEdit({ assignments })`.

GanttResourceCalendar

A single resource's working calendar. Anything it leaves out is inherited from the plan calendar, so a resource that states only `holidays` keeps the plan's working week.

GanttResourceRateChange

A resource's dated rate change: from `from` onward the rate in force is `rate`, replacing whatever was in force before it. `from` is a day-number, ISO date or `Date`.

GanttDependency

A typed dependency between two tasks (by id), with optional lag/lead. `type` defaults to `'FS'`; either endpoint may be a leaf or a summary. `type` also accepts the MS Project string shorthand - `'FS+2'`, `'SS-1'`. It is normalised to the structured form on the way in, so `gantt.dependencies` always reads back `{ type, lag }` and there is no second internal representation. Giving both a shorthand lag and a conflicting `lag` field warns; the explicit field wins.

GanttScheduledTask

The computed CPM values for one task (a leaf is scheduled, a summary derived).

GanttConflict

An unhonourable scheduling constraint, reported rather than obeyed.

GanttSchedule

A CPM schedule result: per-task dates/float and the critical path, or an error.

GanttResourceSegment

One contiguous load segment for a resource: how many units are booked over a span.

GanttOverAllocation

A resource booked beyond its capacity across concurrent tasks.

GanttResourceLoad

The per-resource load and the over-allocations across a schedule.

GanttLevelResult

The result of resource leveling: the shifted tasks and what moved.

GanttViolation

A placement violation flagged by `findViolations`.

GanttEarnedValueTotals

The earned-value figures themselves, without the task they belong to. The project total is exactly this and no more, so it has its own type rather than claiming to be a row with five fields it has never carried.

GanttEarnedValueRow

One task's earned-value figures.

GanttEarnedValue

The earned-value result at a status date.

GanttCostRow

One task's resource-rate cost figures.

GanttCostResult

The resource-rate cost result for a scheduled plan.

GanttSCurvePoint

One cumulative S-curve point: the value of each curve as of a bucket date.

GanttResourceViewInit

The options for {@link createResourceView}. The display options (`unit`, `thresholds`, `columns`, `labelWidth`, `showUnassigned`, `decimals`, `totals`, `hoursPerDay`) mean exactly what they do on `mountSplit`'s `workload` option - the standalone band reuses it.

GanttResourceView

A standalone resource-load band ({@link createResourceView}), the handle it returns.

Properties

Methods

Events

This surface raises events, but the names are not declared: on() accepts any string. They cannot be listed here until the declaration names them.

GanttScheduleError

Why a schedule was refused. The payload of the `error` event - the very object the failed {@link GanttSchedule} carries, handed straight to the handler.

GanttBeforeEvent

What every cancellable Gantt event carries on top of its own context. The controller's bus mirrors the grid core's `emitBefore` contract exactly, so a host writes the same handler shape against a Gantt as against a grid: a handler refuses the action by calling `preventDefault(reason?)`, by returning `false`, or by throwing, and may be `async` - every thenable return is awaited before the decision, so a confirm dialog or a server check can hold the write. Veto wins. On a veto the matching `<action>:cancelled` fires with the reason and the model is untouched; an action re-validated after an await and no longer applicable is cancelled as `'stale'`. Only the user-initiated paths are gated. The live/router `rows.apply` path is remote truth and raises none of these.

GanttTaskEditEvent

An edit about to be applied to one task: the payload of `beforeTaskEdit`, `beforeTaskMove`, `beforeTaskResize`, `beforeProgressChange` and `beforeMilestoneMove`. One payload for the five, because they are one choke point - `applyEdit` classifies the patch and names the event, so which of the five fires says what kind of edit it is and the context below says what the edit is.

GanttTaskEditCancelledEvent

An edit that was refused: the payload of `taskEdit:cancelled`, `taskMove:cancelled`, `taskResize:cancelled`, `progressChange:cancelled` and `milestoneMove:cancelled`. The same context the before-event carried, plus the reason; a notification, so it carries no `preventDefault`.

GanttDependencyCreateEvent

Links about to be created: the payload of `beforeDependencyCreate`. A pure removal or reorder adds no link and is not gated at all.

GanttDependencyCreateCancelledEvent

Links that were not created: the payload of `dependencyCreate:cancelled`. A notification, so it carries no `preventDefault`.

GanttDependencyDeleteEvent

One link about to be removed: the payload of `beforeDependencyDelete` - the selected-link Delete key and the link editor's own delete action both gate on this.

GanttDependencyDeleteCancelledEvent

A link that was not removed: the payload of `dependencyDelete:cancelled`. A notification, so it carries no `preventDefault`.

GanttDependenciesChangedEvent

Links that changed: the payload of `dependencies`, fired once a `setDependencies` call or a `deleteDependency` call actually changes the list - after `beforeDependencyCreate`/`beforeDependencyDelete` have already let it through, so a host that only wants to know what changed does not have to diff the whole list on every `schedule` event. A lag-only edit of an existing link (same `from`/`to`/`type`) is neither an add nor a remove and does not fire this.

GanttTaskDeleteEvent

A task about to be deleted, with its incident links: the payload of `beforeTaskDelete`.

GanttTaskDeleteCancelledEvent

A task that was not deleted: the payload of `taskDelete:cancelled`. A notification, so it carries no `preventDefault`.

GanttTaskAddEvent

A task about to be added: the payload of `beforeTaskAdd`. Raised by `addTask`, Insert / Shift+Insert and the default menu's add items.

GanttTaskAddCancelledEvent

A task that was not added: the payload of `taskAdd:cancelled`. A notification, so it carries no `preventDefault`.

GanttMilestoneConvertEvent

A task about to become a milestone or an ordinary task again: the payload of `beforeMilestoneConvert`.

GanttMilestoneConvertCancelledEvent

A conversion that did not happen: the payload of `milestoneConvert:cancelled`. A notification, so it carries no `preventDefault`.

GanttTaskPasteEvent

Tasks about to be pasted: the payload of `beforeTaskPaste`. Raised by `pasteTasks` and the Ctrl/Cmd+V key.

GanttTaskPasteCancelledEvent

Tasks that were not pasted: the payload of `taskPaste:cancelled`. A notification, so it carries no `preventDefault`.

GanttRowMoveEvent

A row about to move or re-parent: the payload of `beforeRowMove`. A name-column drag handle, a drop onto another row, Alt+Up/Down (reorder among siblings) and Tab/Shift+Tab (indent/outdent) all gate on this.

GanttRowMovedEvent

A row that moved or was re-parented: the payload of `rowMove`. A notification - it carries no `preventDefault`; the veto was `beforeRowMove`'s job. Fired once per gesture: a drag, a single Alt+Up/Down step or a single Tab/Shift+Tab is one `rowMove` and one undo step, by the live re-parent path.

GanttRowMoveCancelledEvent

A row that was not moved: the payload of `rowMove:cancelled`. A notification, so it carries no `preventDefault`.

GanttDataBandPoint

One point of a data band series: a dated value at any granularity.

GanttDataBandContext

The context a data band's `value` function, `format` function and `cellStyle` receive.

GanttDataBandThreshold

One threshold of a data band: the highest `at` a cell's value reaches styles it.

GanttDataBand

One linked data band under the split view: a measure per row per timeline bucket - forecast cost per task per week, say - laid out like the workload band and scroll- and zoom-locked to the timeline. The bucket cells carry no header controls under any configuration; the left-hand columns are a real grid when `createGrid` is injected.

GanttDataBandChangeEvent

The payload of `dataBand:change`: a task's series was rewritten for the host to save.

GanttDataBandEditEvent

The payload of `beforeDataBandEdit`: a typed value about to be written into one bucket.

GanttDataBandEditCancelledEvent

The payload of `dataBandEdit:cancelled`: the refused edit and why.

GanttRowDropContext

The context a dropped row carries: the shared shape of `beforeRowDrop`, `rowDrop` and `rowDrop:cancelled`. It is `rowMove`'s payload plus where the row landed - `position` against `target`.

GanttRowDropCancelledEvent

A row that was not dropped: the payload of `rowDrop:cancelled`. A notification, so it carries no `preventDefault`.

GanttEventPayloads

What a handler receives, per Gantt event.

GanttDirtyChangeEvent

The payload of `dirtyChange`: fires only when `hasChanges` flips.

GanttDirtyTaskUpdate

One task's changed fields against the committed baseline, inside a {@link GanttChanges} diff.

GanttDirtyTasks

The task side of a {@link GanttChanges} diff.

GanttDirtyDependencyUpdate

One dependency's changed fields against the committed baseline, inside a {@link GanttChanges} diff.

GanttDirtyDependencies

The dependency side of a {@link GanttChanges} diff.

GanttDirtyAssignmentUpdate

One task's resource roster change against the committed baseline, inside a {@link GanttChanges} diff.

GanttChanges

The plan changes accumulated since the last `commit()` or load, as `gantt.changes()` returns it: diffed fresh against the committed baseline on every call, so an add immediately removed, or an edit undone back to the baseline, nets to nothing rather than being read off a running total.

GanttFieldChange

One field's before and after value in a committed-change diff.

GanttTaskChangeEvent

The payload of `taskAdd`, `taskRemove` and `taskUpdate`, raised once per task a committed change added, removed or altered. The scheduled-date fields of `changes` come from the schedule, so a successor the scheduler moved reports its date change even though its raw row did not.

GanttAssignmentChangeEvent

The payload of `assignmentChange`, raised when a committed change altered a task's resource roster.

GanttDependencyChangeEvent

The payload of `dependencyAdd` and `dependencyRemove`, raised once per link a committed change added or removed.

GanttDependencyUpdateEvent

The payload of `dependencyUpdate`, raised when a committed change altered a link in place (a lag or other non-identity edit; a change to `from`/`to`/`type` is a remove plus an add, not an update).

GanttDateChange

One task's scheduled dates in a {@link GanttDatesChangedEvent}.

GanttDatesChangedEvent

The payload of `datesChanged`: the date-only projection of one committed change. `changes` lists every task whose scheduled dates moved - as `{ id, start, end, duration }` per task, carried under `changes` so the event shape stays an object like its siblings. Not fired for the host's own `setTasks`/`rows.apply` loads.

GanttChangeEntry

One entry inside a {@link GanttChangeBatchEvent}: a typed data-change event with a `type` discriminant.

GanttChangeBatchEvent

The payload of `change`: the ONE batch per committed action, carrying every individual data-change event it produced as an array, so a host that wants the whole action at once has it without stitching the individual events back together.

GanttCommitPrimary

The task a gesture acted on, named at the head of a `lattice:gantt-commit` detail.

GanttCommitChange

One entry of a `lattice:gantt-commit` `changes` array: the same shape a `lattice:gantt-change` carries, gathered into the one commit.

GanttCommitDetail

The `detail` of a `lattice:gantt-commit` DOM event: ONE per user gesture or API transaction, carrying the whole edit at once - `changes` lists every task the action changed (the primary task, the successors it pushed, and the summaries whose dates moved), so `hx-trigger="lattice:gantt-commit"` posts it in one request instead of a burst of `lattice:gantt-change` events.

GanttReadyEvent

The payload of `ready`: the first successful schedule.

GanttTaskPointerContext

What every task-bar pointer event carries … 0001992): the task by id, as the host supplied it and as the scheduler placed it, the view it happened in, and the DOM event that caused it. Dates in these payloads are ISO dates (`YYYY-MM-DD`) on a calendar axis and plan day numbers under `dateAxis: false`; `end` is the scheduled finish boundary, the same `ef` the schedule carries. None of these fire for a host's own `setTasks` or `rows.apply` loads.

GanttCellPointerContext

The context a task-table cell event carries: the shared shape of `cellClick`, `cellDblClick`, `cellContextMenu` and `beforeCellEditStart`. The table became a real Lattice grid; this maps its own cell events onto the controller with the task-centric payload every Gantt event carries, plus the column and value under the cell.

GanttCellEditStartEvent

A task-table cell's editor opened: the payload of `cellEditStart`, once `beforeCellEditStart` allowed it (or for a programmatic `grid.edit.start`/the auto-advance to the next cell after a commit, neither of which raises the `before` gate).

GanttCellEditStartCancelledEvent

An open attempt that did not open an editor: the payload of `cellEditStart:cancelled`, fired when a `beforeCellEditStart` handler calls `preventDefault(reason)` or defers (a reason of `'deferred'`). The same context the gate carried, plus why.

GanttCellEditCommitEvent

A task-table cell's edit committed: the payload of `cellEditCommit`.

GanttCellEditCancelEvent

A task-table cell's edit was abandoned: the payload of `cellEditCancel` - Escape, or a commit a `beforeEdit` handler vetoed.

GanttPointerPosition

A pointer position in client (viewport) pixels; `null` on a keyboard path.

GanttTaskDragStartEvent

A move drag that started: the payload of `taskDragStart`, raised once when the pointer passes the drag threshold (never on a click), or when a keyboard move starts, before anything moved.

GanttBeforeTaskDragEvent

A move drag about to start: the payload of `beforeTaskDrag`. `preventDefault(reason)` cancels the drag before anything moves and fires `taskDrag:cancelled`. A gesture cannot wait, so a handler that defers (returns a Promise) cancels it as `'deferred'`.

GanttTaskDragCancelledEvent

A move drag that was refused or abandoned: the payload of `taskDrag:cancelled` - the start context plus why: the veto's reason, `'prevented'`, `'deferred'`, or `'escape'` when Escape abandoned it.

GanttTaskSpan

A `{ start, end }` position in payload date form.

GanttTaskSpanWithDuration

A `{ start, end, duration }` span in payload date form.

GanttTaskDragEvent

One frame of a move drag: the payload of `taskDrag`, at most once per animation frame. `to` is where the scheduler would land the task (snapped to whole days, constraints applied); `valid` is false when the commit would be refused - a hard lock, or a constraint that would put the task somewhere other than where it was dropped.

GanttTaskResizeStartEvent

A resize that started: the payload of `taskResizeStart`, once per drag past the threshold or keyboard resize.

GanttBeforeTaskResizeStartEvent

A resize about to start: the payload of `beforeTaskResizeStart`. `preventDefault(reason)` cancels it and fires `taskResize:cancelled` with `phase: 'start'`.

GanttTaskResizeEvent

A resize frame or its release: the payload of `taskPartialResize` (at most once per animation frame) and `taskResizeEnd` (once, on release, before the commit's own gate).

GanttPercentBarDragStartEvent

A progress-handle drag that started: the payload of `percentBarDragStart`.

GanttBeforePercentBarDragEvent

A progress-handle drag about to start: the payload of `beforePercentBarDrag`. `preventDefault(reason)` cancels it and fires `percentBarDrag:cancelled`.

GanttPercentBarDragEvent

A progress-handle frame or its release: the payload of `percentBarDrag` and `percentBarDrop`. Percentages are snapped to the view's `progressStep` and clamped to 0-100. The drop is raised before the commit, which still goes through `beforeProgressChange`.

GanttPercentBarDragCancelledEvent

A progress-handle drag that was refused or abandoned: the payload of `percentBarDrag:cancelled`.

GanttTaskClickEvent

A click on a task: the payload of `taskClick`. Not raised for the release of a drag. Enter or Space on a focused bar raise it too, with the task's own start as `date`.

GanttTaskDblClickEvent

A double click on a task: the payload of `taskDblClick`. Two `taskClick` events precede it (one per click of the pair). `preventDefault()` claims it - the view runs no default of its own and the browser's default (selecting text) is prevented - so a host opens its own editor instead.

GanttTaskMouseEvent

The pointer entered or left a task: the payload of `taskMouseOver` and `taskMouseOut`, once per entry and exit of a bar, milestone or summary bar - moving between parts of the same task is not a re-entry, and empty row space is not a task. Keyboard focus reaching or leaving a bar raises the same pair, with the focus event as `event`.

GanttTaskContextMenuEvent

A context-menu request on a task: the payload of `taskContextMenu`, raised on a right-click or the Menu key / Shift+F10 on a focused row. `preventDefault()` claims it - the split view's built-in menu (when `contextMenu` is configured) is not opened, and the browser's own is suppressed either way - so a host shows its own instead.

GanttLinkPointerContext

What every dependency-link pointer event carries: the link's identity - predecessor id, successor id, the normalised type and the lag in working days (0 when none, read back from `gantt.dependencies` since it is not drawn on the link itself) - the view it happened in, and the originating DOM event.

GanttTooltipShowEvent

A tooltip about to be shown for a task: the payload of `tooltipShow`, raised once per distinct task shown (not on every pointer frame a view re-resolves the same hovered task's card on). `preventDefault()` vetoes it - the built-in card is not shown - so a host's own tooltip replaces it.

GanttSchedulingConflict

One normalised scheduling conflict: a single problem with the current plan, named in host terms rather than the engine's. It is the shape `gantt.schedulingConflicts` reports and each `schedulingConflict` event carries, distinct from {@link GanttConflict}, which is the engine's raw per-edge constraint breach.

GanttSchedulingConflictEvent

The payload of `schedulingConflict`, fired after a recompute only when the conflict set changed (compared by a stable key). It carries the whole current set plus the delta, so a host never has to diff the set itself. A host load (`setTasks`, `rows.apply`) seeds the set silently and fires nothing.

GanttTaskToggleEvent

A summary row about to expand or collapse: the payload of `beforeTaskExpand` and `beforeTaskCollapse`. A chevron click, a keyboard activation and the `view.toggle` API all gate on this; `preventDefault(reason)` leaves the tree as it was and fires the matching `taskExpand:cancelled`/`taskCollapse:cancelled`.

GanttTaskToggledEvent

A summary row that expanded or collapsed: the payload of `taskExpand` and `taskCollapse`. A notification - it carries no `preventDefault`; the veto was the before-event's job.

GanttTaskToggleCancelledEvent

A task tree toggle that was refused: the payload of `taskExpand:cancelled` and `taskCollapse:cancelled`. The context the before-event carried, plus the reason.

GanttResourceToggleEvent

A workload-band resource row whose per-task sub-rows were shown or hidden: the payload of `resourceExpand` and `resourceCollapse`. A notification - a display-only band toggle, not a gate.

GanttSelectionChangeEvent

The task selection after a change: the payload of `selectionChange`, fired once per change - a click, a Ctrl/Cmd or Shift click, an arrow key, or `select`/`deselect`. A selected task that is collapsed away or filtered out stays in `selectedIds`; `gantt.selectedHidden()` reports which are off-screen.

GanttTaskFilteredEvent

The payload of the `task:filtered` event, fired when `scrollToTask` is asked for a task the task table's filter is hiding. The filter is the user's, so it is left exactly as it was.

GanttColumnResizeEvent

The payload of the `columnResize` event, fired once a split-view column-border or table/timeline-divider drag or keyboard resize settles - never mid-drag, so one gesture is exactly one event.

GanttWorkloadClickEvent

The payload of the `workload:click` event, fired when a workload-band bucket cell is clicked: the resource, the half-open bucket span, the hours booked and available in it, and the tasks that booked there. `booked`/`available` are always HOURS - whatever unit the band is drawing in.

GanttWorkloadCellEvent

The payload of the workload-band cell events: fired on a click, double-click, context menu, hover or hover-end of a workload-band bucket cell or a histogram bar. It carries the resource and its display name, the half-open bucket span, the hours booked and available, the percent-of-capacity (when a capacity is known), the over-allocation flag, the unit the band is drawing in, and the tasks that booked there. `booked`/`available`/`task.hours` are always HOURS - whatever the unit. A per-task sub-row cell adds the task's `id`/`rawTask`/`task`; an aggregate resource cell leaves those `null`. None of these fire for the host's own `setTasks`/`rows.apply` loads.

GanttWorkloadResourceClickEvent

A click on a workload-band resource-name cell: the payload of `workloadResourceClick`, fired for an aggregate resource row (never a per-task sub-row or the totals row).

GanttCellClickEvent

The payload of the `cell:click` event, fired when a cell of the split view's task table is clicked: the task the row belongs to, the column's key, and the cell element that was clicked. The key is the grid column id - for a host column that is the `key`/`id` it was given, and for a built-in column its own id (`name`, `start`, …).

GanttHistoryEvent

The payload of the `history` event, fired whenever the session undo/redo timeline changes - an edit recorded, an undo, a redo, or a clear. A host wires its undo and redo controls off `canUndo`/`canRedo` and can show `label` in a toast ("Undone: move").

GanttDrawEvent

The payload of the `draw` event, fired once after every completed paint of the timeline and bands - the initial paint, a data change, a zoom change, a band toggle, or a column resize. Several synchronous invalidations in one turn are coalesced into a single event, and it never fires before the DOM has been updated. This is the supported replacement for wrapping `view.draw`.

GanttZoomChangeEvent

The payload of the `zoomChange` event, fired once each time the split view's time scale changes - a host `view.setZoom`/ `view.fitZoom` (`cause: 'api'`) or a click on the view's own zoom control (`cause: 'control'`) - carrying the level before and after and the resolved pixels-per-day. A report, not a gate.

GanttVisibleRangeChangeEvent

The payload of the `visibleRangeChange` event, fired with the ISO dates now under the split view's timeline left and right edges and the resolved zoom, coalesced to at most one per animation frame across a burst of horizontal scroll, resize and zoom work, and once after the view first mounts. A report, not a gate.

GanttScrollEvent

The payload of the `scroll` event, fired by the split view at most once per animation frame while its viewport scrolls, with the offsets read from the settled position. A scroll that settles where it already was is silent. A report, not a gate.

GanttViewMountEvent

The payload of the `viewMount` event, fired once by the plain `mount` view or the `mountSplit` split view after its first paint. A report, not a gate.

GanttViewDestroyEvent

The payload of the `viewDestroy` event, fired once by a mounted view as it is torn down - a remount, `unmount()` or `destroy()` - before its root is removed, so `element` is still readable. A report, not a gate.

GanttColumnEditor

The `editor` shorthand on a split-view grid column: ask for one of the grid's own editors with the split view's plain keys, rather than spelling out the full `edit`/`lookup` spec. `{ type: 'select', options }` is the select editor - a dropdown of the options in the order given, committing the chosen option's value - and `{ type: 'number', min, max, step }` is the number editor, which clamps to the bounds and steps up/down by `step` (a spinner is added, so the step is keyboard-operable). An `editor` makes the column editable unless `editable`/`edit` says otherwise. It needs the view's `createGrid`: the lightweight tables have no editors.

GanttGridColumn

A split-view table column when the tables are real grids: the full grid column spec. An `id` naming a built-in column (`name`, `start`, `end`, `duration`, `progress`, `assignee`, `effort`, `units`; a band's `resource`/`total`) overrides that column, merged over it one level deep so the built-in behaviour it does not replace is kept.

GanttBandResource

The resource a {@link GanttBandColumn} function is handed: its own spec from `resources`, with its key and display name.

GanttBandColumnContext

What a {@link GanttBandColumn} function is handed besides the resource: the band's figures for the row.

GanttBandColumn

A band's own column, independent of the task table. Its width is namespaced in `getColumnWidths`/`columnResize` as `band:<key>` (workload) or `histogram:<key>` (histogram).

GanttSplitView

The view `mountSplit` returns: the task grid, timeline and (when asked for) the resource workload/histogram bands, joined in one scroll surface. Only the methods a host drives directly off the handle are typed here - everything else (what it draws) is reached through the controller.

Gantt

A headless Gantt controller: holds the model, recomputes on edits, emits changes.

Properties

Methods

Events

GanttMSPDIModel

The model {@link importMSPDI} returns and {@link exportMSPDI} takes.