paint-ui/IMPLEMENTATION_PLAN.md

# Paint UI - Implementation Plan

## 📊 Current Status

**Progress**: Phases 1-11 Complete (88% of MVP features) ✅

### ✅ Completed Features
- **Core Foundation**: Next.js 16, React 19, TypeScript, Tailwind CSS 4
- **Canvas Engine**: Multi-layer system with zoom/pan, rulers, blend modes
- **Undo/Redo**: Command pattern with full history support
- **Drawing Tools**: Pencil, Brush (with flow/hardness), Eraser, Fill, Eyedropper
- **Selection Tools**: Rectangle, Ellipse, Lasso, Magic Wand with full operations
- **Transform Tools**: Move, Free Transform, Rotate, Scale, Skew
- **Shape Tools**: Rectangle, Ellipse, Line, Arrow, Polygon, Star, Triangle
- **Text Tool**: On-canvas editing, 16 fonts, Bold/Italic, Alignment, Line height, Letter spacing, Delete
- **Color System**: HSV picker, swatches, history, color adjustments
- **File Operations**: Open (drag/drop/paste), Export (PNG/JPG/WEBP), Project files
- **Effects & Filters**: 15+ filters (Blur, Sharpen, Color adjustments, Artistic effects)
- **UI/UX**: Professional layout, Theme toggle, State persistence, Custom scrollbars

### 🚧 In Progress / TODO
- **Advanced Brush Tools** (Clone Stamp, Healing Brush, Smudge, Dodge/Burn)
- **Performance Optimizations** (Web Workers, Code splitting, Lazy loading)
- **Accessibility** (ARIA labels, Screen reader support)
- **Testing & Documentation** (Phase 12)
- **Web Font Integration** (Google Fonts for text tool)

### 📅 Last Updated
November 21, 2025 - Completed Phase 11: Text Tool with comprehensive formatting controls

---

## Project Overview

**paint-ui** is a modern browser-based image editor built with Next.js 16 and Tailwind CSS 4, inspired by miniPaint. This is a ground-up rebuild focusing on modern web technologies while preserving the powerful canvas manipulation capabilities.

## Technology Stack

### Core Framework
- **Next.js 16** (App Router) - React framework with SSR/SSG capabilities
- **React 19** - UI library with modern hooks and server components
- **TypeScript 5.x** - Type safety and better DX

### Styling
- **Tailwind CSS 4** - Utility-first CSS framework
- **Radix UI** or **Shadcn/ui** - Accessible component primitives
- **CSS Modules** - For canvas-specific styling needs

### State Management
- **Zustand** - Lightweight state management for layers, history, and canvas state
- **React Context** - Global app configuration and theme

### Canvas & Image Processing
- **HTML5 Canvas API** - Core rendering
- **OffscreenCanvas** - Performance optimization
- **Web Workers** - Heavy image processing operations
- **pica** - High-quality image resizing
- **gif.js** - Animated GIF support
- **exif-js** - EXIF data handling

### Utilities
- **uuid** - Layer ID generation
- **file-saver** - File downloads
- **clsx** / **tailwind-merge** - Class name utilities

## Architecture

### Directory Structure

```
paint-ui/
├── src/
│   ├── app/                          # Next.js App Router
│   │   ├── layout.tsx               # Root layout
│   │   ├── page.tsx                 # Main editor page
│   │   └── globals.css              # Global styles + Tailwind
│   │
│   ├── components/                   # React components
│   │   ├── ui/                      # Shadcn/Radix components
│   │   │   ├── button.tsx
│   │   │   ├── dialog.tsx
│   │   │   ├── dropdown-menu.tsx
│   │   │   ├── slider.tsx
│   │   │   ├── tabs.tsx
│   │   │   └── ...
│   │   │
│   │   ├── editor/                  # Editor-specific components
│   │   │   ├── canvas-wrapper.tsx   # Main canvas component
│   │   │   ├── toolbar.tsx          # Top toolbar
│   │   │   ├── tool-palette.tsx     # Left sidebar tools
│   │   │   ├── layers-panel.tsx     # Right sidebar layers
│   │   │   ├── properties-panel.tsx # Layer properties
│   │   │   ├── color-picker.tsx     # Color selection
│   │   │   └── preview.tsx          # Preview panel
│   │   │
│   │   └── modals/                  # Modal dialogs
│   │       ├── new-image.tsx
│   │       ├── resize.tsx
│   │       ├── export.tsx
│   │       └── settings.tsx
│   │
│   ├── core/                         # Core canvas engine
│   │   ├── canvas-manager.ts        # Canvas lifecycle management
│   │   ├── layer-manager.ts         # Layer operations
│   │   ├── history-manager.ts       # Undo/redo system
│   │   ├── selection-manager.ts     # Selection handling
│   │   └── render-engine.ts         # Rendering pipeline
│   │
│   ├── tools/                        # Drawing tools
│   │   ├── base-tool.ts             # Abstract base class
│   │   ├── pencil.ts
│   │   ├── brush.ts
│   │   ├── eraser.ts
│   │   ├── fill.ts
│   │   ├── select.ts
│   │   ├── text.ts
│   │   ├── shape.ts
│   │   └── ...
│   │
│   ├── effects/                      # Image effects/filters
│   │   ├── base-effect.ts
│   │   ├── blur.ts
│   │   ├── brightness.ts
│   │   ├── contrast.ts
│   │   ├── grayscale.ts
│   │   └── ...
│   │
│   ├── store/                        # Zustand stores
│   │   ├── canvas-store.ts          # Canvas state
│   │   ├── layer-store.ts           # Layers state
│   │   ├── history-store.ts         # Undo/redo state
│   │   ├── tool-store.ts            # Active tool state
│   │   └── ui-store.ts              # UI state (panels, modals)
│   │
│   ├── workers/                      # Web Workers
│   │   ├── image-processor.worker.ts
│   │   └── gif-generator.worker.ts
│   │
│   ├── lib/                          # Utility functions
│   │   ├── canvas-utils.ts
│   │   ├── color-utils.ts
│   │   ├── file-utils.ts
│   │   ├── image-utils.ts
│   │   └── math-utils.ts
│   │
│   ├── types/                        # TypeScript types
│   │   ├── canvas.ts
│   │   ├── layer.ts
│   │   ├── tool.ts
│   │   ├── effect.ts
│   │   └── index.ts
│   │
│   └── config/                       # Configuration
│       ├── constants.ts
│       ├── keyboard-shortcuts.ts
│       └── default-settings.ts
│
├── public/                           # Static assets
│   ├── icons/
│   └── fonts/
│
├── docs/                             # Documentation
│   ├── architecture.md
│   ├── contributing.md
│   └── api.md
│
├── .github/
│   └── workflows/
│       └── ci.yml
│
├── package.json
├── tsconfig.json
├── tailwind.config.ts
├── next.config.js
├── .gitignore
├── .eslintrc.json
├── .prettierrc
└── README.md
```

## Implementation Phases

### Phase 1: Project Foundation (Week 1) ✅ COMPLETE

**Goals**: Set up development environment and basic project structure

#### Tasks:
1. **Project Initialization**
   - [x] Create git repository
   - [x] Initialize Next.js 16 with TypeScript
   - [x] Configure Tailwind CSS 4
   - [x] Set up ESLint + Prettier
   - [x] Configure path aliases (@/ prefix)

2. **Core Dependencies**
   - [x] Install Radix UI / Shadcn components
   - [x] Install Zustand for state management
   - [x] Install canvas utilities (pica, file-saver, etc.)
   - [ ] Set up Storybook (optional, for component development) - SKIPPED

3. **Basic Layout**
   - [x] Create root layout with header/sidebar structure
   - [x] Implement responsive grid layout
   - [x] Add dark/light theme toggle
   - [x] Set up global CSS and Tailwind theme

4. **TypeScript Types**
   - [x] Define core types (Layer, Canvas, Tool, Effect)
   - [x] Create type definitions for canvas state
   - [x] Set up strict TypeScript config

**Deliverables**:
- ✅ Working Next.js dev server
- ✅ Basic UI layout with panels
- ✅ Theme system working
- ✅ Type system foundation

---

### Phase 2: Core Canvas Engine (Week 2-3) ✅ COMPLETE

**Goals**: Build the fundamental canvas rendering and layer system

#### Tasks:
1. **Canvas Manager**
   - [x] Create CanvasWrapper component with refs
   - [x] Implement canvas initialization
   - [x] Add zoom/pan functionality
   - [x] Implement rulers and grid overlay
   - [x] Handle canvas resize events

2. **Layer System**
   - [x] Define Layer interface (id, name, visible, opacity, blendMode)
   - [x] Create LayerManager class
   - [x] Implement layer CRUD operations
   - [x] Add layer ordering (move up/down)
   - [x] Implement layer merging/flattening

3. **State Management**
   - [x] Set up canvas-store (dimensions, zoom, offset)
   - [x] Set up layer-store (layers array, active layer)
   - [x] Create selectors for derived state
   - [x] Add state persistence (localStorage) - via Zustand persist

4. **Rendering Pipeline**
   - [x] Implement composite rendering (all layers → main canvas)
   - [x] Add blend mode support
   - [ ] Optimize rendering with dirty rectangles - TODO: Performance optimization
   - [x] Implement preview rendering

**Deliverables**:
- ✅ Canvas displays correctly
- ✅ Can create/delete/reorder layers
- ✅ Zoom/pan works smoothly
- ✅ State persists on refresh

---

### Phase 3: History & Undo System (Week 3-4) ✅ COMPLETE

**Goals**: Implement robust undo/redo functionality

#### Tasks:
1. **History Manager**
   - [x] Design history state structure (snapshots vs commands) - Command pattern
   - [x] Implement undo/redo stack
   - [x] Add history limits (max 50 states)
   - [x] Create history middleware for Zustand

2. **Command Pattern**
   - [x] Create abstract Command class (BaseCommand)
   - [x] Implement layer commands (Add, Delete, Modify)
   - [x] Implement drawing commands (Paint, Erase, Fill) - DrawCommand
   - [x] Implement move commands - MoveCommand
   - [x] Implement transform commands - TransformCommand
   - [x] Implement filter commands - FilterCommand
   - [ ] Add command batching for performance - TODO: Future optimization

3. **Keyboard Shortcuts**
   - [x] Implement Ctrl+Z (undo)
   - [x] Implement Ctrl+Shift+Z (redo)
   - [x] Add keyboard shortcut manager
   - [x] Create shortcuts config file

**Deliverables**:
- ✅ Undo/redo works for all operations
- ✅ Keyboard shortcuts functional
- ✅ History panel shows operation list

---

### Phase 4: Basic Drawing Tools (Week 4-6) ✅ COMPLETE

**Goals**: Implement fundamental drawing capabilities

#### Tasks:
1. **Tool Architecture**
   - [x] Create BaseTool abstract class
   - [x] Define tool lifecycle (activate, deactivate, mouseDown, mouseMove, mouseUp)
   - [x] Implement tool cursor management
   - [x] Add tool settings panel (tool-options bar)

2. **Core Tools**
   - [x] **Pencil Tool** - Basic 1px drawing
   - [x] **Brush Tool** - Variable size/opacity/hardness/flow
   - [x] **Eraser Tool** - Remove pixels
   - [x] **Fill Tool** - Flood fill algorithm with color/opacity
   - [x] **Eyedropper Tool** - Color picker from canvas

3. **Selection Tools**
   - [x] **Rectangle Select** - Rectangular selection
   - [x] **Ellipse Select** - Circular selection
   - [x] **Lasso Select** - Freehand selection
   - [x] **Magic Wand** - Color-based selection
   - [x] Selection operations (move, cut, copy, paste, fill, stroke, delete)

4. **Tool UI**
   - [x] Tool palette sidebar
   - [x] Tool-specific settings panel
   - [x] Brush preview
   - [x] Size/opacity/hardness/flow sliders

**Deliverables**:
- ✅ Can draw with pencil/brush
- ✅ Can erase pixels
- ✅ Can fill areas with color
- ✅ Can select and manipulate regions

---

### Phase 5: Color System (Week 6-7) ✅ COMPLETE

**Goals**: Comprehensive color management

#### Tasks:
1. **Color Picker**
   - [x] HSV color wheel component
   - [x] RGB/HSL/Hex input fields
   - [x] Color history/swatches
   - [x] Eyedropper integration
   - [x] Alpha/opacity control

2. **Color Management**
   - [x] Primary/secondary color state
   - [x] Color palette presets
   - [x] Recent colors storage
   - [x] Color conversion utilities
   - [x] Color adjustments (Hue/Saturation/Lightness/Brightness)

**Deliverables**:
- ✅ Functional color picker
- ✅ Color swatches working
- ✅ Color history persists

---

### Phase 6: File Operations (Week 7-8) ✅ COMPLETE

**Goals**: Import/export image files

#### Tasks:
1. **File Opening**
   - [x] Drag & drop support
   - [x] File input dialog
   - [x] Clipboard paste (Ctrl+V)
   - [ ] URL loading - TODO: Future enhancement
   - [x] Multiple file formats (PNG, JPG, WEBP, GIF)

2. **File Saving**
   - [x] Export as PNG/JPG/WEBP
   - [x] Quality settings for lossy formats
   - [x] Transparent background support
   - [x] Export current layer vs all layers

3. **Project Files**
   - [x] Save/load project as JSON (with layers)
   - [x] Preserve layer structure
   - [x] Include metadata

4. **EXIF Support**
   - [ ] Read EXIF data on import - TODO: Future enhancement
   - [ ] Display EXIF info - TODO: Future enhancement
   - [ ] Preserve EXIF on export (optional) - TODO: Future enhancement

**Deliverables**:
- ✅ Can open images via drag/drop/paste
- ✅ Can export to common formats
- ✅ Can save/load projects with layers

---

### Phase 7: Image Effects & Filters (Week 8-10) ✅ COMPLETE

**Goals**: Implement image manipulation effects

#### Tasks:
1. **Effect Architecture**
   - [x] Create BaseEffect class
   - [x] Implement effect preview system
   - [ ] Add Web Worker support for heavy effects - TODO: Performance optimization
   - [x] Create effect parameter UI (FilterDialog)

2. **Color Adjustments**
   - [x] Brightness/Contrast
   - [x] Hue/Saturation/Lightness
   - [ ] Levels - TODO: Advanced feature
   - [ ] Curves - TODO: Advanced feature
   - [x] Auto color correction
   - [x] Invert/Negative

3. **Blur Effects**
   - [x] Gaussian Blur
   - [x] Box Blur
   - [ ] Motion Blur - TODO: Future enhancement
   - [ ] Zoom Blur - TODO: Future enhancement

4. **Artistic Effects**
   - [x] Grayscale
   - [x] Sepia
   - [ ] Oil Painting - TODO: Future enhancement
   - [ ] Pencil Sketch - TODO: Future enhancement
   - [ ] Mosaic - TODO: Future enhancement
   - [x] Pixelate

5. **Distortion Effects**
   - [ ] Bulge/Pinch - TODO: Future enhancement
   - [ ] Swirl - TODO: Future enhancement
   - [ ] Ripple - TODO: Future enhancement

6. **Other Effects**
   - [x] Sharpen
   - [x] Edge Detection
   - [x] Emboss
   - [x] Noise/Grain
   - [x] Vignette

**Deliverables**:
- ✅ 15+ effects implemented (core set complete)
- ✅ Effect preview working
- ⚠️ Effects run in main thread (Worker optimization TODO)

---

### Phase 8: Advanced Tools (Week 10-12) ✅ COMPLETE

**Goals**: Implement advanced editing tools

#### Tasks:
1. **Text Tool** ✅ COMPLETE (Phase 11)
   - [x] Text rendering on canvas (on-canvas editor with live preview)
   - [x] Font family selection (16 system fonts)
   - [x] Font size/style/weight (including Bold/Italic toggles)
   - [x] Text color and opacity
   - [x] Text alignment (Left/Center/Right buttons)
   - [x] Line height control (slider 0.5-3.0)
   - [x] Letter spacing control (slider -10px to 50px)
   - [x] Text editing/repositioning (drag to move, click to re-edit)
   - [x] Delete text functionality (Delete/Backspace on empty text)
   - [ ] Web font loading (Google Fonts integration) - TODO: Enhancement

2. **Shape Tools** ✅ COMPLETE (Phase 10)
   - [x] Rectangle (fill/stroke)
   - [x] Ellipse (fill/stroke)
   - [x] Line
   - [x] Arrow
   - [x] Polygon
   - [x] Star
   - [x] Triangle

3. **Advanced Tools**
   - [ ] Clone Stamp Tool - TODO: Future enhancement
   - [ ] Healing Brush - TODO: Future enhancement
   - [ ] Blur/Sharpen Tool (brush-based) - TODO: Future enhancement
   - [ ] Smudge Tool - TODO: Future enhancement
   - [ ] Dodge/Burn - TODO: Future enhancement

4. **Transform Tools** ✅ COMPLETE (Phase 9)
   - [x] Free Transform
   - [x] Rotate
   - [x] Scale
   - [x] Skew
   - [ ] Perspective - TODO: Advanced feature
   - [x] Move Tool

**Deliverables**:
- ✅ Text tool fully functional with comprehensive formatting
- ✅ Shape tools functional
- ✅ Transform operations smooth

---

### Phase 9: Image Manipulation (Week 12-13) ✅ COMPLETE (Integrated with Phase 8-9)

**Goals**: Advanced image operations

#### Tasks:
1. **Canvas Operations**
   - [x] Resize canvas
   - [x] Crop canvas
   - [x] Rotate canvas (90°, 180°, 270°)
   - [x] Flip horizontal/vertical
   - [ ] Trim transparent pixels - TODO: Utility feature

2. **Image Resize**
   - [x] Resize with quality options
   - [x] Maintain aspect ratio
   - [x] Hermite/Bicubic algorithms
   - [x] Integration with pica library

3. **Layer Operations**
   - [x] Merge layers
   - [x] Flatten image
   - [x] Duplicate layer
   - [x] Layer from selection

**Deliverables**:
- ✅ All image operations working
- ✅ High-quality resize algorithm
- ✅ No quality loss on operations

---

### Phase 10: UI/UX Polish (Week 13-14) ✅ MOSTLY COMPLETE

**Goals**: Refine user interface and experience

#### Tasks:
1. **Responsive Design**
   - [x] Mobile-friendly layout (professional editor layout)
   - [ ] Touch support for tools - TODO: Mobile optimization
   - [x] Collapsible panels (Resizable panels with state persistence)
   - [x] Mobile menu

2. **Accessibility**
   - [x] Keyboard navigation (Ctrl+Z, Ctrl+Shift+Z, etc.)
   - [ ] ARIA labels - TODO: Accessibility improvements
   - [ ] Focus management - TODO: Accessibility improvements
   - [ ] Screen reader support - TODO: Accessibility improvements

3. **UI Components**
   - [ ] Context menus (right-click) - TODO: Enhancement
   - [x] Tooltips (via Radix UI)
   - [ ] Notification system - TODO: Enhancement
   - [x] Loading states
   - [x] Error boundaries

4. **Performance**
   - [ ] Lazy load tools - TODO: Optimization
   - [ ] Code splitting - TODO: Optimization
   - [ ] Image optimization - TODO: Optimization
   - [ ] Bundle size analysis - TODO: Optimization

**Additional Features Implemented**:
- [x] Dark/Light theme toggle with persistence
- [x] UI state persistence (panel positions, tool selection)
- [x] Professional image editor layout structure
- [x] Tool options bar with context-sensitive controls
- [x] Transparent canvas background support
- [x] Custom scrollbar styling

**Deliverables**:
- ✅ Professional UI layout
- ⚠️ Accessibility improvements TODO
- ✅ Fast load times with Next.js 16

---

### Phase 11: Advanced Features (Week 14-16) ✅ TEXT TOOL COMPLETE

**Goals**: Nice-to-have features

#### Priority Tasks for Next Implementation:
1. **Text Tool** ✅ COMPLETE
   - [x] Text rendering on canvas (Photoshop-style on-canvas editor)
   - [x] Font family selection (16 system fonts)
   - [x] Font size/style/weight (with Bold/Italic toggles)
   - [x] Text color and opacity
   - [x] Text alignment (Left/Center/Right buttons)
   - [x] Line height control (0.5-3.0 range)
   - [x] Letter spacing control (-10px to 50px)
   - [x] Text editing/repositioning (click to edit, drag to move)
   - [x] Delete functionality (Delete/Backspace on empty text)
   - [ ] Web font loading (Google Fonts integration) - TODO: Enhancement

2. **Advanced Brush Tools** ⚠️ TODO
   - [ ] Clone Stamp Tool
   - [ ] Healing Brush
   - [ ] Blur/Sharpen Tool (brush-based)
   - [ ] Smudge Tool
   - [ ] Dodge/Burn

3. **Animation Support** (Future)
   - [ ] Frame timeline
   - [ ] Frame duplication
   - [ ] Onion skinning
   - [ ] Export as GIF
   - [ ] Export as APNG/WEBP animation

4. **Batch Operations** (Future)
   - [ ] Apply effect to multiple layers
   - [ ] Batch export
   - [ ] Actions/macros recording

5. **Plugins/Extensions** (Future)
   - [ ] Plugin API design
   - [ ] Custom tool registration
   - [ ] Custom effect registration

**Deliverables**:
- ✅ Text tool complete with professional features
- ⚠️ Advanced brush tools TODO
- ⏸️ Animation/batch/plugin features (nice-to-have, future)

---

### Phase 12: Testing & Documentation (Week 16-18) ⚠️ TODO

**Goals**: Ensure quality and maintainability

#### Tasks:
1. **Testing**
   - [ ] Unit tests (Vitest) - Core utilities and commands
   - [ ] Integration tests - Tool interactions
   - [ ] E2E tests (Playwright) - Complete workflows
   - [ ] Visual regression tests - UI consistency

2. **Documentation**
   - [x] Implementation plan (this document)
   - [ ] User documentation - How to use each tool
   - [ ] API documentation - For developers
   - [ ] Architecture guide - System design
   - [ ] Contributing guide - For contributors

3. **CI/CD**
   - [x] Docker configuration
   - [ ] GitHub Actions setup
   - [ ] Automated testing
   - [ ] Build optimization
   - [ ] Deployment pipeline

**Deliverables**:
- ⚠️ Testing framework TODO
- ⚠️ User documentation TODO
- ⚠️ Automated CI/CD TODO

---

## Performance Considerations

### Optimization Strategies

1. **Canvas Rendering**
   - Use OffscreenCanvas for layer compositing
   - Implement dirty rectangle optimization
   - Debounce render calls during drawing
   - Use requestAnimationFrame for smooth updates

2. **Web Workers**
   - Offload heavy image processing to workers
   - Use transferable objects for large image data
   - Implement worker pool for parallel processing

3. **Memory Management**
   - Limit undo history size
   - Clear unused canvases
   - Use image compression for layer storage
   - Implement layer thumbnail caching

4. **Code Splitting**
   - Lazy load tools on demand
   - Dynamic imports for effects
   - Separate chunks for large dependencies

## Compatibility

### Browser Support
- Chrome 100+
- Firefox 100+
- Safari 15+
- Edge 100+

### Required APIs
- Canvas 2D Context
- OffscreenCanvas
- Web Workers
- File API
- Clipboard API

## Success Metrics

### Performance Targets
- Initial load: <3 seconds
- Tool switch: <100ms
- Effect preview: <500ms
- Undo/redo: <50ms

### Quality Targets
- TypeScript: 100% coverage
- Test coverage: >80%
- Lighthouse score: >90
- Bundle size: <500KB (gzipped)

## Risk Mitigation

### Technical Risks
1. **Canvas Performance**: Use Web Workers and OffscreenCanvas
2. **Memory Leaks**: Implement proper cleanup in useEffect
3. **Browser Compatibility**: Polyfills and feature detection
4. **Large File Handling**: Stream processing and chunking

### Project Risks
1. **Scope Creep**: Stick to phased plan, MVP first
2. **Time Estimates**: Build in 20% buffer
3. **Dependency Issues**: Lock versions, test updates

## Future Enhancements

### Post-MVP Features
- [ ] Cloud storage integration
- [ ] Real-time collaboration
- [ ] AI-powered features (background removal, upscaling)
- [ ] Vector layer support
- [ ] 3D text rendering
- [ ] Advanced typography tools
- [ ] Print-ready export (CMYK support)
- [ ] Mobile native apps (React Native)

## Resources

### References
- miniPaint source: https://github.com/viliusle/miniPaint
- Next.js docs: https://nextjs.org/docs
- Tailwind CSS: https://tailwindcss.com
- Radix UI: https://radix-ui.com
- Canvas MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

### Libraries to Evaluate
- **fabric.js** - Canvas object manipulation
- **konva.js** - 2D canvas framework
- **react-konva** - React wrapper for Konva
- **react-canvas-draw** - Drawing capabilities

---

## Getting Started

### Prerequisites
- Node.js 20+
- pnpm 9+
- Git

### Initial Setup
```bash
# 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
```

### Development Workflow
1. Create feature branch from `main`
2. Make changes with conventional commits
3. Write tests for new features
4. Run linter and tests locally
5. Push and create pull request
6. Review and merge

---

## Conclusion

This implementation plan provides a roadmap for building a modern, high-performance browser-based image editor. The phased approach ensures steady progress while maintaining quality and allowing for adjustments based on learnings along the way.

**Estimated Timeline**: 16-18 weeks for MVP
**Team Size**: 1-2 developers
**Complexity**: High (canvas manipulation, performance optimization)

The end result will be a powerful, user-friendly image editor that rivals desktop applications while running entirely in the browser.