agentic-canvas 0.10.0 → 0.12.0

package/dist/{chunk-ZSPZMGHG.js → chunk-MVWUIBGV.js}

@@ -1,13 +1,19 @@
-import {
-  isMachineMade,
-  principalSchema,
-  storedPrincipalSchema
-} from "./chunk-JOBTIAFJ.js";
+// src/core/principal.ts
+import { PRINCIPAL_KINDS, isMachineMade, parsePrincipal } from "agentic-identity";
+import { z } from "zod";
+var principalSchema = z.object({ kind: z.string(), id: z.string() }).strict().transform((value, ctx) => {
+  try {
+    return parsePrincipal(value);
+  } catch (error) {
+    ctx.addIssue({ code: "custom", message: error instanceof Error ? error.message : "invalid principal" });
+    return z.NEVER;
+  }
+});
+var storedPrincipalSchema = z.object({ kind: z.enum(PRINCIPAL_KINDS), id: z.string().min(1).max(200) }).strict();
 
 // src/core/board.ts
-import { randomUUID } from "crypto";
 import * as Y from "yjs";
-import { z } from "zod";
+import { z as z2 } from "zod";
 var CanvasError = class extends Error {
   constructor(code, message) {
     super(message);
@@ -19,18 +25,18 @@ var CanvasError = class extends Error {
 var SHAPE_TYPES = ["rect", "ellipse", "diamond", "text", "sticky", "frame", "image"];
 var MAX_ELEMENTS = 1e4;
 var MAX_TEXT = 1e4;
-var id = z.string().regex(/^[A-Za-z0-9_-]{1,64}$/);
-var coord = z.number().finite().min(-1e7).max(1e7);
-var size = z.number().finite().gt(0).max(1e7);
-var text = z.string().max(MAX_TEXT);
+var id = z2.string().regex(/^[A-Za-z0-9_-]{1,64}$/);
+var coord = z2.number().finite().min(-1e7).max(1e7);
+var size = z2.number().finite().gt(0).max(1e7);
+var text = z2.string().max(MAX_TEXT);
 var COLOR_PATTERN = /^(#[0-9a-fA-F]{3,8}|[a-z]{3,20})$/;
 var IMAGE_PATTERN = /^(data:image\/(png|jpeg|gif|webp);base64,[A-Za-z0-9+/]+=*|blob:[A-Za-z0-9._-]{1,200})$/;
-var color = z.string().regex(COLOR_PATTERN);
-var imageSrc = z.string().max(2e6).regex(IMAGE_PATTERN);
-var endpoint = z.union([z.object({ id }).strict(), z.object({ x: coord, y: coord }).strict()]);
-var shapeInput = z.object({
+var color = z2.string().regex(COLOR_PATTERN);
+var imageSrc = z2.string().max(2e6).regex(IMAGE_PATTERN);
+var endpoint = z2.union([z2.object({ id }).strict(), z2.object({ x: coord, y: coord }).strict()]);
+var shapeInput = z2.object({
   id: id.optional(),
-  type: z.enum(SHAPE_TYPES),
+  type: z2.enum(SHAPE_TYPES),
   x: coord,
   y: coord,
   w: size.default(120),
@@ -42,40 +48,40 @@ var shapeInput = z.object({
 }).strict().refine((s) => s.type === "image" === (s.src !== void 0), {
   message: "src is required for image shapes and allowed on no other type"
 });
-var connectorInput = z.object({
+var connectorInput = z2.object({
   id: id.optional(),
   from: endpoint,
   to: endpoint,
   text: text.default(""),
-  startArrow: z.boolean().default(false),
-  endArrow: z.boolean().default(true),
+  startArrow: z2.boolean().default(false),
+  endArrow: z2.boolean().default(true),
   stroke: color.optional()
 }).strict();
-var shapePatch = z.object({ x: coord, y: coord, w: size, h: size, text, fill: color, stroke: color, src: imageSrc }).partial().strict();
-var connectorPatch = z.object({ from: endpoint, to: endpoint, text, startArrow: z.boolean(), endArrow: z.boolean(), stroke: color }).partial().strict();
-var delta = z.number().finite().min(-2e7).max(2e7);
+var shapePatch = z2.object({ x: coord, y: coord, w: size, h: size, text, fill: color, stroke: color, src: imageSrc }).partial().strict();
+var connectorPatch = z2.object({ from: endpoint, to: endpoint, text, startArrow: z2.boolean(), endArrow: z2.boolean(), stroke: color }).partial().strict();
+var delta = z2.number().finite().min(-2e7).max(2e7);
 var MAX_Z = 1e9;
 var stampFields = {
   id,
-  z: z.number().finite().min(-MAX_Z).max(MAX_Z),
+  z: z2.number().finite().min(-MAX_Z).max(MAX_Z),
   groupId: id.optional(),
   author: storedPrincipalSchema,
   editedBy: storedPrincipalSchema
 };
-var storedShape = z.object({ ...stampFields, type: z.enum(SHAPE_TYPES), x: coord, y: coord, w: size, h: size, text, fill: color.optional(), stroke: color.optional(), src: imageSrc.optional() }).refine((s) => s.type === "image" === (s.src !== void 0), { message: "src is required for image shapes and allowed on no other type" });
-var storedConnector = z.object({
+var storedShape = z2.object({ ...stampFields, type: z2.enum(SHAPE_TYPES), x: coord, y: coord, w: size, h: size, text, fill: color.optional(), stroke: color.optional(), src: imageSrc.optional() }).refine((s) => s.type === "image" === (s.src !== void 0), { message: "src is required for image shapes and allowed on no other type" });
+var storedConnector = z2.object({
   ...stampFields,
-  type: z.literal("connector"),
+  type: z2.literal("connector"),
   from: endpoint,
   to: endpoint,
   text,
-  startArrow: z.boolean(),
-  endArrow: z.boolean(),
+  startArrow: z2.boolean(),
+  endArrow: z2.boolean(),
   stroke: color.optional()
 });
-var storedGroup = z.object({ ...stampFields, type: z.literal("group") });
-var storedElement = z.union([storedShape, storedConnector, storedGroup]);
-var titleSchema = z.string().max(200);
+var storedGroup = z2.object({ ...stampFields, type: z2.literal("group") });
+var storedElement = z2.union([storedShape, storedConnector, storedGroup]);
+var titleSchema = z2.string().max(200);
 function parse(schema, value) {
   const result = schema.safeParse(value);
   if (!result.success) {
@@ -134,7 +140,7 @@ var Board = class _Board {
     return value.success ? value.data : void 0;
   }
   setTitle(title, actor) {
-    const t = parse(z.string().max(200), title);
+    const t = parse(z2.string().max(200), title);
     const by = parse(principalSchema, actor);
     this.doc.transact(() => {
       this.meta.set("title", t);
@@ -325,7 +331,7 @@ var Board = class _Board {
   /** Shift an element, or a whole group. Returns the ids that moved. Bound connector ends follow their shapes. */
   move(elementId, dx, dy, actor) {
     const by = parse(principalSchema, actor);
-    const [mx, my] = parse(z.tuple([delta, delta]), [dx, dy]);
+    const [mx, my] = parse(z2.tuple([delta, delta]), [dx, dy]);
     this.require(elementId);
     const free = (e) => hasId(e) ? e : { x: e.x + mx, y: e.y + my };
     const plan = [];
@@ -354,7 +360,7 @@ var Board = class _Board {
   }
   group(ids, actor, groupId) {
     const by = parse(principalSchema, actor);
-    const members = parse(z.array(id).min(2).max(MAX_ELEMENTS), ids);
+    const members = parse(z2.array(id).min(2).max(MAX_ELEMENTS), ids);
     const gid = parse(id.optional(), groupId);
     if (new Set(members).size !== members.length) throw new CanvasError("INVALID", "member ids repeat");
     const parents = new Set(members.map((m) => this.require(m).groupId));
@@ -424,12 +430,12 @@ var Board = class _Board {
   }
   /** The z value just past the top or the bottom. Not clamped: the caller checks the range. */
   edgeZ(direction) {
-    let z2 = 0;
+    let z3 = 0;
     for (const m of this.elements.values()) {
       const value = m instanceof Y.Map ? m.get("z") : void 0;
-      if (isValidZ(value)) z2 = direction === 1 ? Math.max(z2, value) : Math.min(z2, value);
+      if (isValidZ(value)) z3 = direction === 1 ? Math.max(z3, value) : Math.min(z3, value);
     }
-    return z2 + direction;
+    return z3 + direction;
   }
   /** The element and, for a group, everything below it. Cycle-safe. */
   subtree(elementId) {
@@ -446,7 +452,7 @@ var Board = class _Board {
   }
   create(fields, actor) {
     const by = parse(principalSchema, actor);
-    const elementId = fields.id ?? randomUUID();
+    const elementId = fields.id ?? crypto.randomUUID();
     if (this.elements.has(elementId)) throw new CanvasError("DUPLICATE_ID", `element "${elementId}" already exists`);
     if (this.elements.size >= this.maxElements) throw new CanvasError("LIMIT", `a board holds at most ${this.maxElements} elements`);
     const record = { ...fields, id: elementId, z: clampZ(this.edgeZ(1)), author: by, editedBy: by };
@@ -469,116 +475,6 @@ var Board = class _Board {
   }
 };
 
-// src/core/flow.ts
-import { randomUUID as randomUUID2 } from "crypto";
-import dagre from "@dagrejs/dagre";
-import * as Y2 from "yjs";
-var MAX_FLOW_NODES = 500;
-var MAX_FLOW_EDGES = 2e3;
-var MAX_FLOW_CHARS = 2e5;
-var NODE = String.raw`([A-Za-z0-9_-]{1,48})(?:\[([^\]]*)\]|\(([^)]*)\)|\{([^}]*)\})?`;
-var EDGE = new RegExp(String.raw`^${NODE}\s*->\s*${NODE}\s*(?::(.*))?$`);
-var ALONE = new RegExp(String.raw`^${NODE}$`);
-var SHAPES = ["rect", "ellipse", "diamond"];
-function parseFlow(source) {
-  if (source.length > MAX_FLOW_CHARS) throw new CanvasError("LIMIT", `flow text is over ${MAX_FLOW_CHARS} characters`);
-  const graph = { direction: "TB", nodes: [], edges: [] };
-  const byId = /* @__PURE__ */ new Map();
-  const fail = (line, message) => {
-    throw new CanvasError("INVALID", `line ${line}: ${message}`);
-  };
-  const node = (line, m, at) => {
-    const id2 = m[at];
-    if (/^edge_\d+$/.test(id2)) fail(line, `"${id2}" is reserved for connectors. Pick another node id.`);
-    const brackets = m.slice(at + 1, at + 4);
-    const open = brackets.findIndex((b) => b !== void 0);
-    const shape = SHAPES[Math.max(open, 0)];
-    const text2 = (open < 0 ? "" : brackets[open].trim()) || id2;
-    const known = byId.get(id2);
-    if (!known) {
-      const created = { id: id2, text: text2, shape, explicit: open >= 0 };
-      byId.set(id2, created);
-      graph.nodes.push(created);
-    } else if (open >= 0) {
-      if (known.explicit && (known.text !== text2 || known.shape !== shape)) fail(line, `"${id2}" is defined twice with different text`);
-      Object.assign(known, { text: text2, shape, explicit: true });
-    }
-    return id2;
-  };
-  source.replace(/^/, "").split(/\r?\n/).forEach((raw, index) => {
-    const line = index + 1;
-    const text2 = raw.trim();
-    if (text2 === "" || text2.startsWith("#") || text2.startsWith("//")) return;
-    if (/[\u0000-\u0008\u000a-\u001f\u007f]/.test(text2)) fail(line, "control characters are not allowed");
-    const direction = /^direction\s+(\S+)$/.exec(text2);
-    if (direction) {
-      if (direction[1] !== "TB" && direction[1] !== "LR") fail(line, `direction must be TB or LR, got "${direction[1]}"`);
-      graph.direction = direction[1];
-      return;
-    }
-    const edge = EDGE.exec(text2);
-    if (edge) {
-      const from = node(line, edge, 1);
-      const to = node(line, edge, 5);
-      graph.edges.push({ from, to, text: (edge[9] ?? "").trim() });
-    } else {
-      const alone = ALONE.exec(text2);
-      if (!alone) fail(line, `cannot read "${text2.slice(0, 40)}". Use "A -> B: label".`);
-      else node(line, alone, 1);
-    }
-    if (graph.nodes.length > MAX_FLOW_NODES) throw new CanvasError("LIMIT", `a flow holds at most ${MAX_FLOW_NODES} nodes`);
-    if (graph.edges.length > MAX_FLOW_EDGES) throw new CanvasError("LIMIT", `a flow holds at most ${MAX_FLOW_EDGES} edges`);
-  });
-  if (graph.nodes.length === 0) throw new CanvasError("INVALID", "the flow has no nodes");
-  return { ...graph, nodes: graph.nodes.map(({ id: id2, text: text2, shape }) => ({ id: id2, text: text2, shape })) };
-}
-function sizeOf(n) {
-  const w = Math.min(360, Math.max(120, 24 + 8 * n.text.length));
-  return n.shape === "diamond" ? { w: Math.min(360, Math.round(w * 1.5)), h: 90 } : { w, h: 60 };
-}
-function layoutFlow(graph) {
-  const g = new dagre.graphlib.Graph({ multigraph: true });
-  g.setGraph({ rankdir: graph.direction, nodesep: 40, ranksep: 70, marginx: 0, marginy: 0 });
-  g.setDefaultEdgeLabel(() => ({}));
-  const index = new Map(graph.nodes.map((n, i) => [n.id, `n${i}`]));
-  const sizes = graph.nodes.map(sizeOf);
-  sizes.forEach(({ w, h }, i) => g.setNode(`n${i}`, { width: w, height: h }));
-  graph.edges.forEach((e, i) => g.setEdge(index.get(e.from), index.get(e.to), {}, String(i)));
-  dagre.layout(g);
-  const boxes = graph.nodes.map((n, i) => {
-    const { w, h } = sizes[i];
-    const c = g.node(`n${i}`);
-    return { id: n.id, x: Math.round(c.x - w / 2), y: Math.round(c.y - h / 2), w, h };
-  });
-  const minX = Math.min(...boxes.map((b) => b.x));
-  const minY = Math.min(...boxes.map((b) => b.y));
-  return boxes.map((b) => ({ ...b, x: b.x - minX, y: b.y - minY }));
-}
-function drawFlow(board, source, actor, options = {}) {
-  const prefix = options.idPrefix ?? `${randomUUID2().slice(0, 8)}-`;
-  if (!/^[A-Za-z0-9_-]{0,16}$/.test(prefix)) throw new CanvasError("INVALID", "idPrefix must be up to 16 of A-Z, a-z, 0-9, _ and -");
-  const graph = parseFlow(source);
-  const placed = layoutFlow(graph);
-  const shapes = board.list().flatMap((e) => e.type === "connector" || e.type === "group" ? [] : [e]);
-  const origin = options.origin ?? {
-    x: shapes.length ? Math.min(...shapes.map((s) => s.x)) : 0,
-    y: shapes.length ? Math.max(...shapes.map((s) => s.y + s.h)) + 80 : 0
-  };
-  const work = board.clone();
-  const text2 = new Map(graph.nodes.map((n) => [n.id, n]));
-  for (const p of placed) {
-    const n = text2.get(p.id);
-    work.addShape({ id: prefix + p.id, type: n.shape, text: n.text, x: p.x + origin.x, y: p.y + origin.y, w: p.w, h: p.h }, actor);
-  }
-  const edges = graph.edges.map((e, i) => {
-    const id2 = `${prefix}edge_${i + 1}`;
-    work.addConnector({ id: id2, from: { id: prefix + e.from }, to: { id: prefix + e.to }, text: e.text }, actor);
-    return id2;
-  });
-  Y2.applyUpdate(board.doc, Y2.encodeStateAsUpdate(work.doc, Y2.encodeStateVector(board.doc)));
-  return { nodes: placed.map((p) => prefix + p.id), edges };
-}
-
 // src/core/read.ts
 function readBoard(board) {
   const data = { title: board.title, nodes: [], edges: [], groups: [], texts: [] };
@@ -599,182 +495,16 @@ function readBoard(board) {
   return data;
 }
 
-// src/core/svg.ts
-var LINE = 17;
-var num = (n) => String(Math.round(n * 100) / 100);
-var esc = (value) => (typeof value === "string" ? value : "").replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f￾￿]|[\ud800-\udbff](?![\udc00-\udfff])|(?<![\ud800-\udbff])[\udc00-\udfff]/g, "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-var paint = (value, fallback) => typeof value === "string" && COLOR_PATTERN.test(value) ? value : fallback;
-var str = (value) => typeof value === "string" ? value : "";
-var within = (n, low, high) => typeof n === "number" && Number.isFinite(n) && n >= low && n <= high;
-var LIMIT_COORD = 1e7;
-var TYPES = /* @__PURE__ */ new Set([...SHAPE_TYPES, "connector", "group"]);
-var sane = (s) => within(s.x, -LIMIT_COORD, LIMIT_COORD) && within(s.y, -LIMIT_COORD, LIMIT_COORD) && within(s.w, 1e-6, LIMIT_COORD) && within(s.h, 1e-6, LIMIT_COORD);
-var isShape = (v) => "w" in v;
-var center = (s) => ({ x: s.x + s.w / 2, y: s.y + s.h / 2 });
-function edgePoint(s, toward) {
-  const c = center(s);
-  const dx = toward.x - c.x;
-  const dy = toward.y - c.y;
-  if (dx === 0 && dy === 0) return c;
-  const a = s.w / 2;
-  const b = s.h / 2;
-  const k = s.type === "ellipse" ? 1 / Math.hypot(dx / a, dy / b) : s.type === "diamond" ? 1 / (Math.abs(dx) / a + Math.abs(dy) / b) : Math.min(a / Math.abs(dx), b / Math.abs(dy));
-  return { x: c.x + dx * k, y: c.y + dy * k };
-}
-function wrap(text2, width) {
-  const max = Math.max(4, Math.floor((width - 16) / 7.5));
-  const out = [];
-  for (const paragraph of text2.split(/\r?\n/)) {
-    let line = "";
-    for (const word of paragraph.split(/\s+/).filter(Boolean)) {
-      const chars = [...word];
-      while (chars.length > max) {
-        if (line) out.push(line);
-        line = "";
-        out.push(chars.splice(0, max).join(""));
-      }
-      const rest = chars.join("");
-      if (line && [...line].length + 1 + chars.length > max) {
-        out.push(line);
-        line = rest;
-      } else line = line ? `${line} ${rest}` : rest;
-    }
-    out.push(line);
-  }
-  return out.slice(0, 40);
-}
-function label(text2, cx, cy, width, extra = "") {
-  if (text2 === "") return "";
-  const lines = wrap(text2, width);
-  const top = cy - (lines.length - 1) * LINE / 2;
-  const spans = lines.map((l, i) => `<tspan x="${num(cx)}" y="${num(top + i * LINE)}">${esc(l)}</tspan>`);
-  return `<text text-anchor="middle" dominant-baseline="central"${extra}>${spans.join("")}</text>`;
-}
-function shapeBody(s) {
-  const { x, y, w, h } = s;
-  const stroke = paint(s.stroke, "#1f2937");
-  const look = (fill, more = "") => `fill="${paint(s.fill, fill)}" stroke="${stroke}" stroke-width="2"${more}`;
-  const text2 = label(str(s.text), x + w / 2, y + h / 2, w);
-  switch (s.type) {
-    case "ellipse":
-      return `<ellipse cx="${num(x + w / 2)}" cy="${num(y + h / 2)}" rx="${num(w / 2)}" ry="${num(h / 2)}" ${look("#ffffff")}/>${text2}`;
-    case "diamond": {
-      const pts = [[x + w / 2, y], [x + w, y + h / 2], [x + w / 2, y + h], [x, y + h / 2]];
-      return `<polygon points="${pts.map(([px, py]) => `${num(px)},${num(py)}`).join(" ")}" ${look("#ffffff")}/>${text2}`;
-    }
-    case "text":
-      return text2;
-    case "frame":
-      return `<rect x="${num(x)}" y="${num(y)}" width="${num(w)}" height="${num(h)}" ${look("none", ' stroke-dasharray="8 6"')}/>${label(str(s.text), x + w / 2, y - 12, w)}`;
-    case "image":
-      if (typeof s.src === "string" && s.src.startsWith("data:") && IMAGE_PATTERN.test(s.src)) {
-        return `<image href="${s.src}" x="${num(x)}" y="${num(y)}" width="${num(w)}" height="${num(h)}" preserveAspectRatio="xMidYMid meet"/>`;
-      }
-      return `<rect x="${num(x)}" y="${num(y)}" width="${num(w)}" height="${num(h)}" ${look("#f3f4f6", ' stroke-dasharray="4 4"')}/>${label("image", x + w / 2, y + h / 2, w)}`;
-    default:
-      return `<rect x="${num(x)}" y="${num(y)}" width="${num(w)}" height="${num(h)}" rx="${s.type === "sticky" ? 2 : 6}" ${look(s.type === "sticky" ? "#fde68a" : "#ffffff")}/>${text2}`;
-  }
-}
-var endKey = (e) => "id" in e ? e.id : `${e.x},${e.y}`;
-var wellFormed = (e) => typeof e === "object" && e !== null && (typeof e.id === "string" || within(e.x, -LIMIT_COORD, LIMIT_COORD) && within(e.y, -LIMIT_COORD, LIMIT_COORD));
-function connectorBody(c, shapes, lane) {
-  const resolve = (e) => "id" in e ? shapes.get(e.id) : e;
-  const a = resolve(c.from);
-  const b = resolve(c.to);
-  if (!a || !b) return "";
-  let d;
-  let at;
-  if (isShape(a) && a === b) {
-    const x0 = a.x + a.w * 0.35;
-    const x1 = a.x + a.w * 0.65;
-    const lift = 45 + 32 * lane.index;
-    d = `M${num(x0)} ${num(a.y)}C${num(x0)} ${num(a.y - lift)} ${num(x1)} ${num(a.y - lift)} ${num(x1)} ${num(a.y)}`;
-    at = { x: a.x + a.w / 2, y: a.y - lift * 0.75 - 6 };
-  } else {
-    const ca = isShape(a) ? center(a) : a;
-    const cb = isShape(b) ? center(b) : b;
-    const flip = endKey(c.from) > endKey(c.to);
-    const dx = (flip ? ca.x - cb.x : cb.x - ca.x) || 0;
-    const dy = (flip ? ca.y - cb.y : cb.y - ca.y) || 0;
-    const len = Math.hypot(dx, dy) || 1;
-    const offset = (lane.index - (lane.count - 1) / 2) * 44;
-    const mid = { x: (ca.x + cb.x) / 2, y: (ca.y + cb.y) / 2 };
-    const ctrl = { x: mid.x - dy / len * 2 * offset, y: mid.y + dx / len * 2 * offset };
-    const p = isShape(a) ? edgePoint(a, ctrl) : a;
-    const q = isShape(b) ? edgePoint(b, ctrl) : b;
-    d = offset === 0 ? `M${num(p.x)} ${num(p.y)}L${num(q.x)} ${num(q.y)}` : `M${num(p.x)} ${num(p.y)}Q${num(ctrl.x)} ${num(ctrl.y)} ${num(q.x)} ${num(q.y)}`;
-    at = offset === 0 ? { x: (p.x + q.x) / 2, y: (p.y + q.y) / 2 } : { x: (p.x + q.x) / 4 + ctrl.x / 2, y: (p.y + q.y) / 4 + ctrl.y / 2 };
-  }
-  const marks = `${c.startArrow ? ' marker-start="url(#arrow)"' : ""}${c.endArrow ? ' marker-end="url(#arrow)"' : ""}`;
-  const halo = ' stroke="#ffffff" stroke-width="4" paint-order="stroke"';
-  return `<path d="${d}" fill="none" stroke="${paint(c.stroke, "#1f2937")}" stroke-width="2"${marks}/>${label(str(c.text), at.x, at.y, 160, halo)}`;
-}
-var drawable = (el) => TYPES.has(el.type) && (el.type === "connector" ? wellFormed(el.from) && wellFormed(el.to) : el.type === "group" || sane(el));
-function toSvg(board) {
-  const listed = board.list();
-  if (listed.length > MAX_ELEMENTS) throw new CanvasError("LIMIT", `a board holds at most ${MAX_ELEMENTS} elements`);
-  const all = listed.filter((el) => drawable(el));
-  const shapes = /* @__PURE__ */ new Map();
-  const box = { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity };
-  const grow = (x, y) => {
-    box.minX = Math.min(box.minX, x);
-    box.minY = Math.min(box.minY, y);
-    box.maxX = Math.max(box.maxX, x);
-    box.maxY = Math.max(box.maxY, y);
-  };
-  for (const el of all) {
-    if (el.type === "connector") {
-      for (const e of [el.from, el.to]) if (!("id" in e)) grow(e.x, e.y);
-    } else if (el.type !== "group") {
-      shapes.set(el.id, el);
-      grow(el.x, el.y);
-      grow(el.x + el.w, el.y + el.h);
-    }
-  }
-  const pad = 80;
-  const any = box.minX !== Infinity;
-  const minX = any ? box.minX - pad : 0;
-  const minY = any ? box.minY - pad : 0;
-  const width = any ? Math.ceil(box.maxX + pad - minX) : 240;
-  const height = any ? Math.ceil(box.maxY + pad - minY) : 120;
-  const lanes = /* @__PURE__ */ new Map();
-  const groups = /* @__PURE__ */ new Map();
-  for (const el of all) {
-    if (el.type !== "connector") continue;
-    const key = [endKey(el.from), endKey(el.to)].sort().join("|");
-    groups.set(key, [...groups.get(key) ?? [], el.id]);
-  }
-  for (const ids of groups.values()) ids.forEach((id2, index) => lanes.set(id2, { index, count: ids.length }));
-  const body = all.map((el) => {
-    if (el.type === "group") return "";
-    const inner = el.type === "connector" ? connectorBody(el, shapes, lanes.get(el.id)) : shapeBody(el);
-    if (inner === "") return "";
-    const kind = el.author.kind;
-    const mark = `data-id="${esc(el.id)}" data-type="${el.type}" data-author-kind="${kind}" data-machine-made="${kind !== "human"}"`;
-    return `<g ${mark}>${inner}</g>`;
-  });
-  const title = esc(board.title) || "Whiteboard";
-  return [
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="${num(minX)} ${num(minY)} ${width} ${height}" font-family="sans-serif" font-size="14" fill="#111827" role="img" aria-label="${title}">`,
-    `<title>${title}</title>`,
-    '<defs><marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" fill="#1f2937"/></marker></defs>',
-    `<rect x="${num(minX)}" y="${num(minY)}" width="${width}" height="${height}" fill="#ffffff"/>`,
-    ...body.filter(Boolean),
-    "</svg>"
-  ].join("\n");
-}
-
 export {
+  PRINCIPAL_KINDS,
+  isMachineMade,
+  principalSchema,
   CanvasError,
   SHAPE_TYPES,
   MAX_ELEMENTS,
   MAX_TEXT,
+  COLOR_PATTERN,
+  IMAGE_PATTERN,
   Board,
-  MAX_FLOW_NODES,
-  MAX_FLOW_EDGES,
-  parseFlow,
-  layoutFlow,
-  drawFlow,
-  readBoard,
-  toSvg
+  readBoard
 };

package/dist/{chunk-M74ENUWR.js → chunk-Z6KLGAFP.js}

@@ -2,15 +2,15 @@ import {
   FileStoreError
 } from "./chunk-NWQED42L.js";
 import {
-  Board,
-  CanvasError,
   drawFlow,
-  readBoard,
   toSvg
-} from "./chunk-ZSPZMGHG.js";
+} from "./chunk-EDQNA2SU.js";
 import {
-  principalSchema
-} from "./chunk-JOBTIAFJ.js";
+  Board,
+  CanvasError,
+  principalSchema,
+  readBoard
+} from "./chunk-MVWUIBGV.js";
 
 // src/service.ts
 import * as Y from "yjs";

package/dist/cli.js

@@ -5,18 +5,18 @@ import {
   operatorActor,
   runMcp,
   svgToPng
-} from "./chunk-NLTN7J22.js";
+} from "./chunk-A4YK2SWM.js";
 import {
   openLocalStore
 } from "./chunk-NRLF6MGR.js";
 import {
   CanvasService
-} from "./chunk-M74ENUWR.js";
+} from "./chunk-Z6KLGAFP.js";
 import "./chunk-NWQED42L.js";
+import "./chunk-EDQNA2SU.js";
 import {
   CanvasError
-} from "./chunk-ZSPZMGHG.js";
-import "./chunk-JOBTIAFJ.js";
+} from "./chunk-MVWUIBGV.js";
 
 // src/cli.ts
 import { readFileSync, writeFileSync } from "fs";

package/dist/embed.d.ts

@@ -1,10 +1,28 @@
 import * as react from 'react';
 import { C as CanvasClient } from './client-Dyd30StF.js';
 import { PrincipalKind } from 'agentic-identity';
+import { SyncClient, Status } from 'agentic-realtime/client';
+import * as Y from 'yjs';
 import './read-UIJlrkwx.js';
-import 'yjs';
 import 'zod';
 
+/** The presence of a room: who is here. A `SyncClient` of agentic-realtime has these. */
+type RoomPresence = Pick<SyncClient, "peers" | "onPeers">;
+/**
+ * A board that the app keeps itself, in its own Yjs room. The UI reads and writes it, and does not call a client, poll, or
+ * open a live room. The app keeps the document and its room.
+ */
+interface HostBoard {
+    /** The Yjs document. The UI opens it as a `Board`: its `elements` and `meta` maps, as this package stores them. */
+    doc: Y.Doc;
+    /** The presence of the app's room. With it, the UI shows who else is here. */
+    presence?: RoomPresence;
+    /** The connection state now. With neither `status` nor `onStatus`, the UI shows the board as live. With only `onStatus`, it shows not live until the room reports "connected". */
+    status?: () => Status;
+    /** A way to hear when the connection state changes. It returns a function that stops the listener. The UI reads it once each time it opens `doc`. */
+    onStatus?: (listener: (status: Status) => void) => () => void;
+}
+
 interface RoomOptions {
     /** The API root, for example `https://canvas.example.com/api/v1/canvas`. */
     baseUrl: string;
@@ -16,14 +34,21 @@ interface RoomOptions {
 interface BoardPrincipal {
     kind: PrincipalKind;
     name: string;
+    /** Stamped on each element the principal writes in host mode. The default is `name`, which must then be a valid id. A client mode board takes the actor from its token. */
+    id?: string;
     /** Only `editor` can change the board. Any other value, or no value, opens it read only. */
     role?: "editor" | "viewer";
 }
 interface BoardEditorOptions {
     /** The board id. */
     boardId: string;
-    /** Loads and changes the board. A client from `createClient` in `agentic-canvas/client` works. */
-    client: CanvasClient;
+    /** Loads and changes the board. A client from `createClient` in `agentic-canvas/client` works. Needed unless `host` is given. */
+    client?: CanvasClient;
+    /**
+     * The board in your own Yjs document. The UI then reads and writes that document, and calls no client, does not poll, and
+     * opens no live room. `client` or `room` together with `host` throws a `TypeError`.
+     */
+    host?: HostBoard;
     principal: BoardPrincipal;
     /** Open the board read only, even for an editor. */
     readOnly?: boolean;
@@ -43,4 +68,4 @@ interface MountedBoard {
 /** Render the board into an element, for an app that does not use React itself. */
 declare function mount(element: HTMLElement, options: BoardEditorOptions): MountedBoard;
 
-export { BoardEditor, type BoardEditorOptions, type BoardPrincipal, CanvasClient, type MountedBoard, type RoomOptions, mount };
+export { BoardEditor, type BoardEditorOptions, type BoardPrincipal, CanvasClient, type HostBoard, type MountedBoard, type RoomOptions, mount };