Sebastian Krüger
b93ae377d0
This commit completes Phase 6 of the paint-ui implementation, adding full file import/export capabilities with drag-drop and clipboard support. **New Files:** - lib/file-utils.ts: Core file operations (open, save, export, project format) - hooks/use-file-operations.ts: React hook for file operations - hooks/use-drag-drop.ts: Drag & drop state management - hooks/use-clipboard.ts: Clipboard paste event handling - components/editor/file-menu.tsx: File menu dropdown component - components/modals/export-dialog.tsx: Export dialog with format/quality options - components/modals/new-image-dialog.tsx: New image dialog with presets - components/modals/index.ts: Modals barrel export **Updated Files:** - components/editor/editor-layout.tsx: Integrated FileMenu, drag-drop overlay, clipboard paste - components/editor/index.ts: Added file-menu export **Features:** - ✨ Create new images with dimension presets (Full HD, HD, 800x600, custom) - ✨ Open image files (PNG, JPG, WEBP) as new layers - ✨ Save/load .paint project files (JSON with base64 layer data) - ✨ Export as PNG/JPEG/WEBP with quality control - ✨ Drag & drop file upload with visual overlay - ✨ Clipboard paste support (Ctrl+V) - ✨ File type validation and error handling - ✨ DataTransfer API integration for unified file handling **Project File Format (.paint):** - JSON structure with version, dimensions, layer metadata - Base64-encoded PNG data for each layer - Preserves layer properties (opacity, blend mode, order, visibility) Build verified: ✓ Compiled successfully in 1233ms 🤖 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