feat: add Import Image functionality to add images as new layers

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>

hooks/use-file-operations.ts

@@ -127,6 +127,40 @@ export function useFileOperations() {
     [clearLayers, clearHistory, setDimensions, createLayer, setLoading]
   );
 
+  /**
+   * Import image as new layer (without clearing existing layers)
+   */
+  const importImage = useCallback(
+    async (file: File) => {
+      setLoading(true, `Importing ${file.name}...`);
+      try {
+        const img = await openImageFile(file);
+
+        // Create new layer with imported image
+        const layer = createLayer({
+          name: file.name.replace(/\.[^/.]+$/, ''), // Remove extension
+          width: img.width,
+          height: img.height,
+        });
+
+        if (layer.canvas) {
+          const ctx = layer.canvas.getContext('2d');
+          if (ctx) {
+            ctx.drawImage(img, 0, 0);
+          }
+        }
+
+        toast.success(`Imported ${file.name} as new layer`);
+      } catch (error) {
+        console.error('Failed to import image:', error);
+        toast.error('Failed to import image file');
+      } finally {
+        setLoading(false);
+      }
+    },
+    [createLayer, setLoading]
+  );
+
   /**
    * Export current view as image
    */
@@ -223,6 +257,7 @@ export function useFileOperations() {
     createNewImage,
     openImage,
     openProject,
+    importImage,
     exportImage,
     saveProject,
     handleFileInput,