agentic-canvas 0.3.0 → 0.5.0

package/dist/embed.js

@@ -0,0 +1,535 @@
+import {
+  PRINCIPAL_KINDS
+} from "./chunk-SPP6PINW.js";
+
+// ui/embed.tsx
+import { ToastProvider, TooltipProvider } from "agentic-design/react";
+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 { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+
+// ui/errors.ts
+var isApiError = (error) => typeof error === "object" && error !== null && error.name === "CanvasApiError" && typeof error.code === "string" && typeof error.status === "number";
+function describe(error) {
+  if (isApiError(error)) {
+    if (error.code === "UNAUTHORIZED") return "The server did not accept this token.";
+    if (error.code === "NETWORK") return "The server cannot be reached. Check the connection and try again.";
+    if (error.code === "FORBIDDEN") return "This token can read the board but not change it.";
+    return error.message;
+  }
+  return error instanceof Error ? error.message : "Something went wrong.";
+}
+
+// ui/Canvas.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HOME = { x: 40, y: 40, k: 1 };
+var PAN_STEP = 80;
+var MIN_ZOOM = 0.2;
+var MAX_ZOOM = 4;
+var STEP = 10;
+var TYPE_NAME = { rect: "Rectangle", ellipse: "Ellipse", diamond: "Diamond", text: "Text", sticky: "Sticky note", frame: "Frame", image: "Image", connector: "Connector" };
+function byline(el) {
+  const made = `${el.machineMade ? "agent " : ""}${el.author.id}`;
+  const edit = el.lastEditMachineMade && !el.machineMade ? `, edited by agent ${el.editedBy.id}` : "";
+  return `made by ${made}${edit}`;
+}
+var label = (el) => `${TYPE_NAME[el.type] ?? el.type}${el.text ? `: ${el.text}` : ""}, ${byline(el)}`;
+function wrap(text, width, maxLines) {
+  const per = Math.max(3, Math.floor(width / 7.5));
+  const lines = [];
+  for (const para of text.split("\n")) {
+    let line = "";
+    for (const word of para.split(/\s+/).filter(Boolean)) {
+      for (let w = word; ; ) {
+        const room = per - (line ? line.length + 1 : 0);
+        if (w.length <= room) {
+          line = line ? `${line} ${w}` : w;
+          break;
+        }
+        if (line) {
+          lines.push(line);
+          line = "";
+        } else {
+          lines.push(w.slice(0, per));
+          w = w.slice(per);
+        }
+      }
+    }
+    lines.push(line);
+  }
+  if (lines.length > maxLines) {
+    lines.length = Math.max(1, maxLines);
+    lines[lines.length - 1] = `${lines[lines.length - 1].slice(0, Math.max(0, per - 1))}\u2026`;
+  }
+  return lines;
+}
+function edgePoint(box, tx, ty) {
+  const cx = box.x + box.w / 2;
+  const cy = box.y + box.h / 2;
+  const dx = tx - cx;
+  const dy = ty - cy;
+  if (dx === 0 && dy === 0) return [cx, cy];
+  const s = Math.min(box.w / 2 / (Math.abs(dx) || Infinity), box.h / 2 / (Math.abs(dy) || Infinity));
+  return [cx + dx * s, cy + dy * s];
+}
+function Canvas({ data, selected, editable, view, onView, onSelect, onMove, onResize, onDelete }) {
+  const box = useRef(null);
+  const drag = useRef(void 0);
+  const [draft, setDraft] = useState();
+  const viewRef = useRef(view);
+  viewRef.current = view;
+  useEffect(() => {
+    const el = box.current;
+    const onWheel = (event) => {
+      event.preventDefault();
+      const rect = el.getBoundingClientRect();
+      zoomAt(event.clientX - rect.left, event.clientY - rect.top, event.deltaY < 0 ? 1.1 : 1 / 1.1);
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  });
+  function zoomAt(px, py, factor) {
+    const v = viewRef.current;
+    const k = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, v.k * factor));
+    onView({ k, x: px - (px - v.x) / v.k * k, y: py - (py - v.y) / v.k * k });
+  }
+  const shown = (n) => {
+    if (draft?.id !== n.id) return n;
+    return draft.kind === "move" ? { ...n, x: n.x + draft.dx, y: n.y + draft.dy } : { ...n, w: Math.max(20, n.w + draft.dx), h: Math.max(20, n.h + draft.dy) };
+  };
+  const nodes = new Map(data.nodes.map((n) => [n.id, n]));
+  function begin(event, kind, id) {
+    event.stopPropagation();
+    if (kind !== "pan") onSelect(id);
+    if (kind === "pan") onSelect(null);
+    if (kind !== "pan" && !editable) return;
+    box.current?.setPointerCapture(event.pointerId);
+    drag.current = { kind, id, sx: event.clientX, sy: event.clientY, vx: view.x, vy: view.y, moved: false };
+  }
+  function track(event) {
+    const d = drag.current;
+    if (!d) return;
+    const mx = event.clientX - d.sx;
+    const my = event.clientY - d.sy;
+    if (Math.abs(mx) + Math.abs(my) > 3) d.moved = true;
+    if (d.kind === "pan") onView({ ...view, x: d.vx + mx, y: d.vy + my });
+    else if (d.moved) setDraft({ id: d.id, kind: d.kind, dx: mx / view.k, dy: my / view.k });
+  }
+  function end() {
+    const d = drag.current;
+    drag.current = void 0;
+    if (!d || d.kind === "pan" || !draft || !d.moved) return setDraft(void 0);
+    const node = nodes.get(draft.id);
+    setDraft(void 0);
+    if (!node) return;
+    if (draft.kind === "move") onMove(draft.id, Math.round(draft.dx), Math.round(draft.dy));
+    else onResize(draft.id, Math.round(Math.max(20, node.w + draft.dx)), Math.round(Math.max(20, node.h + draft.dy)));
+  }
+  function key(event) {
+    const target = event.target;
+    if (target.closest("input, textarea, select")) return;
+    const arrows = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
+    const el = selected ? nodes.get(selected) ?? void 0 : void 0;
+    if (event.key in arrows) {
+      const [ax, ay] = arrows[event.key];
+      event.preventDefault();
+      if (el && editable) {
+        if (event.shiftKey) onResize(el.id, Math.max(20, el.w + ax * STEP), Math.max(20, el.h + ay * STEP));
+        else onMove(el.id, ax * STEP, ay * STEP);
+      } else if (!selected) onView({ ...view, x: view.x - ax * 40, y: view.y - ay * 40 });
+    } else if ((event.key === "Delete" || event.key === "Backspace") && selected && editable) {
+      event.preventDefault();
+      onDelete(selected);
+    } else if (event.key === "Escape") {
+      onSelect(null);
+    } else if (event.key === "+" || event.key === "=" || event.key === "-") {
+      const rect = box.current.getBoundingClientRect();
+      zoomAt(rect.width / 2, rect.height / 2, event.key === "-" ? 1 / 1.25 : 1.25);
+    } else if (event.key === "0") onView(HOME);
+  }
+  const itemProps = (el) => ({
+    className: `item${selected === el.id ? " selected" : ""}`,
+    tabIndex: 0,
+    role: "button",
+    "aria-pressed": selected === el.id,
+    "aria-label": label(el),
+    onFocus: () => onSelect(el.id),
+    onKeyDown: (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onSelect(el.id);
+      }
+    }
+  });
+  const badge = (el, x, y) => el.machineMade || el.lastEditMachineMade ? /* @__PURE__ */ jsxs("g", { className: "agent-badge", "data-badge-for": el.id, "aria-hidden": "true", pointerEvents: "none", children: [
+    /* @__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: [
+    /* @__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) => {
+        const a = "id" in e.from ? nodes.get(e.from.id) : void 0;
+        const b = "id" in e.to ? nodes.get(e.to.id) : void 0;
+        if ("id" in e.from && !a || "id" in e.to && !b) return null;
+        const A = a ? shown(a) : null;
+        const B = b ? shown(b) : null;
+        const to0 = B ? [B.x + B.w / 2, B.y + B.h / 2] : [e.to.x, e.to.y];
+        const from0 = A ? [A.x + A.w / 2, A.y + A.h / 2] : [e.from.x, e.from.y];
+        const [x1, y1] = A ? edgePoint(A, ...to0) : from0;
+        const [x2, y2] = B ? edgePoint(B, ...from0) : to0;
+        return /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsxs("g", { ...itemProps(e), "data-id": e.id, onPointerDown: (ev) => (ev.stopPropagation(), onSelect(e.id)), children: [
+            /* @__PURE__ */ jsx("line", { x1, y1, x2, y2, className: "hit" }),
+            /* @__PURE__ */ jsx("line", { x1, y1, x2, y2, className: "edge", markerEnd: e.endArrow ? "url(#arrow)" : void 0, markerStart: e.startArrow ? "url(#arrow)" : void 0 }),
+            e.text && /* @__PURE__ */ jsx("text", { "aria-hidden": "true", x: (x1 + x2) / 2, y: (y1 + y2) / 2 - 6, className: "edge-text", textAnchor: "middle", children: e.text }),
+            /* @__PURE__ */ jsx("line", { x1, y1, x2, y2, className: "ring-line" })
+          ] }),
+          badge(e, (x1 + x2) / 2 - 25, (y1 + y2) / 2 - 14)
+        ] }, e.id);
+      }),
+      data.nodes.map((n) => {
+        const s = shown(n);
+        const lines = wrap(n.text, s.w - 16, Math.floor((s.h - 8) / 18));
+        const top = n.type === "frame" ? s.y + 18 : s.y + s.h / 2 - (lines.length - 1) * 18 / 2 + 5;
+        const anchor = n.type === "frame" ? "start" : "middle";
+        const tx = n.type === "frame" ? s.x + 8 : s.x + s.w / 2;
+        return /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsxs("g", { ...itemProps(n), "data-id": n.id, onPointerDown: (ev) => begin(ev, "move", n.id), children: [
+            n.type === "ellipse" ? /* @__PURE__ */ jsx("ellipse", { cx: s.x + s.w / 2, cy: s.y + s.h / 2, rx: s.w / 2, ry: s.h / 2, className: "shape" }) : n.type === "diamond" ? /* @__PURE__ */ jsx("polygon", { points: `${s.x + s.w / 2},${s.y} ${s.x + s.w},${s.y + s.h / 2} ${s.x + s.w / 2},${s.y + s.h} ${s.x},${s.y + s.h / 2}`, className: "shape" }) : /* @__PURE__ */ jsx("rect", { x: s.x, y: s.y, width: s.w, height: s.h, rx: n.type === "sticky" ? 2 : 6, className: `shape ${n.type}` }),
+            /* @__PURE__ */ jsx("text", { "aria-hidden": "true", x: tx, y: top, textAnchor: anchor, className: n.type === "sticky" ? "label sticky-label" : "label", children: n.type === "image" && !n.text ? /* @__PURE__ */ jsx("tspan", { children: "Image" }) : lines.map((l, i) => /* @__PURE__ */ jsx("tspan", { x: tx, dy: i === 0 ? 0 : 18, children: i < lines.length - 1 ? `${l} ` : l }, i)) }),
+            /* @__PURE__ */ jsx("rect", { x: s.x - 4, y: s.y - 4, width: s.w + 8, height: s.h + 8, rx: 8, className: "ring" }),
+            selected === n.id && editable && /* @__PURE__ */ jsx("circle", { cx: s.x + s.w + 4, cy: s.y + s.h + 4, r: 7 / view.k, className: "handle", onPointerDown: (ev) => begin(ev, "resize", n.id) })
+          ] }),
+          badge(n, s.x, s.y)
+        ] }, n.id);
+      })
+    ] })
+  ] }) });
+}
+
+// ui/Failure.tsx
+import { Button } from "agentic-design/react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Failure({ message, retry }) {
+  return /* @__PURE__ */ jsxs2("div", { role: "alert", className: "failure", children: [
+    /* @__PURE__ */ jsxs2("p", { children: [
+      /* @__PURE__ */ jsx2("strong", { children: "Something went wrong." }),
+      " ",
+      message
+    ] }),
+    /* @__PURE__ */ jsx2(Button, { variant: "secondary", onClick: retry, children: "Try again" })
+  ] });
+}
+
+// ui/presence.ts
+import { SyncClient } from "agentic-realtime/client";
+var WS_PROTOCOL = "agentic-canvas.bearer";
+var b64url = (text) => btoa(String.fromCharCode(...new TextEncoder().encode(text))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+var bearerSocket = (token) => class extends WebSocket {
+  constructor(url) {
+    super(url, [WS_PROTOCOL, b64url(token)]);
+  }
+};
+function roomUrl(baseUrl, board) {
+  const url = new URL(`${baseUrl.replace(/\/+$/, "")}/boards/${encodeURIComponent(board)}/ws`, window.location.href);
+  url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
+  return url.toString();
+}
+var revOf = (peer) => {
+  const rev = peer.cursor?.rev;
+  return typeof rev === "number" && Number.isFinite(rev) ? rev : null;
+};
+function toEntry(peer) {
+  return { id: String(peer.clientId), name: peer.name, kind: peer.machine ? "agent" : "person" };
+}
+function joinRoom(options) {
+  const seen = /* @__PURE__ */ new Map();
+  const client = SyncClient.open({
+    url: roomUrl(options.baseUrl, options.board),
+    WebSocket: bearerSocket(options.token),
+    presence: { name: options.name, cursor: { rev: 0 } },
+    reconnect: { initialMs: 1e3, maxMs: 15e3 },
+    onStatus: (status) => options.onStatus(status === "connected")
+  });
+  const off = client.onPeers((peers) => {
+    options.onPeers(peers.map(toEntry));
+    let changed = false;
+    for (const peer of peers) {
+      const rev = revOf(peer);
+      if (rev !== null && seen.has(peer.clientId) && seen.get(peer.clientId) !== rev) changed = true;
+      if (rev !== null) seen.set(peer.clientId, rev);
+    }
+    if (changed) options.onChange();
+  });
+  return {
+    setRev: (rev) => client.setPresence({ cursor: { rev } }),
+    leave: () => {
+      off();
+      void client.disconnect();
+    }
+  };
+}
+
+// ui/BoardView.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var icon = (d) => /* @__PURE__ */ jsx3("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: d });
+var TOOLS = [
+  { type: "rect", text: "Add rectangle", icon: icon(/* @__PURE__ */ jsx3("rect", { x: "3", y: "5", width: "14", height: "10", rx: "2" })) },
+  { type: "ellipse", text: "Add ellipse", icon: icon(/* @__PURE__ */ jsx3("ellipse", { cx: "10", cy: "10", rx: "7", ry: "5" })) },
+  { type: "diamond", text: "Add diamond", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M10 3l7 7-7 7-7-7z" })) },
+  { type: "text", text: "Add text", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 5h12M10 5v11" })) },
+  { type: "sticky", text: "Add sticky note", icon: icon(/* @__PURE__ */ jsx3("path", { d: "M4 4h12v8l-4 4H4z M12 16v-4h4" })) }
+];
+var POLL_MS = 5e3;
+var DEFAULT_SIZE = { rect: [140, 70], ellipse: [140, 70], diamond: [140, 90], text: [140, 40], sticky: [150, 120] };
+var DEFAULT_TEXT = { rect: "Rectangle", ellipse: "Ellipse", diamond: "Decision", text: "Text", sticky: "Note" };
+function BoardView({ id, client, room: roomOptions, me, backHref }) {
+  const roomUrl2 = roomOptions?.baseUrl;
+  const roomToken = roomOptions?.token;
+  const toast = useToast();
+  const [board, setBoard] = useState2({ state: "loading" });
+  const [selected, setSelected] = useState2(null);
+  const [view, setView] = useState2(HOME);
+  const [peers, setPeers] = useState2([]);
+  const [live, setLive] = useState2(false);
+  const room = useRef2(void 0);
+  const rev = useRef2(0);
+  const queue = useRef2(Promise.resolve());
+  const canvasBox = useRef2(null);
+  const editable = me.role === "editor";
+  const [saving, setSaving] = useState2(0);
+  const pending = useRef2(0);
+  const generation = useRef2(0);
+  const lastRead = useRef2(0);
+  const timer = useRef2(void 0);
+  const read = useCallback(async () => {
+    try {
+      const started = generation.current;
+      const data2 = await client.readBoard(id);
+      if (started !== generation.current || pending.current > 0) return;
+      setBoard({ state: "ready", data: data2 });
+    } catch (e) {
+      setBoard((prev) => prev.state === "ready" ? prev : { state: "error", message: describe(e), missing: isApiError(e) && e.status === 404 });
+    }
+  }, [client, id]);
+  const load = useCallback(async () => {
+    if (pending.current > 0) return;
+    const wait = lastRead.current + 1e3 - Date.now();
+    if (wait > 0) {
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => void load(), wait);
+      return;
+    }
+    lastRead.current = Date.now();
+    await read();
+  }, [read]);
+  useEffect2(() => {
+    setBoard({ state: "loading" });
+    lastRead.current = 0;
+    void load();
+    return () => clearTimeout(timer.current);
+  }, [load]);
+  useEffect2(() => {
+    if (saving === 0) return;
+    const guard = (event) => event.preventDefault();
+    window.addEventListener("beforeunload", guard);
+    return () => window.removeEventListener("beforeunload", guard);
+  }, [saving]);
+  useEffect2(() => {
+    if (roomUrl2 === void 0 || roomToken === void 0) return;
+    const joined = joinRoom({ board: id, baseUrl: roomUrl2, token: roomToken, name: me.actor, onPeers: setPeers, onChange: () => void load(), onStatus: setLive });
+    room.current = joined;
+    return () => (joined.leave(), room.current = void 0);
+  }, [id, roomUrl2, roomToken, me.actor, load]);
+  useEffect2(() => {
+    const timer2 = setInterval(() => void load(), POLL_MS);
+    return () => clearInterval(timer2);
+  }, [load]);
+  const write = useCallback(
+    (change, failure, select) => {
+      pending.current++;
+      generation.current++;
+      setSaving((n) => n + 1);
+      queue.current = queue.current.then(async () => {
+        try {
+          await change();
+          room.current?.setRev(++rev.current);
+        } catch (e) {
+          toast({ title: failure, description: describe(e), tone: "danger" });
+        }
+        pending.current--;
+        lastRead.current = 0;
+        await load();
+        if (select) setSelected(select);
+        setSaving((n) => n - 1);
+      });
+    },
+    [load, toast]
+  );
+  const data = board.state === "ready" ? board.data : void 0;
+  const item = data && selected ? [...data.nodes, ...data.edges].find((i) => i.id === selected) : void 0;
+  useEffect2(() => {
+    if (data && selected && !item) setSelected(null);
+  }, [data, selected, item]);
+  const patchLocal = (fn) => setBoard((b) => b.state === "ready" ? { state: "ready", data: { ...b.data, nodes: b.data.nodes.map(fn) } } : b);
+  const move = (target, dx, dy) => {
+    patchLocal((n) => n.id === target ? { ...n, x: n.x + dx, y: n.y + dy } : n);
+    write(() => client.move(id, target, dx, dy), "Could not move the item");
+  };
+  const resize = (target, w, h) => place(target, { w, h });
+  const place = (target, patch) => {
+    patchLocal((n) => n.id === target ? { ...n, ...patch } : n);
+    write(() => client.update(id, target, patch), "Could not change the item");
+  };
+  const remove = (target) => {
+    setSelected(null);
+    write(() => client.remove(id, target), "Could not delete the item");
+    canvasBox.current?.querySelector("[role=group]")?.focus();
+  };
+  const add = (type) => {
+    const [w, h] = DEFAULT_SIZE[type];
+    const n = data?.nodes.length ?? 0;
+    const box = canvasBox.current?.getBoundingClientRect();
+    const cx = ((box?.width ?? 600) / 2 - view.x) / view.k - w / 2 + n % 6 * 24;
+    const cy = ((box?.height ?? 400) / 2 - view.y) / view.k - h / 2 + n % 6 * 24;
+    const shapeId = `s-${crypto.randomUUID().slice(0, 8)}`;
+    write(() => client.addShape(id, { id: shapeId, type, x: Math.round(cx), y: Math.round(cy), w, h, text: DEFAULT_TEXT[type] }), "Could not add the item", shapeId);
+  };
+  const zoom = (factor) => setView((v) => ({ ...v, k: Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, v.k * factor)) }));
+  if (board.state === "loading") return /* @__PURE__ */ jsx3("p", { role: "status", children: "Loading board\u2026" });
+  if (board.state === "error") {
+    return board.missing ? /* @__PURE__ */ jsx3(EmptyState, { title: "This board does not exist", description: backHref ? /* @__PURE__ */ jsx3("a", { href: backHref, children: "Back to all boards" }) : void 0 }) : /* @__PURE__ */ jsx3(Failure, { message: board.message, retry: () => (setBoard({ state: "loading" }), void load()) });
+  }
+  const { data: d } = board;
+  const status = saving > 0 ? "Saving\u2026" : "All changes saved";
+  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__ */ 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: "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__ */ 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")
+    ] })
+  ] });
+}
+var asEntry = (p) => ({ id: p.id, name: p.id, kind: p.kind === "human" ? "person" : "agent" });
+function Inspector({ item, nodes, editable, onText, onPlace, onDelete, onConnect }) {
+  const [draft, setDraft] = useState2({});
+  const node = item && item.type !== "connector" ? item : void 0;
+  if (!item) return /* @__PURE__ */ jsx3("aside", { className: "inspector", "aria-label": "Selected item", children: /* @__PURE__ */ jsx3("p", { children: "Select an item to edit it." }) });
+  const value = (k) => draft[k] ?? String(k === "text" ? item.text : node?.[k] ?? "");
+  const edit = (k) => (e) => setDraft({ ...draft, [k]: e.target.value });
+  const submit = (event) => {
+    event.preventDefault();
+    if (draft.text !== void 0 && draft.text !== item.text) onText(draft.text);
+    if (node) {
+      const patch = {};
+      for (const k of ["x", "y", "w", "h"]) {
+        const typed = draft[k];
+        if (typed === void 0 || typed.trim() === "") continue;
+        const n = Number(typed);
+        if (Number.isFinite(n) && (k === "x" || k === "y" || n > 0) && n !== node[k]) patch[k] = n;
+      }
+      if (Object.keys(patch).length > 0) onPlace(node.id, patch);
+    }
+    setDraft({});
+  };
+  return /* @__PURE__ */ jsxs3("aside", { className: "inspector", "aria-label": "Selected item", children: [
+    /* @__PURE__ */ jsx3("h2", { children: TYPE_NAME[item.type] ?? item.type }),
+    /* @__PURE__ */ jsx3("p", { className: "by", children: "Made by" }),
+    /* @__PURE__ */ jsx3(PresenceChip, { entry: asEntry(item.author) }),
+    item.lastEditMachineMade && !item.machineMade && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx3("p", { className: "by", children: "Last edit" }),
+      /* @__PURE__ */ jsx3(PresenceChip, { entry: asEntry(item.editedBy) })
+    ] }),
+    /* @__PURE__ */ jsx3("span", { className: "sr-only", children: byline(item) }),
+    /* @__PURE__ */ jsxs3("form", { onSubmit: submit, children: [
+      /* @__PURE__ */ jsx3(Textarea, { label: "Text", value: value("text"), onChange: edit("text"), rows: 3, maxLength: 1e4, disabled: !editable }),
+      node && /* @__PURE__ */ jsxs3("div", { className: "sizes", children: [
+        /* @__PURE__ */ jsx3(Input, { label: "X", type: "number", value: value("x"), onChange: edit("x"), disabled: !editable }),
+        /* @__PURE__ */ jsx3(Input, { label: "Y", type: "number", value: value("y"), onChange: edit("y"), disabled: !editable }),
+        /* @__PURE__ */ jsx3(Input, { label: "Width", type: "number", min: 20, value: value("w"), onChange: edit("w"), disabled: !editable }),
+        /* @__PURE__ */ jsx3(Input, { label: "Height", type: "number", min: 20, value: value("h"), onChange: edit("h"), disabled: !editable })
+      ] }),
+      editable && /* @__PURE__ */ jsx3(Button2, { type: "submit", variant: "secondary", children: "Save changes" })
+    ] }),
+    editable && node && nodes.length > 1 && /* @__PURE__ */ jsxs3(Select, { label: "Connect to", value: "", onChange: (e) => e.target.value && onConnect(e.target.value), children: [
+      /* @__PURE__ */ jsx3("option", { value: "", children: "Choose a shape\u2026" }),
+      nodes.filter((n) => n.id !== node.id).map((n) => /* @__PURE__ */ jsxs3("option", { value: n.id, children: [
+        TYPE_NAME[n.type],
+        n.text ? `: ${n.text.slice(0, 30)}` : ""
+      ] }, n.id))
+    ] }),
+    editable && /* @__PURE__ */ jsx3(Button2, { variant: "danger", onClick: () => onDelete(item.id), children: "Delete" })
+  ] });
+}
+
+// ui/embed.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function checkPrincipal(principal) {
+  if (!principal || !PRINCIPAL_KINDS.includes(principal.kind) || typeof principal.name !== "string" || principal.name.trim() === "") {
+    throw new TypeError(`the board needs a principal with a kind (${PRINCIPAL_KINDS.join(", ")}) and a name`);
+  }
+}
+var Boundary = class extends Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  render() {
+    return this.state.failed ? /* @__PURE__ */ jsx4("div", { role: "alert", className: "failure", children: /* @__PURE__ */ jsxs4("p", { children: [
+      /* @__PURE__ */ jsx4("strong", { children: "The board stopped." }),
+      " It has content this page cannot show, or a principal it does not know. Reload to try again."
+    ] }) }) : this.props.children;
+  }
+};
+function Board({ boardId, client, principal, readOnly, room, backHref }) {
+  checkPrincipal(principal);
+  const role = principal.role === "editor" && !readOnly ? "editor" : "viewer";
+  return /* @__PURE__ */ jsx4(BoardView, { id: boardId, client, room, backHref, me: { actor: principal.name, kind: principal.kind, role } }, boardId);
+}
+function BoardEditor(options) {
+  return /* @__PURE__ */ jsx4("div", { className: "cv-root", children: /* @__PURE__ */ jsx4(Boundary, { children: /* @__PURE__ */ jsx4(Board, { ...options }) }) });
+}
+function mount(element, options) {
+  checkPrincipal(options.principal);
+  const root = createRoot(element);
+  const render = (next) => root.render(
+    /* @__PURE__ */ jsx4(TooltipProvider, { children: /* @__PURE__ */ jsx4(ToastProvider, { children: /* @__PURE__ */ jsx4(BoardEditor, { ...next }) }) })
+  );
+  render(options);
+  let open = true;
+  return {
+    update: (next) => (checkPrincipal(next.principal), open && render(next)),
+    unmount: () => {
+      if (!open) return;
+      open = false;
+      root.unmount();
+    }
+  };
+}
+export {
+  BoardEditor,
+  mount
+};

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import { c as Board, P as Principal } from './read-BY6f-mmy.js';
-export { B as BoardData, d as CanvasElement, e as CanvasError, C as Connector, f as EdgeData, b as Endpoint, E as ErrorCode, G as Group, M as MAX_ELEMENTS, g as MAX_TEXT, N as NodeData, h as SHAPE_TYPES, a as Shape, S as ShapeType, p as principalSchema, r as readBoard } from './read-BY6f-mmy.js';
-import { B as BoardAccess } from './service-Cpl6wKeY.js';
-export { C as CanvasService, D as DrawOptions, F as FlowEdge, a as FlowGraph, b as FlowNode, M as MAX_FLOW_EDGES, c as MAX_FLOW_NODES, P as Placement, d as drawFlow, l as layoutFlow, p as parseFlow } from './service-Cpl6wKeY.js';
+import { B as Board, P as Principal } from './read-BupIJSPJ.js';
+export { a as BoardData, b as CanvasElement, e as CanvasError, C as Connector, f as EdgeData, d as Endpoint, E as ErrorCode, G as Group, M as MAX_ELEMENTS, g as MAX_TEXT, N as NodeData, h as SHAPE_TYPES, S as Shape, c as ShapeType, p as principalSchema, r as readBoard } from './read-BupIJSPJ.js';
+import { B as BoardAccess } from './service-CR4-r1yx.js';
+export { C as CanvasService, D as DrawOptions, F as FlowEdge, a as FlowGraph, b as FlowNode, M as MAX_FLOW_EDGES, c as MAX_FLOW_NODES, P as Placement, d as drawFlow, l as layoutFlow, p as parseFlow } from './service-CR4-r1yx.js';
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 export { FileStoreOptions, createFileStore, openLocalStore } from './store-file.js';
 export { PRINCIPAL_KINDS, PrincipalKind, isMachineMade } from 'agentic-identity';

package/dist/index.js

@@ -6,14 +6,15 @@ import {
   operatorActor,
   runMcp,
   svgToPng
-} from "./chunk-AGODNBN7.js";
+} from "./chunk-VHHJIBAB.js";
 import {
   createFileStore,
   openLocalStore
 } from "./chunk-UKST5A57.js";
 import {
   CanvasService
-} from "./chunk-W7NRP3EX.js";
+} from "./chunk-G4YTESPS.js";
+import "./chunk-NWQED42L.js";
 import {
   Board,
   CanvasError,
@@ -21,17 +22,18 @@ import {
   MAX_FLOW_EDGES,
   MAX_FLOW_NODES,
   MAX_TEXT,
-  PRINCIPAL_KINDS,
   SHAPE_TYPES,
   drawFlow,
-  isMachineMade,
   layoutFlow,
   parseFlow,
-  principalSchema,
   readBoard,
   toSvg
-} from "./chunk-GGQPE65T.js";
-import "./chunk-NWQED42L.js";
+} from "./chunk-JCYNPYYJ.js";
+import {
+  PRINCIPAL_KINDS,
+  isMachineMade,
+  principalSchema
+} from "./chunk-SPP6PINW.js";
 export {
   ActorConfigError,
   BRAND,

package/dist/live-worker.d.ts

@@ -5,10 +5,10 @@ import 'agentic-identity';
 import 'agentic-realtime';
 import 'agentic-identity/cloudflare';
 import 'hono';
-import './read-BY6f-mmy.js';
+import './read-BupIJSPJ.js';
 import 'yjs';
 import 'zod';
-import './service-Cpl6wKeY.js';
+import './service-CR4-r1yx.js';
 
 type Namespace = Parameters<typeof createDurableObjectRealtime>[0];
 interface LiveEnv extends WorkerEnv {

package/dist/live-worker.js

@@ -1,11 +1,12 @@
 import {
   createApp
-} from "./chunk-V477KSZQ.js";
-import "./chunk-W7NRP3EX.js";
+} from "./chunk-V74PWJKY.js";
+import "./chunk-G4YTESPS.js";
+import "./chunk-NWQED42L.js";
 import {
   CanvasError
-} from "./chunk-GGQPE65T.js";
-import "./chunk-NWQED42L.js";
+} from "./chunk-JCYNPYYJ.js";
+import "./chunk-SPP6PINW.js";
 
 // src/live-worker.ts
 import { parseRegion } from "agentic-identity";

package/dist/live.d.ts

@@ -1,6 +1,6 @@
-import { c as Board, P as Principal, B as BoardData, a as Shape, C as Connector } from './read-BY6f-mmy.js';
+import { B as Board, P as Principal, a as BoardData, S as Shape, C as Connector, b as CanvasElement } from './read-BupIJSPJ.js';
 import { Peer } from 'agentic-realtime/client';
-import { B as BoardAccess, D as DrawOptions } from './service-Cpl6wKeY.js';
+import { B as BoardAccess, D as DrawOptions } from './service-CR4-r1yx.js';
 import 'yjs';
 import 'zod';
 import 'agentic-identity';
@@ -79,12 +79,17 @@ declare class LiveService implements BoardAccess {
         id: string;
         title: string;
     }>;
+    list(): Promise<{
+        id: string;
+        title: string;
+    }[]>;
     read(id: string): Promise<BoardData & {
         id: string;
     }>;
     exportSvg(id: string): Promise<string>;
     add(id: string, shape: unknown, _actor?: Principal): Promise<Shape>;
     connect(id: string, connector: unknown, _actor?: Principal): Promise<Connector>;
+    update(id: string, element: string, patch: unknown, _actor?: Principal): Promise<CanvasElement>;
     move(id: string, element: string, dx: number, dy: number, _actor?: Principal): Promise<{
         moved: string[];
     }>;