@jinmi/ui 0.0.0-stage → 6.0.2

package/es/Highlighter/Highlighter.mjs

@@ -0,0 +1,148 @@
+"use client";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Tag from "../base-ui/Tag/Tag.mjs";
+import { getCodeLanguageDisplayName } from "./const.mjs";
+import SyntaxHighlighter from "./SyntaxHighlighter/index.mjs";
+import CopyButton from "../CopyButton/CopyButton.mjs";
+import { styles, variants } from "./style.mjs";
+import { HighlighterFullFeatured } from "./FullFeatured.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#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 [lang, setLang] = useState(language);
+	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, {
+			glass: true,
+			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,
+			language: lang,
+			originalNode: originalActions
+		});
+	}, [
+		actionIconSize,
+		actionsRender,
+		getCopyContent,
+		lang,
+		originalActions,
+		tirmedChildren
+	]);
+	const originalBody = useMemo(() => /* @__PURE__ */ jsx(SyntaxHighlighter, {
+		animated,
+		className: classNames?.content,
+		enableTransformer,
+		language: lang?.toLowerCase(),
+		theme,
+		variant,
+		style: {
+			height: "100%",
+			...customStyles?.content
+		},
+		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(HighlighterFullFeatured, {
+		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, {
+				horizontal: true,
+				align: "center",
+				className: styles.actions,
+				flex: "none",
+				gap: 4,
+				children: actions
+			}),
+			showLanguage && language && /* @__PURE__ */ jsx(Tag, {
+				className: styles.lang,
+				children: displayName
+			}),
+			body
+		]
+	});
+});
+Highlighter.displayName = "Highlighter";
+//#endregion
+export { Highlighter, Highlighter as default };
+
+//# sourceMappingURL=Highlighter.mjs.map

package/es/Highlighter/Highlighter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlighter.mjs","names":["FullFeatured","Flexbox"],"sources":["../../src/Highlighter/Highlighter.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\n\r\nimport Tag from '@/base-ui/Tag';\r\nimport CopyButton from '@/CopyButton';\r\nimport { Flexbox } from '@/Flex';\r\nimport { getCodeLanguageDisplayName } from '@/Highlighter/const';\r\n\r\nimport FullFeatured from './FullFeatured';\r\nimport { styles, variants } from './style';\r\nimport SyntaxHighlighter from './SyntaxHighlighter';\r\nimport { type HighlighterProps } from './type';\r\n\r\nexport const Highlighter = memo<HighlighterProps>(\r\n  ({\r\n    animated,\r\n    fullFeatured,\r\n    actionIconSize,\r\n    children,\r\n    language = 'markdown',\r\n    className,\r\n    classNames,\r\n    styles: customStyles,\r\n    copyable = true,\r\n    showLanguage = true,\r\n    variant = 'filled',\r\n    shadow,\r\n    wrap,\r\n    bodyRender,\r\n    actionsRender,\r\n    enableTransformer,\r\n    theme,\r\n    icon,\r\n    fileName,\r\n    allowChangeLanguage,\r\n    defaultExpand = true,\r\n    ...rest\r\n  }) => {\r\n    const [lang, setLang] = useState(language);\r\n\r\n    // Safely handle children with boundary check\r\n    const tirmedChildren = useMemo(() => {\r\n      if (children === null || children === undefined) return '';\r\n      if (typeof children !== 'string') {\r\n        console.warn('Highlighter: children should be a string, received:', typeof children);\r\n        return String(children);\r\n      }\r\n      return children.trim();\r\n    }, [children]);\r\n\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\r\n          glass\r\n          content={getCopyContent}\r\n          size={actionIconSize || { blockSize: 28, size: 16 }}\r\n        />\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        language: lang,\r\n        originalNode: originalActions,\r\n      });\r\n    }, [actionIconSize, actionsRender, getCopyContent, lang, originalActions, tirmedChildren]);\r\n\r\n    const originalBody = useMemo(\r\n      () => (\r\n        <SyntaxHighlighter\r\n          animated={animated}\r\n          className={classNames?.content}\r\n          enableTransformer={enableTransformer}\r\n          language={lang?.toLowerCase()}\r\n          theme={theme}\r\n          variant={variant}\r\n          style={{\r\n            height: '100%',\r\n            ...customStyles?.content,\r\n          }}\r\n        >\r\n          {tirmedChildren}\r\n        </SyntaxHighlighter>\r\n      ),\r\n      [\r\n        animated,\r\n        enableTransformer,\r\n        lang,\r\n        theme,\r\n        tirmedChildren,\r\n        variant,\r\n        customStyles?.content,\r\n        customStyles?.content,\r\n      ],\r\n    );\r\n\r\n    const displayName = useMemo(() => {\r\n      if (fileName) return fileName;\r\n      return getCodeLanguageDisplayName(language);\r\n    }, [fileName, language]);\r\n\r\n    const body = useMemo(() => {\r\n      if (!bodyRender) return originalBody;\r\n      return bodyRender({ content: tirmedChildren, language: lang, originalNode: originalBody });\r\n    }, [bodyRender, lang, originalBody, tirmedChildren]);\r\n\r\n    if (fullFeatured)\r\n      return (\r\n        <FullFeatured\r\n          actionsRender={actionsRender}\r\n          allowChangeLanguage={allowChangeLanguage}\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          icon={icon}\r\n          language={language}\r\n          setLanguage={setLang}\r\n          shadow={shadow}\r\n          showLanguage={showLanguage}\r\n          styles={customStyles}\r\n          variant={variant}\r\n          wrap={wrap}\r\n          {...rest}\r\n        >\r\n          {body}\r\n        </FullFeatured>\r\n      );\r\n\r\n    return (\r\n      <Flexbox\r\n        className={cx(variants({ shadow, variant, wrap }), className)}\r\n        data-code-type=\"highlighter\"\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 && language && <Tag className={styles.lang}>{displayName}</Tag>}\r\n        {body}\r\n      </Flexbox>\r\n    );\r\n  },\r\n);\r\n\r\nHighlighter.displayName = 'Highlighter';\r\n\r\nexport default Highlighter;\r\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,cAAc,MACxB,EACC,UACA,cACA,gBACA,UACA,WAAW,YACX,WACA,YACA,QAAQ,cACR,WAAW,MACX,eAAe,MACf,UAAU,UACV,QACA,MACA,YACA,eACA,mBACA,OACA,MACA,UACA,qBACA,gBAAgB,MAChB,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,QAAQ;CAGzC,MAAM,iBAAiB,cAAc;EACnC,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;EACxD,IAAI,OAAO,aAAa,UAAU;GAChC,QAAQ,KAAK,uDAAuD,OAAO,QAAQ;GACnF,OAAO,OAAO,QAAQ;EACxB;EACA,OAAO,SAAS,KAAK;CACvB,GAAG,CAAC,QAAQ,CAAC;CAEb,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;GACE,OAAA;GACA,SAAS;GACT,MAAM,kBAAkB;IAAE,WAAW;IAAI,MAAM;GAAG;EACnD,CAAA;CAEL,GAAG;EAAC;EAAgB;EAAU;CAAc,CAAC;CAE7C,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB;GACA,SAAS;GACT,YAAY;GACZ,UAAU;GACV,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAgB;EAAe;EAAgB;EAAM;EAAiB;CAAc,CAAC;CAEzF,MAAM,eAAe,cAEjB,oBAAC,mBAAD;EACY;EACV,WAAW,YAAY;EACJ;EACnB,UAAU,MAAM,YAAY;EACrB;EACE;EACT,OAAO;GACL,QAAQ;GACR,GAAG,cAAc;EACnB;EAEC,UAAA;CACgB,CAAA,GAErB;EACE;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd,cAAc;CAChB,CACF;CAEA,MAAM,cAAc,cAAc;EAChC,IAAI,UAAU,OAAO;EACrB,OAAO,2BAA2B,QAAQ;CAC5C,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,OAAO,cAAc;EACzB,IAAI,CAAC,YAAY,OAAO;EACxB,OAAO,WAAW;GAAE,SAAS;GAAgB,UAAU;GAAM,cAAc;EAAa,CAAC;CAC3F,GAAG;EAAC;EAAY;EAAM;EAAc;CAAc,CAAC;CAEnD,IAAI,cACF,OACE,oBAACA,yBAAD;EACiB;EACM;EACV;EACC;EACZ,SAAS;EACC;EACK;EACL;EACJ;EACI;EACV,aAAa;EACL;EACM;EACd,QAAQ;EACC;EACH;EACN,GAAI;EAEH,UAAA;CACW,CAAA;CAGlB,OACE,qBAACC,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS;EAAK,CAAC,GAAG,SAAS;EAC5D,kBAAe;EACf,GAAI;EAHN,UAAA;GAKE,oBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,WAAW,OAAO;IAAS,MAAM;IAAQ,KAAK;IAChF,UAAA;GACM,CAAA;GACR,gBAAgB,YAAY,oBAAC,KAAD;IAAK,WAAW,OAAO;IAAO,UAAA;GAAiB,CAAA;GAC3E;EACM;;AAEb,CACF;AAEA,YAAY,cAAc"}

package/es/Highlighter/LangSelect.mjs

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

package/es/Highlighter/LangSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LangSelect.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/LangSelect.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { memo, useMemo } from 'react';\r\nimport { bundledLanguagesInfo } from 'shiki';\r\n\r\nimport Select, { type SelectProps } from '@/base-ui/Select';\r\nimport { Flexbox } from '@/Flex';\r\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\r\nimport Text from '@/Text';\r\nimport { stopPropagation } from '@/utils/dom';\r\n\r\nexport const LangSelect = memo<Omit<SelectProps<string>, 'options'>>(({ style, ...rest }) => {\r\n  const options = useMemo(\r\n    () => [\r\n      {\r\n        label: (\r\n          <Flexbox horizontal align={'center'} gap={4}>\r\n            <MaterialFileTypeIcon\r\n              fallbackUnknownType={false}\r\n              filename={`*.txt`}\r\n              size={18}\r\n              type={'file'}\r\n              variant={'raw'}\r\n            />\r\n            <Text ellipsis fontSize={13}>\r\n              Plaintext\r\n            </Text>\r\n          </Flexbox>\r\n        ),\r\n        title: 'Plaintext,plaintext,*.text,*.txt',\r\n        value: 'plaintext',\r\n      },\r\n      ...bundledLanguagesInfo.map((item) => ({\r\n        label: (\r\n          <Flexbox horizontal align={'center'} gap={4}>\r\n            <MaterialFileTypeIcon\r\n              fallbackUnknownType={false}\r\n              filename={`*.${item?.aliases?.[0] || item.id}`}\r\n              size={18}\r\n              type={'file'}\r\n              variant={'raw'}\r\n            />\r\n            <Text ellipsis fontSize={13}>\r\n              {item.name}\r\n            </Text>\r\n          </Flexbox>\r\n        ),\r\n        title: [item.name, item.id, ...(item.aliases || []).map((alias) => `*.${alias}`)].join(','),\r\n        value: item.id,\r\n      })),\r\n    ],\r\n    [],\r\n  );\r\n\r\n  return (\r\n    <div style={{ maxWidth: 240, width: '100%' }} onClick={stopPropagation}>\r\n      <Select\r\n        showSearch\r\n        virtual\r\n        className={'language-title'}\r\n        options={options}\r\n        size={'small'}\r\n        style={{ width: '100%', ...style }}\r\n        suffixIcon={null}\r\n        variant={'borderless'}\r\n        {...rest}\r\n      />\r\n    </div>\r\n  );\r\n});\r\n\r\nexport default LangSelect;\r\n"],"mappings":";;;;;;;;;;AAWA,MAAa,aAAa,MAA4C,EAAE,OAAO,GAAG,WAAW;CAC3F,MAAM,UAAU,cACR,CACJ;EACE,OACE,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,KAAK;GAA1C,UAAA,CACE,oBAAC,sBAAD;IACE,qBAAqB;IACrB,UAAU;IACV,MAAM;IACN,MAAM;IACN,SAAS;GACV,CAAA,GACD,oBAAC,MAAD;IAAM,UAAA;IAAS,UAAU;IAAI,UAAA;GAEvB,CAAA,CACC;;EAEX,OAAO;EACP,OAAO;CACT,GACA,GAAG,qBAAqB,KAAK,UAAU;EACrC,OACE,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,KAAK;GAA1C,UAAA,CACE,oBAAC,sBAAD;IACE,qBAAqB;IACrB,UAAU,KAAK,MAAM,UAAU,MAAM,KAAK;IAC1C,MAAM;IACN,MAAM;IACN,SAAS;GACV,CAAA,GACD,oBAAC,MAAD;IAAM,UAAA;IAAS,UAAU;IACtB,UAAA,KAAK;GACF,CAAA,CACC;;EAEX,OAAO;GAAC,KAAK;GAAM,KAAK;GAAI,IAAI,KAAK,WAAW,CAAC,EAAA,CAAG,KAAK,UAAU,KAAK,OAAO;EAAC,CAAC,CAAC,KAAK,GAAG;EAC1F,OAAO,KAAK;CACd,EAAE,CACJ,GACA,CAAC,CACH;CAEA,OACE,oBAAC,OAAD;EAAK,OAAO;GAAE,UAAU;GAAK,OAAO;EAAO;EAAG,SAAS;EACrD,UAAA,oBAAC,QAAD;GACE,YAAA;GACA,SAAA;GACA,WAAW;GACF;GACT,MAAM;GACN,OAAO;IAAE,OAAO;IAAQ,GAAG;GAAM;GACjC,YAAY;GACZ,SAAS;GACT,GAAI;EACL,CAAA;CACE,CAAA;AAET,CAAC"}

package/es/Highlighter/SyntaxHighlighter/StaticRenderer.mjs

@@ -0,0 +1,30 @@
+"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
+	});
+	const containerClassName = typeof data === "string" && data.length > 0 ? className : fallbackClassName;
+	return /* @__PURE__ */ jsx("div", {
+		className: containerClassName,
+		dir: "ltr",
+		style,
+		dangerouslySetInnerHTML: { __html: data || `<pre><code>${escapeHtml(safeChildren)}</code></pre>` }
+	});
+});
+StaticRenderer.displayName = "StaticRenderer";
+//#endregion
+export { StaticRenderer 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';\r\n\r\nimport { type CSSProperties, memo } from 'react';\r\nimport type { BuiltinTheme } from 'shiki';\r\n\r\nimport { useHighlight } from '@/hooks/useHighlight';\r\n\r\ninterface StaticRendererProps {\r\n  children: string;\r\n  className?: string;\r\n  enableTransformer?: boolean;\r\n  fallbackClassName?: string;\r\n  language: string;\r\n  style?: CSSProperties;\r\n  theme?: BuiltinTheme;\r\n}\r\n\r\n// Escape HTML for fallback to prevent XSS\r\nconst escapeHtml = (str: string) =>\r\n  str\r\n    .replaceAll('&', '&amp;')\r\n    .replaceAll('<', '&lt;')\r\n    .replaceAll('>', '&gt;')\r\n    .replaceAll('\"', '&quot;')\r\n    .replaceAll(\"'\", '&#039;');\r\n\r\n/**\r\n * Static renderer for syntax highlighting without animation\r\n * Uses useHighlight hook to generate HTML and renders it directly\r\n */\r\nconst StaticRenderer = memo<StaticRendererProps>(\r\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\r\n    // Safely handle empty or invalid children\r\n    const safeChildren = children ?? '';\r\n\r\n    const data = useHighlight(safeChildren, {\r\n      enableTransformer,\r\n      language,\r\n      theme,\r\n    });\r\n\r\n    const hasData = typeof data === 'string' && data.length > 0;\r\n    const containerClassName = hasData ? className : fallbackClassName;\r\n\r\n    return (\r\n      <div\r\n        className={containerClassName}\r\n        dir=\"ltr\"\r\n        style={style}\r\n        dangerouslySetInnerHTML={{\r\n          __html: data || `<pre><code>${escapeHtml(safeChildren)}</code></pre>`,\r\n        }}\r\n      />\r\n    );\r\n  },\r\n);\r\n\r\nStaticRenderer.displayName = 'StaticRenderer';\r\n\r\nexport default StaticRenderer;\r\n"],"mappings":";;;;;AAkBA,MAAM,cAAc,QAClB,IACG,WAAW,KAAK,OAAO,CAAC,CACxB,WAAW,KAAK,MAAM,CAAC,CACvB,WAAW,KAAK,MAAM,CAAC,CACvB,WAAW,MAAK,QAAQ,CAAC,CACzB,WAAW,KAAK,QAAQ;;;;;AAM7B,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CAEzF,MAAM,eAAe,YAAY;CAEjC,MAAM,OAAO,aAAa,cAAc;EACtC;EACA;EACA;CACF,CAAC;CAGD,MAAM,qBADU,OAAO,SAAS,YAAY,KAAK,SAAS,IACrB,YAAY;CAEjD,OACE,oBAAC,OAAD;EACE,WAAW;EACX,KAAI;EACG;EACP,yBAAyB,EACvB,QAAQ,QAAQ,cAAc,WAAW,YAAY,EAAE,eACzD;CACD,CAAA;AAEL,CACF;AAEA,eAAe,cAAc"}

package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs

@@ -0,0 +1,106 @@
+"use client";
+import { useStreamHighlight } from "../../hooks/useStreamHighlight.mjs";
+import { createTokenFadeStore, markTokenBirths, resolveTokenFadeStyle } from "./tokenFade.mjs";
+import { memo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { getTokenStyleObject } from "@shikijs/core";
+//#region src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx
+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) => {
+	const rawStyle = token.htmlStyle || getTokenStyleObject(token);
+	return {
+		...normalizeStyleKeys(rawStyle),
+		whiteSpace: "pre"
+	};
+};
+const TokenSpan = memo(({ fadeStyle, token }) => {
+	const style = fadeStyle ? {
+		...getTokenInlineStyle(token),
+		...fadeStyle
+	} : getTokenInlineStyle(token);
+	return /* @__PURE__ */ jsx("span", {
+		className: fadeStyle ? "stream-char" : void 0,
+		style,
+		children: token.content
+	});
+}, (prev, next) => prev.token === next.token && prev.fadeStyle === next.fadeStyle);
+const TokenLine = memo(({ fade, line, now, start }) => {
+	if (!line.length) return /* @__PURE__ */ jsx("span", {
+		className: "line",
+		children: /* @__PURE__ */ jsx("span", {
+			style: { whiteSpace: "pre" },
+			children: "\xA0"
+		})
+	});
+	let offset = start;
+	return /* @__PURE__ */ jsx("span", {
+		className: "line",
+		children: line.map((token) => {
+			const tokenOffset = offset;
+			offset += token.content.length;
+			return /* @__PURE__ */ jsx(TokenSpan, {
+				fadeStyle: resolveTokenFadeStyle(fade, tokenOffset, now),
+				token
+			}, tokenOffset);
+		})
+	});
+}, (prev, next) => prev.line === next.line && prev.start === next.start);
+const StreamRenderer = memo(({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {
+	const safeChildren = children ?? "";
+	const streaming = useStreamHighlight(safeChildren, {
+		enableTransformer,
+		language,
+		streaming: true,
+		theme
+	});
+	const lines = streaming?.lines;
+	const preStyle = streaming?.preStyle;
+	const fadeRef = useRef(createTokenFadeStore());
+	const previousTextRef = useRef("");
+	if (!safeChildren.startsWith(previousTextRef.current)) fadeRef.current = createTokenFadeStore();
+	previousTextRef.current = safeChildren;
+	const now = performance.now();
+	const lineStarts = lines ? markTokenBirths(fadeRef.current, lines, now) : [];
+	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, {
+					fade: fadeRef.current,
+					line,
+					now,
+					start: lineStarts[index]
+				}, `line-${index}`))
+			})
+		})
+	});
+});
+StreamRenderer.displayName = "StreamRenderer";
+//#endregion
+export { StreamRenderer as default };
+
+//# sourceMappingURL=StreamRenderer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StreamRenderer.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { getTokenStyleObject } from '@shikijs/core';\r\nimport { cx } from 'antd-style';\r\nimport type { CSSProperties } from 'react';\r\nimport { memo, useRef } from 'react';\r\nimport type { BuiltinTheme, ThemedToken } from 'shiki';\r\n\r\nimport { useStreamHighlight } from '@/hooks/useStreamHighlight';\r\n\r\nimport {\r\n  createTokenFadeStore,\r\n  markTokenBirths,\r\n  resolveTokenFadeStyle,\r\n  type TokenFadeStore,\r\n} from './tokenFade';\r\n\r\ninterface StreamRendererProps {\r\n  children: string;\r\n  className?: string;\r\n  enableTransformer?: boolean;\r\n  fallbackClassName?: string;\r\n  language: string;\r\n  style?: CSSProperties;\r\n  theme?: BuiltinTheme;\r\n}\r\n\r\nconst normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {\r\n  const normalized: CSSProperties = {};\r\n  Object.entries(style).forEach(([key, value]) => {\r\n    const normalizedKey = key.replaceAll(/-([a-z])/g, (_, char) => char.toUpperCase());\r\n    (normalized as Record<string, string | number>)[normalizedKey] = value;\r\n  });\r\n  return normalized;\r\n};\r\n\r\nconst getTokenInlineStyle = (token: ThemedToken): CSSProperties => {\r\n  const rawStyle = token.htmlStyle || getTokenStyleObject(token);\r\n  const baseStyle = normalizeStyleKeys(rawStyle);\r\n  return { ...baseStyle, whiteSpace: 'pre' };\r\n};\r\n\r\nconst TokenSpan = memo(\r\n  ({ fadeStyle, token }: { fadeStyle?: CSSProperties | null; token: ThemedToken }) => {\r\n    const style = fadeStyle\r\n      ? { ...getTokenInlineStyle(token), ...fadeStyle }\r\n      : getTokenInlineStyle(token);\r\n    return (\r\n      <span className={fadeStyle ? 'stream-char' : undefined} style={style}>\r\n        {token.content}\r\n      </span>\r\n    );\r\n  },\r\n  (prev, next) => prev.token === next.token && prev.fadeStyle === next.fadeStyle,\r\n);\r\n\r\nconst TokenLine = memo(\r\n  ({\r\n    fade,\r\n    line,\r\n    now,\r\n    start,\r\n  }: {\r\n    fade: TokenFadeStore;\r\n    line: ThemedToken[];\r\n    now: number;\r\n    start: number;\r\n  }) => {\r\n    if (!line.length) {\r\n      return (\r\n        <span className=\"line\">\r\n          <span style={{ whiteSpace: 'pre' }}>{'\\u00A0'}</span>\r\n        </span>\r\n      );\r\n    }\r\n\r\n    let offset = start;\r\n    return (\r\n      <span className=\"line\">\r\n        {line.map((token) => {\r\n          const tokenOffset = offset;\r\n          offset += token.content.length;\r\n          return (\r\n            <TokenSpan\r\n              fadeStyle={resolveTokenFadeStyle(fade, tokenOffset, now)}\r\n              key={tokenOffset}\r\n              token={token}\r\n            />\r\n          );\r\n        })}\r\n      </span>\r\n    );\r\n  },\r\n  (prev, next) => prev.line === next.line && prev.start === next.start,\r\n);\r\n\r\nconst StreamRenderer = memo<StreamRendererProps>(\r\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\r\n    // Safely handle empty or invalid children\r\n    const safeChildren = children ?? '';\r\n\r\n    const streaming = useStreamHighlight(safeChildren, {\r\n      enableTransformer,\r\n      language,\r\n      streaming: true,\r\n      theme,\r\n    });\r\n\r\n    const lines = streaming?.lines;\r\n    const preStyle = streaming?.preStyle;\r\n\r\n    const fadeRef = useRef<TokenFadeStore>(createTokenFadeStore());\r\n    const previousTextRef = useRef('');\r\n    if (!safeChildren.startsWith(previousTextRef.current)) {\r\n      fadeRef.current = createTokenFadeStore();\r\n    }\r\n    previousTextRef.current = safeChildren;\r\n    const now = performance.now();\r\n    const lineStarts = lines ? markTokenBirths(fadeRef.current, lines, now) : [];\r\n\r\n    if (!lines || lines.length === 0) {\r\n      return (\r\n        <div className={fallbackClassName} dir=\"ltr\" style={style}>\r\n          <pre>\r\n            <code>{safeChildren}</code>\r\n          </pre>\r\n        </div>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <div className={className} dir=\"ltr\" style={style}>\r\n        <pre className={cx('shiki', theme)} style={preStyle} tabIndex={0}>\r\n          <code style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'pre' }}>\r\n            {lines.map((line, index) => (\r\n              <TokenLine\r\n                fade={fadeRef.current}\r\n                key={`line-${index}`}\r\n                line={line}\r\n                now={now}\r\n                start={lineStarts[index]}\r\n              />\r\n            ))}\r\n          </code>\r\n        </pre>\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nStreamRenderer.displayName = 'StreamRenderer';\r\n\r\nexport default StreamRenderer;\r\n"],"mappings":";;;;;;;;AA2BA,MAAM,sBAAsB,UAA0D;CACpF,MAAM,aAA4B,CAAC;CACnC,OAAO,QAAQ,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW;EAC9C,MAAM,gBAAgB,IAAI,WAAW,cAAc,GAAG,SAAS,KAAK,YAAY,CAAC;EACjF,WAAgD,iBAAiB;CACnE,CAAC;CACD,OAAO;AACT;AAEA,MAAM,uBAAuB,UAAsC;CACjE,MAAM,WAAW,MAAM,aAAa,oBAAoB,KAAK;CAE7D,OAAO;EAAE,GADS,mBAAmB,QACjB;EAAG,YAAY;CAAM;AAC3C;AAEA,MAAM,YAAY,MACf,EAAE,WAAW,YAAsE;CAClF,MAAM,QAAQ,YACV;EAAE,GAAG,oBAAoB,KAAK;EAAG,GAAG;CAAU,IAC9C,oBAAoB,KAAK;CAC7B,OACE,oBAAC,QAAD;EAAM,WAAW,YAAY,gBAAgB,KAAA;EAAkB;EAC5D,UAAA,MAAM;CACH,CAAA;AAEV,IACC,MAAM,SAAS,KAAK,UAAU,KAAK,SAAS,KAAK,cAAc,KAAK,SACvE;AAEA,MAAM,YAAY,MACf,EACC,MACA,MACA,KACA,YAMI;CACJ,IAAI,CAAC,KAAK,QACR,OACE,oBAAC,QAAD;EAAM,WAAU;EACd,UAAA,oBAAC,QAAD;GAAM,OAAO,EAAE,YAAY,MAAM;GAAI,UAAA;EAAe,CAAA;CAChD,CAAA;CAIV,IAAI,SAAS;CACb,OACE,oBAAC,QAAD;EAAM,WAAU;EACb,UAAA,KAAK,KAAK,UAAU;GACnB,MAAM,cAAc;GACpB,UAAU,MAAM,QAAQ;GACxB,OACE,oBAAC,WAAD;IACE,WAAW,sBAAsB,MAAM,aAAa,GAAG;IAEhD;GACR,GAFM,WAEN;EAEL,CAAC;CACG,CAAA;AAEV,IACC,MAAM,SAAS,KAAK,SAAS,KAAK,QAAQ,KAAK,UAAU,KAAK,KACjE;AAEA,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CAEzF,MAAM,eAAe,YAAY;CAEjC,MAAM,YAAY,mBAAmB,cAAc;EACjD;EACA;EACA,WAAW;EACX;CACF,CAAC;CAED,MAAM,QAAQ,WAAW;CACzB,MAAM,WAAW,WAAW;CAE5B,MAAM,UAAU,OAAuB,qBAAqB,CAAC;CAC7D,MAAM,kBAAkB,OAAO,EAAE;CACjC,IAAI,CAAC,aAAa,WAAW,gBAAgB,OAAO,GAClD,QAAQ,UAAU,qBAAqB;CAEzC,gBAAgB,UAAU;CAC1B,MAAM,MAAM,YAAY,IAAI;CAC5B,MAAM,aAAa,QAAQ,gBAAgB,QAAQ,SAAS,OAAO,GAAG,IAAI,CAAC;CAE3E,IAAI,CAAC,SAAS,MAAM,WAAW,GAC7B,OACE,oBAAC,OAAD;EAAK,WAAW;EAAmB,KAAI;EAAa;EAClD,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UAAO,aAAmB,CAAA,EACvB,CAAA;CACF,CAAA;CAIT,OACE,oBAAC,OAAD;EAAgB;EAAW,KAAI;EAAa;EAC1C,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,SAAS,KAAK;GAAG,OAAO;GAAU,UAAU;GAC7D,UAAA,oBAAC,QAAD;IAAM,OAAO;KAAE,SAAS;KAAQ,eAAe;KAAU,YAAY;IAAM;IACxE,UAAA,MAAM,KAAK,MAAM,UAChB,oBAAC,WAAD;KACE,MAAM,QAAQ;KAER;KACD;KACL,OAAO,WAAW;IACnB,GAJM,QAAQ,OAId,CACF;GACG,CAAA;EACH,CAAA;CACF,CAAA;AAET,CACF;AAEA,eAAe,cAAc"}

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

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

package/es/Highlighter/SyntaxHighlighter/index.mjs

@@ -0,0 +1,48 @@
+"use client";
+import StaticRenderer from "./StaticRenderer.mjs";
+import StreamRenderer from "./StreamRenderer.mjs";
+import { variants } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/Highlighter/SyntaxHighlighter/index.tsx
+const SyntaxHighlighter = memo(({ animated, children, className, enableTransformer, language, style, theme, variant = "borderless" }) => {
+	const isDefaultTheme = theme === "jinmi-theme" || !theme;
+	const showBackground = !isDefaultTheme && variant === "filled";
+	const resolvedTheme = isDefaultTheme ? void 0 : theme;
+	const shikiClassName = cx(variants({
+		animated,
+		shiki: true,
+		showBackground,
+		variant
+	}), className);
+	const fallbackClassName = cx(variants({
+		animated,
+		shiki: false,
+		showBackground,
+		variant
+	}), className);
+	if (animated) return /* @__PURE__ */ jsx(StreamRenderer, {
+		className: shikiClassName,
+		enableTransformer,
+		fallbackClassName,
+		language,
+		style,
+		theme: resolvedTheme,
+		children
+	});
+	return /* @__PURE__ */ jsx(StaticRenderer, {
+		className: shikiClassName,
+		enableTransformer,
+		fallbackClassName,
+		language,
+		style,
+		theme: resolvedTheme,
+		children
+	});
+}, (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.language === nextProps.language);
+SyntaxHighlighter.displayName = "SyntaxHighlighter";
+//#endregion
+export { SyntaxHighlighter as default };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/index.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { memo } from 'react';\r\n\r\nimport type { SyntaxHighlighterProps } from '../type';\r\nimport StaticRenderer from './StaticRenderer';\r\nimport StreamRenderer from './StreamRenderer';\r\nimport { variants } from './style';\r\n\r\nconst SyntaxHighlighter = memo<SyntaxHighlighterProps>(\r\n  ({\r\n    animated,\r\n    children,\r\n    className,\r\n    enableTransformer,\r\n    language,\r\n    style,\r\n    theme,\r\n    variant = 'borderless',\r\n  }) => {\r\n    const isDefaultTheme = theme === 'jinmi-theme' || !theme;\r\n    const showBackground = !isDefaultTheme && variant === 'filled';\r\n    const resolvedTheme = isDefaultTheme ? undefined : theme;\r\n\r\n    const shikiClassName = cx(\r\n      variants({ animated, shiki: true, showBackground, variant }),\r\n      className,\r\n    );\r\n    const fallbackClassName = cx(\r\n      variants({ animated, shiki: false, showBackground, variant }),\r\n      className,\r\n    );\r\n\r\n    if (animated) {\r\n      return (\r\n        <StreamRenderer\r\n          className={shikiClassName}\r\n          enableTransformer={enableTransformer}\r\n          fallbackClassName={fallbackClassName}\r\n          language={language}\r\n          style={style}\r\n          theme={resolvedTheme}\r\n        >\r\n          {children}\r\n        </StreamRenderer>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <StaticRenderer\r\n        className={shikiClassName}\r\n        enableTransformer={enableTransformer}\r\n        fallbackClassName={fallbackClassName}\r\n        language={language}\r\n        style={style}\r\n        theme={resolvedTheme}\r\n      >\r\n        {children}\r\n      </StaticRenderer>\r\n    );\r\n  },\r\n  (prevProps, nextProps) =>\r\n    prevProps.children === nextProps.children && prevProps.language === nextProps.language,\r\n);\r\n\r\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\r\n\r\nexport default SyntaxHighlighter;\r\n"],"mappings":";;;;;;;;AAUA,MAAM,oBAAoB,MACvB,EACC,UACA,UACA,WACA,mBACA,UACA,OACA,OACA,UAAU,mBACN;CACJ,MAAM,iBAAiB,UAAU,iBAAiB,CAAC;CACnD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,KAAA,IAAY;CAEnD,MAAM,iBAAiB,GACrB,SAAS;EAAE;EAAU,OAAO;EAAM;EAAgB;CAAQ,CAAC,GAC3D,SACF;CACA,MAAM,oBAAoB,GACxB,SAAS;EAAE;EAAU,OAAO;EAAO;EAAgB;CAAQ,CAAC,GAC5D,SACF;CAEA,IAAI,UACF,OACE,oBAAC,gBAAD;EACE,WAAW;EACQ;EACA;EACT;EACH;EACP,OAAO;EAEN;CACa,CAAA;CAIpB,OACE,oBAAC,gBAAD;EACE,WAAW;EACQ;EACA;EACT;EACH;EACP,OAAO;EAEN;CACa,CAAA;AAEpB,IACC,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,QAClF;AAEA,kBAAkB,cAAc"}

package/es/Highlighter/SyntaxHighlighter/style.mjs

@@ -0,0 +1,170 @@
+import { fadeIn } from "../../styles/animations.mjs";
+import { createStaticStyles, cx } from "antd-style";
+import { cva } from "class-variance-authority";
+import { STREAM_FADE_DURATION } from "@lobehub/streamdown";
+//#region src/Highlighter/SyntaxHighlighter/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	return {
+		animated: css`
+      .animate-fade-in,
+      .katex-html > .katex-base,
+      code:not(:has(span.line)) {
+        opacity: 1;
+        animation: ${fadeIn} 1s ease-in-out;
+      }
+
+      span.line > span.stream-char {
+        opacity: 0;
+        animation: ${fadeIn} ${STREAM_FADE_DURATION}ms cubic-bezier(0.33, 0, 0.67, 1) forwards;
+      }
+
+      /* 只对 .katex-base 级别的 span 应用流式动画，不要穿透到内部 */
+      .katex-display .katex-html span {
+        mask: none !important;
+        animation: none !important;
+      }
+    `,
+		noBackground: css`
+      pre {
+        background: transparent !important;
+      }
+    `,
+		noPadding: css`
+      pre {
+        padding: 0;
+      }
+    `,
+		padding: css`
+      pre {
+        padding: 16px;
+      }
+    `,
+		root: css`
+      direction: ltr;
+      margin: 0;
+      padding: 0;
+      text-align: start;
+
+      pre {
+        overflow-x: auto;
+        margin: 0;
+      }
+    `,
+		shiki: cx("ant-highlighter-highlighter-shiki", css`
+        pre {
+          user-select: none;
+
+          code {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+
+            .line {
+              user-select: text;
+
+              display: 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: ${cssVar.colorFillTertiary};
+
+            &.warning {
+              background: ${cssVar.colorWarningBg};
+            }
+
+            &.error {
+              background: ${cssVar.colorErrorBg};
+            }
+          }
+
+          .highlighted-word {
+            padding-block: 0.1em;
+            padding-inline: 0.2em;
+            border: 1px solid ${cssVar.colorBorderSecondary};
+            border-radius: ${cssVar.borderRadius};
+
+            background: ${cssVar.colorFillTertiary};
+          }
+
+          .diff {
+            &.remove {
+              background: ${cssVar.colorErrorBg};
+
+              &::before {
+                content: '-';
+
+                position: absolute;
+                inset-inline-start: 4px;
+
+                display: inline-block;
+
+                color: ${cssVar.colorErrorText};
+              }
+            }
+
+            &.add {
+              background: ${cssVar.colorSuccessBg};
+
+              &::before {
+                content: '+';
+
+                position: absolute;
+                inset-inline-start: 4px;
+
+                display: inline-block;
+
+                color: ${cssVar.colorSuccessText};
+              }
+            }
+          }
+        }
+      `),
+		unshiki: css`
+      color: ${cssVar.colorTextDescription};
+    `
+	};
+});
+const variants = cva(styles.root, {
+	defaultVariants: {
+		animated: false,
+		shiki: true,
+		showBackground: false,
+		variant: "borderless"
+	},
+	variants: {
+		shiki: {
+			false: styles.unshiki,
+			true: styles.shiki
+		},
+		showBackground: {
+			false: styles.noBackground,
+			true: null
+		},
+		animated: {
+			true: styles.animated,
+			false: null
+		},
+		variant: {
+			filled: styles.padding,
+			outlined: styles.padding,
+			borderless: styles.noPadding
+		}
+	}
+});
+//#endregion
+export { styles, variants };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/style.ts"],"sourcesContent":["import { STREAM_FADE_DURATION } from '@lobehub/streamdown';\r\nimport { createStaticStyles, cx } from 'antd-style';\r\nimport { cva } from 'class-variance-authority';\r\n\r\nimport { fadeIn } from '@/styles/animations';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => {\r\n  return {\r\n    animated: css`\r\n      .animate-fade-in,\r\n      .katex-html > .katex-base,\r\n      code:not(:has(span.line)) {\r\n        opacity: 1;\r\n        animation: ${fadeIn} 1s ease-in-out;\r\n      }\r\n\r\n      span.line > span.stream-char {\r\n        opacity: 0;\r\n        animation: ${fadeIn} ${STREAM_FADE_DURATION}ms cubic-bezier(0.33, 0, 0.67, 1) forwards;\r\n      }\r\n\r\n      /* 只对 .katex-base 级别的 span 应用流式动画，不要穿透到内部 */\r\n      .katex-display .katex-html span {\r\n        mask: none !important;\r\n        animation: none !important;\r\n      }\r\n    `,\r\n\r\n    noBackground: css`\r\n      pre {\r\n        background: transparent !important;\r\n      }\r\n    `,\r\n\r\n    noPadding: css`\r\n      pre {\r\n        padding: 0;\r\n      }\r\n    `,\r\n\r\n    padding: css`\r\n      pre {\r\n        padding: 16px;\r\n      }\r\n    `,\r\n    root: css`\r\n      direction: ltr;\r\n      margin: 0;\r\n      padding: 0;\r\n      text-align: start;\r\n\r\n      pre {\r\n        overflow-x: auto;\r\n        margin: 0;\r\n      }\r\n    `,\r\n    shiki: cx(\r\n      'ant-highlighter-highlighter-shiki',\r\n      css`\r\n        pre {\r\n          user-select: none;\r\n\r\n          code {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 4px;\r\n\r\n            .line {\r\n              user-select: text;\r\n\r\n              display: block;\r\n\r\n              width: calc(100% + 32px);\r\n              margin-block: 0;\r\n              margin-inline: -16px;\r\n              padding-block: 0;\r\n              padding-inline: 16px;\r\n            }\r\n          }\r\n\r\n          &.has-focused {\r\n            .line:not(.focused) {\r\n              opacity: 0.5;\r\n            }\r\n          }\r\n\r\n          .highlighted {\r\n            background: ${cssVar.colorFillTertiary};\r\n\r\n            &.warning {\r\n              background: ${cssVar.colorWarningBg};\r\n            }\r\n\r\n            &.error {\r\n              background: ${cssVar.colorErrorBg};\r\n            }\r\n          }\r\n\r\n          .highlighted-word {\r\n            padding-block: 0.1em;\r\n            padding-inline: 0.2em;\r\n            border: 1px solid ${cssVar.colorBorderSecondary};\r\n            border-radius: ${cssVar.borderRadius};\r\n\r\n            background: ${cssVar.colorFillTertiary};\r\n          }\r\n\r\n          .diff {\r\n            &.remove {\r\n              background: ${cssVar.colorErrorBg};\r\n\r\n              &::before {\r\n                content: '-';\r\n\r\n                position: absolute;\r\n                inset-inline-start: 4px;\r\n\r\n                display: inline-block;\r\n\r\n                color: ${cssVar.colorErrorText};\r\n              }\r\n            }\r\n\r\n            &.add {\r\n              background: ${cssVar.colorSuccessBg};\r\n\r\n              &::before {\r\n                content: '+';\r\n\r\n                position: absolute;\r\n                inset-inline-start: 4px;\r\n\r\n                display: inline-block;\r\n\r\n                color: ${cssVar.colorSuccessText};\r\n              }\r\n            }\r\n          }\r\n        }\r\n      `,\r\n    ),\r\n    unshiki: css`\r\n      color: ${cssVar.colorTextDescription};\r\n    `,\r\n  };\r\n});\r\n\r\nexport const variants = cva(styles.root, {\r\n  defaultVariants: {\r\n    animated: false,\r\n    shiki: true,\r\n    showBackground: false,\r\n    variant: 'borderless',\r\n  },\r\n\r\n  variants: {\r\n    shiki: {\r\n      false: styles.unshiki,\r\n      true: styles.shiki,\r\n    },\r\n    showBackground: {\r\n      false: styles.noBackground,\r\n      true: null,\r\n    },\r\n    animated: {\r\n      true: styles.animated,\r\n      false: null,\r\n    },\r\n    variant: {\r\n      filled: styles.padding,\r\n      outlined: styles.padding,\r\n      borderless: styles.noPadding,\r\n    },\r\n  },\r\n});\r\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,UAAU,GAAG;;;;;qBAKI,OAAO;;;;;qBAKP,OAAO,GAAG,qBAAqB;;;;;;;;;EAUhD,cAAc,GAAG;;;;;EAMjB,WAAW,GAAG;;;;;EAMd,SAAS,GAAG;;;;;EAKZ,MAAM,GAAG;;;;;;;;;;;EAWT,OAAO,GACL,qCACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA6BiB,OAAO,kBAAkB;;;4BAGvB,OAAO,eAAe;;;;4BAItB,OAAO,aAAa;;;;;;;gCAOhB,OAAO,qBAAqB;6BAC/B,OAAO,aAAa;;0BAEvB,OAAO,kBAAkB;;;;;4BAKvB,OAAO,aAAa;;;;;;;;;;yBAUvB,OAAO,eAAe;;;;;4BAKnB,OAAO,eAAe;;;;;;;;;;yBAUzB,OAAO,iBAAiB;;;;;OAM7C;EACA,SAAS,GAAG;eACD,OAAO,qBAAqB;;CAEzC;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,UAAU;EACV,OAAO;EACP,gBAAgB;EAChB,SAAS;CACX;CAEA,UAAU;EACR,OAAO;GACL,OAAO,OAAO;GACd,MAAM,OAAO;EACf;EACA,gBAAgB;GACd,OAAO,OAAO;GACd,MAAM;EACR;EACA,UAAU;GACR,MAAM,OAAO;GACb,OAAO;EACT;EACA,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;EACrB;CACF;AACF,CAAC"}