sonance-brand-mcp 1.3.109 → 1.3.111

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

@@ -7,9 +7,14 @@ import { Eye } from "lucide-react";
 interface VisionModeBorderProps {
   active: boolean;
   focusedCount?: number;
+  highlightEnabled?: boolean;
 }
 
-export function VisionModeBorder({ active, focusedCount = 0 }: VisionModeBorderProps) {
+export function VisionModeBorder({ 
+  active, 
+  focusedCount = 0,
+  highlightEnabled = false,
+}: VisionModeBorderProps) {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
@@ -39,20 +44,21 @@ export function VisionModeBorder({ active, focusedCount = 0 }: VisionModeBorderP
         }
       `}</style>
 
-      {/* Main border overlay */}
+      {/* Main border overlay - respects devtools frame if present */}
       <div
         data-vision-mode-border="true"
         style={{
           position: "fixed",
-          top: 0,
+          top: "var(--devtools-banner-height, 0px)",
           left: 0,
-          right: 0,
+          right: "var(--devtools-sidebar-width, 0px)",
           bottom: 0,
           pointerEvents: "none",
           zIndex: 9996, // Below DevTools (9999) but above content
           border: "4px solid #8B5CF6",
           boxShadow: "inset 0 0 30px rgba(139, 92, 246, 0.3), 0 0 30px rgba(139, 92, 246, 0.3)",
           animation: "vision-pulse 2s ease-in-out infinite, vision-glow 2s ease-in-out infinite",
+          transition: "all 0.2s ease-out",
         }}
       >
         {/* Corner indicator */}
@@ -70,7 +76,7 @@ export function VisionModeBorder({ active, focusedCount = 0 }: VisionModeBorderP
             borderRadius: "6px",
             fontSize: "12px",
             fontWeight: 600,
-            fontFamily: "system-ui, -apple-system, sans-serif",
+            fontFamily: "Montserrat, system-ui, -apple-system, sans-serif",
             boxShadow: "0 2px 8px rgba(139, 92, 246, 0.4)",
           }}
         >
@@ -102,12 +108,15 @@ export function VisionModeBorder({ active, focusedCount = 0 }: VisionModeBorderP
             padding: "8px 16px",
             borderRadius: "8px",
             fontSize: "13px",
-            fontFamily: "system-ui, -apple-system, sans-serif",
+            fontFamily: "Montserrat, system-ui, -apple-system, sans-serif",
             boxShadow: "0 2px 12px rgba(139, 92, 246, 0.5)",
             whiteSpace: "nowrap",
           }}
         >
-          Click elements to focus AI attention, then describe your changes in the chat
+          {highlightEnabled 
+            ? "Click elements to focus AI attention, then describe your changes"
+            : "Toggle highlighting in the banner to select elements"
+          }
         </div>
       </div>
     </>,

package/dist/assets/dev-tools/constants.ts

@@ -1,13 +1,45 @@
 
 import { Box, Image as ImageIcon, Type, Scan } from "lucide-react";
-import { TabDefinition, ConfigSection } from "./types";
+import { TabDefinition, ConfigSection, ElementFilters } from "./types";
 import { componentSnippets } from "../../lib/brand-system";
 
-export const tabs: TabDefinition[] = [
-  { id: "components", label: "Components", icon: Box },
-  { id: "logos", label: "Logos", icon: ImageIcon },
-  { id: "text", label: "Text", icon: Type },
-];
+// Note: Tabs have been simplified - elements are now unified with filters
+// Analysis is the only separate "tab" mode
+
+// Default element filters - all enabled by default
+export const DEFAULT_ELEMENT_FILTERS: ElementFilters = {
+  components: true,
+  images: true,
+  text: true,
+};
+
+// Element type color scheme for the unified view
+export const ELEMENT_TYPE_COLORS = {
+  components: {
+    border: "#8B5CF6", // Purple
+    bg: "rgba(139, 92, 246, 0.1)",
+    activeBg: "bg-purple-100",
+    activeText: "text-purple-700",
+    activeBorder: "border-purple-300",
+    label: "Components",
+  },
+  images: {
+    border: "#3B82F6", // Blue
+    bg: "rgba(59, 130, 246, 0.1)",
+    activeBg: "bg-blue-100",
+    activeText: "text-blue-700",
+    activeBorder: "border-blue-300",
+    label: "Images",
+  },
+  text: {
+    border: "#F59E0B", // Amber
+    bg: "rgba(245, 158, 11, 0.1)",
+    activeBg: "bg-amber-100",
+    activeText: "text-amber-700",
+    activeBorder: "border-amber-300",
+    label: "Text",
+  },
+};
 
 // Quick action presets for common styling changes
 export const QUICK_ACTIONS = [

package/dist/assets/dev-tools/hooks/useComputedStyles.ts

@@ -0,0 +1,365 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+export interface ComputedGeometry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation: number;
+}
+
+export interface ComputedTypography {
+  fontFamily: string;
+  fontSize: string;
+  fontWeight: string;
+  lineHeight: string;
+  letterSpacing: string;
+  textAlign: string;
+  color: string;
+}
+
+export interface ComputedFill {
+  type: "solid" | "gradient" | "image";
+  color?: string;
+  opacity: number;
+}
+
+export interface ComputedStroke {
+  color: string;
+  width: string;
+  style: string;
+}
+
+export interface ComputedEffect {
+  type: "shadow" | "blur";
+  value: string;
+}
+
+export interface ComputedStyles {
+  // Element Info
+  tagName: string;
+  className: string;
+  id: string;
+  
+  // Geometry (Layout)
+  geometry: ComputedGeometry;
+  
+  // Appearance
+  opacity: number;
+  borderRadius: string;
+  overflow: string;
+  
+  // Typography (for text elements)
+  typography: ComputedTypography | null;
+  hasText: boolean;
+  textContent: string;
+  
+  // Fills (backgrounds)
+  fills: ComputedFill[];
+  
+  // Strokes (borders)
+  strokes: ComputedStroke[];
+  
+  // Effects (shadows, filters)
+  effects: ComputedEffect[];
+  
+  // Display & Layout
+  display: string;
+  flexDirection: string;
+  alignItems: string;
+  justifyContent: string;
+  gap: string;
+  padding: string;
+  margin: string;
+}
+
+function parseColor(color: string): { color: string; opacity: number } {
+  // Handle rgba
+  const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+  if (rgbaMatch) {
+    const [, r, g, b, a] = rgbaMatch;
+    const hex = `#${parseInt(r).toString(16).padStart(2, '0')}${parseInt(g).toString(16).padStart(2, '0')}${parseInt(b).toString(16).padStart(2, '0')}`;
+    return { color: hex.toUpperCase(), opacity: a ? parseFloat(a) : 1 };
+  }
+  
+  // Handle hex
+  if (color.startsWith('#')) {
+    return { color: color.toUpperCase(), opacity: 1 };
+  }
+  
+  // Handle transparent
+  if (color === 'transparent') {
+    return { color: 'transparent', opacity: 0 };
+  }
+  
+  return { color, opacity: 1 };
+}
+
+function extractFills(styles: CSSStyleDeclaration): ComputedFill[] {
+  const fills: ComputedFill[] = [];
+  
+  const bg = styles.backgroundColor;
+  if (bg && bg !== 'transparent' && bg !== 'rgba(0, 0, 0, 0)') {
+    const { color, opacity } = parseColor(bg);
+    fills.push({ type: 'solid', color, opacity });
+  }
+  
+  const bgImage = styles.backgroundImage;
+  if (bgImage && bgImage !== 'none') {
+    if (bgImage.includes('gradient')) {
+      fills.push({ type: 'gradient', color: bgImage, opacity: 1 });
+    } else if (bgImage.includes('url')) {
+      fills.push({ type: 'image', opacity: 1 });
+    }
+  }
+  
+  return fills;
+}
+
+function extractStrokes(styles: CSSStyleDeclaration): ComputedStroke[] {
+  const strokes: ComputedStroke[] = [];
+  
+  const borderWidth = styles.borderWidth;
+  const borderColor = styles.borderColor;
+  const borderStyle = styles.borderStyle;
+  
+  if (borderWidth && borderWidth !== '0px' && borderStyle !== 'none') {
+    const { color } = parseColor(borderColor);
+    strokes.push({
+      color,
+      width: borderWidth,
+      style: borderStyle,
+    });
+  }
+  
+  return strokes;
+}
+
+function extractEffects(styles: CSSStyleDeclaration): ComputedEffect[] {
+  const effects: ComputedEffect[] = [];
+  
+  const boxShadow = styles.boxShadow;
+  if (boxShadow && boxShadow !== 'none') {
+    effects.push({ type: 'shadow', value: boxShadow });
+  }
+  
+  const filter = styles.filter;
+  if (filter && filter !== 'none') {
+    effects.push({ type: 'blur', value: filter });
+  }
+  
+  return effects;
+}
+
+function isTextElement(element: HTMLElement): boolean {
+  const textTags = ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'SPAN', 'A', 'LABEL', 'LI', 'TD', 'TH', 'BUTTON'];
+  if (textTags.includes(element.tagName)) return true;
+  
+  // Check if element has direct text content
+  const hasDirectText = Array.from(element.childNodes).some(
+    node => node.nodeType === Node.TEXT_NODE && node.textContent?.trim()
+  );
+  
+  return hasDirectText;
+}
+
+export function useComputedStyles(elementId: string | null, variantId?: string | null): ComputedStyles | null {
+  const [styles, setStyles] = useState<ComputedStyles | null>(null);
+
+  const extractStyles = useCallback(() => {
+    if (!elementId) {
+      setStyles(null);
+      return;
+    }
+
+    // Try to find element by ID first, then by data attributes
+    let element: HTMLElement | null = document.getElementById(elementId);
+    
+    if (!element) {
+      // Try finding by component type and variant
+      const selector = variantId 
+        ? `[data-component-type="${elementId}"][data-variant-id="${variantId}"]`
+        : `[data-component-type="${elementId}"]`;
+      element = document.querySelector(selector);
+    }
+    
+    if (!element) {
+      // Try finding any element with matching text content or class
+      const allElements = document.querySelectorAll('button, a, [role="button"], input, select, textarea, h1, h2, h3, h4, h5, h6, p, span');
+      for (const el of allElements) {
+        if (el.id === elementId || el.className.includes(elementId)) {
+          element = el as HTMLElement;
+          break;
+        }
+      }
+    }
+
+    if (!element) {
+      setStyles(null);
+      return;
+    }
+
+    const computed = window.getComputedStyle(element);
+    const rect = element.getBoundingClientRect();
+    
+    // Extract rotation from transform matrix
+    let rotation = 0;
+    const transform = computed.transform;
+    if (transform && transform !== 'none') {
+      const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
+      if (matrixMatch) {
+        const values = matrixMatch[1].split(',').map(v => parseFloat(v.trim()));
+        rotation = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
+      }
+    }
+
+    const hasText = isTextElement(element);
+    const textContent = element.textContent?.trim().substring(0, 50) || '';
+
+    const computedStyles: ComputedStyles = {
+      tagName: element.tagName.toLowerCase(),
+      className: element.className?.toString() || '',
+      id: element.id || '',
+      
+      geometry: {
+        x: Math.round(rect.left),
+        y: Math.round(rect.top),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+        rotation,
+      },
+      
+      opacity: parseFloat(computed.opacity) * 100,
+      borderRadius: computed.borderRadius,
+      overflow: computed.overflow,
+      
+      typography: hasText ? {
+        fontFamily: computed.fontFamily.split(',')[0].replace(/['"]/g, ''),
+        fontSize: computed.fontSize,
+        fontWeight: computed.fontWeight,
+        lineHeight: computed.lineHeight,
+        letterSpacing: computed.letterSpacing,
+        textAlign: computed.textAlign,
+        color: parseColor(computed.color).color,
+      } : null,
+      hasText,
+      textContent,
+      
+      fills: extractFills(computed),
+      strokes: extractStrokes(computed),
+      effects: extractEffects(computed),
+      
+      display: computed.display,
+      flexDirection: computed.flexDirection,
+      alignItems: computed.alignItems,
+      justifyContent: computed.justifyContent,
+      gap: computed.gap,
+      padding: computed.padding,
+      margin: computed.margin,
+    };
+
+    setStyles(computedStyles);
+  }, [elementId, variantId]);
+
+  useEffect(() => {
+    extractStyles();
+    
+    // Re-extract on resize/scroll
+    const handleUpdate = () => extractStyles();
+    window.addEventListener('resize', handleUpdate);
+    window.addEventListener('scroll', handleUpdate, true);
+    
+    return () => {
+      window.removeEventListener('resize', handleUpdate);
+      window.removeEventListener('scroll', handleUpdate, true);
+    };
+  }, [extractStyles]);
+
+  return styles;
+}
+
+// Simpler version that works with VisionFocusedElement coordinates
+export function useElementFromCoordinates(coordinates: { x: number; y: number; width: number; height: number } | null): ComputedStyles | null {
+  const [styles, setStyles] = useState<ComputedStyles | null>(null);
+
+  useEffect(() => {
+    if (!coordinates) {
+      setStyles(null);
+      return;
+    }
+
+    // Find element at center of coordinates
+    const centerX = coordinates.x + coordinates.width / 2;
+    const centerY = coordinates.y + coordinates.height / 2;
+    
+    const element = document.elementFromPoint(centerX, centerY) as HTMLElement;
+    
+    if (!element || element.closest('[data-sonance-devtools="true"]')) {
+      setStyles(null);
+      return;
+    }
+
+    const computed = window.getComputedStyle(element);
+    const rect = element.getBoundingClientRect();
+    
+    let rotation = 0;
+    const transform = computed.transform;
+    if (transform && transform !== 'none') {
+      const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
+      if (matrixMatch) {
+        const values = matrixMatch[1].split(',').map(v => parseFloat(v.trim()));
+        rotation = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
+      }
+    }
+
+    const hasText = isTextElement(element);
+    const textContent = element.textContent?.trim().substring(0, 50) || '';
+
+    setStyles({
+      tagName: element.tagName.toLowerCase(),
+      className: element.className?.toString() || '',
+      id: element.id || '',
+      
+      geometry: {
+        x: Math.round(rect.left),
+        y: Math.round(rect.top),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+        rotation,
+      },
+      
+      opacity: parseFloat(computed.opacity) * 100,
+      borderRadius: computed.borderRadius,
+      overflow: computed.overflow,
+      
+      typography: hasText ? {
+        fontFamily: computed.fontFamily.split(',')[0].replace(/['"]/g, ''),
+        fontSize: computed.fontSize,
+        fontWeight: computed.fontWeight,
+        lineHeight: computed.lineHeight,
+        letterSpacing: computed.letterSpacing,
+        textAlign: computed.textAlign,
+        color: parseColor(computed.color).color,
+      } : null,
+      hasText,
+      textContent,
+      
+      fills: extractFills(computed),
+      strokes: extractStrokes(computed),
+      effects: extractEffects(computed),
+      
+      display: computed.display,
+      flexDirection: computed.flexDirection,
+      alignItems: computed.alignItems,
+      justifyContent: computed.justifyContent,
+      gap: computed.gap,
+      padding: computed.padding,
+      margin: computed.margin,
+    });
+  }, [coordinates]);
+
+  return styles;
+}
+

package/dist/assets/dev-tools/index.ts

@@ -21,6 +21,9 @@ export {
 export { Section, ColorSwatch, SelectField } from "./components/common";
 export { InspectorOverlay } from "./components/InspectorOverlay";
 export { ChatInterface } from "./components/ChatInterface";
+export { ChatTabBar } from "./components/ChatTabBar";
+export { ChatHistory } from "./components/ChatHistory";
+export { InlineDiffPreview } from "./components/InlineDiffPreview";
 export { DiffPreview } from "./components/DiffPreview";
 
 // Panels

package/dist/assets/dev-tools/panels/AnalysisPanel.tsx

@@ -25,24 +25,24 @@ export function AnalysisPanel({
   onBulkTag,
 }: AnalysisPanelProps) {
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       {/* 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 className="text-center py-4 space-y-3">
+          <div className="mx-auto w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
+            <Scan className="h-5 w-5 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.
+            <h3 id="analysis-panel-h3-analyze-your-project" className="text-sm font-medium">Analyze Project</h3>
+            <p id="analysis-panel-p-scan-your-codebase-t" className="text-[11px] text-gray-500 mt-0.5">
+              Index 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"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-[#333F48] text-white text-xs font-medium rounded hover:bg-[#2a343c] transition-colors"
           >
-            <Scan className="h-4 w-4" />
+            <Scan className="h-3.5 w-3.5" />
             Scan Project
           </button>
         </div>
@@ -50,14 +50,14 @@ export function AnalysisPanel({
 
       {/* 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 className="text-center py-4 space-y-3">
+          <div className="mx-auto w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center">
+            <Loader2 className="h-5 w-5 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.
+            <h3 id="analysis-panel-h3-scanning" className="text-sm font-medium">Scanning...</h3>
+            <p id="analysis-panel-p-analyzing-your-sourc" className="text-[11px] text-gray-500 mt-0.5">
+              Analyzing source files.
             </p>
           </div>
         </div>
@@ -65,19 +65,19 @@ export function AnalysisPanel({
 
       {/* 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 className="text-center py-4 space-y-3">
+          <div className="mx-auto w-10 h-10 rounded-full bg-red-50 flex items-center justify-center">
+            <AlertCircle className="h-5 w-5 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>
+            <h3 id="analysis-panel-h3-analysis-failed" className="text-sm font-medium text-red-600">Analysis Failed</h3>
+            <p id="analysis-panel-p-analysiserror" className="text-[11px] text-gray-500 mt-0.5">{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"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-[#333F48] text-white text-xs font-medium rounded hover:bg-[#2a343c] transition-colors"
           >
-            <RotateCcw className="h-4 w-4" />
+            <RotateCcw className="h-3.5 w-3.5" />
             Try Again
           </button>
         </div>
@@ -87,18 +87,18 @@ export function AnalysisPanel({
       {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 className="grid grid-cols-3 gap-1.5">
+            <div className="p-1.5 rounded border border-gray-200 bg-gray-50 text-center">
+              <div className="text-[9px] text-gray-500 uppercase tracking-wide">Files</div>
+              <div className="text-base 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 className="p-1.5 rounded border border-green-200 bg-green-50 text-center">
+              <div className="text-[9px] text-green-600 uppercase tracking-wide">With IDs</div>
+              <div className="text-base 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 className="p-1.5 rounded border border-amber-200 bg-amber-50 text-center">
+              <div className="text-[9px] text-amber-600 uppercase tracking-wide">Missing</div>
+              <div className="text-base font-semibold text-amber-700">{analysisResult.summary.elementsMissingId}</div>
             </div>
           </div>