sonance-brand-mcp 1.3.111 → 1.3.113

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

@@ -368,7 +368,7 @@ export function ScreenshotAnnotator({
         }}
       >
         <Crop size={18} />
-        <span>Click and drag to select the area you want to focus on</span>
+        <span id="span-click-and-drag-to-se">Click and drag to select the area you want to focus on</span>
       </div>
 
       {/* Current rectangle selection */}

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

@@ -96,7 +96,7 @@ export function SectionHighlight({ active, focusedElements }: SectionHighlightPr
           }}
         >
           <Box size={12} />
-          <span>Section: {labelText}</span>
+          <span id="span-section-labeltext">Section: {labelText}</span>
         </div>
 
         {/* Corner markers for emphasis */}

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

@@ -34,14 +34,14 @@ function FileModificationCard({
           <ChevronRight className="h-3.5 w-3.5 text-gray-400 flex-shrink-0" />
         )}
         <FileCode className="h-3.5 w-3.5 text-purple-500 flex-shrink-0" />
-        <span className="text-xs font-mono text-gray-700 truncate flex-1">
+        <span id="file-modification-card-span-modificationfilepath" className="text-xs font-mono text-gray-700 truncate flex-1">
           {modification.filePath}
         </span>
       </button>
 
       {/* Explanation */}
       <div className="px-2 pb-2">
-        <p className="text-[10px] text-gray-500">{modification.explanation}</p>
+        <p id="file-modification-card-p-modificationexplanat" className="text-[10px] text-gray-500">{modification.explanation}</p>
       </div>
 
       {/* Expanded Diff */}
@@ -108,10 +108,10 @@ export function VisionDiffPreview({
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Eye className="h-4 w-4 text-purple-600" />
-          <span className="text-xs font-semibold text-gray-900">
+          <span id="vision-diff-preview-span-vision-mode-changes-" className="text-xs font-semibold text-gray-900">
             Vision Mode Changes Ready
           </span>
-          <span className="text-[10px] px-1.5 py-0.5 rounded bg-purple-200 text-purple-700 font-medium">
+          <span id="vision-diff-preview-span-filecount-filefileco" className="text-[10px] px-1.5 py-0.5 rounded bg-purple-200 text-purple-700 font-medium">
             {fileCount} file{fileCount !== 1 ? "s" : ""}
           </span>
         </div>
@@ -124,7 +124,7 @@ export function VisionDiffPreview({
       </div>
 
       {/* Overall Explanation */}
-      <p className="text-xs text-gray-600">{pendingEdit.explanation}</p>
+      <p id="vision-diff-preview-p-pendingeditexplanati" className="text-xs text-gray-600">{pendingEdit.explanation}</p>
 
       {/* File Modifications List */}
       <div className="space-y-2 max-h-80 overflow-y-auto">
@@ -141,7 +141,7 @@ export function VisionDiffPreview({
       {/* Live Preview Indicator */}
       <div className="flex items-center gap-2 p-2 rounded bg-purple-100 border border-purple-200">
         <Eye className="h-3.5 w-3.5 text-purple-600" />
-        <span className="text-xs text-purple-700">
+        <span id="vision-diff-preview-span-live-preview-active-" className="text-xs text-purple-700">
           Live preview active - scroll to see changes on the page
         </span>
       </div>
@@ -150,7 +150,7 @@ export function VisionDiffPreview({
       {fileCount > 1 && (
         <div className="flex items-start gap-2 p-2 rounded bg-amber-50 border border-amber-200">
           <AlertCircle className="h-3.5 w-3.5 text-amber-600 mt-0.5 flex-shrink-0" />
-          <span className="text-xs text-amber-700">
+          <span id="vision-diff-preview-span-multiple-files-will-" className="text-xs text-amber-700">
             Multiple files will be modified. Review each file before saving.
           </span>
         </div>

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

@@ -2,7 +2,6 @@
 
 import React, { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
-import { Eye } from "lucide-react";
 
 interface VisionModeBorderProps {
   active: boolean;
@@ -12,8 +11,6 @@ interface VisionModeBorderProps {
 
 export function VisionModeBorder({ 
   active, 
-  focusedCount = 0,
-  highlightEnabled = false,
 }: VisionModeBorderProps) {
   const [mounted, setMounted] = useState(false);
 
@@ -45,6 +42,7 @@ export function VisionModeBorder({
       `}</style>
 
       {/* Main border overlay - respects devtools frame if present */}
+      {/* Removed corner pill and bottom instruction to not cover UI elements */}
       <div
         data-vision-mode-border="true"
         style={{
@@ -55,70 +53,12 @@ export function VisionModeBorder({
           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)",
+          border: "3px solid #8B5CF6",
+          boxShadow: "inset 0 0 20px rgba(139, 92, 246, 0.2), 0 0 20px rgba(139, 92, 246, 0.2)",
           animation: "vision-pulse 2s ease-in-out infinite, vision-glow 2s ease-in-out infinite",
           transition: "all 0.2s ease-out",
         }}
-      >
-        {/* Corner indicator */}
-        <div
-          style={{
-            position: "absolute",
-            top: "12px",
-            left: "12px",
-            display: "flex",
-            alignItems: "center",
-            gap: "6px",
-            backgroundColor: "#8B5CF6",
-            color: "white",
-            padding: "6px 12px",
-            borderRadius: "6px",
-            fontSize: "12px",
-            fontWeight: 600,
-            fontFamily: "Montserrat, system-ui, -apple-system, sans-serif",
-            boxShadow: "0 2px 8px rgba(139, 92, 246, 0.4)",
-          }}
-        >
-          <Eye size={14} />
-          <span>Vision Mode</span>
-          {focusedCount > 0 && (
-            <span
-              style={{
-                backgroundColor: "rgba(255, 255, 255, 0.2)",
-                padding: "2px 6px",
-                borderRadius: "4px",
-                marginLeft: "4px",
-              }}
-            >
-              {focusedCount} focused
-            </span>
-          )}
-        </div>
-
-        {/* Instruction hint at bottom */}
-        <div
-          style={{
-            position: "absolute",
-            bottom: "12px",
-            left: "50%",
-            transform: "translateX(-50%)",
-            backgroundColor: "rgba(139, 92, 246, 0.9)",
-            color: "white",
-            padding: "8px 16px",
-            borderRadius: "8px",
-            fontSize: "13px",
-            fontFamily: "Montserrat, system-ui, -apple-system, sans-serif",
-            boxShadow: "0 2px 12px rgba(139, 92, 246, 0.5)",
-            whiteSpace: "nowrap",
-          }}
-        >
-          {highlightEnabled 
-            ? "Click elements to focus AI attention, then describe your changes"
-            : "Toggle highlighting in the banner to select elements"
-          }
-        </div>
-      </div>
+      />
     </>,
     document.body
   );

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

@@ -0,0 +1,69 @@
+/**
+ * Dev Tools Hooks
+ *
+ * Modular hooks for element detection and styling in the Sonance DevTools.
+ *
+ * Architecture:
+ * - useElementScanner: Main orchestrator that combines all detection types
+ * - useComponentDetection: Component-specific detection
+ * - useImageDetection: Image/logo detection with original state tracking
+ * - useTextDetection: Text element detection with filtering
+ * - useContentHash: Content-based ID generation for stability
+ * - useComputedStyles: Get computed styles for selected elements
+ */
+
+// Main scanner hook (use this in most cases)
+export {
+  useElementScanner,
+  extractLogoName,
+  type ElementScannerOptions,
+  type ElementScannerResult,
+} from "./useElementScanner";
+
+// Individual detection hooks (for custom implementations)
+export {
+  useComponentDetection,
+  detectComponents,
+  type ComponentDetectionConfig,
+} from "./useComponentDetection";
+
+export {
+  useImageDetection,
+  detectImages,
+  type ImageDetectionConfig,
+  type ImageDetectionResult,
+} from "./useImageDetection";
+
+export {
+  useTextDetection,
+  detectTextElements,
+  type TextDetectionConfig,
+  type TextDetectionResult,
+} from "./useTextDetection";
+
+// Content-based hashing utilities
+export {
+  hashString,
+  generateTextElementId,
+  generateImageElementId,
+  generateComponentId,
+  generateVariantId,
+  migrateLegacyIds,
+  isLegacyId,
+  isMigrationComplete,
+  markMigrationComplete,
+  MIGRATION_STORAGE_KEY,
+  MIGRATION_VERSION,
+} from "./useContentHash";
+
+// Computed styles hook (existing)
+export {
+  useComputedStyles,
+  useElementFromCoordinates,
+  type ComputedStyles,
+  type ComputedGeometry,
+  type ComputedTypography,
+  type ComputedFill,
+  type ComputedStroke,
+  type ComputedEffect,
+} from "./useComputedStyles";

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

@@ -0,0 +1,132 @@
+"use client";
+
+import { useCallback } from "react";
+import { DetectedElement } from "../types";
+import { generateVariantId, generateComponentId } from "./useContentHash";
+
+/**
+ * Component detection configuration
+ */
+export interface ComponentDetectionConfig {
+  /** Whether to include elements in modals/dialogs */
+  includeModals: boolean;
+  /** Callback to check if element is in active layer */
+  isInActiveLayer: (el: Element) => boolean;
+  /** Callback to get visible rect (clipped to scroll container) */
+  getVisibleRect: (el: Element, rect: DOMRect) => DOMRect | null;
+}
+
+/**
+ * Generic element selectors for untagged primitives
+ */
+const GENERIC_SELECTORS: Record<string, string> = {
+  button: "button:not([data-sonance-name])",
+  input: "input:not([data-sonance-name])",
+  select: "select:not([data-sonance-name])",
+  textarea: "textarea:not([data-sonance-name])",
+};
+
+/**
+ * Detect components on the page
+ * Handles both explicitly tagged components and generic primitives
+ */
+export function detectComponents(config: ComponentDetectionConfig): DetectedElement[] {
+  const { isInActiveLayer, getVisibleRect } = config;
+  const detected: DetectedElement[] = [];
+
+  // 1. Scan for explicitly tagged components
+  const taggedComponents = document.querySelectorAll("[data-sonance-name]");
+  taggedComponents.forEach((el) => {
+    if (!isInActiveLayer(el)) return;
+
+    const name = el.getAttribute("data-sonance-name");
+    if (!name) return;
+
+    const rawRect = el.getBoundingClientRect();
+    const rect = getVisibleRect(el, rawRect);
+    if (!rect || rect.width <= 0 || rect.height <= 0) return;
+
+    // Get or generate stable variant ID
+    let variantId = el.getAttribute("data-sonance-variant");
+    if (!variantId) {
+      variantId = generateVariantId(el);
+      el.setAttribute("data-sonance-variant", variantId);
+    }
+
+    // Capture metadata for AI context
+    const textContent = (el.textContent?.trim() || "").substring(0, 100);
+    const className = el.className?.toString() || "";
+    const elementId = el.id || undefined;
+    const childIds = Array.from(el.querySelectorAll("[id]"))
+      .map((child) => child.id)
+      .filter((id) => id) as string[];
+
+    detected.push({
+      name,
+      rect,
+      type: "component",
+      variantId,
+      textContent,
+      className,
+      elementId,
+      childIds: childIds.length > 0 ? childIds : undefined,
+    });
+  });
+
+  // 2. Scan for untagged primitive elements
+  for (const [genericName, selector] of Object.entries(GENERIC_SELECTORS)) {
+    const elements = document.querySelectorAll(selector);
+    elements.forEach((el) => {
+      if (!isInActiveLayer(el)) return;
+
+      const rawRect = el.getBoundingClientRect();
+      const rect = getVisibleRect(el, rawRect);
+      if (!rect || rect.width <= 0 || rect.height <= 0) return;
+
+      // Get or generate stable variant ID
+      let variantId = el.getAttribute("data-sonance-variant");
+      if (!variantId) {
+        variantId = generateVariantId(el);
+        el.setAttribute("data-sonance-variant", variantId);
+      }
+
+      // Auto-tag generic elements for future detection
+      if (!el.getAttribute("data-sonance-name")) {
+        el.setAttribute("data-sonance-name", genericName);
+      }
+
+      // Capture metadata
+      const textContent = (el.textContent?.trim() || "").substring(0, 100);
+      const elClassName = el.className?.toString() || "";
+      const elementId = el.id || undefined;
+      const childIds = Array.from(el.querySelectorAll("[id]"))
+        .map((child) => child.id)
+        .filter((id) => id) as string[];
+
+      detected.push({
+        name: genericName,
+        rect,
+        type: "component",
+        variantId,
+        textContent,
+        className: elClassName,
+        elementId,
+        childIds: childIds.length > 0 ? childIds : undefined,
+      });
+    });
+  }
+
+  return detected;
+}
+
+/**
+ * Hook for component detection
+ * Returns a memoized detection function
+ */
+export function useComponentDetection() {
+  const detect = useCallback((config: ComponentDetectionConfig): DetectedElement[] => {
+    return detectComponents(config);
+  }, []);
+
+  return { detectComponents: detect };
+}

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
+import type { VisionFocusedElement } from "../types";
 
 export interface ComputedGeometry {
   x: number;
@@ -216,7 +217,7 @@ export function useComputedStyles(elementId: string | null, variantId?: string |
     }
 
     const hasText = isTextElement(element);
-    const textContent = element.textContent?.trim().substring(0, 50) || '';
+    const textContent = element.textContent?.trim() || '';
 
     const computedStyles: ComputedStyles = {
       tagName: element.tagName.toLowerCase(),
@@ -280,85 +281,190 @@ export function useComputedStyles(elementId: string | null, variantId?: string |
   return styles;
 }
 
-// Simpler version that works with VisionFocusedElement coordinates
-export function useElementFromCoordinates(coordinates: { x: number; y: number; width: number; height: number } | null): ComputedStyles | null {
+/**
+ * Multi-strategy element finding for robustness after HMR
+ * Tries multiple methods to find the element, falling back through them
+ * 
+ * Priority order:
+ * 1. Element ID with styled child detection (most reliable for nested styled elements)
+ * 2. Text content with span priority (finds styled inline elements)
+ * 3. Coordinates (fallback for when other strategies fail)
+ * 
+ * Note: Coordinates are stored as screen coordinates at click time and become
+ * invalid after scroll/layout changes, so they're used as a fallback, not primary.
+ */
+function findElementByMultipleStrategies(focusedElement: VisionFocusedElement): HTMLElement | null {
+  // Strategy 1: Find by element ID with styled child detection
+  // This handles cases where the detected element is a container (like <p>)
+  // but the actual styled element is a child (like <span style="color:...">)
+  if (focusedElement.elementId) {
+    const byId = document.getElementById(focusedElement.elementId);
+    if (byId && !byId.closest('[data-sonance-devtools="true"]')) {
+      // First, check if there's a styled child element with inline color
+      const styledChild = byId.querySelector('[style*="color"]') as HTMLElement;
+      if (styledChild) {
+        return styledChild;
+      }
+      // No styled child, return the element itself
+      return byId;
+    }
+  }
+  
+  // Strategy 2: Find by text content, prioritizing span elements (which often have styling)
+  if (focusedElement.textContent) {
+    const textToFind = focusedElement.textContent.trim();
+    if (textToFind.length > 0) {
+      // Search specifically for span first (inline styled elements), then other text elements
+      const spanCandidates = document.querySelectorAll('span');
+      for (const el of spanCandidates) {
+        if (el.closest('[data-sonance-devtools="true"]')) continue;
+        const elText = el.textContent?.trim() || '';
+        const compareLength = Math.min(30, textToFind.length);
+        if (elText.startsWith(textToFind.substring(0, compareLength))) {
+          return el as HTMLElement;
+        }
+      }
+      
+      // Fallback to other text elements
+      const candidates = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, label, button, a, td, th, li, div');
+      for (const el of candidates) {
+        if (el.closest('[data-sonance-devtools="true"]')) continue;
+        const elText = el.textContent?.trim() || '';
+        const compareLength = Math.min(30, textToFind.length);
+        if (elText.startsWith(textToFind.substring(0, compareLength))) {
+          // Check if this element has a styled span child
+          const styledSpan = el.querySelector('span[style*="color"]') as HTMLElement;
+          if (styledSpan) {
+            return styledSpan;
+          }
+          return el as HTMLElement;
+        }
+      }
+    }
+  }
+  
+  // Strategy 3: Find by coordinates (fallback - coordinates may be stale after scroll)
+  const { coordinates } = focusedElement;
+  if (coordinates) {
+    const centerX = coordinates.x + coordinates.width / 2;
+    const centerY = coordinates.y + coordinates.height / 2;
+    const byCoords = document.elementFromPoint(centerX, centerY) as HTMLElement;
+    if (byCoords && !byCoords.closest('[data-sonance-devtools="true"]')) {
+      return byCoords;
+    }
+  }
+  
+  return null;
+}
+
+// Enhanced version that works with full VisionFocusedElement for robust element finding
+export function useElementFromCoordinates(focusedElement: VisionFocusedElement | null): ComputedStyles | null {
   const [styles, setStyles] = useState<ComputedStyles | null>(null);
+  const [refreshCounter, setRefreshCounter] = useState(0);
 
   useEffect(() => {
-    if (!coordinates) {
+    if (!focusedElement) {
       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"]')) {
+    // Use multi-strategy element finding for robustness after HMR
+    const element = findElementByMultipleStrategies(focusedElement);
+
+    if (!element) {
       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 extractAndSetStyles = () => {
+      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) || '';
+      const hasText = isTextElement(element);
+      const textContent = element.textContent?.trim() || '';
 
-    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,
+      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,
+      });
+    };
+
+    // Initial extraction
+    extractAndSetStyles();
+
+    // Watch for DOM changes (HMR updates) using MutationObserver
+    const observer = new MutationObserver((mutations) => {
+      // Check if any mutation affects our element's content
+      for (const mutation of mutations) {
+        if (mutation.type === 'characterData' ||
+            mutation.type === 'childList' ||
+            (mutation.type === 'attributes' && mutation.target === element)) {
+          // Trigger a refresh
+          setRefreshCounter(c => c + 1);
+          break;
+        }
+      }
     });
-  }, [coordinates]);
+
+    // Observe the element and its subtree for changes
+    observer.observe(element, {
+      characterData: true,
+      childList: true,
+      subtree: true,
+      attributes: true,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [focusedElement, refreshCounter]);
 
   return styles;
 }