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:
@@ -12,6 +12,7 @@
|
||||
"clsx": "^2.1.1",
|
||||
"figlet": "^1.8.0",
|
||||
"fuse.js": "^7.1.0",
|
||||
"html-to-image": "^1.11.13",
|
||||
"lucide-react": "^0.553.0",
|
||||
"next": "^16.0.0",
|
||||
"react": "^19.0.0",
|
||||
|
||||
Reference in New Issue
Block a user