makersclaw 0.2.0 → 0.3.1

package/registry/blocks/task-list/task-list.jsx

@@ -0,0 +1,907 @@
+"use client";
+
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Button, Checkbox, Empty, Icon, IconButton, Input, Menu, Notice, Skeleton, cx, toast } from "../../ui";
+import {
+  AssigneeStack,
+  CompleteToggle,
+  DEFAULT_VIEW,
+  DragHandle,
+  DueLabel,
+  GroupLabel,
+  LIFTED,
+  NONE,
+  PriorityFlag,
+  ProgressLine,
+  SortableGroup,
+  StatusPill,
+  SubtaskCount,
+  TagList,
+  TaskDragProvider,
+  ViewToolbar,
+  applyView,
+  createTaskContext,
+  deleteChange,
+  draftTask,
+  flattenTree,
+  formatDay,
+  isDone,
+  movePatch,
+  placeChange,
+  subtaskCounts,
+  sumOf,
+  toggleDoneChange,
+  useDropTarget,
+  useSortableTask,
+  useTaskChanges,
+} from "../task-model";
+
+// TaskList — the List view of work: tasks under headings that fold (by
+// status, assignee, priority, project, due date… — any field), each row
+// a round check to complete it, its title edited in place, its subtasks
+// indented under it, the fields the view shows (people, due date,
+// priority…) as pickers, and a menu. A quick-add row ends every group;
+// rows drag to reorder and to another group (which saves the group's
+// field: a new status, a new assignee, a new due date). Tick several and
+// a bar acts on them together; a delete can be undone from its toast.
+//
+// Everything saves through one async `onChange(change)` answering { ok }
+// (the change shapes are task-model's); the list shows each change at
+// once and takes it back, with a notice, when the save fails.
+//
+// README.md beside this file lists every prop.
+
+function useViewState(value, defaultValue, onChange) {
+  const [own, setOwn] = useState(() => ({ ...DEFAULT_VIEW, ...defaultValue }));
+  const controlled = value !== undefined;
+  const view = controlled ? { ...DEFAULT_VIEW, ...value } : own;
+  const set = useCallback(
+    (next) => {
+      if (!controlled) setOwn(next);
+      onChange?.(next);
+    },
+    [controlled, onChange],
+  );
+  return [view, set];
+}
+
+const sid = (group, id) => `${group}::${id}`;
+
+export function TaskList({
+  tasks,
+  statuses,
+  people,
+  projects,
+  fields,
+  today,
+  weekStartsOn,
+  onChange,
+  onOpen,
+  view: viewProp,
+  defaultView,
+  onViewChange,
+  toolbar = true,
+  toolbarExtra,
+  addLabel = "Add task",
+  starters,
+  emptyTitle = "No tasks yet",
+  emptyBody = "Add the first thing that needs doing. Press Enter to add the next one.",
+  loading = false,
+  error: readError,
+  label = "Tasks",
+  className,
+}) {
+  const uid = useId();
+  const regionRef = useRef(null);
+  const ctx = useMemo(
+    () => createTaskContext({ statuses, people, projects, fields, today, weekStartsOn }),
+    [statuses, people, projects, fields, today, weekStartsOn],
+  );
+  const editable = typeof onChange === "function";
+  const { tasks: all, commit, error, clearError } = useTaskChanges(tasks, onChange);
+  const [view, setView] = useViewState(viewProp, defaultView, onViewChange);
+  const shown = useMemo(() => applyView(all, view, ctx), [all, view, ctx]);
+  const counts = useMemo(() => subtaskCounts(all, ctx), [all, ctx]);
+  const titleOf = useMemo(() => new Map(all.map((t) => [t.id, t.title])), [all]);
+  const manual = !view.sort?.length;
+  const by = view.groupBy && view.groupBy !== "none" ? view.groupBy : null;
+  const show = new Set(view.fields ?? []);
+
+  const [folded, setFolded] = useState(() => new Set());
+  const [collapsed, setCollapsed] = useState(() => new Set());
+  const [selected, setSelected] = useState(() => new Set());
+  const lastPicked = useRef(null);
+  const [editing, setEditing] = useState(null);
+  const [adding, setAdding] = useState(null); // { group, parentId? }
+  const [overGroup, setOverGroup] = useState(null);
+  const [announce, setAnnounce] = useState("");
+  const [started, setStarted] = useState(false);
+
+  // Drop selections of tasks that are gone.
+  useEffect(() => {
+    setSelected((s) => {
+      if (!s.size) return s;
+      const ids = new Set(all.map((t) => t.id));
+      const next = new Set([...s].filter((id) => ids.has(id)));
+      return next.size === s.size ? s : next;
+    });
+  }, [all]);
+
+  // Rows per group, nested, in reading order: the model for the screen,
+  // for shift-click ranges and for the arrow keys.
+  const groups = useMemo(
+    () =>
+      shown.groups.map((g) => {
+        const rows = flattenTree(g.tasks, { collapsed });
+        // Each top-level row with the rows under it: dragged as one.
+        const blocks = [];
+        for (const r of rows) {
+          if (r.depth === 0) blocks.push({ root: r, rest: [] });
+          else blocks[blocks.length - 1]?.rest.push(r);
+        }
+        return { ...g, rows, blocks, roots: blocks.map((b) => b.root.task) };
+      }),
+    [shown.groups, collapsed],
+  );
+  const order = useMemo(() => groups.flatMap((g) => (folded.has(g.key) ? [] : g.rows.map((r) => r.task.id))), [groups, folded]);
+  const selectMode = selected.size > 0;
+
+  const say = (text) => setAnnounce(text);
+  const name = (t) => `“${t.title || "Untitled"}”`;
+
+  function groupPatch(key) {
+    if (!by) return {};
+    return movePatch({ assignees: [], tags: [] }, by, NONE, key, ctx);
+  }
+
+  function update(task, patch, words) {
+    return commit({ type: "update", id: task.id, patch }, { label: name(task) }).then((r) => {
+      if (r.ok !== false && words) say(words);
+      return r;
+    });
+  }
+
+  async function create(title, group, parentId) {
+    const patch = groupPatch(group);
+    if (patch === null) return { ok: false };
+    const g = groups.find((x) => x.key === group);
+    const siblings = parentId ? all.filter((t) => t.parentId === parentId) : g?.roots ?? [];
+    const task = draftTask(title, ctx, { ...patch, ...(parentId ? { parentId } : {}) }, { after: siblings[siblings.length - 1] });
+    if (parentId) setCollapsed((s) => (s.has(parentId) ? new Set([...s].filter((x) => x !== parentId)) : s));
+    const r = await commit({ type: "create", task }, { label: name(task) });
+    if (r.ok !== false) say(`Added ${name(task)}${g && by ? ` to ${g.label}` : ""}`);
+    return r;
+  }
+
+  function remove(ids) {
+    const change = deleteChange(all, ids);
+    const n = ids.length;
+    const one = n === 1 ? all.find((t) => t.id === ids[0]) : null;
+    setSelected(new Set());
+    return commit(change, { label: one ? name(one) : `${n} tasks`, undo: one ? `Deleted ${name(one)}` : `Deleted ${n} tasks` });
+  }
+
+  function toggleSelect(id, { range = false } = {}) {
+    setSelected((s) => {
+      const next = new Set(s);
+      if (range && lastPicked.current && order.includes(lastPicked.current)) {
+        const a = order.indexOf(lastPicked.current);
+        const b = order.indexOf(id);
+        const [lo, hi] = a < b ? [a, b] : [b, a];
+        for (const x of order.slice(lo, hi + 1)) next.add(x);
+      } else if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+    lastPicked.current = id;
+  }
+
+  function onDragEnd({ active, over }) {
+    setOverGroup(null);
+    if (!active || !over || !editable) return;
+    const task = active.data.task;
+    const from = active.data.group;
+    const to = over.data.group;
+    if (!task || to == null) return;
+    const g = groups.find((x) => x.key === to);
+    if (!g) return;
+    const patch = from === to ? {} : movePatch(task, by, from, to, ctx);
+    if (patch === null) {
+      toast.info(`${name(task)} stays where it was`, { description: `Tasks cannot be moved into ${g.label}. Give it a due date instead.` });
+      say(`${name(task)} cannot go to ${g.label}`);
+      return;
+    }
+    let change;
+    if (manual) {
+      const ids = g.roots.map((t) => t.id);
+      const list = g.roots.filter((t) => t.id !== task.id);
+      let index = list.length;
+      if (over.data.task) {
+        const overIndex = ids.indexOf(over.data.task.id);
+        const activeIndex = ids.indexOf(task.id);
+        index = from === to && activeIndex >= 0 && activeIndex < overIndex ? overIndex : list.findIndex((t) => t.id === over.data.task.id);
+        if (index < 0) index = list.length;
+      }
+      if (from === to && ids.indexOf(task.id) === index) return;
+      change = placeChange(list, task, index, patch);
+    } else {
+      if (from === to) return;
+      change = { type: "update", id: task.id, patch };
+    }
+    commit(change, { label: name(task) }).then((r) => {
+      if (r.ok !== false) say(from === to ? `${name(task)} moved` : `${name(task)} moved to ${g.label}`);
+    });
+  }
+
+  const startAdding = (group, parentId) => {
+    setStarted(true);
+    if (group && folded.has(group)) setFolded((s) => new Set([...s].filter((x) => x !== group)));
+    setAdding({ group: group ?? groups.find((g) => groupPatch(g.key) !== null)?.key ?? "all", parentId });
+  };
+
+  const empty = !loading && all.length === 0 && !started;
+  const noMatches = !loading && all.length > 0 && shown.tasks.length === 0;
+  // Only "hide done" is on and it hid everything: that is good news.
+  const allDone = noMatches && view.hideDone && !view.search && !Object.values(view.filters ?? {}).some((v) => v?.length);
+  const clearView = () => setView({ ...view, search: "", filters: {}, hideDone: false });
+
+  return (
+    <div className={cx("grid min-w-0 grid-cols-1 gap-3", className)}>
+      {toolbar && !empty ? (
+        <ViewToolbar
+          view={view}
+          onViewChange={setView}
+          ctx={ctx}
+          tasks={all}
+          count={shown.tasks.length}
+          extra={
+            <>
+              {toolbarExtra}
+              {editable ? (
+                <Button variant="primary" size="sm" icon="plus" onClick={() => startAdding(adding?.group)}>
+                  <span className="sr-only sm:not-sr-only">{addLabel}</span>
+                </Button>
+              ) : null}
+            </>
+          }
+        />
+      ) : null}
+      {readError ? <Notice tone="danger">{readError}</Notice> : null}
+      {error ? (
+        <Notice tone="danger" onDismiss={clearError}>
+          {error}
+        </Notice>
+      ) : null}
+
+      {loading ? (
+        <div className="grid gap-2 rounded-lg border border-border bg-card p-4" aria-busy="true" aria-label="Loading tasks">
+          <Skeleton className="w-32" />
+          {[0, 1, 2, 3, 4].map((i) => (
+            <div key={i} className="flex items-center gap-3 py-1.5">
+              <Skeleton shape="circle" className="size-4" />
+              <Skeleton className={["w-2/3", "w-1/2", "w-3/5", "w-2/5", "w-1/2"][i]} />
+            </div>
+          ))}
+        </div>
+      ) : empty ? (
+        <div className="rounded-lg bg-card">
+          <Empty
+            icon="circle-check"
+            title={emptyTitle}
+            body={emptyBody}
+            action={
+              editable ? (
+                <div className="flex flex-wrap items-center justify-center gap-2">
+                  <Button variant="primary" icon="plus" onClick={() => startAdding()}>
+                    {addLabel}
+                  </Button>
+                  {(starters ?? []).map((s) => (
+                    <Button
+                      key={s.label}
+                      variant="secondary"
+                      icon={s.icon ?? "sparkles"}
+                      onClick={() => {
+                        setStarted(true);
+                        let prev = null;
+                        const made = s.tasks.map((t) => (prev = draftTask(t.title, ctx, t, { after: prev })));
+                        commit({ type: "create", tasks: made }, { label: `“${s.label}”` });
+                        say(`Added ${made.length} tasks from ${s.label}`);
+                      }}
+                    >
+                      {s.label}
+                    </Button>
+                  ))}
+                </div>
+              ) : null
+            }
+          />
+        </div>
+      ) : noMatches ? (
+        <div className="rounded-lg bg-card">
+          {allDone ? (
+            <Empty
+              icon="circle-check"
+              title="All done"
+              body="Every task here is finished. Nice work."
+              action={
+                <Button variant="secondary" onClick={clearView}>
+                  Show done tasks
+                </Button>
+              }
+            />
+          ) : (
+            <Empty
+              icon="search"
+              title="No tasks match"
+              body={view.search ? `Nothing has “${view.search}” with these filters.` : "Nothing fits these filters."}
+              action={
+                <Button variant="secondary" onClick={clearView}>
+                  Clear search and filters
+                </Button>
+              }
+            />
+          )}
+        </div>
+      ) : (
+        <TaskDragProvider
+          disabled={!editable}
+          onDragOver={({ over }) => setOverGroup(over?.data?.group ?? null)}
+          onDragEnd={onDragEnd}
+          onDragCancel={() => setOverGroup(null)}
+          place={(o) => (o.data.task ? `${name(o.data.task)} in ${groups.find((g) => g.key === o.data.group)?.label ?? "the list"}` : o.data.label)}
+          overlay={(a) => (
+            <div className={cx(LIFTED, "flex w-[min(28rem,85vw)] items-center gap-2 px-3 py-2 text-sm")}>
+              <StatusPill status={a.data.task?.status} ctx={ctx} hideLabel />
+              <span className="min-w-0 flex-1 truncate font-medium">{a.data.task?.title}</span>
+              <AssigneeStack ids={a.data.task?.assignees} ctx={ctx} max={2} />
+            </div>
+          )}
+        >
+          <div ref={regionRef} role="region" aria-label={label} className="rounded-lg border border-border bg-card text-card-foreground">
+            {groups.map((g, gi) => (
+              <Group
+                key={g.key}
+                group={g}
+                first={gi === 0}
+                single={!by}
+                by={by}
+                ctx={ctx}
+                uid={uid}
+                folded={folded.has(g.key)}
+                onFold={() => setFolded((s) => (s.has(g.key) ? new Set([...s].filter((x) => x !== g.key)) : new Set([...s, g.key])))}
+                highlight={overGroup === g.key}
+                canAdd={editable && groupPatch(g.key) !== null}
+                addLabel={addLabel}
+                adding={adding}
+                setAdding={setAdding}
+                onCreate={create}
+                startAdding={startAdding}
+              >
+                <SortableGroup ids={g.roots.map((t) => sid(g.key, t.id))}>
+                  {g.blocks.map(({ root, rest }) => (
+                    <SortableRow
+                      key={root.task.id}
+                      row={root}
+                      group={g.key}
+                      draggable={editable}
+                      rowProps={rowProps(root)}
+                      handlers={rowHandlers(root)}
+                      regionRef={regionRef}
+                    >
+                      {rest.length || adding?.parentId === root.task.id ? (
+                        <ul>
+                          {rest.map((r) => (
+                            <Row key={r.task.id} row={r} {...rowProps(r)} handlers={rowHandlers(r)} regionRef={regionRef}>
+                              {adding?.parentId === r.task.id ? <SubtaskAdd parent={r} onCreate={create} onClose={() => setAdding(null)} group={g.key} /> : null}
+                            </Row>
+                          ))}
+                          {adding?.parentId === root.task.id ? <SubtaskAdd parent={root} onCreate={create} onClose={() => setAdding(null)} group={g.key} /> : null}
+                        </ul>
+                      ) : null}
+                    </SortableRow>
+                  ))}
+                </SortableGroup>
+              </Group>
+            ))}
+          </div>
+        </TaskDragProvider>
+      )}
+
+      {selected.size > 0 ? (
+        <BulkBar
+          count={selected.size}
+          ctx={ctx}
+          editable={editable}
+          onClear={() => setSelected(new Set())}
+          onSelectAll={() => setSelected(new Set(order))}
+          allSelected={selected.size > 0 && selected.size === order.length}
+          apply={(patch, words) => {
+            const ids = [...selected];
+            commit({ type: "update", ids, patch }, { label: `${ids.length} tasks` }).then((r) => {
+              if (r.ok !== false) say(words);
+            });
+          }}
+          onDelete={() => remove([...selected])}
+        />
+      ) : null}
+
+      <p aria-live="polite" className="sr-only">
+        {announce}
+      </p>
+    </div>
+  );
+
+  function rowProps(r) {
+    return {
+      ctx,
+      show,
+      editable,
+      counts,
+      parentTitle: r.depth === 0 && r.task.parentId ? titleOf.get(r.task.parentId) : null,
+      selectMode,
+      selected: selected.has(r.task.id),
+      editing: editing === r.task.id,
+    };
+  }
+
+  function rowHandlers(r) {
+    const t = r.task;
+    return {
+      onToggleDone: () => {
+        const change = toggleDoneChange(t, ctx);
+        commit(change, { label: name(t) }).then((res) => {
+          if (res.ok !== false) say(isDone(t, ctx) ? `${name(t)} reopened` : `${name(t)} done`);
+        });
+      },
+      onRename: (title) => {
+        setEditing(null);
+        const next = title.trim();
+        if (next && next !== t.title) update(t, { title: next }, `Renamed to “${next}”`);
+      },
+      onEdit: () => setEditing(t.id),
+      onCancelEdit: () => setEditing(null),
+      onPatch: (patch) => update(t, patch),
+      onOpen: onOpen ? () => onOpen(t) : null,
+      onSelect: (range) => toggleSelect(t.id, { range }),
+      onFold: r.hasChildren
+        ? () => setCollapsed((s) => (s.has(t.id) ? new Set([...s].filter((x) => x !== t.id)) : new Set([...s, t.id])))
+        : null,
+      menu: [
+        onOpen && { label: "Open", icon: "maximize", onSelect: () => onOpen(t) },
+        editable && { label: "Rename", icon: "pencil", onSelect: () => setEditing(t.id) },
+        editable && r.depth < 2 && { label: "Add subtask", icon: "plus", onSelect: () => startAdding(groupOfRow(t.id), t.id) },
+        { label: selected.has(t.id) ? "Deselect" : "Select", icon: "check", onSelect: () => toggleSelect(t.id) },
+        editable && {
+          label: "Status",
+          icon: "circle-dashed",
+          items: ctx.statuses.filter((s) => s.id !== t.status).map((s) => ({ label: s.label, onSelect: () => update(t, { status: s.id }, `${name(t)} is ${s.label}`) })),
+        },
+        editable && t.parentId && { label: "Make it a task", icon: "arrow-left", onSelect: () => update(t, { parentId: null }, `${name(t)} is its own task`) },
+        editable && {
+          label: "Duplicate",
+          icon: "copy",
+          onSelect: () => {
+            const { id, ...rest } = t;
+            commit({ type: "create", task: draftTask(`${t.title} (copy)`, ctx, { ...rest, title: `${t.title} (copy)` }, { after: t }) }, { label: name(t) });
+          },
+        },
+        editable && { type: "separator" },
+        editable && { label: "Delete", icon: "trash", tone: "danger", onSelect: () => remove([t.id]) },
+      ],
+    };
+  }
+
+  function groupOfRow(id) {
+    return groups.find((g) => g.rows.some((r) => r.task.id === id))?.key;
+  }
+}
+
+// ---- a group ------------------------------------------------------------
+
+function Group({ group, first, single, by, ctx, uid, folded, onFold, highlight, canAdd, addLabel, adding, setAdding, onCreate, startAdding, children }) {
+  const drop = useDropTarget(`group::${group.key}`, { group: group.key, label: group.label });
+  const headingId = `${uid}-g-${group.key}`;
+  const est = sumOf(group.tasks);
+  const addingHere = adding && adding.group === group.key;
+  return (
+    <section
+      ref={drop.setNodeRef}
+      aria-labelledby={single ? undefined : headingId}
+      aria-label={single ? "All tasks" : undefined}
+      className={cx("transition-colors duration-150", !first && "border-t border-border", (highlight || drop.isOver) && "bg-accent/40")}
+    >
+      {!single ? (
+        <header className={cx("group/head sticky top-0 z-10 flex min-h-11 items-center gap-1 bg-card pe-2 ps-1", first && "rounded-t-lg")}>
+          {/* raw: the whole heading folds the group; a kit Button would
+              centre it and weigh it as an action. */}
+          <button
+            type="button"
+            aria-expanded={!folded}
+            onClick={onFold}
+            className="flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-md px-2 text-left outline-none hover:bg-accent/60 focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <Icon name="chevron-right" size={14} className={cx("shrink-0 text-muted-foreground transition-transform duration-150 motion-reduce:transition-none", !folded && "rotate-90")} />
+            <span id={headingId} className="min-w-0">
+              <GroupLabel group={group} by={by} ctx={ctx} />
+            </span>
+            <span data-nums className="text-xs text-muted-foreground">
+              {group.tasks.length}
+            </span>
+          </button>
+          {est > 0 ? (
+            <span data-nums className="hidden text-xs text-muted-foreground sm:inline" title="Estimated hours">
+              {Math.round(est * 10) / 10}h
+            </span>
+          ) : null}
+          {canAdd ? (
+            <IconButton
+              icon="plus"
+              size="sm"
+              label={`${addLabel} to ${group.label}`}
+              className="opacity-100 sm:opacity-0 sm:transition-opacity sm:duration-150 sm:group-hover/head:opacity-100 sm:focus-visible:opacity-100"
+              onClick={() => startAdding(group.key)}
+            />
+          ) : null}
+        </header>
+      ) : null}
+      {!folded ? (
+        <>
+          <ul className="grid grid-cols-1">
+            {children}
+            {group.tasks.length === 0 && !addingHere ? (
+              <li className="px-4 py-2 text-xs text-muted-foreground sm:ps-12">{canAdd ? "Nothing here — drop a task or add one." : "Nothing here."}</li>
+            ) : null}
+          </ul>
+          {canAdd ? <QuickAdd group={group} adding={adding} setAdding={setAdding} onCreate={onCreate} addLabel={addLabel} uid={uid} /> : null}
+        </>
+      ) : null}
+    </section>
+  );
+}
+
+function QuickAdd({ group, adding, setAdding, onCreate, addLabel, uid }) {
+  const open = adding && adding.group === group.key && !adding.parentId;
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const inputId = `${uid}-add-${group.key}`;
+  if (!open) {
+    return (
+      <div className="px-2 pb-1.5 sm:ps-9">
+        <Button variant="quiet" size="sm" icon="plus" align="start" onClick={() => setAdding({ group: group.key })}>
+          {addLabel}
+        </Button>
+      </div>
+    );
+  }
+  async function submit() {
+    const title = draft.trim();
+    if (!title || busy) return;
+    setBusy(true);
+    const r = await onCreate(title, group.key);
+    setBusy(false);
+    if (r?.ok !== false) setDraft("");
+  }
+  return (
+    <div className="flex items-center gap-2 px-3 pb-2 sm:ps-12">
+      <label htmlFor={inputId} className="sr-only">
+        New task in {group.label}
+      </label>
+      <Input
+        id={inputId}
+        autoFocus
+        value={draft}
+        disabled={busy}
+        placeholder="Task name, then Enter"
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+            e.preventDefault();
+            submit();
+          } else if (e.key === "Escape") {
+            setDraft("");
+            setAdding(null);
+          }
+        }}
+        onBlur={() => {
+          if (!draft.trim()) setAdding(null);
+        }}
+      />
+      <Button size="sm" variant="secondary" disabled={!draft.trim() || busy} loading={busy} onMouseDown={(e) => e.preventDefault()} onClick={submit}>
+        Add
+      </Button>
+    </div>
+  );
+}
+
+// ---- a row --------------------------------------------------------------
+
+function SortableRow({ row, group, draggable, rowProps, handlers, regionRef, children }) {
+  const s = useSortableTask(sid(group, row.task.id), { task: row.task, group, label: row.task.title }, { disabled: !draggable || rowProps.editing });
+  return (
+    <Row
+      row={row}
+      {...rowProps}
+      handlers={handlers}
+      regionRef={regionRef}
+      nodeRef={s.setNodeRef}
+      style={s.style}
+      dragging={s.isDragging}
+      grip={draggable ? <DragHandle handle={s.handle} handleRef={s.setHandleRef} label={row.task.title || "task"} /> : null}
+    >
+      {children}
+    </Row>
+  );
+}
+
+function Row({ row, ctx, show, editable, counts, parentTitle, selectMode, selected, editing, handlers, regionRef, nodeRef, style, dragging, grip, children }) {
+  const t = row.task;
+  const done = isDone(t, ctx);
+  const sub = counts.get(t.id);
+  const titleRef = useRef(null);
+  const selId = useId();
+  const [draft, setDraft] = useState(t.title);
+  // Enter, Escape and blur each end an edit; only the first one counts.
+  const settled = useRef(false);
+  useEffect(() => {
+    if (editing) {
+      setDraft(t.title);
+      settled.current = false;
+    }
+  }, [editing, t.title]);
+  const finish = (save) => {
+    if (settled.current) return;
+    settled.current = true;
+    if (save) handlers.onRename(draft);
+    else handlers.onCancelEdit();
+    requestAnimationFrame(() => titleRef.current?.focus());
+  };
+
+  // ↑ ↓ walk the titles; x selects; Enter (a click) renames.
+  function onTitleKey(e) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      const all = [...(regionRef.current?.querySelectorAll("[data-task-title]") ?? [])];
+      const i = all.indexOf(e.currentTarget);
+      const next = all[i + (e.key === "ArrowDown" ? 1 : -1)];
+      if (next) {
+        e.preventDefault();
+        next.focus();
+      }
+    } else if (e.key === "x" && !e.metaKey && !e.ctrlKey) {
+      e.preventDefault();
+      handlers.onSelect(e.shiftKey);
+    }
+  }
+
+  const indent = row.depth * 24;
+  return (
+    <li
+      ref={nodeRef}
+      style={style}
+      className={cx(
+        "group/row relative border-t border-border/60 bg-card [ul.grid>&:first-child]:border-t-0",
+        dragging && "z-10 opacity-40",
+        selected && "bg-primary/5",
+      )}
+    >
+      <div className="flex min-h-11 items-center gap-0.5 pe-1 ps-1 sm:pe-2">
+        <span className="flex w-6 shrink-0 justify-center">{grip}</span>
+        {selectMode ? (
+          <Checkbox
+            id={selId}
+            aria-label={`Select ${t.title || "task"}`}
+            checked={selected}
+            onChange={(e) => handlers.onSelect(e.nativeEvent?.shiftKey)}
+            className="w-6 shrink-0 justify-center"
+          />
+        ) : null}
+        <span style={{ width: indent }} className="shrink-0" aria-hidden="true" />
+        {row.hasChildren ? (
+          <IconButton
+            icon="chevron-right"
+            size="sm"
+            label={row.collapsed ? `Show ${row.childCount} subtasks` : `Hide subtasks`}
+            aria-expanded={!row.collapsed}
+            onClick={handlers.onFold}
+            className={cx("-mx-1.5 [&>svg]:transition-transform [&>svg]:duration-150 motion-reduce:[&>svg]:transition-none", !row.collapsed && "[&>svg]:rotate-90")}
+          />
+        ) : row.depth > 0 ? (
+          <span className="w-3 shrink-0" aria-hidden="true" />
+        ) : null}
+        <CompleteToggle done={done} onToggle={editable ? handlers.onToggleDone : undefined} label={t.title || "task"} size={row.depth > 0 ? "sm" : "md"} />
+        <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-0.5 py-1 sm:flex-nowrap sm:py-0">
+          <div className="flex min-w-0 basis-full items-center gap-2 sm:flex-1 sm:basis-auto">
+            {editing ? (
+              <Input
+                aria-label="Task name"
+                autoFocus
+                value={draft}
+                onChange={(e) => setDraft(e.target.value)}
+                onFocus={(e) => e.target.select()}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+                    e.preventDefault();
+                    finish(true);
+                  } else if (e.key === "Escape") {
+                    e.preventDefault();
+                    finish(false);
+                  }
+                }}
+                onBlur={() => {
+                  if (settled.current) return;
+                  settled.current = true;
+                  handlers.onRename(draft);
+                }}
+                className="flex-1"
+              />
+            ) : (
+              // raw: the title is text that becomes a field on click — a
+              // kit Button would centre and weigh it as an action.
+              <button
+                ref={titleRef}
+                type="button"
+                data-task-title
+                onClick={(e) => {
+                  if (e.shiftKey || e.metaKey || e.ctrlKey) handlers.onSelect(e.shiftKey);
+                  else if (editable) handlers.onEdit();
+                  else handlers.onOpen?.();
+                }}
+                onKeyDown={onTitleKey}
+                title={editable ? "Click to rename" : undefined}
+                className={cx(
+                  "min-w-0 truncate rounded-sm text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  editable && "cursor-text",
+                  done ? "text-muted-foreground line-through decoration-muted-foreground/60" : "text-foreground",
+                  row.depth === 0 && "font-medium",
+                )}
+              >
+                {t.title || <span className="text-muted-foreground">Untitled</span>}
+              </button>
+            )}
+            {!editing && sub ? <SubtaskCount done={sub.done} total={sub.total} className="shrink-0" /> : null}
+            {!editing && parentTitle && row.depth === 0 ? (
+              <span className="hidden min-w-0 shrink truncate text-xs text-muted-foreground sm:inline" title={`Subtask of ${parentTitle}`}>
+                in {parentTitle}
+              </span>
+            ) : null}
+            {!editing && handlers.onOpen ? (
+              <IconButton
+                icon="maximize"
+                size="sm"
+                label={`Open ${t.title || "task"}`}
+                onClick={handlers.onOpen}
+                className="-my-1 ms-auto opacity-0 transition-opacity duration-150 group-hover/row:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:hidden"
+              />
+            ) : null}
+          </div>
+          {show.has("tags") ? <TagList tags={t.tags} className="shrink-0" /> : null}
+          {show.has("project") && t.project ? (
+            <span className="max-w-32 shrink-0 truncate text-xs text-muted-foreground">{ctx.projectById.get(String(t.project))?.name ?? t.project}</span>
+          ) : null}
+          {show.has("estimate") && t.estimate ? (
+            <span data-nums className="shrink-0 text-xs text-muted-foreground">
+              {t.estimate}h
+            </span>
+          ) : null}
+          {show.has("start") && t.start ? (
+            <span data-nums className="shrink-0 text-xs text-muted-foreground">
+              from {formatDay(t.start, ctx.today)}
+            </span>
+          ) : null}
+          {show.has("progress") && typeof t.progress === "number" ? (
+            <span className="w-16 shrink-0">
+              <ProgressLine value={t.progress} />
+            </span>
+          ) : null}
+          {show.has("assignees") ? (
+            <AssigneeStack ids={t.assignees} ctx={ctx} onChange={editable ? (ids) => handlers.onPatch({ assignees: ids }) : undefined} className="shrink-0" />
+          ) : null}
+          {show.has("due") ? (
+            <DueLabel value={t.due} done={done} ctx={ctx} onChange={editable ? (due) => handlers.onPatch({ due }) : undefined} className="shrink-0 sm:w-24 sm:justify-start" />
+          ) : null}
+          {show.has("priority") ? (
+            <PriorityFlag value={t.priority} onChange={editable ? (priority) => handlers.onPatch({ priority }) : undefined} className="shrink-0" />
+          ) : null}
+          {show.has("status") ? <StatusPill status={t.status} ctx={ctx} onChange={editable ? (status) => handlers.onPatch({ status }) : undefined} className="shrink-0" /> : null}
+        </div>
+        <Menu items={handlers.menu} label={`Actions for ${t.title || "task"}`} className="shrink-0 sm:opacity-0 sm:transition-opacity sm:duration-150 sm:group-hover/row:opacity-100 sm:focus-visible:opacity-100 sm:aria-expanded:opacity-100" />
+      </div>
+      {children}
+    </li>
+  );
+}
+
+// ---- the bulk bar -------------------------------------------------------
+
+function BulkBar({ count, ctx, editable, onClear, onSelectAll, allSelected, apply, onDelete }) {
+  return (
+    <div role="toolbar" aria-label={`${count} selected`} className="sticky bottom-3 z-30 mx-auto flex w-full max-w-2xl flex-wrap items-center gap-1 rounded-lg border border-border bg-popover p-1.5 text-popover-foreground shadow-lg">
+      <span data-nums className="px-2 text-sm font-medium">
+        {count} selected
+      </span>
+      {!allSelected ? (
+        <Button variant="link" size="sm" tone="muted" onClick={onSelectAll}>
+          Select all
+        </Button>
+      ) : null}
+      <span className="flex-1" />
+      {editable && count > 0 ? (
+        <>
+          <Menu
+            label="Set status"
+            trigger={
+              <span className="inline-flex items-center gap-1.5 text-sm">
+                <Icon name="circle-dashed" size={16} />
+                <span className="hidden sm:inline">Status</span>
+              </span>
+            }
+            items={ctx.statuses.map((s) => ({ label: s.label, onSelect: () => apply({ status: s.id }, `${count} tasks set to ${s.label}`) }))}
+          />
+          <Menu
+            label="Assign"
+            trigger={
+              <span className="inline-flex items-center gap-1.5 text-sm">
+                <Icon name="user" size={16} />
+                <span className="hidden sm:inline">Assign</span>
+              </span>
+            }
+            items={[
+              ...ctx.people.map((p) => ({ label: p.name, onSelect: () => apply({ assignees: [p.id] }, `${count} tasks assigned to ${p.name}`) })),
+              { type: "separator" },
+              { label: "Unassign", onSelect: () => apply({ assignees: [] }, `${count} tasks unassigned`) },
+            ]}
+          />
+          <DueLabel value={null} ctx={ctx} quiet={false} placeholder="Due" onChange={(due) => apply({ due }, due ? `${count} tasks due ${formatDay(due, ctx.today)}` : `${count} tasks have no due date`)} className="px-2 text-sm" />
+          <Menu
+            label="Set priority"
+            trigger={
+              <span className="inline-flex items-center gap-1.5 text-sm">
+                <Icon name="flag" size={16} />
+                <span className="hidden sm:inline">Priority</span>
+              </span>
+            }
+            items={[
+              ...["urgent", "high", "medium", "low"].map((p) => ({ label: p[0].toUpperCase() + p.slice(1), onSelect: () => apply({ priority: p }, `${count} tasks set to ${p}`) })),
+              { label: "No priority", onSelect: () => apply({ priority: null }, `${count} tasks have no priority`) },
+            ]}
+          />
+          <IconButton icon="trash" size="sm" label={`Delete ${count} tasks`} onClick={onDelete} className="text-destructive" />
+        </>
+      ) : null}
+      <IconButton icon="x" size="sm" label="Clear selection" onClick={onClear} />
+    </div>
+  );
+}
+
+function SubtaskAdd({ parent, group, onCreate, onClose }) {
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  async function submit() {
+    const title = draft.trim();
+    if (!title || busy) return;
+    setBusy(true);
+    const r = await onCreate(title, group, parent.task.id);
+    setBusy(false);
+    if (r?.ok !== false) setDraft("");
+  }
+  return (
+    <li className="flex items-center gap-2 border-t border-border/60 py-1.5 pe-3" style={{ paddingInlineStart: 64 + (parent.depth + 1) * 24 }}>
+      <Input
+        aria-label={`New subtask of ${parent.task.title || "task"}`}
+        autoFocus
+        value={draft}
+        disabled={busy}
+        placeholder="Subtask name, then Enter"
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+            e.preventDefault();
+            submit();
+          } else if (e.key === "Escape") onClose();
+        }}
+        onBlur={() => {
+          if (!draft.trim()) onClose();
+        }}
+      />
+    </li>
+  );
+}