react-super-mermaid 0.1.0

package/dist/index.js

@@ -0,0 +1,1651 @@
+'use client';
+import { forwardRef, useState, useEffect, useRef, useCallback, useImperativeHandle, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/react/MermaidViewer.tsx
+
+// src/env.ts
+function isBrowser() {
+  return typeof document !== "undefined" && typeof window !== "undefined";
+}
+function assertBrowser(api) {
+  if (!isBrowser()) {
+    throw new Error(`[react-super-mermaid] ${api} \u9700\u8981\u700F\u89BD\u5668 DOM(document / window)\u3002`);
+  }
+}
+
+// src/core/load-mermaid.ts
+var cached = null;
+function loadMermaid(opts = {}) {
+  const source = opts.source ?? {};
+  if (source.instance) {
+    cached = Promise.resolve(normalize(source.instance));
+    return cached;
+  }
+  if (opts.fresh) {
+    cached = null;
+  }
+  if (cached) {
+    return cached;
+  }
+  cached = resolve(source).catch((err) => {
+    cached = null;
+    throw err;
+  });
+  return cached;
+}
+async function resolve(source) {
+  if (source.cdnUrl) {
+    assertBrowser("loadMermaid({ cdnUrl })");
+    const mod = await import(
+      /* @vite-ignore */
+      /* webpackIgnore: true */
+      source.cdnUrl
+    );
+    return normalize(mod.default ?? mod);
+  }
+  try {
+    const mod = await import('mermaid');
+    return normalize(mod.default ?? mod);
+  } catch (peerErr) {
+    throw new Error(
+      `[react-super-mermaid] \u627E\u4E0D\u5230 mermaid\u3002\u8ACB\u5B89\u88DD mermaid(peer dependency)\u3001\u50B3\u5165 { instance },\u6216\u50B3\u5165 { cdnUrl }\u3002
+\u539F\u59CB\u932F\u8AA4:${peerErr instanceof Error ? peerErr.message : String(peerErr)}`
+    );
+  }
+}
+function normalize(m) {
+  if (typeof m.render !== "function" || typeof m.initialize !== "function") {
+    throw new Error("[react-super-mermaid] \u89E3\u6790\u5230\u7684\u7269\u4EF6\u4E0D\u662F\u6709\u6548\u7684 mermaid \u5BE6\u4F8B\u3002");
+  }
+  return m;
+}
+
+// src/core/load-svg-pan-zoom.ts
+var cached2 = null;
+function loadSvgPanZoom(source = {}) {
+  if (source.instance) {
+    cached2 = Promise.resolve(source.instance);
+    return cached2;
+  }
+  if (cached2) {
+    return cached2;
+  }
+  cached2 = resolve2(source).catch(() => {
+    cached2 = null;
+    return null;
+  });
+  return cached2;
+}
+async function resolve2(source) {
+  if (source.cdnUrl) {
+    assertBrowser("loadSvgPanZoom({ cdnUrl })");
+    const mod = await import(
+      /* @vite-ignore */
+      /* webpackIgnore: true */
+      source.cdnUrl
+    );
+    return mod.default ?? mod;
+  }
+  try {
+    const mod = await import('svg-pan-zoom');
+    return mod.default ?? mod;
+  } catch {
+    return null;
+  }
+}
+
+// src/core/styles.css.ts
+var RSM_STYLE_ID = "react-super-mermaid-styles";
+var RSM_CSS = `
+.rsm-root {
+  --rsm-border: #e5e7eb;
+  --rsm-fg: #374151;
+  --rsm-muted: #6b7280;
+  --rsm-accent: #2563eb;
+  --rsm-hover: #f3f4f6;
+  --rsm-surface: #ffffff;
+  --rsm-canvas-bg: transparent;
+  --rsm-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--rsm-border);
+  border-radius: var(--rsm-radius);
+  background: var(--rsm-surface);
+  color: var(--rsm-fg);
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  overflow: hidden;
+}
+.rsm-root *, .rsm-root *::before, .rsm-root *::after { box-sizing: border-box; }
+
+.rsm-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--rsm-border);
+}
+.rsm-toolbar-spacer { margin-left: auto; }
+.rsm-toolbar-group { display: inline-flex; align-items: center; gap: 6px; }
+
+.rsm-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rsm-muted); }
+
+.rsm-select {
+  border: 1px solid var(--rsm-border);
+  background: var(--rsm-surface);
+  color: var(--rsm-fg);
+  border-radius: 6px;
+  padding: 4px 8px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.rsm-select:focus { outline: none; border-color: var(--rsm-accent); }
+
+.rsm-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid var(--rsm-border);
+  background: var(--rsm-surface);
+  color: var(--rsm-fg);
+  border-radius: 6px;
+  padding: 4px 10px;
+  font-size: 13px;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+.rsm-btn:hover { background: var(--rsm-hover); }
+.rsm-btn[aria-pressed="true"] {
+  border-color: var(--rsm-accent);
+  color: var(--rsm-accent);
+  background: color-mix(in srgb, var(--rsm-accent) 10%, transparent);
+}
+.rsm-btn:disabled { opacity: 0.6; cursor: default; }
+
+.rsm-zoom {
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid var(--rsm-border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.rsm-zoom > button {
+  border: 0;
+  background: var(--rsm-surface);
+  color: var(--rsm-fg);
+  padding: 4px 10px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.rsm-zoom > button:hover { background: var(--rsm-hover); }
+.rsm-zoom > button + button { border-left: 1px solid var(--rsm-border); }
+.rsm-zoom-percent { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; }
+
+.rsm-searchbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--rsm-border);
+  background: var(--rsm-hover);
+}
+.rsm-input {
+  flex: 0 1 320px;
+  border: 1px solid var(--rsm-border);
+  background: var(--rsm-surface);
+  color: var(--rsm-fg);
+  border-radius: 6px;
+  padding: 5px 10px;
+  font-size: 13px;
+}
+.rsm-input:focus { outline: none; border-color: var(--rsm-accent); }
+.rsm-count { min-width: 48px; font-size: 12px; color: var(--rsm-muted); font-variant-numeric: tabular-nums; }
+.rsm-searchbar-spacer { margin-left: auto; }
+
+.rsm-canvas {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--rsm-canvas-bg);
+}
+.rsm-stage { width: 100%; height: 100%; }
+.rsm-root svg { cursor: grab; user-select: none; }
+.rsm-root svg.rsm-grabbing { cursor: grabbing; }
+
+.rsm-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--rsm-muted);
+  pointer-events: none;
+}
+.rsm-overlay.rsm-error { color: #dc2626; }
+
+/* \u641C\u5C0B:\u547D\u4E2D\u4EE5\u5916\u7684\u7BC0\u9EDE\u8B8A\u6697,\u7576\u524D\u547D\u4E2D\u52A0\u6696\u8272\u5149\u6688\u3002 */
+.rsm-root .rsm-dim { opacity: 0.22; transition: opacity 0.15s ease; }
+.rsm-root .rsm-hit { filter: drop-shadow(0 0 5px #f59e0b) drop-shadow(0 0 1.5px #f59e0b); }
+
+.rsm-root.rsm-dark {
+  --rsm-border: #374151;
+  --rsm-fg: #e5e7eb;
+  --rsm-muted: #9ca3af;
+  --rsm-accent: #60a5fa;
+  --rsm-hover: #1f2937;
+  --rsm-surface: #111827;
+}
+`;
+
+// src/core/ensure-styles.ts
+function ensureStyles() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (document.getElementById(RSM_STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = RSM_STYLE_ID;
+  style.textContent = RSM_CSS;
+  document.head.appendChild(style);
+}
+
+// src/core/themes/colorize.ts
+var NODE_PALETTE = [
+  { fill: "#DBEAFE", stroke: "#3B82F6" },
+  // blue
+  { fill: "#DCFCE7", stroke: "#22C55E" },
+  // green
+  { fill: "#FFEDD5", stroke: "#F97316" },
+  // orange
+  { fill: "#F3E8FF", stroke: "#A855F7" },
+  // purple
+  { fill: "#FEE2E2", stroke: "#EF4444" },
+  // red
+  { fill: "#CFFAFE", stroke: "#06B6D4" },
+  // cyan
+  { fill: "#FEF9C3", stroke: "#EAB308" },
+  // yellow
+  { fill: "#EDE9FE", stroke: "#8B5CF6" }
+  // violet
+];
+var CLUSTER_PALETTE = [
+  { fill: "rgba(59, 130, 246, 0.07)", stroke: "#93C5FD" },
+  { fill: "rgba(34, 197, 94, 0.07)", stroke: "#86EFAC" },
+  { fill: "rgba(249, 115, 22, 0.07)", stroke: "#FDBA74" },
+  { fill: "rgba(168, 85, 247, 0.07)", stroke: "#D8B4FE" },
+  { fill: "rgba(6, 182, 212, 0.07)", stroke: "#67E8F9" },
+  { fill: "rgba(239, 68, 68, 0.07)", stroke: "#FCA5A5" }
+];
+var NODE_TEXT = "#1F2937";
+var SHADOW_FILTER_ID = "rsm-soft-shadow";
+var SVG_NS = "http://www.w3.org/2000/svg";
+function ensureShadowFilter(svg) {
+  if (svg.querySelector(`#${SHADOW_FILTER_ID}`)) {
+    return;
+  }
+  let defs = svg.querySelector(":scope > defs");
+  if (!defs) {
+    defs = document.createElementNS(SVG_NS, "defs");
+    svg.insertBefore(defs, svg.firstChild);
+  }
+  const filter = document.createElementNS(SVG_NS, "filter");
+  filter.setAttribute("id", SHADOW_FILTER_ID);
+  filter.setAttribute("x", "-25%");
+  filter.setAttribute("y", "-25%");
+  filter.setAttribute("width", "150%");
+  filter.setAttribute("height", "150%");
+  const drop = document.createElementNS(SVG_NS, "feDropShadow");
+  drop.setAttribute("dx", "0");
+  drop.setAttribute("dy", "1.5");
+  drop.setAttribute("stdDeviation", "2");
+  drop.setAttribute("flood-color", "#0F172A");
+  drop.setAttribute("flood-opacity", "0.22");
+  filter.appendChild(drop);
+  defs.appendChild(filter);
+}
+function roundRect(shape, radius) {
+  if (shape.tagName.toLowerCase() !== "rect") {
+    return;
+  }
+  const rx = Number(shape.getAttribute("rx") ?? "0");
+  if (rx < radius + 1) {
+    shape.setAttribute("rx", String(radius));
+    shape.setAttribute("ry", String(radius));
+  }
+}
+function paintShapes(group, entry) {
+  const direct = Array.from(
+    group.querySelectorAll(
+      ":scope > rect, :scope > polygon, :scope > circle, :scope > ellipse, :scope > path"
+    )
+  );
+  if (direct.length > 0) {
+    for (const shape of direct) {
+      shape.style.fill = entry.fill;
+      shape.style.stroke = entry.stroke;
+      shape.style.strokeWidth = "1.4px";
+      roundRect(shape, 8);
+    }
+    direct[0].setAttribute("filter", `url(#${SHADOW_FILTER_ID})`);
+    return;
+  }
+  for (const path of Array.from(group.querySelectorAll(":scope > g.outer-path > *"))) {
+    if (path.getAttribute("fill") && path.getAttribute("fill") !== "none") {
+      path.style.fill = entry.fill;
+      path.setAttribute("filter", `url(#${SHADOW_FILTER_ID})`);
+    }
+    if (path.getAttribute("stroke") && path.getAttribute("stroke") !== "none") {
+      path.style.stroke = entry.stroke;
+      path.style.strokeWidth = "1.4px";
+    }
+  }
+  for (const row of Array.from(group.querySelectorAll(":scope > g.row-rect-odd > *"))) {
+    row.style.fill = "rgba(255, 255, 255, 0.55)";
+  }
+  for (const row of Array.from(group.querySelectorAll(":scope > g.row-rect-even > *"))) {
+    row.style.fill = "rgba(255, 255, 255, 0.3)";
+  }
+  for (const divider of Array.from(group.querySelectorAll(":scope > g.divider > *"))) {
+    divider.style.stroke = entry.stroke;
+  }
+}
+function darkenNodeText(group) {
+  for (const el of Array.from(group.querySelectorAll("text, tspan"))) {
+    el.style.fill = NODE_TEXT;
+  }
+  for (const el of Array.from(group.querySelectorAll(".nodeLabel, span, p"))) {
+    el.style.color = NODE_TEXT;
+  }
+}
+function styleEdges(svg, dark) {
+  const edgeColor = dark ? "#94A3B8" : "#64748B";
+  const edgeSelectors = [
+    ".edgePaths path",
+    "g.edgePath path",
+    "path.flowchart-link",
+    "path.relationshipLine"
+  ].join(", ");
+  for (const edge of Array.from(svg.querySelectorAll(edgeSelectors))) {
+    edge.style.stroke = edgeColor;
+    edge.style.strokeWidth = "1.7px";
+    edge.style.strokeLinecap = "round";
+  }
+  for (const marker of Array.from(svg.querySelectorAll("marker path"))) {
+    marker.style.fill = edgeColor;
+    marker.style.stroke = edgeColor;
+  }
+}
+function styleEdgeLabels(svg) {
+  for (const label of Array.from(svg.querySelectorAll(".edgeLabel span, .edgeLabel p"))) {
+    label.style.borderRadius = "6px";
+  }
+  for (const rect of Array.from(svg.querySelectorAll(".edgeLabel rect"))) {
+    rect.setAttribute("rx", "4");
+    rect.setAttribute("ry", "4");
+  }
+}
+function colorizeLegacyEr(svg) {
+  const erGroups = [];
+  for (const rect of Array.from(svg.querySelectorAll("rect.er.entityBox"))) {
+    const group = rect.parentElement;
+    if (group && !erGroups.includes(group)) {
+      erGroups.push(group);
+    }
+  }
+  erGroups.forEach((group, i) => {
+    const entry = NODE_PALETTE[i % NODE_PALETTE.length];
+    for (const rect of Array.from(group.querySelectorAll("rect.er.entityBox")).slice(0, 1)) {
+      rect.style.fill = entry.fill;
+      rect.style.stroke = entry.stroke;
+    }
+    for (const label of Array.from(group.querySelectorAll("text.er.entityLabel"))) {
+      label.style.fill = NODE_TEXT;
+    }
+  });
+}
+function colorizeSequence(svg, dark) {
+  const actorRects = Array.from(svg.querySelectorAll("rect.actor"));
+  if (actorRects.length === 0) {
+    return;
+  }
+  const colorByName = /* @__PURE__ */ new Map();
+  let nextIndex = 0;
+  for (const rect of actorRects) {
+    const name = rect.getAttribute("name") ?? `#${nextIndex}`;
+    let entry = colorByName.get(name);
+    if (!entry) {
+      entry = NODE_PALETTE[nextIndex % NODE_PALETTE.length];
+      colorByName.set(name, entry);
+      nextIndex += 1;
+    }
+    rect.style.fill = entry.fill;
+    rect.style.stroke = entry.stroke;
+    rect.style.strokeWidth = "1.4px";
+    rect.setAttribute("rx", "8");
+    rect.setAttribute("ry", "8");
+    rect.setAttribute("filter", `url(#${SHADOW_FILTER_ID})`);
+    const group = rect.parentElement;
+    if (group) {
+      for (const text of Array.from(group.querySelectorAll("text, tspan"))) {
+        text.style.fill = NODE_TEXT;
+      }
+    }
+  }
+  const lanesByX = [];
+  for (const line of Array.from(svg.querySelectorAll("line.actor-line"))) {
+    const entry = colorByName.get(line.getAttribute("name") ?? "");
+    if (!entry) {
+      continue;
+    }
+    line.style.stroke = entry.stroke;
+    line.style.strokeOpacity = "0.45";
+    line.style.strokeWidth = "1.3px";
+    line.style.strokeDasharray = "4 5";
+    const x = Number(line.getAttribute("x1"));
+    if (Number.isFinite(x)) {
+      lanesByX.push({ x, entry });
+    }
+  }
+  const activations = Array.from(
+    svg.querySelectorAll("rect.activation0, rect.activation1, rect.activation2")
+  );
+  for (const bar of activations) {
+    const x = Number(bar.getAttribute("x"));
+    const w = Number(bar.getAttribute("width"));
+    if (!Number.isFinite(x) || !Number.isFinite(w) || lanesByX.length === 0) {
+      continue;
+    }
+    const center = x + w / 2;
+    let best = lanesByX[0];
+    for (const lane of lanesByX) {
+      if (Math.abs(lane.x - center) < Math.abs(best.x - center)) {
+        best = lane;
+      }
+    }
+    bar.style.fill = best.entry.fill;
+    bar.style.stroke = best.entry.stroke;
+    bar.style.strokeWidth = "1px";
+    bar.setAttribute("rx", "3");
+    bar.setAttribute("ry", "3");
+  }
+  for (const note of Array.from(svg.querySelectorAll("rect.note"))) {
+    note.style.fill = "#FEF9C3";
+    note.style.stroke = "#EAB308";
+    note.style.strokeWidth = "1.2px";
+    note.setAttribute("rx", "6");
+    note.setAttribute("ry", "6");
+    note.setAttribute("filter", `url(#${SHADOW_FILTER_ID})`);
+  }
+  for (const text of Array.from(svg.querySelectorAll(".noteText, .noteText tspan"))) {
+    text.style.fill = NODE_TEXT;
+  }
+  const ink = dark ? "#94A3B8" : "#64748B";
+  for (const line of Array.from(svg.querySelectorAll(".messageLine0, .messageLine1"))) {
+    line.style.stroke = ink;
+    line.style.strokeWidth = "1.6px";
+    line.style.strokeLinecap = "round";
+  }
+  for (const loop of Array.from(svg.querySelectorAll(".loopLine"))) {
+    loop.style.stroke = ink;
+    loop.style.strokeOpacity = "0.55";
+  }
+  for (const text of Array.from(
+    svg.querySelectorAll(".messageText, .loopText, .labelText")
+  )) {
+    text.style.fill = dark ? "#E2E8F0" : NODE_TEXT;
+  }
+}
+function colorizeDiagram(root, opts = {}) {
+  const svg = root instanceof Element && root.tagName.toLowerCase() === "svg" ? root : root.querySelector("svg");
+  if (!svg) {
+    return;
+  }
+  ensureShadowFilter(svg);
+  Array.from(svg.querySelectorAll("g.node")).forEach((node, i) => {
+    paintShapes(node, NODE_PALETTE[i % NODE_PALETTE.length]);
+    darkenNodeText(node);
+  });
+  Array.from(svg.querySelectorAll("g.cluster")).forEach((cluster, i) => {
+    const entry = CLUSTER_PALETTE[i % CLUSTER_PALETTE.length];
+    for (const rect of Array.from(cluster.querySelectorAll(":scope > rect"))) {
+      rect.style.fill = entry.fill;
+      rect.style.stroke = entry.stroke;
+      rect.style.strokeWidth = "1.2px";
+      roundRect(rect, 10);
+    }
+  });
+  colorizeLegacyEr(svg);
+  colorizeSequence(svg, opts.dark === true);
+  styleEdges(svg, opts.dark === true);
+  styleEdgeLabels(svg);
+}
+
+// src/core/themes/sketch.ts
+var SVG_NS2 = "http://www.w3.org/2000/svg";
+var SKETCH_FILTER_ID = "rsm-sketch-wobble";
+var FONT_FACE_ID = "rsm-sketch-fontface";
+var DEFAULT_SEED = 42;
+var SKETCH_FONT = "'Virgil', 'KaiTi', 'Comic Sans MS', cursive";
+var DEFAULT_VIRGIL_FONT_URL = "https://cdn.jsdelivr.net/npm/react-super-mermaid/dist/Virgil.woff2";
+var ACTOR_PALETTE = [
+  { fill: "#a5d8ff", stroke: "#1971c2" },
+  // blue
+  { fill: "#b2f2bb", stroke: "#2f9e44" },
+  // green
+  { fill: "#ffd8a8", stroke: "#e8590c" },
+  // orange
+  { fill: "#d0bfff", stroke: "#6741d9" },
+  // violet
+  { fill: "#99e9f2", stroke: "#0c8599" },
+  // cyan
+  { fill: "#ffc9c9", stroke: "#e03131" },
+  // red
+  { fill: "#ffec99", stroke: "#f08c00" },
+  // yellow
+  { fill: "#eebefa", stroke: "#9c36b5" }
+  // grape
+];
+var NOTE_FILL = "#ffec99";
+var NOTE_STROKE = "#f08c00";
+var INK_DARK = "#1e1e1e";
+function isSequenceSvg(svg) {
+  return svg.getAttribute("aria-roledescription") === "sequence" || svg.querySelector(".actor, .messageLine0, .actor-line") !== null;
+}
+function ensureWobbleFilter(svg, seed) {
+  if (svg.querySelector(`#${SKETCH_FILTER_ID}`)) {
+    return;
+  }
+  let defs = svg.querySelector(":scope > defs");
+  if (!defs) {
+    defs = document.createElementNS(SVG_NS2, "defs");
+    svg.insertBefore(defs, svg.firstChild);
+  }
+  const filter = document.createElementNS(SVG_NS2, "filter");
+  filter.setAttribute("id", SKETCH_FILTER_ID);
+  filter.setAttribute("x", "-3%");
+  filter.setAttribute("y", "-3%");
+  filter.setAttribute("width", "106%");
+  filter.setAttribute("height", "106%");
+  const turbulence = document.createElementNS(SVG_NS2, "feTurbulence");
+  turbulence.setAttribute("type", "fractalNoise");
+  turbulence.setAttribute("baseFrequency", "0.012");
+  turbulence.setAttribute("numOctaves", "2");
+  turbulence.setAttribute("seed", String(seed));
+  turbulence.setAttribute("result", "noise");
+  const displace = document.createElementNS(SVG_NS2, "feDisplacementMap");
+  displace.setAttribute("in", "SourceGraphic");
+  displace.setAttribute("in2", "noise");
+  displace.setAttribute("scale", "2.2");
+  displace.setAttribute("xChannelSelector", "R");
+  displace.setAttribute("yChannelSelector", "G");
+  filter.appendChild(turbulence);
+  filter.appendChild(displace);
+  defs.appendChild(filter);
+}
+function wrapWithWobble(svg) {
+  if (svg.querySelector(":scope > g.rsm-sketch-layer")) {
+    return;
+  }
+  const layer = document.createElementNS(SVG_NS2, "g");
+  layer.setAttribute("class", "rsm-sketch-layer");
+  layer.style.filter = `url(#${SKETCH_FILTER_ID})`;
+  const movable = Array.from(svg.childNodes).filter((node) => {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const tag = node.tagName.toLowerCase();
+    return tag !== "defs" && tag !== "style";
+  });
+  for (const node of movable) {
+    layer.appendChild(node);
+  }
+  svg.appendChild(layer);
+}
+function applyHandwritingFont(svg) {
+  for (const text of Array.from(svg.querySelectorAll("text, tspan"))) {
+    text.style.fontFamily = SKETCH_FONT;
+  }
+  for (const html of Array.from(
+    svg.querySelectorAll(".messageText, .noteText, .loopText, .labelText, span, p")
+  )) {
+    html.style.fontFamily = SKETCH_FONT;
+  }
+}
+function colorizeActors(svg) {
+  const rects = Array.from(svg.querySelectorAll("rect.actor"));
+  if (rects.length === 0) {
+    return;
+  }
+  const colorByName = /* @__PURE__ */ new Map();
+  let nextIndex = 0;
+  for (const rect of rects) {
+    const name = rect.getAttribute("name") ?? `#${nextIndex}`;
+    let entry = colorByName.get(name);
+    if (!entry) {
+      entry = ACTOR_PALETTE[nextIndex % ACTOR_PALETTE.length];
+      colorByName.set(name, entry);
+      nextIndex += 1;
+    }
+    rect.style.fill = entry.fill;
+    rect.style.stroke = entry.stroke;
+    rect.style.strokeWidth = "2px";
+    rect.setAttribute("rx", "8");
+    rect.setAttribute("ry", "8");
+    const group = rect.parentElement;
+    if (group) {
+      for (const text of Array.from(group.querySelectorAll("text, tspan"))) {
+        text.style.fill = INK_DARK;
+      }
+    }
+  }
+}
+function colorizeNotes(svg) {
+  for (const note of Array.from(svg.querySelectorAll("rect.note"))) {
+    note.style.fill = NOTE_FILL;
+    note.style.stroke = NOTE_STROKE;
+    note.style.strokeWidth = "1.8px";
+    note.setAttribute("rx", "6");
+    note.setAttribute("ry", "6");
+  }
+  for (const text of Array.from(svg.querySelectorAll(".noteText, .noteText tspan"))) {
+    text.style.fill = INK_DARK;
+  }
+}
+function styleLines(svg, ink) {
+  for (const line of Array.from(svg.querySelectorAll(".messageLine0, .messageLine1"))) {
+    line.style.stroke = ink;
+    line.style.strokeWidth = "1.8px";
+    line.style.strokeLinecap = "round";
+    line.style.strokeLinejoin = "round";
+  }
+  for (const marker of Array.from(
+    svg.querySelectorAll("marker path, .arrowhead, path.arrowMarkerPath")
+  )) {
+    marker.style.fill = ink;
+    marker.style.stroke = ink;
+  }
+  for (const life of Array.from(svg.querySelectorAll(".actor-line"))) {
+    life.style.stroke = ink;
+    life.style.strokeOpacity = "0.3";
+    life.style.strokeDasharray = "2 5";
+  }
+  for (const loop of Array.from(svg.querySelectorAll(".loopLine"))) {
+    loop.style.stroke = ink;
+    loop.style.strokeOpacity = "0.5";
+  }
+  for (const box of Array.from(svg.querySelectorAll("polygon.labelBox"))) {
+    box.style.fill = NOTE_FILL;
+    box.style.stroke = ink;
+    box.style.strokeOpacity = "0.6";
+  }
+  for (const text of Array.from(
+    svg.querySelectorAll(".messageText, .loopText, .labelText")
+  )) {
+    text.style.fill = ink;
+  }
+}
+function sketchifyDiagram(root, opts = {}) {
+  const svg = root instanceof SVGSVGElement ? root : root.querySelector("svg");
+  if (!svg || !isSequenceSvg(svg)) {
+    return false;
+  }
+  const ink = opts.dark === true ? "#e9ecef" : INK_DARK;
+  colorizeActors(svg);
+  colorizeNotes(svg);
+  styleLines(svg, ink);
+  applyHandwritingFont(svg);
+  ensureWobbleFilter(svg, opts.seed ?? DEFAULT_SEED);
+  wrapWithWobble(svg);
+  return true;
+}
+var fontPromises = /* @__PURE__ */ new Map();
+function ensureSketchFont(fontUrl = DEFAULT_VIRGIL_FONT_URL) {
+  if (typeof document === "undefined") {
+    return Promise.resolve();
+  }
+  const cached3 = fontPromises.get(fontUrl);
+  if (cached3) {
+    return cached3;
+  }
+  const promise = (async () => {
+    const styleId = `${FONT_FACE_ID}-${hashUrl(fontUrl)}`;
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = `@font-face{font-family:'Virgil';src:url("${fontUrl}") format('woff2');font-display:swap;}`;
+      document.head.appendChild(style);
+    }
+    try {
+      await document.fonts.load("16px 'Virgil'");
+    } catch {
+    }
+  })();
+  fontPromises.set(fontUrl, promise);
+  return promise;
+}
+function hashUrl(url) {
+  let hash = 0;
+  for (let i = 0; i < url.length; i += 1) {
+    hash = hash * 31 + url.charCodeAt(i) | 0;
+  }
+  return (hash >>> 0).toString(36);
+}
+
+// src/core/resolve-theme.ts
+function resolveTheme(theme, dark) {
+  if (theme === "colorful") {
+    return { base: dark ? "dark" : "default", look: "classic", postProcess: "colorful" };
+  }
+  if (theme === "sketch") {
+    return { base: dark ? "dark" : "default", look: "handDrawn", postProcess: "sketch" };
+  }
+  if (theme === "auto") {
+    return { base: dark ? "dark" : "default", look: "classic", postProcess: "none" };
+  }
+  return { base: theme, look: "classic", postProcess: "none" };
+}
+
+// src/core/render-pipeline.ts
+var renderSeq = 0;
+function buildConfig(args) {
+  const resolved = resolveTheme(args.theme, args.dark);
+  const htmlLabels = args.pristine ? false : true;
+  const config = {
+    startOnLoad: false,
+    theme: resolved.base,
+    securityLevel: "loose",
+    htmlLabels,
+    flowchart: { htmlLabels, useMaxWidth: false }
+  };
+  if (args.theme === "colorful") {
+    config.flowchart = { htmlLabels, useMaxWidth: false, nodeSpacing: 60, rankSpacing: 65, padding: 12 };
+  }
+  if (resolved.look === "handDrawn") {
+    config.look = "handDrawn";
+    config.handDrawnSeed = args.seed;
+    config.fontFamily = SKETCH_FONT;
+  }
+  if (args.mermaidConfig) {
+    const userFlowchart = args.mermaidConfig.flowchart ?? {};
+    Object.assign(config, args.mermaidConfig);
+    config.flowchart = { ...config.flowchart, ...userFlowchart };
+  }
+  return config;
+}
+async function renderToSvg(args) {
+  const resolved = resolveTheme(args.theme, args.dark);
+  if (resolved.look === "handDrawn") {
+    await ensureSketchFont(args.fontUrl);
+  }
+  args.mermaid.initialize(buildConfig(args));
+  renderSeq += 1;
+  const id = `rsm-${renderSeq}`;
+  const { svg } = await args.mermaid.render(id, args.code);
+  return { svgString: svg, id, postProcess: args.pristine ? "none" : resolved.postProcess };
+}
+function mountSvg(host, svgString, postProcess, opts) {
+  host.innerHTML = svgString;
+  const svg = host.querySelector("svg");
+  if (!svg) {
+    return null;
+  }
+  applyPostProcess(svg, postProcess, opts);
+  svg.style.maxWidth = "none";
+  svg.style.width = "100%";
+  svg.style.height = "100%";
+  return svg;
+}
+function applyPostProcess(svg, postProcess, opts) {
+  if (postProcess === "colorful") {
+    colorizeDiagram(svg, { dark: opts.dark });
+  } else if (postProcess === "sketch") {
+    sketchifyDiagram(svg, { dark: opts.dark, seed: opts.seed });
+  }
+}
+async function renderDiagram(opts) {
+  assertBrowser("renderDiagram");
+  const dark = opts.dark ?? false;
+  const seed = opts.seed ?? 42;
+  if (opts.injectStyles !== false) {
+    ensureStyles();
+  }
+  const mermaid = await loadMermaid({ source: opts.mermaid });
+  const { svgString, id, postProcess } = await renderToSvg({
+    code: opts.code,
+    theme: opts.theme ?? "colorful",
+    dark,
+    seed,
+    fontUrl: opts.fontUrl,
+    mermaidConfig: opts.mermaidConfig,
+    mermaid
+  });
+  const host = typeof opts.container === "string" ? document.querySelector(opts.container) : opts.container ?? document.createElement("div");
+  if (!host) {
+    throw new Error(`[react-super-mermaid] \u627E\u4E0D\u5230 container:${String(opts.container)}`);
+  }
+  const svg = mountSvg(host, svgString, postProcess, { dark, seed });
+  if (!svg) {
+    throw new Error("[react-super-mermaid] mermaid \u672A\u8F38\u51FA SVG\u3002");
+  }
+  return { svg, svgString, id };
+}
+
+// src/core/pan-zoom.ts
+function attachPanZoom(svg, factory, opts = {}) {
+  let baseZoom = 1;
+  const pz = factory(svg, {
+    zoomEnabled: true,
+    panEnabled: true,
+    controlIconsEnabled: false,
+    dblClickZoomEnabled: false,
+    fit: true,
+    center: true,
+    minZoom: opts.minZoom ?? 0.05,
+    maxZoom: opts.maxZoom ?? 40,
+    zoomScaleSensitivity: opts.zoomScaleSensitivity ?? 0.25,
+    onZoom: () => opts.onZoom?.()
+  });
+  baseZoom = pz.getZoom() || 1;
+  const controller = {
+    zoomIn: () => pz.zoomBy(1.25),
+    zoomOut: () => pz.zoomBy(0.8),
+    getZoomPercent: () => Math.round(pz.getZoom() / (baseZoom || 1) * 100),
+    actualSize: () => pz.zoom(baseZoom),
+    reset: () => {
+      pz.resize();
+      pz.fit();
+      pz.center();
+      baseZoom = pz.getZoom() || 1;
+      opts.onZoom?.();
+    },
+    fit: () => {
+      const sizes = pz.getSizes();
+      const targetReal = (sizes.width - 48) / sizes.viewBox.width;
+      pz.zoomBy(targetReal / sizes.realZoom);
+      opts.onZoom?.();
+    },
+    panToElement: (el) => {
+      const vp = svg.querySelector(".svg-pan-zoom_viewport");
+      const g = el;
+      if (!vp || typeof g.getBBox !== "function") {
+        return;
+      }
+      const vpCtm = vp.getCTM();
+      const elCtm = g.getCTM();
+      if (!vpCtm || !elCtm) {
+        return;
+      }
+      let bb;
+      try {
+        bb = g.getBBox();
+      } catch {
+        return;
+      }
+      const m = vpCtm.inverse().multiply(elCtm);
+      const c = new DOMPoint(bb.x + bb.width / 2, bb.y + bb.height / 2).matrixTransform(m);
+      const sizes = pz.getSizes();
+      pz.pan({
+        x: sizes.width / 2 - c.x * sizes.realZoom,
+        y: sizes.height / 2 - c.y * sizes.realZoom
+      });
+    },
+    capture: () => {
+      try {
+        return { zoom: pz.getZoom(), pan: pz.getPan() };
+      } catch {
+        return null;
+      }
+    },
+    restore: (view) => {
+      pz.zoom(view.zoom);
+      pz.pan(view.pan);
+    },
+    destroy: () => {
+      try {
+        pz.destroy();
+      } catch {
+      }
+    }
+  };
+  return controller;
+}
+
+// src/core/search.ts
+var DIMMABLE_SELECTOR = "g.node, g.cluster, .actor";
+var EMPTY = { current: 0, total: 0 };
+function createSearch(getSvg, panTo) {
+  let matches = [];
+  let current = -1;
+  let query = "";
+  function clearHighlights() {
+    const svg = getSvg();
+    if (!svg) {
+      return;
+    }
+    for (const el of Array.from(svg.querySelectorAll(".rsm-dim, .rsm-hit"))) {
+      el.classList.remove("rsm-dim", "rsm-hit");
+    }
+  }
+  function setCurrent(i, pan) {
+    if (matches.length === 0) {
+      return EMPTY;
+    }
+    if (current >= 0) {
+      matches[current]?.classList.remove("rsm-hit");
+    }
+    const next = (i % matches.length + matches.length) % matches.length;
+    current = next;
+    const el = matches[next];
+    el.classList.add("rsm-hit");
+    if (pan) {
+      panTo?.(el);
+    }
+    return { current: next + 1, total: matches.length };
+  }
+  function run(term, pan) {
+    query = term;
+    clearHighlights();
+    matches = [];
+    current = -1;
+    const svg = getSvg();
+    const q = term.trim().toLowerCase();
+    if (!svg || !q) {
+      return EMPTY;
+    }
+    const seen = /* @__PURE__ */ new Set();
+    for (const textEl of Array.from(svg.querySelectorAll("text, .nodeLabel"))) {
+      if (!(textEl.textContent ?? "").toLowerCase().includes(q)) {
+        continue;
+      }
+      const target = textEl.closest(DIMMABLE_SELECTOR) ?? textEl;
+      if (!seen.has(target)) {
+        seen.add(target);
+        matches.push(target);
+      }
+    }
+    if (matches.length === 0) {
+      return EMPTY;
+    }
+    for (const el of Array.from(svg.querySelectorAll(DIMMABLE_SELECTOR))) {
+      const dimTarget = el.classList.contains("actor") ? el.parentElement ?? el : el;
+      dimTarget.classList.add("rsm-dim");
+    }
+    for (const match of matches) {
+      match.classList.remove("rsm-dim");
+    }
+    return setCurrent(0, pan);
+  }
+  return {
+    search: (term, pan = true) => run(term, pan),
+    next: (pan = true) => setCurrent(current + 1, pan),
+    prev: (pan = true) => setCurrent(current - 1, pan),
+    rerun: (pan = false) => query.trim() ? run(query, pan) : EMPTY,
+    clear: () => {
+      clearHighlights();
+      matches = [];
+      current = -1;
+      query = "";
+    },
+    getQuery: () => query
+  };
+}
+
+// src/core/export.ts
+var RASTER_MIME = {
+  png: "image/png",
+  jpeg: "image/jpeg",
+  webp: "image/webp"
+};
+function sizeFromViewBox(svgEl) {
+  const viewBox = (svgEl.getAttribute("viewBox") ?? "0 0 800 600").split(/[\s,]+/).map(Number);
+  return {
+    width: Math.max(1, Math.ceil(viewBox[2] || 800)),
+    height: Math.max(1, Math.ceil(viewBox[3] || 600))
+  };
+}
+function finalizePrepared(svgEl) {
+  const { width, height } = sizeFromViewBox(svgEl);
+  svgEl.setAttribute("width", String(width));
+  svgEl.setAttribute("height", String(height));
+  svgEl.removeAttribute("style");
+  const serialized = new XMLSerializer().serializeToString(svgEl);
+  return { serialized, width, height, hasForeignObject: serialized.includes("<foreignObject") };
+}
+function prepareSvgString(svgText) {
+  const holder = document.createElement("div");
+  holder.innerHTML = svgText;
+  const svgEl = holder.querySelector("svg");
+  if (!svgEl) {
+    return void 0;
+  }
+  return finalizePrepared(svgEl);
+}
+function prepareSvgElement(svg) {
+  return finalizePrepared(svg);
+}
+function serializeLiveSvg(svg) {
+  const clone = svg.cloneNode(true);
+  const vp = clone.querySelector(".svg-pan-zoom_viewport");
+  if (vp) {
+    vp.removeAttribute("transform");
+    vp.style.transform = "";
+  }
+  return finalizePrepared(clone);
+}
+function svgBlob(serialized) {
+  const xml = serialized.startsWith("<?xml") ? serialized : '<?xml version="1.0" encoding="UTF-8"?>\n' + serialized;
+  return new Blob([xml], { type: "image/svg+xml;charset=utf-8" });
+}
+async function rasterizeToBlob(prepared, opts = {}) {
+  const scale = opts.scale ?? 2;
+  const type = opts.type ?? "png";
+  const mime = RASTER_MIME[type];
+  const transparent = opts.transparent === true;
+  const blob = new Blob([prepared.serialized], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  try {
+    const img = new Image();
+    await new Promise((resolve3, reject) => {
+      img.onload = () => resolve3();
+      img.onerror = () => reject(new Error("\u7121\u6CD5\u9EDE\u9663\u5316 SVG(\u5716\u7247\u8F09\u5165\u5931\u6557)\u3002"));
+      img.src = url;
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, Math.round(prepared.width * scale));
+    canvas.height = Math.max(1, Math.round(prepared.height * scale));
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("\u53D6\u4E0D\u5230 Canvas 2D context\u3002");
+    }
+    if (!transparent || mime === "image/jpeg") {
+      ctx.fillStyle = opts.background ?? (opts.dark ? "#111827" : "#ffffff");
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    ctx.scale(scale, scale);
+    ctx.drawImage(img, 0, 0, prepared.width, prepared.height);
+    return await canvasToBlob(canvas, mime, type === "png" ? void 0 : opts.quality ?? 0.92);
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+function canvasToBlob(canvas, mime, quality) {
+  return new Promise((resolve3, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve3(blob);
+        } else {
+          reject(new Error("\u532F\u51FA\u5931\u6557:\u6B64\u5716\u542B HTML \u6A19\u7C64(foreignObject),\u8ACB\u6539\u7528 SVG \u532F\u51FA\u3002"));
+        }
+      },
+      mime,
+      quality
+    );
+  });
+}
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+
+// src/react/useMermaidViewer.ts
+function useMermaidViewer(opts) {
+  const {
+    code,
+    theme,
+    dark,
+    seed,
+    fontUrl,
+    mermaidConfig,
+    mermaid,
+    svgPanZoom,
+    panZoom,
+    injectStyles,
+    onRender,
+    onError
+  } = opts;
+  const [status, setStatus] = useState("loading");
+  const [error, setError] = useState("");
+  const [zoomPercent, setZoomPercent] = useState(100);
+  const stageRef = useRef(null);
+  const svgRef = useRef(null);
+  const pzRef = useRef(null);
+  const prevCodeRef = useRef(null);
+  const mermaidSourceRef = useRef(mermaid);
+  const cfgRef = useRef({ theme, dark, seed, fontUrl, mermaidConfig, code });
+  mermaidSourceRef.current = mermaid;
+  cfgRef.current = { theme, dark, seed, fontUrl, mermaidConfig, code };
+  const getSvg = useCallback(() => svgRef.current, []);
+  const searchRef = useRef(null);
+  const searchController = searchRef.current ?? (searchRef.current = createSearch(
+    getSvg,
+    (el) => pzRef.current?.panToElement(el)
+  ));
+  const syncZoom = useCallback(() => {
+    const pct = pzRef.current?.getZoomPercent();
+    if (typeof pct === "number" && Number.isFinite(pct)) {
+      setZoomPercent(pct);
+    }
+  }, []);
+  const mermaidConfigKey = useMemo(
+    () => mermaidConfig ? JSON.stringify(mermaidConfig) : "",
+    [mermaidConfig]
+  );
+  useEffect(() => {
+    let cancelled = false;
+    const host = stageRef.current;
+    if (!host) {
+      return void 0;
+    }
+    if (injectStyles) {
+      ensureStyles();
+    }
+    const keepView = prevCodeRef.current === code;
+    const run = async () => {
+      setStatus("loading");
+      setError("");
+      try {
+        const mermaidInst = await loadMermaid({ source: mermaidSourceRef.current });
+        const { svgString, postProcess } = await renderToSvg({
+          code,
+          theme,
+          dark,
+          seed,
+          fontUrl,
+          mermaidConfig,
+          mermaid: mermaidInst
+        });
+        if (cancelled) {
+          return;
+        }
+        const prevView = keepView ? pzRef.current?.capture() ?? null : null;
+        pzRef.current?.destroy();
+        pzRef.current = null;
+        const svg = mountSvg(host, svgString, postProcess, { dark, seed });
+        if (!svg) {
+          throw new Error("mermaid \u672A\u8F38\u51FA SVG\u3002");
+        }
+        svgRef.current = svg;
+        if (panZoom) {
+          const factory = await loadSvgPanZoom(svgPanZoom);
+          if (cancelled) {
+            return;
+          }
+          if (factory) {
+            pzRef.current = attachPanZoom(svg, factory, { onZoom: syncZoom });
+            if (prevView) {
+              pzRef.current.restore(prevView);
+            }
+            syncZoom();
+          }
+        }
+        prevCodeRef.current = code;
+        setStatus("ready");
+        onRender?.(svg);
+        searchController.rerun(false);
+      } catch (e) {
+        if (cancelled) {
+          return;
+        }
+        const err = e instanceof Error ? e : new Error(String(e));
+        setError(err.message);
+        setStatus("error");
+        onError?.(err);
+      }
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [code, theme, dark, seed, fontUrl, mermaidConfigKey, panZoom, injectStyles]);
+  useEffect(() => {
+    return () => {
+      pzRef.current?.destroy();
+      pzRef.current = null;
+    };
+  }, []);
+  const zoomIn = useCallback(() => pzRef.current?.zoomIn(), []);
+  const zoomOut = useCallback(() => pzRef.current?.zoomOut(), []);
+  const fit = useCallback(() => pzRef.current?.fit(), []);
+  const reset = useCallback(() => pzRef.current?.reset(), []);
+  const actualSize = useCallback(() => pzRef.current?.actualSize(), []);
+  const getZoomPercent = useCallback(() => pzRef.current?.getZoomPercent() ?? 100, []);
+  const search = useCallback(
+    (term, pan = true) => searchController.search(term, pan),
+    [searchController]
+  );
+  const next = useCallback((pan = true) => searchController.next(pan), [searchController]);
+  const prev = useCallback((pan = true) => searchController.prev(pan), [searchController]);
+  const clearSearch = useCallback(() => searchController.clear(), [searchController]);
+  const exportSvg = useCallback(() => {
+    const svg = svgRef.current;
+    if (!svg) {
+      throw new Error("[react-super-mermaid] \u5C1A\u7121\u53EF\u532F\u51FA\u7684\u5716\u8868\u3002");
+    }
+    const prepared = serializeLiveSvg(svg);
+    return '<?xml version="1.0" encoding="UTF-8"?>\n' + prepared.serialized;
+  }, []);
+  const exportPng = useCallback(async (rasterOpts = {}) => {
+    const svg = svgRef.current;
+    if (!svg) {
+      throw new Error("[react-super-mermaid] \u5C1A\u7121\u53EF\u532F\u51FA\u7684\u5716\u8868\u3002");
+    }
+    const cfg = cfgRef.current;
+    let prepared = serializeLiveSvg(svg);
+    try {
+      const mermaidInst = await loadMermaid({ source: mermaidSourceRef.current });
+      const { svgString } = await renderToSvg({
+        code: cfg.code,
+        theme: cfg.theme,
+        dark: cfg.dark,
+        seed: cfg.seed,
+        fontUrl: cfg.fontUrl,
+        mermaidConfig: cfg.mermaidConfig,
+        mermaid: mermaidInst,
+        pristine: true
+      });
+      const holder = document.createElement("div");
+      holder.innerHTML = svgString;
+      const pristineSvg = holder.querySelector("svg");
+      if (pristineSvg) {
+        applyPostProcess(pristineSvg, resolveTheme(cfg.theme, cfg.dark).postProcess, {
+          dark: cfg.dark,
+          seed: cfg.seed
+        });
+        prepared = prepareSvgElement(pristineSvg);
+      }
+    } catch {
+    }
+    return rasterizeToBlob(prepared, { ...rasterOpts, dark: cfg.dark });
+  }, []);
+  const downloadSvg = useCallback(
+    (filename = "diagram.svg") => {
+      downloadBlob(svgBlob(exportSvg()), filename);
+    },
+    [exportSvg]
+  );
+  const downloadPng = useCallback(
+    async (filename = "diagram.png", rasterOpts = {}) => {
+      const blob = await exportPng(rasterOpts);
+      downloadBlob(blob, filename);
+    },
+    [exportPng]
+  );
+  return {
+    stageRef,
+    status,
+    error,
+    zoomPercent,
+    zoomIn,
+    zoomOut,
+    fit,
+    reset,
+    actualSize,
+    getZoomPercent,
+    search,
+    next,
+    prev,
+    clearSearch,
+    exportSvg,
+    exportPng,
+    downloadSvg,
+    downloadPng,
+    getSvg
+  };
+}
+var DEFAULT_THEME_OPTIONS = [
+  { value: "colorful", label: "Colorful" },
+  { value: "sketch", label: "Excalidraw" },
+  { value: "auto", label: "Auto" },
+  { value: "default", label: "Light" },
+  { value: "dark", label: "Dark" },
+  { value: "neutral", label: "Neutral" },
+  { value: "forest", label: "Forest" }
+];
+function Toolbar(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "rsm-toolbar", children: [
+    /* @__PURE__ */ jsxs("label", { className: "rsm-label", children: [
+      "\u6A23\u5F0F",
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: "rsm-select",
+          value: props.theme,
+          onChange: (e) => props.onThemeChange(e.target.value),
+          children: props.themeOptions.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rsm-toolbar-spacer" }),
+    props.searchEnabled ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "rsm-btn",
+        "aria-pressed": props.searchOpen,
+        onClick: props.onToggleSearch,
+        title: "\u5728\u5716\u4E2D\u641C\u5C0B\uFF08/ \u6216 Ctrl+F\uFF09",
+        children: "\u{1F50D} \u641C\u5C0B"
+      }
+    ) : null,
+    props.exportEnabled ? /* @__PURE__ */ jsxs("div", { className: "rsm-toolbar-group", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "rsm-btn",
+          onClick: props.onExportSvg,
+          disabled: props.exporting,
+          title: "\u532F\u51FA SVG",
+          children: "\u2B07 SVG"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "rsm-btn",
+          onClick: props.onExportPng,
+          disabled: props.exporting,
+          title: "\u532F\u51FA PNG\uFF082x\uFF09",
+          children: props.exporting ? "\u532F\u51FA\u4E2D\u2026" : "\u2B07 PNG"
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "rsm-zoom", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: props.onZoomOut, title: "\u7E2E\u5C0F\uFF08-\uFF09", children: "\uFF0D" }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "rsm-zoom-percent",
+          onClick: props.onActualSize,
+          title: "\u5BE6\u969B\u5927\u5C0F\uFF081\uFF09",
+          children: [
+            props.zoomPercent,
+            "%"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: props.onZoomIn, title: "\u653E\u5927\uFF08+\uFF09", children: "\uFF0B" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: props.onReset, title: "\u7B26\u5408\u8996\u7A97\uFF080\uFF09", children: "\u2922" })
+    ] })
+  ] });
+}
+function usePrefersDark(explicit) {
+  const [autoDark, setAutoDark] = useState(false);
+  useEffect(() => {
+    if (explicit !== void 0 || typeof window === "undefined" || !window.matchMedia) {
+      return void 0;
+    }
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setAutoDark(mq.matches);
+    const handler = (e) => setAutoDark(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [explicit]);
+  return explicit ?? autoDark;
+}
+var MermaidViewer = forwardRef(
+  function MermaidViewer2(props, ref) {
+    const {
+      code,
+      toolbar = true,
+      themeOptions = DEFAULT_THEME_OPTIONS,
+      panZoom = true,
+      search: searchEnabled = true,
+      exportable = true,
+      keyboard = true,
+      seed = 42,
+      fontUrl,
+      mermaid,
+      mermaidConfig,
+      svgPanZoom,
+      injectStyles = true,
+      className,
+      style,
+      onRender,
+      onError
+    } = props;
+    const dark = usePrefersDark(props.dark);
+    const [theme, setTheme] = useState(props.theme ?? "colorful");
+    useEffect(() => {
+      if (props.theme) {
+        setTheme(props.theme);
+      }
+    }, [props.theme]);
+    const [searchOpen, setSearchOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const [matchInfo, setMatchInfo] = useState({ current: 0, total: 0 });
+    const [exporting, setExporting] = useState(false);
+    const rootRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const vm = useMermaidViewer({
+      code,
+      theme,
+      dark,
+      seed,
+      fontUrl,
+      mermaidConfig,
+      mermaid,
+      svgPanZoom,
+      panZoom,
+      injectStyles,
+      onRender,
+      onError
+    });
+    const runSearch = useCallback(
+      (term, pan) => {
+        setMatchInfo(vm.search(term, pan));
+      },
+      [vm]
+    );
+    const openSearch = useCallback(() => {
+      setSearchOpen(true);
+      window.setTimeout(() => {
+        searchInputRef.current?.focus();
+        searchInputRef.current?.select();
+      }, 0);
+      if (query.trim()) {
+        runSearch(query, true);
+      }
+    }, [query, runSearch]);
+    const closeSearch = useCallback(() => {
+      setSearchOpen(false);
+      vm.clearSearch();
+      setQuery("");
+      setMatchInfo({ current: 0, total: 0 });
+    }, [vm]);
+    const toggleSearch = useCallback(() => {
+      if (searchOpen) {
+        closeSearch();
+      } else {
+        openSearch();
+      }
+    }, [searchOpen, openSearch, closeSearch]);
+    const exportSvg = useCallback(() => {
+      try {
+        vm.downloadSvg("diagram.svg");
+      } catch (e) {
+        onError?.(e instanceof Error ? e : new Error(String(e)));
+      }
+    }, [vm, onError]);
+    const exportPng = useCallback(async () => {
+      setExporting(true);
+      try {
+        await vm.downloadPng("diagram.png", { scale: 2 });
+      } catch (e) {
+        onError?.(e instanceof Error ? e : new Error(String(e)));
+      } finally {
+        setExporting(false);
+      }
+    }, [vm, onError]);
+    useEffect(() => {
+      if (!keyboard) {
+        return void 0;
+      }
+      const root = rootRef.current;
+      if (!root) {
+        return void 0;
+      }
+      const onKey = (e) => {
+        const target = e.target;
+        const typing = target ? /^(input|textarea|select)$/i.test(target.tagName) : false;
+        if ((e.ctrlKey || e.metaKey) && (e.key === "f" || e.key === "F")) {
+          e.preventDefault();
+          openSearch();
+          return;
+        }
+        if (e.key === "/" && !typing) {
+          e.preventDefault();
+          openSearch();
+          return;
+        }
+        if (e.key === "Escape" && searchOpen) {
+          closeSearch();
+          return;
+        }
+        if (typing) {
+          return;
+        }
+        if (e.key === "+" || e.key === "=") {
+          vm.zoomIn();
+        } else if (e.key === "-" || e.key === "_") {
+          vm.zoomOut();
+        } else if (e.key === "0") {
+          vm.reset();
+        } else if (e.key === "1") {
+          vm.actualSize();
+        } else if (e.key === "w" || e.key === "W") {
+          vm.fit();
+        }
+      };
+      root.addEventListener("keydown", onKey);
+      return () => root.removeEventListener("keydown", onKey);
+    }, [keyboard, searchOpen, openSearch, closeSearch, vm]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        zoomIn: vm.zoomIn,
+        zoomOut: vm.zoomOut,
+        fit: vm.fit,
+        reset: vm.reset,
+        actualSize: vm.actualSize,
+        getZoomPercent: vm.getZoomPercent,
+        search: (term) => vm.search(term),
+        next: () => vm.next(),
+        prev: () => vm.prev(),
+        clearSearch: vm.clearSearch,
+        exportSvg: vm.exportSvg,
+        exportPng: vm.exportPng,
+        downloadSvg: vm.downloadSvg,
+        downloadPng: vm.downloadPng,
+        getSvg: vm.getSvg
+      }),
+      [vm]
+    );
+    let countText = "";
+    if (matchInfo.total > 0) {
+      countText = `${matchInfo.current}/${matchInfo.total}`;
+    } else if (query.trim()) {
+      countText = "0";
+    }
+    const rootClassName = ["rsm-root", dark ? "rsm-dark" : "", className ?? ""].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: rootClassName,
+        style,
+        tabIndex: keyboard ? 0 : void 0,
+        children: [
+          toolbar ? /* @__PURE__ */ jsx(
+            Toolbar,
+            {
+              theme,
+              themeOptions,
+              onThemeChange: setTheme,
+              zoomPercent: vm.zoomPercent,
+              onZoomIn: vm.zoomIn,
+              onZoomOut: vm.zoomOut,
+              onActualSize: vm.actualSize,
+              onReset: vm.reset,
+              searchEnabled,
+              searchOpen,
+              onToggleSearch: toggleSearch,
+              exportEnabled: exportable,
+              exporting,
+              onExportSvg: exportSvg,
+              onExportPng: exportPng
+            }
+          ) : null,
+          toolbar && searchEnabled && searchOpen ? /* @__PURE__ */ jsxs("div", { className: "rsm-searchbar", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: searchInputRef,
+                className: "rsm-input",
+                type: "text",
+                value: query,
+                spellCheck: false,
+                placeholder: "\u5728\u5716\u4E2D\u641C\u5C0B\u2026\uFF08Enter \u4E0B\u4E00\u500B / Shift+Enter \u4E0A\u4E00\u500B\uFF09",
+                onChange: (e) => {
+                  setQuery(e.target.value);
+                  runSearch(e.target.value, true);
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    setMatchInfo(e.shiftKey ? vm.prev() : vm.next());
+                  } else if (e.key === "Escape") {
+                    e.preventDefault();
+                    closeSearch();
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "rsm-count", children: countText }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "rsm-btn", onClick: () => setMatchInfo(vm.prev()), children: "\u4E0A\u4E00\u500B" }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "rsm-btn", onClick: () => setMatchInfo(vm.next()), children: "\u4E0B\u4E00\u500B" }),
+            /* @__PURE__ */ jsx("div", { className: "rsm-searchbar-spacer" }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "rsm-btn", onClick: closeSearch, children: "\u2715 \u95DC\u9589" })
+          ] }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "rsm-canvas", children: [
+            vm.status === "loading" ? /* @__PURE__ */ jsx("div", { className: "rsm-overlay", children: "\u5716\u8868\u6E32\u67D3\u4E2D\u2026" }) : null,
+            vm.status === "error" ? /* @__PURE__ */ jsxs("div", { className: "rsm-overlay rsm-error", children: [
+              "\u5716\u8868\u8F09\u5165\u5931\u6557\uFF1A",
+              vm.error
+            ] }) : null,
+            /* @__PURE__ */ jsx("div", { ref: vm.stageRef, className: "rsm-stage" })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var MermaidDiagram = forwardRef(
+  function MermaidDiagram2(props, ref) {
+    return /* @__PURE__ */ jsx(MermaidViewer, { ref, toolbar: false, ...props });
+  }
+);
+
+export { DEFAULT_THEME_OPTIONS, DEFAULT_VIRGIL_FONT_URL, MermaidDiagram, MermaidViewer, SKETCH_FONT, Toolbar, colorizeDiagram, downloadBlob, ensureSketchFont, ensureStyles, loadMermaid, loadSvgPanZoom, prepareSvgElement, prepareSvgString, rasterizeToBlob, renderDiagram, resolveTheme, serializeLiveSvg, sketchifyDiagram, svgBlob, useMermaidViewer };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map