feat(ui): implement comprehensive toast notification system

Added a complete toast notification system with:
- Toast store using Zustand for state management
- Toast component with 4 types: success, error, warning, info
- Animated slide-in/slide-out transitions
- Auto-dismiss after configurable duration
- Close button on each toast
- Utility functions for easy access (toast.success(), toast.error(), etc.)

Integrated toast notifications into file operations:
- Success notifications for: open image, open project, export image, save project
- Error notifications for: failed operations
- Warning notifications for: unsupported file types

UI Features:
- Stacks toasts in top-right corner
- Color-coded by type with icons (CheckCircle, AlertCircle, AlertTriangle, Info)
- Accessible with ARIA attributes
- Smooth animations using custom CSS keyframes

This provides immediate user feedback for all major operations throughout
the application.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/providers/toast-provider.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useToastStore } from '@/store/toast-store';
+import { Toast } from '@/components/ui/toast';
+
+export function ToastProvider() {
+  const { toasts } = useToastStore();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div
+      className="fixed top-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none"
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      {toasts.map((toast) => (
+        <div key={toast.id} className="pointer-events-auto">
+          <Toast toast={toast} />
+        </div>
+      ))}
+    </div>
+  );
+}

components/ui/toast.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+import type { Toast as ToastType } from '@/store/toast-store';
+import { useToastStore } from '@/store/toast-store';
+
+interface ToastProps {
+  toast: ToastType;
+}
+
+const iconMap = {
+  success: CheckCircle,
+  error: AlertCircle,
+  warning: AlertTriangle,
+  info: Info,
+};
+
+const colorMap = {
+  success: 'bg-success text-success-foreground border-success',
+  error: 'bg-destructive text-destructive-foreground border-destructive',
+  warning: 'bg-warning text-warning-foreground border-warning',
+  info: 'bg-info text-info-foreground border-info',
+};
+
+export function Toast({ toast }: ToastProps) {
+  const { removeToast } = useToastStore();
+  const [isExiting, setIsExiting] = useState(false);
+  const Icon = iconMap[toast.type];
+
+  const handleClose = () => {
+    setIsExiting(true);
+    setTimeout(() => {
+      removeToast(toast.id);
+    }, 300); // Match animation duration
+  };
+
+  return (
+    <div
+      className={`
+        flex items-center gap-3 min-w-[300px] max-w-md p-4 rounded-lg border-2 shadow-lg
+        ${colorMap[toast.type]}
+        ${isExiting ? 'animate-slideOutRight' : 'animate-slideInFromRight'}
+      `}
+      role="alert"
+      aria-live="polite"
+    >
+      <Icon className="w-5 h-5 flex-shrink-0" />
+      <p className="flex-1 text-sm font-medium">{toast.message}</p>
+      <button
+        onClick={handleClose}
+        className="flex-shrink-0 rounded-full p-1 hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
+        aria-label="Close notification"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  );
+}