agentic-canvas 0.11.0 → 0.12.0

package/README.md

@@ -7,7 +7,7 @@
 
 A shared whiteboard for diagrams, drawn by people and agents.
 
-> Status: 0.11.0. The board model, the agent operations, the exports, the CLI, the
+> Status: 0.12.0. The board model, the agent operations, the exports, the CLI, the
 > MCP server, a small Worker API, and live co-editing work. The CLI, the MCP server,
 > and the SDK can join a live room. A remote client calls the Worker API. A small web UI, served by the Worker, is new in 0.4.0.
 > The package exports `agentic-canvas/ui`, a board view you can mount in your own app, new in 0.5.0.
@@ -111,6 +111,24 @@ There is one method per route: `me`, `listBoards`, `createBoard`, `readBoard`, `
 and status 0. The client never retries. A 503 means "try again", and the caller decides, because a
 repeated write can change a board twice. Pass `fetch` to use your own.
 
+## Run locally
+
+```sh
+git clone https://github.com/pooriaarab/agentic-canvas
+cd agentic-canvas
+npm install && npm run dev
+```
+
+You can also use `bun install && bun run dev`. The `dev` script calls npm, so npm must be installed. The scripts need macOS, Linux, or WSL. The `dev` script builds the package, then starts `wrangler dev` on <http://localhost:8793>. Wrangler keeps a local D1 database. The `dev` script turns off Wrangler telemetry. Set `WRANGLER_SEND_METRICS=false` when you run other wrangler commands.
+
+```sh
+curl -i http://localhost:8793/health   # 200
+```
+
+The `dev` script sets `CANVAS_REGION=unknown`, which local Wrangler needs. The API answers 401 until you sign in. For local work, see the dev fallback in "Auth".
+
+`npm run dev:smoke` runs the same check by itself. It starts the dev server. It waits for `/health` to answer 200. It stops the server. CI runs it as the "dev smoke" step. To use another port, change `8793` in the `dev` and `dev:smoke` scripts.
+
 ## Live demo
 
 A demo Worker runs on workers.dev: <https://agentic-canvas-demo.hello-fd1.workers.dev>. `GET /health` answers 200
@@ -240,7 +258,7 @@ What it does:
 
 - Lists boards, makes a board, and opens one. Empty, loading, and error states have a retry.
 - Draws shapes, connectors, text, and sticky notes. Select, move, resize, connect, and delete an
-  item. Pan by dragging the background, zoom with the wheel or the toolbar.
+  item. Pan by dragging the background, zoom with the wheel or the zoom controls on the canvas.
 - Marks an item an agent wrote with an "Agent" tag and in its accessible name. The side panel shows
   who made the item and who last edited it.
 - Shows who is in the board, from the live room (`agentic-realtime`). Edits go over the HTTP API.

package/dist/{chunk-EE725BJ3.js → chunk-A4YK2SWM.js}

@@ -6,7 +6,7 @@ import {
 
 // src/version.ts
 import { createRequire } from "module";
-var VERSION = true ? "0.11.0" : readPackageVersion();
+var VERSION = true ? "0.12.0" : readPackageVersion();
 
 // src/brand.ts
 var BRAND = {

package/dist/cli.js

@@ -5,7 +5,7 @@ import {
   operatorActor,
   runMcp,
   svgToPng
-} from "./chunk-EE725BJ3.js";
+} from "./chunk-A4YK2SWM.js";
 import {
   openLocalStore
 } from "./chunk-NRLF6MGR.js";

package/dist/embed.js

@@ -477,25 +477,29 @@ function BoardView({ id, client: remote, host, room: roomOptions, me, backHref }
   const empty = d.nodes.length === 0 && d.edges.length === 0;
   return /* @__PURE__ */ jsxs3("section", { className: "board", "aria-labelledby": "board-h", children: [
     /* @__PURE__ */ jsxs3("div", { className: "row", children: [
-      /* @__PURE__ */ jsx3("h1", { id: "board-h", children: d.title || d.id }),
+      /* @__PURE__ */ jsxs3("div", { className: "heading", children: [
+        /* @__PURE__ */ jsx3("h1", { id: "board-h", children: d.title || d.id }),
+        /* @__PURE__ */ jsx3("p", { className: "note", role: "status", children: editable ? status : "" })
+      ] }),
       /* @__PURE__ */ jsx3(PresenceStack, { entries: [{ id: "me", name: me.actor, kind: me.kind === "human" ? "person" : "agent" }, ...peers], label: live ? "In this board" : "In this board (not live)" })
     ] }),
-    /* @__PURE__ */ jsxs3(Toolbar, { label: "Board tools", children: [
-      TOOLS.map((t) => /* @__PURE__ */ jsx3(ToolbarButton, { label: t.text, icon: t.icon, disabled: !editable, onClick: () => add(t.type) }, t.type)),
-      /* @__PURE__ */ jsx3(ToolbarSeparator, {}),
-      /* @__PURE__ */ jsx3(ToolbarButton, { label: "Zoom out", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 10h12" })), onClick: () => zoom(1 / 1.25) }),
-      /* @__PURE__ */ jsx3(ToolbarButton, { label: "Zoom in", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 10h12M10 4v12" })), onClick: () => zoom(1.25) }),
-      /* @__PURE__ */ jsx3(ToolbarButton, { label: "Pan left", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M12 4l-6 6 6 6" })), onClick: () => setView((v) => ({ ...v, x: v.x + PAN_STEP })) }),
-      /* @__PURE__ */ jsx3(ToolbarButton, { label: "Pan right", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M8 4l6 6-6 6" })), onClick: () => setView((v) => ({ ...v, x: v.x - PAN_STEP })) }),
-      /* @__PURE__ */ jsx3(ToolbarButton, { label: "Pan up", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 12l6-6 6 6" })), onClick: () => setView((v) => ({ ...v, y: v.y + PAN_STEP })) }),
-      /* @__PURE__ */ jsx3(ToolbarButton, { label: "Pan down", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 8l6 6 6-6" })), onClick: () => setView((v) => ({ ...v, y: v.y - PAN_STEP })) }),
-      /* @__PURE__ */ jsx3(ToolbarButton, { label: "Reset view", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 4h5M4 4v5M16 16h-5M16 16v-5" })), onClick: () => setView(HOME) })
-    ] }),
-    /* @__PURE__ */ jsx3("p", { className: "note", role: "status", children: editable ? status : "" }),
     !editable && /* @__PURE__ */ jsx3("p", { className: "note", children: host ? "This board is read only." : "This token can read the board but not change it." }),
-    /* @__PURE__ */ jsxs3("div", { className: "stage", ref: canvasBox, children: [
-      /* @__PURE__ */ jsx3(Canvas, { data: d, selected, editable, view, onView: setView, onSelect: setSelected, onMove: move, onResize: resize, onDelete: remove }),
-      empty && /* @__PURE__ */ jsx3("div", { className: "empty-overlay", children: /* @__PURE__ */ jsx3(EmptyState, { title: "This board is empty", description: editable ? "Add a shape or a note with the tools above." : "Nothing has been drawn yet." }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "stage", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "surface", ref: canvasBox, children: [
+        /* @__PURE__ */ jsx3("div", { className: "palette", children: /* @__PURE__ */ jsx3(Toolbar, { label: "Shape palette", children: TOOLS.map((t) => /* @__PURE__ */ jsx3(ToolbarButton, { label: t.text, icon: t.icon, disabled: !editable, onClick: () => add(t.type) }, t.type)) }) }),
+        /* @__PURE__ */ jsx3("div", { className: "zoom", children: /* @__PURE__ */ jsxs3(Toolbar, { label: "Zoom and pan", children: [
+          /* @__PURE__ */ jsx3(ToolbarButton, { label: "Zoom out", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 10h12" })), onClick: () => zoom(1 / 1.25) }),
+          /* @__PURE__ */ jsx3(ToolbarButton, { label: "Zoom in", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 10h12M10 4v12" })), onClick: () => zoom(1.25) }),
+          /* @__PURE__ */ jsx3(ToolbarSeparator, {}),
+          /* @__PURE__ */ jsx3(ToolbarButton, { label: "Pan left", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M12 4l-6 6 6 6" })), onClick: () => setView((v) => ({ ...v, x: v.x + PAN_STEP })) }),
+          /* @__PURE__ */ jsx3(ToolbarButton, { label: "Pan right", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M8 4l6 6-6 6" })), onClick: () => setView((v) => ({ ...v, x: v.x - PAN_STEP })) }),
+          /* @__PURE__ */ jsx3(ToolbarButton, { label: "Pan up", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 12l6-6 6 6" })), onClick: () => setView((v) => ({ ...v, y: v.y + PAN_STEP })) }),
+          /* @__PURE__ */ jsx3(ToolbarButton, { label: "Pan down", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 8l6 6 6-6" })), onClick: () => setView((v) => ({ ...v, y: v.y - PAN_STEP })) }),
+          /* @__PURE__ */ jsx3(ToolbarButton, { label: "Reset view", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 4h5M4 4v5M16 16h-5M16 16v-5" })), onClick: () => setView(HOME) })
+        ] }) }),
+        /* @__PURE__ */ jsx3(Canvas, { data: d, selected, editable, view, onView: setView, onSelect: setSelected, onMove: move, onResize: resize, onDelete: remove }),
+        empty && /* @__PURE__ */ jsx3("div", { className: "empty-overlay", children: /* @__PURE__ */ jsx3(EmptyState, { title: "This board is empty", description: editable ? "Pick a shape from the palette to start." : "Nothing has been drawn yet." }) })
+      ] }),
       /* @__PURE__ */ jsx3(Inspector, { item, nodes: d.nodes, editable, onText: (text) => item && write(() => client.update(id, item.id, { text }), "Could not save the text"), onPlace: place, onDelete: remove, onConnect: (to) => item && write(() => client.addConnector(id, { from: { id: item.id }, to: { id: to } }), "Could not connect") }, item?.id ?? "none")
     ] })
   ] });

package/dist/index.js

@@ -6,7 +6,7 @@ import {
   operatorActor,
   runMcp,
   svgToPng
-} from "./chunk-EE725BJ3.js";
+} from "./chunk-A4YK2SWM.js";
 import {
   createFileStore,
   openLocalStore

package/dist/ui.css

@@ -5,32 +5,40 @@
   .note { color: var(--agd-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(--agd-space-3); }
-  .stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--agd-space-3); height: 65vh; min-height: 22rem; }
+  .board { display: grid; gap: var(--agd-space-4); }
+  .heading { display: grid; gap: var(--agd-space-1); }
+  .heading h1, .heading .note { margin: 0; }
+  .heading .note { font-size: var(--agd-font-size-sm); min-height: 1.25em; }
+  .stage { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--agd-space-4); height: 68vh; min-height: 24rem; }
+  /* The palette and the zoom controls float on the canvas, so the page keeps one calm surface. They come before the canvas, so Tab reaches them first. */
+  .surface { position: relative; min-height: 18rem; }
+  .palette, .zoom { position: absolute; z-index: 1; left: var(--agd-space-3); max-width: calc(100% - 2 * var(--agd-space-3)); }
+  .palette { top: var(--agd-space-3); }
+  .zoom { bottom: var(--agd-space-3); }
+  .palette .agd-toolbar, .zoom .agd-toolbar { flex-wrap: wrap; box-shadow: var(--agd-shadow-raised); }
+  .canvas { height: 100%; box-sizing: border-box; background-color: var(--agd-color-surface); background-image: radial-gradient(var(--agd-color-border) 1px, transparent 1px); background-size: 24px 24px; border: 1px solid var(--agd-color-border); border-radius: var(--agd-radius-lg); overflow: hidden; touch-action: none; min-height: 18rem; }
   @media (max-width: 48rem) { .stage { grid-template-columns: 1fr; height: auto; } .canvas { height: 55vh; } }
-  .canvas { background: var(--agd-color-surface-sunken); border: 1px solid var(--agd-color-border); border-radius: var(--agd-radius-md); overflow: hidden; touch-action: none; min-height: 18rem; }
   .canvas:focus-visible { outline: 3px solid var(--agd-color-focus); outline-offset: 2px; }
   .canvas svg { display: block; cursor: grab; font-family: var(--agd-font-family-sans); font-size: 14px; }
   .item { outline: none; cursor: pointer; }
-  .shape { fill: var(--agd-color-surface-raised); stroke: var(--agd-color-border-strong); stroke-width: 1.5; }
+  .shape { fill: var(--agd-color-surface-raised); stroke: var(--agd-color-border-strong); stroke-width: 1; }
   .shape.text { fill: transparent; stroke: none; }
   .shape.frame, .shape.image { fill: none; stroke-dasharray: 6 4; pointer-events: visiblePainted; }
   .shape.sticky { fill: var(--agd-color-warning-subtle); stroke: var(--agd-color-warning); }
   .label { fill: var(--agd-color-text); pointer-events: none; }
   .sticky-label { fill: var(--agd-color-warning-text); }
-  .edge { stroke: var(--agd-color-text-muted); stroke-width: 2; fill: none; pointer-events: none; }
+  .edge { stroke: var(--agd-color-text-muted); stroke-width: 1.5; fill: none; pointer-events: none; }
   .hit { stroke: transparent; stroke-width: 14; }
   .arrowhead { fill: var(--agd-color-text-muted); }
-  .edge-text { fill: var(--agd-color-text); paint-order: stroke; stroke: var(--agd-color-surface-sunken); stroke-width: 4px; pointer-events: none; }
+  .edge-text { fill: var(--agd-color-text); paint-order: stroke; stroke: var(--agd-color-surface); 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(--agd-color-focus); }
   .item:focus-visible .ring, .item:focus-visible .ring-line { stroke-width: 4; }
   .handle { fill: var(--agd-color-focus); stroke: var(--agd-color-bg); stroke-width: 2; cursor: nwse-resize; }
   .agent-badge rect { fill: var(--agd-color-agent-subtle); stroke: var(--agd-color-agent); }
   .agent-badge text { fill: var(--agd-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(--agd-color-border); border-radius: var(--agd-radius-md); padding: var(--agd-space-3); background: var(--agd-color-surface); display: grid; gap: var(--agd-space-3); align-content: start; overflow: auto; }
+  .empty-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
+  .inspector { border: 1px solid var(--agd-color-border); border-radius: var(--agd-radius-lg); padding: var(--agd-space-4); background: var(--agd-color-surface); display: grid; gap: var(--agd-space-3); align-content: start; overflow: auto; }
   .inspector h2 { margin: 0; font-size: var(--agd-font-size-lg); }
   .inspector form { display: grid; gap: var(--agd-space-3); }
   .inspector .by { margin: 0; color: var(--agd-color-text-muted); font-size: var(--agd-font-size-sm); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentic-canvas",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "A shared whiteboard for diagrams, drawn by people and agents.",
   "keywords": [
     "whiteboard",
@@ -74,6 +74,8 @@
     "typecheck": "tsc --noEmit && tsc --noEmit -p ui",
     "test": "vitest run",
     "clean": "rm -rf dist",
+    "dev": "npm run build && WRANGLER_SEND_METRICS=false wrangler dev --port 8793 --var CANVAS_REGION:unknown",
+    "dev:smoke": "npm run build && node scripts/dev-smoke.mjs 8793 /health --var CANVAS_REGION:unknown",
     "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"
@@ -81,7 +83,7 @@
   "dependencies": {
     "@dagrejs/dagre": "^3.1.3",
     "@modelcontextprotocol/sdk": "^1.12.0",
-    "agentic-design": "^0.4.0",
+    "agentic-design": "^0.5.0",
     "agentic-identity": "^0.8.0",
     "agentic-realtime": "^0.4.2",
     "yjs": "^13.6.0",