Fix ImageConverter preview and add resize options

package.json

@@ -12,8 +12,6 @@
     "@goodtools/jdserialize": "^1.0.0",
     "@goodtools/meshrepair": "^0.1.1",
     "@goodtools/protobuf-decoder": "^1.0.0",
-    "@react-three/drei": "^9.92.7",
-    "@react-three/fiber": "^8.15.12",
     "@goodtools/wiregasm": "^1.9.0",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.13",
@@ -25,6 +23,8 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
+    "@react-three/drei": "^9.92.7",
+    "@react-three/fiber": "^8.15.12",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.8",
     "@tanstack/react-query": "^5.62.16",
@@ -52,6 +52,9 @@
     "tailwindcss": "^3.2.4",
     "tailwindcss-animate": "^1.0.7",
     "three": "^0.172.0",
+    "vite-plugin-top-level-await": "^1.6.0",
+    "vite-plugin-wasm": "^3.5.0",
+    "wasm-vips": "^0.0.16",
     "web-vitals": "^2.1.4",
     "xml-formatter": "^3.6.7",
     "zustand": "^4.1.5"

src/components/Sidebar.tsx

@@ -105,6 +105,7 @@ export function Sidebar() {
       [CATEGORIES.SECURITY]: [],
       [CATEGORIES.NETWORK]: [],
       [CATEGORIES['3D']]: [],
+      [CATEGORIES.IMAGE]: [],
     }
 
     const toolsToShow = searchQuery

src/config/routes.config.ts

@@ -20,6 +20,10 @@ export const ROUTES = {
   'json-escape': '/json-escape',
   'xml-formatter': '/xml',
   'stl-repair': '/stl-repair',
+  // Image tools
+  'image-converter': '/image-converter',
+  'image-transform': '/image-transform',
+  'image-compress': '/image-compress',
 } as const
 
 export type ToolKey = keyof typeof ROUTES

src/config/tools.config.tsx

@@ -16,6 +16,7 @@ import {
   Code2,
   Quote,
   Box,
+  ImageIcon,
 } from 'lucide-react'
 import { ROUTES } from './routes.config'
 import { CATEGORIES, type Tool } from '@/types/tool.types'
@@ -317,6 +318,22 @@ export const tools: Tool[] = [
       },
     ],
   },
+  {
+    title: 'Image Converter',
+    href: ROUTES['image-converter'],
+    description: 'Convert images between formats: JPEG, PNG, WebP, AVIF with quality control',
+    icon: ImageIcon,
+    categories: [CATEGORIES.IMAGE],
+    searchTags: ['image', 'convert', 'jpeg', 'png', 'webp', 'avif', 'format', 'photo'],
+    component: React.lazy(() => import('@/tools/ImageConverter')),
+    online: false,
+    dependencies: [
+      {
+        name: 'wasm-vips',
+        url: 'https://www.npmjs.com/package/wasm-vips',
+      },
+    ],
+  },
 ]
 
 /**

src/lib/categories.ts

@@ -1,4 +1,4 @@
-import { Layers, Code, Binary, Shield, Globe, Box, type LucideIcon } from 'lucide-react'
+import { Layers, Code, Binary, Shield, Globe, Box, Image, type LucideIcon } from 'lucide-react'
 import { CATEGORIES, type CategoryName, type Tool, type ToolCategory } from '@/types/tool.types'
 
 // Re-export for convenience
@@ -14,6 +14,7 @@ export const categories: ToolCategory[] = [
   { name: CATEGORIES.SECURITY, icon: Shield },
   { name: CATEGORIES.NETWORK, icon: Globe },
   { name: CATEGORIES['3D'], icon: Box },
+  { name: CATEGORIES.IMAGE, icon: Image },
 ]
 
 /**