feat(phase-6): implement comprehensive file operations system

This commit completes Phase 6 of the paint-ui implementation, adding full
file import/export capabilities with drag-drop and clipboard support.

**New Files:**
- lib/file-utils.ts: Core file operations (open, save, export, project format)
- hooks/use-file-operations.ts: React hook for file operations
- hooks/use-drag-drop.ts: Drag & drop state management
- hooks/use-clipboard.ts: Clipboard paste event handling
- components/editor/file-menu.tsx: File menu dropdown component
- components/modals/export-dialog.tsx: Export dialog with format/quality options
- components/modals/new-image-dialog.tsx: New image dialog with presets
- components/modals/index.ts: Modals barrel export

**Updated Files:**
- components/editor/editor-layout.tsx: Integrated FileMenu, drag-drop overlay, clipboard paste
- components/editor/index.ts: Added file-menu export

**Features:**
- ✨ Create new images with dimension presets (Full HD, HD, 800x600, custom)
- ✨ Open image files (PNG, JPG, WEBP) as new layers
- ✨ Save/load .paint project files (JSON with base64 layer data)
- ✨ Export as PNG/JPEG/WEBP with quality control
- ✨ Drag & drop file upload with visual overlay
- ✨ Clipboard paste support (Ctrl+V)
- ✨ File type validation and error handling
- ✨ DataTransfer API integration for unified file handling

**Project File Format (.paint):**
- JSON structure with version, dimensions, layer metadata
- Base64-encoded PNG data for each layer
- Preserves layer properties (opacity, blend mode, order, visibility)

Build verified: ✓ Compiled successfully in 1233ms

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

lib/file-utils.ts

@@ -0,0 +1,204 @@
+import { saveAs } from 'file-saver';
+import type { Layer } from '@/types';
+import { loadImageFromFile } from './canvas-utils';
+
+/**
+ * Project file format
+ */
+export interface ProjectData {
+  version: string;
+  width: number;
+  height: number;
+  layers: {
+    id: string;
+    name: string;
+    visible: boolean;
+    opacity: number;
+    blendMode: string;
+    order: number;
+    locked: boolean;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    imageData?: string; // Base64 encoded PNG
+  }[];
+  metadata: {
+    createdAt: number;
+    modifiedAt: number;
+  };
+}
+
+/**
+ * Open image file and return HTMLImageElement
+ */
+export async function openImageFile(file: File): Promise<HTMLImageElement> {
+  return loadImageFromFile(file);
+}
+
+/**
+ * Handle drag & drop or paste files
+ */
+export function extractImageFromDataTransfer(
+  dataTransfer: DataTransfer
+): File | null {
+  const items = Array.from(dataTransfer.items);
+  const files = Array.from(dataTransfer.files);
+
+  // Check for image in items first
+  for (const item of items) {
+    if (item.type.startsWith('image/')) {
+      const file = item.getAsFile();
+      if (file) return file;
+    }
+  }
+
+  // Check files
+  for (const file of files) {
+    if (file.type.startsWith('image/')) {
+      return file;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Export canvas as image file
+ */
+export async function exportCanvasAsImage(
+  canvas: HTMLCanvasElement,
+  format: 'png' | 'jpeg' | 'webp' = 'png',
+  quality = 1,
+  filename = 'image'
+): Promise<void> {
+  const mimeType = `image/${format}`;
+  const extension = format === 'jpeg' ? 'jpg' : format;
+
+  const blob = await new Promise<Blob | null>((resolve) => {
+    canvas.toBlob((blob) => resolve(blob), mimeType, quality);
+  });
+
+  if (blob) {
+    saveAs(blob, `${filename}.${extension}`);
+  }
+}
+
+/**
+ * Export project as JSON with layer data
+ */
+export async function exportProject(
+  layers: Layer[],
+  width: number,
+  height: number,
+  filename = 'project'
+): Promise<void> {
+  const projectData: ProjectData = {
+    version: '1.0.0',
+    width,
+    height,
+    layers: await Promise.all(
+      layers.map(async (layer) => ({
+        id: layer.id,
+        name: layer.name,
+        visible: layer.visible,
+        opacity: layer.opacity,
+        blendMode: layer.blendMode,
+        order: layer.order,
+        locked: layer.locked,
+        width: layer.width,
+        height: layer.height,
+        x: layer.x,
+        y: layer.y,
+        imageData: layer.canvas
+          ? layer.canvas.toDataURL('image/png')
+          : undefined,
+      }))
+    ),
+    metadata: {
+      createdAt: Date.now(),
+      modifiedAt: Date.now(),
+    },
+  };
+
+  const json = JSON.stringify(projectData, null, 2);
+  const blob = new Blob([json], { type: 'application/json' });
+  saveAs(blob, `${filename}.paint`);
+}
+
+/**
+ * Load project from JSON file
+ */
+export async function loadProject(file: File): Promise<ProjectData> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      try {
+        const json = e.target?.result as string;
+        const data: ProjectData = JSON.parse(json);
+        resolve(data);
+      } catch (error) {
+        reject(new Error('Invalid project file'));
+      }
+    };
+
+    reader.onerror = () => reject(new Error('Failed to read file'));
+    reader.readAsText(file);
+  });
+}
+
+/**
+ * Create canvas from base64 image data
+ */
+export async function createCanvasFromDataURL(
+  dataURL: string,
+  width: number,
+  height: number
+): Promise<HTMLCanvasElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext('2d');
+
+      if (ctx) {
+        ctx.drawImage(img, 0, 0);
+        resolve(canvas);
+      } else {
+        reject(new Error('Failed to get 2D context'));
+      }
+    };
+
+    img.onerror = () => reject(new Error('Failed to load image'));
+    img.src = dataURL;
+  });
+}
+
+/**
+ * Get file extension from filename
+ */
+export function getFileExtension(filename: string): string {
+  const parts = filename.split('.');
+  return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : '';
+}
+
+/**
+ * Validate file type
+ */
+export function isImageFile(file: File): boolean {
+  return file.type.startsWith('image/');
+}
+
+/**
+ * Validate project file
+ */
+export function isProjectFile(file: File): boolean {
+  return (
+    file.type === 'application/json' ||
+    getFileExtension(file.name) === 'paint'
+  );
+}