@haklex/rich-renderer-mermaid 0.0.80 → 0.0.82

package/dist/MermaidRenderer-DTf6tYSw.js

@@ -0,0 +1,577 @@
+import { useColorScheme } from "@haklex/rich-editor";
+import { useEffect, useId, useState } from "react";
+import { jsx } 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 mermaidError = "_36yqie6";
+var editorPopup = "_36yqie7";
+var editorHeader = "_36yqie8";
+var editorHeaderLeft = "_36yqie9";
+var editorHeaderRight = "_36yqiea";
+var editorSep = "_36yqieb";
+var editorTitle = "_36yqiec";
+var editorTplBtn = "_36yqied";
+var editorViewToggle = "_36yqiee";
+var editorViewItem = "_36yqief";
+var editorViewItemActive = "_36yqieg";
+var editorIconBtn = "_36yqieh";
+var editorBody = "_36yqiei";
+var editorPane = "_36yqiej";
+var editorPaneHalf = "_36yqiek";
+var editorPaneFull = "_36yqiel";
+var editorPaneLabel = "_36yqiem";
+var editorPreviewPane = "_36yqien";
+var editorPreviewWrap = "_36yqieo";
+var editorPreviewEmpty = "_36yqiep";
+var editorPreviewErrorWrap = "_36yqieq";
+var editorPreviewErrorIcon = "_36yqier";
+var editorPreviewErrorTitle = "_36yqies";
+var editorPreviewErrorMsg = "_36yqiet";
+var codeEditor = "_36yqieu";
+var codeGutter = "_36yqiev";
+var codeGutterLine = "_36yqiew";
+var codeArea = "_36yqiex";
+var editorFooter = "_36yqiey";
+var footerActions = "_36yqie12";
+var footerBtnCancel = "_36yqie14 _36yqie13";
+var footerBtnSave = "_36yqie15 _36yqie13";
+//#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", "#27272a");
+var darkTheme = buildTheme("#18181b", "#fafafa");
+var lightTokens = deriveTokens("#ffffff", "#27272a");
+var darkTokens = deriveTokens("#18181b", "#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 doc = new DOMParser().parseFromString(svg, "image/svg+xml");
+	if (doc.querySelector("parsererror")) return svg;
+	const root = doc.documentElement;
+	if (!root || root.tagName.toLowerCase() !== "svg") return svg;
+	applyCornerRounding(doc);
+	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/MermaidRenderer.tsx
+var MermaidRenderer = ({ content, colorScheme }) => {
+	const { loading, error, imgSrc, width, height } = useMermaidRender(content, colorScheme);
+	if (loading) return /* @__PURE__ */ jsx("pre", {
+		className: mermaidLoading,
+		children: /* @__PURE__ */ jsx("code", { children: content })
+	});
+	if (!imgSrc) return /* @__PURE__ */ jsx("div", {
+		className: mermaidError,
+		children: error || "Render failed"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: mermaidContainer,
+		style: { 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 };