@lobehub/ui 1.168.20 → 1.169.0

package/es/Draw/index.d.ts

@@ -0,0 +1,20 @@
+import { type DrawerProps as AntdDrawerProps } from 'antd';
+import { CSSProperties, ReactNode } from 'react';
+export interface DrawProps extends Omit<AntdDrawerProps, 'styles' | 'classNames'> {
+    classNames?: AntdDrawerProps['classNames'] & {
+        bodyContent?: string;
+        extra?: string;
+        title?: string;
+    };
+    containerMaxWidth?: number;
+    noHeader?: boolean;
+    sidebar?: ReactNode;
+    sidebarWidth?: number;
+    styles?: AntdDrawerProps['styles'] & {
+        bodyContent?: CSSProperties;
+        extra?: CSSProperties;
+        title?: CSSProperties;
+    };
+}
+declare const Draw: import("react").NamedExoticComponent<DrawProps>;
+export default Draw;

package/es/Draw/index.js

@@ -0,0 +1,166 @@
+'use client';
+
+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 = ["onClose", "containerMaxWidth", "classNames", "title", "placement", "styles", "children", "height", "width", "extra", "noHeader", "sidebarWidth", "sidebar"];
+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 { Drawer as AntdDraw } from 'antd';
+import { useTheme } from 'antd-style';
+import { XIcon } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import ActionIcon from "../ActionIcon";
+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 Draw = /*#__PURE__*/memo(function (_ref) {
+  var onClose = _ref.onClose,
+    _ref$containerMaxWidt = _ref.containerMaxWidth,
+    containerMaxWidth = _ref$containerMaxWidt === void 0 ? 1024 : _ref$containerMaxWidt,
+    classNames = _ref.classNames,
+    title = _ref.title,
+    placement = _ref.placement,
+    styles = _ref.styles,
+    children = _ref.children,
+    height = _ref.height,
+    width = _ref.width,
+    extra = _ref.extra,
+    noHeader = _ref.noHeader,
+    _ref$sidebarWidth = _ref.sidebarWidth,
+    sidebarWidth = _ref$sidebarWidth === void 0 ? 280 : _ref$sidebarWidth,
+    sidebar = _ref.sidebar,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var headerBorder = useMemo(function () {
+    if (height === '100%' || width === '100%' || height === '100vh' || width === '100vw') return {};
+    switch (placement) {
+      case 'top':
+        {
+          return {
+            borderBottom: "1px solid ".concat(theme.colorBorder)
+          };
+        }
+      case 'bottom':
+        {
+          return {
+            borderTop: "1px solid ".concat(theme.colorBorder)
+          };
+        }
+      case 'left':
+        {
+          return {
+            borderRight: "1px solid ".concat(theme.colorBorder)
+          };
+        }
+      case 'right':
+        {
+          return {
+            borderLeft: "1px solid ".concat(theme.colorBorder)
+          };
+        }
+      default:
+        {
+          return {};
+        }
+    }
+  }, [placement, height, width, theme.colorBorder]);
+  var extraNode = /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.extra,
+    gap: 4,
+    horizontal: true,
+    justify: 'flex-end',
+    style: _objectSpread({
+      position: 'absolute',
+      right: 4,
+      top: 4
+    }, styles === null || styles === void 0 ? void 0 : styles.extra),
+    children: [extra, /*#__PURE__*/_jsx(ActionIcon, {
+      icon: XIcon,
+      onClick: onClose,
+      size: 'site'
+    })]
+  });
+  return /*#__PURE__*/_jsx(AntdDraw, _objectSpread(_objectSpread({
+    classNames: classNames,
+    closable: false,
+    extra: noHeader ? undefined : extraNode,
+    height: height,
+    keyboard: true,
+    onClose: onClose,
+    placement: placement,
+    styles: _objectSpread(_objectSpread({}, styles), {}, {
+      body: _objectSpread({
+        background: 'transparent',
+        padding: '0 4px'
+      }, styles === null || styles === void 0 ? void 0 : styles.body),
+      content: _objectSpread({
+        background: sidebar ? "linear-gradient(to right, ".concat(theme.colorBgContainer, " 49.9%, ").concat(theme.colorBgLayout, " 50%)") : theme.colorBgContainer
+      }, styles === null || styles === void 0 ? void 0 : styles.content),
+      header: _objectSpread({
+        background: 'transparent',
+        display: noHeader ? 'none' : undefined,
+        padding: 4
+      }, styles === null || styles === void 0 ? void 0 : styles.header),
+      wrapper: _objectSpread(_objectSpread({
+        background: theme.colorBgContainer
+      }, headerBorder), styles === null || styles === void 0 ? void 0 : styles.wrapper)
+    }),
+    title: /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
+      horizontal: true,
+      justify: 'flex-start',
+      paddingBlock: 8,
+      paddingInline: 16,
+      style: _objectSpread({
+        justifySelf: 'center',
+        maxWidth: containerMaxWidth,
+        width: '100%'
+      }, styles === null || styles === void 0 ? void 0 : styles.title),
+      children: title
+    }),
+    width: width
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsxs(Flexbox, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.bodyContent,
+      height: '100%',
+      horizontal: !!sidebar,
+      paddingBlock: sidebar ? undefined : 12,
+      paddingInline: sidebar ? undefined : 16,
+      style: _objectSpread({
+        justifySelf: 'center',
+        maxWidth: containerMaxWidth,
+        width: '100%'
+      }, styles === null || styles === void 0 ? void 0 : styles.bodyContent),
+      children: [noHeader && extraNode, sidebar ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Flexbox, {
+          paddingBlock: 12,
+          paddingInline: 16,
+          style: {
+            background: theme.colorBgContainer,
+            borderRight: "1px solid ".concat(theme.colorBorderSecondary),
+            height: '100%'
+          },
+          width: sidebarWidth,
+          children: sidebar
+        }), /*#__PURE__*/_jsx(Flexbox, {
+          flex: 1,
+          paddingBlock: 12,
+          paddingInline: 16,
+          style: {
+            background: theme.colorBgLayout,
+            height: '100%'
+          },
+          children: children
+        })]
+      }) : children]
+    })
+  }));
+});
+export default Draw;

package/es/Hotkey/index.js

@@ -127,7 +127,7 @@ var Hotkey = /*#__PURE__*/memo(function (_ref2) {
   return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     align: 'center',
     className: cx(s, className),
-    gap: 2,
+    gap: isPure ? 6 : 2,
     horizontal: true,
     style: _objectSpread({
       visibility: visibility

package/es/components.d.ts

@@ -13,6 +13,7 @@ export { default as DraggablePanelBody, type DraggablePanelBodyProps, } from './
 export { default as DraggablePanelContainer, type DraggablePanelContainerProps, } from './DraggablePanel/components/DraggablePanelContainer';
 export { default as DraggablePanelFooter, type DraggablePanelFooterProps, } from './DraggablePanel/components/DraggablePanelFooter';
 export { default as DraggablePanelHeader, type DraggablePanelHeaderProps, } from './DraggablePanel/components/DraggablePanelHeader';
+export { default as Draw, type DrawProps } from './Draw';
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { default as EmojiPicker, type EmojiPickerProps } from './EmojiPicker';
 export { default as EmptyCard, type EmptyCardProps } from './EmptyCard';

package/es/components.js

@@ -13,6 +13,7 @@ export { default as DraggablePanelBody } from "./DraggablePanel/components/Dragg
 export { default as DraggablePanelContainer } from "./DraggablePanel/components/DraggablePanelContainer";
 export { default as DraggablePanelFooter } from "./DraggablePanel/components/DraggablePanelFooter";
 export { default as DraggablePanelHeader } from "./DraggablePanel/components/DraggablePanelHeader";
+export { default as Draw } from "./Draw";
 export { default as EditableText } from "./EditableText";
 export { default as EmojiPicker } from "./EmojiPicker";
 export { default as EmptyCard } from "./EmptyCard";

package/es/hooks/useMermaid.js

@@ -35,13 +35,12 @@ export var useMermaid = function useMermaid(id, content) {
     _useState2 = _slicedToArray(_useState, 2),
     validContent = _useState2[0],
     setValidContent = _useState2[1];
-  console.log(id, content);
 
   // 为长内容生成哈希键
   var cacheKey = useMemo(function () {
     var hash = content.length < MD5_LENGTH_THRESHOLD ? content : Md5.hashStr(content);
-    return "mermaid-".concat(hash);
-  }, [content]);
+    return "mermaid-".concat(id, "-").concat(hash);
+  }, [content, id]);
   return useSWR(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var mermaidInstance, isValid, _yield$mermaidInstanc, svg;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -69,7 +68,7 @@ export var useMermaid = function useMermaid(id, content) {
         case 10:
           isValid = _context.sent;
           if (!isValid) {
-            _context.next = 22;
+            _context.next = 21;
             break;
           }
           _context.next = 14;
@@ -77,27 +76,26 @@ export var useMermaid = function useMermaid(id, content) {
         case 14:
           _yield$mermaidInstanc = _context.sent;
           svg = _yield$mermaidInstanc.svg;
-          console.log(svg);
           setValidContent(svg);
           // 缓存验证结果
           mermaidCache.set(cacheKey, true);
           return _context.abrupt("return", svg);
-        case 22:
+        case 21:
           throw new Error('Mermaid 语法无效');
-        case 23:
-          _context.next = 29;
+        case 22:
+          _context.next = 28;
           break;
-        case 25:
-          _context.prev = 25;
+        case 24:
+          _context.prev = 24;
           _context.t0 = _context["catch"](2);
           console.error('Mermaid 解析错误:', _context.t0);
           // 返回最近一次有效的内容，或空字符串
           return _context.abrupt("return", validContent || '');
-        case 29:
+        case 28:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[2, 25]]);
+    }, _callee, null, [[2, 24]]);
   })), {
     dedupingInterval: 3000,
     errorRetryCount: 2,

package/es/storybook/StoryBook/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { DivProps } from "../../types";
-export interface StoryBookProps extends DivProps {
+import { FlexboxProps } from 'react-layout-kit';
+export interface StoryBookProps extends FlexboxProps {
     /**
      * @description The Leva store instance to be used by the component
      * @type levaStore
@@ -11,6 +11,6 @@ export interface StoryBookProps extends DivProps {
      */
     noPadding?: boolean;
 }
-export declare const StoryBook: import("react").NamedExoticComponent<StoryBookProps>;
+export declare const StoryBook: import("react").ForwardRefExoticComponent<StoryBookProps & import("react").RefAttributes<HTMLDivElement>>;
 export default StoryBook;
 export { useControls, useCreateStore } from 'leva';

package/es/storybook/StoryBook/index.js

@@ -11,13 +11,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 { useResponsive } from 'antd-style';
 import { LevaPanel } from 'leva';
-import { memo } from 'react';
+import { forwardRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import DraggablePanel from "../../DraggablePanel";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var StoryBook = /*#__PURE__*/memo(function (_ref) {
+export var StoryBook = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var levaStore = _ref.levaStore,
     noPadding = _ref.noPadding,
     className = _ref.className,
@@ -32,7 +32,8 @@ export var StoryBook = /*#__PURE__*/memo(function (_ref) {
     align: 'stretch',
     className: cx(styles.editor, className),
     horizontal: !mobile,
-    justify: 'stretch'
+    justify: 'stretch',
+    ref: ref
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx(Flexbox, {
       align: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.168.20",
+  "version": "1.169.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",