@ant-design/agentic-ui 2.30.21 → 2.30.23

package/dist/Plugins/mermaid/MermaidRendererImpl.js

@@ -1,25 +1,205 @@
-import { ConfigProvider } from "antd";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { BorderOutlined, ExpandOutlined, FullscreenExitOutlined, FullscreenOutlined, ZoomInOutlined, ZoomOutOutlined } from "@ant-design/icons";
+import { ConfigProvider, theme } from "antd";
 import classNames from "clsx";
-import React, { useContext, useMemo, useRef } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { ActionIconBox } from "../../Components/ActionIconBox";
 import { useIntersectionOnce } from "../../Hooks/useIntersectionOnce";
 import { useStyle } from "./style";
 import { useMermaidRender } from "./useMermaidRender";
+import { createMermaidThemeConfig } from "./utils";
 var PRE_STYLE = {
     margin: 0,
     whiteSpace: 'pre-wrap',
     wordBreak: 'break-word'
 };
+var MIN_ZOOM_SCALE = 0.2;
+var MAX_ZOOM_SCALE = 12;
+var ZOOM_STEP_RATIO = 1.2;
+var FIT_PADDING = 24;
+var clamp = function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+};
+var getSvgNaturalSize = function getSvgNaturalSize(svgElement) {
+    var _svgElement_viewBox;
+    var viewBox = (_svgElement_viewBox = svgElement.viewBox) === null || _svgElement_viewBox === void 0 ? void 0 : _svgElement_viewBox.baseVal;
+    if (viewBox && viewBox.width > 0 && viewBox.height > 0) {
+        return {
+            width: viewBox.width,
+            height: viewBox.height
+        };
+    }
+    var widthAttr = Number.parseFloat(svgElement.getAttribute('width') || '');
+    var heightAttr = Number.parseFloat(svgElement.getAttribute('height') || '');
+    if (Number.isFinite(widthAttr) && Number.isFinite(heightAttr) && widthAttr > 0 && heightAttr > 0) {
+        return {
+            width: widthAttr,
+            height: heightAttr
+        };
+    }
+    try {
+        var bbox = svgElement.getBBox();
+        if (bbox.width > 0 && bbox.height > 0) {
+            return {
+                width: bbox.width,
+                height: bbox.height
+            };
+        }
+    } catch (e) {
+    // Ignore getBBox errors in hidden/unsupported SVG contexts.
+    }
+    var rect = svgElement.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+        return {
+            width: rect.width,
+            height: rect.height
+        };
+    }
+    return null;
+};
 export var MermaidRendererImpl = function MermaidRendererImpl(props) {
     var context = useContext(ConfigProvider.ConfigContext);
+    var token = theme.useToken().token;
     var baseCls = (context === null || context === void 0 ? void 0 : context.getPrefixCls('agentic-plugin-mermaid')) || 'plugin-mermaid';
     var _useStyle = useStyle(baseCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
     var containerRef = useRef(null);
     var divRef = useRef(null);
+    var panSessionRef = useRef(null);
     var id = useMemo(function() {
         return 'm' + (Date.now() + Math.ceil(Math.random() * 1000));
     }, []);
+    var _useState = _sliced_to_array(useState(1), 2), scale = _useState[0], setScale = _useState[1];
+    var _useState1 = _sliced_to_array(useState(0), 2), panX = _useState1[0], setPanX = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(0), 2), panY = _useState2[0], setPanY = _useState2[1];
+    var _useState3 = _sliced_to_array(useState(true), 2), showGrid = _useState3[0], setShowGrid = _useState3[1];
+    var _useState4 = _sliced_to_array(useState(false), 2), isPanning = _useState4[0], setIsPanning = _useState4[1];
+    var _useState5 = _sliced_to_array(useState(false), 2), isFullscreen = _useState5[0], setIsFullscreen = _useState5[1];
+    var mermaidTheme = useMemo(function() {
+        return createMermaidThemeConfig({
+            colorBgContainer: token.colorBgContainer,
+            colorBgElevated: token.colorBgElevated,
+            colorText: token.colorText,
+            colorTextSecondary: token.colorTextSecondary,
+            colorBorder: token.colorBorder,
+            colorPrimary: token.colorPrimary,
+            fontFamily: token.fontFamily
+        });
+    }, [
+        token.colorBgContainer,
+        token.colorBgElevated,
+        token.colorText,
+        token.colorTextSecondary,
+        token.colorBorder,
+        token.colorPrimary,
+        token.fontFamily
+    ]);
     var isVisible = useIntersectionOnce(containerRef);
-    var _useMermaidRender = useMermaidRender(props.element.value || '', divRef, id, isVisible), error = _useMermaidRender.error, renderedCode = _useMermaidRender.renderedCode;
+    var _useMermaidRender = useMermaidRender(props.element.value || '', divRef, id, isVisible, {
+        colorBgContainer: token.colorBgContainer,
+        colorBgElevated: token.colorBgElevated,
+        colorText: token.colorText,
+        colorTextSecondary: token.colorTextSecondary,
+        colorBorder: token.colorBorder,
+        colorPrimary: token.colorPrimary,
+        fontFamily: token.fontFamily
+    }), error = _useMermaidRender.error, renderedCode = _useMermaidRender.renderedCode;
     var isError = useMemo(function() {
         return !!error && !!error.trim();
     }, [
@@ -44,18 +224,312 @@ export var MermaidRendererImpl = function MermaidRendererImpl(props) {
     }, [
         isRendered
     ]);
+    var transformedContainerStyle = useMemo(function() {
+        return _object_spread_props(_object_spread({}, containerStyle), {
+            '--mermaid-pan-x': "".concat(panX, "px"),
+            '--mermaid-pan-y': "".concat(panY, "px"),
+            '--mermaid-scale': scale
+        });
+    }, [
+        containerStyle,
+        panX,
+        panY,
+        scale
+    ]);
+    var viewportStyle = useMemo(function() {
+        return {
+            backgroundImage: showGrid ? mermaidTheme.darkMode ? 'radial-gradient(circle, rgba(255, 255, 255, 0.14) 1.2px, transparent 1.2px)' : 'radial-gradient(circle, rgba(0, 0, 0, 0.08) 1.2px, transparent 1.2px)' : 'none'
+        };
+    }, [
+        mermaidTheme.darkMode,
+        showGrid
+    ]);
+    var getDiagramAndViewportSize = useCallback(function() {
+        var viewportElement = divRef.current;
+        if (!viewportElement) {
+            return null;
+        }
+        var svgElement = viewportElement.querySelector('[data-mermaid-svg="true"]');
+        if (!svgElement) {
+            return null;
+        }
+        var svgSize = getSvgNaturalSize(svgElement);
+        if (!svgSize) {
+            return null;
+        }
+        var viewportWidth = viewportElement.clientWidth;
+        var viewportHeight = viewportElement.clientHeight;
+        if (viewportWidth <= 0 || viewportHeight <= 0) {
+            return null;
+        }
+        return {
+            viewportWidth: viewportWidth,
+            viewportHeight: viewportHeight,
+            diagramWidth: svgSize.width,
+            diagramHeight: svgSize.height
+        };
+    }, []);
+    var handleFitToScreen = useCallback(function() {
+        var size = getDiagramAndViewportSize();
+        if (!size) {
+            return;
+        }
+        var usableWidth = Math.max(size.viewportWidth - FIT_PADDING * 2, 1);
+        var usableHeight = Math.max(size.viewportHeight - FIT_PADDING * 2, 1);
+        var fittedScale = clamp(Math.min(usableWidth / size.diagramWidth, usableHeight / size.diagramHeight), MIN_ZOOM_SCALE, MAX_ZOOM_SCALE);
+        var centeredPanX = (size.viewportWidth - size.diagramWidth * fittedScale) / 2;
+        var centeredPanY = (size.viewportHeight - size.diagramHeight * fittedScale) / 2;
+        setScale(fittedScale);
+        setPanX(centeredPanX);
+        setPanY(centeredPanY);
+    }, [
+        getDiagramAndViewportSize
+    ]);
+    var applyScaleAtPoint = useCallback(function(nextScale, clientX, clientY) {
+        var viewportElement = divRef.current;
+        if (!viewportElement) {
+            return;
+        }
+        var clampedScale = clamp(nextScale, MIN_ZOOM_SCALE, MAX_ZOOM_SCALE);
+        if (clampedScale === scale) {
+            return;
+        }
+        var viewportRect = viewportElement.getBoundingClientRect();
+        var targetClientX = clientX !== null && clientX !== void 0 ? clientX : viewportRect.left + viewportRect.width / 2;
+        var targetClientY = clientY !== null && clientY !== void 0 ? clientY : viewportRect.top + viewportRect.height / 2;
+        var relativeX = targetClientX - viewportRect.left;
+        var relativeY = targetClientY - viewportRect.top;
+        var nextPanX = relativeX - (relativeX - panX) / scale * clampedScale;
+        var nextPanY = relativeY - (relativeY - panY) / scale * clampedScale;
+        setScale(clampedScale);
+        setPanX(nextPanX);
+        setPanY(nextPanY);
+    }, [
+        panX,
+        panY,
+        scale
+    ]);
+    var handleZoomIn = useCallback(function() {
+        applyScaleAtPoint(scale * ZOOM_STEP_RATIO);
+    }, [
+        applyScaleAtPoint,
+        scale
+    ]);
+    var handleZoomOut = useCallback(function() {
+        applyScaleAtPoint(scale / ZOOM_STEP_RATIO);
+    }, [
+        applyScaleAtPoint,
+        scale
+    ]);
+    var handleToggleFullscreen = useCallback(function() {
+        var _containerRef_current_requestFullscreen, _containerRef_current;
+        if (!containerRef.current) {
+            return;
+        }
+        if (document.fullscreenElement === containerRef.current) {
+            var _document_exitFullscreen, _document;
+            (_document_exitFullscreen = (_document = document).exitFullscreen) === null || _document_exitFullscreen === void 0 ? void 0 : _document_exitFullscreen.call(_document);
+            return;
+        }
+        (_containerRef_current_requestFullscreen = (_containerRef_current = containerRef.current).requestFullscreen) === null || _containerRef_current_requestFullscreen === void 0 ? void 0 : _containerRef_current_requestFullscreen.call(_containerRef_current);
+    }, []);
+    var handleWheel = useCallback(function(event) {
+        var _target_closest;
+        if (!isRendered) {
+            return;
+        }
+        var target = event.target;
+        if (target === null || target === void 0 ? void 0 : (_target_closest = target.closest) === null || _target_closest === void 0 ? void 0 : _target_closest.call(target, '[data-mermaid-toolbar]')) {
+            return;
+        }
+        event.preventDefault();
+        var scaleMultiplier = event.deltaY < 0 ? ZOOM_STEP_RATIO : 1 / ZOOM_STEP_RATIO;
+        applyScaleAtPoint(scale * scaleMultiplier, event.clientX, event.clientY);
+    }, [
+        applyScaleAtPoint,
+        isRendered,
+        scale
+    ]);
+    var handlePointerDown = useCallback(function(event) {
+        var _target_closest, _event_currentTarget_setPointerCapture, _event_currentTarget;
+        if (!isRendered || event.button !== 0) {
+            return;
+        }
+        var target = event.target;
+        if (target === null || target === void 0 ? void 0 : (_target_closest = target.closest) === null || _target_closest === void 0 ? void 0 : _target_closest.call(target, '[data-mermaid-toolbar]')) {
+            return;
+        }
+        panSessionRef.current = {
+            startClientX: event.clientX,
+            startClientY: event.clientY,
+            startPanX: panX,
+            startPanY: panY
+        };
+        setIsPanning(true);
+        (_event_currentTarget_setPointerCapture = (_event_currentTarget = event.currentTarget).setPointerCapture) === null || _event_currentTarget_setPointerCapture === void 0 ? void 0 : _event_currentTarget_setPointerCapture.call(_event_currentTarget, event.pointerId);
+    }, [
+        isRendered,
+        panX,
+        panY
+    ]);
+    var handlePointerMove = useCallback(function(event) {
+        var panSession = panSessionRef.current;
+        if (!panSession) {
+            return;
+        }
+        setPanX(panSession.startPanX + event.clientX - panSession.startClientX);
+        setPanY(panSession.startPanY + event.clientY - panSession.startClientY);
+    }, []);
+    var finishPointerSession = useCallback(function(event) {
+        var _event_currentTarget_releasePointerCapture, _event_currentTarget;
+        if (!panSessionRef.current) {
+            return;
+        }
+        panSessionRef.current = null;
+        setIsPanning(false);
+        (_event_currentTarget_releasePointerCapture = (_event_currentTarget = event.currentTarget).releasePointerCapture) === null || _event_currentTarget_releasePointerCapture === void 0 ? void 0 : _event_currentTarget_releasePointerCapture.call(_event_currentTarget, event.pointerId);
+    }, []);
+    useEffect(function() {
+        var syncFullscreenState = function syncFullscreenState() {
+            setIsFullscreen(document.fullscreenElement === containerRef.current);
+        };
+        syncFullscreenState();
+        document.addEventListener('fullscreenchange', syncFullscreenState);
+        return function() {
+            document.removeEventListener('fullscreenchange', syncFullscreenState);
+        };
+    }, []);
+    useEffect(function() {
+        if (!isRendered) {
+            return;
+        }
+        var frame = window.requestAnimationFrame(function() {
+            handleFitToScreen();
+        });
+        return function() {
+            window.cancelAnimationFrame(frame);
+        };
+    }, [
+        isRendered,
+        renderedCode,
+        handleFitToScreen
+    ]);
+    useEffect(function() {
+        if (!isRendered || !divRef.current) {
+            return;
+        }
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        var resizeObserver = new ResizeObserver(function() {
+            handleFitToScreen();
+        });
+        resizeObserver.observe(divRef.current);
+        return function() {
+            resizeObserver.disconnect();
+        };
+    }, [
+        handleFitToScreen,
+        isRendered
+    ]);
+    useEffect(function() {
+        if (!isRendered) {
+            return;
+        }
+        handleFitToScreen();
+    }, [
+        handleFitToScreen,
+        isFullscreen,
+        isRendered
+    ]);
     var code = props.element.value || '';
     return wrapSSR(/*#__PURE__*/ React.createElement("div", {
         ref: containerRef,
-        className: classNames(baseCls, hashId),
-        contentEditable: false
+        className: classNames(baseCls, hashId, _define_property({}, "".concat(baseCls, "-fullscreen"), isFullscreen)),
+        contentEditable: false,
+        "data-mermaid-theme": mermaidTheme.darkMode ? 'dark' : 'light'
+    }, /*#__PURE__*/ React.createElement("div", {
+        contentEditable: false,
+        className: classNames("".concat(baseCls, "-viewport"), hashId),
+        onWheel: handleWheel,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: finishPointerSession,
+        onPointerCancel: finishPointerSession,
+        "data-mermaid-grid": showGrid,
+        "data-mermaid-panning": isPanning,
+        "data-mermaid-viewport": "true",
+        style: viewportStyle
     }, /*#__PURE__*/ React.createElement("div", {
         contentEditable: false,
         ref: divRef,
         className: classNames(hashId),
-        style: containerStyle,
+        style: transformedContainerStyle,
         "data-mermaid-container": "true"
-    }), error && /*#__PURE__*/ React.createElement("div", {
+    }), isRendered && /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(baseCls, "-toolbar-float"), hashId),
+        role: "toolbar",
+        "aria-label": "Mermaid diagram controls",
+        "data-mermaid-toolbar": true,
+        onPointerDown: function onPointerDown(e) {
+            e.stopPropagation();
+        }
+    }, /*#__PURE__*/ React.createElement("span", {
+        "data-mermaid-action": "fit"
+    }, /*#__PURE__*/ React.createElement(ActionIconBox, {
+        title: "适配画布",
+        borderLess: true,
+        noPadding: true,
+        onClick: handleFitToScreen,
+        iconStyle: {
+            color: token.colorTextSecondary
+        }
+    }, /*#__PURE__*/ React.createElement(ExpandOutlined, null))), /*#__PURE__*/ React.createElement("span", {
+        "data-mermaid-action": "zoom-out"
+    }, /*#__PURE__*/ React.createElement(ActionIconBox, {
+        title: "缩小",
+        borderLess: true,
+        noPadding: true,
+        onClick: handleZoomOut,
+        iconStyle: {
+            color: token.colorTextSecondary
+        }
+    }, /*#__PURE__*/ React.createElement(ZoomOutOutlined, null))), /*#__PURE__*/ React.createElement("span", {
+        "data-mermaid-action": "zoom-in"
+    }, /*#__PURE__*/ React.createElement(ActionIconBox, {
+        title: "放大",
+        borderLess: true,
+        noPadding: true,
+        onClick: handleZoomIn,
+        iconStyle: {
+            color: token.colorTextSecondary
+        }
+    }, /*#__PURE__*/ React.createElement(ZoomInOutlined, null))), /*#__PURE__*/ React.createElement("span", {
+        "data-mermaid-action": "grid"
+    }, /*#__PURE__*/ React.createElement(ActionIconBox, {
+        title: showGrid ? '隐藏背景网格' : '显示背景网格',
+        borderLess: true,
+        noPadding: true,
+        active: showGrid,
+        onClick: function onClick() {
+            setShowGrid(function(prev) {
+                return !prev;
+            });
+        },
+        iconStyle: {
+            color: token.colorTextSecondary
+        }
+    }, /*#__PURE__*/ React.createElement(BorderOutlined, null))), /*#__PURE__*/ React.createElement("span", {
+        "data-mermaid-action": "fullscreen"
+    }, /*#__PURE__*/ React.createElement(ActionIconBox, {
+        title: isFullscreen ? '退出全屏' : '全屏',
+        borderLess: true,
+        noPadding: true,
+        onClick: handleToggleFullscreen,
+        iconStyle: {
+            color: token.colorTextSecondary
+        }
+    }, isFullscreen ? /*#__PURE__*/ React.createElement(FullscreenExitOutlined, null) : /*#__PURE__*/ React.createElement(FullscreenOutlined, null))))), error && /*#__PURE__*/ React.createElement("div", {
         className: classNames("".concat(baseCls, "-error"), hashId)
     }, /*#__PURE__*/ React.createElement("pre", {
         style: PRE_STYLE

package/dist/Plugins/mermaid/style.js

@@ -52,15 +52,18 @@ function _object_spread_props(target, source) {
 }
 import { useEditorStyleRegister } from "../../Hooks/useStyle";
 var genStyle = function genStyle(token) {
-    return _define_property({}, token.componentCls, {
+    var gridLightColor = 'rgba(0, 0, 0, 0.08)';
+    var gridDarkColor = 'rgba(255, 255, 255, 0.14)';
+    var _obj;
+    return _obj = {}, _define_property(_obj, token.componentCls, {
         marginBottom: '0.75em',
         cursor: 'default',
         userSelect: 'none',
         padding: '0.75rem 0',
         borderRadius: '1em',
         maxWidth: '800px',
-        border: '1px solid #e8e8e8',
-        backgroundColor: '#fff',
+        border: "1px solid ".concat(token.colorBorder),
+        backgroundColor: token.colorBgContainer,
         minWidth: '240px',
         minHeight: '200px',
         display: 'flex',
@@ -72,27 +75,70 @@ var genStyle = function genStyle(token) {
         contain: 'layout style paint',
         overflow: 'hidden',
         transition: 'height 0.3s ease, min-height 0.3s ease',
-        '& [data-mermaid-container="true"]': {
+        '&-fullscreen': {
             width: '100%',
+            maxWidth: '100%',
+            height: '100%'
+        },
+        '&-toolbar-float': {
+            position: 'absolute',
+            top: token.paddingSM,
+            insetInlineEnd: token.paddingSM,
+            left: 'auto',
+            zIndex: 10,
             display: 'flex',
+            alignItems: 'center',
+            gap: token.paddingXXS,
+            pointerEvents: 'auto'
+        },
+        '&-viewport': {
+            flex: 1,
+            width: '100%',
+            minHeight: 220,
+            overflow: 'hidden',
+            position: 'relative',
+            touchAction: 'none',
+            cursor: 'grab'
+        },
+        '&-viewport[data-mermaid-panning="true"]': {
+            cursor: 'grabbing'
+        },
+        '&-viewport[data-mermaid-grid="true"]': {
+            backgroundSize: '28px 28px',
+            backgroundImage: "radial-gradient(circle, ".concat(gridLightColor, " 1.2px, transparent 1.2px)")
+        },
+        '&-viewport[data-mermaid-grid="true"]&-dark-grid': {
+            backgroundImage: "radial-gradient(circle, ".concat(gridDarkColor, " 1.2px, transparent 1.2px)")
+        },
+        '& [data-mermaid-container="true"]': {
+            zIndex: 0,
+            width: '100%',
+            minHeight: 220,
+            display: 'block',
             justifyContent: 'center',
             position: 'relative',
             isolation: 'isolate',
             contain: 'layout style paint',
-            overflow: 'hidden',
-            transition: 'opacity 0.3s ease, height 0.3s ease, min-height 0.3s ease, max-height 0.3s ease'
+            overflow: 'visible',
+            transition: 'opacity 0.3s ease, height 0.3s ease, min-height 0.3s ease, max-height 0.3s ease',
+            '--mermaid-pan-x': '0px',
+            '--mermaid-pan-y': '0px',
+            '--mermaid-scale': 1
         },
         '& [data-mermaid-wrapper]': {
             position: 'relative',
-            width: '100%',
-            maxWidth: '100%',
-            overflow: 'hidden',
+            width: 'max-content',
+            maxWidth: 'none',
+            overflow: 'visible',
             isolation: 'isolate',
             contain: 'layout style paint',
             display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            minHeight: '200px'
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            minHeight: 0,
+            transform: 'translate(var(--mermaid-pan-x), var(--mermaid-pan-y)) scale(var(--mermaid-scale))',
+            transformOrigin: '0 0',
+            willChange: 'transform'
         },
         '& [data-mermaid-svg="true"]': {
             maxWidth: '100%',
@@ -101,7 +147,7 @@ var genStyle = function genStyle(token) {
         },
         '&-error': {
             textAlign: 'center',
-            color: 'rgba(239, 68, 68, 0.8)',
+            color: token.colorError,
             padding: '0.5rem',
             flex: 1,
             position: 'relative',
@@ -114,7 +160,7 @@ var genStyle = function genStyle(token) {
         },
         '&-empty': {
             textAlign: 'left',
-            color: '#6B7280',
+            color: token.colorTextSecondary,
             padding: '0.75rem 1.5rem',
             position: 'relative',
             zIndex: 1,
@@ -137,30 +183,33 @@ var genStyle = function genStyle(token) {
         '& svg': {
             '& .node': {
                 '& rect, & circle, & ellipse, & polygon': {
-                    stroke: '#333',
+                    stroke: token.colorBorder,
                     strokeWidth: '1px',
-                    fill: '#fff'
+                    fill: token.colorBgContainer
                 }
             },
             '& text': {
                 dominantBaseline: 'middle',
-                textAnchor: 'middle'
+                textAnchor: 'middle',
+                fill: "".concat(token.colorText, " !important")
             },
             '& .nodeLabel': {
                 fontWeight: 500,
-                fill: '#333 !important'
+                fill: "".concat(token.colorText, " !important")
             },
             '& .edgeLabel': {
-                fill: '#666 !important'
+                fill: "".concat(token.colorTextSecondary, " !important")
             },
             '& .flowchart-label': {
-                fill: '#333 !important'
+                fill: "".concat(token.colorText, " !important")
             },
             '& .label': {
-                fill: '#333 !important'
+                fill: "".concat(token.colorText, " !important")
             }
         }
-    });
+    }), _define_property(_obj, "".concat(token.componentCls, '[data-mermaid-theme="dark"] ').concat(token.componentCls, '-viewport[data-mermaid-grid="true"]'), {
+        backgroundImage: "radial-gradient(circle, ".concat(gridDarkColor, " 1.2px, transparent 1.2px)")
+    }), _obj;
 };
 export function useStyle(prefixCls) {
     return useEditorStyleRegister('agentic-plugin-mermaid', function(token) {