@x12i/diagrams 1.0.0 → 1.1.0

package/dist/react.js

@@ -0,0 +1,2525 @@
+"use client";
+import {
+  DiagramMutationError,
+  GRID_SIZE,
+  NODE_KINDS,
+  addNode,
+  alignNodes,
+  buildIndex,
+  checkConnection,
+  computeEdgePath,
+  connect,
+  createDiagram,
+  createHistory,
+  defaultMessages,
+  defaultPalette,
+  diagramToOutline,
+  diagramToOutlineTree,
+  diagramToSvgTree,
+  disconnect,
+  distributeNodes,
+  duplicateNodes,
+  exportDiagramJson,
+  exportDiagramSvg,
+  extractFragment,
+  findDirectionalNeighbor,
+  formatMessage,
+  getAbsoluteBounds,
+  getAncestors,
+  getNodeSize,
+  getPortPlacements,
+  getReadingOrder,
+  groupNodes,
+  historyReducer,
+  isContainerKind,
+  isSafeImageUrl,
+  layoutedDiagram,
+  moveNodes,
+  nextEdgeId,
+  nextNodeId,
+  pasteFragment,
+  removeEdges,
+  removeNodes,
+  resizeNode,
+  resolveMessages,
+  snapPoint,
+  summarizeNodes,
+  translateNodes,
+  ungroupNode,
+  updateEdge,
+  updateNode
+} from "./chunk-3DJFQRU3.js";
+
+// src/react/canvas.tsx
+import { VisuallyHidden } from "@x12i/ui";
+import {
+  Background,
+  BackgroundVariant,
+  MiniMap,
+  ReactFlow,
+  ReactFlowProvider,
+  useReactFlow
+} from "@xyflow/react";
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useId as useId3,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo as useMemo3,
+  useRef as useRef4,
+  useState as useState3
+} from "react";
+
+// src/react/context.ts
+import { createContext, useContext } from "react";
+var CanvasContext = createContext(null);
+function useCanvasContext() {
+  const value = useContext(CanvasContext);
+  if (value === null) throw new Error("@x12i/diagrams: node and edge components must be rendered inside DiagramCanvas.");
+  return value;
+}
+
+// src/react/edges.tsx
+import { BaseEdge, EdgeLabelRenderer } from "@xyflow/react";
+import { memo, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TONES = ["neutral", "success", "warning", "danger", "info"];
+function EdgeMarkers({ markerId }) {
+  return /* @__PURE__ */ jsx("svg", { "data-kit": "diagram-markers", width: "0", height: "0", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("defs", { children: TONES.map((tone) => /* @__PURE__ */ jsx(
+    "marker",
+    {
+      id: markerId(tone),
+      "data-tone": tone,
+      viewBox: "0 0 10 10",
+      refX: "9",
+      refY: "5",
+      markerWidth: "8",
+      markerHeight: "8",
+      orient: "auto-start-reverse",
+      markerUnits: "userSpaceOnUse",
+      children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z" })
+    },
+    tone
+  )) }) });
+}
+function EdgeLabelEditor({ initial, source, target }) {
+  const { messages, commitEditing, cancelEditing } = useCanvasContext();
+  const [draft, setDraft] = useState(initial);
+  const finished = useRef(false);
+  const field = useRef(null);
+  useEffect(() => {
+    field.current?.focus();
+    field.current?.select();
+  }, []);
+  const finish = (keep) => {
+    if (finished.current) return;
+    finished.current = true;
+    if (keep) commitEditing(draft);
+    else cancelEditing();
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: field,
+      type: "text",
+      dir: "auto",
+      "data-slot": "editor",
+      className: "nodrag nopan nowheel",
+      value: draft,
+      "aria-label": formatMessage(messages.edge.editLabel, { source, target }),
+      onChange: (event) => setDraft(event.target.value),
+      onBlur: () => finish(true),
+      onPointerDown: (event) => event.stopPropagation(),
+      onDoubleClick: (event) => event.stopPropagation(),
+      onKeyDown: (event) => {
+        event.stopPropagation();
+        if (event.nativeEvent.isComposing) return;
+        if (event.key === "Enter") {
+          event.preventDefault();
+          finish(true);
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          finish(false);
+        }
+      }
+    }
+  );
+}
+function KitEdgeComponent(props) {
+  const { id, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, selected } = props;
+  const ctx = useCanvasContext();
+  if (!data) return null;
+  const { edge, tone, loopSize, sourceLabel, targetLabel } = data;
+  const lineKind = edge.kind ?? ctx.edgeKind;
+  const geometry = computeEdgePath({
+    source: { x: sourceX, y: sourceY },
+    target: { x: targetX, y: targetY },
+    sourceSide: sourcePosition,
+    targetSide: targetPosition,
+    ...lineKind === void 0 ? {} : { kind: lineKind },
+    ...source === target ? { loopSize } : {}
+  });
+  const marker = `url(#${ctx.markerId(tone)})`;
+  const editing = ctx.editing?.kind === "edge" && ctx.editing.id === id;
+  const hasLabel = edge.label !== void 0 && edge.label !== "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        id,
+        path: geometry.path,
+        markerEnd: marker,
+        ...edge.bidirectional ? { markerStart: marker } : {},
+        interactionWidth: 24,
+        "data-kit": "diagram-edge",
+        "data-tone": tone === "neutral" ? void 0 : tone,
+        "data-dashed": edge.dashed ? "" : void 0,
+        "data-animated": edge.animated ? "" : void 0,
+        "data-selected": selected ? "" : void 0
+      }
+    ),
+    hasLabel || editing ? /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-kit": "diagram-edge-label",
+        "data-tone": tone === "neutral" ? void 0 : tone,
+        "data-selected": selected ? "" : void 0,
+        "data-editing": editing ? "" : void 0,
+        className: "nodrag nopan",
+        dir: ctx.rtl ? "rtl" : "ltr",
+        style: { transform: `translate(-50%, -50%) translate(${geometry.label.x}px, ${geometry.label.y}px)` },
+        children: editing ? /* @__PURE__ */ jsx(EdgeLabelEditor, { initial: edge.label ?? "", source: sourceLabel, target: targetLabel }) : /* @__PURE__ */ jsx("span", { dir: "auto", children: edge.label })
+      }
+    ) }) : null
+  ] });
+}
+var KitEdge = memo(KitEdgeComponent);
+
+// src/react/flow-adapter.ts
+function displayLabel(node, messages) {
+  return node.label !== "" ? node.label : formatMessage(messages.kinds[node.kind]);
+}
+function buildFlowModel(doc, options) {
+  const { direction, rtl, editable, messages } = options;
+  const index = buildIndex(doc);
+  const summaries = summarizeNodes(doc);
+  const order = getReadingOrder(doc, { direction, rtl });
+  const hidden = /* @__PURE__ */ new Set();
+  for (const node of doc.nodes) {
+    if (getAncestors(index, node.id).some((id) => index.nodesById.get(id)?.collapsed === true)) hidden.add(node.id);
+  }
+  const nodes = [];
+  for (const id of order) {
+    const node = index.nodesById.get(id);
+    if (!node) continue;
+    const summary = summaries.get(id);
+    const size = getNodeSize(node);
+    const label = displayLabel(node, messages);
+    const parts = [
+      formatMessage(messages.node.label, {
+        label,
+        kind: formatMessage(messages.kinds[node.kind]),
+        incoming: summary?.incoming ?? 0,
+        outgoing: summary?.outgoing ?? 0
+      })
+    ];
+    if (node.status !== void 0 && node.status !== "neutral") {
+      parts.push(formatMessage(messages.node.status, { status: formatMessage(messages.statuses[node.status]) }));
+    }
+    if (node.description) parts.push(node.description);
+    if (node.locked) parts.push(formatMessage(messages.announce.locked, { label }));
+    const interactive = editable && node.locked !== true;
+    const parentId = node.parentId !== void 0 && node.parentId !== node.id && index.nodesById.has(node.parentId) ? node.parentId : void 0;
+    const flowNode = {
+      id,
+      type: "kit",
+      position: node.position,
+      data: {
+        node,
+        ports: getPortPlacements(node, direction, rtl),
+        childCount: index.children.get(id)?.length ?? 0
+      },
+      width: size.width,
+      height: size.height,
+      hidden: hidden.has(id),
+      draggable: interactive,
+      connectable: interactive,
+      deletable: interactive,
+      selectable: true,
+      focusable: true,
+      ariaLabel: parts.join(" "),
+      domAttributes: { "aria-roledescription": formatMessage(messages.node.roleDescription) },
+      ...parentId === void 0 ? {} : { parentId, extent: "parent" }
+    };
+    nodes.push(flowNode);
+  }
+  const labelOf = (id) => {
+    const node = index.nodesById.get(id);
+    return node ? displayLabel(node, messages) : id;
+  };
+  const edges = [];
+  for (const edge of doc.edges) {
+    const source = index.nodesById.get(edge.source);
+    const target = index.nodesById.get(edge.target);
+    if (!source || !target) continue;
+    const sourceLabel = labelOf(edge.source);
+    const targetLabel = labelOf(edge.target);
+    const values = { source: sourceLabel, target: targetLabel };
+    const size = getNodeSize(source);
+    const vertical = direction === "TB" || direction === "BT";
+    const ariaLabel = edge.label !== void 0 && edge.label !== "" ? formatMessage(messages.edge.labelWithText, { ...values, label: edge.label }) : formatMessage(messages.edge.label, values);
+    const flowEdge = {
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      type: "kit",
+      data: {
+        edge,
+        tone: edge.status ?? "neutral",
+        loopSize: Math.ceil((vertical ? size.width : size.height) / 2 / 0.75) + 24,
+        sourceLabel,
+        targetLabel
+      },
+      hidden: hidden.has(edge.source) || hidden.has(edge.target),
+      selectable: true,
+      focusable: options.edgesFocusable,
+      deletable: editable,
+      ariaLabel,
+      domAttributes: { "aria-roledescription": formatMessage(messages.edge.roleDescription) },
+      ...edge.sourcePort === void 0 ? {} : { sourceHandle: edge.sourcePort },
+      ...edge.targetPort === void 0 ? {} : { targetHandle: edge.targetPort }
+    };
+    edges.push(flowEdge);
+  }
+  return { nodes, edges, order, hidden, index };
+}
+
+// src/react/nodes.tsx
+import { Badge, IconButton } from "@x12i/ui";
+import { Handle, NodeResizer, Position } from "@xyflow/react";
+import { memo as memo2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+
+// src/react/icons.tsx
+import { Icon } from "@x12i/icons";
+import { cssVar } from "@x12i/tokens";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Glyph({ children, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      "data-kit": "diagram-icon",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      style: { strokeWidth: cssVar("icon.strokeWidth") },
+      ...props,
+      children
+    }
+  );
+}
+var PATHS = {
+  undo: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M9 14 4 9l5-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" })
+  ] }),
+  redo: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "m15 14 5-5-5-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13" })
+  ] }),
+  fit: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
+    /* @__PURE__ */ jsx2("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
+    /* @__PURE__ */ jsx2("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
+    /* @__PURE__ */ jsx2("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
+  ] }),
+  layout: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "8", height: "8", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M7 11v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ jsx2("rect", { x: "13", y: "13", width: "8", height: "8", rx: "2" })
+  ] }),
+  group: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
+    /* @__PURE__ */ jsx2("rect", { x: "7", y: "7", width: "7", height: "5", rx: "1" }),
+    /* @__PURE__ */ jsx2("rect", { x: "10", y: "12", width: "7", height: "5", rx: "1" })
+  ] }),
+  ungroup: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "5", y: "4", width: "8", height: "6", rx: "1" }),
+    /* @__PURE__ */ jsx2("rect", { x: "11", y: "14", width: "8", height: "6", rx: "1" })
+  ] }),
+  map: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M14.1 5.55a2 2 0 0 0 1.79 0l3.66-1.83A1 1 0 0 1 21 4.62v12.76a1 1 0 0 1-.55.89l-4.55 2.28a2 2 0 0 1-1.79 0l-4.21-2.1a2 2 0 0 0-1.79 0l-3.66 1.83A1 1 0 0 1 3 19.38V6.62a1 1 0 0 1 .55-.9l4.55-2.27a2 2 0 0 1 1.79 0z" }),
+    /* @__PURE__ */ jsx2("path", { d: "M15 5.76v15" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9 3.24v15" })
+  ] }),
+  grid: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M3 9h18" }),
+    /* @__PURE__ */ jsx2("path", { d: "M3 15h18" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9 3v18" }),
+    /* @__PURE__ */ jsx2("path", { d: "M15 3v18" })
+  ] }),
+  download: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx2("path", { d: "m7 10 5 5 5-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 15V3" })
+  ] })
+};
+function ToolIcon({ name, ...props }) {
+  switch (name) {
+    case "plus":
+    case "minus":
+    case "trash":
+    case "copy":
+    case "chevron-down":
+    case "chevron-right":
+      return /* @__PURE__ */ jsx2(Icon, { name, size: 16, "data-kit": "diagram-icon" });
+    default:
+      return /* @__PURE__ */ jsx2(Glyph, { ...props, children: PATHS[name] });
+  }
+}
+var KIND_PATHS = {
+  start: /* @__PURE__ */ jsx2("rect", { x: "3", y: "8", width: "18", height: "8", rx: "4" }),
+  end: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "8", width: "18", height: "8", rx: "4" }),
+    /* @__PURE__ */ jsx2("rect", { x: "7", y: "11", width: "10", height: "2", rx: "1" })
+  ] }),
+  task: /* @__PURE__ */ jsx2("rect", { x: "3", y: "7", width: "18", height: "10", rx: "2" }),
+  decision: /* @__PURE__ */ jsx2("path", { d: "M12 3 21 12 12 21 3 12z" }),
+  group: /* @__PURE__ */ jsx2("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2", strokeDasharray: "3 3" }),
+  subflow: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx2("rect", { x: "7", y: "10", width: "10", height: "6", rx: "1" })
+  ] }),
+  note: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M5 4h10l4 4v12H5z" }),
+    /* @__PURE__ */ jsx2("path", { d: "M15 4v4h4" })
+  ] }),
+  image: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "m3 16 5-5 4 4 3-3 6 6" })
+  ] }),
+  entity: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M3 9h18" }),
+    /* @__PURE__ */ jsx2("path", { d: "M8 13h8" }),
+    /* @__PURE__ */ jsx2("path", { d: "M8 16.5h5" })
+  ] }),
+  code: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "m8 8-4 4 4 4" }),
+    /* @__PURE__ */ jsx2("path", { d: "m16 8 4 4-4 4" }),
+    /* @__PURE__ */ jsx2("path", { d: "m14 5-4 14" })
+  ] }),
+  chart: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M4 20V4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M4 20h16" }),
+    /* @__PURE__ */ jsx2("path", { d: "M8 16v-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 16V7" }),
+    /* @__PURE__ */ jsx2("path", { d: "M16 16v-3" })
+  ] }),
+  agent: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "8", r: "4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M4 21a8 8 0 0 1 16 0" })
+  ] })
+};
+function KindIcon({ kind, ...props }) {
+  return /* @__PURE__ */ jsx2(Glyph, { ...props, children: KIND_PATHS[kind] });
+}
+
+// src/react/nodes.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SIDE = {
+  top: Position.Top,
+  right: Position.Right,
+  bottom: Position.Bottom,
+  left: Position.Left
+};
+var RESIZABLE = /* @__PURE__ */ new Set(["group", "subflow", "note", "image", "chart", "code", "entity"]);
+var MIN_SIZE = { width: 96, height: 64 };
+var MIN_CONTAINER_SIZE = { width: 160, height: 96 };
+function isComposing(event) {
+  return event.nativeEvent.isComposing || event.keyCode === 229;
+}
+function LabelEditor({ node, multiline }) {
+  const { messages, commitEditing, cancelEditing } = useCanvasContext();
+  const [draft, setDraft] = useState2(node.label);
+  const finished = useRef2(false);
+  const field = useRef2(null);
+  useEffect2(() => {
+    field.current?.focus();
+    field.current?.select();
+  }, []);
+  const finish = (keep) => {
+    if (finished.current) return;
+    finished.current = true;
+    if (keep) commitEditing(draft);
+    else cancelEditing();
+  };
+  const props = {
+    ref: field,
+    value: draft,
+    dir: "auto",
+    className: "nodrag nopan nowheel",
+    "data-slot": "editor",
+    "aria-label": formatMessage(messages.node.editLabel, {
+      label: node.label !== "" ? node.label : formatMessage(messages.kinds[node.kind])
+    }),
+    onChange: (event) => setDraft(event.target.value),
+    onBlur: () => finish(true),
+    onKeyDown: (event) => {
+      event.stopPropagation();
+      if (isComposing(event)) return;
+      if (event.key === "Enter" && !(multiline && event.shiftKey)) {
+        event.preventDefault();
+        finish(true);
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        finish(false);
+      }
+    },
+    onPointerDown: (event) => event.stopPropagation(),
+    onDoubleClick: (event) => event.stopPropagation()
+  };
+  return multiline ? /* @__PURE__ */ jsx3("textarea", { rows: 2, ...props }) : /* @__PURE__ */ jsx3("input", { type: "text", ...props });
+}
+function fieldsOf(node) {
+  const raw = node.data?.fields;
+  if (!Array.isArray(raw)) return [];
+  return raw.map((field) => {
+    if (typeof field === "string") return { name: field };
+    if (typeof field === "object" && field !== null) {
+      const record = field;
+      const result = { name: String(record.name ?? "") };
+      if (typeof record.type === "string" && record.type !== "") result.type = record.type;
+      if (record.key === true) result.key = true;
+      return result;
+    }
+    return { name: String(field) };
+  });
+}
+function numbersOf(node) {
+  const raw = node.data?.values;
+  if (!Array.isArray(raw)) return [];
+  return raw.filter((value) => typeof value === "number" && Number.isFinite(value)).slice(0, 12);
+}
+function stringOf(node, key) {
+  const value = node.data?.[key];
+  return typeof value === "string" && value !== "" ? value : void 0;
+}
+function ChartBars({ values }) {
+  const shown = values.length > 0 ? values : [4, 7, 5.5, 9];
+  const max = Math.max(...shown, 1);
+  const width = 100 / shown.length;
+  return /* @__PURE__ */ jsx3("svg", { "data-slot": "chart", viewBox: "0 0 100 60", preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", children: shown.map((value, i) => {
+    const height = Math.max(2, Math.max(0, value) / max * 56);
+    return /* @__PURE__ */ jsx3("rect", { x: i * width + width * 0.15, y: 60 - height, width: width * 0.7, height }, i);
+  }) });
+}
+function DefaultBody({ node, label, childCount }) {
+  const { messages, editable, toggleCollapsed } = useCanvasContext();
+  switch (node.kind) {
+    case "decision":
+      return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+        /* @__PURE__ */ jsx3("svg", { "data-slot": "shape", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx3("polygon", { points: "50,0 100,50 50,100 0,50", vectorEffect: "non-scaling-stroke" }) }),
+        /* @__PURE__ */ jsx3("div", { "data-slot": "content", children: label })
+      ] });
+    case "group":
+    case "subflow": {
+      const collapsed = node.collapsed === true;
+      const name = node.label !== "" ? node.label : formatMessage(messages.kinds[node.kind]);
+      return /* @__PURE__ */ jsxs3("div", { "data-slot": "header", children: [
+        /* @__PURE__ */ jsx3(
+          IconButton,
+          {
+            label: formatMessage(collapsed ? messages.node.expand : messages.node.collapse, { label: name }),
+            variant: "ghost",
+            tone: "neutral",
+            size: "xs",
+            className: "nodrag nopan",
+            "aria-expanded": !collapsed,
+            onClick: (event) => {
+              event.stopPropagation();
+              toggleCollapsed(node.id);
+            },
+            onDoubleClick: (event) => event.stopPropagation(),
+            children: /* @__PURE__ */ jsx3("span", { "data-mirror": "", children: /* @__PURE__ */ jsx3(ToolIcon, { name: collapsed ? "chevron-right" : "chevron-down" }) })
+          }
+        ),
+        label,
+        collapsed ? /* @__PURE__ */ jsx3("span", { "data-slot": "count", children: formatMessage(messages.node.childCount, { count: childCount }) }) : null
+      ] });
+    }
+    case "entity": {
+      const fields = fieldsOf(node);
+      return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+        /* @__PURE__ */ jsx3("div", { "data-slot": "header", children: label }),
+        /* @__PURE__ */ jsx3("ul", { "data-slot": "fields", children: fields.map((field, i) => /* @__PURE__ */ jsxs3("li", { "data-key": field.key ? "" : void 0, children: [
+          /* @__PURE__ */ jsx3("span", { dir: "auto", children: field.name }),
+          field.type === void 0 ? null : /* @__PURE__ */ jsx3("span", { "data-slot": "type", children: field.type })
+        ] }, i)) })
+      ] });
+    }
+    case "code": {
+      const code = stringOf(node, "code") ?? "";
+      const language = stringOf(node, "language");
+      return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+        /* @__PURE__ */ jsxs3("div", { "data-slot": "header", children: [
+          label,
+          language === void 0 ? null : /* @__PURE__ */ jsx3("span", { "data-slot": "type", children: language })
+        ] }),
+        /* @__PURE__ */ jsx3("pre", { dir: "ltr", "data-slot": "code", children: /* @__PURE__ */ jsx3("code", { children: code.split(/\r?\n/).slice(0, 12).join("\n") }) })
+      ] });
+    }
+    case "image": {
+      const src = node.data?.src;
+      const alt = stringOf(node, "alt") ?? "";
+      return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+        /* @__PURE__ */ jsx3("div", { "data-slot": "media", children: isSafeImageUrl(src) ? /* @__PURE__ */ jsx3("img", { src, alt, loading: "lazy", decoding: "async", draggable: false, referrerPolicy: "no-referrer" }) : /* @__PURE__ */ jsx3(KindIcon, { kind: "image" }) }),
+        /* @__PURE__ */ jsx3("div", { "data-slot": "caption", children: label })
+      ] });
+    }
+    case "chart":
+      return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+        /* @__PURE__ */ jsx3(ChartBars, { values: numbersOf(node) }),
+        /* @__PURE__ */ jsx3("div", { "data-slot": "caption", children: label })
+      ] });
+    case "agent": {
+      const role = stringOf(node, "role");
+      const initial = Array.from(node.label.trim())[0]?.toUpperCase() ?? "";
+      return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+        /* @__PURE__ */ jsx3("span", { "data-slot": "avatar", "aria-hidden": "true", children: initial }),
+        /* @__PURE__ */ jsxs3("div", { "data-slot": "content", children: [
+          label,
+          role === void 0 ? null : /* @__PURE__ */ jsx3("span", { "data-slot": "role", dir: "auto", children: role })
+        ] })
+      ] });
+    }
+    default:
+      return /* @__PURE__ */ jsx3("div", { "data-slot": "content", "data-editable": editable ? "" : void 0, children: label });
+  }
+}
+function KitNodeComponent({ id, data, selected }) {
+  const ctx = useCanvasContext();
+  const { node, ports, childCount } = data;
+  const { messages } = ctx;
+  const editing = ctx.editing?.kind === "node" && ctx.editing.id === id;
+  const interactive = ctx.editable && node.locked !== true;
+  const kindName = formatMessage(messages.kinds[node.kind]);
+  const collapsed = node.collapsed === true && isContainerKind(node.kind);
+  const label = editing ? /* @__PURE__ */ jsx3(LabelEditor, { node, multiline: node.kind === "note" }) : /* @__PURE__ */ jsx3("span", { "data-slot": "label", dir: "auto", children: node.label !== "" ? node.label : /* @__PURE__ */ jsx3("span", { "data-placeholder": "", children: kindName }) });
+  const defaultBody = /* @__PURE__ */ jsx3(DefaultBody, { node, label, childCount });
+  const custom = ctx.renderers[node.kind]?.({
+    node,
+    selected,
+    editing,
+    rtl: ctx.rtl,
+    direction: ctx.direction,
+    messages,
+    label,
+    defaultBody
+  });
+  const body = custom === void 0 ? defaultBody : custom;
+  const minimum = isContainerKind(node.kind) ? MIN_CONTAINER_SIZE : MIN_SIZE;
+  const status = node.status !== void 0 && node.status !== "neutral" ? node.status : void 0;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-kit": "diagram-node",
+      "data-kind": node.kind,
+      "data-status": status,
+      "data-selected": selected ? "" : void 0,
+      "data-editing": editing ? "" : void 0,
+      "data-locked": node.locked ? "" : void 0,
+      "data-collapsed": collapsed ? "" : void 0,
+      "data-connecting": ctx.connectingFrom === id ? "" : void 0,
+      dir: ctx.rtl ? "rtl" : "ltr",
+      children: [
+        RESIZABLE.has(node.kind) ? /* @__PURE__ */ jsx3(
+          NodeResizer,
+          {
+            isVisible: selected && interactive && !collapsed,
+            minWidth: minimum.width,
+            minHeight: minimum.height,
+            onResizeEnd: (_event, params) => ctx.commitResize(id, params)
+          }
+        ) : null,
+        ports.map((port) => {
+          const horizontal = port.side === "left" || port.side === "right";
+          const offset = `${Math.round(port.offset * 1e4) / 100}%`;
+          return /* @__PURE__ */ jsx3(
+            Handle,
+            {
+              id: port.id ?? null,
+              type: port.direction === "in" ? "target" : "source",
+              position: SIDE[port.side],
+              isConnectable: interactive,
+              "data-kit": "diagram-handle",
+              "data-port-type": port.type,
+              style: horizontal ? { top: offset } : { left: offset }
+            },
+            `${port.direction}:${port.id ?? ""}`
+          );
+        }),
+        body,
+        status === void 0 ? null : /* @__PURE__ */ jsx3(Badge, { tone: status, size: "sm", "data-slot": "status", children: formatMessage(messages.statuses[status]) })
+      ]
+    }
+  );
+}
+var KitNode = memo2(KitNodeComponent);
+
+// src/react/outline.tsx
+import { createElement, useId, useMemo } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function focusDiagramNode(canvasId, nodeId) {
+  const root = typeof document === "undefined" ? null : document.getElementById(canvasId);
+  const element = root ? Array.from(root.querySelectorAll(".react-flow__node")).find((candidate) => candidate.dataset.id === nodeId) : void 0;
+  if (!element) return false;
+  element.focus();
+  return true;
+}
+function DiagramOutline({
+  document: doc,
+  messages: messagesOverride,
+  direction,
+  rtl = false,
+  canvasId,
+  canvas,
+  onNavigate,
+  onDisconnect,
+  headingLevel = 3,
+  reveal = "always",
+  showPaths = true,
+  className,
+  ...props
+}) {
+  const messages = useMemo(() => resolveMessages(messagesOverride), [messagesOverride]);
+  const headingId = useId();
+  const tree = useMemo(
+    () => diagramToOutlineTree(doc, { rtl, ...direction === void 0 ? {} : { direction } }),
+    [doc, direction, rtl]
+  );
+  const paths = useMemo(
+    () => showPaths ? diagramToOutline(doc, { connector: formatMessage(messages.outline.connector), maxPaths: 50 }) : [],
+    [doc, messages, showPaths]
+  );
+  const navigable = canvasId !== void 0 || canvas !== void 0 || onNavigate !== void 0;
+  const kindName = (item) => formatMessage(messages.kinds[item.kind]);
+  const go = (nodeId) => {
+    onNavigate?.(nodeId);
+    if (canvas?.current) canvas.current.focusNode(nodeId);
+    else if (canvasId !== void 0) focusDiagramNode(canvasId, nodeId);
+  };
+  const link = (nodeId, text) => navigable ? /* @__PURE__ */ jsx4("button", { type: "button", "data-slot": "link", "aria-label": formatMessage(messages.outline.goToNode, { label: text }), onClick: () => go(nodeId), children: /* @__PURE__ */ jsx4("span", { dir: "auto", children: text }) }) : /* @__PURE__ */ jsx4("span", { dir: "auto", children: text });
+  const renderItem = (item) => {
+    const labelText = item.label !== "" ? item.label : kindName(item);
+    const meta = [kindName(item)];
+    if (item.status !== void 0 && item.status !== "neutral") {
+      meta.push(formatMessage(messages.outline.status, { status: formatMessage(messages.statuses[item.status]) }));
+    }
+    const connections = [
+      ...item.outgoing.map((connection) => ({ connection, kind: "out" })),
+      ...item.incoming.map((connection) => ({ connection, kind: "in" }))
+    ];
+    return /* @__PURE__ */ jsxs4("li", { "data-kind": item.kind, "data-status": item.status === void 0 || item.status === "neutral" ? void 0 : item.status, children: [
+      /* @__PURE__ */ jsxs4("div", { "data-slot": "item", children: [
+        link(item.id, labelText),
+        /* @__PURE__ */ jsx4("span", { "data-slot": "meta", children: meta.join(". ") })
+      ] }),
+      item.description ? /* @__PURE__ */ jsx4("p", { "data-slot": "description", dir: "auto", children: item.description }) : null,
+      connections.length === 0 ? /* @__PURE__ */ jsx4("p", { "data-slot": "none", children: formatMessage(messages.outline.noConnections) }) : /* @__PURE__ */ jsx4("ul", { "data-slot": "connections", children: connections.map(({ connection, kind }) => {
+        const source = kind === "out" ? labelText : connection.label;
+        const target = kind === "out" ? connection.label : labelText;
+        return /* @__PURE__ */ jsxs4("li", { "data-direction": kind, children: [
+          /* @__PURE__ */ jsx4("span", { "data-slot": "relation", children: formatMessage(kind === "out" ? messages.outline.connectsTo : messages.outline.receivesFrom) }),
+          " ",
+          link(connection.nodeId, connection.label),
+          connection.edgeLabel === void 0 ? null : /* @__PURE__ */ jsxs4("span", { "data-slot": "edge-label", dir: "auto", children: [
+            " ",
+            "(",
+            connection.edgeLabel,
+            ")"
+          ] }),
+          onDisconnect && kind === "out" ? /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              "data-slot": "disconnect",
+              "aria-label": formatMessage(messages.outline.disconnect, { source, target }),
+              onClick: () => onDisconnect(connection.edgeId),
+              children: /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: "\xD7" })
+            }
+          ) : null
+        ] }, `${kind}:${connection.edgeId}`);
+      }) }),
+      item.children.length > 0 ? /* @__PURE__ */ jsxs4("div", { "data-slot": "children", children: [
+        /* @__PURE__ */ jsx4("p", { "data-slot": "contains", children: formatMessage(messages.outline.contains, { label: labelText }) }),
+        /* @__PURE__ */ jsx4("ul", { children: item.children.map(renderItem) })
+      ] }) : null
+    ] }, item.id);
+  };
+  return /* @__PURE__ */ jsxs4(
+    "section",
+    {
+      "data-kit": "diagram-outline",
+      "data-reveal": reveal,
+      "aria-labelledby": headingId,
+      dir: rtl ? "rtl" : void 0,
+      className,
+      ...props,
+      children: [
+        createElement(`h${headingLevel}`, { id: headingId, "data-slot": "title" }, formatMessage(messages.outline.title)),
+        doc.description ? /* @__PURE__ */ jsx4("p", { "data-slot": "summary", dir: "auto", children: doc.description }) : null,
+        tree.length === 0 ? /* @__PURE__ */ jsx4("p", { "data-slot": "empty", children: formatMessage(messages.outline.empty) }) : /* @__PURE__ */ jsx4("ul", { "data-slot": "nodes", "aria-label": formatMessage(messages.outline.nodes), children: tree.map(renderItem) }),
+        paths.length > 0 ? /* @__PURE__ */ jsxs4("div", { "data-slot": "paths", children: [
+          /* @__PURE__ */ jsx4("p", { "data-slot": "paths-title", children: formatMessage(messages.outline.paths) }),
+          /* @__PURE__ */ jsx4("ul", { "aria-label": formatMessage(messages.outline.paths), children: paths.map((path, i) => /* @__PURE__ */ jsx4("li", { dir: "auto", children: path }, i)) })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/react/toolbar.tsx
+import { Button, Divider, IconButton as IconButton2 } from "@x12i/ui";
+import { useId as useId2, useRef as useRef3 } from "react";
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var PALETTE_DRAG_TYPE = "application/x-kit-diagram-node";
+function Tool({
+  icon,
+  label,
+  onClick,
+  disabled,
+  pressed,
+  expanded,
+  controls
+}) {
+  return /* @__PURE__ */ jsx5(
+    IconButton2,
+    {
+      label,
+      variant: "ghost",
+      tone: "neutral",
+      size: "sm",
+      disabled: disabled ?? false,
+      "aria-pressed": pressed,
+      "aria-expanded": expanded,
+      "aria-controls": controls,
+      onClick,
+      children: /* @__PURE__ */ jsx5(ToolIcon, { name: icon })
+    }
+  );
+}
+function DiagramToolbar({ messages, editable, sections, palette, state, actions, rtl, paletteOpen, onPaletteOpenChange }) {
+  const t = (message) => formatMessage(message);
+  const root = useRef3(null);
+  const paletteId = useId2();
+  const showPalette = editable && sections.palette && palette.length > 0;
+  const showHistory = sections.history && editable;
+  const showEdit = editable && sections.edit;
+  const showLayout = editable && sections.layout;
+  const showView = sections.view;
+  const onKeyDown = (event) => {
+    const keys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+    if (!keys.includes(event.key) || event.altKey || event.ctrlKey || event.metaKey) return;
+    const buttons = Array.from(root.current?.querySelectorAll("button:not([disabled]):not([aria-disabled='true'])") ?? []);
+    const current = buttons.indexOf(document.activeElement);
+    if (current === -1 || buttons.length === 0) return;
+    const forward = event.key === "ArrowRight" !== rtl;
+    const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : (current + (forward ? 1 : -1) + buttons.length) % buttons.length;
+    event.preventDefault();
+    buttons[next]?.focus();
+  };
+  const groups = [];
+  if (showPalette) {
+    groups.push({
+      key: "palette",
+      content: /* @__PURE__ */ jsx5(
+        Tool,
+        {
+          icon: "plus",
+          label: t(messages.toolbar.addNode),
+          onClick: () => onPaletteOpenChange(!paletteOpen),
+          expanded: paletteOpen,
+          controls: paletteId
+        }
+      )
+    });
+  }
+  if (showHistory) {
+    groups.push({
+      key: "history",
+      content: /* @__PURE__ */ jsxs5(Fragment4, { children: [
+        /* @__PURE__ */ jsx5(Tool, { icon: "undo", label: t(messages.toolbar.undo), onClick: actions.undo, disabled: !state.canUndo }),
+        /* @__PURE__ */ jsx5(Tool, { icon: "redo", label: t(messages.toolbar.redo), onClick: actions.redo, disabled: !state.canRedo })
+      ] })
+    });
+  }
+  if (showEdit) {
+    groups.push({
+      key: "edit",
+      content: /* @__PURE__ */ jsxs5(Fragment4, { children: [
+        /* @__PURE__ */ jsx5(Tool, { icon: "trash", label: t(messages.toolbar.delete), onClick: actions.deleteSelection, disabled: !state.hasSelection }),
+        /* @__PURE__ */ jsx5(Tool, { icon: "copy", label: t(messages.toolbar.duplicate), onClick: actions.duplicate, disabled: !state.hasSelection }),
+        /* @__PURE__ */ jsx5(Tool, { icon: "group", label: t(messages.toolbar.group), onClick: actions.group, disabled: !state.canGroup }),
+        /* @__PURE__ */ jsx5(Tool, { icon: "ungroup", label: t(messages.toolbar.ungroup), onClick: actions.ungroup, disabled: !state.canUngroup })
+      ] })
+    });
+  }
+  if (showLayout) {
+    groups.push({
+      key: "layout",
+      content: /* @__PURE__ */ jsx5(Tool, { icon: "layout", label: t(messages.toolbar.autoLayout), onClick: actions.layout })
+    });
+  }
+  if (showView) {
+    groups.push({
+      key: "view",
+      content: /* @__PURE__ */ jsxs5(Fragment4, { children: [
+        /* @__PURE__ */ jsx5(Tool, { icon: "minus", label: t(messages.toolbar.zoomOut), onClick: actions.zoomOut }),
+        /* @__PURE__ */ jsx5(Tool, { icon: "plus", label: t(messages.toolbar.zoomIn), onClick: actions.zoomIn }),
+        /* @__PURE__ */ jsx5(Tool, { icon: "fit", label: t(messages.toolbar.fitView), onClick: actions.fitView }),
+        /* @__PURE__ */ jsx5(
+          Tool,
+          {
+            icon: "map",
+            label: t(state.minimap ? messages.toolbar.hideMiniMap : messages.toolbar.showMiniMap),
+            onClick: actions.toggleMiniMap,
+            pressed: state.minimap
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          Tool,
+          {
+            icon: "grid",
+            label: t(state.grid ? messages.toolbar.hideGrid : messages.toolbar.showGrid),
+            onClick: actions.toggleGrid,
+            pressed: state.grid
+          }
+        )
+      ] })
+    });
+  }
+  if (groups.length === 0) return null;
+  const onDragStart = (event, kind) => {
+    event.dataTransfer.setData(PALETTE_DRAG_TYPE, kind);
+    event.dataTransfer.effectAllowed = "copy";
+  };
+  return /* @__PURE__ */ jsxs5("div", { "data-kit": "diagram-toolbar-area", children: [
+    /* @__PURE__ */ jsx5("div", { ref: root, "data-kit": "diagram-toolbar", role: "toolbar", "aria-label": t(messages.toolbar.label), "aria-orientation": "horizontal", onKeyDown, children: groups.map((group, i) => /* @__PURE__ */ jsxs5("div", { "data-slot": "group", role: "presentation", children: [
+      i > 0 ? /* @__PURE__ */ jsx5(Divider, { orientation: "vertical", decorative: true }) : null,
+      group.content
+    ] }, group.key)) }),
+    showPalette && paletteOpen ? /* @__PURE__ */ jsx5("div", { id: paletteId, "data-kit": "diagram-palette", role: "group", "aria-label": t(messages.toolbar.palette), children: palette.map((kind) => /* @__PURE__ */ jsxs5(
+      Button,
+      {
+        variant: "outline",
+        tone: "neutral",
+        size: "sm",
+        draggable: true,
+        onDragStart: (event) => onDragStart(event, kind),
+        onClick: () => actions.addNode(kind),
+        children: [
+          /* @__PURE__ */ jsx5(KindIcon, { kind }),
+          t(messages.kinds[kind])
+        ]
+      },
+      kind
+    )) }) : null
+  ] });
+}
+
+// src/react/use-history.ts
+import { useCallback, useMemo as useMemo2, useReducer } from "react";
+function useDiagramHistory(initial, options = {}) {
+  const limit = options.limit;
+  const [state, dispatch] = useReducer(
+    (current, action) => {
+      const historyOptions = limit === void 0 ? {} : { limit };
+      switch (action.type) {
+        case "update":
+          return historyReducer(
+            current,
+            {
+              type: "set",
+              value: action.update(current.present),
+              ...action.coalesceKey === void 0 ? {} : { coalesceKey: action.coalesceKey }
+            },
+            historyOptions
+          );
+        case "undo":
+          return historyReducer(current, { type: "undo" }, historyOptions);
+        case "redo":
+          return historyReducer(current, { type: "redo" }, historyOptions);
+        case "reset":
+          return historyReducer(current, { type: "reset", value: action.value }, historyOptions);
+        case "clear":
+          return historyReducer(current, { type: "clear" }, historyOptions);
+      }
+    },
+    initial,
+    (value) => createHistory(typeof value === "function" ? value() : value)
+  );
+  const set = useCallback((next, meta) => {
+    dispatch({
+      type: "update",
+      update: typeof next === "function" ? next : () => next,
+      ...meta?.coalesceKey === void 0 ? {} : { coalesceKey: meta.coalesceKey }
+    });
+  }, []);
+  const undo = useCallback(() => dispatch({ type: "undo" }), []);
+  const redo = useCallback(() => dispatch({ type: "redo" }), []);
+  const reset = useCallback((value) => dispatch({ type: "reset", value }), []);
+  const clear = useCallback(() => dispatch({ type: "clear" }), []);
+  return useMemo2(
+    () => ({
+      document: state.present,
+      set,
+      undo,
+      redo,
+      canUndo: state.past.length > 0,
+      canRedo: state.future.length > 0,
+      reset,
+      clear,
+      undoDepth: state.past.length,
+      redoDepth: state.future.length
+    }),
+    [state, set, undo, redo, reset, clear]
+  );
+}
+
+// src/react/canvas.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var NODE_TYPES = { kit: KitNode };
+var EDGE_TYPES = { kit: KitEdge };
+var FIT_OPTIONS = { padding: 0.12, duration: 0 };
+var NUDGE_FALLBACK = GRID_SIZE;
+var PASTE_STEP = 24;
+var NOTICE_MS = 6e3;
+var FOCUS_WATCH_MS = 1500;
+var ANIMATION_MS = 200;
+var ARROWS = { ArrowUp: "up", ArrowDown: "down", ArrowLeft: "left", ArrowRight: "right" };
+var clipboard;
+var NO_SELECTION = { nodes: /* @__PURE__ */ new Set(), edges: /* @__PURE__ */ new Set() };
+var NO_OVERLAY = { positions: {}, sizes: {} };
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function isTextEntry(element) {
+  return element.closest("input, textarea, select, [contenteditable='true'], [contenteditable='']") !== null;
+}
+function round(value) {
+  return Math.round(value * 100) / 100;
+}
+function topLevel(ids, doc) {
+  const parentOf = new Map(doc.nodes.map((node) => [node.id, node.parentId]));
+  const result = [];
+  for (const id of ids) {
+    let parent = parentOf.get(id);
+    let covered = false;
+    for (let steps = 0; parent !== void 0 && steps < doc.nodes.length; steps += 1) {
+      if (ids.has(parent)) {
+        covered = true;
+        break;
+      }
+      parent = parentOf.get(parent);
+    }
+    if (!covered) result.push(id);
+  }
+  return result;
+}
+function DiagramCanvas(props) {
+  return /* @__PURE__ */ jsx6(ReactFlowProvider, { children: /* @__PURE__ */ jsx6(CanvasInner, { ...props }) });
+}
+function CanvasInner({
+  value,
+  defaultValue,
+  onChange,
+  readOnly = false,
+  label,
+  direction = "TB",
+  dir: dirProp,
+  messages: messagesOverride,
+  height,
+  toolbar = true,
+  palette = NODE_KINDS,
+  minimap = false,
+  grid = true,
+  snapToGrid = true,
+  connectionRules,
+  validateConnection,
+  nodeRenderers,
+  history,
+  layoutOptions,
+  onSelectionChange,
+  onNodeActivate,
+  outline = "hidden",
+  edgesFocusable = false,
+  virtualize = false,
+  showAttribution = false,
+  edgeKind,
+  minZoom = 0.1,
+  maxZoom = 2.5,
+  wheelZoom = true,
+  fitOnMount = true,
+  ref,
+  id: idProp,
+  className,
+  style,
+  ...rest
+}) {
+  const rf = useReactFlow();
+  const messages = useMemo3(() => resolveMessages(messagesOverride), [messagesOverride]);
+  const editable = !readOnly;
+  const uid = useId3().replace(/[^a-zA-Z0-9_-]/g, "");
+  const rootId = idProp ?? `kit-diagram-${uid}`;
+  const instructionsId = `${rootId}-instructions`;
+  const hostRef = useRef4(null);
+  const stageRef = useRef4(null);
+  const [pageRtl, setPageRtl] = useState3(false);
+  useLayoutEffect(() => {
+    if (dirProp !== void 0) return;
+    const parent = hostRef.current?.parentElement;
+    if (parent) setPageRtl(getComputedStyle(parent).direction === "rtl");
+  }, [dirProp]);
+  const rtl = dirProp === void 0 ? pageRtl : dirProp === "rtl";
+  const controlled = value !== void 0;
+  const own = useDiagramHistory(() => defaultValue ?? createDiagram());
+  const doc = value ?? own.document;
+  const docRef = useRef4(doc);
+  docRef.current = doc;
+  const latest = useRef4({ onChange, onSelectionChange, onNodeActivate, validateConnection });
+  latest.current = { onChange, onSelectionChange, onNodeActivate, validateConnection };
+  const lastEmitted = useRef4(own.document);
+  const commit = useCallback2(
+    (next, change) => {
+      if (readOnly || next === docRef.current) return;
+      docRef.current = next;
+      if (!controlled) {
+        lastEmitted.current = next;
+        own.set(next, change.coalesceKey === void 0 ? void 0 : { coalesceKey: change.coalesceKey });
+      }
+      latest.current.onChange?.(next, change);
+    },
+    [readOnly, controlled, own]
+  );
+  useEffect3(() => {
+    if (controlled || own.document === lastEmitted.current) return;
+    lastEmitted.current = own.document;
+    latest.current.onChange?.(own.document, { reason: "history" });
+  }, [controlled, own.document]);
+  const historySource = history ?? (controlled ? void 0 : own);
+  const [viewCollapsed, setViewCollapsed] = useState3({});
+  const viewDoc = useMemo3(() => {
+    if (editable || Object.keys(viewCollapsed).length === 0) return doc;
+    return {
+      ...doc,
+      nodes: doc.nodes.map((node) => isContainerKind(node.kind) && node.id in viewCollapsed ? { ...node, collapsed: viewCollapsed[node.id] === true } : node)
+    };
+  }, [doc, editable, viewCollapsed]);
+  const model = useMemo3(
+    () => buildFlowModel(viewDoc, { direction, rtl, editable, messages, edgesFocusable }),
+    [viewDoc, direction, rtl, editable, messages, edgesFocusable]
+  );
+  const visibleIds = useMemo3(() => model.order.filter((id) => !model.hidden.has(id)), [model]);
+  const [selection, setSelection] = useState3(NO_SELECTION);
+  const selectedNodes = useMemo3(
+    () => new Set([...selection.nodes].filter((id) => model.index.nodesById.has(id) && !model.hidden.has(id))),
+    [selection.nodes, model]
+  );
+  const selectedEdges = useMemo3(() => {
+    const live = new Set(viewDoc.edges.filter((edge) => !model.hidden.has(edge.source) && !model.hidden.has(edge.target)).map((edge) => edge.id));
+    return new Set([...selection.edges].filter((id) => live.has(id)));
+  }, [selection.edges, viewDoc.edges, model]);
+  const [overlay, setOverlay] = useState3(NO_OVERLAY);
+  const flowNodes = useMemo3(
+    () => model.nodes.map((node) => {
+      const selected = selectedNodes.has(node.id);
+      const position = overlay.positions[node.id];
+      const size = overlay.sizes[node.id];
+      if (!selected && position === void 0 && size === void 0) return node;
+      return {
+        ...node,
+        selected,
+        ...position === void 0 ? {} : { position },
+        ...size === void 0 ? {} : { width: size.width, height: size.height }
+      };
+    }),
+    [model.nodes, selectedNodes, overlay]
+  );
+  const flowEdges = useMemo3(
+    () => model.edges.map((edge) => selectedEdges.has(edge.id) ? { ...edge, selected: true } : edge),
+    [model.edges, selectedEdges]
+  );
+  const labelOfNode = useCallback2(
+    (id) => {
+      const node = model.index.nodesById.get(id);
+      return node ? displayLabel(node, messages) : id;
+    },
+    [model, messages]
+  );
+  const [announcement, setAnnouncement] = useState3({ text: "", n: 0 });
+  const announce = useCallback2((text) => setAnnouncement((previous) => ({ text, n: previous.n + 1 })), []);
+  const [notice, setNotice] = useState3(void 0);
+  const noticeTimer = useRef4(void 0);
+  const showNotice = useCallback2((text) => {
+    setNotice((previous) => ({ text, n: (previous?.n ?? 0) + 1 }));
+    clearTimeout(noticeTimer.current);
+    noticeTimer.current = setTimeout(() => setNotice(void 0), NOTICE_MS);
+  }, []);
+  useEffect3(() => () => clearTimeout(noticeTimer.current), []);
+  const [showMiniMap, setShowMiniMap] = useState3(minimap);
+  const [showGrid, setShowGrid] = useState3(grid);
+  const [paletteOpen, setPaletteOpen] = useState3(false);
+  const snap = snapToGrid === false ? 0 : snapToGrid === true ? GRID_SIZE : snapToGrid;
+  const findElement = useCallback2((selector, id) => {
+    const root = hostRef.current;
+    if (!root) return void 0;
+    return Array.from(root.querySelectorAll(selector)).find((element) => element.dataset.id === id);
+  }, []);
+  const focusNodeElement = useCallback2(
+    (id) => {
+      const element = findElement(".react-flow__node", id);
+      if (!element) return false;
+      element.focus();
+      return true;
+    },
+    [findElement]
+  );
+  const focusWatch = useRef4(void 0);
+  const stopFocusWatch = useCallback2(() => {
+    const watch = focusWatch.current;
+    if (!watch) return;
+    watch.observer.disconnect();
+    clearTimeout(watch.timer);
+    focusWatch.current = void 0;
+  }, []);
+  const requestFocus = useCallback2(
+    (id) => {
+      stopFocusWatch();
+      if (id === void 0) {
+        hostRef.current?.focus();
+        return;
+      }
+      if (focusNodeElement(id)) return;
+      const host = hostRef.current;
+      if (!host || typeof MutationObserver === "undefined") return;
+      const observer = new MutationObserver(() => {
+        if (focusNodeElement(id)) stopFocusWatch();
+      });
+      observer.observe(host, { childList: true, subtree: true });
+      focusWatch.current = { observer, timer: setTimeout(stopFocusWatch, FOCUS_WATCH_MS) };
+    },
+    [focusNodeElement, stopFocusWatch]
+  );
+  useEffect3(() => stopFocusWatch, [stopFocusWatch]);
+  const afterFrame = useCallback2((run) => {
+    if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
+    else setTimeout(run, 0);
+  }, []);
+  const duration = () => prefersReducedMotion() ? 0 : ANIMATION_MS;
+  const fit = useCallback2(() => void rf.fitView({ padding: FIT_OPTIONS.padding, duration: duration() }), [rf]);
+  const zoomIn = useCallback2(() => void rf.zoomIn({ duration: duration() }), [rf]);
+  const zoomOut = useCallback2(() => void rf.zoomOut({ duration: duration() }), [rf]);
+  const select = useCallback2((nodeIds, edgeIds = []) => {
+    setSelection({ nodes: new Set(nodeIds), edges: new Set(edgeIds) });
+  }, []);
+  const clearSelection = useCallback2(() => setSelection(NO_SELECTION), []);
+  const selectionKey = `${[...selectedNodes].join("|")}#${[...selectedEdges].join("|")}`;
+  const previousSelection = useRef4("#");
+  const silentKey = useRef4(void 0);
+  const selectQuietly = useCallback2((nodeIds, edgeIds = []) => {
+    const key = `${[...new Set(nodeIds)].join("|")}#${[...new Set(edgeIds)].join("|")}`;
+    if (key !== previousSelection.current) silentKey.current = key;
+    select(nodeIds, edgeIds);
+  }, [select]);
+  const clearSelectionQuietly = useCallback2(() => {
+    if (previousSelection.current !== "#") silentKey.current = "#";
+    clearSelection();
+  }, [clearSelection]);
+  useEffect3(() => {
+    if (selectionKey === previousSelection.current) return;
+    const hadAny = previousSelection.current !== "#";
+    previousSelection.current = selectionKey;
+    latest.current.onSelectionChange?.({ nodeIds: [...selectedNodes], edgeIds: [...selectedEdges] });
+    const quiet = silentKey.current === selectionKey;
+    silentKey.current = void 0;
+    if (quiet) return;
+    const count = selectedNodes.size + selectedEdges.size;
+    if (count === 1) {
+      const [nodeId] = [...selectedNodes];
+      const [edgeId] = [...selectedEdges];
+      let name = "";
+      if (nodeId !== void 0) name = labelOfNode(nodeId);
+      else if (edgeId !== void 0) {
+        const edge = viewDoc.edges.find((candidate) => candidate.id === edgeId);
+        name = edge ? formatMessage(messages.edge.label, { source: labelOfNode(edge.source), target: labelOfNode(edge.target) }) : edgeId;
+      }
+      announce(formatMessage(messages.announce.selected, { label: name }));
+    } else if (count > 1) {
+      announce(formatMessage(messages.announce.selectedMany, { count }));
+    } else if (hadAny) {
+      announce(formatMessage(messages.announce.selectionCleared));
+    }
+  }, [selectionKey]);
+  const [editing, setEditing] = useState3(void 0);
+  const restoreFocus = useRef4(void 0);
+  const startEditing = useCallback2(
+    (target) => {
+      if (!editable) return;
+      if (target.kind === "node" && docRef.current.nodes.find((node) => node.id === target.id)?.locked === true) {
+        announce(formatMessage(messages.announce.locked, { label: labelOfNode(target.id) }));
+        return;
+      }
+      setEditing(target);
+    },
+    [editable, announce, messages, labelOfNode]
+  );
+  const cancelEditing = useCallback2(() => {
+    restoreFocus.current = editing;
+    setEditing(void 0);
+  }, [editing]);
+  const commitEditing = useCallback2(
+    (text) => {
+      const target = editing;
+      if (!target) return;
+      restoreFocus.current = target;
+      setEditing(void 0);
+      const current = docRef.current;
+      if (target.kind === "node") {
+        const node = current.nodes.find((candidate) => candidate.id === target.id);
+        if (!node || node.label === text) return;
+        commit(updateNode(current, target.id, { label: text }), { reason: "rename", nodeIds: [target.id] });
+        announce(formatMessage(messages.announce.renamed, { label: text !== "" ? text : formatMessage(messages.kinds[node.kind]) }));
+      } else {
+        const edge = current.edges.find((candidate) => candidate.id === target.id);
+        if (!edge || (edge.label ?? "") === text) return;
+        commit(updateEdge(current, target.id, { label: text === "" ? void 0 : text }), { reason: "rename-edge", edgeIds: [target.id] });
+        announce(formatMessage(messages.announce.renamed, { label: text }));
+      }
+    },
+    [editing, commit, announce, messages]
+  );
+  useEffect3(() => {
+    if (editing !== void 0 || restoreFocus.current === void 0) return;
+    const target = restoreFocus.current;
+    restoreFocus.current = void 0;
+    const active = typeof document === "undefined" ? null : document.activeElement;
+    if (active !== null && active !== document.body) return;
+    if (target.kind === "node") focusNodeElement(target.id);
+    else (findElement(".react-flow__edge", target.id) ?? hostRef.current)?.focus();
+  }, [editing, focusNodeElement, findElement]);
+  const [connectingFrom, setConnectingFrom] = useState3(void 0);
+  const checkProposed = useCallback2(
+    (connection) => {
+      const current = docRef.current;
+      const result = checkConnection(current, connection, connectionRules, model.index);
+      if (!result.ok) return { ok: false, text: formatMessage(messages.connection[result.code]) };
+      const custom = latest.current.validateConnection?.(connection, current);
+      if (custom === void 0 || custom === true) return { ok: true };
+      return { ok: false, text: custom === false ? formatMessage(messages.connection.custom) : custom };
+    },
+    [connectionRules, model.index, messages]
+  );
+  const toConnection = (connection) => ({
+    source: connection.source,
+    target: connection.target,
+    ...connection.sourceHandle ? { sourcePort: connection.sourceHandle } : {},
+    ...connection.targetHandle ? { targetPort: connection.targetHandle } : {}
+  });
+  const tryConnect = useCallback2(
+    (proposed) => {
+      const check = checkProposed(proposed);
+      if (!check.ok) {
+        showNotice(check.text);
+        return false;
+      }
+      const current = docRef.current;
+      const id = nextEdgeId(current);
+      commit(connect(current, { ...proposed, id }, { validate: false }), { reason: "connect", edgeIds: [id], nodeIds: [proposed.source, proposed.target] });
+      announce(formatMessage(messages.announce.connected, { source: labelOfNode(proposed.source), target: labelOfNode(proposed.target) }));
+      return true;
+    },
+    [checkProposed, commit, showNotice, announce, messages, labelOfNode]
+  );
+  const addNodeAt = useCallback2(
+    (kind, center, init = {}) => {
+      if (!editable) return void 0;
+      const current = docRef.current;
+      const index = model.index;
+      let parentId = init.parentId;
+      if (parentId === void 0) {
+        const bounds = getAbsoluteBounds(current, index);
+        let best;
+        for (const node of current.nodes) {
+          if (!isContainerKind(node.kind) || node.collapsed === true || model.hidden.has(node.id)) continue;
+          const box = bounds.get(node.id);
+          if (!box || center.x < box.x || center.y < box.y || center.x > box.x + box.width || center.y > box.y + box.height) continue;
+          const area = box.width * box.height;
+          if (!best || area < best.area) best = { id: node.id, area };
+        }
+        parentId = best?.id;
+      }
+      const size = getNodeSize({ id: "", kind, label: "", position: { x: 0, y: 0 } });
+      let at = { x: center.x - size.width / 2, y: center.y - size.height / 2 };
+      if (parentId !== void 0) {
+        const origin = getAbsoluteBounds(current, index).get(parentId);
+        if (origin) at = { x: at.x - origin.x, y: at.y - origin.y };
+      }
+      if (snap > 0) at = snapPoint(at, snap);
+      const siblings = current.nodes.filter((node) => node.parentId === parentId);
+      while (siblings.some((node) => node.position.x === at.x && node.position.y === at.y)) at = { x: at.x + PASTE_STEP, y: at.y + PASTE_STEP };
+      const id = init.id ?? nextNodeId(current, kind);
+      const next = addNode(current, { ...init, kind, id, position: init.position ?? at, ...parentId === void 0 ? {} : { parentId } });
+      commit(next, { reason: "add-node", nodeIds: [id] });
+      selectQuietly([id]);
+      announce(formatMessage(messages.announce.nodeAdded, { kind: formatMessage(messages.kinds[kind]), label: init.label ?? formatMessage(messages.kinds[kind]) }));
+      return id;
+    },
+    [editable, model, snap, commit, selectQuietly, announce, messages]
+  );
+  const viewCenter = useCallback2(() => {
+    const box = stageRef.current?.getBoundingClientRect();
+    const point = rf.screenToFlowPosition({ x: (box?.left ?? 0) + (box?.width ?? 0) / 2, y: (box?.top ?? 0) + (box?.height ?? 0) / 2 });
+    return Number.isFinite(point.x) && Number.isFinite(point.y) ? point : { x: 0, y: 0 };
+  }, [rf]);
+  const addFromPalette = useCallback2(
+    (kind) => {
+      const id = addNodeAt(kind, viewCenter());
+      setPaletteOpen(false);
+      if (id !== void 0) startEditing({ kind: "node", id });
+    },
+    [addNodeAt, viewCenter, startEditing]
+  );
+  const editableSelection = useCallback2(() => {
+    const current = docRef.current;
+    return topLevel(selectedNodes, current).filter((id) => current.nodes.find((node) => node.id === id)?.locked !== true);
+  }, [selectedNodes]);
+  const deleteTargets = useCallback2(
+    (nodeIds, edgeIds) => {
+      if (!editable) return;
+      const current = docRef.current;
+      const removable = nodeIds.filter((id) => current.nodes.find((node) => node.id === id)?.locked !== true);
+      if (removable.length === 0 && edgeIds.length === 0) {
+        const lockedId = nodeIds[0];
+        if (lockedId !== void 0) announce(formatMessage(messages.announce.locked, { label: labelOfNode(lockedId) }));
+        return;
+      }
+      const gone = new Set(removable);
+      const first = removable[0];
+      let successor;
+      if (first !== void 0) {
+        const at = visibleIds.indexOf(first);
+        successor = visibleIds.slice(at + 1).find((id) => !gone.has(id)) ?? visibleIds.slice(0, Math.max(at, 0)).reverse().find((id) => !gone.has(id));
+      }
+      let next = removeEdges(current, edgeIds);
+      next = removeNodes(next, removable, { children: "release" });
+      commit(next, { reason: "delete", nodeIds: removable, edgeIds: [...edgeIds] });
+      clearSelectionQuietly();
+      const count = removable.length + edgeIds.length;
+      announce(
+        removable.length === 1 && edgeIds.length === 0 && first !== void 0 ? formatMessage(messages.announce.nodeRemoved, { label: labelOfNode(first) }) : formatMessage(messages.announce.itemsRemoved, { count })
+      );
+      requestFocus(successor);
+    },
+    [editable, commit, clearSelectionQuietly, announce, messages, labelOfNode, visibleIds, requestFocus]
+  );
+  const deleteSelection = useCallback2(() => deleteTargets([...selectedNodes], [...selectedEdges]), [deleteTargets, selectedNodes, selectedEdges]);
+  const duplicate = useCallback2(() => {
+    if (!editable) return;
+    const ids = topLevel(selectedNodes, docRef.current);
+    if (ids.length === 0) return;
+    const result = duplicateNodes(docRef.current, ids, { offset: { x: PASTE_STEP, y: PASTE_STEP } });
+    commit(result.document, { reason: "duplicate", nodeIds: result.nodeIds, edgeIds: result.edgeIds });
+    selectQuietly(result.rootIds);
+    announce(formatMessage(messages.announce.duplicated, { count: result.nodeIds.length }));
+  }, [editable, selectedNodes, commit, selectQuietly, announce, messages]);
+  const pasteCount = useRef4(0);
+  const copy = useCallback2(() => {
+    const ids = topLevel(selectedNodes, docRef.current);
+    if (ids.length === 0) return;
+    clipboard = extractFragment(docRef.current, ids);
+    pasteCount.current = 0;
+    announce(formatMessage(messages.announce.copied, { count: clipboard.nodes.length }));
+  }, [selectedNodes, announce, messages]);
+  const paste = useCallback2(() => {
+    if (!editable || clipboard === void 0) return;
+    pasteCount.current += 1;
+    const step = PASTE_STEP * pasteCount.current;
+    const result = pasteFragment(docRef.current, clipboard, { offset: { x: step, y: step } });
+    commit(result.document, { reason: "paste", nodeIds: result.nodeIds, edgeIds: result.edgeIds });
+    selectQuietly(result.rootIds);
+    announce(formatMessage(messages.announce.pasted, { count: result.nodeIds.length }));
+  }, [editable, commit, selectQuietly, announce, messages]);
+  const cut = useCallback2(() => {
+    if (!editable) return;
+    copy();
+    deleteSelection();
+  }, [editable, copy, deleteSelection]);
+  const selectAll = useCallback2(() => {
+    selectQuietly(visibleIds);
+    announce(formatMessage(messages.announce.selectedMany, { count: visibleIds.length }));
+  }, [selectQuietly, visibleIds, announce, messages]);
+  const canGroup = useMemo3(() => {
+    if (!editable || selectedNodes.size === 0) return false;
+    const nodes = [...selectedNodes].map((id) => model.index.nodesById.get(id));
+    if (nodes.some((node) => node === void 0 || node.locked === true)) return false;
+    const members = topLevel(selectedNodes, viewDoc);
+    return new Set(members.map((id) => model.index.nodesById.get(id)?.parentId)).size === 1;
+  }, [editable, selectedNodes, model, viewDoc]);
+  const ungroupable = useMemo3(
+    () => editable ? [...selectedNodes].filter((id) => {
+      const node = model.index.nodesById.get(id);
+      return node !== void 0 && isContainerKind(node.kind) && node.locked !== true;
+    }) : [],
+    [editable, selectedNodes, model]
+  );
+  const group = useCallback2(() => {
+    if (!canGroup) return;
+    const current = docRef.current;
+    const members = topLevel(selectedNodes, current);
+    const id = nextNodeId(current, "group");
+    try {
+      commit(groupNodes(current, members, { id }), { reason: "group", nodeIds: [id, ...members] });
+    } catch (error) {
+      if (error instanceof DiagramMutationError) return;
+      throw error;
+    }
+    selectQuietly([id]);
+    announce(formatMessage(messages.announce.grouped, { label: formatMessage(messages.kinds.group) }));
+    startEditing({ kind: "node", id });
+  }, [canGroup, selectedNodes, commit, selectQuietly, announce, messages, startEditing]);
+  const ungroup = useCallback2(() => {
+    if (ungroupable.length === 0) return;
+    let next = docRef.current;
+    const released = [];
+    for (const id of ungroupable) {
+      for (const node of next.nodes) if (node.parentId === id) released.push(node.id);
+      next = ungroupNode(next, id);
+    }
+    commit(next, { reason: "ungroup", nodeIds: [...ungroupable, ...released] });
+    selectQuietly(released);
+    announce(formatMessage(messages.announce.ungrouped, { label: ungroupable.map(labelOfNode).join(", ") }));
+  }, [ungroupable, commit, selectQuietly, announce, messages, labelOfNode]);
+  const applyAutoLayout = useCallback2(
+    (options) => {
+      if (!editable) return;
+      const next = layoutedDiagram(docRef.current, { direction, rtl, ...layoutOptions, ...options });
+      commit(next, { reason: "layout" });
+      announce(formatMessage(messages.announce.layoutApplied));
+      afterFrame(fit);
+    },
+    [editable, direction, rtl, layoutOptions, commit, announce, messages, afterFrame, fit]
+  );
+  const align = useCallback2(
+    (alignment) => {
+      if (!editable) return;
+      const ids = editableSelection();
+      commit(alignNodes(docRef.current, ids, alignment), { reason: "align", nodeIds: ids });
+    },
+    [editable, editableSelection, commit]
+  );
+  const distribute = useCallback2(
+    (axis) => {
+      if (!editable) return;
+      const ids = editableSelection();
+      commit(distributeNodes(docRef.current, ids, axis), { reason: "distribute", nodeIds: ids });
+    },
+    [editable, editableSelection, commit]
+  );
+  const nudge = useCallback2(
+    (ids, dx, dy) => {
+      if (!editable) return;
+      const current = docRef.current;
+      const movable = topLevel(new Set(ids), current).filter((id) => current.nodes.find((node) => node.id === id)?.locked !== true);
+      if (movable.length === 0) return;
+      commit(translateNodes(current, movable, dx, dy), { reason: "move", nodeIds: movable, coalesceKey: `nudge:${movable.join(",")}` });
+      const only = movable.length === 1 ? movable[0] : void 0;
+      if (only !== void 0) {
+        const moved = docRef.current.nodes.find((node) => node.id === only);
+        if (moved) announce(formatMessage(messages.announce.moved, { label: labelOfNode(only), x: Math.round(moved.position.x), y: Math.round(moved.position.y) }));
+      }
+    },
+    [editable, commit, announce, messages, labelOfNode]
+  );
+  const undo = useCallback2(() => {
+    if (!historySource?.canUndo) {
+      announce(formatMessage(messages.announce.nothingToUndo));
+      return;
+    }
+    historySource.undo();
+    announce(formatMessage(messages.announce.undone));
+  }, [historySource, announce, messages]);
+  const redo = useCallback2(() => {
+    if (!historySource?.canRedo) {
+      announce(formatMessage(messages.announce.nothingToRedo));
+      return;
+    }
+    historySource.redo();
+    announce(formatMessage(messages.announce.redone));
+  }, [historySource, announce, messages]);
+  const toggleCollapsed = useCallback2(
+    (id) => {
+      const node = model.index.nodesById.get(id);
+      if (!node) return;
+      const collapsed = node.collapsed !== true;
+      if (editable) commit(updateNode(docRef.current, id, { collapsed }), { reason: "collapse", nodeIds: [id] });
+      else setViewCollapsed((previous) => ({ ...previous, [id]: collapsed }));
+    },
+    [model, editable, commit]
+  );
+  const commitResize = useCallback2(
+    (id, box) => {
+      setOverlay((previous) => {
+        if (!(id in previous.positions) && !(id in previous.sizes)) return previous;
+        const positions = { ...previous.positions };
+        const sizes = { ...previous.sizes };
+        delete positions[id];
+        delete sizes[id];
+        return { positions, sizes };
+      });
+      if (!editable) return;
+      const size = { width: Math.round(box.width), height: Math.round(box.height) };
+      commit(resizeNode(docRef.current, id, size, { x: round(box.x), y: round(box.y) }), { reason: "resize", nodeIds: [id] });
+      announce(formatMessage(messages.announce.resized, { label: labelOfNode(id), width: size.width, height: size.height }));
+    },
+    [editable, commit, announce, messages, labelOfNode]
+  );
+  const focusNode = useCallback2(
+    (id) => {
+      const node = model.index.nodesById.get(id);
+      if (!node) return false;
+      const closed = getAncestors(model.index, id).filter((ancestor) => model.index.nodesById.get(ancestor)?.collapsed === true);
+      if (closed.length > 0) {
+        if (editable) {
+          let next = docRef.current;
+          for (const ancestor of closed) next = updateNode(next, ancestor, { collapsed: false });
+          commit(next, { reason: "collapse", nodeIds: closed });
+        } else {
+          setViewCollapsed((previous) => ({ ...previous, ...Object.fromEntries(closed.map((ancestor) => [ancestor, false])) }));
+        }
+      }
+      requestFocus(id);
+      return true;
+    },
+    [model, editable, commit, requestFocus]
+  );
+  const onNodesChange = useCallback2((changes) => {
+    const positions = {};
+    const sizes = {};
+    const toggled = /* @__PURE__ */ new Map();
+    for (const change of changes) {
+      if (change.type === "position" && change.position && change.dragging !== false) positions[change.id] = change.position;
+      else if (change.type === "dimensions" && change.setAttributes && change.dimensions) sizes[change.id] = change.dimensions;
+      else if (change.type === "select") toggled.set(change.id, change.selected);
+    }
+    if (Object.keys(positions).length > 0 || Object.keys(sizes).length > 0) {
+      setOverlay((previous) => ({ positions: { ...previous.positions, ...positions }, sizes: { ...previous.sizes, ...sizes } }));
+    }
+    if (toggled.size > 0) {
+      setSelection((previous) => {
+        const nodes = new Set(previous.nodes);
+        for (const [id, selected] of toggled) {
+          if (selected) nodes.add(id);
+          else nodes.delete(id);
+        }
+        return { nodes, edges: previous.edges };
+      });
+    }
+  }, []);
+  const onEdgesChange = useCallback2((changes) => {
+    const toggled = /* @__PURE__ */ new Map();
+    for (const change of changes) if (change.type === "select") toggled.set(change.id, change.selected);
+    if (toggled.size === 0) return;
+    setSelection((previous) => {
+      const edges = new Set(previous.edges);
+      for (const [id, selected] of toggled) {
+        if (selected) edges.add(id);
+        else edges.delete(id);
+      }
+      return { nodes: previous.nodes, edges };
+    });
+  }, []);
+  const onNodeDragStop = useCallback2(
+    (_event, _node, nodes) => {
+      const positions = {};
+      for (const node of nodes) positions[node.id] = { x: round(node.position.x), y: round(node.position.y) };
+      setOverlay((previous) => {
+        const next = { ...previous.positions };
+        for (const id of Object.keys(positions)) delete next[id];
+        return { positions: next, sizes: previous.sizes };
+      });
+      if (!editable) return;
+      const ids = Object.keys(positions);
+      commit(moveNodes(docRef.current, positions), { reason: "move", nodeIds: ids });
+      const only = ids.length === 1 ? ids[0] : void 0;
+      const at = only === void 0 ? void 0 : positions[only];
+      if (only !== void 0 && at !== void 0) announce(formatMessage(messages.announce.moved, { label: labelOfNode(only), x: Math.round(at.x), y: Math.round(at.y) }));
+    },
+    [editable, commit, announce, messages, labelOfNode]
+  );
+  const onConnect = useCallback2((connection) => void tryConnect(toConnection(connection)), [tryConnect]);
+  const isValidConnection = useCallback2(
+    (connection) => checkProposed(toConnection(connection)).ok,
+    [checkProposed]
+  );
+  const onConnectEnd = useCallback2(
+    (_event, state) => {
+      if (state.isValid !== false || !state.toNode || !state.fromNode || !state.fromHandle || !state.toHandle) return;
+      const from = state.fromHandle.type === "source" ? state : void 0;
+      const source = from ? state.fromNode.id : state.toNode.id;
+      const target = from ? state.toNode.id : state.fromNode.id;
+      const sourceHandle = from ? state.fromHandle.id : state.toHandle.id;
+      const targetHandle = from ? state.toHandle.id : state.fromHandle.id;
+      const check = checkProposed(toConnection({ source, target, sourceHandle: sourceHandle ?? null, targetHandle: targetHandle ?? null }));
+      if (!check.ok) showNotice(check.text);
+    },
+    [checkProposed, showNotice]
+  );
+  const activate = useCallback2((id) => {
+    const node = docRef.current.nodes.find((candidate) => candidate.id === id);
+    if (node) latest.current.onNodeActivate?.(node);
+  }, []);
+  const onKeyDown = (event) => {
+    if (event.defaultPrevented) return;
+    const target = event.target;
+    if (isTextEntry(target)) return;
+    const key = event.key;
+    if ((key === "Enter" || key === " ") && target.closest("button, a[href]")) return;
+    const nodeId = target.closest(".react-flow__node")?.dataset.id;
+    const edgeId = nodeId === void 0 ? target.closest(".react-flow__edge")?.dataset.id : void 0;
+    const modifier = event.ctrlKey || event.metaKey;
+    if (modifier) {
+      switch (key.toLowerCase()) {
+        case "z":
+          if (!historySource) return;
+          event.preventDefault();
+          if (event.shiftKey) redo();
+          else undo();
+          return;
+        case "y":
+          if (!historySource) return;
+          event.preventDefault();
+          redo();
+          return;
+        case "c":
+          if (selectedNodes.size === 0) return;
+          event.preventDefault();
+          copy();
+          return;
+        case "x":
+          if (!editable || selectedNodes.size === 0) return;
+          event.preventDefault();
+          cut();
+          return;
+        case "v":
+          if (!editable || clipboard === void 0) return;
+          event.preventDefault();
+          paste();
+          return;
+        case "d":
+          if (!editable || selectedNodes.size === 0) return;
+          event.preventDefault();
+          duplicate();
+          return;
+        case "a":
+          event.preventDefault();
+          selectAll();
+          return;
+        case "enter":
+          if (nodeId === void 0) return;
+          event.preventDefault();
+          activate(nodeId);
+          return;
+        default:
+          return;
+      }
+    }
+    if (event.altKey) return;
+    const arrow = ARROWS[key];
+    if (arrow !== void 0) {
+      if (event.shiftKey) {
+        if (!editable) return;
+        const ids = selectedNodes.size > 0 ? [...selectedNodes] : nodeId === void 0 ? [] : [nodeId];
+        if (ids.length === 0) return;
+        event.preventDefault();
+        const step = snap > 0 ? snap : NUDGE_FALLBACK;
+        nudge(ids, arrow === "left" ? -step : arrow === "right" ? step : 0, arrow === "up" ? -step : arrow === "down" ? step : 0);
+        return;
+      }
+      if (nodeId === void 0) {
+        const firstId = visibleIds[0];
+        if (firstId === void 0 || edgeId !== void 0) return;
+        event.preventDefault();
+        focusNodeElement(firstId);
+        return;
+      }
+      event.preventDefault();
+      const next = findDirectionalNeighbor(viewDoc, nodeId, arrow, { candidates: visibleIds });
+      if (next !== void 0) focusNodeElement(next);
+      return;
+    }
+    switch (key) {
+      case " ": {
+        if (nodeId === void 0 && edgeId === void 0) return;
+        event.preventDefault();
+        const additive = event.shiftKey;
+        if (nodeId !== void 0) {
+          if (additive) {
+            const next = new Set(selectedNodes);
+            if (next.has(nodeId)) next.delete(nodeId);
+            else next.add(nodeId);
+            select([...next], [...selectedEdges]);
+          } else if (selectedNodes.size === 1 && selectedNodes.has(nodeId) && selectedEdges.size === 0) clearSelection();
+          else select([nodeId]);
+        } else if (edgeId !== void 0) {
+          if (selectedEdges.size === 1 && selectedEdges.has(edgeId) && selectedNodes.size === 0) clearSelection();
+          else select([], [edgeId]);
+        }
+        return;
+      }
+      case "Enter": {
+        if (connectingFrom !== void 0 && nodeId !== void 0) {
+          event.preventDefault();
+          tryConnect({ source: connectingFrom, target: nodeId });
+          setConnectingFrom(void 0);
+          return;
+        }
+        event.preventDefault();
+        if (!editable) {
+          if (nodeId !== void 0) activate(nodeId);
+        } else if (nodeId !== void 0) startEditing({ kind: "node", id: nodeId });
+        else if (edgeId !== void 0) startEditing({ kind: "edge", id: edgeId });
+        return;
+      }
+      case "F2":
+        if (!editable) return;
+        event.preventDefault();
+        if (nodeId !== void 0) startEditing({ kind: "node", id: nodeId });
+        else if (edgeId !== void 0) startEditing({ kind: "edge", id: edgeId });
+        return;
+      case "Delete":
+      case "Backspace": {
+        if (!editable) return;
+        const nodes = selectedNodes.size > 0 || selectedEdges.size > 0 ? [...selectedNodes] : nodeId === void 0 ? [] : [nodeId];
+        const edges = selectedNodes.size > 0 || selectedEdges.size > 0 ? [...selectedEdges] : edgeId === void 0 ? [] : [edgeId];
+        if (nodes.length === 0 && edges.length === 0) return;
+        event.preventDefault();
+        deleteTargets(nodes, edges);
+        return;
+      }
+      case "Escape":
+        if (connectingFrom !== void 0) {
+          event.preventDefault();
+          setConnectingFrom(void 0);
+          announce(formatMessage(messages.announce.connectCancelled));
+        } else if (selectedNodes.size > 0 || selectedEdges.size > 0) {
+          event.preventDefault();
+          clearSelection();
+        }
+        return;
+      case "c":
+      case "C": {
+        if (!editable || nodeId === void 0) return;
+        event.preventDefault();
+        if (connectingFrom === void 0) {
+          setConnectingFrom(nodeId);
+          announce(formatMessage(messages.announce.connectStarted, { label: labelOfNode(nodeId) }));
+        } else {
+          tryConnect({ source: connectingFrom, target: nodeId });
+          setConnectingFrom(void 0);
+        }
+        return;
+      }
+      case "+":
+      case "=":
+        event.preventDefault();
+        zoomIn();
+        return;
+      case "-":
+      case "_":
+        event.preventDefault();
+        zoomOut();
+        return;
+      case "0":
+        event.preventDefault();
+        fit();
+        return;
+      default:
+        return;
+    }
+  };
+  const onDragOver = (event) => {
+    if (!editable || !Array.from(event.dataTransfer.types).includes(PALETTE_DRAG_TYPE)) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+  };
+  const onDrop = (event) => {
+    if (!editable) return;
+    const kind = event.dataTransfer.getData(PALETTE_DRAG_TYPE);
+    if (!NODE_KINDS.includes(kind)) return;
+    event.preventDefault();
+    const point = rf.screenToFlowPosition({ x: event.clientX, y: event.clientY });
+    const id = addNodeAt(kind, point);
+    if (id !== void 0) startEditing({ kind: "node", id });
+  };
+  const api = {
+    fitView: fit,
+    zoomIn,
+    zoomOut,
+    focusNode,
+    select,
+    clearSelection,
+    undo,
+    redo,
+    applyLayout: applyAutoLayout,
+    addNode: (kind, init) => addNodeAt(kind, viewCenter(), init),
+    align,
+    distribute,
+    group,
+    ungroup,
+    duplicate,
+    deleteSelection,
+    copy,
+    paste,
+    getDocument: () => docRef.current,
+    getSelection: () => ({ nodeIds: [...selectedNodes], edgeIds: [...selectedEdges] })
+  };
+  const apiRef = useRef4(api);
+  apiRef.current = api;
+  useImperativeHandle(
+    ref,
+    () => {
+      const call = apiRef;
+      return {
+        fitView: () => call.current.fitView(),
+        zoomIn: () => call.current.zoomIn(),
+        zoomOut: () => call.current.zoomOut(),
+        focusNode: (id) => call.current.focusNode(id),
+        select: (nodeIds, edgeIds) => call.current.select(nodeIds, edgeIds),
+        clearSelection: () => call.current.clearSelection(),
+        undo: () => call.current.undo(),
+        redo: () => call.current.redo(),
+        applyLayout: (options) => call.current.applyLayout(options),
+        addNode: (kind, init) => call.current.addNode(kind, init),
+        align: (alignment) => call.current.align(alignment),
+        distribute: (axis) => call.current.distribute(axis),
+        group: () => call.current.group(),
+        ungroup: () => call.current.ungroup(),
+        duplicate: () => call.current.duplicate(),
+        deleteSelection: () => call.current.deleteSelection(),
+        copy: () => call.current.copy(),
+        paste: () => call.current.paste(),
+        getDocument: () => call.current.getDocument(),
+        getSelection: () => call.current.getSelection()
+      };
+    },
+    []
+  );
+  const markerId = useCallback2((tone) => `${rootId}-arrow-${tone}`, [rootId]);
+  const context = useMemo3(
+    () => ({
+      messages,
+      editable,
+      rtl,
+      direction,
+      edgeKind,
+      renderers: nodeRenderers ?? {},
+      editing,
+      connectingFrom,
+      startEditing,
+      commitEditing,
+      cancelEditing,
+      toggleCollapsed,
+      commitResize,
+      markerId
+    }),
+    [messages, editable, rtl, direction, edgeKind, nodeRenderers, editing, connectingFrom, startEditing, commitEditing, cancelEditing, toggleCollapsed, commitResize, markerId]
+  );
+  const ariaLabelConfig = useMemo3(
+    () => ({
+      "node.a11yDescription.default": "",
+      "node.a11yDescription.keyboardDisabled": "",
+      "node.a11yDescription.ariaLiveMessage": () => "",
+      "edge.a11yDescription.default": "",
+      "minimap.ariaLabel": formatMessage(messages.minimap),
+      "handle.ariaLabel": formatMessage(messages.node.port)
+    }),
+    [messages]
+  );
+  const toolbarSections = useMemo3(() => {
+    const all = { palette: true, history: true, edit: true, layout: true, view: true };
+    if (toolbar === false) return void 0;
+    return toolbar === true ? all : { ...all, ...toolbar };
+  }, [toolbar]);
+  const accessibleName = label ?? formatMessage(messages.canvas.label, { title: doc.title });
+  const hostStyle = { ...height === void 0 ? {} : { "--diagram-height": typeof height === "number" ? `${height}px` : height }, ...style };
+  const empty = viewDoc.nodes.length === 0;
+  return /* @__PURE__ */ jsx6(CanvasContext.Provider, { value: context, children: /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      ...rest,
+      ref: hostRef,
+      id: rootId,
+      tabIndex: -1,
+      "data-kit": "diagram-canvas",
+      "data-readonly": readOnly ? "" : void 0,
+      "data-rtl": rtl ? "" : void 0,
+      "data-connecting": connectingFrom === void 0 ? void 0 : "",
+      dir: rtl ? "rtl" : "ltr",
+      className,
+      style: hostStyle,
+      children: [
+        /* @__PURE__ */ jsx6(EdgeMarkers, { markerId }),
+        toolbarSections === void 0 ? null : /* @__PURE__ */ jsx6(
+          DiagramToolbar,
+          {
+            messages,
+            editable,
+            sections: { ...toolbarSections, history: toolbarSections.history && historySource !== void 0 },
+            palette,
+            rtl,
+            paletteOpen,
+            onPaletteOpenChange: setPaletteOpen,
+            state: {
+              canUndo: historySource?.canUndo ?? false,
+              canRedo: historySource?.canRedo ?? false,
+              hasSelection: selectedNodes.size + selectedEdges.size > 0,
+              canGroup,
+              canUngroup: ungroupable.length > 0,
+              minimap: showMiniMap,
+              grid: showGrid
+            },
+            actions: {
+              addNode: addFromPalette,
+              undo,
+              redo,
+              deleteSelection,
+              duplicate,
+              group,
+              ungroup,
+              layout: () => applyAutoLayout(),
+              zoomIn,
+              zoomOut,
+              fitView: fit,
+              toggleMiniMap: () => setShowMiniMap((value2) => !value2),
+              toggleGrid: () => setShowGrid((value2) => !value2)
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { ref: stageRef, "data-slot": "stage", onDragOver, onDrop, children: [
+          /* @__PURE__ */ jsx6(VisuallyHidden, { id: instructionsId, children: formatMessage(editable ? messages.canvas.instructions : messages.canvas.instructionsReadOnly) }),
+          /* @__PURE__ */ jsxs6(
+            ReactFlow,
+            {
+              nodes: flowNodes,
+              edges: flowEdges,
+              nodeTypes: NODE_TYPES,
+              edgeTypes: EDGE_TYPES,
+              onNodesChange,
+              onEdgesChange,
+              onConnect,
+              onConnectEnd,
+              isValidConnection,
+              onNodeDragStop,
+              onNodeDoubleClick: (_event, node) => {
+                if (editable) startEditing({ kind: "node", id: node.id });
+                else activate(node.id);
+              },
+              onEdgeDoubleClick: (_event, edge) => startEditing({ kind: "edge", id: edge.id }),
+              nodesDraggable: editable,
+              nodesConnectable: editable,
+              nodesFocusable: true,
+              edgesFocusable,
+              edgesReconnectable: false,
+              elementsSelectable: true,
+              deleteKeyCode: null,
+              disableKeyboardA11y: true,
+              snapToGrid: snap > 0,
+              snapGrid: [snap > 0 ? snap : GRID_SIZE, snap > 0 ? snap : GRID_SIZE],
+              minZoom,
+              maxZoom,
+              zoomOnScroll: wheelZoom,
+              preventScrolling: wheelZoom,
+              onlyRenderVisibleElements: virtualize,
+              fitView: fitOnMount,
+              fitViewOptions: FIT_OPTIONS,
+              proOptions: { hideAttribution: !showAttribution },
+              ariaLabelConfig,
+              onError: (code, message) => {
+                if (code !== "013") console.warn(message);
+              },
+              "aria-label": accessibleName,
+              "aria-describedby": instructionsId,
+              "data-kit": "diagram-flow",
+              onKeyDown,
+              children: [
+                showGrid ? /* @__PURE__ */ jsx6(Background, { variant: BackgroundVariant.Dots, gap: GRID_SIZE * 2, size: 1 }) : null,
+                showMiniMap ? /* @__PURE__ */ jsx6(
+                  MiniMap,
+                  {
+                    pannable: true,
+                    zoomable: true,
+                    ariaLabel: formatMessage(messages.minimap),
+                    position: rtl ? "bottom-left" : "bottom-right",
+                    nodeClassName: (node) => {
+                      const data = node.data;
+                      return `kit-minimap-node ${data?.node.status ?? "neutral"} ${data?.node.kind ?? ""}`.trim();
+                    }
+                  }
+                ) : null
+              ]
+            }
+          ),
+          empty ? /* @__PURE__ */ jsx6("p", { "data-slot": "empty", dir: "auto", children: formatMessage(messages.canvas.empty) }) : null,
+          /* @__PURE__ */ jsx6("div", { "data-kit": "diagram-notice", role: "status", children: notice === void 0 ? null : /* @__PURE__ */ jsx6("span", { "data-slot": "message", dir: "auto", children: notice.text }, notice.n) })
+        ] }),
+        /* @__PURE__ */ jsx6(VisuallyHidden, { role: "status", "aria-live": "polite", "aria-atomic": "true", "data-kit": "diagram-live", children: /* @__PURE__ */ jsx6("span", { children: announcement.text }, announcement.n) }),
+        outline === false ? null : /* @__PURE__ */ jsx6(
+          DiagramOutline,
+          {
+            document: viewDoc,
+            messages: messagesOverride ?? {},
+            direction,
+            rtl,
+            reveal: outline === "visible" ? "always" : "focus",
+            onNavigate: (nodeId) => void focusNode(nodeId),
+            ...editable ? {
+              onDisconnect: (edgeId) => {
+                const edge = docRef.current.edges.find((candidate) => candidate.id === edgeId);
+                if (!edge) return;
+                commit(disconnect(docRef.current, edgeId), { reason: "disconnect", edgeIds: [edgeId], nodeIds: [edge.source, edge.target] });
+                announce(formatMessage(messages.announce.disconnected, { source: labelOfNode(edge.source), target: labelOfNode(edge.target) }));
+              }
+            } : {}
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/react/mermaid.tsx
+import { Button as Button2, Spinner } from "@x12i/ui";
+import { useEffect as useEffect4, useId as useId4, useMemo as useMemo4, useRef as useRef5, useState as useState4 } from "react";
+
+// src/react/dom.ts
+function downloadBlob(content, filename, type = "text/plain;charset=utf-8") {
+  const blob = typeof content === "string" ? new Blob([content], { type }) : content;
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.rel = "noopener";
+  link.style.display = "none";
+  document.body.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+var VAR = /var\(\s*(--[\w-]+)\s*(?:,\s*([^()]*))?\)/g;
+function resolveCssVariables(text, element) {
+  if (typeof document === "undefined") return text;
+  const style = getComputedStyle(element ?? document.documentElement);
+  let current = text;
+  for (let pass = 0; pass < 5; pass += 1) {
+    const next = current.replace(VAR, (match, name, fallback) => {
+      const value = style.getPropertyValue(name).trim();
+      if (value !== "") return value;
+      return fallback === void 0 ? match : fallback.trim();
+    });
+    if (next === current) break;
+    current = next;
+  }
+  return current;
+}
+function readDiagramPalette(element) {
+  const resolve = (value) => resolveCssVariables(value, element);
+  const status = {};
+  for (const key of Object.keys(defaultPalette.status)) {
+    const tone = defaultPalette.status[key];
+    status[key] = { background: resolve(tone.background), foreground: resolve(tone.foreground), border: resolve(tone.border) };
+  }
+  const palette = { ...defaultPalette, status };
+  for (const [key, value] of Object.entries(defaultPalette)) {
+    if (typeof value === "string") palette[key] = resolve(value);
+  }
+  return palette;
+}
+function downloadDiagramSvg(doc, options = {}) {
+  const { filename = "diagram.svg", element, ...svgOptions } = options;
+  const svg = resolveCssVariables(exportDiagramSvg(doc, svgOptions), element);
+  downloadBlob(svg, filename, "image/svg+xml;charset=utf-8");
+}
+function downloadDiagramJson(doc, filename = "diagram.json") {
+  downloadBlob(exportDiagramJson(doc), filename, "application/json;charset=utf-8");
+}
+
+// src/react/sanitize.ts
+var DROP_SVG = /* @__PURE__ */ new Set([
+  "script",
+  "iframe",
+  "object",
+  "embed",
+  "link",
+  "meta",
+  "base",
+  "audio",
+  "video",
+  "canvas",
+  "animate",
+  "animatetransform",
+  "animatemotion",
+  "set",
+  "discard",
+  "handler",
+  "listener"
+]);
+var HTML_TEXT = /* @__PURE__ */ new Set(["div", "span", "p", "br", "b", "i", "u", "em", "strong", "code", "pre", "small", "sub", "sup", "ul", "ol", "li", "body"]);
+var DROP_ATTRIBUTES = /* @__PURE__ */ new Set(["srcdoc", "formaction", "action", "ping"]);
+function isHtml(element) {
+  return element.namespaceURI === "http://www.w3.org/1999/xhtml";
+}
+function cleanStyleText(css) {
+  return css.replace(/@import[^;]*;?/gi, "").replace(/expression\s*\([^)]*\)/gi, "none").replace(/javascript:/gi, "").replace(/url\(\s*(?!['"]?#)[^)]*\)/gi, "none");
+}
+function sanitizeElement(element) {
+  for (const child of Array.from(element.children)) {
+    const name = child.localName.toLowerCase();
+    const html = isHtml(child);
+    if (!html && DROP_SVG.has(name) || html && !HTML_TEXT.has(name)) {
+      if (html && name !== "script" && name !== "style" && name !== "iframe" && name !== "object" && name !== "embed") {
+        sanitizeElement(child);
+        child.replaceWith(...Array.from(child.childNodes));
+      } else {
+        child.remove();
+      }
+      continue;
+    }
+    for (const attribute of Array.from(child.attributes)) {
+      const attributeName2 = attribute.name.toLowerCase();
+      const value = attribute.value;
+      if (attributeName2.startsWith("on") || DROP_ATTRIBUTES.has(attributeName2)) {
+        child.removeAttribute(attribute.name);
+      } else if (attributeName2 === "href" || attributeName2 === "xlink:href" || attributeName2 === "src") {
+        const safeFragment = value.trim().startsWith("#");
+        const safeImage = name === "image" && isSafeImageUrl(value.trim());
+        if (!safeFragment && !safeImage) child.removeAttribute(attribute.name);
+      } else if (attributeName2 === "style") {
+        const cleaned = cleanStyleText(value);
+        if (cleaned !== value) child.setAttribute(attribute.name, cleaned);
+      } else if (/^\s*javascript:/i.test(value)) {
+        child.removeAttribute(attribute.name);
+      }
+    }
+    if (name === "style") child.textContent = cleanStyleText(child.textContent ?? "");
+    sanitizeElement(child);
+  }
+}
+function sanitizeSvgMarkup(markup) {
+  if (typeof DOMParser === "undefined") return null;
+  const parsed = new DOMParser().parseFromString(`<!doctype html><body>${markup}</body>`, "text/html");
+  const root = parsed.body.querySelector("svg");
+  if (!root) return null;
+  const holder = parsed.createElement("div");
+  holder.append(root);
+  sanitizeElement(holder);
+  for (const attribute of Array.from(root.attributes)) {
+    if (attribute.name.toLowerCase().startsWith("on")) root.removeAttribute(attribute.name);
+    else if (attribute.name.toLowerCase() === "style") root.setAttribute(attribute.name, cleanStyleText(attribute.value));
+  }
+  return root;
+}
+
+// src/react/mermaid.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function isApi(value) {
+  return typeof value === "object" && value !== null && typeof value.render === "function" && typeof value.initialize === "function";
+}
+function normalize(loaded) {
+  if (isApi(loaded)) return loaded;
+  const fallback = loaded.default;
+  if (isApi(fallback)) return fallback;
+  throw new Error("The loader did not return Mermaid (an object with initialize and render).");
+}
+var TOKENS = {
+  background: "--kit-color-bg-surface",
+  canvas: "--kit-color-bg-canvas",
+  text: "--kit-color-text-primary",
+  muted: "--kit-color-text-secondary",
+  border: "--kit-color-border-default",
+  borderStrong: "--kit-color-border-strong",
+  accent: "--kit-color-accent-default",
+  accentSubtle: "--kit-color-accent-subtle",
+  warningBackground: "--kit-color-status-warning-background",
+  warningForeground: "--kit-color-status-warning-foreground",
+  warningBorder: "--kit-color-status-warning-border",
+  dangerBackground: "--kit-color-status-danger-background",
+  dangerForeground: "--kit-color-status-danger-foreground",
+  font: "--kit-font-family-sans"
+};
+function readKitThemeVariables(element) {
+  const read = (name) => resolveCssVariables(`var(${name})`, element);
+  const t = Object.fromEntries(Object.entries(TOKENS).map(([key, name]) => [key, read(name)]));
+  return {
+    background: t.background,
+    fontFamily: t.font,
+    primaryColor: t.accentSubtle,
+    primaryTextColor: t.text,
+    primaryBorderColor: t.accent,
+    secondaryColor: t.canvas,
+    secondaryTextColor: t.text,
+    secondaryBorderColor: t.border,
+    tertiaryColor: t.background,
+    tertiaryTextColor: t.text,
+    tertiaryBorderColor: t.border,
+    lineColor: t.borderStrong,
+    textColor: t.text,
+    mainBkg: t.background,
+    nodeBorder: t.border,
+    nodeTextColor: t.text,
+    clusterBkg: t.canvas,
+    clusterBorder: t.border,
+    titleColor: t.text,
+    edgeLabelBackground: t.background,
+    noteBkgColor: t.warningBackground,
+    noteTextColor: t.warningForeground,
+    noteBorderColor: t.warningBorder,
+    errorBkgColor: t.dangerBackground,
+    errorTextColor: t.dangerForeground,
+    actorBkg: t.background,
+    actorBorder: t.border,
+    actorTextColor: t.text,
+    signalColor: t.text,
+    signalTextColor: t.text,
+    labelBoxBkgColor: t.background,
+    labelTextColor: t.text
+  };
+}
+var queue = Promise.resolve();
+function enqueue(job) {
+  const run = queue.then(job, job);
+  queue = run.catch(() => void 0);
+  return run;
+}
+function readThemeSignature() {
+  if (typeof document === "undefined") return "";
+  const root = document.documentElement;
+  return `${root.getAttribute("data-theme") ?? ""}|${root.getAttribute("class") ?? ""}|${root.getAttribute("style") ?? ""}`;
+}
+function MermaidDiagram({
+  source,
+  loadMermaid,
+  title,
+  description,
+  messages: messagesOverride,
+  config,
+  onRender,
+  onError,
+  showSourceToggle = true,
+  className,
+  ...props
+}) {
+  const messages = useMemo4(() => resolveMessages(messagesOverride), [messagesOverride]);
+  const host = useRef5(null);
+  const uid = useId4().replace(/[^a-zA-Z0-9_-]/g, "");
+  const sourceId = useId4();
+  const [state, setState] = useState4({ status: "loading" });
+  const [sourceShown, setSourceShown] = useState4(false);
+  const [themeSignature, setThemeSignature] = useState4(readThemeSignature);
+  const renders = useRef5(0);
+  const latest = useRef5({ loadMermaid, onRender, onError });
+  latest.current = { loadMermaid, onRender, onError };
+  const configKey = useMemo4(() => JSON.stringify(config ?? {}), [config]);
+  useEffect4(() => {
+    if (typeof MutationObserver === "undefined") return;
+    const observer = new MutationObserver(() => setThemeSignature(readThemeSignature()));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "class", "style"] });
+    return () => observer.disconnect();
+  }, []);
+  useEffect4(() => {
+    let cancelled = false;
+    setState({ status: "loading" });
+    const id = `${uid}-m${renders.current += 1}`;
+    const run = async () => {
+      let api;
+      try {
+        api = normalize(await latest.current.loadMermaid());
+      } catch (error) {
+        if (cancelled) return;
+        setState({ status: "error", kind: "load", detail: error instanceof Error ? error.message : String(error) });
+        latest.current.onError?.(error, "load");
+        return;
+      }
+      if (cancelled) return;
+      try {
+        const user = JSON.parse(configKey);
+        const result = await enqueue(async () => {
+          if (cancelled) return void 0;
+          api.initialize({
+            theme: "base",
+            themeVariables: readKitThemeVariables(host.current ?? void 0),
+            htmlLabels: false,
+            flowchart: { htmlLabels: false },
+            suppressErrorRendering: true,
+            ...user,
+            // The two settings that protect the page cannot be changed by props.
+            startOnLoad: false,
+            securityLevel: "strict"
+          });
+          return api.render(id, source);
+        });
+        if (cancelled || result === void 0) return;
+        const svg = sanitizeSvgMarkup(result.svg);
+        if (!svg) throw new Error("Mermaid returned no SVG.");
+        svg.setAttribute("aria-hidden", "true");
+        svg.setAttribute("focusable", "false");
+        svg.removeAttribute("width");
+        svg.style.maxWidth = "100%";
+        svg.style.height = "auto";
+        host.current?.replaceChildren(document.importNode(svg, true));
+        setState({ status: "ready" });
+        latest.current.onRender?.(svg);
+      } catch (error) {
+        if (cancelled) return;
+        host.current?.replaceChildren();
+        setState({ status: "error", kind: "render", detail: error instanceof Error ? error.message : String(error) });
+        latest.current.onError?.(error, "render");
+      } finally {
+        document.getElementById(id)?.remove();
+        document.getElementById(`d${id}`)?.remove();
+      }
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [source, configKey, themeSignature, uid]);
+  const failed = state.status === "error";
+  return /* @__PURE__ */ jsxs7("figure", { "data-kit": "mermaid-diagram", "data-status": state.status, className, ...props, children: [
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ref: host,
+        "data-slot": "canvas",
+        role: "img",
+        "aria-label": title,
+        "aria-describedby": description === void 0 ? void 0 : `${sourceId}-description`,
+        hidden: state.status !== "ready"
+      }
+    ),
+    state.status === "loading" ? /* @__PURE__ */ jsxs7("div", { "data-slot": "status", role: "status", children: [
+      /* @__PURE__ */ jsx7(Spinner, { size: "sm" }),
+      /* @__PURE__ */ jsx7("span", { children: formatMessage(messages.mermaid.loading) })
+    ] }) : null,
+    failed ? /* @__PURE__ */ jsx7("div", { "data-slot": "status", role: "alert", children: /* @__PURE__ */ jsx7("span", { children: formatMessage(state.kind === "load" ? messages.mermaid.loadError : messages.mermaid.renderError) }) }) : null,
+    description === void 0 ? null : /* @__PURE__ */ jsx7("figcaption", { id: `${sourceId}-description`, "data-slot": "description", dir: "auto", children: description }),
+    showSourceToggle || failed ? /* @__PURE__ */ jsxs7("div", { "data-slot": "source", children: [
+      failed ? null : /* @__PURE__ */ jsx7(
+        Button2,
+        {
+          variant: "ghost",
+          tone: "neutral",
+          size: "sm",
+          "aria-expanded": sourceShown,
+          "aria-controls": `${sourceId}-source`,
+          onClick: () => setSourceShown((value) => !value),
+          children: formatMessage(sourceShown ? messages.mermaid.hideSource : messages.mermaid.showSource)
+        }
+      ),
+      sourceShown || failed ? /* @__PURE__ */ jsx7("pre", { id: `${sourceId}-source`, dir: "ltr", tabIndex: 0, "aria-label": formatMessage(messages.mermaid.sourceLabel), children: /* @__PURE__ */ jsx7("code", { children: source }) }) : null
+    ] }) : null
+  ] });
+}
+
+// src/react/static.tsx
+import { createElement as createElement2, useId as useId5, useMemo as useMemo5 } from "react";
+var ATTRIBUTE_NAMES = {
+  class: "className",
+  "xlink:href": "xlinkHref",
+  "xml:space": "xmlSpace",
+  "xml:lang": "xmlLang"
+};
+function attributeName(name) {
+  const mapped = ATTRIBUTE_NAMES[name];
+  if (mapped !== void 0) return mapped;
+  if (name.startsWith("aria-") || name.startsWith("data-") || !name.includes("-")) return name;
+  return name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+function styleObject(style) {
+  if (!style) return void 0;
+  const result = {};
+  for (const [name, value] of Object.entries(style)) {
+    result[name.startsWith("--") ? name : name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())] = value;
+  }
+  return result;
+}
+function toReact(element, key, extra = {}) {
+  const props = { key };
+  for (const [name, value] of Object.entries(element.attrs ?? {})) {
+    if (value !== void 0) props[attributeName(name)] = value;
+  }
+  const style = styleObject(element.style);
+  if (style !== void 0) props.style = style;
+  Object.assign(props, extra);
+  const children = (element.children ?? []).map((child, index) => typeof child === "string" ? child : toReact(child, index));
+  return createElement2(element.tag, props, ...children);
+}
+function StaticDiagram({ document: doc, messages, idPrefix, className, style, ...options }) {
+  const generated = useId5().replace(/[^a-zA-Z0-9_-]/g, "");
+  const connector = options.connector ?? formatMessage(resolveMessages(messages).outline.connector);
+  const tree = useMemo5(
+    () => diagramToSvgTree(doc, { ...options, connector, idPrefix: idPrefix ?? `kit-diagram-${generated}` }),
+    // `options` is a fresh object each render; list its fields instead.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      doc,
+      connector,
+      idPrefix,
+      generated,
+      options.direction,
+      options.rtl,
+      options.edgeKind,
+      options.padding,
+      options.palette,
+      options.title,
+      options.description,
+      options.lang,
+      options.width,
+      options.height,
+      options.highlight,
+      options.showEdgeLabels
+    ]
+  );
+  const extra = {};
+  if (className !== void 0) extra.className = className;
+  if (style !== void 0) extra.style = { ...styleObject(tree.style), ...style };
+  return toReact(tree, void 0, extra);
+}
+export {
+  DiagramCanvas,
+  DiagramOutline,
+  MermaidDiagram,
+  PALETTE_DRAG_TYPE,
+  StaticDiagram,
+  defaultMessages,
+  downloadBlob,
+  downloadDiagramJson,
+  downloadDiagramSvg,
+  exportDiagramJson,
+  exportDiagramSvg,
+  focusDiagramNode,
+  readDiagramPalette,
+  readKitThemeVariables,
+  resolveCssVariables,
+  sanitizeSvgMarkup,
+  useDiagramHistory
+};
+//# sourceMappingURL=react.js.map