Implements image import feature that adds images as new layers without clearing existing work:
**New Import Image Function** (`hooks/use-file-operations.ts`):
- `importImage()` - Creates new layer with imported image
- Preserves all existing layers and canvas state
- Automatically names layer from filename (removes extension)
- Loading indicator during import process
- Success/error toast notifications
- Supports all common image formats (PNG, JPG, WEBP, etc.)
**File Menu Integration** (`components/editor/file-menu.tsx`):
- Added "Import Image..." menu item with ImagePlus icon
- Positioned after "Open..." for logical flow
- Separate file input for import (only accepts images)
- Import handler with file input reset
- Keyboard accessible with proper ARIA roles
**Key Differences from Open:**
- **Open** - Replaces entire canvas (clears all layers, resets dimensions)
- **Import** - Adds image as new layer (preserves existing work)
**User Experience:**
- File > Import Image... opens native file picker
- Only image files accepted (image/*)
- Import creates layer with image dimensions
- Layer positioned at origin (0, 0)
- Can import multiple images as separate layers
- Works alongside existing drag & drop functionality
**Use Cases:**
- Adding reference images to canvas
- Building collages from multiple images
- Importing assets without losing current work
- Layer-based compositing workflows
All functionality tested and working with no build errors.
🤖 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>
