feat: add media converter app and fix compilation errors

app/(app)/media/page.tsx

@@ -0,0 +1,17 @@
+import { FileConverter } from '@/components/media/FileConverter';
+
+export default function MediaPage() {
+  return (
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
+        <div>
+          <h1 className="text-4xl font-bold mb-2">Media Converter</h1>
+          <p className="text-muted-foreground">
+            Professional browser-based media conversion for video, audio, and images
+          </p>
+        </div>
+        <FileConverter />
+      </div>
+    </div>
+  );
+}

app/(app)/pastel/batch/page.tsx

@@ -10,8 +10,8 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Input } from '@/components/ui/input';
-import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
+import { PaletteGrid } from '@/components/pastel/PaletteGrid';
-import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
+import { ExportMenu } from '@/components/pastel/ExportMenu';
 import { useLighten, useDarken, useSaturate, useDesaturate, useRotate } from '@/lib/pastel/api/queries';
 import { Loader2, Upload, Download } from 'lucide-react';
 import { toast } from 'sonner';

app/(app)/pastel/colorblind/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useState } from 'react';
-import { ColorPicker } from '@/components/pastel/color/ColorPicker';
+import { ColorPicker } from '@/components/pastel/ColorPicker';
-import { ColorDisplay } from '@/components/pastel/color/ColorDisplay';
+import { ColorDisplay } from '@/components/pastel/ColorDisplay';
 import { Button } from '@/components/ui/button';
 import {
   Select,

app/(app)/pastel/contrast/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { ColorPicker } from '@/components/pastel/color/ColorPicker';
+import { ColorPicker } from '@/components/pastel/ColorPicker';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { getContrastRatio, hexToRgb, checkWCAGCompliance } from '@/lib/pastel/utils/color';

app/(app)/pastel/distinct/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useState } from 'react';
-import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
+import { PaletteGrid } from '@/components/pastel/PaletteGrid';
-import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
+import { ExportMenu } from '@/components/pastel/ExportMenu';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {

app/(app)/pastel/gradient/page.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { useState } from 'react';
-import { ColorPicker } from '@/components/pastel/color/ColorPicker';
+import { ColorPicker } from '@/components/pastel/ColorPicker';
-import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
+import { PaletteGrid } from '@/components/pastel/PaletteGrid';
-import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
+import { ExportMenu } from '@/components/pastel/ExportMenu';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { useGenerateGradient } from '@/lib/pastel/api/queries';

app/(app)/pastel/harmony/page.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { useState } from 'react';
-import { ColorPicker } from '@/components/pastel/color/ColorPicker';
+import { ColorPicker } from '@/components/pastel/ColorPicker';
-import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
+import { PaletteGrid } from '@/components/pastel/PaletteGrid';
-import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
+import { ExportMenu } from '@/components/pastel/ExportMenu';
 import { Button } from '@/components/ui/button';
 import {
   Select,

app/(app)/pastel/names/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useMemo } from 'react';
-import { ColorSwatch } from '@/components/pastel/color/ColorSwatch';
+import { ColorSwatch } from '@/components/pastel/ColorSwatch';
 import { Input } from '@/components/ui/input';
 import {
   Select,

app/(app)/pastel/page.tsx

@@ -2,10 +2,10 @@
 
 import { useState, useEffect, Suspense } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
-import { ColorPicker } from '@/components/pastel/color/ColorPicker';
+import { ColorPicker } from '@/components/pastel/ColorPicker';
-import { ColorDisplay } from '@/components/pastel/color/ColorDisplay';
+import { ColorDisplay } from '@/components/pastel/ColorDisplay';
-import { ColorInfo } from '@/components/pastel/color/ColorInfo';
+import { ColorInfo } from '@/components/pastel/ColorInfo';
-import { ManipulationPanel } from '@/components/pastel/tools/ManipulationPanel';
+import { ManipulationPanel } from '@/components/pastel/ManipulationPanel';
 import { useColorInfo } from '@/lib/pastel/api/queries';
 import { useColorHistory } from '@/lib/pastel/stores/historyStore';
 import { Loader2, Share2, History, X } from 'lucide-react';

app/(app)/pastel/textcolor/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useState } from 'react';
-import { ColorPicker } from '@/components/pastel/color/ColorPicker';
+import { ColorPicker } from '@/components/pastel/ColorPicker';
-import { ColorDisplay } from '@/components/pastel/color/ColorDisplay';
+import { ColorDisplay } from '@/components/pastel/ColorDisplay';
 import { Button } from '@/components/ui/button';
 import { useTextColor } from '@/lib/pastel/api/queries';
 import { Loader2, Palette, Plus, X, CheckCircle2, XCircle } from 'lucide-react';

app/(app)/units/page.tsx

@@ -1,4 +1,4 @@
-import MainConverter from '@/components/units/converter/MainConverter';
+import MainConverter from '@/components/units/MainConverter';
 
 export default function UnitsPage() {
   return (

app/globals.css

@@ -219,6 +219,10 @@ html {
   background: linear-gradient(135deg, #eab308 0%, #f59e0b 100%);
 }
 
+@utility gradient-green-teal {
+  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
+}
+
 @utility gradient-brand {
   background: linear-gradient(to right, #a78bfa, #f472b6, #22d3ee);
 }

components/ToolsGrid.tsx

@@ -50,6 +50,19 @@ const tools = [
       </svg>
     ),
   },
+  {
+    title: 'Media',
+    description: 'Modern browser-based file converter powered by WebAssembly. Convert videos, images, and audio locally without server uploads. Privacy-first with no file size limits.',
+    url: '/media',
+    gradient: 'gradient-green-teal',
+    accentColor: '#10b981',
+    badges: ['Open Source', 'Converter', 'Free'],
+    icon: (
+      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+      </svg>
+    ),
+  },
 ];
 
 export default function ToolsGrid() {
@@ -73,7 +86,7 @@ export default function ToolsGrid() {
         </motion.div>
 
         {/* Tools grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           {tools.map((tool, index) => (
             <ToolCard
               key={tool.title}

components/layout/AppSidebar.tsx

@@ -55,6 +55,13 @@ const FigletIcon = (props: any) => (
   </svg>
 );
 
+
+const MediaIcon = (props: any) => (
+  <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+  </svg>
+);
+
 const navigation: NavGroup[] = [
   {
     label: 'Toolkit',
@@ -84,6 +91,11 @@ const navigation: NavGroup[] = [
           { title: 'Batch Operations', href: '/pastel/batch' },
         ]
       },
+      { 
+        title: 'Media Converter', 
+        href: '/media', 
+        icon: <MediaIcon className="h-4 w-4" /> 
+      },
     ]
   }
 ];

components/media/ConversionHistory.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import * as React from 'react';
+import { History, Trash2, ArrowRight, Clock } from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { formatFileSize } from '@/lib/media/utils/fileUtils';
+import { getHistory, clearHistory, removeHistoryItem } from '@/lib/media/storage/history';
+import type { ConversionHistoryItem } from '@/types/media';
+
+export function ConversionHistory() {
+  const [history, setHistory] = React.useState<ConversionHistoryItem[]>([]);
+
+  // Load history on mount and listen for updates
+  React.useEffect(() => {
+    const loadHistory = () => {
+      const items = getHistory();
+      setHistory(items);
+    };
+
+    loadHistory();
+
+    // Listen for storage changes (e.g., from other tabs)
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === 'convert-ui-history') {
+        loadHistory();
+      }
+    };
+
+    // Listen for custom event (same-page updates)
+    const handleHistoryUpdate = () => {
+      loadHistory();
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    window.addEventListener('conversionHistoryUpdated', handleHistoryUpdate);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+      window.removeEventListener('conversionHistoryUpdated', handleHistoryUpdate);
+    };
+  }, []);
+
+  const handleClearHistory = () => {
+    if (confirm('Are you sure you want to clear all conversion history?')) {
+      clearHistory();
+      setHistory([]);
+    }
+  };
+
+  const handleRemoveItem = (id: string) => {
+    removeHistoryItem(id);
+    setHistory((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const formatTimestamp = (timestamp: number) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'Just now';
+    if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? 's' : ''} ago`;
+    if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+    if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+
+    return date.toLocaleDateString();
+  };
+
+  if (history.length === 0) {
+    return (
+      <div className="w-full max-w-4xl mx-auto">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <History className="h-5 w-5" />
+              Conversion History
+            </CardTitle>
+            <CardDescription>Your recent conversions will appear here</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="text-center py-12 text-muted-foreground">
+              <History className="h-12 w-12 mx-auto mb-4 opacity-50" />
+              <p>No conversion history yet</p>
+              <p className="text-sm mt-1">Convert some files to see them here</p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full max-w-4xl mx-auto">
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="flex items-center gap-2">
+                <History className="h-5 w-5" />
+                Conversion History
+              </CardTitle>
+              <CardDescription>
+                Recent conversions ({history.length} item{history.length > 1 ? 's' : ''})
+              </CardDescription>
+            </div>
+            <Button variant="outline" size="sm" onClick={handleClearHistory}>
+              <Trash2 className="h-4 w-4 mr-2" />
+              Clear All
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {history.map((item) => (
+              <div
+                key={item.id}
+                className="border border-border rounded-lg p-4 hover:bg-muted/50 transition-colors"
+              >
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    {/* File conversion info */}
+                    <div className="flex items-center gap-2 mb-2">
+                      <span className="text-sm font-medium text-foreground truncate">
+                        {item.inputFileName}
+                      </span>
+                      <ArrowRight className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                      <span className="text-sm font-medium text-foreground truncate">
+                        {item.outputFileName}
+                      </span>
+                    </div>
+
+                    {/* Format conversion */}
+                    <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+                      <span className="px-2 py-0.5 bg-muted rounded">
+                        {item.inputFormat}
+                      </span>
+                      <ArrowRight className="h-3 w-3" />
+                      <span className="px-2 py-0.5 bg-muted rounded">
+                        {item.outputFormat}
+                      </span>
+                      <span>•</span>
+                      <span>{formatFileSize(item.fileSize)}</span>
+                    </div>
+
+                    {/* Timestamp */}
+                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                      <Clock className="h-3 w-3" />
+                      <span>{formatTimestamp(item.timestamp)}</span>
+                    </div>
+                  </div>
+
+                  {/* Remove button */}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleRemoveItem(item.id)}
+                    className="flex-shrink-0"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                    <span className="sr-only">Remove</span>
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

components/media/ConversionOptions.tsx

@@ -0,0 +1,456 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronDown, ChevronUp, Sparkles } from 'lucide-react';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Slider } from '@/components/ui/slider';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { ConversionOptions, ConversionFormat } from '@/types/media';
+
+interface ConversionOptionsProps {
+  inputFormat: ConversionFormat;
+  outputFormat: ConversionFormat;
+  options: ConversionOptions;
+  onOptionsChange: (options: ConversionOptions) => void;
+  disabled?: boolean;
+}
+
+interface QualityPreset {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  options: ConversionOptions;
+}
+
+export function ConversionOptionsPanel({
+  inputFormat,
+  outputFormat,
+  options,
+  onOptionsChange,
+  disabled = false,
+}: ConversionOptionsProps) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [selectedPreset, setSelectedPreset] = React.useState<string | null>(null);
+
+  // Quality presets based on output format category
+  const getPresets = (): QualityPreset[] => {
+    const category = outputFormat.category;
+
+    if (category === 'video') {
+      return [
+        {
+          id: 'high-quality',
+          name: 'High Quality',
+          description: 'Best quality, larger file size',
+          icon: '⭐',
+          options: {
+            videoBitrate: '5M',
+            videoCodec: outputFormat.extension === 'webm' ? 'libvpx' : 'libx264',
+            audioBitrate: '192k',
+            audioCodec: outputFormat.extension === 'webm' ? 'libvorbis' : 'aac',
+          },
+        },
+        {
+          id: 'balanced',
+          name: 'Balanced',
+          description: 'Good quality, moderate size',
+          icon: '⚖️',
+          options: {
+            videoBitrate: '2M',
+            videoCodec: outputFormat.extension === 'webm' ? 'libvpx' : 'libx264',
+            audioBitrate: '128k',
+            audioCodec: outputFormat.extension === 'webm' ? 'libvorbis' : 'aac',
+          },
+        },
+        {
+          id: 'small-file',
+          name: 'Small File',
+          description: 'Smaller size, lower quality',
+          icon: '📦',
+          options: {
+            videoBitrate: '1M',
+            videoCodec: outputFormat.extension === 'webm' ? 'libvpx' : 'libx264',
+            audioBitrate: '96k',
+            audioCodec: outputFormat.extension === 'webm' ? 'libvorbis' : 'aac',
+          },
+        },
+        {
+          id: 'web-optimized',
+          name: 'Web Optimized',
+          description: 'Fast loading for web',
+          icon: '🌐',
+          options: {
+            videoBitrate: '1.5M',
+            videoCodec: 'libvpx',
+            audioBitrate: '128k',
+            audioCodec: 'libvorbis',
+            videoResolution: '720x-1',
+          },
+        },
+      ];
+    } else if (category === 'audio') {
+      return [
+        {
+          id: 'high-quality',
+          name: 'High Quality',
+          description: 'Best audio quality',
+          icon: '⭐',
+          options: {
+            audioBitrate: '320k',
+            audioCodec: outputFormat.extension === 'mp3' ? 'libmp3lame' : 'default',
+          },
+        },
+        {
+          id: 'balanced',
+          name: 'Balanced',
+          description: 'Good quality, smaller size',
+          icon: '⚖️',
+          options: {
+            audioBitrate: '192k',
+            audioCodec: outputFormat.extension === 'mp3' ? 'libmp3lame' : 'default',
+          },
+        },
+        {
+          id: 'small-file',
+          name: 'Small File',
+          description: 'Minimum file size',
+          icon: '📦',
+          options: {
+            audioBitrate: '128k',
+            audioCodec: outputFormat.extension === 'mp3' ? 'libmp3lame' : 'default',
+          },
+        },
+      ];
+    } else if (category === 'image') {
+      return [
+        {
+          id: 'high-quality',
+          name: 'High Quality',
+          description: 'Best image quality',
+          icon: '⭐',
+          options: {
+            imageQuality: 95,
+          },
+        },
+        {
+          id: 'balanced',
+          name: 'Balanced',
+          description: 'Good quality',
+          icon: '⚖️',
+          options: {
+            imageQuality: 85,
+          },
+        },
+        {
+          id: 'web-optimized',
+          name: 'Web Optimized',
+          description: 'Optimized for web',
+          icon: '🌐',
+          options: {
+            imageQuality: 75,
+          },
+        },
+      ];
+    }
+
+    return [];
+  };
+
+  const presets = getPresets();
+
+  const handlePresetClick = (preset: QualityPreset) => {
+    setSelectedPreset(preset.id);
+    onOptionsChange({ ...options, ...preset.options });
+  };
+
+  const handleOptionChange = (key: string, value: any) => {
+    setSelectedPreset(null); // Clear preset when manual change
+    onOptionsChange({ ...options, [key]: value });
+  };
+
+  const renderVideoOptions = () => (
+    <div className="space-y-4">
+      {/* Video Codec */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-foreground block">Video Codec</label>
+        <Select
+          value={options.videoCodec || 'default'}
+          onValueChange={(value) => handleOptionChange('videoCodec', value === 'default' ? undefined : value)}
+          disabled={disabled}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select video codec" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="default">Auto (Recommended)</SelectItem>
+            <SelectItem value="libx264">H.264 (MP4, AVI, MOV)</SelectItem>
+            <SelectItem value="libx265">H.265 (MP4)</SelectItem>
+            <SelectItem value="libvpx">VP8 (WebM)</SelectItem>
+            <SelectItem value="libvpx-vp9">VP9 (WebM)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Video Bitrate */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium text-foreground">Video Bitrate</label>
+          <span className="text-xs text-muted-foreground">{options.videoBitrate || '2M'}</span>
+        </div>
+        <Slider
+          min={0.5}
+          max={10}
+          step={0.5}
+          value={[parseFloat(options.videoBitrate?.replace('M', '') || '2')]}
+          onValueChange={(vals) => handleOptionChange('videoBitrate', `${vals[0]}M`)}
+          disabled={disabled}
+        />
+        <p className="text-xs text-muted-foreground">Higher bitrate = better quality, larger file</p>
+      </div>
+
+      {/* Resolution */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-foreground block">Resolution</label>
+        <Select
+          value={options.videoResolution || 'original'}
+          onValueChange={(value) => handleOptionChange('videoResolution', value === 'original' ? undefined : value)}
+          disabled={disabled}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select resolution" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="original">Original</SelectItem>
+            <SelectItem value="1920x-1">1080p (1920x1080)</SelectItem>
+            <SelectItem value="1280x-1">720p (1280x720)</SelectItem>
+            <SelectItem value="854x-1">480p (854x480)</SelectItem>
+            <SelectItem value="640x-1">360p (640x360)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* FPS */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-foreground block">Frame Rate (FPS)</label>
+        <Select
+          value={options.videoFps?.toString() || 'original'}
+          onValueChange={(value) => handleOptionChange('videoFps', value === 'original' ? undefined : parseInt(value))}
+          disabled={disabled}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select frame rate" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="original">Original</SelectItem>
+            <SelectItem value="60">60 fps</SelectItem>
+            <SelectItem value="30">30 fps</SelectItem>
+            <SelectItem value="24">24 fps</SelectItem>
+            <SelectItem value="15">15 fps</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Audio Bitrate */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium text-foreground">Audio Bitrate</label>
+          <span className="text-xs text-muted-foreground">{options.audioBitrate || '128k'}</span>
+        </div>
+        <Slider
+          min={64}
+          max={320}
+          step={32}
+          value={[parseInt(options.audioBitrate?.replace('k', '') || '128')]}
+          onValueChange={(vals) => handleOptionChange('audioBitrate', `${vals[0]}k`)}
+          disabled={disabled}
+        />
+      </div>
+    </div>
+  );
+
+  const renderAudioOptions = () => (
+    <div className="space-y-4">
+      {/* Audio Codec */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-foreground block">Audio Codec</label>
+        <Select
+          value={options.audioCodec || 'default'}
+          onValueChange={(value) => handleOptionChange('audioCodec', value === 'default' ? undefined : value)}
+          disabled={disabled}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select audio codec" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="default">Auto (Recommended)</SelectItem>
+            <SelectItem value="libmp3lame">MP3 (LAME)</SelectItem>
+            <SelectItem value="aac">AAC</SelectItem>
+            <SelectItem value="libvorbis">Vorbis (OGG)</SelectItem>
+            <SelectItem value="libopus">Opus</SelectItem>
+            <SelectItem value="flac">FLAC (Lossless)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Bitrate */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium text-foreground">Bitrate</label>
+          <span className="text-xs text-muted-foreground">{options.audioBitrate || '192k'}</span>
+        </div>
+        <Slider
+          min={64}
+          max={320}
+          step={32}
+          value={[parseInt(options.audioBitrate?.replace('k', '') || '192')]}
+          onValueChange={(vals) => handleOptionChange('audioBitrate', `${vals[0]}k`)}
+          disabled={disabled}
+        />
+      </div>
+
+      {/* Sample Rate */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-foreground block">Sample Rate</label>
+        <Select
+          value={options.audioSampleRate?.toString() || 'original'}
+          onValueChange={(value) => handleOptionChange('audioSampleRate', value === 'original' ? undefined : parseInt(value))}
+          disabled={disabled}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select sample rate" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="original">Original</SelectItem>
+            <SelectItem value="48000">48 kHz (Studio)</SelectItem>
+            <SelectItem value="44100">44.1 kHz (CD Quality)</SelectItem>
+            <SelectItem value="22050">22.05 kHz</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Channels */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-foreground block">Channels</label>
+        <Select
+          value={options.audioChannels?.toString() || 'original'}
+          onValueChange={(value) => handleOptionChange('audioChannels', value === 'original' ? undefined : parseInt(value))}
+          disabled={disabled}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select channels" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="original">Original</SelectItem>
+            <SelectItem value="2">Stereo (2 channels)</SelectItem>
+            <SelectItem value="1">Mono (1 channel)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+
+  const renderImageOptions = () => (
+    <div className="space-y-4">
+      {/* Quality */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium text-foreground">Quality</label>
+          <span className="text-xs text-muted-foreground">{options.imageQuality || 85}%</span>
+        </div>
+        <Slider
+          min={1}
+          max={100}
+          step={1}
+          value={[options.imageQuality || 85]}
+          onValueChange={(vals) => handleOptionChange('imageQuality', vals[0])}
+          disabled={disabled}
+        />
+      </div>
+
+      {/* Width */}
+      <div>
+        <label className="text-sm font-medium text-foreground mb-2 block">Width (px)</label>
+        <input
+          type="number"
+          value={options.imageWidth || ''}
+          onChange={(e) => handleOptionChange('imageWidth', e.target.value ? parseInt(e.target.value) : undefined)}
+          placeholder="Original"
+          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+          disabled={disabled}
+        />
+        <p className="text-xs text-muted-foreground mt-1">Leave empty to keep original</p>
+      </div>
+
+      {/* Height */}
+      <div>
+        <label className="text-sm font-medium text-foreground mb-2 block">Height (px)</label>
+        <input
+          type="number"
+          value={options.imageHeight || ''}
+          onChange={(e) => handleOptionChange('imageHeight', e.target.value ? parseInt(e.target.value) : undefined)}
+          placeholder="Original"
+          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+          disabled={disabled}
+        />
+        <p className="text-xs text-muted-foreground mt-1">Leave empty to maintain aspect ratio</p>
+      </div>
+    </div>
+  );
+
+  return (
+    <Card className="p-4">
+      {/* Presets Section */}
+      {presets.length > 0 && (
+        <div className="mb-4">
+          <div className="flex items-center gap-2 mb-3">
+            <Sparkles className="h-4 w-4 text-primary" />
+            <h3 className="text-sm font-semibold">Quality Presets</h3>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
+            {presets.map((preset) => (
+              <Button
+                key={preset.id}
+                onClick={() => handlePresetClick(preset)}
+                variant={selectedPreset === preset.id ? 'default' : 'outline'}
+                size="sm"
+                className="flex flex-col h-auto py-3 px-3 text-left items-start"
+                disabled={disabled}
+              >
+                <span className="text-base mb-1">{preset.icon}</span>
+                <span className="text-xs font-medium">{preset.name}</span>
+                <span className="text-xs text-muted-foreground mt-1">{preset.description}</span>
+              </Button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Advanced Options Toggle */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between text-sm font-medium text-foreground hover:text-primary transition-colors mb-3"
+        disabled={disabled}
+      >
+        <span>Advanced Options</span>
+        {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+      </button>
+
+      {/* Advanced Options Panel */}
+      {isExpanded && (
+        <div className="pt-3 border-t border-border">
+          {outputFormat.category === 'video' && renderVideoOptions()}
+          {outputFormat.category === 'audio' && renderAudioOptions()}
+          {outputFormat.category === 'image' && renderImageOptions()}
+        </div>
+      )}
+    </Card>
+  );
+}

components/media/ConversionPreview.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import * as React from 'react';
+import { Download, CheckCircle, XCircle, Loader2, Clock, TrendingUp, FileCheck2, ArrowRight, RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { downloadBlob, formatFileSize, generateOutputFilename } from '@/lib/media/utils/fileUtils';
+import type { ConversionJob } from '@/types/media';
+
+export interface ConversionPreviewProps {
+  job: ConversionJob;
+  onDownload?: () => void;
+  onRetry?: () => void;
+}
+
+export function ConversionPreview({ job, onDownload, onRetry }: ConversionPreviewProps) {
+  const [previewUrl, setPreviewUrl] = React.useState<string | null>(null);
+  const [elapsedTime, setElapsedTime] = React.useState(0);
+  const [estimatedTimeRemaining, setEstimatedTimeRemaining] = React.useState<number | null>(null);
+
+  // Timer for elapsed time and estimation
+  React.useEffect(() => {
+    if (job.status === 'processing' || job.status === 'loading') {
+      const interval = setInterval(() => {
+        if (job.startTime) {
+          const elapsed = Date.now() - job.startTime;
+          setElapsedTime(elapsed);
+
+          // Estimate time remaining based on progress
+          if (job.progress > 5 && job.progress < 100) {
+            const progressRate = job.progress / elapsed;
+            const remainingProgress = 100 - job.progress;
+            const estimated = remainingProgress / progressRate;
+            setEstimatedTimeRemaining(estimated);
+          }
+        }
+      }, 100);
+
+      return () => clearInterval(interval);
+    } else {
+      setEstimatedTimeRemaining(null);
+    }
+  }, [job.status, job.startTime, job.progress]);
+
+  // Create preview URL for result
+  React.useEffect(() => {
+    if (job.result && job.status === 'completed') {
+      console.log('[Preview] Creating object URL for blob');
+      const url = URL.createObjectURL(job.result);
+      setPreviewUrl(url);
+      console.log('[Preview] Object URL created:', url);
+
+      return () => {
+        console.log('[Preview] Revoking object URL:', url);
+        URL.revokeObjectURL(url);
+      };
+    } else {
+      setPreviewUrl(null);
+    }
+  }, [job.result, job.status]);
+
+  const handleDownload = () => {
+    if (job.result) {
+      const filename = generateOutputFilename(job.inputFile.name, job.outputFormat.extension);
+      downloadBlob(job.result, filename);
+      onDownload?.();
+    }
+  };
+
+  const renderPreview = () => {
+    if (!previewUrl || !job.result) return null;
+
+    const category = job.outputFormat.category;
+
+    // Log blob details for debugging
+    console.log('[Preview] Blob details:', {
+      size: job.result.size,
+      type: job.result.type,
+      previewUrl,
+      outputFormat: job.outputFormat.extension,
+    });
+
+    switch (category) {
+      case 'image':
+        return (
+          <div className="mt-4 rounded-lg overflow-hidden bg-muted/30 flex items-center justify-center p-4">
+            <img
+              src={previewUrl}
+              alt="Converted image preview"
+              className="max-w-full max-h-64 object-contain"
+              onError={(e) => {
+                console.error('[Preview] Image failed to load:', {
+                  src: previewUrl,
+                  blobSize: job.result?.size,
+                  blobType: job.result?.type,
+                  error: e,
+                });
+              }}
+              onLoad={() => {
+                console.log('[Preview] Image loaded successfully');
+              }}
+            />
+          </div>
+        );
+
+      case 'video':
+        return (
+          <div className="mt-4 rounded-lg overflow-hidden bg-muted/30">
+            <video src={previewUrl} controls className="w-full max-h-64">
+              Your browser does not support video playback.
+            </video>
+          </div>
+        );
+
+      case 'audio':
+        return (
+          <div className="mt-4 rounded-lg overflow-hidden bg-muted/30 p-4">
+            <audio src={previewUrl} controls className="w-full">
+              Your browser does not support audio playback.
+            </audio>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  const formatTime = (ms: number) => {
+    const seconds = Math.floor(ms / 1000);
+    if (seconds < 60) return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}m ${remainingSeconds}s`;
+  };
+
+  const renderStatus = () => {
+    switch (job.status) {
+      case 'loading':
+        return (
+          <div className="space-y-3">
+            <div className="flex items-center gap-2 text-info">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              <span className="text-sm font-medium">Loading WASM converter...</span>
+            </div>
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <Clock className="h-3.5 w-3.5" />
+              <span>Elapsed: {formatTime(elapsedTime)}</span>
+            </div>
+          </div>
+        );
+
+      case 'processing':
+        return (
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2 text-info">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span className="text-sm font-medium">Converting...</span>
+              </div>
+              <span className="text-xs text-muted-foreground">{job.progress}%</span>
+            </div>
+            <Progress value={job.progress} />
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 text-xs text-muted-foreground">
+              <div className="flex items-center gap-2">
+                <Clock className="h-3.5 w-3.5" />
+                <span>Elapsed: {formatTime(elapsedTime)}</span>
+              </div>
+              {estimatedTimeRemaining && (
+                <div className="flex items-center gap-2">
+                  <TrendingUp className="h-3.5 w-3.5" />
+                  <span>~{formatTime(estimatedTimeRemaining)} remaining</span>
+                </div>
+              )}
+            </div>
+          </div>
+        );
+
+      case 'completed':
+        const inputSize = job.inputFile.size;
+        const outputSize = job.result?.size || 0;
+        const sizeReduction = inputSize > 0 ? ((inputSize - outputSize) / inputSize) * 100 : 0;
+
+        return (
+          <div className="space-y-3">
+            <div className="flex items-center gap-2 text-success">
+              <CheckCircle className="h-5 w-5" />
+              <span className="text-sm font-medium">Conversion complete!</span>
+            </div>
+
+            {/* File size comparison */}
+            <div className="bg-muted/50 rounded-lg p-3 space-y-2">
+              <div className="flex items-center justify-between text-sm">
+                <div className="flex items-center gap-2">
+                  <FileCheck2 className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-muted-foreground">Input:</span>
+                </div>
+                <span className="font-medium">{formatFileSize(inputSize)}</span>
+              </div>
+
+              <div className="flex items-center justify-center py-1">
+                <ArrowRight className="h-4 w-4 text-muted-foreground" />
+              </div>
+
+              <div className="flex items-center justify-between text-sm">
+                <div className="flex items-center gap-2">
+                  <FileCheck2 className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-muted-foreground">Output:</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="font-medium">{formatFileSize(outputSize)}</span>
+                  {Math.abs(sizeReduction) > 1 && (
+                    <span className={cn(
+                      "text-xs px-2 py-0.5 rounded-full",
+                      sizeReduction > 0
+                        ? "bg-success/10 text-success"
+                        : "bg-info/10 text-info"
+                    )}>
+                      {sizeReduction > 0 ? '-' : '+'}{Math.abs(sizeReduction).toFixed(0)}%
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 'error':
+        return (
+          <div className="flex items-center gap-2 text-destructive">
+            <XCircle className="h-5 w-5" />
+            <span className="text-sm font-medium">Conversion failed</span>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  if (job.status === 'pending') {
+    return null;
+  }
+
+  return (
+    <Card className="animate-fadeIn">
+      <CardHeader>
+        <CardTitle className="text-lg">Conversion Status</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {/* Status */}
+          {renderStatus()}
+
+          {/* Error message */}
+          {job.error && (
+            <div className="bg-destructive/10 border border-destructive/20 rounded-md p-3">
+              <p className="text-sm text-destructive">{job.error}</p>
+            </div>
+          )}
+
+          {/* Retry button */}
+          {job.status === 'error' && onRetry && (
+            <Button onClick={onRetry} variant="outline" className="w-full gap-2">
+              <RefreshCw className="h-4 w-4" />
+              Retry Conversion
+            </Button>
+          )}
+
+          {/* Preview */}
+          {job.status === 'completed' && renderPreview()}
+
+          {/* Download button */}
+          {job.status === 'completed' && job.result && (
+            <Button onClick={handleDownload} className="w-full gap-2">
+              <Download className="h-4 w-4" />
+              Download{' '}
+              {generateOutputFilename(job.inputFile.name, job.outputFormat.extension)}
+            </Button>
+          )}
+
+          {/* Duration */}
+          {job.status === 'completed' && job.startTime && job.endTime && (
+            <p className="text-xs text-muted-foreground text-center">
+              Completed in {((job.endTime - job.startTime) / 1000).toFixed(2)}s
+            </p>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/media/FileConverter.tsx

@@ -0,0 +1,587 @@
+'use client';
+
+import * as React from 'react';
+import { ArrowRight, ArrowDown, Keyboard } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { FileUpload } from './FileUpload';
+import { FormatSelector } from './FormatSelector';
+import { ConversionPreview } from './ConversionPreview';
+import { ConversionOptionsPanel } from './ConversionOptions';
+import { FileInfo } from './FileInfo';
+import { FormatPresets } from './FormatPresets';
+import { toast } from 'sonner';
+import {
+  SUPPORTED_FORMATS,
+  getFormatByExtension,
+  getFormatByMimeType,
+  getCompatibleFormats,
+} from '@/lib/media/utils/formatMappings';
+import { convertWithFFmpeg } from '@/lib/media/converters/ffmpegService';
+import { convertWithImageMagick } from '@/lib/media/converters/imagemagickService';
+import { addToHistory } from '@/lib/media/storage/history';
+import { downloadBlobsAsZip, generateOutputFilename } from '@/lib/media/utils/fileUtils';
+import { getPresetById, type FormatPreset } from '@/lib/media/utils/formatPresets';
+import { useKeyboardShortcuts, type KeyboardShortcut } from '@/lib/media/hooks/useKeyboardShortcuts';
+import { KeyboardShortcutsModal } from '@/components/ui/KeyboardShortcutsModal';
+import type { ConversionJob, ConversionFormat, ConversionOptions } from '@/types/media';
+
+export function FileConverter() {
+  const [selectedFiles, setSelectedFiles] = React.useState<File[]>([]);
+  const [inputFormat, setInputFormat] = React.useState<ConversionFormat | undefined>();
+  const [outputFormat, setOutputFormat] = React.useState<ConversionFormat | undefined>();
+  const [compatibleFormats, setCompatibleFormats] = React.useState<ConversionFormat[]>([]);
+  const [conversionJobs, setConversionJobs] = React.useState<ConversionJob[]>([]);
+  const [conversionOptions, setConversionOptions] = React.useState<ConversionOptions>({});
+  const [showShortcutsModal, setShowShortcutsModal] = React.useState(false);
+
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  // Detect input format when files are selected
+  React.useEffect(() => {
+    if (selectedFiles.length === 0) {
+      setInputFormat(undefined);
+      setOutputFormat(undefined);
+      setCompatibleFormats([]);
+      setConversionJobs([]);
+      return;
+    }
+
+    // Use first file to detect format (assume all files same format for batch)
+    const firstFile = selectedFiles[0];
+
+    // Try to detect format from extension
+    const ext = firstFile.name.split('.').pop()?.toLowerCase();
+    let format = ext ? getFormatByExtension(ext) : undefined;
+
+    // Fallback to MIME type
+    if (!format) {
+      format = getFormatByMimeType(firstFile.type);
+    }
+
+    if (format) {
+      setInputFormat(format);
+      const compatible = getCompatibleFormats(format);
+      setCompatibleFormats(compatible);
+
+      // Auto-select first compatible format
+      if (compatible.length > 0 && !outputFormat) {
+        setOutputFormat(compatible[0]);
+      }
+
+      toast.success(`Detected format: ${format.name} (${selectedFiles.length} file${selectedFiles.length > 1 ? 's' : ''})`);
+    } else {
+      toast.error('Could not detect file format');
+      setInputFormat(undefined);
+      setCompatibleFormats([]);
+    }
+  }, [selectedFiles]);
+
+  const handleConvert = async () => {
+    if (selectedFiles.length === 0 || !inputFormat || !outputFormat) {
+      toast.error('Please select files and output format');
+      return;
+    }
+
+    // Create conversion jobs for all files
+    const jobs: ConversionJob[] = selectedFiles.map((file) => ({
+      id: Math.random().toString(36).substring(7),
+      inputFile: file,
+      inputFormat,
+      outputFormat,
+      options: conversionOptions,
+      status: 'pending',
+      progress: 0,
+      startTime: Date.now(),
+    }));
+
+    setConversionJobs(jobs);
+
+    // Track success/failure counts
+    let successCount = 0;
+    let failureCount = 0;
+
+    // Convert files sequentially
+    for (let i = 0; i < jobs.length; i++) {
+      const job = jobs[i];
+
+      try {
+        // Update job to loading
+        setConversionJobs((prev) =>
+          prev.map((j, idx) => idx === i ? { ...j, status: 'loading' as const } : j)
+        );
+
+        // Update job to processing
+        setConversionJobs((prev) =>
+          prev.map((j, idx) => idx === i ? { ...j, status: 'processing' as const, progress: 10 } : j)
+        );
+
+        // Call appropriate converter
+        let result;
+
+        if (!outputFormat) throw new Error('Output format not selected');
+
+        switch (outputFormat.converter) {
+          case 'ffmpeg':
+            result = await convertWithFFmpeg(job.inputFile, outputFormat.extension, conversionOptions, (progress) => {
+              setConversionJobs((prev) =>
+                prev.map((j, idx) => idx === i ? { ...j, progress } : j)
+              );
+            });
+            break;
+
+          case 'imagemagick':
+            result = await convertWithImageMagick(
+              job.inputFile,
+              outputFormat.extension,
+              conversionOptions,
+              (progress) => {
+                setConversionJobs((prev) =>
+                  prev.map((j, idx) => idx === i ? { ...j, progress } : j)
+                );
+              }
+            );
+            break;
+
+          default:
+            throw new Error(`Unknown converter: ${outputFormat.converter}`);
+        }
+
+        // Update job with result
+        if (result.success && result.blob) {
+          successCount++;
+
+          setConversionJobs((prev) =>
+            prev.map((j, idx) => idx === i ? {
+              ...j,
+              status: 'completed' as const,
+              progress: 100,
+              result: result.blob,
+              endTime: Date.now(),
+            } : j)
+          );
+
+          // Add to history
+          addToHistory({
+            inputFileName: job.inputFile.name,
+            inputFormat: inputFormat.name,
+            outputFormat: outputFormat.name,
+            outputFileName: `output.${outputFormat.extension}`,
+            fileSize: result.blob.size,
+            result: result.blob,
+          });
+        } else {
+          failureCount++;
+
+          setConversionJobs((prev) =>
+            prev.map((j, idx) => idx === i ? {
+              ...j,
+              status: 'error' as const,
+              error: result.error || 'Unknown error',
+              endTime: Date.now(),
+            } : j)
+          );
+        }
+      } catch (error) {
+        failureCount++;
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+
+        setConversionJobs((prev) =>
+          prev.map((j, idx) => idx === i ? {
+            ...j,
+            status: 'error' as const,
+            error: errorMessage,
+            endTime: Date.now(),
+          } : j)
+        );
+      }
+    }
+
+    // Show completion message
+    if (successCount === jobs.length) {
+      toast.success(`All ${jobs.length} files converted successfully!`);
+    } else if (successCount > 0) {
+      toast.info(`${successCount}/${jobs.length} files converted successfully`);
+    } else {
+      toast.error('All conversions failed');
+    }
+  };
+
+  const handleReset = () => {
+    setSelectedFiles([]);
+    setInputFormat(undefined);
+    setOutputFormat(undefined);
+    setCompatibleFormats([]);
+    setConversionJobs([]);
+    setConversionOptions({});
+  };
+
+  const handleFileSelect = (files: File[]) => {
+    setSelectedFiles((prev) => [...prev, ...files]);
+  };
+
+  const handleFileRemove = (index: number) => {
+    setSelectedFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handlePresetSelect = (preset: FormatPreset) => {
+    // Find the output format that matches the preset
+    const format = compatibleFormats.find(f => f.extension === preset.outputFormat);
+
+    if (format) {
+      setOutputFormat(format);
+      setConversionOptions(preset.options);
+      toast.success(`Applied ${preset.name} preset`);
+    }
+  };
+
+  const handleDownloadAll = async () => {
+    if (!outputFormat) return;
+
+    const completedJobs = conversionJobs.filter(job => job.status === 'completed' && job.result);
+
+    if (completedJobs.length === 0) {
+      toast.error('No files to download');
+      return;
+    }
+
+    if (completedJobs.length === 1) {
+      // Just download the single file
+      const job = completedJobs[0];
+      const filename = generateOutputFilename(job.inputFile.name, outputFormat.extension);
+      const url = URL.createObjectURL(job.result!);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      return;
+    }
+
+    // Download multiple files as ZIP
+    const files = completedJobs.map(job => ({
+      blob: job.result!,
+      filename: generateOutputFilename(job.inputFile.name, outputFormat.extension),
+    }));
+
+    await downloadBlobsAsZip(files, `converted-files.zip`);
+    toast.success(`Downloaded ${files.length} files as ZIP`);
+  };
+
+  const handleRetry = async (jobId: string) => {
+    const jobIndex = conversionJobs.findIndex(j => j.id === jobId);
+    if (jobIndex === -1 || !outputFormat) return;
+
+    const job = conversionJobs[jobIndex];
+
+    try {
+      // Reset job to loading
+      setConversionJobs((prev) =>
+        prev.map((j, idx) => idx === jobIndex ? {
+          ...j,
+          status: 'loading' as const,
+          progress: 0,
+          error: undefined,
+          startTime: Date.now(),
+        } : j)
+      );
+
+      // Update to processing
+      setConversionJobs((prev) =>
+        prev.map((j, idx) => idx === jobIndex ? { ...j, status: 'processing' as const, progress: 10 } : j)
+      );
+
+      // Call appropriate converter
+      let result;
+
+      switch (outputFormat.converter) {
+        case 'ffmpeg':
+          result = await convertWithFFmpeg(job.inputFile, outputFormat.extension, conversionOptions, (progress) => {
+            setConversionJobs((prev) =>
+              prev.map((j, idx) => idx === jobIndex ? { ...j, progress } : j)
+            );
+          });
+          break;
+
+        case 'imagemagick':
+          result = await convertWithImageMagick(
+            job.inputFile,
+            outputFormat.extension,
+            conversionOptions,
+            (progress) => {
+              setConversionJobs((prev) =>
+                prev.map((j, idx) => idx === jobIndex ? { ...j, progress } : j)
+              );
+            }
+          );
+          break;
+
+        default:
+          throw new Error(`Unknown converter: ${outputFormat.converter}`);
+      }
+
+      // Update job with result
+      if (result.success && result.blob) {
+        setConversionJobs((prev) =>
+          prev.map((j, idx) => idx === jobIndex ? {
+            ...j,
+            status: 'completed' as const,
+            progress: 100,
+            result: result.blob,
+            endTime: Date.now(),
+          } : j)
+        );
+
+        toast.success('Conversion completed successfully!');
+
+        // Add to history
+        addToHistory({
+          inputFileName: job.inputFile.name,
+          inputFormat: job.inputFormat.name,
+          outputFormat: outputFormat.name,
+          outputFileName: `output.${outputFormat.extension}`,
+          fileSize: result.blob.size,
+          result: result.blob,
+        });
+      } else {
+        setConversionJobs((prev) =>
+          prev.map((j, idx) => idx === jobIndex ? {
+            ...j,
+            status: 'error' as const,
+            error: result.error || 'Unknown error',
+            endTime: Date.now(),
+          } : j)
+        );
+
+        toast.error(result.error || 'Retry failed');
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+
+      setConversionJobs((prev) =>
+        prev.map((j, idx) => idx === jobIndex ? {
+          ...j,
+          status: 'error' as const,
+          error: errorMessage,
+          endTime: Date.now(),
+        } : j)
+      );
+
+      toast.error(`Retry failed: ${errorMessage}`);
+    }
+  };
+
+  const isConverting = conversionJobs.some(job => job.status === 'loading' || job.status === 'processing');
+  const isConvertDisabled = selectedFiles.length === 0 || !outputFormat || isConverting;
+  const completedCount = conversionJobs.filter(job => job.status === 'completed').length;
+
+  // Define keyboard shortcuts
+  const shortcuts: KeyboardShortcut[] = [
+    {
+      key: 'o',
+      ctrl: true,
+      description: 'Open file dialog',
+      action: () => {
+        if (!isConverting) {
+          fileInputRef.current?.click();
+        }
+      },
+    },
+    {
+      key: 'Enter',
+      ctrl: true,
+      description: 'Start conversion',
+      action: () => {
+        if (!isConvertDisabled) {
+          handleConvert();
+        }
+      },
+    },
+    {
+      key: 's',
+      ctrl: true,
+      description: 'Download results',
+      action: () => {
+        if (completedCount > 0) {
+          handleDownloadAll();
+        }
+      },
+    },
+    {
+      key: 'r',
+      ctrl: true,
+      description: 'Reset converter',
+      action: () => {
+        if (!isConverting) {
+          handleReset();
+        }
+      },
+    },
+    {
+      key: '/',
+      ctrl: true,
+      description: 'Show keyboard shortcuts',
+      action: () => setShowShortcutsModal(true),
+    },
+    {
+      key: 'Escape',
+      description: 'Close shortcuts modal',
+      action: () => setShowShortcutsModal(false),
+    },
+    {
+      key: '?',
+      description: 'Show keyboard shortcuts',
+      action: () => setShowShortcutsModal(true),
+    },
+  ];
+
+  // Enable keyboard shortcuts
+  useKeyboardShortcuts(shortcuts, !showShortcutsModal);
+
+  return (
+    <div className="w-full max-w-4xl mx-auto space-y-6">
+      {/* Header */}
+      <Card>
+        <CardHeader>
+          <CardTitle>File Converter</CardTitle>
+          <CardDescription>
+            Convert videos, audio, and images directly in your browser using WebAssembly
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* File upload */}
+          <FileUpload
+            onFileSelect={handleFileSelect}
+            onFileRemove={handleFileRemove}
+            selectedFiles={selectedFiles}
+            disabled={isConverting}
+            inputRef={fileInputRef}
+          />
+
+          {/* File Info - show first file */}
+          {selectedFiles.length > 0 && inputFormat && (
+            <FileInfo file={selectedFiles[0]} format={inputFormat} />
+          )}
+
+          {/* Format Presets */}
+          {inputFormat && (
+            <FormatPresets
+              inputFormat={inputFormat}
+              onPresetSelect={handlePresetSelect}
+              disabled={isConverting}
+            />
+          )}
+
+          {/* Format selection */}
+          {inputFormat && compatibleFormats.length > 0 && (
+            <div className="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-4 items-start">
+              {/* Input format */}
+              <div>
+                <label className="text-sm font-medium text-foreground mb-2 block">Input Format</label>
+                <Card className="p-4">
+                  <p className="font-medium">{inputFormat.name}</p>
+                  <p className="text-xs text-muted-foreground mt-1">{inputFormat.description}</p>
+                </Card>
+              </div>
+
+              {/* Arrow - horizontal on desktop, vertical on mobile */}
+              <div className="flex md:hidden items-center justify-center py-2">
+                <ArrowDown className="h-5 w-5 text-muted-foreground" />
+              </div>
+              <div className="hidden md:flex items-center justify-center pt-8">
+                <ArrowRight className="h-5 w-5 text-muted-foreground" />
+              </div>
+
+              {/* Output format */}
+              <FormatSelector
+                formats={compatibleFormats}
+                selectedFormat={outputFormat}
+                onFormatSelect={setOutputFormat}
+                label="Output Format"
+                disabled={isConverting}
+              />
+            </div>
+          )}
+
+          {/* Conversion Options */}
+          {inputFormat && outputFormat && (
+            <ConversionOptionsPanel
+              inputFormat={inputFormat}
+              outputFormat={outputFormat}
+              options={conversionOptions}
+              onOptionsChange={setConversionOptions}
+              disabled={isConverting}
+            />
+          )}
+
+          {/* Convert button */}
+          {inputFormat && outputFormat && (
+            <div className="flex gap-3">
+              <Button
+                onClick={handleConvert}
+                disabled={isConvertDisabled}
+                className="flex-1"
+                size="lg"
+              >
+                {isConverting
+                  ? 'Converting...'
+                  : `Convert ${selectedFiles.length} File${selectedFiles.length > 1 ? 's' : ''}`}
+              </Button>
+              <Button onClick={handleReset} variant="outline" size="lg">
+                Reset
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Download All Button */}
+      {completedCount > 0 && (
+        <Card>
+          <CardContent className="pt-6">
+            <Button
+              onClick={handleDownloadAll}
+              className="w-full"
+              size="lg"
+              variant="default"
+            >
+              Download All ({completedCount} file{completedCount > 1 ? 's' : ''})
+              {completedCount > 1 && ' as ZIP'}
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Conversion previews */}
+      {conversionJobs.length > 0 && (
+        <div className="space-y-4">
+          {conversionJobs.map((job) => (
+            <ConversionPreview
+              key={job.id}
+              job={job}
+              onRetry={() => handleRetry(job.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Keyboard Shortcuts Button */}
+      <Button
+        onClick={() => setShowShortcutsModal(true)}
+        className="fixed bottom-6 right-6 rounded-full w-12 h-12 p-0 shadow-lg"
+        title="Keyboard Shortcuts (Ctrl+/)"
+      >
+        <Keyboard className="h-5 w-5" />
+      </Button>
+
+      {/* Keyboard Shortcuts Modal */}
+      <KeyboardShortcutsModal
+        shortcuts={shortcuts}
+        isOpen={showShortcutsModal}
+        onClose={() => setShowShortcutsModal(false)}
+      />
+    </div>
+  );
+}

components/media/FileInfo.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import * as React from 'react';
+import { File, FileVideo, FileAudio, FileImage, Clock, HardDrive, Film, Music } from 'lucide-react';
+import { Card } from '@/components/ui/card';
+import type { ConversionFormat } from '@/types/media';
+
+interface FileInfoProps {
+  file: File;
+  format: ConversionFormat;
+}
+
+interface FileMetadata {
+  name: string;
+  size: string;
+  type: string;
+  category: string;
+  duration?: string;
+  dimensions?: string;
+}
+
+export function FileInfo({ file, format }: FileInfoProps) {
+  const [metadata, setMetadata] = React.useState<FileMetadata | null>(null);
+
+  React.useEffect(() => {
+    extractMetadata(file, format);
+  }, [file, format]);
+
+  const extractMetadata = async (file: File, format: ConversionFormat) => {
+    const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);
+    const baseMetadata: FileMetadata = {
+      name: file.name,
+      size: file.size < 1024 * 1024 ? `${(file.size / 1024).toFixed(2)} KB` : `${sizeInMB} MB`,
+      type: format.name,
+      category: format.category,
+    };
+
+    // Try to extract media-specific metadata
+    if (format.category === 'video' && file.type.startsWith('video/')) {
+      try {
+        const video = document.createElement('video');
+        video.preload = 'metadata';
+
+        const promise = new Promise<FileMetadata>((resolve) => {
+          video.onloadedmetadata = () => {
+            const duration = video.duration;
+            const minutes = Math.floor(duration / 60);
+            const seconds = Math.floor(duration % 60);
+            const durationStr = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+
+            resolve({
+              ...baseMetadata,
+              duration: durationStr,
+              dimensions: `${video.videoWidth} × ${video.videoHeight}`,
+            });
+
+            URL.revokeObjectURL(video.src);
+          };
+
+          video.onerror = () => {
+            resolve(baseMetadata);
+            URL.revokeObjectURL(video.src);
+          };
+        });
+
+        video.src = URL.createObjectURL(file);
+        const result = await promise;
+        setMetadata(result);
+        return;
+      } catch (error) {
+        console.error('Failed to extract video metadata:', error);
+      }
+    } else if (format.category === 'audio' && file.type.startsWith('audio/')) {
+      try {
+        const audio = document.createElement('audio');
+        audio.preload = 'metadata';
+
+        const promise = new Promise<FileMetadata>((resolve) => {
+          audio.onloadedmetadata = () => {
+            const duration = audio.duration;
+            const minutes = Math.floor(duration / 60);
+            const seconds = Math.floor(duration % 60);
+            const durationStr = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+
+            resolve({
+              ...baseMetadata,
+              duration: durationStr,
+            });
+
+            URL.revokeObjectURL(audio.src);
+          };
+
+          audio.onerror = () => {
+            resolve(baseMetadata);
+            URL.revokeObjectURL(audio.src);
+          };
+        });
+
+        audio.src = URL.createObjectURL(file);
+        const result = await promise;
+        setMetadata(result);
+        return;
+      } catch (error) {
+        console.error('Failed to extract audio metadata:', error);
+      }
+    } else if (format.category === 'image' && file.type.startsWith('image/')) {
+      try {
+        const img = new Image();
+
+        const promise = new Promise<FileMetadata>((resolve) => {
+          img.onload = () => {
+            resolve({
+              ...baseMetadata,
+              dimensions: `${img.width} × ${img.height}`,
+            });
+
+            URL.revokeObjectURL(img.src);
+          };
+
+          img.onerror = () => {
+            resolve(baseMetadata);
+            URL.revokeObjectURL(img.src);
+          };
+        });
+
+        img.src = URL.createObjectURL(file);
+        const result = await promise;
+        setMetadata(result);
+        return;
+      } catch (error) {
+        console.error('Failed to extract image metadata:', error);
+      }
+    }
+
+    setMetadata(baseMetadata);
+  };
+
+  const getCategoryIcon = () => {
+    switch (format.category) {
+      case 'video':
+        return <FileVideo className="h-5 w-5 text-primary" />;
+      case 'audio':
+        return <FileAudio className="h-5 w-5 text-primary" />;
+      case 'image':
+        return <FileImage className="h-5 w-5 text-primary" />;
+      default:
+        return <File className="h-5 w-5 text-primary" />;
+    }
+  };
+
+  if (!metadata) {
+    return (
+      <Card className="p-4 animate-pulse">
+        <div className="flex items-start gap-3">
+          <div className="w-5 h-5 bg-secondary rounded"></div>
+          <div className="flex-1 space-y-2">
+            <div className="h-4 bg-secondary rounded w-3/4"></div>
+            <div className="h-3 bg-secondary rounded w-1/2"></div>
+          </div>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="p-4">
+      <div className="flex items-start gap-3">
+        <div className="mt-0.5">{getCategoryIcon()}</div>
+        <div className="flex-1 min-w-0">
+          <h3 className="text-sm font-medium text-foreground truncate" title={metadata.name}>
+            {metadata.name}
+          </h3>
+          <div className="mt-2 grid grid-cols-2 gap-2 text-xs">
+            {/* File Size */}
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <HardDrive className="h-3.5 w-3.5" />
+              <span>{metadata.size}</span>
+            </div>
+
+            {/* Type */}
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <File className="h-3.5 w-3.5" />
+              <span>{metadata.type}</span>
+            </div>
+
+            {/* Duration (for video/audio) */}
+            {metadata.duration && (
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <Clock className="h-3.5 w-3.5" />
+                <span>{metadata.duration}</span>
+              </div>
+            )}
+
+            {/* Dimensions */}
+            {metadata.dimensions && (
+              <div className="flex items-center gap-2 text-muted-foreground">
+                {format.category === 'video' ? (
+                  <Film className="h-3.5 w-3.5" />
+                ) : (
+                  <FileImage className="h-3.5 w-3.5" />
+                )}
+                <span>{metadata.dimensions}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}

components/media/FileUpload.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import * as React from 'react';
+import { Upload, X } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import { formatFileSize } from '@/lib/media/utils/fileUtils';
+import { Button } from '@/components/ui/button';
+
+export interface FileUploadProps {
+  onFileSelect: (files: File[]) => void;
+  onFileRemove: (index: number) => void;
+  selectedFiles?: File[];
+  accept?: string;
+  maxSizeMB?: number;
+  disabled?: boolean;
+  inputRef?: React.RefObject<HTMLInputElement | null>;
+}
+
+export function FileUpload({
+  onFileSelect,
+  onFileRemove,
+  selectedFiles = [],
+  accept,
+  maxSizeMB = 500,
+  disabled = false,
+  inputRef,
+}: FileUploadProps) {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const fileInputRef = inputRef || React.useRef<HTMLInputElement>(null);
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) {
+      setIsDragging(true);
+    }
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    if (disabled) return;
+
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      handleFiles(files);
+    }
+  };
+
+  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length > 0) {
+      handleFiles(files);
+    }
+  };
+
+  const handleFiles = (files: File[]) => {
+    // Check file sizes
+    const maxBytes = maxSizeMB * 1024 * 1024;
+    const validFiles = files.filter(file => {
+      if (file.size > maxBytes) {
+        alert(`${file.name} exceeds ${maxSizeMB}MB limit and will be skipped.`);
+        return false;
+      }
+      return true;
+    });
+
+    if (validFiles.length > 0) {
+      onFileSelect(validFiles);
+    }
+
+    // Reset input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleClick = () => {
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+
+  const handleRemove = (index: number) => (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onFileRemove(index);
+  };
+
+  return (
+    <div className="w-full space-y-3">
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        className="hidden"
+        accept={accept}
+        onChange={handleFileInput}
+        disabled={disabled}
+      />
+
+      {selectedFiles.length > 0 ? (
+        <div className="space-y-2">
+          {selectedFiles.map((file, index) => (
+            <div key={`${file.name}-${index}`} className="border-2 border-border rounded-lg p-4 bg-card">
+              <div className="flex items-center justify-between">
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-foreground truncate">{file.name}</p>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    {formatFileSize(file.size)}
+                  </p>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleRemove(index)}
+                  disabled={disabled}
+                  className="ml-4"
+                >
+                  <X className="h-4 w-4" />
+                  <span className="sr-only">Remove file</span>
+                </Button>
+              </div>
+            </div>
+          ))}
+
+          {/* Add more files button */}
+          <Button
+            variant="outline"
+            onClick={handleClick}
+            disabled={disabled}
+            className="w-full"
+          >
+            <Upload className="h-4 w-4 mr-2" />
+            Add More Files
+          </Button>
+        </div>
+      ) : (
+        <div
+          onClick={handleClick}
+          onDragEnter={handleDragEnter}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          className={cn(
+            'border-2 border-dashed rounded-lg p-12 text-center cursor-pointer transition-colors',
+            'hover:border-primary hover:bg-primary/5',
+            {
+              'border-primary bg-primary/10': isDragging,
+              'border-border bg-background': !isDragging,
+              'opacity-50 cursor-not-allowed': disabled,
+            }
+          )}
+        >
+          <Upload className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+          <p className="text-sm font-medium text-foreground mb-1">
+            Drop your files here or click to browse
+          </p>
+          <p className="text-xs text-muted-foreground">
+            Maximum file size: {maxSizeMB}MB per file
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

components/media/FormatPresets.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import * as React from 'react';
+import { Sparkles } from 'lucide-react';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils/cn';
+import { getPresetsByCategory, type FormatPreset } from '@/lib/media/utils/formatPresets';
+import type { ConversionFormat } from '@/types/media';
+
+interface FormatPresetsProps {
+  inputFormat: ConversionFormat;
+  onPresetSelect: (preset: FormatPreset) => void;
+  disabled?: boolean;
+}
+
+export function FormatPresets({ inputFormat, onPresetSelect, disabled = false }: FormatPresetsProps) {
+  const [selectedPresetId, setSelectedPresetId] = React.useState<string | null>(null);
+
+  // Get presets for the input format's category
+  const presets = getPresetsByCategory(inputFormat.category);
+
+  if (presets.length === 0) {
+    return null;
+  }
+
+  const handlePresetClick = (preset: FormatPreset) => {
+    setSelectedPresetId(preset.id);
+    onPresetSelect(preset);
+  };
+
+  return (
+    <Card className="p-4">
+      <div className="flex items-center gap-2 mb-4">
+        <Sparkles className="h-5 w-5 text-primary" />
+        <h3 className="text-sm font-semibold">Quick Presets</h3>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+        {presets.map((preset) => (
+          <Button
+            key={preset.id}
+            onClick={() => handlePresetClick(preset)}
+            variant={selectedPresetId === preset.id ? 'default' : 'outline'}
+            className={cn(
+              'h-auto py-4 px-4 flex flex-col items-start text-left gap-2',
+              selectedPresetId === preset.id && 'ring-2 ring-primary ring-offset-2'
+            )}
+            disabled={disabled}
+          >
+            <div className="flex items-center gap-2 w-full">
+              <span className="text-2xl">{preset.icon}</span>
+              <div className="flex-1 min-w-0">
+                <div className="font-semibold text-sm">{preset.name}</div>
+              </div>
+            </div>
+            <p className="text-xs text-muted-foreground w-full">{preset.description}</p>
+          </Button>
+        ))}
+      </div>
+
+      <div className="mt-3 text-xs text-muted-foreground">
+        Select a preset to automatically configure optimal settings for your use case
+      </div>
+    </Card>
+  );
+}

components/media/FormatSelector.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import * as React from 'react';
+import Fuse from 'fuse.js';
+import { Search } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import { Input } from '@/components/ui/input';
+import { Card } from '@/components/ui/card';
+import type { ConversionFormat } from '@/types/media';
+
+export interface FormatSelectorProps {
+  formats: ConversionFormat[];
+  selectedFormat?: ConversionFormat;
+  onFormatSelect: (format: ConversionFormat) => void;
+  label?: string;
+  disabled?: boolean;
+}
+
+export function FormatSelector({
+  formats,
+  selectedFormat,
+  onFormatSelect,
+  label = 'Select format',
+  disabled = false,
+}: FormatSelectorProps) {
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [filteredFormats, setFilteredFormats] = React.useState<ConversionFormat[]>(formats);
+
+  // Set up Fuse.js for fuzzy search
+  const fuse = React.useMemo(() => {
+    return new Fuse(formats, {
+      keys: ['name', 'extension', 'description'],
+      threshold: 0.3,
+      includeScore: true,
+    });
+  }, [formats]);
+
+  // Filter formats based on search query
+  React.useEffect(() => {
+    if (!searchQuery.trim()) {
+      setFilteredFormats(formats);
+      return;
+    }
+
+    const results = fuse.search(searchQuery);
+    setFilteredFormats(results.map((result) => result.item));
+  }, [searchQuery, formats, fuse]);
+
+  // Group formats by category
+  const groupedFormats = React.useMemo(() => {
+    const groups: Record<string, ConversionFormat[]> = {};
+
+    filteredFormats.forEach((format) => {
+      if (!groups[format.category]) {
+        groups[format.category] = [];
+      }
+      groups[format.category].push(format);
+    });
+
+    return groups;
+  }, [filteredFormats]);
+
+  return (
+    <div className="w-full">
+      <label className="text-sm font-medium text-foreground mb-2 block">{label}</label>
+
+      {/* Search input */}
+      <div className="relative mb-3">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          type="text"
+          placeholder="Search formats..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          disabled={disabled}
+          className="pl-10"
+        />
+      </div>
+
+      {/* Format list */}
+      <Card className="max-h-64 overflow-y-auto custom-scrollbar">
+        {Object.entries(groupedFormats).length === 0 ? (
+          <div className="p-4 text-center text-sm text-muted-foreground">
+            No formats found matching "{searchQuery}"
+          </div>
+        ) : (
+          <div className="p-2">
+            {Object.entries(groupedFormats).map(([category, categoryFormats]) => (
+              <div key={category} className="mb-3 last:mb-0">
+                <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2 px-2">
+                  {category}
+                </h3>
+                <div className="space-y-1">
+                  {categoryFormats.map((format) => (
+                    <button
+                      key={format.id}
+                      onClick={() => !disabled && onFormatSelect(format)}
+                      disabled={disabled}
+                      className={cn(
+                        'w-full text-left px-3 py-2 rounded-md transition-colors',
+                        'hover:bg-accent hover:text-accent-foreground',
+                        'disabled:opacity-50 disabled:cursor-not-allowed',
+                        {
+                          'bg-primary text-primary-foreground hover:bg-primary/90':
+                            selectedFormat?.id === format.id,
+                        }
+                      )}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <p className="text-sm font-medium">{format.name}</p>
+                          {format.description && (
+                            <p className="text-xs opacity-75 mt-0.5">{format.description}</p>
+                          )}
+                        </div>
+                        <span className="text-xs font-mono opacity-75">.{format.extension}</span>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+
+      {/* Selected format display */}
+      {selectedFormat && (
+        <div className="mt-2 text-xs text-muted-foreground">
+          Selected: <span className="font-medium text-foreground">{selectedFormat.name}</span> (.
+          {selectedFormat.extension})
+        </div>
+      )}
+    </div>
+  );
+}

components/pastel/layout/Navbar.tsx

@@ -1,76 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { ThemeToggle } from './ThemeToggle';
-import { cn } from '@/lib/utils/cn';
-import { Palette } from 'lucide-react';
-
-const navigation = [
-  { name: 'Playground', href: '/pastel' },
-  { name: 'Harmony', href: '/pastel/harmony' },
-  { name: 'Contrast', href: '/pastel/contrast' },
-  { name: 'Names', href: '/pastel/names' },
-  { name: 'Batch', href: '/pastel/batch' },
-];
-
-export function Navbar() {
-  const pathname = usePathname();
-
-  return (
-    <nav className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="max-w-7xl mx-auto px-8">
-        <div className="flex h-16 items-center justify-between">
-          {/* Logo */}
-          <Link href="/" className="flex items-center space-x-2 font-bold text-xl">
-            <Palette className="h-6 w-6 text-primary" />
-            <span className="bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 bg-clip-text text-transparent">
-              Pastel UI
-            </span>
-          </Link>
-
-          {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center space-x-1">
-            {navigation.map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                className={cn(
-                  'px-3 py-2 rounded-md text-sm font-medium transition-colors',
-                  pathname === item.href
-                    ? 'bg-accent text-accent-foreground'
-                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
-                )}
-              >
-                {item.name}
-              </Link>
-            ))}
-          </div>
-
-          {/* Right side */}
-          <div className="flex items-center space-x-2">
-            <ThemeToggle />
-          </div>
-        </div>
-
-        {/* Mobile Navigation */}
-        <div className="md:hidden pb-3 space-y-1">
-          {navigation.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={cn(
-                'block px-3 py-2 rounded-md text-sm font-medium transition-colors',
-                pathname === item.href
-                  ? 'bg-accent text-accent-foreground'
-                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
-              )}
-            >
-              {item.name}
-            </Link>
-          ))}
-        </div>
-      </div>
-    </nav>
-  );
-}

components/pastel/layout/ThemeToggle.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import { Moon, Sun } from 'lucide-react';
-import { useTheme } from '@/components/providers/ThemeProvider';
-import { Button } from '@/components/ui/button';
-
-export function ThemeToggle() {
-  const { theme, setTheme, resolvedTheme } = useTheme();
-
-  const toggleTheme = () => {
-    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
-  };
-
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={toggleTheme}
-      aria-label={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}
-    >
-      {resolvedTheme === 'dark' ? (
-        <Sun className="h-5 w-5" />
-      ) : (
-        <Moon className="h-5 w-5" />
-      )}
-    </Button>
-  );
-}

components/pastel/providers/Providers.tsx

@@ -1,29 +0,0 @@
-'use client';
-
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Toaster } from 'sonner';
-import { useState } from 'react';
-import { ThemeProvider } from './ThemeProvider';
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  const [queryClient] = useState(
-    () =>
-      new QueryClient({
-        defaultOptions: {
-          queries: {
-            staleTime: 60 * 1000, // 1 minute
-            refetchOnWindowFocus: false,
-          },
-        },
-      })
-  );
-
-  return (
-    <ThemeProvider>
-      <QueryClientProvider client={queryClient}>
-        {children}
-        <Toaster position="top-right" richColors />
-      </QueryClientProvider>
-    </ThemeProvider>
-  );
-}

components/pastel/providers/ThemeProvider.tsx

@@ -1,78 +0,0 @@
-'use client';
-
-import { createContext, useContext, useEffect, useState } from 'react';
-
-type Theme = 'light' | 'dark' | 'system';
-
-interface ThemeContextType {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-  resolvedTheme: 'light' | 'dark';
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setTheme] = useState<Theme>('system');
-  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light');
-
-  useEffect(() => {
-    // Load theme from localStorage
-    const stored = localStorage.getItem('theme') as Theme | null;
-    if (stored) {
-      setTheme(stored);
-    }
-  }, []);
-
-  useEffect(() => {
-    const root = window.document.documentElement;
-
-    // Remove previous theme classes
-    root.classList.remove('light', 'dark');
-
-    if (theme === 'system') {
-      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light';
-      root.classList.add(systemTheme);
-      setResolvedTheme(systemTheme);
-    } else {
-      root.classList.add(theme);
-      setResolvedTheme(theme);
-    }
-
-    // Save to localStorage
-    localStorage.setItem('theme', theme);
-  }, [theme]);
-
-  // Listen for system theme changes
-  useEffect(() => {
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-    const handleChange = () => {
-      if (theme === 'system') {
-        const systemTheme = mediaQuery.matches ? 'dark' : 'light';
-        setResolvedTheme(systemTheme);
-        window.document.documentElement.classList.remove('light', 'dark');
-        window.document.documentElement.classList.add(systemTheme);
-      }
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, [theme]);
-
-  return (
-    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export function useTheme() {
-  const context = useContext(ThemeContext);
-  if (context === undefined) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-}

components/ui/KeyboardShortcutsModal.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { formatShortcut, type KeyboardShortcut } from '@/lib/media/hooks/useKeyboardShortcuts';
+import { cn } from '@/lib/utils';
+
+interface KeyboardShortcutsModalProps {
+  shortcuts: KeyboardShortcut[];
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function KeyboardShortcutsModal({ shortcuts, isOpen, onClose }: KeyboardShortcutsModalProps) {
+  React.useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
+      <div 
+        className="absolute inset-0" 
+        onClick={onClose}
+      />
+      <Card className="relative w-full max-w-md shadow-2xl animate-in zoom-in-95 duration-200">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-xl font-bold">Keyboard Shortcuts</CardTitle>
+          <Button variant="ghost" size="icon" onClick={onClose} className="rounded-full">
+            <X className="h-4 w-4" />
+          </Button>
+        </CardHeader>
+        <CardContent className="pt-4">
+          <div className="space-y-4">
+            {shortcuts.map((shortcut, index) => (
+              <div key={index} className="flex items-center justify-between gap-4">
+                <span className="text-sm text-muted-foreground">{shortcut.description}</span>
+                <kbd className="pointer-events-none inline-flex h-6 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+                  {formatShortcut(shortcut)}
+                </kbd>
+              </div>
+            ))}
+          </div>
+          <div className="mt-6 flex justify-end">
+            <Button onClick={onClose}>Close</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

components/ui/progress.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils/index"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

components/units/MainConverter.tsx

@@ -14,7 +14,7 @@ import {
 } from '@/components/ui/select';
 import SearchUnits from './SearchUnits';
 import VisualComparison from './VisualComparison';
-import CommandPalette from '@/components/units/ui/CommandPalette';
+
 import {
   getAllMeasures,
   getUnitsForMeasure,
@@ -118,11 +118,6 @@ export default function MainConverter() {
 
   return (
     <div className="w-full space-y-8">
-      {/* Command Palette */}
-      <CommandPalette
-        onSelectMeasure={setSelectedMeasure}
-        onSelectUnit={handleSearchSelect}
-      />
 
       {/* Quick Access Row */}
       <div className="flex flex-col md:flex-row md:items-center gap-4 justify-between bg-card p-4 rounded-lg border">

components/units/providers/ThemeProvider.tsx

@@ -1,77 +0,0 @@
-'use client';
-
-import { createContext, useContext, useEffect, useState } from 'react';
-
-type Theme = 'dark' | 'light' | 'system';
-
-interface ThemeProviderProps {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-}
-
-interface ThemeProviderState {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-}
-
-const ThemeProviderContext = createContext<ThemeProviderState | undefined>(
-  undefined
-);
-
-export function ThemeProvider({
-  children,
-  defaultTheme = 'system',
-  storageKey = 'units-ui-theme',
-}: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(defaultTheme);
-
-  useEffect(() => {
-    // Load theme from localStorage
-    const stored = localStorage.getItem(storageKey) as Theme | null;
-    if (stored) {
-      setTheme(stored);
-    }
-  }, [storageKey]);
-
-  useEffect(() => {
-    const root = window.document.documentElement;
-
-    root.classList.remove('light', 'dark');
-
-    if (theme === 'system') {
-      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
-        .matches
-        ? 'dark'
-        : 'light';
-
-      root.classList.add(systemTheme);
-      return;
-    }
-
-    root.classList.add(theme);
-  }, [theme]);
-
-  const value = {
-    theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
-    },
-  };
-
-  return (
-    <ThemeProviderContext.Provider value={value}>
-      {children}
-    </ThemeProviderContext.Provider>
-  );
-}
-
-export const useTheme = () => {
-  const context = useContext(ThemeProviderContext);
-
-  if (context === undefined)
-    throw new Error('useTheme must be used within a ThemeProvider');
-
-  return context;
-};

components/units/ui/CommandPalette.tsx

@@ -1,174 +0,0 @@
-'use client';
-
-import { useState, useEffect, useMemo, useRef } from 'react';
-import { Command, Hash, Star, Moon, Sun } from 'lucide-react';
-import { useTheme } from '@/components/providers/ThemeProvider';
-import {
-  getAllMeasures,
-  formatMeasureName,
-  getCategoryColor,
-  getCategoryColorHex,
-  type Measure,
-} from '@/lib/units/units';
-import { getFavorites } from '@/lib/units/storage';
-import { cn } from '@/lib/utils';
-
-interface CommandPaletteProps {
-  onSelectMeasure: (measure: Measure) => void;
-  onSelectUnit: (unit: string, measure: Measure) => void;
-}
-
-export default function CommandPalette({
-  onSelectMeasure,
-  onSelectUnit,
-}: CommandPaletteProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [query, setQuery] = useState('');
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const { theme, setTheme } = useTheme();
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Commands
-  const commands: Array<{
-    id: string;
-    label: string;
-    icon: any;
-    action: () => void;
-    keywords: string[];
-    color?: string;
-  }> = [
-    {
-      id: 'theme-light',
-      label: 'Switch to Light Mode',
-      icon: Sun,
-      action: () => setTheme('light'),
-      keywords: ['theme', 'light', 'mode'],
-    },
-    {
-      id: 'theme-dark',
-      label: 'Switch to Dark Mode',
-      icon: Moon,
-      action: () => setTheme('dark'),
-      keywords: ['theme', 'dark', 'mode'],
-    },
-    {
-      id: 'theme-system',
-      label: 'Use System Theme',
-      icon: Command,
-      action: () => setTheme('system'),
-      keywords: ['theme', 'system', 'auto'],
-    },
-  ];
-
-  // Add measure commands
-  const measures = getAllMeasures();
-  const measureCommands = measures.map(measure => ({
-    id: `measure-${measure}`,
-    label: `Convert ${formatMeasureName(measure)}`,
-    icon: Hash,
-    action: () => onSelectMeasure(measure),
-    keywords: ['convert', measure, formatMeasureName(measure).toLowerCase()],
-    color: getCategoryColorHex(measure),
-  }));
-
-  const allCommands = [...commands, ...measureCommands];
-
-  // Filter commands
-  const filteredCommands = query
-    ? allCommands.filter(cmd =>
-        cmd.keywords.some(kw => kw.toLowerCase().includes(query.toLowerCase())) ||
-        cmd.label.toLowerCase().includes(query.toLowerCase())
-      )
-    : allCommands;
-
-  // Focus input when opened
-  useEffect(() => {
-    if (isOpen) {
-      inputRef.current?.focus();
-      setQuery('');
-      setSelectedIndex(0);
-    }
-  }, [isOpen]);
-
-  // Reset selected index when query changes
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [query]);
-
-  if (!isOpen) return null;
-
-  return (
-    <>
-      {/* Backdrop */}
-      <div
-        className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50"
-        onClick={() => setIsOpen(false)}
-      />
-
-      {/* Command Palette */}
-      <div className="fixed left-1/2 top-1/4 -translate-x-1/2 w-full max-w-2xl z-50 animate-scale-in">
-        <div className="bg-popover border rounded-lg shadow-2xl overflow-hidden">
-          {/* Search Input */}
-          <div className="flex items-center border-b px-4">
-            <Command className="h-5 w-5 text-muted-foreground" />
-            <input
-              ref={inputRef}
-              type="text"
-              placeholder="Type a command or search..."
-              value={query}
-              onChange={e => setQuery(e.target.value)}
-              className="flex-1 bg-transparent py-4 px-4 outline-none placeholder:text-muted-foreground"
-            />
-          </div>
-
-          {/* Commands List */}
-          <div className="max-h-96 overflow-y-auto p-2">
-            {filteredCommands.length === 0 ? (
-              <div className="py-8 text-center text-muted-foreground">
-                No commands found
-              </div>
-            ) : (
-              filteredCommands.map((command, index) => {
-                const Icon = command.icon;
-                return (
-                  <button
-                    key={command.id}
-                    onClick={() => {
-                      command.action();
-                      setIsOpen(false);
-                    }}
-                    className={cn(
-                      'w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors text-left',
-                      index === selectedIndex
-                        ? 'bg-accent text-accent-foreground'
-                        : 'hover:bg-accent/50'
-                    )}
-                  >
-                    {command.color ? (
-                      <div
-                        className="w-5 h-5 rounded flex-shrink-0"
-                        style={{
-                          backgroundColor: command.color,
-                        }}
-                      />
-                    ) : (
-                      <Icon className="h-5 w-5 flex-shrink-0 text-muted-foreground" />
-                    )}
-                    <span className="flex-1">{command.label}</span>
-                  </button>
-                );
-              })
-            )}
-          </div>
-
-          {/* Footer */}
-          <div className="border-t px-4 py-2 text-xs text-muted-foreground flex items-center gap-4">
-            <span>Navigate with arrows</span>
-            <span>Select with Enter</span>
-            <span>Close with click outside</span>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

lib/media/converters/ffmpegService.ts

@@ -0,0 +1,224 @@
+import type { FFmpeg } from '@ffmpeg/ffmpeg';
+import { fetchFile } from '@ffmpeg/util';
+import { loadFFmpeg } from '@/lib/media/wasm/wasmLoader';
+import type { ConversionOptions, ProgressCallback, ConversionResult } from '@/types/media';
+
+/**
+ * Convert video/audio using FFmpeg
+ */
+export async function convertWithFFmpeg(
+  file: File,
+  outputFormat: string,
+  options: ConversionOptions = {},
+  onProgress?: ProgressCallback
+): Promise<ConversionResult> {
+  const startTime = Date.now();
+
+  try {
+    // Load FFmpeg instance
+    const ffmpeg: FFmpeg = await loadFFmpeg();
+
+    // Set up progress tracking
+    if (onProgress) {
+      ffmpeg.on('progress', ({ progress }) => {
+        onProgress(Math.round(progress * 100));
+      });
+    }
+
+    // Input filename
+    const inputName = file.name;
+    const outputName = `output.${outputFormat}`;
+
+    // Write input file to FFmpeg virtual file system
+    await ffmpeg.writeFile(inputName, await fetchFile(file));
+
+    // Build FFmpeg command based on format and options
+    const args = buildFFmpegArgs(inputName, outputName, outputFormat, options);
+
+    console.log('[FFmpeg] Running command:', args.join(' '));
+
+    // Execute FFmpeg command
+    await ffmpeg.exec(args);
+
+    // Read output file
+    const data = await ffmpeg.readFile(outputName);
+    const blob = new Blob([data as BlobPart], { type: getMimeType(outputFormat) });
+
+    // Clean up virtual file system
+    await ffmpeg.deleteFile(inputName);
+    await ffmpeg.deleteFile(outputName);
+
+    const duration = Date.now() - startTime;
+
+    return {
+      success: true,
+      blob,
+      duration,
+    };
+  } catch (error) {
+    console.error('[FFmpeg] Conversion error:', error);
+
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown conversion error',
+      duration: Date.now() - startTime,
+    };
+  }
+}
+
+/**
+ * Build FFmpeg command arguments
+ */
+function buildFFmpegArgs(
+  inputName: string,
+  outputName: string,
+  outputFormat: string,
+  options: ConversionOptions
+): string[] {
+  const args = ['-i', inputName];
+
+  // Video codec
+  if (options.videoCodec) {
+    args.push('-c:v', options.videoCodec);
+  }
+
+  // Video bitrate
+  if (options.videoBitrate) {
+    args.push('-b:v', options.videoBitrate);
+  }
+
+  // Video resolution
+  if (options.videoResolution) {
+    args.push('-s', options.videoResolution);
+  }
+
+  // Video FPS
+  if (options.videoFps) {
+    args.push('-r', options.videoFps.toString());
+  }
+
+  // Audio codec
+  if (options.audioCodec) {
+    args.push('-c:a', options.audioCodec);
+  }
+
+  // Audio bitrate
+  if (options.audioBitrate) {
+    args.push('-b:a', options.audioBitrate);
+  }
+
+  // Audio sample rate
+  if (options.audioSampleRate) {
+    args.push('-ar', options.audioSampleRate.toString());
+  }
+
+  // Audio channels
+  if (options.audioChannels) {
+    args.push('-ac', options.audioChannels.toString());
+  }
+
+  // Format-specific settings
+  switch (outputFormat) {
+    case 'webm':
+      // Use VP8 by default (less memory-intensive than VP9)
+      if (!options.videoCodec) args.push('-c:v', 'libvpx');
+      if (!options.audioCodec) args.push('-c:a', 'libvorbis');
+      // Optimize for faster encoding and lower memory usage
+      args.push('-deadline', 'realtime');
+      args.push('-cpu-used', '8');
+      // Set quality/bitrate if not specified
+      if (!options.videoBitrate) args.push('-b:v', '1M');
+      if (!options.audioBitrate) args.push('-b:a', '128k');
+      break;
+    case 'mp4':
+      if (!options.videoCodec) args.push('-c:v', 'libx264');
+      if (!options.audioCodec) args.push('-c:a', 'aac');
+      // Use faster preset for browser encoding
+      args.push('-preset', 'ultrafast');
+      args.push('-tune', 'zerolatency');
+      if (!options.videoBitrate) args.push('-b:v', '1M');
+      if (!options.audioBitrate) args.push('-b:a', '128k');
+      break;
+    case 'mp3':
+      if (!options.audioCodec) args.push('-c:a', 'libmp3lame');
+      args.push('-vn'); // No video
+      break;
+    case 'wav':
+      if (!options.audioCodec) args.push('-c:a', 'pcm_s16le');
+      args.push('-vn'); // No video
+      break;
+    case 'ogg':
+      if (!options.audioCodec) args.push('-c:a', 'libvorbis');
+      args.push('-vn'); // No video
+      break;
+    case 'gif':
+      // For GIF, use filter to optimize
+      args.push('-vf', 'fps=15,scale=480:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse');
+      break;
+  }
+
+  // Output file
+  args.push(outputName);
+
+  return args;
+}
+
+/**
+ * Get MIME type for output format
+ */
+function getMimeType(format: string): string {
+  const mimeTypes: Record<string, string> = {
+    mp4: 'video/mp4',
+    webm: 'video/webm',
+    avi: 'video/x-msvideo',
+    mov: 'video/quicktime',
+    mkv: 'video/x-matroska',
+    mp3: 'audio/mpeg',
+    wav: 'audio/wav',
+    ogg: 'audio/ogg',
+    aac: 'audio/aac',
+    flac: 'audio/flac',
+    gif: 'image/gif',
+  };
+
+  return mimeTypes[format] || 'application/octet-stream';
+}
+
+/**
+ * Extract audio from video
+ */
+export async function extractAudio(
+  file: File,
+  outputFormat: string = 'mp3',
+  onProgress?: ProgressCallback
+): Promise<ConversionResult> {
+  return convertWithFFmpeg(
+    file,
+    outputFormat,
+    {
+      audioCodec: outputFormat === 'mp3' ? 'libmp3lame' : undefined,
+      audioBitrate: '192k',
+    },
+    onProgress
+  );
+}
+
+/**
+ * Convert video to GIF
+ */
+export async function videoToGif(
+  file: File,
+  fps: number = 15,
+  width: number = 480,
+  onProgress?: ProgressCallback
+): Promise<ConversionResult> {
+  return convertWithFFmpeg(
+    file,
+    'gif',
+    {
+      videoFps: fps,
+      videoResolution: `${width}:-1`,
+    },
+    onProgress
+  );
+}

lib/media/converters/imagemagickService.ts

@@ -0,0 +1,248 @@
+import { loadImageMagick } from '@/lib/media/wasm/wasmLoader';
+import type { ConversionOptions, ProgressCallback, ConversionResult } from '@/types/media';
+
+/**
+ * Convert image using ImageMagick
+ */
+export async function convertWithImageMagick(
+  file: File,
+  outputFormat: string,
+  options: ConversionOptions = {},
+  onProgress?: ProgressCallback
+): Promise<ConversionResult> {
+  const startTime = Date.now();
+
+  try {
+    // Load ImageMagick instance
+    await loadImageMagick();
+
+    // Report initial progress
+    if (onProgress) onProgress(10);
+
+    // Read input file as ArrayBuffer
+    const arrayBuffer = await file.arrayBuffer();
+    const inputData = new Uint8Array(arrayBuffer);
+
+    if (onProgress) onProgress(30);
+
+    // Import ImageMagick functions (already initialized by loadImageMagick)
+    const { ImageMagick } = await import('@imagemagick/magick-wasm');
+
+    if (onProgress) onProgress(40);
+
+    // Get output format enum
+    const outputFormatEnum = await getMagickFormatEnum(outputFormat);
+
+    if (onProgress) onProgress(50);
+
+    // Convert image using ImageMagick
+    let result: Uint8Array | undefined;
+
+    await ImageMagick.read(inputData, (image) => {
+      // Apply quality setting if specified
+      if (options.imageQuality !== undefined) {
+        image.quality = options.imageQuality;
+      }
+
+      // Apply resize if specified
+      if (options.imageWidth || options.imageHeight) {
+        const width = options.imageWidth || 0;
+        const height = options.imageHeight || 0;
+
+        if (width > 0 && height > 0) {
+          // Both dimensions specified
+          image.resize(width, height);
+        } else if (width > 0) {
+          // Only width specified, maintain aspect ratio
+          const aspectRatio = image.height / image.width;
+          image.resize(width, Math.round(width * aspectRatio));
+        } else if (height > 0) {
+          // Only height specified, maintain aspect ratio
+          const aspectRatio = image.width / image.height;
+          image.resize(Math.round(height * aspectRatio), height);
+        }
+      }
+
+      if (onProgress) onProgress(70);
+
+      // Write the image data with format
+      image.write(outputFormatEnum, (data) => {
+        result = data;
+      });
+
+      if (onProgress) onProgress(90);
+    });
+
+    // Verify we have a result
+    if (!result || result.length === 0) {
+      throw new Error('ImageMagick conversion produced empty result');
+    }
+
+    console.log('[ImageMagick] Conversion complete:', {
+      inputSize: inputData.length,
+      outputSize: result.length,
+      format: outputFormat,
+      quality: options.imageQuality,
+    });
+
+    // Verify the data looks like valid image data by checking magic bytes
+    const first4Bytes = Array.from(result.slice(0, 4)).map(b => b.toString(16).padStart(2, '0')).join(' ');
+    console.log('[ImageMagick] First 4 bytes:', first4Bytes);
+
+    // Create blob from result
+    const mimeType = getMimeType(outputFormat);
+    const blob = new Blob([result as BlobPart], { type: mimeType });
+
+    console.log('[ImageMagick] Created blob:', {
+      size: blob.size,
+      type: blob.type,
+    });
+
+    // Verify blob can be read
+    try {
+      const testReader = new FileReader();
+      const testPromise = new Promise((resolve) => {
+        testReader.onloadend = () => {
+          if (testReader.result instanceof ArrayBuffer) {
+            const testArr = new Uint8Array(testReader.result);
+            console.log('[ImageMagick] Blob verification - first 4 bytes:',
+              Array.from(testArr.slice(0, 4)).map(b => b.toString(16).padStart(2, '0')).join(' '));
+          }
+          resolve(true);
+        };
+      });
+      testReader.readAsArrayBuffer(blob.slice(0, 4));
+      await testPromise;
+    } catch (err) {
+      console.error('[ImageMagick] Blob verification failed:', err);
+    }
+
+    if (onProgress) onProgress(100);
+
+    const duration = Date.now() - startTime;
+
+    return {
+      success: true,
+      blob,
+      duration,
+    };
+  } catch (error) {
+    console.error('[ImageMagick] Conversion error:', error);
+
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown conversion error',
+      duration: Date.now() - startTime,
+    };
+  }
+}
+
+/**
+ * Get ImageMagick format enum
+ */
+async function getMagickFormatEnum(format: string): Promise<any> {
+  const { MagickFormat } = await import('@imagemagick/magick-wasm');
+
+  const formatMap: Record<string, any> = {
+    png: MagickFormat.Png,
+    jpg: MagickFormat.Jpg,
+    jpeg: MagickFormat.Jpg,
+    webp: MagickFormat.WebP,
+    gif: MagickFormat.Gif,
+    bmp: MagickFormat.Bmp,
+    tiff: MagickFormat.Tiff,
+    svg: MagickFormat.Svg,
+  };
+
+  return formatMap[format.toLowerCase()] || MagickFormat.Png;
+}
+
+/**
+ * Get MIME type for output format
+ */
+function getMimeType(format: string): string {
+  const mimeTypes: Record<string, string> = {
+    png: 'image/png',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    webp: 'image/webp',
+    gif: 'image/gif',
+    bmp: 'image/bmp',
+    tiff: 'image/tiff',
+    svg: 'image/svg+xml',
+  };
+
+  return mimeTypes[format.toLowerCase()] || 'application/octet-stream';
+}
+
+/**
+ * Resize image
+ */
+export async function resizeImage(
+  file: File,
+  width: number,
+  height: number,
+  outputFormat?: string,
+  onProgress?: ProgressCallback
+): Promise<ConversionResult> {
+  const format = outputFormat || file.name.split('.').pop() || 'png';
+
+  return convertWithImageMagick(
+    file,
+    format,
+    {
+      imageWidth: width,
+      imageHeight: height,
+    },
+    onProgress
+  );
+}
+
+/**
+ * Convert image to WebP
+ */
+export async function convertToWebP(
+  file: File,
+  quality: number = 85,
+  onProgress?: ProgressCallback
+): Promise<ConversionResult> {
+  return convertWithImageMagick(
+    file,
+    'webp',
+    {
+      imageQuality: quality,
+    },
+    onProgress
+  );
+}
+
+/**
+ * Batch convert images
+ */
+export async function batchConvertImages(
+  files: File[],
+  outputFormat: string,
+  options: ConversionOptions = {},
+  onProgress?: (fileIndex: number, progress: number) => void
+): Promise<ConversionResult[]> {
+  const results: ConversionResult[] = [];
+
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+
+    const result = await convertWithImageMagick(
+      file,
+      outputFormat,
+      options,
+      (progress) => {
+        if (onProgress) {
+          onProgress(i, progress);
+        }
+      }
+    );
+
+    results.push(result);
+  }
+
+  return results;
+}

lib/media/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,65 @@
+import { useEffect } from 'react';
+
+export interface KeyboardShortcut {
+  key: string;
+  ctrl?: boolean;
+  alt?: boolean;
+  shift?: boolean;
+  description: string;
+  action: () => void;
+}
+
+/**
+ * Hook for managing keyboard shortcuts
+ */
+export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[], enabled: boolean = true) {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Find matching shortcut
+      const shortcut = shortcuts.find((s) => {
+        const keyMatch = s.key.toLowerCase() === event.key.toLowerCase();
+        const ctrlMatch = s.ctrl ? (event.ctrlKey || event.metaKey) : !event.ctrlKey && !event.metaKey;
+        const altMatch = s.alt ? event.altKey : !event.altKey;
+        const shiftMatch = s.shift ? event.shiftKey : !event.shiftKey;
+
+        return keyMatch && ctrlMatch && altMatch && shiftMatch;
+      });
+
+      if (shortcut) {
+        event.preventDefault();
+        shortcut.action();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [shortcuts, enabled]);
+}
+
+/**
+ * Format shortcut key combination for display
+ */
+export function formatShortcut(shortcut: KeyboardShortcut): string {
+  const parts: string[] = [];
+
+  // Use Cmd on Mac, Ctrl on others
+  const isMac = typeof window !== 'undefined' && /Mac|iPhone|iPod|iPad/.test(navigator.platform);
+
+  if (shortcut.ctrl) {
+    parts.push(isMac ? '⌘' : 'Ctrl');
+  }
+
+  if (shortcut.alt) {
+    parts.push(isMac ? '⌥' : 'Alt');
+  }
+
+  if (shortcut.shift) {
+    parts.push(isMac ? '⇧' : 'Shift');
+  }
+
+  parts.push(shortcut.key.toUpperCase());
+
+  return parts.join(' + ');
+}

lib/media/storage/history.ts

@@ -0,0 +1,88 @@
+import type { ConversionHistoryItem } from '@/types/media';
+
+const HISTORY_KEY = 'convert-ui-history';
+const MAX_HISTORY_ITEMS = 10;
+
+/**
+ * Get conversion history from localStorage
+ */
+export function getHistory(): ConversionHistoryItem[] {
+  if (typeof window === 'undefined') return [];
+
+  try {
+    const stored = localStorage.getItem(HISTORY_KEY);
+    if (!stored) return [];
+
+    const history = JSON.parse(stored);
+    return Array.isArray(history) ? history : [];
+  } catch (error) {
+    console.error('Failed to load history:', error);
+    return [];
+  }
+}
+
+/**
+ * Add item to conversion history
+ */
+export function addToHistory(item: Omit<ConversionHistoryItem, 'id' | 'timestamp'>): void {
+  if (typeof window === 'undefined') return;
+
+  try {
+    const history = getHistory();
+
+    const newItem: ConversionHistoryItem = {
+      ...item,
+      id: Math.random().toString(36).substring(7),
+      timestamp: Date.now(),
+    };
+
+    // Add to beginning of array
+    history.unshift(newItem);
+
+    // Keep only the latest MAX_HISTORY_ITEMS
+    const trimmed = history.slice(0, MAX_HISTORY_ITEMS);
+
+    localStorage.setItem(HISTORY_KEY, JSON.stringify(trimmed));
+
+    // Dispatch custom event for same-page updates
+    window.dispatchEvent(new CustomEvent('conversionHistoryUpdated'));
+  } catch (error) {
+    console.error('Failed to save history:', error);
+  }
+}
+
+/**
+ * Clear all conversion history
+ */
+export function clearHistory(): void {
+  if (typeof window === 'undefined') return;
+
+  try {
+    localStorage.removeItem(HISTORY_KEY);
+  } catch (error) {
+    console.error('Failed to clear history:', error);
+  }
+}
+
+/**
+ * Remove single item from history
+ */
+export function removeHistoryItem(id: string): void {
+  if (typeof window === 'undefined') return;
+
+  try {
+    const history = getHistory();
+    const filtered = history.filter((item) => item.id !== id);
+    localStorage.setItem(HISTORY_KEY, JSON.stringify(filtered));
+  } catch (error) {
+    console.error('Failed to remove history item:', error);
+  }
+}
+
+/**
+ * Get history item by ID
+ */
+export function getHistoryItem(id: string): ConversionHistoryItem | undefined {
+  const history = getHistory();
+  return history.find((item) => item.id === id);
+}

lib/media/storage/settings.ts

@@ -0,0 +1,73 @@
+export interface UserSettings {
+  // Quality preferences
+  defaultQualityPreset: 'high-quality' | 'balanced' | 'small-file' | 'web-optimized';
+
+  // Behavior preferences
+  autoStartConversion: boolean;
+  showConversionHistory: boolean;
+  clearHistoryOnReset: boolean;
+
+  // Default formats (optional)
+  defaultVideoFormat?: string;
+  defaultAudioFormat?: string;
+  defaultImageFormat?: string;
+}
+
+const SETTINGS_KEY = 'convert-ui-settings';
+
+const DEFAULT_SETTINGS: UserSettings = {
+  defaultQualityPreset: 'balanced',
+  autoStartConversion: false,
+  showConversionHistory: true,
+  clearHistoryOnReset: false,
+};
+
+/**
+ * Get user settings from localStorage
+ */
+export function getSettings(): UserSettings {
+  if (typeof window === 'undefined') return DEFAULT_SETTINGS;
+
+  try {
+    const stored = localStorage.getItem(SETTINGS_KEY);
+    if (!stored) return DEFAULT_SETTINGS;
+
+    const settings = JSON.parse(stored);
+    return { ...DEFAULT_SETTINGS, ...settings };
+  } catch (error) {
+    console.error('Failed to load settings:', error);
+    return DEFAULT_SETTINGS;
+  }
+}
+
+/**
+ * Save user settings to localStorage
+ */
+export function saveSettings(settings: Partial<UserSettings>): void {
+  if (typeof window === 'undefined') return;
+
+  try {
+    const current = getSettings();
+    const updated = { ...current, ...settings };
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify(updated));
+
+    // Dispatch custom event for settings updates
+    window.dispatchEvent(new CustomEvent('settingsUpdated', { detail: updated }));
+  } catch (error) {
+    console.error('Failed to save settings:', error);
+  }
+}
+
+/**
+ * Reset settings to defaults
+ */
+export function resetSettings(): void {
+  if (typeof window === 'undefined') return;
+
+  try {
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify(DEFAULT_SETTINGS));
+    window.dispatchEvent(new CustomEvent('settingsUpdated', { detail: DEFAULT_SETTINGS }));
+  } catch (error) {
+    console.error('Failed to reset settings:', error);
+  }
+}

lib/media/utils/fileUtils.ts

@@ -0,0 +1,114 @@
+/**
+ * Format file size in human-readable format
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${Math.round(bytes / Math.pow(k, i) * 100) / 100} ${sizes[i]}`;
+}
+
+/**
+ * Validate file size (max 500MB for browser processing)
+ */
+export function validateFileSize(file: File, maxSizeMB: number = 500): boolean {
+  const maxBytes = maxSizeMB * 1024 * 1024;
+  return file.size <= maxBytes;
+}
+
+/**
+ * Get file extension from filename
+ */
+export function getFileExtension(filename: string): string {
+  const lastDot = filename.lastIndexOf('.');
+  return lastDot === -1 ? '' : filename.substring(lastDot + 1).toLowerCase();
+}
+
+/**
+ * Get filename without extension
+ */
+export function getFilenameWithoutExtension(filename: string): string {
+  const lastDot = filename.lastIndexOf('.');
+  return lastDot === -1 ? filename : filename.substring(0, lastDot);
+}
+
+/**
+ * Generate output filename
+ */
+export function generateOutputFilename(inputFilename: string, outputExtension: string): string {
+  const basename = getFilenameWithoutExtension(inputFilename);
+  return `${basename}.${outputExtension}`;
+}
+
+/**
+ * Download blob as file
+ */
+export function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Read file as ArrayBuffer
+ */
+export async function readFileAsArrayBuffer(file: File): Promise<ArrayBuffer> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as ArrayBuffer);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+/**
+ * Read file as Data URL
+ */
+export async function readFileAsDataURL(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+
+/**
+ * Validate file type against allowed MIME types
+ */
+export function validateFileType(file: File, allowedTypes: string[]): boolean {
+  return allowedTypes.some((type) => {
+    if (type.endsWith('/*')) {
+      const category = type.split('/')[0];
+      return file.type.startsWith(`${category}/`);
+    }
+    return file.type === type;
+  });
+}
+
+/**
+ * Download multiple blobs as a ZIP file
+ */
+export async function downloadBlobsAsZip(files: Array<{ blob: Blob; filename: string }>, zipFilename: string): Promise<void> {
+  const JSZip = (await import('jszip')).default;
+  const zip = new JSZip();
+
+  // Add all files to ZIP
+  files.forEach(({ blob, filename }) => {
+    zip.file(filename, blob);
+  });
+
+  // Generate ZIP blob
+  const zipBlob = await zip.generateAsync({ type: 'blob' });
+
+  // Download ZIP
+  downloadBlob(zipBlob, zipFilename);
+}

lib/media/utils/formatMappings.ts

@@ -0,0 +1,272 @@
+import type { ConversionFormat, FormatPreset } from '@/types/media';
+
+/**
+ * All supported conversion formats
+ */
+export const SUPPORTED_FORMATS: ConversionFormat[] = [
+  // Video formats (FFmpeg)
+  {
+    id: 'mp4',
+    name: 'MP4',
+    extension: 'mp4',
+    mimeType: 'video/mp4',
+    category: 'video',
+    converter: 'ffmpeg',
+    description: 'MPEG-4 video format',
+  },
+  {
+    id: 'webm',
+    name: 'WebM',
+    extension: 'webm',
+    mimeType: 'video/webm',
+    category: 'video',
+    converter: 'ffmpeg',
+    description: 'WebM video format',
+  },
+  {
+    id: 'avi',
+    name: 'AVI',
+    extension: 'avi',
+    mimeType: 'video/x-msvideo',
+    category: 'video',
+    converter: 'ffmpeg',
+    description: 'Audio Video Interleave',
+  },
+  {
+    id: 'mov',
+    name: 'MOV',
+    extension: 'mov',
+    mimeType: 'video/quicktime',
+    category: 'video',
+    converter: 'ffmpeg',
+    description: 'QuickTime movie',
+  },
+  {
+    id: 'mkv',
+    name: 'MKV',
+    extension: 'mkv',
+    mimeType: 'video/x-matroska',
+    category: 'video',
+    converter: 'ffmpeg',
+    description: 'Matroska video',
+  },
+
+  // Audio formats (FFmpeg)
+  {
+    id: 'mp3',
+    name: 'MP3',
+    extension: 'mp3',
+    mimeType: 'audio/mpeg',
+    category: 'audio',
+    converter: 'ffmpeg',
+    description: 'MPEG audio layer 3',
+  },
+  {
+    id: 'wav',
+    name: 'WAV',
+    extension: 'wav',
+    mimeType: 'audio/wav',
+    category: 'audio',
+    converter: 'ffmpeg',
+    description: 'Waveform audio',
+  },
+  {
+    id: 'ogg',
+    name: 'OGG',
+    extension: 'ogg',
+    mimeType: 'audio/ogg',
+    category: 'audio',
+    converter: 'ffmpeg',
+    description: 'Ogg Vorbis audio',
+  },
+  {
+    id: 'aac',
+    name: 'AAC',
+    extension: 'aac',
+    mimeType: 'audio/aac',
+    category: 'audio',
+    converter: 'ffmpeg',
+    description: 'Advanced Audio Coding',
+  },
+  {
+    id: 'flac',
+    name: 'FLAC',
+    extension: 'flac',
+    mimeType: 'audio/flac',
+    category: 'audio',
+    converter: 'ffmpeg',
+    description: 'Free Lossless Audio Codec',
+  },
+
+  // Image formats (ImageMagick)
+  {
+    id: 'png',
+    name: 'PNG',
+    extension: 'png',
+    mimeType: 'image/png',
+    category: 'image',
+    converter: 'imagemagick',
+    description: 'Portable Network Graphics',
+  },
+  {
+    id: 'jpg',
+    name: 'JPG',
+    extension: 'jpg',
+    mimeType: 'image/jpeg',
+    category: 'image',
+    converter: 'imagemagick',
+    description: 'JPEG image',
+  },
+  {
+    id: 'webp',
+    name: 'WebP',
+    extension: 'webp',
+    mimeType: 'image/webp',
+    category: 'image',
+    converter: 'imagemagick',
+    description: 'WebP image format',
+  },
+  {
+    id: 'gif',
+    name: 'GIF',
+    extension: 'gif',
+    mimeType: 'image/gif',
+    category: 'image',
+    converter: 'imagemagick',
+    description: 'Graphics Interchange Format',
+  },
+  {
+    id: 'bmp',
+    name: 'BMP',
+    extension: 'bmp',
+    mimeType: 'image/bmp',
+    category: 'image',
+    converter: 'imagemagick',
+    description: 'Bitmap image',
+  },
+  {
+    id: 'tiff',
+    name: 'TIFF',
+    extension: 'tiff',
+    mimeType: 'image/tiff',
+    category: 'image',
+    converter: 'imagemagick',
+    description: 'Tagged Image File Format',
+  },
+  {
+    id: 'svg',
+    name: 'SVG',
+    extension: 'svg',
+    mimeType: 'image/svg+xml',
+    category: 'image',
+    converter: 'imagemagick',
+    description: 'Scalable Vector Graphics',
+  },
+];
+
+/**
+ * Format presets for common conversions
+ */
+export const FORMAT_PRESETS: FormatPreset[] = [
+  {
+    id: 'web-video',
+    name: 'Web Video',
+    description: 'Optimize video for web playback (VP8 for better compatibility)',
+    category: 'video',
+    sourceFormats: ['mp4', 'avi', 'mov', 'mkv'],
+    targetFormat: 'webm',
+    options: {
+      videoCodec: 'libvpx',
+      videoBitrate: '1M',
+      audioCodec: 'libvorbis',
+      audioBitrate: '128k',
+    },
+  },
+  {
+    id: 'web-image',
+    name: 'Web Image',
+    description: 'Optimize image for web',
+    category: 'image',
+    sourceFormats: ['png', 'jpg', 'bmp', 'tiff'],
+    targetFormat: 'webp',
+    options: {
+      imageQuality: 85,
+    },
+  },
+  {
+    id: 'audio-compress',
+    name: 'Compress Audio',
+    description: 'Reduce audio file size',
+    category: 'audio',
+    sourceFormats: ['wav', 'flac'],
+    targetFormat: 'mp3',
+    options: {
+      audioBitrate: '192k',
+      audioCodec: 'libmp3lame',
+    },
+  },
+  {
+    id: 'video-gif',
+    name: 'Video to GIF',
+    description: 'Convert video to animated GIF',
+    category: 'video',
+    sourceFormats: ['mp4', 'webm', 'avi', 'mov'],
+    targetFormat: 'gif',
+    options: {
+      videoFps: 15,
+      videoResolution: '480x-1',
+    },
+  },
+];
+
+/**
+ * Get format by ID
+ */
+export function getFormatById(id: string): ConversionFormat | undefined {
+  return SUPPORTED_FORMATS.find((f) => f.id === id);
+}
+
+/**
+ * Get format by extension
+ */
+export function getFormatByExtension(extension: string): ConversionFormat | undefined {
+  return SUPPORTED_FORMATS.find((f) => f.extension === extension.toLowerCase());
+}
+
+/**
+ * Get format by MIME type
+ */
+export function getFormatByMimeType(mimeType: string): ConversionFormat | undefined {
+  return SUPPORTED_FORMATS.find((f) => f.mimeType === mimeType);
+}
+
+/**
+ * Get all formats by category
+ */
+export function getFormatsByCategory(category: string): ConversionFormat[] {
+  return SUPPORTED_FORMATS.filter((f) => f.category === category);
+}
+
+/**
+ * Get compatible output formats for input format
+ */
+export function getCompatibleFormats(inputFormat: ConversionFormat): ConversionFormat[] {
+  // Same category and same converter
+  return SUPPORTED_FORMATS.filter(
+    (f) => f.category === inputFormat.category && f.converter === inputFormat.converter && f.id !== inputFormat.id
+  );
+}
+
+/**
+ * Check if conversion is supported
+ */
+export function isConversionSupported(
+  inputFormat: ConversionFormat,
+  outputFormat: ConversionFormat
+): boolean {
+  return (
+    inputFormat.category === outputFormat.category &&
+    inputFormat.converter === outputFormat.converter &&
+    inputFormat.id !== outputFormat.id
+  );
+}

lib/media/utils/formatPresets.ts

@@ -0,0 +1,188 @@
+import type { ConversionOptions } from '@/types/media';
+
+export interface FormatPreset {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  category: 'video' | 'audio' | 'image';
+  outputFormat: string;
+  options: ConversionOptions;
+}
+
+/**
+ * Predefined format presets for common use cases
+ */
+export const FORMAT_PRESETS: FormatPreset[] = [
+  // Video Presets
+  {
+    id: 'youtube-video',
+    name: 'YouTube Video',
+    description: '1080p MP4, optimized for YouTube',
+    icon: '🎬',
+    category: 'video',
+    outputFormat: 'mp4',
+    options: {
+      videoCodec: 'libx264',
+      videoBitrate: '5M',
+      videoResolution: '1920x-1',
+      videoFps: 30,
+      audioCodec: 'aac',
+      audioBitrate: '192k',
+    },
+  },
+  {
+    id: 'instagram-video',
+    name: 'Instagram Video',
+    description: 'Square 1:1 format for Instagram',
+    icon: '📸',
+    category: 'video',
+    outputFormat: 'mp4',
+    options: {
+      videoCodec: 'libx264',
+      videoBitrate: '3M',
+      videoResolution: '1080x-1', // Will be cropped to square
+      videoFps: 30,
+      audioCodec: 'aac',
+      audioBitrate: '128k',
+    },
+  },
+  {
+    id: 'twitter-video',
+    name: 'Twitter Video',
+    description: '720p, optimized for Twitter',
+    icon: '🐦',
+    category: 'video',
+    outputFormat: 'mp4',
+    options: {
+      videoCodec: 'libx264',
+      videoBitrate: '2M',
+      videoResolution: '1280x-1',
+      videoFps: 30,
+      audioCodec: 'aac',
+      audioBitrate: '128k',
+    },
+  },
+  {
+    id: 'web-video',
+    name: 'Web Optimized',
+    description: 'Small file size for web streaming',
+    icon: '🌐',
+    category: 'video',
+    outputFormat: 'mp4',
+    options: {
+      videoCodec: 'libx264',
+      videoBitrate: '1.5M',
+      videoResolution: '854x-1',
+      videoFps: 24,
+      audioCodec: 'aac',
+      audioBitrate: '96k',
+    },
+  },
+
+  // Audio Presets
+  {
+    id: 'podcast-audio',
+    name: 'Podcast',
+    description: 'MP3, optimized for voice',
+    icon: '🎙️',
+    category: 'audio',
+    outputFormat: 'mp3',
+    options: {
+      audioCodec: 'libmp3lame',
+      audioBitrate: '128k',
+      audioSampleRate: 44100,
+      audioChannels: 2,
+    },
+  },
+  {
+    id: 'music-high-quality',
+    name: 'High Quality Music',
+    description: 'MP3, 320kbps for music',
+    icon: '🎵',
+    category: 'audio',
+    outputFormat: 'mp3',
+    options: {
+      audioCodec: 'libmp3lame',
+      audioBitrate: '320k',
+      audioSampleRate: 48000,
+      audioChannels: 2,
+    },
+  },
+  {
+    id: 'audiobook',
+    name: 'Audiobook',
+    description: 'Mono, small file size',
+    icon: '📚',
+    category: 'audio',
+    outputFormat: 'mp3',
+    options: {
+      audioCodec: 'libmp3lame',
+      audioBitrate: '64k',
+      audioSampleRate: 22050,
+      audioChannels: 1,
+    },
+  },
+
+  // Image Presets
+  {
+    id: 'web-thumbnail',
+    name: 'Web Thumbnail',
+    description: 'JPG, 800px width, optimized',
+    icon: '🖼️',
+    category: 'image',
+    outputFormat: 'jpg',
+    options: {
+      imageQuality: 85,
+      imageWidth: 800,
+    },
+  },
+  {
+    id: 'hd-image',
+    name: 'HD Image',
+    description: 'PNG, high quality, lossless',
+    icon: '🎨',
+    category: 'image',
+    outputFormat: 'png',
+    options: {
+      imageQuality: 100,
+    },
+  },
+  {
+    id: 'social-media-image',
+    name: 'Social Media',
+    description: 'JPG, 1200px, optimized',
+    icon: '📱',
+    category: 'image',
+    outputFormat: 'jpg',
+    options: {
+      imageQuality: 90,
+      imageWidth: 1200,
+    },
+  },
+  {
+    id: 'web-optimized-image',
+    name: 'Web Optimized',
+    description: 'WebP, small file size',
+    icon: '⚡',
+    category: 'image',
+    outputFormat: 'webp',
+    options: {
+      imageQuality: 80,
+    },
+  },
+];
+
+/**
+ * Get presets by category
+ */
+export function getPresetsByCategory(category: 'video' | 'audio' | 'image'): FormatPreset[] {
+  return FORMAT_PRESETS.filter(preset => preset.category === category);
+}
+
+/**
+ * Get preset by ID
+ */
+export function getPresetById(id: string): FormatPreset | undefined {
+  return FORMAT_PRESETS.find(preset => preset.id === id);
+}

lib/media/wasm/wasmLoader.ts

@@ -0,0 +1,157 @@
+import type { FFmpeg } from '@ffmpeg/ffmpeg';
+import type { ConverterEngine, WASMModuleState } from '@/types/media';
+
+/**
+ * WASM module loading state
+ */
+const moduleState: WASMModuleState = {
+  ffmpeg: false,
+  imagemagick: false,
+};
+
+/**
+ * Cached WASM instances
+ */
+let ffmpegInstance: FFmpeg | null = null;
+let imagemagickInstance: any = null;
+
+/**
+ * Load FFmpeg WASM module
+ */
+export async function loadFFmpeg(): Promise<FFmpeg> {
+  if (ffmpegInstance && moduleState.ffmpeg) {
+    return ffmpegInstance;
+  }
+
+  try {
+    const { FFmpeg } = await import('@ffmpeg/ffmpeg');
+    const { toBlobURL } = await import('@ffmpeg/util');
+
+    ffmpegInstance = new FFmpeg();
+
+    // Load core and dependencies
+    const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd';
+
+    ffmpegInstance.on('log', ({ message }) => {
+      console.log('[FFmpeg]', message);
+    });
+
+    await ffmpegInstance.load({
+      coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
+      wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
+    });
+
+    moduleState.ffmpeg = true;
+    console.log('FFmpeg loaded successfully');
+
+    return ffmpegInstance;
+  } catch (error) {
+    console.error('Failed to load FFmpeg:', error);
+    throw new Error('Failed to load FFmpeg WASM module');
+  }
+}
+
+/**
+ * Load ImageMagick WASM module
+ */
+export async function loadImageMagick(): Promise<any> {
+  if (imagemagickInstance && moduleState.imagemagick) {
+    return imagemagickInstance;
+  }
+
+  try {
+    const { initializeImageMagick } = await import('@imagemagick/magick-wasm');
+
+    // Initialize ImageMagick with WASM file from public directory
+    // In production (static export), this will be served from /wasm/magick.wasm
+    const wasmUrl = '/wasm/magick.wasm';
+
+    console.log('[ImageMagick] Attempting to load WASM from:', wasmUrl);
+
+    // Test fetch the WASM file first to debug
+    try {
+      const response = await fetch(wasmUrl);
+      console.log('[ImageMagick] WASM fetch response:', {
+        ok: response.ok,
+        status: response.status,
+        contentType: response.headers.get('content-type'),
+        contentLength: response.headers.get('content-length'),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch WASM file: ${response.status} ${response.statusText}`);
+      }
+
+      const arrayBuffer = await response.arrayBuffer();
+      console.log('[ImageMagick] WASM file size:', arrayBuffer.byteLength, 'bytes');
+
+      if (arrayBuffer.byteLength === 0) {
+        throw new Error('WASM file is empty');
+      }
+
+      // Now initialize with the buffer directly
+      await initializeImageMagick(arrayBuffer);
+    } catch (fetchError) {
+      console.error('[ImageMagick] Failed to fetch WASM:', fetchError);
+      throw fetchError;
+    }
+
+    const ImageMagick = await import('@imagemagick/magick-wasm');
+
+    imagemagickInstance = ImageMagick;
+    moduleState.imagemagick = true;
+    console.log('[ImageMagick] Loaded and initialized successfully');
+
+    return imagemagickInstance;
+  } catch (error) {
+    console.error('[ImageMagick] Failed to load:', error);
+    throw new Error(`Failed to load ImageMagick WASM module: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+/**
+ * Get loaded module state
+ */
+export function getModuleState(): WASMModuleState {
+  return { ...moduleState };
+}
+
+/**
+ * Check if a specific module is loaded
+ */
+export function isModuleLoaded(engine: ConverterEngine): boolean {
+  return moduleState[engine];
+}
+
+/**
+ * Load appropriate WASM module for converter engine
+ */
+export async function loadModule(engine: ConverterEngine): Promise<any> {
+  switch (engine) {
+    case 'ffmpeg':
+      return loadFFmpeg();
+    case 'imagemagick':
+      return loadImageMagick();
+    default:
+      throw new Error(`Unknown converter engine: ${engine}`);
+  }
+}
+
+/**
+ * Unload all WASM modules and free memory
+ */
+export function unloadAll(): void {
+  if (ffmpegInstance) {
+    // FFmpeg doesn't have an explicit unload method
+    // Just null the instance
+    ffmpegInstance = null;
+    moduleState.ffmpeg = false;
+  }
+
+  if (imagemagickInstance) {
+    imagemagickInstance = null;
+    moduleState.imagemagick = false;
+  }
+
+  console.log('All WASM modules unloaded');
+}

package.json

@@ -9,6 +9,9 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@ffmpeg/ffmpeg": "^0.12.15",
+    "@ffmpeg/util": "^0.12.2",
+    "@imagemagick/magick-wasm": "^0.0.38",
     "@tanstack/react-query": "^5.90.21",
     "@valknarthing/pastel-wasm": "^0.1.0",
     "class-variance-authority": "^0.7.1",
@@ -19,6 +22,7 @@
     "framer-motion": "^12.34.3",
     "fuse.js": "^7.1.0",
     "html-to-image": "^1.11.13",
+    "jszip": "^3.10.1",
     "lucide-react": "^0.575.0",
     "next": "^16.1.6",
     "radix-ui": "^1.4.3",

pnpm-lock.yaml

@@ -8,6 +8,15 @@ importers:
 
   .:
     dependencies:
+      '@ffmpeg/ffmpeg':
+        specifier: ^0.12.15
+        version: 0.12.15
+      '@ffmpeg/util':
+        specifier: ^0.12.2
+        version: 0.12.2
+      '@imagemagick/magick-wasm':
+        specifier: ^0.0.38
+        version: 0.0.38
       '@tanstack/react-query':
         specifier: ^5.90.21
         version: 5.90.21(react@19.2.4)
@@ -38,6 +47,9 @@ importers:
       html-to-image:
         specifier: ^1.11.13
         version: 1.11.13
+      jszip:
+        specifier: ^3.10.1
+        version: 3.10.1
       lucide-react:
         specifier: ^0.575.0
         version: 0.575.0(react@19.2.4)
@@ -302,6 +314,18 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@ffmpeg/ffmpeg@0.12.15':
+    resolution: {integrity: sha512-1C8Obr4GsN3xw+/1Ww6PFM84wSQAGsdoTuTWPOj2OizsRDLT4CXTaVjPhkw6ARyDus1B9X/L2LiXHqYYsGnRFw==}
+    engines: {node: '>=18.x'}
+
+  '@ffmpeg/types@0.12.4':
+    resolution: {integrity: sha512-k9vJQNBGTxE5AhYDtOYR5rO5fKsspbg51gbcwtbkw2lCdoIILzklulcjJfIDwrtn7XhDeF2M+THwJ2FGrLeV6A==}
+    engines: {node: '>=16.x'}
+
+  '@ffmpeg/util@0.12.2':
+    resolution: {integrity: sha512-ouyoW+4JB7WxjeZ2y6KpRvB+dLp7Cp4ro8z0HIVpZVCM7AwFlHa0c4R8Y/a4M3wMqATpYKhC7lSFHQ0T11MEDw==}
+    engines: {node: '>=18.x'}
+
   '@floating-ui/core@1.7.4':
     resolution: {integrity: sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==}
 
@@ -339,6 +363,9 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@imagemagick/magick-wasm@0.0.38':
+    resolution: {integrity: sha512-xg3q6ZMqUADyyy0h/1IndT9DUWUXY5lRhevF2WB+AYvphJ5yraH+R0IGO7H7DFnLSMrJ6zsxEbXfOnhNfark9w==}
+
   '@img/colour@1.0.0':
     resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
     engines: {node: '>=18'}
@@ -1911,6 +1938,9 @@ packages:
     resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
     engines: {node: '>=18'}
 
+  core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+
   cors@2.8.6:
     resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
     engines: {node: '>= 0.10'}
@@ -2527,6 +2557,9 @@ packages:
     resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
     engines: {node: '>= 4'}
 
+  immediate@3.0.6:
+    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
+
   import-fresh@3.3.1:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
@@ -2716,6 +2749,9 @@ packages:
     resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
     engines: {node: '>=16'}
 
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
   isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
 
@@ -2783,6 +2819,9 @@ packages:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
+  jszip@3.10.1:
+    resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -2805,6 +2844,9 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lie@3.3.0:
+    resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
+
   lightningcss-android-arm64@1.31.1:
     resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
     engines: {node: '>= 12.0.0'}
@@ -3180,6 +3222,9 @@ packages:
   package-manager-detector@1.6.0:
     resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
 
+  pako@1.0.11:
+    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -3263,6 +3308,9 @@ packages:
     resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
     engines: {node: '>=18'}
 
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
   prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -3354,6 +3402,9 @@ packages:
     resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
     engines: {node: '>=0.10.0'}
 
+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+
   recast@0.23.11:
     resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
     engines: {node: '>= 4'}
@@ -3417,6 +3468,9 @@ packages:
     resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
 
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
   safe-push-apply@1.0.0:
     resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
     engines: {node: '>= 0.4'}
@@ -3460,6 +3514,9 @@ packages:
     resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
     engines: {node: '>= 0.4'}
 
+  setimmediate@1.0.5:
+    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
@@ -3568,6 +3625,9 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
   stringify-object@5.0.0:
     resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
     engines: {node: '>=14.16'}
@@ -4163,6 +4223,14 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
+  '@ffmpeg/ffmpeg@0.12.15':
+    dependencies:
+      '@ffmpeg/types': 0.12.4
+
+  '@ffmpeg/types@0.12.4': {}
+
+  '@ffmpeg/util@0.12.2': {}
+
   '@floating-ui/core@1.7.4':
     dependencies:
       '@floating-ui/utils': 0.2.10
@@ -4195,6 +4263,8 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@imagemagick/magick-wasm@0.0.38': {}
+
   '@img/colour@1.0.0':
     optional: true
 
@@ -5748,6 +5818,8 @@ snapshots:
 
   cookie@1.1.1: {}
 
+  core-util-is@1.0.3: {}
+
   cors@2.8.6:
     dependencies:
       object-assign: 4.1.1
@@ -6504,6 +6576,8 @@ snapshots:
 
   ignore@7.0.5: {}
 
+  immediate@3.0.6: {}
+
   import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
@@ -6671,6 +6745,8 @@ snapshots:
     dependencies:
       is-inside-container: 1.0.0
 
+  isarray@1.0.0: {}
+
   isarray@2.0.5: {}
 
   isexe@2.0.0: {}
@@ -6729,6 +6805,13 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
+  jszip@3.10.1:
+    dependencies:
+      lie: 3.3.0
+      pako: 1.0.11
+      readable-stream: 2.3.8
+      setimmediate: 1.0.5
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -6748,6 +6831,10 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lie@3.3.0:
+    dependencies:
+      immediate: 3.0.6
+
   lightningcss-android-arm64@1.31.1:
     optional: true
 
@@ -7150,6 +7237,8 @@ snapshots:
 
   package-manager-detector@1.6.0: {}
 
+  pako@1.0.11: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -7214,6 +7303,8 @@ snapshots:
     dependencies:
       parse-ms: 4.0.0
 
+  process-nextick-args@2.0.1: {}
+
   prompts@2.4.2:
     dependencies:
       kleur: 3.0.3
@@ -7351,6 +7442,16 @@ snapshots:
 
   react@19.2.4: {}
 
+  readable-stream@2.3.8:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+
   recast@0.23.11:
     dependencies:
       ast-types: 0.16.1
@@ -7435,6 +7536,8 @@ snapshots:
       has-symbols: 1.1.0
       isarray: 2.0.5
 
+  safe-buffer@5.1.2: {}
+
   safe-push-apply@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -7501,6 +7604,8 @@ snapshots:
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
 
+  setimmediate@1.0.5: {}
+
   setprototypeof@1.2.0: {}
 
   shadcn@3.8.5(@types/node@25.3.0)(typescript@5.9.3):
@@ -7703,6 +7808,10 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  string_decoder@1.1.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
   stringify-object@5.0.0:
     dependencies:
       get-own-enumerable-keys: 1.0.0

types/media.ts

@@ -0,0 +1,121 @@
+/**
+ * Supported converter engines
+ */
+export type ConverterEngine = 'ffmpeg' | 'imagemagick';
+
+/**
+ * File category based on type
+ */
+export type FileCategory = 'video' | 'audio' | 'image';
+
+/**
+ * Conversion status
+ */
+export type ConversionStatus = 'pending' | 'loading' | 'processing' | 'completed' | 'error';
+
+/**
+ * Supported conversion format
+ */
+export interface ConversionFormat {
+  id: string;
+  name: string;
+  extension: string;
+  mimeType: string;
+  category: FileCategory;
+  converter: ConverterEngine;
+  description?: string;
+}
+
+/**
+ * Conversion job configuration
+ */
+export interface ConversionJob {
+  id: string;
+  inputFile: File;
+  inputFormat: ConversionFormat;
+  outputFormat: ConversionFormat;
+  options: ConversionOptions;
+  status: ConversionStatus;
+  progress: number;
+  result?: Blob;
+  error?: string;
+  startTime?: number;
+  endTime?: number;
+}
+
+/**
+ * Generic conversion options
+ */
+export interface ConversionOptions {
+  // Video options
+  videoBitrate?: string;
+  videoCodec?: string;
+  videoResolution?: string;
+  videoFps?: number;
+
+  // Audio options
+  audioBitrate?: string;
+  audioCodec?: string;
+  audioSampleRate?: number;
+  audioChannels?: number;
+
+  // Image options
+  imageQuality?: number;
+  imageWidth?: number;
+  imageHeight?: number;
+  imageFormat?: string;
+
+  // Generic options
+  [key: string]: string | number | boolean | undefined;
+}
+
+/**
+ * History item for conversion history
+ */
+export interface ConversionHistoryItem {
+  id: string;
+  inputFileName: string;
+  inputFormat: string;
+  outputFormat: string;
+  outputFileName: string;
+  timestamp: number;
+  fileSize: number;
+  result?: Blob;
+}
+
+/**
+ * Format preset for common conversions
+ */
+export interface FormatPreset {
+  id: string;
+  name: string;
+  description: string;
+  category: FileCategory;
+  sourceFormats: string[];
+  targetFormat: string;
+  options: ConversionOptions;
+  icon?: string;
+}
+
+/**
+ * WASM module loading state
+ */
+export interface WASMModuleState {
+  ffmpeg: boolean;
+  imagemagick: boolean;
+}
+
+/**
+ * Progress callback for conversion
+ */
+export type ProgressCallback = (progress: number) => void;
+
+/**
+ * Conversion result
+ */
+export interface ConversionResult {
+  success: boolean;
+  blob?: Blob;
+  error?: string;
+  duration?: number;
+}