sonance-brand-mcp 1.3.110 → 1.3.112

package/dist/assets/dev-tools/components/InspectorOverlay.tsx

@@ -34,11 +34,11 @@ export interface InspectorOverlayProps {
   changedElements?: VisionFocusedElement[];
 }
 
-// Color config for different element types
+// Color config for different element types - color-coded for unified view
 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
+  component: { border: "#8B5CF6", bg: "#8B5CF6", selectedBorder: "#7C3AED", selectedBg: "#7C3AED" }, // Purple for components
+  logo: { border: "#3B82F6", bg: "#3B82F6", selectedBorder: "#2563EB", selectedBg: "#2563EB" },       // Blue for images/logos
+  text: { border: "#F59E0B", bg: "#F59E0B", selectedBorder: "#D97706", selectedBg: "#D97706" },       // Amber for text
 };
 
 // Preview mode colors - green to indicate pending changes
@@ -198,15 +198,18 @@ export function InspectorOverlay({
         // Use appropriate colors based on mode:
         // - Changed elements (green) - highest priority (Apply-First mode)
         // - Preview mode (green) takes priority
-        // - Vision mode (purple) for vision-focused elements
+        // - Vision mode uses element-type colors (color-coded: purple/blue/amber)
         // - Otherwise use type-based colors
+        const typeColors = inspectorColors[el.type];
         const colors = isChangedElement
           ? previewColors // Green for changed elements
           : previewMode
             ? previewColors
             : visionMode
-              ? (isVisionFocused ? visionColors : { ...visionColors, border: "#8B5CF680", bg: "#8B5CF680" })
-              : inspectorColors[el.type];
+              ? (isVisionFocused 
+                  ? { ...typeColors, selectedBorder: typeColors.selectedBorder, selectedBg: typeColors.selectedBg }
+                  : { ...typeColors, border: typeColors.border + "80", bg: typeColors.bg + "80" })
+              : typeColors;
 
         // Check if this element matches the currently selected component type
         const elementType = el.name?.toLowerCase() || "";
@@ -276,13 +279,13 @@ export function InspectorOverlay({
                 borderColor: (previewMode && isMatchingType) || isChangedElement ? "transparent" : borderColor,
                 borderWidth: (previewMode && isMatchingType) || isChangedElement ? 0 : undefined,
                 // Preview mode / Changed elements: outer glow only, no border overlay
-                // Vision mode: show glow for focused elements
+                // Vision mode: show glow for focused elements with type-specific colors
                 boxShadow: isChangedElement
                   ? `0 0 0 3px ${previewColors.border}, 0 0 20px 8px ${previewColors.border}80`
                   : previewMode && isMatchingType
                     ? `0 0 0 3px ${previewColors.border}, 0 0 20px 8px ${previewColors.border}80`
                     : visionMode && isVisionFocused
-                      ? `0 0 0 3px ${visionColors.border}, 0 0 15px 5px ${visionColors.border}60`
+                      ? `0 0 0 3px ${typeColors.border}, 0 0 15px 5px ${typeColors.border}60`
                       : isSelected
                         ? `0 0 0 2px ${borderColor}40`
                         : undefined,
@@ -309,26 +312,26 @@ export function InspectorOverlay({
               {isChangedElement ? (
                 <>
                   <Check className="h-3 w-3" />
-                  <span>Changed: {el.name}</span>
-                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
+                  <span id="span-changed-elname">Changed: {el.name}</span>
+                  {el.variantId && <span id="span-elvariantidsubstring" className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
                 </>
               ) : previewMode && isMatchingType ? (
                 <>
                   <Sparkles className="h-3 w-3" />
-                  <span>Preview: {el.name}</span>
-                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
+                  <span id="span-preview-elname">Preview: {el.name}</span>
+                  {el.variantId && <span id="span-elvariantidsubstring" className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
                 </>
               ) : visionMode && isVisionFocused ? (
                 <>
                   <Eye className="h-3 w-3" />
-                  <span>Focused: {el.name}</span>
-                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
+                  <span id="span-focused-elname">Focused: {el.name}</span>
+                  {el.variantId && <span id="span-elvariantidsubstring" className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
                 </>
               ) : visionMode ? (
                 <>
                   <Eye className="h-3 w-3 opacity-60" />
                   {el.name}
-                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px] border-l border-white/30 pl-1">#{el.variantId.substring(0, 4)}</span>}
+                  {el.variantId && <span id="span-elvariantidsubstring" className="ml-1 opacity-80 font-mono text-[9px] border-l border-white/30 pl-1">#{el.variantId.substring(0, 4)}</span>}
                 </>
               ) : (
                 <>
@@ -336,8 +339,8 @@ export function InspectorOverlay({
                   {el.type === "component" && <Box className="h-3 w-3" />}
                   {el.type === "text" && <Type className="h-3 w-3" />}
                   {el.name}
-                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px] border-l border-white/30 pl-1">#{el.variantId.substring(0, 4)}</span>}
-                  {isSelected && <span className="ml-1">✓</span>}
+                  {el.variantId && <span id="span-elvariantidsubstring" className="ml-1 opacity-80 font-mono text-[9px] border-l border-white/30 pl-1">#{el.variantId.substring(0, 4)}</span>}
+                  {isSelected && <span id="span-title" className="ml-1">✓</span>}
                 </>
               )}
           </div>