makersclaw 0.1.0 → 0.3.0

package/registry/blocks/task-model/changes.js

@@ -0,0 +1,89 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { isSample } from "../../parts";
+import { toast } from "../../ui";
+import { applyChange, changeWrites, changedIds, invertChange, normalizeTasks } from "./model";
+
+// useTaskChanges — how every view reports a change, and shows it at once.
+//
+//   const { tasks, commit, error, clearError } = useTaskChanges(props.tasks, props.onChange);
+//   commit({ type: "update", id, patch: { status: "done" } }, { label: "“Write brief”" });
+//
+// `commit` applies the change on screen, calls the page's
+// `onChange(change)` (async, answering { ok } or { ok: false, error }; a
+// throw counts as failed), and on a failure takes the change back and
+// sets `error` — the view shows it in a Notice. The change stays on
+// screen until the page's `tasks` carry it (the page re-read, or set its
+// own state), so nothing flickers back between the save and the re-read.
+//
+// `undo: "Task deleted"` also shows a toast with an Undo button, which
+// commits the inverse (the deleted tasks come back with their ids).
+//
+// Example rows (`useFixture`'s, `_sample: true`) change on screen and are
+// never sent: they are not rows.
+
+let seq = 0;
+
+export function useTaskChanges(tasks, onChange) {
+  const base = useMemo(() => normalizeTasks(tasks), [tasks]);
+  const baseRef = useRef(base);
+  baseRef.current = base;
+  const [pending, setPending] = useState([]);
+  const [error, setError] = useState(null);
+
+  // A confirmed change has done its job once the page's tasks move on.
+  useEffect(() => {
+    setPending((list) => {
+      const next = list.filter((e) => !(e.confirmed && e.base !== base));
+      return next.length === list.length ? list : next;
+    });
+  }, [base]);
+
+  const shown = useMemo(() => pending.reduce((acc, e) => applyChange(acc, e.change), base), [base, pending]);
+  const latest = useRef(shown);
+  latest.current = shown;
+
+  const commit = useCallback(
+    async (change, { label, undo } = {}) => {
+      // A null change is a drop the model refused (movePatch → null).
+      if (!change) return { ok: false, error: "it cannot go there" };
+      const before = latest.current;
+      const key = ++seq;
+      const entry = { key, change, base: baseRef.current, confirmed: false };
+      setError(null);
+      setPending((list) => [...list, entry]);
+      const ids = new Set(changedIds(change));
+      const touched = before.filter((t) => ids.has(String(t.id)));
+      const creates = changeWrites(change).some((w) => w.op === "insert");
+      const onlySamples = !creates && touched.length > 0 && touched.every(isSample);
+      let result;
+      if (onlySamples || typeof onChange !== "function") result = { ok: true, sample: true };
+      else {
+        try {
+          result = (await onChange(change)) ?? { ok: true };
+        } catch (e) {
+          result = { ok: false, error: e?.message ?? String(e) };
+        }
+      }
+      if (result.ok === false) {
+        setPending((list) => list.filter((e) => e.key !== key));
+        setError(`${label ?? "The change"} was not saved: ${result.error ?? "the write failed"}. It is back as it was.`);
+        return result;
+      }
+      setPending((list) =>
+        list.map((e) => (e.key === key ? { ...e, confirmed: true } : e)).filter((e) => !(e.confirmed && e.base !== baseRef.current)),
+      );
+      if (undo) {
+        const inverse = invertChange(before, change);
+        toast(undo, {
+          action: { label: "Undo", onClick: () => commit(inverse, { label: "Undo" }) },
+        });
+      }
+      return result;
+    },
+    [onChange],
+  );
+
+  return { tasks: shown, commit, error, clearError: () => setError(null), saving: pending.some((e) => !e.confirmed) };
+}

package/registry/blocks/task-model/dates.js

@@ -0,0 +1,371 @@
+// Date math for work items — pure, no React, no Date objects in or out.
+//
+// A task's `start` and `due` are wall-calendar strings: a day
+// "2026-09-23", or a day and a time "2026-09-23T14:30" (no zone: a
+// meeting at 14:30 is at 14:30 wherever the founder is). Strings compare
+// in order, survive JSON and a `date` column unchanged, and mean the same
+// day everywhere. Arithmetic runs on day numbers (days since 1970-01-01,
+// counted on UTC midnights), where no daylight-saving shift can add or
+// lose a day. Calendar, gantt, workload and roadmap all read these.
+
+const DAY_RE = /^(\d{4})-(\d{2})-(\d{2})/;
+const TIME_RE = /T(\d{2}):(\d{2})/;
+const MS = 86400000;
+const pad = (n, w = 2) => String(n).padStart(w, "0");
+
+/** A real "YYYY-MM-DD" (a time after it is allowed). */
+export function isDay(value) {
+  return dayNumber(value) !== null;
+}
+
+/** Days since 1970-01-01 for a day string (or datetime string, or Date);
+ *  null when it is not a real day. */
+export function dayNumber(value) {
+  if (value instanceof Date) {
+    if (Number.isNaN(value.getTime())) return null;
+    return Math.floor(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()) / MS);
+  }
+  const m = typeof value === "string" ? DAY_RE.exec(value) : null;
+  if (!m) return null;
+  const t = Date.UTC(+m[1], +m[2] - 1, +m[3]);
+  const d = new Date(t);
+  if (d.getUTCMonth() !== +m[2] - 1 || d.getUTCDate() !== +m[3]) return null;
+  return Math.round(t / MS);
+}
+
+/** The day string for a day number. */
+export function fromDayNumber(n) {
+  const d = new Date(n * MS);
+  return `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}`;
+}
+
+/** "2026-09-23T14:30" → "2026-09-23"; a Date → its local day; else null. */
+export function dayOf(value) {
+  const n = dayNumber(value);
+  return n === null ? null : fromDayNumber(n);
+}
+
+/** Minutes after midnight for a datetime string ("…T14:30" → 870); null
+ *  for a plain day (an all-day item). */
+export function minutesOf(value) {
+  const m = typeof value === "string" ? TIME_RE.exec(value) : null;
+  return m ? +m[1] * 60 + +m[2] : null;
+}
+
+/** A day and minutes after midnight → "YYYY-MM-DDTHH:mm"; null minutes →
+ *  the plain day. */
+export function withTime(day, minutes) {
+  const d = dayOf(day);
+  if (!d) return null;
+  if (minutes == null) return d;
+  const m = Math.max(0, Math.min(24 * 60 - 1, Math.round(minutes)));
+  return `${d}T${pad(Math.floor(m / 60))}:${pad(m % 60)}`;
+}
+
+/** Today in the browser's zone, or `now`'s. Pass a fixed `today` string to
+ *  the views where a screen must not change from day to day (a demo). */
+export function todayDay(now = new Date()) {
+  return dayOf(now);
+}
+
+export function addDays(day, n) {
+  const d = dayNumber(day);
+  return d === null ? null : fromDayNumber(d + n);
+}
+
+/** b − a in days ("2026-09-01", "2026-09-03" → 2). */
+export function diffDays(a, b) {
+  const x = dayNumber(a);
+  const y = dayNumber(b);
+  return x === null || y === null ? null : y - x;
+}
+
+/** 0 = Sunday … 6 = Saturday. */
+export function weekdayOf(day) {
+  const n = dayNumber(day);
+  return n === null ? null : (n + 4) % 7; // 1970-01-01 was a Thursday
+}
+
+export function startOfWeek(day, weekStartsOn = 1) {
+  const w = weekdayOf(day);
+  return w === null ? null : addDays(day, -((w - weekStartsOn + 7) % 7));
+}
+
+export function endOfWeek(day, weekStartsOn = 1) {
+  const s = startOfWeek(day, weekStartsOn);
+  return s && addDays(s, 6);
+}
+
+/** The seven days of `day`'s week. */
+export function weekDays(day, weekStartsOn = 1) {
+  const s = startOfWeek(day, weekStartsOn);
+  return s ? Array.from({ length: 7 }, (_, i) => addDays(s, i)) : [];
+}
+
+export function startOfMonth(day) {
+  const d = dayOf(day);
+  return d ? `${d.slice(0, 8)}01` : null;
+}
+
+export function endOfMonth(day) {
+  const s = startOfMonth(day);
+  return s ? addDays(addMonths(s, 1), -1) : null;
+}
+
+/** The same day n months on, clamped to the month's end (Jan 31 + 1 → Feb 28). */
+export function addMonths(day, n) {
+  const d = dayOf(day);
+  if (!d) return null;
+  const y = +d.slice(0, 4);
+  const m = +d.slice(5, 7) - 1 + n;
+  const ty = y + Math.floor(m / 12);
+  const tm = ((m % 12) + 12) % 12;
+  const last = new Date(Date.UTC(ty, tm + 1, 0)).getUTCDate();
+  return `${ty}-${pad(tm + 1)}-${pad(Math.min(+d.slice(8, 10), last))}`;
+}
+
+/** Every day from a to b, both included. */
+export function daysBetween(a, b) {
+  const x = dayNumber(a);
+  const y = dayNumber(b);
+  if (x === null || y === null || y < x) return [];
+  return Array.from({ length: y - x + 1 }, (_, i) => fromDayNumber(x + i));
+}
+
+/** A month as weeks of seven days, for a month grid: the weeks that hold
+ *  any of its days (4–6), or always six with `fixedWeeks` (a grid that
+ *  never changes height). Days outside the month are included; compare
+ *  `day.slice(0, 7)` with the month to mute them. */
+export function monthGrid(monthOrDay, { weekStartsOn = 1, fixedWeeks = false } = {}) {
+  const first = startOfMonth(/^\d{4}-\d{2}$/.test(monthOrDay ?? "") ? `${monthOrDay}-01` : monthOrDay);
+  if (!first) return [];
+  const last = endOfMonth(first);
+  let cursor = startOfWeek(first, weekStartsOn);
+  const weeks = [];
+  while (weeks.length < 6 && (fixedWeeks || cursor <= last)) {
+    weeks.push(Array.from({ length: 7 }, (_, i) => addDays(cursor, i)));
+    cursor = addDays(cursor, 7);
+  }
+  return weeks;
+}
+
+/** Weekend days as weekday numbers; default Saturday and Sunday. */
+export const WEEKEND = [0, 6];
+
+export function isWeekend(day, weekend = WEEKEND) {
+  return weekend.includes(weekdayOf(day));
+}
+
+/** Not a weekend and not in `holidays` (a list of day strings). */
+export function isWorkingDay(day, { weekend = WEEKEND, holidays } = {}) {
+  const d = dayOf(day);
+  if (!d || isWeekend(d, weekend)) return false;
+  return !(holidays && (holidays instanceof Set ? holidays.has(d) : holidays.includes(d)));
+}
+
+/** Working days from a to b, both included (0 when b is before a). */
+export function workingDaysBetween(a, b, options) {
+  return daysBetween(a, b).filter((d) => isWorkingDay(d, options)).length;
+}
+
+/** n working days after `day` (n may be negative; 0 → `day` itself, or
+ *  the next working day when `day` is not one). */
+export function addWorkingDays(day, n, options) {
+  let d = dayOf(day);
+  if (!d) return null;
+  const step = n < 0 ? -1 : 1;
+  while (!isWorkingDay(d, options)) d = addDays(d, step);
+  let left = Math.abs(n);
+  while (left > 0) {
+    d = addDays(d, step);
+    if (isWorkingDay(d, options)) left--;
+  }
+  return d;
+}
+
+/** A task's days on a calendar: { start, end } (day strings, start ≤
+ *  end). One date → a one-day span; neither → null (unscheduled). */
+export function spanOf(task) {
+  const s = dayOf(task?.start);
+  const e = dayOf(task?.due);
+  if (!s && !e) return null;
+  const a = s ?? e;
+  const b = e ?? s;
+  return a <= b ? { start: a, end: b } : { start: b, end: a };
+}
+
+/** Whether two spans ({ start, end }, inclusive) share a day. */
+export function spansOverlap(a, b) {
+  return Boolean(a && b && a.start <= b.end && b.start <= a.end);
+}
+
+/** The tasks whose span touches [from, to] (inclusive). */
+export function tasksInRange(tasks, from, to) {
+  const range = { start: dayOf(from), end: dayOf(to) };
+  return (tasks ?? []).filter((t) => spansOverlap(spanOf(t), range));
+}
+
+/** The tasks on one day. */
+export function tasksOnDay(tasks, day) {
+  return tasksInRange(tasks, day, day);
+}
+
+/** Moves a task's dates by n days, keeping its length and its times:
+ *  the patch a drag on a calendar or a gantt saves. */
+export function shiftDates(task, n) {
+  const patch = {};
+  for (const key of ["start", "due"]) {
+    const v = task?.[key];
+    if (!isDay(v)) continue;
+    patch[key] = withTime(addDays(v, n), minutesOf(v));
+  }
+  return patch;
+}
+
+/** The patch that gives a task the span [start, end] (a resize, a drop on
+ *  a range), keeping any times it had. A one-day task with only `due`
+ *  stays that way when start === end. */
+export function spanPatch(task, start, end) {
+  if (start === end && !isDay(task?.start)) return { due: withTime(end, minutesOf(task?.due)) };
+  return { start: withTime(start, minutesOf(task?.start)), due: withTime(end, minutesOf(task?.due)) };
+}
+
+/** Where a due date sits from `today`: "overdue" · "today" · "tomorrow" ·
+ *  "this-week" · "next-week" · "later" · "none". A done task is never
+ *  overdue: `done` turns "overdue" into "past". */
+export function dueBucket(due, today, { done = false, weekStartsOn = 1 } = {}) {
+  const d = dayOf(due);
+  if (!d) return "none";
+  const n = diffDays(today, d);
+  if (n < 0) return done ? "past" : "overdue";
+  if (n === 0) return "today";
+  if (n === 1) return "tomorrow";
+  const weekEnd = endOfWeek(today, weekStartsOn);
+  if (d <= weekEnd) return "this-week";
+  if (d <= addDays(weekEnd, 7)) return "next-week";
+  return "later";
+}
+
+/** The due buckets in order, with their words: the groups of "group by
+ *  due date" and the choices of a due filter. */
+export const DUE_BUCKETS = [
+  { id: "overdue", label: "Overdue", tone: "danger" },
+  { id: "today", label: "Today", tone: "warning" },
+  { id: "tomorrow", label: "Tomorrow" },
+  { id: "this-week", label: "This week" },
+  { id: "next-week", label: "Next week" },
+  { id: "later", label: "Later" },
+  { id: "past", label: "Earlier" },
+  { id: "none", label: "No date" },
+];
+
+/** The day a task dropped into a due bucket gets (null for "none"; the
+ *  task's own date for a bucket that has no single day). */
+export function dayForBucket(bucket, today, { weekStartsOn = 1 } = {}) {
+  switch (bucket) {
+    case "today":
+      return today;
+    case "tomorrow":
+      return addDays(today, 1);
+    case "this-week": {
+      const end = endOfWeek(today, weekStartsOn);
+      return diffDays(today, end) >= 2 ? addDays(today, 2) : end;
+    }
+    case "next-week":
+      return addDays(endOfWeek(today, weekStartsOn), 1);
+    case "later":
+      return addDays(endOfWeek(today, weekStartsOn), 8);
+    case "none":
+      return null;
+    default:
+      return undefined; // overdue / past: not a place to drop
+  }
+}
+
+function fmt(day, options, locale) {
+  const n = dayNumber(day);
+  return n === null ? "" : new Intl.DateTimeFormat(locale, { ...options, timeZone: "UTC" }).format(new Date(n * MS));
+}
+
+/** A day the way a person says it, from `today`: "Today", "Tomorrow",
+ *  "Yesterday", a weekday within the week either side ("Fri"), else
+ *  "Sep 30" (with the year when it is not this year's). */
+export function formatDay(day, today, { locale, weekday = "short" } = {}) {
+  const d = dayOf(day);
+  if (!d) return "";
+  const n = today ? diffDays(today, d) : null;
+  if (n === 0) return "Today";
+  if (n === 1) return "Tomorrow";
+  if (n === -1) return "Yesterday";
+  if (n !== null && n > 1 && n < 7) return fmt(d, { weekday }, locale);
+  const sameYear = today && d.slice(0, 4) === dayOf(today).slice(0, 4);
+  return fmt(d, sameYear ? { month: "short", day: "numeric" } : { month: "short", day: "numeric", year: "numeric" }, locale);
+}
+
+/** A time the locale's way ("2:30 PM", "14:30"); "" for a plain day. */
+export function formatTime(value, { locale } = {}) {
+  const m = minutesOf(value);
+  if (m === null) return "";
+  return new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", timeZone: "UTC" }).format(new Date(m * 60000));
+}
+
+/** A day in any Intl shape: formatDate("2026-09-23", { weekday: "long" }). */
+export function formatDate(day, options = { dateStyle: "medium" }, { locale } = {}) {
+  return fmt(day, options, locale);
+}
+
+/** The time scale of a timeline: columns of `unit` (day · week · month ·
+ *  quarter) covering [from, to], each { start, end, label, key }. A gantt
+ *  draws its header from it, a workload its columns. */
+export function timeScale(from, to, unit = "day", { weekStartsOn = 1, locale } = {}) {
+  const a = dayOf(from);
+  const b = dayOf(to);
+  if (!a || !b || b < a) return [];
+  const out = [];
+  let cursor =
+    unit === "week" ? startOfWeek(a, weekStartsOn) : unit === "month" ? startOfMonth(a) : unit === "quarter" ? quarterStart(a) : a;
+  while (cursor <= b && out.length < 2000) {
+    let end;
+    let label;
+    if (unit === "week") {
+      end = addDays(cursor, 6);
+      label = fmt(cursor, { month: "short", day: "numeric" }, locale);
+    } else if (unit === "month") {
+      end = endOfMonth(cursor);
+      label = fmt(cursor, { month: "short", year: cursor.slice(0, 4) === a.slice(0, 4) ? undefined : "numeric" }, locale);
+    } else if (unit === "quarter") {
+      end = addDays(addMonths(cursor, 3), -1);
+      label = `Q${Math.floor((+cursor.slice(5, 7) - 1) / 3) + 1} ${cursor.slice(0, 4)}`;
+    } else {
+      end = cursor;
+      label = fmt(cursor, { day: "numeric" }, locale);
+    }
+    out.push({ key: cursor, start: cursor, end, label });
+    cursor = addDays(end, 1);
+  }
+  return out;
+}
+
+function quarterStart(day) {
+  const m = +day.slice(5, 7);
+  return `${day.slice(0, 4)}-${pad(Math.floor((m - 1) / 3) * 3 + 1)}-01`;
+}
+
+/** The first and last day any task touches, padded by `pad` days either
+ *  side — a timeline's default window. `fallback` (a day) when no task has
+ *  a date. */
+export function rangeOfTasks(tasks, { pad: padDays = 0, fallback } = {}) {
+  let lo = null;
+  let hi = null;
+  for (const t of tasks ?? []) {
+    const s = spanOf(t);
+    if (!s) continue;
+    if (lo === null || s.start < lo) lo = s.start;
+    if (hi === null || s.end > hi) hi = s.end;
+  }
+  if (lo === null) {
+    const f = dayOf(fallback) ?? todayDay();
+    return { start: addDays(f, -padDays), end: addDays(f, padDays) };
+  }
+  return { start: addDays(lo, -padDays), end: addDays(hi, padDays) };
+}

package/registry/blocks/task-model/demo.jsx

@@ -0,0 +1,215 @@
+"use client";
+
+// task-model in the gallery — the gallery's and the smoke test's surface.
+// Not installed into apps. One dataset, one ViewToolbar, three
+// surfaces over it, the way work-views will switch between them:
+//   Board   the Board block driven by toBoard() (drag a card: the
+//           status, assignee or due date is saved through one commit)
+//   Table   the DataTable block driven by toTableRows(), taskColumns()
+//           and taskFacets() — the status, people, due and priority
+//           cells are pickers
+//   Parts   the shared pieces, and the drag primitives on a small
+//           sortable list
+import { useMemo, useState } from "react";
+import { Card, Notice, Switch, TabPanel, Tabs } from "../components/ui";
+import { Board } from "../components/blocks/board";
+import { DataTable } from "../components/blocks/data-table";
+import {
+  AssigneeStack,
+  CompleteToggle,
+  DragHandle,
+  DueLabel,
+  LIFTED,
+  PriorityFlag,
+  SortableGroup,
+  StatusPill,
+  SubtaskCount,
+  TaskChip,
+  TaskDragProvider,
+  ViewToolbar,
+  applyChange,
+  applyView,
+  arrayMove,
+  createTaskContext,
+  isDone,
+  placeChange,
+  sortTasks,
+  subtaskCounts,
+  taskColumns,
+  taskFacets,
+  toBoard,
+  toTableRows,
+  toggleDoneChange,
+  useSortableTask,
+  useTaskChanges,
+  workload,
+} from "../components/blocks/task-model";
+
+const TODAY = "2026-09-23";
+
+const STATUSES = [
+  { id: "todo", label: "To do", tone: "neutral" },
+  { id: "doing", label: "In progress", tone: "info" },
+  { id: "review", label: "In review", tone: "warning" },
+  { id: "done", label: "Done", tone: "success", done: true },
+];
+const PEOPLE = [
+  { id: "maya", name: "Maya Chen", capacity: 6 },
+  { id: "leo", name: "Leo Park" },
+  { id: "priya", name: "Priya Nair" },
+];
+const PROJECTS = [
+  { id: "site", name: "Website relaunch", hue: 1 },
+  { id: "q4", name: "Q4 campaign", hue: 3 },
+];
+const START = [
+  { id: "a1", title: "Finalise pricing page copy", status: "doing", assignees: ["maya"], start: "2026-09-22", due: "2026-09-24", priority: "high", project: "site", estimate: 6, order: 1024 },
+  { id: "a2", title: "Pick the hero illustration", status: "todo", assignees: ["priya", "leo"], due: "2026-09-25", priority: "medium", project: "site", estimate: 4, order: 2048 },
+  { id: "a3", title: "Shortlist three styles", status: "done", parentId: "a2", assignees: ["priya"], order: 1024 },
+  { id: "a4", title: "Book the product photo shoot", status: "todo", assignees: ["leo"], due: "2026-09-21", priority: "urgent", project: "q4", estimate: 1, order: 3072 },
+  { id: "a5", title: "Write the launch email", status: "review", assignees: ["maya"], due: "2026-09-29T10:00", priority: "high", project: "q4", estimate: 2, dependsOn: ["a1"], order: 1024 },
+  { id: "a6", title: "Draft the Northwind customer story", status: "todo", assignees: [], due: "2026-10-06", project: "q4", order: 4096 },
+  { id: "a7", title: "Choose the analytics events", status: "done", assignees: ["leo"], due: "2026-09-18", project: "site", order: 2048 },
+];
+
+export default function TaskModelDemo() {
+  const [tasks, setTasks] = useState(START);
+  const [fail, setFail] = useState(false);
+  const [tab, setTab] = useState("board");
+  const [view, setView] = useState({ groupBy: "status", search: "", filters: {}, sort: [], fields: ["assignees", "due", "priority"] });
+  const ctx = useMemo(() => createTaskContext({ statuses: STATUSES, people: PEOPLE, projects: PROJECTS, today: TODAY }), []);
+
+  // The page's one save: in an app, a loop over changeWrites(change)
+  // into insertRow / updateRow / deleteRow.
+  const onChange = async (change) => {
+    await new Promise((r) => setTimeout(r, 300));
+    if (fail) return { ok: false, error: "the server did not answer" };
+    setTasks((all) => applyChange(all, change));
+    return { ok: true };
+  };
+  const { tasks: live, commit, error, clearError } = useTaskChanges(tasks, onChange);
+  const shown = applyView(live, view, ctx);
+  const by = view.groupBy === "none" ? "status" : view.groupBy;
+  const board = toBoard(shown.tasks, { groupBy: by, ctx });
+  const counts = subtaskCounts(live, ctx);
+
+  return (
+    <div className="grid gap-4">
+      <ViewToolbar view={view} onViewChange={setView} ctx={ctx} tasks={live} count={shown.tasks.length} controls={["search", "filter", "group", "sort"]} extra={<Switch id="tm-fail" label="Make saves fail" checked={fail} onChange={(e) => setFail(e.target.checked)} />} />
+      {error ? (
+        <Notice tone="danger" onDismiss={clearError}>
+          {error}
+        </Notice>
+      ) : null}
+      <Tabs
+        aria-label="Views over one dataset"
+        value={tab}
+        onChange={setTab}
+        tabs={[
+          { key: "board", label: "Board" },
+          { key: "table", label: "Table" },
+          { key: "parts", label: "Parts" },
+        ]}
+      />
+      <TabPanel tab="board" value={tab}>
+        <Board
+          label={`Tasks by ${by}`}
+          rows={board.rows}
+          groupBy={board.groupBy}
+          columns={board.columns}
+          otherLabel={board.otherLabel}
+          onMove={(row, to, from) => commit(board.moveChange(row, to, from), { label: `“${row.title}”` })}
+          titleOf={(t) => t.title}
+          renderDetails={(t) => (
+            <div className="flex items-center justify-between gap-2">
+              <span className="flex items-center gap-2">
+                <DueLabel value={t.due} done={isDone(t, ctx)} ctx={ctx} />
+                <PriorityFlag value={t.priority} />
+                <SubtaskCount {...(counts.get(t.id) ?? {})} />
+              </span>
+              <AssigneeStack ids={t.assignees} ctx={ctx} />
+            </div>
+          )}
+        />
+      </TabPanel>
+      <TabPanel tab="table" value={tab}>
+        <DataTable
+          label="Tasks"
+          noun="task"
+          rows={toTableRows(shown.tasks, ctx)}
+          columns={taskColumns(ctx, { keys: ["title", "status", "assignees", "due", "priority", "project", "estimate"], onChange: (c) => commit(c) })}
+          facets={taskFacets(ctx, { keys: ["project"] })}
+          searchable={false}
+          mobile="cards"
+        />
+      </TabPanel>
+      <TabPanel tab="parts" value={tab}>
+        <Parts tasks={shown.tasks} all={live} ctx={ctx} commit={commit} />
+      </TabPanel>
+    </div>
+  );
+}
+
+function Parts({ tasks, all, ctx, commit }) {
+  const roots = sortTasks(tasks.filter((t) => !t.parentId), [], ctx);
+  const load = workload(all, ctx, { from: "2026-09-21", to: "2026-09-27", unit: "week" });
+  return (
+    <div className="grid gap-4 lg:grid-cols-2">
+      <Card title="Drag to reorder" description="useSortableTask + DragHandle; the drop saves a placeChange.">
+        <TaskDragProvider
+          onDragEnd={({ active, over }) => {
+            if (!over || active.id === over.id) return;
+            const ids = roots.map((t) => t.id);
+            const next = arrayMove(ids, ids.indexOf(active.id), ids.indexOf(over.id));
+            const task = active.data.task;
+            commit(placeChange(roots.filter((t) => t.id !== task.id), task, next.indexOf(task.id)), { label: `“${task.title}”` });
+          }}
+          overlay={(a) => <div className={LIFTED}><TaskChip task={a.data.task} ctx={ctx} /></div>}
+        >
+          <SortableGroup ids={roots.map((t) => t.id)}>
+            <ul className="grid gap-1">
+              {roots.map((t) => (
+                <SortableItem key={t.id} task={t} ctx={ctx} commit={commit} />
+              ))}
+            </ul>
+          </SortableGroup>
+        </TaskDragProvider>
+      </Card>
+      <Card title="Load this week" description="workload(tasks, ctx, { unit: 'week' }) — hours against capacity.">
+        <ul className="grid gap-3">
+          {load.rows.map((r) => {
+            const b = r.buckets[0];
+            const pct = b.capacity ? Math.min(100, (b.hours / b.capacity) * 100) : 0;
+            return (
+              <li key={r.person.id} className="grid gap-1">
+                <div className="flex items-center justify-between text-sm">
+                  <span>{r.person.name}</span>
+                  <span data-nums className={b.over ? "text-destructive" : "text-muted-foreground"}>
+                    {Math.round(b.hours * 10) / 10}h of {b.capacity}h
+                  </span>
+                </div>
+                <span className="block h-1.5 overflow-hidden rounded-full bg-muted">
+                  <span className={b.over ? "block h-full bg-destructive" : "block h-full bg-primary"} style={{ width: `${pct}%` }} />
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      </Card>
+    </div>
+  );
+}
+
+function SortableItem({ task, ctx, commit }) {
+  const s = useSortableTask(task.id, { task });
+  const done = isDone(task, ctx);
+  return (
+    <li ref={s.setNodeRef} style={s.style} className={s.isDragging ? "group/row flex items-center gap-1 opacity-40" : "group/row flex items-center gap-1"}>
+      <DragHandle handle={s.handle} handleRef={s.setHandleRef} label={task.title} />
+      <CompleteToggle done={done} onToggle={() => commit(toggleDoneChange(task, ctx))} label={task.title} size="sm" />
+      <span className={done ? "min-w-0 flex-1 truncate text-sm text-muted-foreground line-through" : "min-w-0 flex-1 truncate text-sm"}>{task.title}</span>
+      <StatusPill status={task.status} ctx={ctx} onChange={(status) => commit({ type: "update", id: task.id, patch: { status } })} />
+      <AssigneeStack ids={task.assignees} ctx={ctx} onChange={(assignees) => commit({ type: "update", id: task.id, patch: { assignees } })} />
+    </li>
+  );
+}