makersclaw 0.2.0 → 0.3.1

package/registry/blocks/whiteboard/demo.jsx

@@ -0,0 +1,169 @@
+"use client";
+
+// Whiteboard three ways — the gallery's and the smoke test's surface. Not
+// installed into apps.
+//   Planning     a 2×2 prioritisation board with notes on it, saved through
+//                onSave and onRename (a switch makes saves fail), Share
+//                and Export in the top bar, Text view beside the drawing.
+//                Select a note: "Create task" turns it into a task (listed
+//                beside the board); one note is a task already.
+//   New board    empty: the starter templates (blank, grid, 2×2 matrix).
+//   Read-only    the same board to look at, opened on its Text view.
+import { useState } from "react";
+import { Card, Switch, TabPanel, Tabs } from "../components/ui";
+import { Whiteboard, matrixSketch } from "../components/blocks/whiteboard";
+import { sketchToText } from "../components/blocks/sketch-canvas";
+
+// A note: a soft-filled box with its words bound inside. Colours are theme
+// TOKENS (customData.tokens); the canvas resolves them.
+const note = (id, x, y, fill, text, task) => [
+  {
+    id,
+    type: "rectangle",
+    x,
+    y,
+    width: 150,
+    height: 84,
+    fillStyle: "solid",
+    strokeWidth: 1,
+    roughness: 0,
+    roundness: { type: 3 },
+    boundElements: [{ type: "text", id: `${id}-t` }],
+    customData: { tokens: { strokeColor: "muted-foreground", backgroundColor: fill }, ...(task ? { task } : null) },
+  },
+  {
+    id: `${id}-t`,
+    type: "text",
+    x: x + 10,
+    y: y + 20,
+    width: 130,
+    height: 44,
+    text,
+    originalText: text,
+    fontSize: 16,
+    containerId: id,
+    textAlign: "center",
+    verticalAlign: "middle",
+    customData: { tokens: { strokeColor: "foreground" } },
+  },
+];
+
+const PLANNING_BOARD = {
+  elements: [
+    ...matrixSketch({ quadrants: ["Do this sprint", "Plan for Q1", "If time allows", "Park it"] }).elements,
+    ...note("n1", 40, 80, "chart-2:soft", "Annual billing toggle"),
+    ...note("n2", 200, 190, "chart-2:soft", "Fix invite email copy", { id: "task-12", title: "Fix invite email copy" }),
+    ...note("n3", 400, 80, "chart-3:soft", "SSO for teams"),
+    ...note("n4", 560, 200, "chart-3:soft", "Usage-based pricing"),
+    ...note("n5", 60, 440, "chart-4:soft", "Dark mode for PDFs"),
+    ...note("n6", 420, 460, "chart-5:soft", "Rewrite the importer"),
+  ],
+};
+
+function PlanningDemo() {
+  const [title, setTitle] = useState("Q4 roadmap — impact vs effort");
+  const [failSaves, setFailSaves] = useState(false);
+  const [text, setText] = useState(() => sketchToText(PLANNING_BOARD));
+  const [shared, setShared] = useState(0);
+  const [tasks, setTasks] = useState([{ id: "task-12", title: "Fix invite email copy" }]);
+  const [opened, setOpened] = useState(null);
+  const createTask = async ({ title }) => {
+    await wait();
+    if (failSaves) return { ok: false, error: "The task list didn't answer" };
+    const id = `task-${13 + tasks.length}`;
+    setTasks((t) => [...t, { id, title }]);
+    return { ok: true, id };
+  };
+  const wait = () => new Promise((r) => setTimeout(r, 500));
+  const save = async () => {
+    await wait();
+    return failSaves ? { ok: false, error: "The network dropped" } : { ok: true };
+  };
+  const rename = async (next) => {
+    await wait();
+    if (failSaves) return { ok: false, error: "Couldn't rename" };
+    setTitle(next);
+    return { ok: true };
+  };
+  return (
+    <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_18rem]">
+      <Whiteboard
+        title={title}
+        onRename={rename}
+        defaultValue={PLANNING_BOARD}
+        onChange={(v) => setText(sketchToText(v))}
+        onSave={save}
+        onShare={() => setShared((n) => n + 1)}
+        onCreateTask={createTask}
+        onOpenTask={(t) => setOpened(t.title)}
+        meta="Edited by Priya Raman"
+        onBack={() => {}}
+        backLabel="All boards"
+        className="h-[40rem]"
+      />
+      <div className="grid content-start gap-4">
+        <Card title="Saving">
+          <Switch id="wb-fail" label="Make saves fail" checked={failSaves} onChange={(e) => setFailSaves(e.target.checked)} />
+          {shared ? <p className="mt-2 text-xs text-muted-foreground">Share pressed {shared}×: the page opens its share dialog.</p> : null}
+        </Card>
+        <Card title="Tasks from the board" description="Select a note, then Create task.">
+          <ul className="grid gap-1.5 text-sm">
+            {tasks.map((t) => (
+              <li key={t.id} className="flex items-baseline gap-2">
+                <span className="text-xs text-muted-foreground tabular-nums">{t.id.replace("task-", "T-")}</span>
+                <span className="min-w-0 break-words">{t.title}</span>
+              </li>
+            ))}
+          </ul>
+          {opened ? <p className="mt-2 text-xs text-muted-foreground">Opened: {opened}</p> : null}
+        </Card>
+        <Card title="What an agent reads">
+          <pre className="whitespace-pre-wrap break-words font-mono text-xs">{text || "Nothing yet."}</pre>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+function NewBoardDemo() {
+  const [saved, setSaved] = useState(0);
+  return (
+    <div className="grid gap-2">
+      <Whiteboard
+        defaultTitle="Untitled board"
+        onSave={async () => {
+          setSaved((n) => n + 1);
+          return { ok: true };
+        }}
+        onShare={() => {}}
+        className="h-[36rem]"
+      />
+      <p className="text-xs text-muted-foreground">Saves so far: {saved}</p>
+    </div>
+  );
+}
+
+function ReadOnlyDemo() {
+  return <Whiteboard title="Q4 roadmap — impact vs effort" defaultValue={PLANNING_BOARD} readOnly defaultView="text" meta="View only" className="h-[34rem]" />;
+}
+
+export default function WhiteboardDemo() {
+  const [tab, setTab] = useState("planning");
+  return (
+    <div className="grid gap-4">
+      <Tabs
+        aria-label="Whiteboard variants"
+        value={tab}
+        onChange={setTab}
+        tabs={[
+          { key: "planning", label: "Planning board" },
+          { key: "new", label: "New board" },
+          { key: "readonly", label: "Read-only" },
+        ]}
+      />
+      <TabPanel tab={tab} value={tab}>
+        {tab === "planning" ? <PlanningDemo /> : tab === "new" ? <NewBoardDemo /> : <ReadOnlyDemo />}
+      </TabPanel>
+    </div>
+  );
+}

package/registry/blocks/whiteboard/index.js

@@ -0,0 +1,6 @@
+// The Whiteboard block — `makersclaw add whiteboard`. Fixed: compose it
+// through its props (README.md beside this file). Built on sketch-canvas
+// (the canvas, its tools and its helpers); the templates are plain
+// functions that run anywhere, the server included.
+export { Whiteboard } from "./whiteboard";
+export { WHITEBOARD_TEMPLATES, gridSketch, matrixSketch } from "./templates";

package/registry/blocks/whiteboard/templates.js

@@ -0,0 +1,150 @@
+// The whiteboard's starter templates: plain functions that return a sketch
+// (hand-written elements, colours as theme TOKENS in customData.tokens —
+// sketch-canvas resolves them at run time). No Excalidraw import: they run
+// anywhere, the server and a node test included.
+//
+// A template is { id, label, description, create() }. `create()` returns a
+// sketch (or an element array) to lay on the empty board, or null for
+// "start blank". The board replaces the empty scene with it (one undo
+// step) and fits it in view.
+
+const tok = (strokeColor, backgroundColor) => ({ tokens: { strokeColor, ...(backgroundColor ? { backgroundColor } : {}) } });
+
+/** A free text; Excalidraw re-measures it, so the size here is rough. */
+export function textEl(id, x, y, text, { fontSize = 20, ink = "foreground", frameId = null, locked = false } = {}) {
+  return {
+    id,
+    type: "text",
+    x,
+    y,
+    width: Math.ceil(String(text).length * fontSize * 0.56),
+    height: Math.ceil(fontSize * 1.25),
+    text,
+    originalText: text,
+    fontSize,
+    textAlign: "left",
+    verticalAlign: "top",
+    frameId,
+    locked,
+    customData: tok(ink),
+  };
+}
+
+/** A titled frame: moving it moves what is inside. */
+export function frameEl(id, x, y, width, height, name) {
+  return { id, type: "frame", x, y, width, height, name, customData: tok("muted-foreground") };
+}
+
+/** A plain box, clean-edged, filled with a token tint. */
+export function boxEl(id, x, y, width, height, { fill = "none", ink = "muted-foreground", locked = false } = {}) {
+  return {
+    id,
+    type: "rectangle",
+    x,
+    y,
+    width,
+    height,
+    fillStyle: "solid",
+    strokeWidth: 1,
+    roughness: 0,
+    roundness: null,
+    locked,
+    customData: tok(ink, fill === "none" ? undefined : fill),
+  };
+}
+
+/** A straight arrow from (x, y) by (dx, dy). */
+export function arrowEl(id, x, y, dx, dy, { ink = "muted-foreground", locked = false } = {}) {
+  return {
+    id,
+    type: "arrow",
+    x,
+    y,
+    width: Math.abs(dx),
+    height: Math.abs(dy),
+    points: [
+      [0, 0],
+      [dx, dy],
+    ],
+    strokeWidth: 2,
+    roughness: 0,
+    startArrowhead: null,
+    endArrowhead: "arrow",
+    locked,
+    customData: tok(ink),
+  };
+}
+
+/** Six titled frames, three by two: a board split into areas to fill. */
+export function gridSketch({ columns = 3, rows = 2, width = 360, height = 260, gap = 48, names } = {}) {
+  const els = [];
+  let n = 0;
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < columns; c++) {
+      n += 1;
+      const name = names?.[n - 1] ?? `Area ${n}`;
+      els.push(frameEl(`wb-grid-${n}`, c * (width + gap), r * (height + gap), width, height, name));
+    }
+  }
+  return { elements: els, appState: {} };
+}
+
+/** A 2×2 matrix: four tinted quadrants (locked, so notes land on them
+ *  without moving them), two axes and editable quadrant names. */
+export function matrixSketch({
+  x = "Effort",
+  y = "Impact",
+  quadrants = ["Quick wins", "Big bets", "Fill-ins", "Not now"],
+  size = 360,
+} = {}) {
+  const q = size;
+  const fills = ["success:soft", "info:soft", "muted", "warning:soft"];
+  const at = [
+    [0, 0],
+    [q, 0],
+    [0, q],
+    [q, q],
+  ];
+  const els = [];
+  at.forEach(([qx, qy], i) => {
+    els.push(boxEl(`wb-mx-q${i + 1}`, qx, qy, q, q, { fill: fills[i], locked: true }));
+  });
+  at.forEach(([qx, qy], i) => {
+    els.push(textEl(`wb-mx-t${i + 1}`, qx + 20, qy + 18, quadrants[i] ?? "", { fontSize: 24 }));
+  });
+  // The axes: up the left edge (y grows upward) and along the bottom.
+  els.push(arrowEl("wb-mx-ay", -28, 2 * q, 0, -2 * q, { locked: true }));
+  els.push(arrowEl("wb-mx-ax", 0, 2 * q + 28, 2 * q, 0, { locked: true }));
+  els.push(textEl("wb-mx-ly", -28, -44, `↑ ${y}`, { fontSize: 18, ink: "muted-foreground" }));
+  els.push(textEl("wb-mx-lx", 2 * q - 110, 2 * q + 44, `${x} →`, { fontSize: 18, ink: "muted-foreground" }));
+  els.push(textEl("wb-mx-lo", 0, 2 * q + 44, "Low", { fontSize: 14, ink: "muted-foreground" }));
+  return { elements: els, appState: {} };
+}
+
+/** The three the board offers by default. */
+export const WHITEBOARD_TEMPLATES = [
+  { id: "blank", label: "Blank", description: "An empty board to draw on", create: () => null },
+  { id: "grid", label: "Grid", description: "Six titled areas, three by two", create: () => gridSketch() },
+  { id: "matrix", label: "2×2 matrix", description: "Impact against effort, four quadrants", create: () => matrixSketch() },
+];
+
+/** A file name from a board title: "Q3 plan / draft" → "q3-plan-draft.png". */
+export function fileNameFor(title, ext = "png") {
+  const base = String(title ?? "")
+    .normalize("NFKD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 60);
+  return `${base || "whiteboard"}.${ext}`;
+}
+
+/** A template's output → a sketch-shaped value, or null for blank. */
+export function templateSketch(template) {
+  const made = typeof template?.create === "function" ? template.create() : null;
+  if (!made) return null;
+  const elements = Array.isArray(made) ? made : Array.isArray(made.elements) ? made.elements : [];
+  if (!elements.length) return null;
+  return { type: "sketch", version: 1, elements, files: made.files ?? {}, appState: made.appState ?? {} };
+}