50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T4fb4,// Hairline UI · toast-stack · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * TOAST STACK: notifications that keep their place in line * * arrive a toast rises in from the edge through a blur and * the ones before it step back into a hairline stack * stack three peek out behind the newest, each a little * smaller; hover or focus fans them out into a list * time a hairline drains along the bottom; hovering or a * hidden tab pauses it * promise one toast from start to finish: a spinner while it * works, then the words morph and a check draws * itself (or an alert, and it shakes) * action Undo and friends sit on the right * dismiss swipe it away, or the close button; the rest close * up behind it * * Call toast() from anywhere; render once. * ───────────────────────────────────────────────────────── */ export type ToastType = "default" | "success" | "error" | "info" | "loading"; export type ToastPosition = "bottom-right" | "bottom-center" | "bottom-left" | "top-right" | "top-center" | "top-left"; export interface ToastOptions { description?: string; type?: ToastType; /** How long it stays (ms). Loading toasts stay until they settle. */ duration?: number; action?: { label: string; onClick: () => void }; /** Reuse an id to update a toast in place. */ id?: string; } interface ToastData extends ToastOptions { id: string; title: string; type: ToastType; duration: number; /** Bumped when it changes, so its timer starts over. */ version: number; dismissed: boolean; } /* ── The store: toast() works from anywhere, renders it ── */ let toasts: ToastData[] = []; let counter = 0; const listeners = new Set<() => void>(); const emit = () => listeners.forEach((l) => l()); const DEFAULT_DURATION = 4000; function upsert(title: string, options: ToastOptions = {}): string { const id = options.id ?? `t${++counter}`; const existing = toasts.find((t) => t.id === id); const type = options.type ?? "default"; const next: ToastData = { ...existing, ...options, id, title, type, duration: options.duration ?? existing?.duration ?? DEFAULT_DURATION, version: (existing?.version ?? 0) + 1, dismissed: false, }; toasts = existing ? toasts.map((t) => (t.id === id ? next : t)) : [next, ...toasts]; emit(); return id; } export function toast(title: string, options?: ToastOptions) { return upsert(title, options); } toast.success = (title: string, options?: Omit) => upsert(title, { ...options, type: "success" }); toast.error = (title: string, options?: Omit) => upsert(title, { ...options, type: "error" }); toast.info = (title: string, options?: Omit) => upsert(title, { ...options, type: "info" }); toast.loading = (title: string, options?: Omit) => upsert(title, { ...options, type: "loading" }); /** One toast that follows a promise: loading, then success or error, morphing in place. */ toast.promise = ( promise: Promise, messages: { loading: string; success: string | ((value: T) => string); error: string | ((error: unknown) => string); description?: string } ) => { const id = upsert(messages.loading, { type: "loading", description: messages.description }); promise.then( (value) => upsert(typeof messages.success === "function" ? messages.success(value) : messages.success, { id, type: "success" }), (error) => upsert(typeof messages.error === "function" ? messages.error(error) : messages.error, { id, type: "error" }) ); return promise; }; toast.dismiss = (id?: string) => { toasts = toasts.map((t) => (id === undefined || t.id === id ? { ...t, dismissed: true } : t)); emit(); }; const remove = (id: string) => { toasts = toasts.filter((t) => t.id !== id); emit(); }; const subscribe = (listener: () => void) => { listeners.add(listener); return () => listeners.delete(listener); }; const getToasts = () => toasts; const getNone = () => [] as ToastData[]; /* ── Rendering ── */ export interface ToasterProps extends React.HTMLAttributes { position?: ToastPosition; /** How many show behind the newest when stacked. */ visible?: number; /** Keyboard shortcut that moves focus to the toasts (with Alt). */ hotkey?: string; } const EASE = "cubic-bezier(0.16,1,0.3,1)"; const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const GAP = 10; const PEEK = 10; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** Icons trade places through a blur: the old one shrinks away as the new one grows in. */ const swap = (on: boolean, reduced: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, transform: on ? "none" : "scale(0.6)", filter: on ? "none" : "blur(3px)", transition: reduced ? "none" : `opacity 240ms ${EASE}, transform 360ms ${EASE}, filter 240ms ${EASE}`, }); function StatusIcon({ type, reduced }: { type: ToastType; reduced: boolean }) { const layer = "absolute inset-0 flex items-center justify-center"; return ( ); } function ToastCard({ data, index, expanded, frontHeight, height, offset, top, side, limit, paused, reduced, onHeight, }: { data: ToastData; index: number; expanded: boolean; frontHeight: number; height: number; offset: number; top: boolean; side: "left" | "right" | "center"; limit: number; paused: boolean; reduced: boolean; onHeight: (id: string, height: number) => void; }) { const ref = React.useRef(null); const innerRef = React.useRef(null); const [mounted, setMounted] = React.useState(reduced); const [drag, setDrag] = React.useState<{ x: number; active: boolean }>({ x: 0, active: false }); const [exitX, setExitX] = React.useState(0); const start = React.useRef<{ x: number; t: number } | null>(null); const leaving = data.dismissed; const sign = top ? 1 : -1; // Paint below the edge first, then rise into place. React.useEffect(() => { if (mounted) return; let inner = 0; const outer = requestAnimationFrame(() => (inner = requestAnimationFrame(() => setMounted(true)))); return () => { cancelAnimationFrame(outer); cancelAnimationFrame(inner); }; }, [mounted]); React.useLayoutEffect(() => { const el = innerRef.current; if (!el) return; const measure = () => onHeight(data.id, el.offsetHeight); measure(); const observer = new ResizeObserver(measure); observer.observe(el); return () => observer.disconnect(); }, [data.id, onHeight]); // Leaving: run the exit, then drop it from the store. React.useEffect(() => { if (!leaving) return; const t = window.setTimeout(() => remove(data.id), reduced ? 0 : 340); return () => window.clearTimeout(t); }, [leaving, data.id, reduced]); // A failure gives a small shake. const lastType = React.useRef(data.type); React.useEffect(() => { if (data.type === "error" && lastType.current !== "error" && !reduced) innerRef.current?.animate( [{ transform: "none" }, { transform: "translateX(-4px)" }, { transform: "translateX(4px)" }, { transform: "translateX(-2px)" }, { transform: "none" }], { duration: 380, easing: "ease-out" } ); lastType.current = data.type; }, [data.type, reduced]); const hiddenBehind = index >= limit; const scale = expanded || reduced ? 1 : 1 - index * 0.05; // Where it sits: fanned out by the heights in front of it, or stacked a rim's width behind the one in front. const placed = expanded ? sign * offset : sign * index * PEEK; const y = !mounted ? -sign * (frontHeight + 24) : leaving && !exitX ? placed - sign * 12 : placed; const x = leaving ? exitX || 0 : drag.x; const opacity = !mounted || leaving || hiddenBehind ? 0 : 1; const transform = `translate3d(${x}px, ${y}px, 0) scale(${leaving && !exitX ? scale * 0.96 : scale})`; // Stacked behind the newest, a toast takes the newest's height so only its rim shows; fanned out, its own. const cardHeight = height ? (!expanded && index > 0 && frontHeight ? frontHeight : height) : undefined; const onPointerDown = (e: React.PointerEvent) => { if ((e.target as HTMLElement).closest("button")) return; start.current = { x: e.clientX, t: performance.now() }; (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); setDrag({ x: 0, active: true }); }; const onPointerMove = (e: React.PointerEvent) => { if (!start.current) return; const dx = e.clientX - start.current.x; // It follows the finger freely toward the edge, and resists the other way. const toward = side === "left" ? -1 : 1; setDrag({ x: dx * toward > 0 || side === "center" ? dx : dx * 0.2, active: true }); }; const onPointerUp = (e: React.PointerEvent) => { if (!start.current) return; const dx = e.clientX - start.current.x; const speed = Math.abs(dx) / Math.max(1, performance.now() - start.current.t); start.current = null; if (Math.abs(dx) > 90 || (speed > 0.45 && Math.abs(dx) > 24)) { setExitX(Math.sign(dx) * ((ref.current?.offsetWidth ?? 360) + 40)); toast.dismiss(data.id); } setDrag({ x: 0, active: false }); }; return (

{/* Measured as it naturally is, whatever height the card is showing it at. */}

0 ? 0 : 1, transition: reduced ? "none" : `opacity 260ms ${EASE}` }}>

{data.title}

{data.description &&

{data.description}

}

{data.action && ( )}

{/* The time left, draining along the bottom edge. Restarts when the toast changes. */} {data.type !== "loading" && data.duration !== Infinity && (

); } export function Toaster({ position = "bottom-right", visible = 3, hotkey = "t", className = "", ...props }: ToasterProps) { const reduced = useReducedMotion(); const list = React.useSyncExternalStore(subscribe, getToasts, getNone); const [heights, setHeights] = React.useState>({}); const [hovered, setHovered] = React.useState(false); const [focused, setFocused] = React.useState(false); const [hidden, setHidden] = React.useState(false); const regionRef = React.useRef(null); const top = position.startsWith("top"); const side = position.endsWith("left") ? "left" : position.endsWith("right") ? "right" : "center"; const expanded = hovered || focused || reduced; const paused = hovered || focused || hidden; const onHeight = React.useCallback((id: string, h: number) => setHeights((m) => (m[id] === h ? m : { ...m, [id]: h })), []); React.useEffect(() => { const onVisibility = () => setHidden(document.visibilityState === "hidden"); onVisibility(); document.addEventListener("visibilitychange", onVisibility); return () => document.removeEventListener("visibilitychange", onVisibility); }, []); // Alt + T jumps to the newest toast; Escape from there dismisses it. React.useEffect(() => { if (!hotkey) return; const onKey = (e: KeyboardEvent) => { if (!e.altKey || e.code !== `Key${hotkey.toUpperCase()}`) return; e.preventDefault(); regionRef.current?.querySelector("li")?.focus(); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [hotkey]); // Forget heights of toasts that are gone. React.useEffect(() => { setHeights((m) => { const ids = new Set(list.map((t) => t.id)); const next = Object.fromEntries(Object.entries(m).filter(([id]) => ids.has(id))); return Object.keys(next).length === Object.keys(m).length ? m : next; }); }, [list]); const shown = list.filter((t) => !t.dismissed); const front = shown[0]; const frontHeight = front ? heights[front.id] ?? 0 : 0; // Each toast's distance from the edge when fanned out: the heights of the ones in front of it. const offsets: Record = {}; let acc = 0; for (const t of list) { offsets[t.id] = acc; if (!t.dismissed) acc += (heights[t.id] ?? 0) + GAP; } const stackHeight = expanded ? Math.max(0, acc - GAP) : frontHeight + Math.min(shown.length - 1, visible - 1) * PEEK; return (

("[data-toast]")?.dataset.toast; if (id) toast.dismiss(id); }} className={`relative w-full outline-none ${shown.length ? "pointer-events-auto" : ""}`} style={{ height: stackHeight, transition: reduced ? "none" : `height 420ms ${EASE}` }} > {list.map((t) => { const index = t.dismissed ? Math.max(0, shown.findIndex((s) => s.id === t.id)) : shown.indexOf(t); return ( ); })}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-progress {\n\tfrom {\n\t\ttransform: scaleX(0);\n\t}\n\tto {\n\t\ttransform: scaleX(1);\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/toast-stack.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]