sonance-brand-mcp 1.3.110 → 1.3.112

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,14 +2,16 @@
 
 import React, { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
-import { Eye } from "lucide-react";
 
 interface VisionModeBorderProps {
   active: boolean;
   focusedCount?: number;
+  highlightEnabled?: boolean;
 }
 
-export function VisionModeBorder({ active, focusedCount = 0 }: VisionModeBorderProps) {
+export function VisionModeBorder({ 
+  active, 
+}: VisionModeBorderProps) {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
@@ -39,77 +41,24 @@ export function VisionModeBorder({ active, focusedCount = 0 }: VisionModeBorderP
         }
       `}</style>
 
-      {/* Main border overlay */}
+      {/* 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={{
           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)",
+          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: "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: "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
-        </div>
-      </div>
+      />
     </>,
     document.body
   );

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/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 };
+}