makersclaw 0.2.0 → 0.3.0

package/registry/blocks/transaction-list/transaction-list.jsx

@@ -0,0 +1,383 @@
+"use client";
+
+import { useEffect, useId, useState } from "react";
+import { Badge, Button, DatePicker, Empty, Icon, IconButton, Notice, Skeleton, cx, todayString } from "../../ui";
+
+// Money records as a plain list: one row per charge, payment or invoice,
+// optionally grouped by month, with a date-range filter, an export and a
+// per-row download. A list, not a table: no columns, no sorting — rows
+// come in in the order they should show.
+
+// Server and browser may differ in locale, time zone and even the day:
+// the first render uses fixed ones (en-US, UTC) so it matches the server's
+// HTML, then the reader's own take over.
+function useHydrated() {
+  const [hydrated, setHydrated] = useState(false);
+  useEffect(() => setHydrated(true), []);
+  return hydrated;
+}
+
+const formats = new Map();
+function money(amount, currency = "USD", locale) {
+  const key = `${locale ?? ""}|${currency}`;
+  let f = formats.get(key);
+  if (!f) {
+    try {
+      f = new Intl.NumberFormat(locale, { style: "currency", currency });
+    } catch {
+      f = new Intl.NumberFormat(locale, { style: "currency", currency: "USD" });
+    }
+    formats.set(key, f);
+  }
+  return f.format(Math.abs(Number(amount) || 0));
+}
+
+const DAY = /^\d{4}-\d{2}-\d{2}$/;
+const dayOf = (value) => (typeof value === "string" ? value.slice(0, 10) : "");
+
+// "Sep 21, 2026", or "Sep 21, 2026, 12:30 PM" when the row has a time.
+function when(value, locale, timeZone) {
+  if (!value) return "";
+  if (typeof value === "string" && DAY.test(value)) {
+    const [y, m, d] = value.split("-").map(Number);
+    return new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }).format(Date.UTC(y, m - 1, d));
+  }
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return String(value);
+  return new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short", timeZone }).format(d);
+}
+
+function monthLabel(key, locale) {
+  const [y, m] = key.split("-").map(Number);
+  if (!y || !m) return "Undated";
+  return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(Date.UTC(y, m - 1, 1));
+}
+
+const daysBetween = (from, to) => {
+  const a = Date.parse(`${from}T00:00:00Z`);
+  const b = Date.parse(`${to}T00:00:00Z`);
+  return Math.round((b - a) / 86400000);
+};
+
+// An invoice's badge: paid, void, or how long until (or since) it is due.
+function invoiceBadge(row, today) {
+  const status = String(row.status ?? "").toLowerCase();
+  if (status === "paid") return { tone: "success", text: "Paid" };
+  if (status === "void" || status === "cancelled") return { tone: "neutral", text: status === "void" ? "Void" : "Cancelled" };
+  if (status === "draft") return { tone: "neutral", text: "Draft" };
+  const due = dayOf(row.dueDate);
+  if (!DAY.test(due)) return status === "overdue" ? { tone: "danger", text: "Overdue" } : { tone: "info", text: "Open" };
+  const left = daysBetween(today, due);
+  if (left > 0) return { tone: "info", text: `Due in ${left} ${left === 1 ? "day" : "days"}` };
+  if (left === 0) return { tone: "warning", text: "Due today" };
+  return { tone: "danger", text: `${-left} ${left === -1 ? "day" : "days"} overdue` };
+}
+
+// A history row's direction and state.
+function flowOf(row) {
+  const status = String(row.status ?? "").toLowerCase();
+  const incoming = row.direction ? row.direction === "in" : Number(row.amount) >= 0;
+  if (status === "pending") return { key: "pending", icon: "clock", word: "Pending", incoming };
+  if (status === "failed" || status === "declined") return { key: "failed", icon: "x", word: "Failed", incoming };
+  if (status === "refunded") return { key: "refunded", icon: "refresh", word: "Refunded", incoming };
+  return { key: incoming ? "in" : "out", icon: incoming ? "arrow-down" : "arrow-up", word: incoming ? "Received" : "Paid", incoming };
+}
+
+const MARK = {
+  in: "text-success",
+  out: "text-foreground",
+  pending: "text-muted-foreground",
+  failed: "text-destructive",
+  refunded: "text-muted-foreground",
+};
+
+async function attempt(fn) {
+  try {
+    const res = await fn();
+    return res && res.ok === false ? res.error || "That did not work." : null;
+  } catch (e) {
+    return e?.message || "That did not work.";
+  }
+}
+
+function RowAction({ row, onDownload, downloadHref, label, onError }) {
+  const [busy, setBusy] = useState(false);
+  const href = downloadHref?.(row);
+  if (!href && !onDownload) return null;
+  async function run() {
+    setBusy(true);
+    onError(null);
+    onError(await attempt(() => onDownload(row)));
+    setBusy(false);
+  }
+  return href ? (
+    <Button iconOnly variant="quiet" href={href} aria-label={label} title={label} className="shrink-0">
+      <Icon name="download" size={18} />
+    </Button>
+  ) : (
+    <IconButton icon="download" label={label} onClick={run} loading={busy} />
+  );
+}
+
+function RowError({ error }) {
+  return error ? (
+    <p role="alert" className="basis-full text-xs text-destructive">
+      {error}
+    </p>
+  ) : null;
+}
+
+function HistoryRow({ row, currency, locale, timeZone, onOpen, onDownload, downloadHref }) {
+  const [error, setError] = useState(null);
+  const flow = flowOf(row);
+  const amount = money(row.amount, row.currency ?? currency, locale);
+  const sign = flow.key === "in" ? "+" : flow.key === "out" ? "−" : "";
+  const title = onOpen ? (
+    <Button variant="link" size="inherit" onClick={() => onOpen(row)} className="text-left font-medium">
+      {row.name}
+    </Button>
+  ) : (
+    <span className="font-medium">{row.name}</span>
+  );
+  return (
+    <li className="flex flex-wrap items-center gap-3 rounded-lg border border-border p-3 sm:gap-4 sm:p-4">
+      <span className={cx("grid size-10 shrink-0 place-items-center rounded-md border border-border bg-card", MARK[flow.key])}>
+        <Icon name={flow.icon} size={18} />
+        <span className="sr-only">{flow.word}</span>
+      </span>
+      <div className="grid min-w-0 flex-1 gap-0.5">
+        <p className="truncate">{title}</p>
+        <p className="truncate text-sm text-muted-foreground">
+          {row.description ? `${row.description} · ` : ""}
+          {when(row.date, locale, timeZone)}
+        </p>
+      </div>
+      <div className="grid shrink-0 justify-items-end gap-0.5 text-right">
+        <p
+          className={cx(
+            "text-sm font-semibold tabular-nums",
+            MARK[flow.key],
+            flow.key === "failed" && "line-through",
+          )}
+        >
+          {sign}
+          {amount}
+        </p>
+        {flow.key === "pending" || flow.key === "failed" || flow.key === "refunded" ? (
+          <p className="text-xs text-muted-foreground">{flow.word}</p>
+        ) : null}
+      </div>
+      <RowAction row={row} onDownload={onDownload} downloadHref={downloadHref} label={`Download ${row.name}`} onError={setError} />
+      <RowError error={error} />
+    </li>
+  );
+}
+
+function InvoiceRow({ row, currency, locale, timeZone, today, onOpen, onDownload, downloadHref }) {
+  const [error, setError] = useState(null);
+  const badge = invoiceBadge(row, today);
+  const name = row.number ?? row.name;
+  return (
+    <li className="flex flex-wrap items-center gap-x-4 gap-y-2 py-4">
+      <div className="grid min-w-0 basis-full gap-0.5 sm:flex-1 sm:basis-auto">
+        {onOpen ? (
+          <Button variant="link" size="inherit" onClick={() => onOpen(row)} className="justify-self-start text-left font-semibold">
+            {name}
+          </Button>
+        ) : (
+          <p className="truncate font-semibold">{name}</p>
+        )}
+        <p className="truncate text-sm text-muted-foreground">
+          {row.number && row.name ? `${row.name} · ` : ""}
+          {when(row.date, locale, timeZone)}
+        </p>
+      </div>
+      <Badge tone={badge.tone} variant="soft">
+        {badge.text}
+      </Badge>
+      <p className="ml-auto text-sm font-semibold tabular-nums">{money(row.amount, row.currency ?? currency, locale)}</p>
+      <RowAction row={row} onDownload={onDownload} downloadHref={downloadHref} label={`Download ${name}`} onError={setError} />
+      <RowError error={error} />
+    </li>
+  );
+}
+
+function Loading({ variant }) {
+  return (
+    <ul aria-busy="true" aria-label="Loading" className={cx("grid", variant === "history" ? "gap-2" : "divide-y divide-border")}>
+      {[0, 1, 2].map((i) => (
+        <li key={i} className={cx("flex items-center gap-3", variant === "history" ? "rounded-lg border border-border p-4" : "py-4")}>
+          {variant === "history" ? <Skeleton shape="rect" className="size-10" /> : null}
+          <div className="grid flex-1 gap-2">
+            <Skeleton className="w-1/3" />
+            <Skeleton className="w-1/4" />
+          </div>
+          <Skeleton className="w-16" />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function TransactionList({
+  rows,
+  variant = "history",
+  currency = "USD",
+  locale: localeProp,
+  groupBy,
+  title,
+  description,
+  loading = false,
+  error,
+  dateFilter = false,
+  range: rangeProp,
+  onRangeChange,
+  onExport,
+  exportLabel = "Export",
+  onOpen,
+  onDownload,
+  downloadHref,
+  emptyTitle,
+  emptyBody,
+  today,
+  className,
+}) {
+  const hydrated = useHydrated();
+  const locale = localeProp ?? (hydrated ? undefined : "en-US");
+  const timeZone = hydrated ? undefined : "UTC";
+  const invoices = variant === "invoices";
+  const headingId = useId();
+  const [ownRange, setOwnRange] = useState(null);
+  const [exporting, setExporting] = useState(false);
+  const [exportError, setExportError] = useState(null);
+  const range = rangeProp !== undefined ? rangeProp : ownRange;
+  const setRange = (next) => {
+    if (rangeProp === undefined) setOwnRange(next);
+    onRangeChange?.(next);
+  };
+  const now = today ?? (hydrated ? todayString() : new Date().toISOString().slice(0, 10));
+  const group = (groupBy ?? (invoices ? "none" : "month")) === "month";
+  const heading = title ?? (invoices ? "Invoices" : "Transactions");
+
+  const all = (rows ?? []).filter(Boolean);
+  const shown = range?.from
+    ? all.filter((r) => {
+        const d = dayOf(r.date);
+        return d >= range.from && d <= (range.to ?? range.from);
+      })
+    : all;
+
+  const groups = [];
+  if (group) {
+    const at = new Map();
+    for (const r of shown) {
+      const key = dayOf(r.date).slice(0, 7) || "none";
+      if (!at.has(key)) {
+        at.set(key, groups.length);
+        groups.push({ key, rows: [] });
+      }
+      groups[at.get(key)].rows.push(r);
+    }
+  } else groups.push({ key: "all", rows: shown });
+
+  async function runExport() {
+    setExporting(true);
+    setExportError(null);
+    setExportError(await attempt(() => onExport(shown, range)));
+    setExporting(false);
+  }
+
+  const rowProps = { currency, locale, timeZone, today: now, onOpen, onDownload, downloadHref };
+  const Row = invoices ? InvoiceRow : HistoryRow;
+  const listClass = invoices ? "divide-y divide-border" : "grid gap-2";
+
+  let body;
+  if (loading) body = <Loading variant={variant} />;
+  else if (!all.length)
+    body = (
+      <Empty
+        icon={invoices ? "receipt" : "dollar"}
+        title={emptyTitle ?? (invoices ? "No invoices yet" : "No transactions yet")}
+        body={emptyBody ?? (invoices ? "Invoices appear here once they are issued." : "Payments in and out appear here.")}
+      />
+    );
+  else if (!shown.length)
+    body = (
+      <Empty
+        icon="calendar"
+        title="Nothing in these dates"
+        body="Pick a wider range, or clear it to see everything."
+        action={
+          <Button variant="secondary" onClick={() => setRange(null)}>
+            Clear dates
+          </Button>
+        }
+      />
+    );
+  else
+    body = (
+      <div className="grid gap-5">
+        {groups.map((g) =>
+          group ? (
+            <section key={g.key} aria-label={g.key === "none" ? "Undated" : monthLabel(g.key, locale)} className="grid gap-2">
+              <h3 className="px-1 text-sm font-semibold text-muted-foreground">
+                {g.key === "none" ? "Undated" : monthLabel(g.key, locale)}
+              </h3>
+              <ul className={listClass}>
+                {g.rows.map((r) => (
+                  <Row key={r.id} row={r} {...rowProps} />
+                ))}
+              </ul>
+            </section>
+          ) : (
+            <ul key={g.key} aria-labelledby={headingId} className={listClass}>
+              {g.rows.map((r) => (
+                <Row key={r.id} row={r} {...rowProps} />
+              ))}
+            </ul>
+          ),
+        )}
+      </div>
+    );
+
+  return (
+    <section aria-labelledby={headingId} className={cx("grid gap-4 rounded-lg border border-border bg-card p-4 text-card-foreground sm:p-6", className)}>
+      <header className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h2 id={headingId} className="font-semibold">
+            {heading}
+          </h2>
+          {description ? <p className="mt-0.5 text-sm text-muted-foreground">{description}</p> : null}
+        </div>
+        {dateFilter || onExport ? (
+          <div className="flex w-full flex-wrap items-center gap-2 sm:w-auto">
+            {dateFilter ? (
+              <DatePicker
+                mode="range"
+                value={range}
+                onChange={setRange}
+                placeholder="All dates"
+                presets
+                size="sm"
+                label="Show dates"
+                className="min-w-0 flex-1 sm:w-56 sm:flex-none"
+              />
+            ) : null}
+            {onExport ? (
+              <Button size="sm" icon="download" onClick={runExport} loading={exporting} disabled={loading || !shown.length}>
+                {exportLabel}
+              </Button>
+            ) : null}
+          </div>
+        ) : null}
+      </header>
+      {error ? <Notice tone="danger">{error}</Notice> : null}
+      {exportError ? (
+        <Notice tone="danger" onDismiss={() => setExportError(null)}>
+          {exportError}
+        </Notice>
+      ) : null}
+      {body}
+    </section>
+  );
+}

package/registry/blocks/whiteboard/README.md

@@ -0,0 +1,179 @@
+# Whiteboard
+
+A full-page board to think on, friendly like Miro. A top bar holds the
+board's title (click it to rename), the save state, a Board / Text view
+switch, Export PNG and, when you give it `onShare`, a Share button. Under
+it is the canvas from `sketch-canvas`: the tool rail (a bottom bar on a
+phone), the toolbar that floats over a selection, zoom, undo and redo.
+
+Give it `onCreateTask` and a selected note or text becomes a task from
+the top bar; the note keeps a small **Task** badge from then on.
+
+An empty board offers three starting points: **Blank**, **Grid** (six
+titled areas, three by two) and **2×2 matrix** (impact against effort,
+four tinted quadrants with axes). The **Text view** lists every word on
+the board, grouped by frame — the reading of the board for a screen
+reader, and what you hand an agent.
+
+```jsx
+import { Whiteboard } from "../components/blocks/whiteboard";   // a Makersclaw app ("./blocks/whiteboard" from components/)
+import { Whiteboard } from "@/components/makersclaw/blocks/whiteboard";   // a shadcn project
+```
+
+It is a client component: render it from a `"use client"` component.
+`makersclaw add whiteboard` adds `sketch-canvas` with it (and its npm
+package, `@excalidraw/excalidraw`: run `npm install` after). The helpers
+for reading a board — `sketchToText`, `sketchItems`, `isSketchEmpty` —
+come from `sketch-canvas`.
+
+## The data
+
+A board is two things you store: its **title** (a string) and its
+**sketch** (plain JSON, a `jsonb` column) — the sketch format is
+`sketch-canvas`'s (its README, "The data"). Colours in a sketch are theme
+tokens, so a board repaints when the workspace theme changes.
+
+One table does it: `boards(id, title text, sketch jsonb, sketch_text text,
+updated_at)`. Keep `sketch_text` (`sketchToText(sketch)`) for search and
+for agents.
+
+## Props
+
+- `title` — the board's name, controlled. Change it when `onRename`
+  answers ok.
+- `defaultTitle` — the name, uncontrolled (default "Untitled board").
+- `onRename(title)` — `async`, returns `{ ok: true }` or
+  `{ ok: false, error? }`. Called when the reader renames the board (Enter
+  or leaving the field; Esc puts the old name back). While it runs the
+  new name shows; a failure keeps it and shows the error with Retry.
+  Without it the title still edits, in memory.
+- `value` — the sketch, controlled (see sketch-canvas: pass back exactly
+  what `onChange` gave you).
+- `defaultValue` — the sketch, uncontrolled. With neither, the board
+  starts empty and shows the templates.
+- `onChange(sketch)` — the whole sketch after an edit settles (debounced).
+- `onSave(sketch)` — `async`, `{ ok }`. Called with every settled edit and
+  on Cmd/Ctrl+S. The top bar shows "Saving…", "Saved", or the error with a
+  Retry. A throw counts as a failure.
+- `changeDelay` — ms of quiet before `onChange` / `onSave` (default 600).
+- `templates` — the starting points an empty board offers (default
+  `WHITEBOARD_TEMPLATES`: blank, grid, matrix). Each is
+  `{ id, label, description?, create(), preview?, icon? }`: `create()`
+  returns a sketch (or an element array) to lay on the board, or `null`
+  for "start blank". `preview` is a small node drawn in the tile (else an
+  `icon`, else a frame glyph; the three built-ins draw their own). `[]`
+  shows sketch-canvas's plain hint instead.
+- `onShare()` — shows a Share button (primary) that calls it: open your
+  `share-dialog`. Without it there is no Share button. `shareLabel`
+  renames it (default "Share").
+- `onExport(blob, { title, fileName })` — `async`, `{ ok }`: take the PNG
+  yourself (attach it, upload it). Without it, Export downloads
+  `<title>.png`. Either way a failure shows on the button.
+- `onCreateTask({ title, sourceIds })` — turns notes into tasks. With it,
+  selecting a note (a shape with words in it) or a text shows **Create
+  task** in the top bar: a small form with the words as the title, ready
+  to edit (Enter creates). Several selected notes make one task each.
+  `async`, return `{ ok: true, id? }` or `{ ok: false, error? }` (a throw
+  counts as failed). `sourceIds` are the board elements it came from (the
+  note and its words). While it runs the note shows "Creating…"; on
+  success the note keeps a **Task** badge (stored in the sketch, as
+  `customData.task: { id, title }` on those elements) and is not offered
+  again; a failure says so and leaves the note as it was. `taskLabel`
+  renames the button (default "Create task").
+- `onOpenTask({ id, title, sourceIds })` — makes each Task badge (and the
+  success toast) a link: open the task. Without it the badges only mark.
+- `onBack()` — shows a back arrow at the left of the top bar; `backLabel`
+  is its name (default "Back").
+- `meta` — a short node beside the title on wide screens ("Edited by Priya
+  Raman", "View only").
+- `readOnly` — `false` (default). `true`: the title is plain text, the
+  canvas pans and zooms but does not edit, no templates.
+- `defaultView` — `"board"` (default) or `"text"`: which view opens.
+- `canvasRef` — a ref (`useSketchCanvas()` from sketch-canvas) that
+  receives the canvas handle: `exportImage()`, `getScene()`,
+  `insertElements()`… (sketch-canvas README, "The handle").
+- `className` — layout: width, margin, height. The default height is
+  `h-[40rem]`; a height class of yours (`h-dvh` for a full page, `h-full`,
+  `flex-1`) replaces it. Never colour.
+
+### Templates
+
+`WHITEBOARD_TEMPLATES` is the default list. `gridSketch(opts)` and
+`matrixSketch(opts)` build the two drawn ones, so your own templates can
+reuse them:
+
+- `gridSketch({ columns = 3, rows = 2, width = 360, height = 260, gap = 48, names })`
+  — titled frames; `names` overrides "Area 1", "Area 2"…
+- `matrixSketch({ x = "Effort", y = "Impact", quadrants = ["Quick wins", "Big bets", "Fill-ins", "Not now"], size = 360 })`
+  — four locked, tinted quadrants (notes land on them without moving
+  them), two axes, the quadrant names as editable text.
+
+## Example
+
+A board page that saves itself:
+
+```jsx
+"use client";
+import { useState } from "react";
+import { Whiteboard } from "./blocks/whiteboard";
+import { sketchToText } from "./blocks/sketch-canvas";
+import { updateRow } from "../lib/actions";
+
+export default function BoardPage({ board, onShare }) {
+  const [title, setTitle] = useState(board.title);
+  return (
+    <Whiteboard
+      title={title}
+      onRename={async (next) => {
+        const res = await updateRow({ source: "public.boards", id: board.id, patch: { title: next } });
+        if (res.ok) setTitle(next);
+        return res;
+      }}
+      defaultValue={board.sketch}                       // jsonb, may be null
+      onSave={(sketch) => updateRow({ source: "public.boards", id: board.id, patch: { sketch, sketch_text: sketchToText(sketch) } })}
+      onShare={onShare}
+      className="h-dvh rounded-none border-0"
+    />
+  );
+}
+```
+
+Notes that become tasks (a `tasks` table of your own):
+
+```jsx
+<Whiteboard
+  defaultValue={board.sketch}
+  onSave={save}
+  onCreateTask={({ title, sourceIds }) => insertRow({ source: "public.tasks", values: { title, board_id: board.id, source_ids: sourceIds } })}
+  onOpenTask={(task) => router.push(`/tasks/${task.id}`)}
+/>
+```
+
+`insertRow` answers `{ ok, id }`; the id is what the badge keeps.
+
+A retro template of your own, beside the built-in ones:
+
+```jsx
+import { WHITEBOARD_TEMPLATES, gridSketch } from "./blocks/whiteboard";
+
+const templates = [
+  ...WHITEBOARD_TEMPLATES,
+  { id: "retro", label: "Retro", description: "Went well, to improve, actions", icon: "history",
+    create: () => gridSketch({ columns: 3, rows: 1, height: 520, names: ["Went well", "To improve", "Actions"] }) },
+];
+
+<Whiteboard templates={templates} onSave={save} />
+```
+
+## What it will not do
+
+- Collaborate live: no cursors of others, saves are last-write-wins (as
+  sketch-canvas).
+- Share by itself: `onShare` is yours — open `share-dialog`, copy a link.
+- Keep a list of boards: one board per component; the list is your page.
+- Turn on snap-to-grid from a template: the canvas menu has it.
+- Show a minimap (sketch-canvas has none).
+
+A board it cannot be is your own component in `components/` — not an edit
+to this block. Its files are fixed: `npm run check` refuses a change, and
+`makersclaw add whiteboard` restores them.

package/registry/blocks/whiteboard/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "whiteboard",
+  "title": "Whiteboard",
+  "description": "A full-page freeform whiteboard on sketch-canvas: a top bar with the board's title (click to rename), the save state (Saving…, Saved, or the error with Retry), a Board / Text view switch, Export PNG and an optional Share button; under it the Miro-style canvas (tool rail, floating toolbar, zoom, undo). An empty board offers starter templates — blank, a grid of titled areas, a 2×2 matrix — and the Text view lists every word on the board for a screen reader or an agent. With onCreateTask, a selected note or text becomes a task from the top bar (\"Create task\", editable title; several notes make one task each), and a small badge marks it on the board from then on. The sketch is plain JSON; saves are async callbacks answering { ok }.",
+  "useWhen": "A screen is one board to think on: a team whiteboard, a planning or prioritisation board, a place to sketch an idea and keep it with a record. Not for marking up a screenshot (annotate), sketching a UI to build (sketch-to-app), a structured board of cards and connectors (flow-canvas), or a kanban (board).",
+  "tags": ["whiteboard", "board", "sketch", "draw", "drawing", "canvas", "excalidraw", "miro", "brainstorm", "matrix", "2x2", "grid", "template", "export", "png", "share", "task", "create task", "action items"],
+  "exports": ["Whiteboard", "WHITEBOARD_TEMPLATES", "gridSketch", "matrixSketch"],
+  "files": ["index.js", "whiteboard.jsx", "templates.js"],
+  "requires": ["sketch-canvas"]
+}