makersclaw 0.1.0 → 0.3.0

package/registry/blocks/board/board.jsx

@@ -2,9 +2,8 @@
 
 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";
+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
@@ -13,15 +12,47 @@ import { Button, Icon, Input, Menu, Notice, cx } from "../../ui";
 // 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.
+// card says under its title (renderDetails) and how a move is saved
+// (onMove): the block imports nothing but React, the kit and the parts,
+// so it runs in a Makersclaw app and in any shadcn project alike.
 //
-//   <Board rows={deals} groupBy="stage" columns={STAGES} source="public.deals"
+//   <Board rows={deals} groupBy="stage" columns={STAGES}
+//          onMove={(d, to) => moveRow({ source: "public.deals", id: d.id, stateColumn: "stage", to })}
 //          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) {
@@ -42,7 +73,6 @@ export function Board({
   groupBy,
   columns,
   idColumn = "id",
-  source,
   onMove,
   renderDetails,
   titleOf = (row) => row.title ?? row.name ?? String(row[idColumn] ?? ""),
@@ -53,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",
@@ -71,7 +106,7 @@ export function Board({
   const [busy, setBusy] = useState(false);
   const [portal, setPortal] = useState(null);
 
-  const movable = Boolean(onMove || source);
+  const movable = typeof onMove === "function";
   const list = rows ?? [];
   const keyOf = (row) => String(row?.[idColumn]);
   const cols = useMemo(() => normalizeColumns(columns), [columns]);
@@ -106,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);
 
@@ -121,9 +162,7 @@ export function Board({
     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 });
+      result = await onMove(row, to, from === OTHER ? null : from);
     } catch (e) {
       result = { ok: false, error: e?.message ?? String(e) };
     }
@@ -245,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 ? (
@@ -286,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"
@@ -307,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 (
@@ -321,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) => {
@@ -353,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",
                       )}
@@ -365,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 })}

package/registry/blocks/board/demo.jsx

@@ -4,7 +4,7 @@
 // surface. Not installed into apps: `makersclaw add board` lays index.js
 // and board.jsx only.
 import { useState } from "react";
-import { Badge } from "../components/ui";
+import { Badge, Card } from "../components/ui";
 import { Board } from "../components/blocks/board";
 
 const STAGES = [
@@ -21,30 +21,109 @@ const START = [
   { id: 5, name: "Umbrella", stage: "paused", owner: "Leon", value: 3000 },
 ];
 
+// A sprint: an icon per column, points summed beside each count, the
+// story's type as the card's top edge.
+const SPRINT_STAGES = [
+  { key: "todo", label: "To do", icon: "inbox" },
+  { key: "doing", label: "In progress", icon: "zap" },
+  { key: "review", label: "Review", icon: "eye" },
+  { key: "done", label: "Done", icon: "circle-check" },
+];
+const TYPES = { feature: 1, bug: 4, task: 2 };
+const SPRINT = [
+  { id: "s1", title: "Invite teammates by email", status: "todo", type: "feature", points: 5 },
+  { id: "s2", title: "Export fails on empty rows", status: "todo", type: "bug", points: 2 },
+  { id: "s3", title: "Billing page copy", status: "doing", type: "task", points: 1 },
+  { id: "s4", title: "Saved filters", status: "doing", type: "feature", points: 8 },
+  { id: "s5", title: "Timezone drift in reports", status: "review", type: "bug", points: 3 },
+  { id: "s6", title: "Onboarding checklist", status: "done", type: "feature", points: 5 },
+];
+
+// Chores, stacked: the stages fold, each record is a row.
+const CHORE_STAGES = [
+  { key: "todo", label: "To do", icon: "inbox" },
+  { key: "doing", label: "Doing", icon: "clock" },
+  { key: "done", label: "Done", icon: "circle-check" },
+];
+const ROOMS = { Kitchen: 2, Bathroom: 3, Garden: 5 };
+const CHORES = [
+  { id: "c1", title: "Clean the fridge", state: "todo", room: "Kitchen", every: "Weekly" },
+  { id: "c2", title: "Scrub the shower", state: "todo", room: "Bathroom", every: "Weekly" },
+  { id: "c3", title: "Water the plants", state: "doing", room: "Garden", every: "Daily" },
+  { id: "c4", title: "Empty the dishwasher", state: "done", room: "Kitchen", every: "Daily" },
+];
+
+function useMoves(start, key) {
+  const [rows, setRows] = useState(start);
+  const onMove = async (row, to) => {
+    setRows((all) => all.map((r) => (r.id === row.id ? { ...r, [key]: to } : r)));
+    return { ok: true };
+  };
+  return [rows, setRows, onMove];
+}
+
 export default function BoardDemo() {
-  const [rows, setRows] = useState(START);
+  const [rows, setRows, onMove] = useMoves(START, "stage");
+  const [sprint, , moveStory] = useMoves(SPRINT, "status");
+  const [chores, setChores, moveChore] = useMoves(CHORES, "state");
   return (
-    <Board
-      rows={rows}
-      groupBy="stage"
-      columns={STAGES}
-      titleOf={(d) => d.name}
-      onMove={async (row, to) => {
-        setRows((all) => all.map((r) => (r.id === row.id ? { ...r, stage: to } : r)));
-        return { ok: true };
-      }}
-      onCreate={async (name, stage) => {
-        setRows((all) => [...all, { id: Date.now(), name, stage, owner: null, value: 0 }]);
-        return { ok: true };
-      }}
-      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>
-      )}
-      limits={{ call: 1 }}
-      label="Demo deals by stage"
-    />
+    <div className="grid gap-6">
+      <Board
+        rows={rows}
+        groupBy="stage"
+        columns={STAGES}
+        titleOf={(d) => d.name}
+        onMove={onMove}
+        onCreate={async (name, stage) => {
+          setRows((all) => [...all, { id: Date.now(), name, stage, owner: null, value: 0 }]);
+          return { ok: true };
+        }}
+        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>
+        )}
+        limits={{ call: 1 }}
+        label="Demo deals by stage"
+      />
+
+      <Card title="Sprint 18" description="Icons, points per column, a top edge by type">
+        <Board
+          rows={sprint}
+          groupBy="status"
+          columns={SPRINT_STAGES}
+          onMove={moveStory}
+          aggregate={(list) => `${list.reduce((s, r) => s + r.points, 0)}pt`}
+          accentOf={(r) => TYPES[r.type] ?? null}
+          renderDetails={(r) => (
+            <div className="flex items-center justify-between text-xs text-muted-foreground">
+              <span className="capitalize">{r.type}</span>
+              <Badge>{r.points}pt</Badge>
+            </div>
+          )}
+          label="Sprint 18 stories by status"
+        />
+      </Card>
+
+      <Card title="Chores" description="Stacked: stages fold, rows move from their menu">
+        <Board
+          layout="stacked"
+          rows={chores}
+          groupBy="state"
+          columns={CHORE_STAGES}
+          onMove={moveChore}
+          defaultOpen={["todo", "doing"]}
+          accentOf={(r) => ROOMS[r.room] ?? null}
+          metaOf={(r) => r.room}
+          renderDetails={(r) => <Badge tone={r.every === "Daily" ? "warning" : "info"}>{r.every}</Badge>}
+          onCreate={async (title, state) => {
+            setChores((all) => [...all, { id: `c${Date.now()}`, title, state, room: "Kitchen", every: "Weekly" }]);
+            return { ok: true };
+          }}
+          label="Chores by state"
+        />
+      </Card>
+    </div>
   );
 }