makersclaw 0.1.0 → 0.3.0

package/registry/blocks/sketch-canvas/README.md

@@ -0,0 +1,280 @@
+# SketchCanvas
+
+A freeform drawing canvas in the workspace theme, friendly like Miro. A
+tool rail on the left (a bar along the bottom on a phone): select, pan,
+draw, rectangle, ellipse, diamond, arrow, line, text, image, eraser, frame
+— each with its one-key shortcut. Select something and a small toolbar
+floats above it: colour and fill from the theme's palette, stroke, text
+size, bring to front / send to back, duplicate, delete. Undo and redo sit
+bottom left, zoom and fit-to-screen bottom right, a menu top right
+(download PNG, snap to grid, shortcuts, clear). An empty canvas says how
+to start. Stamp tools place ready-made drawings with one click — the six
+UI wireframe pieces come built in.
+
+It is [Excalidraw](https://github.com/excalidraw/excalidraw) (MIT)
+underneath: its canvas, selection, text editing, history and shortcuts;
+our rail, toolbars, palette and empty state, in the kit. Excalidraw's own
+tool bar, properties panel, main menu, library, share / collaboration
+buttons, welcome screen and sidebars are hidden. The blocks built on this
+one — `whiteboard`, `annotate`, `sketch-to-app` — import it, never
+`@excalidraw/excalidraw`.
+
+```jsx
+import { SketchCanvas, sketchToText } from "../components/blocks/sketch-canvas";   // a Makersclaw app ("./blocks/sketch-canvas" from components/)
+import { SketchCanvas, sketchToText } from "@/components/makersclaw/blocks/sketch-canvas";   // a shadcn project
+```
+
+`SketchCanvas` is a client component: render it from a `"use client"`
+component. The helpers (`sketchToText`, `sketchItems`, `emptySketch`,
+`isSketchEmpty`, `toSketch`) are plain functions and work on the server.
+
+`makersclaw add sketch-canvas` adds `@excalidraw/excalidraw` (pinned,
+exact) to package.json: run `npm install` after. It loads with the page
+(no `import()`); the canvas mounts after the first render, and until then
+— on the server — the frame shows "Loading the canvas…", with the
+sketch's words for a screen reader.
+
+## The data
+
+A sketch is plain JSON. Store it as it comes out of `onChange` / `onSave`
+(a `jsonb` column).
+
+```js
+{
+  type: "sketch",
+  version: 1,
+  elements: [ /* Excalidraw elements, non-deleted, in paint order (first = back) */ ],
+  files: { "<fileId>": { id, mimeType: "image/png", dataURL: "data:image/png;base64,…", created } },
+  appState: { gridModeEnabled: false },
+}
+```
+
+- `elements` are Excalidraw's own element objects: `type` is `rectangle`,
+  `ellipse`, `diamond`, `arrow`, `line`, `freedraw`, `text`, `image` or
+  `frame`; each has `id`, `x`, `y`, `width`, `height`, `strokeColor`,
+  `backgroundColor`, `strokeWidth`, `roughness`, `groupIds`, `frameId`…
+  A `text` has `text`, `fontSize`, and `containerId` when it is the label
+  of a shape; a shape lists its label and arrows in `boundElements`.
+- **Colours are tokens.** Every colour picked in the canvas is a theme
+  token, and the element keeps it in `customData.tokens`:
+  `{ strokeColor: "primary", backgroundColor: "chart-2:soft" }`. The
+  concrete colour beside it (`strokeColor`) is what the token resolved to
+  when it was saved; on load, and whenever the theme or light/dark
+  changes, the canvas resolves every token again and repaints. A colour
+  with no token (pasted from elsewhere) stays as it is.
+  Tokens: `foreground`, `muted-foreground`, `primary`, `destructive`,
+  `warning`, `success`, `info`, `chart-2` … `chart-5` (ink), and for
+  fills also `none`, `muted` and `<slot>:soft` (the slot mixed into the
+  page background — a sticky-note tint). `STROKES` and `FILLS` list them
+  with labels.
+- **Stamps** mark what they place: every element of one stamp shares a
+  group and carries `customData: { stamp: "button", stampId }`.
+- `files` holds the images the elements show (only those). Images are
+  data URLs inside the JSON — keep them small, or store the file
+  elsewhere and keep the sketch light.
+- The `background` image is never in the value; it comes from the prop.
+- Written by hand (a starter template, a seed), an element may leave out
+  what Excalidraw can default (`version`, `seed`, `strokeWidth`,
+  `roughness`…) and give its colours only as tokens:
+  `{ id: "a", type: "rectangle", x: 0, y: 0, width: 160, height: 72, customData: { tokens: { strokeColor: "foreground", backgroundColor: "chart-2:soft" } } }`.
+  A text needs `text`, `fontSize` and a rough `width`/`height` (it is
+  re-measured). Or skip hand-written elements: insert skeletons through
+  the handle (below).
+- `sketchToText(sketch)` reads the words out for an agent; see Helpers.
+
+## Props
+
+- `value` — the sketch, controlled. A new `value` that differs from what
+  the canvas last sent replaces the drawing (loading another record) and
+  clears undo. Pass back exactly what `onChange` gave you and nothing
+  resets. Also takes a bare element array or Excalidraw's own export
+  (`{ elements, files, appState }`).
+- `defaultValue` — the starting sketch, uncontrolled. With neither, it
+  starts empty.
+- `onChange(sketch)` — the whole sketch, after an edit settles
+  (debounced by `changeDelay`). Not called for pan, zoom or selection.
+- `onSave(sketch)` — `async`, returns `{ ok: true }` or
+  `{ ok: false, error? }`. Called with the same sketch, right after
+  `onChange`, and on Cmd/Ctrl+S. The canvas shows "Saving…", "Saved",
+  or the error with a Retry. A throw counts as a failure.
+- `changeDelay` — ms of quiet before `onChange` / `onSave` (default 600).
+- `readOnly` — `false` (default). `true` shows the sketch to look at: pan
+  and zoom, no rail, no toolbar, no edits.
+- `background` — `{ src, width?, height? }`: an image laid at the back,
+  locked (it cannot be selected, moved, erased or deleted), top-left at
+  (0, 0). For marking up a screenshot (annotate). `src` is a data URL, or
+  a same-origin URL (a cross-origin one draws, but spoils `exportImage`).
+  Without `width`/`height` the image's own size is used. When it first
+  lands on an empty sketch, the view fits it.
+- `tools` — ids of the built-in tools to offer, in rail order:
+  `["select", "hand", "draw", "rectangle", "ellipse", "diamond", "arrow",
+  "line", "text", "image", "eraser", "frame"]` (all, the default). A tool
+  left out is also unreachable by its shortcut. `SKETCH_TOOLS` lists them
+  with labels, icons and keys.
+- `stamps` — stamp tools after the built-ins:
+  `[{ id, label, icon, create() }]`. `create()` returns element
+  skeletons (below) laid out from (0, 0); a click on the canvas places
+  them centred on the pointer (Enter: the middle of the view; Esc
+  cancels), grouped, selected. `WIREFRAME_STAMPS` are button, input, card,
+  nav bar, table and image placeholder.
+- `grid` — `true` (default): a dotted background that pans and zooms with
+  the drawing. `false`: plain.
+- `empty` — what an empty, editable canvas shows in its middle. Omit for
+  the built-in hint ("Start sketching…"); `false` for nothing; or a node
+  (starter templates: give its buttons `pointer-events-auto`, the layer
+  lets clicks through to the canvas). Shown while nothing is drawn and the
+  select or pan tool is active.
+- `actions` — nodes in the top-right corner, before the menu (a Share
+  button, a title chip).
+- `canvasRef` — a ref (`useSketchCanvas()`) that receives the handle.
+- `onReady(handle)` — once, when the canvas has mounted.
+- `label` — the accessible name of the canvas region (default "Sketch").
+- `className` — layout: width, margin, height. The default height is
+  `h-[32rem]`; a height class of yours (`h-dvh`, `h-full`, `min-h-…`,
+  `flex-1`) replaces it. Never colour.
+
+### The handle
+
+`canvasRef.current` (and `onReady`'s argument):
+
+- `getScene({ withBackground? })` — the sketch now (what `onChange`
+  sends), without waiting for the debounce.
+- `setScene(sketch)` — replace the drawing (undoable).
+- `insertElements(skeletons, opts?)` → the new element ids. Skeletons are
+  Excalidraw's `convertToExcalidrawElements` input:
+  `{ type: "rectangle" | "ellipse" | "diamond", x, y, width, height, label?: { text, fontSize?, textAlign? } }`,
+  `{ type: "text", x, y, text, fontSize? }`,
+  `{ type: "arrow" | "line", x, y, points: [[0, 0], [dx, dy]], start?: { id }, end?: { id } }`,
+  `{ type: "frame", children: [ids], name }`, `{ type: "image", fileId, x, y, width, height }`.
+  Colours may be token names (`strokeColor: "primary"`,
+  `backgroundColor: "warning:soft"`); a shape with no stroke gets
+  `foreground`; text is the system font. Options:
+  - `at` — `{ x, y }` in canvas coordinates; the skeletons' box is
+    centred there (or its top-left, with `anchor: "top-left"`). Default:
+    the middle of the view. `false`: keep the skeletons' own x/y.
+  - `group` — group them (move as one). `stamp: "<kind>"` groups too and
+    marks them for `sketchToText`.
+  - `customData` — merged into every new element's customData (annotate:
+    `{ note: 3 }`).
+  - `files` — `[{ id, dataURL, mimeType, created }]` to add first, for
+    image skeletons.
+  - `select` — `true` (default): select what was inserted.
+- `exportImage(opts?)` → `Promise<Blob>`, a PNG made by Excalidraw's own
+  export, in the theme's colours now, on the theme's background. Options:
+  `scale` (default 2), `padding` (px, default 16), `transparent: true`
+  (no background), `withBackground: false` (leave the background image
+  out), `onlySelected: true`.
+- `zoomToFit({ animate? })` — fit everything in view (Shift+1).
+- `setTool(id)` — a built-in tool id or a stamp id.
+- `undo()`, `redo()`, `clear()`, `focus()`.
+- `save()` — send `onChange` / `onSave` now.
+- `palette()` — token → the concrete colour it resolves to now.
+- `repaint()` — re-read the theme and repaint (the canvas already does
+  this when `data-theme` changes or a theme stylesheet loads).
+- `api` — Excalidraw's own imperative API, for anything else. Reaching for
+  it ties you to Excalidraw 0.18; prefer the methods above.
+
+### Helpers
+
+Plain functions; they take a sketch (or an element array) and never throw
+on a partial one:
+
+- `emptySketch()` — `{ type: "sketch", version: 1, elements: [], files: {}, appState: {} }`.
+- `isSketchEmpty(sketch)` — nothing drawn (deleted elements and the
+  background image do not count).
+- `toSketch(value)` — any accepted input → a sketch.
+- `sketchToText(sketch, { stamps = true })` — the words, for an agent or a
+  reader: one line per text or stamp in reading order (top to bottom,
+  then left to right), grouped under `# <frame name>` per frame (then
+  `# Outside frames`); a shape's label reads as its text; a stamp reads
+  `[button] Sign up`, an image `[image]`. `stamps: false` drops the
+  brackets. An empty sketch gives `""`.
+- `sketchItems(sketch)` — the same, structured: `[{ kind: "frame" | "stamp" | "text" | "image", id, text?, name?, stamp?, container?, frame, x, y, width, height }]`.
+- `STROKES`, `FILLS` — `[{ token, label }]`, the palette the toolbar offers.
+- `SKETCH_TOOLS`, `WIREFRAME_STAMPS` — as above.
+
+## Theming, colours and fonts
+
+- **Chrome.** Excalidraw's own CSS variables (its menus, dialogs, context
+  menu, hints) point at the workspace tokens (`theme.js`). Light or dark
+  follows the nearest `data-theme` (else `color-scheme`, else the OS).
+- **Canvas colours.** Excalidraw needs concrete colours; they are read at
+  run time from the tokens' CSS variables and never written in source.
+  Excalidraw's dark mode (which inverts the whole canvas with a filter) is
+  switched off: the tokens are already the dark scheme's.
+- **Fonts.** Every text is drawn in the device's own sans-serif
+  (Excalidraw's "Helvetica" family — Helvetica, Arial…), so no font is ever
+  fetched: Excalidraw's hand-drawn fonts would otherwise load from a
+  third-party CDN. Text pasted from another Excalidraw is moved into it.
+  The strokes keep their hand-drawn look (Sketchy / Clean in the toolbar).
+- **Stylesheet.** The block imports `@excalidraw/excalidraw/index.css`
+  from the package; the app's bundler ships it like any CSS.
+
+## Example
+
+A whiteboard that saves itself:
+
+```jsx
+"use client";
+import { SketchCanvas } from "./blocks/sketch-canvas";
+import { updateRow } from "../lib/actions";
+
+export default function Board({ board }) {
+  return (
+    <SketchCanvas
+      label={board.title}
+      defaultValue={board.sketch}                       // jsonb, may be null
+      onSave={(sketch) => updateRow({ source: "public.boards", id: board.id, patch: { sketch } })}
+      className="h-dvh rounded-none border-0"
+    />
+  );
+}
+```
+
+Marking up a screenshot, with numbered notes:
+
+```jsx
+const canvas = useSketchCanvas();
+const addNote = (n) =>
+  canvas.current?.insertElements(
+    [{ type: "ellipse", x: 0, y: 0, width: 32, height: 32, strokeColor: "destructive", backgroundColor: "destructive:soft", label: { text: String(n) } }],
+    { group: true, customData: { note: n } },
+  );
+
+<SketchCanvas canvasRef={canvas} background={{ src: screenshotDataUrl }} tools={["select", "hand", "draw", "rectangle", "arrow", "text", "eraser"]} onChange={setSketch} />
+const image = await canvas.current.exportImage();          // the screenshot with the marks, as a PNG
+```
+
+A wireframe for an agent:
+
+```jsx
+import { SketchCanvas, WIREFRAME_STAMPS, sketchToText, useSketchCanvas } from "./blocks/sketch-canvas";
+
+const canvas = useSketchCanvas();
+<SketchCanvas canvasRef={canvas} stamps={WIREFRAME_STAMPS} tools={["select", "hand", "draw", "rectangle", "arrow", "text", "eraser", "frame"]} onChange={setSketch} />
+
+const build = async () => onBuild({ image: await canvas.current.exportImage(), sketch, text: sketchToText(sketch), prompt });
+// sketchToText → "# Login\nWelcome back\n[input] Email\n[button] Sign in"
+```
+
+## What it will not do
+
+- Collaborate live (several cursors): Excalidraw's collaboration is a
+  server of its own, not wired here. Saves are last-write-wins.
+- Offer Excalidraw's library, share links, "text to diagram" / AI, or its
+  hand-drawn fonts. Its command palette (Cmd+/) and help dialog (?) still
+  open, themed; the palette may name actions that do nothing here.
+- Show a minimap.
+- Keep images out of the JSON: an image lives as a data URL in `files`.
+- Render on the server: the server shows the frame and the sketch's
+  words; the drawing appears when the page runs.
+- Pick an arbitrary colour: only the theme's tokens.
+
+A canvas 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 sketch-canvas` restores them.
+
+## Credits
+
+Excalidraw (https://github.com/excalidraw/excalidraw), MIT — installed from
+npm as a dependency, not copied here. See THIRD-PARTY-NOTICES.md.

package/registry/blocks/sketch-canvas/block.json

@@ -0,0 +1,13 @@
+{
+  "name": "sketch-canvas",
+  "title": "SketchCanvas",
+  "description": "A freeform drawing canvas (Excalidraw) in the workspace theme: a Miro-style tool rail (select, pan, draw, shapes, arrows, text, image, eraser, frames), a floating toolbar over the selection with colours from the theme's tokens, zoom and undo controls, a friendly empty state, and stamp tools that place ready-made drawings (UI wireframe pieces built in). Optional locked background image for annotating a screenshot. The sketch is plain JSON; helpers read its words for an agent, and the handle exports a PNG.",
+  "useWhen": "A screen needs freehand drawing: a whiteboard, marking up a screenshot, sketching a UI wireframe, a diagram drawn by hand. The whiteboard, annotate and sketch-to-app blocks are built on it. Not for structured boards of cards and connectors (flow-canvas), charts (chart) or a kanban (board).",
+  "tags": ["sketch", "draw", "drawing", "whiteboard", "canvas", "excalidraw", "diagram", "annotate", "markup", "wireframe", "freehand", "shapes", "arrows", "miro", "png"],
+  "exports": ["SketchCanvas", "useSketchCanvas", "SKETCH_TOOLS", "WIREFRAME_STAMPS", "STROKES", "FILLS", "emptySketch", "isSketchEmpty", "sketchToText", "sketchItems", "toSketch"],
+  "files": ["index.js", "sketch-canvas.jsx", "excalidraw.js", "ssr-shim.js", "ssr-shim-end.js", "theme.js", "palette.js", "sketch.js", "stamps.js"],
+  "requires": [],
+  "dependencies": {
+    "@excalidraw/excalidraw": "0.18.1"
+  }
+}

package/registry/blocks/sketch-canvas/demo.jsx

@@ -0,0 +1,159 @@
+"use client";
+
+// SketchCanvas three ways — the gallery's and the smoke test's surface. Not
+// installed into apps.
+//   Drawing     a small flow sketched by hand, saved through onSave (a
+//               switch makes the save fail), beside it what sketchToText
+//               reads and a PNG export through the handle.
+//   Wireframe   the UI stamps (button, input, card, nav, table, image) and a
+//               trimmed tool set — what sketch-to-app builds on.
+//   Empty       nothing drawn yet: the friendly first-run state; read-only
+//               behind a switch.
+import { useState } from "react";
+import { Button, Card, Switch, TabPanel, Tabs } from "../components/ui";
+import { SketchCanvas, WIREFRAME_STAMPS, sketchToText, useSketchCanvas } from "../components/blocks/sketch-canvas";
+
+// Written by hand: shapes, bound labels and arrows, colours as TOKENS only
+// (customData.tokens). The canvas resolves them in the workspace theme.
+const tok = (strokeColor, backgroundColor) => ({ tokens: { strokeColor, ...(backgroundColor ? { backgroundColor } : {}) } });
+const box = (id, x, fill, text, arrows = []) => [
+  {
+    id,
+    type: "rectangle",
+    x,
+    y: 0,
+    width: 168,
+    height: 72,
+    fillStyle: "solid",
+    roundness: { type: 3 },
+    boundElements: [{ type: "text", id: `${id}-label` }, ...arrows.map((a) => ({ type: "arrow", id: a }))],
+    customData: tok("foreground", fill),
+  },
+  {
+    id: `${id}-label`,
+    type: "text",
+    x: x + 20,
+    y: 24,
+    width: 128,
+    height: 24,
+    text,
+    fontSize: 20,
+    containerId: id,
+    textAlign: "center",
+    verticalAlign: "middle",
+    customData: tok("foreground"),
+  },
+];
+const arrow = (id, from, to, x) => ({
+  id,
+  type: "arrow",
+  x,
+  y: 36,
+  width: 64,
+  height: 0,
+  points: [
+    [0, 0],
+    [64, 0],
+  ],
+  startBinding: { elementId: from, focus: 0, gap: 6 },
+  endBinding: { elementId: to, focus: 0, gap: 6 },
+  endArrowhead: "arrow",
+  customData: tok("muted-foreground"),
+});
+
+const ONBOARDING_SKETCH = {
+  elements: [
+    { id: "title", type: "text", x: 0, y: -72, width: 300, height: 32, text: "Onboarding, first pass", fontSize: 28, customData: tok("foreground") },
+    ...box("signup", 0, "chart-2:soft", "Sign up", ["a1"]),
+    arrow("a1", "signup", "plan", 174),
+    ...box("plan", 244, "chart-3:soft", "Pick a plan", ["a1", "a2"]),
+    arrow("a2", "plan", "invite", 418),
+    ...box("invite", 488, "chart-4:soft", "Invite team", ["a2"]),
+    { id: "note", type: "text", x: 488, y: 104, width: 190, height: 24, text: "Skip this for solo founders?", fontSize: 16, customData: tok("destructive") },
+  ],
+};
+
+function DrawingDemo() {
+  const canvas = useSketchCanvas();
+  const [text, setText] = useState(() => sketchToText(ONBOARDING_SKETCH));
+  const [failSaves, setFailSaves] = useState(false);
+  const [png, setPng] = useState(null);
+  const save = async () => {
+    await new Promise((r) => setTimeout(r, 500));
+    return failSaves ? { ok: false, error: "The network dropped" } : { ok: true };
+  };
+  const exportPng = async () => {
+    const blob = await canvas.current?.exportImage();
+    setPng(blob ? `PNG, ${Math.max(1, Math.round(blob.size / 1024))} KB` : "Not ready yet");
+  };
+  return (
+    <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_18rem]">
+      <SketchCanvas
+        label="Onboarding flow sketch"
+        defaultValue={ONBOARDING_SKETCH}
+        onChange={(v) => setText(sketchToText(v))}
+        onSave={save}
+        canvasRef={canvas}
+        className="h-[34rem]"
+      />
+      <div className="grid content-start gap-4">
+        <Card title="Saving">
+          <Switch id="sketch-fail" label="Make saves fail" checked={failSaves} onChange={(e) => setFailSaves(e.target.checked)} />
+        </Card>
+        <Card title="What an agent reads" actions={<Button size="sm" icon="download" onClick={exportPng}>PNG</Button>}>
+          <pre className="whitespace-pre-wrap break-words font-mono text-xs">{text || "Nothing yet."}</pre>
+          {png ? <p className="mt-2 text-xs text-muted-foreground">{png}</p> : null}
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+function WireframeDemo() {
+  const [text, setText] = useState("");
+  return (
+    <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_18rem]">
+      <SketchCanvas
+        label="Screen wireframe"
+        stamps={WIREFRAME_STAMPS}
+        tools={["select", "hand", "draw", "rectangle", "arrow", "text", "eraser", "frame"]}
+        onChange={(v) => setText(sketchToText(v))}
+        className="h-[34rem]"
+      />
+      <Card title="What an agent reads">
+        <pre className="whitespace-pre-wrap break-words font-mono text-xs">{text || "Place a stamp from the rail: a button, an input, a card…"}</pre>
+      </Card>
+    </div>
+  );
+}
+
+function EmptyDemo() {
+  const [readOnly, setReadOnly] = useState(false);
+  return (
+    <div className="grid gap-3">
+      <Switch id="sketch-ro" label="Read-only" checked={readOnly} onChange={(e) => setReadOnly(e.target.checked)} />
+      <SketchCanvas label="Blank sketch" readOnly={readOnly} className="h-[28rem]" />
+    </div>
+  );
+}
+
+export default function SketchCanvasDemo() {
+  const [tab, setTab] = useState("drawing");
+  return (
+    <div className="grid gap-4">
+      <Tabs
+        aria-label="SketchCanvas variants"
+        value={tab}
+        onChange={setTab}
+        tabs={[
+          { key: "drawing", label: "Drawing" },
+          { key: "wireframe", label: "Wireframe stamps" },
+          { key: "empty", label: "Empty" },
+        ]}
+      />
+      <TabPanel tab={tab} value={tab}>
+        {tab === "drawing" ? <DrawingDemo /> : tab === "wireframe" ? <WireframeDemo /> : <EmptyDemo />}
+      </TabPanel>
+    </div>
+  );
+}

package/registry/blocks/sketch-canvas/excalidraw.js

@@ -0,0 +1,40 @@
+// The one door to Excalidraw (@excalidraw/excalidraw, MIT). Every file in
+// this block reaches it through here, and the blocks built on this one
+// reach it through SketchCanvas — never the package directly.
+//
+// The order of the imports below is the point: ssr-shim.js lays stand-ins
+// for the browser globals Excalidraw reads while its modules load (only
+// on the server, where they are missing), the package loads, and
+// ssr-shim-end.js takes them away again. Keep the three together and in
+// this order. Its stylesheet ships the same way doc-editor's does: an
+// import of the package's CSS, which the app's bundler picks up.
+import "@excalidraw/excalidraw/index.css";
+import "./ssr-shim";
+import {
+  CaptureUpdateAction,
+  Excalidraw,
+  FONT_FAMILY,
+  convertToExcalidrawElements,
+  exportToBlob,
+  getCommonBounds,
+  getSceneVersion,
+  newElementWith,
+  restoreElements,
+  sceneCoordsToViewportCoords,
+  viewportCoordsToSceneCoords,
+} from "@excalidraw/excalidraw";
+import "./ssr-shim-end";
+
+export {
+  CaptureUpdateAction,
+  Excalidraw,
+  FONT_FAMILY,
+  convertToExcalidrawElements,
+  exportToBlob,
+  getCommonBounds,
+  getSceneVersion,
+  newElementWith,
+  restoreElements,
+  sceneCoordsToViewportCoords,
+  viewportCoordsToSceneCoords,
+};

package/registry/blocks/sketch-canvas/index.js

@@ -0,0 +1,9 @@
+// The SketchCanvas block — `makersclaw add sketch-canvas`. Fixed: compose
+// it through its props (README.md beside this file). The helpers read a
+// sketch anywhere, the server included; the blocks built on this one
+// (whiteboard, annotate, sketch-to-app…) import it, never
+// @excalidraw/excalidraw directly.
+export { SketchCanvas, useSketchCanvas, SKETCH_TOOLS } from "./sketch-canvas";
+export { WIREFRAME_STAMPS } from "./stamps";
+export { STROKES, FILLS } from "./palette";
+export { emptySketch, isSketchEmpty, sketchToText, sketchItems, toSketch } from "./sketch";