toast() works from anywhere — an event handler, a fetch callback, a non-component utility function — with no <ToastContext> to wrap your app in. That's because there isn't one. The whole system is a module-level array and a Set of subscribers.

// Minimal external store so `toast()` can be called from anywhere, no context needed.
let counter = 0;
let records: ToastRecord[] = [];
const listeners = new Set<(r: ToastRecord[]) => void>();

function emit() {
  for (const l of listeners) l(records);
}

function addToast(options: ToastOptions): number {
  const id = ++counter;
  records = [{ id, variant: "default", ...options }, ...records];
  emit();
  return id;
}

ToastProvider is the only thing that subscribes: it calls setItems inside a useEffect, adding itself to listeners. Call toast() from a plain function with no React tree in scope, and it mutates records and notifies every mounted ToastProvider — typically one, rendered once near your app root.

The stack isn't a <ul> with gap; it's absolutely-positioned cards that compute their own offset from their index.

Every card is full-size and positioned at the same inset-x-0; it's the y offset and scale shrinking with depth that make only a sliver of each back card visible above the front one. Past MAX_VISIBLE, a toast still exists in the DOM — it's just opacity: 0, ready the instant it's promoted.

ToastProvider tracks one expanded boolean, flipped by the mouse leaving or entering the stack region.

Expanding swaps every card's y from the collapsed peek formula to a real cumulative offset — measured, not guessed, by a ResizeObserver on each ToastItem reporting its height up through onHeight. The same expanded flag also gates the auto-dismiss timer:

React.useEffect(() => {
  if (expanded) return;
  const id = setTimeout(
    () => dismissToast(record.id),
    record.duration ?? defaultDuration,
  );
  return () => clearTimeout(id);
}, [expanded, record.id, record.duration, defaultDuration]);

Because the setTimeout is inside an effect keyed on expanded, hovering doesn't pause a running countdown — it cancels it and re-arms a fresh one on mouse-leave. Close enough for a toast, and far simpler than a real pause/resume clock.

Every toast is also drag="x", and onDragEnd makes the dismiss call.

It's an OR, not an AND — a slow, deliberate 80px drag dismisses, and so does a fast flick that never gets that far. dragElastic={0.6} gives the card a little resistance under the pointer before it commits, and there's no snap-back branch: cross either bar and dismissToast fires immediately, same as the swipe-and-let-go you'd expect from a native notification.

An external store instead of context, absolutely-positioned cards instead of a list, and one drag gesture instead of a dismiss button — the stack is three small decisions, not one big animation.