makersclaw 0.7.0 → 0.8.1

package/registry/blocks/schedule-gantt/README.md

@@ -0,0 +1,159 @@
+# ScheduleGantt
+
+A Gantt for dated work with dependencies, where the question is "when do we
+finish, and what decides it?". The task sheet on the left and a working-day
+time scale on the right are one picture, row for row.
+
+- **Bars** in steel grey with their progress inside; finished work full; a
+  phase a bracket over its work (it folds); a milestone a diamond.
+- **Links of all four kinds** (finish to start, start to start, finish to
+  finish, start to finish) with lag, drawn as elbows. A link the dates break
+  is dashed with a cross. The critical path turns red when the page switches
+  it on.
+- **The header says the news**: today, the target (dashed), the finish
+  (solid), and the gap between them in working days ("Finish Nov 3 · 7 wd
+  late").
+- **Drag a bar** to move it (several selected move together), **an end** to
+  change its length, **the dot past its end onto another bar** to link them.
+  Everything that waits on it moves with it while you drag, the finish slides
+  away from the target, and a note by the bar says what it costs. Let go and
+  one `onMove` carries every changed date.
+- **Dashed outlines** show where a bar was (`ghosts`) or where a suggestion
+  would put it (`pencil`); a thin bar under each shows a baseline.
+- **Lanes under the rows** (who is on what) share the scale.
+- **Type into the sheet**: double-click a name, a length, a percentage or
+  what a task waits on (`2.4FS+2d`); the last row adds a task (Enter) or a
+  milestone (Shift+Enter, Tab makes it a sub-task).
+
+Born in a Gantt planner's app, which drew all of it by hand beside its own
+engine. The template's `gantt` block is the neighbour for calendar-day work
+with finish-to-start links only; this one is for working days, four link
+kinds, lag, slack, a critical path and a baseline.
+
+```jsx
+import { ScheduleGantt } from "../components/blocks/schedule-gantt"; // a Makersclaw app ("./blocks/schedule-gantt" from components/)
+// shadcn project: import { ScheduleGantt } from "@/components/makersclaw/blocks/schedule-gantt"
+```
+
+A client component; it needs the `schedule-engine` block (added with it). The
+size is the parent's: put it where a height is set (the app's `AppLayout`
+content) and it fills it, the sheet and the bars scrolling together, the time
+scale scrolling inside the chart.
+
+## Rows in
+
+- `tasks`: `{ id, parent_id, title, start_date, due_date, is_milestone,
+  progress, status, position, assignee_id, assignee_name, created_at }`
+  (dates `'YYYY-MM-DD'`). A parent with children is a phase.
+- `links`: `{ id, task_id, depends_on_id, kind, lag_days }`: `task_id` waits
+  on `depends_on_id`.
+- `people`: `Map(id → { name, left? })`; `left: true` writes "(left)" after
+  the name.
+
+## Props
+
+- `today`, `target`: `'YYYY-MM-DD'`. `showToday` (true).
+- `zoom`: `"day" | "week" | "month" | "fit"` (`fit`: the whole span in the
+  width). `fitWidth`: the width to fit, default the container's.
+- `columns`: the sheet's columns, in order, from `outline`, `title`,
+  `start`, `due`, `days`, `done`, `who`, `waits`, `slack`, `vs`. Default
+  `["outline","title","who","days","done"]`. `vsLabel`: the baseline
+  column's heading ("vs Kickoff"). Under 760px of its own width the sheet
+  keeps the number and the title.
+- `gridWidth`: the sheet's width, 470 (the divider drags it);
+  `onGridWidth(w)` when it is let go. `rowH`: 30.
+- `height`: `"fill"` (default; the parent sets it) or a pixel number.
+- `critical`: draw the critical path in red.
+- `selectedId`, `selectedIds` (a Set: with more than one, dragging one moves
+  them all), `onSelect(id | null, { additive })`; `collapsed` (a Set of phase
+  ids), `onToggle(id)`; `highlight` (a Set of ids; the rest fade).
+- `ghosts`: `Map(id → { start, due })` where bars were. `pencil`: the same
+  for where a suggestion would put them. `baseline`: the same for a saved
+  baseline, a thin bar under each. `guesses`: a Set of ids whose length is a
+  guess ("5 wd?", in blue). `moving`: a Set of ids whose dates are changing.
+- `notes`: `Map(id → { text, tone? })` words after a bar (`tone: "crit"` red,
+  `"problem"` red and bold); on a row with no bar, the words stand where
+  the bar would. `tags`: `Map(id → [{ label, kind }])` in the row, `kind`:
+  `late`, `pole`, `unsaved`, `crit`, `blue`, `ink`, `quiet`, or
+  `agent` (a small filled badge, `title` on hover) and `dot` (a warning dot).
+- `lanes`: `[{ id, label, sub, items: [{ id, title, start, due }], marks:
+  [{ from, to, count, title }] }]` under the rows; `lanesTitle`: the heading
+  node of that section.
+- `rowMenu(task, { row, plan })` → Menu items for the row's "…" (built for
+  the hovered or selected row only).
+- `addUnder`: `{ id (a parent) | null, afterId, milestone, nonce }` opens
+  the add row under a row; `editRequest`: `{ id, field, nonce }` opens a
+  cell; `jump`: `{ date, nonce }` scrolls to a day.
+- `loading` (skeleton rows), `error` (a line above the chart), `emptyText`,
+  `label` (a screen reader's name for the chart), `className`.
+
+## Callbacks
+
+Every write answers `{ ok: true }` or `{ ok: false, error }`; a failure puts
+the chart back and says so above it. Without a callback that part is
+read-only: no drag, no link, no typing.
+
+- `onMove(moves, preview)`: a finished drag or an Alt+arrow. `moves` is
+  `[{ id, start, due }]` (what was asked); `preview.changes` is every date
+  the engine shifted, `[{ id, start_date, due_date, from, summary? }]`, so
+  the page can show them at once and save them in one write.
+- `onLink({ taskId, dependsOnId, kind }, preview)`: the dot dropped on a bar.
+  The kind comes from which ends were joined. A link that would loop is
+  refused in words before the drop.
+- `onEdit(task, field, value)`: `title`, `days`, `progress`, `waits` (the
+  short form; parse it with the engine's `parseWaits`).
+- `onAdd({ title, days, milestone, parentId, afterId })` → `{ ok, id }`.
+- `onOpen(task)`: Enter or a double-click. `onOpenLink(link)`: a double-click
+  on a link line, or Ctrl-click on a waits-on cell.
+- `onPreview(info | null)`: while a drag or a pulled link runs: `{ mode:
+  "move" | "stretch" | "link", task, cost (working days the finish moves),
+  followers, startShift, lengthShift, slack, critical, duration, start, due,
+  finishBefore, finishAfter, finishTitle, clamped }`. The page shows the
+  finish counting up in its top bar.
+
+## Keys
+
+↑ ↓ move the selection; Enter opens; F2 renames; Alt+← → moves the task a
+working day with everything that waits on it; Esc drops a drag or clears the
+selection; in the add row Enter adds a task, Shift+Enter a milestone, Tab
+makes it a sub-task of the row above.
+
+## Example
+
+```jsx
+<ScheduleGantt
+  tasks={tasks}
+  links={links}
+  people={people}
+  today="2026-09-24"
+  target="2026-10-23"
+  zoom="week"
+  columns={["outline", "title", "start", "due", "days", "done", "who", "waits"]}
+  critical={showCritical}
+  selectedId={selectedId}
+  onSelect={setSelectedId}
+  onOpen={(t) => open(t.id)}
+  onMove={(moves, preview) => save(preview.changes)}
+  onLink={(link) => addLink(link)}
+  onEdit={(task, field, value) => edit(task, field, value)}
+  onAdd={(draft) => addTask(draft)}
+  onPreview={setLive}
+/>
+```
+
+## States drawn in the demo
+
+A plan with every kind of row; the critical path on; a baseline and its
+column; ghosts and pencil; a loop; a plan with no dates; lanes; the whole
+project at once; loading; failed; empty; read-only; a narrow (320px)
+container.
+
+## Notes
+
+- Dates are days, never instants, so the server and the browser draw the same
+  picture. Weekends are shaded and skipped; there are no holidays.
+- Positions are measured in pixels per day by zoom; a very long plan scrolls
+  inside the chart. 300 rows is fine; virtualise past a few thousand.
+- Colour is a signal: red is the critical path or a broken link, amber is
+  late or the gap past the target, green the gap in front of it, blue the
+  agent (a guess, a suggestion), the accent today and the selection.

package/registry/blocks/schedule-gantt/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "schedule-gantt",
+  "title": "ScheduleGantt",
+  "description": "A Gantt for dated work with dependencies: the task sheet beside a working-day time scale, one picture row for row. Outline numbers, phases that fold into a bracket over their work, milestones as diamonds, bars in steel grey with their progress, links of all four kinds with lag drawn as elbows (a broken one dashed with a cross), weekends shaded, today a line, the target a dashed line and the finish a solid one with the gap between them counted in working days in the header. The critical path turns red when switched on; slack, the start and finish, the length in working days, the owner, what a task waits on in the short form (2.4FS+2d) and its distance from a baseline are columns the page picks, and the divider between sheet and bars drags. Drag a bar to move it (several selected move together), an end to change its length, the dot past its end onto another bar to link them: every task that waits on it moves while you drag, the finish in the header slides off the target and a note by the bar says what it costs. Dashed outlines show where bars were and where a suggestion would put them; a thin bar under each shows a baseline; lanes under the rows show who is on what, on the same scale. Type into the sheet: names, lengths, percentages, what a task waits on, and a last row that adds a task (Enter) or a milestone (Shift+Enter). Built on schedule-engine.",
+  "useWhen": "A project plan where the question is 'when do we finish and what decides it': tasks with lengths in working days, links of four kinds with lag, slack, a critical path, a target date, a saved baseline, and dates that must move when something slips. Not for calendar-day work with finish-to-start links only (gantt), phases against gates (schedule-ruler), stage columns (board) or undated to-dos (task-list).",
+  "tags": ["gantt", "schedule", "project plan", "critical path", "slack", "dependencies", "working days", "baseline", "lag", "milestones", "drag", "slip", "ripple", "ms project", "teamgantt", "workload", "target", "timeline"],
+  "exports": ["ScheduleGantt", "TagChip", "CellInput", "ROW", "ZOOMS", "axisFor", "rangeFor", "routeLink", "shortDate", "isoToday", "COLUMNS", "DEFAULT_COLUMNS", "MONTHS", "WEEKDAYS", "baselineDelta", "barLabel", "columnsFor", "describeDrag", "dayWords", "dragLines", "fixedWidth", "gapOf", "lengthWords", "linkLines", "loopWords", "monthDay", "selectionMoves", "slackWords"],
+  "files": ["index.js", "schedule-gantt.jsx", "sheet.jsx", "track.jsx", "geometry.js", "gantt-model.js"],
+  "requires": ["schedule-engine"]
+}

package/registry/blocks/schedule-gantt/demo.jsx

@@ -0,0 +1,223 @@
+"use client";
+
+// ScheduleGantt in every state — the gallery's and the smoke test's surface.
+// Not installed into apps: `makersclaw add schedule-gantt` lays index.js,
+// schedule-gantt.jsx, sheet.jsx, track.jsx, geometry.js and gantt-model.js
+// only.
+//   Plan       a launch plan with phases, a milestone, links of all four
+//              kinds, lag, a late task; drag, link, type, add; the critical
+//              path and slack switches; a baseline and its column; zoom
+//   Ghosts     where the agent moved things, and where it would put them
+//   People     lanes under the rows: who is on two things at once
+//   Loop       two tasks that wait on each other
+//   No dates   a list with lengths and no dates
+//   Whole      the whole project at once
+//   Narrow     a 320px container: the number and the title
+//   Loading, failed, empty and read-only
+import { useMemo, useState } from "react";
+import { Button, Notice, Switch } from "../components/ui";
+import { ScheduleGantt } from "../components/blocks/schedule-gantt";
+import { shiftDependents } from "../components/blocks/schedule-engine";
+
+const TODAY = "2026-09-24";
+const TARGET = "2026-10-23";
+
+const t = (id, title, start, due, extra = {}) => ({ id, parent_id: null, title, start_date: start, due_date: due, is_milestone: false, progress: 0, status: "todo", position: Number(id.replace(/\D/g, "")) || 1, ...extra });
+const PEOPLE = new Map([
+  ["maya", { name: "Maya Chen" }],
+  ["tom", { name: "Tom Okafor" }],
+  ["priya", { name: "Priya Raman" }],
+  ["dana", { name: "Dana Ferreira", left: true }],
+]);
+const TASKS = [
+  t("p1", "Design", "2026-09-07", "2026-09-25", { progress: 90 }),
+  t("t11", "Resource model and naming", "2026-09-07", "2026-09-11", { parent_id: "p1", progress: 100, status: "done", assignee_id: "tom" }),
+  t("t12", "OpenAPI draft", "2026-09-14", "2026-09-18", { parent_id: "p1", position: 2, progress: 100, status: "done", assignee_id: "priya" }),
+  t("t13", "API review with partners", "2026-09-21", "2026-09-25", { parent_id: "p1", position: 3, progress: 80, assignee_id: "maya" }),
+  t("m1", "Design frozen", "2026-09-25", "2026-09-25", { parent_id: "p1", position: 4, is_milestone: true }),
+  t("p2", "Build", "2026-09-28", "2026-10-16", { position: 2 }),
+  t("t21", "Invoices", "2026-09-28", "2026-10-02", { parent_id: "p2", assignee_id: "tom" }),
+  t("t22", "Webhooks delivery", "2026-10-05", "2026-10-09", { parent_id: "p2", position: 2, assignee_id: "tom" }),
+  t("t23", "Sandbox environment", "2026-09-17", "2026-09-24", { parent_id: "p2", position: 3, progress: 35, assignee_id: "priya" }),
+  t("t24", "Nightly CSV export", "2026-10-01", "2026-10-07", { parent_id: "p2", position: 4, assignee_id: "priya" }),
+  t("t25", "Idempotency keys", "2026-10-12", "2026-10-13", { parent_id: "p2", position: 5 }),
+  t("m2", "Feature complete", "2026-10-14", "2026-10-14", { parent_id: "p2", position: 6, is_milestone: true }),
+  t("p3", "Launch", "2026-10-15", "2026-10-23", { position: 3 }),
+  t("t31", "Support playbook", "2026-10-15", "2026-10-19", { parent_id: "p3", assignee_id: "dana" }),
+  t("t32", "Switch the API to general availability", "2026-10-20", "2026-10-22", { parent_id: "p3", position: 2, assignee_id: "tom" }),
+  t("m3", "Public launch", "2026-10-23", "2026-10-23", { parent_id: "p3", position: 3, is_milestone: true }),
+];
+const L = (id, task, dep, kind = "finish_to_start", lag = 0) => ({ id, task_id: task, depends_on_id: dep, kind, lag_days: lag });
+const LINKS = [
+  L("l1", "t12", "t11"),
+  L("l2", "t13", "t12"),
+  L("l3", "m1", "t13"),
+  L("l4", "t21", "m1"),
+  L("l5", "t22", "t21"),
+  L("l6", "t23", "t12", "start_to_start", 3),
+  L("l7", "t24", "t22", "start_to_finish"),
+  L("l8", "t25", "t22", "finish_to_start", 1),
+  L("l9", "m2", "t25"),
+  L("l10", "t31", "m2"),
+  L("l11", "t32", "t31", "finish_to_finish", 1),
+  L("l12", "m3", "t32"),
+];
+const BASELINE = new Map([
+  ["t13", { start: "2026-09-21", due: "2026-09-23" }],
+  ["t22", { start: "2026-10-01", due: "2026-10-05" }],
+  ["t32", { start: "2026-10-12", due: "2026-10-14" }],
+  ["m3", { start: "2026-10-15", due: "2026-10-15" }],
+]);
+const GHOSTS = new Map([
+  ["t13", { start: "2026-09-14", due: "2026-09-18" }],
+  ["t24", { start: "2026-09-23", due: "2026-09-29" }],
+]);
+const PENCIL = new Map([["t25", { start: "2026-10-09", due: "2026-10-12" }]]);
+const LANES = [
+  { id: "tom", label: "Tom Okafor", sub: "3 open", items: [{ id: "a", title: "Invoices", start: "2026-09-28", due: "2026-10-02" }, { id: "b", title: "Webhooks delivery", start: "2026-10-05", due: "2026-10-09" }, { id: "c", title: "Switch the API", start: "2026-10-20", due: "2026-10-22" }], marks: [] },
+  { id: "priya", label: "Priya Raman", sub: "2 open", items: [{ id: "d", title: "Sandbox", start: "2026-09-17", due: "2026-09-24" }, { id: "e", title: "CSV export", start: "2026-10-01", due: "2026-10-07" }], marks: [] },
+];
+const LOOP = [t("a", "Cabling and server closet", "2026-10-12", "2026-10-16"), t("b", "Pack and label", "2026-10-19", "2026-10-23", { position: 2 })];
+const LOOP_LINKS = [L("x", "a", "b"), L("y", "b", "a")];
+const NO_DATES = [t("n1", "Survey current pick paths", null, null), t("n2", "Rank SKUs by velocity", null, null, { position: 2 }), t("n3", "Re-slotting done", null, null, { position: 3, is_milestone: true })];
+
+function Frame({ title, note, children, height = 380, width }) {
+  return (
+    <section className="grid gap-2">
+      <h3 className="text-sm font-semibold">{title}</h3>
+      {note ? <p className="text-xs text-muted-foreground">{note}</p> : null}
+      <div className="overflow-hidden border border-border" style={{ height, width }}>
+        {children}
+      </div>
+    </section>
+  );
+}
+
+export default function ScheduleGanttDemo() {
+  const [tasks, setTasks] = useState(TASKS);
+  const [links, setLinks] = useState(LINKS);
+  const [selected, setSelected] = useState("t22");
+  const [collapsed, setCollapsed] = useState(() => new Set(["p1"]));
+  const [critical, setCritical] = useState(true);
+  const [baseline, setBaseline] = useState(true);
+  const [zoom, setZoom] = useState("week");
+  const [live, setLive] = useState(null);
+  const [said, setSaid] = useState("Drag a bar, pull the dot at its end onto another, or type in the sheet.");
+
+  const apply = (changes) => setTasks((cur) => cur.map((x) => { const c = changes.find((y) => String(y.id) === x.id); return c ? { ...x, start_date: c.start_date, due_date: c.due_date } : x; }));
+  const onMove = async (moves, preview) => {
+    apply(preview.changes);
+    setSaid(`Moved ${moves[0].id}; ${preview.changes.length} dates saved at once.`);
+    return { ok: true };
+  };
+  const onLink = async ({ taskId, dependsOnId, kind }, preview) => {
+    setLinks((cur) => [...cur, { id: `new${cur.length}`, task_id: taskId, depends_on_id: dependsOnId, kind, lag_days: 0 }]);
+    if (preview?.changes) apply(preview.changes);
+    setSaid(`Linked ${taskId} to wait on ${dependsOnId} (${kind}).`);
+    return { ok: true };
+  };
+  const onEdit = async (task, field, value) => {
+    if (field === "title") setTasks((cur) => cur.map((x) => (x.id === task.id ? { ...x, title: value } : x)));
+    if (field === "progress") setTasks((cur) => cur.map((x) => (x.id === task.id ? { ...x, progress: Number(value) || 0 } : x)));
+    if (field === "days") {
+      const r = shiftDependents(tasks, links, [{ id: task.id, start: task.start_date, due: task.due_date }]);
+      apply(r.changes);
+    }
+    setSaid(`Changed ${field} of ${task.title}.`);
+    return { ok: true };
+  };
+  const onAdd = async ({ title, days, milestone }) => {
+    const id = `new${tasks.length}`;
+    setTasks((cur) => [...cur, { ...t(id, title, "2026-10-26", "2026-10-28", { position: cur.length + 1, is_milestone: Boolean(milestone) }), progress: 0, days }]);
+    return { ok: true, id };
+  };
+  const failing = async () => ({ ok: false, error: "Three dates didn't save: the plan's records did not answer." });
+  const people = useMemo(() => PEOPLE, []);
+
+  return (
+    <div className="grid gap-6 p-4">
+      <Notice>{live ? `Dragging ${live.task?.title}: the finish moves ${live.cost} wd (${live.finishBefore} to ${live.finishAfter}).` : said}</Notice>
+      <div className="grid gap-2 sm:grid-cols-[auto_auto_auto_auto_1fr] sm:items-center">
+        <Switch id="gantt-demo-critical" checked={critical} onChange={(e) => setCritical(e.target.checked)} label="Critical path" />
+        <Switch id="gantt-demo-baseline" checked={baseline} onChange={(e) => setBaseline(e.target.checked)} label="Baseline" />
+        <div className="flex gap-1">
+          {["day", "week", "month", "fit"].map((z) => (
+            <Button key={z} size="sm" variant={zoom === z ? "primary" : "quiet"} onClick={() => setZoom(z)}>{z}</Button>
+          ))}
+        </div>
+      </div>
+
+      <Frame title="Plan" note="Phase 1 is folded. Alt+arrows move the selected task a working day." height={460}>
+        <ScheduleGantt
+          tasks={tasks}
+          links={links}
+          people={people}
+          today={TODAY}
+          target={TARGET}
+          zoom={zoom}
+          columns={baseline ? ["outline", "title", "start", "due", "days", "done", "who", "waits", "slack", "vs"] : ["outline", "title", "start", "due", "days", "done", "who", "waits"]}
+          vsLabel="vs Kickoff"
+          critical={critical}
+          baseline={baseline ? BASELINE : undefined}
+          selectedId={selected}
+          onSelect={setSelected}
+          collapsed={collapsed}
+          onToggle={(id) => setCollapsed((cur) => { const n = new Set(cur); if (n.has(id)) n.delete(id); else n.add(id); return n; })}
+          onOpen={(task) => setSaid(`Open ${task.title}`)}
+          onMove={onMove}
+          onLink={onLink}
+          onEdit={onEdit}
+          onAdd={onAdd}
+          onPreview={setLive}
+          onOpenLink={(l) => setSaid(`Change the link ${l.id}`)}
+          tags={new Map([["t22", [{ kind: "pole", label: "long pole" }]], ["t13", [{ kind: "agent", title: "Re-planned from today" }]], ["t23", [{ kind: "dot", title: "Due today, 35% done" }]]])}
+          label="The plan of Public API v1"
+        />
+      </Frame>
+
+      <Frame title="Where it was, where it would go" note="Dashed grey: this morning's check moved these. Dashed blue: a suggestion's place for Idempotency keys." height={320}>
+        <ScheduleGantt tasks={TASKS} links={LINKS} people={people} today={TODAY} target={TARGET} ghosts={GHOSTS} pencil={PENCIL} critical selectedId="t13" columns={["outline", "title", "who", "waits"]} />
+      </Frame>
+
+      <Frame title="People" note="Lanes under the rows, on the same scale." height={380}>
+        <ScheduleGantt tasks={TASKS} links={LINKS} people={people} today={TODAY} target={TARGET} lanes={LANES} lanesTitle="People's load" columns={["outline", "title", "who"]} />
+      </Frame>
+
+      <Frame title="A loop" note="Two tasks wait on each other: they are drawn dashed and not placed." height={200}>
+        <ScheduleGantt tasks={LOOP} links={LOOP_LINKS} today={TODAY} columns={["outline", "title", "due", "waits"]} notes={new Map([["a", { text: "Not placed: waits on 2, which waits on 1", tone: "problem" }]])} onOpenLink={() => {}} />
+      </Frame>
+
+      <Frame title="No dates" note="Lengths first; a start date works the dates out." height={200}>
+        <ScheduleGantt tasks={NO_DATES} links={[]} today={TODAY} columns={["outline", "title", "days"]} guesses={new Set(["n2"])} onEdit={onEdit} onAdd={onAdd} />
+      </Frame>
+
+      <Frame title="The whole project" note="Folded to its phases, in the width there is." height={260}>
+        <ScheduleGantt tasks={TASKS} links={LINKS} today={TODAY} target={TARGET} zoom="fit" collapsed={new Set(["p1", "p2", "p3"])} columns={["outline", "title"]} />
+      </Frame>
+
+      <Frame title="Narrow (320px)" height={260} width={320}>
+        <ScheduleGantt tasks={TASKS} links={LINKS} people={people} today={TODAY} target={TARGET} columns={["outline", "title", "who", "days"]} />
+      </Frame>
+
+      <Frame title="Loading" height={200}>
+        <ScheduleGantt tasks={[]} links={[]} today={TODAY} loading />
+      </Frame>
+
+      <Frame title="Failed" height={200}>
+        <ScheduleGantt tasks={[]} links={[]} today={TODAY} error="The plan could not be read: the records did not answer." />
+      </Frame>
+
+      <Frame title="Empty" height={200}>
+        <ScheduleGantt tasks={[]} links={[]} today={TODAY} onAdd={onAdd} />
+      </Frame>
+
+      <Frame title="A save that fails" note="Drag any bar: the chart puts it back and says why." height={280}>
+        <ScheduleGantt tasks={TASKS} links={LINKS} today={TODAY} target={TARGET} onMove={failing} columns={["outline", "title", "due"]} />
+      </Frame>
+
+      <Frame title="Read-only" note="No callbacks: no drag, no link, no typing." height={260}>
+        <ScheduleGantt tasks={TASKS} links={LINKS} people={people} today={TODAY} target={TARGET} columns={["outline", "title", "who", "days"]} />
+      </Frame>
+    </div>
+  );
+}

package/registry/blocks/schedule-gantt/gantt-model.js

@@ -0,0 +1,219 @@
+// The chart's arithmetic and words, with no React: the columns of the sheet,
+// how a date is written, the gap between the finish and the target, what a
+// baseline says about a row, and what a drag costs. Pure, so it is tested
+// under node and the chart only draws what it says.
+
+import { dayOf, linkKind, workdaysBetween } from "../schedule-engine";
+
+export const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+export const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const DAY_MS = 86400000;
+
+/** "Oct 23" */
+export function monthDay(iso) {
+  const d = dayOf(iso);
+  if (d == null) return "";
+  const x = new Date(d * DAY_MS);
+  return `${MONTHS[x.getUTCMonth()]} ${x.getUTCDate()}`;
+}
+
+/** "Fri Oct 23" */
+export function dayWords(iso) {
+  const d = dayOf(iso);
+  if (d == null) return "";
+  const x = new Date(d * DAY_MS);
+  return `${WEEKDAYS[(((d + 3) % 7) + 7) % 7]} ${MONTHS[x.getUTCMonth()]} ${x.getUTCDate()}`;
+}
+
+/** The sheet's columns: label, width in px (the title takes the rest), and which side its text sits. */
+export const COLUMNS = {
+  outline: { label: "#", w: 50 },
+  title: { label: "Task" },
+  start: { label: "Start", w: 56 },
+  due: { label: "Finish", w: 56 },
+  days: { label: "Length", w: 50, right: true },
+  done: { label: "Done", w: 44, right: true },
+  who: { label: "Owner", w: 62 },
+  waits: { label: "Waits on", w: 88 },
+  slack: { label: "Slack", w: 50, right: true },
+  vs: { label: "vs baseline", w: 66, right: true },
+};
+export const DEFAULT_COLUMNS = ["outline", "title", "who", "days", "done"];
+
+/**
+ * The columns to draw: the keys asked for that exist, the title always
+ * there (after the outline number), a narrow container only the number and
+ * the title.
+ */
+export function columnsFor(keys, { vsLabel = "vs baseline", narrow = false, outlineWidth } = {}) {
+  const want = (Array.isArray(keys) && keys.length ? keys : DEFAULT_COLUMNS).filter((k) => COLUMNS[k]);
+  const list = want.includes("title") ? want : ["outline", "title", ...want.filter((k) => k !== "outline")];
+  const out = (narrow ? list.filter((k) => k === "outline" || k === "title") : list).map((key) => ({ key, ...COLUMNS[key], ...(key === "vs" ? { label: vsLabel } : {}), ...(key === "outline" && outlineWidth ? { w: outlineWidth } : {}) }));
+  return out;
+}
+
+/** The width the fixed columns take, so the sheet knows what is left for the title. */
+export const fixedWidth = (cols) => cols.reduce((n, c) => n + (c.w ?? 0), 0);
+
+/**
+ * The finish against the target: { state: "late" | "early" | "on" | null,
+ * n (working days), text }. Null with no finish. "Finish Nov 3 · 7 wd late".
+ */
+export function gapOf(finish, target) {
+  if (!finish) return { state: null, n: 0, text: "" };
+  const head = `Finish ${monthDay(finish)}`;
+  if (!target) return { state: null, n: 0, text: head };
+  const a = dayOf(finish);
+  const b = dayOf(target);
+  if (a > b) {
+    const n = workdaysBetween(target, finish);
+    return { state: "late", n, text: `${head} · ${n} wd late` };
+  }
+  if (a < b) {
+    const n = workdaysBetween(finish, target);
+    return { state: "early", n, text: `${head} · ${n} wd to spare` };
+  }
+  return { state: "on", n: 0, text: `${head} · on the target` };
+}
+
+/**
+ * A row against its baseline: days later (+) or earlier (-) at the finish,
+ * { text, tone: "late" | "early" | "same" | "new" | null }. `base` is
+ * { start, due } or undefined (the task is new since); a summary with no
+ * baseline row says nothing.
+ */
+export function baselineDelta(row, base) {
+  if (!row?.dated || row.summary) return { text: row?.summary ? "" : "", tone: null };
+  if (!base) return { text: "new", tone: "new" };
+  const a = dayOf(row.due);
+  const b = dayOf(base.due);
+  if (a == null || b == null) return { text: "", tone: null };
+  if (a === b) return { text: "0", tone: "same" };
+  const n = a > b ? workdaysBetween(base.due, row.due) : -workdaysBetween(row.due, base.due);
+  return { text: `${n > 0 ? "+" : n < 0 ? "-" : ""}${Math.abs(n)} wd`, tone: n > 0 ? "late" : n < 0 ? "early" : "same" };
+}
+
+/** A row's length words: "5 wd", "3 wd?" for a guess, "" for a phase or milestone, null when undated. */
+export function lengthWords(row, guessed = false) {
+  if (!row || row.summary || row.milestone) return "";
+  if (row.duration == null) return null;
+  return `${row.duration} wd${guessed ? "?" : ""}`;
+}
+
+/** The slack words: "0 wd" on a critical row, "" for finished work and phases. */
+export function slackWords(row) {
+  if (!row || row.summary || row.pinned || row.slack == null) return "";
+  return `${row.slack} wd`;
+}
+
+/** What a task is called to a screen reader. */
+export function barLabel(task, row) {
+  if (!task || !row) return "";
+  const when = row.start ? `${dayWords(row.start)}${row.due && row.due !== row.start ? ` to ${dayWords(row.due)}` : ""}` : "no dates";
+  const len = row.milestone || row.summary || row.duration == null ? "" : `, ${row.duration} working ${row.duration === 1 ? "day" : "days"}`;
+  const state = row.pinned ? ", done" : row.critical ? ", on the critical path" : row.slack > 0 ? `, ${row.slack} days of slack` : "";
+  return `${task.title}: ${when}${len}${state}`;
+}
+
+/**
+ * What a drag costs, for the note by the bar and the page's top bar.
+ * `before` / `after` are plans (engine `schedule` results), `changes` the
+ * engine's shifted dates, `id` the dragged row.
+ * → { id, cost (working days the finish moves), followers, startShift,
+ *     lengthShift, slack, critical, duration, oldDuration, start, due,
+ *     finishBefore, finishAfter, finishTitle, clamped }
+ */
+export function describeDrag({ before, after, changes, clamped = [], id, titleOf = () => "" }) {
+  const b = before.rows.get(id);
+  const a = after.rows.get(id);
+  const cost = before.finish && after.finish ? workdaysBetween(before.finish, after.finish) : 0;
+  const followers = (changes ?? []).filter((c) => String(c.id) !== id && !c.summary).length;
+  const startShift = b?.start && a?.planStart ? workdaysBetween(b.start, a.planStart) : 0;
+  const lengthShift = b?.duration != null && a?.duration != null ? a.duration - b.duration : 0;
+  // The row the finish waits on: a milestone that ends on it, else the first task that does.
+  let finishTitle = "";
+  if (after.finish) {
+    let hit = null;
+    for (const r of after.rows.values()) {
+      if (r.summary || !r.dated || r.planDue !== after.finish) continue;
+      if (!hit || (r.milestone && !hit.milestone)) hit = r;
+    }
+    finishTitle = hit ? titleOf(hit.id) : "";
+  }
+  return {
+    id,
+    cost,
+    followers,
+    startShift,
+    lengthShift,
+    slack: b?.slack ?? null,
+    critical: Boolean(b?.critical),
+    duration: a?.duration,
+    oldDuration: b?.duration,
+    start: a?.planStart,
+    due: a?.planDue,
+    finishBefore: before.finish,
+    finishAfter: after.finish,
+    finishTitle,
+    clamped,
+  };
+}
+
+/** The lines of the note by a moving bar, in the canvas's words. */
+export function dragLines(info, task, { nextTitle = null } = {}) {
+  const shift = info.lengthShift || info.startShift;
+  const signed = shift ? `${shift > 0 ? "+" : "-"}${Math.abs(shift)}` : "";
+  const first = info.lengthShift
+    ? `Finish ${dayWords(info.due)} · ${info.duration} wd, was ${info.oldDuration}`
+    : `${dayWords(info.start)}${info.due !== info.start ? ` to ${dayWords(info.due)}` : ""}${shift ? ` · moved ${signed} wd` : ""}`;
+  const second = info.followers ? `Moves ${info.followers} ${info.followers === 1 ? "task" : "tasks"} with it` : "Nothing else moves";
+  const left = info.slack != null ? Math.max(0, info.slack - Math.max(0, info.startShift + info.lengthShift)) : null;
+  const slackLine = !info.followers && left != null ? `${left} wd of slack left${nextTitle ? ` before ${nextTitle} needs it` : ""}` : null;
+  const third =
+    info.cost > 0
+      ? { text: `${info.finishTitle ? `${info.finishTitle} ` : "Finish "}${dayWords(info.finishAfter)} · +${info.cost} wd`, tone: "late" }
+      : info.cost < 0
+        ? { text: `${info.finishTitle ? `${info.finishTitle} ` : "Finish "}${dayWords(info.finishAfter)} · ${info.cost} wd`, tone: "early" }
+        : { text: "The finish holds", tone: null };
+  return { title: task?.title ?? "", first, second, slack: slackLine, third, last: "Let go to save · Esc puts it back" };
+}
+
+/** The note by a link being pulled: what it would say, and what it costs. */
+export function linkLines({ task, predecessor, kind, info, problem }) {
+  if (problem) return { text: problem, tone: "problem" };
+  const k = linkKind(kind);
+  const clause = { FS: "finish to start", SS: "start to start", FF: "finish to finish", SF: "start to finish" }[k];
+  const head = `Let go to link: ${task?.title ?? "it"} waits on ${predecessor?.title ?? "it"}, ${clause}`;
+  const cost = info?.cost ?? 0;
+  const tail = cost > 0 ? `Finish moves ${cost} wd later` : info?.followers ? `${info.followers} ${info.followers === 1 ? "task moves" : "tasks move"}; the finish holds` : `Finish unchanged${predecessor && info?.slack != null ? `: ${predecessor.title} has ${info.slack} wd of slack` : ""}`;
+  return { text: head, tail, tone: cost > 0 ? "late" : null };
+}
+
+/**
+ * The moves for a drag of one bar or of every selected bar by `delta`
+ * calendar days of the track (`movesOf(id)` makes one bar's move). A row
+ * that is finished, undated or a summary of a selected child is left out.
+ */
+export function selectionMoves(ids, movesOf) {
+  const out = [];
+  const seen = new Set();
+  for (const id of ids) {
+    for (const m of movesOf(id)) {
+      if (seen.has(m.id)) continue;
+      seen.add(m.id);
+      out.push(m);
+    }
+  }
+  return out;
+}
+
+/** "Not placed: waits on 5, which waits on 4" for a row a loop holds. */
+export function loopWords(row, plan, outlineOf) {
+  if (!row?.stuck) return "";
+  const waits = [];
+  for (const l of plan.links.values()) if (l.taskId === row.id && l.valid) waits.push(l);
+  const first = waits[0];
+  if (!first) return "Not placed: a loop";
+  const out = outlineOf(first.dependsOnId);
+  return out ? `Not placed: waits on ${out}, which is in a loop` : "Not placed: a loop";
+}