feat: add templates, history, comparison mode, animations, and empty states

- Add text templates with 16 pre-made options across 4 categories (greeting, tech, fun, seasonal)
- Add copy history panel tracking last 10 copied items with restore functionality
- Add font comparison mode to view multiple fonts side-by-side (up to 6 fonts)
- Add smooth animations: slide-down, slide-up, scale-in, fade-in, pulse, and shimmer
- Add loading skeletons for better perceived performance
- Add EmptyState component with contextual messages and icons
- Add hover effects and transitions throughout the UI
- Improve visual feedback with animated badges and shadows

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

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

components/converter/HistoryPanel.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import * as React from 'react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { History, X, Trash2, ChevronDown, ChevronUp, Clock } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import { getHistory, clearHistory, removeHistoryItem, type HistoryItem } from '@/lib/storage/history';
+
+export interface HistoryPanelProps {
+  onSelectHistory: (item: HistoryItem) => void;
+  className?: string;
+}
+
+export function HistoryPanel({ onSelectHistory, className }: HistoryPanelProps) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [history, setHistory] = React.useState<HistoryItem[]>([]);
+
+  const loadHistory = React.useCallback(() => {
+    setHistory(getHistory());
+  }, []);
+
+  React.useEffect(() => {
+    loadHistory();
+    // Refresh history every 2 seconds when expanded
+    if (isExpanded) {
+      const interval = setInterval(loadHistory, 2000);
+      return () => clearInterval(interval);
+    }
+  }, [isExpanded, loadHistory]);
+
+  const handleClearAll = () => {
+    clearHistory();
+    loadHistory();
+  };
+
+  const handleRemove = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    removeHistoryItem(id);
+    loadHistory();
+  };
+
+  const formatTime = (timestamp: number) => {
+    const now = Date.now();
+    const diff = now - timestamp;
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+
+    if (minutes < 1) return 'Just now';
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    return new Date(timestamp).toLocaleDateString();
+  };
+
+  return (
+    <Card className={className}>
+      <div className="p-4">
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="w-full flex items-center justify-between text-sm font-medium hover:text-primary transition-colors"
+        >
+          <div className="flex items-center gap-2">
+            <History className="h-4 w-4" />
+            <span>Copy History</span>
+            <span className="text-xs text-muted-foreground">({history.length})</span>
+          </div>
+          {isExpanded ? (
+            <ChevronUp className="h-4 w-4" />
+          ) : (
+            <ChevronDown className="h-4 w-4" />
+          )}
+        </button>
+
+        {isExpanded && (
+          <div className="mt-4 space-y-2 slide-down">
+            {history.length === 0 ? (
+              <EmptyState
+                icon={Clock}
+                title="No copy history yet"
+                description="Your recently copied ASCII art will appear here"
+              />
+            ) : (
+              <>
+                <div className="flex justify-end">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleClearAll}
+                    className="text-destructive hover:text-destructive"
+                  >
+                    <Trash2 className="h-3 w-3 mr-1" />
+                    Clear All
+                  </Button>
+                </div>
+
+                <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                  {history.map((item) => (
+                    <div
+                      key={item.id}
+                      onClick={() => onSelectHistory(item)}
+                      className="group relative p-3 bg-muted/50 hover:bg-accent hover:scale-[1.02] rounded-md cursor-pointer transition-all"
+                    >
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2 mb-1">
+                            <span className="text-xs font-mono px-1.5 py-0.5 bg-primary/10 text-primary rounded">
+                              {item.font}
+                            </span>
+                            <span className="text-xs text-muted-foreground">
+                              {formatTime(item.timestamp)}
+                            </span>
+                          </div>
+                          <p className="text-xs truncate">{item.text}</p>
+                        </div>
+                        <button
+                          onClick={(e) => handleRemove(item.id, e)}
+                          className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-destructive/10 rounded"
+                        >
+                          <X className="h-3 w-3 text-destructive" />
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}