feat: implement Figlet, Pastel, and Unit tools with a unified layout

- Add Figlet text converter with font selection and history
- Add Pastel color palette generator and manipulation suite
- Add comprehensive Units converter with category-based logic
- Introduce AppShell with Sidebar and Header for navigation
- Modernize theme system with CSS variables and new animations
- Update project configuration and dependencies

components/figlet/ComparisonMode.tsx

@@ -0,0 +1,124 @@
+'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 { Copy, X, Download, GitCompare } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import type { FigletFont } from '@/types/figlet';
+
+export interface ComparisonModeProps {
+  text: string;
+  selectedFonts: string[];
+  fontResults: Record<string, string>;
+  onRemoveFont: (fontName: string) => void;
+  onCopyFont: (fontName: string, result: string) => void;
+  onDownloadFont: (fontName: string, result: string) => void;
+  className?: string;
+}
+
+export function ComparisonMode({
+  text,
+  selectedFonts,
+  fontResults,
+  onRemoveFont,
+  onCopyFont,
+  onDownloadFont,
+  className,
+}: ComparisonModeProps) {
+  return (
+    <div className={cn('space-y-4', className)}>
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Font Comparison</h2>
+        <span className="text-sm text-muted-foreground">
+          {selectedFonts.length} font{selectedFonts.length !== 1 ? 's' : ''} selected
+        </span>
+      </div>
+
+      {selectedFonts.length === 0 ? (
+        <Card>
+          <EmptyState
+            icon={GitCompare}
+            title="No fonts selected for comparison"
+            description="Click the + icon next to any font in the font selector to add it to the comparison"
+            className="py-12"
+          />
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          {selectedFonts.map((fontName, index) => (
+            <Card
+              key={fontName}
+              className="relative scale-in"
+              style={{ animationDelay: `${index * 50}ms` }}
+            >
+              <div className="p-4 space-y-3">
+                {/* Font Header */}
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-mono font-semibold px-2 py-1 bg-primary/10 text-primary rounded">
+                      {fontName}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onCopyFont(fontName, fontResults[fontName] || '')}
+                      className="h-8 w-8 p-0"
+                      title="Copy to clipboard"
+                    >
+                      <Copy className="h-3.5 w-3.5" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onDownloadFont(fontName, fontResults[fontName] || '')}
+                      className="h-8 w-8 p-0"
+                      title="Download"
+                    >
+                      <Download className="h-3.5 w-3.5" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onRemoveFont(fontName)}
+                      className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+                      title="Remove from comparison"
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                </div>
+
+                {/* ASCII Art Preview */}
+                <div className="relative">
+                  <pre className="p-4 bg-muted rounded-md overflow-x-auto">
+                    <code className="text-xs font-mono whitespace-pre">
+                      {fontResults[fontName] || 'Loading...'}
+                    </code>
+                  </pre>
+                </div>
+
+                {/* Stats */}
+                {fontResults[fontName] && (
+                  <div className="flex gap-4 text-xs text-muted-foreground">
+                    <span>
+                      {fontResults[fontName].split('\n').length} lines
+                    </span>
+                    <span>
+                      {Math.max(
+                        ...fontResults[fontName].split('\n').map((line) => line.length)
+                      )} chars wide
+                    </span>
+                  </div>
+                )}
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

components/figlet/FigletConverter.tsx

@@ -0,0 +1,288 @@
+'use client';
+
+import * as React from 'react';
+import { TextInput } from './TextInput';
+import { FontPreview } from './FontPreview';
+import { FontSelector } from './FontSelector';
+import { TextTemplates } from './TextTemplates';
+import { HistoryPanel } from './HistoryPanel';
+import { ComparisonMode } from './ComparisonMode';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { GitCompare } from 'lucide-react';
+import { textToAscii } from '@/lib/figlet/figletService';
+import { getFontList } from '@/lib/figlet/fontLoader';
+import { debounce } from '@/lib/utils/debounce';
+import { addRecentFont } from '@/lib/storage/favorites';
+import { addToHistory, type HistoryItem } from '@/lib/storage/history';
+import { decodeFromUrl, updateUrl, getShareableUrl } from '@/lib/utils/urlSharing';
+import { useToast } from '@/components/ui/Toast';
+import { cn } from '@/lib/utils/cn';
+import type { FigletFont } from '@/types/figlet';
+
+export function FigletConverter() {
+  const [text, setText] = React.useState('Figlet UI');
+  const [selectedFont, setSelectedFont] = React.useState('Standard');
+  const [asciiArt, setAsciiArt] = React.useState('');
+  const [fonts, setFonts] = React.useState<FigletFont[]>([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isComparisonMode, setIsComparisonMode] = React.useState(false);
+  const [comparisonFonts, setComparisonFonts] = React.useState<string[]>([]);
+  const [comparisonResults, setComparisonResults] = React.useState<Record<string, string>>({});
+  const { addToast } = useToast();
+
+  // Load fonts and check URL params on mount
+  React.useEffect(() => {
+    getFontList().then(setFonts);
+
+    // Check for URL parameters
+    const urlState = decodeFromUrl();
+    if (urlState) {
+      if (urlState.text) setText(urlState.text);
+      if (urlState.font) setSelectedFont(urlState.font);
+    }
+  }, []);
+
+  // Generate ASCII art
+  const generateAsciiArt = React.useCallback(
+    debounce(async (inputText: string, fontName: string) => {
+      if (!inputText) {
+        setAsciiArt('');
+        setIsLoading(false);
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        const result = await textToAscii(inputText, fontName);
+        setAsciiArt(result);
+      } catch (error) {
+        console.error('Error generating ASCII art:', error);
+        setAsciiArt('Error generating ASCII art. Please try a different font.');
+      } finally {
+        setIsLoading(false);
+      }
+    }, 300),
+    []
+  );
+
+  // Trigger generation when text or font changes
+  React.useEffect(() => {
+    generateAsciiArt(text, selectedFont);
+    // Track recent fonts
+    if (selectedFont) {
+      addRecentFont(selectedFont);
+    }
+    // Update URL
+    updateUrl(text, selectedFont);
+  }, [text, selectedFont, generateAsciiArt]);
+
+  // Copy to clipboard
+  const handleCopy = async () => {
+    if (!asciiArt) return;
+
+    try {
+      await navigator.clipboard.writeText(asciiArt);
+      addToHistory(text, selectedFont, asciiArt);
+      addToast('Copied to clipboard!', 'success');
+    } catch (error) {
+      console.error('Failed to copy:', error);
+      addToast('Failed to copy', 'error');
+    }
+  };
+
+  // Download as text file
+  const handleDownload = () => {
+    if (!asciiArt) return;
+
+    const blob = new Blob([asciiArt], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `figlet-${selectedFont}-${Date.now()}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  // Share (copy URL to clipboard)
+  const handleShare = async () => {
+    const shareUrl = getShareableUrl(text, selectedFont);
+
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      addToast('Shareable URL copied!', 'success');
+    } catch (error) {
+      console.error('Failed to copy URL:', error);
+      addToast('Failed to copy URL', 'error');
+    }
+  };
+
+  // Random font
+  const handleRandomFont = () => {
+    if (fonts.length === 0) return;
+    const randomIndex = Math.floor(Math.random() * fonts.length);
+    setSelectedFont(fonts[randomIndex].name);
+    addToast(`Random font: ${fonts[randomIndex].name}`, 'info');
+  };
+
+  const handleSelectTemplate = (templateText: string) => {
+    setText(templateText);
+    addToast(`Template applied: ${templateText}`, 'info');
+  };
+
+  const handleSelectHistory = (item: HistoryItem) => {
+    setText(item.text);
+    setSelectedFont(item.font);
+    addToast(`Restored from history`, 'info');
+  };
+
+  // Comparison mode handlers
+  const handleToggleComparisonMode = () => {
+    const newMode = !isComparisonMode;
+    setIsComparisonMode(newMode);
+    if (newMode && comparisonFonts.length === 0) {
+      // Initialize with current font
+      setComparisonFonts([selectedFont]);
+    }
+    addToast(newMode ? 'Comparison mode enabled' : 'Comparison mode disabled', 'info');
+  };
+
+  const handleAddToComparison = (fontName: string) => {
+    if (comparisonFonts.includes(fontName)) {
+      addToast('Font already in comparison', 'info');
+      return;
+    }
+    if (comparisonFonts.length >= 6) {
+      addToast('Maximum 6 fonts for comparison', 'info');
+      return;
+    }
+    setComparisonFonts([...comparisonFonts, fontName]);
+    addToast(`Added ${fontName} to comparison`, 'success');
+  };
+
+  const handleRemoveFromComparison = (fontName: string) => {
+    setComparisonFonts(comparisonFonts.filter((f) => f !== fontName));
+    addToast(`Removed ${fontName} from comparison`, 'info');
+  };
+
+  const handleCopyComparisonFont = async (fontName: string, result: string) => {
+    try {
+      await navigator.clipboard.writeText(result);
+      addToHistory(text, fontName, result);
+      addToast(`Copied ${fontName} to clipboard!`, 'success');
+    } catch (error) {
+      console.error('Failed to copy:', error);
+      addToast('Failed to copy', 'error');
+    }
+  };
+
+  const handleDownloadComparisonFont = (fontName: string, result: string) => {
+    const blob = new Blob([result], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `figlet-${fontName}-${Date.now()}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  // Generate comparison results
+  React.useEffect(() => {
+    if (!isComparisonMode || comparisonFonts.length === 0 || !text) return;
+
+    const generateComparisons = async () => {
+      const results: Record<string, string> = {};
+      for (const fontName of comparisonFonts) {
+        try {
+          results[fontName] = await textToAscii(text, fontName);
+        } catch (error) {
+          console.error(`Error generating ASCII art for ${fontName}:`, error);
+          results[fontName] = 'Error generating ASCII art';
+        }
+      }
+      setComparisonResults(results);
+    };
+
+    generateComparisons();
+  }, [isComparisonMode, comparisonFonts, text]);
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      {/* Left Column - Input and Preview */}
+      <div className="lg:col-span-2 space-y-6">
+        {/* Comparison Mode Toggle */}
+        <Card className="scale-in">
+          <div className="p-4 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <GitCompare className={cn(
+                "h-4 w-4",
+                isComparisonMode ? "text-primary" : "text-muted-foreground"
+              )} />
+              <span className="text-sm font-medium">Comparison Mode</span>
+              {isComparisonMode && comparisonFonts.length > 0 && (
+                <span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-full font-medium slide-down">
+                  {comparisonFonts.length} {comparisonFonts.length === 1 ? 'font' : 'fonts'}
+                </span>
+              )}
+            </div>
+            <Button
+              variant={isComparisonMode ? 'default' : 'outline'}
+              size="sm"
+              onClick={handleToggleComparisonMode}
+              className={cn(isComparisonMode && "shadow-lg")}
+            >
+              {isComparisonMode ? 'Disable' : 'Enable'}
+            </Button>
+          </div>
+        </Card>
+
+        <TextTemplates onSelectTemplate={handleSelectTemplate} />
+
+        <HistoryPanel onSelectHistory={handleSelectHistory} />
+
+        <TextInput
+          value={text}
+          onChange={setText}
+          placeholder="Type your text here..."
+        />
+
+        {isComparisonMode ? (
+          <ComparisonMode
+            text={text}
+            selectedFonts={comparisonFonts}
+            fontResults={comparisonResults}
+            onRemoveFont={handleRemoveFromComparison}
+            onCopyFont={handleCopyComparisonFont}
+            onDownloadFont={handleDownloadComparisonFont}
+          />
+        ) : (
+          <FontPreview
+            text={asciiArt}
+            font={selectedFont}
+            isLoading={isLoading}
+            onCopy={handleCopy}
+            onDownload={handleDownload}
+            onShare={handleShare}
+          />
+        )}
+      </div>
+
+      {/* Right Column - Font Selector */}
+      <div className="lg:col-span-1">
+        <FontSelector
+          fonts={fonts}
+          selectedFont={selectedFont}
+          onSelectFont={setSelectedFont}
+          onRandomFont={handleRandomFont}
+          isComparisonMode={isComparisonMode}
+          comparisonFonts={comparisonFonts}
+          onAddToComparison={handleAddToComparison}
+        />
+      </div>
+    </div>
+  );
+}

components/figlet/FontPreview.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import * as React from 'react';
+import { toPng } from 'html-to-image';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Copy, Download, Share2, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight, Type } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import { useToast } from '@/components/ui/Toast';
+
+export interface FontPreviewProps {
+  text: string;
+  font?: string;
+  isLoading?: boolean;
+  onCopy?: () => void;
+  onDownload?: () => void;
+  onShare?: () => void;
+  className?: string;
+}
+
+type TextAlign = 'left' | 'center' | 'right';
+
+export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare, className }: FontPreviewProps) {
+  const lineCount = text ? text.split('\n').length : 0;
+  const charCount = text ? text.length : 0;
+  const previewRef = React.useRef<HTMLDivElement>(null);
+  const [textAlign, setTextAlign] = React.useState<TextAlign>('left');
+  const [fontSize, setFontSize] = React.useState<'xs' | 'sm' | 'base'>('sm');
+  const { addToast } = useToast();
+
+  const handleExportPNG = async () => {
+    if (!previewRef.current || !text) return;
+
+    try {
+      const dataUrl = await toPng(previewRef.current, {
+        backgroundColor: getComputedStyle(previewRef.current).backgroundColor,
+        pixelRatio: 2,
+      });
+
+      const link = document.createElement('a');
+      link.download = `figlet-${font || 'export'}-${Date.now()}.png`;
+      link.href = dataUrl;
+      link.click();
+
+      addToast('Exported as PNG!', 'success');
+    } catch (error) {
+      console.error('Failed to export PNG:', error);
+      addToast('Failed to export PNG', 'error');
+    }
+  };
+  return (
+    <Card className={cn('relative', className)}>
+      <div className="p-6">
+        <div className="space-y-3 mb-4">
+          <div className="flex items-center justify-between flex-wrap gap-2">
+            <div className="flex items-center gap-2">
+              <h3 className="text-sm font-medium">Preview</h3>
+              {font && (
+                <span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-md font-mono">
+                  {font}
+                </span>
+              )}
+            </div>
+            <div className="flex gap-2 flex-wrap">
+              {onCopy && (
+                <Button variant="outline" size="sm" onClick={onCopy}>
+                  <Copy className="h-4 w-4" />
+                  Copy
+                </Button>
+              )}
+              {onShare && (
+                <Button variant="outline" size="sm" onClick={onShare} title="Copy shareable URL">
+                  <Share2 className="h-4 w-4" />
+                  Share
+                </Button>
+              )}
+              <Button variant="outline" size="sm" onClick={handleExportPNG} title="Export as PNG">
+                <ImageIcon className="h-4 w-4" />
+                PNG
+              </Button>
+              {onDownload && (
+                <Button variant="outline" size="sm" onClick={onDownload}>
+                  <Download className="h-4 w-4" />
+                  TXT
+                </Button>
+              )}
+            </div>
+          </div>
+
+          {/* Controls */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <div className="flex items-center gap-1 border rounded-md p-1">
+              <button
+                onClick={() => setTextAlign('left')}
+                className={cn(
+                  'p-1.5 rounded transition-colors',
+                  textAlign === 'left' ? 'bg-accent' : 'hover:bg-accent/50'
+                )}
+                title="Align left"
+              >
+                <AlignLeft className="h-3.5 w-3.5" />
+              </button>
+              <button
+                onClick={() => setTextAlign('center')}
+                className={cn(
+                  'p-1.5 rounded transition-colors',
+                  textAlign === 'center' ? 'bg-accent' : 'hover:bg-accent/50'
+                )}
+                title="Align center"
+              >
+                <AlignCenter className="h-3.5 w-3.5" />
+              </button>
+              <button
+                onClick={() => setTextAlign('right')}
+                className={cn(
+                  'p-1.5 rounded transition-colors',
+                  textAlign === 'right' ? 'bg-accent' : 'hover:bg-accent/50'
+                )}
+                title="Align right"
+              >
+                <AlignRight className="h-3.5 w-3.5" />
+              </button>
+            </div>
+
+            <div className="flex items-center gap-1 border rounded-md p-1">
+              <button
+                onClick={() => setFontSize('xs')}
+                className={cn(
+                  'px-2 py-1 text-xs rounded transition-colors',
+                  fontSize === 'xs' ? 'bg-accent' : 'hover:bg-accent/50'
+                )}
+              >
+                XS
+              </button>
+              <button
+                onClick={() => setFontSize('sm')}
+                className={cn(
+                  'px-2 py-1 text-xs rounded transition-colors',
+                  fontSize === 'sm' ? 'bg-accent' : 'hover:bg-accent/50'
+                )}
+              >
+                SM
+              </button>
+              <button
+                onClick={() => setFontSize('base')}
+                className={cn(
+                  'px-2 py-1 text-xs rounded transition-colors',
+                  fontSize === 'base' ? 'bg-accent' : 'hover:bg-accent/50'
+                )}
+              >
+                MD
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {!isLoading && text && (
+          <div className="flex gap-4 mb-2 text-xs text-muted-foreground">
+            <span>{lineCount} lines</span>
+            <span>•</span>
+            <span>{charCount} chars</span>
+          </div>
+        )}
+
+        <div
+          ref={previewRef}
+          className={cn(
+            'relative min-h-[200px] bg-muted/50 rounded-lg p-4 overflow-x-auto',
+            textAlign === 'center' && 'text-center',
+            textAlign === 'right' && 'text-right'
+          )}
+        >
+          {isLoading ? (
+            <div className="space-y-3">
+              <Skeleton className="h-6 w-3/4" />
+              <Skeleton className="h-6 w-full" />
+              <Skeleton className="h-6 w-5/6" />
+              <Skeleton className="h-6 w-2/3" />
+              <Skeleton className="h-6 w-full" />
+              <Skeleton className="h-6 w-4/5" />
+            </div>
+          ) : text ? (
+            <pre className={cn(
+              'font-mono whitespace-pre overflow-x-auto animate-in',
+              fontSize === 'xs' && 'text-[10px]',
+              fontSize === 'sm' && 'text-xs sm:text-sm',
+              fontSize === 'base' && 'text-sm sm:text-base'
+            )}>
+              {text}
+            </pre>
+          ) : (
+            <EmptyState
+              icon={Type}
+              title="Start typing to see your ASCII art"
+              description="Enter text in the input field above to generate ASCII art with the selected font"
+              className="py-8"
+            />
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}

components/figlet/FontSelector.tsx

@@ -0,0 +1,279 @@
+'use client';
+
+import * as React from 'react';
+import Fuse from 'fuse.js';
+import { Input } from '@/components/ui/Input';
+import { Card } from '@/components/ui/Card';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Search, X, Heart, Clock, List, Shuffle, Plus, Check } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import { Button } from '@/components/ui/Button';
+import type { FigletFont } from '@/types/figlet';
+import { getFavorites, getRecentFonts, toggleFavorite, isFavorite } from '@/lib/storage/favorites';
+
+export interface FontSelectorProps {
+  fonts: FigletFont[];
+  selectedFont: string;
+  onSelectFont: (fontName: string) => void;
+  onRandomFont?: () => void;
+  isComparisonMode?: boolean;
+  comparisonFonts?: string[];
+  onAddToComparison?: (fontName: string) => void;
+  className?: string;
+}
+
+type FilterType = 'all' | 'favorites' | 'recent';
+
+export function FontSelector({
+  fonts,
+  selectedFont,
+  onSelectFont,
+  onRandomFont,
+  isComparisonMode = false,
+  comparisonFonts = [],
+  onAddToComparison,
+  className
+}: FontSelectorProps) {
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [filter, setFilter] = React.useState<FilterType>('all');
+  const [favorites, setFavorites] = React.useState<string[]>([]);
+  const [recentFonts, setRecentFonts] = React.useState<string[]>([]);
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+  // Load favorites and recent fonts
+  React.useEffect(() => {
+    setFavorites(getFavorites());
+    setRecentFonts(getRecentFonts());
+  }, []);
+
+  // Keyboard shortcuts
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // "/" to focus search
+      if (e.key === '/' && !e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
+        searchInputRef.current?.focus();
+      }
+      // "Esc" to clear search
+      if (e.key === 'Escape' && searchQuery) {
+        e.preventDefault();
+        setSearchQuery('');
+        searchInputRef.current?.blur();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [searchQuery]);
+
+  // Initialize Fuse.js for fuzzy search
+  const fuse = React.useMemo(() => {
+    return new Fuse(fonts, {
+      keys: ['name', 'fileName'],
+      threshold: 0.3,
+      includeScore: true,
+    });
+  }, [fonts]);
+
+  const filteredFonts = React.useMemo(() => {
+    let fontsToFilter = fonts;
+
+    // Apply category filter
+    if (filter === 'favorites') {
+      fontsToFilter = fonts.filter(f => favorites.includes(f.name));
+    } else if (filter === 'recent') {
+      fontsToFilter = fonts.filter(f => recentFonts.includes(f.name));
+      // Sort by recent order
+      fontsToFilter.sort((a, b) => {
+        return recentFonts.indexOf(a.name) - recentFonts.indexOf(b.name);
+      });
+    }
+
+    // Apply search query
+    if (!searchQuery) return fontsToFilter;
+
+    const results = fuse.search(searchQuery);
+    const searchResults = results.map(result => result.item);
+
+    // Filter search results by category
+    if (filter === 'favorites') {
+      return searchResults.filter(f => favorites.includes(f.name));
+    } else if (filter === 'recent') {
+      return searchResults.filter(f => recentFonts.includes(f.name));
+    }
+
+    return searchResults;
+  }, [fonts, searchQuery, fuse, filter, favorites, recentFonts]);
+
+  const handleToggleFavorite = (fontName: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    toggleFavorite(fontName);
+    setFavorites(getFavorites());
+  };
+
+  return (
+    <Card className={className}>
+      <div className="p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-sm font-medium">Select Font</h3>
+          {onRandomFont && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onRandomFont}
+              title="Random font"
+            >
+              <Shuffle className="h-4 w-4" />
+              Random
+            </Button>
+          )}
+        </div>
+
+        {/* Filter Tabs */}
+        <div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg">
+          <button
+            onClick={() => setFilter('all')}
+            className={cn(
+              'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
+              filter === 'all' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
+            )}
+          >
+            <List className="inline-block h-3 w-3 mr-1" />
+            All
+          </button>
+          <button
+            onClick={() => setFilter('favorites')}
+            className={cn(
+              'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
+              filter === 'favorites' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
+            )}
+          >
+            <Heart className="inline-block h-3 w-3 mr-1" />
+            Favorites
+          </button>
+          <button
+            onClick={() => setFilter('recent')}
+            className={cn(
+              'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
+              filter === 'recent' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
+            )}
+          >
+            <Clock className="inline-block h-3 w-3 mr-1" />
+            Recent
+          </button>
+        </div>
+
+        {/* Search Input */}
+        <div className="relative mb-4">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+          <Input
+            ref={searchInputRef}
+            type="text"
+            placeholder="Search fonts... (Press / to focus)"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9 pr-9"
+          />
+          {searchQuery && (
+            <button
+              onClick={() => setSearchQuery('')}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              aria-label="Clear search"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+
+        {/* Font List */}
+        <div className="max-h-[400px] overflow-y-auto space-y-1 pr-2">
+          {filteredFonts.length === 0 ? (
+            <EmptyState
+              icon={filter === 'favorites' ? Heart : (filter === 'recent' ? Clock : Search)}
+              title={
+                filter === 'favorites'
+                  ? 'No favorite fonts yet'
+                  : filter === 'recent'
+                  ? 'No recent fonts'
+                  : 'No fonts found'
+              }
+              description={
+                filter === 'favorites'
+                  ? 'Click the heart icon on any font to add it to your favorites'
+                  : filter === 'recent'
+                  ? 'Fonts you use will appear here'
+                  : searchQuery
+                  ? 'Try a different search term'
+                  : 'Loading fonts...'
+              }
+              className="py-8"
+            />
+          ) : (
+            filteredFonts.map((font) => {
+              const isInComparison = comparisonFonts.includes(font.name);
+              return (
+                <div
+                  key={font.name}
+                  className={cn(
+                    'group flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
+                    'hover:bg-accent hover:text-accent-foreground',
+                    selectedFont === font.name && 'bg-accent text-accent-foreground font-medium'
+                  )}
+                >
+                  <button
+                    onClick={() => onSelectFont(font.name)}
+                    className="flex-1 text-left"
+                  >
+                    {font.name}
+                  </button>
+                  {isComparisonMode && onAddToComparison && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onAddToComparison(font.name);
+                      }}
+                      className={cn(
+                        'opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded',
+                        isInComparison && 'opacity-100 bg-primary/10'
+                      )}
+                      aria-label={isInComparison ? 'In comparison' : 'Add to comparison'}
+                      disabled={isInComparison}
+                    >
+                      {isInComparison ? (
+                        <Check className="h-4 w-4 text-primary" />
+                      ) : (
+                        <Plus className="h-4 w-4 text-muted-foreground hover:text-primary" />
+                      )}
+                    </button>
+                  )}
+                  <button
+                    onClick={(e) => handleToggleFavorite(font.name, e)}
+                    className={cn(
+                      'opacity-0 group-hover:opacity-100 transition-opacity',
+                      isFavorite(font.name) && 'opacity-100'
+                    )}
+                    aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
+                  >
+                    <Heart
+                      className={cn(
+                        'h-4 w-4 transition-colors',
+                        isFavorite(font.name) ? 'fill-red-500 text-red-500' : 'text-muted-foreground hover:text-red-500'
+                      )}
+                    />
+                  </button>
+                </div>
+              );
+            })
+          )}
+        </div>
+
+        {/* Stats */}
+        <div className="mt-4 pt-4 border-t text-xs text-muted-foreground">
+          {filteredFonts.length} font{filteredFonts.length !== 1 ? 's' : ''}
+          {filter === 'favorites' && ` • ${favorites.length} total favorites`}
+          {filter === 'recent' && ` • ${recentFonts.length} recent`}
+        </div>
+      </div>
+    </Card>
+  );
+}

components/figlet/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>
+  );
+}

components/figlet/TextInput.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface TextInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function TextInput({ value, onChange, placeholder, className }: TextInputProps) {
+  return (
+    <div className={cn('relative', className)}>
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder || 'Type something...'}
+        className="w-full h-32 px-4 py-3 text-base border border-input rounded-lg bg-background resize-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 placeholder:text-muted-foreground"
+        maxLength={100}
+      />
+      <div className="absolute bottom-2 right-2 text-xs text-muted-foreground">
+        {value.length}/100
+      </div>
+    </div>
+  );
+}

components/figlet/TextTemplates.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import * as React from 'react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Sparkles, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import { TEXT_TEMPLATES, TEMPLATE_CATEGORIES } from '@/lib/figlet/constants/templates';
+
+export interface TextTemplatesProps {
+  onSelectTemplate: (text: string) => void;
+  className?: string;
+}
+
+export function TextTemplates({ onSelectTemplate, className }: TextTemplatesProps) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [selectedCategory, setSelectedCategory] = React.useState<string>('all');
+
+  const filteredTemplates = React.useMemo(() => {
+    if (selectedCategory === 'all') return TEXT_TEMPLATES;
+    return TEXT_TEMPLATES.filter(t => t.category === selectedCategory);
+  }, [selectedCategory]);
+
+  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">
+            <Sparkles className="h-4 w-4" />
+            <span>Text Templates</span>
+            <span className="text-xs text-muted-foreground">({TEXT_TEMPLATES.length})</span>
+          </div>
+          {isExpanded ? (
+            <ChevronUp className="h-4 w-4" />
+          ) : (
+            <ChevronDown className="h-4 w-4" />
+          )}
+        </button>
+
+        {isExpanded && (
+          <div className="mt-4 space-y-3 slide-down">
+            {/* Category Filter */}
+            <div className="flex gap-1 flex-wrap">
+              <button
+                onClick={() => setSelectedCategory('all')}
+                className={cn(
+                  'px-2 py-1 text-xs rounded-md transition-colors',
+                  selectedCategory === 'all'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted hover:bg-muted/80'
+                )}
+              >
+                All
+              </button>
+              {TEMPLATE_CATEGORIES.map((cat) => (
+                <button
+                  key={cat.id}
+                  onClick={() => setSelectedCategory(cat.id)}
+                  className={cn(
+                    'px-2 py-1 text-xs rounded-md transition-colors',
+                    selectedCategory === cat.id
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted hover:bg-muted/80'
+                  )}
+                >
+                  {cat.icon} {cat.label}
+                </button>
+              ))}
+            </div>
+
+            {/* Templates Grid */}
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+              {filteredTemplates.map((template) => (
+                <button
+                  key={template.id}
+                  onClick={() => onSelectTemplate(template.text)}
+                  className="px-3 py-2 text-xs bg-muted hover:bg-accent hover:scale-105 rounded-md transition-all text-left truncate"
+                  title={template.text}
+                >
+                  {template.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}