makersclaw 0.8.0 → 0.8.1

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

@@ -0,0 +1,882 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Icon, cx } from "../../ui";
+import { datesOf, dayOf, isoOf, linkProblem, makeCalendar, schedule, shiftDependents, spanOf, taskTree, waitsWords } from "../schedule-engine";
+import { ZOOMS, axisFor, rangeFor, routeLink } from "./geometry";
+import { baselineDelta, barLabel, columnsFor, dayWords, describeDrag, dragLines, fixedWidth, gapOf, linkLines, selectionMoves, slackWords } from "./gantt-model";
+import { AddRow, ROW, SheetHead, SheetRow } from "./sheet";
+import { HEAD, Ghosts, LaneLabels, LaneTrack, Links, Paper, TrackHead } from "./track";
+
+// ScheduleGantt: the task sheet beside a working-day time scale, one picture
+// row for row. Bars are steel grey with their progress inside; the critical
+// path turns red when the page switches it on; a phase is a bracket over its
+// work; a milestone a diamond. The target is a dashed line, the finish a solid
+// one, and the gap between them is measured in working days in the header.
+// Dashed outlines show where bars were (`ghosts`) and where a suggestion
+// would put them (`pencil`).
+//
+// Drag a bar to move it, an end to change its length, the dot at its end onto
+// another bar to link them: everything that waits on it moves while you drag,
+// and a note by the bar says what it costs. README.md lists every prop.
+// Built from divs and one svg for the links, tokens only.
+
+const BAR = 14;
+const CAL = makeCalendar("weekdays");
+const EMPTY = [];
+const NONE = new Set();
+const KIND_OF = { "finish:start": "finish_to_start", "start:start": "start_to_start", "finish:finish": "finish_to_finish", "start:finish": "start_to_finish" };
+const NUM = "tabular-nums";
+
+const firstName = (name) => String(name ?? "").trim().split(/\s+/)[0] ?? "";
+
+export function ScheduleGantt({
+  tasks: tasksProp,
+  links: linksProp,
+  people,
+  today,
+  showToday = true,
+  target,
+  zoom = "week",
+  fitWidth,
+  columns,
+  vsLabel = "vs baseline",
+  rowH = ROW,
+  gridWidth = 470,
+  onGridWidth,
+  height = "fill",
+  critical = false,
+  selectedId,
+  selectedIds,
+  onSelect,
+  collapsed,
+  onToggle,
+  onOpen,
+  onMove,
+  onLink,
+  onEdit,
+  onAdd,
+  onPreview,
+  onOpenLink,
+  highlight,
+  addUnder,
+  editRequest,
+  jump,
+  ghosts,
+  pencil,
+  baseline,
+  guesses,
+  notes,
+  tags,
+  moving,
+  rowMenu,
+  lanes,
+  lanesTitle,
+  loading = false,
+  error = null,
+  emptyText = "No tasks yet. Type the first one in the last row.",
+  label = "Gantt chart",
+  className,
+}) {
+  const tasks = tasksProp ?? EMPTY;
+  const links = linksProp ?? EMPTY;
+  const scroller = useRef(null);
+  const track = useRef(null);
+  const dragRef = useRef(null);
+  const linkRef = useRef(null);
+  const suppress = useRef(false);
+  const addRef = useRef(null);
+  const [boxW, setBoxW] = useState(null);
+  const [preview, setPreview] = useState(null);
+  const [linking, setLinking] = useState(null);
+  const [editing, setEditing] = useState(null);
+  const [draft, setDraft] = useState({ title: "", days: "", milestone: false, parentId: null, afterId: null });
+  const [adding, setAdding] = useState(false);
+  const [hovered, setHovered] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [note, setNote] = useState(null);
+  const [gridState, setGridState] = useState(gridWidth);
+  const selected = selectedId ? String(selectedId) : null;
+  const picked = selectedIds ?? NONE;
+
+  // Measured in the callback, applied in the next frame (an observer that sets what it watches loops).
+  useLayoutEffect(() => {
+    const el = scroller.current;
+    if (!el) return undefined;
+    let raf = 0;
+    const apply = (w) => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => setBoxW(w));
+    };
+    setBoxW(el.clientWidth);
+    const onResize = () => apply(el.clientWidth);
+    window.addEventListener("resize", onResize);
+    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => apply(el.clientWidth));
+    ro?.observe(el);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onResize);
+      ro?.disconnect();
+    };
+  }, []);
+
+  // The page opens the add row: { id (a parent) | null, afterId, milestone, nonce }.
+  useEffect(() => {
+    if (!addUnder) return;
+    setAdding(true);
+    setDraft({ title: "", days: "", milestone: Boolean(addUnder.milestone), parentId: addUnder.id ? String(addUnder.id) : null, afterId: addUnder.afterId ? String(addUnder.afterId) : null });
+    const t = setTimeout(() => {
+      addRef.current?.focus();
+      addRef.current?.scrollIntoView?.({ block: "nearest" });
+    }, 20);
+    return () => clearTimeout(t);
+  }, [addUnder]);
+
+  // The page opens a cell: { id, field, nonce } (the row menu's Rename).
+  useEffect(() => {
+    if (editRequest?.id) setEditing({ id: String(editRequest.id), field: editRequest.field ?? "title" });
+  }, [editRequest]);
+
+  useEffect(() => {
+    if (jump?.date) scrollToDay(jump.date, true);
+  }, [jump]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ---- the model ----------------------------------------------------------
+  const plan = useMemo(() => schedule(tasks, links), [tasks, links]);
+  const live = preview?.plan ?? plan;
+  const tree = useMemo(() => taskTree(tasks), [tasks]);
+  const byId = useMemo(() => new Map(tasks.map((t) => [String(t.id), t])), [tasks]);
+  const closed = collapsed ?? NONE;
+  const visible = useMemo(() => {
+    const out = [];
+    for (const e of tree.order) {
+      let hidden = false;
+      for (let p = e.parentId; p; p = tree.byId.get(p)?.parentId) if (closed.has(p)) hidden = true;
+      if (!hidden) out.push(e);
+    }
+    return out;
+  }, [tree, closed]);
+  const rowOf = useMemo(() => new Map(visible.map((e, i) => [e.id, i])), [visible]);
+  const outlineOf = (id) => tree.byId.get(String(id))?.outline;
+  // The add row sits under the row it adds after; everything below it moves down by its height.
+  const ADD_H = ROW + 6;
+  const addIndex = adding ? (draft.afterId && rowOf.has(draft.afterId) ? rowOf.get(draft.afterId) : draft.parentId && rowOf.has(draft.parentId) ? rowOf.get(draft.parentId) : visible.length - 1) : null;
+  const rowTop = (i) => i * rowH + (addIndex != null && i > addIndex ? ADD_H : 0);
+  const rowAt = (y) => {
+    for (let i = 0; i < visible.length; i += 1) if (y >= rowTop(i) && y < rowTop(i) + rowH) return i;
+    return -1;
+  };
+  const shownRow = (id) => {
+    for (let cur = String(id); cur; cur = tree.byId.get(cur)?.parentId) if (rowOf.has(cur)) return rowOf.get(cur);
+    return null;
+  };
+
+  const shown = useMemo(() => {
+    const out = new Map();
+    for (const t of tasks) {
+      const id = String(t.id);
+      const r = live.rows.get(id);
+      if (!r || !r.dated || r.summary) continue;
+      const p = preview?.dates?.get(id);
+      out.set(id, { start: p?.start ?? r.start, due: p?.due ?? r.due });
+    }
+    for (const r of live.rows.values()) {
+      if (!r.summary) continue;
+      let s = null;
+      let d = null;
+      for (const leaf of r.leafIds) {
+        const x = out.get(leaf);
+        if (!x || !x.start) continue;
+        if (!s || x.start < s) s = x.start;
+        if (!d || x.due > d) d = x.due;
+      }
+      if (s) out.set(r.id, { start: s, due: d });
+    }
+    return out;
+  }, [tasks, live, preview]);
+
+  // ---- the sheet ----------------------------------------------------------
+  const narrow = boxW != null && boxW < 760;
+  const cols = useMemo(() => columnsFor(columns, { vsLabel, narrow, outlineWidth: tree.order.some((e) => e.depth >= 3) ? 78 : undefined }), [columns, vsLabel, narrow, tree]);
+  const gridW = narrow ? Math.max(170, Math.min(260, Math.round((boxW ?? 400) * 0.46))) : Math.max(fixedWidth(cols) + 160, gridState);
+  const cellsOf = useMemo(() => {
+    const byTask = new Map();
+    for (const l of links) {
+      const k = String(l.task_id);
+      if (!byTask.has(k)) byTask.set(k, []);
+      byTask.get(k).push(l);
+    }
+    return (id) => {
+      const t = byId.get(id);
+      const r = live.rows.get(id);
+      const mine = byTask.get(id) ?? [];
+      const person = people?.get?.(String(t?.assignee_id ?? ""));
+      const name = person?.name ?? t?.assignee_name ?? "";
+      const out = {
+        owner: { name: firstName(name), title: name, left: Boolean(person?.left) },
+        waits: waitsWords(mine, id, outlineOf),
+        waitsLinks: mine.map((l) => live.links.get(String(l.id))).filter(Boolean),
+        waitsBroken: mine.some((l) => live.links.get(String(l.id))?.violated) || Boolean(r?.stuck),
+        slack: slackWords(r),
+        guessed: Boolean(guesses?.has?.(id)),
+      };
+      if (baseline) out.delta = baselineDelta(r, baseline.get?.(id));
+      return out;
+    };
+  }, [links, byId, live, people, baseline, guesses, tree]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ---- the axis -----------------------------------------------------------
+  const z = ZOOMS[zoom] ? zoom : "week";
+  const range = useMemo(() => {
+    const dates = [];
+    for (const r of plan.rows.values()) if (r.dated) dates.push(r.start, r.due, r.planDue);
+    if (target) dates.push(target);
+    if (ghosts) for (const g of ghosts.values()) dates.push(g.start, g.due);
+    if (pencil) for (const g of pencil.values()) dates.push(g.start, g.due);
+    if (baseline) for (const g of baseline.values()) dates.push(g.start, g.due);
+    return rangeFor(z, dates, today);
+  }, [plan, target, ghosts, pencil, baseline, z, today]);
+  // Whole project: the span fits the width, with room on the right for the notes after the bars.
+  const ppd = z === "fit" ? Math.max(2, ((fitWidth ?? boxW ?? 1200) - gridW - (notes?.size ? 200 : 16)) / (range.to - range.from + 1)) : ZOOMS[z].ppd;
+  const axis = useMemo(() => axisFor(z, range.from, range.to), [z, range.from, range.to]);
+  const trackW = Math.round((range.to - range.from + 1) * ppd);
+  const X = (iso) => (dayOf(iso) - range.from) * ppd;
+  const inRange = (iso) => iso && dayOf(iso) >= range.from && dayOf(iso) <= range.to;
+
+  const boxOf = (id) => {
+    const row = shownRow(id);
+    const d = shown.get(String(id));
+    if (row == null || !d) return null;
+    const r = live.rows.get(String(id));
+    const y = rowTop(row) + rowH / 2;
+    const own = rowOf.get(String(id)) === row;
+    if (r?.milestone) {
+      const cx0 = X(d.due) + ppd / 2;
+      return { x0: cx0 - 7, x1: cx0 + 7, y, top: y - 7, bottom: y + 7, milestone: true, row, own };
+    }
+    const h = r?.summary || !own ? 6 : BAR;
+    return { x0: X(d.start), x1: X(d.due) + ppd, y, top: y - h / 2, bottom: y + h / 2, milestone: false, row, own };
+  };
+
+  const lines = useMemo(() => {
+    const out = [];
+    const moved = new Set((preview?.changes ?? []).map((c) => String(c.id)));
+    for (const l of live.links.values()) {
+      if (!l.valid) continue;
+      const a = boxOf(l.dependsOnId);
+      const b = boxOf(l.taskId);
+      if (!a || !b || a.row === b.row || !a.own || !b.own) continue;
+      const kind = { finish_to_start: "FS", start_to_start: "SS", finish_to_finish: "FF", start_to_finish: "SF" }[l.kind] ?? l.kind;
+      const route = routeLink(a, b, kind, { rowH });
+      out.push({ id: l.id, link: l, critical: l.critical, lag: l.lag, route, touches: selected === l.taskId || selected === l.dependsOnId, moving: moved.has(l.taskId) && moved.has(l.dependsOnId) });
+    }
+    return out;
+  }, [live, shown, visible, ppd, range.from, selected, rowH, preview]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function scrollToDay(iso, smooth) {
+    const el = scroller.current;
+    if (!el || !iso) return;
+    const left = Math.max(0, X(iso) - (el.clientWidth - gridW) * 0.3);
+    el.scrollTo({ left, behavior: smooth ? "smooth" : "auto" });
+  }
+  useLayoutEffect(() => {
+    if (z !== "fit") scrollToDay(today, false);
+  }, [z, range.from]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ---- dragging bars ----------------------------------------------------------
+  function movesFor(d, delta) {
+    const t = byId.get(d.id);
+    const r = plan.rows.get(d.id);
+    if (!t || !r) return [];
+    if (r.summary) return [{ id: d.id, start: isoOf(dayOf(d.start) + delta) }];
+    const span = spanOf(t);
+    if (d.mode === "move") {
+      if (r.milestone) {
+        const m = datesOf(CAL.lastIndex(dayOf(r.due) + delta) + 1, 0, true);
+        return [{ id: d.id, start: m.start, due: m.due }];
+      }
+      const m = datesOf(CAL.startIndex(dayOf(r.start) + delta), span.d, false);
+      return [{ id: d.id, start: m.start, due: m.due }];
+    }
+    if (d.mode === "end") return [{ id: d.id, start: r.start, due: isoOf(Math.max(dayOf(r.start), dayOf(r.due) + delta)) }];
+    return [{ id: d.id, start: isoOf(Math.min(dayOf(r.due), dayOf(r.start) + delta)), due: r.due }];
+  }
+
+  function previewFor(moves, extra = {}) {
+    const res = shiftDependents(tasks, links, moves, extra);
+    const dates = new Map(res.changes.map((c) => [String(c.id), { start: c.start_date, due: c.due_date }]));
+    const from = new Map(res.changes.filter((c) => c.from?.start_date).map((c) => [String(c.id), { start: c.from.start_date, due: c.from.due_date }]));
+    return { dates, from, plan: res.after, finishBefore: res.finishBefore, finishAfter: res.finishAfter, clamped: res.clamped, moves, changes: res.changes };
+  }
+
+  const describe = (p, id) => describeDrag({ before: plan, after: p.plan, changes: p.changes, clamped: p.clamped, id, titleOf: (x) => byId.get(x)?.title ?? "" });
+
+  function startDrag(e, id, modeName) {
+    if (!onMove) return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    const r = plan.rows.get(String(id));
+    if (!r?.dated || r.pinned) return;
+    if (e.pointerType !== "mouse" && modeName === "move" && !r.summary && !r.milestone) return;
+    e.stopPropagation();
+    const together = modeName === "move" && picked.size > 1 && picked.has(String(id)) ? [...picked].map(String) : null;
+    dragRef.current = { id: String(id), mode: modeName, x0: e.clientX, start: shown.get(String(id))?.start, delta: 0, moved: false, pointerId: e.pointerId, together };
+    try {
+      track.current?.setPointerCapture(e.pointerId);
+    } catch {
+      // the pointer is gone already
+    }
+  }
+
+  function movesOfDrag(d, delta) {
+    if (!d.together) return movesFor(d, delta);
+    return selectionMoves(d.together, (id) => {
+      const r = plan.rows.get(id);
+      if (!r?.dated || r.pinned) return [];
+      return movesFor({ id, mode: "move", start: shown.get(id)?.start ?? r.start }, delta);
+    });
+  }
+
+  function onTrackMove(e) {
+    if (linkRef.current) return moveLink(e);
+    const d = dragRef.current;
+    if (!d || e.pointerId !== d.pointerId) return;
+    const dx = e.clientX - d.x0;
+    if (!d.moved && Math.abs(dx) < 4) return;
+    d.moved = true;
+    const delta = Math.round(dx / ppd);
+    if (delta === d.delta && preview) return;
+    d.delta = delta;
+    const p = previewFor(movesOfDrag(d, delta));
+    p.info = describe(p, d.id);
+    d.preview = p;
+    setPreview(p);
+    onPreview?.({ mode: d.mode === "end" ? "stretch" : "move", task: byId.get(d.id), ...p.info });
+  }
+
+  async function onTrackUp(e) {
+    if (linkRef.current) return finishLink(e);
+    const d = dragRef.current;
+    if (!d || e.pointerId !== d.pointerId) return;
+    dragRef.current = null;
+    if (!d.moved) return;
+    suppress.current = true;
+    setTimeout(() => {
+      suppress.current = false;
+    }, 0);
+    const p = d.preview;
+    setPreview(null);
+    onPreview?.(null);
+    if (!p || d.delta === 0) return;
+    const res = await onMove?.(p.moves, p);
+    if (res && res.ok === false) setNote(res.error ?? "That move was not saved.");
+  }
+
+  function cancelAll() {
+    dragRef.current = null;
+    linkRef.current = null;
+    setPreview(null);
+    setLinking(null);
+    onPreview?.(null);
+  }
+
+  // ---- drawing links ----------------------------------------------------------
+  function trackPoint(e) {
+    const rect = track.current?.getBoundingClientRect();
+    return rect ? { x: e.clientX - rect.left, y: e.clientY - rect.top } : { x: 0, y: 0 };
+  }
+
+  function startLink(e, id, end) {
+    if (!onLink) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const b = boxOf(id);
+    if (!b) return;
+    const from = { x: end === "start" ? b.x0 : b.x1, y: b.y };
+    const l = { fromId: String(id), fromEnd: end, from, to: from, targetId: null, targetEnd: null, problem: null, pointerId: e.pointerId, preview: null };
+    linkRef.current = l;
+    setLinking(l);
+    try {
+      track.current?.setPointerCapture(e.pointerId);
+    } catch {
+      // the pointer is gone already
+    }
+  }
+
+  function moveLink(e) {
+    const cur = linkRef.current;
+    if (!cur || e.pointerId !== cur.pointerId) return;
+    const pt = trackPoint(e);
+    const entry = visible[rowAt(pt.y)];
+    let targetId = null;
+    let targetEnd = null;
+    let problem = null;
+    let p = null;
+    if (entry && entry.id !== cur.fromId) {
+      const b = boxOf(entry.id);
+      if (b && pt.x >= b.x0 - 12 && pt.x <= b.x1 + 12) {
+        targetId = entry.id;
+        targetEnd = b.milestone ? "start" : pt.x < (b.x0 + b.x1) / 2 ? "start" : "finish";
+        problem = linkProblem(tasks, links, targetId, cur.fromId);
+        if (!problem) {
+          p = previewFor([], { nextLinks: [...links, { id: "__new", task_id: targetId, depends_on_id: cur.fromId, kind: KIND_OF[`${cur.fromEnd}:${targetEnd}`], lag_days: 0 }] });
+          p.info = describe(p, targetId);
+        }
+      }
+    }
+    linkRef.current = { ...cur, to: pt, targetId, targetEnd, problem, preview: p };
+    setLinking(linkRef.current);
+    setPreview(p);
+    onPreview?.(p ? { mode: "link", task: byId.get(targetId), ...p.info } : null);
+  }
+
+  async function finishLink(e) {
+    const l = linkRef.current;
+    if (!l || e.pointerId !== l.pointerId) return;
+    linkRef.current = null;
+    setLinking(null);
+    const p = l.preview;
+    setPreview(null);
+    onPreview?.(null);
+    if (!l.targetId) return;
+    if (l.problem) return setNote(l.problem);
+    const res = await onLink?.({ taskId: l.targetId, dependsOnId: l.fromId, kind: KIND_OF[`${l.fromEnd}:${l.targetEnd}`] }, p);
+    if (res && res.ok === false) setNote(res.error ?? "That link was not saved.");
+  }
+
+  useEffect(() => {
+    if (!preview && !linking) return undefined;
+    const onKey = (e) => {
+      if (e.key === "Escape") cancelAll();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [preview, linking]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ---- keyboard on the chart ----------------------------------------------------
+  function onKeyDown(e) {
+    if (editing || e.target?.tagName === "INPUT") return;
+    const i = selected ? rowOf.get(selected) : null;
+    const task = selected ? byId.get(selected) : null;
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const next = i == null ? 0 : Math.max(0, Math.min(visible.length - 1, i + (e.key === "ArrowDown" ? 1 : -1)));
+      if (visible[next]) onSelect?.(visible[next].id);
+      return;
+    }
+    if (!task) return;
+    if (e.altKey && (e.key === "ArrowRight" || e.key === "ArrowLeft") && onMove && !e.shiftKey) {
+      e.preventDefault();
+      const r = plan.rows.get(String(task.id));
+      if (!r?.dated || r.pinned) return;
+      const step = e.key === "ArrowRight" ? 1 : -1;
+      const from = dayOf(r.milestone ? r.due : r.start);
+      const to = CAL.dayAt((r.milestone ? CAL.lastIndex(from) : CAL.startIndex(from)) + step);
+      const p = previewFor(movesFor({ id: String(task.id), mode: "move", start: r.start }, to - from));
+      onMove(p.moves, p).then((res) => res && res.ok === false && setNote(res.error ?? "That move was not saved."));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      onOpen?.(task);
+    } else if (e.key === "F2") {
+      e.preventDefault();
+      setEditing({ id: String(task.id), field: "title" });
+    } else if (e.key === "Escape") onSelect?.(null);
+  }
+
+  async function commitEdit(task, field, value) {
+    setEditing(null);
+    const res = await onEdit?.(task, field, value);
+    if (res && res.ok === false) setNote(res.error ?? "That change was not saved.");
+  }
+
+  async function submitDraft(milestoneKey = false) {
+    const title = draft.title.trim();
+    if (!title || !onAdd || busy) return;
+    setBusy(true);
+    const milestone = draft.milestone || milestoneKey;
+    const res = await onAdd({ title, days: Number(draft.days) || null, milestone, parentId: draft.parentId, afterId: draft.afterId });
+    setBusy(false);
+    if (res && res.ok === false) setNote(res.error ?? "That task was not added.");
+    else setDraft((d) => ({ ...d, title: "", days: "", milestone: false, afterId: res?.id ? String(res.id) : d.afterId }));
+    addRef.current?.focus();
+  }
+
+  // ---- the sheet's divider --------------------------------------------------------
+  function startDivider(e) {
+    e.preventDefault();
+    const x0 = e.clientX;
+    const w0 = gridW;
+    let last = w0;
+    const move = (ev) => {
+      last = Math.max(fixedWidth(cols) + 140, Math.min(760, w0 + ev.clientX - x0));
+      setGridState(last);
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      onGridWidth?.(last);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  }
+  const divider = narrow ? null : (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize the task sheet"
+      aria-valuenow={gridW}
+      tabIndex={0}
+      onPointerDown={startDivider}
+      onKeyDown={(e) => {
+        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+          e.preventDefault();
+          setGridState(Math.max(fixedWidth(cols) + 140, Math.min(760, gridW + (e.key === "ArrowRight" ? 16 : -16))));
+        }
+      }}
+      className="absolute inset-y-0 -right-[3px] z-50 w-[6px] cursor-col-resize outline-none hover:bg-ring/30 focus-visible:bg-ring/40"
+    />
+  );
+
+  // ---- render -------------------------------------------------------------------
+  const finish = preview?.finishAfter ?? plan.finish;
+  const gap = gapOf(finish, target);
+  const marks = {
+    today: showToday && inRange(today) ? X(today) + ppd / 2 : null,
+    target: target && inRange(target) ? X(target) + ppd : null,
+    targetIso: target,
+    finish: finish && inRange(finish) ? X(finish) + ppd : null,
+    finishFrom: preview && plan.finish && inRange(plan.finish) ? X(plan.finish) + ppd : null,
+    moving: Boolean(preview && !linking),
+    gap,
+  };
+  const bodyH = Math.max(visible.length, 1) * rowH + (addIndex != null ? ADD_H : 0);
+  const addAfter = addIndex != null && addIndex < visible.length - 1 ? addIndex : null;
+  const addParent = draft.parentId ? byId.get(String(draft.parentId)) : null;
+  const ghostMap = preview?.from?.size ? preview.from : ghosts;
+  const dragInfo = preview?.info ?? null;
+  const laneH = 20;
+  const laneHead = 28;
+  const hasLanes = Boolean(lanes?.length);
+  const lanesH = hasLanes ? laneHead + lanes.length * laneH : 0;
+  const rowTops = visible.map((_, i) => rowTop(i));
+  const selectedRows = new Set([...(selected ? [selected] : []), ...picked].map((id) => rowOf.get(String(id))).filter((i) => i != null));
+  const addAt = addIndex != null && addIndex < visible.length ? rowTop(addIndex) + rowH : bodyH;
+
+  const addRow = onAdd ? (
+    <AddRow
+      open={adding}
+      onOpen={() => {
+        setAdding(true);
+        setDraft({ title: "", days: "", milestone: false, parentId: null, afterId: null });
+        setTimeout(() => addRef.current?.focus(), 20);
+      }}
+      draft={draft}
+      setDraft={setDraft}
+      onSubmit={submitDraft}
+      busy={busy}
+      addRef={addRef}
+      parentTitle={addParent?.title}
+      aboveTitle={draft.afterId ? byId.get(draft.afterId)?.title : null}
+      onIndent={() => setDraft((d) => ({ ...d, parentId: d.afterId, afterId: null }))}
+      height={rowH}
+    />
+  ) : null;
+  const addExtra = onAdd && !adding ? rowH : 0;
+
+  const rootStyle = height === "fill" ? undefined : { height };
+
+  return (
+    <div className={cx("flex min-h-0 flex-col", height === "fill" && "h-full", className)} style={rootStyle}>
+      {error ? (
+        <p role="alert" className="shrink-0 border-b border-destructive px-3 py-2 text-[13px] text-destructive">
+          {typeof error === "string" ? error : "The plan could not be read."}
+        </p>
+      ) : null}
+      {note ? (
+        <p role="alert" className="flex shrink-0 items-start justify-between gap-3 border-b border-border bg-card px-3 py-2 text-[13px]">
+          <span>{note}</span>
+          <button type="button" onClick={() => setNote(null)} className="shrink-0 text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring" aria-label="Dismiss the message">
+            <Icon name="x" size={16} />
+          </button>
+        </p>
+      ) : null}
+      <div
+        ref={scroller}
+        role="region"
+        aria-label={label}
+        aria-busy={loading || undefined}
+        tabIndex={0}
+        onKeyDown={onKeyDown}
+        className="relative min-h-0 flex-1 overflow-auto bg-card outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+      >
+        <div className="relative" style={{ width: gridW + trackW, minHeight: HEAD + bodyH + addExtra + lanesH }}>
+          <div className="sticky top-0 z-30 flex border-b border-border bg-background" style={{ height: HEAD }}>
+            <div className="sticky left-0 z-40 shrink-0 border-r border-border bg-background" style={{ width: gridW }}>
+              <SheetHead cols={cols} />
+              {divider}
+            </div>
+            <div className="relative" style={{ width: trackW }}>
+              <TrackHead axis={axis} range={range} ppd={ppd} z={z} gridW={gridW} marks={marks} />
+            </div>
+          </div>
+
+          <div className="flex">
+            <div className="sticky left-0 z-20 shrink-0 border-r border-border bg-card" style={{ width: gridW }}>
+              {loading
+                ? Array.from({ length: 8 }, (_, i) => (
+                    <div key={i} className="flex items-center gap-2 border-b border-border px-3" style={{ height: rowH }}>
+                      <span className="h-2.5 w-8 animate-pulse rounded-[2px] bg-muted" />
+                      <span className="h-2.5 flex-1 animate-pulse rounded-[2px] bg-muted" style={{ maxWidth: `${40 + ((i * 17) % 50)}%` }} />
+                    </div>
+                  ))
+                : visible.map((e, i) => {
+                    const t = byId.get(e.id);
+                    const r = live.rows.get(e.id);
+                    const d = shown.get(e.id);
+                    const late = r && !r.summary && !r.pinned && r.dated && !r.milestone && d?.due && d.due < today && r.progress < 100;
+                    const lateMs = r?.milestone && !r.pinned && d?.due && d.due < today;
+                    return (
+                      <div key={e.id}>
+                        <SheetRow
+                          e={e}
+                          t={t}
+                          r={r}
+                          cols={cols}
+                          rowH={rowH}
+                          critical={critical}
+                          selected={selected === e.id || picked.has(e.id)}
+                          closed={closed.has(e.id)}
+                          cells={cellsOf(e.id)}
+                          foldedCount={r?.summary ? `${r.leafIds.length} ${r.leafIds.length === 1 ? "task" : "tasks"}` : null}
+                          tags={tags?.get?.(e.id)}
+                          late={late || lateMs}
+                          dim={highlight && !highlight.has(e.id) && !r?.summary}
+                          moving={moving}
+                          editing={editing?.id === e.id ? editing : null}
+                          onSelect={onSelect}
+                          onOpen={onOpen}
+                          onToggle={onToggle}
+                          onOpenLink={onOpenLink}
+                          onStartEdit={(field) => {
+                            onSelect?.(e.id);
+                            setEditing({ id: e.id, field });
+                          }}
+                          onCommit={(field, v) => commitEdit(t, field, v)}
+                          onCancel={() => setEditing(null)}
+                          onHover={() => setHovered(e.id)}
+                          menu={rowMenu && (hovered === e.id || selected === e.id) ? rowMenu(t, { row: e, plan: r }) : null}
+                        />
+                        {addAfter === i && adding ? addRow : null}
+                      </div>
+                    );
+                  })}
+              {addAfter == null ? addRow : null}
+              {hasLanes ? (
+                <div>
+                  <div className="flex items-center gap-2 border-b border-t border-border bg-muted px-3 text-[12px] font-semibold" style={{ height: laneHead }}>
+                    {lanesTitle}
+                  </div>
+                  <LaneLabels lanes={lanes} laneH={laneH} width={gridW - 1} />
+                </div>
+              ) : null}
+            </div>
+
+            <div
+              ref={track}
+              className={cx("relative", linking && "cursor-crosshair")}
+              style={{ width: trackW, height: bodyH + addExtra + lanesH, touchAction: dragRef.current || linking ? "none" : "pan-x pan-y" }}
+              onPointerMove={onTrackMove}
+              onPointerUp={onTrackUp}
+              onPointerCancel={cancelAll}
+            >
+              <Paper axis={axis} range={range} ppd={ppd} z={z} marks={marks} rowTops={rowTops} rowH={rowH} selectedRows={selectedRows} />
+              <Links lines={lines} width={trackW} height={bodyH} critical={critical} onOpenLink={onOpenLink} />
+              <Ghosts ghosts={ghostMap} visible={visible} X={X} ppd={ppd} rowH={rowH} rowTop={rowTop} live={live} kind="was" bar={BAR} />
+              <Ghosts ghosts={pencil} visible={visible} X={X} ppd={ppd} rowH={rowH} rowTop={rowTop} live={live} kind="pencil" bar={BAR} />
+              {addIndex != null && !draft.milestone ? (
+                <span aria-hidden="true" className="absolute h-3.5 rounded-[2px] border border-dashed border-info bg-info/15" style={{ left: today ? X(today) : 0, width: Math.max(1, Number(draft.days) || 3) * ppd * 1.4, top: rowTop(addIndex) + rowH + (ADD_H - 14) / 2 }} />
+              ) : null}
+
+              {visible.map((e, i) => {
+                const t = byId.get(e.id);
+                const r = live.rows.get(e.id);
+                const d = shown.get(e.id);
+                const y = rowTop(i) + rowH / 2;
+                const n = notes?.get?.(e.id);
+                if (!r || !d) {
+                  return n ? (
+                    <span key={e.id} className={cx("absolute -translate-y-1/2 whitespace-nowrap text-[12px]", n.tone === "problem" ? "font-medium text-destructive" : "text-muted-foreground")} style={{ left: 12, top: y }}>
+                      {n.text}
+                    </span>
+                  ) : null;
+                }
+                const isSel = selected === e.id || picked.has(e.id);
+                const dim = highlight && !highlight.has(e.id) && !r.summary;
+                const done = r.pinned;
+                const late = !r.summary && !done && !r.milestone && d.due < today && r.progress < 100;
+                const title = barLabel(t, r);
+                const common = {
+                  tabIndex: -1,
+                  onClick: (ev) => {
+                    ev.stopPropagation();
+                    if (suppress.current) return;
+                    onSelect?.(e.id, { additive: ev.metaKey || ev.ctrlKey || ev.shiftKey });
+                  },
+                  onDoubleClick: () => onOpen?.(t),
+                  title,
+                  "aria-label": title,
+                };
+                const crit = critical && r.critical && !done;
+                const labelEl = (x, extra = 0) => {
+                  const person = people?.get?.(String(t.assignee_id ?? ""));
+                  const who = firstName(person?.name ?? t.assignee_name);
+                  const text = n?.text ?? who;
+                  return text || late ? (
+                    <span className="pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center gap-1.5 whitespace-nowrap text-[11px]" style={{ left: x + 6 + extra }}>
+                      {late ? <span className="rounded-[3px] border border-warning px-1 text-[10px] font-semibold leading-4 text-warning">Late</span> : null}
+                      {text ? <span className={n?.tone === "problem" ? "font-medium text-destructive" : n?.tone === "crit" ? "font-medium text-destructive" : "text-muted-foreground"}>{text}</span> : null}
+                    </span>
+                  ) : null;
+                };
+                const handles =
+                  onLink && !r.summary && !done ? (
+                    <>
+                      <button type="button" tabIndex={-1} aria-label={`Link from the start of ${t.title}`} onPointerDown={(ev) => startLink(ev, e.id, "start")} className={cx("absolute top-1/2 z-20 size-2 -translate-y-1/2 rounded-full border-2 border-ring bg-background opacity-0 outline-none group-hover:opacity-100", isSel && "opacity-100")} style={{ left: -11, touchAction: "none" }} />
+                      <button type="button" tabIndex={-1} aria-label={`Link from the end of ${t.title}`} onPointerDown={(ev) => startLink(ev, e.id, "finish")} className={cx("absolute top-1/2 z-20 size-2 -translate-y-1/2 rounded-full border-2 border-ring bg-background opacity-0 outline-none group-hover:opacity-100", isSel && "opacity-100")} style={{ right: -11, touchAction: "none" }} />
+                    </>
+                  ) : null;
+                const target = linking?.targetId === e.id;
+
+                if (r.milestone) {
+                  const cx0 = X(d.due) + ppd / 2;
+                  return (
+                    <div key={e.id} className={cx("group absolute z-10", dim && "opacity-40")} style={{ left: cx0 - 9, top: y - 9, width: 18, height: 18 }}>
+                      <button type="button" {...common} onPointerDown={(ev) => startDrag(ev, e.id, "move")} className={cx("absolute inset-0 grid place-items-center rounded-[2px] outline-none focus-visible:ring-2 focus-visible:ring-ring", onMove && !done && "cursor-grab", target && (linking.problem ? "ring-2 ring-destructive" : "ring-2 ring-ring"))}>
+                        <span className={cx("block size-3 rotate-45", done ? "bg-chart-2" : crit ? "bg-destructive" : "bg-foreground", isSel && "ring-2 ring-ring ring-offset-1 ring-offset-card")} />
+                      </button>
+                      {handles}
+                      <span className={cx(NUM, "pointer-events-none absolute left-full top-1/2 ml-2 -translate-y-1/2 whitespace-nowrap text-[11px]", crit ? "font-semibold text-destructive" : "text-muted-foreground")}>{n?.text ?? dayWords(d.due)}</span>
+                    </div>
+                  );
+                }
+
+                const x0 = X(d.start);
+                const w = Math.max(ppd, X(d.due) + ppd - x0);
+                if (r.summary) {
+                  const folded = closed.has(e.id);
+                  const kids = folded ? r.leafIds.map((id) => ({ id, row: live.rows.get(id), d: shown.get(id) })).filter((k) => k.row?.milestone && k.d) : [];
+                  return (
+                    <div key={e.id} className="group absolute z-10" style={{ left: x0, top: y - 4, width: w, height: 12 }}>
+                      <button type="button" {...common} onPointerDown={(ev) => startDrag(ev, e.id, "move")} className={cx("absolute inset-x-0 top-0 h-[6px] outline-none focus-visible:ring-2 focus-visible:ring-ring", done ? "bg-chart-2" : "bg-foreground", onMove && !done && "cursor-grab")}>
+                        <span className={cx("absolute left-0 top-[6px] size-0 border-r-[5px] border-t-[5px] border-r-transparent", done ? "border-t-chart-2" : "border-t-foreground")} />
+                        <span className={cx("absolute right-0 top-[6px] size-0 border-l-[5px] border-t-[5px] border-l-transparent", done ? "border-t-chart-2" : "border-t-foreground")} />
+                      </button>
+                      {kids.map((k) => (
+                        <span key={k.id} title={byId.get(k.id)?.title} className={cx("absolute -top-[10px] size-[10px] -translate-x-1/2 rotate-45 border-[1.5px] border-card", k.row.pinned ? "bg-chart-2" : critical && k.row.critical ? "bg-destructive" : "bg-foreground")} style={{ left: X(k.d.due) + ppd / 2 - x0 }} />
+                      ))}
+                      {n ? (
+                        <span className="pointer-events-none absolute -top-[4px] whitespace-nowrap text-[11px] text-muted-foreground" style={{ left: w + 8 }}>
+                          {n.text}
+                        </span>
+                      ) : null}
+                    </div>
+                  );
+                }
+                const loop = r.stuck;
+                const guess = guesses?.has?.(e.id);
+                const barTop = y - BAR / 2 - (baseline ? 2 : 0);
+                const base = baseline?.get?.(e.id);
+                const dragging = preview && dragRef.current?.id === e.id;
+                const movedByDrag = preview?.dates?.has(e.id);
+                const trackClass = loop ? "border border-dashed border-destructive bg-destructive/15" : guess ? "border border-dashed border-chart-2 bg-transparent" : crit ? "bg-destructive" : done ? "bg-chart-2" : "bg-chart-1";
+                const fill = crit ? "bg-foreground/35" : "bg-chart-2";
+                const mark = tags?.get?.(e.id)?.some((g) => g.kind === "unsaved");
+                return (
+                  <div key={e.id} className={cx("group absolute z-10", dim && "opacity-40")} style={{ left: x0, top: barTop, width: w, height: BAR }}>
+                    <button
+                      type="button"
+                      {...common}
+                      onPointerDown={(ev) => startDrag(ev, e.id, "move")}
+                      className={cx(
+                        "absolute inset-0 overflow-hidden rounded-[2px] outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        trackClass,
+                        isSel && "ring-2 ring-ring",
+                        (dragging || movedByDrag) && !isSel && "ring-[1.5px] ring-ring",
+                        mark && "ring-2 ring-destructive",
+                        target && (linking.problem ? "ring-2 ring-destructive" : "ring-2 ring-ring"),
+                        onMove && !done && "cursor-grab",
+                      )}
+                    >
+                      {loop ? <span className="absolute inset-0 opacity-40" style={{ backgroundImage: "repeating-linear-gradient(135deg, currentColor 0 2px, transparent 2px 6px)" }} /> : null}
+                      {!loop && !guess && !done && r.progress > 0 ? <span className={cx("absolute inset-y-0 left-0", fill)} style={{ width: `${r.progress}%` }} /> : null}
+                    </button>
+                    {base ? <span aria-hidden="true" className="pointer-events-none absolute h-1 rounded-[1px] bg-chart-3" style={{ left: X(base.start) - x0, width: Math.max(ppd, X(base.due) + ppd - X(base.start)), top: BAR + 2 }} /> : null}
+                    {onMove && !done ? (
+                      <>
+                        <span onPointerDown={(ev) => startDrag(ev, e.id, "start")} aria-hidden="true" className={cx("absolute z-10 cursor-ew-resize", dragging || isSel ? "-inset-y-[2px] -left-[2px] w-1.5 rounded-[2px] bg-ring" : "inset-y-0 left-0 w-2")} style={{ touchAction: "none" }} />
+                        <span onPointerDown={(ev) => startDrag(ev, e.id, "end")} aria-hidden="true" className={cx("absolute z-10 cursor-ew-resize", dragging || isSel ? "-inset-y-[2px] -right-[2px] w-1.5 rounded-[2px] bg-ring" : "inset-y-0 right-0 w-2")} style={{ touchAction: "none" }} />
+                      </>
+                    ) : null}
+                    {handles}
+                    {labelEl(w, isSel ? 8 : 0)}
+                  </div>
+                );
+              })}
+
+              {dragInfo && dragRef.current ? <DragTip info={dragInfo} task={byId.get(dragInfo.id)} box={boxOf(dragInfo.id)} tasks={tasks} plan={plan} /> : null}
+
+              {linking ? (
+                (() => {
+                  const dx = linking.to.x - linking.from.x;
+                  const dy = linking.to.y - linking.from.y;
+                  const lines2 = linking.targetId
+                    ? linkLines({ task: byId.get(linking.targetId), predecessor: byId.get(linking.fromId), kind: KIND_OF[`${linking.fromEnd}:${linking.targetEnd}`], info: linking.preview?.info, problem: linking.problem })
+                    : null;
+                  return (
+                    <>
+                      <span aria-hidden="true" className={cx("pointer-events-none absolute z-30 h-0 origin-left border-t-[1.5px] border-dashed", linking.problem ? "border-destructive" : "border-ring")} style={{ left: linking.from.x, top: linking.from.y, width: Math.sqrt(dx * dx + dy * dy), transform: `rotate(${(Math.atan2(dy, dx) * 180) / Math.PI}deg)` }} />
+                      {lines2 ? (
+                        <div role="status" className="pointer-events-none absolute z-40 max-w-80 rounded-[4px] border border-border bg-popover px-2.5 py-2 text-[12px] leading-snug text-popover-foreground shadow-lg" style={{ left: linking.to.x + 12, top: linking.to.y + 10 }}>
+                          <div className={lines2.tone === "problem" ? "font-medium text-destructive" : undefined}>{lines2.text}</div>
+                          {lines2.tail ? <div className={lines2.tone === "late" ? "font-semibold text-warning" : "text-muted-foreground"}>{lines2.tail}</div> : null}
+                        </div>
+                      ) : null}
+                    </>
+                  );
+                })()
+              ) : null}
+
+              {visible.length === 0 && !loading ? (
+                <div className="absolute inset-x-0 top-6 grid place-items-center px-6 text-center">
+                  <p className="max-w-sm text-[13px] text-muted-foreground">{emptyText}</p>
+                </div>
+              ) : null}
+
+              {hasLanes ? <LaneTrack lanes={lanes} X={X} ppd={ppd} laneH={laneH} top={bodyH + addExtra + laneHead} /> : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** The note by a bar while it moves: what it is, where it ends, what it costs, in the canvas's words. */
+function DragTip({ info, task, box, tasks, plan }) {
+  if (!box || !task) return null;
+  const next = (() => {
+    const l = [...plan.links.values()].find((x) => x.valid && x.dependsOnId === info.id);
+    return l ? tasks.find((t) => String(t.id) === l.taskId)?.title : null;
+  })();
+  const lines = dragLines(info, task, { nextTitle: next });
+  return (
+    <div role="status" className="pointer-events-none absolute z-40 grid w-max max-w-80 gap-0.5 rounded-[4px] border border-border bg-popover px-2.5 py-2 text-[12px] leading-snug text-popover-foreground shadow-lg" style={{ left: box.x1 + 14, top: Math.max(4, box.y - 64) }}>
+      <span className="text-[13px] font-semibold">{lines.title}</span>
+      <span className={NUM}>{lines.first}</span>
+      <span>{lines.second}</span>
+      {lines.slack ? <span className="text-muted-foreground">{lines.slack}</span> : null}
+      <span className={cx(NUM, lines.third.tone === "late" ? "font-semibold text-warning" : lines.third.tone === "early" ? "font-semibold text-success" : "text-muted-foreground")}>{lines.third.text}</span>
+      <span className="text-muted-foreground">{lines.last}</span>
+    </div>
+  );
+}
+