sonance-brand-mcp 1.2.5 → 1.3.2

package/dist/assets/dev-tools/SonanceDevTools.tsx

@@ -0,0 +1,4201 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { createPortal } from "react-dom";
+import { Palette, X, Copy, Check, RotateCcw, ChevronDown, Save, Loader2, AlertCircle, CheckCircle, Sun, Moon, Eye, EyeOff, Zap, Image as ImageIcon, Wand2, Scan, FileCode, Tag, Type, MousePointer, FormInput, Box } from "lucide-react";
+import { useTheme } from "next-themes";
+import { cn } from "@/lib/utils";
+import {
+  ThemeConfig,
+  BrandId,
+  defaultThemeConfig,
+  brandPresets,
+  colorPresets,
+  radiusValues,
+  applyThemeToDOM,
+  resetThemeFromDOM,
+  generateThemeCSS,
+  componentSnippets,
+  isLightColor,
+} from "@/lib/brand-system";
+import { useBrand } from "@/lib/brand-context";
+
+// ============================================
+// SONANCE DEVTOOLS
+// A floating development overlay for brand theming
+// ============================================
+
+type TabId = "analysis" | "brand" | "components" | "logos" | "text";
+
+interface TabDefinition {
+  id: TabId;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+const tabs: TabDefinition[] = [
+  { id: "analysis", label: "Analysis", icon: Scan },
+  { id: "brand", label: "Brand", icon: Palette },
+  { id: "components", label: "Components", icon: Box },
+  { id: "logos", label: "Logos", icon: ImageIcon },
+  { id: "text", label: "Text", icon: Type },
+];
+
+type SaveStatus = "idle" | "saving" | "success" | "error";
+
+// Detected element types for Visual Inspector
+type DetectedElementType = "component" | "logo" | "text";
+
+interface DetectedElement {
+  name: string;
+  rect: DOMRect;
+  type: DetectedElementType;
+  /** Unique ID for logo elements (for selection/editing) */
+  logoId?: string;
+  /** Unique ID for text elements (for selection/editing) */
+  textId?: string;
+  /** The actual text content (for text elements) */
+  textContent?: string;
+}
+
+// Logo asset from the API
+interface LogoAsset {
+  id: string;
+  name: string;
+  path: string;
+  brand: string;
+  extension: string;
+}
+
+// Logo override configuration
+interface LogoOverride {
+  src?: string;          // Single source (fallback, or used when no theme-specific)
+  srcLight?: string;     // Logo for light mode (dark logo on light bg)
+  srcDark?: string;      // Logo for dark mode (light logo on dark bg)
+  width?: number;
+  height?: number;
+  scale?: number;
+  reset?: boolean;       // If true, indicates this config is resetting to defaults
+}
+
+// Save status for logo persistence
+type LogoSaveStatus = "idle" | "saving" | "success" | "error";
+
+// Original logo state for reset
+interface OriginalLogoState {
+  src: string;
+  width: number;
+  height: number;
+  srcset?: string;
+}
+
+// Analysis result from the project analyzer
+interface AnalysisImageElement {
+  id: string;
+  filePath: string;
+  lineNumber: number;
+  elementType: "Image" | "img";
+  srcValue: string;
+  srcType: "literal" | "variable" | "import";
+  hasId: boolean;
+  existingId?: string;
+  alt?: string;
+  suggestedId?: string;
+  context: {
+    parentComponent?: string;
+    semanticContainer?: string;
+  };
+}
+
+interface CategorySummary {
+  total: number;
+  withId: number;
+  missingId: number;
+}
+
+interface AnalysisResult {
+  timestamp: string;
+  scanDuration: number;
+  filesScanned: number;
+  elements: AnalysisImageElement[];
+  images: AnalysisImageElement[];
+  themeFiles: { filePath: string; type: string; hasBrandVariables: boolean }[];
+  summary: {
+    totalElements: number;
+    elementsWithId: number;
+    elementsMissingId: number;
+    byCategory: {
+      image: CategorySummary;
+      text: CategorySummary;
+      interactive: CategorySummary;
+      input: CategorySummary;
+      definition: CategorySummary;
+    };
+    // Legacy fields
+    totalImages: number;
+    imagesWithId: number;
+    imagesMissingId: number;
+    brandLogosDetected: number;
+  };
+}
+
+type AnalysisStatus = "idle" | "scanning" | "complete" | "error";
+
+// ---- Main Component ----
+
+export function SonanceDevTools() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState<TabId>("analysis");
+  const [config, setConfig] = useState<ThemeConfig>(defaultThemeConfig);
+  const [mounted, setMounted] = useState(false);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle");
+  const [saveMessage, setSaveMessage] = useState<string>("");
+  const [installedComponents, setInstalledComponents] = useState<string[]>([]);
+  
+  // Visual Inspector state
+  const [inspectorEnabled, setInspectorEnabled] = useState(false);
+  const [logoInspectorEnabled, setLogoInspectorEnabled] = useState(false);
+  const [textInspectorEnabled, setTextInspectorEnabled] = useState(false);
+  const [taggedElements, setTaggedElements] = useState<DetectedElement[]>([]);
+  const inspectorRef = useRef<number | null>(null);
+  
+  // Logo Tools state
+  const [logoAssets, setLogoAssets] = useState<LogoAsset[]>([]);
+  const [logoAssetsByBrand, setLogoAssetsByBrand] = useState<Record<string, LogoAsset[]>>({});
+  const [selectedLogoId, setSelectedLogoId] = useState<string | null>(null);
+  const [globalLogoConfig, setGlobalLogoConfig] = useState<LogoOverride>({});
+  const [individualLogoConfigs, setIndividualLogoConfigs] = useState<Record<string, LogoOverride>>({});
+  const [originalLogoStates, setOriginalLogoStates] = useState<Record<string, OriginalLogoState>>({});
+  const [logoSaveStatus, setLogoSaveStatus] = useState<LogoSaveStatus>("idle");
+  const [logoSaveMessage, setLogoSaveMessage] = useState<string>("");
+  const [autoFixStatus, setAutoFixStatus] = useState<AutoFixStatus>("idle");
+  const [autoFixMessage, setAutoFixMessage] = useState<string>("");
+  const logoIdCounter = useRef(0);
+  const textIdCounter = useRef(0);
+  
+  // Project Analysis state
+  const [showAnalysisModal, setShowAnalysisModal] = useState(false);
+  const [analysisStatus, setAnalysisStatus] = useState<AnalysisStatus>("idle");
+  const [analysisResult, setAnalysisResult] = useState<AnalysisResult | null>(null);
+  const [analysisError, setAnalysisError] = useState<string>("");
+  const [bulkTagStatus, setBulkTagStatus] = useState<"idle" | "tagging" | "complete">("idle");
+  const [bulkTagMessage, setBulkTagMessage] = useState<string>("");
+  
+  // Track if user has explicitly changed colors (to avoid initial interference)
+  const [colorsExplicitlyChanged, setColorsExplicitlyChanged] = useState(false);
+  
+  // Theme mode toggle (light/dark)
+  const { theme, setTheme, resolvedTheme } = useTheme();
+
+  // Global brand context for logo switching
+  const { setBrand } = useBrand();
+  
+  // Toggle between light and dark mode
+  const toggleThemeMode = useCallback(() => {
+    const currentMode = resolvedTheme || theme || "light";
+    setTheme(currentMode === "dark" ? "light" : "dark");
+  }, [resolvedTheme, theme, setTheme]);
+
+  // Handle client-side mounting for portal
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  
+  // Detect current theme colors from DOM on mount
+  // This prevents the DevTools from immediately overwriting colors when opened
+  useEffect(() => {
+    if (!mounted) return;
+    
+    // Helper to convert rgb/rgba to hex
+    const rgbToHex = (rgb: string): string | null => {
+      const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+      if (!match) return null;
+      const r = parseInt(match[1]);
+      const g = parseInt(match[2]);
+      const b = parseInt(match[3]);
+      return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+    };
+    
+    // Helper to check if a color is essentially transparent/white
+    const isNeutralColor = (hex: string | null): boolean => {
+      if (!hex) return true;
+      const lower = hex.toLowerCase();
+      // White, near-white, or transparent
+      return lower === '#ffffff' || lower === '#fff' || 
+             lower === '#000000' || lower === '#000' ||
+             lower === '#f9fafb' || lower === '#f3f4f6' || lower === '#fafafa';
+    };
+    
+    // Try to detect the current primary color from actual buttons
+    const detectPrimaryColor = (): string | null => {
+      // Look for definite primary buttons
+      const primaryBtn = document.querySelector('.btn-primary, [class*="bg-primary"]:not([class*="bg-primary-foreground"])') as HTMLElement;
+      if (primaryBtn) {
+        const computed = window.getComputedStyle(primaryBtn);
+        const bgHex = rgbToHex(computed.backgroundColor);
+        if (bgHex && !isNeutralColor(bgHex)) {
+          return bgHex;
+        }
+      }
+      
+      // Fallback: check CSS variables
+      const rootStyles = getComputedStyle(document.documentElement);
+      const primaryVar = rootStyles.getPropertyValue('--primary').trim() || 
+                        rootStyles.getPropertyValue('--sonance-charcoal').trim();
+      if (primaryVar && primaryVar.startsWith('#')) {
+        return primaryVar;
+      }
+      
+      return null;
+    };
+    
+    // Try to detect the current accent color from links/accents
+    const detectAccentColor = (): string | null => {
+      // Look for accent-colored links
+      const accentLink = document.querySelector('a[class*="text-sonance-blue"], a[class*="text-accent"], [class*="accent"]') as HTMLElement;
+      if (accentLink) {
+        const computed = window.getComputedStyle(accentLink);
+        const colorHex = rgbToHex(computed.color);
+        if (colorHex && !isNeutralColor(colorHex)) {
+          return colorHex;
+        }
+      }
+      
+      // Fallback: check CSS variables
+      const rootStyles = getComputedStyle(document.documentElement);
+      const accentVar = rootStyles.getPropertyValue('--accent').trim() ||
+                       rootStyles.getPropertyValue('--sonance-blue').trim();
+      if (accentVar && accentVar.startsWith('#')) {
+        return accentVar;
+      }
+      
+      return null;
+    };
+    
+    // Initialize config with detected colors (if found)
+    const detectedPrimary = detectPrimaryColor();
+    const detectedAccent = detectAccentColor();
+    
+    if (detectedPrimary || detectedAccent) {
+      setConfig(prev => ({
+        ...prev,
+        ...(detectedPrimary && { baseColor: detectedPrimary }),
+        ...(detectedAccent && { accentColor: detectedAccent }),
+      }));
+    }
+  }, [mounted]);
+  
+  // Read CSS variables on mount to initialize logo config state
+  useEffect(() => {
+    if (!mounted) return;
+    
+    // Read the current CSS variable values from the document root
+    const rootStyles = getComputedStyle(document.documentElement);
+    
+    // Get scale value for the default brand (sonance)
+    const scaleValue = rootStyles.getPropertyValue('--sonance-logo-scale').trim();
+    const widthValue = rootStyles.getPropertyValue('--sonance-logo-width').trim();
+    const heightValue = rootStyles.getPropertyValue('--sonance-logo-height').trim();
+    
+    const initialConfig: LogoOverride = {};
+    
+    if (scaleValue && scaleValue !== '1') {
+      initialConfig.scale = parseFloat(scaleValue);
+    }
+    if (widthValue && widthValue !== 'auto') {
+      initialConfig.width = parseInt(widthValue);
+    }
+    if (heightValue && heightValue !== 'auto') {
+      initialConfig.height = parseInt(heightValue);
+    }
+    
+    // Only update if we found saved values
+    if (Object.keys(initialConfig).length > 0) {
+      setGlobalLogoConfig(initialConfig);
+    }
+  }, [mounted]);
+  
+  // Fetch installed components from the project
+  useEffect(() => {
+    async function fetchInstalledComponents() {
+      try {
+        const response = await fetch("/api/sonance-components");
+        if (response.ok) {
+          const data = await response.json();
+          setInstalledComponents(data.components || []);
+        }
+      } catch (error) {
+        // Silently fail - just means we can't show installed status
+        console.warn("Could not fetch installed components:", error);
+      }
+    }
+    
+    if (mounted) {
+      fetchInstalledComponents();
+    }
+  }, [mounted]);
+
+  // Fetch logo assets when logo inspector is enabled
+  useEffect(() => {
+    async function fetchLogoAssets() {
+      try {
+        const response = await fetch("/api/sonance-assets");
+        if (response.ok) {
+          const data = await response.json();
+          setLogoAssets(data.assets || []);
+          setLogoAssetsByBrand(data.byBrand || {});
+        }
+      } catch (error) {
+        console.warn("Could not fetch logo assets:", error);
+      }
+    }
+    
+    if (mounted && logoInspectorEnabled && logoAssets.length === 0) {
+      fetchLogoAssets();
+    }
+  }, [mounted, logoInspectorEnabled, logoAssets.length]);
+
+  // Helper to extract logo filename from src (handles next/image optimized URLs)
+  const extractLogoName = useCallback((src: string): string | null => {
+    // Handle next/image optimized URLs like /_next/image?url=%2Flogos%2F...
+    let decodedSrc = src;
+    if (src.includes("/_next/image")) {
+      const urlParam = new URL(src, window.location.origin).searchParams.get("url");
+      if (urlParam) {
+        decodedSrc = decodeURIComponent(urlParam);
+      }
+    }
+    
+    // Check if the path contains "logo" anywhere
+    if (!decodedSrc.toLowerCase().includes("logo")) {
+      return null;
+    }
+    
+    // Extract filename from path
+    const parts = decodedSrc.split("/");
+    const filename = parts[parts.length - 1];
+    // Remove file extension
+    const nameWithoutExt = filename.replace(/\.(png|jpg|jpeg|svg|webp|gif)$/i, "");
+    return nameWithoutExt || null;
+  }, []);
+
+  // Helper to find complementary light/dark logo variant
+  // Returns { light: path, dark: path } or null if no match found
+  const findComplementaryLogo = useCallback((selectedPath: string): { light?: string; dark?: string } | null => {
+    if (!selectedPath || logoAssets.length === 0) return null;
+    
+    // Patterns that indicate theme variants
+    const darkPatterns = [/_Dark/i, /_2C_Dark/i, /_3C_Dark/i, /Dark_RGB/i, /Dark_CMYK/i, /_Reverse/i, /_Light_RGB/i];
+    const lightPatterns = [/_Light/i, /_2C_Light/i, /_3C_Light/i, /Light_RGB/i, /Light_CMYK/i, /_Black/i, /_Dark_RGB/i];
+    
+    // Check if selected is a dark variant (for light backgrounds)
+    const isDarkVariant = darkPatterns.some(pattern => pattern.test(selectedPath));
+    // Check if selected is a light variant (for dark backgrounds)
+    const isLightVariant = lightPatterns.some(pattern => pattern.test(selectedPath));
+    
+    // Extract the base name without theme suffix
+    const getBaseName = (path: string): string => {
+      return path
+        .replace(/_2C_Dark_RGB/gi, "")
+        .replace(/_2C_Light_RGB/gi, "")
+        .replace(/_3C_Dark_RGB/gi, "")
+        .replace(/_3C_Light_RGB/gi, "")
+        .replace(/_Dark_RGB/gi, "")
+        .replace(/_Light_RGB/gi, "")
+        .replace(/_Dark_CMYK/gi, "")
+        .replace(/_Light_CMYK/gi, "")
+        .replace(/_Dark/gi, "")
+        .replace(/_Light/gi, "")
+        .replace(/_Reverse/gi, "")
+        .replace(/_Black/gi, "")
+        .replace(/\.(png|jpg|jpeg|svg|webp|gif)$/i, "");
+    };
+    
+    const selectedBase = getBaseName(selectedPath);
+    
+    // Find all logos with the same base name
+    const matchingLogos = logoAssets.filter(asset => {
+      const assetBase = getBaseName(asset.path);
+      return assetBase === selectedBase;
+    });
+    
+    if (matchingLogos.length < 2) {
+      // No complementary variant found
+      return { light: selectedPath, dark: selectedPath };
+    }
+    
+    // Find the light and dark variants
+    let lightLogo: string | undefined;
+    let darkLogo: string | undefined;
+    
+    for (const logo of matchingLogos) {
+      const path = logo.path;
+      // Dark variant = logo with "Dark" in name (appears dark, for light backgrounds)
+      if (darkPatterns.some(pattern => pattern.test(path))) {
+        lightLogo = path; // Use on light mode (dark logo on light bg)
+      }
+      // Light variant = logo with "Light" in name (appears light, for dark backgrounds)
+      if (lightPatterns.some(pattern => pattern.test(path))) {
+        darkLogo = path; // Use on dark mode (light logo on dark bg)
+      }
+    }
+    
+    // Fallback if patterns aren't matching perfectly
+    if (!lightLogo) lightLogo = selectedPath;
+    if (!darkLogo) darkLogo = selectedPath;
+    
+    return { light: lightLogo, dark: darkLogo };
+  }, [logoAssets]);
+
+  // Visual Inspector: Scan for tagged elements, logos, and text, update positions
+  useEffect(() => {
+    const anyInspectorEnabled = inspectorEnabled || logoInspectorEnabled || textInspectorEnabled;
+    
+    if (!anyInspectorEnabled || !mounted) {
+      setTaggedElements([]);
+      if (inspectorRef.current) {
+        cancelAnimationFrame(inspectorRef.current);
+        inspectorRef.current = null;
+      }
+      return;
+    }
+
+    const scanElements = () => {
+      const newTagged: DetectedElement[] = [];
+      const newOriginalStates: Record<string, OriginalLogoState> = { ...originalLogoStates };
+
+      // Scan for tagged components
+      if (inspectorEnabled) {
+        const components = document.querySelectorAll("[data-sonance-name]");
+        components.forEach((el) => {
+        const name = el.getAttribute("data-sonance-name");
+        if (name) {
+          const rect = el.getBoundingClientRect();
+          // Only include visible elements
+          if (rect.width > 0 && rect.height > 0) {
+              newTagged.push({ name, rect, type: "component" });
+          }
+        }
+      });
+      }
+
+      // Scan for logo images
+      if (logoInspectorEnabled) {
+        const images = document.querySelectorAll("img");
+        images.forEach((img) => {
+          const src = img.src || img.getAttribute("src") || "";
+          const alt = img.alt || "";
+          
+          // Check if src or alt contains "logo"
+          const logoName = extractLogoName(src);
+          const altContainsLogo = alt.toLowerCase().includes("logo");
+          
+          if (logoName || altContainsLogo) {
+            const rect = img.getBoundingClientRect();
+            // Only include visible elements
+            if (rect.width > 0 && rect.height > 0) {
+              // Assign or retrieve a unique ID for this logo element
+              let logoId = img.getAttribute("data-sonance-logo-id");
+              if (!logoId) {
+                logoId = `logo-${logoIdCounter.current++}`;
+                img.setAttribute("data-sonance-logo-id", logoId);
+              }
+              
+              // Store original state if not already stored
+              if (!newOriginalStates[logoId]) {
+                const originalSrcset = img.getAttribute("data-original-srcset") || img.srcset || "";
+                newOriginalStates[logoId] = {
+                  src: img.getAttribute("data-original-src") || src,
+                  width: img.naturalWidth || img.width,
+                  height: img.naturalHeight || img.height,
+                  srcset: originalSrcset,
+                };
+                // Also store original src and srcset as data attributes for reset
+                if (!img.getAttribute("data-original-src")) {
+                  img.setAttribute("data-original-src", src);
+                }
+                if (!img.getAttribute("data-original-srcset") && img.srcset) {
+                  img.setAttribute("data-original-srcset", img.srcset);
+                }
+              }
+              
+              const displayName = logoName || alt || "Logo";
+              newTagged.push({ name: displayName, rect, type: "logo", logoId });
+            }
+          }
+        });
+      }
+
+      // Scan for text elements
+      if (textInspectorEnabled) {
+        const textSelectors = "h1, h2, h3, h4, h5, h6, p, span, a";
+        const textElements = document.querySelectorAll(textSelectors);
+        textElements.forEach((el) => {
+          // Skip elements that are part of the DevTools UI
+          if (el.closest("[data-sonance-devtools]")) return;
+          
+          const rect = el.getBoundingClientRect();
+          // Only include visible elements with content
+          const textContent = el.textContent?.trim() || "";
+          if (rect.width > 0 && rect.height > 0 && textContent.length > 0) {
+            // Assign or retrieve a unique ID for this text element
+            let textId = el.getAttribute("data-sonance-text-id");
+            if (!textId) {
+              textId = `text-${textIdCounter.current++}`;
+              el.setAttribute("data-sonance-text-id", textId);
+            }
+            
+            const tagName = el.tagName.toLowerCase();
+            const displayName = tagName === "a" ? "Link" : tagName.toUpperCase();
+            const truncatedContent = textContent.length > 30 ? textContent.substring(0, 30) + "..." : textContent;
+            
+            newTagged.push({ 
+              name: `${displayName}: ${truncatedContent}`, 
+              rect, 
+              type: "text", 
+              textId,
+              textContent 
+            });
+          }
+        });
+      }
+
+      // Update original states if new logos were found
+      if (Object.keys(newOriginalStates).length !== Object.keys(originalLogoStates).length) {
+        setOriginalLogoStates(newOriginalStates);
+      }
+
+      setTaggedElements(newTagged);
+      inspectorRef.current = requestAnimationFrame(scanElements);
+    };
+
+    scanElements();
+
+    return () => {
+      if (inspectorRef.current) {
+        cancelAnimationFrame(inspectorRef.current);
+        inspectorRef.current = null;
+      }
+    };
+  }, [inspectorEnabled, logoInspectorEnabled, textInspectorEnabled, mounted, extractLogoName, originalLogoStates]);
+
+  // Toggle Visual Inspector
+  const toggleInspector = useCallback(() => {
+    setInspectorEnabled((prev) => !prev);
+  }, []);
+
+  // Toggle Logo Inspector
+  const toggleLogoInspector = useCallback(() => {
+    setLogoInspectorEnabled((prev) => !prev);
+  }, []);
+
+  // Toggle Text Inspector
+  const toggleTextInspector = useCallback(() => {
+    setTextInspectorEnabled((prev) => !prev);
+  }, []);
+
+  // Logo Tools handlers
+  const handleGlobalLogoConfigChange = useCallback((config: LogoOverride) => {
+    setGlobalLogoConfig(config);
+  }, []);
+
+  const handleIndividualLogoConfigChange = useCallback((logoId: string, config: LogoOverride) => {
+    setIndividualLogoConfigs((prev) => ({
+      ...prev,
+      [logoId]: config,
+    }));
+  }, []);
+
+  const handleSelectLogo = useCallback((logoId: string | null) => {
+    setSelectedLogoId(logoId);
+  }, []);
+
+  const handleResetAllLogos = useCallback(() => {
+    // Reset all configs - mark as reset pending save
+    setGlobalLogoConfig({ reset: true });
+    setIndividualLogoConfigs({});
+    setSelectedLogoId(null);
+    
+    // Reset DOM elements to original state
+    const logos = document.querySelectorAll("[data-sonance-logo-id]");
+    logos.forEach((el) => {
+      const img = el as HTMLImageElement;
+      const originalSrc = img.getAttribute("data-original-src");
+      const originalSrcset = img.getAttribute("data-original-srcset");
+      
+      // Restore srcset first (before src) so browser can use responsive images
+      if (originalSrcset) {
+        img.srcset = originalSrcset;
+      }
+      if (originalSrc) {
+        img.src = originalSrc;
+      }
+      img.style.removeProperty("width");
+      img.style.removeProperty("height");
+      img.style.removeProperty("transform");
+      img.style.removeProperty("transform-origin");
+    });
+  }, []);
+
+  const handleResetLogo = useCallback((logoId: string) => {
+    // Mark individual config as reset instead of deleting it
+    setIndividualLogoConfigs((prev) => {
+      const newConfigs = { ...prev };
+      newConfigs[logoId] = { reset: true };
+      return newConfigs;
+    });
+    
+    // Reset DOM element
+    const img = document.querySelector(`[data-sonance-logo-id="${logoId}"]`) as HTMLImageElement | null;
+    if (img) {
+      const originalSrc = img.getAttribute("data-original-src");
+      const originalSrcset = img.getAttribute("data-original-srcset");
+      
+      // Restore srcset first (before src) so browser can use responsive images
+      if (originalSrcset) {
+        img.srcset = originalSrcset;
+      }
+      if (originalSrc) {
+        img.src = originalSrc;
+      }
+      img.style.removeProperty("width");
+      img.style.removeProperty("height");
+      img.style.removeProperty("transform");
+      img.style.removeProperty("transform-origin");
+    }
+  }, []);
+
+  // Save logo changes to brand-system.ts and brand-overrides.css
+  const handleSaveLogoChanges = useCallback(async (configOverride?: LogoOverride, targetBrandId?: string, selector?: string, logoId?: string) => {
+    setLogoSaveStatus("saving");
+    setLogoSaveMessage("");
+
+    try {
+      // Get the config to save (override or global)
+      const configToSave = configOverride || globalLogoConfig;
+      
+      // Check if there's anything meaningful to save or if it's a reset
+      const hasSrcChanges = configToSave.srcLight || configToSave.srcDark || configToSave.src;
+      const hasDimensionChanges = configToSave.width || configToSave.height || (configToSave.scale && configToSave.scale !== 1);
+      const isReset = configToSave.reset === true;
+      
+      // Validate that we have something to save
+      if (!isReset && !hasSrcChanges && !hasDimensionChanges) {
+        setLogoSaveStatus("error");
+        setLogoSaveMessage("No logo changes to save");
+        setTimeout(() => {
+          setLogoSaveStatus("idle");
+          setLogoSaveMessage("");
+        }, 3000);
+        return;
+      }
+
+      // Prepare payload
+      // Source changes - only include if present
+      const srcLight = configToSave.srcLight || configToSave.src || undefined;
+      const srcDark = configToSave.srcDark || configToSave.src || undefined;
+      
+      // Dimension changes
+      const width = configToSave.width;
+      const height = configToSave.height;
+      const scale = configToSave.scale !== 1 ? configToSave.scale : undefined;
+
+      const response = await fetch("/api/sonance-save-logo", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          srcLight,
+          srcDark,
+          width,
+          height,
+          scale,
+          brandId: targetBrandId || "sonance",
+          selector, // CSS selector for individual element targeting (e.g., "#my-logo")
+          reset: isReset,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to save logo changes");
+      }
+
+      setLogoSaveStatus("success");
+      
+      // Clear the config after successful save so the button disappears
+      if (logoId) {
+        // Individual logo save - clear the config for this specific logo
+        setIndividualLogoConfigs((prev) => {
+          const newConfigs = { ...prev };
+          delete newConfigs[logoId];
+          return newConfigs;
+        });
+      } else if (!configOverride) {
+        // Global save - clear global config
+        setGlobalLogoConfig({});
+      }
+
+      const targetDescription = selector 
+        ? `element ${selector}` 
+        : (targetBrandId ? targetBrandId.charAt(0).toUpperCase() + targetBrandId.slice(1) + " brand" : "Sonance brand");
+      setLogoSaveMessage(isReset ? `Reset saved for ${targetDescription}!` : `Saved to ${targetDescription}!`);
+      
+      setTimeout(() => {
+        setLogoSaveStatus("idle");
+        setLogoSaveMessage("");
+      }, 5000);
+    } catch (error) {
+      setLogoSaveStatus("error");
+      setLogoSaveMessage(error instanceof Error ? error.message : "Failed to save logo changes");
+      
+      setTimeout(() => {
+        setLogoSaveStatus("idle");
+        setLogoSaveMessage("");
+      }, 5000);
+    }
+  }, [globalLogoConfig]);
+
+  // Auto-fix ID injection into source code
+  const handleAutoFixId = useCallback(async (logoSrc: string, suggestedId: string): Promise<{ success: boolean; error?: string }> => {
+    setAutoFixStatus("fixing");
+    setAutoFixMessage("");
+
+    try {
+      // Extract the clean logo path from the src (may include Next.js image params)
+      let cleanSrc = logoSrc;
+      
+      // Handle Next.js optimized images: /_next/image?url=... or encoded URLs
+      if (logoSrc.includes("/_next/image")) {
+        const urlMatch = logoSrc.match(/url=([^&]+)/);
+        if (urlMatch) {
+          cleanSrc = decodeURIComponent(urlMatch[1]);
+        }
+      }
+      
+      // Extract just the path part (remove domain if present)
+      try {
+        const url = new URL(cleanSrc, window.location.origin);
+        cleanSrc = url.pathname;
+      } catch {
+        // Already a path, use as-is
+      }
+
+      const response = await fetch("/api/sonance-inject-id", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          logoSrc: cleanSrc,
+          suggestedId,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        const errorMessage = data.details || data.error || "Failed to inject ID";
+        setAutoFixStatus("error");
+        setAutoFixMessage(errorMessage);
+        
+        setTimeout(() => {
+          setAutoFixStatus("idle");
+          setAutoFixMessage("");
+        }, 5000);
+        
+        return { success: false, error: errorMessage };
+      }
+
+      setAutoFixStatus("success");
+      setAutoFixMessage(`ID injected in ${data.file}! Reload to apply.`);
+      
+      setTimeout(() => {
+        setAutoFixStatus("idle");
+        setAutoFixMessage("");
+      }, 8000);
+      
+      return { success: true };
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      setAutoFixStatus("error");
+      setAutoFixMessage(errorMessage);
+      
+      setTimeout(() => {
+        setAutoFixStatus("idle");
+        setAutoFixMessage("");
+      }, 5000);
+      
+      return { success: false, error: errorMessage };
+    }
+  }, []);
+
+  // Run project analysis
+  const handleRunAnalysis = useCallback(async () => {
+    setAnalysisStatus("scanning");
+    setAnalysisError("");
+    setAnalysisResult(null);
+
+    try {
+      const response = await fetch("/api/sonance-analyze");
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to analyze project");
+      }
+
+      setAnalysisResult(data);
+      setAnalysisStatus("complete");
+    } catch (error) {
+      setAnalysisError(error instanceof Error ? error.message : "Unknown error");
+      setAnalysisStatus("error");
+    }
+  }, []);
+
+  // Bulk tag elements missing IDs
+  const handleBulkTagAll = useCallback(async (elementIds?: string[], category?: string) => {
+    setBulkTagStatus("tagging");
+    setBulkTagMessage("");
+
+    try {
+      const response = await fetch("/api/sonance-analyze", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "auto-tag-all",
+          elementIds,
+          category,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to auto-tag elements");
+      }
+
+      setBulkTagMessage(data.message);
+      setBulkTagStatus("complete");
+      
+      // Re-run analysis to update the counts
+      setTimeout(() => {
+        handleRunAnalysis();
+      }, 1000);
+    } catch (error) {
+      setBulkTagMessage(error instanceof Error ? error.message : "Unknown error");
+      setBulkTagStatus("complete");
+    }
+  }, [handleRunAnalysis]);
+
+  // Apply logo overrides to DOM in real-time
+  useEffect(() => {
+    if (!logoInspectorEnabled) return;
+
+    const currentTheme = resolvedTheme || theme || "light";
+    const isDarkMode = currentTheme === "dark";
+
+    const logos = document.querySelectorAll("[data-sonance-logo-id]");
+    logos.forEach((el) => {
+      const img = el as HTMLImageElement;
+      const logoId = img.getAttribute("data-sonance-logo-id");
+      if (!logoId) return;
+
+      const originalState = originalLogoStates[logoId];
+      const individualConfig = individualLogoConfigs[logoId] || {};
+      
+      // Priority: individual config > global config > original
+      // For theme-aware logos, pick the right variant based on current theme
+      const getThemeAwareSrc = (config: LogoOverride): string | undefined => {
+        if (isDarkMode && config.srcDark) return config.srcDark;
+        if (!isDarkMode && config.srcLight) return config.srcLight;
+        return config.src;
+      };
+      
+      const effectiveSrc = getThemeAwareSrc(individualConfig) || getThemeAwareSrc(globalLogoConfig);
+      const effectiveScale = individualConfig.scale ?? globalLogoConfig.scale ?? 1;
+      const effectiveWidth = individualConfig.width;
+      const effectiveHeight = individualConfig.height;
+
+      // Apply source change
+      if (effectiveSrc) {
+        // Remove srcset to force browser to use our new src
+        if (img.srcset) {
+          img.srcset = "";
+        }
+        // Only update if different to prevent flashing
+        const currentDecodedSrc = img.src.includes("/_next/image") 
+          ? decodeURIComponent(new URL(img.src).searchParams.get("url") || "")
+          : img.src;
+        if (!currentDecodedSrc.endsWith(effectiveSrc)) {
+          img.src = effectiveSrc;
+        }
+      } else if (originalState) {
+        // Restore original if no override
+        const originalSrc = img.getAttribute("data-original-src");
+        const originalSrcset = img.getAttribute("data-original-srcset");
+        
+        // Restore srcset if we have it stored
+        if (originalSrcset && img.srcset !== originalSrcset) {
+          img.srcset = originalSrcset;
+        }
+        
+        if (originalSrc && !img.src.includes(originalSrc.split("/").pop() || "")) {
+          img.src = originalSrc;
+        }
+      }
+
+      // Apply dimensions and scale
+      // Use transform: scale() for scale changes to match the persisted CSS behavior
+      if (effectiveScale !== 1) {
+        img.style.transform = `scale(${effectiveScale})`;
+        img.style.transformOrigin = "center";
+      } else {
+        img.style.removeProperty("transform");
+        img.style.removeProperty("transform-origin");
+      }
+      
+      // Apply explicit width/height if set (these take precedence over scale for sizing)
+      if (effectiveWidth) {
+        img.style.width = `${effectiveWidth}px`;
+      } else {
+        img.style.removeProperty("width");
+      }
+
+      if (effectiveHeight) {
+        img.style.height = `${effectiveHeight}px`;
+      } else {
+        img.style.removeProperty("height");
+      }
+    });
+  }, [logoInspectorEnabled, globalLogoConfig, individualLogoConfigs, originalLogoStates, resolvedTheme, theme]);
+
+  // Save theme to project files
+  const handleSaveTheme = useCallback(async () => {
+    setSaveStatus("saving");
+    setSaveMessage("");
+
+    try {
+      const css = generateThemeCSS(config);
+      const response = await fetch("/api/sonance-theme", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ css, config }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to save theme");
+      }
+
+      setSaveStatus("success");
+      setSaveMessage("Theme saved! Add @import \"../theme/sonance-theme.css\"; to your globals.css");
+      
+      // Reset status after 5 seconds
+      setTimeout(() => {
+        setSaveStatus("idle");
+        setSaveMessage("");
+      }, 5000);
+    } catch (error) {
+      setSaveStatus("error");
+      setSaveMessage(error instanceof Error ? error.message : "Failed to save theme");
+      
+      // Reset status after 5 seconds
+      setTimeout(() => {
+        setSaveStatus("idle");
+        setSaveMessage("");
+      }, 5000);
+    }
+  }, [config]);
+
+  // Apply theme changes to DOM (CSS variables - works if target app uses them)
+  useEffect(() => {
+    if (isOpen) {
+      applyThemeToDOM(config);
+    }
+  }, [config, isOpen]);
+
+  // Runtime DOM injection for universal color preview
+  // This directly manipulates element styles, working regardless of CSS architecture
+  // 
+  // ROLE DEFINITIONS:
+  // - PRIMARY: Solid backgrounds (buttons, filled badges, main action elements)
+  //   -> Controls: backgroundColor, plus contrast text color on top
+  // - ACCENT: Text, links, icons, borders (interactive text, highlights)
+  //   -> Controls: color (text), borderColor ONLY - never backgroundColor
+  //
+  // IMPORTANT: Only apply color changes when the user has EXPLICITLY changed colors
+  // in the DevTools. This prevents the DevTools from interfering with the 
+  // application's natural styling on initial open.
+  //
+  useEffect(() => {
+    if (!isOpen) return;
+    // Only apply color injection when user has explicitly changed colors
+    if (!colorsExplicitlyChanged) return;
+
+    const originalStyles = new Map<HTMLElement, { bg?: string; color?: string; borderColor?: string }>();
+    // Track elements processed by primary to prevent accent from overriding them
+    const primaryProcessedElements = new Set<HTMLElement>();
+
+    // Helper to determine if a color is "light" (for contrast calculation)
+    const isLightColor = (hex: string): boolean => {
+      const c = hex.replace('#', '');
+      if (c.length < 6) return true; // Fallback for short/invalid hex
+      const r = parseInt(c.substring(0, 2), 16);
+      const g = parseInt(c.substring(2, 4), 16);
+      const b = parseInt(c.substring(4, 6), 16);
+      const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+      return luminance > 0.5;
+    };
+
+    // Helper to convert computed rgb/rgba to hex for comparison
+    const rgbToHex = (rgb: string): string | null => {
+      const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+      if (!match) return null;
+      const r = parseInt(match[1]);
+      const g = parseInt(match[2]);
+      const b = parseInt(match[3]);
+      return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+    };
+
+    // Helper to check if computed color matches target colors
+    const colorMatches = (computed: string, targets: string[]): boolean => {
+      const computedHex = rgbToHex(computed);
+      if (!computedHex) return false;
+      
+      return targets.some(t => {
+        const target = t.toLowerCase();
+        return computedHex.toLowerCase() === target;
+      });
+    };
+
+    // Helper to check if element is transparent/no-background
+    const isTransparent = (bgColor: string): boolean => {
+      return bgColor === 'rgba(0, 0, 0, 0)' || 
+             bgColor === 'transparent' || 
+             bgColor === '';
+    };
+
+    // Common primary colors to detect (brand defaults + common button colors)
+    // These are colors typically used for SOLID BACKGROUNDS
+    const primaryColorTargets = [
+      '#333f48', // Sonance charcoal
+      '#0f161d', // IPORT dark
+      '#28282b', // Blaze dark
+      '#000000', // Black (common button)
+      '#1f2937', // Tailwind gray-800
+      '#111827', // Tailwind gray-900
+      '#18181b', // Tailwind zinc-900
+      '#171717', // Tailwind neutral-900
+    ];
+
+    // Common accent colors to detect (for TEXT and BORDERS only)
+    // These are colors typically used for links, icons, highlights
+    const accentColorTargets = [
+      '#00a3e1', // Sonance blue / Blaze blue
+      '#00d3c8', // Sonance teal
+      '#fc4c02', // IPORT orange
+      '#c02b0a', // Blaze red
+      '#3b82f6', // Tailwind blue-500
+      '#2563eb', // Tailwind blue-600
+      '#0ea5e9', // Tailwind sky-500
+      '#06b6d4', // Tailwind cyan-500
+      '#14b8a6', // Tailwind teal-500
+    ];
+
+    // PRIMARY COLOR: Apply to solid backgrounds (buttons, filled elements)
+    // This changes backgroundColor and sets appropriate contrast text
+    // 
+    // IMPORTANT: Only target elements that are DEFINITELY primary buttons,
+    // not cards or containers that happen to be <button> elements.
+    // We use STRICT class matching to avoid false positives like bg-sonance-blue (accent).
+    //
+    const applyPrimaryColor = () => {
+      // Specific primary class patterns (exact matches, not partial)
+      const primaryClassPatterns = [
+        'btn-primary',
+        'bg-primary',
+        'bg-sonance-charcoal',  // Specific Sonance primary
+        'bg-iport-dark',        // Specific IPORT primary
+        'bg-blaze-dark-gray',   // Specific Blaze primary
+      ];
+
+      // Check if element has a definite primary class
+      const hasPrimaryClass = (classList: string): boolean => {
+        return primaryClassPatterns.some(pattern => {
+          // Split classList and check for exact class match
+          const classes = classList.split(/\s+/);
+          return classes.includes(pattern);
+        });
+      };
+
+      // Selectors for elements that are DEFINITELY primary buttons
+      // Avoid generic 'button' selector - too many false positives (cards, etc.)
+      const primarySelectors = [
+        '.btn-primary',
+        '[class*="bg-primary"]',
+        '.btn:not(.btn-outline):not(.btn-ghost):not(.btn-secondary):not(.btn-link)',
+      ].join(', ');
+
+      const elements = document.querySelectorAll(primarySelectors);
+      
+      elements.forEach((el) => {
+        const htmlEl = el as HTMLElement;
+        // Skip DevTools elements
+        if (htmlEl.closest('[data-sonance-devtools]')) return;
+        // Skip already processed
+        if (primaryProcessedElements.has(htmlEl)) return;
+        // Skip navigation elements - they have their own active state styling
+        if (htmlEl.closest('nav') || htmlEl.closest('aside') || htmlEl.closest('[role="navigation"]')) return;
+        
+        const computed = window.getComputedStyle(htmlEl);
+        const bgColor = computed.backgroundColor;
+        
+        // Only apply to elements with solid (non-transparent) backgrounds
+        // that match known primary colors OR have explicit primary classes
+        const hasSolidBg = !isTransparent(bgColor);
+        const matchesPrimaryColor = colorMatches(bgColor, primaryColorTargets);
+        const hasDefinitePrimaryClass = hasPrimaryClass(htmlEl.classList.toString());
+        
+        // STRICT: Only apply if element has solid bg AND (color matches OR has definite primary class)
+        if (hasSolidBg && (matchesPrimaryColor || hasDefinitePrimaryClass)) {
+          // Store original if not already stored
+          if (!originalStyles.has(htmlEl)) {
+            originalStyles.set(htmlEl, {
+              bg: htmlEl.style.backgroundColor,
+              color: htmlEl.style.color,
+            });
+          }
+          
+          // Apply new primary color as BACKGROUND
+          htmlEl.style.setProperty('background-color', config.baseColor, 'important');
+          // Set contrast text color (white on dark, black on light)
+          const contrastColor = isLightColor(config.baseColor) ? '#000000' : '#FFFFFF';
+          htmlEl.style.setProperty('color', contrastColor, 'important');
+          
+          // Mark as processed to prevent accent from touching it
+          primaryProcessedElements.add(htmlEl);
+        }
+      });
+    };
+
+    // ACCENT COLOR: Apply to text, links, icons, borders
+    // This changes color (text) and borderColor ONLY - never backgroundColor
+    // 
+    // IMPORTANT: We must NOT interfere with navigation/menu items that have
+    // their own active/inactive state styling managed by the application.
+    //
+    const applyAccentColor = () => {
+      // Selectors for elements that typically use accent for TEXT
+      // EXCLUDE navigation links - they have their own state management
+      const accentSelectors = [
+        // Only target links that are explicitly styled as accent, not nav links
+        'main a:not(.btn):not([class*="button"]):not(nav a)',
+        '[class*="text-accent"]',
+        '[class*="text-brand"]',
+        // Be more specific - only match explicit accent text utilities
+        '.text-sonance-blue',
+        '.text-iport-orange', 
+        '.text-blaze-blue',
+      ].join(', ');
+
+      const elements = document.querySelectorAll(accentSelectors);
+      
+      elements.forEach((el) => {
+        const htmlEl = el as HTMLElement;
+        // Skip DevTools elements
+        if (htmlEl.closest('[data-sonance-devtools]')) return;
+        // Skip elements already processed by PRIMARY (conflict prevention)
+        if (primaryProcessedElements.has(htmlEl)) return;
+        // Skip buttons entirely - they belong to primary
+        if (htmlEl.tagName === 'BUTTON' || htmlEl.getAttribute('role') === 'button') return;
+        // Skip navigation elements - they have their own active state styling
+        if (htmlEl.closest('nav') || htmlEl.closest('aside') || htmlEl.closest('[role="navigation"]')) return;
+        // Skip elements with active/selected states
+        if (htmlEl.classList.toString().includes('active') || 
+            htmlEl.classList.toString().includes('selected') ||
+            htmlEl.getAttribute('aria-current')) return;
+        
+        const computed = window.getComputedStyle(htmlEl);
+        const textColor = computed.color;
+        const borderColor = computed.borderColor;
+        
+        // Check if this element has accent-like text color
+        const hasAccentTextColor = colorMatches(textColor, accentColorTargets);
+        const hasAccentBorderColor = colorMatches(borderColor, accentColorTargets);
+        // Be more strict about class matching - only explicit accent classes
+        const hasAccentClass = htmlEl.classList.contains('text-sonance-blue') ||
+                              htmlEl.classList.contains('text-iport-orange') ||
+                              htmlEl.classList.contains('text-blaze-blue') ||
+                              htmlEl.classList.contains('text-accent');
+        
+        // Apply accent color to TEXT and BORDERS only
+        if (hasAccentTextColor || hasAccentClass) {
+          // Store original if not already stored
+          if (!originalStyles.has(htmlEl)) {
+            originalStyles.set(htmlEl, {
+              color: htmlEl.style.color,
+              borderColor: htmlEl.style.borderColor,
+            });
+          }
+          
+          // Apply new accent color to TEXT with !important for reliable override
+          htmlEl.style.setProperty('color', config.accentColor, 'important');
+        }
+        
+        // Handle border color separately (for outline buttons, input focus rings, etc.)
+        if (hasAccentBorderColor) {
+          if (!originalStyles.has(htmlEl)) {
+            originalStyles.set(htmlEl, {
+              color: htmlEl.style.color,
+              borderColor: htmlEl.style.borderColor,
+            });
+          }
+          htmlEl.style.setProperty('border-color', config.accentColor, 'important');
+        }
+      });
+    };
+
+    // Initial application - PRIMARY first, then ACCENT
+    // Order matters for conflict prevention
+    applyPrimaryColor();
+    applyAccentColor();
+
+    // Set up MutationObserver for dynamically added elements
+    const observer = new MutationObserver((mutations) => {
+      let shouldReapply = false;
+      mutations.forEach((mutation) => {
+        if (mutation.addedNodes.length > 0) {
+          shouldReapply = true;
+        }
+      });
+      if (shouldReapply) {
+        // Clear processed set for fresh re-scan
+        primaryProcessedElements.clear();
+        applyPrimaryColor();
+        applyAccentColor();
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    // Cleanup: restore original styles
+    return () => {
+      observer.disconnect();
+      primaryProcessedElements.clear();
+      originalStyles.forEach((original, el) => {
+        if (original.bg !== undefined) el.style.backgroundColor = original.bg;
+        if (original.color !== undefined) el.style.color = original.color;
+        if (original.borderColor !== undefined) el.style.borderColor = original.borderColor;
+      });
+    };
+  }, [isOpen, config.baseColor, config.accentColor, colorsExplicitlyChanged]);
+
+  // Handle brand preset selection
+  const handleBrandSelect = useCallback((brandId: BrandId) => {
+    const preset = brandPresets.find((p) => p.id === brandId);
+    if (preset) {
+      setConfig(preset.config);
+      // Update global brand context for logo switching
+      setBrand(brandId);
+    }
+  }, [setBrand]);
+
+  // Reset theme
+  const handleReset = useCallback(() => {
+    setConfig(defaultThemeConfig);
+    resetThemeFromDOM();
+    // Reset color change tracking
+    setColorsExplicitlyChanged(false);
+  }, []);
+
+  // Copy to clipboard
+  const handleCopy = useCallback(async (text: string, id: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedId(id);
+      setTimeout(() => setCopiedId(null), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  }, []);
+
+  // Update config property
+  const updateConfig = useCallback((updates: Partial<ThemeConfig>) => {
+    setConfig((prev) => ({ ...prev, ...updates }));
+    // Track if user explicitly changed colors (to trigger color injection)
+    if (updates.baseColor !== undefined || updates.accentColor !== undefined) {
+      setColorsExplicitlyChanged(true);
+    }
+  }, []);
+
+  // Close and reset
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    resetThemeFromDOM();
+    // Reset color change tracking for next session
+    setColorsExplicitlyChanged(false);
+  }, []);
+
+  if (!mounted) return null;
+
+  const trigger = (
+    <button
+      onClick={() => setIsOpen(true)}
+      className={cn(
+        "fixed bottom-6 right-6 z-[9998]",
+        "flex h-14 w-14 items-center justify-center",
+        "rounded-full bg-[#333F48] text-white shadow-lg",
+        "hover:scale-105 hover:shadow-xl",
+        "transition-all duration-200",
+        "focus:outline-none focus:ring-2 focus:ring-[#00A3E1] focus:ring-offset-2",
+        isOpen && "hidden"
+      )}
+      aria-label="Open Sonance DevTools"
+    >
+      <Palette className="h-6 w-6" />
+    </button>
+  );
+
+  const panel = isOpen && (
+    <div
+      data-sonance-devtools="true"
+      className={cn(
+        "fixed bottom-6 right-6 z-[9999]",
+        "w-[360px] max-h-[80vh]",
+        "bg-white rounded-lg shadow-2xl border border-gray-200",
+        "flex flex-col overflow-hidden",
+        "font-['Montserrat',sans-serif]"
+      )}
+      style={{ colorScheme: "light" }}
+    >
+      {/* Header - Simplified */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-[#333F48]">
+        <div className="flex items-center gap-2">
+          <Palette className="h-5 w-5 text-[#00A3E1]" />
+          <span id="span-sonance-devtools" className="text-sm font-semibold text-white">
+            Sonance DevTools
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          {/* Theme Mode Toggle */}
+          <button
+            onClick={toggleThemeMode}
+            className="p-1.5 rounded hover:bg-white/10 transition-colors"
+            aria-label={resolvedTheme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+            title={resolvedTheme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+          >
+            {resolvedTheme === "dark" ? (
+              <Sun className="h-4 w-4 text-yellow-400" />
+            ) : (
+              <Moon className="h-4 w-4 text-white/80" />
+            )}
+          </button>
+          {/* Close Button */}
+          <button
+            onClick={handleClose}
+            className="p-1.5 rounded hover:bg-white/10 transition-colors"
+            aria-label="Close"
+          >
+            <X className="h-4 w-4 text-white" />
+          </button>
+        </div>
+      </div>
+
+      {/* Icon Navigation Bar */}
+      <div className="flex items-center justify-evenly border-b border-gray-200 bg-gray-50 px-2 py-1">
+        {tabs.map((tab) => {
+          const IconComponent = tab.icon;
+          const isActive = activeTab === tab.id;
+          return (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={cn(
+                "p-2 rounded-md transition-all",
+                isActive
+                  ? "bg-[#333F48] text-white"
+                  : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
+              )}
+              aria-label={tab.label}
+              title={tab.label}
+            >
+              <IconComponent className="h-4 w-4" />
+          </button>
+          );
+        })}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4 text-[#333F48]">
+        {/* Analysis Tab */}
+        {activeTab === "analysis" && (
+          <AnalysisPanel
+            analysisStatus={analysisStatus}
+            analysisResult={analysisResult}
+            analysisError={analysisError}
+            bulkTagStatus={bulkTagStatus}
+            bulkTagMessage={bulkTagMessage}
+            onRunAnalysis={handleRunAnalysis}
+            onBulkTag={handleBulkTagAll}
+          />
+        )}
+        
+        {/* Brand Tab */}
+        {activeTab === "brand" && (
+          <BrandPanel
+            config={config}
+            onBrandSelect={handleBrandSelect}
+            logoAssetsByBrand={logoAssetsByBrand}
+            currentTheme={resolvedTheme || theme || "light"}
+          />
+        )}
+        
+        {/* Components Tab */}
+        {activeTab === "components" && (
+          <ComponentsPanel
+            copiedId={copiedId}
+            onCopy={handleCopy}
+            installedComponents={installedComponents}
+            inspectorEnabled={inspectorEnabled}
+            onToggleInspector={toggleInspector}
+            config={config}
+            updateConfig={updateConfig}
+            onReset={handleReset}
+          />
+        )}
+        
+        {/* Logos Tab */}
+        {activeTab === "logos" && (
+          <LogosPanel
+            logoAssets={logoAssets}
+            logoAssetsByBrand={logoAssetsByBrand}
+            selectedLogoId={selectedLogoId}
+            globalLogoConfig={globalLogoConfig}
+            individualLogoConfigs={individualLogoConfigs}
+            originalLogoStates={originalLogoStates}
+            taggedElements={taggedElements}
+            onGlobalConfigChange={handleGlobalLogoConfigChange}
+            onIndividualConfigChange={handleIndividualLogoConfigChange}
+            onSelectLogo={handleSelectLogo}
+            onResetAll={handleResetAllLogos}
+            onResetLogo={handleResetLogo}
+            onSaveChanges={handleSaveLogoChanges}
+            saveStatus={logoSaveStatus}
+            saveMessage={logoSaveMessage}
+            findComplementaryLogo={findComplementaryLogo}
+            currentTheme={resolvedTheme || theme || "light"}
+            onAutoFixId={handleAutoFixId}
+            autoFixStatus={autoFixStatus}
+            autoFixMessage={autoFixMessage}
+            inspectorEnabled={logoInspectorEnabled}
+            onToggleInspector={toggleLogoInspector}
+          />
+        )}
+        
+        {/* Text Tab */}
+        {activeTab === "text" && (
+          <TextPanel
+            inspectorEnabled={textInspectorEnabled}
+            onToggleInspector={toggleTextInspector}
+            taggedElements={taggedElements}
+          />
+        )}
+      </div>
+    </div>
+  );
+
+  return createPortal(
+    <>
+      {trigger}
+      {panel}
+      {/* Visual Inspector Overlay */}
+      {(inspectorEnabled || logoInspectorEnabled || textInspectorEnabled) && taggedElements.length > 0 && (
+        <InspectorOverlay 
+          elements={taggedElements}
+          selectedLogoId={selectedLogoId}
+          onLogoClick={handleSelectLogo}
+          interactive={logoInspectorEnabled || textInspectorEnabled}
+        />
+      )}
+    </>,
+    document.body
+  );
+}
+
+// ---- Visual Inspector Overlay ----
+
+interface InspectorOverlayProps {
+  elements: DetectedElement[];
+  selectedLogoId?: string | null;
+  onLogoClick?: (logoId: string) => void;
+  interactive?: boolean;
+}
+
+// Color config for different element types
+const inspectorColors: Record<DetectedElementType, { border: string; bg: string; selectedBorder: string; selectedBg: string }> = {
+  component: { border: "#00A3E1", bg: "#00A3E1", selectedBorder: "#00A3E1", selectedBg: "#00A3E1" }, // Sonance blue
+  logo: { border: "#FC4C02", bg: "#FC4C02", selectedBorder: "#C02B0A", selectedBg: "#C02B0A" },       // IPORT orange / Blaze red for selected
+  text: { border: "#8B5CF6", bg: "#8B5CF6", selectedBorder: "#7C3AED", selectedBg: "#7C3AED" },       // Purple for text
+};
+
+function InspectorOverlay({ elements, selectedLogoId, onLogoClick, interactive = false }: InspectorOverlayProps) {
+  return (
+    <div
+      className="fixed inset-0 z-[9997] pointer-events-none"
+      style={{ colorScheme: "light" }}
+    >
+      {elements.map((el, index) => {
+        const isSelected = el.type === "logo" && el.logoId === selectedLogoId;
+        const colors = inspectorColors[el.type];
+        const borderColor = isSelected ? colors.selectedBorder : colors.border;
+        const bgColor = isSelected ? colors.selectedBg : colors.bg;
+        const isClickable = interactive && el.type === "logo" && el.logoId && onLogoClick;
+        
+        return (
+          <div
+            key={`${el.type}-${el.logoId || el.name}-${index}`}
+            className={cn(
+              "absolute",
+              isClickable && "cursor-pointer"
+            )}
+          style={{
+            top: el.rect.top,
+            left: el.rect.left,
+            width: el.rect.width,
+            height: el.rect.height,
+              pointerEvents: isClickable ? "auto" : "none",
+            }}
+            onClick={(e) => {
+              if (isClickable) {
+                e.stopPropagation();
+                onLogoClick(el.logoId!);
+              }
+          }}
+        >
+          {/* Border highlight */}
+          <div
+              className={cn(
+                "absolute inset-0 rounded-sm transition-all",
+                isSelected ? "border-3" : "border-2"
+              )}
+              style={{ 
+                pointerEvents: "none",
+                borderColor: borderColor,
+                boxShadow: isSelected ? `0 0 0 2px ${borderColor}40` : undefined,
+              }}
+          />
+          {/* Label */}
+          <div
+            className={cn(
+              "absolute -top-6 left-0",
+              "px-1.5 py-0.5 text-[10px] font-medium",
+                "text-white rounded-t-sm",
+                "whitespace-nowrap shadow-sm",
+                "flex items-center gap-1",
+                "transition-all"
+              )}
+              style={{ backgroundColor: bgColor }}
+            >
+              {el.type === "logo" && <ImageIcon className="h-3 w-3" />}
+            {el.name}
+              {isSelected && <span id="span-title" className="ml-1">✓</span>}
+          </div>
+            {/* Click hint for logos */}
+            {isClickable && !isSelected && (
+              <div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
+                <span id="span-click-to-select" className="px-2 py-1 text-[10px] font-medium text-white bg-black/70 rounded">
+                  Click to select
+                </span>
+        </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---- Project Analysis Modal ----
+
+interface AnalysisModalProps {
+  analysisStatus: AnalysisStatus;
+  analysisResult: AnalysisResult | null;
+  analysisError: string;
+  bulkTagStatus: "idle" | "tagging" | "complete";
+  bulkTagMessage: string;
+  onClose: () => void;
+  onRunAnalysis: () => void;
+  onBulkTag: (elementIds?: string[], category?: string) => void;
+}
+
+function AnalysisModal({
+  analysisStatus,
+  analysisResult,
+  analysisError,
+  bulkTagStatus,
+  bulkTagMessage,
+  onClose,
+  onRunAnalysis,
+  onBulkTag,
+}: AnalysisModalProps) {
+  return (
+    <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/50 font-['Montserrat',sans-serif]">
+      <div
+        className="w-[500px] max-h-[80vh] bg-white rounded-lg shadow-2xl overflow-hidden flex flex-col"
+        style={{ colorScheme: "light" }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-200 bg-[#333F48]">
+          <div className="flex items-center gap-2">
+            <Scan className="h-5 w-5 text-[#00A3E1]" />
+            <span id="analysis-modal-span-project-analysis" className="text-base font-semibold text-white">Project Analysis</span>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded hover:bg-white/10 transition-colors"
+            aria-label="Close"
+          >
+            <X className="h-4 w-4 text-white" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-5 space-y-5 text-[#333F48]">
+          {/* Initial State */}
+          {analysisStatus === "idle" && !analysisResult && (
+            <div className="text-center py-8 space-y-4">
+              <div className="mx-auto w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center">
+                <Scan className="h-8 w-8 text-gray-400" />
+              </div>
+              <div>
+                <h3 id="analysis-modal-h3-analyze-your-project" className="text-lg font-medium">Analyze Your Project</h3>
+                <p id="analysis-modal-p-scan-your-codebase-t" className="text-sm text-gray-500 mt-1">
+                  Scan your codebase to index all images, logos, and theme files.
+                  This enables reliable auto-tagging and one-click ID injection.
+                </p>
+              </div>
+              <button
+                onClick={onRunAnalysis}
+                className="inline-flex items-center gap-2 px-5 py-2.5 bg-[#333F48] text-white text-sm font-medium rounded hover:bg-[#2a343c] transition-colors"
+              >
+                <Scan className="h-4 w-4" />
+                Scan Project
+              </button>
+            </div>
+          )}
+
+          {/* Scanning State */}
+          {analysisStatus === "scanning" && (
+            <div className="text-center py-8 space-y-4">
+              <div className="mx-auto w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center">
+                <Loader2 className="h-8 w-8 text-[#00A3E1] animate-spin" />
+              </div>
+              <div>
+                <h3 id="analysis-modal-h3-scanning" className="text-lg font-medium">Scanning...</h3>
+                <p id="analysis-modal-p-analyzing-your-sourc" className="text-sm text-gray-500 mt-1">
+                  Analyzing your source files for images and design assets.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Error State */}
+          {analysisStatus === "error" && (
+            <div className="text-center py-8 space-y-4">
+              <div className="mx-auto w-16 h-16 rounded-full bg-red-50 flex items-center justify-center">
+                <AlertCircle className="h-8 w-8 text-red-500" />
+              </div>
+              <div>
+                <h3 id="analysis-modal-h3-analysis-failed" className="text-lg font-medium text-red-600">Analysis Failed</h3>
+                <p id="analysis-modal-p-analysiserror" className="text-sm text-gray-500 mt-1">{analysisError}</p>
+              </div>
+              <button
+                onClick={onRunAnalysis}
+                className="inline-flex items-center gap-2 px-5 py-2.5 bg-[#333F48] text-white text-sm font-medium rounded hover:bg-[#2a343c] transition-colors"
+              >
+                <RotateCcw className="h-4 w-4" />
+                Try Again
+              </button>
+            </div>
+          )}
+
+          {/* Results */}
+          {analysisStatus === "complete" && analysisResult && (
+            <>
+              {/* Overview Stats */}
+              <div className="grid grid-cols-3 gap-3">
+                <div className="p-3 rounded-lg border border-gray-200 bg-gray-50 text-center">
+                  <div className="text-xs text-gray-500 uppercase tracking-wide mb-1">Files</div>
+                  <div className="text-xl font-semibold">{analysisResult.filesScanned}</div>
+                </div>
+                <div className="p-3 rounded-lg border border-green-200 bg-green-50 text-center">
+                  <div className="text-xs text-green-600 uppercase tracking-wide mb-1">With IDs</div>
+                  <div className="text-xl font-semibold text-green-700">{analysisResult.summary.elementsWithId}</div>
+                </div>
+                <div className="p-3 rounded-lg border border-amber-200 bg-amber-50 text-center">
+                  <div className="text-xs text-amber-600 uppercase tracking-wide mb-1">Missing IDs</div>
+                  <div className="text-xl font-semibold text-amber-700">{analysisResult.summary.elementsMissingId}</div>
+                </div>
+              </div>
+
+              {/* Category Breakdown */}
+              <div className="space-y-2">
+                <h4 id="analysis-modal-h4-elements-by-category" className="text-xs font-medium text-gray-500 uppercase tracking-wide">Elements by Category</h4>
+                <div className="space-y-2">
+                  {/* Images */}
+                  {(() => {
+                    const cat = analysisResult.summary.byCategory?.image;
+                    const total = cat?.total || analysisResult.summary.totalImages;
+                    const withId = cat?.withId || analysisResult.summary.imagesWithId;
+                    const missingId = cat?.missingId || analysisResult.summary.imagesMissingId;
+                    const isComplete = withId === total && total > 0;
+                    return (
+                      <div className={cn(
+                        "flex items-center justify-between p-3 rounded border",
+                        isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                      )}>
+                        <div className="flex items-center gap-2">
+                          <div className={cn("p-1.5 rounded", isComplete ? "bg-green-100" : "bg-blue-100")}>
+                            <ImageIcon className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-blue-600")} />
+                          </div>
+                          <span id="analysis-modal-span-images" className="text-sm font-medium">Images</span>
+                        </div>
+                        <div className="flex items-center gap-3 text-sm">
+                          <div className="flex items-center gap-1">
+                            <span id="analysis-modal-span-withid" className={cn("font-medium", isComplete ? "text-green-700" : "text-gray-700")}>
+                              {withId}
+                            </span>
+                            <span id="analysis-modal-span" className="text-gray-400">/</span>
+                            <span id="analysis-modal-span-total" className="text-gray-500">{total}</span>
+                          </div>
+                          {missingId > 0 && (
+                            <button
+                              onClick={() => onBulkTag(undefined, "image")}
+                              disabled={bulkTagStatus === "tagging"}
+                              className="px-2 py-1 text-xs font-medium text-white bg-blue-500 hover:bg-blue-600 rounded disabled:opacity-50"
+                            >
+                              Tag {missingId}
+                            </button>
+                          )}
+                          {isComplete && <CheckCircle className="h-4 w-4 text-green-600" />}
+                        </div>
+                      </div>
+                    );
+                  })()}
+                  
+                  {/* Text Elements */}
+                  {analysisResult.summary.byCategory?.text && (() => {
+                    const cat = analysisResult.summary.byCategory.text;
+                    const isComplete = cat.withId === cat.total && cat.total > 0;
+                    return (
+                      <div className={cn(
+                        "flex items-center justify-between p-3 rounded border",
+                        isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                      )}>
+                        <div className="flex items-center gap-2">
+                          <div className={cn("p-1.5 rounded", isComplete ? "bg-green-100" : "bg-purple-100")}>
+                            <Type className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-purple-600")} />
+                          </div>
+                          <span id="analysis-modal-span-text" className="text-sm font-medium">Text</span>
+                        </div>
+                        <div className="flex items-center gap-3 text-sm">
+                          <div className="flex items-center gap-1">
+                            <span id="analysis-modal-span-catwithid" className={cn("font-medium", isComplete ? "text-green-700" : "text-gray-700")}>
+                              {cat.withId}
+                            </span>
+                            <span id="analysis-modal-span" className="text-gray-400">/</span>
+                            <span id="analysis-modal-span-cattotal" className="text-gray-500">{cat.total}</span>
+                          </div>
+                          {cat.missingId > 0 && (
+                            <button
+                              onClick={() => onBulkTag(undefined, "text")}
+                              disabled={bulkTagStatus === "tagging"}
+                              className="px-2 py-1 text-xs font-medium text-white bg-purple-500 hover:bg-purple-600 rounded disabled:opacity-50"
+                            >
+                              Tag {cat.missingId}
+                            </button>
+                          )}
+                          {isComplete && <CheckCircle className="h-4 w-4 text-green-600" />}
+                        </div>
+                      </div>
+                    );
+                  })()}
+                  
+                  {/* Interactive (Buttons, Links) */}
+                  {analysisResult.summary.byCategory?.interactive && (() => {
+                    const cat = analysisResult.summary.byCategory.interactive;
+                    const isComplete = cat.withId === cat.total && cat.total > 0;
+                    return (
+                      <div className={cn(
+                        "flex items-center justify-between p-3 rounded border",
+                        isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                      )}>
+                        <div className="flex items-center gap-2">
+                          <div className={cn("p-1.5 rounded", isComplete ? "bg-green-100" : "bg-cyan-100")}>
+                            <MousePointer className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-cyan-600")} />
+                          </div>
+                          <span id="analysis-modal-span-interactive" className="text-sm font-medium">Interactive</span>
+                        </div>
+                        <div className="flex items-center gap-3 text-sm">
+                          <div className="flex items-center gap-1">
+                            <span id="analysis-modal-span-catwithid" className={cn("font-medium", isComplete ? "text-green-700" : "text-gray-700")}>
+                              {cat.withId}
+                            </span>
+                            <span id="analysis-modal-span" className="text-gray-400">/</span>
+                            <span id="analysis-modal-span-cattotal" className="text-gray-500">{cat.total}</span>
+                          </div>
+                          {cat.missingId > 0 && (
+                            <button
+                              onClick={() => onBulkTag(undefined, "interactive")}
+                              disabled={bulkTagStatus === "tagging"}
+                              className="px-2 py-1 text-xs font-medium text-white bg-cyan-500 hover:bg-cyan-600 rounded disabled:opacity-50"
+                            >
+                              Tag {cat.missingId}
+                            </button>
+                          )}
+                          {isComplete && <CheckCircle className="h-4 w-4 text-green-600" />}
+                        </div>
+                      </div>
+                    );
+                  })()}
+                  
+                  {/* Component Definitions (UI/Layout components) */}
+                  {analysisResult.summary.byCategory?.definition && (() => {
+                    const cat = analysisResult.summary.byCategory.definition;
+                    const isComplete = cat.withId === cat.total && cat.total > 0;
+                    return (
+                      <div className={cn(
+                        "flex items-center justify-between p-3 rounded border",
+                        isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                      )}>
+                        <div className="flex items-center gap-2">
+                          <div className={cn("p-1.5 rounded", isComplete ? "bg-green-100" : "bg-violet-100")}>
+                            <Box className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-violet-600")} />
+                          </div>
+                          <span id="analysis-modal-span-definitions" className="text-sm font-medium">Components</span>
+                        </div>
+                        <div className="flex items-center gap-3 text-sm">
+                          <div className="flex items-center gap-1">
+                            <span id="analysis-modal-span-defwithid" className={cn("font-medium", isComplete ? "text-green-700" : "text-gray-700")}>
+                              {cat.withId}
+                            </span>
+                            <span className="text-gray-400">/</span>
+                            <span id="analysis-modal-span-deftotal" className="text-gray-500">{cat.total}</span>
+                          </div>
+                          {cat.missingId > 0 && (
+                            <button
+                              onClick={() => onBulkTag(undefined, "definition")}
+                              disabled={bulkTagStatus === "tagging"}
+                              className="px-2 py-1 text-xs font-medium text-white bg-violet-500 hover:bg-violet-600 rounded disabled:opacity-50"
+                            >
+                              Tag {cat.missingId}
+                            </button>
+                          )}
+                          {isComplete && <CheckCircle className="h-4 w-4 text-green-600" />}
+                        </div>
+                      </div>
+                    );
+                  })()}
+                  
+                  {/* Inputs */}
+                  {analysisResult.summary.byCategory?.input && (() => {
+                    const cat = analysisResult.summary.byCategory.input;
+                    const isComplete = cat.withId === cat.total && cat.total > 0;
+                    return (
+                      <div className={cn(
+                        "flex items-center justify-between p-3 rounded border",
+                        isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                      )}>
+                        <div className="flex items-center gap-2">
+                          <div className={cn("p-1.5 rounded", isComplete ? "bg-green-100" : "bg-orange-100")}>
+                            <FormInput className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-orange-600")} />
+                          </div>
+                          <span id="analysis-modal-span-inputs" className="text-sm font-medium">Inputs</span>
+                        </div>
+                        <div className="flex items-center gap-3 text-sm">
+                          <div className="flex items-center gap-1">
+                            <span id="analysis-modal-span-catwithid" className={cn("font-medium", isComplete ? "text-green-700" : "text-gray-700")}>
+                              {cat.withId}
+                            </span>
+                            <span id="analysis-modal-span" className="text-gray-400">/</span>
+                            <span id="analysis-modal-span-cattotal" className="text-gray-500">{cat.total}</span>
+                          </div>
+                          {cat.missingId > 0 && (
+                            <button
+                              onClick={() => onBulkTag(undefined, "input")}
+                              disabled={bulkTagStatus === "tagging"}
+                              className="px-2 py-1 text-xs font-medium text-white bg-orange-500 hover:bg-orange-600 rounded disabled:opacity-50"
+                            >
+                              Tag {cat.missingId}
+                            </button>
+                          )}
+                          {isComplete && <CheckCircle className="h-4 w-4 text-green-600" />}
+                        </div>
+                      </div>
+                    );
+                  })()}
+                </div>
+              </div>
+
+              {/* Brand Logos Info */}
+              {analysisResult.summary.brandLogosDetected > 0 && (
+                <div className="p-3 rounded border border-blue-200 bg-blue-50">
+                  <p id="analysis-modal-p" className="text-sm text-blue-700">
+                    <strong>{analysisResult.summary.brandLogosDetected}</strong> brand logo(s) detected (Sonance, IPORT, or Blaze)
+                  </p>
+                </div>
+              )}
+
+              {/* Auto-Tag Section */}
+              {/* Global Auto-Tag All Button */}
+              {analysisResult.summary.elementsMissingId > 0 && (
+                <div className="space-y-3 pt-3 border-t border-gray-200">
+                  <h4 id="analysis-modal-h4-autotag-all-elements" className="text-sm font-medium text-gray-700">Auto-Tag All Elements</h4>
+                  <p id="analysis-modal-p-automatically-add-un" className="text-xs text-gray-500">
+                    Automatically add unique IDs to all elements missing them. This enables precise individual editing and persistent saves.
+                  </p>
+                  
+                  {bulkTagMessage && (
+                    <div className={cn(
+                      "p-3 rounded text-sm",
+                      bulkTagStatus === "complete" && bulkTagMessage.includes("failed")
+                        ? "bg-amber-50 text-amber-700 border border-amber-200"
+                        : "bg-green-50 text-green-700 border border-green-200"
+                    )}>
+                      {bulkTagMessage}
+                    </div>
+                  )}
+                  
+                  <button
+                    onClick={() => onBulkTag()}
+                    disabled={bulkTagStatus === "tagging"}
+                    className={cn(
+                      "w-full flex items-center justify-center gap-2 px-4 py-2.5",
+                      "text-sm font-medium text-white rounded transition-colors",
+                      "bg-[#333F48] hover:bg-[#2a343c]",
+                      "disabled:opacity-50 disabled:cursor-not-allowed"
+                    )}
+                  >
+                    {bulkTagStatus === "tagging" ? (
+                      <>
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                        Tagging...
+                      </>
+                    ) : (
+                      <>
+                        <Wand2 className="h-4 w-4" />
+                        Auto-Tag All ({analysisResult.summary.elementsMissingId} elements)
+                      </>
+                    )}
+                  </button>
+                </div>
+              )}
+
+              {/* All Images Have IDs */}
+              {analysisResult.summary.imagesMissingId === 0 && analysisResult.summary.totalImages > 0 && (
+                <div className="flex items-center gap-3 p-4 rounded border border-green-200 bg-green-50">
+                  <CheckCircle className="h-6 w-6 text-green-600 shrink-0" />
+                  <div>
+                    <p id="analysis-modal-p-all-images-have-ids" className="text-sm font-medium text-green-700">All images have IDs!</p>
+                    <p id="analysis-modal-p-your-project-is-full" className="text-xs text-green-600 mt-0.5">Your project is fully indexed and ready for individual styling.</p>
+                  </div>
+                </div>
+              )}
+
+              {/* Theme Files */}
+              {analysisResult.themeFiles.length > 0 && (
+                <div className="space-y-2">
+                  <h4 id="analysis-modal-h4-theme-files" className="text-xs font-medium text-gray-500 uppercase tracking-wide">Theme Files</h4>
+                  <div className="space-y-1">
+                    {analysisResult.themeFiles.map((file) => (
+                      <div key={file.filePath} className="flex items-center justify-between p-2 rounded bg-gray-50 text-xs">
+                        <span id="analysis-modal-span-filefilepath" className="font-mono text-gray-600 truncate">{file.filePath}</span>
+                        {file.hasBrandVariables && (
+                          <span id="analysis-modal-span-brand" className="shrink-0 px-1.5 py-0.5 rounded bg-[#00A3E1]/10 text-[#00A3E1] text-[10px] font-medium">
+                            Brand
+                          </span>
+                        )}
+        </div>
+      ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Scan Info */}
+              <div className="text-xs text-gray-400 flex items-center justify-between">
+                <span id="analysis-modal-span-scanned-in-analysisr">Scanned in {analysisResult.scanDuration}ms</span>
+                <button
+                  onClick={onRunAnalysis}
+                  className="text-[#00A3E1] hover:underline"
+                >
+                  Re-scan
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="px-5 py-4 border-t border-gray-200 bg-gray-50">
+          <button
+            onClick={onClose}
+            className="w-full py-2 text-sm font-medium text-gray-600 hover:text-gray-800 transition-colors"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---- Analysis Panel (Inline version for new nav) ----
+
+interface AnalysisPanelProps {
+  analysisStatus: AnalysisStatus;
+  analysisResult: AnalysisResult | null;
+  analysisError: string;
+  bulkTagStatus: "idle" | "tagging" | "complete";
+  bulkTagMessage: string;
+  onRunAnalysis: () => void;
+  onBulkTag: (elementIds?: string[], category?: string) => void;
+}
+
+function AnalysisPanel({
+  analysisStatus,
+  analysisResult,
+  analysisError,
+  bulkTagStatus,
+  bulkTagMessage,
+  onRunAnalysis,
+  onBulkTag,
+}: AnalysisPanelProps) {
+  return (
+    <div className="space-y-4">
+      {/* Initial State */}
+      {analysisStatus === "idle" && !analysisResult && (
+        <div className="text-center py-6 space-y-4">
+          <div className="mx-auto w-14 h-14 rounded-full bg-gray-100 flex items-center justify-center">
+            <Scan className="h-7 w-7 text-gray-400" />
+          </div>
+          <div>
+            <h3 id="analysis-panel-h3-analyze-your-project" className="text-base font-medium">Analyze Your Project</h3>
+            <p id="analysis-panel-p-scan-your-codebase-t" className="text-xs text-gray-500 mt-1">
+              Scan your codebase to index all images, logos, and theme files.
+            </p>
+          </div>
+          <button
+            onClick={onRunAnalysis}
+            className="inline-flex items-center gap-2 px-4 py-2 bg-[#333F48] text-white text-sm font-medium rounded hover:bg-[#2a343c] transition-colors"
+          >
+            <Scan className="h-4 w-4" />
+            Scan Project
+          </button>
+        </div>
+      )}
+
+      {/* Scanning State */}
+      {analysisStatus === "scanning" && (
+        <div className="text-center py-6 space-y-4">
+          <div className="mx-auto w-14 h-14 rounded-full bg-blue-50 flex items-center justify-center">
+            <Loader2 className="h-7 w-7 text-[#00A3E1] animate-spin" />
+          </div>
+          <div>
+            <h3 id="analysis-panel-h3-scanning" className="text-base font-medium">Scanning...</h3>
+            <p id="analysis-panel-p-analyzing-your-sourc" className="text-xs text-gray-500 mt-1">
+              Analyzing your source files for design assets.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Error State */}
+      {analysisStatus === "error" && (
+        <div className="text-center py-6 space-y-4">
+          <div className="mx-auto w-14 h-14 rounded-full bg-red-50 flex items-center justify-center">
+            <AlertCircle className="h-7 w-7 text-red-500" />
+          </div>
+          <div>
+            <h3 id="analysis-panel-h3-analysis-failed" className="text-base font-medium text-red-600">Analysis Failed</h3>
+            <p id="analysis-panel-p-analysiserror" className="text-xs text-gray-500 mt-1">{analysisError}</p>
+          </div>
+          <button
+            onClick={onRunAnalysis}
+            className="inline-flex items-center gap-2 px-4 py-2 bg-[#333F48] text-white text-sm font-medium rounded hover:bg-[#2a343c] transition-colors"
+          >
+            <RotateCcw className="h-4 w-4" />
+            Try Again
+          </button>
+        </div>
+      )}
+
+      {/* Results */}
+      {analysisStatus === "complete" && analysisResult && (
+        <>
+          {/* Overview Stats */}
+          <div className="grid grid-cols-3 gap-2">
+            <div className="p-2 rounded border border-gray-200 bg-gray-50 text-center">
+              <div className="text-[10px] text-gray-500 uppercase tracking-wide">Files</div>
+              <div className="text-lg font-semibold">{analysisResult.filesScanned}</div>
+            </div>
+            <div className="p-2 rounded border border-green-200 bg-green-50 text-center">
+              <div className="text-[10px] text-green-600 uppercase tracking-wide">With IDs</div>
+              <div className="text-lg font-semibold text-green-700">{analysisResult.summary.elementsWithId}</div>
+            </div>
+            <div className="p-2 rounded border border-amber-200 bg-amber-50 text-center">
+              <div className="text-[10px] text-amber-600 uppercase tracking-wide">Missing</div>
+              <div className="text-lg font-semibold text-amber-700">{analysisResult.summary.elementsMissingId}</div>
+            </div>
+          </div>
+
+          {/* Category Breakdown */}
+          <div className="space-y-2">
+            <h4 id="analysis-panel-h4-elements-by-category" className="text-xs font-medium text-gray-500 uppercase tracking-wide">Elements by Category</h4>
+            <div className="space-y-1.5">
+              {/* Images */}
+              {(() => {
+                const cat = analysisResult.summary.byCategory?.image;
+                const total = cat?.total || analysisResult.summary.totalImages;
+                const withId = cat?.withId || analysisResult.summary.imagesWithId;
+                const missingId = cat?.missingId || analysisResult.summary.imagesMissingId;
+                const isComplete = withId === total && total > 0;
+                return (
+                  <div className={cn(
+                    "flex items-center justify-between p-2 rounded border",
+                    isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                  )}>
+                    <div className="flex items-center gap-2">
+                      <ImageIcon className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-blue-600")} />
+                      <span id="analysis-panel-span-images" className="text-xs font-medium">Images</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <span id="analysis-panel-span-withidtotal" className={isComplete ? "text-green-700" : "text-gray-600"}>{withId}/{total}</span>
+                      {missingId > 0 && (
+                        <button
+                          onClick={() => onBulkTag(undefined, "image")}
+                          disabled={bulkTagStatus === "tagging"}
+                          className="px-1.5 py-0.5 text-[10px] font-medium text-white bg-blue-500 hover:bg-blue-600 rounded disabled:opacity-50"
+                        >
+                          Tag {missingId}
+                        </button>
+                      )}
+                      {isComplete && <CheckCircle className="h-3 w-3 text-green-600" />}
+                    </div>
+                  </div>
+                );
+              })()}
+              
+              {/* Text Elements */}
+              {analysisResult.summary.byCategory?.text && (() => {
+                const cat = analysisResult.summary.byCategory.text;
+                const isComplete = cat.withId === cat.total && cat.total > 0;
+                return (
+                  <div className={cn(
+                    "flex items-center justify-between p-2 rounded border",
+                    isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                  )}>
+                    <div className="flex items-center gap-2">
+                      <Type className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-purple-600")} />
+                      <span id="analysis-panel-span-text" className="text-xs font-medium">Text</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <span id="analysis-panel-span-catwithidcattotal" className={isComplete ? "text-green-700" : "text-gray-600"}>{cat.withId}/{cat.total}</span>
+                      {cat.missingId > 0 && (
+                        <button
+                          onClick={() => onBulkTag(undefined, "text")}
+                          disabled={bulkTagStatus === "tagging"}
+                          className="px-1.5 py-0.5 text-[10px] font-medium text-white bg-purple-500 hover:bg-purple-600 rounded disabled:opacity-50"
+                        >
+                          Tag {cat.missingId}
+                        </button>
+                      )}
+                      {isComplete && <CheckCircle className="h-3 w-3 text-green-600" />}
+                    </div>
+                  </div>
+                );
+              })()}
+              
+              {/* Interactive (Buttons, Links) */}
+              {analysisResult.summary.byCategory?.interactive && (() => {
+                const cat = analysisResult.summary.byCategory.interactive;
+                const isComplete = cat.withId === cat.total && cat.total > 0;
+                return (
+                  <div className={cn(
+                    "flex items-center justify-between p-2 rounded border",
+                    isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                  )}>
+                    <div className="flex items-center gap-2">
+                      <MousePointer className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-cyan-600")} />
+                      <span id="analysis-panel-span-interactive" className="text-xs font-medium">Interactive</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <span id="analysis-panel-span-catwithidcattotal" className={isComplete ? "text-green-700" : "text-gray-600"}>{cat.withId}/{cat.total}</span>
+                      {cat.missingId > 0 && (
+                        <button
+                          onClick={() => onBulkTag(undefined, "interactive")}
+                          disabled={bulkTagStatus === "tagging"}
+                          className="px-1.5 py-0.5 text-[10px] font-medium text-white bg-cyan-500 hover:bg-cyan-600 rounded disabled:opacity-50"
+                        >
+                          Tag {cat.missingId}
+                        </button>
+                      )}
+                      {isComplete && <CheckCircle className="h-3 w-3 text-green-600" />}
+                    </div>
+                  </div>
+                );
+              })()}
+              
+              {/* Component Definitions */}
+              {analysisResult.summary.byCategory?.definition && (() => {
+                const cat = analysisResult.summary.byCategory.definition;
+                const isComplete = cat.withId === cat.total && cat.total > 0;
+                return (
+                  <div className={cn(
+                    "flex items-center justify-between p-2 rounded border",
+                    isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                  )}>
+                    <div className="flex items-center gap-2">
+                      <Box className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-violet-600")} />
+                      <span id="analysis-panel-span-definitions" className="text-xs font-medium">Components</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <span id="analysis-panel-span-defwithidtotal" className={isComplete ? "text-green-700" : "text-gray-600"}>{cat.withId}/{cat.total}</span>
+                      {cat.missingId > 0 && (
+                        <button
+                          onClick={() => onBulkTag(undefined, "definition")}
+                          disabled={bulkTagStatus === "tagging"}
+                          className="px-1.5 py-0.5 text-[10px] font-medium text-white bg-violet-500 hover:bg-violet-600 rounded disabled:opacity-50"
+                        >
+                          Tag {cat.missingId}
+                        </button>
+                      )}
+                      {isComplete && <CheckCircle className="h-3 w-3 text-green-600" />}
+                    </div>
+                  </div>
+                );
+              })()}
+              
+              {/* Inputs */}
+              {analysisResult.summary.byCategory?.input && (() => {
+                const cat = analysisResult.summary.byCategory.input;
+                const isComplete = cat.withId === cat.total && cat.total > 0;
+                return (
+                  <div className={cn(
+                    "flex items-center justify-between p-2 rounded border",
+                    isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                  )}>
+                    <div className="flex items-center gap-2">
+                      <FormInput className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-orange-600")} />
+                      <span id="analysis-panel-span-inputs" className="text-xs font-medium">Inputs</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <span id="analysis-panel-span-catwithidcattotal" className={isComplete ? "text-green-700" : "text-gray-600"}>{cat.withId}/{cat.total}</span>
+                      {cat.missingId > 0 && (
+                        <button
+                          onClick={() => onBulkTag(undefined, "input")}
+                          disabled={bulkTagStatus === "tagging"}
+                          className="px-1.5 py-0.5 text-[10px] font-medium text-white bg-orange-500 hover:bg-orange-600 rounded disabled:opacity-50"
+                        >
+                          Tag {cat.missingId}
+                        </button>
+                      )}
+                      {isComplete && <CheckCircle className="h-3 w-3 text-green-600" />}
+                    </div>
+                  </div>
+                );
+              })()}
+            </div>
+          </div>
+
+          {/* Auto-Tag All Button */}
+          {analysisResult.summary.elementsMissingId > 0 && (
+            <div className="space-y-2 pt-2 border-t border-gray-200">
+              {bulkTagMessage && (
+                <div className={cn(
+                  "p-2 rounded text-xs",
+                  bulkTagStatus === "complete" && bulkTagMessage.includes("failed")
+                    ? "bg-amber-50 text-amber-700 border border-amber-200"
+                    : "bg-green-50 text-green-700 border border-green-200"
+                )}>
+                  {bulkTagMessage}
+                </div>
+              )}
+              
+              <button
+                onClick={() => onBulkTag()}
+                disabled={bulkTagStatus === "tagging"}
+                className={cn(
+                  "w-full flex items-center justify-center gap-2 px-3 py-2",
+                  "text-sm font-medium text-white rounded transition-colors",
+                  "bg-[#333F48] hover:bg-[#2a343c]",
+                  "disabled:opacity-50 disabled:cursor-not-allowed"
+                )}
+              >
+                {bulkTagStatus === "tagging" ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Tagging...
+                  </>
+                ) : (
+                  <>
+                    <Wand2 className="h-4 w-4" />
+                    Auto-Tag All ({analysisResult.summary.elementsMissingId})
+                  </>
+                )}
+              </button>
+            </div>
+          )}
+
+          {/* All Elements Have IDs */}
+          {analysisResult.summary.elementsMissingId === 0 && analysisResult.summary.totalElements > 0 && (
+            <div className="flex items-center gap-2 p-3 rounded border border-green-200 bg-green-50">
+              <CheckCircle className="h-5 w-5 text-green-600 shrink-0" />
+              <div>
+                <p id="analysis-panel-p-all-elements-have-id" className="text-xs font-medium text-green-700">All elements have IDs!</p>
+                <p id="analysis-panel-p-ready-for-individual" className="text-[10px] text-green-600">Ready for individual styling.</p>
+              </div>
+            </div>
+          )}
+
+          {/* Re-scan button */}
+          <div className="text-xs text-gray-400 flex items-center justify-between pt-2">
+            <span id="analysis-panel-span-scanned-in-analysisr">Scanned in {analysisResult.scanDuration}ms</span>
+            <button
+              onClick={onRunAnalysis}
+              className="text-[#00A3E1] hover:underline"
+            >
+              Re-scan
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ---- Brand Panel ----
+
+interface BrandPanelProps {
+  config: ThemeConfig;
+  onBrandSelect: (brandId: BrandId) => void;
+  logoAssetsByBrand: Record<string, LogoAsset[]>;
+  currentTheme: string;
+}
+
+// Default logo paths for each brand (fallback when assets haven't loaded)
+// Light mode uses "Dark" logos (dark text on light bg), Dark mode uses "Light" logos (light text on dark bg)
+const defaultBrandLogos: Record<string, { light: string; dark: string }> = {
+  sonance: {
+    light: "/logos/sonance-james-iport/Sonance_James_IPORT_Lockup_Dark.png",
+    dark: "/logos/sonance-james-iport/Sonance_James_IPORT_Lockup_Light.png",
+  },
+  iport: {
+    light: "/logos/iport/IPORT_Sonance_LockUp_2C_Dark_RGB.png",
+    dark: "/logos/iport/IPORT_Sonance_LockUp_2C_Light_RGB.png",
+  },
+  blaze: {
+    light: "/logos/blaze/BlazeBySonance_Logo_Lockup_3C_Dark_RGB_05162025.png",
+    dark: "/logos/blaze/BlazeBySonance_Logo_Lockup_2C_Light_RGB_05162025.png",
+  },
+};
+
+function BrandPanel({ config, onBrandSelect, logoAssetsByBrand, currentTheme }: BrandPanelProps) {
+  // Find current brand
+  const currentBrand = brandPresets.find(
+    (p) =>
+      p.config.baseColor.toLowerCase() === config.baseColor.toLowerCase() &&
+      p.config.accentColor.toLowerCase() === config.accentColor.toLowerCase()
+  );
+
+  // Determine if we're in dark mode
+  const isDarkMode = currentTheme === "dark";
+
+  // Get the default logo for the current brand - use loaded assets or fallback
+  const currentBrandLogos = currentBrand ? (logoAssetsByBrand[currentBrand.id] || []) : [];
+  const logoFromAssets = currentBrandLogos.length > 0 ? currentBrandLogos[0] : null;
+  const fallbackLogos = currentBrand ? defaultBrandLogos[currentBrand.id] : null;
+  const fallbackLogoPath = fallbackLogos ? (isDarkMode ? fallbackLogos.dark : fallbackLogos.light) : null;
+  const logoPath = logoFromAssets?.path || fallbackLogoPath;
+  const logoName = logoFromAssets?.name || currentBrand?.name || "Brand Logo";
+
+  return (
+    <div className="space-y-5">
+      {/* Brand Presets */}
+      <Section title="Select Brand">
+        <div className="flex gap-1">
+          {brandPresets.map((preset) => (
+            <button
+              key={preset.id}
+              onClick={() => onBrandSelect(preset.id)}
+              className={cn(
+                "flex-1 py-2 px-2 text-xs font-medium rounded transition-colors",
+                "border",
+                currentBrand?.id === preset.id
+                  ? "bg-[#333F48] text-white border-[#333F48]"
+                  : "bg-white text-gray-600 border-gray-200 hover:bg-gray-50"
+              )}
+            >
+              {preset.name}
+            </button>
+          ))}
+        </div>
+      </Section>
+
+      {/* Brand Logo Preview */}
+      {logoPath && (
+        <Section title="Brand Logo">
+          <div className="flex items-center justify-center p-4 rounded border border-gray-200 bg-gray-50">
+            <img
+              id="section-logo"
+              src={logoPath}
+              alt={logoName}
+              className="max-h-16 max-w-full object-contain"
+            />
+          </div>
+        </Section>
+      )}
+
+      {/* Static Color Display */}
+      <Section title="Brand Colors">
+        <div className="space-y-3">
+          {/* Primary Color */}
+          <div className="flex items-center justify-between p-3 rounded border border-gray-200 bg-gray-50">
+            <div className="flex items-center gap-3">
+              <div
+                className="w-8 h-8 rounded-full border-2 border-white shadow-sm"
+                style={{ backgroundColor: config.baseColor }}
+              />
+              <div>
+                <p id="section-p-primary" className="text-xs font-medium text-gray-700">Primary</p>
+                <p id="brand-panel-p-configbasecolor" className="text-[10px] text-gray-500 uppercase">{config.baseColor}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Accent Color */}
+          <div className="flex items-center justify-between p-3 rounded border border-gray-200 bg-gray-50">
+            <div className="flex items-center gap-3">
+              <div
+                className="w-8 h-8 rounded-full border-2 border-white shadow-sm"
+                style={{ backgroundColor: config.accentColor }}
+              />
+              <div>
+                <p id="brand-panel-p-accent" className="text-xs font-medium text-gray-700">Accent</p>
+                <p id="brand-panel-p-configaccentcolor" className="text-[10px] text-gray-500 uppercase">{config.accentColor}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* Brand Description */}
+      {currentBrand && (
+        <div className="p-3 rounded border border-gray-200 bg-gray-50">
+          <p id="brand-panel-p-currentbranddescript" className="text-xs text-gray-600">{currentBrand.description}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---- Components Panel ----
+
+type ComponentsSubTab = "inspector" | "design";
+
+interface ComponentsPanelProps {
+  copiedId: string | null;
+  onCopy: (text: string, id: string) => void;
+  installedComponents: string[];
+  inspectorEnabled: boolean;
+  onToggleInspector: () => void;
+  config: ThemeConfig;
+  updateConfig: (updates: Partial<ThemeConfig>) => void;
+  onReset: () => void;
+}
+
+function ComponentsPanel({ 
+  copiedId, 
+  onCopy, 
+  installedComponents, 
+  inspectorEnabled, 
+  onToggleInspector,
+  config,
+  updateConfig,
+  onReset
+}: ComponentsPanelProps) {
+  const [activeSubTab, setActiveSubTab] = useState<ComponentsSubTab>("inspector");
+  const [tagStatus, setTagStatus] = useState<TagStatus>("idle");
+  const [tagMessage, setTagMessage] = useState<string>("");
+  const [tagStats, setTagStats] = useState<{ tagged: number; untagged: number } | null>(null);
+  
+  // Color architecture state
+  const [colorArchitecture, setColorArchitecture] = useState<{
+    primary: string;
+    accent: string;
+    sources: { filePath: string; type: string; variables: { name: string; value: string; lineNumber: number }[] }[];
+    recommendation: string;
+  } | null>(null);
+  const [colorSaveStatus, setColorSaveStatus] = useState<"idle" | "saving" | "success" | "error">("idle");
+  const [colorSaveMessage, setColorSaveMessage] = useState("");
+
+  // Check tagging status and color architecture on mount
+  useEffect(() => {
+    async function fetchAnalysis() {
+      try {
+        const response = await fetch("/api/sonance-analyze");
+        if (response.ok) {
+          const data = await response.json();
+          
+          // Update tag stats
+          const defCategory = data.summary?.byCategory?.definition;
+          if (defCategory) {
+            setTagStats({ tagged: defCategory.withId || 0, untagged: defCategory.missingId || 0 });
+          }
+          
+          // Update color architecture
+          if (data.colorArchitecture) {
+            setColorArchitecture(data.colorArchitecture);
+          }
+        }
+      } catch {
+        // API might not exist yet
+      }
+    }
+    fetchAnalysis();
+  }, []);
+  
+  // Handle saving color changes
+  const handleSaveColors = async () => {
+    if (!colorArchitecture) return;
+    
+    setColorSaveStatus("saving");
+    setColorSaveMessage("");
+    
+    try {
+      const response = await fetch("/api/sonance-save-colors", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          primaryColor: config.baseColor,
+          accentColor: config.accentColor,
+          colorArchitecture,
+        }),
+      });
+      
+      const data = await response.json();
+      
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to save colors");
+      }
+      
+      setColorSaveStatus("success");
+      setColorSaveMessage(data.message || "Colors saved successfully!");
+      
+      setTimeout(() => {
+        setColorSaveStatus("idle");
+        setColorSaveMessage("");
+      }, 5000);
+    } catch (error) {
+      setColorSaveStatus("error");
+      setColorSaveMessage(error instanceof Error ? error.message : "Failed to save colors");
+      
+      setTimeout(() => {
+        setColorSaveStatus("idle");
+        setColorSaveMessage("");
+      }, 5000);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Sub-Navigation Tabs */}
+      <div className="flex gap-1 p-1 rounded bg-gray-100">
+        <button
+          onClick={() => setActiveSubTab("inspector")}
+          className={cn(
+            "flex-1 py-1.5 px-3 text-xs font-medium rounded transition-colors",
+            activeSubTab === "inspector"
+              ? "bg-white text-gray-900 shadow-sm"
+              : "text-gray-500 hover:text-gray-700"
+          )}
+        >
+          Inspector
+        </button>
+        <button
+          onClick={() => setActiveSubTab("design")}
+          className={cn(
+            "flex-1 py-1.5 px-3 text-xs font-medium rounded transition-colors",
+            activeSubTab === "design"
+              ? "bg-white text-gray-900 shadow-sm"
+              : "text-gray-500 hover:text-gray-700"
+          )}
+        >
+          Design
+        </button>
+      </div>
+
+      {/* Inspector Sub-Tab */}
+      {activeSubTab === "inspector" && (
+        <div className="space-y-4">
+          {/* Inspector Toggle */}
+          <div className="flex items-center justify-between p-3 rounded border border-gray-200 bg-gray-50">
+            <div className="flex items-center gap-2">
+              <Eye className={cn("h-4 w-4", inspectorEnabled ? "text-[#00A3E1]" : "text-gray-400")} />
+              <span id="brand-panel-span-component-inspector" className="text-xs font-medium">Component Inspector</span>
+            </div>
+            <button
+              onClick={onToggleInspector}
+              className={cn(
+                "px-3 py-1 text-xs font-medium rounded transition-colors",
+                inspectorEnabled
+                  ? "bg-[#00A3E1] text-white"
+                  : "bg-white text-gray-600 border border-gray-200 hover:bg-gray-50"
+              )}
+            >
+              {inspectorEnabled ? "Disable" : "Enable"}
+            </button>
+          </div>
+
+          {/* Component Snippets */}
+          <Section title="Component Snippets">
+            <div className="space-y-2">
+              {Object.entries(componentSnippets).map(([name, snippet]) => (
+                <div
+                  key={name}
+                  className="p-2 rounded border border-gray-200 bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer"
+                  onClick={() => onCopy(snippet.code, name)}
+                >
+                  <div className="flex items-center justify-between">
+                    <span id="section-span-snippetname" className="text-xs font-medium">{snippet.name}</span>
+                    {copiedId === name ? (
+                      <Check className="h-3 w-3 text-green-500" />
+                    ) : (
+                      <Copy className="h-3 w-3 text-gray-400" />
+                    )}
+                  </div>
+                  <p id="brand-panel-p-snippetdescription" className="text-[10px] text-gray-500 mt-0.5">{snippet.description}</p>
+                </div>
+              ))}
+            </div>
+          </Section>
+        </div>
+      )}
+
+      {/* Design Sub-Tab */}
+      {activeSubTab === "design" && (
+        <div className="space-y-5">
+          {/* Colors */}
+          <Section title="Primary Color">
+            <div className="flex flex-wrap gap-2">
+              {colorPresets.map((preset, index) => (
+                <ColorSwatch
+                  key={`base-${index}`}
+                  color={preset.value}
+                  name={preset.name}
+                  selected={config.baseColor.toLowerCase() === preset.value.toLowerCase()}
+                  onClick={() => updateConfig({ baseColor: preset.value })}
+                />
+              ))}
+            </div>
+          </Section>
+
+          <Section title="Accent Color">
+            <div className="flex flex-wrap gap-2">
+              {colorPresets.map((preset, index) => (
+                <ColorSwatch
+                  key={`accent-${index}`}
+                  color={preset.value}
+                  name={preset.name}
+                  selected={config.accentColor.toLowerCase() === preset.value.toLowerCase()}
+                  onClick={() => updateConfig({ accentColor: preset.value })}
+                />
+              ))}
+            </div>
+          </Section>
+
+          {/* Radius */}
+          <Section title="Border Radius">
+            <div className="flex gap-1">
+              {(Object.keys(radiusValues) as Array<keyof typeof radiusValues>).map(
+                (radius) => (
+                  <button
+                    key={radius}
+                    onClick={() => updateConfig({ radius })}
+                    className={cn(
+                      "flex-1 h-8 text-xs font-medium rounded transition-colors border",
+                      config.radius === radius
+                        ? "bg-[#333F48] text-white border-[#333F48]"
+                        : "bg-white text-gray-600 border-gray-200 hover:bg-gray-50"
+                    )}
+                  >
+                    {radius === "none" ? "0" : radius}
+                  </button>
+                )
+              )}
+            </div>
+          </Section>
+
+          {/* Typography */}
+          <Section title="Typography">
+            <div className="space-y-2">
+              <SelectField
+                label="Heading Weight"
+                value={String(config.headingWeight)}
+                options={[
+                  { value: "400", label: "Regular" },
+                  { value: "500", label: "Medium" },
+                  { value: "600", label: "Semibold" },
+                  { value: "700", label: "Bold" },
+                ]}
+                onChange={(v) =>
+                  updateConfig({
+                    headingWeight: parseInt(v) as ThemeConfig["headingWeight"],
+                  })
+                }
+              />
+              <SelectField
+                label="Body Weight"
+                value={String(config.bodyWeight)}
+                options={[
+                  { value: "300", label: "Light" },
+                  { value: "400", label: "Regular" },
+                  { value: "500", label: "Medium" },
+                ]}
+                onChange={(v) =>
+                  updateConfig({
+                    bodyWeight: parseInt(v) as ThemeConfig["bodyWeight"],
+                  })
+                }
+              />
+              <SelectField
+                label="Scale"
+                value={config.typographyScale}
+                options={[
+                  { value: "compact", label: "Compact" },
+                  { value: "default", label: "Default" },
+                  { value: "large", label: "Large" },
+                ]}
+                onChange={(v) =>
+                  updateConfig({
+                    typographyScale: v as ThemeConfig["typographyScale"],
+                  })
+                }
+              />
+            </div>
+          </Section>
+
+          {/* Color Architecture Info */}
+          {colorArchitecture && (
+            <Section title="Detected Architecture">
+              <div className="space-y-2">
+                <div className="p-2 rounded border border-gray-200 bg-gray-50">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span id="section-span-primary-arch" className="text-[10px] text-gray-400 uppercase">Primary:</span>
+                    <span id="section-span-primary-arch-value" className="text-xs font-medium">{colorArchitecture.primary}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span id="section-span-accent-arch" className="text-[10px] text-gray-400 uppercase">Accent:</span>
+                    <span id="section-span-accent-arch-value" className="text-xs font-medium">{colorArchitecture.accent}</span>
+                  </div>
+                </div>
+                <p id="section-p-color-recommendation" className="text-[10px] text-gray-500">
+                  {colorArchitecture.recommendation}
+                </p>
+                {colorArchitecture.sources.length > 0 && (
+                  <div className="text-[10px] text-gray-400">
+                    Files: {colorArchitecture.sources.map(s => s.filePath.split('/').pop()).join(', ')}
+                  </div>
+                )}
+              </div>
+            </Section>
+          )}
+          
+          {/* Save Colors Button */}
+          {colorArchitecture && colorArchitecture.sources.length > 0 && (
+            <div className="space-y-2">
+              <button
+                onClick={handleSaveColors}
+                disabled={colorSaveStatus === "saving"}
+                className={cn(
+                  "w-full flex items-center justify-center gap-2 py-2.5",
+                  "text-xs font-medium rounded transition-colors",
+                  "bg-[#333F48] text-white hover:bg-[#2a343c]",
+                  "disabled:opacity-50 disabled:cursor-not-allowed"
+                )}
+              >
+                {colorSaveStatus === "saving" ? (
+                  <>
+                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  <>
+                    <Save className="h-3.5 w-3.5" />
+                    Save Color Changes
+                  </>
+                )}
+              </button>
+              {colorSaveMessage && (
+                <div className={cn(
+                  "p-2 rounded text-xs",
+                  colorSaveStatus === "success" && "bg-green-50 text-green-700 border border-green-200",
+                  colorSaveStatus === "error" && "bg-red-50 text-red-700 border border-red-200"
+                )}>
+                  {colorSaveMessage}
+                </div>
+              )}
+            </div>
+          )}
+          
+          {/* Warning if no color sources detected */}
+          {colorArchitecture && colorArchitecture.sources.length === 0 && (
+            <div className="p-2 rounded border border-amber-200 bg-amber-50">
+              <p id="section-p-no-sources-warning" className="text-[10px] text-amber-700">
+                No color sources detected. Changes are previewed but cannot be saved automatically.
+                Consider adding CSS variables or a theme file.
+              </p>
+            </div>
+          )}
+
+          {/* Reset */}
+          <button
+            onClick={onReset}
+            className={cn(
+              "w-full flex items-center justify-center gap-2 py-2.5",
+              "text-xs font-medium text-gray-500 hover:text-gray-700",
+              "border border-gray-200 rounded hover:bg-gray-50 transition-colors"
+            )}
+          >
+            <RotateCcw className="h-3.5 w-3.5" />
+            Reset to Default
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---- Logos Panel ----
+
+interface LogosPanelProps extends LogoToolsPanelProps {
+  inspectorEnabled: boolean;
+  onToggleInspector: () => void;
+}
+
+function LogosPanel({
+  inspectorEnabled,
+  onToggleInspector,
+  ...logoToolsProps
+}: LogosPanelProps) {
+  return (
+    <div className="space-y-4">
+      {/* Inspector Toggle */}
+      <div className="flex items-center justify-between p-3 rounded border border-gray-200 bg-gray-50">
+        <div className="flex items-center gap-2">
+          <ImageIcon className={cn("h-4 w-4", inspectorEnabled ? "text-[#FC4C02]" : "text-gray-400")} />
+          <span id="logos-panel-span-logo-inspector" className="text-xs font-medium">Logo Inspector</span>
+        </div>
+        <button
+          onClick={onToggleInspector}
+          className={cn(
+            "px-3 py-1 text-xs font-medium rounded transition-colors",
+            inspectorEnabled
+              ? "bg-[#FC4C02] text-white"
+              : "bg-white text-gray-600 border border-gray-200 hover:bg-gray-50"
+          )}
+        >
+          {inspectorEnabled ? "Disable" : "Enable"}
+        </button>
+      </div>
+
+      {/* Logo Tools Content */}
+      <LogoToolsPanel {...logoToolsProps} />
+    </div>
+  );
+}
+
+// ---- Text Panel ----
+
+interface TextPanelProps {
+  inspectorEnabled: boolean;
+  onToggleInspector: () => void;
+  taggedElements: DetectedElement[];
+}
+
+function TextPanel({ inspectorEnabled, onToggleInspector, taggedElements }: TextPanelProps) {
+  const textElements = taggedElements.filter((el) => el.type === "text");
+
+  return (
+    <div className="space-y-4">
+      {/* Inspector Toggle */}
+      <div className="flex items-center justify-between p-3 rounded border border-gray-200 bg-gray-50">
+        <div className="flex items-center gap-2">
+          <Type className={cn("h-4 w-4", inspectorEnabled ? "text-purple-600" : "text-gray-400")} />
+          <span id="text-panel-span-text-inspector" className="text-xs font-medium">Text Inspector</span>
+        </div>
+        <button
+          onClick={onToggleInspector}
+          className={cn(
+            "px-3 py-1 text-xs font-medium rounded transition-colors",
+            inspectorEnabled
+              ? "bg-purple-600 text-white"
+              : "bg-white text-gray-600 border border-gray-200 hover:bg-gray-50"
+          )}
+        >
+          {inspectorEnabled ? "Disable" : "Enable"}
+        </button>
+      </div>
+
+      {/* Info about typography */}
+      <div className="p-3 rounded border border-gray-200 bg-gray-50">
+        <p id="text-panel-p" className="text-xs text-gray-500">
+          Typography settings have been moved to <strong>Components → Design</strong> tab.
+        </p>
+      </div>
+
+      {/* Detected Text Elements */}
+      {inspectorEnabled && textElements.length > 0 && (
+        <Section title="Page Text Elements">
+          <div className="space-y-1 max-h-48 overflow-y-auto">
+            {textElements.slice(0, 20).map((el, index) => (
+              <div
+                key={el.textId || index}
+                className="p-2 rounded border border-gray-200 bg-gray-50"
+              >
+                <div className="text-xs text-gray-700 truncate">{el.name}</div>
+              </div>
+            ))}
+            {textElements.length > 20 && (
+              <p id="section-p-textelementslength-2" className="text-xs text-gray-400 text-center">
+                +{textElements.length - 20} more elements
+              </p>
+            )}
+          </div>
+        </Section>
+      )}
+
+      {inspectorEnabled && textElements.length === 0 && (
+        <div className="text-center py-6 text-gray-400">
+          <Type className="h-8 w-8 mx-auto mb-2 opacity-50" />
+          <p id="text-panel-p-no-text-elements-det" className="text-xs">No text elements detected on this page.</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---- Logo Tools Panel ----
+
+type AutoFixStatus = "idle" | "fixing" | "success" | "error";
+
+interface LogoToolsPanelProps {
+  logoAssets: LogoAsset[];
+  logoAssetsByBrand: Record<string, LogoAsset[]>;
+  selectedLogoId: string | null;
+  globalLogoConfig: LogoOverride;
+  individualLogoConfigs: Record<string, LogoOverride>;
+  originalLogoStates: Record<string, OriginalLogoState>;
+  taggedElements: DetectedElement[];
+  onGlobalConfigChange: (config: LogoOverride) => void;
+  onIndividualConfigChange: (logoId: string, config: LogoOverride) => void;
+  onSelectLogo: (logoId: string | null) => void;
+  onResetAll: () => void;
+  onResetLogo: (logoId: string) => void;
+  onSaveChanges: (configOverride?: LogoOverride, brandId?: string, selector?: string, logoId?: string) => void;
+  saveStatus: LogoSaveStatus;
+  saveMessage: string;
+  findComplementaryLogo: (path: string) => { light?: string; dark?: string } | null;
+  currentTheme: string;
+  onAutoFixId: (logoSrc: string, suggestedId: string) => Promise<{ success: boolean; error?: string }>;
+  autoFixStatus: AutoFixStatus;
+  autoFixMessage: string;
+}
+
+/**
+ * Generates a context-aware ID suggestion for a logo element based on its
+ * position in the DOM, parent containers, and attributes.
+ */
+function generateIdSuggestion(logoId: string, brandId?: string): string {
+  // Try to get context from the DOM element
+  const element = document.querySelector(`[data-sonance-logo-id="${logoId}"]`);
+  if (!element) {
+    return brandId ? `${brandId}-logo` : "brand-logo";
+  }
+  
+  // Check parent containers for context
+  const parentNames: string[] = [];
+  let current = element.parentElement;
+  let depth = 0;
+  
+  while (current && depth < 5) {
+    // Check for semantic elements
+    const tagName = current.tagName.toLowerCase();
+    if (["header", "footer", "nav", "aside", "main", "section"].includes(tagName)) {
+      parentNames.unshift(tagName);
+      break;
+    }
+    
+    // Check for data-sonance-name attribute
+    const sonanceName = current.getAttribute("data-sonance-name");
+    if (sonanceName) {
+      parentNames.unshift(sonanceName.toLowerCase().replace(/\s+/g, "-"));
+      break;
+    }
+    
+    // Check for common class hints
+    const classList = current.className;
+    if (typeof classList === "string") {
+      if (classList.includes("header")) parentNames.unshift("header");
+      else if (classList.includes("footer")) parentNames.unshift("footer");
+      else if (classList.includes("sidebar")) parentNames.unshift("sidebar");
+      else if (classList.includes("nav")) parentNames.unshift("nav");
+    }
+    
+    current = current.parentElement;
+    depth++;
+  }
+  
+  // Check alt text for context
+  const altText = element.getAttribute("alt");
+  if (altText) {
+    const cleanAlt = altText.toLowerCase()
+      .replace(/[^a-z0-9\s]/g, "")
+      .replace(/\s+/g, "-")
+      .substring(0, 20);
+    if (cleanAlt && cleanAlt !== "logo") {
+      parentNames.push(cleanAlt);
+    }
+  }
+  
+  // Build the suggested ID
+  const parts: string[] = [];
+  if (parentNames.length > 0) {
+    parts.push(parentNames[0]);
+  }
+  if (brandId) {
+    parts.push(brandId);
+  }
+  parts.push("logo");
+  
+  return parts.join("-");
+}
+
+function LogoToolsPanel({
+  logoAssets,
+  logoAssetsByBrand,
+  selectedLogoId,
+  globalLogoConfig,
+  individualLogoConfigs,
+  originalLogoStates,
+  taggedElements,
+  onGlobalConfigChange,
+  onIndividualConfigChange,
+  onSelectLogo,
+  onResetAll,
+  onResetLogo,
+  onSaveChanges,
+  saveStatus,
+  saveMessage,
+  findComplementaryLogo,
+  currentTheme,
+  onAutoFixId,
+  autoFixStatus,
+  autoFixMessage,
+}: LogoToolsPanelProps) {
+  const logoElements = taggedElements.filter((el) => el.type === "logo" && el.logoId);
+  const selectedLogo = logoElements.find((el) => el.logoId === selectedLogoId);
+  const selectedConfig = selectedLogoId ? individualLogoConfigs[selectedLogoId] || {} : {};
+  const selectedOriginal = selectedLogoId ? originalLogoStates[selectedLogoId] : null;
+
+  // Attempt to identify the brand and element ID of the selected logo
+  let selectedBrandId: string | undefined;
+  let selectedElementId: string | undefined;
+  
+  if (selectedLogoId) {
+    // Check if the element has an ID attribute for targeted CSS
+    const logoElement = document.querySelector(`[data-sonance-logo-id="${selectedLogoId}"]`);
+    if (logoElement && logoElement.id) {
+      selectedElementId = logoElement.id;
+    }
+  }
+  
+  if (selectedOriginal && selectedOriginal.src) {
+    // Try to find matching asset
+    // Normalize paths for comparison (remove protocol/domain if present)
+    const normalize = (p: string) => p.split("?")[0].split("#")[0]; // remove query/hash
+    const originalPath = normalize(selectedOriginal.src);
+    
+    // Find asset where path ends with the original src filename or vice versa
+    const asset = logoAssets.find(a => 
+      originalPath.endsWith(a.path) || a.path.endsWith(originalPath) || originalPath.includes(a.name)
+    );
+    if (asset) {
+      selectedBrandId = asset.brand;
+    } else {
+      // Fallback: guess from path
+      if (originalPath.toLowerCase().includes("sonance")) selectedBrandId = "sonance";
+      else if (originalPath.toLowerCase().includes("iport")) selectedBrandId = "iport";
+      else if (originalPath.toLowerCase().includes("blaze")) selectedBrandId = "blaze";
+    }
+  }
+
+  // Get sorted brand keys
+  const brandKeys = Object.keys(logoAssetsByBrand).sort();
+
+  return (
+    <div className="space-y-5">
+      {/* Header info */}
+      <div className="p-3 rounded border border-orange-200 bg-orange-50">
+        <p id="analysis-modal-p" className="text-xs text-orange-700">
+          <strong>{logoElements.length}</strong> logo{logoElements.length !== 1 ? "s" : ""} detected on this page.
+          Click a logo on the page to select it for editing.
+        </p>
+      </div>
+
+      {/* Global Controls */}
+      <Section title="Replace All Logos">
+        <div className="space-y-3">
+          {/* Theme indicator */}
+          <div className="flex items-center gap-2 text-[10px] text-gray-400">
+            <span id="section-span-currenttheme-dark-da" className={cn("px-1.5 py-0.5 rounded", currentTheme === "light" ? "bg-yellow-100 text-yellow-700" : "bg-gray-700 text-gray-200")}>
+              {currentTheme === "dark" ? "🌙 Dark Mode" : "☀️ Light Mode"}
+            </span>
+            <span id="section-span-current-preview">Current preview</span>
+          </div>
+
+          {/* Light Mode Logo */}
+          <div className="space-y-1.5">
+            <label className="text-xs text-gray-500 flex items-center gap-1.5">
+              <Sun className="h-3 w-3 text-yellow-500" />
+              Light Mode Logo:
+            </label>
+            <select
+              value={globalLogoConfig.srcLight || ""}
+              onChange={(e) => {
+                const newPath = e.target.value || undefined;
+                if (newPath) {
+                  // Auto-fill dark variant if available
+                  const complementary = findComplementaryLogo(newPath);
+                  onGlobalConfigChange({ 
+                    ...globalLogoConfig, 
+                    srcLight: newPath,
+                    srcDark: complementary?.dark || globalLogoConfig.srcDark,
+                  });
+                } else {
+                  onGlobalConfigChange({ ...globalLogoConfig, srcLight: undefined });
+                }
+              }}
+              className={cn(
+                "w-full h-8 px-2 text-xs rounded",
+                "border border-gray-200 bg-white text-gray-700",
+                "focus:outline-none focus:ring-1 focus:ring-[#FC4C02]"
+              )}
+            >
+              <option value="">-- Select light mode logo --</option>
+              {brandKeys.map((brand) => (
+                <optgroup key={brand} label={brand.charAt(0).toUpperCase() + brand.slice(1)}>
+                  {logoAssetsByBrand[brand].map((asset) => (
+                    <option key={asset.id} value={asset.path}>
+                      {asset.name}
+                    </option>
+                  ))}
+                </optgroup>
+              ))}
+            </select>
+          </div>
+
+          {/* Dark Mode Logo */}
+          <div className="space-y-1.5">
+            <label className="text-xs text-gray-500 flex items-center gap-1.5">
+              <Moon className="h-3 w-3 text-blue-400" />
+              Dark Mode Logo:
+            </label>
+            <select
+              value={globalLogoConfig.srcDark || ""}
+              onChange={(e) => {
+                const newPath = e.target.value || undefined;
+                if (newPath) {
+                  // Auto-fill light variant if available
+                  const complementary = findComplementaryLogo(newPath);
+                  onGlobalConfigChange({ 
+                    ...globalLogoConfig, 
+                    srcDark: newPath,
+                    srcLight: complementary?.light || globalLogoConfig.srcLight,
+                  });
+                } else {
+                  onGlobalConfigChange({ ...globalLogoConfig, srcDark: undefined });
+                }
+              }}
+              className={cn(
+                "w-full h-8 px-2 text-xs rounded",
+                "border border-gray-200 bg-white text-gray-700",
+                "focus:outline-none focus:ring-1 focus:ring-[#FC4C02]"
+              )}
+            >
+              <option value="">-- Select dark mode logo --</option>
+              {brandKeys.map((brand) => (
+                <optgroup key={brand} label={brand.charAt(0).toUpperCase() + brand.slice(1)}>
+                  {logoAssetsByBrand[brand].map((asset) => (
+                    <option key={asset.id} value={asset.path}>
+                      {asset.name}
+                    </option>
+                  ))}
+                </optgroup>
+              ))}
+            </select>
+          </div>
+
+          <div className="space-y-1.5">
+            <label className="text-xs text-gray-500">Scale: {Math.round((globalLogoConfig.scale || 1) * 100)}%</label>
+            <input
+              type="range"
+              min="25"
+              max="200"
+              value={(globalLogoConfig.scale || 1) * 100}
+              onChange={(e) => onGlobalConfigChange({ ...globalLogoConfig, scale: parseInt(e.target.value) / 100 })}
+              className="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-200"
+            />
+          </div>
+        </div>
+      </Section>
+
+      {/* Save Status Message */}
+      {saveMessage && (
+        <div
+          className={cn(
+            "flex items-start gap-2 p-2 rounded text-xs",
+            saveStatus === "success" && "bg-green-50 text-green-700 border border-green-200",
+            saveStatus === "error" && "bg-red-50 text-red-700 border border-red-200"
+          )}
+        >
+          {saveStatus === "success" && <CheckCircle className="h-3.5 w-3.5 shrink-0 mt-0.5" />}
+          {saveStatus === "error" && <AlertCircle className="h-3.5 w-3.5 shrink-0 mt-0.5" />}
+          <span id="analysis-modal-span-savemessage">{saveMessage}</span>
+        </div>
+      )}
+
+      {/* Save Button */}
+      {(globalLogoConfig.reset || globalLogoConfig.srcLight || globalLogoConfig.srcDark) && (
+        <button
+          onClick={() => onSaveChanges()}
+          disabled={saveStatus === "saving"}
+          className={cn(
+            "w-full flex items-center justify-center gap-2 py-2.5",
+            "text-sm font-medium text-white rounded transition-colors",
+            globalLogoConfig.reset ? "bg-amber-600 hover:bg-amber-700" : "bg-[#333F48] hover:bg-[#2a343c]",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          )}
+        >
+          {saveStatus === "saving" ? (
+            <>
+              <Loader2 className="h-4 w-4 animate-spin" />
+              Saving...
+            </>
+          ) : (
+            <>
+              {globalLogoConfig.reset ? <RotateCcw className="h-4 w-4" /> : <Save className="h-4 w-4" />}
+              {globalLogoConfig.reset ? "Save Reset" : "Save to Brand System"}
+            </>
+          )}
+        </button>
+      )}
+
+      {/* Logo List */}
+      <Section title="Page Logos">
+        <div className="space-y-1.5 max-h-32 overflow-y-auto">
+          {logoElements.length === 0 ? (
+            <p id="section-p-no-logos-detected" className="text-xs text-gray-400 italic">No logos detected</p>
+          ) : (
+            logoElements.map((el) => (
+              <button
+                key={el.logoId}
+                onClick={() => onSelectLogo(el.logoId === selectedLogoId ? null : el.logoId!)}
+                className={cn(
+                  "w-full flex items-center justify-between px-3 py-2",
+                  "text-left text-xs rounded border transition-colors",
+                  el.logoId === selectedLogoId
+                    ? "border-[#FC4C02] bg-orange-50"
+                    : "border-gray-200 hover:bg-gray-50"
+                )}
+              >
+                <div className="flex items-center gap-2">
+                  <ImageIcon className="h-3.5 w-3.5 text-gray-400" />
+                  <span id="analysis-modal-span-elname" className="font-medium text-gray-700 truncate max-w-[180px]">{el.name}</span>
+                </div>
+                {individualLogoConfigs[el.logoId!] && (
+                  <span id="analysis-modal-span-modified" className="text-[10px] px-1.5 py-0.5 rounded bg-orange-100 text-orange-600">
+                    Modified
+                  </span>
+                )}
+              </button>
+            ))
+          )}
+        </div>
+      </Section>
+
+      {/* Selected Logo Controls */}
+      {selectedLogoId && selectedLogo && (
+        <Section title={`Edit: ${selectedLogo.name}`}>
+          <div className="space-y-3 p-3 rounded border border-[#FC4C02] bg-orange-50/50">
+            {/* Original info */}
+            {selectedOriginal && (
+              <div className="text-[10px] text-gray-500">
+                Original: {selectedOriginal.width} × {selectedOriginal.height}px
+              </div>
+            )}
+
+            {/* Theme indicator */}
+            <div className="flex items-center gap-2 text-[10px] text-gray-400">
+              <span id="analysis-modal-span-currenttheme-dark-da" className={cn("px-1.5 py-0.5 rounded", currentTheme === "light" ? "bg-yellow-100 text-yellow-700" : "bg-gray-700 text-gray-200")}>
+                {currentTheme === "dark" ? "🌙 Dark Mode" : "☀️ Light Mode"}
+              </span>
+              <span id="analysis-modal-span-current-preview">Current preview</span>
+            </div>
+
+            {/* Light Mode Logo */}
+            <div className="space-y-1.5">
+              <label className="text-xs text-gray-500 flex items-center gap-1.5">
+                <Sun className="h-3 w-3 text-yellow-500" />
+                Light Mode Logo:
+              </label>
+              <select
+                value={selectedConfig.srcLight || ""}
+                onChange={(e) => {
+                  const newPath = e.target.value || undefined;
+                  if (newPath) {
+                    const complementary = findComplementaryLogo(newPath);
+                    onIndividualConfigChange(selectedLogoId, { 
+                      ...selectedConfig, 
+                      srcLight: newPath,
+                      srcDark: complementary?.dark || selectedConfig.srcDark,
+                    });
+                  } else {
+                    onIndividualConfigChange(selectedLogoId, { ...selectedConfig, srcLight: undefined });
+                  }
+                }}
+                className={cn(
+                  "w-full h-8 px-2 text-xs rounded",
+                  "border border-gray-200 bg-white text-gray-700",
+                  "focus:outline-none focus:ring-1 focus:ring-[#FC4C02]"
+                )}
+              >
+                <option value="">-- Use global/original --</option>
+                {brandKeys.map((brand) => (
+                  <optgroup key={brand} label={brand.charAt(0).toUpperCase() + brand.slice(1)}>
+                    {logoAssetsByBrand[brand].map((asset) => (
+                      <option key={asset.id} value={asset.path}>
+                        {asset.name}
+                      </option>
+                    ))}
+                  </optgroup>
+                ))}
+              </select>
+            </div>
+
+            {/* Dark Mode Logo */}
+            <div className="space-y-1.5">
+              <label className="text-xs text-gray-500 flex items-center gap-1.5">
+                <Moon className="h-3 w-3 text-blue-400" />
+                Dark Mode Logo:
+              </label>
+              <select
+                value={selectedConfig.srcDark || ""}
+                onChange={(e) => {
+                  const newPath = e.target.value || undefined;
+                  if (newPath) {
+                    const complementary = findComplementaryLogo(newPath);
+                    onIndividualConfigChange(selectedLogoId, { 
+                      ...selectedConfig, 
+                      srcDark: newPath,
+                      srcLight: complementary?.light || selectedConfig.srcLight,
+                    });
+                  } else {
+                    onIndividualConfigChange(selectedLogoId, { ...selectedConfig, srcDark: undefined });
+                  }
+                }}
+                className={cn(
+                  "w-full h-8 px-2 text-xs rounded",
+                  "border border-gray-200 bg-white text-gray-700",
+                  "focus:outline-none focus:ring-1 focus:ring-[#FC4C02]"
+                )}
+              >
+                <option value="">-- Use global/original --</option>
+                {brandKeys.map((brand) => (
+                  <optgroup key={brand} label={brand.charAt(0).toUpperCase() + brand.slice(1)}>
+                    {logoAssetsByBrand[brand].map((asset) => (
+                      <option key={asset.id} value={asset.path}>
+                        {asset.name}
+                      </option>
+                    ))}
+                  </optgroup>
+                ))}
+              </select>
+            </div>
+
+            {/* Dimensions */}
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1">
+                <label className="text-xs text-gray-500">Width (px)</label>
+                <input
+                  type="number"
+                  min="10"
+                  max="1000"
+                  value={selectedConfig.width || ""}
+                  placeholder="auto"
+                  onChange={(e) => onIndividualConfigChange(selectedLogoId, { 
+                    ...selectedConfig, 
+                    width: e.target.value ? parseInt(e.target.value) : undefined 
+                  })}
+                  className={cn(
+                    "w-full h-8 px-2 text-xs rounded",
+                    "border border-gray-200 bg-white text-gray-700",
+                    "focus:outline-none focus:ring-1 focus:ring-[#FC4C02]"
+                  )}
+                />
+              </div>
+              <div className="space-y-1">
+                <label className="text-xs text-gray-500">Height (px)</label>
+                <input
+                  type="number"
+                  min="10"
+                  max="1000"
+                  value={selectedConfig.height || ""}
+                  placeholder="auto"
+                  onChange={(e) => onIndividualConfigChange(selectedLogoId, { 
+                    ...selectedConfig, 
+                    height: e.target.value ? parseInt(e.target.value) : undefined 
+                  })}
+                  className={cn(
+                    "w-full h-8 px-2 text-xs rounded",
+                    "border border-gray-200 bg-white text-gray-700",
+                    "focus:outline-none focus:ring-1 focus:ring-[#FC4C02]"
+                  )}
+                />
+              </div>
+            </div>
+
+            {/* Scale */}
+            <div className="space-y-1.5">
+              <label className="text-xs text-gray-500">Scale: {Math.round((selectedConfig.scale || 1) * 100)}%</label>
+              <input
+                type="range"
+                min="25"
+                max="200"
+                value={(selectedConfig.scale || 1) * 100}
+                onChange={(e) => onIndividualConfigChange(selectedLogoId, { ...selectedConfig, scale: parseInt(e.target.value) / 100 })}
+                className="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-200"
+              />
+            </div>
+
+            {/* Warning if element has no ID for individual persistence */}
+            {!selectedElementId && (selectedConfig.width || selectedConfig.height || selectedConfig.scale) && (() => {
+              const suggestedId = generateIdSuggestion(selectedLogoId, selectedBrandId);
+              const codeSnippet = `id="${suggestedId}"`;
+              const logoSrc = selectedOriginal?.src || "";
+              
+              return (
+                <div className="p-2.5 rounded border border-amber-200 bg-amber-50 space-y-2">
+                  <p id="analysis-modal-p" className="text-[10px] text-amber-700">
+                    <strong>⚠️ No ID found.</strong> Saving will update the <strong>global {selectedBrandId || "brand"} default</strong>, affecting all logos of this brand.
+                  </p>
+                  <div className="flex items-center gap-2">
+                    <code className="flex-1 px-2 py-1 text-[10px] bg-amber-100 text-amber-800 rounded font-mono truncate" title={codeSnippet}>
+                      {codeSnippet}
+                    </code>
+                    <button
+                      onClick={() => onAutoFixId(logoSrc, suggestedId)}
+                      disabled={autoFixStatus === "fixing"}
+                      className={cn(
+                        "flex items-center gap-1 px-2 py-1 text-[10px] font-medium rounded transition-colors whitespace-nowrap",
+                        autoFixStatus === "success" 
+                          ? "bg-green-100 text-green-700" 
+                          : autoFixStatus === "error"
+                          ? "bg-red-100 text-red-700"
+                          : "text-amber-700 bg-amber-100 hover:bg-amber-200",
+                        autoFixStatus === "fixing" && "opacity-50 cursor-not-allowed"
+                      )}
+                      title="Automatically inject this ID into your source code"
+                    >
+                      {autoFixStatus === "fixing" ? (
+                        <>
+                          <Loader2 className="h-3 w-3 animate-spin" />
+                          Fixing...
+                        </>
+                      ) : autoFixStatus === "success" ? (
+                        <>
+                          <Check className="h-3 w-3" />
+                          Fixed!
+                        </>
+                      ) : autoFixStatus === "error" ? (
+                        <>
+                          <AlertCircle className="h-3 w-3" />
+                          Failed
+                        </>
+                      ) : (
+                        <>
+                          <Wand2 className="h-3 w-3" />
+                          Auto-Fix
+                        </>
+                      )}
+                    </button>
+                  </div>
+                  {autoFixMessage && (
+                    <p id="analysis-modal-p-autofixmessage" className={cn(
+                      "text-[9px]",
+                      autoFixStatus === "success" ? "text-green-600" : autoFixStatus === "error" ? "text-red-600" : "text-amber-600"
+                    )}>
+                      {autoFixMessage}
+                    </p>
+                  )}
+                  {!autoFixMessage && (
+                    <p id="analysis-modal-p-click-autofix-to-inj" className="text-[9px] text-amber-600">
+                      Click Auto-Fix to inject this ID into your source code automatically.
+                    </p>
+                  )}
+                </div>
+              );
+            })()}
+
+            {/* Reset this logo */}
+            <div className="flex gap-2">
+              <button
+                onClick={() => {
+                  if (selectedLogoId) {
+                    onResetLogo(selectedLogoId);
+                  }
+                }}
+                className={cn(
+                  "flex-1 flex items-center justify-center gap-2 py-2",
+                  "text-xs font-medium text-gray-500 hover:text-gray-700",
+                  "border border-gray-200 rounded hover:bg-white transition-colors"
+                )}
+              >
+                <RotateCcw className="h-3 w-3" />
+                Reset
+              </button>
+              
+              {(selectedConfig.reset || selectedConfig.srcLight || selectedConfig.srcDark || selectedConfig.src || selectedConfig.width || selectedConfig.height || (selectedConfig.scale && selectedConfig.scale !== 1)) && (
+                <button
+                  onClick={() => onSaveChanges(selectedConfig, selectedBrandId, selectedElementId ? `#${selectedElementId}` : undefined, selectedLogoId || undefined)}
+                  disabled={saveStatus === "saving"}
+                  className={cn(
+                    "flex-1 flex items-center justify-center gap-2 py-2",
+                    "text-xs font-medium text-white rounded transition-colors",
+                    selectedConfig.reset ? "bg-amber-600 hover:bg-amber-700" : (selectedElementId ? "bg-[#00A3E1] hover:bg-[#0090c8]" : "bg-[#333F48] hover:bg-[#2a343c]"),
+                    "disabled:opacity-50 disabled:cursor-not-allowed"
+                  )}
+                  title={selectedConfig.reset ? "Save Reset (Delete Override)" : (selectedElementId ? `Save to element #${selectedElementId}` : (selectedBrandId ? `Save as ${selectedBrandId} brand default` : "Save as brand default"))}
+                >
+                  {saveStatus === "saving" ? (
+                    <Loader2 className="h-3 w-3 animate-spin" />
+                  ) : (
+                    <>
+                      {selectedConfig.reset ? <RotateCcw className="h-3 w-3" /> : <Save className="h-3 w-3" />}
+                      {selectedConfig.reset ? "Save Reset" : (selectedElementId ? "Save to Element" : "Save to Brand")}
+                    </>
+                  )}
+                </button>
+              )}
+            </div>
+            
+            {/* Individual Save Status Message */}
+            {saveMessage && (saveStatus === "success" || saveStatus === "error") && (
+              <div
+                className={cn(
+                  "flex items-center gap-2 p-2 rounded text-xs mt-2",
+                  saveStatus === "success" && "bg-green-50 text-green-700 border border-green-200",
+                  saveStatus === "error" && "bg-red-50 text-red-700 border border-red-200"
+                )}
+              >
+                {saveStatus === "success" && <CheckCircle className="h-3.5 w-3.5 shrink-0" />}
+                {saveStatus === "error" && <AlertCircle className="h-3.5 w-3.5 shrink-0" />}
+                <span id="text-panel-span-savemessage">{saveMessage}</span>
+              </div>
+            )}
+          </div>
+        </Section>
+      )}
+
+      {/* Reset All */}
+      <button
+        onClick={onResetAll}
+        className={cn(
+          "w-full flex items-center justify-center gap-2 py-2.5",
+          "text-xs font-medium text-gray-500 hover:text-gray-700",
+          "border border-gray-200 rounded hover:bg-gray-50 transition-colors"
+        )}
+      >
+        <RotateCcw className="h-3.5 w-3.5" />
+        Reset All Logos
+      </button>
+    </div>
+  );
+}
+
+// ---- Theme Tab ----
+
+interface ThemeTabProps {
+  config: ThemeConfig;
+  updateConfig: (updates: Partial<ThemeConfig>) => void;
+  onBrandSelect: (brandId: BrandId) => void;
+  onReset: () => void;
+}
+
+function ThemeTab({ config, updateConfig, onBrandSelect, onReset }: ThemeTabProps) {
+  // Find current brand
+  const currentBrand = brandPresets.find(
+    (p) =>
+      p.config.baseColor.toLowerCase() === config.baseColor.toLowerCase() &&
+      p.config.accentColor.toLowerCase() === config.accentColor.toLowerCase()
+  );
+
+  return (
+    <div className="space-y-5">
+      {/* Brand Presets */}
+      <Section title="Brand">
+        <div className="flex gap-1">
+          {brandPresets.map((preset) => (
+            <button
+              key={preset.id}
+              onClick={() => onBrandSelect(preset.id)}
+              className={cn(
+                "flex-1 py-2 px-2 text-xs font-medium rounded transition-colors",
+                "border",
+                currentBrand?.id === preset.id
+                  ? "bg-[#333F48] text-white border-[#333F48]"
+                  : "bg-white text-gray-600 border-gray-200 hover:bg-gray-50"
+              )}
+            >
+              {preset.name}
+            </button>
+          ))}
+        </div>
+      </Section>
+
+      {/* Colors */}
+      <Section title="Primary Color">
+        <div className="flex flex-wrap gap-2">
+          {colorPresets.map((preset, index) => (
+            <ColorSwatch
+              key={`base-${index}`}
+              color={preset.value}
+              name={preset.name}
+              selected={config.baseColor.toLowerCase() === preset.value.toLowerCase()}
+              onClick={() => updateConfig({ baseColor: preset.value })}
+            />
+          ))}
+        </div>
+      </Section>
+
+      <Section title="Accent Color">
+        <div className="flex flex-wrap gap-2">
+          {colorPresets.map((preset, index) => (
+            <ColorSwatch
+              key={`accent-${index}`}
+              color={preset.value}
+              name={preset.name}
+              selected={config.accentColor.toLowerCase() === preset.value.toLowerCase()}
+              onClick={() => updateConfig({ accentColor: preset.value })}
+            />
+          ))}
+        </div>
+      </Section>
+
+      {/* Radius */}
+      <Section title="Border Radius">
+        <div className="flex gap-1">
+          {(Object.keys(radiusValues) as Array<keyof typeof radiusValues>).map(
+            (radius) => (
+              <button
+                key={radius}
+                onClick={() => updateConfig({ radius })}
+                className={cn(
+                  "flex-1 h-8 text-xs font-medium rounded transition-colors border",
+                  config.radius === radius
+                    ? "bg-[#333F48] text-white border-[#333F48]"
+                    : "bg-white text-gray-600 border-gray-200 hover:bg-gray-50"
+                )}
+              >
+                {radius === "none" ? "0" : radius}
+              </button>
+            )
+          )}
+        </div>
+      </Section>
+
+      {/* Typography */}
+      <Section title="Typography">
+        <div className="space-y-2">
+          <SelectField
+            label="Heading Weight"
+            value={String(config.headingWeight)}
+            options={[
+              { value: "400", label: "Regular" },
+              { value: "500", label: "Medium" },
+              { value: "600", label: "Semibold" },
+              { value: "700", label: "Bold" },
+            ]}
+            onChange={(v) =>
+              updateConfig({
+                headingWeight: parseInt(v) as ThemeConfig["headingWeight"],
+              })
+            }
+          />
+          <SelectField
+            label="Body Weight"
+            value={String(config.bodyWeight)}
+            options={[
+              { value: "300", label: "Light" },
+              { value: "400", label: "Regular" },
+              { value: "500", label: "Medium" },
+            ]}
+            onChange={(v) =>
+              updateConfig({
+                bodyWeight: parseInt(v) as ThemeConfig["bodyWeight"],
+              })
+            }
+          />
+          <SelectField
+            label="Scale"
+            value={config.typographyScale}
+            options={[
+              { value: "compact", label: "Compact" },
+              { value: "default", label: "Default" },
+              { value: "large", label: "Large" },
+            ]}
+            onChange={(v) =>
+              updateConfig({
+                typographyScale: v as ThemeConfig["typographyScale"],
+              })
+            }
+          />
+        </div>
+      </Section>
+
+      {/* Reset */}
+      <button
+        onClick={onReset}
+        className={cn(
+          "w-full flex items-center justify-center gap-2 py-2.5",
+          "text-xs font-medium text-gray-500 hover:text-gray-700",
+          "border border-gray-200 rounded hover:bg-gray-50 transition-colors"
+        )}
+      >
+        <RotateCcw className="h-3.5 w-3.5" />
+        Reset to Default
+      </button>
+    </div>
+  );
+}
+
+// ---- Components Tab ----
+
+interface ComponentsTabProps {
+  copiedId: string | null;
+  onCopy: (text: string, id: string) => void;
+  installedComponents: string[];
+}
+
+type TagStatus = "idle" | "tagging" | "success" | "error";
+
+function ComponentsTab({ copiedId, onCopy, installedComponents }: ComponentsTabProps) {
+  const [tagStatus] = useState<TagStatus>("idle");
+  const [tagMessage] = useState<string>("");
+  const [tagStats, setTagStats] = useState<{ tagged: number; untagged: number } | null>(null);
+
+  // Check tagging status on mount using the unified analyze API
+  useEffect(() => {
+    async function checkTagStatus() {
+      try {
+        const response = await fetch("/api/sonance-analyze");
+        if (response.ok) {
+          const data = await response.json();
+          const defCategory = data.summary?.byCategory?.definition;
+          if (defCategory) {
+            setTagStats({ tagged: defCategory.withId || 0, untagged: defCategory.missingId || 0 });
+          }
+        }
+      } catch {
+        // API might not exist yet
+      }
+    }
+    checkTagStatus();
+  }, []);
+
+  // Group snippets by category
+  const snippetsByCategory = componentSnippets.reduce(
+    (acc, snippet) => {
+      if (!acc[snippet.category]) {
+        acc[snippet.category] = [];
+      }
+      acc[snippet.category].push(snippet);
+      return acc;
+    },
+    {} as Record<string, typeof componentSnippets>
+  );
+
+  // Sort categories
+  const sortedCategories = Object.keys(snippetsByCategory).sort();
+  
+  // Sort snippets within categories
+  sortedCategories.forEach(cat => {
+    snippetsByCategory[cat].sort((a, b) => a.name.localeCompare(b.name));
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <p id="analysis-modal-p-click-to-copy-branda" className="text-xs text-gray-500">
+          Click to copy brand-approved component code.
+        </p>
+        {installedComponents.length > 0 && (
+          <div className="flex items-center gap-1.5 text-xs text-gray-400">
+            <span id="analysis-modal-span" className="flex h-4 w-4 items-center justify-center rounded-full bg-green-100">
+              <Check className="h-2.5 w-2.5 text-green-600" />
+            </span>
+            <span id="analysis-modal-span--installed-in-your-p">= Installed in your project</span>
+          </div>
+        )}
+      </div>
+
+      {/* Visual Inspector tags note - now handled in Analysis tab */}
+      {tagStats && tagStats.untagged > 0 && (
+        <div className="p-3 rounded border border-blue-200 bg-blue-50">
+          <p id="analysis-modal-p" className="text-xs text-blue-700">
+            <strong>{tagStats.untagged}</strong> component definitions need tagging. 
+            Use the <strong>Analysis</strong> tab to auto-tag them for the Visual Inspector.
+          </p>
+        </div>
+      )}
+
+      {/* Tag Status Message */}
+      {tagMessage && (
+        <div
+          className={cn(
+            "flex items-start gap-2 p-2 rounded text-xs",
+            tagStatus === "success" && "bg-green-50 text-green-700 border border-green-200",
+            tagStatus === "error" && "bg-red-50 text-red-700 border border-red-200"
+          )}
+        >
+          {tagStatus === "success" && <CheckCircle className="h-3.5 w-3.5 shrink-0 mt-0.5" />}
+          {tagStatus === "error" && <AlertCircle className="h-3.5 w-3.5 shrink-0 mt-0.5" />}
+          <span id="analysis-modal-span-tagmessage">{tagMessage}</span>
+        </div>
+      )}
+      {sortedCategories.map((category) => (
+        <div key={category} className="space-y-2">
+          <h3 id="analysis-modal-h3-category" className="text-xs font-medium uppercase tracking-wide text-gray-400">
+            {category}
+          </h3>
+          <div className="space-y-1.5">
+            {snippetsByCategory[category].map((snippet) => {
+              const isInstalled = snippet.fileName && installedComponents.includes(snippet.fileName);
+              return (
+                <button
+                  key={snippet.id}
+                  onClick={() => onCopy(snippet.code, snippet.id)}
+                  className={cn(
+                    "w-full flex items-center justify-between px-3 py-2.5",
+                    "text-left text-sm rounded border",
+                    isInstalled ? "border-green-200 bg-green-50/50" : "border-gray-200",
+                    "hover:bg-gray-50 transition-colors group"
+                  )}
+                >
+                  <div className="flex items-center gap-2">
+                    {isInstalled && (
+                      <span id="analysis-modal-span" className="flex h-5 w-5 items-center justify-center rounded-full bg-green-100" title="Installed">
+                        <Check className="h-3 w-3 text-green-600" />
+                      </span>
+                    )}
+                    <div>
+                      <p id="analysis-modal-p-snippetname" className="font-medium text-gray-700">{snippet.name}</p>
+                      <p id="analysis-modal-p-snippetdescription" className="text-xs text-gray-400">{snippet.description}</p>
+                    </div>
+                  </div>
+                  {copiedId === snippet.id ? (
+                    <Check className="h-4 w-4 text-green-500 shrink-0" />
+                  ) : (
+                    <Copy className="h-4 w-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ---- Review Tab ----
+
+interface ReviewTabProps {
+  config: ThemeConfig;
+  copiedId: string | null;
+  onCopy: (text: string, id: string) => void;
+  onSave: () => void;
+  saveStatus: SaveStatus;
+  saveMessage: string;
+}
+
+function ReviewTab({ config, copiedId, onCopy, onSave, saveStatus, saveMessage }: ReviewTabProps) {
+  const cssOutput = generateThemeCSS(config);
+
+  // Find matching brand preset
+  const matchingBrand = brandPresets.find(
+    (p) =>
+      p.config.baseColor.toLowerCase() === config.baseColor.toLowerCase() &&
+      p.config.accentColor.toLowerCase() === config.accentColor.toLowerCase()
+  );
+
+  // Find color names
+  const primaryColorName = colorPresets.find(
+    (c) => c.value.toLowerCase() === config.baseColor.toLowerCase()
+  )?.name || config.baseColor;
+  
+  const accentColorName = colorPresets.find(
+    (c) => c.value.toLowerCase() === config.accentColor.toLowerCase()
+  )?.name || config.accentColor;
+
+  return (
+    <div className="space-y-4">
+      <p id="review-tab-p-review-your-theme-co" className="text-xs text-gray-500">
+        Review your theme configuration and apply it to your project.
+      </p>
+
+      {/* Configuration Summary */}
+      <div className="space-y-2">
+        <h3 id="review-tab-h3-configuration-summar" className="text-xs font-medium uppercase tracking-wide text-gray-400">
+          Configuration Summary
+        </h3>
+        <div className="rounded border border-gray-200 divide-y divide-gray-200">
+          <SummaryRow label="Brand" value={matchingBrand?.name || "Custom"} />
+          <SummaryRow 
+            label="Primary Color" 
+            value={primaryColorName}
+            color={config.baseColor}
+          />
+          <SummaryRow 
+            label="Accent Color" 
+            value={accentColorName}
+            color={config.accentColor}
+          />
+          <SummaryRow label="Border Radius" value={config.radius} />
+          <SummaryRow label="Heading Weight" value={String(config.headingWeight)} />
+          <SummaryRow label="Body Weight" value={String(config.bodyWeight)} />
+          <SummaryRow label="Typography Scale" value={config.typographyScale} />
+          <SummaryRow label="Spacing" value={config.spacing} />
+        </div>
+      </div>
+
+      {/* Files to be updated */}
+      <div className="space-y-2">
+        <h3 id="review-tab-h3-files-to-update" className="text-xs font-medium uppercase tracking-wide text-gray-400">
+          Files to Update
+        </h3>
+        <div className="rounded border border-gray-200 bg-gray-50 p-3 text-xs space-y-1">
+          <p id="review-tab-p-srcthemesonancetheme" className="font-mono text-gray-600">src/theme/sonance-theme.css</p>
+          <p id="review-tab-p-srcthemesonanceconfi" className="font-mono text-gray-600">src/theme/sonance-config.json</p>
+        </div>
+      </div>
+
+      {/* Status Message */}
+      {saveMessage && (
+        <div
+          className={cn(
+            "flex items-start gap-2 p-3 rounded text-xs",
+            saveStatus === "success" && "bg-green-50 text-green-700 border border-green-200",
+            saveStatus === "error" && "bg-red-50 text-red-700 border border-red-200"
+          )}
+        >
+          {saveStatus === "success" && <CheckCircle className="h-4 w-4 shrink-0 mt-0.5" />}
+          {saveStatus === "error" && <AlertCircle className="h-4 w-4 shrink-0 mt-0.5" />}
+          <span id="review-tab-span-savemessage">{saveMessage}</span>
+        </div>
+      )}
+
+      {/* Apply Button */}
+      <button
+        onClick={onSave}
+        disabled={saveStatus === "saving"}
+        className={cn(
+          "w-full flex items-center justify-center gap-2 py-3",
+          "text-sm font-medium text-white rounded transition-colors",
+          "bg-[#333F48] hover:bg-[#2a343c]",
+          "disabled:opacity-50 disabled:cursor-not-allowed"
+        )}
+      >
+        {saveStatus === "saving" ? (
+          <>
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Saving...
+          </>
+        ) : (
+          <>
+            <Save className="h-4 w-4" />
+            Apply Changes
+          </>
+        )}
+      </button>
+
+      {/* CSS Preview (Collapsible) */}
+      <details className="group">
+        <summary className="flex items-center justify-between cursor-pointer text-xs font-medium uppercase tracking-wide text-gray-400 hover:text-gray-600">
+          <span id="review-tab-span-css-preview">CSS Preview</span>
+          <ChevronDown className="h-3 w-3 transition-transform group-open:rotate-180" />
+        </summary>
+        <div className="mt-2 space-y-2">
+          <div className="flex justify-end">
+            <button
+              onClick={() => onCopy(`:root {\n${cssOutput}\n}`, "css")}
+              className={cn(
+                "flex items-center gap-1 px-2 py-1 text-xs rounded",
+                "border border-gray-200 hover:bg-gray-50 transition-colors"
+              )}
+            >
+              {copiedId === "css" ? (
+                <>
+                  <Check className="h-3 w-3 text-green-500" />
+                  Copied
+                </>
+              ) : (
+                <>
+                  <Copy className="h-3 w-3" />
+                  Copy
+                </>
+              )}
+            </button>
+          </div>
+          <pre className="p-3 bg-gray-50 rounded border border-gray-200 text-xs overflow-x-auto max-h-48">
+            <code>{`:root {\n${cssOutput}\n}`}</code>
+          </pre>
+        </div>
+      </details>
+    </div>
+  );
+}
+
+// ---- Summary Row Component ----
+
+function SummaryRow({ 
+  label, 
+  value, 
+  color 
+}: { 
+  label: string; 
+  value: string; 
+  color?: string;
+}) {
+  return (
+    <div className="flex items-center justify-between px-3 py-2">
+      <span id="summary-row-span-label" className="text-xs text-gray-500">{label}</span>
+      <div className="flex items-center gap-2">
+        {color && (
+          <span
+            id="summary-row-span"
+            className="h-4 w-4 rounded-full border border-gray-200"
+            style={{ backgroundColor: color }}
+          />
+        )}
+        <span id="summary-row-span-value" className="text-xs font-medium text-gray-700">{value}</span>
+      </div>
+    </div>
+  );
+}
+
+// ---- Utility Components ----
+
+function Section({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-2">
+      <h3 id="section-h3-title" className="text-xs font-medium uppercase tracking-wide text-gray-400">
+        {title}
+      </h3>
+      {children}
+    </div>
+  );
+}
+
+function ColorSwatch({
+  color,
+  name,
+  selected,
+  onClick,
+}: {
+  color: string;
+  name: string;
+  selected: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "relative h-7 w-7 rounded-full transition-all duration-150",
+        "focus:outline-none focus:ring-2 focus:ring-[#00A3E1] focus:ring-offset-1",
+        selected && "ring-2 ring-[#333F48] ring-offset-2"
+      )}
+      style={{ backgroundColor: color }}
+      aria-label={name}
+      title={name}
+    >
+      {selected && (
+        <Check
+          className="absolute inset-0 m-auto h-3.5 w-3.5"
+          style={{
+            color: isLightColor(color) ? "#000" : "#fff",
+          }}
+        />
+      )}
+    </button>
+  );
+}
+
+function SelectField({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  options: { value: string; label: string }[];
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <span id="select-field-span-label" className="text-xs text-gray-500">{label}</span>
+      <div className="relative">
+        <select
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className={cn(
+            "h-7 pl-2 pr-7 text-xs font-medium rounded",
+            "border border-gray-200 bg-white text-gray-700",
+            "focus:outline-none focus:ring-1 focus:ring-[#00A3E1]",
+            "cursor-pointer appearance-none"
+          )}
+        >
+          {options.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+        <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 h-3 w-3 text-gray-400 pointer-events-none" />
+      </div>
+    </div>
+  );
+}
+
+export default SonanceDevTools;
+