dsh-model-everything 0.4.0 → 0.5.0

package/lib/client.js

@@ -0,0 +1,1273 @@
+// Generated by scripts/build-client.mjs - do not edit. Source: src/client.ts and src/render/*.ts.
+window.__ModuleLoader__.load({
+  id: "dsh-model-everything",
+  factory(require) {
+    const module = { exports: {} };
+    const exports = module.exports;
+    "use strict";
+    var __defProp = Object.defineProperty;
+    var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames = Object.getOwnPropertyNames;
+    var __hasOwnProp = Object.prototype.hasOwnProperty;
+    var __export = (target, all) => {
+      for (var name in all)
+        __defProp(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps = (to, from, except, desc) => {
+      if (from && typeof from === "object" || typeof from === "function") {
+        for (let key of __getOwnPropNames(from))
+          if (!__hasOwnProp.call(to, key) && key !== except)
+            __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+    
+    // src/client.ts
+    var client_exports = {};
+    __export(client_exports, {
+      TOOL_NAMES: () => TOOL_NAMES,
+      WHITEBOARD_ID: () => WHITEBOARD_ID,
+      WHITEBOARD_SAMPLE: () => WHITEBOARD_SAMPLE,
+      default: () => factory,
+      mountWhiteboard: () => mountWhiteboard,
+      themeMode: () => themeMode,
+      viewFor: () => viewFor,
+      whiteboardFor: () => whiteboardFor
+    });
+    module.exports = __toCommonJS(client_exports);
+    
+    // src/render/layout.ts
+    function rankStates(nodes, edges, init) {
+      const ids = nodes.map((node) => node.id);
+      const known = new Set(ids);
+      const start = init !== void 0 && known.has(init) ? init : ids[0];
+      const outgoing = /* @__PURE__ */ new Map();
+      const incoming = /* @__PURE__ */ new Map();
+      for (const edge of edges) {
+        if (!known.has(edge.from) || !known.has(edge.to)) continue;
+        outgoing.set(edge.from, [...outgoing.get(edge.from) ?? [], edge.to]);
+        incoming.set(edge.to, [...incoming.get(edge.to) ?? [], edge.from]);
+      }
+      const depth = /* @__PURE__ */ new Map();
+      if (start !== void 0) {
+        depth.set(start, 0);
+        const queue = [start];
+        while (queue.length > 0) {
+          const id = queue.shift();
+          const level = depth.get(id);
+          for (const target of outgoing.get(id) ?? []) {
+            if (depth.has(target)) continue;
+            depth.set(target, level + 1);
+            queue.push(target);
+          }
+        }
+      }
+      const rows = [];
+      for (const id of ids) {
+        const level = depth.get(id);
+        if (level === void 0) continue;
+        while (rows.length <= level) rows.push([]);
+        rows[level].push(id);
+      }
+      return { rows, unreachable: ids.filter((id) => !depth.has(id)) };
+    }
+    
+    // src/render/place.ts
+    var MARGIN = 20;
+    var NODE_HEIGHT = 34;
+    var ROW_GAP = 58;
+    var COLUMN_GAP = 30;
+    var MIN_NODE_WIDTH = 88;
+    var MAX_NODE_WIDTH = 220;
+    var CHAR_WIDTH = 7.2;
+    var GROUP_PADDING = 10;
+    var GROUP_HEADER = 16;
+    var BLOCK_GAP = 14;
+    var nodeWidth = (label) => Math.min(MAX_NODE_WIDTH, Math.max(MIN_NODE_WIDTH, label.length * CHAR_WIDTH + 26));
+    function placeByRanks(diagram, nodes, top) {
+      const ranked = rankStates(diagram.nodes, diagram.edges, diagram.init);
+      const rows = [...ranked.rows];
+      if (ranked.unreachable.length > 0) rows.push(ranked.unreachable);
+      const boxes = /* @__PURE__ */ new Map();
+      let widest = 0;
+      rows.forEach((row, index) => {
+        const widths = row.map((id) => nodeWidth(id));
+        widest = Math.max(widest, widths.reduce((total, width) => total + width, 0) + Math.max(0, row.length - 1) * COLUMN_GAP);
+        let x = 0;
+        row.forEach((id, position) => {
+          boxes.set(id, { x, y: top + index * (NODE_HEIGHT + ROW_GAP), width: widths[position], height: NODE_HEIGHT });
+          x += widths[position] + COLUMN_GAP;
+        });
+      });
+      rows.forEach((row) => {
+        const rowWidth = row.reduce((total, id) => total + boxes.get(id).width, 0) + Math.max(0, row.length - 1) * COLUMN_GAP;
+        const offset = (widest - rowWidth) / 2;
+        for (const id of row) boxes.get(id).x += offset + MARGIN;
+      });
+      return { boxes, groupRects: /* @__PURE__ */ new Map(), width: widest + MARGIN * 2 };
+    }
+    function groupTree(groups) {
+      const byId = new Map(groups.map((group) => [group.id, group]));
+      const owner = /* @__PURE__ */ new Map();
+      const bySize = [...groups].sort((left, right) => left.members.length - right.members.length);
+      for (const group of bySize) {
+        for (const member of group.members) if (!owner.has(member)) owner.set(member, group.id);
+      }
+      const declared = (group) => {
+        const parent = group.parent;
+        if (parent === void 0 || parent === group.id) return void 0;
+        return byId.has(parent) ? parent : void 0;
+      };
+      const members = new Map(groups.map((group) => [group.id, new Set(group.members)]));
+      const infer = (group) => {
+        let best;
+        for (const other of groups) {
+          if (other.id === group.id) continue;
+          const outer = members.get(other.id);
+          const inner = members.get(group.id);
+          if (inner.size === 0 || inner.size >= outer.size) continue;
+          let contained = true;
+          for (const member of inner) {
+            if (!outer.has(member)) {
+              contained = false;
+              break;
+            }
+          }
+          if (contained && (best === void 0 || outer.size < best.size)) best = { id: other.id, size: outer.size };
+        }
+        return best?.id;
+      };
+      const parentOf = /* @__PURE__ */ new Map();
+      for (const group of groups) {
+        const parent = declared(group) ?? infer(group);
+        if (parent !== void 0) parentOf.set(group.id, parent);
+      }
+      for (const group of groups) {
+        const seen = /* @__PURE__ */ new Set([group.id]);
+        let cursor = parentOf.get(group.id);
+        while (cursor !== void 0) {
+          if (seen.has(cursor)) {
+            parentOf.delete(cursor);
+            break;
+          }
+          seen.add(cursor);
+          cursor = parentOf.get(cursor);
+        }
+      }
+      const children = /* @__PURE__ */ new Map();
+      const roots = [];
+      for (const group of groups) {
+        const parent = parentOf.get(group.id);
+        if (parent === void 0) roots.push(group.id);
+        else children.set(parent, [...children.get(parent) ?? [], group.id]);
+      }
+      return { owner, children, roots };
+    }
+    function placeByGroups(diagram, nodes, top) {
+      const groups = diagram.groups;
+      const byId = new Map(groups.map((group) => [group.id, group]));
+      const { owner, children, roots } = groupTree(groups);
+      const order = new Map(nodes.map((node, index) => [node.id, index]));
+      const loose = nodes.filter((node) => !owner.has(node.id)).map((node) => node.id);
+      const nodeIds = new Set(nodes.map((node) => node.id));
+      const rawContents = (groupId) => {
+        const group = byId.get(groupId);
+        const own = [...new Set(group.members)].filter((member) => owner.get(member) === groupId && nodeIds.has(member));
+        const nested = children.get(groupId) ?? [];
+        return [...own, ...nested];
+      };
+      const contents = (groupId) => rawContents(groupId).filter((child) => !byId.has(child) || rawContents(child).length > 0);
+      const measure = (id) => {
+        if (!byId.has(id)) return { width: nodeWidth(id), height: NODE_HEIGHT };
+        const items = contents(id);
+        const sizes2 = items.map(measure);
+        return {
+          width: Math.max(MIN_NODE_WIDTH, ...sizes2.map((size) => size.width)) + GROUP_PADDING * 2,
+          height: GROUP_HEADER + GROUP_PADDING * 2 + sizes2.reduce((total, size) => total + size.height, 0) + Math.max(0, items.length - 1) * BLOCK_GAP
+        };
+      };
+      const boxes = /* @__PURE__ */ new Map();
+      const groupRects = /* @__PURE__ */ new Map();
+      const place2 = (id, x, y) => {
+        const size = measure(id);
+        if (!byId.has(id)) {
+          boxes.set(id, { x, y, width: size.width, height: NODE_HEIGHT });
+          return size;
+        }
+        groupRects.set(id, { x, y, width: size.width, height: size.height });
+        let cursor2 = y + GROUP_HEADER + GROUP_PADDING;
+        const inner = size.width - GROUP_PADDING * 2;
+        const ordered = [...contents(id)].sort((left, right) => firstIndex(left) - firstIndex(right));
+        for (const child of ordered) {
+          const childSize = measure(child);
+          place2(child, x + GROUP_PADDING + (inner - childSize.width) / 2, cursor2);
+          cursor2 += childSize.height + BLOCK_GAP;
+        }
+        return size;
+      };
+      const visibleRoots = roots.filter((id) => contents(id).length > 0);
+      const firstIndex = (id) => {
+        if (!byId.has(id)) return order.get(id);
+        return Math.min(...contents(id).map(firstIndex));
+      };
+      const topItems = [...loose, ...visibleRoots].sort((left, right) => firstIndex(left) - firstIndex(right));
+      const sizes = topItems.map(measure);
+      const width = Math.max(MIN_NODE_WIDTH, ...sizes.map((size) => size.width));
+      let cursor = top;
+      for (const item of topItems) {
+        const size = measure(item);
+        place2(item, MARGIN + (width - size.width) / 2, cursor);
+        cursor += size.height + BLOCK_GAP;
+      }
+      return { boxes, groupRects, width: width + MARGIN * 2 };
+    }
+    function place(diagram, top) {
+      const groups = diagram.groups ?? [];
+      return groups.length > 0 ? placeByGroups(diagram, diagram.nodes, top) : placeByRanks(diagram, diagram.nodes, top);
+    }
+    
+    // src/render/palette.ts
+    var NEUTRAL_LIGHT = {
+      pass: "#2f8f5b",
+      findings: "#b7791f",
+      fail: "#c0392b",
+      undecided: "#6b7280",
+      muted: "#9aa3ad",
+      text: "#1f2933",
+      edge: "#6b7280",
+      surface: "transparent",
+      background: "#ffffff"
+    };
+    var NEUTRAL_DARK = {
+      pass: "#4ac486",
+      findings: "#e0b050",
+      fail: "#f2705f",
+      undecided: "#9aa3ad",
+      muted: "#7d8794",
+      text: "#e6e8eb",
+      edge: "#8b949e",
+      surface: "transparent",
+      background: "#0d1117"
+    };
+    var GITHUB_LIGHT = {
+      pass: "#1a7f37",
+      findings: "#9a6700",
+      fail: "#cf222e",
+      undecided: "#656d76",
+      muted: "#8c959f",
+      text: "#1f2328",
+      edge: "#656d76",
+      surface: "transparent",
+      background: "#ffffff"
+    };
+    var GITHUB_DARK = {
+      pass: "#3fb950",
+      findings: "#d29922",
+      fail: "#f85149",
+      undecided: "#7d8590",
+      muted: "#6e7681",
+      text: "#e6edf3",
+      edge: "#7d8590",
+      surface: "transparent",
+      background: "#0d1117"
+    };
+    var HIGH_CONTRAST = {
+      pass: "#0a5c35",
+      findings: "#7a4300",
+      fail: "#a30000",
+      undecided: "#333333",
+      muted: "#444444",
+      text: "#000000",
+      edge: "#000000",
+      surface: "transparent",
+      background: "#ffffff"
+    };
+    var PRINT = {
+      pass: "#333333",
+      findings: "#555555",
+      fail: "#000000",
+      undecided: "#666666",
+      muted: "#777777",
+      text: "#000000",
+      edge: "#333333",
+      surface: "transparent",
+      background: "#ffffff"
+    };
+    var SCHEMES = {
+      default: { light: NEUTRAL_LIGHT, dark: NEUTRAL_DARK },
+      github: { light: GITHUB_LIGHT, dark: GITHUB_DARK },
+      "high-contrast": { light: HIGH_CONTRAST },
+      print: { light: PRINT }
+    };
+    function palette(overrides = {}, options = {}) {
+      const scheme = options.scheme ?? "default";
+      const mode = options.mode ?? "light";
+      const chosen = SCHEMES[scheme] ?? SCHEMES.default;
+      const base = mode === "dark" ? chosen.dark ?? chosen.light : chosen.light;
+      return { ...base, ...overrides };
+    }
+    function roleForVerdict(verdict) {
+      if (verdict === "pass") return "pass";
+      if (verdict === "pass_with_findings") return "findings";
+      if (verdict === "fail") return "fail";
+      return "undecided";
+    }
+    function schemeNames() {
+      return Object.keys(SCHEMES);
+    }
+    
+    // src/render/model.ts
+    function emptyDiagram(title, caption) {
+      return { kind: "none", title, nodes: [], edges: [], caption };
+    }
+    function labelOf(node) {
+      return node.label !== void 0 && node.label !== "" ? node.label : node.id;
+    }
+    
+    // src/render/paint.ts
+    var TITLE_HEIGHT = 26;
+    var NODE_HEIGHT2 = 34;
+    var CHANNEL_GAP = 16;
+    var CAPTION_CHARS = 78;
+    var CAPTION_LINE = 15;
+    var CAPTION_GAP = 16;
+    var CAPTION_CHAR_WIDTH = 6.2;
+    function roleOfNode(node) {
+      if (node.role === "error") return "fail";
+      if (node.role === "warning") return "findings";
+      if (node.role === "muted") return "muted";
+      return "edge";
+    }
+    function wrap(text2, limit) {
+      const lines = [];
+      let line = "";
+      for (const word of text2.split(/\s+/).filter((part) => part !== "")) {
+        const candidate = line === "" ? word : line + " " + word;
+        if (candidate.length <= limit) {
+          line = candidate;
+          continue;
+        }
+        if (line !== "") lines.push(line);
+        line = "";
+        let rest = word;
+        while (rest.length > limit) {
+          lines.push(rest.slice(0, limit));
+          rest = rest.slice(limit);
+        }
+        line = rest;
+      }
+      if (line !== "") lines.push(line);
+      return lines.length === 0 ? [""] : lines;
+    }
+    function captionRole(caption) {
+      return roleForVerdict(caption.split(" \u2014 ")[0]);
+    }
+    function paintWith(diagram, overrides = {}, options = {}) {
+      const colours = palette(overrides, options);
+      const shapes = [];
+      const groups = diagram.groups ?? [];
+      const topOffset = MARGIN + TITLE_HEIGHT;
+      const placement = place(diagram, topOffset);
+      const { boxes, groupRects } = placement;
+      for (const group of groups) {
+        const rect = groupRects.get(group.id);
+        if (rect === void 0) continue;
+        shapes.push({ kind: "group", id: group.id, x: rect.x, y: rect.y, width: rect.width, height: rect.height, label: group.label, colour: "muted" });
+      }
+      const drawn = /* @__PURE__ */ new Set();
+      for (const node of diagram.nodes) {
+        if (drawn.has(node.id)) continue;
+        const box = boxes.get(node.id);
+        drawn.add(node.id);
+        shapes.push({
+          kind: "box",
+          x: box.x,
+          y: box.y,
+          width: box.width,
+          height: box.height,
+          label: labelOf(node),
+          colour: roleOfNode(node),
+          initial: diagram.init === node.id
+        });
+      }
+      const roleById = new Map(diagram.nodes.map((node) => [node.id, roleOfNode(node)]));
+      let channel = Math.max(placement.width, ...Array.from(boxes.values(), (box) => box.x + box.width)) + CHANNEL_GAP;
+      let channelUses = 0;
+      for (const edge of diagram.edges) {
+        const source = boxes.get(edge.from);
+        const target = boxes.get(edge.to);
+        if (source === void 0 || target === void 0) continue;
+        const colour = roleById.get(edge.from);
+        const sameRow = Math.abs(target.y - source.y) < NODE_HEIGHT2 / 2;
+        if (edge.from === edge.to) {
+          const x = source.x + source.width;
+          const y = source.y + source.height / 2;
+          shapes.push({
+            kind: "path",
+            points: [
+              { x, y: y - 9 },
+              { x: x + 14, y: y - 9 },
+              { x: x + 14, y: y + 9 },
+              { x, y: y + 9 }
+            ],
+            label: edge.label,
+            labelX: x + 20,
+            labelY: y,
+            colour
+          });
+          continue;
+        }
+        if (target.y > source.y && !sameRow) {
+          const x1 = source.x + source.width / 2;
+          const y1 = source.y + source.height;
+          const x2 = target.x + target.width / 2;
+          const y2 = target.y;
+          shapes.push({ kind: "link", x1, y1, x2, y2, label: edge.label, labelX: (x1 + x2) / 2 + 7, labelY: (y1 + y2) / 2, colour });
+          continue;
+        }
+        if (sameRow) {
+          const right = source.x + source.width;
+          const left = target.x;
+          const y = source.y + source.height / 2;
+          const forward = right <= left;
+          shapes.push({
+            kind: "link",
+            x1: forward ? right : source.x,
+            y1: y,
+            x2: forward ? left : target.x + target.width,
+            y2: y,
+            label: edge.label,
+            labelX: (right + left) / 2,
+            labelY: y - 7,
+            colour
+          });
+          continue;
+        }
+        const lane = channel + channelUses % 3 * 8;
+        channelUses += 1;
+        channel = Math.max(channel, lane);
+        const startY = source.y + source.height / 2;
+        const endY = target.y + target.height / 2;
+        shapes.push({
+          kind: "path",
+          points: [
+            { x: source.x + source.width, y: startY },
+            { x: lane, y: startY },
+            { x: lane, y: endY },
+            { x: target.x + target.width, y: endY }
+          ],
+          label: edge.label,
+          labelX: lane + 6,
+          labelY: (startY + endY) / 2,
+          colour
+        });
+      }
+      shapes.push({ kind: "title", x: MARGIN, y: MARGIN + 12, text: diagram.title, colour: "text" });
+      const contentRight = Math.max(
+        MARGIN,
+        ...Array.from(boxes.values(), (box) => box.x + box.width),
+        ...Array.from(groupRects.values(), (rect) => rect.x + rect.width)
+      );
+      const captionLines = wrap(diagram.caption, CAPTION_CHARS);
+      const captionWidth = Math.max(...captionLines.map((line) => line.length * CAPTION_CHAR_WIDTH)) + MARGIN * 2;
+      const width = Math.max(contentRight + MARGIN + (channelUses > 0 ? CHANNEL_GAP * 3 : 0), captionWidth, 240);
+      const contentBottom = Math.max(
+        topOffset,
+        ...Array.from(boxes.values(), (box) => box.y + box.height),
+        ...Array.from(groupRects.values(), (rect) => rect.y + rect.height)
+      );
+      const captionTop = contentBottom + CAPTION_GAP;
+      shapes.push({ kind: "caption", x: MARGIN, y: captionTop, lines: captionLines, colour: captionRole(diagram.caption) });
+      const height = captionTop + captionLines.length * CAPTION_LINE + MARGIN / 2;
+      return { canvas: { width: Math.round(width), height: Math.round(height), shapes }, colours };
+    }
+    
+    // src/render/from-mermaid.ts
+    var CURVED_EDGE = /^(.+?)\s*(-->|---|-\.->|==>)\s*(?:\|([^|]*)\|\s*)?(.+)$/;
+    var LABELLED_EDGE = /^(.+?)\s*--\s*([^->]+?)\s*-->\s*(.+)$/;
+    var NODE = /^([A-Za-z_][\w-]*)\s*(?:\[\((.*)\)\]|\[\[(.*)\]\]|\[(.*)\]|\((.*)\)|\{(.*)\}|<<(.*)>>)?$/;
+    var TRANSITION = /^([A-Za-z_][\w-]*|\[\*\])\s*-->\s*([A-Za-z_][\w-]*|\[\*\])\s*(?::\s*(.*))?$/;
+    var STATE_ALIAS = /^state\s+["'](.+?)["']\s+as\s+([A-Za-z_][\w-]*)$/;
+    var DIRECTIVE = /^(click|style|classDef|class|linkStyle|accTitle|accDescr)\b/;
+    var UNSUPPORTED = /* @__PURE__ */ new Set([
+      "sequencediagram",
+      "classdiagram",
+      "erdiagram",
+      "gantt",
+      "pie",
+      "journey",
+      "mindmap",
+      "timeline",
+      "quadrantchart",
+      "gitgraph",
+      "c4context",
+      "requirementdiagram",
+      "sankey-beta"
+    ]);
+    function ensure(builder, id, label) {
+      const existing = builder.nodes.get(id);
+      if (existing === void 0) {
+        builder.nodes.set(id, { id, role: "normal", ...label === void 0 ? {} : { label } });
+        const innermost = builder.open[builder.open.length - 1];
+        if (innermost !== void 0 && !innermost.members.includes(id)) innermost.members.push(id);
+        return;
+      }
+      if (label !== void 0 && (existing.label === void 0 || existing.label === "")) existing.label = label;
+    }
+    function nodeFrom(token) {
+      const match = NODE.exec(token.trim());
+      if (match === null) return void 0;
+      const id = match[1];
+      const label = [match[2], match[3], match[4], match[5], match[6], match[7]].find((value) => value !== void 0 && value.trim() !== "");
+      return { id, ...label === void 0 ? {} : { label: label.trim().replace(/^["']|["']$/g, "") } };
+    }
+    function fromMermaid(source, title = "mermaid") {
+      const lines = source.split(/\r?\n/);
+      const refused = [];
+      const builder = { nodes: /* @__PURE__ */ new Map(), edges: [], groups: [], open: [] };
+      let mode = "none";
+      let startId;
+      let endCount = 0;
+      const push = (edge) => {
+        builder.edges.push(edge);
+      };
+      lines.forEach((raw, index) => {
+        const line = raw.replace(/%%(.*)$/, "").trim();
+        if (line === "") return;
+        const where = "line " + String(index + 1) + ": ";
+        const lower = line.toLowerCase();
+        const keyword = lower.split(/[\s{}]/)[0] ?? "";
+        if (UNSUPPORTED.has(keyword)) {
+          refused.push(where + "`" + keyword + "` is not a diagram this renderer draws");
+          return;
+        }
+        if (DIRECTIVE.test(line)) {
+          refused.push(where + "`" + (line.split(/\s/)[0] ?? "") + "` is a directive this renderer ignores");
+          return;
+        }
+        if (/^(graph|flowchart)\b/.test(lower)) {
+          mode = "graph";
+          return;
+        }
+        if (/^statediagram(-v2)?\b/.test(lower)) {
+          mode = "state";
+          return;
+        }
+        if (/^subgraph\b/.test(lower)) {
+          const label = line.replace(/^subgraph\b/i, "").trim().replace(/^["']|["']$/g, "");
+          const id = "subgraph-" + String(++endCount);
+          builder.open.push({ id, label: label === "" ? id : label, members: [] });
+          return;
+        }
+        if (lower === "end") {
+          const closed = builder.open.pop();
+          if (closed !== void 0) {
+            const container = builder.open[builder.open.length - 1];
+            if (container !== void 0) closed.parent = container.id;
+            builder.groups.push(closed);
+          }
+          return;
+        }
+        if (mode === "state") {
+          const alias = STATE_ALIAS.exec(line);
+          if (alias !== null) {
+            ensure(builder, alias[2], alias[1]);
+            return;
+          }
+          const transition = TRANSITION.exec(line);
+          if (transition === null) {
+            const bare = /^state\s+([A-Za-z_][\w-]*)$/.exec(line);
+            if (bare !== null) {
+              ensure(builder, bare[1]);
+              return;
+            }
+            if (/^[A-Za-z_][\w-]*$/.test(line)) {
+              ensure(builder, line);
+              return;
+            }
+            refused.push(where + "`" + line + "` is not a state transition this renderer draws");
+            return;
+          }
+          const from = transition[1];
+          const to = transition[2];
+          const label = (transition[3] ?? "").trim();
+          if (from === "[*]") {
+            ensure(builder, to);
+            if (startId === void 0) startId = to;
+            return;
+          }
+          if (to === "[*]") {
+            ensure(builder, from);
+            push({ from, to: from, label: label === "" ? "end" : label, dashed: true });
+            return;
+          }
+          ensure(builder, from);
+          ensure(builder, to);
+          push({ from, to, label });
+          return;
+        }
+        const labelled = LABELLED_EDGE.exec(line);
+        if (labelled !== null) {
+          const left = nodeFrom(labelled[1]);
+          const right = nodeFrom(labelled[3]);
+          if (left === void 0 || right === void 0) {
+            refused.push(where + "`" + line + "` does not name two nodes");
+            return;
+          }
+          ensure(builder, left.id, left.label);
+          ensure(builder, right.id, right.label);
+          push({ from: left.id, to: right.id, label: labelled[2].trim() });
+          return;
+        }
+        const edge = CURVED_EDGE.exec(line);
+        if (edge !== null) {
+          const left = nodeFrom(edge[1]);
+          const right = nodeFrom(edge[4]);
+          if (left === void 0 || right === void 0) {
+            refused.push(where + "`" + line + "` does not name two nodes");
+            return;
+          }
+          ensure(builder, left.id, left.label);
+          ensure(builder, right.id, right.label);
+          push({
+            from: left.id,
+            to: right.id,
+            label: (edge[3] ?? "").trim(),
+            ...edge[2] === "-.->" || edge[2] === "==>" ? { dashed: true } : {}
+          });
+          return;
+        }
+        const single = nodeFrom(line);
+        if (single !== void 0) {
+          ensure(builder, single.id, single.label);
+          return;
+        }
+        refused.push(where + "`" + line + "` is not something this renderer draws");
+      });
+      if (mode === "none") {
+        return { diagram: emptyDiagram(title, "no mermaid diagram found"), refused };
+      }
+      if (builder.nodes.size === 0) {
+        return { diagram: emptyDiagram(title, "no nodes found"), refused };
+      }
+      const diagram = {
+        kind: mode === "state" ? "machine" : "graph",
+        title,
+        ...startId === void 0 ? {} : { init: startId },
+        nodes: [...builder.nodes.values()],
+        edges: builder.edges,
+        ...builder.groups.length === 0 ? {} : { groups: builder.groups },
+        caption: mode + ", " + String(builder.nodes.size) + " box" + (builder.nodes.size === 1 ? "" : "es") + ", " + String(builder.edges.length) + " arrow" + (builder.edges.length === 1 ? "" : "s") + (refused.length === 0 ? "" : ", " + String(refused.length) + " line(s) refused")
+      };
+      return { diagram, refused };
+    }
+    
+    // src/render/collapse.ts
+    function subtreeSize(diagram, groupId, seen) {
+      if (seen.has(groupId)) return 0;
+      seen.add(groupId);
+      const groups = diagram.groups ?? [];
+      const group = groups.find((entry) => entry.id === groupId);
+      if (group === void 0) return 0;
+      const children = groups.filter((entry) => entry.parent === groupId);
+      return group.members.length + children.reduce((total, child) => total + subtreeSize(diagram, child.id, seen), 0);
+    }
+    function ownerOf(diagram, nodeId) {
+      return (diagram.groups ?? []).find((group) => group.members.includes(nodeId))?.id;
+    }
+    function collapse(diagram, folded) {
+      const asked = new Set(folded);
+      const groups = diagram.groups ?? [];
+      if (asked.size === 0 || groups.length === 0) return diagram;
+      const byId = new Map(groups.map((group) => [group.id, group]));
+      const targets = /* @__PURE__ */ new Set();
+      for (const id of asked) {
+        const group = byId.get(id);
+        if (group !== void 0 && subtreeSize(diagram, id, /* @__PURE__ */ new Set()) > 0) targets.add(id);
+      }
+      if (targets.size === 0) return diagram;
+      for (const id of [...targets]) {
+        let cursor = byId.get(id)?.parent;
+        const seen = /* @__PURE__ */ new Set();
+        while (cursor !== void 0 && !seen.has(cursor)) {
+          seen.add(cursor);
+          if (targets.has(cursor)) {
+            targets.delete(id);
+            break;
+          }
+          cursor = byId.get(cursor)?.parent;
+        }
+      }
+      const removedNodes = /* @__PURE__ */ new Set();
+      const removedGroups = /* @__PURE__ */ new Set();
+      const descend = (groupId, seen) => {
+        if (seen.has(groupId)) return;
+        seen.add(groupId);
+        removedGroups.add(groupId);
+        const group = byId.get(groupId);
+        if (group === void 0) return;
+        for (const member of group.members) removedNodes.add(member);
+        for (const child of groups.filter((entry) => entry.parent === groupId)) descend(child.id, seen);
+      };
+      for (const id of targets) descend(id, /* @__PURE__ */ new Set());
+      const foldOf = (id) => {
+        for (const target of targets) {
+          const inSubtree = (groupId, seen) => {
+            if (seen.has(groupId)) return false;
+            seen.add(groupId);
+            if (groupId === target) return true;
+            return groups.filter((entry) => entry.parent === groupId).some((child) => inSubtree(child.id, seen));
+          };
+          const group = byId.get(target);
+          if (group.members.includes(id) || inSubtree(ownerOf(diagram, id) ?? "", /* @__PURE__ */ new Set())) return target;
+        }
+        return void 0;
+      };
+      const nodes = [];
+      const emitted = /* @__PURE__ */ new Set();
+      for (const node of diagram.nodes) {
+        if (!removedNodes.has(node.id)) {
+          nodes.push(node);
+          continue;
+        }
+        const fold = foldOf(node.id);
+        if (fold === void 0 || emitted.has(fold)) continue;
+        emitted.add(fold);
+        const group = byId.get(fold);
+        nodes.push({ id: fold, label: group.label + " (" + String(subtreeSize(diagram, fold, /* @__PURE__ */ new Set())) + ")", role: "normal" });
+      }
+      for (const id of targets) {
+        if (emitted.has(id)) continue;
+        const group = byId.get(id);
+        nodes.push({ id, label: group.label + " (" + String(subtreeSize(diagram, id, /* @__PURE__ */ new Set())) + ")", role: "normal" });
+      }
+      const edges = [];
+      const seenEdges = /* @__PURE__ */ new Set();
+      for (const edge of diagram.edges) {
+        const from = removedNodes.has(edge.from) ? foldOf(edge.from) : edge.from;
+        const to = removedNodes.has(edge.to) ? foldOf(edge.to) : edge.to;
+        if (from === void 0 || to === void 0) continue;
+        if (from === to) continue;
+        const key = from + ">" + to + ":" + edge.label;
+        if (seenEdges.has(key)) continue;
+        seenEdges.add(key);
+        edges.push({ ...edge, from, to });
+      }
+      const adopted = /* @__PURE__ */ new Map();
+      for (const id of targets) {
+        const parent = byId.get(id)?.parent;
+        if (parent === void 0 || targets.has(parent) || removedGroups.has(parent)) continue;
+        adopted.set(parent, [...adopted.get(parent) ?? [], id]);
+      }
+      const remaining = groups.filter((group) => !removedGroups.has(group.id) && targets.has(group.id) === false).map((group) => {
+        const extra = adopted.get(group.id);
+        if (extra === void 0) return group;
+        return { ...group, members: [...group.members.filter((member) => !removedNodes.has(member)), ...extra] };
+      });
+      const caption = diagram.caption + (targets.size === 1 ? ", 1 group folded" : ", " + String(targets.size) + " groups folded");
+      return {
+        ...diagram,
+        nodes,
+        edges,
+        ...remaining.length === 0 ? { groups: void 0 } : { groups: remaining },
+        caption
+      };
+    }
+    
+    // src/render/from-plantuml.ts
+    var ARROW = /^(.+?)\s*(<?)(-{2,}|\.{2,})(>?)\s*(.+?)(?:\s*:\s*(.+))?$/;
+    var DECLARED = /^(component|package|node|folder|cloud|database|state|artifact|frame|rectangle)\s+(.+)$/;
+    var QUOTED_ALIAS = /^["'](.+?)["']\s+as\s+([A-Za-z_][\w-]*)$/;
+    var BRACKET_ALIAS = /^\[(.+?)\]\s+as\s+([A-Za-z_][\w-]*)$/;
+    var BRACKET = /^\[(.+?)\]$/;
+    var UNSUPPORTED2 = /^(actor|participant|usecase|class|object|note|legend|alt|opt|loop|par|group\s|ref\s|activate|deactivate|destroy|create|newpage)\b/;
+    var IGNORED = /^(skinparam|!theme|!define|!include|hide|show|scale|left to right direction|top to bottom direction|together)\b/;
+    function ensure2(builder, id, label) {
+      const existing = builder.nodes.get(id);
+      if (existing === void 0) {
+        builder.nodes.set(id, { id, role: "normal", ...label === void 0 ? {} : { label } });
+        const innermost = builder.open[builder.open.length - 1];
+        if (innermost !== void 0 && !innermost.members.includes(id)) innermost.members.push(id);
+        return;
+      }
+      if (label !== void 0 && (existing.label === void 0 || existing.label === "")) existing.label = label;
+    }
+    function reference(token) {
+      const text2 = token.trim();
+      const bracket = BRACKET.exec(text2);
+      if (bracket !== null) {
+        const label = bracket[1].trim();
+        return { id: label, label };
+      }
+      const quoted = /^["'](.+?)["']$/.exec(text2);
+      if (quoted !== null) return { id: quoted[1], label: quoted[1] };
+      return { id: text2 };
+    }
+    function fromPlantUml(source, title = "plantuml") {
+      const lines = source.split(/\r?\n/);
+      const refused = [];
+      const builder = { nodes: /* @__PURE__ */ new Map(), edges: [], groups: [], open: [] };
+      let startId;
+      let seenAny = false;
+      let groupCount = 0;
+      lines.forEach((raw, index) => {
+        const line = raw.replace(/'.*$/, "").trim();
+        if (line === "") return;
+        const where = "line " + String(index + 1) + ": ";
+        if (/^@(start|end)uml\b/.test(line)) return;
+        seenAny = true;
+        if (/^title\b/.test(line)) return;
+        if (IGNORED.test(line)) return;
+        if (UNSUPPORTED2.test(line)) {
+          refused.push(where + "`" + (line.split(/\s/)[0] ?? "") + "` is not a diagram this renderer draws");
+          return;
+        }
+        if (line === "}") {
+          const closing = builder.open.pop();
+          if (closing !== void 0) {
+            const container = builder.open[builder.open.length - 1];
+            if (container !== void 0) closing.parent = container.id;
+            builder.groups.push(closing);
+          }
+          return;
+        }
+        if (line.endsWith("{")) {
+          const declaration = line.slice(0, -1).trim();
+          const declared2 = DECLARED.exec(declaration);
+          const label = declared2 === null ? declaration.replace(/^["']|["']$/g, "") : declared2[2].replace(/^["']|["']$/g, "");
+          groupCount += 1;
+          builder.open.push({ id: "group-" + String(groupCount), label, members: [] });
+          return;
+        }
+        const declared = DECLARED.exec(line);
+        if (declared !== null) {
+          const rest = declared[2].trim();
+          const quoted = QUOTED_ALIAS.exec(rest);
+          if (quoted !== null) {
+            ensure2(builder, quoted[2], quoted[1]);
+            return;
+          }
+          const bracketed = BRACKET_ALIAS.exec(rest);
+          if (bracketed !== null) {
+            ensure2(builder, bracketed[2], bracketed[1]);
+            return;
+          }
+          if (/^["'](.+?)["']$/.test(rest)) return;
+          const reference_ = reference(rest);
+          ensure2(builder, reference_.id, reference_.label);
+          return;
+        }
+        if (line === "[*] --> [*]") return;
+        const startMarker = /^\[\*\]\s*-->\s*(.+)$/.exec(line);
+        if (startMarker !== null) {
+          const target = reference(startMarker[1]);
+          ensure2(builder, target.id, target.label);
+          if (startId === void 0) startId = target.id;
+          return;
+        }
+        const arrow = ARROW.exec(line);
+        if (arrow !== null) {
+          const left = arrow[2] === "<" ? arrow[5] : arrow[1];
+          const right = arrow[2] === "<" ? arrow[1] : arrow[5];
+          const from = reference(left);
+          const to = reference(right);
+          ensure2(builder, from.id, from.label);
+          ensure2(builder, to.id, to.label);
+          builder.edges.push({ from: from.id, to: to.id, label: (arrow[6] ?? "").trim(), ...arrow[3].startsWith(".") ? { dashed: true } : {} });
+          return;
+        }
+        const single = BRACKET.exec(line);
+        if (single !== null) {
+          ensure2(builder, single[1].trim(), single[1].trim());
+          return;
+        }
+        refused.push(where + "`" + line + "` is not something this renderer draws");
+      });
+      if (!seenAny || builder.nodes.size === 0) {
+        return { diagram: emptyDiagram(title, "no nodes found"), refused };
+      }
+      const diagram = {
+        kind: startId === void 0 ? "graph" : "machine",
+        title,
+        ...startId === void 0 ? {} : { init: startId },
+        nodes: [...builder.nodes.values()],
+        edges: builder.edges,
+        ...builder.groups.length === 0 ? {} : { groups: builder.groups },
+        caption: "plantuml, " + String(builder.nodes.size) + " box" + (builder.nodes.size === 1 ? "" : "es") + ", " + String(builder.edges.length) + " arrow" + (builder.edges.length === 1 ? "" : "s") + (refused.length === 0 ? "" : ", " + String(refused.length) + " line(s) refused")
+      };
+      return { diagram, refused };
+    }
+    
+    // src/render/svg.ts
+    var n = (value) => {
+      const rounded = Math.round(value * 10) / 10;
+      return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);
+    };
+    var escape = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
+    var writers = {
+      // A boundary is a dashed rectangle with its name in the top-left corner, drawn under everything else.
+      group: (shape, colours) => {
+        const stroke = colours[shape.colour];
+        return '<g data-group-id="' + escape(shape.id) + '" style="cursor:pointer"><rect x="' + n(shape.x) + '" y="' + n(shape.y) + '" width="' + n(shape.width) + '" height="' + n(shape.height) + '" rx="8" fill="none" stroke="' + stroke + '" stroke-width="1" stroke-dasharray="4 3" /><text x="' + n(shape.x + 6) + '" y="' + n(shape.y + 12) + '" font-size="10" fill="' + stroke + '">' + escape(shape.label) + "</text></g>";
+      },
+      box: (shape, colours) => {
+        const stroke = colours[shape.colour];
+        const width = shape.initial ? 2.5 : 1;
+        return '<rect x="' + n(shape.x) + '" y="' + n(shape.y) + '" width="' + n(shape.width) + '" height="' + n(shape.height) + '" rx="6" fill="' + colours.surface + '" stroke="' + stroke + '" stroke-width="' + n(width) + '" /><text x="' + n(shape.x + shape.width / 2) + '" y="' + n(shape.y + shape.height / 2 + 4) + '" font-size="11" text-anchor="middle" fill="' + stroke + '">' + escape(shape.label) + "</text>";
+      },
+      link: (shape, colours) => {
+        const stroke = colours[shape.colour];
+        const arrow = arrowHead(shape.x1, shape.y1, shape.x2, shape.y2, stroke);
+        return '<line x1="' + n(shape.x1) + '" y1="' + n(shape.y1) + '" x2="' + n(shape.x2) + '" y2="' + n(shape.y2) + '" stroke="' + stroke + '" stroke-width="1" />' + arrow + edgeLabel(shape.label, shape.labelX, shape.labelY, colours);
+      },
+      path: (shape, colours) => {
+        const stroke = colours[shape.colour];
+        const points = shape.points.map((point) => n(point.x) + "," + n(point.y)).join(" ");
+        const last = shape.points[shape.points.length - 1];
+        const before = shape.points[shape.points.length - 2] ?? last;
+        return '<polyline points="' + points + '" fill="none" stroke="' + stroke + '" stroke-width="1" stroke-linejoin="round" />' + arrowHead(before.x, before.y, last.x, last.y, stroke) + edgeLabel(shape.label, shape.labelX, shape.labelY, colours);
+      },
+      title: (shape, colours) => {
+        return '<text x="' + n(shape.x) + '" y="' + n(shape.y) + '" font-size="12" fill="' + colours[shape.colour] + '">' + escape(shape.text) + "</text>";
+      },
+      caption: (shape, colours) => {
+        const colour = colours[shape.colour];
+        const lines = shape.lines.map((line, index) => '<tspan x="' + n(shape.x) + '" dy="' + (index === 0 ? 0 : 15) + '">' + escape(line) + "</tspan>").join("");
+        return '<text x="' + n(shape.x) + '" y="' + n(shape.y + 11) + '" font-size="10" fill="' + colour + '">' + lines + "</text>";
+      }
+    };
+    function arrowHead(x1, y1, x2, y2, stroke) {
+      const length = Math.hypot(x2 - x1, y2 - y1);
+      if (length < 1) return "";
+      const ux = (x2 - x1) / length;
+      const uy = (y2 - y1) / length;
+      const size = 7;
+      const half = 3.2;
+      const baseX = x2 - ux * size;
+      const baseY = y2 - uy * size;
+      const left = n(baseX - uy * half) + "," + n(baseY + ux * half);
+      const right = n(baseX + uy * half) + "," + n(baseY - ux * half);
+      return '<polygon points="' + n(x2) + "," + n(y2) + " " + left + " " + right + '" fill="' + stroke + '" />';
+    }
+    function edgeLabel(label, x, y, colours) {
+      if (typeof label !== "string" || label === "") return "";
+      return '<text x="' + n(x) + '" y="' + n(y) + '" font-size="10" fill="' + colours.muted + '">' + escape(label) + "</text>";
+    }
+    function toSvg(canvas, colours, label) {
+      let dropped = 0;
+      const body = [];
+      for (const shape of canvas.shapes) {
+        const writer = writers[shape.kind];
+        if (writer === void 0) {
+          dropped += 1;
+          continue;
+        }
+        body.push(writer(shape, colours));
+      }
+      const header = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + n(canvas.width) + " " + n(canvas.height) + '" width="' + n(canvas.width) + '" height="' + n(canvas.height) + '" role="img"' + (label === void 0 ? "" : ' aria-label="' + escape(label) + '"') + ' font-family="system-ui, -apple-system, Segoe UI, sans-serif">';
+      const background = '<rect x="0" y="0" width="' + n(canvas.width) + '" height="' + n(canvas.height) + '" fill="' + colours.background + '" />';
+      return { markup: header + background + body.join("") + "</svg>", dropped };
+    }
+    
+    // src/render/index.ts
+    function detectNotation(source) {
+      const head = source.split(/\r?\n/).map((line) => line.trim()).find((line) => line !== "" && !line.startsWith("'") && !line.startsWith("//"));
+      if (head === void 0) return "mermaid";
+      return /^@start/.test(head) ? "plantuml" : "mermaid";
+    }
+    function render(input, overrides = {}, options = {}) {
+      const notation = input.notation === void 0 || input.notation === "auto" ? detectNotation(input.source) : input.notation;
+      const parsed = notation === "plantuml" ? fromPlantUml(input.source, input.title ?? "plantuml") : fromMermaid(input.source, input.title ?? "mermaid");
+      const diagram = input.folded === void 0 ? parsed.diagram : collapse(parsed.diagram, input.folded);
+      const { canvas, colours } = paintWith(diagram, overrides, options);
+      const written = toSvg(canvas, colours, diagram.title + ": " + diagram.caption);
+      return {
+        diagram,
+        canvas,
+        colours,
+        markup: written.markup,
+        notation,
+        refused: parsed.refused,
+        dropped: written.dropped
+      };
+    }
+    
+    // src/render/viewmodel.ts
+    var record = (value) => typeof value === "object" && value !== null && !Array.isArray(value) ? value : void 0;
+    var array = (value) => Array.isArray(value) ? value : [];
+    var text = (value) => typeof value === "string" && value !== "" ? value : void 0;
+    function reportText(content) {
+      const parts = [];
+      for (const entry of array(content)) {
+        const block = record(entry);
+        const body = text(block?.text);
+        if (body !== void 0) parts.push(body);
+      }
+      return parts.join(String.fromCharCode(10));
+    }
+    function readReport(content) {
+      const body = reportText(content);
+      if (body === "") return {};
+      const verdict = /verdict=(\w+)/.exec(body)?.[1];
+      const named = /\[error\/([A-Z0-9_]+)\]\s*(.*)/.exec(body);
+      if (named !== null) return { verdict, code: named[1], message: named[2] };
+      const first = /first error:\s*([A-Z0-9_]+)/.exec(body);
+      return first === null ? { verdict } : { verdict, code: first[1] };
+    }
+    function readModel(args) {
+      const view = record(args);
+      if (view === void 0) return void 0;
+      const read = view.value;
+      if (typeof read === "function") return record(read("model"));
+      return record(view.model);
+    }
+    function machineOf(model) {
+      if (model === void 0) return void 0;
+      const states = array(model.states).map(record).filter((entry) => entry !== void 0 && typeof entry.id === "string");
+      if (states.length === 0) return void 0;
+      const edges = array(model.transitions).map(record).filter((entry) => entry !== void 0 && typeof entry.from === "string" && typeof entry.to === "string").map((entry) => ({ from: String(entry.from), to: String(entry.to), label: text(entry.event) ?? "" }));
+      return {
+        nodes: states.map((state) => ({ id: String(state.id), role: "normal" })),
+        edges,
+        ...typeof model.init === "string" ? { init: model.init } : {}
+      };
+    }
+    function captionOf(report) {
+      const verdict = report.verdict ?? "no report yet";
+      if (report.code === void 0) return verdict;
+      const message = report.message ?? "";
+      return verdict + " \u2014 " + report.code + (message === "" ? "" : ": " + message);
+    }
+    function blame(nodes, report) {
+      if (report.message === void 0) return nodes;
+      const message = report.message;
+      const named = nodes.filter((node) => {
+        const escaped = node.id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        return new RegExp("(?<![A-Za-z0-9_])" + escaped + "(?![A-Za-z0-9_])").test(message);
+      }).map((node) => node.id);
+      if (named.length === 0) return nodes;
+      return nodes.map((node) => named.includes(node.id) ? { ...node, role: "error" } : node);
+    }
+    function viewModel(input) {
+      const block = record(input.block);
+      const title = text(block?.name) ?? text(input.toolName) ?? "tool";
+      const report = readReport(block?.content);
+      const parsed = record(block?.result);
+      const findings = array(parsed?.findings).map(record);
+      const firstError = findings.find((finding) => finding?.severity === "error");
+      const merged = {
+        verdict: text(parsed?.verdict) ?? report.verdict,
+        ...report.code === void 0 && typeof firstError?.code === "string" ? { code: firstError.code } : { code: report.code },
+        ...report.message === void 0 && typeof firstError?.message === "string" ? { message: firstError.message } : { message: report.message }
+      };
+      const caption = captionOf(merged);
+      const machine = machineOf(readModel(block?.args));
+      if (machine === void 0) {
+        return { kind: "none", title, nodes: [], edges: [], caption };
+      }
+      return {
+        kind: "machine",
+        title,
+        ...machine.init === void 0 ? {} : { init: machine.init },
+        nodes: blame(machine.nodes, merged),
+        edges: machine.edges,
+        caption
+      };
+    }
+    
+    // src/client.ts
+    var TOOL_NAMES = ["model_verify"];
+    function themeMode() {
+      try {
+        const scope = globalThis;
+        const body = scope.document?.body;
+        const computed = typeof scope.getComputedStyle === "function" && body !== void 0 ? scope.getComputedStyle(body) : void 0;
+        const colour = computed?.backgroundColor ?? "";
+        const rgb = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(colour);
+        if (rgb !== null) {
+          const [r, g, b] = [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+          return (0.299 * r + 0.587 * g + 0.114 * b) / 255 < 0.5 ? "dark" : "light";
+        }
+      } catch {
+      }
+      return "light";
+    }
+    function surfaceStyle(colours) {
+      return { background: colours.background, color: colours.text, padding: "4px 0", overflowX: "auto" };
+    }
+    var WHITEBOARD_ID = "model-everything-diagram";
+    var WHITEBOARD_SAMPLE = ["graph TD", "  a[Idea] --> b{Feasible?}", "  b -->|yes| c[Build]", "  b -->|no| d[Revise]", "  d --> a"].join("\n");
+    function viewFor(React, overrides = {}) {
+      return (props) => {
+        const diagram = viewModel({ phase: props.phase, toolName: props.toolName, block: props.block });
+        const { canvas, colours } = paintWith(diagram, overrides, { mode: themeMode() });
+        const written = toSvg(canvas, colours, diagram.kind === "none" ? diagram.caption : diagram.title + ": " + diagram.caption);
+        return React.createElement("div", {
+          style: surfaceStyle(colours),
+          dangerouslySetInnerHTML: { __html: written.markup }
+        });
+      };
+    }
+    function whiteboardFor(React, overrides = {}) {
+      const h = (type, props, ...children) => React.createElement(type, props, ...children);
+      return function Whiteboard() {
+        const useState = React.useState;
+        if (useState === void 0) {
+          return h(
+            "div",
+            { style: { padding: "8px" } },
+            h("textarea", {
+              value: WHITEBOARD_SAMPLE,
+              readOnly: true,
+              spellcheck: false,
+              rows: WHITEBOARD_SAMPLE.split("\n").length,
+              style: { width: "100%", font: "12px ui-monospace, SFMono-Regular, Menlo, monospace" }
+            }),
+            // The picker is present but inert: a host without hooks cannot hold the choice, and hiding the
+            // option would make the board look like it has none.
+            h(
+              "select",
+              { disabled: true, style: { margin: "4px 0", fontSize: "12px" } },
+              ...schemeNames().map((name) => h("option", { value: name, selected: name === "default" }, name))
+            ),
+            whiteboardBody(React, overrides, WHITEBOARD_SAMPLE, 1)
+          );
+        }
+        const [source, setSource] = useState(WHITEBOARD_SAMPLE);
+        const [zoom, setZoom] = useState(1);
+        const [scheme, setScheme] = useState("default");
+        const [fit, setFit] = useState(true);
+        const [folded, setFolded] = useState([]);
+        const drawn = drawSample(React, overrides, source, fit ? 0 : zoom, scheme, folded);
+        const textarea = h("textarea", {
+          value: source,
+          spellcheck: false,
+          rows: Math.min(12, Math.max(4, String(source).split("\n").length)),
+          style: { width: "100%", font: "12px ui-monospace, SFMono-Regular, Menlo, monospace", padding: "6px", resize: "vertical" },
+          onInput: (event) => setSource(String(event?.target?.value ?? ""))
+        });
+        const controls = h(
+          "div",
+          { style: { display: "flex", gap: "6px", alignItems: "center", padding: "4px 0", flexWrap: "wrap" } },
+          h("button", { type: "button", onClick: () => {
+            setFit(false);
+            setZoom(Math.max(0.5, Math.round((Number(zoom) - 0.25) * 100) / 100));
+          } }, "\u2212"),
+          h("span", { style: { fontSize: "12px", opacity: 0.7 } }, fit ? "fit" : String(Math.round(Number(zoom) * 100)) + "%"),
+          h("button", { type: "button", onClick: () => {
+            setFit(false);
+            setZoom(Math.min(3, Math.round((Number(zoom) + 0.25) * 100) / 100));
+          } }, "+"),
+          h("button", { type: "button", onClick: () => {
+            setFit(false);
+            setZoom(1);
+          } }, "reset"),
+          h("button", { type: "button", title: "Scale to the pane width", onClick: () => setFit(!fit) }, fit ? "fit: on" : "fit: off"),
+          folded.length === 0 ? null : h("button", { type: "button", title: "Unfold every group", onClick: () => setFolded([]) }, "unfold " + String(folded.length)),
+          h(
+            "select",
+            {
+              value: scheme,
+              title: "Colour scheme",
+              style: { marginLeft: "auto", fontSize: "12px" },
+              onChange: (event) => setScheme(String(event?.target?.value ?? "default"))
+            },
+            ...schemeNames().map((name) => h("option", { value: name, selected: name === scheme }, name))
+          )
+        );
+        return h(
+          "div",
+          { style: { display: "flex", flexDirection: "column", gap: "4px", height: "100%", boxSizing: "border-box", padding: "8px" } },
+          textarea,
+          controls,
+          // The drawing takes the rest of the pane and scrolls inside it, so an expanded tab uses its room.
+          h(
+            "div",
+            {
+              style: { flex: "1 1 auto", minHeight: "0", overflow: "auto" },
+              // A boundary carries its id in the markup, so one listener on the container is enough: no per-rect
+              // handler, and the handling survives a re-render that replaced the whole SVG.
+              onClick: (event) => {
+                const hit = event?.target?.closest?.("[data-group-id]");
+                const id = hit?.getAttribute?.("data-group-id");
+                if (typeof id !== "string" || id === "") return;
+                setFolded(folded.includes(id) ? folded.filter((entry) => entry !== id) : [...folded, id]);
+              }
+            },
+            drawn
+          )
+        );
+      };
+    }
+    function drawSample(React, overrides, source, zoom, scheme, folded = []) {
+      return whiteboardBody(React, overrides, source, zoom, scheme, folded);
+    }
+    function whiteboardBody(React, overrides, source, zoom, scheme = "default", folded = []) {
+      if (String(source).trim() === "") {
+        return React.createElement("p", { style: { fontSize: "12px", opacity: 0.7 } }, "Paste Mermaid or PlantUML above.");
+      }
+      const drawn = render({ source: String(source), folded }, overrides, { mode: themeMode(), scheme });
+      const zoomed = zoom === 0 ? drawn.markup.replace("<svg ", '<svg style="width: 100%; height: auto; display: block" ') : drawn.markup.replace("<svg ", '<svg style="zoom: ' + String(zoom) + '; display: block" ');
+      const refused = drawn.refused.length === 0 ? null : React.createElement("pre", {
+        style: { fontSize: "11px", color: "#b7791f", whiteSpace: "pre-wrap", margin: "6px 0" }
+      }, drawn.refused.join("\n"));
+      return React.createElement(
+        "div",
+        { style: { background: drawn.colours.background, color: drawn.colours.text, borderRadius: "6px" } },
+        React.createElement("div", { dangerouslySetInnerHTML: { __html: zoomed } }),
+        refused
+      );
+    }
+    var SIDEBAR_POLL_MS = 250;
+    var SIDEBAR_POLL_ATTEMPTS = 40;
+    function mountWhiteboard(React, ctx, options = {}) {
+      const schedule = options.schedule ?? ((run, delay) => {
+        const timer = globalThis.setTimeout;
+        return typeof timer === "function" ? timer(run, delay) : void 0;
+      });
+      let attempts = 0;
+      const attempt = () => {
+        attempts += 1;
+        const tabs = typeof ctx.get === "function" ? ctx.get("sidebarRightTabs") : void 0;
+        if (tabs === void 0 || typeof tabs.register !== "function") {
+          if (attempts < SIDEBAR_POLL_ATTEMPTS) schedule(attempt, SIDEBAR_POLL_MS);
+          return void 0;
+        }
+        tabs.register({
+          id: WHITEBOARD_ID,
+          kind: "panel",
+          keepMounted: true,
+          title: () => "Diagram",
+          guide: [
+            {
+              id: "diagram-whiteboard",
+              order: 120,
+              title: () => "Diagram",
+              description: () => "Paste Mermaid or PlantUML and read the drawing"
+            }
+          ]
+        });
+        return ctx.slots.register({ name: "sidebar.right.pane.tab", key: WHITEBOARD_ID }, whiteboardFor(React));
+      };
+      return attempt();
+    }
+    function factory(require2) {
+      const hostRequire = require2;
+      const React = hostRequire("react");
+      return {
+        inject: ["slots"],
+        mount: (ctx, options = {}) => mountWhiteboard(React, ctx, options),
+        apply(ctx) {
+          for (const name of TOOL_NAMES) {
+            ctx.slots.inject("tool.call.toolview", () => ctx.slots.register({ name: "tool.call.toolview", key: name }, viewFor(React)));
+          }
+          ctx.slots.inject("sidebar.right.pane.tab", () => mountWhiteboard(React, ctx));
+        }
+      };
+    }
+    
+    const create = module.exports.default ?? module.exports;
+    return create(require);
+  },
+});