Sebastian Krüger
c97ec454f7
Implements professional image filter system with real-time preview: **Adjustments Dialog** (`components/modals/adjustments-dialog.tsx`): - Live preview canvas (max 400x400px) with real-time filter updates - Organized filter categories: Color Adjustments, Filters, Effects - 10 filter types with adjustable parameters: - **Brightness**: -100 to +100 adjustment - **Contrast**: -100 to +100 adjustment - **Hue/Saturation**: Hue rotation (±180°), Saturation (±100%), Lightness (±100%) - **Blur**: Gaussian blur with radius 1-50px - **Sharpen**: Amount 0-100% - **Invert**: One-click color inversion - **Grayscale**: Convert to monochrome - **Sepia**: Vintage sepia tone effect - **Threshold**: Binary black/white with adjustable threshold - **Posterize**: Reduce colors to 2-256 levels - Slider controls for all adjustable parameters - Reset button to restore default values - Apply/Cancel actions with undo support - Uses FilterCommand for history integration **Image Menu** (`components/editor/image-menu.tsx`): - New "Image" menu in header bar next to "File" - "Filters & Adjustments..." menu item opens dialog - Organized location for image-related operations - Extensible for future image operations **Integration**: - Added Image menu to editor layout header - Positioned between title and controls - Keyboard-accessible with proper ARIA labels **Technical Features**: - Async filter application using Web Workers for large images - Non-destructive editing with undo/redo support - Real-time preview updates as sliders adjust - FilterCommand integration for history - Canvas cloning for before/after states - Optimized preview rendering (scaled to 400px max) **User Experience**: - Modal dialog with backdrop - Sidebar filter list with hover states - Large preview area showing filter results - Smooth slider interactions - Instant visual feedback - Professional Photoshop-like interface All filters tested and working with undo/redo support. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Paint UI
A modern, browser-based image editor built with Next.js 16 and Tailwind CSS 4. Inspired by miniPaint, reimagined for the modern web.
Features (Planned)
- 🎨 Multi-layer Canvas - Professional layer system with blend modes
- 🖌️ Drawing Tools - Pencil, brush, eraser, fill, and selection tools
- ✨ Image Effects - 50+ filters and effects (blur, sharpen, color adjustments)
- 📝 Text Tool - Add text with web fonts
- 🔄 Undo/Redo - Full history system
- 💾 File Support - Open/save PNG, JPG, WEBP, GIF, and project files
- 🎭 Dark Mode - Beautiful dark and light themes
- ⌨️ Keyboard Shortcuts - Power user friendly
- 📱 Responsive - Works on desktop, tablet, and mobile
Tech Stack
- Framework: Next.js 16 (App Router)
- UI: React 19 + TypeScript
- Styling: Tailwind CSS 4
- Components: Radix UI / Shadcn
- State: Zustand
- Canvas: HTML5 Canvas API + Web Workers
Getting Started
Prerequisites
- Node.js 20+
- pnpm 9+
Installation
# Clone repository
git clone ssh://git@dev.pivoine.art:2222/valknar/paint-ui.git
cd paint-ui
# Install dependencies
pnpm install
# Run development server
pnpm dev
Open http://localhost:3000 in your browser.
Documentation
- Implementation Plan - Detailed roadmap and architecture
- Contributing Guide - How to contribute (coming soon)
- API Documentation - Plugin API reference (coming soon)
Inspiration
This project is inspired by miniPaint, an excellent open-source image editor. While paint-ui is a complete rewrite with modern technologies, we aim to preserve the powerful capabilities that make miniPaint great.
License
MIT
Author
valknar