@kne/system-layout 0.2.0-alpha.16 → 0.2.0-alpha.20

package/dist/index.modern.js

@@ -1,4 +1,5 @@
-import { isValidElement, useRef, useState, useLayoutEffect, useEffect, useContext as useContext$1, createContext, useMemo } from 'react';
+import { useRef, useState, useCallback, useMemo, useLayoutEffect, isValidElement, useContext as useContext$1, createContext, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { Flex, Alert, Button, Row, Col, Skeleton } from 'antd';
 import classnames from 'classnames';
 import localStorage from '@kne/local-storage';
@@ -8,13 +9,14 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import Icon from '@kne/react-icon';
 import ensureSlash from '@kne/ensure-slash';
 import isPlainObject from 'lodash/isPlainObject';
-import { createPortal } from 'react-dom';
+import VirtualList from 'rc-virtual-list';
+import { useScrollElement, usePopupContainer, useResponsiveContext, useIsMobile, RESPONSIVE_BOUNDARY_CLASS, RESPONSIVE_CONTAINER_CLASS, RESPONSIVE_SCROLL_CLASS, findResponsiveScroll, getDefaultScrollElement, ResponsiveProvider, defaultResponsiveContextValue, IS_MOBILE_QUERY } from '@kne/responsive-utils';
+export { MOBILE_BREAKPOINT, RESPONSIVE_BOUNDARY_CLASS, RESPONSIVE_CONTAINER_CLASS, RESPONSIVE_SCROLL_CLASS, ResponsiveProvider, MOBILE_BREAKPOINT as mobileBreakpoint, useBreakpoint, useIsMobile, useMediaQuery, usePopupContainer, useResponsiveContext, useScrollElement } from '@kne/responsive-utils';
 import defaultLogo from './defaultLogo~beHinxEU.svg';
 import { ReactComponent } from './expand~bdCTnjYJ.svg';
 import ReactErrorBoundary from '@kne/react-error-boundary';
 import { createWithIntlProvider, useIntl } from '@kne/react-intl';
 import SimpleBar from 'simplebar-react';
-import throttle from 'lodash/throttle';
 import 'simplebar-react/dist/simplebar.min.css';
 import ButtonGroup from '@kne/button-group';
 import merge from 'lodash/merge';
@@ -30,7 +32,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var style$3 = {"layout":"kne-system-layout_sK89O","has-toolbar":"kne-system-layout_gyKfI","has-navbar":"kne-system-layout_X1wZG","menu":"kne-system-layout_-LpWn","open":"kne-system-layout_G-zuN","layer-menu":"kne-system-layout_6TCwG","ai-entry":"kne-system-layout_5qnw5","page":"kne-system-layout_HnwkM","toolbar":"kne-system-layout_h8PAW","page-children":"kne-system-layout_OM1Q2","is-mobile":"kne-system-layout_udBgQ","menu-inner":"kne-system-layout_7wq3X","logo":"kne-system-layout_-T-Dc","menu-header":"kne-system-layout_LOrmu","logo-img":"kne-system-layout_2cRWf","expand-btn-wrapper":"kne-system-layout_5D-Oq","expand-btn-bg":"kne-system-layout_p4eOE","expand-btn":"kne-system-layout_8dzE7","username":"kne-system-layout_b7XeQ","user-description":"kne-system-layout_U0YTk","menu-list":"kne-system-layout_8gqbZ","ai-dialog-window":"kne-system-layout_UAJc-","pulse-dialog-window":"kne-system-layout_VjIWn","page-dialog-outer":"kne-system-layout_I7Anv","page-dialog":"kne-system-layout_UhsFd","pulse-page-dialog":"kne-system-layout_H7slV","page-window-content":"kne-system-layout_2mdNn","is-scroller":"kne-system-layout_6gjkS","page-content":"kne-system-layout_nyAa2","ai-dialog-window-title":"kne-system-layout_33Tja","ai-dialog-window-content":"kne-system-layout_YmBhl"};
+var style$3 = {"kne-responsive-boundary":"kne-system-layout_VtEb1","kne-responsive-scroll":"kne-system-layout_UMzfg","layout":"kne-system-layout_sK89O","has-toolbar":"kne-system-layout_gyKfI","has-navbar":"kne-system-layout_X1wZG","menu":"kne-system-layout_-LpWn","open":"kne-system-layout_G-zuN","layer-menu":"kne-system-layout_6TCwG","ai-entry":"kne-system-layout_5qnw5","page":"kne-system-layout_HnwkM","page-content":"kne-system-layout_nyAa2","toolbar":"kne-system-layout_h8PAW","page-children":"kne-system-layout_OM1Q2","is-scroller":"kne-system-layout_6gjkS","is-mobile":"kne-system-layout_udBgQ","logo":"kne-system-layout_-T-Dc","menu-header":"kne-system-layout_LOrmu","menu-boundary-overlay":"kne-system-layout_-cMpV","is-portaled":"kne-system-layout_leFsD","logo-img":"kne-system-layout_2cRWf","expand-btn-wrapper":"kne-system-layout_5D-Oq","expand-btn-bg":"kne-system-layout_p4eOE","expand-btn":"kne-system-layout_8dzE7","menu-inner":"kne-system-layout_7wq3X","menu-list":"kne-system-layout_8gqbZ","username":"kne-system-layout_b7XeQ","user-description":"kne-system-layout_U0YTk","ai-dialog-window":"kne-system-layout_UAJc-","pulse-dialog-window":"kne-system-layout_VjIWn","page-dialog-outer":"kne-system-layout_I7Anv","page-dialog":"kne-system-layout_UhsFd","pulse-page-dialog":"kne-system-layout_H7slV","page-window-content":"kne-system-layout_2mdNn","ai-dialog-window-title":"kne-system-layout_33Tja","ai-dialog-window-content":"kne-system-layout_YmBhl"};
 
 const UserCard = ({
   name,
@@ -72,8 +74,12 @@ const UserCard = ({
   });
 };
 
-var style$2 = {"menu-group":"kne-system-layout_Rfzv4","menu-item-icon":"kne-system-layout_qoDtD","menu-group-split":"kne-system-layout_socoO","menu-item":"kne-system-layout_Xa-2h"};
+var style$2 = {"menu-list":"kne-system-layout_dVWvr","menu-group":"kne-system-layout_Rfzv4","menu-item-icon":"kne-system-layout_qoDtD","menu-group-split":"kne-system-layout_socoO","menu-item":"kne-system-layout_Xa-2h"};
 
+const MENU_ITEM_HEIGHT = 52;
+const MENU_GROUP_HEIGHT = 48;
+const MENU_GROUP_SPLIT_HEIGHT = 17;
+const getItemKey = (item, index) => item.key || item.path || index;
 const Menu = ({
   className,
   menuOpen,
@@ -84,94 +90,174 @@ const Menu = ({
 }) => {
   const location = useLocation();
   const navigate = useNavigate();
+  const listRef = useRef(null);
+  const virtualListRef = useRef(null);
+  const [listHeight, setListHeight] = useState(0);
   const currentPathname = _base ? location.pathname.replace(new RegExp(`^${_base}`), '') : location.pathname;
-  return /*#__PURE__*/jsx("div", {
-    className: classnames('menu', className, style$2['menu-list']),
-    children: items.map((item, index) => {
-      var _items;
-      const active = (() => {
-        if (typeof activeKey === 'string') {
-          return activeKey === item.key;
+  const isItemActive = useCallback(item => {
+    if (typeof activeKey === 'string') {
+      return activeKey === item.key;
+    }
+    if (typeof activeKey === 'function') {
+      return activeKey(item, {
+        menuOpen,
+        base: _base
+      });
+    }
+    if (typeof item.path === 'string') {
+      return ensureSlash(currentPathname) === ensureSlash(item.path);
+    }
+    return false;
+  }, [activeKey, _base, currentPathname, menuOpen]);
+  const getEstimatedItemHeight = useCallback((item, index) => {
+    var _items;
+    const hasGroup = item.group && item.group !== ((_items = items[index - 1]) == null ? void 0 : _items.group);
+    if (!hasGroup) {
+      return MENU_ITEM_HEIGHT;
+    }
+    return MENU_ITEM_HEIGHT + (menuOpen ? MENU_GROUP_HEIGHT : MENU_GROUP_SPLIT_HEIGHT);
+  }, [items, menuOpen]);
+  const estimatedItemHeight = useMemo(() => {
+    if (!items.length) {
+      return MENU_ITEM_HEIGHT;
+    }
+    const total = items.reduce((sum, item, index) => sum + getEstimatedItemHeight(item, index), 0);
+    return Math.max(MENU_ITEM_HEIGHT, Math.ceil(total / items.length));
+  }, [getEstimatedItemHeight, items]);
+  const listData = useMemo(() => items.map((item, index) => ({
+    item,
+    index,
+    key: getItemKey(item, index)
+  })), [items]);
+  const activeIndex = useMemo(() => listData.findIndex(({
+    item
+  }) => isItemActive(item)), [isItemActive, listData]);
+  useLayoutEffect(() => {
+    const el = listRef.current;
+    if (!el) {
+      return;
+    }
+    const updateHeight = () => {
+      const styles = getComputedStyle(el);
+      const paddingY = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
+      setListHeight(el.clientHeight - paddingY);
+    };
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    var _virtualListRef$curre;
+    if (activeIndex < 0 || listHeight <= 0) {
+      return;
+    }
+    (_virtualListRef$curre = virtualListRef.current) == null || _virtualListRef$curre.scrollTo({
+      index: activeIndex,
+      align: 'auto'
+    });
+  }, [activeIndex, listHeight, menuOpen, listData.length]);
+  const renderMenuItem = (item, index) => {
+    var _items2;
+    const active = isItemActive(item);
+    const icon = typeof item.icon === 'function' ? item.icon({
+      menuOpen,
+      active
+    }) : item.icon;
+    const hasGroup = item.group && item.group !== ((_items2 = items[index - 1]) == null ? void 0 : _items2.group);
+    return /*#__PURE__*/jsxs("div", {
+      title: item.label,
+      onClick: e => {
+        if (active) {
+          return;
         }
-        if (typeof activeKey === 'function') {
-          return activeKey(item, {
+        onChange && onChange(item, {
+          menuOpen,
+          base: _base
+        });
+        if (typeof item.onClick === 'function') {
+          item.onClick(item, {
             menuOpen,
-            base: _base
+            base: _base,
+            event: e
           });
+          return;
         }
-        if (typeof item.path === 'string') {
-          return ensureSlash(currentPathname) === ensureSlash(item.path);
+        if (item.path) {
+          navigate(ensureSlash(`${_base}${item.path}`));
         }
-        return false;
-      })();
-      const icon = typeof item.icon === 'function' ? item.icon({
-        menuOpen,
-        active
-      }) : item.icon;
-      const hasGroup = item.group && item.group !== ((_items = items[index - 1]) == null ? void 0 : _items.group);
-      return /*#__PURE__*/jsxs("div", {
-        title: item.label,
-        onClick: e => {
-          if (active) {
-            return;
+      },
+      children: [hasGroup && menuOpen ? /*#__PURE__*/jsx("div", {
+        className: classnames('menu-group', style$2['menu-group']),
+        children: item.groupLabel || item.group
+      }) : null, hasGroup && !menuOpen ? /*#__PURE__*/jsx("div", {
+        className: classnames('menu-group-split', style$2['menu-group-split'])
+      }) : null, /*#__PURE__*/jsxs(Flex, {
+        className: classnames('menu-item', style$2['menu-item'], {
+          ['is-active']: active,
+          ['is-closed']: !menuOpen
+        }),
+        align: "center",
+        gap: 8,
+        children: [(icon => {
+          if (typeof icon === 'string') {
+            return /*#__PURE__*/jsx(Icon, {
+              className: classnames('menu-item-icon', style$2['menu-item-icon']),
+              type: icon,
+              fontClassName: "system"
+            });
           }
-          onChange && onChange(item, {
-            menuOpen,
-            base: _base
-          });
-          if (typeof item.onClick === 'function') {
-            item.onClick(item, {
-              menuOpen,
-              base: _base,
-              event: e
+          if (/*#__PURE__*/isValidElement(icon)) {
+            return /*#__PURE__*/jsx("span", {
+              className: classnames('menu-item-icon', style$2['menu-item-icon']),
+              children: icon
             });
-            return;
           }
-          if (item.path) {
-            navigate(ensureSlash(`${_base}${item.path}`));
+          if (isPlainObject(icon) && typeof icon.type === 'string') {
+            return /*#__PURE__*/jsx(Icon, _extends({}, icon, {
+              className: classnames('menu-item-icon', style$2['menu-item-icon'])
+            }));
           }
-        },
-        children: [hasGroup && menuOpen ? /*#__PURE__*/jsx("div", {
-          className: classnames('menu-group', style$2['menu-group']),
-          children: item.groupLabel || item.group
-        }) : null, hasGroup && !menuOpen ? /*#__PURE__*/jsx("div", {
-          className: classnames('menu-group-split', style$2['menu-group-split'])
-        }) : null, /*#__PURE__*/jsxs(Flex, {
-          className: classnames('menu-item', style$2['menu-item'], {
-            ['is-active']: active,
-            ['is-closed']: !menuOpen
-          }),
-          align: "center",
-          gap: 8,
-          children: [(icon => {
-            if (typeof icon === 'string') {
-              return /*#__PURE__*/jsx(Icon, {
-                className: classnames('menu-item-icon', style$2['menu-item-icon']),
-                type: icon,
-                fontClassName: "system"
-              });
-            }
-            if (/*#__PURE__*/isValidElement(icon)) {
-              return /*#__PURE__*/jsx("span", {
-                className: classnames('menu-item-icon', style$2['menu-item-icon']),
-                children: icon
-              });
-            }
-            if (isPlainObject(icon) && typeof icon.type === 'string') {
-              return /*#__PURE__*/jsx(Icon, _extends({}, icon, {
-                className: classnames('menu-item-icon', style$2['menu-item-icon'])
-              }));
-            }
-            return null;
-          })(icon), menuOpen && item.label]
-        })]
-      }, item.key || item.path || index);
-    })
+          return null;
+        })(icon), menuOpen && item.label]
+      })]
+    }, getItemKey(item, index));
+  };
+  return /*#__PURE__*/jsx("div", {
+    ref: listRef,
+    className: classnames('menu', className, style$2['menu-list']),
+    children: listHeight > 0 ? /*#__PURE__*/jsx(VirtualList, {
+      ref: virtualListRef,
+      data: listData,
+      height: listHeight,
+      itemHeight: estimatedItemHeight,
+      itemKey: "key",
+      virtual: listData.length > 0,
+      children: ({
+        item,
+        index
+      }) => renderMenuItem(item, index)
+    }) : null
   });
 };
 
-var style$1 = {"toolbar":"kne-system-layout_SLK-0","toolbar-list":"kne-system-layout_GTQvM","toolbar-item":"kne-system-layout_fAZ3n","toolbar-item-icon":"kne-system-layout_qOB9o","is-hidden":"kne-system-layout_ss5zk","toolbar-item-label":"kne-system-layout_h48es","toolbar-indicator":"kne-system-layout_1s-bc","toolbar-click":"kne-system-layout_Ys3yu"};
+var style$1 = {"toolbar":"kne-system-layout_SLK-0","toolbar-inline":"kne-system-layout_RgKpk","toolbar-boundary-overlay":"kne-system-layout_VEMgn","toolbar-list":"kne-system-layout_GTQvM","is-viewport":"kne-system-layout_c6f0m","is-boundary":"kne-system-layout_3ctCY","toolbar-item":"kne-system-layout_fAZ3n","toolbar-item-icon":"kne-system-layout_qOB9o","is-hidden":"kne-system-layout_ss5zk","toolbar-item-label":"kne-system-layout_h48es","toolbar-indicator":"kne-system-layout_1s-bc","toolbar-click":"kne-system-layout_Ys3yu"};
+
+const context = /*#__PURE__*/createContext({});
+const useContext = () => {
+  return useContext$1(context);
+};
+const {
+  Provider,
+  Consumer
+} = context;
 
+const resolveTarget = target => {
+  if (!target) {
+    return null;
+  }
+  return typeof target === 'function' ? target() : target;
+};
 const Toolbar = ({
   show: _show = true,
   className,
@@ -183,6 +269,15 @@ const Toolbar = ({
 }) => {
   const location = useLocation();
   const navigate = useNavigate();
+  const getScrollElement = useScrollElement();
+  const getBoundaryElement = usePopupContainer();
+  const {
+    mode
+  } = useResponsiveContext();
+  const isMobile = useIsMobile();
+  const {
+    scrollReady
+  } = useContext();
   const currentPathname = _base ? location.pathname.replace(new RegExp(`^${_base}`), '') : location.pathname;
   const toolbarMenu = items.filter(item => item.toolbar);
   const itemRefs = useRef([]);
@@ -212,6 +307,10 @@ const Toolbar = ({
   });
   const displayIndex = activeIndex >= 0 ? activeIndex : 0;
   const listRef = useRef(null);
+  const explicitTarget = resolveTarget(target);
+  const useBoundaryMount = isMobile && mode === 'container' && !explicitTarget;
+  const useViewportFixed = isMobile && mode !== 'container' && !explicitTarget;
+  const boundaryTarget = useBoundaryMount ? getBoundaryElement() : null;
   useLayoutEffect(() => {
     if (activeIndex < 0) {
       return;
@@ -235,21 +334,15 @@ const Toolbar = ({
       });
       return;
     }
-
-    // Phase 1: scale up
     setIndicator(prev => _extends({}, prev, {
       scale: 1.15
     }));
-
-    // Phase 2: move
     const t1 = setTimeout(() => {
       setIndicator(prev => _extends({}, prev, {
         left: newLeft,
         width: newWidth
       }));
     }, 120);
-
-    // Phase 3: scale down
     const t2 = setTimeout(() => {
       setIndicator(prev => _extends({}, prev, {
         scale: 1
@@ -259,10 +352,10 @@ const Toolbar = ({
       clearTimeout(t1);
       clearTimeout(t2);
     };
-  }, [activeIndex, _show, target]);
-  const resolvedTarget = target ? typeof target === 'function' ? target() : target : null;
+  }, [activeIndex, _show, target, useBoundaryMount, useViewportFixed]);
   useEffect(() => {
-    if (!resolvedTarget) {
+    const scrollEl = getScrollElement();
+    if (!scrollEl || typeof scrollEl.addEventListener !== 'function') {
       return;
     }
     const handleScroll = () => {
@@ -274,114 +367,127 @@ const Toolbar = ({
         setScrolling(false);
       }, 500);
     };
-    window.addEventListener('scroll', handleScroll, {
+    scrollEl.addEventListener('scroll', handleScroll, {
       passive: true
     });
-    document.addEventListener('scroll', handleScroll, {
-      passive: true,
-      capture: true
-    });
     return () => {
-      window.removeEventListener('scroll', handleScroll);
-      document.removeEventListener('scroll', handleScroll, {
-        capture: true
-      });
+      scrollEl.removeEventListener('scroll', handleScroll);
       if (scrollTimerRef.current) {
         clearTimeout(scrollTimerRef.current);
       }
     };
-  }, [resolvedTarget]);
+  }, [getScrollElement, _show, scrollReady]);
   if (!_show) {
     return null;
   }
-  return /*#__PURE__*/jsx("div", {
-    className: classnames('toolbar', style$1['toolbar'], className),
-    children: /*#__PURE__*/createPortal(/*#__PURE__*/jsxs(Flex, {
-      ref: listRef,
-      className: classnames('toolbar-list', style$1['toolbar-list'], {
-        ['is-clicked']: clicked,
-        ['is-scrolling']: scrolling
-      }),
+  const toolbarList = /*#__PURE__*/jsxs(Flex, {
+    ref: listRef,
+    className: classnames('toolbar-list', style$1['toolbar-list'], {
+      ['is-clicked']: clicked,
+      ['is-scrolling']: scrolling,
+      [style$1['is-boundary']]: useBoundaryMount,
+      [style$1['is-viewport']]: useViewportFixed
+    }),
+    style: {
+      '--toolbar-count': toolbarMenu.length || 1
+    },
+    onAnimationEnd: () => {
+      if (clicked) {
+        setClicked(false);
+      }
+    },
+    children: [indicator.visible && /*#__PURE__*/jsx("div", {
+      className: classnames('toolbar-indicator', style$1['toolbar-indicator']),
       style: {
-        '--toolbar-count': toolbarMenu.length || 1
-      },
-      onAnimationEnd: () => {
-        if (clicked) {
-          setClicked(false);
-        }
-      },
-      children: [indicator.visible && /*#__PURE__*/jsx("div", {
-        className: classnames('toolbar-indicator', style$1['toolbar-indicator']),
-        style: {
-          left: `${indicator.left}px`,
-          width: `${indicator.width}px`,
-          transform: `scale(${indicator.scale})`
-        }
-      }), toolbarMenu.map((item, index) => {
-        const active = index === activeIndex;
-        const icon = typeof item.icon === 'function' ? item.icon({
-          active
-        }) : item.icon;
-        return /*#__PURE__*/jsxs(Flex, {
-          ref: el => {
-            itemRefs.current[index] = el;
-          },
-          vertical: true,
-          flex: 1,
-          justify: "center",
-          align: "center",
-          className: classnames('toolbar-item', style$1['toolbar-item'], {
-            ['is-active']: active,
-            [style$1['is-hidden']]: scrolling && index !== displayIndex
-          }),
-          onClick: e => {
-            if (active) {
-              return;
-            }
-            setClicked(true);
-            onChange && onChange(item, {
-              base: _base
+        left: `${indicator.left}px`,
+        width: `${indicator.width}px`,
+        transform: `scale(${indicator.scale})`
+      }
+    }), toolbarMenu.map((item, index) => {
+      const active = index === activeIndex;
+      const icon = typeof item.icon === 'function' ? item.icon({
+        active
+      }) : item.icon;
+      return /*#__PURE__*/jsxs(Flex, {
+        ref: el => {
+          itemRefs.current[index] = el;
+        },
+        vertical: true,
+        flex: 1,
+        justify: "center",
+        align: "center",
+        className: classnames('toolbar-item', style$1['toolbar-item'], {
+          ['is-active']: active,
+          [style$1['is-hidden']]: scrolling && index !== displayIndex
+        }),
+        onClick: e => {
+          if (active) {
+            return;
+          }
+          setClicked(true);
+          onChange && onChange(item, {
+            base: _base
+          });
+          if (typeof item.onClick === 'function') {
+            item.onClick(item, {
+              base: _base,
+              event: e
             });
-            if (typeof item.onClick === 'function') {
-              item.onClick(item, {
-                menuOpen,
-                base: _base,
-                event: e
-              });
-              return;
-            }
-            if (item.path) {
-              navigate(ensureSlash(`${_base}${item.path}`));
-            }
-          },
-          children: [(icon => {
-            if (typeof icon === 'string') {
-              return /*#__PURE__*/jsx(Icon, {
-                className: classnames('toolbar-item-icon', style$1['toolbar-item-icon']),
-                type: icon,
-                fontClassName: "system"
-              });
-            }
-            if (/*#__PURE__*/isValidElement(icon)) {
-              return /*#__PURE__*/jsx("span", {
-                className: classnames('toolbar-item-icon', style$1['toolbar-item-icon']),
-                children: icon
-              });
-            }
-            if (isPlainObject(icon) && typeof icon.type === 'string') {
-              return /*#__PURE__*/jsx(Icon, _extends({}, icon, {
-                className: classnames('toolbar-item-icon', style$1['toolbar-item-icon'])
-              }));
-            }
-            return null;
-          })(icon), /*#__PURE__*/jsx("div", {
-            className: classnames('toolbar-item-label', style$1['toolbar-item-label']),
-            children: item.label
-          })]
-        }, item.key || item.path || index);
-      })]
-    }), resolvedTarget || document.body)
+            return;
+          }
+          if (item.path) {
+            navigate(ensureSlash(`${_base}${item.path}`));
+          }
+        },
+        children: [(icon => {
+          if (typeof icon === 'string') {
+            return /*#__PURE__*/jsx(Icon, {
+              className: classnames('toolbar-item-icon', style$1['toolbar-item-icon']),
+              type: icon,
+              fontClassName: "system"
+            });
+          }
+          if (/*#__PURE__*/isValidElement(icon)) {
+            return /*#__PURE__*/jsx("span", {
+              className: classnames('toolbar-item-icon', style$1['toolbar-item-icon']),
+              children: icon
+            });
+          }
+          if (isPlainObject(icon) && typeof icon.type === 'string') {
+            return /*#__PURE__*/jsx(Icon, _extends({}, icon, {
+              className: classnames('toolbar-item-icon', style$1['toolbar-item-icon'])
+            }));
+          }
+          return null;
+        })(icon), /*#__PURE__*/jsx("div", {
+          className: classnames('toolbar-item-label', style$1['toolbar-item-label']),
+          children: item.label
+        })]
+      }, item.key || item.path || index);
+    })]
   });
+  if (useBoundaryMount && boundaryTarget) {
+    return /*#__PURE__*/jsx("div", {
+      className: classnames('toolbar', style$1['toolbar'], className),
+      children: /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
+        className: classnames('toolbar-boundary-overlay', style$1['toolbar-boundary-overlay']),
+        children: toolbarList
+      }), boundaryTarget)
+    });
+  }
+  if (useViewportFixed) {
+    return /*#__PURE__*/jsx("div", {
+      className: classnames('toolbar', style$1['toolbar'], style$1['toolbar-inline'], className),
+      children: toolbarList
+    });
+  }
+  if (explicitTarget) {
+    return /*#__PURE__*/jsx("div", {
+      className: classnames('toolbar', style$1['toolbar'], className),
+      children: /*#__PURE__*/createPortal(toolbarList, explicitTarget)
+    });
+  }
+  return null;
 };
 
 const locale$1 = {
@@ -429,33 +535,49 @@ const ErrorBoundary = props => {
   }));
 };
 
-const context = /*#__PURE__*/createContext({});
-const useContext = () => {
-  return useContext$1(context);
+const hasParentResponsiveProvider = parent => {
+  return parent.getBoundaryElement !== defaultResponsiveContextValue.getBoundaryElement || parent.getScrollElement !== defaultResponsiveContextValue.getScrollElement;
 };
-const {
-  Provider,
-  Consumer
-} = context;
-
-const isMobile = () => {
-  return /iPhone|iPod|Android|ios|iPad/i.test(navigator.userAgent) || window.innerWidth < 768;
+const resolvePageScrollElement = (pageScrollRef, openScrollbar, deviceIsMobile) => {
+  if (deviceIsMobile && !openScrollbar) {
+    const _anchor = pageScrollRef.current;
+    if (_anchor && _anchor.parentElement) {
+      const parentScroll = findResponsiveScroll(_anchor.parentElement);
+      if (parentScroll) {
+        return parentScroll;
+      }
+    }
+    return getDefaultScrollElement();
+  }
+  const anchor = pageScrollRef.current;
+  if (anchor && typeof anchor.getScrollElement === 'function') {
+    return anchor.getScrollElement();
+  }
+  if (anchor && anchor.nodeType === 1 && openScrollbar) {
+    const wrapper = anchor.querySelector('.simplebar-content-wrapper');
+    if (wrapper) {
+      return wrapper;
+    }
+  }
+  return findResponsiveScroll(anchor) || getDefaultScrollElement();
 };
-
-const useIsMobile = () => {
-  const [isMobile$1, setIsMobile] = useState(() => isMobile());
-  useEffect(() => {
-    const handler = throttle(() => {
-      setIsMobile(isMobile());
-    }, 500);
-    window.addEventListener('resize', handler);
-    return () => {
-      window.removeEventListener('resize', handler);
-    };
-  }, []);
-  return isMobile$1;
+const LayoutResponsiveScope = ({
+  boundaryRef,
+  scrollRef,
+  getScrollElement,
+  children
+}) => {
+  const parent = useResponsiveContext();
+  if (hasParentResponsiveProvider(parent)) {
+    return children;
+  }
+  return /*#__PURE__*/jsx(ResponsiveProvider, {
+    boundaryRef: boundaryRef,
+    scrollRef: scrollRef,
+    getScrollElement: getScrollElement,
+    children: children
+  });
 };
-
 const LayoutMenuOpenKey = 'LAYOUT_MENU_OPEN';
 const Layout = ({
   className,
@@ -474,11 +596,15 @@ const Layout = ({
 }) => {
   const localMenuOpen = localStorage.getItem(LayoutMenuOpenKey);
   const isMobile = useIsMobile();
+  const responsiveContext = useResponsiveContext();
   const deviceIsMobile = typeof isMobileProps === 'boolean' ? isMobileProps : isMobile;
+  const useMenuPortal = deviceIsMobile && responsiveContext.mode === 'container';
+  const [menuPortalTarget, setMenuPortalTarget] = useState(null);
   const [menuOpen, setMenuOpen] = useState(typeof localMenuOpen === 'boolean' && !deviceIsMobile ? localMenuOpen : !deviceIsMobile);
   const [toolbarShow, setToolbarShow] = useState(true);
   const [navbarShow, setNavbarShow] = useState(true);
   const [aiType, setAiType] = useState('closed');
+  const [scrollReady, setScrollReady] = useState(0);
   const openScrollbar = typeof openScrollbarProps === 'boolean' ? openScrollbarProps : !deviceIsMobile && !window.__COMPONENTS_CORE_SIMPLE_BAR_DISABLED;
   const userAvatar = userInfo == null ? void 0 : userInfo.avatar;
   const contextValue = useMemo(() => {
@@ -487,194 +613,245 @@ const Layout = ({
       setNavbarShow,
       setMenuOpen,
       deviceIsMobile,
+      scrollReady,
       logo: Object.assign({}, logo ? logo : {
         src: defaultLogo
       }),
       userAvatar
     };
-  }, [deviceIsMobile, logo, userAvatar]);
+  }, [deviceIsMobile, logo, userAvatar, scrollReady]);
   const topRef = useRef(null);
   const pageRef = useRef(null);
-  const [computedToolbarTarget, setComputedToolbarTarget] = useState(toolbarTarget || null);
+  const layoutBoundaryRef = useRef(null);
+  const pageScrollRef = useRef(null);
   const location = useLocation();
-  useLayoutEffect(() => {
-    if (!toolbarTarget) {
-      setComputedToolbarTarget(document.body);
+  const getPageScrollElement = useCallback(() => {
+    return resolvePageScrollElement(pageScrollRef, openScrollbar, deviceIsMobile);
+  }, [openScrollbar, deviceIsMobile]);
+  const handlePageScrollRef = useCallback(node => {
+    pageScrollRef.current = node;
+    if (node) {
+      setScrollReady(version => version + 1);
     }
-  }, [toolbarTarget]);
+  }, []);
   useEffect(() => {
-    topRef.current && topRef.current.scrollIntoView();
-  }, [location]);
+    if (!useMenuPortal) {
+      setMenuPortalTarget(null);
+      return;
+    }
+    const target = typeof responsiveContext.getBoundaryElement === 'function' ? responsiveContext.getBoundaryElement() : null;
+    setMenuPortalTarget(target || null);
+  }, [useMenuPortal, responsiveContext, scrollReady]);
+  useEffect(() => {
+    var _topRef$current;
+    const scrollEl = getPageScrollElement();
+    if (scrollEl && typeof scrollEl.scrollTo === 'function') {
+      scrollEl.scrollTo(0, 0);
+      return;
+    }
+    (_topRef$current = topRef.current) == null || _topRef$current.scrollIntoView();
+  }, [location, getPageScrollElement]);
   const userCard = /*#__PURE__*/jsx(UserCard, _extends({
     menuOpen: menuOpen
   }, Object.assign({}, userInfo)));
-  return /*#__PURE__*/jsxs(Provider, {
-    value: contextValue,
+  const menuPortalVars = useMenuPortal ? {
+    '--menu-max-width': _menuMaxWidth,
+    '--menu-min-width': _menuMinWidth,
+    '--background': _background
+  } : undefined;
+  const layerMenuNode = deviceIsMobile ? /*#__PURE__*/jsx("div", {
+    className: classnames('layer-menu', style$3['layer-menu'], {
+      ['open']: menuOpen,
+      [style$3['open']]: menuOpen,
+      [style$3['is-portaled']]: useMenuPortal
+    }),
+    style: menuPortalVars,
+    onClick: () => {
+      setMenuOpen(false);
+    }
+  }) : null;
+  const menuNode = /*#__PURE__*/jsxs("div", {
+    className: classnames('menu', style$3['menu'], {
+      ['open']: menuOpen,
+      [style$3['open']]: menuOpen,
+      [style$3['is-portaled']]: useMenuPortal
+    }),
+    style: menuPortalVars,
     children: [/*#__PURE__*/jsx("div", {
-      ref: topRef
-    }), /*#__PURE__*/jsxs("div", {
-      className: classnames(className, 'layout', style$3['layout'], {
-        'is-mobile': deviceIsMobile,
-        [style$3['is-mobile']]: deviceIsMobile,
-        'has-toolbar': deviceIsMobile && toolbarShow,
-        [style$3['has-toolbar']]: deviceIsMobile && toolbarShow,
-        'has-navbar': deviceIsMobile && navbarShow,
-        [style$3['has-navbar']]: deviceIsMobile && navbarShow
-      }),
-      style: {
-        '--menu-max-width': _menuMaxWidth,
-        '--menu-min-width': _menuMinWidth,
-        '--background': _background
+      className: classnames('logo', style$3['logo']),
+      children: /*#__PURE__*/jsx(Image, _extends({
+        className: style$3['logo-img']
+      }, contextValue.logo))
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames('expand-btn-wrapper', style$3['expand-btn-wrapper']),
+      onClick: () => {
+        setMenuOpen(menuOpen => {
+          localStorage.setItem(LayoutMenuOpenKey, !menuOpen);
+          return !menuOpen;
+        });
       },
-      children: [deviceIsMobile && /*#__PURE__*/jsx("div", {
-        className: classnames('layer-menu', style$3['layer-menu'], {
-          ['open']: menuOpen,
-          [style$3['open']]: menuOpen
-        }),
+      children: /*#__PURE__*/jsx(ReactComponent, {
+        className: classnames('expand-btn', style$3['expand-btn'], {
+          'is-closed': !menuOpen
+        })
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames('menu-inner', style$3['menu-inner']),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames('menu-header', style$3['menu-header']),
+        children: /*#__PURE__*/jsx(ErrorBoundary, {
+          children: menuHeader ? typeof menuHeader === 'function' ? menuHeader({
+            menuOpen,
+            userCard
+          }) : menuHeader : userCard
+        })
+      }), /*#__PURE__*/jsx(ErrorBoundary, {
+        children: /*#__PURE__*/jsx(Menu, _extends({
+          className: classnames('menu-list', style$3['menu-list']),
+          menuOpen: menuOpen
+        }, menu, {
+          onChange: () => {
+            deviceIsMobile && setMenuOpen(false);
+          }
+        }))
+      }), _aiDialog && /*#__PURE__*/jsx("div", {
+        className: classnames('ai-entry', style$3['ai-entry']),
         onClick: () => {
-          setMenuOpen(false);
-        }
-      }), /*#__PURE__*/jsxs(Flex, {
-        children: [/*#__PURE__*/jsxs("div", {
-          className: classnames('menu', style$3['menu'], {
-            ['open']: menuOpen,
-            [style$3['open']]: menuOpen
-          }),
-          children: [/*#__PURE__*/jsx("div", {
-            className: classnames('logo', style$3['logo']),
-            children: /*#__PURE__*/jsx(Image, _extends({
-              className: style$3['logo-img']
-            }, contextValue.logo))
-          }), /*#__PURE__*/jsx("div", {
-            className: classnames('expand-btn-wrapper', style$3['expand-btn-wrapper']),
-            onClick: () => {
-              setMenuOpen(menuOpen => {
-                localStorage.setItem(LayoutMenuOpenKey, !menuOpen);
-                return !menuOpen;
-              });
-            },
-            children: /*#__PURE__*/jsx(ReactComponent, {
-              className: classnames('expand-btn', style$3['expand-btn'], {
-                'is-closed': !menuOpen
-              })
-            })
-          }), /*#__PURE__*/jsxs("div", {
-            className: classnames('menu-inner', style$3['menu-inner']),
-            children: [/*#__PURE__*/jsx("div", {
-              className: classnames('menu-header', style$3['menu-header']),
-              children: /*#__PURE__*/jsx(ErrorBoundary, {
-                children: menuHeader ? typeof menuHeader === 'function' ? menuHeader({
-                  menuOpen,
-                  userCard
-                }) : menuHeader : userCard
-              })
-            }), /*#__PURE__*/jsx(ErrorBoundary, {
-              children: /*#__PURE__*/jsx(Menu, _extends({
-                className: classnames('menu-list', style$3['menu-list']),
-                menuOpen: menuOpen
-              }, menu, {
-                onChange: () => {
-                  deviceIsMobile && setMenuOpen(false);
-                }
-              }))
-            }), _aiDialog && /*#__PURE__*/jsx("div", {
-              className: classnames('ai-entry', style$3['ai-entry']),
-              onClick: () => {
-                setAiType('small');
-              },
-              children: /*#__PURE__*/jsx(Icon, {
-                type: "system-prompt",
-                colorful: true
-              })
-            })]
-          })]
-        }), /*#__PURE__*/jsx(Flex, {
-          flex: 1,
-          ref: pageRef,
-          className: classnames('page', style$3['page']),
-          children: /*#__PURE__*/jsxs(Row, {
-            className: classnames('page-content', style$3['page-content']),
-            children: [!deviceIsMobile && _aiDialog && aiType === 'inner' && /*#__PURE__*/jsx(Col, {
-              span: 8,
-              className: classnames('page-dialog-outer', style$3['page-dialog-outer']),
-              children: /*#__PURE__*/jsxs("div", {
-                className: classnames('page-dialog', style$3['page-dialog']),
-                children: [/*#__PURE__*/jsxs(Flex, {
-                  className: classnames('ai-dialog-window-title', style$3['ai-dialog-window-title']),
-                  children: [/*#__PURE__*/jsx("div", {
-                    children: _aiDialog.title
-                  }), /*#__PURE__*/jsx(Flex, {
-                    gap: 10,
-                    children: /*#__PURE__*/jsx(Icon, {
-                      className: "btn",
-                      type: "icon-a-Typeclose",
-                      fontClassName: "system",
-                      onClick: () => {
-                        setAiType('closed');
-                      }
+          setAiType('small');
+        },
+        children: /*#__PURE__*/jsx(Icon, {
+          type: "system-prompt",
+          colorful: true
+        })
+      })]
+    })]
+  });
+  const portalMenu = useMenuPortal && menuPortalTarget;
+  return /*#__PURE__*/jsx(LayoutResponsiveScope, {
+    boundaryRef: layoutBoundaryRef,
+    scrollRef: pageScrollRef,
+    getScrollElement: getPageScrollElement,
+    children: /*#__PURE__*/jsxs(Provider, {
+      value: contextValue,
+      children: [/*#__PURE__*/jsx("div", {
+        ref: topRef
+      }), /*#__PURE__*/jsxs("div", {
+        ref: layoutBoundaryRef,
+        className: classnames(className, 'layout', style$3['layout'], RESPONSIVE_BOUNDARY_CLASS, {
+          'is-mobile': deviceIsMobile,
+          [style$3['is-mobile']]: deviceIsMobile,
+          'has-toolbar': deviceIsMobile && toolbarShow,
+          [style$3['has-toolbar']]: deviceIsMobile && toolbarShow,
+          'has-navbar': deviceIsMobile && navbarShow,
+          [style$3['has-navbar']]: deviceIsMobile && navbarShow
+        }),
+        style: {
+          '--menu-max-width': _menuMaxWidth,
+          '--menu-min-width': _menuMinWidth,
+          '--background': _background
+        },
+        children: [!portalMenu && layerMenuNode, /*#__PURE__*/jsxs(Flex, {
+          style: {
+            flex: 1,
+            minHeight: 0,
+            width: '100%',
+            height: 0
+          },
+          children: [!portalMenu && menuNode, portalMenu && /*#__PURE__*/createPortal(/*#__PURE__*/jsxs("div", {
+            className: classnames(style$3['menu-boundary-overlay']),
+            style: menuPortalVars,
+            children: [layerMenuNode, menuNode]
+          }), menuPortalTarget), /*#__PURE__*/jsx(Flex, {
+            flex: 1,
+            ref: pageRef,
+            className: classnames('page', style$3['page']),
+            children: /*#__PURE__*/jsxs(Row, {
+              className: classnames('page-content', style$3['page-content']),
+              children: [!deviceIsMobile && _aiDialog && aiType === 'inner' && /*#__PURE__*/jsx(Col, {
+                span: 8,
+                className: classnames('page-dialog-outer', style$3['page-dialog-outer']),
+                children: /*#__PURE__*/jsxs("div", {
+                  className: classnames('page-dialog', style$3['page-dialog']),
+                  children: [/*#__PURE__*/jsxs(Flex, {
+                    className: classnames('ai-dialog-window-title', style$3['ai-dialog-window-title']),
+                    children: [/*#__PURE__*/jsx("div", {
+                      children: _aiDialog.title
+                    }), /*#__PURE__*/jsx(Flex, {
+                      gap: 10,
+                      children: /*#__PURE__*/jsx(Icon, {
+                        className: "btn",
+                        type: "icon-a-Typeclose",
+                        fontClassName: "system",
+                        onClick: () => {
+                          setAiType('closed');
+                        }
+                      })
+                    })]
+                  }), /*#__PURE__*/jsx(ErrorBoundary, {
+                    children: /*#__PURE__*/jsx("div", {
+                      className: classnames('page-window-content', style$3['page-window-content']),
+                      children: _aiDialog.content
                     })
                   })]
-                }), /*#__PURE__*/jsx(ErrorBoundary, {
-                  children: /*#__PURE__*/jsx("div", {
-                    className: classnames('page-window-content', style$3['page-window-content']),
-                    children: _aiDialog.content
+                })
+              }), /*#__PURE__*/jsx(Col, {
+                span: !deviceIsMobile && _aiDialog && aiType === 'inner' ? 16 : 24,
+                className: RESPONSIVE_CONTAINER_CLASS,
+                children: /*#__PURE__*/jsx(ErrorBoundary, {
+                  children: openScrollbar ? /*#__PURE__*/jsx(SimpleBar, {
+                    ref: handlePageScrollRef,
+                    className: classnames('page-children', style$3['page-children'], RESPONSIVE_SCROLL_CLASS, {
+                      ['has-left']: aiType === 'inner'
+                    }),
+                    children: children
+                  }) : /*#__PURE__*/jsx("div", {
+                    ref: handlePageScrollRef,
+                    className: classnames('page-children', style$3['page-children'], !deviceIsMobile && 'is-scroller', !deviceIsMobile && style$3['is-scroller'], !deviceIsMobile && RESPONSIVE_SCROLL_CLASS, {
+                      ['has-left']: aiType === 'inner'
+                    }),
+                    children: children
                   })
-                })]
-              })
-            }), /*#__PURE__*/jsx(Col, {
-              span: !deviceIsMobile && _aiDialog && aiType === 'inner' ? 16 : 24,
-              children: /*#__PURE__*/jsx(ErrorBoundary, {
-                children: openScrollbar ? /*#__PURE__*/jsx(SimpleBar, {
-                  className: classnames('page-children', style$3['page-children'], {
-                    ['has-left']: aiType === 'inner'
-                  }),
-                  children: children
-                }) : /*#__PURE__*/jsx("div", {
-                  className: classnames('page-children', 'is-scroller', style$3['page-children'], style$3['is-scroller'], {
-                    ['has-left']: aiType === 'inner'
-                  }),
-                  children: children
                 })
-              })
-            })]
-          })
-        }), _aiDialog && aiType === 'small' && /*#__PURE__*/jsxs("div", {
-          className: classnames('ai-dialog-window', style$3['ai-dialog-window']),
-          children: [/*#__PURE__*/jsxs(Flex, {
-            className: classnames('ai-dialog-window-title', style$3['ai-dialog-window-title']),
-            children: [/*#__PURE__*/jsx("div", {
-              children: _aiDialog.title
-            }), /*#__PURE__*/jsxs(Flex, {
-              gap: 10,
-              children: [/*#__PURE__*/jsx(Icon, {
-                className: "btn",
-                type: "icon-a-Typeopen_in_full",
-                fontClassName: "system",
-                onClick: () => {
-                  setAiType('inner');
-                }
-              }), /*#__PURE__*/jsx(Icon, {
-                className: "btn",
-                type: "icon-a-Typeclose",
-                fontClassName: "system",
-                onClick: () => {
-                  setAiType('closed');
-                }
               })]
-            })]
-          }), /*#__PURE__*/jsx(ErrorBoundary, {
-            children: /*#__PURE__*/jsx("div", {
-              className: classnames('ai-dialog-window-content', style$3['ai-dialog-window-content']),
-              children: _aiDialog.content
             })
+          }), _aiDialog && aiType === 'small' && /*#__PURE__*/jsxs("div", {
+            className: classnames('ai-dialog-window', style$3['ai-dialog-window']),
+            children: [/*#__PURE__*/jsxs(Flex, {
+              className: classnames('ai-dialog-window-title', style$3['ai-dialog-window-title']),
+              children: [/*#__PURE__*/jsx("div", {
+                children: _aiDialog.title
+              }), /*#__PURE__*/jsxs(Flex, {
+                gap: 10,
+                children: [/*#__PURE__*/jsx(Icon, {
+                  className: "btn",
+                  type: "icon-a-Typeopen_in_full",
+                  fontClassName: "system",
+                  onClick: () => {
+                    setAiType('inner');
+                  }
+                }), /*#__PURE__*/jsx(Icon, {
+                  className: "btn",
+                  type: "icon-a-Typeclose",
+                  fontClassName: "system",
+                  onClick: () => {
+                    setAiType('closed');
+                  }
+                })]
+              })]
+            }), /*#__PURE__*/jsx(ErrorBoundary, {
+              children: /*#__PURE__*/jsx("div", {
+                className: classnames('ai-dialog-window-content', style$3['ai-dialog-window-content']),
+                children: _aiDialog.content
+              })
+            })]
           })]
-        })]
-      }), /*#__PURE__*/jsx(Toolbar, _extends({}, menu, {
-        className: classnames(style$3['toolbar']),
-        show: deviceIsMobile && toolbarShow,
-        target: computedToolbarTarget
-      }))]
-    })]
+        }), /*#__PURE__*/jsx(Toolbar, _extends({}, menu, {
+          className: classnames(style$3['toolbar']),
+          show: deviceIsMobile && toolbarShow,
+          target: toolbarTarget
+        }))]
+      })]
+    })
   });
 };
 
@@ -707,9 +884,11 @@ const Page = ({
     setNavbarShow,
     setMenuOpen,
     deviceIsMobile,
-    userAvatar
+    userAvatar,
+    scrollReady
   } = useContext();
   const navigate = useNavigate();
+  const getScrollElement = useScrollElement();
   const navbarRef = useRef(null);
   const [isScrolled, setIsScrolled] = useState(false);
   useEffect(() => {
@@ -720,16 +899,20 @@ const Page = ({
     if (!deviceIsMobile || !_navbar) {
       return;
     }
+    const scrollEl = getScrollElement();
+    if (!scrollEl || typeof scrollEl.addEventListener !== 'function') {
+      return;
+    }
     const handleScroll = () => {
       const threshold = navbarRef.current ? navbarRef.current.offsetHeight : 48;
-      setIsScrolled(window.scrollY > threshold);
+      setIsScrolled(scrollEl.scrollTop > threshold);
     };
     handleScroll();
-    window.addEventListener('scroll', handleScroll, {
+    scrollEl.addEventListener('scroll', handleScroll, {
       passive: true
     });
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [deviceIsMobile, _navbar]);
+    return () => scrollEl.removeEventListener('scroll', handleScroll);
+  }, [deviceIsMobile, _navbar, getScrollElement, scrollReady]);
   const navbarEl = _navbar ? /*#__PURE__*/jsxs(Flex, {
     ref: navbarRef,
     justify: "space-between",
@@ -832,6 +1015,13 @@ const Page = ({
 };
 Page.PageLoading = PageLoading;
 
+const isMobile = () => {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return false;
+  }
+  return window.matchMedia(IS_MOBILE_QUERY).matches;
+};
+
 const transparentBgContainer = {
   colorBgContainer: 'transparent'
 };
@@ -844,5 +1034,5 @@ const themeToken = {
 
 import('./index-0916fdba.js');
 
-export { Layout, Page, Layout as default, isMobile, themeToken, useIsMobile, useContext as useLayoutContext };
+export { Layout, Page, Layout as default, isMobile, themeToken, useContext as useLayoutContext };
 //# sourceMappingURL=index.modern.js.map