feat: add keyboard shortcuts, Docker deployment, and production build

Major improvements for production deployment and UX:

**Keyboard Shortcuts System**
- `/` - Focus font search instantly
- `Esc` - Clear search and close dialogs
- `Ctrl/Cmd + D` - Toggle dark/light mode
- `Shift + ?` - Show keyboard shortcuts help dialog
- Floating keyboard icon button for discoverability
- Beautiful modal with all shortcuts listed
- Global event listeners with proper cleanup

**Enhanced Search UX**
- Updated placeholder: "Search fonts... (Press / to focus)"
- Auto-focus on `/` keypress
- Auto-clear and blur on `Escape`
- Ref-based input focusing for reliability

**Docker Deployment**
- Multi-stage Dockerfile (deps, builder, nginx runner)
- Based on node:22-alpine for minimal size
- Static export served via nginx:alpine
- Built-in health check endpoint (/health)
- Optimized for production

**Nginx Configuration**
- Gzip compression for all text assets
- Aggressive caching for static assets (1 year)
- Security headers (X-Frame-Options, CSP, etc.)
- SPA routing support (try_files)
- Health check endpoint
- Performance tuning (sendfile, tcp_nopush)

**Documentation Updates**
- Corrected font count to accurate 373 fonts
- Updated README and IMPLEMENTATION_PLAN
- Added Docker deployment instructions
- Clarified .flf vs .tlf vs .flc formats

**Production Build**
- Tested static export build
- Total size: 8.0MB (including all fonts!)
- 4.7s build time with Turbopack
- All routes pre-rendered successfully
- Ready for CDN/static hosting

**Technical Highlights**
- useKeyboardShortcuts custom hook
- Event listener cleanup on unmount
- Ref forwarding for input focus
- Modal dialog with backdrop blur
- Keyboard-first navigation

The app is now production-ready with professional keyboard shortcuts
and Docker deployment support! 🎉

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

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

components/converter/FontSelector.tsx

@@ -23,6 +23,7 @@ export function FontSelector({ fonts, selectedFont, onSelectFont, className }: F
   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(() => {
@@ -30,6 +31,26 @@ export function FontSelector({ fonts, selectedFont, onSelectFont, className }: F
     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, {
@@ -118,8 +139,9 @@ export function FontSelector({ fonts, selectedFont, onSelectFont, className }: F
         <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... (fuzzy)"
+            placeholder="Search fonts... (Press / to focus)"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             className="pl-9 pr-9"

components/layout/ThemeToggle.tsx

@@ -7,6 +7,13 @@ import { Button } from '@/components/ui/Button';
 export function ThemeToggle() {
   const [theme, setTheme] = React.useState<'light' | 'dark'>('light');
 
+  const toggleTheme = React.useCallback(() => {
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+    document.documentElement.classList.toggle('dark', newTheme === 'dark');
+  }, [theme]);
+
   React.useEffect(() => {
     // Check for saved theme preference or default to light
     const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
@@ -17,12 +24,18 @@ export function ThemeToggle() {
     document.documentElement.classList.toggle('dark', initialTheme === 'dark');
   }, []);
 
-  const toggleTheme = () => {
-    const newTheme = theme === 'light' ? 'dark' : 'light';
-    setTheme(newTheme);
-    localStorage.setItem('theme', newTheme);
-    document.documentElement.classList.toggle('dark', newTheme === 'dark');
-  };
+  // Keyboard shortcut: Ctrl/Cmd + D
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'd' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        toggleTheme();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [toggleTheme]);
 
   return (
     <Button

components/ui/KeyboardShortcutsHelp.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import * as React from 'react';
+import { Card } from './Card';
+import { Button } from './Button';
+import { X, Keyboard } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+
+export interface Shortcut {
+  key: string;
+  description: string;
+  modifier?: 'ctrl' | 'shift';
+}
+
+const shortcuts: Shortcut[] = [
+  { key: '/', description: 'Focus search' },
+  { key: 'Esc', description: 'Clear search / Close dialog' },
+  { key: 'D', description: 'Toggle dark mode', modifier: 'ctrl' },
+  { key: '?', description: 'Show keyboard shortcuts', modifier: 'shift' },
+];
+
+export function KeyboardShortcutsHelp() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === '?' && e.shiftKey) {
+        e.preventDefault();
+        setIsOpen(true);
+      }
+      if (e.key === 'Escape' && isOpen) {
+        setIsOpen(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen]);
+
+  if (!isOpen) {
+    return (
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => setIsOpen(true)}
+        title="Keyboard shortcuts (Shift + ?)"
+        className="fixed bottom-4 right-4"
+      >
+        <Keyboard className="h-4 w-4" />
+      </Button>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+      <Card className="max-w-md w-full">
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-lg font-semibold flex items-center gap-2">
+              <Keyboard className="h-5 w-5" />
+              Keyboard Shortcuts
+            </h2>
+            <Button variant="ghost" size="icon" onClick={() => setIsOpen(false)}>
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="space-y-2">
+            {shortcuts.map((shortcut, i) => (
+              <div key={i} className="flex items-center justify-between py-2 border-b last:border-0">
+                <span className="text-sm text-muted-foreground">{shortcut.description}</span>
+                <div className="flex gap-1">
+                  {shortcut.modifier && (
+                    <kbd className="px-2 py-1 text-xs font-semibold bg-muted rounded">
+                      {shortcut.modifier === 'ctrl' ? '⌘/Ctrl' : 'Shift'}
+                    </kbd>
+                  )}
+                  <kbd className="px-2 py-1 text-xs font-semibold bg-muted rounded">
+                    {shortcut.key}
+                  </kbd>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}