firebase-os 1.1.3 → 1.1.5

package/src/components/JsonEditor.tsx

@@ -0,0 +1,579 @@
+import React, { useState, useEffect } from 'react';
+import { Loader2 } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { db } from '../lib/firebase';
+import { getDocs, collection } from 'firebase/firestore';
+import { themeConfig } from '../configs/theme.config';
+
+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."
+};
+
+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']
+};
+
+
+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>
+  );
+};
+
+
+
+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>
+  );
+};