makersclaw 0.1.0

package/README.md

@@ -0,0 +1,68 @@
+# makersclaw
+
+The Makersclaw app template, its kit and its blocks, as one command.
+
+```sh
+npx makersclaw init my-app          # lay the template
+npx makersclaw search "kanban"      # find a block by what it does
+npx makersclaw add board            # install it
+```
+
+Every app Makersclaw builds starts from this template: Next.js 15 (app
+router, JSX, server actions), Postgres, Tailwind v4 mapped to the
+workspace's theme, the data layer and write actions, the `_claw` platform
+client, and a kit of parts. The app designs its own screens on top.
+
+## Components come with the template; blocks come when a surface needs one
+
+- **Components** — the kit (`components/ui`: Button, Field, Select, Sheet,
+  Tabs, Menu, Notice, Icon…) and the parts bound to the data layer
+  (`components/parts`: RecordSwitcher, useFixture). `init` lays them into
+  every app. `add <component>` only restores one.
+- **Blocks** — the bigger pieces a surface is assembled from: a board, a
+  job panel, and more to come. No app has one until `add` puts it in
+  `components/blocks/<name>/`. `search` finds them by what they do.
+
+Everything this CLI lays is **fixed**: pinned by sha256 in
+`check/pins.json`, and `npm run check` refuses a change. An app composes
+the kit and the blocks through their props; what they cannot do is the
+app's own component in `components/`. Fixes reach apps through `update`.
+
+## Commands
+
+```
+npx makersclaw init [dir] [-t next]    lay the template: base files, the kit, the check
+npx makersclaw add <name...>           install blocks, or restore a kit component
+npx makersclaw search <words...>       find blocks and components by what they do
+npx makersclaw view <name>             one item: props, data, an example
+npx makersclaw list [--type block]     everything in this version
+npx makersclaw remove <block...>       uninstall blocks no file imports
+npx makersclaw diff                    what update would change in this app
+npx makersclaw update [--major]        lay this version's fixed files and blocks
+```
+
+`--cwd <dir>` names the app (default: the current folder); `--json` prints
+one object instead of text.
+
+An app records what it holds in two files: `makersclaw.json` (the template
+and version, and each block with the version it came from) and
+`check/pins.json` (the hash of every fixed file). `update` moves an app to
+this version's fixed files and blocks and never touches its own files —
+the shell, the surfaces, `components/*.jsx`. Within `0.x` a new minor is a
+new contract: `update` refuses it until `--major`, because screens written
+against the old one may need rebuilding.
+
+## This repository
+
+```
+templates/next/template.json   which files are fixed, docs, starters or merged; the kit's entries
+templates/next/files/          the app — what `init` lays
+registry/blocks/<name>/        block.json, the files `add` lays, README.md (what view/add print), demo.jsx
+src/                           the CLI (no dependencies)
+test/                          npm test · npm run check:regress · npm run test:app
+```
+
+- `npm test` — the CLI against scratch folders.
+- `npm run check:regress` — the template's `npm run check`, case by case.
+- `npm run test:app` — a real app: init, every block added with its demo as
+  a surface, `npm install`, `npm run check` (build, start, every surface).

package/bin/makersclaw.mjs

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+// npx makersclaw — see src/cli.mjs.
+import { main } from "../src/cli.mjs";
+
+try {
+  process.exitCode = main(process.argv.slice(2));
+} catch (error) {
+  process.stderr.write(`makersclaw: ${error?.stack ?? error}\n`);
+  process.exitCode = 2;
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "makersclaw",
+  "version": "0.1.0",
+  "description": "The Makersclaw app template, its kit and its blocks: init an app, add the blocks a surface needs, search the registry.",
+  "type": "module",
+  "bin": {
+    "makersclaw": "bin/makersclaw.mjs"
+  },
+  "files": [
+    "bin",
+    "src",
+    "templates",
+    "registry",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=18.17"
+  },
+  "scripts": {
+    "test": "node --test test/*.test.mjs",
+    "test:app": "node test/smoke-app.mjs",
+    "check:regress": "bash test/check-regress.sh"
+  },
+  "keywords": [
+    "makersclaw",
+    "template",
+    "nextjs",
+    "blocks",
+    "components",
+    "cli"
+  ],
+  "homepage": "https://makersclaw.com",
+  "license": "UNLICENSED"
+}

package/registry/blocks/board/README.md

@@ -0,0 +1,130 @@
+# Board
+
+Records as cards in columns, one column per stage. Drag a card to another
+column — with a mouse from anywhere on the card, on a phone from its grip,
+from the keyboard through the card's menu ("Move to …") — and the stage is
+saved. The move shows at once; when the write fails the card goes back and
+the board says why.
+
+```jsx
+import { Board } from "../components/blocks/board";   // "./blocks/board" from components/
+```
+
+It is a client component: render it from a `"use client"` component, and
+load the rows in the server surface (README §4).
+
+## The data
+
+One table, one column that holds the stage (`groupBy`). Each row is a card.
+`columns` is the stages in order — the values that column holds. A row
+whose stage is not in `columns` lands in a last "No stage" column, so no
+record goes missing; it can be dragged out of it, not into it.
+
+## Props
+
+- `rows` — the records. Pass `useFixture(rows, SAMPLE).rows` and the
+  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" }, …]`.
+- `source` — the table, e.g. `"public.deals"`: a move then saves itself
+  through `moveRow` (lib/actions.js — the activity row included).
+- `onMove(row, to, from)` — instead of `source`, when a move is more than
+  one column: return `{ ok: true }` or `{ ok: false, error }`. Without
+  `source` or `onMove` the board only shows; nothing can be moved.
+- `idColumn` — default `"id"`.
+- `titleOf(row)` — the card's title, default `row.title ?? row.name`. 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.
+- `metaOf(row)` — a plain muted line under the title, when that is all
+  the card needs (ignored when `renderDetails` is set).
+- `actionsOf(row)` — more menu items for a card, kit `Menu` shape:
+  `[{ label, onSelect, icon?, tone?: "danger" }]`. The "Move to" items
+  follow them.
+- `onCreate(title, column)` — an "Add" at every column's foot opens an
+  inline field; Enter calls this (insert the row with `insertRow`), the
+  field stays open for the next one. Return `{ ok: false, error }` to show
+  why it failed.
+- `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.
+- `label` — what the board is called to a screen reader.
+- `className` — layout around it (width, margin). Never colour.
+
+## Example
+
+```jsx
+// surfaces/pipeline.jsx — server: load, hand over
+import { loadRows } from "../lib/data";
+import Pipeline from "../components/Pipeline";
+
+export default async function PipelineSurface() {
+  const { rows, error } = await loadRows({ source: "public.deals", orderBy: "updated_at desc" });
+  return <Pipeline deals={rows} error={error} />;
+}
+```
+
+```jsx
+// components/Pipeline.jsx — client: the board, the card, the edit sheet
+"use client";
+import { useState } from "react";
+import { insertRow } from "../lib/actions";
+import { Badge, Notice } from "./ui";
+import { FixtureNotice, useFixture } from "./parts";
+import { Board } from "./blocks/board";
+
+const STAGES = [
+  { key: "lead", label: "Lead" },
+  { key: "call", label: "Call booked" },
+  { key: "proposal", label: "Proposal" },
+  { key: "won", label: "Won" },
+];
+const SAMPLE = [
+  { name: "Northwind", stage: "call", value: 12000, owner: "Maya" },
+  { name: "Acme Ltd", stage: "lead", value: 4000, owner: "Leon" },
+];
+
+export default function Pipeline({ deals, error }) {
+  const fixture = useFixture(deals, SAMPLE);
+  const [editing, setEditing] = useState(null);
+  return (
+    <div className="grid gap-4">
+      {error ? <Notice tone="danger">{error}</Notice> : null}
+      {fixture.isFixture ? <FixtureNotice onClear={fixture.clear} /> : null}
+      <Board
+        rows={fixture.rows}
+        groupBy="stage"
+        columns={STAGES}
+        source="public.deals"
+        titleOf={(d) => d.name}
+        limits={{ proposal: 5 }}
+        onCreate={(name, stage) => insertRow({ source: "public.deals", values: { name, stage }, detail: name })}
+        onOpen={setEditing}
+        renderDetails={(d) => (
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <span>{d.owner ?? "Unowned"}</span>
+            <Badge>{Number(d.value ?? 0).toLocaleString()}</Badge>
+          </div>
+        )}
+        label="Deals by stage"
+      />
+      {/* <Sheet open={Boolean(editing)} …> the record's fields </Sheet> */}
+    </div>
+  );
+}
+```
+
+## 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.
+
+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`
+refuses a change, and `makersclaw add board` restores them.

package/registry/blocks/board/block.json

@@ -0,0 +1,10 @@
+{
+  "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.",
+  "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"],
+  "exports": ["Board"],
+  "files": ["index.js", "board.jsx"],
+  "requires": []
+}

package/registry/blocks/board/board.jsx

@@ -0,0 +1,435 @@
+"use client";
+
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { moveRow } from "../../../lib/actions";
+import { isSample } from "../../parts";
+import { Button, 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
+// gets wrong when it is drawn by hand: pointer dragging that works with a
+// mouse and on a phone, a keyboard path (the menu), the move shown at
+// once and put back with a reason when the write fails, examples that
+// move on screen and save nothing, the count in every header, and cards
+// no stage claims kept in view instead of lost. The surface owns what a
+// card says under its title: renderDetails.
+//
+//   <Board rows={deals} groupBy="stage" columns={STAGES} source="public.deals"
+//          titleOf={(d) => d.name} renderDetails={(d) => <DealFacts deal={d} />}
+//          onOpen={setEditing} />
+//
+// README.md beside this file lists every prop.
+
+const OTHER = "__other";
+const DRAG_START_PX = { mouse: 5, pen: 6, touch: 8 };
+
+function humanize(key) {
+  const text = String(key ?? "").replace(/[_-]+/g, " ").trim();
+  return text ? text.charAt(0).toUpperCase() + text.slice(1) : "—";
+}
+
+function normalizeColumns(columns) {
+  return (columns ?? []).map((c) =>
+    typeof c === "string" || typeof c === "number"
+      ? { key: String(c), label: humanize(c) }
+      : { ...c, key: String(c.key), label: c.label ?? humanize(c.key) },
+  );
+}
+
+export function Board({
+  rows,
+  groupBy,
+  columns,
+  idColumn = "id",
+  source,
+  onMove,
+  renderDetails,
+  titleOf = (row) => row.title ?? row.name ?? String(row[idColumn] ?? ""),
+  metaOf,
+  onOpen,
+  actionsOf,
+  onCreate,
+  addLabel = "Add",
+  createPlaceholder = "Title, then Enter",
+  limits,
+  label = "Board",
+  emptyLabel = "Nothing here yet",
+  otherLabel = "No stage",
+  className,
+}) {
+  const uid = useId();
+  const boardRef = useRef(null);
+  const dragRef = useRef(null);
+  const suppressClick = useRef(false);
+  const [overrides, setOverrides] = useState(() => new Map());
+  const [drag, setDrag] = useState(null);
+  const [error, setError] = useState(null);
+  const [announce, setAnnounce] = useState("");
+  const [adding, setAdding] = useState(null);
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [portal, setPortal] = useState(null);
+
+  const movable = Boolean(onMove || source);
+  const list = rows ?? [];
+  const keyOf = (row) => String(row?.[idColumn]);
+  const cols = useMemo(() => normalizeColumns(columns), [columns]);
+  const known = useMemo(() => new Set(cols.map((c) => c.key)), [cols]);
+  const columnOf = (row) => {
+    const moved = overrides.get(keyOf(row));
+    const value = moved ?? (row?.[groupBy] == null ? "" : String(row[groupBy]));
+    return known.has(value) ? value : OTHER;
+  };
+
+  useEffect(() => setPortal(document.body), []);
+
+  // A move stays on screen until the rows the page re-reads carry it; then
+  // the override has nothing left to say.
+  useEffect(() => {
+    setOverrides((current) => {
+      if (current.size === 0) return current;
+      const next = new Map(current);
+      for (const [id, to] of current) {
+        const row = list.find((r) => keyOf(r) === id);
+        if (!row || String(row[groupBy]) === to) next.delete(id);
+      }
+      return next.size === current.size ? current : next;
+    });
+    // `list` changes identity with every read; that is the point.
+  }, [rows, groupBy]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const byColumn = useMemo(() => {
+    const out = new Map(cols.map((c) => [c.key, []]));
+    out.set(OTHER, []);
+    for (const row of list) out.get(columnOf(row)).push(row);
+    return out;
+  }, [list, cols, overrides]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  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);
+
+  async function move(row, to) {
+    const from = columnOf(row);
+    if (!movable || to === from || to === OTHER || !known.has(to)) return;
+    const id = keyOf(row);
+    const title = titleOf(row);
+    setError(null);
+    setOverrides((m) => new Map(m).set(id, to));
+    setAnnounce(`${title} moved to ${labelOf(to)}`);
+    // An example moves on screen and saves nothing: it is not a row.
+    if (isSample(row)) return;
+    let result;
+    try {
+      result = onMove
+        ? await onMove(row, to, from === OTHER ? null : from)
+        : await moveRow({ source, idColumn, id: row[idColumn], stateColumn: groupBy, to });
+    } catch (e) {
+      result = { ok: false, error: e?.message ?? String(e) };
+    }
+    if (result && result.ok === false) {
+      setOverrides((m) => {
+        const next = new Map(m);
+        next.delete(id);
+        return next;
+      });
+      setError(`“${title}” is back in ${labelOf(from)}: ${result.error ?? "the move was not saved"}`);
+      setAnnounce(`${title} could not be moved`);
+    }
+  }
+
+  // ---- pointer dragging ---------------------------------------------------
+  // A mouse drags a card from anywhere on it; touch and pen drag from the
+  // grip, so the column still scrolls under a finger.
+
+  function onPointerDown(e, row) {
+    if (!movable) return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    const onGrip = Boolean(e.target.closest?.("[data-board-grip]"));
+    if (e.pointerType !== "mouse" && !onGrip) return;
+    if (!onGrip && e.target.closest?.("input, textarea, select, a, [aria-haspopup], [role=menuitem]")) return;
+    // No text selection while a mouse drags; the click still lands.
+    if (e.pointerType === "mouse") e.preventDefault();
+    const card = e.currentTarget;
+    const rect = card.getBoundingClientRect();
+    dragRef.current = {
+      row,
+      id: keyOf(row),
+      from: columnOf(row),
+      pointerId: e.pointerId,
+      type: e.pointerType,
+      card,
+      startX: e.clientX,
+      startY: e.clientY,
+      offsetX: e.clientX - rect.left,
+      offsetY: e.clientY - rect.top,
+      width: rect.width,
+      active: false,
+      over: null,
+      x: e.clientX,
+      y: e.clientY,
+    };
+  }
+
+  function columnAt(x, y) {
+    const el = document.elementFromPoint(x, y);
+    const col = el?.closest?.("[data-board-column]");
+    return col && boardRef.current?.contains(col) ? col.getAttribute("data-board-column") : null;
+  }
+
+  function onPointerMove(e) {
+    const d = dragRef.current;
+    if (!d || e.pointerId !== d.pointerId) return;
+    if (!d.active) {
+      const far = Math.hypot(e.clientX - d.startX, e.clientY - d.startY) >= (DRAG_START_PX[d.type] ?? 5);
+      if (!far) return;
+      d.active = true;
+      try {
+        d.card.setPointerCapture(e.pointerId);
+      } catch {
+        // the pointer is already gone; the move below still works
+      }
+    }
+    e.preventDefault();
+    d.x = e.clientX;
+    d.y = e.clientY;
+    d.over = columnAt(e.clientX, e.clientY);
+    const board = boardRef.current;
+    if (board) {
+      const r = board.getBoundingClientRect();
+      if (e.clientX < r.left + 48) board.scrollBy({ left: -18 });
+      else if (e.clientX > r.right - 48) board.scrollBy({ left: 18 });
+    }
+    setDrag({ id: d.id, over: d.over, x: d.x, y: d.y, offsetX: d.offsetX, offsetY: d.offsetY, width: d.width, row: d.row });
+  }
+
+  function finish(e, drop) {
+    const d = dragRef.current;
+    if (!d || (e && e.pointerId !== d.pointerId)) return;
+    dragRef.current = null;
+    if (!d.active) return;
+    suppressClick.current = true;
+    setTimeout(() => {
+      suppressClick.current = false;
+    }, 0);
+    setDrag(null);
+    if (drop && d.over) move(d.row, d.over);
+  }
+
+  useEffect(() => {
+    if (!drag) return undefined;
+    const onKey = (e) => {
+      if (e.key === "Escape") finish(null, false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [drag]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function create(e, column) {
+    e.preventDefault();
+    const title = draft.trim();
+    if (!title || busy) return;
+    setBusy(true);
+    setError(null);
+    let result;
+    try {
+      result = await onCreate(title, column);
+    } catch (err) {
+      result = { ok: false, error: err?.message ?? String(err) };
+    }
+    setBusy(false);
+    if (result && result.ok === false) setError(`“${title}” was not added: ${result.error ?? "the write failed"}`);
+    else {
+      setDraft("");
+      setAnnounce(`${title} added to ${labelOf(column)}`);
+    }
+  }
+
+  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>
+        )}
+        {renderDetails ? (
+          <div className="mt-2">{renderDetails(row, { column: columnOf(row) })}</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];
+    return (
+      <div className="flex items-start gap-1">
+        {movable && !ghost ? (
+          <span
+            data-board-grip
+            aria-hidden="true"
+            className="-ml-1 mt-0.5 hidden h-8 w-6 shrink-0 cursor-grab items-center justify-center text-muted-foreground [@media(hover:none)]:flex"
+            style={{ touchAction: "none" }}
+          >
+            <Icon name="grip" size={16} />
+          </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}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cx("grid gap-3", className)}>
+      {error ? (
+        <Notice tone="danger" onDismiss={() => setError(null)}>
+          {error}
+        </Notice>
+      ) : null}
+      <div
+        ref={boardRef}
+        role="region"
+        aria-label={label}
+        tabIndex={0}
+        className="flex snap-x snap-mandatory gap-3 overflow-x-auto rounded-lg pb-2 outline-none focus-visible:ring-2 focus-visible:ring-ring sm:snap-none"
+      >
+        {shown.map((col) => {
+          const cards = byColumn.get(col.key) ?? [];
+          const limit = limits?.[col.key];
+          const over = typeof limit === "number" && cards.length > limit;
+          const target = drag && drag.over === col.key && !col.other && columnOf(drag.row) !== col.key;
+          const headingId = `${uid}-${col.key}`;
+          return (
+            <section
+              key={col.key}
+              data-board-column={col.other ? undefined : col.key}
+              aria-labelledby={headingId}
+              className={cx(
+                "flex max-h-[75dvh] w-[min(18rem,85vw)] shrink-0 snap-start flex-col rounded-lg border border-border bg-muted/50",
+                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">
+                  {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>
+              </header>
+              <ul className="flex min-h-16 flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2">
+                {cards.map((row) => {
+                  const id = keyOf(row);
+                  const lifted = drag?.id === id;
+                  return (
+                    <li
+                      key={id}
+                      data-board-card={id}
+                      onPointerDown={(e) => onPointerDown(e, row)}
+                      onPointerMove={onPointerMove}
+                      onPointerUp={(e) => finish(e, true)}
+                      onPointerCancel={(e) => finish(e, false)}
+                      onClickCapture={(e) => {
+                        if (suppressClick.current) {
+                          e.preventDefault();
+                          e.stopPropagation();
+                        }
+                      }}
+                      className={cx(
+                        "rounded-md border border-border bg-card p-3 text-card-foreground shadow-sm",
+                        movable && "sm:cursor-grab",
+                        lifted && "opacity-40",
+                      )}
+                    >
+                      {card(row)}
+                    </li>
+                  );
+                })}
+                {cards.length === 0 ? (
+                  <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}
+            </section>
+          );
+        })}
+      </div>
+      <p aria-live="polite" className="sr-only">
+        {announce}
+      </p>
+      {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"
+              style={{ left: drag.x - drag.offsetX, top: drag.y - drag.offsetY, width: drag.width }}
+            >
+              {card(drag.row, { ghost: true })}
+            </div>,
+            portal,
+          )
+        : null}
+    </div>
+  );
+}