agentic-canvas 0.3.0 → 0.5.0

package/dist/{chunk-V477KSZQ.js → chunk-V74PWJKY.js}

@@ -1,11 +1,13 @@
 import {
   CanvasService,
   MAX_LIVE_BYTES
-} from "./chunk-W7NRP3EX.js";
+} from "./chunk-G4YTESPS.js";
+import {
+  CanvasError
+} from "./chunk-JCYNPYYJ.js";
 import {
-  CanvasError,
   principalSchema
-} from "./chunk-GGQPE65T.js";
+} from "./chunk-SPP6PINW.js";
 
 // src/worker.ts
 import { parseRegion } from "agentic-identity";
@@ -1788,6 +1790,145 @@ var Hono3 = class extends Hono {
   }
 };
 
+// src/room-sync.ts
+import * as Y from "yjs";
+var SEEDER = { kind: "agent", id: "canvas-room" };
+var MAX_SEED_BYTES = 1e6;
+var SYNC = 0;
+var AUTH = 2;
+var SYNC_STEP2 = 1;
+var SYNC_UPDATE = 2;
+var same = (a, b) => a.kind === b.kind && a.id === b.id;
+function varUint(value) {
+  const out = [];
+  for (; value > 127; value = Math.floor(value / 128)) out.push(128 | value % 128);
+  return [...out, value];
+}
+async function roomState(live, id) {
+  const meta = await live.meta(id);
+  if (meta.updates === 0 && meta.compactions === 0) return null;
+  const reader = (await live.exportHistory(id)).getReader();
+  const decoder = new TextDecoder();
+  let text2 = "";
+  try {
+    for (; ; ) {
+      const { done, value } = await reader.read();
+      if (value) text2 += decoder.decode(value, { stream: true });
+      for (let end = text2.indexOf("\n"); end >= 0; end = text2.indexOf("\n")) {
+        let record;
+        try {
+          record = JSON.parse(text2.slice(0, end));
+        } catch {
+          throw new CanvasError("UNAVAILABLE", "the room sent an export this server cannot read");
+        }
+        text2 = text2.slice(end + 1);
+        if (record.type === "state" && typeof record.base64 === "string") return Uint8Array.from(atob(record.base64), (c) => c.charCodeAt(0));
+      }
+      if (done) throw new CanvasError("UNAVAILABLE", "the room sent no state");
+    }
+  } finally {
+    await reader.cancel().catch(() => void 0);
+  }
+}
+async function send(live, id, update, roomVector, who) {
+  if (update.length > MAX_SEED_BYTES) throw new CanvasError("LIMIT", "the update is too big to put in a room");
+  const upgrade = new Request("https://room.internal/ws", { headers: { upgrade: "websocket" } });
+  const response = await live.connect(id, upgrade, { principal: who.principal, role: "editor", name: who.principal.id });
+  const socket = response.webSocket;
+  if (!socket) throw new CanvasError("UNAVAILABLE", "the room did not open");
+  socket.accept();
+  await new Promise((resolve, reject) => {
+    const timer = setTimeout(() => fail2(new CanvasError("UNAVAILABLE", "the room did not answer")), 1e4);
+    const fail2 = (error) => (clearTimeout(timer), reject(error));
+    socket.addEventListener("message", ({ data }) => {
+      const bytes = new Uint8Array(data);
+      if (bytes[0] === AUTH && bytes[1] === 0) fail2(new CanvasError(who.refusal, "the room refused the update"));
+      else if (bytes[0] === SYNC && bytes[1] === SYNC_STEP2) clearTimeout(timer), resolve();
+    });
+    socket.addEventListener("close", () => fail2(new CanvasError("UNAVAILABLE", "the room closed before it took the update")));
+    socket.send(new Uint8Array([SYNC, SYNC_UPDATE, ...varUint(update.length), ...update]));
+    socket.send(new Uint8Array([SYNC, 0, ...varUint(roomVector.length), ...roomVector]));
+  }).finally(() => socket.close(1e3, "done"));
+}
+async function writers(live, id) {
+  const log = await live.attribution(id);
+  if (!log) throw new CanvasError("UNAVAILABLE", "the room has no log of who sent its updates");
+  const ranges = /* @__PURE__ */ new Map();
+  for (const range of log.ranges) ranges.set(range.client, [...ranges.get(range.client) ?? [], range]);
+  const reach = /* @__PURE__ */ new Map();
+  for (const [client, list] of ranges) {
+    list.sort((a, b) => a.clock - b.clock);
+    reach.set(client, list.map((r) => r.clock + r.length));
+    const ends = reach.get(client);
+    for (let i = 1; i < ends.length; i++) ends[i] = Math.max(ends[i], ends[i - 1]);
+  }
+  return ({ client, clock }) => {
+    const list = ranges.get(client) ?? [];
+    let low = 0;
+    let high = list.length;
+    while (low < high) {
+      const mid = low + high >> 1;
+      if (list[mid].clock <= clock) low = mid + 1;
+      else high = mid;
+    }
+    let first;
+    for (let i = low - 1; i >= 0 && reach.get(client)[i] > clock && !first; i--) {
+      const r = list[i];
+      if (clock < r.clock + r.length) first = r;
+    }
+    const who = first ? log.authors[first.author] : void 0;
+    return who && !same(who, SEEDER) ? { id: who.id, kind: who.kind } : void 0;
+  };
+}
+async function handSave(live, service, id, update, poster) {
+  const state = await roomState(live, id);
+  const vector = Y.encodeStateVectorFromUpdate(state ?? Y.encodeStateAsUpdate(new Y.Doc()));
+  let missing;
+  try {
+    missing = Y.diffUpdate(update, vector);
+  } catch {
+    throw new CanvasError("INVALID", "the update is not a Yjs update");
+  }
+  const { structs, ds } = Y.decodeUpdate(missing);
+  if (structs.length > 0 || ds.clients.size > 0) await send(live, id, missing, vector, { principal: poster, refusal: "FORBIDDEN" });
+  const saved2 = await pull(live, service, id, true);
+  if (saved2) return saved2;
+  const board = await service.read(id);
+  return { elements: board.nodes.length + board.edges.length + board.groups.length, fixed: [] };
+}
+async function roomAuthors(live, id) {
+  return (await live.meta(id)).contributors.filter((c) => !same(c, SEEDER)).map(({ id: who, kind }) => ({ id: who, kind }));
+}
+var saved = /* @__PURE__ */ new Map();
+function remember(id, mark) {
+  if (saved.size > 500) saved.clear();
+  saved.set(id, mark);
+}
+async function pull(live, service, id, force = false) {
+  const { updates, compactions } = await live.meta(id);
+  const mark = `${updates}:${compactions}`;
+  if (!force && saved.get(id) === mark) return null;
+  const state = await roomState(live, id);
+  if (!state) return null;
+  let result;
+  try {
+    result = await service.checkpoint(id, state, null, await roomAuthors(live, id), await writers(live, id));
+  } catch (error) {
+    if (error instanceof CanvasError && error.code !== "UNAVAILABLE") remember(id, mark);
+    throw error;
+  }
+  remember(id, mark);
+  return result;
+}
+async function seed(live, service, id) {
+  const state = await roomState(live, id);
+  const missing = await service.missingFrom(id, state ?? void 0);
+  if (!missing) return;
+  const known = new Y.Doc();
+  if (state) Y.applyUpdate(known, state);
+  await send(live, id, missing, Y.encodeStateVector(known), { principal: SEEDER, refusal: "UNAVAILABLE" });
+}
+
 // src/worker.ts
 var MIN_TOKEN_LENGTH = 32;
 var DEFAULT_MAX_IMAGE_BYTES = 1e6;
@@ -1809,8 +1950,19 @@ function sameText(a, b) {
   for (let i = 0; i < Math.max(x.length, y.length); i++) diff |= (x[i] ?? 0) ^ (y[i] ?? 0);
   return diff === 0;
 }
+var WS_PROTOCOL = "agentic-canvas.bearer";
+function socketToken(request) {
+  if (request.headers.get("upgrade") !== "websocket") return void 0;
+  const [name, encoded, ...more] = (request.headers.get("sec-websocket-protocol") ?? "").split(",").map((p) => p.trim());
+  if (name !== WS_PROTOCOL || !encoded || more.length > 0 || !/^[A-Za-z0-9_-]+$/.test(encoded)) return void 0;
+  try {
+    return new TextDecoder("utf-8", { fatal: true }).decode(Uint8Array.from(atob(encoded.replace(/-/g, "+").replace(/_/g, "/")), (c) => c.charCodeAt(0)));
+  } catch {
+    return void 0;
+  }
+}
 function authenticate(request, env) {
-  const token = /^Bearer (.+)$/.exec(request.headers.get("authorization") ?? "")?.[1];
+  const token = /^Bearer (.+)$/.exec(request.headers.get("authorization") ?? "")?.[1] ?? socketToken(request);
   if (!token || !env.CANVAS_API_TOKENS) return null;
   let grants;
   try {
@@ -1826,7 +1978,8 @@ function authenticate(request, env) {
   if (typeof found !== "object" || found === null) return null;
   const { actor, kind, role = "editor" } = found;
   const parsed = principalSchema.safeParse({ kind, id: actor });
-  return parsed.success && (role === "editor" || role === "viewer") ? { actor: parsed.data, role } : null;
+  const taken = parsed.success && parsed.data.kind === SEEDER.kind && parsed.data.id === SEEDER.id;
+  return parsed.success && !taken && (role === "editor" || role === "viewer") ? { actor: parsed.data, role } : null;
 }
 function sniffImage(bytes) {
   const at = (offset, ...sig) => sig.every((b, i) => bytes[offset + i] === b);
@@ -1916,13 +2069,35 @@ function createApp(options = {}) {
     await next();
   });
   api.get("/me", (c) => c.json({ actor: c.var.actor.id, kind: c.var.actor.kind, role: c.var.role }));
+  const saveRoom = async (c, seeding) => {
+    if (!options.live) return;
+    const id = c.req.param("id");
+    await c.var.service.assertExists(id);
+    const live = options.live(c.env);
+    await pull(live, c.var.service, id).catch((error) => console.error(JSON.stringify({ level: "error", op: "save-room", message: loggable(error) })));
+    if (seeding) {
+      await seed(live, c.var.service, id).catch((error) => {
+        console.error(JSON.stringify({ level: "error", op: "seed-room", message: loggable(error) }));
+        throw error instanceof CanvasError ? error : new CanvasError("UNAVAILABLE", "the room could not take the stored board. Try again");
+      });
+    }
+  };
+  const sync = async (c, next) => {
+    if (!/\/(ws|checkpoint)$/.test(new URL(c.req.url).pathname)) await saveRoom(c, false);
+    await next();
+  };
+  api.use("/boards/:id/*", sync);
   api.get("/boards/:id/ws", async (c) => {
     if (!options.live) return fail("NOT_FOUND", "this server hosts no live rooms", 404);
     if (c.req.header("upgrade") !== "websocket") return fail("UPGRADE_REQUIRED", "open this route as a WebSocket", 426);
     const id = c.req.param("id");
-    await c.var.service.assertExists(id);
+    await saveRoom(c, true);
     const { actor, role } = c.var;
-    return options.live(c.env).connect(id, c.req.raw, { principal: { id: actor.id, kind: actor.kind }, role, name: actor.id });
+    const opened = await options.live(c.env).connect(id, c.req.raw, { principal: { id: actor.id, kind: actor.kind }, role, name: actor.id });
+    if (opened.status !== 101 || c.req.header("authorization") || !socketToken(c.req.raw)) return opened;
+    const headers = new Headers(opened.headers);
+    headers.set("sec-websocket-protocol", WS_PROTOCOL);
+    return new Response(null, { status: 101, headers, webSocket: opened.webSocket });
   });
   api.get("/boards/:id/state", async (c) => !options.live ? fail("NOT_FOUND", "this server hosts no live rooms", 404) : c.body(new Uint8Array(await c.var.service.state(c.req.param("id"))), 200, { "content-type": "application/octet-stream" }));
   api.post("/boards/:id/checkpoint", async (c) => {
@@ -1931,9 +2106,9 @@ function createApp(options = {}) {
     await c.var.service.assertExists(id);
     const update = await readLimited(c.req.raw, MAX_LIVE_BYTES);
     if (!update) throw new CanvasError("INVALID", `the update must be at most ${MAX_LIVE_BYTES} bytes`);
-    const authors = (await options.live(c.env).meta(id)).contributors.map(({ id: who, kind }) => ({ id: who, kind }));
-    return c.json(await c.var.service.checkpoint(id, update, c.var.actor, authors));
+    return c.json(await handSave(options.live(c.env), c.var.service, id, update, c.var.actor));
   });
+  api.get("/boards", async (c) => c.json({ boards: await c.var.service.list() }));
   api.post("/boards", async (c) => {
     const b = await jsonBody(c);
     const id = b.id === void 0 ? void 0 : text(b.id, "id");
@@ -1949,6 +2124,7 @@ function createApp(options = {}) {
     const b = await jsonBody(c);
     return c.json(await c.var.service.move(c.req.param("id"), text(b.element, "element"), num(b.dx, "dx"), num(b.dy, "dy"), c.var.actor));
   });
+  api.patch("/boards/:id/elements/:element", async (c) => c.json(await c.var.service.update(c.req.param("id"), c.req.param("element"), await jsonBody(c), c.var.actor)));
   api.delete("/boards/:id/elements/:element", async (c) => {
     const removed = await c.var.service.remove(c.req.param("id"), c.req.param("element"));
     console.log(JSON.stringify({ level: "info", op: "remove", actorKind: c.var.actor.kind }));
@@ -1998,6 +2174,7 @@ var app = createApp();
 var worker_default = { fetch: (request, env, ctx) => app.fetch(request, env, ctx) };
 
 export {
+  WS_PROTOCOL,
   authenticate,
   sniffImage,
   createApp,

package/dist/{chunk-AGODNBN7.js → chunk-VHHJIBAB.js}

@@ -1,13 +1,15 @@
 import {
   CanvasError,
+  SHAPE_TYPES
+} from "./chunk-JCYNPYYJ.js";
+import {
   PRINCIPAL_KINDS,
-  SHAPE_TYPES,
   principalSchema
-} from "./chunk-GGQPE65T.js";
+} from "./chunk-SPP6PINW.js";
 
 // src/version.ts
 import { createRequire } from "module";
-var VERSION = true ? "0.3.0" : readPackageVersion();
+var VERSION = true ? "0.5.0" : readPackageVersion();
 
 // src/brand.ts
 var BRAND = {
@@ -16,20 +18,6 @@ var BRAND = {
   version: VERSION
 };
 
-// src/actor.ts
-var ActorConfigError = class extends Error {
-};
-function operatorActor(env = process.env) {
-  const raw = env.CANVAS_ACTOR;
-  if (!raw) throw new ActorConfigError("the operator must set CANVAS_ACTOR=<kind>:<id>");
-  const at = raw.indexOf(":");
-  const parsed = principalSchema.safeParse({ kind: raw.slice(0, at), id: raw.slice(at + 1) });
-  if (at < 0 || !parsed.success) {
-    throw new ActorConfigError(`bad CANVAS_ACTOR "${raw}": use <kind>:<id>, kind is one of ${PRINCIPAL_KINDS.join(", ")}`);
-  }
-  return parsed.data;
-}
-
 // src/png.ts
 var MAX_SIDE = 16384;
 var MAX_PIXELS = 16e6;
@@ -62,6 +50,20 @@ async function svgToPng(svg) {
   }
 }
 
+// src/actor.ts
+var ActorConfigError = class extends Error {
+};
+function operatorActor(env = process.env) {
+  const raw = env.CANVAS_ACTOR;
+  if (!raw) throw new ActorConfigError("the operator must set CANVAS_ACTOR=<kind>:<id>");
+  const at = raw.indexOf(":");
+  const parsed = principalSchema.safeParse({ kind: raw.slice(0, at), id: raw.slice(at + 1) });
+  if (at < 0 || !parsed.success) {
+    throw new ActorConfigError(`bad CANVAS_ACTOR "${raw}": use <kind>:<id>, kind is one of ${PRINCIPAL_KINDS.join(", ")}`);
+  }
+  return parsed.data;
+}
+
 // src/mcp.ts
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
@@ -91,6 +93,11 @@ function createMcpServer(service, actor) {
     { description: "Make a board.", inputSchema: { id: z.string().optional(), title: z.string().optional() } },
     tool(async (a) => json(await service.create(actor, a)))
   );
+  server.registerTool(
+    "list_boards",
+    { description: "List the first 100 boards with their titles.", inputSchema: {}, annotations: read },
+    tool(async () => json({ boards: await service.list() }))
+  );
   server.registerTool(
     "read_board",
     { description: "Read a board as data: nodes, edges, groups, text, and who made what.", inputSchema: { board }, annotations: read },
@@ -121,6 +128,14 @@ function createMcpServer(service, actor) {
     { description: "Join two shapes with an arrow.", inputSchema: { board, from: z.string(), to: z.string(), id: z.string().optional(), text: z.string().optional() } },
     tool(async (a) => json(await service.connect(a.board, { id: a.id, from: { id: a.from }, to: { id: a.to }, text: a.text }, actor)))
   );
+  server.registerTool(
+    "update_element",
+    {
+      description: "Change fields of a shape (x, y, w, h, text, fill, stroke) or a connector. Resize with w and h.",
+      inputSchema: { board, element: z.string(), x: num.optional(), y: num.optional(), w: num.optional(), h: num.optional(), text: z.string().optional(), fill: z.string().optional(), stroke: z.string().optional() }
+    },
+    tool(async ({ board: b, element, ...patch }) => json(await service.update(b, element, patch, actor)))
+  );
   server.registerTool(
     "move",
     { description: "Move an element, or a whole group.", inputSchema: { board, element: z.string(), dx: num, dy: num } },
@@ -158,9 +173,9 @@ async function runMcp(service, actor) {
 export {
   VERSION,
   BRAND,
+  svgToPng,
   ActorConfigError,
   operatorActor,
-  svgToPng,
   createMcpServer,
   runMcp
 };

package/dist/cli.js

@@ -5,17 +5,18 @@ import {
   operatorActor,
   runMcp,
   svgToPng
-} from "./chunk-AGODNBN7.js";
+} from "./chunk-VHHJIBAB.js";
 import {
   openLocalStore
 } from "./chunk-UKST5A57.js";
 import {
   CanvasService
-} from "./chunk-W7NRP3EX.js";
+} from "./chunk-G4YTESPS.js";
+import "./chunk-NWQED42L.js";
 import {
   CanvasError
-} from "./chunk-GGQPE65T.js";
-import "./chunk-NWQED42L.js";
+} from "./chunk-JCYNPYYJ.js";
+import "./chunk-SPP6PINW.js";
 
 // src/cli.ts
 import { readFileSync, writeFileSync } from "fs";
@@ -29,9 +30,11 @@ Usage: ${BRAND.command} [--dir <path>] <command> [flags]
 
 Commands:
   new [--id <id>] [--title <t>]            Make a board.
+  list                                     List the boards with their titles.
   read <board>                             Print the board as JSON.
   add <board> --type <t> --x <n> --y <n>   Add a shape. Also: --w --h --text --fill --stroke --src --id.
   connect <board> <from> <to> [--text <t>] Join two shapes with an arrow.
+  update <board> <element> [--x --y --w --h --text --fill --stroke]  Change fields of an element. Resize with --w and --h.
   move <board> <element> --dx <n> --dy <n> Move an element or a group.
   rm <board> <element>                     Delete an element.
   flow <board> --text <t> | --file <p>     Draw a flowchart from text ("A -> B: label"). Use --file - for stdin.
@@ -118,6 +121,9 @@ async function run(argv) {
     case "new":
       need(0, "[--id <id>] [--title <t>]");
       return print(await service.create(actor(), { id: v.id, title: v.title }));
+    case "list":
+      need(0, "");
+      return print({ boards: await service.list() });
     case "read":
       need(1, "<board>");
       return print(await service.read(board));
@@ -127,6 +133,11 @@ async function run(argv) {
     case "connect":
       need(3, "<board> <from> <to> [--text <t>]");
       return print(await service.connect(board, { id: v.id, from: { id: rest[0] }, to: { id: rest[1] }, text: v.text }, actor()));
+    case "update": {
+      need(2, "<board> <element> [--x <n>] [--y <n>] [--w <n>] [--h <n>] [--text <t>] [--fill <c>] [--stroke <c>]");
+      const patch = Object.fromEntries(Object.entries({ x: num(v.x), y: num(v.y), w: num(v.w), h: num(v.h), text: v.text, fill: v.fill, stroke: v.stroke }).filter(([, value]) => value !== void 0));
+      return print(await service.update(board, rest[0], patch, actor()));
+    }
     case "move":
       need(2, "<board> <element> --dx <n> --dy <n>");
       return print(await service.move(board, rest[0], num(v.dx) ?? Number.NaN, num(v.dy) ?? Number.NaN, actor()));

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-import { E as ErrorCode, B as BoardData, S as ShapeType, a as Shape, b as Endpoint, C as Connector } from './read-BY6f-mmy.js';
+import { E as ErrorCode, a as BoardData, c as ShapeType, S as Shape, d as Endpoint, C as Connector } from './read-BupIJSPJ.js';
 import { PrincipalKind } from 'agentic-identity';
 import 'yjs';
 import 'zod';
@@ -37,6 +37,8 @@ interface ConnectorInput {
     endArrow?: boolean;
     stroke?: string;
 }
+type ShapePatch = Partial<Pick<ShapeInput, "x" | "y" | "w" | "h" | "text" | "fill" | "stroke" | "src">>;
+type ConnectorPatch = Partial<Pick<ConnectorInput, "from" | "to" | "text" | "startArrow" | "endArrow" | "stroke">>;
 interface ImageInfo {
     id: string;
     ref: string;
@@ -62,6 +64,13 @@ interface CanvasClient {
         kind: PrincipalKind;
         role: "editor" | "viewer";
     }>;
+    /** The first 100 boards, with titles. */
+    listBoards(options?: CallOptions): Promise<{
+        boards: {
+            id: string;
+            title: string;
+        }[];
+    }>;
     createBoard(input?: {
         id?: string;
         title?: string;
@@ -81,6 +90,8 @@ interface CanvasClient {
         nodes: string[];
         edges: string[];
     }>;
+    /** Change fields of one shape or connector, such as its size or text. The patch holds at least one field. */
+    update(id: string, element: string, patch: ShapePatch | ConnectorPatch, options?: CallOptions): Promise<Shape | Connector>;
     /** Move an element. Returns the ids that moved: a shape takes its connectors with it. */
     move(id: string, element: string, dx: number, dy: number, options?: CallOptions): Promise<{
         moved: string[];
@@ -105,4 +116,4 @@ interface CanvasClient {
 }
 declare function createClient(options: ClientOptions): CanvasClient;
 
-export { type ApiErrorCode, type CallOptions, CanvasApiError, type CanvasClient, type ClientOptions, type ConnectorInput, type ImageInfo, type ShapeInput, createClient };
+export { type ApiErrorCode, type CallOptions, CanvasApiError, type CanvasClient, type ClientOptions, type ConnectorInput, type ConnectorPatch, type ImageInfo, type ShapeInput, type ShapePatch, createClient };

package/dist/client.js

@@ -55,12 +55,14 @@ function createClient(options) {
   const bytes = async (response) => new Uint8Array(await response.arrayBuffer());
   return {
     me: (o) => json("GET", "/me", void 0, o),
+    listBoards: (o) => json("GET", "/boards", void 0, o),
     createBoard: (input = {}, o) => json("POST", "/boards", input, o),
     readBoard: (id, o) => json("GET", `/boards/${seg(id)}`, void 0, o),
     exportSvg: async (id, o) => (await send("GET", `/boards/${seg(id)}/svg`, {}, o)).text(),
     addShape: (id, shape, o) => json("POST", `/boards/${seg(id)}/shapes`, shape, o),
     addConnector: (id, connector, o) => json("POST", `/boards/${seg(id)}/connectors`, connector, o),
     drawFlow: (id, text, o) => json("POST", `/boards/${seg(id)}/flow`, { text }, o),
+    update: (id, element, patch, o) => json("PATCH", `/boards/${seg(id)}/elements/${seg(element)}`, patch, o),
     move: (id, element, dx, dy, o) => json("POST", `/boards/${seg(id)}/move`, { element, dx, dy }, o),
     remove: (id, element, o) => json("DELETE", `/boards/${seg(id)}/elements/${seg(element)}`, void 0, o),
     uploadImage: async (data, o) => parse(await send("POST", "/images", { body: data, contentType: "application/octet-stream" }, o), o),

package/dist/embed.d.ts

@@ -0,0 +1,46 @@
+import * as react from 'react';
+import { CanvasClient } from './client.js';
+import { PrincipalKind } from 'agentic-identity';
+import './read-BupIJSPJ.js';
+import 'yjs';
+import 'zod';
+
+interface RoomOptions {
+    /** The API root, for example `https://canvas.example.com/api/v1/canvas`. */
+    baseUrl: string;
+    /** The bearer token for the room. */
+    token: string;
+}
+
+/** Who uses the board. The server still checks every write against its own token. */
+interface BoardPrincipal {
+    kind: PrincipalKind;
+    name: 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;
+    principal: BoardPrincipal;
+    /** Open the board read only, even for an editor. */
+    readOnly?: boolean;
+    /** The live room. With one, the board shows who else is here and reads again when they save. */
+    room?: RoomOptions;
+    /** A link for a missing board to go back to. */
+    backHref?: string;
+}
+/** The board for one id, with its toolbar, presence, and side panel. It needs the providers of `agentic-design`. A bad principal shows an alert. */
+declare function BoardEditor(options: BoardEditorOptions): react.JSX.Element;
+interface MountedBoard {
+    /** Show another board, principal, or room in the same place. A bad principal throws and keeps the board as it is. */
+    update(options: BoardEditorOptions): void;
+    /** Remove the board, leave the live room, and stop its timers. */
+    unmount(): void;
+}
+/** 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 };