@arach/arc-viewer 0.4.4

package/dist/index.js

@@ -0,0 +1,3017 @@
+import React, { useState, useMemo, useCallback, useId, useRef, useEffect } from 'react';
+import * as LucideIcons from 'lucide-react';
+import { Minus, Plus, Scan, ChevronLeft, Pause, Play, ChevronRight, Expand } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/ArcDiagram.tsx
+
+// src/themes.ts
+var defaultTheme = {
+  id: "default",
+  name: "Default",
+  description: "Clean, neutral colors",
+  light: {
+    palette: {
+      violet: { border: "border-violet-300", bg: "bg-gradient-to-br from-violet-50 to-violet-100/50", icon: "text-violet-600", stroke: "#8b5cf6" },
+      emerald: { border: "border-emerald-300", bg: "bg-gradient-to-br from-emerald-50 to-emerald-100/50", icon: "text-emerald-600", stroke: "#10b981" },
+      blue: { border: "border-blue-300", bg: "bg-gradient-to-br from-blue-50 to-blue-100/50", icon: "text-blue-600", stroke: "#3b82f6" },
+      amber: { border: "border-amber-300", bg: "bg-gradient-to-br from-amber-50 to-amber-100/50", icon: "text-amber-600", stroke: "#f59e0b" },
+      sky: { border: "border-sky-300", bg: "bg-gradient-to-br from-sky-50 to-sky-100/50", icon: "text-sky-600", stroke: "#0ea5e9" },
+      zinc: { border: "border-zinc-300", bg: "bg-gradient-to-br from-zinc-50 to-zinc-100/50", icon: "text-zinc-600", stroke: "#71717a" },
+      rose: { border: "border-rose-300", bg: "bg-gradient-to-br from-rose-50 to-rose-100/50", icon: "text-rose-600", stroke: "#f43f5e" },
+      orange: { border: "border-orange-300", bg: "bg-gradient-to-br from-orange-50 to-orange-100/50", icon: "text-orange-600", stroke: "#f97316" }
+    },
+    background: {
+      container: "bg-white/80 border border-zinc-200 shadow-lg",
+      grid: { color: "rgba(16, 21, 24, 0.12)", opacity: 0.35, size: 24 }
+    },
+    text: { primary: "text-zinc-900", secondary: "text-zinc-600", muted: "text-zinc-500" }
+  },
+  dark: {
+    palette: {
+      violet: { border: "border-violet-400/50", bg: "bg-violet-500/10", icon: "text-violet-400", stroke: "#a78bfa" },
+      emerald: { border: "border-emerald-400/50", bg: "bg-emerald-500/10", icon: "text-emerald-400", stroke: "#34d399" },
+      blue: { border: "border-blue-400/50", bg: "bg-blue-500/10", icon: "text-blue-400", stroke: "#60a5fa" },
+      amber: { border: "border-amber-400/50", bg: "bg-amber-500/10", icon: "text-amber-400", stroke: "#fbbf24" },
+      sky: { border: "border-sky-400/50", bg: "bg-sky-500/10", icon: "text-sky-400", stroke: "#38bdf8" },
+      zinc: { border: "border-zinc-600", bg: "bg-zinc-800/50", icon: "text-zinc-400", stroke: "#71717a" },
+      rose: { border: "border-rose-400/50", bg: "bg-rose-500/10", icon: "text-rose-400", stroke: "#fb7185" },
+      orange: { border: "border-orange-400/50", bg: "bg-orange-500/10", icon: "text-orange-400", stroke: "#fb923c" }
+    },
+    background: {
+      container: "bg-zinc-950 border border-zinc-800",
+      grid: { color: "#71717a", opacity: 0.08, size: 24 }
+    },
+    text: { primary: "text-white", secondary: "text-zinc-400", muted: "text-zinc-600" }
+  }
+};
+var warmTheme = {
+  id: "warm",
+  name: "Warm",
+  description: "Soft, editorial warmth",
+  light: {
+    palette: {
+      violet: { border: "border-violet-300/70", bg: "bg-gradient-to-br from-violet-50/90 to-violet-100/50", icon: "text-violet-500", stroke: "#a78bfa" },
+      emerald: { border: "border-emerald-300/70", bg: "bg-gradient-to-br from-emerald-50/90 to-emerald-100/50", icon: "text-emerald-500", stroke: "#6ee7b7" },
+      blue: { border: "border-blue-300/70", bg: "bg-gradient-to-br from-blue-50/90 to-blue-100/50", icon: "text-blue-500", stroke: "#93c5fd" },
+      amber: { border: "border-amber-300/70", bg: "bg-gradient-to-br from-amber-50/90 to-amber-100/50", icon: "text-amber-500", stroke: "#fcd34d" },
+      sky: { border: "border-sky-300/70", bg: "bg-gradient-to-br from-sky-50/90 to-sky-100/50", icon: "text-sky-500", stroke: "#7dd3fc" },
+      zinc: { border: "border-stone-300/70", bg: "bg-gradient-to-br from-stone-50/90 to-stone-100/50", icon: "text-stone-500", stroke: "#a8a29e" },
+      rose: { border: "border-rose-300/70", bg: "bg-gradient-to-br from-rose-50/90 to-rose-100/50", icon: "text-rose-500", stroke: "#fda4af" },
+      orange: { border: "border-orange-300/70", bg: "bg-gradient-to-br from-orange-50/90 to-orange-100/50", icon: "text-orange-500", stroke: "#fdba74" }
+    },
+    background: {
+      container: "bg-gradient-to-br from-amber-50/80 via-orange-50/40 to-stone-100/60 border border-stone-200/60",
+      grid: { color: "rgba(180, 160, 140, 0.3)", opacity: 0.5, size: 24 }
+    },
+    text: { primary: "text-stone-800", secondary: "text-stone-600", muted: "text-stone-400" }
+  },
+  dark: {
+    palette: {
+      violet: { border: "border-violet-400/40", bg: "bg-violet-500/8", icon: "text-violet-300", stroke: "#c4b5fd" },
+      emerald: { border: "border-emerald-400/40", bg: "bg-emerald-500/8", icon: "text-emerald-300", stroke: "#a7f3d0" },
+      blue: { border: "border-blue-400/40", bg: "bg-blue-500/8", icon: "text-blue-300", stroke: "#bfdbfe" },
+      amber: { border: "border-amber-400/40", bg: "bg-amber-500/8", icon: "text-amber-300", stroke: "#fde68a" },
+      sky: { border: "border-sky-400/40", bg: "bg-sky-500/8", icon: "text-sky-300", stroke: "#bae6fd" },
+      zinc: { border: "border-stone-500/40", bg: "bg-stone-600/10", icon: "text-stone-300", stroke: "#d6d3d1" },
+      rose: { border: "border-rose-400/40", bg: "bg-rose-500/8", icon: "text-rose-300", stroke: "#fecdd3" },
+      orange: { border: "border-orange-400/40", bg: "bg-orange-500/8", icon: "text-orange-300", stroke: "#fed7aa" }
+    },
+    background: {
+      container: "bg-gradient-to-br from-stone-950 via-stone-900 to-stone-950 border border-stone-700/50",
+      grid: { color: "rgba(168, 162, 158, 0.15)", opacity: 0.15, size: 24 }
+    },
+    text: { primary: "text-stone-100", secondary: "text-stone-400", muted: "text-stone-600" }
+  }
+};
+var coolTheme = {
+  id: "cool",
+  name: "Cool",
+  description: "Crisp, modern blues",
+  light: {
+    palette: {
+      violet: { border: "border-indigo-300", bg: "bg-gradient-to-br from-indigo-50 to-indigo-100/50", icon: "text-indigo-600", stroke: "#6366f1" },
+      emerald: { border: "border-teal-300", bg: "bg-gradient-to-br from-teal-50 to-teal-100/50", icon: "text-teal-600", stroke: "#14b8a6" },
+      blue: { border: "border-blue-300", bg: "bg-gradient-to-br from-blue-50 to-blue-100/50", icon: "text-blue-600", stroke: "#3b82f6" },
+      amber: { border: "border-cyan-300", bg: "bg-gradient-to-br from-cyan-50 to-cyan-100/50", icon: "text-cyan-600", stroke: "#06b6d4" },
+      sky: { border: "border-sky-300", bg: "bg-gradient-to-br from-sky-50 to-sky-100/50", icon: "text-sky-600", stroke: "#0ea5e9" },
+      zinc: { border: "border-slate-300", bg: "bg-gradient-to-br from-slate-50 to-slate-100/50", icon: "text-slate-600", stroke: "#64748b" },
+      rose: { border: "border-fuchsia-300", bg: "bg-gradient-to-br from-fuchsia-50 to-fuchsia-100/50", icon: "text-fuchsia-600", stroke: "#d946ef" },
+      orange: { border: "border-violet-300", bg: "bg-gradient-to-br from-violet-50 to-violet-100/50", icon: "text-violet-600", stroke: "#8b5cf6" }
+    },
+    background: {
+      container: "bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-100 border border-slate-200",
+      grid: { color: "rgba(71, 85, 105, 0.15)", opacity: 0.4, size: 24 }
+    },
+    text: { primary: "text-slate-900", secondary: "text-slate-600", muted: "text-slate-400" }
+  },
+  dark: {
+    palette: {
+      violet: { border: "border-indigo-400/50", bg: "bg-indigo-500/10", icon: "text-indigo-400", stroke: "#818cf8" },
+      emerald: { border: "border-teal-400/50", bg: "bg-teal-500/10", icon: "text-teal-400", stroke: "#2dd4bf" },
+      blue: { border: "border-blue-400/50", bg: "bg-blue-500/10", icon: "text-blue-400", stroke: "#60a5fa" },
+      amber: { border: "border-cyan-400/50", bg: "bg-cyan-500/10", icon: "text-cyan-400", stroke: "#22d3ee" },
+      sky: { border: "border-sky-400/50", bg: "bg-sky-500/10", icon: "text-sky-400", stroke: "#38bdf8" },
+      zinc: { border: "border-slate-500", bg: "bg-slate-700/30", icon: "text-slate-400", stroke: "#94a3b8" },
+      rose: { border: "border-fuchsia-400/50", bg: "bg-fuchsia-500/10", icon: "text-fuchsia-400", stroke: "#e879f9" },
+      orange: { border: "border-violet-400/50", bg: "bg-violet-500/10", icon: "text-violet-400", stroke: "#a78bfa" }
+    },
+    background: {
+      container: "bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 border border-slate-700",
+      grid: { color: "rgba(148, 163, 184, 0.1)", opacity: 0.1, size: 24 }
+    },
+    text: { primary: "text-slate-100", secondary: "text-slate-400", muted: "text-slate-600" }
+  }
+};
+var monoTheme = {
+  id: "mono",
+  name: "Mono",
+  description: "Elegant grayscale",
+  light: {
+    palette: {
+      violet: { border: "border-zinc-400", bg: "bg-gradient-to-br from-zinc-100 to-zinc-200/50", icon: "text-zinc-700", stroke: "#52525b" },
+      emerald: { border: "border-zinc-400", bg: "bg-gradient-to-br from-zinc-100 to-zinc-200/50", icon: "text-zinc-700", stroke: "#52525b" },
+      blue: { border: "border-zinc-400", bg: "bg-gradient-to-br from-zinc-100 to-zinc-200/50", icon: "text-zinc-700", stroke: "#52525b" },
+      amber: { border: "border-zinc-400", bg: "bg-gradient-to-br from-zinc-100 to-zinc-200/50", icon: "text-zinc-700", stroke: "#52525b" },
+      sky: { border: "border-zinc-400", bg: "bg-gradient-to-br from-zinc-100 to-zinc-200/50", icon: "text-zinc-700", stroke: "#52525b" },
+      zinc: { border: "border-zinc-400", bg: "bg-gradient-to-br from-zinc-100 to-zinc-200/50", icon: "text-zinc-700", stroke: "#52525b" },
+      rose: { border: "border-zinc-400", bg: "bg-gradient-to-br from-zinc-100 to-zinc-200/50", icon: "text-zinc-700", stroke: "#52525b" },
+      orange: { border: "border-zinc-400", bg: "bg-gradient-to-br from-zinc-100 to-zinc-200/50", icon: "text-zinc-700", stroke: "#52525b" }
+    },
+    background: {
+      container: "bg-zinc-100 border border-zinc-300",
+      grid: { color: "rgba(63, 63, 70, 0.08)", opacity: 0.5, size: 20 }
+    },
+    text: { primary: "text-zinc-900", secondary: "text-zinc-600", muted: "text-zinc-400" }
+  },
+  dark: {
+    palette: {
+      violet: { border: "border-zinc-600", bg: "bg-zinc-800/60", icon: "text-zinc-300", stroke: "#a1a1aa" },
+      emerald: { border: "border-zinc-600", bg: "bg-zinc-800/60", icon: "text-zinc-300", stroke: "#a1a1aa" },
+      blue: { border: "border-zinc-600", bg: "bg-zinc-800/60", icon: "text-zinc-300", stroke: "#a1a1aa" },
+      amber: { border: "border-zinc-600", bg: "bg-zinc-800/60", icon: "text-zinc-300", stroke: "#a1a1aa" },
+      sky: { border: "border-zinc-600", bg: "bg-zinc-800/60", icon: "text-zinc-300", stroke: "#a1a1aa" },
+      zinc: { border: "border-zinc-600", bg: "bg-zinc-800/60", icon: "text-zinc-300", stroke: "#a1a1aa" },
+      rose: { border: "border-zinc-600", bg: "bg-zinc-800/60", icon: "text-zinc-300", stroke: "#a1a1aa" },
+      orange: { border: "border-zinc-600", bg: "bg-zinc-800/60", icon: "text-zinc-300", stroke: "#a1a1aa" }
+    },
+    background: {
+      container: "bg-zinc-900 border border-zinc-700",
+      grid: { color: "rgba(161, 161, 170, 0.06)", opacity: 0.1, size: 20 }
+    },
+    text: { primary: "text-zinc-100", secondary: "text-zinc-400", muted: "text-zinc-600" }
+  }
+};
+var THEMES = {
+  default: defaultTheme,
+  warm: warmTheme,
+  cool: coolTheme,
+  mono: monoTheme
+};
+var DEFAULT_THEME = "default";
+function getTheme(id) {
+  return THEMES[id] || THEMES[DEFAULT_THEME];
+}
+function getThemeList() {
+  return Object.values(THEMES).map((t) => ({
+    id: t.id,
+    name: t.name,
+    description: t.description
+  }));
+}
+
+// src/autoLayout.ts
+var NODE_SIZES = {
+  l: { width: 220, height: 90 },
+  m: { width: 160, height: 75 },
+  s: { width: 110, height: 48 },
+  xs: { width: 44, height: 44 }
+};
+var DEFAULTS = {
+  columnGap: 40,
+  nodeGap: 24,
+  rowGap: 40,
+  padding: 32
+};
+function assignLayers(nodeIds, connectors) {
+  const outgoing = /* @__PURE__ */ new Map();
+  const incoming = /* @__PURE__ */ new Map();
+  for (const id of nodeIds) {
+    outgoing.set(id, []);
+    incoming.set(id, []);
+  }
+  for (const c of connectors) {
+    if (outgoing.has(c.from) && incoming.has(c.to)) {
+      outgoing.get(c.from).push(c.to);
+      incoming.get(c.to).push(c.from);
+    }
+  }
+  const roots = nodeIds.filter((id) => incoming.get(id).length === 0);
+  if (roots.length === 0) roots.push(nodeIds[0]);
+  const layer = /* @__PURE__ */ new Map();
+  for (const id of nodeIds) layer.set(id, 0);
+  const visited = /* @__PURE__ */ new Set();
+  const inDegree = /* @__PURE__ */ new Map();
+  for (const id of nodeIds) inDegree.set(id, incoming.get(id).length);
+  const queue = roots.filter((r) => inDegree.get(r) === 0);
+  if (queue.length === 0) queue.push(nodeIds[0]);
+  while (queue.length > 0) {
+    const node = queue.shift();
+    if (visited.has(node)) continue;
+    visited.add(node);
+    for (const next of outgoing.get(node) || []) {
+      const newLayer = layer.get(node) + 1;
+      if (newLayer > layer.get(next)) layer.set(next, newLayer);
+      const deg = inDegree.get(next) - 1;
+      inDegree.set(next, deg);
+      if (deg <= 0) queue.push(next);
+    }
+  }
+  for (const id of nodeIds) {
+    if (!visited.has(id)) layer.set(id, 0);
+  }
+  return layer;
+}
+function orderWithinLayers(layers, connectors) {
+  const layerCount = Math.max(...layers.keys()) + 1;
+  const outgoing = /* @__PURE__ */ new Map();
+  const incoming = /* @__PURE__ */ new Map();
+  for (const [, nodes] of layers) {
+    for (const id of nodes) {
+      outgoing.set(id, []);
+      incoming.set(id, []);
+    }
+  }
+  for (const c of connectors) {
+    outgoing.get(c.from)?.push(c.to);
+    incoming.get(c.to)?.push(c.from);
+  }
+  const position = /* @__PURE__ */ new Map();
+  for (const [, nodes] of layers) {
+    nodes.forEach((id, idx) => position.set(id, idx));
+  }
+  for (let sweep = 0; sweep < 4; sweep++) {
+    for (let l = 1; l < layerCount; l++) {
+      const nodes = layers.get(l) || [];
+      const indexed = nodes.map((id) => {
+        const preds = incoming.get(id) || [];
+        const bc = preds.length === 0 ? position.get(id) || 0 : preds.reduce((s, p) => s + (position.get(p) || 0), 0) / preds.length;
+        return { id, bc };
+      });
+      indexed.sort((a, b) => a.bc - b.bc);
+      const sorted = indexed.map((x) => x.id);
+      layers.set(l, sorted);
+      sorted.forEach((id, idx) => position.set(id, idx));
+    }
+    for (let l = layerCount - 2; l >= 0; l--) {
+      const nodes = layers.get(l) || [];
+      const indexed = nodes.map((id) => {
+        const succs = outgoing.get(id) || [];
+        const bc = succs.length === 0 ? position.get(id) || 0 : succs.reduce((s, p) => s + (position.get(p) || 0), 0) / succs.length;
+        return { id, bc };
+      });
+      indexed.sort((a, b) => a.bc - b.bc);
+      const sorted = indexed.map((x) => x.id);
+      layers.set(l, sorted);
+      sorted.forEach((id, idx) => position.set(id, idx));
+    }
+  }
+  return layers;
+}
+function inferAnchors(fromNode, toNode) {
+  const fromSize = NODE_SIZES[fromNode.size] || NODE_SIZES.m;
+  const toSize = NODE_SIZES[toNode.size] || NODE_SIZES.m;
+  const fromCx = fromNode.x + fromSize.width / 2;
+  const fromCy = fromNode.y + fromSize.height / 2;
+  const toCx = toNode.x + toSize.width / 2;
+  const toCy = toNode.y + toSize.height / 2;
+  const dx = toCx - fromCx;
+  const dy = toCy - fromCy;
+  if (Math.abs(dx) > Math.abs(dy) * 0.5) {
+    if (dx > 0) {
+      if (Math.abs(dy) < fromSize.height * 0.3) return { fromAnchor: "right", toAnchor: "left" };
+      return dy > 0 ? { fromAnchor: "bottomRight", toAnchor: "left" } : { fromAnchor: "topRight", toAnchor: "left" };
+    } else {
+      if (Math.abs(dy) < fromSize.height * 0.3) return { fromAnchor: "left", toAnchor: "right" };
+      return dy > 0 ? { fromAnchor: "bottomLeft", toAnchor: "right" } : { fromAnchor: "topLeft", toAnchor: "right" };
+    }
+  }
+  return dy > 0 ? { fromAnchor: "bottom", toAnchor: "top" } : { fromAnchor: "top", toAnchor: "bottom" };
+}
+function fitLayersPerRow(columnWidths, targetW, padding, columnGap) {
+  const available = targetW - 2 * padding;
+  let width = 0;
+  for (let i = 0; i < columnWidths.length; i++) {
+    const added = columnWidths[i] + (i > 0 ? columnGap : 0);
+    if (width + added > available && i > 0) return i;
+    width += added;
+  }
+  return columnWidths.length;
+}
+function autoLayout(data, options = {}) {
+  const opts = { ...DEFAULTS, ...options };
+  const nodeIds = Object.keys(data.nodes);
+  if (nodeIds.length === 0) return data;
+  const targetW = data.layout.width;
+  const targetH = data.layout.height;
+  const layerMap = assignLayers(nodeIds, data.connectors);
+  const layers = /* @__PURE__ */ new Map();
+  for (const [id, layer] of layerMap) {
+    if (!layers.has(layer)) layers.set(layer, []);
+    layers.get(layer).push(id);
+  }
+  const orderedLayers = orderWithinLayers(layers, data.connectors);
+  const layerCount = Math.max(...orderedLayers.keys()) + 1;
+  const columnWidths = [];
+  const columnNodes = [];
+  for (let l = 0; l < layerCount; l++) {
+    const nodes = orderedLayers.get(l) || [];
+    columnNodes.push(nodes);
+    let maxWidth = 0;
+    for (const id of nodes) {
+      const size = NODE_SIZES[data.nodes[id]?.size || "m"] || NODE_SIZES.m;
+      maxWidth = Math.max(maxWidth, size.width);
+    }
+    columnWidths.push(maxWidth);
+  }
+  const layersPerRow = fitLayersPerRow(columnWidths, targetW, opts.padding, opts.columnGap);
+  const numRows = Math.ceil(layerCount / layersPerRow);
+  const rowGroups = [];
+  for (let r = 0; r < numRows; r++) {
+    const start = r * layersPerRow;
+    const end = Math.min(start + layersPerRow, layerCount);
+    const group = [];
+    for (let l = start; l < end; l++) group.push(l);
+    rowGroups.push(group);
+  }
+  const newNodes = {};
+  let yOffset = opts.padding;
+  for (let r = 0; r < rowGroups.length; r++) {
+    const group = rowGroups[r];
+    const colGap = opts.columnGap;
+    let rowMaxHeight = 0;
+    for (const l of group) {
+      const nodes = columnNodes[l];
+      let colH = 0;
+      for (const id of nodes) {
+        const size = NODE_SIZES[data.nodes[id]?.size || "m"] || NODE_SIZES.m;
+        colH += size.height;
+      }
+      colH += Math.max(0, nodes.length - 1) * opts.nodeGap;
+      rowMaxHeight = Math.max(rowMaxHeight, colH);
+    }
+    let x = opts.padding;
+    for (const l of group) {
+      const nodes = columnNodes[l];
+      let colH = 0;
+      for (const id of nodes) {
+        const size = NODE_SIZES[data.nodes[id]?.size || "m"] || NODE_SIZES.m;
+        colH += size.height;
+      }
+      colH += Math.max(0, nodes.length - 1) * opts.nodeGap;
+      let y = yOffset + (rowMaxHeight - colH) / 2;
+      for (const id of nodes) {
+        const origNode = data.nodes[id];
+        const size = NODE_SIZES[origNode?.size || "m"] || NODE_SIZES.m;
+        const nodeX = x + (columnWidths[l] - size.width) / 2;
+        newNodes[id] = { x: nodeX, y, size: origNode?.size || "m" };
+        y += size.height + opts.nodeGap;
+      }
+      x += columnWidths[l] + colGap;
+    }
+    yOffset += rowMaxHeight + opts.rowGap;
+  }
+  const newConnectors = data.connectors.map((c) => {
+    const fromNode = newNodes[c.from];
+    const toNode = newNodes[c.to];
+    if (!fromNode || !toNode) return c;
+    const { fromAnchor, toAnchor } = inferAnchors(fromNode, toNode);
+    return { ...c, fromAnchor, toAnchor };
+  });
+  let maxX = 0;
+  let maxY = 0;
+  for (const node of Object.values(newNodes)) {
+    const size = NODE_SIZES[node.size] || NODE_SIZES.m;
+    maxX = Math.max(maxX, node.x + size.width);
+    maxY = Math.max(maxY, node.y + size.height);
+  }
+  return {
+    ...data,
+    layout: {
+      width: Math.max(targetW, maxX + opts.padding),
+      height: Math.max(targetH, maxY + opts.padding)
+    },
+    nodes: newNodes,
+    connectors: newConnectors
+  };
+}
+function createAutoLayout(input) {
+  const nodes = {};
+  for (const id of Object.keys(input.nodeData)) {
+    nodes[id] = { x: 0, y: 0, size: "m" };
+  }
+  const connectors = input.connectors.map((c) => ({
+    from: c.from,
+    to: c.to,
+    fromAnchor: c.fromAnchor || "right",
+    toAnchor: c.toAnchor || "left",
+    style: c.style,
+    ...c.curve ? { curve: c.curve } : {}
+  }));
+  const data = {
+    layout: { width: 800, height: 400 },
+    nodes,
+    nodeData: input.nodeData,
+    connectors,
+    connectorStyles: input.connectorStyles
+  };
+  return autoLayout(data, input.layout);
+}
+function resolveHoverEffects(input) {
+  if (input === false) return { enabled: false, dim: false, dimOpacity: 1, connectorDimOpacity: 1, lift: false, glow: false, highlightEdges: false };
+  const cfg = typeof input === "object" ? input : {};
+  const dimOpacity = cfg.dimOpacity ?? 0.45;
+  return {
+    enabled: true,
+    dim: cfg.dim ?? true,
+    dimOpacity,
+    connectorDimOpacity: dimOpacity * 0.56,
+    lift: cfg.lift ?? true,
+    glow: cfg.glow ?? true,
+    highlightEdges: cfg.highlightEdges ?? true
+  };
+}
+var NODE_SIZES2 = {
+  l: { width: 200, height: 68 },
+  m: { width: 140, height: 52 },
+  s: { width: 100, height: 40 },
+  xs: { width: 36, height: 52 }
+};
+function Node({ node, data, mode, themeColors, editable, onDragStart, hovered, dimmed, lift = true, glow = true, dimOpacity = 0.45, onMouseEnter, onMouseLeave, onClick }) {
+  const size = NODE_SIZES2[node.size];
+  const color = themeColors.palette[data.color] || themeColors.palette.zinc;
+  const Icon = LucideIcons[data.icon] || LucideIcons.Box;
+  const isLarge = node.size === "l";
+  const isSmall = node.size === "s";
+  const isXs = node.size === "xs";
+  const isLight = mode === "light";
+  const dragProps = editable ? {
+    onMouseDown: (e) => {
+      e.stopPropagation();
+      onDragStart?.(e);
+    }
+  } : {};
+  const editClass = editable ? "cursor-move hover:brightness-110" : "";
+  if (isXs) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `absolute flex flex-col items-center transition-all duration-200 ease-out ${editClass}`,
+        style: {
+          left: node.x,
+          top: node.y,
+          width: size.width,
+          zIndex: hovered ? 10 : editable ? 1 : void 0,
+          transform: hovered && lift ? "translateY(-2px)" : "none",
+          opacity: dimmed ? dimOpacity : 1,
+          cursor: onClick ? "pointer" : void 0
+        },
+        "data-arc-node": true,
+        onMouseEnter,
+        onMouseLeave,
+        onClick,
+        ...dragProps,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `
+          rounded-full w-9 h-9 flex items-center justify-center
+          ${isLight ? "bg-white border border-zinc-200/80 shadow-sm" : "bg-zinc-800/90 border border-zinc-700/60"}
+        `, children: /* @__PURE__ */ jsx(Icon, { className: `w-4 h-4 ${color.icon}`, strokeWidth: 1.5 }) }),
+          data.name && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `mt-1.5 text-center ${themeColors.text.muted} text-[8px] tracking-wide uppercase`,
+              style: { fontFamily: "ui-sans-serif, system-ui, sans-serif" },
+              children: data.name
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `
+        absolute rounded-lg border transition-all duration-200 ease-out
+        ${isLight ? "bg-white/90 border-zinc-200/70 shadow-sm" : "bg-zinc-900/80 border-zinc-700/50"}
+        ${editClass}
+      `,
+      style: {
+        left: node.x,
+        top: node.y,
+        width: size.width,
+        zIndex: hovered ? 10 : editable ? 1 : void 0,
+        backdropFilter: "blur(8px)",
+        transform: hovered && lift ? "translateY(-2px)" : "none",
+        boxShadow: hovered && glow ? `0 8px 24px -4px ${color.stroke}33, 0 0 0 1px ${color.stroke}22` : "none",
+        opacity: dimmed ? dimOpacity : 1,
+        cursor: onClick ? "pointer" : void 0
+      },
+      "data-arc-node": true,
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+      ...dragProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-0 left-3 right-3 h-[2px] rounded-full",
+            style: { backgroundColor: color.stroke, opacity: 0.6 }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: `${isLarge ? "px-4 py-3" : isSmall ? "px-2.5 py-1.5" : "px-3 py-2"}`, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                className: `flex-shrink-0 ${isLarge ? "w-4 h-4" : isSmall ? "w-3 h-3" : "w-3.5 h-3.5"}`,
+                style: { color: color.stroke },
+                strokeWidth: 1.5
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: `font-medium ${themeColors.text.primary} ${isLarge ? "text-[13px]" : isSmall ? "text-[10px]" : "text-[11px]"} leading-tight`, children: data.name })
+          ] }),
+          data.subtitle && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${themeColors.text.muted} ${isSmall ? "text-[8px] mt-0.5" : "text-[9px] mt-1"} leading-tight`,
+              style: { fontFamily: "ui-monospace, monospace" },
+              children: data.subtitle
+            }
+          ),
+          data.description && !isSmall && /* @__PURE__ */ jsx("div", { className: `mt-1 ${themeColors.text.secondary} text-[9px] leading-relaxed`, children: data.description })
+        ] })
+      ]
+    }
+  );
+}
+function getAnchorPoint(node, anchor) {
+  const size = NODE_SIZES2[node.size];
+  const gap = 6;
+  const anchors = {
+    left: { x: node.x - gap, y: node.y + size.height / 2 },
+    right: { x: node.x + size.width + gap, y: node.y + size.height / 2 },
+    top: { x: node.x + size.width / 2, y: node.y - gap },
+    bottom: { x: node.x + size.width / 2, y: node.y + size.height + gap },
+    bottomRight: { x: node.x + size.width + gap, y: node.y + size.height - 12 },
+    bottomLeft: { x: node.x - gap, y: node.y + size.height - 12 },
+    topRight: { x: node.x + size.width + gap, y: node.y + 12 },
+    topLeft: { x: node.x - gap, y: node.y + 12 }
+  };
+  return anchors[anchor];
+}
+function getAngle(from, to) {
+  return Math.atan2(to.y - from.y, to.x - from.x) * (180 / Math.PI);
+}
+function ConnectorPath({ connector, connectorIndex, nodes, styles, themeColors, highlighted, dimmed, dimOpacity = 0.25 }) {
+  const fromNode = nodes[connector.from];
+  const toNode = nodes[connector.to];
+  if (!fromNode || !toNode) return null;
+  const style = styles[connector.style] || { color: "zinc", strokeWidth: 2 };
+  const from = getAnchorPoint(fromNode, connector.fromAnchor);
+  const to = getAnchorPoint(toNode, connector.toAnchor);
+  const color = themeColors.palette[style.color]?.stroke || themeColors.palette.zinc.stroke;
+  const gradientId = `connector-gradient-${connectorIndex}`;
+  let path;
+  const isVertical = Math.abs(to.y - from.y) > Math.abs(to.x - from.x);
+  const labelAlign = style.labelAlign || (isVertical ? "right" : "center");
+  let labelPos;
+  let labelOffset = { x: 0, y: 0 };
+  let textAnchor = "middle";
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  if (connector.curve === "step") {
+    const midX = from.x + dx / 2;
+    path = `M ${from.x} ${from.y} L ${midX} ${from.y} L ${midX} ${to.y} L ${to.x} ${to.y}`;
+  } else {
+    const tension = 0.5;
+    if (isVertical) {
+      const cpy = dy * tension;
+      path = `M ${from.x} ${from.y} C ${from.x} ${from.y + cpy}, ${to.x} ${to.y - cpy}, ${to.x} ${to.y}`;
+    } else {
+      const cpx = dx * tension;
+      path = `M ${from.x} ${from.y} C ${from.x + cpx} ${from.y}, ${to.x - cpx} ${to.y}, ${to.x} ${to.y}`;
+    }
+  }
+  labelPos = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
+  if (isVertical) {
+    if (labelAlign === "right") {
+      labelOffset = { x: 8, y: 4 };
+      textAnchor = "start";
+    } else if (labelAlign === "left") {
+      labelOffset = { x: -8, y: 4 };
+      textAnchor = "end";
+    } else {
+      labelOffset = { x: 0, y: -8 };
+      textAnchor = "middle";
+    }
+  } else {
+    labelOffset = { x: 0, y: -8 };
+    textAnchor = "middle";
+  }
+  const angle = getAngle(from, to);
+  const arrowSize = 6;
+  return /* @__PURE__ */ jsxs("g", { style: {
+    opacity: dimmed ? dimOpacity : 1,
+    transition: "opacity 200ms ease-out"
+  }, children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+      "linearGradient",
+      {
+        id: gradientId,
+        x1: from.x,
+        y1: from.y,
+        x2: to.x,
+        y2: to.y,
+        gradientUnits: "userSpaceOnUse",
+        children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: highlighted ? 0.6 : 0.4 }),
+          /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: color, stopOpacity: highlighted ? 0.9 : 0.7 }),
+          /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: color, stopOpacity: highlighted ? 0.9 : 0.7 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: highlighted ? 0.6 : 0.4 })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: path,
+        fill: "none",
+        stroke: `url(#${gradientId})`,
+        strokeWidth: highlighted ? style.strokeWidth + 1 : style.strokeWidth,
+        strokeDasharray: style.dashed ? "6 3" : void 0,
+        style: { transition: "stroke-width 200ms ease-out" }
+      }
+    ),
+    /* @__PURE__ */ jsx("g", { transform: `translate(${to.x}, ${to.y}) rotate(${angle})`, children: /* @__PURE__ */ jsx(
+      "polygon",
+      {
+        points: `0,0 ${-arrowSize},-${arrowSize / 2.5} ${-arrowSize},${arrowSize / 2.5}`,
+        fill: color
+      }
+    ) }),
+    style.label && /* @__PURE__ */ jsxs("g", { style: { transition: "opacity 200ms ease-out" }, children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: labelPos.x + labelOffset.x - (textAnchor === "middle" ? style.label.length * 3.2 : textAnchor === "end" ? style.label.length * 6.4 : 0) - 4,
+          y: labelPos.y + labelOffset.y - 10,
+          width: style.label.length * 6.4 + 8,
+          height: 14,
+          rx: 4,
+          fill: color,
+          opacity: highlighted ? 0.3 : 0.15
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: labelPos.x + labelOffset.x,
+          y: labelPos.y + labelOffset.y,
+          textAnchor,
+          fill: color,
+          className: "text-[9px] font-mono",
+          style: { fontFamily: "ui-monospace, monospace", fontWeight: highlighted ? 700 : 500 },
+          children: style.label
+        }
+      )
+    ] })
+  ] });
+}
+var ZOOM_LEVELS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+function ZoomControls({ zoom, onZoomIn, onZoomOut, onReset, mode }) {
+  const { ZoomIn, ZoomOut } = LucideIcons;
+  const isLight = mode === "light";
+  return /* @__PURE__ */ jsxs("div", { className: `absolute bottom-3 right-3 flex items-center backdrop-blur-sm rounded-md z-10 ${isLight ? "bg-white/90 border border-zinc-200 shadow-sm" : "bg-zinc-900/90 border border-zinc-700"}`, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onZoomOut,
+        disabled: zoom <= ZOOM_LEVELS[0],
+        className: `p-1 disabled:opacity-30 disabled:cursor-not-allowed transition-colors rounded-l-md ${isLight ? "hover:bg-zinc-100" : "hover:bg-zinc-700"}`,
+        title: "Zoom out",
+        children: /* @__PURE__ */ jsx(ZoomOut, { className: `w-3 h-3 ${isLight ? "text-zinc-500" : "text-zinc-400"}` })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onReset,
+        className: `px-1.5 py-1 text-[9px] font-mono transition-colors min-w-[36px] ${isLight ? "text-zinc-500 hover:bg-zinc-100 border-x border-zinc-200" : "text-zinc-400 hover:bg-zinc-700 border-x border-zinc-700"}`,
+        title: "Reset zoom",
+        children: [
+          Math.round(zoom * 100),
+          "%"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onZoomIn,
+        disabled: zoom >= ZOOM_LEVELS[ZOOM_LEVELS.length - 1],
+        className: `p-1 disabled:opacity-30 disabled:cursor-not-allowed transition-colors rounded-r-md ${isLight ? "hover:bg-zinc-100" : "hover:bg-zinc-700"}`,
+        title: "Zoom in",
+        children: /* @__PURE__ */ jsx(ZoomIn, { className: `w-3 h-3 ${isLight ? "text-zinc-500" : "text-zinc-400"}` })
+      }
+    )
+  ] });
+}
+function generateSource(data) {
+  const clean = {
+    id: data.id,
+    layout: data.layout,
+    nodes: data.nodes,
+    nodeData: data.nodeData,
+    connectors: data.connectors,
+    connectorStyles: data.connectorStyles
+  };
+  const json = JSON.stringify(clean, null, 2).replace(/"([^"]+)":/g, "$1:").replace(/"/g, "'");
+  return `import type { ArcDiagramData } from '@arach/arc'
+
+const diagram: ArcDiagramData = ${json}
+
+export default diagram
+`;
+}
+function ArcSourceView({ source, mode }) {
+  const isLight = mode === "light";
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(source).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    });
+  }, [source]);
+  const { Copy, Check } = LucideIcons;
+  return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 overflow-auto z-[5]", style: {
+    backgroundColor: isLight ? "rgba(250,250,250,0.97)" : "rgba(9,9,11,0.97)"
+  }, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-1 px-4 pt-3", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleCopy,
+        className: `p-1 rounded transition-colors ${isLight ? "hover:bg-zinc-200/60 text-zinc-400" : "hover:bg-zinc-700/60 text-zinc-500"}`,
+        title: copied ? "Copied!" : "Copy",
+        children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-emerald-500" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3 h-3" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: `px-5 pb-5 pt-2 text-[11px] leading-relaxed font-mono whitespace-pre ${isLight ? "text-zinc-600" : "text-zinc-400"}`,
+        style: { fontFamily: '"JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace', tabSize: 2 },
+        children: source
+      }
+    )
+  ] });
+}
+function ViewToggle({ showArc, onToggle, mode }) {
+  const isLight = mode === "light";
+  const { Braces, Layers } = LucideIcons;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: onToggle,
+      className: `absolute top-3 right-3 flex items-center gap-1.5 px-2 py-1 rounded-md backdrop-blur-sm z-10 text-[10px] font-mono transition-colors ${isLight ? "bg-white/90 border border-zinc-200 shadow-sm text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50" : "bg-zinc-900/90 border border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800"}`,
+      title: showArc ? "Back to diagram" : "View source",
+      children: showArc ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Layers, { className: "w-3 h-3" }),
+        " Diagram"
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Braces, { className: "w-3 h-3" }),
+        " Source"
+      ] })
+    }
+  );
+}
+function AutoLayoutButton({ active, onToggle, mode }) {
+  const isLight = mode === "light";
+  const { Wand2 } = LucideIcons;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: onToggle,
+      className: `flex items-center gap-1.5 px-2 py-1 rounded-md backdrop-blur-sm text-[10px] font-mono transition-colors ${active ? isLight ? "bg-violet-50 border border-violet-200 text-violet-600 shadow-sm" : "bg-violet-950/80 border border-violet-700 text-violet-400" : isLight ? "bg-white/90 border border-zinc-200 shadow-sm text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50" : "bg-zinc-900/90 border border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800"}`,
+      title: active ? "Reset to original layout" : "Auto-layout nodes",
+      children: [
+        /* @__PURE__ */ jsx(Wand2, { className: "w-3 h-3" }),
+        " Auto"
+      ]
+    }
+  );
+}
+function EditButton({ url, mode }) {
+  const isLight = mode === "light";
+  const { Pencil } = LucideIcons;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: `flex items-center gap-1.5 px-2 py-1 rounded-md backdrop-blur-sm text-[10px] font-mono transition-colors no-underline ${isLight ? "bg-white/90 border border-zinc-200 shadow-sm text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50" : "bg-zinc-900/90 border border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800"}`,
+      title: "Open in Arc editor",
+      children: [
+        /* @__PURE__ */ jsx(Pencil, { className: "w-3 h-3" }),
+        " Edit"
+      ]
+    }
+  );
+}
+function ArcDiagram({ data, className = "", interactive = true, mode = "dark", theme = "default", showArcToggle = true, showAutoLayout = false, editable = false, editorUrl, editorMeta, hoverEffects, onNodeHover }) {
+  const isLight = mode === "light";
+  const [showArc, setShowArc] = useState(false);
+  const [useAutoLayout, setUseAutoLayout] = useState(false);
+  const [hoveredNodeId, setHoveredNodeId] = useState(null);
+  const [lockedNodeId, setLockedNodeId] = useState(null);
+  const fx = useMemo(() => resolveHoverEffects(hoverEffects), [hoverEffects]);
+  const activeNodeId = fx.enabled ? lockedNodeId ?? hoveredNodeId : null;
+  const handleNodeClick = useCallback((nodeId) => {
+    setLockedNodeId((prev) => {
+      const next = prev === nodeId ? null : nodeId;
+      onNodeHover?.(next);
+      return next;
+    });
+  }, [onNodeHover]);
+  const baseData = useMemo(
+    () => useAutoLayout ? autoLayout(data) : data,
+    [data, useAutoLayout]
+  );
+  const storageKey = editable && data.id ? `arc-drag-${data.id}` : null;
+  const [draggedPositions, setDraggedPositions] = useState(() => {
+    if (!storageKey) return {};
+    try {
+      const saved = localStorage.getItem(storageKey);
+      return saved ? JSON.parse(saved) : {};
+    } catch {
+      return {};
+    }
+  });
+  const [draggingNode, setDraggingNode] = useState(null);
+  React.useEffect(() => {
+    if (!storageKey) return;
+    if (Object.keys(draggedPositions).length === 0) {
+      localStorage.removeItem(storageKey);
+    } else {
+      localStorage.setItem(storageKey, JSON.stringify(draggedPositions));
+    }
+  }, [draggedPositions, storageKey]);
+  React.useEffect(() => {
+    setDraggedPositions({});
+  }, [useAutoLayout]);
+  const activeData = useMemo(() => {
+    if (Object.keys(draggedPositions).length === 0) return baseData;
+    const mergedNodes = { ...baseData.nodes };
+    for (const [id2, pos] of Object.entries(draggedPositions)) {
+      if (mergedNodes[id2]) {
+        mergedNodes[id2] = { ...mergedNodes[id2], x: pos.x, y: pos.y };
+      }
+    }
+    return { ...baseData, nodes: mergedNodes };
+  }, [baseData, draggedPositions]);
+  const { id, layout, nodes, nodeData, connectors, connectorStyles } = activeData;
+  const themeData = getTheme(theme);
+  const themeColors = isLight ? themeData.light : themeData.dark;
+  const sourceCode = useMemo(() => generateSource(activeData), [activeData]);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [isPanning, setIsPanning] = useState(false);
+  const [panStart, setPanStart] = useState({ x: 0, y: 0 });
+  const handleZoomIn = useCallback(() => {
+    setZoom((z) => {
+      const idx = ZOOM_LEVELS.findIndex((l) => l >= z);
+      return ZOOM_LEVELS[Math.min(idx + 1, ZOOM_LEVELS.length - 1)];
+    });
+  }, []);
+  const handleZoomOut = useCallback(() => {
+    setZoom((z) => {
+      const idx = ZOOM_LEVELS.findIndex((l) => l >= z);
+      return ZOOM_LEVELS[Math.max(idx - 1, 0)];
+    });
+  }, []);
+  const handleReset = useCallback(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+  const handleWheel = useCallback((e) => {
+    if (!interactive) return;
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault();
+      if (e.deltaY < 0) handleZoomIn();
+      else handleZoomOut();
+    }
+  }, [interactive, handleZoomIn, handleZoomOut]);
+  const handleMouseDown = useCallback((e) => {
+    if (!interactive || draggingNode) return;
+    if (lockedNodeId && e.target.closest("[data-arc-node]") === null) {
+      setLockedNodeId(null);
+      onNodeHover?.(null);
+    }
+    setIsPanning(true);
+    setPanStart({ x: e.clientX - pan.x, y: e.clientY - pan.y });
+  }, [interactive, pan, draggingNode, lockedNodeId, onNodeHover]);
+  const handleMouseMove = useCallback((e) => {
+    if (draggingNode) {
+      const dx = (e.clientX - draggingNode.startX) / zoom;
+      const dy = (e.clientY - draggingNode.startY) / zoom;
+      setDraggedPositions((prev) => ({
+        ...prev,
+        [draggingNode.id]: {
+          x: Math.round(draggingNode.nodeX + dx),
+          y: Math.round(draggingNode.nodeY + dy)
+        }
+      }));
+      return;
+    }
+    if (!isPanning) return;
+    setPan({
+      x: e.clientX - panStart.x,
+      y: e.clientY - panStart.y
+    });
+  }, [isPanning, panStart, draggingNode, zoom]);
+  const handleMouseUp = useCallback(() => {
+    setIsPanning(false);
+    setDraggingNode(null);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `rounded-2xl overflow-hidden relative ${themeColors.background.container} ${className}`,
+      onWheel: handleWheel,
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      onMouseLeave: handleMouseUp,
+      style: { cursor: draggingNode ? "grabbing" : interactive ? isPanning ? "grabbing" : "grab" : "default" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative transition-transform duration-150 ease-out",
+            style: {
+              width: layout.width,
+              height: layout.height,
+              minWidth: layout.width,
+              transform: `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`,
+              transformOrigin: "top left"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute",
+                  style: {
+                    top: -2e3,
+                    left: -2e3,
+                    width: layout.width + 4e3,
+                    height: layout.height + 4e3,
+                    backgroundImage: `radial-gradient(circle, ${themeColors.background.grid.color} 1px, transparent 1px)`,
+                    backgroundSize: `${themeColors.background.grid.size}px ${themeColors.background.grid.size}px`,
+                    opacity: themeColors.background.grid.opacity
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "absolute inset-0 w-full h-full pointer-events-none",
+                  viewBox: `0 0 ${layout.width} ${layout.height}`,
+                  children: connectors.map((conn, i) => {
+                    const isConnected = activeNodeId != null && (conn.from === activeNodeId || conn.to === activeNodeId);
+                    return /* @__PURE__ */ jsx(
+                      ConnectorPath,
+                      {
+                        connector: conn,
+                        connectorIndex: i,
+                        nodes,
+                        styles: connectorStyles,
+                        themeColors,
+                        highlighted: fx.highlightEdges && isConnected,
+                        dimmed: fx.dim && activeNodeId != null && !isConnected,
+                        dimOpacity: fx.connectorDimOpacity
+                      },
+                      i
+                    );
+                  })
+                }
+              ),
+              Object.entries(nodes).map(([nodeId, node]) => {
+                const isActive = activeNodeId === nodeId;
+                return /* @__PURE__ */ jsx(
+                  Node,
+                  {
+                    node,
+                    data: nodeData[nodeId],
+                    mode,
+                    themeColors,
+                    editable,
+                    onDragStart: editable ? (e) => {
+                      setDraggingNode({ id: nodeId, startX: e.clientX, startY: e.clientY, nodeX: node.x, nodeY: node.y });
+                    } : void 0,
+                    hovered: isActive,
+                    dimmed: fx.dim && activeNodeId != null && !isActive,
+                    lift: fx.lift,
+                    glow: fx.glow,
+                    dimOpacity: fx.dimOpacity,
+                    onMouseEnter: () => {
+                      if (!lockedNodeId) {
+                        setHoveredNodeId(nodeId);
+                        onNodeHover?.(nodeId);
+                      }
+                    },
+                    onMouseLeave: () => {
+                      if (!lockedNodeId) {
+                        setHoveredNodeId(null);
+                        onNodeHover?.(null);
+                      }
+                    },
+                    onClick: () => handleNodeClick(nodeId)
+                  },
+                  nodeId
+                );
+              })
+            ]
+          }
+        ),
+        showArc && /* @__PURE__ */ jsx(ArcSourceView, { source: sourceCode, mode }),
+        showArcToggle && /* @__PURE__ */ jsx(
+          ViewToggle,
+          {
+            showArc,
+            onToggle: () => setShowArc((s) => !s),
+            mode
+          }
+        ),
+        !showArc && /* @__PURE__ */ jsxs("div", { className: "absolute top-3 left-3 flex items-center gap-1.5 z-10", children: [
+          showAutoLayout && /* @__PURE__ */ jsx(
+            AutoLayoutButton,
+            {
+              active: useAutoLayout,
+              onToggle: () => setUseAutoLayout((v) => !v),
+              mode
+            }
+          ),
+          editable && editorUrl && /* @__PURE__ */ jsx(EditButton, { url: `${editorUrl}#data=${btoa(JSON.stringify({ ...activeData, _viewport: editorMeta?.viewport, _theme: editorMeta?.theme, _mode: editorMeta?.mode }))}`, mode })
+        ] }),
+        id && /* @__PURE__ */ jsx("div", { className: `absolute bottom-3 left-3 font-mono text-[9px] tracking-wider z-10 ${themeColors.text.muted}`, children: id }),
+        interactive && !showArc && /* @__PURE__ */ jsx(
+          ZoomControls,
+          {
+            zoom,
+            onZoomIn: handleZoomIn,
+            onZoomOut: handleZoomOut,
+            onReset: handleReset,
+            mode
+          }
+        )
+      ]
+    }
+  );
+}
+var ArcDiagram_default = ArcDiagram;
+
+// src/mermaid/sequence/parseSequence.ts
+var SUPPORTED_FRAGMENTS = /* @__PURE__ */ new Set([
+  "alt",
+  "else",
+  "opt",
+  "loop",
+  "par",
+  "critical",
+  "break",
+  "rect"
+]);
+var UNSUPPORTED_LINE_START = /^(activate|deactivate|autonumber|box|create|destroy)\b/i;
+function range(line) {
+  return { startLine: line, endLine: line };
+}
+function sanitizeId(raw) {
+  return raw.replace(/[^a-zA-Z0-9_-]/g, "_");
+}
+function splitStructuredText(raw) {
+  return raw.split(/<br\s*\/?\s*>/gi).map((p) => p.trim()).filter((p) => p.length > 0);
+}
+function stripQuotes(s) {
+  const t = s.trim();
+  if (t.startsWith('"') && t.endsWith('"') || t.startsWith("'") && t.endsWith("'")) {
+    return t.slice(1, -1);
+  }
+  return t;
+}
+function parseSequenceSource(source, baseLine = 1) {
+  const diagnostics = [];
+  const lines = source.replace(/\r\n?/g, "\n").split("\n");
+  const declaration = lines[0]?.trim() || "sequenceDiagram";
+  const participants = [];
+  const participantIndex2 = /* @__PURE__ */ new Map();
+  const events = [];
+  let order = 0;
+  let eventSeq = 0;
+  let fragmentSeq = 0;
+  const fragStack = [];
+  const ensureParticipant = (rawId, label, kind, lineNo) => {
+    const existingIndex = participantIndex2.get(rawId);
+    if (existingIndex !== void 0) {
+      const existing = participants[existingIndex];
+      if (label && existing && (existing.label === rawId || existing.label === existing.id)) {
+        existing.label = label;
+      }
+      if (existing && kind === "actor") existing.kind = "actor";
+      return existing?.id ?? sanitizeId(rawId);
+    }
+    const baseId = sanitizeId(rawId) || `participant_${participants.length + 1}`;
+    let id = baseId;
+    if (participants.some((p2) => p2.id === baseId)) {
+      diagnostics.push({
+        severity: "error",
+        code: "id-collision",
+        message: `Participant id collision after sanitization: "${rawId}" \u2192 "${baseId}"`,
+        range: range(lineNo)
+      });
+      let suffix = 2;
+      while (participants.some((p2) => p2.id === `${baseId}_${suffix}`)) {
+        suffix += 1;
+      }
+      id = `${baseId}_${suffix}`;
+    }
+    const p = {
+      id,
+      label: label ?? rawId,
+      kind,
+      order: participants.length,
+      range: range(lineNo)
+    };
+    participantIndex2.set(rawId, participants.length);
+    participants.push(p);
+    return id;
+  };
+  for (let i = 1; i < lines.length; i++) {
+    const lineNo = baseLine + i;
+    const rawLine = lines[i];
+    const line = rawLine.trim();
+    if (!line || line.startsWith("%%")) continue;
+    const pMatch = line.match(
+      /^(participant|actor)\s+(\S+)(?:\s+as\s+(.+))?$/i
+    );
+    if (pMatch) {
+      const kind = pMatch[1].toLowerCase();
+      const rawId = pMatch[2];
+      const alias = pMatch[3] ? stripQuotes(pMatch[3]) : void 0;
+      ensureParticipant(rawId, alias, kind, lineNo);
+      continue;
+    }
+    const noteMatch = line.match(
+      /^Note\s+(left of|right of|over)\s+([^:]+)\s*:\s*(.+)$/i
+    );
+    if (noteMatch) {
+      const placementRaw = noteMatch[1].toLowerCase();
+      const placement = placementRaw === "left of" ? "left" : placementRaw === "right of" ? "right" : "over";
+      const targetRaw = noteMatch[2].trim();
+      const text = splitStructuredText(noteMatch[3]);
+      const targetIds = targetRaw.split(/\s*,\s*/).map((t) => {
+        const cleaned = stripQuotes(t.trim());
+        return ensureParticipant(cleaned, void 0, "participant", lineNo);
+      });
+      events.push({
+        type: "note",
+        id: `note-${++eventSeq}`,
+        placement,
+        participants: targetIds,
+        text: text.length ? text : [noteMatch[3].trim()],
+        order: order++,
+        range: range(lineNo)
+      });
+      continue;
+    }
+    const msgMatch = line.match(
+      /^(\S+?)\s*(-->>|->>|-->|->|--\)|-\)|--x|-x)\s*([+-])?\s*(\S+?)\s*:\s*(.+)$/
+    );
+    if (msgMatch) {
+      const fromRaw = msgMatch[1];
+      const arrowTok = msgMatch[2];
+      const actMark = msgMatch[3];
+      const toRaw = msgMatch[4];
+      const labelRaw = msgMatch[5];
+      const from = ensureParticipant(fromRaw, void 0, "participant", lineNo);
+      const to = ensureParticipant(toRaw, void 0, "participant", lineNo);
+      const dashed = arrowTok.startsWith("--");
+      const open = arrowTok.endsWith(")") || arrowTok.endsWith("x");
+      events.push({
+        type: "message",
+        id: `msg-${++eventSeq}`,
+        from,
+        to,
+        label: splitStructuredText(labelRaw).length ? splitStructuredText(labelRaw) : [labelRaw.trim()],
+        line: dashed ? "dashed" : "solid",
+        arrow: open ? "open" : "filled",
+        activateTarget: actMark === "+",
+        deactivateTarget: actMark === "-",
+        order: order++,
+        range: range(lineNo)
+      });
+      continue;
+    }
+    const fragMatch = line.match(
+      /^(alt|else|opt|loop|par|critical|break|rect)(?:\s+(.*))?$/i
+    );
+    if (fragMatch) {
+      const keyword = fragMatch[1].toLowerCase();
+      const label = fragMatch[2]?.trim() || void 0;
+      if (keyword === "else") {
+        const parent = fragStack[fragStack.length - 1];
+        if (!parent) {
+          diagnostics.push({
+            severity: "error",
+            code: "orphan-else",
+            message: "`else` without matching fragment",
+            range: range(lineNo)
+          });
+          continue;
+        }
+        events.push({
+          type: "fragmentElse",
+          id: `frag-else-${++fragmentSeq}`,
+          fragmentId: parent.id,
+          label,
+          depth: parent.depth,
+          order: order++,
+          range: range(lineNo)
+        });
+        continue;
+      }
+      const kind = keyword;
+      if (!SUPPORTED_FRAGMENTS.has(keyword)) {
+        diagnostics.push({
+          severity: "unsupported",
+          code: "unsupported-fragment",
+          message: `Fragment kind "${keyword}" is not rendered yet`,
+          capability: keyword,
+          range: range(lineNo)
+        });
+      }
+      if (kind !== "alt" && kind !== "opt" && kind !== "loop") {
+        diagnostics.push({
+          severity: "unsupported",
+          code: "partial-fragment",
+          message: `Fragment "${kind}" is parsed but has limited visual treatment`,
+          capability: kind,
+          range: range(lineNo)
+        });
+      }
+      const id = `frag-${++fragmentSeq}`;
+      const depth = fragStack.length;
+      fragStack.push({ id, kind, depth });
+      events.push({
+        type: "fragmentStart",
+        id,
+        kind,
+        label,
+        depth,
+        order: order++,
+        range: range(lineNo)
+      });
+      continue;
+    }
+    if (/^end$/i.test(line)) {
+      const frame = fragStack.pop();
+      if (!frame) {
+        diagnostics.push({
+          severity: "warning",
+          code: "orphan-end",
+          message: "`end` without matching fragment",
+          range: range(lineNo)
+        });
+        continue;
+      }
+      events.push({
+        type: "fragmentEnd",
+        id: `frag-end-${++fragmentSeq}`,
+        fragmentId: frame.id,
+        depth: frame.depth,
+        order: order++,
+        range: range(lineNo)
+      });
+      continue;
+    }
+    if (UNSUPPORTED_LINE_START.test(line)) {
+      const cap = line.split(/\s/)[0].toLowerCase();
+      diagnostics.push({
+        severity: "unsupported",
+        code: "unsupported-construct",
+        message: `Unsupported sequence construct: ${cap}`,
+        capability: cap,
+        range: range(lineNo)
+      });
+      continue;
+    }
+    diagnostics.push({
+      severity: "warning",
+      code: "unrecognized-line",
+      message: `Skipped unrecognized line: "${line.substring(0, 80)}"`,
+      range: range(lineNo)
+    });
+  }
+  while (fragStack.length) {
+    const frame = fragStack.pop();
+    diagnostics.push({
+      severity: "error",
+      code: "unclosed-fragment",
+      message: `Unclosed fragment "${frame.kind}" (${frame.id})`
+    });
+  }
+  return {
+    document: {
+      family: "sequence",
+      declaration,
+      participants,
+      events
+    },
+    diagnostics
+  };
+}
+
+// src/mermaid/parseMermaid.ts
+function normalizeSource(source) {
+  return source.replace(/\r\n?/g, "\n");
+}
+function findDeclaration(lines) {
+  return lines.findIndex((line) => {
+    const trimmed = line.trim();
+    return trimmed.length > 0 && !trimmed.startsWith("%%");
+  });
+}
+function parseMermaid(source) {
+  const normalized = normalizeSource(source);
+  const lines = normalized.split("\n");
+  const declarationIndex = findDeclaration(lines);
+  if (declarationIndex === -1) {
+    return {
+      document: null,
+      diagnostics: [
+        {
+          severity: "error",
+          code: "no-declaration",
+          message: "Mermaid source does not contain a diagram declaration"
+        }
+      ],
+      source: normalized
+    };
+  }
+  const body = lines.slice(declarationIndex).join("\n").trim();
+  const firstLine = body.split("\n")[0].trim();
+  const baseLine = declarationIndex + 1;
+  const diagnostics = [];
+  if (/^sequenceDiagram\b/i.test(firstLine)) {
+    const result = parseSequenceSource(body, baseLine);
+    return {
+      document: result.document,
+      diagnostics: result.diagnostics,
+      source: normalized
+    };
+  }
+  if (/^flowchart\b/i.test(firstLine) || /^graph\b/i.test(firstLine)) {
+    const document = {
+      family: "flowchart",
+      declaration: firstLine.split(/\s/)[0],
+      raw: body
+    };
+    diagnostics.push({
+      severity: "unsupported",
+      code: "native-renderer-pending",
+      message: "Flowchart native rendering is not available yet",
+      capability: "flowchart-native-renderer"
+    });
+    return { document, diagnostics, source: normalized };
+  }
+  if (/^stateDiagram-v2\b/i.test(firstLine) || /^stateDiagram\b/i.test(firstLine)) {
+    const document = {
+      family: "state",
+      declaration: firstLine.split(/\s/)[0],
+      raw: body
+    };
+    diagnostics.push({
+      severity: "unsupported",
+      code: "native-renderer-pending",
+      message: "State diagram native rendering is not available yet",
+      capability: "state-native-renderer"
+    });
+    return { document, diagnostics, source: normalized };
+  }
+  return {
+    document: null,
+    diagnostics: [
+      {
+        severity: "error",
+        code: "unrecognized-type",
+        message: `Unrecognized diagram type: "${firstLine}"`,
+        capability: firstLine.split(/\s/)[0]
+      }
+    ],
+    source: normalized
+  };
+}
+
+// src/mermaid/sequence/layout.ts
+var DEFAULT_WIDTH = 960;
+var PADDING_X = 22;
+var PADDING_Y = 16;
+var HEADER_HEIGHT = 46;
+var HEADER_BOX_W = 102;
+var HEADER_BOX_H = 34;
+var MIN_PARTICIPANT_GAP = 112;
+var ROW_GAP = 7;
+var MESSAGE_MIN_HEIGHT = 24;
+var NOTE_PAD_Y = 8;
+var NOTE_PAD_X = 10;
+var FRAGMENT_PAD = 9;
+var FRAGMENT_LABEL_H = 18;
+var LANE_SEP = 6;
+var CHAR_WIDTH = 6.8;
+var LINE_HEIGHT = 14;
+function estimateTextWidth(text, maxWidth) {
+  if (!text) return { lines: [""], height: LINE_HEIGHT, width: 0 };
+  const words = text.split(/\s+/);
+  const lines = [];
+  let current = "";
+  for (const word of words) {
+    const next = current ? `${current} ${word}` : word;
+    if (next.length * CHAR_WIDTH > maxWidth && current) {
+      lines.push(current);
+      current = word;
+    } else {
+      current = next;
+    }
+  }
+  if (current) lines.push(current);
+  if (lines.length === 0) lines.push("");
+  const width = Math.min(
+    maxWidth,
+    Math.max(...lines.map((l) => l.length * CHAR_WIDTH))
+  );
+  return { lines, height: lines.length * LINE_HEIGHT, width };
+}
+function estimateLabelBlock(label, maxWidth) {
+  if (label.length === 0) return { height: LINE_HEIGHT, width: 0, lines: [""] };
+  const allLines = [];
+  let maxW = 0;
+  let totalH = 0;
+  for (const segment of label) {
+    const est = estimateTextWidth(segment, maxWidth);
+    allLines.push(...est.lines);
+    maxW = Math.max(maxW, est.width);
+    totalH += est.height;
+  }
+  return { height: Math.max(LINE_HEIGHT, totalH), width: maxW, lines: allLines };
+}
+function participantIndex(doc, id) {
+  const idx = doc.participants.findIndex((p) => p.id === id);
+  return idx >= 0 ? idx : 0;
+}
+function spanX(participantX, ids, boxHalf = HEADER_BOX_W / 2) {
+  if (ids.length === 0) {
+    const xs2 = Object.values(participantX);
+    const min2 = Math.min(...xs2);
+    const max2 = Math.max(...xs2);
+    return { x: min2 - boxHalf, width: max2 - min2 + boxHalf * 2 };
+  }
+  const xs = ids.map((id) => participantX[id] ?? 0);
+  const min = Math.min(...xs);
+  const max = Math.max(...xs);
+  return { x: min - boxHalf, width: Math.max(boxHalf * 2, max - min + boxHalf * 2) };
+}
+function layoutSequence(document, options = {}) {
+  const targetWidth = options.width ?? DEFAULT_WIDTH;
+  const maxLabelWidth = options.maxLabelWidth ?? 160;
+  const n = document.participants.length || 1;
+  const usable = targetWidth - PADDING_X * 2;
+  const gap = Math.max(MIN_PARTICIPANT_GAP, usable / Math.max(n, 1));
+  const contentWidth = Math.max(targetWidth, PADDING_X * 2 + gap * (n - 1) + HEADER_BOX_W);
+  const startX = PADDING_X + HEADER_BOX_W / 2 + Math.max(0, (contentWidth - PADDING_X * 2 - gap * (n - 1) - HEADER_BOX_W) / 2);
+  const participantX = {};
+  document.participants.forEach((p, i) => {
+    participantX[p.id] = startX + i * gap;
+  });
+  const rows = [];
+  for (const event of document.events) {
+    if (event.type === "message") {
+      const est = estimateLabelBlock(event.label, maxLabelWidth);
+      const self = event.from === event.to;
+      const h = Math.max(MESSAGE_MIN_HEIGHT, est.height + (self ? 24 : 12)) + ROW_GAP;
+      rows.push({ kind: "message", event, height: h, order: event.order });
+    } else if (event.type === "note") {
+      const est = estimateLabelBlock(event.text, maxLabelWidth + 40);
+      const h = Math.max(36, est.height + NOTE_PAD_Y * 2) + ROW_GAP;
+      rows.push({ kind: "note", event, height: h, order: event.order });
+    } else if (event.type === "fragmentStart") {
+      rows.push({
+        kind: "fragmentStart",
+        event,
+        height: FRAGMENT_LABEL_H + FRAGMENT_PAD,
+        order: event.order
+      });
+    } else if (event.type === "fragmentElse") {
+      rows.push({
+        kind: "fragmentElse",
+        event,
+        height: FRAGMENT_LABEL_H + LANE_SEP,
+        order: event.order
+      });
+    } else if (event.type === "fragmentEnd") {
+      rows.push({
+        kind: "fragmentEnd",
+        event,
+        height: FRAGMENT_PAD,
+        order: event.order
+      });
+    }
+  }
+  const headerY = PADDING_Y;
+  let y = headerY + HEADER_HEIGHT + 12;
+  const rowTops = [];
+  const rowHeights = [];
+  const orderY = /* @__PURE__ */ new Map();
+  const orderH = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    rowTops.push(y);
+    rowHeights.push(row.height);
+    orderY.set(row.order, y);
+    orderH.set(row.order, row.height);
+    y += row.height;
+  }
+  const contentBottom = y + PADDING_Y;
+  const metrics = {
+    width: contentWidth,
+    height: contentBottom,
+    paddingX: PADDING_X,
+    paddingY: PADDING_Y,
+    headerHeight: HEADER_HEIGHT,
+    participantGap: gap,
+    participantX,
+    rowTops,
+    rowHeights
+  };
+  const messages = [];
+  const notes = [];
+  for (const row of rows) {
+    if (row.kind === "message" && row.event?.type === "message") {
+      const ev = row.event;
+      const fromX = participantX[ev.from] ?? startX;
+      const toX = participantX[ev.to] ?? startX;
+      const top = orderY.get(ev.order) ?? 0;
+      const h = orderH.get(ev.order) ?? MESSAGE_MIN_HEIGHT;
+      messages.push({
+        event: ev,
+        y: top + h / 2 - ROW_GAP / 2,
+        fromX,
+        toX,
+        self: ev.from === ev.to
+      });
+    }
+    if (row.kind === "note" && row.event?.type === "note") {
+      const ev = row.event;
+      const top = orderY.get(ev.order) ?? 0;
+      const h = (orderH.get(ev.order) ?? 36) - ROW_GAP;
+      const spanIds = ev.placement === "over" ? expandParticipantRange(document, ev.participants) : ev.participants;
+      const { x, width } = spanX(participantX, spanIds);
+      const est = estimateLabelBlock(ev.text, Math.max(80, width - NOTE_PAD_X * 2));
+      notes.push({
+        event: ev,
+        x,
+        y: top,
+        width: Math.max(width, est.width + NOTE_PAD_X * 2),
+        height: h
+      });
+    }
+  }
+  const fragments = layoutFragments(document, rows, orderY, orderH, participantX);
+  return { metrics, messages, notes, fragments };
+}
+function expandParticipantRange(doc, ids) {
+  if (ids.length <= 1) return ids;
+  const a = participantIndex(doc, ids[0]);
+  const b = participantIndex(doc, ids[ids.length - 1]);
+  const lo = Math.min(a, b);
+  const hi = Math.max(a, b);
+  return doc.participants.slice(lo, hi + 1).map((p) => p.id);
+}
+function layoutFragments(document, rows, orderY, orderH, participantX, _startX) {
+  const fragments = [];
+  const stack = [];
+  const completed = [];
+  for (const row of rows) {
+    if (row.kind === "fragmentStart" && row.event?.type === "fragmentStart") {
+      stack.push({ start: row.event, elses: [] });
+    } else if (row.kind === "fragmentElse" && row.event?.type === "fragmentElse") {
+      const top = stack[stack.length - 1];
+      if (top) top.elses.push(row.event);
+    } else if (row.kind === "fragmentEnd" && row.event?.type === "fragmentEnd") {
+      const frame = stack.pop();
+      if (frame) {
+        frame.endOrder = row.event.order;
+        completed.push(frame);
+      }
+    }
+  }
+  const allIds = document.participants.map((p) => p.id);
+  const { x, width } = spanX(participantX, allIds, HEADER_BOX_W / 2 + 8);
+  for (const frame of completed) {
+    const startY = orderY.get(frame.start.order) ?? 0;
+    const endOrder = frame.endOrder ?? frame.start.order;
+    const endY = (orderY.get(endOrder) ?? startY) + (orderH.get(endOrder) ?? 0);
+    const height = Math.max(40, endY - startY);
+    const lanes = [];
+    const firstElse = frame.elses[0];
+    const firstEnd = firstElse ? firstElse.order : endOrder;
+    lanes.push({
+      label: frame.start.label,
+      y: startY,
+      height: Math.max(
+        FRAGMENT_LABEL_H,
+        (orderY.get(firstEnd) ?? startY) - startY
+      ),
+      startOrder: frame.start.order,
+      endOrder: firstEnd
+    });
+    for (let i = 0; i < frame.elses.length; i++) {
+      const el = frame.elses[i];
+      const next = frame.elses[i + 1];
+      const laneEnd = next ? next.order : endOrder;
+      const ly = orderY.get(el.order) ?? startY;
+      lanes.push({
+        label: el.label,
+        y: ly,
+        height: Math.max(
+          FRAGMENT_LABEL_H,
+          (orderY.get(laneEnd) ?? ly) - ly
+        ),
+        startOrder: el.order,
+        endOrder: laneEnd
+      });
+    }
+    fragments.push({
+      id: frame.start.id,
+      kind: frame.start.kind,
+      label: frame.start.label,
+      x: x - 4,
+      y: startY,
+      width: width + 8,
+      height,
+      depth: frame.start.depth,
+      lanes
+    });
+  }
+  return fragments;
+}
+
+// src/mermaid/sequence/theme.ts
+function withAlpha(hex, alpha) {
+  const value = hex.replace("#", "");
+  if (!/^[0-9a-f]{6}$/i.test(value)) return hex;
+  const red = Number.parseInt(value.slice(0, 2), 16);
+  const green = Number.parseInt(value.slice(2, 4), 16);
+  const blue = Number.parseInt(value.slice(4, 6), 16);
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+}
+function getSequenceThemeTokens(mode, themeId = "default") {
+  const arcTheme = getTheme(themeId)[mode];
+  const violet = arcTheme.palette.violet.stroke;
+  const emerald = arcTheme.palette.emerald.stroke;
+  const amber = arcTheme.palette.amber.stroke;
+  if (mode === "dark") {
+    return {
+      background: "#09090b",
+      surface: "#18181b",
+      border: "#3f3f46",
+      text: "#fafafa",
+      textSecondary: "#a1a1aa",
+      textMuted: "#71717a",
+      lifeline: "#3f3f46",
+      messageSolid: "#a1a1aa",
+      messageDashed: "#71717a",
+      messageLabel: "#e4e4e7",
+      actorFill: withAlpha(violet, 0.14),
+      actorStroke: violet,
+      actorText: "#ddd6fe",
+      participantFill: "#18181b",
+      participantStroke: "#52525b",
+      participantText: "#e4e4e7",
+      noteFill: "rgba(39, 39, 42, 0.95)",
+      noteStroke: "#52525b",
+      noteText: "#d4d4d8",
+      localFill: withAlpha(emerald, 0.12),
+      localStroke: emerald,
+      localText: "#a7f3d0",
+      modelFill: withAlpha(amber, 0.12),
+      modelStroke: amber,
+      modelText: "#fde68a",
+      fragmentFill: "rgba(113, 113, 122, 0.08)",
+      fragmentStroke: "#52525b",
+      fragmentLabelBg: "#27272a",
+      fragmentLabelText: "#e4e4e7",
+      fragmentDivider: "#3f3f46",
+      highlight: violet,
+      dimOpacity: 0.45
+    };
+  }
+  return {
+    background: "#ffffff",
+    surface: "#fafafa",
+    border: "#e4e4e7",
+    text: "#18181b",
+    textSecondary: "#52525b",
+    textMuted: "#71717a",
+    lifeline: "#d4d4d8",
+    messageSolid: "#3f3f46",
+    messageDashed: "#71717a",
+    messageLabel: "#27272a",
+    actorFill: withAlpha(violet, 0.1),
+    actorStroke: violet,
+    actorText: "#5b21b6",
+    participantFill: "#ffffff",
+    participantStroke: "#a1a1aa",
+    participantText: "#18181b",
+    noteFill: "#f4f4f5",
+    noteStroke: "#d4d4d8",
+    noteText: "#3f3f46",
+    localFill: withAlpha(emerald, 0.1),
+    localStroke: emerald,
+    localText: "#065f46",
+    modelFill: withAlpha(amber, 0.1),
+    modelStroke: amber,
+    modelText: "#92400e",
+    fragmentFill: "rgba(113, 113, 122, 0.06)",
+    fragmentStroke: "#a1a1aa",
+    fragmentLabelBg: "#f4f4f5",
+    fragmentLabelText: "#3f3f46",
+    fragmentDivider: "#d4d4d8",
+    highlight: violet,
+    dimOpacity: 0.45
+  };
+}
+function classifyNoteAccent(text) {
+  const joined = text.join(" ").toLowerCase();
+  if (/no model|local|control plane|sse|broker|menu/.test(joined)) {
+    return "local";
+  }
+  if (/model|inference|token|allowance|api|prompt|skill|agents\.md|reply context/.test(
+    joined
+  )) {
+    return "model";
+  }
+  return "default";
+}
+function wrapLines(text, maxChars) {
+  const out = [];
+  for (const segment of text) {
+    if (segment.length <= maxChars) {
+      out.push(segment);
+      continue;
+    }
+    const words = segment.split(/\s+/);
+    let cur = "";
+    for (const w of words) {
+      const next = cur ? `${cur} ${w}` : w;
+      if (next.length > maxChars && cur) {
+        out.push(cur);
+        cur = w;
+      } else {
+        cur = next;
+      }
+    }
+    if (cur) out.push(cur);
+  }
+  return out.length ? out : [""];
+}
+function DefaultActorHeader({
+  participant,
+  x,
+  y,
+  width,
+  height,
+  context,
+  emphasized,
+  onPointerEnter,
+  onPointerLeave,
+  onFocus,
+  onBlur,
+  onClick
+}) {
+  const { tokens, interactive } = context;
+  const opacity = context.dimmed && !emphasized ? tokens.dimOpacity : 1;
+  const cx = x;
+  const top = y + 3;
+  const stroke = emphasized ? tokens.highlight : tokens.actorStroke;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      opacity,
+      style: { transition: "opacity 160ms ease-out" },
+      onPointerEnter,
+      onPointerLeave,
+      onFocus,
+      onBlur,
+      onClick,
+      tabIndex: interactive ? 0 : void 0,
+      role: interactive ? "button" : void 0,
+      "aria-label": `Actor ${participant.label}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx,
+            cy: top + 6,
+            r: 6.5,
+            fill: "none",
+            stroke,
+            strokeWidth: 1,
+            opacity: emphasized ? 0.5 : 0.26
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx,
+            cy: top + 6,
+            r: 3.7,
+            fill: tokens.actorFill,
+            stroke,
+            strokeWidth: emphasized ? 1.7 : 1.3
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M ${cx - 9.5} ${top + 22} C ${cx - 9} ${top + 16.5}, ${cx - 5.5} ${top + 14}, ${cx - 2.5} ${top + 13.5} M ${cx + 2.5} ${top + 13.5} C ${cx + 5.5} ${top + 14}, ${cx + 9} ${top + 16.5}, ${cx + 9.5} ${top + 22}`,
+            fill: "none",
+            stroke,
+            strokeWidth: emphasized ? 1.8 : 1.4,
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: cx,
+            y: y + height,
+            textAnchor: "middle",
+            fill: tokens.actorText,
+            fontSize: 10,
+            fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif",
+            fontWeight: 600,
+            children: participant.label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: x - width / 2,
+            y,
+            width,
+            height: height + 14,
+            fill: "transparent"
+          }
+        )
+      ]
+    }
+  );
+}
+function DefaultParticipantHeader({
+  participant,
+  x,
+  y,
+  width,
+  height,
+  context,
+  emphasized,
+  onPointerEnter,
+  onPointerLeave,
+  onFocus,
+  onBlur,
+  onClick
+}) {
+  const { tokens, interactive } = context;
+  const opacity = context.dimmed && !emphasized ? tokens.dimOpacity : 1;
+  const boxW = width;
+  const boxH = height;
+  const lines = wrapLines([participant.label], Math.floor(boxW / 7));
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      opacity,
+      style: { transition: "opacity 160ms ease-out" },
+      onPointerEnter,
+      onPointerLeave,
+      onFocus,
+      onBlur,
+      onClick,
+      tabIndex: interactive ? 0 : void 0,
+      role: interactive ? "button" : void 0,
+      "aria-label": `Participant ${participant.label}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: x - boxW / 2,
+            y,
+            width: boxW,
+            height: boxH,
+            rx: 7,
+            ry: 7,
+            fill: tokens.participantFill,
+            stroke: emphasized ? tokens.highlight : tokens.participantStroke,
+            strokeWidth: emphasized ? 1.75 : 1
+          }
+        ),
+        lines.map((ln, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x,
+            y: y + boxH / 2 + (i - (lines.length - 1) / 2) * 12,
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            fill: tokens.participantText,
+            fontSize: 10,
+            fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif",
+            fontWeight: 600,
+            children: ln
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+function DefaultLifeline({
+  participant,
+  x,
+  y1,
+  y2,
+  context,
+  emphasized
+}) {
+  const { tokens } = context;
+  const opacity = context.dimmed && !emphasized ? tokens.dimOpacity : 1;
+  return /* @__PURE__ */ jsx(
+    "line",
+    {
+      x1: x,
+      y1,
+      x2: x,
+      y2,
+      stroke: emphasized ? tokens.highlight : tokens.lifeline,
+      strokeWidth: emphasized ? 1.5 : 0.85,
+      strokeDasharray: emphasized ? void 0 : "3 4",
+      opacity,
+      style: { transition: "opacity 160ms ease-out, stroke 160ms ease-out" },
+      "data-participant": participant.id
+    }
+  );
+}
+function DefaultMessage({
+  laidOut,
+  context,
+  emphasized,
+  onPointerEnter,
+  onPointerLeave,
+  onActivate
+}) {
+  const { tokens, interactive } = context;
+  const { event, y, fromX, toX, self } = laidOut;
+  const dashed = event.line === "dashed";
+  const stroke = dashed ? tokens.messageDashed : tokens.messageSolid;
+  const color = emphasized ? tokens.highlight : stroke;
+  const opacity = context.dimmed && !emphasized ? tokens.dimOpacity : 1;
+  const markerId = `${context.idPrefix}-arrow-${event.id}`;
+  const label = event.label.join(" ");
+  const lines = wrapLines(event.label, 28);
+  const arrowHead = /* @__PURE__ */ jsx(
+    "marker",
+    {
+      id: markerId,
+      markerWidth: "7",
+      markerHeight: "7",
+      refX: "5.5",
+      refY: "2.75",
+      orient: "auto",
+      markerUnits: "strokeWidth",
+      children: event.arrow === "open" ? /* @__PURE__ */ jsx("path", { d: "M0,0 L5.5,2.75 L0,5.5", fill: "none", stroke: color, strokeWidth: "1.1" }) : /* @__PURE__ */ jsx("path", { d: "M0,0 L5.5,2.75 L0,5.5 Z", fill: color })
+    }
+  );
+  if (self) {
+    const loopW = 36;
+    const loopH = 18;
+    const path = `M ${fromX} ${y - loopH / 2} L ${fromX + loopW} ${y - loopH / 2} L ${fromX + loopW} ${y + loopH / 2} L ${fromX} ${y + loopH / 2}`;
+    return /* @__PURE__ */ jsxs(
+      "g",
+      {
+        opacity,
+        onPointerEnter,
+        onPointerLeave,
+        onClick: onActivate,
+        style: { cursor: interactive ? "pointer" : void 0 },
+        role: interactive ? "button" : void 0,
+        tabIndex: interactive ? 0 : void 0,
+        "aria-label": `Message: ${label}`,
+        onKeyDown: interactive ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onActivate?.();
+          }
+        } : void 0,
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: arrowHead }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: path,
+              fill: "none",
+              stroke: color,
+              strokeWidth: emphasized ? 2 : 1.5,
+              strokeDasharray: dashed ? "5 4" : void 0,
+              markerEnd: `url(#${markerId})`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: fromX + loopW + 6,
+              y: y + 1,
+              fill: tokens.messageLabel,
+              fontSize: 10,
+              fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif",
+              dominantBaseline: "middle",
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+  const dir = toX >= fromX ? 1 : -1;
+  const x1 = fromX;
+  const x2 = toX - dir * 2;
+  const midX = (x1 + x2) / 2;
+  const labelY = y - 5 - (lines.length - 1) * 5.5;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      opacity,
+      onPointerEnter,
+      onPointerLeave,
+      onClick: onActivate,
+      style: {
+        cursor: interactive ? "pointer" : void 0,
+        transition: "opacity 160ms ease-out"
+      },
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      "aria-label": `Message: ${label}`,
+      onKeyDown: interactive ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onActivate?.();
+        }
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: arrowHead }),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1,
+            y1: y,
+            x2,
+            y2: y,
+            stroke: color,
+            strokeWidth: emphasized ? 2 : 1.35,
+            strokeDasharray: dashed ? "5 4" : void 0,
+            markerEnd: `url(#${markerId})`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1,
+            y1: y,
+            x2,
+            y2: y,
+            stroke: "transparent",
+            strokeWidth: 12
+          }
+        ),
+        lines.map((ln, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: midX,
+            y: labelY + i * 11,
+            textAnchor: "middle",
+            fill: tokens.messageLabel,
+            fontSize: 10,
+            fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif",
+            fontWeight: dashed ? 400 : 500,
+            children: ln
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+function DefaultNote({ laidOut, context, emphasized }) {
+  const { tokens } = context;
+  const accent = context.noteAccent(laidOut.event);
+  const fill = accent === "local" ? tokens.localFill : accent === "model" ? tokens.modelFill : tokens.noteFill;
+  const stroke = accent === "local" ? tokens.localStroke : accent === "model" ? tokens.modelStroke : tokens.noteStroke;
+  const textColor = accent === "local" ? tokens.localText : accent === "model" ? tokens.modelText : tokens.noteText;
+  const opacity = context.dimmed && !emphasized ? tokens.dimOpacity : 1;
+  const lines = wrapLines(
+    laidOut.event.text,
+    Math.max(12, Math.floor((laidOut.width - 16) / 6.5))
+  );
+  const { x, y, width, height } = laidOut;
+  return /* @__PURE__ */ jsxs("g", { opacity, style: { transition: "opacity 160ms ease-out" }, children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: 8,
+        ry: 8,
+        fill,
+        stroke: emphasized ? tokens.highlight : stroke,
+        strokeWidth: emphasized ? 1.5 : 1
+      }
+    ),
+    lines.map((ln, i) => /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + width / 2,
+        y: y + height / 2 + (i - (lines.length - 1) / 2) * 12,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        fill: textColor,
+        fontSize: 10,
+        fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif",
+        children: ln
+      },
+      i
+    ))
+  ] });
+}
+function DefaultFragment({ laidOut, context }) {
+  const { tokens } = context;
+  const { x, y, width, height, kind, label, lanes } = laidOut;
+  const kindLabel = kind.toUpperCase();
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: 8,
+        ry: 8,
+        fill: tokens.fragmentFill,
+        stroke: tokens.fragmentStroke,
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: x + 7,
+        y: y + 4,
+        width: Math.max(34, kindLabel.length * 6.5 + 14),
+        height: 16,
+        rx: 4,
+        ry: 4,
+        fill: tokens.fragmentLabelBg,
+        stroke: tokens.fragmentStroke,
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + 7 + Math.max(34, kindLabel.length * 6.5 + 14) / 2,
+        y: y + 12,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        fill: tokens.fragmentLabelText,
+        fontSize: 9,
+        fontWeight: 700,
+        fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif",
+        children: kindLabel
+      }
+    ),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + 7 + Math.max(34, kindLabel.length * 6.5 + 14) + 7,
+        y: y + 12,
+        dominantBaseline: "middle",
+        fill: tokens.textSecondary,
+        fontSize: 10,
+        fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif",
+        children: label
+      }
+    ),
+    lanes.slice(1).map((lane, i) => /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: x + 6,
+          y1: lane.y,
+          x2: x + width - 6,
+          y2: lane.y,
+          stroke: tokens.fragmentDivider,
+          strokeWidth: 1,
+          strokeDasharray: "4 3"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: x + 12,
+          y: lane.y + 12,
+          fill: tokens.textSecondary,
+          fontSize: 10,
+          fontWeight: 600,
+          fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif",
+          children: `else${lane.label ? ` ${lane.label}` : ""}`
+        }
+      )
+    ] }, i))
+  ] });
+}
+var defaultSequenceParts = {
+  ActorHeader: DefaultActorHeader,
+  ParticipantHeader: DefaultParticipantHeader,
+  Lifeline: DefaultLifeline,
+  Message: DefaultMessage,
+  Note: DefaultNote,
+  Fragment: DefaultFragment
+};
+function resolveParts(overrides) {
+  return {
+    ActorHeader: overrides?.ActorHeader ?? defaultSequenceParts.ActorHeader,
+    ParticipantHeader: overrides?.ParticipantHeader ?? defaultSequenceParts.ParticipantHeader,
+    Lifeline: overrides?.Lifeline ?? defaultSequenceParts.Lifeline,
+    Message: overrides?.Message ?? defaultSequenceParts.Message,
+    Note: overrides?.Note ?? defaultSequenceParts.Note,
+    Fragment: overrides?.Fragment ?? defaultSequenceParts.Fragment
+  };
+}
+function neutralNoteAccent() {
+  return "default";
+}
+function SequenceRenderer({
+  document,
+  mode = "light",
+  theme = "default",
+  interactive = true,
+  className = "",
+  title,
+  description,
+  presentation
+}) {
+  const idPrefix = `arc-seq-${useId().replace(/:/g, "")}`;
+  const tokens = useMemo(
+    () => ({
+      ...getSequenceThemeTokens(mode, theme),
+      ...presentation?.tokens
+    }),
+    [mode, theme, presentation?.tokens]
+  );
+  const layout = useMemo(
+    () => layoutSequence(document, {
+      width: presentation?.width ?? 960,
+      maxLabelWidth: presentation?.maxLabelWidth ?? 160
+    }),
+    [document, presentation?.width, presentation?.maxLabelWidth]
+  );
+  const parts = useMemo(
+    () => resolveParts(presentation?.parts),
+    [presentation?.parts]
+  );
+  const interactions = presentation?.interactions;
+  const activeMessage = useMemo(
+    () => interactions?.activeMessageId ? document.events.find(
+      (event) => event.type === "message" && event.id === interactions.activeMessageId
+    ) : void 0,
+    [document.events, interactions?.activeMessageId]
+  );
+  const controlledHighlight = interactions?.highlightedParticipantId;
+  const [internalHighlight, setInternalHighlight] = useState(null);
+  const highlight = controlledHighlight !== void 0 ? controlledHighlight : internalHighlight;
+  const dimUnrelated = interactions?.dimUnrelated ?? (interactive && (highlight != null || activeMessage != null));
+  const relatedIds = useMemo(() => {
+    if (!highlight) return null;
+    const set = /* @__PURE__ */ new Set([highlight]);
+    for (const m of document.events) {
+      if (m.type === "message" && (m.from === highlight || m.to === highlight)) {
+        set.add(m.from);
+        set.add(m.to);
+      }
+      if (m.type === "note" && m.participants.includes(highlight)) {
+        m.participants.forEach((p) => set.add(p));
+      }
+    }
+    return set;
+  }, [document.events, highlight]);
+  const isEmphasizedParticipant = useCallback(
+    (id) => {
+      if (activeMessage) {
+        return activeMessage.from === id || activeMessage.to === id;
+      }
+      if (!highlight) return false;
+      return relatedIds?.has(id) ?? id === highlight;
+    },
+    [activeMessage, highlight, relatedIds]
+  );
+  const isEmphasizedMessage = useCallback(
+    (id, from, to) => {
+      if (activeMessage) {
+        return activeMessage.id === id;
+      }
+      if (!highlight) return false;
+      return from === highlight || to === highlight;
+    },
+    [activeMessage, highlight]
+  );
+  const setHighlight = useCallback(
+    (id) => {
+      if (controlledHighlight === void 0) setInternalHighlight(id);
+      interactions?.onParticipantHover?.(id);
+    },
+    [controlledHighlight, interactions]
+  );
+  const a11yTitle = title ?? `Sequence diagram with ${document.participants.length} participants`;
+  const a11yDesc = description ?? buildAutoDescription(document);
+  const context = {
+    idPrefix,
+    mode,
+    themeId: theme,
+    tokens,
+    layout,
+    document,
+    interactive,
+    highlightedParticipantId: highlight,
+    dimmed: Boolean(dimUnrelated && (highlight || activeMessage)),
+    noteAccent: presentation?.noteAccent ?? neutralNoteAccent
+  };
+  const { metrics } = layout;
+  const lifelineTop = PADDING_Y + HEADER_HEIGHT;
+  const lifelineBottom = metrics.height - 12;
+  const {
+    ActorHeader,
+    ParticipantHeader,
+    Lifeline,
+    Message,
+    Note,
+    Fragment: Fragment2
+  } = parts;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        width: "100%",
+        minWidth: 0,
+        overflowX: "auto",
+        ...presentation?.style
+      },
+      "data-arc-mermaid-family": "sequence",
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: `0 0 ${metrics.width} ${metrics.height}`,
+          width: `${(presentation?.scale ?? 1) * 100}%`,
+          height: "auto",
+          role: "img",
+          "aria-labelledby": `${idPrefix}-title ${idPrefix}-desc`,
+          style: {
+            display: "block",
+            background: tokens.background,
+            borderRadius: 10,
+            minWidth: Math.min(metrics.width * (presentation?.scale ?? 1), 680),
+            maxWidth: metrics.width * (presentation?.scale ?? 1)
+          },
+          children: [
+            /* @__PURE__ */ jsx("title", { id: `${idPrefix}-title`, children: a11yTitle }),
+            /* @__PURE__ */ jsx("desc", { id: `${idPrefix}-desc`, children: a11yDesc }),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: 0,
+                y: 0,
+                width: metrics.width,
+                height: metrics.height,
+                fill: tokens.background,
+                rx: 10
+              }
+            ),
+            layout.fragments.map((f) => /* @__PURE__ */ jsx(Fragment2, { laidOut: f, context }, f.id)),
+            document.participants.map((p) => /* @__PURE__ */ jsx(
+              Lifeline,
+              {
+                participant: p,
+                x: metrics.participantX[p.id],
+                y1: lifelineTop,
+                y2: lifelineBottom,
+                context,
+                emphasized: isEmphasizedParticipant(p.id)
+              },
+              `life-${p.id}`
+            )),
+            document.participants.map((p) => {
+              const x = metrics.participantX[p.id];
+              const y = PADDING_Y;
+              const emphasized = isEmphasizedParticipant(p.id);
+              const handlers = interactive ? {
+                onPointerEnter: () => setHighlight(p.id),
+                onPointerLeave: () => setHighlight(null),
+                onFocus: () => {
+                  setHighlight(p.id);
+                  interactions?.onParticipantFocus?.(p.id);
+                },
+                onBlur: () => {
+                  setHighlight(null);
+                  interactions?.onParticipantFocus?.(null);
+                },
+                onClick: () => interactions?.onParticipantActivate?.(p.id)
+              } : {};
+              if (p.kind === "actor") {
+                return /* @__PURE__ */ jsx(
+                  ActorHeader,
+                  {
+                    participant: p,
+                    x,
+                    y,
+                    width: HEADER_BOX_W,
+                    height: HEADER_BOX_H + 8,
+                    context,
+                    emphasized,
+                    ...handlers
+                  },
+                  p.id
+                );
+              }
+              return /* @__PURE__ */ jsx(
+                ParticipantHeader,
+                {
+                  participant: p,
+                  x,
+                  y,
+                  width: HEADER_BOX_W,
+                  height: HEADER_BOX_H,
+                  context,
+                  emphasized,
+                  ...handlers
+                },
+                p.id
+              );
+            }),
+            layout.notes.map((n) => /* @__PURE__ */ jsx(
+              Note,
+              {
+                laidOut: n,
+                context,
+                emphasized: highlight != null && n.event.participants.some((id) => relatedIds?.has(id))
+              },
+              n.event.id
+            )),
+            layout.messages.map((m) => /* @__PURE__ */ jsx(
+              Message,
+              {
+                laidOut: m,
+                context,
+                emphasized: isEmphasizedMessage(
+                  m.event.id,
+                  m.event.from,
+                  m.event.to
+                ),
+                onPointerEnter: interactive ? () => interactions?.onMessageHover?.(m.event.id) : void 0,
+                onPointerLeave: interactive ? () => interactions?.onMessageHover?.(null) : void 0,
+                onActivate: interactive ? () => interactions?.onMessageActivate?.(m.event.id) : void 0
+              },
+              m.event.id
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
+function buildAutoDescription(doc) {
+  const names = doc.participants.map((p) => p.label).join(", ");
+  const msgCount = doc.events.filter((e) => e.type === "message").length;
+  const noteCount = doc.events.filter((e) => e.type === "note").length;
+  const fragCount = doc.events.filter((e) => e.type === "fragmentStart").length;
+  return `Participants: ${names}. ${msgCount} messages, ${noteCount} notes, ${fragCount} fragments.`;
+}
+function SequenceFamilyRenderer({
+  document,
+  mode,
+  theme,
+  interactive,
+  className,
+  title,
+  description,
+  sequence
+}) {
+  if (document.family !== "sequence") return null;
+  return /* @__PURE__ */ jsx(
+    SequenceRenderer,
+    {
+      document,
+      mode,
+      theme,
+      interactive,
+      className,
+      title,
+      description,
+      presentation: sequence
+    }
+  );
+}
+function PendingFamilyRenderer({ document, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      "data-arc-mermaid-family": document.family,
+      style: {
+        padding: 16,
+        borderRadius: 12,
+        border: "1px dashed #a1a1aa",
+        color: "#52525b",
+        fontFamily: "ui-sans-serif, system-ui, sans-serif",
+        fontSize: 13
+      },
+      children: [
+        "Native ",
+        /* @__PURE__ */ jsx("strong", { children: document.family }),
+        " rendering is not available yet."
+      ]
+    }
+  );
+}
+var registry = /* @__PURE__ */ new Map([
+  ["sequence", SequenceFamilyRenderer],
+  ["flowchart", PendingFamilyRenderer],
+  ["state", PendingFamilyRenderer]
+]);
+function registerMermaidRenderer(family, renderer) {
+  registry.set(family, renderer);
+}
+function getMermaidRenderer(family) {
+  return registry.get(family);
+}
+function listMermaidRenderers() {
+  return [...registry.keys()];
+}
+function ArcMermaid({
+  source,
+  document: documentProp,
+  mode = "light",
+  theme = "default",
+  interactive = true,
+  className = "",
+  title,
+  description,
+  sequence
+}) {
+  const parsed = useMemo(() => {
+    if (documentProp) {
+      return {
+        document: documentProp,
+        diagnostics: [],
+        source: source ?? ""
+      };
+    }
+    if (source != null) return parseMermaid(source);
+    return {
+      document: null,
+      diagnostics: [
+        {
+          severity: "error",
+          code: "no-input",
+          message: "ArcMermaid requires source or document"
+        }
+      ],
+      source: ""
+    };
+  }, [source, documentProp]);
+  const { document, diagnostics } = parsed;
+  if (!document) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        role: "alert",
+        style: {
+          padding: 16,
+          borderRadius: 12,
+          border: "1px solid #fca5a5",
+          background: "#fef2f2",
+          color: "#991b1b",
+          fontFamily: "ui-sans-serif, system-ui, sans-serif",
+          fontSize: 13
+        },
+        children: diagnostics.map((d, i) => /* @__PURE__ */ jsx("div", { children: d.message }, i))
+      }
+    );
+  }
+  const Renderer = getMermaidRenderer(document.family);
+  if (!Renderer) {
+    return /* @__PURE__ */ jsxs("div", { className, role: "alert", children: [
+      "No renderer registered for family \u201C",
+      document.family,
+      "\u201D."
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    Renderer,
+    {
+      document,
+      mode,
+      theme,
+      interactive,
+      className,
+      title,
+      description,
+      sequence
+    }
+  );
+}
+function getSequenceDocument(source, document) {
+  if (document?.family === "sequence") return document;
+  if (document) return null;
+  const parsed = source == null ? null : parseMermaid(source).document;
+  return parsed?.family === "sequence" ? parsed : null;
+}
+function ArcMermaidPlayer({
+  source,
+  document,
+  mode = "light",
+  theme = "default",
+  className = "",
+  title,
+  description,
+  sequence,
+  defaultZoom = "fit",
+  minZoom = 0.5,
+  maxZoom = 2.5,
+  zoomStep = 0.2,
+  showControls = true,
+  showPlayback = true,
+  autoplayMs = 1400,
+  onStepChange
+}) {
+  const rootRef = useRef(null);
+  const sequenceDocument = useMemo(
+    () => getSequenceDocument(source, document),
+    [source, document]
+  );
+  const steps = useMemo(
+    () => sequenceDocument?.events.filter(
+      (event) => event.type === "message"
+    ) ?? [],
+    [sequenceDocument]
+  );
+  const [zoom, setZoom] = useState(defaultZoom === "fit" ? 1 : defaultZoom);
+  const [stepIndex, setStepIndex] = useState(-1);
+  const [playing, setPlaying] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+  const activeMessageId = stepIndex >= 0 && stepIndex < steps.length ? steps[stepIndex].id : null;
+  useEffect(() => {
+    onStepChange?.(stepIndex, activeMessageId);
+  }, [activeMessageId, onStepChange, stepIndex]);
+  useEffect(() => {
+    if (!playing || steps.length === 0) return;
+    const timer = window.setInterval(() => {
+      setStepIndex((current) => {
+        if (current >= steps.length - 1) {
+          setPlaying(false);
+          return current;
+        }
+        return current + 1;
+      });
+    }, autoplayMs);
+    return () => window.clearInterval(timer);
+  }, [autoplayMs, playing, steps.length]);
+  useEffect(() => {
+    const syncFullscreen = () => {
+      setFullscreen(documentElementFullscreen() === rootRef.current);
+    };
+    globalThis.document?.addEventListener("fullscreenchange", syncFullscreen);
+    return () => globalThis.document?.removeEventListener("fullscreenchange", syncFullscreen);
+  }, []);
+  const setBoundedZoom = (next) => {
+    setZoom(Math.min(maxZoom, Math.max(minZoom, Number(next.toFixed(2)))));
+  };
+  const moveStep = (delta) => {
+    setPlaying(false);
+    setStepIndex(
+      (current) => Math.min(steps.length - 1, Math.max(-1, current + delta))
+    );
+  };
+  const togglePlayback = () => {
+    if (steps.length === 0) return;
+    if (stepIndex >= steps.length - 1) setStepIndex(-1);
+    setPlaying((value) => !value);
+  };
+  const toggleFullscreen = async () => {
+    const element = rootRef.current;
+    if (!element) return;
+    if (documentElementFullscreen() === element) {
+      await globalThis.document.exitFullscreen?.();
+    } else {
+      await element.requestFullscreen?.();
+    }
+  };
+  const mergedSequence = {
+    ...sequence,
+    scale: zoom * (sequence?.scale ?? 1),
+    interactions: {
+      ...sequence?.interactions,
+      activeMessageId: sequence?.interactions?.activeMessageId !== void 0 ? sequence.interactions.activeMessageId : activeMessageId
+    }
+  };
+  const dark = mode === "dark";
+  const playerTokens = useMemo(
+    () => getSequenceThemeTokens(mode, theme),
+    [mode, theme]
+  );
+  const chrome = {
+    background: playerTokens.background,
+    border: playerTokens.border,
+    surface: dark ? "rgba(24,24,27,.9)" : "rgba(255,255,255,.92)",
+    text: playerTokens.text,
+    muted: playerTokens.textSecondary,
+    active: playerTokens.highlight
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className,
+      tabIndex: 0,
+      onKeyDown: (event) => {
+        if (event.key === "ArrowRight" && showPlayback) moveStep(1);
+        if (event.key === "ArrowLeft" && showPlayback) moveStep(-1);
+      },
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        minWidth: 0,
+        minHeight: fullscreen ? "100vh" : void 0,
+        background: chrome.background,
+        border: `1px solid ${chrome.border}`,
+        borderRadius: fullscreen ? 0 : 12,
+        overflow: "hidden",
+        color: chrome.text,
+        outline: "none"
+      },
+      "data-arc-mermaid-player": true,
+      children: [
+        showControls && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              minHeight: 44,
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              gap: 6,
+              padding: "6px 8px",
+              borderBottom: `1px solid ${chrome.border}`,
+              background: chrome.surface,
+              backdropFilter: "blur(14px)",
+              fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                /* @__PURE__ */ jsx(
+                  ControlButton,
+                  {
+                    label: "Zoom out",
+                    color: chrome.text,
+                    border: chrome.border,
+                    onClick: () => setBoundedZoom(zoom - zoomStep),
+                    children: /* @__PURE__ */ jsx(Minus, { size: 15 })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setZoom(1),
+                    title: "Fit diagram",
+                    style: {
+                      height: 28,
+                      minWidth: 50,
+                      border: `1px solid ${chrome.border}`,
+                      borderRadius: 8,
+                      background: "transparent",
+                      color: chrome.muted,
+                      fontSize: 11,
+                      fontWeight: 650,
+                      cursor: "pointer"
+                    },
+                    children: [
+                      Math.round(zoom * 100),
+                      "%"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ControlButton,
+                  {
+                    label: "Zoom in",
+                    color: chrome.text,
+                    border: chrome.border,
+                    onClick: () => setBoundedZoom(zoom + zoomStep),
+                    children: /* @__PURE__ */ jsx(Plus, { size: 15 })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ControlButton,
+                  {
+                    label: "Fit diagram",
+                    color: chrome.text,
+                    border: chrome.border,
+                    onClick: () => setZoom(1),
+                    children: /* @__PURE__ */ jsx(Scan, { size: 15 })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 5,
+                    marginLeft: "auto"
+                  },
+                  children: [
+                    showPlayback && steps.length > 0 && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 5
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            ControlButton,
+                            {
+                              label: "Previous message",
+                              color: chrome.text,
+                              border: chrome.border,
+                              disabled: stepIndex < 0,
+                              onClick: () => moveStep(-1),
+                              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            ControlButton,
+                            {
+                              label: playing ? "Pause sequence" : "Play sequence",
+                              color: playing ? chrome.active : chrome.text,
+                              border: playing ? chrome.active : chrome.border,
+                              onClick: togglePlayback,
+                              children: playing ? /* @__PURE__ */ jsx(Pause, { size: 15 }) : /* @__PURE__ */ jsx(Play, { size: 15 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            ControlButton,
+                            {
+                              label: "Next message",
+                              color: chrome.text,
+                              border: chrome.border,
+                              disabled: stepIndex >= steps.length - 1,
+                              onClick: () => moveStep(1),
+                              children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              "aria-live": "polite",
+                              style: {
+                                minWidth: 68,
+                                color: chrome.muted,
+                                fontSize: 11,
+                                textAlign: "center",
+                                fontVariantNumeric: "tabular-nums"
+                              },
+                              children: stepIndex < 0 ? "Overview" : `${stepIndex + 1} / ${steps.length}`
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ControlButton,
+                      {
+                        label: fullscreen ? "Exit fullscreen" : "Expand player",
+                        color: chrome.text,
+                        border: chrome.border,
+                        onClick: toggleFullscreen,
+                        children: /* @__PURE__ */ jsx(Expand, { size: 15 })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              minWidth: 0,
+              overflow: "auto",
+              padding: fullscreen ? 20 : 10,
+              background: chrome.background
+            },
+            children: /* @__PURE__ */ jsx(
+              ArcMermaid,
+              {
+                source,
+                document,
+                mode,
+                theme,
+                interactive: true,
+                title,
+                description,
+                sequence: mergedSequence
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function documentElementFullscreen() {
+  return typeof globalThis.document === "undefined" ? null : globalThis.document.fullscreenElement;
+}
+function ControlButton({
+  label,
+  color,
+  border,
+  disabled,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      disabled,
+      onClick,
+      style: {
+        width: 28,
+        height: 28,
+        display: "grid",
+        placeItems: "center",
+        border: `1px solid ${border}`,
+        borderRadius: 8,
+        background: "transparent",
+        color,
+        opacity: disabled ? 0.34 : 1,
+        cursor: disabled ? "default" : "pointer"
+      },
+      children
+    }
+  );
+}
+
+export { ArcDiagram, ArcMermaid, ArcMermaidPlayer, DEFAULT_THEME, SequenceRenderer, THEMES, autoLayout, classifyNoteAccent, createAutoLayout, ArcDiagram_default as default, defaultSequenceParts, getMermaidRenderer, getSequenceThemeTokens, getTheme, getThemeList, layoutSequence, listMermaidRenderers, parseMermaid, parseSequenceSource, registerMermaidRenderer };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map