@windrun-huaiin/third-ui 7.0.0 → 7.1.0

package/dist/fuma/mdx/image-zoom.d.ts

@@ -0,0 +1,22 @@
+import { type ImageProps } from 'fumadocs-core/framework';
+import { type ImgHTMLAttributes } from 'react';
+import { type UncontrolledProps } from 'react-medium-image-zoom';
+export type ImageZoomProps = ImageProps & {
+    /**
+     * Image props when zoom in
+     */
+    zoomInProps?: ImgHTMLAttributes<HTMLImageElement>;
+    /**
+     * Props for `react-medium-image-zoom`
+     */
+    rmiz?: UncontrolledProps;
+    /**
+     * placeholder image path
+     */
+    fallbackSrc?: string;
+};
+/**
+ * @example
+ * <ImageZoom src="URL" fallbackSrc="/my-placeholder.png" />
+ */
+export declare function ImageZoom({ zoomInProps, children, rmiz, fallbackSrc, ...props }: ImageZoomProps): import("react/jsx-runtime").JSX.Element;

package/dist/fuma/mdx/image-zoom.js

@@ -0,0 +1,39 @@
+"use client";
+'use strict';
+
+var tslib_es6 = require('../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.2/node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var framework = require('fumadocs-core/framework');
+var React = require('react');
+var index = require('../../node_modules/.pnpm/react-medium-image-zoom@5.3.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-medium-image-zoom/dist/index.js');
+
+function getImageSrc(src) {
+    if (typeof src === 'string')
+        return src;
+    if (typeof src === 'object') {
+        // Next.js
+        if ('default' in src)
+            return src.default.src;
+        return src.src;
+    }
+    return '';
+}
+/**
+ * @example
+ * <ImageZoom src="URL" fallbackSrc="/my-placeholder.png" />
+ */
+function ImageZoom(_a) {
+    var _b;
+    var { zoomInProps, children, rmiz, fallbackSrc = 'https://r2.d8ger.com/default.webp' } = _a, props = tslib_es6.__rest(_a, ["zoomInProps", "children", "rmiz", "fallbackSrc"]);
+    const [imgSrc, setImgSrc] = React.useState(getImageSrc(props.src));
+    // fallback logic
+    const handleError = () => {
+        console.warn('ImageZoom check error:', imgSrc, fallbackSrc);
+        if (imgSrc !== fallbackSrc) {
+            setImgSrc(fallbackSrc);
+        }
+    };
+    return (jsxRuntime.jsx(index.default, Object.assign({ zoomMargin: 20, wrapElement: "span" }, rmiz, { zoomImg: Object.assign(Object.assign({ src: imgSrc, sizes: undefined }, zoomInProps), { onError: handleError }), children: children !== null && children !== void 0 ? children : (jsxRuntime.jsx(framework.Image, Object.assign({}, props, { src: imgSrc, onError: handleError, sizes: "(max-width: 400px) 100vw, 300px", style: { width: '100%', height: 'auto', maxWidth: 300 }, alt: (_b = props.alt) !== null && _b !== void 0 ? _b : '', width: 300, height: 225 }))) })));
+}
+
+exports.ImageZoom = ImageZoom;

package/dist/fuma/mdx/image-zoom.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { __rest } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.2/node_modules/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Image } from 'fumadocs-core/framework';
+import { useState } from 'react';
+import Uncontrolled from '../../node_modules/.pnpm/react-medium-image-zoom@5.3.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-medium-image-zoom/dist/index.mjs';
+
+function getImageSrc(src) {
+    if (typeof src === 'string')
+        return src;
+    if (typeof src === 'object') {
+        // Next.js
+        if ('default' in src)
+            return src.default.src;
+        return src.src;
+    }
+    return '';
+}
+/**
+ * @example
+ * <ImageZoom src="URL" fallbackSrc="/my-placeholder.png" />
+ */
+function ImageZoom(_a) {
+    var _b;
+    var { zoomInProps, children, rmiz, fallbackSrc = 'https://r2.d8ger.com/default.webp' } = _a, props = __rest(_a, ["zoomInProps", "children", "rmiz", "fallbackSrc"]);
+    const [imgSrc, setImgSrc] = useState(getImageSrc(props.src));
+    // fallback logic
+    const handleError = () => {
+        console.warn('ImageZoom check error:', imgSrc, fallbackSrc);
+        if (imgSrc !== fallbackSrc) {
+            setImgSrc(fallbackSrc);
+        }
+    };
+    return (jsx(Uncontrolled, Object.assign({ zoomMargin: 20, wrapElement: "span" }, rmiz, { zoomImg: Object.assign(Object.assign({ src: imgSrc, sizes: undefined }, zoomInProps), { onError: handleError }), children: children !== null && children !== void 0 ? children : (jsx(Image, Object.assign({}, props, { src: imgSrc, onError: handleError, sizes: "(max-width: 400px) 100vw, 300px", style: { width: '100%', height: 'auto', maxWidth: 300 }, alt: (_b = props.alt) !== null && _b !== void 0 ? _b : '', width: 300, height: 225 }))) })));
+}
+
+export { ImageZoom };

package/dist/fuma/mdx/index.d.ts

@@ -0,0 +1,11 @@
+export * from './mermaid';
+export * from './image-zoom';
+export * from './trophy-card';
+export * from './image-grid';
+export * from './zia-card';
+export * from './gradient-button';
+export * from './toc-base';
+export * from './fuma-github-info';
+export * from './zia-file';
+export * from './toc-footer-wrapper';
+export * from './banner';

package/dist/fuma/mdx/index.js

@@ -0,0 +1,31 @@
+"use client";
+'use strict';
+
+var mermaid = require('./mermaid.js');
+var imageZoom = require('./image-zoom.js');
+var trophyCard = require('./trophy-card.js');
+var imageGrid = require('./image-grid.js');
+var ziaCard = require('./zia-card.js');
+var gradientButton = require('./gradient-button.js');
+var tocBase = require('./toc-base.js');
+var fumaGithubInfo = require('./fuma-github-info.js');
+var ziaFile = require('./zia-file.js');
+var tocFooterWrapper = require('./toc-footer-wrapper.js');
+var banner = require('./banner.js');
+
+
+
+exports.Mermaid = mermaid.Mermaid;
+exports.ImageZoom = imageZoom.ImageZoom;
+exports.TrophyCard = trophyCard.TrophyCard;
+exports.ImageGrid = imageGrid.ImageGrid;
+exports.ZiaCard = ziaCard.ZiaCard;
+exports.GradientButton = gradientButton.GradientButton;
+exports.EditOnGitHub = tocBase.EditOnGitHub;
+exports.LLMCopyButton = tocBase.LLMCopyButton;
+exports.LastUpdatedDate = tocBase.LastUpdatedDate;
+exports.FumaGithubInfo = fumaGithubInfo.FumaGithubInfo;
+exports.ZiaFile = ziaFile.ZiaFile;
+exports.ZiaFolder = ziaFile.ZiaFolder;
+exports.TocFooterWrapper = tocFooterWrapper.TocFooterWrapper;
+exports.Banner = banner.Banner;

package/dist/fuma/mdx/index.mjs

@@ -0,0 +1,12 @@
+"use client";
+export { Mermaid } from './mermaid.mjs';
+export { ImageZoom } from './image-zoom.mjs';
+export { TrophyCard } from './trophy-card.mjs';
+export { ImageGrid } from './image-grid.mjs';
+export { ZiaCard } from './zia-card.mjs';
+export { GradientButton } from './gradient-button.mjs';
+export { EditOnGitHub, LLMCopyButton, LastUpdatedDate } from './toc-base.mjs';
+export { FumaGithubInfo } from './fuma-github-info.mjs';
+export { ZiaFile, ZiaFolder } from './zia-file.mjs';
+export { TocFooterWrapper } from './toc-footer-wrapper.mjs';
+export { Banner } from './banner.mjs';

package/dist/fuma/mdx/mermaid.d.ts

@@ -0,0 +1,12 @@
+interface MermaidProps {
+    chart: string;
+    title?: string;
+    watermarkEnabled?: boolean;
+    watermarkText?: string;
+    /**
+     * enable preview dialog by clicking the chart, default is true
+     */
+    enablePreview?: boolean;
+}
+export declare function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview }: MermaidProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/fuma/mdx/mermaid.js

@@ -0,0 +1,177 @@
+"use client";
+'use strict';
+
+var tslib_es6 = require('../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.2/node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var server = require('@windrun-huaiin/base-ui/components/server');
+var nextThemes = require('next-themes');
+var React = require('react');
+
+function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, default: e }); }
+
+function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview = true }) {
+    const id = React.useId();
+    const [svg, setSvg] = React.useState('');
+    const { resolvedTheme } = nextThemes.useTheme();
+    const [open, setOpen] = React.useState(false);
+    // zoom & pan states for preview dialog
+    const [scale, setScale] = React.useState(1);
+    const [translate, setTranslate] = React.useState({ x: 0, y: 0 });
+    const isPanningRef = React.useRef(false);
+    const startPointRef = React.useRef({ x: 0, y: 0 });
+    const startTranslateRef = React.useRef({ x: 0, y: 0 });
+    React.useEffect(() => {
+        let isMounted = true;
+        void renderChart();
+        function renderChart() {
+            return tslib_es6.__awaiter(this, void 0, void 0, function* () {
+                const mermaidConfig = {
+                    startOnLoad: false,
+                    securityLevel: 'loose',
+                    fontFamily: 'inherit',
+                    themeCSS: 'margin: 1.5rem auto 0;',
+                    theme: resolvedTheme === 'dark' ? 'dark' : 'default',
+                };
+                const { default: mermaid } = yield Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('../../node_modules/.pnpm/mermaid@11.9.0/node_modules/mermaid/dist/mermaid.core.js')); });
+                try {
+                    mermaid.initialize(mermaidConfig);
+                    const { svg } = yield mermaid.render(id.replaceAll(':', ''), chart.replaceAll('\\n', '\n'));
+                    let svgWithWatermark = svg;
+                    if (watermarkEnabled && watermarkText) {
+                        svgWithWatermark = addWatermarkToSvg(svg, watermarkText);
+                    }
+                    if (isMounted)
+                        setSvg(svgWithWatermark);
+                }
+                catch (error) {
+                    console.error('Error while rendering mermaid', error);
+                }
+            });
+        }
+        return () => {
+            isMounted = false;
+            setSvg('');
+        };
+    }, [chart, id, resolvedTheme, watermarkEnabled, watermarkText]);
+    // helpers for preview zoom
+    const clamp = (v, min, max) => Math.min(Math.max(v, min), max);
+    const resetTransform = React.useCallback(() => {
+        setScale(4); // 400%
+        setTranslate({ x: 0, y: 0 });
+    }, []);
+    const zoomBy = React.useCallback((delta) => {
+        // zoom by center: keep the zoom center at the center of the canvas, without introducing displacement
+        setScale((prev) => clamp(prev + delta, 0.25, 10));
+    }, []);
+    const onWheel = React.useCallback((e) => {
+        // Cmd/Ctrl + wheel zoom (around the center point), otherwise up and down panning
+        if (e.metaKey || e.ctrlKey) {
+            e.preventDefault();
+            e.stopPropagation();
+            const delta = e.deltaY > 0 ? -0.1 : 0.1;
+            setScale((prev) => clamp(prev + delta, 0.25, 10));
+        }
+        else {
+            // two-finger pan on touchpad: support both horizontal (deltaX) and vertical (deltaY)
+            e.preventDefault();
+            e.stopPropagation();
+            setTranslate((prev) => ({ x: prev.x - e.deltaX, y: prev.y - e.deltaY }));
+        }
+    }, []);
+    const onPointerDown = React.useCallback((e) => {
+        isPanningRef.current = true;
+        startPointRef.current = { x: e.clientX, y: e.clientY };
+        startTranslateRef.current = Object.assign({}, translate);
+        e.currentTarget.setPointerCapture(e.pointerId);
+    }, [translate]);
+    const onPointerMove = React.useCallback((e) => {
+        if (!isPanningRef.current)
+            return;
+        const dx = e.clientX - startPointRef.current.x;
+        const dy = e.clientY - startPointRef.current.y;
+        setTranslate({ x: startTranslateRef.current.x + dx, y: startTranslateRef.current.y + dy });
+    }, []);
+    const onPointerUp = React.useCallback((e) => {
+        isPanningRef.current = false;
+        e.currentTarget.releasePointerCapture(e.pointerId);
+    }, []);
+    // prevent browser-level zoom (touchpad pinch/shortcut) from taking effect when the dialog is open
+    React.useEffect(() => {
+        if (!open)
+            return;
+        // 初次打开时，默认放大到 400%
+        resetTransform();
+        const onGlobalWheel = (ev) => {
+            if (ev.ctrlKey || ev.metaKey) {
+                ev.preventDefault();
+            }
+        };
+        const onKeyDown = (ev) => {
+            if (!(ev.ctrlKey || ev.metaKey))
+                return;
+            const k = ev.key;
+            if (k === '=' || k === '+') {
+                ev.preventDefault();
+                setScale((prev) => clamp(prev + 0.2, 0.25, 10));
+            }
+            else if (k === '-') {
+                ev.preventDefault();
+                setScale((prev) => clamp(prev - 0.2, 0.25, 10));
+            }
+            else if (k === '0') {
+                ev.preventDefault();
+                resetTransform();
+            }
+        };
+        window.addEventListener('wheel', onGlobalWheel, { passive: false, capture: true });
+        window.addEventListener('keydown', onKeyDown, { capture: true });
+        return () => {
+            window.removeEventListener('wheel', onGlobalWheel, true);
+            window.removeEventListener('keydown', onKeyDown, true);
+        };
+    }, [open, resetTransform]);
+    // Lock background scroll when dialog is open
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const previousPosition = document.body.style.position;
+        const previousTop = document.body.style.top;
+        const previousLeft = document.body.style.left;
+        const previousRight = document.body.style.right;
+        const previousWidth = document.body.style.width;
+        const scrollY = window.scrollY;
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${scrollY}px`;
+        document.body.style.left = '0';
+        document.body.style.right = '0';
+        document.body.style.width = '100%';
+        return () => {
+            document.body.style.position = previousPosition;
+            document.body.style.top = previousTop;
+            document.body.style.left = previousLeft;
+            document.body.style.right = previousRight;
+            document.body.style.width = previousWidth;
+            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" })] })] })] }))] }));
+}
+function addWatermarkToSvg(svg, watermark) {
+    const watermarkText = `
+    <text
+      x="100%"
+      y="98%"
+      text-anchor="end"
+      font-size="12"
+      font-style="italic"
+      fill="#AC62FD"
+      opacity="0.40"
+      class="pointer-events-none"
+      dx="-8"
+      dy="-4"
+    >${watermark}</text>
+  `;
+    return svg.replace('</svg>', `${watermarkText}</svg>`);
+}
+
+exports.Mermaid = Mermaid;

package/dist/fuma/mdx/mermaid.mjs

@@ -0,0 +1,173 @@
+"use client";
+import { __awaiter } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.2/node_modules/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { useTheme } from 'next-themes';
+import { useId, useState, useRef, useEffect, useCallback } from 'react';
+
+function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview = true }) {
+    const id = useId();
+    const [svg, setSvg] = useState('');
+    const { resolvedTheme } = useTheme();
+    const [open, setOpen] = useState(false);
+    // zoom & pan states for preview dialog
+    const [scale, setScale] = useState(1);
+    const [translate, setTranslate] = useState({ x: 0, y: 0 });
+    const isPanningRef = useRef(false);
+    const startPointRef = useRef({ x: 0, y: 0 });
+    const startTranslateRef = useRef({ x: 0, y: 0 });
+    useEffect(() => {
+        let isMounted = true;
+        void renderChart();
+        function renderChart() {
+            return __awaiter(this, void 0, void 0, function* () {
+                const mermaidConfig = {
+                    startOnLoad: false,
+                    securityLevel: 'loose',
+                    fontFamily: 'inherit',
+                    themeCSS: 'margin: 1.5rem auto 0;',
+                    theme: resolvedTheme === 'dark' ? 'dark' : 'default',
+                };
+                const { default: mermaid } = yield import('../../node_modules/.pnpm/mermaid@11.9.0/node_modules/mermaid/dist/mermaid.core.mjs');
+                try {
+                    mermaid.initialize(mermaidConfig);
+                    const { svg } = yield mermaid.render(id.replaceAll(':', ''), chart.replaceAll('\\n', '\n'));
+                    let svgWithWatermark = svg;
+                    if (watermarkEnabled && watermarkText) {
+                        svgWithWatermark = addWatermarkToSvg(svg, watermarkText);
+                    }
+                    if (isMounted)
+                        setSvg(svgWithWatermark);
+                }
+                catch (error) {
+                    console.error('Error while rendering mermaid', error);
+                }
+            });
+        }
+        return () => {
+            isMounted = false;
+            setSvg('');
+        };
+    }, [chart, id, resolvedTheme, watermarkEnabled, watermarkText]);
+    // helpers for preview zoom
+    const clamp = (v, min, max) => Math.min(Math.max(v, min), max);
+    const resetTransform = useCallback(() => {
+        setScale(4); // 400%
+        setTranslate({ x: 0, y: 0 });
+    }, []);
+    const zoomBy = useCallback((delta) => {
+        // zoom by center: keep the zoom center at the center of the canvas, without introducing displacement
+        setScale((prev) => clamp(prev + delta, 0.25, 10));
+    }, []);
+    const onWheel = useCallback((e) => {
+        // Cmd/Ctrl + wheel zoom (around the center point), otherwise up and down panning
+        if (e.metaKey || e.ctrlKey) {
+            e.preventDefault();
+            e.stopPropagation();
+            const delta = e.deltaY > 0 ? -0.1 : 0.1;
+            setScale((prev) => clamp(prev + delta, 0.25, 10));
+        }
+        else {
+            // two-finger pan on touchpad: support both horizontal (deltaX) and vertical (deltaY)
+            e.preventDefault();
+            e.stopPropagation();
+            setTranslate((prev) => ({ x: prev.x - e.deltaX, y: prev.y - e.deltaY }));
+        }
+    }, []);
+    const onPointerDown = useCallback((e) => {
+        isPanningRef.current = true;
+        startPointRef.current = { x: e.clientX, y: e.clientY };
+        startTranslateRef.current = Object.assign({}, translate);
+        e.currentTarget.setPointerCapture(e.pointerId);
+    }, [translate]);
+    const onPointerMove = useCallback((e) => {
+        if (!isPanningRef.current)
+            return;
+        const dx = e.clientX - startPointRef.current.x;
+        const dy = e.clientY - startPointRef.current.y;
+        setTranslate({ x: startTranslateRef.current.x + dx, y: startTranslateRef.current.y + dy });
+    }, []);
+    const onPointerUp = useCallback((e) => {
+        isPanningRef.current = false;
+        e.currentTarget.releasePointerCapture(e.pointerId);
+    }, []);
+    // prevent browser-level zoom (touchpad pinch/shortcut) from taking effect when the dialog is open
+    useEffect(() => {
+        if (!open)
+            return;
+        // 初次打开时，默认放大到 400%
+        resetTransform();
+        const onGlobalWheel = (ev) => {
+            if (ev.ctrlKey || ev.metaKey) {
+                ev.preventDefault();
+            }
+        };
+        const onKeyDown = (ev) => {
+            if (!(ev.ctrlKey || ev.metaKey))
+                return;
+            const k = ev.key;
+            if (k === '=' || k === '+') {
+                ev.preventDefault();
+                setScale((prev) => clamp(prev + 0.2, 0.25, 10));
+            }
+            else if (k === '-') {
+                ev.preventDefault();
+                setScale((prev) => clamp(prev - 0.2, 0.25, 10));
+            }
+            else if (k === '0') {
+                ev.preventDefault();
+                resetTransform();
+            }
+        };
+        window.addEventListener('wheel', onGlobalWheel, { passive: false, capture: true });
+        window.addEventListener('keydown', onKeyDown, { capture: true });
+        return () => {
+            window.removeEventListener('wheel', onGlobalWheel, true);
+            window.removeEventListener('keydown', onKeyDown, true);
+        };
+    }, [open, resetTransform]);
+    // Lock background scroll when dialog is open
+    useEffect(() => {
+        if (!open)
+            return;
+        const previousPosition = document.body.style.position;
+        const previousTop = document.body.style.top;
+        const previousLeft = document.body.style.left;
+        const previousRight = document.body.style.right;
+        const previousWidth = document.body.style.width;
+        const scrollY = window.scrollY;
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${scrollY}px`;
+        document.body.style.left = '0';
+        document.body.style.right = '0';
+        document.body.style.width = '100%';
+        return () => {
+            document.body.style.position = previousPosition;
+            document.body.style.top = previousTop;
+            document.body.style.left = previousLeft;
+            document.body.style.right = previousRight;
+            document.body.style.width = previousWidth;
+            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" })] })] })] }))] }));
+}
+function addWatermarkToSvg(svg, watermark) {
+    const watermarkText = `
+    <text
+      x="100%"
+      y="98%"
+      text-anchor="end"
+      font-size="12"
+      font-style="italic"
+      fill="#AC62FD"
+      opacity="0.40"
+      class="pointer-events-none"
+      dx="-8"
+      dy="-4"
+    >${watermark}</text>
+  `;
+    return svg.replace('</svg>', `${watermarkText}</svg>`);
+}
+
+export { Mermaid };

package/dist/fuma/mdx/toc-base.d.ts

@@ -0,0 +1,11 @@
+export interface LLMCopyButtonProps {
+    llmApiUrl?: string;
+    sourceKey?: string;
+}
+export declare function LLMCopyButton({ llmApiUrl, sourceKey }?: LLMCopyButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditOnGitHub({ url }: {
+    url: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function LastUpdatedDate({ date }: {
+    date: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,70 @@
+"use client";
+'use strict';
+
+var tslib_es6 = require('../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.2/node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var navigation = require('next/navigation');
+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 ui = require('@windrun-huaiin/base-ui/ui');
+
+const cache = new Map();
+function LLMCopyButton({ llmApiUrl, sourceKey } = {}) {
+    const [isLoading, setLoading] = React.useState(false);
+    const params = navigation.useParams();
+    const locale = params.locale;
+    const slug = params.slug;
+    const [checked, onClick] = useCopyButton.useCopyButton(() => tslib_es6.__awaiter(this, void 0, void 0, function* () {
+        setLoading(true);
+        // Handle cases where slug might be undefined or empty
+        const path = (slug && Array.isArray(slug)) ? slug.join('/') : '';
+        const apiPrefix = llmApiUrl || (sourceKey ? `/api/${sourceKey}/llm-content` : '/api/llm-content');
+        let apiUrl = `${apiPrefix}?locale=${encodeURIComponent(locale)}&path=${encodeURIComponent(path)}`;
+        if (sourceKey) {
+            apiUrl += `&sourceKey=${encodeURIComponent(sourceKey)}`;
+        }
+        console.log('Fetching LLM content from:', apiUrl);
+        let content;
+        try {
+            if (cache.has(apiUrl)) {
+                content = cache.get(apiUrl);
+            }
+            else {
+                const res = yield fetch(apiUrl);
+                if (!res.ok) {
+                    content = `Error: Failed to fetch LLM content: ${res.status} ${res.statusText}`;
+                }
+                else {
+                    content = yield res.text();
+                    // only success then store cache
+                    cache.set(apiUrl, content);
+                }
+            }
+            yield navigator.clipboard.writeText(content);
+        }
+        catch (error) {
+            const errMsg = `Error: ${error instanceof Error ? error.message : String(error)}`;
+            yield navigator.clipboard.writeText(errMsg);
+            console.error("Error fetching or copying LLM content:", error);
+        }
+        finally {
+            setLoading(false);
+        }
+    }));
+    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, {}), "Copied!"] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Markdown, {}), "Copy page as Markdown"] })) }));
+}
+function EditOnGitHub({ url }) {
+    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, {}), "Edit this page on GitHub"] }));
+}
+// New component for displaying the last updated date with an icon
+function LastUpdatedDate({ date }) {
+    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, {}), "Lastest on ", date ? date : "Ages ago"] }));
+}
+
+exports.EditOnGitHub = EditOnGitHub;
+exports.LLMCopyButton = LLMCopyButton;
+exports.LastUpdatedDate = LastUpdatedDate;