pnger/ROADMAP.md

# PNGer Feature Roadmap

## Completed Features ✅

### Core Foundation
- ✅ Basic image upload (file picker, drag & drop, clipboard paste)
- ✅ Width/height resizing
- ✅ Aspect ratio control (inside/cover)
- ✅ Crop positioning (9 positions)
- ✅ Format conversion (PNG, WebP, JPEG)
- ✅ Quality adjustment (10-100%)
- ✅ Direct download (no server storage)
- ✅ Docker deployment
- ✅ **Live Preview** - Real-time side-by-side comparison with file size analysis
- ✅ **Dark/Light Mode** - Theme toggle for better PNG transparency inspection
- ✅ **Modern UI** - Sleek design with smooth transitions and visual feedback

### Sprint 1: Enhanced UX (Completed March 2026)
- ✅ **Drag & Drop Upload** - Drag images directly into the app
- ✅ **Clipboard Paste** - Paste with Ctrl+V (Cmd+V on Mac)
- ✅ **Smart Presets** - 8 quick-access presets:
  - Web Optimized (1920x1080, 80%, WebP)
  - Social Media (1080x1080, 85%, JPEG)
  - Profile Picture (400x400, 90%, PNG)
  - Email Friendly (800x600, 75%, JPEG)
  - Tiny Icon (64x64, 100%, PNG)
  - Retina 2x (2x dimensions, 90%)
  - Icon Small (256x256, 95%, PNG)
  - Icon Large (512x512, 95%, PNG)
- ✅ **Keyboard Shortcuts** - Fast workflow:
  - Ctrl+V / Cmd+V: Paste image
  - Enter: Transform & Download
  - Ctrl+Enter / Cmd+Enter: Transform & Download (anywhere)
  - ?: Show shortcuts help
  - Esc: Close dialogs
- ✅ **Enhanced Visual Feedback** - Better loading states and error messages
- ✅ **Theme Contrast Fixes** - Improved text visibility in both themes

---

## Sprint 2: Batch Processing & Advanced Operations (Next Priority)
**Focus**: Handle multiple files and add essential image operations  
**Effort**: ~12-15 hours | **Impact**: Very High | **Timeline**: Week 1-2

### 2.1 Batch Processing 🚀 **HIGH VALUE**
**Why**: Process multiple images at once - massive time saver for bulk operations  
**Effort**: Medium (6-8 hours) | **Impact**: Very High

- [ ] Upload multiple images (10+ files)
- [ ] Apply same transformations to all
- [ ] Individual preview for each image
- [ ] Download as ZIP file
- [ ] Progress indicator for batch operations
- [ ] Cancel/remove individual files from queue
- [ ] Batch rename with pattern (e.g., `image-{index}.png`)
- [ ] Memory optimization for large batches

**Implementation Notes**:
- Use JSZip library for ZIP creation
- Process images in parallel (4-6 concurrent)
- Track individual file progress
- Client-side queue management

### 2.2 Essential Image Operations 🎨
**Why**: Basic operations users expect  
**Effort**: Low-Medium (4-6 hours) | **Impact**: High

- [ ] **Rotation**: 90°, 180°, 270°, custom angle
- [ ] **Flip**: Horizontal / Vertical
- [ ] **Grayscale**: Quick B&W conversion
- [ ] **Auto-rotate**: Based on EXIF orientation
- [ ] **Trim**: Remove transparent/white borders automatically

**Technical**: All supported natively by Sharp library

### 2.3 Image Optimization ⚡ **HIGH VALUE**
**Why**: One-click file size reduction without quality loss  
**Effort**: Low (2-3 hours) | **Impact**: Very High

- [ ] **Auto-Optimize** button - Smart quality/compression
- [ ] **Lossless PNG** optimization (pngquant-style)
- [ ] **Strip EXIF** metadata (privacy + file size)
- [ ] **Progressive JPEG** encoding
- [ ] **Compression comparison** - Show savings for each format
- [ ] **Target file size** - Optimize to hit specific size (e.g., "under 1MB")

**Implementation**: Use Sharp's built-in optimization + custom quality detection

---

## Sprint 3: User Experience Polish (High Utility)
**Focus**: Make the app faster and more intuitive  
**Effort**: ~10-12 hours | **Impact**: High | **Timeline**: Week 3-4

### 3.1 Quick Access Features ⏱️
**Why**: Speed up repetitive tasks  
**Effort**: Low (2-3 hours) | **Impact**: Medium-High

- [ ] **Copy to Clipboard** - Copy processed image directly
- [ ] **Recent Files** - Quick access to last 10 processed images (localStorage)
- [ ] **Undo/Redo** - Revert parameter changes
- [ ] **Favorites** - Star frequently used presets
- [ ] **Quick Settings** - Toggle common options in header

### 3.2 Image Analysis & Info 🔍 **HIGH VALUE**
**Why**: Understand your images better  
**Effort**: Low (2-3 hours) | **Impact**: Medium-High

- [ ] **Metadata Display**: Dimensions, format, color space, DPI
- [ ] **Color Palette Extraction**: Show dominant colors (5-8)
- [ ] **Transparency Detection**: Warn if converting transparent to JPEG
- [ ] **File Size Projection**: Estimate final size before download
- [ ] **Aspect Ratio Calculator**: Calculate dimensions maintaining ratio
- [ ] **Memory Usage**: Show current memory consumption

### 3.3 Format Intelligence 🧠
**Why**: Help users choose the right format  
**Effort**: Low (2-3 hours) | **Impact**: Medium

- [ ] **Format Recommendations**: Suggest best format based on image
- [ ] **Browser Support Detection**: Show WebP/AVIF compatibility
- [ ] **Multi-Format Export**: Generate PNG + WebP + JPEG at once
- [ ] **Responsive Image Sets**: Export multiple sizes for responsive design

### 3.4 UI/UX Improvements
**Effort**: Low-Medium (3-4 hours) | **Impact**: Medium

- [ ] **Mobile Responsive Design**: Better mobile/tablet experience
- [ ] **Toast Notifications**: Non-blocking feedback messages
- [ ] **Drag to Reorder**: Reorder batch queue
- [ ] **Compare Mode**: Slider to compare before/after
- [ ] **Zoom Controls**: Zoom in on preview images
- [ ] **Grid/List Toggle**: Switch preview layout

---

## Sprint 4: Advanced Features (Power Users)
**Focus**: Professional-grade tools  
**Effort**: ~15-20 hours | **Impact**: Medium-High | **Timeline**: Week 5-6

### 4.1 Custom Crop Tool ✂️
**Why**: Precise control over cropping  
**Effort**: High (8-10 hours) | **Impact**: Medium-High

- [ ] **Visual Crop Selector**: Interactive drag handles
- [ ] **Aspect Ratio Lock**: 16:9, 4:3, 1:1, custom
- [ ] **Freeform Cropping**: No ratio constraints
- [ ] **Rule of Thirds Grid**: Photography composition guide
- [ ] **Golden Ratio Grid**: Advanced composition
- [ ] **Zoom for Precision**: Zoom in for pixel-perfect crops
- [ ] **Crop Presets**: Social media sizes (Instagram, Facebook, etc.)

### 4.2 Filters & Effects 🌈
**Why**: Quick image enhancements  
**Effort**: Medium (5-6 hours) | **Impact**: Medium

- [ ] **Brightness/Contrast**: Adjust exposure
- [ ] **Saturation**: Boost or reduce colors
- [ ] **Sharpness**: Enhance edges
- [ ] **Blur**: Gaussian blur with radius control
- [ ] **Tint**: Apply color overlay
- [ ] **Vintage Filter**: Sepia tone
- [ ] **Invert Colors**: Negative effect
- [ ] **Filter Presets**: Quick apply common filters

### 4.3 Watermarking 📝
**Why**: Protect and brand images  
**Effort**: Medium (4-5 hours) | **Impact**: Medium

- [ ] **Text Watermark**: Custom text with font selection
- [ ] **Image Watermark**: Upload logo overlay
- [ ] **Position Control**: 9 positions + custom X/Y
- [ ] **Opacity**: Adjust transparency (0-100%)
- [ ] **Repeat Pattern**: Tile watermark across image
- [ ] **Batch Watermark**: Apply to all images in batch

---

## Sprint 5: Workflow & Automation (Productivity)
**Focus**: Save time with reusable workflows  
**Effort**: ~8-10 hours | **Impact**: Medium | **Timeline**: Week 7+

### 5.1 Custom Presets & Templates
**Why**: Reusable transformation pipelines  
**Effort**: Low-Medium (3-4 hours) | **Impact**: Medium

- [ ] **Save Custom Presets**: Create your own quick-access presets
- [ ] **Preset Categories**: Organize by use case
- [ ] **Import/Export Presets**: Share as JSON files
- [ ] **Transformation Chains**: Combine multiple operations
- [ ] **Preset Shortcuts**: Assign keyboard shortcuts (1-9 keys)
- [ ] **Community Presets**: Gallery of user-submitted presets

### 5.2 History & Session Management
**Why**: Track and repeat common tasks  
**Effort**: Low (2-3 hours) | **Impact**: Low-Medium

- [ ] **Processing History**: Last 50 transformations
- [ ] **Quick Re-apply**: Reload previous settings
- [ ] **Export History**: Save session as JSON
- [ ] **Clear History**: Privacy button
- [ ] **Session Restore**: Resume after browser close

---

## Future: Extended Format Support (Lower Priority)
**Focus**: Support more file types  
**Effort**: Variable | **Impact**: Situational

### Additional Formats
- [ ] **AVIF Support**: Next-gen image format
- [ ] **TIFF Support**: Professional photography
- [ ] **SVG to Raster**: Convert vector to bitmap
- [ ] **ICO Generation**: Create favicons (16, 32, 48, 64, 128, 256px)
- [ ] **PDF to Image**: Extract first page as image
- [ ] **GIF Frame Extraction**: Convert animated GIF to frames
- [ ] **HEIC/HEIF Support**: Apple photo format

---

## Enterprise & API (Optional)
**Focus**: For hosted/managed deployments  
**Effort**: High | **Impact**: Situational

### API Access
- [ ] Generate API keys in UI
- [ ] Rate limiting per key
- [ ] Usage statistics dashboard
- [ ] Webhook support for async processing
- [ ] OpenAPI/Swagger documentation
- [ ] SDK libraries (Python, Node.js, PHP)

### User Accounts (Optional)
- [ ] User authentication
- [ ] Per-user quotas
- [ ] Cloud storage integration (S3, MinIO)
- [ ] Saved presets sync
- [ ] Usage analytics
- [ ] Team collaboration features

---

## New High-Value Ideas 💡

### Image Comparison Tool 🔍
**Why**: A/B test different settings  
**Effort**: Low-Medium (3-4 hours) | **Impact**: Medium

- [ ] Side-by-side comparison of 2-4 versions
- [ ] Slider reveal to show differences
- [ ] Quality vs file size comparison matrix
- [ ] Export comparison settings for sharing

### Background Removal ✨ **HIGH VALUE**
**Why**: Remove backgrounds automatically  
**Effort**: Medium-High (6-8 hours) | **Impact**: Very High

- [ ] AI-powered background removal (using @imgly/background-removal or similar)
- [ ] Replace with solid color
- [ ] Replace with gradient
- [ ] Replace with uploaded image
- [ ] Transparency preservation
- [ ] Edge refinement controls

### Smart Resize 🦾 **HIGH VALUE**
**Why**: Content-aware resizing  
**Effort**: Medium (4-5 hours) | **Impact**: High

- [ ] **Content-aware scaling**: Preserve important areas
- [ ] **Face detection**: Protect faces during crop
- [ ] **Center of interest**: Auto-detect focal point
- [ ] **Smart crop suggestions**: AI-suggested crop areas

### Color Adjustments 🎨
**Why**: Fine-tune image colors  
**Effort**: Medium (4-5 hours) | **Impact**: Medium

- [ ] **Hue/Saturation/Lightness** sliders
- [ ] **Color temperature** (warm/cool)
- [ ] **Vibrance** (selective saturation)
- [ ] **Color balance** (shadows, midtones, highlights)
- [ ] **White balance correction**
- [ ] **Color grading presets**

### Border & Frame Effects 🖼️
**Why**: Add decorative elements  
**Effort**: Low-Medium (3-4 hours) | **Impact**: Low-Medium

- [ ] **Solid borders**: Color and thickness
- [ ] **Padding**: Add transparent/colored space
- [ ] **Rounded corners**: Border radius control
- [ ] **Shadow effects**: Drop shadow with blur
- [ ] **Frame templates**: Decorative frames
- [ ] **Polaroid effect**: Instant camera style

### Image Merge & Collage 🖼️
**Why**: Combine multiple images  
**Effort**: High (8-10 hours) | **Impact**: Medium

- [ ] **Side-by-side merge**: Horizontal/vertical
- [ ] **Grid layout**: 2x2, 3x3, custom
- [ ] **Collage templates**: Pre-designed layouts
- [ ] **Spacing control**: Gap between images
- [ ] **Background color**: For gaps

### Conditional Processing 🤖
**Why**: Smart automation based on image properties  
**Effort**: Medium (4-5 hours) | **Impact**: Medium

- [ ] **Size-based rules**: Different settings for large vs small images
- [ ] **Format detection**: Auto-convert based on transparency
- [ ] **Quality ranges**: Set min/max quality constraints
- [ ] **Dimension limits**: Enforce max width/height

---

## Technical Debt & Infrastructure

### Code Quality
- [ ] Unit tests (backend) - Vitest/Jest
- [ ] E2E tests (frontend) - Playwright
- [ ] TypeScript strict mode
- [ ] ESLint + Prettier configuration
- [ ] CI/CD pipeline (GitHub Actions or Gitea Actions)
- [ ] Code coverage reporting (>80%)
- [ ] Automated dependency updates (Renovate)

### Performance
- [ ] Image processing queue (for heavy operations)
- [ ] Web Workers for client-side processing
- [ ] Service Worker for offline support
- [ ] Lazy loading for UI components
- [ ] Memory leak detection and fixes
- [ ] Performance monitoring (Lighthouse CI)

### Security
- [ ] Rate limiting (prevent abuse)
- [ ] File type validation (magic bytes check)
- [ ] Max file size enforcement (configurable)
- [ ] CORS configuration hardening
- [ ] CSP headers
- [ ] Input sanitization audit
- [ ] Security headers (HSTS, X-Frame-Options)
- [ ] Dependency vulnerability scanning

### Monitoring & Analytics
- [ ] Prometheus metrics endpoint
- [ ] Error tracking (Sentry integration)
- [ ] Performance monitoring (Real User Monitoring)
- [ ] Usage analytics (privacy-focused, self-hosted)
- [ ] Health check dashboard

---

## Priority Matrix (Updated)

### Immediate Next Steps (Sprint 2)
1. 🚀 **Batch Processing** - Highest utility, medium effort
2. ⚡ **Auto-Optimize** - Quick win, very high value
3. 🎨 **Basic Operations** - Essential features (rotate, flip, grayscale)

### High Value, Medium Effort (Sprint 3-4)
4. 🔍 **Image Analysis** - Understand images better
5. ✨ **Background Removal** - AI-powered, huge demand
6. 🦾 **Smart Resize** - Content-aware scaling
7. ✂️ **Custom Crop Tool** - Professional precision

### Polish & Productivity (Sprint 5+)
8. ⏱️ **Quick Access Features** - Speed up workflow
9. 📝 **Custom Presets** - Reusable workflows
10. 🎨 **Filters & Effects** - Creative options

---

## Community Ideas

Have suggestions? Open an issue on the repository:
- Feature requests
- Bug reports
- Use case discussions
- Performance improvements

**Maintainer**: jason  
**Repository**: https://git.alwisp.com/jason/pnger  
**Last Updated**: March 8, 2026 (Sprint 1 Complete)