@lobehub/ui 1.22.1 → 1.23.1

package/es/ActionIconGroup/index.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import { ActionIconProps } from "..";
+import { type MenuProps } from 'antd';
 import { DivProps } from "../types";
 export interface ActionIconGroupProps extends DivProps {
     direction?: 'row' | 'column';
-    items: ActionIconProps[];
+    dropdownMenu?: MenuProps['items'];
+    items?: ActionIconProps[];
     /**
      * @description The position of the tooltip relative to the target
      * @enum ["top","left","right","bottom","topLeft","topRight","bottomLeft","bottomRight","leftTop","leftBottom","rightTop","rightBottom"]

package/es/ActionIconGroup/index.js

@@ -1,9 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "items", "placement", "spotlight", "direction"];
+var _excluded = ["type", "items", "placement", "spotlight", "direction", "dropdownMenu"];
 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 { ActionIcon, Spotlight } from "./..";
+import { Dropdown } from 'antd';
+import { MoreHorizontal } from 'lucide-react';
 import { memo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,26 +13,40 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var ActionIconGroup = /*#__PURE__*/memo(function (_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'block' : _ref$type,
-    items = _ref.items,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
     placement = _ref.placement,
     _ref$spotlight = _ref.spotlight,
     spotlight = _ref$spotlight === void 0 ? true : _ref$spotlight,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    _ref$dropdownMenu = _ref.dropdownMenu,
+    dropdownMenu = _ref$dropdownMenu === void 0 ? [] : _ref$dropdownMenu,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       direction: direction,
       type: type
     }),
     styles = _useStyles.styles;
+  var tooltipsPlacement = placement || (direction === 'column' ? 'right' : 'top');
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: styles.container
   }, props), {}, {
     children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), items.map(function (item, index) {
       return /*#__PURE__*/_jsx(ActionIcon, _objectSpread({
-        placement: placement || (direction === 'column' ? 'right' : 'top'),
+        placement: tooltipsPlacement,
         size: "small"
       }, item), index);
+    }), dropdownMenu && /*#__PURE__*/_jsx(Dropdown, {
+      menu: {
+        items: dropdownMenu
+      },
+      trigger: ['click'],
+      children: /*#__PURE__*/_jsx(ActionIcon, {
+        icon: MoreHorizontal,
+        placement: tooltipsPlacement,
+        size: "small"
+      }, "more")
     })]
   }));
 });

package/es/ActionIconGroup/style.js

@@ -8,7 +8,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     cx = _ref.cx;
   var direction = _ref2.direction,
     type = _ref2.type;
-  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder);
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), type === 'block' ? token.colorFillTertiary : token.colorFillQuaternary, type === 'block' ? 'transparent' : token.colorBorder);
   return {
     container: cx(type !== 'pure' && typeStylish, stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n\n          padding: 2px;\n\n          border-radius: ", "px;\n        "])), direction, token.borderRadius))
   };

package/es/ChatItem/index.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
 import { type AlertProps } from 'antd';
+import { ReactNode } from 'react';
 import type { DivProps } from "../types";
 import { MetaData } from "../types/meta";
 export interface ChatItemProps extends DivProps {
+    actions?: ReactNode;
     /**
      * @description Whether to show alert and alert config
      */

package/es/ChatItem/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "title", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time"];
+var _excluded = ["actions", "className", "title", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time"];
 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 { Alert } from 'antd';
@@ -13,7 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var AVATAR_SIZE = 40;
 var ChatItem = /*#__PURE__*/memo(function (_ref) {
-  var className = _ref.className,
+  var actions = _ref.actions,
+    className = _ref.className,
     title = _ref.title,
     primary = _ref.primary,
     _ref$borderSpacing = _ref.borderSpacing,
@@ -35,7 +36,8 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
       title: title,
       primary: primary,
       avatarSize: AVATAR_SIZE,
-      showTitle: showTitle
+      showTitle: showTitle,
+      borderSpacing: borderSpacing
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
@@ -65,7 +67,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
       children: [/*#__PURE__*/_jsxs("div", {
         className: cx(styles.name, 'chat-item-name'),
         children: [showTitle ? avatar.title || 'untitled' : null, time && /*#__PURE__*/_jsx("span", {
-          className: cx(type === 'pure' && !showTitle && styles.time, 'chat-item-time'),
+          className: "chat-item-time",
           children: formatTime(time)
         })]
       }), alert ? /*#__PURE__*/_jsx(Alert, _objectSpread({
@@ -75,6 +77,9 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
         children: /*#__PURE__*/_jsx(Markdown, {
           children: String(message || '...')
         })
+      }), /*#__PURE__*/_jsx("div", {
+        className: cx(styles.actions, 'chat-item-actions'),
+        children: actions
       })]
     }), borderSpacing && /*#__PURE__*/_jsx("div", {
       style: {

package/es/ChatItem/style.d.ts

@@ -1,5 +1,6 @@
 export declare const useStyles: (props?: {
     avatarSize: number;
+    borderSpacing: boolean;
     placement?: "left" | "right" | undefined;
     primary?: boolean | undefined;
     showTitle?: boolean | undefined;
@@ -11,6 +12,6 @@ export declare const useStyles: (props?: {
     avatarContainer: import("antd-style").SerializedStyles;
     messageContainer: import("antd-style").SerializedStyles;
     name: import("antd-style").SerializedStyles;
-    time: string;
     message: string;
+    actions: string;
 }>;

package/es/ChatItem/style.js

@@ -1,28 +1,28 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var cx = _ref.cx,
     css = _ref.css,
-    token = _ref.token,
-    stylish = _ref.stylish;
+    token = _ref.token;
   var placement = _ref2.placement,
     type = _ref2.type,
     title = _ref2.title,
     primary = _ref2.primary,
     avatarSize = _ref2.avatarSize,
-    showTitle = _ref2.showTitle;
+    showTitle = _ref2.showTitle,
+    borderSpacing = _ref2.borderSpacing;
   var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? token.colorFillSecondary : token.colorFillTertiary, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), title ? 0 : '6px');
-  var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), token.borderRadiusLG, token.motionEaseOut, token.colorFillTertiary);
+  var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
   return {
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n\n          .chat-item-time {\n            display: none;\n          }\n\n          &:hover {\n            .chat-item-time {\n              display: inline-block;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse')),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n\n          .chat-item-time,\n          .chat-item-actions {\n            display: none;\n          }\n\n          &:hover {\n            .chat-item-time {\n              display: inline-block;\n            }\n\n            .chat-item-actions {\n              display: flex;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse')),
     loading: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
     avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     messageContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n\n        .ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n        }\n      "]))),
     name: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 4px;\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right'),
-    time: cx(stylish.blur, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          padding: 4px 6px;\n\n          line-height: 1;\n\n          background: ", ";\n          border-radius: ", "px;\n        "])), token.colorFillQuaternary, token.borderRadius)),
-    message: cx(typeStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n        "]))))
+    message: cx(typeStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
+    actions: cx(css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: absolute;\n          display: flex;\n          align-items: flex-start;\n          justify-content: ", ";\n        "])), placement === 'left' ? 'flex-end' : 'flex-start'), type === 'block' && borderSpacing ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n              right: ", ";\n              bottom: 0;\n              left: ", ";\n              transform: translateX(", ");\n            "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', placement === 'left' ? '100%' : '-100%') : css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n              right: ", ";\n              bottom: ", ";\n              left: ", ";\n            "])), placement === 'left' ? '0' : 'unset', type === 'block' ? '-40px' : '-32px', placement === 'right' ? '0' : 'unset'))
   };
 });

package/es/ChatList/ActionsBar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type ActionIconGroupProps } from "../index";
+export interface ActionsBarProps extends ActionIconGroupProps {
+    primary?: boolean;
+}
+declare const ActionsBar: import("react").NamedExoticComponent<ActionsBarProps>;
+export default ActionsBar;

package/es/ChatList/ActionsBar.js

@@ -0,0 +1,72 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["primary", "items", "dropdownMenu"];
+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 { Copy, Edit, RotateCw, Trash } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { ActionIconGroup, Icon } from "./..";
+import { jsx as _jsx } from "react/jsx-runtime";
+var ActionsBar = /*#__PURE__*/memo(function (_ref) {
+  var primary = _ref.primary,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$dropdownMenu = _ref.dropdownMenu,
+    dropdownMenu = _ref$dropdownMenu === void 0 ? [] : _ref$dropdownMenu,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var groupItems = useMemo(function () {
+    return [primary ? {
+      icon: Edit,
+      title: 'Edit',
+      onClick: function onClick() {
+        return console.log('click Edit');
+      }
+    } : {
+      icon: RotateCw,
+      title: 'Regenerate',
+      onClick: function onClick() {
+        return console.log('click Regenerate');
+      }
+    }].concat(_toConsumableArray(items)).filter(Boolean);
+  }, [primary, items]);
+  var groupDropdownMenu = useMemo(function () {
+    return dropdownMenu.concat([{
+      key: 'Edit',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: Edit,
+        size: "small"
+      }),
+      label: 'Edit'
+    }, {
+      key: 'Copy',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: Copy,
+        size: "small"
+      }),
+      label: 'Copy'
+    }, {
+      key: 'Regenerate',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: RotateCw,
+        size: "small"
+      }),
+      label: 'Regenerate'
+    }, {
+      type: 'divider'
+    }, {
+      key: 'Delete',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: Trash,
+        size: "small"
+      }),
+      label: 'Delete'
+    }]).filter(Boolean);
+  }, [primary, dropdownMenu]);
+  return /*#__PURE__*/_jsx(ActionIconGroup, _objectSpread({
+    dropdownMenu: groupDropdownMenu,
+    items: groupItems,
+    type: "ghost"
+  }, props));
+});
+export default ActionsBar;

package/es/ChatList/index.js

@@ -5,6 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 { memo } from 'react';
 import { ChatItem } from "./..";
+import ActionsBar from "./ActionsBar";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChatList = /*#__PURE__*/memo(function (_ref) {
@@ -22,6 +23,9 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
   }, props), {}, {
     children: data.map(function (item) {
       return /*#__PURE__*/_jsx(ChatItem, {
+        actions: /*#__PURE__*/_jsx(ActionsBar, {
+          primary: item.role === 'user'
+        }),
         avatar: item.meta,
         borderSpacing: type === 'chat',
         message: item.content,

package/es/Layout/index.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface LayoutProps {
+    asideWidth?: number;
+    children?: ReactNode;
+    content?: ReactNode;
+    footer?: ReactNode;
+    header?: ReactNode;
+    headerHeight?: number;
+    helmet?: ReactNode;
+    sidebar?: ReactNode;
+    toc?: ReactNode;
+    tocWidth?: number;
+}
+declare const Layout: import("react").NamedExoticComponent<LayoutProps>;
+export default Layout;

package/es/Layout/index.js

@@ -0,0 +1,81 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useResponsive } from 'antd-style';
+import { memo, useEffect, useState } from 'react';
+import { DraggablePanel } from "./..";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var Layout = /*#__PURE__*/memo(function (_ref) {
+  var helmet = _ref.helmet,
+    _ref$headerHeight = _ref.headerHeight,
+    headerHeight = _ref$headerHeight === void 0 ? 64 : _ref$headerHeight,
+    header = _ref.header,
+    footer = _ref.footer,
+    sidebar = _ref.sidebar,
+    asideWidth = _ref.asideWidth,
+    toc = _ref.toc,
+    children = _ref.children,
+    tocWidth = _ref.tocWidth;
+  var _useStyles = useStyles(headerHeight),
+    styles = _useStyles.styles;
+  var _useResponsive = useResponsive(),
+    mobile = _useResponsive.mobile,
+    laptop = _useResponsive.laptop;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    expand = _useState2[0],
+    setExpand = _useState2[1];
+  useEffect(function () {
+    setExpand(Boolean(laptop));
+  }, [laptop]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [helmet, header && /*#__PURE__*/_jsxs("header", {
+      className: styles.header,
+      style: {
+        height: headerHeight
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        className: styles.glass
+      }), header, mobile && toc && /*#__PURE__*/_jsx("nav", {
+        className: styles.toc,
+        children: toc
+      })]
+    }), /*#__PURE__*/_jsxs("main", {
+      className: styles.main,
+      children: [!mobile && !sidebar && /*#__PURE__*/_jsx("nav", {
+        style: {
+          width: tocWidth
+        }
+      }), !mobile && sidebar && /*#__PURE__*/_jsx("aside", {
+        className: styles.aside,
+        style: {
+          top: headerHeight
+        },
+        children: /*#__PURE__*/_jsx(DraggablePanel, {
+          expand: expand,
+          maxWidth: asideWidth,
+          onExpandChange: setExpand,
+          placement: "left",
+          children: /*#__PURE__*/_jsx("div", {
+            className: styles.asideInner,
+            children: sidebar
+          })
+        })
+      }), /*#__PURE__*/_jsx("section", {
+        className: styles.content,
+        children: children
+      }), !mobile && toc && /*#__PURE__*/_jsx("nav", {
+        className: styles.toc,
+        style: {
+          width: tocWidth
+        },
+        children: toc
+      })]
+    }), footer && /*#__PURE__*/_jsx("footer", {
+      className: styles.footer,
+      children: footer
+    })]
+  });
+});
+export default Layout;

package/es/Layout/style.d.ts

@@ -0,0 +1,11 @@
+export declare const useStyles: (props?: number | undefined) => import("antd-style").ReturnStyles<{
+    app: import("antd-style").SerializedStyles;
+    header: import("antd-style").SerializedStyles;
+    glass: import("antd-style").SerializedStyles;
+    main: import("antd-style").SerializedStyles;
+    content: import("antd-style").SerializedStyles;
+    footer: import("antd-style").SerializedStyles;
+    aside: import("antd-style").SerializedStyles;
+    asideInner: import("antd-style").SerializedStyles;
+    toc: import("antd-style").SerializedStyles;
+}>;

package/es/Layout/style.js

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, headerHeight) {
+  var css = _ref.css,
+    stylish = _ref.stylish;
+  var baseGlass = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    pointer-events: none;\n    content: '';\n    user-select: none;\n\n    position: absolute;\n    z-index: -1;\n    inset: -1px 0 -50%;\n  "])));
+  return {
+    app: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      overflow-x: hidden;\n      overflow-y: auto;\n      height: 100vh;\n    "]))),
+    header: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: sticky;\n      z-index: 999;\n      top: 0;\n      max-width: 100%;\n    "]))),
+    glass: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      z-index: 0;\n\n      &::before {\n        ", ";\n        ", ";\n        mask-image: linear-gradient(to bottom, black ", "px, transparent);\n      }\n\n      &::after {\n        ", ";\n      }\n    "])), stylish.blur, baseGlass, headerHeight, baseGlass),
+    main: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: relative;\n      display: flex;\n      align-items: stretch;\n      max-width: 100vw;\n    "]))),
+    content: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    "]))),
+    footer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      position: relative;\n      max-width: 100%;\n    "]))),
+    aside: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      position: sticky;\n      z-index: 2;\n      height: 100%;\n    "]))),
+    asideInner: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      overflow-x: hidden;\n      overflow-y: auto;\n      width: 100%;\n      height: calc(100vh - 64px);\n    "]))),
+    toc: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""])))
+  };
+});

package/es/Markdown/index.js

@@ -1,4 +1,4 @@
-import { Divider, Typography } from 'antd';
+import { Collapse, Divider, Typography } from 'antd';
 import pangu from 'pangu';
 import { memo } from 'react';
 import ReactMarkdown from 'react-markdown';
@@ -17,7 +17,8 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
     pre: CodeBlock,
     code: Code,
     hr: Divider,
-    a: Typography.Link
+    a: Typography.Link,
+    details: Collapse
   };
   return /*#__PURE__*/_jsx(Typography, {
     children: /*#__PURE__*/_jsx(ReactMarkdown, {

package/es/SearchBar/style.js

@@ -7,7 +7,7 @@ export var useStyles = createStyles(function (_ref) {
   return {
     search: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n  "]))),
     input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 8px 0 12px;\n  "]))),
-    tag: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  "]))),
+    tag: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n\n    background: ", ";\n  "])), token.colorBgContainer),
     icon: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextPlaceholder)
   };
 });

package/es/Snippet/style.js

@@ -6,5 +6,5 @@ export var useStyles = createStyles(function (_ref, type) {
     cx = _ref.cx,
     token = _ref.token;
   var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border: 1px solid ", ";\n  "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder);
-  return cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      max-width: 100%;\n      height: 36px;\n      padding: 0 8px 0 12px;\n\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        margin: 0 !important;\n        padding-top: 6px !important;\n        line-height: 1;\n        background: none !important;\n      }\n\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, token.colorFillTertiary));
+  return cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      max-width: 100%;\n      height: 36px;\n      padding: 0 8px 0 12px;\n\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        margin: 0 !important;\n        line-height: 1;\n        background: none !important;\n      }\n\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, token.colorFillTertiary));
 });

package/es/StroyBook/style.js

@@ -9,7 +9,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   return {
     editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: stretch;\n        justify-content: stretch;\n\n        width: inherit;\n        min-height: inherit;\n        ", "\n      "])), mobile && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          flex-direction: column;\n        "])))),
     left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: auto;\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n\n        ", "\n      "])), !noPadding && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          padding: 40px 24px;\n        "])))),
-    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        background: ", ";\n      "])), token.colorBgLayout),
+    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        background: ", ";\n\n        .draggable-panel-fixed {\n          width: 100% !important;\n        }\n      "])), token.colorBgLayout),
     leva: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        --leva-sizes-controlWidth: 66%;\n        --leva-colors-elevation1: ", ";\n        --leva-colors-elevation2: transparent;\n        --leva-colors-elevation3: ", ";\n        --leva-colors-accent1: ", ";\n        --leva-colors-accent2: ", ";\n        --leva-colors-accent3: ", ";\n        --leva-colors-highlight1: ", ";\n        --leva-colors-highlight2: ", ";\n        --leva-colors-highlight3: ", ";\n        --leva-colors-vivid1: ", ";\n        --leva-shadows-level1: unset;\n        --leva-shadows-level2: unset;\n        --leva-fonts-mono: ", ";\n\n        overflow: auto;\n        width: 100%;\n        height: 100%;\n        padding: 6px 0;\n\n        > div {\n          background: transparent;\n\n          > div {\n            background: transparent;\n          }\n        }\n\n        input:checked + label > svg {\n          stroke: ", ";\n        }\n\n        button {\n          --leva-colors-accent2: ", ";\n        }\n      "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.fontFamilyCode, token.colorBgLayout, token.colorFillSecondary)
   };
 });

package/es/ThemeProvider/GlobalStyle.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { createGlobalStyle } from 'antd-style';
-var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\", \"tnum\", \"kern\";\n    --font-variations: \"opsz\" auto, tabular-nums;\n\n    overflow-x: hidden;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n\n  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar {\n\t  width: 0;\n\t  height: 4px;\n\t  background-color: transparent;\n\n\t  &-thumb {\n\t\t  background-color: transparent;\n\t\t  border-radius: 4px;\n\t\t  transition: background-color 500ms ", ";\n\t  }\n\n\t  &-corner {\n\t\t  display: none;\n\t  }\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  code {\n\t  font-family: ", " !important;\n\n\t  * {\n\t\t  font-family: inherit !important;\n\t  }\n  }\n\n  *:hover, *:focus {\n\t  ::-webkit-scrollbar {\n\t\t  &-thumb {\n\t\t\t  background-color: ", ";\n\t\t  }\n\t  }\n  }\n"])), function (_ref) {
+var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\", \"tnum\", \"kern\";\n    --font-variations: \"opsz\" auto, tabular-nums;\n\n    overflow-x: hidden;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  body {\n    overflow-x: hidden;\n    overflow-y: auto;\n    height: 100vh;\n  }\n\n\n  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n  }\n\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  code {\n\t  font-family: ", " !important;\n\n\t  * {\n\t\t  font-family: inherit !important;\n\t  }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
 }, function (_ref2) {
@@ -18,12 +18,6 @@ var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _tagge
   return theme.yellow9;
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme.motionEaseOut;
-}, function (_ref7) {
-  var theme = _ref7.theme;
   return theme.fontFamilyCode;
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.colorFill;
 });
 export default GlobalStyle;

package/es/ThemeProvider/index.js

@@ -2,7 +2,7 @@ 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 { ThemeProvider as AntdThemeProvider, StyleProvider, createStyles, setupStyled } from 'antd-style';
 import { memo } from 'react';
 // @ts-ignore
 import ReactFontLoader from 'react-font-loader';
@@ -11,20 +11,27 @@ import { lobeCustomStylish, lobeCustomToken, lobeTheme } from "../styles";
 import GlobalStyle from "./GlobalStyle";
 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,
-    _ref$customStylish = _ref.customStylish,
-    _customStylish = _ref$customStylish === void 0 ? function () {
+var useStyled = createStyles(function (_ref) {
+  var stylish = _ref.stylish,
+    responsive = _ref.responsive;
+  return responsive.mobile ? stylish.noScrollbar : "";
+});
+var ThemeProvider = /*#__PURE__*/memo(function (_ref2) {
+  var children = _ref2.children,
+    themeMode = _ref2.themeMode,
+    _ref2$customStylish = _ref2.customStylish,
+    _customStylish = _ref2$customStylish === void 0 ? function () {
       return {};
-    } : _ref$customStylish,
-    _ref$customToken = _ref.customToken,
-    _customToken = _ref$customToken === void 0 ? function () {
+    } : _ref2$customStylish,
+    _ref2$customToken = _ref2.customToken,
+    _customToken = _ref2$customToken === void 0 ? function () {
       return {};
-    } : _ref$customToken;
+    } : _ref2$customToken;
   setupStyled({
     ThemeContext: ThemeContext
   });
+  var _useStyled = useStyled(),
+    styles = _useStyled.styles;
   return /*#__PURE__*/_jsx(StyleProvider, {
     speedy: process.env.NODE_ENV === 'production',
     children: /*#__PURE__*/_jsxs(AntdThemeProvider, {
@@ -41,6 +48,7 @@ var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
       }), /*#__PURE__*/_jsx(ReactFontLoader, {
         url: "https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans_sc.css"
       }), /*#__PURE__*/_jsx(GlobalStyle, {}), /*#__PURE__*/_jsx(App, {
+        className: styles,
         style: {
           minHeight: 'inherit',
           width: 'inherit'

package/es/index.d.ts

@@ -15,6 +15,7 @@ export { default as EditableText, type EditableTextProps } from './EditableText'
 export { default as Highlighter, type HighlighterProps, SyntaxHighlighter, type SyntaxHighlighterProps, } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
 export { Input, type InputProps, TextArea, type TextAreaProps } from './Input';
+export { default as Layout, type LayoutProps } from './Layout';
 export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Markdown, type MarkdownProps } from './Markdown';

package/es/index.js

@@ -14,6 +14,7 @@ export { default as EditableText } from "./EditableText";
 export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";
 export { default as Icon } from "./Icon";
 export { Input, TextArea } from "./Input";
+export { default as Layout } from "./Layout";
 export { default as List } from "./List";
 export { default as Logo } from "./Logo";
 export { default as Markdown } from "./Markdown";

package/es/styles/algorithms/generateCustomStylish.js

@@ -1,11 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 export var generateCustomStylish = function generateCustomStylish(_ref) {
   var css = _ref.css,
     token = _ref.token,
     isDarkMode = _ref.isDarkMode;
   return {
     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-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\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: none;\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: 0;\n        margin-inline-end: 0;\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\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\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)
+    noScrollbar: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
+    bottomScrollbar: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          background-color: ", ";\n          border-radius: 4px;\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
+    markdown: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\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: none;\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: 0;\n        margin-inline-end: 0;\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\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      li {\n        line-height: 1.8;\n\n        &::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\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, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder)
   };
 };

package/es/types/customStylish.d.ts

@@ -1,4 +1,6 @@
 export interface LobeCustomStylish {
   blur: string;
+  bottomScrollbar: string;
   markdown: string;
+  noScrollbar: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.22.1",
+  "version": "1.23.1",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -110,7 +110,7 @@
     "@types/pangu": "^4",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@vitest/coverage-c8": "latest",
+    "@vitest/coverage-v8": "latest",
     "antd": "^5",
     "antd-style": "^3",
     "commitlint": "^17",