@windrun-huaiin/third-ui 15.1.0 → 16.0.0

package/dist/fuma/mdx/mermaid.js

@@ -3,9 +3,10 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var server = require('@windrun-huaiin/base-ui/components/server');
+var icons = require('@windrun-huaiin/base-ui/icons');
 var utils = require('@windrun-huaiin/lib/utils');
 var nextThemes = require('next-themes');
+var rough = require('roughjs');
 var React = require('react');
 var lib = require('@windrun-huaiin/base-ui/lib');
 
@@ -15,7 +16,7 @@ function sanitizeFilename(name) {
         .replace(/\s+/g, '_')
         .slice(0, 120);
 }
-function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview = true }) {
+function Mermaid({ chart, title, watermarkEnabled, watermarkText, handDrawn = true, enablePreview = true }) {
     const id = React.useId();
     const [svg, setSvg] = React.useState('');
     const { resolvedTheme } = nextThemes.useTheme();
@@ -45,9 +46,9 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
                 try {
                     mermaid.initialize(mermaidConfig);
                     const { svg } = yield mermaid.render(id.replaceAll(':', ''), chart.replaceAll('\\n', '\n'));
-                    let svgWithWatermark = svg;
+                    let svgWithWatermark = handDrawn ? applyHandDrawnStyle(svg) : svg;
                     if (watermarkEnabled && watermarkText) {
-                        svgWithWatermark = addWatermarkToSvg(svg, watermarkText, lib.themeSvgIconColor);
+                        svgWithWatermark = addWatermarkToSvg(svgWithWatermark, watermarkText, lib.themeSvgIconColor);
                     }
                     if (isMounted)
                         setSvg(svgWithWatermark);
@@ -61,7 +62,7 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
             isMounted = false;
             setSvg('');
         };
-    }, [chart, id, resolvedTheme, watermarkEnabled, watermarkText]);
+    }, [chart, id, resolvedTheme, watermarkEnabled, watermarkText, handDrawn]);
     // helpers for preview zoom
     const clamp = (v, min, max) => Math.min(Math.max(v, min), max);
     const resetTransform = React.useCallback(() => {
@@ -213,7 +214,7 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
             window.scrollTo(0, scrollY);
         };
     }, [open]);
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: enablePreview ? 'group relative cursor-zoom-in' : undefined, onClick: () => enablePreview && svg && setOpen(true), children: [jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: svg } }), enablePreview && svg && (jsxRuntime.jsx("div", { className: "pointer-events-none absolute right-2 top-2 hidden rounded bg-black/50 px-2 py-0.5 text-[12px] text-white group-hover:block", children: "Preview Chart" }))] }), title && (jsxRuntime.jsxs("div", { className: utils.cn("mt-2 flex items-center justify-center text-center text-[13px] font-italic", lib.themeIconColor), children: [jsxRuntime.jsx(server.globalLucideIcons.Mmd, { className: 'mr-1 h-4 w-4' }), jsxRuntime.jsx("span", { children: title })] })), enablePreview && open && (jsxRuntime.jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": typeof title === 'string' ? title : 'Mermaid Preview', className: "fixed inset-0 z-9999 flex items-center justify-center", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/60", onClick: () => { setOpen(false); resetTransform(); }, onWheel: (e) => { e.preventDefault(); e.stopPropagation(); }, onTouchMove: (e) => { e.preventDefault(); e.stopPropagation(); } }), jsxRuntime.jsxs("div", { className: "relative z-1 max-w-[95vw] w-[95vw] h-[88vh] p-0 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-md shadow-2xl overflow-hidden", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2 border-b border-neutral-200 dark:border-neutral-700", children: [jsxRuntime.jsxs("div", { className: utils.cn("min-w-0 flex items-center gap-2 text-sm", lib.themeIconColor), children: [jsxRuntime.jsx(server.globalLucideIcons.Mmd, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "truncate max-w-[50vw]", children: title !== null && title !== void 0 ? title : 'Mermaid Preview' })] }), jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [jsxRuntime.jsx("button", { "aria-label": "Zoom out", className: "hidden h-6 w-6 items-center justify-center rounded border border-neutral-300 text-[13px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:flex", onClick: () => zoomBy(-0.5), children: "\uFF0D" }), jsxRuntime.jsxs("span", { className: "mx-0.5 w-12 text-center text-[12px] select-none", children: [Math.round(scale * 100), "%"] }), jsxRuntime.jsx("button", { "aria-label": "Zoom in", className: "hidden h-6 w-6 items-center justify-center rounded border border-neutral-300 text-[13px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:flex", onClick: () => zoomBy(0.5), children: "\uFF0B" }), jsxRuntime.jsx("div", { className: "mx-1 hidden h-4 w-px bg-neutral-300 dark:bg-neutral-700 sm:block" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 100%", className: "hidden h-6 min-w-8 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(1), children: "X1" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 200%", className: "ml-1 hidden h-6 min-w-8 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(2), children: "X2" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 300%", className: "ml-1 hidden h-6 min-w-8 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(3), children: "X3" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 1000%", className: "ml-1 hidden h-6 min-w-10 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(10), children: "X10" }), jsxRuntime.jsx("button", { "aria-label": "Reset", className: utils.cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", lib.themeIconColor), onClick: resetTransform, children: jsxRuntime.jsx(server.globalLucideIcons.RefreshCcw, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsx("button", { "aria-label": "Download SVG", className: utils.cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", lib.themeIconColor), onClick: handleDownload, children: jsxRuntime.jsx(server.globalLucideIcons.Download, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsx("button", { "aria-label": "Close", className: utils.cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", lib.themeIconColor), onClick: () => { setOpen(false); resetTransform(); }, children: jsxRuntime.jsx(server.globalLucideIcons.X, { className: "h-3.5 w-3.5" }) })] })] }), jsxRuntime.jsxs("div", { className: "relative h-[calc(88vh-40px)] w-full overflow-hidden bg-white dark:bg-neutral-900 overscroll-contain touch-none", onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, children: [jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2", style: { transform: `translate(-50%, -50%) translate(${translate.x}px, ${translate.y}px)` }, children: jsxRuntime.jsx("div", { style: { transform: `scale(${scale})`, transformOrigin: '50% 50%' }, dangerouslySetInnerHTML: { __html: svg } }) }), jsxRuntime.jsxs("div", { className: "absolute inset-x-3 bottom-3 rounded-md bg-white/92 px-3 py-2 shadow-sm backdrop-blur sm:hidden dark:bg-neutral-900/92", children: [jsxRuntime.jsxs("label", { className: "mb-1 flex items-center justify-between text-[11px] text-neutral-600 dark:text-neutral-300", children: [jsxRuntime.jsx("span", { children: "Zoom" }), jsxRuntime.jsxs("span", { children: [Math.round(scale * 100), "%"] })] }), jsxRuntime.jsx("input", { "aria-label": "Zoom slider", className: "block w-full", type: "range", min: "25", max: "1000", step: "5", value: Math.round(scale * 100), style: { accentColor: lib.themeSvgIconColor }, onChange: (e) => setScale(clamp(Number(e.target.value) / 100, 0.25, 10)) })] }), jsxRuntime.jsx("div", { className: "pointer-events-none absolute bottom-2 right-3 hidden rounded bg-black/40 px-2 py-1 text-xs text-white sm:block", children: "Drag to pan, click button to zoom-out or zoom-in" }), jsxRuntime.jsx("div", { className: "pointer-events-none absolute left-3 top-3 rounded bg-black/40 px-2 py-1 text-[11px] text-white sm:hidden", children: "Drag to pan, pinch to zoom-out or zoom-in" })] })] })] }))] }));
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: enablePreview ? 'group relative cursor-zoom-in' : undefined, onClick: () => enablePreview && svg && setOpen(true), children: [jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: svg } }), enablePreview && svg && (jsxRuntime.jsx("div", { className: "pointer-events-none absolute right-2 top-2 hidden rounded bg-black/50 px-2 py-0.5 text-[12px] text-white group-hover:block", children: "Preview Chart" }))] }), title && (jsxRuntime.jsxs("div", { className: utils.cn("mt-2 flex items-center justify-center text-center text-[13px] font-italic", lib.themeIconColor), children: [jsxRuntime.jsx(icons.MmdIcon, { className: 'mr-1 h-4 w-4' }), jsxRuntime.jsx("span", { children: title })] })), enablePreview && open && (jsxRuntime.jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": typeof title === 'string' ? title : 'Mermaid Preview', className: "fixed inset-0 z-9999 flex items-center justify-center", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/60", onClick: () => { setOpen(false); resetTransform(); }, onWheel: (e) => { e.preventDefault(); e.stopPropagation(); }, onTouchMove: (e) => { e.preventDefault(); e.stopPropagation(); } }), jsxRuntime.jsxs("div", { className: "relative z-1 max-w-[95vw] w-[95vw] h-[88vh] p-0 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-md shadow-2xl overflow-hidden", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2 border-b border-neutral-200 dark:border-neutral-700", children: [jsxRuntime.jsxs("div", { className: utils.cn("min-w-0 flex items-center gap-2 text-sm", lib.themeIconColor), children: [jsxRuntime.jsx(icons.MmdIcon, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "truncate max-w-[50vw]", children: title !== null && title !== void 0 ? title : 'Mermaid Preview' })] }), jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [jsxRuntime.jsx("button", { "aria-label": "Zoom out", className: "hidden h-6 w-6 items-center justify-center rounded border border-neutral-300 text-[13px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:flex", onClick: () => zoomBy(-0.5), children: "\uFF0D" }), jsxRuntime.jsxs("span", { className: "mx-0.5 w-12 text-center text-[12px] select-none", children: [Math.round(scale * 100), "%"] }), jsxRuntime.jsx("button", { "aria-label": "Zoom in", className: "hidden h-6 w-6 items-center justify-center rounded border border-neutral-300 text-[13px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:flex", onClick: () => zoomBy(0.5), children: "\uFF0B" }), jsxRuntime.jsx("div", { className: "mx-1 hidden h-4 w-px bg-neutral-300 dark:bg-neutral-700 sm:block" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 100%", className: "hidden h-6 min-w-8 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(1), children: "X1" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 200%", className: "ml-1 hidden h-6 min-w-8 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(2), children: "X2" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 300%", className: "ml-1 hidden h-6 min-w-8 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(3), children: "X3" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 1000%", className: "ml-1 hidden h-6 min-w-10 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(10), children: "X10" }), jsxRuntime.jsx("button", { "aria-label": "Reset", className: utils.cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", lib.themeIconColor), onClick: resetTransform, children: jsxRuntime.jsx(icons.RefreshCcwIcon, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsx("button", { "aria-label": "Download SVG", className: utils.cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", lib.themeIconColor), onClick: handleDownload, children: jsxRuntime.jsx(icons.DownloadIcon, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsx("button", { "aria-label": "Close", className: utils.cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", lib.themeIconColor), onClick: () => { setOpen(false); resetTransform(); }, children: jsxRuntime.jsx(icons.XIcon, { className: "h-3.5 w-3.5" }) })] })] }), jsxRuntime.jsxs("div", { className: "relative h-[calc(88vh-40px)] w-full overflow-hidden bg-white dark:bg-neutral-900 overscroll-contain touch-none", onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, children: [jsxRuntime.jsx("div", { className: "absolute left-1/2 top-1/2", style: { transform: `translate(-50%, -50%) translate(${translate.x}px, ${translate.y}px)` }, children: jsxRuntime.jsx("div", { style: { transform: `scale(${scale})`, transformOrigin: '50% 50%' }, dangerouslySetInnerHTML: { __html: svg } }) }), jsxRuntime.jsxs("div", { className: "absolute inset-x-3 bottom-3 rounded-md bg-white/92 px-3 py-2 shadow-sm backdrop-blur sm:hidden dark:bg-neutral-900/92", children: [jsxRuntime.jsxs("label", { className: "mb-1 flex items-center justify-between text-[11px] text-neutral-600 dark:text-neutral-300", children: [jsxRuntime.jsx("span", { children: "Zoom" }), jsxRuntime.jsxs("span", { children: [Math.round(scale * 100), "%"] })] }), jsxRuntime.jsx("input", { "aria-label": "Zoom slider", className: "block w-full", type: "range", min: "25", max: "1000", step: "5", value: Math.round(scale * 100), style: { accentColor: lib.themeSvgIconColor }, onChange: (e) => setScale(clamp(Number(e.target.value) / 100, 0.25, 10)) })] }), jsxRuntime.jsx("div", { className: "pointer-events-none absolute bottom-2 right-3 hidden rounded bg-black/40 px-2 py-1 text-xs text-white sm:block", children: "Drag to pan, click button to zoom-out or zoom-in" }), jsxRuntime.jsx("div", { className: "pointer-events-none absolute left-3 top-3 rounded bg-black/40 px-2 py-1 text-[11px] text-white sm:hidden", children: "Drag to pan, pinch to zoom-out or zoom-in" })] })] })] }))] }));
 }
 function addWatermarkToSvg(svg, watermark, watermarkColor) {
     const watermarkText = `
@@ -232,5 +233,128 @@ function addWatermarkToSvg(svg, watermark, watermarkColor) {
   `;
     return svg.replace('</svg>', `${watermarkText}</svg>`);
 }
+function applyHandDrawnStyle(svg) {
+    if (typeof window === 'undefined')
+        return svg;
+    try {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(svg, 'image/svg+xml');
+        const svgElement = doc.documentElement;
+        if (!svgElement || svgElement.tagName.toLowerCase() !== 'svg')
+            return svg;
+        const rc = rough.svg(svgElement);
+        const serializer = new XMLSerializer();
+        const getNumber = (value) => Number.parseFloat(value !== null && value !== void 0 ? value : '') || 0;
+        const getStyleValue = (element, name) => {
+            const inlineStyle = element.getAttribute('style');
+            if (inlineStyle) {
+                const match = inlineStyle.match(new RegExp(`(?:^|;)\\s*${name}\\s*:\\s*([^;]+)`));
+                if (match === null || match === void 0 ? void 0 : match[1])
+                    return match[1].trim();
+            }
+            return element.getAttribute(name);
+        };
+        const applyAttributes = (source, target) => {
+            var _a;
+            for (const attr of source.getAttributeNames()) {
+                if (attr === 'x' || attr === 'y' || attr === 'x1' || attr === 'y1' || attr === 'x2' || attr === 'y2' || attr === 'width' || attr === 'height' || attr === 'rx' || attr === 'ry' || attr === 'points' || attr === 'd')
+                    continue;
+                target.setAttribute(attr, (_a = source.getAttribute(attr)) !== null && _a !== void 0 ? _a : '');
+            }
+        };
+        const createOptions = (element) => {
+            var _a, _b;
+            const stroke = (_a = getStyleValue(element, 'stroke')) !== null && _a !== void 0 ? _a : '#000';
+            const fill = (_b = getStyleValue(element, 'fill')) !== null && _b !== void 0 ? _b : 'none';
+            const strokeWidth = getNumber(getStyleValue(element, 'stroke-width')) || 1.5;
+            return {
+                stroke,
+                fill: fill === 'none' ? undefined : fill,
+                strokeWidth,
+                roughness: 1.6,
+                bowing: 1.25,
+                fillStyle: fill === 'none' ? 'hachure' : 'solid',
+                fillWeight: 0.8,
+                hachureGap: 10,
+                preserveVertices: true,
+                seed: 7,
+            };
+        };
+        const replaceShape = (element, node) => {
+            var _a, _b;
+            if (!node || !element.parentNode)
+                return;
+            applyAttributes(element, node);
+            if (element.getAttribute('class')) {
+                node.setAttribute('class', (_a = element.getAttribute('class')) !== null && _a !== void 0 ? _a : '');
+            }
+            if (element.getAttribute('style')) {
+                node.setAttribute('style', (_b = element.getAttribute('style')) !== null && _b !== void 0 ? _b : '');
+            }
+            element.parentNode.replaceChild(node, element);
+        };
+        svgElement.querySelectorAll('rect').forEach((element) => {
+            const x = getNumber(element.getAttribute('x'));
+            const y = getNumber(element.getAttribute('y'));
+            const width = getNumber(element.getAttribute('width'));
+            const height = getNumber(element.getAttribute('height'));
+            const rx = getNumber(element.getAttribute('rx'));
+            const ry = getNumber(element.getAttribute('ry'));
+            const node = rx > 0 || ry > 0
+                ? rc.path(`M ${x + rx} ${y}
+             H ${x + width - rx}
+             Q ${x + width} ${y} ${x + width} ${y + ry}
+             V ${y + height - ry}
+             Q ${x + width} ${y + height} ${x + width - rx} ${y + height}
+             H ${x + rx}
+             Q ${x} ${y + height} ${x} ${y + height - ry}
+             V ${y + ry}
+             Q ${x} ${y} ${x + rx} ${y}
+             Z`, createOptions(element))
+                : rc.rectangle(x, y, width, height, createOptions(element));
+            replaceShape(element, node);
+        });
+        svgElement.querySelectorAll('line').forEach((element) => {
+            const node = rc.line(getNumber(element.getAttribute('x1')), getNumber(element.getAttribute('y1')), getNumber(element.getAttribute('x2')), getNumber(element.getAttribute('y2')), createOptions(element));
+            replaceShape(element, node);
+        });
+        svgElement.querySelectorAll('polyline').forEach((element) => {
+            var _a;
+            const points = ((_a = element.getAttribute('points')) !== null && _a !== void 0 ? _a : '')
+                .trim()
+                .split(/\s+/)
+                .map((pair) => pair.split(',').map(Number))
+                .filter((point) => point.length === 2 && Number.isFinite(point[0]) && Number.isFinite(point[1]));
+            if (points.length < 2)
+                return;
+            const node = rc.linearPath(points, createOptions(element));
+            replaceShape(element, node);
+        });
+        svgElement.querySelectorAll('polygon').forEach((element) => {
+            var _a;
+            const points = ((_a = element.getAttribute('points')) !== null && _a !== void 0 ? _a : '')
+                .trim()
+                .split(/\s+/)
+                .map((pair) => pair.split(',').map(Number))
+                .filter((point) => point.length === 2 && Number.isFinite(point[0]) && Number.isFinite(point[1]));
+            if (points.length < 2)
+                return;
+            const node = rc.polygon(points, createOptions(element));
+            replaceShape(element, node);
+        });
+        svgElement.querySelectorAll('path').forEach((element) => {
+            const d = element.getAttribute('d');
+            if (!d)
+                return;
+            const node = rc.path(d, createOptions(element));
+            replaceShape(element, node);
+        });
+        return serializer.serializeToString(svgElement);
+    }
+    catch (error) {
+        console.error('Error while applying hand-drawn mermaid style', error);
+        return svg;
+    }
+}
 
 exports.Mermaid = Mermaid;

package/dist/fuma/mdx/mermaid.mjs

@@ -1,9 +1,10 @@
 "use client";
 import { __awaiter } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { MmdIcon, RefreshCcwIcon, DownloadIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { useTheme } from 'next-themes';
+import rough from 'roughjs';
 import { useId, useState, useRef, useEffect, useCallback } from 'react';
 import { themeSvgIconColor, themeIconColor } from '@windrun-huaiin/base-ui/lib';
 
@@ -13,7 +14,7 @@ function sanitizeFilename(name) {
         .replace(/\s+/g, '_')
         .slice(0, 120);
 }
-function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview = true }) {
+function Mermaid({ chart, title, watermarkEnabled, watermarkText, handDrawn = true, enablePreview = true }) {
     const id = useId();
     const [svg, setSvg] = useState('');
     const { resolvedTheme } = useTheme();
@@ -43,9 +44,9 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
                 try {
                     mermaid.initialize(mermaidConfig);
                     const { svg } = yield mermaid.render(id.replaceAll(':', ''), chart.replaceAll('\\n', '\n'));
-                    let svgWithWatermark = svg;
+                    let svgWithWatermark = handDrawn ? applyHandDrawnStyle(svg) : svg;
                     if (watermarkEnabled && watermarkText) {
-                        svgWithWatermark = addWatermarkToSvg(svg, watermarkText, themeSvgIconColor);
+                        svgWithWatermark = addWatermarkToSvg(svgWithWatermark, watermarkText, themeSvgIconColor);
                     }
                     if (isMounted)
                         setSvg(svgWithWatermark);
@@ -59,7 +60,7 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
             isMounted = false;
             setSvg('');
         };
-    }, [chart, id, resolvedTheme, watermarkEnabled, watermarkText]);
+    }, [chart, id, resolvedTheme, watermarkEnabled, watermarkText, handDrawn]);
     // helpers for preview zoom
     const clamp = (v, min, max) => Math.min(Math.max(v, min), max);
     const resetTransform = useCallback(() => {
@@ -211,7 +212,7 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
             window.scrollTo(0, scrollY);
         };
     }, [open]);
-    return (jsxs("div", { children: [jsxs("div", { className: enablePreview ? 'group relative cursor-zoom-in' : undefined, onClick: () => enablePreview && svg && setOpen(true), children: [jsx("div", { dangerouslySetInnerHTML: { __html: svg } }), enablePreview && svg && (jsx("div", { className: "pointer-events-none absolute right-2 top-2 hidden rounded bg-black/50 px-2 py-0.5 text-[12px] text-white group-hover:block", children: "Preview Chart" }))] }), title && (jsxs("div", { className: cn("mt-2 flex items-center justify-center text-center text-[13px] font-italic", themeIconColor), children: [jsx(globalLucideIcons.Mmd, { className: 'mr-1 h-4 w-4' }), jsx("span", { children: title })] })), enablePreview && open && (jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": typeof title === 'string' ? title : 'Mermaid Preview', className: "fixed inset-0 z-9999 flex items-center justify-center", children: [jsx("div", { className: "absolute inset-0 bg-black/60", onClick: () => { setOpen(false); resetTransform(); }, onWheel: (e) => { e.preventDefault(); e.stopPropagation(); }, onTouchMove: (e) => { e.preventDefault(); e.stopPropagation(); } }), jsxs("div", { className: "relative z-1 max-w-[95vw] w-[95vw] h-[88vh] p-0 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-md shadow-2xl overflow-hidden", children: [jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2 border-b border-neutral-200 dark:border-neutral-700", children: [jsxs("div", { className: cn("min-w-0 flex items-center gap-2 text-sm", themeIconColor), children: [jsx(globalLucideIcons.Mmd, { className: "h-4 w-4" }), jsx("span", { className: "truncate max-w-[50vw]", children: title !== null && title !== void 0 ? title : 'Mermaid Preview' })] }), jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [jsx("button", { "aria-label": "Zoom out", className: "hidden h-6 w-6 items-center justify-center rounded border border-neutral-300 text-[13px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:flex", onClick: () => zoomBy(-0.5), children: "\uFF0D" }), jsxs("span", { className: "mx-0.5 w-12 text-center text-[12px] select-none", children: [Math.round(scale * 100), "%"] }), jsx("button", { "aria-label": "Zoom in", className: "hidden h-6 w-6 items-center justify-center rounded border border-neutral-300 text-[13px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:flex", onClick: () => zoomBy(0.5), children: "\uFF0B" }), jsx("div", { className: "mx-1 hidden h-4 w-px bg-neutral-300 dark:bg-neutral-700 sm:block" }), jsx("button", { "aria-label": "Zoom 100%", className: "hidden h-6 min-w-8 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(1), children: "X1" }), jsx("button", { "aria-label": "Zoom 200%", className: "ml-1 hidden h-6 min-w-8 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(2), children: "X2" }), jsx("button", { "aria-label": "Zoom 300%", className: "ml-1 hidden h-6 min-w-8 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(3), children: "X3" }), jsx("button", { "aria-label": "Zoom 1000%", className: "ml-1 hidden h-6 min-w-10 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(10), children: "X10" }), jsx("button", { "aria-label": "Reset", className: cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", themeIconColor), onClick: resetTransform, children: jsx(globalLucideIcons.RefreshCcw, { className: "h-3.5 w-3.5" }) }), jsx("button", { "aria-label": "Download SVG", className: cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", themeIconColor), onClick: handleDownload, children: jsx(globalLucideIcons.Download, { className: "h-3.5 w-3.5" }) }), jsx("button", { "aria-label": "Close", className: cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", themeIconColor), onClick: () => { setOpen(false); resetTransform(); }, children: jsx(globalLucideIcons.X, { className: "h-3.5 w-3.5" }) })] })] }), jsxs("div", { className: "relative h-[calc(88vh-40px)] w-full overflow-hidden bg-white dark:bg-neutral-900 overscroll-contain touch-none", onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, children: [jsx("div", { className: "absolute left-1/2 top-1/2", style: { transform: `translate(-50%, -50%) translate(${translate.x}px, ${translate.y}px)` }, children: jsx("div", { style: { transform: `scale(${scale})`, transformOrigin: '50% 50%' }, dangerouslySetInnerHTML: { __html: svg } }) }), jsxs("div", { className: "absolute inset-x-3 bottom-3 rounded-md bg-white/92 px-3 py-2 shadow-sm backdrop-blur sm:hidden dark:bg-neutral-900/92", children: [jsxs("label", { className: "mb-1 flex items-center justify-between text-[11px] text-neutral-600 dark:text-neutral-300", children: [jsx("span", { children: "Zoom" }), jsxs("span", { children: [Math.round(scale * 100), "%"] })] }), jsx("input", { "aria-label": "Zoom slider", className: "block w-full", type: "range", min: "25", max: "1000", step: "5", value: Math.round(scale * 100), style: { accentColor: themeSvgIconColor }, onChange: (e) => setScale(clamp(Number(e.target.value) / 100, 0.25, 10)) })] }), jsx("div", { className: "pointer-events-none absolute bottom-2 right-3 hidden rounded bg-black/40 px-2 py-1 text-xs text-white sm:block", children: "Drag to pan, click button to zoom-out or zoom-in" }), jsx("div", { className: "pointer-events-none absolute left-3 top-3 rounded bg-black/40 px-2 py-1 text-[11px] text-white sm:hidden", children: "Drag to pan, pinch to zoom-out or zoom-in" })] })] })] }))] }));
+    return (jsxs("div", { children: [jsxs("div", { className: enablePreview ? 'group relative cursor-zoom-in' : undefined, onClick: () => enablePreview && svg && setOpen(true), children: [jsx("div", { dangerouslySetInnerHTML: { __html: svg } }), enablePreview && svg && (jsx("div", { className: "pointer-events-none absolute right-2 top-2 hidden rounded bg-black/50 px-2 py-0.5 text-[12px] text-white group-hover:block", children: "Preview Chart" }))] }), title && (jsxs("div", { className: cn("mt-2 flex items-center justify-center text-center text-[13px] font-italic", themeIconColor), children: [jsx(MmdIcon, { className: 'mr-1 h-4 w-4' }), jsx("span", { children: title })] })), enablePreview && open && (jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": typeof title === 'string' ? title : 'Mermaid Preview', className: "fixed inset-0 z-9999 flex items-center justify-center", children: [jsx("div", { className: "absolute inset-0 bg-black/60", onClick: () => { setOpen(false); resetTransform(); }, onWheel: (e) => { e.preventDefault(); e.stopPropagation(); }, onTouchMove: (e) => { e.preventDefault(); e.stopPropagation(); } }), jsxs("div", { className: "relative z-1 max-w-[95vw] w-[95vw] h-[88vh] p-0 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-md shadow-2xl overflow-hidden", children: [jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2 border-b border-neutral-200 dark:border-neutral-700", children: [jsxs("div", { className: cn("min-w-0 flex items-center gap-2 text-sm", themeIconColor), children: [jsx(MmdIcon, { className: "h-4 w-4" }), jsx("span", { className: "truncate max-w-[50vw]", children: title !== null && title !== void 0 ? title : 'Mermaid Preview' })] }), jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [jsx("button", { "aria-label": "Zoom out", className: "hidden h-6 w-6 items-center justify-center rounded border border-neutral-300 text-[13px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:flex", onClick: () => zoomBy(-0.5), children: "\uFF0D" }), jsxs("span", { className: "mx-0.5 w-12 text-center text-[12px] select-none", children: [Math.round(scale * 100), "%"] }), jsx("button", { "aria-label": "Zoom in", className: "hidden h-6 w-6 items-center justify-center rounded border border-neutral-300 text-[13px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:flex", onClick: () => zoomBy(0.5), children: "\uFF0B" }), jsx("div", { className: "mx-1 hidden h-4 w-px bg-neutral-300 dark:bg-neutral-700 sm:block" }), jsx("button", { "aria-label": "Zoom 100%", className: "hidden h-6 min-w-8 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(1), children: "X1" }), jsx("button", { "aria-label": "Zoom 200%", className: "ml-1 hidden h-6 min-w-8 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(2), children: "X2" }), jsx("button", { "aria-label": "Zoom 300%", className: "ml-1 hidden h-6 min-w-8 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(3), children: "X3" }), jsx("button", { "aria-label": "Zoom 1000%", className: "ml-1 hidden h-6 min-w-10 items-center justify-center rounded border border-neutral-300 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400 sm:inline-flex", onClick: () => setScale(10), children: "X10" }), jsx("button", { "aria-label": "Reset", className: cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", themeIconColor), onClick: resetTransform, children: jsx(RefreshCcwIcon, { className: "h-3.5 w-3.5" }) }), jsx("button", { "aria-label": "Download SVG", className: cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", themeIconColor), onClick: handleDownload, children: jsx(DownloadIcon, { className: "h-3.5 w-3.5" }) }), jsx("button", { "aria-label": "Close", className: cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", themeIconColor), onClick: () => { setOpen(false); resetTransform(); }, children: jsx(XIcon, { className: "h-3.5 w-3.5" }) })] })] }), jsxs("div", { className: "relative h-[calc(88vh-40px)] w-full overflow-hidden bg-white dark:bg-neutral-900 overscroll-contain touch-none", onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, children: [jsx("div", { className: "absolute left-1/2 top-1/2", style: { transform: `translate(-50%, -50%) translate(${translate.x}px, ${translate.y}px)` }, children: jsx("div", { style: { transform: `scale(${scale})`, transformOrigin: '50% 50%' }, dangerouslySetInnerHTML: { __html: svg } }) }), jsxs("div", { className: "absolute inset-x-3 bottom-3 rounded-md bg-white/92 px-3 py-2 shadow-sm backdrop-blur sm:hidden dark:bg-neutral-900/92", children: [jsxs("label", { className: "mb-1 flex items-center justify-between text-[11px] text-neutral-600 dark:text-neutral-300", children: [jsx("span", { children: "Zoom" }), jsxs("span", { children: [Math.round(scale * 100), "%"] })] }), jsx("input", { "aria-label": "Zoom slider", className: "block w-full", type: "range", min: "25", max: "1000", step: "5", value: Math.round(scale * 100), style: { accentColor: themeSvgIconColor }, onChange: (e) => setScale(clamp(Number(e.target.value) / 100, 0.25, 10)) })] }), jsx("div", { className: "pointer-events-none absolute bottom-2 right-3 hidden rounded bg-black/40 px-2 py-1 text-xs text-white sm:block", children: "Drag to pan, click button to zoom-out or zoom-in" }), jsx("div", { className: "pointer-events-none absolute left-3 top-3 rounded bg-black/40 px-2 py-1 text-[11px] text-white sm:hidden", children: "Drag to pan, pinch to zoom-out or zoom-in" })] })] })] }))] }));
 }
 function addWatermarkToSvg(svg, watermark, watermarkColor) {
     const watermarkText = `
@@ -230,5 +231,128 @@ function addWatermarkToSvg(svg, watermark, watermarkColor) {
   `;
     return svg.replace('</svg>', `${watermarkText}</svg>`);
 }
+function applyHandDrawnStyle(svg) {
+    if (typeof window === 'undefined')
+        return svg;
+    try {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(svg, 'image/svg+xml');
+        const svgElement = doc.documentElement;
+        if (!svgElement || svgElement.tagName.toLowerCase() !== 'svg')
+            return svg;
+        const rc = rough.svg(svgElement);
+        const serializer = new XMLSerializer();
+        const getNumber = (value) => Number.parseFloat(value !== null && value !== void 0 ? value : '') || 0;
+        const getStyleValue = (element, name) => {
+            const inlineStyle = element.getAttribute('style');
+            if (inlineStyle) {
+                const match = inlineStyle.match(new RegExp(`(?:^|;)\\s*${name}\\s*:\\s*([^;]+)`));
+                if (match === null || match === void 0 ? void 0 : match[1])
+                    return match[1].trim();
+            }
+            return element.getAttribute(name);
+        };
+        const applyAttributes = (source, target) => {
+            var _a;
+            for (const attr of source.getAttributeNames()) {
+                if (attr === 'x' || attr === 'y' || attr === 'x1' || attr === 'y1' || attr === 'x2' || attr === 'y2' || attr === 'width' || attr === 'height' || attr === 'rx' || attr === 'ry' || attr === 'points' || attr === 'd')
+                    continue;
+                target.setAttribute(attr, (_a = source.getAttribute(attr)) !== null && _a !== void 0 ? _a : '');
+            }
+        };
+        const createOptions = (element) => {
+            var _a, _b;
+            const stroke = (_a = getStyleValue(element, 'stroke')) !== null && _a !== void 0 ? _a : '#000';
+            const fill = (_b = getStyleValue(element, 'fill')) !== null && _b !== void 0 ? _b : 'none';
+            const strokeWidth = getNumber(getStyleValue(element, 'stroke-width')) || 1.5;
+            return {
+                stroke,
+                fill: fill === 'none' ? undefined : fill,
+                strokeWidth,
+                roughness: 1.6,
+                bowing: 1.25,
+                fillStyle: fill === 'none' ? 'hachure' : 'solid',
+                fillWeight: 0.8,
+                hachureGap: 10,
+                preserveVertices: true,
+                seed: 7,
+            };
+        };
+        const replaceShape = (element, node) => {
+            var _a, _b;
+            if (!node || !element.parentNode)
+                return;
+            applyAttributes(element, node);
+            if (element.getAttribute('class')) {
+                node.setAttribute('class', (_a = element.getAttribute('class')) !== null && _a !== void 0 ? _a : '');
+            }
+            if (element.getAttribute('style')) {
+                node.setAttribute('style', (_b = element.getAttribute('style')) !== null && _b !== void 0 ? _b : '');
+            }
+            element.parentNode.replaceChild(node, element);
+        };
+        svgElement.querySelectorAll('rect').forEach((element) => {
+            const x = getNumber(element.getAttribute('x'));
+            const y = getNumber(element.getAttribute('y'));
+            const width = getNumber(element.getAttribute('width'));
+            const height = getNumber(element.getAttribute('height'));
+            const rx = getNumber(element.getAttribute('rx'));
+            const ry = getNumber(element.getAttribute('ry'));
+            const node = rx > 0 || ry > 0
+                ? rc.path(`M ${x + rx} ${y}
+             H ${x + width - rx}
+             Q ${x + width} ${y} ${x + width} ${y + ry}
+             V ${y + height - ry}
+             Q ${x + width} ${y + height} ${x + width - rx} ${y + height}
+             H ${x + rx}
+             Q ${x} ${y + height} ${x} ${y + height - ry}
+             V ${y + ry}
+             Q ${x} ${y} ${x + rx} ${y}
+             Z`, createOptions(element))
+                : rc.rectangle(x, y, width, height, createOptions(element));
+            replaceShape(element, node);
+        });
+        svgElement.querySelectorAll('line').forEach((element) => {
+            const node = rc.line(getNumber(element.getAttribute('x1')), getNumber(element.getAttribute('y1')), getNumber(element.getAttribute('x2')), getNumber(element.getAttribute('y2')), createOptions(element));
+            replaceShape(element, node);
+        });
+        svgElement.querySelectorAll('polyline').forEach((element) => {
+            var _a;
+            const points = ((_a = element.getAttribute('points')) !== null && _a !== void 0 ? _a : '')
+                .trim()
+                .split(/\s+/)
+                .map((pair) => pair.split(',').map(Number))
+                .filter((point) => point.length === 2 && Number.isFinite(point[0]) && Number.isFinite(point[1]));
+            if (points.length < 2)
+                return;
+            const node = rc.linearPath(points, createOptions(element));
+            replaceShape(element, node);
+        });
+        svgElement.querySelectorAll('polygon').forEach((element) => {
+            var _a;
+            const points = ((_a = element.getAttribute('points')) !== null && _a !== void 0 ? _a : '')
+                .trim()
+                .split(/\s+/)
+                .map((pair) => pair.split(',').map(Number))
+                .filter((point) => point.length === 2 && Number.isFinite(point[0]) && Number.isFinite(point[1]));
+            if (points.length < 2)
+                return;
+            const node = rc.polygon(points, createOptions(element));
+            replaceShape(element, node);
+        });
+        svgElement.querySelectorAll('path').forEach((element) => {
+            const d = element.getAttribute('d');
+            if (!d)
+                return;
+            const node = rc.path(d, createOptions(element));
+            replaceShape(element, node);
+        });
+        return serializer.serializeToString(svgElement);
+    }
+    catch (error) {
+        console.error('Error while applying hand-drawn mermaid style', error);
+        return svg;
+    }
+}
 
 export { Mermaid };

package/dist/fuma/mdx/toc-base.js

@@ -8,7 +8,7 @@ var navigation = require('next/navigation');
 var nextIntl = require('next-intl');
 var useCopyButton = require('fumadocs-ui/utils/use-copy-button');
 var Link = require('fumadocs-core/link');
-var server = require('@windrun-huaiin/base-ui/components/server');
+var icons = require('@windrun-huaiin/base-ui/icons');
 var ui = require('@windrun-huaiin/base-ui/ui');
 
 const cache = new Map();
@@ -57,17 +57,17 @@ function LLMCopyButton({ llmApiUrl, sourceKey } = {}) {
     }));
     return (jsxRuntime.jsx(ui.Button, { variant: "ghost", size: "sm", loading: isLoading, 
         // force button to left align
-        className: "justify-start px-0 text-stone-600 hover:text-stone-500 dark:text-stone-400 dark:hover:text-stone-300", onClick: onClick, children: checked ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Check, {}), t('copyMarkdownDone')] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Markdown, {}), t('copyMarkdown')] })) }));
+        className: "justify-start px-0 text-stone-600 hover:text-stone-500 dark:text-stone-400 dark:hover:text-stone-300", onClick: onClick, children: checked ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icons.CheckIcon, {}), t('copyMarkdownDone')] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icons.MarkdownIcon, {}), t('copyMarkdown')] })) }));
 }
 function EditOnGitHub({ url }) {
     const t = nextIntl.useTranslations('fuma');
-    return (jsxRuntime.jsxs(Link, { className: "flex items-center gap-x-2 text-stone-600 hover:text-stone-500 dark:text-stone-400 dark:hover:text-stone-300 text-sm", href: url, children: [jsxRuntime.jsx(server.globalLucideIcons.GitHub, {}), t('editOnGithub')] }));
+    return (jsxRuntime.jsxs(Link, { className: "flex items-center gap-x-2 text-stone-600 hover:text-stone-500 dark:text-stone-400 dark:hover:text-stone-300 text-sm", href: url, children: [jsxRuntime.jsx(icons.GitHubIcon, {}), t('editOnGithub')] }));
 }
 // New component for displaying the last updated date with an icon
 function LastUpdatedDate({ date }) {
     const t = nextIntl.useTranslations('fuma');
     const viewDate = date ? `${t('lastUpdate')} ${date}` : `${t('emptyLastUpdate')}`;
-    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2 text-stone-600 dark:text-stone-400 text-sm", children: [jsxRuntime.jsx(server.globalLucideIcons.LastUpdated, {}), viewDate] }));
+    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2 text-stone-600 dark:text-stone-400 text-sm", children: [jsxRuntime.jsx(icons.LastUpdatedIcon, {}), viewDate] }));
 }
 
 exports.EditOnGitHub = EditOnGitHub;

package/dist/fuma/mdx/toc-base.mjs

@@ -6,7 +6,7 @@ import { useParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useCopyButton } from 'fumadocs-ui/utils/use-copy-button';
 import Link from 'fumadocs-core/link';
-import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { CheckIcon, MarkdownIcon, GitHubIcon, LastUpdatedIcon } from '@windrun-huaiin/base-ui/icons';
 import { Button } from '@windrun-huaiin/base-ui/ui';
 
 const cache = new Map();
@@ -55,17 +55,17 @@ function LLMCopyButton({ llmApiUrl, sourceKey } = {}) {
     }));
     return (jsx(Button, { variant: "ghost", size: "sm", loading: isLoading, 
         // force button to left align
-        className: "justify-start px-0 text-stone-600 hover:text-stone-500 dark:text-stone-400 dark:hover:text-stone-300", onClick: onClick, children: checked ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Check, {}), t('copyMarkdownDone')] })) : (jsxs(Fragment, { children: [jsx(globalLucideIcons.Markdown, {}), t('copyMarkdown')] })) }));
+        className: "justify-start px-0 text-stone-600 hover:text-stone-500 dark:text-stone-400 dark:hover:text-stone-300", onClick: onClick, children: checked ? (jsxs(Fragment, { children: [jsx(CheckIcon, {}), t('copyMarkdownDone')] })) : (jsxs(Fragment, { children: [jsx(MarkdownIcon, {}), t('copyMarkdown')] })) }));
 }
 function EditOnGitHub({ url }) {
     const t = useTranslations('fuma');
-    return (jsxs(Link, { className: "flex items-center gap-x-2 text-stone-600 hover:text-stone-500 dark:text-stone-400 dark:hover:text-stone-300 text-sm", href: url, children: [jsx(globalLucideIcons.GitHub, {}), t('editOnGithub')] }));
+    return (jsxs(Link, { className: "flex items-center gap-x-2 text-stone-600 hover:text-stone-500 dark:text-stone-400 dark:hover:text-stone-300 text-sm", href: url, children: [jsx(GitHubIcon, {}), t('editOnGithub')] }));
 }
 // New component for displaying the last updated date with an icon
 function LastUpdatedDate({ date }) {
     const t = useTranslations('fuma');
     const viewDate = date ? `${t('lastUpdate')} ${date}` : `${t('emptyLastUpdate')}`;
-    return (jsxs("div", { className: "flex items-center gap-x-2 text-stone-600 dark:text-stone-400 text-sm", children: [jsx(globalLucideIcons.LastUpdated, {}), viewDate] }));
+    return (jsxs("div", { className: "flex items-center gap-x-2 text-stone-600 dark:text-stone-400 text-sm", children: [jsx(LastUpdatedIcon, {}), viewDate] }));
 }
 
 export { EditOnGitHub, LLMCopyButton, LastUpdatedDate };

package/dist/fuma/mdx/trophy-card.js

@@ -2,9 +2,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var server = require('@windrun-huaiin/base-ui/components/server');
+var icons = require('@windrun-huaiin/base-ui/icons');
 
-function TrophyCard({ icon = jsxRuntime.jsx(server.globalLucideIcons.Star, {}), title, children, }) {
+function TrophyCard({ icon = jsxRuntime.jsx(icons.StarIcon, {}), title, children, }) {
     return (jsxRuntime.jsxs("div", { className: "\n        border-2 rounded-xl px-4 py-2\n        border-purple-200 dark:border-gray-500\n      ", children: [jsxRuntime.jsxs("div", { className: "flex items-center font-bold text-sm", children: [jsxRuntime.jsx("span", { className: "mr-2", children: icon }), jsxRuntime.jsx("span", { children: title })] }), jsxRuntime.jsx("div", { className: "text-sm -mt-1 leading-none", children: children })] }));
 }
 

package/dist/fuma/mdx/trophy-card.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { StarIcon } from '@windrun-huaiin/base-ui/icons';
 
-function TrophyCard({ icon = jsx(globalLucideIcons.Star, {}), title, children, }) {
+function TrophyCard({ icon = jsx(StarIcon, {}), title, children, }) {
     return (jsxs("div", { className: "\n        border-2 rounded-xl px-4 py-2\n        border-purple-200 dark:border-gray-500\n      ", children: [jsxs("div", { className: "flex items-center font-bold text-sm", children: [jsx("span", { className: "mr-2", children: icon }), jsx("span", { children: title })] }), jsx("div", { className: "text-sm -mt-1 leading-none", children: children })] }));
 }
 

package/dist/fuma/mdx/zia-card.js

@@ -3,7 +3,7 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var server = require('@windrun-huaiin/base-ui/components/server');
+var icons = require('@windrun-huaiin/base-ui/icons');
 var utils = require('@windrun-huaiin/lib/utils');
 var Link = require('next/link');
 
@@ -12,9 +12,9 @@ function ZiaCard(_a) {
     const validHref = typeof props.href === 'string' && props.href.trim() !== '';
     const validDescription = typeof description === 'string' && (description === null || description === void 0 ? void 0 : description.trim()) !== '';
     if (validHref) {
-        return (jsxRuntime.jsxs(Link, Object.assign({ href: props.href, "data-card": true, className: utils.cn('block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full', 'hover:bg-fd-accent/80', props.className) }, props, { children: [jsxRuntime.jsx("div", { className: "not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon ? icon : jsxRuntime.jsx(server.globalLucideIcons.CircleSmall, {}) }), jsxRuntime.jsx("h3", { className: "not-prose mb-1 text-sm font-medium line-clamp-2 min-h-10", children: title }), validDescription ? (jsxRuntime.jsx("p", { className: "my-0! text-sm text-fd-muted-foreground", children: description })) : (jsxRuntime.jsx("p", { className: "my-0! text-sm text-fd-muted-foreground opacity-0 select-none", children: "\u00A0" })), props.children ? (jsxRuntime.jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin", children: props.children })) : null] })));
+        return (jsxRuntime.jsxs(Link, Object.assign({ href: props.href, "data-card": true, className: utils.cn('block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full', 'hover:bg-fd-accent/80', props.className) }, props, { children: [jsxRuntime.jsx("div", { className: "not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon ? icon : jsxRuntime.jsx(icons.CircleSmallIcon, {}) }), jsxRuntime.jsx("h3", { className: "not-prose mb-1 text-sm font-medium line-clamp-2 min-h-10", children: title }), validDescription ? (jsxRuntime.jsx("p", { className: "my-0! text-sm text-fd-muted-foreground", children: description })) : (jsxRuntime.jsx("p", { className: "my-0! text-sm text-fd-muted-foreground opacity-0 select-none", children: "\u00A0" })), props.children ? (jsxRuntime.jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin", children: props.children })) : null] })));
     }
-    return (jsxRuntime.jsxs("div", Object.assign({ "data-card": true, className: utils.cn('block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full', props.className) }, props, { children: [jsxRuntime.jsx("div", { className: "not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon ? icon : jsxRuntime.jsx(server.globalLucideIcons.CircleSmall, {}) }), jsxRuntime.jsx("h3", { className: "not-prose mb-1 text-sm font-medium line-clamp-2 min-h-10", children: title }), validDescription ? (jsxRuntime.jsx("p", { className: "my-0! text-sm text-fd-muted-foreground", children: description })) : (jsxRuntime.jsx("p", { className: "my-0! text-sm text-fd-muted-foreground opacity-0 select-none", children: "\u00A0" })), props.children ? (jsxRuntime.jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin", children: props.children })) : null] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ "data-card": true, className: utils.cn('block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full', props.className) }, props, { children: [jsxRuntime.jsx("div", { className: "not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon ? icon : jsxRuntime.jsx(icons.CircleSmallIcon, {}) }), jsxRuntime.jsx("h3", { className: "not-prose mb-1 text-sm font-medium line-clamp-2 min-h-10", children: title }), validDescription ? (jsxRuntime.jsx("p", { className: "my-0! text-sm text-fd-muted-foreground", children: description })) : (jsxRuntime.jsx("p", { className: "my-0! text-sm text-fd-muted-foreground opacity-0 select-none", children: "\u00A0" })), props.children ? (jsxRuntime.jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin", children: props.children })) : null] })));
 }
 
 exports.ZiaCard = ZiaCard;

package/dist/fuma/mdx/zia-card.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { CircleSmallIcon } from '@windrun-huaiin/base-ui/icons';
 import { cn } from '@windrun-huaiin/lib/utils';
 import Link from 'next/link';
 
@@ -10,9 +10,9 @@ function ZiaCard(_a) {
     const validHref = typeof props.href === 'string' && props.href.trim() !== '';
     const validDescription = typeof description === 'string' && (description === null || description === void 0 ? void 0 : description.trim()) !== '';
     if (validHref) {
-        return (jsxs(Link, Object.assign({ href: props.href, "data-card": true, className: cn('block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full', 'hover:bg-fd-accent/80', props.className) }, props, { children: [jsx("div", { className: "not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon ? icon : jsx(globalLucideIcons.CircleSmall, {}) }), jsx("h3", { className: "not-prose mb-1 text-sm font-medium line-clamp-2 min-h-10", children: title }), validDescription ? (jsx("p", { className: "my-0! text-sm text-fd-muted-foreground", children: description })) : (jsx("p", { className: "my-0! text-sm text-fd-muted-foreground opacity-0 select-none", children: "\u00A0" })), props.children ? (jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin", children: props.children })) : null] })));
+        return (jsxs(Link, Object.assign({ href: props.href, "data-card": true, className: cn('block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full', 'hover:bg-fd-accent/80', props.className) }, props, { children: [jsx("div", { className: "not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon ? icon : jsx(CircleSmallIcon, {}) }), jsx("h3", { className: "not-prose mb-1 text-sm font-medium line-clamp-2 min-h-10", children: title }), validDescription ? (jsx("p", { className: "my-0! text-sm text-fd-muted-foreground", children: description })) : (jsx("p", { className: "my-0! text-sm text-fd-muted-foreground opacity-0 select-none", children: "\u00A0" })), props.children ? (jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin", children: props.children })) : null] })));
     }
-    return (jsxs("div", Object.assign({ "data-card": true, className: cn('block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full', props.className) }, props, { children: [jsx("div", { className: "not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon ? icon : jsx(globalLucideIcons.CircleSmall, {}) }), jsx("h3", { className: "not-prose mb-1 text-sm font-medium line-clamp-2 min-h-10", children: title }), validDescription ? (jsx("p", { className: "my-0! text-sm text-fd-muted-foreground", children: description })) : (jsx("p", { className: "my-0! text-sm text-fd-muted-foreground opacity-0 select-none", children: "\u00A0" })), props.children ? (jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin", children: props.children })) : null] })));
+    return (jsxs("div", Object.assign({ "data-card": true, className: cn('block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full', props.className) }, props, { children: [jsx("div", { className: "not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon ? icon : jsx(CircleSmallIcon, {}) }), jsx("h3", { className: "not-prose mb-1 text-sm font-medium line-clamp-2 min-h-10", children: title }), validDescription ? (jsx("p", { className: "my-0! text-sm text-fd-muted-foreground", children: description })) : (jsx("p", { className: "my-0! text-sm text-fd-muted-foreground opacity-0 select-none", children: "\u00A0" })), props.children ? (jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin", children: props.children })) : null] })));
 }
 
 export { ZiaCard };

package/dist/fuma/mdx/zia-file.js

@@ -2,7 +2,7 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var server = require('@windrun-huaiin/base-ui/components/server');
+var icons = require('@windrun-huaiin/base-ui/icons');
 var React = require('react');
 var utils = require('@windrun-huaiin/lib/utils');
 var collapsible = require('fumadocs-ui/components/ui/collapsible');
@@ -11,7 +11,7 @@ var Link = require('next/link');
 const itemVariants = 'flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4';
 const anotionClass = 'ms-2 px-2 py-0.5 rounded text-xs font-semibold bg-fd-accent/80 text-fd-accent-foreground dark:bg-white/20 dark:text-white';
 function ZiaFile(_a) {
-    var { name, icon = jsxRuntime.jsx(server.globalLucideIcons.File, {}), className, anotion, href } = _a, rest = tslib.__rest(_a, ["name", "icon", "className", "anotion", "href"]);
+    var { name, icon = jsxRuntime.jsx(icons.FileIcon, {}), className, anotion, href } = _a, rest = tslib.__rest(_a, ["name", "icon", "className", "anotion", "href"]);
     const validHref = typeof href === 'string' && href.trim() !== '';
     const validAnotion = typeof anotion === 'string' && anotion.trim() !== '';
     if (validHref) {
@@ -23,7 +23,7 @@ function ZiaFolder(_a) {
     var { name, anotion, defaultOpen = false, className, children } = _a, props = tslib.__rest(_a, ["name", "anotion", "defaultOpen", "className", "children"]);
     const [open, setOpen] = React.useState(defaultOpen);
     const validAnotion = typeof anotion === 'string' && anotion.trim() !== '';
-    return (jsxRuntime.jsxs(collapsible.Collapsible, Object.assign({ open: open, onOpenChange: setOpen }, props, { children: [jsxRuntime.jsxs(collapsible.CollapsibleTrigger, { className: utils.cn(itemVariants, className, 'w-full'), children: [open ? jsxRuntime.jsx(server.globalLucideIcons.FolderOpen, {}) : jsxRuntime.jsx(server.globalLucideIcons.Folder, {}), jsxRuntime.jsx("span", { children: name }), validAnotion && (jsxRuntime.jsx("span", { className: anotionClass, children: anotion }))] }), jsxRuntime.jsx(collapsible.CollapsibleContent, { children: jsxRuntime.jsx("div", { className: "ms-2 flex flex-col border-l ps-2", children: children }) })] })));
+    return (jsxRuntime.jsxs(collapsible.Collapsible, Object.assign({ open: open, onOpenChange: setOpen }, props, { children: [jsxRuntime.jsxs(collapsible.CollapsibleTrigger, { className: utils.cn(itemVariants, className, 'w-full'), children: [open ? jsxRuntime.jsx(icons.FolderOpenIcon, {}) : jsxRuntime.jsx(icons.FolderIcon, {}), jsxRuntime.jsx("span", { children: name }), validAnotion && (jsxRuntime.jsx("span", { className: anotionClass, children: anotion }))] }), jsxRuntime.jsx(collapsible.CollapsibleContent, { children: jsxRuntime.jsx("div", { className: "ms-2 flex flex-col border-l ps-2", children: children }) })] })));
 }
 
 exports.ZiaFile = ZiaFile;