feat: add PNG export, text alignment, and font size controls

Massive UX improvements for preview customization and export:

**PNG Export**
- Export ASCII art as high-quality PNG images
- Uses html-to-image library (2x pixel ratio)
- Preserves background color and styling
- Auto-download with font name in filename
- Toast notification on success/error
- PNG button in preview toolbar

**Text Alignment Controls**
- Left / Center / Right alignment buttons
- Visual toggle buttons with icons
- Live preview updates
- Persists during font/text changes
- Smooth transitions

**Font Size Controls**
- XS (10px) / SM (12-14px) / MD (14-16px)
- Toggle buttons for quick switching
- Responsive font sizes
- Better readability options
- Great for different screen sizes

**Enhanced Preview Toolbar**
- Reorganized button layout
- Better button labels (Copy, Share, PNG, TXT)
- Tooltips on all buttons
- Icon + text labels
- Wrapped flex layout for mobile

**Preview Controls UI**
- Two control groups (align + size)
- Bordered button groups
- Active state highlighting
- Hover states
- Clean, compact design

**Updated Keyboard Shortcuts Help**
- Better descriptions
- Added "Tips" section
- Feature discovery hints
- Grouped by category
- More helpful content

**Technical Improvements**
- Added html-to-image dependency
- Ref-based element capture
- Dynamic className composition
- State management for controls
- Proper TypeScript types

**Button Improvements**
- "Download" → "TXT" (more specific)
- Added "PNG" button
- Better icon usage
- Consistent sizing
- Mobile-friendly layout

The preview is now fully customizable with professional export options!

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

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

components/ui/KeyboardShortcutsHelp.tsx

@@ -13,10 +13,10 @@ export interface Shortcut {
 }
 
 const shortcuts: Shortcut[] = [
-  { key: '/', description: 'Focus search' },
+  { key: '/', description: 'Focus font search' },
   { key: 'Esc', description: 'Clear search / Close dialog' },
-  { key: 'D', description: 'Toggle dark mode', modifier: 'ctrl' },
-  { key: '?', description: 'Show keyboard shortcuts', modifier: 'shift' },
+  { key: 'D', description: 'Toggle dark/light mode', modifier: 'ctrl' },
+  { key: '?', description: 'Show this help dialog', modifier: 'shift' },
 ];
 
 export function KeyboardShortcutsHelp() {
@@ -65,22 +65,35 @@ export function KeyboardShortcutsHelp() {
             </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 && (
+          <div className="space-y-3">
+            <div>
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase mb-2">Navigation</h3>
+              {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.modifier === 'ctrl' ? '⌘/Ctrl' : 'Shift'}
+                      {shortcut.key}
                     </kbd>
-                  )}
-                  <kbd className="px-2 py-1 text-xs font-semibold bg-muted rounded">
-                    {shortcut.key}
-                  </kbd>
+                  </div>
                 </div>
-              </div>
-            ))}
+              ))}
+            </div>
+
+            <div>
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase mb-2">Tips</h3>
+              <ul className="text-xs text-muted-foreground space-y-1">
+                <li>• Click the Shuffle button for random fonts</li>
+                <li>• Use the heart icon to favorite fonts</li>
+                <li>• Filter by All, Favorites, or Recent</li>
+                <li>• Text alignment and size controls in Preview</li>
+              </ul>
+            </div>
           </div>
         </div>
       </Card>