@ramme-io/create-app 2.0.0-alpha.4 → 2.0.1

package/template/src/features/theme/pages/ThemeCustomizerPage.tsx

@@ -1,313 +1,401 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { StandardPageLayout } from '@/components/layout/StandardPageLayout';
 import { Card, Input, Button, Icon, Label } from '@ramme-io/ui';
-import { generateThemeFromPrompt, AITheme } from '../services/themeAgent';
-import { generateRandomTheme, applyThemeToDom, loadGoogleFont } from '../utils/themeUtils';
+import { generateThemeFromPrompt } from '../services/themeAgent';
+import { applyThemeToDom, loadGoogleFont } from '../utils/themeUtils';
+import {
+  generateFromPrompt,
+  generateFromProfile,
+  generateRandom,
+  paletteToRgbVars,
+  hslToCssString,
+  AESTHETIC_PROFILES,
+  type GeneratedTheme,
+  type ThemePalette,
+} from '../utils/ThemeGenerator.logic';
+
+// ─── SWATCH COMPONENT ────────────────────────────────────────────────────────
+
+const SWATCH_TOKENS: { label: string; key: keyof ThemePalette }[] = [
+  { label: 'Background', key: 'background' },
+  { label: 'Foreground', key: 'foreground' },
+  { label: 'Primary', key: 'primary' },
+  { label: 'Secondary', key: 'secondary' },
+  { label: 'Accent', key: 'accent' },
+  { label: 'Muted', key: 'muted' },
+  { label: 'Border', key: 'border' },
+  { label: 'Card', key: 'card' },
+];
+
+function PaletteSwatch({ palette, label }: { palette: ThemePalette; label: string }) {
+  return (
+    <div className="space-y-3">
+      <h4 className="text-[10px] font-bold uppercase tracking-widest opacity-50">{label} Palette</h4>
+      <div className="grid grid-cols-4 md:grid-cols-8 gap-2">
+        {SWATCH_TOKENS.map((token) => (
+          <div key={token.key} className="space-y-1.5">
+            <div
+              className="h-10 w-full rounded-lg border border-black/10 shadow-sm transition-all duration-500"
+              style={{ backgroundColor: hslToCssString(palette[token.key]) }}
+            />
+            <div className="text-[9px] font-mono opacity-50 truncate text-center">{token.label}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── PROFILE ICON MAP ────────────────────────────────────────────────────────
+
+const PROFILE_ICONS: Record<string, string> = {
+  cyberpunk: 'zap',
+  nordic: 'snowflake',
+  earthy: 'leaf',
+  corporate: 'briefcase',
+  minimalist: 'minus-square',
+  sunset: 'sunset',
+  ocean: 'waves',
+};
+
+// ─── MAIN COMPONENT ─────────────────────────────────────────────────────────
 
 export default function ThemeCustomizerPage() {
   const [prompt, setPrompt] = useState('');
   const [loading, setLoading] = useState(false);
-  const [currentTheme, setCurrentTheme] = useState<AITheme | null>(() => {
-    const saved = localStorage.getItem('ramme_persisted_theme');
-    return saved ? JSON.parse(saved) : null;
-  });
-  
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [generatedTheme, setGeneratedTheme] = useState<GeneratedTheme | null>(null);
+
+  // Gemini Deep AI state
   const [geminiKey, setGeminiKey] = useState('');
   const [showKeyInput, setShowKeyInput] = useState(false);
 
   useEffect(() => {
     const savedKey = localStorage.getItem('ramme_vault_gemini_key') || '';
     setGeminiKey(savedKey);
-    if (!savedKey) setShowKeyInput(true);
   }, []);
 
+  // Apply theme to DOM whenever generated theme or dark mode changes
+  const applyGeneratedTheme = useCallback((theme: GeneratedTheme, dark: boolean) => {
+    const palette = dark ? theme.dark : theme.light;
+    const vars = paletteToRgbVars(palette);
+    document.documentElement.classList.remove('midnight', 'corporate', 'blueprint', 'dark');
+    applyThemeToDom(vars);
+
+    // Load fonts
+    if (theme.fonts?.heading && theme.fonts?.body) {
+      loadGoogleFont(theme.fonts.heading, theme.fonts.body);
+    }
+
+    // Persist
+    const persist = { theme, isDark: dark };
+    localStorage.setItem('ramme_themelab', JSON.stringify(persist));
+    localStorage.setItem('ramme_persisted_theme', JSON.stringify({
+      name: theme.name,
+      description: theme.description,
+      fonts: theme.fonts,
+      cssVars: vars,
+    }));
+  }, []);
+
+  // Restore on mount
   useEffect(() => {
-    if (currentTheme) {
-      localStorage.setItem('ramme_persisted_theme', JSON.stringify(currentTheme));
-      if (currentTheme.fonts) {
-        loadGoogleFont(currentTheme.fonts.heading, currentTheme.fonts.body);
+    try {
+      const saved = localStorage.getItem('ramme_themelab');
+      if (saved) {
+        const { theme, isDark } = JSON.parse(saved);
+        if (theme && theme.light && theme.dark) {
+          setGeneratedTheme(theme);
+          setIsDarkMode(isDark);
+          applyGeneratedTheme(theme, isDark);
+        }
       }
-      applyThemeToDom(currentTheme.cssVars);
-    }
-  }, [currentTheme]);
+    } catch { /* ignore */ }
+  }, [applyGeneratedTheme]);
 
-  const handleSaveKey = () => {
-    localStorage.setItem('ramme_vault_gemini_key', geminiKey);
-    setShowKeyInput(false);
+  // ── HANDLERS ──────────────────────────────────────────────────────────────
+
+  const handleLocalGenerate = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!prompt.trim()) return;
+    const theme = generateFromPrompt(prompt);
+    setGeneratedTheme(theme);
+    applyGeneratedTheme(theme, isDarkMode);
   };
 
-  const handleReset = () => {
-    if (window.confirm("Reset to default theme and clear saved settings?")) {
-      localStorage.removeItem('ramme_persisted_theme');
-      window.location.reload();
-    }
+  const handleProfileGenerate = (profileId: string) => {
+    const theme = generateFromProfile(profileId);
+    setGeneratedTheme(theme);
+    applyGeneratedTheme(theme, isDarkMode);
   };
 
-  const handleShare = () => {
-    if (!currentTheme) return;
-    const themeString = JSON.stringify(currentTheme, null, 2);
-    navigator.clipboard.writeText(themeString);
-    alert("Theme DNA copied to clipboard! You can paste this into a JSON file or share it with the team.");
+  const handleShuffle = () => {
+    const theme = generateRandom();
+    setGeneratedTheme(theme);
+    applyGeneratedTheme(theme, isDarkMode);
   };
 
-  const handleRandomize = () => {
-    const vars = generateRandomTheme();
-    const randomTheme: AITheme = { 
-        name: 'Random Generated', 
-        description: 'Procedural RGB palette.',
-        cssVars: vars 
-    };
-    setCurrentTheme(randomTheme);
-    applyThemeToDom(vars);
+  const handleToggleDark = () => {
+    const next = !isDarkMode;
+    setIsDarkMode(next);
+    if (generatedTheme) {
+      applyGeneratedTheme(generatedTheme, next);
+    }
   };
 
-  const handleDownloadCSS = () => {
-    if (!currentTheme) return;
-
-    // 1. Build the Google Fonts import string
-    const fontImport = currentTheme.fonts 
-      ? `@import url('https://fonts.googleapis.com/css2?family=${currentTheme.fonts.heading.replace(/ /g, '+')}&family=${currentTheme.fonts.body.replace(/ /g, '+')}&display=swap');\n\n`
-      : '';
-
-    // 2. Build the CSS variables block
-    const cssVars = Object.entries(currentTheme.cssVars)
-      .map(([key, val]) => `  ${key}: ${val};`)
-      .join('\n');
-
-    // 3. Add font-family assignments
-    const fontVars = currentTheme.fonts 
-      ? `  --font-heading: '${currentTheme.fonts.heading}', sans-serif;\n  --font-body: '${currentTheme.fonts.body}', sans-serif;\n`
-      : '';
-
-    const fullCSS = `${fontImport}/* Theme: ${currentTheme.name} */\n/* Description: ${currentTheme.description} */\n\n:root {\n${cssVars}\n${fontVars}}`;
-
-    // 4. Trigger the download
-    const blob = new Blob([fullCSS], { type: 'text/css' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `${currentTheme.name.toLowerCase().replace(/\s+/g, '-')}-theme.css`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
+  const handleReset = () => {
+    localStorage.removeItem('ramme_themelab');
+    localStorage.removeItem('ramme_persisted_theme');
+    window.location.reload();
   };
 
-  const handleAiGenerate = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!prompt) return;
+  // Deep AI (Gemini)
+  const handleDeepAiGenerate = async () => {
+    if (!prompt.trim()) return;
     if (!geminiKey) { setShowKeyInput(true); return; }
-
     setLoading(true);
     try {
-        const theme = await generateThemeFromPrompt(prompt);
-        if (theme && typeof theme === 'object' && theme.cssVars) {
-            document.documentElement.classList.remove('midnight', 'corporate', 'blueprint', 'dark');
-            if (theme.fonts?.heading && theme.fonts?.body) {
-                loadGoogleFont(theme.fonts.heading, theme.fonts.body);
-            }
-            setCurrentTheme(theme);
-            applyThemeToDom(theme.cssVars);
+      const theme = await generateThemeFromPrompt(prompt);
+      if (theme?.cssVars) {
+        document.documentElement.classList.remove('midnight', 'corporate', 'blueprint', 'dark');
+        if (theme.fonts?.heading && theme.fonts?.body) {
+          loadGoogleFont(theme.fonts.heading, theme.fonts.body);
         }
+        applyThemeToDom(theme.cssVars);
+        localStorage.setItem('ramme_persisted_theme', JSON.stringify(theme));
+        setGeneratedTheme(null); // clear local theme state
+      }
     } catch (err: any) {
-        console.error("Theme Engine Error:", err);
-        alert(err.message || "Snag in the orchestration.");
+      alert(err.message || 'Deep AI generation failed.');
     } finally {
-        setLoading(false);
+      setLoading(false);
     }
   };
 
+  const handleSaveKey = () => {
+    localStorage.setItem('ramme_vault_gemini_key', geminiKey);
+    setShowKeyInput(false);
+  };
+
+  const handleCopyVars = () => {
+    if (!generatedTheme) return;
+    const palette = isDarkMode ? generatedTheme.dark : generatedTheme.light;
+    const vars = paletteToRgbVars(palette);
+    const css = Object.entries(vars).map(([k, v]) => `${k}: ${v};`).join('\n');
+    navigator.clipboard.writeText(`:root {\n${css}\n}`);
+    alert('CSS variables copied!');
+  };
+
+  const activePalette = generatedTheme ? (isDarkMode ? generatedTheme.dark : generatedTheme.light) : null;
+
+  // ── RENDER ────────────────────────────────────────────────────────────────
+
   return (
-    <StandardPageLayout title="Theme Engine" description="AI-powered aesthetic generator.">
-      <div className="max-w-5xl mx-auto space-y-8 pb-20">
-        
-        {/* VAULT SETTINGS */}
+    <StandardPageLayout title="Theme Lab" description="Generate, randomize, and preview entire design systems instantly.">
+      <div className="max-w-6xl mx-auto space-y-8 pb-20">
+
+        {/* ── ROW 1: PROMPT + SHUFFLE ──────────────────────────────────── */}
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
+          <Card className="p-5 lg:col-span-3 border-2 border-primary/20">
+            <div className="flex items-center justify-between mb-3">
+              <h2 className="font-bold flex items-center gap-2 uppercase tracking-widest text-xs">
+                <Icon name="sparkles" size={16} className="text-primary" />
+                Describe Your Vibe
+              </h2>
+              <div className="flex items-center gap-3">
+                <button onClick={handleReset} className="text-[10px] uppercase font-bold text-red-500/60 hover:text-red-500 transition-colors">Reset</button>
+              </div>
+            </div>
+            <form onSubmit={handleLocalGenerate} className="flex gap-3">
+              <Input
+                placeholder='"Moody lavender sunset", "Clean Swiss medical", "Forest cabin"...'
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                className="flex-1"
+              />
+              <Button type="submit" className="w-32 gap-2">
+                <Icon name="sparkles" size={14} />
+                Generate
+              </Button>
+            </form>
+            {geminiKey && (
+              <div className="mt-2 flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={handleDeepAiGenerate}
+                  disabled={loading || !prompt.trim()}
+                  className="text-[10px] uppercase font-bold text-primary/60 hover:text-primary transition-colors disabled:opacity-30"
+                >
+                  {loading ? '⏳ Generating...' : '🧠 Deep AI (Gemini)'}
+                </button>
+                <button onClick={() => setShowKeyInput(!showKeyInput)} className="text-[10px] uppercase font-bold opacity-30 hover:opacity-60 transition-opacity">
+                  API Key
+                </button>
+              </div>
+            )}
+            {!geminiKey && (
+              <button onClick={() => setShowKeyInput(!showKeyInput)} className="mt-2 text-[10px] uppercase font-bold opacity-30 hover:opacity-60 transition-opacity">
+                + Add Gemini API Key for Deep AI
+              </button>
+            )}
+          </Card>
+
+          <Card
+            className="p-5 flex flex-col justify-center items-center cursor-pointer border-dashed border-2 hover:border-primary/40 hover:bg-muted/30 transition-all active:scale-[0.97]"
+            onClick={handleShuffle}
+          >
+            <Icon name="shuffle" size={28} className="mb-2 text-primary" />
+            <h3 className="font-bold text-sm">Shuffle</h3>
+            <p className="text-[10px] opacity-50 italic">Random aesthetic</p>
+          </Card>
+        </div>
+
+        {/* Gemini Key Input (collapsible) */}
         {showKeyInput && (
-            <Card className="p-4 border-[rgb(var(--app-primary-color))]/50 bg-[rgb(var(--app-primary-color))]/5 animate-in fade-in slide-in-from-top-2">
-                <div className="flex flex-col md:flex-row items-center gap-4">
-                    <div className="flex-1 w-full">
-                        <Label className="text-[10px] font-bold uppercase mb-2 block text-[rgb(var(--app-primary-color))]">
-                           Secure Vault: Gemini API Key
-                        </Label>
-                        <Input 
-                            type="password"
-                            placeholder="Paste Gemini API Key..."
-                            value={geminiKey}
-                            onChange={(e) => setGeminiKey(e.target.value)}
-                            className="bg-[rgb(var(--app-card-bg-color))] border-[rgb(var(--app-border-color))] focus:border-[rgb(var(--app-primary-color))]"
-                        />
-                    </div>
-                    <Button onClick={handleSaveKey} className="bg-[rgb(var(--app-primary-color))] text-[rgb(var(--app-primary-foreground-color))] w-full md:w-auto">
-                        Save to Vault
-                    </Button>
-                </div>
-            </Card>
+          <Card className="p-4 border-primary/30 bg-primary/5 animate-in fade-in slide-in-from-top-2">
+            <div className="flex flex-col md:flex-row items-center gap-3">
+              <div className="flex-1 w-full">
+                <Label className="text-[10px] font-bold uppercase mb-1.5 block text-primary">Gemini API Key</Label>
+                <Input type="password" placeholder="Paste key..." value={geminiKey} onChange={(e) => setGeminiKey(e.target.value)} />
+              </div>
+              <Button onClick={handleSaveKey} size="sm">Save</Button>
+            </div>
+          </Card>
         )}
 
-        {/* CONTROLS */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <Card className="p-6 lg:col-span-2 border-2 border-[rgb(var(--app-primary-color))]/20 bg-gradient-to-br from-[rgb(var(--app-bg-color))] to-[rgb(var(--app-muted-bg))]/30">
-                <div className="flex items-center justify-between mb-4">
-                    <h2 className="font-bold text-[rgb(var(--app-text-color))] flex items-center gap-2 uppercase tracking-widest text-sm">
-                        <Icon name="bot" size={18} className="text-[rgb(var(--app-primary-color))]" />
-                        Vibe Coding
-                    </h2>
-                    <div className="flex gap-4">
-                      <button onClick={handleReset} className="text-[10px] uppercase font-bold text-red-500 opacity-60 hover:opacity-100">Reset</button>
-                      {!showKeyInput && (
-                          <button onClick={() => setShowKeyInput(true)} className="text-[10px] uppercase font-bold text-[rgb(var(--app-primary-color))] opacity-60 hover:opacity-100">Update Key</button>
-                      )}
-                    </div>
-                </div>
-                <form onSubmit={handleAiGenerate} className="flex gap-3">
-                    <Input 
-                        placeholder='e.g., "Cyberpunk Neon", "Soft Matcha", "Deep Space"' 
-                        value={prompt}
-                        onChange={(e) => setPrompt(e.target.value)}
-                        className="flex-1"
-                    />
-                    <Button type="submit" disabled={loading || !geminiKey} className="w-28 bg-[rgb(var(--app-primary-color))] text-[rgb(var(--app-primary-foreground-color))]">
-                        {loading ? <Icon name="loader" className="animate-spin"/> : 'Generate'}
-                    </Button>
-                </form>
-            </Card>
-
-            <Card className="p-6 flex flex-col justify-center items-center cursor-pointer border-dashed border-2 hover:bg-[rgb(var(--app-muted-bg))]/50 transition-all active:scale-95" onClick={handleRandomize}>
-                <Icon name="shuffle" className="mb-2" />
-                <h3 className="font-bold text-sm">Instant Randomizer</h3>
-                <p className="text-[10px] opacity-60 italic">Roll the RGB dice</p>
-            </Card>
+        {/* ── ROW 2: AESTHETIC PROFILES ────────────────────────────────── */}
+        <div>
+          <h3 className="text-[10px] font-bold uppercase tracking-widest opacity-40 mb-3">Aesthetic Profiles</h3>
+          <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
+            {AESTHETIC_PROFILES.map((profile) => (
+              <button
+                key={profile.id}
+                onClick={() => handleProfileGenerate(profile.id)}
+                className={`group p-4 rounded-xl border-2 transition-all duration-300 text-left hover:scale-[1.03] active:scale-[0.97] ${
+                  generatedTheme?.profileId === profile.id
+                    ? 'border-primary bg-primary/10 shadow-lg shadow-primary/10'
+                    : 'border-border hover:border-primary/30 bg-card'
+                }`}
+              >
+                <Icon
+                  name={(PROFILE_ICONS[profile.id] || 'palette') as any}
+                  size={20}
+                  className={`mb-2 transition-colors ${
+                    generatedTheme?.profileId === profile.id ? 'text-primary' : 'opacity-40 group-hover:opacity-80'
+                  }`}
+                />
+                <div className="font-bold text-xs">{profile.name}</div>
+                <div className="text-[9px] opacity-40 mt-0.5 leading-tight">{profile.description.slice(0, 40)}...</div>
+              </button>
+            ))}
+          </div>
         </div>
 
-        {/* VISUALIZER & THEME INFO */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <Card className="p-6 md:col-span-2">
-              <div className="flex justify-between items-end mb-6">
-    <h3 className="font-bold flex items-center gap-2 text-xs uppercase opacity-60 tracking-tighter">
-        <Icon name="palette" size={14}/> Active Palette DNA
-    </h3>
-    <div className="flex gap-2">
-        <Button 
-            variant="ghost" 
-            size="sm" 
-            onClick={handleShare} 
-            className="h-8 text-[10px] uppercase border border-[rgb(var(--app-border-color))]"
-        >
-            <Icon name="copy" size={12} className="mr-2" /> Share JSON
-        </Button>
-        <Button 
-            variant="ghost" 
-            size="sm" 
-            onClick={handleDownloadCSS} 
-            className="h-8 text-[10px] uppercase border border-[rgb(var(--app-primary-color))]/30 text-[rgb(var(--app-primary-color))] hover:bg-[rgb(var(--app-primary-color))] hover:text-white"
-        >
-            <Icon name="download" size={12} className="mr-2" /> Download .css
-        </Button>
-    </div>
-</div>
-              
-              <div className="grid grid-cols-2 md:grid-cols-6 gap-4">
-                  {[
-                      { label: 'bg-color', var: '--app-bg-color' },
-                      { label: 'text-color', var: '--app-text-color' },
-                      { label: 'primary', var: '--app-primary-color' },
-                      { label: 'card-bg', var: '--app-card-bg-color' },
-                      { label: 'muted', var: '--app-muted-bg' },
-                      { label: 'border', var: '--app-border-color' },
-                  ].map((token) => (
-                      <div key={token.var} className="space-y-2">
-                          <div className="h-12 w-full rounded-md border shadow-sm transition-all duration-700" style={{ backgroundColor: `rgb(var(${token.var}))` }} />
-                          <div className="text-[10px] font-mono opacity-60 truncate">{token.label}</div>
-                      </div>
-                  ))}
+        {/* ── ROW 3: DARK MODE TOGGLE + SWATCHES ──────────────────────── */}
+        {generatedTheme && activePalette && (
+          <Card className="p-6 space-y-6">
+            <div className="flex items-center justify-between">
+              <h3 className="font-bold flex items-center gap-2 text-sm">
+                <Icon name="palette" size={16} className="text-primary" />
+                {generatedTheme.name}
+              </h3>
+              <div className="flex items-center gap-4">
+                <button onClick={handleCopyVars} className="text-[10px] uppercase font-bold opacity-40 hover:opacity-80 transition-opacity flex items-center gap-1">
+                  <Icon name="copy" size={12} /> Copy CSS
+                </button>
+                <button
+                  onClick={handleToggleDark}
+                  className="flex items-center gap-2 px-4 py-2 rounded-full border-2 border-border hover:border-primary/40 transition-all bg-card"
+                >
+                  <Icon name={isDarkMode ? 'moon' : 'sun'} size={16} className="text-primary" />
+                  <span className="text-xs font-bold uppercase tracking-wider">{isDarkMode ? 'Dark' : 'Light'}</span>
+                </button>
               </div>
-          </Card>
+            </div>
 
-          <Card className="p-6 border-[rgb(var(--app-primary-color))]/30">
-            <h3 className="text-[10px] font-bold uppercase opacity-60 mb-4 tracking-widest">Model Analysis</h3>
-            <div className="space-y-4">
-              <div>
-                <Label className="text-[10px] opacity-40">Theme Name</Label>
-                <p className="text-sm font-bold text-[rgb(var(--app-primary-color))]">{currentTheme?.name || 'Standard'}</p>
+            <p className="text-xs italic opacity-50">{generatedTheme.description}</p>
+
+            {/* Font Pair */}
+            {generatedTheme.fonts && (
+              <div className="flex items-center gap-6 py-2 px-3 rounded-lg bg-muted/30 border border-border/50">
+                <div className="flex items-center gap-2">
+                  <Icon name="type" size={14} className="opacity-40" />
+                  <span className="text-[10px] uppercase font-bold tracking-widest opacity-40">Heading</span>
+                  <span className="text-xs font-bold" style={{ fontFamily: `'${generatedTheme.fonts.heading}', sans-serif` }}>{generatedTheme.fonts.heading}</span>
+                </div>
+                <div className="h-4 w-px bg-border" />
+                <div className="flex items-center gap-2">
+                  <span className="text-[10px] uppercase font-bold tracking-widest opacity-40">Body</span>
+                  <span className="text-xs font-medium" style={{ fontFamily: `'${generatedTheme.fonts.body}', sans-serif` }}>{generatedTheme.fonts.body}</span>
+                </div>
               </div>
+            )}
+
+            {/* Active Palette Swatches */}
+            <PaletteSwatch palette={activePalette} label={isDarkMode ? 'Dark' : 'Light'} />
+
+            {/* Both palettes side-by-side preview */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-border/50">
               <div>
-                <Label className="text-[10px] opacity-40">Typography Pair</Label>
-                <p className="text-xs font-medium">H: {currentTheme?.fonts?.heading || 'Default'}</p>
-                <p className="text-xs font-medium">B: {currentTheme?.fonts?.body || 'Default'}</p>
+                <h4 className="text-[10px] font-bold uppercase tracking-widest opacity-40 mb-3">Light Preview</h4>
+                <div
+                  className="p-4 rounded-xl border transition-all duration-500"
+                  style={{ backgroundColor: hslToCssString(generatedTheme.light.background), color: hslToCssString(generatedTheme.light.foreground), borderColor: hslToCssString(generatedTheme.light.border) }}
+                >
+                  <div className="flex items-center gap-2 mb-3">
+                    <div className="h-3 w-3 rounded-full" style={{ backgroundColor: hslToCssString(generatedTheme.light.primary) }} />
+                    <span className="text-xs font-bold">Primary Button</span>
+                  </div>
+                  <div className="h-8 rounded-md mb-2 transition-all duration-500" style={{ backgroundColor: hslToCssString(generatedTheme.light.card), borderColor: hslToCssString(generatedTheme.light.border), borderWidth: 1 }} />
+                  <div className="flex gap-2">
+                    <div className="h-4 flex-1 rounded transition-all duration-500" style={{ backgroundColor: hslToCssString(generatedTheme.light.muted) }} />
+                    <div className="h-4 w-12 rounded transition-all duration-500" style={{ backgroundColor: hslToCssString(generatedTheme.light.accent) }} />
+                  </div>
+                </div>
               </div>
               <div>
-                <Label className="text-[10px] opacity-40">Aesthetic Meta</Label>
-                <p className="text-[11px] leading-relaxed italic opacity-80">{currentTheme?.description || 'The default system appearance.'}</p>
+                <h4 className="text-[10px] font-bold uppercase tracking-widest opacity-40 mb-3">Dark Preview</h4>
+                <div
+                  className="p-4 rounded-xl border transition-all duration-500"
+                  style={{ backgroundColor: hslToCssString(generatedTheme.dark.background), color: hslToCssString(generatedTheme.dark.foreground), borderColor: hslToCssString(generatedTheme.dark.border) }}
+                >
+                  <div className="flex items-center gap-2 mb-3">
+                    <div className="h-3 w-3 rounded-full" style={{ backgroundColor: hslToCssString(generatedTheme.dark.primary) }} />
+                    <span className="text-xs font-bold">Primary Button</span>
+                  </div>
+                  <div className="h-8 rounded-md mb-2 transition-all duration-500" style={{ backgroundColor: hslToCssString(generatedTheme.dark.card), borderColor: hslToCssString(generatedTheme.dark.border), borderWidth: 1 }} />
+                  <div className="flex gap-2">
+                    <div className="h-4 flex-1 rounded transition-all duration-500" style={{ backgroundColor: hslToCssString(generatedTheme.dark.muted) }} />
+                    <div className="h-4 w-12 rounded transition-all duration-500" style={{ backgroundColor: hslToCssString(generatedTheme.dark.accent) }} />
+                  </div>
+                </div>
               </div>
             </div>
           </Card>
-        </div>
-
-        {/* INTEGRATION DOCS */}
-        <div className="pt-8 border-t border-[rgb(var(--app-border-color))]">
-            <h2 className="text-2xl font-bold mb-6 flex items-center gap-2 tracking-tighter">
-                <Icon name="terminal" /> Developer Handover
-            </h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                <div className="space-y-3">
-                    <h3 className="font-bold text-sm uppercase text-[rgb(var(--app-primary-color))] tracking-widest">Recharts Adapter</h3>
-                    <div className="bg-black/90 p-4 rounded-lg border border-white/10 font-mono text-[11px] text-green-400">
-                      {`<Line stroke="rgb(var(--app-chart-1))" />`}
-                    </div>
-                </div>
-                <div className="space-y-3">
-                    <h3 className="font-bold text-sm uppercase text-[rgb(var(--app-primary-color))] tracking-widest">Typography Engine</h3>
-                    <div className="bg-black/90 p-4 rounded-lg border border-white/10 font-mono text-[11px] text-blue-400">
-                      {`body { font-family: '${currentTheme?.fonts?.body || 'Inter'}'; }`}
-                    </div>
-                </div>
-            </div>
-        </div>
+        )}
 
-        {/* RAW VARIABLES MANIFEST */}
-        <Card className="p-0 overflow-hidden border-2 border-[rgb(var(--app-primary-color))]/10">
-            <div className="bg-[rgb(var(--app-muted-bg))]/50 p-4 border-b border-[rgb(var(--app-border-color))] flex justify-between items-center">
-                <div className="flex items-center gap-2">
-                    <Icon name="code" size={16} className="text-[rgb(var(--app-primary-color))]" />
-                    <h3 className="font-bold text-xs uppercase tracking-widest">CSS Variables Manifest</h3>
-                </div>
-                <Button 
-                    variant="ghost" 
-                    size="sm" 
-                    className="h-7 text-[10px] hover:bg-[rgb(var(--app-primary-color))] hover:text-[rgb(var(--app-primary-foreground-color))]"
-                    onClick={() => {
-                        const cssString = Object.entries(currentTheme?.cssVars || {})
-                            .map(([key, val]) => `${key}: ${val};`)
-                            .join('\n');
-                        navigator.clipboard.writeText(cssString);
-                        alert("Manifest copied!");
-                    }}
-                >
-                    Copy All
-                </Button>
+        {/* ── ROW 4: CSS MANIFEST ─────────────────────────────────────── */}
+        {activePalette && (
+          <Card className="p-0 overflow-hidden border-2 border-primary/10">
+            <div className="bg-muted/30 p-4 border-b border-border flex justify-between items-center">
+              <div className="flex items-center gap-2">
+                <Icon name="code" size={16} className="text-primary" />
+                <h3 className="font-bold text-xs uppercase tracking-widest">CSS Variables</h3>
+              </div>
+              <Button variant="ghost" size="sm" className="h-7 text-[10px]" onClick={handleCopyVars}>Copy All</Button>
             </div>
-            <div className="p-4 bg-black/5 font-mono text-[11px] max-h-[300px] overflow-y-auto custom-scrollbar">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-1">
-                    {currentTheme && Object.entries(currentTheme.cssVars).map(([key, value]) => (
-                        <div key={key} className="flex justify-between py-1 border-b border-black/5 last:border-0 group">
-                            <span className="text-[rgb(var(--app-primary-color))] opacity-70 group-hover:opacity-100">{key}</span>
-                            <span className="font-bold opacity-80">{value}</span>
-                        </div>
-                    ))}
-                    {!currentTheme && (
-                        <p className="text-muted-foreground italic">No active DNA detected. Generate a vibe to see manifest.</p>
-                    )}
-                </div>
+            <div className="p-4 bg-black/5 font-mono text-[11px] max-h-[260px] overflow-y-auto">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-1">
+                {Object.entries(paletteToRgbVars(activePalette)).map(([key, value]) => (
+                  <div key={key} className="flex justify-between py-1 border-b border-black/5 last:border-0 group">
+                    <span className="text-primary/70 group-hover:text-primary transition-colors">{key}</span>
+                    <span className="font-bold opacity-80">{value}</span>
+                  </div>
+                ))}
+              </div>
             </div>
-        </Card>
-
-        {/* CSS for the custom scrollbar in this block */}
-        <style dangerouslySetInnerHTML={{ __html: `
-            .custom-scrollbar::-webkit-scrollbar { width: 4px; }
-            .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
-            .custom-scrollbar::-webkit-scrollbar-thumb { background: rgb(var(--app-primary-color), 0.2); border-radius: 10px; }
-            .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgb(var(--app-primary-color), 0.5); }
-        `}} />
+          </Card>
+        )}
 
       </div>
     </StandardPageLayout>