adding light mode

app/api/merge/route.ts

@@ -60,25 +60,34 @@ export async function POST(req: NextRequest) {
     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.`;
+      prompt = `MERGE TASK: Create a natural, cohesive group photo combining ALL subjects from ${imgs.length} provided images.
+
+CRITICAL REQUIREMENTS:
+1. Extract ALL people/subjects from EACH image exactly as they appear
+2. Place them together in a SINGLE UNIFIED SCENE with:
+   - Consistent lighting direction and color temperature
+   - Matching shadows and ambient lighting  
+   - Proper scale relationships (realistic relative sizes)
+   - Natural spacing as if they were photographed together
+   - Shared environment/background that looks cohesive
+
+3. Composition guidelines:
+   - Arrange subjects at similar depth (not one far behind another)
+   - Use natural group photo positioning (slight overlap is ok)
+   - Ensure all faces are clearly visible
+   - Create visual balance in the composition
+   - Apply consistent color grading across all subjects
+
+4. Environmental unity:
+   - Use a single, coherent background for all subjects
+   - Match the perspective as if taken with one camera
+   - Ensure ground plane continuity (all standing on same level)
+   - Apply consistent atmospheric effects (if any)
+
+The result should look like all subjects were photographed together in the same place at the same time, NOT like separate images placed side by side.`;
     } 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.`;
+      // Even with custom prompt, append cohesion requirements
+      const enforcement = `\n\nIMPORTANT: Create a COHESIVE group photo where all subjects appear to be in the same scene with consistent lighting, scale, and environment. The result should look naturally photographed together, not composited.`;
       prompt = `${prompt}${enforcement}`;
     }
 

app/api/process/route.ts

@@ -107,7 +107,7 @@ export async function POST(req: NextRequest) {
     // Style blending
     if (params.styleImage) {
       const strength = params.blendStrength || 50;
-      prompts.push(`Apply artistic style transfer: Take the visual style, colors, textures, and artistic techniques from the provided style reference image (attached below) and apply them to the main subject image. Blend at ${strength}% strength - at 100% the output should look like it was painted/created in the exact style of the reference, at 0% it should look unchanged. Preserve the content and structure of the original image while adopting the artistic style.`);
+      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 });
     }
@@ -119,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.aspectRatio) {
+        params.iso || params.filmStyle || params.lighting || params.bokeh || params.composition) {
       const cameraSettings: string[] = [];
       if (params.focalLength) {
         if (params.focalLength === "8mm fisheye") {
@@ -137,7 +137,6 @@ 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(", ")}`);

app/editor/nodes.tsx

@@ -180,8 +180,15 @@ export function BackgroundNodeView({
           <Button
             variant="ghost"
             size="icon"
-            className="text-destructive"
-            onClick={() => onDelete(node.id)}
+            className="text-destructive hover:bg-destructive/20"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              if (confirm('Delete this node?')) {
+                onDelete(node.id);
+              }
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
             title="Delete node"
             aria-label="Delete node"
           >
@@ -358,8 +365,15 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
           <Button
             variant="ghost"
             size="icon"
-            className="text-destructive"
-            onClick={() => onDelete(node.id)}
+            className="text-destructive hover:bg-destructive/20"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              if (confirm('Delete this node?')) {
+                onDelete(node.id);
+              }
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
             title="Delete node"
             aria-label="Delete node"
           >
@@ -487,8 +501,15 @@ export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEnd
           <Button
             variant="ghost"
             size="icon"
-            className="text-destructive"
-            onClick={() => onDelete(node.id)}
+            className="text-destructive hover:bg-destructive/20"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              if (confirm('Delete this node?')) {
+                onDelete(node.id);
+              }
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
             title="Delete node"
             aria-label="Delete node"
           >
@@ -576,8 +597,15 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
           <Button
             variant="ghost"
             size="icon"
-            className="text-destructive"
-            onClick={() => onDelete(node.id)}
+            className="text-destructive hover:bg-destructive/20"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              if (confirm('Delete this node?')) {
+                onDelete(node.id);
+              }
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
             title="Delete node"
             aria-label="Delete node"
           >
@@ -771,8 +799,15 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
           <Button
             variant="ghost"
             size="icon"
-            className="text-destructive"
-            onClick={() => onDelete(node.id)}
+            className="text-destructive hover:bg-destructive/20"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              if (confirm('Delete this node?')) {
+                onDelete(node.id);
+              }
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
             title="Delete node"
             aria-label="Delete node"
           >
@@ -943,8 +978,15 @@ export function BlendNodeView({ node, onDelete, onUpdate, onStartConnection, onE
           <Button
             variant="ghost"
             size="icon"
-            className="text-destructive"
-            onClick={() => onDelete(node.id)}
+            className="text-destructive hover:bg-destructive/20"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              if (confirm('Delete this node?')) {
+                onDelete(node.id);
+              }
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
             title="Delete node"
             aria-label="Delete node"
           >

app/editor/page.tsx

@@ -25,25 +25,34 @@ function generateMergePrompt(characterData: { image: string; label: string }[]):
   
   const labels = characterData.map((d, i) => `Image ${i + 1} (${d.label})`).join(", ");
   
-  return `MERGE TASK: You are provided with exactly ${count} source images.
+  return `MERGE TASK: Create a natural, cohesive group photo combining ALL subjects from ${count} provided 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.`;
+CRITICAL REQUIREMENTS:
+1. Extract ALL people/subjects from EACH image exactly as they appear
+2. Place them together in a SINGLE UNIFIED SCENE with:
+   - Consistent lighting direction and color temperature
+   - Matching shadows and ambient lighting
+   - Proper scale relationships (realistic relative sizes)
+   - Natural spacing as if they were photographed together
+   - Shared environment/background that looks cohesive
+
+3. Composition guidelines:
+   - Arrange subjects at similar depth (not one far behind another)
+   - Use natural group photo positioning (slight overlap is ok)
+   - Ensure all faces are clearly visible
+   - Create visual balance in the composition
+   - Apply consistent color grading across all subjects
+
+4. Environmental unity:
+   - Use a single, coherent background for all subjects
+   - Match the perspective as if taken with one camera
+   - Ensure ground plane continuity (all standing on same level)
+   - Apply consistent atmospheric effects (if any)
+
+The result should look like all subjects were photographed together in the same place at the same time, NOT like separate images placed side by side.`;
 }
 
 // Types
@@ -583,6 +592,18 @@ export default function EditorPage() {
     } as CharacterNode,
   ]);
 
+  // Theme state
+  const [theme, setTheme] = useState<'dark' | 'light'>('dark');
+  
+  // Apply theme to document
+  useEffect(() => {
+    if (theme === 'light') {
+      document.documentElement.classList.remove('dark');
+    } else {
+      document.documentElement.classList.add('dark');
+    }
+  }, [theme]);
+
   // Viewport state
   const [scale, setScale] = useState(1);
   const [tx, setTx] = useState(0);
@@ -694,6 +715,9 @@ export default function EditorPage() {
       }
       setDraggingFrom(null);
       setDragPos(null);
+      // Re-enable text selection
+      document.body.style.userSelect = '';
+      document.body.style.webkitUserSelect = '';
     }
   };
 
@@ -1051,6 +1075,9 @@ export default function EditorPage() {
   // Connection drag handlers
   const handleStartConnection = (characterId: string) => {
     setDraggingFrom(characterId);
+    // Prevent text selection during dragging
+    document.body.style.userSelect = 'none';
+    document.body.style.webkitUserSelect = 'none';
   };
 
   const handleEndConnection = (mergeId: string) => {
@@ -1058,6 +1085,9 @@ export default function EditorPage() {
       connectToMerge(mergeId, draggingFrom);
       setDraggingFrom(null);
       setDragPos(null);
+      // Re-enable text selection
+      document.body.style.userSelect = '';
+      document.body.style.webkitUserSelect = '';
     }
   };
 
@@ -1073,6 +1103,9 @@ export default function EditorPage() {
     if (draggingFrom) {
       setDraggingFrom(null);
       setDragPos(null);
+      // Re-enable text selection
+      document.body.style.userSelect = '';
+      document.body.style.webkitUserSelect = '';
     }
   };
   const disconnectFromMerge = (mergeId: string, characterId: string) => {
@@ -1376,7 +1409,34 @@ export default function EditorPage() {
   return (
     <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>
+        <h1 className="text-lg font-semibold tracking-wide">
+          <span className="mr-2" aria-hidden>🍌</span>Nano Banana Editor
+        </h1>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+          title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+          className="rounded-lg"
+        >
+          {theme === 'dark' ? (
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="12" r="5"/>
+              <line x1="12" y1="1" x2="12" y2="3"/>
+              <line x1="12" y1="21" x2="12" y2="23"/>
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+              <line x1="1" y1="12" x2="3" y2="12"/>
+              <line x1="21" y1="12" x2="23" y2="12"/>
+              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+            </svg>
+          ) : (
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+            </svg>
+          )}
+        </Button>
       </header>
 
       <div

app/globals.css

@@ -40,8 +40,39 @@
   --chart-5: 27 87% 67%;
 }
 
+.dark {
+  --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%;
+}
+
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not(.light) {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
 
@@ -146,6 +177,19 @@ body {
   backface-visibility: hidden;
   perspective: 1000px;
 }
+
+/* Prevent text selection on node elements except inputs */
+.nb-node * {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.nb-node input,
+.nb-node textarea,
+.nb-node select {
+  user-select: text;
+  -webkit-user-select: text;
+}
 .nb-node .nb-header {
   background: linear-gradient(to bottom, hsl(var(--muted) / 0.35), hsl(var(--muted) / 0.08));
 }
@@ -158,6 +202,8 @@ body {
   cursor: crosshair;
   transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
   position: relative;
+  user-select: none;
+  -webkit-user-select: none;
 }
 .nb-port:hover {
   transform: scale(1.25);