@haklex/rich-renderer-mermaid 0.15.0 → 0.15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"MermaidEditRenderer.d.ts","sourceRoot":"","sources":["../src/MermaidEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAiB1E,OAAO,KAAK,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAiU7C,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,oBAAoB,CA6DxD,CAAC"}
1
+ {"version":3,"file":"MermaidEditRenderer.d.ts","sourceRoot":"","sources":["../src/MermaidEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAiB1E,OAAO,KAAK,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAqT7C,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,oBAAoB,CAyDxD,CAAC"}
@@ -0,0 +1,148 @@
1
+ import { useColorScheme } from "@haklex/rich-editor/static";
2
+ import { useMemo } from "react";
3
+ import { renderMermaidSVG } from "beautiful-mermaid";
4
+ import { jsx } from "react/jsx-runtime";
5
+ //#region src/styles.css.ts
6
+ var mermaidContainer = "_36yqie0";
7
+ var mermaidEditHint = "_36yqie1";
8
+ var zoomControls = "_36yqie2";
9
+ var zoomBtn = "_36yqie3";
10
+ var mermaidError = "_36yqie7";
11
+ var editorPopup = "_36yqie8";
12
+ var editorHeader = "_36yqie9";
13
+ var editorHeaderLeft = "_36yqiea";
14
+ var editorHeaderRight = "_36yqieb";
15
+ var editorSep = "_36yqiec";
16
+ var editorTitle = "_36yqied";
17
+ var editorTplBtn = "_36yqiee";
18
+ var editorViewToggle = "_36yqief";
19
+ var editorViewItem = "_36yqieg";
20
+ var editorViewItemActive = "_36yqieh";
21
+ var editorIconBtn = "_36yqiei";
22
+ var editorBody = "_36yqiej";
23
+ var editorPane = "_36yqiek";
24
+ var editorPaneHalf = "_36yqiel";
25
+ var editorPaneFull = "_36yqiem";
26
+ var editorPaneLabel = "_36yqien";
27
+ var editorPreviewPane = "_36yqieo";
28
+ var editorPreviewWrap = "_36yqiep";
29
+ var editorPreviewEmpty = "_36yqieq";
30
+ var editorPreviewErrorWrap = "_36yqier";
31
+ var editorPreviewErrorIcon = "_36yqies";
32
+ var editorPreviewErrorTitle = "_36yqiet";
33
+ var editorPreviewErrorMsg = "_36yqieu";
34
+ var codeEditor = "_36yqiev";
35
+ var codeGutter = "_36yqiew";
36
+ var codeGutterLine = "_36yqiex";
37
+ var codeArea = "_36yqiey";
38
+ var editorFooter = "_36yqiez";
39
+ var footerActions = "_36yqie13";
40
+ var footerBtnCancel = "_36yqie15 _36yqie14";
41
+ var footerBtnSave = "_36yqie16 _36yqie14";
42
+ //#endregion
43
+ //#region src/useMermaidRender.ts
44
+ var LIGHT_PALETTE = {
45
+ bg: "#ffffff",
46
+ fg: "#262626"
47
+ };
48
+ var DARK_PALETTE = {
49
+ bg: "#171717",
50
+ fg: "#fafafa"
51
+ };
52
+ function svgToDataUrl(svg) {
53
+ const bytes = new TextEncoder().encode(svg);
54
+ let binary = "";
55
+ for (const byte of bytes) binary += String.fromCodePoint(byte);
56
+ return `data:image/svg+xml;base64,${btoa(binary)}`;
57
+ }
58
+ function readDimensions(svg) {
59
+ const match = svg.match(/viewBox="\s*(?:[\d.-]+\s+){2}([\d.]+)\s+([\d.]+)/);
60
+ if (!match) return {};
61
+ return {
62
+ width: Number.parseFloat(match[1]),
63
+ height: Number.parseFloat(match[2])
64
+ };
65
+ }
66
+ function useMermaidRender(content, preferredColorScheme) {
67
+ const colorScheme = useColorScheme();
68
+ const effectiveColorScheme = preferredColorScheme ?? colorScheme;
69
+ return useMemo(() => {
70
+ if (!content) return {
71
+ loading: false,
72
+ error: "",
73
+ svg: "",
74
+ imgSrc: "",
75
+ width: void 0,
76
+ height: void 0
77
+ };
78
+ try {
79
+ const palette = effectiveColorScheme === "dark" ? DARK_PALETTE : LIGHT_PALETTE;
80
+ const svg = renderMermaidSVG(content, {
81
+ bg: palette.bg,
82
+ fg: palette.fg
83
+ });
84
+ const { width, height } = readDimensions(svg);
85
+ return {
86
+ loading: false,
87
+ error: "",
88
+ svg,
89
+ imgSrc: svgToDataUrl(svg),
90
+ width,
91
+ height
92
+ };
93
+ } catch (err) {
94
+ return {
95
+ loading: false,
96
+ error: err instanceof Error ? err.message : String(err),
97
+ svg: "",
98
+ imgSrc: "",
99
+ width: void 0,
100
+ height: void 0
101
+ };
102
+ }
103
+ }, [content, effectiveColorScheme]);
104
+ }
105
+ //#endregion
106
+ //#region src/estimate-height.ts
107
+ function estimateMermaidHeight(content) {
108
+ const lines = content.split("\n").map((l) => l.trim()).filter((l) => l && !l.startsWith("%%"));
109
+ const first = (lines[0] ?? "").toLowerCase();
110
+ let h;
111
+ if (first.startsWith("sequencediagram")) h = lines.length * 50 + 60;
112
+ else if (first.startsWith("gantt")) h = lines.length * 36 + 80;
113
+ else if (first.startsWith("pie")) h = 320;
114
+ else if (first.startsWith("flowchart lr") || first.startsWith("graph lr") || first.startsWith("flowchart rl") || first.startsWith("graph rl")) h = lines.length * 30 + 100;
115
+ else if (first.startsWith("classdiagram")) h = lines.length * 40 + 100;
116
+ else if (first.startsWith("statediagram")) h = lines.length * 50 + 80;
117
+ else if (first.startsWith("erdiagram")) h = lines.length * 60 + 80;
118
+ else if (first.startsWith("journey")) h = lines.length * 40 + 80;
119
+ else if (first.startsWith("mindmap")) h = lines.length * 50 + 100;
120
+ else h = lines.length * 60 + 80;
121
+ return Math.min(Math.max(Math.round(h), 200), 800);
122
+ }
123
+ //#endregion
124
+ //#region src/MermaidRenderer.tsx
125
+ var MermaidRenderer = ({ content, colorScheme }) => {
126
+ const { error, imgSrc, width, height } = useMermaidRender(content, colorScheme);
127
+ const wrapperStyle = { minHeight: estimateMermaidHeight(content) };
128
+ if (!imgSrc) return /* @__PURE__ */ jsx("div", {
129
+ className: mermaidError,
130
+ style: wrapperStyle,
131
+ children: error || "Render failed"
132
+ });
133
+ return /* @__PURE__ */ jsx("div", {
134
+ className: mermaidContainer,
135
+ style: {
136
+ ...wrapperStyle,
137
+ cursor: "default"
138
+ },
139
+ children: /* @__PURE__ */ jsx("img", {
140
+ alt: "Mermaid diagram",
141
+ height,
142
+ src: imgSrc,
143
+ width
144
+ })
145
+ });
146
+ };
147
+ //#endregion
148
+ export { editorViewToggle as A, editorPreviewPane as C, editorTplBtn as D, editorTitle as E, mermaidEditHint as F, mermaidError as I, zoomBtn as L, footerBtnCancel as M, footerBtnSave as N, editorViewItem as O, mermaidContainer as P, zoomControls as R, editorPreviewErrorWrap as S, editorSep as T, editorPopup as _, codeGutter as a, editorPreviewErrorMsg as b, editorFooter as c, editorHeaderRight as d, editorIconBtn as f, editorPaneLabel as g, editorPaneHalf as h, codeEditor as i, footerActions as j, editorViewItemActive as k, editorHeader as l, editorPaneFull as m, useMermaidRender as n, codeGutterLine as o, editorPane as p, codeArea as r, editorBody as s, MermaidRenderer as t, editorHeaderLeft as u, editorPreviewEmpty as v, editorPreviewWrap as w, editorPreviewErrorTitle as x, editorPreviewErrorIcon as y };
@@ -1 +1 @@
1
- {"version":3,"file":"MermaidRenderer.d.ts","sourceRoot":"","sources":["../src/MermaidRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,GAAG;IAAE,WAAW,CAAC,EAAE,WAAW,CAAA;CAAE,CAuBpF,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"MermaidRenderer.d.ts","sourceRoot":"","sources":["../src/MermaidRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,GAAG;IAAE,WAAW,CAAC,EAAE,WAAW,CAAA;CAAE,CAqBpF,CAAC;AAEF,eAAe,eAAe,CAAC"}
@@ -0,0 +1,2 @@
1
+ export declare function estimateMermaidHeight(content: string): number;
2
+ //# sourceMappingURL=estimate-height.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"estimate-height.d.ts","sourceRoot":"","sources":["../src/estimate-height.ts"],"names":[],"mappings":"AAAA,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAqC7D"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=estimate-height.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"estimate-height.test.d.ts","sourceRoot":"","sources":["../src/estimate-height.test.ts"],"names":[],"mappings":""}
package/dist/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { A as editorViewToggle, D as editorTplBtn, E as editorTitle, I as mermaidError, L as mermaidLoading, M as footerBtnCancel, N as footerBtnSave, O as editorViewItem, P as mermaidContainer, R as zoomBtn, S as editorPreviewErrorWrap, T as editorSep, _ as editorPopup, a as codeGutter, b as editorPreviewErrorMsg, c as editorFooter, d as editorHeaderRight, f as editorIconBtn, i as codeEditor, j as footerActions, k as editorViewItemActive, l as editorHeader, n as useMermaidRender, o as codeGutterLine, r as codeArea, s as editorBody, t as MermaidRenderer, u as editorHeaderLeft, v as editorPreviewEmpty, w as editorPreviewWrap, x as editorPreviewErrorTitle, y as editorPreviewErrorIcon, z as zoomControls } from "./MermaidRenderer-Dik89l6Z.js";
1
+ import { A as editorViewToggle, D as editorTplBtn, E as editorTitle, I as mermaidError, L as zoomBtn, M as footerBtnCancel, N as footerBtnSave, O as editorViewItem, P as mermaidContainer, R as zoomControls, S as editorPreviewErrorWrap, T as editorSep, _ as editorPopup, a as codeGutter, b as editorPreviewErrorMsg, c as editorFooter, d as editorHeaderRight, f as editorIconBtn, i as codeEditor, j as footerActions, k as editorViewItemActive, l as editorHeader, n as useMermaidRender, o as codeGutterLine, r as codeArea, s as editorBody, t as MermaidRenderer, u as editorHeaderLeft, v as editorPreviewEmpty, w as editorPreviewWrap, x as editorPreviewErrorTitle, y as editorPreviewErrorIcon } from "./MermaidRenderer-BGh5KLUU.js";
2
2
  import { useColorScheme } from "@haklex/rich-editor/static";
3
3
  import { presentDialog, usePortalTheme } from "@haklex/rich-editor-ui";
4
4
  import { CircleAlert, Code2, Columns2, Copy, Download, Eye, FishSymbol, Maximize2, RotateCcw, X, ZoomIn, ZoomOut } from "lucide-react";
@@ -22,10 +22,6 @@ var TEMPLATES = [
22
22
  {
23
23
  label: "State",
24
24
  code: "stateDiagram-v2\n [*] --> Idle\n Idle --> Processing: Submit\n Processing --> Success: Complete\n Processing --> Error: Fail\n Error --> Idle: Retry\n Success --> [*]"
25
- },
26
- {
27
- label: "Git",
28
- code: "gitGraph\n commit\n branch develop\n checkout develop\n commit\n checkout main\n merge develop\n commit"
29
25
  }
30
26
  ];
31
27
  var MermaidLivePreview = ({ code, svgRef, colorScheme }) => {
@@ -34,7 +30,7 @@ var MermaidLivePreview = ({ code, svgRef, colorScheme }) => {
34
30
  const t = setTimeout(() => setDebounced(code), 300);
35
31
  return () => clearTimeout(t);
36
32
  }, [code]);
37
- const { loading, error, imgSrc, svg, width, height } = useMermaidRender(debounced, colorScheme);
33
+ const { error, imgSrc, svg, width, height } = useMermaidRender(debounced, colorScheme);
38
34
  useEffect(() => {
39
35
  svgRef.current = svg;
40
36
  }, [svg, svgRef]);
@@ -45,13 +41,6 @@ var MermaidLivePreview = ({ code, svgRef, colorScheme }) => {
45
41
  children: "Enter Mermaid code to see the preview"
46
42
  })
47
43
  });
48
- if (loading && !imgSrc) return /* @__PURE__ */ jsx("div", {
49
- className: editorPreviewWrap,
50
- children: /* @__PURE__ */ jsx("div", {
51
- className: mermaidLoading,
52
- children: "Rendering"
53
- })
54
- });
55
44
  if (error && !imgSrc) return /* @__PURE__ */ jsx("div", {
56
45
  className: editorPreviewWrap,
57
46
  children: /* @__PURE__ */ jsxs("div", {
@@ -245,18 +234,18 @@ var MermaidEditorContent = ({ initialContent, onSave, dismiss, colorScheme }) =>
245
234
  /* @__PURE__ */ jsxs("div", {
246
235
  className: editorBody,
247
236
  children: [activeView !== "preview" && /* @__PURE__ */ jsxs("div", {
248
- className: `_36yqiej ${activeView === "code" ? "_36yqiel" : "_36yqiek"}`,
237
+ className: `_36yqiek ${activeView === "code" ? "_36yqiem" : "_36yqiel"}`,
249
238
  children: [/* @__PURE__ */ jsx("div", {
250
- className: "_36yqiem",
239
+ className: "_36yqien",
251
240
  children: "Editor"
252
241
  }), /* @__PURE__ */ jsx(CodeEditor, {
253
242
  value: code,
254
243
  onChange: setCode
255
244
  })]
256
245
  }), activeView !== "code" && /* @__PURE__ */ jsxs("div", {
257
- className: "_36yqien",
246
+ className: "_36yqieo",
258
247
  children: [/* @__PURE__ */ jsx("div", {
259
- className: "_36yqiem",
248
+ className: "_36yqien",
260
249
  children: "Preview"
261
250
  }), /* @__PURE__ */ jsx(MermaidLivePreview, {
262
251
  code,
@@ -312,7 +301,7 @@ var ZoomControls = () => {
312
301
  };
313
302
  var MermaidEditRenderer = ({ content, onContentChange }) => {
314
303
  const colorScheme = useColorScheme();
315
- const { loading, error, imgSrc, width, height } = useMermaidRender(content);
304
+ const { error, imgSrc, width, height } = useMermaidRender(content);
316
305
  const { className: portalClassName } = usePortalTheme();
317
306
  const handleClick = useCallback(() => {
318
307
  if (!onContentChange) return;
@@ -335,10 +324,6 @@ var MermaidEditRenderer = ({ content, onContentChange }) => {
335
324
  portalClassName,
336
325
  colorScheme
337
326
  ]);
338
- if (loading) return /* @__PURE__ */ jsx("div", {
339
- className: mermaidLoading,
340
- children: "Mermaid Loading"
341
- });
342
327
  if (!imgSrc) return /* @__PURE__ */ jsx("div", {
343
328
  className: mermaidError,
344
329
  children: error || "Render failed"
@@ -1,2 +1,2 @@
1
- :root{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}:root.dark,[data-theme=dark]{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._165ss5a0{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._165ss5a1{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.8;--rc-line-height-tight:1.4;--rc-font-family:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._165ss5a2{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#a3a3a3;--rc-quote-bg:#fafafa;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:none;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:2px;--rc-space-sm:4px;--rc-space-md:10px;--rc-space-lg:16px;--rc-space-xl:20px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:14px;--rc-font-size-small:12px;--rc-line-height:1.5;--rc-line-height-tight:1.3;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:3px;--rc-radius-md:6px;--rc-radius-lg:12px}.dark ._165ss5a0,[data-theme=dark] ._165ss5a0,.dark._165ss5a0,[data-theme=dark]._165ss5a0,.dark ._165ss5a1,[data-theme=dark] ._165ss5a1,.dark._165ss5a1,[data-theme=dark]._165ss5a1,.dark ._165ss5a2,[data-theme=dark] ._165ss5a2,.dark._165ss5a2,[data-theme=dark]._165ss5a2{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006}@keyframes _36yqie5{to{transform:rotate(360deg)}}._36yqie0{cursor:grab;flex-direction:column;align-items:center;margin:1rem 0;display:flex;position:relative;overflow:hidden}._36yqie0:active{cursor:grabbing}._36yqie0 img{max-width:100%;height:auto}._36yqie1{font-size:var(--rc-font-size-xs);color:var(--rc-text-secondary);background-color:color-mix(in srgb, var(--rc-bg) 80%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;cursor:pointer;z-index:2;border-radius:4px;padding:2px 8px;transition:opacity .2s;position:absolute;top:8px;right:8px}._36yqie1:hover{color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-bg) 95%, transparent)}._36yqie0:hover ._36yqie1{opacity:1}._36yqie2{opacity:0;z-index:2;gap:2px;transition:opacity .2s;display:flex;position:absolute;bottom:8px;right:8px}._36yqie0:hover ._36yqie2{opacity:1}._36yqie3{cursor:pointer;width:28px;height:28px;color:var(--rc-text-secondary);background-color:color-mix(in srgb, var(--rc-bg) 80%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:none;border-radius:.25rem;justify-content:center;align-items:center;transition:color .15s,background-color .15s;display:inline-flex}._36yqie3:hover{color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-bg) 95%, transparent)}._36yqie4{min-height:80px;color:var(--rc-text-secondary);font-size:var(--rc-font-size-md);justify-content:center;align-items:center;display:flex}._36yqie4:after{content:"";border:2px solid;border-right-color:#0000;border-radius:50%;width:16px;height:16px;margin-left:8px;animation:.6s linear infinite _36yqie5;display:inline-block}._36yqie6{background-color:color-mix(in srgb, var(--rc-alert-caution) 10%, transparent);min-height:50px;color:var(--rc-alert-caution);font-size:var(--rc-font-size-md);border-radius:.5rem;justify-content:center;align-items:center;padding:.75rem 1rem;display:flex}._36yqie7._36yqie7{border-radius:.5rem;flex-direction:column;gap:0;width:calc(100vw - 2rem);height:min(680px,85vh);padding:0;display:flex;overflow:hidden}._36yqie8{border-bottom:1px solid var(--rc-border);flex-shrink:0;justify-content:space-between;align-items:center;height:48px;padding:0 .5rem 0 1rem;display:flex}._36yqie9{align-items:center;gap:.75rem;display:flex}._36yqiea{align-items:center;gap:4px;display:flex}._36yqieb{background-color:var(--rc-border);flex-shrink:0;width:1px;height:16px}._36yqiec{font-size:var(--rc-font-size-md);color:var(--rc-text);align-items:center;gap:.5rem;font-weight:500;display:flex}._36yqied{font-size:var(--rc-font-size-xs);color:var(--rc-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:.375rem;padding:.25rem .5rem;transition:color .15s,background-color .15s}._36yqied:hover{color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-text) 5%, transparent)}._36yqiee{background-color:color-mix(in srgb, var(--rc-text) 5%, transparent);border-radius:.375rem;align-items:center;margin-right:4px;padding:2px;display:flex}._36yqief{cursor:pointer;color:var(--rc-text-secondary);background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;padding:4px;transition:color .15s,background-color .15s,box-shadow .15s;display:inline-flex}._36yqief:hover{color:var(--rc-text)}._36yqieg{background-color:var(--rc-bg);color:var(--rc-text);box-shadow:var(--rc-shadow-menu)}._36yqieh{cursor:pointer;width:28px;height:28px;color:var(--rc-text-secondary);background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;transition:color .15s,background-color .15s;display:inline-flex}._36yqieh:hover{color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-text) 5%, transparent)}._36yqiei{flex:1;min-height:0;display:flex}._36yqiej{border-right:1px solid var(--rc-border);flex-direction:column;display:flex}._36yqiek{width:50%}._36yqiel{flex:1}._36yqiem{border-bottom:1px solid var(--rc-border);background-color:color-mix(in srgb, var(--rc-text) 2%, transparent);height:32px;font-size:var(--rc-font-size-xs);color:var(--rc-text-secondary);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;align-items:center;padding:0 .75rem;font-weight:500;display:flex}._36yqien{flex-direction:column;flex:1;display:flex}._36yqieo{cursor:grab;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}._36yqieo:active{cursor:grabbing}._36yqieo:hover ._36yqie2{opacity:1}._36yqieo img{max-width:100%;height:auto}._36yqiep{font-size:var(--rc-font-size-md);color:color-mix(in srgb, var(--rc-text-secondary) 50%, transparent)}._36yqieq{text-align:center;flex-direction:column;align-items:center;gap:.75rem;max-width:320px;display:flex}._36yqier{background-color:color-mix(in srgb, var(--rc-alert-caution) 10%, transparent);width:32px;height:32px;color:var(--rc-alert-caution);border-radius:.375rem;justify-content:center;align-items:center;display:inline-flex}._36yqies{font-size:var(--rc-font-size-md);color:var(--rc-text);font-weight:500}._36yqiet{font-size:var(--rc-font-size-xs);color:var(--rc-text-secondary);-webkit-line-clamp:3;-webkit-box-orient:vertical;line-height:1.5;display:-webkit-box;overflow:hidden}._36yqieu{min-height:0;font-family:var(--rc-font-mono);font-size:var(--rc-font-size-sm);flex:1;line-height:1.25rem;display:flex;position:relative;overflow:hidden}._36yqiev{-webkit-user-select:none;user-select:none;border-right:1px solid var(--rc-border);background-color:color-mix(in srgb, var(--rc-text) 2%, transparent);flex-shrink:0;width:40px;padding:.75rem 0;overflow:hidden}._36yqiew{text-align:right;color:color-mix(in srgb, var(--rc-text-secondary) 40%, transparent);padding:0 .5rem;line-height:1.25rem}._36yqiex{resize:none;color:var(--rc-text);line-height:1.25rem;font-family:var(--rc-font-mono);font-size:var(--rc-font-size-md);-moz-tab-size:2;tab-size:2;background-color:#0000;border:none;outline:none;flex:1;padding:.75rem}._36yqiex::placeholder{color:color-mix(in srgb, var(--rc-text-secondary) 40%, transparent)}._36yqiey{border-top:1px solid var(--rc-border);background-color:color-mix(in srgb, var(--rc-text) 1.5%, transparent);flex-shrink:0;justify-content:flex-end;align-items:center;height:44px;padding:0 1rem;display:flex}._36yqiez{align-items:center;gap:.5rem;display:flex}._36yqie10{background-color:var(--rc-alert-tip);border-radius:50%;width:6px;height:6px}._36yqie11{font-size:var(--rc-font-size-xs);color:var(--rc-text-secondary)}._36yqie12{align-items:center;gap:.5rem;display:flex}._36yqie13{font-size:var(--rc-font-size-xs);cursor:pointer;border-radius:.375rem;height:28px;padding:.25rem .75rem;font-weight:500;transition:background-color .15s,border-color .15s}._36yqie14{color:var(--rc-text-secondary);border:1px solid var(--rc-border);background-color:#0000}._36yqie14:hover{background-color:color-mix(in srgb, var(--rc-text) 4%, transparent)}._36yqie15{background-color:var(--rc-text);color:var(--rc-bg);border:1px solid #0000}._36yqie15:hover{background-color:color-mix(in srgb, var(--rc-text) 85%, transparent)}@media (min-width:640px){._36yqie7._36yqie7{max-width:64rem}}
1
+ :root{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}:root.dark,[data-theme=dark]{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._165ss5a0{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._165ss5a1{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.8;--rc-line-height-tight:1.4;--rc-font-family:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._165ss5a2{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#a3a3a3;--rc-quote-bg:#fafafa;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:none;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:2px;--rc-space-sm:4px;--rc-space-md:10px;--rc-space-lg:16px;--rc-space-xl:20px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:14px;--rc-font-size-small:12px;--rc-line-height:1.5;--rc-line-height-tight:1.3;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:3px;--rc-radius-md:6px;--rc-radius-lg:12px}.dark ._165ss5a0,[data-theme=dark] ._165ss5a0,.dark._165ss5a0,[data-theme=dark]._165ss5a0,.dark ._165ss5a1,[data-theme=dark] ._165ss5a1,.dark._165ss5a1,[data-theme=dark]._165ss5a1,.dark ._165ss5a2,[data-theme=dark] ._165ss5a2,.dark._165ss5a2,[data-theme=dark]._165ss5a2{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006}@keyframes _36yqie5{to{transform:rotate(360deg)}}._36yqie0{cursor:grab;flex-direction:column;align-items:center;margin:1rem 0;display:flex;position:relative;overflow:hidden}._36yqie0:active{cursor:grabbing}._36yqie0 img{max-width:100%;height:auto}._36yqie1{font-size:var(--rc-font-size-xs);color:var(--rc-text-secondary);background-color:color-mix(in srgb, var(--rc-bg) 80%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;cursor:pointer;z-index:2;border-radius:4px;padding:2px 8px;transition:opacity .2s;position:absolute;top:8px;right:8px}._36yqie1:hover{color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-bg) 95%, transparent)}._36yqie0:hover ._36yqie1{opacity:1}._36yqie2{opacity:0;z-index:2;gap:2px;transition:opacity .2s;display:flex;position:absolute;bottom:8px;right:8px}._36yqie0:hover ._36yqie2{opacity:1}._36yqie3{cursor:pointer;width:28px;height:28px;color:var(--rc-text-secondary);background-color:color-mix(in srgb, var(--rc-bg) 80%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:none;border-radius:.25rem;justify-content:center;align-items:center;transition:color .15s,background-color .15s;display:inline-flex}._36yqie3:hover{color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-bg) 95%, transparent)}._36yqie4{color:var(--rc-text-secondary);font-size:var(--rc-font-size-md);flex-direction:column;justify-content:center;align-items:center;gap:12px;margin:1rem 0;display:flex}._36yqie6{border:2.5px solid;border-right-color:#0000;border-radius:50%;width:24px;height:24px;animation:.6s linear infinite _36yqie5;display:inline-block}._36yqie7{background-color:color-mix(in srgb, var(--rc-alert-caution) 10%, transparent);color:var(--rc-alert-caution);font-size:var(--rc-font-size-md);border-radius:.5rem;justify-content:center;align-items:center;margin:1rem 0;padding:.75rem 1rem;display:flex}._36yqie8._36yqie8{border-radius:.5rem;flex-direction:column;gap:0;width:calc(100vw - 2rem);height:min(680px,85vh);padding:0;display:flex;overflow:hidden}._36yqie9{border-bottom:1px solid var(--rc-border);flex-shrink:0;justify-content:space-between;align-items:center;height:48px;padding:0 .5rem 0 1rem;display:flex}._36yqiea{align-items:center;gap:.75rem;display:flex}._36yqieb{align-items:center;gap:4px;display:flex}._36yqiec{background-color:var(--rc-border);flex-shrink:0;width:1px;height:16px}._36yqied{font-size:var(--rc-font-size-md);color:var(--rc-text);align-items:center;gap:.5rem;font-weight:500;display:flex}._36yqiee{font-size:var(--rc-font-size-xs);color:var(--rc-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:.375rem;padding:.25rem .5rem;transition:color .15s,background-color .15s}._36yqiee:hover{color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-text) 5%, transparent)}._36yqief{background-color:color-mix(in srgb, var(--rc-text) 5%, transparent);border-radius:.375rem;align-items:center;margin-right:4px;padding:2px;display:flex}._36yqieg{cursor:pointer;color:var(--rc-text-secondary);background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;padding:4px;transition:color .15s,background-color .15s,box-shadow .15s;display:inline-flex}._36yqieg:hover{color:var(--rc-text)}._36yqieh{background-color:var(--rc-bg);color:var(--rc-text);box-shadow:var(--rc-shadow-menu)}._36yqiei{cursor:pointer;width:28px;height:28px;color:var(--rc-text-secondary);background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;transition:color .15s,background-color .15s;display:inline-flex}._36yqiei:hover{color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-text) 5%, transparent)}._36yqiej{flex:1;min-height:0;display:flex}._36yqiek{border-right:1px solid var(--rc-border);flex-direction:column;display:flex}._36yqiel{width:50%}._36yqiem{flex:1}._36yqien{border-bottom:1px solid var(--rc-border);background-color:color-mix(in srgb, var(--rc-text) 2%, transparent);height:32px;font-size:var(--rc-font-size-xs);color:var(--rc-text-secondary);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;align-items:center;padding:0 .75rem;font-weight:500;display:flex}._36yqieo{flex-direction:column;flex:1;display:flex}._36yqiep{cursor:grab;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}._36yqiep:active{cursor:grabbing}._36yqiep:hover ._36yqie2{opacity:1}._36yqiep img{max-width:100%;height:auto}._36yqieq{font-size:var(--rc-font-size-md);color:color-mix(in srgb, var(--rc-text-secondary) 50%, transparent)}._36yqier{text-align:center;flex-direction:column;align-items:center;gap:.75rem;max-width:320px;display:flex}._36yqies{background-color:color-mix(in srgb, var(--rc-alert-caution) 10%, transparent);width:32px;height:32px;color:var(--rc-alert-caution);border-radius:.375rem;justify-content:center;align-items:center;display:inline-flex}._36yqiet{font-size:var(--rc-font-size-md);color:var(--rc-text);font-weight:500}._36yqieu{font-size:var(--rc-font-size-xs);color:var(--rc-text-secondary);-webkit-line-clamp:3;-webkit-box-orient:vertical;line-height:1.5;display:-webkit-box;overflow:hidden}._36yqiev{min-height:0;font-family:var(--rc-font-mono);font-size:var(--rc-font-size-sm);flex:1;line-height:1.25rem;display:flex;position:relative;overflow:hidden}._36yqiew{-webkit-user-select:none;user-select:none;border-right:1px solid var(--rc-border);background-color:color-mix(in srgb, var(--rc-text) 2%, transparent);flex-shrink:0;width:40px;padding:.75rem 0;overflow:hidden}._36yqiex{text-align:right;color:color-mix(in srgb, var(--rc-text-secondary) 40%, transparent);padding:0 .5rem;line-height:1.25rem}._36yqiey{resize:none;color:var(--rc-text);line-height:1.25rem;font-family:var(--rc-font-mono);font-size:var(--rc-font-size-md);-moz-tab-size:2;tab-size:2;background-color:#0000;border:none;outline:none;flex:1;padding:.75rem}._36yqiey::placeholder{color:color-mix(in srgb, var(--rc-text-secondary) 40%, transparent)}._36yqiez{border-top:1px solid var(--rc-border);background-color:color-mix(in srgb, var(--rc-text) 1.5%, transparent);flex-shrink:0;justify-content:flex-end;align-items:center;height:44px;padding:0 1rem;display:flex}._36yqie10{align-items:center;gap:.5rem;display:flex}._36yqie11{background-color:var(--rc-alert-tip);border-radius:50%;width:6px;height:6px}._36yqie12{font-size:var(--rc-font-size-xs);color:var(--rc-text-secondary)}._36yqie13{align-items:center;gap:.5rem;display:flex}._36yqie14{font-size:var(--rc-font-size-xs);cursor:pointer;border-radius:.375rem;height:28px;padding:.25rem .75rem;font-weight:500;transition:background-color .15s,border-color .15s}._36yqie15{color:var(--rc-text-secondary);border:1px solid var(--rc-border);background-color:#0000}._36yqie15:hover{background-color:color-mix(in srgb, var(--rc-text) 4%, transparent)}._36yqie16{background-color:var(--rc-text);color:var(--rc-bg);border:1px solid #0000}._36yqie16:hover{background-color:color-mix(in srgb, var(--rc-text) 85%, transparent)}@media (min-width:640px){._36yqie8._36yqie8{max-width:64rem}}
2
2
  /*$vite$:1*/
package/dist/static.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import { t as MermaidRenderer } from "./MermaidRenderer-Dik89l6Z.js";
1
+ import { t as MermaidRenderer } from "./MermaidRenderer-BGh5KLUU.js";
2
2
  export { MermaidRenderer };
@@ -3,6 +3,7 @@ export declare const mermaidEditHint: string;
3
3
  export declare const zoomControls: string;
4
4
  export declare const zoomBtn: string;
5
5
  export declare const mermaidLoading: string;
6
+ export declare const mermaidSpinner: string;
6
7
  export declare const mermaidError: string;
7
8
  declare const _editorPopup: string;
8
9
  export { _editorPopup as editorPopup };
@@ -1 +1 @@
1
- {"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,QAW3B,CAAC;AAOH,eAAO,MAAM,eAAe,QAuB1B,CAAC;AAEH,eAAO,MAAM,YAAY,QAcvB,CAAC;AAEH,eAAO,MAAM,OAAO,QAiBlB,CAAC;AAEH,eAAO,MAAM,cAAc,QAOzB,CAAC;AAkBH,eAAO,MAAM,YAAY,QAUvB,CAAC;AAIH,QAAA,MAAM,YAAY,QAAY,CAAC;AAgB/B,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC;AAEvC,eAAO,MAAM,YAAY,QAQvB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAI3B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC;AAEH,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,WAAW,QAOtB,CAAC;AAEH,eAAO,MAAM,YAAY,QAavB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAO3B,CAAC;AAEH,eAAO,MAAM,cAAc,QAczB,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAI/B,CAAC;AAEH,eAAO,MAAM,aAAa,QAgBxB,CAAC;AAEH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH,eAAO,MAAM,cAAc,QAA0B,CAAC;AACtD,eAAO,MAAM,cAAc,QAAqB,CAAC;AAEjD,eAAO,MAAM,eAAe,QAa1B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAY5B,CAAC;AAWH,eAAO,MAAM,kBAAkB,QAG7B,CAAC;AAEH,eAAO,MAAM,sBAAsB,QAOjC,CAAC;AAEH,eAAO,MAAM,sBAAsB,QASjC,CAAC;AAEH,eAAO,MAAM,uBAAuB,QAIlC,CAAC;AAEH,eAAO,MAAM,qBAAqB,QAQhC,CAAC;AAIH,eAAO,MAAM,UAAU,QASrB,CAAC;AAEH,eAAO,MAAM,UAAU,QAQrB,CAAC;AAEH,eAAO,MAAM,cAAc,QAKzB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAenB,CAAC;AAIH,eAAO,MAAM,YAAY,QASvB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,eAAe,QAK1B,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAG3B,CAAC;AAEH,eAAO,MAAM,aAAa,QAIxB,CAAC;AAYH,eAAO,MAAM,eAAe,QAU1B,CAAC;AAEH,eAAO,MAAM,aAAa,QAUxB,CAAC"}
1
+ {"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,QAW3B,CAAC;AAOH,eAAO,MAAM,eAAe,QAuB1B,CAAC;AAEH,eAAO,MAAM,YAAY,QAcvB,CAAC;AAEH,eAAO,MAAM,OAAO,QAiBlB,CAAC;AAEH,eAAO,MAAM,cAAc,QASzB,CAAC;AAMH,eAAO,MAAM,cAAc,QAQzB,CAAC;AAEH,eAAO,MAAM,YAAY,QAUvB,CAAC;AAIH,QAAA,MAAM,YAAY,QAAY,CAAC;AAgB/B,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC;AAEvC,eAAO,MAAM,YAAY,QAQvB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAI3B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC;AAEH,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,WAAW,QAOtB,CAAC;AAEH,eAAO,MAAM,YAAY,QAavB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAO3B,CAAC;AAEH,eAAO,MAAM,cAAc,QAczB,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAI/B,CAAC;AAEH,eAAO,MAAM,aAAa,QAgBxB,CAAC;AAEH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH,eAAO,MAAM,cAAc,QAA0B,CAAC;AACtD,eAAO,MAAM,cAAc,QAAqB,CAAC;AAEjD,eAAO,MAAM,eAAe,QAa1B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAY5B,CAAC;AAWH,eAAO,MAAM,kBAAkB,QAG7B,CAAC;AAEH,eAAO,MAAM,sBAAsB,QAOjC,CAAC;AAEH,eAAO,MAAM,sBAAsB,QASjC,CAAC;AAEH,eAAO,MAAM,uBAAuB,QAIlC,CAAC;AAEH,eAAO,MAAM,qBAAqB,QAQhC,CAAC;AAIH,eAAO,MAAM,UAAU,QASrB,CAAC;AAEH,eAAO,MAAM,UAAU,QAQrB,CAAC;AAEH,eAAO,MAAM,cAAc,QAKzB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAenB,CAAC;AAIH,eAAO,MAAM,YAAY,QASvB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,eAAe,QAK1B,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAG3B,CAAC;AAEH,eAAO,MAAM,aAAa,QAIxB,CAAC;AAYH,eAAO,MAAM,eAAe,QAU1B,CAAC;AAEH,eAAO,MAAM,aAAa,QAUxB,CAAC"}
@@ -2,8 +2,8 @@ import { ColorScheme } from '@haklex/rich-editor/static';
2
2
  export declare function useMermaidRender(content: string, preferredColorScheme?: ColorScheme): {
3
3
  loading: boolean;
4
4
  error: string;
5
- imgSrc: string;
6
5
  svg: string;
6
+ imgSrc: string;
7
7
  width: number | undefined;
8
8
  height: number | undefined;
9
9
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useMermaidRender.d.ts","sourceRoot":"","sources":["../src/useMermaidRender.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAO9D,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,oBAAoB,CAAC,EAAE,WAAW;;;;;;;EAyFnF"}
1
+ {"version":3,"file":"useMermaidRender.d.ts","sourceRoot":"","sources":["../src/useMermaidRender.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAwB9D,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,oBAAoB,CAAC,EAAE,WAAW;;;;;WAWxD,MAAM,GAAG,SAAS;YACjB,MAAM,GAAG,SAAS;EA8B9C"}
package/dist/utils.d.ts CHANGED
@@ -1,4 +1,2 @@
1
- export type { ThemeTokens } from './mermaid-theme';
2
- export { darkTheme, darkTokens, deriveTokens, lightTheme, lightTokens, } from './mermaid-theme';
3
- export { postProcessMermaidSvg } from './svg-post-process';
1
+ export {};
4
2
  //# sourceMappingURL=utils.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EACL,SAAS,EACT,UAAU,EACV,YAAY,EACZ,UAAU,EACV,WAAW,GACZ,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haklex/rich-renderer-mermaid",
3
- "version": "0.15.0",
3
+ "version": "0.15.2",
4
4
  "description": "Mermaid diagram renderer",
5
5
  "repository": {
6
6
  "type": "git",
@@ -29,7 +29,7 @@
29
29
  "dist"
30
30
  ],
31
31
  "dependencies": {
32
- "mermaid": "^11.15.0",
32
+ "beautiful-mermaid": "^1.1.3",
33
33
  "react-zoom-pan-pinch": "^4.0.3"
34
34
  },
35
35
  "devDependencies": {
@@ -47,9 +47,9 @@
47
47
  "lucide-react": "^1.0.0",
48
48
  "react": ">=19",
49
49
  "react-dom": ">=19",
50
- "@haklex/rich-editor": "0.15.0",
51
- "@haklex/rich-style-token": "0.15.0",
52
- "@haklex/rich-editor-ui": "0.15.0"
50
+ "@haklex/rich-editor": "0.15.2",
51
+ "@haklex/rich-editor-ui": "0.15.2",
52
+ "@haklex/rich-style-token": "0.15.2"
53
53
  },
54
54
  "publishConfig": {
55
55
  "access": "public"
@@ -1,586 +0,0 @@
1
- import { useColorScheme } from "@haklex/rich-editor/static";
2
- import { useEffect, useId, useState } from "react";
3
- import { jsx } from "react/jsx-runtime";
4
- //#region src/styles.css.ts
5
- var mermaidContainer = "_36yqie0";
6
- var mermaidEditHint = "_36yqie1";
7
- var zoomControls = "_36yqie2";
8
- var zoomBtn = "_36yqie3";
9
- var mermaidLoading = "_36yqie4";
10
- var mermaidError = "_36yqie6";
11
- var editorPopup = "_36yqie7";
12
- var editorHeader = "_36yqie8";
13
- var editorHeaderLeft = "_36yqie9";
14
- var editorHeaderRight = "_36yqiea";
15
- var editorSep = "_36yqieb";
16
- var editorTitle = "_36yqiec";
17
- var editorTplBtn = "_36yqied";
18
- var editorViewToggle = "_36yqiee";
19
- var editorViewItem = "_36yqief";
20
- var editorViewItemActive = "_36yqieg";
21
- var editorIconBtn = "_36yqieh";
22
- var editorBody = "_36yqiei";
23
- var editorPane = "_36yqiej";
24
- var editorPaneHalf = "_36yqiek";
25
- var editorPaneFull = "_36yqiel";
26
- var editorPaneLabel = "_36yqiem";
27
- var editorPreviewPane = "_36yqien";
28
- var editorPreviewWrap = "_36yqieo";
29
- var editorPreviewEmpty = "_36yqiep";
30
- var editorPreviewErrorWrap = "_36yqieq";
31
- var editorPreviewErrorIcon = "_36yqier";
32
- var editorPreviewErrorTitle = "_36yqies";
33
- var editorPreviewErrorMsg = "_36yqiet";
34
- var codeEditor = "_36yqieu";
35
- var codeGutter = "_36yqiev";
36
- var codeGutterLine = "_36yqiew";
37
- var codeArea = "_36yqiex";
38
- var editorFooter = "_36yqiey";
39
- var footerActions = "_36yqie12";
40
- var footerBtnCancel = "_36yqie14 _36yqie13";
41
- var footerBtnSave = "_36yqie15 _36yqie13";
42
- //#endregion
43
- //#region src/mermaid-theme.ts
44
- var MIX = {
45
- text: 100,
46
- textSec: 60,
47
- textMuted: 40,
48
- textFaint: 25,
49
- line: 50,
50
- arrow: 85,
51
- nodeFill: 3,
52
- nodeStroke: 20,
53
- groupHeader: 5,
54
- innerStroke: 12
55
- };
56
- function parseHex(hex) {
57
- return [
58
- Number.parseInt(hex.slice(1, 3), 16),
59
- Number.parseInt(hex.slice(3, 5), 16),
60
- Number.parseInt(hex.slice(5, 7), 16)
61
- ];
62
- }
63
- function toHex(r, g, b) {
64
- const clamp = (v) => Math.round(Math.max(0, Math.min(255, v)));
65
- return `#${clamp(r).toString(16).padStart(2, "0")}${clamp(g).toString(16).padStart(2, "0")}${clamp(b).toString(16).padStart(2, "0")}`;
66
- }
67
- function mix(fg, bg, percent) {
68
- const [fR, fG, fB] = parseHex(fg);
69
- const [bR, bG, bB] = parseHex(bg);
70
- const p = percent / 100;
71
- return toHex(fR * p + bR * (1 - p), fG * p + bG * (1 - p), fB * p + bB * (1 - p));
72
- }
73
- function deriveTokens(bg, fg) {
74
- return {
75
- bg,
76
- fg,
77
- line: mix(fg, bg, MIX.line),
78
- arrow: mix(fg, bg, MIX.arrow),
79
- nodeFill: mix(fg, bg, MIX.nodeFill),
80
- nodeStroke: mix(fg, bg, MIX.nodeStroke),
81
- groupHeader: mix(fg, bg, MIX.groupHeader),
82
- innerStroke: mix(fg, bg, MIX.innerStroke),
83
- textSec: mix(fg, bg, MIX.textSec),
84
- textMuted: mix(fg, bg, MIX.textMuted),
85
- textFaint: mix(fg, bg, MIX.textFaint)
86
- };
87
- }
88
- function buildTheme(bg, fg) {
89
- const t = deriveTokens(bg, fg);
90
- return {
91
- theme: "base",
92
- themeVariables: {
93
- background: t.bg,
94
- fontFamily: "system-ui, -apple-system, sans-serif",
95
- fontSize: "14px",
96
- primaryColor: t.nodeFill,
97
- primaryTextColor: t.fg,
98
- primaryBorderColor: t.nodeStroke,
99
- secondaryColor: t.nodeFill,
100
- secondaryTextColor: t.fg,
101
- secondaryBorderColor: t.innerStroke,
102
- tertiaryColor: t.groupHeader,
103
- tertiaryTextColor: t.fg,
104
- tertiaryBorderColor: t.innerStroke,
105
- noteBkgColor: t.nodeFill,
106
- noteTextColor: t.fg,
107
- noteBorderColor: t.innerStroke,
108
- lineColor: t.line,
109
- textColor: t.fg,
110
- mainBkg: t.nodeFill,
111
- nodeBorder: t.nodeStroke,
112
- nodeTextColor: t.fg,
113
- clusterBkg: t.bg,
114
- clusterBorder: t.nodeStroke,
115
- titleColor: t.fg,
116
- labelColor: t.fg,
117
- altBackground: t.nodeFill,
118
- fillType0: t.nodeFill,
119
- fillType1: t.groupHeader,
120
- fillType2: mix(fg, bg, 7),
121
- fillType3: t.innerStroke,
122
- fillType4: t.nodeStroke,
123
- fillType5: t.groupHeader,
124
- fillType6: t.nodeFill,
125
- fillType7: mix(fg, bg, 7),
126
- actorBkg: t.nodeFill,
127
- actorBorder: t.nodeStroke,
128
- actorTextColor: t.fg,
129
- actorLineColor: t.line,
130
- signalColor: t.fg,
131
- signalTextColor: t.fg,
132
- labelBoxBkgColor: t.nodeFill,
133
- labelBoxBorderColor: t.nodeStroke,
134
- labelTextColor: t.fg,
135
- loopTextColor: t.fg,
136
- activationBorderColor: t.line,
137
- activationBkgColor: t.innerStroke,
138
- sequenceNumberColor: t.bg,
139
- git0: t.fg,
140
- git1: t.line,
141
- git2: t.textMuted,
142
- git3: t.textFaint,
143
- git4: t.nodeStroke,
144
- git5: t.innerStroke,
145
- git6: t.groupHeader,
146
- git7: t.nodeFill,
147
- gitBranchLabel0: t.bg,
148
- gitBranchLabel1: t.bg,
149
- gitBranchLabel2: t.bg,
150
- gitBranchLabel3: t.fg,
151
- gitInv0: t.bg,
152
- pie1: t.fg,
153
- pie2: mix(fg, bg, 80),
154
- pie3: t.line,
155
- pie4: t.textMuted,
156
- pie5: t.nodeStroke,
157
- pie6: t.innerStroke,
158
- pie7: mix(fg, bg, 7),
159
- pie8: t.groupHeader,
160
- pie9: t.nodeFill,
161
- pie10: t.bg,
162
- pie11: t.textSec,
163
- pie12: t.arrow,
164
- pieTitleTextColor: t.fg,
165
- pieSectionTextColor: t.bg,
166
- pieLegendTextColor: t.fg,
167
- pieLegendTextSize: "14px",
168
- pieStrokeColor: t.bg,
169
- pieStrokeWidth: "2px",
170
- classText: t.fg,
171
- sectionBkgColor: t.nodeFill,
172
- altSectionBkgColor: t.groupHeader,
173
- sectionBkgColor2: mix(fg, bg, 7),
174
- taskBkgColor: t.innerStroke,
175
- taskTextColor: t.fg,
176
- taskTextLightColor: t.fg,
177
- taskTextOutsideColor: t.fg,
178
- activeTaskBkgColor: t.nodeStroke,
179
- activeTaskBorderColor: t.line,
180
- gridColor: t.innerStroke,
181
- doneTaskBkgColor: t.nodeStroke,
182
- doneTaskBorderColor: t.line,
183
- critBkgColor: t.fg,
184
- critBorderColor: t.fg,
185
- todayLineColor: t.fg,
186
- requirementBackground: t.nodeFill,
187
- requirementBorderColor: t.nodeStroke,
188
- requirementBorderSize: "1px",
189
- requirementTextColor: t.fg,
190
- relationColor: t.line,
191
- relationLabelBackground: t.bg,
192
- relationLabelColor: t.fg,
193
- edgeLabelBackground: t.bg,
194
- cScale0: t.nodeFill,
195
- cScale1: t.innerStroke,
196
- cScale2: t.nodeStroke,
197
- cScale3: t.textMuted,
198
- cScale4: t.line,
199
- cScale5: t.textSec,
200
- cScale6: mix(fg, bg, 70),
201
- cScale7: mix(fg, bg, 80),
202
- cScale8: t.arrow,
203
- cScale9: t.fg,
204
- cScaleLabel0: t.fg,
205
- cScaleLabel2: t.fg
206
- }
207
- };
208
- }
209
- var lightTheme = buildTheme("#ffffff", "#262626");
210
- var darkTheme = buildTheme("#171717", "#fafafa");
211
- var lightTokens = deriveTokens("#ffffff", "#262626");
212
- var darkTokens = deriveTokens("#171717", "#fafafa");
213
- //#endregion
214
- //#region src/svg-post-process.ts
215
- var CORNER_RADIUS = {
216
- node: 5,
217
- classNode: 4,
218
- entity: 5,
219
- subgraphOuter: 7,
220
- subgraphHeader: 6,
221
- actor: 6,
222
- activation: 4,
223
- diamond: 4
224
- };
225
- /**
226
- * Convert node <polygon> elements to <path> with rounded corners.
227
- * Handles diamonds (4pt), hexagons (6pt), asymmetric (5pt), etc.
228
- * Each corner is replaced by a quadratic bezier curve.
229
- */
230
- function roundNodePolygons(doc, radius) {
231
- const polygons = doc.querySelectorAll(".node > polygon, .node polygon");
232
- for (const polygon of polygons) {
233
- const points = polygon.points;
234
- if (points.numberOfItems < 3) continue;
235
- const pts = [];
236
- for (let i = 0; i < points.numberOfItems; i++) {
237
- const p = points.getItem(i);
238
- pts.push([p.x, p.y]);
239
- }
240
- const d = pts.map((pt, i) => {
241
- const prev = pts[(i + pts.length - 1) % pts.length];
242
- const next = pts[(i + 1) % pts.length];
243
- const dx1 = prev[0] - pt[0];
244
- const dy1 = prev[1] - pt[1];
245
- const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
246
- const dx2 = next[0] - pt[0];
247
- const dy2 = next[1] - pt[1];
248
- const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
249
- const r = Math.min(radius, len1 / 2, len2 / 2);
250
- const startX = pt[0] + dx1 / len1 * r;
251
- const startY = pt[1] + dy1 / len1 * r;
252
- const endX = pt[0] + dx2 / len2 * r;
253
- const endY = pt[1] + dy2 / len2 * r;
254
- return `${i === 0 ? "M" : "L"}${startX},${startY} Q${pt[0]},${pt[1]} ${endX},${endY}`;
255
- }).join(" ");
256
- const path = doc.createElementNS("http://www.w3.org/2000/svg", "path");
257
- path.setAttribute("d", `${d} Z`);
258
- for (const attr of Array.from(polygon.attributes)) if (attr.name !== "points") path.setAttribute(attr.name, attr.value);
259
- polygon.replaceWith(path);
260
- }
261
- }
262
- function applyCornerRounding(doc) {
263
- const applyRadius = (selector, radius) => {
264
- const rects = doc.querySelectorAll(selector);
265
- for (const rect of rects) {
266
- rect.setAttribute("rx", String(radius));
267
- rect.setAttribute("ry", String(radius));
268
- }
269
- };
270
- applyRadius(".node > rect", CORNER_RADIUS.node);
271
- applyRadius(".node > .basic", CORNER_RADIUS.node);
272
- applyRadius(".classGroup > rect", CORNER_RADIUS.classNode);
273
- applyRadius(".er > rect", CORNER_RADIUS.entity);
274
- applyRadius(".cluster > rect", CORNER_RADIUS.subgraphOuter);
275
- applyRadius(".actor", CORNER_RADIUS.actor);
276
- applyRadius(".activation0, .activation1, .activation2", CORNER_RADIUS.activation);
277
- roundNodePolygons(doc, CORNER_RADIUS.diamond);
278
- }
279
- function buildVisualCss(tokens) {
280
- return `
281
- /* beautiful-mermaid inspired visual overrides */
282
-
283
- /* Edge styling: rounded linecaps for clean connections */
284
- .edgePath path.path,
285
- .flowchart-link,
286
- line[class*="messageLine"] {
287
- stroke-linecap: round !important;
288
- stroke-linejoin: round !important;
289
- }
290
-
291
- /* Cluster/subgraph "soft" styling */
292
- .cluster > rect {
293
- fill: ${tokens.nodeFill} !important;
294
- fill-opacity: 0.96 !important;
295
- stroke: ${tokens.nodeStroke} !important;
296
- stroke-width: 1px !important;
297
- }
298
-
299
- /* Cluster title */
300
- .cluster text,
301
- .cluster .nodeLabel {
302
- fill: ${tokens.textSec} !important;
303
- }
304
-
305
- /* Node stroke consistency */
306
- .node rect,
307
- .node circle,
308
- .node ellipse,
309
- .node polygon,
310
- .node .basic {
311
- stroke: ${tokens.nodeStroke} !important;
312
- stroke-width: 1px !important;
313
- }
314
-
315
- /* Node fill */
316
- .node rect,
317
- .node .basic {
318
- fill: ${tokens.nodeFill} !important;
319
- }
320
-
321
- /* Edge label "subtle" styling */
322
- .edgeLabel rect,
323
- .labelBkg {
324
- rx: 5 !important;
325
- ry: 5 !important;
326
- fill: ${tokens.bg} !important;
327
- stroke: ${tokens.innerStroke} !important;
328
- stroke-width: 1px !important;
329
- }
330
-
331
- .edgeLabel text,
332
- .edgeLabel .edgeLabel {
333
- fill: ${tokens.textMuted} !important;
334
- }
335
-
336
- /* Arrow heads */
337
- marker path {
338
- fill: ${tokens.arrow} !important;
339
- stroke: ${tokens.arrow} !important;
340
- }
341
-
342
- /* Edge paths */
343
- .edgePath path.path {
344
- stroke: ${tokens.line} !important;
345
- stroke-width: 1px !important;
346
- }
347
-
348
- /* Sequence diagram refinements */
349
- .actor {
350
- fill: ${tokens.nodeFill} !important;
351
- stroke: ${tokens.nodeStroke} !important;
352
- stroke-width: 1px !important;
353
- }
354
-
355
- .messageLine0,
356
- .messageLine1 {
357
- stroke: ${tokens.line} !important;
358
- stroke-width: 1px !important;
359
- }
360
-
361
- .messageText {
362
- fill: ${tokens.fg} !important;
363
- }
364
-
365
- .loopLine {
366
- stroke: ${tokens.innerStroke} !important;
367
- stroke-width: 1px !important;
368
- }
369
-
370
- .labelBox {
371
- fill: ${tokens.nodeFill} !important;
372
- stroke: ${tokens.nodeStroke} !important;
373
- stroke-width: 1px !important;
374
- }
375
-
376
- .loopText tspan,
377
- .loopText {
378
- fill: ${tokens.textSec} !important;
379
- }
380
-
381
- /* Activation bars */
382
- .activation0,
383
- .activation1,
384
- .activation2 {
385
- fill: ${tokens.innerStroke} !important;
386
- stroke: ${tokens.line} !important;
387
- }
388
-
389
- /* Note styling */
390
- .note {
391
- fill: ${tokens.nodeFill} !important;
392
- stroke: ${tokens.innerStroke} !important;
393
- }
394
-
395
- .noteText {
396
- fill: ${tokens.fg} !important;
397
- }
398
-
399
- /* Inner divider lines */
400
- .divider {
401
- stroke: ${tokens.innerStroke} !important;
402
- stroke-width: 0.75px !important;
403
- }
404
-
405
- /* Class diagram */
406
- .classGroup rect {
407
- fill: ${tokens.nodeFill} !important;
408
- stroke: ${tokens.nodeStroke} !important;
409
- stroke-width: 1px !important;
410
- }
411
-
412
- .classGroup line {
413
- stroke: ${tokens.innerStroke} !important;
414
- stroke-width: 0.75px !important;
415
- }
416
-
417
- .classGroup text {
418
- fill: ${tokens.fg} !important;
419
- }
420
-
421
- .classLabel .box {
422
- fill: ${tokens.groupHeader} !important;
423
- stroke: ${tokens.nodeStroke} !important;
424
- }
425
-
426
- .relation {
427
- stroke: ${tokens.line} !important;
428
- stroke-width: 1px !important;
429
- }
430
-
431
- /* State diagram */
432
- .stateGroup rect,
433
- .statediagram-state rect {
434
- fill: ${tokens.nodeFill} !important;
435
- stroke: ${tokens.nodeStroke} !important;
436
- stroke-width: 1px !important;
437
- rx: 5 !important;
438
- ry: 5 !important;
439
- }
440
-
441
- .stateGroup text {
442
- fill: ${tokens.fg} !important;
443
- }
444
-
445
- /* Git graph */
446
- .commit-id text {
447
- fill: ${tokens.textMuted} !important;
448
- }
449
-
450
- `;
451
- }
452
- function postProcessMermaidSvg(svg, tokens) {
453
- const normalizedSvg = svg.replaceAll(/<br\s*>/gi, "<br/>");
454
- const doc = new DOMParser().parseFromString(normalizedSvg, "image/svg+xml");
455
- if (doc.querySelector("parsererror")) return normalizedSvg;
456
- const root = doc.documentElement;
457
- if (!root || root.tagName.toLowerCase() !== "svg") return normalizedSvg;
458
- applyCornerRounding(doc);
459
- const viewBox = root.getAttribute("viewBox");
460
- if (viewBox) {
461
- const parts = viewBox.split(/\s+/).map(Number);
462
- if (parts.length === 4 && parts[2] > 0 && parts[3] > 0) {
463
- root.setAttribute("width", String(parts[2]));
464
- root.setAttribute("height", String(parts[3]));
465
- }
466
- }
467
- root.querySelector("style[data-visual-overrides]")?.remove();
468
- const styleEl = doc.createElementNS("http://www.w3.org/2000/svg", "style");
469
- styleEl.dataset.visualOverrides = "";
470
- styleEl.textContent = buildVisualCss(tokens);
471
- if (root.firstChild) root.insertBefore(styleEl, root.firstChild);
472
- else root.append(styleEl);
473
- return new XMLSerializer().serializeToString(root);
474
- }
475
- //#endregion
476
- //#region src/useMermaidRender.ts
477
- function useMermaidRender(content, preferredColorScheme) {
478
- const [loading, setLoading] = useState(true);
479
- const [error, setError] = useState("");
480
- const [svg, setSvg] = useState("");
481
- const [width, setWidth] = useState();
482
- const [height, setHeight] = useState();
483
- const colorScheme = useColorScheme();
484
- const effectiveColorScheme = preferredColorScheme ?? colorScheme;
485
- const id = useId().split(":").join("");
486
- useEffect(() => {
487
- if (!content) return;
488
- setError("");
489
- setLoading(true);
490
- let cancelled = false;
491
- import("mermaid").then(async (mo) => {
492
- const mermaid = mo.default;
493
- const themeConfig = effectiveColorScheme === "dark" ? darkTheme : lightTheme;
494
- const tokens = effectiveColorScheme === "dark" ? darkTokens : lightTokens;
495
- mermaid.initialize({
496
- startOnLoad: false,
497
- theme: themeConfig.theme,
498
- themeVariables: themeConfig.themeVariables,
499
- darkMode: effectiveColorScheme === "dark",
500
- flowchart: {
501
- htmlLabels: true,
502
- curve: "basis",
503
- padding: 20,
504
- nodeSpacing: 24,
505
- rankSpacing: 48
506
- },
507
- sequence: {
508
- actorMargin: 80,
509
- messageMargin: 40
510
- },
511
- gantt: {
512
- titleTopMargin: 16,
513
- barHeight: 24,
514
- barGap: 6
515
- }
516
- });
517
- let result;
518
- try {
519
- result = await mermaid.render(`mermaid-${id}`, content);
520
- } catch (err) {
521
- document.getElementById(`dmermaid-${id}`)?.remove();
522
- if (err instanceof Error) setError(err.message);
523
- setSvg("");
524
- setWidth(void 0);
525
- setHeight(void 0);
526
- }
527
- if (cancelled) return;
528
- if (result) {
529
- const processedSvg = postProcessMermaidSvg(result.svg, tokens);
530
- setSvg(processedSvg);
531
- const match = processedSvg.match(/viewBox="[^"]*\s([\d.]+)\s([\d.]+)"/);
532
- if (match?.[1] && match?.[2]) {
533
- setWidth(Number.parseInt(match[1]));
534
- setHeight(Number.parseInt(match[2]));
535
- }
536
- setError("");
537
- }
538
- setLoading(false);
539
- });
540
- return () => {
541
- cancelled = true;
542
- };
543
- }, [
544
- id,
545
- content,
546
- effectiveColorScheme
547
- ]);
548
- let imgSrc = "";
549
- if (svg) {
550
- const data = new TextEncoder().encode(svg);
551
- imgSrc = `data:image/svg+xml;base64,${btoa(String.fromCodePoint(...new Uint8Array(data)))}`;
552
- }
553
- return {
554
- loading,
555
- error,
556
- imgSrc,
557
- svg,
558
- width,
559
- height
560
- };
561
- }
562
- //#endregion
563
- //#region src/MermaidRenderer.tsx
564
- var MermaidRenderer = ({ content, colorScheme }) => {
565
- const { loading, error, imgSrc, width, height } = useMermaidRender(content, colorScheme);
566
- if (loading) return /* @__PURE__ */ jsx("pre", {
567
- className: mermaidLoading,
568
- children: /* @__PURE__ */ jsx("code", { children: content })
569
- });
570
- if (!imgSrc) return /* @__PURE__ */ jsx("div", {
571
- className: mermaidError,
572
- children: error || "Render failed"
573
- });
574
- return /* @__PURE__ */ jsx("div", {
575
- className: mermaidContainer,
576
- style: { cursor: "default" },
577
- children: /* @__PURE__ */ jsx("img", {
578
- alt: "Mermaid diagram",
579
- height,
580
- src: imgSrc,
581
- width
582
- })
583
- });
584
- };
585
- //#endregion
586
- export { editorViewToggle as A, editorPreviewPane as C, editorTplBtn as D, editorTitle as E, mermaidEditHint as F, mermaidError as I, mermaidLoading as L, footerBtnCancel as M, footerBtnSave as N, editorViewItem as O, mermaidContainer as P, zoomBtn as R, editorPreviewErrorWrap as S, editorSep as T, editorPopup as _, codeGutter as a, editorPreviewErrorMsg as b, editorFooter as c, editorHeaderRight as d, editorIconBtn as f, editorPaneLabel as g, editorPaneHalf as h, codeEditor as i, footerActions as j, editorViewItemActive as k, editorHeader as l, editorPaneFull as m, useMermaidRender as n, codeGutterLine as o, editorPane as p, codeArea as r, editorBody as s, MermaidRenderer as t, editorHeaderLeft as u, editorPreviewEmpty as v, editorPreviewWrap as w, editorPreviewErrorTitle as x, editorPreviewErrorIcon as y, zoomControls as z };
@@ -1,34 +0,0 @@
1
- /**
2
- * Mermaid theme system inspired by beautiful-mermaid (lukilabs/beautiful-mermaid).
3
- *
4
- * Architecture:
5
- * - Two base colors: bg (background) + fg (foreground)
6
- * - All derived colors computed via color-mix ratios from bg + fg
7
- * - Produces a coherent mono hierarchy on any bg/fg combination
8
- *
9
- * @see https://github.com/lukilabs/beautiful-mermaid/blob/main/src/theme.ts
10
- */
11
- interface MermaidThemeConfig {
12
- theme: 'base';
13
- themeVariables: Record<string, string>;
14
- }
15
- export interface ThemeTokens {
16
- arrow: string;
17
- bg: string;
18
- fg: string;
19
- groupHeader: string;
20
- innerStroke: string;
21
- line: string;
22
- nodeFill: string;
23
- nodeStroke: string;
24
- textFaint: string;
25
- textMuted: string;
26
- textSec: string;
27
- }
28
- export declare function deriveTokens(bg: string, fg: string): ThemeTokens;
29
- export declare const lightTheme: MermaidThemeConfig;
30
- export declare const darkTheme: MermaidThemeConfig;
31
- export declare const lightTokens: ThemeTokens;
32
- export declare const darkTokens: ThemeTokens;
33
- export {};
34
- //# sourceMappingURL=mermaid-theme.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"mermaid-theme.d.ts","sourceRoot":"","sources":["../src/mermaid-theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACxC;AAoCD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,WAAW,CAchE;AAqJD,eAAO,MAAM,UAAU,oBAAmC,CAAC;AAG3D,eAAO,MAAM,SAAS,oBAAmC,CAAC;AAE1D,eAAO,MAAM,WAAW,aAAqC,CAAC;AAC9D,eAAO,MAAM,UAAU,aAAqC,CAAC"}
@@ -1,3 +0,0 @@
1
- import { ThemeTokens } from './mermaid-theme';
2
- export declare function postProcessMermaidSvg(svg: string, tokens: ThemeTokens): string;
3
- //# sourceMappingURL=svg-post-process.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"svg-post-process.d.ts","sourceRoot":"","sources":["../src/svg-post-process.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAmRnD,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,MAAM,CAmD9E"}