feat: implement core figlet converter with live preview

Implemented Phases 2-4 of the implementation plan:

**Phase 2: Font Management System**
- Created font loading service with caching
- Added API route to list all 373 figlet fonts
- Implemented font metadata types

**Phase 3: Core Figlet Engine**
- Built figlet.js wrapper service for ASCII art generation
- Added async/sync rendering methods
- Implemented debounced text updates (300ms)
- Created utility functions (cn, debounce)

**Phase 4: Main UI Components**
- Built reusable UI primitives (Button, Input, Card)
- Created TextInput component with character counter (100 char limit)
- Implemented FontPreview with loading states
- Added FontSelector with real-time search
- Built main FigletConverter orchestrating all components

**Features Implemented:**
- Live preview with 300ms debounce
- 373 fonts from xero/figlet-fonts collection
- Fuzzy font search
- Copy to clipboard
- Download as .txt file
- Responsive 3-column layout (mobile-friendly)
- Character counter
- Loading states
- Empty states

**Tech Stack:**
- Next.js 16 App Router with Turbopack
- React 19 with client components
- TypeScript with strict types
- Tailwind CSS 4 for styling
- figlet.js for rendering
- Font caching for performance

The application is fully functional and ready for testing!

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

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

lib/figlet/figletService.ts

@@ -0,0 +1,80 @@
+'use client';
+
+import figlet from 'figlet';
+import type { FigletOptions } from '@/types/figlet';
+import { loadFont } from './fontLoader';
+
+/**
+ * Convert text to ASCII art using figlet
+ */
+export async function textToAscii(
+  text: string,
+  fontName: string = 'Standard',
+  options: FigletOptions = {}
+): Promise<string> {
+  if (!text) {
+    return '';
+  }
+
+  try {
+    // Load the font
+    const fontData = await loadFont(fontName);
+
+    if (!fontData) {
+      throw new Error(`Font ${fontName} could not be loaded`);
+    }
+
+    // Parse and load the font into figlet
+    figlet.parseFont(fontName, fontData);
+
+    // Generate ASCII art
+    return new Promise((resolve, reject) => {
+      figlet.text(
+        text,
+        {
+          font: fontName,
+          horizontalLayout: options.horizontalLayout || 'default',
+          verticalLayout: options.verticalLayout || 'default',
+          width: options.width,
+          whitespaceBreak: options.whitespaceBreak ?? true,
+        },
+        (err, result) => {
+          if (err) {
+            reject(err);
+          } else {
+            resolve(result || '');
+          }
+        }
+      );
+    });
+  } catch (error) {
+    console.error('Error generating ASCII art:', error);
+    throw error;
+  }
+}
+
+/**
+ * Generate ASCII art synchronously (requires font to be pre-loaded)
+ */
+export function textToAsciiSync(
+  text: string,
+  fontName: string = 'Standard',
+  options: FigletOptions = {}
+): string {
+  if (!text) {
+    return '';
+  }
+
+  try {
+    return figlet.textSync(text, {
+      font: fontName as any,
+      horizontalLayout: options.horizontalLayout || 'default',
+      verticalLayout: options.verticalLayout || 'default',
+      width: options.width,
+      whitespaceBreak: options.whitespaceBreak ?? true,
+    });
+  } catch (error) {
+    console.error('Error generating ASCII art (sync):', error);
+    return '';
+  }
+}

lib/figlet/fontLoader.ts

@@ -0,0 +1,61 @@
+import type { FigletFont } from '@/types/figlet';
+
+// Cache for loaded fonts
+const fontCache = new Map<string, string>();
+
+/**
+ * Get list of all available figlet fonts
+ */
+export async function getFontList(): Promise<FigletFont[]> {
+  try {
+    const response = await fetch('/api/fonts');
+    if (!response.ok) {
+      throw new Error('Failed to fetch font list');
+    }
+    const fonts: FigletFont[] = await response.json();
+    return fonts;
+  } catch (error) {
+    console.error('Error fetching font list:', error);
+    return [];
+  }
+}
+
+/**
+ * Load a specific font file content
+ */
+export async function loadFont(fontName: string): Promise<string | null> {
+  // Check cache first
+  if (fontCache.has(fontName)) {
+    return fontCache.get(fontName)!;
+  }
+
+  try {
+    const response = await fetch(`/fonts/figlet-fonts/${fontName}.flf`);
+    if (!response.ok) {
+      throw new Error(`Failed to load font: ${fontName}`);
+    }
+    const fontData = await response.text();
+
+    // Cache the font
+    fontCache.set(fontName, fontData);
+
+    return fontData;
+  } catch (error) {
+    console.error(`Error loading font ${fontName}:`, error);
+    return null;
+  }
+}
+
+/**
+ * Preload a font into cache
+ */
+export async function preloadFont(fontName: string): Promise<void> {
+  await loadFont(fontName);
+}
+
+/**
+ * Clear font cache
+ */
+export function clearFontCache(): void {
+  fontCache.clear();
+}

lib/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

lib/utils/debounce.ts

@@ -0,0 +1,18 @@
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout | null = null;
+
+  return function executedFunction(...args: Parameters<T>) {
+    const later = () => {
+      timeout = null;
+      func(...args);
+    };
+
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(later, wait);
+  };
+}