@lobehub/ui 4.3.2 → 4.3.3

package/es/Mermaid/Mermaid.mjs

@@ -3,38 +3,15 @@
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import CopyButton_default from "../CopyButton/CopyButton.mjs";
 import Tag_default from "../Tag/Tag.mjs";
-import { useStyles } from "../Highlighter/style.mjs";
+import { styles, variants } from "../Highlighter/style.mjs";
 import FullFeatured_default from "./FullFeatured.mjs";
 import SyntaxMermaid_default from "./SyntaxMermaid/index.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { cx } from "antd-style";
 
 //#region src/Mermaid/Mermaid.tsx
-const Mermaid = memo(({ children, actionIconSize, fullFeatured, copyable = true, showLanguage = true, language = "mermaid", style, styles: customStyles, classNames, variant = "filled", shadow, enablePanZoom = true, defaultExpand = true, className, bodyRender, fileName, actionsRender, theme, ...rest }) => {
-	const { cx, styles } = useStyles();
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: {
-			shadow: false,
-			variant: "filled",
-			wrap: false
-		},
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless
-			},
-			shadow: {
-				false: null,
-				true: styles.shadow
-			},
-			wrap: {
-				false: styles.nowrap,
-				true: null
-			}
-		}
-	}), [styles]);
+const Mermaid = memo(({ actionIconSize, animated, bodyRender, children, classNames, className, copyable = true, defaultExpand = true, fileName, fullFeatured, language = "mermaid", actionsRender, shadow, showLanguage = true, style, styles: customStyles, theme, variant = "filled", ...rest }) => {
 	const tirmedChildren = children.trim();
 	const copyContentRef = useRef(tirmedChildren);
 	useEffect(() => {
@@ -71,14 +48,14 @@ const Mermaid = memo(({ children, actionIconSize, fullFeatured, copyable = true,
 		tirmedChildren
 	]);
 	const defaultBody = useMemo(() => /* @__PURE__ */ jsx(SyntaxMermaid_default, {
+		animated,
 		className: classNames?.content,
-		enablePanZoom,
 		style: customStyles?.content,
 		theme,
 		variant,
 		children: tirmedChildren
 	}), [
-		enablePanZoom,
+		animated,
 		theme,
 		tirmedChildren,
 		variant,

package/es/Mermaid/Mermaid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Mermaid.mjs","names":["CopyButton","SyntaxMermaid","FullFeatured","Flexbox","Tag"],"sources":["../../src/Mermaid/Mermaid.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { useStyles } from '@/Highlighter/style';\nimport Tag from '@/Tag';\n\nimport FullFeatured from './FullFeatured';\nimport SyntaxMermaid from './SyntaxMermaid';\nimport { MermaidProps } from './type';\n\nconst Mermaid = memo<MermaidProps>(\n  ({\n    children,\n    actionIconSize,\n    fullFeatured,\n    copyable = true,\n    showLanguage = true,\n    language = 'mermaid',\n    style,\n    styles: customStyles,\n    classNames,\n    variant = 'filled',\n    shadow,\n    enablePanZoom = true,\n    defaultExpand = true,\n    className,\n    bodyRender,\n    fileName,\n    actionsRender,\n    theme,\n    ...rest\n  }) => {\n    const { cx, styles } = useStyles();\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            shadow: false,\n            variant: 'filled',\n            wrap: false,\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n            shadow: {\n              false: null,\n              true: styles.shadow,\n            },\n            wrap: {\n              false: styles.nowrap,\n              true: null,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const tirmedChildren = children.trim();\n    const copyContentRef = useRef(tirmedChildren);\n\n    useEffect(() => {\n      copyContentRef.current = tirmedChildren;\n    }, [tirmedChildren]);\n\n    const getCopyContent = useCallback(() => copyContentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return (\n        <CopyButton content={getCopyContent} size={actionIconSize || { blockSize: 28, size: 16 }} />\n      );\n    }, [actionIconSize, copyable, getCopyContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize,\n        content: tirmedChildren,\n        getContent: getCopyContent,\n        originalNode: originalActions,\n      });\n    }, [actionIconSize, actionsRender, getCopyContent, originalActions, tirmedChildren]);\n\n    const defaultBody = useMemo(\n      () => (\n        <SyntaxMermaid\n          className={classNames?.content}\n          enablePanZoom={enablePanZoom}\n          style={customStyles?.content}\n          theme={theme}\n          variant={variant}\n        >\n          {tirmedChildren}\n        </SyntaxMermaid>\n      ),\n      [enablePanZoom, theme, tirmedChildren, variant, classNames?.content, customStyles?.content],\n    );\n\n    const body = useMemo(() => {\n      if (!bodyRender) return defaultBody;\n      return bodyRender({ content: tirmedChildren, originalNode: defaultBody });\n    }, [bodyRender, defaultBody, tirmedChildren]);\n\n    if (fullFeatured)\n      return (\n        <FullFeatured\n          actionsRender={actionsRender}\n          className={className}\n          classNames={classNames}\n          content={tirmedChildren}\n          copyable={copyable}\n          defaultExpand={defaultExpand}\n          fileName={fileName}\n          language={language}\n          shadow={shadow}\n          showLanguage={showLanguage}\n          style={style}\n          styles={customStyles}\n          variant={variant}\n          {...rest}\n        >\n          {body}\n        </FullFeatured>\n      );\n\n    return (\n      <div\n        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"mermaid\"\n        style={style}\n        {...rest}\n      >\n        <Flexbox align={'center'} className={styles.actions} flex={'none'} gap={4} horizontal>\n          {actions}\n        </Flexbox>\n        {showLanguage && <Tag className={styles.lang}>{language.toLowerCase()}</Tag>}\n        {body}\n      </div>\n    );\n  },\n);\n\nMermaid.displayName = 'Mermaid';\n\nexport default Mermaid;\n\nexport { type MermaidProps } from './type';\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,UAAU,MACb,EACC,UACA,gBACA,cACA,WAAW,MACX,eAAe,MACf,WAAW,WACX,OACA,QAAQ,cACR,YACA,UAAU,UACV,QACA,gBAAgB,MAChB,gBAAgB,MAChB,WACA,YACA,UACA,eACA,OACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAElC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB;GACf,QAAQ;GACR,SAAS;GACT,MAAM;GACP;EAED,UAAU;GACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB;GACD,QAAQ;IACN,OAAO;IACP,MAAM,OAAO;IACd;GACD,MAAM;IACJ,OAAO,OAAO;IACd,MAAM;IACP;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,iBAAiB,SAAS,MAAM;CACtC,MAAM,iBAAiB,OAAO,eAAe;AAE7C,iBAAgB;AACd,iBAAe,UAAU;IACxB,CAAC,eAAe,CAAC;CAEpB,MAAM,iBAAiB,kBAAkB,eAAe,SAAS,EAAE,CAAC;CAEpE,MAAM,kBAAkB,cAAc;AACpC,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,oBAACA;GAAW,SAAS;GAAgB,MAAM,kBAAkB;IAAE,WAAW;IAAI,MAAM;IAAI;IAAI;IAE7F;EAAC;EAAgB;EAAU;EAAe,CAAC;CAE9C,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAC3B,SAAO,cAAc;GACnB;GACA,SAAS;GACT,YAAY;GACZ,cAAc;GACf,CAAC;IACD;EAAC;EAAgB;EAAe;EAAgB;EAAiB;EAAe,CAAC;CAEpF,MAAM,cAAc,cAEhB,oBAACC;EACC,WAAW,YAAY;EACR;EACf,OAAO,cAAc;EACd;EACE;YAER;GACa,EAElB;EAAC;EAAe;EAAO;EAAgB;EAAS,YAAY;EAAS,cAAc;EAAQ,CAC5F;CAED,MAAM,OAAO,cAAc;AACzB,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,WAAW;GAAE,SAAS;GAAgB,cAAc;GAAa,CAAC;IACxE;EAAC;EAAY;EAAa;EAAe,CAAC;AAE7C,KAAI,aACF,QACE,oBAACC;EACgB;EACJ;EACC;EACZ,SAAS;EACC;EACK;EACL;EACA;EACF;EACM;EACP;EACP,QAAQ;EACC;EACT,GAAI;YAEH;GACY;AAGnB,QACE,qBAAC;EACC,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS,CAAC,EAAE,UAAU;EACvD,kBAAe;EACR;EACP,GAAI;;GAEJ,oBAACC;IAAQ,OAAO;IAAU,WAAW,OAAO;IAAS,MAAM;IAAQ,KAAK;IAAG;cACxE;KACO;GACT,gBAAgB,oBAACC;IAAI,WAAW,OAAO;cAAO,SAAS,aAAa;KAAO;GAC3E;;GACG;EAGX;AAED,QAAQ,cAAc;AAEtB,sBAAe"}
+{"version":3,"file":"Mermaid.mjs","names":["CopyButton","SyntaxMermaid","FullFeatured","Flexbox","Tag"],"sources":["../../src/Mermaid/Mermaid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { styles, variants } from '@/Highlighter/style';\nimport Tag from '@/Tag';\n\nimport FullFeatured from './FullFeatured';\nimport SyntaxMermaid from './SyntaxMermaid';\nimport { MermaidProps } from './type';\n\nconst Mermaid = memo<MermaidProps>(\n  ({\n    actionIconSize,\n    animated,\n    bodyRender,\n    children,\n    classNames,\n    className,\n    copyable = true,\n    defaultExpand = true,\n    fileName,\n    fullFeatured,\n    language = 'mermaid',\n    actionsRender,\n    shadow,\n    showLanguage = true,\n    style,\n    styles: customStyles,\n    theme,\n    variant = 'filled',\n    ...rest\n  }) => {\n    const tirmedChildren = children.trim();\n    const copyContentRef = useRef(tirmedChildren);\n\n    useEffect(() => {\n      copyContentRef.current = tirmedChildren;\n    }, [tirmedChildren]);\n\n    const getCopyContent = useCallback(() => copyContentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return (\n        <CopyButton content={getCopyContent} size={actionIconSize || { blockSize: 28, size: 16 }} />\n      );\n    }, [actionIconSize, copyable, getCopyContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize,\n        content: tirmedChildren,\n        getContent: getCopyContent,\n        originalNode: originalActions,\n      });\n    }, [actionIconSize, actionsRender, getCopyContent, originalActions, tirmedChildren]);\n\n    const defaultBody = useMemo(\n      () => (\n        <SyntaxMermaid\n          animated={animated}\n          className={classNames?.content}\n          style={customStyles?.content}\n          theme={theme}\n          variant={variant}\n        >\n          {tirmedChildren}\n        </SyntaxMermaid>\n      ),\n      [animated, theme, tirmedChildren, variant, classNames?.content, customStyles?.content],\n    );\n\n    const body = useMemo(() => {\n      if (!bodyRender) return defaultBody;\n      return bodyRender({ content: tirmedChildren, originalNode: defaultBody });\n    }, [bodyRender, defaultBody, tirmedChildren]);\n\n    if (fullFeatured)\n      return (\n        <FullFeatured\n          actionsRender={actionsRender}\n          className={className}\n          classNames={classNames}\n          content={tirmedChildren}\n          copyable={copyable}\n          defaultExpand={defaultExpand}\n          fileName={fileName}\n          language={language}\n          shadow={shadow}\n          showLanguage={showLanguage}\n          style={style}\n          styles={customStyles}\n          variant={variant}\n          {...rest}\n        >\n          {body}\n        </FullFeatured>\n      );\n\n    return (\n      <div\n        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"mermaid\"\n        style={style}\n        {...rest}\n      >\n        <Flexbox align={'center'} className={styles.actions} flex={'none'} gap={4} horizontal>\n          {actions}\n        </Flexbox>\n        {showLanguage && <Tag className={styles.lang}>{language.toLowerCase()}</Tag>}\n        {body}\n      </div>\n    );\n  },\n);\n\nMermaid.displayName = 'Mermaid';\n\nexport default Mermaid;\n\nexport { type MermaidProps } from './type';\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,UAAU,MACb,EACC,gBACA,UACA,YACA,UACA,YACA,WACA,WAAW,MACX,gBAAgB,MAChB,UACA,cACA,WAAW,WACX,eACA,QACA,eAAe,MACf,OACA,QAAQ,cACR,OACA,UAAU,UACV,GAAG,WACC;CACJ,MAAM,iBAAiB,SAAS,MAAM;CACtC,MAAM,iBAAiB,OAAO,eAAe;AAE7C,iBAAgB;AACd,iBAAe,UAAU;IACxB,CAAC,eAAe,CAAC;CAEpB,MAAM,iBAAiB,kBAAkB,eAAe,SAAS,EAAE,CAAC;CAEpE,MAAM,kBAAkB,cAAc;AACpC,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,oBAACA;GAAW,SAAS;GAAgB,MAAM,kBAAkB;IAAE,WAAW;IAAI,MAAM;IAAI;IAAI;IAE7F;EAAC;EAAgB;EAAU;EAAe,CAAC;CAE9C,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAC3B,SAAO,cAAc;GACnB;GACA,SAAS;GACT,YAAY;GACZ,cAAc;GACf,CAAC;IACD;EAAC;EAAgB;EAAe;EAAgB;EAAiB;EAAe,CAAC;CAEpF,MAAM,cAAc,cAEhB,oBAACC;EACW;EACV,WAAW,YAAY;EACvB,OAAO,cAAc;EACd;EACE;YAER;GACa,EAElB;EAAC;EAAU;EAAO;EAAgB;EAAS,YAAY;EAAS,cAAc;EAAQ,CACvF;CAED,MAAM,OAAO,cAAc;AACzB,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,WAAW;GAAE,SAAS;GAAgB,cAAc;GAAa,CAAC;IACxE;EAAC;EAAY;EAAa;EAAe,CAAC;AAE7C,KAAI,aACF,QACE,oBAACC;EACgB;EACJ;EACC;EACZ,SAAS;EACC;EACK;EACL;EACA;EACF;EACM;EACP;EACP,QAAQ;EACC;EACT,GAAI;YAEH;GACY;AAGnB,QACE,qBAAC;EACC,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS,CAAC,EAAE,UAAU;EACvD,kBAAe;EACR;EACP,GAAI;;GAEJ,oBAACC;IAAQ,OAAO;IAAU,WAAW,OAAO;IAAS,MAAM;IAAQ,KAAK;IAAG;cACxE;KACO;GACT,gBAAgB,oBAACC;IAAI,WAAW,OAAO;cAAO,SAAS,aAAa;KAAO;GAC3E;;GACG;EAGX;AAED,QAAQ,cAAc;AAEtB,sBAAe"}

package/es/Mermaid/SyntaxMermaid/StaticMermaid.mjs

@@ -0,0 +1,82 @@
+'use client';
+
+import Image_default from "../../Image/index.mjs";
+import { mermaidThemes } from "../const.mjs";
+import { useMermaid } from "../../hooks/useMermaid.mjs";
+import { memo, useEffect, useId, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { kebabCase } from "es-toolkit/compat";
+
+//#region src/Mermaid/SyntaxMermaid/StaticMermaid.tsx
+const StaticMermaid = memo(({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {
+	const safeChildren = children ?? "";
+	const isDefaultTheme = customTheme === "lobe-theme" || !customTheme;
+	const background = useMemo(() => {
+		if (isDefaultTheme) return;
+		return mermaidThemes.find((item) => item.id === customTheme)?.background;
+	}, [isDefaultTheme, customTheme]);
+	const data = useMermaid(safeChildren, {
+		id: kebabCase(`mermaid-${useId()}`),
+		theme: isDefaultTheme ? void 0 : customTheme
+	});
+	const isLoading = !data;
+	const [blobUrl, setBlobUrl] = useState();
+	useEffect(() => {
+		return () => {
+			if (blobUrl) URL.revokeObjectURL(blobUrl);
+		};
+	}, [blobUrl]);
+	useEffect(() => {
+		if (isLoading || !data) return;
+		let finalSvgString = data;
+		if (typeof window !== "undefined" && typeof navigator !== "undefined" && navigator.userAgent.includes("Firefox")) {
+			const svgDoc = new DOMParser().parseFromString(data, "image/svg+xml");
+			const svgElement = svgDoc.documentElement;
+			if (svgElement && svgElement.hasAttribute("viewBox")) {
+				const viewBoxParts = svgElement.getAttribute("viewBox").split(" ");
+				if (Array.isArray(viewBoxParts) && viewBoxParts.length === 4) {
+					svgElement.setAttribute("width", viewBoxParts[2]);
+					svgElement.setAttribute("height", viewBoxParts[3]);
+				}
+				finalSvgString = new XMLSerializer().serializeToString(svgDoc);
+			}
+		}
+		const svgBlob = new Blob([finalSvgString], { type: "image/svg+xml" });
+		setBlobUrl(URL.createObjectURL(svgBlob));
+	}, [isLoading, data]);
+	if (!blobUrl) return /* @__PURE__ */ jsx("div", {
+		className: fallbackClassName,
+		style,
+		children: /* @__PURE__ */ jsx("div", {
+			style: { padding: 16 },
+			children: "Loading..."
+		})
+	});
+	return /* @__PURE__ */ jsx(Image_default, {
+		alt: "mermaid",
+		className,
+		maxHeight: 480,
+		minWidth: 300,
+		objectFit: "contain",
+		ref,
+		src: blobUrl,
+		style: {
+			background: variant === "filled" ? background : void 0,
+			borderRadius: 0,
+			margin: 0,
+			minWidth: 300,
+			padding: variant === "borderless" ? 0 : 16,
+			position: "relative",
+			width: "100%",
+			...style
+		},
+		variant: "borderless",
+		width: "100%"
+	});
+});
+StaticMermaid.displayName = "StaticMermaid";
+var StaticMermaid_default = StaticMermaid;
+
+//#endregion
+export { StaticMermaid_default as default };
+//# sourceMappingURL=StaticMermaid.mjs.map

package/es/Mermaid/SyntaxMermaid/StaticMermaid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticMermaid.mjs","names":["Image"],"sources":["../../../src/Mermaid/SyntaxMermaid/StaticMermaid.tsx"],"sourcesContent":["'use client';\n\nimport { kebabCase } from 'es-toolkit/compat';\nimport { memo, useEffect, useId, useMemo, useState } from 'react';\nimport type { Ref } from 'react';\n\nimport Image from '@/Image';\nimport { useMermaid } from '@/hooks/useMermaid';\n\nimport { mermaidThemes } from '../const';\nimport type { SyntaxMermaidProps } from '../type';\n\ninterface StaticMermaidProps {\n  children: string;\n  className?: string;\n  fallbackClassName?: string;\n  ref?: Ref<HTMLDivElement>;\n  style?: SyntaxMermaidProps['style'];\n  theme?: SyntaxMermaidProps['theme'];\n  variant?: SyntaxMermaidProps['variant'];\n}\n\nconst StaticMermaid = memo<StaticMermaidProps>(\n  ({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {\n    const safeChildren = children ?? '';\n    const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n\n    const background = useMemo(() => {\n      if (isDefaultTheme) return;\n      return mermaidThemes.find((item) => item.id === customTheme)?.background;\n    }, [isDefaultTheme, customTheme]);\n\n    const id = useId();\n    const mermaidId = kebabCase(`mermaid-${id}`);\n    const data = useMermaid(safeChildren, {\n      id: mermaidId,\n      theme: isDefaultTheme ? undefined : customTheme,\n    });\n    const isLoading = !data;\n    const [blobUrl, setBlobUrl] = useState<string>();\n\n    // 组件卸载时清理 Blob URL，避免内存泄漏\n    useEffect(() => {\n      return () => {\n        if (blobUrl) URL.revokeObjectURL(blobUrl);\n      };\n    }, [blobUrl]);\n\n    useEffect(() => {\n      if (isLoading || !data) return;\n      let finalSvgString = data;\n\n      // 修复Firefox点击预览mermaid图时宽高为0导致不显示的异常\n      if (\n        typeof window !== 'undefined' &&\n        typeof navigator !== 'undefined' &&\n        navigator.userAgent.includes('Firefox')\n      ) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n        const svgElement = svgDoc.documentElement;\n        if (svgElement && svgElement.hasAttribute('viewBox')) {\n          const viewBox = svgElement.getAttribute('viewBox')!;\n          const viewBoxParts = viewBox.split(' ');\n          if (Array.isArray(viewBoxParts) && viewBoxParts.length === 4) {\n            svgElement.setAttribute('width', viewBoxParts[2]);\n            svgElement.setAttribute('height', viewBoxParts[3]);\n          }\n          finalSvgString = new XMLSerializer().serializeToString(svgDoc);\n        }\n      }\n\n      // 创建Blob对象\n      const svgBlob = new Blob([finalSvgString], { type: 'image/svg+xml' });\n      // 创建并保存Blob URL\n      const url = URL.createObjectURL(svgBlob);\n      setBlobUrl(url);\n    }, [isLoading, data]);\n\n    if (!blobUrl) {\n      return (\n        <div className={fallbackClassName} style={style}>\n          <div style={{ padding: 16 }}>Loading...</div>\n        </div>\n      );\n    }\n\n    return (\n      <Image\n        alt={'mermaid'}\n        className={className}\n        maxHeight={480}\n        minWidth={300}\n        objectFit={'contain'}\n        ref={ref}\n        src={blobUrl}\n        style={{\n          background: variant === 'filled' ? background : undefined,\n          borderRadius: 0,\n          margin: 0,\n          minWidth: 300,\n          padding: variant === 'borderless' ? 0 : 16,\n          position: 'relative',\n          width: '100%',\n          ...style,\n        }}\n        variant={'borderless'}\n        width={'100%'}\n      />\n    );\n  },\n);\n\nStaticMermaid.displayName = 'StaticMermaid';\n\nexport default StaticMermaid;\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,gBAAgB,MACnB,EAAE,UAAU,WAAW,mBAAmB,KAAK,OAAO,OAAO,aAAa,cAAc;CACvF,MAAM,eAAe,YAAY;CACjC,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CAExD,MAAM,aAAa,cAAc;AAC/B,MAAI,eAAgB;AACpB,SAAO,cAAc,MAAM,SAAS,KAAK,OAAO,YAAY,EAAE;IAC7D,CAAC,gBAAgB,YAAY,CAAC;CAIjC,MAAM,OAAO,WAAW,cAAc;EACpC,IAFgB,UAAU,WADjB,OAAO,GAC0B;EAG1C,OAAO,iBAAiB,SAAY;EACrC,CAAC;CACF,MAAM,YAAY,CAAC;CACnB,MAAM,CAAC,SAAS,cAAc,UAAkB;AAGhD,iBAAgB;AACd,eAAa;AACX,OAAI,QAAS,KAAI,gBAAgB,QAAQ;;IAE1C,CAAC,QAAQ,CAAC;AAEb,iBAAgB;AACd,MAAI,aAAa,CAAC,KAAM;EACxB,IAAI,iBAAiB;AAGrB,MACE,OAAO,WAAW,eAClB,OAAO,cAAc,eACrB,UAAU,UAAU,SAAS,UAAU,EACvC;GAEA,MAAM,SADS,IAAI,WAAW,CACR,gBAAgB,MAAM,gBAAgB;GAC5D,MAAM,aAAa,OAAO;AAC1B,OAAI,cAAc,WAAW,aAAa,UAAU,EAAE;IAEpD,MAAM,eADU,WAAW,aAAa,UAAU,CACrB,MAAM,IAAI;AACvC,QAAI,MAAM,QAAQ,aAAa,IAAI,aAAa,WAAW,GAAG;AAC5D,gBAAW,aAAa,SAAS,aAAa,GAAG;AACjD,gBAAW,aAAa,UAAU,aAAa,GAAG;;AAEpD,qBAAiB,IAAI,eAAe,CAAC,kBAAkB,OAAO;;;EAKlE,MAAM,UAAU,IAAI,KAAK,CAAC,eAAe,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAGrE,aADY,IAAI,gBAAgB,QAAQ,CACzB;IACd,CAAC,WAAW,KAAK,CAAC;AAErB,KAAI,CAAC,QACH,QACE,oBAAC;EAAI,WAAW;EAA0B;YACxC,oBAAC;GAAI,OAAO,EAAE,SAAS,IAAI;aAAE;IAAgB;GACzC;AAIV,QACE,oBAACA;EACC,KAAK;EACM;EACX,WAAW;EACX,UAAU;EACV,WAAW;EACN;EACL,KAAK;EACL,OAAO;GACL,YAAY,YAAY,WAAW,aAAa;GAChD,cAAc;GACd,QAAQ;GACR,UAAU;GACV,SAAS,YAAY,eAAe,IAAI;GACxC,UAAU;GACV,OAAO;GACP,GAAG;GACJ;EACD,SAAS;EACT,OAAO;GACP;EAGP;AAED,cAAc,cAAc;AAE5B,4BAAe"}

package/es/Mermaid/SyntaxMermaid/StreamMermaid.mjs

@@ -0,0 +1,94 @@
+'use client';
+
+import Image_default from "../../Image/index.mjs";
+import { mermaidThemes } from "../const.mjs";
+import { useStreamMermaid } from "../../hooks/useStreamMermaid.mjs";
+import { memo, useEffect, useId, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { kebabCase } from "es-toolkit/compat";
+
+//#region src/Mermaid/SyntaxMermaid/StreamMermaid.tsx
+const StreamMermaid = memo(({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {
+	const safeChildren = children ?? "";
+	const isDefaultTheme = customTheme === "lobe-theme" || !customTheme;
+	const background = useMemo(() => {
+		if (isDefaultTheme) return;
+		return mermaidThemes.find((item) => item.id === customTheme)?.background;
+	}, [isDefaultTheme, customTheme]);
+	const data = useStreamMermaid(safeChildren, {
+		enabled: true,
+		id: kebabCase(`mermaid-${useId()}`),
+		theme: isDefaultTheme ? void 0 : customTheme
+	});
+	const isLoading = !data;
+	const [blobUrl, setBlobUrl] = useState();
+	useEffect(() => {
+		return () => {
+			if (blobUrl) URL.revokeObjectURL(blobUrl);
+		};
+	}, [blobUrl]);
+	useEffect(() => {
+		if (isLoading || !data) {
+			if (blobUrl) {
+				URL.revokeObjectURL(blobUrl);
+				setBlobUrl(void 0);
+			}
+			return;
+		}
+		let finalSvgString = data;
+		if (typeof window !== "undefined" && typeof navigator !== "undefined" && navigator.userAgent.includes("Firefox")) {
+			const svgDoc = new DOMParser().parseFromString(data, "image/svg+xml");
+			const svgElement = svgDoc.documentElement;
+			if (svgElement && svgElement.hasAttribute("viewBox")) {
+				const viewBoxParts = svgElement.getAttribute("viewBox").split(" ");
+				if (Array.isArray(viewBoxParts) && viewBoxParts.length === 4) {
+					svgElement.setAttribute("width", viewBoxParts[2]);
+					svgElement.setAttribute("height", viewBoxParts[3]);
+				}
+				finalSvgString = new XMLSerializer().serializeToString(svgDoc);
+			}
+		}
+		if (blobUrl) URL.revokeObjectURL(blobUrl);
+		const svgBlob = new Blob([finalSvgString], { type: "image/svg+xml" });
+		setBlobUrl(URL.createObjectURL(svgBlob));
+	}, [
+		isLoading,
+		data,
+		blobUrl
+	]);
+	if (!blobUrl) return /* @__PURE__ */ jsx("div", {
+		className: fallbackClassName,
+		style,
+		children: /* @__PURE__ */ jsx("div", {
+			style: { padding: 16 },
+			children: "Rendering..."
+		})
+	});
+	return /* @__PURE__ */ jsx(Image_default, {
+		alt: "mermaid",
+		className,
+		maxHeight: 480,
+		minWidth: 300,
+		objectFit: "contain",
+		ref,
+		src: blobUrl,
+		style: {
+			background: variant === "filled" ? background : void 0,
+			borderRadius: 0,
+			margin: 0,
+			minWidth: 300,
+			padding: variant === "borderless" ? 0 : 16,
+			position: "relative",
+			width: "100%",
+			...style
+		},
+		variant: "borderless",
+		width: "100%"
+	});
+});
+StreamMermaid.displayName = "StreamMermaid";
+var StreamMermaid_default = StreamMermaid;
+
+//#endregion
+export { StreamMermaid_default as default };
+//# sourceMappingURL=StreamMermaid.mjs.map

package/es/Mermaid/SyntaxMermaid/StreamMermaid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StreamMermaid.mjs","names":["Image"],"sources":["../../../src/Mermaid/SyntaxMermaid/StreamMermaid.tsx"],"sourcesContent":["'use client';\n\nimport { kebabCase } from 'es-toolkit/compat';\nimport { memo, useEffect, useId, useMemo, useState } from 'react';\nimport type { Ref } from 'react';\n\nimport Image from '@/Image';\nimport { useStreamMermaid } from '@/hooks/useStreamMermaid';\n\nimport { mermaidThemes } from '../const';\nimport type { SyntaxMermaidProps } from '../type';\n\ninterface StreamMermaidProps {\n  children: string;\n  className?: string;\n  fallbackClassName?: string;\n  ref?: Ref<HTMLDivElement>;\n  style?: SyntaxMermaidProps['style'];\n  theme?: SyntaxMermaidProps['theme'];\n  variant?: SyntaxMermaidProps['variant'];\n}\n\nconst StreamMermaid = memo<StreamMermaidProps>(\n  ({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {\n    const safeChildren = children ?? '';\n    const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n\n    const background = useMemo(() => {\n      if (isDefaultTheme) return;\n      return mermaidThemes.find((item) => item.id === customTheme)?.background;\n    }, [isDefaultTheme, customTheme]);\n\n    const id = useId();\n    const mermaidId = kebabCase(`mermaid-${id}`);\n    const data = useStreamMermaid(safeChildren, {\n      enabled: true,\n      id: mermaidId,\n      theme: isDefaultTheme ? undefined : customTheme,\n    });\n    const isLoading = !data;\n    const [blobUrl, setBlobUrl] = useState<string>();\n\n    // 组件卸载时清理 Blob URL，避免内存泄漏\n    useEffect(() => {\n      return () => {\n        if (blobUrl) URL.revokeObjectURL(blobUrl);\n      };\n    }, [blobUrl]);\n\n    useEffect(() => {\n      if (isLoading || !data) {\n        // Clear blob URL when loading or no data\n        if (blobUrl) {\n          URL.revokeObjectURL(blobUrl);\n          setBlobUrl(undefined);\n        }\n        return;\n      }\n\n      let finalSvgString = data;\n\n      // 修复Firefox点击预览mermaid图时宽高为0导致不显示的异常\n      if (\n        typeof window !== 'undefined' &&\n        typeof navigator !== 'undefined' &&\n        navigator.userAgent.includes('Firefox')\n      ) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n        const svgElement = svgDoc.documentElement;\n        if (svgElement && svgElement.hasAttribute('viewBox')) {\n          const viewBox = svgElement.getAttribute('viewBox')!;\n          const viewBoxParts = viewBox.split(' ');\n          if (Array.isArray(viewBoxParts) && viewBoxParts.length === 4) {\n            svgElement.setAttribute('width', viewBoxParts[2]);\n            svgElement.setAttribute('height', viewBoxParts[3]);\n          }\n          finalSvgString = new XMLSerializer().serializeToString(svgDoc);\n        }\n      }\n\n      // Revoke old blob URL before creating new one\n      if (blobUrl) {\n        URL.revokeObjectURL(blobUrl);\n      }\n\n      // 创建Blob对象\n      const svgBlob = new Blob([finalSvgString], { type: 'image/svg+xml' });\n      // 创建并保存Blob URL\n      const url = URL.createObjectURL(svgBlob);\n      setBlobUrl(url);\n    }, [isLoading, data, blobUrl]);\n\n    if (!blobUrl) {\n      return (\n        <div className={fallbackClassName} style={style}>\n          <div style={{ padding: 16 }}>Rendering...</div>\n        </div>\n      );\n    }\n\n    return (\n      <Image\n        alt={'mermaid'}\n        className={className}\n        maxHeight={480}\n        minWidth={300}\n        objectFit={'contain'}\n        ref={ref}\n        src={blobUrl}\n        style={{\n          background: variant === 'filled' ? background : undefined,\n          borderRadius: 0,\n          margin: 0,\n          minWidth: 300,\n          padding: variant === 'borderless' ? 0 : 16,\n          position: 'relative',\n          width: '100%',\n          ...style,\n        }}\n        variant={'borderless'}\n        width={'100%'}\n      />\n    );\n  },\n);\n\nStreamMermaid.displayName = 'StreamMermaid';\n\nexport default StreamMermaid;\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,gBAAgB,MACnB,EAAE,UAAU,WAAW,mBAAmB,KAAK,OAAO,OAAO,aAAa,cAAc;CACvF,MAAM,eAAe,YAAY;CACjC,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CAExD,MAAM,aAAa,cAAc;AAC/B,MAAI,eAAgB;AACpB,SAAO,cAAc,MAAM,SAAS,KAAK,OAAO,YAAY,EAAE;IAC7D,CAAC,gBAAgB,YAAY,CAAC;CAIjC,MAAM,OAAO,iBAAiB,cAAc;EAC1C,SAAS;EACT,IAHgB,UAAU,WADjB,OAAO,GAC0B;EAI1C,OAAO,iBAAiB,SAAY;EACrC,CAAC;CACF,MAAM,YAAY,CAAC;CACnB,MAAM,CAAC,SAAS,cAAc,UAAkB;AAGhD,iBAAgB;AACd,eAAa;AACX,OAAI,QAAS,KAAI,gBAAgB,QAAQ;;IAE1C,CAAC,QAAQ,CAAC;AAEb,iBAAgB;AACd,MAAI,aAAa,CAAC,MAAM;AAEtB,OAAI,SAAS;AACX,QAAI,gBAAgB,QAAQ;AAC5B,eAAW,OAAU;;AAEvB;;EAGF,IAAI,iBAAiB;AAGrB,MACE,OAAO,WAAW,eAClB,OAAO,cAAc,eACrB,UAAU,UAAU,SAAS,UAAU,EACvC;GAEA,MAAM,SADS,IAAI,WAAW,CACR,gBAAgB,MAAM,gBAAgB;GAC5D,MAAM,aAAa,OAAO;AAC1B,OAAI,cAAc,WAAW,aAAa,UAAU,EAAE;IAEpD,MAAM,eADU,WAAW,aAAa,UAAU,CACrB,MAAM,IAAI;AACvC,QAAI,MAAM,QAAQ,aAAa,IAAI,aAAa,WAAW,GAAG;AAC5D,gBAAW,aAAa,SAAS,aAAa,GAAG;AACjD,gBAAW,aAAa,UAAU,aAAa,GAAG;;AAEpD,qBAAiB,IAAI,eAAe,CAAC,kBAAkB,OAAO;;;AAKlE,MAAI,QACF,KAAI,gBAAgB,QAAQ;EAI9B,MAAM,UAAU,IAAI,KAAK,CAAC,eAAe,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAGrE,aADY,IAAI,gBAAgB,QAAQ,CACzB;IACd;EAAC;EAAW;EAAM;EAAQ,CAAC;AAE9B,KAAI,CAAC,QACH,QACE,oBAAC;EAAI,WAAW;EAA0B;YACxC,oBAAC;GAAI,OAAO,EAAE,SAAS,IAAI;aAAE;IAAkB;GAC3C;AAIV,QACE,oBAACA;EACC,KAAK;EACM;EACX,WAAW;EACX,UAAU;EACV,WAAW;EACN;EACL,KAAK;EACL,OAAO;GACL,YAAY,YAAY,WAAW,aAAa;GAChD,cAAc;GACd,QAAQ;GACR,UAAU;GACV,SAAS,YAAY,eAAe,IAAI;GACxC,UAAU;GACV,OAAO;GACP,GAAG;GACJ;EACD,SAAS;EACT,OAAO;GACP;EAGP;AAED,cAAc,cAAc;AAE5B,4BAAe"}

package/es/Mermaid/SyntaxMermaid/index.d.mts

@@ -1,8 +1,8 @@
 import { SyntaxMermaidProps } from "../type.mjs";
-import * as react30 from "react";
+import * as react48 from "react";
 
 //#region src/Mermaid/SyntaxMermaid/index.d.ts
-declare const SyntaxMermaid: react30.NamedExoticComponent<SyntaxMermaidProps>;
+declare const SyntaxMermaid: react48.NamedExoticComponent<SyntaxMermaidProps>;
 //#endregion
 export { SyntaxMermaid };
 //# sourceMappingURL=index.d.mts.map

package/es/Mermaid/SyntaxMermaid/index.mjs

@@ -1,70 +1,48 @@
 'use client';
 
-import Image_default from "../../Image/index.mjs";
-import { mermaidThemes } from "../const.mjs";
-import { useMermaid } from "../../hooks/useMermaid.mjs";
-import { memo, useEffect, useId, useMemo, useState } from "react";
+import StaticMermaid_default from "./StaticMermaid.mjs";
+import StreamMermaid_default from "./StreamMermaid.mjs";
+import { variants } from "./style.mjs";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { kebabCase } from "es-toolkit/compat";
+import { cx } from "antd-style";
 
 //#region src/Mermaid/SyntaxMermaid/index.tsx
-const SyntaxMermaid = memo(({ ref, children, theme: customTheme, variant, className, style }) => {
+const SyntaxMermaid = memo(({ animated, children, className, fallbackClassName, ref, style, theme: customTheme, variant = "borderless" }) => {
 	const isDefaultTheme = customTheme === "lobe-theme" || !customTheme;
-	const background = useMemo(() => {
-		if (isDefaultTheme) return;
-		return mermaidThemes.find((item) => item.id === customTheme)?.background;
-	}, [isDefaultTheme, customTheme]);
-	const { data, isLoading } = useMermaid(children, {
-		id: kebabCase(`mermaid-${useId()}`),
-		theme: isDefaultTheme ? void 0 : customTheme
+	const showBackground = !isDefaultTheme && variant === "filled";
+	const resolvedTheme = isDefaultTheme ? void 0 : customTheme;
+	const mermaidClassName = cx(variants({
+		animated,
+		mermaid: true,
+		showBackground,
+		variant
+	}), className);
+	const fallback = cx(variants({
+		animated,
+		mermaid: false,
+		showBackground,
+		variant
+	}), fallbackClassName);
+	if (animated) return /* @__PURE__ */ jsx(StreamMermaid_default, {
+		className: mermaidClassName,
+		fallbackClassName: fallback,
+		ref,
+		style,
+		theme: resolvedTheme,
+		variant,
+		children
 	});
-	const [blobUrl, setBlobUrl] = useState();
-	useEffect(() => {
-		return () => {
-			if (blobUrl) URL.revokeObjectURL(blobUrl);
-		};
-	}, [blobUrl]);
-	useEffect(() => {
-		if (isLoading || !data) return;
-		let finalSvgString = data;
-		if (typeof window !== "undefined" && typeof navigator !== "undefined" && navigator.userAgent.includes("Firefox")) {
-			const svgDoc = new DOMParser().parseFromString(data, "image/svg+xml");
-			const svgElement = svgDoc.documentElement;
-			if (svgElement && svgElement.hasAttribute("viewBox")) {
-				const viewBoxParts = svgElement.getAttribute("viewBox").split(" ");
-				if (Array.isArray(viewBoxParts) && viewBoxParts.length === 4) {
-					svgElement.setAttribute("width", viewBoxParts[2]);
-					svgElement.setAttribute("height", viewBoxParts[3]);
-				}
-				finalSvgString = new XMLSerializer().serializeToString(svgDoc);
-			}
-		}
-		const svgBlob = new Blob([finalSvgString], { type: "image/svg+xml" });
-		setBlobUrl(URL.createObjectURL(svgBlob));
-	}, [isLoading, data]);
-	if (!blobUrl) return null;
-	return /* @__PURE__ */ jsx(Image_default, {
-		alt: "mermaid",
-		className,
-		maxHeight: 480,
-		minWidth: 300,
-		objectFit: "contain",
+	return /* @__PURE__ */ jsx(StaticMermaid_default, {
+		className: mermaidClassName,
+		fallbackClassName: fallback,
 		ref,
-		src: blobUrl,
-		style: {
-			background: variant === "filled" ? background : void 0,
-			borderRadius: 0,
-			margin: 0,
-			minWidth: 300,
-			padding: variant === "borderless" ? 0 : 16,
-			position: "relative",
-			width: "100%",
-			...style
-		},
-		variant: "borderless",
-		width: "100%"
+		style,
+		theme: resolvedTheme,
+		variant,
+		children
 	});
-}, (prevProps, nextProps) => prevProps.children === nextProps.children);
+}, (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.animated === nextProps.animated);
 SyntaxMermaid.displayName = "SyntaxMermaid";
 var SyntaxMermaid_default = SyntaxMermaid;
 

package/es/Mermaid/SyntaxMermaid/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Image"],"sources":["../../../src/Mermaid/SyntaxMermaid/index.tsx"],"sourcesContent":["'use client';\n\nimport { kebabCase } from 'es-toolkit/compat';\nimport { memo, useEffect, useId, useMemo, useState } from 'react';\n\nimport Image from '@/Image';\nimport { useMermaid } from '@/hooks/useMermaid';\n\nimport { mermaidThemes } from '../const';\nimport type { SyntaxMermaidProps } from '../type';\n\nconst SyntaxMermaid = memo<SyntaxMermaidProps>(\n  ({ ref, children, theme: customTheme, variant, className, style }) => {\n    const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n\n    const background = useMemo(() => {\n      if (isDefaultTheme) return;\n      return mermaidThemes.find((item) => item.id === customTheme)?.background;\n    }, [isDefaultTheme, customTheme]);\n\n    const id = useId();\n    const mermaidId = kebabCase(`mermaid-${id}`);\n    const { data, isLoading } = useMermaid(children, {\n      id: mermaidId,\n      theme: isDefaultTheme ? undefined : customTheme,\n    });\n    const [blobUrl, setBlobUrl] = useState<string>();\n\n    // 组件卸载时清理 Blob URL，避免内存泄漏\n    useEffect(() => {\n      return () => {\n        if (blobUrl) URL.revokeObjectURL(blobUrl);\n      };\n    }, [blobUrl]);\n\n    useEffect(() => {\n      if (isLoading || !data) return;\n      let finalSvgString = data;\n\n      // 修复Firefox点击预览mermaid图时宽高为0导致不显示的异常\n      if (\n        typeof window !== 'undefined' &&\n        typeof navigator !== 'undefined' &&\n        navigator.userAgent.includes('Firefox')\n      ) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n        const svgElement = svgDoc.documentElement;\n        if (svgElement && svgElement.hasAttribute('viewBox')) {\n          const viewBox = svgElement.getAttribute('viewBox')!;\n          const viewBoxParts = viewBox.split(' ');\n          if (Array.isArray(viewBoxParts) && viewBoxParts.length === 4) {\n            svgElement.setAttribute('width', viewBoxParts[2]);\n            svgElement.setAttribute('height', viewBoxParts[3]);\n          }\n          finalSvgString = new XMLSerializer().serializeToString(svgDoc);\n        }\n      }\n\n      // // 创建Blob对象\n      const svgBlob = new Blob([finalSvgString], { type: 'image/svg+xml' });\n      // // 创建并保存Blob URL\n      const url = URL.createObjectURL(svgBlob);\n      setBlobUrl(url);\n    }, [isLoading, data]);\n\n    if (!blobUrl) return null;\n\n    return (\n      <Image\n        alt={'mermaid'}\n        className={className}\n        maxHeight={480}\n        minWidth={300}\n        objectFit={'contain'}\n        ref={ref}\n        src={blobUrl}\n        style={{\n          background: variant === 'filled' ? background : undefined,\n          borderRadius: 0,\n          margin: 0,\n          minWidth: 300,\n          padding: variant === 'borderless' ? 0 : 16,\n          position: 'relative',\n          width: '100%',\n          ...style,\n        }}\n        variant={'borderless'}\n        width={'100%'}\n      />\n    );\n  },\n  (prevProps, nextProps) => prevProps.children === nextProps.children,\n);\n\nSyntaxMermaid.displayName = 'SyntaxMermaid';\n\nexport default SyntaxMermaid;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,gBAAgB,MACnB,EAAE,KAAK,UAAU,OAAO,aAAa,SAAS,WAAW,YAAY;CACpE,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CAExD,MAAM,aAAa,cAAc;AAC/B,MAAI,eAAgB;AACpB,SAAO,cAAc,MAAM,SAAS,KAAK,OAAO,YAAY,EAAE;IAC7D,CAAC,gBAAgB,YAAY,CAAC;CAIjC,MAAM,EAAE,MAAM,cAAc,WAAW,UAAU;EAC/C,IAFgB,UAAU,WADjB,OAAO,GAC0B;EAG1C,OAAO,iBAAiB,SAAY;EACrC,CAAC;CACF,MAAM,CAAC,SAAS,cAAc,UAAkB;AAGhD,iBAAgB;AACd,eAAa;AACX,OAAI,QAAS,KAAI,gBAAgB,QAAQ;;IAE1C,CAAC,QAAQ,CAAC;AAEb,iBAAgB;AACd,MAAI,aAAa,CAAC,KAAM;EACxB,IAAI,iBAAiB;AAGrB,MACE,OAAO,WAAW,eAClB,OAAO,cAAc,eACrB,UAAU,UAAU,SAAS,UAAU,EACvC;GAEA,MAAM,SADS,IAAI,WAAW,CACR,gBAAgB,MAAM,gBAAgB;GAC5D,MAAM,aAAa,OAAO;AAC1B,OAAI,cAAc,WAAW,aAAa,UAAU,EAAE;IAEpD,MAAM,eADU,WAAW,aAAa,UAAU,CACrB,MAAM,IAAI;AACvC,QAAI,MAAM,QAAQ,aAAa,IAAI,aAAa,WAAW,GAAG;AAC5D,gBAAW,aAAa,SAAS,aAAa,GAAG;AACjD,gBAAW,aAAa,UAAU,aAAa,GAAG;;AAEpD,qBAAiB,IAAI,eAAe,CAAC,kBAAkB,OAAO;;;EAKlE,MAAM,UAAU,IAAI,KAAK,CAAC,eAAe,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAGrE,aADY,IAAI,gBAAgB,QAAQ,CACzB;IACd,CAAC,WAAW,KAAK,CAAC;AAErB,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAACA;EACC,KAAK;EACM;EACX,WAAW;EACX,UAAU;EACV,WAAW;EACN;EACL,KAAK;EACL,OAAO;GACL,YAAY,YAAY,WAAW,aAAa;GAChD,cAAc;GACd,QAAQ;GACR,UAAU;GACV,SAAS,YAAY,eAAe,IAAI;GACxC,UAAU;GACV,OAAO;GACP,GAAG;GACJ;EACD,SAAS;EACT,OAAO;GACP;IAGL,WAAW,cAAc,UAAU,aAAa,UAAU,SAC5D;AAED,cAAc,cAAc;AAE5B,4BAAe"}
+{"version":3,"file":"index.mjs","names":["StreamMermaid","StaticMermaid"],"sources":["../../../src/Mermaid/SyntaxMermaid/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport type { SyntaxMermaidProps } from '../type';\nimport StaticMermaid from './StaticMermaid';\nimport StreamMermaid from './StreamMermaid';\nimport { variants } from './style';\n\nconst SyntaxMermaid = memo<SyntaxMermaidProps>(\n  ({\n    animated,\n    children,\n    className,\n    fallbackClassName,\n    ref,\n    style,\n    theme: customTheme,\n    variant = 'borderless',\n  }) => {\n    const isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : customTheme;\n\n    const mermaidClassName = cx(\n      variants({ animated, mermaid: true, showBackground, variant }),\n      className,\n    );\n    const fallback = cx(\n      variants({ animated, mermaid: false, showBackground, variant }),\n      fallbackClassName,\n    );\n\n    if (animated) {\n      return (\n        <StreamMermaid\n          className={mermaidClassName}\n          fallbackClassName={fallback}\n          ref={ref}\n          style={style}\n          theme={resolvedTheme}\n          variant={variant}\n        >\n          {children}\n        </StreamMermaid>\n      );\n    }\n\n    return (\n      <StaticMermaid\n        className={mermaidClassName}\n        fallbackClassName={fallback}\n        ref={ref}\n        style={style}\n        theme={resolvedTheme}\n        variant={variant}\n      >\n        {children}\n      </StaticMermaid>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.animated === nextProps.animated,\n);\n\nSyntaxMermaid.displayName = 'SyntaxMermaid';\n\nexport default SyntaxMermaid;\n"],"mappings":";;;;;;;;;;AAUA,MAAM,gBAAgB,MACnB,EACC,UACA,UACA,WACA,mBACA,KACA,OACA,OAAO,aACP,UAAU,mBACN;CACJ,MAAM,iBAAiB,gBAAgB,gBAAgB,CAAC;CACxD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,SAAY;CAEnD,MAAM,mBAAmB,GACvB,SAAS;EAAE;EAAU,SAAS;EAAM;EAAgB;EAAS,CAAC,EAC9D,UACD;CACD,MAAM,WAAW,GACf,SAAS;EAAE;EAAU,SAAS;EAAO;EAAgB;EAAS,CAAC,EAC/D,kBACD;AAED,KAAI,SACF,QACE,oBAACA;EACC,WAAW;EACX,mBAAmB;EACd;EACE;EACP,OAAO;EACE;EAER;GACa;AAIpB,QACE,oBAACC;EACC,WAAW;EACX,mBAAmB;EACd;EACE;EACP,OAAO;EACE;EAER;GACa;IAGnB,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,SACjF;AAED,cAAc,cAAc;AAE5B,4BAAe"}

package/es/Mermaid/SyntaxMermaid/style.mjs

@@ -0,0 +1,80 @@
+import { createStaticStyles, cx, keyframes } from "antd-style";
+import { cva } from "class-variance-authority";
+
+//#region src/Mermaid/SyntaxMermaid/style.ts
+const fadeIn = keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
+	return {
+		animated: css$1`
+      img {
+        opacity: 1;
+        animation: ${fadeIn} 0.5s ease-in-out;
+      }
+    `,
+		mermaid: cx("ant-mermaid-mermaid", css$1`
+        img {
+          display: block;
+          width: 100%;
+          height: auto;
+        }
+      `),
+		noBackground: css$1`
+      img {
+        background: transparent !important;
+      }
+    `,
+		noPadding: css$1`
+      padding: 0;
+    `,
+		padding: css$1`
+      padding: 16px;
+    `,
+		root: css$1`
+      direction: ltr;
+      margin: 0;
+      padding: 0;
+      text-align: start;
+    `,
+		unmermaid: css$1`
+      color: ${cssVar$1.colorTextDescription};
+    `
+	};
+});
+const variants = cva(styles.root, {
+	defaultVariants: {
+		animated: false,
+		mermaid: true,
+		showBackground: false,
+		variant: "borderless"
+	},
+	variants: {
+		mermaid: {
+			false: styles.unmermaid,
+			true: styles.mermaid
+		},
+		showBackground: {
+			false: styles.noBackground,
+			true: null
+		},
+		animated: {
+			true: styles.animated,
+			false: null
+		},
+		variant: {
+			filled: styles.padding,
+			outlined: styles.padding,
+			borderless: styles.noPadding
+		}
+	}
+});
+
+//#endregion
+export { variants };
+//# sourceMappingURL=style.mjs.map

package/es/Mermaid/SyntaxMermaid/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/Mermaid/SyntaxMermaid/style.ts"],"sourcesContent":["import { createStaticStyles, cx, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst fadeIn = keyframes`\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    animated: css`\n      img {\n        opacity: 1;\n        animation: ${fadeIn} 0.5s ease-in-out;\n      }\n    `,\n\n    mermaid: cx(\n      'ant-mermaid-mermaid',\n      css`\n        img {\n          display: block;\n          width: 100%;\n          height: auto;\n        }\n      `,\n    ),\n\n    noBackground: css`\n      img {\n        background: transparent !important;\n      }\n    `,\n\n    noPadding: css`\n      padding: 0;\n    `,\n\n    padding: css`\n      padding: 16px;\n    `,\n\n    root: css`\n      direction: ltr;\n      margin: 0;\n      padding: 0;\n      text-align: start;\n    `,\n\n    unmermaid: css`\n      color: ${cssVar.colorTextDescription};\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    animated: false,\n    mermaid: true,\n    showBackground: false,\n    variant: 'borderless',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    mermaid: {\n      false: styles.unmermaid,\n      true: styles.mermaid,\n    },\n    showBackground: {\n      false: styles.noBackground,\n      true: null,\n    },\n    animated: {\n      true: styles.animated,\n      false: null,\n    },\n    variant: {\n      filled: styles.padding,\n      outlined: styles.padding,\n      borderless: styles.noPadding,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;AAGA,MAAM,SAAS,SAAS;;;;;;;;AASxB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,UAAU,KAAG;;;qBAGI,OAAO;;;EAIxB,SAAS,GACP,uBACA,KAAG;;;;;;QAOJ;EAED,cAAc,KAAG;;;;;EAMjB,WAAW,KAAG;;;EAId,SAAS,KAAG;;;EAIZ,MAAM,KAAG;;;;;;EAOT,WAAW,KAAG;eACHA,SAAO,qBAAqB;;EAExC;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,UAAU;EACV,SAAS;EACT,gBAAgB;EAChB,SAAS;EACV;CAED,UAAU;EACR,SAAS;GACP,OAAO,OAAO;GACd,MAAM,OAAO;GACd;EACD,gBAAgB;GACd,OAAO,OAAO;GACd,MAAM;GACP;EACD,UAAU;GACR,MAAM,OAAO;GACb,OAAO;GACR;EACD,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACF;CAEF,CAAC"}

package/es/Mermaid/type.d.mts

@@ -6,9 +6,10 @@ import { MermaidConfig } from "mermaid/dist/config.type";
 
 //#region src/Mermaid/type.d.ts
 interface SyntaxMermaidProps {
+  animated?: boolean;
   children: string;
   className?: string;
-  enablePanZoom?: MermaidProps['enablePanZoom'];
+  fallbackClassName?: string;
   ref?: Ref<HTMLDivElement>;
   style?: CSSProperties;
   theme?: MermaidProps['theme'];
@@ -22,6 +23,7 @@ interface MermaidProps extends DivProps {
     getContent: () => string;
     originalNode: ReactNode;
   }) => ReactNode;
+  animated?: boolean;
   bodyRender?: (props: {
     content: string;
     originalNode: ReactNode;
@@ -34,7 +36,6 @@ interface MermaidProps extends DivProps {
   };
   copyable?: boolean;
   defaultExpand?: boolean;
-  enablePanZoom?: boolean;
   fileName?: string;
   fullFeatured?: boolean;
   language?: string;

package/es/Modal/Modal.d.mts

@@ -1,8 +1,8 @@
 import { ModalProps } from "./type.mjs";
-import * as react27 from "react";
+import * as react46 from "react";
 
 //#region src/Modal/Modal.d.ts
-declare const Modal: react27.NamedExoticComponent<ModalProps>;
+declare const Modal: react46.NamedExoticComponent<ModalProps>;
 //#endregion
 export { Modal };
 //# sourceMappingURL=Modal.d.mts.map

package/es/Modal/Modal.mjs

@@ -2,26 +2,25 @@
 
 import Icon_default from "../Icon/Icon.mjs";
 import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button, ConfigProvider, Drawer, Modal } from "antd";
-import { useResponsive } from "antd-style";
+import { cssVar, cx, useResponsive } from "antd-style";
 import { Maximize2, Minimize2, X } from "lucide-react";
 
 //#region src/Modal/Modal.tsx
 const Modal$1 = memo(({ panelRef, allowFullscreen, children, title = " ", className, classNames, width = 700, onCancel, open, destroyOnHidden, paddings, height = "75dvh", enableResponsive = true, footer, styles: customStyles, okText, onOk, cancelText, okButtonProps, cancelButtonProps, confirmLoading, ...rest }) => {
 	const [fullscreen, setFullscreen] = useState(false);
 	const { mobile } = useResponsive();
-	const { styles, cx: cx$1, theme } = useStyles();
 	const hideFooter = footer === false || footer === null;
 	if (enableResponsive && mobile) return /* @__PURE__ */ jsx(ConfigProvider, {
-		theme: { token: { colorBgElevated: theme.colorBgContainer } },
+		theme: { token: { colorBgElevated: cssVar.colorBgContainer } },
 		children: /* @__PURE__ */ jsx(Drawer, {
-			className: cx$1(styles.drawerContent, className),
+			className: cx(styles.drawerContent, className),
 			classNames: typeof classNames === "function" ? classNames : {
 				...classNames,
-				wrapper: cx$1(styles.wrap, classNames?.wrapper)
+				wrapper: cx(styles.wrap, classNames?.wrapper)
 			},
 			closeIcon: /* @__PURE__ */ jsx(ActionIcon_default, { icon: X }),
 			destroyOnHidden,
@@ -65,7 +64,7 @@ const Modal$1 = memo(({ panelRef, allowFullscreen, children, title = " ", classN
 		})
 	});
 	return /* @__PURE__ */ jsx(ConfigProvider, {
-		theme: { token: { colorBgElevated: theme.colorBgContainer } },
+		theme: { token: { colorBgElevated: cssVar.colorBgContainer } },
 		children: /* @__PURE__ */ jsx(Modal, {
 			cancelButtonProps: {
 				color: "default",
@@ -73,10 +72,10 @@ const Modal$1 = memo(({ panelRef, allowFullscreen, children, title = " ", classN
 				...cancelButtonProps
 			},
 			cancelText,
-			className: cx$1(styles.content, className),
+			className: cx(styles.content, className),
 			classNames: typeof classNames === "function" ? classNames : {
 				...classNames,
-				wrapper: cx$1(styles.wrap, classNames?.wrapper)
+				wrapper: cx(styles.wrap, classNames?.wrapper)
 			},
 			closable: true,
 			closeIcon: /* @__PURE__ */ jsx(Icon_default, {