15776d7148
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 >
2025-11-09 13:31:08 +01:00
f120a8b3d0
feat: initial project setup with Next.js 16 and Tailwind CSS 4
...
- Initialize Next.js 16 with React 19 and TypeScript 5
- Configure Tailwind CSS 4 with PostCSS
- Set up static export for Docker deployment
- Install figlet.js for ASCII art rendering
- Add fuse.js for fuzzy search functionality
- Create project structure (app/, components/, lib/, types/)
- Add comprehensive README and IMPLEMENTATION_PLAN
- Configure ESLint and TypeScript
- Set up pnpm package management
Tech stack matches units-ui project for consistency.
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com >
2025-11-09 12:07:23 +01:00
