Sebastian Krüger
5c4763cb62
Implements comprehensive quality-of-life improvements for professional editing experience: **1. Status Bar Component** (`components/editor/status-bar.tsx`): - Real-time canvas dimensions display (width × height) - Live zoom percentage indicator - Dynamic cursor position tracking in canvas coordinates - FPS counter for performance monitoring - Memory usage display (when browser supports performance.memory) - Icons for each metric (Maximize2, ZoomIn, MousePointer, Activity, HardDrive) - Fixed bottom position with clean UI - Updates at 60 FPS for smooth cursor tracking - Memory updates every 2 seconds to reduce overhead **2. Mini-Map / Navigator** (`components/canvas/mini-map.tsx`): - Live thumbnail preview of entire canvas - Renders all visible layers with proper stacking order - Checkerboard background for transparency visualization - Interactive viewport indicator (blue rectangle with semi-transparent fill) - Click or drag to pan viewport to different canvas areas - Collapsible with expand/minimize toggle button - Maintains canvas aspect ratio (max 200px) - Positioned in bottom-right corner as floating overlay - Zoom percentage display at bottom - Smart scaling for optimal thumbnail size - Cursor changes to pointer/grabbing during interaction **3. Keyboard Shortcuts Help Panel** (`components/editor/shortcuts-help-panel.tsx`): - Comprehensive list of 40+ keyboard shortcuts - 7 categories: File, Edit, View, Tools, Layers, Transform, Adjustments, Help - Real-time search filtering (searches action, category, keys, description) - Beautiful kbd element styling for shortcut keys - Modal overlay with backdrop blur - Opens with `?` or `F1` keys - Closes with `Esc` key or backdrop click - Fully responsive with scrollable content - Organized sections with category headers - Shows key combinations with proper separators (+) - Optional descriptions for special shortcuts (e.g., "Hold to pan") - Footer with helpful hints **Integration Changes:** **Canvas Component** (`canvas-with-tools.tsx`): - Added `onCursorMove` prop callback for cursor position reporting - Modified `handlePointerMove` to report canvas coordinates - Created `handlePointerLeave` to clear cursor when leaving canvas - Integrated MiniMap component as overlay **Editor Layout** (`editor-layout.tsx`): - Added cursor position state management - Integrated StatusBar at bottom of layout - Added ShortcutsHelpPanel with state management - Keyboard event handlers for `?` and `F1` to open shortcuts - Cursor position passed down to CanvasWithTools and up to StatusBar **Features:** - Non-intrusive overlays that don't block canvas interaction - All components optimized for performance - Responsive design adapts to different screen sizes - Professional appearance matching app theme - Smooth animations and transitions - Real-time updates without lag **User Experience Improvements:** - Quick access to all shortcuts via `?` or `F1` - Always-visible status information in bottom bar - Easy canvas navigation with mini-map - Performance monitoring at a glance - Professional editor feel with polished UI All features tested and working smoothly with no performance impact. 🤖 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