@lobehub/ui 5.20.0 → 5.20.2

package/es/DraggableSideNav/DraggableSideNav.mjs.map

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

package/es/EditableText/EditableText.mjs.map

@@ -1 +1 @@
-{"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"}
+{"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"}

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 useMergeState from "use-merge-value";
+import useControlledState 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] = useMergeState(defaultOpen, {
+	const [visible, setVisible] = useControlledState(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] = useMergeState(defaultAvatar, {
+	const [ava, setAva] = useControlledState(defaultAvatar, {
 		defaultValue: defaultAvatar,
 		onChange,
 		value

package/es/EmojiPicker/EmojiPicker.mjs.map

@@ -1 +1 @@
-{"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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"}
+{"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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"}

package/es/HotkeyInput/HotkeyInput.mjs

@@ -9,7 +9,7 @@ import { styles, variants } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx, useThemeMode } from "antd-style";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 import { isEqual } from "es-toolkit/compat";
 import { Undo2Icon, XIcon } from "lucide-react";
 import { useHotkeys, useRecordHotkeys } from "react-hotkeys-hook";
@@ -22,7 +22,7 @@ const HotkeyInput = memo(({ value = "", defaultValue = "", resetValue = "", onCh
 	const { isDarkMode } = useThemeMode();
 	const { t } = useTranslation(hotkey_default);
 	const isAppleDevice = useMemo(() => checkIsAppleDevice(isApple), [isApple]);
-	const [hotkeyValue, setHotkeyValue] = useMergeState(defaultValue, {
+	const [hotkeyValue, setHotkeyValue] = useControlledState(defaultValue, {
 		defaultValue,
 		onChange,
 		value

package/es/HotkeyInput/HotkeyInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HotkeyInput.mjs","names":["hotkeyMessages","useControlledState","Flexbox"],"sources":["../../src/HotkeyInput/HotkeyInput.tsx"],"sourcesContent":["'use client';\n\nimport { type InputRef } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { isEqual } from 'es-toolkit/compat';\nimport { Undo2Icon, XIcon } from 'lucide-react';\nimport {\n  type FocusEvent,\n  memo,\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useHotkeys, useRecordHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Hotkey from '@/Hotkey';\nimport { checkIsAppleDevice, NORMATIVE_MODIFIER, splitKeysByPlus } from '@/Hotkey/utils';\nimport hotkeyMessages from '@/i18n/resources/en/hotkey';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { styles, variants } from './style';\nimport { type HotkeyInputProps } from './type';\n\nconst HotkeyInput = memo<HotkeyInputProps>(\n  ({\n    value = '',\n    defaultValue = '',\n    resetValue = '',\n    onChange,\n    onClear,\n    onConflict,\n    placeholder,\n    disabled,\n    shadow,\n    allowClear,\n    allowReset = true,\n    style,\n    className,\n    hotkeyConflicts = [],\n    variant,\n    texts,\n    isApple,\n    onBlur,\n    onReset,\n    onFocus,\n  }) => {\n    const [isFocused, setIsFocused] = useState(false);\n    const [hasConflict, setHasConflict] = useState(false);\n    const [hasInvalidCombination, setHasInvalidCombination] = useState(false);\n    const inputRef = useRef<InputRef>(null);\n    const { isDarkMode } = useThemeMode();\n    const { t } = useTranslation(hotkeyMessages);\n    const isAppleDevice = useMemo(() => checkIsAppleDevice(isApple), [isApple]);\n    const [hotkeyValue, setHotkeyValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    // 使用 useRecordHotkeys 处理快捷键录入\n    const [recordedKeys, { start, stop, isRecording, resetKeys }] = useRecordHotkeys();\n\n    useHotkeys(\n      '*',\n      () => {\n        inputRef.current?.blur();\n      },\n      {\n        enableOnContentEditable: true,\n        enableOnFormTags: true,\n        enabled: isRecording && !disabled,\n        keydown: false,\n        keyup: true,\n        preventDefault: true,\n      },\n    );\n\n    // 处理按键，保证格式正确：修饰键在前，最多一个非修饰键在后\n    const formatKeys = useCallback((keysSet: Set<string>) => {\n      const modifiers: string[] = [];\n      const normalKeys: string[] = [];\n\n      for (const key of keysSet) {\n        // 处理不同表示的修饰键\n        const normalizedKey: any = key.toLowerCase();\n        if (NORMATIVE_MODIFIER.includes(normalizedKey)) {\n          // 统一修饰键表示\n          if (\n            (!isAppleDevice && normalizedKey === 'ctrl') ||\n            (isAppleDevice && normalizedKey === 'meta')\n          ) {\n            if (!modifiers.includes('mod')) modifiers.push('mod');\n          } else if (!modifiers.includes(normalizedKey)) {\n            modifiers.push(normalizedKey);\n          }\n        } else {\n          normalKeys.push(key);\n        }\n      }\n\n      // 至少需要一个修饰键\n      if (modifiers.length === 0 && normalKeys.length > 0) {\n        return { isValid: false, keys: [] };\n      }\n\n      // 只允许一个非修饰键，如果有多个，只保留最后一个\n      const finalKey = normalKeys.length > 0 ? [normalKeys.at(-1)] : [];\n      const shortcuts = [modifiers, finalKey];\n\n      return {\n        // 组合必须包含至少一个按键\n        isValid: shortcuts.every((k) => k.length > 0),\n        keys: shortcuts.flat(),\n      };\n    }, []);\n\n    // 获取格式化后的按键字符串\n    const { isValid, keys } = formatKeys(recordedKeys);\n    const keysString = keys.join('+');\n\n    // 检查快捷键冲突\n    const checkHotkeyConflict = useCallback(\n      (newHotkey: string): boolean => {\n        return hotkeyConflicts\n          .filter((conflictKey) => conflictKey !== resetValue)\n          .some((conflictKey) => {\n            const newKeys = splitKeysByPlus(newHotkey);\n            const conflictKeys = splitKeysByPlus(conflictKey);\n            return isEqual(newKeys, conflictKeys);\n          });\n      },\n      [hotkeyConflicts],\n    );\n\n    // 当按键组合完成时处理结果\n    useEffect(() => {\n      if (recordedKeys.size > 0 && !isRecording) {\n        if (!isValid) {\n          setHasInvalidCombination(true);\n          setHasConflict(false);\n          return;\n        }\n\n        setHasInvalidCombination(false);\n        const newKeysString = keysString;\n\n        // 检查冲突\n        const conflict = checkHotkeyConflict(newKeysString);\n        if (conflict) {\n          setHasConflict(true);\n          onConflict?.(newKeysString);\n        } else {\n          setHasConflict(false);\n          setHotkeyValue?.(newKeysString);\n        }\n      }\n    }, [\n      recordedKeys,\n      isRecording,\n      isValid,\n      keysString,\n      checkHotkeyConflict,\n      setHotkeyValue,\n      onConflict,\n    ]);\n\n    // 处理输入框焦点\n    const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      setIsFocused(true);\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      start(); // 开始记录\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {\n      setIsFocused(false);\n      stop(); // 停止记录\n      onBlur?.(e);\n    };\n\n    const handleClear = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setHotkeyValue?.('');\n      resetKeys();\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      setIsFocused(false);\n      stop();\n      onClear?.(hotkeyValue);\n    };\n\n    // 重置功能\n    const handleReset = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setHotkeyValue?.(resetValue);\n      resetKeys();\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      setIsFocused(false);\n      stop(); // 停止记录\n      onReset?.(hotkeyValue, resetValue);\n    };\n\n    const handleClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (disabled || isFocused) return;\n      inputRef.current?.focus();\n    };\n\n    const placeholderText = placeholder ?? t('hotkey.placeholder');\n    const resetTitle = texts?.reset ?? t('hotkey.reset');\n    const clearTitle = texts?.clear ?? t('hotkey.clear');\n    const conflictText = texts?.conflicts ?? t('hotkey.conflict');\n    const invalidText = texts?.invalidCombination ?? t('hotkey.invalidCombination');\n\n    return (\n      <Flexbox\n        className={className}\n        gap={8}\n        style={{\n          position: 'relative',\n          ...style,\n        }}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          justify={'space-between'}\n          className={cx(\n            variants({\n              disabled,\n              error: hasConflict || hasInvalidCombination,\n              focused: isFocused,\n              shadow,\n              variant: variant || (isDarkMode ? 'filled' : 'outlined'),\n            }),\n          )}\n          onClick={handleClick}\n        >\n          <div style={{ pointerEvents: 'none' }}>\n            {isRecording ? (\n              <span className={styles.placeholder}>\n                {keys.length > 0 ? <Hotkey keys={keysString} /> : placeholderText}\n              </span>\n            ) : hotkeyValue ? (\n              <Hotkey keys={hotkeyValue} />\n            ) : (\n              <span className={styles.placeholder}>{placeholderText}</span>\n            )}\n          </div>\n\n          {/* 隐藏的输入框，用于接收焦点 */}\n          <input\n            readOnly\n            className={styles.hiddenInput}\n            disabled={disabled}\n            ref={inputRef as any}\n            style={{ pointerEvents: 'none' }}\n            onBlur={handleBlur}\n            onFocus={handleFocus}\n          />\n\n          {!isFocused && hotkeyValue && !disabled && (allowReset || allowClear) && (\n            <Flexbox horizontal gap={4}>\n              {allowReset && hotkeyValue !== resetValue && (\n                <ActionIcon\n                  icon={Undo2Icon}\n                  size={'small'}\n                  title={resetTitle}\n                  variant={'filled'}\n                  onClick={handleReset}\n                />\n              )}\n              {allowClear && (\n                <ActionIcon\n                  icon={XIcon}\n                  size={'small'}\n                  title={clearTitle}\n                  variant={'filled'}\n                  onClick={handleClear}\n                />\n              )}\n            </Flexbox>\n          )}\n        </Flexbox>\n        {hasConflict && <div className={styles.errorText}>{conflictText}</div>}\n        {hasInvalidCombination && <div className={styles.errorText}>{invalidText}</div>}\n      </Flexbox>\n    );\n  },\n);\n\nHotkeyInput.displayName = 'HotkeyInput';\n\nexport default HotkeyInput;\n"],"mappings":"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"}
+{"version":3,"file":"HotkeyInput.mjs","names":["hotkeyMessages","Flexbox"],"sources":["../../src/HotkeyInput/HotkeyInput.tsx"],"sourcesContent":["'use client';\n\nimport { type InputRef } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { isEqual } from 'es-toolkit/compat';\nimport { Undo2Icon, XIcon } from 'lucide-react';\nimport {\n  type FocusEvent,\n  memo,\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useHotkeys, useRecordHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Hotkey from '@/Hotkey';\nimport { checkIsAppleDevice, NORMATIVE_MODIFIER, splitKeysByPlus } from '@/Hotkey/utils';\nimport hotkeyMessages from '@/i18n/resources/en/hotkey';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { styles, variants } from './style';\nimport { type HotkeyInputProps } from './type';\n\nconst HotkeyInput = memo<HotkeyInputProps>(\n  ({\n    value = '',\n    defaultValue = '',\n    resetValue = '',\n    onChange,\n    onClear,\n    onConflict,\n    placeholder,\n    disabled,\n    shadow,\n    allowClear,\n    allowReset = true,\n    style,\n    className,\n    hotkeyConflicts = [],\n    variant,\n    texts,\n    isApple,\n    onBlur,\n    onReset,\n    onFocus,\n  }) => {\n    const [isFocused, setIsFocused] = useState(false);\n    const [hasConflict, setHasConflict] = useState(false);\n    const [hasInvalidCombination, setHasInvalidCombination] = useState(false);\n    const inputRef = useRef<InputRef>(null);\n    const { isDarkMode } = useThemeMode();\n    const { t } = useTranslation(hotkeyMessages);\n    const isAppleDevice = useMemo(() => checkIsAppleDevice(isApple), [isApple]);\n    const [hotkeyValue, setHotkeyValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    // 使用 useRecordHotkeys 处理快捷键录入\n    const [recordedKeys, { start, stop, isRecording, resetKeys }] = useRecordHotkeys();\n\n    useHotkeys(\n      '*',\n      () => {\n        inputRef.current?.blur();\n      },\n      {\n        enableOnContentEditable: true,\n        enableOnFormTags: true,\n        enabled: isRecording && !disabled,\n        keydown: false,\n        keyup: true,\n        preventDefault: true,\n      },\n    );\n\n    // 处理按键，保证格式正确：修饰键在前，最多一个非修饰键在后\n    const formatKeys = useCallback((keysSet: Set<string>) => {\n      const modifiers: string[] = [];\n      const normalKeys: string[] = [];\n\n      for (const key of keysSet) {\n        // 处理不同表示的修饰键\n        const normalizedKey: any = key.toLowerCase();\n        if (NORMATIVE_MODIFIER.includes(normalizedKey)) {\n          // 统一修饰键表示\n          if (\n            (!isAppleDevice && normalizedKey === 'ctrl') ||\n            (isAppleDevice && normalizedKey === 'meta')\n          ) {\n            if (!modifiers.includes('mod')) modifiers.push('mod');\n          } else if (!modifiers.includes(normalizedKey)) {\n            modifiers.push(normalizedKey);\n          }\n        } else {\n          normalKeys.push(key);\n        }\n      }\n\n      // 至少需要一个修饰键\n      if (modifiers.length === 0 && normalKeys.length > 0) {\n        return { isValid: false, keys: [] };\n      }\n\n      // 只允许一个非修饰键，如果有多个，只保留最后一个\n      const finalKey = normalKeys.length > 0 ? [normalKeys.at(-1)] : [];\n      const shortcuts = [modifiers, finalKey];\n\n      return {\n        // 组合必须包含至少一个按键\n        isValid: shortcuts.every((k) => k.length > 0),\n        keys: shortcuts.flat(),\n      };\n    }, []);\n\n    // 获取格式化后的按键字符串\n    const { isValid, keys } = formatKeys(recordedKeys);\n    const keysString = keys.join('+');\n\n    // 检查快捷键冲突\n    const checkHotkeyConflict = useCallback(\n      (newHotkey: string): boolean => {\n        return hotkeyConflicts\n          .filter((conflictKey) => conflictKey !== resetValue)\n          .some((conflictKey) => {\n            const newKeys = splitKeysByPlus(newHotkey);\n            const conflictKeys = splitKeysByPlus(conflictKey);\n            return isEqual(newKeys, conflictKeys);\n          });\n      },\n      [hotkeyConflicts],\n    );\n\n    // 当按键组合完成时处理结果\n    useEffect(() => {\n      if (recordedKeys.size > 0 && !isRecording) {\n        if (!isValid) {\n          setHasInvalidCombination(true);\n          setHasConflict(false);\n          return;\n        }\n\n        setHasInvalidCombination(false);\n        const newKeysString = keysString;\n\n        // 检查冲突\n        const conflict = checkHotkeyConflict(newKeysString);\n        if (conflict) {\n          setHasConflict(true);\n          onConflict?.(newKeysString);\n        } else {\n          setHasConflict(false);\n          setHotkeyValue?.(newKeysString);\n        }\n      }\n    }, [\n      recordedKeys,\n      isRecording,\n      isValid,\n      keysString,\n      checkHotkeyConflict,\n      setHotkeyValue,\n      onConflict,\n    ]);\n\n    // 处理输入框焦点\n    const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      setIsFocused(true);\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      start(); // 开始记录\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {\n      setIsFocused(false);\n      stop(); // 停止记录\n      onBlur?.(e);\n    };\n\n    const handleClear = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setHotkeyValue?.('');\n      resetKeys();\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      setIsFocused(false);\n      stop();\n      onClear?.(hotkeyValue);\n    };\n\n    // 重置功能\n    const handleReset = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setHotkeyValue?.(resetValue);\n      resetKeys();\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      setIsFocused(false);\n      stop(); // 停止记录\n      onReset?.(hotkeyValue, resetValue);\n    };\n\n    const handleClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (disabled || isFocused) return;\n      inputRef.current?.focus();\n    };\n\n    const placeholderText = placeholder ?? t('hotkey.placeholder');\n    const resetTitle = texts?.reset ?? t('hotkey.reset');\n    const clearTitle = texts?.clear ?? t('hotkey.clear');\n    const conflictText = texts?.conflicts ?? t('hotkey.conflict');\n    const invalidText = texts?.invalidCombination ?? t('hotkey.invalidCombination');\n\n    return (\n      <Flexbox\n        className={className}\n        gap={8}\n        style={{\n          position: 'relative',\n          ...style,\n        }}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          justify={'space-between'}\n          className={cx(\n            variants({\n              disabled,\n              error: hasConflict || hasInvalidCombination,\n              focused: isFocused,\n              shadow,\n              variant: variant || (isDarkMode ? 'filled' : 'outlined'),\n            }),\n          )}\n          onClick={handleClick}\n        >\n          <div style={{ pointerEvents: 'none' }}>\n            {isRecording ? (\n              <span className={styles.placeholder}>\n                {keys.length > 0 ? <Hotkey keys={keysString} /> : placeholderText}\n              </span>\n            ) : hotkeyValue ? (\n              <Hotkey keys={hotkeyValue} />\n            ) : (\n              <span className={styles.placeholder}>{placeholderText}</span>\n            )}\n          </div>\n\n          {/* 隐藏的输入框，用于接收焦点 */}\n          <input\n            readOnly\n            className={styles.hiddenInput}\n            disabled={disabled}\n            ref={inputRef as any}\n            style={{ pointerEvents: 'none' }}\n            onBlur={handleBlur}\n            onFocus={handleFocus}\n          />\n\n          {!isFocused && hotkeyValue && !disabled && (allowReset || allowClear) && (\n            <Flexbox horizontal gap={4}>\n              {allowReset && hotkeyValue !== resetValue && (\n                <ActionIcon\n                  icon={Undo2Icon}\n                  size={'small'}\n                  title={resetTitle}\n                  variant={'filled'}\n                  onClick={handleReset}\n                />\n              )}\n              {allowClear && (\n                <ActionIcon\n                  icon={XIcon}\n                  size={'small'}\n                  title={clearTitle}\n                  variant={'filled'}\n                  onClick={handleClear}\n                />\n              )}\n            </Flexbox>\n          )}\n        </Flexbox>\n        {hasConflict && <div className={styles.errorText}>{conflictText}</div>}\n        {hasInvalidCombination && <div className={styles.errorText}>{invalidText}</div>}\n      </Flexbox>\n    );\n  },\n);\n\nHotkeyInput.displayName = 'HotkeyInput';\n\nexport default HotkeyInput;\n"],"mappings":"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"}

package/es/ImageSelect/ImageSelect.mjs

@@ -6,10 +6,10 @@ import { styles } from "./styles.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 //#region src/ImageSelect/ImageSelect.tsx
 const ImageSelect = memo(({ ref, className, style, value, defaultValue, onChange, options, width = 144, height = 86, styles: customStyles, classNames, unoptimized, ...rest }) => {
-	const [currentValue, setCurrentValue] = useMergeState(defaultValue, {
+	const [currentValue, setCurrentValue] = useControlledState(defaultValue, {
 		defaultValue,
 		onChange,
 		value

package/es/ImageSelect/ImageSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageSelect.mjs","names":["useControlledState","Flexbox"],"sources":["../../src/ImageSelect/ImageSelect.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\n\nimport { styles } from './styles';\nimport type { ImageSelectProps } from './type';\n\nconst ImageSelect = memo<ImageSelectProps>(\n  ({\n    ref,\n    className,\n    style,\n    value,\n    defaultValue,\n    onChange,\n    options,\n    width = 144,\n    height = 86,\n    styles: customStyles,\n    classNames,\n    unoptimized,\n    ...rest\n  }) => {\n    const [currentValue, setCurrentValue] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    return (\n      <Flexbox horizontal className={className} gap={16} ref={ref} style={style} {...rest}>\n        {options?.map((item) => {\n          const isActive = item.value === currentValue;\n          return (\n            <Flexbox\n              align={'center'}\n              className={cx(styles.container, isActive && styles.active)}\n              gap={4}\n              key={item.value}\n              onClick={() => setCurrentValue(item.value)}\n            >\n              <Img\n                alt={item.alt || item.value}\n                className={cx(styles.img, isActive && styles.imgActive, classNames?.img)}\n                height={height}\n                src={item.img}\n                unoptimized={unoptimized}\n                width={width}\n                style={{\n                  ...customStyles?.img,\n                  height,\n                  width,\n                }}\n              />\n\n              <Flexbox horizontal align={'center'} gap={4}>\n                {item.icon && <Icon icon={item.icon} />}\n                {item.label}\n              </Flexbox>\n            </Flexbox>\n          );\n        })}\n      </Flexbox>\n    );\n  },\n);\n\nImageSelect.displayName = 'ImageSelect';\n\nexport default ImageSelect;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,cAAc,MACjB,EACC,KACA,WACA,OACA,OACA,cACA,UACA,SACA,QAAQ,KACR,SAAS,IACT,QAAQ,cACR,YACA,aACA,GAAG,WACC;CACJ,MAAM,CAAC,cAAc,mBAAmBA,cAA2B,cAAc;EAC/E;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAACC,mBAAD;EAAS,YAAA;EAAsB;EAAW,KAAK;EAAS;EAAY;EAAO,GAAI;YAC5E,SAAS,KAAK,SAAS;GACtB,MAAM,WAAW,KAAK,UAAU;AAChC,UACE,qBAACA,mBAAD;IACE,OAAO;IACP,WAAW,GAAG,OAAO,WAAW,YAAY,OAAO,OAAO;IAC1D,KAAK;IAEL,eAAe,gBAAgB,KAAK,MAAM;cAL5C,CAOE,oBAAC,KAAD;KACE,KAAK,KAAK,OAAO,KAAK;KACtB,WAAW,GAAG,OAAO,KAAK,YAAY,OAAO,WAAW,YAAY,IAAI;KAChE;KACR,KAAK,KAAK;KACG;KACN;KACP,OAAO;MACL,GAAG,cAAc;MACjB;MACA;MACD;KACD,CAAA,EAEF,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,KAAK;eAA1C,CACG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,MAAQ,CAAA,EACtC,KAAK,MACE;OACF;MArBH,KAAK,MAqBF;IAEZ;EACM,CAAA;EAGf;AAED,YAAY,cAAc"}
+{"version":3,"file":"ImageSelect.mjs","names":["Flexbox"],"sources":["../../src/ImageSelect/ImageSelect.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\n\nimport { styles } from './styles';\nimport type { ImageSelectProps } from './type';\n\nconst ImageSelect = memo<ImageSelectProps>(\n  ({\n    ref,\n    className,\n    style,\n    value,\n    defaultValue,\n    onChange,\n    options,\n    width = 144,\n    height = 86,\n    styles: customStyles,\n    classNames,\n    unoptimized,\n    ...rest\n  }) => {\n    const [currentValue, setCurrentValue] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    return (\n      <Flexbox horizontal className={className} gap={16} ref={ref} style={style} {...rest}>\n        {options?.map((item) => {\n          const isActive = item.value === currentValue;\n          return (\n            <Flexbox\n              align={'center'}\n              className={cx(styles.container, isActive && styles.active)}\n              gap={4}\n              key={item.value}\n              onClick={() => setCurrentValue(item.value)}\n            >\n              <Img\n                alt={item.alt || item.value}\n                className={cx(styles.img, isActive && styles.imgActive, classNames?.img)}\n                height={height}\n                src={item.img}\n                unoptimized={unoptimized}\n                width={width}\n                style={{\n                  ...customStyles?.img,\n                  height,\n                  width,\n                }}\n              />\n\n              <Flexbox horizontal align={'center'} gap={4}>\n                {item.icon && <Icon icon={item.icon} />}\n                {item.label}\n              </Flexbox>\n            </Flexbox>\n          );\n        })}\n      </Flexbox>\n    );\n  },\n);\n\nImageSelect.displayName = 'ImageSelect';\n\nexport default ImageSelect;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,cAAc,MACjB,EACC,KACA,WACA,OACA,OACA,cACA,UACA,SACA,QAAQ,KACR,SAAS,IACT,QAAQ,cACR,YACA,aACA,GAAG,WACC;CACJ,MAAM,CAAC,cAAc,mBAAmB,mBAA2B,cAAc;EAC/E;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAACA,mBAAD;EAAS,YAAA;EAAsB;EAAW,KAAK;EAAS;EAAY;EAAO,GAAI;YAC5E,SAAS,KAAK,SAAS;GACtB,MAAM,WAAW,KAAK,UAAU;AAChC,UACE,qBAACA,mBAAD;IACE,OAAO;IACP,WAAW,GAAG,OAAO,WAAW,YAAY,OAAO,OAAO;IAC1D,KAAK;IAEL,eAAe,gBAAgB,KAAK,MAAM;cAL5C,CAOE,oBAAC,KAAD;KACE,KAAK,KAAK,OAAO,KAAK;KACtB,WAAW,GAAG,OAAO,KAAK,YAAY,OAAO,WAAW,YAAY,IAAI;KAChE;KACR,KAAK,KAAK;KACG;KACN;KACP,OAAO;MACL,GAAG,cAAc;MACjB;MACA;MACD;KACD,CAAA,EAEF,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,KAAK;eAA1C,CACG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,MAAQ,CAAA,EACtC,KAAK,MACE;OACF;MArBH,KAAK,MAqBF;IAEZ;EACM,CAAA;EAGf;AAED,YAAY,cAAc"}

package/es/Markdown/SyntaxMarkdown/CachedMarkdown.mjs

@@ -41,11 +41,12 @@ function post(tree, options) {
 	const urlTransform = options.urlTransform || defaultUrlTransform;
 	if (allowedElements && disallowedElements) throw new Error("Unexpected combined `allowedElements` and `disallowedElements`, expected one or the other");
 	const transform = (node, index, parent) => {
-		if (node.type === "raw" && parent && typeof index === "number") {
+		const rawNode = node;
+		if (rawNode.type === "raw" && typeof rawNode.value === "string" && parent && typeof index === "number") {
 			if (skipHtml) parent.children.splice(index, 1);
 			else parent.children[index] = {
 				type: "text",
-				value: node.value
+				value: rawNode.value
 			};
 			return index;
 		}

package/es/Markdown/SyntaxMarkdown/CachedMarkdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CachedMarkdown.mjs","names":[],"sources":["../../../src/Markdown/SyntaxMarkdown/CachedMarkdown.tsx"],"sourcesContent":["'use client';\n\nimport { type Nodes, type Root } from 'hast';\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime';\nimport { urlAttributes } from 'html-url-attributes';\nimport { useMemo } from 'react';\nimport { Fragment, jsx, jsxs } from 'react/jsx-runtime';\nimport { defaultUrlTransform, type Options } from 'react-markdown';\nimport remarkParse from 'remark-parse';\nimport remarkRehype from 'remark-rehype';\nimport { type PluggableList, unified } from 'unified';\nimport { type BuildVisitor, visit } from 'unist-util-visit';\nimport { VFile } from 'vfile';\n\nconst EMPTY_PLUGINS: PluggableList = [];\nconst DEFAULT_REMARK_REHYPE_OPTIONS = { allowDangerousHtml: true };\n\n/**\n * Render-equivalent of react-markdown's synchronous `<Markdown>` that keeps\n * the unified processor across renders. react-markdown rebuilds the whole\n * plugin chain on every render; the streaming tail block re-renders on every\n * reveal commit (~20/s) with identical plugin identities, so caching the\n * processor removes the per-commit chain construction. `post`/`transform`\n * mirror react-markdown@10 — keep them in sync when upgrading it.\n */\nexport const CachedMarkdown = (options: Options) => {\n  const { children, rehypePlugins, remarkPlugins, remarkRehypeOptions } = options;\n\n  const processor = useMemo(() => {\n    return unified()\n      .use(remarkParse)\n      .use(remarkPlugins || EMPTY_PLUGINS)\n      .use(\n        remarkRehype,\n        remarkRehypeOptions\n          ? { ...remarkRehypeOptions, ...DEFAULT_REMARK_REHYPE_OPTIONS }\n          : DEFAULT_REMARK_REHYPE_OPTIONS,\n      )\n      .use(rehypePlugins || EMPTY_PLUGINS);\n  }, [rehypePlugins, remarkPlugins, remarkRehypeOptions]);\n\n  const file = new VFile();\n  file.value = typeof children === 'string' ? children : '';\n\n  return post(processor.runSync(processor.parse(file), file) as Nodes, options);\n};\n\nfunction post(tree: Nodes, options: Options) {\n  const {\n    allowedElements,\n    allowElement,\n    components,\n    disallowedElements,\n    skipHtml,\n    unwrapDisallowed,\n  } = options;\n  const urlTransform = options.urlTransform || defaultUrlTransform;\n\n  if (allowedElements && disallowedElements) {\n    throw new Error(\n      'Unexpected combined `allowedElements` and `disallowedElements`, expected one or the other',\n    );\n  }\n\n  const transform: BuildVisitor<Root> = (node, index, parent) => {\n    if (node.type === 'raw' && parent && typeof index === 'number') {\n      if (skipHtml) {\n        parent.children.splice(index, 1);\n      } else {\n        parent.children[index] = { type: 'text', value: node.value };\n      }\n\n      return index;\n    }\n\n    if (node.type === 'element') {\n      let key: string;\n\n      for (key in urlAttributes) {\n        if (Object.hasOwn(urlAttributes, key) && Object.hasOwn(node.properties, key)) {\n          const value = node.properties[key];\n          const test = urlAttributes[key];\n          if (test === null || test.includes(node.tagName)) {\n            node.properties[key] = urlTransform(String(value || ''), key, node);\n          }\n        }\n      }\n\n      let remove = allowedElements\n        ? !allowedElements.includes(node.tagName)\n        : disallowedElements\n          ? disallowedElements.includes(node.tagName)\n          : false;\n\n      if (!remove && allowElement && typeof index === 'number') {\n        remove = !allowElement(node, index, parent);\n      }\n\n      if (remove && parent && typeof index === 'number') {\n        if (unwrapDisallowed && node.children) {\n          parent.children.splice(index, 1, ...node.children);\n        } else {\n          parent.children.splice(index, 1);\n        }\n\n        return index;\n      }\n    }\n  };\n\n  visit(tree as Root, transform);\n\n  return toJsxRuntime(tree, {\n    Fragment,\n    components,\n    ignoreInvalidStyle: true,\n    jsx,\n    jsxs,\n    passKeys: true,\n    passNode: true,\n  });\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,gBAA+B,EAAE;AACvC,MAAM,gCAAgC,EAAE,oBAAoB,MAAM;;;;;;;;;AAUlE,MAAa,kBAAkB,YAAqB;CAClD,MAAM,EAAE,UAAU,eAAe,eAAe,wBAAwB;CAExE,MAAM,YAAY,cAAc;AAC9B,SAAO,SAAS,CACb,IAAI,YAAY,CAChB,IAAI,iBAAiB,cAAc,CACnC,IACC,cACA,sBACI;GAAE,GAAG;GAAqB,GAAG;GAA+B,GAC5D,8BACL,CACA,IAAI,iBAAiB,cAAc;IACrC;EAAC;EAAe;EAAe;EAAoB,CAAC;CAEvD,MAAM,OAAO,IAAI,OAAO;AACxB,MAAK,QAAQ,OAAO,aAAa,WAAW,WAAW;AAEvD,QAAO,KAAK,UAAU,QAAQ,UAAU,MAAM,KAAK,EAAE,KAAK,EAAW,QAAQ;;AAG/E,SAAS,KAAK,MAAa,SAAkB;CAC3C,MAAM,EACJ,iBACA,cACA,YACA,oBACA,UACA,qBACE;CACJ,MAAM,eAAe,QAAQ,gBAAgB;AAE7C,KAAI,mBAAmB,mBACrB,OAAM,IAAI,MACR,4FACD;CAGH,MAAM,aAAiC,MAAM,OAAO,WAAW;AAC7D,MAAI,KAAK,SAAS,SAAS,UAAU,OAAO,UAAU,UAAU;AAC9D,OAAI,SACF,QAAO,SAAS,OAAO,OAAO,EAAE;OAEhC,QAAO,SAAS,SAAS;IAAE,MAAM;IAAQ,OAAO,KAAK;IAAO;AAG9D,UAAO;;AAGT,MAAI,KAAK,SAAS,WAAW;GAC3B,IAAI;AAEJ,QAAK,OAAO,cACV,KAAI,OAAO,OAAO,eAAe,IAAI,IAAI,OAAO,OAAO,KAAK,YAAY,IAAI,EAAE;IAC5E,MAAM,QAAQ,KAAK,WAAW;IAC9B,MAAM,OAAO,cAAc;AAC3B,QAAI,SAAS,QAAQ,KAAK,SAAS,KAAK,QAAQ,CAC9C,MAAK,WAAW,OAAO,aAAa,OAAO,SAAS,GAAG,EAAE,KAAK,KAAK;;GAKzE,IAAI,SAAS,kBACT,CAAC,gBAAgB,SAAS,KAAK,QAAQ,GACvC,qBACE,mBAAmB,SAAS,KAAK,QAAQ,GACzC;AAEN,OAAI,CAAC,UAAU,gBAAgB,OAAO,UAAU,SAC9C,UAAS,CAAC,aAAa,MAAM,OAAO,OAAO;AAG7C,OAAI,UAAU,UAAU,OAAO,UAAU,UAAU;AACjD,QAAI,oBAAoB,KAAK,SAC3B,QAAO,SAAS,OAAO,OAAO,GAAG,GAAG,KAAK,SAAS;QAElD,QAAO,SAAS,OAAO,OAAO,EAAE;AAGlC,WAAO;;;;AAKb,OAAM,MAAc,UAAU;AAE9B,QAAO,aAAa,MAAM;EACxB,UAAA;EACA;EACA,oBAAoB;EACpB;EACA;EACA,UAAU;EACV,UAAU;EACX,CAAC"}
+{"version":3,"file":"CachedMarkdown.mjs","names":[],"sources":["../../../src/Markdown/SyntaxMarkdown/CachedMarkdown.tsx"],"sourcesContent":["'use client';\n\nimport { type Nodes, type Root } from 'hast';\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime';\nimport { urlAttributes } from 'html-url-attributes';\nimport { useMemo } from 'react';\nimport { Fragment, jsx, jsxs } from 'react/jsx-runtime';\nimport { defaultUrlTransform, type Options } from 'react-markdown';\nimport remarkParse from 'remark-parse';\nimport remarkRehype from 'remark-rehype';\nimport { type PluggableList, unified } from 'unified';\nimport { type BuildVisitor, visit } from 'unist-util-visit';\nimport { VFile } from 'vfile';\n\nconst EMPTY_PLUGINS: PluggableList = [];\nconst DEFAULT_REMARK_REHYPE_OPTIONS = { allowDangerousHtml: true };\n\n/**\n * Render-equivalent of react-markdown's synchronous `<Markdown>` that keeps\n * the unified processor across renders. react-markdown rebuilds the whole\n * plugin chain on every render; the streaming tail block re-renders on every\n * reveal commit (~20/s) with identical plugin identities, so caching the\n * processor removes the per-commit chain construction. `post`/`transform`\n * mirror react-markdown@10 — keep them in sync when upgrading it.\n */\nexport const CachedMarkdown = (options: Options) => {\n  const { children, rehypePlugins, remarkPlugins, remarkRehypeOptions } = options;\n\n  const processor = useMemo(() => {\n    return unified()\n      .use(remarkParse)\n      .use(remarkPlugins || EMPTY_PLUGINS)\n      .use(\n        remarkRehype,\n        remarkRehypeOptions\n          ? { ...remarkRehypeOptions, ...DEFAULT_REMARK_REHYPE_OPTIONS }\n          : DEFAULT_REMARK_REHYPE_OPTIONS,\n      )\n      .use(rehypePlugins || EMPTY_PLUGINS);\n  }, [rehypePlugins, remarkPlugins, remarkRehypeOptions]);\n\n  const file = new VFile();\n  file.value = typeof children === 'string' ? children : '';\n\n  return post(processor.runSync(processor.parse(file), file) as Nodes, options);\n};\n\nfunction post(tree: Nodes, options: Options) {\n  const {\n    allowedElements,\n    allowElement,\n    components,\n    disallowedElements,\n    skipHtml,\n    unwrapDisallowed,\n  } = options;\n  const urlTransform = options.urlTransform || defaultUrlTransform;\n\n  if (allowedElements && disallowedElements) {\n    throw new Error(\n      'Unexpected combined `allowedElements` and `disallowedElements`, expected one or the other',\n    );\n  }\n\n  const transform: BuildVisitor<Root> = (node, index, parent) => {\n    const rawNode = node as unknown as { type?: string; value?: unknown };\n    if (\n      rawNode.type === 'raw' &&\n      typeof rawNode.value === 'string' &&\n      parent &&\n      typeof index === 'number'\n    ) {\n      if (skipHtml) {\n        parent.children.splice(index, 1);\n      } else {\n        parent.children[index] = { type: 'text', value: rawNode.value };\n      }\n\n      return index;\n    }\n\n    if (node.type === 'element') {\n      let key: string;\n\n      for (key in urlAttributes) {\n        if (Object.hasOwn(urlAttributes, key) && Object.hasOwn(node.properties, key)) {\n          const value = node.properties[key];\n          const test = urlAttributes[key];\n          if (test === null || test.includes(node.tagName)) {\n            node.properties[key] = urlTransform(String(value || ''), key, node);\n          }\n        }\n      }\n\n      let remove = allowedElements\n        ? !allowedElements.includes(node.tagName)\n        : disallowedElements\n          ? disallowedElements.includes(node.tagName)\n          : false;\n\n      if (!remove && allowElement && typeof index === 'number') {\n        remove = !allowElement(node, index, parent);\n      }\n\n      if (remove && parent && typeof index === 'number') {\n        if (unwrapDisallowed && node.children) {\n          parent.children.splice(index, 1, ...node.children);\n        } else {\n          parent.children.splice(index, 1);\n        }\n\n        return index;\n      }\n    }\n  };\n\n  visit(tree as Root, transform);\n\n  return toJsxRuntime(tree, {\n    Fragment,\n    components,\n    ignoreInvalidStyle: true,\n    jsx,\n    jsxs,\n    passKeys: true,\n    passNode: true,\n  });\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,gBAA+B,EAAE;AACvC,MAAM,gCAAgC,EAAE,oBAAoB,MAAM;;;;;;;;;AAUlE,MAAa,kBAAkB,YAAqB;CAClD,MAAM,EAAE,UAAU,eAAe,eAAe,wBAAwB;CAExE,MAAM,YAAY,cAAc;AAC9B,SAAO,SAAS,CACb,IAAI,YAAY,CAChB,IAAI,iBAAiB,cAAc,CACnC,IACC,cACA,sBACI;GAAE,GAAG;GAAqB,GAAG;GAA+B,GAC5D,8BACL,CACA,IAAI,iBAAiB,cAAc;IACrC;EAAC;EAAe;EAAe;EAAoB,CAAC;CAEvD,MAAM,OAAO,IAAI,OAAO;AACxB,MAAK,QAAQ,OAAO,aAAa,WAAW,WAAW;AAEvD,QAAO,KAAK,UAAU,QAAQ,UAAU,MAAM,KAAK,EAAE,KAAK,EAAW,QAAQ;;AAG/E,SAAS,KAAK,MAAa,SAAkB;CAC3C,MAAM,EACJ,iBACA,cACA,YACA,oBACA,UACA,qBACE;CACJ,MAAM,eAAe,QAAQ,gBAAgB;AAE7C,KAAI,mBAAmB,mBACrB,OAAM,IAAI,MACR,4FACD;CAGH,MAAM,aAAiC,MAAM,OAAO,WAAW;EAC7D,MAAM,UAAU;AAChB,MACE,QAAQ,SAAS,SACjB,OAAO,QAAQ,UAAU,YACzB,UACA,OAAO,UAAU,UACjB;AACA,OAAI,SACF,QAAO,SAAS,OAAO,OAAO,EAAE;OAEhC,QAAO,SAAS,SAAS;IAAE,MAAM;IAAQ,OAAO,QAAQ;IAAO;AAGjE,UAAO;;AAGT,MAAI,KAAK,SAAS,WAAW;GAC3B,IAAI;AAEJ,QAAK,OAAO,cACV,KAAI,OAAO,OAAO,eAAe,IAAI,IAAI,OAAO,OAAO,KAAK,YAAY,IAAI,EAAE;IAC5E,MAAM,QAAQ,KAAK,WAAW;IAC9B,MAAM,OAAO,cAAc;AAC3B,QAAI,SAAS,QAAQ,KAAK,SAAS,KAAK,QAAQ,CAC9C,MAAK,WAAW,OAAO,aAAa,OAAO,SAAS,GAAG,EAAE,KAAK,KAAK;;GAKzE,IAAI,SAAS,kBACT,CAAC,gBAAgB,SAAS,KAAK,QAAQ,GACvC,qBACE,mBAAmB,SAAS,KAAK,QAAQ,GACzC;AAEN,OAAI,CAAC,UAAU,gBAAgB,OAAO,UAAU,SAC9C,UAAS,CAAC,aAAa,MAAM,OAAO,OAAO;AAG7C,OAAI,UAAU,UAAU,OAAO,UAAU,UAAU;AACjD,QAAI,oBAAoB,KAAK,SAC3B,QAAO,SAAS,OAAO,OAAO,GAAG,GAAG,KAAK,SAAS;QAElD,QAAO,SAAS,OAAO,OAAO,EAAE;AAGlC,WAAO;;;;AAKb,OAAM,MAAc,UAAU;AAE9B,QAAO,aAAa,MAAM;EACxB,UAAA;EACA;EACA,oBAAoB;EACpB;EACA;EACA,UAAU;EACV,UAAU;EACX,CAAC"}

package/es/Markdown/plugins/rehypeStreamAnimated.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rehypeStreamAnimated.mjs","names":[],"sources":["../../../src/Markdown/plugins/rehypeStreamAnimated.ts"],"sourcesContent":["import { type Element, type ElementContent, type Root } from 'hast';\nimport { type BuildVisitor } from 'unist-util-visit';\nimport { visit } from 'unist-util-visit';\n\nimport { getNow } from '@/utils/getNow';\n\nexport interface StreamAnimatedRuntime {\n  births: number[];\n  /**\n   * Write-once per-char render cache, indexed like `births`:\n   * `undefined` = char not rendered yet, `null` = born fully revealed,\n   * string = inline style frozen at first render.\n   * Freezing the style keeps span props referentially stable across the\n   * tail block's re-renders, so React never rewrites `animation-delay`\n   * on an in-flight fade (a rewrite restarts the CSS animation).\n   */\n  styles: (string | null | undefined)[];\n}\n\nexport interface StreamAnimatedOptions {\n  births?: number[];\n  fadeDuration?: number;\n  /**\n   * `'word'` wraps whitespace-delimited runs in one span instead of one\n   * span per char. Every concurrent CSS animation keeps the compositor\n   * producing frames and fires animationstart/end through React's root\n   * event delegation, so animating ~5x fewer nodes is the main CPU lever —\n   * char-level remains available for the finer-grained look.\n   */\n  granularity?: 'char' | 'word';\n  nowMs?: number;\n  revealed?: boolean;\n  runtime?: StreamAnimatedRuntime;\n}\n\n// Intl.Segmenter splits CJK runs into words too — the whitespace regex\n// fallback would otherwise fade an entire unspaced CJK paragraph as one\n// unit.\nconst WORD_SEGMENT_RE = /\\s+|\\S+/g;\n\nconst wordSegmenter =\n  typeof Intl !== 'undefined' && 'Segmenter' in Intl\n    ? new Intl.Segmenter(undefined, { granularity: 'word' })\n    : null;\n\nconst segmentWords = (value: string): string[] => {\n  if (!wordSegmenter) return value.match(WORD_SEGMENT_RE) ?? [];\n\n  const segments: string[] = [];\n  for (const item of wordSegmenter.segment(value)) {\n    segments.push(item.segment);\n  }\n  return segments;\n};\n\nconst BLOCK_TAGS = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li']);\nconst SKIP_TAGS = new Set(['pre', 'code', 'table', 'svg']);\n\nfunction hasClass(node: Element, cls: string): boolean {\n  const cn = node.properties?.className;\n  if (Array.isArray(cn)) return cn.some((c) => String(c).includes(cls));\n  if (typeof cn === 'string') return cn.includes(cls);\n  return false;\n}\n\nexport const rehypeStreamAnimated = (options: StreamAnimatedOptions = {}) => {\n  const {\n    births,\n    fadeDuration = 150,\n    granularity = 'char',\n    nowMs,\n    revealed = false,\n    runtime,\n  } = options;\n  // Legacy births/nowMs callers share the runtime path through a throwaway\n  // cache: the plugin factory runs once per render, so their styles are\n  // recomputed against the caller's nowMs each run, exactly as before.\n  const resolvedRuntime = revealed\n    ? undefined\n    : (runtime ??\n      (Array.isArray(births) && typeof nowMs === 'number' ? { births, styles: [] } : undefined));\n  const nowOverride = runtime ? undefined : nowMs;\n\n  return (tree: Root) => {\n    let globalCharIndex = 0;\n    const now = nowOverride ?? (resolvedRuntime ? getNow() : 0);\n\n    const shouldSkip = (node: Element): boolean => {\n      return SKIP_TAGS.has(node.tagName) || hasClass(node, 'katex');\n    };\n\n    const resolveStyle = (index: number): string | null => {\n      const styles = resolvedRuntime!.styles;\n      const cached = styles[index];\n      if (cached !== undefined) return cached;\n\n      const birthTs = resolvedRuntime!.births[index];\n      let resolved: string | null;\n      if (birthTs === undefined) {\n        resolved = null;\n      } else {\n        const elapsed = now - birthTs;\n        // Negative delay = already elapsed ms into the fade. Positive\n        // delay = not started yet (char born in the future, i.e.\n        // staggered within the same commit).\n        resolved = elapsed >= fadeDuration ? null : `animation-delay:${-elapsed}ms`;\n      }\n      styles[index] = resolved;\n      return resolved;\n    };\n\n    const buildSpan = (value: string, startIndex: number): ElementContent => {\n      let className = 'stream-char';\n      let style: string | undefined;\n\n      if (revealed) {\n        className = 'stream-char stream-char-revealed';\n      } else if (resolvedRuntime) {\n        const resolved = resolveStyle(startIndex);\n        if (resolved === null) {\n          className = 'stream-char stream-char-revealed';\n        } else {\n          style = resolved;\n        }\n      }\n\n      const properties: Record<string, any> = { className };\n      if (style !== undefined) {\n        properties.style = style;\n      }\n      return {\n        children: [{ type: 'text', value }],\n        properties,\n        tagName: 'span',\n        type: 'element',\n      };\n    };\n\n    const wrapText = (node: Element) => {\n      const newChildren: ElementContent[] = [];\n      for (const child of node.children) {\n        if (child.type === 'text') {\n          if (granularity === 'word') {\n            for (const segment of segmentWords(child.value)) {\n              const startIndex = globalCharIndex;\n              for (const _char of segment) globalCharIndex++;\n\n              if (segment.trim() === '') {\n                newChildren.push({ type: 'text', value: segment });\n              } else {\n                newChildren.push(buildSpan(segment, startIndex));\n              }\n            }\n          } else {\n            for (const char of child.value) {\n              newChildren.push(buildSpan(char, globalCharIndex));\n              globalCharIndex++;\n            }\n          }\n        } else if (child.type === 'element') {\n          if (!shouldSkip(child)) {\n            wrapText(child);\n          }\n          newChildren.push(child);\n        } else {\n          newChildren.push(child);\n        }\n      }\n      node.children = newChildren;\n    };\n\n    visit(tree, 'element', ((node: Element) => {\n      if (shouldSkip(node)) return 'skip';\n      if (BLOCK_TAGS.has(node.tagName)) {\n        wrapText(node);\n        return 'skip';\n      }\n    }) as BuildVisitor<Root, 'element'>);\n  };\n};\n"],"mappings":"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"}
+{"version":3,"file":"rehypeStreamAnimated.mjs","names":[],"sources":["../../../src/Markdown/plugins/rehypeStreamAnimated.ts"],"sourcesContent":["import { type Element, type ElementContent, type Root } from 'hast';\nimport { type BuildVisitor } from 'unist-util-visit';\nimport { visit } from 'unist-util-visit';\n\nimport { getNow } from '@/utils/getNow';\n\nexport interface StreamAnimatedRuntime {\n  births: number[];\n  /**\n   * Write-once per-char render cache, indexed like `births`:\n   * `undefined` = char not rendered yet, `null` = born fully revealed,\n   * string = inline style frozen at first render.\n   * Freezing the style keeps span props referentially stable across the\n   * tail block's re-renders, so React never rewrites `animation-delay`\n   * on an in-flight fade (a rewrite restarts the CSS animation).\n   */\n  styles: (string | null | undefined)[];\n}\n\nexport interface StreamAnimatedOptions {\n  births?: number[];\n  fadeDuration?: number;\n  /**\n   * `'word'` wraps whitespace-delimited runs in one span instead of one\n   * span per char. Every concurrent CSS animation keeps the compositor\n   * producing frames and fires animationstart/end through React's root\n   * event delegation, so animating ~5x fewer nodes is the main CPU lever —\n   * char-level remains available for the finer-grained look.\n   */\n  granularity?: 'char' | 'word';\n  nowMs?: number;\n  revealed?: boolean;\n  runtime?: StreamAnimatedRuntime;\n}\n\n// Intl.Segmenter splits CJK runs into words too — the whitespace regex\n// fallback would otherwise fade an entire unspaced CJK paragraph as one\n// unit.\nconst WORD_SEGMENT_RE = /\\s+|\\S+/g;\n\nconst wordSegmenter =\n  typeof Intl !== 'undefined' && 'Segmenter' in Intl\n    ? new Intl.Segmenter(undefined, { granularity: 'word' })\n    : null;\n\nconst segmentWords = (value: string): string[] => {\n  if (!wordSegmenter) return value.match(WORD_SEGMENT_RE) ?? [];\n\n  const segments: string[] = [];\n  for (const item of wordSegmenter.segment(value)) {\n    segments.push(item.segment);\n  }\n  return segments;\n};\n\nconst BLOCK_TAGS = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li']);\nconst SKIP_TAGS = new Set(['pre', 'code', 'table', 'svg']);\n\nfunction hasClass(node: Element, cls: string): boolean {\n  const cn: unknown = node.properties?.className;\n  if (Array.isArray(cn)) return cn.some((c) => String(c).includes(cls));\n  if (typeof cn === 'string') return cn.includes(cls);\n  return false;\n}\n\nexport const rehypeStreamAnimated = (options: StreamAnimatedOptions = {}) => {\n  const {\n    births,\n    fadeDuration = 150,\n    granularity = 'char',\n    nowMs,\n    revealed = false,\n    runtime,\n  } = options;\n  // Legacy births/nowMs callers share the runtime path through a throwaway\n  // cache: the plugin factory runs once per render, so their styles are\n  // recomputed against the caller's nowMs each run, exactly as before.\n  const resolvedRuntime = revealed\n    ? undefined\n    : (runtime ??\n      (Array.isArray(births) && typeof nowMs === 'number' ? { births, styles: [] } : undefined));\n  const nowOverride = runtime ? undefined : nowMs;\n\n  return (tree: Root) => {\n    let globalCharIndex = 0;\n    const now = nowOverride ?? (resolvedRuntime ? getNow() : 0);\n\n    const shouldSkip = (node: Element): boolean => {\n      return SKIP_TAGS.has(node.tagName) || hasClass(node, 'katex');\n    };\n\n    const resolveStyle = (index: number): string | null => {\n      const styles = resolvedRuntime!.styles;\n      const cached = styles[index];\n      if (cached !== undefined) return cached;\n\n      const birthTs = resolvedRuntime!.births[index];\n      let resolved: string | null;\n      if (birthTs === undefined) {\n        resolved = null;\n      } else {\n        const elapsed = now - birthTs;\n        // Negative delay = already elapsed ms into the fade. Positive\n        // delay = not started yet (char born in the future, i.e.\n        // staggered within the same commit).\n        resolved = elapsed >= fadeDuration ? null : `animation-delay:${-elapsed}ms`;\n      }\n      styles[index] = resolved;\n      return resolved;\n    };\n\n    const buildSpan = (value: string, startIndex: number): ElementContent => {\n      let className = 'stream-char';\n      let style: string | undefined;\n\n      if (revealed) {\n        className = 'stream-char stream-char-revealed';\n      } else if (resolvedRuntime) {\n        const resolved = resolveStyle(startIndex);\n        if (resolved === null) {\n          className = 'stream-char stream-char-revealed';\n        } else {\n          style = resolved;\n        }\n      }\n\n      const properties: Record<string, any> = { className };\n      if (style !== undefined) {\n        properties.style = style;\n      }\n      return {\n        children: [{ type: 'text', value }],\n        properties,\n        tagName: 'span',\n        type: 'element',\n      };\n    };\n\n    const wrapText = (node: Element) => {\n      const newChildren: ElementContent[] = [];\n      for (const child of node.children) {\n        if (child.type === 'text') {\n          if (granularity === 'word') {\n            for (const segment of segmentWords(child.value)) {\n              const startIndex = globalCharIndex;\n              for (const _char of segment) globalCharIndex++;\n\n              if (segment.trim() === '') {\n                newChildren.push({ type: 'text', value: segment });\n              } else {\n                newChildren.push(buildSpan(segment, startIndex));\n              }\n            }\n          } else {\n            for (const char of child.value) {\n              newChildren.push(buildSpan(char, globalCharIndex));\n              globalCharIndex++;\n            }\n          }\n        } else if (child.type === 'element') {\n          if (!shouldSkip(child)) {\n            wrapText(child);\n          }\n          newChildren.push(child);\n        } else {\n          newChildren.push(child);\n        }\n      }\n      node.children = newChildren;\n    };\n\n    visit(tree, 'element', ((node: Element) => {\n      if (shouldSkip(node)) return 'skip';\n      if (BLOCK_TAGS.has(node.tagName)) {\n        wrapText(node);\n        return 'skip';\n      }\n    }) as BuildVisitor<Root, 'element'>);\n  };\n};\n"],"mappings":"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"}

package/es/SearchBar/SearchBar.mjs

@@ -7,12 +7,12 @@ import { styles } from "./style.mjs";
 import { memo, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 import { LucideLoader2, Search } from "lucide-react";
 import { useHotkeys } from "react-hotkeys-hook";
 //#region src/SearchBar/SearchBar.tsx
 const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInputChange, placeholder, enableShortKey, shortKey = "mod+k", onSearch, loading, style, onChange, onBlur, onPressEnter, onFocus, styles: { input: inputStyle, shortKey: shortKeyStyle } = {}, classNames: { input: inputClassName, shortKey: shortKeyClassName } = {}, ...rest }) => {
-	const [inputValue, setInputValue] = useMergeState(defaultValue, {
+	const [inputValue, setInputValue] = useControlledState(defaultValue, {
 		defaultValue,
 		onChange: onInputChange,
 		value

package/es/SearchBar/SearchBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.mjs","names":["useControlledState"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Spotlight from '@/awesome/Spotlight';\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\nimport Input from '@/Input';\n\nimport { styles } from './style';\nimport { type SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n  ({\n    defaultValue = '',\n    spotlight,\n    className,\n    value,\n    onInputChange,\n    placeholder,\n    enableShortKey,\n    shortKey = 'mod+k',\n    onSearch,\n    loading,\n    style,\n    onChange,\n    onBlur,\n    onPressEnter,\n    onFocus,\n    styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n    classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n    ...rest\n  }) => {\n    const [inputValue, setInputValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onInputChange,\n      value,\n    });\n\n    const [showTag, setShowTag] = useState<boolean>(true);\n    const inputReference: any = useRef<HTMLInputElement>(null);\n    const hotkey = useMemo(\n      () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n      [shortKey],\n    );\n\n    useHotkeys(\n      hotkey,\n      () => {\n        if (!enableShortKey) return;\n        inputReference.current?.focus();\n      },\n      {\n        enableOnFormTags: true,\n        enabled: !!enableShortKey && !!shortKey,\n        preventDefault: true,\n      },\n    );\n\n    return (\n      <div className={cx(styles.search, className)} style={style}>\n        {spotlight && <Spotlight />}\n        <Input\n          allowClear\n          className={inputClassName}\n          placeholder={placeholder ?? 'Type keywords...'}\n          ref={inputReference}\n          style={inputStyle}\n          value={inputValue}\n          prefix={\n            <Icon\n              className={styles.icon}\n              icon={loading ? LucideLoader2 : Search}\n              size=\"small\"\n              spin={loading}\n              style={{ marginRight: 4 }}\n            />\n          }\n          onBlur={(e) => {\n            onBlur?.(e);\n            setInputValue(e.target.value);\n            setShowTag(true);\n          }}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n            onChange?.(e);\n          }}\n          onFocus={(e) => {\n            onFocus?.(e);\n            setShowTag(false);\n          }}\n          onPressEnter={(e) => {\n            onPressEnter?.(e);\n            onSearch?.(inputValue);\n          }}\n          {...rest}\n        />\n        {enableShortKey && showTag && !inputValue && (\n          <Hotkey\n            compact\n            className={cx(styles.tag, shortKeyClassName)}\n            keys={hotkey}\n            style={shortKeyStyle}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,EAAE,EAC3D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,EAAE,EACvE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiBA,cAAmB,cAAc;EACnE;EACA,UAAU;EACV;EACD,CAAC;CAEF,MAAM,CAAC,SAAS,cAAc,SAAkB,KAAK;CACrD,MAAM,iBAAsB,OAAyB,KAAK;CAC1D,MAAM,SAAS,cACN,SAAS,SAAS,IAAI,GAAG,WAAW,OAAO,YAClD,CAAC,SAAS,CACX;AAED,YACE,cACM;AACJ,MAAI,CAAC,eAAgB;AACrB,iBAAe,SAAS,OAAO;IAEjC;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;EACjB,CACF;AAED,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,UAAU;EAAS;YAArD;GACG,aAAa,oBAAC,WAAD,EAAa,CAAA;GAC3B,oBAAC,OAAD;IACE,YAAA;IACA,WAAW;IACX,aAAa,eAAe;IAC5B,KAAK;IACL,OAAO;IACP,OAAO;IACP,QACE,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,MAAM,UAAU,gBAAgB;KAChC,MAAK;KACL,MAAM;KACN,OAAO,EAAE,aAAa,GAAG;KACzB,CAAA;IAEJ,SAAS,MAAM;AACb,cAAS,EAAE;AACX,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,KAAK;;IAElB,WAAW,MAAM;AACf,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,EAAE;;IAEf,UAAU,MAAM;AACd,eAAU,EAAE;AACZ,gBAAW,MAAM;;IAEnB,eAAe,MAAM;AACnB,oBAAe,EAAE;AACjB,gBAAW,WAAW;;IAExB,GAAI;IACJ,CAAA;GACD,kBAAkB,WAAW,CAAC,cAC7B,oBAAC,QAAD;IACE,SAAA;IACA,WAAW,GAAG,OAAO,KAAK,kBAAkB;IAC5C,MAAM;IACN,OAAO;IACP,CAAA;GAEA;;EAGX;AAED,UAAU,cAAc"}
+{"version":3,"file":"SearchBar.mjs","names":[],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Spotlight from '@/awesome/Spotlight';\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\nimport Input from '@/Input';\n\nimport { styles } from './style';\nimport { type SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n  ({\n    defaultValue = '',\n    spotlight,\n    className,\n    value,\n    onInputChange,\n    placeholder,\n    enableShortKey,\n    shortKey = 'mod+k',\n    onSearch,\n    loading,\n    style,\n    onChange,\n    onBlur,\n    onPressEnter,\n    onFocus,\n    styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n    classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n    ...rest\n  }) => {\n    const [inputValue, setInputValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onInputChange,\n      value,\n    });\n\n    const [showTag, setShowTag] = useState<boolean>(true);\n    const inputReference: any = useRef<HTMLInputElement>(null);\n    const hotkey = useMemo(\n      () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n      [shortKey],\n    );\n\n    useHotkeys(\n      hotkey,\n      () => {\n        if (!enableShortKey) return;\n        inputReference.current?.focus();\n      },\n      {\n        enableOnFormTags: true,\n        enabled: !!enableShortKey && !!shortKey,\n        preventDefault: true,\n      },\n    );\n\n    return (\n      <div className={cx(styles.search, className)} style={style}>\n        {spotlight && <Spotlight />}\n        <Input\n          allowClear\n          className={inputClassName}\n          placeholder={placeholder ?? 'Type keywords...'}\n          ref={inputReference}\n          style={inputStyle}\n          value={inputValue}\n          prefix={\n            <Icon\n              className={styles.icon}\n              icon={loading ? LucideLoader2 : Search}\n              size=\"small\"\n              spin={loading}\n              style={{ marginRight: 4 }}\n            />\n          }\n          onBlur={(e) => {\n            onBlur?.(e);\n            setInputValue(e.target.value);\n            setShowTag(true);\n          }}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n            onChange?.(e);\n          }}\n          onFocus={(e) => {\n            onFocus?.(e);\n            setShowTag(false);\n          }}\n          onPressEnter={(e) => {\n            onPressEnter?.(e);\n            onSearch?.(inputValue);\n          }}\n          {...rest}\n        />\n        {enableShortKey && showTag && !inputValue && (\n          <Hotkey\n            compact\n            className={cx(styles.tag, shortKeyClassName)}\n            keys={hotkey}\n            style={shortKeyStyle}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,EAAE,EAC3D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,EAAE,EACvE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,mBAAmB,cAAc;EACnE;EACA,UAAU;EACV;EACD,CAAC;CAEF,MAAM,CAAC,SAAS,cAAc,SAAkB,KAAK;CACrD,MAAM,iBAAsB,OAAyB,KAAK;CAC1D,MAAM,SAAS,cACN,SAAS,SAAS,IAAI,GAAG,WAAW,OAAO,YAClD,CAAC,SAAS,CACX;AAED,YACE,cACM;AACJ,MAAI,CAAC,eAAgB;AACrB,iBAAe,SAAS,OAAO;IAEjC;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;EACjB,CACF;AAED,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,UAAU;EAAS;YAArD;GACG,aAAa,oBAAC,WAAD,EAAa,CAAA;GAC3B,oBAAC,OAAD;IACE,YAAA;IACA,WAAW;IACX,aAAa,eAAe;IAC5B,KAAK;IACL,OAAO;IACP,OAAO;IACP,QACE,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,MAAM,UAAU,gBAAgB;KAChC,MAAK;KACL,MAAM;KACN,OAAO,EAAE,aAAa,GAAG;KACzB,CAAA;IAEJ,SAAS,MAAM;AACb,cAAS,EAAE;AACX,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,KAAK;;IAElB,WAAW,MAAM;AACf,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,EAAE;;IAEf,UAAU,MAAM;AACd,eAAU,EAAE;AACZ,gBAAW,MAAM;;IAEnB,eAAe,MAAM;AACnB,oBAAe,EAAE;AACjB,gBAAW,WAAW;;IAExB,GAAI;IACJ,CAAA;GACD,kBAAkB,WAAW,CAAC,cAC7B,oBAAC,QAAD;IACE,SAAA;IACA,WAAW,GAAG,OAAO,KAAK,kBAAkB;IAC5C,MAAM;IACN,OAAO;IACP,CAAA;GAEA;;EAGX;AAED,UAAU,cAAc"}

package/es/ThemeProvider/GlobalStyle/global.mjs

@@ -6,7 +6,8 @@ var global_default = (token) => css`
     --font-settings: 'cv01', 'tnum', 'kern';
     --font-variations: 'opsz' auto, tabular-nums;
 
-    font-synthesis: none;
+    /* Real Geist italic for Latin; synthesize style for CJK fallback faces. */
+    font-synthesis: style;
     text-autospace: normal;
   }
 
@@ -44,7 +45,7 @@ var global_default = (token) => css`
 
     background-color: ${token.colorBgLayout};
 
-    font-synthesis: none;
+    font-synthesis: style;
 
     -webkit-overflow-scrolling: touch;
     -webkit-tap-highlight-color: transparent;

package/es/ThemeProvider/GlobalStyle/global.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"global.mjs","names":[],"sources":["../../../src/ThemeProvider/GlobalStyle/global.ts"],"sourcesContent":["import { css, type Theme } from 'antd-style';\n\nimport { CLASSNAMES } from '@/styles/classNames';\n\nexport default (token: Theme) => css`\n  :root {\n    --font-settings: 'cv01', 'tnum', 'kern';\n    --font-variations: 'opsz' auto, tabular-nums;\n\n    font-synthesis: none;\n    text-autospace: normal;\n  }\n\n  html {\n    overscroll-behavior: none;\n    color-scheme: ${token.isDarkMode ? 'dark' : 'light'};\n  }\n\n  body {\n    overflow: hidden auto;\n\n    min-height: 100vh;\n    margin: 0;\n    padding: 0;\n\n    font-family: ${token.fontFamily};\n    font-size: ${token.fontSize}px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    font-optical-sizing: auto;\n    font-kerning: normal;\n    font-variant-ligatures: common-ligatures contextual;\n    font-variant-numeric: tabular-nums;\n    font-size-adjust: from-font;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    line-height: 1;\n    color: ${token.colorTextBase};\n    text-wrap: pretty;\n    text-size-adjust: 100%;\n    text-size-adjust: 100%;\n    text-rendering: optimizelegibility;\n    overflow-wrap: anywhere;\n    vertical-align: baseline;\n\n    background-color: ${token.colorBgLayout};\n\n    font-synthesis: none;\n\n    -webkit-overflow-scrolling: touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: ${token.fontFamilyCode} !important;\n    font-feature-settings:\n      'liga' 0,\n      'calt' 0;\n    font-variant-ligatures: none;\n\n    span {\n      font-family: ${token.fontFamilyCode} !important;\n    }\n  }\n\n  ::selection {\n    color: #000;\n    background: ${token.yellow9};\n\n    -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n    scrollbar-color: ${token.colorFill} transparent;\n    scrollbar-width: thin;\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n\n  @layer lobe-popup {\n    .${CLASSNAMES.ContextTrigger}[data-popup-open],\n      .${CLASSNAMES.DropdownMenuTrigger}[data-popup-open] {\n      background: ${token.colorFillTertiary};\n    }\n  }\n\n  @layer lobe-base {\n    :where(.lobe-flex) {\n      /* Define defaults on the element itself to avoid CSS variable inheritance leaking to nested Flex */\n      --lobe-flex: 0 1 auto;\n      --lobe-flex-direction: column;\n      --lobe-flex-wrap: nowrap;\n      --lobe-flex-justify: flex-start;\n      --lobe-flex-align: stretch;\n      --lobe-flex-width: auto;\n      --lobe-flex-height: auto;\n      --lobe-flex-padding: 0;\n\n      /* Keep padding-inline/block aligned with padding by default, and prevent inheriting from parent */\n      --lobe-flex-padding-inline: var(--lobe-flex-padding);\n      --lobe-flex-padding-block: var(--lobe-flex-padding);\n      --lobe-flex-gap: 0;\n\n      display: flex;\n      flex: var(--lobe-flex);\n      flex-flow: var(--lobe-flex-direction) var(--lobe-flex-wrap);\n      gap: var(--lobe-flex-gap);\n      align-items: var(--lobe-flex-align);\n      justify-content: var(--lobe-flex-justify);\n\n      width: var(--lobe-flex-width);\n      height: var(--lobe-flex-height);\n      padding: var(--lobe-flex-padding);\n      padding-block: var(--lobe-flex-padding-block);\n      padding-inline: var(--lobe-flex-padding-inline);\n    }\n\n    .lobe-flex-hidden {\n      display: none;\n    }\n  }\n\n  /* Brand Loading */\n  @keyframes draw {\n    0% {\n      stroke-dashoffset: 1000;\n    }\n\n    100% {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  @keyframes fill {\n    30% {\n      fill-opacity: 0.05;\n    }\n\n    100% {\n      fill-opacity: 1;\n    }\n  }\n\n  .lobe-brand-loading path {\n    fill: currentcolor;\n    fill-opacity: 0;\n    stroke: currentcolor;\n    stroke-dasharray: 1000;\n    stroke-dashoffset: 1000;\n    stroke-width: 0.25em;\n\n    animation:\n      draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n      fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n`;\n"],"mappings":";;;AAIA,IAAA,kBAAgB,UAAiB,GAAG;;;;;;;;;;;oBAWhB,MAAM,aAAa,SAAS,QAAQ;;;;;;;;;;mBAUrC,MAAM,WAAW;iBACnB,MAAM,SAAS;;;;;;;;;;;aAWnB,MAAM,cAAc;;;;;;;;wBAQT,MAAM,cAAc;;;;;;;;;;;;mBAYzB,MAAM,eAAe;;;;;;;qBAOnB,MAAM,eAAe;;;;;;kBAMxB,MAAM,QAAQ;;;;;;uBAMT,MAAM,UAAU;;;;;;;OAOhC,WAAW,eAAe;SACxB,WAAW,oBAAoB;oBACpB,MAAM,kBAAkB"}
+{"version":3,"file":"global.mjs","names":[],"sources":["../../../src/ThemeProvider/GlobalStyle/global.ts"],"sourcesContent":["import { css, type Theme } from 'antd-style';\n\nimport { CLASSNAMES } from '@/styles/classNames';\n\nexport default (token: Theme) => css`\n  :root {\n    --font-settings: 'cv01', 'tnum', 'kern';\n    --font-variations: 'opsz' auto, tabular-nums;\n\n    /* Real Geist italic for Latin; synthesize style for CJK fallback faces. */\n    font-synthesis: style;\n    text-autospace: normal;\n  }\n\n  html {\n    overscroll-behavior: none;\n    color-scheme: ${token.isDarkMode ? 'dark' : 'light'};\n  }\n\n  body {\n    overflow: hidden auto;\n\n    min-height: 100vh;\n    margin: 0;\n    padding: 0;\n\n    font-family: ${token.fontFamily};\n    font-size: ${token.fontSize}px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    font-optical-sizing: auto;\n    font-kerning: normal;\n    font-variant-ligatures: common-ligatures contextual;\n    font-variant-numeric: tabular-nums;\n    font-size-adjust: from-font;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    line-height: 1;\n    color: ${token.colorTextBase};\n    text-wrap: pretty;\n    text-size-adjust: 100%;\n    text-size-adjust: 100%;\n    text-rendering: optimizelegibility;\n    overflow-wrap: anywhere;\n    vertical-align: baseline;\n\n    background-color: ${token.colorBgLayout};\n\n    font-synthesis: style;\n\n    -webkit-overflow-scrolling: touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: ${token.fontFamilyCode} !important;\n    font-feature-settings:\n      'liga' 0,\n      'calt' 0;\n    font-variant-ligatures: none;\n\n    span {\n      font-family: ${token.fontFamilyCode} !important;\n    }\n  }\n\n  ::selection {\n    color: #000;\n    background: ${token.yellow9};\n\n    -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n    scrollbar-color: ${token.colorFill} transparent;\n    scrollbar-width: thin;\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n\n  @layer lobe-popup {\n    .${CLASSNAMES.ContextTrigger}[data-popup-open],\n      .${CLASSNAMES.DropdownMenuTrigger}[data-popup-open] {\n      background: ${token.colorFillTertiary};\n    }\n  }\n\n  @layer lobe-base {\n    :where(.lobe-flex) {\n      /* Define defaults on the element itself to avoid CSS variable inheritance leaking to nested Flex */\n      --lobe-flex: 0 1 auto;\n      --lobe-flex-direction: column;\n      --lobe-flex-wrap: nowrap;\n      --lobe-flex-justify: flex-start;\n      --lobe-flex-align: stretch;\n      --lobe-flex-width: auto;\n      --lobe-flex-height: auto;\n      --lobe-flex-padding: 0;\n\n      /* Keep padding-inline/block aligned with padding by default, and prevent inheriting from parent */\n      --lobe-flex-padding-inline: var(--lobe-flex-padding);\n      --lobe-flex-padding-block: var(--lobe-flex-padding);\n      --lobe-flex-gap: 0;\n\n      display: flex;\n      flex: var(--lobe-flex);\n      flex-flow: var(--lobe-flex-direction) var(--lobe-flex-wrap);\n      gap: var(--lobe-flex-gap);\n      align-items: var(--lobe-flex-align);\n      justify-content: var(--lobe-flex-justify);\n\n      width: var(--lobe-flex-width);\n      height: var(--lobe-flex-height);\n      padding: var(--lobe-flex-padding);\n      padding-block: var(--lobe-flex-padding-block);\n      padding-inline: var(--lobe-flex-padding-inline);\n    }\n\n    .lobe-flex-hidden {\n      display: none;\n    }\n  }\n\n  /* Brand Loading */\n  @keyframes draw {\n    0% {\n      stroke-dashoffset: 1000;\n    }\n\n    100% {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  @keyframes fill {\n    30% {\n      fill-opacity: 0.05;\n    }\n\n    100% {\n      fill-opacity: 1;\n    }\n  }\n\n  .lobe-brand-loading path {\n    fill: currentcolor;\n    fill-opacity: 0;\n    stroke: currentcolor;\n    stroke-dasharray: 1000;\n    stroke-dashoffset: 1000;\n    stroke-width: 0.25em;\n\n    animation:\n      draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n      fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n`;\n"],"mappings":";;;AAIA,IAAA,kBAAgB,UAAiB,GAAG;;;;;;;;;;;;oBAYhB,MAAM,aAAa,SAAS,QAAQ;;;;;;;;;;mBAUrC,MAAM,WAAW;iBACnB,MAAM,SAAS;;;;;;;;;;;aAWnB,MAAM,cAAc;;;;;;;;wBAQT,MAAM,cAAc;;;;;;;;;;;;mBAYzB,MAAM,eAAe;;;;;;;qBAOnB,MAAM,eAAe;;;;;;kBAMxB,MAAM,QAAQ;;;;;;uBAMT,MAAM,UAAU;;;;;;;OAOhC,WAAW,eAAe;SACxB,WAAW,oBAAoB;oBACpB,MAAM,kBAAkB"}

package/es/ThemeProvider/ThemeProvider.mjs

@@ -24,7 +24,7 @@ const ThemeProvider$1 = memo(({ children, customStylish, customToken, enableCust
 			version: "1.0.0"
 		}),
 		genCdnUrl({
-			path: "css/index.css",
+			path: "css/index-full.css",
 			pkg: "@lobehub/webfont-geist",
 			version: "1.0.0"
 		}),