the site is done i improved the UI/UX

app/api/merge/route.ts

@@ -10,6 +10,26 @@ function parseDataUrl(dataUrl: string): { mimeType: string; data: string } | nul
   return { mimeType: match[1] || "image/png", data: match[2] };
 }
 
+async function toInlineData(url: string): Promise<{ mimeType: string; data: string } | null> {
+  try {
+    if (url.startsWith('data:')) {
+      return parseDataUrl(url);
+    }
+    if (url.startsWith('http')) {
+      // Fetch HTTP URL and convert to base64
+      const res = await fetch(url);
+      const buf = await res.arrayBuffer();
+      const base64 = Buffer.from(buf).toString('base64');
+      const mimeType = res.headers.get('content-type') || 'image/jpeg';
+      return { mimeType, data: base64 };
+    }
+    return null;
+  } catch (e) {
+    console.error('Failed to process image URL:', url.substring(0, 100), e);
+    return null;
+  }
+}
+
 export async function POST(req: NextRequest) {
   try {
     const body = (await req.json()) as {
@@ -36,29 +56,52 @@ export async function POST(req: NextRequest) {
     const ai = new GoogleGenAI({ apiKey });
 
     // Build parts array: first the text prompt, then image inlineData parts
-    // Use provided prompt or generate a default one
-    const prompt = body.prompt || 
-      `You are provided with ${imgs.length} images. Each image may contain one or more people.
-      
-      Your task: Create a single new photorealistic image that combines ALL people from ALL ${imgs.length} provided images into one cohesive group photo.
-      
-      Requirements:
-      - Include EVERY person from EVERY input image (if an image has multiple people, include all of them)
-      - Combine all people into a single scene where they appear together
-      - Arrange them naturally (standing side by side, in rows, or in a natural group formation)
-      - Ensure all people are clearly visible and recognizable
-      - Match the lighting, shadows, and proportions to look realistic
-      - Preserve each person's original appearance, clothing, and characteristics
-      - The final composition should look like a genuine group photograph
-      
-      Output: One photorealistic image containing ALL people from ALL input images combined together.`;
+    // If no custom prompt, use default extraction-focused prompt
+    let prompt = body.prompt;
+    
+    if (!prompt) {
+      prompt = `MERGE TASK: You are provided with exactly ${imgs.length} source images.
 
+INSTRUCTIONS:
+1. EXTRACT the exact people/subjects from EACH provided image  
+2. DO NOT generate new people - use ONLY the people visible in the provided images
+3. COMBINE all extracted people into ONE single group photo
+4. The output must contain ALL people from ALL ${imgs.length} input images together
+
+Requirements:
+- Use the ACTUAL people from the provided images (do not create new ones)
+- If an image has multiple people, include ALL of them  
+- Arrange everyone naturally in the same scene
+- Match lighting and proportions realistically
+- Output exactly ONE image with everyone combined
+
+DO NOT create artistic interpretations or new people. EXTRACT and COMBINE the actual subjects from the provided photographs.`;
+    } else {
+      // Even with custom prompt, append extraction requirements
+      const enforcement = `\n\nIMPORTANT: Extract and use the EXACT people from the provided images. Do not generate new people or artistic interpretations. Combine the actual subjects from all ${imgs.length} images into one output.`;
+      prompt = `${prompt}${enforcement}`;
+    }
+
+    // Debug: Log what we're receiving
+    console.log(`[MERGE API] Received ${imgs.length} images to merge`);
+    console.log(`[MERGE API] Image types:`, imgs.map(img => {
+      if (img.startsWith('data:')) return 'data URL';
+      if (img.startsWith('http')) return 'HTTP URL';
+      return 'unknown';
+    }));
+    
     const parts: any[] = [{ text: prompt }];
     for (const url of imgs) {
-      const parsed = parseDataUrl(url);
-      if (!parsed) continue;
+      const parsed = await toInlineData(url);
+      if (!parsed) {
+        console.error('[MERGE API] Failed to parse image:', url.substring(0, 100));
+        continue;
+      }
       parts.push({ inlineData: { mimeType: parsed.mimeType, data: parsed.data } });
     }
+    
+    console.log(`[MERGE API] Sending ${parts.length - 1} images to model (prompt + images)`);
+    console.log(`[MERGE API] Prompt preview:`, prompt.substring(0, 200));
 
     const response = await ai.models.generateContent({
       model: "gemini-2.5-flash-image-preview",

app/api/process/route.ts

@@ -28,24 +28,40 @@ export async function POST(req: NextRequest) {
 
     const ai = new GoogleGenAI({ apiKey });
     
-    // Parse input image
-    let parsed = null;
-    if (body.image) {
-      if (body.image.startsWith('data:')) {
-        // It's already a data URL
-        parsed = parseDataUrl(body.image);
-      } else if (body.image.startsWith('http')) {
-        // It's an HTTP URL, we need to fetch and convert it
-        try {
-          const imageResponse = await fetch(body.image);
-          const arrayBuffer = await imageResponse.arrayBuffer();
-          const base64 = Buffer.from(arrayBuffer).toString('base64');
-          const mimeType = imageResponse.headers.get('content-type') || 'image/jpeg';
-          parsed = { mimeType, data: base64 };
-        } catch (e) {
-          return NextResponse.json({ error: "Failed to fetch image from URL" }, { status: 400 });
+    // Helpers
+    const toInlineDataFromAny = async (url: string): Promise<{ mimeType: string; data: string } | null> => {
+      if (!url) return null;
+      try {
+        if (url.startsWith('data:')) {
+          return parseDataUrl(url);
+        }
+        if (url.startsWith('http')) {
+          const res = await fetch(url);
+          const buf = await res.arrayBuffer();
+          const base64 = Buffer.from(buf).toString('base64');
+          const mimeType = res.headers.get('content-type') || 'image/jpeg';
+          return { mimeType, data: base64 };
         }
+        if (url.startsWith('/')) {
+          const host = req.headers.get('host') ?? 'localhost:3000';
+          const proto = req.headers.get('x-forwarded-proto') ?? 'http';
+          const absolute = `${proto}://${host}${url}`;
+          const res = await fetch(absolute);
+          const buf = await res.arrayBuffer();
+          const base64 = Buffer.from(buf).toString('base64');
+          const mimeType = res.headers.get('content-type') || 'image/png';
+          return { mimeType, data: base64 };
+        }
+        return null;
+      } catch {
+        return null;
       }
+    };
+
+    // Parse input image
+    let parsed = null as null | { mimeType: string; data: string };
+    if (body.image) {
+      parsed = await toInlineDataFromAny(body.image);
     }
     
     if (!parsed) {
@@ -55,6 +71,9 @@ export async function POST(req: NextRequest) {
     // Build combined prompt from all accumulated parameters
     const prompts: string[] = [];
     const params = body.params || {};
+
+    // We'll collect additional inline image parts (references)
+    const referenceParts: { inlineData: { mimeType: string; data: string } }[] = [];
     
     // Background modifications
     if (params.backgroundType) {
@@ -64,7 +83,9 @@ export async function POST(req: NextRequest) {
       } else if (bgType === "image") {
         prompts.push(`Change the background to ${params.backgroundImage || "a beautiful beach scene"}.`);
       } else if (bgType === "upload" && params.customBackgroundImage) {
-        prompts.push(`Replace the background with the uploaded custom background image, ensuring proper lighting and perspective matching.`);
+        prompts.push(`Replace the background using the provided custom background reference image (attached below). Ensure perspective and lighting match.`);
+        const bgRef = await toInlineDataFromAny(params.customBackgroundImage);
+        if (bgRef) referenceParts.push({ inlineData: bgRef });
       } else if (params.customPrompt) {
         prompts.push(params.customPrompt);
       }
@@ -72,21 +93,23 @@ export async function POST(req: NextRequest) {
     
     // Clothes modifications
     if (params.clothesImage) {
-      // If clothesImage is provided, we need to handle it differently
-      // For now, we'll create a descriptive prompt
       if (params.selectedPreset === "Sukajan") {
-        prompts.push("Change the person's clothes to a Japanese sukajan jacket with embroidered designs.");
+        prompts.push("Replace the person's clothing with a Japanese sukajan jacket (embroidered designs). Use the clothes reference image if provided.");
       } else if (params.selectedPreset === "Blazer") {
-        prompts.push("Change the person's clothes to a professional blazer.");
-      } else if (params.clothesImage.startsWith('data:') || params.clothesImage.startsWith('http')) {
-        prompts.push("Change the person's clothes to match the provided reference image style.");
+        prompts.push("Replace the person's clothing with a professional blazer. Use the clothes reference image if provided.");
+      } else {
+        prompts.push("Replace the person's clothing to match the provided clothes reference image (attached below). Preserve body pose and identity.");
       }
+      const clothesRef = await toInlineDataFromAny(params.clothesImage);
+      if (clothesRef) referenceParts.push({ inlineData: clothesRef });
     }
     
     // Style blending
     if (params.styleImage) {
       const strength = params.blendStrength || 50;
-      prompts.push(`Apply artistic style blending at ${strength}% strength.`);
+      prompts.push(`Apply artistic style blending using the provided style reference image (attached below) at ${strength}% strength.`);
+      const styleRef = await toInlineDataFromAny(params.styleImage);
+      if (styleRef) referenceParts.push({ inlineData: styleRef });
     }
     
     // Edit prompt
@@ -96,7 +119,7 @@ export async function POST(req: NextRequest) {
     
     // Camera settings
     if (params.focalLength || params.aperture || params.shutterSpeed || params.whiteBalance || params.angle || 
-        params.iso || params.filmStyle || params.lighting || params.bokeh || params.composition) {
+        params.iso || params.filmStyle || params.lighting || params.bokeh || params.composition || params.aspectRatio) {
       const cameraSettings: string[] = [];
       if (params.focalLength) {
         if (params.focalLength === "8mm fisheye") {
@@ -114,6 +137,7 @@ export async function POST(req: NextRequest) {
       if (params.lighting) cameraSettings.push(`Lighting: ${params.lighting}`);
       if (params.bokeh) cameraSettings.push(`Bokeh effect: ${params.bokeh}`);
       if (params.composition) cameraSettings.push(`Composition: ${params.composition}`);
+      if (params.aspectRatio) cameraSettings.push(`Aspect Ratio: ${params.aspectRatio}`);
       
       if (cameraSettings.length > 0) {
         prompts.push(`Apply professional photography settings: ${cameraSettings.join(", ")}`);
@@ -154,7 +178,10 @@ export async function POST(req: NextRequest) {
     // Generate with Gemini
     const parts = [
       { text: prompt },
-      { inlineData: { mimeType: parsed.mimeType, data: parsed.data } }
+      // Primary subject image (input)
+      { inlineData: { mimeType: parsed.mimeType, data: parsed.data } },
+      // Additional reference images to guide modifications
+      ...referenceParts,
     ];
 
     const response = await ai.models.generateContent({

app/editor/nodes.tsx

@@ -1,6 +1,13 @@
 "use client";
 
 import React, { useState, useRef, useEffect } from "react";
+import { Button } from "../../components/ui/button";
+import { Select } from "../../components/ui/select";
+import { Textarea } from "../../components/ui/textarea";
+import { Label } from "../../components/ui/label";
+import { Slider } from "../../components/ui/slider";
+import { ColorPicker } from "../../components/ui/color-picker";
+import { Checkbox } from "../../components/ui/checkbox";
 
 // Helper function to download image
 function downloadImage(dataUrl: string, filename: string) {
@@ -170,36 +177,44 @@ export function BackgroundNodeView({
         <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
         <div className="font-semibold text-sm flex-1 text-center">BACKGROUND</div>
         <div className="flex items-center gap-2">
-          <button className="text-2xl text-red-400 opacity-50 hover:opacity-100" onClick={() => onDelete(node.id)}>×</button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive"
+            onClick={() => onDelete(node.id)}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
           <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
         </div>
       </div>
       <div className="p-3 space-y-3">
-        <select 
-          className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+        <Select 
+          className="w-full"
           value={node.backgroundType || "color"}
-          onChange={(e) => onUpdate(node.id, { backgroundType: e.target.value })}
+          onChange={(e) => onUpdate(node.id, { backgroundType: (e.target as HTMLSelectElement).value })}
         >
           <option value="color">Solid Color</option>
           <option value="image">Preset Background</option>
           <option value="upload">Upload Image</option>
           <option value="custom">Custom Prompt</option>
-        </select>
+        </Select>
         
         {node.backgroundType === "color" && (
-          <input
-            type="color"
-            className="w-full h-10 rounded"
+          <ColorPicker
+            className="w-full"
             value={node.backgroundColor || "#ffffff"}
-            onChange={(e) => onUpdate(node.id, { backgroundColor: e.target.value })}
+            onChange={(e) => onUpdate(node.id, { backgroundColor: (e.target as HTMLInputElement).value })}
           />
         )}
         
         {node.backgroundType === "image" && (
-          <select 
-            className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+          <Select 
+            className="w-full"
             value={node.backgroundImage || ""}
-            onChange={(e) => onUpdate(node.id, { backgroundImage: e.target.value })}
+            onChange={(e) => onUpdate(node.id, { backgroundImage: (e.target as HTMLSelectElement).value })}
           >
             <option value="">Select Background</option>
             <option value="beach">Beach</option>
@@ -207,7 +222,7 @@ export function BackgroundNodeView({
             <option value="studio">Studio</option>
             <option value="nature">Nature</option>
             <option value="city">City Skyline</option>
-          </select>
+          </Select>
         )}
         
         {node.backgroundType === "upload" && (
@@ -215,12 +230,14 @@ export function BackgroundNodeView({
             {node.customBackgroundImage ? (
               <div className="relative">
                 <img src={node.customBackgroundImage} className="w-full rounded" alt="Custom Background" />
-                <button 
-                  className="absolute top-2 right-2 bg-red-500/80 text-white text-xs px-2 py-1 rounded"
+                <Button 
+                  variant="destructive"
+                  size="sm"
+                  className="absolute top-2 right-2"
                   onClick={() => onUpdate(node.id, { customBackgroundImage: null })}
                 >
                   Remove
-                </button>
+                </Button>
               </div>
             ) : (
               <label className="block">
@@ -240,33 +257,34 @@ export function BackgroundNodeView({
         )}
         
         {node.backgroundType === "custom" && (
-          <textarea
-            className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+          <Textarea
+            className="w-full"
             placeholder="Describe the background..."
             value={node.customPrompt || ""}
-            onChange={(e) => onUpdate(node.id, { customPrompt: e.target.value })}
+            onChange={(e) => onUpdate(node.id, { customPrompt: (e.target as HTMLTextAreaElement).value })}
             rows={2}
           />
         )}
         
-        <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
+        <Button 
+          className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
           title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
         >
           {node.isRunning ? "Processing..." : "Apply Background"}
-        </button>
+        </Button>
         
         {node.output && (
           <div className="space-y-2">
             <img src={node.output} className="w-full rounded" alt="Output" />
-            <button
-              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+            <Button
+              className="w-full"
+              variant="secondary"
               onClick={() => downloadImage(node.output, `background-${Date.now()}.png`)}
             >
               📥 Download Output
-            </button>
+            </Button>
           </div>
         )}
         {node.error && (
@@ -337,11 +355,32 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
         <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
         <div className="font-semibold text-sm flex-1 text-center">CLOTHES</div>
         <div className="flex items-center gap-2">
-          <button className="text-2xl text-red-400 opacity-50 hover:opacity-100" onClick={() => onDelete(node.id)}>×</button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive"
+            onClick={() => onDelete(node.id)}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
           <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
         </div>
       </div>
       <div className="p-3 space-y-3">
+        {node.input && (
+          <div className="flex justify-end mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onUpdate(node.id, { input: undefined })}
+              className="text-xs"
+            >
+              Clear Connection
+            </Button>
+          </div>
+        )}
         {hasConfig && (
           <div className="text-xs bg-yellow-500/20 border border-yellow-500/50 rounded px-2 py-1 text-yellow-300">
             ⚡ Config pending - will apply when downstream node processes
@@ -373,12 +412,14 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
         {node.clothesImage && !node.selectedPreset ? (
           <div className="relative">
             <img src={node.clothesImage} className="w-full rounded" alt="Clothes" />
-            <button 
-              className="absolute top-2 right-2 bg-red-500/80 text-white text-xs px-2 py-1 rounded"
+            <Button 
+              variant="destructive"
+              size="sm"
+              className="absolute top-2 right-2"
               onClick={() => onUpdate(node.id, { clothesImage: null, selectedPreset: null })}
             >
               Remove
-            </button>
+            </Button>
           </div>
         ) : !node.selectedPreset ? (
           <label className="block">
@@ -400,23 +441,24 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
           </label>
         ) : null}
         
-        <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
+        <Button 
+          className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning || !node.clothesImage}
           title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
         >
           {node.isRunning ? "Processing..." : "Apply Clothes"}
-        </button>
+        </Button>
         {node.output && (
           <div className="space-y-2">
             <img src={node.output} className="w-full rounded" alt="Output" />
-            <button
-              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+            <Button
+              className="w-full"
+              variant="secondary"
               onClick={() => downloadImage(node.output, `clothes-${Date.now()}.png`)}
             >
               📥 Download Output
-            </button>
+            </Button>
           </div>
         )}
         {node.error && (
@@ -442,42 +484,60 @@ export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEnd
         <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
         <div className="font-semibold text-sm flex-1 text-center">AGE</div>
         <div className="flex items-center gap-2">
-          <button className="text-2xl text-red-400 opacity-50 hover:opacity-100" onClick={() => onDelete(node.id)}>×</button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive"
+            onClick={() => onDelete(node.id)}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
           <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
         </div>
       </div>
       <div className="p-3 space-y-3">
+        {node.input && (
+          <div className="flex justify-end mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onUpdate(node.id, { input: undefined })}
+              className="text-xs"
+            >
+              Clear Connection
+            </Button>
+          </div>
+        )}
         <div>
-          <label className="flex items-center justify-between text-xs text-white/70 mb-1">
-            <span>Target Age</span>
-            <span>{node.targetAge || 30} years</span>
-          </label>
-          <input
-            type="range"
+          <Slider
+            label="Target Age"
+            valueLabel={`${node.targetAge || 30} years`}
             min={18}
             max={100}
             value={node.targetAge || 30}
-            onChange={(e) => onUpdate(node.id, { targetAge: parseInt(e.target.value) })}
-            className="w-full"
+            onChange={(e) => onUpdate(node.id, { targetAge: parseInt((e.target as HTMLInputElement).value) })}
           />
         </div>
-        <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
+        <Button 
+          className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
           title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
         >
           {node.isRunning ? "Processing..." : "Apply Age"}
-        </button>
+        </Button>
         {node.output && (
           <div className="space-y-2">
             <img src={node.output} className="w-full rounded" alt="Output" />
-            <button
-              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+            <Button
+              className="w-full"
+              variant="secondary"
               onClick={() => downloadImage(node.output, `age-${Date.now()}.png`)}
             >
               📥 Download Output
-            </button>
+            </Button>
           </div>
         )}
         {node.error && (
@@ -500,6 +560,7 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
   const lightingTypes = ["None", "Natural Light", "Golden Hour", "Blue Hour", "Studio Lighting", "Rembrandt", "Split Lighting", "Butterfly Lighting", "Loop Lighting", "Rim Lighting", "Silhouette", "High Key", "Low Key"];
   const bokehStyles = ["None", "Smooth Bokeh", "Swirly Bokeh", "Hexagonal Bokeh", "Cat Eye Bokeh", "Bubble Bokeh", "Creamy Bokeh"];
   const compositions = ["None", "Rule of Thirds", "Golden Ratio", "Symmetrical", "Leading Lines", "Frame in Frame", "Fill the Frame", "Negative Space", "Patterns", "Diagonal"];
+  const aspectRatios = ["None", "1:1 Square", "3:2 Standard", "4:3 Classic", "16:9 Widescreen", "21:9 Cinematic", "9:16 Portrait", "4:5 Instagram", "2:3 Portrait"];
 
   return (
     <div className="nb-node absolute text-white w-[360px]" style={{ left: localPos.x, top: localPos.y }}>
@@ -512,53 +573,74 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
         <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
         <div className="font-semibold text-sm flex-1 text-center">CAMERA</div>
         <div className="flex items-center gap-2">
-          <button className="text-2xl text-red-400 opacity-50 hover:opacity-100" onClick={() => onDelete(node.id)}>×</button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive"
+            onClick={() => onDelete(node.id)}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
           <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
         </div>
       </div>
-      <div className="p-3 space-y-2 max-h-[500px] overflow-y-auto">
+      <div className="p-3 space-y-2 max-h-[500px] overflow-y-auto scrollbar-thin">
+        {node.input && (
+          <div className="flex justify-end mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onUpdate(node.id, { input: undefined })}
+              className="text-xs"
+            >
+              Clear Connection
+            </Button>
+          </div>
+        )}
         {/* Basic Camera Settings */}
         <div className="text-xs text-white/50 font-semibold mb-1">Basic Settings</div>
         <div className="grid grid-cols-2 gap-2">
           <div>
             <label className="text-xs text-white/70">Focal Length</label>
-            <select 
-              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+            <Select 
+              className="w-full"
               value={node.focalLength || "None"}
-              onChange={(e) => onUpdate(node.id, { focalLength: e.target.value })}
+              onChange={(e) => onUpdate(node.id, { focalLength: (e.target as HTMLSelectElement).value })}
             >
               {focalLengths.map(f => <option key={f} value={f}>{f}</option>)}
-            </select>
+            </Select>
           </div>
           <div>
             <label className="text-xs text-white/70">Aperture</label>
-            <select 
-              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+            <Select 
+              className="w-full"
               value={node.aperture || "None"}
-              onChange={(e) => onUpdate(node.id, { aperture: e.target.value })}
+              onChange={(e) => onUpdate(node.id, { aperture: (e.target as HTMLSelectElement).value })}
             >
               {apertures.map(a => <option key={a} value={a}>{a}</option>)}
-            </select>
+            </Select>
           </div>
           <div>
             <label className="text-xs text-white/70">Shutter Speed</label>
-            <select 
-              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+            <Select 
+              className="w-full"
               value={node.shutterSpeed || "None"}
-              onChange={(e) => onUpdate(node.id, { shutterSpeed: e.target.value })}
+              onChange={(e) => onUpdate(node.id, { shutterSpeed: (e.target as HTMLSelectElement).value })}
             >
               {shutterSpeeds.map(s => <option key={s} value={s}>{s}</option>)}
-            </select>
+            </Select>
           </div>
           <div>
             <label className="text-xs text-white/70">ISO</label>
-            <select 
-              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+            <Select 
+              className="w-full"
               value={node.iso || "None"}
-              onChange={(e) => onUpdate(node.id, { iso: e.target.value })}
+              onChange={(e) => onUpdate(node.id, { iso: (e.target as HTMLSelectElement).value })}
             >
               {isoValues.map(i => <option key={i} value={i}>{i}</option>)}
-            </select>
+            </Select>
           </div>
         </div>
         
@@ -567,43 +649,43 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
         <div className="grid grid-cols-2 gap-2">
           <div>
             <label className="text-xs text-white/70">White Balance</label>
-            <select 
-              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+            <Select 
+              className="w-full"
               value={node.whiteBalance || "None"}
-              onChange={(e) => onUpdate(node.id, { whiteBalance: e.target.value })}
+              onChange={(e) => onUpdate(node.id, { whiteBalance: (e.target as HTMLSelectElement).value })}
             >
               {whiteBalances.map(w => <option key={w} value={w}>{w}</option>)}
-            </select>
+            </Select>
           </div>
           <div>
             <label className="text-xs text-white/70">Film Style</label>
-            <select 
-              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+            <Select 
+              className="w-full"
               value={node.filmStyle || "None"}
-              onChange={(e) => onUpdate(node.id, { filmStyle: e.target.value })}
+              onChange={(e) => onUpdate(node.id, { filmStyle: (e.target as HTMLSelectElement).value })}
             >
               {filmStyles.map(f => <option key={f} value={f}>{f}</option>)}
-            </select>
+            </Select>
           </div>
           <div>
             <label className="text-xs text-white/70">Lighting</label>
-            <select 
-              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+            <Select 
+              className="w-full"
               value={node.lighting || "None"}
-              onChange={(e) => onUpdate(node.id, { lighting: e.target.value })}
+              onChange={(e) => onUpdate(node.id, { lighting: (e.target as HTMLSelectElement).value })}
             >
               {lightingTypes.map(l => <option key={l} value={l}>{l}</option>)}
-            </select>
+            </Select>
           </div>
           <div>
             <label className="text-xs text-white/70">Bokeh Style</label>
-            <select 
-              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+            <Select 
+              className="w-full"
               value={node.bokeh || "None"}
-              onChange={(e) => onUpdate(node.id, { bokeh: e.target.value })}
+              onChange={(e) => onUpdate(node.id, { bokeh: (e.target as HTMLSelectElement).value })}
             >
               {bokehStyles.map(b => <option key={b} value={b}>{b}</option>)}
-            </select>
+            </Select>
           </div>
         </div>
         
@@ -612,42 +694,53 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
         <div className="grid grid-cols-2 gap-2">
           <div>
             <label className="text-xs text-white/70">Camera Angle</label>
-            <select 
-              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+            <Select 
+              className="w-full"
               value={node.angle || "None"}
-              onChange={(e) => onUpdate(node.id, { angle: e.target.value })}
+              onChange={(e) => onUpdate(node.id, { angle: (e.target as HTMLSelectElement).value })}
             >
               {angles.map(a => <option key={a} value={a}>{a}</option>)}
-            </select>
+            </Select>
           </div>
           <div>
             <label className="text-xs text-white/70">Composition</label>
-            <select 
-              className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+            <Select 
+              className="w-full"
               value={node.composition || "None"}
-              onChange={(e) => onUpdate(node.id, { composition: e.target.value })}
+              onChange={(e) => onUpdate(node.id, { composition: (e.target as HTMLSelectElement).value })}
             >
               {compositions.map(c => <option key={c} value={c}>{c}</option>)}
-            </select>
+            </Select>
+          </div>
+          <div>
+            <label className="text-xs text-white/70">Aspect Ratio</label>
+            <Select 
+              className="w-full"
+              value={node.aspectRatio || "None"}
+              onChange={(e) => onUpdate(node.id, { aspectRatio: (e.target as HTMLSelectElement).value })}
+            >
+              {aspectRatios.map(a => <option key={a} value={a}>{a}</option>)}
+            </Select>
           </div>
         </div>
-        <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
+        <Button 
+          className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
           title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
         >
           {node.isRunning ? "Processing..." : "Apply Camera Settings"}
-        </button>
+        </Button>
         {node.output && (
           <div className="space-y-2 mt-2">
             <img src={node.output} className="w-full rounded" alt="Output" />
-            <button
-              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+            <Button
+              className="w-full"
+              variant="secondary"
               onClick={() => downloadImage(node.output, `camera-${Date.now()}.png`)}
             >
               📥 Download Output
-            </button>
+            </Button>
           </div>
         )}
         {node.error && (
@@ -675,38 +768,56 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
         <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
         <div className="font-semibold text-sm flex-1 text-center">FACE</div>
         <div className="flex items-center gap-2">
-          <button className="text-2xl text-red-400 opacity-50 hover:opacity-100" onClick={() => onDelete(node.id)}>×</button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive"
+            onClick={() => onDelete(node.id)}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
           <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
         </div>
       </div>
       <div className="p-3 space-y-2">
+        {node.input && (
+          <div className="flex justify-end mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onUpdate(node.id, { input: undefined })}
+              className="text-xs"
+            >
+              Clear Connection
+            </Button>
+          </div>
+        )}
         <div className="space-y-2">
           <label className="flex items-center gap-2 text-xs">
-            <input 
-              type="checkbox" 
+            <Checkbox 
               checked={node.faceOptions?.removePimples || false}
               onChange={(e) => onUpdate(node.id, { 
-                faceOptions: { ...node.faceOptions, removePimples: e.target.checked }
+                faceOptions: { ...node.faceOptions, removePimples: (e.target as HTMLInputElement).checked }
               })}
             />
             Remove pimples
           </label>
           <label className="flex items-center gap-2 text-xs">
-            <input 
-              type="checkbox" 
+            <Checkbox 
               checked={node.faceOptions?.addSunglasses || false}
               onChange={(e) => onUpdate(node.id, { 
-                faceOptions: { ...node.faceOptions, addSunglasses: e.target.checked }
+                faceOptions: { ...node.faceOptions, addSunglasses: (e.target as HTMLInputElement).checked }
               })}
             />
             Add sunglasses
           </label>
           <label className="flex items-center gap-2 text-xs">
-            <input 
-              type="checkbox" 
+            <Checkbox 
               checked={node.faceOptions?.addHat || false}
               onChange={(e) => onUpdate(node.id, { 
-                faceOptions: { ...node.faceOptions, addHat: e.target.checked }
+                faceOptions: { ...node.faceOptions, addHat: (e.target as HTMLInputElement).checked }
               })}
             />
             Add hat
@@ -715,60 +826,61 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
         
         <div>
           <label className="text-xs text-white/70">Hairstyle</label>
-          <select 
-            className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+          <Select 
+            className="w-full"
             value={node.faceOptions?.changeHairstyle || "None"}
             onChange={(e) => onUpdate(node.id, { 
-              faceOptions: { ...node.faceOptions, changeHairstyle: e.target.value }
+              faceOptions: { ...node.faceOptions, changeHairstyle: (e.target as HTMLSelectElement).value }
             })}
           >
             {hairstyles.map(h => <option key={h} value={h}>{h}</option>)}
-          </select>
+          </Select>
         </div>
         
         <div>
           <label className="text-xs text-white/70">Expression</label>
-          <select 
-            className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+          <Select 
+            className="w-full"
             value={node.faceOptions?.facialExpression || "None"}
             onChange={(e) => onUpdate(node.id, { 
-              faceOptions: { ...node.faceOptions, facialExpression: e.target.value }
+              faceOptions: { ...node.faceOptions, facialExpression: (e.target as HTMLSelectElement).value }
             })}
           >
             {expressions.map(e => <option key={e} value={e}>{e}</option>)}
-          </select>
+          </Select>
         </div>
         
         <div>
           <label className="text-xs text-white/70">Beard</label>
-          <select 
-            className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+          <Select 
+            className="w-full"
             value={node.faceOptions?.beardStyle || "None"}
             onChange={(e) => onUpdate(node.id, { 
-              faceOptions: { ...node.faceOptions, beardStyle: e.target.value }
+              faceOptions: { ...node.faceOptions, beardStyle: (e.target as HTMLSelectElement).value }
             })}
           >
             {beardStyles.map(b => <option key={b} value={b}>{b}</option>)}
-          </select>
+          </Select>
         </div>
         
-        <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
+        <Button 
+          className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
           title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
         >
           {node.isRunning ? "Processing..." : "Apply Face Changes"}
-        </button>
+        </Button>
         {node.output && (
           <div className="space-y-2 mt-2">
             <img src={node.output} className="w-full rounded" alt="Output" />
-            <button
-              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+            <Button
+              className="w-full"
+              variant="secondary"
               onClick={() => downloadImage(node.output, `face-${Date.now()}.png`)}
             >
               📥 Download Output
-            </button>
+            </Button>
           </div>
         )}
         {node.error && (
@@ -828,12 +940,34 @@ export function BlendNodeView({ node, onDelete, onUpdate, onStartConnection, onE
         <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
         <div className="font-semibold text-sm flex-1 text-center">BLEND</div>
         <div className="flex items-center gap-2">
-          <button className="text-2xl text-red-400 opacity-50 hover:opacity-100" onClick={() => onDelete(node.id)}>×</button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive"
+            onClick={() => onDelete(node.id)}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
           <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
         </div>
       </div>
       <div className="p-3 space-y-3">
+        {node.input && (
+          <div className="flex justify-end mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onUpdate(node.id, { input: undefined })}
+              className="text-xs"
+            >
+              Clear Connection
+            </Button>
+          </div>
+        )}
         <div className="text-xs text-white/70">Style Reference Image</div>
+        <div className="text-xs text-white/50">Upload an artistic style image to blend with your input</div>
         {node.styleImage ? (
           <div className="relative">
             <img src={node.styleImage} className="w-full rounded" alt="Style" />
@@ -860,40 +994,38 @@ export function BlendNodeView({ node, onDelete, onUpdate, onStartConnection, onE
             />
             <div className="border-2 border-dashed border-white/20 rounded-lg p-4 text-center cursor-pointer hover:border-white/40">
               <p className="text-xs text-white/60">Drop, upload, or paste style image</p>
+              <p className="text-xs text-white/40 mt-1">Art style will be applied to input</p>
             </div>
           </label>
         )}
         <div>
-          <label className="flex items-center justify-between text-xs text-white/70 mb-1">
-            <span>Blend Strength</span>
-            <span>{node.blendStrength || 50}%</span>
-          </label>
-          <input
-            type="range"
+          <Slider
+            label="Blend Strength"
+            valueLabel={`${node.blendStrength || 50}%`}
             min={0}
             max={100}
             value={node.blendStrength || 50}
-            onChange={(e) => onUpdate(node.id, { blendStrength: parseInt(e.target.value) })}
-            className="w-full"
+            onChange={(e) => onUpdate(node.id, { blendStrength: parseInt((e.target as HTMLInputElement).value) })}
           />
         </div>
-        <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
+        <Button 
+          className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning || !node.styleImage}
-          title={!node.input ? "Connect an input first" : !node.styleImage ? "Add a style image first" : "Process all unprocessed nodes in chain"}
+          title={!node.input ? "Connect an input first" : !node.styleImage ? "Add a style image first" : "Blend the style with your input image"}
         >
-          {node.isRunning ? "Processing..." : "Apply Style"}
-        </button>
+          {node.isRunning ? "Blending..." : "Blend Style Transfer"}
+        </Button>
         {node.output && (
           <div className="space-y-2">
             <img src={node.output} className="w-full rounded" alt="Output" />
-            <button
-              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+            <Button
+              className="w-full"
+              variant="secondary"
               onClick={() => downloadImage(node.output, `blend-${Date.now()}.png`)}
             >
               📥 Download Output
-            </button>
+            </Button>
           </div>
         )}
         {node.error && (
@@ -918,35 +1050,57 @@ export function EditNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
         <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
         <div className="font-semibold text-sm flex-1 text-center">EDIT</div>
         <div className="flex items-center gap-2">
-          <button className="text-2xl text-red-400 opacity-50 hover:opacity-100" onClick={() => onDelete(node.id)}>×</button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive"
+            onClick={() => onDelete(node.id)}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
           <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
         </div>
       </div>
       <div className="p-3 space-y-3">
-        <textarea
-          className="w-full bg-black/40 border border-white/10 rounded px-2 py-1 text-xs"
+        {node.input && (
+          <div className="flex justify-end mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onUpdate(node.id, { input: undefined })}
+              className="text-xs"
+            >
+              Clear Connection
+            </Button>
+          </div>
+        )}
+        <Textarea
+          className="w-full"
           placeholder="Describe what to edit (e.g., 'make it brighter', 'add more contrast', 'make it look vintage')"
           value={node.editPrompt || ""}
-          onChange={(e) => onUpdate(node.id, { editPrompt: e.target.value })}
+          onChange={(e) => onUpdate(node.id, { editPrompt: (e.target as HTMLTextAreaElement).value })}
           rows={3}
         />
-        <button 
-          className="w-full text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 transition-all"
+        <Button 
+          className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
           title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
         >
           {node.isRunning ? "Processing..." : "Apply Edit"}
-        </button>
+        </Button>
         {node.output && (
           <div className="space-y-2">
             <img src={node.output} className="w-full rounded" alt="Output" />
-            <button
-              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 transition-all"
+            <Button
+              className="w-full"
+              variant="secondary"
               onClick={() => downloadImage(node.output, `edit-${Date.now()}.png`)}
             >
               📥 Download Output
-            </button>
+            </Button>
           </div>
         )}
       </div>

app/editor/page.tsx

@@ -10,6 +10,7 @@ import {
   AgeNodeView,
   FaceNodeView
 } from "./nodes";
+import { Button } from "../../components/ui/button";
 
 function cx(...args: Array<string | false | null | undefined>) {
   return args.filter(Boolean).join(" ");
@@ -22,19 +23,27 @@ const uid = () => Math.random().toString(36).slice(2, 9);
 function generateMergePrompt(characterData: { image: string; label: string }[]): string {
   const count = characterData.length;
   
-  if (count === 2) {
-    return `You are provided with 2 images. Each image may contain one or more people. Create a single new photorealistic image that combines ALL people from BOTH images into one scene. If image 1 has multiple people, include all of them. If image 2 has multiple people, include all of them. Place everyone together in the same scene, standing side by side or in a natural group arrangement. Ensure all people are clearly visible with consistent lighting, proper sizing, and natural shadows. The result should look like a genuine group photo.`;
-  }
+  const labels = characterData.map((d, i) => `Image ${i + 1} (${d.label})`).join(", ");
   
-  return `You are provided with ${count} images. Each image may contain one or more people. Create a single new photorealistic image that combines ALL people from ALL ${count} images into one comprehensive group photo. 
-  
-  Important instructions:
-  - Include EVERY person from EVERY input image
-  - If an image has multiple people, include all of them
-  - Arrange everyone in a natural group formation
-  - Ensure all people are clearly visible and recognizable
-  - Match lighting, shadows, and proportions realistically
-  - The final image should look like an authentic group photo with everyone together`;
+  return `MERGE TASK: You are provided with exactly ${count} source images.
+
+Images provided:
+${characterData.map((d, i) => `- Image ${i + 1}: ${d.label}`).join("\n")}
+
+INSTRUCTIONS:
+1. EXTRACT the exact people/subjects from EACH provided image
+2. DO NOT generate new people - use ONLY the people visible in the provided images
+3. COMBINE all extracted people into ONE single group photo
+4. The output must contain ALL people from ALL ${count} input images together
+
+Requirements:
+- Use the ACTUAL people from the provided images (do not create new ones)
+- If an image has multiple people, include ALL of them
+- Arrange everyone naturally in the same scene
+- Match lighting and proportions realistically
+- Output exactly ONE image with everyone combined
+
+DO NOT create artistic interpretations or new people. EXTRACT and COMBINE the actual subjects from the provided photographs.`;
 }
 
 // Types
@@ -56,7 +65,7 @@ type CharacterNode = NodeBase & {
 type MergeNode = NodeBase & {
   type: "MERGE";
   inputs: string[]; // node ids
-  output?: string; // data URL from merge
+  output?: string | null; // data URL from merge
   isRunning?: boolean;
   error?: string | null;
 };
@@ -119,6 +128,7 @@ type CameraNode = NodeBase & {
   lighting?: string;
   bokeh?: string;
   composition?: string;
+  aspectRatio?: string;
   isRunning?: boolean;
   error?: string | null;
 };
@@ -333,18 +343,19 @@ function CharacterNodeView({
           onChange={(e) => onChangeLabel(node.id, e.target.value)}
         />
         <div className="flex items-center gap-2">
-          <button
-            className="text-2xl leading-none font-bold text-red-400 hover:text-red-300 opacity-50 hover:opacity-100 transition-all hover:scale-110 px-1"
+          <Button 
+            variant="ghost" size="icon" className="text-destructive"
             onClick={(e) => {
               e.stopPropagation();
-              if (confirm(`Delete ${node.label || 'CHARACTER'} node?`)) {
+              if (confirm('Delete MERGE node?')) {
                 onDelete(node.id);
               }
             }}
             title="Delete node"
+            aria-label="Delete node"
           >
             ×
-          </button>
+          </Button>
           <Port 
             className="out" 
             nodeId={node.id}
@@ -354,11 +365,11 @@ function CharacterNodeView({
         </div>
       </div>
       <div className="p-3 space-y-3">
-        <div className="aspect-[4/5] w-full overflow-hidden rounded-xl bg-black/40 grid place-items-center">
+        <div className="aspect-[4/5] w-full rounded-xl bg-black/40 grid place-items-center overflow-hidden">
           <img
             src={node.image}
             alt="character"
-            className="h-full w-full object-cover"
+            className="h-full w-full object-contain"
             draggable={false}
           />
         </div>
@@ -433,7 +444,7 @@ function MergeNodeView({
 
 
   return (
-    <div className="nb-node absolute text-white w-[380px]" style={{ left: pos.x, top: pos.y }}>
+    <div className="nb-node absolute text-white w-[420px]" style={{ left: pos.x, top: pos.y }}>
       <div
         className="nb-header cursor-grab active:cursor-grabbing rounded-t-[14px] px-3 py-2 flex items-center justify-between"
         onPointerDown={onPointerDown}
@@ -476,8 +487,8 @@ function MergeNodeView({
             if (!c) return null;
             return (
               <div key={id} className="flex items-center gap-2 bg-white/10 rounded px-2 py-1">
-                <div className="w-6 h-6 rounded overflow-hidden">
-                  <img src={c.image} className="w-full h-full object-cover" alt="inp" />
+                <div className="w-6 h-6 rounded overflow-hidden bg-black/20">
+                  <img src={c.image} className="w-full h-full object-contain" alt="inp" />
                 </div>
                 <span className="text-xs">{c.label || `Character ${id.slice(-3)}`}</span>
                 <button
@@ -495,35 +506,37 @@ function MergeNodeView({
         )}
         <div className="flex items-center gap-2">
           {node.inputs.length > 0 && (
-            <button
-              className="text-xs bg-red-500/20 hover:bg-red-500/30 text-red-300 rounded px-3 py-1"
+            <Button
+              variant="destructive"
+              size="sm"
               onClick={() => onClearConnections(node.id)}
               title="Clear all connections"
             >
               Clear
-            </button>
+            </Button>
           )}
-          <button
-            className="text-xs bg-indigo-500 hover:bg-indigo-400 rounded px-3 py-1 disabled:opacity-60"
+          <Button
+            size="sm"
             onClick={() => onRun(node.id)}
             disabled={node.isRunning || node.inputs.length < 2}
           >
             {node.isRunning ? "Merging…" : "Merge"}
-          </button>
+          </Button>
         </div>
 
         <div className="mt-2">
           <div className="text-xs text-white/70 mb-1">Output</div>
-          <div className="aspect-[4/3] w-full overflow-hidden rounded-xl bg-black/40 grid place-items-center">
+          <div className="w-full min-h-[200px] max-h-[400px] rounded-xl bg-black/40 grid place-items-center">
             {node.output ? (
-              <img src={node.output} className="w-full h-full object-contain" alt="output" />
+              <img src={node.output} className="w-full h-auto max-h-[400px] object-contain rounded-xl" alt="output" />
             ) : (
-              <span className="text-white/40 text-xs">Run merge to see result</span>
+              <span className="text-white/40 text-xs py-16">Run merge to see result</span>
             )}
           </div>
           {node.output && (
-            <button
-              className="w-full text-xs bg-green-600 hover:bg-green-500 rounded px-3 py-1 mt-2 transition-all"
+            <Button
+              className="w-full mt-2"
+              variant="secondary"
               onClick={() => {
                 const link = document.createElement('a');
                 link.href = node.output as string;
@@ -534,7 +547,7 @@ function MergeNodeView({
               }}
             >
               📥 Download Merged Image
-            </button>
+            </Button>
           )}
           {node.error && (
             <div className="mt-2">
@@ -758,6 +771,7 @@ export default function EditorPage() {
         if (cam.lighting && cam.lighting !== "None") config.lighting = cam.lighting;
         if (cam.bokeh && cam.bokeh !== "None") config.bokeh = cam.bokeh;
         if (cam.composition && cam.composition !== "None") config.composition = cam.composition;
+        if (cam.aspectRatio && cam.aspectRatio !== "None") config.aspectRatio = cam.aspectRatio;
         break;
       case "AGE":
         if ((node as AgeNode).targetAge) {
@@ -823,7 +837,7 @@ export default function EditorPage() {
         
         // If this is a MERGE node with output, return its output
         if (currentNode.type === "MERGE" && (currentNode as MergeNode).output) {
-          return (currentNode as MergeNode).output;
+          return (currentNode as MergeNode).output || null;
         }
         
         // If any node has been processed, return its output
@@ -1125,17 +1139,34 @@ export default function EditorPage() {
       // Get character nodes with their labels
       const characterData = merge.inputs
         .map((id, index) => {
-          const char = nodes.find((c) => c.id === id) as CharacterNode | undefined;
+          const char = nodes.find((c) => c.id === id);
           if (!char) return null;
-          return {
-            image: char.image,
-            label: char.label || `CHARACTER${index + 1}`
-          };
+          
+          // Support both CHARACTER nodes and any node with output
+          let image: string | null = null;
+          let label = "";
+          
+          if (char.type === "CHARACTER") {
+            image = (char as CharacterNode).image;
+            label = (char as CharacterNode).label || `CHARACTER${index + 1}`;
+          } else if ((char as any).output) {
+            // If it's a processed node, use its output
+            image = (char as any).output;
+            label = `Input ${index + 1}`;
+          }
+          
+          if (!image) return null;
+          
+          return { image, label };
         })
         .filter(Boolean) as { image: string; label: string }[];
       
       if (characterData.length < 2) throw new Error("Connect at least two CHARACTER nodes.");
       
+      // Debug: Log what we're sending
+      console.log("🔄 Merging nodes:", characterData.map(d => d.label).join(", "));
+      console.log("📷 Image URLs being sent:", characterData.map(d => d.image.substring(0, 100) + "..."));
+      
       // Generate dynamic prompt based on number of inputs
       const prompt = generateMergePrompt(characterData);
       const imgs = characterData.map(d => d.image);
@@ -1162,13 +1193,30 @@ export default function EditorPage() {
     }
   };
 
+  // Calculate SVG bounds for connection lines
+  const svgBounds = useMemo(() => {
+    let minX = 0, minY = 0, maxX = 1000, maxY = 1000;
+    nodes.forEach(node => {
+      minX = Math.min(minX, node.x - 100);
+      minY = Math.min(minY, node.y - 100);
+      maxX = Math.max(maxX, node.x + 500);
+      maxY = Math.max(maxY, node.y + 500);
+    });
+    return { 
+      x: minX, 
+      y: minY, 
+      width: maxX - minX, 
+      height: maxY - minY 
+    };
+  }, [nodes]);
+
   // Connection paths with bezier curves
   const connectionPaths = useMemo(() => {
     const getNodeOutputPort = (n: AnyNode) => {
       // Different nodes have different widths
       const widths: Record<string, number> = {
         CHARACTER: 340,
-        MERGE: 380,
+        MERGE: 420,
         BACKGROUND: 320,
         CLOTHES: 320,
         BLEND: 320,
@@ -1326,13 +1374,9 @@ export default function EditorPage() {
   };
 
   return (
-    <div className="min-h-[100svh] bg-[#0b0b0b] text-white">
-      <header className="flex items-center justify-between px-6 py-4 border-b border-white/10">
-        <h1 className="text-lg font-semibold tracking-wide">Nano Banana Editor</h1>
-        <div className="flex items-center gap-2">
-          <button className="text-xs bg-white/10 hover:bg-white/20 rounded px-3 py-1" onClick={() => addCharacter()}>+ CHARACTER</button>
-          <button className="text-xs bg-white/10 hover:bg-white/20 rounded px-3 py-1" onClick={() => addMerge()}>+ MERGE</button>
-        </div>
+    <div className="min-h-[100svh] bg-background text-foreground">
+      <header className="flex items-center justify-between px-6 py-4 border-b border-border/60 bg-card/70 backdrop-blur">
+<h1 className="text-lg font-semibold tracking-wide"><span className="mr-2" aria-hidden>🍌</span>Nano Banana Editor</h1>
       </header>
 
       <div
@@ -1368,7 +1412,16 @@ export default function EditorPage() {
             backfaceVisibility: "hidden"
           }}
         >
-          <svg className="absolute inset-0 pointer-events-none z-0" width="4800" height="3200">
+          <svg 
+            className="absolute pointer-events-none z-0" 
+            style={{ 
+              left: `${svgBounds.x}px`, 
+              top: `${svgBounds.y}px`,
+              width: `${svgBounds.width}px`,
+              height: `${svgBounds.height}px`
+            }}
+            viewBox={`${svgBounds.x} ${svgBounds.y} ${svgBounds.width} ${svgBounds.height}`}
+          >
             <defs>
               <filter id="glow">
                 <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
@@ -1383,11 +1436,10 @@ export default function EditorPage() {
                 key={idx}
                 d={p.path}
                 fill="none"
-                stroke={p.active ? "#8b5cf6" : "#7c7c7c"}
+                stroke={p.active ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))"}
                 strokeWidth="2.5"
                 strokeDasharray={p.active ? "5,5" : undefined}
-                filter={p.active ? "url(#glow)" : undefined}
-                opacity={p.active ? 0.8 : 1}
+                style={p.active ? undefined : { opacity: 0.9 }}
               />
             ))}
           </svg>

app/globals.css

@@ -1,36 +1,140 @@
 @import "tailwindcss";
 
+/* shadcn theme tokens */
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  /* Brand: Orangish Red */
+  --primary: 14 90% 50%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --accent: 14 95% 90%;
+  --accent-foreground: 14 90% 20%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 14 90% 45%;
+
+  --radius: 0.75rem;
+
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    /* Brand in dark mode */
+    --primary: 14 87% 60%;
+    --primary-foreground: 240 10% 3.9%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 14 40% 20%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 14 87% 55%;
   }
 }
 
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+}
+
+/* Custom scrollbar styling */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: hsl(var(--background) / 0.1);
+  border-radius: 3px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 3px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* Firefox */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted-foreground) / 0.3) hsl(var(--background) / 0.1);
 }
 
 /* Nano Banana Editor - node visuals */
 .nb-node {
-  background: rgba(15,15,16,0.9);
-  border: 1px solid rgba(255,255,255,0.08);
+  background: hsl(var(--card) / 0.9);
+  border: 1px solid hsl(var(--border) / 0.6);
   box-shadow: 0 10px 30px rgba(0,0,0,0.35);
-  border-radius: 14px;
+  border-radius: var(--radius);
   backdrop-filter: blur(6px);
   /* Prevent blurring on zoom */
   image-rendering: -webkit-optimize-contrast;
@@ -43,29 +147,29 @@ body {
   perspective: 1000px;
 }
 .nb-node .nb-header {
-  background: linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
+  background: linear-gradient(to bottom, hsl(var(--muted) / 0.35), hsl(var(--muted) / 0.08));
 }
 .nb-port {
   width: 20px;
   height: 20px;
   border-radius: 9999px;
   border: 3px solid rgba(255,255,255,0.6);
-  background: #111;
+  background: hsl(var(--popover));
   cursor: crosshair;
   transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
   position: relative;
 }
 .nb-port:hover {
-  transform: scale(1.4);
-  background: #222;
-  box-shadow: 0 0 12px rgba(255,255,255,0.3);
+  transform: scale(1.25);
+  background: hsl(var(--accent));
+  box-shadow: 0 0 12px hsl(var(--ring) / 0.4);
 }
 .nb-port.out { 
-  border-color: #8b5cf6; 
+  border-color: hsl(var(--primary)); 
 }
 .nb-port.out:hover { 
-  background: #8b5cf6;
-  box-shadow: 0 0 16px rgba(139,92,246,0.6);
+  background: hsl(var(--primary));
+  box-shadow: 0 0 16px hsl(var(--primary) / 0.6);
 }
 .nb-port.in { 
   border-color: #34d399; 
@@ -83,10 +187,10 @@ body {
 
 /* Canvas grid */
 .nb-canvas {
-  background-color: #0b0b0b;
+  background-color: hsl(var(--background));
   background-image:
-    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0),
-    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
+    radial-gradient(circle at 1px 1px, hsl(var(--muted-foreground) / 0.18) 1px, transparent 0),
+    radial-gradient(circle at 1px 1px, hsl(var(--muted-foreground) / 0.09) 1px, transparent 0);
   background-size: 20px 20px, 100px 100px;
 }
 

app/layout.tsx

@@ -25,7 +25,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground font-sans`}
       >
         {children}
       </body>

app/try-on/page.tsx

@@ -206,7 +206,7 @@ export default function TryOnPage() {
   };
 
   return (
-    <div className="min-h-[100svh] bg-black text-white">
+    <div className="min-h-[100svh] bg-background text-foreground">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10">
         {/* Header */}
         <div className="flex items-center justify-between mb-10">

package-lock.json

@@ -9,9 +9,12 @@
       "version": "0.1.0",
       "dependencies": {
         "@google/genai": "^1.17.0",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
         "next": "15.5.2",
         "react": "19.1.0",
-        "react-dom": "19.1.0"
+        "react-dom": "19.1.0",
+        "tailwind-merge": "^2.5.3"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -2357,12 +2360,33 @@
         "node": ">=18"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -5932,6 +5956,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
+      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.13",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",

package.json

@@ -10,9 +10,12 @@
   },
   "dependencies": {
     "@google/genai": "^1.17.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "next": "15.5.2",
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "tailwind-merge": "^2.5.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",