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>
Sebastian Krüger
54aac626a2