@lobehub/ui 5.23.1 → 5.23.3

package/es/DraggablePanel/DraggablePanel.mjs

@@ -2,7 +2,7 @@
 import Center from "../Flex/Center.mjs";
 import Icon from "../Icon/Icon.mjs";
 import { handleVariants, panelVariants, styles, toggleVariants } from "./style.mjs";
-import { reversePlacement } from "./utils.mjs";
+import { isBelowCollapseThreshold, reversePlacement } from "./utils.mjs";
 import { memo, startTransition, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ConfigProvider } from "antd";
@@ -40,7 +40,7 @@ const toCssSize = (value, fallback) => {
 	if (typeof value === "string" && value.length > 0) return value;
 	return fallback;
 };
-const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = true, mode = "fixed", children, placement = "right", resize, style, showBorder = true, showHandleHighlight = false, showHandleWideArea = true, backgroundColor, size, stableLayout = false, defaultSize: customizeDefaultSize, minWidth, minHeight, maxWidth, onSizeChange, onSizeDragging, expandable = true, expand, defaultExpand = true, onExpandChange, className, showHandleWhenCollapsed, destroyOnClose, styles: customStyles, classNames, dir }) => {
+const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = true, mode = "fixed", children, placement = "right", resize, style, showBorder = true, showHandleHighlight = false, showHandleWideArea = true, backgroundColor, collapseThreshold, size, stableLayout = false, defaultSize: customizeDefaultSize, minWidth, minHeight, maxWidth, onSizeChange, onSizeDragging, expandable = true, expand, defaultExpand = true, onExpandChange, className, showHandleWhenCollapsed, destroyOnClose, styles: customStyles, classNames, dir }) => {
 	const ref = useRef(null);
 	const isHovering = useHover(ref);
 	const isVertical = placement === "top" || placement === "bottom";
@@ -48,6 +48,7 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
 	const resetTransitionTimeoutRef = useRef(void 0);
 	const resizableRef = useRef(null);
 	const initialExpandedSizeRef = useRef(void 0);
+	const resizeStartSizeRef = useRef(void 0);
 	const outerRef = useRef(null);
 	const { direction: antdDirection } = use(ConfigProvider.ConfigContext);
 	const direction = dir ?? antdDirection;
@@ -67,6 +68,7 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
 	});
 	const [shouldTransition, setShouldTransition] = useState(true);
 	const [showExpand, setShowExpand] = useState(true);
+	const usesStableLayout = stableLayout || collapseThreshold !== void 0;
 	useEffect(() => {
 		if (pin) return;
 		if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
@@ -120,7 +122,7 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
 	const normalizedMinHeight = typeof minHeight === "number" ? Math.max(minHeight, 0) : void 0;
 	const normalizedMinWidth = typeof minWidth === "number" ? Math.max(minWidth, 0) : void 0;
 	const sizeProps = useMemo(() => {
-		if (!stableLayout && !isExpand) return isVertical ? {
+		if (!usesStableLayout && !isExpand) return isVertical ? {
 			minHeight: 0,
 			size: { height: 0 }
 		} : {
@@ -136,7 +138,7 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
 			size
 		};
 	}, [
-		stableLayout,
+		usesStableLayout,
 		isExpand,
 		isVertical,
 		defaultSize,
@@ -169,7 +171,7 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
 	const [resizedExpandedSize, setResizedExpandedSize] = useState({});
 	const expandedOuterSize = controlledExpandedSize ?? (isVertical ? resizedExpandedSize.vertical : resizedExpandedSize.horizontal) ?? defaultExpandedSize;
 	const setExpandedMainSize = useCallback((nextSize) => {
-		if (!stableLayout) return;
+		if (!usesStableLayout) return;
 		const currentSize = isVertical ? nextSize.height : nextSize.width;
 		if (!currentSize) return;
 		const normalizedSize = toCssSize(currentSize, fallbackExpandedSize);
@@ -183,22 +185,26 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
 	}, [
 		fallbackExpandedSize,
 		isVertical,
-		stableLayout
+		usesStableLayout
 	]);
-	const captureInitialExpandedSize = useCallback(() => {
-		if (initialExpandedSizeRef.current) return initialExpandedSizeRef.current;
+	const readCurrentSize = useCallback(() => {
 		const rect = resizableRef.current?.resizable?.getBoundingClientRect();
 		if (!rect) return void 0;
-		const nextInitialSize = isVertical ? {
+		return isVertical ? {
 			height: rect.height,
 			width: "100%"
 		} : {
 			height: "100%",
 			width: rect.width
 		};
+	}, [isVertical]);
+	const captureInitialExpandedSize = useCallback(() => {
+		if (initialExpandedSizeRef.current) return initialExpandedSizeRef.current;
+		const nextInitialSize = readCurrentSize();
+		if (!nextInitialSize) return void 0;
 		initialExpandedSizeRef.current = nextInitialSize;
 		return nextInitialSize;
-	}, [isVertical]);
+	}, [readCurrentSize]);
 	useEffect(() => {
 		if (!isExpand) return;
 		captureInitialExpandedSize();
@@ -241,19 +247,28 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
 	]);
 	const handleResize = useCallback((_event, _direction, el, delta) => {
 		const nextSize = clampResizeSize(el);
-		if (stableLayout && outerRef.current) {
+		const nextCollapsePreview = isBelowCollapseThreshold({
+			axis: isVertical ? "height" : "width",
+			collapseThreshold,
+			size: nextSize
+		});
+		if (usesStableLayout && outerRef.current) {
 			const dimension = isVertical ? nextSize.height : nextSize.width;
-			if (dimension) if (isVertical) outerRef.current.style.height = dimension;
-			else outerRef.current.style.width = dimension;
+			if (dimension) {
+				const previewDimension = nextCollapsePreview ? "0px" : dimension;
+				if (isVertical) outerRef.current.style.height = previewDimension;
+				else outerRef.current.style.width = previewDimension;
+			}
 		}
-		setExpandedMainSize(nextSize);
+		if (collapseThreshold === void 0) setExpandedMainSize(nextSize);
 		onSizeDragging?.(delta, nextSize);
 	}, [
 		clampResizeSize,
+		collapseThreshold,
 		isVertical,
 		onSizeDragging,
 		setExpandedMainSize,
-		stableLayout
+		usesStableLayout
 	]);
 	const triggerResetWithoutTransition = useCallback(() => {
 		if (resetTransitionTimeoutRef.current) clearTimeout(resetTransitionTimeoutRef.current);
@@ -297,26 +312,47 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
 			clearTimeout(resetTransitionTimeoutRef.current);
 			resetTransitionTimeoutRef.current = void 0;
 		}
-		if (stableLayout && outerRef.current) outerRef.current.style.transition = "none";
+		resizeStartSizeRef.current = readCurrentSize();
+		if (usesStableLayout && outerRef.current) outerRef.current.style.transition = "none";
 		setShouldTransition(false);
 		setShowExpand(false);
-	}, [handleResetSize, stableLayout]);
+	}, [
+		handleResetSize,
+		readCurrentSize,
+		usesStableLayout
+	]);
 	const handleResizeStop = useCallback((_event, _direction, el, delta) => {
 		const nextSize = clampResizeSize(el);
-		setExpandedMainSize(nextSize);
+		const shouldCollapse = isBelowCollapseThreshold({
+			axis: isVertical ? "height" : "width",
+			collapseThreshold,
+			size: nextSize
+		});
+		const committedSize = shouldCollapse ? resizeStartSizeRef.current ?? nextSize : nextSize;
+		resizableRef.current?.updateSize(committedSize);
+		if (!shouldCollapse) setExpandedMainSize(committedSize);
 		setShouldTransition(true);
 		setShowExpand(true);
-		if (stableLayout && outerRef.current) {
-			outerRef.current.style.removeProperty("width");
-			outerRef.current.style.removeProperty("height");
+		if (usesStableLayout && outerRef.current) {
 			outerRef.current.style.removeProperty("transition");
+			if (shouldCollapse) if (isVertical) outerRef.current.style.height = "0px";
+			else outerRef.current.style.width = "0px";
+			else {
+				outerRef.current.style.removeProperty("width");
+				outerRef.current.style.removeProperty("height");
+			}
 		}
-		onSizeChange?.(delta, nextSize);
+		if (shouldCollapse) setIsExpand(false);
+		resizeStartSizeRef.current = void 0;
+		onSizeChange?.(delta, committedSize);
 	}, [
 		clampResizeSize,
+		collapseThreshold,
+		isVertical,
 		onSizeChange,
 		setExpandedMainSize,
-		stableLayout
+		setIsExpand,
+		usesStableLayout
 	]);
 	const resizeHandleClassName = useMemo(() => cx(handleVariants({ placement: reversed }), showHandleHighlight && styles.handleHighlight), [reversed, showHandleHighlight]);
 	if (fullscreen) return /* @__PURE__ */ jsx("div", {
@@ -325,7 +361,7 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
 		children
 	});
 	const Arrow = ARROW_MAP[internalPlacement] ?? ChevronLeft;
-	const stableOuterFlex = stableLayout ? {
+	const stableOuterFlex = usesStableLayout ? {
 		display: "flex",
 		flexDirection: "column",
 		minHeight: 0
@@ -340,14 +376,14 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
 		overflow: "hidden",
 		transition: shouldTransition ? "width 0.2s var(--ant-motion-ease-out, ease)" : "none",
 		width: isExpand ? expandedOuterSize : 0,
-		...stableLayout ? {
+		...usesStableLayout ? {
 			...stableOuterFlex,
 			flex: 1,
 			minWidth: 0,
 			height: "100%"
 		} : {}
 	};
-	const sidebarInnerStyle = stableLayout ? {
+	const sidebarInnerStyle = usesStableLayout ? {
 		display: "flex",
 		flex: 1,
 		flexDirection: "column",
@@ -359,7 +395,7 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
 		height: "100%",
 		width: "100%"
 	} : { width: "100%" };
-	const stableAsideStyle = stableLayout ? {
+	const stableAsideStyle = usesStableLayout ? {
 		display: "flex",
 		flexDirection: "column",
 		minHeight: 0,
@@ -383,13 +419,13 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
 		style: {
 			...cssVariables,
 			transition: shouldTransition ? void 0 : "none",
-			...stableLayout ? stableResizableStyle : {},
+			...usesStableLayout ? stableResizableStyle : {},
 			...style
 		},
 		onResize: handleResize,
 		onResizeStart: handleResizeStart,
 		onResizeStop: handleResizeStop,
-		children: stableLayout ? /* @__PURE__ */ jsx("div", {
+		children: usesStableLayout ? /* @__PURE__ */ jsx("div", {
 			style: sidebarInnerStyle,
 			children
 		}) : children
@@ -428,7 +464,7 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
 					}
 				})
 			})
-		}), stableLayout ? /* @__PURE__ */ jsx("div", {
+		}), usesStableLayout ? /* @__PURE__ */ jsx("div", {
 			ref: outerRef,
 			style: sidebarOuterStyle,
 			children: panelNode

package/es/DraggablePanel/DraggablePanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggablePanel.mjs","names":["useControlledState"],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { ConfigProvider } from 'antd';\nimport { cx } from 'antd-style';\nimport isEqual from 'fast-deep-equal';\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';\nimport type { Enable, NumberSize, Size } from 're-resizable';\nimport { Resizable } from 're-resizable';\nimport {\n  type CSSProperties,\n  memo,\n  startTransition,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { handleVariants, panelVariants, styles, toggleVariants } from './style';\nimport type { DraggablePanelProps } from './type';\nimport { reversePlacement } from './utils';\n\nconst ARROW_MAP = {\n  bottom: ChevronUp,\n  left: ChevronRight,\n  right: ChevronLeft,\n  top: ChevronDown,\n} as const;\n\nconst MARGIN_MAP = {\n  bottom: { marginTop: 4 },\n  left: { marginRight: 4 },\n  right: { marginLeft: 4 },\n  top: { marginBottom: 4 },\n} as const;\n\nconst DISABLED_RESIZING: Enable = {\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\nconst toCssSize = (value: string | number | undefined, fallback: string) => {\n  if (typeof value === 'number') return `${Math.max(value, 0)}px`;\n  if (typeof value === 'string' && value.length > 0) return value;\n  return fallback;\n};\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n  ({\n    headerHeight = 0,\n    fullscreen,\n    maxHeight,\n    pin = true,\n    mode = 'fixed',\n    children,\n    placement = 'right',\n    resize,\n    style,\n    showBorder = true,\n    showHandleHighlight = false,\n    showHandleWideArea = true,\n    backgroundColor,\n    size,\n    stableLayout = false,\n    defaultSize: customizeDefaultSize,\n    minWidth,\n    minHeight,\n    maxWidth,\n    onSizeChange,\n    onSizeDragging,\n    expandable = true,\n    expand,\n    defaultExpand = true,\n    onExpandChange,\n    className,\n    showHandleWhenCollapsed,\n    destroyOnClose,\n    styles: customStyles,\n    classNames,\n    dir,\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n    const isVertical = placement === 'top' || placement === 'bottom';\n    const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n    const resetTransitionTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n    const resizableRef = useRef<Resizable>(null);\n    const initialExpandedSizeRef = useRef<Size | undefined>(undefined);\n    const outerRef = useRef<HTMLDivElement>(null);\n\n    const { direction: antdDirection } = use(ConfigProvider.ConfigContext);\n    const direction = dir ?? antdDirection;\n\n    const internalPlacement = useMemo(() => {\n      if (direction !== 'rtl') return placement;\n      if (placement === 'left') return 'right';\n      if (placement === 'right') return 'left';\n      return placement;\n    }, [direction, placement]);\n\n    const cssVariables = {\n      '--draggable-panel-bg': backgroundColor || '',\n      '--draggable-panel-header-height': `${headerHeight}px`,\n    } as Record<string, string>;\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    const [shouldTransition, setShouldTransition] = useState(true);\n    const [showExpand, setShowExpand] = useState(true);\n\n    useEffect(() => {\n      if (pin) return;\n\n      if (hoverTimeoutRef.current) {\n        clearTimeout(hoverTimeoutRef.current);\n      }\n\n      if (isHovering && !isExpand) {\n        startTransition(() => setIsExpand(true));\n      } else if (!isHovering && isExpand) {\n        hoverTimeoutRef.current = setTimeout(() => {\n          startTransition(() => setIsExpand(false));\n        }, 150);\n      }\n    }, [pin, isHovering, isExpand, setIsExpand]);\n\n    useEffect(() => {\n      return () => {\n        if (hoverTimeoutRef.current) {\n          clearTimeout(hoverTimeoutRef.current);\n        }\n        if (resetTransitionTimeoutRef.current) {\n          clearTimeout(resetTransitionTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      initialExpandedSizeRef.current = undefined;\n    }, [internalPlacement]);\n\n    const reversed = reversePlacement(internalPlacement);\n    const canResizing = resize !== false && isExpand;\n\n    const resizing = useMemo(\n      () => ({\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        [reversed]: true,\n        ...(resize as Enable),\n      }),\n      [reversed, resize],\n    );\n\n    const defaultSize: Size = useMemo(() => {\n      if (isVertical) return { height: 180, width: '100%', ...customizeDefaultSize };\n      return { height: '100%', width: 280, ...customizeDefaultSize };\n    }, [isVertical, customizeDefaultSize]);\n    const normalizedMaxHeight = typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : undefined;\n    const normalizedMaxWidth = typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : undefined;\n    const normalizedMinHeight = typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined;\n    const normalizedMinWidth = typeof minWidth === 'number' ? Math.max(minWidth, 0) : undefined;\n\n    const sizeProps = useMemo(() => {\n      if (!stableLayout && !isExpand) {\n        return isVertical\n          ? { minHeight: 0, size: { height: 0 } }\n          : { minWidth: 0, size: { width: 0 } };\n      }\n\n      return {\n        defaultSize,\n        maxHeight: normalizedMaxHeight,\n        maxWidth: normalizedMaxWidth,\n        minHeight: normalizedMinHeight,\n        minWidth: normalizedMinWidth,\n        size: size as Size,\n      };\n    }, [\n      stableLayout,\n      isExpand,\n      isVertical,\n      defaultSize,\n      normalizedMaxHeight,\n      normalizedMaxWidth,\n      normalizedMinHeight,\n      normalizedMinWidth,\n      size,\n    ]);\n\n    const fallbackExpandedSize = isVertical ? '180px' : '280px';\n    const controlledExpandedSize = useMemo(() => {\n      const controlledSize = isVertical ? size?.height : size?.width;\n      if (controlledSize === undefined) return undefined;\n      return toCssSize(controlledSize, fallbackExpandedSize);\n    }, [isVertical, size?.height, size?.width, fallbackExpandedSize]);\n    const defaultExpandedSize = useMemo(() => {\n      const initialSize = isVertical ? defaultSize.height : defaultSize.width;\n      return toCssSize(initialSize, fallbackExpandedSize);\n    }, [isVertical, defaultSize.height, defaultSize.width, fallbackExpandedSize]);\n    const [resizedExpandedSize, setResizedExpandedSize] = useState<{\n      horizontal?: string;\n      vertical?: string;\n    }>({});\n    const expandedOuterSize =\n      controlledExpandedSize ??\n      (isVertical ? resizedExpandedSize.vertical : resizedExpandedSize.horizontal) ??\n      defaultExpandedSize;\n\n    const setExpandedMainSize = useCallback(\n      (nextSize: Size) => {\n        if (!stableLayout) return;\n\n        const currentSize = isVertical ? nextSize.height : nextSize.width;\n        if (!currentSize) return;\n\n        const normalizedSize = toCssSize(currentSize, fallbackExpandedSize);\n        setResizedExpandedSize((state) =>\n          isVertical\n            ? { ...state, vertical: normalizedSize }\n            : { ...state, horizontal: normalizedSize },\n        );\n      },\n      [fallbackExpandedSize, isVertical, stableLayout],\n    );\n\n    const captureInitialExpandedSize = useCallback(() => {\n      if (initialExpandedSizeRef.current) return initialExpandedSizeRef.current;\n\n      const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n      if (!rect) return undefined;\n\n      const nextInitialSize = isVertical\n        ? ({ height: rect.height, width: '100%' } as Size)\n        : ({ height: '100%', width: rect.width } as Size);\n\n      initialExpandedSizeRef.current = nextInitialSize;\n      return nextInitialSize;\n    }, [isVertical]);\n\n    useEffect(() => {\n      if (!isExpand) return;\n      captureInitialExpandedSize();\n    }, [captureInitialExpandedSize, isExpand]);\n\n    const toggleExpand = useCallback(() => {\n      if (expandable) setIsExpand(!isExpand);\n    }, [expandable, isExpand, setIsExpand]);\n\n    const clampResizeSize = useCallback(\n      (el: HTMLElement) => {\n        const rect = el.getBoundingClientRect();\n        const currentMainSize = isVertical ? rect.height : rect.width;\n        const minMainSize = isVertical ? normalizedMinHeight : normalizedMinWidth;\n        const maxMainSize = isVertical ? normalizedMaxHeight : normalizedMaxWidth;\n\n        let clampedMainSize = currentMainSize;\n        if (typeof minMainSize === 'number')\n          clampedMainSize = Math.max(clampedMainSize, minMainSize);\n        if (typeof maxMainSize === 'number')\n          clampedMainSize = Math.min(clampedMainSize, maxMainSize);\n\n        if (\n          !Number.isFinite(clampedMainSize) ||\n          Math.abs(clampedMainSize - currentMainSize) < 0.5\n        ) {\n          return { height: el.style.height, width: el.style.width };\n        }\n\n        const width = isVertical ? el.style.width || '100%' : `${clampedMainSize}px`;\n        const height = isVertical ? `${clampedMainSize}px` : el.style.height || '100%';\n        resizableRef.current?.updateSize({ height, width });\n\n        return { height, width };\n      },\n      [\n        isVertical,\n        normalizedMaxHeight,\n        normalizedMaxWidth,\n        normalizedMinHeight,\n        normalizedMinWidth,\n      ],\n    );\n\n    const handleResize = useCallback(\n      (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n        const nextSize = clampResizeSize(el);\n        if (stableLayout && outerRef.current) {\n          // Sync outer DOM width immediately so it doesn't lag behind the\n          // re-resizable inline style (which would otherwise trigger a 0.2s\n          // width transition on the outer/aside each frame during drag).\n          const dimension = isVertical ? nextSize.height : nextSize.width;\n          if (dimension) {\n            if (isVertical) outerRef.current.style.height = dimension;\n            else outerRef.current.style.width = dimension;\n          }\n        }\n        setExpandedMainSize(nextSize);\n        onSizeDragging?.(delta, nextSize);\n      },\n      [clampResizeSize, isVertical, onSizeDragging, setExpandedMainSize, stableLayout],\n    );\n\n    const triggerResetWithoutTransition = useCallback(() => {\n      if (resetTransitionTimeoutRef.current) {\n        clearTimeout(resetTransitionTimeoutRef.current);\n      }\n\n      setShouldTransition(false);\n      resetTransitionTimeoutRef.current = setTimeout(() => {\n        setShouldTransition(true);\n      }, 0);\n    }, []);\n\n    const handleResetSize = useCallback(() => {\n      if (!canResizing) return;\n\n      const resetSize = captureInitialExpandedSize();\n      if (!resetSize) return;\n\n      triggerResetWithoutTransition();\n\n      const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n      const prevMainSize = rect ? (isVertical ? rect.height : rect.width) : 0;\n      const resetMainSize = isVertical ? resetSize.height : resetSize.width;\n      const nextMainSize = typeof resetMainSize === 'number' ? resetMainSize : prevMainSize;\n\n      resizableRef.current?.updateSize(resetSize);\n      setExpandedMainSize(resetSize);\n\n      onSizeChange?.(\n        isVertical\n          ? { height: nextMainSize - prevMainSize, width: 0 }\n          : { height: 0, width: nextMainSize - prevMainSize },\n        resetSize,\n      );\n    }, [\n      canResizing,\n      captureInitialExpandedSize,\n      isVertical,\n      onSizeChange,\n      setExpandedMainSize,\n      triggerResetWithoutTransition,\n    ]);\n\n    const handleResizeStart = useCallback(\n      (event: { detail?: number }) => {\n        if (event.detail === 2) {\n          handleResetSize();\n          return false;\n        }\n\n        if (resetTransitionTimeoutRef.current) {\n          clearTimeout(resetTransitionTimeoutRef.current);\n          resetTransitionTimeoutRef.current = undefined;\n        }\n\n        // Synchronously disable the outer transition so the first drag frame\n        // does not animate. `setShouldTransition(false)` below is asynchronous\n        // and would only take effect after the next React commit.\n        if (stableLayout && outerRef.current) {\n          outerRef.current.style.transition = 'none';\n        }\n        setShouldTransition(false);\n        setShowExpand(false);\n      },\n      [handleResetSize, stableLayout],\n    );\n\n    const handleResizeStop = useCallback(\n      (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n        const nextSize = clampResizeSize(el);\n        setExpandedMainSize(nextSize);\n        setShouldTransition(true);\n        setShowExpand(true);\n        // Clear imperative inline overrides so React resumes owning the outer\n        // width/transition on the next render.\n        if (stableLayout && outerRef.current) {\n          outerRef.current.style.removeProperty('width');\n          outerRef.current.style.removeProperty('height');\n          outerRef.current.style.removeProperty('transition');\n        }\n        onSizeChange?.(delta, nextSize);\n      },\n      [clampResizeSize, onSizeChange, setExpandedMainSize, stableLayout],\n    );\n\n    const resizeHandleClassName = useMemo(\n      () =>\n        cx(handleVariants({ placement: reversed }), showHandleHighlight && styles.handleHighlight),\n      [reversed, showHandleHighlight],\n    );\n\n    if (fullscreen) {\n      return (\n        <div className={cx(styles.fullscreen, className)} style={cssVariables}>\n          {children}\n        </div>\n      );\n    }\n\n    const Arrow = ARROW_MAP[internalPlacement] ?? ChevronLeft;\n    const stableOuterFlex = stableLayout\n      ? ({\n          display: 'flex',\n          flexDirection: 'column',\n          minHeight: 0,\n        } as const)\n      : {};\n\n    const sidebarOuterStyle = isVertical\n      ? {\n          height: isExpand ? expandedOuterSize : 0,\n          overflow: 'hidden',\n          transition: shouldTransition ? 'height 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n          width: '100%',\n          ...stableOuterFlex,\n        }\n      : {\n          overflow: 'hidden',\n          transition: shouldTransition ? 'width 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n          width: isExpand ? expandedOuterSize : 0,\n          ...(stableLayout\n            ? {\n                ...stableOuterFlex,\n                flex: 1,\n                minWidth: 0,\n                height: '100%',\n              }\n            : {}),\n        };\n\n    const stableInnerStyle: CSSProperties = {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      height: '100%',\n      minHeight: 0,\n      minWidth: 0,\n      width: '100%',\n    };\n    const sidebarInnerStyle: CSSProperties = stableLayout\n      ? stableInnerStyle\n      : isVertical\n        ? { height: '100%', width: '100%' }\n        : { width: '100%' };\n\n    const stableAsideStyle: CSSProperties = stableLayout\n      ? {\n          display: 'flex',\n          flexDirection: 'column',\n          minHeight: 0,\n          ...(mode === 'fixed' ? { height: '100%' } : {}),\n        }\n      : {};\n\n    const stableResizableStyle: CSSProperties = {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      height: '100%',\n      minHeight: 0,\n      minWidth: 0,\n      width: '100%',\n    };\n\n    const panelNode = (!destroyOnClose || isExpand) && (\n      <Resizable\n        ref={resizableRef}\n        {...sizeProps}\n        className={cx(styles.panel, classNames?.content)}\n        enable={canResizing ? (resizing as Enable) : DISABLED_RESIZING}\n        handleClasses={\n          canResizing\n            ? {\n                [reversed]: resizeHandleClassName,\n              }\n            : {}\n        }\n        style={{\n          ...cssVariables,\n          transition: shouldTransition ? undefined : 'none',\n          ...(stableLayout ? stableResizableStyle : {}),\n          ...style,\n        }}\n        onResize={handleResize}\n        onResizeStart={handleResizeStart}\n        onResizeStop={handleResizeStop}\n      >\n        {stableLayout ? <div style={sidebarInnerStyle}>{children}</div> : children}\n      </Resizable>\n    );\n\n    return (\n      <aside\n        dir={dir}\n        ref={ref}\n        style={{ ...cssVariables, ...stableAsideStyle }}\n        className={cx(\n          panelVariants({ isExpand, mode, placement: internalPlacement, showBorder }),\n          className,\n        )}\n      >\n        {expandable && showExpand && (\n          <Center\n            className={toggleVariants({ placement: internalPlacement, showHandleWideArea })}\n            style={{\n              opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0,\n            }}\n          >\n            <Center\n              className={classNames?.handle}\n              style={customStyles?.handle}\n              onClick={toggleExpand}\n            >\n              <Icon\n                className={styles.handlerIcon}\n                icon={Arrow}\n                size={16}\n                style={{\n                  ...MARGIN_MAP[internalPlacement],\n                  transform: `rotate(${isExpand ? 180 : 0}deg)`,\n                  transition: 'transform 0.3s ease',\n                }}\n              />\n            </Center>\n          </Center>\n        )}\n        {stableLayout ? (\n          <div ref={outerRef} style={sidebarOuterStyle}>\n            {panelNode}\n          </div>\n        ) : (\n          panelNode\n        )}\n      </aside>\n    );\n  },\n  isEqual,\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":"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"}
+{"version":3,"file":"DraggablePanel.mjs","names":["useControlledState"],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { ConfigProvider } from 'antd';\nimport { cx } from 'antd-style';\nimport isEqual from 'fast-deep-equal';\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';\nimport type { Enable, NumberSize, Size } from 're-resizable';\nimport { Resizable } from 're-resizable';\nimport {\n  type CSSProperties,\n  memo,\n  startTransition,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { handleVariants, panelVariants, styles, toggleVariants } from './style';\nimport type { DraggablePanelProps } from './type';\nimport { isBelowCollapseThreshold, reversePlacement } from './utils';\n\nconst ARROW_MAP = {\n  bottom: ChevronUp,\n  left: ChevronRight,\n  right: ChevronLeft,\n  top: ChevronDown,\n} as const;\n\nconst MARGIN_MAP = {\n  bottom: { marginTop: 4 },\n  left: { marginRight: 4 },\n  right: { marginLeft: 4 },\n  top: { marginBottom: 4 },\n} as const;\n\nconst DISABLED_RESIZING: Enable = {\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\nconst toCssSize = (value: string | number | undefined, fallback: string) => {\n  if (typeof value === 'number') return `${Math.max(value, 0)}px`;\n  if (typeof value === 'string' && value.length > 0) return value;\n  return fallback;\n};\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n  ({\n    headerHeight = 0,\n    fullscreen,\n    maxHeight,\n    pin = true,\n    mode = 'fixed',\n    children,\n    placement = 'right',\n    resize,\n    style,\n    showBorder = true,\n    showHandleHighlight = false,\n    showHandleWideArea = true,\n    backgroundColor,\n    collapseThreshold,\n    size,\n    stableLayout = false,\n    defaultSize: customizeDefaultSize,\n    minWidth,\n    minHeight,\n    maxWidth,\n    onSizeChange,\n    onSizeDragging,\n    expandable = true,\n    expand,\n    defaultExpand = true,\n    onExpandChange,\n    className,\n    showHandleWhenCollapsed,\n    destroyOnClose,\n    styles: customStyles,\n    classNames,\n    dir,\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n    const isVertical = placement === 'top' || placement === 'bottom';\n    const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n    const resetTransitionTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n    const resizableRef = useRef<Resizable>(null);\n    const initialExpandedSizeRef = useRef<Size | undefined>(undefined);\n    const resizeStartSizeRef = useRef<Size | undefined>(undefined);\n    const outerRef = useRef<HTMLDivElement>(null);\n\n    const { direction: antdDirection } = use(ConfigProvider.ConfigContext);\n    const direction = dir ?? antdDirection;\n\n    const internalPlacement = useMemo(() => {\n      if (direction !== 'rtl') return placement;\n      if (placement === 'left') return 'right';\n      if (placement === 'right') return 'left';\n      return placement;\n    }, [direction, placement]);\n\n    const cssVariables = {\n      '--draggable-panel-bg': backgroundColor || '',\n      '--draggable-panel-header-height': `${headerHeight}px`,\n    } as Record<string, string>;\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    const [shouldTransition, setShouldTransition] = useState(true);\n    const [showExpand, setShowExpand] = useState(true);\n    const usesStableLayout = stableLayout || collapseThreshold !== undefined;\n\n    useEffect(() => {\n      if (pin) return;\n\n      if (hoverTimeoutRef.current) {\n        clearTimeout(hoverTimeoutRef.current);\n      }\n\n      if (isHovering && !isExpand) {\n        startTransition(() => setIsExpand(true));\n      } else if (!isHovering && isExpand) {\n        hoverTimeoutRef.current = setTimeout(() => {\n          startTransition(() => setIsExpand(false));\n        }, 150);\n      }\n    }, [pin, isHovering, isExpand, setIsExpand]);\n\n    useEffect(() => {\n      return () => {\n        if (hoverTimeoutRef.current) {\n          clearTimeout(hoverTimeoutRef.current);\n        }\n        if (resetTransitionTimeoutRef.current) {\n          clearTimeout(resetTransitionTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      initialExpandedSizeRef.current = undefined;\n    }, [internalPlacement]);\n\n    const reversed = reversePlacement(internalPlacement);\n    const canResizing = resize !== false && isExpand;\n\n    const resizing = useMemo(\n      () => ({\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        [reversed]: true,\n        ...(resize as Enable),\n      }),\n      [reversed, resize],\n    );\n\n    const defaultSize: Size = useMemo(() => {\n      if (isVertical) return { height: 180, width: '100%', ...customizeDefaultSize };\n      return { height: '100%', width: 280, ...customizeDefaultSize };\n    }, [isVertical, customizeDefaultSize]);\n    const normalizedMaxHeight = typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : undefined;\n    const normalizedMaxWidth = typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : undefined;\n    const normalizedMinHeight = typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined;\n    const normalizedMinWidth = typeof minWidth === 'number' ? Math.max(minWidth, 0) : undefined;\n\n    const sizeProps = useMemo(() => {\n      if (!usesStableLayout && !isExpand) {\n        return isVertical\n          ? { minHeight: 0, size: { height: 0 } }\n          : { minWidth: 0, size: { width: 0 } };\n      }\n\n      return {\n        defaultSize,\n        maxHeight: normalizedMaxHeight,\n        maxWidth: normalizedMaxWidth,\n        minHeight: normalizedMinHeight,\n        minWidth: normalizedMinWidth,\n        size: size as Size,\n      };\n    }, [\n      usesStableLayout,\n      isExpand,\n      isVertical,\n      defaultSize,\n      normalizedMaxHeight,\n      normalizedMaxWidth,\n      normalizedMinHeight,\n      normalizedMinWidth,\n      size,\n    ]);\n\n    const fallbackExpandedSize = isVertical ? '180px' : '280px';\n    const controlledExpandedSize = useMemo(() => {\n      const controlledSize = isVertical ? size?.height : size?.width;\n      if (controlledSize === undefined) return undefined;\n      return toCssSize(controlledSize, fallbackExpandedSize);\n    }, [isVertical, size?.height, size?.width, fallbackExpandedSize]);\n    const defaultExpandedSize = useMemo(() => {\n      const initialSize = isVertical ? defaultSize.height : defaultSize.width;\n      return toCssSize(initialSize, fallbackExpandedSize);\n    }, [isVertical, defaultSize.height, defaultSize.width, fallbackExpandedSize]);\n    const [resizedExpandedSize, setResizedExpandedSize] = useState<{\n      horizontal?: string;\n      vertical?: string;\n    }>({});\n    const expandedOuterSize =\n      controlledExpandedSize ??\n      (isVertical ? resizedExpandedSize.vertical : resizedExpandedSize.horizontal) ??\n      defaultExpandedSize;\n\n    const setExpandedMainSize = useCallback(\n      (nextSize: Size) => {\n        if (!usesStableLayout) return;\n\n        const currentSize = isVertical ? nextSize.height : nextSize.width;\n        if (!currentSize) return;\n\n        const normalizedSize = toCssSize(currentSize, fallbackExpandedSize);\n        setResizedExpandedSize((state) =>\n          isVertical\n            ? { ...state, vertical: normalizedSize }\n            : { ...state, horizontal: normalizedSize },\n        );\n      },\n      [fallbackExpandedSize, isVertical, usesStableLayout],\n    );\n\n    const readCurrentSize = useCallback((): Size | undefined => {\n      const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n      if (!rect) return undefined;\n\n      return isVertical\n        ? { height: rect.height, width: '100%' }\n        : { height: '100%', width: rect.width };\n    }, [isVertical]);\n\n    const captureInitialExpandedSize = useCallback(() => {\n      if (initialExpandedSizeRef.current) return initialExpandedSizeRef.current;\n\n      const nextInitialSize = readCurrentSize();\n      if (!nextInitialSize) return undefined;\n\n      initialExpandedSizeRef.current = nextInitialSize;\n      return nextInitialSize;\n    }, [readCurrentSize]);\n\n    useEffect(() => {\n      if (!isExpand) return;\n      captureInitialExpandedSize();\n    }, [captureInitialExpandedSize, isExpand]);\n\n    const toggleExpand = useCallback(() => {\n      if (expandable) setIsExpand(!isExpand);\n    }, [expandable, isExpand, setIsExpand]);\n\n    const clampResizeSize = useCallback(\n      (el: HTMLElement) => {\n        const rect = el.getBoundingClientRect();\n        const currentMainSize = isVertical ? rect.height : rect.width;\n        const minMainSize = isVertical ? normalizedMinHeight : normalizedMinWidth;\n        const maxMainSize = isVertical ? normalizedMaxHeight : normalizedMaxWidth;\n\n        let clampedMainSize = currentMainSize;\n        if (typeof minMainSize === 'number')\n          clampedMainSize = Math.max(clampedMainSize, minMainSize);\n        if (typeof maxMainSize === 'number')\n          clampedMainSize = Math.min(clampedMainSize, maxMainSize);\n\n        if (\n          !Number.isFinite(clampedMainSize) ||\n          Math.abs(clampedMainSize - currentMainSize) < 0.5\n        ) {\n          return { height: el.style.height, width: el.style.width };\n        }\n\n        const width = isVertical ? el.style.width || '100%' : `${clampedMainSize}px`;\n        const height = isVertical ? `${clampedMainSize}px` : el.style.height || '100%';\n        resizableRef.current?.updateSize({ height, width });\n\n        return { height, width };\n      },\n      [\n        isVertical,\n        normalizedMaxHeight,\n        normalizedMaxWidth,\n        normalizedMinHeight,\n        normalizedMinWidth,\n      ],\n    );\n\n    const handleResize = useCallback(\n      (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n        const nextSize = clampResizeSize(el);\n        const nextCollapsePreview = isBelowCollapseThreshold({\n          axis: isVertical ? 'height' : 'width',\n          collapseThreshold,\n          size: nextSize,\n        });\n\n        if (usesStableLayout && outerRef.current) {\n          // Sync outer DOM width immediately so it doesn't lag behind the\n          // re-resizable inline style (which would otherwise trigger a 0.2s\n          // width transition on the outer/aside each frame during drag).\n          const dimension = isVertical ? nextSize.height : nextSize.width;\n          if (dimension) {\n            const previewDimension = nextCollapsePreview ? '0px' : dimension;\n            if (isVertical) outerRef.current.style.height = previewDimension;\n            else outerRef.current.style.width = previewDimension;\n          }\n        }\n        // With drag-to-collapse enabled, defer the persisted expanded size until\n        // pointer release. This keeps the pre-drag width as the single source of\n        // truth while the outer stable-layout layer previews collapse/restore.\n        if (collapseThreshold === undefined) setExpandedMainSize(nextSize);\n        onSizeDragging?.(delta, nextSize);\n      },\n      [\n        clampResizeSize,\n        collapseThreshold,\n        isVertical,\n        onSizeDragging,\n        setExpandedMainSize,\n        usesStableLayout,\n      ],\n    );\n\n    const triggerResetWithoutTransition = useCallback(() => {\n      if (resetTransitionTimeoutRef.current) {\n        clearTimeout(resetTransitionTimeoutRef.current);\n      }\n\n      setShouldTransition(false);\n      resetTransitionTimeoutRef.current = setTimeout(() => {\n        setShouldTransition(true);\n      }, 0);\n    }, []);\n\n    const handleResetSize = useCallback(() => {\n      if (!canResizing) return;\n\n      const resetSize = captureInitialExpandedSize();\n      if (!resetSize) return;\n\n      triggerResetWithoutTransition();\n\n      const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n      const prevMainSize = rect ? (isVertical ? rect.height : rect.width) : 0;\n      const resetMainSize = isVertical ? resetSize.height : resetSize.width;\n      const nextMainSize = typeof resetMainSize === 'number' ? resetMainSize : prevMainSize;\n\n      resizableRef.current?.updateSize(resetSize);\n      setExpandedMainSize(resetSize);\n\n      onSizeChange?.(\n        isVertical\n          ? { height: nextMainSize - prevMainSize, width: 0 }\n          : { height: 0, width: nextMainSize - prevMainSize },\n        resetSize,\n      );\n    }, [\n      canResizing,\n      captureInitialExpandedSize,\n      isVertical,\n      onSizeChange,\n      setExpandedMainSize,\n      triggerResetWithoutTransition,\n    ]);\n\n    const handleResizeStart = useCallback(\n      (event: { detail?: number }) => {\n        if (event.detail === 2) {\n          handleResetSize();\n          return false;\n        }\n\n        if (resetTransitionTimeoutRef.current) {\n          clearTimeout(resetTransitionTimeoutRef.current);\n          resetTransitionTimeoutRef.current = undefined;\n        }\n\n        resizeStartSizeRef.current = readCurrentSize();\n\n        // Synchronously disable the outer transition so the first drag frame\n        // does not animate. `setShouldTransition(false)` below is asynchronous\n        // and would only take effect after the next React commit.\n        if (usesStableLayout && outerRef.current) {\n          outerRef.current.style.transition = 'none';\n        }\n        setShouldTransition(false);\n        setShowExpand(false);\n      },\n      [handleResetSize, readCurrentSize, usesStableLayout],\n    );\n\n    const handleResizeStop = useCallback(\n      (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n        const nextSize = clampResizeSize(el);\n        const shouldCollapse = isBelowCollapseThreshold({\n          axis: isVertical ? 'height' : 'width',\n          collapseThreshold,\n          size: nextSize,\n        });\n        const committedSize = shouldCollapse ? (resizeStartSizeRef.current ?? nextSize) : nextSize;\n\n        resizableRef.current?.updateSize(committedSize);\n        if (!shouldCollapse) setExpandedMainSize(committedSize);\n        setShouldTransition(true);\n        setShowExpand(true);\n        // Keep the collapsed main-axis size at zero until the controlled\n        // `expand=false` value arrives. Clearing it here would reveal the panel\n        // for one render between preview teardown and controlled-state commit.\n        if (usesStableLayout && outerRef.current) {\n          outerRef.current.style.removeProperty('transition');\n          if (shouldCollapse) {\n            if (isVertical) outerRef.current.style.height = '0px';\n            else outerRef.current.style.width = '0px';\n          } else {\n            outerRef.current.style.removeProperty('width');\n            outerRef.current.style.removeProperty('height');\n          }\n        }\n        if (shouldCollapse) setIsExpand(false);\n\n        resizeStartSizeRef.current = undefined;\n        onSizeChange?.(delta, committedSize);\n      },\n      [\n        clampResizeSize,\n        collapseThreshold,\n        isVertical,\n        onSizeChange,\n        setExpandedMainSize,\n        setIsExpand,\n        usesStableLayout,\n      ],\n    );\n\n    const resizeHandleClassName = useMemo(\n      () =>\n        cx(handleVariants({ placement: reversed }), showHandleHighlight && styles.handleHighlight),\n      [reversed, showHandleHighlight],\n    );\n\n    if (fullscreen) {\n      return (\n        <div className={cx(styles.fullscreen, className)} style={cssVariables}>\n          {children}\n        </div>\n      );\n    }\n\n    const Arrow = ARROW_MAP[internalPlacement] ?? ChevronLeft;\n    const stableOuterFlex = usesStableLayout\n      ? ({\n          display: 'flex',\n          flexDirection: 'column',\n          minHeight: 0,\n        } as const)\n      : {};\n\n    const sidebarOuterStyle = isVertical\n      ? {\n          height: isExpand ? expandedOuterSize : 0,\n          overflow: 'hidden',\n          transition: shouldTransition ? 'height 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n          width: '100%',\n          ...stableOuterFlex,\n        }\n      : {\n          overflow: 'hidden',\n          transition: shouldTransition ? 'width 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n          width: isExpand ? expandedOuterSize : 0,\n          ...(usesStableLayout\n            ? {\n                ...stableOuterFlex,\n                flex: 1,\n                minWidth: 0,\n                height: '100%',\n              }\n            : {}),\n        };\n\n    const stableInnerStyle: CSSProperties = {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      height: '100%',\n      minHeight: 0,\n      minWidth: 0,\n      width: '100%',\n    };\n    const sidebarInnerStyle: CSSProperties = usesStableLayout\n      ? stableInnerStyle\n      : isVertical\n        ? { height: '100%', width: '100%' }\n        : { width: '100%' };\n\n    const stableAsideStyle: CSSProperties = usesStableLayout\n      ? {\n          display: 'flex',\n          flexDirection: 'column',\n          minHeight: 0,\n          ...(mode === 'fixed' ? { height: '100%' } : {}),\n        }\n      : {};\n\n    const stableResizableStyle: CSSProperties = {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      height: '100%',\n      minHeight: 0,\n      minWidth: 0,\n      width: '100%',\n    };\n\n    const panelNode = (!destroyOnClose || isExpand) && (\n      <Resizable\n        ref={resizableRef}\n        {...sizeProps}\n        className={cx(styles.panel, classNames?.content)}\n        enable={canResizing ? (resizing as Enable) : DISABLED_RESIZING}\n        handleClasses={\n          canResizing\n            ? {\n                [reversed]: resizeHandleClassName,\n              }\n            : {}\n        }\n        style={{\n          ...cssVariables,\n          transition: shouldTransition ? undefined : 'none',\n          ...(usesStableLayout ? stableResizableStyle : {}),\n          ...style,\n        }}\n        onResize={handleResize}\n        onResizeStart={handleResizeStart}\n        onResizeStop={handleResizeStop}\n      >\n        {usesStableLayout ? <div style={sidebarInnerStyle}>{children}</div> : children}\n      </Resizable>\n    );\n\n    return (\n      <aside\n        dir={dir}\n        ref={ref}\n        style={{ ...cssVariables, ...stableAsideStyle }}\n        className={cx(\n          panelVariants({ isExpand, mode, placement: internalPlacement, showBorder }),\n          className,\n        )}\n      >\n        {expandable && showExpand && (\n          <Center\n            className={toggleVariants({ placement: internalPlacement, showHandleWideArea })}\n            style={{\n              opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0,\n            }}\n          >\n            <Center\n              className={classNames?.handle}\n              style={customStyles?.handle}\n              onClick={toggleExpand}\n            >\n              <Icon\n                className={styles.handlerIcon}\n                icon={Arrow}\n                size={16}\n                style={{\n                  ...MARGIN_MAP[internalPlacement],\n                  transform: `rotate(${isExpand ? 180 : 0}deg)`,\n                  transition: 'transform 0.3s ease',\n                }}\n              />\n            </Center>\n          </Center>\n        )}\n        {usesStableLayout ? (\n          <div ref={outerRef} style={sidebarOuterStyle}>\n            {panelNode}\n          </div>\n        ) : (\n          panelNode\n        )}\n      </aside>\n    );\n  },\n  isEqual,\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,YAAY;CAChB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAEA,MAAM,aAAa;CACjB,QAAQ,EAAE,WAAW,EAAE;CACvB,MAAM,EAAE,aAAa,EAAE;CACvB,OAAO,EAAE,YAAY,EAAE;CACvB,KAAK,EAAE,cAAc,EAAE;AACzB;AAEA,MAAM,oBAA4B;CAChC,QAAQ;CACR,YAAY;CACZ,aAAa;CACb,MAAM;CACN,OAAO;CACP,KAAK;CACL,SAAS;CACT,UAAU;AACZ;AAEA,MAAM,aAAa,OAAoC,aAAqB;CAC1E,IAAI,OAAO,UAAU,UAAU,OAAO,GAAG,KAAK,IAAI,OAAO,CAAC,EAAE;CAC5D,IAAI,OAAO,UAAU,YAAY,MAAM,SAAS,GAAG,OAAO;CAC1D,OAAO;AACT;AAEA,MAAM,iBAAiB,MACpB,EACC,eAAe,GACf,YACA,WACA,MAAM,MACN,OAAO,SACP,UACA,YAAY,SACZ,QACA,OACA,aAAa,MACb,sBAAsB,OACtB,qBAAqB,MACrB,iBACA,mBACA,MACA,eAAe,OACf,aAAa,sBACb,UACA,WACA,UACA,cACA,gBACA,aAAa,MACb,QACA,gBAAgB,MAChB,gBACA,WACA,yBACA,gBACA,QAAQ,cACR,YACA,UACI;CACJ,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,aAAa,SAAS,GAAG;CAC/B,MAAM,aAAa,cAAc,SAAS,cAAc;CACxD,MAAM,kBAAkB,OAAsC,KAAA,CAAS;CACvE,MAAM,4BAA4B,OAAsC,KAAA,CAAS;CACjF,MAAM,eAAe,OAAkB,IAAI;CAC3C,MAAM,yBAAyB,OAAyB,KAAA,CAAS;CACjE,MAAM,qBAAqB,OAAyB,KAAA,CAAS;CAC7D,MAAM,WAAW,OAAuB,IAAI;CAE5C,MAAM,EAAE,WAAW,kBAAkB,IAAI,eAAe,aAAa;CACrE,MAAM,YAAY,OAAO;CAEzB,MAAM,oBAAoB,cAAc;EACtC,IAAI,cAAc,OAAO,OAAO;EAChC,IAAI,cAAc,QAAQ,OAAO;EACjC,IAAI,cAAc,SAAS,OAAO;EAClC,OAAO;CACT,GAAG,CAAC,WAAW,SAAS,CAAC;CAEzB,MAAM,eAAe;EACnB,wBAAwB,mBAAmB;EAC3C,mCAAmC,GAAG,aAAa;CACrD;CAEA,MAAM,CAAC,UAAU,eAAeA,cAAmB,eAAe;EAChE,UAAU;EACV,OAAO;CACT,CAAC;CAED,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,IAAI;CAC7D,MAAM,CAAC,YAAY,iBAAiB,SAAS,IAAI;CACjD,MAAM,mBAAmB,gBAAgB,sBAAsB,KAAA;CAE/D,gBAAgB;EACd,IAAI,KAAK;EAET,IAAI,gBAAgB,SAClB,aAAa,gBAAgB,OAAO;EAGtC,IAAI,cAAc,CAAC,UACjB,sBAAsB,YAAY,IAAI,CAAC;OAClC,IAAI,CAAC,cAAc,UACxB,gBAAgB,UAAU,iBAAiB;GACzC,sBAAsB,YAAY,KAAK,CAAC;EAC1C,GAAG,GAAG;CAEV,GAAG;EAAC;EAAK;EAAY;EAAU;CAAW,CAAC;CAE3C,gBAAgB;EACd,aAAa;GACX,IAAI,gBAAgB,SAClB,aAAa,gBAAgB,OAAO;GAEtC,IAAI,0BAA0B,SAC5B,aAAa,0BAA0B,OAAO;EAElD;CACF,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,uBAAuB,UAAU,KAAA;CACnC,GAAG,CAAC,iBAAiB,CAAC;CAEtB,MAAM,WAAW,iBAAiB,iBAAiB;CACnD,MAAM,cAAc,WAAW,SAAS;CAExC,MAAM,WAAW,eACR;EACL,QAAQ;EACR,YAAY;EACZ,aAAa;EACb,MAAM;EACN,OAAO;EACP,KAAK;EACL,SAAS;EACT,UAAU;GACT,WAAW;EACZ,GAAI;CACN,IACA,CAAC,UAAU,MAAM,CACnB;CAEA,MAAM,cAAoB,cAAc;EACtC,IAAI,YAAY,OAAO;GAAE,QAAQ;GAAK,OAAO;GAAQ,GAAG;EAAqB;EAC7E,OAAO;GAAE,QAAQ;GAAQ,OAAO;GAAK,GAAG;EAAqB;CAC/D,GAAG,CAAC,YAAY,oBAAoB,CAAC;CACrC,MAAM,sBAAsB,OAAO,cAAc,WAAW,KAAK,IAAI,WAAW,CAAC,IAAI,KAAA;CACrF,MAAM,qBAAqB,OAAO,aAAa,WAAW,KAAK,IAAI,UAAU,CAAC,IAAI,KAAA;CAClF,MAAM,sBAAsB,OAAO,cAAc,WAAW,KAAK,IAAI,WAAW,CAAC,IAAI,KAAA;CACrF,MAAM,qBAAqB,OAAO,aAAa,WAAW,KAAK,IAAI,UAAU,CAAC,IAAI,KAAA;CAElF,MAAM,YAAY,cAAc;EAC9B,IAAI,CAAC,oBAAoB,CAAC,UACxB,OAAO,aACH;GAAE,WAAW;GAAG,MAAM,EAAE,QAAQ,EAAE;EAAE,IACpC;GAAE,UAAU;GAAG,MAAM,EAAE,OAAO,EAAE;EAAE;EAGxC,OAAO;GACL;GACA,WAAW;GACX,UAAU;GACV,WAAW;GACX,UAAU;GACJ;EACR;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,uBAAuB,aAAa,UAAU;CACpD,MAAM,yBAAyB,cAAc;EAC3C,MAAM,iBAAiB,aAAa,MAAM,SAAS,MAAM;EACzD,IAAI,mBAAmB,KAAA,GAAW,OAAO,KAAA;EACzC,OAAO,UAAU,gBAAgB,oBAAoB;CACvD,GAAG;EAAC;EAAY,MAAM;EAAQ,MAAM;EAAO;CAAoB,CAAC;CAChE,MAAM,sBAAsB,cAAc;EACxC,MAAM,cAAc,aAAa,YAAY,SAAS,YAAY;EAClE,OAAO,UAAU,aAAa,oBAAoB;CACpD,GAAG;EAAC;EAAY,YAAY;EAAQ,YAAY;EAAO;CAAoB,CAAC;CAC5E,MAAM,CAAC,qBAAqB,0BAA0B,SAGnD,CAAC,CAAC;CACL,MAAM,oBACJ,2BACC,aAAa,oBAAoB,WAAW,oBAAoB,eACjE;CAEF,MAAM,sBAAsB,aACzB,aAAmB;EAClB,IAAI,CAAC,kBAAkB;EAEvB,MAAM,cAAc,aAAa,SAAS,SAAS,SAAS;EAC5D,IAAI,CAAC,aAAa;EAElB,MAAM,iBAAiB,UAAU,aAAa,oBAAoB;EAClE,wBAAwB,UACtB,aACI;GAAE,GAAG;GAAO,UAAU;EAAe,IACrC;GAAE,GAAG;GAAO,YAAY;EAAe,CAC7C;CACF,GACA;EAAC;EAAsB;EAAY;CAAgB,CACrD;CAEA,MAAM,kBAAkB,kBAAoC;EAC1D,MAAM,OAAO,aAAa,SAAS,WAAW,sBAAsB;EACpE,IAAI,CAAC,MAAM,OAAO,KAAA;EAElB,OAAO,aACH;GAAE,QAAQ,KAAK;GAAQ,OAAO;EAAO,IACrC;GAAE,QAAQ;GAAQ,OAAO,KAAK;EAAM;CAC1C,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,6BAA6B,kBAAkB;EACnD,IAAI,uBAAuB,SAAS,OAAO,uBAAuB;EAElE,MAAM,kBAAkB,gBAAgB;EACxC,IAAI,CAAC,iBAAiB,OAAO,KAAA;EAE7B,uBAAuB,UAAU;EACjC,OAAO;CACT,GAAG,CAAC,eAAe,CAAC;CAEpB,gBAAgB;EACd,IAAI,CAAC,UAAU;EACf,2BAA2B;CAC7B,GAAG,CAAC,4BAA4B,QAAQ,CAAC;CAEzC,MAAM,eAAe,kBAAkB;EACrC,IAAI,YAAY,YAAY,CAAC,QAAQ;CACvC,GAAG;EAAC;EAAY;EAAU;CAAW,CAAC;CAEtC,MAAM,kBAAkB,aACrB,OAAoB;EACnB,MAAM,OAAO,GAAG,sBAAsB;EACtC,MAAM,kBAAkB,aAAa,KAAK,SAAS,KAAK;EACxD,MAAM,cAAc,aAAa,sBAAsB;EACvD,MAAM,cAAc,aAAa,sBAAsB;EAEvD,IAAI,kBAAkB;EACtB,IAAI,OAAO,gBAAgB,UACzB,kBAAkB,KAAK,IAAI,iBAAiB,WAAW;EACzD,IAAI,OAAO,gBAAgB,UACzB,kBAAkB,KAAK,IAAI,iBAAiB,WAAW;EAEzD,IACE,CAAC,OAAO,SAAS,eAAe,KAChC,KAAK,IAAI,kBAAkB,eAAe,IAAI,IAE9C,OAAO;GAAE,QAAQ,GAAG,MAAM;GAAQ,OAAO,GAAG,MAAM;EAAM;EAG1D,MAAM,QAAQ,aAAa,GAAG,MAAM,SAAS,SAAS,GAAG,gBAAgB;EACzE,MAAM,SAAS,aAAa,GAAG,gBAAgB,MAAM,GAAG,MAAM,UAAU;EACxE,aAAa,SAAS,WAAW;GAAE;GAAQ;EAAM,CAAC;EAElD,OAAO;GAAE;GAAQ;EAAM;CACzB,GACA;EACE;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,eAAe,aAClB,QAAiB,YAAqB,IAAiB,UAAsB;EAC5E,MAAM,WAAW,gBAAgB,EAAE;EACnC,MAAM,sBAAsB,yBAAyB;GACnD,MAAM,aAAa,WAAW;GAC9B;GACA,MAAM;EACR,CAAC;EAED,IAAI,oBAAoB,SAAS,SAAS;GAIxC,MAAM,YAAY,aAAa,SAAS,SAAS,SAAS;GAC1D,IAAI,WAAW;IACb,MAAM,mBAAmB,sBAAsB,QAAQ;IACvD,IAAI,YAAY,SAAS,QAAQ,MAAM,SAAS;SAC3C,SAAS,QAAQ,MAAM,QAAQ;GACtC;EACF;EAIA,IAAI,sBAAsB,KAAA,GAAW,oBAAoB,QAAQ;EACjE,iBAAiB,OAAO,QAAQ;CAClC,GACA;EACE;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,gCAAgC,kBAAkB;EACtD,IAAI,0BAA0B,SAC5B,aAAa,0BAA0B,OAAO;EAGhD,oBAAoB,KAAK;EACzB,0BAA0B,UAAU,iBAAiB;GACnD,oBAAoB,IAAI;EAC1B,GAAG,CAAC;CACN,GAAG,CAAC,CAAC;CAEL,MAAM,kBAAkB,kBAAkB;EACxC,IAAI,CAAC,aAAa;EAElB,MAAM,YAAY,2BAA2B;EAC7C,IAAI,CAAC,WAAW;EAEhB,8BAA8B;EAE9B,MAAM,OAAO,aAAa,SAAS,WAAW,sBAAsB;EACpE,MAAM,eAAe,OAAQ,aAAa,KAAK,SAAS,KAAK,QAAS;EACtE,MAAM,gBAAgB,aAAa,UAAU,SAAS,UAAU;EAChE,MAAM,eAAe,OAAO,kBAAkB,WAAW,gBAAgB;EAEzE,aAAa,SAAS,WAAW,SAAS;EAC1C,oBAAoB,SAAS;EAE7B,eACE,aACI;GAAE,QAAQ,eAAe;GAAc,OAAO;EAAE,IAChD;GAAE,QAAQ;GAAG,OAAO,eAAe;EAAa,GACpD,SACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,oBAAoB,aACvB,UAA+B;EAC9B,IAAI,MAAM,WAAW,GAAG;GACtB,gBAAgB;GAChB,OAAO;EACT;EAEA,IAAI,0BAA0B,SAAS;GACrC,aAAa,0BAA0B,OAAO;GAC9C,0BAA0B,UAAU,KAAA;EACtC;EAEA,mBAAmB,UAAU,gBAAgB;EAK7C,IAAI,oBAAoB,SAAS,SAC/B,SAAS,QAAQ,MAAM,aAAa;EAEtC,oBAAoB,KAAK;EACzB,cAAc,KAAK;CACrB,GACA;EAAC;EAAiB;EAAiB;CAAgB,CACrD;CAEA,MAAM,mBAAmB,aACtB,QAAiB,YAAqB,IAAiB,UAAsB;EAC5E,MAAM,WAAW,gBAAgB,EAAE;EACnC,MAAM,iBAAiB,yBAAyB;GAC9C,MAAM,aAAa,WAAW;GAC9B;GACA,MAAM;EACR,CAAC;EACD,MAAM,gBAAgB,iBAAkB,mBAAmB,WAAW,WAAY;EAElF,aAAa,SAAS,WAAW,aAAa;EAC9C,IAAI,CAAC,gBAAgB,oBAAoB,aAAa;EACtD,oBAAoB,IAAI;EACxB,cAAc,IAAI;EAIlB,IAAI,oBAAoB,SAAS,SAAS;GACxC,SAAS,QAAQ,MAAM,eAAe,YAAY;GAClD,IAAI,gBACF,IAAI,YAAY,SAAS,QAAQ,MAAM,SAAS;QAC3C,SAAS,QAAQ,MAAM,QAAQ;QAC/B;IACL,SAAS,QAAQ,MAAM,eAAe,OAAO;IAC7C,SAAS,QAAQ,MAAM,eAAe,QAAQ;GAChD;EACF;EACA,IAAI,gBAAgB,YAAY,KAAK;EAErC,mBAAmB,UAAU,KAAA;EAC7B,eAAe,OAAO,aAAa;CACrC,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,wBAAwB,cAE1B,GAAG,eAAe,EAAE,WAAW,SAAS,CAAC,GAAG,uBAAuB,OAAO,eAAe,GAC3F,CAAC,UAAU,mBAAmB,CAChC;CAEA,IAAI,YACF,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,YAAY,SAAS;EAAG,OAAO;EACtD;CACE,CAAA;CAIT,MAAM,QAAQ,UAAU,sBAAsB;CAC9C,MAAM,kBAAkB,mBACnB;EACC,SAAS;EACT,eAAe;EACf,WAAW;CACb,IACA,CAAC;CAEL,MAAM,oBAAoB,aACtB;EACE,QAAQ,WAAW,oBAAoB;EACvC,UAAU;EACV,YAAY,mBAAmB,iDAAiD;EAChF,OAAO;EACP,GAAG;CACL,IACA;EACE,UAAU;EACV,YAAY,mBAAmB,gDAAgD;EAC/E,OAAO,WAAW,oBAAoB;EACtC,GAAI,mBACA;GACE,GAAG;GACH,MAAM;GACN,UAAU;GACV,QAAQ;EACV,IACA,CAAC;CACP;CAWJ,MAAM,oBAAmC,mBACrC;EATF,SAAS;EACT,MAAM;EACN,eAAe;EACf,QAAQ;EACR,WAAW;EACX,UAAU;EACV,OAAO;CAGU,IACf,aACE;EAAE,QAAQ;EAAQ,OAAO;CAAO,IAChC,EAAE,OAAO,OAAO;CAEtB,MAAM,mBAAkC,mBACpC;EACE,SAAS;EACT,eAAe;EACf,WAAW;EACX,GAAI,SAAS,UAAU,EAAE,QAAQ,OAAO,IAAI,CAAC;CAC/C,IACA,CAAC;CAEL,MAAM,uBAAsC;EAC1C,SAAS;EACT,MAAM;EACN,eAAe;EACf,QAAQ;EACR,WAAW;EACX,UAAU;EACV,OAAO;CACT;CAEA,MAAM,aAAa,CAAC,kBAAkB,aACpC,oBAAC,WAAD;EACE,KAAK;EACL,GAAI;EACJ,WAAW,GAAG,OAAO,OAAO,YAAY,OAAO;EAC/C,QAAQ,cAAe,WAAsB;EAC7C,eACE,cACI,GACG,WAAW,sBACd,IACA,CAAC;EAEP,OAAO;GACL,GAAG;GACH,YAAY,mBAAmB,KAAA,IAAY;GAC3C,GAAI,mBAAmB,uBAAuB,CAAC;GAC/C,GAAG;EACL;EACA,UAAU;EACV,eAAe;EACf,cAAc;YAEb,mBAAmB,oBAAC,OAAD;GAAK,OAAO;GAAoB;EAAc,CAAA,IAAI;CAC7D,CAAA;CAGb,OACE,qBAAC,SAAD;EACO;EACA;EACL,OAAO;GAAE,GAAG;GAAc,GAAG;EAAiB;EAC9C,WAAW,GACT,cAAc;GAAE;GAAU;GAAM,WAAW;GAAmB;EAAW,CAAC,GAC1E,SACF;YAPF,CASG,cAAc,cACb,oBAAC,QAAD;GACE,WAAW,eAAe;IAAE,WAAW;IAAmB;GAAmB,CAAC;GAC9E,OAAO,EACL,SAAS,WAAY,MAAM,KAAA,IAAY,IAAK,0BAA0B,IAAI,EAC5E;aAEA,oBAAC,QAAD;IACE,WAAW,YAAY;IACvB,OAAO,cAAc;IACrB,SAAS;cAET,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,MAAM;KACN,MAAM;KACN,OAAO;MACL,GAAG,WAAW;MACd,WAAW,UAAU,WAAW,MAAM,EAAE;MACxC,YAAY;KACd;IACD,CAAA;GACK,CAAA;EACF,CAAA,GAET,mBACC,oBAAC,OAAD;GAAK,KAAK;GAAU,OAAO;aACxB;EACE,CAAA,IAEL,SAEG;;AAEX,GACA,OACF;AAEA,eAAe,cAAc"}

package/es/DraggablePanel/type.d.mts

@@ -10,6 +10,14 @@ interface DraggablePanelProps extends DivProps {
     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;

package/es/DraggablePanel/utils.mjs

@@ -1,4 +1,11 @@
 //#region src/DraggablePanel/utils.ts
+const isBelowCollapseThreshold = ({ axis, collapseThreshold, size }) => {
+	if (collapseThreshold === void 0) return false;
+	const currentSize = size[axis];
+	if (currentSize === void 0) return false;
+	const numericSize = typeof currentSize === "number" ? currentSize : Number.parseFloat(currentSize);
+	return Number.isFinite(numericSize) && numericSize <= Math.max(collapseThreshold, 0);
+};
 const reversePlacement = (placement) => {
 	switch (placement) {
 		case "bottom": return "top";
@@ -8,6 +15,6 @@ const reversePlacement = (placement) => {
 	}
 };
 //#endregion
-export { reversePlacement };
+export { isBelowCollapseThreshold, reversePlacement };
 
 //# sourceMappingURL=utils.mjs.map

package/es/DraggablePanel/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/DraggablePanel/utils.ts"],"sourcesContent":["import type { DraggablePanelProps } from './type';\n\nexport const reversePlacement = (placement: DraggablePanelProps['placement']) => {\n  switch (placement) {\n    case 'bottom': {\n      return 'top';\n    }\n    case 'top': {\n      return 'bottom';\n    }\n    case 'right': {\n      return 'left';\n    }\n    case 'left': {\n      return 'right';\n    }\n  }\n};\n"],"mappings":";AAEA,MAAa,oBAAoB,cAAgD;CAC/E,QAAQ,WAAR;EACE,KAAK,UACH,OAAO;EAET,KAAK,OACH,OAAO;EAET,KAAK,SACH,OAAO;EAET,KAAK,QACH,OAAO;CAEX;AACF"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/DraggablePanel/utils.ts"],"sourcesContent":["import type { Size } from 're-resizable';\n\nimport type { DraggablePanelProps } from './type';\n\ninterface IsBelowCollapseThresholdOptions {\n  axis: 'height' | 'width';\n  collapseThreshold?: number;\n  size: Size;\n}\n\nexport const isBelowCollapseThreshold = ({\n  axis,\n  collapseThreshold,\n  size,\n}: IsBelowCollapseThresholdOptions): boolean => {\n  if (collapseThreshold === undefined) return false;\n\n  const currentSize = size[axis];\n  if (currentSize === undefined) return false;\n\n  const numericSize =\n    typeof currentSize === 'number' ? currentSize : Number.parseFloat(currentSize);\n\n  return Number.isFinite(numericSize) && numericSize <= Math.max(collapseThreshold, 0);\n};\n\nexport const reversePlacement = (placement: DraggablePanelProps['placement']) => {\n  switch (placement) {\n    case 'bottom': {\n      return 'top';\n    }\n    case 'top': {\n      return 'bottom';\n    }\n    case 'right': {\n      return 'left';\n    }\n    case 'left': {\n      return 'right';\n    }\n  }\n};\n"],"mappings":";AAUA,MAAa,4BAA4B,EACvC,MACA,mBACA,WAC8C;CAC9C,IAAI,sBAAsB,KAAA,GAAW,OAAO;CAE5C,MAAM,cAAc,KAAK;CACzB,IAAI,gBAAgB,KAAA,GAAW,OAAO;CAEtC,MAAM,cACJ,OAAO,gBAAgB,WAAW,cAAc,OAAO,WAAW,WAAW;CAE/E,OAAO,OAAO,SAAS,WAAW,KAAK,eAAe,KAAK,IAAI,mBAAmB,CAAC;AACrF;AAEA,MAAa,oBAAoB,cAAgD;CAC/E,QAAQ,WAAR;EACE,KAAK,UACH,OAAO;EAET,KAAK,OACH,OAAO;EAET,KAAK,SACH,OAAO;EAET,KAAK,QACH,OAAO;CAEX;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.23.1",
+  "version": "5.23.3",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",