react-super-mermaid 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -108,6 +108,7 @@ var RSM_CSS = `
   --rsm-hover: #f3f4f6;
   --rsm-surface: #ffffff;
   --rsm-canvas-bg: transparent;
+  --rsm-grid-dot: rgba(0, 0, 0, 0.08);
   --rsm-radius: 8px;
   display: flex;
   flex-direction: column;
@@ -245,6 +246,71 @@ var RSM_CSS = `
   --rsm-accent: #60a5fa;
   --rsm-hover: #1f2937;
   --rsm-surface: #111827;
+  --rsm-grid-dot: rgba(255, 255, 255, 0.10);
+}
+
+/* \u2500\u2500 \u80CC\u666F\u6A21\u5F0F \u2500\u2500 \u900F\u660E(\u9810\u8A2D,\u8DDF\u96A8\u9801\u9762) / \u7D14\u8272(surface) / \u9EDE\u9663\u683C\u7DDA\u3002 */
+.rsm-root.rsm-bg-solid .rsm-canvas { background: var(--rsm-surface); }
+.rsm-root.rsm-bg-grid .rsm-canvas {
+  background-color: var(--rsm-surface);
+  background-image: radial-gradient(var(--rsm-grid-dot) 1px, transparent 1px);
+  background-size: 18px 18px;
+  background-position: -9px -9px;
+}
+
+/* \u2500\u2500 \u5168\u87A2\u5E55\u8DF3\u7A97 \u2500\u2500 position:fixed \u8986\u84CB\u6574\u500B\u8996\u7A97,RWD \u53CB\u5584\u3002 */
+.rsm-root.rsm-fullscreen {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  width: 100dvw;
+  height: 100vh;
+  height: 100dvh;
+  max-width: 100vw;
+  max-height: 100dvh;
+  margin: 0;
+  z-index: 2147483000;
+  border: 0;
+  border-radius: 0;
+  animation: rsm-fs-in 0.16s ease-out;
+}
+@keyframes rsm-fs-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* \u5168\u87A2\u5E55\u53F3\u4E0A\u89D2\u7684\u96E2\u958B\u9215(toolbar \u96B1\u85CF\u6642\u4E5F\u80FD\u95DC\u9589)\u3002 */
+.rsm-fs-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 5;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  font-size: 16px;
+  line-height: 1;
+  border: 1px solid var(--rsm-border);
+  border-radius: 8px;
+  background: var(--rsm-surface);
+  color: var(--rsm-fg);
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.rsm-fs-close:hover { background: var(--rsm-hover); }
+
+/* \u2500\u2500 RWD \u2500\u2500 \u5C0F\u87A2\u5E55\u6536\u7DCA toolbar\u3001\u7E2E\u77ED\u641C\u5C0B\u6846,\u907F\u514D\u63DB\u884C\u64E0\u58D3\u756B\u5E03\u3002 */
+@media (max-width: 640px) {
+  .rsm-toolbar { gap: 6px; padding: 6px 8px; }
+  .rsm-btn { padding: 4px 8px; font-size: 12px; }
+  .rsm-label { font-size: 11px; }
+  .rsm-select { padding: 3px 6px; font-size: 12px; }
+  .rsm-zoom > button { padding: 4px 8px; font-size: 12px; }
+  .rsm-input { flex-basis: 150px; }
 }
 `;
 
@@ -282,16 +348,88 @@ var NODE_PALETTE = [
   // 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" }
+  { fill: "rgba(59, 130, 246, 0.16)", stroke: "#3B82F6" },
+  // blue
+  { fill: "rgba(34, 197, 94, 0.16)", stroke: "#22C55E" },
+  // green
+  { fill: "rgba(249, 115, 22, 0.16)", stroke: "#F97316" },
+  // orange
+  { fill: "rgba(168, 85, 247, 0.16)", stroke: "#A855F7" },
+  // purple
+  { fill: "rgba(239, 68, 68, 0.16)", stroke: "#EF4444" },
+  // red
+  { fill: "rgba(6, 182, 212, 0.16)", stroke: "#06B6D4" },
+  // cyan
+  { fill: "rgba(234, 179, 8, 0.16)", stroke: "#EAB308" },
+  // yellow
+  { fill: "rgba(139, 92, 246, 0.16)", stroke: "#8B5CF6" }
+  // violet
+];
+var PIE_PALETTE = [
+  "#3B82F6",
+  // blue
+  "#22C55E",
+  // green
+  "#F59E0B",
+  // amber
+  "#A855F7",
+  // purple
+  "#EF4444",
+  // red
+  "#06B6D4",
+  // cyan
+  "#EC4899",
+  // pink
+  "#84CC16",
+  // lime
+  "#F97316",
+  // orange
+  "#14B8A6",
+  // teal
+  "#6366F1",
+  // indigo
+  "#EAB308"
+  // yellow
 ];
 var NODE_TEXT = "#1F2937";
 var SHADOW_FILTER_ID = "rsm-soft-shadow";
 var SVG_NS = "http://www.w3.org/2000/svg";
+function resolveSvg(root) {
+  if (root instanceof Element && root.tagName.toLowerCase() === "svg") {
+    return root;
+  }
+  return root.querySelector("svg");
+}
+function canonColor(input) {
+  const s = (input || "").trim();
+  const hex = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(s);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3) {
+      h = h.split("").map((c) => c + c).join("");
+    }
+    const n = parseInt(h, 16);
+    return `${n >> 16 & 255},${n >> 8 & 255},${n & 255}`;
+  }
+  const rgb = /rgba?\(([^)]+)\)/i.exec(s);
+  if (rgb) {
+    const p = rgb[1].split(",").map((x) => Math.round(parseFloat(x)));
+    return `${p[0]},${p[1]},${p[2]}`;
+  }
+  return s.toLowerCase();
+}
+function readableTextOn(color) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(color.trim());
+  if (!m) {
+    return "#FFFFFF";
+  }
+  const n = parseInt(m[1], 16);
+  const r = n >> 16 & 255;
+  const g = n >> 8 & 255;
+  const b = n & 255;
+  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return lum > 0.62 ? "#1F2937" : "#FFFFFF";
+}
 function ensureShadowFilter(svg) {
   if (svg.querySelector(`#${SHADOW_FILTER_ID}`)) {
     return;
@@ -397,6 +535,17 @@ function styleEdgeLabels(svg) {
     rect.setAttribute("ry", "4");
   }
 }
+function styleLabelText(svg, dark) {
+  const color = dark ? "#E2E8F0" : NODE_TEXT;
+  for (const t of Array.from(
+    svg.querySelectorAll("text.messageText, .edgeLabel text, .edgeLabel tspan")
+  )) {
+    t.style.fill = color;
+  }
+  for (const t of Array.from(svg.querySelectorAll(".edgeLabel span, .edgeLabel p"))) {
+    t.style.color = color;
+  }
+}
 function colorizeLegacyEr(svg) {
   const erGroups = [];
   for (const rect of Array.from(svg.querySelectorAll("rect.er.entityBox"))) {
@@ -508,12 +657,194 @@ function colorizeSequence(svg, dark) {
     text.style.fill = dark ? "#E2E8F0" : NODE_TEXT;
   }
 }
+function stylePie(svg, dark) {
+  const slices = Array.from(svg.querySelectorAll("path.pieCircle"));
+  const swatches = Array.from(svg.querySelectorAll("g.legend rect"));
+  if (slices.length === 0 && swatches.length === 0) {
+    return;
+  }
+  const remap = /* @__PURE__ */ new Map();
+  let next = 0;
+  const newColorFor = (old) => {
+    const key = canonColor(old) || `#slot-${next}`;
+    let c = remap.get(key);
+    if (!c) {
+      c = PIE_PALETTE[next % PIE_PALETTE.length];
+      remap.set(key, c);
+      next += 1;
+    }
+    return c;
+  };
+  for (const slice of slices) {
+    const old = slice.style.fill || slice.getAttribute("fill") || "";
+    const c = newColorFor(old);
+    slice.style.fill = c;
+    slice.style.opacity = "1";
+    slice.style.stroke = dark ? "#0F172A" : "#FFFFFF";
+    slice.style.strokeWidth = "2px";
+    slice.style.strokeLinejoin = "round";
+  }
+  for (const sw of swatches) {
+    const old = sw.style.fill || sw.getAttribute("fill") || "";
+    const c = newColorFor(old);
+    sw.style.fill = c;
+    sw.style.stroke = c;
+    sw.setAttribute("rx", "3");
+    sw.setAttribute("ry", "3");
+  }
+  Array.from(svg.querySelectorAll("text.slice")).forEach((label, i) => {
+    const slice = slices[i];
+    const c = slice ? slice.style.fill || PIE_PALETTE[0] : PIE_PALETTE[0];
+    label.style.fill = readableTextOn(c);
+    label.style.fontWeight = "600";
+  });
+  for (const title of Array.from(svg.querySelectorAll("text.pieTitleText"))) {
+    title.style.fontWeight = "700";
+    title.style.fill = dark ? "#E2E8F0" : "#1F2937";
+  }
+  for (const t of Array.from(svg.querySelectorAll("g.legend text"))) {
+    t.style.fill = dark ? "#E2E8F0" : "#1F2937";
+  }
+  for (const oc of Array.from(svg.querySelectorAll("circle.pieOuterCircle"))) {
+    oc.style.stroke = dark ? "#334155" : "#CBD5E1";
+  }
+}
+function styleGantt(svg, dark) {
+  const tasks = Array.from(svg.querySelectorAll("rect.task"));
+  if (tasks.length === 0) {
+    return;
+  }
+  for (const task of tasks) {
+    const cls = task.getAttribute("class") ?? "";
+    if (/\b(done|active|crit|milestone)\d*\b/.test(cls)) {
+      continue;
+    }
+    const m = cls.match(/task(\d+)/);
+    if (!m) {
+      continue;
+    }
+    const entry = NODE_PALETTE[Number(m[1]) % NODE_PALETTE.length];
+    task.style.fill = entry.fill;
+    task.style.stroke = entry.stroke;
+    task.setAttribute("rx", "4");
+    task.setAttribute("ry", "4");
+  }
+  Array.from(svg.querySelectorAll("rect.section")).forEach((band) => {
+    const m = (band.getAttribute("class") ?? "").match(/section(\d+)/);
+    if (m) {
+      band.style.fill = CLUSTER_PALETTE[Number(m[1]) % CLUSTER_PALETTE.length].fill;
+    }
+  });
+  for (const inBar of Array.from(svg.querySelectorAll("text.taskText"))) {
+    if (!/Outside/.test(inBar.getAttribute("class") ?? "")) {
+      inBar.style.fill = NODE_TEXT;
+    }
+  }
+  for (const tick of Array.from(svg.querySelectorAll("g.grid g.tick line"))) {
+    tick.style.stroke = dark ? "#334155" : "#E2E8F0";
+  }
+}
+function styleTimeline(svg) {
+  const nodes = Array.from(svg.querySelectorAll('g[class*="timeline-node"]'));
+  nodes.forEach((node, i) => {
+    const m = (node.getAttribute("class") ?? "").match(/section-(-?\d+)/);
+    const section = m ? Number(m[1]) : i;
+    const entry = section < 0 ? NODE_PALETTE[7] : NODE_PALETTE[section % NODE_PALETTE.length];
+    const backgrounds = Array.from(node.querySelectorAll(".node-bkg"));
+    if (backgrounds.length > 0) {
+      for (const bkg of backgrounds) {
+        bkg.style.fill = entry.fill;
+        bkg.style.stroke = entry.stroke;
+        bkg.style.strokeWidth = "1.4px";
+      }
+    } else {
+      paintShapes(node, entry);
+    }
+    darkenNodeText(node);
+  });
+}
+function styleMindmap(svg) {
+  const nodes = Array.from(svg.querySelectorAll("g.mindmap-node"));
+  if (nodes.length === 0) {
+    return;
+  }
+  for (const node of nodes) {
+    const m = (node.getAttribute("class") ?? "").match(/section-(-?\d+)/);
+    const section = m ? Number(m[1]) : 0;
+    const entry = section < 0 ? NODE_PALETTE[7] : NODE_PALETTE[section % NODE_PALETTE.length];
+    for (const shape of Array.from(
+      node.querySelectorAll("path, rect, circle, ellipse")
+    )) {
+      if (shape.closest("g.children")) {
+        continue;
+      }
+      shape.style.fill = entry.fill;
+      shape.style.stroke = entry.stroke;
+      shape.style.strokeWidth = "1.4px";
+    }
+    darkenNodeText(node);
+  }
+  for (const edge of Array.from(svg.querySelectorAll('path[class*="edge"]'))) {
+    const m = (edge.getAttribute("class") ?? "").match(/section-edge-(-?\d+)/);
+    if (m) {
+      const section = Number(m[1]);
+      const entry = section < 0 ? NODE_PALETTE[7] : NODE_PALETTE[section % NODE_PALETTE.length];
+      edge.style.stroke = entry.stroke;
+      edge.style.strokeWidth = "2px";
+      edge.style.opacity = "0.6";
+      edge.style.fill = "none";
+    }
+  }
+}
+function styleJourney(svg) {
+  const tasks = Array.from(
+    svg.querySelectorAll('circle[class*="task-type"], rect[class*="task-type"]')
+  );
+  tasks.forEach((shape) => {
+    const m = (shape.getAttribute("class") ?? "").match(/task-type-(\d+)/);
+    if (m) {
+      const entry = NODE_PALETTE[Number(m[1]) % NODE_PALETTE.length];
+      shape.style.fill = entry.fill;
+      shape.style.stroke = entry.stroke;
+    }
+  });
+  Array.from(svg.querySelectorAll('rect[class*="section-type"]')).forEach((rect) => {
+    const m = (rect.getAttribute("class") ?? "").match(/section-type-(\d+)/);
+    if (m) {
+      const entry = CLUSTER_PALETTE[Number(m[1]) % CLUSTER_PALETTE.length];
+      rect.style.fill = entry.fill;
+      rect.style.stroke = entry.stroke;
+    }
+  });
+}
+function boostLegibility(root) {
+  const svg = resolveSvg(root);
+  if (!svg) {
+    return;
+  }
+  for (const el of Array.from(
+    svg.querySelectorAll(
+      'g.node text, g.node tspan, g.mindmap-node text, g[class*="timeline-node"] text, text.actor'
+    )
+  )) {
+    el.style.fontWeight = "600";
+  }
+  for (const el of Array.from(svg.querySelectorAll(".nodeLabel, g.node span, g.node p"))) {
+    el.style.fontWeight = "600";
+  }
+  for (const el of Array.from(svg.querySelectorAll("text"))) {
+    if (!el.style.fontWeight) {
+      el.style.fontWeight = "500";
+    }
+  }
+}
 function colorizeDiagram(root, opts = {}) {
-  const svg = root instanceof Element && root.tagName.toLowerCase() === "svg" ? root : root.querySelector("svg");
+  const svg = resolveSvg(root);
   if (!svg) {
     return;
   }
   ensureShadowFilter(svg);
+  const dark = opts.dark === true;
   Array.from(svg.querySelectorAll("g.node")).forEach((node, i) => {
     paintShapes(node, NODE_PALETTE[i % NODE_PALETTE.length]);
     darkenNodeText(node);
@@ -523,14 +854,41 @@ function colorizeDiagram(root, opts = {}) {
     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";
+      rect.style.strokeWidth = "1.5px";
       roundRect(rect, 10);
     }
+    const label = cluster.querySelector(":scope > .cluster-label");
+    if (label) {
+      for (const el of Array.from(label.querySelectorAll("text, tspan"))) {
+        el.style.fill = entry.stroke;
+        el.style.fontWeight = "700";
+      }
+      for (const el of Array.from(label.querySelectorAll(".nodeLabel, span, p"))) {
+        el.style.color = entry.stroke;
+        el.style.fontWeight = "700";
+      }
+      for (const lr of Array.from(label.querySelectorAll("rect"))) {
+        lr.style.fill = entry.fill;
+      }
+    }
   });
   colorizeLegacyEr(svg);
-  colorizeSequence(svg, opts.dark === true);
-  styleEdges(svg, opts.dark === true);
+  colorizeSequence(svg, dark);
+  styleEdges(svg, dark);
   styleEdgeLabels(svg);
+  styleLabelText(svg, dark);
+  const kind = svg.getAttribute("aria-roledescription") ?? "";
+  if (kind === "pie" || kind === "pieChart") {
+    stylePie(svg, dark);
+  } else if (kind === "gantt") {
+    styleGantt(svg, dark);
+  } else if (kind === "timeline") {
+    styleTimeline(svg);
+  } else if (kind === "mindmap") {
+    styleMindmap(svg);
+  } else if (kind === "journey") {
+    styleJourney(svg);
+  }
 }
 
 // src/core/themes/sketch.ts
@@ -814,6 +1172,7 @@ function applyPostProcess(svg, postProcess, opts) {
   } else if (postProcess === "sketch") {
     sketchifyDiagram(svg, { dark: opts.dark, seed: opts.seed });
   }
+  boostLegibility(svg);
 }
 async function renderDiagram(opts) {
   assertBrowser("renderDiagram");
@@ -1312,6 +1671,11 @@ function useMermaidViewer(opts) {
     getSvg
   };
 }
+var BACKGROUND_LABELS = {
+  transparent: { icon: "\u25A6", label: "\u900F\u660E" },
+  solid: { icon: "\u25FB", label: "\u7D14\u8272" },
+  grid: { icon: "\u229E", label: "\u683C\u7DDA" }
+};
 var DEFAULT_THEME_OPTIONS = [
   { value: "colorful", label: "Colorful" },
   { value: "sketch", label: "Excalidraw" },
@@ -1335,6 +1699,20 @@ function Toolbar(props) {
         }
       )
     ] }),
+    props.backgroundEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "rsm-btn",
+        onClick: props.onCycleBackground,
+        title: "\u5207\u63DB\u756B\u5E03\u80CC\u666F\uFF08\u900F\u660E / \u7D14\u8272 / \u683C\u7DDA\uFF0CB\uFF09",
+        children: [
+          BACKGROUND_LABELS[props.background].icon,
+          " \u80CC\u666F\uFF1A",
+          BACKGROUND_LABELS[props.background].label
+        ]
+      }
+    ) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rsm-toolbar-spacer" }),
     props.searchEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -1388,9 +1766,21 @@ function Toolbar(props) {
       ),
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: props.onZoomIn, title: "\u653E\u5927\uFF08+\uFF09", children: "\uFF0B" }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: props.onReset, title: "\u7B26\u5408\u8996\u7A97\uFF080\uFF09", children: "\u2922" })
-    ] })
+    ] }),
+    props.fullscreenEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "rsm-btn rsm-btn-fullscreen",
+        "aria-pressed": props.fullscreen ? "true" : "false",
+        onClick: props.onToggleFullscreen,
+        title: props.fullscreen ? "\u96E2\u958B\u5168\u87A2\u5E55\uFF08Esc\uFF09" : "\u5168\u87A2\u5E55\u6AA2\u8996\uFF08F\uFF09",
+        children: props.fullscreen ? "\u2715 \u96E2\u958B\u5168\u87A2\u5E55" : "\u26F6 \u5168\u87A2\u5E55"
+      }
+    ) : null
   ] });
 }
+var BACKGROUND_CYCLE = ["transparent", "solid", "grid"];
 function usePrefersDark(explicit) {
   const [autoDark, setAutoDark] = react.useState(false);
   react.useEffect(() => {
@@ -1414,6 +1804,9 @@ var MermaidViewer = react.forwardRef(
       panZoom = true,
       search: searchEnabled = true,
       exportable = true,
+      background: backgroundEnabled = true,
+      fullscreen: fullscreenEnabled = true,
+      onFullscreenChange,
       keyboard = true,
       seed = 42,
       fontUrl,
@@ -1437,6 +1830,15 @@ var MermaidViewer = react.forwardRef(
     const [query, setQuery] = react.useState("");
     const [matchInfo, setMatchInfo] = react.useState({ current: 0, total: 0 });
     const [exporting, setExporting] = react.useState(false);
+    const [background, setBackgroundState] = react.useState(
+      props.backgroundMode ?? "transparent"
+    );
+    react.useEffect(() => {
+      if (props.backgroundMode) {
+        setBackgroundState(props.backgroundMode);
+      }
+    }, [props.backgroundMode]);
+    const [isFullscreen, setIsFullscreen] = react.useState(false);
     const rootRef = react.useRef(null);
     const searchInputRef = react.useRef(null);
     const vm = useMermaidViewer({
@@ -1499,6 +1901,85 @@ var MermaidViewer = react.forwardRef(
         setExporting(false);
       }
     }, [vm, onError]);
+    const cycleBackground = react.useCallback(() => {
+      setBackgroundState((prev) => {
+        const i = BACKGROUND_CYCLE.indexOf(prev);
+        return BACKGROUND_CYCLE[(i + 1) % BACKGROUND_CYCLE.length];
+      });
+    }, []);
+    const setBackground = react.useCallback((mode) => {
+      setBackgroundState(mode);
+    }, []);
+    const enterFullscreen = react.useCallback(() => {
+      setIsFullscreen((prev) => {
+        if (!prev) {
+          onFullscreenChange?.(true);
+        }
+        return true;
+      });
+    }, [onFullscreenChange]);
+    const exitFullscreen = react.useCallback(() => {
+      setIsFullscreen((prev) => {
+        if (prev) {
+          onFullscreenChange?.(false);
+        }
+        return false;
+      });
+    }, [onFullscreenChange]);
+    const toggleFullscreen = react.useCallback(() => {
+      setIsFullscreen((prev) => {
+        onFullscreenChange?.(!prev);
+        return !prev;
+      });
+    }, [onFullscreenChange]);
+    react.useEffect(() => {
+      if (!isFullscreen) {
+        return void 0;
+      }
+      const body = typeof document !== "undefined" ? document.body : null;
+      const prevOverflow = body?.style.overflow ?? "";
+      if (body) {
+        body.style.overflow = "hidden";
+      }
+      const onWinKey = (e) => {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          exitFullscreen();
+        }
+      };
+      window.addEventListener("keydown", onWinKey);
+      const fitId = window.setTimeout(() => vm.reset(), 60);
+      let resizeId = 0;
+      const onResize = () => {
+        window.clearTimeout(resizeId);
+        resizeId = window.setTimeout(() => vm.reset(), 150);
+      };
+      window.addEventListener("resize", onResize);
+      window.addEventListener("orientationchange", onResize);
+      rootRef.current?.focus();
+      return () => {
+        window.removeEventListener("keydown", onWinKey);
+        window.removeEventListener("resize", onResize);
+        window.removeEventListener("orientationchange", onResize);
+        window.clearTimeout(fitId);
+        window.clearTimeout(resizeId);
+        if (body) {
+          body.style.overflow = prevOverflow;
+        }
+      };
+    }, [isFullscreen, exitFullscreen]);
+    const fsMountedRef = react.useRef(false);
+    react.useEffect(() => {
+      if (!fsMountedRef.current) {
+        fsMountedRef.current = true;
+        return void 0;
+      }
+      if (isFullscreen) {
+        return void 0;
+      }
+      const id = window.setTimeout(() => vm.reset(), 60);
+      return () => window.clearTimeout(id);
+    }, [isFullscreen]);
     react.useEffect(() => {
       if (!keyboard) {
         return void 0;
@@ -1524,6 +2005,11 @@ var MermaidViewer = react.forwardRef(
           closeSearch();
           return;
         }
+        if (e.key === "Escape" && isFullscreen) {
+          e.preventDefault();
+          exitFullscreen();
+          return;
+        }
         if (typing) {
           return;
         }
@@ -1537,11 +2023,29 @@ var MermaidViewer = react.forwardRef(
           vm.actualSize();
         } else if (e.key === "w" || e.key === "W") {
           vm.fit();
+        } else if (fullscreenEnabled && (e.key === "f" || e.key === "F")) {
+          e.preventDefault();
+          toggleFullscreen();
+        } else if (backgroundEnabled && (e.key === "b" || e.key === "B")) {
+          e.preventDefault();
+          cycleBackground();
         }
       };
       root.addEventListener("keydown", onKey);
       return () => root.removeEventListener("keydown", onKey);
-    }, [keyboard, searchOpen, openSearch, closeSearch, vm]);
+    }, [
+      keyboard,
+      searchOpen,
+      openSearch,
+      closeSearch,
+      vm,
+      isFullscreen,
+      exitFullscreen,
+      toggleFullscreen,
+      cycleBackground,
+      fullscreenEnabled,
+      backgroundEnabled
+    ]);
     react.useImperativeHandle(
       ref,
       () => ({
@@ -1559,9 +2063,25 @@ var MermaidViewer = react.forwardRef(
         exportPng: vm.exportPng,
         downloadSvg: vm.downloadSvg,
         downloadPng: vm.downloadPng,
-        getSvg: vm.getSvg
+        getSvg: vm.getSvg,
+        enterFullscreen,
+        exitFullscreen,
+        toggleFullscreen,
+        isFullscreen: () => isFullscreen,
+        setBackground,
+        cycleBackground,
+        getBackground: () => background
       }),
-      [vm]
+      [
+        vm,
+        enterFullscreen,
+        exitFullscreen,
+        toggleFullscreen,
+        isFullscreen,
+        setBackground,
+        cycleBackground,
+        background
+      ]
     );
     let countText = "";
     if (matchInfo.total > 0) {
@@ -1569,7 +2089,13 @@ var MermaidViewer = react.forwardRef(
     } else if (query.trim()) {
       countText = "0";
     }
-    const rootClassName = ["rsm-root", dark ? "rsm-dark" : "", className ?? ""].filter(Boolean).join(" ");
+    const rootClassName = [
+      "rsm-root",
+      dark ? "rsm-dark" : "",
+      `rsm-bg-${background}`,
+      isFullscreen ? "rsm-fullscreen" : "",
+      className ?? ""
+    ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -1595,7 +2121,13 @@ var MermaidViewer = react.forwardRef(
               exportEnabled: exportable,
               exporting,
               onExportSvg: exportSvg,
-              onExportPng: exportPng
+              onExportPng: exportPng,
+              backgroundEnabled,
+              background,
+              onCycleBackground: cycleBackground,
+              fullscreenEnabled,
+              fullscreen: isFullscreen,
+              onToggleFullscreen: toggleFullscreen
             }
           ) : null,
           toolbar && searchEnabled && searchOpen ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rsm-searchbar", children: [
@@ -1635,6 +2167,17 @@ var MermaidViewer = react.forwardRef(
               "\u5716\u8868\u8F09\u5165\u5931\u6557\uFF1A",
               vm.error
             ] }) : null,
+            isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "rsm-fs-close",
+                onClick: exitFullscreen,
+                title: "\u96E2\u958B\u5168\u87A2\u5E55\uFF08Esc\uFF09",
+                "aria-label": "\u96E2\u958B\u5168\u87A2\u5E55",
+                children: "\u2715"
+              }
+            ) : null,
             /* @__PURE__ */ jsxRuntime.jsx("div", { ref: vm.stageRef, className: "rsm-stage" })
           ] })
         ]
@@ -1654,6 +2197,7 @@ exports.MermaidDiagram = MermaidDiagram;
 exports.MermaidViewer = MermaidViewer;
 exports.SKETCH_FONT = SKETCH_FONT;
 exports.Toolbar = Toolbar;
+exports.boostLegibility = boostLegibility;
 exports.colorizeDiagram = colorizeDiagram;
 exports.downloadBlob = downloadBlob;
 exports.ensureSketchFont = ensureSketchFont;