ajo-ui 0.1.0

package/dist/tabs.js

@@ -0,0 +1,182 @@
+import { DirectionContext } from "./direction.js";
+import { callHandler, callRef, controlled, dom, id, indicator, listen, overflow, roving, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/tabs.tsx
+var TabsContext = context(null);
+var state = (active) => active ? "active" : "inactive";
+var tabs = (root) => Array.from(root.querySelectorAll("button[data-slot=\"tabs-trigger\"]")).filter((button) => !button.disabled && button.offsetParent !== null);
+var TabsRoot = function* ({ defaultValue, value }) {
+	const rootId = id("tabs");
+	let activationMode = "automatic";
+	let dir = "ltr";
+	let loop = true;
+	let onValueChange;
+	let orientation = "horizontal";
+	const state = controlled(this, {
+		fallback: String(value ?? defaultValue ?? ""),
+		onChange: (next, event) => onValueChange?.(next, event)
+	});
+	const triggerId = (value) => `${rootId}-trigger-${encodeURIComponent(value)}`;
+	const contentId = (value) => `${rootId}-content-${encodeURIComponent(value)}`;
+	const selected = (value) => state.value === value;
+	const setValue = (next, event) => {
+		if (!next || next === state.value) return;
+		state.set(next, event);
+	};
+	const ensureValue = () => {
+		if (state.value || state.controlled || !dom(this)) return;
+		const first = tabs(this)[0];
+		if (first?.value) state.init(first.value);
+	};
+	const nav = roving(this, {
+		items: () => tabs(this),
+		orientation: () => orientation,
+		dir: () => dir,
+		loop: () => loop,
+		onMove: (target, event) => {
+			target.focus();
+			target.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+			if (activationMode === "automatic") setValue(String(target.value), event);
+		}
+	});
+	let list = null;
+	const edges = overflow(this, { target: () => list });
+	const mark = indicator(this, {
+		target: () => list,
+		of: (container) => container.querySelector("button[data-slot=\"tabs-trigger\"][data-state=\"active\"]")
+	});
+	const setList = (element) => {
+		list = element;
+		edges.sync();
+		mark.sync();
+	};
+	listen(this, "keydown", (event) => {
+		const target = event.target;
+		if (!target?.matches("button[data-slot=\"tabs-trigger\"]")) return;
+		if (nav.handle(event)) return;
+		if (activationMode === "manual" && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			setValue(String(target.value), event);
+		}
+	});
+	for (const args of this) {
+		activationMode = args.activationMode;
+		dir = args.dir;
+		loop = args.loop;
+		onValueChange = args.onValueChange;
+		orientation = args.orientation;
+		state.sync(args.value != null ? String(args.value) : void 0);
+		TabsContext({
+			activationMode,
+			contentId,
+			dir,
+			loop,
+			orientation,
+			selected,
+			setList,
+			setValue,
+			triggerId,
+			value: state.value
+		});
+		edges.sync();
+		mark.sync();
+		queueMicrotask(ensureValue);
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+/** Unstyled root provider for tab state. */
+var Tabs = ({ activationMode = "automatic", children, defaultValue, dir, loop = true, onValueChange, orientation = "horizontal", value, ...attrs }) => {
+	const resolvedDir = dir ?? DirectionContext();
+	return /* @__PURE__ */ jsx(TabsRoot, {
+		...statefulRootAttrs(attrs),
+		activationMode,
+		defaultValue,
+		dir: resolvedDir,
+		loop,
+		onValueChange,
+		orientation,
+		value,
+		"attr:data-orientation": orientation,
+		"attr:data-slot": "tabs",
+		"attr:dir": resolvedDir,
+		children
+	});
+};
+/** Unstyled container for tab triggers. */
+var TabsList = ({ children, ref, role = "tablist", ...attrs }) => {
+	const context = TabsContext();
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		"aria-orientation": context?.orientation,
+		"data-orientation": context?.orientation,
+		"data-slot": "tabs-list",
+		ref: (element) => {
+			context?.setList(element);
+			callRef(ref, element);
+		},
+		role,
+		children
+	});
+};
+/** Unstyled button that activates a tab panel. */
+var TabsTrigger = ({ children, disabled, id, "set:onclick": onClick, "set:onfocus": onFocus, type = "button", value, ...attrs }) => {
+	const context = TabsContext();
+	const tabValue = String(value);
+	const active = Boolean(context?.selected(tabValue));
+	const disabledFlag = Boolean(disabled);
+	const triggerId = id ?? context?.triggerId(tabValue);
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		"aria-controls": context?.contentId(tabValue),
+		"aria-selected": active ? "true" : "false",
+		"data-slot": "tabs-trigger",
+		"data-state": state(active),
+		"data-value": tabValue,
+		disabled: disabledFlag,
+		id: triggerId,
+		role: "tab",
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			if (event.defaultPrevented || disabledFlag) return;
+			context?.setValue(tabValue, event);
+			event.currentTarget.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		},
+		"set:onfocus": (event) => {
+			callHandler(onFocus, event);
+			if (event.defaultPrevented || disabledFlag || active || context?.activationMode !== "automatic") return;
+			context?.setValue(tabValue, event);
+		},
+		tabindex: active ? 0 : -1,
+		type,
+		value: tabValue,
+		children
+	});
+};
+/** Unstyled panel displayed by its matching tab trigger. */
+var TabsContent = ({ children, forceMount, value, ...attrs }) => {
+	const context = TabsContext();
+	const tabValue = String(value);
+	const active = Boolean(context?.selected(tabValue));
+	if (!active && !forceMount) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		"aria-labelledby": context?.triggerId(tabValue),
+		"data-slot": "tabs-content",
+		"data-state": state(active),
+		"data-value": tabValue,
+		hidden: active ? void 0 : true,
+		id: context?.contentId(tabValue),
+		role: "tabpanel",
+		tabindex: 0,
+		children
+	});
+};
+//#endregion
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/toast.js

@@ -0,0 +1,492 @@
+import { clx, popupStyle, toNumber } from "./utils.js";
+import { n as openPopover, t as closePopover } from "./chunks/native-BJdhd9XJ.js";
+import { browser, callHandler, hotkey, id } from "ajo-cloves";
+import { jsx, jsxs } from "ajo/jsx-runtime";
+import { render } from "ajo";
+//#region packages/ajo-ui/src/toast.tsx
+var defaultDuration = 5e3;
+var defaultLimit = 3;
+var closeDelay = 200;
+var hotkeyDefault = ["F8"];
+var edgeInset = 16;
+var stackGap = 8;
+var records = [];
+var configuredDuration = defaultDuration;
+var configuredLabel;
+var configuredPosition = "bottom-right";
+var listeners = /* @__PURE__ */ new Set();
+var emit = () => {
+	for (const listener of listeners) listener();
+};
+var clearTimer = (record) => {
+	if (record.timeout) clearTimeout(record.timeout);
+	record.timeout = null;
+};
+var removeToast = (id) => {
+	records = records.filter((record) => record.id !== id);
+	emit();
+};
+var startTimer = (record) => {
+	clearTimer(record);
+	if (!browser() || record.remaining <= 0) return;
+	record.startedAt = Date.now();
+	record.timeout = setTimeout(() => dismissToast(record.id), record.remaining);
+};
+var pauseRecord = (record) => {
+	if (!record.timeout) return;
+	clearTimer(record);
+	record.remaining = Math.max(0, record.remaining - (Date.now() - record.startedAt));
+};
+var resumeRecord = (record) => {
+	if (!record.open || record.timeout || record.remaining <= 0) return;
+	startTimer(record);
+};
+var normalize = (input, options) => {
+	if (input && typeof input === "object" && ("id" in input || "title" in input || "description" in input || "action" in input || "closeButton" in input || "variant" in input || "duration" in input || "position" in input)) return input;
+	return {
+		...options,
+		title: input
+	};
+};
+var visibleToasts = (limit = defaultLimit, position) => {
+	return (position ? records.filter((record) => record.position === position) : records).slice(0, Math.max(1, limit));
+};
+var subscribeToasts = (listener) => {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+};
+var stringValue = (value) => typeof value === "string" ? value : void 0;
+var booleanValue = (value, fallback) => typeof value === "boolean" ? value : fallback;
+var hotkeyValue = (value) => Array.isArray(value) && value.every((item) => typeof item === "string") ? value : hotkeyDefault;
+var positions = new Set([
+	"bottom-center",
+	"bottom-left",
+	"bottom-right",
+	"top-center",
+	"top-left",
+	"top-right"
+]);
+var positionValue = (value) => typeof value === "string" && positions.has(value) ? value : "bottom-right";
+var composeClick = (previous, next) => (event) => {
+	callHandler(previous, event);
+	next?.();
+};
+var resolveClass = (value, toast) => typeof value === "function" ? value(toast) : value;
+/** Add a generated toast and return controls for updating or dismissing it. */
+var toast = (input, options) => {
+	const data = normalize(input, options);
+	const toastId = data.id ?? id("toast");
+	const existing = records.find((record) => record.id === toastId);
+	const duration = data.duration ?? existing?.duration ?? configuredDuration;
+	const record = {
+		...existing,
+		...data,
+		id: toastId,
+		duration,
+		open: true,
+		remaining: Math.max(0, duration),
+		startedAt: 0,
+		timeout: existing?.timeout ?? null,
+		variant: data.variant ?? existing?.variant ?? "default",
+		position: data.position ?? existing?.position ?? configuredPosition
+	};
+	if (existing) {
+		clearTimer(existing);
+		records = records.map((current) => current.id === toastId ? record : current);
+	} else records = [record, ...records];
+	startTimer(record);
+	emit();
+	return {
+		id: toastId,
+		dismiss: () => dismissToast(toastId),
+		update: (patch) => updateToast(toastId, patch)
+	};
+};
+/** Update an existing generated toast. */
+var updateToast = (id, patch) => {
+	const record = records.find((current) => current.id === id);
+	if (!record) return;
+	clearTimer(record);
+	Object.assign(record, patch, {
+		duration: patch.duration ?? record.duration,
+		remaining: Math.max(0, patch.duration ?? record.duration ?? defaultDuration)
+	});
+	startTimer(record);
+	emit();
+};
+/** Dismiss one generated toast, or every generated toast when no id is passed. */
+var dismissToast = (id) => {
+	const targets = id ? records.filter((record) => record.id === id) : records;
+	for (const record of targets) {
+		clearTimer(record);
+		record.open = false;
+	}
+	emit();
+	if (!browser()) {
+		records = id ? records.filter((record) => record.id !== id) : [];
+		emit();
+		return;
+	}
+	for (const record of targets) setTimeout(() => removeToast(record.id), closeDelay);
+};
+/** Remove all generated toasts immediately. Useful for deterministic tests and stories. */
+var clearToasts = () => {
+	for (const record of records) clearTimer(record);
+	records = [];
+	emit();
+};
+/** Provider for toast defaults. */
+var ToastProvider = ({ children, duration = defaultDuration, label }) => {
+	configuredDuration = duration;
+	configuredLabel = label;
+	return children;
+};
+var viewportInsets = {
+	"bottom-center": "bottom:0;left:50%;transform:translateX(-50%)",
+	"bottom-left": "bottom:0;left:0",
+	"bottom-right": "bottom:0;right:0",
+	"top-center": "top:0;left:50%;transform:translateX(-50%)",
+	"top-left": "top:0;left:0",
+	"top-right": "top:0;right:0"
+};
+/** Toast viewport where generated or manually composed toasts are rendered. */
+var ToastViewport = ({ children, class: classes, hotkey = hotkeyDefault, label, popover = "manual", position = "bottom-right", style, tabIndex = -1, ...attrs }) => {
+	const hotkeyText = hotkey.join("+");
+	const title = label ?? configuredLabel ?? `Notifications (${hotkeyText})`;
+	return /* @__PURE__ */ jsx("ol", {
+		...attrs,
+		"aria-atomic": "false",
+		"aria-label": title,
+		"aria-live": "polite",
+		class: classes,
+		"data-hotkey": hotkeyText,
+		"data-position": position,
+		"data-slot": "toast-viewport",
+		popover,
+		role: "region",
+		style: popupStyle("border:none;background:transparent;color:inherit;overflow:visible", viewportInsets[position], style),
+		tabIndex,
+		children
+	});
+};
+/** Toast root for composed notifications. */
+var Toast = ({ children, class: classes, open = true, role, type = "foreground", variant = "default", ...attrs }) => open ? /* @__PURE__ */ jsx("li", {
+	...attrs,
+	class: classes,
+	"data-slot": "toast",
+	"data-state": "open",
+	"data-type": type,
+	"data-variant": variant,
+	role: role ?? (variant === "danger" ? "alert" : "status"),
+	children
+}) : null;
+/** Toast title slot. */
+var ToastTitle = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-slot": "toast-title",
+	children
+});
+/** Toast description slot. */
+var ToastDescription = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-slot": "toast-description",
+	children
+});
+/** Toast action button. */
+var ToastAction = ({ altText, children, class: classes, onAction, type = "button", "set:onclick": setOnClick, ...attrs }) => /* @__PURE__ */ jsx("button", {
+	...attrs,
+	"aria-label": altText,
+	class: classes,
+	"data-slot": "toast-action",
+	"set:onclick": composeClick(setOnClick, onAction),
+	type,
+	children
+});
+/** Toast close button. */
+var ToastClose = ({ children, class: classes, onClose, type = "button", "set:onclick": setOnClick, ...attrs }) => /* @__PURE__ */ jsx("button", {
+	...attrs,
+	"aria-label": attrs["aria-label"] ?? "Close",
+	class: classes,
+	"data-slot": "toast-close",
+	"set:onclick": (event) => {
+		event.currentTarget.closest("[data-slot=\"toast-viewport\"]")?.focus();
+		composeClick(setOnClick, onClose)(event);
+	},
+	type,
+	children
+});
+/** Render generated toasts from the module-level toast store. */
+var Toaster = function* ({ hotkey: hotkey$1 = hotkeyDefault, limit = defaultLimit, pauseOnWindowBlur = true }) {
+	let rootViewport = null;
+	let portalViewport = null;
+	let portalMount = null;
+	let portalWatch = null;
+	let renderPortal = null;
+	const modals = [];
+	let toasts = visibleToasts(toNumber(limit, defaultLimit));
+	let currentHotkey = hotkeyValue(hotkey$1);
+	let currentPauseOnWindowBlur = booleanValue(pauseOnWindowBlur, true);
+	let hovered = false;
+	const heights = /* @__PURE__ */ new Map();
+	const viewport = () => portalMount ? portalViewport : rootViewport;
+	const measure = () => {
+		const host = viewport();
+		if (!host) return;
+		const known = new Set(records.map((record) => record.id));
+		let changed = false;
+		for (const key of Array.from(heights.keys())) if (!known.has(key)) heights.delete(key);
+		for (const element of Array.from(host.querySelectorAll("[data-slot=\"toast\"]"))) {
+			const id = element.dataset.toastId;
+			if (!id || !known.has(id)) continue;
+			const height = element.offsetHeight;
+			if (heights.get(id) !== height) {
+				heights.set(id, height);
+				changed = true;
+			}
+		}
+		if (changed) this.next();
+	};
+	let topLayerEpoch = 0;
+	let promotedEpoch = 0;
+	const syncViewport = () => {
+		if (!rootViewport?.isConnected) return;
+		if (promotedEpoch < topLayerEpoch) closePopover(rootViewport);
+		openPopover(rootViewport);
+		promotedEpoch = topLayerEpoch;
+	};
+	const syncPortal = () => {
+		if (portalViewport?.isConnected) openPopover(portalViewport);
+	};
+	const onViewportToggle = (event) => {
+		if (event.newState !== "closed") return;
+		const target = event.currentTarget;
+		queueMicrotask(() => {
+			if (target === portalViewport) syncPortal();
+			else if (target === rootViewport) syncViewport();
+		});
+	};
+	const pauseStack = () => {
+		for (const record of records) pauseRecord(record);
+	};
+	const resumeStack = () => {
+		for (const record of records) resumeRecord(record);
+	};
+	const portalOutlet = (dialog) => Array.from(dialog.querySelectorAll("[data-slot=\"dialog-portal\"]")).find((element) => element.closest("dialog") === dialog) ?? null;
+	const portalTarget = () => {
+		for (let index = modals.length - 1; index >= 0; index--) {
+			const dialog = modals[index];
+			if (!dialog.isConnected || !dialog.open) {
+				modals.splice(index, 1);
+				continue;
+			}
+			return portalOutlet(dialog);
+		}
+		return null;
+	};
+	const syncWatch = () => {
+		const wanted = Boolean(portalMount) || modals.length > 0;
+		if (wanted && !portalWatch) {
+			portalWatch = new MutationObserver(() => {
+				if (portalMount && !portalMount.isConnected || modals.some((dialog) => !dialog.isConnected)) rehome();
+			});
+			portalWatch.observe(document.documentElement, {
+				childList: true,
+				subtree: true
+			});
+		} else if (!wanted && portalWatch) {
+			portalWatch.disconnect();
+			portalWatch = null;
+		}
+	};
+	const rehome = () => {
+		const outlet = portalTarget();
+		if (outlet !== (portalMount?.parentElement ?? null)) {
+			if (portalMount) {
+				render(null, portalMount);
+				portalMount.remove();
+				portalMount = null;
+				portalViewport = null;
+			}
+			if (outlet) {
+				portalMount = document.createElement("div");
+				portalMount.style.display = "contents";
+				outlet.append(portalMount);
+				renderPortal?.([]);
+			}
+			if (hovered) {
+				hovered = false;
+				resumeStack();
+			}
+			this.next();
+		}
+		syncWatch();
+	};
+	const onTopLayerToggle = (event) => {
+		const target = event.target;
+		if (!(target instanceof HTMLDialogElement)) return;
+		const state = event.newState;
+		if (state === "open" && target.matches(":modal")) {
+			topLayerEpoch++;
+			if (!modals.includes(target)) modals.push(target);
+			queueMicrotask(() => {
+				syncViewport();
+				rehome();
+			});
+		} else if (state === "closed" && modals.includes(target)) {
+			modals.splice(modals.indexOf(target), 1);
+			queueMicrotask(rehome);
+		}
+	};
+	const sync = () => this.next();
+	const unsubscribe = subscribeToasts(sync);
+	this.signal.addEventListener("abort", () => {
+		unsubscribe();
+		portalWatch?.disconnect();
+		portalWatch = null;
+		if (portalMount) {
+			render(null, portalMount);
+			portalMount.remove();
+			portalMount = null;
+			portalViewport = null;
+		}
+	}, { once: true });
+	const focusViewport = (_event) => viewport()?.focus();
+	const pauseAll = () => {
+		if (!currentPauseOnWindowBlur) return;
+		for (const record of records) pauseRecord(record);
+	};
+	const resumeAll = () => {
+		if (!currentPauseOnWindowBlur) return;
+		for (const record of records) resumeRecord(record);
+	};
+	hotkey(this, {
+		keys: () => currentHotkey.join("+"),
+		active: () => toasts.length > 0,
+		onPress: (event) => focusViewport(event)
+	});
+	if (browser()) {
+		window.addEventListener("blur", pauseAll, { signal: this.signal });
+		window.addEventListener("focus", resumeAll, { signal: this.signal });
+		document.addEventListener("toggle", onTopLayerToggle, {
+			capture: true,
+			signal: this.signal
+		});
+		for (const dialog of Array.from(document.querySelectorAll("dialog"))) if (dialog.matches(":modal")) modals.push(dialog);
+	}
+	for (const { actionWrapperClass, class: classes, closeButton = true, closeChildren, closeClass, contentClass, descriptionClass, duration = defaultDuration, expand = false, hotkey = hotkeyDefault, label, limit = defaultLimit, pauseOnWindowBlur = true, position = "bottom-right", titleClass, toastClass, ...attrs } of this) {
+		const nextClass = stringValue(classes);
+		const nextCloseButton = booleanValue(closeButton, true);
+		const nextDuration = toNumber(duration, defaultDuration);
+		const nextHotkey = hotkeyValue(hotkey);
+		const nextLabel = stringValue(label) ?? configuredLabel;
+		const nextLimit = toNumber(limit, defaultLimit);
+		const nextPauseOnWindowBlur = booleanValue(pauseOnWindowBlur, true);
+		const nextPosition = positionValue(position);
+		configuredDuration = nextDuration;
+		configuredPosition = nextPosition;
+		currentHotkey = nextHotkey;
+		currentPauseOnWindowBlur = nextPauseOnWindowBlur;
+		toasts = visibleToasts(nextLimit, nextPosition);
+		if (hovered) pauseStack();
+		const bottom = nextPosition.startsWith("bottom");
+		const lift = bottom ? -1 : 1;
+		const expanded = booleanValue(expand, false) || hovered;
+		const frontHeight = heights.get(toasts[0]?.id ?? "") ?? 0;
+		const openToasts = toasts.filter((item) => item.open);
+		const stackHeight = edgeInset + (expanded ? openToasts.reduce((total, item) => total + (heights.get(item.id) ?? 0), 0) + Math.max(0, openToasts.length - 1) * stackGap : frontHeight);
+		const view = (items, portal) => /* @__PURE__ */ jsx(ToastViewport, {
+			...attrs,
+			class: nextClass,
+			"data-portal": portal ? "true" : void 0,
+			hotkey: nextHotkey,
+			id: portal ? void 0 : attrs.id,
+			label: nextLabel,
+			position: nextPosition,
+			ref: (element) => {
+				if (portal) portalViewport = element;
+				else rootViewport = element;
+			},
+			style: `--front-toast-height:${frontHeight}px;--toast-gap:${stackGap}px;height:${stackHeight}px`,
+			"set:ontoggle": onViewportToggle,
+			"set:onpointerenter": () => {
+				if (hovered) return;
+				hovered = true;
+				pauseStack();
+				this.next();
+			},
+			"set:onpointerleave": () => {
+				if (!hovered) return;
+				hovered = false;
+				resumeStack();
+				this.next();
+			},
+			children: items.map((item, index) => {
+				const depth = Math.min(index, 2);
+				const offset = expanded ? items.slice(0, index).reduce((total, prior) => prior.open ? total + (heights.get(prior.id) ?? 0) + stackGap : total, 0) : depth * 14;
+				return /* @__PURE__ */ jsxs(Toast, {
+					class: clx(resolveClass(toastClass, item), item.class),
+					"data-closing": item.open ? "false" : "true",
+					"data-expanded": expanded ? "true" : "false",
+					"data-front": index === 0 ? "true" : "false",
+					"data-side": bottom ? "bottom" : "top",
+					"data-toast-id": item.id,
+					"data-toast-index": index,
+					role: item.role,
+					"set:onfocusin": () => pauseRecord(item),
+					"set:onfocusout": () => resumeRecord(item),
+					"set:onpointerenter": () => pauseRecord(item),
+					"set:onpointerleave": () => {
+						if (!hovered) resumeRecord(item);
+					},
+					style: [
+						`--toast-y:${lift * offset}px`,
+						`--toast-scale:${expanded ? 1 : 1 - depth * .04}`,
+						`z-index:${100 - index}`
+					].join(";"),
+					type: item.type,
+					variant: item.variant,
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							class: contentClass,
+							"data-slot": "toast-content",
+							children: [item.title == null ? null : /* @__PURE__ */ jsx(ToastTitle, {
+								class: titleClass,
+								children: item.title
+							}), item.description == null ? null : /* @__PURE__ */ jsx(ToastDescription, {
+								class: descriptionClass,
+								children: item.description
+							})]
+						}),
+						item.action == null ? null : /* @__PURE__ */ jsx("div", {
+							class: actionWrapperClass,
+							"data-slot": "toast-action-wrapper",
+							children: item.action
+						}),
+						item.closeButton ?? nextCloseButton ? /* @__PURE__ */ jsx(ToastClose, {
+							class: closeClass,
+							onClose: () => dismissToast(item.id),
+							children: closeChildren
+						}) : null
+					]
+				}, item.id);
+			})
+		});
+		renderPortal = (items) => {
+			if (!portalMount?.isConnected) return;
+			render(view(items, true), portalMount);
+			syncPortal();
+		};
+		if (browser()) queueMicrotask(() => {
+			if (portalMount?.isConnected) renderPortal?.(toasts);
+			else if (portalMount || modals.length && portalTarget()) rehome();
+			syncViewport();
+			measure();
+		});
+		yield view(portalMount ? [] : toasts, false);
+	}
+};
+Toaster.attrs = { "data-slot": "toaster" };
+//#endregion
+export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, clearToasts, dismissToast, toast, updateToast };