sonance-brand-mcp 1.3.90 → 1.3.92

package/dist/assets/api/sonance-vision-apply/route.ts

@@ -322,46 +322,228 @@ function findElementLineInFile(
     }
   }
   
-  // PRIORITY 3: Distinctive className patterns
-  if (focusedElement.className) {
-    // Extract distinctive class names (long, not hover/focus pseudo-classes)
-    const classes = focusedElement.className.split(/\s+/)
-      .filter(c => c.length > 8 && !c.startsWith('hover:') && !c.startsWith('focus:') && !c.startsWith('active:'));
-    
-    for (const cls of classes) {
+  // PRIORITY 2b: Look for icon patterns if type is button and no text (like X buttons)
+  if (focusedElement.type === 'button' && (!focusedElement.textContent || focusedElement.textContent.trim().length === 0)) {
+    // Common close/icon button patterns
+    const iconPatterns = ['<X ', '<X/', 'DialogClose', 'DialogPrimitive.Close', 'closeButton', 'CloseButton'];
+    for (const pattern of iconPatterns) {
       for (let i = 0; i < lines.length; i++) {
-        if (lines[i].includes(cls)) {
+        if (lines[i].includes(pattern)) {
           return {
             lineNumber: i + 1,
             snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
-            confidence: 'medium',
-            matchedBy: `className contains "${cls}"`
+            confidence: 'low',
+            matchedBy: `icon pattern "${pattern}"`
           };
         }
       }
     }
+  }
+  
+  // PRIORITY 3: Distinctive className patterns (ONLY semantic/custom classes)
+  if (focusedElement.className) {
+    // Filter OUT all Tailwind utility patterns - these are too generic and match wrong elements
+    const tailwindPatterns = [
+      /^p[xytblr]?-/,     // padding: px-4, py-2, pt-1
+      /^m[xytblr]?-/,     // margin: mx-auto, my-4
+      /^-?m[xytblr]?-/,   // negative margins: -mt-4
+      /^w-/,              // width: w-full, w-4
+      /^h-/,              // height: h-10, h-full
+      /^min-/,            // min-width/height
+      /^max-/,            // max-width/height
+      /^size-/,           // size utilities
+      /^bg-/,             // background
+      /^text-/,           // text color/size
+      /^font-/,           // font-weight
+      /^leading-/,        // line-height
+      /^tracking-/,       // letter-spacing
+      /^rounded/,         // border-radius: rounded-sm, rounded-lg
+      /^border/,          // border
+      /^outline/,         // outline
+      /^ring/,            // ring
+      /^shadow/,          // shadow
+      /^flex/,            // flex utilities
+      /^grow/,            // flex-grow
+      /^shrink/,          // flex-shrink
+      /^basis-/,          // flex-basis
+      /^grid/,            // grid utilities
+      /^col-/,            // grid columns
+      /^row-/,            // grid rows
+      /^gap-/,            // gap
+      /^items-/,          // align-items
+      /^justify-/,        // justify-content
+      /^self-/,           // align-self
+      /^place-/,          // place utilities
+      /^space-/,          // space-x, space-y
+      /^overflow/,        // overflow
+      /^scroll/,          // scroll utilities
+      /^cursor-/,         // cursor
+      /^pointer-/,        // pointer-events
+      /^select-/,         // user-select
+      /^opacity-/,        // opacity
+      /^visible/,         // visibility
+      /^invisible/,       // visibility
+      /^z-/,              // z-index
+      /^inset/,           // inset utilities
+      /^top-/,            // positioning
+      /^right-/,          // positioning
+      /^bottom-/,         // positioning
+      /^left-/,           // positioning
+      /^static/,          // position
+      /^fixed/,           // position
+      /^absolute/,        // position
+      /^relative/,        // position
+      /^sticky/,          // position
+      /^transition/,      // transitions
+      /^duration-/,       // duration
+      /^ease-/,           // timing function
+      /^delay-/,          // delay
+      /^animate-/,        // animations
+      /^transform/,       // transform
+      /^scale-/,          // scale
+      /^rotate-/,         // rotate
+      /^translate-/,      // translate
+      /^skew-/,           // skew
+      /^origin-/,         // transform-origin
+      /^appearance-/,     // appearance
+      /^accent-/,         // accent-color
+      /^caret-/,          // caret-color
+      /^fill-/,           // SVG fill
+      /^stroke-/,         // SVG stroke
+      /^object-/,         // object-fit/position
+      /^aspect-/,         // aspect-ratio
+      /^container/,       // container
+      /^columns-/,        // columns
+      /^break-/,          // word-break
+      /^truncate/,        // text-overflow
+      /^whitespace-/,     // whitespace
+      /^list-/,           // list-style
+      /^decoration-/,     // text-decoration
+      /^underline/,       // underline
+      /^overline/,        // overline
+      /^line-through/,    // line-through
+      /^no-underline/,    // no underline
+      /^antialiased/,     // font-smoothing
+      /^subpixel/,        // subpixel-antialiased
+      /^italic/,          // font-style
+      /^not-italic/,      // font-style
+      /^uppercase/,       // text-transform
+      /^lowercase/,       // text-transform
+      /^capitalize/,      // text-transform
+      /^normal-case/,     // text-transform
+      /^align-/,          // vertical-align
+      /^indent-/,         // text-indent
+      /^content-/,        // content
+      /^will-change/,     // will-change
+      /^hover:/,          // hover states
+      /^focus:/,          // focus states
+      /^focus-within:/,   // focus-within states
+      /^focus-visible:/,  // focus-visible states
+      /^active:/,         // active states
+      /^visited:/,        // visited states
+      /^disabled:/,       // disabled states
+      /^checked:/,        // checked states
+      /^group-/,          // group utilities
+      /^peer-/,           // peer utilities
+      /^dark:/,           // dark mode
+      /^light:/,          // light mode
+      /^motion-/,         // motion utilities
+      /^print:/,          // print utilities
+      /^portrait:/,       // orientation
+      /^landscape:/,      // orientation
+      /^sm:|^md:|^lg:|^xl:|^2xl:/,  // responsive prefixes
+      /^data-\[/,         // data attribute variants
+      /^aria-/,           // aria variants
+      /^supports-/,       // supports variants
+      /^has-/,            // has variants
+      /^group$/,          // group class itself
+      /^peer$/,           // peer class itself
+      /^sr-only/,         // screen reader only
+      /^not-sr-only/,     // not screen reader only
+      /^isolate/,         // isolation
+      /^block$/,          // display
+      /^inline/,          // display
+      /^hidden$/,         // display
+      /^table/,           // display table
+    ];
     
-    // Try shorter but unique-looking class names (not utility classes)
-    const uniqueClasses = focusedElement.className.split(/\s+/)
-      .filter(c => c.length > 4 && !c.match(/^(p[xytblr]?-|m[xytblr]?-|w-|h-|bg-|text-|flex|grid|block|hidden)/));
+    const isTailwindUtility = (cls: string) => 
+      tailwindPatterns.some(pattern => pattern.test(cls));
     
-    for (const cls of uniqueClasses) {
-      for (let i = 0; i < lines.length; i++) {
-        if (lines[i].includes(cls)) {
-          return {
-            lineNumber: i + 1,
-            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
-            confidence: 'low',
-            matchedBy: `className contains "${cls}"`
-          };
+    // Only use classes that are NOT Tailwind utilities (likely custom/semantic)
+    const semanticClasses = focusedElement.className.split(/\s+/)
+      .filter(c => c.length > 3 && !isTailwindUtility(c));
+    
+    // Only proceed if we found semantic classes
+    if (semanticClasses.length > 0) {
+      for (const cls of semanticClasses) {
+        for (let i = 0; i < lines.length; i++) {
+          if (lines[i].includes(cls)) {
+            return {
+              lineNumber: i + 1,
+              snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+              confidence: 'medium',
+              matchedBy: `semantic className "${cls}"`
+            };
+          }
         }
       }
     }
+    
+    // Log when we filtered out all classes (helpful for debugging)
+    if (semanticClasses.length === 0 && focusedElement.className.trim().length > 0) {
+      console.log('[findElementLineInFile] All classes filtered as Tailwind utilities:', 
+        focusedElement.className.substring(0, 100));
+    }
   }
   
   return null;
 }
 
+/**
+ * Search imported component files for the focused element
+ * Reuses findElementLineInFile() for consistent detection
+ * 
+ * This is called when the element cannot be found in the main target file,
+ * allowing us to redirect to the actual file containing the element.
+ */
+function findElementInImportedFiles(
+  focusedElement: VisionFocusedElement,
+  importedFiles: { path: string; content: string }[]
+): { path: string; lineNumber: number; matchedBy: string; content: string; confidence: string } | null {
+  debugLog("Searching imported components for element", {
+    elementType: focusedElement.type,
+    textContent: focusedElement.textContent?.substring(0, 30),
+    filesCount: importedFiles.length
+  });
+  
+  for (const file of importedFiles) {
+    // Focus on component files (where UI elements live)
+    // Skip types, stores, utils, hooks - they don't contain JSX elements
+    if (!file.path.includes('components/') && !file.path.includes('/ui/')) continue;
+    
+    const result = findElementLineInFile(file.content, focusedElement);
+    if (result && result.confidence !== 'low') {
+      debugLog("Found element in imported component", {
+        path: file.path,
+        lineNumber: result.lineNumber,
+        matchedBy: result.matchedBy,
+        confidence: result.confidence
+      });
+      return {
+        path: file.path,
+        lineNumber: result.lineNumber,
+        matchedBy: result.matchedBy,
+        content: file.content,
+        confidence: result.confidence
+      };
+    }
+  }
+  
+  debugLog("Element not found in any imported component files");
+  return null;
+}
+
 /**
  * PHASE 0: Deterministic Element ID Search (Cursor-style)
  * Grep entire codebase for the element ID. If found in multiple files,
@@ -1466,6 +1648,8 @@ User Request: "${userPrompt}"
         // Search for focused element in the file using multiple strategies
         // Priority: DOM id > textContent > className patterns
         let elementLocation: { lineNumber: number; snippet: string; confidence: 'high' | 'medium' | 'low'; matchedBy: string } | null = null;
+        let actualTargetFile = recommendedFileContent; // May change if we redirect
+        
         if (focusedElements && focusedElements.length > 0) {
           for (const el of focusedElements) {
             elementLocation = findElementLineInFile(content, el);
@@ -1479,6 +1663,35 @@ User Request: "${userPrompt}"
               break;
             }
           }
+          
+          // DYNAMIC IMPORT SEARCH: If not found in main file, search imported components
+          if (!elementLocation) {
+            debugLog("Element not in main file, searching imported components...", {
+              mainFile: recommendedFileContent.path,
+              importedFilesCount: pageContext.componentSources.length
+            });
+            
+            const importedMatch = findElementInImportedFiles(
+              focusedElements[0],
+              pageContext.componentSources
+            );
+            
+            if (importedMatch) {
+              debugLog("REDIRECT: Element found in imported component", {
+                originalFile: recommendedFileContent.path,
+                redirectTo: importedMatch.path,
+                matchedBy: importedMatch.matchedBy,
+                lineNumber: importedMatch.lineNumber
+              });
+              
+              // Switch target file to where element actually is
+              actualTargetFile = {
+                path: importedMatch.path,
+                content: importedMatch.content
+              };
+              elementLocation = findElementLineInFile(importedMatch.content, focusedElements[0]);
+            }
+          }
         }
         
         // Build focused elements section with precise targeting info
@@ -1511,9 +1724,11 @@ ${elementLocation.snippet}
 
 `;
           } else {
-            textContent += `\n`;
-            debugLog("Could not locate focused element in file - no ID, textContent, or className match", {
-              file: recommendedFileContent.path,
+            // Element NOT found in main file OR any imported components
+            // BLOCK the LLM from guessing - require empty modifications
+            debugLog("BLOCK: Could not locate focused element anywhere", {
+              mainFile: recommendedFileContent.path,
+              searchedImports: pageContext.componentSources.length,
               focusedElements: focusedElements.map(el => ({
                 name: el.name,
                 type: el.type,
@@ -1522,16 +1737,39 @@ ${elementLocation.snippet}
                 elementId: el.elementId,
               }))
             });
+            
+            // STRONG BLOCK instruction - tell LLM to NOT guess
+            textContent += `
+⛔ STOP: CANNOT LOCATE THE CLICKED ELEMENT
+
+The user clicked on a specific element, but it could NOT be found in:
+- ${recommendedFileContent.path} (main target file)
+- Any of the ${pageContext.componentSources.length} imported component files
+
+The element may be:
+- Deeply nested in a component not in the import tree
+- Dynamically generated at runtime
+- Part of a third-party library component
+
+DO NOT GUESS. Return this exact response:
+{
+  "modifications": [],
+  "explanation": "Could not locate the clicked element in this file or any of its ${pageContext.componentSources.length} imported components. The element may be rendered by a deeply nested or third-party component."
+}
+
+`;
           }
         }
         
         // Add line numbers to make it easy for LLM to reference exact code
-        const linesWithNumbers = content.split('\n').map((line, i) => 
+        // Use actualTargetFile which may have been redirected to an imported component
+        const targetContent = actualTargetFile.content;
+        const linesWithNumbers = targetContent.split('\n').map((line, i) => 
           `${String(i + 1).padStart(4, ' ')}| ${line}`
         ).join('\n');
         
         textContent += `═══════════════════════════════════════════════════════════════════════════════
-FILE TO EDIT: ${recommendedFileContent.path}
+FILE TO EDIT: ${actualTargetFile.path}
 ═══════════════════════════════════════════════════════════════════════════════
 
 IMPORTANT: Copy code EXACTLY as shown below (including line numbers for reference).
@@ -1542,11 +1780,12 @@ ${linesWithNumbers}
 \`\`\`
 
 `;
-        usedContext += content.length;
+        usedContext += targetContent.length;
         debugLog("Added TARGET COMPONENT with line numbers", { 
-          path: recommendedFileContent.path, 
-          lines: content.split('\n').length,
-          size: content.length 
+          path: actualTargetFile.path, 
+          lines: targetContent.split('\n').length,
+          size: targetContent.length,
+          wasRedirected: actualTargetFile.path !== recommendedFileContent.path
         });
       } else if (pageContext.pageContent) {
         // Fallback: use page file if no recommended file

package/dist/assets/api/sonance-vision-edit/route.ts

@@ -318,43 +318,225 @@ function findElementLineInFile(
     }
   }
   
-  // PRIORITY 3: Distinctive className patterns
-  if (focusedElement.className) {
-    // Extract distinctive class names (long, not hover/focus pseudo-classes)
-    const classes = focusedElement.className.split(/\s+/)
-      .filter(c => c.length > 8 && !c.startsWith('hover:') && !c.startsWith('focus:') && !c.startsWith('active:'));
-    
-    for (const cls of classes) {
+  // PRIORITY 2b: Look for icon patterns if type is button and no text (like X buttons)
+  if (focusedElement.type === 'button' && (!focusedElement.textContent || focusedElement.textContent.trim().length === 0)) {
+    // Common close/icon button patterns
+    const iconPatterns = ['<X ', '<X/', 'DialogClose', 'DialogPrimitive.Close', 'closeButton', 'CloseButton'];
+    for (const pattern of iconPatterns) {
       for (let i = 0; i < lines.length; i++) {
-        if (lines[i].includes(cls)) {
+        if (lines[i].includes(pattern)) {
           return {
             lineNumber: i + 1,
             snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
-            confidence: 'medium',
-            matchedBy: `className contains "${cls}"`
+            confidence: 'low',
+            matchedBy: `icon pattern "${pattern}"`
           };
         }
       }
     }
+  }
+  
+  // PRIORITY 3: Distinctive className patterns (ONLY semantic/custom classes)
+  if (focusedElement.className) {
+    // Filter OUT all Tailwind utility patterns - these are too generic and match wrong elements
+    const tailwindPatterns = [
+      /^p[xytblr]?-/,     // padding: px-4, py-2, pt-1
+      /^m[xytblr]?-/,     // margin: mx-auto, my-4
+      /^-?m[xytblr]?-/,   // negative margins: -mt-4
+      /^w-/,              // width: w-full, w-4
+      /^h-/,              // height: h-10, h-full
+      /^min-/,            // min-width/height
+      /^max-/,            // max-width/height
+      /^size-/,           // size utilities
+      /^bg-/,             // background
+      /^text-/,           // text color/size
+      /^font-/,           // font-weight
+      /^leading-/,        // line-height
+      /^tracking-/,       // letter-spacing
+      /^rounded/,         // border-radius: rounded-sm, rounded-lg
+      /^border/,          // border
+      /^outline/,         // outline
+      /^ring/,            // ring
+      /^shadow/,          // shadow
+      /^flex/,            // flex utilities
+      /^grow/,            // flex-grow
+      /^shrink/,          // flex-shrink
+      /^basis-/,          // flex-basis
+      /^grid/,            // grid utilities
+      /^col-/,            // grid columns
+      /^row-/,            // grid rows
+      /^gap-/,            // gap
+      /^items-/,          // align-items
+      /^justify-/,        // justify-content
+      /^self-/,           // align-self
+      /^place-/,          // place utilities
+      /^space-/,          // space-x, space-y
+      /^overflow/,        // overflow
+      /^scroll/,          // scroll utilities
+      /^cursor-/,         // cursor
+      /^pointer-/,        // pointer-events
+      /^select-/,         // user-select
+      /^opacity-/,        // opacity
+      /^visible/,         // visibility
+      /^invisible/,       // visibility
+      /^z-/,              // z-index
+      /^inset/,           // inset utilities
+      /^top-/,            // positioning
+      /^right-/,          // positioning
+      /^bottom-/,         // positioning
+      /^left-/,           // positioning
+      /^static/,          // position
+      /^fixed/,           // position
+      /^absolute/,        // position
+      /^relative/,        // position
+      /^sticky/,          // position
+      /^transition/,      // transitions
+      /^duration-/,       // duration
+      /^ease-/,           // timing function
+      /^delay-/,          // delay
+      /^animate-/,        // animations
+      /^transform/,       // transform
+      /^scale-/,          // scale
+      /^rotate-/,         // rotate
+      /^translate-/,      // translate
+      /^skew-/,           // skew
+      /^origin-/,         // transform-origin
+      /^appearance-/,     // appearance
+      /^accent-/,         // accent-color
+      /^caret-/,          // caret-color
+      /^fill-/,           // SVG fill
+      /^stroke-/,         // SVG stroke
+      /^object-/,         // object-fit/position
+      /^aspect-/,         // aspect-ratio
+      /^container/,       // container
+      /^columns-/,        // columns
+      /^break-/,          // word-break
+      /^truncate/,        // text-overflow
+      /^whitespace-/,     // whitespace
+      /^list-/,           // list-style
+      /^decoration-/,     // text-decoration
+      /^underline/,       // underline
+      /^overline/,        // overline
+      /^line-through/,    // line-through
+      /^no-underline/,    // no underline
+      /^antialiased/,     // font-smoothing
+      /^subpixel/,        // subpixel-antialiased
+      /^italic/,          // font-style
+      /^not-italic/,      // font-style
+      /^uppercase/,       // text-transform
+      /^lowercase/,       // text-transform
+      /^capitalize/,      // text-transform
+      /^normal-case/,     // text-transform
+      /^align-/,          // vertical-align
+      /^indent-/,         // text-indent
+      /^content-/,        // content
+      /^will-change/,     // will-change
+      /^hover:/,          // hover states
+      /^focus:/,          // focus states
+      /^focus-within:/,   // focus-within states
+      /^focus-visible:/,  // focus-visible states
+      /^active:/,         // active states
+      /^visited:/,        // visited states
+      /^disabled:/,       // disabled states
+      /^checked:/,        // checked states
+      /^group-/,          // group utilities
+      /^peer-/,           // peer utilities
+      /^dark:/,           // dark mode
+      /^light:/,          // light mode
+      /^motion-/,         // motion utilities
+      /^print:/,          // print utilities
+      /^portrait:/,       // orientation
+      /^landscape:/,      // orientation
+      /^sm:|^md:|^lg:|^xl:|^2xl:/,  // responsive prefixes
+      /^data-\[/,         // data attribute variants
+      /^aria-/,           // aria variants
+      /^supports-/,       // supports variants
+      /^has-/,            // has variants
+      /^group$/,          // group class itself
+      /^peer$/,           // peer class itself
+      /^sr-only/,         // screen reader only
+      /^not-sr-only/,     // not screen reader only
+      /^isolate/,         // isolation
+      /^block$/,          // display
+      /^inline/,          // display
+      /^hidden$/,         // display
+      /^table/,           // display table
+    ];
     
-    // Try shorter but unique-looking class names (not utility classes)
-    const uniqueClasses = focusedElement.className.split(/\s+/)
-      .filter(c => c.length > 4 && !c.match(/^(p[xytblr]?-|m[xytblr]?-|w-|h-|bg-|text-|flex|grid|block|hidden)/));
+    const isTailwindUtility = (cls: string) => 
+      tailwindPatterns.some(pattern => pattern.test(cls));
     
-    for (const cls of uniqueClasses) {
-      for (let i = 0; i < lines.length; i++) {
-        if (lines[i].includes(cls)) {
-          return {
-            lineNumber: i + 1,
-            snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
-            confidence: 'low',
-            matchedBy: `className contains "${cls}"`
-          };
+    // Only use classes that are NOT Tailwind utilities (likely custom/semantic)
+    const semanticClasses = focusedElement.className.split(/\s+/)
+      .filter(c => c.length > 3 && !isTailwindUtility(c));
+    
+    // Only proceed if we found semantic classes
+    if (semanticClasses.length > 0) {
+      for (const cls of semanticClasses) {
+        for (let i = 0; i < lines.length; i++) {
+          if (lines[i].includes(cls)) {
+            return {
+              lineNumber: i + 1,
+              snippet: lines.slice(Math.max(0, i - 3), i + 5).join('\n'),
+              confidence: 'medium',
+              matchedBy: `semantic className "${cls}"`
+            };
+          }
         }
       }
     }
+    
+    // Log when we filtered out all classes (helpful for debugging)
+    if (semanticClasses.length === 0 && focusedElement.className.trim().length > 0) {
+      console.log('[findElementLineInFile] All classes filtered as Tailwind utilities:', 
+        focusedElement.className.substring(0, 100));
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * Search imported component files for the focused element
+ * Reuses findElementLineInFile() for consistent detection
+ * 
+ * This is called when the element cannot be found in the main target file,
+ * allowing us to redirect to the actual file containing the element.
+ */
+function findElementInImportedFiles(
+  focusedElement: VisionFocusedElement,
+  importedFiles: { path: string; content: string }[]
+): { path: string; lineNumber: number; matchedBy: string; content: string; confidence: string } | null {
+  debugLog("Searching imported components for element", {
+    elementType: focusedElement.type,
+    textContent: focusedElement.textContent?.substring(0, 30),
+    filesCount: importedFiles.length
+  });
+  
+  for (const file of importedFiles) {
+    // Focus on component files (where UI elements live)
+    // Skip types, stores, utils, hooks - they don't contain JSX elements
+    if (!file.path.includes('components/') && !file.path.includes('/ui/')) continue;
+    
+    const result = findElementLineInFile(file.content, focusedElement);
+    if (result && result.confidence !== 'low') {
+      debugLog("Found element in imported component", {
+        path: file.path,
+        lineNumber: result.lineNumber,
+        matchedBy: result.matchedBy,
+        confidence: result.confidence
+      });
+      return {
+        path: file.path,
+        lineNumber: result.lineNumber,
+        matchedBy: result.matchedBy,
+        content: file.content,
+        confidence: result.confidence
+      };
+    }
   }
   
+  debugLog("Element not found in any imported component files");
   return null;
 }
 
@@ -1435,6 +1617,8 @@ User Request: "${userPrompt}"
         // Search for focused element in the file using multiple strategies
         // Priority: DOM id > textContent > className patterns
         let elementLocation: { lineNumber: number; snippet: string; confidence: 'high' | 'medium' | 'low'; matchedBy: string } | null = null;
+        let actualTargetFile = recommendedFileContent; // May change if we redirect
+        
         if (focusedElements && focusedElements.length > 0) {
           for (const el of focusedElements) {
             elementLocation = findElementLineInFile(content, el);
@@ -1448,6 +1632,35 @@ User Request: "${userPrompt}"
               break;
             }
           }
+          
+          // DYNAMIC IMPORT SEARCH: If not found in main file, search imported components
+          if (!elementLocation) {
+            debugLog("Element not in main file, searching imported components...", {
+              mainFile: recommendedFileContent.path,
+              importedFilesCount: pageContext.componentSources.length
+            });
+            
+            const importedMatch = findElementInImportedFiles(
+              focusedElements[0],
+              pageContext.componentSources
+            );
+            
+            if (importedMatch) {
+              debugLog("REDIRECT: Element found in imported component", {
+                originalFile: recommendedFileContent.path,
+                redirectTo: importedMatch.path,
+                matchedBy: importedMatch.matchedBy,
+                lineNumber: importedMatch.lineNumber
+              });
+              
+              // Switch target file to where element actually is
+              actualTargetFile = {
+                path: importedMatch.path,
+                content: importedMatch.content
+              };
+              elementLocation = findElementLineInFile(importedMatch.content, focusedElements[0]);
+            }
+          }
         }
         
         // Build focused elements section with precise targeting info
@@ -1480,9 +1693,11 @@ ${elementLocation.snippet}
 
 `;
           } else {
-            textContent += `\n`;
-            debugLog("Could not locate focused element in file - no ID, textContent, or className match", {
-              file: recommendedFileContent.path,
+            // Element NOT found in main file OR any imported components
+            // BLOCK the LLM from guessing - require empty modifications
+            debugLog("BLOCK: Could not locate focused element anywhere", {
+              mainFile: recommendedFileContent.path,
+              searchedImports: pageContext.componentSources.length,
               focusedElements: focusedElements.map(el => ({
                 name: el.name,
                 type: el.type,
@@ -1491,16 +1706,39 @@ ${elementLocation.snippet}
                 elementId: el.elementId,
               }))
             });
+            
+            // STRONG BLOCK instruction - tell LLM to NOT guess
+            textContent += `
+⛔ STOP: CANNOT LOCATE THE CLICKED ELEMENT
+
+The user clicked on a specific element, but it could NOT be found in:
+- ${recommendedFileContent.path} (main target file)
+- Any of the ${pageContext.componentSources.length} imported component files
+
+The element may be:
+- Deeply nested in a component not in the import tree
+- Dynamically generated at runtime
+- Part of a third-party library component
+
+DO NOT GUESS. Return this exact response:
+{
+  "modifications": [],
+  "explanation": "Could not locate the clicked element in this file or any of its ${pageContext.componentSources.length} imported components. The element may be rendered by a deeply nested or third-party component."
+}
+
+`;
           }
         }
         
         // Add line numbers to make it easy for LLM to reference exact code
-        const linesWithNumbers = content.split('\n').map((line, i) => 
+        // Use actualTargetFile which may have been redirected to an imported component
+        const targetContent = actualTargetFile.content;
+        const linesWithNumbers = targetContent.split('\n').map((line, i) => 
           `${String(i + 1).padStart(4, ' ')}| ${line}`
         ).join('\n');
         
         textContent += `═══════════════════════════════════════════════════════════════════════════════
-FILE TO EDIT: ${recommendedFileContent.path}
+FILE TO EDIT: ${actualTargetFile.path}
 ═══════════════════════════════════════════════════════════════════════════════
 
 IMPORTANT: Copy code EXACTLY as shown below (including line numbers for reference).
@@ -1511,11 +1749,12 @@ ${linesWithNumbers}
 \`\`\`
 
 `;
-        usedContext += content.length;
+        usedContext += targetContent.length;
         debugLog("Added TARGET COMPONENT with line numbers", { 
-          path: recommendedFileContent.path, 
-          lines: content.split('\n').length,
-          size: content.length 
+          path: actualTargetFile.path, 
+          lines: targetContent.split('\n').length,
+          size: targetContent.length,
+          wasRedirected: actualTargetFile.path !== recommendedFileContent.path 
         });
       } else if (pageContext.pageContent) {
         // Fallback: use page file if no recommended file

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.90",
+  "version": "1.3.92",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",