Function ToastProvider

web/components/ui/toast.tsx:150–162

({ children }: { children: React.ReactNode })

// ── Provider (mount once in layout) ──────────────────────────────────────────

export function ToastProvider({ children }: { children: React.ReactNode }) {
  const toasts = useToastStore()

  return (
    <RadixToast.Provider swipeDirection="right">
      {children}
      {toasts.map((t) => (
        <ToastItem key={t.id} {...t} />
      ))}
      <RadixToast.Viewport className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 w-80 focus:outline-none" />
    </RadixToast.Provider>
  )
}

// ── Hook (alternative to imperative API) ─────────────────────────────────────