@lobehub/ui 1.168.16 → 1.168.18

package/es/Mermaid/components/MermaidContainer.js

@@ -0,0 +1,43 @@
+import { kebabCase } from 'lodash-es';
+import { Loader2 } from 'lucide-react';
+import { memo, useId } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+import Icon from "../../Icon";
+import { useMermaid, useMermaidInit } from "../../hooks/useMermaid";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var MermaidContainer = /*#__PURE__*/memo(function (_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? '' : _ref$children;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var id = useId();
+  var mermaidId = kebabCase("mermaid-".concat(id));
+  useMermaidInit();
+  var _useMermaid = useMermaid(mermaidId, children),
+    data = _useMermaid.data,
+    isLoading = _useMermaid.isLoading;
+  if (!data) return null;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Center, {
+      as: 'pre',
+      dangerouslySetInnerHTML: {
+        __html: data
+      },
+      id: "mermaid-".concat(id)
+    }), isLoading && /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      className: styles.loading,
+      gap: 8,
+      horizontal: true,
+      justify: 'center',
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: Loader2,
+        spin: true
+      })
+    })]
+  });
+});
+export default MermaidContainer;

package/es/Mermaid/components/MermaidZoomableContainer.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const MermaidZoomableContainer: import("react").NamedExoticComponent<{
+    children?: string | undefined;
+}>;
+export default MermaidZoomableContainer;

package/es/Mermaid/components/MermaidZoomableContainer.js

@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+import Controls from "./Controls";
+import MermaidContainer from "./MermaidContainer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var MermaidZoomableContainer = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_jsxs(TransformWrapper, {
+    children: [/*#__PURE__*/_jsx(Controls, {}), /*#__PURE__*/_jsx(TransformComponent, {
+      wrapperStyle: {
+        minHeight: 240,
+        width: '100%'
+      },
+      children: /*#__PURE__*/_jsx(MermaidContainer, {
+        children: children
+      })
+    })]
+  });
+});
+export default MermaidZoomableContainer;

package/es/Mermaid/components/style.d.ts

@@ -0,0 +1,3 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    loading: string;
+}>;

package/es/Mermaid/components/style.js

@@ -0,0 +1,12 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    cx = _ref.cx,
+    stylish = _ref.stylish;
+  return {
+    loading: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 10;\n        inset-block-start: 0;\n        inset-inline-end: 0;\n\n        height: 34px;\n        padding-block: 0;\n        padding-inline: 8px;\n\n        font-family: ", ";\n        color: ", ";\n\n        border-radius: ", ";\n      "])), token.fontFamilyCode, token.colorTextTertiary, token.borderRadius))
+  };
+});

package/es/Mermaid/index.js

@@ -9,13 +9,15 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { isUndefined } from 'lodash-es';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import CopyButton from "../CopyButton";
 import Tag from "../Tag";
 import FullFeatured from "./FullFeatured";
+import MermaidContainer from "./components/MermaidContainer";
+import MermaidZoomableContainer from "./components/MermaidZoomableContainer";
 import { useStyles } from "./style";
-import { useMermaid } from "./useMermaid";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Mermaid = /*#__PURE__*/memo(function (_ref) {
@@ -39,11 +41,8 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
     cx = _useStyles.cx,
     styles = _useStyles.styles;
   var tirmedChildren = children.trim();
-  var MermaidRender = useMermaid(tirmedChildren, {
-    enablePanZoom: fullFeatured ? true : enablePanZoom
-  });
   var originalActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
-    content: children,
+    content: tirmedChildren,
     placement: "left",
     size: copyButtonSize
   });
@@ -52,7 +51,11 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
     content: children,
     originalNode: originalActions
   }) : originalActions;
-  var defaultBody = /*#__PURE__*/_jsx(MermaidRender, {});
+  var defaultBody = enablePanZoom || isUndefined(enablePanZoom) && fullFeatured ? /*#__PURE__*/_jsx(MermaidZoomableContainer, {
+    children: tirmedChildren
+  }) : /*#__PURE__*/_jsx(MermaidContainer, {
+    children: tirmedChildren
+  });
   var body = bodyRender ? bodyRender({
     content: tirmedChildren,
     originalNode: defaultBody
@@ -63,7 +66,6 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
     className: className,
     content: tirmedChildren,
     copyable: copyable,
-    enablePanZoom: enablePanZoom,
     showLanguage: showLanguage,
     style: style,
     type: type

package/es/Swatches/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export interface SwatchesProps {
+import { FlexboxProps } from 'react-layout-kit';
+export interface SwatchesProps extends Omit<FlexboxProps, 'onSelect'> {
     /**
      * @description The currently active color
      * @default undefined

package/es/Swatches/index.js

@@ -1,47 +1,59 @@
 'use client';
 
-import { useTheme } from 'antd-style';
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["style", "colors", "activeColor", "onSelect", "size"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { CheckIcon } from 'lucide-react';
+import { darken } from 'polished';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
+import Icon from "../Icon";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var Swatches = /*#__PURE__*/memo(function (_ref) {
-  var colors = _ref.colors,
+  var style = _ref.style,
+    colors = _ref.colors,
     activeColor = _ref.activeColor,
     onSelect = _ref.onSelect,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 24 : _ref$size;
-  var theme = useTheme();
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(size),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsxs(Flexbox, {
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     gap: 8,
     horizontal: true,
-    style: {
+    style: _objectSpread({
       flexWrap: 'wrap'
-    },
-    children: [/*#__PURE__*/_jsx(Flexbox, {
-      className: cx(styles.container, !activeColor && styles.active),
-      onClick: function onClick() {
-        onSelect === null || onSelect === void 0 || onSelect();
-      },
-      style: {
-        background: theme.colorBgContainer
-      }
-    }), colors.map(function (c, index) {
+    }, style)
+  }, rest), {}, {
+    children: colors.map(function (c, index) {
       var isActive = c === activeColor;
-      return /*#__PURE__*/_jsx(Flexbox, {
+      return /*#__PURE__*/_jsx(Center, {
         className: cx(styles.container, isActive && styles.active),
         onClick: function onClick() {
           onSelect === null || onSelect === void 0 || onSelect(c);
         },
         style: {
           background: c
-        }
+        },
+        children: isActive && /*#__PURE__*/_jsx(Icon, {
+          color: darken(0.3, c),
+          icon: CheckIcon,
+          size: {
+            fontSize: 14,
+            strokeWidth: 4
+          }
+        })
       }, "".concat(c, "_").concat(index));
-    })]
-  });
+    })
+  }));
 });
 export default Swatches;

package/es/Swatches/style.js

@@ -5,7 +5,7 @@ export var useStyles = createStyles(function (_ref, size) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      box-shadow: 0 0 0 2px ", ";\n    "])), token.colorTextTertiary),
-    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      width: ", "px;\n      height: ", "px;\n\n      background: ", ";\n      border-radius: 50%;\n      box-shadow: inset 0 0 0 2px ", ";\n\n      transition:\n        scale 400ms ", ",\n        box-shadow 100ms ", ";\n\n      &:hover {\n        box-shadow: 0 0 0 3px ", ";\n      }\n\n      &:active {\n        scale: 0.8;\n      }\n    "])), size, size, token.colorBgContainer, token.colorSplit, token.motionEaseOut, token.motionEaseOut, token.colorText)
+    active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      box-shadow:\n        inset 0 0 0 1px rgba(0, 0, 0, 20%),\n        0 0 0 2px ", ";\n    "])), token.colorTextTertiary),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      width: ", "px;\n      height: ", "px;\n\n      background: ", ";\n      border-radius: 50%;\n      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 5%);\n\n      &:hover {\n        box-shadow:\n          inset 0 0 0 1px rgba(0, 0, 0, 5%),\n          0 0 0 2px ", ";\n      }\n    "])), size, size, token.colorBgContainer, token.colorText)
   };
 });

package/es/components.d.ts

@@ -31,9 +31,7 @@ export { default as Grid, type GridProps } from './Grid';
 export { default as Header, type HeaderProps } from './Header';
 export { default as Highlighter, type HighlighterProps, SyntaxHighlighter, type SyntaxHighlighterProps, } from './Highlighter';
 export { useChatListActionsBar } from './hooks/useChatListActionsBar';
-export { default as Hotkey, type HotkeyProps } from './Hotkey';
-export { KeyMapEnum } from './Hotkey/type';
-export { combineKeys } from './Hotkey/utils';
+export { combineKeys, default as Hotkey, type HotkeyProps, KeyMapEnum } from './Hotkey';
 export { default as HotkeyInput, type HotkeyInputProps } from './HotkeyInput';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
 export * from './Icon/icons';
@@ -43,7 +41,7 @@ export { Input, type InputProps, TextArea, type TextAreaProps } from './Input';
 export { default as Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, } from './Layout';
 export { default as List, type ListItemProps } from './List';
 export { default as Markdown, type MarkdownProps } from './Markdown';
-export { Typography, type TypographyProps } from './Markdown/Typography';
+export { default as Typography, type TypographyProps } from './Markdown/Typography';
 export { default as MaterialFileTypeIcon, type MaterialFileTypeIconProps, } from './MaterialFileTypeIcon';
 export { default as Mermaid, type MermaidProps } from './Mermaid';
 export { default as Modal, type ModalProps } from './Modal';

package/es/components.js

@@ -31,9 +31,7 @@ export { default as Grid } from "./Grid";
 export { default as Header } from "./Header";
 export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";
 export { useChatListActionsBar } from "./hooks/useChatListActionsBar";
-export { default as Hotkey } from "./Hotkey";
-export { KeyMapEnum } from "./Hotkey/type";
-export { combineKeys } from "./Hotkey/utils";
+export { combineKeys, default as Hotkey, KeyMapEnum } from "./Hotkey";
 export { default as HotkeyInput } from "./HotkeyInput";
 export { default as Icon } from "./Icon";
 export * from "./Icon/icons";
@@ -43,7 +41,7 @@ export { Input, TextArea } from "./Input";
 export { default as Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc } from "./Layout";
 export { default as List } from "./List";
 export { default as Markdown } from "./Markdown";
-export { Typography } from "./Markdown/Typography";
+export { default as Typography } from "./Markdown/Typography";
 export { default as MaterialFileTypeIcon } from "./MaterialFileTypeIcon";
 export { default as Mermaid } from "./Mermaid";
 export { default as Modal } from "./Modal";

package/es/hooks/useHighlight.d.ts

@@ -1,3 +1,4 @@
+import { SWRResponse } from 'swr';
 export declare const FALLBACK_LANG = "txt";
-export declare const useHighlight: (text: string, lang: string, enableTransformer?: boolean) => import("swr/dist/_internal/types").SWRResponse<string, any, any>;
+export declare const useHighlight: (text: string, lang: string, enableTransformer?: boolean) => SWRResponse<string, Error>;
 export { default as languageMap } from './languageMap';

package/es/hooks/useHighlight.js

@@ -5,70 +5,149 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight } from '@shikijs/transformers';
 import { useTheme, useThemeMode } from 'antd-style';
 import { useMemo } from 'react';
-import { codeToHtml } from 'shiki';
 import useSWR from 'swr';
 import { Md5 } from 'ts-md5';
 import languageMap from "./languageMap";
 export var FALLBACK_LANG = 'txt';
+
+// 应用级缓存，避免重复计算
+var highlightCache = new Map();
+var MD5_LENGTH_THRESHOLD = 10000; // 超过该长度使用异步MD5
+
+// 颜色替换映射类型
+
+// 懒加载 shiki
+var loadShiki = function loadShiki() {
+  return import('shiki').then(function (mod) {
+    return mod.codeToHtml;
+  });
+};
+var shikiPromise = loadShiki();
+
+// 辅助函数：安全的HTML转义
+var escapeHtml = function escapeHtml(str) {
+  return str.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
+};
+
+// 主高亮组件
 export var useHighlight = function useHighlight(text, lang, enableTransformer) {
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
+  var theme = useTheme();
   var language = lang.toLowerCase();
+
+  // 匹配支持的语言
   var matchedLanguage = useMemo(function () {
     return languageMap.includes(language) ? language : FALLBACK_LANG;
   }, [language]);
-  var theme = useTheme();
+
+  // 优化transformer创建
   var transformers = useMemo(function () {
     if (!enableTransformer) return;
     return [transformerNotationDiff(), transformerNotationHighlight(), transformerNotationWordHighlight(), transformerNotationFocus(), transformerNotationErrorLevel()];
   }, [enableTransformer]);
-  var key = useMemo(function () {
-    return Md5.hashStr(text);
-  }, [text]);
-  return useSWR([matchedLanguage, isDarkMode ? 'd' : 'l', key].join('-'), /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+
+  // 优化颜色替换配置
+  var colorReplacements = useMemo(function () {
+    return {
+      '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,
+        '#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]);
+
+  // 构建缓存键
+  var cacheKey = useMemo(function () {
+    // 长文本使用 hash
+    var hash = text.length < MD5_LENGTH_THRESHOLD ? text : Md5.hashStr(text);
+    return [matchedLanguage, isDarkMode ? 'd' : 'l', hash].join('-');
+  }, [matchedLanguage, isDarkMode]);
+
+  // 使用SWR获取高亮HTML
+  return useSWR(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var codeToHtml, html, _codeToHtml, _html, fallbackHtml;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _context.prev = 0;
-          return _context.abrupt("return", codeToHtml(text, {
-            colorReplacements: {
-              '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,
-                '#0991b6': theme.colorError,
-                '#174781': theme.purple10,
-                '#2f86d2': theme.colorText,
-                '#357b42': theme.gray,
-                '#7b30d0': theme.colorInfo,
-                '#7eb233': theme.colorWarningTextActive,
-                '#a44185': theme.colorSuccess,
-                '#dc3eb7': theme.yellow11
-              }
-            },
+          if (!(cacheKey && highlightCache.has(cacheKey))) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", highlightCache.get(cacheKey));
+        case 2:
+          _context.prev = 2;
+          _context.next = 5;
+          return shikiPromise;
+        case 5:
+          codeToHtml = _context.sent;
+          _context.next = 8;
+          return codeToHtml(text, {
+            colorReplacements: colorReplacements,
             lang: matchedLanguage,
             theme: isDarkMode ? 'slack-dark' : 'slack-ochin',
             transformers: transformers
-          }));
-        case 4:
-          _context.prev = 4;
-          _context.t0 = _context["catch"](0);
-          console.error('shiki Highlight error:', _context.t0);
-          return _context.abrupt("return", text);
+          });
         case 8:
+          html = _context.sent;
+          // 缓存结果
+          if (cacheKey) highlightCache.set(cacheKey, html);
+          return _context.abrupt("return", html);
+        case 13:
+          _context.prev = 13;
+          _context.t0 = _context["catch"](2);
+          console.error('高级渲染失败:', _context.t0);
+          _context.prev = 16;
+          _context.next = 19;
+          return shikiPromise;
+        case 19:
+          _codeToHtml = _context.sent;
+          _context.next = 22;
+          return _codeToHtml(text, {
+            lang: matchedLanguage,
+            theme: isDarkMode ? 'dark-plus' : 'light-plus'
+          });
+        case 22:
+          _html = _context.sent;
+          if (cacheKey) highlightCache.set(cacheKey, _html);
+          return _context.abrupt("return", _html);
+        case 27:
+          _context.prev = 27;
+          _context.t1 = _context["catch"](16);
+          // 最终降级到纯文本
+          fallbackHtml = "<pre class=\"fallback\"><code>".concat(escapeHtml(text), "</code></pre>");
+          if (cacheKey) highlightCache.set(cacheKey, fallbackHtml);
+          return _context.abrupt("return", fallbackHtml);
+        case 32:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[0, 4]]);
-  })));
+    }, _callee, null, [[2, 13], [16, 27]]);
+  })), {
+    dedupingInterval: 3000,
+    // 3秒内相同请求只执行一次
+    errorRetryCount: 2,
+    // 最多重试2次
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false
+  });
 };
 export { default as languageMap } from "./languageMap";

package/es/hooks/useMermaid.d.ts

@@ -0,0 +1,9 @@
+import { SWRResponse } from 'swr';
+/**
+ * 验证并处理 Mermaid 图表内容
+ */
+export declare const useMermaid: (id: string, content: string) => SWRResponse<string, Error>;
+/**
+ * 初始化 Mermaid 配置
+ */
+export declare const useMermaidInit: () => void;