@class-kit/vue 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -107,6 +107,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])",
@@ -727,7 +735,7 @@ const ClassColorPicker = /*#__PURE__*/ vue.defineComponent({
         });
         return () => {
             const interactivity = resolveFieldInteractivity(formInteractivity, props.disabled, props.readOnly ?? props.readonly);
-            const controller = new core.ColorPickerController(String(field.value.value || "#7c3aed"));
+            const controller = new core.ColorPickerController(String(field.value.value || "#1d2129"));
             const state = controller.getState();
             const commit = (value) => {
                 if (interactivity.disabled || interactivity.readOnly)
@@ -1466,6 +1474,152 @@ const ClassTextarea = /*#__PURE__*/ vue.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__*/ vue.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: () => core.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 = vue.ref(null);
+        const controller = new core.ChatTextareaController({
+            maxRows: props.maxRows,
+            minRows: props.minRows,
+            value: props.modelValue ?? props.value ?? props.defaultValue,
+        });
+        const state = vue.ref(controller.getState());
+        const controlled = vue.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,
+            });
+            vue.nextTick(resize);
+        };
+        vue.watch(() => [props.maxRows, props.minRows, props.modelValue, props.value], syncState);
+        vue.onMounted(() => {
+            resize();
+            if (typeof ResizeObserver === "undefined" || !textareaRef.value)
+                return;
+            resizeObserver = new ResizeObserver(resize);
+            resizeObserver.observe(textareaRef.value);
+        });
+        vue.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);
+            vue.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 vue.h("div", {
+                class: props.className,
+                "data-disabled": Boolean(props.disabled),
+                "data-readonly": Boolean(props.readOnly || props.readonly),
+                "data-scrollable": currentValue.length > 0,
+            }, [
+                vue.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
+                    ? vue.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__*/ vue.defineComponent({
     name: "ClassVerificationCode",
     inheritAttrs: false,
@@ -3773,6 +3927,367 @@ const ClassTiltCard = /*#__PURE__*/ vue.defineComponent({
         ]);
     },
 });
+const ClassOrbitalSphere = /*#__PURE__*/ vue.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 core.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 vue.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],
+            }, [
+                vue.h("span", { "aria-hidden": "true", class: props.shellClass }),
+                vue.h("div", { class: props.stageClass }, state.items.map((item) => vue.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",
+                }, [
+                    vue.h("span", { class: props.itemContentClass }, slots.item?.({ index: item.index, item }) ?? item.content),
+                ]))),
+            ]);
+        };
+    },
+});
+const ClassHeightTransition = /*#__PURE__*/ vue.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 = vue.ref(null);
+        const height = vue.ref(0);
+        const controller = new core.HeightTransitionController({
+            duration: props.duration,
+            easing: props.easing,
+            expanded: props.expanded,
+            mode: props.mode,
+        });
+        const state = vue.ref(controller.getState());
+        let observer;
+        const measure = () => {
+            height.value = contentRef.value?.scrollHeight ?? 0;
+        };
+        vue.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,
+            });
+            vue.nextTick(measure);
+        }, { immediate: true });
+        vue.onMounted(() => {
+            measure();
+            if (typeof ResizeObserver !== "undefined" && contentRef.value) {
+                observer = new ResizeObserver(measure);
+                observer.observe(contentRef.value);
+            }
+        });
+        vue.onBeforeUnmount(() => observer?.disconnect());
+        return () => vue.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`,
+                },
+            ],
+        }, [
+            vue.h("div", { ref: contentRef, class: props.contentClass }, slots.default?.()),
+        ]);
+    },
+});
+const ClassCodePreview = /*#__PURE__*/ vue.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 = vue.ref(null);
+        const panelRef = vue.ref(null);
+        const panelStyle = vue.ref({});
+        const controller = new core.CodePreviewController({
+            code: props.code,
+            defaultExpanded: props.defaultExpanded,
+            language: props.language,
+            placement: props.placement,
+            title: props.title,
+        });
+        const state = vue.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);
+        };
+        vue.watch(() => [props.code, props.language, props.placement, props.title], () => {
+            sync();
+            vue.nextTick(resolvePlacement);
+        });
+        vue.watch(() => state.value.expanded, () => vue.nextTick(resolvePlacement));
+        vue.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);
+            });
+        });
+        vue.onMounted(() => {
+            resolvePlacement();
+            window.addEventListener("resize", resolvePlacementFromViewport);
+            window.addEventListener("scroll", resolvePlacementFromViewport, true);
+        });
+        vue.onBeforeUnmount(() => {
+            window.clearTimeout(resetTimer);
+            window.removeEventListener("resize", resolvePlacementFromViewport);
+            window.removeEventListener("scroll", resolvePlacementFromViewport, true);
+        });
+        return () => {
+            const panel = vue.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,
+            }, [
+                vue.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: () => vue.h("pre", null, [vue.h("code", null, state.value.code)]),
+                }),
+            ]);
+            return vue.h("div", {
+                ...attrs,
+                ref: rootRef,
+                class: props.className,
+                "data-expanded": state.value.expanded,
+                "data-placement": state.value.resolvedPlacement,
+                "data-strategy": props.strategy,
+            }, [
+                vue.h("div", { class: "cc-code-preview__bar" }, [
+                    vue.h("div", { class: "cc-code-preview__meta" }, [
+                        vue.h("span", { class: "cc-code-preview__title" }, [
+                            slots.title?.() ?? props.title,
+                        ]),
+                        vue.h("span", { class: "cc-code-preview__lang" }, state.value.language),
+                    ]),
+                    vue.h("div", { class: "cc-code-preview__actions" }, [
+                        vue.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 ? "收起" : "源码"),
+                        vue.h("button", { type: "button", onClick: copy }, state.value.copied ? "已复制" : "复制"),
+                    ]),
+                ]),
+                props.strategy === "fixed"
+                    ? vue.h(vue.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}`);
@@ -5629,7 +6144,7 @@ const ClassSignature = /*#__PURE__*/ vue.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,
@@ -6036,6 +6551,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__*/ vue.defineComponent({
     name: "ClassDragDropBoard",
     inheritAttrs: false,
@@ -6288,6 +6825,7 @@ const ClassDragDropBoard = /*#__PURE__*/ vue.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,
@@ -6343,6 +6881,7 @@ const ClassDragDropBoard = /*#__PURE__*/ vue.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`,
@@ -7705,6 +8244,8 @@ const ClassMasonryVirtualList = /*#__PURE__*/ vue.defineComponent({
         };
     },
 });
+const CHAT_PREPEND_MOMENTUM_LOCK_MS = 420;
+const CHAT_PREPEND_STABILIZE_FRAMES = 24;
 const ClassChatVirtualList = /*#__PURE__*/ vue.defineComponent({
     name: "ClassChatVirtualList",
     inheritAttrs: false,
@@ -7779,7 +8320,7 @@ const ClassChatVirtualList = /*#__PURE__*/ vue.defineComponent({
         },
         topLoadingContent: {
             type: String,
-            default: "正在加载历史消息...",
+            default: "",
         },
         pullUpLoading: {
             type: Boolean,
@@ -7822,6 +8363,7 @@ const ClassChatVirtualList = /*#__PURE__*/ vue.defineComponent({
         let bottomFrame;
         let bottomTimer;
         let prependFrame;
+        let prependStabilizeFrame;
         let prependTimer;
         let topLoadingFallbackTimer;
         let topLoadingMutationPending = false;
@@ -7897,14 +8439,68 @@ const ClassChatVirtualList = /*#__PURE__*/ vue.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);
+                prependStabilizeFrame = undefined;
+            }
             if (prependTimer !== undefined) {
                 window.clearTimeout(prependTimer);
                 prependTimer = undefined;
             }
             maybeReleaseTopLoadingLock();
         };
+        const applyPendingPrependAnchor = () => {
+            const pendingAnchor = pendingPrependAnchor.value;
+            const viewport = viewportRef.value;
+            if (!pendingAnchor || !viewport)
+                return false;
+            const keys = getKeys();
+            const anchorIndex = keys.findIndex((itemKey) => Object.is(itemKey, pendingAnchor.anchorKey));
+            const nextScrollTop = anchorIndex >= 0
+                ? Math.max(0, listController.getItem(anchorIndex).start -
+                    pendingAnchor.anchorOffset)
+                : pendingAnchor.targetScrollTop;
+            viewport.scrollTop = nextScrollTop;
+            scrollOffset.value = nextScrollTop;
+            previousScrollTop.value = nextScrollTop;
+            return true;
+        };
+        const schedulePrependStabilization = () => {
+            if (prependStabilizeFrame !== undefined) {
+                window.cancelAnimationFrame(prependStabilizeFrame);
+            }
+            let remainingFrames = CHAT_PREPEND_STABILIZE_FRAMES;
+            const stabilize = () => {
+                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);
+        };
         const scheduleTopLoadingFallback = () => {
             if (topLoadingFallbackTimer !== undefined) {
                 window.clearTimeout(topLoadingFallbackTimer);
@@ -8016,8 +8612,12 @@ const ClassChatVirtualList = /*#__PURE__*/ vue.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;
+                    if (pendingPrependAnchor.value)
+                        schedulePrependStabilization();
                     if (prependFrame !== undefined)
                         window.cancelAnimationFrame(prependFrame);
                     if (prependTimer !== undefined)
@@ -8139,6 +8739,8 @@ const ClassChatVirtualList = /*#__PURE__*/ vue.defineComponent({
                 window.clearTimeout(bottomTimer);
             if (prependFrame !== undefined)
                 window.cancelAnimationFrame(prependFrame);
+            if (prependStabilizeFrame !== undefined)
+                window.cancelAnimationFrame(prependStabilizeFrame);
             if (prependTimer !== undefined)
                 window.clearTimeout(prependTimer);
             if (topLoadingFallbackTimer !== undefined)
@@ -8152,6 +8754,12 @@ const ClassChatVirtualList = /*#__PURE__*/ vue.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);
@@ -8165,17 +8773,19 @@ const ClassChatVirtualList = /*#__PURE__*/ vue.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);
                             const nextItem = listController.getItem(index);
                             const delta = nextItem.size - oldItem.size;
-                            viewport.scrollTop = Math.max(0, index < anchorIndex && delta !== 0
+                            const nextScrollTop = Math.max(0, index < anchorIndex && delta !== 0
                                 ? oldScrollTop + delta
                                 : anchorItem.start - pendingAnchor.anchorOffset);
-                            scrollOffset.value = viewport.scrollTop;
-                            previousScrollTop.value = viewport.scrollTop;
+                            pendingAnchor.targetScrollTop = nextScrollTop;
+                            viewport.scrollTop = nextScrollTop;
+                            scrollOffset.value = nextScrollTop;
+                            previousScrollTop.value = nextScrollTop;
+                            schedulePrependStabilization();
                         }
                         if (pendingAnchor.measuredKeys.size >= pendingAnchor.prependKeys.size) {
                             clearPendingPrependAnchor();
@@ -8213,18 +8823,24 @@ const ClassChatVirtualList = /*#__PURE__*/ vue.defineComponent({
                 "data-top-loading": topLoadingPending.value ? "true" : undefined,
                 style: { "--cc-chat-virtual-list-height": resolvedHeight },
             }, [
-                vue.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 }) ??
+                    vue.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,
+                    }),
                 vue.h("div", {
                     class: props.viewportClass,
                     "data-top-loading": topLoadingPending.value ? "true" : undefined,
                     ref: viewportRef,
                     onScroll: (event) => {
+                        if (pendingPrependAnchor.value) {
+                            const stabilized = applyPendingPrependAnchor();
+                            if (stabilized)
+                                return;
+                        }
                         const nextScrollTop = event.currentTarget
                             .scrollTop;
                         const viewport = event.currentTarget;
@@ -8606,6 +9222,117 @@ const ClassBreadcrumb = /*#__PURE__*/ vue.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 vue.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,
+        }, [
+            vue.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
+                    ? vue.h("span", { class: "cc-menu__icon", "aria-hidden": "true" }, icon)
+                    : null,
+                vue.h("span", { class: "cc-menu__label" }, item.label),
+                hasChildren ? classIcon("chevronDown", "cc-menu__arrow") : null,
+            ]),
+            hasChildren
+                ? vue.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",
+                }, () => vue.h("ul", { class: "cc-menu__list cc-menu__list--child" }, renderVueMenuItems(item.children, collapsed, slots, toggle, select)))
+                : null,
+        ]);
+    });
+}
+const ClassMenu = /*#__PURE__*/ vue.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 core.MenuController({
+            activeKey: props.activeKey,
+            collapsed: props.collapsed,
+            defaultExpandedKeys: props.defaultExpandedKeys,
+            items: props.items,
+        });
+        const state = vue.ref(controller.getState());
+        vue.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 () => vue.h("nav", {
+            ...attrs,
+            class: props.className,
+            "data-collapsed": state.value.collapsed,
+            "data-collapsible": props.collapsible,
+        }, [
+            props.collapsible
+                ? vue.h("button", {
+                    "aria-label": state.value.collapsed ? "展开菜单" : "收起菜单",
+                    class: "cc-menu__collapse",
+                    type: "button",
+                    onClick: toggleCollapsed,
+                }, classIcon(state.value.collapsed ? "chevronRight" : "chevronLeft"))
+                : null,
+            vue.h("ul", { class: "cc-menu__list" }, renderVueMenuItems(state.value.items, state.value.collapsed, slots, toggle, select)),
+        ]);
+    },
+});
 const ClassPagination = /*#__PURE__*/ vue.defineComponent({
     name: "ClassPagination",
     props: {
@@ -8688,6 +9415,7 @@ const ClassPopconfirm = /*#__PURE__*/ vue.defineComponent({
         },
         closeOnEsc: { type: Boolean, default: true },
         closeOnOutsideClick: { type: Boolean, default: true },
+        portal: { type: Boolean, default: true },
     },
     emits: ["confirm"],
     setup(props, { emit, slots }) {
@@ -8697,8 +9425,23 @@ const ClassPopconfirm = /*#__PURE__*/ vue.defineComponent({
         const visible = vue.ref(false);
         const phase = vue.ref("exit");
         const safePlacement = vue.ref(props.placement);
+        const anchorStyle = vue.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;
@@ -8728,7 +9471,8 @@ const ClassPopconfirm = /*#__PURE__*/ vue.defineComponent({
         };
         const closeOnOutside = (event) => {
             if (!props.closeOnOutsideClick ||
-                rootRef.value?.contains(event.target))
+                rootRef.value?.contains(event.target) ||
+                panelRef.value?.contains(event.target))
                 return;
             hide();
         };
@@ -8755,34 +9499,58 @@ const ClassPopconfirm = /*#__PURE__*/ vue.defineComponent({
         vue.watch(() => props.placement, updatePlacement);
         return () => {
             const motion = resolveAnimation(props.animation, "scale");
-            return vue.h("span", {
-                class: ["cc-popconfirm", `cc-popconfirm--${safePlacement.value}`],
+            const rootClass = [
+                "cc-popconfirm",
+                `cc-popconfirm--${safePlacement.value}`,
+            ];
+            const panelNode = visible.value
+                ? vue.h("span", {
+                    class: "cc-popconfirm__panel",
+                    "data-state": phase.value,
+                    ref: panelRef,
+                    role: "dialog",
+                }, [
+                    vue.h("span", null, props.content),
+                    vue.h("span", { class: "cc-popconfirm__actions" }, [
+                        vue.h("button", { type: "button", onClick: hide }, props.cancelText),
+                        vue.h("button", {
+                            type: "button",
+                            onClick: () => {
+                                emit("confirm");
+                                hide();
+                            },
+                        }, props.confirmText),
+                    ]),
+                ])
+                : null;
+            const rootNode = vue.h("span", {
+                class: rootClass,
                 "data-animation": motion.name,
                 ref: rootRef,
                 style: animationStyle(motion),
             }, [
                 vue.h("span", { onClick: show }, slots.default?.()),
-                visible.value
-                    ? vue.h("span", {
-                        class: "cc-popconfirm__panel",
-                        "data-state": phase.value,
-                        ref: panelRef,
-                        role: "dialog",
-                    }, [
-                        vue.h("span", null, props.content),
-                        vue.h("span", { class: "cc-popconfirm__actions" }, [
-                            vue.h("button", { type: "button", onClick: hide }, props.cancelText),
-                            vue.h("button", {
-                                type: "button",
-                                onClick: () => {
-                                    emit("confirm");
-                                    hide();
-                                },
-                            }, props.confirmText),
-                        ]),
-                    ])
-                    : null,
+                props.portal ? null : panelNode,
             ]);
+            if (!props.portal)
+                return rootNode;
+            const portalNode = visible.value
+                ? vue.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 ? vue.h(vue.Teleport, { to: "body" }, portalNode) : null,
+            ];
         };
     },
 });
@@ -9331,9 +10099,7 @@ const ClassPopup = /*#__PURE__*/ vue.defineComponent({
                 ]),
             ]);
             return rendered.value
-                ? props.container
-                    ? vue.h(vue.Teleport, { to: props.container }, popupNode)
-                    : popupNode
+                ? vue.h(vue.Teleport, { to: props.container ?? "body" }, popupNode)
                 : null;
         };
     },
@@ -9370,6 +10136,10 @@ const ClassTooltip = /*#__PURE__*/ vue.defineComponent({
             type: Boolean,
             default: true,
         },
+        portal: {
+            type: Boolean,
+            default: true,
+        },
         className: String,
     },
     setup(props, { attrs, slots }) {
@@ -9379,7 +10149,22 @@ const ClassTooltip = /*#__PURE__*/ vue.defineComponent({
         const controller = new core.TooltipController();
         const open = vue.ref(controller.isOpen());
         const safePlacement = vue.ref(props.placement);
+        const anchorStyle = vue.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;
@@ -9397,7 +10182,8 @@ const ClassTooltip = /*#__PURE__*/ vue.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();
             };
@@ -9423,7 +10209,6 @@ const ClassTooltip = /*#__PURE__*/ vue.defineComponent({
         });
         vue.watch(() => props.placement, () => updatePlacement());
         return () => {
-            const motion = resolveAnimation(props.animation, "fade");
             const openEvents = props.trigger === "click"
                 ? {
                     onClick: () => {
@@ -9444,29 +10229,49 @@ const ClassTooltip = /*#__PURE__*/ vue.defineComponent({
                         controller.close();
                     },
                 };
-            return vue.h("span", {
+            const motion = resolveAnimation(props.animation, "fade");
+            const tooltipClass = [
+                "cc-tooltip",
+                `cc-tooltip--${safePlacement.value}`,
+                props.className,
+            ];
+            const tooltipContent = vue.h("span", {
+                class: "cc-tooltip__content",
+                id: contentId,
+                ref: contentRef,
+                role: "tooltip",
+            }, props.content);
+            const rootNode = vue.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?.(),
-                vue.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
+                ? vue.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 ? vue.h(vue.Teleport, { to: "body" }, portalNode) : null,
+            ];
         };
     },
 });
@@ -9479,6 +10284,10 @@ const ClassToastViewport = /*#__PURE__*/ vue.defineComponent({
             default: undefined,
         },
         manager: Object,
+        maxVisible: {
+            type: Number,
+            default: undefined,
+        },
         position: {
             type: String,
             default: "top-right",
@@ -9489,38 +10298,110 @@ const ClassToastViewport = /*#__PURE__*/ vue.defineComponent({
         },
     },
     setup(props, { attrs, slots }) {
-        const manager = props.manager ?? defaultToastManager;
-        const items = vue.shallowRef(manager.getToasts());
-        const getVisibleItems = (source) => source.filter((item) => item.position === props.position);
-        const renderedItems = vue.shallowRef(getVisibleItems(items.value).map((item) => ({ item, state: "enter" })));
+        const activeManager = vue.shallowRef(props.manager ?? defaultToastManager);
+        const items = vue.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 = vue.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 vue.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) {
@@ -9531,37 +10412,57 @@ const ClassToastViewport = /*#__PURE__*/ vue.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);
+        vue.watch(() => props.manager, (nextManager) => {
+            subscribeManager(nextManager ?? defaultToastManager);
         });
-        vue.watch(() => props.position, () => syncRenderedItems(getVisibleItems(items.value)));
+        vue.watch(() => [props.position, props.maxVisible], () => syncRenderedItems(getVisibleItems(items.value)));
         vue.onBeforeUnmount(() => {
             if (timer)
                 clearTimeout(timer);
             if (frame)
                 cancelAnimationFrame(frame);
+            if (flipFrame)
+                cancelAnimationFrame(flipFrame);
             unsubscribe();
         });
         return () => {
             const motion = resolveAnimation(props.animation, "slide");
-            return vue.h("div", {
+            const viewportNode = vue.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,
                 })
                 : vue.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
                         ? vue.h("strong", { class: "cc-toast__title" }, item.title)
@@ -9571,9 +10472,10 @@ const ClassToastViewport = /*#__PURE__*/ vue.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 vue.h(vue.Teleport, { to: "body" }, viewportNode);
         };
     },
 });
@@ -11099,6 +12001,10 @@ Object.defineProperty(exports, "ChatVirtualListController", {
     enumerable: true,
     get: function () { return core.ChatVirtualListController; }
 });
+Object.defineProperty(exports, "CodePreviewController", {
+    enumerable: true,
+    get: function () { return core.CodePreviewController; }
+});
 Object.defineProperty(exports, "ColorPickerController", {
     enumerable: true,
     get: function () { return core.ColorPickerController; }
@@ -11155,6 +12061,10 @@ Object.defineProperty(exports, "GradientTextController", {
     enumerable: true,
     get: function () { return core.GradientTextController; }
 });
+Object.defineProperty(exports, "HeightTransitionController", {
+    enumerable: true,
+    get: function () { return core.HeightTransitionController; }
+});
 Object.defineProperty(exports, "LazyImageController", {
     enumerable: true,
     get: function () { return core.LazyImageController; }
@@ -11167,6 +12077,10 @@ Object.defineProperty(exports, "MasonryVirtualListController", {
     enumerable: true,
     get: function () { return core.MasonryVirtualListController; }
 });
+Object.defineProperty(exports, "MenuController", {
+    enumerable: true,
+    get: function () { return core.MenuController; }
+});
 Object.defineProperty(exports, "ModalController", {
     enumerable: true,
     get: function () { return core.ModalController; }
@@ -11179,6 +12093,10 @@ Object.defineProperty(exports, "NovelReaderController", {
     enumerable: true,
     get: function () { return core.NovelReaderController; }
 });
+Object.defineProperty(exports, "OrbitalSphereController", {
+    enumerable: true,
+    get: function () { return core.OrbitalSphereController; }
+});
 Object.defineProperty(exports, "PaginationController", {
     enumerable: true,
     get: function () { return core.PaginationController; }
@@ -11292,9 +12210,11 @@ exports.ClassButton = ClassButton;
 exports.ClassCalendar = ClassCalendar;
 exports.ClassCanvasEditor = ClassCanvasEditor;
 exports.ClassCanvasImage = ClassCanvasImage;
+exports.ClassChatTextarea = ClassChatTextarea;
 exports.ClassChatVirtualList = ClassChatVirtualList;
 exports.ClassCheckbox = ClassCheckbox;
 exports.ClassChecked = ClassChecked;
+exports.ClassCodePreview = ClassCodePreview;
 exports.ClassColorPicker = ClassColorPicker;
 exports.ClassComicReader = ClassComicReader;
 exports.ClassConfigProvider = ClassConfigProvider;
@@ -11313,16 +12233,19 @@ exports.ClassFilePreview = ClassFilePreview;
 exports.ClassFloatingBall = ClassFloatingBall;
 exports.ClassForm = ClassForm;
 exports.ClassGradientText = ClassGradientText;
+exports.ClassHeightTransition = ClassHeightTransition;
 exports.ClassInput = ClassInput;
 exports.ClassLazyImage = ClassLazyImage;
 exports.ClassLiveRoom = ClassLiveRoom;
 exports.ClassLoading = ClassLoading;
 exports.ClassMarquee = ClassMarquee;
 exports.ClassMasonryVirtualList = ClassMasonryVirtualList;
+exports.ClassMenu = ClassMenu;
 exports.ClassModal = ClassModal;
 exports.ClassMultiColumnPicker = ClassMultiColumnPicker;
 exports.ClassNovelReader = ClassNovelReader;
 exports.ClassNumberInput = ClassNumberInput;
+exports.ClassOrbitalSphere = ClassOrbitalSphere;
 exports.ClassPagination = ClassPagination;
 exports.ClassPasswordInput = ClassPasswordInput;
 exports.ClassPopconfirm = ClassPopconfirm;