@octanejs/base-ui 0.1.50 → 0.1.52

package/src/toast.ts

@@ -1,2462 +0,0 @@
-// Ported from .base-ui/packages/react/src/toast/ (v1.6.0) — Phase 3g.
-//
-// Toast is the one overlay family that is NOT driven by a trigger and a floating store. Toasts are
-// created imperatively — from `useToastManager().add()` inside a component, or from a
-// `createToastManager()` handle outside React entirely — and live in a `ToastStore` that owns the
-// list, the per-toast auto-dismiss timers, and the pause/resume rules (hover, focus, window blur,
-// touch). `Toast.Viewport` is a live region that renders them; `Toast.Root` is one toast, including
-// its own pointer-drag swipe-to-dismiss.
-//
-// SCOPE NOTE — the migration plan said this phase also lands `useSwipeDismiss` (1,208 loc) because
-// "it is shared with Drawer". That is wrong for 1.6.0: Toast implements its swipe inline in
-// `ToastRoot` and imports only two pure geometry helpers (`getDisplacement`, `getElementTransform`)
-// from that file, which are inlined here. The hook itself has exactly two consumers, both Drawer
-// (`DrawerViewport`, `DrawerSwipeArea`), so it moves to Phase 6 where it is actually used.
-//
-// octane adaptations:
-//   - components are `createElement`, not JSX; `forwardRef` → ref-as-prop; each component takes its
-//     per-call-site slot from `S('…')` and derives every composed hook's slot via `subSlot`;
-//   - `ReactDOM.flushSync` → octane `flushSync`;
-//   - native, delegated events, so `event.nativeEvent` collapses to `event`;
-//   - `React.createContext`/`useContext` → octane's; `useIsoLayoutEffect` → `useLayoutEffect`;
-//   - `useId` → `useBaseUiId` for element ids (Title/Description), matching the rest of the binding;
-//     the toast IDS themselves come from `generateId`, because they are minted outside render;
-//   - this package carries NO `process.env.NODE_ENV` branches.
-import {
-	createContext,
-	createElement,
-	Fragment,
-	useContext,
-	useMemo,
-	useRef,
-	useState,
-	useEffect,
-	useLayoutEffect,
-	useId,
-	flushSync,
-} from 'octane';
-
-import { S, subSlot } from './internal';
-import { useRenderElement } from './utils/useRenderElement';
-import { usePositioner } from './utils/usePositioner';
-import { useButton } from './utils/useButton';
-import { useStableCallback } from './utils/useStableCallback';
-import { useRefWithInit } from './utils/useRefWithInit';
-import { useOnMount } from './utils/useOnMount';
-import { useTimeout, Timeout } from './utils/useTimeout';
-import { useOpenChangeComplete } from './utils/useOpenChangeComplete';
-import { generateId } from './utils/generateId';
-import { ownerDocument, ownerWindow } from './utils/owner';
-import { addEventListener } from './utils/addEventListener';
-import { mergeCleanups } from './utils/mergeCleanups';
-import { visuallyHidden } from './utils/visuallyHidden';
-import { inertValue } from './utils/inertValue';
-import { EMPTY_OBJECT } from './utils/empty';
-import { NOOP } from './utils/noop';
-import { isElement } from './utils/dom';
-import { ReactStore } from './utils/store/ReactStore';
-import { createSelector } from './utils/store/createSelector';
-import { transitionStatusMapping } from './utils/useTransitionStatus';
-import type { TransitionStatus } from './utils/useTransitionStatus';
-import type { StateAttributesMapping } from './utils/getStateAttributesProps';
-import { matchesFocusVisible as isFocusVisible } from './utils/matchesFocusVisible';
-import { activeElement, contains } from './utils/floating/element';
-import { getTarget } from './utils/composite/list-utils';
-import { FocusGuard } from './utils/floating/FocusGuard';
-import { FloatingPortalLite } from './utils/FloatingPortalLite';
-import { useFloatingRootContext } from './utils/floating/useFloatingRootContext';
-import {
-	useAnchorPositioning,
-	type Align,
-	type Side,
-	type UseAnchorPositioningSharedParameters,
-} from './utils/useAnchorPositioning';
-import {
-	POPUP_COLLISION_AVOIDANCE,
-	BASE_UI_SWIPE_IGNORE_SELECTOR,
-	LEGACY_SWIPE_IGNORE_SELECTOR,
-} from './utils/constants';
-
-type HTMLProps = Record<string, any>;
-
-export type SwipeDirection = 'up' | 'down' | 'left' | 'right';
-
-// --- CSS variables ------------------------------------------------------------
-
-export const ToastRootCssVars = {
-	/** The index of the toast in the list. */
-	index: '--toast-index',
-	/** The vertical pixel offset of the toast in the list when expanded. */
-	offsetY: '--toast-offset-y',
-	/** The measured natural height of the toast in pixels. */
-	height: '--toast-height',
-	/** The horizontal swipe movement of the toast. */
-	swipeMovementX: '--toast-swipe-movement-x',
-	/** The vertical swipe movement of the toast. */
-	swipeMovementY: '--toast-swipe-movement-y',
-} as const;
-
-export const ToastViewportCssVars = {
-	/** The height of the frontmost toast. */
-	frontmostHeight: '--toast-frontmost-height',
-} as const;
-
-export const ToastPositionerCssVars = {
-	availableWidth: '--available-width',
-	availableHeight: '--available-height',
-	anchorWidth: '--anchor-width',
-	anchorHeight: '--anchor-height',
-	transformOrigin: '--transform-origin',
-} as const;
-
-// --- Toast object -------------------------------------------------------------
-
-export interface ToastObject<Data extends object = any> {
-	/** The unique identifier for the toast. */
-	id: string;
-	/** The ref for the toast. */
-	ref?: { current: HTMLElement | null } | undefined;
-	/** The title of the toast. */
-	title?: any;
-	/**
-	 * The type of the toast. Used to conditionally style the toast, including conditionally
-	 * rendering elements based on the type.
-	 */
-	type?: string | undefined;
-	/** The description of the toast. */
-	description?: any;
-	/**
-	 * The amount of time (in ms) before the toast is auto dismissed. `0` prevents auto-dismissal.
-	 * @default 5000
-	 */
-	timeout?: number | undefined;
-	/**
-	 * The priority of the toast. `low` announces politely, `high` announces urgently.
-	 * @default 'low'
-	 */
-	priority?: 'low' | 'high' | undefined;
-	/** The transition status of the toast. */
-	transitionStatus?: 'starting' | 'ending' | undefined;
-	/** A counter that increments whenever the toast is updated or upserted. */
-	updateKey?: number | undefined;
-	/** Whether the toast was limited because the toast limit was exceeded. */
-	limited?: boolean | undefined;
-	/** The height of the toast. */
-	height?: number | undefined;
-	/** Called when the toast is closed. */
-	onClose?: (() => void) | undefined;
-	/** Called when the toast is removed from the list after any closing animations complete. */
-	onRemove?: (() => void) | undefined;
-	/** The props for the action button. */
-	actionProps?: HTMLProps | undefined;
-	/** Props forwarded to the toast positioner element when rendering anchored toasts. */
-	positionerProps?: HTMLProps | undefined;
-	/** Custom data for the toast. */
-	data?: Data | undefined;
-}
-
-export interface ToastManagerAddOptions<Data extends object = any> extends Omit<
-	ToastObject<Data>,
-	'id' | 'height' | 'ref' | 'limited' | 'updateKey'
-> {
-	/**
-	 * The unique identifier for the toast. Adding a toast with an existing ID updates it in place
-	 * and refreshes its auto-dismiss timer.
-	 */
-	id?: string | undefined;
-}
-
-export interface ToastManagerUpdateOptions<Data extends object = any> extends Partial<
-	Omit<ToastObject<Data>, 'id' | 'ref' | 'height' | 'transitionStatus' | 'limited' | 'updateKey'>
-> {}
-
-export interface ToastManagerPromiseOptions<Value, Data extends object = any> {
-	loading: string | ToastManagerUpdateOptions<Data>;
-	success:
-		| string
-		| ToastManagerUpdateOptions<Data>
-		| ((result: Value) => string | ToastManagerUpdateOptions<Data>);
-	error:
-		| string
-		| ToastManagerUpdateOptions<Data>
-		| ((error: any) => string | ToastManagerUpdateOptions<Data>);
-}
-
-/** Ported from `toast/utils/resolvePromiseOptions.ts`. */
-export function resolvePromiseOptions<T, Data extends object>(
-	options:
-		| string
-		| ToastManagerUpdateOptions<Data>
-		| ((result: T) => string | ToastManagerUpdateOptions<Data>),
-	result?: T,
-): ToastManagerUpdateOptions<Data> {
-	if (typeof options === 'string') {
-		return { description: options };
-	}
-
-	if (typeof options === 'function') {
-		const resolvedOptions = options(result as T);
-		return typeof resolvedOptions === 'string' ? { description: resolvedOptions } : resolvedOptions;
-	}
-
-	return options;
-}
-
-// --- Store --------------------------------------------------------------------
-
-type ToastInternalUpdateOptions<Data extends object> = Partial<Omit<ToastObject<Data>, 'id'>>;
-type UpdateToastBehavior = {
-	resetTimer?: boolean | undefined;
-	markUpdated?: boolean | undefined;
-};
-type RemoveToastBehavior = {
-	skipOnRemove?: boolean | undefined;
-};
-
-export type ToastState = {
-	toasts: ToastObject<any>[];
-	toastMetadata: Map<string, ToastMetadata>;
-	hovering: boolean;
-	focused: boolean;
-	timeout: number;
-	limit: number;
-	isWindowFocused: boolean;
-	viewport: HTMLElement | null;
-	prevFocusElement: HTMLElement | null;
-};
-
-type ToastMetadata = {
-	value: ToastObject<any>;
-	domIndex: number;
-	visibleIndex: number;
-	offsetY: number;
-};
-
-type InitialToastState = Omit<ToastState, 'toastMetadata'>;
-
-function createToastMetadata(toasts: ToastObject<any>[]) {
-	const metadata = new Map<string, ToastMetadata>();
-	let visibleIndex = 0;
-	let offsetY = 0;
-
-	toasts.forEach((toast, toastIndex) => {
-		const isEnding = toast.transitionStatus === 'ending';
-		metadata.set(toast.id, {
-			value: toast,
-			domIndex: toastIndex,
-			visibleIndex: isEnding ? -1 : visibleIndex,
-			offsetY,
-		});
-
-		offsetY += toast.height || 0;
-
-		if (!isEnding) {
-			visibleIndex += 1;
-		}
-	});
-
-	return metadata;
-}
-
-// Marks the active (non-ending) toasts beyond `limit` as limited. Callers pass toasts in
-// newest-first order, so the newest `limit` toasts stay visible and the rest are flagged. Returns
-// the same toast reference when its `limited` flag is unchanged to avoid unnecessary re-renders.
-function applyLimited(toasts: ToastObject<any>[], limit: number): ToastObject<any>[] {
-	let activeIndex = 0;
-	return toasts.map((toast) => {
-		if (toast.transitionStatus === 'ending') {
-			return toast;
-		}
-		const limited = activeIndex >= limit;
-		activeIndex += 1;
-		return toast.limited === limited ? toast : { ...toast, limited };
-	});
-}
-
-const toastMetadataSelector = (state: ToastState) => state.toastMetadata;
-
-export const toastSelectors = {
-	toasts: createSelector((state: ToastState) => state.toasts),
-	isEmpty: createSelector((state: ToastState) => state.toasts.length === 0),
-	toast: createSelector(
-		toastMetadataSelector,
-		(toastMetadata: Map<string, ToastMetadata>, id: string) => toastMetadata.get(id)?.value,
-	),
-	toastIndex: createSelector(
-		toastMetadataSelector,
-		(toastMetadata: Map<string, ToastMetadata>, id: string) =>
-			toastMetadata.get(id)?.domIndex ?? -1,
-	),
-	toastOffsetY: createSelector(
-		toastMetadataSelector,
-		(toastMetadata: Map<string, ToastMetadata>, id: string) => toastMetadata.get(id)?.offsetY ?? 0,
-	),
-	toastVisibleIndex: createSelector(
-		toastMetadataSelector,
-		(toastMetadata: Map<string, ToastMetadata>, id: string) =>
-			toastMetadata.get(id)?.visibleIndex ?? -1,
-	),
-	hovering: createSelector((state: ToastState) => state.hovering),
-	focused: createSelector((state: ToastState) => state.focused),
-	expanded: createSelector((state: ToastState) => state.hovering || state.focused),
-	expandedOrOutOfFocus: createSelector(
-		(state: ToastState) => state.hovering || state.focused || !state.isWindowFocused,
-	),
-	prevFocusElement: createSelector((state: ToastState) => state.prevFocusElement),
-};
-
-interface TimerInfo {
-	timeout?: Timeout | undefined;
-	start: number;
-	delay: number;
-	remaining: number;
-	callback: () => void;
-}
-
-export class ToastStore extends ReactStore<ToastState, {}, typeof toastSelectors> {
-	private timers = new Map<string, TimerInfo>();
-
-	private areTimersPaused = false;
-
-	constructor(initialState: InitialToastState) {
-		super(
-			{
-				...initialState,
-				toastMetadata: createToastMetadata(initialState.toasts),
-			},
-			{},
-			toastSelectors,
-		);
-	}
-
-	setFocused(focused: boolean) {
-		this.set('focused', focused);
-	}
-
-	setHovering(hovering: boolean) {
-		this.set('hovering', hovering);
-	}
-
-	setIsWindowFocused(isWindowFocused: boolean) {
-		this.set('isWindowFocused', isWindowFocused);
-	}
-
-	setPrevFocusElement(prevFocusElement: HTMLElement | null) {
-		this.set('prevFocusElement', prevFocusElement);
-	}
-
-	setViewport = (viewport: HTMLElement | null) => {
-		this.set('viewport', viewport);
-	};
-
-	syncProviderProps(props: Pick<ToastState, 'timeout' | 'limit'>) {
-		const limitChanged = this.state.limit !== props.limit;
-
-		if (this.state.timeout === props.timeout && !limitChanged) {
-			return;
-		}
-
-		const updates: Partial<ToastState> = {
-			timeout: props.timeout,
-			limit: props.limit,
-		};
-
-		if (limitChanged) {
-			const newToasts = applyLimited(this.state.toasts, props.limit);
-			updates.toasts = newToasts;
-			updates.toastMetadata = createToastMetadata(newToasts);
-		}
-
-		this.update(updates);
-	}
-
-	disposeEffect = () => {
-		return () => {
-			this.timers.forEach((timer) => {
-				timer.timeout?.clear();
-			});
-			this.timers.clear();
-		};
-	};
-
-	removeToast(toastId: string, behavior: RemoveToastBehavior = {}) {
-		const index = toastSelectors.toastIndex(this.state, toastId);
-		if (index === -1) {
-			return;
-		}
-
-		const toast = this.state.toasts[index];
-		if (!behavior.skipOnRemove) {
-			toast?.onRemove?.();
-		}
-
-		const newToasts = [...this.state.toasts];
-		newToasts.splice(index, 1);
-		this.setToasts(newToasts);
-	}
-
-	addToast = <Data extends object>(toast: ToastManagerAddOptions<Data>): string => {
-		const { timeout, limit } = this.state;
-		const id = toast.id || generateId('toast');
-
-		if (toast.id) {
-			const existingToast = toastSelectors.toast(this.state, toast.id);
-
-			if (existingToast) {
-				if (existingToast.transitionStatus === 'ending') {
-					this.removeToast(toast.id, { skipOnRemove: true });
-				} else {
-					const { id: ignoredId, transitionStatus: ignoredTransitionStatus, ...updates } = toast;
-					this.updateToastInternal(toast.id, updates, {
-						resetTimer: true,
-						markUpdated: true,
-					});
-					return toast.id;
-				}
-			}
-		}
-
-		const toastToAdd: ToastObject<Data> = {
-			...toast,
-			id,
-			updateKey: 0,
-			transitionStatus: 'starting',
-		};
-
-		const updatedToasts = [toastToAdd, ...this.state.toasts];
-		this.setToasts(applyLimited(updatedToasts, limit));
-
-		const duration = toastToAdd.timeout ?? timeout;
-		if (toastToAdd.type !== 'loading' && duration > 0) {
-			this.scheduleTimer(id, duration, () => this.closeToast(id));
-		}
-
-		if (toastSelectors.expandedOrOutOfFocus(this.state)) {
-			this.pauseTimers();
-		}
-
-		return id;
-	};
-
-	updateToast = <Data extends object>(id: string, updates: ToastManagerUpdateOptions<Data>) => {
-		this.updateToastInternal(id, updates, { markUpdated: true });
-	};
-
-	updateToastInternal = <Data extends object>(
-		id: string,
-		updates: ToastInternalUpdateOptions<Data>,
-		behavior: UpdateToastBehavior = {},
-	) => {
-		const { timeout, toasts } = this.state;
-		const prevToast = toastSelectors.toast(this.state, id) ?? null;
-		if (!prevToast) {
-			return;
-		}
-
-		// Ignore updates for toasts that are already closing. This prevents races where async
-		// updates (e.g. promise success/error) can block a dismissal from completing.
-		if (prevToast.transitionStatus === 'ending') {
-			return;
-		}
-
-		const nextToast: ToastObject<Data> = {
-			...prevToast,
-			...updates,
-			...(behavior.markUpdated && {
-				updateKey: (prevToast.updateKey ?? 0) + 1,
-			}),
-		};
-
-		this.setToasts(toasts.map((toast) => (toast.id === id ? nextToast : toast)));
-
-		const nextTimeout = nextToast.timeout ?? timeout;
-		const prevTimeout = prevToast?.timeout ?? timeout;
-
-		const timeoutUpdated = Object.hasOwn(updates, 'timeout');
-
-		const shouldHaveTimer =
-			nextToast.transitionStatus !== 'ending' && nextToast.type !== 'loading' && nextTimeout > 0;
-
-		const hasTimer = this.timers.has(id);
-		const timeoutChanged = prevTimeout !== nextTimeout;
-		const wasLoading = prevToast?.type === 'loading';
-
-		if (!shouldHaveTimer && hasTimer) {
-			this.clearTimer(id);
-			return;
-		}
-
-		// Schedule or reschedule timer if needed
-		if (
-			shouldHaveTimer &&
-			(!hasTimer || timeoutChanged || timeoutUpdated || wasLoading || behavior.resetTimer)
-		) {
-			this.clearTimer(id);
-
-			this.scheduleTimer(id, nextTimeout, () => this.closeToast(id));
-
-			if (toastSelectors.expandedOrOutOfFocus(this.state)) {
-				this.pauseTimers();
-			}
-		}
-	};
-
-	closeToast = (toastId?: string) => {
-		const closeAll = toastId === undefined;
-		const { limit, toasts } = this.state;
-		let toastsToClose: ToastObject<any>[];
-
-		if (closeAll) {
-			toastsToClose = toasts;
-			this.clearTimers();
-		} else {
-			const toast = toastSelectors.toast(this.state, toastId);
-			if (!toast) {
-				return;
-			}
-			toastsToClose = [toast];
-			this.clearTimer(toastId);
-		}
-
-		const endingToasts = toasts.map((item) =>
-			closeAll || item.id === toastId
-				? { ...item, transitionStatus: 'ending' as const, height: 0 }
-				: item,
-		);
-		const newToasts = applyLimited(endingToasts, limit);
-
-		const updates: Partial<ToastState> = {
-			toasts: newToasts,
-			toastMetadata: createToastMetadata(newToasts),
-		};
-		const hasActiveToasts = newToasts.some((toast) => toast.transitionStatus !== 'ending');
-		if (!hasActiveToasts) {
-			updates.hovering = false;
-			updates.focused = false;
-		}
-		this.update(updates);
-
-		toastsToClose.forEach((toast) => {
-			if (toast.transitionStatus !== 'ending') {
-				toast.onClose?.();
-			}
-		});
-
-		this.handleFocusManagement(toastId);
-	};
-
-	promiseToast = <Value, Data extends object>(
-		promiseValue: Promise<Value>,
-		options: ToastManagerPromiseOptions<Value, Data>,
-	): Promise<Value> => {
-		// Create a loading toast (which does not auto-dismiss).
-		const loadingOptions = resolvePromiseOptions<never, Data>(options.loading);
-		const id = this.addToast({
-			...loadingOptions,
-			type: 'loading',
-		});
-
-		const handledPromise = promiseValue
-			.then((result: Value) => {
-				const successOptions = resolvePromiseOptions<Value, Data>(options.success, result);
-				this.updateToast(id, {
-					...successOptions,
-					type: 'success',
-					timeout: successOptions.timeout,
-				});
-
-				return result;
-			})
-			.catch((error) => {
-				const errorOptions = resolvePromiseOptions<any, Data>(options.error, error);
-				this.updateToast(id, {
-					...errorOptions,
-					type: 'error',
-					timeout: errorOptions.timeout,
-				});
-
-				return Promise.reject(error);
-			});
-
-		// Private API used exclusively by `Manager` to hand the promise back to the manager after it
-		// is handled here.
-		if ({}.hasOwnProperty.call(options, 'setPromise')) {
-			(options as any).setPromise(handledPromise);
-		}
-
-		return handledPromise;
-	};
-
-	pauseTimers() {
-		if (this.areTimersPaused) {
-			return;
-		}
-		this.areTimersPaused = true;
-		this.timers.forEach((timer) => {
-			if (timer.timeout) {
-				timer.timeout.clear();
-				const elapsed = Date.now() - timer.start;
-				const remaining = timer.delay - elapsed;
-				timer.remaining = remaining > 0 ? remaining : 0;
-			}
-		});
-	}
-
-	resumeTimers() {
-		if (!this.areTimersPaused) {
-			return;
-		}
-		this.areTimersPaused = false;
-		this.timers.forEach((timer, id) => {
-			timer.remaining = timer.remaining > 0 ? timer.remaining : timer.delay;
-			timer.timeout ??= Timeout.create();
-			timer.timeout.start(timer.remaining, () => {
-				this.handleTimerFired(id);
-				timer.callback();
-			});
-			timer.start = Date.now();
-		});
-	}
-
-	restoreFocusToPrevElement() {
-		this.state.prevFocusElement?.focus({ preventScroll: true });
-	}
-
-	handleDocumentPointerDown = (event: Event) => {
-		if ((event as PointerEvent).pointerType !== 'touch') {
-			return;
-		}
-
-		const target = getTarget(event) as Element | null;
-		if (contains(this.state.viewport, target)) {
-			return;
-		}
-
-		// This is explicit touch activity outside the viewport, so the paused interaction state
-		// should end even if the window focus state is unchanged.
-		this.resumeTimers();
-		this.update({ hovering: false, focused: false });
-	};
-
-	private scheduleTimer(id: string, delay: number, callback: () => void) {
-		const start = Date.now();
-		const shouldStartActive = !toastSelectors.expandedOrOutOfFocus(this.state);
-		const currentTimeout = shouldStartActive ? Timeout.create() : undefined;
-
-		currentTimeout?.start(delay, () => {
-			this.handleTimerFired(id);
-			callback();
-		});
-
-		this.timers.set(id, {
-			timeout: currentTimeout,
-			start: shouldStartActive ? start : 0,
-			delay,
-			remaining: delay,
-			callback,
-		});
-	}
-
-	private clearTimers() {
-		this.timers.forEach((timer) => {
-			timer.timeout?.clear();
-		});
-		this.timers.clear();
-		this.areTimersPaused = false;
-	}
-
-	private clearTimer(id: string) {
-		const timer = this.timers.get(id);
-		timer?.timeout?.clear();
-		this.timers.delete(id);
-
-		this.resetPausedStateIfNoTimersRemain();
-	}
-
-	private handleTimerFired(id: string) {
-		this.timers.delete(id);
-		this.resetPausedStateIfNoTimersRemain();
-	}
-
-	private resetPausedStateIfNoTimersRemain() {
-		if (this.timers.size === 0) {
-			// No timers remain to keep paused; clear the flag so a fresh toast's running timer can
-			// be paused again on hover/focus.
-			this.areTimersPaused = false;
-		}
-	}
-
-	private setToasts(newToasts: ToastObject<any>[]) {
-		const updates: Partial<ToastState> = {
-			toasts: newToasts,
-			toastMetadata: createToastMetadata(newToasts),
-		};
-		if (newToasts.length === 0) {
-			updates.hovering = false;
-			updates.focused = false;
-		}
-		this.update(updates);
-	}
-
-	private handleFocusManagement(toastId: string | undefined) {
-		const activeEl = activeElement(ownerDocument(this.state.viewport));
-		if (
-			!this.state.viewport ||
-			!contains(this.state.viewport, activeEl) ||
-			!isFocusVisible(activeEl)
-		) {
-			return;
-		}
-
-		if (toastId === undefined) {
-			this.restoreFocusToPrevElement();
-			return;
-		}
-
-		const toasts = toastSelectors.toasts(this.state);
-		const currentIndex = toastSelectors.toastIndex(this.state, toastId);
-		let nextToast: ToastObject<any> | null = null;
-
-		// Try to find the next toast that isn't animating out
-		let index = currentIndex + 1;
-		while (index < toasts.length) {
-			if (toasts[index].transitionStatus !== 'ending') {
-				nextToast = toasts[index];
-				break;
-			}
-			index += 1;
-		}
-
-		// Go backwards if no next toast is found
-		if (!nextToast) {
-			index = currentIndex - 1;
-			while (index >= 0) {
-				if (toasts[index].transitionStatus !== 'ending') {
-					nextToast = toasts[index];
-					break;
-				}
-				index -= 1;
-			}
-		}
-
-		if (nextToast) {
-			nextToast.ref?.current?.focus();
-		} else {
-			this.restoreFocusToPrevElement();
-		}
-	}
-}
-
-// --- Manager (outside-React handle) -------------------------------------------
-
-export interface ToastManagerEvent {
-	action: 'add' | 'close' | 'update' | 'promise';
-	options: any;
-}
-
-export interface ToastManager<Data extends object = any> {
-	' subscribe': (listener: (data: ToastManagerEvent) => void) => () => void;
-	add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) => string;
-	close: (id?: string) => void;
-	update: <T extends Data = Data>(id: string, updates: ToastManagerUpdateOptions<T>) => void;
-	promise: <Value, T extends Data = Data>(
-		promiseValue: Promise<Value>,
-		options: ToastManagerPromiseOptions<Value, T>,
-	) => Promise<Value>;
-}
-
-/** Creates a new toast manager, for driving toasts from outside a component. */
-export function createToastManager<Data extends object = any>(): ToastManager<Data> {
-	const listeners = new Set<(data: ToastManagerEvent) => void>();
-
-	function emit(data: ToastManagerEvent) {
-		listeners.forEach((listener) => listener(data));
-	}
-
-	return {
-		// Private aside from ToastProvider needing to access it.
-		' subscribe': function subscribe(listener: (data: ToastManagerEvent) => void) {
-			listeners.add(listener);
-			return () => {
-				listeners.delete(listener);
-			};
-		},
-
-		add<T extends Data = Data>(options: ToastManagerAddOptions<T>): string {
-			const id = options.id || generateId('toast');
-			const toastToAdd: ToastObject<T> = {
-				...options,
-				id,
-				transitionStatus: 'starting',
-			};
-
-			emit({ action: 'add', options: toastToAdd });
-
-			return id;
-		},
-
-		close(id?: string): void {
-			emit({ action: 'close', options: { id } });
-		},
-
-		update<T extends Data = Data>(id: string, updates: ToastManagerUpdateOptions<T>): void {
-			emit({ action: 'update', options: { ...updates, id } });
-		},
-
-		promise<Value, T extends Data = Data>(
-			promiseValue: Promise<Value>,
-			options: ToastManagerPromiseOptions<Value, T>,
-		): Promise<Value> {
-			let handledPromise = promiseValue;
-
-			emit({
-				action: 'promise',
-				options: {
-					...options,
-					promise: promiseValue,
-					setPromise(promise: Promise<Value>) {
-						handledPromise = promise;
-					},
-				},
-			});
-
-			return handledPromise;
-		},
-	};
-}
-
-// --- Contexts -----------------------------------------------------------------
-
-const ToastContext = createContext<ToastStore | undefined>(undefined);
-
-export function useToastProviderContext(): ToastStore {
-	const context = useContext(ToastContext);
-	if (!context) {
-		throw new Error('Base UI: useToastManager must be used within <Toast.Provider>.');
-	}
-	return context;
-}
-
-export interface ToastRootContextValue {
-	toast: ToastObject<any>;
-	rootRef: { current: HTMLElement | null };
-	titleId: string | undefined;
-	setTitleId: (value: string | undefined) => void;
-	descriptionId: string | undefined;
-	setDescriptionId: (value: string | undefined) => void;
-	swiping: boolean;
-	swipeDirection: SwipeDirection | undefined;
-	index: number;
-	visibleIndex: number;
-	expanded: boolean;
-	recalculateHeight: (flush?: boolean) => void;
-}
-
-const ToastRootContext = createContext<ToastRootContextValue | undefined>(undefined);
-
-export function useToastRootContext(): ToastRootContextValue {
-	const context = useContext(ToastRootContext);
-	if (!context) {
-		throw new Error(
-			'Base UI: ToastRootContext is missing. Toast parts must be used within <Toast.Root>.',
-		);
-	}
-	return context;
-}
-
-export interface ToastPositionerContextValue {
-	side: Side;
-	align: Align;
-	arrowRef: { current: Element | null };
-	arrowUncentered: boolean;
-	arrowStyles: Record<string, any>;
-}
-
-const ToastPositionerContext = createContext<ToastPositionerContextValue | undefined>(undefined);
-
-export function useToastPositionerContext(): ToastPositionerContextValue {
-	const context = useContext(ToastPositionerContext);
-	if (context === undefined) {
-		throw new Error(
-			'Base UI: ToastPositionerContext is missing. ToastPositioner parts must be placed within <Toast.Positioner>.',
-		);
-	}
-	return context;
-}
-
-// --- useToastManager ----------------------------------------------------------
-
-export interface UseToastManagerReturnValue<Data extends object = any> {
-	toasts: ToastObject<Data>[];
-	add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) => string;
-	close: (toastId?: string) => void;
-	update: <T extends Data = Data>(toastId: string, options: ToastManagerUpdateOptions<T>) => void;
-	promise: <Value, T extends Data = Data>(
-		promise: Promise<Value>,
-		options: ToastManagerPromiseOptions<Value, T>,
-	) => Promise<Value>;
-}
-
-/**
- * Returns the array of toasts and methods to manage them.
- *
- * SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
- */
-export function useToastManager<Data extends object = any>(
-	slotArg?: symbol,
-): UseToastManagerReturnValue<Data> {
-	const slot = slotArg ?? S('useToastManager');
-	const store = useContext(ToastContext);
-
-	if (!store) {
-		throw new Error('Base UI: useToastManager must be used within <Toast.Provider>.');
-	}
-
-	const toasts = store.useState('toasts', subSlot(slot, 'toasts'));
-
-	return useMemo(
-		() => ({
-			toasts,
-			add: store.addToast,
-			close: store.closeToast,
-			update: store.updateToast,
-			promise: store.promiseToast,
-		}),
-		[toasts, store],
-		subSlot(slot, 'm'),
-	);
-}
-
-// --- Provider -----------------------------------------------------------------
-
-function ToastProvider(props: any): any {
-	const slot = S('ToastProvider');
-	const { children, timeout = 5000, limit = 3, toastManager } = props;
-
-	const store = useRefWithInit<ToastStore>(
-		() =>
-			new ToastStore({
-				timeout,
-				limit,
-				viewport: null,
-				toasts: [],
-				hovering: false,
-				focused: false,
-				isWindowFocused: true,
-				prevFocusElement: null,
-			}),
-		subSlot(slot, 'store'),
-	).current;
-
-	useOnMount(store.disposeEffect, subSlot(slot, 'dispose'));
-
-	useEffect(
-		function subscribeToToastManager() {
-			if (!toastManager) {
-				return undefined;
-			}
-
-			const unsubscribe = toastManager[' subscribe'](({ action, options }: ToastManagerEvent) => {
-				const id = options.id;
-
-				if (action === 'promise' && options.promise) {
-					store.promiseToast(options.promise, options);
-				} else if (action === 'update' && id) {
-					store.updateToast(id, options);
-				} else if (action === 'close') {
-					store.closeToast(id);
-				} else {
-					store.addToast(options);
-				}
-			});
-
-			return unsubscribe;
-		},
-		[store, toastManager],
-		subSlot(slot, 'e:subscribe'),
-	);
-
-	// `limit` needs custom syncing because changing it must also recompute each toast's `limited`
-	// flag; `useSyncedValues` would only update the raw value.
-	useLayoutEffect(
-		() => {
-			store.syncProviderProps({ timeout, limit });
-		},
-		[store, timeout, limit],
-		subSlot(slot, 'e:sync'),
-	);
-
-	return createElement(ToastContext.Provider, { value: store, children });
-}
-
-// --- Viewport -----------------------------------------------------------------
-
-function ToastViewport(componentProps: any): any {
-	const slot = S('ToastViewport');
-	const { render, className, style, children, ref: forwardedRef, ...elementProps } = componentProps;
-
-	const store = useToastProviderContext();
-	const windowFocusTimeout = useTimeout(subSlot(slot, 'wft'));
-
-	const handlingFocusGuardRef = useRef(false, subSlot(slot, 'hfg'));
-	const markedReadyForMouseLeaveRef = useRef(false, subSlot(slot, 'mrml'));
-	const touchActiveRef = useRef(false, subSlot(slot, 'touch'));
-
-	const isEmpty = store.useState('isEmpty', subSlot(slot, 'empty'));
-	const toasts = store.useState('toasts', subSlot(slot, 'toasts'));
-	const focused = store.useState('focused', subSlot(slot, 'focused'));
-	const expanded = store.useState('expanded', subSlot(slot, 'expanded'));
-	const prevFocusElement = store.useState('prevFocusElement', subSlot(slot, 'prevFocus'));
-	const frontmostHeight = toasts[0]?.height ?? 0;
-
-	const hasTransitioningToasts = useMemo(
-		() => toasts.some((toast: ToastObject) => toast.transitionStatus === 'ending'),
-		[toasts],
-		subSlot(slot, 'transitioning'),
-	);
-	const highPriorityToasts = useMemo(
-		() => toasts.filter((toast: ToastObject) => toast.priority === 'high'),
-		[toasts],
-		subSlot(slot, 'highPriority'),
-	);
-
-	// Listen globally for F6 so we can force-focus the viewport.
-	useEffect(
-		() => {
-			const viewport = store.state.viewport;
-			if (!viewport) {
-				return undefined;
-			}
-
-			function handleGlobalKeyDown(event: Event) {
-				if (isEmpty) {
-					return;
-				}
-
-				if ((event as KeyboardEvent).key === 'F6' && getTarget(event) !== viewport) {
-					event.preventDefault();
-					store.setPrevFocusElement(activeElement(ownerDocument(viewport)) as HTMLElement | null);
-					viewport?.focus({ preventScroll: true });
-					store.pauseTimers();
-					store.setFocused(true);
-				}
-			}
-
-			const win = ownerWindow(viewport);
-			return addEventListener(win, 'keydown', handleGlobalKeyDown);
-		},
-		[store, isEmpty],
-		subSlot(slot, 'e:f6'),
-	);
-
-	useEffect(
-		() => {
-			const viewport = store.state.viewport;
-			if (!viewport || isEmpty) {
-				return undefined;
-			}
-
-			const win = ownerWindow(viewport);
-
-			function handleWindowBlur(event: Event) {
-				if (getTarget(event) !== win) {
-					return;
-				}
-
-				store.setIsWindowFocused(false);
-				store.pauseTimers();
-			}
-
-			function handleWindowFocus(event: Event) {
-				if ((event as FocusEvent).relatedTarget) {
-					return;
-				}
-
-				const target = getTarget(event);
-				const activeEl = activeElement(ownerDocument(viewport));
-				if (
-					target === win ||
-					!contains(viewport, target as HTMLElement | null) ||
-					!isFocusVisible(activeEl)
-				) {
-					store.resumeTimers();
-				}
-
-				// Wait for the `handleFocus` event to fire.
-				windowFocusTimeout.start(0, () => store.setIsWindowFocused(true));
-			}
-
-			return mergeCleanups(
-				addEventListener(win, 'blur', handleWindowBlur, true),
-				addEventListener(win, 'focus', handleWindowFocus, true),
-			);
-		},
-		[
-			store,
-			windowFocusTimeout,
-			// `store.state.viewport` isn't available on the first render, since the portal node
-			// hasn't yet been created. This dependency ensures the window listeners are added once
-			// toasts have been created and the ref is available.
-			isEmpty,
-		],
-		subSlot(slot, 'e:window'),
-	);
-
-	useEffect(
-		() => {
-			const viewport = store.state.viewport;
-			if (!viewport || isEmpty) {
-				return undefined;
-			}
-
-			const doc = ownerDocument(viewport);
-			return addEventListener(doc, 'pointerdown', store.handleDocumentPointerDown, true);
-		},
-		[isEmpty, store],
-		subSlot(slot, 'e:pointerdown'),
-	);
-
-	function handleFocusGuard(event: FocusEvent) {
-		const viewport = store.state.viewport;
-		if (!viewport) {
-			return;
-		}
-
-		handlingFocusGuardRef.current = true;
-
-		// If we're coming off the container, move to the first toast that can hold focus, skipping
-		// toasts that are animating out or inert because they're limited.
-		if (event.relatedTarget === viewport) {
-			const firstFocusableToast = toasts.find(
-				(toast: ToastObject) => toast.transitionStatus !== 'ending' && !toast.limited,
-			);
-			if (firstFocusableToast) {
-				firstFocusableToast.ref?.current?.focus();
-			} else {
-				store.restoreFocusToPrevElement();
-			}
-		} else {
-			store.restoreFocusToPrevElement();
-		}
-	}
-
-	function handleKeyDown(event: KeyboardEvent) {
-		if (event.key === 'Tab' && event.shiftKey && getTarget(event) === store.state.viewport) {
-			event.preventDefault();
-			store.restoreFocusToPrevElement();
-			// Shift+Tab is explicit keyboard navigation out of the viewport.
-			store.resumeTimers();
-		}
-	}
-
-	function flushMouseLeave() {
-		const hasEndingToasts = store.state.toasts.some(
-			(toast: ToastObject) => toast.transitionStatus === 'ending',
-		);
-
-		if (hasEndingToasts || touchActiveRef.current || !markedReadyForMouseLeaveRef.current) {
-			return;
-		}
-
-		// Once transitions have finished, see if a mouseleave was already triggered but blocked from
-		// taking effect. If so, we can now safely collapse the viewport without restarting timers
-		// while the window is blurred.
-		if (store.state.isWindowFocused) {
-			store.resumeTimers();
-		}
-		store.setHovering(false);
-		markedReadyForMouseLeaveRef.current = false;
-	}
-
-	useEffect(flushMouseLeave, [hasTransitioningToasts, store], subSlot(slot, 'e:flushLeave'));
-
-	function handleMouseEnter() {
-		store.pauseTimers();
-		store.setHovering(true);
-		markedReadyForMouseLeaveRef.current = false;
-	}
-
-	function resumeTimersIfWindowFocused() {
-		if (store.state.isWindowFocused) {
-			store.resumeTimers();
-		}
-	}
-
-	function handleMouseLeave() {
-		const hasEndingToasts = store.state.toasts.some(
-			(toast: ToastObject) => toast.transitionStatus === 'ending',
-		);
-
-		if (hasEndingToasts || touchActiveRef.current) {
-			// When swiping to dismiss, wait until the transitions have settled or the touch
-			// interaction ends to avoid collapsing mid-gesture.
-			markedReadyForMouseLeaveRef.current = true;
-		} else {
-			resumeTimersIfWindowFocused();
-			store.setHovering(false);
-		}
-	}
-
-	function handlePointerDown(event: PointerEvent) {
-		if (event.pointerType === 'touch') {
-			touchActiveRef.current = true;
-		}
-	}
-
-	function handlePointerEnd(event: PointerEvent) {
-		if (event.pointerType !== 'touch') {
-			return;
-		}
-
-		touchActiveRef.current = false;
-		flushMouseLeave();
-	}
-
-	function handleFocus() {
-		if (handlingFocusGuardRef.current) {
-			handlingFocusGuardRef.current = false;
-			return;
-		}
-
-		if (focused) {
-			return;
-		}
-
-		// Only set focused when the active element is focus-visible. This prevents the viewport from
-		// staying expanded when clicking inside without keyboard navigation.
-		if (isFocusVisible(activeElement(ownerDocument(store.state.viewport)))) {
-			store.setFocused(true);
-			store.pauseTimers();
-		}
-	}
-
-	function handleBlur(event: FocusEvent) {
-		if (!focused || contains(store.state.viewport, event.relatedTarget as HTMLElement | null)) {
-			return;
-		}
-
-		store.setFocused(false);
-		resumeTimersIfWindowFocused();
-	}
-
-	const defaultProps: HTMLProps = {
-		tabIndex: -1,
-		role: 'region',
-		'aria-live': 'polite',
-		'aria-atomic': false,
-		'aria-relevant': 'additions text',
-		'aria-label': 'Notifications',
-		onMouseEnter: handleMouseEnter,
-		onMouseMove: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		onFocus: handleFocus,
-		onBlur: handleBlur,
-		onKeyDown: handleKeyDown,
-		onClick: handleFocus,
-		onPointerDown: handlePointerDown,
-		onPointerUp: handlePointerEnd,
-		onPointerCancel: handlePointerEnd,
-	};
-
-	const state: ToastViewportState = {
-		expanded,
-	};
-
-	const showGuards = !isEmpty && Boolean(prevFocusElement);
-
-	const element = useRenderElement(
-		'div',
-		componentProps,
-		{
-			ref: [forwardedRef, store.setViewport],
-			state,
-			props: [
-				defaultProps,
-				{
-					style: {
-						[ToastViewportCssVars.frontmostHeight]: frontmostHeight
-							? `${frontmostHeight}px`
-							: undefined,
-					},
-				},
-				elementProps,
-				{
-					children: [
-						showGuards
-							? createElement(FocusGuard, { key: 'guard-in-start', onFocus: handleFocusGuard })
-							: null,
-						createElement(Fragment, { key: 'children', children }),
-						showGuards
-							? createElement(FocusGuard, { key: 'guard-in-end', onFocus: handleFocusGuard })
-							: null,
-					],
-				},
-			],
-		},
-		subSlot(slot, 're'),
-	);
-
-	// octane reconciles a returned ARRAY as a keyed list, so the siblings carry stable keys —
-	// otherwise an unkeyed guard appearing/disappearing shifts the viewport element and rebuilds it.
-	return [
-		showGuards
-			? createElement(FocusGuard, { key: 'guard-out-start', onFocus: handleFocusGuard })
-			: null,
-		createElement(Fragment, { key: 'viewport', children: element }),
-		!focused && highPriorityToasts.length > 0
-			? createElement('div', {
-					key: 'live-region',
-					style: visuallyHidden,
-					children: highPriorityToasts.map((toast: ToastObject) =>
-						createElement('div', {
-							key: toast.id,
-							role: 'alert',
-							'aria-atomic': true,
-							children: [
-								createElement('div', { key: 'title', children: toast.title }),
-								createElement('div', { key: 'description', children: toast.description }),
-							],
-						}),
-					),
-				})
-			: null,
-	];
-}
-
-export interface ToastViewportState {
-	/** Whether toasts are expanded in the viewport. */
-	expanded: boolean;
-}
-
-// --- Root ---------------------------------------------------------------------
-
-const toastRootStateAttributesMapping: StateAttributesMapping<any> = {
-	...transitionStatusMapping,
-	swipeDirection(value: SwipeDirection | undefined) {
-		return value ? { 'data-swipe-direction': value } : null;
-	},
-};
-
-const SWIPE_THRESHOLD = 40;
-const REVERSE_CANCEL_THRESHOLD = 10;
-const OPPOSITE_DIRECTION_DAMPING_FACTOR = 0.5;
-const MIN_DRAG_THRESHOLD = 1;
-const TOAST_SWIPE_IGNORE_SELECTOR = `${BASE_UI_SWIPE_IGNORE_SELECTOR},${LEGACY_SWIPE_IGNORE_SELECTOR}`;
-
-// Inlined from `utils/useSwipeDismiss` — Toast uses only these two pure helpers, not the hook. The
-// hook itself is Drawer-only and lands in Phase 6.
-function getDisplacement(direction: SwipeDirection, deltaX: number, deltaY: number) {
-	switch (direction) {
-		case 'up':
-			return -deltaY;
-		case 'down':
-			return deltaY;
-		case 'left':
-			return -deltaX;
-		case 'right':
-			return deltaX;
-		default:
-			return 0;
-	}
-}
-
-function getElementTransform(element: HTMLElement) {
-	const computedStyle = ownerWindow(element).getComputedStyle(element);
-	const transform = computedStyle.transform;
-	let translateX = 0;
-	let translateY = 0;
-	let scale = 1;
-
-	if (transform && transform !== 'none') {
-		const matrix = transform.match(/matrix(?:3d)?\(([^)]+)\)/);
-		if (matrix) {
-			const values = matrix[1].split(', ').map(parseFloat);
-			if (values.length === 6) {
-				translateX = values[4];
-				translateY = values[5];
-				scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);
-			} else if (values.length === 16) {
-				translateX = values[12];
-				translateY = values[13];
-				scale = values[0];
-			}
-		}
-	}
-
-	return { x: translateX, y: translateY, scale };
-}
-
-function ToastRoot(componentProps: any): any {
-	const slot = S('ToastRoot');
-	const {
-		toast,
-		render,
-		className,
-		swipeDirection = ['down', 'right'],
-		style,
-		ref: forwardedRef,
-		...elementProps
-	} = componentProps;
-
-	const isAnchored = toast.positionerProps?.anchor !== undefined;
-
-	let swipeDirections: SwipeDirection[] = [];
-	if (!isAnchored) {
-		swipeDirections = Array.isArray(swipeDirection) ? swipeDirection : [swipeDirection];
-	}
-
-	const swipeEnabled = swipeDirections.length > 0;
-
-	const store = useToastProviderContext();
-
-	const [currentSwipeDirection, setCurrentSwipeDirection] = useState<SwipeDirection | undefined>(
-		undefined,
-		subSlot(slot, 'csd'),
-	);
-	const [isSwiping, setIsSwiping] = useState(false, subSlot(slot, 'swiping'));
-	const [isRealSwipe, setIsRealSwipe] = useState(false, subSlot(slot, 'realSwipe'));
-	const [dragDismissed, setDragDismissed] = useState(false, subSlot(slot, 'dismissed'));
-	const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 }, subSlot(slot, 'offset'));
-	const [initialTransform, setInitialTransform] = useState(
-		{ x: 0, y: 0, scale: 1 },
-		subSlot(slot, 'initTransform'),
-	);
-	const [titleId, setTitleId] = useState<string | undefined>(undefined, subSlot(slot, 'titleId'));
-	const [descriptionId, setDescriptionId] = useState<string | undefined>(
-		undefined,
-		subSlot(slot, 'descId'),
-	);
-	const [lockedDirection, setLockedDirection] = useState<'horizontal' | 'vertical' | null>(
-		null,
-		subSlot(slot, 'locked'),
-	);
-
-	const rootRef = useRef<HTMLElement | null>(null, subSlot(slot, 'root'));
-	const dragStartPosRef = useRef({ x: 0, y: 0 }, subSlot(slot, 'dragStart'));
-	const initialTransformRef = useRef({ x: 0, y: 0, scale: 1 }, subSlot(slot, 'itRef'));
-	const intendedSwipeDirectionRef = useRef<SwipeDirection | undefined>(
-		undefined,
-		subSlot(slot, 'intended'),
-	);
-	const maxSwipeDisplacementRef = useRef(0, subSlot(slot, 'maxDisp'));
-	const cancelledSwipeRef = useRef(false, subSlot(slot, 'cancelled'));
-	const swipeCancelBaselineRef = useRef({ x: 0, y: 0 }, subSlot(slot, 'baseline'));
-	const isFirstPointerMoveRef = useRef(false, subSlot(slot, 'firstMove'));
-	const dragOffsetRef = useRef({ x: 0, y: 0 }, subSlot(slot, 'offsetRef'));
-	const activePointerIdRef = useRef<number | null>(null, subSlot(slot, 'pointerId'));
-	const dragAbortControllerRef = useRef<AbortController | null>(null, subSlot(slot, 'abort'));
-
-	const domIndex = store.useState('toastIndex', subSlot(slot, 'domIndex'), toast.id);
-	const visibleIndex = store.useState('toastVisibleIndex', subSlot(slot, 'visIndex'), toast.id);
-	const offsetY = store.useState('toastOffsetY', subSlot(slot, 'offsetY'), toast.id);
-	const focused = store.useState('focused', subSlot(slot, 'focused'));
-	const expanded = store.useState('expanded', subSlot(slot, 'expanded'));
-
-	useOpenChangeComplete(
-		{
-			open: toast.transitionStatus !== 'ending',
-			ref: rootRef,
-			onComplete() {
-				if (toast.transitionStatus === 'ending') {
-					store.removeToast(toast.id);
-				}
-			},
-		},
-		subSlot(slot, 'occ'),
-	);
-
-	// Recalculates the natural height of the toast and updates it in the toast manager.
-	// `flushSync` avoids visual flickers when called from observer callbacks.
-	const recalculateHeight = useStableCallback(
-		(shouldFlush: boolean = false) => {
-			const element = rootRef.current;
-			if (!element) {
-				return;
-			}
-
-			const previousHeight = element.style.height;
-			element.style.height = 'auto';
-
-			const height = element.offsetHeight;
-
-			element.style.height = previousHeight;
-
-			function update() {
-				store.updateToastInternal(toast.id, {
-					ref: rootRef,
-					height,
-					...(toast.transitionStatus === 'starting' ? { transitionStatus: undefined } : {}),
-				});
-			}
-
-			if (shouldFlush) {
-				flushSync(update);
-			} else {
-				update();
-			}
-		},
-		subSlot(slot, 'recalc'),
-	);
-
-	useLayoutEffect(recalculateHeight, [recalculateHeight], subSlot(slot, 'e:recalc'));
-
-	function setResolvedDragOffset(nextDragOffset: { x: number; y: number }) {
-		dragOffsetRef.current = nextDragOffset;
-		setDragOffset(nextDragOffset);
-	}
-
-	useLayoutEffect(
-		() => {
-			return () => {
-				dragAbortControllerRef.current?.abort();
-			};
-		},
-		[],
-		subSlot(slot, 'e:abort'),
-	);
-
-	function applyDirectionalDamping(deltaX: number, deltaY: number) {
-		let newDeltaX = deltaX;
-		let newDeltaY = deltaY;
-
-		if (!swipeDirections.includes('left') && !swipeDirections.includes('right')) {
-			newDeltaX =
-				deltaX > 0
-					? deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR
-					: -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-		} else {
-			if (!swipeDirections.includes('right') && deltaX > 0) {
-				newDeltaX = deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
-			}
-
-			if (!swipeDirections.includes('left') && deltaX < 0) {
-				newDeltaX = -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-			}
-		}
-
-		if (!swipeDirections.includes('up') && !swipeDirections.includes('down')) {
-			newDeltaY =
-				deltaY > 0
-					? deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR
-					: -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-		} else {
-			if (!swipeDirections.includes('down') && deltaY > 0) {
-				newDeltaY = deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
-			}
-
-			if (!swipeDirections.includes('up') && deltaY < 0) {
-				newDeltaY = -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-			}
-		}
-
-		return { x: newDeltaX, y: newDeltaY };
-	}
-
-	const handleSwipeEnd = useStableCallback(
-		(event: PointerEvent) => {
-			if (event.pointerId !== activePointerIdRef.current) {
-				return;
-			}
-
-			activePointerIdRef.current = null;
-			dragAbortControllerRef.current?.abort();
-			dragAbortControllerRef.current = null;
-			setIsSwiping(false);
-			setIsRealSwipe(false);
-			setLockedDirection(null);
-
-			const resolvedInitialTransform = initialTransformRef.current;
-
-			if (event.type === 'pointercancel' || cancelledSwipeRef.current) {
-				setResolvedDragOffset({ x: resolvedInitialTransform.x, y: resolvedInitialTransform.y });
-				setCurrentSwipeDirection(undefined);
-				return;
-			}
-
-			let shouldClose = false;
-			const resolvedDragOffset = dragOffsetRef.current;
-			const deltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
-			const deltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
-			let dismissDirection: SwipeDirection | undefined;
-
-			for (const direction of swipeDirections) {
-				switch (direction) {
-					case 'right':
-						if (deltaX > SWIPE_THRESHOLD) {
-							shouldClose = true;
-							dismissDirection = 'right';
-						}
-						break;
-					case 'left':
-						if (deltaX < -SWIPE_THRESHOLD) {
-							shouldClose = true;
-							dismissDirection = 'left';
-						}
-						break;
-					case 'down':
-						if (deltaY > SWIPE_THRESHOLD) {
-							shouldClose = true;
-							dismissDirection = 'down';
-						}
-						break;
-					case 'up':
-						if (deltaY < -SWIPE_THRESHOLD) {
-							shouldClose = true;
-							dismissDirection = 'up';
-						}
-						break;
-					default:
-						break;
-				}
-
-				if (shouldClose) {
-					break;
-				}
-			}
-
-			if (shouldClose) {
-				setCurrentSwipeDirection(dismissDirection);
-				setDragDismissed(true);
-				store.closeToast(toast.id);
-			} else {
-				setResolvedDragOffset({ x: resolvedInitialTransform.x, y: resolvedInitialTransform.y });
-				setCurrentSwipeDirection(undefined);
-			}
-		},
-		subSlot(slot, 'swipeEnd'),
-	);
-
-	function handlePointerDown(event: PointerEvent) {
-		if (event.button !== 0) {
-			return;
-		}
-
-		if (event.pointerType === 'touch') {
-			store.pauseTimers();
-		}
-
-		const target = getTarget(event) as HTMLElement | null;
-
-		const isInteractiveElement = target
-			? target.closest(`button,a,input,textarea,[role="button"],${TOAST_SWIPE_IGNORE_SELECTOR}`)
-			: false;
-
-		if (isInteractiveElement) {
-			return;
-		}
-
-		cancelledSwipeRef.current = false;
-		intendedSwipeDirectionRef.current = undefined;
-		maxSwipeDisplacementRef.current = 0;
-		activePointerIdRef.current = event.pointerId;
-		dragStartPosRef.current = { x: event.clientX, y: event.clientY };
-		swipeCancelBaselineRef.current = dragStartPosRef.current;
-
-		if (rootRef.current) {
-			const transform = getElementTransform(rootRef.current);
-			initialTransformRef.current = transform;
-			setInitialTransform(transform);
-			setResolvedDragOffset({
-				x: transform.x,
-				y: transform.y,
-			});
-		}
-
-		store.setHovering(true);
-		setIsSwiping(true);
-		setIsRealSwipe(false);
-		setLockedDirection(null);
-		isFirstPointerMoveRef.current = true;
-
-		const element = rootRef.current;
-		if (element) {
-			dragAbortControllerRef.current?.abort();
-			const dragAbortController = new AbortController();
-			dragAbortControllerRef.current = dragAbortController;
-
-			const doc = ownerDocument(element);
-			doc.addEventListener('pointerup', handleSwipeEnd as EventListener, {
-				signal: dragAbortController.signal,
-			});
-			doc.addEventListener('pointercancel', handleSwipeEnd as EventListener, {
-				signal: dragAbortController.signal,
-			});
-
-			(element as any).setPointerCapture?.(event.pointerId);
-		}
-	}
-
-	function handlePointerMove(event: PointerEvent) {
-		if (event.pointerId !== activePointerIdRef.current) {
-			return;
-		}
-
-		// Prevent text selection on Safari
-		event.preventDefault();
-
-		if (isFirstPointerMoveRef.current) {
-			// Adjust the starting position to the current position on the first move to account for
-			// the delay between pointerdown and the first pointermove on iOS.
-			dragStartPosRef.current = { x: event.clientX, y: event.clientY };
-			isFirstPointerMoveRef.current = false;
-		}
-
-		const { clientY, clientX, movementX, movementY } = event;
-
-		if (
-			(movementY < 0 && clientY > swipeCancelBaselineRef.current.y) ||
-			(movementY > 0 && clientY < swipeCancelBaselineRef.current.y)
-		) {
-			swipeCancelBaselineRef.current = { x: swipeCancelBaselineRef.current.x, y: clientY };
-		}
-
-		if (
-			(movementX < 0 && clientX > swipeCancelBaselineRef.current.x) ||
-			(movementX > 0 && clientX < swipeCancelBaselineRef.current.x)
-		) {
-			swipeCancelBaselineRef.current = { x: clientX, y: swipeCancelBaselineRef.current.y };
-		}
-
-		const deltaX = clientX - dragStartPosRef.current.x;
-		const deltaY = clientY - dragStartPosRef.current.y;
-		const cancelDeltaY = clientY - swipeCancelBaselineRef.current.y;
-		const cancelDeltaX = clientX - swipeCancelBaselineRef.current.x;
-
-		if (!isRealSwipe) {
-			const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-			if (movementDistance >= MIN_DRAG_THRESHOLD) {
-				setIsRealSwipe(true);
-				if (lockedDirection === null) {
-					const hasHorizontal =
-						swipeDirections.includes('left') || swipeDirections.includes('right');
-					const hasVertical = swipeDirections.includes('up') || swipeDirections.includes('down');
-					if (hasHorizontal && hasVertical) {
-						const absX = Math.abs(deltaX);
-						const absY = Math.abs(deltaY);
-						setLockedDirection(absX > absY ? 'horizontal' : 'vertical');
-					}
-				}
-			}
-		}
-
-		let candidate: SwipeDirection | undefined;
-		if (!intendedSwipeDirectionRef.current) {
-			if (lockedDirection === 'vertical') {
-				if (deltaY > 0) {
-					candidate = 'down';
-				} else if (deltaY < 0) {
-					candidate = 'up';
-				}
-			} else if (lockedDirection === 'horizontal') {
-				if (deltaX > 0) {
-					candidate = 'right';
-				} else if (deltaX < 0) {
-					candidate = 'left';
-				}
-			} else if (Math.abs(deltaX) >= Math.abs(deltaY)) {
-				candidate = deltaX > 0 ? 'right' : 'left';
-			} else {
-				candidate = deltaY > 0 ? 'down' : 'up';
-			}
-
-			if (candidate && swipeDirections.includes(candidate)) {
-				intendedSwipeDirectionRef.current = candidate;
-				maxSwipeDisplacementRef.current = getDisplacement(candidate, deltaX, deltaY);
-				setCurrentSwipeDirection(candidate);
-			}
-		} else {
-			const direction = intendedSwipeDirectionRef.current;
-			const currentDisplacement = getDisplacement(direction, cancelDeltaX, cancelDeltaY);
-
-			if (currentDisplacement > SWIPE_THRESHOLD) {
-				cancelledSwipeRef.current = false;
-				setCurrentSwipeDirection(direction);
-			} else if (
-				!(swipeDirections.includes('left') && swipeDirections.includes('right')) &&
-				!(swipeDirections.includes('up') && swipeDirections.includes('down')) &&
-				maxSwipeDisplacementRef.current - currentDisplacement >= REVERSE_CANCEL_THRESHOLD
-			) {
-				// Mark that a change-of-mind has occurred
-				cancelledSwipeRef.current = true;
-			}
-		}
-
-		const dampedDelta = applyDirectionalDamping(deltaX, deltaY);
-		let newOffsetX = initialTransformRef.current.x;
-		let newOffsetY = initialTransformRef.current.y;
-
-		if (lockedDirection === 'horizontal') {
-			if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
-				newOffsetX += dampedDelta.x;
-			}
-		} else if (lockedDirection === 'vertical') {
-			if (swipeDirections.includes('up') || swipeDirections.includes('down')) {
-				newOffsetY += dampedDelta.y;
-			}
-		} else {
-			if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
-				newOffsetX += dampedDelta.x;
-			}
-
-			if (swipeDirections.includes('up') || swipeDirections.includes('down')) {
-				newOffsetY += dampedDelta.y;
-			}
-		}
-
-		setResolvedDragOffset({ x: newOffsetX, y: newOffsetY });
-	}
-
-	function handleKeyDown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			if (
-				!rootRef.current ||
-				!contains(rootRef.current, activeElement(ownerDocument(rootRef.current)))
-			) {
-				return;
-			}
-
-			store.closeToast(toast.id);
-		}
-	}
-
-	useEffect(
-		() => {
-			if (!swipeEnabled) {
-				return undefined;
-			}
-
-			const element = rootRef.current;
-			if (!element) {
-				return undefined;
-			}
-
-			function preventDefaultTouchStart(event: Event) {
-				if (
-					activePointerIdRef.current === null ||
-					!contains(element, getTarget(event) as HTMLElement | null)
-				) {
-					return;
-				}
-
-				// A pointermove `preventDefault` is not enough on iOS; this non-passive touchmove
-				// listener blocks native scrolling while dragging.
-				event.preventDefault();
-			}
-
-			return addEventListener(element, 'touchmove', preventDefaultTouchStart, {
-				passive: false,
-			});
-		},
-		[swipeEnabled],
-		subSlot(slot, 'e:touchmove'),
-	);
-
-	function getDragStyles() {
-		if (
-			!isSwiping &&
-			dragOffset.x === initialTransform.x &&
-			dragOffset.y === initialTransform.y &&
-			!dragDismissed
-		) {
-			return {
-				[ToastRootCssVars.swipeMovementX]: '0px',
-				[ToastRootCssVars.swipeMovementY]: '0px',
-			};
-		}
-
-		const deltaX = dragOffset.x - initialTransform.x;
-		const deltaY = dragOffset.y - initialTransform.y;
-
-		return {
-			transition: isSwiping ? 'none' : undefined,
-			// While swiping, freeze the element at its current visual transform so it doesn't snap
-			// to the end position.
-			transform: isSwiping
-				? `translateX(${dragOffset.x}px) translateY(${dragOffset.y}px) scale(${initialTransform.scale})`
-				: undefined,
-			[ToastRootCssVars.swipeMovementX]: `${deltaX}px`,
-			[ToastRootCssVars.swipeMovementY]: `${deltaY}px`,
-		};
-	}
-
-	const isHighPriority = toast.priority === 'high';
-
-	const defaultProps: HTMLProps = {
-		role: isHighPriority ? 'alertdialog' : 'dialog',
-		tabIndex: 0,
-		'aria-modal': false,
-		'aria-labelledby': titleId,
-		'aria-describedby': descriptionId,
-		'aria-hidden': isHighPriority && !focused ? true : undefined,
-		onPointerDown: swipeEnabled ? handlePointerDown : undefined,
-		onPointerMove: swipeEnabled ? handlePointerMove : undefined,
-		onPointerUp: swipeEnabled ? handleSwipeEnd : undefined,
-		onPointerCancel: swipeEnabled ? handleSwipeEnd : undefined,
-		onKeyDown: handleKeyDown,
-		inert: inertValue(toast.limited),
-		style: {
-			...getDragStyles(),
-			[ToastRootCssVars.index]: toast.transitionStatus === 'ending' ? domIndex : visibleIndex,
-			[ToastRootCssVars.offsetY]: `${offsetY}px`,
-			[ToastRootCssVars.height]: toast.height ? `${toast.height}px` : undefined,
-		},
-	};
-
-	const toastRoot: ToastRootContextValue = useMemo(
-		() => ({
-			rootRef,
-			toast,
-			titleId,
-			setTitleId,
-			descriptionId,
-			setDescriptionId,
-			swiping: isSwiping,
-			swipeDirection: currentSwipeDirection,
-			recalculateHeight,
-			index: domIndex,
-			visibleIndex,
-			expanded,
-		}),
-		[
-			toast,
-			titleId,
-			descriptionId,
-			isSwiping,
-			currentSwipeDirection,
-			recalculateHeight,
-			domIndex,
-			visibleIndex,
-			expanded,
-		],
-		subSlot(slot, 'ctx'),
-	);
-
-	const state: ToastRootState = {
-		transitionStatus: toast.transitionStatus,
-		expanded,
-		limited: toast.limited || false,
-		type: toast.type,
-		swiping: toastRoot.swiping,
-		swipeDirection: toastRoot.swipeDirection,
-	};
-
-	const element = useRenderElement(
-		'div',
-		componentProps,
-		{
-			ref: [forwardedRef, toastRoot.rootRef],
-			state,
-			stateAttributesMapping: toastRootStateAttributesMapping,
-			props: [defaultProps, elementProps],
-		},
-		subSlot(slot, 're'),
-	);
-
-	return createElement(ToastRootContext.Provider, { value: toastRoot, children: element });
-}
-
-export interface ToastRootState {
-	/** The transition status of the component. */
-	transitionStatus: TransitionStatus;
-	/** Whether the toasts in the viewport are expanded. */
-	expanded: boolean;
-	/** Whether the toast was limited because the toast limit was exceeded. */
-	limited: boolean;
-	/** The type of the toast. */
-	type: string | undefined;
-	/** Whether the toast is being swiped. */
-	swiping: boolean;
-	/** The direction the toast is being swiped. */
-	swipeDirection: SwipeDirection | undefined;
-}
-
-// --- Title / Description ------------------------------------------------------
-
-function ToastTitle(componentProps: any): any {
-	const slot = S('ToastTitle');
-	const {
-		render,
-		className,
-		style,
-		id: idProp,
-		children: childrenProp,
-		ref: forwardedRef,
-		...elementProps
-	} = componentProps;
-
-	const { toast, setTitleId } = useToastRootContext();
-
-	const children = childrenProp ?? toast.title;
-
-	const shouldRender = Boolean(children);
-
-	// RAW `useId`, not `useBaseUiId`: upstream Title/Description reach for `@base-ui/utils/useId`,
-	// which has NO `base-ui-` prefix. Using the prefixed helper here diverged from the real package.
-	const generatedId = useId(subSlot(slot, 'id'));
-	const id = idProp ?? generatedId;
-
-	useLayoutEffect(
-		() => {
-			if (!shouldRender) {
-				return undefined;
-			}
-
-			setTitleId(id);
-
-			return () => {
-				setTitleId(undefined);
-			};
-		},
-		[shouldRender, id, setTitleId],
-		subSlot(slot, 'e'),
-	);
-
-	const state: ToastTitleState = {
-		type: toast.type,
-	};
-
-	const element = useRenderElement(
-		'h2',
-		componentProps,
-		{
-			ref: forwardedRef,
-			state,
-			props: {
-				...elementProps,
-				id,
-				children,
-			},
-		},
-		subSlot(slot, 're'),
-	);
-
-	if (!shouldRender) {
-		return null;
-	}
-
-	return element;
-}
-
-export interface ToastTitleState {
-	/** The type of the toast. */
-	type: string | undefined;
-}
-
-function ToastDescription(componentProps: any): any {
-	const slot = S('ToastDescription');
-	const {
-		render,
-		className,
-		style,
-		id: idProp,
-		children: childrenProp,
-		ref: forwardedRef,
-		...elementProps
-	} = componentProps;
-
-	const { toast, setDescriptionId } = useToastRootContext();
-
-	const children = childrenProp ?? toast.description;
-
-	const shouldRender = Boolean(children);
-
-	// RAW `useId` — see the note in `ToastTitle`.
-	const generatedId = useId(subSlot(slot, 'id'));
-	const id = idProp ?? generatedId;
-
-	useLayoutEffect(
-		() => {
-			if (!shouldRender) {
-				return undefined;
-			}
-
-			setDescriptionId(id);
-
-			return () => {
-				setDescriptionId(undefined);
-			};
-		},
-		[shouldRender, id, setDescriptionId],
-		subSlot(slot, 'e'),
-	);
-
-	const state: ToastDescriptionState = {
-		type: toast.type,
-	};
-
-	const element = useRenderElement(
-		'p',
-		componentProps,
-		{
-			ref: forwardedRef,
-			state,
-			props: {
-				...elementProps,
-				id,
-				children,
-			},
-		},
-		subSlot(slot, 're'),
-	);
-
-	if (!shouldRender) {
-		return null;
-	}
-
-	return element;
-}
-
-export interface ToastDescriptionState {
-	/** The type of the toast. */
-	type: string | undefined;
-}
-
-// --- Content ------------------------------------------------------------------
-
-function ToastContent(componentProps: any): any {
-	const slot = S('ToastContent');
-	const { render, className, style, ref: forwardedRef, ...elementProps } = componentProps;
-
-	const { visibleIndex, expanded, recalculateHeight } = useToastRootContext();
-
-	const contentRef = useRef<HTMLDivElement | null>(null, subSlot(slot, 'content'));
-
-	useLayoutEffect(
-		() => {
-			const node = contentRef.current;
-			if (!node) {
-				return undefined;
-			}
-
-			recalculateHeight();
-
-			if (typeof ResizeObserver !== 'function' || typeof MutationObserver !== 'function') {
-				return undefined;
-			}
-
-			const resizeObserver = new ResizeObserver(() => recalculateHeight(true));
-			const mutationObserver = new MutationObserver(() => recalculateHeight(true));
-
-			resizeObserver.observe(node);
-			mutationObserver.observe(node, { childList: true, subtree: true, characterData: true });
-
-			return () => {
-				resizeObserver.disconnect();
-				mutationObserver.disconnect();
-			};
-		},
-		[recalculateHeight],
-		subSlot(slot, 'e'),
-	);
-
-	const behind = visibleIndex > 0;
-
-	const state: ToastContentState = {
-		expanded,
-		behind,
-	};
-
-	return useRenderElement(
-		'div',
-		componentProps,
-		{
-			ref: [forwardedRef, contentRef],
-			state,
-			props: elementProps,
-		},
-		subSlot(slot, 're'),
-	);
-}
-
-export interface ToastContentState {
-	/** Whether the toast viewport is expanded. */
-	expanded: boolean;
-	/** Whether the toast is behind the frontmost toast in the stack. */
-	behind: boolean;
-}
-
-// --- Close / Action -----------------------------------------------------------
-
-function ToastClose(componentProps: any): any {
-	const slot = S('ToastClose');
-	const {
-		render,
-		className,
-		style,
-		disabled,
-		nativeButton = true,
-		ref: forwardedRef,
-		...elementProps
-	} = componentProps;
-
-	const store = useToastProviderContext();
-	const { toast } = useToastRootContext();
-	const expanded = store.useState('expanded', subSlot(slot, 'expanded'));
-
-	const [hasFocus, setHasFocus] = useState(false, subSlot(slot, 'focus'));
-
-	const { getButtonProps, buttonRef } = useButton(
-		{ disabled, native: nativeButton },
-		subSlot(slot, 'btn'),
-	);
-
-	const state: ToastCloseState = {
-		type: toast.type,
-	};
-
-	return useRenderElement(
-		'button',
-		componentProps,
-		{
-			ref: [forwardedRef, buttonRef],
-			state,
-			props: [
-				{
-					'aria-hidden': !expanded && !hasFocus,
-					onClick() {
-						store.closeToast(toast.id);
-					},
-					onFocus() {
-						setHasFocus(true);
-					},
-					onBlur() {
-						setHasFocus(false);
-					},
-				},
-				elementProps,
-				getButtonProps,
-			],
-		},
-		subSlot(slot, 're'),
-	);
-}
-
-export interface ToastCloseState {
-	/** The type of the toast. */
-	type: string | undefined;
-}
-
-function ToastAction(componentProps: any): any {
-	const slot = S('ToastAction');
-	const {
-		render,
-		className,
-		style,
-		disabled,
-		nativeButton = true,
-		ref: forwardedRef,
-		...elementProps
-	} = componentProps;
-
-	const { toast } = useToastRootContext();
-
-	const computedChildren = toast.actionProps?.children ?? elementProps.children;
-	const shouldRender = Boolean(computedChildren);
-
-	const { getButtonProps, buttonRef } = useButton(
-		{ disabled, native: nativeButton },
-		subSlot(slot, 'btn'),
-	);
-
-	const state: ToastActionState = {
-		type: toast.type,
-	};
-
-	const element = useRenderElement(
-		'button',
-		componentProps,
-		{
-			ref: [forwardedRef, buttonRef],
-			state,
-			props: [
-				elementProps,
-				toast.actionProps,
-				getButtonProps,
-				{
-					children: computedChildren,
-				},
-			],
-		},
-		subSlot(slot, 're'),
-	);
-
-	if (!shouldRender) {
-		return null;
-	}
-
-	return element;
-}
-
-export interface ToastActionState {
-	/** The type of the toast. */
-	type: string | undefined;
-}
-
-// --- Positioner / Arrow -------------------------------------------------------
-
-function ToastPositioner(componentProps: any): any {
-	const slot = S('ToastPositioner');
-	const { toast, ...props } = componentProps;
-
-	const store = useToastProviderContext();
-
-	const positionerProps = (toast.positionerProps ?? EMPTY_OBJECT) as HTMLProps;
-
-	const {
-		render,
-		className,
-		anchor: anchorProp = positionerProps.anchor,
-		positionMethod = positionerProps.positionMethod ?? 'absolute',
-		side = positionerProps.side ?? 'top',
-		align = positionerProps.align ?? 'center',
-		sideOffset = positionerProps.sideOffset ?? 0,
-		alignOffset = positionerProps.alignOffset ?? 0,
-		collisionBoundary = positionerProps.collisionBoundary ?? 'clipping-ancestors',
-		collisionPadding = positionerProps.collisionPadding ?? 5,
-		arrowPadding = positionerProps.arrowPadding ?? 5,
-		sticky = positionerProps.sticky ?? false,
-		disableAnchorTracking = positionerProps.disableAnchorTracking ?? false,
-		collisionAvoidance = positionerProps.collisionAvoidance ?? POPUP_COLLISION_AVOIDANCE,
-		style,
-		ref: forwardedRef,
-		...elementProps
-	} = props;
-
-	const [positionerElement, setPositionerElement] = useState<HTMLElement | null>(
-		null,
-		subSlot(slot, 'el'),
-	);
-
-	const domIndex = store.useState('toastIndex', subSlot(slot, 'domIndex'), toast.id);
-	const visibleIndex = store.useState('toastVisibleIndex', subSlot(slot, 'visIndex'), toast.id);
-
-	const anchor = isElement(anchorProp) ? anchorProp : null;
-
-	const floatingRootContext = useFloatingRootContext(
-		{
-			open: true,
-			onOpenChange: NOOP,
-			elements: {
-				floating: positionerElement,
-				reference: anchor,
-			},
-		},
-		subSlot(slot, 'frc'),
-	);
-
-	const positioning = useAnchorPositioning(
-		{
-			anchor,
-			positionMethod,
-			floatingRootContext,
-			mounted: true,
-			side,
-			sideOffset,
-			align,
-			alignOffset,
-			collisionBoundary,
-			collisionPadding,
-			sticky,
-			arrowPadding,
-			disableAnchorTracking,
-			keepMounted: true,
-			collisionAvoidance,
-		},
-		subSlot(slot, 'positioning'),
-	);
-
-	const state: ToastPositionerState = useMemo(
-		() => ({
-			side: positioning.side,
-			align: positioning.align,
-			anchorHidden: positioning.anchorHidden,
-		}),
-		[positioning.side, positioning.align, positioning.anchorHidden],
-		subSlot(slot, 'state'),
-	);
-
-	const element = usePositioner(
-		componentProps,
-		state,
-		{
-			styles: {
-				...positioning.positionerStyles,
-				[ToastRootCssVars.index]: toast.transitionStatus === 'ending' ? domIndex : visibleIndex,
-			},
-			transitionStatus: toast.transitionStatus,
-			props: elementProps,
-			refs: [forwardedRef, setPositionerElement],
-		},
-		subSlot(slot, 'positioner'),
-	);
-
-	return createElement(ToastPositionerContext.Provider, {
-		value: positioning as unknown as ToastPositionerContextValue,
-		children: element,
-	});
-}
-
-export interface ToastPositionerState {
-	/** The side of the anchor the component is placed on. */
-	side: Side;
-	/** The alignment of the component relative to the anchor. */
-	align: Align;
-	/** Whether the anchor element is hidden. */
-	anchorHidden: boolean;
-}
-
-export interface ToastPositionerProps extends Omit<UseAnchorPositioningSharedParameters, 'anchor'> {
-	[key: string]: any;
-}
-
-function ToastArrow(componentProps: any): any {
-	const slot = S('ToastArrow');
-	const { className, render, style, ref: forwardedRef, ...elementProps } = componentProps;
-
-	const { arrowRef, side, align, arrowUncentered, arrowStyles } = useToastPositionerContext();
-
-	const state: ToastArrowState = {
-		side,
-		align,
-		uncentered: arrowUncentered,
-	};
-
-	return useRenderElement(
-		'div',
-		componentProps,
-		{
-			state,
-			ref: [forwardedRef, arrowRef],
-			props: [{ style: arrowStyles, 'aria-hidden': true }, elementProps],
-		},
-		subSlot(slot, 're'),
-	);
-}
-
-export interface ToastArrowState {
-	/** The side of the anchor the component is placed on. */
-	side: Side;
-	/** The alignment of the component relative to the anchor. */
-	align: Align;
-	/** Whether the arrow cannot be centered on the anchor. */
-	uncentered: boolean;
-}
-
-// --- Namespace ----------------------------------------------------------------
-
-/** Mirrors upstream's `toast/index.parts.ts`. `Portal` is `FloatingPortalLite`, as upstream. */
-export const Toast = {
-	Provider: ToastProvider,
-	Viewport: ToastViewport,
-	Root: ToastRoot,
-	Content: ToastContent,
-	Description: ToastDescription,
-	Title: ToastTitle,
-	Close: ToastClose,
-	Action: ToastAction,
-	Portal: FloatingPortalLite,
-	Positioner: ToastPositioner,
-	Arrow: ToastArrow,
-	useToastManager,
-	createToastManager,
-};