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

package/dist/index.modern.js

@@ -1,14 +1,17 @@
-import { isValidElement, useContext as useContext$1, createContext, useState, useMemo, useRef, useEffect } from 'react';
-import { Flex, Alert, Button, Row, Col } from 'antd';
+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';
 import { Image } from '@kne/react-file';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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';
@@ -16,6 +19,8 @@ import { createWithIntlProvider, useIntl } from '@kne/react-intl';
 import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 import ButtonGroup from '@kne/button-group';
+import merge from 'lodash/merge';
+import transform from 'lodash/transform';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -27,7 +32,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var style$3 = {"layout":"_sK89O","has-toolbar":"_gyKfI","menu":"_-LpWn","open":"_G-zuN","layer-menu":"_6TCwG","ai-entry":"_5qnw5","page":"_HnwkM","toolbar":"_h8PAW","page-children":"_OM1Q2","is-mobile":"_udBgQ","menu-inner":"_7wq3X","logo":"_-T-Dc","menu-header":"_LOrmu","logo-img":"_2cRWf","expand-btn-wrapper":"_5D-Oq","expand-btn-bg":"_p4eOE","expand-btn":"_8dzE7","username":"_b7XeQ","user-description":"_U0YTk","menu-list":"_8gqbZ","ai-dialog-window":"_UAJc-","pulse-dialog-window":"_VjIWn","page-dialog-outer":"_I7Anv","page-dialog":"_UhsFd","pulse-page-dialog":"_H7slV","page-window-content":"_2mdNn","is-scroller":"_6gjkS","page-content":"_nyAa2","ai-dialog-window-title":"_33Tja","ai-dialog-window-content":"_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,
@@ -35,7 +40,8 @@ const UserCard = ({
   email,
   phone,
   description,
-  menuOpen
+  menuOpen,
+  extra
 }) => {
   if (!menuOpen) {
     return /*#__PURE__*/jsx(Image.Avatar, {
@@ -63,13 +69,17 @@ const UserCard = ({
       }), /*#__PURE__*/jsx("div", {
         className: classnames('user-description', style$3['user-description']),
         children: email || phone || description || '-'
-      })]
+      }), extra]
     })]
   });
 };
 
-var style$2 = {"menu-group":"_Rfzv4","menu-item-icon":"_qoDtD","menu-group-split":"_socoO","menu-item":"_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,
@@ -80,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":"_SLK-0","toolbar-list":"_GTQvM","toolbar-item":"_fAZ3n","toolbar-item-icon":"_qOB9o","toolbar-item-label":"_h48es"};
+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,
@@ -179,88 +269,225 @@ 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([]);
+  const firstRenderRef = useRef(true);
+  const [indicator, setIndicator] = useState({
+    left: 0,
+    width: 0,
+    scale: 1,
+    visible: false
+  });
+  const [clicked, setClicked] = useState(false);
+  const [scrolling, setScrolling] = useState(false);
+  const scrollTimerRef = useRef(null);
+  const activeIndex = toolbarMenu.findIndex(item => {
+    if (typeof activeKey === 'string') {
+      return activeKey === item.key;
+    }
+    if (typeof activeKey === 'function') {
+      return activeKey(item, {
+        base: _base
+      });
+    }
+    if (typeof item.path === 'string') {
+      return ensureSlash(currentPathname) === ensureSlash(item.path);
+    }
+    return false;
+  });
+  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;
+    }
+    const item = itemRefs.current[activeIndex];
+    const list = listRef.current;
+    if (!item || !list) {
+      return;
+    }
+    const itemRect = item.getBoundingClientRect();
+    const listRect = list.getBoundingClientRect();
+    const newLeft = itemRect.left - listRect.left;
+    const newWidth = itemRect.width;
+    if (firstRenderRef.current) {
+      firstRenderRef.current = false;
+      setIndicator({
+        left: newLeft,
+        width: newWidth,
+        scale: 1,
+        visible: true
+      });
+      return;
+    }
+    setIndicator(prev => _extends({}, prev, {
+      scale: 1.15
+    }));
+    const t1 = setTimeout(() => {
+      setIndicator(prev => _extends({}, prev, {
+        left: newLeft,
+        width: newWidth
+      }));
+    }, 120);
+    const t2 = setTimeout(() => {
+      setIndicator(prev => _extends({}, prev, {
+        scale: 1
+      }));
+    }, 380);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+    };
+  }, [activeIndex, _show, target, useBoundaryMount, useViewportFixed]);
+  useEffect(() => {
+    const scrollEl = getScrollElement();
+    if (!scrollEl || typeof scrollEl.addEventListener !== 'function') {
+      return;
+    }
+    const handleScroll = () => {
+      setScrolling(true);
+      if (scrollTimerRef.current) {
+        clearTimeout(scrollTimerRef.current);
+      }
+      scrollTimerRef.current = setTimeout(() => {
+        setScrolling(false);
+      }, 500);
+    };
+    scrollEl.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return () => {
+      scrollEl.removeEventListener('scroll', handleScroll);
+      if (scrollTimerRef.current) {
+        clearTimeout(scrollTimerRef.current);
+      }
+    };
+  }, [getScrollElement, _show, scrollReady]);
   if (!_show) {
     return null;
   }
-  return /*#__PURE__*/jsx("div", {
-    className: classnames('toolbar', style$1['toolbar'], className),
-    children: /*#__PURE__*/createPortal(/*#__PURE__*/jsx(Flex, {
-      className: classnames('toolbar-list', style$1['toolbar-list']),
-      children: toolbarMenu.map((item, index) => {
-        const active = (() => {
-          if (typeof activeKey === 'string') {
-            return activeKey === item.key;
+  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: {
+        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;
           }
-          if (typeof activeKey === 'function') {
-            return activeKey(item, {
-              base: _base
+          setClicked(true);
+          onChange && onChange(item, {
+            base: _base
+          });
+          if (typeof item.onClick === 'function') {
+            item.onClick(item, {
+              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({
-          active
-        }) : item.icon;
-        return /*#__PURE__*/jsxs(Flex, {
-          vertical: true,
-          flex: 1,
-          justify: "center",
-          align: "center",
-          className: classnames('toolbar-item', style$1['toolbar-item'], {
-            ['is-active']: active
-          }),
-          onClick: e => {
-            if (active) {
-              return;
-            }
-            onChange && onChange(item, {
-              base: _base
+        },
+        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 (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);
-      })
-    }), target ? typeof target === 'function' ? target() : target : document.body)
+          }
+          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 = {
@@ -308,19 +535,49 @@ const ErrorBoundary = props => {
   }));
 };
 
-const isMobile = () => {
-  return /iPhone|iPod|Android|ios|iPad/i.test(navigator.userAgent);
+const hasParentResponsiveProvider = parent => {
+  return parent.getBoundaryElement !== defaultResponsiveContextValue.getBoundaryElement || parent.getScrollElement !== defaultResponsiveContextValue.getScrollElement;
 };
-
-const context = /*#__PURE__*/createContext({});
-const useContext = () => {
-  return useContext$1(context);
+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 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 {
-  Provider,
-  Consumer
-} = context;
-
 const LayoutMenuOpenKey = 'LAYOUT_MENU_OPEN';
 const Layout = ({
   className,
@@ -338,277 +595,444 @@ const Layout = ({
   children
 }) => {
   const localMenuOpen = localStorage.getItem(LayoutMenuOpenKey);
-  const [menuOpen, setMenuOpen] = useState(typeof localMenuOpen === 'boolean' ? localMenuOpen : true);
+  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 deviceIsMobile = typeof isMobileProps === 'boolean' ? isMobileProps : isMobile();
+  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(() => {
     return {
       setToolbarShow,
+      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 layoutBoundaryRef = useRef(null);
+  const pageScrollRef = useRef(null);
   const location = useLocation();
+  const getPageScrollElement = useCallback(() => {
+    return resolvePageScrollElement(pageScrollRef, openScrollbar, deviceIsMobile);
+  }, [openScrollbar, deviceIsMobile]);
+  const handlePageScrollRef = useCallback(node => {
+    pageScrollRef.current = node;
+    if (node) {
+      setScrollReady(version => version + 1);
+    }
+  }, []);
+  useEffect(() => {
+    if (!useMenuPortal) {
+      setMenuPortalTarget(null);
+      return;
+    }
+    const target = typeof responsiveContext.getBoundaryElement === 'function' ? responsiveContext.getBoundaryElement() : null;
+    setMenuPortalTarget(target || null);
+  }, [useMenuPortal, responsiveContext, scrollReady]);
   useEffect(() => {
-    topRef.current && topRef.current.scrollIntoView();
-  }, [location]);
-  return /*#__PURE__*/jsxs(Provider, {
-    value: contextValue,
+    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)));
+  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': toolbarShow,
-        [style$3['has-toolbar']]: toolbarShow
-      }),
-      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
-                }) : menuHeader : /*#__PURE__*/jsx(UserCard, _extends({
-                  menuOpen: menuOpen
-                }, Object.assign({}, userInfo)))
-              })
-            }), /*#__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,
-          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: toolbarShow,
-        target: toolbarTarget
-      }))]
-    })]
+        }), /*#__PURE__*/jsx(Toolbar, _extends({}, menu, {
+          className: classnames(style$3['toolbar']),
+          show: deviceIsMobile && toolbarShow,
+          target: toolbarTarget
+        }))]
+      })]
+    })
   });
 };
 
-var style = {"page":"_c1kXt","page-header":"_h-YXH","page-title":"_IOVGr","page-title-extra":"_mKsLu","page-inner":"_wHWje","is-mobile":"_yRZMx","back-icon":"_07Mna"};
+var style = {"page":"kne-system-layout_c1kXt","page-header":"kne-system-layout_h-YXH","is-scrolled":"kne-system-layout_dEXMy","page-title-outer":"kne-system-layout_jhcGo","capsule-click":"kne-system-layout_Ps1FA","page-title-extra":"kne-system-layout_mKsLu","page-title":"kne-system-layout_IOVGr","page-top":"kne-system-layout_Y1y7o","page-inner":"kne-system-layout_wHWje","no-padding":"kne-system-layout_tBnAD","is-mobile":"kne-system-layout_yRZMx","page-loading":"kne-system-layout_vcf3J","page-bottom":"kne-system-layout_vXk1s","back-icon":"kne-system-layout_07Mna"};
 
+const PageLoading = () => {
+  return /*#__PURE__*/jsx(Flex, {
+    flex: 1,
+    justify: "center",
+    children: /*#__PURE__*/jsx("div", {
+      className: style['page-loading'],
+      children: /*#__PURE__*/jsx(Skeleton, {
+        active: true
+      })
+    })
+  });
+};
 const Page = ({
   title,
   extra: _extra = null,
   back,
   buttonProps,
   children,
-  toolbar: _toolbar = true
+  toolbar: _toolbar = true,
+  navbar: _navbar = true,
+  noPadding
 }) => {
   const {
     setToolbarShow,
+    setNavbarShow,
     setMenuOpen,
     deviceIsMobile,
-    userAvatar
+    userAvatar,
+    scrollReady
   } = useContext();
+  const navigate = useNavigate();
+  const getScrollElement = useScrollElement();
+  const navbarRef = useRef(null);
+  const [isScrolled, setIsScrolled] = useState(false);
   useEffect(() => {
     setToolbarShow && setToolbarShow(!!_toolbar);
-  }, [_toolbar]);
-  return /*#__PURE__*/jsxs(Flex, {
-    vertical: true,
-    gap: 24,
-    className: classnames('page', style['page'], {
-      ['is-mobile']: deviceIsMobile,
-      [style['is-mobile']]: deviceIsMobile
+    setNavbarShow && setNavbarShow(!!_navbar);
+  }, [_toolbar, _navbar]);
+  useEffect(() => {
+    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(scrollEl.scrollTop > threshold);
+    };
+    handleScroll();
+    scrollEl.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return () => scrollEl.removeEventListener('scroll', handleScroll);
+  }, [deviceIsMobile, _navbar, getScrollElement, scrollReady]);
+  const navbarEl = _navbar ? /*#__PURE__*/jsxs(Flex, {
+    ref: navbarRef,
+    justify: "space-between",
+    align: "center",
+    gap: 20,
+    className: classnames('page-header', style['page-header'], {
+      ['is-scrolled']: isScrolled,
+      [style['is-scrolled']]: isScrolled
     }),
     children: [/*#__PURE__*/jsxs(Flex, {
-      justify: "space-between",
+      className: classnames('page-title-outer', style['page-title-outer']),
       align: "center",
-      gap: 20,
-      className: classnames('page-header', style['page-header']),
-      children: [/*#__PURE__*/jsxs(Flex, {
-        className: classnames('page-title-outer', style['page-title-outer']),
-        align: "center",
-        gap: 4,
-        children: [back && /*#__PURE__*/jsx(Button, {
-          type: "text",
-          icon: /*#__PURE__*/jsx(Icon, {
-            className: style['back-icon'],
-            type: "a-Typearrow_forward_ios",
-            fontClassName: "system"
-          })
-        }), !back && deviceIsMobile && /*#__PURE__*/jsx(Button, {
-          type: "link",
-          icon: /*#__PURE__*/jsx(Icon, {
-            className: style['back-icon'],
-            type: "a-Typeequal",
-            fontClassName: "system"
-          }),
-          onClick: () => {
-            setMenuOpen(open => !open);
-          }
-        }), /*#__PURE__*/jsx("div", {
-          className: classnames('page-title', style['page-title']),
-          children: title
-        })]
+      gap: 4,
+      children: [back && /*#__PURE__*/jsx(Button, {
+        type: "text",
+        icon: /*#__PURE__*/jsx(Icon, {
+          className: style['back-icon'],
+          type: "a-Typearrow_forward_ios",
+          fontClassName: "system"
+        }),
+        onClick: () => {
+          navigate(-1);
+        }
+      }), !back && deviceIsMobile && /*#__PURE__*/jsx(Button, {
+        type: "link",
+        icon: /*#__PURE__*/jsx(Icon, {
+          className: style['back-icon'],
+          type: "a-Typeequal",
+          fontClassName: "system"
+        }),
+        onClick: () => {
+          setMenuOpen(open => !open);
+        }
       }), /*#__PURE__*/jsx("div", {
-        className: classnames('page-title-extra', style['page-title-extra']),
-        children: _extra ? _extra : deviceIsMobile ? /*#__PURE__*/jsxs(Flex, {
-          gap: 4,
-          align: "center",
-          children: [buttonProps && /*#__PURE__*/jsx(ButtonGroup, _extends({}, Object.assign({}, buttonProps, deviceIsMobile ? {
-            showLength: 0,
-            moreType: 'link'
-          } : {}))), /*#__PURE__*/jsx(Image.Avatar, {
-            id: userAvatar,
-            src: userAvatar,
-            shape: "circle",
-            size: 30,
-            alt: "avatar"
-          })]
-        }) : buttonProps && /*#__PURE__*/jsx(ButtonGroup, _extends({}, buttonProps))
+        className: classnames('page-title', style['page-title']),
+        children: title
       })]
     }), /*#__PURE__*/jsx("div", {
-      className: classnames('page-inner', style['page-inner']),
-      children: children
+      className: classnames('page-title-extra', style['page-title-extra']),
+      children: _extra ? _extra : deviceIsMobile ? /*#__PURE__*/jsxs(Flex, {
+        gap: 4,
+        align: "center",
+        children: [buttonProps && /*#__PURE__*/jsx(ButtonGroup, _extends({}, Object.assign({}, buttonProps, deviceIsMobile ? {
+          showLength: 0,
+          moreType: 'link'
+        } : {}))), /*#__PURE__*/jsx(Image.Avatar, {
+          id: userAvatar,
+          src: userAvatar,
+          shape: "circle",
+          size: 30,
+          alt: "avatar"
+        })]
+      }) : buttonProps && /*#__PURE__*/jsx(ButtonGroup, _extends({}, buttonProps))
     })]
+  }) : null;
+  const pageInnerClassNameOrigin = classnames('page-inner', style['page-inner']);
+  const pageInnerClassName = classnames(pageInnerClassNameOrigin, {
+    ['no-padding']: noPadding,
+    [style['no-padding']]: noPadding
   });
+  const render = ({
+    children,
+    className
+  }) => {
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: style['page-top']
+      }), /*#__PURE__*/jsxs(Flex, {
+        vertical: true,
+        flex: 1,
+        children: [navbarEl, /*#__PURE__*/jsx(Flex, {
+          vertical: true,
+          flex: 1,
+          className: classnames(pageInnerClassNameOrigin, className),
+          children: children
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: style['page-bottom']
+      })]
+    });
+  };
+  return /*#__PURE__*/jsx(Flex, {
+    vertical: true,
+    flex: 1,
+    className: classnames('page', style['page'], {
+      ['is-mobile']: deviceIsMobile,
+      [style['is-mobile']]: deviceIsMobile
+    }),
+    children: typeof children === 'function' ? children({
+      navbar: navbarEl,
+      className: pageInnerClassName,
+      render,
+      pageLoading: render({
+        children: /*#__PURE__*/jsx(PageLoading, {})
+      })
+    }) : render({
+      children
+    })
+  });
+};
+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'
+};
+const transparentBgContainerComponents = ['Input', 'InputNumber', 'Card', 'Tree', 'Select', 'DatePicker'];
+const themeToken = {
+  components: merge({}, transform(transparentBgContainerComponents, (result, component) => {
+    result[component] = transparentBgContainer;
+  }, {}))
 };
 
 import('./index-0916fdba.js');
 
-export { Layout, Page, Layout as default, isMobile, useContext as useLayoutContext };
+export { Layout, Page, Layout as default, isMobile, themeToken, useContext as useLayoutContext };
 //# sourceMappingURL=index.modern.js.map