@lobehub/ui 1.165.8 → 1.166.0

package/es/Mermaid/FullFeatured.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 import { MermaidProps } from './type';
-export declare const MermaidFullFeatured: import("react").NamedExoticComponent<Omit<MermaidProps, "children"> & {
+export interface MermaidFullFeaturedProps extends Omit<MermaidProps, 'children'> {
     children: ReactNode;
     content: string;
-}>;
+}
+export declare const MermaidFullFeatured: import("react").NamedExoticComponent<MermaidFullFeaturedProps>;
 export default MermaidFullFeatured;

package/es/Mermaid/FullFeatured.js

@@ -1,5 +1,5 @@
 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 = ["showLanguage", "content", "children", "className", "copyable", "actionsRender", "style"];
+var _excluded = ["showLanguage", "content", "children", "className", "copyable", "actionsRender", "style", "enablePanZoom", "fileName"];
 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; }
@@ -13,14 +13,56 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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 { ChevronDown, ChevronRight } from 'lucide-react';
+import { AlignVerticalSpaceAroundIcon, ChevronDown, ChevronRight, MinusIcon, PlusIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { TransformComponent, TransformWrapper, useControls } from 'react-zoom-pan-pinch';
 import ActionIcon from "../ActionIcon";
 import CopyButton from "../CopyButton";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var Controls = function Controls() {
+  var _useControls = useControls(),
+    zoomIn = _useControls.zoomIn,
+    zoomOut = _useControls.zoomOut,
+    resetTransform = _useControls.resetTransform;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    gap: 4,
+    horizontal: true,
+    style: {
+      bottom: 8,
+      position: 'absolute',
+      right: 8,
+      zIndex: 1
+    },
+    children: [/*#__PURE__*/_jsx(ActionIcon, {
+      active: true,
+      glass: true,
+      icon: PlusIcon,
+      onClick: function onClick() {
+        return zoomIn();
+      },
+      size: 'small'
+    }), /*#__PURE__*/_jsx(ActionIcon, {
+      active: true,
+      glass: true,
+      icon: MinusIcon,
+      onClick: function onClick() {
+        return zoomOut();
+      },
+      size: 'small'
+    }), /*#__PURE__*/_jsx(ActionIcon, {
+      active: true,
+      glass: true,
+      icon: AlignVerticalSpaceAroundIcon,
+      onClick: function onClick() {
+        return resetTransform();
+      },
+      size: 'small'
+    })]
+  });
+};
 export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
   var showLanguage = _ref.showLanguage,
     content = _ref.content,
@@ -29,6 +71,10 @@ export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
     copyable = _ref.copyable,
     actionsRender = _ref.actionsRender,
     style = _ref.style,
+    _ref$enablePanZoom = _ref.enablePanZoom,
+    enablePanZoom = _ref$enablePanZoom === void 0 ? true : _ref$enablePanZoom,
+    _ref$fileName = _ref.fileName,
+    fileName = _ref$fileName === void 0 ? 'Mermaid' : _ref$fileName,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -79,9 +125,7 @@ export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
         gap: 2,
         horizontal: true,
         justify: 'center',
-        children: /*#__PURE__*/_jsx("span", {
-          children: "mermaid"
-        })
+        children: fileName
       }), /*#__PURE__*/_jsx(Flexbox, {
         align: 'center',
         flex: 'none',
@@ -94,7 +138,13 @@ export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
         height: 0,
         overflow: 'hidden'
       },
-      children: children
+      children: enablePanZoom ? /*#__PURE__*/_jsxs(TransformWrapper, {
+        initialScale: 1,
+        children: [expand && /*#__PURE__*/_jsx(Controls, {}), /*#__PURE__*/_jsx(TransformComponent, {
+          wrapperClass: styles.zoomPanContainer,
+          children: children
+        })]
+      }) : children
     })]
   }));
 });

package/es/Mermaid/style.d.ts

@@ -5,4 +5,5 @@ export declare const useStyles: (props?: "block" | "ghost" | "pure" | undefined)
     lang: string;
     scroller: import("antd-style").SerializedStyles;
     select: import("antd-style").SerializedStyles;
+    zoomPanContainer: import("antd-style").SerializedStyles;
 }>;

package/es/Mermaid/style.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 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, type) {
@@ -17,6 +17,7 @@ export var useStyles = createStyles(function (_ref, type) {
     header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        position: relative;\n        padding-block: 4px;\n        padding-inline: 8px;\n        background: ", ";\n      "])), token.colorFillQuaternary),
     lang: cx(langHoverCls, stylish.blur, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          inset-block-end: 8px;\n          inset-inline-end: 0;\n\n          font-family: ", ";\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.fontFamilyCode, token.colorTextSecondary)),
     scroller: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        overflow: auto;\n        width: 100%;\n        height: 100%;\n      "]))),
-    select: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        user-select: none;\n\n        position: absolute;\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n\n        min-width: 100px;\n\n        font-size: 14px;\n        color: ", ";\n        text-align: center;\n        .", "-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n      "])), token.colorTextDescription, prefixCls, token.colorTextDescription)
+    select: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        user-select: none;\n\n        position: absolute;\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n\n        min-width: 100px;\n\n        font-size: 14px;\n        color: ", ";\n        text-align: center;\n        .", "-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n      "])), token.colorTextDescription, prefixCls, token.colorTextDescription),
+    zoomPanContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        width: 100%;\n        min-height: 240px;\n      "])))
   };
 });

package/es/Mermaid/type.d.ts

@@ -15,6 +15,8 @@ export interface MermaidProps extends DivProps {
     children: string;
     copyButtonSize?: CopyButtonProps['size'];
     copyable?: boolean;
+    enablePanZoom?: boolean;
+    fileName?: string;
     fullFeatured?: boolean;
     showLanguage?: boolean;
     type?: 'ghost' | 'block' | 'pure';

package/es/Mermaid/useMermaid.js

@@ -26,17 +26,30 @@ export var useMermaid = function useMermaid(content) {
       },
       securityLevel: 'loose',
       startOnLoad: true,
-      theme: theme.isDarkMode ? 'dark' : 'default',
+      theme: theme.isDarkMode ? 'dark' : 'neutral',
       themeVariables: {
-        errorBkgColor: theme.colorError,
-        errorTextColor: theme.colorText,
+        errorBkgColor: theme.colorErrorBg,
+        errorTextColor: theme.colorErrorText,
+        fontFamily: theme.fontFamily,
         fontSize: 14,
-        lineColor: theme.colorText,
-        primaryBorderColor: theme.colorPrimaryBorder,
-        primaryColor: theme.colorPrimaryBg,
+        lineColor: theme.colorTextSecondary,
+        mainBkg: theme.colorBgContainer,
+        noteBkgColor: theme.colorInfoBg,
+        noteTextColor: theme.colorInfoText,
+        pie1: theme.geekblue,
+        pie2: theme.colorWarning,
+        pie3: theme.colorSuccess,
+        pie4: theme.colorError,
+        primaryBorderColor: theme.colorBorder,
+        primaryColor: theme.colorBgContainer,
         primaryTextColor: theme.colorText,
-        secondaryColor: theme.colorInfo,
-        tertiaryColor: theme.colorSuccess
+        secondaryBorderColor: theme.colorInfoBorder,
+        secondaryColor: theme.colorInfoBg,
+        secondaryTextColor: theme.colorInfoText,
+        tertiaryBorderColor: theme.colorSuccessBorder,
+        tertiaryColor: theme.colorSuccessBg,
+        tertiaryTextColor: theme.colorSuccessText,
+        textColor: theme.colorText
       }
     });
     mermaid.contentLoaded();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.165.8",
+  "version": "1.166.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -84,6 +84,7 @@
     "react-markdown": "^9.1.0",
     "react-merge-refs": "^2.1.1",
     "react-rnd": "^10.5.2",
+    "react-zoom-pan-pinch": "^3.7.0",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",