agentic-canvas 0.4.0 → 0.6.0

package/dist/live.js

@@ -2,12 +2,13 @@ import {
   Board,
   CanvasError,
   drawFlow,
-  principalSchema,
   readBoard,
   toSvg
-} from "./chunk-JZA525X5.js";
+} from "./chunk-JCYNPYYJ.js";
+import "./chunk-SPP6PINW.js";
 
 // src/live.ts
+import { parsePrincipal } from "agentic-identity";
 import { SyncClient } from "agentic-realtime/client";
 var CODES = ["INVALID", "DUPLICATE_ID", "NOT_FOUND", "BAD_REFERENCE", "LIMIT", "UNAVAILABLE", "FORBIDDEN"];
 var base = (server) => server.replace(/\/$/, "") + "/api/v1/canvas";
@@ -31,9 +32,13 @@ async function whoAmI(server, token) {
   const response = await call(server, token, "/me");
   if (!response.ok) throw await refusal(response, "the server refused the token");
   const { actor, kind, role } = await json(response);
-  const principal = principalSchema.safeParse({ kind, id: actor });
-  if (!principal.success || role !== "editor" && role !== "viewer") throw new CanvasError("INVALID", "the server sent an identity this client does not know");
-  return { actor: principal.data, role };
+  let principal;
+  try {
+    principal = parsePrincipal({ kind, id: actor });
+  } catch {
+  }
+  if (!principal || role !== "editor" && role !== "viewer") throw new CanvasError("INVALID", "the server sent an identity this client does not know");
+  return { actor: principal, role };
 }
 var LiveBoard = class _LiveBoard {
   constructor(board, me, client, id, options, refusedAtStart) {

package/dist/{read-Bdg1uiFC.d.ts → read-BupIJSPJ.d.ts}

@@ -5,11 +5,11 @@ declare const principalSchema: z.ZodObject<{
     kind: z.ZodEnum<["human", "agent_of_human", "agent_of_agent", "agent", "user_token"]>;
     id: z.ZodString;
 }, "strict", z.ZodTypeAny, {
-    id: string;
     kind: "human" | "agent_of_human" | "agent_of_agent" | "agent" | "user_token";
-}, {
     id: string;
+}, {
     kind: "human" | "agent_of_human" | "agent_of_agent" | "agent" | "user_token";
+    id: string;
 }>;
 type Principal = z.infer<typeof principalSchema>;
 
@@ -173,4 +173,4 @@ interface BoardData {
 /** The board as plain data for an agent. Reads only. Embedded image bytes are left out. */
 declare function readBoard(board: Board): BoardData;
 
-export { type BoardData as B, type Connector as C, type ErrorCode as E, type Group as G, MAX_ELEMENTS as M, type NodeData as N, type Principal as P, type ShapeType as S, type Shape as a, type Endpoint as b, Board as c, type CanvasElement as d, CanvasError as e, type EdgeData as f, MAX_TEXT as g, SHAPE_TYPES as h, principalSchema as p, readBoard as r };
+export { Board as B, type Connector as C, type ErrorCode as E, type Group as G, MAX_ELEMENTS as M, type NodeData as N, type Principal as P, type Shape as S, type BoardData as a, type CanvasElement as b, type ShapeType as c, type Endpoint as d, CanvasError as e, type EdgeData as f, MAX_TEXT as g, SHAPE_TYPES as h, principalSchema as p, readBoard as r };

package/dist/{service-Cim7TWnJ.d.ts → service-CR4-r1yx.d.ts}

@@ -1,4 +1,4 @@
-import { S as ShapeType, c as Board, P as Principal, B as BoardData, a as Shape, C as Connector, d as CanvasElement } from './read-Bdg1uiFC.js';
+import { c as ShapeType, B as Board, P as Principal, a as BoardData, S as Shape, C as Connector, b as CanvasElement } from './read-BupIJSPJ.js';
 import { Store } from 'agentic-identity';
 
 declare const MAX_FLOW_NODES = 500;

package/dist/ui.css

@@ -0,0 +1,38 @@
+/* Every rule is nested under .cv-root, so the styles do not reach the host page. */
+.cv-root {
+  .row { display: flex; align-items: center; justify-content: space-between; gap: var(--ad-space-4); flex-wrap: wrap; }
+  .failure { border: 1px solid var(--ad-color-danger); border-radius: var(--ad-radius-md); padding: var(--ad-space-4); color: var(--ad-color-danger-text); background: var(--ad-color-danger-subtle); display: grid; gap: var(--ad-space-3); justify-items: start; }
+  .note { color: var(--ad-color-text-muted); }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  .board { display: grid; gap: var(--ad-space-3); }
+  .stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--ad-space-3); height: 65vh; min-height: 22rem; }
+  @media (max-width: 48rem) { .stage { grid-template-columns: 1fr; height: auto; } .canvas { height: 55vh; } }
+  .canvas { background: var(--ad-color-surface-sunken); border: 1px solid var(--ad-color-border); border-radius: var(--ad-radius-md); overflow: hidden; touch-action: none; min-height: 18rem; }
+  .canvas:focus-visible { outline: 3px solid var(--ad-color-focus); outline-offset: 2px; }
+  .canvas svg { display: block; cursor: grab; font-family: var(--ad-font-family-sans); font-size: 14px; }
+  .item { outline: none; cursor: pointer; }
+  .shape { fill: var(--ad-color-surface-raised); stroke: var(--ad-color-border-strong); stroke-width: 1.5; }
+  .shape.text { fill: transparent; stroke: none; }
+  .shape.frame, .shape.image { fill: none; stroke-dasharray: 6 4; pointer-events: visiblePainted; }
+  .shape.sticky { fill: #ffe08a; stroke: #7a5b00; }
+  .label { fill: var(--ad-color-text); pointer-events: none; }
+  .sticky-label { fill: #1b1b1b; }
+  .edge { stroke: var(--ad-color-text-muted); stroke-width: 2; fill: none; pointer-events: none; }
+  .hit { stroke: transparent; stroke-width: 14; }
+  .arrowhead { fill: var(--ad-color-text-muted); }
+  .edge-text { fill: var(--ad-color-text); paint-order: stroke; stroke: var(--ad-color-surface-sunken); stroke-width: 4px; pointer-events: none; }
+  .ring, .ring-line { fill: none; stroke: none; stroke-width: 3; pointer-events: none; }
+  .item.selected .ring, .item.selected .ring-line, .item:focus-visible .ring, .item:focus-visible .ring-line { stroke: var(--ad-color-focus); }
+  .item:focus-visible .ring, .item:focus-visible .ring-line { stroke-width: 4; }
+  .handle { fill: var(--ad-color-focus); stroke: var(--ad-color-bg); stroke-width: 2; cursor: nwse-resize; }
+  .agent-badge rect { fill: var(--ad-color-agent-subtle); stroke: var(--ad-color-agent); }
+  .agent-badge text { fill: var(--ad-color-agent-text); font-size: 11px; font-weight: 600; pointer-events: none; }
+  .empty-overlay { position: absolute; inset: 0 16rem 0 0; display: grid; place-items: center; pointer-events: none; }
+  @media (max-width: 48rem) { .empty-overlay { inset: 0; bottom: auto; height: 55vh; } }
+  .inspector { border: 1px solid var(--ad-color-border); border-radius: var(--ad-radius-md); padding: var(--ad-space-3); background: var(--ad-color-surface); display: grid; gap: var(--ad-space-3); align-content: start; overflow: auto; }
+  .inspector h2 { margin: 0; font-size: var(--ad-font-size-lg); }
+  .inspector form { display: grid; gap: var(--ad-space-3); }
+  .inspector .by { margin: 0; color: var(--ad-color-text-muted); font-size: var(--ad-font-size-sm); }
+  .sizes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ad-space-2); }
+}

package/dist/worker.d.ts

@@ -2,8 +2,8 @@ import { Blobs } from 'agentic-identity';
 import { Realtime } from 'agentic-realtime';
 import { D1Like, R2Like } from 'agentic-identity/cloudflare';
 import { Hono } from 'hono';
-import { P as Principal } from './read-Bdg1uiFC.js';
-import { C as CanvasService } from './service-Cim7TWnJ.js';
+import { P as Principal } from './read-BupIJSPJ.js';
+import { C as CanvasService } from './service-CR4-r1yx.js';
 import 'yjs';
 import 'zod';
 
@@ -40,13 +40,13 @@ interface AppOptions {
     /** Makes the live-room server from the Worker bindings. Without it, the ws route answers 404. */
     live?: (env: WorkerEnv) => Realtime;
 }
-/** A browser cannot set a header on a WebSocket. It offers the token as the sub-protocols `agentic-canvas.bearer` and the token in base64url. */
-declare const WS_PROTOCOL = "agentic-canvas.bearer";
+/** A browser cannot set a header on a WebSocket. It offers the sub-protocols `agentic-canvas` and `agentic-canvas.bearer.<token in base64url>`. */
+declare const WS_PROTOCOL = "agentic-canvas";
 /** The principal and role for a bearer token, or null. The kind is never defaulted: a grant without a valid kind gets null. */
-declare function authenticate(request: Request, env: WorkerEnv): {
+declare function authenticate(request: Request, env: WorkerEnv): Promise<{
     actor: Principal;
     role: Role;
-} | null;
+} | null>;
 /** The image types we accept, found by their first bytes. The client's claim of a type is not trusted. */
 declare function sniffImage(bytes: Uint8Array): string | null;
 declare function createApp(options?: AppOptions): Hono<App>;

package/dist/worker.js

@@ -4,10 +4,11 @@ import {
   createApp,
   sniffImage,
   worker_default
-} from "./chunk-HPUYT5TC.js";
-import "./chunk-J52RPFRP.js";
-import "./chunk-JZA525X5.js";
+} from "./chunk-BIIC2DPZ.js";
+import "./chunk-G4YTESPS.js";
 import "./chunk-NWQED42L.js";
+import "./chunk-JCYNPYYJ.js";
+import "./chunk-SPP6PINW.js";
 export {
   WS_PROTOCOL,
   authenticate,

package/llms.txt

@@ -5,11 +5,13 @@ A shared whiteboard for diagrams, drawn by people and agents.
 Keywords: whiteboard,canvas,diagrams,drawing,collaboration,agents,mcp,cli.
 
 - SDK: import { Board, drawFlow, readBoard, toSvg } from "agentic-canvas".
+- Exports: the README "Exports" section lists every name of each entry point: agentic-canvas, /client, /file-store, /live, /worker and /live-worker.
 - CLI: agentic-canvas new|list|read|add|connect|update|move|rm|flow|export.
 - UI: the Worker serves a web UI at its root (run `npm run build`, then `wrangler dev`). A person signs in with a bearer token.
 - Live: set CANVAS_SERVER and CANVAS_TOKEN, and the CLI and `agentic-canvas mcp` edit the board in its live room.
 - SDK: import { LiveBoard, LiveService } from "agentic-canvas/live".
 - SDK: import { createClient, CanvasApiError } from "agentic-canvas/client". It calls the Worker API with fetch. Methods: me, listBoards, createBoard, readBoard, exportSvg, addShape, addConnector, drawFlow, update, move, remove, uploadImage, getImage, state, checkpoint. A failure throws CanvasApiError with `code` and `status`. No retries.
+- UI: import { mount } from "agentic-canvas/ui"; import "agentic-canvas/ui.css" (with agentic-design/styles.css). mount(element, { boardId, client, principal: { kind, name, role }, readOnly?, room?: { baseUrl, token } }) renders the board and returns { update(options), unmount() }. BoardEditor is the same as a React component. React 19 is a peer dependency.
 
 ## Docs
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentic-canvas",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "A shared whiteboard for diagrams, drawn by people and agents.",
   "keywords": [
     "whiteboard",
@@ -58,13 +58,18 @@
     "./file-store": {
       "types": "./dist/store-file.d.ts",
       "import": "./dist/store-file.js"
-    }
+    },
+    "./ui": {
+      "types": "./dist/embed.d.ts",
+      "import": "./dist/embed.js"
+    },
+    "./ui.css": "./dist/ui.css"
   },
   "bin": {
     "agentic-canvas": "./dist/cli.js"
   },
   "scripts": {
-    "build": "tsup && vite build",
+    "build": "tsup && vite build && node ui/build-css.mjs",
     "typecheck": "tsc --noEmit && tsc --noEmit -p ui",
     "test": "vitest run",
     "clean": "rm -rf dist",
@@ -75,28 +80,38 @@
   "dependencies": {
     "@dagrejs/dagre": "^3.1.3",
     "@modelcontextprotocol/sdk": "^1.12.0",
-    "agentic-identity": "^0.5.0",
+    "agentic-design": "^0.2.0",
+    "agentic-identity": "^0.6.0",
     "agentic-realtime": "^0.3.0",
     "yjs": "^13.6.0",
     "zod": "^3.25.0"
   },
   "peerDependencies": {
-    "playwright-core": ">=1.40.0"
+    "playwright-core": ">=1.40.0",
+    "react": ">=19",
+    "react-dom": ">=19"
   },
   "peerDependenciesMeta": {
     "playwright-core": {
       "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.14.0",
     "@playwright/test": "^1.64.1",
+    "@types/jsdom": "^21.1.7",
     "@types/node": "^22.0.0",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^5.2.0",
-    "agentic-design": "^0.2.0",
     "hono": "^4.13.14",
+    "jsdom": "^26.0.0",
     "miniflare": "^4.20260730.0",
     "playwright-core": "^1.64.1",
     "react": "^19.3.1",