@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/toast/ToastProvider.js

@@ -1,115 +1,312 @@
-import Toast, { ToastVariant } from "./Toast.js";
-import ToastContainer from "./ToastContainer.js";
-import ToastWrapper from "./ToastWrapper.js";
-import { createContext, useCallback, useEffect, useRef, useState } from "react";
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import { Placement } from "../theme/enums.js";
+import { DURATION } from "../theme/tokens/scales.js";
+import Portal from "../layout/Portal.js";
+import { ToastContext } from "./useToast.js";
+import { Suspense, lazy, useContext, useEffect, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence } from "framer-motion";
-import { createPortal } from "react-dom";
 //#region src/toast/ToastProvider.tsx
-var ToastContext = createContext(void 0);
-var DEFAULT_TIMEOUT = 3e3;
-var toastCounter = 0;
-var nextToastId = () => `toast-${++toastCounter}`;
-var positionKey = (toast) => JSON.stringify([
-	toast.top,
-	toast.right,
-	toast.bottom,
-	toast.left
-]);
 /**
-* Owns the toast queue. Mount it once near the root, then call `showToast` from
-* `useToast()` anywhere below. Handles stacking, timers and dismissal.
+* The toast root: one queue per React root, the timers, the screen-reader announcements and the
+* placement regions. `GalaxyProvider` mounts it (inside `OverlayProvider`), so apps never do;
+* mount it yourself only in a React root that has no `GalaxyProvider`. A nested `ToastProvider`
+* reuses the outer queue.
+*
+* The regions (`ToastViewport`, the only toast module that imports `ScaleFade` and so
+* `framer-motion`) load lazily with the first toast, so `GalaxyProvider` never requires the
+* optional `framer-motion` peer. The two live regions are static, so they exist before the first
+* toast, as live regions must.
+*
+* It renders no element around `children`. SSR: nothing renders on the server (`Portal`, and no
+* entries); the store is created in render-time state, and timers and listeners start in effects.
 */
-var ToastProvider = ({ children }) => {
-	const [toasts, setToasts] = useState([]);
-	const timeoutRefs = useRef(/* @__PURE__ */ new Map());
-	const showToast = useCallback((options) => {
-		const id = nextToastId();
-		const { timeout, top, right, bottom, left, ...props } = options;
-		const finalTimeout = timeout === void 0 ? DEFAULT_TIMEOUT : timeout;
-		setToasts((prev) => [...prev, {
-			id,
-			props,
-			timeout: finalTimeout,
-			top,
-			right,
-			bottom,
-			left
-		}]);
-		return id;
-	}, []);
-	const hideToast = useCallback((id) => {
-		if (id) {
-			const timeoutId = timeoutRefs.current.get(id);
-			if (timeoutId) {
-				clearTimeout(timeoutId);
-				timeoutRefs.current.delete(id);
-			}
-			setToasts((prev) => prev.filter((toast) => toast.id !== id));
-		} else setToasts((prev) => {
-			const firstToast = prev[0];
-			if (firstToast) {
-				const timeoutId = timeoutRefs.current.get(firstToast.id);
-				if (timeoutId) {
-					clearTimeout(timeoutId);
-					timeoutRefs.current.delete(firstToast.id);
-				}
+var VARIANT_PRIMARY = "PRIMARY";
+var VARIANT_SUCCESS = "SUCCESS";
+var VARIANT_ERROR = "ERROR";
+var TOAST_VARIANT_TO_SEVERITY_LABEL_MAP = {
+	PRIMARY: "Note",
+	SUCCESS: "Success",
+	WARNING: "Warning",
+	ERROR: "Error"
+};
+/** Only `ERROR` is announced assertively. */
+var TOAST_VARIANT_TO_POLITENESS_MAP = {
+	PRIMARY: "polite",
+	SUCCESS: "polite",
+	WARNING: "polite",
+	ERROR: "assertive"
+};
+/** How long a toast stays, by default. */
+var TOAST_DEFAULT_DURATION_MS = 5e3;
+/** Open toasts per region; a sixth dismisses the oldest. */
+var TOAST_MAX_PER_PLACEMENT = 5;
+/** How long a dismissed toast stays in the queue so its ScaleFade exit can run: `duration.base`. */
+var TOAST_EXIT_MS = Number.parseFloat(DURATION.base);
+/** The regions; loaded with the first toast. Creating a lazy component touches no browser global. */
+var ToastViewportLazy = lazy(() => import("./ToastViewport.js"));
+/** Applies the defaults to `toast()`'s argument. */
+function resolveOptions(input) {
+	const { id, variant, isLoading, duration, isPersistent, placement, ...rest } = typeof input === "string" ? { header: input } : input;
+	return {
+		...rest,
+		...id === void 0 ? {} : { id },
+		variant: variant ?? VARIANT_PRIMARY,
+		isLoading: isLoading ?? false,
+		duration: duration ?? TOAST_DEFAULT_DURATION_MS,
+		isPersistent: isPersistent ?? false,
+		placement: placement ?? Placement.BOTTOM_END
+	};
+}
+/** Normalizes one phase of `toast.promise` to options. */
+function phaseOptions(phase) {
+	return typeof phase === "string" ? { header: phase } : phase;
+}
+/** Creates the per-root store. Called once per root, in render-time state (never at module scope). */
+function createToastStore() {
+	let entries = [];
+	let counter = 0;
+	let sequence = 0;
+	let hasHadEntries = false;
+	let isRunning = false;
+	let isHidden = false;
+	const pausedPlacements = /* @__PURE__ */ new Set();
+	const timers = /* @__PURE__ */ new Map();
+	const removals = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	const announceListeners = /* @__PURE__ */ new Set();
+	const emit = () => {
+		for (const listener of listeners) listener();
+	};
+	const announce = (options) => {
+		const announcement = {
+			politeness: TOAST_VARIANT_TO_POLITENESS_MAP[options.variant],
+			label: TOAST_VARIANT_TO_SEVERITY_LABEL_MAP[options.variant],
+			header: options.header,
+			...options.description === void 0 ? {} : { description: options.description }
+		};
+		for (const listener of announceListeners) listener(announcement);
+	};
+	const clearTimer = (id) => {
+		const timer = timers.get(id);
+		if (timer?.handle != null) clearTimeout(timer.handle);
+		timers.delete(id);
+	};
+	/** Starts or pauses every open toast's countdown to match the current conditions. */
+	const syncTimers = () => {
+		const now = Date.now();
+		for (const entry of entries) {
+			if (!entry.isOpen) continue;
+			const timer = timers.get(entry.id);
+			if (timer === void 0) continue;
+			const shouldRun = isRunning && !isHidden && !entry.options.isLoading && !entry.options.isPersistent && !pausedPlacements.has(entry.options.placement);
+			if (shouldRun && timer.handle === null) {
+				timer.startedAt = now;
+				const { id } = entry;
+				timer.handle = setTimeout(() => dismiss(id), Math.max(timer.remaining, 0));
+			} else if (!shouldRun && timer.handle !== null) {
+				clearTimeout(timer.handle);
+				timer.handle = null;
+				timer.remaining -= now - (timer.startedAt ?? now);
+				timer.startedAt = null;
 			}
-			return prev.slice(1);
+		}
+	};
+	/** Removes a closed entry right away (a reused id, or the end of its exit). */
+	const removeEntry = (id) => {
+		const removal = removals.get(id);
+		if (removal !== void 0) clearTimeout(removal);
+		removals.delete(id);
+		entries = entries.filter((entry) => entry.id !== id || entry.isOpen);
+	};
+	const closeEntries = (shouldClose) => {
+		const closed = [];
+		entries = entries.map((entry) => {
+			if (!entry.isOpen || !shouldClose(entry)) return entry;
+			const next = {
+				...entry,
+				isOpen: false
+			};
+			closed.push(next);
+			return next;
 		});
-	}, []);
-	useEffect(() => {
-		const currentToastIds = new Set(toasts.map((toast) => toast.id));
-		toasts.forEach((toast) => {
-			if (timeoutRefs.current.has(toast.id)) return;
-			if (toast.timeout > 0) {
-				const timeoutId = setTimeout(() => {
-					setToasts((prev) => prev.filter((t) => t.id !== toast.id));
-					timeoutRefs.current.delete(toast.id);
-				}, toast.timeout);
-				timeoutRefs.current.set(toast.id, timeoutId);
-			}
+		if (closed.length === 0) return;
+		for (const entry of closed) {
+			clearTimer(entry.id);
+			const { id } = entry;
+			removals.set(id, setTimeout(() => {
+				removeEntry(id);
+				emit();
+			}, TOAST_EXIT_MS));
+		}
+		emit();
+		for (const entry of closed) entry.options.onDismiss?.();
+	};
+	const dismiss = (id) => {
+		closeEntries((entry) => id === void 0 || entry.id === id);
+	};
+	const show = (input) => {
+		const { id: requestedId, ...options } = resolveOptions(input);
+		const existing = requestedId === void 0 ? void 0 : entries.find((entry) => entry.id === requestedId && entry.isOpen);
+		let id;
+		if (existing !== void 0) {
+			id = existing.id;
+			entries = entries.map((entry) => entry === existing ? {
+				...entry,
+				options
+			} : entry);
+			clearTimer(id);
+			timers.set(id, {
+				remaining: options.duration,
+				startedAt: null,
+				handle: null
+			});
+		} else {
+			counter += 1;
+			id = requestedId ?? `toast-${counter}`;
+			removeEntry(id);
+			sequence += 1;
+			entries = [...entries, {
+				id,
+				options,
+				isOpen: true,
+				sequence
+			}];
+			timers.set(id, {
+				remaining: options.duration,
+				startedAt: null,
+				handle: null
+			});
+			hasHadEntries = true;
+		}
+		const open = entries.filter((entry) => entry.isOpen && entry.options.placement === options.placement);
+		const overflow = open.length - TOAST_MAX_PER_PLACEMENT;
+		if (overflow > 0) {
+			const oldest = new Set(open.slice(0, overflow).map((entry) => entry.id));
+			closeEntries((entry) => oldest.has(entry.id));
+		}
+		syncTimers();
+		emit();
+		announce(options);
+		return id;
+	};
+	const isOpenId = (id) => entries.some((entry) => entry.id === id && entry.isOpen);
+	const promise = (task, phases) => {
+		const id = show({
+			variant: VARIANT_PRIMARY,
+			...phaseOptions(phases.loading),
+			isLoading: true
 		});
-		timeoutRefs.current.forEach((timeoutId, toastId) => {
-			if (!currentToastIds.has(toastId)) {
-				clearTimeout(timeoutId);
-				timeoutRefs.current.delete(toastId);
-			}
+		task.then((value) => {
+			if (!isOpenId(id)) return;
+			show({
+				variant: VARIANT_SUCCESS,
+				...phaseOptions(typeof phases.success === "function" ? phases.success(value) : phases.success),
+				isLoading: false,
+				id
+			});
+		}, (reason) => {
+			if (!isOpenId(id)) return;
+			show({
+				variant: VARIANT_ERROR,
+				...phaseOptions(typeof phases.error === "function" ? phases.error(reason) : phases.error),
+				isLoading: false,
+				id
+			});
 		});
-	}, [toasts]);
+		return id;
+	};
+	const toast = Object.assign(show, { promise });
+	return {
+		api: {
+			toast,
+			dismiss
+		},
+		toast,
+		dismiss,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		getEntries: () => entries,
+		getHasHadEntries: () => hasHadEntries,
+		onAnnounce: (listener) => {
+			announceListeners.add(listener);
+			return () => announceListeners.delete(listener);
+		},
+		setPlacementPaused: (placement, isPaused) => {
+			if (isPaused) pausedPlacements.add(placement);
+			else pausedPlacements.delete(placement);
+			syncTimers();
+		},
+		setHidden: (nextIsHidden) => {
+			isHidden = nextIsHidden;
+			syncTimers();
+		},
+		start: () => {
+			isRunning = true;
+			syncTimers();
+		},
+		stop: () => {
+			isRunning = false;
+			syncTimers();
+		}
+	};
+}
+var NO_ENTRIES_SUBSCRIBE = () => () => {};
+var getFalse = () => false;
+/** The two persistent live regions; each new or updated toast is read once in one of them. */
+function Announcer({ store }) {
+	const [polite, setPolite] = useState(null);
+	const [assertive, setAssertive] = useState(null);
 	useEffect(() => {
-		const refs = timeoutRefs.current;
+		let frame = 0;
+		const unsubscribe = store.onAnnounce((announcement) => {
+			const set = announcement.politeness === "assertive" ? setAssertive : setPolite;
+			set(null);
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => set(announcement));
+		});
 		return () => {
-			refs.forEach((timeoutId) => {
-				clearTimeout(timeoutId);
-			});
-			refs.clear();
+			unsubscribe();
+			cancelAnimationFrame(frame);
 		};
-	}, []);
-	const positionGroups = /* @__PURE__ */ new Map();
-	toasts.forEach((toast) => {
-		const key = positionKey(toast);
-		const group = positionGroups.get(key);
-		if (group) group.push(toast);
-		else positionGroups.set(key, [toast]);
-	});
-	const toastContent = /* @__PURE__ */ jsx(Fragment$1, { children: [...positionGroups.entries()].map(([key, group]) => /* @__PURE__ */ jsx(ToastContainer, {
-		top: group[0].top,
-		right: group[0].right,
-		bottom: group[0].bottom,
-		left: group[0].left,
-		children: /* @__PURE__ */ jsx(AnimatePresence, { children: group.map((toast) => /* @__PURE__ */ jsx(ToastWrapper, { children: /* @__PURE__ */ jsx(Toast, {
-			...toast.props,
-			onClose: () => hideToast(toast.id)
-		}) }, toast.id)) })
-	}, key)) });
+	}, [store]);
+	const render = (announcement) => announcement === null ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		announcement.label,
+		": ",
+		announcement.header,
+		".",
+		announcement.description === void 0 ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", announcement.description] })
+	] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(VisuallyHidden, {
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		children: render(polite)
+	}), /* @__PURE__ */ jsx(VisuallyHidden, {
+		"aria-live": "assertive",
+		"aria-atomic": "true",
+		children: render(assertive)
+	})] });
+}
+/** Holds the toast queue and renders its regions and live regions. */
+function ToastProvider({ children }) {
+	const outerStore = useContext(ToastContext);
+	const [ownStore] = useState(() => outerStore === null ? createToastStore() : null);
+	const hasHadEntries = useSyncExternalStore(ownStore?.subscribe ?? NO_ENTRIES_SUBSCRIBE, ownStore?.getHasHadEntries ?? getFalse, getFalse);
+	useEffect(() => {
+		if (ownStore === null) return;
+		ownStore.start();
+		return () => ownStore.stop();
+	}, [ownStore]);
+	if (ownStore === null) return /* @__PURE__ */ jsx(Fragment$1, { children });
 	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
-		value: {
-			showToast,
-			hideToast
-		},
-		children: [children, typeof document !== "undefined" && createPortal(toastContent, document.body)]
+		value: ownStore,
+		children: [children, /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Announcer, { store: ownStore }), hasHadEntries && /* @__PURE__ */ jsx(Suspense, {
+			fallback: null,
+			children: /* @__PURE__ */ jsx(ToastViewportLazy, { store: ownStore })
+		})] })]
 	});
-};
+}
+ToastProvider.displayName = "ToastProvider";
 //#endregion
-export { ToastContext, ToastProvider, ToastVariant };
+export { ToastProvider as default };

package/dist/toast/ToastViewport.d.ts

@@ -0,0 +1,12 @@
+import type { ToastContextValue } from "./useToast.js";
+/** @internal Loaded by ToastProvider; apps use useToast. */
+export interface ToastViewportProps {
+    /** The provider's store. */
+    store: ToastContextValue;
+}
+/** @internal Loaded by ToastProvider; apps use useToast. Renders the placement regions. */
+declare function ToastViewport({ store }: ToastViewportProps): import("react").JSX.Element;
+declare namespace ToastViewport {
+    var displayName: string;
+}
+export default ToastViewport;

package/dist/toast/ToastViewport.js

@@ -0,0 +1,210 @@
+import { Placement } from "../theme/enums.js";
+import ScaleFade from "../transform/ScaleFade.js";
+import { useHotkey } from "../hooks/useHotkey.js";
+import Toast from "./Toast.js";
+/* empty css                        */
+import { styled } from "@linaria/react";
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/toast/ToastViewport.tsx
+/**
+* @internal Loaded by ToastProvider; apps use useToast. The placement regions: one fixed `<ol>`
+* per placement that has toasts, each toast an `<li>` animated in and out by `ScaleFade`. It also
+* pauses a region's timers while the pointer is over it or focus is inside it (and every region
+* while the tab is hidden), binds F8 to reach the newest toasts, and dismisses the focused toast
+* on Escape.
+*
+* `ToastProvider` loads this module with `React.lazy` when the first toast is shown, so
+* `framer-motion` (through `ScaleFade`) is only needed once an app shows a toast.
+*/
+/** Placements in DOM order. */
+var TOAST_PLACEMENTS = [
+	Placement.TOP_START,
+	Placement.TOP,
+	Placement.TOP_END,
+	Placement.BOTTOM_START,
+	Placement.BOTTOM,
+	Placement.BOTTOM_END
+];
+/** The region's accessible name. */
+var REGION_LABEL = "Notifications";
+var NO_ENTRIES = [];
+/**
+* A placement region. Takes no pointer input itself (only its items do). `--gx-toast-inset` is
+* the distance from the screen edges: `space[24]`, or `space[16]` on narrow screens.
+*/
+var Region = /*#__PURE__*/ styled("ol")({
+	name: "Region",
+	class: "gx-ToastViewport-Region-rut9ebb",
+	propsAsIs: false
+});
+/** Side, alignment and order per placement: the newest toast is nearest the screen edge. */
+var TOAST_PLACEMENT_TO_CSS_MAP = {
+	[Placement.TOP_START]: "gx-ToastViewport-Placement_TOP_START-puv7dc9",
+	[Placement.TOP]: "gx-ToastViewport-Placement_TOP-p79888u",
+	[Placement.TOP_END]: "gx-ToastViewport-Placement_TOP_END-po8x2as",
+	[Placement.BOTTOM_START]: "gx-ToastViewport-Placement_BOTTOM_START-p92b9bh",
+	[Placement.BOTTOM]: "gx-ToastViewport-Placement_BOTTOM-p1y493wv",
+	[Placement.BOTTOM_END]: "gx-ToastViewport-Placement_BOTTOM_END-pym40ia"
+};
+/** One toast; takes pointer input. */
+var Item = /*#__PURE__*/ styled("li")({
+	name: "Item",
+	class: "gx-ToastViewport-Item-iktx1uh",
+	propsAsIs: false
+});
+/** ScaleFade grows each toast from the screen edge it belongs to. */
+var TOAST_PLACEMENT_TO_TRANSFORM_ORIGIN_MAP = {
+	[Placement.TOP_START]: "gx-ToastViewport-Placement_TOP_START-pat4pzx",
+	[Placement.TOP]: "gx-ToastViewport-Placement_TOP-p18lapkd",
+	[Placement.TOP_END]: "gx-ToastViewport-Placement_TOP_END-p1lcgtv1",
+	[Placement.BOTTOM_START]: "gx-ToastViewport-Placement_BOTTOM_START-p1i0hsic",
+	[Placement.BOTTOM]: "gx-ToastViewport-Placement_BOTTOM-pim0uhi",
+	[Placement.BOTTOM_END]: "gx-ToastViewport-Placement_BOTTOM_END-p18eqp6y"
+};
+/** Whether `element` can take focus back. */
+function isFocusable(element) {
+	return (element instanceof HTMLElement || element instanceof SVGElement) && element.isConnected;
+}
+/** One toast in its region; hands focus back when it closes while holding it. */
+function ToastItem({ entry, store, returnFocusRef }) {
+	const itemRef = useRef(null);
+	const { options, id } = entry;
+	useEffect(() => {
+		if (entry.isOpen) return;
+		const item = itemRef.current;
+		const returnTo = returnFocusRef.current;
+		if (item?.contains(document.activeElement) && isFocusable(returnTo)) returnTo.focus();
+	}, [entry.isOpen, returnFocusRef]);
+	const handleKeyDown = (event) => {
+		if (event.key !== "Escape" || event.defaultPrevented) return;
+		event.preventDefault();
+		store.dismiss(id);
+	};
+	return /* @__PURE__ */ jsx(Item, {
+		ref: itemRef,
+		onKeyDown: handleKeyDown,
+		children: /* @__PURE__ */ jsx(ScaleFade, {
+			isOpen: entry.isOpen,
+			shouldAnimateOnMount: true,
+			className: TOAST_PLACEMENT_TO_TRANSFORM_ORIGIN_MAP[options.placement],
+			children: /* @__PURE__ */ jsx(Toast, {
+				variant: options.variant,
+				header: options.header,
+				...options.description === void 0 ? {} : { description: options.description },
+				...options.icon === void 0 ? {} : { icon: options.icon },
+				...options.action === void 0 ? {} : { action: {
+					label: options.action.label,
+					onClick: () => {
+						options.action?.onClick();
+						store.dismiss(id);
+					}
+				} },
+				isLoading: options.isLoading,
+				onDismiss: () => store.dismiss(id)
+			})
+		})
+	});
+}
+/** One placement region: pauses its timers while hovered or focused. */
+function ToastRegion({ placement, entries, store, returnFocusRef, regionRefs }) {
+	const isPointerInsideRef = useRef(false);
+	const isFocusInsideRef = useRef(false);
+	const syncPause = () => store.setPlacementPaused(placement, isPointerInsideRef.current || isFocusInsideRef.current);
+	useEffect(() => () => store.setPlacementPaused(placement, false), [store, placement]);
+	const handleFocus = (event) => {
+		event.stopPropagation();
+		if (event.currentTarget.contains(event.relatedTarget)) return;
+		isFocusInsideRef.current = true;
+		syncPause();
+	};
+	const handleBlur = (event) => {
+		if (event.currentTarget.contains(event.relatedTarget)) return;
+		isFocusInsideRef.current = false;
+		syncPause();
+	};
+	/**
+	* Tab moves through the region's buttons natively (kept from an open modal's trap, as focus
+	* is); Escape on the region itself dismisses its newest open toast.
+	*/
+	const handleKeyDown = (event) => {
+		if (event.key === "Tab") {
+			event.stopPropagation();
+			return;
+		}
+		if (event.key !== "Escape" || event.defaultPrevented) return;
+		if (event.target !== event.currentTarget) return;
+		const newest = entries.findLast((entry) => entry.isOpen);
+		if (newest === void 0) return;
+		event.preventDefault();
+		store.dismiss(newest.id);
+		const returnTo = returnFocusRef.current;
+		if (isFocusable(returnTo)) returnTo.focus();
+	};
+	return /* @__PURE__ */ jsx(Region, {
+		ref: (node) => {
+			if (node === null) regionRefs.delete(placement);
+			else regionRefs.set(placement, node);
+		},
+		"aria-label": REGION_LABEL,
+		tabIndex: -1,
+		className: cx(TOAST_PLACEMENT_TO_CSS_MAP[placement]),
+		onPointerEnter: () => {
+			isPointerInsideRef.current = true;
+			syncPause();
+		},
+		onPointerLeave: () => {
+			isPointerInsideRef.current = false;
+			syncPause();
+		},
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		onKeyDown: handleKeyDown,
+		children: entries.map((entry) => /* @__PURE__ */ jsx(ToastItem, {
+			entry,
+			store,
+			returnFocusRef
+		}, `${entry.id}:${entry.sequence}`))
+	});
+}
+/** @internal Loaded by ToastProvider; apps use useToast. Renders the placement regions. */
+function ToastViewport({ store }) {
+	const entries = useSyncExternalStore(store.subscribe, store.getEntries, () => NO_ENTRIES);
+	const returnFocusRef = useRef(null);
+	const regionRefs = useRef(/* @__PURE__ */ new Map()).current;
+	useEffect(() => {
+		const update = () => store.setHidden(document.visibilityState === "hidden");
+		update();
+		document.addEventListener("visibilitychange", update);
+		return () => {
+			document.removeEventListener("visibilitychange", update);
+			store.setHidden(false);
+		};
+	}, [store]);
+	const newest = entries.filter((entry) => entry.isOpen).reduce((latest, entry) => latest === void 0 || entry.sequence > latest.sequence ? entry : latest, void 0);
+	useHotkey("f8", () => {
+		if (newest === void 0) return;
+		const region = regionRefs.get(newest.options.placement);
+		if (region === void 0) return;
+		if (!region.contains(document.activeElement)) returnFocusRef.current = document.activeElement;
+		region.focus();
+	}, {
+		shouldPreventDefault: true,
+		isEnabled: newest !== void 0
+	});
+	return /* @__PURE__ */ jsx(Fragment$1, { children: TOAST_PLACEMENTS.map((placement) => {
+		const placed = entries.filter((entry) => entry.options.placement === placement);
+		if (placed.length === 0) return null;
+		return /* @__PURE__ */ jsx(ToastRegion, {
+			placement,
+			entries: placed,
+			store,
+			returnFocusRef,
+			regionRefs
+		}, placement);
+	}) });
+}
+ToastViewport.displayName = "ToastViewport";
+//#endregion
+export { ToastViewport as default };