@astryx-vue/core 0.2.6 → 0.4.0

package/dist/Toast-DwnPjx6j.js

@@ -0,0 +1,685 @@
+import { r as resetLayerScopedContext } from "./scopedProvide-C-Df7c15.js";
+import { n as hasInteractiveAncestor } from "./useClickableContainer-CdGp_Cev.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { r as useLayerConfig } from "./context-M-er0-Rk.js";
+import { i as whenModalSettled, r as useActiveModalOutlet } from "./modalOutlet-CUOcrhIu.js";
+import { n as useTheme, t as _sfc_main$2 } from "./MediaTheme-DlLqYhDy.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, markRaw, normalizeClass, normalizeProps, normalizeStyle, onMounted, onScopeDispose, onUnmounted, openBlock, reactive, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import "../styles/toast.css";
+//#region src/Toast/options.ts
+/** 这条提示会不会自己消失。`error` 默认不消失。 */
+function resolveAutoHide(options) {
+	return options.isAutoHide ?? options.autoClose ?? options.type !== "error";
+}
+/** 自动消失的时长，单位毫秒。 */
+function resolveAutoHideDuration(options) {
+	return options.autoHideDuration ?? options.duration ?? 5e3;
+}
+//#endregion
+//#region src/Toast/useToastGesture.ts
+const DRAG_PROMOTION_SLOP = 8;
+const SWIPE_DISMISS_RATIO = .4;
+const FLICK_MIN_DISTANCE = 48;
+const FLICK_VELOCITY = 1.2;
+const VERTICAL_INTENT_RATIO = 1.2;
+const SWIPE_EXIT_DISTANCE = "120%";
+const SWIPE_ACTIVE_FADE_MAX = .4;
+const SWIPE_ACTIVE_SCALE_MAX = .02;
+const SWIPE_EXTRA_TARGET = "[tabindex],[contenteditable]:not([contenteditable=\"false\"])";
+function swipeProgress(travel, surfaceSize) {
+	return Math.min(Math.max(travel / surfaceSize, 0), 1);
+}
+function clearTransientStyles(root) {
+	root.style.removeProperty("transition-duration");
+	root.style.removeProperty("--_toast-swipe-y");
+	root.style.removeProperty("--_toast-swipe-exit-y");
+	root.style.removeProperty("--_toast-swipe-opacity");
+	root.style.removeProperty("--_toast-swipe-scale");
+}
+/** 点在卡片里的按钮、链接或可聚焦控件上时，滑动让给那个控件。 */
+function shouldIgnoreTarget(target, root) {
+	if (!(target instanceof Element) || target === root) return false;
+	if (hasInteractiveAncestor(target, root)) return true;
+	let current = target;
+	while (current != null && current !== root && current !== document.body) {
+		if (current.matches(SWIPE_EXTRA_TARGET)) return true;
+		current = current.parentElement;
+	}
+	return false;
+}
+/**
+* 朝提示所在的那条边滑动把它关掉。
+* 手指和笔才算；鼠标拖动不关。横向滑动和反向滑动都留给页面自己滚。
+* 第二根手指一上来就取消，免得把双指缩放吃掉。
+*/
+function useToastGesture(options) {
+	const rootRef = shallowRef(null);
+	let gesture = null;
+	let detachTouch = null;
+	function resetGesture(shouldResume) {
+		const root = rootRef.value;
+		const state = gesture;
+		gesture = null;
+		if (root) clearTransientStyles(root);
+		if (shouldResume && state?.pausedTimer) options.resumeTimer();
+	}
+	function beginGesture(point, target) {
+		const root = rootRef.value;
+		if (!root || !options.enabled() || gesture != null || shouldIgnoreTarget(target, root)) return false;
+		const pausedTimer = options.canPauseTimer() && !options.isTimerPaused();
+		if (pausedTimer) options.pauseTimer();
+		const surfaceSize = Math.max(root.getBoundingClientRect().height, 1);
+		gesture = {
+			source: point.source,
+			pointerId: point.pointerId,
+			startX: point.clientX,
+			startY: point.clientY,
+			startTime: Date.now(),
+			direction: options.direction(),
+			intent: "pending",
+			pausedTimer,
+			surfaceSize,
+			dismissThreshold: Math.max(surfaceSize * SWIPE_DISMISS_RATIO, FLICK_MIN_DISTANCE)
+		};
+		return true;
+	}
+	function moveGesture(point, preventDefault, releaseCapture) {
+		const state = gesture;
+		const root = rootRef.value;
+		if (!state || !root || point.source !== state.source || point.pointerId !== state.pointerId) return;
+		const deltaX = point.clientX - state.startX;
+		const deltaY = point.clientY - state.startY;
+		const absX = Math.abs(deltaX);
+		const absY = Math.abs(deltaY);
+		if (state.intent === "pending") {
+			if (absX > DRAG_PROMOTION_SLOP && absX > absY) {
+				releaseCapture?.();
+				resetGesture(true);
+				return;
+			}
+			if (absY <= DRAG_PROMOTION_SLOP || absY <= absX * VERTICAL_INTENT_RATIO) return;
+			state.intent = deltaY * state.direction > 0 ? "vertical" : "opposite";
+			if (state.intent === "opposite") {
+				releaseCapture?.();
+				resetGesture(true);
+				return;
+			}
+			root.style.setProperty("transition-duration", "0s");
+		}
+		preventDefault();
+		const travel = Math.max(0, deltaY * state.direction);
+		const progress = swipeProgress(travel, state.surfaceSize);
+		root.style.setProperty("--_toast-swipe-y", `${travel * state.direction}px`);
+		root.style.setProperty("--_toast-swipe-opacity", (1 - progress * SWIPE_ACTIVE_FADE_MAX).toFixed(3));
+		root.style.setProperty("--_toast-swipe-scale", (1 - progress * SWIPE_ACTIVE_SCALE_MAX).toFixed(3));
+	}
+	function endGesture(point) {
+		const state = gesture;
+		const root = rootRef.value;
+		if (!state || !root || point.source !== state.source || point.pointerId !== state.pointerId) return;
+		const travel = Math.max(0, (point.clientY - state.startY) * state.direction);
+		const elapsed = Math.max(1, Date.now() - state.startTime);
+		const isDismissed = state.intent === "vertical" && (travel >= state.dismissThreshold || travel >= FLICK_MIN_DISTANCE && travel / elapsed > FLICK_VELOCITY);
+		gesture = null;
+		root.style.removeProperty("transition-duration");
+		if (isDismissed) {
+			clearTransientStyles(root);
+			root.style.setProperty("--_toast-swipe-exit-y", state.direction === 1 ? SWIPE_EXIT_DISTANCE : `calc(-1 * ${SWIPE_EXIT_DISTANCE})`);
+			options.dismiss();
+			return;
+		}
+		clearTransientStyles(root);
+		if (state.pausedTimer) options.resumeTimer();
+	}
+	function onPointerDown(event) {
+		if (event.pointerType !== "pen" || event.button != null && event.button !== 0) return;
+		if (beginGesture({
+			source: "pen",
+			pointerId: event.pointerId,
+			clientX: event.clientX,
+			clientY: event.clientY
+		}, event.target)) rootRef.value?.setPointerCapture?.(event.pointerId);
+	}
+	function onPointerMove(event) {
+		if (event.pointerType !== "pen") return;
+		moveGesture({
+			source: "pen",
+			pointerId: event.pointerId,
+			clientX: event.clientX,
+			clientY: event.clientY
+		}, () => event.preventDefault(), () => rootRef.value?.releasePointerCapture?.(event.pointerId));
+	}
+	function onPointerUp(event) {
+		if (event.pointerType !== "pen") return;
+		rootRef.value?.releasePointerCapture?.(event.pointerId);
+		endGesture({
+			source: "pen",
+			pointerId: event.pointerId,
+			clientX: event.clientX,
+			clientY: event.clientY
+		});
+	}
+	function onPointerCancel(event) {
+		if (gesture?.source === "pen" && gesture.pointerId === event.pointerId) resetGesture(true);
+	}
+	function bindTouch(root) {
+		const point = (touch) => ({
+			source: "touch",
+			pointerId: touch.identifier,
+			clientX: touch.clientX,
+			clientY: touch.clientY
+		});
+		const changedTouch = (event) => {
+			const pointerId = gesture?.source === "touch" ? gesture.pointerId : null;
+			if (pointerId == null) return void 0;
+			return [...event.changedTouches].find((touch) => touch.identifier === pointerId);
+		};
+		const handleTouchStart = (event) => {
+			if (event.touches.length !== 1) {
+				resetGesture(true);
+				return;
+			}
+			const touch = event.changedTouches[0];
+			if (touch != null) beginGesture(point(touch), event.target);
+		};
+		const handleTouchMove = (event) => {
+			if (event.touches.length !== 1) {
+				resetGesture(true);
+				return;
+			}
+			const touch = changedTouch(event);
+			if (touch) moveGesture(point(touch), () => {
+				if (event.cancelable) event.preventDefault();
+			});
+		};
+		const handleTouchEnd = (event) => {
+			if (event.touches.length > 0) {
+				resetGesture(true);
+				return;
+			}
+			const touch = changedTouch(event);
+			if (touch) endGesture(point(touch));
+			else if (event.touches.length === 0) resetGesture(true);
+		};
+		const handleTouchCancel = () => resetGesture(true);
+		root.addEventListener("touchstart", handleTouchStart, { passive: true });
+		root.addEventListener("touchmove", handleTouchMove, { passive: false });
+		root.addEventListener("touchend", handleTouchEnd, { passive: true });
+		root.addEventListener("touchcancel", handleTouchCancel, { passive: true });
+		return () => {
+			root.removeEventListener("touchstart", handleTouchStart);
+			root.removeEventListener("touchmove", handleTouchMove);
+			root.removeEventListener("touchend", handleTouchEnd);
+			root.removeEventListener("touchcancel", handleTouchCancel);
+		};
+	}
+	watch(rootRef, (root) => {
+		detachTouch?.();
+		detachTouch = null;
+		if (root == null || typeof root.addEventListener !== "function") return;
+		detachTouch = bindTouch(root);
+	}, { flush: "post" });
+	onScopeDispose(() => {
+		detachTouch?.();
+		detachTouch = null;
+		resetGesture(false);
+	});
+	function setRoot(el) {
+		rootRef.value = el instanceof HTMLElement ? el : null;
+	}
+	return {
+		setRoot,
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel
+	};
+}
+//#endregion
+//#region src/Toast/Toast.vue
+const _hoisted_1$1 = ["role", "aria-live"];
+const _hoisted_2 = { class: "astryx-toast__body" };
+const _hoisted_3 = {
+	key: 0,
+	class: "astryx-toast__end"
+};
+const _hoisted_4 = ["aria-label"];
+const MIN_REMAINING_MS = 1e3;
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "Toast",
+	props: {
+		type: { default: "info" },
+		body: {},
+		isAutoHide: {
+			type: Boolean,
+			default: void 0
+		},
+		autoHideDuration: {},
+		autoClose: {
+			type: Boolean,
+			default: void 0
+		},
+		duration: {},
+		uniqueID: {},
+		collisionBehavior: {},
+		endContent: {},
+		isExiting: {
+			type: Boolean,
+			default: false
+		},
+		swipeDirection: { default: 1 }
+	},
+	emits: ["dismiss", "close"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const duration = computed(() => resolveAutoHideDuration(props));
+		const autoHide = computed(() => resolveAutoHide(props));
+		const remaining = ref(duration.value);
+		const isPaused = ref(false);
+		const timer = ref(null);
+		const startTime = ref(null);
+		const isAlert = computed(() => props.type === "error");
+		const role = computed(() => isAlert.value ? "alert" : "status");
+		const ariaLive = computed(() => isAlert.value ? "assertive" : "polite");
+		const messages = useAstryxMessages();
+		const theme = useTheme();
+		const mediaFallback = computed(() => isAlert.value || theme.mode.value === "light" ? "dark" : "light");
+		const dismissLabel = computed(() => messages.value.toast.dismiss);
+		const classes = computed(() => [
+			"astryx-toast",
+			`astryx-toast--type-${props.type}`,
+			{ "astryx-toast--exiting": props.isExiting }
+		]);
+		const contentScope = computed(() => ({
+			body: props.body,
+			endContent: props.endContent,
+			type: props.type,
+			isAutoHide: autoHide.value,
+			autoHideDuration: duration.value,
+			dismiss: () => dismiss("manual")
+		}));
+		function dismiss(reason) {
+			emit("dismiss", reason);
+			emit("close");
+		}
+		const gesture = useToastGesture({
+			direction: () => props.swipeDirection,
+			enabled: () => !props.isExiting,
+			canPauseTimer: () => autoHide.value,
+			isTimerPaused: () => isPaused.value,
+			pauseTimer,
+			resumeTimer,
+			dismiss: () => dismiss("manual")
+		});
+		function startTimer() {
+			if (!autoHide.value || isPaused.value) return;
+			if (timer.value) clearTimeout(timer.value);
+			startTime.value = Date.now();
+			timer.value = setTimeout(() => {
+				dismiss("auto");
+			}, remaining.value);
+		}
+		function pauseTimer() {
+			if (!autoHide.value || isPaused.value) return;
+			isPaused.value = true;
+			if (timer.value) {
+				clearTimeout(timer.value);
+				timer.value = null;
+			}
+			if (startTime.value != null) {
+				const elapsed = Date.now() - startTime.value;
+				remaining.value = Math.max(remaining.value - elapsed, MIN_REMAINING_MS);
+			}
+		}
+		function resumeTimer() {
+			if (!autoHide.value || !isPaused.value) return;
+			isPaused.value = false;
+			startTimer();
+		}
+		function handleClose() {
+			dismiss("manual");
+		}
+		function onWindowBlur() {
+			pauseTimer();
+		}
+		function onWindowFocus() {
+			resumeTimer();
+		}
+		watch(() => props.isExiting, (exiting) => {
+			if (!exiting || !timer.value) return;
+			clearTimeout(timer.value);
+			timer.value = null;
+		});
+		watch(duration, (next) => {
+			remaining.value = next;
+			startTimer();
+		});
+		onMounted(() => {
+			startTimer();
+			if (autoHide.value) {
+				window.addEventListener("blur", onWindowBlur);
+				window.addEventListener("focus", onWindowFocus);
+			}
+		});
+		onUnmounted(() => {
+			if (timer.value) clearTimeout(timer.value);
+			window.removeEventListener("blur", onWindowBlur);
+			window.removeEventListener("focus", onWindowFocus);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- toast pauses auto-dismiss on hover/focus "), createElementVNode("div", {
+				ref: unref(gesture).setRoot,
+				class: normalizeClass(classes.value),
+				role: role.value,
+				"aria-live": ariaLive.value,
+				"aria-atomic": "true",
+				onMouseenter: pauseTimer,
+				onMouseleave: resumeTimer,
+				onFocusin: pauseTimer,
+				onFocusout: resumeTimer,
+				onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(gesture).onPointerDown && unref(gesture).onPointerDown(...args)),
+				onPointermove: _cache[1] || (_cache[1] = (...args) => unref(gesture).onPointerMove && unref(gesture).onPointerMove(...args)),
+				onPointerup: _cache[2] || (_cache[2] = (...args) => unref(gesture).onPointerUp && unref(gesture).onPointerUp(...args)),
+				onPointercancel: _cache[3] || (_cache[3] = (...args) => unref(gesture).onPointerCancel && unref(gesture).onPointerCancel(...args)),
+				onLostpointercapture: _cache[4] || (_cache[4] = (...args) => unref(gesture).onPointerCancel && unref(gesture).onPointerCancel(...args))
+			}, [createVNode(_sfc_main$2, {
+				mode: "auto",
+				fallback: mediaFallback.value,
+				class: "astryx-toast__surface"
+			}, {
+				default: withCtx(() => [_ctx.$slots.content ? renderSlot(_ctx.$slots, "content", normalizeProps(guardReactiveProps(contentScope.value)), void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+					createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.body), 1)])]),
+					__props.endContent || _ctx.$slots.end ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "end", {}, () => [__props.endContent ? (openBlock(), createBlock(resolveDynamicComponent(__props.endContent), { key: 0 })) : createCommentVNode("v-if", true)])])) : createCommentVNode("v-if", true),
+					createElementVNode("button", {
+						type: "button",
+						class: "astryx-toast__close",
+						"aria-label": dismissLabel.value,
+						onClick: handleClose
+					}, " × ", 8, _hoisted_4)
+				], 64))]),
+				_: 3
+			}, 8, ["fallback"])], 42, _hoisted_1$1)], 2112);
+		};
+	}
+});
+//#endregion
+//#region src/Toast/motionDuration.ts
+const TOAST_MOTION_DURATION_VAR = "--astryx-toast-motion-duration";
+const TOAST_MOTION_DURATION_FALLBACK_MS = 165;
+/** 把 `165ms` 或 `0.2s` 解析成毫秒。解析不了就返回 null。 */
+function parseCssDurationMs(value) {
+	const text = value.trim();
+	if (text.endsWith("ms")) {
+		const ms = Number.parseFloat(text);
+		return Number.isFinite(ms) ? ms : null;
+	}
+	if (text.endsWith("s")) {
+		const seconds = Number.parseFloat(text);
+		return Number.isFinite(seconds) ? seconds * 1e3 : null;
+	}
+	return null;
+}
+function readDurationRaw(element) {
+	if (typeof getComputedStyle === "function") {
+		const computed = getComputedStyle(element).getPropertyValue(TOAST_MOTION_DURATION_VAR).trim();
+		if (parseCssDurationMs(computed) != null) return computed;
+	}
+	if (element instanceof HTMLElement) return element.style.getPropertyValue(TOAST_MOTION_DURATION_VAR);
+	return "";
+}
+/**
+* 读 toast 视口上的运动时长。
+* 样式还没算出来时用 165 毫秒，和 `--astryx-duration-fast-max` 的默认值一致。
+*/
+function readToastMotionDurationMs(element) {
+	if (element == null) return TOAST_MOTION_DURATION_FALLBACK_MS;
+	return parseCssDurationMs(readDurationRaw(element)) ?? TOAST_MOTION_DURATION_FALLBACK_MS;
+}
+//#endregion
+//#region src/Toast/store.ts
+let idCounter = 0;
+const EXIT_FALLBACK_MS = 400;
+const toastStore = reactive({
+	toasts: [],
+	add(options) {
+		const endContent = options.endContent ? markRaw(options.endContent) : void 0;
+		const resolved = {
+			type: options.type ?? "info",
+			body: options.body,
+			isAutoHide: resolveAutoHide(options),
+			autoHideDuration: resolveAutoHideDuration(options),
+			endContent,
+			onDismiss: options.onDismiss,
+			onHide: options.onHide
+		};
+		if (options.uniqueID) {
+			const existing = this.toasts.find((toast) => toast.uniqueID === options.uniqueID && !toast.isExiting);
+			const behavior = options.collisionBehavior ?? "overwrite";
+			if (existing && behavior === "ignore") return null;
+			if (existing) {
+				Object.assign(existing, resolved);
+				return existing.id;
+			}
+		}
+		const id = `astryx-toast-${++idCounter}`;
+		this.toasts.push({
+			id,
+			uniqueID: options.uniqueID,
+			isExiting: false,
+			...resolved
+		});
+		return id;
+	},
+	requestClose(id, reason = "manual") {
+		const item = this.toasts.find((t) => t.id === id);
+		if (!item || item.isExiting) return;
+		item.isExiting = true;
+		item.onHide?.(reason);
+		setTimeout(() => this.finalize(id), EXIT_FALLBACK_MS);
+	},
+	dismissFromCard(id, reason) {
+		const item = this.toasts.find((t) => t.id === id);
+		if (!item || item.isExiting) return;
+		item.onDismiss?.(reason);
+		this.requestClose(id, reason);
+	},
+	finalize(id) {
+		const index = this.toasts.findIndex((t) => t.id === id);
+		if (index >= 0) this.toasts.splice(index, 1);
+	},
+	clear() {
+		for (const id of this.toasts.map((t) => t.id)) this.requestClose(id);
+	}
+});
+//#endregion
+//#region src/Toast/ToastViewport.vue
+const _hoisted_1 = ["onTransitionend"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "ToastViewport",
+	props: { placement: {} },
+	setup(__props) {
+		const props = __props;
+		resetLayerScopedContext();
+		const layer = useLayerConfig();
+		const activeModal = useActiveModalOutlet();
+		const mountTarget = ref("body");
+		const viewportRef = ref(null);
+		/** 等两帧，让浏览器把上一步的样式算完。没有 `requestAnimationFrame` 时立刻返回。 */
+		function afterTwoFrames() {
+			if (typeof requestAnimationFrame !== "function") return Promise.resolve();
+			return new Promise((resolve) => {
+				requestAnimationFrame(() => {
+					requestAnimationFrame(() => resolve());
+				});
+			});
+		}
+		/**
+		* 把视口放进顶层（`popover="manual"`）：顶层元素画在页面最上面。
+		*
+		* 节点被搬过（`remove` + `insert`）浏览器会自己把 popover 关掉，所以每次搬完都要
+		* 重新打开一次；浏览器不支持时什么也不做。
+		*/
+		function syncTopLayer() {
+			const element = viewportRef.value;
+			if (element == null || typeof element.showPopover !== "function") return;
+			let isShowing = false;
+			try {
+				isShowing = element.matches(":popover-open");
+			} catch {}
+			if (isShowing) return;
+			try {
+				element.showPopover();
+			} catch {}
+		}
+		const isRehosting = ref(false);
+		onMounted(syncTopLayer);
+		watch(mountTarget, () => {
+			isRehosting.value = true;
+		}, { flush: "pre" });
+		watch(mountTarget, () => {
+			syncTopLayer();
+			if (typeof requestAnimationFrame !== "function") {
+				isRehosting.value = false;
+				return;
+			}
+			setTimeout(() => {
+				isRehosting.value = false;
+			}, readToastMotionDurationMs(viewportRef.value));
+		}, { flush: "post" });
+		/**
+		* 打开的对话框会压住页面其它部分，视口得搬进它里面才点得到。
+		*
+		* 但搬运要等它把进场动画跑完：动画里的 `transform` 会成为搬进去的 `position: fixed`
+		* 元素的参照物，toast 会被按对话框的位置摆一次，动画结束才弹回原来的角落。等的
+		* 这段时间视口留在原处，先把顶层顺序放到对话框上面，用户看到的位置就不变。
+		*/
+		watch(activeModal, async (modal) => {
+			if (modal == null) {
+				mountTarget.value = "body";
+				return;
+			}
+			const element = viewportRef.value;
+			if (element != null && typeof element.hidePopover === "function") try {
+				element.hidePopover();
+				element.showPopover();
+			} catch {}
+			await whenModalSettled(modal);
+			await afterTwoFrames();
+			if (activeModal.value === modal) mountTarget.value = modal;
+		}, { immediate: true });
+		const placement = computed(() => props.placement ?? layer?.value.toast.position ?? "bottom-end");
+		const isTopPlacement = computed(() => placement.value.startsWith("top"));
+		const classes = computed(() => [
+			"astryx-toast-viewport",
+			"astryx-layer",
+			`astryx-toast-viewport--placement-${placement.value}`,
+			{ "astryx-toast-viewport--rehosting": isRehosting.value }
+		]);
+		/** 超出可见上限时只渲染最新的几条。 */
+		const visibleToasts = computed(() => {
+			const max = layer?.value.toast.maxVisible;
+			const toasts = toastStore.toasts;
+			if (max == null || max < 0 || toasts.length <= max) return toasts;
+			return toasts.slice(toasts.length - max);
+		});
+		const INSET_EDGES = [
+			[
+				"padding-block-start",
+				"blockStart",
+				"top"
+			],
+			[
+				"padding-block-end",
+				"blockEnd",
+				"bottom"
+			],
+			[
+				"padding-inline-start",
+				"inlineStart",
+				"left"
+			],
+			[
+				"padding-inline-end",
+				"inlineEnd",
+				"right"
+			]
+		];
+		/**
+		* 逐边偏移叠在基础内边距上。基础内边距取间距第 4 档和设备安全区的较大者，
+		* 和锚定浮层的视口空隙保持一致。没有 provider 时不写内联样式，保持原来的样子。
+		*/
+		const viewportStyle = computed(() => {
+			const inset = layer?.value.toast.inset;
+			if (inset == null) return void 0;
+			const style = {};
+			for (const [property, edge, areaEdge] of INSET_EDGES) style[property] = `calc(max(var(--astryx-spacing-4, 16px), env(safe-area-inset-${areaEdge}, 0px)) + ${inset[edge] ?? 0}px)`;
+			return style;
+		});
+		const settled = reactive(/* @__PURE__ */ new Set());
+		function handleRowTransitionEnd(id, event) {
+			if (event.target !== event.currentTarget || event.propertyName !== "grid-template-rows") return;
+			const item = toastStore.toasts.find((t) => t.id === id);
+			if (!item) return;
+			if (item.isExiting) toastStore.finalize(id);
+			else settled.add(id);
+		}
+		function handleDismiss(id, reason) {
+			settled.delete(id);
+			toastStore.dismissFromCard(id, reason);
+		}
+		watch(() => toastStore.toasts.map((t) => t.id).join(","), () => {
+			const live = new Set(toastStore.toasts.map((t) => t.id));
+			for (const id of [...settled]) if (!live.has(id)) settled.delete(id);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: mountTarget.value }, [createElementVNode("div", {
+				ref_key: "viewportRef",
+				ref: viewportRef,
+				class: normalizeClass(classes.value),
+				style: normalizeStyle(viewportStyle.value),
+				popover: "manual",
+				"aria-live": "polite",
+				"aria-atomic": "false"
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleToasts.value, (toast) => {
+				return openBlock(), createElementBlock("div", {
+					key: toast.id,
+					class: normalizeClass(["astryx-toast-viewport__row", [isTopPlacement.value ? "astryx-toast-viewport__row--from-top" : "astryx-toast-viewport__row--from-bottom", { "astryx-toast-viewport__row--exiting": toast.isExiting }]]),
+					onTransitionend: ($event) => handleRowTransitionEnd(toast.id, $event)
+				}, [createElementVNode("div", { class: normalizeClass(["astryx-toast-viewport__clip", { "astryx-toast-viewport__clip--settled": settled.has(toast.id) }]) }, [createVNode(_sfc_main$1, {
+					type: toast.type,
+					body: toast.body,
+					"is-auto-hide": toast.isAutoHide,
+					"auto-hide-duration": toast.autoHideDuration,
+					"end-content": toast.endContent,
+					"is-exiting": toast.isExiting,
+					"swipe-direction": isTopPlacement.value ? -1 : 1,
+					onDismiss: ($event) => handleDismiss(toast.id, $event)
+				}, null, 8, [
+					"type",
+					"body",
+					"is-auto-hide",
+					"auto-hide-duration",
+					"end-content",
+					"is-exiting",
+					"swipe-direction",
+					"onDismiss"
+				])], 2)], 42, _hoisted_1);
+			}), 128))], 6)], 8, ["to"]);
+		};
+	}
+});
+//#endregion
+//#region src/Toast/useToast.ts
+function useToast() {
+	function show(options) {
+		const id = toastStore.add(options);
+		if (id == null) return () => {};
+		return () => toastStore.requestClose(id);
+	}
+	show.dismiss = (id) => toastStore.requestClose(id);
+	show.clear = () => toastStore.clear();
+	return show;
+}
+//#endregion
+export { _sfc_main as n, _sfc_main$1 as r, useToast as t };

package/dist/ToggleButton/index.d.ts

@@ -1,2 +1,2 @@
-import { A as ToggleButtonEmits, B as ToggleButtonPressedChangeHandler, D as _default, E as _default$1, F as ToggleButtonGroupProps, H as ToggleButtonSize, I as ToggleButtonGroupSingleProps, L as ToggleButtonGroupSlots, M as ToggleButtonGroupEmits, N as ToggleButtonGroupMultipleProps, O as ToggleButtonChangeAction, P as ToggleButtonGroupOrientation, R as ToggleButtonGroupType, U as ToggleButtonSlots, V as ToggleButtonProps, j as ToggleButtonGroupBaseProps, k as ToggleButtonElevation, z as ToggleButtonGroupValue } from "../index-CdtZjkmG.js";
+import { A as ToggleButtonEmits, B as ToggleButtonPressedChangeHandler, D as _default, E as _default$1, F as ToggleButtonGroupProps, H as ToggleButtonSize, I as ToggleButtonGroupSingleProps, L as ToggleButtonGroupSlots, M as ToggleButtonGroupEmits, N as ToggleButtonGroupMultipleProps, O as ToggleButtonChangeAction, P as ToggleButtonGroupOrientation, R as ToggleButtonGroupType, U as ToggleButtonSlots, V as ToggleButtonProps, j as ToggleButtonGroupBaseProps, k as ToggleButtonElevation, z as ToggleButtonGroupValue } from "../index-CpNlPLBF.js";
 export { _default as ToggleButton, _default as default, type ToggleButtonChangeAction, type ToggleButtonElevation, type ToggleButtonEmits, _default$1 as ToggleButtonGroup, type ToggleButtonGroupBaseProps, type ToggleButtonGroupEmits, type ToggleButtonGroupMultipleProps, type ToggleButtonGroupOrientation, type ToggleButtonGroupProps, type ToggleButtonGroupSingleProps, type ToggleButtonGroupSlots, type ToggleButtonGroupType, type ToggleButtonGroupValue, type ToggleButtonPressedChangeHandler, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonSlots };

package/dist/ToggleButton/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main$1, r as _sfc_main, t as ToggleButton_default } from "../ToggleButton-B-C-Q7XP.js";
+import { n as _sfc_main$1, r as _sfc_main, t as ToggleButton_default } from "../ToggleButton-cLjh9W-x.js";
 export { _sfc_main as ToggleButton, _sfc_main$1 as ToggleButtonGroup, ToggleButton_default as default };