react-super-mermaid 0.3.0 → 0.4.2

package/README.md

@@ -166,7 +166,7 @@ gitGraph
 - 🔍 **In-diagram search** — highlight + pan to matches (`/` or `Ctrl/Cmd+F`).
 - 🖐️ **Pan & zoom** — fit, actual size, keyboard `+ - 0 1 w` (via `svg-pan-zoom`).
 - ⛶ **Fullscreen modal** — open the diagram in a viewport-filling, RWD-friendly popup (`f` / `Esc`); body scroll locked, auto re-fit.
-- ▦ **Background toggle** — cycle the canvas between transparent / solid / dot-grid (`b`), handy for reading and exports.
+- ▦ **Background picker** — a swatch popover to set the canvas **surface** (preset colors + a custom color well) and an independent **pattern** (none / dots / grid lines, cycle with `b`). Surface + pattern combine freely and carry through to exports.
 - 📤 **Export** — SVG and high-res PNG/JPEG/WebP (1×/2×/4×, optional transparent background).
 - 🪶 **Lightweight & decoupled** — `mermaid`, `svg-pan-zoom`, `react` are **optional peer deps**, never bundled. No Tailwind, no app coupling.
 - 🌐 **Load external mermaid** — inject an instance, dynamic-import the peer, or pull from a CDN. Your bundle doesn't carry mermaid.
@@ -248,8 +248,9 @@ Resolution order is **injected → peer import → CDN**, memoized so mermaid lo
 | `panZoom` | `boolean` | `true` | |
 | `search` | `boolean` | `true` | toolbar search |
 | `exportable` | `boolean` | `true` | toolbar SVG/PNG export |
-| `background` | `boolean` | `true` | toolbar background toggle (transparent / solid / grid) |
-| `backgroundMode` | `'transparent' \| 'solid' \| 'grid'` | `'transparent'` | initial / controlled canvas background |
+| `background` | `boolean` | `true` | show the background picker (surface swatches + custom color + pattern toggle) |
+| `pattern` | `'none' \| 'dots' \| 'grid'` | `'dots'` | initial / controlled overlay pattern |
+| `solidColor` | `string \| null` | `null` (transparent) | initial / controlled canvas surface color (hex); `null` follows the page |
 | `fullscreen` | `boolean` | `true` | toolbar fullscreen button — opens a viewport-filling modal (RWD) |
 | `onFullscreenChange` | `(fullscreen: boolean) => void` | — | fired on enter / exit fullscreen |
 | `keyboard` | `boolean` | `true` | shortcuts when the viewer is focused |
@@ -281,7 +282,7 @@ await ref.current?.downloadPng('diagram.png', { scale: 4 });
 const svgString = ref.current?.exportSvg();
 ```
 
-Handle: `zoomIn / zoomOut / fit / reset / actualSize / getZoomPercent / search / next / prev / clearSearch / exportSvg / exportPng / downloadSvg / downloadPng / getSvg / enterFullscreen / exitFullscreen / toggleFullscreen / isFullscreen / setBackground / cycleBackground / getBackground`.
+Handle: `zoomIn / zoomOut / fit / reset / actualSize / getZoomPercent / search / next / prev / clearSearch / exportSvg / exportPng / downloadSvg / downloadPng / getSvg / enterFullscreen / exitFullscreen / toggleFullscreen / isFullscreen / setPattern / cyclePattern / getPattern / setSolidColor / getSolidColor`.
 
 ## Themes & the sketch font
 
@@ -307,7 +308,7 @@ Styles are injected automatically (`injectStyles` default `true`) — no CSS imp
 
 ## Keyboard shortcuts
 
-Focus the viewer, then: `/` or `Ctrl/Cmd+F` search · `+`/`-` zoom · `0` fit · `1` actual size · `w` fit width · `f` toggle fullscreen · `b` cycle background · `Esc` close search / exit fullscreen.
+Focus the viewer, then: `/` or `Ctrl/Cmd+F` search · `+`/`-` zoom · `0` fit · `1` actual size · `w` fit width · `f` toggle fullscreen · `b` cycle background pattern (none / dots / grid) · `Esc` close search / exit fullscreen.
 
 ## Next.js / SSR
 

package/dist/index.cjs

@@ -107,8 +107,13 @@ var RSM_CSS = `
   --rsm-accent: #2563eb;
   --rsm-hover: #f3f4f6;
   --rsm-surface: #ffffff;
+  /* --rsm-paper = \u756B\u5E03\u5E95\u8272,\u5C0D\u9F4A VS Code \u64F4\u5145\u5957\u4EF6\u7684 editor-background(\u4EAE)\u3002 */
+  --rsm-paper: #ffffff;
   --rsm-canvas-bg: transparent;
-  --rsm-grid-dot: rgba(0, 0, 0, 0.08);
+  /* \u9EDE\u9663\u683C\u7DDA:\u5C0D\u9F4A VS Code \u7684 color-mix(foreground 9%) \u516C\u5F0F\u3002 */
+  --rsm-grid-dot: color-mix(in srgb, var(--rsm-fg) 9%, transparent);
+  /* \u7DB2\u683C\u7DDA:\u6BD4\u7DB2\u9EDE\u518D\u6DE1\u4E00\u9EDE,\u907F\u514D\u7DDA\u689D\u6436\u904E\u5716\u8868\u3002 */
+  --rsm-grid-line: color-mix(in srgb, var(--rsm-fg) 7%, transparent);
   --rsm-radius: 8px;
   display: flex;
   flex-direction: column;
@@ -170,6 +175,14 @@ var RSM_CSS = `
 }
 .rsm-btn:disabled { opacity: 0.6; cursor: default; }
 
+/* \u5DE5\u5177\u5217\u63A7\u5236\u9805\u9AD8\u5EA6\u4E00\u81F4(\u6A23\u5F0F\u4E0B\u62C9 / \u4E00\u822C\u9215 / \u7E2E\u653E\u7FA4 / \u80CC\u666F\u9215),\u907F\u514D\u9AD8\u4F4E\u4E0D\u9F4A\u3002 */
+.rsm-toolbar .rsm-btn,
+.rsm-toolbar .rsm-select,
+.rsm-toolbar .rsm-zoom { min-height: 30px; }
+.rsm-toolbar .rsm-btn,
+.rsm-toolbar .rsm-select { align-items: center; }
+.rsm-toolbar .rsm-zoom > button { display: inline-flex; align-items: center; justify-content: center; }
+
 .rsm-zoom {
   display: inline-flex;
   align-items: stretch;
@@ -215,7 +228,8 @@ var RSM_CSS = `
   flex: 1 1 auto;
   min-height: 0;
   overflow: hidden;
-  background: var(--rsm-canvas-bg);
+  /* \u5E95\u8272\u7531 --rsm-canvas-bg \u63A7\u5236(\u9810\u8A2D\u900F\u660E,\u8DDF\u96A8\u9801\u9762);\u5716\u6A23\u758A\u5728\u5176\u4E0A(background-image)\u3002 */
+  background-color: var(--rsm-canvas-bg, transparent);
 }
 .rsm-stage { width: 100%; height: 100%; }
 .rsm-root svg { cursor: grab; user-select: none; }
@@ -240,23 +254,172 @@ var RSM_CSS = `
 .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;
-  --rsm-grid-dot: rgba(255, 255, 255, 0.10);
+  /* \u6697\u8272\u9762\u677F\u5C0D\u9F4A VS Code Dark+ / Dark Modern \u7684\u4E2D\u6027\u7070(\u975E\u85CD\u8ABF)\u3002 */
+  --rsm-border: #3c3c3c;
+  --rsm-fg: #cccccc;
+  --rsm-muted: #9d9d9d;
+  --rsm-accent: #3794ff;
+  --rsm-hover: #2a2d2e;
+  --rsm-surface: #252526;
+  /* \u756B\u5E03\u5E95\u8272 = VS Code editor-background(\u6697);grid-dot \u7531 --rsm-fg 9% \u81EA\u52D5\u63A8\u5C0E\u3002 */
+  --rsm-paper: #1e1e1e;
 }
 
-/* \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);
+/* \u2500\u2500 \u80CC\u666F \u2500\u2500 \u5E95\u8272 + \u758A\u52A0\u5716\u6A23,\u5169\u8005\u7368\u7ACB\u3002
+ * \u5E95\u8272:--rsm-canvas-bg(\u7531\u8272\u7968 / \u81EA\u8A02\u8272 inline \u8986\u5BEB;\u672A\u8A2D = \u900F\u660E\u8DDF\u96A8\u9801\u9762)\u3002
+ * \u5716\u6A23:.rsm-pattern-dots(\u7DB2\u9EDE) / .rsm-pattern-grid(\u7DB2\u683C\u7DDA),\u758A\u5728\u5E95\u8272\u4E4B\u4E0A\u3002 */
+.rsm-root.rsm-pattern-dots .rsm-canvas {
   background-image: radial-gradient(var(--rsm-grid-dot) 1px, transparent 1px);
   background-size: 18px 18px;
   background-position: -9px -9px;
 }
+.rsm-root.rsm-pattern-grid .rsm-canvas {
+  background-image:
+    linear-gradient(to right, var(--rsm-grid-line) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--rsm-grid-line) 1px, transparent 1px);
+  background-size: 22px 22px;
+  background-position: -1px -1px;
+}
+
+/* \u2500\u2500 \u80CC\u666F\u9078\u64C7\u5668(toolbar \u5167\u7684\u8272\u4E95\u6309\u9215 + \u5F48\u51FA\u9762\u677F)\u2500\u2500 */
+.rsm-bg { position: relative; display: inline-flex; }
+
+/* \u89F8\u767C\u9215\u5DE6\u5074\u7684\u300C\u8272\u4E95\u300D:\u53CD\u6620\u76EE\u524D\u5E95\u8272;\u900F\u660E / \u9810\u8A2D\u6642\u756B\u4E00\u9053\u659C\u7DDA\u8868\u793A\u300C\u4E0D\u8986\u5BEB\u300D\u3002 */
+.rsm-bg-well {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid color-mix(in srgb, var(--rsm-fg) 28%, transparent);
+  background-color: var(--rsm-well-color, transparent);
+}
+.rsm-bg-well[data-empty="true"] {
+  background-color: var(--rsm-surface);
+  background-image: linear-gradient(
+    to top right,
+    transparent calc(50% - 1px),
+    #ef4444 calc(50% - 1px),
+    #ef4444 calc(50% + 1px),
+    transparent calc(50% + 1px)
+  );
+}
+
+/* \u5F48\u51FA\u9762\u677F:\u5361\u7247\u5F0F\u3001\u8F15\u9670\u5F71\u3001\u6DE1\u5165\u3002 */
+.rsm-bg-pop {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  min-width: 260px;
+  border: 1px solid var(--rsm-border);
+  border-radius: 12px;
+  background: var(--rsm-surface);
+  color: var(--rsm-fg);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
+  animation: rsm-pop-in 0.13s ease-out;
+}
+@keyframes rsm-pop-in {
+  from { opacity: 0; transform: translateY(-5px); }
+  to { opacity: 1; transform: none; }
+}
+.rsm-bg-section { display: flex; flex-direction: column; gap: 8px; }
+.rsm-bg-section-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  color: var(--rsm-muted);
+}
+.rsm-bg-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
+
+/* \u8272\u7968:\u5713\u89D2\u5C0F\u65B9\u584A;\u9078\u4E2D\u52A0\u540C\u8272\u5916\u74B0\u3002 */
+.rsm-swatch {
+  position: relative;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--rsm-fg) 16%, transparent);
+  border-radius: 7px;
+  cursor: pointer;
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+.rsm-swatch:hover { transform: scale(1.12); }
+.rsm-swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--rsm-accent); }
+.rsm-swatch.rsm-selected { outline: 2px solid var(--rsm-accent); outline-offset: 2px; }
+.rsm-swatch[data-empty="true"] {
+  background-color: var(--rsm-surface);
+  background-image: linear-gradient(
+    to top right,
+    transparent calc(50% - 1px),
+    #ef4444 calc(50% - 1px),
+    #ef4444 calc(50% + 1px),
+    transparent calc(50% + 1px)
+  );
+}
+
+/* \u81EA\u8A02\u8272\u7968:\u8986\u4E00\u500B\u96B1\u5F62\u7684\u539F\u751F color input,\u672A\u9078\u6642\u986F\u793A \u{1F3A8}\u3002 */
+.rsm-swatch-custom {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background:
+    conic-gradient(from 180deg, #f87171, #fbbf24, #34d399, #60a5fa, #a78bfa, #f87171);
+}
+.rsm-swatch-custom.rsm-has-color { background: none; }
+.rsm-swatch-custom input[type="color"] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.rsm-swatch-custom-icon {
+  font-size: 12px;
+  line-height: 1;
+  pointer-events: none;
+  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
+}
+
+/* \u5716\u6A23\u5207\u63DB:\u5206\u6BB5\u5F0F\u6309\u9215(\u7121 / \u7DB2\u9EDE / \u7DB2\u683C)\u3002 */
+.rsm-seg {
+  display: inline-flex;
+  align-self: flex-start;
+  border: 1px solid var(--rsm-border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.rsm-seg > button {
+  flex: 1 1 0;
+  min-width: 58px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  border: 0;
+  background: var(--rsm-surface);
+  color: var(--rsm-fg);
+  padding: 6px 11px;
+  font-size: 12px;
+  line-height: 1.3;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+.rsm-seg > button + button { border-left: 1px solid var(--rsm-border); }
+.rsm-seg > button:hover { background: var(--rsm-hover); }
+.rsm-seg > button[aria-pressed="true"] {
+  background: color-mix(in srgb, var(--rsm-accent) 14%, transparent);
+  color: var(--rsm-accent);
+  font-weight: 600;
+}
+.rsm-seg-glyph { font-size: 13px; line-height: 1; }
 
 /* \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 {
@@ -312,6 +475,25 @@ var RSM_CSS = `
   .rsm-zoom > button { padding: 4px 8px; font-size: 12px; }
   .rsm-input { flex-basis: 150px; }
 }
+
+/* \u2500\u2500 \u6A19\u7C64\u5B57\u91CD(\u91CF\u6E2C\u968E\u6BB5\u5C31\u751F\u6548)\u2500\u2500
+ * boostLegibility \u5728\u300C\u6E32\u67D3\u5F8C\u300D\u624D\u628A\u6A19\u7C64\u5B57\u91CD\u52A0\u5230 600/700,\u4F46 mermaid \u662F\u5728\u300C\u6E32\u67D3\u4E2D\u300D
+ * \u91CF\u6E2C\u6587\u5B57\u5BEC\u5EA6\u4F86\u6C7A\u5B9A foreignObject / \u7BC0\u9EDE\u5916\u6846\u7684\u5927\u5C0F\u3002\u82E5\u53EA\u5728\u4E8B\u5F8C\u52A0\u7C97,\u7C97\u9AD4\u5B57\u6703\u6BD4\u5DF2\u91CF\u597D\u7684
+ * \u6846\u66F4\u5BEC \u2192 foreignObject \u628A\u5C3E\u5B57\u88C1\u6389(\u5FC3\u667A\u5716\u7BC0\u9EDE\u300Creact-super-mermaid\u300D\u5C3E\u5DF4\u7684 d \u4E0D\u898B\u5C31\u662F\u9019\u500B)\u3002
+ * \u89E3\u6CD5:\u628A\u540C\u6A23\u7684\u5B57\u91CD\u7528 CSS \u63D0\u524D\u5BA3\u544A,\u4E14\u300C\u4E0D\u300Dscope \u5728 .rsm-root \u4E4B\u4E0B,\u800C\u662F scope \u5728 mermaid
+ * \u7684\u6E32\u67D3 id(svg[id^="rsm-"])\u2014\u2014\u56E0\u70BA\u91CF\u6E2C\u6642\u90A3\u9846\u66AB\u6642\u7684 svg \u9084\u5728 <body> \u4E0B\u3001\u5C1A\u672A\u639B\u9032 .rsm-root\u3002
+ * \u9019\u6A23 mermaid \u91CF\u5230\u7684\u5C31\u662F\u7C97\u9AD4\u5BEC\u5EA6,\u6846\u6703\u525B\u597D\u5BB9\u7D0D,\u4E8B\u5F8C boostLegibility \u8A2D\u540C\u503C\u4E0D\u518D\u6490\u7834\u3002
+ * \u53EA scope \u6211\u5011\u81EA\u5DF1\u6E32\u67D3\u51FA\u7684 svg,\u6545\u4E0D\u6703\u6C61\u67D3 host \u9801\u9762\u5176\u5B83 mermaid\u3002 */
+svg[id^="rsm-"] g.node text,
+svg[id^="rsm-"] g.node tspan,
+svg[id^="rsm-"] g.node .nodeLabel,
+svg[id^="rsm-"] g.mindmap-node text,
+svg[id^="rsm-"] g.mindmap-node .nodeLabel,
+svg[id^="rsm-"] g[class*="timeline-node"] text,
+svg[id^="rsm-"] text.actor { font-weight: 600 !important; }
+svg[id^="rsm-"] .cluster-label text,
+svg[id^="rsm-"] .cluster-label .nodeLabel,
+svg[id^="rsm-"] text.pieTitleText { font-weight: 700 !important; }
 `;
 
 // src/core/ensure-styles.ts
@@ -319,7 +501,11 @@ function ensureStyles() {
   if (typeof document === "undefined") {
     return;
   }
-  if (document.getElementById(RSM_STYLE_ID)) {
+  const existing = document.getElementById(RSM_STYLE_ID);
+  if (existing) {
+    if (existing.textContent !== RSM_CSS) {
+      existing.textContent = RSM_CSS;
+    }
     return;
   }
   const style = document.createElement("style");
@@ -1430,7 +1616,7 @@ async function rasterizeToBlob(prepared, opts = {}) {
       throw new Error("\u53D6\u4E0D\u5230 Canvas 2D context\u3002");
     }
     if (!transparent || mime === "image/jpeg") {
-      ctx.fillStyle = opts.background ?? (opts.dark ? "#111827" : "#ffffff");
+      ctx.fillStyle = opts.background ?? (opts.dark ? "#1e1e1e" : "#ffffff");
       ctx.fillRect(0, 0, canvas.width, canvas.height);
     }
     ctx.scale(scale, scale);
@@ -1671,11 +1857,19 @@ 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 BACKGROUND_PRESETS = [
+  { value: null, label: "\u9810\u8A2D / \u900F\u660E" },
+  { value: "#FFFFFF", label: "\u767D" },
+  { value: "#F3F4F6", label: "\u6DFA\u7070" },
+  { value: "#EFF6FF", label: "\u6DFA\u85CD" },
+  { value: "#FEFCE8", label: "\u6DFA\u9EC3" },
+  { value: "#FDF2F8", label: "\u6DFA\u73AB\u7470" }
+];
+var PATTERN_OPTIONS = [
+  { value: "none", glyph: "\u25A2", label: "\u7121" },
+  { value: "dots", glyph: "\u283F", label: "\u7DB2\u9EDE" },
+  { value: "grid", glyph: "\u229E", label: "\u7DB2\u683C" }
+];
 var DEFAULT_THEME_OPTIONS = [
   { value: "colorful", label: "Colorful" },
   { value: "sketch", label: "Excalidraw" },
@@ -1685,6 +1879,126 @@ var DEFAULT_THEME_OPTIONS = [
   { value: "neutral", label: "Neutral" },
   { value: "forest", label: "Forest" }
 ];
+var HEX6 = /^#[0-9a-fA-F]{6}$/;
+function isSameColor(a, b) {
+  if (a === null || b === null) {
+    return a === b;
+  }
+  return a.toLowerCase() === b.toLowerCase();
+}
+function BackgroundPicker(props) {
+  const [open, setOpen] = react.useState(false);
+  const rootRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!open) {
+      return void 0;
+    }
+    const onDocPointer = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDocPointer);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocPointer);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const isPreset = BACKGROUND_PRESETS.some((p) => isSameColor(p.value, props.surface));
+  const customActive = props.surface !== null && !isPreset;
+  const customInputValue = props.surface && HEX6.test(props.surface) ? props.surface : "#1e293b";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rsm-bg", ref: rootRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "rsm-btn rsm-bg-trigger",
+        "aria-expanded": open,
+        "aria-haspopup": "dialog",
+        onClick: () => setOpen((o) => !o),
+        title: "\u756B\u5E03\u80CC\u666F\uFF08\u5E95\u8272 + \u7DB2\u9EDE / \u7DB2\u683C\uFF0CB\uFF09",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "rsm-bg-well",
+              "data-empty": props.surface === null ? "true" : void 0,
+              style: props.surface ? { ["--rsm-well-color"]: props.surface } : void 0
+            }
+          ),
+          "\u80CC\u666F"
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rsm-bg-pop", role: "dialog", "aria-label": "\u756B\u5E03\u80CC\u666F\u8A2D\u5B9A", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rsm-bg-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rsm-bg-section-label", children: "\u5E95\u8272" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rsm-bg-swatches", children: [
+          BACKGROUND_PRESETS.map((preset) => {
+            const selected = isSameColor(preset.value, props.surface);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: `rsm-swatch${selected ? " rsm-selected" : ""}`,
+                "data-empty": preset.value === null ? "true" : void 0,
+                style: preset.value ? { backgroundColor: preset.value } : void 0,
+                title: preset.label,
+                "aria-label": `\u5E95\u8272\uFF1A${preset.label}`,
+                "aria-pressed": selected,
+                onClick: () => props.onSurfaceChange(preset.value)
+              },
+              preset.label
+            );
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: `rsm-swatch rsm-swatch-custom${customActive ? " rsm-has-color rsm-selected" : ""}`,
+              style: customActive ? { backgroundColor: props.surface } : void 0,
+              title: "\u81EA\u8A02\u984F\u8272",
+              children: [
+                !customActive ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rsm-swatch-custom-icon", children: "\u{1F3A8}" }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "color",
+                    value: customInputValue,
+                    "aria-label": "\u81EA\u8A02\u5E95\u8272",
+                    onChange: (e) => props.onSurfaceChange(e.target.value)
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rsm-bg-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rsm-bg-section-label", children: "\u5716\u6A23" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rsm-seg", role: "group", "aria-label": "\u80CC\u666F\u5716\u6A23", children: PATTERN_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": props.pattern === opt.value,
+            title: opt.label,
+            onClick: () => props.onPatternChange(opt.value),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rsm-seg-glyph", "aria-hidden": "true", children: opt.glyph }),
+              opt.label
+            ]
+          },
+          opt.value
+        )) })
+      ] })
+    ] }) : null
+  ] });
+}
 function Toolbar(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rsm-toolbar", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "rsm-label", children: [
@@ -1699,18 +2013,13 @@ function Toolbar(props) {
         }
       )
     ] }),
-    props.backgroundEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+    props.backgroundEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
+      BackgroundPicker,
       {
-        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
-        ]
+        surface: props.surface,
+        onSurfaceChange: props.onSurfaceChange,
+        pattern: props.pattern,
+        onPatternChange: props.onPatternChange
       }
     ) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rsm-toolbar-spacer" }),
@@ -1780,7 +2089,24 @@ function Toolbar(props) {
     ) : null
   ] });
 }
-var BACKGROUND_CYCLE = ["transparent", "solid", "grid"];
+var PATTERN_CYCLE = ["none", "dots", "grid"];
+function defaultSolidColor(dark) {
+  return dark ? "#1e1e1e" : "#ffffff";
+}
+function patternInk(surface, dark) {
+  const m = surface ? /^#([0-9a-fA-F]{6})$/.exec(surface) : null;
+  let lightCanvas;
+  if (m) {
+    const r = parseInt(m[1].slice(0, 2), 16);
+    const g = parseInt(m[1].slice(2, 4), 16);
+    const b = parseInt(m[1].slice(4, 6), 16);
+    lightCanvas = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 > 0.5;
+  } else {
+    lightCanvas = !dark;
+  }
+  const ink = lightCanvas ? "15, 23, 42" : "226, 232, 240";
+  return { dot: `rgba(${ink}, 0.34)`, line: `rgba(${ink}, 0.2)` };
+}
 function usePrefersDark(explicit) {
   const [autoDark, setAutoDark] = react.useState(false);
   react.useEffect(() => {
@@ -1830,14 +2156,18 @@ 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"
-    );
+    const [pattern, setPatternState] = react.useState(props.pattern ?? "dots");
+    react.useEffect(() => {
+      if (props.pattern) {
+        setPatternState(props.pattern);
+      }
+    }, [props.pattern]);
+    const [solidColor, setSolidColorState] = react.useState(props.solidColor ?? null);
     react.useEffect(() => {
-      if (props.backgroundMode) {
-        setBackgroundState(props.backgroundMode);
+      if (props.solidColor !== void 0) {
+        setSolidColorState(props.solidColor);
       }
-    }, [props.backgroundMode]);
+    }, [props.solidColor]);
     const [isFullscreen, setIsFullscreen] = react.useState(false);
     const rootRef = react.useRef(null);
     const searchInputRef = react.useRef(null);
@@ -1894,21 +2224,27 @@ var MermaidViewer = react.forwardRef(
     const exportPng = react.useCallback(async () => {
       setExporting(true);
       try {
-        await vm.downloadPng("diagram.png", { scale: 2 });
+        const paper = solidColor ?? defaultSolidColor(dark);
+        const transparent = solidColor === null && pattern === "none";
+        const bgOpt = transparent ? { transparent: true } : { background: paper };
+        await vm.downloadPng("diagram.png", { scale: 2, ...bgOpt });
       } catch (e) {
         onError?.(e instanceof Error ? e : new Error(String(e)));
       } finally {
         setExporting(false);
       }
-    }, [vm, onError]);
-    const cycleBackground = react.useCallback(() => {
-      setBackgroundState((prev) => {
-        const i = BACKGROUND_CYCLE.indexOf(prev);
-        return BACKGROUND_CYCLE[(i + 1) % BACKGROUND_CYCLE.length];
+    }, [vm, onError, pattern, solidColor, dark]);
+    const cyclePattern = react.useCallback(() => {
+      setPatternState((prev) => {
+        const i = PATTERN_CYCLE.indexOf(prev);
+        return PATTERN_CYCLE[(i + 1) % PATTERN_CYCLE.length];
       });
     }, []);
-    const setBackground = react.useCallback((mode) => {
-      setBackgroundState(mode);
+    const setPattern = react.useCallback((next) => {
+      setPatternState(next);
+    }, []);
+    const setSolidColor = react.useCallback((color) => {
+      setSolidColorState(color);
     }, []);
     const enterFullscreen = react.useCallback(() => {
       setIsFullscreen((prev) => {
@@ -2028,7 +2364,7 @@ var MermaidViewer = react.forwardRef(
           toggleFullscreen();
         } else if (backgroundEnabled && (e.key === "b" || e.key === "B")) {
           e.preventDefault();
-          cycleBackground();
+          cyclePattern();
         }
       };
       root.addEventListener("keydown", onKey);
@@ -2042,7 +2378,7 @@ var MermaidViewer = react.forwardRef(
       isFullscreen,
       exitFullscreen,
       toggleFullscreen,
-      cycleBackground,
+      cyclePattern,
       fullscreenEnabled,
       backgroundEnabled
     ]);
@@ -2068,9 +2404,11 @@ var MermaidViewer = react.forwardRef(
         exitFullscreen,
         toggleFullscreen,
         isFullscreen: () => isFullscreen,
-        setBackground,
-        cycleBackground,
-        getBackground: () => background
+        setPattern,
+        cyclePattern,
+        getPattern: () => pattern,
+        setSolidColor,
+        getSolidColor: () => solidColor
       }),
       [
         vm,
@@ -2078,9 +2416,11 @@ var MermaidViewer = react.forwardRef(
         exitFullscreen,
         toggleFullscreen,
         isFullscreen,
-        setBackground,
-        cycleBackground,
-        background
+        setPattern,
+        cyclePattern,
+        pattern,
+        setSolidColor,
+        solidColor
       ]
     );
     let countText = "";
@@ -2092,16 +2432,23 @@ var MermaidViewer = react.forwardRef(
     const rootClassName = [
       "rsm-root",
       dark ? "rsm-dark" : "",
-      `rsm-bg-${background}`,
+      `rsm-pattern-${pattern}`,
       isFullscreen ? "rsm-fullscreen" : "",
       className ?? ""
     ].filter(Boolean).join(" ");
+    const ink = patternInk(solidColor, dark);
+    const rootStyle = {
+      ...style ?? {},
+      ["--rsm-grid-dot"]: ink.dot,
+      ["--rsm-grid-line"]: ink.line,
+      ...solidColor ? { ["--rsm-canvas-bg"]: solidColor } : {}
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref: rootRef,
         className: rootClassName,
-        style,
+        style: rootStyle,
         tabIndex: keyboard ? 0 : void 0,
         children: [
           toolbar ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -2123,8 +2470,10 @@ var MermaidViewer = react.forwardRef(
               onExportSvg: exportSvg,
               onExportPng: exportPng,
               backgroundEnabled,
-              background,
-              onCycleBackground: cycleBackground,
+              surface: solidColor,
+              onSurfaceChange: setSolidColor,
+              pattern,
+              onPatternChange: setPattern,
               fullscreenEnabled,
               fullscreen: isFullscreen,
               onToggleFullscreen: toggleFullscreen
@@ -2191,10 +2540,12 @@ var MermaidDiagram = react.forwardRef(
   }
 );
 
+exports.BACKGROUND_PRESETS = BACKGROUND_PRESETS;
 exports.DEFAULT_THEME_OPTIONS = DEFAULT_THEME_OPTIONS;
 exports.DEFAULT_VIRGIL_FONT_URL = DEFAULT_VIRGIL_FONT_URL;
 exports.MermaidDiagram = MermaidDiagram;
 exports.MermaidViewer = MermaidViewer;
+exports.PATTERN_OPTIONS = PATTERN_OPTIONS;
 exports.SKETCH_FONT = SKETCH_FONT;
 exports.Toolbar = Toolbar;
 exports.boostLegibility = boostLegibility;