@octane-xplat/ui 0.6.0 → 0.7.0

package/src/theme/colorScheme.linux.ts

@@ -0,0 +1,52 @@
+// Color scheme — Linux webview leaf. The host reads the system appearance
+// (org.freedesktop.portal.Settings → libadwaita fallback) before the webview
+// loads and injects window.__xplatColorScheme at document-start — the
+// useSyncExternalStore contract is sync, so a bridge round-trip can't supply
+// the initial value. Changes arrive as xplat:appearance.change CustomEvents
+// (emitted by platform's bridge emit side-channel; kept dependency-free like
+// colorScheme.macos.ts's __xplatAppKit). WebKitGTK's own prefers-color-scheme
+// does not follow GNOME dark style, so matchMedia is only the unbridged
+// fallback.
+import { useSyncExternalStore } from 'octane'
+
+export type { ColorScheme } from '../props'
+import type { ColorScheme } from '../props'
+
+const bridged = () =>
+	typeof window !== 'undefined' &&
+	(window as any).webkit?.messageHandlers?.xplat !== undefined
+
+let lastScheme: ColorScheme =
+	((window as any).__xplatColorScheme as ColorScheme | undefined) ?? 'light'
+
+function getSystemScheme(): ColorScheme {
+	return typeof matchMedia === 'function' &&
+		matchMedia('(prefers-color-scheme: dark)').matches
+		? 'dark'
+		: 'light'
+}
+
+export function getColorScheme(): ColorScheme {
+	return bridged() ? lastScheme : getSystemScheme()
+}
+
+export function subscribeSystemScheme(cb: () => void): () => void {
+	if (!bridged()) {
+		const mq = matchMedia('(prefers-color-scheme: dark)')
+		mq.addEventListener('change', cb)
+		return () => mq.removeEventListener('change', cb)
+	}
+
+	const onChange = (e: Event) => {
+		const detail = (e as CustomEvent).detail
+		lastScheme = detail === 'dark' ? 'dark' : 'light'
+		cb()
+	}
+
+	window.addEventListener('xplat:appearance.change', onChange)
+	return () => window.removeEventListener('xplat:appearance.change', onChange)
+}
+
+export function useColorScheme(): ColorScheme {
+	return useSyncExternalStore(subscribeSystemScheme, getColorScheme)
+}

package/src/theme/colorScheme.ts

@@ -0,0 +1,26 @@
+import { useSyncExternalStore } from 'octane'
+import { Application } from '@nativescript/core'
+
+export type { ColorScheme } from '../props'
+import type { ColorScheme } from '../props'
+
+export function getColorScheme(): ColorScheme {
+	// systemAppearance() is deprecated in favor of primaryWindow, but the
+	// primary window isn't guaranteed during early boot — fall back.
+	return (
+		Application.primaryWindow?.systemAppearance?.() ??
+		(Application as any).systemAppearance?.() ??
+		'light'
+	)
+}
+
+export function subscribeSystemScheme(cb: () => void): () => void {
+	const h = () => cb()
+	Application.on('systemAppearanceChanged', h)
+	return () => Application.off('systemAppearanceChanged', h)
+}
+
+/** Reactive system appearance — 'light' | 'dark', re-renders on OS change. */
+export function useColorScheme(): ColorScheme {
+	return useSyncExternalStore(subscribeSystemScheme, getColorScheme)
+}

package/src/theme/colorScheme.web.ts

@@ -0,0 +1,20 @@
+import { useSyncExternalStore } from 'octane'
+
+export type { ColorScheme } from '../props'
+import type { ColorScheme } from '../props'
+
+export function getColorScheme(): ColorScheme {
+	return typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches
+		? 'dark'
+		: 'light'
+}
+
+export function subscribeSystemScheme(cb: () => void): () => void {
+	const mq = matchMedia('(prefers-color-scheme: dark)')
+	mq.addEventListener('change', cb)
+	return () => mq.removeEventListener('change', cb)
+}
+
+export function useColorScheme(): ColorScheme {
+	return useSyncExternalStore(subscribeSystemScheme, getColorScheme)
+}

package/src/theme/status-bar-scheme.mobile.ts

@@ -0,0 +1,39 @@
+// Status-bar scheme sync — native leaf. Keeps the system bars' icon
+// appearance aligned with the effective theme scheme (override-aware).
+// Android: NS 9 enables edge-to-edge per activity with icon appearance
+// derived from the SYSTEM uiMode — a dark-mode handler substitutes our
+// scheme, consulted on every (re)application so config changes can't
+// stomp an active override (covers status + nav bars). iOS: the public
+// `statusBarStyle` view property routes to per-controller appearance
+// invalidation, with the app-level setter as fallback.
+import { Application, Utils } from '@nativescript/core'
+import { getThemeScheme, onThemeSchemeChange } from './theme-scheme'
+
+function applyStatusBarScheme(): void {
+	if (Application.android) {
+		// setDarkModeHandler stores the handler once per activity, then
+		// re-runs enableEdgeToEdge every call — one call installs + refreshes.
+		// 'light'/'dark' icon names invert: dark scheme → light icons.
+		// Lives on Utils.android — a bare Utils.setDarkModeHandler is
+		// undefined and would no-op silently.
+		Utils.android.setDarkModeHandler?.({ handler: () => getThemeScheme() === 'dark' })
+		return
+	}
+
+	const style = getThemeScheme() === 'dark' ? 'light' : 'dark'
+	const root = Application.getRootView()
+	if (root) {
+		root.statusBarStyle = style
+	}
+
+	if (Application.ios) {
+		// Pushed pages own separate view controllers the root's property
+		// doesn't reach — app-level setter as fallback.
+		;(Application.ios.nativeApp as any)?.setStatusBarStyle?.(style === 'light' ? 1 : 0)
+	}
+}
+
+onThemeSchemeChange(applyStatusBarScheme)
+// 'displayed' covers module init before the activity/root view exists.
+Application.on('displayed', applyStatusBarScheme)
+applyStatusBarScheme()

package/src/theme/theme-scheme.macos.ts

@@ -0,0 +1,50 @@
+import { useSyncExternalStore } from 'octane'
+import { getColorScheme, subscribeSystemScheme } from '../colorScheme.macos'
+import { cx } from '../cx'
+
+export type ThemePreference = 'light' | 'dark' | 'system'
+
+let preference: ThemePreference = 'system'
+const listeners = new Set<() => void>()
+const emit = () => listeners.forEach((listener) => listener())
+
+export function setThemePreference(value: ThemePreference): void {
+	if (preference === value) {return}
+	preference = value
+	emit()
+}
+
+export function getThemePreference(): ThemePreference {
+	return preference
+}
+
+export function getThemeScheme(): 'light' | 'dark' {
+	return preference === 'system' ? getColorScheme() : preference
+}
+
+function subscribe(callback: () => void): () => void {
+	listeners.add(callback)
+	const unsubscribeSystem = subscribeSystemScheme(callback)
+	return () => {
+		listeners.delete(callback)
+		unsubscribeSystem()
+	}
+}
+
+export function useThemeScheme(): 'light' | 'dark' {
+	return useSyncExternalStore(subscribe, getThemeScheme)
+}
+
+export function themeSchemeClasses(): string {
+	return getThemeScheme() === 'dark' ? 'ns-dark dark' : ''
+}
+
+export function onThemeSchemeChange(callback: () => void): () => void {
+	return subscribe(callback)
+}
+
+export function applyThemeClasses(view: any, base = ''): () => void {
+	const apply = () => { view.className = cx(base, themeSchemeClasses()) }
+	apply()
+	return onThemeSchemeChange(apply)
+}

package/src/theme/theme-scheme.ts

@@ -0,0 +1,66 @@
+import { useSyncExternalStore } from 'octane'
+import { getColorScheme, subscribeSystemScheme } from './colorScheme'
+import { cx } from '../cx'
+
+export type ThemePreference = 'light' | 'dark' | 'system'
+
+let preference: ThemePreference = 'system'
+const listeners = new Set<() => void>()
+const emit = () => listeners.forEach((l) => l())
+
+/** App-level theme override. 'system' clears the override and follows the OS. */
+export function setThemePreference(p: ThemePreference) {
+	if (p !== preference) {
+		preference = p
+		emit()
+	}
+}
+
+export function getThemePreference(): ThemePreference {
+	return preference
+}
+
+/** The effective scheme: explicit override if set, else system appearance. */
+export function getThemeScheme(): 'light' | 'dark' {
+	return preference === 'system' ? getColorScheme() : preference
+}
+
+function subscribe(cb: () => void): () => void {
+	listeners.add(cb)
+	const offSystem = subscribeSystemScheme(cb)
+	return () => {
+		listeners.delete(cb)
+		offSystem()
+	}
+}
+
+/** Reactive effective scheme — re-renders on override or OS change. */
+export function useThemeScheme(): 'light' | 'dark' {
+	return useSyncExternalStore(subscribe, getThemeScheme)
+}
+
+/** Class string to stamp on independently-mounted roots (portal hosts,
+ *  overlay/sheet/modal/toast containers): 'ns-dark dark' when effective
+ *  dark, '' otherwise. Both names because tokens.css publishes both
+ *  selectors and hosts may render either vocabulary. */
+export function themeSchemeClasses(): string {
+	return getThemeScheme() === 'dark' ? 'ns-dark dark' : ''
+}
+
+/** Subscribe imperative hosts to effective-scheme changes; returns an
+ *  unsubscribe. Use for hosts that live outside any render cycle. */
+export function onThemeSchemeChange(cb: () => void): () => void {
+	return subscribe(cb)
+}
+
+/** Stamp `base + themeSchemeClasses()` onto an imperative host (NS view or
+ *  DOM element) and keep it live — returns an unsubscribe to call when the
+ *  host closes. Works on both leaves since both honor `.className`. */
+export function applyThemeClasses(view: any, base: string): () => void {
+	const apply = () => {
+		view.className = cx(base, themeSchemeClasses())
+	}
+
+	apply()
+	return onThemeSchemeChange(apply)
+}

package/src/theme/tokens.css

@@ -370,21 +370,6 @@ img {
 
 /* xplat-web-only:end */
 
-/* CameraView — surface-hosted: the preview fills the frame; web shows it
-   through an object-fit:cover <video>. */
-.vx-cameraview {
-	background-color: #000;
-}
-
-/* xplat-web-only:start */
-.vx-cameraview-surface {
-	display: block;
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-}
-/* xplat-web-only:end */
-
 /* xplat-web-only:start */
 /* Modal ROUTES (pushRoute presentation:'modal') — the URL stays underneath,
    so the overlay is a fixed layer over the shell rather than a dialog. */
@@ -937,6 +922,32 @@ input.vx-search-field::-webkit-search-cancel-button {
 	margin-bottom: 8px;
 }
 
+/* ListItem — a reusable shared row; callers own the surrounding list chrome. */
+.vx-listitem {
+	flex-direction: row;
+	align-items: center;
+	width: 100%;
+	padding: 10px 12px;
+	gap: 12px;
+}
+.vx-listitem-leading,
+.vx-listitem-trailing {
+	flex-shrink: 0;
+	align-items: center;
+}
+.vx-listitem-content {
+	flex-direction: column;
+	flex-grow: 1;
+}
+.vx-listitem-title {
+	font-weight: 500;
+}
+.vx-listitem-supporting {
+	font-size: 12px;
+	line-height: 16px;
+	color: var(--color-text-secondary);
+}
+
 /* InputNumber — steppers flanking a centered field. */
 .vx-inputnumber {
 	flex-direction: row;
@@ -1054,6 +1065,10 @@ input.vx-search-field::-webkit-search-cancel-button {
 /* xplat-web-only:start — display:flex for the div/span flex classes */
 .vx-field,
 .vx-fieldgroup,
+.vx-listitem,
+.vx-listitem-leading,
+.vx-listitem-content,
+.vx-listitem-trailing,
 .vx-inputnumber,
 .vx-inputnumber-step,
 .vx-select-trigger,
@@ -1197,7 +1212,10 @@ input.vx-search-field::-webkit-search-cancel-button {
 /* CommandPalette — panel centered by the overlay layer. */
 .vx-commandpalette {
 	width: 360px;
-	max-width: 90%;
+	/* vw, not %: the overlay-content wrapper shrink-wraps the palette, so a
+	 * plain % would resolve against the palette's own width (clamping an
+	 * explicit style.width to 90% of itself). */
+	max-width: 90vw;
 	padding: 8px;
 	border-width: 1px;
 	border-color: var(--color-border);
@@ -1508,28 +1526,32 @@ input.vx-search-field::-webkit-search-cancel-button {
 }
 /* xplat-web-only:end */
 
+.vx-heading {
+	margin: 0;
+}
+/* NativeScript reads the numeric prefix of font-size; keep this scale in px. */
 .vx-h1 {
-	font-size: 2em;
+	font-size: 32px;
 	font-weight: bold;
 }
 .vx-h2 {
-	font-size: 1.5em;
+	font-size: 24px;
 	font-weight: bold;
 }
 .vx-h3 {
-	font-size: 1.17em;
+	font-size: 18.72px;
 	font-weight: bold;
 }
 .vx-h4 {
-	font-size: 1em;
+	font-size: 16px;
 	font-weight: bold;
 }
 .vx-h5 {
-	font-size: 0.83em;
+	font-size: 13.28px;
 	font-weight: bold;
 }
 .vx-h6 {
-	font-size: 0.67em;
+	font-size: 10.72px;
 	font-weight: bold;
 }
 

package/src/toast-anchor.macos.tsrx

@@ -0,0 +1,3 @@
+export function showToast(_content: unknown, _options?: unknown): void {
+	console.warn('[octane-xplat] Toast display is unsupported by the experimental AppKit target.')
+}

package/src/toast-anchor.tsrx

@@ -0,0 +1,122 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { GridLayout, isAndroid, isIOS } from '@nativescript/core';
+import { createNativeScriptRoot } from '@nativescript-community/octane';
+import type { UniversalComponent } from 'octane/universal';
+import { Popover } from './Popover.tsrx';
+import { topRootLayout } from './root-layout.mobile';
+import { applyThemeClasses } from './theme/theme-scheme';
+import type { ToastContent, ToastOptions, ToastPosition } from './props';
+
+type ToastEntry = { content: ToastContent; options: ToastOptions };
+type ActiveToast = ToastEntry & { host: GridLayout; root: any; timer: ReturnType<typeof setTimeout> | null; unbindTheme?: () => void };
+const queue: ToastEntry[] = [];
+let active: ActiveToast | null = null;
+
+function placementFor(position: ToastPosition = 'bottom'): 'top' | 'bottom' {
+	return position.startsWith('top') ? 'top' : 'bottom';
+}
+
+function horizontalFor(position: ToastPosition = 'bottom'): 'left' | 'center' | 'right' {
+	if (position.endsWith('-start')) return 'left';
+	if (position.endsWith('-end')) return 'right';
+	return 'center';
+}
+
+function ToastBody(props: ToastEntry & { open: boolean }) @{
+	@if (props.options.anchor) {
+		<Popover
+			open={props.open}
+			anchor={props.options.anchor}
+			placement={props.options.placement ?? placementFor(props.options.position)}
+			dismissOnOutsideTap={false}
+		>
+			<gridlayout className="vx-toast">
+				@if (typeof props.content === 'string') {
+					<label>{props.content}</label>
+				} @else {
+					const Component = props.content;
+					<Component />
+				}
+			</gridlayout>
+		</Popover>
+	} @else {
+		@if (typeof props.content === 'string') {
+			<label className="vx-toast">{props.content}</label>
+		} @else {
+			const Component = props.content;
+			<gridlayout className="vx-toast"><Component /></gridlayout>
+		}
+	}
+}
+
+function finishToast(entry: ActiveToast) {
+	if (active !== entry) return;
+	if (entry.timer !== null) clearTimeout(entry.timer);
+	entry.timer = null;
+	const cleanup = () => {
+		entry.unbindTheme?.();
+		entry.root.unmount?.();
+		if (active === entry) active = null;
+		showNext();
+	};
+
+	if (entry.options.anchor) {
+		entry.root.render(ToastBody as unknown as UniversalComponent, { ...entry, open: false });
+		setTimeout(cleanup, 0);
+		return;
+	}
+
+	const rootLayout = topRootLayout();
+	if (rootLayout && (rootLayout as any).hasChild?.(entry.host)) {
+		rootLayout.close(entry.host).then(cleanup, (error: unknown) => {
+			console.error('[Toast] close failed', error);
+			cleanup();
+		});
+	} else cleanup();
+}
+
+function showNext() {
+	if (active || queue.length === 0) return;
+	const entry = queue.shift()!;
+	const anchored = Boolean(entry.options.anchor);
+	const rootLayout = topRootLayout();
+	if (!anchored && !rootLayout) {
+		console.warn('[Toast] RootLayout is not mounted; toast was skipped');
+		showNext();
+		return;
+	}
+
+	const host = new GridLayout();
+	const position = entry.options.position ?? 'bottom';
+	const unbindTheme = applyThemeClasses(host, 'vx-toast-host');
+	const root = createNativeScriptRoot(host);
+	const current: ActiveToast = { ...entry, host, root, timer: null, unbindTheme };
+	active = current;
+	root.render(ToastBody as unknown as UniversalComponent, { ...entry, open: true });
+
+	if (anchored) {
+		current.timer = setTimeout(() => finishToast(current), Math.max(0, entry.options.duration ?? 3000));
+		return;
+	}
+
+	host.horizontalAlignment = horizontalFor(position);
+	host.verticalAlignment = placementFor(position) === 'top' ? 'top' : 'bottom';
+	host.marginTop = placementFor(position) === 'top' ? 24 : 0;
+	host.marginBottom = placementFor(position) === 'top' ? 0 : 24;
+	Object.assign(host, isIOS ? entry.options.ios : isAndroid ? entry.options.android : undefined);
+	rootLayout!.open(host).then(() => {
+		if (active === current) current.timer = setTimeout(() => finishToast(current), Math.max(0, entry.options.duration ?? 3000));
+	}, (error: unknown) => {
+		console.error('[Toast] open failed', error);
+		root.unmount?.();
+		if (active === current) active = null;
+		showNext();
+	});
+}
+
+/** FIFO queue. Anchored options use Popover; unanchored options use the
+ * RootLayout with top/bottom start/end alignment. */
+export function showToast(content: ToastContent, options: ToastOptions = {}): void {
+	queue.push({ content, options });
+	showNext();
+}

package/src/toast-anchor.web.tsrx

@@ -0,0 +1,92 @@
+import { createRoot } from 'octane';
+import { Popover } from './Popover.web.tsrx';
+import type { ToastContent, ToastOptions, ToastPosition } from './props';
+import { cx } from './cx';
+import { applyThemeClasses } from './theme/theme-scheme';
+
+type ToastEntry = { content: ToastContent; options: ToastOptions };
+const queue: ToastEntry[] = [];
+let active = false;
+
+function ToastBody(props: ToastEntry & { open: boolean }) @{
+	@if (props.options.anchor) {
+		<Popover
+			open={props.open}
+			anchor={props.options.anchor}
+			placement={props.options.placement ?? placementFor(props.options.position)}
+			dismissOnOutsideTap={false}
+		>
+			@if (typeof props.content === 'string') {
+				<div className="vx-toast">{props.content}</div>
+			} @else {
+				const Component = props.content;
+				<div className="vx-toast"><Component /></div>
+			}
+		</Popover>
+	} @else {
+		@if (typeof props.content === 'string') {
+			<div className="vx-toast">{props.content}</div>
+		} @else {
+			const Component = props.content;
+			<div className="vx-toast"><Component /></div>
+		}
+	}
+}
+
+function placementFor(position: ToastPosition = 'bottom'): 'top' | 'bottom' {
+	return position.startsWith('top') ? 'top' : 'bottom';
+}
+
+function applyWebProps(host: HTMLElement, props?: Record<string, any>) {
+	for (const [key, value] of Object.entries(props ?? {})) {
+		if (key.includes('-')) host.setAttribute(key, String(value));
+		else (host as any)[key] = value;
+	}
+}
+
+function alignmentFor(position: ToastPosition = 'bottom') {
+	if (position.endsWith('-start')) return 'flex-start';
+	if (position.endsWith('-end')) return 'flex-end';
+	return 'center';
+}
+
+function showNext() {
+	if (active || queue.length === 0) return;
+	active = true;
+	const entry = queue.shift()!;
+	const anchored = Boolean(entry.options.anchor);
+	const host = document.createElement('div');
+	const position = entry.options.position ?? 'bottom';
+	const unbindTheme = applyThemeClasses(host, cx('vx-toast-host', placementFor(position) === 'top' ? 'vx-toast-top' : 'vx-toast-bottom'));
+	applyWebProps(host, entry.options.web);
+	if (anchored) host.style.display = 'none';
+	else host.style.justifyContent = alignmentFor(position);
+
+	document.body.appendChild(host);
+	const root = createRoot(host);
+	root.render(ToastBody, { ...entry, open: true });
+
+	const finish = () => {
+		const cleanup = () => {
+			unbindTheme();
+			root.unmount();
+			host.remove();
+			active = false;
+			showNext();
+		};
+
+		if (anchored) {
+			root.render(ToastBody, { ...entry, open: false });
+			setTimeout(cleanup, 0);
+		} else cleanup();
+	};
+
+	setTimeout(finish, Math.max(0, entry.options.duration ?? 3000));
+}
+
+/** FIFO queue. `anchor` uses the same portal positioning as Popover; without
+ * one, top/bottom and their start/end alignment variants use the viewport. */
+export function showToast(content: ToastContent, options: ToastOptions = {}): void {
+	queue.push({ content, options });
+	showNext();
+}

package/src/toast.tsrx

@@ -0,0 +1,90 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { GridLayout, isAndroid, isIOS } from '@nativescript/core';
+import { topRootLayout } from './root-layout.mobile';
+import { applyThemeClasses } from './theme/theme-scheme';
+import { createNativeScriptRoot } from '@nativescript-community/octane';
+import type { UniversalComponent } from 'octane/universal';
+import type { ToastContent, ToastOptions } from './props';
+import { cx } from './cx';
+
+
+type ToastEntry = { content: ToastContent; options: ToastOptions };
+type ActiveToast = ToastEntry & { host: GridLayout; root: any; timer: ReturnType<typeof setTimeout> | null; unbindTheme?: () => void };
+
+const queue: ToastEntry[] = [];
+let active: ActiveToast | null = null;
+
+function ToastBody(props: { content: ToastContent }) @{
+	@if (typeof props.content === 'string') {
+		<label className="vx-toast">{props.content}</label>
+	} @else {
+		const Component = props.content;
+		<gridlayout className="vx-toast"><Component /></gridlayout>
+	}
+}
+
+function finishToast(entry: ActiveToast) {
+	if (active !== entry) return;
+	if (entry.timer !== null) clearTimeout(entry.timer);
+	entry.timer = null;
+	const rootLayout = topRootLayout();
+	const finish = () => {
+		entry.unbindTheme?.();
+		entry.root.unmount?.();
+		if (active === entry) active = null;
+		showNext();
+	};
+
+	if (rootLayout && (rootLayout as any)?.hasChild?.(entry.host)) {
+		rootLayout.close(entry.host).then(finish, (error) => {
+			console.error('[Toast] close failed', error);
+			finish();
+		});
+	} else finish();
+}
+
+function showNext() {
+	if (active || queue.length === 0) return;
+	const entry = queue.shift()!;
+	const rootLayout = topRootLayout();
+	if (!rootLayout) {
+		console.warn('[Toast] RootLayout is not mounted; toast was skipped');
+		return;
+	}
+
+	const host = new GridLayout();
+	const unbindTheme = applyThemeClasses(host, 'vx-toast-host');
+	host.horizontalAlignment = 'stretch';
+	host.verticalAlignment = entry.options.position === 'top' ? 'top' : 'bottom';
+	host.marginTop = entry.options.position === 'top' ? 24 : 0;
+	host.marginBottom = entry.options.position === 'top' ? 0 : 24;
+	Object.assign(host, isIOS ? entry.options.ios : isAndroid ? entry.options.android : undefined);
+	const root = createNativeScriptRoot(host);
+	const current: ActiveToast = { ...entry, host, root, timer: null, unbindTheme };
+	active = current;
+	root.render(ToastBody as unknown as UniversalComponent, { content: entry.content });
+	const open = () => {
+		rootLayout.open(host).then(() => {
+			if (active === current) current.timer = setTimeout(() => finishToast(current), Math.max(0, entry.options.duration ?? 3000));
+		}, (error) => {
+			console.error('[Toast] open failed', error);
+			root.unmount?.();
+			if (active === current) active = null;
+			showNext();
+		});
+	};
+
+	if ((rootLayout as any).hasChild?.(host)) {
+		rootLayout.close(host).then(open, (error) => {
+			console.error('[Toast] stale host close failed', error);
+			if (active === current) active = null;
+			showNext();
+		});
+	} else open();
+}
+
+/** FIFO queue; each toast is shown after the prior toast closes. */
+export function showToast(content: ToastContent, options: ToastOptions = {}): void {
+	queue.push({ content, options });
+	showNext();
+}