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

package/dist/index.modern.js

@@ -32,7 +32,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-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"};
+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","is-mobile-full":"kne-system-layout_tiNSQ","is-viewport":"kne-system-layout_UxwXs","ai-dialog-window-title":"kne-system-layout_33Tja","ai-dialog-window-content":"kne-system-layout_YmBhl","ai-boundary-overlay":"kne-system-layout_Nt0Rj","ai-entry-mobile":"kne-system-layout_ln2Ag","is-boundary":"kne-system-layout_dWwHX","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"};
 
 const UserCard = ({
   name,
@@ -579,6 +579,83 @@ const LayoutResponsiveScope = ({
   });
 };
 const LayoutMenuOpenKey = 'LAYOUT_MENU_OPEN';
+const DRAG_THRESHOLD = 4;
+const MobileAiEntry = ({
+  variant,
+  onOpen
+}) => {
+  const btnRef = useRef(null);
+  const dragRef = useRef(null);
+  const [pos, setPos] = useState(null);
+  const handlePointerDown = event => {
+    const node = btnRef.current;
+    if (!node) {
+      return;
+    }
+    // 与 toolbar 一致：boundary 模式下相对定位容器为 offsetParent，viewport 模式下相对视口
+    const container = node.offsetParent;
+    const rect = node.getBoundingClientRect();
+    const refLeft = container ? container.getBoundingClientRect().left : 0;
+    const refTop = container ? container.getBoundingClientRect().top : 0;
+    dragRef.current = {
+      startX: event.clientX,
+      startY: event.clientY,
+      originLeft: rect.left - refLeft,
+      originTop: rect.top - refTop,
+      refWidth: container ? container.clientWidth : window.innerWidth,
+      refHeight: container ? container.clientHeight : window.innerHeight,
+      size: node.offsetWidth,
+      moved: false
+    };
+    node.setPointerCapture == null || node.setPointerCapture(event.pointerId);
+  };
+  const handlePointerMove = event => {
+    const drag = dragRef.current;
+    if (!drag) {
+      return;
+    }
+    const dx = event.clientX - drag.startX;
+    const dy = event.clientY - drag.startY;
+    if (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD) {
+      drag.moved = true;
+    }
+    const maxLeft = Math.max(8, drag.refWidth - drag.size - 8);
+    const maxTop = Math.max(8, drag.refHeight - drag.size - 8);
+    setPos({
+      left: Math.min(Math.max(8, drag.originLeft + dx), maxLeft),
+      top: Math.min(Math.max(8, drag.originTop + dy), maxTop)
+    });
+  };
+  const handlePointerUp = event => {
+    var _btnRef$current;
+    const drag = dragRef.current;
+    dragRef.current = null;
+    (_btnRef$current = btnRef.current) == null || _btnRef$current.releasePointerCapture == null || _btnRef$current.releasePointerCapture(event.pointerId);
+    if (drag && !drag.moved) {
+      onOpen();
+    }
+  };
+  return /*#__PURE__*/jsx("div", {
+    ref: btnRef,
+    className: classnames('ai-entry-mobile', style$3['ai-entry-mobile'], {
+      [style$3['is-viewport']]: variant === 'viewport',
+      [style$3['is-boundary']]: variant !== 'viewport'
+    }),
+    style: pos ? {
+      left: `${pos.left}px`,
+      top: `${pos.top}px`,
+      right: 'auto',
+      bottom: 'auto'
+    } : undefined,
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    children: /*#__PURE__*/jsx(Icon, {
+      type: "system-prompt",
+      colorful: true
+    })
+  });
+};
 const Layout = ({
   className,
   menu,
@@ -714,7 +791,7 @@ const Layout = ({
             deviceIsMobile && setMenuOpen(false);
           }
         }))
-      }), _aiDialog && /*#__PURE__*/jsx("div", {
+      }), _aiDialog && !deviceIsMobile && /*#__PURE__*/jsx("div", {
         className: classnames('ai-entry', style$3['ai-entry']),
         onClick: () => {
           setAiType('small');
@@ -727,6 +804,61 @@ const Layout = ({
     })]
   });
   const portalMenu = useMenuPortal && menuPortalTarget;
+  const aiDialogWindow = _aiDialog && aiType === 'small' ? /*#__PURE__*/jsxs("div", {
+    className: classnames('ai-dialog-window', style$3['ai-dialog-window'], {
+      'is-mobile-full': deviceIsMobile,
+      [style$3['is-mobile-full']]: deviceIsMobile,
+      [style$3['is-viewport']]: deviceIsMobile && !portalMenu
+    }),
+    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: [!deviceIsMobile && /*#__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
+      })
+    })]
+  }) : null;
+  const aiEntryMobile = deviceIsMobile && _aiDialog && aiType === 'closed' ? /*#__PURE__*/jsx(MobileAiEntry, {
+    variant: portalMenu ? 'boundary' : 'viewport',
+    onOpen: () => setAiType('small')
+  }) : null;
+
+  // portal 到 boundary（popup 挂载点）时，layout 上的 CSS 变量不会随 portal 继承，需要显式透传
+  const aiPortalVars = {
+    '--background': _background,
+    '--toolbar-height': deviceIsMobile && toolbarShow ? '72px' : '0px',
+    '--safe-area-inset-top': 'env(safe-area-inset-top)',
+    '--safe-area-inset-bottom': 'env(safe-area-inset-bottom)'
+  };
+  const aiOverlayContent = aiDialogWindow || aiEntryMobile ? /*#__PURE__*/jsxs(Fragment, {
+    children: [aiDialogWindow, aiEntryMobile]
+  }) : null;
+  const aiOverlay = !aiOverlayContent ? null : portalMenu ? /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
+    className: classnames('ai-boundary-overlay', style$3['ai-boundary-overlay']),
+    style: aiPortalVars,
+    children: aiOverlayContent
+  }), menuPortalTarget) : aiOverlayContent;
   return /*#__PURE__*/jsx(LayoutResponsiveScope, {
     boundaryRef: layoutBoundaryRef,
     scrollRef: pageScrollRef,
@@ -814,38 +946,8 @@ const Layout = ({
                 })
               })]
             })
-          }), _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, {
+        }), aiOverlay, /*#__PURE__*/jsx(Toolbar, _extends({}, menu, {
           className: classnames(style$3['toolbar']),
           show: deviceIsMobile && toolbarShow,
           target: toolbarTarget