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>
This commit is contained in:
2025-11-09 13:31:08 +01:00
parent 704695f14f
commit 15776d7148
4 changed files with 181 additions and 46 deletions

8
pnpm-lock.yaml generated
View File

@@ -17,6 +17,9 @@ importers:
fuse.js:
specifier: ^7.1.0
version: 7.1.0
html-to-image:
specifier: ^1.11.13
version: 1.11.13
lucide-react:
specifier: ^0.553.0
version: 0.553.0(react@19.2.0)
@@ -1226,6 +1229,9 @@ packages:
hermes-parser@0.25.1:
resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
html-to-image@1.11.13:
resolution: {integrity: sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==}
ignore@5.3.2:
resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
engines: {node: '>= 4'}
@@ -3255,6 +3261,8 @@ snapshots:
dependencies:
hermes-estree: 0.25.1
html-to-image@1.11.13: {}
ignore@5.3.2: {}
ignore@7.0.5: {}