@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/Highlighter/FullFeatured.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName, getCodeLanguageFilename } from '@/Highlighter/const';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport LangSelect from './LangSelect';\nimport { bodyVariants, headerVariants, variants } from './style';\nimport { type HighlighterProps } from './type';\n\ninterface HeaderLanguageProps {\n  allowChangeLanguage: boolean;\n  displayName: string;\n  fileName?: string;\n  filetype: string;\n  icon?: ReactNode;\n  language: string;\n  setLanguage?: (language: string) => void;\n  showLanguage?: boolean;\n}\n\nconst HeaderLanguage = memo<HeaderLanguageProps>(\n  ({\n    allowChangeLanguage,\n    displayName,\n    fileName,\n    filetype,\n    icon,\n    language,\n    setLanguage,\n    showLanguage,\n  }) => {\n    if (!showLanguage) return null;\n\n    if (allowChangeLanguage && !fileName)\n      return <LangSelect value={language.toLowerCase()} onSelect={setLanguage} />;\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={'language-title'}\n        flex={1}\n        gap={4}\n        justify={'flex-start'}\n        paddingInline={8}\n      >\n        {icon || (\n          <MaterialFileTypeIcon\n            fallbackUnknownType={false}\n            filename={filetype}\n            size={18}\n            type={'file'}\n            variant={'raw'}\n          />\n        )}\n        <Text ellipsis fontSize={13}>\n          {displayName}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.allowChangeLanguage === next.allowChangeLanguage &&\n    prev.displayName === next.displayName &&\n    prev.fileName === next.fileName &&\n    prev.filetype === next.filetype &&\n    prev.icon === next.icon &&\n    prev.language === next.language &&\n    prev.setLanguage === next.setLanguage &&\n    prev.showLanguage === next.showLanguage,\n);\n\ninterface HighlighterFullFeaturedProps extends Omit<\n  HighlighterProps,\n  'children' | 'bodyRender' | 'enableTransformer'\n> {\n  content: string;\n  setLanguage?: (language: string) => void;\n}\n\nexport const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps & { children: ReactNode }>(\n  ({\n    content,\n    language,\n    setLanguage,\n    showLanguage,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    allowChangeLanguage = false,\n    fileName,\n    icon,\n    actionsRender,\n    copyable,\n    variant,\n    shadow,\n    wrap,\n    defaultExpand = true,\n    children,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return <CopyButton content={getContent} size={'small'} />;\n    }, [copyable, getContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize: 'small',\n        content,\n        getContent,\n        language,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, language, originalActions]);\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const filetype = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageFilename(language);\n    }, [fileName, language]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        className={cx(variants({ shadow, variant, wrap }), className)}\n        data-code-type=\"highlighter\"\n        style={style}\n        {...rest}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(headerVariants({ variant }), classNames?.header)}\n          justify={'space-between'}\n          style={customStyles?.header}\n          onClick={handleToggleExpand}\n        >\n          <HeaderLanguage\n            allowChangeLanguage={allowChangeLanguage}\n            displayName={displayName}\n            fileName={fileName}\n            filetype={filetype}\n            icon={icon}\n            language={language}\n            setLanguage={setLanguage}\n            showLanguage={showLanguage}\n          />\n          <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\n            <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\n              {actions}\n            </Flexbox>\n            <ActionIcon\n              icon={expand ? ChevronDown : ChevronRight}\n              size={'small'}\n              onClick={handleToggleExpand}\n            />\n          </Flexbox>\n        </Flexbox>\n        <Flexbox\n          className={cx(bodyVariants({ expand }), classNames?.body)}\n          style={customStyles?.body}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default HighlighterFullFeatured;\n"],"mappings":"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"}
+{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName, getCodeLanguageFilename } from '@/Highlighter/const';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport LangSelect from './LangSelect';\nimport {\n  bodyStyles,\n  expandCls,\n  headerFlexProps,\n  headerStyles,\n  rootClassName,\n  rootStyles,\n} from './style';\nimport { type HighlighterProps } from './type';\n\ninterface HeaderLanguageProps {\n  allowChangeLanguage: boolean;\n  displayName: string;\n  fileName?: string;\n  filetype: string;\n  icon?: ReactNode;\n  language: string;\n  setLanguage?: (language: string) => void;\n  showLanguage?: boolean;\n}\n\nconst HeaderLanguage = memo<HeaderLanguageProps>(\n  ({\n    allowChangeLanguage,\n    displayName,\n    fileName,\n    filetype,\n    icon,\n    language,\n    setLanguage,\n    showLanguage,\n  }) => {\n    if (!showLanguage) return null;\n\n    if (allowChangeLanguage && !fileName)\n      return <LangSelect value={language.toLowerCase()} onSelect={setLanguage} />;\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={'language-title'}\n        flex={1}\n        gap={4}\n        justify={'flex-start'}\n        paddingInline={8}\n      >\n        {icon || (\n          <MaterialFileTypeIcon\n            fallbackUnknownType={false}\n            filename={filetype}\n            size={18}\n            type={'file'}\n            variant={'raw'}\n          />\n        )}\n        <Text ellipsis fontSize={13}>\n          {displayName}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.allowChangeLanguage === next.allowChangeLanguage &&\n    prev.displayName === next.displayName &&\n    prev.fileName === next.fileName &&\n    prev.filetype === next.filetype &&\n    prev.icon === next.icon &&\n    prev.language === next.language &&\n    prev.setLanguage === next.setLanguage &&\n    prev.showLanguage === next.showLanguage,\n);\n\ninterface HighlighterFullFeaturedProps extends Omit<\n  HighlighterProps,\n  'children' | 'bodyRender' | 'enableTransformer'\n> {\n  content: string;\n  setLanguage?: (language: string) => void;\n}\n\nexport const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps & { children: ReactNode }>(\n  ({\n    content,\n    language,\n    setLanguage,\n    showLanguage,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    allowChangeLanguage = false,\n    fileName,\n    icon,\n    actionsRender,\n    copyable,\n    variant,\n    shadow,\n    wrap,\n    defaultExpand = true,\n    children,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return <CopyButton content={getContent} size={'small'} />;\n    }, [copyable, getContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize: 'small',\n        content,\n        getContent,\n        language,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, language, originalActions]);\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const filetype = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageFilename(language);\n    }, [fileName, language]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        data-code-type=\"highlighter\"\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(wrap, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          justify={'space-between'}\n          onClick={handleToggleExpand}\n          {...headerFlexProps(variant)}\n          {...styleProps(headerStyles(variant), classNames?.header, customStyles?.header)}\n        >\n          <HeaderLanguage\n            allowChangeLanguage={allowChangeLanguage}\n            displayName={displayName}\n            fileName={fileName}\n            filetype={filetype}\n            icon={icon}\n            language={language}\n            setLanguage={setLanguage}\n            showLanguage={showLanguage}\n          />\n          <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\n            <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\n              {actions}\n            </Flexbox>\n            <ActionIcon\n              icon={expand ? ChevronDown : ChevronRight}\n              size={'small'}\n              onClick={handleToggleExpand}\n            />\n          </Flexbox>\n        </Flexbox>\n        <Flexbox\n          height={expand ? undefined : 0}\n          {...styleProps(\n            bodyStyles(expand, variant),\n            clsx(expand && expandCls, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default HighlighterFullFeatured;\n"],"mappings":";;;;;;;;;;;;;;;;AAqCA,MAAM,iBAAiB,MACpB,EACC,qBACA,aACA,UACA,UACA,MACA,UACA,aACA,mBACI;CACJ,IAAI,CAAC,cAAc,OAAO;CAE1B,IAAI,uBAAuB,CAAC,UAC1B,OAAO,oBAAC,YAAD;EAAY,OAAO,SAAS,YAAY;EAAG,UAAU;CAAc,CAAA;CAE5E,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW;EACX,MAAM;EACN,KAAK;EACL,SAAS;EACT,eAAe;EAPjB,UAAA,CASG,QACC,oBAAC,sBAAD;GACE,qBAAqB;GACrB,UAAU;GACV,MAAM;GACN,MAAM;GACN,SAAS;EACV,CAAA,GAEH,oBAAC,MAAD;GAAM,UAAA;GAAS,UAAU;GACtB,UAAA;EACG,CAAA,CACC;;AAEb,IACC,MAAM,SACL,KAAK,wBAAwB,KAAK,uBAClC,KAAK,gBAAgB,KAAK,eAC1B,KAAK,aAAa,KAAK,YACvB,KAAK,aAAa,KAAK,YACvB,KAAK,SAAS,KAAK,QACnB,KAAK,aAAa,KAAK,YACvB,KAAK,gBAAgB,KAAK,eAC1B,KAAK,iBAAiB,KAAK,YAC/B;AAUA,MAAa,0BAA0B,MACpC,EACC,SACA,UACA,aACA,cACA,WACA,YACA,QAAQ,cACR,OACA,sBAAsB,OACtB,UACA,MACA,eACA,UACA,SACA,QACA,MACA,gBAAgB,MAChB,UACA,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;GACA,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAe;EAAS;EAAY;EAAU;CAAe,CAAC;CAElE,MAAM,cAAc,cAAc;EAChC,IAAI,UAAU,OAAO;EACrB,OAAO,2BAA2B,QAAQ;CAC5C,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,WAAW,cAAc;EAC7B,IAAI,UAAU,OAAO;EACrB,OAAO,wBAAwB,QAAQ;CACzC,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,qBAAqB,kBAAkB;EAC3C,WAAW,SAAS,CAAC,IAAI;CAC3B,GAAG,CAAC,CAAC;CAEL,OACE,qBAACA,mBAAD;EACE,kBAAe;EACf,OAAO;EACP,GAAI;EACJ,GAAI,WAAW,WAAW;GAAE;GAAQ;EAAQ,CAAC,GAAG,cAAc,MAAM,SAAS,GAAG,KAAK;EAJvF,UAAA,CAME,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,SAAS;GACT,SAAS;GACT,GAAI,gBAAgB,OAAO;GAC3B,GAAI,WAAW,aAAa,OAAO,GAAG,YAAY,QAAQ,cAAc,MAAM;GANhF,UAAA,CAQE,oBAAC,gBAAD;IACuB;IACR;IACH;IACA;IACJ;IACI;IACG;IACC;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,QAAQ,SAAS,KAAA,IAAY;GAC7B,GAAI,WACF,WAAW,QAAQ,OAAO,GAC1B,KAAK,UAAA,2CAAqB,YAAY,IAAI,GAC1C,cAAc,IAChB;GAEC;EACM,CAAA,CACF;;AAEb,CACF"}

package/es/Highlighter/Highlighter.d.mts

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

package/es/Highlighter/Highlighter.mjs

@@ -1,14 +1,14 @@
 "use client";
+import { styleProps } from "../styles/stylex/props.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import Tag from "../base-ui/Tag/Tag.mjs";
+import Tag from "../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 { actionsHoverCls, rootClassName, rootStyles, styles } 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);
@@ -117,24 +117,24 @@ const Highlighter = memo(({ animated, fullFeatured, actionIconSize, children, la
 		children: body
 	});
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx(variants({
-			shadow,
-			variant,
-			wrap
-		}), className),
 		"data-code-type": "highlighter",
+		width: "100%",
 		...rest,
+		...styleProps(rootStyles({
+			shadow,
+			variant
+		}), rootClassName(wrap, className), rest.style),
 		children: [
 			/* @__PURE__ */ jsx(FlexBasic_default, {
 				horizontal: true,
 				align: "center",
-				className: styles.actions,
 				flex: "none",
 				gap: 4,
+				...styleProps(styles.actions, actionsHoverCls),
 				children: actions
 			}),
 			showLanguage && language && /* @__PURE__ */ jsx(Tag, {
-				className: styles.lang,
+				className: "ant-highlighter-highlighter-hover-lang lobe-highlighter-lang",
 				children: displayName
 			}),
 			body

package/es/Highlighter/Highlighter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Highlighter.mjs","names":["FullFeatured","Flexbox"],"sources":["../../src/Highlighter/Highlighter.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport Tag from '@/base-ui/Tag';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName } from '@/Highlighter/const';\n\nimport FullFeatured from './FullFeatured';\nimport { styles, variants } from './style';\nimport SyntaxHighlighter from './SyntaxHighlighter';\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 [lang, setLang] = useState(language);\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          glass\n          content={getCopyContent}\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          theme={theme}\n          variant={variant}\n          style={{\n            height: '100%',\n            ...customStyles?.content,\n          }}\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 horizontal align={'center'} className={styles.actions} flex={'none'} gap={4}>\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":";;;;;;;;;;;;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"}
+{"version":3,"file":"Highlighter.mjs","names":["FullFeatured","Flexbox"],"sources":["../../src/Highlighter/Highlighter.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName } from '@/Highlighter/const';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tag from '@/Tag';\n\nimport FullFeatured from './FullFeatured';\nimport { actionsHoverCls, langHoverCls, rootClassName, rootStyles, styles } from './style';\nimport SyntaxHighlighter from './SyntaxHighlighter';\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 [lang, setLang] = useState(language);\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          glass\n          content={getCopyContent}\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          theme={theme}\n          variant={variant}\n          style={{\n            height: '100%',\n            ...customStyles?.content,\n          }}\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        data-code-type=\"highlighter\"\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(wrap, className), rest.style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          flex={'none'}\n          gap={4}\n          {...styleProps(styles.actions, actionsHoverCls)}\n        >\n          {actions}\n        </Flexbox>\n        {showLanguage && language && <Tag className={langHoverCls}>{displayName}</Tag>}\n        {body}\n      </Flexbox>\n    );\n  },\n);\n\nHighlighter.displayName = 'Highlighter';\n\nexport default Highlighter;\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,kBAAe;EACf,OAAO;EACP,GAAI;EACJ,GAAI,WAAW,WAAW;GAAE;GAAQ;EAAQ,CAAC,GAAG,cAAc,MAAM,SAAS,GAAG,KAAK,KAAK;EAJ5F,UAAA;GAME,oBAACA,mBAAD;IACE,YAAA;IACA,OAAO;IACP,MAAM;IACN,KAAK;IACL,GAAI,WAAW,OAAO,SAAS,eAAe;IAE7C,UAAA;GACM,CAAA;GACR,gBAAgB,YAAY,oBAAC,KAAD;IAAK,WAAA;IAA0B,UAAA;GAAiB,CAAA;GAC5E;EACM;;AAEb,CACF;AAEA,YAAY,cAAc"}

package/es/Highlighter/LangSelect.mjs

@@ -1,9 +1,9 @@
 "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 { stopPropagation } from "../utils/dom.mjs";
+import Select from "../Select/Select.mjs";
 import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { bundledLanguagesInfo } from "shiki";

package/es/Highlighter/LangSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LangSelect.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/LangSelect.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useMemo } from 'react';\nimport { bundledLanguagesInfo } from 'shiki';\n\nimport Select, { type SelectProps } from '@/base-ui/Select';\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nexport const LangSelect = memo<Omit<SelectProps<string>, 'options'>>(({ style, ...rest }) => {\n  const options = useMemo(\n    () => [\n      {\n        label: (\n          <Flexbox horizontal align={'center'} gap={4}>\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        title: 'Plaintext,plaintext,*.text,*.txt',\n        value: 'plaintext',\n      },\n      ...bundledLanguagesInfo.map((item) => ({\n        label: (\n          <Flexbox horizontal align={'center'} gap={4}>\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.name, item.id, ...(item.aliases || []).map((alias) => `*.${alias}`)].join(','),\n        value: item.id,\n      })),\n    ],\n    [],\n  );\n\n  return (\n    <div style={{ maxWidth: 240, width: '100%' }} onClick={stopPropagation}>\n      <Select\n        showSearch\n        virtual\n        className={'language-title'}\n        options={options}\n        size={'small'}\n        style={{ width: '100%', ...style }}\n        suffixIcon={null}\n        variant={'borderless'}\n        {...rest}\n      />\n    </div>\n  );\n});\n\nexport default LangSelect;\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"}
+{"version":3,"file":"LangSelect.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/LangSelect.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useMemo } from 'react';\nimport { bundledLanguagesInfo } from 'shiki';\n\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Select, { type SelectProps } from '@/Select';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nexport const LangSelect = memo<Omit<SelectProps<string>, 'options'>>(({ style, ...rest }) => {\n  const options = useMemo(\n    () => [\n      {\n        label: (\n          <Flexbox horizontal align={'center'} gap={4}>\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        title: 'Plaintext,plaintext,*.text,*.txt',\n        value: 'plaintext',\n      },\n      ...bundledLanguagesInfo.map((item) => ({\n        label: (\n          <Flexbox horizontal align={'center'} gap={4}>\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.name, item.id, ...(item.aliases || []).map((alias) => `*.${alias}`)].join(','),\n        value: item.id,\n      })),\n    ],\n    [],\n  );\n\n  return (\n    <div style={{ maxWidth: 240, width: '100%' }} onClick={stopPropagation}>\n      <Select\n        showSearch\n        virtual\n        className={'language-title'}\n        options={options}\n        size={'small'}\n        style={{ width: '100%', ...style }}\n        suffixIcon={null}\n        variant={'borderless'}\n        {...rest}\n      />\n    </div>\n  );\n});\n\nexport default LangSelect;\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/StreamRenderer.mjs

@@ -3,7 +3,7 @@ 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 clsx from "clsx";
 import { getTokenStyleObject } from "@shikijs/core";
 //#region src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx
 const normalizeStyleKeys = (style) => {
@@ -80,7 +80,7 @@ const StreamRenderer = memo(({ children, className, enableTransformer, fallbackC
 		dir: "ltr",
 		style,
 		children: /* @__PURE__ */ jsx("pre", {
-			className: cx("shiki", theme),
+			className: clsx("shiki", theme),
 			style: preStyle,
 			tabIndex: 0,
 			children: /* @__PURE__ */ jsx("code", {

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

@@ -1 +1 @@
-{"version":3,"file":"StreamRenderer.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { getTokenStyleObject } from '@shikijs/core';\nimport { cx } from 'antd-style';\nimport type { CSSProperties } from 'react';\nimport { memo, useRef } from 'react';\nimport type { BuiltinTheme, ThemedToken } from 'shiki';\n\nimport { useStreamHighlight } from '@/hooks/useStreamHighlight';\n\nimport {\n  createTokenFadeStore,\n  markTokenBirths,\n  resolveTokenFadeStyle,\n  type TokenFadeStore,\n} from './tokenFade';\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 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 = (token: ThemedToken): CSSProperties => {\n  const rawStyle = token.htmlStyle || getTokenStyleObject(token);\n  const baseStyle = normalizeStyleKeys(rawStyle);\n  return { ...baseStyle, whiteSpace: 'pre' };\n};\n\nconst TokenSpan = memo(\n  ({ fadeStyle, token }: { fadeStyle?: CSSProperties | null; token: ThemedToken }) => {\n    const style = fadeStyle\n      ? { ...getTokenInlineStyle(token), ...fadeStyle }\n      : getTokenInlineStyle(token);\n    return (\n      <span className={fadeStyle ? 'stream-char' : undefined} style={style}>\n        {token.content}\n      </span>\n    );\n  },\n  (prev, next) => prev.token === next.token && prev.fadeStyle === next.fadeStyle,\n);\n\nconst TokenLine = memo(\n  ({\n    fade,\n    line,\n    now,\n    start,\n  }: {\n    fade: TokenFadeStore;\n    line: ThemedToken[];\n    now: number;\n    start: number;\n  }) => {\n    if (!line.length) {\n      return (\n        <span className=\"line\">\n          <span style={{ whiteSpace: 'pre' }}>{'\\u00A0'}</span>\n        </span>\n      );\n    }\n\n    let offset = start;\n    return (\n      <span className=\"line\">\n        {line.map((token) => {\n          const tokenOffset = offset;\n          offset += token.content.length;\n          return (\n            <TokenSpan\n              fadeStyle={resolveTokenFadeStyle(fade, tokenOffset, now)}\n              key={tokenOffset}\n              token={token}\n            />\n          );\n        })}\n      </span>\n    );\n  },\n  (prev, next) => prev.line === next.line && prev.start === next.start,\n);\n\nconst StreamRenderer = memo<StreamRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const streaming = useStreamHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      streaming: true,\n      theme,\n    });\n\n    const lines = streaming?.lines;\n    const preStyle = streaming?.preStyle;\n\n    const fadeRef = useRef<TokenFadeStore>(createTokenFadeStore());\n    const previousTextRef = useRef('');\n    if (!safeChildren.startsWith(previousTextRef.current)) {\n      fadeRef.current = createTokenFadeStore();\n    }\n    previousTextRef.current = safeChildren;\n    const now = performance.now();\n    const lineStarts = lines ? markTokenBirths(fadeRef.current, lines, now) : [];\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\n                fade={fadeRef.current}\n                key={`line-${index}`}\n                line={line}\n                now={now}\n                start={lineStarts[index]}\n              />\n            ))}\n          </code>\n        </pre>\n      </div>\n    );\n  },\n);\n\nStreamRenderer.displayName = 'StreamRenderer';\n\nexport default StreamRenderer;\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"}
+{"version":3,"file":"StreamRenderer.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { getTokenStyleObject } from '@shikijs/core';\nimport clsx from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { memo, useRef } from 'react';\nimport type { BuiltinTheme, ThemedToken } from 'shiki';\n\nimport { useStreamHighlight } from '@/hooks/useStreamHighlight';\n\nimport {\n  createTokenFadeStore,\n  markTokenBirths,\n  resolveTokenFadeStyle,\n  type TokenFadeStore,\n} from './tokenFade';\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 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 = (token: ThemedToken): CSSProperties => {\n  const rawStyle = token.htmlStyle || getTokenStyleObject(token);\n  const baseStyle = normalizeStyleKeys(rawStyle);\n  return { ...baseStyle, whiteSpace: 'pre' };\n};\n\nconst TokenSpan = memo(\n  ({ fadeStyle, token }: { fadeStyle?: CSSProperties | null; token: ThemedToken }) => {\n    const style = fadeStyle\n      ? { ...getTokenInlineStyle(token), ...fadeStyle }\n      : getTokenInlineStyle(token);\n    return (\n      <span className={fadeStyle ? 'stream-char' : undefined} style={style}>\n        {token.content}\n      </span>\n    );\n  },\n  (prev, next) => prev.token === next.token && prev.fadeStyle === next.fadeStyle,\n);\n\nconst TokenLine = memo(\n  ({\n    fade,\n    line,\n    now,\n    start,\n  }: {\n    fade: TokenFadeStore;\n    line: ThemedToken[];\n    now: number;\n    start: number;\n  }) => {\n    if (!line.length) {\n      return (\n        <span className=\"line\">\n          <span style={{ whiteSpace: 'pre' }}>{'\\u00A0'}</span>\n        </span>\n      );\n    }\n\n    let offset = start;\n    return (\n      <span className=\"line\">\n        {line.map((token) => {\n          const tokenOffset = offset;\n          offset += token.content.length;\n          return (\n            <TokenSpan\n              fadeStyle={resolveTokenFadeStyle(fade, tokenOffset, now)}\n              key={tokenOffset}\n              token={token}\n            />\n          );\n        })}\n      </span>\n    );\n  },\n  (prev, next) => prev.line === next.line && prev.start === next.start,\n);\n\nconst StreamRenderer = memo<StreamRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const streaming = useStreamHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      streaming: true,\n      theme,\n    });\n\n    const lines = streaming?.lines;\n    const preStyle = streaming?.preStyle;\n\n    const fadeRef = useRef<TokenFadeStore>(createTokenFadeStore());\n    const previousTextRef = useRef('');\n    if (!safeChildren.startsWith(previousTextRef.current)) {\n      fadeRef.current = createTokenFadeStore();\n    }\n    previousTextRef.current = safeChildren;\n    const now = performance.now();\n    const lineStarts = lines ? markTokenBirths(fadeRef.current, lines, now) : [];\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={clsx('shiki', theme)} style={preStyle} tabIndex={0}>\n          <code style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'pre' }}>\n            {lines.map((line, index) => (\n              <TokenLine\n                fade={fadeRef.current}\n                key={`line-${index}`}\n                line={line}\n                now={now}\n                start={lineStarts[index]}\n              />\n            ))}\n          </code>\n        </pre>\n      </div>\n    );\n  },\n);\n\nStreamRenderer.displayName = 'StreamRenderer';\n\nexport default StreamRenderer;\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,KAAK,SAAS,KAAK;GAAG,OAAO;GAAU,UAAU;GAC/D,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

@@ -1,3 +1,4 @@
+import "../../styles/stylex/props.mjs";
 import { SyntaxHighlighterProps } from "../type.mjs";
 //#region src/Highlighter/SyntaxHighlighter/index.d.ts
 declare const SyntaxHighlighter: import("react").NamedExoticComponent<SyntaxHighlighterProps>;

package/es/Highlighter/SyntaxHighlighter/index.mjs

@@ -1,48 +1,41 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import StaticRenderer from "./StaticRenderer.mjs";
 import StreamRenderer from "./StreamRenderer.mjs";
-import { variants } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import clsx from "clsx";
+import { STREAM_FADE_DURATION } from "@lobehub/streamdown";
 //#region src/Highlighter/SyntaxHighlighter/index.tsx
-const SyntaxHighlighter = memo(({ animated, children, className, enableTransformer, language, style, theme, variant = "borderless" }) => {
+const SyntaxHighlighterImpl = memo(({ animated, children, className, enableTransformer, language, style, theme, variant = "borderless", xstyle }) => {
 	const isDefaultTheme = theme === "lobe-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,
+	const classes = clsx("lobe-syntax-highlighter", !showBackground && "lobe-syntax-highlighter-transparent", animated && "lobe-syntax-highlighter-animated", variant === "borderless" ? "lobe-syntax-highlighter-unpadded" : "lobe-syntax-highlighter-padded");
+	const mergedStyle = animated ? {
+		"--lobe-syntax-highlighter-stream-fade": `${STREAM_FADE_DURATION}ms`,
+		...style
+	} : style;
+	const shiki = styleProps([styles.root, xstyle], clsx(classes, "ant-highlighter-highlighter-shiki lobe-syntax-highlighter-shiki", className), mergedStyle);
+	const fallback = styleProps([
+		styles.root,
+		styles.unshiki,
+		xstyle
+	], clsx(classes, className), mergedStyle);
+	return /* @__PURE__ */ jsx(animated ? StreamRenderer : StaticRenderer, {
+		className: shiki.className,
 		enableTransformer,
-		fallbackClassName,
+		fallbackClassName: fallback.className,
 		language,
-		style,
-		theme: resolvedTheme,
-		children
-	});
-	return /* @__PURE__ */ jsx(StaticRenderer, {
-		className: shikiClassName,
-		enableTransformer,
-		fallbackClassName,
-		language,
-		style,
+		style: shiki.style,
 		theme: resolvedTheme,
 		children
 	});
 }, (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.language === nextProps.language);
+const SyntaxHighlighter = memo((props) => /* @__PURE__ */ jsx(SyntaxHighlighterImpl, { ...props }));
 SyntaxHighlighter.displayName = "SyntaxHighlighter";
 //#endregion
-export { SyntaxHighlighter as default };
+export { SyntaxHighlighterImpl, SyntaxHighlighter as default };
 
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport type { SyntaxHighlighterProps } from '../type';\nimport StaticRenderer from './StaticRenderer';\nimport StreamRenderer from './StreamRenderer';\nimport { variants } 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 isDefaultTheme = theme === 'lobe-theme' || !theme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : theme;\n\n    const shikiClassName = cx(\n      variants({ animated, shiki: true, showBackground, variant }),\n      className,\n    );\n    const fallbackClassName = cx(\n      variants({ animated, shiki: false, showBackground, variant }),\n      className,\n    );\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,iBAAiB,UAAU,gBAAgB,CAAC;CAClD,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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/index.tsx"],"sourcesContent":["'use client';\n\nimport { STREAM_FADE_DURATION } from '@lobehub/streamdown';\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { SyntaxHighlighterProps } from '../type';\nimport StaticRenderer from './StaticRenderer';\nimport StreamRenderer from './StreamRenderer';\nimport { styles } from './style';\n\ntype SyntaxHighlighterImplProps = SyntaxHighlighterProps & {\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nexport const SyntaxHighlighterImpl = memo<SyntaxHighlighterImplProps>(\n  ({\n    animated,\n    children,\n    className,\n    enableTransformer,\n    language,\n    style,\n    theme,\n    variant = 'borderless',\n    xstyle,\n  }) => {\n    const isDefaultTheme = theme === 'lobe-theme' || !theme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : theme;\n\n    const classes = clsx(\n      'lobe-syntax-highlighter',\n      !showBackground && 'lobe-syntax-highlighter-transparent',\n      animated && 'lobe-syntax-highlighter-animated',\n      variant === 'borderless'\n        ? 'lobe-syntax-highlighter-unpadded'\n        : 'lobe-syntax-highlighter-padded',\n    );\n    const mergedStyle = animated\n      ? ({\n          '--lobe-syntax-highlighter-stream-fade': `${STREAM_FADE_DURATION}ms`,\n          ...style,\n        } as CSSProperties)\n      : style;\n\n    const shiki = styleProps(\n      [styles.root, xstyle],\n      clsx(classes, 'ant-highlighter-highlighter-shiki lobe-syntax-highlighter-shiki', className),\n      mergedStyle,\n    );\n    const fallback = styleProps(\n      [styles.root, styles.unshiki, xstyle],\n      clsx(classes, className),\n      mergedStyle,\n    );\n\n    const Renderer = animated ? StreamRenderer : StaticRenderer;\n\n    return (\n      <Renderer\n        className={shiki.className}\n        enableTransformer={enableTransformer}\n        fallbackClassName={fallback.className}\n        language={language}\n        style={shiki.style}\n        theme={resolvedTheme}\n      >\n        {children}\n      </Renderer>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.language === nextProps.language,\n);\n\nconst SyntaxHighlighter = memo<SyntaxHighlighterProps>((props) => (\n  <SyntaxHighlighterImpl {...props} />\n));\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n\nexport default SyntaxHighlighter;\n"],"mappings":";;;;;;;;;;AAiBA,MAAa,wBAAwB,MAClC,EACC,UACA,UACA,WACA,mBACA,UACA,OACA,OACA,UAAU,cACV,aACI;CACJ,MAAM,iBAAiB,UAAU,gBAAgB,CAAC;CAClD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,KAAA,IAAY;CAEnD,MAAM,UAAU,KACd,2BACA,CAAC,kBAAkB,uCACnB,YAAY,oCACZ,YAAY,eACR,qCACA,gCACN;CACA,MAAM,cAAc,WACf;EACC,yCAAyC,GAAG,qBAAqB;EACjE,GAAG;CACL,IACA;CAEJ,MAAM,QAAQ,WACZ,CAAC,OAAO,MAAM,MAAM,GACpB,KAAK,SAAS,mEAAmE,SAAS,GAC1F,WACF;CACA,MAAM,WAAW,WACf;EAAC,OAAO;EAAM,OAAO;EAAS;CAAM,GACpC,KAAK,SAAS,SAAS,GACvB,WACF;CAIA,OACE,oBAHe,WAAW,iBAAiB,gBAG3C;EACE,WAAW,MAAM;EACE;EACnB,mBAAmB,SAAS;EAClB;EACV,OAAO,MAAM;EACb,OAAO;EAEN;CACO,CAAA;AAEd,IACC,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,QAClF;AAEA,MAAM,oBAAoB,MAA8B,UACtD,oBAAC,uBAAD,EAAuB,GAAI,MAAQ,CAAA,CACpC;AAED,kBAAkB,cAAc"}

package/es/Highlighter/SyntaxHighlighter/style.mjs

@@ -1,170 +1,18 @@
-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"
+const styles = {
+	root: {
+		kogj98: "lb1ghz6dp",
+		kmVPX3: "lb1717udv",
+		ksoyAI: "lbzt5al7",
+		k9WMMc: "lb1yc453h",
+		$$css: true
 	},
-	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
-		}
+	unshiki: {
+		kMwMTN: "lb19ppog9",
+		$$css: true
 	}
-});
+};
 //#endregion
-export { styles, variants };
+export { styles };
 
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/style.ts"],"sourcesContent":["import { STREAM_FADE_DURATION } from '@lobehub/streamdown';\nimport { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { fadeIn } from '@/styles/animations';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    animated: css`\n      .animate-fade-in,\n      .katex-html > .katex-base,\n      code:not(:has(span.line)) {\n        opacity: 1;\n        animation: ${fadeIn} 1s ease-in-out;\n      }\n\n      span.line > span.stream-char {\n        opacity: 0;\n        animation: ${fadeIn} ${STREAM_FADE_DURATION}ms cubic-bezier(0.33, 0, 0.67, 1) forwards;\n      }\n\n      /* 只对 .katex-base 级别的 span 应用流式动画，不要穿透到内部 */\n      .katex-display .katex-html span {\n        mask: none !important;\n        animation: none !important;\n      }\n    `,\n\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      }\n    `,\n    shiki: cx(\n      'ant-highlighter-highlighter-shiki',\n      css`\n        pre {\n          user-select: none;\n\n          code {\n            display: flex;\n            flex-direction: column;\n            gap: 4px;\n\n            .line {\n              user-select: text;\n\n              display: 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: ${cssVar.colorFillTertiary};\n\n            &.warning {\n              background: ${cssVar.colorWarningBg};\n            }\n\n            &.error {\n              background: ${cssVar.colorErrorBg};\n            }\n          }\n\n          .highlighted-word {\n            padding-block: 0.1em;\n            padding-inline: 0.2em;\n            border: 1px solid ${cssVar.colorBorderSecondary};\n            border-radius: ${cssVar.borderRadius};\n\n            background: ${cssVar.colorFillTertiary};\n          }\n\n          .diff {\n            &.remove {\n              background: ${cssVar.colorErrorBg};\n\n              &::before {\n                content: '-';\n\n                position: absolute;\n                inset-inline-start: 4px;\n\n                display: inline-block;\n\n                color: ${cssVar.colorErrorText};\n              }\n            }\n\n            &.add {\n              background: ${cssVar.colorSuccessBg};\n\n              &::before {\n                content: '+';\n\n                position: absolute;\n                inset-inline-start: 4px;\n\n                display: inline-block;\n\n                color: ${cssVar.colorSuccessText};\n              }\n            }\n          }\n        }\n      `,\n    ),\n    unshiki: css`\n      color: ${cssVar.colorTextDescription};\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    animated: false,\n    shiki: true,\n    showBackground: false,\n    variant: 'borderless',\n  },\n\n  variants: {\n    shiki: {\n      false: styles.unshiki,\n      true: styles.shiki,\n    },\n    showBackground: {\n      false: styles.noBackground,\n      true: null,\n    },\n    animated: {\n      true: styles.animated,\n      false: null,\n    },\n    variant: {\n      filled: styles.padding,\n      outlined: styles.padding,\n      borderless: styles.noPadding,\n    },\n  },\n});\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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  root: {\n    margin: 0,\n    padding: 0,\n    direction: 'ltr',\n    textAlign: 'start',\n  },\n  unshiki: {\n    color: cssVar.colorTextDescription,\n  },\n});\n"],"mappings":";AAIA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Highlighter/const.d.mts

@@ -3,7 +3,6 @@ interface HighlighterThemeItem {
   displayName: string;
   id: string;
 }
-declare const highlighterThemes: HighlighterThemeItem[];
+export declare const highlighterThemes: HighlighterThemeItem[];
 //#endregion
-export { highlighterThemes };
 //# sourceMappingURL=const.d.mts.map