@lobehub/ui 3.4.2 → 3.4.4

package/es/Highlighter/Highlighter.mjs

@@ -0,0 +1,174 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { getCodeLanguageDisplayName } from "./const.mjs";
+import SyntaxHighlighter_default from "./SyntaxHighlighter/index.mjs";
+import CopyButton_default from "../CopyButton/CopyButton.mjs";
+import Tag_default from "../Tag/Tag.mjs";
+import { useStyles } from "./style.mjs";
+import FullFeatured_default from "./FullFeatured.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/Highlighter/Highlighter.tsx
+const Highlighter = memo(({ animated, fullFeatured, actionIconSize, children, language = "markdown", className, classNames, styles: customStyles, copyable = true, showLanguage = true, variant = "filled", shadow, wrap, bodyRender, actionsRender, enableTransformer, theme, icon, fileName, allowChangeLanguage, defaultExpand = true, ...rest }) => {
+	const { styles, cx } = useStyles();
+	const [lang, setLang] = useState(language);
+	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: styles.wrap
+			}
+		}
+	}), [styles]);
+	const tirmedChildren = useMemo(() => {
+		if (children === null || children === void 0) return "";
+		if (typeof children !== "string") {
+			console.warn("Highlighter: children should be a string, received:", typeof children);
+			return String(children);
+		}
+		return children.trim();
+	}, [children]);
+	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_default, {
+			content: getCopyContent,
+			glass: true,
+			size: actionIconSize || {
+				blockSize: 28,
+				size: 16
+			}
+		});
+	}, [
+		actionIconSize,
+		copyable,
+		getCopyContent
+	]);
+	const actions = useMemo(() => {
+		if (!actionsRender) return originalActions;
+		return actionsRender({
+			actionIconSize,
+			content: tirmedChildren,
+			getContent: getCopyContent,
+			language: lang,
+			originalNode: originalActions
+		});
+	}, [
+		actionIconSize,
+		actionsRender,
+		getCopyContent,
+		lang,
+		originalActions,
+		tirmedChildren
+	]);
+	const originalBody = useMemo(() => /* @__PURE__ */ jsx(SyntaxHighlighter_default, {
+		animated,
+		className: classNames?.content,
+		enableTransformer,
+		language: lang?.toLowerCase(),
+		style: {
+			height: "100%",
+			...customStyles?.content
+		},
+		theme,
+		variant,
+		children: tirmedChildren
+	}), [
+		animated,
+		enableTransformer,
+		lang,
+		theme,
+		tirmedChildren,
+		variant,
+		customStyles?.content,
+		customStyles?.content
+	]);
+	const displayName = useMemo(() => {
+		if (fileName) return fileName;
+		return getCodeLanguageDisplayName(language);
+	}, [fileName, language]);
+	const body = useMemo(() => {
+		if (!bodyRender) return originalBody;
+		return bodyRender({
+			content: tirmedChildren,
+			language: lang,
+			originalNode: originalBody
+		});
+	}, [
+		bodyRender,
+		lang,
+		originalBody,
+		tirmedChildren
+	]);
+	if (fullFeatured) return /* @__PURE__ */ jsx(FullFeatured_default, {
+		actionsRender,
+		allowChangeLanguage,
+		className,
+		classNames,
+		content: tirmedChildren,
+		copyable,
+		defaultExpand,
+		fileName,
+		icon,
+		language,
+		setLanguage: setLang,
+		shadow,
+		showLanguage,
+		styles: customStyles,
+		variant,
+		wrap,
+		...rest,
+		children: body
+	});
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className: cx(variants({
+			shadow,
+			variant,
+			wrap
+		}), className),
+		"data-code-type": "highlighter",
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(FlexBasic_default, {
+				align: "center",
+				className: styles.actions,
+				flex: "none",
+				gap: 4,
+				horizontal: true,
+				children: actions
+			}),
+			showLanguage && language && /* @__PURE__ */ jsx(Tag_default, {
+				className: styles.lang,
+				children: displayName
+			}),
+			body
+		]
+	});
+});
+Highlighter.displayName = "Highlighter";
+var Highlighter_default = Highlighter;
+
+//#endregion
+export { Highlighter_default as default };
+//# sourceMappingURL=Highlighter.mjs.map

package/es/Highlighter/Highlighter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlighter.mjs","names":["CopyButton","SyntaxHighlighter","FullFeatured","Flexbox","Tag"],"sources":["../../src/Highlighter/Highlighter.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName } from '@/Highlighter/const';\nimport Tag from '@/Tag';\n\nimport FullFeatured from './FullFeatured';\nimport SyntaxHighlighter from './SyntaxHighlighter';\nimport { useStyles } from './style';\nimport type { HighlighterProps } from './type';\n\nexport const Highlighter = memo<HighlighterProps>(\n  ({\n    animated,\n    fullFeatured,\n    actionIconSize,\n    children,\n    language = 'markdown',\n    className,\n    classNames,\n    styles: customStyles,\n    copyable = true,\n    showLanguage = true,\n    variant = 'filled',\n    shadow,\n    wrap,\n    bodyRender,\n    actionsRender,\n    enableTransformer,\n    theme,\n    icon,\n    fileName,\n    allowChangeLanguage,\n    defaultExpand = true,\n    ...rest\n  }) => {\n    const { styles, cx } = useStyles();\n    const [lang, setLang] = useState(language);\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: styles.wrap,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    // Safely handle children with boundary check\n    const tirmedChildren = useMemo(() => {\n      if (children === null || children === undefined) return '';\n      if (typeof children !== 'string') {\n        console.warn('Highlighter: children should be a string, received:', typeof children);\n        return String(children);\n      }\n      return children.trim();\n    }, [children]);\n\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\n          content={getCopyContent}\n          glass\n          size={actionIconSize || { blockSize: 28, size: 16 }}\n        />\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        language: lang,\n        originalNode: originalActions,\n      });\n    }, [actionIconSize, actionsRender, getCopyContent, lang, originalActions, tirmedChildren]);\n\n    const originalBody = useMemo(\n      () => (\n        <SyntaxHighlighter\n          animated={animated}\n          className={classNames?.content}\n          enableTransformer={enableTransformer}\n          language={lang?.toLowerCase()}\n          style={{\n            height: '100%',\n            ...customStyles?.content,\n          }}\n          theme={theme}\n          variant={variant}\n        >\n          {tirmedChildren}\n        </SyntaxHighlighter>\n      ),\n      [\n        animated,\n        enableTransformer,\n        lang,\n        theme,\n        tirmedChildren,\n        variant,\n        customStyles?.content,\n        customStyles?.content,\n      ],\n    );\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const body = useMemo(() => {\n      if (!bodyRender) return originalBody;\n      return bodyRender({ content: tirmedChildren, language: lang, originalNode: originalBody });\n    }, [bodyRender, lang, originalBody, tirmedChildren]);\n\n    if (fullFeatured)\n      return (\n        <FullFeatured\n          actionsRender={actionsRender}\n          allowChangeLanguage={allowChangeLanguage}\n          className={className}\n          classNames={classNames}\n          content={tirmedChildren}\n          copyable={copyable}\n          defaultExpand={defaultExpand}\n          fileName={fileName}\n          icon={icon}\n          language={language}\n          setLanguage={setLang}\n          shadow={shadow}\n          showLanguage={showLanguage}\n          styles={customStyles}\n          variant={variant}\n          wrap={wrap}\n          {...rest}\n        >\n          {body}\n        </FullFeatured>\n      );\n\n    return (\n      <Flexbox\n        className={cx(variants({ shadow, variant, wrap }), className)}\n        data-code-type=\"highlighter\"\n        {...rest}\n      >\n        <Flexbox align={'center'} className={styles.actions} flex={'none'} gap={4} horizontal>\n          {actions}\n        </Flexbox>\n        {showLanguage && language && <Tag className={styles.lang}>{displayName}</Tag>}\n        {body}\n      </Flexbox>\n    );\n  },\n);\n\nHighlighter.displayName = 'Highlighter';\n\nexport default Highlighter;\n"],"mappings":"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"}

package/es/Highlighter/LangSelect.mjs

@@ -0,0 +1,71 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Text_default from "../Text/Text.mjs";
+import MaterialFileTypeIcon_default from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "antd";
+import { bundledLanguagesInfo } from "shiki";
+
+//#region src/Highlighter/LangSelect.tsx
+const LangSelect = memo(({ ...rest }) => {
+	return /* @__PURE__ */ jsx(Select, {
+		className: "languageTitle",
+		onClick: (e) => e.stopPropagation(),
+		options: useMemo(() => [{
+			aliases: ["text", "txt"],
+			label: /* @__PURE__ */ jsxs(FlexBasic_default, {
+				align: "center",
+				gap: 4,
+				horizontal: true,
+				children: [/* @__PURE__ */ jsx(MaterialFileTypeIcon_default, {
+					fallbackUnknownType: false,
+					filename: `*.txt`,
+					size: 18,
+					type: "file",
+					variant: "raw"
+				}), /* @__PURE__ */ jsx(Text_default, {
+					ellipsis: true,
+					fontSize: 13,
+					children: "Plaintext"
+				})]
+			}),
+			value: "plaintext"
+		}, ...bundledLanguagesInfo.map((item) => ({
+			aliases: item.aliases,
+			label: /* @__PURE__ */ jsxs(FlexBasic_default, {
+				align: "center",
+				gap: 4,
+				horizontal: true,
+				children: [/* @__PURE__ */ jsx(MaterialFileTypeIcon_default, {
+					fallbackUnknownType: false,
+					filename: `*.${item?.aliases?.[0] || item.id}`,
+					size: 18,
+					type: "file",
+					variant: "raw"
+				}), /* @__PURE__ */ jsx(Text_default, {
+					ellipsis: true,
+					fontSize: 13,
+					children: item.name
+				})]
+			}),
+			title: (item.aliases || [item.id]).filter(Boolean).map((item$1) => `*.${item$1}`).join(","),
+			value: item.id
+		}))], []),
+		showSearch: true,
+		size: "small",
+		style: {
+			maxWidth: 240,
+			width: "100%"
+		},
+		suffixIcon: false,
+		variant: "borderless",
+		...rest
+	});
+});
+var LangSelect_default = LangSelect;
+
+//#endregion
+export { LangSelect_default as default };
+//# sourceMappingURL=LangSelect.mjs.map

package/es/Highlighter/LangSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LangSelect.mjs","names":["Flexbox","MaterialFileTypeIcon","Text","item"],"sources":["../../src/Highlighter/LangSelect.tsx"],"sourcesContent":["'use client';\n\nimport { Select, type SelectProps } from 'antd';\nimport { memo, useMemo } from 'react';\nimport { bundledLanguagesInfo } from 'shiki';\n\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\n\nexport const LangSelect = memo<Omit<SelectProps, 'options'>>(({ ...rest }) => {\n  const options = useMemo(\n    () => [\n      {\n        aliases: ['text', 'txt'],\n        label: (\n          <Flexbox align={'center'} gap={4} horizontal>\n            <MaterialFileTypeIcon\n              fallbackUnknownType={false}\n              filename={`*.txt`}\n              size={18}\n              type={'file'}\n              variant={'raw'}\n            />\n            <Text ellipsis fontSize={13}>\n              Plaintext\n            </Text>\n          </Flexbox>\n        ),\n        value: 'plaintext',\n      },\n      ...bundledLanguagesInfo.map((item) => ({\n        aliases: item.aliases,\n        label: (\n          <Flexbox align={'center'} gap={4} horizontal>\n            <MaterialFileTypeIcon\n              fallbackUnknownType={false}\n              filename={`*.${item?.aliases?.[0] || item.id}`}\n              size={18}\n              type={'file'}\n              variant={'raw'}\n            />\n            <Text ellipsis fontSize={13}>\n              {item.name}\n            </Text>\n          </Flexbox>\n        ),\n        title: (item.aliases || [item.id])\n          .filter(Boolean)\n          .map((item) => `*.${item}`)\n          .join(','),\n        value: item.id,\n      })),\n    ],\n    [],\n  );\n\n  return (\n    <Select\n      className={'languageTitle'}\n      onClick={(e) => e.stopPropagation()}\n      options={options}\n      showSearch\n      size={'small'}\n      style={{\n        maxWidth: 240,\n        width: '100%',\n      }}\n      suffixIcon={false}\n      variant={'borderless'}\n      {...rest}\n    />\n  );\n});\n\nexport default LangSelect;\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,aAAa,MAAoC,EAAE,GAAG,WAAW;AA+C5E,QACE,oBAAC;EACC,WAAW;EACX,UAAU,MAAM,EAAE,iBAAiB;EACnC,SAlDY,cACR,CACJ;GACE,SAAS,CAAC,QAAQ,MAAM;GACxB,OACE,qBAACA;IAAQ,OAAO;IAAU,KAAK;IAAG;eAChC,oBAACC;KACC,qBAAqB;KACrB,UAAU;KACV,MAAM;KACN,MAAM;KACN,SAAS;MACT,EACF,oBAACC;KAAK;KAAS,UAAU;eAAI;MAEtB;KACC;GAEZ,OAAO;GACR,EACD,GAAG,qBAAqB,KAAK,UAAU;GACrC,SAAS,KAAK;GACd,OACE,qBAACF;IAAQ,OAAO;IAAU,KAAK;IAAG;eAChC,oBAACC;KACC,qBAAqB;KACrB,UAAU,KAAK,MAAM,UAAU,MAAM,KAAK;KAC1C,MAAM;KACN,MAAM;KACN,SAAS;MACT,EACF,oBAACC;KAAK;KAAS,UAAU;eACtB,KAAK;MACD;KACC;GAEZ,QAAQ,KAAK,WAAW,CAAC,KAAK,GAAG,EAC9B,OAAO,QAAQ,CACf,KAAK,WAAS,KAAKC,SAAO,CAC1B,KAAK,IAAI;GACZ,OAAO,KAAK;GACb,EAAE,CACJ,EACD,EAAE,CACH;EAOG;EACA,MAAM;EACN,OAAO;GACL,UAAU;GACV,OAAO;GACR;EACD,YAAY;EACZ,SAAS;EACT,GAAI;GACJ;EAEJ;AAEF,yBAAe"}

package/es/Highlighter/SyntaxHighlighter/StaticRenderer.mjs

@@ -0,0 +1,32 @@
+'use client';
+
+import { useHighlight } from "../../hooks/useHighlight.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Highlighter/SyntaxHighlighter/StaticRenderer.tsx
+const escapeHtml = (str) => str.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#039;");
+/**
+* Static renderer for syntax highlighting without animation
+* Uses useHighlight hook to generate HTML and renders it directly
+*/
+const StaticRenderer = memo(({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {
+	const safeChildren = children ?? "";
+	const { data } = useHighlight(safeChildren, {
+		enableTransformer,
+		language,
+		theme
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: typeof data === "string" && data.length > 0 ? className : fallbackClassName,
+		dangerouslySetInnerHTML: { __html: data || `<pre><code>${escapeHtml(safeChildren)}</code></pre>` },
+		dir: "ltr",
+		style
+	});
+});
+StaticRenderer.displayName = "StaticRenderer";
+var StaticRenderer_default = StaticRenderer;
+
+//#endregion
+export { StaticRenderer_default as default };
+//# sourceMappingURL=StaticRenderer.mjs.map

package/es/Highlighter/SyntaxHighlighter/StaticRenderer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticRenderer.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/StaticRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { CSSProperties, memo } from 'react';\nimport type { BuiltinTheme } from 'shiki';\n\nimport { useHighlight } from '@/hooks/useHighlight';\n\ninterface StaticRendererProps {\n  children: string;\n  className?: string;\n  enableTransformer?: boolean;\n  fallbackClassName?: string;\n  language: string;\n  style?: CSSProperties;\n  theme?: BuiltinTheme;\n}\n\n// Escape HTML for fallback to prevent XSS\nconst escapeHtml = (str: string) =>\n  str\n    .replaceAll('&', '&amp;')\n    .replaceAll('<', '&lt;')\n    .replaceAll('>', '&gt;')\n    .replaceAll('\"', '&quot;')\n    .replaceAll(\"'\", '&#039;');\n\n/**\n * Static renderer for syntax highlighting without animation\n * Uses useHighlight hook to generate HTML and renders it directly\n */\nconst StaticRenderer = memo<StaticRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const { data } = useHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      theme,\n    });\n\n    const hasData = typeof data === 'string' && data.length > 0;\n    const containerClassName = hasData ? className : fallbackClassName;\n\n    return (\n      <div\n        className={containerClassName}\n        dangerouslySetInnerHTML={{\n          __html: data || `<pre><code>${escapeHtml(safeChildren)}</code></pre>`,\n        }}\n        dir=\"ltr\"\n        style={style}\n      />\n    );\n  },\n);\n\nStaticRenderer.displayName = 'StaticRenderer';\n\nexport default StaticRenderer;\n"],"mappings":";;;;;;;AAkBA,MAAM,cAAc,QAClB,IACG,WAAW,KAAK,QAAQ,CACxB,WAAW,KAAK,OAAO,CACvB,WAAW,KAAK,OAAO,CACvB,WAAW,MAAK,SAAS,CACzB,WAAW,KAAK,SAAS;;;;;AAM9B,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CAEzF,MAAM,eAAe,YAAY;CAEjC,MAAM,EAAE,SAAS,aAAa,cAAc;EAC1C;EACA;EACA;EACD,CAAC;AAKF,QACE,oBAAC;EACC,WALY,OAAO,SAAS,YAAY,KAAK,SAAS,IACrB,YAAY;EAK7C,yBAAyB,EACvB,QAAQ,QAAQ,cAAc,WAAW,aAAa,CAAC,gBACxD;EACD,KAAI;EACG;GACP;EAGP;AAED,eAAe,cAAc;AAE7B,6BAAe"}

package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs

@@ -0,0 +1,103 @@
+'use client';
+
+import { useHighlight } from "../../hooks/useHighlight.mjs";
+import { useStyles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { getTokenStyleObject } from "@shikijs/core";
+
+//#region src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx
+const applyColorReplacement = (color, replacements) => {
+	if (!color || !replacements) return color;
+	return replacements[color.toLowerCase()] || color;
+};
+const normalizeStyleKeys = (style) => {
+	const normalized = {};
+	Object.entries(style).forEach(([key, value]) => {
+		const normalizedKey = key.replaceAll(/-([a-z])/g, (_, char) => char.toUpperCase());
+		normalized[normalizedKey] = value;
+	});
+	return normalized;
+};
+const getTokenInlineStyle = (token, replacements) => {
+	const baseStyle = normalizeStyleKeys(token.htmlStyle || getTokenStyleObject(token));
+	if (!replacements) return {
+		...baseStyle,
+		whiteSpace: "pre"
+	};
+	const style = {
+		...baseStyle,
+		whiteSpace: "pre"
+	};
+	if (style.color && typeof style.color === "string") style.color = applyColorReplacement(style.color, replacements);
+	if (style.backgroundColor && typeof style.backgroundColor === "string") style.backgroundColor = applyColorReplacement(style.backgroundColor, replacements);
+	return style;
+};
+const TokenSpan = memo(({ token, replacements }) => {
+	return /* @__PURE__ */ jsx("span", {
+		style: getTokenInlineStyle(token, replacements),
+		children: token.content
+	}, token.content);
+}, (prev, next) => prev.token === next.token);
+const TokenLine = memo(({ line, replacements }) => {
+	if (!line.length) return /* @__PURE__ */ jsx("span", {
+		className: "line",
+		children: /* @__PURE__ */ jsx("span", {
+			style: { whiteSpace: "pre" },
+			children: "\xA0"
+		})
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "line",
+		children: line.map((token, tokenIndex) => /* @__PURE__ */ jsx(TokenSpan, {
+			replacements,
+			token
+		}, `token-${tokenIndex}`))
+	});
+}, (prev, next) => prev.line === next.line);
+const StreamRenderer = memo(({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {
+	const { cx } = useStyles();
+	const safeChildren = children ?? "";
+	const { streaming } = useHighlight(safeChildren, {
+		enableTransformer,
+		language,
+		streaming: true,
+		theme
+	});
+	const lines = streaming?.lines;
+	const preStyle = streaming?.preStyle;
+	const replacements = streaming?.colorReplacements;
+	if (!lines || lines.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: fallbackClassName,
+		dir: "ltr",
+		style,
+		children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: safeChildren }) })
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		dir: "ltr",
+		style,
+		children: /* @__PURE__ */ jsx("pre", {
+			className: cx("shiki", theme),
+			style: preStyle,
+			tabIndex: 0,
+			children: /* @__PURE__ */ jsx("code", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					whiteSpace: "pre"
+				},
+				children: lines.map((line, index) => /* @__PURE__ */ jsx(TokenLine, {
+					line,
+					replacements
+				}, `line-${index}`))
+			})
+		})
+	});
+});
+StreamRenderer.displayName = "StreamRenderer";
+var StreamRenderer_default = StreamRenderer;
+
+//#endregion
+export { StreamRenderer_default as default };
+//# sourceMappingURL=StreamRenderer.mjs.map

package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StreamRenderer.mjs","names":["normalized: CSSProperties","style: CSSProperties"],"sources":["../../../src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { getTokenStyleObject } from '@shikijs/core';\nimport type { CSSProperties } from 'react';\nimport { memo } from 'react';\nimport type { BuiltinTheme, ThemedToken } from 'shiki';\n\nimport { useHighlight } from '@/hooks/useHighlight';\n\nimport { useStyles } from './style';\n\ninterface StreamRendererProps {\n  children: string;\n  className?: string;\n  enableTransformer?: boolean;\n  fallbackClassName?: string;\n  language: string;\n  style?: CSSProperties;\n  theme?: BuiltinTheme;\n}\n\nconst applyColorReplacement = (color?: string, replacements?: Record<string, string>) => {\n  if (!color || !replacements) return color;\n  return replacements[color.toLowerCase()] || color;\n};\n\nconst normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {\n  const normalized: CSSProperties = {};\n  Object.entries(style).forEach(([key, value]) => {\n    const normalizedKey = key.replaceAll(/-([a-z])/g, (_, char) => char.toUpperCase());\n    (normalized as Record<string, string | number>)[normalizedKey] = value;\n  });\n  return normalized;\n};\n\nconst getTokenInlineStyle = (\n  token: ThemedToken,\n  replacements?: Record<string, string>,\n): CSSProperties => {\n  const rawStyle = token.htmlStyle || getTokenStyleObject(token);\n  const baseStyle = normalizeStyleKeys(rawStyle);\n  if (!replacements) return { ...baseStyle, whiteSpace: 'pre' };\n\n  const style: CSSProperties = {\n    ...baseStyle,\n    whiteSpace: 'pre',\n  };\n\n  if (style.color && typeof style.color === 'string') {\n    style.color = applyColorReplacement(style.color, replacements);\n  }\n  if (style.backgroundColor && typeof style.backgroundColor === 'string') {\n    style.backgroundColor = applyColorReplacement(style.backgroundColor, replacements);\n  }\n\n  return style;\n};\n\nconst TokenSpan = memo(\n  ({ token, replacements }: { replacements?: Record<string, string>; token: ThemedToken }) => {\n    return (\n      <span key={token.content} style={getTokenInlineStyle(token, replacements)}>\n        {token.content}\n      </span>\n    );\n  },\n  (prev, next) => prev.token === next.token,\n);\n\nconst TokenLine = memo(\n  ({ line, replacements }: { line: ThemedToken[]; replacements?: Record<string, string> }) => {\n    if (!line.length) {\n      return (\n        <span className=\"line\">\n          <span style={{ whiteSpace: 'pre' }}>{'\\u00A0'}</span>\n        </span>\n      );\n    }\n\n    return (\n      <span className=\"line\">\n        {line.map((token, tokenIndex) => (\n          <TokenSpan key={`token-${tokenIndex}`} replacements={replacements} token={token} />\n        ))}\n      </span>\n    );\n  },\n  (prev, next) => prev.line === next.line,\n);\n\nconst StreamRenderer = memo<StreamRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    const { cx } = useStyles();\n\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const { streaming } = useHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      streaming: true,\n      theme,\n    });\n\n    const lines = streaming?.lines;\n    const preStyle = streaming?.preStyle;\n    const replacements = streaming?.colorReplacements;\n\n    if (!lines || lines.length === 0) {\n      return (\n        <div className={fallbackClassName} dir=\"ltr\" style={style}>\n          <pre>\n            <code>{safeChildren}</code>\n          </pre>\n        </div>\n      );\n    }\n\n    return (\n      <div className={className} dir=\"ltr\" style={style}>\n        <pre className={cx('shiki', theme)} style={preStyle} tabIndex={0}>\n          <code style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'pre' }}>\n            {lines.map((line, index) => (\n              <TokenLine key={`line-${index}`} line={line} replacements={replacements} />\n            ))}\n          </code>\n        </pre>\n      </div>\n    );\n  },\n);\n\nStreamRenderer.displayName = 'StreamRenderer';\n\nexport default StreamRenderer;\n"],"mappings":";;;;;;;;;AAqBA,MAAM,yBAAyB,OAAgB,iBAA0C;AACvF,KAAI,CAAC,SAAS,CAAC,aAAc,QAAO;AACpC,QAAO,aAAa,MAAM,aAAa,KAAK;;AAG9C,MAAM,sBAAsB,UAA0D;CACpF,MAAMA,aAA4B,EAAE;AACpC,QAAO,QAAQ,MAAM,CAAC,SAAS,CAAC,KAAK,WAAW;EAC9C,MAAM,gBAAgB,IAAI,WAAW,cAAc,GAAG,SAAS,KAAK,aAAa,CAAC;AAClF,EAAC,WAA+C,iBAAiB;GACjE;AACF,QAAO;;AAGT,MAAM,uBACJ,OACA,iBACkB;CAElB,MAAM,YAAY,mBADD,MAAM,aAAa,oBAAoB,MAAM,CAChB;AAC9C,KAAI,CAAC,aAAc,QAAO;EAAE,GAAG;EAAW,YAAY;EAAO;CAE7D,MAAMC,QAAuB;EAC3B,GAAG;EACH,YAAY;EACb;AAED,KAAI,MAAM,SAAS,OAAO,MAAM,UAAU,SACxC,OAAM,QAAQ,sBAAsB,MAAM,OAAO,aAAa;AAEhE,KAAI,MAAM,mBAAmB,OAAO,MAAM,oBAAoB,SAC5D,OAAM,kBAAkB,sBAAsB,MAAM,iBAAiB,aAAa;AAGpF,QAAO;;AAGT,MAAM,YAAY,MACf,EAAE,OAAO,mBAAkF;AAC1F,QACE,oBAAC;EAAyB,OAAO,oBAAoB,OAAO,aAAa;YACtE,MAAM;IADE,MAAM,QAEV;IAGV,MAAM,SAAS,KAAK,UAAU,KAAK,MACrC;AAED,MAAM,YAAY,MACf,EAAE,MAAM,mBAAmF;AAC1F,KAAI,CAAC,KAAK,OACR,QACE,oBAAC;EAAK,WAAU;YACd,oBAAC;GAAK,OAAO,EAAE,YAAY,OAAO;aAAG;IAAgB;GAChD;AAIX,QACE,oBAAC;EAAK,WAAU;YACb,KAAK,KAAK,OAAO,eAChB,oBAAC;GAAoD;GAAqB;KAA1D,SAAS,aAA0D,CACnF;GACG;IAGV,MAAM,SAAS,KAAK,SAAS,KAAK,KACpC;AAED,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CACzF,MAAM,EAAE,OAAO,WAAW;CAG1B,MAAM,eAAe,YAAY;CAEjC,MAAM,EAAE,cAAc,aAAa,cAAc;EAC/C;EACA;EACA,WAAW;EACX;EACD,CAAC;CAEF,MAAM,QAAQ,WAAW;CACzB,MAAM,WAAW,WAAW;CAC5B,MAAM,eAAe,WAAW;AAEhC,KAAI,CAAC,SAAS,MAAM,WAAW,EAC7B,QACE,oBAAC;EAAI,WAAW;EAAmB,KAAI;EAAa;YAClD,oBAAC,mBACC,oBAAC,oBAAM,eAAoB,GACvB;GACF;AAIV,QACE,oBAAC;EAAe;EAAW,KAAI;EAAa;YAC1C,oBAAC;GAAI,WAAW,GAAG,SAAS,MAAM;GAAE,OAAO;GAAU,UAAU;aAC7D,oBAAC;IAAK,OAAO;KAAE,SAAS;KAAQ,eAAe;KAAU,YAAY;KAAO;cACzE,MAAM,KAAK,MAAM,UAChB,oBAAC;KAAsC;KAAoB;OAA3C,QAAQ,QAAmD,CAC3E;KACG;IACH;GACF;EAGX;AAED,eAAe,cAAc;AAE7B,6BAAe"}

package/es/Highlighter/SyntaxHighlighter/index.d.mts

@@ -0,0 +1,8 @@
+import { SyntaxHighlighterProps } from "../type.mjs";
+import * as react23 from "react";
+
+//#region src/Highlighter/SyntaxHighlighter/index.d.ts
+declare const SyntaxHighlighter: react23.NamedExoticComponent<SyntaxHighlighterProps>;
+//#endregion
+export { SyntaxHighlighter };
+//# sourceMappingURL=index.d.mts.map

package/es/Highlighter/SyntaxHighlighter/index.mjs

@@ -0,0 +1,72 @@
+'use client';
+
+import StaticRenderer_default from "./StaticRenderer.mjs";
+import { useStyles } from "./style.mjs";
+import StreamRenderer_default from "./StreamRenderer.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/Highlighter/SyntaxHighlighter/index.tsx
+const SyntaxHighlighter = memo(({ animated, children, className, enableTransformer, language, style, theme, variant = "borderless" }) => {
+	const { styles, cx } = useStyles();
+	const isDefaultTheme = theme === "lobe-theme" || !theme;
+	const showBackground = !isDefaultTheme && variant === "filled";
+	const resolvedTheme = isDefaultTheme ? void 0 : theme;
+	const variants = useMemo(() => cva(styles.root, {
+		defaultVariants: {
+			shiki: true,
+			showBackground: false,
+			variant: "borderless"
+		},
+		variants: {
+			shiki: {
+				false: styles.unshiki,
+				true: styles.shiki
+			},
+			variant: {
+				filled: styles.padding,
+				outlined: styles.padding,
+				borderless: styles.noPadding
+			},
+			showBackground: {
+				false: styles.noBackground,
+				true: null
+			}
+		}
+	}), [styles]);
+	const shikiClassName = cx(variants({
+		shiki: true,
+		showBackground,
+		variant
+	}), className);
+	const fallbackClassName = cx(variants({
+		shiki: false,
+		showBackground,
+		variant
+	}), className);
+	if (animated) return /* @__PURE__ */ jsx(StreamRenderer_default, {
+		className: shikiClassName,
+		enableTransformer,
+		fallbackClassName,
+		language,
+		style,
+		theme: resolvedTheme,
+		children
+	});
+	return /* @__PURE__ */ jsx(StaticRenderer_default, {
+		className: shikiClassName,
+		enableTransformer,
+		fallbackClassName,
+		language,
+		style,
+		theme: resolvedTheme,
+		children
+	});
+}, (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.language === nextProps.language);
+SyntaxHighlighter.displayName = "SyntaxHighlighter";
+var SyntaxHighlighter_default = SyntaxHighlighter;
+
+//#endregion
+export { SyntaxHighlighter_default as default };
+//# sourceMappingURL=index.mjs.map

package/es/Highlighter/SyntaxHighlighter/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["StreamRenderer","StaticRenderer"],"sources":["../../../src/Highlighter/SyntaxHighlighter/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport type { SyntaxHighlighterProps } from '../type';\nimport StaticRenderer from './StaticRenderer';\nimport StreamRenderer from './StreamRenderer';\nimport { useStyles } from './style';\n\nconst SyntaxHighlighter = memo<SyntaxHighlighterProps>(\n  ({\n    animated,\n    children,\n    className,\n    enableTransformer,\n    language,\n    style,\n    theme,\n    variant = 'borderless',\n  }) => {\n    const { styles, cx } = useStyles();\n    const isDefaultTheme = theme === 'lobe-theme' || !theme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : theme;\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            shiki: true,\n            showBackground: false,\n            variant: 'borderless',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            shiki: {\n              false: styles.unshiki,\n              true: styles.shiki,\n            },\n            variant: {\n              filled: styles.padding,\n              outlined: styles.padding,\n              borderless: styles.noPadding,\n            },\n            showBackground: {\n              false: styles.noBackground,\n              true: null,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const shikiClassName = cx(variants({ shiki: true, showBackground, variant }), className);\n    const fallbackClassName = cx(variants({ shiki: false, showBackground, variant }), className);\n\n    if (animated) {\n      return (\n        <StreamRenderer\n          className={shikiClassName}\n          enableTransformer={enableTransformer}\n          fallbackClassName={fallbackClassName}\n          language={language}\n          style={style}\n          theme={resolvedTheme}\n        >\n          {children}\n        </StreamRenderer>\n      );\n    }\n\n    return (\n      <StaticRenderer\n        className={shikiClassName}\n        enableTransformer={enableTransformer}\n        fallbackClassName={fallbackClassName}\n        language={language}\n        style={style}\n        theme={resolvedTheme}\n      >\n        {children}\n      </StaticRenderer>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.language === nextProps.language,\n);\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n\nexport default SyntaxHighlighter;\n"],"mappings":";;;;;;;;;;AAUA,MAAM,oBAAoB,MACvB,EACC,UACA,UACA,WACA,mBACA,UACA,OACA,OACA,UAAU,mBACN;CACJ,MAAM,EAAE,QAAQ,OAAO,WAAW;CAClC,MAAM,iBAAiB,UAAU,gBAAgB,CAAC;CAClD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,SAAY;CAEnD,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB;GACf,OAAO;GACP,gBAAgB;GAChB,SAAS;GACV;EAED,UAAU;GACR,OAAO;IACL,OAAO,OAAO;IACd,MAAM,OAAO;IACd;GACD,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB;GACD,gBAAgB;IACd,OAAO,OAAO;IACd,MAAM;IACP;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,iBAAiB,GAAG,SAAS;EAAE,OAAO;EAAM;EAAgB;EAAS,CAAC,EAAE,UAAU;CACxF,MAAM,oBAAoB,GAAG,SAAS;EAAE,OAAO;EAAO;EAAgB;EAAS,CAAC,EAAE,UAAU;AAE5F,KAAI,SACF,QACE,oBAACA;EACC,WAAW;EACQ;EACA;EACT;EACH;EACP,OAAO;EAEN;GACc;AAIrB,QACE,oBAACC;EACC,WAAW;EACQ;EACA;EACT;EACH;EACP,OAAO;EAEN;GACc;IAGpB,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,SACjF;AAED,kBAAkB,cAAc;AAEhC,gCAAe"}

package/es/Highlighter/SyntaxHighlighter/style.mjs

@@ -0,0 +1,117 @@
+import { createStyles } from "antd-style";
+
+//#region src/Highlighter/SyntaxHighlighter/style.ts
+const useStyles = createStyles(({ css: css$1, token, cx: cx$1, prefixCls }) => {
+	return {
+		noBackground: css$1`
+      pre {
+        background: transparent !important;
+      }
+    `,
+		noPadding: css$1`
+      pre {
+        padding: 0;
+      }
+    `,
+		padding: css$1`
+      pre {
+        padding: 16px;
+      }
+    `,
+		root: css$1`
+      direction: ltr;
+      margin: 0;
+      padding: 0;
+      text-align: start;
+
+      pre {
+        overflow-x: auto;
+        margin: 0;
+        padding: 0;
+      }
+    `,
+		shiki: cx$1(`${prefixCls}-highlighter-shiki`, css$1`
+        pre {
+          code {
+            display: block;
+
+            .line {
+              display: inline-block;
+
+              width: calc(100% + 32px);
+              margin-block: 0;
+              margin-inline: -16px;
+              padding-block: 0;
+              padding-inline: 16px;
+            }
+          }
+
+          &.has-focused {
+            .line:not(.focused) {
+              opacity: 0.5;
+            }
+          }
+
+          .highlighted {
+            background: ${token.colorFillTertiary};
+
+            &.warning {
+              background: ${token.colorWarningBg};
+            }
+
+            &.error {
+              background: ${token.colorErrorBg};
+            }
+          }
+
+          .highlighted-word {
+            padding-block: 0.1em;
+            padding-inline: 0.2em;
+            border: 1px solid ${token.colorBorderSecondary};
+            border-radius: ${token.borderRadius}px;
+
+            background: ${token.colorFillTertiary};
+          }
+
+          .diff {
+            &.remove {
+              background: ${token.colorErrorBg};
+
+              &::before {
+                content: '-';
+
+                position: absolute;
+                inset-inline-start: 4px;
+
+                display: inline-block;
+
+                color: ${token.colorErrorText};
+              }
+            }
+
+            &.add {
+              background: ${token.colorSuccessBg};
+
+              &::before {
+                content: '+';
+
+                position: absolute;
+                inset-inline-start: 4px;
+
+                display: inline-block;
+
+                color: ${token.colorSuccessText};
+              }
+            }
+          }
+        }
+      `),
+		unshiki: css$1`
+      color: ${token.colorTextDescription};
+    `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Highlighter/SyntaxHighlighter/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../../src/Highlighter/SyntaxHighlighter/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, cx, prefixCls }) => {\n  return {\n    noBackground: css`\n      pre {\n        background: transparent !important;\n      }\n    `,\n\n    noPadding: css`\n      pre {\n        padding: 0;\n      }\n    `,\n\n    padding: css`\n      pre {\n        padding: 16px;\n      }\n    `,\n    root: css`\n      direction: ltr;\n      margin: 0;\n      padding: 0;\n      text-align: start;\n\n      pre {\n        overflow-x: auto;\n        margin: 0;\n        padding: 0;\n      }\n    `,\n    shiki: cx(\n      `${prefixCls}-highlighter-shiki`,\n      css`\n        pre {\n          code {\n            display: block;\n\n            .line {\n              display: inline-block;\n\n              width: calc(100% + 32px);\n              margin-block: 0;\n              margin-inline: -16px;\n              padding-block: 0;\n              padding-inline: 16px;\n            }\n          }\n\n          &.has-focused {\n            .line:not(.focused) {\n              opacity: 0.5;\n            }\n          }\n\n          .highlighted {\n            background: ${token.colorFillTertiary};\n\n            &.warning {\n              background: ${token.colorWarningBg};\n            }\n\n            &.error {\n              background: ${token.colorErrorBg};\n            }\n          }\n\n          .highlighted-word {\n            padding-block: 0.1em;\n            padding-inline: 0.2em;\n            border: 1px solid ${token.colorBorderSecondary};\n            border-radius: ${token.borderRadius}px;\n\n            background: ${token.colorFillTertiary};\n          }\n\n          .diff {\n            &.remove {\n              background: ${token.colorErrorBg};\n\n              &::before {\n                content: '-';\n\n                position: absolute;\n                inset-inline-start: 4px;\n\n                display: inline-block;\n\n                color: ${token.colorErrorText};\n              }\n            }\n\n            &.add {\n              background: ${token.colorSuccessBg};\n\n              &::before {\n                content: '+';\n\n                position: absolute;\n                inset-inline-start: 4px;\n\n                display: inline-block;\n\n                color: ${token.colorSuccessText};\n              }\n            }\n          }\n        }\n      `,\n    ),\n    unshiki: css`\n      color: ${token.colorTextDescription};\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,UAAI,gBAAgB;AACvE,QAAO;EACL,cAAc,KAAG;;;;;EAMjB,WAAW,KAAG;;;;;EAMd,SAAS,KAAG;;;;;EAKZ,MAAM,KAAG;;;;;;;;;;;;EAYT,OAAOA,KACL,GAAG,UAAU,qBACb,KAAG;;;;;;;;;;;;;;;;;;;;;;;0BAuBiB,MAAM,kBAAkB;;;4BAGtB,MAAM,eAAe;;;;4BAIrB,MAAM,aAAa;;;;;;;gCAOf,MAAM,qBAAqB;6BAC9B,MAAM,aAAa;;0BAEtB,MAAM,kBAAkB;;;;;4BAKtB,MAAM,aAAa;;;;;;;;;;yBAUtB,MAAM,eAAe;;;;;4BAKlB,MAAM,eAAe;;;;;;;;;;yBAUxB,MAAM,iBAAiB;;;;;QAM3C;EACD,SAAS,KAAG;eACD,MAAM,qBAAqB;;EAEvC;EACD"}

package/es/Highlighter/const.d.mts

@@ -0,0 +1,9 @@
+//#region src/Highlighter/const.d.ts
+interface HighlighterThemeItem {
+  displayName: string;
+  id: string;
+}
+declare const highlighterThemes: HighlighterThemeItem[];
+//#endregion
+export { highlighterThemes };
+//# sourceMappingURL=const.d.mts.map