feat: add toast notification system with success, error, and info variants

src/components/toast/ToastContainer.tsx

@@ -0,0 +1,31 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { useToastStore } from "@/stores/toast-store";
+
+const TYPE_STYLES = {
+  success: "bg-pylon-accent/10 text-pylon-accent border-pylon-accent/20",
+  error: "bg-pylon-danger/10 text-pylon-danger border-pylon-danger/20",
+  info: "bg-pylon-surface text-pylon-text border-border",
+} as const;
+
+export function ToastContainer() {
+  const toasts = useToastStore((s) => s.toasts);
+
+  return (
+    <div className="pointer-events-none fixed bottom-4 right-4 z-[100] flex flex-col gap-2">
+      <AnimatePresence>
+        {toasts.map((toast) => (
+          <motion.div
+            key={toast.id}
+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 10, scale: 0.95 }}
+            transition={{ type: "spring", stiffness: 400, damping: 25 }}
+            className={`pointer-events-auto rounded-lg border px-4 py-2 text-sm shadow-md ${TYPE_STYLES[toast.type]}`}
+          >
+            {toast.message}
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}