agentic-canvas 0.3.0 → 0.5.0

package/dist/live.js

@@ -2,14 +2,15 @@ import {
   Board,
   CanvasError,
   drawFlow,
-  principalSchema,
   readBoard,
   toSvg
-} from "./chunk-GGQPE65T.js";
+} from "./chunk-JCYNPYYJ.js";
+import {
+  principalSchema
+} from "./chunk-SPP6PINW.js";
 
 // src/live.ts
 import { SyncClient } from "agentic-realtime/client";
-import * as Y from "yjs";
 var CODES = ["INVALID", "DUPLICATE_ID", "NOT_FOUND", "BAD_REFERENCE", "LIMIT", "UNAVAILABLE", "FORBIDDEN"];
 var base = (server) => server.replace(/\/$/, "") + "/api/v1/canvas";
 async function refusal(response, fallback) {
@@ -61,7 +62,7 @@ var LiveBoard = class _LiveBoard {
     const id = encodeURIComponent(options.board);
     const stored = await call(options.server, options.token, `/boards/${id}/state`);
     if (!stored.ok) throw await refusal(stored, "could not read the stored board");
-    const state = new Uint8Array(await stored.arrayBuffer());
+    await stored.body?.cancel();
     const url = new URL(`${base(options.server)}/boards/${id}/ws`);
     url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
     let client;
@@ -70,14 +71,6 @@ var LiveBoard = class _LiveBoard {
     } catch (error) {
       throw unreachable(error);
     }
-    try {
-      Y.applyUpdate(client.doc, state);
-      await client.flush();
-      if (me.role === "editor" && client.denied.length > 0) throw new CanvasError("FORBIDDEN", `the room refused the stored board: ${client.denied[0]}`);
-    } catch (error) {
-      await client.disconnect();
-      throw unreachable(error);
-    }
     return new _LiveBoard(new Board(client.doc), me, client, options.board, options, client.denied.length);
   }
   /** The other people and agents in the room. `machine` is true for an agent. */
@@ -142,6 +135,13 @@ var LiveService = class {
     if (typeof id !== "string" || typeof title !== "string") throw new CanvasError("INVALID", "the server sent a board this client does not know");
     return { id, title };
   }
+  async list() {
+    const response = await call(this.options.server, this.options.token, "/boards");
+    if (!response.ok) throw await refusal(response, "the server refused the request");
+    const { boards } = await json(response);
+    if (!Array.isArray(boards) || !boards.every((b) => typeof b?.id === "string" && typeof b?.title === "string")) throw new CanvasError("INVALID", "the server sent a board list this client does not know");
+    return boards;
+  }
   async read(id) {
     return this.use(id, async (live) => ({ id, ...readBoard(live.board) }));
   }
@@ -154,6 +154,9 @@ var LiveService = class {
   connect(id, connector, _actor) {
     return this.write(id, (board, actor) => board.addConnector(connector, actor));
   }
+  update(id, element, patch, _actor) {
+    return this.write(id, (board, actor) => board.update(element, patch, actor));
+  }
   move(id, element, dx, dy, _actor) {
     return this.write(id, (board, actor) => ({ moved: board.move(element, dx, dy, actor) }));
   }

package/dist/{read-BY6f-mmy.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>;
 
@@ -108,8 +108,17 @@ declare class Board {
      * author, and a changed one needs a trusted editor or it goes back to its prior state. An editor stamp changed alone
      * to an untrusted principal is put back. Unknown keys, nested Yjs types, and bad or foreign title values are deleted
      * or undone. Returns the ids it deleted or restored.
+     *
+     * `writer` says who sent the update that holds a Yjs item, or undefined when it does not know. Where it knows, it
+     * decides: a new element gets its creator as author and editor, and an old one gets the sender of its changes as editor.
+     * A client cannot claim another principal, and an agent cannot pass as a person. A new item that the log lacks has no
+     * sender: it is deleted or undone. Only an old item falls back to `trusted`. A hand save names its poster as the sender
+     * of every item that the room does not hold, in `writer`.
      */
-    restamp(prior: Board, trusted: (who: Principal) => boolean): string[];
+    restamp(prior: Board, trusted: (who: Principal) => boolean, writer?: (item: {
+        client: number;
+        clock: number;
+    }) => Principal | undefined): string[];
     addShape(input: unknown, actor: Principal): Shape;
     addConnector(input: unknown, actor: Principal): Connector;
     update(elementId: string, patch: unknown, actor: Principal): CanvasElement;
@@ -164,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-Cpl6wKeY.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 } from './read-BY6f-mmy.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;
@@ -47,6 +47,11 @@ declare function drawFlow(board: Board, source: string, actor: Principal, option
     edges: string[];
 };
 
+/** Who sent the Yjs item with this id, if the room knows. */
+type Writer = (item: {
+    client: number;
+    clock: number;
+}) => Principal | undefined;
 /** One place for every board operation. The CLI, the MCP server, and the Worker call it. */
 declare class CanvasService {
     private readonly store;
@@ -58,6 +63,11 @@ declare class CanvasService {
         id: string;
         title: string;
     }>;
+    /** The first 100 boards (the store sorts by id), with titles. A board whose stored bytes are damaged shows an empty title: it stays in the list so a person can find and repair it. */
+    list(): Promise<{
+        id: string;
+        title: string;
+    }[]>;
     /** Throws NOT_FOUND unless the board exists. A live room opens only for a board that exists. */
     assertExists(id: string): Promise<void>;
     read(id: string): Promise<BoardData & {
@@ -67,6 +77,8 @@ declare class CanvasService {
     change<R>(id: string, change: (board: Board) => R): Promise<R>;
     add(id: string, shape: unknown, actor: Principal): Promise<Shape>;
     connect(id: string, connector: unknown, actor: Principal): Promise<Connector>;
+    /** Change fields of one shape or connector: position, size, text, colors. */
+    update(id: string, elementId: string, patch: unknown, actor: Principal): Promise<CanvasElement>;
     move(id: string, elementId: string, dx: number, dy: number, actor: Principal): Promise<{
         moved: string[];
     }>;
@@ -80,18 +92,25 @@ declare class CanvasService {
     exportSvg(id: string): Promise<string>;
     /** The stored board as a Yjs update. A client applies it to a room to seed it: the room does not read it. */
     state(id: string): Promise<Uint8Array>;
+    /** What the stored board has that a room with state `room` lacks, as a Yjs update, or null when the room has all of it. */
+    missingFrom(id: string, room?: Uint8Array): Promise<Uint8Array | null>;
     /**
-     * Merge a live room's state into the stored board. `authors` are the principals the room saw send updates.
+     * `writer` names who sent each Yjs item, from the room's log. It sets the stamps where it knows (see `Board.restamp`).
+     * Merge a live room's state into the stored board. `authors` are the principals the room saw send updates. A null
+     * `actor` trusts only them: the Worker saves a room that way, with nobody present to vouch.
      * An element stamped by anyone else is deleted, and a changed author is put back (see `Board.restamp`),
      * so a client that writes raw Yjs cannot put another author on its work. Broken entries are repaired and
      * a board past the element cap is refused. Returns the ids the checks fixed.
      *
      * Limits: the save corrects the stored board only. The room keeps what its clients wrote, so a client that sees
      * a non-empty `fixed` must join again, or its later edits are lost at the next save. The room remembers its
-     * authors for good, so a client may stamp an element with the name of anyone who once sent an update in that room.
+     * authors for good, so an OLD item that the log does not name (a seeded one, or a range the log dropped) keeps the older rule: its
+     * stamp may name anyone who once sent an update in that room. A NEW item with no writer is deleted or undone.
+     * The log records who adds an item, not who deletes a key: a deleted optional key is credited to the writer of the editor
+     * stamp written in the same save, or undone if there is none.
      * A client that adds a root type of its own makes every later save of that room fail, because the room keeps it.
      */
-    checkpoint(id: string, update: Uint8Array, actor: Principal, authors?: Principal[]): Promise<{
+    checkpoint(id: string, update: Uint8Array, actor: Principal | null, authors?: Principal[], writer?: Writer): Promise<{
         elements: number;
         fixed: string[];
     }>;
@@ -104,6 +123,6 @@ declare class CanvasService {
     private load;
 }
 /** What the CLI and the MCP server need. `CanvasService` runs it on a store, and `LiveService` runs it in a live room. */
-type BoardAccess = Pick<CanvasService, "create" | "read" | "add" | "connect" | "move" | "remove" | "flow" | "exportSvg">;
+type BoardAccess = Pick<CanvasService, "create" | "list" | "read" | "update" | "add" | "connect" | "move" | "remove" | "flow" | "exportSvg">;
 
 export { type BoardAccess as B, CanvasService as C, type DrawOptions as D, type FlowEdge as F, MAX_FLOW_EDGES as M, type Placement as P, type FlowGraph as a, type FlowNode as b, MAX_FLOW_NODES as c, drawFlow as d, layoutFlow as l, parseFlow as p };

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-BY6f-mmy.js';
-import { C as CanvasService } from './service-Cpl6wKeY.js';
+import { P as Principal } from './read-BupIJSPJ.js';
+import { C as CanvasService } from './service-CR4-r1yx.js';
 import 'yjs';
 import 'zod';
 
@@ -40,6 +40,8 @@ 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";
 /** 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): {
     actor: Principal;
@@ -52,4 +54,4 @@ declare const _default: {
     fetch: (request: Request, env: WorkerEnv, ctx: unknown) => Response | Promise<Response>;
 };
 
-export { type AppOptions, type Role, type WorkerEnv, authenticate, createApp, _default as default, sniffImage };
+export { type AppOptions, type Role, WS_PROTOCOL, type WorkerEnv, authenticate, createApp, _default as default, sniffImage };

package/dist/worker.js

@@ -1,13 +1,16 @@
 import {
+  WS_PROTOCOL,
   authenticate,
   createApp,
   sniffImage,
   worker_default
-} from "./chunk-V477KSZQ.js";
-import "./chunk-W7NRP3EX.js";
-import "./chunk-GGQPE65T.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,
   createApp,
   worker_default as default,

package/llms.txt

@@ -5,10 +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".
-- CLI: agentic-canvas new|read|add|connect|move|rm|flow|export.
+- 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, createBoard, readBoard, exportSvg, addShape, addConnector, drawFlow, move, remove, uploadImage, getImage, state, checkpoint. A failure throws CanvasApiError with `code` and `status`. No retries.
+- 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.3.0",
+  "version": "0.5.0",
   "description": "A shared whiteboard for diagrams, drawn by people and agents.",
   "keywords": [
     "whiteboard",
@@ -58,41 +58,67 @@
     "./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",
-    "typecheck": "tsc --noEmit",
+    "build": "tsup && vite build && node ui/build-css.mjs",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p ui",
     "test": "vitest run",
     "clean": "rm -rf dist",
-    "ci:local": "npm run build && npm run typecheck && npm test"
+    "ci:local": "npm run build && npm run typecheck && npm test && npm run test:e2e",
+    "deploy:demo": "wrangler deploy -c wrangler.demo.jsonc",
+    "test:e2e": "playwright test -c e2e/playwright.config.ts"
   },
   "dependencies": {
     "@dagrejs/dagre": "^3.1.3",
     "@modelcontextprotocol/sdk": "^1.12.0",
-    "agentic-identity": "^0.4.0",
-    "agentic-realtime": "^0.1.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",
     "hono": "^4.13.14",
+    "jsdom": "^26.0.0",
     "miniflare": "^4.20260730.0",
     "playwright-core": "^1.64.1",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "tsup": "^8.0.0",
     "typescript": "^5.6.0",
+    "vite": "^7.3.7",
     "vitest": "^3.0.0",
     "wrangler": "^4.155.0"
   }