@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/DraggablePanel/type.d.mts

@@ -1,60 +1,52 @@
 import { DivProps } from "../types/index.mjs";
+import { Placement } from "./core/axes.mjs";
 import { CSSProperties } from "react";
-import { NumberSize, Size } from "re-resizable";
-import { Props } from "react-rnd";
 //#region src/DraggablePanel/type.d.ts
-type PlacementType = 'right' | 'left' | 'top' | 'bottom';
-interface DraggablePanelProps extends DivProps {
+export type DraggablePanelPlacement = Placement;
+export interface DraggablePanelSize {
+  height?: number | string;
+  width?: number | string;
+}
+export interface DraggablePanelProps extends Omit<DivProps, 'onDrag'> {
   backgroundColor?: string;
   classNames?: {
     content?: string;
-    handle?: string;
   };
   /**
    * Preview a collapsed panel while resizing at or below this size, then commit
    * the collapsed state on pointer release. Dragging back above the threshold
    * before release restores the panel.
-   * Applies to width for left/right placement and height for top/bottom placement.
    * Omit to disable drag-to-collapse behavior.
    */
   collapseThreshold?: number;
   defaultExpand?: boolean;
-  defaultSize?: Partial<Size>;
-  destroyOnClose?: boolean;
+  defaultSize?: DraggablePanelSize;
   expand?: boolean;
   expandable?: boolean;
-  fullscreen?: boolean;
-  headerHeight?: number;
   maxHeight?: number;
   maxWidth?: number;
   minHeight?: number;
   minWidth?: number;
   mode?: 'fixed' | 'float';
   onExpandChange?: (expand: boolean) => void;
-  onSizeChange?: (delta: NumberSize, size?: Size) => void;
-  onSizeDragging?: (delta: NumberSize, size?: Size) => void;
-  pin?: boolean;
-  placement: PlacementType;
-  resize?: Props['enableResizing'];
+  onSizeChange?: (delta: DraggablePanelSize, size: DraggablePanelSize) => void;
+  onSizeDragging?: (delta: DraggablePanelSize, size: DraggablePanelSize) => void;
   /**
-   * Whether to show border
-   * @default true
+   * `placement` is resolved against the inline axis, so `left` means inline-start
+   * and flips with `dir="rtl"`.
    */
+  placement?: DraggablePanelPlacement;
   showBorder?: boolean;
-  showHandleHighlight?: boolean;
   showHandleWhenCollapsed?: boolean;
-  showHandleWideArea?: boolean;
-  size?: Partial<Size>;
   /**
-   * Use two-layer container layout to keep content layout stable when collapsed/expanded.
-   * @default true
+   * Widen the resize handle's hit area from 8px to 16px. A coarse pointer always
+   * gets 20px regardless.
    */
-  stableLayout?: boolean;
+  showHandleWideArea?: boolean;
+  size?: DraggablePanelSize;
   styles?: {
     content?: CSSProperties;
-    handle?: CSSProperties;
   };
 }
 //#endregion
-export { DraggablePanelProps };
 //# sourceMappingURL=type.d.mts.map

package/es/DraggableSideNav/DraggableSideNav.mjs

@@ -1,13 +1,15 @@
 "use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import Icon from "../Icon/Icon.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Center from "../Flex/Center.mjs";
-import Icon from "../Icon/Icon.mjs";
 import { styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
-import useMergeState from "use-merge-value";
+import clsx from "clsx";
+import * as stylex from "@stylexjs/stylex";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import useControlledState from "use-merge-value";
 import { useHover } from "ahooks";
 import { Resizable } from "re-resizable";
 //#region src/DraggableSideNav/DraggableSideNav.tsx
@@ -72,7 +74,7 @@ const DraggableSideNav = memo(({ body, className, classNames, defaultExpand = DE
 	const cssVariables = useMemo(() => ({ "--draggable-side-nav-bg": backgroundColor || "" }), [backgroundColor]);
 	const ref = useRef(null);
 	const isHovering = useHover(ref);
-	const [isExpand, setIsExpand] = useMergeState(defaultExpand, {
+	const [isExpand, setIsExpand] = useControlledState(defaultExpand, {
 		onChange: onExpandChange,
 		value: expand
 	});
@@ -282,16 +284,15 @@ const DraggableSideNav = memo(({ body, className, classNames, defaultExpand = DE
 		transition: `transform ${COLLAPSE_ANIMATION_DELAY} ease`
 	}), [placement, isExpand]);
 	const handle = useMemo(() => showHandle && expandable && /* @__PURE__ */ jsx("div", {
+		...stylex.props(styles.toggleRoot, placement === "left" ? styles.toggleLeft : styles.toggleRight),
 		style: handleRootStyle,
-		className: cx(styles.toggleRoot, placement === "left" ? styles.toggleLeft : styles.toggleRight),
 		children: /* @__PURE__ */ jsx(Center, {
-			className: classNames?.handle,
-			style: handleCenterStyle,
+			...styleProps([styles.handle, placement === "left" ? styles.handleLeft : styles.handleRight], classNames?.handle, handleCenterStyle),
 			onClick: toggleExpand,
 			children: /* @__PURE__ */ jsx("div", {
 				style: handleIconWrapperStyle,
 				children: /* @__PURE__ */ jsx(Icon, {
-					className: styles.handlerIcon,
+					className: stylex.props(styles.handlerIcon).className,
 					icon: ArrowIcon,
 					size: 16
 				})
@@ -300,18 +301,13 @@ const DraggableSideNav = memo(({ body, className, classNames, defaultExpand = DE
 	}), [
 		showHandle,
 		expandable,
-		styles.toggleRoot,
-		styles.toggleLeft,
-		styles.toggleRight,
-		styles.handlerIcon,
 		placement,
 		handleRootStyle,
 		classNames?.handle,
 		toggleExpand,
 		handleCenterStyle,
 		handleIconWrapperStyle,
-		ArrowIcon,
-		cx
+		ArrowIcon
 	]);
 	const sizeConfig = useMemo(() => {
 		return {
@@ -340,12 +336,7 @@ const DraggableSideNav = memo(({ body, className, classNames, defaultExpand = DE
 			topRight: false
 		};
 	}, [resizable, placement]);
-	const handleClasses = useMemo(() => ({ [placement === "left" ? "right" : "left"]: cx(styles.resizeHandle, showHandleHighlight && styles.resizeHandleHighlight, placement === "left" ? styles.resizeHandleLeft : styles.resizeHandleRight) }), [
-		placement,
-		styles,
-		showHandleHighlight,
-		cx
-	]);
+	const handleClasses = useMemo(() => ({ [placement === "left" ? "right" : "left"]: stylex.props(styles.resizeHandle, showHandleHighlight && styles.resizeHandleHighlight, placement === "left" ? styles.resizeHandleLeft : styles.resizeHandleRight).className }), [placement, showHandleHighlight]);
 	const containerStyle = useMemo(() => ({
 		...customStyles?.container,
 		...rest.style,
@@ -356,35 +347,11 @@ const DraggableSideNav = memo(({ body, className, classNames, defaultExpand = DE
 		state.isResizing,
 		state.isAnimating
 	]);
-	const containerClassName = useMemo(() => cx(styles.container, classNames?.container, className), [
-		cx,
-		styles.container,
-		classNames?.container,
-		className
-	]);
-	const contentClassName = useMemo(() => cx(showBorder ? styles.contentContainer : styles.contentContainerNoBorder, styles.menuOverride, classNames?.content), [
-		cx,
-		styles.contentContainer,
-		styles.contentContainerNoBorder,
-		styles.menuOverride,
-		classNames?.content,
-		showBorder
-	]);
-	const headerClassName = useMemo(() => cx(styles.header, classNames?.header), [
-		cx,
-		styles.header,
-		classNames?.header
-	]);
-	const bodyClassName = useMemo(() => cx(styles.body, classNames?.body), [
-		cx,
-		styles.body,
-		classNames?.body
-	]);
-	const footerClassName = useMemo(() => cx(styles.footer, classNames?.footer), [
-		cx,
-		styles.footer,
-		classNames?.footer
-	]);
+	const containerClassName = styleProps(styles.container, clsx(classNames?.container, className)).className;
+	const contentClassName = styleProps([styles.contentContainer, !showBorder && styles.contentContainerNoBorder], classNames?.content).className;
+	const headerClassName = styleProps(styles.header, classNames?.header).className;
+	const bodyClassName = styleProps(styles.body, clsx("lobe-draggable-side-nav-body", classNames?.body)).className;
+	const footerClassName = styleProps(styles.footer, classNames?.footer).className;
 	useEffect(() => {
 		return () => {
 			if (animationTimeoutRef.current) clearTimeout(animationTimeoutRef.current);

package/es/DraggableSideNav/DraggableSideNav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableSideNav.mjs","names":["useControlledState","Flexbox"],"sources":["../../src/DraggableSideNav/DraggableSideNav.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { Resizable, type ResizeCallback } from 're-resizable';\nimport {\n  type CSSProperties,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { DraggableSideNavProps } from './type';\n\nconst DEFAULT_MIN_WIDTH = 64; // 最小宽度即折叠宽度\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_EXPANDED_WIDTH = 280;\nconst ANIMATION_DURATION = 300;\nconst COLLAPSE_ANIMATION_DELAY = 200;\n\n// Pre-define static objects to avoid recreating\nconst RESIZE_DISABLED = {\n  bottom: false,\n  bottomLeft: false,\n  bottomRight: false,\n  left: false,\n  right: false,\n  top: false,\n  topLeft: false,\n  topRight: false,\n};\n\n// State reducer for better state management\ninterface SideNavState {\n  expandedWidth: number;\n  internalWidth: number;\n  isAnimating: boolean;\n  isResizing: boolean;\n  renderExpand: boolean;\n}\n\ntype SideNavAction =\n  | { type: 'START_RESIZE' }\n  | { type: 'STOP_RESIZE' }\n  | { type: 'START_ANIMATION' }\n  | { type: 'STOP_ANIMATION' }\n  | { payload: number; type: 'SET_WIDTH' }\n  | { payload: number; type: 'SET_EXPANDED_WIDTH' }\n  | { payload: boolean; type: 'SET_RENDER_EXPAND' }\n  | { payload: number; type: 'ANIMATE_EXPAND' }\n  | { payload: number; type: 'ANIMATE_COLLAPSE' };\n\nfunction sideNavReducer(state: SideNavState, action: SideNavAction): SideNavState {\n  switch (action.type) {\n    case 'START_RESIZE': {\n      return { ...state, isResizing: true };\n    }\n    case 'STOP_RESIZE': {\n      return { ...state, isResizing: false };\n    }\n    case 'START_ANIMATION': {\n      return { ...state, isAnimating: true };\n    }\n    case 'STOP_ANIMATION': {\n      return { ...state, isAnimating: false };\n    }\n    case 'SET_WIDTH': {\n      return { ...state, internalWidth: action.payload };\n    }\n    case 'SET_EXPANDED_WIDTH': {\n      return { ...state, expandedWidth: action.payload };\n    }\n    case 'SET_RENDER_EXPAND': {\n      return { ...state, renderExpand: action.payload };\n    }\n    case 'ANIMATE_EXPAND': {\n      return { ...state, internalWidth: action.payload, renderExpand: true };\n    }\n    case 'ANIMATE_COLLAPSE': {\n      return { ...state, internalWidth: action.payload };\n    }\n    default: {\n      return state;\n    }\n  }\n}\n\nconst DraggableSideNav = memo<DraggableSideNavProps>(\n  ({\n    body,\n    className,\n    classNames,\n    defaultExpand = DEFAULT_EXPAND,\n    defaultWidth,\n    expand,\n    expandable = true,\n    footer,\n    header,\n    maxWidth,\n    minWidth = DEFAULT_MIN_WIDTH,\n    onExpandChange,\n    onWidthChange,\n    onWidthDragging,\n    placement = 'left',\n    resizable = true,\n    showBorder = true,\n    showHandle = true,\n    showHandleWhenCollapsed = false,\n    showHandleHighlight = false,\n    backgroundColor,\n    styles: customStyles,\n    width,\n    ...rest\n  }) => {\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--draggable-side-nav-bg': backgroundColor || '',\n      }),\n      [backgroundColor],\n    );\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n\n    // Expand state management\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    // Use refs for animation timeouts to avoid memory leaks\n    const animationTimeoutRef = useRef<any>(undefined);\n    const collapseTimeoutRef = useRef<any>(undefined);\n\n    // Compute default expanded width - memoize to avoid recalculation\n    const computedDefaultExpandedWidth = useMemo(\n      () => defaultWidth || DEFAULT_EXPANDED_WIDTH,\n      [defaultWidth],\n    );\n\n    // Initialize state with useReducer for better performance\n    const initialState: SideNavState = {\n      expandedWidth: width ?? computedDefaultExpandedWidth,\n      internalWidth: isExpand ? (width ?? computedDefaultExpandedWidth) : minWidth,\n      isAnimating: false,\n      isResizing: false,\n      renderExpand: isExpand,\n    };\n\n    const [state, dispatch] = useReducer(sideNavReducer, initialState);\n\n    // 计算折叠阈值：展开最小宽度和折叠宽度的中间值\n    const collapseThreshold = useMemo(() => {\n      return minWidth + (state.expandedWidth - minWidth) / 3;\n    }, [minWidth, state.expandedWidth]);\n\n    // Toggle expand state with smooth animation\n    const toggleExpand = useCallback(() => {\n      if (!expandable) return;\n\n      // 在动画或拖拽期间阻止新的切换操作，避免状态混乱\n      if (state.isAnimating || state.isResizing) return;\n\n      // 清除之前的动画\n      if (animationTimeoutRef.current) {\n        clearTimeout(animationTimeoutRef.current);\n      }\n\n      // 立即设置动画状态，避免其他 useEffect 干扰\n      dispatch({ type: 'START_ANIMATION' });\n      setIsExpand(!isExpand);\n\n      // 动画完成后重置状态 - 与宽度动画时长一致\n      animationTimeoutRef.current = setTimeout(() => {\n        dispatch({ type: 'STOP_ANIMATION' });\n      }, ANIMATION_DURATION);\n    }, [expandable, isExpand, setIsExpand, state.isAnimating, state.isResizing]);\n\n    // 用于跟踪上一次的 expand 状态，以检测外部变化\n    const prevExpandRef = useRef(isExpand);\n\n    // 监听外部 expand prop 变化，触发动画\n    useEffect(() => {\n      // 检测到 expand 状态变化，且不在拖拽和动画中\n      if (prevExpandRef.current !== isExpand && !state.isResizing && !state.isAnimating) {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 立即设置动画状态，避免其他 useEffect 干扰\n        dispatch({ type: 'START_ANIMATION' });\n\n        animationTimeoutRef.current = setTimeout(() => {\n          dispatch({ type: 'STOP_ANIMATION' });\n        }, ANIMATION_DURATION);\n\n        prevExpandRef.current = isExpand;\n      }\n    }, [isExpand, state.isResizing, state.isAnimating]);\n\n    // 处理展开/折叠状态变化时的宽度动画和内容切换时机\n    useEffect(() => {\n      if (state.isAnimating) {\n        // 使用 requestAnimationFrame 确保动画平滑\n        const rafId = requestAnimationFrame(() => {\n          if (isExpand) {\n            // 展开动画：立即切换内容（先切换内容，再开始宽度动画）\n            dispatch({ payload: state.expandedWidth, type: 'ANIMATE_EXPAND' });\n          } else {\n            // 折叠动画：延迟切换内容，在动画接近结束时才切换（300ms，略早于动画结束）\n            dispatch({ payload: minWidth, type: 'ANIMATE_COLLAPSE' });\n\n            if (collapseTimeoutRef.current) {\n              clearTimeout(collapseTimeoutRef.current);\n            }\n            collapseTimeoutRef.current = setTimeout(() => {\n              dispatch({ payload: false, type: 'SET_RENDER_EXPAND' });\n            }, COLLAPSE_ANIMATION_DELAY);\n          }\n        });\n\n        return () => {\n          cancelAnimationFrame(rafId);\n        };\n      }\n    }, [isExpand, state.isAnimating, minWidth, state.expandedWidth]);\n\n    // 同步非动画期间的 renderExpand 状态（如拖拽）\n    // 使用 ref 追踪上一次的 isResizing 状态，只在拖拽结束时同步\n    const prevIsResizingRef = useRef(state.isResizing);\n    useEffect(() => {\n      const wasResizing = prevIsResizingRef.current;\n      prevIsResizingRef.current = state.isResizing;\n\n      // 只在拖拽刚结束时同步 renderExpand，避免干扰正常的展开/折叠动画\n      if (wasResizing && !state.isResizing && !state.isAnimating) {\n        dispatch({ payload: isExpand, type: 'SET_RENDER_EXPAND' });\n      }\n    }, [isExpand, state.isAnimating, state.isResizing]);\n\n    // 处理外部 width prop 变化\n    // width 表示展开时的宽度，实际显示宽度根据 isExpand 状态决定\n    useEffect(() => {\n      if (width !== undefined && !state.isResizing && !state.isAnimating) {\n        // 更新展开宽度记录\n        dispatch({ payload: width, type: 'SET_EXPANDED_WIDTH' });\n        // 根据当前状态设置实际宽度\n        if (isExpand) {\n          dispatch({ payload: width, type: 'SET_WIDTH' });\n        }\n        // 如果是折叠状态，保持 minWidth，不改变 internalWidth\n      }\n    }, [width, state.isResizing, state.isAnimating, isExpand]);\n\n    // 计算当前的 body 内容 - 使用 renderExpand\n    const currentBody = useMemo(() => {\n      return body(state.renderExpand);\n    }, [body, state.renderExpand]);\n\n    // 计算当前的 header（支持函数和静态值）- 使用 renderExpand\n    const currentHeader = useMemo(() => {\n      return typeof header === 'function' ? header(state.renderExpand) : header;\n    }, [header, state.renderExpand]);\n\n    // 计算当前的 footer（支持函数和静态值）- 使用 renderExpand\n    const currentFooter = useMemo(() => {\n      return typeof footer === 'function' ? footer(state.renderExpand) : footer;\n    }, [footer, state.renderExpand]);\n\n    // Handle resize - memoize to prevent recreating on every render\n    const handleResize: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        const currentWidth = ref.offsetWidth;\n        dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n\n        onWidthDragging?.(delta, currentWidth);\n      },\n      [onWidthDragging],\n    );\n\n    const handleResizeStart = useCallback(() => {\n      dispatch({ type: 'START_RESIZE' });\n    }, []);\n\n    const handleResizeStop: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        dispatch({ type: 'STOP_RESIZE' });\n\n        const currentWidth = ref.offsetWidth;\n\n        // 清除之前的动画\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 根据拖拽后的宽度决定是折叠还是展开\n        if (expandable) {\n          const shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;\n          const shouldExpand =\n            !isExpand && currentWidth > minWidth && currentWidth >= collapseThreshold;\n\n          if (shouldCollapse || shouldExpand) {\n            // 立即设置动画状态\n            dispatch({ type: 'START_ANIMATION' });\n\n            if (shouldCollapse) {\n              setIsExpand(false);\n              dispatch({ payload: minWidth, type: 'SET_WIDTH' });\n            } else {\n              setIsExpand(true);\n              dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n              dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n            }\n\n            animationTimeoutRef.current = setTimeout(() => {\n              dispatch({ type: 'STOP_ANIMATION' });\n            }, ANIMATION_DURATION);\n          } else if (isExpand) {\n            // 展开状态下正常拖拽，记住宽度\n            dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n            dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n          }\n        } else {\n          // 如果不可折叠，仅更新宽度\n          dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n          dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n        }\n\n        onWidthChange?.(delta, currentWidth);\n      },\n      [expandable, minWidth, collapseThreshold, isExpand, onWidthChange, setIsExpand],\n    );\n\n    // Arrow icon based on placement and expand state\n    const ArrowIcon = useMemo(() => {\n      if (placement === 'left') {\n        // 左侧：展开时箭头向左（折叠方向），折叠时箭头向右（展开方向）\n        return ChevronLeft;\n      }\n      // 右侧：展开时箭头向右（折叠方向），折叠时箭头向左（展开方向）\n      return ChevronRight;\n    }, [placement]);\n\n    // Memoize handle styles to prevent recreation\n    const handleRootStyle = useMemo<CSSProperties>(\n      () => ({\n        display: 'flex',\n        opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,\n        transition: 'opacity 0.25s ease',\n      }),\n      [isExpand, showHandleWhenCollapsed, isHovering],\n    );\n\n    const handleCenterStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.handle,\n        cursor: 'pointer',\n      }),\n      [customStyles?.handle],\n    );\n\n    const handleIconWrapperStyle = useMemo<CSSProperties>(\n      () => ({\n        marginLeft: placement === 'right' ? 4 : 0,\n        marginRight: placement === 'left' ? 4 : 0,\n        transform: isExpand ? 'rotate(0deg)' : 'rotate(180deg)',\n        transition: `transform ${COLLAPSE_ANIMATION_DELAY} ease`,\n      }),\n      [placement, isExpand],\n    );\n\n    // Toggle handle with smooth transitions\n    const handle = useMemo(\n      () =>\n        showHandle &&\n        expandable && (\n          <div\n            style={handleRootStyle}\n            className={cx(\n              styles.toggleRoot,\n              placement === 'left' ? styles.toggleLeft : styles.toggleRight,\n            )}\n          >\n            <Center className={classNames?.handle} style={handleCenterStyle} onClick={toggleExpand}>\n              <div style={handleIconWrapperStyle}>\n                <Icon className={styles.handlerIcon} icon={ArrowIcon} size={16} />\n              </div>\n            </Center>\n          </div>\n        ),\n      [\n        showHandle,\n        expandable,\n        styles.toggleRoot,\n        styles.toggleLeft,\n        styles.toggleRight,\n        styles.handlerIcon,\n        placement,\n        handleRootStyle,\n        classNames?.handle,\n        toggleExpand,\n        handleCenterStyle,\n        handleIconWrapperStyle,\n        ArrowIcon,\n        cx,\n      ],\n    );\n\n    // Size configuration - 使用内部宽度状态\n    const sizeConfig = useMemo(() => {\n      return {\n        maxWidth,\n        minWidth,\n        size: { height: '100%', width: state.internalWidth },\n      };\n    }, [state.internalWidth, minWidth, maxWidth]);\n\n    // Resize enable configuration - 始终允许拖拽\n    const resizeEnable = useMemo(() => {\n      if (!resizable) {\n        return RESIZE_DISABLED;\n      }\n      return {\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: placement === 'right',\n        right: placement === 'left',\n        top: false,\n        topLeft: false,\n        topRight: false,\n      };\n    }, [resizable, placement]);\n\n    // Memoize handle classes to prevent recreation\n    const handleClasses = useMemo(\n      () => ({\n        [placement === 'left' ? 'right' : 'left']: cx(\n          styles.resizeHandle,\n          showHandleHighlight && styles.resizeHandleHighlight,\n          placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight,\n        ),\n      }),\n      [placement, styles, showHandleHighlight, cx],\n    );\n\n    // Memoize container style to prevent recreation\n    const containerStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.container,\n        ...rest.style,\n        // 拖拽时不要动画，点击 handle 时有流畅的弹性动画\n        transition: state.isResizing\n          ? 'none'\n          : state.isAnimating\n            ? `width ${ANIMATION_DURATION}ms cubic-bezier(0.22, 1, 0.36, 1)`\n            : 'none',\n      }),\n      [customStyles?.container, rest.style, state.isResizing, state.isAnimating],\n    );\n\n    // Memoize class names\n    const containerClassName = useMemo(\n      () => cx(styles.container, classNames?.container, className),\n      [cx, styles.container, classNames?.container, className],\n    );\n\n    const contentClassName = useMemo(\n      () =>\n        cx(\n          showBorder ? styles.contentContainer : styles.contentContainerNoBorder,\n          styles.menuOverride,\n          classNames?.content,\n        ),\n      [\n        cx,\n        styles.contentContainer,\n        styles.contentContainerNoBorder,\n        styles.menuOverride,\n        classNames?.content,\n        showBorder,\n      ],\n    );\n\n    const headerClassName = useMemo(\n      () => cx(styles.header, classNames?.header),\n      [cx, styles.header, classNames?.header],\n    );\n\n    const bodyClassName = useMemo(\n      () => cx(styles.body, classNames?.body),\n      [cx, styles.body, classNames?.body],\n    );\n\n    const footerClassName = useMemo(\n      () => cx(styles.footer, classNames?.footer),\n      [cx, styles.footer, classNames?.footer],\n    );\n\n    // Cleanup timeouts on unmount\n    useEffect(() => {\n      return () => {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n        if (collapseTimeoutRef.current) {\n          clearTimeout(collapseTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    return (\n      <aside ref={ref}>\n        <Resizable\n          {...sizeConfig}\n          className={containerClassName}\n          enable={resizeEnable}\n          handleClasses={handleClasses}\n          style={containerStyle}\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\n        >\n          {handle}\n          <Flexbox\n            className={contentClassName}\n            style={{\n              ...cssVariables,\n              ...customStyles?.content,\n            }}\n          >\n            {currentHeader && (\n              <div className={headerClassName} style={customStyles?.header}>\n                {currentHeader}\n              </div>\n            )}\n            <div className={bodyClassName} style={customStyles?.body}>\n              {currentBody}\n            </div>\n            {currentFooter && (\n              <div className={footerClassName} style={customStyles?.footer}>\n                {currentFooter}\n              </div>\n            )}\n          </Flexbox>\n        </Resizable>\n      </aside>\n    );\n  },\n);\n\nDraggableSideNav.displayName = 'DraggableSideNav';\n\nexport default DraggableSideNav;\n"],"mappings":"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"}
+{"version":3,"file":"DraggableSideNav.mjs","names":["Flexbox"],"sources":["../../src/DraggableSideNav/DraggableSideNav.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useHover } from 'ahooks';\nimport clsx from 'clsx';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { Resizable, type ResizeCallback } from 're-resizable';\nimport {\n  type CSSProperties,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { DraggableSideNavProps } from './type';\n\nconst DEFAULT_MIN_WIDTH = 64; // 最小宽度即折叠宽度\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_EXPANDED_WIDTH = 280;\nconst ANIMATION_DURATION = 300;\nconst COLLAPSE_ANIMATION_DELAY = 200;\n\n// Pre-define static objects to avoid recreating\nconst RESIZE_DISABLED = {\n  bottom: false,\n  bottomLeft: false,\n  bottomRight: false,\n  left: false,\n  right: false,\n  top: false,\n  topLeft: false,\n  topRight: false,\n};\n\n// State reducer for better state management\ninterface SideNavState {\n  expandedWidth: number;\n  internalWidth: number;\n  isAnimating: boolean;\n  isResizing: boolean;\n  renderExpand: boolean;\n}\n\ntype SideNavAction =\n  | { type: 'START_RESIZE' }\n  | { type: 'STOP_RESIZE' }\n  | { type: 'START_ANIMATION' }\n  | { type: 'STOP_ANIMATION' }\n  | { payload: number; type: 'SET_WIDTH' }\n  | { payload: number; type: 'SET_EXPANDED_WIDTH' }\n  | { payload: boolean; type: 'SET_RENDER_EXPAND' }\n  | { payload: number; type: 'ANIMATE_EXPAND' }\n  | { payload: number; type: 'ANIMATE_COLLAPSE' };\n\nfunction sideNavReducer(state: SideNavState, action: SideNavAction): SideNavState {\n  switch (action.type) {\n    case 'START_RESIZE': {\n      return { ...state, isResizing: true };\n    }\n    case 'STOP_RESIZE': {\n      return { ...state, isResizing: false };\n    }\n    case 'START_ANIMATION': {\n      return { ...state, isAnimating: true };\n    }\n    case 'STOP_ANIMATION': {\n      return { ...state, isAnimating: false };\n    }\n    case 'SET_WIDTH': {\n      return { ...state, internalWidth: action.payload };\n    }\n    case 'SET_EXPANDED_WIDTH': {\n      return { ...state, expandedWidth: action.payload };\n    }\n    case 'SET_RENDER_EXPAND': {\n      return { ...state, renderExpand: action.payload };\n    }\n    case 'ANIMATE_EXPAND': {\n      return { ...state, internalWidth: action.payload, renderExpand: true };\n    }\n    case 'ANIMATE_COLLAPSE': {\n      return { ...state, internalWidth: action.payload };\n    }\n    default: {\n      return state;\n    }\n  }\n}\n\nconst DraggableSideNav = memo<DraggableSideNavProps>(\n  ({\n    body,\n    className,\n    classNames,\n    defaultExpand = DEFAULT_EXPAND,\n    defaultWidth,\n    expand,\n    expandable = true,\n    footer,\n    header,\n    maxWidth,\n    minWidth = DEFAULT_MIN_WIDTH,\n    onExpandChange,\n    onWidthChange,\n    onWidthDragging,\n    placement = 'left',\n    resizable = true,\n    showBorder = true,\n    showHandle = true,\n    showHandleWhenCollapsed = false,\n    showHandleHighlight = false,\n    backgroundColor,\n    styles: customStyles,\n    width,\n    ...rest\n  }) => {\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--draggable-side-nav-bg': backgroundColor || '',\n      }),\n      [backgroundColor],\n    );\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n\n    // Expand state management\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    // Use refs for animation timeouts to avoid memory leaks\n    const animationTimeoutRef = useRef<any>(undefined);\n    const collapseTimeoutRef = useRef<any>(undefined);\n\n    // Compute default expanded width - memoize to avoid recalculation\n    const computedDefaultExpandedWidth = useMemo(\n      () => defaultWidth || DEFAULT_EXPANDED_WIDTH,\n      [defaultWidth],\n    );\n\n    // Initialize state with useReducer for better performance\n    const initialState: SideNavState = {\n      expandedWidth: width ?? computedDefaultExpandedWidth,\n      internalWidth: isExpand ? (width ?? computedDefaultExpandedWidth) : minWidth,\n      isAnimating: false,\n      isResizing: false,\n      renderExpand: isExpand,\n    };\n\n    const [state, dispatch] = useReducer(sideNavReducer, initialState);\n\n    // 计算折叠阈值：展开最小宽度和折叠宽度的中间值\n    const collapseThreshold = useMemo(() => {\n      return minWidth + (state.expandedWidth - minWidth) / 3;\n    }, [minWidth, state.expandedWidth]);\n\n    // Toggle expand state with smooth animation\n    const toggleExpand = useCallback(() => {\n      if (!expandable) return;\n\n      // 在动画或拖拽期间阻止新的切换操作，避免状态混乱\n      if (state.isAnimating || state.isResizing) return;\n\n      // 清除之前的动画\n      if (animationTimeoutRef.current) {\n        clearTimeout(animationTimeoutRef.current);\n      }\n\n      // 立即设置动画状态，避免其他 useEffect 干扰\n      dispatch({ type: 'START_ANIMATION' });\n      setIsExpand(!isExpand);\n\n      // 动画完成后重置状态 - 与宽度动画时长一致\n      animationTimeoutRef.current = setTimeout(() => {\n        dispatch({ type: 'STOP_ANIMATION' });\n      }, ANIMATION_DURATION);\n    }, [expandable, isExpand, setIsExpand, state.isAnimating, state.isResizing]);\n\n    // 用于跟踪上一次的 expand 状态，以检测外部变化\n    const prevExpandRef = useRef(isExpand);\n\n    // 监听外部 expand prop 变化，触发动画\n    useEffect(() => {\n      // 检测到 expand 状态变化，且不在拖拽和动画中\n      if (prevExpandRef.current !== isExpand && !state.isResizing && !state.isAnimating) {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 立即设置动画状态，避免其他 useEffect 干扰\n        dispatch({ type: 'START_ANIMATION' });\n\n        animationTimeoutRef.current = setTimeout(() => {\n          dispatch({ type: 'STOP_ANIMATION' });\n        }, ANIMATION_DURATION);\n\n        prevExpandRef.current = isExpand;\n      }\n    }, [isExpand, state.isResizing, state.isAnimating]);\n\n    // 处理展开/折叠状态变化时的宽度动画和内容切换时机\n    useEffect(() => {\n      if (state.isAnimating) {\n        // 使用 requestAnimationFrame 确保动画平滑\n        const rafId = requestAnimationFrame(() => {\n          if (isExpand) {\n            // 展开动画：立即切换内容（先切换内容，再开始宽度动画）\n            dispatch({ payload: state.expandedWidth, type: 'ANIMATE_EXPAND' });\n          } else {\n            // 折叠动画：延迟切换内容，在动画接近结束时才切换（300ms，略早于动画结束）\n            dispatch({ payload: minWidth, type: 'ANIMATE_COLLAPSE' });\n\n            if (collapseTimeoutRef.current) {\n              clearTimeout(collapseTimeoutRef.current);\n            }\n            collapseTimeoutRef.current = setTimeout(() => {\n              dispatch({ payload: false, type: 'SET_RENDER_EXPAND' });\n            }, COLLAPSE_ANIMATION_DELAY);\n          }\n        });\n\n        return () => {\n          cancelAnimationFrame(rafId);\n        };\n      }\n    }, [isExpand, state.isAnimating, minWidth, state.expandedWidth]);\n\n    // 同步非动画期间的 renderExpand 状态（如拖拽）\n    // 使用 ref 追踪上一次的 isResizing 状态，只在拖拽结束时同步\n    const prevIsResizingRef = useRef(state.isResizing);\n    useEffect(() => {\n      const wasResizing = prevIsResizingRef.current;\n      prevIsResizingRef.current = state.isResizing;\n\n      // 只在拖拽刚结束时同步 renderExpand，避免干扰正常的展开/折叠动画\n      if (wasResizing && !state.isResizing && !state.isAnimating) {\n        dispatch({ payload: isExpand, type: 'SET_RENDER_EXPAND' });\n      }\n    }, [isExpand, state.isAnimating, state.isResizing]);\n\n    // 处理外部 width prop 变化\n    // width 表示展开时的宽度，实际显示宽度根据 isExpand 状态决定\n    useEffect(() => {\n      if (width !== undefined && !state.isResizing && !state.isAnimating) {\n        // 更新展开宽度记录\n        dispatch({ payload: width, type: 'SET_EXPANDED_WIDTH' });\n        // 根据当前状态设置实际宽度\n        if (isExpand) {\n          dispatch({ payload: width, type: 'SET_WIDTH' });\n        }\n        // 如果是折叠状态，保持 minWidth，不改变 internalWidth\n      }\n    }, [width, state.isResizing, state.isAnimating, isExpand]);\n\n    // 计算当前的 body 内容 - 使用 renderExpand\n    const currentBody = useMemo(() => {\n      return body(state.renderExpand);\n    }, [body, state.renderExpand]);\n\n    // 计算当前的 header（支持函数和静态值）- 使用 renderExpand\n    const currentHeader = useMemo(() => {\n      return typeof header === 'function' ? header(state.renderExpand) : header;\n    }, [header, state.renderExpand]);\n\n    // 计算当前的 footer（支持函数和静态值）- 使用 renderExpand\n    const currentFooter = useMemo(() => {\n      return typeof footer === 'function' ? footer(state.renderExpand) : footer;\n    }, [footer, state.renderExpand]);\n\n    // Handle resize - memoize to prevent recreating on every render\n    const handleResize: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        const currentWidth = ref.offsetWidth;\n        dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n\n        onWidthDragging?.(delta, currentWidth);\n      },\n      [onWidthDragging],\n    );\n\n    const handleResizeStart = useCallback(() => {\n      dispatch({ type: 'START_RESIZE' });\n    }, []);\n\n    const handleResizeStop: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        dispatch({ type: 'STOP_RESIZE' });\n\n        const currentWidth = ref.offsetWidth;\n\n        // 清除之前的动画\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 根据拖拽后的宽度决定是折叠还是展开\n        if (expandable) {\n          const shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;\n          const shouldExpand =\n            !isExpand && currentWidth > minWidth && currentWidth >= collapseThreshold;\n\n          if (shouldCollapse || shouldExpand) {\n            // 立即设置动画状态\n            dispatch({ type: 'START_ANIMATION' });\n\n            if (shouldCollapse) {\n              setIsExpand(false);\n              dispatch({ payload: minWidth, type: 'SET_WIDTH' });\n            } else {\n              setIsExpand(true);\n              dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n              dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n            }\n\n            animationTimeoutRef.current = setTimeout(() => {\n              dispatch({ type: 'STOP_ANIMATION' });\n            }, ANIMATION_DURATION);\n          } else if (isExpand) {\n            // 展开状态下正常拖拽，记住宽度\n            dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n            dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n          }\n        } else {\n          // 如果不可折叠，仅更新宽度\n          dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n          dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n        }\n\n        onWidthChange?.(delta, currentWidth);\n      },\n      [expandable, minWidth, collapseThreshold, isExpand, onWidthChange, setIsExpand],\n    );\n\n    // Arrow icon based on placement and expand state\n    const ArrowIcon = useMemo(() => {\n      if (placement === 'left') {\n        // 左侧：展开时箭头向左（折叠方向），折叠时箭头向右（展开方向）\n        return ChevronLeft;\n      }\n      // 右侧：展开时箭头向右（折叠方向），折叠时箭头向左（展开方向）\n      return ChevronRight;\n    }, [placement]);\n\n    // Memoize handle styles to prevent recreation\n    const handleRootStyle = useMemo<CSSProperties>(\n      () => ({\n        display: 'flex',\n        opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,\n        transition: 'opacity 0.25s ease',\n      }),\n      [isExpand, showHandleWhenCollapsed, isHovering],\n    );\n\n    const handleCenterStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.handle,\n        cursor: 'pointer',\n      }),\n      [customStyles?.handle],\n    );\n\n    const handleIconWrapperStyle = useMemo<CSSProperties>(\n      () => ({\n        marginLeft: placement === 'right' ? 4 : 0,\n        marginRight: placement === 'left' ? 4 : 0,\n        transform: isExpand ? 'rotate(0deg)' : 'rotate(180deg)',\n        transition: `transform ${COLLAPSE_ANIMATION_DELAY} ease`,\n      }),\n      [placement, isExpand],\n    );\n\n    // Toggle handle with smooth transitions\n    const handle = useMemo(\n      () =>\n        showHandle &&\n        expandable && (\n          <div\n            {...stylex.props(\n              styles.toggleRoot,\n              placement === 'left' ? styles.toggleLeft : styles.toggleRight,\n            )}\n            style={handleRootStyle}\n          >\n            <Center\n              {...styleProps(\n                [styles.handle, placement === 'left' ? styles.handleLeft : styles.handleRight],\n                classNames?.handle,\n                handleCenterStyle,\n              )}\n              onClick={toggleExpand}\n            >\n              <div style={handleIconWrapperStyle}>\n                <Icon\n                  className={stylex.props(styles.handlerIcon).className}\n                  icon={ArrowIcon}\n                  size={16}\n                />\n              </div>\n            </Center>\n          </div>\n        ),\n      [\n        showHandle,\n        expandable,\n        placement,\n        handleRootStyle,\n        classNames?.handle,\n        toggleExpand,\n        handleCenterStyle,\n        handleIconWrapperStyle,\n        ArrowIcon,\n      ],\n    );\n\n    // Size configuration - 使用内部宽度状态\n    const sizeConfig = useMemo(() => {\n      return {\n        maxWidth,\n        minWidth,\n        size: { height: '100%', width: state.internalWidth },\n      };\n    }, [state.internalWidth, minWidth, maxWidth]);\n\n    // Resize enable configuration - 始终允许拖拽\n    const resizeEnable = useMemo(() => {\n      if (!resizable) {\n        return RESIZE_DISABLED;\n      }\n      return {\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: placement === 'right',\n        right: placement === 'left',\n        top: false,\n        topLeft: false,\n        topRight: false,\n      };\n    }, [resizable, placement]);\n\n    // Memoize handle classes to prevent recreation\n    const handleClasses = useMemo(\n      () => ({\n        [placement === 'left' ? 'right' : 'left']: stylex.props(\n          styles.resizeHandle,\n          showHandleHighlight && styles.resizeHandleHighlight,\n          placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight,\n        ).className,\n      }),\n      [placement, showHandleHighlight],\n    );\n\n    // Memoize container style to prevent recreation\n    const containerStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.container,\n        ...rest.style,\n        // 拖拽时不要动画，点击 handle 时有流畅的弹性动画\n        transition: state.isResizing\n          ? 'none'\n          : state.isAnimating\n            ? `width ${ANIMATION_DURATION}ms cubic-bezier(0.22, 1, 0.36, 1)`\n            : 'none',\n      }),\n      [customStyles?.container, rest.style, state.isResizing, state.isAnimating],\n    );\n\n    // Memoize class names\n    const containerClassName = styleProps(\n      styles.container,\n      clsx(classNames?.container, className),\n    ).className;\n\n    const contentClassName = styleProps(\n      [styles.contentContainer, !showBorder && styles.contentContainerNoBorder],\n      classNames?.content,\n    ).className;\n\n    const headerClassName = styleProps(styles.header, classNames?.header).className;\n\n    const bodyClassName = styleProps(\n      styles.body,\n      clsx('lobe-draggable-side-nav-body', classNames?.body),\n    ).className;\n\n    const footerClassName = styleProps(styles.footer, classNames?.footer).className;\n\n    // Cleanup timeouts on unmount\n    useEffect(() => {\n      return () => {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n        if (collapseTimeoutRef.current) {\n          clearTimeout(collapseTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    return (\n      <aside ref={ref}>\n        <Resizable\n          {...sizeConfig}\n          className={containerClassName}\n          enable={resizeEnable}\n          handleClasses={handleClasses}\n          style={containerStyle}\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\n        >\n          {handle}\n          <Flexbox\n            className={contentClassName}\n            style={{\n              ...cssVariables,\n              ...customStyles?.content,\n            }}\n          >\n            {currentHeader && (\n              <div className={headerClassName} style={customStyles?.header}>\n                {currentHeader}\n              </div>\n            )}\n            <div className={bodyClassName} style={customStyles?.body}>\n              {currentBody}\n            </div>\n            {currentFooter && (\n              <div className={footerClassName} style={customStyles?.footer}>\n                {currentFooter}\n              </div>\n            )}\n          </Flexbox>\n        </Resizable>\n      </aside>\n    );\n  },\n);\n\nDraggableSideNav.displayName = 'DraggableSideNav';\n\nexport default DraggableSideNav;\n"],"mappings":"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"}