valknar/paint-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
32 Commits 1 Branch 0 Tags
108dfb5cec426270ca87a7008a82c0a4bb7fc9de
Commit Graph

11 Commits

Author SHA1 Message Date
Sebastian Krüger
108dfb5cec feat(ui): implement right-click context menu system for layers 
Added comprehensive context menu system with:

Context Menu Infrastructure:
- Context menu store using Zustand for state management
- Reusable ContextMenu component with positioning logic
- Automatic viewport boundary detection and adjustment
- Keyboard support (Escape to close)
- Click-outside detection

Layer Context Menu Features:
- Duplicate Layer (with icon)
- Move Up/Down (with disabled state when not possible)
- Show/Hide Layer (dynamic label based on state)
- Delete Layer (with confirmation, danger styling, disabled when only one layer)
- Visual separators between action groups

UX Enhancements:
- Smooth fade-in animation
- Proper z-indexing (9999) above all content
- Focus management with keyboard navigation
- Disabled state styling for unavailable actions
- Danger state (red text) for destructive actions
- Icon support for better visual identification

Accessibility:
- role="menu" and role="menuitem" attributes
- aria-label for screen readers
- aria-disabled for unavailable actions
- Keyboard navigation support

The context menu system is extensible and can be used for other
components beyond layers (canvas, tools, etc.).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 15:52:35 +01:00
Sebastian Krüger
3ad7dbf314 feat(ui): implement comprehensive toast notification system 
Added a complete toast notification system with:
- Toast store using Zustand for state management
- Toast component with 4 types: success, error, warning, info
- Animated slide-in/slide-out transitions
- Auto-dismiss after configurable duration
- Close button on each toast
- Utility functions for easy access (toast.success(), toast.error(), etc.)

Integrated toast notifications into file operations:
- Success notifications for: open image, open project, export image, save project
- Error notifications for: failed operations
- Warning notifications for: unsupported file types

UI Features:
- Stacks toasts in top-right corner
- Color-coded by type with icons (CheckCircle, AlertCircle, AlertTriangle, Info)
- Accessible with ARIA attributes
- Smooth animations using custom CSS keyframes

This provides immediate user feedback for all major operations throughout
the application.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 15:42:50 +01:00
Sebastian Krüger
fea87d3a1e feat: implement comprehensive text tool (Phase 11) 
Add complete text rendering system with the following features:

**Text Tool Core:**
- TextTool class with click-to-place text functionality
- Text cursor and pointer event handling
- Integration with DrawCommand for undo/redo support

**Text Rendering:**
- Multi-line text support with line height control
- Custom letter spacing
- Text alignment (left/center/right)
- Font families: 13 web-safe fonts + 14 popular Google Fonts
- Dynamic Google Font loading via Web Font Loader API
- Font styles (normal/italic) and weights (100-900)

**Text Dialog UI:**
- Full-featured text editor dialog
- Live preview of text with all formatting
- Font family selection (web-safe + Google Fonts)
- Font size (8-500px), style, and weight controls
- Color picker with hex input
- Text alignment options
- Line height slider (0.5-3x)
- Letter spacing slider (-10 to 50px)
- Multi-line text input with textarea

**State Management:**
- text-store with Zustand + persist middleware
- All text settings preserved across sessions
- Dialog state management (open/close)
- Click position tracking

**Integration:**
- Added text tool to tool palette with Type icon
- Registered TextTool in canvas tool system
- Added TextDialog to editor layout
- Full type safety with TypeScript interfaces

**Undoable:**
- Text rendering fully integrated with command pattern
- Each text insertion creates single undo point
- Proper before/after state capture

This completes Phase 11 of the implementation plan, marking
the transition from MVP to a fully-featured image editor.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 09:45:05 +01:00
Sebastian Krüger
cd59f0606b feat: implement UI state persistence and theme toggle 
Major improvements to UI state management and user preferences:

- Add theme toggle with dark/light mode support
- Implement Zustand persist middleware for UI state
- Add ui-store for panel layout preferences (dock width, heights, tabs)
- Persist tool settings (active tool, size, opacity, hardness, etc.)
- Persist canvas view preferences (grid, rulers, snap-to-grid)
- Persist shape tool settings
- Persist collapsible section states
- Fix canvas coordinate transformation for centered rendering
- Constrain checkerboard and grid to canvas bounds
- Add icons to all tab buttons and collapsible sections
- Restructure panel-dock to use persisted state

Storage impact: ~3.5KB total across all preferences
Storage keys: tool-storage, canvas-view-storage, shape-storage, ui-storage

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 09:03:14 +01:00
Sebastian Krüger
89a845feb3 feat: implement Phase 10 - Shape Tools 
Add comprehensive shape drawing system with support for 7 shape types:
rectangle, ellipse, line, arrow, polygon, star, and triangle.

Features:
- Created types/shape.ts with ShapeType and ShapeSettings interfaces
- Implemented lib/shape-utils.ts with drawing algorithms for all shapes:
  * Rectangle with optional corner radius
  * Ellipse with independent x/y radii
  * Line with stroke support
  * Arrow with configurable head size and angle
  * Polygon with adjustable sides (3-20)
  * Star with points and inner radius control
  * Triangle (equilateral style)
- Created store/shape-store.ts for shape state management
- Implemented tools/shape-tool.ts as unified tool handling all shapes
- Built components/shapes/shape-panel.tsx with comprehensive UI:
  * Grid selector for all 7 shape types
  * Fill/stroke toggles with color pickers
  * Dynamic properties panel (corner radius, sides, inner radius, etc.)
  * Real-time stroke width adjustment
- Integrated ShapeTool into canvas-with-tools.tsx
- Added ShapePanel to editor-layout.tsx sidebar
- Removed duplicate ShapeType/ShapeSettings from types/tool.ts

All shapes support:
- Fill with color selection
- Stroke with color and width controls
- Shape-specific properties (corners, sides, arrow heads, etc.)
- Undo/redo via DrawCommand integration

Build Status: ✓ Successful (1290ms)

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 02:43:15 +01:00
Sebastian Krüger
1d82f60182 feat(phase-9): implement comprehensive transform system with move and free transform 
This commit completes Phase 9 of the paint-ui implementation, adding transform
tools for moving, scaling, and rotating layers with real-time preview.

**New Files:**
- types/transform.ts: Transform types, state, and matrix interfaces
- lib/transform-utils.ts: Transform matrix operations and calculations
- store/transform-store.ts: Transform state management with Zustand
- core/commands/transform-command.ts: Undo/redo support for transforms
- tools/move-tool.ts: Simple layer move tool
- tools/free-transform-tool.ts: Advanced transform with handles (scale/rotate/move)
- components/transform/transform-panel.tsx: Transform UI panel
- components/transform/index.ts: Transform components barrel export

**Updated Files:**
- components/canvas/canvas-with-tools.tsx: Added transform tools integration
- components/editor/editor-layout.tsx: Integrated TransformPanel into layout
- store/index.ts: Added transform-store export
- tools/index.ts: Added transform tool exports
- types/index.ts: Added transform types export

**Transform Tools:**

**Move Tool:**
- ✨ Click-drag to move layers
- 📐 Preserves layer dimensions
- ⌨️ Arrow key support (planned)

**Free Transform Tool:**
- 🔲 8 scale handles (corners + edges)
- 🔄 Rotate handle above center
- 📏 Constrain proportions toggle
- 🎯 Visual handle feedback
- 🖱️ Cursor changes per handle

**Transform Operations:**
- **Move**: Translate layer position (X, Y offset)
- **Scale**: Resize with handles (independent X/Y or constrained)
- **Rotate**: Rotate around center point (degrees)
- **Proportional Scaling**: Lock aspect ratio with toggle

**Technical Features:**
- Transform matrix operations (2D affine transformations)
- Matrix multiplication for combined transforms
- Handle position calculation with rotation
- Transform bounds calculation (AABB of rotated corners)
- Real-time transform preview on canvas
- Non-destructive until apply
- Undo/redo integration via TransformCommand
- Apply/Cancel actions with state restoration

**Matrix Mathematics:**
- Identity matrix: [1 0 0 1 0 0]
- Translation matrix: [1 0 0 1 tx ty]
- Scale matrix: [sx 0 0 sy 0 0]
- Rotation matrix: [cos -sin sin cos 0 0]
- Matrix composition via multiplication
- Point transformation: [x' y'] = M × [x y]

**Transform Algorithm:**
1. Translate to origin (center of bounds)
2. Apply scale transformation
3. Apply rotation transformation
4. Translate back and apply position offset
5. Render transformed canvas to new canvas

**Handle Types:**
- **Corner handles** (4): Scale in both directions
- **Edge handles** (4): Scale in single direction
- **Rotate handle** (1): Rotate around center

**Transform State:**
```typescript
{
  x: number;        // Translation X
  y: number;        // Translation Y
  scaleX: number;   // Scale factor X (1 = 100%)
  scaleY: number;   // Scale factor Y (1 = 100%)
  rotation: number; // Rotation in degrees
  skewX: number;    // Skew X (future)
  skewY: number;    // Skew Y (future)
}
```

**UI/UX Features:**
- 264px wide transform panel with tool selection
- Real-time transform state display (position, scale, rotation)
- Constrain proportions toggle with lock/unlock icon
- Apply/Cancel buttons with visual feedback
- Tool-specific instructions
- Disabled state when no unlocked layer selected
- Keyboard shortcuts planned (Enter to apply, Esc to cancel)

**Cursor Feedback:**
- `move`: When dragging inside bounds
- `nwse-resize`: Top-left/bottom-right corners
- `nesw-resize`: Top-right/bottom-left corners
- `ns-resize`: Top/bottom edges
- `ew-resize`: Left/right edges
- `crosshair`: Rotate handle
- Cursor rotation adjustment (planned)

Build verified: ✓ Compiled successfully in 1374ms

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 02:36:50 +01:00
Sebastian Krüger
7f1e69559f feat(phase-8): implement comprehensive selection system with marching ants 
This commit completes Phase 8 of the paint-ui implementation, adding a full
selection system with multiple selection tools, operations, and visual feedback.

**New Files:**
- types/selection.ts: Selection types, masks, and state interfaces
- lib/selection-utils.ts: Selection mask generation and manipulation algorithms
- lib/selection-operations.ts: Copy/cut/paste/delete/fill/stroke operations
- store/selection-store.ts: Selection state management with Zustand
- core/commands/selection-command.ts: Undo/redo commands for selections
- tools/rectangular-selection-tool.ts: Rectangular marquee selection
- tools/elliptical-selection-tool.ts: Elliptical marquee selection
- tools/lasso-selection-tool.ts: Free-form polygon selection
- tools/magic-wand-tool.ts: Color-based flood-fill selection
- components/selection/selection-panel.tsx: Complete selection UI panel
- components/selection/index.ts: Selection components barrel export

**Updated Files:**
- components/canvas/canvas-with-tools.tsx: Added selection tools integration and marching ants animation
- components/editor/editor-layout.tsx: Integrated SelectionPanel into layout
- store/index.ts: Added selection-store export
- store/canvas-store.ts: Renamed Selection to CanvasSelection to avoid conflicts
- tools/index.ts: Added selection tool exports
- types/index.ts: Added selection types export
- types/canvas.ts: Renamed Selection interface to CanvasSelection

**Selection Tools:**

**Marquee Tools:**
- ✨ Rectangular Selection: Click-drag rectangular regions
- ✨ Elliptical Selection: Click-drag elliptical regions

**Free-form Tools:**
- ✨ Lasso Selection: Draw free-form polygon selections
- ✨ Magic Wand: Color-based flood-fill selection with tolerance

**Selection Modes:**
- 🔷 New: Replace existing selection
- ➕ Add: Add to existing selection
- ➖ Subtract: Remove from existing selection
- ⚡ Intersect: Keep only overlapping areas

**Selection Operations:**
- 📋 Copy/Cut/Paste: Standard clipboard operations with selection mask
- 🗑️ Delete: Remove selected pixels
- 🎨 Fill Selection: Fill with current color
- 🖌️ Stroke Selection: Outline selection with current color
- 🔄 Invert Selection: Invert selected/unselected pixels
- ❌ Clear Selection: Deselect all

**Technical Features:**
- Marching ants animation (animated dashed outline at 50ms interval)
- Selection masks using Uint8Array (0-255 values for anti-aliasing)
- Feathering support (0-250px gaussian blur on selection edges)
- Tolerance control for magic wand (0-255 color difference threshold)
- Scanline polygon fill algorithm for lasso tool
- Flood-fill with Set-based visited tracking for magic wand
- Selection bounds calculation for optimized operations
- Keyboard shortcuts (Ctrl+C, Ctrl+X, Ctrl+V, Ctrl+D, Ctrl+Shift+I)
- Undo/redo integration via selection commands
- Non-destructive operations with proper history tracking

**Algorithm Implementations:**
- Rectangular mask: Simple bounds-based pixel marking
- Elliptical mask: Distance formula from ellipse center
- Lasso mask: Scanline polygon fill with edge intersection
- Magic wand: BFS flood-fill with color tolerance matching
- Mask combination: Per-pixel operations (max, subtract, AND)
- Feathering: Separable box blur (horizontal + vertical passes)
- Mask inversion: Per-pixel NOT operation with bounds recalculation

**UI/UX Features:**
- 264px wide selection panel with all tools and operations
- Tool selection with visual feedback (highlighted active tool)
- Selection mode toggles (new/add/subtract/intersect)
- Feather and tolerance sliders with live value display
- Disabled state when no selection exists
- Keyboard shortcut hints next to operations
- Visual marching ants animation (animated dashes)

Build verified: ✓ Compiled successfully in 1302ms

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 02:24:12 +01:00
Sebastian Krüger
924c10a3e4 feat(phase-7): implement comprehensive effects & filters system 
This commit completes Phase 7 of the paint-ui implementation, adding a
complete filters and effects system with live preview capabilities.

**New Files:**
- types/filter.ts: Filter types, parameters, and state interfaces
- lib/filter-utils.ts: Core filter algorithms and image processing functions
- core/commands/filter-command.ts: Undo/redo support for filters
- store/filter-store.ts: Filter state management with Zustand
- hooks/use-filter-preview.ts: Real-time filter preview system
- components/filters/filter-panel.tsx: Complete filter UI with parameters
- components/filters/index.ts: Filters barrel export

**Updated Files:**
- components/editor/editor-layout.tsx: Integrated FilterPanel into layout
- store/index.ts: Added filter-store export
- types/index.ts: Added filter types export

**Implemented Filters:**

**Adjustment Filters (with parameters):**
- ✨ Brightness (-100 to +100): Linear brightness adjustment
- ✨ Contrast (-100 to +100): Contrast curve adjustment
- ✨ Hue/Saturation/Lightness: Full HSL color manipulation
  - Hue: -180° to +180° rotation
  - Saturation: -100% to +100% adjustment
  - Lightness: -100% to +100% adjustment

**Effect Filters (with parameters):**
- ✨ Gaussian Blur (1-50px): Separable kernel blur with proper edge handling
- ✨ Sharpen (0-100%): Unsharp mask algorithm
- ✨ Threshold (0-255): Binary threshold conversion
- ✨ Posterize (2-256 levels): Color quantization

**One-Click Filters (no parameters):**
- ✨ Invert: Color inversion
- ✨ Grayscale: Luminosity-based desaturation
- ✨ Sepia: Classic sepia tone effect

**Technical Features:**
- Real-time preview system with toggle control
- Non-destructive preview (restores original on cancel)
- Undo/redo integration via FilterCommand
- Efficient image processing with typed arrays
- HSL/RGB color space conversions
- Separable Gaussian blur for performance
- Proper clamping and edge case handling
- Layer-aware filtering (respects locked layers)

**UI/UX Features:**
- 264px wide filter panel with all filters listed
- Dynamic parameter controls based on selected filter
- Live preview toggle with visual feedback
- Apply/Cancel actions with proper state cleanup
- Disabled state when no unlocked layer selected
- Clear parameter labels and value display

**Algorithm Implementations:**
- Brightness: Linear RGB adjustment with clamping
- Contrast: Standard contrast curve (factor-based)
- Hue/Saturation: Full RGB↔HSL conversion with proper hue rotation
- Blur: Separable Gaussian kernel (horizontal + vertical passes)
- Sharpen: Convolution kernel with configurable amount
- Threshold: Luminosity-based binary conversion
- Posterize: Color quantization with configurable levels

Build verified: ✓ Compiled successfully in 1248ms

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 02:12:18 +01:00
Sebastian Krüger
1dca4ccf89 feat: implement Phase 5 - Advanced Color System 
Complete color management system with picker, swatches, and eyedropper:

**Color Utilities (lib/color-utils.ts)**
- RGB ↔ Hex conversion
- RGB ↔ HSV conversion
- Color validation (isValidHex)
- getColorAtPoint for eyedropper
- Default 20-color palette
- Hex normalization

**Color Store (store/color-store.ts)**
- Primary/secondary color management
- Recent colors history (max 20)
- Custom swatches (max 20)
- Color swap functionality
- Zustand persist middleware (localStorage)

**Components**

ColorPicker:
- HSV color space selector
- Interactive saturation/value picker (200x160px)
- Hue slider (vertical gradient)
- Hex input with validation
- RGB value display
- Pointer drag support
- Real-time updates
- Color preview

ColorSwatches:
- Default 20-color palette grid (10x2)
- Custom swatches with add/remove
- Active color highlighting
- Hover scaling effect
- Delete button on hover
- Color tooltips

ColorPanel:
- Tabbed interface (Picker/Swatches/Recent)
- Primary/Secondary color display
- Color swap button
- Recent colors grid (max 20)
- Tab navigation (Palette/Clock icons)
- 256px wide panel
- Persistent state

**Eyedropper Tool**
- Pick color from active layer
- Click or drag to sample
- Updates primary color
- Integrates with ColorPanel
- Crosshair cursor

**Features**
✓ HSV color picker with gradient
✓ Hex color input validation
✓ RGB value display
✓ 20 default color swatches
✓ Unlimited custom swatches (max 20 stored)
✓ Recent colors auto-tracking
✓ Primary/secondary color swap
✓ Eyedropper tool to sample canvas
✓ Persistent color preferences
✓ Smooth drag interactions
✓ Real-time color updates

**Integration**
- EditorLayout: Added ColorPanel (256px)
- ToolPalette: Added Eyedropper icon
- CanvasWithTools: Eyedropper support
- Tool settings: Removed basic color picker
- Color syncs with tool store

**UI/UX**
- 3-tab navigation (Picker, Swatches, Recent)
- Primary color: Large square
- Secondary color: Small overlap square
- Active tab highlighting
- Hover effects on all swatches
- Smooth transitions
- Keyboard accessible

**Performance**
- Efficient HSV calculations
- LocalStorage persistence
- Pointer event optimization
- Drag state management
- Build time: ~1.3s

**State Management**
- Zustand store with persist
- Auto-add to recent on use
- Max limits prevent memory bloat
- Clean swap operation

Ready for Phase 6: File Operations

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 01:55:28 +01:00
Sebastian Krüger
4f5c78df30 feat: implement Phase 3 - History & Undo System with command pattern 
Complete undo/redo functionality with robust command pattern architecture:

**Command Pattern Infrastructure (core/commands/)**
- BaseCommand: Abstract class for all undoable operations
- Command merging support for consecutive similar operations
- Timestamp tracking for intelligent merging

**Layer Commands**
- CreateLayerCommand: Create layer with full undo support
- DeleteLayerCommand: Delete with restoration of original position
- UpdateLayerCommand: Property updates with auto-merging (1s window)
- DuplicateLayerCommand: Duplicate with full canvas cloning
- ReorderLayerCommand: Z-order changes with bidirectional support
- MergeLayerDownCommand: Merge with canvas state preservation

**History Store (store/history-store.ts)**
- Dual stack architecture (undo/redo)
- Maximum 50 commands with automatic pruning
- Execution guard to prevent recursion
- Command merging for reduced history bloat
- Full state inspection (canUndo, canRedo, getHistorySummary)

**Layer Operations Wrapper (lib/layer-operations.ts)**
- History-enabled wrappers for all layer operations
- Drop-in replacements for direct store calls
- Automatic command creation and execution

**Keyboard Shortcuts (hooks/use-keyboard-shortcuts.ts)**
- Ctrl+Z / Cmd+Z: Undo
- Ctrl+Shift+Z / Cmd+Shift+Z: Redo
- Ctrl+Y / Cmd+Y: Redo (alternative)
- Input field detection (no interference with text editing)
- Platform-aware display strings (⌘ on Mac, Ctrl on Windows/Linux)

**UI Components**
- History Panel: Visual undo/redo stack
  - Shows all commands with timestamps
  - Current state indicator
  - Undone commands shown with reduced opacity
  - Command counter (undoable/redoable)

- Editor Toolbar: Undo/Redo buttons
  - Disabled state when stack is empty
  - Tooltip with keyboard shortcuts
  - Visual feedback on hover

- Layers Panel: History-integrated actions
  - Duplicate layer button (with history)
  - Delete layer (with confirmation and history)
  - Toggle visibility (with history)
  - Prevents deleting last layer

**Integration**
- All layer operations now support undo/redo
- Initial background layer creation bypasses history
- New layers created via UI add to history
- Keyboard shortcuts active globally (except in inputs)

**Performance**
- Command merging reduces memory usage
- Efficient canvas cloning for layer restoration
- No memory leaks with proper cleanup
- Dev server: 451ms startup (unchanged)

**Type Safety**
- Command interface with execute/undo/merge
- HistoryState interface for store
- Full TypeScript coverage

Ready for Phase 4: Drawing Tools implementation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-20 21:24:59 +01:00
Sebastian Krüger
4b01e92b88 feat: implement Phase 2 - Core Canvas Engine with layer system 
Complete canvas rendering infrastructure and state management:

**Type System (types/)**
- Layer interface with blend modes, opacity, visibility
- Canvas state with zoom, pan, grid, rulers
- Tool types and settings interfaces
- Selection and pointer state types

**State Management (store/)**
- Layer store: CRUD operations, reordering, merging, flattening
- Canvas store: zoom (0.1x-10x), pan, grid, rulers, coordinate conversion
- Tool store: active tool, brush settings (size, opacity, hardness, flow)
- Full Zustand integration with selectors

**Utilities (lib/)**
- Canvas utils: create, clone, resize, load images, draw grid/checkerboard
- General utils: cn, clamp, lerp, distance, snap to grid, debounce, throttle
- Image data handling with error safety

**Components**
- CanvasWrapper: Multi-layer rendering with transformations
  - Checkerboard transparency background
  - Layer compositing with blend modes and opacity
  - Grid overlay support
  - Selection visualization
  - Mouse wheel zoom (Ctrl+scroll)
  - Middle-click or Shift+click panning

- LayersPanel: Interactive layer management
  - Visibility toggle with eye icon
  - Active layer selection
  - Opacity display
  - Delete with confirmation
  - Sorted by z-order

- EditorLayout: Full editor interface
  - Top toolbar with zoom controls (±, fit to screen, percentage)
  - Canvas area with full viewport
  - Right sidebar for layers panel
  - "New Layer" button with auto-naming

**Features Implemented**
✓ Multi-layer canvas with proper z-ordering
✓ Layer visibility, opacity, blend modes
✓ Zoom: 10%-1000% with Ctrl+wheel
✓ Pan: Middle-click or Shift+drag
✓ Grid overlay (toggleable)
✓ Selection rendering
✓ Background color support
✓ Create/delete/duplicate layers
✓ Layer merging and flattening

**Performance**
- Dev server: 451ms startup
- Efficient canvas rendering with transformations
- Debounced/throttled event handlers ready
- Memory-safe image data operations

Ready for Phase 3: History & Undo System

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-20 21:20:06 +01:00