agentic-canvas 0.15.2 → 0.15.3

package/dist/{chunk-PX6ZSCRO.js → chunk-E43YC3NG.js}

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

package/dist/cli.js

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

package/dist/embed.js

@@ -11,7 +11,7 @@ import { Component } from "react";
 import { createRoot } from "react-dom/client";
 
 // ui/BoardView.tsx
-import { Button as Button2, EmptyState, Input, PresenceChip, PresenceStack, Select, Textarea, Toolbar, ToolbarButton, ToolbarSeparator, useToast } from "agentic-design/react";
+import { Button as Button2, EmptyState, IconButton, Input, PresenceChip, PresenceStack, Select, Textarea, useToast } from "agentic-design/react";
 import { useCallback, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
 
 // ui/errors.ts
@@ -172,7 +172,7 @@ function Canvas({ data, selected, editable, view, onView, onSelect, onMove, onRe
     /* @__PURE__ */ jsx("rect", { x, y: y - 20, width: el.machineMade ? 50 : 82, height: 18, rx: 4 }),
     /* @__PURE__ */ jsx("text", { x: x + 6, y: y - 7, children: el.machineMade ? "Agent" : "Agent edit" })
   ] }) : null;
-  return /* @__PURE__ */ jsx("div", { ref: box, className: "canvas", role: "group", "aria-label": "Board canvas. Tab moves between items. Arrow keys move the selected item, Shift with arrows resizes it, Delete removes it, Escape clears the selection.", tabIndex: 0, onKeyDown: key, onPointerMove: track, onPointerUp: end, onPointerCancel: end, children: /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", onPointerDown: (e) => begin(e, "pan"), children: [
+  return /* @__PURE__ */ jsx("div", { ref: box, className: "canvas", role: "group", "aria-label": "Board canvas. Tab moves between items. Arrow keys move the selected item, Shift with arrows resizes it, Delete removes it, Escape clears the selection.", tabIndex: -1, onKeyDown: key, onPointerMove: track, onPointerUp: end, onPointerCancel: end, children: /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", onPointerDown: (e) => begin(e, "pan"), children: [
     /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrow", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M0 0L10 5L0 10z", className: "arrowhead" }) }) }),
     /* @__PURE__ */ jsxs("g", { transform: `translate(${view.x} ${view.y}) scale(${view.k})`, children: [
       data.edges.map((e) => {
@@ -486,16 +486,16 @@ function BoardView({ id, client: remote, host, room: roomOptions, me, backHref }
     !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", 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("div", { className: "palette", children: /* @__PURE__ */ jsx3("div", { className: "agd-toolbar", role: "group", "aria-label": "Shape palette", children: TOOLS.map((t) => /* @__PURE__ */ jsx3(IconButton, { size: "sm", label: t.text, icon: t.icon, disabled: !editable, onClick: () => add(t.type) }, t.type)) }) }),
+        /* @__PURE__ */ jsx3("div", { className: "zoom", children: /* @__PURE__ */ jsxs3("div", { className: "agd-toolbar", role: "group", "aria-label": "Zoom and pan", children: [
+          /* @__PURE__ */ jsx3(IconButton, { size: "sm", label: "Zoom out", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 10h12" })), onClick: () => zoom(1 / 1.25) }),
+          /* @__PURE__ */ jsx3(IconButton, { size: "sm", label: "Zoom in", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 10h12M10 4v12" })), onClick: () => zoom(1.25) }),
+          /* @__PURE__ */ jsx3("span", { className: "agd-toolbar__separator", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx3(IconButton, { size: "sm", 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(IconButton, { size: "sm", 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(IconButton, { size: "sm", 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(IconButton, { size: "sm", 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(IconButton, { size: "sm", 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." }) })

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentic-canvas",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "description": "A shared whiteboard for diagrams, drawn by people and agents.",
   "keywords": [
     "whiteboard",