@autional/ui 0.0.0-stage → 0.1.0-rc.43

package/src/molecules/LoadingScreen.tsx

@@ -0,0 +1,30 @@
+import { Loader2 } from 'lucide-react';
+
+export interface LoadingScreenProps {
+	message?: string;
+	fullScreen?: boolean;
+	className?: string;
+}
+
+export function LoadingScreen({
+	message = '加载中...',
+	fullScreen = false,
+	className = '',
+}: LoadingScreenProps) {
+	const content = (
+		<div className="flex flex-col items-center justify-center gap-3">
+			<Loader2 size={fullScreen ? 32 : 24} className="animate-spin text-[var(--color-brand)]" />
+			<p className="text-sm text-[var(--color-text-secondary)]">{message}</p>
+		</div>
+	);
+
+	if (fullScreen) {
+		return (
+			<div className={`flex min-h-screen items-center justify-center px-4 ${className}`}>
+				{content}
+			</div>
+		);
+	}
+
+	return <div className={`flex h-40 items-center justify-center ${className}`}>{content}</div>;
+}

package/src/molecules/Modal.tsx

@@ -0,0 +1,178 @@
+import React, { useCallback, useEffect, useId, useRef } from 'react';
+import { X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { UI_I18N_NS, uiText } from '../i18n';
+
+// UP-19：dialog 语义与焦点管理此前整体缺失（裸 div 覆盖层 —— 屏幕阅读器读不到
+// 「这是一个对话框」，Tab 能溜到背后的页面，关闭后焦点丢到 body）。
+// 列在这里的只含可聚焦元素；弹窗内元素在渲染时必然可见，无需再做可见性过滤
+// （jsdom 算不出布局，加了过滤器反而把测试和真实浏览器行为拉开差距）。
+const FOCUSABLE_SELECTOR =
+	'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+function getFocusableElements(root: HTMLElement): HTMLElement[] {
+	return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+}
+
+interface ModalProps {
+	open: boolean;
+	onClose: () => void;
+	title?: string;
+	/** 标题下的一行说明。多个页面原本把它写在自绘表头里（如「授权同意」弹窗），收进 API 才不用各自拼表头。 */
+	description?: string;
+	/** 正文。**可以不给** —— 「标题 + 说明 + 按钮」的确认框是常见形状，不该被逼着塞一个空正文（那会留一段 32px 的空白）。 */
+	children?: React.ReactNode;
+	footer?: React.ReactNode;
+	maxWidth?: 'sm' | 'md' | 'lg';
+	className?: string;
+}
+
+const maxWidthClasses: Record<string, string> = {
+	sm: 'max-w-sm',
+	md: 'max-w-md',
+	lg: 'max-w-lg',
+};
+
+export const Modal = React.memo(function Modal({
+	open,
+	onClose,
+	title,
+	description,
+	children,
+	footer,
+	maxWidth = 'md',
+	className = '',
+}: ModalProps) {
+	const { t, i18n } = useTranslation();
+	// 关闭按钮的无障碍标签此前是写死的中文 —— 与 PortalSwitcher / PageStatus 走同一条解析链：
+	// 站点注册过就用站点的，没注册回落内置表。
+	const closeLabel = t('modal.close', {
+		ns: UI_I18N_NS,
+		defaultValue: uiText(i18n.language, 'modal.close') ?? '关闭',
+	});
+
+	const panelRef = useRef<HTMLDivElement>(null);
+	const previouslyFocused = useRef<HTMLElement | null>(null);
+	const wasOpen = useRef(false);
+	const dialogId = useId();
+	const titleId = `${dialogId}-title`;
+	const descriptionId = `${dialogId}-description`;
+
+	// 打开的那次渲染里记下「开弹窗前的焦点」。必须赶在提交之前 —— 消费方若在弹窗里标了
+	// autoFocus，React 会在提交期就把焦点送进输入框，效果函数里再读就晚了（读到的是输入框自己，
+	// 我们就把「从哪来」弄丢了，关闭时也无处归还）。读 activeElement 无副作用，重复渲染幂等。
+	if (open && !wasOpen.current) {
+		previouslyFocused.current = (document.activeElement as HTMLElement | null) ?? null;
+	}
+	wasOpen.current = open;
+
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent) => {
+			if (e.key === 'Escape') {
+				onClose();
+				return;
+			}
+			if (e.key !== 'Tab') return;
+			const panel = panelRef.current;
+			if (!panel) return;
+			const focusable = getFocusableElements(panel);
+			if (focusable.length === 0) {
+				e.preventDefault();
+				panel.focus();
+				return;
+			}
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			const active = document.activeElement as HTMLElement | null;
+			const inside = active != null && panel.contains(active);
+			if (e.shiftKey) {
+				if (!inside || active === first) {
+					e.preventDefault();
+					last.focus();
+				}
+			} else if (!inside || active === last) {
+				e.preventDefault();
+				first.focus();
+			}
+		},
+		[onClose],
+	);
+
+	useEffect(() => {
+		if (open) {
+			document.addEventListener('keydown', handleKeyDown);
+			document.body.style.overflow = 'hidden';
+		}
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown);
+			document.body.style.overflow = '';
+		};
+	}, [open, handleKeyDown]);
+
+	useEffect(() => {
+		if (!open) return;
+		const panel = panelRef.current;
+		if (panel) {
+			// 焦点已在面板内（React 提交期把 autoFocus 元素聚焦了）就不动它；否则移入首个可聚焦元素。
+			const active = document.activeElement as HTMLElement | null;
+			if (!active || !panel.contains(active)) {
+				const focusable = getFocusableElements(panel);
+				(focusable[0] ?? panel).focus();
+			}
+		}
+		return () => {
+			// 焦点归还只在元素还在文档里时做 —— 触发按钮随页面跳转消失的场景静默跳过。
+			if (previouslyFocused.current?.isConnected) previouslyFocused.current.focus();
+		};
+	}, [open]);
+
+	if (!open) return null;
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+			<div className="absolute inset-0" onClick={onClose} />
+			<div
+				ref={panelRef}
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby={title ? titleId : undefined}
+				aria-describedby={title && description ? descriptionId : undefined}
+				tabIndex={-1}
+				className={`relative w-full ${maxWidthClasses[maxWidth]} rounded-xl border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] shadow-brand outline-none ${className}`}
+			>
+				{title && (
+					<div className="flex items-start justify-between gap-4 border-b border-[var(--color-border-subtle)] px-6 py-4">
+						<div>
+							<h3 id={titleId} className="text-base font-semibold text-[var(--color-text-primary)]">{title}</h3>
+							{description && (
+								<p id={descriptionId} className="mt-0.5 text-sm text-[var(--color-text-secondary)]">{description}</p>
+							)}
+						</div>
+						<button
+							onClick={onClose}
+							className="text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"
+							aria-label={closeLabel}
+						>
+							<X className="h-4 w-4" />
+						</button>
+					</div>
+				)}
+				{!title && (
+					<button
+						onClick={onClose}
+						className="absolute right-4 top-4 text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"
+						aria-label={closeLabel}
+					>
+						<X className="h-4 w-4" />
+					</button>
+				)}
+				{children != null && <div className="px-6 py-4">{children}</div>}
+				{footer && (
+					<div className="flex justify-end gap-3 border-t border-[var(--color-border-subtle)] px-6 py-4">
+						{footer}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+});

package/src/molecules/PageContainer.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export interface PageContainerProps {
+	children: React.ReactNode;
+	className?: string;
+	maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+	padding?: boolean;
+}
+
+const maxWidthClasses: Record<string, string> = {
+	sm: 'max-w-sm',
+	md: 'max-w-md',
+	lg: 'max-w-lg',
+	xl: 'max-w-xl',
+	full: 'max-w-2xl',
+};
+
+export const PageContainer = React.memo(function PageContainer({
+	children,
+	className = '',
+	maxWidth = 'sm',
+	padding = true,
+}: PageContainerProps) {
+	return (
+		<div
+			className={`flex min-h-screen items-center justify-center px-4 ${padding ? 'py-8' : ''} ${className}`}
+		>
+			<div
+				className={`w-full ${maxWidthClasses[maxWidth]} space-y-6 rounded-lg bg-[var(--color-bg-surface)] p-8 shadow-brand`}
+			>
+				{children}
+			</div>
+		</div>
+	);
+});

package/src/molecules/PageHeader.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface PageHeaderProps {
+	title: string;
+	subtitle?: string;
+	children?: React.ReactNode;
+}
+
+export const PageHeader = React.memo(function PageHeader({
+	title,
+	subtitle,
+	children,
+}: PageHeaderProps) {
+	return (
+		<div className="text-center">
+			<h1 className="text-3xl font-bold tracking-tight text-[var(--color-text-primary)] sm:text-4xl">
+				{title}
+			</h1>
+			{subtitle && (
+				<p className="mx-auto mt-4 max-w-2xl text-lg text-[var(--color-text-secondary)]">
+					{subtitle}
+				</p>
+			)}
+			{children}
+		</div>
+	);
+});

package/src/molecules/PortalSwitcher.tsx

@@ -0,0 +1,132 @@
+import type React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+	Activity,
+	Check,
+	Code2,
+	Globe,
+	KeyRound,
+	LayoutGrid,
+	LogIn,
+	Settings,
+	Shield,
+	ShieldAlert,
+	ShieldCheck,
+	User,
+} from 'lucide-react';
+import { useMenuButton } from '../internal/use-menu-button';
+import { UI_I18N_NS, uiText } from '../i18n';
+
+export interface PortalLink {
+	code: string;
+	name?: string;
+	url: string;
+	description?: string;
+	icon?: React.ReactNode;
+}
+
+export interface PortalSwitcherLabels {
+	switchPortal: string;
+}
+
+export interface PortalSwitcherProps {
+	portals: PortalLink[];
+	currentPortal?: string;
+	align?: 'left' | 'right';
+	className?: string;
+	menuClassName?: string;
+	labels?: Partial<PortalSwitcherLabels>;
+	loading?: boolean;
+	/** 单产品隐藏（Gainsight 规则）：≤1 个门户时不渲染 */
+	hideWhenSingle?: boolean;
+	iconForPortal?: Record<string, React.ComponentType<{ className?: string }>>;
+}
+
+const DEFAULT_PORTAL_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+	admin: Shield,
+	auth: LogIn,
+	security: ShieldAlert,
+	user: User,
+	authenticator: KeyRound,
+	status: Activity,
+	trust: ShieldCheck,
+	platform: Settings,
+	developer: Code2,
+	landing: Globe,
+};
+
+export function PortalSwitcher({
+	portals,
+	currentPortal,
+	align = 'right',
+	className = '',
+	menuClassName = '',
+	labels,
+	loading = false,
+	hideWhenSingle = true,
+	iconForPortal,
+}: PortalSwitcherProps) {
+	const { t, i18n } = useTranslation();
+	const { open, setOpen, triggerRef, menuRef, triggerProps, menuProps } = useMenuButton();
+
+	if (!loading && hideWhenSingle && portals.length < 2) return null;
+
+	const icons = { ...DEFAULT_PORTAL_ICONS, ...iconForPortal };
+	// 文案解析链：站点 i18next（注册 registerUiI18n 后，可覆盖/扩语言）→ 内置表（未注册）→ lastResort
+	const text = (key: string, lastResort?: string): string => {
+		const builtin = uiText(i18n.language, key);
+		return t(key, { ns: UI_I18N_NS, defaultValue: builtin ?? lastResort ?? key });
+	};
+	const switchLabel = labels?.switchPortal ?? text('portal.switcher');
+
+	return (
+		<div className="relative">
+			<button
+				{...triggerProps}
+				ref={triggerRef}
+				aria-label={switchLabel}
+				title={switchLabel}
+				disabled={loading}
+				aria-busy={loading || undefined}
+				className={`rounded-md p-2 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-text-primary)] disabled:cursor-default disabled:opacity-50 ${className}`}
+			>
+				<LayoutGrid className="h-5 w-5 shrink-0" />
+			</button>
+			{open && (
+				<div
+					{...menuProps}
+					ref={menuRef}
+					className={`absolute top-full z-50 mt-2 w-56 rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-elevated)] py-1 shadow-brand ${
+						align === 'left' ? 'left-0' : 'right-0'
+					} ${menuClassName}`}
+				>
+					{portals.map((portal) => {
+						const Icon = icons[portal.code] ?? Globe;
+						const isCurrent = portal.code === currentPortal;
+						return (
+							<a
+								key={portal.code}
+								role="menuitem"
+								tabIndex={-1}
+								href={portal.url}
+								aria-current={isCurrent || undefined}
+								className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors ${
+									isCurrent
+										? 'bg-[var(--color-bg-muted)] text-[var(--color-text-primary)]'
+										: 'text-[var(--color-text-primary)] hover:bg-[var(--color-bg-muted)]'
+								}`}
+								onClick={isCurrent ? (event) => { event.preventDefault(); setOpen(false); } : () => setOpen(false)}
+							>
+								{portal.icon ?? <Icon className="h-4 w-4 shrink-0 text-[var(--color-text-secondary)]" />}
+								<span className="flex-1 truncate">
+									{text(`portal.names.${portal.code}`, portal.name ?? portal.code)}
+								</span>
+								{isCurrent && <Check className="h-4 w-4 shrink-0 text-[var(--color-brand)]" />}
+							</a>
+						);
+					})}
+				</div>
+			)}
+		</div>
+	);
+}

package/src/molecules/Result.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle, CheckCircle2, Info, XCircle } from 'lucide-react';
+import { SOFT_BORDER, SOFT_TEXT, type SemanticVariant } from '../internal/semantic-styles';
+
+// Result —— 「结果块」：一个动作做完之后告诉用户结果（成功/失败/无权/找不到），
+// 居中的图标 + 标题 + 说明 + 一个动作。
+//
+// 为什么要有它（第 32 轮实测）：这类块在舰队里有两套互不相干的实现 ——
+//   · 控制台 9 处用 antd 的 `<Result>`（404 / 403 / not-found / 无权限页 / 校验结果）；
+//   · user 门户 6 处手写：**两种形态**（`bg-*-soft` 的整块浅底 / 白底 + 同色边框 + 圆形徽标），
+//     外加一页 404 手写 hero。四种门户的「结果」长得各不相同。
+//
+// 与 Alert 的分工：Alert 是**一行提示**（挂在页面里，左对齐、窄、可关闭）；
+// Result 是**一个区块的结果**（居中、图标大、带一个动作）。两者共用同一份 `SOFT_TEXT`/`SOFT_BORDER` 配对。
+//
+// 刻意不做 `status` 这样的「大字状态位」：404 那种大字直接写在 `title` 里就行（`title` 是 ReactNode），
+// 一个只为了 5 个待迁移页面而存在的属性不该先长出来。
+export type ResultSurface = 'plain' | 'tinted';
+
+export interface ResultProps {
+	/** 语义档位，默认 info。 */
+	variant?: SemanticVariant;
+	/** 底色：`plain` = 白色面 + 同色边框（默认）；`tinted` = 整块同色浅底。 */
+	surface?: ResultSurface;
+	/** 标题（可以是节点 —— 404 那种大字就写在标题里）。 */
+	title?: React.ReactNode;
+	/** 说明文字。 */
+	description?: React.ReactNode;
+	/** 图标：默认按档位给一个；显式传 `null` 可以不要图标。 */
+	icon?: React.ReactNode | null;
+	/** 底部动作（一个或一组按钮）。 */
+	action?: React.ReactNode;
+	/** 追加类名。 */
+	className?: string;
+}
+
+const DEFAULT_ICONS: Record<SemanticVariant, React.ReactNode> = {
+	success: <CheckCircle2 className="h-7 w-7" />,
+	warning: <AlertTriangle className="h-7 w-7" />,
+	danger: <XCircle className="h-7 w-7" />,
+	info: <Info className="h-7 w-7" />,
+	neutral: <Info className="h-7 w-7" />
+};
+
+// 只取配对里的「文字那一半」：`bg-X-soft text-X-text` → `text-X-text`。
+// 直接写 `text-danger` 是错的（danger 对白底 2.27:1），而配对那一份已经过对比度验证。
+const textTone = (v: SemanticVariant) => SOFT_TEXT[v].split(' ').filter((c) => c.startsWith('text-')).join(' ');
+
+export const Result = React.memo(function Result({
+	variant = 'info',
+	surface = 'plain',
+	title,
+	description,
+	icon,
+	action,
+	className = ''
+}: ResultProps) {
+	const tinted = surface === 'tinted';
+	const glyph = icon === null ? null : (icon ?? DEFAULT_ICONS[variant]);
+	const surfaceCls = tinted
+		? `${SOFT_TEXT[variant]} ${SOFT_BORDER[variant]}`
+		: `bg-[var(--color-bg-surface)] ${SOFT_BORDER[variant]}`;
+	// 徽标：白底卡片上用同色浅底，整块浅底上退回白色面 —— 两种都保证徽标里的图标仍压在同色浅底上。
+	const badgeCls = tinted ? 'bg-[var(--color-bg-surface)]' : SOFT_TEXT[variant];
+	return (
+		<div className={`flex flex-col items-center rounded-lg border p-8 text-center shadow-card ${surfaceCls} ${className}`}>
+			{glyph ? (
+				<span className={`flex h-16 w-16 items-center justify-center rounded-full ${badgeCls} ${tinted ? textTone(variant) : ''}`}>
+					{glyph}
+				</span>
+			) : null}
+			{title ? (
+				<h2 className={`mt-4 text-lg font-semibold ${tinted ? '' : 'text-[var(--color-text-primary)]'}`}>{title}</h2>
+			) : null}
+			{/* 用 div 而不是 p：description 允许放块级内容（控制台的模拟登录页往里放了 antd 的 <Space>，
+			    它是一个 div —— 塞进 <p> 里就是非法嵌套，React 会在开发模式告警、浏览器会把 DOM 拆开）。 */}
+			{description ? <div className={`mt-2 text-sm ${tinted ? '' : textTone(variant)}`}>{description}</div> : null}
+			{action ? <div className="mt-6 flex flex-wrap items-center justify-center gap-3">{action}</div> : null}
+		</div>
+	);
+});

package/src/molecules/SectionCard.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+// SectionCard —— 区块容器（带标题的卡片）。
+//
+// 第 30 轮把它的两处规格改回设计系统自己的口径（此前两处都是 Tailwind 出厂值，不是设计系统的档位）：
+//   · 圆角 `rounded-2xl`（16px）→ `rounded-lg`（24px）：DESIGN.md §9 写的是「cards `radius-lg` (24px)」，
+//     `primitives.css` 的 `.brand-card` 用的也是 `--radius-lg`，而 user 门户 62 处手写卡片同样是 24px
+//     —— 三处口径一致，只有这里不是。
+//   · 标题 `text-xl font-bold`（20/700）→ `text-base font-semibold`（16/600）：控制台那 363 张 antd Card
+//     的 head title 就是 antd 的 `fontSizeLG`/600（=16/600），而页面标题是 20/600 —— 区块标题既不该与
+//     页面标题同尺寸，也不该比全舰队的卡片标题更重。
+// 边框仍用 `--color-border-subtle`：antd Card 走的是 antd 的 `colorBorderSecondary`（近白灰），
+// 两侧不一致，已登记（要动它得改 antd 的组件令牌，是独立批次）。
+
+interface SectionCardProps {
+	title?: string;
+	children: React.ReactNode;
+	className?: string;
+	padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+const paddingMap = {
+	none: '',
+	sm: 'p-4',
+	md: 'p-6',
+	lg: 'p-8',
+};
+
+export const SectionCard = React.memo(function SectionCard({
+	title,
+	children,
+	className = '',
+	padding = 'md',
+}: SectionCardProps) {
+	return (
+		<div
+			className={`rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] shadow-card ${paddingMap[padding]} ${className}`}
+		>
+			{title && (
+				<h2 className="mb-4 text-base font-semibold text-[var(--color-text-primary)]">{title}</h2>
+			)}
+			{children}
+		</div>
+	);
+});

package/src/molecules/ThemeToggle.tsx

@@ -0,0 +1,42 @@
+import { Sun, Moon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useTheme } from '../context/ThemeProvider';
+import { UI_I18N_NS, uiText } from '../i18n';
+
+interface ThemeToggleProps {
+	className?: string;
+	iconSize?: number;
+	labelLight?: string;
+	labelDark?: string;
+}
+
+export function ThemeToggle({
+	className = '',
+	iconSize = 18,
+	labelLight,
+	labelDark,
+}: ThemeToggleProps) {
+	const { theme, toggle } = useTheme();
+	const { t, i18n } = useTranslation();
+	const isDark = theme === 'dark';
+	// 文案解析链与 PortalSwitcher 同构：站点 i18next（注册 registerUiI18n 后可覆盖）→ 内置表（未注册）
+	// → 组件参数。原实现为硬编码中文默认值，EN 站点顶栏出现中文标签（UP-04）。
+	const text = (key: string): string => {
+		const builtin = uiText(i18n.language, key);
+		return t(key, { ns: UI_I18N_NS, defaultValue: builtin ?? key });
+	};
+	const label = isDark
+		? labelLight || text('theme.toggleLight')
+		: labelDark || text('theme.toggleDark');
+
+	return (
+		<button
+			onClick={toggle}
+			className={`rounded-md transition-colors ${className}`}
+			title={label}
+			aria-label={label}
+		>
+			{isDark ? <Sun size={iconSize} /> : <Moon size={iconSize} />}
+		</button>
+	);
+}

package/src/molecules/Toast.tsx

@@ -0,0 +1,106 @@
+import {
+	createContext,
+	useContext,
+	useState,
+	useCallback,
+	useRef,
+	useEffect,
+	type ReactNode,
+} from 'react';
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+export interface ToastItem {
+	id: string;
+	message: string;
+	type: ToastType;
+}
+
+interface ToastContextValue {
+	addToast: (message: string, type?: ToastType, duration?: number) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast(): ToastContextValue {
+	const ctx = useContext(ToastContext);
+	if (!ctx) throw new Error('useToast must be used within <ToastProvider>');
+	return ctx;
+}
+
+let globalShow: ((message: string, type?: ToastType, duration?: number) => void) | null = null;
+
+export function showToast(message: string, type: ToastType = 'info', duration?: number) {
+	globalShow?.(message, type, duration);
+}
+
+const ICONS: Record<ToastType, typeof CheckCircle> = {
+	success: CheckCircle,
+	error: AlertCircle,
+	warning: AlertTriangle,
+	info: Info,
+};
+
+const STYLES: Record<ToastType, string> = {
+	success: 'bg-success text-white',
+	error: 'bg-danger text-white',
+	warning: 'bg-amber-500 text-white',
+	info: 'bg-[var(--color-brand)] text-white',
+};
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+	const [toasts, setToasts] = useState<ToastItem[]>([]);
+	const timers = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
+
+	const removeToast = useCallback((id: string) => {
+		setToasts((prev) => prev.filter((t) => t.id !== id));
+		if (timers.current[id]) {
+			clearTimeout(timers.current[id]);
+			delete timers.current[id];
+		}
+	}, []);
+
+	const addToast = useCallback(
+		(message: string, type: ToastType = 'info', duration = 3000) => {
+			const id = `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+			setToasts((prev) => [...prev, { id, message, type }]);
+			timers.current[id] = setTimeout(() => removeToast(id), duration);
+		},
+		[removeToast],
+	);
+
+	globalShow = addToast;
+
+	useEffect(() => {
+		return () => {
+			Object.values(timers.current).forEach(clearTimeout);
+		};
+	}, []);
+
+	return (
+		<ToastContext.Provider value={{ addToast }}>
+			{children}
+			<div className="pointer-events-none fixed right-4 top-4 z-[100] flex flex-col gap-2">
+				{toasts.map((toast) => {
+					const Icon = ICONS[toast.type];
+					return (
+						<div
+							key={toast.id}
+							className={`pointer-events-auto flex items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium shadow-brand ${STYLES[toast.type]}`}
+						>
+							<Icon className="h-4 w-4 shrink-0" />
+							<span className="flex-1">{toast.message}</span>
+							<button
+								onClick={() => removeToast(toast.id)}
+								className="ml-1 shrink-0 rounded-xs p-0.5 opacity-70 hover:bg-white/20 hover:opacity-100"
+							>
+								<X className="h-3.5 w-3.5" />
+							</button>
+						</div>
+					);
+				})}
+			</div>
+		</ToastContext.Provider>
+	);
+}