Sebastian Krüger
63a6801155
Adds right-click context menu for canvas with full operation support: **Clipboard Operations:** - Cut/Copy/Paste with selection mask support - Browser clipboard API integration for external images - Internal clipboard buffer for canvas selections - Toast notifications for user feedback **Selection Operations:** - Select All - creates full canvas selection with proper mask - Deselect - clears active selection - Selection state properly integrated with canvas operations **Layer Operations:** - New Layer - creates layer with history support - Duplicate Layer - clones active layer - Merge Down - merges layer with one below **Transform Operations:** - Rotate 90° CW - rotates active layer clockwise - Flip Horizontal - mirrors layer horizontally - Flip Vertical - mirrors layer vertically - All transforms preserve image quality and support undo/redo **Edit Operations:** - Undo/Redo - integrated with history system - Disabled states for unavailable operations - Context-aware menu items **New Files Created:** - lib/clipboard-operations.ts - Cut/copy/paste implementation - lib/canvas-operations.ts - Rotate/flip canvas functions **Modified Files:** - components/canvas/canvas-with-tools.tsx - Context menu integration - store/selection-store.ts - Added selectAll() method - core/commands/index.ts - Export all command types **Technical Improvements:** - Proper Selection type structure with mask/bounds - History command integration for all operations - Lazy-loaded operations for performance - Toast feedback for all user actions - Full TypeScript type safety All operations work with undo/redo and maintain app state consistency. 🤖 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