@lobehub/ui 1.17.0 → 1.18.2

package/README.md

@@ -1,7 +1,7 @@
 <a name="readme-top"></a>
 
 <div align="center">
-  
+
 <img width="160" src="https://raw.githubusercontent.com/lobehub/.github/main/profile/Logo.webp">
 
 <h1>Lobe UI</h1>
@@ -15,8 +15,7 @@ Lobe UI is an open-source UI component library for building _AIGC_ web apps
 [![release][release-shield]][release-url]
 [![releaseDate][release-date-shield]][release-date-url]
 [![ciTest][ci-test-shield]][ci-test-url]
-[![ciRelease][ci-release-shield]][ci-release-url]
-<br/>
+[![ciRelease][ci-release-shield]][ci-release-url] <br/>
 [![contributors][contributors-shield]][contributors-url]
 [![forks][forks-shield]][forks-url]
 [![stargazers][stargazers-shield]][stargazers-url]
@@ -26,6 +25,25 @@ Lobe UI is an open-source UI component library for building _AIGC_ web apps
 
 </div>
 
+<details>
+<summary><kbd>Table of contents</kbd></summary>
+
+#### TOC
+
+- [📦 Installation](#-installation)
+
+- [🤯 Usage](#-usage)
+
+  - [Compile with NextJS](#compile-with-nextjs)
+
+- [⌨️ Local Development](#️-local-development)
+
+- [🤝 Contributing](#-contributing)
+
+####
+
+</details>
+
 ## 📦 Installation
 
 This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
@@ -36,7 +54,13 @@ To install Lobe UI, run the following command:
 pnpm add @lobehub/ui
 ```
 
-## Usage
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🤯 Usage
 
 ### Compile with NextJS
 
@@ -115,7 +139,6 @@ This project is [MIT](./LICENSE) licensed.
 <!-- LINK GROUP -->
 
 [profile-url]: https://github.com/lobehub
-[issues-url]: https://github.com/lobehub/lobe-ui/issues/new/choose
 [gitpod-url]: https://gitpod.io/#https://github.com/lobehub/lobe-ui
 
 <!-- SHIELD LINK GROUP -->
@@ -160,4 +183,4 @@ This project is [MIT](./LICENSE) licensed.
 <!-- issues -->
 
 [issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-ui.svg?style=flat
-[issues-url]: https://img.shields.io/github/issues/lobehub/lobe-ui.svg?style=flat
+[issues-url]: https://github.com/lobehub/lobe-ui/issues/new/choose

package/es/ColorScales/index.js

@@ -39,7 +39,7 @@ var ColorScales = /*#__PURE__*/memo(function (_ref) {
                   children: index
                 })
               })
-            }, 'num' + index);
+            }, "num".concat(index));
           })]
         }, "scale-title"), /*#__PURE__*/_jsx(ScaleRow, {
           name: name,

package/es/ContextMenu/index.js

@@ -51,7 +51,6 @@ var MenuComponent = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       whileElementsMounted: autoUpdate
     }),
     refs = _useFloating.refs,
-    floatingStyles = _useFloating.floatingStyles,
     context = _useFloating.context;
   var hover = useHover(context, {
     enabled: isNested && allowHover,
@@ -238,8 +237,7 @@ var MenuComponent = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
         returnFocus: !isNested,
         children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
           className: styles.container,
-          ref: refs.setFloating,
-          style: floatingStyles
+          ref: refs.setFloating
         }, getFloatingProps()), {}, {
           children: items === null || items === void 0 ? void 0 : items.map(renderMenuItem)
         }))

package/es/Conversation/ChatList/MessageItem/Content.js

@@ -39,6 +39,7 @@ var Content = /*#__PURE__*/memo(function (_ref) {
               index: index
             });
             handleMessageEditing(null);
+
             // 如果是用户的消息，那么重新生成下一条消息
             if (isUser) {
               resendMessage(index + 1);
@@ -67,7 +68,7 @@ var Content = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [!loading ? /*#__PURE__*/_jsx(Markdown, {
       children: content
-    }) : !!error ? null : /*#__PURE__*/_jsx("div", {
+    }) : error ? null : /*#__PURE__*/_jsx("div", {
       children: /*#__PURE__*/_jsx(LoadingOutlined, {
         spin: true,
         style: {

package/es/Conversation/ChatList/index.js

@@ -40,7 +40,7 @@ var ChatList = /*#__PURE__*/memo(function (_ref2) {
     children: [messages
     // 根据情况确认是否包含系统
     .filter(function (s) {
-      return !includeSystem ? s.role !== 'system' : !!s;
+      return !includeSystem ? s.role !== 'system' : Boolean(s);
     }).map(function (item, index) {
       return /*#__PURE__*/_jsx(MessageItem, _objectSpread({
         index: index,

package/es/SearchBar/index.js

@@ -59,7 +59,7 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
       },
       onChange: function onChange(e) {
         setInputValue(e.target.value);
-        setShowTag(e.target.value ? false : true);
+        setShowTag(!e.target.value);
         if (_onChange) _onChange(e);
       },
       onFocus: function onFocus() {

package/es/ThemeProvider/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { extractStaticStyle, type ThemeMode } from 'antd-style';
+import type { CustomStylishParams, CustomTokenParams } from 'antd-style/lib/types/function';
 export interface ThemeProviderProps {
     /**
      * @description Cache for the extracted static styles
@@ -9,6 +10,18 @@ export interface ThemeProviderProps {
      * @description The children of the ThemeProvider component
      */
     children: React.ReactNode;
+    /**
+     * @description Custom stylish
+     */
+    customStylish?: (theme: CustomStylishParams) => {
+        [key: string]: any;
+    };
+    /**
+     * @description Custom extra token
+     */
+    customToken?: (theme: CustomTokenParams) => {
+        [key: string]: any;
+    };
     /**
      * @description Whether to inline the styles on server-side rendering or not
      */

package/es/ThemeProvider/index.js

@@ -1,5 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { App } from 'antd';
-import { ThemeProvider as AntdThemeProvider, StyleProvider, setupStyled } from 'antd-style';
+import { setupStyled, StyleProvider, ThemeProvider as AntdThemeProvider } from 'antd-style';
 import { memo } from 'react';
 // @ts-ignore
 import ReactFontLoader from 'react-font-loader';
@@ -10,15 +13,27 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
-    themeMode = _ref.themeMode;
+    themeMode = _ref.themeMode,
+    _ref$customStylish = _ref.customStylish,
+    _customStylish = _ref$customStylish === void 0 ? function () {
+      return {};
+    } : _ref$customStylish,
+    _ref$customToken = _ref.customToken,
+    _customToken = _ref$customToken === void 0 ? function () {
+      return {};
+    } : _ref$customToken;
   setupStyled({
     ThemeContext: ThemeContext
   });
   return /*#__PURE__*/_jsx(StyleProvider, {
     speedy: process.env.NODE_ENV === 'production',
     children: /*#__PURE__*/_jsxs(AntdThemeProvider, {
-      customStylish: lobeCustomStylish,
-      customToken: lobeCustomToken,
+      customStylish: function customStylish(theme) {
+        return _objectSpread(_objectSpread({}, lobeCustomStylish(theme)), _customStylish(theme));
+      },
+      customToken: function customToken(theme) {
+        return _objectSpread(_objectSpread({}, lobeCustomToken(theme)), _customToken(theme));
+      },
       theme: lobeTheme,
       themeMode: themeMode,
       children: [/*#__PURE__*/_jsx(ReactFontLoader, {

package/es/index.d.ts

@@ -1,6 +1,6 @@
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
 export { default as Avatar, type AvatarProps } from './Avatar';
-export type { ChatMessage } from './Chat';
+export type { ChatMessage, MessageRoleType } from './Chat';
 export { default as ColorScales, type ColorScalesProps } from './ColorScales';
 export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
 export { default as Conversation, type ConversationProps } from './Conversation';
@@ -9,9 +9,9 @@ export { default as DraggablePanel, type DraggablePanelProps } from './Draggable
 export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
 export { default as EditableMessageList, type EditableMessageListProps, } from './EditableMessageList';
 export { default as EditableText, type EditableTextProps } from './EditableText';
-export { default as Highlighter, SyntaxHighlighter, type HighlighterProps, type SyntaxHighlighterProps, } from './Highlighter';
+export { default as Highlighter, type HighlighterProps, SyntaxHighlighter, type SyntaxHighlighterProps, } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
-export { Input, TextArea, type InputProps, type TextAreaProps } from './Input';
+export { Input, type InputProps, TextArea, type TextAreaProps } from './Input';
 export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Markdown, type MarkdownProps } from './Markdown';
@@ -20,10 +20,10 @@ export { default as MessageModal, type MessageModalProps } from './MessageModal'
 export { default as SearchBar, type SearchBarProps } from './SearchBar';
 export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as Snippet, type SnippetProps } from './Snippet';
-export { default as StroyBook, useControls, useCreateStore, type StroyBookProps, } from './StroyBook';
+export { default as StroyBook, type StroyBookProps, useControls, useCreateStore, } from './StroyBook';
+export { colorScales as colors } from './styles/colors';
 export { default as Swatches, type SwatchesProps } from './Swatches';
 export { default as TabsNav, type TabsNavProps } from './TabsNav';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as ThemeSwitch, type ThemeSwitchProps } from './ThemeSwitch';
 export { default as Tooltip, type TooltipProps } from './Tooltip';
-export { colorScales as colors } from './styles/colors';

package/es/index.js

@@ -20,9 +20,9 @@ export { default as SearchBar } from "./SearchBar";
 export { default as SideNav } from "./SideNav";
 export { default as Snippet } from "./Snippet";
 export { default as StroyBook, useControls, useCreateStore } from "./StroyBook";
+export { colorScales as colors } from "./styles/colors";
 export { default as Swatches } from "./Swatches";
 export { default as TabsNav } from "./TabsNav";
 export { default as ThemeProvider } from "./ThemeProvider";
 export { default as ThemeSwitch } from "./ThemeSwitch";
-export { default as Tooltip } from "./Tooltip";
-export { colorScales as colors } from "./styles/colors";
+export { default as Tooltip } from "./Tooltip";

package/es/styles/algorithms/generateCustomStylish.js

@@ -1,19 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-import { rgba } from 'polished';
+var _templateObject, _templateObject2;
 export var generateCustomStylish = function generateCustomStylish(_ref) {
   var css = _ref.css,
     token = _ref.token,
     isDarkMode = _ref.isDarkMode;
   return {
-    clickableText: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText),
-    resetLinkColor: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: inherit;\n\n      &:hover,\n      &:active {\n        color: inherit;\n      }\n    "]))),
-    heroButtonGradient: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      background: linear-gradient(90deg, ", " 0%, ", " 100%);\n    "])), token.gradientColor1, token.gradientColor2),
-    heroGradient: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background-image: ", ";\n      background-size: 300% 300%;\n    "])), token.gradientHeroBgG),
-    heroGradientFlow: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      animation: flow 5s ease infinite;\n\n      @keyframes flow {\n        0% {\n          background-position: 0 0;\n        }\n\n        50% {\n          background-position: 100% 100%;\n        }\n\n        100% {\n          background-position: 0 0;\n        }\n      }\n    "]))),
-    heroBlurBall: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      will-change: transform;\n\n      background: linear-gradient(\n        135deg,\n        ", " 0%,\n        ", " 30%,\n        ", " 70%,\n        ", " 100%\n      );\n      background-size: 200% 200%;\n      filter: blur(69px);\n\n      animation: glow 10s ease infinite;\n\n      @keyframes glow {\n        0% {\n          background-position: 0 -100%;\n        }\n\n        50% {\n          background-position: 200% 50%;\n        }\n\n        100% {\n          background-position: 0 -100%;\n        }\n      }\n    "])), token.gradientColor3, token.gradientColor1, token.red, token.cyan),
-    iconGradientDefault: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      background-image: radial-gradient(\n        100% 100% at 50% 0,\n        ", " 0,\n        ", " 100%\n      );\n    "])), rgba(token.colorSolid, 0.2), rgba(token.colorSolid, 0.1)),
-    blur: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
-    markdown: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin: 20px auto;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius)
+    blur: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
+    markdown: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin: 20px auto;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius)
   };
 };

package/es/styles/algorithms/generateCustomToken.js

@@ -33,8 +33,7 @@ var generateCustomColorPalette = function generateCustomColorPalette(_ref3) {
 
 // @ts-ignore
 export var generateCustomToken = function generateCustomToken(_ref4) {
-  var isDarkMode = _ref4.isDarkMode,
-    token = _ref4.token;
+  var isDarkMode = _ref4.isDarkMode;
   var colorCustomToken = {};
   Object.entries(colorScales).forEach(function (_ref5) {
     var _ref6 = _slicedToArray(_ref5, 2),
@@ -46,20 +45,5 @@ export var generateCustomToken = function generateCustomToken(_ref4) {
       appearance: isDarkMode ? 'dark' : 'light'
     }));
   });
-  var gradientColor1 = colorScales.blue.darkA[8];
-  var gradientColor2 = isDarkMode ? colorScales.magenta.darkA[8] : colorScales.cyan.darkA[8];
-  var gradientColor3 = colorScales.purple.darkA[8];
-  var colorSolid = isDarkMode ? '#fff' : '#000';
-  return _objectSpread(_objectSpread(_objectSpread({}, token), colorCustomToken), {}, {
-    headerHeight: 64,
-    footerHeight: 300,
-    sidebarWidth: 240,
-    tocWidth: 176,
-    contentMaxWidth: 1152,
-    colorSolid: colorSolid,
-    gradientColor1: gradientColor1,
-    gradientColor2: gradientColor2,
-    gradientColor3: gradientColor3,
-    gradientHeroBgG: "radial-gradient(at 80% 20%, ".concat(gradientColor1, " 0%, ").concat(gradientColor2, " 80%, ").concat(gradientColor3, " 130%)")
-  });
+  return colorCustomToken;
 };

package/es/types/customStylish.d.ts

@@ -1,14 +1,4 @@
 export interface LobeCustomStylish {
   blur: string;
-  clickableText: string;
-
-  heroBlurBall: string;
-  heroButtonGradient: string;
-
-  heroGradient: string;
-  heroGradientFlow: string;
-
-  iconGradientDefault: string;
   markdown: string;
-  resetLinkColor: string;
 }

package/es/types/customToken.d.ts

@@ -45,15 +45,4 @@ export type ColorPalettesAlpha = {
   [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}A`]: string;
 };
 
-export interface LobeCustomToken extends ColorToken, ColorPalettes, ColorPalettesAlpha {
-  colorSolid: string;
-  contentMaxWidth: number;
-  footerHeight: number;
-  gradientColor1: string;
-  gradientColor2: string;
-  gradientColor3: string;
-  gradientHeroBgG: string;
-  headerHeight: number;
-  sidebarWidth: number;
-  tocWidth: number;
-}
+export interface LobeCustomToken extends ColorToken, ColorPalettes, ColorPalettesAlpha {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.17.0",
+  "version": "1.18.2",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -18,13 +18,12 @@
     "url": "https://github.com/lobehub/lobe-ui.git"
   },
   "license": "MIT",
-  "author": "LobeHub",
+  "author": "LobeHub <i@lobehub.com>",
   "sideEffects": false,
   "main": "es/index.js",
   "module": "es/index.js",
   "types": "es/index.d.ts",
   "files": [
-    "lib",
     "es"
   ],
   "scripts": {
@@ -38,31 +37,36 @@
     "docs:build": "npm run build:theme && dumi build",
     "doctor": "father doctor",
     "lint": "eslint \"{src,tests,packages}/**/*.{js,jsx,ts,tsx}\" --fix",
+    "lint:md": "remark . --quiet --frail --output",
+    "lint:style": "stylelint \"{src,tests,packages}/**/*.{js,jsx,ts,tsx}\" --fix",
     "prepare": "husky install && npm run setup",
     "prepublishOnly": "father doctor && npm run build",
     "prettier": "prettier -c --write \"**/**\"",
     "release": "semantic-release",
     "setup": "dumi setup",
     "start": "dumi dev",
-    "stylelint": "stylelint \"{src,tests,packages}/**/*.{js,jsx,ts,tsx}\" --fix",
     "test": "vitest --passWithNoTests",
     "test:coverage": "vitest run --coverage  --passWithNoTests",
     "test:update": "vitest -u",
     "type-check": "tsc -p tsconfig-check.json"
   },
   "lint-staged": {
-    "*.{md,json}": [
+    "*.md": [
+      "remark --quiet --output --",
+      "prettier --write --no-error-on-unmatched-pattern"
+    ],
+    "*.json": [
       "prettier --write --no-error-on-unmatched-pattern"
     ],
     "*.{js,jsx}": [
-      "eslint --fix",
+      "prettier --write",
       "stylelint --fix",
-      "prettier --write"
+      "eslint --fix"
     ],
     "*.{ts,tsx}": [
-      "eslint --fix",
+      "prettier --parser=typescript --write",
       "stylelint --fix",
-      "prettier --parser=typescript --write"
+      "eslint --fix"
     ]
   },
   "dependencies": {
@@ -71,7 +75,6 @@
     "@dqbd/tiktoken": "^1",
     "@floating-ui/react": "^0",
     "ahooks": "^3",
-    "antd-style": "^3",
     "chroma-js": "^2",
     "copy-to-clipboard": "^3",
     "dayjs": "^1",
@@ -108,6 +111,7 @@
     "@umijs/lint": "^4",
     "@vitest/coverage-c8": "latest",
     "antd": "^5",
+    "antd-style": "^3",
     "commitlint": "^17",
     "commitlint-config-gitmoji": "^2",
     "concurrently": "^8",
@@ -131,6 +135,12 @@
     "prettier-plugin-packagejson": "^2",
     "react": "^18",
     "react-dom": "^18",
+    "remark": "^14",
+    "remark-cli": "^11",
+    "remark-lint": "^9",
+    "remark-lint-list-item-indent": "^3",
+    "remark-preset-lint-recommended": "^6",
+    "remark-toc": "^8",
     "semantic-release": "^21",
     "semantic-release-config-gitmoji": "^1",
     "stylelint": "^15",
@@ -142,6 +152,7 @@
   },
   "peerDependencies": {
     "antd": ">=5",
+    "antd-style": ">=3",
     "react": ">=18",
     "react-dom": ">=18"
   },