refactor: streamline toast system and harmonize UI across tools

- Migrate all toast notifications to sonner and remove custom ToastProvider
- Align Card and TextInput styling across Figlet and Pastel (rounded-lg, border-based)
- Fix build error by removing non-existent export in lib/units/index.ts
- Clean up unused Figlet components and constants

app/(app)/figlet/page.tsx

@@ -2,12 +2,16 @@ import { FigletConverter } from '@/components/figlet/FigletConverter';
 
 export default function FigletPage() {
   return (
-    <div className="p-4 sm:p-8 max-w-7xl mx-auto">
+    <div className="min-h-screen py-12">
-      <div className="mb-8">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
-        <h1 className="text-3xl font-bold mb-2">Figlet UI</h1>
+        <div>
-        <p className="text-muted-foreground italic">ASCII Art Text Generator with 373 Fonts</p>
+          <h1 className="text-4xl font-bold mb-2">Figlet ASCII</h1>
+          <p className="text-muted-foreground">
+            ASCII Art Text Generator with 373 Fonts
+          </p>
+        </div>
+        <FigletConverter />
       </div>
-      <FigletConverter />
     </div>
   );
 }

app/(app)/pastel/batch/page.tsx

@@ -106,7 +106,7 @@ export default function BatchPage() {
                 value={inputColors}
                 onChange={(e) => setInputColors(e.target.value)}
                 placeholder="#ff0099, #00ff99, #9900ff
#ff5533
#3355ff"
-                className="w-full h-48 p-3 border rounded-lg bg-background font-mono text-sm"
+                className="w-full h-48 p-3 border border-border rounded-xl bg-input font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50 transition-all duration-200"
               />
 
               <p className="text-xs text-muted-foreground mt-2">

app/(app)/pastel/layout.tsx

@@ -4,8 +4,8 @@ export default function PastelLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="p-4 sm:p-8 max-w-7xl mx-auto">
+    <>
       {children}
-    </div>
+    </>
   );
 }

app/(app)/units/page.tsx

@@ -2,12 +2,16 @@ import MainConverter from '@/components/units/converter/MainConverter';
 
 export default function UnitsPage() {
   return (
-    <div className="p-4 sm:p-8 max-w-7xl mx-auto">
+    <div className="min-h-screen py-12">
-      <div className="mb-8">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
-        <h1 className="text-3xl font-bold mb-2">Units Converter</h1>
+        <div>
-        <p className="text-muted-foreground italic">Smart unit converter with 187 units across 23 categories</p>
+          <h1 className="text-4xl font-bold mb-2">Units Converter</h1>
+          <p className="text-muted-foreground">
+            Smart unit converter with 187 units across 23 categories
+          </p>
+        </div>
+        <MainConverter />
       </div>
-      <MainConverter />
     </div>
   );
 }

app/globals.css

@@ -110,6 +110,7 @@
 }
 
 :root, .dark {
+  color-scheme: dark;
   /* CORPORATE DARK THEME (The Standard) */
   --background: #0a0a0f;
   --foreground: #ffffff;
@@ -134,6 +135,7 @@
 }
 
 .light {
+  color-scheme: light;
   /* LIGHT ADAPTATION (Keeping the "Glass" look) */
   --background: oklch(98% 0.005 255);
   --foreground: oklch(20% 0.04 255);
@@ -166,6 +168,10 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  /* Fix native select dropdown styling */
+  select option {
+    @apply bg-popover text-popover-foreground;
+  }
 }
 
 html {

components/BackToTop.tsx

@@ -44,7 +44,7 @@ export default function BackToTop() {
       {isVisible && (
         <motion.button
           onClick={scrollToTop}
-          className="fixed bottom-8 right-8 p-4 rounded-full glass hover:bg-white/10 text-purple-400 hover:text-purple-300 transition-colors shadow-lg z-40 group"
+          className="fixed bottom-8 right-8 p-4 rounded-full glass hover:bg-accent/50 text-purple-400 hover:text-purple-300 transition-colors shadow-lg z-40 group"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: 20 }}

components/figlet/ComparisonMode.tsx

@@ -1,124 +0,0 @@
-'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

@@ -4,20 +4,12 @@ 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 { toast } from 'sonner';
-import { cn } from '@/lib/utils/cn';
 import type { FigletFont } from '@/types/figlet';
 
 export function FigletConverter() {
@@ -26,10 +18,6 @@ export function FigletConverter() {
   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(() => {
@@ -83,11 +71,10 @@ export function FigletConverter() {
 
     try {
       await navigator.clipboard.writeText(asciiArt);
-      addToHistory(text, selectedFont, asciiArt);
+      toast.success('Copied to clipboard!');
-      addToast('Copied to clipboard!', 'success');
     } catch (error) {
       console.error('Failed to copy:', error);
-      addToast('Failed to copy', 'error');
+      toast.error('Failed to copy');
     }
   };
 
@@ -112,10 +99,10 @@ export function FigletConverter() {
 
     try {
       await navigator.clipboard.writeText(shareUrl);
-      addToast('Shareable URL copied!', 'success');
+      toast.success('Shareable URL copied!');
     } catch (error) {
       console.error('Failed to copy URL:', error);
-      addToast('Failed to copy URL', 'error');
+      toast.error('Failed to copy URL');
     }
   };
 
@@ -124,164 +111,40 @@ export function FigletConverter() {
     if (fonts.length === 0) return;
     const randomIndex = Math.floor(Math.random() * fonts.length);
     setSelectedFont(fonts[randomIndex].name);
-    addToast(`Random font: ${fonts[randomIndex].name}`, 'info');
+    toast.info(`Random font: ${fonts[randomIndex].name}`);
   };
 
-  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">
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch lg:max-h-[800px]">
       {/* Left Column - Input and Preview */}
-      <div className="lg:col-span-2 space-y-6">
+      <div className="lg:col-span-2 space-y-6 overflow-y-auto pr-2 custom-scrollbar">
-        {/* 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 ? (
+        <FontPreview
-          <ComparisonMode
+          text={asciiArt}
-            text={text}
+          font={selectedFont}
-            selectedFonts={comparisonFonts}
+          isLoading={isLoading}
-            fontResults={comparisonResults}
+          onCopy={handleCopy}
-            onRemoveFont={handleRemoveFromComparison}
+          onDownload={handleDownload}
-            onCopyFont={handleCopyComparisonFont}
+          onShare={handleShare}
-            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">
+      <div className="lg:col-span-1 h-[500px] lg:h-auto relative">
-        <FontSelector
+        <div className="lg:absolute lg:inset-0 h-full">
-          fonts={fonts}
+          <FontSelector
-          selectedFont={selectedFont}
+            fonts={fonts}
-          onSelectFont={setSelectedFont}
+            selectedFont={selectedFont}
-          onRandomFont={handleRandomFont}
+            onSelectFont={setSelectedFont}
-          isComparisonMode={isComparisonMode}
+            onRandomFont={handleRandomFont}
-          comparisonFonts={comparisonFonts}
+            className="h-full"
-          onAddToComparison={handleAddToComparison}
+          />
-        />
+        </div>
       </div>
     </div>
   );

components/figlet/FontPreview.tsx

@@ -8,7 +8,7 @@ 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';
+import { toast } from 'sonner';
 
 export interface FontPreviewProps {
   text: string;
@@ -28,7 +28,6 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
   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;
@@ -44,10 +43,10 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
       link.href = dataUrl;
       link.click();
 
-      addToast('Exported as PNG!', 'success');
+      toast.success('Exported as PNG!');
     } catch (error) {
       console.error('Failed to export PNG:', error);
-      addToast('Failed to export PNG', 'error');
+      toast.error('Failed to export PNG');
     }
   };
   return (

components/figlet/FontSelector.tsx

@@ -5,7 +5,7 @@ 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 { Search, X, Heart, Clock, List, Shuffle } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
 import { Button } from '@/components/ui/Button';
 import type { FigletFont } from '@/types/figlet';
@@ -16,9 +16,6 @@ export interface FontSelectorProps {
   selectedFont: string;
   onSelectFont: (fontName: string) => void;
   onRandomFont?: () => void;
-  isComparisonMode?: boolean;
-  comparisonFonts?: string[];
-  onAddToComparison?: (fontName: string) => void;
   className?: string;
 }
 
@@ -29,9 +26,6 @@ export function FontSelector({
   selectedFont,
   onSelectFont,
   onRandomFont,
-  isComparisonMode = false,
-  comparisonFonts = [],
-  onAddToComparison,
   className
 }: FontSelectorProps) {
   const [searchQuery, setSearchQuery] = React.useState('');
@@ -112,9 +106,9 @@ export function FontSelector({
   };
 
   return (
-    <Card className={className}>
+    <Card className={cn("flex flex-col min-h-0 overflow-hidden", className)}>
-      <div className="p-6">
+      <div className="p-6 flex flex-col flex-1 min-h-0">
-        <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center justify-between mb-4 shrink-0">
           <h3 className="text-sm font-medium">Select Font</h3>
           {onRandomFont && (
             <Button
@@ -123,14 +117,14 @@ export function FontSelector({
               onClick={onRandomFont}
               title="Random font"
             >
-              <Shuffle className="h-4 w-4" />
+              <Shuffle className="h-3 w-3 mr-2" />
               Random
             </Button>
           )}
         </div>
 
         {/* Filter Tabs */}
-        <div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg">
+        <div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg shrink-0">
           <button
             onClick={() => setFilter('all')}
             className={cn(
@@ -164,7 +158,7 @@ export function FontSelector({
         </div>
 
         {/* Search Input */}
-        <div className="relative mb-4">
+        <div className="relative mb-4 shrink-0">
           <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}
@@ -186,7 +180,7 @@ export function FontSelector({
         </div>
 
         {/* Font List */}
-        <div className="max-h-[400px] overflow-y-auto space-y-1 pr-2">
+        <div className="flex-1 overflow-y-auto space-y-1 pr-2">
           {filteredFonts.length === 0 ? (
             <EmptyState
               icon={filter === 'favorites' ? Heart : (filter === 'recent' ? Clock : Search)}
@@ -209,66 +203,40 @@ export function FontSelector({
               className="py-8"
             />
           ) : (
-            filteredFonts.map((font) => {
+            filteredFonts.map((font) => (
-              const isInComparison = comparisonFonts.includes(font.name);
+              <div
-              return (
+                key={font.name}
-                <div
+                className={cn(
-                  key={font.name}
+                  'group flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
-                  className={cn(
+                  'hover:bg-accent hover:text-accent-foreground',
-                    'group flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
+                  selectedFont === font.name && 'bg-accent text-accent-foreground font-medium'
-                    '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"
                 >
-                  <button
+                  {font.name}
-                    onClick={() => onSelectFont(font.name)}
+                </button>
-                    className="flex-1 text-left"
+                <button
-                  >
+                  onClick={(e) => handleToggleFavorite(font.name, e)}
-                    {font.name}
+                  className="p-1"
-                  </button>
+                  aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
-                  {isComparisonMode && onAddToComparison && (
+                >
-                    <button
+                  <Heart
-                      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',
+                      'h-4 w-4 transition-colors',
-                      isFavorite(font.name) && 'opacity-100'
+                      isFavorite(font.name) ? 'fill-red-500 text-red-500' : 'text-muted-foreground/30 hover:text-red-500/50'
                     )}
-                    aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
+                  />
-                  >
+                </button>
-                    <Heart
+              </div>
-                      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">
+        <div className="mt-4 pt-4 border-t text-xs text-muted-foreground shrink-0">
           {filteredFonts.length} font{filteredFonts.length !== 1 ? 's' : ''}
           {filter === 'favorites' && ` • ${favorites.length} total favorites`}
           {filter === 'recent' && ` • ${recentFonts.length} recent`}

components/figlet/HistoryPanel.tsx

@@ -1,133 +0,0 @@
-'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

@@ -17,7 +17,7 @@ export function TextInput({ value, onChange, placeholder, className }: TextInput
         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"
+        className="w-full h-32 px-4 py-3 text-base border border-border rounded-lg bg-input resize-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring placeholder:text-muted-foreground transition-all duration-200"
         maxLength={100}
       />
       <div className="absolute bottom-2 right-2 text-xs text-muted-foreground">

components/figlet/TextTemplates.tsx

@@ -1,92 +0,0 @@
-'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>
-  );
-}

components/layout/AppHeader.tsx

@@ -17,7 +17,7 @@ export function AppHeader() {
   const pathSegments = pathname.split('/').filter(Boolean);
   
   return (
-    <header className="h-16 border-b border-white/5 bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-4 lg:px-8">
+    <header className="h-16 border-b border-border bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-4 lg:px-8">
       <div className="flex items-center gap-4">
         <Button 
           variant="ghost" 
@@ -69,7 +69,7 @@ function ThemeToggleComponent() {
       variant="ghost" 
       size="icon"
       onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
-      className="text-muted-foreground hover:text-foreground hover:bg-white/5"
+      className="text-muted-foreground hover:text-foreground hover:bg-accent/50"
       title={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}
     >
       {resolvedTheme === 'dark' ? (

components/layout/AppSidebar.tsx

@@ -103,12 +103,12 @@ export function AppSidebar() {
       )}
 
       <aside className={cn(
-        "fixed inset-y-0 left-0 z-50 flex flex-col border-r border-white/5 bg-background/40 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative lg:h-full",
+        "fixed inset-y-0 left-0 z-50 flex flex-col border-r border-border bg-background/40 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative lg:h-full",
         isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
         isCollapsed ? "lg:w-20" : "w-64"
       )}>
         {/* Sidebar Header */}
-        <div className="flex h-16 items-center justify-between px-6 shrink-0 border-b border-white/5">
+        <div className="flex h-16 items-center justify-between px-6 shrink-0 border-b border-border">
           <Link href="/" className="flex items-center gap-3 group overflow-hidden">
             <div className="shrink-0">
               <Logo size={isCollapsed ? 32 : 32} />
@@ -151,7 +151,7 @@ export function AppSidebar() {
                           "flex items-center px-3 py-2 rounded-xl text-sm font-medium transition-all duration-300 relative group/item",
                           isActive
                             ? "bg-primary/10 text-primary shadow-[0_0_15px_rgba(139,92,246,0.15)] ring-1 ring-primary/20" 
-                            : "text-muted-foreground hover:bg-white/5 hover:text-foreground",
+                            : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
                           isCollapsed ? "justify-center" : "justify-between"
                         )}
                         title={isCollapsed ? item.title : undefined}
@@ -180,7 +180,7 @@ export function AppSidebar() {
                       </Link>
                       
                       {item.items && pathname.startsWith(item.href) && !isCollapsed && (
-                        <div className="ml-9 space-y-1 border-l border-white/5 pl-2 mt-1">
+                        <div className="ml-9 space-y-1 border-l border-border pl-2 mt-1">
                           {item.items.map((subItem) => (
                             <Link
                               key={subItem.href}
@@ -190,7 +190,7 @@ export function AppSidebar() {
                                 "block px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200",
                                 pathname === subItem.href
                                   ? "text-primary bg-primary/5 font-semibold" 
-                                  : "text-muted-foreground hover:text-foreground hover:bg-white/5"
+                                  : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
                               )}
                             >
                               {subItem.title}
@@ -207,7 +207,7 @@ export function AppSidebar() {
         </nav>
 
         {/* Sidebar Footer / Desktop Toggle */}
-        <div className="p-4 border-t border-white/5 hidden lg:block">
+        <div className="p-4 border-t border-border hidden lg:block">
           <Button
             variant="ghost"
             size="sm"

components/providers/Providers.tsx

@@ -4,7 +4,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from 'sonner';
 import { useState } from 'react';
 import { ThemeProvider } from './ThemeProvider';
-import { ToastProvider } from '@/components/ui/Toast';
 
 export function Providers({ children }: { children: React.ReactNode }) {
   const [queryClient] = useState(
@@ -21,12 +20,10 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
   return (
     <ThemeProvider>
-      <ToastProvider>
+      <QueryClientProvider client={queryClient}>
-        <QueryClientProvider client={queryClient}>
+        {children}
-          {children}
+        <Toaster position="top-right" richColors />
-          <Toaster position="top-right" richColors />
+      </QueryClientProvider>
-        </QueryClientProvider>
-      </ToastProvider>
     </ThemeProvider>
   );
 }

components/ui/Button.tsx

@@ -19,7 +19,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           {
             'bg-primary text-primary-foreground shadow-[0_0_20px_rgba(139,92,246,0.3)] hover:bg-primary/90 hover:shadow-[0_0_25px_rgba(139,92,246,0.5)] hover:-translate-y-0.5':
               variant === 'default',
-            'glass bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 text-foreground':
+            'glass hover:bg-accent/10 hover:border-primary/20 text-foreground':
               variant === 'outline',
             'hover:bg-accent hover:text-accent-foreground': variant === 'ghost',
             'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-lg hover:shadow-destructive/20':

components/ui/Card.tsx

@@ -5,7 +5,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('glass rounded-2xl text-card-foreground shadow-xl transition-all duration-300', className)}
+      className={cn('bg-card text-card-foreground border rounded-lg transition-all duration-300', className)}
       {...props}
     />
   )

components/ui/Input.tsx

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2',
+          'flex h-10 w-full rounded-xl border border-border bg-input px-4 py-2',
           'text-sm ring-offset-background file:border-0 file:bg-transparent',
           'file:text-sm file:font-medium placeholder:text-muted-foreground',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50',

components/ui/Select.tsx

@@ -18,7 +18,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         )}
         <select
           className={cn(
-            'flex h-10 w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2',
+            'flex h-10 w-full rounded-xl border border-border bg-input px-3 py-2',
             'text-sm ring-offset-background',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50',
             'disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200',

components/ui/Toast.tsx

@@ -1,90 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { X, CheckCircle2, AlertCircle, Info } from 'lucide-react';
-import { cn } from '@/lib/utils/cn';
-
-export type ToastType = 'success' | 'error' | 'info';
-
-export interface Toast {
-  id: string;
-  message: string;
-  type: ToastType;
-}
-
-interface ToastContextType {
-  toasts: Toast[];
-  addToast: (message: string, type?: ToastType) => void;
-  removeToast: (id: string) => void;
-}
-
-const ToastContext = React.createContext<ToastContextType | undefined>(undefined);
-
-export function ToastProvider({ children }: { children: React.ReactNode }) {
-  const [toasts, setToasts] = React.useState<Toast[]>([]);
-
-  const addToast = React.useCallback((message: string, type: ToastType = 'success') => {
-    const id = Math.random().toString(36).substring(7);
-    setToasts((prev) => [...prev, { id, message, type }]);
-
-    // Auto remove after 3 seconds
-    setTimeout(() => {
-      setToasts((prev) => prev.filter((t) => t.id !== id));
-    }, 3000);
-  }, []);
-
-  const removeToast = React.useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-
-  return (
-    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
-      {children}
-      <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
-        {toasts.map((toast) => (
-          <ToastItem key={toast.id} toast={toast} onClose={() => removeToast(toast.id)} />
-        ))}
-      </div>
-    </ToastContext.Provider>
-  );
-}
-
-function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
-  const Icon = toast.type === 'success' ? CheckCircle2 : toast.type === 'error' ? AlertCircle : Info;
-
-  return (
-    <div
-      className={cn(
-        'flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg pointer-events-auto',
-        'animate-in slide-in-from-right-full duration-300',
-        'min-w-[300px] max-w-[400px]',
-        {
-          'bg-green-50 text-green-900 border border-green-200 dark:bg-green-900/20 dark:text-green-100 dark:border-green-800':
-            toast.type === 'success',
-          'bg-red-50 text-red-900 border border-red-200 dark:bg-red-900/20 dark:text-red-100 dark:border-red-800':
-            toast.type === 'error',
-          'bg-blue-50 text-blue-900 border border-blue-200 dark:bg-blue-900/20 dark:text-blue-100 dark:border-blue-800':
-            toast.type === 'info',
-        }
-      )}
-    >
-      <Icon className="h-5 w-5 flex-shrink-0" />
-      <p className="text-sm font-medium flex-1">{toast.message}</p>
-      <button
-        onClick={onClose}
-        className="flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity"
-        aria-label="Close"
-      >
-        <X className="h-4 w-4" />
-      </button>
-    </div>
-  );
-}
-
-export function useToast() {
-  const context = React.useContext(ToastContext);
-  if (!context) {
-    throw new Error('useToast must be used within ToastProvider');
-  }
-  return context;
-}

lib/figlet/constants/templates.ts

@@ -1,38 +0,0 @@
-export interface TextTemplate {
-  id: string;
-  label: string;
-  text: string;
-  category: 'greeting' | 'tech' | 'fun' | 'seasonal';
-}
-
-export const TEXT_TEMPLATES: TextTemplate[] = [
-  // Greetings
-  { id: 'hello', label: 'Hello', text: 'Hello!', category: 'greeting' },
-  { id: 'welcome', label: 'Welcome', text: 'Welcome', category: 'greeting' },
-  { id: 'hello-world', label: 'Hello World', text: 'Hello World', category: 'greeting' },
-
-  // Tech
-  { id: 'code', label: 'Code', text: 'CODE', category: 'tech' },
-  { id: 'dev', label: 'Developer', text: 'DEV', category: 'tech' },
-  { id: 'hack', label: 'Hack', text: 'HACK', category: 'tech' },
-  { id: 'terminal', label: 'Terminal', text: 'Terminal', category: 'tech' },
-  { id: 'git', label: 'Git', text: 'Git', category: 'tech' },
-
-  // Fun
-  { id: 'awesome', label: 'Awesome', text: 'AWESOME', category: 'fun' },
-  { id: 'cool', label: 'Cool', text: 'COOL', category: 'fun' },
-  { id: 'epic', label: 'Epic', text: 'EPIC', category: 'fun' },
-  { id: 'wow', label: 'Wow', text: 'WOW!', category: 'fun' },
-
-  // Seasonal
-  { id: 'happy-birthday', label: 'Happy Birthday', text: 'Happy Birthday!', category: 'seasonal' },
-  { id: 'congrats', label: 'Congrats', text: 'Congrats!', category: 'seasonal' },
-  { id: 'thanks', label: 'Thanks', text: 'Thanks!', category: 'seasonal' },
-];
-
-export const TEMPLATE_CATEGORIES = [
-  { id: 'greeting', label: 'Greetings', icon: '👋' },
-  { id: 'tech', label: 'Tech', icon: '💻' },
-  { id: 'fun', label: 'Fun', icon: '🎉' },
-  { id: 'seasonal', label: 'Seasonal', icon: '🎊' },
-] as const;

lib/storage/history.ts

@@ -1,53 +0,0 @@
-'use client';
-
-export interface HistoryItem {
-  id: string;
-  text: string;
-  font: string;
-  result: string;
-  timestamp: number;
-}
-
-const HISTORY_KEY = 'figlet-ui-history';
-const MAX_HISTORY = 10;
-
-export function getHistory(): HistoryItem[] {
-  if (typeof window === 'undefined') return [];
-
-  try {
-    const stored = localStorage.getItem(HISTORY_KEY);
-    return stored ? JSON.parse(stored) : [];
-  } catch {
-    return [];
-  }
-}
-
-export function addToHistory(text: string, font: string, result: string): void {
-  let history = getHistory();
-
-  const newItem: HistoryItem = {
-    id: `${Date.now()}-${Math.random()}`,
-    text,
-    font,
-    result,
-    timestamp: Date.now(),
-  };
-
-  // Add to beginning
-  history.unshift(newItem);
-
-  // Keep only MAX_HISTORY items
-  history = history.slice(0, MAX_HISTORY);
-
-  localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
-}
-
-export function clearHistory(): void {
-  localStorage.removeItem(HISTORY_KEY);
-}
-
-export function removeHistoryItem(id: string): void {
-  const history = getHistory();
-  const filtered = history.filter(item => item.id !== id);
-  localStorage.setItem(HISTORY_KEY, JSON.stringify(filtered));
-}

lib/units/index.ts

@@ -1,4 +1,3 @@
 export * from './units';
 export * from './storage';
-export * from './utils';
 export * from './tempo';

tailwind.config.ts

@@ -1,9 +0,0 @@
-// Tailwind CSS 4 configuration
-// Most configuration is now done in CSS using @theme
-export default {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-};