feat(ui): add a Base UI toast component

Adds the toast primitive that replaces sonner, along with its design-sync card
mapping. Nothing consumes it yet; the call sites move over next.

.design-sync/NOTES.md

@@ -14,7 +14,7 @@ Syncs to Claude Design project **Reactive Resume** (`3c0f6556-050a-41e5-9886-c3f
 ## Card scope
 
 - The package exports **202 symbols** (39 primary components + 163 compound sub-parts). User chose **~40 primary cards**: `cfg.componentSrcMap` nulls the 163 sub-parts. All 202 stay importable from `window.RRUI` (the bundle exports everything regardless of the card list), so previews compose sub-parts (`RRUI.DialogContent`, etc.) freely.
-- Multi-primary files represented by one card: `combobox.tsx`→ComboboxRoot, `form.tsx`→FormItem, `resizable.tsx`→ResizableGroup, `sonner.tsx`→Toaster.
+- Multi-primary files represented by one card: `combobox.tsx`→ComboboxRoot, `form.tsx`→FormItem, `resizable.tsx`→ResizableGroup, `toast.tsx`→Toaster.
 
 ## Preview authoring conventions (calibrated on Button / Alert / Dialog)
 

.design-sync/previews/Toaster.tsx

@@ -1,19 +1,20 @@
 import { useEffect } from "react";
-import { toast } from "sonner";
+import { Toaster, toast } from "@reactive-resume/ui/components/toast";
-import { Toaster } from "@reactive-resume/ui/components/sonner";
 
 // Toaster is the toast host. Fire a persistent toast on mount so the card
 // shows a real notification instead of an empty portal.
 export const Notification = () => {
 	useEffect(() => {
-		toast.success("Resume published", {
+		toast.add({
+			type: "success",
+			title: "Resume published",
 			description: "“Software Engineer” is now live at rxresume.me/jane-doe.",
-			duration: Number.POSITIVE_INFINITY,
+			timeout: 0,
 		});
 	}, []);
 	return (
 		<div style={{ minHeight: 140 }}>
-			<Toaster position="top-center" />
+			<Toaster />
 		</div>
 	);
 };

packages/ui/src/components/toast.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Toaster, toast } from "./toast";
+
+describe("Toaster", () => {
+	it("renders a toast added through the manager", async () => {
+		render(<Toaster />);
+
+		toast.add({ type: "success", title: "Resume published", description: "It is now live." });
+
+		await waitFor(() => expect(screen.getByText("Resume published")).toBeInTheDocument());
+		expect(screen.getByText("It is now live.")).toBeInTheDocument();
+	});
+
+	it("removes a toast when closed by id", async () => {
+		render(<Toaster />);
+
+		const id = toast.add({ description: "Temporary", timeout: 0 });
+		await waitFor(() => expect(screen.getByText("Temporary")).toBeInTheDocument());
+
+		toast.close(id);
+		await waitFor(() => expect(screen.queryByText("Temporary")).not.toBeInTheDocument());
+	});
+
+	it("upserts a toast reusing the same id", async () => {
+		render(<Toaster />);
+
+		const id = toast.add({ id: "upsert", description: "Saving…", timeout: 0 });
+		toast.add({ id, type: "success", description: "Saved." });
+
+		await waitFor(() => expect(screen.getByText("Saved.")).toBeInTheDocument());
+		expect(screen.queryByText("Saving…")).not.toBeInTheDocument();
+	});
+});

packages/ui/src/components/toast.tsx

@@ -0,0 +1,182 @@
+import type * as React from "react";
+import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import { CheckCircleIcon, InfoIcon, SpinnerIcon, WarningIcon, XCircleIcon, XIcon } from "@phosphor-icons/react";
+import { cn } from "@reactive-resume/utils/style";
+import { Button } from "./button";
+
+const toast = ToastPrimitive.createToastManager();
+
+function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
+	return <ToastPrimitive.Provider {...props} />;
+}
+
+function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {
+	return <ToastPrimitive.Portal data-slot="toast-portal" {...props} />;
+}
+
+function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
+	return (
+		<ToastPrimitive.Viewport
+			data-slot="toast-viewport"
+			className={cn(
+				"pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
+	return (
+		<ToastPrimitive.Root
+			data-slot="toast"
+			className={cn(
+				"group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom select-none rounded-2xl border bg-popover text-popover-foreground shadow-lg outline-none will-change-transform focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+				"[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
+				"h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
+				"after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+				"data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+				"data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",
+				"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+				"data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+				"data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+				"data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+				"data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+				"data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+				"data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+				"data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+				"data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
+	return (
+		<ToastPrimitive.Content
+			data-slot="toast-content"
+			className={cn(
+				"flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {
+	return <ToastPrimitive.Title data-slot="toast-title" className={cn("font-medium text-sm", className)} {...props} />;
+}
+
+function ToastDescription({ className, ...props }: ToastPrimitive.Description.Props) {
+	return (
+		<ToastPrimitive.Description
+			data-slot="toast-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function ToastAction({
+	className,
+	render = <Button variant="outline" size="sm" />,
+	...props
+}: ToastPrimitive.Action.Props) {
+	return (
+		<ToastPrimitive.Action data-slot="toast-action" render={render} className={cn("shrink-0", className)} {...props} />
+	);
+}
+
+function ToastClose({
+	className,
+	children,
+	render = <Button variant="ghost" size="icon-sm" />,
+	...props
+}: ToastPrimitive.Close.Props) {
+	return (
+		<ToastPrimitive.Close
+			data-slot="toast-close"
+			aria-label="Close toast"
+			render={render}
+			className={cn(
+				"relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground",
+				className,
+			)}
+			{...props}
+		>
+			{children ?? <XIcon aria-hidden="true" />}
+		</ToastPrimitive.Close>
+	);
+}
+
+function ToastIcon({ type }: { type: string | undefined }) {
+	let icon: React.ReactNode = null;
+
+	if (type === "success") icon = <CheckCircleIcon aria-hidden="true" />;
+	if (type === "info") icon = <InfoIcon aria-hidden="true" />;
+	if (type === "warning") icon = <WarningIcon aria-hidden="true" />;
+	if (type === "error") icon = <XCircleIcon className="text-destructive" aria-hidden="true" />;
+	if (type === "loading") icon = <SpinnerIcon className="animate-spin" aria-hidden="true" />;
+
+	if (!icon) return null;
+
+	return (
+		<span data-slot="toast-icon" className="shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none">
+			{icon}
+		</span>
+	);
+}
+
+function ToastList() {
+	const { toasts } = ToastPrimitive.useToastManager();
+
+	return toasts.map((toastItem) => (
+		<Toast key={toastItem.id} toast={toastItem}>
+			<ToastContent>
+				<ToastIcon type={toastItem.type} />
+				<div className="flex min-w-0 flex-1 flex-col gap-1">
+					<ToastTitle />
+					<ToastDescription />
+				</div>
+				<ToastAction />
+				<ToastClose />
+			</ToastContent>
+		</Toast>
+	));
+}
+
+function Toaster({ children, toastManager = toast, ...props }: ToastPrimitive.Provider.Props) {
+	return (
+		<ToastProvider toastManager={toastManager} {...props}>
+			{children}
+			<ToastPortal>
+				<ToastViewport>
+					<ToastList />
+				</ToastViewport>
+			</ToastPortal>
+		</ToastProvider>
+	);
+}
+
+const createToastManager = ToastPrimitive.createToastManager;
+const useToastManager = ToastPrimitive.useToastManager;
+
+export {
+	createToastManager,
+	Toast,
+	ToastAction,
+	ToastClose,
+	ToastContent,
+	ToastDescription,
+	Toaster,
+	ToastPortal,
+	ToastProvider,
+	ToastTitle,
+	ToastViewport,
+	toast,
+	useToastManager,
+};