@jinmi/ui 0.0.0-stage → 6.0.2

package/es/Mermaid/FullFeatured.mjs

@@ -0,0 +1,116 @@
+"use client";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Text from "../Text/Text.mjs";
+import { stopPropagation } from "../utils/dom.mjs";
+import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
+import MaterialFileTypeIcon from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
+import CopyButton from "../CopyButton/CopyButton.mjs";
+import { bodyVariants, headerVariants, variants } from "../Highlighter/style.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ChevronDown, ChevronRight } from "lucide-react";
+//#region src/Mermaid/FullFeatured.tsx
+const MermaidHeaderLanguage = memo(({ fileName, language, showLanguage }) => {
+	if (!showLanguage) return null;
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		className: "language-title",
+		flex: 1,
+		gap: 4,
+		justify: "flex-start",
+		paddingInline: 8,
+		children: [/* @__PURE__ */ jsx(MaterialFileTypeIcon, {
+			fallbackUnknownType: false,
+			filename: fileName || language,
+			size: 18,
+			type: "file",
+			variant: "raw"
+		}), /* @__PURE__ */ jsx(Text, {
+			ellipsis: true,
+			fontSize: 13,
+			children: fileName || "Mermaid"
+		})]
+	});
+}, (prev, next) => prev.fileName === next.fileName && prev.language === next.language && prev.showLanguage === next.showLanguage);
+const MermaidFullFeatured = memo(({ showLanguage, styles: customStyles, classNames, content, children, className, copyable, actionsRender, style, variant, shadow, language = "mermaid", fileName, defaultExpand = true, ...rest }) => {
+	const [expand, setExpand] = useState(defaultExpand);
+	const contentRef = useRef(content);
+	useEffect(() => {
+		contentRef.current = content;
+	}, [content]);
+	const getContent = useCallback(() => contentRef.current, []);
+	const originalActions = useMemo(() => {
+		if (!copyable) return null;
+		return /* @__PURE__ */ jsx(CopyButton, {
+			content: getContent,
+			size: "small"
+		});
+	}, [copyable, getContent]);
+	const actions = useMemo(() => {
+		if (!actionsRender) return originalActions;
+		return actionsRender({
+			actionIconSize: "small",
+			content,
+			getContent,
+			originalNode: originalActions
+		});
+	}, [
+		actionsRender,
+		content,
+		getContent,
+		originalActions
+	]);
+	const handleToggleExpand = useCallback(() => {
+		setExpand((prev) => !prev);
+	}, []);
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className: cx(variants({
+			shadow,
+			variant
+		}), className),
+		"data-code-type": "mermaid",
+		style,
+		...rest,
+		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
+			horizontal: true,
+			align: "center",
+			className: cx(headerVariants({ variant }), classNames?.header),
+			justify: "space-between",
+			style: customStyles?.header,
+			onClick: handleToggleExpand,
+			children: [/* @__PURE__ */ jsx(MermaidHeaderLanguage, {
+				fileName,
+				language,
+				showLanguage
+			}), /* @__PURE__ */ jsxs(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				flex: "none",
+				gap: 4,
+				onClick: stopPropagation,
+				children: [/* @__PURE__ */ jsx(FlexBasic_default, {
+					horizontal: true,
+					align: "center",
+					className: "panel-actions",
+					flex: "none",
+					gap: 4,
+					children: actions
+				}), /* @__PURE__ */ jsx(ActionIcon, {
+					icon: expand ? ChevronDown : ChevronRight,
+					size: "small",
+					onClick: handleToggleExpand
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(FlexBasic_default, {
+			className: cx(bodyVariants({ expand }), classNames?.body),
+			style: customStyles?.body,
+			children
+		})]
+	});
+});
+//#endregion
+export { MermaidFullFeatured, MermaidFullFeatured as default };
+
+//# sourceMappingURL=FullFeatured.mjs.map

package/es/Mermaid/FullFeatured.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Mermaid/FullFeatured.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { ChevronDown, ChevronRight } from 'lucide-react';\r\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\n\r\nimport ActionIcon from '@/base-ui/ActionIcon';\r\nimport CopyButton from '@/CopyButton';\r\nimport { Flexbox } from '@/Flex';\r\nimport { bodyVariants, headerVariants, variants } from '@/Highlighter/style';\r\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\r\nimport Text from '@/Text';\r\nimport { stopPropagation } from '@/utils/dom';\r\n\r\nimport { type MermaidProps } from './type';\r\n\r\nconst MermaidHeaderLanguage = memo(\r\n  ({\r\n    fileName,\r\n    language,\r\n    showLanguage,\r\n  }: {\r\n    fileName?: string;\r\n    language: string;\r\n    showLanguage?: boolean;\r\n  }) => {\r\n    if (!showLanguage) return null;\r\n\r\n    return (\r\n      <Flexbox\r\n        horizontal\r\n        align={'center'}\r\n        className={'language-title'}\r\n        flex={1}\r\n        gap={4}\r\n        justify={'flex-start'}\r\n        paddingInline={8}\r\n      >\r\n        <MaterialFileTypeIcon\r\n          fallbackUnknownType={false}\r\n          filename={fileName || language}\r\n          size={18}\r\n          type={'file'}\r\n          variant={'raw'}\r\n        />\r\n\r\n        <Text ellipsis fontSize={13}>\r\n          {fileName || 'Mermaid'}\r\n        </Text>\r\n      </Flexbox>\r\n    );\r\n  },\r\n  (prev, next) =>\r\n    prev.fileName === next.fileName &&\r\n    prev.language === next.language &&\r\n    prev.showLanguage === next.showLanguage,\r\n);\r\n\r\nexport interface MermaidFullFeaturedProps extends Omit<MermaidProps, 'children'> {\r\n  children: ReactNode;\r\n  content: string;\r\n}\r\n\r\nexport const MermaidFullFeatured = memo<MermaidFullFeaturedProps>(\r\n  ({\r\n    showLanguage,\r\n    styles: customStyles,\r\n    classNames,\r\n    content,\r\n    children,\r\n    className,\r\n    copyable,\r\n    actionsRender,\r\n    style,\r\n    variant,\r\n    shadow,\r\n    language = 'mermaid',\r\n    fileName,\r\n    defaultExpand = true,\r\n    ...rest\r\n  }) => {\r\n    const [expand, setExpand] = useState(defaultExpand);\r\n    const contentRef = useRef(content);\r\n\r\n    useEffect(() => {\r\n      contentRef.current = content;\r\n    }, [content]);\r\n\r\n    const getContent = useCallback(() => contentRef.current, []);\r\n\r\n    const originalActions = useMemo(() => {\r\n      if (!copyable) return null;\r\n      return <CopyButton content={getContent} size={'small'} />;\r\n    }, [copyable, getContent]);\r\n\r\n    const actions = useMemo(() => {\r\n      if (!actionsRender) return originalActions;\r\n      return actionsRender({\r\n        actionIconSize: 'small',\r\n        content,\r\n        getContent,\r\n        originalNode: originalActions,\r\n      });\r\n    }, [actionsRender, content, getContent, originalActions]);\r\n\r\n    const handleToggleExpand = useCallback(() => {\r\n      setExpand((prev) => !prev);\r\n    }, []);\r\n\r\n    return (\r\n      <Flexbox\r\n        className={cx(variants({ shadow, variant }), className)}\r\n        data-code-type=\"mermaid\"\r\n        style={style}\r\n        {...rest}\r\n      >\r\n        <Flexbox\r\n          horizontal\r\n          align={'center'}\r\n          className={cx(headerVariants({ variant }), classNames?.header)}\r\n          justify={'space-between'}\r\n          style={customStyles?.header}\r\n          onClick={handleToggleExpand}\r\n        >\r\n          <MermaidHeaderLanguage\r\n            fileName={fileName}\r\n            language={language}\r\n            showLanguage={showLanguage}\r\n          />\r\n          <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\r\n            <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\r\n              {actions}\r\n            </Flexbox>\r\n            <ActionIcon\r\n              icon={expand ? ChevronDown : ChevronRight}\r\n              size={'small'}\r\n              onClick={handleToggleExpand}\r\n            />\r\n          </Flexbox>\r\n        </Flexbox>\r\n        <Flexbox\r\n          className={cx(bodyVariants({ expand }), classNames?.body)}\r\n          style={customStyles?.body}\r\n        >\r\n          {children}\r\n        </Flexbox>\r\n      </Flexbox>\r\n    );\r\n  },\r\n);\r\n\r\nexport default MermaidFullFeatured;\r\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,wBAAwB,MAC3B,EACC,UACA,UACA,mBAKI;CACJ,IAAI,CAAC,cAAc,OAAO;CAE1B,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW;EACX,MAAM;EACN,KAAK;EACL,SAAS;EACT,eAAe;EAPjB,UAAA,CASE,oBAAC,sBAAD;GACE,qBAAqB;GACrB,UAAU,YAAY;GACtB,MAAM;GACN,MAAM;GACN,SAAS;EACV,CAAA,GAED,oBAAC,MAAD;GAAM,UAAA;GAAS,UAAU;GACtB,UAAA,YAAY;EACT,CAAA,CACC;;AAEb,IACC,MAAM,SACL,KAAK,aAAa,KAAK,YACvB,KAAK,aAAa,KAAK,YACvB,KAAK,iBAAiB,KAAK,YAC/B;AAOA,MAAa,sBAAsB,MAChC,EACC,cACA,QAAQ,cACR,YACA,SACA,UACA,WACA,UACA,eACA,OACA,SACA,QACA,WAAW,WACX,UACA,gBAAgB,MAChB,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,aAAa;CAClD,MAAM,aAAa,OAAO,OAAO;CAEjC,gBAAgB;EACd,WAAW,UAAU;CACvB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,aAAa,kBAAkB,WAAW,SAAS,CAAC,CAAC;CAE3D,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UAAU,OAAO;EACtB,OAAO,oBAAC,YAAD;GAAY,SAAS;GAAY,MAAM;EAAU,CAAA;CAC1D,GAAG,CAAC,UAAU,UAAU,CAAC;CAEzB,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB,gBAAgB;GAChB;GACA;GACA,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAe;EAAS;EAAY;CAAe,CAAC;CAExD,MAAM,qBAAqB,kBAAkB;EAC3C,WAAW,SAAS,CAAC,IAAI;CAC3B,GAAG,CAAC,CAAC;CAEL,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACtD,kBAAe;EACR;EACP,GAAI;EAJN,UAAA,CAME,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,YAAY,MAAM;GAC7D,SAAS;GACT,OAAO,cAAc;GACrB,SAAS;GANX,UAAA,CAQE,oBAAC,uBAAD;IACY;IACA;IACI;GACf,CAAA,GACD,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,MAAM;IAAQ,KAAK;IAAG,SAAS;IAApE,UAAA,CACE,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,WAAW;KAAiB,MAAM;KAAQ,KAAK;KACjF,UAAA;IACM,CAAA,GACT,oBAAC,YAAD;KACE,MAAM,SAAS,cAAc;KAC7B,MAAM;KACN,SAAS;IACV,CAAA,CACM;GACF,CAAA,CAAA;EACT,CAAA,GAAA,oBAACA,mBAAD;GACE,WAAW,GAAG,aAAa,EAAE,OAAO,CAAC,GAAG,YAAY,IAAI;GACxD,OAAO,cAAc;GAEpB;EACM,CAAA,CACF;;AAEb,CACF"}

package/es/Mermaid/Mermaid.d.mts

@@ -0,0 +1,6 @@
+import { MermaidProps } from "./type.mjs";
+//#region src/Mermaid/Mermaid.d.ts
+declare const Mermaid: import("react").NamedExoticComponent<MermaidProps>;
+//#endregion
+export { Mermaid as default };
+//# sourceMappingURL=Mermaid.d.mts.map

package/es/Mermaid/Mermaid.mjs

@@ -0,0 +1,120 @@
+"use client";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Tag from "../base-ui/Tag/Tag.mjs";
+import CopyButton from "../CopyButton/CopyButton.mjs";
+import { styles, variants } from "../Highlighter/style.mjs";
+import { MermaidFullFeatured } from "./FullFeatured.mjs";
+import SyntaxMermaid from "./SyntaxMermaid/index.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/Mermaid/Mermaid.tsx
+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(() => {
+		copyContentRef.current = tirmedChildren;
+	}, [tirmedChildren]);
+	const getCopyContent = useCallback(() => copyContentRef.current, []);
+	const originalActions = useMemo(() => {
+		if (!copyable) return null;
+		return /* @__PURE__ */ jsx(CopyButton, {
+			content: getCopyContent,
+			size: actionIconSize || {
+				blockSize: 28,
+				size: 16
+			}
+		});
+	}, [
+		actionIconSize,
+		copyable,
+		getCopyContent
+	]);
+	const actions = useMemo(() => {
+		if (!actionsRender) return originalActions;
+		return actionsRender({
+			actionIconSize,
+			content: tirmedChildren,
+			getContent: getCopyContent,
+			originalNode: originalActions
+		});
+	}, [
+		actionIconSize,
+		actionsRender,
+		getCopyContent,
+		originalActions,
+		tirmedChildren
+	]);
+	const defaultBody = useMemo(() => /* @__PURE__ */ jsx(SyntaxMermaid, {
+		animated,
+		className: classNames?.content,
+		style: customStyles?.content,
+		theme,
+		variant,
+		children: tirmedChildren
+	}), [
+		animated,
+		theme,
+		tirmedChildren,
+		variant,
+		classNames?.content,
+		customStyles?.content
+	]);
+	const body = useMemo(() => {
+		if (!bodyRender) return defaultBody;
+		return bodyRender({
+			content: tirmedChildren,
+			originalNode: defaultBody
+		});
+	}, [
+		bodyRender,
+		defaultBody,
+		tirmedChildren
+	]);
+	if (fullFeatured) return /* @__PURE__ */ jsx(MermaidFullFeatured, {
+		actionsRender,
+		className,
+		classNames,
+		content: tirmedChildren,
+		copyable,
+		defaultExpand,
+		fileName,
+		language,
+		shadow,
+		showLanguage,
+		style,
+		styles: customStyles,
+		variant,
+		...rest,
+		children: body
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(variants({
+			shadow,
+			variant
+		}), className),
+		"data-code-type": "mermaid",
+		style,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				className: styles.actions,
+				flex: "none",
+				gap: 4,
+				children: actions
+			}),
+			showLanguage && /* @__PURE__ */ jsx(Tag, {
+				className: styles.lang,
+				children: language.toLowerCase()
+			}),
+			body
+		]
+	});
+});
+Mermaid.displayName = "Mermaid";
+//#endregion
+export { Mermaid as default };
+
+//# sourceMappingURL=Mermaid.mjs.map

package/es/Mermaid/Mermaid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mermaid.mjs","names":["FullFeatured","Flexbox"],"sources":["../../src/Mermaid/Mermaid.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { memo, useCallback, useEffect, useMemo, useRef } from 'react';\r\n\r\nimport Tag from '@/base-ui/Tag';\r\nimport CopyButton from '@/CopyButton';\r\nimport { Flexbox } from '@/Flex';\r\nimport { styles, variants } from '@/Highlighter/style';\r\n\r\nimport FullFeatured from './FullFeatured';\r\nimport SyntaxMermaid from './SyntaxMermaid';\r\nimport type { MermaidProps } from './type';\r\n\r\nconst Mermaid = memo<MermaidProps>(\r\n  ({\r\n    actionIconSize,\r\n    animated,\r\n    bodyRender,\r\n    children,\r\n    classNames,\r\n    className,\r\n    copyable = true,\r\n    defaultExpand = true,\r\n    fileName,\r\n    fullFeatured,\r\n    language = 'mermaid',\r\n    actionsRender,\r\n    shadow,\r\n    showLanguage = true,\r\n    style,\r\n    styles: customStyles,\r\n    theme,\r\n    variant = 'filled',\r\n    ...rest\r\n  }) => {\r\n    const tirmedChildren = children.trim();\r\n    const copyContentRef = useRef(tirmedChildren);\r\n\r\n    useEffect(() => {\r\n      copyContentRef.current = tirmedChildren;\r\n    }, [tirmedChildren]);\r\n\r\n    const getCopyContent = useCallback(() => copyContentRef.current, []);\r\n\r\n    const originalActions = useMemo(() => {\r\n      if (!copyable) return null;\r\n      return (\r\n        <CopyButton content={getCopyContent} size={actionIconSize || { blockSize: 28, size: 16 }} />\r\n      );\r\n    }, [actionIconSize, copyable, getCopyContent]);\r\n\r\n    const actions = useMemo(() => {\r\n      if (!actionsRender) return originalActions;\r\n      return actionsRender({\r\n        actionIconSize,\r\n        content: tirmedChildren,\r\n        getContent: getCopyContent,\r\n        originalNode: originalActions,\r\n      });\r\n    }, [actionIconSize, actionsRender, getCopyContent, originalActions, tirmedChildren]);\r\n\r\n    const defaultBody = useMemo(\r\n      () => (\r\n        <SyntaxMermaid\r\n          animated={animated}\r\n          className={classNames?.content}\r\n          style={customStyles?.content}\r\n          theme={theme}\r\n          variant={variant}\r\n        >\r\n          {tirmedChildren}\r\n        </SyntaxMermaid>\r\n      ),\r\n      [animated, theme, tirmedChildren, variant, classNames?.content, customStyles?.content],\r\n    );\r\n\r\n    const body = useMemo(() => {\r\n      if (!bodyRender) return defaultBody;\r\n      return bodyRender({ content: tirmedChildren, originalNode: defaultBody });\r\n    }, [bodyRender, defaultBody, tirmedChildren]);\r\n\r\n    if (fullFeatured)\r\n      return (\r\n        <FullFeatured\r\n          actionsRender={actionsRender}\r\n          className={className}\r\n          classNames={classNames}\r\n          content={tirmedChildren}\r\n          copyable={copyable}\r\n          defaultExpand={defaultExpand}\r\n          fileName={fileName}\r\n          language={language}\r\n          shadow={shadow}\r\n          showLanguage={showLanguage}\r\n          style={style}\r\n          styles={customStyles}\r\n          variant={variant}\r\n          {...rest}\r\n        >\r\n          {body}\r\n        </FullFeatured>\r\n      );\r\n\r\n    return (\r\n      <div\r\n        className={cx(variants({ shadow, variant }), className)}\r\n        data-code-type=\"mermaid\"\r\n        style={style}\r\n        {...rest}\r\n      >\r\n        <Flexbox horizontal align={'center'} className={styles.actions} flex={'none'} gap={4}>\r\n          {actions}\r\n        </Flexbox>\r\n        {showLanguage && <Tag className={styles.lang}>{language.toLowerCase()}</Tag>}\r\n        {body}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nMermaid.displayName = 'Mermaid';\r\n\r\nexport default Mermaid;\r\n\r\nexport { type MermaidProps } from './type';\r\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,KAAK;CACrC,MAAM,iBAAiB,OAAO,cAAc;CAE5C,gBAAgB;EACd,eAAe,UAAU;CAC3B,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,iBAAiB,kBAAkB,eAAe,SAAS,CAAC,CAAC;CAEnE,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UAAU,OAAO;EACtB,OACE,oBAAC,YAAD;GAAY,SAAS;GAAgB,MAAM,kBAAkB;IAAE,WAAW;IAAI,MAAM;GAAG;EAAI,CAAA;CAE/F,GAAG;EAAC;EAAgB;EAAU;CAAc,CAAC;CAE7C,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB;GACA,SAAS;GACT,YAAY;GACZ,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAgB;EAAe;EAAgB;EAAiB;CAAc,CAAC;CAEnF,MAAM,cAAc,cAEhB,oBAAC,eAAD;EACY;EACV,WAAW,YAAY;EACvB,OAAO,cAAc;EACd;EACE;EAER,UAAA;CACY,CAAA,GAEjB;EAAC;EAAU;EAAO;EAAgB;EAAS,YAAY;EAAS,cAAc;CAAO,CACvF;CAEA,MAAM,OAAO,cAAc;EACzB,IAAI,CAAC,YAAY,OAAO;EACxB,OAAO,WAAW;GAAE,SAAS;GAAgB,cAAc;EAAY,CAAC;CAC1E,GAAG;EAAC;EAAY;EAAa;CAAc,CAAC;CAE5C,IAAI,cACF,OACE,oBAACA,qBAAD;EACiB;EACJ;EACC;EACZ,SAAS;EACC;EACK;EACL;EACA;EACF;EACM;EACP;EACP,QAAQ;EACC;EACT,GAAI;EAEH,UAAA;CACW,CAAA;CAGlB,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACtD,kBAAe;EACR;EACP,GAAI;EAJN,UAAA;GAME,oBAACC,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,WAAW,OAAO;IAAS,MAAM;IAAQ,KAAK;IAChF,UAAA;GACM,CAAA;GACR,gBAAgB,oBAAC,KAAD;IAAK,WAAW,OAAO;IAAO,UAAA,SAAS,YAAY;GAAO,CAAA;GAC1E;EACE;;AAET,CACF;AAEA,QAAQ,cAAc"}

package/es/Mermaid/SyntaxMermaid/MermaidFallback.mjs

@@ -0,0 +1,35 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Text from "../../Text/Text.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Mermaid/SyntaxMermaid/MermaidFallback.tsx
+const MermaidFallback = memo(({ children, className, message, style }) => /* @__PURE__ */ jsx("div", {
+	className,
+	style,
+	children: /* @__PURE__ */ jsxs(FlexBasic_default, {
+		gap: 8,
+		padding: 16,
+		children: [/* @__PURE__ */ jsx(Text, {
+			fontSize: 12,
+			type: "secondary",
+			children: message
+		}), /* @__PURE__ */ jsx(Text, {
+			code: true,
+			as: "pre",
+			fontSize: 12,
+			style: {
+				margin: 0,
+				overflowX: "auto",
+				whiteSpace: "pre-wrap",
+				wordBreak: "break-word"
+			},
+			children
+		})]
+	})
+}));
+MermaidFallback.displayName = "MermaidFallback";
+//#endregion
+export { MermaidFallback as default };
+
+//# sourceMappingURL=MermaidFallback.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MermaidFallback.mjs","names":["Flexbox"],"sources":["../../../src/Mermaid/SyntaxMermaid/MermaidFallback.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { memo } from 'react';\r\n\r\nimport { Flexbox } from '@/Flex';\r\nimport Text from '@/Text';\r\n\r\nimport { type SyntaxMermaidProps } from '../type';\r\n\r\ninterface MermaidFallbackProps {\r\n  children: string;\r\n  className?: string;\r\n  message: string;\r\n  style?: SyntaxMermaidProps['style'];\r\n}\r\n\r\nconst MermaidFallback = memo<MermaidFallbackProps>(({ children, className, message, style }) => (\r\n  <div className={className} style={style}>\r\n    <Flexbox gap={8} padding={16}>\r\n      <Text fontSize={12} type={'secondary'}>\r\n        {message}\r\n      </Text>\r\n      <Text\r\n        code\r\n        as={'pre'}\r\n        fontSize={12}\r\n        style={{ margin: 0, overflowX: 'auto', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}\r\n      >\r\n        {children}\r\n      </Text>\r\n    </Flexbox>\r\n  </div>\r\n));\r\n\r\nMermaidFallback.displayName = 'MermaidFallback';\r\n\r\nexport default MermaidFallback;\r\n"],"mappings":";;;;;;AAgBA,MAAM,kBAAkB,MAA4B,EAAE,UAAU,WAAW,SAAS,YAClF,oBAAC,OAAD;CAAgB;CAAkB;CAChC,UAAA,qBAACA,mBAAD;EAAS,KAAK;EAAG,SAAS;EAA1B,UAAA,CACE,oBAAC,MAAD;GAAM,UAAU;GAAI,MAAM;GACvB,UAAA;EACG,CAAA,GACN,oBAAC,MAAD;GACE,MAAA;GACA,IAAI;GACJ,UAAU;GACV,OAAO;IAAE,QAAQ;IAAG,WAAW;IAAQ,YAAY;IAAY,WAAW;GAAa;GAEtF;EACG,CAAA,CACC;;AACN,CAAA,CACN;AAED,gBAAgB,cAAc"}

package/es/Mermaid/SyntaxMermaid/MermaidSvg.mjs

@@ -0,0 +1,76 @@
+"use client";
+import { openPreview } from "../../Image/viewer/registry.mjs";
+import PreviewOutlet from "../../Image/viewer/PreviewOutlet.mjs";
+import { toStandaloneSvgString } from "./prepareInlineSvg.mjs";
+import { prepareMermaidSvgString } from "./prepareMermaidSvg.mjs";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Mermaid/SyntaxMermaid/MermaidSvg.tsx
+const anchorStyle = {
+	height: "100%",
+	insetBlockStart: 0,
+	insetInlineStart: 0,
+	pointerEvents: "none",
+	position: "absolute",
+	visibility: "hidden",
+	width: "100%"
+};
+const MermaidSvg = memo(({ className, ref, style, svg }) => {
+	const containerRef = useRef(null);
+	const anchorRef = useRef(null);
+	const [previewUrl, setPreviewUrl] = useState();
+	useEffect(() => {
+		return () => {
+			if (previewUrl) URL.revokeObjectURL(previewUrl);
+		};
+	}, [previewUrl]);
+	const handleOpen = useCallback(() => {
+		const element = containerRef.current?.querySelector("svg");
+		const anchor = anchorRef.current;
+		if (!element || !anchor) return;
+		const standalone = prepareMermaidSvgString(toStandaloneSvgString(element));
+		const url = URL.createObjectURL(new Blob([standalone], { type: "image/svg+xml" }));
+		setPreviewUrl((previous) => {
+			if (previous) URL.revokeObjectURL(previous);
+			return url;
+		});
+		openPreview({
+			element: anchor,
+			options: {
+				autoZoomThreshold: 2,
+				defaultZoom: "auto",
+				maxScale: 8
+			},
+			src: url
+		});
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		ref,
+		style: {
+			position: "relative",
+			...style
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				dangerouslySetInnerHTML: { __html: svg },
+				ref: containerRef,
+				style: { cursor: "zoom-in" },
+				onClick: handleOpen
+			}),
+			/* @__PURE__ */ jsx("img", {
+				"aria-hidden": true,
+				alt: "",
+				ref: anchorRef,
+				src: previewUrl,
+				style: anchorStyle
+			}),
+			/* @__PURE__ */ jsx(PreviewOutlet, { elementRef: anchorRef })
+		]
+	});
+});
+MermaidSvg.displayName = "MermaidSvg";
+//#endregion
+export { MermaidSvg as default };
+
+//# sourceMappingURL=MermaidSvg.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MermaidSvg.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/MermaidSvg.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { memo, type Ref, useCallback, useEffect, useRef, useState } from 'react';\r\n\r\nimport { DEFAULT_AUTO_ZOOM_THRESHOLD, DEFAULT_MAX_SCALE } from '@/Image/viewer/geometry';\r\nimport PreviewOutlet from '@/Image/viewer/PreviewOutlet';\r\nimport { openPreview } from '@/Image/viewer/registry';\r\n\r\nimport { toStandaloneSvgString } from './prepareInlineSvg';\r\nimport { prepareMermaidSvgString } from './prepareMermaidSvg';\r\n\r\ninterface MermaidSvgProps {\r\n  className?: string;\r\n  ref?: Ref<HTMLDivElement>;\r\n  style?: React.CSSProperties;\r\n  svg: string;\r\n}\r\n\r\n// The viewer flies the image out of the element it was opened from, so the\r\n// diagram needs a real <img> to measure — hence a hidden anchor tracking the\r\n// diagram box rather than a display:none preview image.\r\nconst anchorStyle: React.CSSProperties = {\r\n  height: '100%',\r\n  insetBlockStart: 0,\r\n  insetInlineStart: 0,\r\n  pointerEvents: 'none',\r\n  position: 'absolute',\r\n  visibility: 'hidden',\r\n  width: '100%',\r\n};\r\n\r\nconst MermaidSvg = memo<MermaidSvgProps>(({ className, ref, style, svg }) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const anchorRef = useRef<HTMLImageElement>(null);\r\n  const [previewUrl, setPreviewUrl] = useState<string>();\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (previewUrl) URL.revokeObjectURL(previewUrl);\r\n    };\r\n  }, [previewUrl]);\r\n\r\n  // The preview copy is only built on demand: it has to bake in the resolved\r\n  // CSS variables and be XML-well-formed, neither of which the inline copy needs.\r\n  const handleOpen = useCallback(() => {\r\n    const element = containerRef.current?.querySelector('svg');\r\n    const anchor = anchorRef.current;\r\n    if (!element || !anchor) return;\r\n\r\n    const standalone = prepareMermaidSvgString(toStandaloneSvgString(element));\r\n    const url = URL.createObjectURL(new Blob([standalone], { type: 'image/svg+xml' }));\r\n    setPreviewUrl((previous) => {\r\n      if (previous) URL.revokeObjectURL(previous);\r\n      return url;\r\n    });\r\n\r\n    openPreview({\r\n      element: anchor,\r\n      options: {\r\n        autoZoomThreshold: DEFAULT_AUTO_ZOOM_THRESHOLD,\r\n        defaultZoom: 'auto',\r\n        maxScale: DEFAULT_MAX_SCALE,\r\n      },\r\n      src: url,\r\n    });\r\n  }, []);\r\n\r\n  return (\r\n    <div className={className} ref={ref} style={{ position: 'relative', ...style }}>\r\n      <div\r\n        dangerouslySetInnerHTML={{ __html: svg }}\r\n        ref={containerRef}\r\n        style={{ cursor: 'zoom-in' }}\r\n        onClick={handleOpen}\r\n      />\r\n      <img aria-hidden alt=\"\" ref={anchorRef} src={previewUrl} style={anchorStyle} />\r\n      <PreviewOutlet elementRef={anchorRef} />\r\n    </div>\r\n  );\r\n});\r\n\r\nMermaidSvg.displayName = 'MermaidSvg';\r\n\r\nexport default MermaidSvg;\r\n"],"mappings":";;;;;;;;AAqBA,MAAM,cAAmC;CACvC,QAAQ;CACR,iBAAiB;CACjB,kBAAkB;CAClB,eAAe;CACf,UAAU;CACV,YAAY;CACZ,OAAO;AACT;AAEA,MAAM,aAAa,MAAuB,EAAE,WAAW,KAAK,OAAO,UAAU;CAC3E,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,YAAY,OAAyB,IAAI;CAC/C,MAAM,CAAC,YAAY,iBAAiB,SAAiB;CAErD,gBAAgB;EACd,aAAa;GACX,IAAI,YAAY,IAAI,gBAAgB,UAAU;EAChD;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,aAAa,kBAAkB;EACnC,MAAM,UAAU,aAAa,SAAS,cAAc,KAAK;EACzD,MAAM,SAAS,UAAU;EACzB,IAAI,CAAC,WAAW,CAAC,QAAQ;EAEzB,MAAM,aAAa,wBAAwB,sBAAsB,OAAO,CAAC;EACzE,MAAM,MAAM,IAAI,gBAAgB,IAAI,KAAK,CAAC,UAAU,GAAG,EAAE,MAAM,gBAAgB,CAAC,CAAC;EACjF,eAAe,aAAa;GAC1B,IAAI,UAAU,IAAI,gBAAgB,QAAQ;GAC1C,OAAO;EACT,CAAC;EAED,YAAY;GACV,SAAS;GACT,SAAS;IACP,mBAAA;IACA,aAAa;IACb,UAAA;GACF;GACA,KAAK;EACP,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,OAAD;EAAgB;EAAgB;EAAK,OAAO;GAAE,UAAU;GAAY,GAAG;EAAM;EAA7E,UAAA;GACE,oBAAC,OAAD;IACE,yBAAyB,EAAE,QAAQ,IAAI;IACvC,KAAK;IACL,OAAO,EAAE,QAAQ,UAAU;IAC3B,SAAS;GACV,CAAA;GACD,oBAAC,OAAD;IAAK,eAAA;IAAY,KAAI;IAAG,KAAK;IAAW,KAAK;IAAY,OAAO;GAAc,CAAA;GAC9E,oBAAC,eAAD,EAAe,YAAY,UAAY,CAAA;EACpC;;AAET,CAAC;AAED,WAAW,cAAc"}

package/es/Mermaid/SyntaxMermaid/StaticMermaid.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { mermaidThemes } from "../const.mjs";
+import { useMermaid } from "../../hooks/useMermaid.mjs";
+import MermaidFallback from "./MermaidFallback.mjs";
+import MermaidSvg from "./MermaidSvg.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Mermaid/SyntaxMermaid/StaticMermaid.tsx
+const StaticMermaid = memo(({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {
+	const safeChildren = children ?? "";
+	const isDefaultTheme = customTheme === "jinmi-theme" || !customTheme;
+	const background = useMemo(() => {
+		if (isDefaultTheme) return;
+		return mermaidThemes.find((item) => item.id === customTheme)?.background;
+	}, [isDefaultTheme, customTheme]);
+	const { svg, error, loading } = useMermaid(safeChildren, { theme: isDefaultTheme ? void 0 : customTheme });
+	const containerStyle = {
+		background: variant === "filled" ? background : void 0,
+		margin: 0,
+		minWidth: 300,
+		padding: variant === "borderless" ? 0 : 16,
+		position: "relative",
+		width: "100%",
+		...style
+	};
+	if (error && !loading) return /* @__PURE__ */ jsx(MermaidFallback, {
+		className: fallbackClassName,
+		message: error,
+		style,
+		children: safeChildren
+	});
+	if (!svg) return /* @__PURE__ */ jsx("div", {
+		className: fallbackClassName,
+		style,
+		children: /* @__PURE__ */ jsx("div", {
+			style: { padding: 16 },
+			children: "Loading..."
+		})
+	});
+	return /* @__PURE__ */ jsx(MermaidSvg, {
+		className,
+		ref,
+		style: containerStyle,
+		svg
+	});
+});
+StaticMermaid.displayName = "StaticMermaid";
+//#endregion
+export { StaticMermaid as default };
+
+//# sourceMappingURL=StaticMermaid.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StaticMermaid.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/StaticMermaid.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { type Ref } from 'react';\r\nimport { memo, useMemo } from 'react';\r\n\r\nimport { useMermaid } from '@/hooks/useMermaid';\r\n\r\nimport { mermaidThemes } from '../const';\r\nimport { type SyntaxMermaidProps } from '../type';\r\nimport MermaidFallback from './MermaidFallback';\r\nimport MermaidSvg from './MermaidSvg';\r\n\r\ninterface StaticMermaidProps {\r\n  children: string;\r\n  className?: string;\r\n  fallbackClassName?: string;\r\n  ref?: Ref<HTMLDivElement>;\r\n  style?: SyntaxMermaidProps['style'];\r\n  theme?: SyntaxMermaidProps['theme'];\r\n  variant?: SyntaxMermaidProps['variant'];\r\n}\r\n\r\nconst StaticMermaid = memo<StaticMermaidProps>(\r\n  ({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {\r\n    const safeChildren = children ?? '';\r\n    const isDefaultTheme = customTheme === 'jinmi-theme' || !customTheme;\r\n\r\n    const background = useMemo(() => {\r\n      if (isDefaultTheme) return;\r\n      return mermaidThemes.find((item) => item.id === customTheme)?.background;\r\n    }, [isDefaultTheme, customTheme]);\r\n\r\n    const { svg, error, loading } = useMermaid(safeChildren, {\r\n      theme: isDefaultTheme ? undefined : customTheme,\r\n    });\r\n\r\n    const containerStyle = {\r\n      background: variant === 'filled' ? background : undefined,\r\n      margin: 0,\r\n      minWidth: 300,\r\n      padding: variant === 'borderless' ? 0 : 16,\r\n      position: 'relative' as const,\r\n      width: '100%',\r\n      ...style,\r\n    };\r\n\r\n    if (error && !loading) {\r\n      return (\r\n        <MermaidFallback className={fallbackClassName} message={error} style={style}>\r\n          {safeChildren}\r\n        </MermaidFallback>\r\n      );\r\n    }\r\n\r\n    if (!svg) {\r\n      return (\r\n        <div className={fallbackClassName} style={style}>\r\n          <div style={{ padding: 16 }}>Loading...</div>\r\n        </div>\r\n      );\r\n    }\r\n\r\n    return <MermaidSvg className={className} ref={ref} style={containerStyle} svg={svg} />;\r\n  },\r\n);\r\n\r\nStaticMermaid.displayName = 'StaticMermaid';\r\n\r\nexport default StaticMermaid;\r\n"],"mappings":";;;;;;;;AAsBA,MAAM,gBAAgB,MACnB,EAAE,UAAU,WAAW,mBAAmB,KAAK,OAAO,OAAO,aAAa,cAAc;CACvF,MAAM,eAAe,YAAY;CACjC,MAAM,iBAAiB,gBAAgB,iBAAiB,CAAC;CAEzD,MAAM,aAAa,cAAc;EAC/B,IAAI,gBAAgB;EACpB,OAAO,cAAc,MAAM,SAAS,KAAK,OAAO,WAAW,CAAC,EAAE;CAChE,GAAG,CAAC,gBAAgB,WAAW,CAAC;CAEhC,MAAM,EAAE,KAAK,OAAO,YAAY,WAAW,cAAc,EACvD,OAAO,iBAAiB,KAAA,IAAY,YACtC,CAAC;CAED,MAAM,iBAAiB;EACrB,YAAY,YAAY,WAAW,aAAa,KAAA;EAChD,QAAQ;EACR,UAAU;EACV,SAAS,YAAY,eAAe,IAAI;EACxC,UAAU;EACV,OAAO;EACP,GAAG;CACL;CAEA,IAAI,SAAS,CAAC,SACZ,OACE,oBAAC,iBAAD;EAAiB,WAAW;EAAmB,SAAS;EAAc;EACnE,UAAA;CACc,CAAA;CAIrB,IAAI,CAAC,KACH,OACE,oBAAC,OAAD;EAAK,WAAW;EAA0B;EACxC,UAAA,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,GAAG;GAAG,UAAA;EAAe,CAAA;CACzC,CAAA;CAIT,OAAO,oBAAC,YAAD;EAAuB;EAAgB;EAAK,OAAO;EAAqB;CAAM,CAAA;AACvF,CACF;AAEA,cAAc,cAAc"}

package/es/Mermaid/SyntaxMermaid/StreamMermaid.mjs

@@ -0,0 +1,54 @@
+"use client";
+import { mermaidThemes } from "../const.mjs";
+import MermaidFallback from "./MermaidFallback.mjs";
+import MermaidSvg from "./MermaidSvg.mjs";
+import { useStreamMermaid } from "../../hooks/useStreamMermaid.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Mermaid/SyntaxMermaid/StreamMermaid.tsx
+const StreamMermaid = memo(({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {
+	const safeChildren = children ?? "";
+	const isDefaultTheme = customTheme === "jinmi-theme" || !customTheme;
+	const background = useMemo(() => {
+		if (isDefaultTheme) return;
+		return mermaidThemes.find((item) => item.id === customTheme)?.background;
+	}, [isDefaultTheme, customTheme]);
+	const { svg, error, loading } = useStreamMermaid(safeChildren, {
+		enabled: true,
+		theme: isDefaultTheme ? void 0 : customTheme
+	});
+	const containerStyle = {
+		background: variant === "filled" ? background : void 0,
+		margin: 0,
+		minWidth: 300,
+		padding: variant === "borderless" ? 0 : 16,
+		position: "relative",
+		width: "100%",
+		...style
+	};
+	if (error && !loading) return /* @__PURE__ */ jsx(MermaidFallback, {
+		className: fallbackClassName,
+		message: error,
+		style,
+		children: safeChildren
+	});
+	if (!svg) return /* @__PURE__ */ jsx("div", {
+		className: fallbackClassName,
+		style,
+		children: /* @__PURE__ */ jsx("div", {
+			style: { padding: 16 },
+			children: "Rendering..."
+		})
+	});
+	return /* @__PURE__ */ jsx(MermaidSvg, {
+		className,
+		ref,
+		style: containerStyle,
+		svg
+	});
+});
+StreamMermaid.displayName = "StreamMermaid";
+//#endregion
+export { StreamMermaid as default };
+
+//# sourceMappingURL=StreamMermaid.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StreamMermaid.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/StreamMermaid.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { type Ref } from 'react';\r\nimport { memo, useMemo } from 'react';\r\n\r\nimport { useStreamMermaid } from '@/hooks/useStreamMermaid';\r\n\r\nimport { mermaidThemes } from '../const';\r\nimport { type SyntaxMermaidProps } from '../type';\r\nimport MermaidFallback from './MermaidFallback';\r\nimport MermaidSvg from './MermaidSvg';\r\n\r\ninterface StreamMermaidProps {\r\n  children: string;\r\n  className?: string;\r\n  fallbackClassName?: string;\r\n  ref?: Ref<HTMLDivElement>;\r\n  style?: SyntaxMermaidProps['style'];\r\n  theme?: SyntaxMermaidProps['theme'];\r\n  variant?: SyntaxMermaidProps['variant'];\r\n}\r\n\r\nconst StreamMermaid = memo<StreamMermaidProps>(\r\n  ({ children, className, fallbackClassName, ref, style, theme: customTheme, variant }) => {\r\n    const safeChildren = children ?? '';\r\n    const isDefaultTheme = customTheme === 'jinmi-theme' || !customTheme;\r\n\r\n    const background = useMemo(() => {\r\n      if (isDefaultTheme) return;\r\n      return mermaidThemes.find((item) => item.id === customTheme)?.background;\r\n    }, [isDefaultTheme, customTheme]);\r\n\r\n    const { svg, error, loading } = useStreamMermaid(safeChildren, {\r\n      enabled: true,\r\n      theme: isDefaultTheme ? undefined : customTheme,\r\n    });\r\n\r\n    const containerStyle = {\r\n      background: variant === 'filled' ? background : undefined,\r\n      margin: 0,\r\n      minWidth: 300,\r\n      padding: variant === 'borderless' ? 0 : 16,\r\n      position: 'relative' as const,\r\n      width: '100%',\r\n      ...style,\r\n    };\r\n\r\n    if (error && !loading) {\r\n      return (\r\n        <MermaidFallback className={fallbackClassName} message={error} style={style}>\r\n          {safeChildren}\r\n        </MermaidFallback>\r\n      );\r\n    }\r\n\r\n    if (!svg) {\r\n      return (\r\n        <div className={fallbackClassName} style={style}>\r\n          <div style={{ padding: 16 }}>Rendering...</div>\r\n        </div>\r\n      );\r\n    }\r\n\r\n    return <MermaidSvg className={className} ref={ref} style={containerStyle} svg={svg} />;\r\n  },\r\n);\r\n\r\nStreamMermaid.displayName = 'StreamMermaid';\r\n\r\nexport default StreamMermaid;\r\n"],"mappings":";;;;;;;;AAsBA,MAAM,gBAAgB,MACnB,EAAE,UAAU,WAAW,mBAAmB,KAAK,OAAO,OAAO,aAAa,cAAc;CACvF,MAAM,eAAe,YAAY;CACjC,MAAM,iBAAiB,gBAAgB,iBAAiB,CAAC;CAEzD,MAAM,aAAa,cAAc;EAC/B,IAAI,gBAAgB;EACpB,OAAO,cAAc,MAAM,SAAS,KAAK,OAAO,WAAW,CAAC,EAAE;CAChE,GAAG,CAAC,gBAAgB,WAAW,CAAC;CAEhC,MAAM,EAAE,KAAK,OAAO,YAAY,iBAAiB,cAAc;EAC7D,SAAS;EACT,OAAO,iBAAiB,KAAA,IAAY;CACtC,CAAC;CAED,MAAM,iBAAiB;EACrB,YAAY,YAAY,WAAW,aAAa,KAAA;EAChD,QAAQ;EACR,UAAU;EACV,SAAS,YAAY,eAAe,IAAI;EACxC,UAAU;EACV,OAAO;EACP,GAAG;CACL;CAEA,IAAI,SAAS,CAAC,SACZ,OACE,oBAAC,iBAAD;EAAiB,WAAW;EAAmB,SAAS;EAAc;EACnE,UAAA;CACc,CAAA;CAIrB,IAAI,CAAC,KACH,OACE,oBAAC,OAAD;EAAK,WAAW;EAA0B;EACxC,UAAA,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,GAAG;GAAG,UAAA;EAAiB,CAAA;CAC3C,CAAA;CAIT,OAAO,oBAAC,YAAD;EAAuB;EAAgB;EAAK,OAAO;EAAqB;CAAM,CAAA;AACvF,CACF;AAEA,cAAc,cAAc"}

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

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

package/es/Mermaid/SyntaxMermaid/index.mjs

@@ -0,0 +1,48 @@
+"use client";
+import StaticMermaid from "./StaticMermaid.mjs";
+import StreamMermaid from "./StreamMermaid.mjs";
+import { variants } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/Mermaid/SyntaxMermaid/index.tsx
+const SyntaxMermaid = memo(({ animated, children, className, fallbackClassName, ref, style, theme: customTheme, variant = "borderless" }) => {
+	const isDefaultTheme = customTheme === "jinmi-theme" || !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, {
+		className: mermaidClassName,
+		fallbackClassName: fallback,
+		ref,
+		style,
+		theme: resolvedTheme,
+		variant,
+		children
+	});
+	return /* @__PURE__ */ jsx(StaticMermaid, {
+		className: mermaidClassName,
+		fallbackClassName: fallback,
+		ref,
+		style,
+		theme: resolvedTheme,
+		variant,
+		children
+	});
+}, (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.animated === nextProps.animated);
+SyntaxMermaid.displayName = "SyntaxMermaid";
+//#endregion
+export { SyntaxMermaid as default };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/Mermaid/SyntaxMermaid/index.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { memo } from 'react';\r\n\r\nimport type { SyntaxMermaidProps } from '../type';\r\nimport StaticMermaid from './StaticMermaid';\r\nimport StreamMermaid from './StreamMermaid';\r\nimport { variants } from './style';\r\n\r\nconst SyntaxMermaid = memo<SyntaxMermaidProps>(\r\n  ({\r\n    animated,\r\n    children,\r\n    className,\r\n    fallbackClassName,\r\n    ref,\r\n    style,\r\n    theme: customTheme,\r\n    variant = 'borderless',\r\n  }) => {\r\n    const isDefaultTheme = customTheme === 'jinmi-theme' || !customTheme;\r\n    const showBackground = !isDefaultTheme && variant === 'filled';\r\n    const resolvedTheme = isDefaultTheme ? undefined : customTheme;\r\n\r\n    const mermaidClassName = cx(\r\n      variants({ animated, mermaid: true, showBackground, variant }),\r\n      className,\r\n    );\r\n    const fallback = cx(\r\n      variants({ animated, mermaid: false, showBackground, variant }),\r\n      fallbackClassName,\r\n    );\r\n\r\n    if (animated) {\r\n      return (\r\n        <StreamMermaid\r\n          className={mermaidClassName}\r\n          fallbackClassName={fallback}\r\n          ref={ref}\r\n          style={style}\r\n          theme={resolvedTheme}\r\n          variant={variant}\r\n        >\r\n          {children}\r\n        </StreamMermaid>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <StaticMermaid\r\n        className={mermaidClassName}\r\n        fallbackClassName={fallback}\r\n        ref={ref}\r\n        style={style}\r\n        theme={resolvedTheme}\r\n        variant={variant}\r\n      >\r\n        {children}\r\n      </StaticMermaid>\r\n    );\r\n  },\r\n  (prevProps, nextProps) =>\r\n    prevProps.children === nextProps.children && prevProps.animated === nextProps.animated,\r\n);\r\n\r\nSyntaxMermaid.displayName = 'SyntaxMermaid';\r\n\r\nexport default SyntaxMermaid;\r\n"],"mappings":";;;;;;;;AAUA,MAAM,gBAAgB,MACnB,EACC,UACA,UACA,WACA,mBACA,KACA,OACA,OAAO,aACP,UAAU,mBACN;CACJ,MAAM,iBAAiB,gBAAgB,iBAAiB,CAAC;CACzD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,KAAA,IAAY;CAEnD,MAAM,mBAAmB,GACvB,SAAS;EAAE;EAAU,SAAS;EAAM;EAAgB;CAAQ,CAAC,GAC7D,SACF;CACA,MAAM,WAAW,GACf,SAAS;EAAE;EAAU,SAAS;EAAO;EAAgB;CAAQ,CAAC,GAC9D,iBACF;CAEA,IAAI,UACF,OACE,oBAAC,eAAD;EACE,WAAW;EACX,mBAAmB;EACd;EACE;EACP,OAAO;EACE;EAER;CACY,CAAA;CAInB,OACE,oBAAC,eAAD;EACE,WAAW;EACX,mBAAmB;EACd;EACE;EACP,OAAO;EACE;EAER;CACY,CAAA;AAEnB,IACC,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,QAClF;AAEA,cAAc,cAAc"}

package/es/Mermaid/SyntaxMermaid/prepareInlineSvg.mjs

@@ -0,0 +1,54 @@
+//#region src/Mermaid/SyntaxMermaid/prepareInlineSvg.ts
+/**
+* Root custom properties beautiful-mermaid reads; everything else in its
+* stylesheet is derived from these via color-mix().
+*/
+const MERMAID_ROOT_VARS = [
+	"--bg",
+	"--fg",
+	"--line",
+	"--accent",
+	"--muted",
+	"--surface",
+	"--border"
+];
+const styleBlockPattern = /<style>([\s\S]*?)<\/style>/;
+const scopeCssSelectors = (css, scope) => css.replaceAll(/(^|})([^{}@]+)\{/g, (_match, tail, selectors) => {
+	return `${tail}\n${selectors.split(",").map((selector) => selector.trim()).filter(Boolean).map((selector) => selector === "svg" ? scope : `${scope} ${selector}`).join(", ")} {`;
+});
+/**
+* A <style> element inside inline SVG applies to the whole document, so the
+* generated rules must be scoped to this diagram before being injected. The
+* font @import is dropped because inline rendering would actually issue the
+* Google Fonts request that an <img>-loaded SVG silently blocks, and the bare
+* `text` rule is dropped so page CSS can supply the theme font instead.
+*/
+const prepareInlineMermaidSvg = (svg, scopeId) => {
+	if (!svg) return svg;
+	return svg.replace(/<svg\b/, `<svg id="${scopeId}"`).replace(styleBlockPattern, (_match, css) => {
+		const withoutFontRule = css.replaceAll(/@import[^;]*;/g, "").replaceAll(/(^|})\s*text\s*\{[^{}]*\}/g, "$1");
+		return `<style>${scopeCssSelectors(withoutFontRule, `#${scopeId}`)}</style>`;
+	});
+};
+/**
+* Inline SVG resolves `var(--ant-*)` from the page, but a Blob-loaded copy is an
+* isolated document with no access to them, so the root variables are baked in
+* as literal values before serializing for preview or download.
+*/
+const toStandaloneSvgString = (element) => {
+	const clone = element.cloneNode(true);
+	const computed = globalThis.getComputedStyle(element);
+	for (const name of MERMAID_ROOT_VARS) {
+		const value = computed.getPropertyValue(name).trim();
+		if (value) clone.style.setProperty(name, value);
+	}
+	const background = computed.getPropertyValue("--bg").trim();
+	if (background) clone.style.setProperty("background", background);
+	const fontFamily = computed.fontFamily;
+	if (fontFamily) clone.style.setProperty("font-family", fontFamily);
+	return new XMLSerializer().serializeToString(clone);
+};
+//#endregion
+export { MERMAID_ROOT_VARS, prepareInlineMermaidSvg, toStandaloneSvgString };
+
+//# sourceMappingURL=prepareInlineSvg.mjs.map