@haklex/rich-renderer-mermaid 0.15.1 → 0.15.4

package/dist/MermaidEditRenderer.d.ts.map

@@ -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"}
+{"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"}

package/dist/MermaidRenderer-BGh5KLUU.js

@@ -0,0 +1,148 @@
+import { useColorScheme } from "@haklex/rich-editor/static";
+import { useMemo } from "react";
+import { renderMermaidSVG } from "beautiful-mermaid";
+import { jsx } from "react/jsx-runtime";
+//#region src/styles.css.ts
+var mermaidContainer = "_36yqie0";
+var mermaidEditHint = "_36yqie1";
+var zoomControls = "_36yqie2";
+var zoomBtn = "_36yqie3";
+var mermaidError = "_36yqie7";
+var editorPopup = "_36yqie8";
+var editorHeader = "_36yqie9";
+var editorHeaderLeft = "_36yqiea";
+var editorHeaderRight = "_36yqieb";
+var editorSep = "_36yqiec";
+var editorTitle = "_36yqied";
+var editorTplBtn = "_36yqiee";
+var editorViewToggle = "_36yqief";
+var editorViewItem = "_36yqieg";
+var editorViewItemActive = "_36yqieh";
+var editorIconBtn = "_36yqiei";
+var editorBody = "_36yqiej";
+var editorPane = "_36yqiek";
+var editorPaneHalf = "_36yqiel";
+var editorPaneFull = "_36yqiem";
+var editorPaneLabel = "_36yqien";
+var editorPreviewPane = "_36yqieo";
+var editorPreviewWrap = "_36yqiep";
+var editorPreviewEmpty = "_36yqieq";
+var editorPreviewErrorWrap = "_36yqier";
+var editorPreviewErrorIcon = "_36yqies";
+var editorPreviewErrorTitle = "_36yqiet";
+var editorPreviewErrorMsg = "_36yqieu";
+var codeEditor = "_36yqiev";
+var codeGutter = "_36yqiew";
+var codeGutterLine = "_36yqiex";
+var codeArea = "_36yqiey";
+var editorFooter = "_36yqiez";
+var footerActions = "_36yqie13";
+var footerBtnCancel = "_36yqie15 _36yqie14";
+var footerBtnSave = "_36yqie16 _36yqie14";
+//#endregion
+//#region src/useMermaidRender.ts
+var LIGHT_PALETTE = {
+	bg: "#ffffff",
+	fg: "#262626"
+};
+var DARK_PALETTE = {
+	bg: "#171717",
+	fg: "#fafafa"
+};
+function svgToDataUrl(svg) {
+	const bytes = new TextEncoder().encode(svg);
+	let binary = "";
+	for (const byte of bytes) binary += String.fromCodePoint(byte);
+	return `data:image/svg+xml;base64,${btoa(binary)}`;
+}
+function readDimensions(svg) {
+	const match = svg.match(/viewBox="\s*(?:[\d.-]+\s+){2}([\d.]+)\s+([\d.]+)/);
+	if (!match) return {};
+	return {
+		width: Number.parseFloat(match[1]),
+		height: Number.parseFloat(match[2])
+	};
+}
+function useMermaidRender(content, preferredColorScheme) {
+	const colorScheme = useColorScheme();
+	const effectiveColorScheme = preferredColorScheme ?? colorScheme;
+	return useMemo(() => {
+		if (!content) return {
+			loading: false,
+			error: "",
+			svg: "",
+			imgSrc: "",
+			width: void 0,
+			height: void 0
+		};
+		try {
+			const palette = effectiveColorScheme === "dark" ? DARK_PALETTE : LIGHT_PALETTE;
+			const svg = renderMermaidSVG(content, {
+				bg: palette.bg,
+				fg: palette.fg
+			});
+			const { width, height } = readDimensions(svg);
+			return {
+				loading: false,
+				error: "",
+				svg,
+				imgSrc: svgToDataUrl(svg),
+				width,
+				height
+			};
+		} catch (err) {
+			return {
+				loading: false,
+				error: err instanceof Error ? err.message : String(err),
+				svg: "",
+				imgSrc: "",
+				width: void 0,
+				height: void 0
+			};
+		}
+	}, [content, effectiveColorScheme]);
+}
+//#endregion
+//#region src/estimate-height.ts
+function estimateMermaidHeight(content) {
+	const lines = content.split("\n").map((l) => l.trim()).filter((l) => l && !l.startsWith("%%"));
+	const first = (lines[0] ?? "").toLowerCase();
+	let h;
+	if (first.startsWith("sequencediagram")) h = lines.length * 50 + 60;
+	else if (first.startsWith("gantt")) h = lines.length * 36 + 80;
+	else if (first.startsWith("pie")) h = 320;
+	else if (first.startsWith("flowchart lr") || first.startsWith("graph lr") || first.startsWith("flowchart rl") || first.startsWith("graph rl")) h = lines.length * 30 + 100;
+	else if (first.startsWith("classdiagram")) h = lines.length * 40 + 100;
+	else if (first.startsWith("statediagram")) h = lines.length * 50 + 80;
+	else if (first.startsWith("erdiagram")) h = lines.length * 60 + 80;
+	else if (first.startsWith("journey")) h = lines.length * 40 + 80;
+	else if (first.startsWith("mindmap")) h = lines.length * 50 + 100;
+	else h = lines.length * 60 + 80;
+	return Math.min(Math.max(Math.round(h), 200), 800);
+}
+//#endregion
+//#region src/MermaidRenderer.tsx
+var MermaidRenderer = ({ content, colorScheme }) => {
+	const { error, imgSrc, width, height } = useMermaidRender(content, colorScheme);
+	const wrapperStyle = { minHeight: estimateMermaidHeight(content) };
+	if (!imgSrc) return /* @__PURE__ */ jsx("div", {
+		className: mermaidError,
+		style: wrapperStyle,
+		children: error || "Render failed"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: mermaidContainer,
+		style: {
+			...wrapperStyle,
+			cursor: "default"
+		},
+		children: /* @__PURE__ */ jsx("img", {
+			alt: "Mermaid diagram",
+			height,
+			src: imgSrc,
+			width
+		})
+	});
+};
+//#endregion
+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 };

package/dist/MermaidRenderer.d.ts.map

@@ -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;AAMhC,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,GAAG;IAAE,WAAW,CAAC,EAAE,WAAW,CAAA;CAAE,CA8BpF,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"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"}

package/dist/index.mjs

@@ -1,4 +1,4 @@
-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-DnxSrFxY.js";
+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";
 import { useColorScheme } from "@haklex/rich-editor/static";
 import { presentDialog, usePortalTheme } from "@haklex/rich-editor-ui";
 import { CircleAlert, Code2, Columns2, Copy, Download, Eye, FishSymbol, Maximize2, RotateCcw, X, ZoomIn, ZoomOut } from "lucide-react";
@@ -22,10 +22,6 @@ var TEMPLATES = [
 	{
 		label: "State",
 		code: "stateDiagram-v2\n  [*] --> Idle\n  Idle --> Processing: Submit\n  Processing --> Success: Complete\n  Processing --> Error: Fail\n  Error --> Idle: Retry\n  Success --> [*]"
-	},
-	{
-		label: "Git",
-		code: "gitGraph\n  commit\n  branch develop\n  checkout develop\n  commit\n  checkout main\n  merge develop\n  commit"
 	}
 ];
 var MermaidLivePreview = ({ code, svgRef, colorScheme }) => {
@@ -34,7 +30,7 @@ var MermaidLivePreview = ({ code, svgRef, colorScheme }) => {
 		const t = setTimeout(() => setDebounced(code), 300);
 		return () => clearTimeout(t);
 	}, [code]);
-	const { loading, error, imgSrc, svg, width, height } = useMermaidRender(debounced, colorScheme);
+	const { error, imgSrc, svg, width, height } = useMermaidRender(debounced, colorScheme);
 	useEffect(() => {
 		svgRef.current = svg;
 	}, [svg, svgRef]);
@@ -45,13 +41,6 @@ var MermaidLivePreview = ({ code, svgRef, colorScheme }) => {
 			children: "Enter Mermaid code to see the preview"
 		})
 	});
-	if (loading && !imgSrc) return /* @__PURE__ */ jsx("div", {
-		className: editorPreviewWrap,
-		children: /* @__PURE__ */ jsx("div", {
-			className: mermaidLoading,
-			children: "Rendering"
-		})
-	});
 	if (error && !imgSrc) return /* @__PURE__ */ jsx("div", {
 		className: editorPreviewWrap,
 		children: /* @__PURE__ */ jsxs("div", {
@@ -312,7 +301,7 @@ var ZoomControls = () => {
 };
 var MermaidEditRenderer = ({ content, onContentChange }) => {
 	const colorScheme = useColorScheme();
-	const { loading, error, imgSrc, width, height } = useMermaidRender(content);
+	const { error, imgSrc, width, height } = useMermaidRender(content);
 	const { className: portalClassName } = usePortalTheme();
 	const handleClick = useCallback(() => {
 		if (!onContentChange) return;
@@ -335,10 +324,6 @@ var MermaidEditRenderer = ({ content, onContentChange }) => {
 		portalClassName,
 		colorScheme
 	]);
-	if (loading) return /* @__PURE__ */ jsx("div", {
-		className: mermaidLoading,
-		children: "Mermaid Loading"
-	});
 	if (!imgSrc) return /* @__PURE__ */ jsx("div", {
 		className: mermaidError,
 		children: error || "Render failed"

package/dist/static.mjs

@@ -1,2 +1,2 @@
-import { t as MermaidRenderer } from "./MermaidRenderer-DnxSrFxY.js";
+import { t as MermaidRenderer } from "./MermaidRenderer-BGh5KLUU.js";
 export { MermaidRenderer };

package/dist/useMermaidRender.d.ts

@@ -2,8 +2,8 @@ import { ColorScheme } from '@haklex/rich-editor/static';
 export declare function useMermaidRender(content: string, preferredColorScheme?: ColorScheme): {
     loading: boolean;
     error: string;
-    imgSrc: string;
     svg: string;
+    imgSrc: string;
     width: number | undefined;
     height: number | undefined;
 };

package/dist/useMermaidRender.d.ts.map

@@ -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"}
+{"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

@@ -1,4 +1,2 @@
-export type { ThemeTokens } from './mermaid-theme';
-export { darkTheme, darkTokens, deriveTokens, lightTheme, lightTokens, } from './mermaid-theme';
-export { postProcessMermaidSvg } from './svg-post-process';
+export {};
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-renderer-mermaid",
-  "version": "0.15.1",
+  "version": "0.15.4",
   "description": "Mermaid diagram renderer",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     "dist"
   ],
   "dependencies": {
-    "mermaid": "^11.15.0",
+    "beautiful-mermaid": "^1.1.3",
     "react-zoom-pan-pinch": "^4.0.3"
   },
   "devDependencies": {
@@ -47,9 +47,9 @@
     "lucide-react": "^1.0.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "@haklex/rich-editor": "0.15.1",
-    "@haklex/rich-style-token": "0.15.1",
-    "@haklex/rich-editor-ui": "0.15.1"
+    "@haklex/rich-editor": "0.15.4",
+    "@haklex/rich-editor-ui": "0.15.4",
+    "@haklex/rich-style-token": "0.15.4"
   },
   "publishConfig": {
     "access": "public"

package/dist/MermaidRenderer-DnxSrFxY.js

@@ -1,614 +0,0 @@
-import { useColorScheme } from "@haklex/rich-editor/static";
-import { useEffect, useId, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/styles.css.ts
-var mermaidContainer = "_36yqie0";
-var mermaidEditHint = "_36yqie1";
-var zoomControls = "_36yqie2";
-var zoomBtn = "_36yqie3";
-var mermaidLoading = "_36yqie4";
-var mermaidSpinner = "_36yqie6";
-var mermaidError = "_36yqie7";
-var editorPopup = "_36yqie8";
-var editorHeader = "_36yqie9";
-var editorHeaderLeft = "_36yqiea";
-var editorHeaderRight = "_36yqieb";
-var editorSep = "_36yqiec";
-var editorTitle = "_36yqied";
-var editorTplBtn = "_36yqiee";
-var editorViewToggle = "_36yqief";
-var editorViewItem = "_36yqieg";
-var editorViewItemActive = "_36yqieh";
-var editorIconBtn = "_36yqiei";
-var editorBody = "_36yqiej";
-var editorPane = "_36yqiek";
-var editorPaneHalf = "_36yqiel";
-var editorPaneFull = "_36yqiem";
-var editorPaneLabel = "_36yqien";
-var editorPreviewPane = "_36yqieo";
-var editorPreviewWrap = "_36yqiep";
-var editorPreviewEmpty = "_36yqieq";
-var editorPreviewErrorWrap = "_36yqier";
-var editorPreviewErrorIcon = "_36yqies";
-var editorPreviewErrorTitle = "_36yqiet";
-var editorPreviewErrorMsg = "_36yqieu";
-var codeEditor = "_36yqiev";
-var codeGutter = "_36yqiew";
-var codeGutterLine = "_36yqiex";
-var codeArea = "_36yqiey";
-var editorFooter = "_36yqiez";
-var footerActions = "_36yqie13";
-var footerBtnCancel = "_36yqie15 _36yqie14";
-var footerBtnSave = "_36yqie16 _36yqie14";
-//#endregion
-//#region src/mermaid-theme.ts
-var MIX = {
-	text: 100,
-	textSec: 60,
-	textMuted: 40,
-	textFaint: 25,
-	line: 50,
-	arrow: 85,
-	nodeFill: 3,
-	nodeStroke: 20,
-	groupHeader: 5,
-	innerStroke: 12
-};
-function parseHex(hex) {
-	return [
-		Number.parseInt(hex.slice(1, 3), 16),
-		Number.parseInt(hex.slice(3, 5), 16),
-		Number.parseInt(hex.slice(5, 7), 16)
-	];
-}
-function toHex(r, g, b) {
-	const clamp = (v) => Math.round(Math.max(0, Math.min(255, v)));
-	return `#${clamp(r).toString(16).padStart(2, "0")}${clamp(g).toString(16).padStart(2, "0")}${clamp(b).toString(16).padStart(2, "0")}`;
-}
-function mix(fg, bg, percent) {
-	const [fR, fG, fB] = parseHex(fg);
-	const [bR, bG, bB] = parseHex(bg);
-	const p = percent / 100;
-	return toHex(fR * p + bR * (1 - p), fG * p + bG * (1 - p), fB * p + bB * (1 - p));
-}
-function deriveTokens(bg, fg) {
-	return {
-		bg,
-		fg,
-		line: mix(fg, bg, MIX.line),
-		arrow: mix(fg, bg, MIX.arrow),
-		nodeFill: mix(fg, bg, MIX.nodeFill),
-		nodeStroke: mix(fg, bg, MIX.nodeStroke),
-		groupHeader: mix(fg, bg, MIX.groupHeader),
-		innerStroke: mix(fg, bg, MIX.innerStroke),
-		textSec: mix(fg, bg, MIX.textSec),
-		textMuted: mix(fg, bg, MIX.textMuted),
-		textFaint: mix(fg, bg, MIX.textFaint)
-	};
-}
-function buildTheme(bg, fg) {
-	const t = deriveTokens(bg, fg);
-	return {
-		theme: "base",
-		themeVariables: {
-			background: t.bg,
-			fontFamily: "system-ui, -apple-system, sans-serif",
-			fontSize: "14px",
-			primaryColor: t.nodeFill,
-			primaryTextColor: t.fg,
-			primaryBorderColor: t.nodeStroke,
-			secondaryColor: t.nodeFill,
-			secondaryTextColor: t.fg,
-			secondaryBorderColor: t.innerStroke,
-			tertiaryColor: t.groupHeader,
-			tertiaryTextColor: t.fg,
-			tertiaryBorderColor: t.innerStroke,
-			noteBkgColor: t.nodeFill,
-			noteTextColor: t.fg,
-			noteBorderColor: t.innerStroke,
-			lineColor: t.line,
-			textColor: t.fg,
-			mainBkg: t.nodeFill,
-			nodeBorder: t.nodeStroke,
-			nodeTextColor: t.fg,
-			clusterBkg: t.bg,
-			clusterBorder: t.nodeStroke,
-			titleColor: t.fg,
-			labelColor: t.fg,
-			altBackground: t.nodeFill,
-			fillType0: t.nodeFill,
-			fillType1: t.groupHeader,
-			fillType2: mix(fg, bg, 7),
-			fillType3: t.innerStroke,
-			fillType4: t.nodeStroke,
-			fillType5: t.groupHeader,
-			fillType6: t.nodeFill,
-			fillType7: mix(fg, bg, 7),
-			actorBkg: t.nodeFill,
-			actorBorder: t.nodeStroke,
-			actorTextColor: t.fg,
-			actorLineColor: t.line,
-			signalColor: t.fg,
-			signalTextColor: t.fg,
-			labelBoxBkgColor: t.nodeFill,
-			labelBoxBorderColor: t.nodeStroke,
-			labelTextColor: t.fg,
-			loopTextColor: t.fg,
-			activationBorderColor: t.line,
-			activationBkgColor: t.innerStroke,
-			sequenceNumberColor: t.bg,
-			git0: t.fg,
-			git1: t.line,
-			git2: t.textMuted,
-			git3: t.textFaint,
-			git4: t.nodeStroke,
-			git5: t.innerStroke,
-			git6: t.groupHeader,
-			git7: t.nodeFill,
-			gitBranchLabel0: t.bg,
-			gitBranchLabel1: t.bg,
-			gitBranchLabel2: t.bg,
-			gitBranchLabel3: t.fg,
-			gitInv0: t.bg,
-			pie1: t.fg,
-			pie2: mix(fg, bg, 80),
-			pie3: t.line,
-			pie4: t.textMuted,
-			pie5: t.nodeStroke,
-			pie6: t.innerStroke,
-			pie7: mix(fg, bg, 7),
-			pie8: t.groupHeader,
-			pie9: t.nodeFill,
-			pie10: t.bg,
-			pie11: t.textSec,
-			pie12: t.arrow,
-			pieTitleTextColor: t.fg,
-			pieSectionTextColor: t.bg,
-			pieLegendTextColor: t.fg,
-			pieLegendTextSize: "14px",
-			pieStrokeColor: t.bg,
-			pieStrokeWidth: "2px",
-			classText: t.fg,
-			sectionBkgColor: t.nodeFill,
-			altSectionBkgColor: t.groupHeader,
-			sectionBkgColor2: mix(fg, bg, 7),
-			taskBkgColor: t.innerStroke,
-			taskTextColor: t.fg,
-			taskTextLightColor: t.fg,
-			taskTextOutsideColor: t.fg,
-			activeTaskBkgColor: t.nodeStroke,
-			activeTaskBorderColor: t.line,
-			gridColor: t.innerStroke,
-			doneTaskBkgColor: t.nodeStroke,
-			doneTaskBorderColor: t.line,
-			critBkgColor: t.fg,
-			critBorderColor: t.fg,
-			todayLineColor: t.fg,
-			requirementBackground: t.nodeFill,
-			requirementBorderColor: t.nodeStroke,
-			requirementBorderSize: "1px",
-			requirementTextColor: t.fg,
-			relationColor: t.line,
-			relationLabelBackground: t.bg,
-			relationLabelColor: t.fg,
-			edgeLabelBackground: t.bg,
-			cScale0: t.nodeFill,
-			cScale1: t.innerStroke,
-			cScale2: t.nodeStroke,
-			cScale3: t.textMuted,
-			cScale4: t.line,
-			cScale5: t.textSec,
-			cScale6: mix(fg, bg, 70),
-			cScale7: mix(fg, bg, 80),
-			cScale8: t.arrow,
-			cScale9: t.fg,
-			cScaleLabel0: t.fg,
-			cScaleLabel2: t.fg
-		}
-	};
-}
-var lightTheme = buildTheme("#ffffff", "#262626");
-var darkTheme = buildTheme("#171717", "#fafafa");
-var lightTokens = deriveTokens("#ffffff", "#262626");
-var darkTokens = deriveTokens("#171717", "#fafafa");
-//#endregion
-//#region src/svg-post-process.ts
-var CORNER_RADIUS = {
-	node: 5,
-	classNode: 4,
-	entity: 5,
-	subgraphOuter: 7,
-	subgraphHeader: 6,
-	actor: 6,
-	activation: 4,
-	diamond: 4
-};
-/**
-* Convert node <polygon> elements to <path> with rounded corners.
-* Handles diamonds (4pt), hexagons (6pt), asymmetric (5pt), etc.
-* Each corner is replaced by a quadratic bezier curve.
-*/
-function roundNodePolygons(doc, radius) {
-	const polygons = doc.querySelectorAll(".node > polygon, .node polygon");
-	for (const polygon of polygons) {
-		const points = polygon.points;
-		if (points.numberOfItems < 3) continue;
-		const pts = [];
-		for (let i = 0; i < points.numberOfItems; i++) {
-			const p = points.getItem(i);
-			pts.push([p.x, p.y]);
-		}
-		const d = pts.map((pt, i) => {
-			const prev = pts[(i + pts.length - 1) % pts.length];
-			const next = pts[(i + 1) % pts.length];
-			const dx1 = prev[0] - pt[0];
-			const dy1 = prev[1] - pt[1];
-			const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
-			const dx2 = next[0] - pt[0];
-			const dy2 = next[1] - pt[1];
-			const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
-			const r = Math.min(radius, len1 / 2, len2 / 2);
-			const startX = pt[0] + dx1 / len1 * r;
-			const startY = pt[1] + dy1 / len1 * r;
-			const endX = pt[0] + dx2 / len2 * r;
-			const endY = pt[1] + dy2 / len2 * r;
-			return `${i === 0 ? "M" : "L"}${startX},${startY} Q${pt[0]},${pt[1]} ${endX},${endY}`;
-		}).join(" ");
-		const path = doc.createElementNS("http://www.w3.org/2000/svg", "path");
-		path.setAttribute("d", `${d} Z`);
-		for (const attr of Array.from(polygon.attributes)) if (attr.name !== "points") path.setAttribute(attr.name, attr.value);
-		polygon.replaceWith(path);
-	}
-}
-function applyCornerRounding(doc) {
-	const applyRadius = (selector, radius) => {
-		const rects = doc.querySelectorAll(selector);
-		for (const rect of rects) {
-			rect.setAttribute("rx", String(radius));
-			rect.setAttribute("ry", String(radius));
-		}
-	};
-	applyRadius(".node > rect", CORNER_RADIUS.node);
-	applyRadius(".node > .basic", CORNER_RADIUS.node);
-	applyRadius(".classGroup > rect", CORNER_RADIUS.classNode);
-	applyRadius(".er > rect", CORNER_RADIUS.entity);
-	applyRadius(".cluster > rect", CORNER_RADIUS.subgraphOuter);
-	applyRadius(".actor", CORNER_RADIUS.actor);
-	applyRadius(".activation0, .activation1, .activation2", CORNER_RADIUS.activation);
-	roundNodePolygons(doc, CORNER_RADIUS.diamond);
-}
-function buildVisualCss(tokens) {
-	return `
-    /* beautiful-mermaid inspired visual overrides */
-
-    /* Edge styling: rounded linecaps for clean connections */
-    .edgePath path.path,
-    .flowchart-link,
-    line[class*="messageLine"] {
-      stroke-linecap: round !important;
-      stroke-linejoin: round !important;
-    }
-
-    /* Cluster/subgraph "soft" styling */
-    .cluster > rect {
-      fill: ${tokens.nodeFill} !important;
-      fill-opacity: 0.96 !important;
-      stroke: ${tokens.nodeStroke} !important;
-      stroke-width: 1px !important;
-    }
-
-    /* Cluster title */
-    .cluster text,
-    .cluster .nodeLabel {
-      fill: ${tokens.textSec} !important;
-    }
-
-    /* Node stroke consistency */
-    .node rect,
-    .node circle,
-    .node ellipse,
-    .node polygon,
-    .node .basic {
-      stroke: ${tokens.nodeStroke} !important;
-      stroke-width: 1px !important;
-    }
-
-    /* Node fill */
-    .node rect,
-    .node .basic {
-      fill: ${tokens.nodeFill} !important;
-    }
-
-    /* Edge label "subtle" styling */
-    .edgeLabel rect,
-    .labelBkg {
-      rx: 5 !important;
-      ry: 5 !important;
-      fill: ${tokens.bg} !important;
-      stroke: ${tokens.innerStroke} !important;
-      stroke-width: 1px !important;
-    }
-
-    .edgeLabel text,
-    .edgeLabel .edgeLabel {
-      fill: ${tokens.textMuted} !important;
-    }
-
-    /* Arrow heads */
-    marker path {
-      fill: ${tokens.arrow} !important;
-      stroke: ${tokens.arrow} !important;
-    }
-
-    /* Edge paths */
-    .edgePath path.path {
-      stroke: ${tokens.line} !important;
-      stroke-width: 1px !important;
-    }
-
-    /* Sequence diagram refinements */
-    .actor {
-      fill: ${tokens.nodeFill} !important;
-      stroke: ${tokens.nodeStroke} !important;
-      stroke-width: 1px !important;
-    }
-
-    .messageLine0,
-    .messageLine1 {
-      stroke: ${tokens.line} !important;
-      stroke-width: 1px !important;
-    }
-
-    .messageText {
-      fill: ${tokens.fg} !important;
-    }
-
-    .loopLine {
-      stroke: ${tokens.innerStroke} !important;
-      stroke-width: 1px !important;
-    }
-
-    .labelBox {
-      fill: ${tokens.nodeFill} !important;
-      stroke: ${tokens.nodeStroke} !important;
-      stroke-width: 1px !important;
-    }
-
-    .loopText tspan,
-    .loopText {
-      fill: ${tokens.textSec} !important;
-    }
-
-    /* Activation bars */
-    .activation0,
-    .activation1,
-    .activation2 {
-      fill: ${tokens.innerStroke} !important;
-      stroke: ${tokens.line} !important;
-    }
-
-    /* Note styling */
-    .note {
-      fill: ${tokens.nodeFill} !important;
-      stroke: ${tokens.innerStroke} !important;
-    }
-
-    .noteText {
-      fill: ${tokens.fg} !important;
-    }
-
-    /* Inner divider lines */
-    .divider {
-      stroke: ${tokens.innerStroke} !important;
-      stroke-width: 0.75px !important;
-    }
-
-    /* Class diagram */
-    .classGroup rect {
-      fill: ${tokens.nodeFill} !important;
-      stroke: ${tokens.nodeStroke} !important;
-      stroke-width: 1px !important;
-    }
-
-    .classGroup line {
-      stroke: ${tokens.innerStroke} !important;
-      stroke-width: 0.75px !important;
-    }
-
-    .classGroup text {
-      fill: ${tokens.fg} !important;
-    }
-
-    .classLabel .box {
-      fill: ${tokens.groupHeader} !important;
-      stroke: ${tokens.nodeStroke} !important;
-    }
-
-    .relation {
-      stroke: ${tokens.line} !important;
-      stroke-width: 1px !important;
-    }
-
-    /* State diagram */
-    .stateGroup rect,
-    .statediagram-state rect {
-      fill: ${tokens.nodeFill} !important;
-      stroke: ${tokens.nodeStroke} !important;
-      stroke-width: 1px !important;
-      rx: 5 !important;
-      ry: 5 !important;
-    }
-
-    .stateGroup text {
-      fill: ${tokens.fg} !important;
-    }
-
-    /* Git graph */
-    .commit-id text {
-      fill: ${tokens.textMuted} !important;
-    }
-
-  `;
-}
-function postProcessMermaidSvg(svg, tokens) {
-	const normalizedSvg = svg.replaceAll(/<br\s*>/gi, "<br/>");
-	const doc = new DOMParser().parseFromString(normalizedSvg, "image/svg+xml");
-	if (doc.querySelector("parsererror")) return normalizedSvg;
-	const root = doc.documentElement;
-	if (!root || root.tagName.toLowerCase() !== "svg") return normalizedSvg;
-	applyCornerRounding(doc);
-	const viewBox = root.getAttribute("viewBox");
-	if (viewBox) {
-		const parts = viewBox.split(/\s+/).map(Number);
-		if (parts.length === 4 && parts[2] > 0 && parts[3] > 0) {
-			root.setAttribute("width", String(parts[2]));
-			root.setAttribute("height", String(parts[3]));
-		}
-	}
-	root.querySelector("style[data-visual-overrides]")?.remove();
-	const styleEl = doc.createElementNS("http://www.w3.org/2000/svg", "style");
-	styleEl.dataset.visualOverrides = "";
-	styleEl.textContent = buildVisualCss(tokens);
-	if (root.firstChild) root.insertBefore(styleEl, root.firstChild);
-	else root.append(styleEl);
-	return new XMLSerializer().serializeToString(root);
-}
-//#endregion
-//#region src/useMermaidRender.ts
-function useMermaidRender(content, preferredColorScheme) {
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState("");
-	const [svg, setSvg] = useState("");
-	const [width, setWidth] = useState();
-	const [height, setHeight] = useState();
-	const colorScheme = useColorScheme();
-	const effectiveColorScheme = preferredColorScheme ?? colorScheme;
-	const id = useId().split(":").join("");
-	useEffect(() => {
-		if (!content) return;
-		setError("");
-		setLoading(true);
-		let cancelled = false;
-		import("mermaid").then(async (mo) => {
-			const mermaid = mo.default;
-			const themeConfig = effectiveColorScheme === "dark" ? darkTheme : lightTheme;
-			const tokens = effectiveColorScheme === "dark" ? darkTokens : lightTokens;
-			mermaid.initialize({
-				startOnLoad: false,
-				theme: themeConfig.theme,
-				themeVariables: themeConfig.themeVariables,
-				darkMode: effectiveColorScheme === "dark",
-				flowchart: {
-					htmlLabels: true,
-					curve: "basis",
-					padding: 20,
-					nodeSpacing: 24,
-					rankSpacing: 48
-				},
-				sequence: {
-					actorMargin: 80,
-					messageMargin: 40
-				},
-				gantt: {
-					titleTopMargin: 16,
-					barHeight: 24,
-					barGap: 6
-				}
-			});
-			let result;
-			try {
-				result = await mermaid.render(`mermaid-${id}`, content);
-			} catch (err) {
-				document.getElementById(`dmermaid-${id}`)?.remove();
-				if (err instanceof Error) setError(err.message);
-				setSvg("");
-				setWidth(void 0);
-				setHeight(void 0);
-			}
-			if (cancelled) return;
-			if (result) {
-				const processedSvg = postProcessMermaidSvg(result.svg, tokens);
-				setSvg(processedSvg);
-				const match = processedSvg.match(/viewBox="[^"]*\s([\d.]+)\s([\d.]+)"/);
-				if (match?.[1] && match?.[2]) {
-					setWidth(Number.parseInt(match[1]));
-					setHeight(Number.parseInt(match[2]));
-				}
-				setError("");
-			}
-			setLoading(false);
-		});
-		return () => {
-			cancelled = true;
-		};
-	}, [
-		id,
-		content,
-		effectiveColorScheme
-	]);
-	let imgSrc = "";
-	if (svg) {
-		const data = new TextEncoder().encode(svg);
-		imgSrc = `data:image/svg+xml;base64,${btoa(String.fromCodePoint(...new Uint8Array(data)))}`;
-	}
-	return {
-		loading,
-		error,
-		imgSrc,
-		svg,
-		width,
-		height
-	};
-}
-//#endregion
-//#region src/estimate-height.ts
-function estimateMermaidHeight(content) {
-	const lines = content.split("\n").map((l) => l.trim()).filter((l) => l && !l.startsWith("%%"));
-	const first = (lines[0] ?? "").toLowerCase();
-	let h;
-	if (first.startsWith("sequencediagram")) h = lines.length * 50 + 60;
-	else if (first.startsWith("gantt")) h = lines.length * 36 + 80;
-	else if (first.startsWith("pie")) h = 320;
-	else if (first.startsWith("flowchart lr") || first.startsWith("graph lr") || first.startsWith("flowchart rl") || first.startsWith("graph rl")) h = lines.length * 30 + 100;
-	else if (first.startsWith("classdiagram")) h = lines.length * 40 + 100;
-	else if (first.startsWith("statediagram")) h = lines.length * 50 + 80;
-	else if (first.startsWith("erdiagram")) h = lines.length * 60 + 80;
-	else if (first.startsWith("journey")) h = lines.length * 40 + 80;
-	else if (first.startsWith("mindmap")) h = lines.length * 50 + 100;
-	else h = lines.length * 60 + 80;
-	return Math.min(Math.max(Math.round(h), 200), 800);
-}
-//#endregion
-//#region src/MermaidRenderer.tsx
-var MermaidRenderer = ({ content, colorScheme }) => {
-	const { loading, error, imgSrc, width, height } = useMermaidRender(content, colorScheme);
-	const wrapperStyle = { minHeight: estimateMermaidHeight(content) };
-	if (loading) return /* @__PURE__ */ jsxs("div", {
-		className: mermaidLoading,
-		style: wrapperStyle,
-		children: [/* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: mermaidSpinner
-		}), /* @__PURE__ */ jsx("span", { children: "Rendering diagram…" })]
-	});
-	if (!imgSrc) return /* @__PURE__ */ jsx("div", {
-		className: mermaidError,
-		style: wrapperStyle,
-		children: error || "Render failed"
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: mermaidContainer,
-		style: {
-			...wrapperStyle,
-			cursor: "default"
-		},
-		children: /* @__PURE__ */ jsx("img", {
-			alt: "Mermaid diagram",
-			height,
-			src: imgSrc,
-			width
-		})
-	});
-};
-//#endregion
-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 };

package/dist/mermaid-theme.d.ts

@@ -1,34 +0,0 @@
-/**
- * Mermaid theme system inspired by beautiful-mermaid (lukilabs/beautiful-mermaid).
- *
- * Architecture:
- *   - Two base colors: bg (background) + fg (foreground)
- *   - All derived colors computed via color-mix ratios from bg + fg
- *   - Produces a coherent mono hierarchy on any bg/fg combination
- *
- * @see https://github.com/lukilabs/beautiful-mermaid/blob/main/src/theme.ts
- */
-interface MermaidThemeConfig {
-    theme: 'base';
-    themeVariables: Record<string, string>;
-}
-export interface ThemeTokens {
-    arrow: string;
-    bg: string;
-    fg: string;
-    groupHeader: string;
-    innerStroke: string;
-    line: string;
-    nodeFill: string;
-    nodeStroke: string;
-    textFaint: string;
-    textMuted: string;
-    textSec: string;
-}
-export declare function deriveTokens(bg: string, fg: string): ThemeTokens;
-export declare const lightTheme: MermaidThemeConfig;
-export declare const darkTheme: MermaidThemeConfig;
-export declare const lightTokens: ThemeTokens;
-export declare const darkTokens: ThemeTokens;
-export {};
-//# sourceMappingURL=mermaid-theme.d.ts.map

package/dist/mermaid-theme.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/dist/svg-post-process.d.ts

@@ -1,3 +0,0 @@
-import { ThemeTokens } from './mermaid-theme';
-export declare function postProcessMermaidSvg(svg: string, tokens: ThemeTokens): string;
-//# sourceMappingURL=svg-post-process.d.ts.map

package/dist/svg-post-process.d.ts.map

@@ -1 +0,0 @@
-{"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"}