@windrun-huaiin/third-ui 21.0.0 → 22.0.0

package/dist/fuma/heavy/mermaid.mjs

@@ -0,0 +1,358 @@
+"use client";
+import { __awaiter } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+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';
+
+function sanitizeFilename(name) {
+    return name
+        .replace(/[\/:*?"<>|]/g, '_')
+        .replace(/\s+/g, '_')
+        .slice(0, 120);
+}
+function Mermaid({ chart, title, watermarkEnabled, watermarkText, handDrawn = true, 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 });
+    const activePointersRef = useRef(new Map());
+    const pinchStartDistanceRef = useRef(0);
+    const pinchStartScaleRef = useRef(1);
+    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('mermaid');
+                try {
+                    mermaid.initialize(mermaidConfig);
+                    const { svg } = yield mermaid.render(id.replaceAll(':', ''), chart.replaceAll('\\n', '\n'));
+                    let svgWithWatermark = handDrawn ? applyHandDrawnStyle(svg) : svg;
+                    if (watermarkEnabled && watermarkText) {
+                        svgWithWatermark = addWatermarkToSvg(svgWithWatermark, watermarkText, themeSvgIconColor);
+                    }
+                    if (isMounted)
+                        setSvg(svgWithWatermark);
+                }
+                catch (error) {
+                    console.error('Error while rendering mermaid', error);
+                }
+            });
+        }
+        return () => {
+            isMounted = false;
+            setSvg('');
+        };
+    }, [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(() => {
+        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) => {
+        activePointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+        if (activePointersRef.current.size === 2) {
+            const [first, second] = Array.from(activePointersRef.current.values());
+            pinchStartDistanceRef.current = Math.hypot(second.x - first.x, second.y - first.y);
+            pinchStartScaleRef.current = scale;
+            isPanningRef.current = false;
+        }
+        else {
+            isPanningRef.current = true;
+            startPointRef.current = { x: e.clientX, y: e.clientY };
+            startTranslateRef.current = Object.assign({}, translate);
+        }
+        e.currentTarget.setPointerCapture(e.pointerId);
+    }, [scale, translate]);
+    const onPointerMove = useCallback((e) => {
+        if (!activePointersRef.current.has(e.pointerId))
+            return;
+        activePointersRef.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+        if (activePointersRef.current.size === 2) {
+            const [first, second] = Array.from(activePointersRef.current.values());
+            const distance = Math.hypot(second.x - first.x, second.y - first.y);
+            if (pinchStartDistanceRef.current > 0) {
+                setScale(clamp((distance / pinchStartDistanceRef.current) * pinchStartScaleRef.current, 0.25, 10));
+            }
+            return;
+        }
+        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) => {
+        activePointersRef.current.delete(e.pointerId);
+        isPanningRef.current = false;
+        if (activePointersRef.current.size === 1) {
+            const remaining = Array.from(activePointersRef.current.values())[0];
+            startPointRef.current = remaining;
+            startTranslateRef.current = Object.assign({}, translate);
+            isPanningRef.current = true;
+        }
+        if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+            e.currentTarget.releasePointerCapture(e.pointerId);
+        }
+    }, [translate]);
+    const onPointerCancel = useCallback((e) => {
+        activePointersRef.current.delete(e.pointerId);
+        isPanningRef.current = false;
+        if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+            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)
+            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: 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 = `
+    <text
+      x="100%"
+      y="98%"
+      text-anchor="end"
+      font-size="12"
+      font-style="italic"
+      fill="${watermarkColor}"
+      opacity="0.40"
+      class="pointer-events-none"
+      dx="-8"
+      dy="-4"
+    >${watermark}</text>
+  `;
+    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/features.d.ts

@@ -0,0 +1,8 @@
+import type { MDXComponents } from 'mdx/types';
+import type { ReactNode } from 'react';
+export declare function createBaseMdxComponents(imageFallbackSrc?: string): MDXComponents;
+export declare function createCodeMdxComponents(iconMap: Record<string, ReactNode>): MDXComponents;
+export declare function createMathMdxComponents(): MDXComponents;
+export declare function createMermaidMdxComponents(watermarkEnabled?: boolean, watermarkText?: string): MDXComponents;
+export declare function createTypeTableMdxComponents(): MDXComponents;
+export declare function createWidgetMdxComponents(cdnBaseUrl?: string, imageFallbackSrc?: string): MDXComponents;

package/dist/fuma/mdx/features.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var codeblock = require('fumadocs-ui/components/codeblock');
+var typeTable = require('fumadocs-ui/components/type-table');
+var fumadocsTypescript = require('fumadocs-typescript');
+var ui = require('fumadocs-typescript/ui');
+var markdownComponentMap = require('../share/markdown-component-map.js');
+var imageZoom = require('../heavy/image-zoom.js');
+var imageGrid = require('../heavy/image-grid.js');
+var math = require('../heavy/math.js');
+var mermaid = require('../heavy/mermaid.js');
+var trophyCard = require('./trophy-card.js');
+var ziaCard = require('./zia-card.js');
+var gradientButton = require('./gradient-button.js');
+var ziaFile = require('./zia-file.js');
+var sunoEmbed = require('./suno-embed.js');
+
+const typeTableGenerator = fumadocsTypescript.createGenerator();
+function tryToMatchIcon(props, iconMap) {
+    var _a;
+    let lang;
+    const dataLanguage = props['data-language'];
+    if (dataLanguage && dataLanguage.trim() !== '') {
+        lang = dataLanguage.trim().toLowerCase();
+    }
+    else {
+        const title = props.title;
+        if (title) {
+            const titleParts = title.split('.');
+            if (titleParts.length > 1 && titleParts[0] !== '') {
+                const extension = (_a = titleParts.pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+                if (extension) {
+                    lang = extension;
+                }
+            }
+        }
+    }
+    if (lang && iconMap[lang]) {
+        return iconMap[lang];
+    }
+    return undefined;
+}
+function createBaseMdxComponents(imageFallbackSrc) {
+    return Object.assign(Object.assign({}, markdownComponentMap.baseMarkdownComponents), { img: (props) => (jsxRuntime.jsx(imageZoom.ImageZoom, Object.assign({}, props, { fallbackSrc: imageFallbackSrc }))) });
+}
+function createCodeMdxComponents(iconMap) {
+    return {
+        pre: (props) => {
+            const customIcon = tryToMatchIcon(props, iconMap);
+            return (jsxRuntime.jsx(codeblock.CodeBlock, Object.assign({}, props, (customIcon && { icon: customIcon }), { children: jsxRuntime.jsx(codeblock.Pre, { children: props.children }) })));
+        },
+        CodeBlock: codeblock.CodeBlock,
+        Pre: codeblock.Pre,
+    };
+}
+function createMathMdxComponents() {
+    return {
+        MathBlock: math.MathBlock,
+        InlineMath: math.InlineMath,
+    };
+}
+function createMermaidMdxComponents(watermarkEnabled, watermarkText) {
+    return {
+        Mermaid: (props) => (jsxRuntime.jsx(mermaid.Mermaid, Object.assign({}, props, { watermarkEnabled: watermarkEnabled, watermarkText: watermarkText }))),
+    };
+}
+function createTypeTableMdxComponents() {
+    return {
+        TypeTable: typeTable.TypeTable,
+        AutoTypeTable: (props) => (jsxRuntime.jsx(ui.AutoTypeTable, Object.assign({}, props, { generator: typeTableGenerator }))),
+    };
+}
+function createWidgetMdxComponents(cdnBaseUrl, imageFallbackSrc) {
+    return {
+        TrophyCard: trophyCard.TrophyCard,
+        ZiaCard: ziaCard.ZiaCard,
+        GradientButton: gradientButton.GradientButton,
+        ZiaFile: ziaFile.ZiaFile,
+        ZiaFolder: ziaFile.ZiaFolder,
+        SunoEmbed: sunoEmbed.SunoEmbed,
+        ImageGrid: (props) => (jsxRuntime.jsx(imageGrid.ImageGrid, Object.assign({}, props, { cdnBaseUrl: cdnBaseUrl }))),
+        ImageZoom: (props) => (jsxRuntime.jsx(imageZoom.ImageZoom, Object.assign({}, props, { fallbackSrc: imageFallbackSrc }))),
+    };
+}
+
+exports.createBaseMdxComponents = createBaseMdxComponents;
+exports.createCodeMdxComponents = createCodeMdxComponents;
+exports.createMathMdxComponents = createMathMdxComponents;
+exports.createMermaidMdxComponents = createMermaidMdxComponents;
+exports.createTypeTableMdxComponents = createTypeTableMdxComponents;
+exports.createWidgetMdxComponents = createWidgetMdxComponents;

package/dist/fuma/mdx/features.mjs

@@ -0,0 +1,85 @@
+import { jsx } from 'react/jsx-runtime';
+import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+import { createGenerator } from 'fumadocs-typescript';
+import { AutoTypeTable } from 'fumadocs-typescript/ui';
+import { baseMarkdownComponents } from '../share/markdown-component-map.mjs';
+import { ImageZoom } from '../heavy/image-zoom.mjs';
+import { ImageGrid } from '../heavy/image-grid.mjs';
+import { InlineMath, MathBlock } from '../heavy/math.mjs';
+import { Mermaid } from '../heavy/mermaid.mjs';
+import { TrophyCard } from './trophy-card.mjs';
+import { ZiaCard } from './zia-card.mjs';
+import { GradientButton } from './gradient-button.mjs';
+import { ZiaFolder, ZiaFile } from './zia-file.mjs';
+import { SunoEmbed } from './suno-embed.mjs';
+
+const typeTableGenerator = createGenerator();
+function tryToMatchIcon(props, iconMap) {
+    var _a;
+    let lang;
+    const dataLanguage = props['data-language'];
+    if (dataLanguage && dataLanguage.trim() !== '') {
+        lang = dataLanguage.trim().toLowerCase();
+    }
+    else {
+        const title = props.title;
+        if (title) {
+            const titleParts = title.split('.');
+            if (titleParts.length > 1 && titleParts[0] !== '') {
+                const extension = (_a = titleParts.pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+                if (extension) {
+                    lang = extension;
+                }
+            }
+        }
+    }
+    if (lang && iconMap[lang]) {
+        return iconMap[lang];
+    }
+    return undefined;
+}
+function createBaseMdxComponents(imageFallbackSrc) {
+    return Object.assign(Object.assign({}, baseMarkdownComponents), { img: (props) => (jsx(ImageZoom, Object.assign({}, props, { fallbackSrc: imageFallbackSrc }))) });
+}
+function createCodeMdxComponents(iconMap) {
+    return {
+        pre: (props) => {
+            const customIcon = tryToMatchIcon(props, iconMap);
+            return (jsx(CodeBlock, Object.assign({}, props, (customIcon && { icon: customIcon }), { children: jsx(Pre, { children: props.children }) })));
+        },
+        CodeBlock,
+        Pre,
+    };
+}
+function createMathMdxComponents() {
+    return {
+        MathBlock,
+        InlineMath,
+    };
+}
+function createMermaidMdxComponents(watermarkEnabled, watermarkText) {
+    return {
+        Mermaid: (props) => (jsx(Mermaid, Object.assign({}, props, { watermarkEnabled: watermarkEnabled, watermarkText: watermarkText }))),
+    };
+}
+function createTypeTableMdxComponents() {
+    return {
+        TypeTable,
+        AutoTypeTable: (props) => (jsx(AutoTypeTable, Object.assign({}, props, { generator: typeTableGenerator }))),
+    };
+}
+function createWidgetMdxComponents(cdnBaseUrl, imageFallbackSrc) {
+    return {
+        TrophyCard,
+        ZiaCard,
+        GradientButton,
+        ZiaFile,
+        ZiaFolder,
+        SunoEmbed,
+        ImageGrid: (props) => (jsx(ImageGrid, Object.assign({}, props, { cdnBaseUrl: cdnBaseUrl }))),
+        ImageZoom: (props) => (jsx(ImageZoom, Object.assign({}, props, { fallbackSrc: imageFallbackSrc }))),
+    };
+}
+
+export { createBaseMdxComponents, createCodeMdxComponents, createMathMdxComponents, createMermaidMdxComponents, createTypeTableMdxComponents, createWidgetMdxComponents };

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

@@ -1,7 +1,4 @@
-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';
@@ -11,5 +8,3 @@ export * from './toc-footer-wrapper';
 export * from './toc-clerk-portable';
 export * from './banner';
 export * from './suno-embed';
-export * from './markdown-component-map';
-export * from './math';

package/dist/fuma/mdx/index.js

@@ -1,10 +1,7 @@
 "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');
@@ -14,15 +11,10 @@ var tocFooterWrapper = require('./toc-footer-wrapper.js');
 var tocClerkPortable = require('./toc-clerk-portable.js');
 var banner = require('./banner.js');
 var sunoEmbed = require('./suno-embed.js');
-var markdownComponentMap = require('./markdown-component-map.js');
-var math = require('./math.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;
@@ -38,6 +30,3 @@ exports.PortableClerkTOCPopover = tocClerkPortable.PortableClerkTOCPopover;
 exports.PortableClerkTOCScrollArea = tocClerkPortable.PortableClerkTOCScrollArea;
 exports.Banner = banner.Banner;
 exports.SunoEmbed = sunoEmbed.SunoEmbed;
-exports.baseMarkdownComponents = markdownComponentMap.baseMarkdownComponents;
-exports.InlineMath = math.InlineMath;
-exports.MathBlock = math.MathBlock;

package/dist/fuma/mdx/index.mjs

@@ -1,8 +1,5 @@
 "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';
@@ -12,5 +9,3 @@ export { TocFooterWrapper } from './toc-footer-wrapper.mjs';
 export { PortableClerkTOC, PortableClerkTOCItems, PortableClerkTOCPopover, PortableClerkTOCScrollArea } from './toc-clerk-portable.mjs';
 export { Banner } from './banner.mjs';
 export { SunoEmbed } from './suno-embed.mjs';
-export { baseMarkdownComponents } from './markdown-component-map.mjs';
-export { InlineMath, MathBlock } from './math.mjs';

package/dist/fuma/mdx/markdown-component-map.js

@@ -4,7 +4,13 @@ var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@windrun-huaiin/lib/utils');
 var defaultMdxComponents = require('fumadocs-ui/mdx');
-var imageZoom = require('./image-zoom.js');
+var imageZoom = require('../heavy/image-zoom.js');
+require('katex');
+require('@windrun-huaiin/base-ui/icons');
+require('next-themes');
+require('roughjs');
+require('react');
+require('@windrun-huaiin/base-ui/lib');
 
 function normalizeMarkdownProps(props) {
     const { class: legacyClassName, className } = props, restProps = tslib.__rest(props, ["class", "className"]);

package/dist/fuma/mdx/markdown-component-map.mjs

@@ -2,7 +2,13 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { cn } from '@windrun-huaiin/lib/utils';
 import defaultMdxComponents from 'fumadocs-ui/mdx';
-import { ImageZoom } from './image-zoom.mjs';
+import { ImageZoom } from '../heavy/image-zoom.mjs';
+import 'katex';
+import '@windrun-huaiin/base-ui/icons';
+import 'next-themes';
+import 'roughjs';
+import 'react';
+import '@windrun-huaiin/base-ui/lib';
 
 function normalizeMarkdownProps(props) {
     const { class: legacyClassName, className } = props, restProps = __rest(props, ["class", "className"]);

package/dist/fuma/mdx/site-mdx-components.d.ts

@@ -0,0 +1,13 @@
+import type { MDXComponents } from 'mdx/types';
+import type { ReactNode } from 'react';
+export type SiteMdxFeature = 'base' | 'code' | 'math' | 'mermaid' | 'type-table' | 'fuma-ui' | 'widgets';
+export interface SiteMdxComponentsOptions {
+    imageFallbackSrc?: string;
+    cdnBaseUrl?: string;
+    watermarkEnabled?: boolean;
+    watermarkText?: string;
+    additionalComponents?: MDXComponents;
+    iconMap?: Record<string, ReactNode>;
+    features?: SiteMdxFeature[];
+}
+export declare function createSiteMdxComponents(options: SiteMdxComponentsOptions): (components?: MDXComponents) => MDXComponents;