@class-kit/vue 0.1.1 → 0.1.2

package/dist/index.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, watch, h, inject, shallowRef, onBeforeUnmount, onMounted, provide, computed, Teleport, nextTick } from 'vue';
-import { configureClassComponents, ToastManager, FormController, getClassComponentsLocale, PasswordInputController, ColorPickerController, DatePickerController, DateRangePickerController, VerificationCodeController, SlideCaptchaController, VirtualSelectController, VirtualListController, RollingNumberController, CountdownController, CalendarController, TypewriterTextController, DesignEffectController, GradientTextController, LazyImageController, TiltCardController, VideoPlayerController, VideoDetailTransitionController, FilePreviewController, CanvasEditorController, ProgressController, SignatureController, TimelineController, DragController, DropController, GestureController, FloatingBallController, MultiColumnPickerController, SwiperController, MasonryVirtualListController, ChatVirtualListController, BadgeController, TagController, SkeletonController, BreadcrumbController, PaginationController, BacktopController, ModalController, PopupController, TooltipController, TabsController, TableController, UploadController, NovelReaderController, ComicReaderController, DanmakuController, LiveRoomController, AffixController, CanvasImageController, MarqueeController, getSafeTooltipPlacement } 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 { configureClassComponents, ToastManager, FormController, getClassComponentsLocale, PasswordInputController, ColorPickerController, DatePickerController, DateRangePickerController, ChatTextareaController, VerificationCodeController, SlideCaptchaController, VirtualSelectController, VirtualListController, RollingNumberController, CountdownController, CalendarController, TypewriterTextController, DesignEffectController, GradientTextController, LazyImageController, TiltCardController, OrbitalSphereController, HeightTransitionController, CodePreviewController, VideoPlayerController, VideoDetailTransitionController, FilePreviewController, CanvasEditorController, ProgressController, SignatureController, TimelineController, DragController, DropController, GestureController, FloatingBallController, MultiColumnPickerController, SwiperController, MasonryVirtualListController, ChatVirtualListController, BadgeController, TagController, SkeletonController, BreadcrumbController, MenuController, PaginationController, BacktopController, ModalController, PopupController, TooltipController, TabsController, TableController, UploadController, NovelReaderController, ComicReaderController, DanmakuController, LiveRoomController, AffixController, CanvasImageController, MarqueeController, getSafeTooltipPlacement } from '@class-kit/core';
+export { AffixController, BacktopController, BadgeController, BreadcrumbController, CalendarController, CanvasEditorController, CanvasImageController, 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 formSymbol = /*#__PURE__*/ Symbol("ClassComponentsForm");
 const formInteractivitySymbol = /*#__PURE__*/ Symbol("ClassComponentsFormInteractivity");
@@ -106,6 +106,14 @@ function animationStyle(animation) {
         "--cc-animation-easing": animation.easing,
     };
 }
+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");
+}
 const focusableSelector = [
     "a[href]",
     "button:not([disabled])",
@@ -726,7 +734,7 @@ const ClassColorPicker = /*#__PURE__*/ defineComponent({
         });
         return () => {
             const interactivity = resolveFieldInteractivity(formInteractivity, props.disabled, props.readOnly ?? props.readonly);
-            const controller = new ColorPickerController(String(field.value.value || "#7c3aed"));
+            const controller = new ColorPickerController(String(field.value.value || "#1d2129"));
             const state = controller.getState();
             const commit = (value) => {
                 if (interactivity.disabled || interactivity.readOnly)
@@ -1465,6 +1473,152 @@ const ClassTextarea = /*#__PURE__*/ defineComponent({
         };
     },
 });
+function getVueTextareaMetrics(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 ClassChatTextarea = /*#__PURE__*/ defineComponent({
+    name: "ClassChatTextarea",
+    inheritAttrs: false,
+    props: {
+        className: { type: String, default: "cc-chat-textarea" },
+        clearable: { type: Boolean, default: true },
+        clearIcon: {
+            type: null,
+            default: () => classIcon("x"),
+        },
+        clearLabel: {
+            type: String,
+            default: () => getClassComponentsLocale().inputClearLabel,
+        },
+        defaultValue: { type: String, default: "" },
+        disabled: optionalBooleanProp(),
+        maxRows: { type: Number, default: 3 },
+        minRows: { type: Number, default: 1 },
+        modelValue: String,
+        placeholder: String,
+        readOnly: optionalBooleanProp(),
+        readonly: optionalBooleanProp(),
+        textareaClass: { type: String, default: "cc-chat-textarea__control" },
+        textareaStyle: Object,
+        value: String,
+    },
+    emits: ["change", "input", "update:modelValue", "update:value"],
+    setup(props, { attrs, emit, expose }) {
+        const textareaRef = ref(null);
+        const controller = new ChatTextareaController({
+            maxRows: props.maxRows,
+            minRows: props.minRows,
+            value: props.modelValue ?? props.value ?? props.defaultValue,
+        });
+        const state = ref(controller.getState());
+        const controlled = computed(() => props.modelValue !== undefined || props.value !== undefined);
+        let resizeObserver;
+        const resize = () => {
+            const element = textareaRef.value;
+            if (!element || typeof window === "undefined")
+                return;
+            const { borderY, lineHeight, paddingY } = getVueTextareaMetrics(element);
+            const minHeight = lineHeight * state.value.minRows + paddingY + borderY;
+            const maxHeight = lineHeight * state.value.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";
+        };
+        const syncState = () => {
+            state.value = controller.update({
+                maxRows: props.maxRows,
+                minRows: props.minRows,
+                value: controlled.value
+                    ? (props.modelValue ?? props.value ?? "")
+                    : state.value.value,
+            });
+            nextTick(resize);
+        };
+        watch(() => [props.maxRows, props.minRows, props.modelValue, props.value], syncState);
+        onMounted(() => {
+            resize();
+            if (typeof ResizeObserver === "undefined" || !textareaRef.value)
+                return;
+            resizeObserver = new ResizeObserver(resize);
+            resizeObserver.observe(textareaRef.value);
+        });
+        onBeforeUnmount(() => {
+            resizeObserver?.disconnect();
+        });
+        const commit = (nextValue, event) => {
+            const nextState = controller.setValue(nextValue);
+            if (!controlled.value)
+                state.value = nextState;
+            emit("update:modelValue", nextValue);
+            emit("update:value", nextValue);
+            emit("input", nextValue, event);
+            emit("change", nextValue, event);
+            nextTick(resize);
+        };
+        expose({
+            blur: () => textareaRef.value?.blur(),
+            focus: () => textareaRef.value?.focus(),
+            getElement: () => textareaRef.value,
+        });
+        return () => {
+            const locked = props.disabled || props.readOnly || props.readonly;
+            const currentValue = controlled.value
+                ? (props.modelValue ?? props.value ?? "")
+                : state.value.value;
+            const canClear = props.clearable && currentValue !== "" && !locked;
+            return h("div", {
+                class: props.className,
+                "data-disabled": Boolean(props.disabled),
+                "data-readonly": Boolean(props.readOnly || props.readonly),
+                "data-scrollable": currentValue.length > 0,
+            }, [
+                h("textarea", {
+                    ...attrs,
+                    class: [
+                        props.textareaClass,
+                        canClear ? "cc-chat-textarea__control--clearable" : "",
+                    ],
+                    disabled: props.disabled,
+                    placeholder: props.placeholder,
+                    readonly: props.readOnly || props.readonly,
+                    ref: textareaRef,
+                    rows: state.value.minRows,
+                    style: {
+                        "--cc-chat-textarea-max-rows": state.value.maxRows,
+                        "--cc-chat-textarea-min-rows": state.value.minRows,
+                        ...(props.textareaStyle ?? {}),
+                    },
+                    value: currentValue,
+                    onInput: (event) => {
+                        if (locked)
+                            return;
+                        commit(event.currentTarget.value, event);
+                    },
+                }),
+                canClear
+                    ? h("button", {
+                        "aria-label": props.clearLabel,
+                        class: "cc-chat-textarea__clear",
+                        type: "button",
+                        onClick: (event) => {
+                            commit("", event);
+                            textareaRef.value?.focus();
+                        },
+                    }, props.clearIcon)
+                    : null,
+            ]);
+        };
+    },
+});
 const ClassVerificationCode = /*#__PURE__*/ defineComponent({
     name: "ClassVerificationCode",
     inheritAttrs: false,
@@ -3772,6 +3926,367 @@ const ClassTiltCard = /*#__PURE__*/ defineComponent({
         ]);
     },
 });
+const ClassOrbitalSphere = /*#__PURE__*/ defineComponent({
+    name: "ClassOrbitalSphere",
+    inheritAttrs: false,
+    props: {
+        animated: { type: Boolean, default: true },
+        className: { type: String, default: "cc-orbital-sphere" },
+        cycleDuration: { type: Number, default: 12000 },
+        depth: { type: Number, default: 0.72 },
+        disabled: { type: Boolean, default: false },
+        duration: { type: Number, default: 9000 },
+        itemClass: { type: String, default: "cc-orbital-sphere__item" },
+        itemContentClass: {
+            type: String,
+            default: "cc-orbital-sphere__item-content",
+        },
+        itemSize: { type: Number, default: 72 },
+        items: {
+            type: Array,
+            default: undefined,
+        },
+        radius: { type: [Number, String], default: "50%" },
+        shellClass: { type: String, default: "cc-orbital-sphere__shell" },
+        size: { type: [Number, String], default: "360px" },
+        spread: { type: Number, default: 0.86 },
+        stageClass: { type: String, default: "cc-orbital-sphere__stage" },
+        visibleCount: { type: Number, default: 10 },
+    },
+    emits: ["item-click"],
+    setup(props, { attrs, emit, slots }) {
+        return () => {
+            const state = new OrbitalSphereController({
+                animated: props.animated,
+                cycleDuration: props.cycleDuration,
+                depth: props.depth,
+                disabled: props.disabled,
+                duration: props.duration,
+                itemSize: props.itemSize,
+                items: props.items,
+                radius: props.radius,
+                size: props.size,
+                spread: props.spread,
+                visibleCount: props.visibleCount,
+            }).getState();
+            return h("div", {
+                ...attrs,
+                class: [props.className, attrs.class],
+                "data-animated": state.animated ? "true" : "false",
+                "data-disabled": state.disabled ? "true" : "false",
+                "data-overflow": state.items.length > state.visibleCount ? "true" : "false",
+                style: [state.styleVars, attrs.style],
+            }, [
+                h("span", { "aria-hidden": "true", class: props.shellClass }),
+                h("div", { class: props.stageClass }, state.items.map((item) => h("button", {
+                    "aria-label": item.label,
+                    class: props.itemClass,
+                    "data-tone": item.tone,
+                    disabled: state.disabled,
+                    key: item.id,
+                    onClick: (event) => emit("item-click", item, event),
+                    style: [
+                        {
+                            "--cc-orbital-index": item.index,
+                        },
+                        item.styleVars,
+                    ],
+                    type: "button",
+                }, [
+                    h("span", { class: props.itemContentClass }, slots.item?.({ index: item.index, item }) ?? item.content),
+                ]))),
+            ]);
+        };
+    },
+});
+const ClassHeightTransition = /*#__PURE__*/ defineComponent({
+    name: "ClassHeightTransition",
+    inheritAttrs: false,
+    props: {
+        className: { type: String, default: "cc-height-transition" },
+        contentClass: { type: String, default: "cc-height-transition__content" },
+        duration: { type: Number, default: 220 },
+        easing: { type: String, default: "cubic-bezier(0.22, 0.8, 0.28, 1)" },
+        expanded: { type: Boolean, default: false },
+        mode: {
+            type: String,
+            default: "auto",
+        },
+    },
+    setup(props, { attrs, slots }) {
+        const contentRef = ref(null);
+        const height = ref(0);
+        const controller = new HeightTransitionController({
+            duration: props.duration,
+            easing: props.easing,
+            expanded: props.expanded,
+            mode: props.mode,
+        });
+        const state = ref(controller.getState());
+        let observer;
+        const measure = () => {
+            height.value = contentRef.value?.scrollHeight ?? 0;
+        };
+        watch(() => [props.duration, props.easing, props.expanded, props.mode], () => {
+            state.value = controller.update({
+                duration: props.duration,
+                easing: props.easing,
+                expanded: props.expanded,
+                mode: props.mode,
+            });
+            nextTick(measure);
+        }, { immediate: true });
+        onMounted(() => {
+            measure();
+            if (typeof ResizeObserver !== "undefined" && contentRef.value) {
+                observer = new ResizeObserver(measure);
+                observer.observe(contentRef.value);
+            }
+        });
+        onBeforeUnmount(() => observer?.disconnect());
+        return () => h("div", {
+            ...attrs,
+            class: props.className,
+            "data-expanded": state.value.expanded,
+            "data-mode": state.value.mode,
+            style: [
+                attrs.style,
+                {
+                    "--cc-height-transition-duration": `${state.value.duration}ms`,
+                    "--cc-height-transition-easing": state.value.easing,
+                    "--cc-height-transition-height": `${height.value}px`,
+                },
+            ],
+        }, [
+            h("div", { ref: contentRef, class: props.contentClass }, slots.default?.()),
+        ]);
+    },
+});
+const ClassCodePreview = /*#__PURE__*/ defineComponent({
+    name: "ClassCodePreview",
+    inheritAttrs: false,
+    props: {
+        className: { type: String, default: "cc-code-preview" },
+        code: { type: String, required: true },
+        defaultExpanded: { type: Boolean, default: false },
+        language: { type: String, default: "tsx" },
+        placement: {
+            type: String,
+            default: "auto",
+        },
+        strategy: {
+            type: String,
+            default: "fixed",
+        },
+        title: { type: String, default: "示例源码" },
+        transitionDuration: { type: Number, default: 220 },
+        transitionEasing: {
+            type: String,
+            default: "cubic-bezier(0.22, 0.8, 0.28, 1)",
+        },
+    },
+    emits: ["copy"],
+    setup(props, { attrs, emit, slots }) {
+        const rootRef = ref(null);
+        const panelRef = ref(null);
+        const panelStyle = ref({});
+        const controller = new CodePreviewController({
+            code: props.code,
+            defaultExpanded: props.defaultExpanded,
+            language: props.language,
+            placement: props.placement,
+            title: props.title,
+        });
+        const state = ref(controller.getState());
+        let resetTimer;
+        const sync = () => {
+            state.value = controller.update({
+                code: props.code,
+                language: props.language,
+                placement: props.placement,
+                title: props.title,
+            });
+        };
+        const resolvePlacement = (estimate = false) => {
+            const rect = rootRef.value?.getBoundingClientRect();
+            const panel = panelRef.value;
+            if (!rect || (!panel && !estimate) || typeof window === "undefined")
+                return;
+            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 nextState = controller.resolvePlacement({
+                anchorBottom: rect.bottom,
+                anchorLeft: rect.left,
+                anchorRight: rect.right,
+                anchorTop: rect.top,
+                panelHeight: placementHeight,
+                panelWidth,
+                viewportHeight,
+                viewportWidth,
+            });
+            state.value = nextState;
+            if (props.strategy !== "fixed") {
+                panelStyle.value = {};
+                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 (nextState.resolvedPlacement === "top") {
+                maxHeight = Math.min(preferredPanelHeight, availableAbove);
+                top = Math.max(padding, rect.top - gap - maxHeight);
+                transformOrigin = "bottom left";
+            }
+            else if (nextState.resolvedPlacement === "right") {
+                left = clamp(rect.right + gap, padding, maxLeft);
+                top = clamp(rect.top, padding, maxTop);
+                maxHeight = viewportPanelHeight;
+                transformOrigin = "top left";
+            }
+            else if (nextState.resolvedPlacement === "left") {
+                left = clamp(rect.left - width - gap, padding, maxLeft);
+                top = clamp(rect.top, padding, maxTop);
+                maxHeight = viewportPanelHeight;
+                transformOrigin = "top right";
+            }
+            panelStyle.value = {
+                left: `${left}px`,
+                maxHeight: `${maxHeight}px`,
+                top: `${top}px`,
+                transformOrigin,
+                width: `${width}px`,
+            };
+        };
+        const resolvePlacementFromViewport = () => resolvePlacement();
+        const copy = async () => {
+            if (typeof navigator !== "undefined") {
+                await navigator.clipboard?.writeText(props.code);
+            }
+            state.value = controller.copied();
+            emit("copy", props.code);
+            window.clearTimeout(resetTimer);
+            resetTimer = window.setTimeout(() => {
+                state.value = controller.resetCopied();
+            }, 1200);
+        };
+        watch(() => [props.code, props.language, props.placement, props.title], () => {
+            sync();
+            nextTick(resolvePlacement);
+        });
+        watch(() => state.value.expanded, () => nextTick(resolvePlacement));
+        watch(() => state.value.expanded, (expanded, _previous, onCleanup) => {
+            if (!expanded || typeof document === "undefined")
+                return;
+            const close = () => {
+                panelStyle.value = {};
+                state.value = controller.close();
+            };
+            const closeOnOutside = (event) => {
+                const target = event.target;
+                if (target &&
+                    (rootRef.value?.contains(target) ||
+                        panelRef.value?.contains(target)))
+                    return;
+                close();
+            };
+            const closeOnEscape = (event) => {
+                if (event.key === "Escape")
+                    close();
+            };
+            document.addEventListener("pointerdown", closeOnOutside, true);
+            document.addEventListener("keydown", closeOnEscape, true);
+            onCleanup(() => {
+                document.removeEventListener("pointerdown", closeOnOutside, true);
+                document.removeEventListener("keydown", closeOnEscape, true);
+            });
+        });
+        onMounted(() => {
+            resolvePlacement();
+            window.addEventListener("resize", resolvePlacementFromViewport);
+            window.addEventListener("scroll", resolvePlacementFromViewport, true);
+        });
+        onBeforeUnmount(() => {
+            window.clearTimeout(resetTimer);
+            window.removeEventListener("resize", resolvePlacementFromViewport);
+            window.removeEventListener("scroll", resolvePlacementFromViewport, true);
+        });
+        return () => {
+            const panel = h("div", {
+                ref: panelRef,
+                class: "cc-code-preview__panel",
+                "data-placement": state.value.resolvedPlacement,
+                "data-strategy": props.strategy,
+                "data-expanded": state.value.expanded,
+                style: panelStyle.value,
+            }, [
+                h(ClassHeightTransition, {
+                    className: "cc-height-transition cc-code-preview__transition",
+                    contentClass: "cc-height-transition__content cc-code-preview__panel-content",
+                    duration: props.transitionDuration,
+                    easing: props.transitionEasing,
+                    expanded: state.value.expanded,
+                    mode: "auto",
+                }, {
+                    default: () => h("pre", null, [h("code", null, state.value.code)]),
+                }),
+            ]);
+            return h("div", {
+                ...attrs,
+                ref: rootRef,
+                class: props.className,
+                "data-expanded": state.value.expanded,
+                "data-placement": state.value.resolvedPlacement,
+                "data-strategy": props.strategy,
+            }, [
+                h("div", { class: "cc-code-preview__bar" }, [
+                    h("div", { class: "cc-code-preview__meta" }, [
+                        h("span", { class: "cc-code-preview__title" }, [
+                            slots.title?.() ?? props.title,
+                        ]),
+                        h("span", { class: "cc-code-preview__lang" }, state.value.language),
+                    ]),
+                    h("div", { class: "cc-code-preview__actions" }, [
+                        h("button", {
+                            type: "button",
+                            onClick: () => {
+                                const nextState = controller.toggle();
+                                state.value = nextState;
+                                if (!nextState.expanded) {
+                                    panelStyle.value = {};
+                                    return;
+                                }
+                                resolvePlacement(true);
+                                window.requestAnimationFrame(() => resolvePlacement());
+                            },
+                        }, state.value.expanded ? "收起" : "源码"),
+                        h("button", { type: "button", onClick: copy }, state.value.copied ? "已复制" : "复制"),
+                    ]),
+                ]),
+                props.strategy === "fixed"
+                    ? h(Teleport, { to: "body" }, panel)
+                    : panel,
+            ]);
+        };
+    },
+});
 function optionalDependencyError(packageName, featureName, fallbackName, cause) {
     const detail = cause instanceof Error ? ` Original error: ${cause.message}` : "";
     return new Error(`${featureName} requires optional dependency "${packageName}". Install it or provide ${fallbackName} from a CDN/global fallback.${detail}`);
@@ -5628,7 +6143,7 @@ const ClassSignature = /*#__PURE__*/ defineComponent({
         labelClass: { type: String, default: "cc-field__label" },
         lineWidth: { type: Number, default: 3 },
         name: String,
-        penColor: { type: String, default: "#111827" },
+        penColor: { type: String, default: "#1d2129" },
         readOnly: optionalBooleanProp(),
         readonly: optionalBooleanProp(),
         rules: Array,
@@ -6035,6 +6550,28 @@ function getRectOverlapRatio(source, target) {
     const sourceArea = Math.max(1, source.width * source.height);
     return (width * height) / sourceArea;
 }
+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));
+}
 const ClassDragDropBoard = /*#__PURE__*/ defineComponent({
     name: "ClassDragDropBoard",
     inheritAttrs: false,
@@ -6287,6 +6824,7 @@ const ClassDragDropBoard = /*#__PURE__*/ defineComponent({
                             offsetY: event.clientY - rect.top,
                             originX: rect.left,
                             originY: rect.top,
+                            styleVars: readDragDropPreviewStyleVars(boardRef.value),
                             width: rect.width,
                             x: rect.left,
                             y: rect.top,
@@ -6342,6 +6880,7 @@ const ClassDragDropBoard = /*#__PURE__*/ defineComponent({
                     "data-returning": preview.value.returning,
                     ref: previewRef,
                     style: {
+                        ...preview.value.styleVars,
                         height: `${preview.value.height}px`,
                         transform: `translate3d(${preview.value.x}px, ${preview.value.y}px, 0)`,
                         width: `${preview.value.width}px`,
@@ -7704,6 +8243,8 @@ const ClassMasonryVirtualList = /*#__PURE__*/ defineComponent({
         };
     },
 });
+const CHAT_PREPEND_MOMENTUM_LOCK_MS = 420;
+const CHAT_PREPEND_STABILIZE_FRAMES = 24;
 const ClassChatVirtualList = /*#__PURE__*/ defineComponent({
     name: "ClassChatVirtualList",
     inheritAttrs: false,
@@ -7778,7 +8319,7 @@ const ClassChatVirtualList = /*#__PURE__*/ defineComponent({
         },
         topLoadingContent: {
             type: String,
-            default: "正在加载历史消息...",
+            default: "",
         },
         pullUpLoading: {
             type: Boolean,
@@ -7897,7 +8438,20 @@ const ClassChatVirtualList = /*#__PURE__*/ defineComponent({
                 return;
             releaseTopLoadingLock();
         };
-        const clearPendingPrependAnchor = () => {
+        const clearPendingPrependAnchor = (force = false) => {
+            const pendingAnchor = pendingPrependAnchor.value;
+            if (!force && pendingAnchor) {
+                const remaining = pendingAnchor.releaseAt - Date.now();
+                if (remaining > 0) {
+                    if (prependTimer !== undefined)
+                        window.clearTimeout(prependTimer);
+                    prependTimer = window.setTimeout(() => {
+                        clearPendingPrependAnchor(true);
+                    }, remaining);
+                    schedulePrependStabilization();
+                    return;
+                }
+            }
             pendingPrependAnchor.value = null;
             if (prependStabilizeFrame !== undefined) {
                 window.cancelAnimationFrame(prependStabilizeFrame);
@@ -7929,14 +8483,19 @@ const ClassChatVirtualList = /*#__PURE__*/ defineComponent({
             if (prependStabilizeFrame !== undefined) {
                 window.cancelAnimationFrame(prependStabilizeFrame);
             }
-            let remainingFrames = 8;
+            let remainingFrames = CHAT_PREPEND_STABILIZE_FRAMES;
             const stabilize = () => {
-                if (!pendingPrependAnchor.value || remainingFrames <= 0) {
+                const pendingAnchor = pendingPrependAnchor.value;
+                if (!pendingAnchor) {
                     prependStabilizeFrame = undefined;
                     return;
                 }
                 applyPendingPrependAnchor();
                 remainingFrames -= 1;
+                if (remainingFrames <= 0 && pendingAnchor.releaseAt <= Date.now()) {
+                    prependStabilizeFrame = undefined;
+                    return;
+                }
                 prependStabilizeFrame = window.requestAnimationFrame(stabilize);
             };
             prependStabilizeFrame = window.requestAnimationFrame(stabilize);
@@ -8052,6 +8611,7 @@ const ClassChatVirtualList = /*#__PURE__*/ defineComponent({
                             anchorOffset: previousAnchor.offset,
                             measuredKeys: new Set(),
                             prependKeys: new Set(keys.slice(0, prependCount)),
+                            releaseAt: Date.now() + CHAT_PREPEND_MOMENTUM_LOCK_MS,
                             targetScrollTop: nextScrollTop,
                         }
                         : null;
@@ -8193,6 +8753,12 @@ const ClassChatVirtualList = /*#__PURE__*/ defineComponent({
             if (!(element instanceof HTMLElement))
                 return;
             const measure = () => {
+                const keys = getKeys();
+                const oldKeys = previousKeys.value;
+                const hasPendingKeySync = oldKeys.length !== keys.length ||
+                    oldKeys.some((itemKey, keyIndex) => !Object.is(itemKey, keys[keyIndex]));
+                if (!pendingPrependAnchor.value && hasPendingKeySync)
+                    return;
                 const viewport = viewportRef.value;
                 const oldTotal = listController.getTotalSize();
                 const oldItem = listController.getItem(index);
@@ -8206,7 +8772,6 @@ const ClassChatVirtualList = /*#__PURE__*/ defineComponent({
                     if (pendingAnchor) {
                         if (pendingAnchor.prependKeys.has(key))
                             pendingAnchor.measuredKeys.add(key);
-                        const keys = getKeys();
                         const anchorIndex = keys.findIndex((itemKey) => Object.is(itemKey, pendingAnchor.anchorKey));
                         if (anchorIndex >= 0) {
                             const anchorItem = listController.getItem(anchorIndex);
@@ -8257,13 +8822,14 @@ const ClassChatVirtualList = /*#__PURE__*/ defineComponent({
                 "data-top-loading": topLoadingPending.value ? "true" : undefined,
                 style: { "--cc-chat-virtual-list-height": resolvedHeight },
             }, [
-                h("div", {
-                    "aria-hidden": topLoadingPending.value ? undefined : "true",
-                    class: props.topLoadingClass,
-                    "data-active": topLoadingPending.value ? "true" : "false",
-                    role: topLoadingPending.value ? "status" : undefined,
-                }, slots.topLoading?.({ loading: topLoadingPending.value }) ??
-                    props.topLoadingContent),
+                slots.topLoading?.({ loading: topLoadingPending.value }) ??
+                    h(ClassLoading, {
+                        "aria-hidden": topLoadingPending.value ? undefined : "true",
+                        className: props.topLoadingClass,
+                        "data-active": topLoadingPending.value ? "true" : "false",
+                        role: topLoadingPending.value ? "status" : undefined,
+                        text: props.topLoadingContent,
+                    }),
                 h("div", {
                     class: props.viewportClass,
                     "data-top-loading": topLoadingPending.value ? "true" : undefined,
@@ -8655,6 +9221,117 @@ const ClassBreadcrumb = /*#__PURE__*/ defineComponent({
         };
     },
 });
+function renderVueMenuItems(items, collapsed, slots, toggle, select) {
+    return items.map((item) => {
+        const hasChildren = item.children.length > 0;
+        const icon = slots.icon?.({ item }) ??
+            item.icon ??
+            (collapsed ? item.label.slice(0, 1) : undefined);
+        return h("li", {
+            class: "cc-menu__item",
+            "data-active": item.isActive,
+            "data-disabled": item.disabled,
+            "data-expanded": item.expanded,
+            "data-level": item.level,
+            key: item.key,
+        }, [
+            h("button", {
+                "aria-current": item.isActive ? "page" : undefined,
+                "aria-expanded": hasChildren ? item.expanded : undefined,
+                class: "cc-menu__button",
+                disabled: item.disabled,
+                title: collapsed ? item.label : undefined,
+                type: "button",
+                onClick: () => {
+                    if (hasChildren && !collapsed)
+                        toggle(item.key);
+                    select(item.key, item);
+                },
+            }, [
+                icon
+                    ? h("span", { class: "cc-menu__icon", "aria-hidden": "true" }, icon)
+                    : null,
+                h("span", { class: "cc-menu__label" }, item.label),
+                hasChildren ? classIcon("chevronDown", "cc-menu__arrow") : null,
+            ]),
+            hasChildren
+                ? h(ClassHeightTransition, {
+                    className: "cc-height-transition cc-menu__transition",
+                    contentClass: "cc-height-transition__content cc-menu__transition-content",
+                    duration: 180,
+                    expanded: !collapsed && item.expanded,
+                    mode: "grid",
+                }, () => h("ul", { class: "cc-menu__list cc-menu__list--child" }, renderVueMenuItems(item.children, collapsed, slots, toggle, select)))
+                : null,
+        ]);
+    });
+}
+const ClassMenu = /*#__PURE__*/ defineComponent({
+    name: "ClassMenu",
+    props: {
+        activeKey: String,
+        className: { type: String, default: "cc-menu" },
+        collapsed: Boolean,
+        collapsible: { type: Boolean, default: true },
+        defaultExpandedKeys: {
+            type: Array,
+            default: () => [],
+        },
+        items: { type: Array, default: () => [] },
+    },
+    emits: ["collapsed-change", "select", "update:activeKey", "update:collapsed"],
+    setup(props, { attrs, emit, slots }) {
+        const controller = new MenuController({
+            activeKey: props.activeKey,
+            collapsed: props.collapsed,
+            defaultExpandedKeys: props.defaultExpandedKeys,
+            items: props.items,
+        });
+        const state = ref(controller.getState());
+        watch(() => [
+            props.activeKey,
+            props.collapsed,
+            props.defaultExpandedKeys,
+            props.items,
+        ], () => {
+            state.value = controller.update({
+                activeKey: props.activeKey,
+                collapsed: props.collapsed,
+                defaultExpandedKeys: props.defaultExpandedKeys,
+                items: props.items,
+            });
+        }, { deep: true });
+        const toggle = (key) => {
+            state.value = controller.toggleExpanded(key);
+        };
+        const select = (key, item) => {
+            state.value = controller.activate(key);
+            emit("update:activeKey", key);
+            emit("select", key, item);
+        };
+        const toggleCollapsed = () => {
+            state.value = controller.toggleCollapsed();
+            emit("update:collapsed", state.value.collapsed);
+            emit("collapsed-change", state.value.collapsed);
+        };
+        return () => h("nav", {
+            ...attrs,
+            class: props.className,
+            "data-collapsed": state.value.collapsed,
+            "data-collapsible": props.collapsible,
+        }, [
+            props.collapsible
+                ? h("button", {
+                    "aria-label": state.value.collapsed ? "展开菜单" : "收起菜单",
+                    class: "cc-menu__collapse",
+                    type: "button",
+                    onClick: toggleCollapsed,
+                }, classIcon(state.value.collapsed ? "chevronRight" : "chevronLeft"))
+                : null,
+            h("ul", { class: "cc-menu__list" }, renderVueMenuItems(state.value.items, state.value.collapsed, slots, toggle, select)),
+        ]);
+    },
+});
 const ClassPagination = /*#__PURE__*/ defineComponent({
     name: "ClassPagination",
     props: {
@@ -8737,6 +9414,7 @@ const ClassPopconfirm = /*#__PURE__*/ defineComponent({
         },
         closeOnEsc: { type: Boolean, default: true },
         closeOnOutsideClick: { type: Boolean, default: true },
+        portal: { type: Boolean, default: true },
     },
     emits: ["confirm"],
     setup(props, { emit, slots }) {
@@ -8746,8 +9424,23 @@ const ClassPopconfirm = /*#__PURE__*/ defineComponent({
         const visible = ref(false);
         const phase = ref("exit");
         const safePlacement = ref(props.placement);
+        const anchorStyle = ref({
+            height: 0,
+            left: -9999,
+            top: -9999,
+            width: 0,
+        });
         let exitTimer;
         const updatePlacement = () => {
+            if (rootRef.value) {
+                const rect = rootRef.value.getBoundingClientRect();
+                anchorStyle.value = {
+                    height: rect.height,
+                    left: rect.left,
+                    top: rect.top,
+                    width: rect.width,
+                };
+            }
             if (!props.autoAdjust || !rootRef.value || !panelRef.value) {
                 safePlacement.value = props.placement;
                 return;
@@ -8777,7 +9470,8 @@ const ClassPopconfirm = /*#__PURE__*/ defineComponent({
         };
         const closeOnOutside = (event) => {
             if (!props.closeOnOutsideClick ||
-                rootRef.value?.contains(event.target))
+                rootRef.value?.contains(event.target) ||
+                panelRef.value?.contains(event.target))
                 return;
             hide();
         };
@@ -8804,34 +9498,58 @@ const ClassPopconfirm = /*#__PURE__*/ defineComponent({
         watch(() => props.placement, updatePlacement);
         return () => {
             const motion = resolveAnimation(props.animation, "scale");
-            return h("span", {
-                class: ["cc-popconfirm", `cc-popconfirm--${safePlacement.value}`],
+            const rootClass = [
+                "cc-popconfirm",
+                `cc-popconfirm--${safePlacement.value}`,
+            ];
+            const panelNode = visible.value
+                ? h("span", {
+                    class: "cc-popconfirm__panel",
+                    "data-state": phase.value,
+                    ref: panelRef,
+                    role: "dialog",
+                }, [
+                    h("span", null, props.content),
+                    h("span", { class: "cc-popconfirm__actions" }, [
+                        h("button", { type: "button", onClick: hide }, props.cancelText),
+                        h("button", {
+                            type: "button",
+                            onClick: () => {
+                                emit("confirm");
+                                hide();
+                            },
+                        }, props.confirmText),
+                    ]),
+                ])
+                : null;
+            const rootNode = h("span", {
+                class: rootClass,
                 "data-animation": motion.name,
                 ref: rootRef,
                 style: animationStyle(motion),
             }, [
                 h("span", { onClick: show }, slots.default?.()),
-                visible.value
-                    ? h("span", {
-                        class: "cc-popconfirm__panel",
-                        "data-state": phase.value,
-                        ref: panelRef,
-                        role: "dialog",
-                    }, [
-                        h("span", null, props.content),
-                        h("span", { class: "cc-popconfirm__actions" }, [
-                            h("button", { type: "button", onClick: hide }, props.cancelText),
-                            h("button", {
-                                type: "button",
-                                onClick: () => {
-                                    emit("confirm");
-                                    hide();
-                                },
-                            }, props.confirmText),
-                        ]),
-                    ])
-                    : null,
+                props.portal ? null : panelNode,
             ]);
+            if (!props.portal)
+                return rootNode;
+            const portalNode = visible.value
+                ? h("span", {
+                    class: [...rootClass, "cc-popconfirm--portal"],
+                    "data-animation": motion.name,
+                    style: {
+                        ...animationStyle(motion),
+                        height: `${anchorStyle.value.height}px`,
+                        left: `${anchorStyle.value.left}px`,
+                        top: `${anchorStyle.value.top}px`,
+                        width: `${anchorStyle.value.width}px`,
+                    },
+                }, [panelNode])
+                : null;
+            return [
+                rootNode,
+                portalNode ? h(Teleport, { to: "body" }, portalNode) : null,
+            ];
         };
     },
 });
@@ -9380,9 +10098,7 @@ const ClassPopup = /*#__PURE__*/ defineComponent({
                 ]),
             ]);
             return rendered.value
-                ? props.container
-                    ? h(Teleport, { to: props.container }, popupNode)
-                    : popupNode
+                ? h(Teleport, { to: props.container ?? "body" }, popupNode)
                 : null;
         };
     },
@@ -9419,6 +10135,10 @@ const ClassTooltip = /*#__PURE__*/ defineComponent({
             type: Boolean,
             default: true,
         },
+        portal: {
+            type: Boolean,
+            default: true,
+        },
         className: String,
     },
     setup(props, { attrs, slots }) {
@@ -9428,7 +10148,22 @@ const ClassTooltip = /*#__PURE__*/ defineComponent({
         const controller = new TooltipController();
         const open = ref(controller.isOpen());
         const safePlacement = ref(props.placement);
+        const anchorStyle = ref({
+            height: 0,
+            left: -9999,
+            top: -9999,
+            width: 0,
+        });
         const updatePlacement = () => {
+            if (rootRef.value) {
+                const rect = rootRef.value.getBoundingClientRect();
+                anchorStyle.value = {
+                    height: rect.height,
+                    left: rect.left,
+                    top: rect.top,
+                    width: rect.width,
+                };
+            }
             if (!props.autoAdjust || !rootRef.value || !contentRef.value) {
                 safePlacement.value = props.placement;
                 return;
@@ -9446,7 +10181,8 @@ const ClassTooltip = /*#__PURE__*/ defineComponent({
                 return;
             const handlePointerDown = (event) => {
                 if (!props.closeOnOutsideClick ||
-                    rootRef.value?.contains(event.target))
+                    rootRef.value?.contains(event.target) ||
+                    contentRef.value?.contains(event.target))
                     return;
                 controller.close();
             };
@@ -9472,7 +10208,6 @@ const ClassTooltip = /*#__PURE__*/ defineComponent({
         });
         watch(() => props.placement, () => updatePlacement());
         return () => {
-            const motion = resolveAnimation(props.animation, "fade");
             const openEvents = props.trigger === "click"
                 ? {
                     onClick: () => {
@@ -9493,29 +10228,49 @@ const ClassTooltip = /*#__PURE__*/ defineComponent({
                         controller.close();
                     },
                 };
-            return h("span", {
+            const motion = resolveAnimation(props.animation, "fade");
+            const tooltipClass = [
+                "cc-tooltip",
+                `cc-tooltip--${safePlacement.value}`,
+                props.className,
+            ];
+            const tooltipContent = h("span", {
+                class: "cc-tooltip__content",
+                id: contentId,
+                ref: contentRef,
+                role: "tooltip",
+            }, props.content);
+            const rootNode = h("span", {
                 ...attrs,
                 ...openEvents,
                 "aria-describedby": open.value ? contentId : undefined,
-                class: [
-                    "cc-tooltip",
-                    `cc-tooltip--${safePlacement.value}`,
-                    props.className,
-                ],
+                class: tooltipClass,
                 "data-animation": motion.name,
                 "data-open": open.value,
                 ref: rootRef,
                 style: animationStyle(motion),
                 tabindex: props.trigger === "click" ? 0 : undefined,
-            }, [
-                slots.default?.(),
-                h("span", {
-                    class: "cc-tooltip__content",
-                    id: contentId,
-                    ref: contentRef,
-                    role: "tooltip",
-                }, props.content),
-            ]);
+            }, [slots.default?.(), props.portal ? null : tooltipContent]);
+            if (!props.portal)
+                return rootNode;
+            const portalNode = open.value || anchorStyle.value.left > -9999
+                ? h("span", {
+                    class: [...tooltipClass, "cc-tooltip--portal"],
+                    "data-animation": motion.name,
+                    "data-open": open.value,
+                    style: {
+                        ...animationStyle(motion),
+                        height: `${anchorStyle.value.height}px`,
+                        left: `${anchorStyle.value.left}px`,
+                        top: `${anchorStyle.value.top}px`,
+                        width: `${anchorStyle.value.width}px`,
+                    },
+                }, [tooltipContent])
+                : null;
+            return [
+                rootNode,
+                portalNode ? h(Teleport, { to: "body" }, portalNode) : null,
+            ];
         };
     },
 });
@@ -9528,6 +10283,10 @@ const ClassToastViewport = /*#__PURE__*/ defineComponent({
             default: undefined,
         },
         manager: Object,
+        maxVisible: {
+            type: Number,
+            default: undefined,
+        },
         position: {
             type: String,
             default: "top-right",
@@ -9538,38 +10297,110 @@ const ClassToastViewport = /*#__PURE__*/ defineComponent({
         },
     },
     setup(props, { attrs, slots }) {
-        const manager = props.manager ?? defaultToastManager;
-        const items = shallowRef(manager.getToasts());
-        const getVisibleItems = (source) => source.filter((item) => item.position === props.position);
-        const renderedItems = shallowRef(getVisibleItems(items.value).map((item) => ({ item, state: "enter" })));
+        const activeManager = shallowRef(props.manager ?? defaultToastManager);
+        const items = shallowRef(activeManager.value.getToasts());
+        const getVisibleItems = (source) => {
+            const positionItems = source.filter((item) => item.position === props.position);
+            const visible = positionItems.slice(Math.max(0, positionItems.length - normalizeToastMaxVisible(props.maxVisible)));
+            return isToastTopPosition(props.position)
+                ? [...visible].reverse()
+                : visible;
+        };
+        const renderedItems = shallowRef(getVisibleItems(items.value).map((item) => ({
+            item,
+            motion: false,
+            state: "enter",
+        })));
+        const toastNodes = new Map();
+        let rects = new Map();
         let timer;
         let frame = 0;
+        let flipFrame = 0;
+        const setToastNode = (id, node) => {
+            if (node instanceof HTMLElement)
+                toastNodes.set(id, node);
+            else
+                toastNodes.delete(id);
+        };
+        const runFlip = async (motion) => {
+            if (flipFrame)
+                cancelAnimationFrame(flipFrame);
+            await nextTick();
+            const previousRects = rects;
+            const nextRects = new Map();
+            const activeIds = new Set(renderedItems.value
+                .filter((entry) => entry.motion && entry.state !== "exit")
+                .map(({ item }) => item.id));
+            toastNodes.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";
+            });
+            flipFrame = requestAnimationFrame(() => {
+                toastNodes.forEach((node, id) => {
+                    if (!nextRects.has(id))
+                        return;
+                    node.style.transition = `transform ${motion.duration}ms ${motion.easing}, opacity ${motion.duration}ms ${motion.easing}, margin ${motion.duration}ms ${motion.easing}`;
+                    node.style.removeProperty("--cc-toast-stack-offset");
+                    window.setTimeout(() => {
+                        node.style.transition = "";
+                        node.style.willChange = "";
+                    }, motion.duration);
+                });
+                flipFrame = 0;
+            });
+            rects = nextRects;
+        };
         const syncRenderedItems = (nextItems) => {
             if (frame)
                 cancelAnimationFrame(frame);
+            const motion = resolveAnimation(props.animation, "slide");
             const currentIds = new Set(renderedItems.value.map(({ item }) => item.id));
             const incomingIds = new Set(nextItems.map((item) => item.id));
+            const incomingById = new Map(nextItems.map((item) => [item.id, item]));
             const enteringIds = nextItems
                 .filter((item) => !currentIds.has(item.id))
                 .map((item) => item.id);
-            const next = nextItems.map((item) => ({
-                item,
-                state: currentIds.has(item.id) ? "enter" : "exit",
+            const retainedOrExiting = renderedItems.value.map(({ item }) => ({
+                item: incomingById.get(item.id) ?? item,
+                motion: !incomingIds.has(item.id),
+                state: incomingIds.has(item.id)
+                    ? "enter"
+                    : "exit",
             }));
-            const exiting = renderedItems.value
-                .filter(({ item }) => !incomingIds.has(item.id))
-                .map(({ item }) => ({ item, state: "exit" }));
-            renderedItems.value = [...next, ...exiting];
+            const entering = nextItems
+                .filter((item) => !currentIds.has(item.id))
+                .map((item) => ({ item, motion: true, state: "prepare" }));
+            renderedItems.value = [...retainedOrExiting, ...entering];
+            void runFlip(motion);
             if (enteringIds.length) {
                 frame = requestAnimationFrame(() => {
                     renderedItems.value = renderedItems.value.map((entry) => enteringIds.includes(entry.item.id)
                         ? { ...entry, state: "enter" }
                         : entry);
                 });
+                const clearMotion = () => {
+                    renderedItems.value = renderedItems.value.map((entry) => enteringIds.includes(entry.item.id) && entry.state === "enter"
+                        ? { ...entry, motion: false }
+                        : entry);
+                };
+                if (!motion.enabled || motion.duration <= 0)
+                    clearMotion();
+                else
+                    setTimeout(clearMotion, motion.duration);
             }
-            if (!exiting.length)
+            if (!retainedOrExiting.some((entry) => entry.state === "exit"))
                 return;
-            const motion = resolveAnimation(props.animation, "slide");
             if (timer)
                 clearTimeout(timer);
             if (!motion.enabled || motion.duration <= 0) {
@@ -9580,37 +10411,57 @@ const ClassToastViewport = /*#__PURE__*/ defineComponent({
                 renderedItems.value = renderedItems.value.filter((entry) => entry.state !== "exit");
             }, motion.duration);
         };
-        const unsubscribe = manager.subscribe((nextItems) => {
-            items.value = nextItems;
-            syncRenderedItems(getVisibleItems(nextItems));
+        let unsubscribe = () => { };
+        const subscribeManager = (nextManager) => {
+            unsubscribe();
+            activeManager.value = nextManager;
+            items.value = nextManager.getToasts();
+            syncRenderedItems(getVisibleItems(items.value));
+            unsubscribe = nextManager.subscribe((nextItems) => {
+                items.value = nextItems;
+                syncRenderedItems(getVisibleItems(nextItems));
+            });
+        };
+        subscribeManager(activeManager.value);
+        watch(() => props.manager, (nextManager) => {
+            subscribeManager(nextManager ?? defaultToastManager);
         });
-        watch(() => props.position, () => syncRenderedItems(getVisibleItems(items.value)));
+        watch(() => [props.position, props.maxVisible], () => syncRenderedItems(getVisibleItems(items.value)));
         onBeforeUnmount(() => {
             if (timer)
                 clearTimeout(timer);
             if (frame)
                 cancelAnimationFrame(frame);
+            if (flipFrame)
+                cancelAnimationFrame(flipFrame);
             unsubscribe();
         });
         return () => {
             const motion = resolveAnimation(props.animation, "slide");
-            return h("div", {
+            const viewportNode = h("div", {
                 ...attrs,
                 "aria-live": "polite",
                 class: [props.className, `cc-toast-viewport--${props.position}`],
                 role: "status",
                 style: animationStyle(motion),
-            }, renderedItems.value.map(({ item, state }) => slots.default
+            }, renderedItems.value.map(({ item, motion: isMotionActive, state }, index) => slots.default
                 ? slots.default({
                     item,
-                    dismiss: () => manager.dismiss(item.id),
+                    dismiss: () => activeManager.value.dismiss(item.id),
                     state,
                 })
                 : h("article", {
                     class: `cc-toast cc-toast--${item.tone}`,
                     "data-animation": motion.name,
+                    "data-motion": isMotionActive ? "true" : "false",
                     "data-state": state,
                     key: item.id,
+                    style: {
+                        "--cc-toast-stack-index": index,
+                    },
+                    ref: (node) => {
+                        setToastNode(item.id, node instanceof Element ? node : null);
+                    },
                 }, [
                     item.title
                         ? h("strong", { class: "cc-toast__title" }, item.title)
@@ -9620,9 +10471,10 @@ const ClassToastViewport = /*#__PURE__*/ defineComponent({
                         "aria-label": "Dismiss toast",
                         class: "cc-toast__close",
                         type: "button",
-                        onClick: () => manager.dismiss(item.id),
-                    }, "x"),
+                        onClick: () => activeManager.value.dismiss(item.id),
+                    }, classIcon("x")),
                 ])));
+            return h(Teleport, { to: "body" }, viewportNode);
         };
     },
 });
@@ -11116,5 +11968,5 @@ const ClassLiveRoom = /*#__PURE__*/ defineComponent({
     },
 });
 
-export { ClassAffix, ClassBacktop, ClassBadge, ClassBarcode, ClassBreadcrumb, ClassButton, ClassCalendar, ClassCanvasEditor, ClassCanvasImage, ClassChatVirtualList, ClassCheckbox, ClassChecked, ClassColorPicker, ClassComicReader, ClassConfigProvider, ClassConfigTable, ClassCountdown, ClassDanmaku, ClassDatePicker, ClassDateRangePicker, ClassDesignEffect, ClassDragDropBoard, ClassDraggable, ClassEllipsisText, ClassEmpty, ClassField, ClassFilePreview, ClassFloatingBall, ClassForm, ClassGradientText, ClassInput, ClassLazyImage, ClassLiveRoom, ClassLoading, ClassMarquee, ClassMasonryVirtualList, ClassModal, ClassMultiColumnPicker, ClassNovelReader, ClassNumberInput, ClassPagination, ClassPasswordInput, ClassPopconfirm, ClassPopup, ClassProgressBar, ClassQRCode, ClassRadioGroup, ClassRating, ClassRollingNumber, ClassSelect, ClassSignature, ClassSkeleton, ClassSlideCaptcha, ClassSwiper, ClassSwitch, ClassTable, ClassTabs, ClassTag, ClassTextarea, ClassTiltCard, ClassTimeline, ClassToastViewport, ClassTooltip, ClassTypewriterText, ClassUpload, ClassVerificationCode, ClassVideoDetailTransition, ClassVideoPlayer, ClassVirtualList, ClassVirtualSelect, ClassVirtualTable, defaultToastManager, useField, useForm, useFormState };
+export { ClassAffix, ClassBacktop, ClassBadge, ClassBarcode, ClassBreadcrumb, ClassButton, ClassCalendar, ClassCanvasEditor, ClassCanvasImage, ClassChatTextarea, ClassChatVirtualList, ClassCheckbox, ClassChecked, ClassCodePreview, ClassColorPicker, ClassComicReader, ClassConfigProvider, ClassConfigTable, ClassCountdown, ClassDanmaku, ClassDatePicker, ClassDateRangePicker, ClassDesignEffect, ClassDragDropBoard, ClassDraggable, ClassEllipsisText, ClassEmpty, ClassField, ClassFilePreview, ClassFloatingBall, ClassForm, ClassGradientText, ClassHeightTransition, ClassInput, ClassLazyImage, ClassLiveRoom, ClassLoading, ClassMarquee, ClassMasonryVirtualList, ClassMenu, ClassModal, ClassMultiColumnPicker, ClassNovelReader, ClassNumberInput, ClassOrbitalSphere, ClassPagination, ClassPasswordInput, ClassPopconfirm, ClassPopup, ClassProgressBar, ClassQRCode, ClassRadioGroup, ClassRating, ClassRollingNumber, ClassSelect, ClassSignature, ClassSkeleton, ClassSlideCaptcha, ClassSwiper, ClassSwitch, ClassTable, ClassTabs, ClassTag, ClassTextarea, ClassTiltCard, ClassTimeline, ClassToastViewport, ClassTooltip, ClassTypewriterText, ClassUpload, ClassVerificationCode, ClassVideoDetailTransition, ClassVideoPlayer, ClassVirtualList, ClassVirtualSelect, ClassVirtualTable, defaultToastManager, useField, useForm, useFormState };
 //# sourceMappingURL=index.js.map