some changes

app/api/hf-process/route.ts

@@ -0,0 +1,334 @@
+/**
+ * API ROUTE: /api/hf-process
+ * 
+ * HuggingFace model processing endpoint for the Nano Banana Editor.
+ * Handles image editing and generation using HuggingFace models.
+ * 
+ * Supported Models:
+ * - black-forest-labs/FLUX.1-Kontext-dev: Image editing with context understanding
+ * - Qwen/Qwen-Image-Edit: Powerful image editing model  
+ * - black-forest-labs/FLUX.1-dev: Text-to-image generation
+ * 
+ * IMPORTANT LIMITATIONS:
+ * - These models only accept SINGLE images for editing
+ * - MERGE operations require Nano Banana Pro (Gemini API) which accepts multiple images
+ * - Text-to-image (FLUX.1-dev) doesn't require input images
+ */
+
+import { NextRequest, NextResponse } from "next/server";
+import { cookies } from "next/headers";
+import { HfInference } from "@huggingface/inference";
+
+// Configure Next.js runtime
+export const runtime = "nodejs";
+
+// Set maximum execution time for AI operations
+export const maxDuration = 60;
+
+/**
+ * Available HuggingFace models with their capabilities
+ */
+export const HF_MODELS = {
+    "FLUX.1-Kontext-dev": {
+        id: "black-forest-labs/FLUX.1-Kontext-dev",
+        name: "FLUX.1 Kontext",
+        type: "image-to-image",
+        description: "Advanced image editing with context understanding",
+        supportsNodes: ["BACKGROUND", "CLOTHES", "STYLE", "EDIT", "CAMERA", "AGE", "FACE", "LIGHTNING", "POSES"],
+    },
+    "Qwen-Image-Edit": {
+        id: "Qwen/Qwen-Image-Edit",
+        name: "Qwen Image Edit",
+        type: "image-to-image",
+        description: "Powerful image editing and manipulation",
+        supportsNodes: ["BACKGROUND", "CLOTHES", "STYLE", "EDIT", "CAMERA", "AGE", "FACE", "LIGHTNING", "POSES"],
+    },
+    "FLUX.1-dev": {
+        id: "black-forest-labs/FLUX.1-dev",
+        name: "FLUX.1 Dev",
+        type: "text-to-image",
+        description: "High-quality text-to-image generation",
+        supportsNodes: ["CHARACTER"], // Only for generating new images
+    },
+};
+
+/**
+ * Parse base64 data URL into components
+ */
+function parseDataUrl(dataUrl: string): { mimeType: string; data: string } | null {
+    const match = dataUrl.match(/^data:(.*?);base64,(.*)$/);
+    if (!match) return null;
+    return {
+        mimeType: match[1] || "image/png",
+        data: match[2]
+    };
+}
+
+/**
+ * Convert base64 to Blob for HuggingFace API
+ */
+function base64ToBlob(base64: string, mimeType: string): Blob {
+    const byteCharacters = atob(base64);
+    const byteNumbers = new Array(byteCharacters.length);
+    for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+    }
+    const byteArray = new Uint8Array(byteNumbers);
+    return new Blob([byteArray], { type: mimeType });
+}
+
+/**
+ * Main POST handler for HuggingFace model processing
+ */
+export async function POST(req: NextRequest) {
+    try {
+        // Parse request body
+        let body: {
+            type: string;
+            model: string;
+            image?: string;
+            prompt?: string;
+            params?: any;
+        };
+
+        try {
+            body = await req.json();
+        } catch (jsonError) {
+            console.error('[HF-API] Failed to parse JSON:', jsonError);
+            return NextResponse.json(
+                { error: "Invalid JSON in request body" },
+                { status: 400 }
+            );
+        }
+
+        // Get HF token from cookies
+        let hfToken: string | null = null;
+        try {
+            const cookieStore = await cookies();
+            const tokenCookie = cookieStore.get('hf_token');
+            hfToken = tokenCookie?.value || null;
+        } catch (error) {
+            console.error('Error reading HF token:', error);
+        }
+
+        if (!hfToken) {
+            return NextResponse.json(
+                { error: "Please login with HuggingFace to use HF models. Click 'Login with HuggingFace' in the header." },
+                { status: 401 }
+            );
+        }
+
+        // Validate model selection
+        const modelKey = body.model as keyof typeof HF_MODELS;
+        const modelConfig = HF_MODELS[modelKey];
+
+        if (!modelConfig) {
+            return NextResponse.json(
+                { error: `Invalid model: ${body.model}. Available models: ${Object.keys(HF_MODELS).join(", ")}` },
+                { status: 400 }
+            );
+        }
+
+        // Check for MERGE - not supported with HF models
+        if (body.type === "MERGE") {
+            return NextResponse.json(
+                {
+                    error: "MERGE operations require Nano Banana Pro (Gemini API). HuggingFace models only accept single images. Please switch to 'Nano Banana Pro' mode and enter your Google Gemini API key to use MERGE functionality.",
+                    requiresNanoBananaPro: true
+                },
+                { status: 400 }
+            );
+        }
+
+        // Initialize HuggingFace client
+        const hf = new HfInference(hfToken);
+
+        // Handle text-to-image generation (FLUX.1-dev)
+        if (modelConfig.type === "text-to-image") {
+            const prompt = body.prompt || body.params?.characterDescription || "A professional portrait photo";
+
+            try {
+                const result = await hf.textToImage({
+                    model: modelConfig.id,
+                    inputs: prompt,
+                    parameters: {
+                        num_inference_steps: 28,
+                        guidance_scale: 3.5,
+                    },
+                });
+
+                // Result is a Blob, convert to base64
+                const resultBlob = result as unknown as Blob;
+                const arrayBuffer = await resultBlob.arrayBuffer();
+                const base64 = Buffer.from(arrayBuffer).toString('base64');
+                const dataUrl = `data:image/png;base64,${base64}`;
+
+                return NextResponse.json({ image: dataUrl });
+            } catch (hfError: any) {
+                console.error('[HF-API] Text-to-image error:', hfError);
+                return NextResponse.json(
+                    { error: `HuggingFace API error: ${hfError.message || 'Unknown error'}` },
+                    { status: 500 }
+                );
+            }
+        }
+
+        // Handle image-to-image editing
+        if (modelConfig.type === "image-to-image") {
+            // Validate input image
+            if (!body.image) {
+                return NextResponse.json(
+                    { error: "No input image provided. Please connect an image source to this node." },
+                    { status: 400 }
+                );
+            }
+
+            const parsed = parseDataUrl(body.image);
+            if (!parsed) {
+                return NextResponse.json(
+                    { error: "Invalid image format. Please use a valid image." },
+                    { status: 400 }
+                );
+            }
+
+            // Build the editing prompt from parameters
+            const prompts: string[] = [];
+            const params = body.params || {};
+
+            // Background modifications
+            if (params.backgroundType) {
+                if (params.backgroundType === "color") {
+                    prompts.push(`Change the background to a solid ${params.backgroundColor || "white"} color.`);
+                } else if (params.backgroundType === "custom" && params.customPrompt) {
+                    prompts.push(params.customPrompt);
+                } else if (params.backgroundType === "city") {
+                    prompts.push(`Place the person in a ${params.citySceneType || "busy city street"} during ${params.cityTimeOfDay || "daytime"}.`);
+                }
+            }
+
+            // Style application  
+            if (params.stylePreset) {
+                const styleMap: { [key: string]: string } = {
+                    "90s-anime": "Transform into 90s anime art style",
+                    "mha": "Convert into My Hero Academia anime style",
+                    "dbz": "Convert into Dragon Ball Z anime style",
+                    "ukiyo-e": "Convert into Japanese Ukiyo-e woodblock print style",
+                    "cubism": "Convert into Cubist art style",
+                    "van-gogh": "Convert into Van Gogh post-impressionist style",
+                    "simpsons": "Convert into The Simpsons cartoon style",
+                    "family-guy": "Convert into Family Guy animation style",
+                    "pixar": "Convert into Pixar animation style",
+                    "manga": "Convert into Manga style",
+                };
+                const styleDescription = styleMap[params.stylePreset] || `Apply ${params.stylePreset} style`;
+                prompts.push(`${styleDescription} at ${params.styleStrength || 50}% intensity.`);
+            }
+
+            // Edit prompt
+            if (params.editPrompt) {
+                prompts.push(params.editPrompt);
+            }
+
+            // Age transformation
+            if (params.targetAge) {
+                prompts.push(`Transform the person to look ${params.targetAge} years old.`);
+            }
+
+            // Face modifications
+            if (params.faceOptions) {
+                const face = params.faceOptions;
+                const modifications: string[] = [];
+                if (face.removePimples) modifications.push("remove pimples");
+                if (face.addSunglasses) modifications.push("add sunglasses");
+                if (face.addHat) modifications.push("add a hat");
+                if (face.changeHairstyle) modifications.push(`change hairstyle to ${face.changeHairstyle}`);
+                if (face.facialExpression) modifications.push(`change expression to ${face.facialExpression}`);
+                if (modifications.length > 0) {
+                    prompts.push(`Face modifications: ${modifications.join(", ")}`);
+                }
+            }
+
+            // Lighting effects
+            if (params.lightingPrompt) {
+                prompts.push(`Apply lighting: ${params.lightingPrompt}`);
+            }
+
+            // Pose modifications
+            if (params.posePrompt) {
+                prompts.push(`Change pose to: ${params.posePrompt}`);
+            }
+
+            const finalPrompt = prompts.length > 0
+                ? prompts.join(" ")
+                : body.prompt || "Enhance this image with high quality output.";
+
+            try {
+                // Convert base64 to blob for HF API
+                const imageBlob = base64ToBlob(parsed.data, parsed.mimeType);
+
+                // Use image-to-image endpoint
+                const result = await hf.imageToImage({
+                    model: modelConfig.id,
+                    inputs: imageBlob,
+                    parameters: {
+                        prompt: finalPrompt,
+                        num_inference_steps: 28,
+                        guidance_scale: 7.5,
+                        strength: 0.75,
+                    },
+                });
+
+                // Convert result blob to base64
+                const arrayBuffer = await result.arrayBuffer();
+                const base64 = Buffer.from(arrayBuffer).toString('base64');
+                const dataUrl = `data:image/png;base64,${base64}`;
+
+                return NextResponse.json({ image: dataUrl });
+            } catch (hfError: any) {
+                console.error('[HF-API] Image-to-image error:', hfError);
+
+                // Provide helpful error messages
+                if (hfError.message?.includes('401') || hfError.message?.includes('unauthorized')) {
+                    return NextResponse.json(
+                        { error: "HuggingFace authentication failed. Please logout and login again." },
+                        { status: 401 }
+                    );
+                }
+
+                if (hfError.message?.includes('Model') && hfError.message?.includes('not')) {
+                    return NextResponse.json(
+                        { error: `Model ${modelConfig.id} is not available or requires a Pro subscription.` },
+                        { status: 503 }
+                    );
+                }
+
+                return NextResponse.json(
+                    { error: `HuggingFace API error: ${hfError.message || 'Unknown error'}` },
+                    { status: 500 }
+                );
+            }
+        }
+
+        return NextResponse.json(
+            { error: "Unsupported operation type" },
+            { status: 400 }
+        );
+
+    } catch (err: any) {
+        console.error("/api/hf-process error:", err);
+        return NextResponse.json(
+            { error: `Failed to process: ${err?.message || 'Unknown error'}` },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * GET handler to return available models and their capabilities
+ */
+export async function GET() {
+    return NextResponse.json({
+        models: HF_MODELS,
+        note: "MERGE operations require Nano Banana Pro (Gemini API) as it needs multi-image input which HuggingFace models don't support."
+    });
+}

app/globals.css

@@ -162,11 +162,13 @@ body {
 
 /* Nano Banana Editor - node visuals */
 .nb-node {
-  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);
+  background: hsl(var(--card) / 0.85);
+  color: hsl(var(--card-foreground));
+  border: 1px solid hsl(var(--border));
+  box-shadow: 0 10px 30px -10px hsl(var(--shadow) / 0.2), 0 4px 12px -4px hsl(var(--shadow) / 0.1);
   border-radius: var(--radius);
-  backdrop-filter: blur(6px);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   /* Prevent blurring on zoom */
   image-rendering: -webkit-optimize-contrast;
   image-rendering: crisp-edges;
@@ -176,6 +178,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
   backface-visibility: hidden;
   perspective: 1000px;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.nb-node:hover {
+  border-color: hsl(var(--ring) / 0.5);
+  box-shadow: 0 14px 40px -10px hsl(var(--shadow) / 0.3), 0 4px 12px -4px hsl(var(--shadow) / 0.2);
 }
 
 /* Prevent text selection on node elements except inputs */
@@ -189,54 +197,84 @@ body {
 .nb-node select {
   user-select: text;
   -webkit-user-select: text;
+  background: hsl(var(--background) / 0.5);
+  color: hsl(var(--foreground));
+  border: 1px solid hsl(var(--border));
+  border-radius: calc(var(--radius) - 4px);
+}
+
+.nb-node input:focus,
+.nb-node textarea:focus,
+.nb-node select:focus {
+  outline: none;
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
 }
+
 .nb-node .nb-header {
-  background: linear-gradient(to bottom, hsl(var(--muted) / 0.35), hsl(var(--muted) / 0.08));
+  background: hsl(var(--muted) / 0.5);
+  border-bottom: 1px solid hsl(var(--border) / 0.5);
+  color: hsl(var(--foreground));
 }
+
 .nb-port {
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   border-radius: 9999px;
-  border: 3px solid rgba(255,255,255,0.6);
-  background: hsl(var(--popover));
+  border: 2px solid hsl(var(--background));
+  background: hsl(var(--muted-foreground));
   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;
+  box-shadow: 0 0 0 1px hsl(var(--border));
 }
+
 .nb-port:hover {
-  transform: scale(1.25);
-  background: hsl(var(--accent));
-  box-shadow: 0 0 12px hsl(var(--ring) / 0.4);
+  transform: scale(1.4);
+  background: hsl(var(--primary));
+  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.2);
 }
-.nb-port.out { 
-  border-color: hsl(var(--primary)); 
+
+.nb-port.out {
+  background: hsl(var(--primary));
+  border-color: hsl(var(--background));
 }
-.nb-port.out:hover { 
+
+.nb-port.out:hover {
   background: hsl(var(--primary));
-  box-shadow: 0 0 16px hsl(var(--primary) / 0.6);
+  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.3);
 }
-.nb-port.in { 
-  border-color: #34d399; 
+
+.nb-port.in {
+  background: hsl(var(--secondary-foreground));
+  border-color: hsl(var(--background));
 }
-.nb-port.in:hover { 
-  background: #34d399;
-  box-shadow: 0 0 16px rgba(52,211,153,0.6);
+
+.nb-port.in:hover {
+  background: hsl(var(--secondary-foreground));
+  box-shadow: 0 0 0 4px hsl(var(--secondary-foreground) / 0.3);
 }
 
 .nb-line {
-  stroke: #7c7c7c;
+  stroke: hsl(var(--muted-foreground));
   stroke-width: 2.5;
+  transition: stroke 0.2s ease, stroke-width 0.2s ease;
+}
+
+.nb-line.active {
+  stroke: hsl(var(--primary));
+  stroke-width: 3.5;
+  filter: drop-shadow(0 0 4px hsl(var(--primary) / 0.5));
 }
-.nb-line.active { stroke: #8b5cf6; }
 
 /* Canvas grid */
 .nb-canvas {
   background-color: hsl(var(--background));
   background-image:
-    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);
+    radial-gradient(circle at 1px 1px, hsl(var(--muted-foreground) / 0.2) 1px, transparent 0),
+    radial-gradient(circle at 1px 1px, hsl(var(--muted-foreground) / 0.1) 1px, transparent 0);
   background-size: 20px 20px, 100px 100px;
 }
 
@@ -247,7 +285,8 @@ body {
 }
 
 .nb-node img {
-  image-rendering: auto; /* Keep images smooth */
+  image-rendering: auto;
+  /* Keep images smooth */
   image-rendering: -webkit-optimize-contrast;
 }
 
@@ -261,7 +300,7 @@ body {
 }
 
 /* Force GPU acceleration for transforms */
-.nb-canvas > div {
+.nb-canvas>div {
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
 }
@@ -272,4 +311,4 @@ body {
     -webkit-backface-visibility: hidden;
     -webkit-transform: translateZ(0) scale(1.0, 1.0);
   }
-}
+}

app/layout.tsx

@@ -13,8 +13,10 @@
  */
 
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";  // Modern Google Fonts
-import "./globals.css";  // Tailwind CSS and global styles
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
+import { ModeToggle } from "@/components/mode-toggle";
 
 /**
  * Configure Geist Sans font
@@ -60,11 +62,19 @@ export default function RootLayout({
   children: React.ReactNode;  // Type-safe children prop
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground font-sans`}
       >
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+          <ModeToggle />
+        </ThemeProvider>
       </body>
     </html>
   );

app/nodes.tsx

@@ -89,7 +89,7 @@ async function copyImageToClipboard(dataUrl: string) {
     // Fetch the data URL and convert it to a Blob object
     const response = await fetch(dataUrl);          // Fetch the base64 data URL
     const blob = await response.blob();             // Convert response to Blob format
-    
+
     // The browser clipboard API only supports PNG format for images
     // If the image is not PNG, we need to convert it first
     if (blob.type !== 'image/png') {
@@ -97,7 +97,7 @@ async function copyImageToClipboard(dataUrl: string) {
       const canvas = document.createElement('canvas');    // Create invisible canvas
       const ctx = canvas.getContext('2d');                // Get 2D drawing context
       const img = new Image();                            // Create image element
-      
+
       // Wait for the image to load before processing
       await new Promise((resolve) => {
         img.onload = () => {                              // When image loads
@@ -108,12 +108,12 @@ async function copyImageToClipboard(dataUrl: string) {
         };
         img.src = dataUrl;                                // Start loading the image
       });
-      
+
       // Convert the canvas content to PNG blob
       const pngBlob = await new Promise<Blob>((resolve) => {
         canvas.toBlob((blob) => resolve(blob!), 'image/png');  // Convert canvas to PNG blob
       });
-      
+
       // Write the converted PNG blob to clipboard
       await navigator.clipboard.write([
         new ClipboardItem({ 'image/png': pngBlob })       // Create clipboard item with PNG data
@@ -169,7 +169,7 @@ function NodeOutputSection({
 }) {
   // If no image is available, don't render anything
   if (!output) return null;
-  
+
   return (
     // Main container for output section with vertical spacing
     <div className="space-y-2">
@@ -181,7 +181,7 @@ function NodeOutputSection({
           <div className="text-xs text-white/70">Output</div>
         </div>
         {/* Output image with click-to-copy functionality */}
-        <img 
+        <img
           src={output}  // Display the output image
           className="w-full rounded cursor-pointer hover:opacity-80 transition-all duration-200 hover:ring-2 hover:ring-white/30"  // Styling with hover effects
           alt="Output"  // Accessibility description
@@ -189,14 +189,14 @@ function NodeOutputSection({
           onContextMenu={(e) => { // Right-click context menu handler
             e.preventDefault(); // Prevent browser context menu from appearing
             copyImageToClipboard(output); // Copy image to clipboard
-            
+
             // Show brief visual feedback when image is copied
             const img = e.currentTarget; // Get the image element
             const originalTitle = img.title; // Store original tooltip text
             img.title = "Copied to clipboard!"; // Update tooltip to show success
             img.style.filter = "brightness(1.2)"; // Brighten the image briefly
             img.style.transform = "scale(0.98)"; // Slightly scale down the image
-            
+
             // Reset visual feedback after 300ms
             setTimeout(() => {
               img.title = originalTitle; // Restore original tooltip
@@ -270,12 +270,12 @@ function useNodeDrag(node: any, onUpdatePosition?: (id: string, x: number, y: nu
   const [localPos, setLocalPos] = useState({ x: node.x, y: node.y });  // Local position for smooth dragging
   const dragging = useRef(false);                                      // Track drag state
   const start = useRef<{ sx: number; sy: number; ox: number; oy: number } | null>(null);  // Drag start coordinates
-  
+
   // Sync local position when parent position changes
   useEffect(() => {
     setLocalPos({ x: node.x, y: node.y });
   }, [node.x, node.y]);
-  
+
   /**
    * Handle pointer down - start dragging
    * Captures the pointer and records starting positions
@@ -286,7 +286,7 @@ function useNodeDrag(node: any, onUpdatePosition?: (id: string, x: number, y: nu
     start.current = { sx: e.clientX, sy: e.clientY, ox: localPos.x, oy: localPos.y };  // Record start positions
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); // Capture pointer for reliable tracking
   };
-  
+
   /**
    * Handle pointer move - update position during drag
    * Calculates new position based on mouse movement delta
@@ -300,7 +300,7 @@ function useNodeDrag(node: any, onUpdatePosition?: (id: string, x: number, y: nu
     setLocalPos({ x: newX, y: newY });                 // Update local position for immediate visual feedback
     if (onUpdatePosition) onUpdatePosition(node.id, newX, newY);  // Update parent state
   };
-  
+
   /**
    * Handle pointer up - end dragging
    * Releases pointer capture and resets drag state
@@ -310,7 +310,7 @@ function useNodeDrag(node: any, onUpdatePosition?: (id: string, x: number, y: nu
     start.current = null;                                            // Clear start position
     (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);  // Release pointer
   };
-  
+
   return { localPos, onPointerDown, onPointerMove, onPointerUp };
 }
 
@@ -331,14 +331,14 @@ function useNodeDrag(node: any, onUpdatePosition?: (id: string, x: number, y: nu
  * @param onStartConnection Callback when starting a connection from this port
  * @param onEndConnection Callback when ending a connection at this port
  */
-function Port({ 
-  className, 
+function Port({
+  className,
   nodeId,
   isOutput,
   onStartConnection,
   onEndConnection,
   onDisconnect
-}: { 
+}: {
   className?: string;
   nodeId?: string;
   isOutput?: boolean;
@@ -355,7 +355,7 @@ function Port({
       onStartConnection(nodeId);  // Start connection from this output port
     }
   };
-  
+
   /**
    * Handle ending a connection (pointer up on input port)
    */
@@ -378,15 +378,15 @@ function Port({
   };
 
   return (
-    <div 
+    <div
       className={cx("nb-port", className)}              // Combine base port classes with custom ones
       onPointerDown={handlePointerDown}                 // Start connection drag from output ports
       onPointerUp={handlePointerUp}                     // End connection drag at input ports
       onPointerEnter={handlePointerUp}                  // Also accept connections on hover (better UX)
       onClick={handleClick}                             // Allow clicking input ports to disconnect
       title={
-        isOutput 
-          ? "Drag from here to connect to another node's input" 
+        isOutput
+          ? "Drag from here to connect to another node's input"
           : "Drop connections here or click to disconnect"
       }
     />
@@ -432,7 +432,7 @@ export function BackgroundNodeView({
 }: any) {
   // Use custom drag hook to handle node positioning in the editor
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   /**
    * Handle image file upload from file input
    * Converts uploaded file to base64 data URL for storage and preview
@@ -446,14 +446,14 @@ export function BackgroundNodeView({
       reader.readAsDataURL(e.target.files[0]);                    // Convert file to base64
     }
   };
-  
+
   /**
    * Handle image paste from clipboard
    * Supports both image files and image URLs pasted from clipboard
    */
   const handleImagePaste = (e: React.ClipboardEvent) => {
     const items = e.clipboardData.items;                           // Get clipboard items
-    
+
     // First, try to find image files in clipboard
     for (let i = 0; i < items.length; i++) {
       if (items[i].type.startsWith("image/")) {                   // Check if item is an image
@@ -468,14 +468,14 @@ export function BackgroundNodeView({
         }
       }
     }
-    
+
     // If no image files, check for text that might be image URLs
     const text = e.clipboardData.getData("text");                 // Get text from clipboard
     if (text && (text.startsWith("http") || text.startsWith("data:image"))) {
       onUpdate(node.id, { customBackgroundImage: text });         // Use URL directly
     }
   };
-  
+
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
     const files = e.dataTransfer.files;
@@ -487,16 +487,16 @@ export function BackgroundNodeView({
       reader.readAsDataURL(files[0]);
     }
   };
-  
+
   return (
-    <div 
-      className="nb-node absolute text-white w-[320px]" 
+    <div
+      className="nb-node absolute text-white w-[320px]"
       style={{ left: localPos.x, top: localPos.y }}
       onDrop={handleDrop}
       onDragOver={(e) => e.preventDefault()}
       onPaste={handleImagePaste}
     >
-      <div 
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -539,7 +539,7 @@ export function BackgroundNodeView({
             </Button>
           </div>
         )}
-        <Select 
+        <Select
           className="w-full"
           value={node.backgroundType || "color"}
           onChange={(e) => onUpdate(node.id, { backgroundType: (e.target as HTMLSelectElement).value })}
@@ -552,7 +552,7 @@ export function BackgroundNodeView({
           <option value="upload">Upload Image</option>
           <option value="custom">Custom Prompt</option>
         </Select>
-        
+
         {node.backgroundType === "color" && (
           <ColorPicker
             className="w-full"
@@ -560,11 +560,11 @@ export function BackgroundNodeView({
             onChange={(e) => onUpdate(node.id, { backgroundColor: (e.target as HTMLInputElement).value })}
           />
         )}
-        
+
         {node.backgroundType === "gradient" && (
           <div className="space-y-3">
             <label className="text-xs text-white/70">Gradient Direction</label>
-            <Select 
+            <Select
               className="w-full"
               value={node.gradientDirection || "to right"}
               onChange={(e) => onUpdate(node.id, { gradientDirection: (e.target as HTMLSelectElement).value })}
@@ -591,10 +591,10 @@ export function BackgroundNodeView({
               value={node.gradientEndColor || "#4ecdc4"}
               onChange={(e) => onUpdate(node.id, { gradientEndColor: (e.target as HTMLInputElement).value })}
             />
-            <div 
+            <div
               className="w-full h-8 rounded-md border border-white/20"
               style={{
-                background: node.gradientDirection === "radial" 
+                background: node.gradientDirection === "radial"
                   ? `radial-gradient(circle, ${node.gradientStartColor || "#ff6b6b"} 0%, ${node.gradientEndColor || "#4ecdc4"} 100%)`
                   : `linear-gradient(${node.gradientDirection || "to right"}, ${node.gradientStartColor || "#ff6b6b"} 0%, ${node.gradientEndColor || "#4ecdc4"} 100%)`
               }}
@@ -602,9 +602,9 @@ export function BackgroundNodeView({
             />
           </div>
         )}
-        
+
         {node.backgroundType === "image" && (
-          <Select 
+          <Select
             className="w-full"
             value={node.backgroundImage || ""}
             onChange={(e) => onUpdate(node.id, { backgroundImage: (e.target as HTMLSelectElement).value })}
@@ -617,11 +617,11 @@ export function BackgroundNodeView({
             <option value="city">City Skyline</option>
           </Select>
         )}
-        
+
         {node.backgroundType === "city" && (
           <div className="space-y-3">
             <label className="text-xs text-white/70">City Scene Type</label>
-            <Select 
+            <Select
               className="w-full"
               value={node.citySceneType || "busy_street"}
               onChange={(e) => onUpdate(node.id, { citySceneType: (e.target as HTMLSelectElement).value })}
@@ -639,7 +639,7 @@ export function BackgroundNodeView({
               <option value="matrix_alley">Matrix Style Urban Alley</option>
             </Select>
             <label className="text-xs text-white/70">Time of Day</label>
-            <Select 
+            <Select
               className="w-full"
               value={node.cityTimeOfDay || "daytime"}
               onChange={(e) => onUpdate(node.id, { cityTimeOfDay: (e.target as HTMLSelectElement).value })}
@@ -653,11 +653,11 @@ export function BackgroundNodeView({
             </Select>
           </div>
         )}
-        
+
         {node.backgroundType === "photostudio" && (
           <div className="space-y-3">
             <label className="text-xs text-white/70">Studio Setup</label>
-            <Select 
+            <Select
               className="w-full"
               value={node.studioSetup || "white_seamless"}
               onChange={(e) => onUpdate(node.id, { studioSetup: (e.target as HTMLSelectElement).value })}
@@ -680,7 +680,7 @@ export function BackgroundNodeView({
               </>
             )}
             <label className="text-xs text-white/70">Lighting Setup</label>
-            <Select 
+            <Select
               className="w-full"
               value={node.studioLighting || "key_fill"}
               onChange={(e) => onUpdate(node.id, { studioLighting: (e.target as HTMLSelectElement).value })}
@@ -703,13 +703,13 @@ export function BackgroundNodeView({
             </div>
           </div>
         )}
-        
+
         {node.backgroundType === "upload" && (
           <div className="space-y-2">
             {node.customBackgroundImage ? (
               <div className="relative">
                 <img src={node.customBackgroundImage} className="w-full rounded" alt="Custom Background" />
-                <Button 
+                <Button
                   variant="destructive"
                   size="sm"
                   className="absolute top-2 right-2"
@@ -734,7 +734,7 @@ export function BackgroundNodeView({
             )}
           </div>
         )}
-        
+
         {node.backgroundType === "custom" && (
           <div className="space-y-2">
             <Textarea
@@ -753,17 +753,17 @@ export function BackgroundNodeView({
                   alert('Please enter a background description first');
                   return;
                 }
-                
+
                 try {
                   const response = await fetch('/api/improve-prompt', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ 
+                    body: JSON.stringify({
                       prompt: node.customPrompt,
                       type: 'background'
                     })
                   });
-                  
+
                   if (response.ok) {
                     const { improvedPrompt } = await response.json();
                     onUpdate(node.id, { customPrompt: improvedPrompt });
@@ -781,8 +781,8 @@ export function BackgroundNodeView({
             </Button>
           </div>
         )}
-        
-        <Button 
+
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
@@ -790,7 +790,7 @@ export function BackgroundNodeView({
         >
           {node.isRunning ? "Processing..." : "Apply Background"}
         </Button>
-        
+
         <NodeOutputSection
           nodeId={node.id}
           output={node.output}
@@ -834,7 +834,7 @@ export function BackgroundNodeView({
 export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   /**
    * Preset clothing options available for quick selection
    * Each preset includes a display name and path to the reference image
@@ -878,16 +878,16 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
   const selectPreset = (presetPath: string, presetName: string) => {
     onUpdate(node.id, { clothesImage: presetPath, selectedPreset: presetName });
   };
-  
+
   return (
-    <div 
-      className="nb-node absolute text-white w-[320px]"
+    <div
+      className="nb-node absolute w-[320px]"
       style={{ left: localPos.x, top: localPos.y }}
       onDrop={onDrop}
       onDragOver={(e) => e.preventDefault()}
       onPaste={onPaste}
     >
-      <div 
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -930,18 +930,17 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
             </Button>
           </div>
         )}
-        <div className="text-xs text-white/70">Clothes Reference</div>
-        
+        <div className="text-xs text-muted-foreground">Clothes Reference</div>
+
         {/* Preset clothes options */}
         <div className="flex gap-2">
           {presetClothes.map((preset) => (
             <button
               key={preset.name}
-              className={`flex-1 p-2 rounded border ${
-                node.selectedPreset === preset.name
-                  ? "border-indigo-400 bg-indigo-500/20"
-                  : "border-white/20 hover:border-white/40"
-              }`}
+              className={`flex-1 p-2 rounded border ${node.selectedPreset === preset.name
+                ? "border-primary bg-primary/20"
+                : "border-border hover:border-primary/50"
+                }`}
               onClick={() => selectPreset(preset.path, preset.name)}
             >
               <img src={preset.path} alt={preset.name} className="w-full h-28 object-contain rounded mb-1" />
@@ -949,14 +948,14 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
             </button>
           ))}
         </div>
-        
-        <div className="text-xs text-white/50 text-center">— or —</div>
-        
+
+        <div className="text-xs text-muted-foreground/50 text-center">— or —</div>
+
         {/* Custom image upload */}
         {node.clothesImage && !node.selectedPreset ? (
           <div className="relative">
             <img src={node.clothesImage} className="w-full rounded" alt="Clothes" />
-            <Button 
+            <Button
               variant="destructive"
               size="sm"
               className="absolute top-2 right-2"
@@ -979,15 +978,15 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
                 }
               }}
             />
-            <div className="border-2 border-dashed border-white/20 rounded-lg p-6 text-center cursor-pointer hover:border-white/40 transition-colors">
-              <div className="text-white/40 text-lg mb-2">📁</div>
-              <p className="text-sm text-white/70 font-medium">Drop, upload, or paste clothes image</p>
-              <p className="text-xs text-white/50 mt-1">JPG, PNG, WebP supported</p>
+            <div className="border-2 border-dashed border-border rounded-lg p-6 text-center cursor-pointer hover:border-primary/50 transition-colors">
+              <div className="text-muted-foreground/40 text-lg mb-2">📁</div>
+              <p className="text-sm text-muted-foreground font-medium">Drop, upload, or paste clothes image</p>
+              <p className="text-xs text-muted-foreground/50 mt-1">JPG, PNG, WebP supported</p>
             </div>
           </label>
         ) : null}
-        
-        <Button 
+
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning || !node.clothesImage}
@@ -1041,10 +1040,10 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
 export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   return (
-    <div className="nb-node absolute text-white w-[280px]" style={{ left: localPos.x, top: localPos.y }}>
-      <div 
+    <div className="nb-node absolute w-[280px]" style={{ left: localPos.x, top: localPos.y }}>
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -1097,7 +1096,7 @@ export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEnd
             onChange={(e) => onUpdate(node.id, { targetAge: parseInt((e.target as HTMLInputElement).value) })}
           />
         </div>
-        <Button 
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
@@ -1156,31 +1155,31 @@ export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEnd
 export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   // Camera lens focal length options (affects field of view and perspective)
   const focalLengths = ["None", "8mm", "12mm", "24mm", "35mm", "50mm", "85mm"];
-  
+
   // Aperture settings (affects depth of field and exposure)
-  const apertures = ["None", "f/0.95", "f/1.2", "f/1.4", "f/1.8", "f/2", "f/2.8", "f/4", "f/5.6","f/11"];
-  
+  const apertures = ["None", "f/0.95", "f/1.2", "f/1.4", "f/1.8", "f/2", "f/2.8", "f/4", "f/5.6", "f/11"];
+
   // Shutter speed options (affects motion blur and exposure)
-  const shutterSpeeds = ["None", "1/1000s", "1/250s","1/30s","1/15", "5s", ];
-  
+  const shutterSpeeds = ["None", "1/1000s", "1/250s", "1/30s", "1/15", "5s",];
+
   // White balance presets for different lighting conditions
   const whiteBalances = ["None", "2800K candlelight", "3200K tungsten", "4000K fluorescent", "5600K daylight", "6500K cloudy", "7000K shade", "8000K blue sky"];
-  
+
   // Camera angle and perspective options
   const angles = ["None", "eye level", "low angle", "high angle", "Dutch tilt", "bird's eye", "worm's eye", "over the shoulder", "POV"];
-  
+
   // ISO sensitivity values (affects image noise and exposure)
-  const isoValues = ["None",  "ISO 100", "ISO 400", "ISO 1600", "ISO 6400"];
-  
+  const isoValues = ["None", "ISO 100", "ISO 400", "ISO 1600", "ISO 6400"];
+
   // Film stock emulation for different photographic styles
-  const filmStyles = ["None","RAW","Kodak Portra", "Fuji Velvia", "Kodak Gold 200","Black & White", "Sepia", "Vintage", "Film Noir"];
-  
+  const filmStyles = ["None", "RAW", "Kodak Portra", "Fuji Velvia", "Kodak Gold 200", "Black & White", "Sepia", "Vintage", "Film Noir"];
+
   // Professional lighting setups and natural lighting conditions
   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"];
-  
+
   // Bokeh (background blur) styles for different lens characteristics
   const bokehStyles = ["None", "Smooth Bokeh", "Swirly Bokeh", "Hexagonal Bokeh", "Cat Eye Bokeh", "Bubble Bokeh"];
 
@@ -1188,8 +1187,8 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
   const motionBlurOptions = ["None", "Light Motion Blur", "Medium Motion Blur", "Heavy Motion Blur", "Radial Blur", "Zoom Blur"];
 
   return (
-    <div className="nb-node absolute text-white w-[360px]" style={{ left: localPos.x, top: localPos.y }}>
-      <div 
+    <div className="nb-node absolute w-[360px]" style={{ left: localPos.x, top: localPos.y }}>
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -1232,12 +1231,12 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
           </div>
         )}
         {/* Basic Camera Settings Section */}
-        <div className="text-xs text-white/50 font-semibold mb-1">Basic Settings</div>
+        <div className="text-xs text-muted-foreground font-semibold mb-1">Basic Settings</div>
         <div className="grid grid-cols-2 gap-2">                     {/* 2-column grid for compact layout */}
           {/* Motion Blur Control - adds movement effects */}
           <div>
-            <label className="text-xs text-white/70">Motion Blur</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Motion Blur</label>
+            <Select
               className="w-full"
               value={node.motionBlur || "None"}                   // Default to "None" if not set
               onChange={(e) => onUpdate(node.id, { motionBlur: (e.target as HTMLSelectElement).value })}
@@ -1248,8 +1247,8 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
           </div>
           {/* Focal Length Control - affects field of view and perspective */}
           <div>
-            <label className="text-xs text-white/70">Focal Length</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Focal Length</label>
+            <Select
               className="w-full"
               value={node.focalLength || "None"}                   // Default to "None" if not set
               onChange={(e) => onUpdate(node.id, { focalLength: (e.target as HTMLSelectElement).value })}
@@ -1258,11 +1257,11 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
               {focalLengths.map(f => <option key={f} value={f}>{f}</option>)}
             </Select>
           </div>
-          
+
           {/* Aperture Control - affects depth of field and exposure */}
           <div>
-            <label className="text-xs text-white/70">Aperture</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Aperture</label>
+            <Select
               className="w-full"
               value={node.aperture || "None"}                     // Default to "None" if not set
               onChange={(e) => onUpdate(node.id, { aperture: (e.target as HTMLSelectElement).value })}
@@ -1271,11 +1270,11 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
               {apertures.map(a => <option key={a} value={a}>{a}</option>)}
             </Select>
           </div>
-          
+
           {/* Shutter Speed Control - affects motion blur and exposure */}
           <div>
-            <label className="text-xs text-white/70">Shutter Speed</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Shutter Speed</label>
+            <Select
               className="w-full"
               value={node.shutterSpeed || "None"}                 // Default to "None" if not set
               onChange={(e) => onUpdate(node.id, { shutterSpeed: (e.target as HTMLSelectElement).value })}
@@ -1284,11 +1283,11 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
               {shutterSpeeds.map(s => <option key={s} value={s}>{s}</option>)}
             </Select>
           </div>
-          
+
           {/* ISO Control - affects sensor sensitivity and image noise */}
           <div>
-            <label className="text-xs text-white/70">ISO</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">ISO</label>
+            <Select
               className="w-full"
               value={node.iso || "None"}                          // Default to "None" if not set
               onChange={(e) => onUpdate(node.id, { iso: (e.target as HTMLSelectElement).value })}
@@ -1298,13 +1297,13 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
             </Select>
           </div>
         </div>
-        
+
         {/* Creative Settings */}
         <div className="text-xs text-white/50 font-semibold mb-1 mt-3">Creative Settings</div>
         <div className="grid grid-cols-2 gap-2">
           <div>
-            <label className="text-xs text-white/70">White Balance</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">White Balance</label>
+            <Select
               className="w-full"
               value={node.whiteBalance || "None"}
               onChange={(e) => onUpdate(node.id, { whiteBalance: (e.target as HTMLSelectElement).value })}
@@ -1313,8 +1312,8 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
             </Select>
           </div>
           <div>
-            <label className="text-xs text-white/70">Film Style</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Film Style</label>
+            <Select
               className="w-full"
               value={node.filmStyle || "None"}
               onChange={(e) => onUpdate(node.id, { filmStyle: (e.target as HTMLSelectElement).value })}
@@ -1323,8 +1322,8 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
             </Select>
           </div>
           <div>
-            <label className="text-xs text-white/70">Lighting</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Lighting</label>
+            <Select
               className="w-full"
               value={node.lighting || "None"}
               onChange={(e) => onUpdate(node.id, { lighting: (e.target as HTMLSelectElement).value })}
@@ -1333,8 +1332,8 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
             </Select>
           </div>
           <div>
-            <label className="text-xs text-white/70">Bokeh Style</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Bokeh Style</label>
+            <Select
               className="w-full"
               value={node.bokeh || "None"}
               onChange={(e) => onUpdate(node.id, { bokeh: (e.target as HTMLSelectElement).value })}
@@ -1343,13 +1342,13 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
             </Select>
           </div>
         </div>
-        
+
         {/* Composition Settings */}
-        <div className="text-xs text-white/50 font-semibold mb-1 mt-3">Composition</div>
+        <div className="text-xs text-muted-foreground font-semibold mb-1 mt-3">Composition</div>
         <div className="grid grid-cols-2 gap-2">
           <div>
-            <label className="text-xs text-white/70">Camera Angle</label>
-            <Select 
+            <label className="text-xs text-muted-foreground">Camera Angle</label>
+            <Select
               className="w-full"
               value={node.angle || "None"}
               onChange={(e) => onUpdate(node.id, { angle: (e.target as HTMLSelectElement).value })}
@@ -1358,7 +1357,7 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
             </Select>
           </div>
         </div>
-        <Button 
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
@@ -1417,19 +1416,19 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
 export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   // Available hairstyle options for hair modification
   const hairstyles = ["None", "short", "long", "curly", "straight", "bald", "mohawk", "ponytail"];
-  
+
   // Facial expression options for emotion changes
   const expressions = ["None", "happy", "serious", "smiling", "laughing", "sad", "surprised", "angry"];
-  
+
   // Beard and facial hair styling options
   const beardStyles = ["None", "stubble", "goatee", "full beard", "mustache", "clean shaven"];
 
   return (
-    <div className="nb-node absolute text-white w-[340px]" style={{ left: localPos.x, top: localPos.y }}>
-      <div 
+    <div className="nb-node absolute w-[340px]" style={{ left: localPos.x, top: localPos.y }}>
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -1475,10 +1474,10 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
         <div className="space-y-2">
           {/* Pimple removal option for skin enhancement */}
           <label className="flex items-center gap-2 text-xs cursor-pointer">
-            <Checkbox 
+            <Checkbox
               checked={node.faceOptions?.removePimples || false}    // Default to false if not set
-              onChange={(e) => onUpdate(node.id, { 
-                faceOptions: { 
+              onChange={(e) => onUpdate(node.id, {
+                faceOptions: {
                   ...node.faceOptions,                             // Preserve existing options
                   removePimples: (e.target as HTMLInputElement).checked // Update pimple removal setting
                 }
@@ -1486,13 +1485,13 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
             />
             Remove pimples                                          {/* Clean up skin imperfections */}
           </label>
-          
+
           {/* Sunglasses addition option */}
           <label className="flex items-center gap-2 text-xs cursor-pointer">
-            <Checkbox 
+            <Checkbox
               checked={node.faceOptions?.addSunglasses || false}    // Default to false if not set
-              onChange={(e) => onUpdate(node.id, { 
-                faceOptions: { 
+              onChange={(e) => onUpdate(node.id, {
+                faceOptions: {
                   ...node.faceOptions,                             // Preserve existing options
                   addSunglasses: (e.target as HTMLInputElement).checked // Update sunglasses setting
                 }
@@ -1500,13 +1499,13 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
             />
             Add sunglasses                                          {/* Add stylish sunglasses accessory */}
           </label>
-          
+
           {/* Hat addition option */}
           <label className="flex items-center gap-2 text-xs cursor-pointer">
-            <Checkbox 
+            <Checkbox
               checked={node.faceOptions?.addHat || false}           // Default to false if not set
-              onChange={(e) => onUpdate(node.id, { 
-                faceOptions: { 
+              onChange={(e) => onUpdate(node.id, {
+                faceOptions: {
                   ...node.faceOptions,                             // Preserve existing options
                   addHat: (e.target as HTMLInputElement).checked   // Update hat setting
                 }
@@ -1515,39 +1514,39 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
             Add hat                                                 {/* Add hat accessory */}
           </label>
         </div>
-        
+
         <div>
           <label className="text-xs text-white/70">Hairstyle</label>
-          <Select 
+          <Select
             className="w-full"
             value={node.faceOptions?.changeHairstyle || "None"}
-            onChange={(e) => onUpdate(node.id, { 
+            onChange={(e) => onUpdate(node.id, {
               faceOptions: { ...node.faceOptions, changeHairstyle: (e.target as HTMLSelectElement).value }
             })}
           >
             {hairstyles.map(h => <option key={h} value={h}>{h}</option>)}
           </Select>
         </div>
-        
+
         <div>
           <label className="text-xs text-white/70">Expression</label>
-          <Select 
+          <Select
             className="w-full"
             value={node.faceOptions?.facialExpression || "None"}
-            onChange={(e) => onUpdate(node.id, { 
+            onChange={(e) => onUpdate(node.id, {
               faceOptions: { ...node.faceOptions, facialExpression: (e.target as HTMLSelectElement).value }
             })}
           >
             {expressions.map(e => <option key={e} value={e}>{e}</option>)}
           </Select>
         </div>
-        
+
         <div>
           <label className="text-xs text-white/70">Beard</label>
-          <Select 
+          <Select
             className="w-full"
             value={node.faceOptions?.beardStyle || "None"}
-            onChange={(e) => onUpdate(node.id, { 
+            onChange={(e) => onUpdate(node.id, {
               faceOptions: { ...node.faceOptions, beardStyle: (e.target as HTMLSelectElement).value }
             })}
           >
@@ -1557,18 +1556,17 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
 
         {/* Makeup Selection Section - allows users to choose makeup application */}
         <div>
-          <label className="text-xs text-white/70">Makeup</label>
+          <label className="text-xs text-muted-foreground">Makeup</label>
           <div className="grid grid-cols-2 gap-2 mt-2">              {/* 2-column grid for makeup options */}
-            
+
             {/* No Makeup Option - removes or prevents makeup application */}
             <button
-              className={`p-1 rounded border transition-colors ${
-                !node.faceOptions?.selectedMakeup || node.faceOptions?.selectedMakeup === "None"
-                  ? "border-indigo-400 bg-indigo-500/20"             // Highlighted when selected
-                  : "border-white/20 hover:border-white/40"           // Default and hover states
-              }`}
-              onClick={() => onUpdate(node.id, { 
-                faceOptions: { 
+              className={`p-1 rounded border transition-colors ${!node.faceOptions?.selectedMakeup || node.faceOptions?.selectedMakeup === "None"
+                ? "border-indigo-400 bg-indigo-500/20"             // Highlighted when selected
+                : "border-white/20 hover:border-white/40"           // Default and hover states
+                }`}
+              onClick={() => onUpdate(node.id, {
+                faceOptions: {
                   ...node.faceOptions,                               // Preserve other face options
                   selectedMakeup: "None",                            // Set makeup to none
                   makeupImage: null                                   // Clear makeup image reference
@@ -1577,21 +1575,20 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
               title="No makeup application - natural look"
             >
               {/* Visual placeholder for no makeup option */}
-              <div className="w-full h-24 flex items-center justify-center text-xs text-white/60 border border-dashed border-white/20 rounded mb-1">
+              <div className="w-full h-24 flex items-center justify-center text-xs text-muted-foreground/60 border border-dashed border-border rounded mb-1">
                 No Makeup                                             {/* Text indicator for no makeup */}
               </div>
               <div className="text-xs">None</div>                  {/* Option label */}
             </button>
-            
+
             {/* Makeup Application Option - applies preset makeup style */}
             <button
-              className={`p-1 rounded border transition-colors ${
-                node.faceOptions?.selectedMakeup === "Makeup"
-                  ? "border-indigo-400 bg-indigo-500/20"             // Highlighted when selected
-                  : "border-white/20 hover:border-white/40"           // Default and hover states
-              }`}
-              onClick={() => onUpdate(node.id, { 
-                faceOptions: { 
+              className={`p-1 rounded border transition-colors ${node.faceOptions?.selectedMakeup === "Makeup"
+                ? "border-primary bg-primary/20"             // Highlighted when selected
+                : "border-border hover:border-primary/50"           // Default and hover states
+                }`}
+              onClick={() => onUpdate(node.id, {
+                faceOptions: {
                   ...node.faceOptions,                               // Preserve other face options
                   selectedMakeup: "Makeup",                          // Set makeup type
                   makeupImage: "/makeup/makeup1.png"                 // Reference image for makeup style
@@ -1600,9 +1597,9 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
               title="Apply makeup style - enhances facial features"
             >
               {/* Makeup preview image */}
-              <img 
-                src="/makeup/makeup1.png" 
-                alt="Makeup Style Preview" 
+              <img
+                src="/makeup/makeup1.png"
+                alt="Makeup Style Preview"
                 className="w-full h-24 object-contain rounded mb-1"
                 title="Preview of makeup style that will be applied"
               />
@@ -1610,8 +1607,8 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
             </button>
           </div>
         </div>
-        
-        <Button 
+
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning}
@@ -1673,7 +1670,7 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
 export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   /**
    * Available artistic style options with descriptive labels
    * Each style represents a different artistic movement or pop culture aesthetic
@@ -1691,13 +1688,13 @@ export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onE
     { value: "pixar", label: "Pixar Style" },
     { value: "manga", label: "Manga Style" },
   ];
-  
+
   return (
-    <div 
-      className="nb-node absolute text-white w-[320px]" 
+    <div
+      className="nb-node absolute w-[320px]"
       style={{ left: localPos.x, top: localPos.y }}
     >
-      <div 
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -1740,16 +1737,16 @@ export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onE
             </Button>
           </div>
         )}
-        <div className="text-xs text-white/70">Art Style</div>
-        <div className="text-xs text-white/50 mb-2">Select an artistic style to apply to your image</div>
+        <div className="text-xs text-muted-foreground">Art Style</div>
+        <div className="text-xs text-muted-foreground/50 mb-2">Select an artistic style to apply to your image</div>
         <Select
-          className="w-full bg-black border-white/20 text-white focus:border-white/40 [&>option]:bg-black [&>option]:text-white"
+          className="w-full bg-background border-border text-foreground focus:border-ring [&>option]:bg-background [&>option]:text-foreground"
           value={node.stylePreset || ""}
           onChange={(e) => onUpdate(node.id, { stylePreset: (e.target as HTMLSelectElement).value })}
         >
-          <option value="" className="bg-black">Select a style...</option>
+          <option value="" className="bg-background">Select a style...</option>
           {styleOptions.map(opt => (
-            <option key={opt.value} value={opt.value} className="bg-black">
+            <option key={opt.value} value={opt.value} className="bg-background">
               {opt.label}
             </option>
           ))}
@@ -1762,21 +1759,21 @@ export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onE
             min={0}                                                 // Minimum strength (subtle effect)
             max={100}                                               // Maximum strength (full style transfer)
             value={node.styleStrength || 50}                       // Current value (default 50%)
-            onChange={(e) => onUpdate(node.id, { 
+            onChange={(e) => onUpdate(node.id, {
               styleStrength: parseInt((e.target as HTMLInputElement).value) // Update strength value
             })}
             title="Adjust how strongly the artistic style is applied - lower values are more subtle"
           />
         </div>
         {/* Style Processing Button - triggers the style transfer operation */}
-        <Button 
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}                        // Start style transfer processing
           disabled={node.isRunning || !node.stylePreset}           // Disable if processing or no style selected
           title={
             !node.input ? "Connect an input first" :               // No input connection
-            !node.stylePreset ? "Select a style first" :           // No style selected
-            "Apply the selected artistic style to your input image" // Ready to process
+              !node.stylePreset ? "Select a style first" :           // No style selected
+                "Apply the selected artistic style to your input image" // Ready to process
           }
         >
           {/* Dynamic button text based on processing state */}
@@ -1833,24 +1830,24 @@ export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onE
 export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   /**
    * Available lighting preset options with text descriptions
    * Each preset uses detailed lighting prompts instead of reference images
    */
   const presetLightings = [
-    { 
-      name: "Moody Cinematic", 
+    {
+      name: "Moody Cinematic",
       path: "/lighting/light1.png",
       prompt: "Moody cinematic portrait lighting with a sharp vertical beam of warm orange-red light cutting across the face and neck, contrasted with cool teal ambient fill on the surrounding areas. Strong chiaroscuro effect, deep shadows, high contrast between warm and cool tones, dramatic spotlight strip"
     },
-    { 
-      name: "Dual-Tone Neon", 
+    {
+      name: "Dual-Tone Neon",
       path: "/lighting/light2.png",
       prompt: "Cinematic portrait lighting with strong dual-tone rim lights: deep blue light illuminating the front-left side of the face, intense red light as a rim light from the back-right, dark black background, high contrast, minimal fill light, dramatic neon glow"
     },
-    { 
-      name: "Natural Shadow Play", 
+    {
+      name: "Natural Shadow Play",
       path: "/lighting/light3.png",
       prompt: "DRAMATIC natural shadow play with hard directional sunlight filtering through foliage, creating bold contrasting patterns of light and shadow across the subject. Strong chiaroscuro effect with deep blacks and bright highlights, dappled leaf shadows dancing across face and body, creating an artistic interplay of illumination and darkness. Emphasize the sculptural quality of light carving through shadow, with sharp shadow edges and brilliant sun-kissed highlights for maximum visual impact"
     },
@@ -1861,15 +1858,15 @@ export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection,
    * Updates with the text prompt instead of reference image
    */
   const selectLighting = (lightingPath: string, lightingName: string, lightingPrompt: string) => {
-    onUpdate(node.id, { 
+    onUpdate(node.id, {
       lightingPrompt: lightingPrompt,                              // Text prompt for lighting effect
       selectedLighting: lightingName                               // Name of selected lighting preset
     });
   };
-  
+
   return (
     <div className="nb-node absolute text-white w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
-      <div 
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -1912,22 +1909,21 @@ export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection,
             </Button>
           </div>
         )}
-        <div className="text-xs text-white/70">Lighting Presets</div>
-        
+        <div className="text-xs text-muted-foreground">Lighting Presets</div>
+
         <div className="grid grid-cols-2 gap-2">
           {presetLightings.map((preset) => (
             <button
               key={preset.name}
-              className={`p-2 rounded border ${
-                node.selectedLighting === preset.name
-                  ? "border-indigo-400 bg-indigo-500/20"
-                  : "border-white/20 hover:border-white/40"
-              }`}
+              className={`p-2 rounded border ${node.selectedLighting === preset.name
+                ? "border-primary bg-primary/20"
+                : "border-border hover:border-primary/50"
+                }`}
               onClick={() => selectLighting(preset.path, preset.name, preset.prompt)}
             >
-              <img 
-                src={preset.path} 
-                alt={preset.name} 
+              <img
+                src={preset.path}
+                alt={preset.name}
                 className="w-full h-24 object-contain rounded mb-1"
                 title="Click to select lighting"
               />
@@ -1935,8 +1931,8 @@ export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection,
             </button>
           ))}
         </div>
-        
-        <Button 
+
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning || !node.selectedLighting}
@@ -1944,7 +1940,7 @@ export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection,
         >
           {node.isRunning ? "Processing..." : "Apply Lighting"}
         </Button>
-        
+
         <NodeOutputSection
           nodeId={node.id}
           output={node.output}
@@ -1997,29 +1993,29 @@ export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection,
 export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   /**
    * Available pose preset options with text descriptions
    * Each preset uses detailed pose prompts instead of reference images
    */
   const presetPoses = [
-    { 
-      name: "Dynamic Standing", 
+    {
+      name: "Dynamic Standing",
       path: "/poses/stand1.png",
       prompt: "A dynamic standing pose with the figure's weight shifted to one side. The right arm extends forward in a pointing gesture while the left arm hangs naturally. The figure has a slight hip tilt and appears to be in mid-movement, creating an energetic, directional composition."
     },
-    { 
-      name: "Arms Crossed", 
+    {
+      name: "Arms Crossed",
       path: "/poses/stand2.png",
       prompt: "A relaxed standing pose with arms crossed over the torso. The weight is distributed fairly evenly, with one leg slightly forward. The figure's posture suggests a casual, confident stance with the head tilted slightly downward in a contemplative manner."
     },
-    { 
-      name: "Seated Composed", 
+    {
+      name: "Seated Composed",
       path: "/poses/sit1.png",
       prompt: "A seated pose on what appears to be a stool or high chair. The figure sits with legs crossed at the knee, creating an asymmetrical but balanced composition. The hands rest on the lap, and the overall posture is upright and composed."
     },
-    { 
-      name: "Relaxed Lean", 
+    {
+      name: "Relaxed Lean",
       path: "/poses/sit2.png",
       prompt: "A more relaxed seated pose with the figure leaning to one side. One leg is bent and raised while the other extends downward. The figure appears to be resting or in casual repose, with arms supporting the body and creating a diagonal flow through the composition."
     },
@@ -2030,15 +2026,15 @@ export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onE
    * Updates with the text prompt instead of reference image
    */
   const selectPose = (posePath: string, poseName: string, posePrompt: string) => {
-    onUpdate(node.id, { 
+    onUpdate(node.id, {
       posePrompt: posePrompt,                                      // Text prompt for pose effect
       selectedPose: poseName                                       // Name of selected pose preset
     });
   };
-  
+
   return (
-    <div className="nb-node absolute text-white w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
-      <div 
+    <div className="nb-node absolute w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -2082,21 +2078,20 @@ export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onE
           </div>
         )}
         <div className="text-xs text-white/70">Pose References</div>
-        
+
         <div className="grid grid-cols-2 gap-2">
           {presetPoses.map((preset) => (
             <button
               key={preset.name}
-              className={`p-2 rounded border ${
-                node.selectedPose === preset.name
-                  ? "border-indigo-400 bg-indigo-500/20"
-                  : "border-white/20 hover:border-white/40"
-              }`}
+              className={`p-2 rounded border ${node.selectedPose === preset.name
+                ? "border-indigo-400 bg-indigo-500/20"
+                : "border-white/20 hover:border-white/40"
+                }`}
               onClick={() => selectPose(preset.path, preset.name, preset.prompt)}
             >
-              <img 
-                src={preset.path} 
-                alt={preset.name} 
+              <img
+                src={preset.path}
+                alt={preset.name}
                 className="w-full h-24 object-contain rounded mb-1"
                 title="Click to select pose"
               />
@@ -2104,8 +2099,8 @@ export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onE
             </button>
           ))}
         </div>
-        
-        <Button 
+
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning || !node.selectedPose}
@@ -2113,7 +2108,7 @@ export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onE
         >
           {node.isRunning ? "Processing..." : "Apply Pose"}
         </Button>
-        
+
         <NodeOutputSection
           nodeId={node.id}
           output={node.output}
@@ -2152,21 +2147,21 @@ export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onE
  * @param navigateNodeHistory - Function to navigate through node history
  * @param getCurrentNodeImage - Function to get the current image for this node
  */
-export function EditNodeView({ 
-  node, 
-  onDelete, 
-  onUpdate, 
-  onStartConnection, 
-  onEndConnection, 
-  onProcess, 
-  onUpdatePosition, 
-  getNodeHistoryInfo, 
-  navigateNodeHistory, 
-  getCurrentNodeImage 
+export function EditNodeView({
+  node,
+  onDelete,
+  onUpdate,
+  onStartConnection,
+  onEndConnection,
+  onProcess,
+  onUpdatePosition,
+  getNodeHistoryInfo,
+  navigateNodeHistory,
+  getCurrentNodeImage
 }: any) {
   // Use custom hook for drag functionality - handles position updates during dragging
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
-  
+
   /**
    * Handle prompt improvement using Gemini API
    * Takes the user's basic edit description and enhances it for better AI processing
@@ -2177,18 +2172,18 @@ export function EditNodeView({
       alert('Please enter an edit description first');
       return;
     }
-    
+
     try {
       // Call the API to improve the prompt
       const response = await fetch('/api/improve-prompt', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ 
+        body: JSON.stringify({
           prompt: node.editPrompt.trim(),
           type: 'edit'
         })
       });
-      
+
       if (response.ok) {
         const { improvedPrompt } = await response.json();
         onUpdate(node.id, { editPrompt: improvedPrompt });
@@ -2207,7 +2202,7 @@ export function EditNodeView({
   const handleDeleteNode = (e: React.MouseEvent) => {
     e.stopPropagation();  // Prevent triggering drag
     e.preventDefault();
-    
+
     if (confirm('Delete this node?')) {
       onDelete(node.id);
     }
@@ -2228,9 +2223,9 @@ export function EditNodeView({
   };
 
   return (
-    <div className="nb-node absolute text-white w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
+    <div className="nb-node absolute w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
       {/* Node Header - Contains title, delete button, and connection ports */}
-      <div 
+      <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}    // Start dragging
         onPointerMove={onPointerMove}    // Handle drag movement
@@ -2238,10 +2233,10 @@ export function EditNodeView({
       >
         {/* Input port (left side) - where connections come in */}
         <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} onDisconnect={(nodeId) => onUpdate(nodeId, { input: undefined })} />
-        
+
         {/* Node title */}
         <div className="font-semibold text-sm flex-1 text-center">EDIT</div>
-        
+
         <div className="flex items-center gap-1">
           {/* Delete button */}
           <Button
@@ -2255,12 +2250,12 @@ export function EditNodeView({
           >
             ×
           </Button>
-          
+
           {/* Output port (right side) - where connections go out */}
           <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
         </div>
       </div>
-      
+
       {/* Node Content - Contains all the controls and outputs */}
       {/* Node Content Area - Contains all controls, inputs, and outputs */}
       <div className="p-3 space-y-3">
@@ -2278,10 +2273,10 @@ export function EditNodeView({
             </Button>
           </div>
         )}
-        
+
         {/* Edit prompt input and improvement section */}
         <div className="space-y-2">
-          <div className="text-xs text-white/70 mb-1">Edit Instructions</div>
+          <div className="text-xs text-muted-foreground mb-1">Edit Instructions</div>
           <Textarea
             className="w-full"
             placeholder="Describe what to edit (e.g., 'make it brighter', 'add more contrast', 'make it look vintage')"
@@ -2289,7 +2284,7 @@ export function EditNodeView({
             onChange={handlePromptChange}
             rows={3}
           />
-          
+
           {/* AI-powered prompt improvement button */}
           <Button
             variant="outline"
@@ -2302,28 +2297,28 @@ export function EditNodeView({
             ✨ Improve with Gemini
           </Button>
         </div>
-        
+
         {/* Process button - starts the editing operation */}
-        <Button 
+        <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
           disabled={node.isRunning || !node.editPrompt?.trim()}
           title={
-            !node.input ? "Connect an input first" : 
-            !node.editPrompt?.trim() ? "Enter edit instructions first" :
-            "Apply the edit to the input image"
+            !node.input ? "Connect an input first" :
+              !node.editPrompt?.trim() ? "Enter edit instructions first" :
+                "Apply the edit to the input image"
           }
         >
           {node.isRunning ? "Processing..." : "Apply Edit"}
         </Button>
-        
+
         {/* Output section with history navigation and download */}
         <NodeOutputSection
           nodeId={node.id}
           output={node.output}
           downloadFileName={`edit-${Date.now()}.png`}
         />
-        
+
         {/* Error display */}
         {node.error && (
           <div className="text-xs text-red-400 mt-2 p-2 bg-red-900/20 rounded">

app/page.tsx

@@ -66,10 +66,10 @@ const uid = () => Math.random().toString(36).slice(2, 9);
  */
 function generateMergePrompt(characterData: { image: string; label: string }[]): string {
   const count = characterData.length;
-  
+
   // Create a summary of all images being processed
   const labels = characterData.map((d, i) => `Image ${i + 1} (${d.label})`).join(", ");
-  
+
   // Return comprehensive prompt with specific instructions for natural-looking merge
   return `MERGE TASK: Create a natural, cohesive group photo combining ALL subjects from ${count} provided images.
 
@@ -109,13 +109,13 @@ async function copyImageToClipboard(dataUrl: string) {
   try {
     const response = await fetch(dataUrl);
     const blob = await response.blob();
-    
+
     // Convert to PNG if not already PNG
     if (blob.type !== 'image/png') {
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d');
       const img = new Image();
-      
+
       await new Promise((resolve) => {
         img.onload = () => {
           canvas.width = img.width;
@@ -125,11 +125,11 @@ async function copyImageToClipboard(dataUrl: string) {
         };
         img.src = dataUrl;
       });
-      
+
       const pngBlob = await new Promise<Blob>((resolve) => {
         canvas.toBlob((blob) => resolve(blob!), 'image/png');
       });
-      
+
       await navigator.clipboard.write([
         new ClipboardItem({ 'image/png': pngBlob })
       ]);
@@ -198,24 +198,24 @@ type BackgroundNode = NodeBase & {
   output?: string;                   // Processed image with new background
   backgroundType: "color" | "gradient" | "image" | "city" | "photostudio" | "upload" | "custom";  // Type of background to apply
   backgroundColor?: string;          // Hex color code for solid color backgrounds
-  
+
   // Gradient background properties
   gradientDirection?: string;        // Direction of gradient (to right, to bottom, radial, etc.)
   gradientStartColor?: string;       // Starting color of gradient
   gradientEndColor?: string;         // Ending color of gradient
-  
+
   backgroundImage?: string;          // URL/path for preset background images
-  
+
   // City scene properties
   citySceneType?: string;           // Type of city scene (busy_street, times_square, etc.)
   cityTimeOfDay?: string;           // Time of day for city scene
-  
+
   // Photo studio properties
   studioSetup?: string;             // Studio background setup type
   studioBackgroundColor?: string;   // Color for colored seamless background
   studioLighting?: string;          // Studio lighting setup
   faceCamera?: boolean;             // Whether to position character facing camera
-  
+
   customBackgroundImage?: string;    // User-uploaded background image data
   customPrompt?: string;            // AI prompt for generating custom backgrounds
   isRunning?: boolean;              // Processing state indicator
@@ -440,7 +440,7 @@ function screenToWorld(
 
 function useNodeDrag(
   nodeId: string,
-  scaleRef: React.MutableRefObject<number>, 
+  scaleRef: React.MutableRefObject<number>,
   initial: { x: number; y: number },
   onUpdatePosition: (id: string, x: number, y: number) => void
 ) {
@@ -449,11 +449,11 @@ function useNodeDrag(
   const start = useRef<{ sx: number; sy: number; ox: number; oy: number } | null>(
     null
   );
-  
+
   useEffect(() => {
     setLocalPos(initial);
   }, [initial.x, initial.y]);
-  
+
   const onPointerDown = (e: React.PointerEvent) => {
     e.stopPropagation();
     dragging.current = true;
@@ -477,13 +477,13 @@ function useNodeDrag(
   return { pos: localPos, onPointerDown, onPointerMove, onPointerUp };
 }
 
-function Port({ 
-  className, 
+function Port({
+  className,
   nodeId,
   isOutput,
   onStartConnection,
   onEndConnection
-}: { 
+}: {
   className?: string;
   nodeId?: string;
   isOutput?: boolean;
@@ -496,7 +496,7 @@ function Port({
       onStartConnection(nodeId);
     }
   };
-  
+
   const handlePointerUp = (e: React.PointerEvent) => {
     e.stopPropagation();
     if (!isOutput && nodeId && onEndConnection) {
@@ -505,8 +505,8 @@ function Port({
   };
 
   return (
-    <div 
-      className={cx("nb-port", className)} 
+    <div
+      className={cx("nb-port", className)}
       onPointerDown={handlePointerDown}
       onPointerUp={handlePointerUp}
       onPointerEnter={handlePointerUp}
@@ -533,7 +533,7 @@ function CharacterNodeView({
 }) {
   const { pos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(
     node.id,
-    scaleRef, 
+    scaleRef,
     { x: node.x, y: node.y },
     onUpdatePosition
   );
@@ -570,7 +570,7 @@ function CharacterNodeView({
 
   return (
     <div
-      className="nb-node absolute text-white w-[340px] select-none"
+      className="nb-node absolute w-[340px] select-none"
       style={{ left: pos.x, top: pos.y }}
       onDrop={onDrop}
       onDragOver={(e) => e.preventDefault()}
@@ -588,7 +588,7 @@ function CharacterNodeView({
           onChange={(e) => onChangeLabel(node.id, e.target.value)}
         />
         <div className="flex items-center gap-2">
-          <Button 
+          <Button
             variant="ghost" size="icon" className="text-destructive hover:bg-destructive/20 h-6 w-6"
             onClick={(e) => {
               e.stopPropagation();
@@ -603,8 +603,8 @@ function CharacterNodeView({
           >
             ×
           </Button>
-          <Port 
-            className="out" 
+          <Port
+            className="out"
             nodeId={node.id}
             isOutput={true}
             onStartConnection={onStartConnection}
@@ -612,7 +612,7 @@ function CharacterNodeView({
         </div>
       </div>
       <div className="p-3 space-y-3">
-        <div className="aspect-[4/5] w-full rounded-xl bg-black/40 grid place-items-center overflow-hidden">
+        <div className="aspect-[4/5] w-full rounded-xl bg-muted/30 grid place-items-center overflow-hidden border border-border/10">
           <img
             src={node.image}
             alt="character"
@@ -637,12 +637,12 @@ function CharacterNodeView({
                 await navigator.clipboard.write([
                   new ClipboardItem({ [blob.type]: blob })
                 ]);
-                
+
                 // Show visual feedback
                 const img = e.currentTarget;
                 const originalFilter = img.style.filter;
                 img.style.filter = "brightness(1.2)";
-                
+
                 setTimeout(() => {
                   img.style.filter = originalFilter;
                 }, 500);
@@ -654,7 +654,7 @@ function CharacterNodeView({
           />
         </div>
         <div className="flex gap-2">
-          <label className="text-xs bg-white/10 hover:bg-white/20 rounded px-3 py-1 cursor-pointer">
+          <label className="text-xs bg-secondary hover:bg-secondary/80 text-secondary-foreground transition-colors rounded px-3 py-1 cursor-pointer">
             Upload
             <input
               type="file"
@@ -668,20 +668,20 @@ function CharacterNodeView({
                   // Reset input safely
                   try {
                     e.currentTarget.value = "";
-                  } catch {}
+                  } catch { }
                 }
               }}
             />
           </label>
           <button
-            className="text-xs bg-white/10 hover:bg-white/20 rounded px-3 py-1"
+            className="text-xs bg-secondary hover:bg-secondary/80 text-secondary-foreground transition-colors rounded px-3 py-1"
             onClick={async () => {
               try {
                 const text = await navigator.clipboard.readText();
                 if (text && (text.startsWith("http") || text.startsWith("data:image"))) {
                   onChangeImage(node.id, text);
                 }
-              } catch {}
+              } catch { }
             }}
           >
             Paste URL
@@ -724,15 +724,15 @@ function MergeNodeView({
 
 
   return (
-    <div className="nb-node absolute text-white w-[420px]" style={{ left: pos.x, top: pos.y }}>
+    <div className="nb-node absolute 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}
         onPointerMove={onPointerMove}
         onPointerUp={onPointerUp}
       >
-        <Port 
-          className="in" 
+        <Port
+          className="in"
           nodeId={node.id}
           isOutput={false}
           onEndConnection={onEndConnection}
@@ -756,8 +756,8 @@ function MergeNodeView({
           >
             ×
           </Button>
-          <Port 
-            className="out" 
+          <Port
+            className="out"
             nodeId={node.id}
             isOutput={true}
             onStartConnection={onStartConnection}
@@ -765,16 +765,16 @@ function MergeNodeView({
         </div>
       </div>
       <div className="p-3 space-y-3">
-        <div className="text-xs text-white/70">Inputs</div>
+        <div className="text-xs text-muted-foreground font-medium">Inputs</div>
         <div className="flex flex-wrap gap-2">
           {node.inputs.map((id) => {
             const inputNode = allNodes.find((n) => n.id === id);
             if (!inputNode) return null;
-            
+
             // Get image and label based on node type
             let image: string | null = null;
             let label = "";
-            
+
             if (inputNode.type === "CHARACTER") {
               image = (inputNode as CharacterNode).image;
               label = (inputNode as CharacterNode).label || "Character";
@@ -789,14 +789,14 @@ function MergeNodeView({
               // Node without output yet
               label = `${inputNode.type} (pending)`;
             }
-            
+
             return (
-              <div key={id} className="flex items-center gap-2 bg-white/10 rounded px-2 py-1">
+              <div key={id} className="flex items-center gap-2 bg-secondary/50 border border-border/50 text-secondary-foreground rounded px-2 py-1">
                 {image && (
-                  <div className="w-6 h-6 rounded overflow-hidden bg-black/20">
-                    <img 
-                      src={image} 
-                      className="w-full h-full object-contain cursor-pointer hover:opacity-80" 
+                  <div className="w-6 h-6 rounded overflow-hidden bg-muted">
+                    <img
+                      src={image}
+                      className="w-full h-full object-contain cursor-pointer hover:opacity-80"
                       alt="inp"
                       onClick={async () => {
                         try {
@@ -817,12 +817,12 @@ function MergeNodeView({
                           await navigator.clipboard.write([
                             new ClipboardItem({ [blob.type]: blob })
                           ]);
-                          
+
                           // Show visual feedback
                           const img = e.currentTarget;
                           const originalFilter = img.style.filter;
                           img.style.filter = "brightness(1.2)";
-                          
+
                           setTimeout(() => {
                             img.style.filter = originalFilter;
                           }, 300);
@@ -874,9 +874,9 @@ function MergeNodeView({
           </div>
           <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-auto max-h-[400px] object-contain rounded-xl cursor-pointer hover:opacity-80 transition-opacity" 
+              <img
+                src={node.output}
+                className="w-full h-auto max-h-[400px] object-contain rounded-xl cursor-pointer hover:opacity-80 transition-opacity"
                 alt="output"
                 onClick={async () => {
                   if (node.output) {
@@ -900,12 +900,12 @@ function MergeNodeView({
                       await navigator.clipboard.write([
                         new ClipboardItem({ [blob.type]: blob })
                       ]);
-                      
+
                       // Show visual feedback
                       const img = e.currentTarget;
                       const originalFilter = img.style.filter;
                       img.style.filter = "brightness(1.2)";
-                      
+
                       setTimeout(() => {
                         img.style.filter = originalFilter;
                       }, 500);
@@ -1032,7 +1032,7 @@ export default function EditorPage() {
         alert('OAuth client ID not configured. Please check environment variables.');
         return;
       }
-      
+
       window.location.href = await oauthLoginUrl({
         clientId,
         redirectUrl: `${window.location.origin}/api/auth/callback`
@@ -1042,12 +1042,41 @@ export default function EditorPage() {
 
   // Connection dragging state
   const [draggingFrom, setDraggingFrom] = useState<string | null>(null);
-  const [dragPos, setDragPos] = useState<{x: number, y: number} | null>(null);
-  
+  const [dragPos, setDragPos] = useState<{ x: number, y: number } | null>(null);
+
   // API Token state (restored for manual review)
   const [apiToken, setApiToken] = useState("");
   const [showHelpSidebar, setShowHelpSidebar] = useState(false);
-  
+
+  // Processing Mode: 'nanobananapro' uses Gemini API, 'huggingface' uses HF models
+  type ProcessingMode = 'nanobananapro' | 'huggingface';
+  const [processingMode, setProcessingMode] = useState<ProcessingMode>('nanobananapro');
+
+  // Available HF models
+  const HF_MODELS = {
+    "FLUX.1-Kontext-dev": {
+      id: "black-forest-labs/FLUX.1-Kontext-dev",
+      name: "FLUX.1 Kontext",
+      type: "image-to-image",
+      description: "Advanced image editing with context understanding",
+    },
+    "Qwen-Image-Edit": {
+      id: "Qwen/Qwen-Image-Edit",
+      name: "Qwen Image Edit",
+      type: "image-to-image",
+      description: "Powerful image editing and manipulation",
+    },
+    "FLUX.1-dev": {
+      id: "black-forest-labs/FLUX.1-dev",
+      name: "FLUX.1 Dev",
+      type: "text-to-image",
+      description: "High-quality text-to-image generation",
+    },
+  };
+
+  const [selectedHfModel, setSelectedHfModel] = useState<keyof typeof HF_MODELS>("FLUX.1-Kontext-dev");
+
+
   // HF PRO AUTHENTICATION
   const [isHfProLoggedIn, setIsHfProLoggedIn] = useState(false);
   const [isCheckingAuth, setIsCheckingAuth] = useState(true);
@@ -1143,9 +1172,9 @@ export default function EditorPage() {
         // - MERGE nodes (can have output after merging)
         // - Any processing node (BACKGROUND, CLOTHES, BLEND, etc.)
         // - Even unprocessed nodes (for configuration chaining)
-        
+
         // All nodes can be connected for chaining
-        setNodes(prev => prev.map(n => 
+        setNodes(prev => prev.map(n =>
           n.id === nodeId ? { ...n, input: draggingFrom } : n
         ));
       }
@@ -1161,14 +1190,14 @@ export default function EditorPage() {
   const countPendingConfigurations = (startNodeId: string): number => {
     let count = 0;
     const visited = new Set<string>();
-    
+
     const traverse = (nodeId: string) => {
       if (visited.has(nodeId)) return;
       visited.add(nodeId);
-      
+
       const node = nodes.find(n => n.id === nodeId);
       if (!node) return;
-      
+
       // Check if this node has configuration but no output
       if (!(node as any).output && node.type !== "CHARACTER" && node.type !== "MERGE") {
         const config = getNodeConfiguration(node);
@@ -1176,22 +1205,22 @@ export default function EditorPage() {
           count++;
         }
       }
-      
+
       // Check upstream
       const upstreamId = (node as any).input;
       if (upstreamId) {
         traverse(upstreamId);
       }
     };
-    
+
     traverse(startNodeId);
     return count;
   };
-  
+
   // Helper to extract configuration from a node
   const getNodeConfiguration = (node: AnyNode): Record<string, unknown> => {
     const config: Record<string, unknown> = {};
-    
+
     switch (node.type) {
       case "BACKGROUND":
         if ((node as BackgroundNode).backgroundType) {
@@ -1201,20 +1230,20 @@ export default function EditorPage() {
           config.backgroundImage = bgNode.backgroundImage;
           config.customBackgroundImage = bgNode.customBackgroundImage;
           config.customPrompt = bgNode.customPrompt;
-          
+
           // Gradient properties
           if (bgNode.backgroundType === "gradient") {
             config.gradientDirection = bgNode.gradientDirection;
             config.gradientStartColor = bgNode.gradientStartColor;
             config.gradientEndColor = bgNode.gradientEndColor;
           }
-          
+
           // City scene properties
           if (bgNode.backgroundType === "city") {
             config.citySceneType = bgNode.citySceneType;
             config.cityTimeOfDay = bgNode.cityTimeOfDay;
           }
-          
+
           // Photo studio properties
           if (bgNode.backgroundType === "photostudio") {
             config.studioSetup = bgNode.studioSetup;
@@ -1295,7 +1324,7 @@ export default function EditorPage() {
         }
         break;
     }
-    
+
     return config;
   };
 
@@ -1312,34 +1341,34 @@ export default function EditorPage() {
     let accumulatedParams: any = {};
     const processedNodes: string[] = []; // Track which nodes' configs we're applying
     const inputId = (node as any).input;
-    
+
     if (inputId) {
       // Track unprocessed MERGE nodes that need to be executed
       const unprocessedMerges: MergeNode[] = [];
-      
+
       // Find the source image by traversing the chain backwards
       const findSourceImage = (currentNodeId: string, visited: Set<string> = new Set()): string | null => {
         if (visited.has(currentNodeId)) return null;
         visited.add(currentNodeId);
-        
+
         const currentNode = nodes.find(n => n.id === currentNodeId);
         if (!currentNode) return null;
-        
+
         // If this is a CHARACTER node, return its image
         if (currentNode.type === "CHARACTER") {
           return (currentNode as CharacterNode).image;
         }
-        
+
         // If this is a MERGE node with output, return its output
         if (currentNode.type === "MERGE" && (currentNode as MergeNode).output) {
           return (currentNode as MergeNode).output || null;
         }
-        
+
         // If any node has been processed, return its output
         if ((currentNode as any).output) {
           return (currentNode as any).output;
         }
-        
+
         // For MERGE nodes without output, we need to process them first
         if (currentNode.type === "MERGE") {
           const merge = currentNode as MergeNode;
@@ -1355,39 +1384,39 @@ export default function EditorPage() {
             if (inputImage) return inputImage;
           }
         }
-        
+
         // Otherwise, check upstream
         const upstreamId = (currentNode as any).input;
         if (upstreamId) {
           return findSourceImage(upstreamId, visited);
         }
-        
+
         return null;
       };
-      
+
       // Collect all configurations from unprocessed nodes in the chain
       const collectConfigurations = (currentNodeId: string, visited: Set<string> = new Set()): any => {
         if (visited.has(currentNodeId)) return {};
         visited.add(currentNodeId);
-        
+
         const currentNode = nodes.find(n => n.id === currentNodeId);
         if (!currentNode) return {};
-        
+
         let configs: any = {};
-        
+
         // First, collect from upstream nodes
         const upstreamId = (currentNode as any).input;
         if (upstreamId) {
           configs = collectConfigurations(upstreamId, visited);
         }
-        
+
         // Add this node's configuration only if:
         // 1. It's the current node being processed, OR
         // 2. It hasn't been processed yet (no output) AND it's not the current node
-        const shouldIncludeConfig = 
+        const shouldIncludeConfig =
           currentNodeId === nodeId || // Always include current node's config
           (!(currentNode as any).output && currentNodeId !== nodeId); // Include unprocessed intermediate nodes
-        
+
         if (shouldIncludeConfig) {
           const nodeConfig = getNodeConfiguration(currentNode);
           if (Object.keys(nodeConfig).length > 0) {
@@ -1398,66 +1427,66 @@ export default function EditorPage() {
             }
           }
         }
-        
+
         return configs;
       };
-      
+
       // Find the source image
       inputImage = findSourceImage(inputId);
-      
+
       // If we found unprocessed merges, we need to execute them first
       if (unprocessedMerges.length > 0 && !inputImage) {
-        
+
         // Process each merge node
         for (const merge of unprocessedMerges) {
           // Set loading state for the merge
-          setNodes(prev => prev.map(n => 
+          setNodes(prev => prev.map(n =>
             n.id === merge.id ? { ...n, isRunning: true, error: null } : n
           ));
-          
+
           try {
             const mergeOutput = await executeMerge(merge);
-            
+
             // Update the merge node with output
-            setNodes(prev => prev.map(n => 
+            setNodes(prev => prev.map(n =>
               n.id === merge.id ? { ...n, output: mergeOutput || undefined, isRunning: false, error: null } : n
             ));
-            
+
             // Track that we processed this merge as part of the chain
             processedNodes.push(merge.id);
-            
+
             // Now use this as our input image if it's the direct input
             if (inputId === merge.id) {
               inputImage = mergeOutput;
             }
           } catch (e: any) {
             console.error("Auto-merge error:", e);
-            setNodes(prev => prev.map(n => 
+            setNodes(prev => prev.map(n =>
               n.id === merge.id ? { ...n, isRunning: false, error: e?.message || "Merge failed" } : n
             ));
             // Abort the main processing if merge failed
-            setNodes(prev => prev.map(n => 
+            setNodes(prev => prev.map(n =>
               n.id === nodeId ? { ...n, error: "Failed to process upstream MERGE node", isRunning: false } : n
             ));
             return;
           }
         }
-        
+
         // After processing merges, try to find the source image again
         if (!inputImage) {
           inputImage = findSourceImage(inputId);
         }
       }
-      
+
       // Collect configurations from the chain
       accumulatedParams = collectConfigurations(inputId, new Set());
     }
 
     if (!inputImage) {
-      const errorMsg = inputId 
+      const errorMsg = inputId
         ? "No source image found in the chain. Connect to a CHARACTER node or processed node."
         : "No input connected. Connect an image source to this node.";
-      setNodes(prev => prev.map(n => 
+      setNodes(prev => prev.map(n =>
         n.id === nodeId ? { ...n, error: errorMsg, isRunning: false } : n
       ));
       return;
@@ -1466,11 +1495,11 @@ export default function EditorPage() {
     // Add current node's configuration
     const currentNodeConfig = getNodeConfiguration(node);
     const params = { ...accumulatedParams, ...currentNodeConfig };
-    
+
     // Count how many unprocessed nodes we're combining
-    const unprocessedNodeCount = Object.keys(params).length > 0 ? 
+    const unprocessedNodeCount = Object.keys(params).length > 0 ?
       (processedNodes.length + 1) : 1;
-    
+
     // Show info about batch processing
     if (unprocessedNodeCount > 1) {
     } else {
@@ -1489,7 +1518,7 @@ export default function EditorPage() {
       if (inputImage && inputImage.length > 10 * 1024 * 1024) { // 10MB limit warning
         console.warn("Large input image detected, size:", (inputImage.length / (1024 * 1024)).toFixed(2) + "MB");
       }
-      
+
       // Check if params contains custom images and validate them
       if (params.clothesImage) {
         // Validate it's a proper data URL
@@ -1497,49 +1526,48 @@ export default function EditorPage() {
           throw new Error("Invalid clothes image format. Please upload a valid image.");
         }
       }
-      
+
       if (params.customBackgroundImage) {
         // Validate it's a proper data URL
         if (!params.customBackgroundImage.startsWith('data:') && !params.customBackgroundImage.startsWith('http') && !params.customBackgroundImage.startsWith('/')) {
           throw new Error("Invalid background image format. Please upload a valid image.");
         }
       }
-      
+
       // Log request details for debugging
-      
-      // ORIGINAL PROCESSING LOGIC RESTORED (HF processing commented out)
-      /*
-      // Only use HF + fal.ai processing
-      if (!isHfProLoggedIn) {
-        setNodes(prev => prev.map(n => 
-          n.id === nodeId ? { ...n, error: "Please login with HF Pro to use fal.ai processing", isRunning: false } : n
-        ));
-        return;
-      }
 
-      // Make a SINGLE API call with fal.ai processing
-      const res = await fetch("/api/hf-process", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          type: "COMBINED", 
-          image: inputImage, 
-          params
-        }),
-      });
-      */
-      
-      // Make a SINGLE API call with all accumulated parameters
-      const res = await fetch("/api/process", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          type: "COMBINED", // Indicate this is a combined processing
-          image: inputImage,
-          params,
-          apiToken: apiToken || undefined
-        }),
-      });
+      // Conditionally use HuggingFace or Gemini API based on processing mode
+      let res: Response;
+
+      if (processingMode === 'huggingface') {
+        // Use HuggingFace models
+        if (!isHfProLoggedIn) {
+          throw new Error("Please login with HuggingFace to use HF models. Click 'Login with HuggingFace' in the header.");
+        }
+
+        res = await fetch("/api/hf-process", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            type: "COMBINED",
+            model: selectedHfModel,
+            image: inputImage,
+            params
+          }),
+        });
+      } else {
+        // Use Nano Banana Pro (Gemini API)
+        res = await fetch("/api/process", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            type: "COMBINED",
+            image: inputImage,
+            params,
+            apiToken: apiToken || undefined
+          }),
+        });
+      }
 
       // Check if response is actually JSON before parsing
       const contentType = res.headers.get("content-type");
@@ -1552,8 +1580,8 @@ export default function EditorPage() {
       const data = await res.json();
       if (!res.ok) {
         // Handle both string and object error formats
-        const errorMessage = typeof data.error === 'string' 
-          ? data.error 
+        const errorMessage = typeof data.error === 'string'
+          ? data.error
           : data.error?.message || JSON.stringify(data.error) || "Processing failed";
         throw new Error(errorMessage);
       }
@@ -1573,11 +1601,11 @@ export default function EditorPage() {
       }));
 
       // Add to node's history
-      const description = unprocessedNodeCount > 1 
+      const description = unprocessedNodeCount > 1
         ? `Combined ${unprocessedNodeCount} transformations`
         : `${node.type} transformation`;
-      
-      
+
+
       if (unprocessedNodeCount > 1) {
       }
     } catch (e: any) {
@@ -1660,13 +1688,13 @@ export default function EditorPage() {
     // Get images from merge inputs - now accepts any node type
     const mergeImages: string[] = [];
     const inputData: { image: string; label: string }[] = [];
-    
+
     for (const inputId of merge.inputs) {
       const inputNode = nodes.find(n => n.id === inputId);
       if (inputNode) {
         let image: string | null = null;
         let label = "";
-        
+
         if (inputNode.type === "CHARACTER") {
           image = (inputNode as CharacterNode).image;
           label = (inputNode as CharacterNode).label || "";
@@ -1680,7 +1708,7 @@ export default function EditorPage() {
           image = mergeOutput !== undefined ? mergeOutput : null;
           label = "Merged Image";
         }
-        
+
         if (image) {
           // Validate image format
           if (!image.startsWith('data:') && !image.startsWith('http') && !image.startsWith('/')) {
@@ -1692,15 +1720,15 @@ export default function EditorPage() {
         }
       }
     }
-    
+
     if (mergeImages.length < 2) {
       throw new Error("Not enough valid inputs for merge. Need at least 2 images.");
     }
-    
+
     // Log merge details for debugging
-    
+
     const prompt = generateMergePrompt(inputData);
-    
+
     // ORIGINAL MERGE LOGIC RESTORED (HF processing commented out)
     /*
     const res = await fetch("/api/hf-process", {
@@ -1713,19 +1741,19 @@ export default function EditorPage() {
       }),
     });
     */
-    
+
     // Use the process route instead of merge route
     const res = await fetch("/api/process", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ 
+      body: JSON.stringify({
         type: "MERGE",
-        images: mergeImages, 
+        images: mergeImages,
         prompt,
         apiToken: apiToken || undefined
       }),
     });
-    
+
     // Check if response is actually JSON before parsing
     const contentType = res.headers.get("content-type");
     if (!contentType || !contentType.includes("application/json")) {
@@ -1733,31 +1761,40 @@ export default function EditorPage() {
       console.error("Non-JSON response received:", textResponse);
       throw new Error("Server returned an error page instead of JSON. Check your API key configuration.");
     }
-    
+
     const data = await res.json();
     if (!res.ok) {
       throw new Error(data.error || "Merge failed");
     }
-    
+
     return data.image || (data.images?.[0] as string) || null;
   };
-  
+
   const runMerge = async (mergeId: string) => {
+    // Check if using HuggingFace mode - MERGE is not supported
+    if (processingMode === 'huggingface') {
+      setNodes((prev) => prev.map((n) => (n.id === mergeId && n.type === "MERGE" ? {
+        ...n,
+        error: "MERGE requires Nano Banana Pro mode. HuggingFace models only accept single images. Please switch to '🍌 Nano Banana Pro' in the header and enter your Gemini API key."
+      } : n)));
+      return;
+    }
+
     setNodes((prev) => prev.map((n) => (n.id === mergeId && n.type === "MERGE" ? { ...n, isRunning: true, error: null } : n)));
     try {
       const merge = (nodes.find((n) => n.id === mergeId) as MergeNode) || null;
       if (!merge) return;
-      
+
       // Get input nodes with their labels - now accepts any node type
       const inputData = merge.inputs
         .map((id, index) => {
           const inputNode = nodes.find((n) => n.id === id);
           if (!inputNode) return null;
-          
+
           // Support CHARACTER nodes, processed nodes, and MERGE outputs
           let image: string | null = null;
           let label = "";
-          
+
           if (inputNode.type === "CHARACTER") {
             image = (inputNode as CharacterNode).image;
             label = (inputNode as CharacterNode).label || `CHARACTER ${index + 1}`;
@@ -1771,17 +1808,17 @@ export default function EditorPage() {
             image = mergeOutput !== undefined ? mergeOutput : null;
             label = `Merged Image ${index + 1}`;
           }
-          
+
           if (!image) return null;
-          
+
           return { image, label };
         })
         .filter(Boolean) as { image: string; label: string }[];
-      
+
       if (inputData.length < 2) throw new Error("Connect at least two nodes with images (CHARACTER nodes or processed nodes).");
-      
+
       // Debug: Log what we're sending
-      
+
       // Generate dynamic prompt based on number of inputs
       const prompt = generateMergePrompt(inputData);
       const imgs = inputData.map(d => d.image);
@@ -1807,14 +1844,14 @@ export default function EditorPage() {
       const res = await fetch("/api/process", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ 
+        body: JSON.stringify({
           type: "MERGE",
-          images: imgs, 
+          images: imgs,
           prompt,
           apiToken: apiToken || undefined
         }),
       });
-      
+
       // Check if response is actually JSON before parsing
       const contentType = res.headers.get("content-type");
       if (!contentType || !contentType.includes("application/json")) {
@@ -1822,7 +1859,7 @@ export default function EditorPage() {
         console.error("Non-JSON response received:", textResponse);
         throw new Error("Server returned an error page instead of JSON. Check your API key configuration.");
       }
-      
+
       const js = await res.json();
       if (!res.ok) {
         // Show more helpful error messages
@@ -1834,7 +1871,7 @@ export default function EditorPage() {
       }
       const out = js.image || (js.images?.[0] as string) || null;
       setNodes((prev) => prev.map((n) => (n.id === mergeId && n.type === "MERGE" ? { ...n, output: out, isRunning: false } : n)));
-      
+
       // Add merge result to node's history
       if (out) {
         const inputLabels = merge.inputs.map((id, index) => {
@@ -1844,7 +1881,7 @@ export default function EditorPage() {
           }
           return `${inputNode?.type || 'Node'} ${index + 1}`;
         });
-        
+
       }
     } catch (e: any) {
       console.error("Merge error:", e);
@@ -1861,11 +1898,11 @@ export default function EditorPage() {
       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 
+    return {
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY
     };
   }, [nodes]);
 
@@ -1887,9 +1924,9 @@ export default function EditorPage() {
       const width = widths[n.type] || 320;
       return { x: n.x + width - 10, y: n.y + 25 };
     };
-    
+
     const getNodeInputPort = (n: AnyNode) => ({ x: n.x + 10, y: n.y + 25 });
-    
+
     const createPath = (x1: number, y1: number, x2: number, y2: number) => {
       const dx = x2 - x1;
       const dy = y2 - y1;
@@ -1897,9 +1934,9 @@ export default function EditorPage() {
       const controlOffset = Math.min(200, Math.max(50, distance * 0.3));
       return `M ${x1} ${y1} C ${x1 + controlOffset} ${y1}, ${x2 - controlOffset} ${y2}, ${x2} ${y2}`;
     };
-    
+
     const paths: { path: string; active?: boolean; processing?: boolean }[] = [];
-    
+
     // Handle all connections
     for (const node of nodes) {
       if (node.type === "MERGE") {
@@ -1911,7 +1948,7 @@ export default function EditorPage() {
             const start = getNodeOutputPort(inputNode);
             const end = getNodeInputPort(node);
             const isProcessing = merge.isRunning; // Only animate to the currently processing merge node
-            paths.push({ 
+            paths.push({
               path: createPath(start.x, start.y, end.x, end.y),
               processing: isProcessing
             });
@@ -1925,26 +1962,26 @@ export default function EditorPage() {
           const start = getNodeOutputPort(inputNode);
           const end = getNodeInputPort(node);
           const isProcessing = (node as any).isRunning; // Only animate to the currently processing node
-          paths.push({ 
+          paths.push({
             path: createPath(start.x, start.y, end.x, end.y),
             processing: isProcessing
           });
         }
       }
     }
-    
+
     // Dragging path
     if (draggingFrom && dragPos) {
       const sourceNode = nodes.find(n => n.id === draggingFrom);
       if (sourceNode) {
         const start = getNodeOutputPort(sourceNode);
-        paths.push({ 
-          path: createPath(start.x, start.y, dragPos.x, dragPos.y), 
-          active: true 
+        paths.push({
+          path: createPath(start.x, start.y, dragPos.x, dragPos.y),
+          active: true
         });
       }
     }
-    
+
     return paths;
   }, [nodes, draggingFrom, dragPos]);
 
@@ -1997,29 +2034,29 @@ export default function EditorPage() {
     const rect = containerRef.current!.getBoundingClientRect();
     const world = screenToWorld(e.clientX, e.clientY, rect, tx, ty, scale);
     setMenuWorld(world);
-    
+
     // Menu dimensions
     const menuWidth = 224; // w-56 = 224px
     const menuHeight = 320; // Approximate height with max-h-[300px] + padding
-    
+
     // Calculate position relative to container
     let x = e.clientX - rect.left;
     let y = e.clientY - rect.top;
-    
+
     // Adjust if menu would go off right edge
     if (x + menuWidth > rect.width) {
       x = rect.width - menuWidth - 10;
     }
-    
+
     // Adjust if menu would go off bottom edge  
     if (y + menuHeight > rect.height) {
       y = rect.height - menuHeight - 10;
     }
-    
+
     // Ensure minimum margins from edges
     x = Math.max(10, x);
     y = Math.max(10, y);
-    
+
     setMenuPos({ x, y });
     setMenuOpen(true);
   };
@@ -2030,8 +2067,8 @@ export default function EditorPage() {
       x: menuWorld.x,
       y: menuWorld.y,
     };
-    
-    switch(kind) {
+
+    switch (kind) {
       case "CHARACTER":
         addCharacter(menuWorld);
         break;
@@ -2074,24 +2111,89 @@ 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">
+      <header className="flex items-center justify-between px-6 py-3 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>
         <div className="flex items-center gap-3">
-          {/* ORIGINAL API TOKEN INPUT RESTORED */}
-          <label htmlFor="api-token" className="text-sm font-medium text-muted-foreground">
-            API Token:
-          </label>
-          <Input
-            id="api-token"
-            type="password"
-            placeholder="Enter your Google Gemini API token"
-            value={apiToken}
-            onChange={(e) => setApiToken(e.target.value)}
-            className="w-64"
-          />
-          
+          {/* Processing Mode Toggle */}
+          <div className="flex items-center gap-2 p-1 bg-muted/50 rounded-lg">
+            <button
+              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${processingMode === 'nanobananapro'
+                ? 'bg-primary text-primary-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+                }`}
+              onClick={() => setProcessingMode('nanobananapro')}
+              title="Use Google Gemini API - supports all features including MERGE"
+            >
+              🍌 Nano Banana Pro
+            </button>
+            <button
+              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${processingMode === 'huggingface'
+                ? 'bg-primary text-primary-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+                }`}
+              onClick={() => setProcessingMode('huggingface')}
+              title="Use HuggingFace models - requires HF login"
+            >
+              🤗 HuggingFace
+            </button>
+          </div>
+
+          {/* Conditional UI based on processing mode */}
+          {processingMode === 'nanobananapro' ? (
+            <>
+              <div className="h-6 w-px bg-border" />
+              <label htmlFor="api-token" className="text-sm font-medium text-muted-foreground">
+                Gemini API Key:
+              </label>
+              <Input
+                id="api-token"
+                type="password"
+                placeholder="Enter your Google Gemini API key"
+                value={apiToken}
+                onChange={(e) => setApiToken(e.target.value)}
+                className="w-56"
+              />
+            </>
+          ) : (
+            <>
+              <div className="h-6 w-px bg-border" />
+              {/* HF Login Button */}
+              <Button
+                variant={isHfProLoggedIn ? "outline" : "default"}
+                size="sm"
+                className="h-8"
+                onClick={handleHfProLogin}
+                disabled={isCheckingAuth}
+              >
+                {isCheckingAuth ? "Checking..." : isHfProLoggedIn ? "✓ HF Connected" : "Login with HuggingFace"}
+              </Button>
+
+              {/* Model Selector - only show when logged in */}
+              {isHfProLoggedIn && (
+                <>
+                  <label htmlFor="hf-model" className="text-sm font-medium text-muted-foreground">
+                    Model:
+                  </label>
+                  <select
+                    id="hf-model"
+                    value={selectedHfModel}
+                    onChange={(e) => setSelectedHfModel(e.target.value as keyof typeof HF_MODELS)}
+                    className="h-8 px-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+                  >
+                    {Object.entries(HF_MODELS).map(([key, model]) => (
+                      <option key={key} value={key}>
+                        {model.name} ({model.type})
+                      </option>
+                    ))}
+                  </select>
+                </>
+              )}
+            </>
+          )}
+
+          <div className="h-6 w-px bg-border" />
           <Button
             variant="outline"
             size="sm"
@@ -2101,8 +2203,6 @@ export default function EditorPage() {
           >
             Help
           </Button>
-          
-
         </div>
       </header>
 
@@ -2110,7 +2210,7 @@ export default function EditorPage() {
       {showHelpSidebar && (
         <>
           {/* Backdrop */}
-          <div 
+          <div
             className="fixed inset-0 bg-black/50 z-[9998]"
             onClick={() => setShowHelpSidebar(false)}
           />
@@ -2128,73 +2228,72 @@ export default function EditorPage() {
                   <span className="text-lg">×</span>
                 </Button>
               </div>
-              
+
               <div className="space-y-6">
-                {/* ORIGINAL HELP CONTENT RESTORED (HF help commented out) */}
-                {/*
+                {/* Processing Modes Explanation */}
                 <div>
-                  <h3 className="font-semibold mb-3 text-foreground">🤗 HF Pro Login</h3>
+                  <h3 className="font-semibold mb-3 text-foreground">⚙️ Processing Modes</h3>
                   <div className="text-sm text-muted-foreground space-y-3">
                     <div className="p-3 bg-primary/10 border border-primary/20 rounded-lg">
-                      <p className="font-medium text-primary mb-2">Step 1: Login with Hugging Face</p>
-                      <p>Click "Login HF PRO" to authenticate with your Hugging Face account.</p>
+                      <p className="font-medium text-primary mb-2">🍌 Nano Banana Pro (Gemini API)</p>
+                      <p>Uses Google's Gemini API. <strong>Supports ALL nodes</strong> including MERGE for combining multiple images into group photos.</p>
+                      <p className="mt-1 text-xs">Requires a Google Gemini API key from <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">AI Studio</a>.</p>
                     </div>
                     <div className="p-3 bg-secondary border border-border rounded-lg">
-                      <p className="font-medium text-secondary-foreground mb-2">Step 2: Access fal.ai Models</p>
-                      <p>Once logged in, you'll have access to fal.ai's Gemini 2.5 Flash Image models.</p>
-                    </div>
-                    <div className="p-3 bg-accent border border-border rounded-lg">
-                      <p className="font-medium text-accent-foreground mb-2">Step 3: Start Creating</p>
-                      <p>Use the powerful fal.ai models for image generation, merging, editing, and style transfers.</p>
+                      <p className="font-medium text-secondary-foreground mb-2">🤗 HuggingFace Models</p>
+                      <p>Uses HuggingFace inference API with models like FLUX.1-Kontext and Qwen-Image-Edit. Supports single-image editing nodes.</p>
+                      <p className="mt-1 text-xs">Requires HuggingFace login. Uses your HF inference credits.</p>
                     </div>
                   </div>
                 </div>
-                */}
-                
+
+                {/* MERGE Warning */}
+                <div className="p-4 bg-destructive/10 border border-destructive/30 rounded-lg">
+                  <h4 className="font-semibold text-destructive mb-2">⚠️ MERGE Node Limitation</h4>
+                  <p className="text-sm text-muted-foreground">
+                    The <strong>MERGE</strong> node requires <strong>Nano Banana Pro</strong> because it combines multiple images into one cohesive group photo. HuggingFace models only accept single images, so MERGE won't work in HuggingFace mode.
+                  </p>
+                </div>
+
+                {/* Available HF Models */}
                 <div>
-                  <h3 className="font-semibold mb-3 text-foreground">🔑 API Token Setup</h3>
-                  <div className="text-sm text-muted-foreground space-y-3">
-                    <div className="p-3 bg-primary/10 border border-primary/20 rounded-lg">
-                      <p className="font-medium text-primary mb-2">Step 1: Get Your API Key</p>
-                      <p>Visit <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline font-medium">Google AI Studio</a> to create your free Gemini API key.</p>
+                  <h3 className="font-semibold mb-3 text-foreground">🤖 HuggingFace Models</h3>
+                  <div className="text-sm text-muted-foreground space-y-2">
+                    <div className="p-2 bg-muted/50 rounded">
+                      <p className="font-medium">FLUX.1 Kontext</p>
+                      <p className="text-xs">Image editing with context understanding</p>
                     </div>
-                    <div className="p-3 bg-secondary border border-border rounded-lg">
-                      <p className="font-medium text-secondary-foreground mb-2">Step 2: Add Your Token</p>
-                      <p>Paste your API key in the "API Token" field in the top navigation bar.</p>
+                    <div className="p-2 bg-muted/50 rounded">
+                      <p className="font-medium">Qwen Image Edit</p>
+                      <p className="text-xs">Powerful image editing and manipulation</p>
                     </div>
-                    <div className="p-3 bg-accent border border-border rounded-lg">
-                      <p className="font-medium text-accent-foreground mb-2">Step 3: Start Creating</p>
-                      <p>Your token enables all AI features: image generation, merging, editing, and style transfers.</p>
+                    <div className="p-2 bg-muted/50 rounded">
+                      <p className="font-medium">FLUX.1 Dev</p>
+                      <p className="text-xs">Text-to-image generation (for CHARACTER nodes)</p>
                     </div>
                   </div>
                 </div>
-                
+
+                {/* How to Use */}
                 <div>
-                   <h3 className="font-semibold mb-3 text-foreground">🎨 How to Use the Editor</h3>
-                   <div className="text-sm text-muted-foreground space-y-2">
-                     <p>• <strong>Adding Nodes:</strong> Right-click on the editor canvas and choose the node type you want, then drag and drop to position it</p>
-                     <p>• <strong>Character Nodes:</strong> Upload or drag images to create character nodes</p>
-                     <p>• <strong>Merge Nodes:</strong> Connect multiple characters to create group photos</p>
-                     <p>• <strong>Style Nodes:</strong> Apply artistic styles and filters</p>
-                     <p>• <strong>Background Nodes:</strong> Change or generate new backgrounds</p>
-                     <p>• <strong>Edit Nodes:</strong> Make specific modifications with text prompts</p>
-                   </div>
-                 </div>
-                
+                  <h3 className="font-semibold mb-3 text-foreground">🎨 How to Use the Editor</h3>
+                  <div className="text-sm text-muted-foreground space-y-2">
+                    <p>• <strong>Adding Nodes:</strong> Right-click on the canvas to add nodes</p>
+                    <p>• <strong>Character Nodes:</strong> Upload or drag images as starting points</p>
+                    <p>• <strong>Merge Nodes:</strong> Connect multiple characters (Nano Banana Pro only)</p>
+                    <p>• <strong>Editing Nodes:</strong> Background, Style, Face, Age, Camera, etc.</p>
+                    <p>• <strong>Connecting:</strong> Drag from output port to input port</p>
+                  </div>
+                </div>
+
+                {/* Privacy */}
                 <div className="p-4 bg-muted border border-border rounded-lg">
                   <h4 className="font-semibold text-foreground mb-2">🔒 Privacy & Security</h4>
                   <div className="text-sm text-muted-foreground space-y-1">
-                    {/* ORIGINAL PRIVACY INFO RESTORED (HF privacy info commented out) */}
-                    {/*
-                    <p>• Your HF token is stored securely in HTTP-only cookies</p>
-                    <p>• Authentication happens through Hugging Face OAuth</p>
-                    <p>• You can logout anytime to revoke access</p>
-                    <p>• Processing happens via fal.ai's secure infrastructure</p>
-                    */}
-                    <p>• Your API token is stored locally in your browser</p>
-                    <p>• Tokens are never sent to our servers</p>
-                    <p>• Keep your API key secure and don't share it</p>
-                    <p>• You can revoke keys anytime in Google AI Studio</p>
+                    <p>• Gemini API keys are stored locally in your browser</p>
+                    <p>• HuggingFace tokens are stored in secure HTTP-only cookies</p>
+                    <p>• All processing happens through official APIs</p>
+                    <p>• No data is stored on our servers</p>
                   </div>
                 </div>
               </div>
@@ -2229,17 +2328,17 @@ export default function EditorPage() {
       >
         <div
           className="absolute left-0 top-0 will-change-transform"
-          style={{ 
-            transform: `translate3d(${tx}px, ${ty}px, 0) scale(${scale})`, 
+          style={{
+            transform: `translate3d(${tx}px, ${ty}px, 0) scale(${scale})`,
             transformOrigin: "0 0",
             transformStyle: "preserve-3d",
             backfaceVisibility: "hidden"
           }}
         >
-          <svg 
-            className="absolute pointer-events-none z-0" 
-            style={{ 
-              left: `${svgBounds.x}px`, 
+          <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`
@@ -2248,10 +2347,10 @@ export default function EditorPage() {
           >
             <defs>
               <filter id="glow">
-                <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+                <feGaussianBlur stdDeviation="3" result="coloredBlur" />
                 <feMerge>
-                  <feMergeNode in="coloredBlur"/>
-                  <feMergeNode in="SourceGraphic"/>
+                  <feMergeNode in="coloredBlur" />
+                  <feMergeNode in="SourceGraphic" />
                 </feMerge>
               </filter>
             </defs>
@@ -2427,26 +2526,26 @@ export default function EditorPage() {
 
         {menuOpen && (
           <div
-            className="absolute z-50 rounded-xl border border-white/10 bg-[#111]/95 backdrop-blur p-1 w-56 shadow-2xl"
+            className="absolute z-50 rounded-xl border border-border bg-popover/95 backdrop-blur p-1 w-56 shadow-2xl text-popover-foreground"
             style={{ left: menuPos.x, top: menuPos.y }}
             onMouseLeave={() => setMenuOpen(false)}
           >
-            <div className="px-3 py-2 text-xs text-white/60">Add node</div>
-            <div 
+            <div className="px-3 py-2 text-xs text-muted-foreground">Add node</div>
+            <div
               className="max-h-[300px] overflow-y-auto scrollbar-thin pr-1"
               onWheel={(e) => e.stopPropagation()}
             >
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("CHARACTER")}>CHARACTER</button>
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("MERGE")}>MERGE</button>
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("BACKGROUND")}>BACKGROUND</button>
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("CLOTHES")}>CLOTHES</button>
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("STYLE")}>STYLE</button>
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("EDIT")}>EDIT</button>
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("CAMERA")}>CAMERA</button>
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("AGE")}>AGE</button>
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("FACE")}>FACE</button>
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("LIGHTNING")}>LIGHTNING</button>
-              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("POSES")}>POSES</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("CHARACTER")}>CHARACTER</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("MERGE")}>MERGE</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("BACKGROUND")}>BACKGROUND</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("CLOTHES")}>CLOTHES</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("STYLE")}>STYLE</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("EDIT")}>EDIT</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("CAMERA")}>CAMERA</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("AGE")}>AGE</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("FACE")}>FACE</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("LIGHTNING")}>LIGHTNING</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors" onClick={() => addFromMenu("POSES")}>POSES</button>
             </div>
           </div>
         )}

components/mode-toggle.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+
+export function ModeToggle() {
+    const { setTheme, theme } = useTheme()
+
+    return (
+        <Button
+            variant="outline"
+            size="icon"
+            className="fixed bottom-4 right-4 z-50 rounded-full h-12 w-12 shadow-lg bg-background border-border"
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            title="Toggle theme"
+        >
+            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 text-orange-500" />
+            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 text-blue-400" />
+            <span className="sr-only">Toggle theme</span>
+        </Button>
+    )
+}

components/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+    children,
+    ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

index.html

@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Amazing Website</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #6366f1;
+            --secondary: #8b5cf6;
+            --accent: #f59e0b;
+            --dark: #1f2937;
+            --light: #f8fafc;
+            --text: #374151;
+            --text-light: #6b7280;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            line-height: 1.6;
+            color: var(--text);
+            background: #0f0f23;
+            overflow-x: hidden;
+        }
+
+        /* Animated background */
+        .bg-animation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            background: linear-gradient(45deg, #0f0f23, #1a1a3e, #2d1b69, #0f0f23);
+            background-size: 400% 400%;
+            animation: gradientShift 15s ease infinite;
+        }
+
+        @keyframes gradientShift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
+        /* Floating particles */
+        .particles {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            pointer-events: none;
+        }
+
+        .particle {
+            position: absolute;
+            width: 2px;
+            height: 2px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            animation: float 6s ease-in-out infinite;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0; }
+            50% { transform: translateY(-100px) rotate(180deg); opacity: 1; }
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        header {
+            background: rgba(15, 15, 35, 0.8);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            padding: 1rem 0;
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1000;
+            transition: all 0.3s ease;
+        }
+
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .logo {
+            font-size: 2rem;
+            font-weight: 800;
+            background: linear-gradient(45deg, var(--primary), var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
+        }
+
+        .nav-links {
+            display: flex;
+            list-style: none;
+            gap: 2.5rem;
+        }
+
+        .nav-links a {
+            color: rgba(255, 255, 255, 0.9);
+            text-decoration: none;
+            font-weight: 500;
+            position: relative;
+            transition: all 0.3s ease;
+            padding: 0.5rem 1rem;
+            border-radius: 8px;
+        }
+
+        .nav-links a::before {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 50%;
+            width: 0;
+            height: 2px;
+            background: linear-gradient(45deg, var(--primary), var(--accent));
+            transition: all 0.3s ease;
+            transform: translateX(-50%);
+        }
+
+        .nav-links a:hover {
+            color: var(--accent);
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .nav-links a:hover::before {
+            width: 100%;
+        }
+
+        main {
+            margin-top: 80px;
+            padding: 0;
+        }
+
+        .hero {
+            text-align: center;
+            padding: 8rem 0;
+            color: white;
+            position: relative;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .hero-content {
+            max-width: 800px;
+            margin: 0 auto;
+            position: relative;
+            z-index: 2;
+        }
+
+        .hero h1 {
+            font-size: 4.5rem;
+            font-weight: 800;
+            margin-bottom: 1.5rem;
+            background: linear-gradient(45deg, #ffffff, var(--primary), var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            animation: textGlow 3s ease-in-out infinite alternate;
+        }
+
+        @keyframes textGlow {
+            from { filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.5)); }
+            to { filter: drop-shadow(0 0 30px rgba(245, 158, 11, 0.8)); }
+        }
+
+        .hero p {
+            font-size: 1.4rem;
+            margin-bottom: 3rem;
+            color: rgba(255, 255, 255, 0.8);
+            line-height: 1.8;
+        }
+
+        .btn {
+            display: inline-block;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            color: white;
+            padding: 18px 40px;
+            text-decoration: none;
+            border-radius: 50px;
+            font-weight: 600;
+            font-size: 1.1rem;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
+        }
+
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.5s ease;
+        }
+
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5);
+        }
+
+        .btn:hover::before {
+            left: 100%;
+        }
+
+        .btn-secondary {
+            background: transparent;
+            border: 2px solid var(--primary);
+            margin-left: 1rem;
+        }
+
+        .btn-secondary:hover {
+            background: var(--primary);
+        }
+
+        .section {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            margin: 0;
+            padding: 6rem 0;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            position: relative;
+        }
+
+        .section h2 {
+            text-align: center;
+            margin-bottom: 4rem;
+            color: white;
+            font-size: 3rem;
+            font-weight: 700;
+            background: linear-gradient(45deg, #ffffff, var(--primary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 3rem;
+            margin-top: 3rem;
+        }
+
+        .feature {
+            text-align: center;
+            padding: 3rem 2rem;
+            background: rgba(255, 255, 255, 0.08);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.4s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .feature::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
+            transition: left 0.6s ease;
+        }
+
+        .feature:hover {
+            transform: translateY(-10px) scale(1.02);
+            border-color: var(--primary);
+            box-shadow: 0 20px 60px rgba(99, 102, 241, 0.2);
+        }
+
+        .feature:hover::before {
+            left: 100%;
+        }
+
+        .feature h3 {
+            margin-bottom: 1.5rem;
+            color: white;
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        .feature p {
+            color: rgba(255, 255, 255, 0.7);
+            line-height: 1.8;
+        }
+
+        .feature-icon {
+            font-size: 4rem;
+            margin-bottom: 2rem;
+            background: linear-gradient(45deg, var(--primary), var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.3));
+        }
+
+        footer {
+            background: rgba(0, 0, 0, 0.9);
+            backdrop-filter: blur(20px);
+            color: white;
+            text-align: center;
+            padding: 4rem 0;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .footer-content {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 3rem;
+            margin-bottom: 2rem;
+        }
+
+        .footer-section h3 {
+            color: var(--primary);
+            margin-bottom: 1rem;
+            font-size: 1.2rem;
+        }
+
+        .footer-section p, .footer-section a {
+            color: rgba(255, 255, 255, 0.7);
+            text-decoration: none;
+            line-height: 1.8;
+        }
+
+        .footer-section a:hover {
+            color: var(--accent);
+        }
+
+        .social-links {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            margin-top: 2rem;
+        }
+
+        .social-links a {
+            display: inline-block;
+            width: 50px;
+            height: 50px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            text-align: center;
+            line-height: 50px;
+            transition: all 0.3s ease;
+        }
+
+        .social-links a:hover {
+            background: var(--primary);
+            transform: translateY(-3px);
+        }
+
+        @media (max-width: 768px) {
+            .nav-links {
+                display: none;
+            }
+            
+            .hero h1 {
+                font-size: 3rem;
+            }
+            
+            .hero p {
+                font-size: 1.2rem;
+            }
+            
+            .features {
+                grid-template-columns: 1fr;
+            }
+            
+            .btn-secondary {
+                margin-left: 0;
+                margin-top: 1rem;
+                display: block;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Animated Background -->
+    <div class="bg-animation"></div>
+    
+    <!-- Floating Particles -->
+    <div class="particles" id="particles"></div>
+
+    <header>
+        <nav class="container">
+            <div class="logo">AmazingWeb</div>
+            <ul class="nav-links">
+                <li><a href="#home">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#services">Services</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section id="home" class="hero">
+            <div class="container">
+                <div class="hero-content">
+                    <h1>Welcome to the Future</h1>
+                    <p>Experience cutting-edge technology and innovative solutions that will revolutionize your digital journey. Built with passion, powered by excellence.</p>
+                    <a href="#services" class="btn">Explore Now</a>
+                    <a href="#about" class="btn btn-secondary">Learn More</a>
+                </div>
+            </div>
+        </section>
+
+        <section id="about" class="section">
+            <div class="container">
+                <h2>About Us</h2>
+                <p style="text-align: center; font-size: 1.3rem; max-width: 900px; margin: 0 auto; color: rgba(255, 255, 255, 0.8); line-height: 1.8;">
+                    We are passionate innovators dedicated to creating extraordinary digital experiences. 
+                    Our team combines cutting-edge technology with creative vision to deliver solutions 
+                    that not only meet but exceed expectations, driving success in the digital landscape.
+                </p>
+            </div>
+        </section>
+
+        <section id="services" class="section">
+            <div class="container">
+                <h2>Our Services</h2>
+                <div class="features">
+                    <div class="feature">
+                        <div class="feature-icon"><i class="fas fa-rocket"></i></div>
+                        <h3>Lightning Performance</h3>
+                        <p>Ultra-fast loading times and optimized performance that ensures your users have the best possible experience across all devices.</p>
+                    </div>
+                    <div class="feature">
+                        <div class="feature-icon"><i class="fas fa-mobile-alt"></i></div>
+                        <h3>Responsive Design</h3>
+                        <p>Seamlessly adapts to any screen size with beautiful, intuitive interfaces that work perfectly on every device.</p>
+                    </div>
+                    <div class="feature">
+                        <div class="feature-icon"><i class="fas fa-palette"></i></div>
+                        <h3>Stunning Visuals</h3>
+                        <p>Breathtaking designs with modern aesthetics, smooth animations, and attention-grabbing visual elements.</p>
+                    </div>
+                    <div class="feature">
+                        <div class="feature-icon"><i class="fas fa-shield-alt"></i></div>
+                        <h3>Secure & Reliable</h3>
+                        <p>Enterprise-grade security with robust infrastructure ensuring your data and users are always protected.</p>
+                    </div>
+                    <div class="feature">
+                        <div class="feature-icon"><i class="fas fa-cogs"></i></div>
+                        <h3>Custom Solutions</h3>
+                        <p>Tailored solutions designed specifically for your unique needs and business requirements.</p>
+                    </div>
+                    <div class="feature">
+                        <div class="feature-icon"><i class="fas fa-headset"></i></div>
+                        <h3>24/7 Support</h3>
+                        <p>Round-the-clock support from our expert team to ensure your success and satisfaction.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer id="contact">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-section">
+                    <h3>AmazingWeb</h3>
+                    <p>Creating extraordinary digital experiences that inspire and transform businesses worldwide.</p>
+                </div>
+                <div class="footer-section">
+                    <h3>Quick Links</h3>
+                    <p><a href="#home">Home</a></p>
+                    <p><a href="#about">About</a></p>
+                    <p><a href="#services">Services</a></p>
+                    <p><a href="#contact">Contact</a></p>
+                </div>
+                <div class="footer-section">
+                    <h3>Contact Info</h3>
+                    <p>Email: hello@amazingweb.com</p>
+                    <p>Phone: +1 (555) 123-4567</p>
+                    <p>Address: 123 Innovation St, Tech City</p>
+                </div>
+            </div>
+            <div class="social-links">
+                <a href="#"><i class="fab fa-facebook-f"></i></a>
+                <a href="#"><i class="fab fa-twitter"></i></a>
+                <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                <a href="#"><i class="fab fa-instagram"></i></a>
+                <a href="#"><i class="fab fa-github"></i></a>
+            </div>
+            <p style="margin-top: 2rem; color: rgba(255, 255, 255, 0.5);">&copy; 2024 AmazingWeb. All rights reserved.</p>
+        </div>
+    </footer>
+
+    <script>
+        // Create floating particles
+        function createParticles() {
+            const particlesContainer = document.getElementById('particles');
+            const particleCount = 50;
+            
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                particle.style.left = Math.random() * 100 + '%';
+                particle.style.animationDelay = Math.random() * 6 + 's';
+                particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
+                particlesContainer.appendChild(particle);
+            }
+        }
+
+        // Smooth scrolling for navigation links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+
+        // Enhanced scroll effect for header
+        window.addEventListener('scroll', function() {
+            const header = document.querySelector('header');
+            const scrolled = window.scrollY;
+            
+            if (scrolled > 100) {
+                header.style.background = 'rgba(15, 15, 35, 0.95)';
+                header.style.backdropFilter = 'blur(30px)';
+            } else {
+                header.style.background = 'rgba(15, 15, 35, 0.8)';
+                header.style.backdropFilter = 'blur(20px)';
+            }
+        });
+
+        // Advanced scroll animations
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -100px 0px'
+        };
+
+        const observer = new IntersectionObserver(function(entries) {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                    
+                    // Add staggered animation for features
+                    if (entry.target.classList.contains('features')) {
+                        const features = entry.target.querySelectorAll('.feature');
+                        features.forEach((feature, index) => {
+                            setTimeout(() => {
+                                feature.style.opacity = '1';
+                                feature.style.transform = 'translateY(0)';
+                            }, index * 200);
+                        });
+                    }
+                }
+            });
+        }, observerOptions);
+
+        // Initialize animations
+        document.addEventListener('DOMContentLoaded', function() {
+            createParticles();
+            
+            // Observe sections
+            document.querySelectorAll('.section').forEach(section => {
+                section.style.opacity = '0';
+                section.style.transform = 'translateY(50px)';
+                section.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
+                observer.observe(section);
+            });
+
+            // Observe features
+            document.querySelectorAll('.features').forEach(features => {
+                observer.observe(features);
+                const featureItems = features.querySelectorAll('.feature');
+                featureItems.forEach(feature => {
+                    feature.style.opacity = '0';
+                    feature.style.transform = 'translateY(30px)';
+                    feature.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+                });
+            });
+        });
+
+        // Add parallax effect to hero section
+        window.addEventListener('scroll', function() {
+            const scrolled = window.scrollY;
+            const hero = document.querySelector('.hero');
+            if (hero) {
+                hero.style.transform = `translateY(${scrolled * 0.5}px)`;
+            }
+        });
+
+        // Add typing effect to hero title
+        function typeWriter(element, text, speed = 100) {
+            let i = 0;
+            element.innerHTML = '';
+            
+            function type() {
+                if (i < text.length) {
+                    element.innerHTML += text.charAt(i);
+                    i++;
+                    setTimeout(type, speed);
+                }
+            }
+            type();
+        }
+
+        // Initialize typing effect when page loads
+        window.addEventListener('load', function() {
+            const heroTitle = document.querySelector('.hero h1');
+            if (heroTitle) {
+                const originalText = heroTitle.textContent;
+                typeWriter(heroTitle, originalText, 150);
+            }
+        });
+    </script>
+</body>
+</html>

package-lock.json

@@ -16,6 +16,7 @@
         "clsx": "^2.1.1",
         "lucide-react": "^0.542.0",
         "next": "15.5.2",
+        "next-themes": "^0.4.6",
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "tailwind-merge": "^2.5.3"
@@ -5032,6 +5033,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

package.json

@@ -17,6 +17,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.542.0",
     "next": "15.5.2",
+    "next-themes": "^0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "tailwind-merge": "^2.5.3"