@class-kit/react 0.1.1 → 0.1.2

package/dist/index.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useEffect, useMemo, useContext, useSyncExternalStore, createContext } from 'react';
 import { createPortal } from 'react-dom';
-import { ToastManager, configureClassComponents, FormController, getClassComponentsLocale, PasswordInputController, ColorPickerController, DatePickerController, DateRangePickerController, VerificationCodeController, SlideCaptchaController, VirtualSelectController, VirtualListController, BadgeController, TagController, SkeletonController, BreadcrumbController, PaginationController, getSafeTooltipPlacement, BacktopController, AffixController, ModalController, PopupController, TooltipController, TabsController, RollingNumberController, CountdownController, CalendarController, TypewriterTextController, DesignEffectController, GradientTextController, LazyImageController, TiltCardController, MarqueeController, ProgressController, SignatureController, VideoPlayerController, VideoDetailTransitionController, FilePreviewController, CanvasImageController, CanvasEditorController, TimelineController, DragController, DropController, GestureController, FloatingBallController, MultiColumnPickerController, SwiperController, MasonryVirtualListController, TableController, UploadController, NovelReaderController, ComicReaderController, DanmakuController, LiveRoomController, ChatVirtualListController } from '@class-kit/core';
-export { AffixController, BacktopController, BadgeController, BreadcrumbController, CalendarController, CanvasEditorController, CanvasImageController, ChatVirtualListController, ColorPickerController, ComicReaderController, CountdownController, DanmakuController, DatePickerController, DateRangePickerController, DesignEffectController, DragController, DropController, FilePreviewController, FloatingBallController, FormController, GestureController, GradientTextController, LazyImageController, LiveRoomController, MasonryVirtualListController, ModalController, MultiColumnPickerController, NovelReaderController, PaginationController, PasswordInputController, PopupController, ProgressController, SignatureController, SkeletonController, SlideCaptchaController, SwiperController, TableController, TabsController, TagController, TiltCardController, TimelineController, ToastManager, TooltipController, TypewriterTextController, UploadController, VerificationCodeController, VideoDetailTransitionController, VideoPlayerController, VirtualListController, VirtualSelectController, configureClassComponents, getClassComponentsConfig, getClassComponentsLocale, resetClassComponentsConfig } from '@class-kit/core';
+import { ToastManager, configureClassComponents, FormController, getClassComponentsLocale, PasswordInputController, ColorPickerController, DatePickerController, DateRangePickerController, VerificationCodeController, SlideCaptchaController, ChatTextareaController, VirtualSelectController, VirtualListController, BadgeController, TagController, SkeletonController, BreadcrumbController, MenuController, PaginationController, getSafeTooltipPlacement, BacktopController, AffixController, ModalController, PopupController, TooltipController, TabsController, RollingNumberController, CountdownController, CalendarController, TypewriterTextController, DesignEffectController, GradientTextController, LazyImageController, TiltCardController, OrbitalSphereController, HeightTransitionController, CodePreviewController, MarqueeController, ProgressController, SignatureController, VideoPlayerController, VideoDetailTransitionController, FilePreviewController, CanvasImageController, CanvasEditorController, TimelineController, DragController, DropController, GestureController, FloatingBallController, MultiColumnPickerController, SwiperController, MasonryVirtualListController, TableController, UploadController, NovelReaderController, ComicReaderController, DanmakuController, LiveRoomController, ChatVirtualListController } from '@class-kit/core';
+export { AffixController, BacktopController, BadgeController, BreadcrumbController, CalendarController, CanvasEditorController, CanvasImageController, ChatTextareaController, ChatVirtualListController, CodePreviewController, ColorPickerController, ComicReaderController, CountdownController, DanmakuController, DatePickerController, DateRangePickerController, DesignEffectController, DragController, DropController, FilePreviewController, FloatingBallController, FormController, GestureController, GradientTextController, HeightTransitionController, LazyImageController, LiveRoomController, MasonryVirtualListController, MenuController, ModalController, MultiColumnPickerController, NovelReaderController, OrbitalSphereController, PaginationController, PasswordInputController, PopupController, ProgressController, SignatureController, SkeletonController, SlideCaptchaController, SwiperController, TableController, TabsController, TagController, TiltCardController, TimelineController, ToastManager, TooltipController, TypewriterTextController, UploadController, VerificationCodeController, VideoDetailTransitionController, VideoPlayerController, VirtualListController, VirtualSelectController, configureClassComponents, getClassComponentsConfig, getClassComponentsLocale, resetClassComponentsConfig } from '@class-kit/core';
 
 const FormContext = /*#__PURE__*/ createContext(null);
 const defaultToastManager = /*#__PURE__*/ new ToastManager();
@@ -174,23 +174,27 @@ function usePresence(open, duration) {
     return [mounted, state];
 }
 function useAnimatedToasts(items, duration) {
-    const [rendered, setRendered] = React.useState(() => items.map((item) => ({ item, state: "enter" })));
+    const [rendered, setRendered] = React.useState(() => items.map((item) => ({ item, motion: false, state: "enter" })));
     useEffect(() => {
         let enteringIds = [];
         setRendered((current) => {
             const currentIds = new Set(current.map(({ item }) => item.id));
             const incomingIds = new Set(items.map((item) => item.id));
+            const incomingById = new Map(items.map((item) => [item.id, item]));
             enteringIds = items
                 .filter((item) => !currentIds.has(item.id))
                 .map((item) => item.id);
-            const next = items.map((item) => ({
-                item,
-                state: currentIds.has(item.id) ? "enter" : "exit",
+            const retainedOrExiting = current.map(({ item }) => ({
+                item: incomingById.get(item.id) ?? item,
+                motion: !incomingIds.has(item.id),
+                state: incomingIds.has(item.id)
+                    ? "enter"
+                    : "exit",
             }));
-            const exiting = current
-                .filter(({ item }) => !incomingIds.has(item.id))
-                .map(({ item }) => ({ item, state: "exit" }));
-            return [...next, ...exiting];
+            const entering = items
+                .filter((item) => !currentIds.has(item.id))
+                .map((item) => ({ item, motion: true, state: "prepare" }));
+            return [...retainedOrExiting, ...entering];
         });
         if (!enteringIds.length)
             return undefined;
@@ -201,6 +205,22 @@ function useAnimatedToasts(items, duration) {
         });
         return () => window.cancelAnimationFrame(frame);
     }, [items]);
+    useEffect(() => {
+        if (!rendered.some((entry) => entry.motion && entry.state === "enter"))
+            return;
+        if (duration <= 0) {
+            setRendered((current) => current.map((entry) => entry.motion && entry.state === "enter"
+                ? { ...entry, motion: false }
+                : entry));
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            setRendered((current) => current.map((entry) => entry.motion && entry.state === "enter"
+                ? { ...entry, motion: false }
+                : entry));
+        }, duration);
+        return () => window.clearTimeout(timer);
+    }, [duration, rendered]);
     useEffect(() => {
         if (!rendered.some((entry) => entry.state === "exit"))
             return;
@@ -215,6 +235,80 @@ function useAnimatedToasts(items, duration) {
     }, [duration, rendered]);
     return rendered;
 }
+function normalizeToastMaxVisible(maxVisible) {
+    if (typeof maxVisible !== "number" || !Number.isFinite(maxVisible))
+        return 3;
+    return Math.max(1, Math.min(6, Math.floor(maxVisible)));
+}
+function isToastTopPosition(position) {
+    return (position === "top" || position === "top-left" || position === "top-right");
+}
+function useToastFlip(entries, duration, easing) {
+    const nodeMapRef = React.useRef(new Map());
+    const rectMapRef = React.useRef(new Map());
+    const frameRef = React.useRef(0);
+    const setNode = React.useCallback((id, node) => {
+        if (node)
+            nodeMapRef.current.set(id, node);
+        else
+            nodeMapRef.current.delete(id);
+    }, []);
+    React.useLayoutEffect(() => {
+        if (frameRef.current)
+            window.cancelAnimationFrame(frameRef.current);
+        const previousRects = rectMapRef.current;
+        const nextRects = new Map();
+        const activeIds = new Set(entries
+            .filter((entry) => entry.motion && entry.state !== "exit")
+            .map((entry) => entry.item.id));
+        nodeMapRef.current.forEach((node, id) => {
+            if (!activeIds.has(id))
+                return;
+            const rect = node.getBoundingClientRect();
+            nextRects.set(id, rect);
+            const previous = previousRects.get(id);
+            if (!previous)
+                return;
+            const deltaY = previous.top - rect.top;
+            if (Math.abs(deltaY) < 1)
+                return;
+            node.style.transition = "none";
+            node.style.setProperty("--cc-toast-stack-offset", `${deltaY}px`);
+            node.style.willChange = "transform, opacity";
+        });
+        frameRef.current = window.requestAnimationFrame(() => {
+            nodeMapRef.current.forEach((node, id) => {
+                if (!nextRects.has(id))
+                    return;
+                node.style.transition = `transform ${duration}ms ${easing}, opacity ${duration}ms ${easing}, margin ${duration}ms ${easing}`;
+                node.style.removeProperty("--cc-toast-stack-offset");
+                window.setTimeout(() => {
+                    node.style.transition = "";
+                    node.style.willChange = "";
+                }, duration);
+            });
+            frameRef.current = 0;
+        });
+        rectMapRef.current = nextRects;
+        return () => {
+            if (frameRef.current)
+                window.cancelAnimationFrame(frameRef.current);
+        };
+    }, [duration, easing, entries]);
+    return setNode;
+}
+function useToastItems(manager) {
+    const snapshotRef = React.useRef(manager.getToasts());
+    const managerRef = React.useRef(manager);
+    if (managerRef.current !== manager) {
+        managerRef.current = manager;
+        snapshotRef.current = manager.getToasts();
+    }
+    return useSyncExternalStore(React.useCallback((notify) => manager.subscribe((items) => {
+        snapshotRef.current = items;
+        notify();
+    }), [manager]), React.useCallback(() => snapshotRef.current, [manager]), React.useCallback(() => snapshotRef.current, [manager]));
+}
 function resolveTabsDirection(tabs, previousId, nextId, direction) {
     if (direction === "none")
         return "none";
@@ -390,12 +484,12 @@ function PasswordInput({ name, label, className = "cc-field cc-password-field",
 const Field = Input;
 function ColorPicker({ name, label, className = "cc-field cc-color-picker", disabled, panelClassName = "cc-color-picker__panel", readOnly, initialValue, rules, showInputSteppers = false, validateOn, onChange, ...props }) {
     const field = useOptionalField(name, {
-        initialValue: initialValue ?? "#7c3aed",
+        initialValue: initialValue ?? "#1d2129",
         rules,
         validateOn,
     });
     const interactivity = resolveFieldInteractivity(useOptionalFormInteractivity(), disabled, readOnly);
-    const controller = React.useMemo(() => new ColorPickerController(String(field.value || "#7c3aed")), [field.value]);
+    const controller = React.useMemo(() => new ColorPickerController(String(field.value || "#1d2129")), [field.value]);
     const state = controller.getState();
     const rootRef = React.useRef(null);
     const panelRef = React.useRef(null);
@@ -1079,6 +1173,82 @@ function Textarea({ name, label, className = "cc-field", labelClassName = "cc-fi
                             field.setValue(event.currentTarget.value);
                         }, ...options }), canClear ? (jsx("button", { "aria-label": clearLabel, className: "cc-field__clear cc-field__clear--textarea", type: "button", onClick: () => field.setValue(""), children: clearIcon })) : null] }), jsx(FieldError, { className: errorClassName, errorId: errorId, errors: field.errors })] }));
 }
+function getTextareaMetrics(element) {
+    const computed = window.getComputedStyle(element);
+    const fontSize = Number.parseFloat(computed.fontSize) || 14;
+    const lineHeight = Number.parseFloat(computed.lineHeight) || fontSize * 1.5;
+    const paddingY = (Number.parseFloat(computed.paddingTop) || 0) +
+        (Number.parseFloat(computed.paddingBottom) || 0);
+    const borderY = (Number.parseFloat(computed.borderTopWidth) || 0) +
+        (Number.parseFloat(computed.borderBottomWidth) || 0);
+    return { borderY, lineHeight, paddingY };
+}
+const ChatTextarea = /*#__PURE__*/ React.forwardRef(function ChatTextarea({ className = "cc-chat-textarea", clearable = true, clearIcon = jsx(ClassIcon, { name: "x" }), clearLabel = getClassComponentsLocale().inputClearLabel, defaultValue = "", disabled, maxRows = 3, minRows = 1, onValueChange, placeholder, readOnly, style, textareaClassName = "cc-chat-textarea__control", textareaStyle, value, ...props }, ref) {
+    const textareaRef = React.useRef(null);
+    const controllerRef = React.useRef(new ChatTextareaController({
+        maxRows,
+        minRows,
+        value: value ?? defaultValue,
+    }));
+    const controlled = value !== undefined;
+    const [state, setState] = React.useState(() => controllerRef.current.getState());
+    const resize = React.useCallback(() => {
+        const element = textareaRef.current;
+        if (!element || typeof window === "undefined")
+            return;
+        const { borderY, lineHeight, paddingY } = getTextareaMetrics(element);
+        const minHeight = lineHeight * state.minRows + paddingY + borderY;
+        const maxHeight = lineHeight * state.maxRows + paddingY + borderY;
+        element.style.height = "auto";
+        const nextHeight = Math.min(Math.max(element.scrollHeight, minHeight), maxHeight);
+        element.style.height = `${nextHeight}px`;
+        element.style.overflowY =
+            element.scrollHeight > maxHeight + 1 ? "auto" : "hidden";
+    }, [state.maxRows, state.minRows, state.value]);
+    React.useImperativeHandle(ref, () => ({
+        blur: () => textareaRef.current?.blur(),
+        focus: () => textareaRef.current?.focus(),
+        getElement: () => textareaRef.current,
+    }), []);
+    React.useEffect(() => {
+        const next = controllerRef.current.update({
+            maxRows,
+            minRows,
+            value: controlled ? value : state.value,
+        });
+        setState(next);
+    }, [controlled, maxRows, minRows, value]);
+    React.useLayoutEffect(() => {
+        resize();
+    }, [resize]);
+    React.useEffect(() => {
+        if (typeof ResizeObserver === "undefined" || !textareaRef.current)
+            return undefined;
+        const observer = new ResizeObserver(resize);
+        observer.observe(textareaRef.current);
+        return () => observer.disconnect();
+    }, [resize]);
+    const commit = (nextValue, event) => {
+        const nextState = controllerRef.current.setValue(nextValue);
+        if (!controlled)
+            setState(nextState);
+        onValueChange?.(nextValue, event);
+    };
+    const currentValue = controlled ? (value ?? "") : state.value;
+    const canClear = clearable && currentValue !== "" && !disabled && !readOnly;
+    return (jsxs("div", { className: className, "data-disabled": Boolean(disabled), "data-readonly": Boolean(readOnly), "data-scrollable": currentValue.length > 0, style: style, children: [jsx("textarea", { ...props, className: `${textareaClassName}${canClear ? " cc-chat-textarea__control--clearable" : ""}`, disabled: disabled, placeholder: placeholder, readOnly: readOnly, ref: textareaRef, rows: state.minRows, style: {
+                    "--cc-chat-textarea-max-rows": state.maxRows,
+                    "--cc-chat-textarea-min-rows": state.minRows,
+                    ...textareaStyle,
+                }, value: currentValue, onChange: (event) => {
+                    if (readOnly)
+                        return;
+                    commit(event.currentTarget.value, event);
+                } }), canClear ? (jsx("button", { "aria-label": clearLabel, className: "cc-chat-textarea__clear", type: "button", onClick: (event) => {
+                    commit("", event);
+                    textareaRef.current?.focus();
+                }, children: clearIcon })) : null] }));
+});
 function getSelectMenuPosition(trigger, preferredHeight, anchorTopPlacement = false) {
     if (!trigger || typeof window === "undefined") {
         return { placement: "bottom", style: {} };
@@ -1495,6 +1665,53 @@ function Breadcrumb({ className = "cc-breadcrumb", items, separator = "/", ...pr
     const state = useMemo(() => new BreadcrumbController(items).getState(), [items]);
     return (jsx("nav", { className: className, "aria-label": "Breadcrumb", ...props, children: state.items.map((item, index) => (jsxs("span", { className: "cc-breadcrumb__item", children: [index > 0 ? (jsx("span", { className: "cc-breadcrumb__separator", children: separator })) : null, item.href && !item.disabled ? (jsx("a", { href: item.href, children: item.label })) : (jsx("span", { "data-disabled": item.disabled, children: item.label }))] }, String(item.key)))) }));
 }
+function renderMenuIcon(item, collapsed, iconRender) {
+    const rendered = iconRender?.(item);
+    if (rendered !== undefined)
+        return rendered;
+    if (item.icon)
+        return item.icon;
+    return collapsed ? item.label.slice(0, 1) : null;
+}
+function renderMenuItems(items, collapsed, iconRender, onToggle, onSelect) {
+    return items.map((item) => {
+        const hasChildren = item.children.length > 0;
+        const icon = renderMenuIcon(item, collapsed, iconRender);
+        return (jsxs("li", { className: "cc-menu__item", "data-active": item.isActive, "data-disabled": item.disabled, "data-expanded": item.expanded, "data-level": item.level, children: [jsxs("button", { "aria-current": item.isActive ? "page" : undefined, "aria-expanded": hasChildren ? item.expanded : undefined, className: "cc-menu__button", disabled: item.disabled, title: collapsed ? item.label : undefined, type: "button", onClick: () => {
+                        if (hasChildren && !collapsed)
+                            onToggle(item.key);
+                        onSelect(item.key, item);
+                    }, children: [icon ? (jsx("span", { className: "cc-menu__icon", "aria-hidden": "true", children: icon })) : null, jsx("span", { className: "cc-menu__label", children: item.label }), hasChildren ? (jsx(ClassIcon, { className: "cc-menu__arrow", name: "chevronDown" })) : null] }), hasChildren ? (jsx(HeightTransition, { className: "cc-height-transition cc-menu__transition", contentClassName: "cc-height-transition__content cc-menu__transition-content", duration: 180, expanded: !collapsed && item.expanded, mode: "grid", children: jsx("ul", { className: "cc-menu__list cc-menu__list--child", children: renderMenuItems(item.children, collapsed, iconRender, onToggle, onSelect) }) })) : null] }, item.key));
+    });
+}
+function Menu({ activeKey, className = "cc-menu", collapsed, collapsible = true, defaultExpandedKeys = [], iconRender, items, onCollapsedChange, onSelect, ...props }) {
+    const controller = React.useMemo(() => new MenuController({
+        activeKey,
+        collapsed,
+        defaultExpandedKeys,
+        items,
+    }), []);
+    const [state, setState] = React.useState(() => controller.getState());
+    React.useEffect(() => {
+        setState(controller.update({
+            activeKey,
+            collapsed,
+            defaultExpandedKeys,
+            items,
+        }));
+    }, [activeKey, collapsed, controller, defaultExpandedKeys, items]);
+    const commitSelect = React.useCallback((key, item) => {
+        setState(controller.activate(key));
+        onSelect?.(key, item);
+    }, [controller, onSelect]);
+    const toggleExpanded = React.useCallback((key) => setState(controller.toggleExpanded(key)), [controller]);
+    const toggleCollapsed = React.useCallback(() => {
+        const next = controller.toggleCollapsed();
+        setState(next);
+        onCollapsedChange?.(next.collapsed);
+    }, [controller, onCollapsedChange]);
+    return (jsxs("nav", { className: className, "data-collapsed": state.collapsed, "data-collapsible": collapsible, ...props, children: [collapsible ? (jsx("button", { "aria-label": state.collapsed ? "展开菜单" : "收起菜单", className: "cc-menu__collapse", type: "button", onClick: toggleCollapsed, children: jsx(ClassIcon, { name: state.collapsed ? "chevronRight" : "chevronLeft" }) })) : null, jsx("ul", { className: "cc-menu__list", children: renderMenuItems(state.items, state.collapsed, iconRender, toggleExpanded, commitSelect) })] }));
+}
 function Pagination({ boundaryCount = 1, className = "cc-pagination", current = 1, pageSize = 10, siblingCount = 1, total = 0, previousIcon = jsx(ClassIcon, { name: "chevronLeft" }), nextIcon = jsx(ClassIcon, { name: "chevronRight" }), onChange, ...props }) {
     const state = useMemo(() => new PaginationController({
         boundaryCount,
@@ -1505,14 +1722,29 @@ function Pagination({ boundaryCount = 1, className = "cc-pagination", current =
     }).getState(), [boundaryCount, current, pageSize, siblingCount, total]);
     return (jsxs("div", { className: className, ...props, children: [jsx("button", { disabled: state.current <= 1, type: "button", onClick: () => onChange?.(state.current - 1), children: previousIcon }), state.pages.map((page, index) => page === "ellipsis" ? (jsx("span", { "aria-hidden": "true", className: "cc-pagination__ellipsis", children: "\u2022\u2022\u2022" }, `ellipsis-${index}`)) : (jsx("button", { "data-active": page === state.current, type: "button", onClick: () => onChange?.(page), children: page }, page))), jsx("button", { disabled: state.current >= state.pageCount, type: "button", onClick: () => onChange?.(state.current + 1), children: nextIcon })] }));
 }
-function Popconfirm({ children, animation, autoAdjust = true, placement = "top", content = getClassComponentsLocale().popconfirmContent, confirmText = getClassComponentsLocale().popconfirmConfirmText, cancelText = getClassComponentsLocale().popconfirmCancelText, closeOnEsc = true, closeOnOutsideClick = true, onConfirm, }) {
+function Popconfirm({ children, animation, autoAdjust = true, placement = "top", content = getClassComponentsLocale().popconfirmContent, confirmText = getClassComponentsLocale().popconfirmConfirmText, cancelText = getClassComponentsLocale().popconfirmCancelText, closeOnEsc = true, closeOnOutsideClick = true, onConfirm, portal = true, }) {
     const rootRef = React.useRef(null);
     const panelRef = React.useRef(null);
     const [open, setOpen] = React.useState(false);
     const [safePlacement, setSafePlacement] = React.useState(placement);
+    const [anchorStyle, setAnchorStyle] = React.useState({
+        height: 0,
+        left: -9999,
+        top: -9999,
+        width: 0,
+    });
     const motion = resolveAnimation(animation, "scale");
     const [mounted, presence] = usePresence(open, motion.enabled ? motion.duration : 0);
     const updatePlacement = React.useCallback(() => {
+        if (rootRef.current) {
+            const rect = rootRef.current.getBoundingClientRect();
+            setAnchorStyle({
+                height: rect.height,
+                left: rect.left,
+                top: rect.top,
+                width: rect.width,
+            });
+        }
         if (!autoAdjust || !rootRef.current || !panelRef.current) {
             setSafePlacement(placement);
             return;
@@ -1525,7 +1757,8 @@ function Popconfirm({ children, animation, autoAdjust = true, placement = "top",
         requestAnimationFrame(updatePlacement);
         const close = (event) => {
             if (!closeOnOutsideClick ||
-                rootRef.current?.contains(event.target))
+                rootRef.current?.contains(event.target) ||
+                panelRef.current?.contains(event.target))
                 return;
             setOpen(false);
         };
@@ -1550,10 +1783,27 @@ function Popconfirm({ children, animation, autoAdjust = true, placement = "top",
         if (open)
             updatePlacement();
     }, [open, placement, updatePlacement]);
-    return (jsxs("span", { className: ["cc-popconfirm", `cc-popconfirm--${safePlacement}`].join(" "), "data-animation": motion.name, ref: rootRef, style: animationStyle(motion), children: [jsx("span", { onClick: () => setOpen(true), children: children }), mounted ? (jsxs("span", { className: "cc-popconfirm__panel", "data-state": presence, ref: panelRef, role: "dialog", children: [jsx("span", { children: content }), jsxs("span", { className: "cc-popconfirm__actions", children: [jsx("button", { type: "button", onClick: () => setOpen(false), children: cancelText }), jsx("button", { type: "button", onClick: () => {
-                                    onConfirm?.();
-                                    setOpen(false);
-                                }, children: confirmText })] })] })) : null] }));
+    const rootClassName = [
+        "cc-popconfirm",
+        `cc-popconfirm--${safePlacement}`,
+    ].join(" ");
+    const panelNode = mounted ? (jsxs("span", { className: "cc-popconfirm__panel", "data-state": presence, ref: panelRef, role: "dialog", children: [jsx("span", { children: content }), jsxs("span", { className: "cc-popconfirm__actions", children: [jsx("button", { type: "button", onClick: () => setOpen(false), children: cancelText }), jsx("button", { type: "button", onClick: () => {
+                            onConfirm?.();
+                            setOpen(false);
+                        }, children: confirmText })] })] })) : null;
+    const rootNode = (jsxs("span", { className: rootClassName, "data-animation": motion.name, ref: rootRef, style: animationStyle(motion), children: [jsx("span", { onClick: () => setOpen(true), children: children }), portal ? null : panelNode] }));
+    if (!portal)
+        return rootNode;
+    const portalNode = mounted ? (jsx("span", { className: `${rootClassName} cc-popconfirm--portal`, "data-animation": motion.name, style: {
+            ...animationStyle(motion),
+            height: `${anchorStyle.height}px`,
+            left: `${anchorStyle.left}px`,
+            top: `${anchorStyle.top}px`,
+            width: `${anchorStyle.width}px`,
+        }, children: panelNode })) : null;
+    return (jsxs(Fragment, { children: [rootNode, portalNode && typeof document !== "undefined"
+                ? createPortal(portalNode, document.body)
+                : null] }));
 }
 function getBacktopTarget(target) {
     if (typeof target === "string")
@@ -1785,13 +2035,14 @@ function Popup({ open, controller, placement = "bottom", title, children, animat
     }, []);
     if (!mounted)
         return null;
-    const popupContainer = containerRef?.current ?? null;
+    const popupContainer = containerRef?.current ??
+        (typeof document !== "undefined" ? document.body : null);
     const popupElement = (jsxs("div", { className: className, "data-animation": motion.name, "data-contained": popupContainer ? "true" : "false", "data-placement": popupState.placement, "data-state": animationState, role: "presentation", style: animationStyle(motion, style), ...props, children: [jsx("button", { "aria-label": "Close popup", className: overlayClassName, type: "button", onClick: closeOnOverlayClick ? close : undefined }), jsxs("section", { "aria-modal": "true", className: panelClassName, ref: panelRef, role: "dialog", tabIndex: -1, children: [title ? (jsxs("header", { className: "cc-popup__header", children: [jsx("span", { children: title }), jsx("button", { "aria-label": "Close popup", className: "cc-popup__close", type: "button", onClick: close, children: closeIcon })] })) : null, jsx("div", { className: "cc-popup__body", children: children })] })] }));
     return popupContainer
         ? createPortal(popupElement, popupContainer)
         : popupElement;
 }
-function Tooltip({ content, children, animation, placement = "top", trigger = "hover", autoAdjust = true, closeOnEsc = true, closeOnOutsideClick = true, className, id, style, ...props }) {
+function Tooltip({ content, children, animation, placement = "top", trigger = "hover", autoAdjust = true, closeOnEsc = true, closeOnOutsideClick = true, portal = true, className, id, style, ...props }) {
     const rootRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const generatedId = React.useId();
@@ -1799,6 +2050,7 @@ function Tooltip({ content, children, animation, placement = "top", trigger = "h
     const tooltipController = React.useMemo(() => new TooltipController(), []);
     const [open, setOpen] = React.useState(() => tooltipController.isOpen());
     const [safePlacement, setSafePlacement] = React.useState(placement);
+    const [anchorStyle, setAnchorStyle] = React.useState(null);
     const motion = resolveAnimation(animation, "fade");
     useEffect(() => {
         const unsubscribe = tooltipController.subscribe((state) => {
@@ -1810,6 +2062,15 @@ function Tooltip({ content, children, animation, placement = "top", trigger = "h
         };
     }, [tooltipController]);
     const updatePlacement = React.useCallback(() => {
+        if (rootRef.current) {
+            const rect = rootRef.current.getBoundingClientRect();
+            setAnchorStyle({
+                height: rect.height,
+                left: rect.left,
+                top: rect.top,
+                width: rect.width,
+            });
+        }
         if (!autoAdjust || !rootRef.current || !contentRef.current) {
             setSafePlacement(placement);
             return;
@@ -1832,7 +2093,8 @@ function Tooltip({ content, children, animation, placement = "top", trigger = "h
             return undefined;
         const handlePointerDown = (event) => {
             if (!closeOnOutsideClick ||
-                rootRef.current?.contains(event.target))
+                rootRef.current?.contains(event.target) ||
+                contentRef.current?.contains(event.target))
                 return;
             tooltipController.close();
         };
@@ -1859,19 +2121,45 @@ function Tooltip({ content, children, animation, placement = "top", trigger = "h
             onMouseEnter: () => tooltipController.open(),
             onMouseLeave: () => tooltipController.close(),
         };
-    return (jsxs("span", { className: ["cc-tooltip", `cc-tooltip--${safePlacement}`, className]
-            .filter(Boolean)
-            .join(" "), "aria-describedby": open ? contentId : undefined, "data-animation": motion.name, "data-open": open, ref: rootRef, style: animationStyle(motion, style), tabIndex: trigger === "click" ? 0 : undefined, ...props, ...triggerProps, children: [children, jsx("span", { className: "cc-tooltip__content", id: contentId, ref: contentRef, role: "tooltip", children: content })] }));
+    const rootClassName = [
+        "cc-tooltip",
+        `cc-tooltip--${safePlacement}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const tooltipContent = (jsx("span", { className: "cc-tooltip__content", id: contentId, ref: contentRef, role: "tooltip", children: content }));
+    const rootNode = (jsxs("span", { className: rootClassName, "aria-describedby": open ? contentId : undefined, "data-animation": motion.name, "data-open": open, ref: rootRef, style: animationStyle(motion, style), tabIndex: trigger === "click" ? 0 : undefined, ...props, ...triggerProps, children: [children, portal ? null : tooltipContent] }));
+    if (!portal || typeof document === "undefined")
+        return rootNode;
+    const portalNode = open || anchorStyle ? (jsx("span", { className: `${rootClassName} cc-tooltip--portal`, "data-animation": motion.name, "data-open": open, style: {
+            ...animationStyle(motion),
+            height: anchorStyle?.height ?? 0,
+            left: anchorStyle?.left ?? -9999,
+            top: anchorStyle?.top ?? -9999,
+            width: anchorStyle?.width ?? 0,
+        }, children: tooltipContent })) : null;
+    return (jsxs(Fragment, { children: [rootNode, portalNode ? renderBodyPortal(portalNode) : null] }));
 }
-function ToastViewport({ animation, manager = defaultToastManager, className = "cc-toast-viewport", position = "top-right", renderToast, style, ...props }) {
-    const [items, setItems] = React.useState(() => manager.getToasts());
+function ToastViewport({ animation, manager = defaultToastManager, className = "cc-toast-viewport", maxVisible, portal = false, position = "top-right", renderToast, style, ...props }) {
+    const items = useToastItems(manager);
     const motion = resolveAnimation(animation, "slide");
-    const visibleItems = React.useMemo(() => items.filter((item) => item.position === position), [items, position]);
+    const resolvedMaxVisible = normalizeToastMaxVisible(maxVisible);
+    const visibleItems = React.useMemo(() => {
+        const positionItems = items.filter((item) => item.position === position);
+        const visible = positionItems.slice(Math.max(0, positionItems.length - resolvedMaxVisible));
+        return isToastTopPosition(position) ? [...visible].reverse() : visible;
+    }, [items, position, resolvedMaxVisible]);
     const renderedItems = useAnimatedToasts(visibleItems, motion.enabled ? motion.duration : 0);
-    useEffect(() => manager.subscribe(setItems), [manager]);
-    return (jsx("div", { className: [className, `cc-toast-viewport--${position}`]
+    const setToastNode = useToastFlip(renderedItems, motion.enabled ? motion.duration : 0, motion.easing);
+    const viewportNode = (jsx("div", { className: [className, `cc-toast-viewport--${position}`]
             .filter(Boolean)
-            .join(" "), role: "status", "aria-live": "polite", style: animationStyle(motion, style), ...props, children: renderedItems.map(({ item, state }) => (jsx(React.Fragment, { children: renderToast ? (renderToast(item, (id) => manager.dismiss(id), state)) : (jsxs("article", { className: `cc-toast cc-toast--${item.tone}`, "data-animation": motion.name, "data-state": state, children: [item.title ? (jsx("strong", { className: "cc-toast__title", children: item.title })) : null, jsx("span", { className: "cc-toast__message", children: item.message }), jsx("button", { "aria-label": "Dismiss toast", className: "cc-toast__close", type: "button", onClick: () => manager.dismiss(item.id), children: "x" })] })) }, item.id))) }));
+            .join(" "), role: "status", "aria-live": "polite", style: animationStyle(motion, style), ...props, children: renderedItems.map(({ item, motion: isMotionActive, state }, index) => (jsx(React.Fragment, { children: renderToast ? (renderToast(item, (id) => manager.dismiss(id), state)) : (jsxs("article", { className: `cc-toast cc-toast--${item.tone}`, "data-animation": motion.name, "data-motion": isMotionActive ? "true" : "false", "data-state": state, ref: (node) => setToastNode(item.id, node), style: {
+                    "--cc-toast-stack-index": index,
+                }, children: [item.title ? (jsx("strong", { className: "cc-toast__title", children: item.title })) : null, jsx("span", { className: "cc-toast__message", children: item.message }), jsx("button", { "aria-label": "Dismiss toast", className: "cc-toast__close", type: "button", onClick: () => manager.dismiss(item.id), children: jsx(ClassIcon, { name: "x" }) })] })) }, item.id))) }));
+    return portal
+        ? renderBodyPortal(viewportNode)
+        : viewportNode;
 }
 function resolveTabsFlag(source, activeId) {
     if (!source)
@@ -2265,6 +2553,212 @@ function TiltCard({ children, className = "cc-tilt-card", contentClassName = "cc
             ...style,
         }, onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, onPointerMove: handlePointerMove, ...props, children: jsxs("div", { className: surfaceClassName, children: [jsx("div", { className: contentClassName, children: children }), state.glare ? (jsx("span", { "aria-hidden": "true", className: glareClassName })) : null] }) }));
 }
+function OrbitalSphere({ animated = true, className = "cc-orbital-sphere", cycleDuration = 12000, depth = 0.72, disabled = false, duration = 9000, itemClassName = "cc-orbital-sphere__item", itemContentClassName = "cc-orbital-sphere__item-content", itemSize = 72, items, onItemClick, radius = "50%", renderItem, shellClassName = "cc-orbital-sphere__shell", size = "360px", spread = 0.86, stageClassName = "cc-orbital-sphere__stage", style, visibleCount = 10, ...props }) {
+    const state = React.useMemo(() => new OrbitalSphereController({
+        animated,
+        cycleDuration,
+        depth,
+        disabled,
+        duration,
+        itemSize,
+        items,
+        radius,
+        size,
+        spread,
+        visibleCount,
+    }).getState(), [
+        animated,
+        cycleDuration,
+        depth,
+        disabled,
+        duration,
+        itemSize,
+        items,
+        radius,
+        size,
+        spread,
+        visibleCount,
+    ]);
+    return (jsxs("div", { className: className, "data-animated": state.animated ? "true" : "false", "data-disabled": state.disabled ? "true" : "false", "data-overflow": state.items.length > state.visibleCount ? "true" : "false", style: { ...state.styleVars, ...style }, ...props, children: [jsx("span", { "aria-hidden": "true", className: shellClassName }), jsx("div", { className: stageClassName, children: state.items.map((item) => (jsx("button", { "aria-label": item.label, className: itemClassName, "data-tone": item.tone, disabled: state.disabled, style: {
+                        "--cc-orbital-index": item.index,
+                        ...item.styleVars,
+                    }, type: "button", onClick: (event) => onItemClick?.(item, event), children: jsx("span", { className: itemContentClassName, children: renderItem?.(item) ?? item.content }) }, item.id))) })] }));
+}
+function HeightTransition({ children, className = "cc-height-transition", contentClassName = "cc-height-transition__content", duration = 220, easing, expanded = false, mode = "auto", style, ...props }) {
+    const contentRef = React.useRef(null);
+    const controller = React.useMemo(() => new HeightTransitionController({ duration, easing, expanded, mode }), []);
+    const [state, setState] = React.useState(() => controller.getState());
+    const [height, setHeight] = React.useState(0);
+    React.useEffect(() => {
+        setState(controller.update({ duration, easing, expanded, mode }));
+    }, [controller, duration, easing, expanded, mode]);
+    React.useLayoutEffect(() => {
+        const element = contentRef.current;
+        if (!element || typeof ResizeObserver === "undefined") {
+            setHeight(element?.scrollHeight ?? 0);
+            return undefined;
+        }
+        const observer = new ResizeObserver(() => setHeight(element.scrollHeight));
+        observer.observe(element);
+        setHeight(element.scrollHeight);
+        return () => observer.disconnect();
+    }, [children]);
+    return (jsx("div", { className: className, "data-expanded": state.expanded, "data-mode": state.mode, style: {
+            "--cc-height-transition-duration": `${state.duration}ms`,
+            "--cc-height-transition-easing": state.easing,
+            "--cc-height-transition-height": `${height}px`,
+            ...style,
+        }, ...props, children: jsx("div", { className: contentClassName, ref: contentRef, children: children }) }));
+}
+function CodePreview({ className = "cc-code-preview", code, defaultExpanded = false, language = "Vue / TSX", onCopy, placement = "auto", strategy = "fixed", title = "示例源码", transitionDuration = 220, transitionEasing = "cubic-bezier(0.22, 0.8, 0.28, 1)", ...props }) {
+    const rootRef = React.useRef(null);
+    const panelRef = React.useRef(null);
+    const controller = React.useMemo(() => new CodePreviewController({
+        code,
+        defaultExpanded,
+        language,
+        placement,
+        title: String(title),
+    }), []);
+    const [state, setState] = React.useState(() => controller.getState());
+    const [panelStyle, setPanelStyle] = React.useState();
+    React.useEffect(() => {
+        setState(controller.update({ code, language, placement, title: String(title) }));
+    }, [code, controller, language, placement, title]);
+    const updatePanelPosition = React.useCallback((estimate = false) => {
+        const root = rootRef.current;
+        const panel = panelRef.current;
+        if (!root || (!panel && !estimate) || typeof window === "undefined")
+            return undefined;
+        const rect = root.getBoundingClientRect();
+        const padding = 10;
+        const gap = 10;
+        const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+        const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+        const maxPanelHeight = Math.max(160, viewportHeight - padding * 2);
+        const maxPanelWidth = Math.max(160, viewportWidth - padding * 2);
+        const minPanelHeight = Math.min(160, maxPanelHeight);
+        const panelContent = panel?.querySelector("pre");
+        const measuredPanelHeight = Math.max(panel?.offsetHeight ?? 0, panel?.scrollHeight ?? 0, panelContent?.scrollHeight ?? 0, estimate ? 420 : 0);
+        const preferredPanelHeight = Math.min(Math.max(160, measuredPanelHeight || 420), maxPanelHeight);
+        const panelWidth = Math.min(Math.max(rect.width, panel?.offsetWidth || 720), maxPanelWidth);
+        const availableBelow = Math.max(minPanelHeight, viewportHeight - rect.bottom - gap - padding);
+        const availableAbove = Math.max(minPanelHeight, rect.top - gap - padding);
+        const placementHeight = Math.min(preferredPanelHeight, Math.max(availableBelow, availableAbove));
+        const next = controller.resolvePlacement({
+            anchorBottom: rect.bottom,
+            anchorLeft: rect.left,
+            anchorRight: rect.right,
+            anchorTop: rect.top,
+            panelHeight: placementHeight,
+            panelWidth,
+            viewportHeight,
+            viewportWidth,
+        });
+        setState(next);
+        if (strategy !== "fixed") {
+            setPanelStyle(undefined);
+            return;
+        }
+        const clamp = (value, min, max) => Math.min(Math.max(min, value), max);
+        const width = panelWidth;
+        const maxLeft = Math.max(padding, viewportWidth - width - padding);
+        const viewportPanelHeight = Math.min(preferredPanelHeight, maxPanelHeight);
+        const maxTop = Math.max(padding, viewportHeight - viewportPanelHeight - padding);
+        let left = clamp(rect.left, padding, maxLeft);
+        let top = rect.bottom + gap;
+        let maxHeight = Math.min(preferredPanelHeight, Math.max(minPanelHeight, viewportHeight - top - padding));
+        let transformOrigin = "top left";
+        if (next.resolvedPlacement === "top") {
+            maxHeight = Math.min(preferredPanelHeight, availableAbove);
+            top = Math.max(padding, rect.top - gap - maxHeight);
+            transformOrigin = "bottom left";
+        }
+        else if (next.resolvedPlacement === "right") {
+            left = clamp(rect.right + gap, padding, maxLeft);
+            top = clamp(rect.top, padding, maxTop);
+            maxHeight = viewportPanelHeight;
+            transformOrigin = "top left";
+        }
+        else if (next.resolvedPlacement === "left") {
+            left = clamp(rect.left - width - gap, padding, maxLeft);
+            top = clamp(rect.top, padding, maxTop);
+            maxHeight = viewportPanelHeight;
+            transformOrigin = "top right";
+        }
+        setPanelStyle({
+            left,
+            maxHeight,
+            top,
+            transformOrigin,
+            width,
+        });
+        return next;
+    }, [controller, strategy]);
+    const updatePanelPositionFromViewport = React.useCallback(() => {
+        updatePanelPosition();
+    }, [updatePanelPosition]);
+    React.useLayoutEffect(() => {
+        if (!state.expanded) {
+            setPanelStyle(undefined);
+            return undefined;
+        }
+        updatePanelPosition();
+        window.addEventListener("resize", updatePanelPositionFromViewport);
+        window.addEventListener("scroll", updatePanelPositionFromViewport, true);
+        return () => {
+            window.removeEventListener("resize", updatePanelPositionFromViewport);
+            window.removeEventListener("scroll", updatePanelPositionFromViewport, true);
+        };
+    }, [
+        code,
+        state.expanded,
+        updatePanelPosition,
+        updatePanelPositionFromViewport,
+    ]);
+    React.useEffect(() => {
+        if (!state.expanded || typeof document === "undefined")
+            return undefined;
+        const close = () => {
+            setPanelStyle(undefined);
+            setState(controller.close());
+        };
+        const closeOnOutside = (event) => {
+            const target = event.target;
+            if (target &&
+                (rootRef.current?.contains(target) ||
+                    panelRef.current?.contains(target)))
+                return;
+            close();
+        };
+        const closeOnEscape = (event) => {
+            if (event.key === "Escape")
+                close();
+        };
+        document.addEventListener("pointerdown", closeOnOutside, true);
+        document.addEventListener("keydown", closeOnEscape, true);
+        return () => {
+            document.removeEventListener("pointerdown", closeOnOutside, true);
+            document.removeEventListener("keydown", closeOnEscape, true);
+        };
+    }, [controller, state.expanded]);
+    const copy = async () => {
+        await (onCopy ? onCopy(code) : navigator.clipboard?.writeText(code));
+        setState(controller.copied());
+        window.setTimeout(() => setState(controller.resetCopied()), 1200);
+    };
+    const panel = (jsx("div", { className: "cc-code-preview__panel", "data-placement": state.resolvedPlacement, "data-strategy": strategy, "data-expanded": state.expanded, ref: panelRef, style: panelStyle, children: jsx(HeightTransition, { className: "cc-height-transition cc-code-preview__transition", contentClassName: "cc-height-transition__content cc-code-preview__panel-content", duration: transitionDuration, easing: transitionEasing, expanded: state.expanded, mode: "auto", children: jsx("pre", { children: jsx("code", { children: state.code }) }) }) }));
+    return (jsxs("div", { className: className, "data-expanded": state.expanded, "data-placement": state.resolvedPlacement, "data-strategy": strategy, ref: rootRef, ...props, children: [jsxs("div", { className: "cc-code-preview__bar", children: [jsxs("div", { className: "cc-code-preview__meta", children: [jsx("span", { className: "cc-code-preview__title", children: title }), jsx("span", { className: "cc-code-preview__lang", children: state.language })] }), jsxs("div", { className: "cc-code-preview__actions", children: [jsx("button", { type: "button", onClick: () => {
+                                    const next = controller.toggle();
+                                    if (!next.expanded) {
+                                        setPanelStyle(undefined);
+                                        setState(next);
+                                        return;
+                                    }
+                                    setState(updatePanelPosition(true) ?? next);
+                                    window.requestAnimationFrame(() => updatePanelPosition());
+                                }, children: state.expanded ? "收起" : "展开" }), jsx("button", { type: "button", onClick: () => void copy(), children: state.copied ? "已复制" : "复制" })] })] }), strategy === "fixed" ? renderBodyPortal(panel) : panel] }));
+}
 function QRCode({ value, size = 160, margin = 2, darkColor = "#1f1a2e", lightColor = "#ffffff", className = "cc-code cc-qr-code", errorCorrectionLevel = "M", errorText = "QR code unavailable", logoSrc, logoAlt = "QR code logo", logoSize = Math.round(size * 0.22), logoPadding = 6, logoRadius = 8, logoBackground = "#ffffff", renderError, ...props }) {
     const [svg, setSvg] = React.useState("");
     const [error, setError] = React.useState(null);
@@ -2700,7 +3194,7 @@ function signaturePointFromEvent(canvas, event) {
         y: event.clientY - rect.top,
     };
 }
-const Signature = /*#__PURE__*/ React.forwardRef(function Signature({ backgroundColor, canvasClassName = "cc-signature__canvas", className = "cc-signature", clearText = getClassComponentsLocale().signatureClearText, disabled = false, errorClassName, exportType = "image/png", fieldClassName = "cc-field cc-signature-field", height = 220, initialValue, label, labelClassName = "cc-field__label", lineWidth = 3, name, penColor = "#111827", readOnly = false, rules, showToolbar = true, style, toolbarClassName = "cc-signature__toolbar", undoText = getClassComponentsLocale().signatureUndoText, validateOn, width = "100%", onChange, onClear, onEnd, onUndo, ...props }, ref) {
+const Signature = /*#__PURE__*/ React.forwardRef(function Signature({ backgroundColor, canvasClassName = "cc-signature__canvas", className = "cc-signature", clearText = getClassComponentsLocale().signatureClearText, disabled = false, errorClassName, exportType = "image/png", fieldClassName = "cc-field cc-signature-field", height = 220, initialValue, label, labelClassName = "cc-field__label", lineWidth = 3, name, penColor = "#1d2129", readOnly = false, rules, showToolbar = true, style, toolbarClassName = "cc-signature__toolbar", undoText = getClassComponentsLocale().signatureUndoText, validateOn, width = "100%", onChange, onClear, onEnd, onUndo, ...props }, ref) {
     const formContext = React.useContext(FormContext);
     const formState = useSyncExternalStore((listener) => formContext
         ? formContext.controller.subscribe(listener)
@@ -3483,6 +3977,28 @@ function Draggable({ axis = "xy", boundaryRef, children, className = "cc-draggab
             ? children({ dragging: state.dragging, position: state.position })
             : children }));
 }
+function readDragDropPreviewStyleVars(element) {
+    if (!element || typeof window === "undefined")
+        return {};
+    const styles = window.getComputedStyle(element);
+    const read = (name) => styles.getPropertyValue(name).trim();
+    const slotDraggingBackground = read("--cc-drag-drop-slot-dragging-background");
+    const slotDraggingBorderColor = read("--cc-drag-drop-slot-dragging-border-color");
+    const previewBackground = read("--cc-drag-drop-preview-background");
+    const previewBorderColor = read("--cc-drag-drop-preview-border-color");
+    const values = {
+        "--cc-drag-drop-preview-background": previewBackground && !previewBackground.includes("var(")
+            ? previewBackground
+            : slotDraggingBackground,
+        "--cc-drag-drop-preview-border-color": previewBorderColor && !previewBorderColor.includes("var(")
+            ? previewBorderColor
+            : slotDraggingBorderColor,
+        "--cc-drag-drop-preview-color": read("--cc-drag-drop-preview-color"),
+        "--cc-drag-drop-preview-shadow": read("--cc-drag-drop-preview-shadow"),
+        "--cc-drag-drop-motion-duration": read("--cc-drag-drop-motion-duration"),
+    };
+    return Object.fromEntries(Object.entries(values).filter(([, value]) => value.length > 0));
+}
 function reorderDropItems(items, fromIndex, toIndex, mode) {
     if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex)
         return [...items];
@@ -3749,6 +4265,7 @@ function DragDropBoard({ columns, items, mode = "insert", renderItem, className
                             offsetY: event.clientY - rect.top,
                             originX: rect.left,
                             originY: rect.top,
+                            styleVars: readDragDropPreviewStyleVars(boardRef.current),
                             width: rect.width,
                             x: rect.left,
                             y: rect.top,
@@ -3796,6 +4313,7 @@ function DragDropBoard({ columns, items, mode = "insert", renderItem, className
                     }, onPointerUp: endDrag, onPointerCancel: cancelDrag, children: jsx("div", { className: "cc-drag-drop-board__item", children: renderItem(item, { dragging, over }) }) }, item.id));
             }), preview
                 ? renderBodyPortal(jsx("div", { "aria-hidden": "true", className: "cc-drag-drop-board__preview", "data-dropping": preview.dropping, "data-returning": preview.returning, ref: previewRef, style: {
+                        ...preview.styleVars,
                         height: preview.height,
                         transform: `translate3d(${preview.x}px, ${preview.y}px, 0)`,
                         width: preview.width,
@@ -4650,7 +5168,9 @@ function MasonryVirtualList({ columns, data, estimateSize = 220, gap = 16, heade
                             item,
                         }) }, item.key))) })] }) }));
 }
-function ChatVirtualListInner({ data, bottomBuffer = 8, bottomThreshold = 64, defaultStickToBottom = true, enablePullUp = false, estimateSize = 72, getKey, height = 420, itemClassName = "cc-chat-virtual-list__item", itemContent, listClassName = "cc-chat-virtual-list__inner", appendScrollBehavior = "smooth", pullUpClassName = "cc-chat-virtual-list__pull-up", pullUpContent, pullUpLoading = false, pullUpMinDuration = 420, pullUpThreshold = 48, stickToBottomOnAppend = true, stickToBottomOnUpdate = true, topLoadingClassName = "cc-chat-virtual-list__top-loading", topLoadingContent = "正在加载历史消息...", topBuffer = 10, topThreshold = 96, className = "cc-chat-virtual-list", viewportClassName = "cc-chat-virtual-list__viewport", onPullUp, onReachTop, onRangeChange, style, ...props }, ref) {
+const CHAT_PREPEND_MOMENTUM_LOCK_MS = 420;
+const CHAT_PREPEND_STABILIZE_FRAMES = 24;
+function ChatVirtualListInner({ data, bottomBuffer = 8, bottomThreshold = 64, defaultStickToBottom = true, enablePullUp = false, estimateSize = 72, getKey, height = 420, itemClassName = "cc-chat-virtual-list__item", itemContent, listClassName = "cc-chat-virtual-list__inner", appendScrollBehavior = "smooth", pullUpClassName = "cc-chat-virtual-list__pull-up", pullUpContent, pullUpLoading = false, pullUpMinDuration = 420, pullUpThreshold = 48, stickToBottomOnAppend = true, stickToBottomOnUpdate = true, topLoadingClassName = "cc-chat-virtual-list__top-loading", topLoadingContent = "", topBuffer = 10, topThreshold = 96, className = "cc-chat-virtual-list", viewportClassName = "cc-chat-virtual-list__viewport", onPullUp, onReachTop, onRangeChange, style, ...props }, ref) {
     const viewportRef = React.useRef(null);
     const pullUpRef = React.useRef(null);
     const observersRef = React.useRef(new Map());
@@ -4703,7 +5223,19 @@ function ChatVirtualListInner({ data, bottomBuffer = 8, bottomThreshold = 64, de
         }
         releaseTopLoadingLock();
     }, [releaseTopLoadingLock]);
-    const clearPendingPrependAnchor = React.useCallback(() => {
+    const clearPendingPrependAnchor = React.useCallback((force = false) => {
+        const pendingAnchor = pendingPrependAnchorRef.current;
+        if (!force && pendingAnchor) {
+            const remaining = pendingAnchor.releaseAt - Date.now();
+            if (remaining > 0) {
+                if (prependTimerRef.current !== undefined)
+                    window.clearTimeout(prependTimerRef.current);
+                prependTimerRef.current = window.setTimeout(() => {
+                    clearPendingPrependAnchor(true);
+                }, remaining);
+                return;
+            }
+        }
         pendingPrependAnchorRef.current = null;
         if (prependStabilizeFrameRef.current !== undefined) {
             window.cancelAnimationFrame(prependStabilizeFrameRef.current);
@@ -4735,19 +5267,23 @@ function ChatVirtualListInner({ data, bottomBuffer = 8, bottomThreshold = 64, de
         if (prependStabilizeFrameRef.current !== undefined) {
             window.cancelAnimationFrame(prependStabilizeFrameRef.current);
         }
-        let remainingFrames = 8;
+        let remainingFrames = CHAT_PREPEND_STABILIZE_FRAMES;
         const stabilize = () => {
-            if (!pendingPrependAnchorRef.current || remainingFrames <= 0) {
+            const pendingAnchor = pendingPrependAnchorRef.current;
+            if (!pendingAnchor) {
                 prependStabilizeFrameRef.current = undefined;
                 return;
             }
             applyPendingPrependAnchor();
             remainingFrames -= 1;
+            if (remainingFrames <= 0 && pendingAnchor.releaseAt <= Date.now()) {
+                prependStabilizeFrameRef.current = undefined;
+                return;
+            }
             prependStabilizeFrameRef.current =
                 window.requestAnimationFrame(stabilize);
         };
-        prependStabilizeFrameRef.current =
-            window.requestAnimationFrame(stabilize);
+        prependStabilizeFrameRef.current = window.requestAnimationFrame(stabilize);
     }, [applyPendingPrependAnchor]);
     const scheduleTopLoadingFallback = React.useCallback(() => {
         if (topLoadingFallbackTimerRef.current !== undefined) {
@@ -4894,6 +5430,7 @@ function ChatVirtualListInner({ data, bottomBuffer = 8, bottomThreshold = 64, de
                         anchorOffset: previousAnchor.offset,
                         measuredKeys: new Set(),
                         prependKeys: new Set(keys.slice(0, prependCount)),
+                        releaseAt: Date.now() + CHAT_PREPEND_MOMENTUM_LOCK_MS,
                         targetScrollTop: nextScrollTop,
                     }
                     : null;
@@ -5060,12 +5597,19 @@ function ChatVirtualListInner({ data, bottomBuffer = 8, bottomThreshold = 64, de
     useEffect(() => {
         onRangeChange?.({ endIndex: range.endIndex, startIndex: range.startIndex });
     }, [onRangeChange, range.endIndex, range.startIndex]);
+    const hasPendingKeySync = () => {
+        const previousKeys = previousKeysRef.current;
+        return (previousKeys.length !== keys.length ||
+            previousKeys.some((itemKey, index) => !Object.is(itemKey, keys[index])));
+    };
     const observeItem = (index, key, element) => {
         observersRef.current.get(key)?.disconnect();
         observersRef.current.delete(key);
         if (!element)
             return;
         const measure = () => {
+            if (!pendingPrependAnchorRef.current && hasPendingKeySync())
+                return;
             const previousTotal = listControllerRef.current.getTotalSize();
             const previousItem = listControllerRef.current.getItem(index);
             const viewport = viewportRef.current;
@@ -5128,7 +5672,7 @@ function ChatVirtualListInner({ data, bottomBuffer = 8, bottomThreshold = 64, de
     return (jsxs("div", { className: className, "data-top-loading": topLoadingPending ? "true" : undefined, style: {
             "--cc-chat-virtual-list-height": resolvedHeight,
             ...style,
-        }, ...props, children: [jsx("div", { "aria-hidden": !topLoadingPending, className: topLoadingClassName, "data-active": topLoadingPending ? "true" : "false", role: topLoadingPending ? "status" : undefined, children: topLoadingContent }), jsxs("div", { className: viewportClassName, "data-top-loading": topLoadingPending ? "true" : undefined, ref: viewportRef, onScroll: (event) => {
+        }, ...props, children: [jsx(Loading, { "aria-hidden": !topLoadingPending, className: topLoadingClassName, "data-active": topLoadingPending ? "true" : "false", role: topLoadingPending ? "status" : undefined, text: topLoadingContent }), jsxs("div", { className: viewportClassName, "data-top-loading": topLoadingPending ? "true" : undefined, ref: viewportRef, onScroll: (event) => {
                     if (pendingPrependAnchorRef.current) {
                         const stabilized = applyPendingPrependAnchor();
                         if (stabilized)
@@ -5875,5 +6419,5 @@ function LiveRoom({ chats = EMPTY_LIVE_CHATS, className = "cc-live-room", danmak
                                 } }), jsx("button", { "aria-label": getClassComponentsLocale().liveRoomSendLabel, title: getClassComponentsLocale().liveRoomSendLabel, type: "button", onClick: send, children: jsx(LiveRoomIcon, { name: "send" }) })] })] })] }));
 }
 
-export { Affix, Backtop, Badge, Barcode, Breadcrumb, Button, Calendar, CanvasEditor, CanvasImage, ChatVirtualList, Checkbox, Checked, ClassConfigProvider, ColorPicker, ComicReader, ConfigTable, Countdown, Danmaku, DatePicker, DateRangePicker, DesignEffect, DragDropBoard, Draggable, EllipsisText, Empty, Field, FilePreview, FloatingBall, FormProvider, GradientText, Input, LazyImage, LiveRoom, Loading, Marquee, MasonryVirtualList, Modal, MultiColumnPicker, NovelReader, NumberInput, Pagination, PasswordInput, Popconfirm, Popup, ProgressBar, QRCode, RadioGroup, Rating, RollingNumber, Select, Signature, Skeleton, SlideCaptcha, Swiper, Switch, Table, Tabs, Tag, Textarea, TiltCard, Timeline, ToastViewport, Tooltip, TypewriterText, Upload, VerificationCode, VideoDetailTransition, VideoPlayer, VirtualList, VirtualSelect, VirtualTable, defaultToastManager, useField, useForm, useFormState };
+export { Affix, Backtop, Badge, Barcode, Breadcrumb, Button, Calendar, CanvasEditor, CanvasImage, ChatTextarea, ChatVirtualList, Checkbox, Checked, ClassConfigProvider, CodePreview, ColorPicker, ComicReader, ConfigTable, Countdown, Danmaku, DatePicker, DateRangePicker, DesignEffect, DragDropBoard, Draggable, EllipsisText, Empty, Field, FilePreview, FloatingBall, FormProvider, GradientText, HeightTransition, Input, LazyImage, LiveRoom, Loading, Marquee, MasonryVirtualList, Menu, Modal, MultiColumnPicker, NovelReader, NumberInput, OrbitalSphere, Pagination, PasswordInput, Popconfirm, Popup, ProgressBar, QRCode, RadioGroup, Rating, RollingNumber, Select, Signature, Skeleton, SlideCaptcha, Swiper, Switch, Table, Tabs, Tag, Textarea, TiltCard, Timeline, ToastViewport, Tooltip, TypewriterText, Upload, VerificationCode, VideoDetailTransition, VideoPlayer, VirtualList, VirtualSelect, VirtualTable, defaultToastManager, useField, useForm, useFormState };
 //# sourceMappingURL=index.js.map