makersclaw 0.1.0 → 0.3.0

package/registry/blocks/stat-cards/usage.jsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { useId, useState } from "react";
+import { Button, Card, Delta, Distribution, Field, Icon, InputGroup, Meter, Notice, Sheet, Stat, cx } from "../../ui";
+
+// The `usage` shape of StatCards: an amount against a limit, one tile
+// each — a bar or a ring, or a split by kind with what is left, a warning
+// line near the cap, an action along the tile's foot, and a limit the
+// founder can change in a Sheet (the save goes out through
+// onLimitChange and may fail). The LIST of meters with a summary strip is
+// not this block: that is a different job.
+
+const EN = "en-US";
+const plain = (n) => (typeof n === "number" ? n.toLocaleString(EN, { maximumFractionDigits: 2 }) : String(n ?? ""));
+const finite = (n) => typeof n === "number" && Number.isFinite(n);
+const NOTE_TONES = { muted: "text-muted-foreground", success: "text-success", warning: "text-warning", danger: "text-destructive", info: "text-info" };
+
+// "View more →": an href is a link, onSelect a button.
+export function MoreLink({ item, fallback }) {
+  const text = item.linkLabel ?? fallback;
+  const common = { variant: "link", size: "sm", "aria-label": `${text}: ${item.label}` };
+  const body = (
+    <>
+      {text}
+      <Icon name="arrow-right" size={14} className="ml-1 inline-block align-[-0.125em]" />
+    </>
+  );
+  if (item.href) return <Button href={item.href} {...common}>{body}</Button>;
+  return (
+    <Button onClick={() => item.onSelect?.(item)} {...common}>
+      {body}
+    </Button>
+  );
+}
+
+// The numbers a tile shows, worked out once.
+function readUsage(item, format, warnAt) {
+  const fmt = format ?? plain;
+  const u = item.unit ? ` ${item.unit}` : "";
+  const used = finite(item.used) ? item.used : 0;
+  const capped = finite(item.limit) && item.limit > 0;
+  const pct = capped ? (used / item.limit) * 100 : null;
+  const usedText = item.value ?? `${fmt(used)}${u}`;
+  const limitText = item.limitText ?? (capped ? `${fmt(item.limit)}${u}` : "Unlimited");
+  const near = pct !== null && pct >= warnAt;
+  const noteTone = item.noteTone ?? (pct !== null && pct > 100 ? "danger" : near ? "warning" : "muted");
+  // A limit is shown when there is one, when it is named ("Unlimited",
+  // "$150 budget"), or when limit is null: no cap, said so.
+  const showLimit = capped || item.limit === null || item.limitText !== undefined;
+  return { fmt, u, used, capped, pct, usedText, limitText, near, noteTone, showLimit };
+}
+
+const pctText = (pct) => `${pct < 10 && pct > 0 ? Math.round(pct * 10) / 10 : Math.round(pct)}%`;
+
+export function UsageTile({ item, meter, format, warnAt, linkLabel, limitLabel, onEditLimit }) {
+  const r = readUsage(item, format, warnAt);
+  const parts = Array.isArray(item.parts) && item.parts.length ? item.parts : null;
+  const thresholds = item.thresholds ?? [{ at: warnAt, tone: "warning" }];
+  const ring = meter === "ring" && r.capped && !parts;
+  const d = item.delta === null || item.delta === undefined ? null : typeof item.delta === "number" ? { value: item.delta, suffix: "%" } : item.delta;
+  const buttons = [
+    item.action ? { key: "action", label: item.action.label, icon: item.action.icon, run: () => item.action.onSelect?.(item) } : null,
+    onEditLimit ? { key: "limit", label: limitLabel, icon: "pencil", run: onEditLimit } : null,
+  ].filter(Boolean);
+
+  return (
+    <Card as="div" padding="none" className="flex h-full min-w-0 flex-col">
+      <div className="grid flex-1 content-start gap-3 p-4 [overflow-wrap:anywhere]">
+        {ring ? (
+          <Meter
+            shape="ring"
+            size="md"
+            value={r.used}
+            max={item.limit}
+            label={item.label}
+            format={r.fmt}
+            unit={item.unit}
+            valueText={item.valueText ?? `${r.usedText} of ${r.limitText}`}
+            caption={item.caption}
+            thresholds={thresholds}
+          />
+        ) : (
+          <>
+            <div className="flex min-w-0 items-start justify-between gap-3">
+              <span className="min-w-0 truncate text-sm font-medium text-muted-foreground">{item.label}</span>
+              {d ? <Delta invert={item.invert} variant="badge" {...d} className="shrink-0" /> : null}
+            </div>
+            <Stat value={r.usedText} unit={r.showLimit ? `/ ${r.limitText}` : item.suffix} caption={item.caption} size="md" className="-mt-2" />
+            {parts ? (
+              <Distribution
+                segments={parts}
+                total={r.capped ? item.limit : undefined}
+                restLabel={r.capped ? item.restLabel ?? "Free" : undefined}
+                legend
+                size="thin"
+                label={`${item.label}: ${r.usedText} of ${r.limitText}`}
+                formatValue={(v) => `${r.fmt(v)}${r.u}`}
+                formatLegend={({ value, share, rest }) => (r.capped || rest ? `${r.fmt(value)}${r.u}` : `${r.fmt(value)}${r.u} · ${share}`)}
+              />
+            ) : r.capped ? (
+              <Meter
+                value={r.used}
+                max={item.limit}
+                format={r.fmt}
+                unit={item.unit}
+                valueText={null}
+                aria-label={item.label}
+                thresholds={thresholds}
+                caption={`${pctText(r.pct)} used`}
+              />
+            ) : null}
+          </>
+        )}
+        {item.note ? (
+          <p className={cx("text-sm", NOTE_TONES[r.noteTone] ?? NOTE_TONES.muted)}>
+            {r.noteTone === "warning" || r.noteTone === "danger" ? <Icon name="warning" size={14} className="mr-1 inline-block align-[-0.125em]" /> : null}
+            {item.note}
+          </p>
+        ) : null}
+      </div>
+      {item.href || item.onSelect ? (
+        <div className="flex justify-end border-t border-border px-4 py-2.5">
+          <MoreLink item={item} fallback={linkLabel} />
+        </div>
+      ) : null}
+      {buttons.length ? (
+        <div className="flex border-t border-border bg-muted/40">
+          {buttons.map((b, i) => (
+            <Button
+              key={b.key}
+              variant="quiet"
+              align="start"
+              icon={b.icon}
+              onClick={b.run}
+              aria-label={`${b.label}: ${item.label}`}
+              className={cx("min-w-0 flex-1 rounded-none", i > 0 && "border-l border-l-border")}
+            >
+              <span className="truncate">{b.label}</span>
+            </Button>
+          ))}
+        </div>
+      ) : null}
+    </Card>
+  );
+}
+
+// The limit editor's state: which tile, the draft, the save in flight and
+// why it failed.
+export function useLimitEditor(onLimitChange, format) {
+  const [item, setItem] = useState(null);
+  const [draft, setDraft] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const [invalid, setInvalid] = useState(null);
+
+  function open(it) {
+    setItem(it);
+    setDraft(finite(it.limit) ? String(it.limit) : "");
+    setError(null);
+    setInvalid(null);
+  }
+  function close() {
+    if (saving) return;
+    setItem(null);
+  }
+  async function save() {
+    const n = Number(String(draft).replace(/[,\s]/g, ""));
+    if (!String(draft).trim() || !Number.isFinite(n) || n <= 0) {
+      setInvalid("Enter a number above zero.");
+      return;
+    }
+    setInvalid(null);
+    setError(null);
+    setSaving(true);
+    let result;
+    try {
+      result = await onLimitChange?.(item, n);
+    } catch (e) {
+      result = { ok: false, error: e?.message ?? String(e) };
+    }
+    setSaving(false);
+    if (result && result.ok === false) {
+      setError(result.error ?? "The limit was not changed.");
+      return;
+    }
+    setItem(null);
+  }
+  return { item, draft, setDraft, saving, error, invalid, open, close, save, format };
+}
+
+export function LimitSheet({ editor, label, hint }) {
+  const id = useId();
+  const item = editor.item;
+  const unit = item?.unit;
+  const fmt = editor.format ?? plain;
+  return (
+    <Sheet
+      open={Boolean(item)}
+      onClose={editor.close}
+      side="center"
+      title={item ? `${item.limitLabel ?? label}: ${item.label}` : label}
+      description={
+        item
+          ? item.limitHint ?? hint ?? `Now ${finite(item.limit) ? `${fmt(item.limit)}${unit ? ` ${unit}` : ""}` : "unlimited"}; ${fmt(finite(item.used) ? item.used : 0)}${unit ? ` ${unit}` : ""} used.`
+          : undefined
+      }
+      footer={
+        <>
+          <Button onClick={editor.close} disabled={editor.saving}>
+            Cancel
+          </Button>
+          <Button variant="primary" type="submit" form={`${id}-form`} loading={editor.saving}>
+            Save
+          </Button>
+        </>
+      }
+    >
+      <form
+        id={`${id}-form`}
+        className="grid gap-3"
+        onSubmit={(e) => {
+          e.preventDefault();
+          editor.save();
+        }}
+      >
+        {editor.error ? <Notice tone="danger">{editor.error}</Notice> : null}
+        <Field id={`${id}-limit`} label={item?.limitField ?? "New limit"} error={editor.invalid}>
+          <InputGroup
+            id={`${id}-limit`}
+            inputMode="decimal"
+            autoComplete="off"
+            value={editor.draft}
+            onChange={(e) => editor.setDraft(e.target.value)}
+            prefix={item?.limitPrefix}
+            suffix={unit}
+            invalid={Boolean(editor.invalid)}
+            aria-describedby={editor.invalid ? `${id}-limit-error` : undefined}
+          />
+        </Field>
+      </form>
+    </Sheet>
+  );
+}

package/registry/blocks/task-list/README.md

@@ -0,0 +1,176 @@
+# Task list
+
+The List view of work. Tasks sit under headings that fold — by status,
+assignee, priority, project, due date or any field. Each row has a round
+check to complete it, a title you click to rename in place, its subtasks
+indented under it (with their own fold and a "2/5" count), and the fields
+you choose — people, due date, priority, tags, project, estimate — as
+pickers right in the row. Every group ends in "Add task": type, Enter, and
+the next one is ready. Drag a row by its grip to reorder it, or into
+another group to change its status, assignee or due date. Tick several
+(the row menu's "Select", or x on a focused title, shift for a range) and
+a bar sets their status, assignee, due date or priority together, or
+deletes them — with Undo in the toast. Search, filters (as chips), group,
+sort and fields live in the toolbar above.
+
+Every change saves through one async `onChange(change)` and shows at
+once; when the save fails the list puts it back and says why.
+
+```jsx
+import { TaskList } from "../components/blocks/task-list";   // a Makersclaw app ("./blocks/task-list" from components/)
+import { TaskList } from "@/components/makersclaw/blocks/task-list";   // a shadcn project
+```
+
+It is a client component: render it from a `"use client"` component, and
+load the tasks in the server surface (README §4). It is built on
+`task-model` (added with it): the task shape, the change shapes and the
+helpers are documented there.
+
+## The data
+
+Tasks in task-model's shape — `{ id, title, status, assignees, due?,
+priority?, parentId?, tags, project?, estimate?, order?, … }` — with the
+statuses, people and projects they refer to. A task with `parentId` is a
+subtask, drawn under its parent when both are in the same group (else in
+its own group with "in Parent" beside it). `order` is the hand-made order
+drag-to-reorder saves; tasks without one keep the order given.
+
+## Props
+
+- `tasks` — the tasks. Pass `useFixture(rows, SAMPLE).rows` and the
+  examples change on screen and save nothing (they are not rows).
+- `statuses` — `[{ id, label, tone?, hue?, done? }]` in order; `done`
+  marks what the check completes to. Default: To do, In progress, In
+  review, Done.
+- `people` — `[{ id, name, src? }]`: who can be assigned.
+- `projects` — `[{ id, name, hue? }]`.
+- `fields` — custom fields (`{ key, label, kind, options? }`), grouped and
+  filtered like the built-in ones.
+- `onChange(change)` — save a change; return `{ ok: true }` or
+  `{ ok: false, error }` (a throw counts as failed). A change is
+  task-model's `create` / `update` / `delete` / `batch`; in a Makersclaw
+  app, loop over `changeWrites(change)` into insertRow / updateRow /
+  deleteRow (task-model README, "A change"). Without `onChange` the list
+  only shows: no checks, pickers, drag or quick-add.
+- `onOpen(task)` — an "Open" button on each row (on hover; in the row's
+  menu on a phone) and in the menu: open your `Sheet` with the task.
+  Clicking a title renames it; with no `onChange`, it opens.
+- `view` · `defaultView` · `onViewChange(view)` — what the list shows:
+  `{ search, filters, groupBy, sort, fields, hideDone }` (task-model's
+  `DEFAULT_VIEW`: grouped by status, showing assignees, due and priority).
+  Pass `defaultView` to start somewhere else; pass `view` + `onViewChange`
+  to keep it yourself (saved views, the URL).
+- `today` — `"YYYY-MM-DD"`: what "Today" and "Overdue" are measured from.
+  Default the browser's today; fix it in a demo.
+- `weekStartsOn` — 0 (Sunday) … 6; default Monday.
+- `toolbar` — default true; false hides search, filter, group, sort and
+  fields (and the Add task button).
+- `toolbarExtra` — your controls at the toolbar's end, before "Add task".
+- `addLabel` — default `"Add task"`.
+- `starters` — templates the empty state offers:
+  `[{ label: "Product launch", icon?: "sparkles", tasks: [{ title, priority?, … }] }]`.
+  A press creates them all in one change.
+- `emptyTitle` · `emptyBody` — the empty state's words.
+- `loading` — skeleton rows in place of the list.
+- `error` — a danger Notice above the list (a failed read).
+- `label` — what the list is called to a screen reader, default `"Tasks"`.
+- `className` — layout around it (width, margin). Never colour.
+
+## What it does, precisely
+
+- Completing: the round check moves a task to the first `done` status,
+  and back to the first open one.
+- Grouped by assignee (or tags), a task with two people is under both;
+  dragging it from one to another swaps that one person.
+- Grouped by due date, "Overdue" takes no drops (the toast says to give a
+  date instead); dropping on "Tomorrow" sets tomorrow, and a start date
+  moves with it.
+- Reordering needs the manual sort (Sort: Manual). With another sort, a
+  drag still moves a task to another group.
+- Deleting a task deletes its subtasks; Undo brings all of them back.
+- Keyboard: Tab reaches every control; on a title, ↑ ↓ move between
+  tasks, Enter renames (Enter saves, Escape cancels), x selects (shift
+  for a range). The grip picks a row up with Space; arrows move it; Space
+  drops; Escape cancels.
+- On a phone the row's fields wrap under its title, the grip and menu
+  stay visible, and the bulk bar sits at the bottom of the list.
+
+## Example
+
+```jsx
+// surfaces/tasks.jsx — server: load, hand over
+import { loadRows } from "../lib/data";
+import Tasks from "../components/Tasks";
+
+export default async function TasksSurface() {
+  const { rows, error } = await loadRows({ source: "public.tasks", orderBy: "created_at asc" });
+  const people = await loadRows({ source: "public.people" });
+  return <Tasks tasks={rows} people={people.rows} error={error} />;
+}
+```
+
+The list orders each group by `order` itself (Sort: Manual), so the read
+order only breaks ties.
+
+```jsx
+// components/Tasks.jsx — client: the list, the task sheet
+"use client";
+import { useState } from "react";
+import { deleteRow, insertRow, updateRow } from "../lib/actions";
+import { Sheet } from "./ui";
+import { TaskList } from "./blocks/task-list";
+import { changeWrites } from "./blocks/task-model";
+
+const STATUSES = [
+  { id: "todo", label: "To do", tone: "neutral" },
+  { id: "doing", label: "In progress", tone: "info" },
+  { id: "done", label: "Done", tone: "success", done: true },
+];
+
+const COLUMNS = ["id", "title", "status", "assignees", "due", "priority", "tags", "parentId", "order"];
+
+async function save(change) {
+  for (const w of changeWrites(change, { columns: COLUMNS, keepNewIds: false })) {
+    const r =
+      w.op === "insert" ? await insertRow({ source: "public.tasks", values: w.values, detail: w.values.title })
+      : w.op === "update" ? await updateRow({ source: "public.tasks", id: w.id, patch: w.patch })
+      : await deleteRow({ source: "public.tasks", id: w.id });
+    if (r?.ok === false) return r;
+  }
+  return { ok: true };
+}
+
+export default function Tasks({ tasks, people, error }) {
+  const [open, setOpen] = useState(null);
+  return (
+    <>
+      <TaskList tasks={tasks} statuses={STATUSES} people={people} onChange={save} onOpen={setOpen} error={error}
+        starters={[{ label: "Weekly planning", tasks: [{ title: "Review last week" }, { title: "Pick three priorities" }] }]} />
+      <Sheet open={Boolean(open)} onClose={() => setOpen(null)} title={open?.title}>{/* the task's fields */}</Sheet>
+    </>
+  );
+}
+```
+
+Grouped by person, only open work, showing the project:
+
+```jsx
+<TaskList tasks={tasks} people={people} projects={projects} onChange={save}
+  defaultView={{ groupBy: "assignees", hideDone: true, fields: ["due", "priority", "project"] }} />
+```
+
+## What it will not do
+
+- Edit a task's description, comments or custom fields in the row: open
+  it (`onOpen`) in a Sheet.
+- Drag a subtask out of its parent: use its menu ("Make it a task"), or
+  "Add subtask" on the new parent.
+- Nest deeper than three levels from the menu (the data may be deeper;
+  it is drawn).
+- Virtualise thousands of rows: filter, or page them in the surface.
+- Fetch: tasks come in as props; the page re-reads after a save.
+
+A list it cannot be is your own component in `components/`, built from
+task-model's parts, toolbar and drag primitives — not an edit to this
+block. Its files are fixed: `npm run check` refuses a change, and
+`makersclaw add task-list` restores them.

package/registry/blocks/task-list/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "task-list",
+  "title": "Task list",
+  "description": "The List view of work, like ClickUp's or Linear's: tasks under headings that fold (group by status, assignee, priority, project, due date or any field), a round check to complete each, the title edited in place, subtasks indented under their parent with their own fold, the fields you choose (assignees, due date, priority, tags, project, estimate) as inline pickers, a quick-add row at the end of every group, drag to reorder and to move between groups (saving the new status, assignee or due date), multi-select with a bulk bar (status, assign, due, priority, delete with undo), a toolbar with search, filter chips, group by, sort and fields, and friendly empty states with starter templates. One async onChange saves every change; failures roll back with a notice.",
+  "useWhen": "A screen that lists work to get done and moves it along: a team's tasks, a launch checklist, a sprint, a personal to-do list, onboarding steps, content to publish. Not for records that are not work (data-table), for stage columns side by side (board), or for dates on a grid (calendar).",
+  "tags": ["tasks", "task list", "to-do", "todo", "list view", "checklist", "clickup", "linear", "asana", "things", "subtasks", "group", "fold", "inline edit", "quick add", "drag", "reorder", "bulk", "select", "undo", "project management", "sprint"],
+  "exports": ["TaskList"],
+  "files": ["index.js", "task-list.jsx"],
+  "requires": ["task-model"]
+}

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

@@ -0,0 +1,134 @@
+"use client";
+
+// TaskList three ways — the gallery's and the smoke test's surface. Not
+// installed into apps: `makersclaw add task-list` lays index.js and
+// task-list.jsx only.
+//   Launch     a team's work grouped by status, subtasks, people, due
+//              dates, priorities; saves in memory (a switch makes them
+//              fail, to show the rollback); a row opens a sheet.
+//   Empty      no tasks yet: the empty state with starter templates.
+//   Read-only  the same list with no onChange, grouped by assignee.
+import { useState } from "react";
+import { Sheet, Switch, TabPanel, Tabs } from "../components/ui";
+import { TaskList } from "../components/blocks/task-list";
+import { applyChange, formatDay } 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" },
+  { id: "leo", name: "Leo Park" },
+  { id: "priya", name: "Priya Nair" },
+  { id: "sam", name: "Sam Okafor" },
+];
+
+const PROJECTS = [
+  { id: "site", name: "Website relaunch", hue: 1 },
+  { id: "q4", name: "Q4 campaign", hue: 3 },
+];
+
+const START = [
+  { id: "t1", title: "Finalise pricing page copy", status: "doing", assignees: ["maya"], due: "2026-09-23", priority: "high", project: "site", tags: ["copy"], estimate: 3, order: 1024 },
+  { id: "t2", title: "Pick the hero illustration", status: "doing", assignees: ["priya", "leo"], due: "2026-09-25", priority: "medium", project: "site", tags: ["design"], estimate: 4, order: 2048 },
+  { id: "t2a", title: "Shortlist three styles", status: "done", parentId: "t2", assignees: ["priya"], order: 1024 },
+  { id: "t2b", title: "Get sign-off from Sam", status: "todo", parentId: "t2", assignees: ["priya"], due: "2026-09-24", order: 2048 },
+  { id: "t3", title: "Write the launch email", status: "todo", assignees: ["sam"], due: "2026-09-29", priority: "high", project: "q4", tags: ["email", "copy"], estimate: 2, order: 1024 },
+  { id: "t4", title: "Book the product photo shoot", status: "todo", assignees: ["leo"], due: "2026-09-21", priority: "urgent", project: "q4", estimate: 1, order: 2048 },
+  { id: "t5", title: "Draft the customer story with Northwind", status: "todo", assignees: [], due: "2026-10-06", project: "q4", tags: ["story"], order: 3072 },
+  { id: "t6", title: "Set up redirects from the old site", status: "review", assignees: ["leo"], due: "2026-09-24", priority: "medium", project: "site", tags: ["seo"], estimate: 2, order: 1024 },
+  { id: "t7", title: "Accessibility pass on the new nav", status: "review", assignees: ["maya"], project: "site", estimate: 3, order: 2048 },
+  { id: "t8", title: "Choose the analytics events", status: "done", assignees: ["sam"], due: "2026-09-18", project: "site", order: 1024 },
+  { id: "t9", title: "Brief the paid social agency", status: "done", assignees: ["maya", "sam"], due: "2026-09-19", project: "q4", order: 2048 },
+];
+
+const STARTERS = [
+  {
+    label: "Product launch",
+    icon: "sparkles",
+    tasks: [
+      { title: "Agree the launch date", priority: "high" },
+      { title: "Write the announcement" },
+      { title: "Prepare the demo video" },
+      { title: "Line up three customer quotes" },
+    ],
+  },
+  {
+    label: "Weekly planning",
+    icon: "calendar",
+    tasks: [{ title: "Review last week" }, { title: "Pick three priorities" }, { title: "Clear the inbox" }],
+  },
+];
+
+function useTasks(start, failRef) {
+  const [tasks, setTasks] = useState(start);
+  const onChange = async (change) => {
+    await new Promise((r) => setTimeout(r, 350));
+    if (failRef?.current) return { ok: false, error: "the server did not answer" };
+    setTasks((all) => applyChange(all, change));
+    return { ok: true };
+  };
+  return [tasks, onChange];
+}
+
+export default function TaskListDemo() {
+  const [fail, setFail] = useState(false);
+  const failRef = { current: fail };
+  const [tasks, onChange] = useTasks(START, failRef);
+  const [none, onChangeNone] = useTasks([]);
+  const [open, setOpen] = useState(null);
+  const [tab, setTab] = useState("launch");
+  return (
+    <div className="grid grid-cols-1 gap-4">
+      <Tabs
+        aria-label="Task list examples"
+        value={tab}
+        onChange={setTab}
+        tabs={[
+          { key: "launch", label: "Launch" },
+          { key: "empty", label: "Empty" },
+          { key: "read", label: "Read-only" },
+        ]}
+      />
+      <TabPanel tab="launch" value={tab}>
+        <div className="grid grid-cols-1 gap-4">
+          <Switch id="task-list-fail" label="Make saves fail" checked={fail} onChange={(e) => setFail(e.target.checked)} />
+          <TaskList
+            label="Launch tasks"
+            tasks={tasks}
+            statuses={STATUSES}
+            people={PEOPLE}
+            projects={PROJECTS}
+            today={TODAY}
+            onChange={onChange}
+            onOpen={setOpen}
+            defaultView={{ groupBy: "status", fields: ["assignees", "due", "priority", "tags"] }}
+          />
+          <Sheet open={Boolean(open)} onClose={() => setOpen(null)} title={open?.title} description={open?.due ? `Due ${formatDay(open.due, TODAY)}` : "No due date"}>
+            <p className="text-sm text-muted-foreground">The task's own page goes here: its description, comments and history.</p>
+          </Sheet>
+        </div>
+      </TabPanel>
+      <TabPanel tab="empty" value={tab}>
+        <TaskList label="My tasks" tasks={none} statuses={STATUSES} people={PEOPLE} today={TODAY} onChange={onChangeNone} starters={STARTERS} />
+      </TabPanel>
+      <TabPanel tab="read" value={tab}>
+        <TaskList
+          label="Tasks by person"
+          tasks={tasks}
+          statuses={STATUSES}
+          people={PEOPLE}
+          projects={PROJECTS}
+          today={TODAY}
+          defaultView={{ groupBy: "assignees", fields: ["status", "due", "priority", "project"], hideDone: true }}
+        />
+      </TabPanel>
+    </div>
+  );
+}

package/registry/blocks/task-list/index.js

@@ -0,0 +1,5 @@
+// The TaskList block — `makersclaw add task-list` (it brings task-model).
+// Fixed: compose it through its props (README.md beside this file); a
+// list it cannot be is your own component in components/, built from
+// task-model's parts.
+export { TaskList } from "./task-list";