@lobehub/ui 4.3.2 → 4.3.3

package/es/chat/TokenTag/TokenTag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TokenTag.mjs","names":["TokenTag: FC<TokenTagProps>","chatMessages","type: 'normal' | 'low' | 'overload'","ActionIcon"],"sources":["../../../src/chat/TokenTag/TokenTag.tsx"],"sourcesContent":["'use client';\n\nimport { Progress } from 'antd';\nimport { useTheme } from 'antd-style';\nimport numeral from 'numeral';\nimport { type FC, useMemo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport chatMessages from '@/i18n/resources/en/chat';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport type { TokenTagProps } from './type';\n\nconst format = (number: number) => numeral(number).format('0,0');\n\nconst TokenTag: FC<TokenTagProps> = ({\n  mode = 'remained',\n  maxValue,\n  value,\n  text,\n  showInfo,\n  size = 20,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const { t } = useTranslation(chatMessages);\n  const valueLeft = maxValue - value;\n  const percent = value / maxValue;\n  const remainedText = text?.remained ?? t('tokenTag.remained');\n  const usedText = text?.used ?? t('tokenTag.used');\n  const overloadText = text?.overload ?? t('tokenTag.overload');\n\n  const data = useMemo(() => {\n    let type: 'normal' | 'low' | 'overload';\n    let color;\n\n    if (percent < 0.7) {\n      type = 'normal';\n      color = theme.colorText;\n    } else if (percent < 0.9) {\n      type = 'low';\n      color = theme.colorWarning;\n    } else {\n      type = 'overload';\n      color = theme.colorError;\n    }\n    return {\n      color,\n      type,\n    };\n  }, [percent, theme]);\n\n  const title =\n    valueLeft > 0\n      ? [\n          mode === 'remained' ? remainedText : usedText,\n          mode === 'remained' ? format(valueLeft) : format(value),\n        ].join(' ')\n      : overloadText;\n\n  return (\n    <ActionIcon\n      icon={\n        <Progress\n          percent={percent * 100}\n          showInfo={false}\n          size={Number(typeof size === 'object' ? size?.size || 20 : size) || 20}\n          strokeColor={data.color}\n          type=\"circle\"\n        />\n      }\n      size={size}\n      title={showInfo ? title : undefined}\n      {...rest}\n    />\n  );\n};\n\nTokenTag.displayName = 'TokenTag';\n\nexport default TokenTag;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,UAAU,WAAmB,QAAQ,OAAO,CAAC,OAAO,MAAM;AAEhE,MAAMA,YAA+B,EACnC,OAAO,YACP,UACA,OACA,MACA,UACA,OAAO,IACP,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,MAAM,eAAeC,aAAa;CAC1C,MAAM,YAAY,WAAW;CAC7B,MAAM,UAAU,QAAQ;CACxB,MAAM,eAAe,MAAM,YAAY,EAAE,oBAAoB;CAC7D,MAAM,WAAW,MAAM,QAAQ,EAAE,gBAAgB;CACjD,MAAM,eAAe,MAAM,YAAY,EAAE,oBAAoB;CAE7D,MAAM,OAAO,cAAc;EACzB,IAAIC;EACJ,IAAI;AAEJ,MAAI,UAAU,IAAK;AACjB,UAAO;AACP,WAAQ,MAAM;aACL,UAAU,IAAK;AACxB,UAAO;AACP,WAAQ,MAAM;SACT;AACL,UAAO;AACP,WAAQ,MAAM;;AAEhB,SAAO;GACL;GACA;GACD;IACA,CAAC,SAAS,MAAM,CAAC;CAEpB,MAAM,QACJ,YAAY,IACR,CACE,SAAS,aAAa,eAAe,UACrC,SAAS,aAAa,OAAO,UAAU,GAAG,OAAO,MAAM,CACxD,CAAC,KAAK,IAAI,GACX;AAEN,QACE,oBAACC;EACC,MACE,oBAAC;GACC,SAAS,UAAU;GACnB,UAAU;GACV,MAAM,OAAO,OAAO,SAAS,WAAW,MAAM,QAAQ,KAAK,KAAK,IAAI;GACpE,aAAa,KAAK;GAClB,MAAK;IACL;EAEE;EACN,OAAO,WAAW,QAAQ;EAC1B,GAAI;GACJ;;AAIN,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"TokenTag.mjs","names":["TokenTag: FC<TokenTagProps>","chatMessages","type: 'normal' | 'low' | 'overload'","ActionIcon"],"sources":["../../../src/chat/TokenTag/TokenTag.tsx"],"sourcesContent":["'use client';\n\nimport { Progress } from 'antd';\nimport { cssVar } from 'antd-style';\nimport numeral from 'numeral';\nimport { type FC, useMemo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport chatMessages from '@/i18n/resources/en/chat';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport type { TokenTagProps } from './type';\n\nconst format = (number: number) => numeral(number).format('0,0');\n\nconst TokenTag: FC<TokenTagProps> = ({\n  mode = 'remained',\n  maxValue,\n  value,\n  text,\n  showInfo,\n  size = 20,\n  ...rest\n}) => {\n  const { t } = useTranslation(chatMessages);\n  const valueLeft = maxValue - value;\n  const percent = value / maxValue;\n  const remainedText = text?.remained ?? t('tokenTag.remained');\n  const usedText = text?.used ?? t('tokenTag.used');\n  const overloadText = text?.overload ?? t('tokenTag.overload');\n\n  const data = useMemo(() => {\n    let type: 'normal' | 'low' | 'overload';\n    let color;\n\n    if (percent < 0.7) {\n      type = 'normal';\n      color = cssVar.colorText;\n    } else if (percent < 0.9) {\n      type = 'low';\n      color = cssVar.colorWarning;\n    } else {\n      type = 'overload';\n      color = cssVar.colorError;\n    }\n    return {\n      color,\n      type,\n    };\n  }, [percent]);\n\n  const title =\n    valueLeft > 0\n      ? [\n          mode === 'remained' ? remainedText : usedText,\n          mode === 'remained' ? format(valueLeft) : format(value),\n        ].join(' ')\n      : overloadText;\n\n  return (\n    <ActionIcon\n      icon={\n        <Progress\n          percent={percent * 100}\n          showInfo={false}\n          size={Number(typeof size === 'object' ? size?.size || 20 : size) || 20}\n          strokeColor={data.color}\n          type=\"circle\"\n        />\n      }\n      size={size}\n      title={showInfo ? title : undefined}\n      {...rest}\n    />\n  );\n};\n\nTokenTag.displayName = 'TokenTag';\n\nexport default TokenTag;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,UAAU,WAAmB,QAAQ,OAAO,CAAC,OAAO,MAAM;AAEhE,MAAMA,YAA+B,EACnC,OAAO,YACP,UACA,OACA,MACA,UACA,OAAO,IACP,GAAG,WACC;CACJ,MAAM,EAAE,MAAM,eAAeC,aAAa;CAC1C,MAAM,YAAY,WAAW;CAC7B,MAAM,UAAU,QAAQ;CACxB,MAAM,eAAe,MAAM,YAAY,EAAE,oBAAoB;CAC7D,MAAM,WAAW,MAAM,QAAQ,EAAE,gBAAgB;CACjD,MAAM,eAAe,MAAM,YAAY,EAAE,oBAAoB;CAE7D,MAAM,OAAO,cAAc;EACzB,IAAIC;EACJ,IAAI;AAEJ,MAAI,UAAU,IAAK;AACjB,UAAO;AACP,WAAQ,OAAO;aACN,UAAU,IAAK;AACxB,UAAO;AACP,WAAQ,OAAO;SACV;AACL,UAAO;AACP,WAAQ,OAAO;;AAEjB,SAAO;GACL;GACA;GACD;IACA,CAAC,QAAQ,CAAC;CAEb,MAAM,QACJ,YAAY,IACR,CACE,SAAS,aAAa,eAAe,UACrC,SAAS,aAAa,OAAO,UAAU,GAAG,OAAO,MAAM,CACxD,CAAC,KAAK,IAAI,GACX;AAEN,QACE,oBAACC;EACC,MACE,oBAAC;GACC,SAAS,UAAU;GACnB,UAAU;GACV,MAAM,OAAO,OAAO,SAAS,WAAW,MAAM,QAAQ,KAAK,KAAK,IAAI;GACpE,aAAa,KAAK;GAClB,MAAK;IACL;EAEE;EACN,OAAO,WAAW,QAAQ;EAC1B,GAAI;GACJ;;AAIN,SAAS,cAAc;AAEvB,uBAAe"}

package/es/color/ColorScales/ScaleRow.mjs

@@ -1,13 +1,12 @@
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import { copyToClipboard } from "../../utils/copyToClipboard.mjs";
-import { alphaBg, useStyles } from "./style.mjs";
+import { alphaBg, styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Space, message } from "antd";
 
 //#region src/color/ColorScales/ScaleRow.tsx
 const ScaleRow = memo(({ name, title, scale }) => {
-	const { styles } = useStyles();
 	let style = {};
 	let isAlpha = false;
 	switch (title) {

package/es/color/ColorScales/ScaleRow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScaleRow.mjs","names":["Flexbox"],"sources":["../../../src/color/ColorScales/ScaleRow.tsx"],"sourcesContent":["import { Space, message } from 'antd';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { copyToClipboard } from '@/utils/copyToClipboard';\n\nimport { alphaBg, useStyles } from './style';\n\nexport interface IScaleRow {\n  name: string;\n  scale: string[];\n  title: 'light' | 'lightA' | 'dark' | 'darkA';\n}\n\nconst ScaleRow = memo<IScaleRow>(({ name, title, scale }) => {\n  const { styles } = useStyles();\n\n  let style = {};\n  let isAlpha = false;\n\n  switch (title) {\n    case 'lightA': {\n      style = { background: alphaBg.light, backgroundColor: '#fff' };\n      isAlpha = true;\n      break;\n    }\n    case 'darkA': {\n      style = { background: alphaBg.dark, backgroundColor: '#000' };\n      isAlpha = true;\n      break;\n    }\n    default: {\n      break;\n    }\n  }\n\n  return (\n    <Space size={2}>\n      <div className={styles.scaleRowTitle} key={title}>\n        <div className={styles.text}>{title}</div>\n      </div>\n      {scale.map((color, index) => {\n        if (index === 0 || index === 12) return false;\n\n        return (\n          <div\n            className={styles.scaleBox}\n            key={index}\n            onClick={async () => {\n              const content = `token.${name}${index}${isAlpha ? 'A' : ''} /* ${color} */`;\n\n              await copyToClipboard(content);\n              message.success(content);\n            }}\n            style={style}\n            title={color}\n          >\n            <Flexbox\n              align={'center'}\n              className={styles.scaleItem}\n              horizontal\n              justify={'center'}\n              style={{ backgroundColor: color }}\n            />\n          </div>\n        );\n      })}\n    </Space>\n  );\n});\n\nexport default ScaleRow;\n"],"mappings":";;;;;;;;AAcA,MAAM,WAAW,MAAiB,EAAE,MAAM,OAAO,YAAY;CAC3D,MAAM,EAAE,WAAW,WAAW;CAE9B,IAAI,QAAQ,EAAE;CACd,IAAI,UAAU;AAEd,SAAQ,OAAR;EACE,KAAK;AACH,WAAQ;IAAE,YAAY,QAAQ;IAAO,iBAAiB;IAAQ;AAC9D,aAAU;AACV;EAEF,KAAK;AACH,WAAQ;IAAE,YAAY,QAAQ;IAAM,iBAAiB;IAAQ;AAC7D,aAAU;AACV;EAEF,QACE;;AAIJ,QACE,qBAAC;EAAM,MAAM;aACX,oBAAC;GAAI,WAAW,OAAO;aACrB,oBAAC;IAAI,WAAW,OAAO;cAAO;KAAY;KADD,MAErC,EACL,MAAM,KAAK,OAAO,UAAU;AAC3B,OAAI,UAAU,KAAK,UAAU,GAAI,QAAO;AAExC,UACE,oBAAC;IACC,WAAW,OAAO;IAElB,SAAS,YAAY;KACnB,MAAM,UAAU,SAAS,OAAO,QAAQ,UAAU,MAAM,GAAG,MAAM,MAAM;AAEvE,WAAM,gBAAgB,QAAQ;AAC9B,aAAQ,QAAQ,QAAQ;;IAEnB;IACP,OAAO;cAEP,oBAACA;KACC,OAAO;KACP,WAAW,OAAO;KAClB;KACA,SAAS;KACT,OAAO,EAAE,iBAAiB,OAAO;MACjC;MAhBG,MAiBD;IAER;GACI;EAEV;AAEF,uBAAe"}
+{"version":3,"file":"ScaleRow.mjs","names":["Flexbox"],"sources":["../../../src/color/ColorScales/ScaleRow.tsx"],"sourcesContent":["import { Space, message } from 'antd';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { copyToClipboard } from '@/utils/copyToClipboard';\n\nimport { alphaBg, styles } from './style';\n\nexport interface IScaleRow {\n  name: string;\n  scale: string[];\n  title: 'light' | 'lightA' | 'dark' | 'darkA';\n}\n\nconst ScaleRow = memo<IScaleRow>(({ name, title, scale }) => {\n  let style = {};\n  let isAlpha = false;\n\n  switch (title) {\n    case 'lightA': {\n      style = { background: alphaBg.light, backgroundColor: '#fff' };\n      isAlpha = true;\n      break;\n    }\n    case 'darkA': {\n      style = { background: alphaBg.dark, backgroundColor: '#000' };\n      isAlpha = true;\n      break;\n    }\n    default: {\n      break;\n    }\n  }\n\n  return (\n    <Space size={2}>\n      <div className={styles.scaleRowTitle} key={title}>\n        <div className={styles.text}>{title}</div>\n      </div>\n      {scale.map((color, index) => {\n        if (index === 0 || index === 12) return false;\n\n        return (\n          <div\n            className={styles.scaleBox}\n            key={index}\n            onClick={async () => {\n              const content = `token.${name}${index}${isAlpha ? 'A' : ''} /* ${color} */`;\n\n              await copyToClipboard(content);\n              message.success(content);\n            }}\n            style={style}\n            title={color}\n          >\n            <Flexbox\n              align={'center'}\n              className={styles.scaleItem}\n              horizontal\n              justify={'center'}\n              style={{ backgroundColor: color }}\n            />\n          </div>\n        );\n      })}\n    </Space>\n  );\n});\n\nexport default ScaleRow;\n"],"mappings":";;;;;;;;AAcA,MAAM,WAAW,MAAiB,EAAE,MAAM,OAAO,YAAY;CAC3D,IAAI,QAAQ,EAAE;CACd,IAAI,UAAU;AAEd,SAAQ,OAAR;EACE,KAAK;AACH,WAAQ;IAAE,YAAY,QAAQ;IAAO,iBAAiB;IAAQ;AAC9D,aAAU;AACV;EAEF,KAAK;AACH,WAAQ;IAAE,YAAY,QAAQ;IAAM,iBAAiB;IAAQ;AAC7D,aAAU;AACV;EAEF,QACE;;AAIJ,QACE,qBAAC;EAAM,MAAM;aACX,oBAAC;GAAI,WAAW,OAAO;aACrB,oBAAC;IAAI,WAAW,OAAO;cAAO;KAAY;KADD,MAErC,EACL,MAAM,KAAK,OAAO,UAAU;AAC3B,OAAI,UAAU,KAAK,UAAU,GAAI,QAAO;AAExC,UACE,oBAAC;IACC,WAAW,OAAO;IAElB,SAAS,YAAY;KACnB,MAAM,UAAU,SAAS,OAAO,QAAQ,UAAU,MAAM,GAAG,MAAM,MAAM;AAEvE,WAAM,gBAAgB,QAAQ;AAC9B,aAAQ,QAAQ,QAAQ;;IAEnB;IACP,OAAO;cAEP,oBAACA;KACC,OAAO;KACP,WAAW,OAAO;KAClB;KACA,SAAS;KACT,OAAO,EAAE,iBAAiB,OAAO;MACjC;MAhBG,MAiBD;IAER;GACI;EAEV;AAEF,uBAAe"}

package/es/color/ColorScales/index.d.mts

@@ -1,5 +1,5 @@
 import { ColorScaleItem } from "../types.mjs";
-import * as react6 from "react";
+import * as react41 from "react";
 
 //#region src/color/ColorScales/index.d.ts
 interface ColorScalesProps {
@@ -16,7 +16,7 @@ interface ColorScalesProps {
    */
   scale: ColorScaleItem;
 }
-declare const ColorScales: react6.NamedExoticComponent<ColorScalesProps>;
+declare const ColorScales: react41.NamedExoticComponent<ColorScalesProps>;
 //#endregion
 export { ColorScales, ColorScalesProps };
 //# sourceMappingURL=index.d.mts.map

package/es/color/ColorScales/index.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import ScaleRow_default from "./ScaleRow.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,7 +9,6 @@ import { Space } from "antd";
 
 //#region src/color/ColorScales/index.tsx
 const ColorScales = memo(({ name, scale, midHighLight }) => {
-	const { styles } = useStyles();
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
 		align: "center",
 		flex: 1,

package/es/color/ColorScales/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox","ScaleRow"],"sources":["../../../src/color/ColorScales/index.tsx"],"sourcesContent":["'use client';\n\nimport { Space } from 'antd';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { ColorScaleItem } from '../types';\nimport ScaleRow from './ScaleRow';\nimport { useStyles } from './style';\n\nexport interface ColorScalesProps {\n  /**\n   * @description Index of the mid highlight color in the scale\n   */\n  midHighLight: number;\n  /**\n   * @description Name of the color scale\n   */\n  name: string;\n  /**\n   * @description Color scale item object\n   */\n  scale: ColorScaleItem;\n}\n\nconst ColorScales = memo<ColorScalesProps>(({ name, scale, midHighLight }) => {\n  const { styles } = useStyles();\n\n  return (\n    <Flexbox align={'center'} flex={1} horizontal justify={'center'}>\n      <div style={{ padding: '8px 16px 32px 0' }}>\n        <Space direction={'vertical'} size={2}>\n          <Space key=\"scale-title\" size={2}>\n            <Flexbox align={'center'} className={styles.scaleRowTitle} horizontal key=\"scale-num\" />\n            {Array.from({ length: scale.light.length })\n              .fill('')\n              .map((_, index) => {\n                if (index === 0 || index === 12) return false;\n\n                const isMidHighlight = midHighLight === index;\n\n                return (\n                  <div className={styles.scaleBox} key={`num${index}`}>\n                    <div className={styles.scaleBox}>\n                      <Flexbox\n                        align={'center'}\n                        className={styles.scaleItem}\n                        horizontal\n                        justify={'center'}\n                        style={{\n                          fontWeight: isMidHighlight ? 700 : 400,\n                          opacity: 0.5,\n                        }}\n                      >\n                        {index}\n                      </Flexbox>\n                    </div>\n                  </div>\n                );\n              })}\n          </Space>\n          <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n          <ScaleRow key=\"lightA\" name={name} scale={scale.lightA} title=\"lightA\" />\n          <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n          <ScaleRow key=\"darkA\" name={name} scale={scale.darkA} title=\"darkA\" />\n        </Space>\n      </div>\n    </Flexbox>\n  );\n});\n\nexport default ColorScales;\n"],"mappings":";;;;;;;;;;AA0BA,MAAM,cAAc,MAAwB,EAAE,MAAM,OAAO,mBAAmB;CAC5E,MAAM,EAAE,WAAW,WAAW;AAE9B,QACE,oBAACA;EAAQ,OAAO;EAAU,MAAM;EAAG;EAAW,SAAS;YACrD,oBAAC;GAAI,OAAO,EAAE,SAAS,mBAAmB;aACxC,qBAAC;IAAM,WAAW;IAAY,MAAM;;KAClC,qBAAC;MAAwB,MAAM;iBAC7B,oBAACA;OAAQ,OAAO;OAAU,WAAW,OAAO;OAAe;SAAe,YAAc,EACvF,MAAM,KAAK,EAAE,QAAQ,MAAM,MAAM,QAAQ,CAAC,CACxC,KAAK,GAAG,CACR,KAAK,GAAG,UAAU;AACjB,WAAI,UAAU,KAAK,UAAU,GAAI,QAAO;OAExC,MAAM,iBAAiB,iBAAiB;AAExC,cACE,oBAAC;QAAI,WAAW,OAAO;kBACrB,oBAAC;SAAI,WAAW,OAAO;mBACrB,oBAACA;UACC,OAAO;UACP,WAAW,OAAO;UAClB;UACA,SAAS;UACT,OAAO;WACL,YAAY,iBAAiB,MAAM;WACnC,SAAS;WACV;oBAEA;WACO;UACN;UAd8B,MAAM,QAetC;QAER;QA3BK,cA4BH;KACR,oBAACC;MAA2B;MAAM,OAAO,MAAM;MAAO,OAAM;QAA9C,QAAwD;KACtE,oBAACA;MAA4B;MAAM,OAAO,MAAM;MAAQ,OAAM;QAAhD,SAA2D;KACzE,oBAACA;MAA0B;MAAM,OAAO,MAAM;MAAM,OAAM;QAA5C,OAAqD;KACnE,oBAACA;MAA2B;MAAM,OAAO,MAAM;MAAO,OAAM;QAA9C,QAAwD;;KAChE;IACJ;GACE;EAEZ;AAEF,0BAAe"}
+{"version":3,"file":"index.mjs","names":["Flexbox","ScaleRow"],"sources":["../../../src/color/ColorScales/index.tsx"],"sourcesContent":["'use client';\n\nimport { Space } from 'antd';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { ColorScaleItem } from '../types';\nimport ScaleRow from './ScaleRow';\nimport { styles } from './style';\n\nexport interface ColorScalesProps {\n  /**\n   * @description Index of the mid highlight color in the scale\n   */\n  midHighLight: number;\n  /**\n   * @description Name of the color scale\n   */\n  name: string;\n  /**\n   * @description Color scale item object\n   */\n  scale: ColorScaleItem;\n}\n\nconst ColorScales = memo<ColorScalesProps>(({ name, scale, midHighLight }) => {\n  return (\n    <Flexbox align={'center'} flex={1} horizontal justify={'center'}>\n      <div style={{ padding: '8px 16px 32px 0' }}>\n        <Space direction={'vertical'} size={2}>\n          <Space key=\"scale-title\" size={2}>\n            <Flexbox align={'center'} className={styles.scaleRowTitle} horizontal key=\"scale-num\" />\n            {Array.from({ length: scale.light.length })\n              .fill('')\n              .map((_, index) => {\n                if (index === 0 || index === 12) return false;\n\n                const isMidHighlight = midHighLight === index;\n\n                return (\n                  <div className={styles.scaleBox} key={`num${index}`}>\n                    <div className={styles.scaleBox}>\n                      <Flexbox\n                        align={'center'}\n                        className={styles.scaleItem}\n                        horizontal\n                        justify={'center'}\n                        style={{\n                          fontWeight: isMidHighlight ? 700 : 400,\n                          opacity: 0.5,\n                        }}\n                      >\n                        {index}\n                      </Flexbox>\n                    </div>\n                  </div>\n                );\n              })}\n          </Space>\n          <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n          <ScaleRow key=\"lightA\" name={name} scale={scale.lightA} title=\"lightA\" />\n          <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n          <ScaleRow key=\"darkA\" name={name} scale={scale.darkA} title=\"darkA\" />\n        </Space>\n      </div>\n    </Flexbox>\n  );\n});\n\nexport default ColorScales;\n"],"mappings":";;;;;;;;;;AA0BA,MAAM,cAAc,MAAwB,EAAE,MAAM,OAAO,mBAAmB;AAC5E,QACE,oBAACA;EAAQ,OAAO;EAAU,MAAM;EAAG;EAAW,SAAS;YACrD,oBAAC;GAAI,OAAO,EAAE,SAAS,mBAAmB;aACxC,qBAAC;IAAM,WAAW;IAAY,MAAM;;KAClC,qBAAC;MAAwB,MAAM;iBAC7B,oBAACA;OAAQ,OAAO;OAAU,WAAW,OAAO;OAAe;SAAe,YAAc,EACvF,MAAM,KAAK,EAAE,QAAQ,MAAM,MAAM,QAAQ,CAAC,CACxC,KAAK,GAAG,CACR,KAAK,GAAG,UAAU;AACjB,WAAI,UAAU,KAAK,UAAU,GAAI,QAAO;OAExC,MAAM,iBAAiB,iBAAiB;AAExC,cACE,oBAAC;QAAI,WAAW,OAAO;kBACrB,oBAAC;SAAI,WAAW,OAAO;mBACrB,oBAACA;UACC,OAAO;UACP,WAAW,OAAO;UAClB;UACA,SAAS;UACT,OAAO;WACL,YAAY,iBAAiB,MAAM;WACnC,SAAS;WACV;oBAEA;WACO;UACN;UAd8B,MAAM,QAetC;QAER;QA3BK,cA4BH;KACR,oBAACC;MAA2B;MAAM,OAAO,MAAM;MAAO,OAAM;QAA9C,QAAwD;KACtE,oBAACA;MAA4B;MAAM,OAAO,MAAM;MAAQ,OAAM;QAAhD,SAA2D;KACzE,oBAACA;MAA0B;MAAM,OAAO,MAAM;MAAM,OAAM;QAA5C,OAAqD;KACnE,oBAACA;MAA2B;MAAM,OAAO,MAAM;MAAO,OAAM;QAA9C,QAAwD;;KAChE;IACJ;GACE;EAEZ;AAEF,0BAAe"}

package/es/color/ColorScales/style.mjs

@@ -1,11 +1,11 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/color/ColorScales/style.ts
 const alphaBg = {
 	dark: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px",
 	light: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px"
 };
-const useStyles = createStyles(({ css: css$1, token }) => ({
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
 	scaleBox: css$1`
     cursor: pointer;
 
@@ -21,7 +21,7 @@ const useStyles = createStyles(({ css: css$1, token }) => ({
       -8px 0;
     background-size: 16px 16px;
 
-    transition: scale 400ms ${token.motionEaseOut};
+    transition: scale 400ms ${cssVar$1.motionEaseOut};
 
     &:active {
       scale: 0.8;
@@ -41,5 +41,5 @@ const useStyles = createStyles(({ css: css$1, token }) => ({
 }));
 
 //#endregion
-export { alphaBg, useStyles };
+export { alphaBg, styles };
 //# sourceMappingURL=style.mjs.map

package/es/color/ColorScales/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/color/ColorScales/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const alphaBg = {\n  dark: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px',\n  light:\n    'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px',\n};\n\nexport const useStyles = createStyles(({ css, token }) => ({\n  scaleBox: css`\n    cursor: pointer;\n\n    position: relative;\n\n    width: 48px;\n    height: 32px;\n\n    background-position:\n      0 0,\n      0 8px,\n      8px -8px,\n      -8px 0;\n    background-size: 16px 16px;\n\n    transition: scale 400ms ${token.motionEaseOut};\n\n    &:active {\n      scale: 0.8;\n    }\n  `,\n  scaleItem: css`\n    width: 100%;\n    height: 100%;\n  `,\n  scaleRowTitle: css`\n    width: 64px;\n    height: 32px;\n  `,\n  text: css`\n    opacity: 0.5;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,UAAU;CACrB,MAAM;CACN,OACE;CACH;AAED,MAAa,YAAY,cAAc,EAAE,YAAK,aAAa;CACzD,UAAU,KAAG;;;;;;;;;;;;;;;8BAee,MAAM,cAAc;;;;;;CAMhD,WAAW,KAAG;;;;CAId,eAAe,KAAG;;;;CAIlB,MAAM,KAAG;;;CAGV,EAAE"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/color/ColorScales/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const alphaBg = {\n  dark: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px',\n  light:\n    'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px',\n};\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  scaleBox: css`\n    cursor: pointer;\n\n    position: relative;\n\n    width: 48px;\n    height: 32px;\n\n    background-position:\n      0 0,\n      0 8px,\n      8px -8px,\n      -8px 0;\n    background-size: 16px 16px;\n\n    transition: scale 400ms ${cssVar.motionEaseOut};\n\n    &:active {\n      scale: 0.8;\n    }\n  `,\n  scaleItem: css`\n    width: 100%;\n    height: 100%;\n  `,\n  scaleRowTitle: css`\n    width: 64px;\n    height: 32px;\n  `,\n  text: css`\n    opacity: 0.5;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,UAAU;CACrB,MAAM;CACN,OACE;CACH;AAED,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,UAAU,KAAG;;;;;;;;;;;;;;;8BAeeA,SAAO,cAAc;;;;;;CAMjD,WAAW,KAAG;;;;CAId,eAAe,KAAG;;;;CAIlB,MAAM,KAAG;;;CAGV,EAAE"}

package/es/hooks/useHighlight.mjs

@@ -1,181 +1,38 @@
 'use client';
 
 import { getCodeLanguageByInput } from "../Highlighter/const.mjs";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTheme, useThemeMode } from "antd-style";
+import lobe_theme_default from "../Highlighter/theme/lobe-theme.mjs";
+import { useEffect, useMemo, useState } from "react";
 import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight } from "@shikijs/transformers";
-import { ShikiStreamTokenizer } from "shiki-stream";
-import useSWR from "swr";
 import { Md5 } from "ts-md5";
 
 //#region src/hooks/useHighlight.ts
 const MD5_LENGTH_THRESHOLD = 1e4;
+const highlightCache = /* @__PURE__ */ new Map();
+const MAX_CACHE_SIZE = 1e3;
+const cleanupCache = () => {
+	if (highlightCache.size > MAX_CACHE_SIZE) {
+		const entriesToRemove = Math.floor(MAX_CACHE_SIZE * .2);
+		const keysToRemove = Array.from(highlightCache.keys()).slice(0, entriesToRemove);
+		for (const key of keysToRemove) highlightCache.delete(key);
+	}
+};
+let codeToHtmlPromise = null;
+const loadCodeToHtml = () => {
+	if (typeof window === "undefined") return Promise.resolve(null);
+	if (!codeToHtmlPromise) codeToHtmlPromise = import("shiki").then((mod) => mod.codeToHtml ?? null);
+	return codeToHtmlPromise;
+};
 const loadShikiModule = () => {
 	if (typeof window === "undefined") return Promise.resolve(null);
 	return import("shiki");
 };
 const shikiModulePromise = loadShikiModule();
-const loadShiki = () => {
-	return shikiModulePromise.then((mod) => mod?.codeToHtml ?? null);
-};
-const shikiPromise = loadShiki();
 const escapeHtml = (str) => {
 	return str.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#039;");
 };
-const tokensToLineTokens = (tokens) => {
-	if (!tokens.length) return [[]];
-	const lines = [[]];
-	let currentLine = lines[0];
-	const startNewLine = () => {
-		currentLine = [];
-		lines.push(currentLine);
-	};
-	tokens.forEach((token) => {
-		const content = token.content ?? "";
-		if (content === "\n") {
-			startNewLine();
-			return;
-		}
-		if (!content.includes("\n")) {
-			currentLine.push(token);
-			return;
-		}
-		const segments = content.split("\n");
-		segments.forEach((segment, index) => {
-			if (segment) currentLine.push({
-				...token,
-				content: segment
-			});
-			if (index < segments.length - 1) startNewLine();
-		});
-	});
-	if (lines.length === 0) return [[]];
-	return lines;
-};
-const createPreStyle = (bg, fg) => {
-	if (!bg && !fg) return void 0;
-	return {
-		backgroundColor: bg,
-		color: fg
-	};
-};
-const useStreamingHighlighter = (text, options) => {
-	const { colorReplacements, enabled, language, theme } = options;
-	const [result, setResult] = useState();
-	const tokenizerRef = useRef(null);
-	const previousTextRef = useRef("");
-	const safeText = text ?? "";
-	const latestTextRef = useRef(safeText);
-	const preStyleRef = useRef(void 0);
-	const colorReplacementsRef = useRef(colorReplacements);
-	const linesRef = useRef([[]]);
-	useEffect(() => {
-		latestTextRef.current = safeText;
-	}, [safeText]);
-	useEffect(() => {
-		colorReplacementsRef.current = colorReplacements;
-	}, [colorReplacements]);
-	const setStreamingResult = useCallback((rawLines) => {
-		const previousLines = linesRef.current;
-		const mergedLines = rawLines.map((line, index) => {
-			const previousLine = previousLines[index];
-			if (previousLine && previousLine.length === line.length && previousLine.every((token, tokenIndex) => token === line[tokenIndex])) return previousLine;
-			return line;
-		});
-		linesRef.current = mergedLines;
-		setResult({
-			colorReplacements: colorReplacementsRef.current,
-			lines: mergedLines,
-			preStyle: preStyleRef.current
-		});
-	}, []);
-	const updateTokens = useCallback(async (nextText, forceReset = false) => {
-		const tokenizer = tokenizerRef.current;
-		if (!tokenizer) return;
-		if (forceReset) {
-			tokenizer.clear();
-			previousTextRef.current = "";
-		}
-		const previousText = previousTextRef.current;
-		let chunk = nextText;
-		if (!forceReset && nextText.startsWith(previousText)) chunk = nextText.slice(previousText.length);
-		else if (!forceReset) tokenizer.clear();
-		previousTextRef.current = nextText;
-		if (!chunk) {
-			const mergedTokens = [...tokenizer.tokensStable, ...tokenizer.tokensUnstable];
-			setStreamingResult(mergedTokens.length ? tokensToLineTokens(mergedTokens) : [[]]);
-			return;
-		}
-		try {
-			await tokenizer.enqueue(chunk);
-			setStreamingResult(tokensToLineTokens([...tokenizer.tokensStable, ...tokenizer.tokensUnstable]));
-		} catch (error) {
-			console.error("Streaming highlighting failed:", error);
-		}
-	}, [setStreamingResult]);
-	useEffect(() => {
-		if (!enabled) {
-			tokenizerRef.current?.clear();
-			tokenizerRef.current = null;
-			previousTextRef.current = "";
-			preStyleRef.current = void 0;
-			linesRef.current = [[]];
-			setResult(void 0);
-			return;
-		}
-		let cancelled = false;
-		(async () => {
-			const mod = await shikiModulePromise;
-			if (!mod || cancelled) return;
-			try {
-				const highlighter = await mod.getSingletonHighlighter({
-					langs: language ? [language] : [],
-					themes: [theme]
-				});
-				if (!highlighter || cancelled) return;
-				tokenizerRef.current = new ShikiStreamTokenizer({
-					highlighter,
-					lang: language,
-					theme
-				});
-				previousTextRef.current = "";
-				linesRef.current = [[]];
-				const themeInfo = highlighter.getTheme(theme);
-				preStyleRef.current = createPreStyle(themeInfo?.bg, themeInfo?.fg);
-				const currentText = latestTextRef.current;
-				if (currentText) await updateTokens(currentText, true);
-				else setStreamingResult([[]]);
-			} catch (error) {
-				console.error("Streaming highlighter initialization failed:", error);
-			}
-		})();
-		return () => {
-			cancelled = true;
-			tokenizerRef.current?.clear();
-			tokenizerRef.current = null;
-			previousTextRef.current = "";
-		};
-	}, [
-		enabled,
-		language,
-		setStreamingResult,
-		theme,
-		updateTokens
-	]);
-	useEffect(() => {
-		if (!enabled) return;
-		if (!tokenizerRef.current) return;
-		updateTokens(safeText);
-	}, [
-		enabled,
-		safeText,
-		updateTokens
-	]);
-	return result;
-};
+const customThemes = { "lobe-theme": lobe_theme_default };
 const useHighlight = (text, { language, enableTransformer, theme: builtinTheme, streaming }) => {
-	const { isDarkMode } = useThemeMode();
-	const theme = useTheme();
 	const safeText = text ?? "";
 	const lang = (language ?? "plaintext").toLowerCase();
 	const matchedLanguage = useMemo(() => getCodeLanguageByInput(lang), [lang]);
@@ -189,87 +46,87 @@ const useHighlight = (text, { language, enableTransformer, theme: builtinTheme,
 			transformerNotationErrorLevel()
 		];
 	}, [enableTransformer]);
-	const colorReplacements = useMemo(() => ({
-		"slack-dark": {
-			"#4ec9b0": theme.yellow,
-			"#569cd6": theme.colorError,
-			"#6a9955": theme.gray,
-			"#9cdcfe": theme.colorText,
-			"#b5cea8": theme.purple10,
-			"#c586c0": theme.colorInfo,
-			"#ce9178": theme.colorSuccess,
-			"#dcdcaa": theme.colorWarning,
-			"#e6e6e6": theme.colorText
-		},
-		"slack-ochin": {
-			"#002339": theme.colorText,
-			"#0444ac": theme.geekblue,
-			"#0991b6": theme.colorError,
-			"#174781": theme.purple10,
-			"#2f86d2": theme.colorText,
-			"#357b42": theme.gray,
-			"#7b30d0": theme.colorInfo,
-			"#7eb233": theme.colorWarningTextActive,
-			"#a44185": theme.colorSuccess,
-			"#dc3eb7": theme.yellow11
-		}
-	}), [theme]);
 	const cacheKey = useMemo(() => {
-		const hash = safeText.length < MD5_LENGTH_THRESHOLD ? safeText : Md5.hashStr(safeText);
+		if (streaming) return null;
 		return [
 			matchedLanguage,
-			builtinTheme || (isDarkMode ? "d" : "l"),
-			hash
+			builtinTheme,
+			safeText.length < MD5_LENGTH_THRESHOLD ? safeText : Md5.hashStr(safeText)
 		].filter(Boolean).join("-");
 	}, [
 		safeText,
 		matchedLanguage,
-		isDarkMode,
-		builtinTheme
+		builtinTheme,
+		streaming
 	]);
-	const response = useSWR(streaming ? null : cacheKey, async () => {
-		try {
-			const codeToHtml = await shikiPromise;
-			if (!codeToHtml) return safeText;
-			return await codeToHtml(safeText, {
-				colorReplacements: builtinTheme ? void 0 : colorReplacements,
-				lang: matchedLanguage,
-				theme: builtinTheme || (isDarkMode ? "slack-dark" : "slack-ochin"),
-				transformers
-			});
-		} catch (error) {
-			console.error("Advanced rendering failed:", error);
+	const [data, setData] = useState();
+	useEffect(() => {
+		if (!cacheKey) {
+			setData(void 0);
+			return;
+		}
+		const cachedPromise = highlightCache.get(cacheKey);
+		if (cachedPromise) {
+			cachedPromise.then((html) => {
+				setData(html);
+			}).catch(() => {});
+			return;
+		}
+		const highlightPromise = (async () => {
 			try {
-				const codeToHtml = await shikiPromise;
+				const shikiModule = await shikiModulePromise;
+				if (!shikiModule) return safeText;
+				const effectiveTheme = builtinTheme || "lobe-theme";
+				if (!builtinTheme && effectiveTheme === "lobe-theme") {
+					const customTheme = customThemes[effectiveTheme];
+					if (customTheme) return await (await shikiModule.getSingletonHighlighter({
+						langs: [matchedLanguage],
+						themes: [customTheme]
+					})).codeToHtml(safeText, {
+						lang: matchedLanguage,
+						theme: effectiveTheme,
+						transformers
+					});
+				}
+				const codeToHtml = await loadCodeToHtml();
 				if (!codeToHtml) return safeText;
 				return await codeToHtml(safeText, {
 					lang: matchedLanguage,
-					theme: isDarkMode ? "dark-plus" : "light-plus"
+					theme: effectiveTheme,
+					transformers
 				});
-			} catch {
-				return `<pre class="fallback"><code>${escapeHtml(safeText)}</code></pre>`;
+			} catch (error_) {
+				console.error("Advanced rendering failed:", error_);
+				try {
+					const codeToHtml = await loadCodeToHtml();
+					if (!codeToHtml) return safeText;
+					return await codeToHtml(safeText, {
+						lang: matchedLanguage,
+						theme: "lobe-theme"
+					});
+				} catch {
+					return `<pre class="fallback"><code>${escapeHtml(safeText)}</code></pre>`;
+				}
 			}
-		}
-	}, {
-		dedupingInterval: 3e3,
-		errorRetryCount: 2,
-		revalidateOnFocus: false,
-		revalidateOnReconnect: false
-	});
-	const effectiveTheme = builtinTheme || (isDarkMode ? "slack-dark" : "slack-ochin");
-	const streamingResult = useStreamingHighlighter(safeText, {
-		colorReplacements: builtinTheme ? void 0 : colorReplacements[effectiveTheme],
-		enabled: streaming,
-		language: matchedLanguage,
-		theme: effectiveTheme
-	});
-	return {
-		...response,
-		colorReplacements,
-		streaming: streamingResult
-	};
+		})();
+		highlightCache.set(cacheKey, highlightPromise);
+		cleanupCache();
+		highlightPromise.then((html) => {
+			if (highlightCache.get(cacheKey) === highlightPromise) setData(html);
+		}).catch(() => {
+			if (highlightCache.get(cacheKey) === highlightPromise) highlightCache.delete(cacheKey);
+		});
+	}, [
+		cacheKey,
+		safeText,
+		matchedLanguage,
+		builtinTheme,
+		transformers,
+		customThemes
+	]);
+	return data || "";
 };
 
 //#endregion
-export { useHighlight };
+export { shikiModulePromise, useHighlight };
 //# sourceMappingURL=useHighlight.mjs.map

package/es/hooks/useHighlight.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHighlight.mjs","names":["lines: ThemedToken[][]"],"sources":["../../src/hooks/useHighlight.ts"],"sourcesContent":["'use client';\n\nimport {\n  transformerNotationDiff,\n  transformerNotationErrorLevel,\n  transformerNotationFocus,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { useTheme, useThemeMode } from 'antd-style';\nimport { CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { BuiltinTheme, CodeToHastOptions, ThemedToken } from 'shiki';\nimport { ShikiStreamTokenizer } from 'shiki-stream';\nimport useSWR, { SWRResponse } from 'swr';\nimport { Md5 } from 'ts-md5';\n\nimport { getCodeLanguageByInput } from '@/Highlighter/const';\n\n// Application-level cache to avoid repeated calculations\nconst MD5_LENGTH_THRESHOLD = 10_000; // Use async MD5 for text exceeding this length\n\n// Color replacement mapping type\ntype ColorReplacements = {\n  [themeName: string]: {\n    [color: string]: string;\n  };\n};\n\ntype StreamingHighlightResult = {\n  colorReplacements?: Record<string, string>;\n  lines: ThemedToken[][];\n  preStyle?: CSSProperties;\n};\n\ntype StreamingOptions = {\n  colorReplacements?: Record<string, string>;\n  enabled?: boolean;\n  language: string;\n  theme: string;\n};\n\ntype UseHighlightResponse = SWRResponse<string, Error> & {\n  colorReplacements?: ColorReplacements;\n  streaming?: StreamingHighlightResult;\n};\n\ntype ICodeToHtml = (code: string, options: CodeToHastOptions) => Promise<string>;\ntype ShikiModule = typeof import('shiki');\n\n// Lazy load shiki\nconst loadShikiModule = (): Promise<ShikiModule | null> => {\n  if (typeof window === 'undefined') return Promise.resolve(null);\n  return import('shiki');\n};\nconst shikiModulePromise = loadShikiModule();\n\nconst loadShiki = (): Promise<ICodeToHtml | null> => {\n  return shikiModulePromise.then((mod) => mod?.codeToHtml ?? null);\n};\nconst shikiPromise = loadShiki();\n\n// Helper function: Safe HTML escaping\nconst escapeHtml = (str: string): string => {\n  return str\n    .replaceAll('&', '&amp;')\n    .replaceAll('<', '&lt;')\n    .replaceAll('>', '&gt;')\n    .replaceAll('\"', '&quot;')\n    .replaceAll(\"'\", '&#039;');\n};\n\nconst tokensToLineTokens = (tokens: ThemedToken[]): ThemedToken[][] => {\n  if (!tokens.length) return [[]];\n\n  const lines: ThemedToken[][] = [[]];\n  let currentLine = lines[0];\n\n  const startNewLine = () => {\n    currentLine = [];\n    lines.push(currentLine);\n  };\n\n  tokens.forEach((token) => {\n    const content = token.content ?? '';\n\n    if (content === '\\n') {\n      startNewLine();\n      return;\n    }\n\n    if (!content.includes('\\n')) {\n      currentLine.push(token);\n      return;\n    }\n\n    const segments = content.split('\\n');\n    segments.forEach((segment, index) => {\n      if (segment) {\n        currentLine.push({\n          ...token,\n          content: segment,\n        });\n      }\n\n      if (index < segments.length - 1) {\n        startNewLine();\n      }\n    });\n  });\n\n  if (lines.length === 0) return [[]];\n\n  return lines;\n};\n\nconst createPreStyle = (bg?: string, fg?: string): CSSProperties | undefined => {\n  if (!bg && !fg) return undefined;\n  return {\n    backgroundColor: bg,\n    color: fg,\n  };\n};\n\nconst useStreamingHighlighter = (\n  text: string,\n  options: StreamingOptions,\n): StreamingHighlightResult | undefined => {\n  const { colorReplacements, enabled, language, theme } = options;\n  const [result, setResult] = useState<StreamingHighlightResult>();\n  const tokenizerRef = useRef<ShikiStreamTokenizer | null>(null);\n  const previousTextRef = useRef('');\n  const safeText = text ?? '';\n  const latestTextRef = useRef(safeText);\n  const preStyleRef = useRef<CSSProperties | undefined>(undefined);\n  const colorReplacementsRef = useRef(colorReplacements);\n  const linesRef = useRef<ThemedToken[][]>([[]]);\n\n  useEffect(() => {\n    latestTextRef.current = safeText;\n  }, [safeText]);\n\n  useEffect(() => {\n    colorReplacementsRef.current = colorReplacements;\n  }, [colorReplacements]);\n\n  const setStreamingResult = useCallback((rawLines: ThemedToken[][]) => {\n    const previousLines = linesRef.current;\n\n    const mergedLines = rawLines.map((line, index) => {\n      const previousLine = previousLines[index];\n      if (\n        previousLine &&\n        previousLine.length === line.length &&\n        previousLine.every((token, tokenIndex) => token === line[tokenIndex])\n      ) {\n        return previousLine;\n      }\n      return line;\n    });\n\n    linesRef.current = mergedLines;\n\n    setResult({\n      colorReplacements: colorReplacementsRef.current,\n      lines: mergedLines,\n      preStyle: preStyleRef.current,\n    });\n  }, []);\n\n  const updateTokens = useCallback(\n    async (nextText: string, forceReset = false) => {\n      const tokenizer = tokenizerRef.current;\n      if (!tokenizer) return;\n\n      if (forceReset) {\n        tokenizer.clear();\n        previousTextRef.current = '';\n      }\n\n      const previousText = previousTextRef.current;\n      let chunk = nextText;\n      const canAppend = !forceReset && nextText.startsWith(previousText);\n\n      if (canAppend) {\n        chunk = nextText.slice(previousText.length);\n      } else if (!forceReset) {\n        tokenizer.clear();\n      }\n\n      previousTextRef.current = nextText;\n\n      if (!chunk) {\n        const mergedTokens = [...tokenizer.tokensStable, ...tokenizer.tokensUnstable];\n        setStreamingResult(mergedTokens.length ? tokensToLineTokens(mergedTokens) : [[]]);\n        return;\n      }\n\n      try {\n        await tokenizer.enqueue(chunk);\n        const mergedTokens = [...tokenizer.tokensStable, ...tokenizer.tokensUnstable];\n        setStreamingResult(tokensToLineTokens(mergedTokens));\n      } catch (error) {\n        console.error('Streaming highlighting failed:', error);\n      }\n    },\n    [setStreamingResult],\n  );\n\n  useEffect(() => {\n    if (!enabled) {\n      tokenizerRef.current?.clear();\n      tokenizerRef.current = null;\n      previousTextRef.current = '';\n      preStyleRef.current = undefined;\n      linesRef.current = [[]];\n      setResult(undefined);\n      return;\n    }\n\n    let cancelled = false;\n\n    (async () => {\n      const mod = await shikiModulePromise;\n      if (!mod || cancelled) return;\n\n      try {\n        const highlighter = await mod.getSingletonHighlighter({\n          langs: language ? [language] : [],\n          themes: [theme],\n        });\n\n        if (!highlighter || cancelled) return;\n\n        const tokenizer = new ShikiStreamTokenizer({\n          highlighter,\n          lang: language,\n          theme,\n        });\n\n        tokenizerRef.current = tokenizer;\n        previousTextRef.current = '';\n        linesRef.current = [[]];\n\n        const themeInfo = highlighter.getTheme(theme);\n        preStyleRef.current = createPreStyle(themeInfo?.bg, themeInfo?.fg);\n\n        const currentText = latestTextRef.current;\n        if (currentText) {\n          await updateTokens(currentText, true);\n        } else {\n          setStreamingResult([[]]);\n        }\n      } catch (error) {\n        console.error('Streaming highlighter initialization failed:', error);\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n      tokenizerRef.current?.clear();\n      tokenizerRef.current = null;\n      previousTextRef.current = '';\n    };\n  }, [enabled, language, setStreamingResult, theme, updateTokens]);\n\n  useEffect(() => {\n    if (!enabled) return;\n    if (!tokenizerRef.current) return;\n    updateTokens(safeText);\n  }, [enabled, safeText, updateTokens]);\n\n  return result;\n};\n\n// Main highlight component\nexport const useHighlight = (\n  text: string,\n  {\n    language,\n    enableTransformer,\n    theme: builtinTheme,\n    streaming,\n  }: { enableTransformer?: boolean; language: string; streaming?: boolean; theme?: BuiltinTheme },\n): UseHighlightResponse => {\n  const { isDarkMode } = useThemeMode();\n  const theme = useTheme();\n\n  // Safely handle language and text with boundary checks\n  const safeText = text ?? '';\n  const lang = (language ?? 'plaintext').toLowerCase();\n\n  // Match supported languages\n  const matchedLanguage = useMemo(() => getCodeLanguageByInput(lang), [lang]);\n\n  // Optimize transformer creation\n  const transformers = useMemo(() => {\n    if (!enableTransformer) return;\n    return [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationFocus(),\n      transformerNotationErrorLevel(),\n    ];\n  }, [enableTransformer]);\n\n  // Optimize color replacement configuration\n  const colorReplacements = useMemo(\n    (): ColorReplacements => ({\n      'slack-dark': {\n        '#4ec9b0': theme.yellow,\n        '#569cd6': theme.colorError,\n        '#6a9955': theme.gray,\n        '#9cdcfe': theme.colorText,\n        '#b5cea8': theme.purple10,\n        '#c586c0': theme.colorInfo,\n        '#ce9178': theme.colorSuccess,\n        '#dcdcaa': theme.colorWarning,\n        '#e6e6e6': theme.colorText,\n      },\n      'slack-ochin': {\n        '#002339': theme.colorText,\n        '#0444ac': theme.geekblue,\n        '#0991b6': theme.colorError,\n        '#174781': theme.purple10,\n        '#2f86d2': theme.colorText,\n        '#357b42': theme.gray,\n        '#7b30d0': theme.colorInfo,\n        '#7eb233': theme.colorWarningTextActive,\n        '#a44185': theme.colorSuccess,\n        '#dc3eb7': theme.yellow11,\n      },\n    }),\n    [theme],\n  );\n\n  // Build cache key\n  const cacheKey = useMemo((): string | null => {\n    // Use hash for long text\n    const hash = safeText.length < MD5_LENGTH_THRESHOLD ? safeText : Md5.hashStr(safeText);\n    return [matchedLanguage, builtinTheme || (isDarkMode ? 'd' : 'l'), hash]\n      .filter(Boolean)\n      .join('-');\n  }, [safeText, matchedLanguage, isDarkMode, builtinTheme]);\n\n  // Use SWR to get highlighted HTML\n  const response = useSWR(\n    streaming ? null : cacheKey,\n    async (): Promise<string> => {\n      try {\n        // Try full rendering\n        const codeToHtml = await shikiPromise;\n        if (!codeToHtml) return safeText;\n        const html = await codeToHtml(safeText, {\n          colorReplacements: builtinTheme ? undefined : colorReplacements,\n          lang: matchedLanguage,\n          theme: builtinTheme || (isDarkMode ? 'slack-dark' : 'slack-ochin'),\n          transformers,\n        });\n\n        return html;\n      } catch (error) {\n        console.error('Advanced rendering failed:', error);\n\n        try {\n          // Try simple rendering (without transformers)\n          const codeToHtml = await shikiPromise;\n          if (!codeToHtml) return safeText;\n          const html = await codeToHtml(safeText, {\n            lang: matchedLanguage,\n            theme: isDarkMode ? 'dark-plus' : 'light-plus',\n          });\n          return html;\n        } catch {\n          // Fallback to plain text\n          const fallbackHtml = `<pre class=\"fallback\"><code>${escapeHtml(safeText)}</code></pre>`;\n          return fallbackHtml;\n        }\n      }\n    },\n    {\n      dedupingInterval: 3000, // Only execute once for the same request within 3 seconds\n      errorRetryCount: 2, // Retry at most 2 times\n      revalidateOnFocus: false,\n      revalidateOnReconnect: false,\n    },\n  );\n\n  const effectiveTheme = builtinTheme || (isDarkMode ? 'slack-dark' : 'slack-ochin');\n  const streamingResult = useStreamingHighlighter(safeText, {\n    colorReplacements: builtinTheme ? undefined : colorReplacements[effectiveTheme],\n    enabled: streaming,\n    language: matchedLanguage,\n    theme: effectiveTheme,\n  });\n\n  return {\n    ...response,\n    colorReplacements,\n    streaming: streamingResult,\n  };\n};\n\nexport { escapeHtml, loadShiki, MD5_LENGTH_THRESHOLD, shikiPromise };\n"],"mappings":"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"}
+{"version":3,"file":"useHighlight.mjs","names":["codeToHtmlPromise: Promise<ICodeToHtml | null> | null","lobeTheme"],"sources":["../../src/hooks/useHighlight.ts"],"sourcesContent":["'use client';\n\nimport {\n  transformerNotationDiff,\n  transformerNotationErrorLevel,\n  transformerNotationFocus,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { CSSProperties, useEffect, useMemo, useState } from 'react';\nimport type { BuiltinTheme, CodeToHastOptions, ThemedToken } from 'shiki';\nimport { Md5 } from 'ts-md5';\n\nimport { getCodeLanguageByInput } from '@/Highlighter/const';\nimport lobeTheme from '@/Highlighter/theme/lobe-theme';\n\n// Application-level cache to avoid repeated calculations\nexport const MD5_LENGTH_THRESHOLD = 10_000; // Use async MD5 for text exceeding this length\n\nexport type StreamingHighlightResult = {\n  lines: ThemedToken[][];\n  preStyle?: CSSProperties;\n};\n\n// Application-level cache for highlighted HTML\n// Key: cacheKey string, Value: Promise<string>\nconst highlightCache = new Map<string, Promise<string>>();\n\n// Maximum cache size to prevent memory leaks\nconst MAX_CACHE_SIZE = 1000;\n\n// Clean up old cache entries when limit is reached\nconst cleanupCache = () => {\n  if (highlightCache.size > MAX_CACHE_SIZE) {\n    // Remove oldest 20% of entries\n    const entriesToRemove = Math.floor(MAX_CACHE_SIZE * 0.2);\n    const keysToRemove = Array.from(highlightCache.keys()).slice(0, entriesToRemove);\n    for (const key of keysToRemove) {\n      highlightCache.delete(key);\n    }\n  }\n};\n\nexport type ICodeToHtml = (code: string, options: CodeToHastOptions) => Promise<string>;\nexport type ShikiModule = typeof import('shiki');\n\n// Use codeToHtml shorthand for better performance\n// It automatically manages highlighter instances and loads themes/languages on-demand\nlet codeToHtmlPromise: Promise<ICodeToHtml | null> | null = null;\n\nconst loadCodeToHtml = (): Promise<ICodeToHtml | null> => {\n  if (typeof window === 'undefined') return Promise.resolve(null);\n\n  if (!codeToHtmlPromise) {\n    codeToHtmlPromise = import('shiki').then((mod) => mod.codeToHtml ?? null);\n  }\n\n  return codeToHtmlPromise;\n};\n\n// Export shikiModulePromise for useStreamHighlight compatibility\nconst loadShikiModule = (): Promise<ShikiModule | null> => {\n  if (typeof window === 'undefined') return Promise.resolve(null);\n  return import('shiki');\n};\nexport const shikiModulePromise = loadShikiModule();\n\n// Helper function: Safe HTML escaping\nexport const escapeHtml = (str: string): string => {\n  return str\n    .replaceAll('&', '&amp;')\n    .replaceAll('<', '&lt;')\n    .replaceAll('>', '&gt;')\n    .replaceAll('\"', '&quot;')\n    .replaceAll(\"'\", '&#039;');\n};\n\n// Main highlight component - optimized version without SWR\nconst customThemes = {\n  'lobe-theme': lobeTheme,\n};\n\nexport const useHighlight = (\n  text: string,\n  {\n    language,\n    enableTransformer,\n    theme: builtinTheme,\n    streaming,\n  }: { enableTransformer?: boolean; language: string; streaming?: boolean; theme?: BuiltinTheme },\n): string => {\n  // Safely handle language and text with boundary checks\n  const safeText = text ?? '';\n  const lang = (language ?? 'plaintext').toLowerCase();\n\n  // Match supported languages\n  const matchedLanguage = useMemo(() => getCodeLanguageByInput(lang), [lang]);\n\n  // Optimize transformer creation\n  const transformers = useMemo(() => {\n    if (!enableTransformer) return;\n    return [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationFocus(),\n      transformerNotationErrorLevel(),\n    ];\n  }, [enableTransformer]);\n\n  // Build cache key\n  const cacheKey = useMemo((): string | null => {\n    if (streaming) return null;\n    // Use hash for long text\n    const hash = safeText.length < MD5_LENGTH_THRESHOLD ? safeText : Md5.hashStr(safeText);\n    return [matchedLanguage, builtinTheme, hash].filter(Boolean).join('-');\n  }, [safeText, matchedLanguage, builtinTheme, streaming]);\n\n  const [data, setData] = useState<string | undefined>();\n\n  useEffect(() => {\n    if (!cacheKey) {\n      setData(undefined);\n      return;\n    }\n\n    // Check cache first\n    const cachedPromise = highlightCache.get(cacheKey);\n    if (cachedPromise) {\n      cachedPromise\n        .then((html) => {\n          setData(html);\n        })\n        .catch(() => {\n          // Silently handle errors, fallback will be handled in the promise\n        });\n      return;\n    }\n\n    // Create new promise for highlighting\n    // Using codeToHtml shorthand: automatically loads themes/languages on-demand\n    const highlightPromise = (async (): Promise<string> => {\n      try {\n        // Try full rendering with transformers\n        const shikiModule = await shikiModulePromise;\n        if (!shikiModule) return safeText;\n\n        const effectiveTheme = builtinTheme || 'lobe-theme';\n\n        // Load custom theme if using slack-dark or slack-ochin\n        if (!builtinTheme && effectiveTheme === 'lobe-theme') {\n          const customTheme = customThemes[effectiveTheme];\n          if (customTheme) {\n            // Use getSingletonHighlighter to load custom theme\n            const highlighter = await shikiModule.getSingletonHighlighter({\n              langs: [matchedLanguage],\n              themes: [customTheme as any],\n            });\n\n            const html = await highlighter.codeToHtml(safeText, {\n              lang: matchedLanguage,\n              theme: effectiveTheme,\n              transformers,\n            });\n\n            return html;\n          }\n        }\n\n        // Fallback to codeToHtml for builtin themes\n        const codeToHtml = await loadCodeToHtml();\n        if (!codeToHtml) return safeText;\n\n        const html = await codeToHtml(safeText, {\n          lang: matchedLanguage,\n          theme: effectiveTheme,\n          transformers,\n        });\n\n        return html;\n      } catch (error_) {\n        console.error('Advanced rendering failed:', error_);\n\n        try {\n          // Try simple rendering (without transformers)\n          const codeToHtml = await loadCodeToHtml();\n          if (!codeToHtml) return safeText;\n          const html = await codeToHtml(safeText, {\n            lang: matchedLanguage,\n            theme: 'lobe-theme',\n          });\n          return html;\n        } catch {\n          // Fallback to plain text\n          const fallbackHtml = `<pre class=\"fallback\"><code>${escapeHtml(safeText)}</code></pre>`;\n          return fallbackHtml;\n        }\n      }\n    })();\n\n    // Cache the promise\n    highlightCache.set(cacheKey, highlightPromise);\n    cleanupCache();\n\n    // Handle promise result\n    highlightPromise\n      .then((html) => {\n        // Only update if this is still the current cache key\n        if (highlightCache.get(cacheKey) === highlightPromise) {\n          setData(html);\n        }\n      })\n      .catch(() => {\n        // Remove failed promise from cache\n        if (highlightCache.get(cacheKey) === highlightPromise) {\n          highlightCache.delete(cacheKey);\n        }\n      });\n  }, [cacheKey, safeText, matchedLanguage, builtinTheme, transformers, customThemes]);\n\n  return data || '';\n};\n"],"mappings":"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"}