agentic-canvas 0.4.0 → 0.5.0

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';
 

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-V74PWJKY.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.5.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-design": "^0.2.0",
     "agentic-identity": "^0.5.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",