@lobehub/ui 5.7.0 → 5.7.1

package/es/base-ui/Modal/Modal.mjs

@@ -1,20 +1,28 @@
 "use client";
+import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
 import { stopPropagation } from "../../utils/dom.mjs";
 import { styles } from "./style.mjs";
 import { ModalBackdrop, ModalContent, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle } from "./atoms.mjs";
+import { acquireModalZIndex } from "./zIndexManager.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import { cx, useTheme } from "antd-style";
 import { useDragControls } from "motion/react";
 import { Maximize2, Minimize2, X } from "lucide-react";
 //#region src/base-ui/Modal/Modal.tsx
 const OkBtn = ({ confirmLoading, okButtonProps, okText, onOk }) => {
-	const { className: userCls, danger, disabled: userDisabled, onClick: userOnClick, ...restOk } = okButtonProps ?? {};
+	const theme = useTheme();
+	const { className: userCls, danger, disabled: userDisabled, onClick: userOnClick, style: userStyle, ...restOk } = okButtonProps ?? {};
+	const textColor = safeReadableColor(danger ? theme.colorError : theme.colorPrimary);
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		...restOk,
 		className: cx(styles.buttonBase, danger ? styles.dangerOkButton : styles.okButton, userCls),
 		disabled: confirmLoading || userDisabled,
+		style: {
+			color: textColor,
+			...userStyle
+		},
 		onClick: (e) => {
 			onOk(e);
 			userOnClick?.(e);
@@ -124,8 +132,13 @@ const Modal = memo(({ open, title, children, onOk, onCancel, okText = "OK", canc
 		handleOk
 	]);
 	const container = getContainer === false ? void 0 : getContainer ?? void 0;
-	const backdropZIndex = zIndex ? { zIndex } : void 0;
-	const popupZIndex = zIndex ? { zIndex: (zIndex || 1e3) + 1 } : void 0;
+	const prevOpenRef = useRef(false);
+	const acquiredZRef = useRef(void 0);
+	if (open && !prevOpenRef.current) acquiredZRef.current = acquireModalZIndex();
+	prevOpenRef.current = !!open;
+	const effectiveZIndex = zIndex ?? acquiredZRef.current;
+	const backdropZIndex = effectiveZIndex ? { zIndex: effectiveZIndex } : void 0;
+	const popupZIndex = effectiveZIndex ? { zIndex: effectiveZIndex + 1 } : void 0;
 	const shouldDrag = draggable && !isFullscreen;
 	const dragProps = shouldDrag ? {
 		drag: true,

package/es/base-ui/Modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","names":[],"sources":["../../../src/base-ui/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { useDragControls } from 'motion/react';\nimport type { MouseEvent, PointerEvent } from 'react';\nimport type React from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { stopPropagation } from '@/utils/dom';\n\nimport {\n  ModalBackdrop,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from './atoms';\nimport { styles } from './style';\nimport type { ModalComponentProps } from './type';\n\ninterface OkBtnProps {\n  confirmLoading?: boolean;\n  okButtonProps?: ModalComponentProps['okButtonProps'];\n  okText?: React.ReactNode;\n  onOk: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst OkBtn: React.FC<OkBtnProps> = ({ confirmLoading, okButtonProps, okText, onOk }) => {\n  const {\n    className: userCls,\n    danger,\n    disabled: userDisabled,\n    onClick: userOnClick,\n    ...restOk\n  } = okButtonProps ?? {};\n  return (\n    <button\n      type=\"button\"\n      {...restOk}\n      className={cx(styles.buttonBase, danger ? styles.dangerOkButton : styles.okButton, userCls)}\n      disabled={confirmLoading || userDisabled}\n      onClick={(e) => {\n        onOk(e);\n        userOnClick?.(e);\n      }}\n    >\n      {confirmLoading && <span className={styles.loadingSpinner} />}\n      {okText}\n    </button>\n  );\n};\ninterface CancelBtnProps {\n  cancelButtonProps?: ModalComponentProps['cancelButtonProps'];\n  cancelText?: React.ReactNode;\n  onCancel: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst CancelBtn: React.FC<CancelBtnProps> = ({ cancelButtonProps, cancelText, onCancel }) => {\n  const { className: userCls, onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};\n  return (\n    <button\n      type=\"button\"\n      {...restCancel}\n      className={cx(styles.buttonBase, styles.cancelButton, userCls)}\n      onClick={(e) => {\n        onCancel(e);\n        userOnClick?.(e);\n      }}\n    >\n      {cancelText}\n    </button>\n  );\n};\n\nconst Modal = memo<ModalComponentProps>(\n  ({\n    open,\n    title,\n    children,\n    onOk,\n    onCancel,\n    okText = 'OK',\n    cancelText = 'Cancel',\n    okButtonProps,\n    cancelButtonProps,\n    confirmLoading,\n    footer,\n    width,\n    height,\n    maskClosable = true,\n    closable = true,\n    closeIcon,\n    className,\n    style,\n    classNames,\n    styles: semanticStyles,\n    zIndex,\n    afterClose,\n    afterOpenChange,\n    loading,\n    getContainer,\n    mask = true,\n    keyboard,\n    draggable = true,\n    allowFullscreen = false,\n  }) => {\n    const dragControls = useDragControls();\n    const constraintsRef = useRef<HTMLDivElement>(null);\n    const [isFullscreen, setIsFullscreen] = useState(false);\n    const [isDragging, setIsDragging] = useState(false);\n    const [isDenying, setIsDenying] = useState(false);\n    const denyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n    useEffect(() => () => clearTimeout(denyTimerRef.current), []);\n\n    const triggerDeny = useCallback(() => {\n      clearTimeout(denyTimerRef.current);\n      setIsDenying(true);\n      denyTimerRef.current = setTimeout(() => setIsDenying(false), 400);\n    }, []);\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, eventDetails: { reason: string }) => {\n        if (!open) return;\n        if (!nextOpen && keyboard === false && eventDetails.reason === 'escape-key') return;\n        if (!nextOpen && !maskClosable && eventDetails.reason === 'outside-press') {\n          triggerDeny();\n          return;\n        }\n        if (!nextOpen) {\n          onCancel?.(new MouseEvent('click') as unknown as MouseEvent<HTMLButtonElement>);\n        }\n      },\n      [onCancel, keyboard, maskClosable, open, triggerDeny],\n    );\n\n    const handleExitComplete = useCallback(() => {\n      setIsFullscreen(false);\n      afterClose?.();\n      afterOpenChange?.(false);\n    }, [afterClose, afterOpenChange]);\n\n    const handleAnimationComplete = useCallback(() => {\n      if (open) afterOpenChange?.(true);\n    }, [open, afterOpenChange]);\n\n    const handleDragStart = useCallback(\n      (e: PointerEvent) => {\n        if (draggable && !isFullscreen) {\n          dragControls.start(e);\n          setIsDragging(true);\n        }\n      },\n      [draggable, dragControls, isFullscreen],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      setIsDragging(false);\n    }, []);\n\n    const handleOk = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        onOk?.(e);\n      },\n      [onOk],\n    );\n\n    const handleCancel = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        onCancel?.(e);\n      },\n      [onCancel],\n    );\n\n    const footerNode = useMemo(() => {\n      if (footer === false || footer === null) return null;\n      const cancelBtnNode = (\n        <CancelBtn\n          cancelButtonProps={cancelButtonProps}\n          cancelText={cancelText}\n          onCancel={handleCancel}\n        />\n      );\n      const okBtnNode = (\n        <OkBtn\n          confirmLoading={confirmLoading}\n          okButtonProps={okButtonProps}\n          okText={okText}\n          onOk={handleOk}\n        />\n      );\n      const defaultFooter = (\n        <>\n          {cancelBtnNode}\n          {okBtnNode}\n        </>\n      );\n\n      if (typeof footer === 'function') {\n        const BoundCancelBtn: React.FC = () => cancelBtnNode;\n        const BoundOkBtn: React.FC = () => okBtnNode;\n        return footer(defaultFooter, { CancelBtn: BoundCancelBtn, OkBtn: BoundOkBtn });\n      }\n\n      return footer ?? defaultFooter;\n    }, [\n      footer,\n      cancelButtonProps,\n      cancelText,\n      handleCancel,\n      confirmLoading,\n      okButtonProps,\n      okText,\n      handleOk,\n    ]);\n\n    const container = getContainer === false ? undefined : (getContainer ?? undefined);\n    const backdropZIndex = zIndex ? { zIndex } : undefined;\n    const popupZIndex = zIndex ? { zIndex: (zIndex || 1000) + 1 } : undefined;\n\n    const shouldDrag = draggable && !isFullscreen;\n    const dragProps = shouldDrag\n      ? {\n          drag: true as const,\n          dragConstraints: constraintsRef,\n          dragControls,\n          dragElastic: 0,\n          dragListener: false,\n          dragMomentum: false,\n          whileDrag: { cursor: 'grabbing' as const },\n        }\n      : {};\n\n    const showTitle = title !== undefined && title !== false && title !== null;\n    const showHeader = showTitle || closable || allowFullscreen;\n\n    const hasHeight = height !== undefined;\n    const panelStyle: React.CSSProperties = {\n      ...(hasHeight && !isFullscreen ? { height } : {}),\n      ...style,\n    };\n\n    return (\n      <ModalRoot\n        open={open ?? false}\n        onExitComplete={handleExitComplete}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && (\n            <ModalBackdrop\n              className={classNames?.mask}\n              style={{ ...backdropZIndex, ...semanticStyles?.mask }}\n            />\n          )}\n          <ModalPopup\n            className={classNames?.wrapper}\n            popupStyle={{ ...popupZIndex, ...semanticStyles?.wrapper }}\n            ref={constraintsRef}\n            style={panelStyle}\n            width={isFullscreen ? undefined : width}\n            motionProps={{\n              ...dragProps,\n              onAnimationComplete: handleAnimationComplete,\n            }}\n            panelClassName={cx(\n              className,\n              isFullscreen && styles.fullscreenPopupInner,\n              isDenying && styles.denyAnimation,\n            )}\n          >\n            {showHeader && (\n              <ModalHeader\n                className={cx(classNames?.header, shouldDrag && styles.headerDraggable)}\n                style={{\n                  ...(isDragging ? { cursor: 'grabbing' } : {}),\n                  ...semanticStyles?.header,\n                }}\n                onPointerCancel={handleDragEnd}\n                onPointerDown={handleDragStart}\n                onPointerUp={handleDragEnd}\n              >\n                {showTitle ? (\n                  <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n                    {title}\n                  </ModalTitle>\n                ) : (\n                  <span />\n                )}\n                <div className={styles.headerActions} onPointerDown={stopPropagation}>\n                  {allowFullscreen && (\n                    <button\n                      aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n                      className={styles.fullscreenToggle}\n                      type=\"button\"\n                      onClick={() => setIsFullscreen((prev) => !prev)}\n                    >\n                      {isFullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}\n                    </button>\n                  )}\n                  {closable && (\n                    <button\n                      aria-label=\"Close\"\n                      className={styles.closeInline}\n                      type=\"button\"\n                      onClick={handleCancel}\n                    >\n                      {closeIcon ?? <X size={18} />}\n                    </button>\n                  )}\n                </div>\n              </ModalHeader>\n            )}\n            <ModalContent\n              className={classNames?.body}\n              style={{\n                ...(hasHeight || isFullscreen ? { flex: 1 } : {}),\n                ...semanticStyles?.body,\n              }}\n            >\n              {loading ? (\n                <div\n                  style={{\n                    display: 'flex',\n                    justifyContent: 'center',\n                    padding: '32px 0',\n                  }}\n                >\n                  <span className={styles.loadingSpinner} style={{ height: 24, width: 24 }} />\n                </div>\n              ) : (\n                children\n              )}\n            </ModalContent>\n            {footerNode !== null && (\n              <ModalFooter className={classNames?.footer} style={semanticStyles?.footer}>\n                {footerNode}\n              </ModalFooter>\n            )}\n          </ModalPopup>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"Modal.mjs","names":[],"sources":["../../../src/base-ui/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useTheme } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { useDragControls } from 'motion/react';\nimport type { MouseEvent, PointerEvent } from 'react';\nimport type React from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { stopPropagation } from '@/utils/dom';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport {\n  ModalBackdrop,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from './atoms';\nimport { styles } from './style';\nimport type { ModalComponentProps } from './type';\nimport { acquireModalZIndex } from './zIndexManager';\n\ninterface OkBtnProps {\n  confirmLoading?: boolean;\n  okButtonProps?: ModalComponentProps['okButtonProps'];\n  okText?: React.ReactNode;\n  onOk: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst OkBtn: React.FC<OkBtnProps> = ({ confirmLoading, okButtonProps, okText, onOk }) => {\n  const theme = useTheme();\n  const {\n    className: userCls,\n    danger,\n    disabled: userDisabled,\n    onClick: userOnClick,\n    style: userStyle,\n    ...restOk\n  } = okButtonProps ?? {};\n  const bgColor = danger ? theme.colorError : theme.colorPrimary;\n  const textColor = safeReadableColor(bgColor);\n  return (\n    <button\n      type=\"button\"\n      {...restOk}\n      className={cx(styles.buttonBase, danger ? styles.dangerOkButton : styles.okButton, userCls)}\n      disabled={confirmLoading || userDisabled}\n      style={{ color: textColor, ...userStyle }}\n      onClick={(e) => {\n        onOk(e);\n        userOnClick?.(e);\n      }}\n    >\n      {confirmLoading && <span className={styles.loadingSpinner} />}\n      {okText}\n    </button>\n  );\n};\ninterface CancelBtnProps {\n  cancelButtonProps?: ModalComponentProps['cancelButtonProps'];\n  cancelText?: React.ReactNode;\n  onCancel: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst CancelBtn: React.FC<CancelBtnProps> = ({ cancelButtonProps, cancelText, onCancel }) => {\n  const { className: userCls, onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};\n  return (\n    <button\n      type=\"button\"\n      {...restCancel}\n      className={cx(styles.buttonBase, styles.cancelButton, userCls)}\n      onClick={(e) => {\n        onCancel(e);\n        userOnClick?.(e);\n      }}\n    >\n      {cancelText}\n    </button>\n  );\n};\n\nconst Modal = memo<ModalComponentProps>(\n  ({\n    open,\n    title,\n    children,\n    onOk,\n    onCancel,\n    okText = 'OK',\n    cancelText = 'Cancel',\n    okButtonProps,\n    cancelButtonProps,\n    confirmLoading,\n    footer,\n    width,\n    height,\n    maskClosable = true,\n    closable = true,\n    closeIcon,\n    className,\n    style,\n    classNames,\n    styles: semanticStyles,\n    zIndex,\n    afterClose,\n    afterOpenChange,\n    loading,\n    getContainer,\n    mask = true,\n    keyboard,\n    draggable = true,\n    allowFullscreen = false,\n  }) => {\n    const dragControls = useDragControls();\n    const constraintsRef = useRef<HTMLDivElement>(null);\n    const [isFullscreen, setIsFullscreen] = useState(false);\n    const [isDragging, setIsDragging] = useState(false);\n    const [isDenying, setIsDenying] = useState(false);\n    const denyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n    useEffect(() => () => clearTimeout(denyTimerRef.current), []);\n\n    const triggerDeny = useCallback(() => {\n      clearTimeout(denyTimerRef.current);\n      setIsDenying(true);\n      denyTimerRef.current = setTimeout(() => setIsDenying(false), 400);\n    }, []);\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, eventDetails: { reason: string }) => {\n        if (!open) return;\n        if (!nextOpen && keyboard === false && eventDetails.reason === 'escape-key') return;\n        if (!nextOpen && !maskClosable && eventDetails.reason === 'outside-press') {\n          triggerDeny();\n          return;\n        }\n        if (!nextOpen) {\n          onCancel?.(new MouseEvent('click') as unknown as MouseEvent<HTMLButtonElement>);\n        }\n      },\n      [onCancel, keyboard, maskClosable, open, triggerDeny],\n    );\n\n    const handleExitComplete = useCallback(() => {\n      setIsFullscreen(false);\n      afterClose?.();\n      afterOpenChange?.(false);\n    }, [afterClose, afterOpenChange]);\n\n    const handleAnimationComplete = useCallback(() => {\n      if (open) afterOpenChange?.(true);\n    }, [open, afterOpenChange]);\n\n    const handleDragStart = useCallback(\n      (e: PointerEvent) => {\n        if (draggable && !isFullscreen) {\n          dragControls.start(e);\n          setIsDragging(true);\n        }\n      },\n      [draggable, dragControls, isFullscreen],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      setIsDragging(false);\n    }, []);\n\n    const handleOk = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        onOk?.(e);\n      },\n      [onOk],\n    );\n\n    const handleCancel = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        onCancel?.(e);\n      },\n      [onCancel],\n    );\n\n    const footerNode = useMemo(() => {\n      if (footer === false || footer === null) return null;\n      const cancelBtnNode = (\n        <CancelBtn\n          cancelButtonProps={cancelButtonProps}\n          cancelText={cancelText}\n          onCancel={handleCancel}\n        />\n      );\n      const okBtnNode = (\n        <OkBtn\n          confirmLoading={confirmLoading}\n          okButtonProps={okButtonProps}\n          okText={okText}\n          onOk={handleOk}\n        />\n      );\n      const defaultFooter = (\n        <>\n          {cancelBtnNode}\n          {okBtnNode}\n        </>\n      );\n\n      if (typeof footer === 'function') {\n        const BoundCancelBtn: React.FC = () => cancelBtnNode;\n        const BoundOkBtn: React.FC = () => okBtnNode;\n        return footer(defaultFooter, { CancelBtn: BoundCancelBtn, OkBtn: BoundOkBtn });\n      }\n\n      return footer ?? defaultFooter;\n    }, [\n      footer,\n      cancelButtonProps,\n      cancelText,\n      handleCancel,\n      confirmLoading,\n      okButtonProps,\n      okText,\n      handleOk,\n    ]);\n\n    const container = getContainer === false ? undefined : (getContainer ?? undefined);\n\n    const prevOpenRef = useRef(false);\n    const acquiredZRef = useRef<number | undefined>(undefined);\n    if (open && !prevOpenRef.current) {\n      acquiredZRef.current = acquireModalZIndex();\n    }\n    prevOpenRef.current = !!open;\n    const effectiveZIndex = zIndex ?? acquiredZRef.current;\n    const backdropZIndex = effectiveZIndex ? { zIndex: effectiveZIndex } : undefined;\n    const popupZIndex = effectiveZIndex ? { zIndex: effectiveZIndex + 1 } : undefined;\n\n    const shouldDrag = draggable && !isFullscreen;\n    const dragProps = shouldDrag\n      ? {\n          drag: true as const,\n          dragConstraints: constraintsRef,\n          dragControls,\n          dragElastic: 0,\n          dragListener: false,\n          dragMomentum: false,\n          whileDrag: { cursor: 'grabbing' as const },\n        }\n      : {};\n\n    const showTitle = title !== undefined && title !== false && title !== null;\n    const showHeader = showTitle || closable || allowFullscreen;\n\n    const hasHeight = height !== undefined;\n    const panelStyle: React.CSSProperties = {\n      ...(hasHeight && !isFullscreen ? { height } : {}),\n      ...style,\n    };\n\n    return (\n      <ModalRoot\n        open={open ?? false}\n        onExitComplete={handleExitComplete}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && (\n            <ModalBackdrop\n              className={classNames?.mask}\n              style={{ ...backdropZIndex, ...semanticStyles?.mask }}\n            />\n          )}\n          <ModalPopup\n            className={classNames?.wrapper}\n            popupStyle={{ ...popupZIndex, ...semanticStyles?.wrapper }}\n            ref={constraintsRef}\n            style={panelStyle}\n            width={isFullscreen ? undefined : width}\n            motionProps={{\n              ...dragProps,\n              onAnimationComplete: handleAnimationComplete,\n            }}\n            panelClassName={cx(\n              className,\n              isFullscreen && styles.fullscreenPopupInner,\n              isDenying && styles.denyAnimation,\n            )}\n          >\n            {showHeader && (\n              <ModalHeader\n                className={cx(classNames?.header, shouldDrag && styles.headerDraggable)}\n                style={{\n                  ...(isDragging ? { cursor: 'grabbing' } : {}),\n                  ...semanticStyles?.header,\n                }}\n                onPointerCancel={handleDragEnd}\n                onPointerDown={handleDragStart}\n                onPointerUp={handleDragEnd}\n              >\n                {showTitle ? (\n                  <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n                    {title}\n                  </ModalTitle>\n                ) : (\n                  <span />\n                )}\n                <div className={styles.headerActions} onPointerDown={stopPropagation}>\n                  {allowFullscreen && (\n                    <button\n                      aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n                      className={styles.fullscreenToggle}\n                      type=\"button\"\n                      onClick={() => setIsFullscreen((prev) => !prev)}\n                    >\n                      {isFullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}\n                    </button>\n                  )}\n                  {closable && (\n                    <button\n                      aria-label=\"Close\"\n                      className={styles.closeInline}\n                      type=\"button\"\n                      onClick={handleCancel}\n                    >\n                      {closeIcon ?? <X size={18} />}\n                    </button>\n                  )}\n                </div>\n              </ModalHeader>\n            )}\n            <ModalContent\n              className={classNames?.body}\n              style={{\n                ...(hasHeight || isFullscreen ? { flex: 1 } : {}),\n                ...semanticStyles?.body,\n              }}\n            >\n              {loading ? (\n                <div\n                  style={{\n                    display: 'flex',\n                    justifyContent: 'center',\n                    padding: '32px 0',\n                  }}\n                >\n                  <span className={styles.loadingSpinner} style={{ height: 24, width: 24 }} />\n                </div>\n              ) : (\n                children\n              )}\n            </ModalContent>\n            {footerNode !== null && (\n              <ModalFooter className={classNames?.footer} style={semanticStyles?.footer}>\n                {footerNode}\n              </ModalFooter>\n            )}\n          </ModalPopup>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}

package/es/base-ui/Modal/imperative.mjs

@@ -1,13 +1,15 @@
 "use client";
 import { useIsClient } from "../../hooks/useIsClient.mjs";
 import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
+import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
 import { registerDevSingleton } from "../../utils/devSingleton.mjs";
 import { styles } from "./style.mjs";
 import { ModalBackdrop, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle } from "./atoms.mjs";
 import { ModalContext, useModalContext } from "./context.mjs";
-import { memo, useCallback, useEffect, useState, useSyncExternalStore } from "react";
+import { acquireModalZIndex } from "./zIndexManager.mjs";
+import { memo, useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
+import { cx, useTheme } from "antd-style";
 import { createPortal } from "react-dom";
 //#region src/base-ui/Modal/imperative.tsx
 const ModalPortalWrapper = ({ children, root }) => {
@@ -16,9 +18,11 @@ const ModalPortalWrapper = ({ children, root }) => {
 };
 const ConfirmBody = ({ config }) => {
 	const { close } = useModalContext();
+	const theme = useTheme();
 	const [loading, setLoading] = useState(false);
 	const { cancelText = "Cancel", content, okButtonProps, okText = "OK", onCancel, onOk } = config;
-	const { danger, className: okUserCls, ...restOkProps } = okButtonProps ?? {};
+	const { danger, className: okUserCls, style: okUserStyle, ...restOkProps } = okButtonProps ?? {};
+	const okTextColor = safeReadableColor(danger ? theme.colorError : theme.colorPrimary);
 	const handleCancel = useCallback(() => {
 		close();
 		onCancel?.();
@@ -48,6 +52,10 @@ const ConfirmBody = ({ config }) => {
 	}), /* @__PURE__ */ jsxs("button", {
 		...restOkProps,
 		disabled: loading,
+		style: {
+			color: okTextColor,
+			...okUserStyle
+		},
 		type: "button",
 		className: cx(styles.buttonBase, danger ? styles.dangerOkButton : styles.okButton, okUserCls),
 		onClick: handleOk,
@@ -98,6 +106,11 @@ function createModalSystem() {
 		const { id, props } = entry;
 		const { children, classNames, content, footer, maskClosable, onOpenChange, onOpenChangeComplete, open, styles: semanticStyles, title, width } = props;
 		const isOpen = open ?? true;
+		const zIndexRef = useRef(void 0);
+		const prevOpenRef = useRef(false);
+		if (isOpen && !prevOpenRef.current) zIndexRef.current = acquireModalZIndex();
+		prevOpenRef.current = isOpen;
+		const zIndex = zIndexRef.current ?? 1e3;
 		const handleOpenChange = useCallback((nextOpen, eventDetails) => {
 			if (!nextOpen && maskClosable === false && eventDetails?.reason === "outside-press") return;
 			if (!nextOpen) closeModal(id);
@@ -125,10 +138,16 @@ function createModalSystem() {
 				onOpenChange: handleOpenChange,
 				children: /* @__PURE__ */ jsxs(ModalPortal, { children: [/* @__PURE__ */ jsx(ModalBackdrop, {
 					className: classNames?.backdrop,
-					style: semanticStyles?.backdrop
+					style: {
+						zIndex,
+						...semanticStyles?.backdrop
+					}
 				}), /* @__PURE__ */ jsxs(ModalPopup, {
 					className: classNames?.popup,
-					popupStyle: semanticStyles?.popup,
+					popupStyle: {
+						zIndex: zIndex + 1,
+						...semanticStyles?.popup
+					},
 					width,
 					children: [
 						showTitle && /* @__PURE__ */ jsxs(ModalHeader, {

package/es/base-ui/Modal/imperative.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"imperative.mjs","names":[],"sources":["../../../src/base-ui/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\n\nimport {\n  ModalBackdrop,\n  ModalClose,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from './atoms';\nimport { ModalContext, useModalContext } from './context';\nimport { styles } from './style';\nimport type { ImperativeModalProps, ModalConfirmConfig, ModalInstance } from './type';\n\n// --- Shared types ---\n\ntype ModalStackEntry = {\n  id: string;\n  props: ImperativeModalProps;\n};\n\n// --- Shared components (stack-independent) ---\n\nconst ModalPortalWrapper = ({\n  children,\n  root,\n}: {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | null;\n}) => {\n  const appElement = useAppElement();\n  const container = root ?? appElement ?? document.body;\n  return createPortal(children, container);\n};\n\nconst ConfirmBody = ({ config }: { config: ModalConfirmConfig }) => {\n  const { close } = useModalContext();\n  const [loading, setLoading] = useState(false);\n\n  const { cancelText = 'Cancel', content, okButtonProps, okText = 'OK', onCancel, onOk } = config;\n\n  const { danger, className: okUserCls, ...restOkProps } = okButtonProps ?? {};\n\n  const handleCancel = useCallback(() => {\n    close();\n    onCancel?.();\n  }, [close, onCancel]);\n\n  const handleOk = useCallback(async () => {\n    if (onOk) {\n      try {\n        const result = onOk();\n        if (result && typeof (result as any).then === 'function') {\n          setLoading(true);\n          await result;\n          setLoading(false);\n        }\n      } catch {\n        setLoading(false);\n        return;\n      }\n    }\n    close();\n  }, [close, onOk]);\n\n  return (\n    <>\n      {content && <div style={{ padding: '16px 24px' }}>{content}</div>}\n      <ModalFooter>\n        <button\n          className={cx(styles.buttonBase, styles.cancelButton)}\n          type=\"button\"\n          onClick={handleCancel}\n        >\n          {cancelText}\n        </button>\n        <button\n          {...restOkProps}\n          disabled={loading}\n          type=\"button\"\n          className={cx(\n            styles.buttonBase,\n            danger ? styles.dangerOkButton : styles.okButton,\n            okUserCls,\n          )}\n          onClick={handleOk}\n        >\n          {loading && <span className={styles.loadingSpinner} />}\n          {okText}\n        </button>\n      </ModalFooter>\n    </>\n  );\n};\nConfirmBody.displayName = 'ConfirmBody';\n\n// --- Factory ---\n\nexport interface ModalHostProps {\n  root?: HTMLElement | ShadowRoot | null;\n}\n\nexport interface ModalSystem {\n  confirmModal: (config: ModalConfirmConfig) => { close: () => void; destroy: () => void };\n  createModal: (props: ImperativeModalProps) => ModalInstance;\n  ModalHost: React.FC<ModalHostProps>;\n}\n\nlet systemSeed = 0;\n\nexport function createModalSystem(): ModalSystem {\n  const systemId = systemSeed++;\n  const singletonName = systemId === 0 ? 'BaseModalHost' : `BaseModalHost-${systemId}`;\n\n  // --- Stack state (isolated per system) ---\n  let modalStack: ModalStackEntry[] = [];\n  let modalSeed = 0;\n  const listeners = new Set<() => void>();\n\n  const notify = () => listeners.forEach((l) => l());\n  const subscribe = (l: () => void) => {\n    listeners.add(l);\n    return () => listeners.delete(l);\n  };\n  const EMPTY: ModalStackEntry[] = [];\n  const getSnapshot = () => modalStack;\n  const getServerSnapshot = () => EMPTY;\n\n  // --- Stack operations ---\n\n  const updateModal = (id: string, next: Partial<ImperativeModalProps>) => {\n    let changed = false;\n    modalStack = modalStack.map((item) => {\n      if (item.id !== id) return item;\n      changed = true;\n      return { ...item, props: { ...item.props, ...next } };\n    });\n    if (changed) notify();\n  };\n\n  const closeModal = (id: string) => {\n    updateModal(id, { open: false });\n  };\n\n  const destroyModal = (id: string) => {\n    const next = modalStack.filter((item) => item.id !== id);\n    if (next.length === modalStack.length) return;\n    modalStack = next;\n    notify();\n  };\n\n  // --- Stack Item (captures operations via closure) ---\n\n  const StackItem = memo(({ entry }: { entry: ModalStackEntry }) => {\n    const { id, props } = entry;\n    const {\n      children,\n      classNames,\n      content,\n      footer,\n      maskClosable,\n      onOpenChange,\n      onOpenChangeComplete,\n      open,\n      styles: semanticStyles,\n      title,\n      width,\n    } = props;\n\n    const isOpen = open ?? true;\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, eventDetails?: { reason: string }) => {\n        if (!nextOpen && maskClosable === false && eventDetails?.reason === 'outside-press') return;\n        if (!nextOpen) closeModal(id);\n        onOpenChange?.(nextOpen);\n      },\n      [id, maskClosable, onOpenChange],\n    );\n\n    const handleExitComplete = useCallback(() => {\n      onOpenChangeComplete?.(false);\n      destroyModal(id);\n    }, [id, onOpenChangeComplete]);\n\n    const close = useCallback(() => closeModal(id), [id]);\n    const setCanDismissByClickOutside = useCallback(\n      (value: boolean) => updateModal(id, { maskClosable: value }),\n      [id],\n    );\n\n    const showTitle = title !== undefined && title !== false && title !== null;\n\n    return (\n      <ModalContext value={{ close, setCanDismissByClickOutside }}>\n        <ModalRoot\n          open={isOpen}\n          onExitComplete={handleExitComplete}\n          onOpenChange={handleOpenChange}\n        >\n          <ModalPortal>\n            <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n            <ModalPopup\n              className={classNames?.popup}\n              popupStyle={semanticStyles?.popup}\n              width={width}\n            >\n              {showTitle && (\n                <ModalHeader className={classNames?.header} style={semanticStyles?.header}>\n                  <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n                    {title}\n                  </ModalTitle>\n                  <ModalClose className={classNames?.close} style={semanticStyles?.close} />\n                </ModalHeader>\n              )}\n              <ModalContent className={classNames?.content} style={semanticStyles?.content}>\n                {content ?? children}\n              </ModalContent>\n              {footer}\n            </ModalPopup>\n          </ModalPortal>\n        </ModalRoot>\n      </ModalContext>\n    );\n  });\n  StackItem.displayName = 'ModalStackItem';\n\n  const StackRenderer = memo(({ stack }: { stack: ModalStackEntry[] }) => {\n    const isClient = useIsClient();\n    if (!isClient) return null;\n    return stack.map((entry) => <StackItem entry={entry} key={entry.id} />);\n  });\n  StackRenderer.displayName = 'ModalStackRenderer';\n\n  // --- ModalHost ---\n\n  const Host = ({ root }: ModalHostProps) => {\n    const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n    const isClient = useIsClient();\n\n    useEffect(() => {\n      if (!isClient) return;\n      const scope = root ?? document.body;\n      return registerDevSingleton(singletonName, scope);\n    }, [isClient, root]);\n\n    if (!isClient) return null;\n    if (stack.length === 0) return null;\n\n    return (\n      <ModalPortalWrapper root={root}>\n        <StackRenderer stack={stack} />\n      </ModalPortalWrapper>\n    );\n  };\n\n  // --- createModal ---\n\n  const create = (props: ImperativeModalProps): ModalInstance => {\n    const id = `base-modal-${Date.now()}-${modalSeed++}`;\n    modalStack = [...modalStack, { id, props: { ...props, open: props.open ?? true } }];\n    notify();\n\n    return {\n      close: () => closeModal(id),\n      destroy: () => destroyModal(id),\n      setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),\n      update: (nextProps) => updateModal(id, nextProps),\n    };\n  };\n\n  // --- confirmModal ---\n\n  const confirm = (config: ModalConfirmConfig) => {\n    const instance = create({\n      content: <ConfirmBody config={config} />,\n      styles: { content: { padding: 0 } },\n      title: config.title,\n      width: 420,\n    });\n\n    return {\n      close: instance.close,\n      destroy: instance.destroy,\n    };\n  };\n\n  return { ModalHost: Host, confirmModal: confirm, createModal: create };\n}\n\n// --- Default global instance (backward compatible) ---\n\nconst defaultSystem = createModalSystem();\nexport const ModalHost = defaultSystem.ModalHost;\nexport const createModal = defaultSystem.createModal;\nexport const confirmModal = defaultSystem.confirmModal;\n"],"mappings":"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"}
+{"version":3,"file":"imperative.mjs","names":[],"sources":["../../../src/base-ui/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useTheme } from 'antd-style';\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport {\n  ModalBackdrop,\n  ModalClose,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from './atoms';\nimport { ModalContext, useModalContext } from './context';\nimport { styles } from './style';\nimport type { ImperativeModalProps, ModalConfirmConfig, ModalInstance } from './type';\nimport { acquireModalZIndex } from './zIndexManager';\n\n// --- Shared types ---\n\ntype ModalStackEntry = {\n  id: string;\n  props: ImperativeModalProps;\n};\n\n// --- Shared components (stack-independent) ---\n\nconst ModalPortalWrapper = ({\n  children,\n  root,\n}: {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | null;\n}) => {\n  const appElement = useAppElement();\n  const container = root ?? appElement ?? document.body;\n  return createPortal(children, container);\n};\n\nconst ConfirmBody = ({ config }: { config: ModalConfirmConfig }) => {\n  const { close } = useModalContext();\n  const theme = useTheme();\n  const [loading, setLoading] = useState(false);\n\n  const { cancelText = 'Cancel', content, okButtonProps, okText = 'OK', onCancel, onOk } = config;\n\n  const { danger, className: okUserCls, style: okUserStyle, ...restOkProps } = okButtonProps ?? {};\n  const okBgColor = danger ? theme.colorError : theme.colorPrimary;\n  const okTextColor = safeReadableColor(okBgColor);\n\n  const handleCancel = useCallback(() => {\n    close();\n    onCancel?.();\n  }, [close, onCancel]);\n\n  const handleOk = useCallback(async () => {\n    if (onOk) {\n      try {\n        const result = onOk();\n        if (result && typeof (result as any).then === 'function') {\n          setLoading(true);\n          await result;\n          setLoading(false);\n        }\n      } catch {\n        setLoading(false);\n        return;\n      }\n    }\n    close();\n  }, [close, onOk]);\n\n  return (\n    <>\n      {content && <div style={{ padding: '16px 24px' }}>{content}</div>}\n      <ModalFooter>\n        <button\n          className={cx(styles.buttonBase, styles.cancelButton)}\n          type=\"button\"\n          onClick={handleCancel}\n        >\n          {cancelText}\n        </button>\n        <button\n          {...restOkProps}\n          disabled={loading}\n          style={{ color: okTextColor, ...okUserStyle }}\n          type=\"button\"\n          className={cx(\n            styles.buttonBase,\n            danger ? styles.dangerOkButton : styles.okButton,\n            okUserCls,\n          )}\n          onClick={handleOk}\n        >\n          {loading && <span className={styles.loadingSpinner} />}\n          {okText}\n        </button>\n      </ModalFooter>\n    </>\n  );\n};\nConfirmBody.displayName = 'ConfirmBody';\n\n// --- Factory ---\n\nexport interface ModalHostProps {\n  root?: HTMLElement | ShadowRoot | null;\n}\n\nexport interface ModalSystem {\n  confirmModal: (config: ModalConfirmConfig) => { close: () => void; destroy: () => void };\n  createModal: (props: ImperativeModalProps) => ModalInstance;\n  ModalHost: React.FC<ModalHostProps>;\n}\n\nlet systemSeed = 0;\n\nexport function createModalSystem(): ModalSystem {\n  const systemId = systemSeed++;\n  const singletonName = systemId === 0 ? 'BaseModalHost' : `BaseModalHost-${systemId}`;\n\n  // --- Stack state (isolated per system) ---\n  let modalStack: ModalStackEntry[] = [];\n  let modalSeed = 0;\n  const listeners = new Set<() => void>();\n\n  const notify = () => listeners.forEach((l) => l());\n  const subscribe = (l: () => void) => {\n    listeners.add(l);\n    return () => listeners.delete(l);\n  };\n  const EMPTY: ModalStackEntry[] = [];\n  const getSnapshot = () => modalStack;\n  const getServerSnapshot = () => EMPTY;\n\n  // --- Stack operations ---\n\n  const updateModal = (id: string, next: Partial<ImperativeModalProps>) => {\n    let changed = false;\n    modalStack = modalStack.map((item) => {\n      if (item.id !== id) return item;\n      changed = true;\n      return { ...item, props: { ...item.props, ...next } };\n    });\n    if (changed) notify();\n  };\n\n  const closeModal = (id: string) => {\n    updateModal(id, { open: false });\n  };\n\n  const destroyModal = (id: string) => {\n    const next = modalStack.filter((item) => item.id !== id);\n    if (next.length === modalStack.length) return;\n    modalStack = next;\n    notify();\n  };\n\n  // --- Stack Item (captures operations via closure) ---\n\n  const StackItem = memo(({ entry }: { entry: ModalStackEntry }) => {\n    const { id, props } = entry;\n    const {\n      children,\n      classNames,\n      content,\n      footer,\n      maskClosable,\n      onOpenChange,\n      onOpenChangeComplete,\n      open,\n      styles: semanticStyles,\n      title,\n      width,\n    } = props;\n\n    const isOpen = open ?? true;\n\n    const zIndexRef = useRef<number | undefined>(undefined);\n    const prevOpenRef = useRef(false);\n    if (isOpen && !prevOpenRef.current) {\n      zIndexRef.current = acquireModalZIndex();\n    }\n    prevOpenRef.current = isOpen;\n    const zIndex = zIndexRef.current ?? 1000;\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, eventDetails?: { reason: string }) => {\n        if (!nextOpen && maskClosable === false && eventDetails?.reason === 'outside-press') return;\n        if (!nextOpen) closeModal(id);\n        onOpenChange?.(nextOpen);\n      },\n      [id, maskClosable, onOpenChange],\n    );\n\n    const handleExitComplete = useCallback(() => {\n      onOpenChangeComplete?.(false);\n      destroyModal(id);\n    }, [id, onOpenChangeComplete]);\n\n    const close = useCallback(() => closeModal(id), [id]);\n    const setCanDismissByClickOutside = useCallback(\n      (value: boolean) => updateModal(id, { maskClosable: value }),\n      [id],\n    );\n\n    const showTitle = title !== undefined && title !== false && title !== null;\n\n    return (\n      <ModalContext value={{ close, setCanDismissByClickOutside }}>\n        <ModalRoot\n          open={isOpen}\n          onExitComplete={handleExitComplete}\n          onOpenChange={handleOpenChange}\n        >\n          <ModalPortal>\n            <ModalBackdrop\n              className={classNames?.backdrop}\n              style={{ zIndex, ...semanticStyles?.backdrop }}\n            />\n            <ModalPopup\n              className={classNames?.popup}\n              popupStyle={{ zIndex: zIndex + 1, ...semanticStyles?.popup }}\n              width={width}\n            >\n              {showTitle && (\n                <ModalHeader className={classNames?.header} style={semanticStyles?.header}>\n                  <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n                    {title}\n                  </ModalTitle>\n                  <ModalClose className={classNames?.close} style={semanticStyles?.close} />\n                </ModalHeader>\n              )}\n              <ModalContent className={classNames?.content} style={semanticStyles?.content}>\n                {content ?? children}\n              </ModalContent>\n              {footer}\n            </ModalPopup>\n          </ModalPortal>\n        </ModalRoot>\n      </ModalContext>\n    );\n  });\n  StackItem.displayName = 'ModalStackItem';\n\n  const StackRenderer = memo(({ stack }: { stack: ModalStackEntry[] }) => {\n    const isClient = useIsClient();\n    if (!isClient) return null;\n    return stack.map((entry) => <StackItem entry={entry} key={entry.id} />);\n  });\n  StackRenderer.displayName = 'ModalStackRenderer';\n\n  // --- ModalHost ---\n\n  const Host = ({ root }: ModalHostProps) => {\n    const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n    const isClient = useIsClient();\n\n    useEffect(() => {\n      if (!isClient) return;\n      const scope = root ?? document.body;\n      return registerDevSingleton(singletonName, scope);\n    }, [isClient, root]);\n\n    if (!isClient) return null;\n    if (stack.length === 0) return null;\n\n    return (\n      <ModalPortalWrapper root={root}>\n        <StackRenderer stack={stack} />\n      </ModalPortalWrapper>\n    );\n  };\n\n  // --- createModal ---\n\n  const create = (props: ImperativeModalProps): ModalInstance => {\n    const id = `base-modal-${Date.now()}-${modalSeed++}`;\n    modalStack = [...modalStack, { id, props: { ...props, open: props.open ?? true } }];\n    notify();\n\n    return {\n      close: () => closeModal(id),\n      destroy: () => destroyModal(id),\n      setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),\n      update: (nextProps) => updateModal(id, nextProps),\n    };\n  };\n\n  // --- confirmModal ---\n\n  const confirm = (config: ModalConfirmConfig) => {\n    const instance = create({\n      content: <ConfirmBody config={config} />,\n      styles: { content: { padding: 0 } },\n      title: config.title,\n      width: 420,\n    });\n\n    return {\n      close: instance.close,\n      destroy: instance.destroy,\n    };\n  };\n\n  return { ModalHost: Host, confirmModal: confirm, createModal: create };\n}\n\n// --- Default global instance (backward compatible) ---\n\nconst defaultSystem = createModalSystem();\nexport const ModalHost = defaultSystem.ModalHost;\nexport const createModal = defaultSystem.createModal;\nexport const confirmModal = defaultSystem.confirmModal;\n"],"mappings":"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"}

package/es/base-ui/Modal/zIndexManager.mjs

@@ -0,0 +1,10 @@
+//#region src/base-ui/Modal/zIndexManager.ts
+let top = 1e3;
+const acquireModalZIndex = () => {
+	top += 10;
+	return top;
+};
+//#endregion
+export { acquireModalZIndex };
+
+//# sourceMappingURL=zIndexManager.mjs.map

package/es/base-ui/Modal/zIndexManager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"zIndexManager.mjs","names":[],"sources":["../../../src/base-ui/Modal/zIndexManager.ts"],"sourcesContent":["const BASE_MODAL_Z_INDEX = 1000;\n\nlet top = BASE_MODAL_Z_INDEX;\n\nexport const acquireModalZIndex = () => {\n  top += 10;\n  return top;\n};\n"],"mappings":";AAEA,IAAI,MAFuB;AAI3B,MAAa,2BAA2B;AACtC,QAAO;AACP,QAAO"}

package/es/hooks/useStreamHighlight.mjs

@@ -205,12 +205,11 @@ const useStreamHighlight = (text, { language, theme: builtinTheme, streaming })
 	const safeText = text ?? "";
 	const lang = (language ?? "plaintext").toLowerCase();
 	const matchedLanguage = useMemo(() => getCodeLanguageByInput(lang), [lang]);
-	const effectiveTheme = builtinTheme || "lobe-theme";
 	return useStreamingHighlighter(safeText, {
 		customThemes: { "lobe-theme": lobe_theme_default },
 		enabled: streaming,
 		language: matchedLanguage,
-		theme: effectiveTheme
+		theme: builtinTheme || "lobe-theme"
 	});
 };
 //#endregion

package/es/hooks/useStreamHighlight.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useStreamHighlight.mjs","names":["lobeTheme"],"sources":["../../src/hooks/useStreamHighlight.ts"],"sourcesContent":["'use client';\n\nimport { type CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { type BuiltinTheme, type ThemedToken } from 'shiki';\nimport { ShikiStreamTokenizer } from 'shiki-stream';\n\nimport { getCodeLanguageByInput } from '@/Highlighter/const';\nimport lobeTheme from '@/Highlighter/theme/lobe-theme';\n\nimport { shikiModulePromise, type StreamingHighlightResult } from './useHighlight';\n\ntype StreamingOptions = {\n  customThemes?: Record<string, any>;\n  enabled?: boolean;\n  language: string;\n  theme: string;\n};\n\n// Optimized version: reduce array allocations and object spreading\nconst tokensToLineTokens = (tokens: ThemedToken[]): ThemedToken[][] => {\n  if (!tokens.length) return [[]];\n\n  const lines: ThemedToken[][] = [];\n  let currentLine: ThemedToken[] = [];\n\n  for (const token of tokens) {\n    const content = token.content ?? '';\n\n    if (content === '\\n') {\n      lines.push(currentLine);\n      currentLine = [];\n      continue;\n    }\n\n    const newlineIndex = content.indexOf('\\n');\n    if (newlineIndex === -1) {\n      // No newline, add token directly\n      currentLine.push(token);\n    } else {\n      // Split on newlines\n      const segments = content.split('\\n');\n      for (const [j, segment] of segments.entries()) {\n        if (segment) {\n          // Only create new object if we need to modify content\n          currentLine.push(j === 0 && segment === content ? token : { ...token, content: segment });\n        }\n        if (j < segments.length - 1) {\n          lines.push(currentLine);\n          currentLine = [];\n        }\n      }\n    }\n  }\n\n  // Don't forget the last line\n  if (currentLine.length > 0 || lines.length === 0) {\n    lines.push(currentLine);\n  }\n\n  return lines.length > 0 ? lines : [[]];\n};\n\nconst createPreStyle = (bg?: string, fg?: string): CSSProperties | undefined => {\n  if (!bg && !fg) return undefined;\n  return {\n    backgroundColor: bg,\n    color: fg,\n  };\n};\n\nconst useStreamingHighlighter = (\n  text: string,\n  options: StreamingOptions,\n): StreamingHighlightResult | undefined => {\n  const { customThemes, enabled, language, theme } = options;\n  const [result, setResult] = useState<StreamingHighlightResult>();\n  const tokenizerRef = useRef<ShikiStreamTokenizer | null>(null);\n  const previousTextRef = useRef('');\n  const safeText = text ?? '';\n  const latestTextRef = useRef(safeText);\n  const preStyleRef = useRef<CSSProperties | undefined>(undefined);\n  const linesRef = useRef<ThemedToken[][]>([[]]);\n\n  useEffect(() => {\n    latestTextRef.current = safeText;\n  }, [safeText]);\n\n  // Use ref to store callback to avoid recreating it\n  const setStreamingResultRef = useRef((rawLines: ThemedToken[][]) => {\n    const previousLines = linesRef.current;\n    const newLinesLength = rawLines.length;\n    const prevLinesLength = previousLines.length;\n\n    // Fast path: if lengths differ or it's a complete reset, use new lines directly\n    if (newLinesLength !== prevLinesLength || newLinesLength === 0) {\n      linesRef.current = rawLines;\n      setResult({\n        lines: rawLines,\n        preStyle: preStyleRef.current,\n      });\n      return;\n    }\n\n    // Optimized comparison: only check changed lines\n    let hasChanges = false;\n    const mergedLines: ThemedToken[][] = [];\n\n    for (let i = 0; i < newLinesLength; i++) {\n      const newLine = rawLines[i];\n      const prevLine = previousLines[i];\n\n      // Quick reference equality check first\n      if (prevLine === newLine) {\n        mergedLines[i] = prevLine;\n        continue;\n      }\n\n      // Length check\n      if (!prevLine || prevLine.length !== newLine.length) {\n        mergedLines[i] = newLine;\n        hasChanges = true;\n        continue;\n      }\n\n      // Deep comparison only for lines that might have changed\n      let lineChanged = false;\n      for (const [j, newToken] of newLine.entries()) {\n        if (prevLine[j] !== newToken) {\n          lineChanged = true;\n          break;\n        }\n      }\n\n      if (lineChanged) {\n        mergedLines[i] = newLine;\n        hasChanges = true;\n      } else {\n        mergedLines[i] = prevLine;\n      }\n    }\n\n    // Only update state if there are actual changes\n    if (hasChanges) {\n      linesRef.current = mergedLines;\n      setResult({\n        lines: mergedLines,\n        preStyle: preStyleRef.current,\n      });\n    }\n  });\n\n  const updateTokens = useCallback(async (nextText: string, forceReset = false) => {\n    const tokenizer = tokenizerRef.current;\n    if (!tokenizer) return;\n\n    if (forceReset) {\n      tokenizer.clear();\n      previousTextRef.current = '';\n    }\n\n    const previousText = previousTextRef.current;\n    let chunk = nextText;\n    const canAppend = !forceReset && nextText.startsWith(previousText);\n\n    if (canAppend) {\n      chunk = nextText.slice(previousText.length);\n    } else if (!forceReset) {\n      tokenizer.clear();\n    }\n\n    previousTextRef.current = nextText;\n\n    if (!chunk) {\n      // Optimize: avoid array spread if possible\n      const stableTokens = tokenizer.tokensStable;\n      const unstableTokens = tokenizer.tokensUnstable;\n      const totalLength = stableTokens.length + unstableTokens.length;\n\n      if (totalLength === 0) {\n        setStreamingResultRef.current([[]]);\n        return;\n      }\n\n      // Only create merged array if we have both stable and unstable tokens\n      const mergedTokens =\n        stableTokens.length === 0\n          ? unstableTokens\n          : unstableTokens.length === 0\n            ? stableTokens\n            : [...stableTokens, ...unstableTokens];\n\n      setStreamingResultRef.current(tokensToLineTokens(mergedTokens));\n      return;\n    }\n\n    try {\n      await tokenizer.enqueue(chunk);\n      // Optimize: avoid array spread if possible\n      const stableTokens = tokenizer.tokensStable;\n      const unstableTokens = tokenizer.tokensUnstable;\n      const mergedTokens =\n        stableTokens.length === 0\n          ? unstableTokens\n          : unstableTokens.length === 0\n            ? stableTokens\n            : [...stableTokens, ...unstableTokens];\n      setStreamingResultRef.current(tokensToLineTokens(mergedTokens));\n    } catch (error) {\n      console.error('Streaming highlighting failed:', error);\n    }\n  }, []);\n\n  // Cache highlighter key to avoid unnecessary recreations\n  const highlighterKeyRef = useRef<string>('');\n\n  useEffect(() => {\n    if (!enabled) {\n      tokenizerRef.current?.clear();\n      tokenizerRef.current = null;\n      previousTextRef.current = '';\n      preStyleRef.current = undefined;\n      linesRef.current = [[]];\n      setResult(undefined);\n      highlighterKeyRef.current = '';\n      return;\n    }\n\n    // Skip if language/theme combination hasn't changed\n    const currentKey = `${language}-${theme}`;\n    if (highlighterKeyRef.current === currentKey && tokenizerRef.current) {\n      return;\n    }\n\n    let cancelled = false;\n\n    (async () => {\n      const mod = await shikiModulePromise;\n      if (!mod || cancelled) return;\n\n      try {\n        // Load custom theme if using slack-dark or slack-ochin\n        let themesToLoad: any[] = [theme];\n        if (customThemes && theme === 'lobe-theme') {\n          const customTheme = customThemes[theme];\n          if (customTheme) {\n            themesToLoad = [customTheme as any];\n          }\n        }\n\n        // Only load the specific language and theme needed\n        // getSingletonHighlighter will cache the instance internally\n        const highlighter = await mod.getSingletonHighlighter({\n          langs: language ? [language] : ['plaintext'],\n          themes: themesToLoad,\n        });\n\n        if (!highlighter || cancelled) return;\n\n        // Only create new tokenizer if key changed\n        if (highlighterKeyRef.current !== currentKey) {\n          // Clear old tokenizer\n          tokenizerRef.current?.clear();\n\n          const tokenizer = new ShikiStreamTokenizer({\n            highlighter,\n            lang: language,\n            theme,\n          });\n\n          tokenizerRef.current = tokenizer;\n          highlighterKeyRef.current = currentKey;\n          previousTextRef.current = '';\n          linesRef.current = [[]];\n\n          const themeInfo = highlighter.getTheme(theme);\n          preStyleRef.current = createPreStyle(themeInfo?.bg, themeInfo?.fg);\n        }\n\n        const currentText = latestTextRef.current;\n        if (currentText) {\n          await updateTokens(currentText, true);\n        } else {\n          setStreamingResultRef.current([[]]);\n        }\n      } catch (error) {\n        console.error('Streaming highlighter initialization failed:', error);\n        // Reset on error\n        highlighterKeyRef.current = '';\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n      // Cleanup only if this effect was cancelled before completion\n      // The next effect will handle cleanup if key changed\n    };\n  }, [enabled, language, theme, updateTokens, customThemes]);\n\n  // Separate effect for text updates to avoid unnecessary tokenizer recreation\n  useEffect(() => {\n    if (!enabled) return;\n    if (!tokenizerRef.current) return;\n    // Use ref to get latest text to avoid stale closures\n    const currentText = latestTextRef.current;\n    updateTokens(currentText);\n  }, [enabled, safeText, updateTokens]);\n\n  return result;\n};\n\nexport const useStreamHighlight = (\n  text: string,\n  {\n    language,\n    theme: builtinTheme,\n    streaming,\n  }: { enableTransformer?: boolean; language: string; streaming?: boolean; theme?: BuiltinTheme },\n) => {\n  // Safely handle language and text with boundary checks\n  const safeText = text ?? '';\n  const lang = (language ?? 'plaintext').toLowerCase();\n\n  // Match supported languages\n  const matchedLanguage = useMemo(() => getCodeLanguageByInput(lang), [lang]);\n\n  const effectiveTheme = builtinTheme || 'lobe-theme';\n\n  return useStreamingHighlighter(safeText, {\n    customThemes: {\n      'lobe-theme': lobeTheme,\n    },\n    enabled: streaming,\n    language: matchedLanguage,\n    theme: effectiveTheme,\n  });\n};\n"],"mappings":";;;;;;;AAmBA,MAAM,sBAAsB,WAA2C;AACrE,KAAI,CAAC,OAAO,OAAQ,QAAO,CAAC,EAAE,CAAC;CAE/B,MAAM,QAAyB,EAAE;CACjC,IAAI,cAA6B,EAAE;AAEnC,MAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,UAAU,MAAM,WAAW;AAEjC,MAAI,YAAY,MAAM;AACpB,SAAM,KAAK,YAAY;AACvB,iBAAc,EAAE;AAChB;;AAIF,MADqB,QAAQ,QAAQ,KAAK,KACrB,GAEnB,aAAY,KAAK,MAAM;OAClB;GAEL,MAAM,WAAW,QAAQ,MAAM,KAAK;AACpC,QAAK,MAAM,CAAC,GAAG,YAAY,SAAS,SAAS,EAAE;AAC7C,QAAI,QAEF,aAAY,KAAK,MAAM,KAAK,YAAY,UAAU,QAAQ;KAAE,GAAG;KAAO,SAAS;KAAS,CAAC;AAE3F,QAAI,IAAI,SAAS,SAAS,GAAG;AAC3B,WAAM,KAAK,YAAY;AACvB,mBAAc,EAAE;;;;;AAOxB,KAAI,YAAY,SAAS,KAAK,MAAM,WAAW,EAC7C,OAAM,KAAK,YAAY;AAGzB,QAAO,MAAM,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC;;AAGxC,MAAM,kBAAkB,IAAa,OAA2C;AAC9E,KAAI,CAAC,MAAM,CAAC,GAAI,QAAO,KAAA;AACvB,QAAO;EACL,iBAAiB;EACjB,OAAO;EACR;;AAGH,MAAM,2BACJ,MACA,YACyC;CACzC,MAAM,EAAE,cAAc,SAAS,UAAU,UAAU;CACnD,MAAM,CAAC,QAAQ,aAAa,UAAoC;CAChE,MAAM,eAAe,OAAoC,KAAK;CAC9D,MAAM,kBAAkB,OAAO,GAAG;CAClC,MAAM,WAAW,QAAQ;CACzB,MAAM,gBAAgB,OAAO,SAAS;CACtC,MAAM,cAAc,OAAkC,KAAA,EAAU;CAChE,MAAM,WAAW,OAAwB,CAAC,EAAE,CAAC,CAAC;AAE9C,iBAAgB;AACd,gBAAc,UAAU;IACvB,CAAC,SAAS,CAAC;CAGd,MAAM,wBAAwB,QAAQ,aAA8B;EAClE,MAAM,gBAAgB,SAAS;EAC/B,MAAM,iBAAiB,SAAS;AAIhC,MAAI,mBAHoB,cAAc,UAGI,mBAAmB,GAAG;AAC9D,YAAS,UAAU;AACnB,aAAU;IACR,OAAO;IACP,UAAU,YAAY;IACvB,CAAC;AACF;;EAIF,IAAI,aAAa;EACjB,MAAM,cAA+B,EAAE;AAEvC,OAAK,IAAI,IAAI,GAAG,IAAI,gBAAgB,KAAK;GACvC,MAAM,UAAU,SAAS;GACzB,MAAM,WAAW,cAAc;AAG/B,OAAI,aAAa,SAAS;AACxB,gBAAY,KAAK;AACjB;;AAIF,OAAI,CAAC,YAAY,SAAS,WAAW,QAAQ,QAAQ;AACnD,gBAAY,KAAK;AACjB,iBAAa;AACb;;GAIF,IAAI,cAAc;AAClB,QAAK,MAAM,CAAC,GAAG,aAAa,QAAQ,SAAS,CAC3C,KAAI,SAAS,OAAO,UAAU;AAC5B,kBAAc;AACd;;AAIJ,OAAI,aAAa;AACf,gBAAY,KAAK;AACjB,iBAAa;SAEb,aAAY,KAAK;;AAKrB,MAAI,YAAY;AACd,YAAS,UAAU;AACnB,aAAU;IACR,OAAO;IACP,UAAU,YAAY;IACvB,CAAC;;GAEJ;CAEF,MAAM,eAAe,YAAY,OAAO,UAAkB,aAAa,UAAU;EAC/E,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;AAEhB,MAAI,YAAY;AACd,aAAU,OAAO;AACjB,mBAAgB,UAAU;;EAG5B,MAAM,eAAe,gBAAgB;EACrC,IAAI,QAAQ;AAGZ,MAFkB,CAAC,cAAc,SAAS,WAAW,aAAa,CAGhE,SAAQ,SAAS,MAAM,aAAa,OAAO;WAClC,CAAC,WACV,WAAU,OAAO;AAGnB,kBAAgB,UAAU;AAE1B,MAAI,CAAC,OAAO;GAEV,MAAM,eAAe,UAAU;GAC/B,MAAM,iBAAiB,UAAU;AAGjC,OAFoB,aAAa,SAAS,eAAe,WAErC,GAAG;AACrB,0BAAsB,QAAQ,CAAC,EAAE,CAAC,CAAC;AACnC;;GAIF,MAAM,eACJ,aAAa,WAAW,IACpB,iBACA,eAAe,WAAW,IACxB,eACA,CAAC,GAAG,cAAc,GAAG,eAAe;AAE5C,yBAAsB,QAAQ,mBAAmB,aAAa,CAAC;AAC/D;;AAGF,MAAI;AACF,SAAM,UAAU,QAAQ,MAAM;GAE9B,MAAM,eAAe,UAAU;GAC/B,MAAM,iBAAiB,UAAU;GACjC,MAAM,eACJ,aAAa,WAAW,IACpB,iBACA,eAAe,WAAW,IACxB,eACA,CAAC,GAAG,cAAc,GAAG,eAAe;AAC5C,yBAAsB,QAAQ,mBAAmB,aAAa,CAAC;WACxD,OAAO;AACd,WAAQ,MAAM,kCAAkC,MAAM;;IAEvD,EAAE,CAAC;CAGN,MAAM,oBAAoB,OAAe,GAAG;AAE5C,iBAAgB;AACd,MAAI,CAAC,SAAS;AACZ,gBAAa,SAAS,OAAO;AAC7B,gBAAa,UAAU;AACvB,mBAAgB,UAAU;AAC1B,eAAY,UAAU,KAAA;AACtB,YAAS,UAAU,CAAC,EAAE,CAAC;AACvB,aAAU,KAAA,EAAU;AACpB,qBAAkB,UAAU;AAC5B;;EAIF,MAAM,aAAa,GAAG,SAAS,GAAG;AAClC,MAAI,kBAAkB,YAAY,cAAc,aAAa,QAC3D;EAGF,IAAI,YAAY;AAEhB,GAAC,YAAY;GACX,MAAM,MAAM,MAAM;AAClB,OAAI,CAAC,OAAO,UAAW;AAEvB,OAAI;IAEF,IAAI,eAAsB,CAAC,MAAM;AACjC,QAAI,gBAAgB,UAAU,cAAc;KAC1C,MAAM,cAAc,aAAa;AACjC,SAAI,YACF,gBAAe,CAAC,YAAmB;;IAMvC,MAAM,cAAc,MAAM,IAAI,wBAAwB;KACpD,OAAO,WAAW,CAAC,SAAS,GAAG,CAAC,YAAY;KAC5C,QAAQ;KACT,CAAC;AAEF,QAAI,CAAC,eAAe,UAAW;AAG/B,QAAI,kBAAkB,YAAY,YAAY;AAE5C,kBAAa,SAAS,OAAO;AAQ7B,kBAAa,UANK,IAAI,qBAAqB;MACzC;MACA,MAAM;MACN;MACD,CAAC;AAGF,uBAAkB,UAAU;AAC5B,qBAAgB,UAAU;AAC1B,cAAS,UAAU,CAAC,EAAE,CAAC;KAEvB,MAAM,YAAY,YAAY,SAAS,MAAM;AAC7C,iBAAY,UAAU,eAAe,WAAW,IAAI,WAAW,GAAG;;IAGpE,MAAM,cAAc,cAAc;AAClC,QAAI,YACF,OAAM,aAAa,aAAa,KAAK;QAErC,uBAAsB,QAAQ,CAAC,EAAE,CAAC,CAAC;YAE9B,OAAO;AACd,YAAQ,MAAM,gDAAgD,MAAM;AAEpE,sBAAkB,UAAU;;MAE5B;AAEJ,eAAa;AACX,eAAY;;IAIb;EAAC;EAAS;EAAU;EAAO;EAAc;EAAa,CAAC;AAG1D,iBAAgB;AACd,MAAI,CAAC,QAAS;AACd,MAAI,CAAC,aAAa,QAAS;EAE3B,MAAM,cAAc,cAAc;AAClC,eAAa,YAAY;IACxB;EAAC;EAAS;EAAU;EAAa,CAAC;AAErC,QAAO;;AAGT,MAAa,sBACX,MACA,EACE,UACA,OAAO,cACP,gBAEC;CAEH,MAAM,WAAW,QAAQ;CACzB,MAAM,QAAQ,YAAY,aAAa,aAAa;CAGpD,MAAM,kBAAkB,cAAc,uBAAuB,KAAK,EAAE,CAAC,KAAK,CAAC;CAE3E,MAAM,iBAAiB,gBAAgB;AAEvC,QAAO,wBAAwB,UAAU;EACvC,cAAc,EACZ,cAAcA,oBACf;EACD,SAAS;EACT,UAAU;EACV,OAAO;EACR,CAAC"}
+{"version":3,"file":"useStreamHighlight.mjs","names":["lobeTheme"],"sources":["../../src/hooks/useStreamHighlight.ts"],"sourcesContent":["'use client';\n\nimport { type CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { type BuiltinTheme, type ThemedToken } from 'shiki';\nimport { ShikiStreamTokenizer } from 'shiki-stream';\n\nimport { getCodeLanguageByInput } from '@/Highlighter/const';\nimport lobeTheme from '@/Highlighter/theme/lobe-theme';\n\nimport { shikiModulePromise, type StreamingHighlightResult } from './useHighlight';\n\ntype StreamingOptions = {\n  customThemes?: Record<string, any>;\n  enabled?: boolean;\n  language: string;\n  theme: string;\n};\n\n// Optimized version: reduce array allocations and object spreading\nconst tokensToLineTokens = (tokens: ThemedToken[]): ThemedToken[][] => {\n  if (!tokens.length) return [[]];\n\n  const lines: ThemedToken[][] = [];\n  let currentLine: ThemedToken[] = [];\n\n  for (const token of tokens) {\n    const content = token.content ?? '';\n\n    if (content === '\\n') {\n      lines.push(currentLine);\n      currentLine = [];\n      continue;\n    }\n\n    const newlineIndex = content.indexOf('\\n');\n    if (newlineIndex === -1) {\n      // No newline, add token directly\n      currentLine.push(token);\n    } else {\n      // Split on newlines\n      const segments = content.split('\\n');\n      for (const [j, segment] of segments.entries()) {\n        if (segment) {\n          // Only create new object if we need to modify content\n          currentLine.push(j === 0 && segment === content ? token : { ...token, content: segment });\n        }\n        if (j < segments.length - 1) {\n          lines.push(currentLine);\n          currentLine = [];\n        }\n      }\n    }\n  }\n\n  // Don't forget the last line\n  if (currentLine.length > 0 || lines.length === 0) {\n    lines.push(currentLine);\n  }\n\n  return lines.length > 0 ? lines : [[]];\n};\n\nconst createPreStyle = (bg?: string, fg?: string): CSSProperties | undefined => {\n  if (!bg && !fg) return undefined;\n  return {\n    backgroundColor: bg,\n    color: fg,\n  };\n};\n\nconst useStreamingHighlighter = (\n  text: string,\n  options: StreamingOptions,\n): StreamingHighlightResult | undefined => {\n  const { customThemes, enabled, language, theme } = options;\n  const [result, setResult] = useState<StreamingHighlightResult>();\n  const tokenizerRef = useRef<ShikiStreamTokenizer | null>(null);\n  const previousTextRef = useRef('');\n  const safeText = text ?? '';\n  const latestTextRef = useRef(safeText);\n  const preStyleRef = useRef<CSSProperties | undefined>(undefined);\n  const linesRef = useRef<ThemedToken[][]>([[]]);\n\n  useEffect(() => {\n    latestTextRef.current = safeText;\n  }, [safeText]);\n\n  // Use ref to store callback to avoid recreating it\n  const setStreamingResultRef = useRef((rawLines: ThemedToken[][]) => {\n    const previousLines = linesRef.current;\n    const newLinesLength = rawLines.length;\n    const prevLinesLength = previousLines.length;\n\n    // Fast path: if lengths differ or it's a complete reset, use new lines directly\n    if (newLinesLength !== prevLinesLength || newLinesLength === 0) {\n      linesRef.current = rawLines;\n      setResult({\n        lines: rawLines,\n        preStyle: preStyleRef.current,\n      });\n      return;\n    }\n\n    // Optimized comparison: only check changed lines\n    let hasChanges = false;\n    const mergedLines: ThemedToken[][] = [];\n\n    for (let i = 0; i < newLinesLength; i++) {\n      const newLine = rawLines[i];\n      const prevLine = previousLines[i];\n\n      // Quick reference equality check first\n      if (prevLine === newLine) {\n        mergedLines[i] = prevLine;\n        continue;\n      }\n\n      // Length check\n      if (!prevLine || prevLine.length !== newLine.length) {\n        mergedLines[i] = newLine;\n        hasChanges = true;\n        continue;\n      }\n\n      // Deep comparison only for lines that might have changed\n      let lineChanged = false;\n      for (const [j, newToken] of newLine.entries()) {\n        if (prevLine[j] !== newToken) {\n          lineChanged = true;\n          break;\n        }\n      }\n\n      if (lineChanged) {\n        mergedLines[i] = newLine;\n        hasChanges = true;\n      } else {\n        mergedLines[i] = prevLine;\n      }\n    }\n\n    // Only update state if there are actual changes\n    if (hasChanges) {\n      linesRef.current = mergedLines;\n      setResult({\n        lines: mergedLines,\n        preStyle: preStyleRef.current,\n      });\n    }\n  });\n\n  const updateTokens = useCallback(async (nextText: string, forceReset = false) => {\n    const tokenizer = tokenizerRef.current;\n    if (!tokenizer) return;\n\n    if (forceReset) {\n      tokenizer.clear();\n      previousTextRef.current = '';\n    }\n\n    const previousText = previousTextRef.current;\n    let chunk = nextText;\n    const canAppend = !forceReset && nextText.startsWith(previousText);\n\n    if (canAppend) {\n      chunk = nextText.slice(previousText.length);\n    } else if (!forceReset) {\n      tokenizer.clear();\n    }\n\n    previousTextRef.current = nextText;\n\n    if (!chunk) {\n      // Optimize: avoid array spread if possible\n      const stableTokens = tokenizer.tokensStable;\n      const unstableTokens = tokenizer.tokensUnstable;\n      const totalLength = stableTokens.length + unstableTokens.length;\n\n      if (totalLength === 0) {\n        setStreamingResultRef.current([[]]);\n        return;\n      }\n\n      // Only create merged array if we have both stable and unstable tokens\n      const mergedTokens =\n        stableTokens.length === 0\n          ? unstableTokens\n          : unstableTokens.length === 0\n            ? stableTokens\n            : [...stableTokens, ...unstableTokens];\n\n      setStreamingResultRef.current(tokensToLineTokens(mergedTokens));\n      return;\n    }\n\n    try {\n      await tokenizer.enqueue(chunk);\n      // Optimize: avoid array spread if possible\n      const stableTokens = tokenizer.tokensStable;\n      const unstableTokens = tokenizer.tokensUnstable;\n      const mergedTokens =\n        stableTokens.length === 0\n          ? unstableTokens\n          : unstableTokens.length === 0\n            ? stableTokens\n            : [...stableTokens, ...unstableTokens];\n      setStreamingResultRef.current(tokensToLineTokens(mergedTokens));\n    } catch (error) {\n      console.error('Streaming highlighting failed:', error);\n    }\n  }, []);\n\n  // Cache highlighter key to avoid unnecessary recreations\n  const highlighterKeyRef = useRef<string>('');\n\n  useEffect(() => {\n    if (!enabled) {\n      tokenizerRef.current?.clear();\n      tokenizerRef.current = null;\n      previousTextRef.current = '';\n      preStyleRef.current = undefined;\n      linesRef.current = [[]];\n      setResult(undefined);\n      highlighterKeyRef.current = '';\n      return;\n    }\n\n    // Skip if language/theme combination hasn't changed\n    const currentKey = `${language}-${theme}`;\n    if (highlighterKeyRef.current === currentKey && tokenizerRef.current) {\n      return;\n    }\n\n    let cancelled = false;\n\n    (async () => {\n      const mod = await shikiModulePromise;\n      if (!mod || cancelled) return;\n\n      try {\n        // Load custom theme if using slack-dark or slack-ochin\n        let themesToLoad: any[] = [theme];\n        if (customThemes && theme === 'lobe-theme') {\n          const customTheme = customThemes[theme];\n          if (customTheme) {\n            themesToLoad = [customTheme as any];\n          }\n        }\n\n        // Only load the specific language and theme needed\n        // getSingletonHighlighter will cache the instance internally\n        const highlighter = await mod.getSingletonHighlighter({\n          langs: language ? [language] : ['plaintext'],\n          themes: themesToLoad,\n        });\n\n        if (!highlighter || cancelled) return;\n\n        // Only create new tokenizer if key changed\n        if (highlighterKeyRef.current !== currentKey) {\n          // Clear old tokenizer\n          tokenizerRef.current?.clear();\n\n          const tokenizer = new ShikiStreamTokenizer({\n            highlighter,\n            lang: language,\n            theme,\n          });\n\n          tokenizerRef.current = tokenizer;\n          highlighterKeyRef.current = currentKey;\n          previousTextRef.current = '';\n          linesRef.current = [[]];\n\n          const themeInfo = highlighter.getTheme(theme);\n          preStyleRef.current = createPreStyle(themeInfo?.bg, themeInfo?.fg);\n        }\n\n        const currentText = latestTextRef.current;\n        if (currentText) {\n          await updateTokens(currentText, true);\n        } else {\n          setStreamingResultRef.current([[]]);\n        }\n      } catch (error) {\n        console.error('Streaming highlighter initialization failed:', error);\n        // Reset on error\n        highlighterKeyRef.current = '';\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n      // Cleanup only if this effect was cancelled before completion\n      // The next effect will handle cleanup if key changed\n    };\n  }, [enabled, language, theme, updateTokens, customThemes]);\n\n  // Separate effect for text updates to avoid unnecessary tokenizer recreation\n  useEffect(() => {\n    if (!enabled) return;\n    if (!tokenizerRef.current) return;\n    // Use ref to get latest text to avoid stale closures\n    const currentText = latestTextRef.current;\n    updateTokens(currentText);\n  }, [enabled, safeText, updateTokens]);\n\n  return result;\n};\n\nexport const useStreamHighlight = (\n  text: string,\n  {\n    language,\n    theme: builtinTheme,\n    streaming,\n  }: { enableTransformer?: boolean; language: string; streaming?: boolean; theme?: BuiltinTheme },\n) => {\n  // Safely handle language and text with boundary checks\n  const safeText = text ?? '';\n  const lang = (language ?? 'plaintext').toLowerCase();\n\n  // Match supported languages\n  const matchedLanguage = useMemo(() => getCodeLanguageByInput(lang), [lang]);\n\n  const effectiveTheme = builtinTheme || 'lobe-theme';\n\n  return useStreamingHighlighter(safeText, {\n    customThemes: {\n      'lobe-theme': lobeTheme,\n    },\n    enabled: streaming,\n    language: matchedLanguage,\n    theme: effectiveTheme,\n  });\n};\n"],"mappings":"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"}

package/es/utils/blobToPng.mjs

@@ -32,8 +32,7 @@ const blobToPng = (blob) => new Promise((resolve, reject) => {
 const getClipboardBlob = async (blob) => {
 	const type = (blob.type || "").toLowerCase();
 	if (type === "image/png" || type === "image/svg+xml") return { [type]: blob };
-	const pngBlob = await blobToPng(blob);
-	return { "image/png": pngBlob };
+	return { "image/png": await blobToPng(blob) };
 };
 //#endregion
 export { getClipboardBlob };

package/es/utils/blobToPng.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"blobToPng.mjs","names":[],"sources":["../../src/utils/blobToPng.ts"],"sourcesContent":["/**\n * Convert image blob to PNG format.\n * Clipboard API only supports image/png and image/svg+xml.\n * WebP, JPEG and other formats need to be converted for clipboard copy.\n */\nexport const blobToPng = (blob: Blob): Promise<Blob> =>\n  new Promise((resolve, reject) => {\n    const img = new Image();\n    const url = URL.createObjectURL(blob);\n\n    img.onload = () => {\n      URL.revokeObjectURL(url);\n      const canvas = document.createElement('canvas');\n      canvas.width = img.naturalWidth;\n      canvas.height = img.naturalHeight;\n      const ctx = canvas.getContext('2d');\n      if (!ctx) {\n        reject(new Error('Canvas context not available'));\n        return;\n      }\n      ctx.drawImage(img, 0, 0);\n      canvas.toBlob(\n        (pngBlob) => {\n          if (pngBlob) {\n            resolve(pngBlob);\n          } else {\n            reject(new Error('Failed to convert to PNG'));\n          }\n        },\n        'image/png',\n        1,\n      );\n    };\n\n    img.onerror = () => {\n      URL.revokeObjectURL(url);\n      reject(new Error('Failed to load image'));\n    };\n\n    img.src = url;\n  });\n\nconst CLIPBOARD_SUPPORTED_TYPES = ['image/png', 'image/svg+xml'] as const;\n\nexport const getClipboardBlob = async (\n  blob: Blob,\n): Promise<{ 'image/png': Blob } | { 'image/svg+xml': Blob }> => {\n  const type = (blob.type || '').toLowerCase();\n\n  if (type === 'image/png' || type === 'image/svg+xml') {\n    return { [type]: blob } as { 'image/png': Blob } | { 'image/svg+xml': Blob };\n  }\n\n  const pngBlob = await blobToPng(blob);\n  return { 'image/png': pngBlob };\n};\n"],"mappings":";;;;;;AAKA,MAAa,aAAa,SACxB,IAAI,SAAS,SAAS,WAAW;CAC/B,MAAM,MAAM,IAAI,OAAO;CACvB,MAAM,MAAM,IAAI,gBAAgB,KAAK;AAErC,KAAI,eAAe;AACjB,MAAI,gBAAgB,IAAI;EACxB,MAAM,SAAS,SAAS,cAAc,SAAS;AAC/C,SAAO,QAAQ,IAAI;AACnB,SAAO,SAAS,IAAI;EACpB,MAAM,MAAM,OAAO,WAAW,KAAK;AACnC,MAAI,CAAC,KAAK;AACR,0BAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD;;AAEF,MAAI,UAAU,KAAK,GAAG,EAAE;AACxB,SAAO,QACJ,YAAY;AACX,OAAI,QACF,SAAQ,QAAQ;OAEhB,wBAAO,IAAI,MAAM,2BAA2B,CAAC;KAGjD,aACA,EACD;;AAGH,KAAI,gBAAgB;AAClB,MAAI,gBAAgB,IAAI;AACxB,yBAAO,IAAI,MAAM,uBAAuB,CAAC;;AAG3C,KAAI,MAAM;EACV;AAIJ,MAAa,mBAAmB,OAC9B,SAC+D;CAC/D,MAAM,QAAQ,KAAK,QAAQ,IAAI,aAAa;AAE5C,KAAI,SAAS,eAAe,SAAS,gBACnC,QAAO,GAAG,OAAO,MAAM;CAGzB,MAAM,UAAU,MAAM,UAAU,KAAK;AACrC,QAAO,EAAE,aAAa,SAAS"}
+{"version":3,"file":"blobToPng.mjs","names":[],"sources":["../../src/utils/blobToPng.ts"],"sourcesContent":["/**\n * Convert image blob to PNG format.\n * Clipboard API only supports image/png and image/svg+xml.\n * WebP, JPEG and other formats need to be converted for clipboard copy.\n */\nexport const blobToPng = (blob: Blob): Promise<Blob> =>\n  new Promise((resolve, reject) => {\n    const img = new Image();\n    const url = URL.createObjectURL(blob);\n\n    img.onload = () => {\n      URL.revokeObjectURL(url);\n      const canvas = document.createElement('canvas');\n      canvas.width = img.naturalWidth;\n      canvas.height = img.naturalHeight;\n      const ctx = canvas.getContext('2d');\n      if (!ctx) {\n        reject(new Error('Canvas context not available'));\n        return;\n      }\n      ctx.drawImage(img, 0, 0);\n      canvas.toBlob(\n        (pngBlob) => {\n          if (pngBlob) {\n            resolve(pngBlob);\n          } else {\n            reject(new Error('Failed to convert to PNG'));\n          }\n        },\n        'image/png',\n        1,\n      );\n    };\n\n    img.onerror = () => {\n      URL.revokeObjectURL(url);\n      reject(new Error('Failed to load image'));\n    };\n\n    img.src = url;\n  });\n\nconst CLIPBOARD_SUPPORTED_TYPES = ['image/png', 'image/svg+xml'] as const;\n\nexport const getClipboardBlob = async (\n  blob: Blob,\n): Promise<{ 'image/png': Blob } | { 'image/svg+xml': Blob }> => {\n  const type = (blob.type || '').toLowerCase();\n\n  if (type === 'image/png' || type === 'image/svg+xml') {\n    return { [type]: blob } as { 'image/png': Blob } | { 'image/svg+xml': Blob };\n  }\n\n  const pngBlob = await blobToPng(blob);\n  return { 'image/png': pngBlob };\n};\n"],"mappings":";;;;;;AAKA,MAAa,aAAa,SACxB,IAAI,SAAS,SAAS,WAAW;CAC/B,MAAM,MAAM,IAAI,OAAO;CACvB,MAAM,MAAM,IAAI,gBAAgB,KAAK;AAErC,KAAI,eAAe;AACjB,MAAI,gBAAgB,IAAI;EACxB,MAAM,SAAS,SAAS,cAAc,SAAS;AAC/C,SAAO,QAAQ,IAAI;AACnB,SAAO,SAAS,IAAI;EACpB,MAAM,MAAM,OAAO,WAAW,KAAK;AACnC,MAAI,CAAC,KAAK;AACR,0BAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD;;AAEF,MAAI,UAAU,KAAK,GAAG,EAAE;AACxB,SAAO,QACJ,YAAY;AACX,OAAI,QACF,SAAQ,QAAQ;OAEhB,wBAAO,IAAI,MAAM,2BAA2B,CAAC;KAGjD,aACA,EACD;;AAGH,KAAI,gBAAgB;AAClB,MAAI,gBAAgB,IAAI;AACxB,yBAAO,IAAI,MAAM,uBAAuB,CAAC;;AAG3C,KAAI,MAAM;EACV;AAIJ,MAAa,mBAAmB,OAC9B,SAC+D;CAC/D,MAAM,QAAQ,KAAK,QAAQ,IAAI,aAAa;AAE5C,KAAI,SAAS,eAAe,SAAS,gBACnC,QAAO,GAAG,OAAO,MAAM;AAIzB,QAAO,EAAE,aADO,MAAM,UAAU,KAAK,EACN"}

package/package.json

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