@lobehub/ui 5.9.3 → 5.9.5

package/es/DraggablePanel/DraggablePanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggablePanel.mjs","names":[],"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\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        setExpandedMainSize(nextSize);\n        onSizeDragging?.(delta, nextSize);\n      },\n      [clampResizeSize, onSizeDragging, setExpandedMainSize],\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        setShouldTransition(false);\n        setShowExpand(false);\n      },\n      [handleResetSize],\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        onSizeChange?.(delta, nextSize);\n      },\n      [clampResizeSize, onSizeChange, setExpandedMainSize],\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 ? <div style={sidebarOuterStyle}>{panelNode}</div> : panelNode}\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 { 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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"}

package/es/DraggablePanel/components/DraggablePanelHeader.mjs

@@ -5,12 +5,12 @@ import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import useControlledState from "use-merge-value";
+import useMergeState from "use-merge-value";
 import { PanelLeft, Pin, PinOff } from "lucide-react";
 //#region src/DraggablePanel/components/DraggablePanelHeader.tsx
 const DraggablePanelHeader = memo((props) => {
 	const { pin, setPin, className, setExpand, title, position = "left", ...rest } = props;
-	const [isPinned, setIsPinned] = useControlledState(false, {
+	const [isPinned, setIsPinned] = useMergeState(false, {
 		onChange: setPin,
 		value: pin
 	});

package/es/DraggablePanel/components/DraggablePanelHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggablePanelHeader.mjs","names":["Flexbox"],"sources":["../../../src/DraggablePanel/components/DraggablePanelHeader.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { PanelLeft, Pin, PinOff } from 'lucide-react';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { type DivProps } from '@/types';\n\nimport { styles } from './style';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {\n  pin?: boolean;\n  position?: 'left' | 'right';\n  setExpand?: (expand: boolean) => void;\n  setPin?: (pin: boolean) => void;\n  title?: string;\n}\n\nconst DraggablePanelHeader = memo<DraggablePanelHeaderProps>((props) => {\n  const { pin, setPin, className, setExpand, title, position = 'left', ...rest } = props;\n\n  const [isPinned, setIsPinned] = useControlledState(false, {\n    onChange: setPin,\n    value: pin,\n  });\n\n  const panelIcon = (\n    <ActionIcon icon={PanelLeft} size={'small'} onClick={() => setExpand?.(false)} />\n  );\n  const pinIcon = (\n    <ActionIcon\n      active={pin}\n      icon={pin ? Pin : PinOff}\n      size={'small'}\n      onClick={() => setIsPinned(!isPinned)}\n    />\n  );\n  return (\n    <Flexbox\n      horizontal\n      align={'center'}\n      className={cx(styles.header, className)}\n      flex={'none'}\n      gap={8}\n      justify={'space-between'}\n      {...rest}\n    >\n      {position === 'left' ? panelIcon : pinIcon}\n      {title}\n      {position === 'left' ? pinIcon : panelIcon}\n    </Flexbox>\n  );\n});\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n\nexport default DraggablePanelHeader;\n"],"mappings":";;;;;;;;;;AAqBA,MAAM,uBAAuB,MAAiC,UAAU;CACtE,MAAM,EAAE,KAAK,QAAQ,WAAW,WAAW,OAAO,WAAW,QAAQ,GAAG,SAAS;CAEjF,MAAM,CAAC,UAAU,eAAe,mBAAmB,OAAO;EACxD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,YACJ,oBAAC,YAAD;EAAY,MAAM;EAAW,MAAM;EAAS,eAAe,YAAY,MAAM;EAAI,CAAA;CAEnF,MAAM,UACJ,oBAAC,YAAD;EACE,QAAQ;EACR,MAAM,MAAM,MAAM;EAClB,MAAM;EACN,eAAe,YAAY,CAAC,SAAS;EACrC,CAAA;AAEJ,QACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,MAAM;EACN,KAAK;EACL,SAAS;EACT,GAAI;YAPN;GASG,aAAa,SAAS,YAAY;GAClC;GACA,aAAa,SAAS,UAAU;GACzB;;EAEZ;AAEF,qBAAqB,cAAc"}
+{"version":3,"file":"DraggablePanelHeader.mjs","names":["useControlledState","Flexbox"],"sources":["../../../src/DraggablePanel/components/DraggablePanelHeader.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { PanelLeft, Pin, PinOff } from 'lucide-react';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { type DivProps } from '@/types';\n\nimport { styles } from './style';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {\n  pin?: boolean;\n  position?: 'left' | 'right';\n  setExpand?: (expand: boolean) => void;\n  setPin?: (pin: boolean) => void;\n  title?: string;\n}\n\nconst DraggablePanelHeader = memo<DraggablePanelHeaderProps>((props) => {\n  const { pin, setPin, className, setExpand, title, position = 'left', ...rest } = props;\n\n  const [isPinned, setIsPinned] = useControlledState(false, {\n    onChange: setPin,\n    value: pin,\n  });\n\n  const panelIcon = (\n    <ActionIcon icon={PanelLeft} size={'small'} onClick={() => setExpand?.(false)} />\n  );\n  const pinIcon = (\n    <ActionIcon\n      active={pin}\n      icon={pin ? Pin : PinOff}\n      size={'small'}\n      onClick={() => setIsPinned(!isPinned)}\n    />\n  );\n  return (\n    <Flexbox\n      horizontal\n      align={'center'}\n      className={cx(styles.header, className)}\n      flex={'none'}\n      gap={8}\n      justify={'space-between'}\n      {...rest}\n    >\n      {position === 'left' ? panelIcon : pinIcon}\n      {title}\n      {position === 'left' ? pinIcon : panelIcon}\n    </Flexbox>\n  );\n});\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n\nexport default DraggablePanelHeader;\n"],"mappings":";;;;;;;;;;AAqBA,MAAM,uBAAuB,MAAiC,UAAU;CACtE,MAAM,EAAE,KAAK,QAAQ,WAAW,WAAW,OAAO,WAAW,QAAQ,GAAG,SAAS;CAEjF,MAAM,CAAC,UAAU,eAAeA,cAAmB,OAAO;EACxD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,YACJ,oBAAC,YAAD;EAAY,MAAM;EAAW,MAAM;EAAS,eAAe,YAAY,MAAM;EAAI,CAAA;CAEnF,MAAM,UACJ,oBAAC,YAAD;EACE,QAAQ;EACR,MAAM,MAAM,MAAM;EAClB,MAAM;EACN,eAAe,YAAY,CAAC,SAAS;EACrC,CAAA;AAEJ,QACE,qBAACC,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,MAAM;EACN,KAAK;EACL,SAAS;EACT,GAAI;YAPN;GASG,aAAa,SAAS,YAAY;GAClC;GACA,aAAa,SAAS,UAAU;GACzB;;EAEZ;AAEF,qBAAqB,cAAc"}

package/es/DraggableSideNav/DraggableSideNav.mjs

@@ -6,7 +6,7 @@ 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 useControlledState from "use-merge-value";
+import useMergeState from "use-merge-value";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useHover } from "ahooks";
 import { Resizable } from "re-resizable";
@@ -72,7 +72,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] = useControlledState(defaultExpand, {
+	const [isExpand, setIsExpand] = useMergeState(defaultExpand, {
 		onChange: onExpandChange,
 		value: expand
 	});

package/es/DraggableSideNav/DraggableSideNav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableSideNav.mjs","names":["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: maxWidth,\n        minWidth: 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":";;;;;;;;;;;;;AAuBA,MAAM,oBAAoB;AAC1B,MAAM,iBAAiB;AACvB,MAAM,yBAAyB;AAC/B,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AAGjC,MAAM,kBAAkB;CACtB,QAAQ;CACR,YAAY;CACZ,aAAa;CACb,MAAM;CACN,OAAO;CACP,KAAK;CACL,SAAS;CACT,UAAU;CACX;AAsBD,SAAS,eAAe,OAAqB,QAAqC;AAChF,SAAQ,OAAO,MAAf;EACE,KAAK,eACH,QAAO;GAAE,GAAG;GAAO,YAAY;GAAM;EAEvC,KAAK,cACH,QAAO;GAAE,GAAG;GAAO,YAAY;GAAO;EAExC,KAAK,kBACH,QAAO;GAAE,GAAG;GAAO,aAAa;GAAM;EAExC,KAAK,iBACH,QAAO;GAAE,GAAG;GAAO,aAAa;GAAO;EAEzC,KAAK,YACH,QAAO;GAAE,GAAG;GAAO,eAAe,OAAO;GAAS;EAEpD,KAAK,qBACH,QAAO;GAAE,GAAG;GAAO,eAAe,OAAO;GAAS;EAEpD,KAAK,oBACH,QAAO;GAAE,GAAG;GAAO,cAAc,OAAO;GAAS;EAEnD,KAAK,iBACH,QAAO;GAAE,GAAG;GAAO,eAAe,OAAO;GAAS,cAAc;GAAM;EAExE,KAAK,mBACH,QAAO;GAAE,GAAG;GAAO,eAAe,OAAO;GAAS;EAEpD,QACE,QAAO;;;AAKb,MAAM,mBAAmB,MACtB,EACC,MACA,WACA,YACA,gBAAgB,gBAChB,cACA,QACA,aAAa,MACb,QACA,QACA,UACA,WAAW,mBACX,gBACA,eACA,iBACA,YAAY,QACZ,YAAY,MACZ,aAAa,MACb,aAAa,MACb,0BAA0B,OAC1B,sBAAsB,OACtB,iBACA,QAAQ,cACR,OACA,GAAG,WACC;CACJ,MAAM,eAAe,eACZ,EACL,2BAA2B,mBAAmB,IAC/C,GACD,CAAC,gBAAgB,CAClB;CACD,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,aAAa,SAAS,IAAI;CAGhC,MAAM,CAAC,UAAU,eAAe,mBAAmB,eAAe;EAChE,UAAU;EACV,OAAO;EACR,CAAC;CAGF,MAAM,sBAAsB,OAAY,KAAA,EAAU;CAClD,MAAM,qBAAqB,OAAY,KAAA,EAAU;CAGjD,MAAM,+BAA+B,cAC7B,gBAAgB,wBACtB,CAAC,aAAa,CACf;CAWD,MAAM,CAAC,OAAO,YAAY,WAAW,gBARF;EACjC,eAAe,SAAS;EACxB,eAAe,WAAY,SAAS,+BAAgC;EACpE,aAAa;EACb,YAAY;EACZ,cAAc;EACf,CAEiE;CAGlE,MAAM,oBAAoB,cAAc;AACtC,SAAO,YAAY,MAAM,gBAAgB,YAAY;IACpD,CAAC,UAAU,MAAM,cAAc,CAAC;CAGnC,MAAM,eAAe,kBAAkB;AACrC,MAAI,CAAC,WAAY;AAGjB,MAAI,MAAM,eAAe,MAAM,WAAY;AAG3C,MAAI,oBAAoB,QACtB,cAAa,oBAAoB,QAAQ;AAI3C,WAAS,EAAE,MAAM,mBAAmB,CAAC;AACrC,cAAY,CAAC,SAAS;AAGtB,sBAAoB,UAAU,iBAAiB;AAC7C,YAAS,EAAE,MAAM,kBAAkB,CAAC;KACnC,mBAAmB;IACrB;EAAC;EAAY;EAAU;EAAa,MAAM;EAAa,MAAM;EAAW,CAAC;CAG5E,MAAM,gBAAgB,OAAO,SAAS;AAGtC,iBAAgB;AAEd,MAAI,cAAc,YAAY,YAAY,CAAC,MAAM,cAAc,CAAC,MAAM,aAAa;AACjF,OAAI,oBAAoB,QACtB,cAAa,oBAAoB,QAAQ;AAI3C,YAAS,EAAE,MAAM,mBAAmB,CAAC;AAErC,uBAAoB,UAAU,iBAAiB;AAC7C,aAAS,EAAE,MAAM,kBAAkB,CAAC;MACnC,mBAAmB;AAEtB,iBAAc,UAAU;;IAEzB;EAAC;EAAU,MAAM;EAAY,MAAM;EAAY,CAAC;AAGnD,iBAAgB;AACd,MAAI,MAAM,aAAa;GAErB,MAAM,QAAQ,4BAA4B;AACxC,QAAI,SAEF,UAAS;KAAE,SAAS,MAAM;KAAe,MAAM;KAAkB,CAAC;SAC7D;AAEL,cAAS;MAAE,SAAS;MAAU,MAAM;MAAoB,CAAC;AAEzD,SAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,wBAAmB,UAAU,iBAAiB;AAC5C,eAAS;OAAE,SAAS;OAAO,MAAM;OAAqB,CAAC;QACtD,yBAAyB;;KAE9B;AAEF,gBAAa;AACX,yBAAqB,MAAM;;;IAG9B;EAAC;EAAU,MAAM;EAAa;EAAU,MAAM;EAAc,CAAC;CAIhE,MAAM,oBAAoB,OAAO,MAAM,WAAW;AAClD,iBAAgB;EACd,MAAM,cAAc,kBAAkB;AACtC,oBAAkB,UAAU,MAAM;AAGlC,MAAI,eAAe,CAAC,MAAM,cAAc,CAAC,MAAM,YAC7C,UAAS;GAAE,SAAS;GAAU,MAAM;GAAqB,CAAC;IAE3D;EAAC;EAAU,MAAM;EAAa,MAAM;EAAW,CAAC;AAInD,iBAAgB;AACd,MAAI,UAAU,KAAA,KAAa,CAAC,MAAM,cAAc,CAAC,MAAM,aAAa;AAElE,YAAS;IAAE,SAAS;IAAO,MAAM;IAAsB,CAAC;AAExD,OAAI,SACF,UAAS;IAAE,SAAS;IAAO,MAAM;IAAa,CAAC;;IAIlD;EAAC;EAAO,MAAM;EAAY,MAAM;EAAa;EAAS,CAAC;CAG1D,MAAM,cAAc,cAAc;AAChC,SAAO,KAAK,MAAM,aAAa;IAC9B,CAAC,MAAM,MAAM,aAAa,CAAC;CAG9B,MAAM,gBAAgB,cAAc;AAClC,SAAO,OAAO,WAAW,aAAa,OAAO,MAAM,aAAa,GAAG;IAClE,CAAC,QAAQ,MAAM,aAAa,CAAC;CAGhC,MAAM,gBAAgB,cAAc;AAClC,SAAO,OAAO,WAAW,aAAa,OAAO,MAAM,aAAa,GAAG;IAClE,CAAC,QAAQ,MAAM,aAAa,CAAC;CAGhC,MAAM,eAA+B,aAClC,GAAG,IAAI,KAAK,UAAU;EACrB,MAAM,eAAe,IAAI;AACzB,WAAS;GAAE,SAAS;GAAc,MAAM;GAAa,CAAC;AAEtD,oBAAkB,OAAO,aAAa;IAExC,CAAC,gBAAgB,CAClB;CAED,MAAM,oBAAoB,kBAAkB;AAC1C,WAAS,EAAE,MAAM,gBAAgB,CAAC;IACjC,EAAE,CAAC;CAEN,MAAM,mBAAmC,aACtC,GAAG,IAAI,KAAK,UAAU;AACrB,WAAS,EAAE,MAAM,eAAe,CAAC;EAEjC,MAAM,eAAe,IAAI;AAGzB,MAAI,oBAAoB,QACtB,cAAa,oBAAoB,QAAQ;AAI3C,MAAI,YAAY;GACd,MAAM,iBAAiB,gBAAgB,YAAY,eAAe;AAIlE,OAAI,kBAFF,CAAC,YAAY,eAAe,YAAY,gBAAgB,mBAEtB;AAElC,aAAS,EAAE,MAAM,mBAAmB,CAAC;AAErC,QAAI,gBAAgB;AAClB,iBAAY,MAAM;AAClB,cAAS;MAAE,SAAS;MAAU,MAAM;MAAa,CAAC;WAC7C;AACL,iBAAY,KAAK;AACjB,cAAS;MAAE,SAAS;MAAc,MAAM;MAAsB,CAAC;AAC/D,cAAS;MAAE,SAAS;MAAc,MAAM;MAAa,CAAC;;AAGxD,wBAAoB,UAAU,iBAAiB;AAC7C,cAAS,EAAE,MAAM,kBAAkB,CAAC;OACnC,mBAAmB;cACb,UAAU;AAEnB,aAAS;KAAE,SAAS;KAAc,MAAM;KAAsB,CAAC;AAC/D,aAAS;KAAE,SAAS;KAAc,MAAM;KAAa,CAAC;;SAEnD;AAEL,YAAS;IAAE,SAAS;IAAc,MAAM;IAAsB,CAAC;AAC/D,YAAS;IAAE,SAAS;IAAc,MAAM;IAAa,CAAC;;AAGxD,kBAAgB,OAAO,aAAa;IAEtC;EAAC;EAAY;EAAU;EAAmB;EAAU;EAAe;EAAY,CAChF;CAGD,MAAM,YAAY,cAAc;AAC9B,MAAI,cAAc,OAEhB,QAAO;AAGT,SAAO;IACN,CAAC,UAAU,CAAC;CAGf,MAAM,kBAAkB,eACf;EACL,SAAS;EACT,SAAS,CAAC,YAAY,0BAA0B,IAAI,aAAa,IAAI;EACrE,YAAY;EACb,GACD;EAAC;EAAU;EAAyB;EAAW,CAChD;CAED,MAAM,oBAAoB,eACjB;EACL,GAAG,cAAc;EACjB,QAAQ;EACT,GACD,CAAC,cAAc,OAAO,CACvB;CAED,MAAM,yBAAyB,eACtB;EACL,YAAY,cAAc,UAAU,IAAI;EACxC,aAAa,cAAc,SAAS,IAAI;EACxC,WAAW,WAAW,iBAAiB;EACvC,YAAY,aAAa,yBAAyB;EACnD,GACD,CAAC,WAAW,SAAS,CACtB;CAGD,MAAM,SAAS,cAEX,cACA,cACE,oBAAC,OAAD;EACE,OAAO;EACP,WAAW,GACT,OAAO,YACP,cAAc,SAAS,OAAO,aAAa,OAAO,YACnD;YAED,oBAAC,QAAD;GAAQ,WAAW,YAAY;GAAQ,OAAO;GAAmB,SAAS;aACxE,oBAAC,OAAD;IAAK,OAAO;cACV,oBAAC,MAAD;KAAM,WAAW,OAAO;KAAa,MAAM;KAAW,MAAM;KAAM,CAAA;IAC9D,CAAA;GACC,CAAA;EACL,CAAA,EAEV;EACE;EACA;EACA,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP;EACA;EACA,YAAY;EACZ;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,aAAa,cAAc;AAC/B,SAAO;GACK;GACA;GACV,MAAM;IAAE,QAAQ;IAAQ,OAAO,MAAM;IAAe;GACrD;IACA;EAAC,MAAM;EAAe;EAAU;EAAS,CAAC;CAG7C,MAAM,eAAe,cAAc;AACjC,MAAI,CAAC,UACH,QAAO;AAET,SAAO;GACL,QAAQ;GACR,YAAY;GACZ,aAAa;GACb,MAAM,cAAc;GACpB,OAAO,cAAc;GACrB,KAAK;GACL,SAAS;GACT,UAAU;GACX;IACA,CAAC,WAAW,UAAU,CAAC;CAG1B,MAAM,gBAAgB,eACb,GACJ,cAAc,SAAS,UAAU,SAAS,GACzC,OAAO,cACP,uBAAuB,OAAO,uBAC9B,cAAc,SAAS,OAAO,mBAAmB,OAAO,kBACzD,EACF,GACD;EAAC;EAAW;EAAQ;EAAqB;EAAG,CAC7C;CAGD,MAAM,iBAAiB,eACd;EACL,GAAG,cAAc;EACjB,GAAG,KAAK;EAER,YAAY,MAAM,aACd,SACA,MAAM,cACJ,SAAS,mBAAmB,qCAC5B;EACP,GACD;EAAC,cAAc;EAAW,KAAK;EAAO,MAAM;EAAY,MAAM;EAAY,CAC3E;CAGD,MAAM,qBAAqB,cACnB,GAAG,OAAO,WAAW,YAAY,WAAW,UAAU,EAC5D;EAAC;EAAI,OAAO;EAAW,YAAY;EAAW;EAAU,CACzD;CAED,MAAM,mBAAmB,cAErB,GACE,aAAa,OAAO,mBAAmB,OAAO,0BAC9C,OAAO,cACP,YAAY,QACb,EACH;EACE;EACA,OAAO;EACP,OAAO;EACP,OAAO;EACP,YAAY;EACZ;EACD,CACF;CAED,MAAM,kBAAkB,cAChB,GAAG,OAAO,QAAQ,YAAY,OAAO,EAC3C;EAAC;EAAI,OAAO;EAAQ,YAAY;EAAO,CACxC;CAED,MAAM,gBAAgB,cACd,GAAG,OAAO,MAAM,YAAY,KAAK,EACvC;EAAC;EAAI,OAAO;EAAM,YAAY;EAAK,CACpC;CAED,MAAM,kBAAkB,cAChB,GAAG,OAAO,QAAQ,YAAY,OAAO,EAC3C;EAAC;EAAI,OAAO;EAAQ,YAAY;EAAO,CACxC;AAGD,iBAAgB;AACd,eAAa;AACX,OAAI,oBAAoB,QACtB,cAAa,oBAAoB,QAAQ;AAE3C,OAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;;IAG3C,EAAE,CAAC;AAEN,QACE,oBAAC,SAAD;EAAY;YACV,qBAAC,WAAD;GACE,GAAI;GACJ,WAAW;GACX,QAAQ;GACO;GACf,OAAO;GACP,UAAU;GACV,eAAe;GACf,cAAc;aARhB,CAUG,QACD,qBAACA,mBAAD;IACE,WAAW;IACX,OAAO;KACL,GAAG;KACH,GAAG,cAAc;KAClB;cALH;KAOG,iBACC,oBAAC,OAAD;MAAK,WAAW;MAAiB,OAAO,cAAc;gBACnD;MACG,CAAA;KAER,oBAAC,OAAD;MAAK,WAAW;MAAe,OAAO,cAAc;gBACjD;MACG,CAAA;KACL,iBACC,oBAAC,OAAD;MAAK,WAAW;MAAiB,OAAO,cAAc;gBACnD;MACG,CAAA;KAEA;MACA;;EACN,CAAA;EAGb;AAED,iBAAiB,cAAc"}
+{"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: maxWidth,\n        minWidth: 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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"}

package/es/EditableText/EditableText.mjs

@@ -5,12 +5,12 @@ import ControlInput from "./ControlInput.mjs";
 import { memo, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import useControlledState from "use-merge-value";
+import useMergeState from "use-merge-value";
 import { Edit3 } from "lucide-react";
 import { useHotkeys } from "react-hotkeys-hook";
 //#region src/EditableText/EditableText.tsx
 const EditableText = memo(({ value, showEditIcon = true, onChange, editing, onEditingChange, onChangeEnd, onFocus, onBlur, className, inputProps, onValueChanging, gap = 8, style, size = "small", styles, classNames, variant = "borderless", ...rest }) => {
-	const [edited, setEdited] = useControlledState(false, {
+	const [edited, setEdited] = useMergeState(false, {
 		onChange: onEditingChange,
 		value: editing
 	});

package/es/EditableText/EditableText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.mjs","names":["Flexbox"],"sources":["../../src/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Edit3 } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport ControlInput from './ControlInput';\nimport type { EditableTextProps } from './type';\n\nconst EditableText = memo<EditableTextProps>(\n  ({\n    value,\n    showEditIcon = true,\n    onChange,\n    editing,\n    onEditingChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    className,\n    inputProps,\n    onValueChanging,\n    gap = 8,\n    style,\n    size = 'small',\n    styles,\n    classNames,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [edited, setEdited] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    useHotkeys(\n      'esc',\n      () => {\n        setEdited(false);\n      },\n      {\n        enableOnFormTags: true,\n        enabled: edited,\n        preventDefault: true,\n      },\n    );\n\n    const height = useMemo(() => {\n      if (!size) return 32;\n      switch (size) {\n        case 'large': {\n          return 40;\n        }\n        case 'middle': {\n          return 32;\n        }\n        case 'small': {\n          return 24;\n        }\n      }\n    }, [size]);\n\n    const input = (\n      <ControlInput\n        className={cx(className, classNames?.input)}\n        size={size}\n        value={value as string}\n        variant={variant}\n        style={{\n          height,\n          ...style,\n          ...styles?.input,\n        }}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        onValueChanging={onValueChanging}\n        onChangeEnd={(v) => {\n          onChangeEnd?.(v);\n          setEdited(false);\n        }}\n        {...inputProps}\n      />\n    );\n\n    const content = (\n      <>\n        <span>{value}</span>\n        {showEditIcon && (\n          <ActionIcon\n            icon={Edit3}\n            size=\"small\"\n            title={'Edit'}\n            onClick={() => {\n              setEdited(!edited);\n            }}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={cx(className, classNames?.container)}\n        gap={gap}\n        style={{\n          height,\n          width: '100%',\n          ...style,\n          ...styles?.container,\n        }}\n        {...rest}\n      >\n        {edited ? input : content}\n      </Flexbox>\n    );\n  },\n);\n\nEditableText.displayName = 'EditableText';\n\nexport default EditableText;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,OACA,eAAe,MACf,UACA,SACA,iBACA,aACA,SACA,QACA,WACA,YACA,iBACA,MAAM,GACN,OACA,OAAO,SACP,QACA,YACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;AAEF,YACE,aACM;AACJ,YAAU,MAAM;IAElB;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;EACjB,CACF;CAED,MAAM,SAAS,cAAc;AAC3B,MAAI,CAAC,KAAM,QAAO;AAClB,UAAQ,MAAR;GACE,KAAK,QACH,QAAO;GAET,KAAK,SACH,QAAO;GAET,KAAK,QACH,QAAO;;IAGV,CAAC,KAAK,CAAC;CAEV,MAAM,QACJ,oBAAC,cAAD;EACE,WAAW,GAAG,WAAW,YAAY,MAAM;EACrC;EACC;EACE;EACT,OAAO;GACL;GACA,GAAG;GACH,GAAG,QAAQ;GACZ;EACO;EACE;EACD;EACQ;EACjB,cAAc,MAAM;AAClB,iBAAc,EAAE;AAChB,aAAU,MAAM;;EAElB,GAAI;EACJ,CAAA;CAGJ,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,EACnB,gBACC,oBAAC,YAAD;EACE,MAAM;EACN,MAAK;EACL,OAAO;EACP,eAAe;AACb,aAAU,CAAC,OAAO;;EAEpB,CAAA,CAEH,EAAA,CAAA;AAGL,QACE,oBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,WAAW,YAAY,UAAU;EAC1C;EACL,OAAO;GACL;GACA,OAAO;GACP,GAAG;GACH,GAAG,QAAQ;GACZ;EACD,GAAI;YAEH,SAAS,QAAQ;EACV,CAAA;EAGf;AAED,aAAa,cAAc"}
+{"version":3,"file":"EditableText.mjs","names":["useControlledState","Flexbox"],"sources":["../../src/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Edit3 } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport ControlInput from './ControlInput';\nimport type { EditableTextProps } from './type';\n\nconst EditableText = memo<EditableTextProps>(\n  ({\n    value,\n    showEditIcon = true,\n    onChange,\n    editing,\n    onEditingChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    className,\n    inputProps,\n    onValueChanging,\n    gap = 8,\n    style,\n    size = 'small',\n    styles,\n    classNames,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [edited, setEdited] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    useHotkeys(\n      'esc',\n      () => {\n        setEdited(false);\n      },\n      {\n        enableOnFormTags: true,\n        enabled: edited,\n        preventDefault: true,\n      },\n    );\n\n    const height = useMemo(() => {\n      if (!size) return 32;\n      switch (size) {\n        case 'large': {\n          return 40;\n        }\n        case 'middle': {\n          return 32;\n        }\n        case 'small': {\n          return 24;\n        }\n      }\n    }, [size]);\n\n    const input = (\n      <ControlInput\n        className={cx(className, classNames?.input)}\n        size={size}\n        value={value as string}\n        variant={variant}\n        style={{\n          height,\n          ...style,\n          ...styles?.input,\n        }}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        onValueChanging={onValueChanging}\n        onChangeEnd={(v) => {\n          onChangeEnd?.(v);\n          setEdited(false);\n        }}\n        {...inputProps}\n      />\n    );\n\n    const content = (\n      <>\n        <span>{value}</span>\n        {showEditIcon && (\n          <ActionIcon\n            icon={Edit3}\n            size=\"small\"\n            title={'Edit'}\n            onClick={() => {\n              setEdited(!edited);\n            }}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={cx(className, classNames?.container)}\n        gap={gap}\n        style={{\n          height,\n          width: '100%',\n          ...style,\n          ...styles?.container,\n        }}\n        {...rest}\n      >\n        {edited ? input : content}\n      </Flexbox>\n    );\n  },\n);\n\nEditableText.displayName = 'EditableText';\n\nexport default EditableText;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,OACA,eAAe,MACf,UACA,SACA,iBACA,aACA,SACA,QACA,WACA,YACA,iBACA,MAAM,GACN,OACA,OAAO,SACP,QACA,YACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAaA,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;AAEF,YACE,aACM;AACJ,YAAU,MAAM;IAElB;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;EACjB,CACF;CAED,MAAM,SAAS,cAAc;AAC3B,MAAI,CAAC,KAAM,QAAO;AAClB,UAAQ,MAAR;GACE,KAAK,QACH,QAAO;GAET,KAAK,SACH,QAAO;GAET,KAAK,QACH,QAAO;;IAGV,CAAC,KAAK,CAAC;CAEV,MAAM,QACJ,oBAAC,cAAD;EACE,WAAW,GAAG,WAAW,YAAY,MAAM;EACrC;EACC;EACE;EACT,OAAO;GACL;GACA,GAAG;GACH,GAAG,QAAQ;GACZ;EACO;EACE;EACD;EACQ;EACjB,cAAc,MAAM;AAClB,iBAAc,EAAE;AAChB,aAAU,MAAM;;EAElB,GAAI;EACJ,CAAA;CAGJ,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,EACnB,gBACC,oBAAC,YAAD;EACE,MAAM;EACN,MAAK;EACL,OAAO;EACP,eAAe;AACb,aAAU,CAAC,OAAO;;EAEpB,CAAA,CAEH,EAAA,CAAA;AAGL,QACE,oBAACC,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,WAAW,YAAY,UAAU;EAC1C;EACL,OAAO;GACL;GACA,OAAO;GACP,GAAG;GACH,GAAG,QAAQ;GACZ;EACD,GAAI;YAEH,SAAS,QAAQ;EACV,CAAA;EAGf;AAED,aAAa,cAAc"}

package/es/EditorSlashMenu/useNormalizedItems.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useNormalizedItems.mjs","names":[],"sources":["../../src/EditorSlashMenu/useNormalizedItems.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { EditorSlashMenuGroup, EditorSlashMenuItems, EditorSlashMenuOption } from './type';\nimport { isGroup } from './utils';\n\nexport const useNormalizedItems = (items: EditorSlashMenuItems) => {\n  const resolvedItems = useMemo(() => {\n    const hasAnyGroup = items.some(isGroup);\n    if (!hasAnyGroup) return items as EditorSlashMenuOption[];\n\n    // Normalize: keep order, but ensure all entries are groups.\n    const groups: EditorSlashMenuGroup[] = [];\n    let buffer: EditorSlashMenuOption[] = [];\n\n    const flush = () => {\n      if (buffer.length) {\n        groups.push({ items: buffer });\n        buffer = [];\n      }\n    };\n\n    for (const entry of items) {\n      if (isGroup(entry)) {\n        flush();\n        groups.push(entry);\n      } else {\n        buffer.push(entry);\n      }\n    }\n    flush();\n\n    return groups;\n  }, [items]);\n\n  const hasAnyIcon = useMemo(() => {\n    const walk = (entry: EditorSlashMenuOption | EditorSlashMenuGroup): boolean => {\n      if (isGroup(entry)) return entry.items.some(walk as any);\n      return Boolean(entry.icon);\n    };\n    return items.some(walk as any);\n  }, [items]);\n\n  return { hasAnyIcon, resolvedItems };\n};\n"],"mappings":";;;AAKA,MAAa,sBAAsB,UAAgC;CACjE,MAAM,gBAAgB,cAAc;AAElC,MAAI,CADgB,MAAM,KAAK,QAAQ,CACrB,QAAO;EAGzB,MAAM,SAAiC,EAAE;EACzC,IAAI,SAAkC,EAAE;EAExC,MAAM,cAAc;AAClB,OAAI,OAAO,QAAQ;AACjB,WAAO,KAAK,EAAE,OAAO,QAAQ,CAAC;AAC9B,aAAS,EAAE;;;AAIf,OAAK,MAAM,SAAS,MAClB,KAAI,QAAQ,MAAM,EAAE;AAClB,UAAO;AACP,UAAO,KAAK,MAAM;QAElB,QAAO,KAAK,MAAM;AAGtB,SAAO;AAEP,SAAO;IACN,CAAC,MAAM,CAAC;AAUX,QAAO;EAAE,YARU,cAAc;GAC/B,MAAM,QAAQ,UAAiE;AAC7E,QAAI,QAAQ,MAAM,CAAE,QAAO,MAAM,MAAM,KAAK,KAAY;AACxD,WAAO,QAAQ,MAAM,KAAK;;AAE5B,UAAO,MAAM,KAAK,KAAY;KAC7B,CAAC,MAAM,CAAC;EAEU;EAAe"}
+{"version":3,"file":"useNormalizedItems.mjs","names":[],"sources":["../../src/EditorSlashMenu/useNormalizedItems.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { EditorSlashMenuGroup, EditorSlashMenuItems, EditorSlashMenuOption } from './type';\nimport { isGroup } from './utils';\n\nexport const useNormalizedItems = (items: EditorSlashMenuItems) => {\n  const resolvedItems = useMemo(() => {\n    const hasAnyGroup = items.some(isGroup);\n    if (!hasAnyGroup) return items as EditorSlashMenuOption[];\n\n    // Normalize: keep order, but ensure all entries are groups.\n    const groups: EditorSlashMenuGroup[] = [];\n    let buffer: EditorSlashMenuOption[] = [];\n\n    const flush = () => {\n      if (buffer.length) {\n        groups.push({ items: buffer });\n        buffer = [];\n      }\n    };\n\n    for (const entry of items) {\n      if (isGroup(entry)) {\n        flush();\n        groups.push(entry);\n      } else {\n        buffer.push(entry);\n      }\n    }\n    flush();\n\n    return groups;\n  }, [items]);\n\n  const hasAnyIcon = useMemo(() => {\n    const walk = (entry: EditorSlashMenuOption | EditorSlashMenuGroup): boolean => {\n      if (isGroup(entry)) return entry.items.some(walk as any);\n      return Boolean(entry.icon);\n    };\n    return items.some(walk as any);\n  }, [items]);\n\n  return { hasAnyIcon, resolvedItems };\n};\n"],"mappings":";;;AAKA,MAAa,sBAAsB,UAAgC;CACjE,MAAM,gBAAgB,cAAc;AAElC,MAAI,CADgB,MAAM,KAAK,QACf,CAAE,QAAO;EAGzB,MAAM,SAAiC,EAAE;EACzC,IAAI,SAAkC,EAAE;EAExC,MAAM,cAAc;AAClB,OAAI,OAAO,QAAQ;AACjB,WAAO,KAAK,EAAE,OAAO,QAAQ,CAAC;AAC9B,aAAS,EAAE;;;AAIf,OAAK,MAAM,SAAS,MAClB,KAAI,QAAQ,MAAM,EAAE;AAClB,UAAO;AACP,UAAO,KAAK,MAAM;QAElB,QAAO,KAAK,MAAM;AAGtB,SAAO;AAEP,SAAO;IACN,CAAC,MAAM,CAAC;AAUX,QAAO;EAAE,YARU,cAAc;GAC/B,MAAM,QAAQ,UAAiE;AAC7E,QAAI,QAAQ,MAAM,CAAE,QAAO,MAAM,MAAM,KAAK,KAAY;AACxD,WAAO,QAAQ,MAAM,KAAK;;AAE5B,UAAO,MAAM,KAAK,KAAY;KAC7B,CAAC,MAAM,CAES;EAAE;EAAe"}

package/es/EmojiPicker/AvatarUploader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarUploader.mjs","names":["emojiPickerMessages","Flexbox","Tag","Button"],"sources":["../../src/EmojiPicker/AvatarUploader.tsx"],"sourcesContent":["'use client';\n\nimport { type GetProp, message, Upload, type UploadProps } from 'antd';\nimport { cssVar } from 'antd-style';\nimport { ChevronLeftIcon, ImageUpIcon } from 'lucide-react';\nimport { memo, useCallback, useRef, useState } from 'react';\nimport AvatarEditor from 'react-avatar-editor';\n\nimport Button from '@/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\n\nimport { type AvatarUploaderProps } from './type';\n\ntype FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];\n\nconst { Dragger } = Upload;\n\nconst createUploadImageHandler = (onUploadImage: (base64: string) => void) => (file: any) => {\n  const reader = new FileReader();\n  reader.readAsDataURL(file);\n  reader.addEventListener('load', () => {\n    onUploadImage(String(reader.result));\n  });\n};\n\nconst AvatarUploader = memo<AvatarUploaderProps>(\n  ({ shape, onChange, texts, compressSize = 256, onUpload }) => {\n    const editor = useRef<any>(null);\n    const [previewImage, setPreviewImage] = useState('');\n    const { t } = useTranslation(emojiPickerMessages);\n\n    const fileTypeErrorText = texts?.fileTypeError ?? t('emojiPicker.fileTypeError');\n    const draggerDescText = texts?.draggerDesc ?? t('emojiPicker.draggerDesc');\n    const uploadBtnText = texts?.uploadBtn ?? t('emojiPicker.uploadBtn');\n\n    const beforeUpload = useCallback(\n      (file: FileType) => {\n        const isJpgOrPng =\n          file.type === 'image/jpeg' ||\n          file.type === 'image/png' ||\n          file.type === 'image/gif' ||\n          file.type === 'image/webp';\n        if (!isJpgOrPng) {\n          message.error(fileTypeErrorText);\n          return;\n        }\n        return createUploadImageHandler((avatar) => {\n          setPreviewImage(avatar);\n        })(file);\n      },\n      [fileTypeErrorText],\n    );\n\n    const handleUpload = () => {\n      if (!editor.current) return;\n      const canvasScaled = editor.current.getImageScaledToCanvas() as HTMLCanvasElement;\n      const dataUrl = canvasScaled.toDataURL();\n      onChange(dataUrl);\n\n      if (!onUpload) return;\n\n      // 使用 toBlob 直接获取 Blob，然后创建 File 对象\n      canvasScaled.toBlob(\n        (blob) => {\n          if (blob) {\n            const file = new File([blob], 'avatar.webp', { type: 'image/webp' });\n            onUpload(file);\n          }\n        },\n        'image/webp',\n        0.95,\n      ); // 0.95 是图片质量\n    };\n\n    return (\n      <Flexbox padding={10} style={{ position: 'relative' }} width={'100%'}>\n        {!previewImage && (\n          <Dragger\n            accept={'image'}\n            beforeUpload={beforeUpload}\n            itemRender={() => void 0}\n            maxCount={1}\n            multiple={false}\n          >\n            <Center gap={16} height={compressSize} width={compressSize}>\n              <Icon color={cssVar.colorTextDescription} icon={ImageUpIcon} size={48} />\n              <Text color={cssVar.colorTextSecondary}>{draggerDescText}</Text>\n              <Center horizontal gap={4}>\n                <Tag>JPG</Tag>\n                <Tag>PNG</Tag>\n                <Tag>GIF</Tag>\n                <Tag>WEBP</Tag>\n              </Center>\n            </Center>\n          </Dragger>\n        )}\n        {previewImage && (\n          <Center gap={8} style={{ position: 'relative' }} width={'100%'}>\n            <AvatarEditor\n              border={0}\n              borderRadius={shape === 'square' ? undefined : compressSize / 2}\n              height={compressSize}\n              image={previewImage}\n              ref={editor}\n              width={compressSize}\n            />\n\n            <Flexbox horizontal gap={8} style={{ position: 'relative' }} width={'100%'}>\n              <Button\n                icon={ChevronLeftIcon}\n                style={{ flex: 'none' }}\n                onClick={() => setPreviewImage('')}\n              />\n              <Button style={{ flex: 1, fontWeight: 500 }} type={'primary'} onClick={handleUpload}>\n                {uploadBtnText}\n              </Button>\n            </Flexbox>\n          </Center>\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarUploader.displayName = 'AvatarUploader';\n\nexport default AvatarUploader;\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,EAAE,YAAY;AAEpB,MAAM,4BAA4B,mBAA6C,SAAc;CAC3F,MAAM,SAAS,IAAI,YAAY;AAC/B,QAAO,cAAc,KAAK;AAC1B,QAAO,iBAAiB,cAAc;AACpC,gBAAc,OAAO,OAAO,OAAO,CAAC;GACpC;;AAGJ,MAAM,iBAAiB,MACpB,EAAE,OAAO,UAAU,OAAO,eAAe,KAAK,eAAe;CAC5D,MAAM,SAAS,OAAY,KAAK;CAChC,MAAM,CAAC,cAAc,mBAAmB,SAAS,GAAG;CACpD,MAAM,EAAE,MAAM,eAAeA,oBAAoB;CAEjD,MAAM,oBAAoB,OAAO,iBAAiB,EAAE,4BAA4B;CAChF,MAAM,kBAAkB,OAAO,eAAe,EAAE,0BAA0B;CAC1E,MAAM,gBAAgB,OAAO,aAAa,EAAE,wBAAwB;CAEpE,MAAM,eAAe,aAClB,SAAmB;AAMlB,MAAI,EAJF,KAAK,SAAS,gBACd,KAAK,SAAS,eACd,KAAK,SAAS,eACd,KAAK,SAAS,eACC;AACf,WAAQ,MAAM,kBAAkB;AAChC;;AAEF,SAAO,0BAA0B,WAAW;AAC1C,mBAAgB,OAAO;IACvB,CAAC,KAAK;IAEV,CAAC,kBAAkB,CACpB;CAED,MAAM,qBAAqB;AACzB,MAAI,CAAC,OAAO,QAAS;EACrB,MAAM,eAAe,OAAO,QAAQ,wBAAwB;AAE5D,WADgB,aAAa,WAAW,CACvB;AAEjB,MAAI,CAAC,SAAU;AAGf,eAAa,QACV,SAAS;AACR,OAAI,KAEF,UADa,IAAI,KAAK,CAAC,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC,CACtD;KAGlB,cACA,IACD;;AAGH,QACE,qBAACC,mBAAD;EAAS,SAAS;EAAI,OAAO,EAAE,UAAU,YAAY;EAAE,OAAO;YAA9D,CACG,CAAC,gBACA,oBAAC,SAAD;GACE,QAAQ;GACM;GACd,kBAAkB,KAAK;GACvB,UAAU;GACV,UAAU;aAEV,qBAAC,QAAD;IAAQ,KAAK;IAAI,QAAQ;IAAc,OAAO;cAA9C;KACE,oBAAC,MAAD;MAAM,OAAO,OAAO;MAAsB,MAAM;MAAa,MAAM;MAAM,CAAA;KACzE,oBAAC,MAAD;MAAM,OAAO,OAAO;gBAAqB;MAAuB,CAAA;KAChE,qBAAC,QAAD;MAAQ,YAAA;MAAW,KAAK;gBAAxB;OACE,oBAACC,OAAD,EAAA,UAAK,OAAS,CAAA;OACd,oBAACA,OAAD,EAAA,UAAK,OAAS,CAAA;OACd,oBAACA,OAAD,EAAA,UAAK,OAAS,CAAA;OACd,oBAACA,OAAD,EAAA,UAAK,QAAU,CAAA;OACR;;KACF;;GACD,CAAA,EAEX,gBACC,qBAAC,QAAD;GAAQ,KAAK;GAAG,OAAO,EAAE,UAAU,YAAY;GAAE,OAAO;aAAxD,CACE,oBAAC,cAAD;IACE,QAAQ;IACR,cAAc,UAAU,WAAW,KAAA,IAAY,eAAe;IAC9D,QAAQ;IACR,OAAO;IACP,KAAK;IACL,OAAO;IACP,CAAA,EAEF,qBAACD,mBAAD;IAAS,YAAA;IAAW,KAAK;IAAG,OAAO,EAAE,UAAU,YAAY;IAAE,OAAO;cAApE,CACE,oBAACE,UAAD;KACE,MAAM;KACN,OAAO,EAAE,MAAM,QAAQ;KACvB,eAAe,gBAAgB,GAAG;KAClC,CAAA,EACF,oBAACA,UAAD;KAAQ,OAAO;MAAE,MAAM;MAAG,YAAY;MAAK;KAAE,MAAM;KAAW,SAAS;eACpE;KACM,CAAA,CACD;MACH;KAEH;;EAGf;AAED,eAAe,cAAc"}
+{"version":3,"file":"AvatarUploader.mjs","names":["emojiPickerMessages","Flexbox","Tag","Button"],"sources":["../../src/EmojiPicker/AvatarUploader.tsx"],"sourcesContent":["'use client';\n\nimport { type GetProp, message, Upload, type UploadProps } from 'antd';\nimport { cssVar } from 'antd-style';\nimport { ChevronLeftIcon, ImageUpIcon } from 'lucide-react';\nimport { memo, useCallback, useRef, useState } from 'react';\nimport AvatarEditor from 'react-avatar-editor';\n\nimport Button from '@/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\n\nimport { type AvatarUploaderProps } from './type';\n\ntype FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];\n\nconst { Dragger } = Upload;\n\nconst createUploadImageHandler = (onUploadImage: (base64: string) => void) => (file: any) => {\n  const reader = new FileReader();\n  reader.readAsDataURL(file);\n  reader.addEventListener('load', () => {\n    onUploadImage(String(reader.result));\n  });\n};\n\nconst AvatarUploader = memo<AvatarUploaderProps>(\n  ({ shape, onChange, texts, compressSize = 256, onUpload }) => {\n    const editor = useRef<any>(null);\n    const [previewImage, setPreviewImage] = useState('');\n    const { t } = useTranslation(emojiPickerMessages);\n\n    const fileTypeErrorText = texts?.fileTypeError ?? t('emojiPicker.fileTypeError');\n    const draggerDescText = texts?.draggerDesc ?? t('emojiPicker.draggerDesc');\n    const uploadBtnText = texts?.uploadBtn ?? t('emojiPicker.uploadBtn');\n\n    const beforeUpload = useCallback(\n      (file: FileType) => {\n        const isJpgOrPng =\n          file.type === 'image/jpeg' ||\n          file.type === 'image/png' ||\n          file.type === 'image/gif' ||\n          file.type === 'image/webp';\n        if (!isJpgOrPng) {\n          message.error(fileTypeErrorText);\n          return;\n        }\n        return createUploadImageHandler((avatar) => {\n          setPreviewImage(avatar);\n        })(file);\n      },\n      [fileTypeErrorText],\n    );\n\n    const handleUpload = () => {\n      if (!editor.current) return;\n      const canvasScaled = editor.current.getImageScaledToCanvas() as HTMLCanvasElement;\n      const dataUrl = canvasScaled.toDataURL();\n      onChange(dataUrl);\n\n      if (!onUpload) return;\n\n      // 使用 toBlob 直接获取 Blob，然后创建 File 对象\n      canvasScaled.toBlob(\n        (blob) => {\n          if (blob) {\n            const file = new File([blob], 'avatar.webp', { type: 'image/webp' });\n            onUpload(file);\n          }\n        },\n        'image/webp',\n        0.95,\n      ); // 0.95 是图片质量\n    };\n\n    return (\n      <Flexbox padding={10} style={{ position: 'relative' }} width={'100%'}>\n        {!previewImage && (\n          <Dragger\n            accept={'image'}\n            beforeUpload={beforeUpload}\n            itemRender={() => void 0}\n            maxCount={1}\n            multiple={false}\n          >\n            <Center gap={16} height={compressSize} width={compressSize}>\n              <Icon color={cssVar.colorTextDescription} icon={ImageUpIcon} size={48} />\n              <Text color={cssVar.colorTextSecondary}>{draggerDescText}</Text>\n              <Center horizontal gap={4}>\n                <Tag>JPG</Tag>\n                <Tag>PNG</Tag>\n                <Tag>GIF</Tag>\n                <Tag>WEBP</Tag>\n              </Center>\n            </Center>\n          </Dragger>\n        )}\n        {previewImage && (\n          <Center gap={8} style={{ position: 'relative' }} width={'100%'}>\n            <AvatarEditor\n              border={0}\n              borderRadius={shape === 'square' ? undefined : compressSize / 2}\n              height={compressSize}\n              image={previewImage}\n              ref={editor}\n              width={compressSize}\n            />\n\n            <Flexbox horizontal gap={8} style={{ position: 'relative' }} width={'100%'}>\n              <Button\n                icon={ChevronLeftIcon}\n                style={{ flex: 'none' }}\n                onClick={() => setPreviewImage('')}\n              />\n              <Button style={{ flex: 1, fontWeight: 500 }} type={'primary'} onClick={handleUpload}>\n                {uploadBtnText}\n              </Button>\n            </Flexbox>\n          </Center>\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarUploader.displayName = 'AvatarUploader';\n\nexport default AvatarUploader;\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,EAAE,YAAY;AAEpB,MAAM,4BAA4B,mBAA6C,SAAc;CAC3F,MAAM,SAAS,IAAI,YAAY;AAC/B,QAAO,cAAc,KAAK;AAC1B,QAAO,iBAAiB,cAAc;AACpC,gBAAc,OAAO,OAAO,OAAO,CAAC;GACpC;;AAGJ,MAAM,iBAAiB,MACpB,EAAE,OAAO,UAAU,OAAO,eAAe,KAAK,eAAe;CAC5D,MAAM,SAAS,OAAY,KAAK;CAChC,MAAM,CAAC,cAAc,mBAAmB,SAAS,GAAG;CACpD,MAAM,EAAE,MAAM,eAAeA,oBAAoB;CAEjD,MAAM,oBAAoB,OAAO,iBAAiB,EAAE,4BAA4B;CAChF,MAAM,kBAAkB,OAAO,eAAe,EAAE,0BAA0B;CAC1E,MAAM,gBAAgB,OAAO,aAAa,EAAE,wBAAwB;CAEpE,MAAM,eAAe,aAClB,SAAmB;AAMlB,MAAI,EAJF,KAAK,SAAS,gBACd,KAAK,SAAS,eACd,KAAK,SAAS,eACd,KAAK,SAAS,eACC;AACf,WAAQ,MAAM,kBAAkB;AAChC;;AAEF,SAAO,0BAA0B,WAAW;AAC1C,mBAAgB,OAAO;IACvB,CAAC,KAAK;IAEV,CAAC,kBAAkB,CACpB;CAED,MAAM,qBAAqB;AACzB,MAAI,CAAC,OAAO,QAAS;EACrB,MAAM,eAAe,OAAO,QAAQ,wBAAwB;AAE5D,WADgB,aAAa,WACb,CAAC;AAEjB,MAAI,CAAC,SAAU;AAGf,eAAa,QACV,SAAS;AACR,OAAI,KAEF,UAAS,IADQ,KAAK,CAAC,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CACtD,CAAC;KAGlB,cACA,IACD;;AAGH,QACE,qBAACC,mBAAD;EAAS,SAAS;EAAI,OAAO,EAAE,UAAU,YAAY;EAAE,OAAO;YAA9D,CACG,CAAC,gBACA,oBAAC,SAAD;GACE,QAAQ;GACM;GACd,kBAAkB,KAAK;GACvB,UAAU;GACV,UAAU;aAEV,qBAAC,QAAD;IAAQ,KAAK;IAAI,QAAQ;IAAc,OAAO;cAA9C;KACE,oBAAC,MAAD;MAAM,OAAO,OAAO;MAAsB,MAAM;MAAa,MAAM;MAAM,CAAA;KACzE,oBAAC,MAAD;MAAM,OAAO,OAAO;gBAAqB;MAAuB,CAAA;KAChE,qBAAC,QAAD;MAAQ,YAAA;MAAW,KAAK;gBAAxB;OACE,oBAACC,OAAD,EAAA,UAAK,OAAS,CAAA;OACd,oBAACA,OAAD,EAAA,UAAK,OAAS,CAAA;OACd,oBAACA,OAAD,EAAA,UAAK,OAAS,CAAA;OACd,oBAACA,OAAD,EAAA,UAAK,QAAU,CAAA;OACR;;KACF;;GACD,CAAA,EAEX,gBACC,qBAAC,QAAD;GAAQ,KAAK;GAAG,OAAO,EAAE,UAAU,YAAY;GAAE,OAAO;aAAxD,CACE,oBAAC,cAAD;IACE,QAAQ;IACR,cAAc,UAAU,WAAW,KAAA,IAAY,eAAe;IAC9D,QAAQ;IACR,OAAO;IACP,KAAK;IACL,OAAO;IACP,CAAA,EAEF,qBAACD,mBAAD;IAAS,YAAA;IAAW,KAAK;IAAG,OAAO,EAAE,UAAU,YAAY;IAAE,OAAO;cAApE,CACE,oBAACE,UAAD;KACE,MAAM;KACN,OAAO,EAAE,MAAM,QAAQ;KACvB,eAAe,gBAAgB,GAAG;KAClC,CAAA,EACF,oBAACA,UAAD;KAAQ,OAAO;MAAE,MAAM;MAAG,YAAY;MAAK;KAAE,MAAM;KAAW,SAAS;eACpE;KACM,CAAA,CACD;MACH;KAEH;;EAGf;AAED,eAAe,cAAc"}

package/es/EmojiPicker/EmojiPicker.mjs

@@ -13,7 +13,7 @@ import { styles } from "./style.mjs";
 import { memo, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx, useTheme } from "antd-style";
-import useControlledState from "use-merge-value";
+import useMergeState from "use-merge-value";
 import { SmileIcon, TrashIcon, UploadIcon } from "lucide-react";
 import chroma from "chroma-js";
 import data from "@emoji-mart/data";
@@ -25,7 +25,7 @@ const DEFAULT_AVATAR = "🤖";
 const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, locale = "en-US", allowUpload, allowDelete, allowModelAvatar, texts, onDelete, compressSize = 256, customEmojis, className, loading, onUpload, customTabs = [], popupClassName, popupStyle, customRender, open, defaultOpen = false, onOpenChange, popupProps, shape, contentProps, ...rest }) => {
 	const ref = useRef(null);
 	const { t } = useTranslation(emojiPicker_default);
-	const [visible, setVisible] = useControlledState(defaultOpen, {
+	const [visible, setVisible] = useMergeState(defaultOpen, {
 		defaultValue: defaultOpen,
 		onChange: onOpenChange,
 		value: open
@@ -40,7 +40,7 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 		revalidateOnFocus: false,
 		revalidateOnMount: false
 	});
-	const [ava, setAva] = useControlledState(defaultAvatar, {
+	const [ava, setAva] = useMergeState(defaultAvatar, {
 		defaultValue: defaultAvatar,
 		onChange,
 		value

package/es/EmojiPicker/EmojiPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.mjs","names":["emojiPickerMessages","useMergeState","Flexbox"],"sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["'use client';\n\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { getLobeIconCDN, toc } from '@lobehub/icons';\nimport { cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport useSWR from 'swr';\nimport useMergeState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport Avatar from '@/Avatar';\nimport { Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Popover from '@/Popover';\nimport Tabs, { type TabsProps } from '@/Tabs';\nimport Tooltip from '@/Tooltip';\n\nimport AvatarUploader from './AvatarUploader';\nimport { styles } from './style';\nimport { type EmojiPickerProps } from './type';\n\nconst DEFAULT_AVATAR = '🤖';\n\nconst EmojiPicker = memo<EmojiPickerProps>(\n  ({\n    value,\n    defaultAvatar = DEFAULT_AVATAR,\n    onChange,\n    locale = 'en-US',\n    allowUpload,\n    allowDelete,\n    allowModelAvatar,\n    texts,\n    onDelete,\n    compressSize = 256,\n    customEmojis,\n    className,\n    loading,\n    onUpload,\n    customTabs = [],\n    popupClassName,\n    popupStyle,\n    customRender,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    popupProps,\n    shape,\n    contentProps,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const { t } = useTranslation(emojiPickerMessages);\n    const [visible, setVisible] = useMergeState(defaultOpen, {\n      defaultValue: defaultOpen,\n      onChange: onOpenChange,\n      value: open,\n    });\n    const [tab, setTab] = useState<'emoji' | 'upload'>('emoji');\n\n    const theme = useTheme();\n    const pickerCssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--emoji-picker-rgb-accent': chroma(theme.colorPrimary).rgb().join(', '),\n        '--emoji-picker-rgb-background': chroma(theme.colorBgElevated).rgb().join(', '),\n      }),\n      [theme.colorPrimary, theme.colorBgElevated],\n    );\n\n    const { data: i18n } = useSWR(\n      locale,\n      async () => await import(`@emoji-mart/data/i18n/${locale.split('-')[0]}.json`),\n      { revalidateOnFocus: false, revalidateOnMount: false },\n    );\n\n    const [ava, setAva] = useMergeState(defaultAvatar, {\n      defaultValue: defaultAvatar,\n      onChange,\n      value,\n    });\n\n    const handleAvatarChange = (emoji: string) => {\n      setAva(emoji);\n      setVisible(false);\n    };\n\n    // Generate model avatars from @lobehub/icons when allowModelAvatar is enabled\n    const mergedCustomEmojis = useMemo(() => {\n      if (!allowModelAvatar) return customEmojis;\n\n      const modelIcons = toc.filter((item) => item.group !== 'application');\n\n      const modelEmojisCategory = {\n        id: 'models',\n        name: 'Models / Providers',\n        emojis: modelIcons.map((item) => ({\n          id: item.id.toLowerCase(),\n          name: item.title,\n          keywords: [item.title, item.id, item.fullTitle],\n          skins: [{ src: getLobeIconCDN(item.id, { format: 'avatar', cdn: 'aliyun' }) }],\n        })),\n      };\n\n      return customEmojis ? [modelEmojisCategory, ...customEmojis] : [modelEmojisCategory];\n    }, [allowModelAvatar, customEmojis]);\n\n    const emojiText = texts?.emoji ?? t('emojiPicker.emoji');\n    const uploadText = texts?.upload ?? t('emojiPicker.upload');\n    const deleteText = texts?.delete ?? t('emojiPicker.delete');\n\n    const hideEmojiTab = typeof allowUpload === 'object' && allowUpload?.enableEmoji === false;\n\n    const items: TabsProps['items'] = [\n      !hideEmojiTab && {\n        key: 'emoji',\n        label: (\n          <Tooltip title={emojiText}>\n            <Icon icon={SmileIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      allowUpload && {\n        key: 'upload',\n        label: (\n          <Tooltip title={uploadText}>\n            <Icon icon={UploadIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      ...customTabs.map((tab) => ({ key: tab.value, label: tab.label })),\n    ].filter(Boolean) as TabsProps['items'];\n\n    const showTabs = allowDelete || (items && items.length > 1);\n\n    const content = (\n      <Flexbox\n        className={cx(styles.picker, popupClassName)}\n        ref={ref}\n        style={{\n          minWidth: 310,\n          paddingTop: showTabs ? 4 : 0,\n          ...pickerCssVariables,\n          ...popupStyle,\n        }}\n        {...contentProps}\n      >\n        {showTabs && (\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={styles.tabs}\n            justify={'space-between'}\n            paddingInline={10}\n          >\n            <Tabs\n              compact\n              activeKey={tab}\n              items={items}\n              size={'small'}\n              onChange={(key) => setTab(key as any)}\n            />\n            {allowDelete && (\n              <ActionIcon\n                icon={TrashIcon}\n                title={deleteText}\n                size={{\n                  blockSize: 32,\n                  size: 18,\n                }}\n                onClick={() => {\n                  handleAvatarChange(defaultAvatar);\n                  onDelete?.();\n                }}\n              />\n            )}\n          </Flexbox>\n        )}\n        {tab === 'emoji' && (\n          <Picker\n            custom={mergedCustomEmojis}\n            data={data}\n            i18n={i18n}\n            icons={'outline'}\n            locale={locale.split('-')[0]}\n            navPosition={showTabs ? 'bottom' : 'top'}\n            previewPosition={'none'}\n            skinTonePosition={'none'}\n            theme={theme.isDarkMode ? 'dark' : 'light'}\n            onEmojiSelect={(e: any) => handleAvatarChange(e.src || e.native)}\n          />\n        )}\n        {tab === 'upload' && (\n          <AvatarUploader\n            compressSize={compressSize}\n            shape={shape}\n            texts={texts}\n            onChange={handleAvatarChange}\n            onUpload={onUpload}\n          />\n        )}\n        {customTabs.map(\n          (item) =>\n            tab === item.value && (\n              <Flexbox key={item.value} padding={10}>\n                {item.render(handleAvatarChange)}\n              </Flexbox>\n            ),\n        )}\n      </Flexbox>\n    );\n\n    return (\n      <Popover\n        className={cx(styles.popover)}\n        content={content}\n        defaultOpen={defaultOpen}\n        open={visible}\n        placement={'bottom'}\n        trigger={'click'}\n        classNames={{\n          content: styles.popover,\n          root: styles.positioner,\n        }}\n        onOpenChange={(v) => {\n          if (loading) return;\n          setVisible(v);\n        }}\n        {...popupProps}\n      >\n        {customRender ? (\n          customRender(ava)\n        ) : (\n          <Avatar\n            avatar={ava}\n            className={cx(styles.root, className)}\n            loading={loading}\n            shape={shape}\n            {...rest}\n          />\n        )}\n      </Popover>\n    );\n  },\n);\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}
+{"version":3,"file":"EmojiPicker.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["'use client';\n\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { getLobeIconCDN, toc } from '@lobehub/icons';\nimport { cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport useSWR from 'swr';\nimport useMergeState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport Avatar from '@/Avatar';\nimport { Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Popover from '@/Popover';\nimport Tabs, { type TabsProps } from '@/Tabs';\nimport Tooltip from '@/Tooltip';\n\nimport AvatarUploader from './AvatarUploader';\nimport { styles } from './style';\nimport { type EmojiPickerProps } from './type';\n\nconst DEFAULT_AVATAR = '🤖';\n\nconst EmojiPicker = memo<EmojiPickerProps>(\n  ({\n    value,\n    defaultAvatar = DEFAULT_AVATAR,\n    onChange,\n    locale = 'en-US',\n    allowUpload,\n    allowDelete,\n    allowModelAvatar,\n    texts,\n    onDelete,\n    compressSize = 256,\n    customEmojis,\n    className,\n    loading,\n    onUpload,\n    customTabs = [],\n    popupClassName,\n    popupStyle,\n    customRender,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    popupProps,\n    shape,\n    contentProps,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const { t } = useTranslation(emojiPickerMessages);\n    const [visible, setVisible] = useMergeState(defaultOpen, {\n      defaultValue: defaultOpen,\n      onChange: onOpenChange,\n      value: open,\n    });\n    const [tab, setTab] = useState<'emoji' | 'upload'>('emoji');\n\n    const theme = useTheme();\n    const pickerCssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--emoji-picker-rgb-accent': chroma(theme.colorPrimary).rgb().join(', '),\n        '--emoji-picker-rgb-background': chroma(theme.colorBgElevated).rgb().join(', '),\n      }),\n      [theme.colorPrimary, theme.colorBgElevated],\n    );\n\n    const { data: i18n } = useSWR(\n      locale,\n      async () => await import(`@emoji-mart/data/i18n/${locale.split('-')[0]}.json`),\n      { revalidateOnFocus: false, revalidateOnMount: false },\n    );\n\n    const [ava, setAva] = useMergeState(defaultAvatar, {\n      defaultValue: defaultAvatar,\n      onChange,\n      value,\n    });\n\n    const handleAvatarChange = (emoji: string) => {\n      setAva(emoji);\n      setVisible(false);\n    };\n\n    // Generate model avatars from @lobehub/icons when allowModelAvatar is enabled\n    const mergedCustomEmojis = useMemo(() => {\n      if (!allowModelAvatar) return customEmojis;\n\n      const modelIcons = toc.filter((item) => item.group !== 'application');\n\n      const modelEmojisCategory = {\n        id: 'models',\n        name: 'Models / Providers',\n        emojis: modelIcons.map((item) => ({\n          id: item.id.toLowerCase(),\n          name: item.title,\n          keywords: [item.title, item.id, item.fullTitle],\n          skins: [{ src: getLobeIconCDN(item.id, { format: 'avatar', cdn: 'aliyun' }) }],\n        })),\n      };\n\n      return customEmojis ? [modelEmojisCategory, ...customEmojis] : [modelEmojisCategory];\n    }, [allowModelAvatar, customEmojis]);\n\n    const emojiText = texts?.emoji ?? t('emojiPicker.emoji');\n    const uploadText = texts?.upload ?? t('emojiPicker.upload');\n    const deleteText = texts?.delete ?? t('emojiPicker.delete');\n\n    const hideEmojiTab = typeof allowUpload === 'object' && allowUpload?.enableEmoji === false;\n\n    const items: TabsProps['items'] = [\n      !hideEmojiTab && {\n        key: 'emoji',\n        label: (\n          <Tooltip title={emojiText}>\n            <Icon icon={SmileIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      allowUpload && {\n        key: 'upload',\n        label: (\n          <Tooltip title={uploadText}>\n            <Icon icon={UploadIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      ...customTabs.map((tab) => ({ key: tab.value, label: tab.label })),\n    ].filter(Boolean) as TabsProps['items'];\n\n    const showTabs = allowDelete || (items && items.length > 1);\n\n    const content = (\n      <Flexbox\n        className={cx(styles.picker, popupClassName)}\n        ref={ref}\n        style={{\n          minWidth: 310,\n          paddingTop: showTabs ? 4 : 0,\n          ...pickerCssVariables,\n          ...popupStyle,\n        }}\n        {...contentProps}\n      >\n        {showTabs && (\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={styles.tabs}\n            justify={'space-between'}\n            paddingInline={10}\n          >\n            <Tabs\n              compact\n              activeKey={tab}\n              items={items}\n              size={'small'}\n              onChange={(key) => setTab(key as any)}\n            />\n            {allowDelete && (\n              <ActionIcon\n                icon={TrashIcon}\n                title={deleteText}\n                size={{\n                  blockSize: 32,\n                  size: 18,\n                }}\n                onClick={() => {\n                  handleAvatarChange(defaultAvatar);\n                  onDelete?.();\n                }}\n              />\n            )}\n          </Flexbox>\n        )}\n        {tab === 'emoji' && (\n          <Picker\n            custom={mergedCustomEmojis}\n            data={data}\n            i18n={i18n}\n            icons={'outline'}\n            locale={locale.split('-')[0]}\n            navPosition={showTabs ? 'bottom' : 'top'}\n            previewPosition={'none'}\n            skinTonePosition={'none'}\n            theme={theme.isDarkMode ? 'dark' : 'light'}\n            onEmojiSelect={(e: any) => handleAvatarChange(e.src || e.native)}\n          />\n        )}\n        {tab === 'upload' && (\n          <AvatarUploader\n            compressSize={compressSize}\n            shape={shape}\n            texts={texts}\n            onChange={handleAvatarChange}\n            onUpload={onUpload}\n          />\n        )}\n        {customTabs.map(\n          (item) =>\n            tab === item.value && (\n              <Flexbox key={item.value} padding={10}>\n                {item.render(handleAvatarChange)}\n              </Flexbox>\n            ),\n        )}\n      </Flexbox>\n    );\n\n    return (\n      <Popover\n        className={cx(styles.popover)}\n        content={content}\n        defaultOpen={defaultOpen}\n        open={visible}\n        placement={'bottom'}\n        trigger={'click'}\n        classNames={{\n          content: styles.popover,\n          root: styles.positioner,\n        }}\n        onOpenChange={(v) => {\n          if (loading) return;\n          setVisible(v);\n        }}\n        {...popupProps}\n      >\n        {customRender ? (\n          customRender(ava)\n        ) : (\n          <Avatar\n            avatar={ava}\n            className={cx(styles.root, className)}\n            loading={loading}\n            shape={shape}\n            {...rest}\n          />\n        )}\n      </Popover>\n    );\n  },\n);\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}

package/es/Form/components/FormFlatGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormFlatGroup.mjs","names":["Flexbox"],"sources":["../../../src/Form/components/FormFlatGroup.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { flatGroupStyles, flatGroupVariants } from '../style';\nimport type { FormFlatGroupProps } from '../type';\n\nconst FormFlatGroup = memo<FormFlatGroupProps>(\n  ({ className, children, variant = 'borderless', ...rest }) => {\n    const { mobile } = useResponsive();\n    const styles = flatGroupStyles;\n\n    return (\n      <Flexbox\n        className={cx(mobile ? styles.mobile : flatGroupVariants({ variant }), className)}\n        {...rest}\n      >\n        {children}\n      </Flexbox>\n    );\n  },\n);\n\nFormFlatGroup.displayName = 'FormFlatGroup';\n\nexport default FormFlatGroup;\n"],"mappings":";;;;;;;AAUA,MAAM,gBAAgB,MACnB,EAAE,WAAW,UAAU,UAAU,cAAc,GAAG,WAAW;CAC5D,MAAM,EAAE,WAAW,eAAe;AAGlC,QACE,oBAACA,mBAAD;EACE,WAAW,GAAG,SAJH,gBAImB,SAAS,kBAAkB,EAAE,SAAS,CAAC,EAAE,UAAU;EACjF,GAAI;EAEH;EACO,CAAA;EAGf;AAED,cAAc,cAAc"}
+{"version":3,"file":"FormFlatGroup.mjs","names":["Flexbox","styles"],"sources":["../../../src/Form/components/FormFlatGroup.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { flatGroupStyles, flatGroupVariants } from '../style';\nimport type { FormFlatGroupProps } from '../type';\n\nconst FormFlatGroup = memo<FormFlatGroupProps>(\n  ({ className, children, variant = 'borderless', ...rest }) => {\n    const { mobile } = useResponsive();\n    const styles = flatGroupStyles;\n\n    return (\n      <Flexbox\n        className={cx(mobile ? styles.mobile : flatGroupVariants({ variant }), className)}\n        {...rest}\n      >\n        {children}\n      </Flexbox>\n    );\n  },\n);\n\nFormFlatGroup.displayName = 'FormFlatGroup';\n\nexport default FormFlatGroup;\n"],"mappings":";;;;;;;AAUA,MAAM,gBAAgB,MACnB,EAAE,WAAW,UAAU,UAAU,cAAc,GAAG,WAAW;CAC5D,MAAM,EAAE,WAAW,eAAe;AAGlC,QACE,oBAACA,mBAAD;EACE,WAAW,GAAG,SAASC,gBAAO,SAAS,kBAAkB,EAAE,SAAS,CAAC,EAAE,UAAU;EACjF,GAAI;EAEH;EACO,CAAA;EAGf;AAED,cAAc,cAAc"}

package/es/Grid/Grid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.mjs","names":["Flexbox"],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { isString } from 'es-toolkit/compat';\nimport { type FC } from 'react';\nimport { useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { GridProps } from './type';\n\nconst Grid: FC<GridProps> = ({\n  className,\n  gap = '1em',\n  rows = 3,\n  children,\n  maxItemWidth = 240,\n  ref,\n  style,\n  ...rest\n}) => {\n  // Convert props to CSS variables\n  const cssVariables = useMemo<Record<string, string>>(() => {\n    const vars: Record<string, string> = {\n      '--grid-gap': isString(gap) ? gap : `${gap}px`,\n      '--grid-max-item-width': isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`,\n      '--grid-rows': `${rows}`,\n    };\n    return vars;\n  }, [gap, maxItemWidth, rows]);\n\n  return (\n    <Flexbox\n      className={cx(styles, className)}\n      gap={gap as any}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nGrid.displayName = 'Grid';\n\nexport default Grid;\n"],"mappings":";;;;;;;;AAYA,MAAM,QAAuB,EAC3B,WACA,MAAM,OACN,OAAO,GACP,UACA,eAAe,KACf,KACA,OACA,GAAG,WACC;CAEJ,MAAM,eAAe,cAAsC;AAMzD,SALqC;GACnC,cAAc,SAAS,IAAI,GAAG,MAAM,GAAG,IAAI;GAC3C,yBAAyB,SAAS,aAAa,GAAG,eAAe,GAAG,aAAa;GACjF,eAAe,GAAG;GACnB;IAEA;EAAC;EAAK;EAAc;EAAK,CAAC;AAE7B,QACE,oBAACA,mBAAD;EACE,WAAW,GAAG,QAAQ,UAAU;EAC3B;EACA;EACL,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAI;EAEH;EACO,CAAA;;AAId,KAAK,cAAc"}
+{"version":3,"file":"Grid.mjs","names":["Flexbox"],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { isString } from 'es-toolkit/compat';\nimport { type FC } from 'react';\nimport { useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { GridProps } from './type';\n\nconst Grid: FC<GridProps> = ({\n  className,\n  gap = '1em',\n  rows = 3,\n  children,\n  maxItemWidth = 240,\n  ref,\n  style,\n  ...rest\n}) => {\n  // Convert props to CSS variables\n  const cssVariables = useMemo<Record<string, string>>(() => {\n    const vars: Record<string, string> = {\n      '--grid-gap': isString(gap) ? gap : `${gap}px`,\n      '--grid-max-item-width': isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`,\n      '--grid-rows': `${rows}`,\n    };\n    return vars;\n  }, [gap, maxItemWidth, rows]);\n\n  return (\n    <Flexbox\n      className={cx(styles, className)}\n      gap={gap as any}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nGrid.displayName = 'Grid';\n\nexport default Grid;\n"],"mappings":";;;;;;;;AAYA,MAAM,QAAuB,EAC3B,WACA,MAAM,OACN,OAAO,GACP,UACA,eAAe,KACf,KACA,OACA,GAAG,WACC;CAEJ,MAAM,eAAe,cAAsC;AAMzD,SAAO;GAJL,cAAc,SAAS,IAAI,GAAG,MAAM,GAAG,IAAI;GAC3C,yBAAyB,SAAS,aAAa,GAAG,eAAe,GAAG,aAAa;GACjF,eAAe,GAAG;GAET;IACV;EAAC;EAAK;EAAc;EAAK,CAAC;AAE7B,QACE,oBAACA,mBAAD;EACE,WAAW,GAAG,QAAQ,UAAU;EAC3B;EACA;EACL,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAI;EAEH;EACO,CAAA;;AAId,KAAK,cAAc"}

package/es/Highlighter/LangSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LangSelect.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/LangSelect.tsx"],"sourcesContent":["'use client';\n\nimport { Select, type SelectProps } from 'antd';\nimport { memo, useMemo } from 'react';\nimport { bundledLanguagesInfo } from 'shiki';\n\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nexport const LangSelect = memo<Omit<SelectProps, 'options'>>(({ ...rest }) => {\n  const options = useMemo(\n    () => [\n      {\n        aliases: ['text', 'txt'],\n        label: (\n          <Flexbox horizontal align={'center'} gap={4}>\n            <MaterialFileTypeIcon\n              fallbackUnknownType={false}\n              filename={`*.txt`}\n              size={18}\n              type={'file'}\n              variant={'raw'}\n            />\n            <Text ellipsis fontSize={13}>\n              Plaintext\n            </Text>\n          </Flexbox>\n        ),\n        value: 'plaintext',\n      },\n      ...bundledLanguagesInfo.map((item) => ({\n        aliases: item.aliases,\n        label: (\n          <Flexbox horizontal align={'center'} gap={4}>\n            <MaterialFileTypeIcon\n              fallbackUnknownType={false}\n              filename={`*.${item?.aliases?.[0] || item.id}`}\n              size={18}\n              type={'file'}\n              variant={'raw'}\n            />\n            <Text ellipsis fontSize={13}>\n              {item.name}\n            </Text>\n          </Flexbox>\n        ),\n        title: (item.aliases || [item.id])\n          .filter(Boolean)\n          .map((item) => `*.${item}`)\n          .join(','),\n        value: item.id,\n      })),\n    ],\n    [],\n  );\n\n  return (\n    <Select\n      showSearch\n      className={'languageTitle'}\n      options={options}\n      size={'small'}\n      suffixIcon={false}\n      variant={'borderless'}\n      style={{\n        maxWidth: 240,\n        width: '100%',\n      }}\n      onClick={stopPropagation}\n      {...rest}\n    />\n  );\n});\n\nexport default LangSelect;\n"],"mappings":";;;;;;;;;;AAWA,MAAa,aAAa,MAAoC,EAAE,GAAG,WAAW;AA+C5E,QACE,oBAAC,QAAD;EACE,YAAA;EACA,WAAW;EACX,SAlDY,cACR,CACJ;GACE,SAAS,CAAC,QAAQ,MAAM;GACxB,OACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,KAAK;cAA1C,CACE,oBAAC,sBAAD;KACE,qBAAqB;KACrB,UAAU;KACV,MAAM;KACN,MAAM;KACN,SAAS;KACT,CAAA,EACF,oBAAC,MAAD;KAAM,UAAA;KAAS,UAAU;eAAI;KAEtB,CAAA,CACC;;GAEZ,OAAO;GACR,EACD,GAAG,qBAAqB,KAAK,UAAU;GACrC,SAAS,KAAK;GACd,OACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,KAAK;cAA1C,CACE,oBAAC,sBAAD;KACE,qBAAqB;KACrB,UAAU,KAAK,MAAM,UAAU,MAAM,KAAK;KAC1C,MAAM;KACN,MAAM;KACN,SAAS;KACT,CAAA,EACF,oBAAC,MAAD;KAAM,UAAA;KAAS,UAAU;eACtB,KAAK;KACD,CAAA,CACC;;GAEZ,QAAQ,KAAK,WAAW,CAAC,KAAK,GAAG,EAC9B,OAAO,QAAQ,CACf,KAAK,SAAS,KAAK,OAAO,CAC1B,KAAK,IAAI;GACZ,OAAO,KAAK;GACb,EAAE,CACJ,EACD,EAAE,CACH;EAOG,MAAM;EACN,YAAY;EACZ,SAAS;EACT,OAAO;GACL,UAAU;GACV,OAAO;GACR;EACD,SAAS;EACT,GAAI;EACJ,CAAA;EAEJ"}
+{"version":3,"file":"LangSelect.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/LangSelect.tsx"],"sourcesContent":["'use client';\n\nimport { Select, type SelectProps } from 'antd';\nimport { memo, useMemo } from 'react';\nimport { bundledLanguagesInfo } from 'shiki';\n\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nexport const LangSelect = memo<Omit<SelectProps, 'options'>>(({ ...rest }) => {\n  const options = useMemo(\n    () => [\n      {\n        aliases: ['text', 'txt'],\n        label: (\n          <Flexbox horizontal align={'center'} gap={4}>\n            <MaterialFileTypeIcon\n              fallbackUnknownType={false}\n              filename={`*.txt`}\n              size={18}\n              type={'file'}\n              variant={'raw'}\n            />\n            <Text ellipsis fontSize={13}>\n              Plaintext\n            </Text>\n          </Flexbox>\n        ),\n        value: 'plaintext',\n      },\n      ...bundledLanguagesInfo.map((item) => ({\n        aliases: item.aliases,\n        label: (\n          <Flexbox horizontal align={'center'} gap={4}>\n            <MaterialFileTypeIcon\n              fallbackUnknownType={false}\n              filename={`*.${item?.aliases?.[0] || item.id}`}\n              size={18}\n              type={'file'}\n              variant={'raw'}\n            />\n            <Text ellipsis fontSize={13}>\n              {item.name}\n            </Text>\n          </Flexbox>\n        ),\n        title: (item.aliases || [item.id])\n          .filter(Boolean)\n          .map((item) => `*.${item}`)\n          .join(','),\n        value: item.id,\n      })),\n    ],\n    [],\n  );\n\n  return (\n    <Select\n      showSearch\n      className={'languageTitle'}\n      options={options}\n      size={'small'}\n      suffixIcon={false}\n      variant={'borderless'}\n      style={{\n        maxWidth: 240,\n        width: '100%',\n      }}\n      onClick={stopPropagation}\n      {...rest}\n    />\n  );\n});\n\nexport default LangSelect;\n"],"mappings":";;;;;;;;;;AAWA,MAAa,aAAa,MAAoC,EAAE,GAAG,WAAW;AA+C5E,QACE,oBAAC,QAAD;EACE,YAAA;EACA,WAAW;EACX,SAlDY,cACR,CACJ;GACE,SAAS,CAAC,QAAQ,MAAM;GACxB,OACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,KAAK;cAA1C,CACE,oBAAC,sBAAD;KACE,qBAAqB;KACrB,UAAU;KACV,MAAM;KACN,MAAM;KACN,SAAS;KACT,CAAA,EACF,oBAAC,MAAD;KAAM,UAAA;KAAS,UAAU;eAAI;KAEtB,CAAA,CACC;;GAEZ,OAAO;GACR,EACD,GAAG,qBAAqB,KAAK,UAAU;GACrC,SAAS,KAAK;GACd,OACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,KAAK;cAA1C,CACE,oBAAC,sBAAD;KACE,qBAAqB;KACrB,UAAU,KAAK,MAAM,UAAU,MAAM,KAAK;KAC1C,MAAM;KACN,MAAM;KACN,SAAS;KACT,CAAA,EACF,oBAAC,MAAD;KAAM,UAAA;KAAS,UAAU;eACtB,KAAK;KACD,CAAA,CACC;;GAEZ,QAAQ,KAAK,WAAW,CAAC,KAAK,GAAG,EAC9B,OAAO,QAAQ,CACf,KAAK,SAAS,KAAK,OAAO,CAC1B,KAAK,IAAI;GACZ,OAAO,KAAK;GACb,EAAE,CACJ,EACD,EAAE,CAOgB;EAChB,MAAM;EACN,YAAY;EACZ,SAAS;EACT,OAAO;GACL,UAAU;GACV,OAAO;GACR;EACD,SAAS;EACT,GAAI;EACJ,CAAA;EAEJ"}

package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StreamRenderer.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { getTokenStyleObject } from '@shikijs/core';\nimport { cx } from 'antd-style';\nimport type { CSSProperties } from 'react';\nimport { memo } from 'react';\nimport type { BuiltinTheme, ThemedToken } from 'shiki';\n\nimport { useStreamHighlight } from '@/hooks/useStreamHighlight';\n\ninterface StreamRendererProps {\n  children: string;\n  className?: string;\n  enableTransformer?: boolean;\n  fallbackClassName?: string;\n  language: string;\n  style?: CSSProperties;\n  theme?: BuiltinTheme;\n}\n\nconst normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {\n  const normalized: CSSProperties = {};\n  Object.entries(style).forEach(([key, value]) => {\n    const normalizedKey = key.replaceAll(/-([a-z])/g, (_, char) => char.toUpperCase());\n    (normalized as Record<string, string | number>)[normalizedKey] = value;\n  });\n  return normalized;\n};\n\nconst getTokenInlineStyle = (token: ThemedToken): CSSProperties => {\n  const rawStyle = token.htmlStyle || getTokenStyleObject(token);\n  const baseStyle = normalizeStyleKeys(rawStyle);\n  return { ...baseStyle, whiteSpace: 'pre' };\n};\n\nconst TokenSpan = memo(\n  ({ token }: { token: ThemedToken }) => {\n    return (\n      <span key={token.content} style={getTokenInlineStyle(token)}>\n        {token.content}\n      </span>\n    );\n  },\n  (prev, next) => prev.token === next.token,\n);\n\nconst TokenLine = memo(\n  ({ line }: { line: ThemedToken[] }) => {\n    if (!line.length) {\n      return (\n        <span className=\"line\">\n          <span style={{ whiteSpace: 'pre' }}>{'\\u00A0'}</span>\n        </span>\n      );\n    }\n\n    return (\n      <span className=\"line\">\n        {line.map((token, tokenIndex) => (\n          <TokenSpan key={`token-${tokenIndex}`} token={token} />\n        ))}\n      </span>\n    );\n  },\n  (prev, next) => prev.line === next.line,\n);\n\nconst StreamRenderer = memo<StreamRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const streaming = useStreamHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      streaming: true,\n      theme,\n    });\n\n    const lines = streaming?.lines;\n    const preStyle = streaming?.preStyle;\n\n    if (!lines || lines.length === 0) {\n      return (\n        <div className={fallbackClassName} dir=\"ltr\" style={style}>\n          <pre>\n            <code>{safeChildren}</code>\n          </pre>\n        </div>\n      );\n    }\n\n    return (\n      <div className={className} dir=\"ltr\" style={style}>\n        <pre className={cx('shiki', theme)} style={preStyle} tabIndex={0}>\n          <code style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'pre' }}>\n            {lines.map((line, index) => (\n              <TokenLine key={`line-${index}`} line={line} />\n            ))}\n          </code>\n        </pre>\n      </div>\n    );\n  },\n);\n\nStreamRenderer.displayName = 'StreamRenderer';\n\nexport default StreamRenderer;\n"],"mappings":";;;;;;;AAoBA,MAAM,sBAAsB,UAA0D;CACpF,MAAM,aAA4B,EAAE;AACpC,QAAO,QAAQ,MAAM,CAAC,SAAS,CAAC,KAAK,WAAW;EAC9C,MAAM,gBAAgB,IAAI,WAAW,cAAc,GAAG,SAAS,KAAK,aAAa,CAAC;AACjF,aAA+C,iBAAiB;GACjE;AACF,QAAO;;AAGT,MAAM,uBAAuB,UAAsC;AAGjE,QAAO;EAAE,GADS,mBADD,MAAM,aAAa,oBAAoB,MAAM,CAChB;EACvB,YAAY;EAAO;;AAG5C,MAAM,YAAY,MACf,EAAE,YAAoC;AACrC,QACE,oBAAC,QAAD;EAA0B,OAAO,oBAAoB,MAAM;YACxD,MAAM;EACF,EAFI,MAAM,QAEV;IAGV,MAAM,SAAS,KAAK,UAAU,KAAK,MACrC;AAED,MAAM,YAAY,MACf,EAAE,WAAoC;AACrC,KAAI,CAAC,KAAK,OACR,QACE,oBAAC,QAAD;EAAM,WAAU;YACd,oBAAC,QAAD;GAAM,OAAO,EAAE,YAAY,OAAO;aAAG;GAAgB,CAAA;EAChD,CAAA;AAIX,QACE,oBAAC,QAAD;EAAM,WAAU;YACb,KAAK,KAAK,OAAO,eAChB,oBAAC,WAAD,EAA8C,OAAS,EAAvC,SAAS,aAA8B,CACvD;EACG,CAAA;IAGV,MAAM,SAAS,KAAK,SAAS,KAAK,KACpC;AAED,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CAEzF,MAAM,eAAe,YAAY;CAEjC,MAAM,YAAY,mBAAmB,cAAc;EACjD;EACA;EACA,WAAW;EACX;EACD,CAAC;CAEF,MAAM,QAAQ,WAAW;CACzB,MAAM,WAAW,WAAW;AAE5B,KAAI,CAAC,SAAS,MAAM,WAAW,EAC7B,QACE,oBAAC,OAAD;EAAK,WAAW;EAAmB,KAAI;EAAa;YAClD,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UAAO,cAAoB,CAAA,EACvB,CAAA;EACF,CAAA;AAIV,QACE,oBAAC,OAAD;EAAgB;EAAW,KAAI;EAAa;YAC1C,oBAAC,OAAD;GAAK,WAAW,GAAG,SAAS,MAAM;GAAE,OAAO;GAAU,UAAU;aAC7D,oBAAC,QAAD;IAAM,OAAO;KAAE,SAAS;KAAQ,eAAe;KAAU,YAAY;KAAO;cACzE,MAAM,KAAK,MAAM,UAChB,oBAAC,WAAD,EAAuC,MAAQ,EAA/B,QAAQ,QAAuB,CAC/C;IACG,CAAA;GACH,CAAA;EACF,CAAA;EAGX;AAED,eAAe,cAAc"}
+{"version":3,"file":"StreamRenderer.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { getTokenStyleObject } from '@shikijs/core';\nimport { cx } from 'antd-style';\nimport type { CSSProperties } from 'react';\nimport { memo } from 'react';\nimport type { BuiltinTheme, ThemedToken } from 'shiki';\n\nimport { useStreamHighlight } from '@/hooks/useStreamHighlight';\n\ninterface StreamRendererProps {\n  children: string;\n  className?: string;\n  enableTransformer?: boolean;\n  fallbackClassName?: string;\n  language: string;\n  style?: CSSProperties;\n  theme?: BuiltinTheme;\n}\n\nconst normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {\n  const normalized: CSSProperties = {};\n  Object.entries(style).forEach(([key, value]) => {\n    const normalizedKey = key.replaceAll(/-([a-z])/g, (_, char) => char.toUpperCase());\n    (normalized as Record<string, string | number>)[normalizedKey] = value;\n  });\n  return normalized;\n};\n\nconst getTokenInlineStyle = (token: ThemedToken): CSSProperties => {\n  const rawStyle = token.htmlStyle || getTokenStyleObject(token);\n  const baseStyle = normalizeStyleKeys(rawStyle);\n  return { ...baseStyle, whiteSpace: 'pre' };\n};\n\nconst TokenSpan = memo(\n  ({ token }: { token: ThemedToken }) => {\n    return (\n      <span key={token.content} style={getTokenInlineStyle(token)}>\n        {token.content}\n      </span>\n    );\n  },\n  (prev, next) => prev.token === next.token,\n);\n\nconst TokenLine = memo(\n  ({ line }: { line: ThemedToken[] }) => {\n    if (!line.length) {\n      return (\n        <span className=\"line\">\n          <span style={{ whiteSpace: 'pre' }}>{'\\u00A0'}</span>\n        </span>\n      );\n    }\n\n    return (\n      <span className=\"line\">\n        {line.map((token, tokenIndex) => (\n          <TokenSpan key={`token-${tokenIndex}`} token={token} />\n        ))}\n      </span>\n    );\n  },\n  (prev, next) => prev.line === next.line,\n);\n\nconst StreamRenderer = memo<StreamRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const streaming = useStreamHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      streaming: true,\n      theme,\n    });\n\n    const lines = streaming?.lines;\n    const preStyle = streaming?.preStyle;\n\n    if (!lines || lines.length === 0) {\n      return (\n        <div className={fallbackClassName} dir=\"ltr\" style={style}>\n          <pre>\n            <code>{safeChildren}</code>\n          </pre>\n        </div>\n      );\n    }\n\n    return (\n      <div className={className} dir=\"ltr\" style={style}>\n        <pre className={cx('shiki', theme)} style={preStyle} tabIndex={0}>\n          <code style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'pre' }}>\n            {lines.map((line, index) => (\n              <TokenLine key={`line-${index}`} line={line} />\n            ))}\n          </code>\n        </pre>\n      </div>\n    );\n  },\n);\n\nStreamRenderer.displayName = 'StreamRenderer';\n\nexport default StreamRenderer;\n"],"mappings":";;;;;;;AAoBA,MAAM,sBAAsB,UAA0D;CACpF,MAAM,aAA4B,EAAE;AACpC,QAAO,QAAQ,MAAM,CAAC,SAAS,CAAC,KAAK,WAAW;EAC9C,MAAM,gBAAgB,IAAI,WAAW,cAAc,GAAG,SAAS,KAAK,aAAa,CAAC;AACjF,aAA+C,iBAAiB;GACjE;AACF,QAAO;;AAGT,MAAM,uBAAuB,UAAsC;AAGjE,QAAO;EAAE,GADS,mBADD,MAAM,aAAa,oBAAoB,MAAM,CAEzC;EAAE,YAAY;EAAO;;AAG5C,MAAM,YAAY,MACf,EAAE,YAAoC;AACrC,QACE,oBAAC,QAAD;EAA0B,OAAO,oBAAoB,MAAM;YACxD,MAAM;EACF,EAFI,MAAM,QAEV;IAGV,MAAM,SAAS,KAAK,UAAU,KAAK,MACrC;AAED,MAAM,YAAY,MACf,EAAE,WAAoC;AACrC,KAAI,CAAC,KAAK,OACR,QACE,oBAAC,QAAD;EAAM,WAAU;YACd,oBAAC,QAAD;GAAM,OAAO,EAAE,YAAY,OAAO;aAAG;GAAgB,CAAA;EAChD,CAAA;AAIX,QACE,oBAAC,QAAD;EAAM,WAAU;YACb,KAAK,KAAK,OAAO,eAChB,oBAAC,WAAD,EAA8C,OAAS,EAAvC,SAAS,aAA8B,CACvD;EACG,CAAA;IAGV,MAAM,SAAS,KAAK,SAAS,KAAK,KACpC;AAED,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CAEzF,MAAM,eAAe,YAAY;CAEjC,MAAM,YAAY,mBAAmB,cAAc;EACjD;EACA;EACA,WAAW;EACX;EACD,CAAC;CAEF,MAAM,QAAQ,WAAW;CACzB,MAAM,WAAW,WAAW;AAE5B,KAAI,CAAC,SAAS,MAAM,WAAW,EAC7B,QACE,oBAAC,OAAD;EAAK,WAAW;EAAmB,KAAI;EAAa;YAClD,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UAAO,cAAoB,CAAA,EACvB,CAAA;EACF,CAAA;AAIV,QACE,oBAAC,OAAD;EAAgB;EAAW,KAAI;EAAa;YAC1C,oBAAC,OAAD;GAAK,WAAW,GAAG,SAAS,MAAM;GAAE,OAAO;GAAU,UAAU;aAC7D,oBAAC,QAAD;IAAM,OAAO;KAAE,SAAS;KAAQ,eAAe;KAAU,YAAY;KAAO;cACzE,MAAM,KAAK,MAAM,UAChB,oBAAC,WAAD,EAAuC,MAAQ,EAA/B,QAAQ,QAAuB,CAC/C;IACG,CAAA;GACH,CAAA;EACF,CAAA;EAGX;AAED,eAAe,cAAc"}

package/es/Highlighter/const.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"const.mjs","names":[],"sources":["../../src/Highlighter/const.ts"],"sourcesContent":["import { bundledLanguagesInfo, bundledThemesInfo } from 'shiki';\n\ninterface HighlighterThemeItem {\n  displayName: string;\n  id: string;\n}\n\nexport const highlighterThemes: HighlighterThemeItem[] = [\n  {\n    displayName: 'Lobe Theme',\n    id: 'lobe-theme',\n  },\n  ...bundledThemesInfo.map((item) => ({\n    displayName: item.displayName,\n    id: item.id,\n  })),\n];\n\nexport const FALLBACK_LANG = 'plaintext';\n\nexport const getCodeLanguageByInput = (input: string): string => {\n  if (!input) {\n    return 'plaintext';\n  }\n  const inputLang = input.toLocaleLowerCase();\n\n  const matchLang = bundledLanguagesInfo.find(\n    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),\n  );\n  return matchLang?.id || 'plaintext';\n};\n\nexport const getCodeLanguageFilename = (input: string): string => {\n  if (!input) {\n    return 'Plaintext';\n  }\n  const inputLang = input.toLocaleLowerCase();\n\n  const matchLang = bundledLanguagesInfo.find(\n    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),\n  );\n  const type = matchLang?.aliases?.[0] || matchLang?.id || 'txt';\n  return `*.${type}`;\n};\n\nexport const getCodeLanguageDisplayName = (input: string): string => {\n  if (!input) {\n    return 'Plaintext';\n  }\n  const inputLang = input.toLocaleLowerCase();\n\n  const matchLang = bundledLanguagesInfo.find(\n    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),\n  );\n  return matchLang?.name || 'Plaintext';\n};\n"],"mappings":";;AAOA,MAAa,oBAA4C,CACvD;CACE,aAAa;CACb,IAAI;CACL,EACD,GAAG,kBAAkB,KAAK,UAAU;CAClC,aAAa,KAAK;CAClB,IAAI,KAAK;CACV,EAAE,CACJ;AAED,MAAa,gBAAgB;AAE7B,MAAa,0BAA0B,UAA0B;AAC/D,KAAI,CAAC,MACH,QAAO;CAET,MAAM,YAAY,MAAM,mBAAmB;AAK3C,QAHkB,qBAAqB,MACpC,SAAS,KAAK,OAAO,aAAa,KAAK,SAAS,SAAS,UAAU,CACrE,EACiB,MAAM;;AAG1B,MAAa,2BAA2B,UAA0B;AAChE,KAAI,CAAC,MACH,QAAO;CAET,MAAM,YAAY,MAAM,mBAAmB;CAE3C,MAAM,YAAY,qBAAqB,MACpC,SAAS,KAAK,OAAO,aAAa,KAAK,SAAS,SAAS,UAAU,CACrE;AAED,QAAO,KADM,WAAW,UAAU,MAAM,WAAW,MAAM;;AAI3D,MAAa,8BAA8B,UAA0B;AACnE,KAAI,CAAC,MACH,QAAO;CAET,MAAM,YAAY,MAAM,mBAAmB;AAK3C,QAHkB,qBAAqB,MACpC,SAAS,KAAK,OAAO,aAAa,KAAK,SAAS,SAAS,UAAU,CACrE,EACiB,QAAQ"}
+{"version":3,"file":"const.mjs","names":[],"sources":["../../src/Highlighter/const.ts"],"sourcesContent":["import { bundledLanguagesInfo, bundledThemesInfo } from 'shiki';\n\ninterface HighlighterThemeItem {\n  displayName: string;\n  id: string;\n}\n\nexport const highlighterThemes: HighlighterThemeItem[] = [\n  {\n    displayName: 'Lobe Theme',\n    id: 'lobe-theme',\n  },\n  ...bundledThemesInfo.map((item) => ({\n    displayName: item.displayName,\n    id: item.id,\n  })),\n];\n\nexport const FALLBACK_LANG = 'plaintext';\n\nexport const getCodeLanguageByInput = (input: string): string => {\n  if (!input) {\n    return 'plaintext';\n  }\n  const inputLang = input.toLocaleLowerCase();\n\n  const matchLang = bundledLanguagesInfo.find(\n    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),\n  );\n  return matchLang?.id || 'plaintext';\n};\n\nexport const getCodeLanguageFilename = (input: string): string => {\n  if (!input) {\n    return 'Plaintext';\n  }\n  const inputLang = input.toLocaleLowerCase();\n\n  const matchLang = bundledLanguagesInfo.find(\n    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),\n  );\n  const type = matchLang?.aliases?.[0] || matchLang?.id || 'txt';\n  return `*.${type}`;\n};\n\nexport const getCodeLanguageDisplayName = (input: string): string => {\n  if (!input) {\n    return 'Plaintext';\n  }\n  const inputLang = input.toLocaleLowerCase();\n\n  const matchLang = bundledLanguagesInfo.find(\n    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),\n  );\n  return matchLang?.name || 'Plaintext';\n};\n"],"mappings":";;AAOA,MAAa,oBAA4C,CACvD;CACE,aAAa;CACb,IAAI;CACL,EACD,GAAG,kBAAkB,KAAK,UAAU;CAClC,aAAa,KAAK;CAClB,IAAI,KAAK;CACV,EAAE,CACJ;AAED,MAAa,gBAAgB;AAE7B,MAAa,0BAA0B,UAA0B;AAC/D,KAAI,CAAC,MACH,QAAO;CAET,MAAM,YAAY,MAAM,mBAAmB;AAK3C,QAHkB,qBAAqB,MACpC,SAAS,KAAK,OAAO,aAAa,KAAK,SAAS,SAAS,UAAU,CAEtD,EAAE,MAAM;;AAG1B,MAAa,2BAA2B,UAA0B;AAChE,KAAI,CAAC,MACH,QAAO;CAET,MAAM,YAAY,MAAM,mBAAmB;CAE3C,MAAM,YAAY,qBAAqB,MACpC,SAAS,KAAK,OAAO,aAAa,KAAK,SAAS,SAAS,UAAU,CACrE;AAED,QAAO,KADM,WAAW,UAAU,MAAM,WAAW,MAAM;;AAI3D,MAAa,8BAA8B,UAA0B;AACnE,KAAI,CAAC,MACH,QAAO;CAET,MAAM,YAAY,MAAM,mBAAmB;AAK3C,QAHkB,qBAAqB,MACpC,SAAS,KAAK,OAAO,aAAa,KAAK,SAAS,SAAS,UAAU,CAEtD,EAAE,QAAQ"}