makersclaw 0.2.0 → 0.3.1

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

@@ -0,0 +1,179 @@
+// The sketch as data: what SketchCanvas takes and gives back, and the
+// helpers that read it. Plain functions of plain JSON — they never import
+// Excalidraw, so they run anywhere, the server included.
+//
+// A sketch is
+//   { type: "sketch", version: 1, elements: [...], files: {...}, appState: {...} }
+// where `elements` are Excalidraw's own element objects (non-deleted),
+// `files` holds the images they show (id → { id, mimeType, dataURL,
+// created }), and `appState` keeps only what a sketch should remember
+// ({ gridModeEnabled }). The locked background image (the `background`
+// prop) is never in it: the block lays that from the prop.
+
+export const SKETCH_VERSION = 1;
+
+/** Excalidraw's system-font family ("Helvetica" in its list): drawn with
+ *  the device's own sans (Helvetica, Arial…), never fetched. Every text the
+ *  block makes uses it; see README "Fonts". */
+export const SYSTEM_FONT = 2;
+
+/** The role the background image carries in customData. */
+export const BACKGROUND_ROLE = "background";
+
+export function emptySketch() {
+  return { type: "sketch", version: SKETCH_VERSION, elements: [], files: {}, appState: {} };
+}
+
+/** Anything a caller may hand us → a sketch: a sketch, a bare element
+ *  array, Excalidraw's own { elements, files, appState } export, or
+ *  nothing. */
+export function toSketch(value) {
+  if (!value) return emptySketch();
+  if (Array.isArray(value)) return { ...emptySketch(), elements: value };
+  if (typeof value !== "object") return emptySketch();
+  return {
+    type: "sketch",
+    version: SKETCH_VERSION,
+    elements: Array.isArray(value.elements) ? value.elements : [],
+    files: value.files && typeof value.files === "object" ? value.files : {},
+    appState: value.appState && typeof value.appState === "object" ? pickAppState(value.appState) : {},
+  };
+}
+
+/** The part of Excalidraw's appState a sketch keeps. */
+export function pickAppState(appState) {
+  const out = {};
+  if (typeof appState?.gridModeEnabled === "boolean") out.gridModeEnabled = appState.gridModeEnabled;
+  return out;
+}
+
+export const isBackground = (el) => el?.customData?.role === BACKGROUND_ROLE;
+
+/** The elements a reader cares about: not deleted, not the background. */
+export function liveElements(sketch) {
+  return toSketch(sketch).elements.filter((el) => el && !el.isDeleted && !isBackground(el));
+}
+
+/** Nothing drawn (the background alone counts as empty). */
+export function isSketchEmpty(sketch) {
+  return liveElements(sketch).length === 0;
+}
+
+/** The files the given elements show, and no others. */
+export function filesFor(elements, files) {
+  const out = {};
+  for (const el of elements ?? []) {
+    if (el?.type === "image" && el.fileId && files?.[el.fileId]) out[el.fileId] = files[el.fileId];
+  }
+  return out;
+}
+
+const centre = (b) => ({ x: b.x + b.width / 2, y: b.y + b.height / 2 });
+const union = (boxes) => {
+  const x1 = Math.min(...boxes.map((b) => b.x));
+  const y1 = Math.min(...boxes.map((b) => b.y));
+  const x2 = Math.max(...boxes.map((b) => b.x + b.width));
+  const y2 = Math.max(...boxes.map((b) => b.y + b.height));
+  return { x: x1, y: y1, width: x2 - x1, height: y2 - y1 };
+};
+const boxOf = (el) => ({ x: Math.min(el.x, el.x + el.width), y: Math.min(el.y, el.y + el.height), width: Math.abs(el.width), height: Math.abs(el.height) });
+const textOf = (el) => String(el.originalText ?? el.text ?? "").replace(/\s+/g, " ").trim();
+
+/** Reading order: rows top to bottom (items whose tops are within `band`
+ *  px share a row), then left to right. */
+export function readingOrder(items, band = 16) {
+  const sorted = [...items].sort((a, b) => a.y - b.y || a.x - b.x);
+  const rows = [];
+  for (const it of sorted) {
+    const row = rows.at(-1);
+    if (row && Math.abs(it.y - row[0].y) <= band) row.push(it);
+    else rows.push([it]);
+  }
+  return rows.flatMap((row) => row.sort((a, b) => a.x - b.x));
+}
+
+/**
+ * The sketch as a flat list of what it says, in reading order:
+ *   { kind: "frame", id, name, x, y, width, height }
+ *   { kind: "stamp", id, stamp: "button", text, frame, x, y, width, height }
+ *   { kind: "text",  id, text, container: "rectangle" | null, frame, x, y, width, height }
+ *   { kind: "image", id, frame, x, y, width, height }
+ * A stamp is one item however many elements it is made of; its text is
+ * the words inside it. A text bound to a shape takes the shape's box.
+ * Shapes and lines with no words are left out; `frame` is the id of the
+ * frame the item sits in (or null). Frames come first, then the rest.
+ */
+export function sketchItems(sketch) {
+  const els = liveElements(sketch);
+  const byId = new Map(els.map((el) => [el.id, el]));
+  const frameOf = (el) => el.frameId ?? (el.containerId ? byId.get(el.containerId)?.frameId : null) ?? null;
+  const stamps = new Map();
+  const loose = [];
+  for (const el of els) {
+    const cd = el.customData ?? {};
+    const container = el.containerId ? byId.get(el.containerId) : null;
+    const stampId = cd.stampId ?? container?.customData?.stampId;
+    if (stampId) {
+      const s = stamps.get(stampId) ?? { id: stampId, stamp: cd.stamp ?? container?.customData?.stamp ?? "stamp", els: [] };
+      s.els.push(el);
+      stamps.set(stampId, s);
+      continue;
+    }
+    if (el.type === "frame" || el.type === "magicframe") {
+      loose.push({ kind: "frame", id: el.id, name: String(el.name ?? "").trim() || "Frame", ...boxOf(el) });
+    } else if (el.type === "text") {
+      const t = textOf(el);
+      if (!t) continue;
+      const box = container ? boxOf(container) : boxOf(el);
+      loose.push({ kind: "text", id: el.id, text: t, container: container?.type ?? null, frame: frameOf(el), ...box });
+    } else if (el.type === "image") {
+      loose.push({ kind: "image", id: el.id, frame: frameOf(el), ...boxOf(el) });
+    }
+  }
+  const stampItems = [...stamps.values()].map((s) => {
+    const box = union(s.els.map(boxOf));
+    const words = readingOrder(s.els.filter((e) => e.type === "text").map((e) => ({ ...boxOf(e), t: textOf(e) })))
+      .map((w) => w.t)
+      .filter(Boolean);
+    return { kind: "stamp", id: s.id, stamp: s.stamp, text: words.join(" "), frame: s.els.map(frameOf).find(Boolean) ?? null, ...box };
+  });
+  const frames = readingOrder(loose.filter((i) => i.kind === "frame"));
+  const rest = readingOrder([...loose.filter((i) => i.kind !== "frame"), ...stampItems]);
+  // An item inside a frame's box with no frameId (dropped in before the
+  // frame was drawn round it) still belongs to it.
+  for (const it of rest) {
+    if (it.frame) continue;
+    const c = centre(it);
+    const f = frames.find((fr) => c.x >= fr.x && c.x <= fr.x + fr.width && c.y >= fr.y && c.y <= fr.y + fr.height);
+    it.frame = f ? f.id : null;
+  }
+  return [...frames, ...rest];
+}
+
+/**
+ * The sketch's words as plain text, for an agent or a screen reader: one
+ * line per item in reading order, grouped under "# <frame name>" for each
+ * frame; a stamp reads "[button] Sign up", an image "[image]". Items
+ * outside every frame come last (under "# Outside frames" when there are
+ * frames). An empty sketch gives "".
+ *
+ *   stamps   true (default): name the stamp kind in brackets
+ */
+export function sketchToText(sketch, { stamps = true } = {}) {
+  const items = sketchItems(sketch);
+  const frames = items.filter((i) => i.kind === "frame");
+  const rest = items.filter((i) => i.kind !== "frame");
+  const line = (it) => {
+    if (it.kind === "stamp") return stamps ? `[${it.stamp}]${it.text ? ` ${it.text}` : ""}` : it.text;
+    if (it.kind === "image") return stamps ? "[image]" : "";
+    return it.text;
+  };
+  const lines = [];
+  for (const f of frames) {
+    const inside = rest.filter((i) => i.frame === f.id).map(line).filter(Boolean);
+    lines.push(`# ${f.name}`, ...inside, "");
+  }
+  const outside = rest.filter((i) => !i.frame || !frames.some((f) => f.id === i.frame)).map(line).filter(Boolean);
+  if (outside.length) lines.push(...(frames.length ? ["# Outside frames"] : []), ...outside);
+  return lines.join("\n").trim();
+}

package/registry/blocks/sketch-canvas/ssr-shim-end.js

@@ -0,0 +1,6 @@
+// Server only: removes the stand-ins ssr-shim.js laid, right after
+// Excalidraw's modules have loaded (see ssr-shim.js). Does nothing in the
+// browser.
+import { removeShim } from "./ssr-shim";
+
+removeShim();

package/registry/blocks/sketch-canvas/ssr-shim.js

@@ -0,0 +1,45 @@
+// Server only: a stand-in for the few browser globals Excalidraw's modules
+// read WHILE THEY LOAD. See excalidraw.js for why this exists.
+//
+// Excalidraw 0.18 runs browser code at module level (window.location,
+// devicePixelRatio, document.createElement("img"), an Element.prototype
+// polyfill), so evaluating it on the server throws "window is not defined"
+// and the page fails to render — even though the component itself only
+// ever renders in the browser (the mount guard). The app is one static
+// bundle (no import(), no next/dynamic), so the module cannot be kept off
+// the server; instead it is let load against these stand-ins.
+//
+// The stand-ins live only for that load: excalidraw.js imports this file,
+// then @excalidraw/excalidraw, then ssr-shim-end.js, which removes them —
+// module evaluation is synchronous, so no other code runs in between. If
+// the load throws, the microtask below removes them anyway, so a global
+// `window` can never outlive it and confuse the rest of the server. In
+// the browser `window` exists and this file does nothing.
+const G = globalThis;
+const SET = [];
+
+function stand(name, value) {
+  if (typeof G[name] !== "undefined") return;
+  G[name] = value;
+  SET.push(name);
+}
+
+if (typeof window === "undefined") {
+  const element = () => ({ style: {}, dataset: {}, setAttribute() {}, appendChild() {}, getContext: () => ({}) });
+  stand("window", { location: { origin: "", href: "" }, devicePixelRatio: 1 });
+  stand("document", { createElement: element, documentElement: element(), head: element(), body: element() });
+  stand("devicePixelRatio", 1);
+  stand("Element", function Element() {});
+  stand("navigator", { platform: "", userAgent: "" });
+  G.__sketchCanvasShim = SET;
+  queueMicrotask(() => {
+    if (G.__sketchCanvasShim === SET) removeShim();
+  });
+}
+
+export function removeShim() {
+  const set = G.__sketchCanvasShim;
+  if (!set) return;
+  for (const name of set) delete G[name];
+  delete G.__sketchCanvasShim;
+}

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

@@ -0,0 +1,104 @@
+// Stamps: tools that place a small ready-made drawing with one click. A
+// stamp is { id, label, icon, create() }, where create() returns Excalidraw
+// element skeletons (the input of its convertToExcalidrawElements) laid
+// out from (0, 0). Colours are TOKEN names ("foreground", "primary:soft"),
+// resolved when the stamp lands; text is the system font. SketchCanvas
+// groups what a stamp places, so it moves as one, and marks every element
+// with customData { stamp: id, stampId } — sketchToText reads a stamp as
+// "[button] Sign up".
+//
+// WIREFRAME_STAMPS are the UI pieces a screen sketch is made of: button,
+// input, card, nav bar, table and image placeholder.
+import { SYSTEM_FONT } from "./sketch";
+
+const T = (text, x, y, more = {}) => ({ type: "text", x, y, text, fontSize: 16, fontFamily: SYSTEM_FONT, strokeColor: "foreground", ...more });
+const rect = (x, y, width, height, more = {}) => ({
+  type: "rectangle",
+  x,
+  y,
+  width,
+  height,
+  strokeColor: "foreground",
+  backgroundColor: "none",
+  fillStyle: "solid",
+  roundness: { type: 3 },
+  ...more,
+});
+const line = (x, y, dx, dy, more = {}) => ({
+  type: "line",
+  x,
+  y,
+  width: Math.abs(dx),
+  height: Math.abs(dy),
+  points: [
+    [0, 0],
+    [dx, dy],
+  ],
+  strokeColor: "muted-foreground",
+  ...more,
+});
+const label = (text, more = {}) => ({ text, fontSize: 16, fontFamily: SYSTEM_FONT, ...more });
+
+export const WIREFRAME_STAMPS = [
+  {
+    id: "button",
+    label: "Button",
+    icon: "zap",
+    create: () => [rect(0, 0, 132, 44, { backgroundColor: "primary:soft", label: label("Button") })],
+  },
+  {
+    id: "input",
+    label: "Input",
+    icon: "type",
+    create: () => [
+      T("Label", 0, 0, { fontSize: 14, strokeColor: "muted-foreground" }),
+      rect(0, 24, 260, 44, { strokeColor: "muted-foreground", label: label("Placeholder", { textAlign: "left", strokeColor: "muted-foreground" }) }),
+    ],
+  },
+  {
+    id: "card",
+    label: "Card",
+    icon: "file",
+    create: () => [
+      rect(0, 0, 280, 190),
+      T("Card title", 20, 18, { fontSize: 20 }),
+      line(20, 64, 220, 0),
+      line(20, 90, 170, 0),
+      rect(20, 128, 104, 40, { backgroundColor: "primary:soft", label: label("Action") }),
+    ],
+  },
+  {
+    id: "nav",
+    label: "Nav bar",
+    icon: "menu",
+    create: () => [
+      rect(0, 0, 680, 60, { backgroundColor: "muted", roundness: null }),
+      T("Logo", 24, 17, { fontSize: 20 }),
+      T("Home", 400, 20),
+      T("Pricing", 478, 20),
+      T("About", 568, 20),
+    ],
+  },
+  {
+    id: "table",
+    label: "Table",
+    icon: "grid",
+    create: () => [
+      rect(0, 0, 450, 176, { roundness: null }),
+      rect(0, 0, 450, 44, { backgroundColor: "muted", roundness: null }),
+      T("Name", 14, 12),
+      T("Status", 164, 12),
+      T("Amount", 314, 12),
+      line(0, 88, 450, 0),
+      line(0, 132, 450, 0),
+      line(150, 0, 0, 176),
+      line(300, 0, 0, 176),
+    ],
+  },
+  {
+    id: "image",
+    label: "Image",
+    icon: "image",
+    create: () => [rect(0, 0, 240, 160, { strokeColor: "muted-foreground", roundness: null }), line(0, 0, 240, 160), line(0, 160, 240, -160)],
+  },
+];

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

@@ -0,0 +1,131 @@
+// Excalidraw in the workspace theme, and trimmed — the one place its look
+// is mapped. Like doc-editor's theme.js for BlockNote.
+//
+// Excalidraw paints its chrome (menus, dialogs, the context menu, the
+// text editor) from CSS variables its stylesheet sets on `.excalidraw`
+// with its own violet and greys. Each one is pointed at a token here, as
+// Tailwind arbitrary properties aimed at that element from our wrapper.
+// Every class ends in `!`: Excalidraw's stylesheet is unlayered, and an
+// unlayered rule beats any Tailwind utility (those live in @layer
+// utilities) whatever its specificity; `!important` inside a layer is the
+// one thing that outranks it.
+//
+// Two of these carry more weight than the rest:
+//   --theme-filter: none   Excalidraw's dark mode draws the canvas light
+//                          and flips it with invert(93%) hue-rotate(180deg).
+//                          Our colours are already the dark scheme's (they
+//                          are resolved from the tokens in effect), so the
+//                          filter would invert them back. Off.
+//   --color-selection      read by Excalidraw's renderer for the selection
+//                          box; the component sets --sketch-selection to
+//                          the resolved primary (a canvas needs a concrete
+//                          colour, not a var()).
+//
+// Name clash: Excalidraw ALSO names its own variables --color-primary and
+// --color-muted, on `.excalidraw`, so var(--color-primary) read there is
+// its violet (and setting it to itself is a cycle). ROOT_VARS copies our
+// two onto the wrapper as --sketch-primary / --sketch-muted, and the
+// mapping reads those. The other tokens it uses have no Excalidraw twin.
+//
+// The TRIM list hides the parts of Excalidraw's UI the block replaces
+// or does not want: its tool bar (the rail is ours), its properties panel
+// (the context toolbar is ours, with the theme's palette), its main menu,
+// its library / share / collaboration corner, its zoom and undo footer
+// (ours), its mobile bars, and every sidebar (library, search). The hint
+// line under the old tool bar stays ("Click and drag…").
+export const ROOT_VARS = "[--sketch-primary:var(--color-primary)] [--sketch-muted:var(--color-muted)]";
+
+export const THEME = [
+  // surfaces and text
+  "[&_.excalidraw]:[--theme-filter:none]!",
+  "[&_.excalidraw]:[--color-selection:var(--sketch-selection)]!",
+  "[&_.excalidraw]:[--ui-font:var(--theme-font-sans)]!",
+  "[&_.excalidraw]:[--default-bg-color:var(--color-background)]!",
+  "[&_.excalidraw]:[--island-bg-color:var(--color-popover)]!",
+  "[&_.excalidraw]:[--popup-bg-color:var(--color-popover)]!",
+  "[&_.excalidraw]:[--popup-secondary-bg-color:var(--sketch-muted)]!",
+  "[&_.excalidraw]:[--popup-text-color:var(--color-popover-foreground)]!",
+  "[&_.excalidraw]:[--popup-text-inverted-color:var(--color-background)]!",
+  "[&_.excalidraw]:[--sidebar-bg-color:var(--color-popover)]!",
+  "[&_.excalidraw]:[--sidebar-border-color:var(--color-border)]!",
+  "[&_.excalidraw]:[--text-primary-color:var(--color-foreground)]!",
+  "[&_.excalidraw]:[--icon-fill-color:var(--color-foreground)]!",
+  "[&_.excalidraw]:[--keybinding-color:var(--color-muted-foreground)]!",
+  "[&_.excalidraw]:[--color-on-surface:var(--color-foreground)]!",
+  "[&_.excalidraw]:[--color-surface-lowest:var(--color-background)]!",
+  "[&_.excalidraw]:[--color-surface-low:var(--sketch-muted)]!",
+  "[&_.excalidraw]:[--color-surface-mid:var(--sketch-muted)]!",
+  "[&_.excalidraw]:[--color-surface-high:var(--color-accent)]!",
+  "[&_.excalidraw]:[--color-surface-primary-container:var(--color-accent)]!",
+  "[&_.excalidraw]:[--color-on-primary-container:var(--color-accent-foreground)]!",
+  "[&_.excalidraw]:[--color-muted:var(--sketch-muted)]!",
+  "[&_.excalidraw]:[--color-muted-darker:var(--color-muted-foreground)]!",
+  "[&_.excalidraw]:[--color-muted-darkest:var(--color-foreground)]!",
+  "[&_.excalidraw]:[--color-disabled:var(--color-muted-foreground)]!",
+  // the brand violet → primary
+  "[&_.excalidraw]:[--color-primary:var(--sketch-primary)]!",
+  "[&_.excalidraw]:[--color-primary-darker:var(--sketch-primary)]!",
+  "[&_.excalidraw]:[--color-primary-darkest:var(--sketch-primary)]!",
+  "[&_.excalidraw]:[--color-primary-hover:var(--sketch-primary)]!",
+  "[&_.excalidraw]:[--color-primary-light:var(--color-accent)]!",
+  "[&_.excalidraw]:[--color-primary-light-darker:var(--color-accent)]!",
+  "[&_.excalidraw]:[--color-brand-hover:var(--sketch-primary)]!",
+  "[&_.excalidraw]:[--color-brand-active:var(--sketch-primary)]!",
+  "[&_.excalidraw]:[--color-promo:var(--sketch-primary)]!",
+  "[&_.excalidraw]:[--link-color:var(--sketch-primary)]!",
+  "[&_.excalidraw]:[--select-highlight-color:var(--sketch-primary)]!",
+  "[&_.excalidraw]:[--focus-highlight-color:var(--color-ring)]!",
+  // lines, inputs, buttons
+  "[&_.excalidraw]:[--default-border-color:var(--color-border)]!",
+  "[&_.excalidraw]:[--dialog-border-color:var(--color-border)]!",
+  "[&_.excalidraw]:[--color-border-outline:var(--color-border)]!",
+  "[&_.excalidraw]:[--color-border-outline-variant:var(--color-border)]!",
+  "[&_.excalidraw]:[--input-bg-color:var(--color-background)]!",
+  "[&_.excalidraw]:[--input-border-color:var(--color-input)]!",
+  "[&_.excalidraw]:[--input-hover-bg-color:var(--color-accent)]!",
+  "[&_.excalidraw]:[--input-label-color:var(--color-muted-foreground)]!",
+  "[&_.excalidraw]:[--button-hover-bg:var(--color-accent)]!",
+  "[&_.excalidraw]:[--button-active-bg:var(--color-accent)]!",
+  "[&_.excalidraw]:[--button-active-border:var(--sketch-primary)]!",
+  "[&_.excalidraw]:[--scrollbar-thumb:var(--color-border)]!",
+  "[&_.excalidraw]:[--scrollbar-thumb-hover:var(--color-muted-foreground)]!",
+  // status
+  "[&_.excalidraw]:[--color-danger:var(--color-destructive)]!",
+  "[&_.excalidraw]:[--color-danger-darker:var(--color-destructive)]!",
+  "[&_.excalidraw]:[--color-danger-text:var(--color-destructive)]!",
+  "[&_.excalidraw]:[--button-destructive-color:var(--color-destructive)]!",
+  "[&_.excalidraw]:[--button-destructive-bg-color:var(--sketch-muted)]!",
+  // radius
+  "[&_.excalidraw]:[--border-radius-md:var(--theme-radius)]!",
+  "[&_.excalidraw]:[--border-radius-lg:var(--theme-radius)]!",
+].join(" ");
+
+// Plain CSS, not Tailwind classes: Tailwind reads every `_` inside an
+// arbitrary variant as a space, and Excalidraw's class names are full of
+// them (layer-ui__wrapper__top-right, App-menu_top__left), so the class
+// form silently matched nothing — its library button, zoom footer and a
+// squeezed hint line all showed (seen in the pane, 2026-09-24). Rendered
+// in a <style> by the block, scoped to its own wrapper.
+const HIDE = [
+  // desktop: main menu + properties panel, the tool bar's own buttons, the
+  // library / share corner, the zoom + undo + help footer
+  ".App-menu_top__left",
+  ".App-toolbar > .Stack",
+  ".App-toolbar__extra-tools-trigger",
+  ".layer-ui__wrapper__top-right",
+  ".layer-ui__wrapper__footer-left",
+  ".layer-ui__wrapper__footer-right",
+  // its hint line: the tool bar it sat under is gone (our empty state and
+  // rail tooltips say the same)
+  ".HintViewer",
+  // phone layout: its top and bottom bars
+  ".App-top-bar",
+  ".App-bottom-bar",
+  // library, search and every other sidebar
+  ".sidebar",
+  ".default-sidebar",
+];
+export const TRIM_CSS =
+  HIDE.map((sel) => `[data-sketch-canvas] ${sel}`).join(",\n") +
+  " { display: none !important; }\n" +
+  "[data-sketch-canvas] .App-toolbar { background: transparent !important; box-shadow: none !important; border: 0 !important; }";