feat: overhaul remove-background with effects pipeline, consolidate color tools

Remove Background:
- Two-phase flow: AI removes bg once, then effects adjust instantly
- Blur background effect with real-time CSS preview (portrait mode)
- Drop shadow effect with opacity control
- Gradient backgrounds with presets, custom colors, and angle
- Custom background image upload (including HEIC/HEIF)
- Solid color backgrounds moved from Python to Node.js/Sharp
- Effects-only API endpoint for instant re-renders without AI re-run
- HEIC/HEIF input support (decoded before passing to Python/rembg)
- Passport/ID photo checkbox defaults ON for People subject
- Before/after slider preserved when no effects active
- 15 comprehensive Playwright e2e tests

Color Tools:
- Consolidated 4 tools (brightness-contrast, saturation, color-channels,
  color-effects) into single "Adjust Colors" tool
- Added exposure, temperature, tint, hue, sharpness controls
- SVG filter-based live preview for all adjustments
- Backward-compatible URL redirects from old tool paths

Other fixes:
- Favicon tool: download button instead of auto-download
- Batch processing: HEIC filename extension fix
- File store: processedFilename field for proper batch downloads

apps/api/src/routes/tools/favicon.ts

@@ -1,4 +1,5 @@
 import { randomUUID } from "node:crypto";
+import { basename, extname } from "node:path";
 import archiver from "archiver";
 import type { FastifyInstance } from "fastify";
 import sharp from "sharp";
@@ -13,9 +14,14 @@ const FAVICON_SIZES = [
   { name: "android-chrome-512x512.png", size: 512, format: "png" as const },
 ];
 
+interface UploadedFile {
+  buffer: Buffer;
+  filename: string;
+}
+
 export function registerFavicon(app: FastifyInstance) {
   app.post("/api/v1/tools/favicon", async (request, reply) => {
-    let fileBuffer: Buffer | null = null;
+    const uploadedFiles: UploadedFile[] = [];
 
     try {
       const parts = request.parts();
@@ -25,7 +31,9 @@ export function registerFavicon(app: FastifyInstance) {
           for await (const chunk of part.file) {
             chunks.push(chunk);
           }
-          fileBuffer = Buffer.concat(chunks);
+          const buffer = Buffer.concat(chunks);
+          const filename = basename(part.filename ?? `image-${uploadedFiles.length + 1}`);
+          uploadedFiles.push({ buffer, filename });
         }
       }
     } catch (err) {
@@ -35,15 +43,13 @@ export function registerFavicon(app: FastifyInstance) {
       });
     }
 
-    if (!fileBuffer || fileBuffer.length === 0) {
+    if (uploadedFiles.length === 0) {
       return reply.status(400).send({ error: "No image file provided" });
     }
 
     try {
-      // Decode HEIC/HEIF if needed
-      fileBuffer = await ensureSharpCompat(fileBuffer);
-
       const jobId = randomUUID();
+      const isSingleFile = uploadedFiles.length === 1;
 
       reply.hijack();
       reply.raw.writeHead(200, {
@@ -55,44 +61,50 @@ export function registerFavicon(app: FastifyInstance) {
       const archive = archiver("zip", { zlib: { level: 5 } });
       archive.pipe(reply.raw);
 
-      // Generate each size
-      for (const icon of FAVICON_SIZES) {
-        const buffer = await sharp(fileBuffer)
-          .resize(icon.size, icon.size, { fit: "cover" })
-          .png()
-          .toBuffer();
+      for (const file of uploadedFiles) {
+        // Decode HEIC/HEIF if needed
+        const decoded = await ensureSharpCompat(file.buffer);
+        const stem = basename(file.filename, extname(file.filename));
+        // Single file: flat structure. Multiple files: per-image folders.
+        const prefix = isSingleFile ? "" : `${stem}/`;
 
-        archive.append(buffer, { name: icon.name });
-      }
+        // Generate each size
+        for (const icon of FAVICON_SIZES) {
+          const buffer = await sharp(decoded)
+            .resize(icon.size, icon.size, { fit: "cover" })
+            .png()
+            .toBuffer();
+          archive.append(buffer, { name: `${prefix}${icon.name}` });
+        }
 
-      // Generate ICO (use 16x16 and 32x32 PNGs embedded)
-      // Simple ICO format: just include the 32x32 PNG as an ICO
-      const ico32 = await sharp(fileBuffer).resize(32, 32, { fit: "cover" }).png().toBuffer();
-      archive.append(ico32, { name: "favicon.ico" });
+        // Generate ICO (32x32 PNG as ICO)
+        const ico32 = await sharp(decoded).resize(32, 32, { fit: "cover" }).png().toBuffer();
+        archive.append(ico32, { name: `${prefix}favicon.ico` });
 
-      // Generate manifest.json (for PWA)
-      const manifest = {
-        name: "App",
-        short_name: "App",
-        icons: [
-          { src: "/android-chrome-192x192.png", sizes: "192x192", type: "image/png" },
-          { src: "/android-chrome-512x512.png", sizes: "512x512", type: "image/png" },
-        ],
-        theme_color: "#ffffff",
-        background_color: "#ffffff",
-        display: "standalone",
-      };
-      archive.append(JSON.stringify(manifest, null, 2), { name: "manifest.json" });
+        // Generate manifest.json (for PWA)
+        const manifest = {
+          name: stem,
+          short_name: stem,
+          icons: [
+            { src: "/android-chrome-192x192.png", sizes: "192x192", type: "image/png" },
+            { src: "/android-chrome-512x512.png", sizes: "512x512", type: "image/png" },
+          ],
+          theme_color: "#ffffff",
+          background_color: "#ffffff",
+          display: "standalone",
+        };
+        archive.append(JSON.stringify(manifest, null, 2), { name: `${prefix}manifest.json` });
 
-      // Generate HTML snippet
-      const htmlSnippet = `<!-- Favicons -->
+        // Generate HTML snippet
+        const htmlSnippet = `<!-- Favicons -->
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 <link rel="manifest" href="/manifest.json">
 `;
-      archive.append(htmlSnippet, { name: "favicon-snippet.html" });
+        archive.append(htmlSnippet, { name: `${prefix}favicon-snippet.html` });
+      }
 
       await archive.finalize();
     } catch (err) {