@windrun-huaiin/third-ui 7.1.0 → 7.1.1

package/dist/fuma/mdx/mermaid.js

@@ -9,6 +9,12 @@ var React = require('react');
 
 function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, default: e }); }
 
+function sanitizeFilename(name) {
+    return name
+        .replace(/[\/:*?"<>|]/g, '_')
+        .replace(/\s+/g, '_')
+        .slice(0, 120);
+}
 function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview = true }) {
     const id = React.useId();
     const [svg, setSvg] = React.useState('');
@@ -95,6 +101,20 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
         isPanningRef.current = false;
         e.currentTarget.releasePointerCapture(e.pointerId);
     }, []);
+    const handleDownload = React.useCallback(() => {
+        if (!svg)
+            return;
+        const fileName = `${sanitizeFilename(title !== null && title !== void 0 ? title : 'mermaid')}.svg`;
+        const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = fileName;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(url);
+    }, [svg, title]);
     // prevent browser-level zoom (touchpad pinch/shortcut) from taking effect when the dialog is open
     React.useEffect(() => {
         if (!open)
@@ -154,7 +174,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: "mt-2 flex items-center justify-center text-center text-[13px] font-italic text-[#AC62FD]", 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 px-3 py-2 border-b border-neutral-200 dark:border-neutral-700", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-300", 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 items-center gap-0.5", children: [jsxRuntime.jsx("button", { "aria-label": "Zoom out", className: "flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px]", onClick: () => zoomBy(-0.5), children: "\uFF0D" }), jsxRuntime.jsxs("span", { className: "mx-0.5 text-[12px] w-12 text-center select-none", children: [Math.round(scale * 100), "%"] }), jsxRuntime.jsx("button", { "aria-label": "Zoom in", className: "flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px]", onClick: () => zoomBy(0.5), children: "\uFF0B" }), jsxRuntime.jsx("div", { className: "mx-1 h-4 w-px bg-neutral-300 dark:bg-neutral-700" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 100%", className: "inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(1), children: "X1" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 200%", className: "ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(2), children: "X2" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 300%", className: "ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(3), children: "X3" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 1000%", className: "ml-1 inline-flex h-6 min-w-10 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(10), children: "X10" }), jsxRuntime.jsx("button", { "aria-label": "Reset", className: "ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600", onClick: resetTransform, children: jsxRuntime.jsx(server.globalLucideIcons.RefreshCcw, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsx("button", { "aria-label": "Close", className: "ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600", 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 touch-none overscroll-contain", onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, 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.jsx("div", { className: "pointer-events-none absolute bottom-2 right-3 rounded bg-black/40 px-2 py-1 text-xs text-white", children: "Drag to pan, hold Cmd/Ctrl + scroll to zoom" })] })] })] }))] }));
+    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: "mt-2 flex items-center justify-center text-center text-[13px] font-italic text-[#AC62FD]", 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 px-3 py-2 border-b border-neutral-200 dark:border-neutral-700", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-300", 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 items-center gap-0.5", children: [jsxRuntime.jsx("button", { "aria-label": "Zoom out", className: "flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px]", onClick: () => zoomBy(-0.5), children: "\uFF0D" }), jsxRuntime.jsxs("span", { className: "mx-0.5 text-[12px] w-12 text-center select-none", children: [Math.round(scale * 100), "%"] }), jsxRuntime.jsx("button", { "aria-label": "Zoom in", className: "flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px]", onClick: () => zoomBy(0.5), children: "\uFF0B" }), jsxRuntime.jsx("div", { className: "mx-1 h-4 w-px bg-neutral-300 dark:bg-neutral-700" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 100%", className: "inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(1), children: "X1" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 200%", className: "ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(2), children: "X2" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 300%", className: "ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(3), children: "X3" }), jsxRuntime.jsx("button", { "aria-label": "Zoom 1000%", className: "ml-1 inline-flex h-6 min-w-10 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(10), children: "X10" }), jsxRuntime.jsx("button", { "aria-label": "Reset", className: "ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600", onClick: resetTransform, children: jsxRuntime.jsx(server.globalLucideIcons.RefreshCcw, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsx("button", { "aria-label": "Download SVG", className: "ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600", onClick: handleDownload, children: jsxRuntime.jsx(server.globalLucideIcons.Download, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsx("button", { "aria-label": "Close", className: "ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600", 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 touch-none overscroll-contain", onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, 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.jsx("div", { className: "pointer-events-none absolute bottom-2 right-3 rounded bg-black/40 px-2 py-1 text-xs text-white", children: "Drag to pan, hold Cmd/Ctrl + scroll to zoom" })] })] })] }))] }));
 }
 function addWatermarkToSvg(svg, watermark) {
     const watermarkText = `

package/dist/fuma/mdx/mermaid.mjs

@@ -5,6 +5,12 @@ import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
 import { useTheme } from 'next-themes';
 import { useId, useState, useRef, useEffect, useCallback } from 'react';
 
+function sanitizeFilename(name) {
+    return name
+        .replace(/[\/:*?"<>|]/g, '_')
+        .replace(/\s+/g, '_')
+        .slice(0, 120);
+}
 function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview = true }) {
     const id = useId();
     const [svg, setSvg] = useState('');
@@ -91,6 +97,20 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
         isPanningRef.current = false;
         e.currentTarget.releasePointerCapture(e.pointerId);
     }, []);
+    const handleDownload = useCallback(() => {
+        if (!svg)
+            return;
+        const fileName = `${sanitizeFilename(title !== null && title !== void 0 ? title : 'mermaid')}.svg`;
+        const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = fileName;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(url);
+    }, [svg, title]);
     // prevent browser-level zoom (touchpad pinch/shortcut) from taking effect when the dialog is open
     useEffect(() => {
         if (!open)
@@ -150,7 +170,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: "mt-2 flex items-center justify-center text-center text-[13px] font-italic text-[#AC62FD]", 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 px-3 py-2 border-b border-neutral-200 dark:border-neutral-700", children: [jsxs("div", { className: "flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-300", 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 items-center gap-0.5", children: [jsx("button", { "aria-label": "Zoom out", className: "flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px]", onClick: () => zoomBy(-0.5), children: "\uFF0D" }), jsxs("span", { className: "mx-0.5 text-[12px] w-12 text-center select-none", children: [Math.round(scale * 100), "%"] }), jsx("button", { "aria-label": "Zoom in", className: "flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px]", onClick: () => zoomBy(0.5), children: "\uFF0B" }), jsx("div", { className: "mx-1 h-4 w-px bg-neutral-300 dark:bg-neutral-700" }), jsx("button", { "aria-label": "Zoom 100%", className: "inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(1), children: "X1" }), jsx("button", { "aria-label": "Zoom 200%", className: "ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(2), children: "X2" }), jsx("button", { "aria-label": "Zoom 300%", className: "ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(3), children: "X3" }), jsx("button", { "aria-label": "Zoom 1000%", className: "ml-1 inline-flex h-6 min-w-10 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(10), children: "X10" }), jsx("button", { "aria-label": "Reset", className: "ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600", onClick: resetTransform, children: jsx(globalLucideIcons.RefreshCcw, { className: "h-3.5 w-3.5" }) }), jsx("button", { "aria-label": "Close", className: "ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600", 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 touch-none overscroll-contain", onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, 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 } }) }), jsx("div", { className: "pointer-events-none absolute bottom-2 right-3 rounded bg-black/40 px-2 py-1 text-xs text-white", children: "Drag to pan, hold Cmd/Ctrl + scroll to zoom" })] })] })] }))] }));
+    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: "mt-2 flex items-center justify-center text-center text-[13px] font-italic text-[#AC62FD]", 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 px-3 py-2 border-b border-neutral-200 dark:border-neutral-700", children: [jsxs("div", { className: "flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-300", 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 items-center gap-0.5", children: [jsx("button", { "aria-label": "Zoom out", className: "flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px]", onClick: () => zoomBy(-0.5), children: "\uFF0D" }), jsxs("span", { className: "mx-0.5 text-[12px] w-12 text-center select-none", children: [Math.round(scale * 100), "%"] }), jsx("button", { "aria-label": "Zoom in", className: "flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px]", onClick: () => zoomBy(0.5), children: "\uFF0B" }), jsx("div", { className: "mx-1 h-4 w-px bg-neutral-300 dark:bg-neutral-700" }), jsx("button", { "aria-label": "Zoom 100%", className: "inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(1), children: "X1" }), jsx("button", { "aria-label": "Zoom 200%", className: "ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(2), children: "X2" }), jsx("button", { "aria-label": "Zoom 300%", className: "ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(3), children: "X3" }), jsx("button", { "aria-label": "Zoom 1000%", className: "ml-1 inline-flex h-6 min-w-10 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]", onClick: () => setScale(10), children: "X10" }), jsx("button", { "aria-label": "Reset", className: "ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600", onClick: resetTransform, children: jsx(globalLucideIcons.RefreshCcw, { className: "h-3.5 w-3.5" }) }), jsx("button", { "aria-label": "Download SVG", className: "ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600", onClick: handleDownload, children: jsx(globalLucideIcons.Download, { className: "h-3.5 w-3.5" }) }), jsx("button", { "aria-label": "Close", className: "ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600", 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 touch-none overscroll-contain", onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, 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 } }) }), jsx("div", { className: "pointer-events-none absolute bottom-2 right-3 rounded bg-black/40 px-2 py-1 text-xs text-white", children: "Drag to pan, hold Cmd/Ctrl + scroll to zoom" })] })] })] }))] }));
 }
 function addWatermarkToSvg(svg, watermark) {
     const watermarkText = `

package/dist/main/x-button.js

@@ -55,7 +55,7 @@ function XButton(props) {
     // Split button
     const { mainButton, menuItems, loadingText, menuWidth = 'w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props;
     const isMainDisabled = mainButton.disabled || isLoading;
-    // loadingText 优先级：props.loadingText > mainButton.text > 'Loading...'
+    // loadingText prioty：props.loadingText > mainButton.text > 'Loading...'
     const actualLoadingText = loadingText || ((_b = mainButton.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
     return (jsxRuntime.jsxs("div", { className: `relative flex bg-neutral-200 dark:bg-neutral-800 rounded-full ${className}`, children: [jsxRuntime.jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: `flex-1 ${baseButtonClass} rounded-l-full ${isMainDisabled ? disabledClass : ''} ${mainButtonClassName}`, onMouseDown: e => { if (e.button === 2)
                     e.preventDefault(); }, style: { borderTopRightRadius: 0, borderBottomRightRadius: 0 }, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: "w-5 h-5 mr-1 animate-spin" }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [mainButton.icon, jsxRuntime.jsx("span", { children: mainButton.text })] })) }), jsxRuntime.jsx("span", { className: `flex items-center justify-center w-10 py-2 cursor-pointer transition hover:bg-neutral-300 dark:hover:bg-neutral-700 rounded-r-full ${dropdownButtonClassName}`, onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, tabIndex: 0, style: { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }, children: jsxRuntime.jsx(server.globalLucideIcons.ChevronDown, { className: "w-6 h-6" }) }), menuOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: `absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-50 border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`, children: menuItems.map((item, index) => (jsxRuntime.jsxs("button", { onClick: () => {

package/dist/main/x-button.mjs

@@ -53,7 +53,7 @@ function XButton(props) {
     // Split button
     const { mainButton, menuItems, loadingText, menuWidth = 'w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props;
     const isMainDisabled = mainButton.disabled || isLoading;
-    // loadingText 优先级：props.loadingText > mainButton.text > 'Loading...'
+    // loadingText prioty：props.loadingText > mainButton.text > 'Loading...'
     const actualLoadingText = loadingText || ((_b = mainButton.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
     return (jsxs("div", { className: `relative flex bg-neutral-200 dark:bg-neutral-800 rounded-full ${className}`, children: [jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: `flex-1 ${baseButtonClass} rounded-l-full ${isMainDisabled ? disabledClass : ''} ${mainButtonClassName}`, onMouseDown: e => { if (e.button === 2)
                     e.preventDefault(); }, style: { borderTopRightRadius: 0, borderBottomRightRadius: 0 }, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: "w-5 h-5 mr-1 animate-spin" }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [mainButton.icon, jsx("span", { children: mainButton.text })] })) }), jsx("span", { className: `flex items-center justify-center w-10 py-2 cursor-pointer transition hover:bg-neutral-300 dark:hover:bg-neutral-700 rounded-r-full ${dropdownButtonClassName}`, onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, tabIndex: 0, style: { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }, children: jsx(globalLucideIcons.ChevronDown, { className: "w-6 h-6" }) }), menuOpen && (jsx("div", { ref: menuRef, className: `absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-50 border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`, children: menuItems.map((item, index) => (jsxs("button", { onClick: () => {

package/dist/node_modules/.pnpm/cose-base@1.0.3/node_modules/cose-base/cose-base.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var coseBase$1 = require('../../../../../_virtual/cose-base.js');
+var coseBase$1 = require('../../../../../_virtual/cose-base2.js');
 var layoutBase = require('../../../layout-base@1.0.2/node_modules/layout-base/layout-base.js');
 
 var coseBase = coseBase$1.__module.exports;

package/dist/node_modules/.pnpm/cose-base@2.2.0/node_modules/cose-base/cose-base.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var coseBase$1 = require('../../../../../_virtual/cose-base2.js');
+var coseBase$1 = require('../../../../../_virtual/cose-base.js');
 var layoutBase = require('../../../layout-base@2.0.1/node_modules/layout-base/layout-base.js');
 
 var coseBase = coseBase$1.__module.exports;

package/dist/node_modules/.pnpm/layout-base@1.0.2/node_modules/layout-base/layout-base.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var layoutBase$1 = require('../../../../../_virtual/layout-base.js');
+var layoutBase$1 = require('../../../../../_virtual/layout-base2.js');
 
 var layoutBase = layoutBase$1.__module.exports;
 

package/dist/node_modules/.pnpm/layout-base@2.0.1/node_modules/layout-base/layout-base.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var layoutBase$1 = require('../../../../../_virtual/layout-base2.js');
+var layoutBase$1 = require('../../../../../_virtual/layout-base.js');
 
 var layoutBase = layoutBase$1.__module.exports;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -64,8 +64,8 @@
     "mermaid": "^11.6.0",
     "react-medium-image-zoom": "^5.2.14",
     "zod": "^3.22.4",
-    "@windrun-huaiin/lib": "^7.1.0",
-    "@windrun-huaiin/base-ui": "^8.1.0"
+    "@windrun-huaiin/lib": "^7.1.1",
+    "@windrun-huaiin/base-ui": "^8.1.1"
   },
   "peerDependencies": {
     "react": "19.1.0",

package/src/fuma/mdx/mermaid.tsx

@@ -6,6 +6,13 @@ import type { MermaidConfig } from 'mermaid';
 import { useTheme } from 'next-themes';
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
 
+function sanitizeFilename(name: string) {
+  return name
+    .replace(/[\/:*?"<>|]/g, '_')
+    .replace(/\s+/g, '_')
+    .slice(0, 120);
+}
+
 interface MermaidProps {
   chart: string;
   title?: string;
@@ -111,6 +118,20 @@ export function Mermaid({ chart, title, watermarkEnabled, watermarkText, enableP
     (e.currentTarget as HTMLDivElement).releasePointerCapture(e.pointerId);
   }, []);
 
+  const handleDownload = useCallback(() => {
+    if (!svg) return;
+    const fileName = `${sanitizeFilename(title ?? 'mermaid')}.svg`;
+    const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }, [svg, title]);
+
   // prevent browser-level zoom (touchpad pinch/shortcut) from taking effect when the dialog is open
   useEffect(() => {
     if (!open) return;
@@ -213,7 +234,7 @@ export function Mermaid({ chart, title, watermarkEnabled, watermarkText, enableP
               <div className="flex items-center gap-0.5">
                 <button
                   aria-label="Zoom out"
-                  className="flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px]"
+                  className="flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400"
                   onClick={() => zoomBy(-0.5)}
                 >
                   －
@@ -221,7 +242,7 @@ export function Mermaid({ chart, title, watermarkEnabled, watermarkText, enableP
                 <span className="mx-0.5 text-[12px] w-12 text-center select-none">{Math.round(scale * 100)}%</span>
                 <button
                   aria-label="Zoom in"
-                  className="flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px]"
+                  className="flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400"
                   onClick={() => zoomBy(0.5)}
                 >
                   ＋
@@ -230,42 +251,49 @@ export function Mermaid({ chart, title, watermarkEnabled, watermarkText, enableP
                 <div className="mx-1 h-4 w-px bg-neutral-300 dark:bg-neutral-700" />
                 <button
                   aria-label="Zoom 100%"
-                  className="inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]"
+                  className="inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400"
                   onClick={() => setScale(1)}
                 >
                   X1
                 </button>
                 <button
                   aria-label="Zoom 200%"
-                  className="ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]"
+                  className="ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400"
                   onClick={() => setScale(2)}
                 >
                   X2
                 </button>
                 <button
                   aria-label="Zoom 300%"
-                  className="ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]"
+                  className="ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400"
                   onClick={() => setScale(3)}
                 >
                   X3
                 </button>
                 <button
                   aria-label="Zoom 1000%"
-                  className="ml-1 inline-flex h-6 min-w-10 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]"
+                  className="ml-1 inline-flex h-6 min-w-10 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px] transition-colors hover:bg-neutral-100 active:bg-neutral-200 hover:border-neutral-400 active:border-neutral-500 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 dark:hover:border-neutral-500 dark:active:border-neutral-400"
                   onClick={() => setScale(10)}
                 >
                   X10
                 </button>
                 <button
                   aria-label="Reset"
-                  className="ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600"
+                  className="ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600 transition-colors hover:bg-purple-50 active:bg-purple-100 dark:hover:bg-purple-500/20 dark:active:bg-purple-500/30"
                   onClick={resetTransform}
                 >
                   <icons.RefreshCcw className="h-3.5 w-3.5" />
                 </button>
+                <button
+                  aria-label="Download SVG"
+                  className="ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600 transition-colors hover:bg-purple-50 active:bg-purple-100 dark:hover:bg-purple-500/20 dark:active:bg-purple-500/30"
+                  onClick={handleDownload}
+                >
+                  <icons.Download className="h-3.5 w-3.5" />
+                </button>
                 <button
                   aria-label="Close"
-                  className="ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600"
+                  className="ml-1 flex h-6 w-6 items-center justify-center rounded text-purple-500 hover:text-purple-600 transition-colors hover:bg-purple-50 active:bg-purple-100 dark:hover:bg-purple-500/20 dark:active:bg-purple-500/30"
                   onClick={() => { setOpen(false); resetTransform(); }}
                 >
                   <icons.X className="h-3.5 w-3.5" />

package/src/main/x-button.tsx

@@ -116,7 +116,7 @@ export function XButton(props: xButtonProps) {
   // Split button
   const { mainButton, menuItems, loadingText, menuWidth = 'w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props
   const isMainDisabled = mainButton.disabled || isLoading
-  // loadingText 优先级：props.loadingText > mainButton.text > 'Loading...'
+  // loadingText prioty：props.loadingText > mainButton.text > 'Loading...'
   const actualLoadingText = loadingText || mainButton.text?.trim() || 'Loading...'
 
   return (