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>
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>
Initialize modern tech stack following audio-ui patterns:
**Framework Setup**
- Next.js 16 with App Router and Turbopack (ready in 754ms)
- React 19 with TypeScript 5
- Static export configuration for deployment
**Styling System**
- Tailwind CSS 4 with @tailwindcss/postcss
- OKLCH color space for vibrant, perceptually uniform colors
- Custom CSS variables for theming (light/dark modes)
- Canvas-specific color palette (canvas-bg, canvas-grid, canvas-selection)
- Custom animations (fadeIn, slideDown, scaleIn, etc.)
- Checkerboard pattern utility for transparency preview
- Custom scrollbar styling
**State Management**
- Zustand installed for layers, canvas, and history state
**Canvas Libraries**
- pica for high-quality image resizing
- file-saver for export functionality
- uuid for layer ID generation
**Development Experience**
- Path aliases (@/* pattern) configured
- Strict TypeScript with proper type checking
- Auto dark mode detection with localStorage persistence
- Responsive layout with overflow handling
**Initial UI**
- Root layout with theme system
- Landing page showing Phase 1 completion status
- Clean, modern design with gradient title
Ready for Phase 2: Core Canvas Engine implementation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
