firebase-os 1.1.4 → 1.1.6

package/src/pages/ThemeAdmin.tsx

@@ -0,0 +1,1000 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Save, Loader2, RotateCcw, Copy, Clipboard, Check } from 'lucide-react';
+import { db } from '../lib/firebase';
+import { doc, setDoc } from 'firebase/firestore';
+import { Link } from 'react-router-dom';
+import { DashboardNav } from '../components/DashboardNav';
+import { Button } from '../components/Button';
+import { useTheme } from '../lib/ThemeContext';
+
+const explanations: Record<string, string> = {
+  appName: "The main name of your application shown in headers and titles.",
+  defaultTheme: "Choose how the app starts immediately on load.",
+  showThemeToggle: "Allow users to manually toggle dark mode on/off.",
+  logoUrl: "Direct URL to your app's main logo. Need to upload one?",
+  faviconUrl: "Direct URL to your app's favicon. Need to upload one?",
+  background: "Main background canvas color under all content.",
+  foreground: "Primary typography color used across the app.",
+  accent: "The primary brand color for highlights, buttons, and links.",
+  panelBg: "Background color of glass cards and panels.",
+  panelBorder: "Borders of panels, inputs, and dropdowns.",
+  glowColor: "The global glow shadow applied to borders of focused inputs.",
+  buttonHoverGradient: "Start and end hex for primary button hover effects.",
+  textGradient: "Three tone gradient applied to large headers.",
+  buttonRadius: "Border radius for standard buttons.",
+  cardRadius: "Curvature of main content panels.",
+  inputRadius: "Rounding applied to form inputs.",
+  modalRadius: "Global popup containers and dashboard content cards.",
+  blurIntensity: "Glassmorphism backdrop-blur amounts.",
+  notificationIconColor: "Color applied to notification badging.",
+  
+  fontFamily: "Choose the main typography of your brand.",
+  
+  home: "Complete customization of the landing page settings.",
+  title: "Main heading displayed on the Landing Page or Form.",
+  subtitle: "Smaller colored overline text above the main title.",
+  text: "The descriptive paragraph text under the hero headers or buttons.",
+  primary: "Main call-to-action block settings.",
+  secondary: "Secondary ghost button block settings.",
+  sections: "Toggle visibility of landing page sectors.",
+  contactForm: "Customize the form wrapper and its labels.",
+  nameLabel: "Placeholder/Label for the Name input.",
+  emailLabel: "Placeholder/Label for the Email input.",
+  messageLabel: "Placeholder/Label for the Message textarea.",
+  submitText: "Text for the form submit button.",
+  action: "Where the button routes the user.",
+  form: "Which public form to open. Note: Form submissions will securely map to the Submissions tab in your admin dashboard.",
+  url: "External http link or internal /route destination."
+};
+
+const colorPresets = [
+  { name: 'Purple Standard', preview: ['#2e1065', '#cdc1ff'], dark: { buttonText: '#ffffff', background: '#07070f', backgroundSecondary: '#0a0a18', accent: '#a78bfa', gradient: ['#6d28d9', '#a78bfa'], text: ['#f0eeff', '#c4b5fd', '#a78bfa'] }, light: { buttonText: '#ffffff', background: '#fcfaff', backgroundSecondary: '#f7f3ff', accent: '#7c3aed', gradient: ['#5b21b6', '#a78bfa'], text: ['#2e1065', '#6d28d9', '#cdc1ff'] } },
+  { name: 'Royal Navy', preview: ['#1e3a8a', '#60a5fa'], dark: { buttonText: '#ffffff', background: '#050b14', backgroundSecondary: '#0a192f', accent: '#60a5fa', gradient: ['#1d4ed8', '#60a5fa'], text: ['#dbeafe', '#93c5fd', '#60a5fa'] }, light: { buttonText: '#ffffff', background: '#f8fafc', backgroundSecondary: '#f1f5f9', accent: '#2563eb', gradient: ['#1e3a8a', '#60a5fa'], text: ['#1e3a8a', '#2563eb', '#60a5fa'] } },
+  { name: 'Emerald Green', preview: ['#064e3b', '#10b981'], dark: { buttonText: '#ffffff', background: '#050806', backgroundSecondary: '#0a2218', accent: '#34d399', gradient: ['#047857', '#34d399'], text: ['#d1fae5', '#6ee7b7', '#34d399'] }, light: { buttonText: '#ffffff', background: '#f6fbf8', backgroundSecondary: '#eff7f2', accent: '#059669', gradient: ['#064e3b', '#10b981'], text: ['#064e3b', '#059669', '#10b981'] } },
+  { name: 'Gold', preview: ['#854d0e', '#eab308'], dark: { buttonText: '#000000', background: '#0f0905', backgroundSecondary: '#1c1208', accent: '#fcd34d', gradient: ['#ca8a04', '#facc15'], text: ['#fefce8', '#fef08a', '#facc15'] }, light: { buttonText: '#ffffff', background: '#fbfaf6', backgroundSecondary: '#f5f2eb', accent: '#d97706', gradient: ['#854d0e', '#eab308'], text: ['#854d0e', '#ca8a04', '#eab308'] } },
+  { name: 'Silver', preview: ['#1e293b', '#94a3b8'], dark: { buttonText: '#ffffff', background: '#090e17', backgroundSecondary: '#101725', accent: '#cbd5e1', gradient: ['#475569', '#94a3b8'], text: ['#e2e8f0', '#94a3b8', '#cbd5e1'] }, light: { buttonText: '#ffffff', background: '#f8fafc', backgroundSecondary: '#e2e8f0', accent: '#64748b', gradient: ['#1e293b', '#94a3b8'], text: ['#1e293b', '#475569', '#94a3b8'] } },
+  { name: 'Barbie Pink', preview: ['#d946ef', '#f472b6'], dark: { buttonText: '#ffffff', background: '#0c030a', backgroundSecondary: '#1a0515', accent: '#ff80ff', gradient: ['#c026d3', '#f472b6'], text: ['#ffeeff', '#ffb3ff', '#ff80ff'] }, light: { buttonText: '#ffffff', background: '#fcf5fa', backgroundSecondary: '#f5ebf2', accent: '#d946ef', gradient: ['#c026d3', '#ec4899'], text: ['#a21caf', '#c026d3', '#ec4899'] } },
+  { name: 'Orange', preview: ['#7c2d12', '#f97316'], dark: { buttonText: '#ffffff', background: '#0a0200', backgroundSecondary: '#1c0b05', accent: '#fb923c', gradient: ['#c2410c', '#fb923c'], text: ['#fff7ed', '#fdba74', '#fb923c'] }, light: { buttonText: '#ffffff', background: '#fdf6f2', backgroundSecondary: '#f5ebe4', accent: '#ea580c', gradient: ['#7c2d12', '#f97316'], text: ['#7c2d12', '#ea580c', '#f97316'] } },
+  { name: 'Red', preview: ['#7f1d1d', '#ef4444'], dark: { buttonText: '#ffffff', background: '#0a0000', backgroundSecondary: '#2e0a0a', accent: '#ef4444', gradient: ['#b91c1c', '#f87171'], text: ['#fef2f2', '#fecaca', '#f87171'] }, light: { buttonText: '#ffffff', background: '#fdf5f5', backgroundSecondary: '#f5ebeb', accent: '#dc2626', gradient: ['#7f1d1d', '#ef4444'], text: ['#7f1d1d', '#dc2626', '#ef4444'] } },
+  { name: 'Black & White', preview: ['#ffffff', '#000000'], dark: { buttonText: '#000000', background: '#000000', backgroundSecondary: '#111111', accent: '#ffffff', gradient: ['#ffffff', '#e5e7eb'], text: ['#ffffff', '#f3f4f6', '#ffffff'] }, light: { buttonText: '#ffffff', background: '#ffffff', backgroundSecondary: '#f3f4f6', accent: '#000000', gradient: ['#000000', '#1f2937'], text: ['#000000', '#1f2937', '#374151'] } }
+];
+
+export let sharedEnums: Record<string, string[]> = {
+  defaultTheme: ['system', 'light', 'dark'],
+  cornerRounding: ['default', 'custom'],
+  action: ['sign_in', 'register', 'redirect', 'form'],
+  type: ['text', 'email', 'tel', 'textarea'],
+  form: ['contact'],
+  formType: ['public', 'private'],
+  submitPage: ['submissions', 'requests'],
+  fontFamily: ['Inter', 'Outfit', 'Roboto', 'Space Grotesk', 'Plus Jakarta Sans', 'System UI']
+};
+
+import { getDocs, collection } from 'firebase/firestore';
+if (db) {
+  getDocs(collection(db, 'sys_forms')).then(snap => {
+     const forms: string[] = [];
+     snap.forEach(d => {
+        if (d.data().formType !== 'private') forms.push(d.id);
+     });
+     if (forms.length > 0) Object.assign(sharedEnums, { form: forms });
+  }).catch(() => {});
+}
+
+export const AutoResizeInput = ({ value, onChange, onBlur, onFocus, className, isNumber, handleBlurOrEnter, placeholder, disabled }: any) => {
+  const [localVal, setLocalVal] = React.useState(value);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [inputWidth, setInputWidth] = React.useState(0);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const spanRef = React.useRef<HTMLSpanElement>(null);
+  
+  React.useEffect(() => { setLocalVal(value); }, [value]);
+
+  React.useLayoutEffect(() => {
+     if (spanRef.current) {
+        // Perfect hugging width.
+        setInputWidth(spanRef.current.getBoundingClientRect().width);
+     }
+  }, [localVal, placeholder]);
+
+  // If text or link is pasted into quotes, make sure to always scroll to the left
+  useEffect(() => {
+     if (!isFocused && inputRef.current) {
+         inputRef.current.scrollLeft = 0;
+     }
+  }, [localVal, isFocused]);
+
+  // Strip max-width from input and pass it to wrapper
+  const wrapperClassMatch = typeof className === 'string' ? className.match(/(?:max-w-\[[^\]]+\]|sm:max-w-\[[^\]]+\]|md:max-w-\[[^\]]+\])\s*/g) : null;
+  const wrapperClasses = wrapperClassMatch ? wrapperClassMatch.join(' ') : 'max-w-[200px] sm:max-w-[300px]';
+  const spanClass = typeof className === 'string' ? className.replace(/(?:max-w-\[[^\]]+\]|sm:max-w-\[[^\]]+\]|md:max-w-\[[^\]]+\]|text-ellipsis)\s*/g, '') : '';
+  const inputCleanClass = spanClass.trim();
+
+  return (
+    <div className={`relative inline-flex flex-col group/autoresize ${wrapperClasses}`}>
+      <div className="flex-1 overflow-x-auto overflow-y-hidden pb-[1px] styled-scrollbars-mini flex items-center">
+        <span 
+           ref={spanRef} 
+           className={`${spanClass} absolute opacity-0 pointer-events-none whitespace-pre border-none p-0 inline-block`}
+           style={{ width: 'max-content', minWidth: 'max-content' }}
+           aria-hidden="true"
+        >
+           {localVal || placeholder || (isNumber ? '0' : ' ')}
+        </span>
+        <input
+          disabled={disabled}
+          ref={inputRef}
+          type={isNumber ? "number" : "text"}
+          value={localVal}
+          placeholder={placeholder}
+          spellCheck={false}
+          className={`${inputCleanClass} transition-all duration-200 ${disabled ? 'cursor-not-allowed opacity-50 select-none' : ''} ${isFocused ? 'relative z-50 bg-background shadow-md' : ''}`}
+          onDoubleClick={(e) => { if (!disabled) e.currentTarget.select(); }}
+          onPaste={() => {
+             setTimeout(() => {
+                if (inputRef.current) inputRef.current.scrollLeft = 0;
+             }, 10);
+          }}
+          onChange={(e) => {
+             if (!disabled) setLocalVal(e.target.value);
+          }}
+          onKeyDown={(e) => {
+             if (disabled) return;
+             if (e.key === 'Enter') {
+                const finalVal = isNumber ? parseFloat(e.currentTarget.value) || 0 : e.currentTarget.value;
+                if (finalVal !== value) onChange(finalVal);
+                if (handleBlurOrEnter) handleBlurOrEnter(e);
+                e.currentTarget.blur();
+             }
+          }}
+          onBlur={(e) => {
+             if (disabled) return;
+             setIsFocused(false);
+             const finalVal = isNumber ? parseFloat(e.currentTarget.value) || 0 : e.currentTarget.value;
+             if (finalVal !== value) onChange(finalVal);
+             if (handleBlurOrEnter) handleBlurOrEnter(e);
+             if (onBlur) onBlur(e);
+             e.currentTarget.scrollLeft = 0;
+          }}
+          onFocus={(e) => {
+             if (disabled) return;
+             setIsFocused(true);
+             if (onFocus) onFocus(e);
+          }}
+          style={{ 
+             width: inputWidth > 0 ? `${inputWidth + 6}px` : 'auto', 
+             minWidth: '20px',
+             maxWidth: isFocused ? 'none' : undefined
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+import { themeConfig } from '../configs/theme.config';
+
+export const JsonNode = ({ objectKey, displayKey, value, onChange, depth = 0, isLast = false, keysToRender, isGlobalSaving, customExplanations, customEnums, disabledKeys = [], hideInnerLoader = false, meta = {} }: any) => {
+  const renderedKey = displayKey || objectKey;
+  const isObject = value !== null && typeof value === 'object' && !Array.isArray(value);
+  const isArray = Array.isArray(value);
+  const [showPicker, setShowPicker] = useState<number | boolean>(false);
+  const [isFolded, setIsFolded] = useState<boolean>(objectKey === 'colors' || objectKey === 'fields');
+  const [showLoader, setShowLoader] = useState(false);
+  const [urlError, setUrlError] = useState(false);
+  const focusValRef = React.useRef<string | null>(null);
+  const [pendingEnum, setPendingEnum] = React.useState<string | null>(null);
+  const enumRef = React.useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isGlobalSaving) {
+      setShowLoader(false);
+    }
+  }, [isGlobalSaving]);
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    focusValRef.current = e.currentTarget.value;
+  };
+
+  const handleBlurOrEnter = (e: React.KeyboardEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement>) => {
+    if ('key' in e && e.key === 'Enter') e.currentTarget.blur();
+    if (('type' in e && e.type === 'blur') || ('key' in e && e.key === 'Enter')) {
+       if (focusValRef.current !== null && focusValRef.current !== e.currentTarget.value) {
+          if (!hideInnerLoader) setShowLoader(true);
+       }
+       focusValRef.current = null;
+    }
+  };
+
+  React.useEffect(() => { setPendingEnum(null); }, [value]);
+
+  const explanation = customExplanations?.[objectKey] || explanations[objectKey as keyof typeof explanations];
+  const enumOptions = customEnums?.[objectKey] || sharedEnums[objectKey as keyof typeof sharedEnums];
+  const isFieldDisabled = Array.isArray(disabledKeys) && disabledKeys.includes(objectKey);
+
+  const renderWrapper = (children: React.ReactNode) => (
+    <div className="flex flex-col text-[14px] font-mono leading-relaxed my-0.5" style={{ marginLeft: depth > 0 ? 32 : 0 }}>
+       {explanation && (
+          <span className="text-foreground/40 text-[12px] font-mono italic select-none mt-2 mb-0.5 flex flex-wrap items-center gap-1">
+             {"// "}
+             {explanation.split(/(https?:\/\/[^\s,]+)/g).map((part: string, i: number) => {
+                 if (part.startsWith('http')) {
+                     return <a key={i} href={part} target="_blank" rel="noopener noreferrer" className="text-accent hover:text-accentDeep underline underline-offset-2 cursor-pointer transition-colors pointer-events-auto">{part}</a>;
+                 }
+                 return <span key={i}>{part}</span>;
+             })}
+             {(objectKey === 'logoUrl' || objectKey === 'faviconUrl') && (
+                <Link to="/drive/public" className="text-accent flex items-center gap-1 hover:text-accentDeep underline underline-offset-2 ml-1 cursor-pointer transition-colors">
+                  Open Drive / Public
+                </Link>
+             )}
+          </span>
+       )}
+       {children}
+    </div>
+  );
+
+  if (isObject) {
+    const keys = Object.keys(value);
+
+    let mappedKeys = keysToRender ? [...keysToRender] : keys;
+
+    mappedKeys = mappedKeys.filter(k => {
+        if (k === 'showThemeToggle' && value['defaultTheme'] !== 'system') return false;
+        if (k === 'cornerRadii' && value['cornerRounding'] !== 'custom') return false;
+        if (k === 'url' && 'action' in value && value['action'] !== 'redirect') return false;
+        if (k === 'form' && 'action' in value && value['action'] !== 'form') return false;
+        if (k === 'currencySymbol' && value['type'] !== 'currency') return false;
+        if (k === 'options' && value['type'] !== 'select') return false;
+        return true;
+    });
+
+    if (value['action'] === 'redirect' && !mappedKeys.includes('url') && value['showButton'] !== false) {
+        mappedKeys.push('url');
+    }
+    if (value['action'] === 'form' && !mappedKeys.includes('form') && value['showButton'] !== false) {
+        mappedKeys.push('form');
+    }
+    if (value['type'] === 'currency' && !mappedKeys.includes('currencySymbol')) {
+        mappedKeys.push('currencySymbol');
+    }
+    if (value['type'] === 'select' && !mappedKeys.includes('options')) {
+        mappedKeys.push('options');
+    }
+
+    return renderWrapper(
+       <div className="flex flex-col group/obj">
+          {objectKey ? (
+            <div className={`flex items-center gap-1 hover:bg-foreground/[0.04] rounded-lg pl-0.5 pr-2 py-0.5 -ml-[18px] w-fit transition-colors ${isFolded ? 'cursor-pointer' : ''}`} onClick={() => isFolded && setIsFolded(false)}>
+               <button onClick={(e) => { e.stopPropagation(); setIsFolded(!isFolded); }} className="text-foreground/30 hover:text-foreground/80 transition-colors w-4 flex items-center justify-center font-black text-[10px]" title={isFolded ? "Unfold" : "Fold"}>
+                 {isFolded ? '►' : '▼'}
+               </button>
+               <span className="text-accent font-extrabold">"{renderedKey}"</span><span className="text-foreground/50">:</span> <span className="text-foreground/70 font-bold">{isFolded ? '{...}' : '{'}</span>
+            </div>
+          ) : depth > 0 ? (
+             <div className="text-foreground/70 font-bold px-2">{'{'}</div>
+          ) : null}
+          {!isFolded && (
+             <div className={`flex flex-col ${depth > 0 ? 'border-l border-[var(--panel-border)]/30 ml-2 pl-1' : ''}`}>
+                {mappedKeys.map((k, idx, arr) => {
+                    if (k === 'subtitle' && value['showSubtitle'] === false) return null;
+                    if (k === 'url' && 'action' in value && value['action'] !== 'redirect') return null;
+                    if (k === 'form' && 'action' in value && value['action'] !== 'form') return null;
+
+                    return (
+                        <JsonNode 
+                          key={k} 
+                          objectKey={k} 
+                          value={value[k]} 
+                          onChange={(newVal: any) => {
+                             const newObj = { ...value, [k]: newVal };
+                             if (k === 'action' && newVal === 'form' && !newObj.form) newObj.form = 'contact';
+                             if (k === 'action' && newVal === 'redirect' && !newObj.url) newObj.url = '/';
+                             if (k === 'type' && newVal === 'currency' && !newObj.currencySymbol) newObj.currencySymbol = '$';
+                             if (k === 'type' && newVal === 'select' && !newObj.options) newObj.options = ['Option 1', 'Option 2'];
+                             onChange(newObj);
+                          }} 
+                          depth={depth + 1} 
+                          isLast={idx === arr.length - 1} 
+                          isGlobalSaving={isGlobalSaving}
+                          customExplanations={customExplanations}
+                          customEnums={customEnums}
+                          disabledKeys={disabledKeys}
+                          hideInnerLoader={hideInnerLoader}
+                          meta={meta}
+                        />
+                    );
+                })}
+             </div>
+          )}
+          {objectKey && !isFolded && <div className="px-2 mt-1"><span className="text-foreground/70 font-bold">{'}'}</span>{!isLast && <span className="text-foreground/50">,</span>}</div>}
+          {objectKey && isFolded && !isLast && <span className="text-foreground/50 -mt-1 ml-2">,</span>}
+       </div>
+    );
+  }
+
+  if (isArray) {
+    return renderWrapper(
+       <div className="flex flex-col group/arr">
+          {objectKey ? (
+            <div className={`flex items-center gap-1 hover:bg-foreground/[0.04] rounded-lg pl-0.5 pr-2 py-0.5 -ml-[18px] w-fit transition-colors ${isFolded ? 'cursor-pointer' : ''}`} onClick={() => isFolded && setIsFolded(false)}>
+               <button onClick={(e) => { e.stopPropagation(); setIsFolded(!isFolded); }} className="text-foreground/30 hover:text-foreground/80 transition-colors w-4 flex items-center justify-center font-black text-[10px]" title={isFolded ? "Unfold" : "Fold"}>
+                 {isFolded ? '►' : '▼'}
+               </button>
+               <span className="text-accent font-extrabold">"{renderedKey}"</span><span className="text-foreground/50">:</span> <span className="text-foreground/70 font-bold">{isFolded ? '[...]' : '['}</span>
+            </div>
+          ) : (
+            <div className="flex items-center gap-1 group-hover/arr:bg-foreground/[0.02] rounded-lg px-2 py-0.5 -ml-2 w-fit transition-colors">
+               <span className="text-foreground/70 font-bold">{'['}</span>
+            </div>
+          )}
+          {!isFolded && (
+             <div className="flex flex-col border-l border-[var(--panel-border)]/30 ml-2 mt-1 pl-1" style={{ marginLeft: 32 }}>
+            {value.map((item: any, i: number) => {
+              if (item !== null && typeof item === 'object') {
+                 return (
+                    <div key={i} className="pl-2 border-l border-[var(--panel-border)]/20 mt-1 mb-1 relative group/arr-item">
+                       <button onClick={() => { const arr = [...value]; arr.splice(i, 1); onChange(arr); }} className="absolute -left-[11px] top-1.5 w-5 h-5 bg-background border border-[var(--panel-border)] text-red-500 hover:bg-red-500/10 rounded flex items-center justify-center opacity-0 group-hover/arr-item:opacity-100 transition-all font-bold text-[14px] leading-none z-20" title="Remove Item">
+                         ×
+                       </button>
+                       <JsonNode 
+                         value={item} 
+                         onChange={(newVal: any) => {
+                            const arr = [...value];
+                            arr[i] = newVal;
+                            onChange(arr);
+                         }} 
+                         depth={depth + 1} 
+                         isLast={i === value.length - 1} 
+                         isGlobalSaving={isGlobalSaving}
+                         customExplanations={customExplanations}
+                         customEnums={customEnums}
+                         disabledKeys={disabledKeys}
+                       />
+                    </div>
+                 );
+              }
+
+              const isColorString = typeof item === 'string' && (item.startsWith('#') || item.startsWith('rgba') || item.startsWith('rgb'));
+              return (
+                <div key={i} className="flex items-center gap-1 group/item w-fit relative z-10 my-0.5">
+                   <button onClick={() => { const arr = [...value]; arr.splice(i, 1); onChange(arr); }} className="absolute -left-6 top-1/2 -translate-y-1/2 w-4 h-4 text-red-500 hover:bg-red-500/10 rounded flex items-center justify-center opacity-0 group-hover/item:opacity-100 transition-all font-bold text-[14px] leading-none" title="Remove Item">
+                     ×
+                   </button>
+                   <span className="text-foreground/40 text-[11px] w-4 select-none font-bold">{i}:</span>
+                   <span className="text-foreground/40 shrink-0">"</span>
+                   {isColorString && (
+                     <div className="relative w-5 h-5 rounded-full overflow-hidden border border-[var(--panel-border)] shrink-0 mx-1 group/item hover:border-accent transition-colors bg-[var(--background)]">
+                        <input 
+                          type="color" 
+                          value={item.length === 7 && item.startsWith('#') ? item : '#000000'} 
+                          onChange={(e) => {
+                             const arr = [...value];
+                             arr[i] = e.target.value;
+                             onChange(arr);
+                          }} 
+                          className="absolute -inset-8 w-24 h-24 cursor-pointer opacity-0" 
+                        />
+                        <div className="absolute inset-0 pointer-events-none transition-transform group-hover/item:scale-110" style={{ backgroundColor: item }} />
+                     </div>
+                   )}
+                   <AutoResizeInput
+                     value={item}
+                     isNumber={typeof item === 'number'}
+                     onChange={(newVal: any) => {
+                       const arr = [...value];
+                       arr[i] = newVal;
+                       onChange(arr);
+                     }}
+                     onFocus={handleFocus}
+                     handleBlurOrEnter={handleBlurOrEnter}
+                     className="no-glow bg-transparent text-foreground font-bold outline-none focus:outline-none focus:ring-0 p-0 m-0 transition-colors max-w-[200px] sm:max-w-[300px] text-ellipsis placeholder:text-foreground/20"
+                   />
+                   <span className="text-foreground/40 shrink-0">"</span>
+                   <span className="text-foreground/50 shrink-0">{i < value.length - 1 ? ',' : ''}</span>
+                   {showLoader && <Loader2 className="w-3 h-3 animate-spin text-foreground/40 shrink-0" />}
+                </div>
+              );
+            })}
+            
+            {(!(value.length > 0 && typeof value[0] === 'string' && (value[0].startsWith('#') || value[0].startsWith('rgba') || value[0].startsWith('color-mix'))) || value.length < 6) && (
+            <button 
+              onClick={() => {
+                const arr = [...value];
+                let clone: any = '';
+                if (objectKey === 'fields') {
+                    const existingNames = arr.map(f => f.name);
+                    
+                    if (meta?.formType === 'private') {
+                        if (!existingNames.includes('issue_type')) {
+                            clone = { type: 'select', name: 'issue_type', label: 'Issue Type', required: true, options: ['Bug Report', 'Feature Request', 'Billing', 'General Question'] };
+                        } else if (!existingNames.includes('urgency')) {
+                            clone = { type: 'select', name: 'urgency', label: 'Urgency Level', required: true, options: ['Low', 'Medium', 'High', 'Critical'] };
+                        } else if (!existingNames.includes('description')) {
+                            clone = { type: 'textarea', name: 'description', label: 'Description', required: true, placeholder: 'Please provide detailed information...' };
+                        } else if (!existingNames.includes('device')) {
+                            clone = { type: 'text', name: 'device', label: 'Device / OS', required: false, placeholder: 'e.g., iPhone 15, Windows 11' };
+                        } else if (!existingNames.includes('subscribe')) {
+                            clone = { type: 'checkbox', name: 'subscribe', label: 'Receive status updates via email', required: false };
+                        } else {
+                            clone = { type: 'text', name: `custom_field_${arr.length}`, label: 'Custom Field', required: false, placeholder: '' };
+                        }
+                    } else {
+                        if (!existingNames.includes('name')) {
+                            clone = { type: 'text', name: 'name', label: 'Full Name', required: true, placeholder: 'Enter your name' };
+                        } else if (!existingNames.includes('email')) {
+                            clone = { type: 'email', name: 'email', label: 'Email Address', required: true, placeholder: 'you@example.com' };
+                        } else if (!existingNames.includes('phone')) {
+                            clone = { type: 'tel', name: 'phone', label: 'Phone Number', required: false, placeholder: '+1 (555) 000-0000' };
+                        } else if (!existingNames.includes('questions')) {
+                            clone = { type: 'textarea', name: 'questions', label: 'Questions', required: false, placeholder: 'How can we help you?' };
+                        } else if (!existingNames.includes('budget')) {
+                            clone = { type: 'currency', name: 'budget', label: 'Budget', required: false, placeholder: 'e.g. 5000', currencySymbol: '$' };
+                        } else if (!existingNames.includes('service_type')) {
+                            clone = { type: 'select', name: 'service_type', label: 'Service Interested In', required: false, options: ['Consulting', 'Development', 'Design'] };
+                        } else if (!existingNames.includes('subscribe')) {
+                            clone = { type: 'checkbox', name: 'subscribe', label: 'Subscribe to newsletter', required: false };
+                        } else if (!existingNames.includes('age')) {
+                            clone = { type: 'age', name: 'age', label: 'Age', required: false, placeholder: 'e.g. 25' };
+                        } else {
+                            clone = { type: 'text', name: `custom_field_${arr.length}`, label: 'Custom Field', required: false, placeholder: '' };
+                        }
+                    }
+                } else if (typeof arr[0] === 'string') {
+                    const genericServices = ['Marketing', 'Support', 'Analysis', 'Strategy', 'Maintenance'];
+                    clone = genericServices[Math.min(arr.length, genericServices.length) - 1] || `Option ${arr.length + 1}`;
+                } else {
+                   clone = arr.length > 0 ? JSON.parse(JSON.stringify(arr[arr.length - 1])) : '';
+                   if (clone && typeof clone === 'object') {
+                     if (clone.name) clone.name = `${clone.name}_${arr.length}`;
+                     if (clone.label) clone.label = `${clone.label} ${arr.length}`;
+                   }
+                }
+                arr.push(clone);
+                onChange(arr);
+              }}
+              className="mt-2 mb-1 w-fit flex items-center gap-1.5 px-3 py-1 bg-accent/10 hover:bg-accent/20 text-accent font-extrabold text-[11px] uppercase tracking-wider rounded-md transition-colors border border-accent/20"
+            >
+              + Add Item
+            </button>
+            )}
+           </div>
+           )}
+           {objectKey && !isFolded && <div className="px-2 mt-1"><span className="text-foreground/70 font-bold">{']'}</span>{!isLast && <span className="text-foreground/50">,</span>}</div>}
+           {!objectKey && <div className="px-2 mt-1"><span className="text-foreground/70 font-bold">{']'}</span>{!isLast && <span className="text-foreground/50">,</span>}</div>}
+           {objectKey && isFolded && !isLast && <span className="text-foreground/50 -mt-1 ml-2">,</span>}
+        </div>
+     );
+   }
+
+  if (typeof value === 'boolean') {
+    return renderWrapper(
+       <div className="flex items-center gap-1 group w-fit relative z-10 my-0.5">
+          <span className="text-accent font-extrabold shrink-0">"{renderedKey}"</span><span className="text-foreground/50 shrink-0">:</span>
+          <button 
+             disabled={isFieldDisabled || showLoader}
+             onClick={() => {
+               if (!hideInnerLoader) setShowLoader(true);
+               onChange(!value);
+             }}
+             className={`px-3 py-1 rounded-md text-[12px] font-extrabold transition-colors ml-1 uppercase tracking-wider ${value ? 'bg-emerald-500/20 text-emerald-500' : 'bg-red-500/20 text-red-500'} ${(isFieldDisabled || showLoader) ? 'opacity-50 cursor-not-allowed' : 'hover:scale-[1.02] active:scale-[0.98]'}`}
+          >
+             {value ? 'true' : 'false'}
+          </button>
+          {showLoader && <Loader2 className="w-3 h-3 animate-spin text-foreground/40 ml-1" />}
+          {!isLast && <span className="text-foreground/50">,</span>}
+       </div>
+    );
+  }
+
+  const isColorString = typeof value === 'string' && (value.startsWith('#') || value.startsWith('rgba') || value.startsWith('rgb'));
+
+  const isUrl = typeof value === 'string' && objectKey && String(objectKey).endsWith('Url');
+
+  return renderWrapper(
+    <div className={`flex items-center gap-1 group relative z-10 my-0.5 ${isUrl ? 'w-full pr-0 sm:pr-8' : 'w-fit'}`}>
+       <span className="text-accent font-extrabold shrink-0">"{renderedKey}"</span><span className="text-foreground/50 shrink-0">:</span>
+       
+       {enumOptions ? (
+          <div className="flex items-center gap-1 ml-1 relative group/enum" ref={enumRef}>
+             <span className="text-foreground/40">"</span>
+             <button
+               disabled={isFieldDisabled || showLoader}
+               title={isFieldDisabled ? "Cannot be edited" : "Click to cycle options"}
+               tabIndex={0}
+               onClick={() => {
+                  if (isFieldDisabled) return;
+                  const currentVal = pendingEnum !== null ? pendingEnum : value;
+                  const currentIndex = enumOptions.indexOf(currentVal);
+                  const nextVal = enumOptions[(currentIndex + 1) % enumOptions.length];
+                  setPendingEnum(nextVal);
+                  if (!hideInnerLoader) setShowLoader(true);
+                  onChange(nextVal);
+               }}
+               className={`${
+                 (isFieldDisabled || showLoader)
+                   ? 'bg-foreground/5 text-foreground/40 cursor-not-allowed opacity-50'
+                   : 'bg-accent/10 hover:bg-accent/20 text-accent cursor-pointer shadow-sm hover:scale-[1.02] active:scale-[0.98]'
+               } outline-none px-3 py-1 rounded-md transition-all font-extrabold uppercase tracking-wider text-[11px] border border-transparent`}
+             >
+               {pendingEnum !== null ? pendingEnum : value}
+             </button>
+             {showLoader && <Loader2 className="w-3 h-3 animate-spin text-foreground/40 ml-1" />}
+             <span className="text-foreground/40">"</span>
+          </div>
+       ) : (
+          <div className="flex items-center gap-0.5 ml-1 flex-1 min-w-0">
+             <span className="text-foreground/40 shrink-0">"</span>
+             
+             {isColorString && (
+               <div className="relative w-5 h-5 rounded-full overflow-hidden border border-[var(--panel-border)] shrink-0 mx-1 group/item hover:border-accent transition-colors bg-[var(--background)]">
+                  <input 
+                    type="color" 
+                    value={value.length === 7 && value.startsWith('#') ? value : '#000000'} 
+                    onFocus={handleFocus}
+                    onBlur={(e) => {
+                      onChange(e.target.value);
+                      focusValRef.current = null;
+                    }}
+                    onChange={(e) => onChange(e.target.value)} 
+                    className="absolute -inset-8 w-24 h-24 cursor-pointer opacity-0" 
+                  />
+                  <div className="absolute inset-0 pointer-events-none transition-transform group-hover/item:scale-110" style={{ backgroundColor: value }} />
+               </div>
+             )}
+
+             <AutoResizeInput 
+                disabled={isFieldDisabled}
+                value={value}
+                isNumber={typeof value === 'number'}
+                placeholder={isUrl ? "https://..." : undefined}
+                className={`no-glow bg-transparent font-extrabold outline-none focus:outline-none focus:ring-0 p-0 m-0 transition-colors leading-none ${isUrl ? "text-accent/80 font-medium placeholder:text-accent/30" : "text-foreground"} ${isFieldDisabled ? 'opacity-50 grayscale pointer-events-none' : ''}`}
+                onFocus={handleFocus}
+                handleBlurOrEnter={(e: any) => {
+                  let val = e.currentTarget.value;
+                  if (isUrl && val && val !== 'none' && !val.includes('http') && !val.includes('www.') && !val.startsWith('/')) {
+                     val = '';
+                     onChange('');
+                     setUrlError(true);
+                     setTimeout(() => setUrlError(false), 2500);
+                  }
+                  if (focusValRef.current !== null && focusValRef.current !== val) {
+                     setShowLoader(true);
+                  }
+                  focusValRef.current = null;
+                  handleBlurOrEnter(e);
+                }}
+                onChange={(newVal: any) => onChange(newVal)}
+             />
+             <span className="text-foreground/40 shrink-0">"</span>
+             {urlError ? (
+                <span className="text-red-500 font-bold ml-1.5 text-[10px] tracking-widest uppercase">invalid</span>
+             ) : (
+                showLoader && <Loader2 className="w-3 h-3 animate-spin text-foreground/40 ml-1.5 shrink-0" />
+             )}
+             
+             {(objectKey === 'logoUrl' || objectKey === 'faviconUrl') && (
+                <button 
+                  onClick={() => onChange(objectKey === 'logoUrl' ? themeConfig.logoUrl : themeConfig.faviconUrl)} 
+                  className="w-4 h-4 ml-2 bg-red-500/10 hover:bg-red-500/20 text-red-500 rounded flex items-center justify-center transition-colors text-[10px] font-bold"
+                  title="Reset to default icon"
+                >✕</button>
+             )}
+          </div>
+       )}
+       {!isLast && <span className="text-foreground/50 shrink-0">,</span>}
+       {objectKey && ["inputRadius", "modalRadius", "badgeRadius", "buttonRadius", "cardRadius"].includes(objectKey) && (
+         <span className="text-foreground/30 text-[10px] font-medium ml-2 tracking-wide whitespace-nowrap hidden md:inline-block pointer-events-none">
+           // {objectKey === 'inputRadius' ? 'Forms & text fields' : objectKey === 'modalRadius' ? 'Popups & dialogs' : objectKey === 'badgeRadius' ? 'Tags & pills' : objectKey === 'buttonRadius' ? 'Interactive buttons' : 'Big panels & cards'}
+         </span>
+       )}
+    </div>
+  );
+};
+const ThemePreview = () => null;
+
+export function ThemeAdmin() {
+  const { activeConfig } = useTheme();
+  // We keep a fully reactive object tree locally instead of string
+  const [localConfig, setLocalConfig] = useState<any>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
+
+  useEffect(() => {
+    // Clone live config locally to edit
+    if (!localConfig) {
+      setLocalConfig(JSON.parse(JSON.stringify(activeConfig)));
+    }
+  }, [activeConfig]);
+
+  const [copiedStatus, setCopiedStatus] = useState<boolean>(false);
+  const [showResetConfirm, setShowResetConfirm] = useState<boolean>(false);
+
+  // Auto-Save background processor (debounced 1s)
+  useEffect(() => {
+     if (!localConfig || !activeConfig) return;
+     if (JSON.stringify(localConfig) === JSON.stringify(activeConfig)) {
+        setIsSaving(false);
+        return;
+     }
+
+     const timer = setTimeout(async () => {
+        setIsSaving(true);
+        try {
+          await setDoc(doc(db, 'sys_configs', 'theme'), localConfig);
+        } catch (err: any) {
+          console.error("Auto-save failed", err);
+        }
+        setIsSaving(false);
+     }, 300);
+     return () => clearTimeout(timer);
+  }, [localConfig, activeConfig]);
+
+  const resetToDefault = async () => {
+    setIsResetting(true);
+    try {
+       const module = await import('../configs/theme.config');
+       await setDoc(doc(db, 'sys_configs', 'theme'), module.themeConfig);
+       setLocalConfig(JSON.parse(JSON.stringify(module.themeConfig)));
+    } catch (e) {}
+    setTimeout(() => {
+       setIsResetting(false);
+       setShowResetConfirm(false);
+    }, 1000);
+  };
+
+  const hexToRgb = (hex: string) => {
+      if (!hex) return '167, 139, 250';
+      let r = 0, g = 0, b = 0;
+      if (hex.length === 4) {
+        r = parseInt(hex[1] + hex[1], 16);
+        g = parseInt(hex[2] + hex[2], 16);
+        b = parseInt(hex[3] + hex[3], 16);
+      } else if (hex.length === 7) {
+        r = parseInt(hex.substring(1, 3), 16);
+        g = parseInt(hex.substring(3, 5), 16);
+        b = parseInt(hex.substring(5, 7), 16);
+      }
+      return `${r}, ${g}, ${b}`;
+  };
+
+  const applyPreset = (preset: typeof colorPresets[0]) => {
+     if (!localConfig) return;
+     const newConfig = JSON.parse(JSON.stringify(localConfig));
+     if(newConfig.colors && newConfig.colors.dark) {
+         const rgb = hexToRgb(preset.dark.accent);
+         newConfig.colors.dark.accent = preset.dark.accent;
+         newConfig.colors.dark.buttonGradient = preset.dark.gradient;
+         newConfig.colors.dark.buttonHoverGradient = preset.dark.gradient;
+         newConfig.colors.dark.buttonText = preset.dark.buttonText;
+         newConfig.colors.dark.notificationIconColor = preset.dark.accent;
+         newConfig.colors.dark.textGradient = preset.dark.text;
+         
+         newConfig.colors.dark.foreground = preset.dark.text[0];
+         newConfig.colors.dark.background = preset.dark.background;
+         newConfig.colors.dark.backgroundSecondary = preset.dark.backgroundSecondary;
+
+         newConfig.colors.dark.panelBg = `rgba(${rgb}, 0.05)`;
+         newConfig.colors.dark.panelBorder = `rgba(${rgb}, 0.15)`;
+         newConfig.colors.dark.glowColor = `rgba(${rgb}, 0.40)`;
+         newConfig.colors.dark.selectionBg = `rgba(${rgb}, 0.40)`;
+         if(newConfig.colors.dark.secondaryButton) {
+            newConfig.colors.dark.secondaryButton.text = preset.dark.text[0];
+         }
+     }
+     if(newConfig.colors && newConfig.colors.light) {
+         const rgb = hexToRgb(preset.light.accent);
+         newConfig.colors.light.accent = preset.light.accent;
+         newConfig.colors.light.buttonGradient = preset.light.gradient;
+         newConfig.colors.light.buttonHoverGradient = preset.light.gradient;
+         newConfig.colors.light.buttonText = preset.light.buttonText;
+         newConfig.colors.light.notificationIconColor = preset.light.accent;
+         newConfig.colors.light.textGradient = preset.light.text;
+
+         newConfig.colors.light.foreground = preset.light.text[0];
+         newConfig.colors.light.background = preset.light.background;
+         newConfig.colors.light.backgroundSecondary = preset.light.backgroundSecondary;
+
+         newConfig.colors.light.panelBg = 'rgba(255, 255, 255, 0.70)';
+         newConfig.colors.light.panelBorder = `rgba(${rgb}, 0.08)`;
+         newConfig.colors.light.glowColor = `rgba(${rgb}, 0.30)`;
+         newConfig.colors.light.selectionBg = `rgba(${rgb}, 0.30)`;
+         if(newConfig.colors.light.secondaryButton) {
+            newConfig.colors.light.secondaryButton.text = preset.light.text[0];
+         }
+     }
+     setLocalConfig(newConfig);
+  };
+
+  const handleCopy = () => {
+     if (localConfig) {
+        const c = localConfig;
+        const d = c.colors?.dark || {};
+        const l = c.colors?.light || {};
+        const f = c.fontCustomization || {};
+        const cr = c.cornerRadii || {};
+
+        const tsTemplate = `/**
+ * THEME & BRANDING CONFIGURATION
+ * 
+ * This is the central hub for customizing your app's look. 
+ * Change any value below to rebrand your "Firebase OS" instantly.
+ */
+
+export const themeConfig = {
+  // -------------------------------------------------------------------------
+  // 1. GLOBAL SETTINGS
+  // -------------------------------------------------------------------------
+  appName: '${c.appName || 'Firebase OS.'}',
+
+  // Choose how the app starts: 'system', 'light', or 'dark'
+  defaultTheme: '${c.defaultTheme || 'system'}' as 'system' | 'light' | 'dark',
+
+  // Show or hide the Sun/Moon toggle button in the top menu
+  showThemeToggle: ${c.showThemeToggle !== false},
+
+  // Links to your logo and favicon (Can be a URL or a local path like /favicon.svg)
+  logoUrl: '${c.logoUrl || ''}', // If empty, the app will use the Database icon
+  faviconUrl: '${c.faviconUrl || ''}',
+
+  // -------------------------------------------------------------------------
+  // 2. THEME COLORS
+  // -------------------------------------------------------------------------
+  colors: {
+    // --- DARK MODE ---
+    dark: {
+      background: '${d.background || '#07070f'}',     // Main background color
+      backgroundSecondary: '${d.backgroundSecondary || '#0a0a18'}', // Gradient blending background color
+      foreground: '${d.foreground || '#f0eeff'}',     // Primary text color
+
+      accent: '${d.accent || '#a78bfa'}',         // Main branding color (Purple)
+
+      panelBg: '${d.panelBg || 'rgba(167, 139, 250, 0.05)'}',     // Card/Panel background
+      panelBorder: '${d.panelBorder || 'rgba(167, 139, 250, 0.15)'}', // Card/Panel borders
+
+      buttonGradient: ['${d.buttonGradient?.[0] || '#6d28d9'}', '${d.buttonGradient?.[1] || '#a78bfa'}'], // [Start, End]
+      secondaryButton: {
+        bg: '${d.secondaryButton?.bg || 'rgba(255, 255, 255, 0.05)'}',
+        border: '${d.secondaryButton?.border || 'rgba(255, 255, 255, 0.1)'}',
+        text: '${d.secondaryButton?.text || '#f0eeff'}'
+      },
+      buttonHoverGradient: ['${d.buttonHoverGradient?.[0] || '#7c3aed'}', '${d.buttonHoverGradient?.[1] || '#c4b5fd'}'], // [Start, End]
+      glowColor: '${d.glowColor || 'rgba(167, 139, 250, 0.40)'}', // Component shadow glow
+      notificationIconColor: '${d.notificationIconColor || '#a78bfa'}',
+      textGradient: [${(d.textGradient || ['#f0eeff', '#c4b5fd', '#a78bfa']).map((x: string) => `'${x}'`).join(', ')}], // Can add up to 6 colors
+      selectionBg: '${d.selectionBg || 'rgba(167, 139, 250, 0.40)'}',
+      selectionText: '${d.selectionText || '#ffffff'}',
+    },
+
+    // --- LIGHT MODE ---
+    light: {
+      background: '${l.background || '#fcfaff'}',     // Main background color
+      backgroundSecondary: '${l.backgroundSecondary || '#f7f3ff'}', // Gradient blending background color
+      foreground: '${l.foreground || '#1e1b4b'}',     // Primary text color
+
+      accent: '${l.accent || '#7c3aed'}',         // Main branding color (Purple)
+      panelBg: '${l.panelBg || 'rgba(255, 255, 255, 0.70)'}',   // Card/Panel background
+      panelBorder: '${l.panelBorder || 'rgba(124, 58, 237, 0.08)'}', // Card/Panel borders
+
+      buttonGradient: ['${l.buttonGradient?.[0] || '#5b21b6'}', '${l.buttonGradient?.[1] || '#a78bfa'}'], // [Start, End]
+      secondaryButton: {
+        bg: '${l.secondaryButton?.bg || 'rgba(0, 0, 0, 0.03)'}',
+        border: '${l.secondaryButton?.border || 'rgba(0, 0, 0, 0.06)'}',
+        text: '${l.secondaryButton?.text || '#1e1b4b'}'
+      },
+      buttonHoverGradient: ['${l.buttonHoverGradient?.[0] || '#6d28d9'}', '${l.buttonHoverGradient?.[1] || '#a78bfa'}'], // [Start, End]
+      glowColor: '${l.glowColor || 'rgba(124, 58, 237, 0.30)'}',
+      notificationIconColor: '${l.notificationIconColor || '#7c3aed'}',
+      textGradient: [${(l.textGradient || ['#2e1065', '#6d28d9', '#cdc1ff']).map((x: string) => `'${x}'`).join(', ')}], // [Start, Middle, End]
+      selectionBg: '${l.selectionBg || 'rgba(124, 58, 237, 0.30)'}',
+      selectionText: '${l.selectionText || '#ffffff'}',
+    }
+  },
+
+  // -------------------------------------------------------------------------
+  // 3. FONT STYLES & TYPOGRAPHY
+  // -------------------------------------------------------------------------
+  fontFamily: '${c.fontFamily || 'Inter'}',
+
+  // -------------------------------------------------------------------------
+  // 6. COMPONENT STYLING & BORDER RADII (GLOBAL)
+  // -------------------------------------------------------------------------
+  cornerRounding: '${c.cornerRounding || 'default'}' as 'default' | 'custom',
+  cornerRadii: {
+    buttonRadius: ${cr.buttonRadius || 0.75},     // 12px (xl)
+    inputRadius: ${cr.inputRadius || 0.75},      // Form inputs
+    cardRadius: ${cr.cardRadius || 1.5},        // 24px (2xl, 3xl)
+    modalRadius: ${cr.modalRadius || 2.5},       // Global popups and main internal boxes
+  }
+};`;
+
+        navigator.clipboard.writeText(tsTemplate);
+        setCopiedStatus(true);
+        setTimeout(() => setCopiedStatus(false), 2000);
+     }
+  };
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Allow specific Ctrl+A (if they focus the body, but not an input)
+      if ((e.ctrlKey || e.metaKey) && e.key === 'a' && document.activeElement === document.body) {
+         e.preventDefault();
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
+         const selection = window.getSelection()?.toString();
+         if (!selection && localConfig) {
+            handleCopy();
+         }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [localConfig]);
+
+  // Live real-time Preview engine mapping values to Document root
+  useEffect(() => {
+     if (!localConfig?.colors) return;
+     const docTheme = document.documentElement.getAttribute('data-theme') || 'dark';
+     const isDark = docTheme === 'dark';
+     const activeColors = isDark ? localConfig.colors.dark : localConfig.colors.light;
+     
+     const root = document.documentElement;
+     root.style.setProperty('--bg-color', activeColors.background);
+     if (activeColors.backgroundSecondary) root.style.setProperty('--bg-secondary-color', activeColors.backgroundSecondary);
+     root.style.setProperty('--fg-color', activeColors.foreground);
+     root.style.setProperty('--accent-color', activeColors.accent);
+     root.style.setProperty('--accent-deep', activeColors.accentDeep);
+     root.style.setProperty('--panel-bg', activeColors.panelBg);
+     root.style.setProperty('--panel-border', activeColors.panelBorder);
+     root.style.setProperty('--button-bg', `linear-gradient(135deg, ${activeColors.buttonGradient[0]} 0%, ${activeColors.buttonGradient[1]} 100%)`);
+     root.style.setProperty('--button-hover-bg', `linear-gradient(135deg, ${activeColors.buttonHoverGradient?.[0] || activeColors.buttonGradient[0]} 0%, ${activeColors.buttonHoverGradient?.[1] || activeColors.buttonGradient[1]} 100%)`);
+     root.style.setProperty('--text-gradient', `linear-gradient(135deg, ${activeColors.textGradient[0]} 0%, ${activeColors.textGradient[1]} 50%, ${activeColors.textGradient[2]} 100%)`);
+     root.style.setProperty('--glow-color', activeColors.glowColor || 'rgba(124, 58, 237, 0.3)');
+     root.style.setProperty('--button-fg', activeColors.buttonText || '#ffffff');
+     if (activeColors.notificationIconColor) {
+        root.style.setProperty('--notification-icon-color', activeColors.notificationIconColor);
+     }
+     
+  }, [localConfig]);
+
+  // Cleanup effect on unmount matching the DB config
+  useEffect(() => {
+     return () => {
+         // Reset styles by firing a custom event for ThemeContext to reload, or manually re-inject
+         if (!activeConfig?.colors) return;
+         const docTheme = document.documentElement.getAttribute('data-theme') || 'dark';
+         const isDark = docTheme === 'dark';
+         const c = isDark ? activeConfig.colors.dark : activeConfig.colors.light;
+         const root = document.documentElement;
+         root.style.setProperty('--bg-color', c.background);
+         if (c.backgroundSecondary) root.style.setProperty('--bg-secondary-color', c.backgroundSecondary);
+         root.style.setProperty('--fg-color', c.foreground);
+         root.style.setProperty('--accent-color', c.accent);
+         root.style.setProperty('--accent-deep', c.accentDeep);
+         root.style.setProperty('--panel-bg', c.panelBg);
+         root.style.setProperty('--panel-border', c.panelBorder);
+         root.style.setProperty('--button-bg', `linear-gradient(135deg, ${c.buttonGradient[0]} 0%, ${c.buttonGradient[1]} 100%)`);
+         root.style.setProperty('--button-hover-bg', `linear-gradient(135deg, ${c.buttonHoverGradient?.[0] || c.buttonGradient[0]} 0%, ${c.buttonHoverGradient?.[1] || c.buttonGradient[1]} 100%)`);
+         root.style.setProperty('--text-gradient', `linear-gradient(135deg, ${c.textGradient[0]} 0%, ${c.textGradient[1]} 50%, ${c.textGradient[2]} 100%)`);
+         root.style.setProperty('--glow-color', c.glowColor || 'rgba(124, 58, 237, 0.3)');
+         root.style.setProperty('--button-fg', c.buttonText || '#ffffff');
+         if (c.notificationIconColor) {
+            root.style.setProperty('--notification-icon-color', c.notificationIconColor);
+         }
+     };
+  }, [activeConfig]);
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col pt-12 min-h-screen">
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">
+            Theme
+          </h1>
+          <div className="flex items-center gap-2 text-foreground/40 font-bold uppercase tracking-[0.2em] text-[11px]">
+            <span className="w-8 h-[1px] bg-foreground/10" />
+            /theme
+          </div>
+        </div>
+      </motion.div>
+
+      <div className="flex flex-col gap-6 flex-1 pb-16">
+        <DashboardNav />
+
+        <div className="glass-panel border border-[var(--panel-border)] rounded-3xl p-6 md:p-10 shadow-2xl relative overflow-hidden bg-background flex flex-col min-h-[600px]">
+          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6 mb-6 pb-6 border-b border-[var(--panel-border)]/50 relative z-10 shrink-0">
+             <div>
+                <h2 className="text-xl font-extrabold text-foreground tracking-tight">Theme Config</h2>
+                <p className="text-[14px] font-medium text-foreground/60 mt-2 leading-relaxed">
+                  Changes here immediately format natively. Save to update your Live Preview panel entirely.
+                </p>
+             </div>
+             <div className="flex items-center gap-2 w-full md:w-auto shrink-0">
+               <Button variant="secondary" onClick={resetToDefault} className="w-10 h-10 p-0 border-transparent bg-transparent hover:bg-red-500/10 rounded-xl flex items-center justify-center shrink-0 transition-colors group" title="Reset to Defaults">
+                  {isResetting ? <Loader2 className="w-4 h-4 text-red-500 animate-spin" /> : <RotateCcw className="w-4 h-4 text-foreground/60 group-hover:text-red-500 transition-colors" />}
+               </Button>
+               <Button variant="secondary" onClick={handleCopy} className="w-10 h-10 p-0 border-transparent bg-transparent hover:bg-foreground/5 rounded-xl flex items-center justify-center shrink-0 transition-colors" title="Copy Config (Ctrl+C)">
+                  {copiedStatus ? <Check className="w-4 h-4 text-emerald-500" /> : <Copy className="w-4 h-4 text-foreground/60 hover:text-foreground transition-colors" />}
+               </Button>
+             </div>
+          </div>
+
+          <div className="flex flex-col gap-6 w-full relative z-10 items-start">
+             {isResetting && (
+                <div className="absolute inset-0 bg-background/60 backdrop-blur-[2px] z-50 flex items-center justify-center rounded-3xl pointer-events-none transition-all duration-300">
+                    <Loader2 className="w-8 h-8 animate-spin text-accent" />
+                </div>
+             )}
+
+             {/* Branding & Colours */}
+             <div className="w-full glass-panel border border-[var(--panel-border)] rounded-3xl p-6 md:p-8 shadow-inner overflow-hidden relative bg-background">
+                <h3 className="text-lg font-extrabold text-foreground tracking-tight mb-4 flex items-center gap-3">Branding & Colours</h3>
+                
+                <div className="flex items-center gap-3 overflow-x-auto hide-scrollbars pb-4 pt-2 mb-6 border-b border-[var(--panel-border)]/50 shrink-0">
+                   <div className="text-[12px] font-bold text-foreground/40 shrink-0 uppercase tracking-widest pl-1 mr-2">Presets</div>
+                   {colorPresets.map(preset => {
+                      const isActive = localConfig?.colors?.dark?.accent === preset.dark.accent && localConfig?.colors?.dark?.buttonGradient?.[0] === preset.dark.gradient[0];
+                      const isBW = preset.name === 'Black & White';
+                      return (
+                        <button
+                          key={preset.name}
+                          onClick={() => applyPreset(preset)}
+                          className={`w-9 h-9 rounded-full shrink-0 outline-none transition-all shadow-sm relative group overflow-visible ${isActive ? 'ring-[3px] ring-foreground ring-offset-2 ring-offset-[var(--background)] scale-110 z-10' : 'opacity-80 hover:opacity-100 hover:ring-2 hover:ring-foreground/30 hover:ring-offset-2 hover:ring-offset-[var(--background)] hover:scale-105'}`}
+                          title={preset.name}
+                        >
+                           <div 
+                             className="absolute inset-0 rounded-full" 
+                             style={isBW ? { 
+                               backgroundColor: '#ffffff', 
+                               border: '3px solid #000000',
+                               boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.1)'
+                             } : { 
+                               backgroundImage: `linear-gradient(135deg, ${preset.preview[0]}, ${preset.preview[1]})` 
+                             }} 
+                           />
+                        </button>
+                      );
+                   })}
+                </div>
+
+                <div className="w-full relative min-h-[100px]">
+                   {localConfig ? (
+                       <div className="flex flex-col pl-2">
+                         <span className="text-yellow-500 font-mono text-[13px] mb-2">export const themeConfig = {'{'}</span>
+                         <JsonNode 
+                           value={localConfig} 
+                           keysToRender={['appName', 'defaultTheme', 'showThemeToggle', 'logoUrl', 'faviconUrl', 'cornerRounding', 'cornerRadii', 'fontFamily']}
+                           onChange={(newConfig: any) => setLocalConfig(newConfig)} 
+                           isLast={false}
+                           isGlobalSaving={isSaving}
+                         />
+                         
+                         {/* Render Colors Explicitly inside Box 1 */}
+                         <div className="mt-4">
+                           <JsonNode 
+                             objectKey="colors"
+                             value={localConfig.colors} 
+                             onChange={(newColors: any) => setLocalConfig({ ...localConfig, colors: newColors })} 
+                             isLast={false}
+                             isGlobalSaving={isSaving}
+                           />
+                         </div>
+                       </div>
+                   ) : (
+                      <div className="flex items-center justify-center w-full h-full text-foreground/40 font-mono text-[13px] animate-pulse py-10">
+                         Loading Data Tree...
+                      </div>
+                   )}
+                </div>
+             </div>
+
+
+             
+          </div>
+        </div>
+      </div>
+
+
+    </main>
+  );
+}