feat: implement Phase 12.3 - Project Export/Import

Added full export/import functionality for projects:

Export Features:
- Export button for each project in Projects dialog
- Downloads project as JSON file with all data
- Includes tracks, audio buffers, effects, automation, settings
- Filename format: {project_name}_{timestamp}.json

Import Features:
- Import button in Projects dialog header
- File picker for .json files
- Automatically generates new project ID to avoid conflicts
- Appends "(Imported)" to project name
- Preserves all project data

This enables:
- Backup of projects outside the browser
- Sharing projects with collaborators
- Migration between computers/browsers
- Version snapshots at different stages

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

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

components/dialogs/ProjectsDialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { X, Plus, Trash2, Copy, FolderOpen } from 'lucide-react';
+import { X, Plus, Trash2, Copy, FolderOpen, Download, Upload } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import type { ProjectMetadata } from '@/lib/storage/db';
 import { formatDuration } from '@/lib/audio/decoder';
@@ -14,6 +14,8 @@ export interface ProjectsDialogProps {
   onLoadProject: (projectId: string) => void;
   onDeleteProject: (projectId: string) => void;
   onDuplicateProject: (projectId: string) => void;
+  onExportProject: (projectId: string) => void;
+  onImportProject: () => void;
 }
 
 export function ProjectsDialog({
@@ -24,6 +26,8 @@ export function ProjectsDialog({
   onLoadProject,
   onDeleteProject,
   onDuplicateProject,
+  onExportProject,
+  onImportProject,
 }: ProjectsDialogProps) {
   if (!open) return null;
 
@@ -44,6 +48,15 @@ export function ProjectsDialog({
         <div className="flex items-center justify-between p-6 border-b border-border">
           <h2 className="text-lg font-semibold text-foreground">Projects</h2>
           <div className="flex items-center gap-2">
+            <Button
+              onClick={onImportProject}
+              variant="outline"
+              size="sm"
+              className="gap-2"
+            >
+              <Upload className="h-4 w-4" />
+              Import
+            </Button>
             <Button
               onClick={onNewProject}
               variant="default"
@@ -111,6 +124,13 @@ export function ProjectsDialog({
                       >
                         Open
                       </button>
+                      <button
+                        onClick={() => onExportProject(project.id)}
+                        className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors"
+                        title="Export project"
+                      >
+                        <Download className="h-4 w-4" />
+                      </button>
                       <button
                         onClick={() => onDuplicateProject(project.id)}
                         className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors"

components/editor/AudioEditor.tsx

@@ -42,6 +42,8 @@ import {
   listProjects,
   removeProject,
   duplicateProject,
+  exportProjectAsJSON,
+  importProjectFromJSON,
   type ProjectMetadata,
 } from '@/lib/storage/projects';
 import { getAudioContext } from '@/lib/audio/context';
@@ -1110,6 +1112,70 @@ export function AudioEditor() {
     }
   }, [projects, loadProjectsList, addToast]);
 
+  // Export project
+  const handleExportProject = React.useCallback(async (projectId: string) => {
+    try {
+      const project = projects.find(p => p.id === projectId);
+      if (!project) return;
+
+      await exportProjectAsJSON(projectId);
+
+      addToast({
+        title: 'Project Exported',
+        description: `"${project.name}" exported successfully`,
+        variant: 'success',
+        duration: 2000,
+      });
+    } catch (error) {
+      console.error('Failed to export project:', error);
+      addToast({
+        title: 'Export Failed',
+        description: 'Could not export project',
+        variant: 'error',
+        duration: 3000,
+      });
+    }
+  }, [projects, addToast]);
+
+  // Import project
+  const handleImportProject = React.useCallback(async () => {
+    try {
+      // Create file input
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = '.json';
+
+      input.onchange = async (e) => {
+        const file = (e.target as HTMLInputElement).files?.[0];
+        if (!file) return;
+
+        try {
+          const projectId = await importProjectFromJSON(file);
+          await loadProjectsList();
+
+          addToast({
+            title: 'Project Imported',
+            description: 'Project imported successfully',
+            variant: 'success',
+            duration: 2000,
+          });
+        } catch (error) {
+          console.error('Failed to import project:', error);
+          addToast({
+            title: 'Import Failed',
+            description: 'Could not import project file',
+            variant: 'error',
+            duration: 3000,
+          });
+        }
+      };
+
+      input.click();
+    } catch (error) {
+      console.error('Failed to open file picker:', error);
+    }
+  }, [loadProjectsList, addToast]);
+
   // Zoom controls
   const handleZoomIn = () => {
     setZoom((prev) => Math.min(20, prev + 1));
@@ -1586,6 +1652,8 @@ export function AudioEditor() {
         onLoadProject={handleLoadProject}
         onDeleteProject={handleDeleteProject}
         onDuplicateProject={handleDuplicateProject}
+        onExportProject={handleExportProject}
+        onImportProject={handleImportProject}
       />
     </>
   );