Sebastian Krüger
15776d7148
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>
34 lines
758 B
JSON
34 lines
758 B
JSON
{
|
|
"name": "figlet-ui",
|
|
"version": "1.0.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next dev --turbopack",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "next lint"
|
|
},
|
|
"dependencies": {
|
|
"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",
|
|
"react-dom": "^19.0.0",
|
|
"tailwind-merge": "^3.3.1"
|
|
},
|
|
"devDependencies": {
|
|
"@tailwindcss/postcss": "^4.1.17",
|
|
"@types/figlet": "^1.7.0",
|
|
"@types/node": "^22",
|
|
"@types/react": "^19",
|
|
"@types/react-dom": "^19",
|
|
"eslint": "^9",
|
|
"eslint-config-next": "^16.0.0",
|
|
"tailwindcss": "^4.0.0",
|
|
"typescript": "^5"
|
|
}
|
|
}
|