makersclaw 0.2.0 → 0.3.1

package/registry/blocks/auth-form/demo.jsx

@@ -0,0 +1,131 @@
+"use client";
+
+// AuthForm, every variant — the gallery's and the smoke test's surface.
+// Not installed into apps: `makersclaw add auth-form` lays index.js and
+// auth-form.jsx only. Nothing signs anyone in: the callbacks wait a
+// moment and answer. Turn on "Fail the next submit" to see the error, or
+// type an email with "taken" in it.
+import { useState } from "react";
+import { Field, Icon, Select, Switch } from "../components/ui";
+import { AuthForm } from "../components/blocks/auth-form";
+
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const Logo = () => (
+  <span className="grid size-10 place-items-center rounded-md bg-primary text-primary-foreground">
+    <Icon name="layers" size={20} />
+  </span>
+);
+
+const ROLES = [
+  { value: "founder", label: "Founder" },
+  { value: "ops", label: "Operations" },
+  { value: "sales", label: "Sales" },
+  { value: "engineering", label: "Engineering" },
+];
+
+const TIPS = [
+  "Use a password manager, and a different password for every account.",
+  "Never share it, not even with someone from our team.",
+  "Turn on two-step sign-in in Security.",
+];
+
+// Each source file is one variant: its props, and the label in the switcher.
+const VARIANTS = [
+  { key: "basic", label: "Sign in — email and password", props: { mode: "sign-in" } },
+  { key: "google", label: "Sign in — then Google", props: { mode: "sign-in", providers: ["google"] } },
+  { key: "email-only", label: "Sign in — email only, Google", props: { mode: "sign-in", password: false, providers: ["google"], title: "Log in or create an account", description: null } },
+  { key: "providers-first", label: "Sign in — providers first", props: { mode: "sign-in", providers: ["github", "google"], providersFirst: true, title: "Sign in to Ledgerly" } },
+  { key: "magic", label: "Magic link, SSO and terms", props: { mode: "magic-link", providers: ["sso"], title: "Welcome back" } },
+  { key: "page", label: "Full page — remember for 30 days", props: { mode: "sign-in", layout: "page", providers: ["google", "apple", "microsoft"], providersFirst: true, remember: "Remember me for 30 days", title: "Welcome back", description: "Sign in to your dashboard, reports and settings." } },
+  { key: "card", label: "Card — reset link and remember me", props: { mode: "sign-in", remember: true, title: "Sign in to Ledgerly" } },
+  { key: "sign-up", label: "Sign up — confirm, news, terms", props: { mode: "sign-up", newsletter: true, acceptTerms: true, title: "Create a Ledgerly account" } },
+  {
+    key: "sign-up-fields",
+    label: "Sign up — more fields and rules",
+    props: {
+      mode: "sign-up",
+      providers: ["github"],
+      rules: [
+        { label: "At least 10 characters", test: (v) => v.length >= 10 },
+        { label: "A number", test: (v) => /\d/.test(v) },
+      ],
+      fields: [
+        { name: "firstName", label: "First name", autoComplete: "given-name", required: true, half: true },
+        { name: "lastName", label: "Last name", autoComplete: "family-name", required: true, half: true },
+        { name: "username", label: "Username", autoComplete: "username", hint: "Shown on your comments. You can change it later." },
+        { name: "role", label: "Your role", type: "select", options: ROLES },
+      ],
+    },
+  },
+  { key: "reset", label: "Reset — email a link", props: { mode: "reset" } },
+  { key: "change", label: "Change password — rules beside", props: { mode: "change-password", tips: TIPS } },
+];
+
+export default function AuthFormDemo() {
+  const [key, setKey] = useState("basic");
+  const [fail, setFail] = useState(false);
+  const [log, setLog] = useState(null);
+  const variant = VARIANTS.find((v) => v.key === key) ?? VARIANTS[0];
+
+  // The links switch variants in place, as an app's routes would.
+  const go = (to) => () => setKey(to);
+  const links = {
+    "sign-up": go("sign-up"),
+    "sign-in": go("basic"),
+    reset: go("reset"),
+    "magic-link": go("magic"),
+    terms: "#terms",
+    privacy: "#privacy",
+  };
+
+  async function onSubmit(values, mode) {
+    await wait(700);
+    const shown = { ...values };
+    for (const k of ["password", "currentPassword", "newPassword"]) if (k in shown) shown[k] = "••••••";
+    if (fail) {
+      setFail(false);
+      return { ok: false, error: mode === "change-password" ? "Your current password is not right." : "We could not reach the server. Check your connection and try again." };
+    }
+    if (values.email?.includes("taken")) return { ok: false, error: `An account already uses ${values.email}. Sign in instead.` };
+    setLog(`${mode}: ${JSON.stringify(shown)}`);
+    return { ok: true };
+  }
+
+  async function onProvider(id) {
+    await wait(600);
+    if (fail) {
+      setFail(false);
+      return { ok: false, error: `The ${id} window closed before you finished. Try again.` };
+    }
+    setLog(`provider: ${id}`);
+    return { ok: true };
+  }
+
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-end gap-x-6 gap-y-2">
+        <Field id="auth-variant" label="Variant" className="w-full sm:w-80">
+          <Select id="auth-variant" value={key} onChange={(e) => setKey(e.target.value)} options={VARIANTS.map((v) => ({ value: v.key, label: v.label }))} />
+        </Field>
+        <Switch id="auth-fail" label="Fail the next submit" checked={fail} onChange={(e) => setFail(e.target.checked)} />
+      </div>
+
+      <div className="grid justify-items-center rounded-lg bg-muted px-4 py-8">
+        <AuthForm
+          key={key}
+          {...variant.props}
+          logo={key === "change" ? undefined : <Logo />}
+          links={links}
+          onSubmit={onSubmit}
+          onProvider={onProvider}
+          onCancel={key === "change" ? () => setLog("change-password: cancelled") : undefined}
+        />
+      </div>
+
+      <p className="min-h-5 break-all text-xs text-muted-foreground" aria-live="polite">
+        {log ? `Sent — ${log}` : "Submit a form to see what the callback receives."}
+      </p>
+    </div>
+  );
+}

package/registry/blocks/auth-form/index.js

@@ -0,0 +1,3 @@
+// The AuthForm block — `makersclaw add auth-form`. Fixed: compose it
+// through its props (README.md beside this file).
+export { AuthForm, PASSWORD_RULES } from "./auth-form";

package/registry/blocks/board/README.md

@@ -27,7 +27,8 @@ record goes missing; it can be dragged out of it, not into it.
   example cards move on screen without saving (they are not rows).
 - `groupBy` — the column that holds the stage, e.g. `"stage"`.
 - `columns` — the stages in order: `["lead", "call", "won"]` (labels are
-  made from the keys) or `[{ key: "lead", label: "New lead" }, …]`.
+  made from the keys) or `[{ key: "lead", label: "New lead", icon? }, …]`.
+  `icon` is a kit `Icon` name, drawn before the stage's label.
 - `onMove(row, to, from)` — save the move; return `{ ok: true }` or
   `{ ok: false, error }` (a throw counts as failed). In a Makersclaw app it
   is one line over `moveRow` (lib/actions.js — the activity row included):
@@ -38,10 +39,13 @@ record goes missing; it can be dragged out of it, not into it.
   also names the card in its menu, in announcements and in errors.
 - `onOpen(row)` — the title becomes a button: open your `Sheet` to edit
   the record. The block draws that button; you never style one.
-- `renderDetails(row, { column })` — what the card says under its title:
-  the part of the board that is yours. Kit parts and tokens only.
+- `renderDetails(row, { column, layout })` — what the card says under its
+  title: the part of the board that is yours. Kit parts and tokens only.
+  In `layout="stacked"` it sits at the row's end instead, so keep it short
+  there (a badge, an avatar); `layout` tells you which.
 - `metaOf(row)` — a plain muted line under the title, when that is all
-  the card needs (ignored when `renderDetails` is set).
+  the card needs (ignored on cards when `renderDetails` is set; a stacked
+  row shows both).
 - `actionsOf(row)` — more menu items for a card, kit `Menu` shape:
   `[{ label, onSelect, icon?, tone?: "danger" }]`. The "Move to" items
   follow them.
@@ -52,6 +56,21 @@ record goes missing; it can be dragged out of it, not into it.
 - `addLabel` · `createPlaceholder` · `emptyLabel` · `otherLabel` — words.
 - `limits` — a work-in-progress limit per stage: `{ doing: 3 }` shows
   `4/3` in the header, in the warning tone, when it is exceeded.
+- `aggregate(rows, column)` — a figure beside each stage's count, from the
+  records in it: ``(list) => `${list.reduce((s, r) => s + r.points, 0)}pt` ``
+  → "13pt". A string or a node; `column` is null for "No stage".
+- `accentOf(row)` — the record's category as a colour on one edge of its
+  card: `1` … `5` (the chart tokens, `chart-1` … `chart-5`), or `null` for
+  none. A category, never a status: show what it means in words too (a
+  legend, or the type on the card).
+- `accentEdge` — `"top"` (default) or `"start"` (the left edge, in a
+  right-to-left page the right). Stacked rows always use the start edge.
+- `layout` — `"columns"` (default: side by side, dragged) or `"stacked"`:
+  the stages one under another as folding sections (icon, label, count,
+  chevron), each record a compact row. Rows move through their menu
+  ("Move to …"); nothing drags, so on a phone the page just scrolls.
+- `defaultOpen` — stacked: the stage keys open at first, e.g.
+  `["todo"]`. Default: every stage open.
 - `label` — what the board is called to a screen reader.
 - `className` — layout around it (width, margin). Never colour.
 
@@ -118,13 +137,44 @@ export default function Pipeline({ deals, error }) {
 }
 ```
 
+A sprint (icons, points per stage, a top edge by type) and a stacked list:
+
+```jsx
+const TYPE_HUE = { feature: 1, bug: 4, task: 2 };
+
+<Board
+  rows={stories}
+  groupBy="status"
+  columns={[{ key: "todo", label: "To do", icon: "inbox" }, { key: "doing", label: "In progress", icon: "zap" }, { key: "done", label: "Done", icon: "circle-check" }]}
+  onMove={(s, to) => moveRow({ source: "public.stories", id: s.id, stateColumn: "status", to })}
+  aggregate={(list) => `${list.reduce((n, s) => n + (s.points ?? 0), 0)}pt`}
+  accentOf={(s) => TYPE_HUE[s.type] ?? null}
+  renderDetails={(s) => <Badge>{s.points}pt</Badge>}
+  label="Stories by status"
+/>
+
+<Board
+  layout="stacked"
+  rows={chores}
+  groupBy="state"
+  columns={[{ key: "todo", label: "To do", icon: "inbox" }, { key: "done", label: "Done", icon: "circle-check" }]}
+  defaultOpen={["todo"]}
+  onMove={(c, to) => moveRow({ source: "public.chores", id: c.id, stateColumn: "state", to })}
+  metaOf={(c) => c.room}
+  renderDetails={(c) => <Badge tone={c.every === "daily" ? "warning" : "info"}>{c.every}</Badge>}
+  label="Chores by state"
+/>
+```
+
 ## What it will not do
 
 - Order cards inside a column: they keep the order of `rows` — sort in
   the surface's `loadRows`.
 - Create a stage: `columns` is the surface's; a new stage is a new entry.
 - Colour a column: stages are not status. Put a `Badge` on the card when a
-  stage means something the founder must see.
+  stage means something the founder must see. (`accentOf` colours a card
+  by its category, not its stage.)
+- Drag in `layout="stacked"`: rows move from their menu.
 
 A board it cannot be is your own component in `components/`, built from
 the kit — not an edit to this block. Its files are fixed: `npm run check`

package/registry/blocks/board/block.json

@@ -1,9 +1,9 @@
 {
   "name": "board",
   "title": "Board",
-  "description": "Records as cards in columns, one per stage; drag a card to another column (mouse, touch, or the card's menu from the keyboard) and the stage is saved.",
+  "description": "Records as cards in columns, one per stage; drag a card to another column (mouse, touch, or the card's menu from the keyboard) and the stage is saved. Optional column icons, a per-column total (\"13pt\"), a category colour on each card's edge, and a stacked layout of folding sections with compact rows.",
   "useWhen": "A process where each record sits in one stage and moves forward: a pipeline, a hiring funnel, a sprint, a content calendar by status, outreach by reply state. Not for records with no stages (a table) or items placed on a timeline.",
-  "tags": ["board", "kanban", "pipeline", "stages", "columns", "cards", "drag", "drop", "status", "workflow", "funnel"],
+  "tags": ["board", "kanban", "pipeline", "stages", "columns", "cards", "drag", "drop", "status", "workflow", "funnel", "sprint", "accent", "stacked", "collapsible"],
   "exports": ["Board"],
   "files": ["index.js", "board.jsx"],
   "requires": []

package/registry/blocks/board/board.jsx

@@ -3,7 +3,7 @@
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { isSample } from "../../parts";
-import { Button, Icon, Input, Menu, Notice, cx } from "../../ui";
+import { Button, Collapsible, Icon, Input, Menu, Notice, cx } from "../../ui";
 
 // Board — records as cards in columns, one column per stage, moved by
 // dragging or from the card's menu. The block owns the behaviour a board
@@ -21,9 +21,38 @@ import { Button, Icon, Input, Menu, Notice, cx } from "../../ui";
 //          titleOf={(d) => d.name} renderDetails={(d) => <DealFacts deal={d} />}
 //          onOpen={setEditing} />
 //
+// Opt-in: an icon per column (`columns[].icon`), a figure beside each
+// count (`aggregate(rows)` → "13pt"), a category's colour on each card's
+// edge (`accentOf(row)` → 1…5, `accentEdge` top | start), and
+// `layout="stacked"` — the stages as folding sections of compact rows.
+//
 // README.md beside this file lists every prop.
 
 const OTHER = "__other";
+
+// A card's accent: a category's colour on one edge, from the chart tokens
+// (chart-1…5), written out whole so Tailwind finds every class.
+const ACCENTS = {
+  top: {
+    1: "border-t-[3px] border-t-chart-1",
+    2: "border-t-[3px] border-t-chart-2",
+    3: "border-t-[3px] border-t-chart-3",
+    4: "border-t-[3px] border-t-chart-4",
+    5: "border-t-[3px] border-t-chart-5",
+  },
+  start: {
+    1: "border-s-[3px] border-s-chart-1",
+    2: "border-s-[3px] border-s-chart-2",
+    3: "border-s-[3px] border-s-chart-3",
+    4: "border-s-[3px] border-s-chart-4",
+    5: "border-s-[3px] border-s-chart-5",
+  },
+};
+
+function accentHue(value) {
+  const n = typeof value === "string" ? Number(value.replace(/^chart-/, "")) : value;
+  return Number.isInteger(n) && n >= 1 && n <= 5 ? n : null;
+}
 const DRAG_START_PX = { mouse: 5, pen: 6, touch: 8 };
 
 function humanize(key) {
@@ -54,6 +83,11 @@ export function Board({
   addLabel = "Add",
   createPlaceholder = "Title, then Enter",
   limits,
+  aggregate,
+  accentOf,
+  accentEdge = "top",
+  layout = "columns",
+  defaultOpen,
   label = "Board",
   emptyLabel = "Nothing here yet",
   otherLabel = "No stage",
@@ -107,6 +141,12 @@ export function Board({
     return out;
   }, [list, cols, overrides]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const stacked = layout === "stacked";
+  const accent = (row, edge = accentEdge) => {
+    if (!accentOf) return null;
+    const hue = accentHue(accentOf(row));
+    return hue ? (ACCENTS[edge] ?? ACCENTS.top)[hue] : null;
+  };
   const shown = byColumn.get(OTHER).length ? [...cols, { key: OTHER, label: otherLabel, other: true }] : cols;
   const labelOf = (key) => shown.find((c) => c.key === key)?.label ?? humanize(key);
 
@@ -244,34 +284,115 @@ export function Board({
     }
   }
 
+  // The "Add" at a stage's foot, and the inline field it opens.
+  function adder(col, headingId, pad = "px-2 pb-2") {
+    if (!onCreate || col.other) return null;
+    if (adding !== col.key) {
+      return (
+        <div className={pad}>
+          <Button
+            variant="quiet"
+            size="sm"
+            icon="plus"
+            align="start"
+            className="w-full"
+            onClick={() => {
+              setAdding(col.key);
+              setDraft("");
+            }}
+          >
+            {addLabel}
+          </Button>
+        </div>
+      );
+    }
+    return (
+      <form onSubmit={(e) => create(e, col.key)} className={pad}>
+        <label htmlFor={`${headingId}-new`} className="sr-only">
+          New in {col.label}
+        </label>
+        <Input
+          id={`${headingId}-new`}
+          autoFocus
+          value={draft}
+          disabled={busy}
+          placeholder={createPlaceholder}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => {
+            // Enter adds here, not through the form's implicit submit: a
+            // synthetic Enter (an agent testing the app) has no keypress to
+            // submit with. Never while an input method is composing a word.
+            if (e.key === "Enter" && !e.nativeEvent.isComposing) create(e, col.key);
+            else if (e.key === "Escape") {
+              setAdding(null);
+              setDraft("");
+            }
+          }}
+          onBlur={() => {
+            if (!draft.trim()) setAdding(null);
+          }}
+        />
+      </form>
+    );
+  }
+
+  function header(col, cards) {
+    const limit = limits?.[col.key];
+    const over = typeof limit === "number" && cards.length > limit;
+    return {
+      icon: col.icon ? <Icon name={col.icon} size={16} className="shrink-0 text-muted-foreground" /> : null,
+      total: aggregate ? (
+        <span data-nums className="shrink-0 text-xs text-muted-foreground">
+          {aggregate(cards, col.other ? null : col.key)}
+        </span>
+      ) : null,
+      count: (
+        <span
+          data-nums
+          className={cx("shrink-0 font-mono text-xs", over ? "font-semibold text-warning" : "text-muted-foreground")}
+          title={typeof limit === "number" ? `${cards.length} of a limit of ${limit}` : undefined}
+        >
+          {typeof limit === "number" ? `${cards.length}/${limit}` : cards.length}
+        </span>
+      ),
+    };
+  }
+
+  function moveItems(row) {
+    return movable
+      ? shown
+          .filter((c) => !c.other && c.key !== columnOf(row))
+          .map((c) => ({ label: `Move to ${c.label}`, icon: "arrow-right", onSelect: () => move(row, c.key) }))
+      : [];
+  }
+
+  function titleButton(row, title, extra) {
+    return onOpen ? (
+      <button
+        type="button"
+        onClick={() => onOpen(row)}
+        className={cx("block w-full rounded-sm text-left text-sm font-medium outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring", extra)}
+      >
+        {title}
+      </button>
+    ) : (
+      <p className={cx("text-sm font-medium", extra)}>{title}</p>
+    );
+  }
+
   function card(row, { ghost = false } = {}) {
     const title = titleOf(row);
     const body = (
       <>
-        {onOpen ? (
-          <button
-            type="button"
-            onClick={() => onOpen(row)}
-            className="block w-full rounded-sm text-left text-sm font-medium outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            {title}
-          </button>
-        ) : (
-          <p className="text-sm font-medium">{title}</p>
-        )}
+        {titleButton(row, title)}
         {renderDetails ? (
-          <div className="mt-2">{renderDetails(row, { column: columnOf(row) })}</div>
+          <div className="mt-2">{renderDetails(row, { column: columnOf(row), layout: "columns" })}</div>
         ) : metaOf ? (
           <div className="mt-1 text-xs text-muted-foreground">{metaOf(row)}</div>
         ) : null}
       </>
     );
-    const moveTo = movable
-      ? shown
-          .filter((c) => !c.other && c.key !== columnOf(row))
-          .map((c) => ({ label: `Move to ${c.label}`, icon: "arrow-right", onSelect: () => move(row, c.key) }))
-      : [];
-    const items = [...(actionsOf?.(row) ?? []), ...moveTo];
+    const items = [...(actionsOf?.(row) ?? []), ...moveItems(row)];
     return (
       <div className="flex items-start gap-1">
         {movable && !ghost ? (
@@ -285,18 +406,89 @@ export function Board({
           </span>
         ) : null}
         <div className="min-w-0 flex-1">{body}</div>
-        {!ghost ? <Menu items={items} label={`Actions for ${title}`} className="-mr-1 -mt-1 shrink-0" /> : null}
+        {!ghost ? <Menu items={items} label={`Actions for ${title}`} size="md" className="-mr-2 -mt-2 -mb-2 shrink-0" /> : null}
+      </div>
+    );
+  }
+
+  const notice = error ? (
+    <Notice tone="danger" onDismiss={() => setError(null)}>
+      {error}
+    </Notice>
+  ) : null;
+  const live = (
+    <p aria-live="polite" className="sr-only">
+      {announce}
+    </p>
+  );
+
+  // Stacked: the stages one under another, each a section that folds, the
+  // records as compact rows. Nothing drags here — a row moves through its
+  // menu ("Move to …"), the same path the keyboard takes on the columns —
+  // so a phone scrolls the page, never a board sideways.
+  if (stacked) {
+    const opens = defaultOpen == null ? null : new Set((Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen]).map(String));
+    return (
+      <div className={cx("grid gap-3", className)}>
+        {notice}
+        <div role="region" aria-label={label} className="overflow-hidden rounded-lg border border-border bg-card text-card-foreground">
+          {shown.map((col) => {
+            const rowsHere = byColumn.get(col.key) ?? [];
+            const head = header(col, rowsHere);
+            const headingId = `${uid}-${col.key}`;
+            return (
+              <Collapsible
+                key={col.key}
+                variant="flush"
+                defaultOpen={opens ? opens.has(col.key) : true}
+                title={
+                  <span className="flex min-w-0 items-center gap-2">
+                    {head.icon}
+                    <span id={headingId} className="truncate font-semibold">
+                      {col.label}
+                    </span>
+                  </span>
+                }
+                meta={
+                  <span className="flex items-center gap-2">
+                    {head.total}
+                    {head.count}
+                  </span>
+                }
+              >
+                <ul aria-labelledby={headingId} className={cx("-mx-4 divide-y divide-border border-t border-border", !onCreate || col.other ? "-mb-4" : "mb-2")}>
+                  {rowsHere.map((row) => {
+                    const id = keyOf(row);
+                    const title = titleOf(row);
+                    const items = [...(actionsOf?.(row) ?? []), ...moveItems(row)];
+                    return (
+                      <li key={id} data-board-card={id} className={cx("flex min-h-11 items-center gap-3 px-4 py-1.5", accent(row, "start"))}>
+                        <div className="min-w-0 flex-1">
+                          {titleButton(row, title, "truncate")}
+                          {metaOf ? <div className="truncate text-xs text-muted-foreground">{metaOf(row)}</div> : null}
+                        </div>
+                        {renderDetails ? (
+                          <div className="flex shrink-0 items-center gap-2">{renderDetails(row, { column: columnOf(row), layout: "stacked" })}</div>
+                        ) : null}
+                        <Menu items={items} label={`Actions for ${title}`} size="md" className="-mr-2 shrink-0" />
+                      </li>
+                    );
+                  })}
+                  {rowsHere.length === 0 ? <li className="px-4 py-3 text-xs text-muted-foreground">{emptyLabel}</li> : null}
+                </ul>
+                {adder(col, headingId, "-mx-2")}
+              </Collapsible>
+            );
+          })}
+        </div>
+        {live}
       </div>
     );
   }
 
   return (
     <div className={cx("grid gap-3", className)}>
-      {error ? (
-        <Notice tone="danger" onDismiss={() => setError(null)}>
-          {error}
-        </Notice>
-      ) : null}
+      {notice}
       <div
         ref={boardRef}
         role="region"
@@ -306,8 +498,7 @@ export function Board({
       >
         {shown.map((col) => {
           const cards = byColumn.get(col.key) ?? [];
-          const limit = limits?.[col.key];
-          const over = typeof limit === "number" && cards.length > limit;
+          const head = header(col, cards);
           const target = drag && drag.over === col.key && !col.other && columnOf(drag.row) !== col.key;
           const headingId = `${uid}-${col.key}`;
           return (
@@ -320,17 +511,13 @@ export function Board({
                 target && "bg-accent ring-2 ring-ring",
               )}
             >
-              <header className="flex min-h-11 items-center justify-between gap-2 px-3">
-                <h3 id={headingId} className="truncate text-sm font-semibold">
+              <header className="flex min-h-11 items-center gap-2 px-3">
+                {head.icon}
+                <h3 id={headingId} className="min-w-0 flex-1 truncate text-sm font-semibold">
                   {col.label}
                 </h3>
-                <span
-                  data-nums
-                  className={cx("shrink-0 font-mono text-xs", over ? "font-semibold text-warning" : "text-muted-foreground")}
-                  title={typeof limit === "number" ? `${cards.length} of a limit of ${limit}` : undefined}
-                >
-                  {typeof limit === "number" ? `${cards.length}/${limit}` : cards.length}
-                </span>
+                {head.total}
+                {head.count}
               </header>
               <ul className="flex min-h-16 flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2">
                 {cards.map((row) => {
@@ -352,6 +539,7 @@ export function Board({
                       }}
                       className={cx(
                         "rounded-md border border-border bg-card p-3 text-card-foreground shadow-sm",
+                        accent(row),
                         movable && "sm:cursor-grab",
                         lifted && "opacity-40",
                       )}
@@ -364,64 +552,20 @@ export function Board({
                   <li className="rounded-md border border-dashed border-border p-3 text-xs text-muted-foreground">{emptyLabel}</li>
                 ) : null}
               </ul>
-              {onCreate && !col.other ? (
-                adding === col.key ? (
-                  <form onSubmit={(e) => create(e, col.key)} className="px-2 pb-2">
-                    <label htmlFor={`${headingId}-new`} className="sr-only">
-                      New in {col.label}
-                    </label>
-                    <Input
-                      id={`${headingId}-new`}
-                      autoFocus
-                      value={draft}
-                      disabled={busy}
-                      placeholder={createPlaceholder}
-                      onChange={(e) => setDraft(e.target.value)}
-                      onKeyDown={(e) => {
-                        // Enter adds here, not through the form's implicit
-                        // submit: a synthetic Enter (an agent testing the
-                        // app) has no keypress to submit with. Never while
-                        // an input method is composing a word.
-                        if (e.key === "Enter" && !e.nativeEvent.isComposing) create(e, col.key);
-                        else if (e.key === "Escape") {
-                          setAdding(null);
-                          setDraft("");
-                        }
-                      }}
-                      onBlur={() => {
-                        if (!draft.trim()) setAdding(null);
-                      }}
-                    />
-                  </form>
-                ) : (
-                  <div className="px-2 pb-2">
-                    <Button
-                      variant="quiet"
-                      size="sm"
-                      icon="plus"
-                      className="w-full justify-start"
-                      onClick={() => {
-                        setAdding(col.key);
-                        setDraft("");
-                      }}
-                    >
-                      {addLabel}
-                    </Button>
-                  </div>
-                )
-              ) : null}
+              {adder(col, headingId)}
             </section>
           );
         })}
       </div>
-      <p aria-live="polite" className="sr-only">
-        {announce}
-      </p>
+      {live}
       {drag && portal
         ? createPortal(
             <div
               aria-hidden="true"
-              className="pointer-events-none fixed z-50 rotate-2 rounded-md border border-border bg-card p-3 text-card-foreground shadow-lg"
+              className={cx(
+                "pointer-events-none fixed z-50 rotate-2 rounded-md border border-border bg-card p-3 text-card-foreground shadow-lg",
+                accent(drag.row),
+              )}
               style={{ left: drag.x - drag.offsetX, top: drag.y - drag.offsetY, width: drag.width }}
             >
               {card(drag.row, { ghost: true })}