sonance-brand-mcp 1.3.111 → 1.3.112

package/dist/assets/api/sonance-vision-apply/image-styling-detection.ts

@@ -0,0 +1,1360 @@
+/**
+ * Image Styling Detection System
+ * 
+ * Intelligently detects how images are styled in a codebase and determines
+ * the appropriate strategy for applying changes.
+ * 
+ * Supports:
+ * - CSS Variables (var(--logo-scale))
+ * - Inline styles (style={{ transform: scale(...) }})
+ * - Tailwind utilities (scale-90, w-24, h-auto)
+ * - CSS classes with static values
+ * - Config files (brand-system.ts, theme.ts)
+ * - Styled-components/Emotion
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+
+export type ImageStylingType = 
+  | 'css-variable'
+  | 'inline-style'
+  | 'tailwind'
+  | 'css-class'
+  | 'styled-component'
+  | 'config-consumed'
+  | 'config-unused'
+  | 'next-image'
+  | 'unknown';
+
+export type SaveStrategy = 
+  | 'css-file'
+  | 'component-inline'
+  | 'tailwind-class'
+  | 'config-file'
+  | 'ai-assisted';
+
+export interface ImageStylingPattern {
+  type: ImageStylingType;
+  strategy: SaveStrategy;
+  confidence: 'high' | 'medium' | 'low';
+  
+  // Where the style is defined
+  sourceFile?: string;
+  lineNumber?: number;
+  
+  // The specific property/variable name
+  cssVariable?: string;
+  configKey?: string;
+  
+  // For Tailwind detection
+  existingClasses?: string[];
+  
+  // Details about what was detected
+  details: string;
+}
+
+export interface ImageContext {
+  imageSrc: string;
+  elementId?: string;
+  className?: string;
+  inlineStyle?: string;
+  parentComponent?: string;
+  altText?: string;
+  /** Data attributes from the image element */
+  dataAttributes?: Record<string, string>;
+  /** The page route where the image was clicked */
+  pageRoute?: string;
+  /** The current brand context from useBrand() - preferred over image path detection */
+  currentBrand?: string;
+}
+
+interface DetectionResult {
+  pattern: ImageStylingPattern;
+  relatedFiles: string[];
+}
+
+interface PreciseLocation {
+  filePath: string;
+  lineNumber: number;
+  elementCode: string;
+  matchedBy: 'id' | 'data-attribute' | 'alt-text' | 'src-path';
+  confidence: 'high' | 'medium';
+}
+
+interface DiscoveredCSSVariable {
+  variableName: string;
+  file: string;
+  lineNumber: number;
+  prefix: string;  // e.g., "sonance", "theme", "app"
+  suffix: string;  // e.g., "logo-scale", "scale", "size"
+}
+
+/**
+ * Dynamically extract the CSS variable pattern from element code
+ * Returns { prefix, suffix, fullVariable } without hardcoding any specific names
+ */
+function extractCSSVariablePattern(elementCode: string): {
+  prefix: string | null;
+  suffix: string;
+  fullVariable: string | null;
+  isDynamic: boolean;
+} {
+  // Check if it's a dynamic template literal: var(--${something}-suffix)
+  const isDynamic = elementCode.includes('${') && elementCode.includes('var(--');
+  
+  if (isDynamic) {
+    // Extract suffix from dynamic pattern: var(--${brand}-logo-scale, 1)
+    // Match everything after the closing } and before , or )
+    const dynamicSuffixMatch = elementCode.match(/var\(--\$\{[^}]+\}-([a-zA-Z0-9-]+)/);
+    const suffix = dynamicSuffixMatch?.[1] || 'scale';
+    
+    return {
+      prefix: null, // Will be determined from context
+      suffix,
+      fullVariable: null, // Will be constructed with brand
+      isDynamic: true
+    };
+  }
+  
+  // Static pattern: var(--prefix-suffix) or var(--single-name)
+  const staticMatch = elementCode.match(/var\(--([a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)\s*[,)]/);
+  
+  if (staticMatch) {
+    const fullVariable = `--${staticMatch[1]}`;
+    const parts = staticMatch[1].split('-');
+    
+    if (parts.length >= 2) {
+      // Has prefix-suffix structure
+      const prefix = parts[0];
+      const suffix = parts.slice(1).join('-');
+      return { prefix, suffix, fullVariable, isDynamic: false };
+    } else {
+      // Single word variable
+      return { prefix: null, suffix: parts[0], fullVariable, isDynamic: false };
+    }
+  }
+  
+  return { prefix: null, suffix: 'scale', fullVariable: null, isDynamic: false };
+}
+
+/**
+ * Discover CSS files that define variables matching a pattern
+ * Searches common CSS locations without hardcoding specific file paths
+ */
+async function discoverCSSFileForVariable(
+  projectRoot: string,
+  variableName: string
+): Promise<{ file: string; lineNumber: number } | null> {
+  // Search in common CSS locations (no hardcoded specific files)
+  const searchDirs = ['src/styles', 'src/app', 'styles', 'app', 'src', 'public'];
+  
+  for (const dir of searchDirs) {
+    const dirPath = path.join(projectRoot, dir);
+    if (!fs.existsSync(dirPath)) continue;
+    
+    // Recursively search for CSS files
+    const cssFiles = findCSSFilesRecursive(dirPath);
+    
+    for (const cssFile of cssFiles) {
+      try {
+        const content = fs.readFileSync(cssFile, 'utf-8');
+        const lines = content.split('\n');
+        
+        // Look for the variable definition (with : after the name)
+        for (let i = 0; i < lines.length; i++) {
+          if (lines[i].includes(`${variableName}:`) || lines[i].includes(`${variableName} :`)) {
+            const relativePath = path.relative(projectRoot, cssFile);
+            console.log('[CSS Discovery] Found variable definition:', {
+              variable: variableName,
+              file: relativePath,
+              line: i + 1
+            });
+            return { file: relativePath, lineNumber: i + 1 };
+          }
+        }
+      } catch {
+        // Skip files that can't be read
+      }
+    }
+  }
+  
+  // If not found, try to find any file with similar variable patterns
+  // This helps discover where CSS variables are typically defined in this project
+  for (const dir of searchDirs) {
+    const dirPath = path.join(projectRoot, dir);
+    if (!fs.existsSync(dirPath)) continue;
+    
+    const cssFiles = findCSSFilesRecursive(dirPath);
+    
+    for (const cssFile of cssFiles) {
+      try {
+        const content = fs.readFileSync(cssFile, 'utf-8');
+        // Look for :root block with CSS variables
+        if (content.includes(':root') && content.includes('--') && content.includes('scale')) {
+          const relativePath = path.relative(projectRoot, cssFile);
+          console.log('[CSS Discovery] Found likely CSS variables file:', relativePath);
+          return { file: relativePath, lineNumber: 1 };
+        }
+      } catch {
+        // Skip files that can't be read
+      }
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * Recursively find all CSS files in a directory
+ */
+function findCSSFilesRecursive(dir: string, maxDepth = 4, currentDepth = 0): string[] {
+  if (currentDepth > maxDepth) return [];
+  
+  const cssFiles: string[] = [];
+  
+  try {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+      
+      if (entry.isDirectory() && !entry.name.startsWith('.') && entry.name !== 'node_modules') {
+        cssFiles.push(...findCSSFilesRecursive(fullPath, maxDepth, currentDepth + 1));
+      } else if (entry.isFile() && entry.name.endsWith('.css')) {
+        cssFiles.push(fullPath);
+      }
+    }
+  } catch {
+    // Directory not readable
+  }
+  
+  return cssFiles;
+}
+
+/**
+ * Extract brand/prefix from context or by analyzing the element code
+ * No hardcoded brand names - discovers dynamically
+ */
+function determineBrandPrefix(
+  imageContext: ImageContext,
+  elementCode: string,
+  projectRoot: string
+): string {
+  // Priority 1: Use currentBrand from React context (most reliable)
+  if (imageContext.currentBrand) {
+    console.log('[Brand Detection] Using context brand:', imageContext.currentBrand);
+    return imageContext.currentBrand;
+  }
+  
+  // Priority 2: Extract from static CSS variable in element code
+  const staticVarMatch = elementCode.match(/var\(--([a-zA-Z0-9]+)-/);
+  if (staticVarMatch && !staticVarMatch[0].includes('${')) {
+    console.log('[Brand Detection] Extracted from static variable:', staticVarMatch[1]);
+    return staticVarMatch[1];
+  }
+  
+  // Priority 3: Try to find the first defined brand variable in CSS files
+  const discoveredBrand = discoverFirstBrandFromCSS(projectRoot);
+  if (discoveredBrand) {
+    console.log('[Brand Detection] Discovered from CSS:', discoveredBrand);
+    return discoveredBrand;
+  }
+  
+  // Fallback: Use a generic default
+  console.log('[Brand Detection] Using default: "app"');
+  return 'app';
+}
+
+/**
+ * Discover the first brand prefix from CSS variable definitions
+ */
+function discoverFirstBrandFromCSS(projectRoot: string): string | null {
+  const searchDirs = ['src/styles', 'src/app', 'styles'];
+  
+  for (const dir of searchDirs) {
+    const dirPath = path.join(projectRoot, dir);
+    if (!fs.existsSync(dirPath)) continue;
+    
+    const cssFiles = findCSSFilesRecursive(dirPath, 2);
+    
+    for (const cssFile of cssFiles) {
+      try {
+        const content = fs.readFileSync(cssFile, 'utf-8');
+        // Look for patterns like --something-logo-scale: or --something-scale:
+        const brandMatch = content.match(/--([a-zA-Z0-9]+)-(logo-)?scale\s*:/);
+        if (brandMatch) {
+          return brandMatch[1];
+        }
+      } catch {
+        // Skip
+      }
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * Find the first CSS file that contains CSS variable definitions
+ * Used as a fallback when specific variable file not found
+ */
+async function findFirstCSSVariablesFile(projectRoot: string): Promise<string> {
+  const searchDirs = ['src/styles', 'src/app', 'styles', 'app'];
+  
+  for (const dir of searchDirs) {
+    const dirPath = path.join(projectRoot, dir);
+    if (!fs.existsSync(dirPath)) continue;
+    
+    const cssFiles = findCSSFilesRecursive(dirPath, 2);
+    
+    for (const cssFile of cssFiles) {
+      try {
+        const content = fs.readFileSync(cssFile, 'utf-8');
+        // Look for :root with CSS variables
+        if (content.includes(':root') && content.includes('--')) {
+          return path.relative(projectRoot, cssFile);
+        }
+      } catch {
+        // Skip
+      }
+    }
+  }
+  
+  // Ultimate fallback - return a sensible default path
+  // but don't hardcode specific brand files
+  if (fs.existsSync(path.join(projectRoot, 'src/styles'))) {
+    return 'src/styles/variables.css';
+  }
+  if (fs.existsSync(path.join(projectRoot, 'src/app'))) {
+    return 'src/app/globals.css';
+  }
+  return 'styles/globals.css';
+}
+
+interface JSXElementBounds {
+  start: number;
+  end: number;
+  tagName: string;
+}
+
+/**
+ * Find the complete bounds of a JSX element containing a specific line
+ * Scans backward to find opening tag and forward to find closing tag
+ */
+function findJSXElementBounds(lines: string[], matchLineIndex: number): JSXElementBounds {
+  let startLine = matchLineIndex;
+  let endLine = matchLineIndex;
+  let tagName = 'Image'; // Default
+  
+  // Scan backward to find the opening tag (<Image or <img)
+  for (let i = matchLineIndex; i >= 0; i--) {
+    const line = lines[i];
+    const imageMatch = line.match(/<(Image|img)\b/i);
+    if (imageMatch) {
+      startLine = i;
+      tagName = imageMatch[1];
+      break;
+    }
+    // Don't go past a closing tag of a different element
+    if (line.includes('/>') || line.match(/<\/\w+>/)) {
+      // Check if this is the same line as our start
+      if (i < matchLineIndex) break;
+    }
+  }
+  
+  // Scan forward to find the closing /> or </Image> or </img>
+  let bracketDepth = 0;
+  let foundOpeningBracket = false;
+  
+  for (let i = startLine; i < lines.length; i++) {
+    const line = lines[i];
+    
+    // Count opening braces/brackets for JSX expressions
+    for (const char of line) {
+      if (char === '{') bracketDepth++;
+      if (char === '}') bracketDepth--;
+    }
+    
+    // Check for self-closing tag: />
+    if (line.includes('/>') && bracketDepth === 0) {
+      endLine = i;
+      break;
+    }
+    
+    // Check for closing tag: </Image> or </img>
+    const closingMatch = line.match(new RegExp(`</${tagName}>`, 'i'));
+    if (closingMatch && bracketDepth === 0) {
+      endLine = i;
+      break;
+    }
+    
+    // Track if we've seen the opening angle bracket
+    if (line.includes(`<${tagName}`)) {
+      foundOpeningBracket = true;
+    }
+    
+    // Safety: don't scan more than 50 lines past the match
+    if (i - startLine > 50) {
+      endLine = Math.min(startLine + 20, lines.length - 1);
+      break;
+    }
+  }
+  
+  // Ensure we have at least a few lines of context
+  if (endLine === startLine) {
+    endLine = Math.min(startLine + 10, lines.length - 1);
+  }
+  
+  console.log('[JSX Bounds] Found element bounds:', {
+    tagName,
+    startLine: startLine + 1,
+    endLine: endLine + 1,
+    totalLines: endLine - startLine + 1
+  });
+  
+  return { start: startLine, end: endLine, tagName };
+}
+
+/**
+ * Find the EXACT location of an image element in source code
+ * Uses ID, data attributes, alt text, and src path for precise matching
+ */
+function findPreciseImageLocation(
+  imageContext: ImageContext,
+  componentFiles: { path: string; content: string }[]
+): PreciseLocation | null {
+  
+  // Priority 1: Match by element ID (most precise)
+  if (imageContext.elementId) {
+    const idPatterns = [
+      new RegExp(`id=["'\`]${escapeRegex(imageContext.elementId)}["'\`]`),
+      new RegExp(`id=\\{["'\`]${escapeRegex(imageContext.elementId)}["'\`]\\}`),
+    ];
+    
+    for (const file of componentFiles) {
+      const lines = file.content.split('\n');
+      for (let i = 0; i < lines.length; i++) {
+        for (const pattern of idPatterns) {
+          if (pattern.test(lines[i])) {
+            // Use findJSXElementBounds to get the complete element
+            const bounds = findJSXElementBounds(lines, i);
+            const elementCode = lines.slice(bounds.start, bounds.end + 1).join('\n');
+            
+            // Verify this is an image element
+            if (elementCode.includes('<Image') || elementCode.includes('<img')) {
+              console.log('[Precise Location] Found by element ID:', {
+                id: imageContext.elementId,
+                file: file.path,
+                line: bounds.start + 1,
+                elementLines: bounds.end - bounds.start + 1
+              });
+              return {
+                filePath: file.path,
+                lineNumber: bounds.start + 1,
+                elementCode,
+                matchedBy: 'id',
+                confidence: 'high'
+              };
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  // Priority 2: Match by data attributes (e.g., data-sonance-logo-id)
+  if (imageContext.dataAttributes) {
+    for (const [key, value] of Object.entries(imageContext.dataAttributes)) {
+      if (!value) continue;
+      
+      const dataPattern = new RegExp(`data-${escapeRegex(key)}=["'\`]${escapeRegex(value)}["'\`]`);
+      
+      for (const file of componentFiles) {
+        const lines = file.content.split('\n');
+        for (let i = 0; i < lines.length; i++) {
+          if (dataPattern.test(lines[i])) {
+            // Use findJSXElementBounds to get the complete element
+            const bounds = findJSXElementBounds(lines, i);
+            const elementCode = lines.slice(bounds.start, bounds.end + 1).join('\n');
+            
+            if (elementCode.includes('<Image') || elementCode.includes('<img')) {
+              console.log('[Precise Location] Found by data attribute:', {
+                attr: `data-${key}="${value}"`,
+                file: file.path,
+                line: bounds.start + 1,
+                elementLines: bounds.end - bounds.start + 1
+              });
+              return {
+                filePath: file.path,
+                lineNumber: bounds.start + 1,
+                elementCode,
+                matchedBy: 'data-attribute',
+                confidence: 'high'
+              };
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  // Priority 3: Match by exact alt text (good for unique logos)
+  if (imageContext.altText && imageContext.altText.length > 3) {
+    const altPatterns = [
+      new RegExp(`alt=["'\`]${escapeRegex(imageContext.altText)}["'\`]`),
+      new RegExp(`alt=\\{["'\`]${escapeRegex(imageContext.altText)}["'\`]\\}`),
+    ];
+    
+    const matches: Array<{ file: string; line: number; context: string; bounds: JSXElementBounds }> = [];
+    
+    for (const file of componentFiles) {
+      const lines = file.content.split('\n');
+      for (let i = 0; i < lines.length; i++) {
+        for (const pattern of altPatterns) {
+          if (pattern.test(lines[i])) {
+            // Use findJSXElementBounds to get the complete element
+            const bounds = findJSXElementBounds(lines, i);
+            const elementCode = lines.slice(bounds.start, bounds.end + 1).join('\n');
+            
+            if (elementCode.includes('<Image') || elementCode.includes('<img')) {
+              matches.push({ file: file.path, line: bounds.start + 1, context: elementCode, bounds });
+            }
+          }
+        }
+      }
+    }
+    
+    // If only one match, it's precise
+    if (matches.length === 1) {
+      console.log('[Precise Location] Found by unique alt text:', {
+        alt: imageContext.altText,
+        file: matches[0].file,
+        line: matches[0].line,
+        elementLines: matches[0].bounds.end - matches[0].bounds.start + 1
+      });
+      return {
+        filePath: matches[0].file,
+        lineNumber: matches[0].line,
+        elementCode: matches[0].context,
+        matchedBy: 'alt-text',
+        confidence: 'high'
+      };
+    } else if (matches.length > 1) {
+      // Multiple matches - try to narrow down by page route
+      if (imageContext.pageRoute) {
+        const routeMatch = matches.find(m => {
+          const route = imageContext.pageRoute || '/';
+          return m.file.includes(`/app${route}`) || 
+                 m.file.includes(`/pages${route}`) ||
+                 (route === '/' && (m.file.includes('/app/page') || m.file.includes('/pages/index')));
+        });
+        if (routeMatch) {
+          console.log('[Precise Location] Found by alt text + page route:', {
+            alt: imageContext.altText,
+            route: imageContext.pageRoute,
+            file: routeMatch.file,
+            line: routeMatch.line,
+            elementLines: routeMatch.bounds.end - routeMatch.bounds.start + 1
+          });
+          return {
+            filePath: routeMatch.file,
+            lineNumber: routeMatch.line,
+            elementCode: routeMatch.context,
+            matchedBy: 'alt-text',
+            confidence: 'medium'
+          };
+        }
+      }
+    }
+  }
+  
+  // Priority 4: Match by exact src path (less precise but useful)
+  if (imageContext.imageSrc) {
+    const fileName = imageContext.imageSrc.split('/').pop() || '';
+    const srcPatterns = [
+      new RegExp(`src=["'\`]${escapeRegex(imageContext.imageSrc)}["'\`]`),
+      // Also check for the filename only (for dynamic sources)
+      ...(fileName.length > 3 ? [new RegExp(`["'\`]${escapeRegex(fileName)}["'\`]`)] : []),
+    ];
+    
+    const matches: Array<{ file: string; line: number; context: string; bounds: JSXElementBounds }> = [];
+    
+    for (const file of componentFiles) {
+      const lines = file.content.split('\n');
+      for (let i = 0; i < lines.length; i++) {
+        for (const pattern of srcPatterns) {
+          if (pattern.test(lines[i])) {
+            // Use findJSXElementBounds to get the complete element
+            const bounds = findJSXElementBounds(lines, i);
+            const elementCode = lines.slice(bounds.start, bounds.end + 1).join('\n');
+            
+            // Must be an image element, not just any file containing the path
+            if (elementCode.includes('<Image') || elementCode.includes('<img')) {
+              matches.push({ file: file.path, line: bounds.start + 1, context: elementCode, bounds });
+            }
+          }
+        }
+      }
+    }
+    
+    if (matches.length === 1) {
+      console.log('[Precise Location] Found by src path:', {
+        src: imageContext.imageSrc,
+        file: matches[0].file,
+        line: matches[0].line,
+        elementLines: matches[0].bounds.end - matches[0].bounds.start + 1
+      });
+      return {
+        filePath: matches[0].file,
+        lineNumber: matches[0].line,
+        elementCode: matches[0].context,
+        matchedBy: 'src-path',
+        confidence: 'medium'
+      };
+    }
+  }
+  
+  return null;
+}
+
+function escapeRegex(str: string): string {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Main detection function - analyzes how an image is styled in the codebase
+ */
+export async function detectImageStylingPattern(
+  projectRoot: string,
+  imageContext: ImageContext,
+  componentFiles: { path: string; content: string }[]
+): Promise<DetectionResult> {
+  const results: ImageStylingPattern[] = [];
+  const relatedFiles: string[] = [];
+  
+  console.log('[Image Detection] Starting detection for:', {
+    src: imageContext.imageSrc,
+    alt: imageContext.altText,
+    elementId: imageContext.elementId,
+    pageRoute: imageContext.pageRoute,
+  });
+  
+  // STEP 1: Try to find the PRECISE location of this image element
+  const preciseLocation = findPreciseImageLocation(imageContext, componentFiles);
+  
+  if (preciseLocation) {
+    console.log('[Image Detection] Found precise location:', preciseLocation);
+    console.log('[Image Detection] Element code captured:', preciseLocation.elementCode.substring(0, 500));
+    relatedFiles.push(preciseLocation.filePath);
+    
+    // Analyze the precise location for styling pattern
+    const file = componentFiles.find(f => f.path === preciseLocation.filePath);
+    if (file) {
+      // Check what styling method is used in this specific element
+      const elementCode = preciseLocation.elementCode;
+      
+      // PRIORITY 1: Check for CSS variable patterns (including dynamic template literals)
+      const cssVarPatterns = [
+        // Static: var(--sonance-logo-scale)
+        /var\(--([a-zA-Z0-9-]+)-?(logo-scale|scale|size)/i,
+        // Dynamic template literal: var(--${brand}-logo-scale) or var(--${currentBrand}-logo-scale)
+        /var\(--\$\{[^}]+\}-(logo-scale|scale|size)/i,
+        // Template with scale: scale(var(--${...}))
+        /scale\(var\(--\$\{[^}]+\}/i,
+        // Any var(-- with scale nearby (using [\s\S] instead of . for multiline)
+        /style=\{\{[\s\S]*?var\(--[\s\S]*?scale/i,
+      ];
+      
+      for (const pattern of cssVarPatterns) {
+        if (pattern.test(elementCode)) {
+          console.log('[Image Detection] Found CSS variable pattern in element');
+          
+          // DYNAMIC EXTRACTION: No hardcoded values
+          // Extract variable pattern from element code
+          const extracted = extractCSSVariablePattern(elementCode);
+          
+          // Determine brand using intelligent discovery (no hardcoded brand names)
+          const brand = determineBrandPrefix(imageContext, elementCode, projectRoot);
+          
+          // Construct the CSS variable name
+          let cssVariable: string;
+          if (extracted.isDynamic) {
+            // Dynamic template literal: construct with discovered brand
+            cssVariable = `--${brand}-${extracted.suffix}`;
+          } else if (extracted.fullVariable) {
+            // Static variable: use the exact name from the code
+            cssVariable = extracted.fullVariable;
+          } else {
+            // Fallback: construct from brand and suffix
+            cssVariable = `--${brand}-${extracted.suffix}`;
+          }
+          
+          // DYNAMIC CSS FILE DISCOVERY: No hardcoded paths
+          const discoveredFile = await discoverCSSFileForVariable(projectRoot, cssVariable);
+          const sourceFile = discoveredFile?.file || await findFirstCSSVariablesFile(projectRoot);
+          
+          console.log('[Image Detection] CSS Variable detection (dynamic):', {
+            isDynamic: extracted.isDynamic,
+            extractedPrefix: extracted.prefix,
+            extractedSuffix: extracted.suffix,
+            determinedBrand: brand,
+            cssVariable,
+            sourceFile
+          });
+          
+          return {
+            pattern: {
+              type: 'css-variable',
+              strategy: 'css-file',
+              confidence: 'high',
+              sourceFile,
+              cssVariable,
+              lineNumber: preciseLocation.lineNumber,
+              details: `Found ${extracted.isDynamic ? 'dynamic' : 'static'} CSS variable pattern. Will update ${cssVariable} in ${sourceFile}.`
+            },
+            relatedFiles: [preciseLocation.filePath, sourceFile]
+          };
+        }
+      }
+      
+      // PRIORITY 2: Check for Tailwind scale class
+      if (elementCode.match(/className=.*scale-\d+/)) {
+        const scaleMatch = elementCode.match(/scale-(\d+)/);
+        return {
+          pattern: {
+            type: 'tailwind',
+            strategy: 'tailwind-class',
+            confidence: 'high',
+            sourceFile: preciseLocation.filePath,
+            lineNumber: preciseLocation.lineNumber,
+            existingClasses: scaleMatch ? [`scale-${scaleMatch[1]}`] : [],
+            details: `Found Tailwind scale class at ${preciseLocation.filePath}:${preciseLocation.lineNumber}`
+          },
+          relatedFiles: [preciseLocation.filePath]
+        };
+      }
+      
+      // PRIORITY 3: Check for inline style transform (without CSS variable)
+      if (elementCode.includes('style=') && elementCode.includes('transform') && !elementCode.includes('var(--')) {
+        return {
+          pattern: {
+            type: 'inline-style',
+            strategy: 'component-inline',
+            confidence: 'high',
+            sourceFile: preciseLocation.filePath,
+            lineNumber: preciseLocation.lineNumber,
+            details: `Found inline style at ${preciseLocation.filePath}:${preciseLocation.lineNumber}`
+          },
+          relatedFiles: [preciseLocation.filePath]
+        };
+      }
+      
+      // PRIORITY 4: Check for Next.js Image with width/height props (lowest priority for scaling)
+      if (elementCode.includes('<Image') && (elementCode.includes('width=') || elementCode.includes('height='))) {
+        return {
+          pattern: {
+            type: 'next-image',
+            strategy: 'component-inline',
+            confidence: 'high',
+            sourceFile: preciseLocation.filePath,
+            lineNumber: preciseLocation.lineNumber,
+            details: `Found Next.js Image at ${preciseLocation.filePath}:${preciseLocation.lineNumber}`
+          },
+          relatedFiles: [preciseLocation.filePath]
+        };
+      }
+    }
+  }
+  
+  // STEP 2: Fallback to heuristic detection if precise location not found
+  console.log('[Image Detection] No precise location, falling back to heuristic detection');
+  
+  // Identify files that RENDER the image (have <Image> or <img> tags)
+  // vs files that just REFERENCE the path (config files)
+  const renderingFiles = componentFiles.filter(file => {
+    const hasImageTag = file.content.includes('<Image') || file.content.includes('<img');
+    const hasImagePath = file.content.includes(imageContext.imageSrc) ||
+                         (imageContext.altText && file.content.includes(imageContext.altText));
+    // Must have both an image tag AND reference the image somehow
+    // OR reference via a variable (like brandLogos)
+    return hasImageTag && (hasImagePath || file.content.includes('brandLogos') || file.content.includes('logos.'));
+  });
+  
+  console.log('[Image Detection] Found rendering files:', renderingFiles.map(f => f.path));
+  
+  // 1. Check for CSS Variables pattern (HIGHEST PRIORITY for logos)
+  const cssVarResult = await detectCSSVariablePattern(projectRoot, imageContext, componentFiles);
+  if (cssVarResult) {
+    // Boost confidence if found in a rendering file
+    if (renderingFiles.some(f => cssVarResult.pattern.details?.includes(f.path))) {
+      cssVarResult.pattern.confidence = 'high';
+    }
+    results.push(cssVarResult.pattern);
+    relatedFiles.push(...cssVarResult.files);
+  }
+  
+  // 2. Check for Next.js Image component pattern in RENDERING files only
+  const nextImageResult = detectNextImagePattern(imageContext, renderingFiles.length > 0 ? renderingFiles : componentFiles);
+  if (nextImageResult) {
+    results.push(nextImageResult);
+  }
+  
+  // 3. Check for Tailwind pattern
+  const tailwindResult = detectTailwindPattern(imageContext, renderingFiles.length > 0 ? renderingFiles : componentFiles);
+  if (tailwindResult) {
+    results.push(tailwindResult);
+  }
+  
+  // 4. Check for inline style pattern in RENDERING files only
+  const inlineResult = detectInlineStylePattern(imageContext, renderingFiles.length > 0 ? renderingFiles : componentFiles);
+  if (inlineResult) {
+    results.push(inlineResult);
+  }
+  
+  // 5. Check for config file pattern (LOWEST PRIORITY - only if nothing else found)
+  if (results.length === 0) {
+    const configResult = await detectConfigFilePattern(projectRoot, imageContext, componentFiles);
+    if (configResult) {
+      results.push(configResult.pattern);
+      relatedFiles.push(...configResult.files);
+    }
+  }
+  
+  // Determine if this is a brand logo (should prefer CSS variables)
+  const isBrandLogo = imageContext.imageSrc.toLowerCase().includes('/logos/') ||
+                      imageContext.imageSrc.toLowerCase().includes('logo') ||
+                      imageContext.altText?.toLowerCase().includes('logo');
+  
+  // Sort by confidence, type priority, and strategy priority
+  // Priority order per plan:
+  // 1. CSS Variable (css-file) - highest priority for scale changes
+  // 2. Tailwind (tailwind-class) - second highest
+  // 3. Inline style (component-inline with inline-style type)
+  // 4. Next.js Image (component-inline with next-image type)
+  // 5. Config file (config-file)
+  // 6. AI-assisted (fallback)
+  
+  const sortedResults = results.sort((a, b) => {
+    // For brand logos, prioritize CSS variables (they control global logo scaling)
+    if (isBrandLogo && a.type === 'css-variable' && a.cssVariable?.includes('logo-scale')) {
+      return -1; // CSS variable for logos always wins
+    }
+    if (isBrandLogo && b.type === 'css-variable' && b.cssVariable?.includes('logo-scale')) {
+      return 1;
+    }
+    
+    // Type priority (more specific than strategy)
+    const typeOrder: Record<ImageStylingType, number> = {
+      'css-variable': 7,
+      'tailwind': 6,
+      'inline-style': 5,
+      'next-image': 4,
+      'config-consumed': 3,
+      'config-unused': 2,
+      'styled-component': 2,
+      'css-class': 2,
+      'unknown': 1
+    };
+    
+    const confidenceOrder = { high: 3, medium: 2, low: 1 };
+    
+    // First sort by confidence
+    const confDiff = confidenceOrder[b.confidence] - confidenceOrder[a.confidence];
+    if (confDiff !== 0) return confDiff;
+    
+    // Then by type priority
+    return typeOrder[b.type] - typeOrder[a.type];
+  });
+  
+  console.log('[Image Detection] Sorted results:', sortedResults.map(r => ({
+    type: r.type,
+    strategy: r.strategy,
+    confidence: r.confidence,
+    file: r.sourceFile
+  })));
+  
+  if (sortedResults.length > 0) {
+    return {
+      pattern: sortedResults[0],
+      relatedFiles: [...new Set(relatedFiles)]
+    };
+  }
+  
+  // Fallback to AI-assisted
+  return {
+    pattern: {
+      type: 'unknown',
+      strategy: 'ai-assisted',
+      confidence: 'low',
+      details: 'Could not detect a specific pattern, will use AI-assisted modification'
+    },
+    relatedFiles: []
+  };
+}
+
+/**
+ * Detect CSS Variable pattern
+ * Looks for: transform: scale(var(--logo-scale))
+ * Must find the variable in the file that ACTUALLY RENDERS the image
+ */
+async function detectCSSVariablePattern(
+  projectRoot: string,
+  imageContext: ImageContext,
+  componentFiles: { path: string; content: string }[]
+): Promise<{ pattern: ImageStylingPattern; files: string[] } | null> {
+  
+  // Extract the image filename for matching
+  const imageName = imageContext.imageSrc.split('/').pop()?.replace(/\.[^.]+$/, '') || '';
+  
+  // First, find files that actually render this specific image
+  const filesRenderingImage = componentFiles.filter(file => {
+    // Check if file contains the image source or image name
+    return file.content.includes(imageContext.imageSrc) ||
+           (imageName && file.content.includes(imageName)) ||
+           (imageContext.altText && file.content.includes(imageContext.altText));
+  });
+  
+  // Specific patterns for logo/image scale CSS variables
+  const logoScalePatterns = [
+    // Pattern: scale(var(--brand-logo-scale, 1))
+    /scale\(var\(--([a-zA-Z0-9-]+)-logo-scale/i,
+    // Pattern: var(--brand-logo-scale)
+    /var\(--([a-zA-Z0-9-]+)-logo-scale/i,
+    // Pattern: transform: scale(var(--something))
+    /transform:\s*[`'"]?scale\(var\(--([a-zA-Z0-9-]+)\)/i,
+  ];
+  
+  // Search in files that render this image for CSS variable usage
+  for (const file of filesRenderingImage) {
+    for (const pattern of logoScalePatterns) {
+      const match = file.content.match(pattern);
+      if (match) {
+        // Found CSS variable in a file that renders this image
+        const varPrefix = match[1];
+        
+        // Construct the full variable name
+        let variableName: string;
+        if (match[0].includes('logo-scale')) {
+          variableName = `--${varPrefix}-logo-scale`;
+        } else {
+          variableName = `--${varPrefix}`;
+        }
+        
+        // Search for CSS file that defines this variable
+        const cssFiles = await findCSSFilesDefiningVariable(projectRoot, variableName);
+        
+        return {
+          pattern: {
+            type: 'css-variable',
+            strategy: 'css-file',
+            confidence: 'high',
+            sourceFile: cssFiles[0] || 'src/styles/brand-overrides.css',
+            cssVariable: variableName,
+            details: `Found CSS variable ${variableName} in ${file.path} (renders this image)`
+          },
+          files: cssFiles
+        };
+      }
+    }
+  }
+  
+  // Check ALL rendering files for dynamic brand variable pattern (sidebar.tsx pattern)
+  // This catches: scale(var(--${currentBrand}-logo-scale, 1))
+  for (const file of filesRenderingImage) {
+    // Look for dynamic brand variable pattern - escape the $ properly
+    const dynamicPatterns = [
+      /scale\(var\(--\$\{[^}]+\}-logo-scale/,  // Template literal: --${brand}-logo-scale
+      /--\w+-logo-scale/,                       // Static: --sonance-logo-scale
+    ];
+    
+    for (const dynamicPattern of dynamicPatterns) {
+      if (dynamicPattern.test(file.content)) {
+        // This file uses brand-based logo scale variables
+        // Use intelligent brand detection (no hardcoded names)
+        const brand = determineBrandPrefix(imageContext, file.content, projectRoot);
+        
+        // Extract the actual suffix from the pattern found
+        const suffixMatch = file.content.match(/var\(--[^)]*?-([a-zA-Z0-9-]+)\s*[,)]/);
+        const suffix = suffixMatch?.[1] || 'scale';
+        
+        const variableName = `--${brand}-${suffix}`;
+        const cssFiles = await findCSSFilesDefiningVariable(projectRoot, variableName);
+        
+        console.log('[CSS Detection] Found dynamic scale pattern:', {
+          file: file.path,
+          pattern: dynamicPattern.source,
+          brand,
+          suffix,
+          variableName,
+          cssFiles
+        });
+        
+        return {
+          pattern: {
+            type: 'css-variable',
+            strategy: 'css-file',
+            confidence: 'high',
+            sourceFile: cssFiles[0] || 'src/styles/brand-overrides.css',
+            cssVariable: variableName,
+            details: `Found brand logo-scale CSS variable ${variableName} in ${file.path}`
+          },
+          files: cssFiles
+        };
+      }
+    }
+  }
+  
+  // Also check if the codebase has a pattern of CSS variables for images
+  const globalCssPath = path.join(projectRoot, 'src', 'app', 'globals.css');
+  const brandOverridesPath = path.join(projectRoot, 'src', 'styles', 'brand-overrides.css');
+  
+  for (const cssPath of [brandOverridesPath, globalCssPath]) {
+    if (fs.existsSync(cssPath)) {
+      const content = fs.readFileSync(cssPath, 'utf-8');
+      // Check for any scale-related CSS variables (no hardcoded suffixes)
+      if (content.match(/--[a-zA-Z0-9]+-(?:logo-)?scale\s*:/)) {
+        // Use intelligent brand detection (no hardcoded names)
+        const brand = determineBrandPrefix(imageContext, content, projectRoot);
+        
+        // Extract the actual suffix pattern from the CSS file
+        const suffixMatch = content.match(/--[a-zA-Z0-9]+-([a-zA-Z0-9-]*scale[a-zA-Z0-9-]*)\s*:/);
+        const suffix = suffixMatch?.[1] || 'scale';
+        
+        const variableName = `--${brand}-${suffix}`;
+        const relativePath = cssPath.replace(projectRoot + '/', '');
+        
+        return {
+          pattern: {
+            type: 'css-variable',
+            strategy: 'css-file',
+            confidence: 'medium',
+            sourceFile: relativePath,
+            cssVariable: variableName,
+            details: `Found scale CSS variables in ${relativePath}. Using ${variableName} based on detected patterns.`
+          },
+          files: [cssPath.replace(projectRoot + '/', '')]
+        };
+      }
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * Detect Tailwind pattern
+ * Looks for: scale-90, w-24, h-auto, etc.
+ */
+function detectTailwindPattern(
+  imageContext: ImageContext,
+  componentFiles: { path: string; content: string }[]
+): ImageStylingPattern | null {
+  const tailwindScalePattern = /\bscale-(\d+)\b/;
+  const tailwindSizePatterns = [
+    /\bw-(\d+|auto|full)\b/,
+    /\bh-(\d+|auto|full)\b/,
+    /\bmax-w-(\d+|full|screen)\b/,
+    /\bmax-h-(\d+|full|screen)\b/,
+  ];
+  
+  // Check className from the image element
+  if (imageContext.className) {
+    const scaleMatch = imageContext.className.match(tailwindScalePattern);
+    const hasSizeClasses = tailwindSizePatterns.some(p => p.test(imageContext.className || ''));
+    
+    if (scaleMatch || hasSizeClasses) {
+      // Find the file containing this image
+      for (const file of componentFiles) {
+        if (file.content.includes(imageContext.imageSrc) || 
+            (imageContext.altText && file.content.includes(imageContext.altText))) {
+          return {
+            type: 'tailwind',
+            strategy: 'tailwind-class',
+            confidence: 'high',
+            sourceFile: file.path,
+            existingClasses: imageContext.className?.split(' ').filter(c => 
+              tailwindScalePattern.test(c) || tailwindSizePatterns.some(p => p.test(c))
+            ),
+            details: `Found Tailwind sizing classes: ${imageContext.className}`
+          };
+        }
+      }
+    }
+  }
+  
+  // Check if project uses Tailwind
+  const hasTailwind = componentFiles.some(f => 
+    f.content.includes('className=') && 
+    (f.content.includes('scale-') || f.content.includes(' w-') || f.content.includes(' h-'))
+  );
+  
+  if (hasTailwind) {
+    return {
+      type: 'tailwind',
+      strategy: 'tailwind-class',
+      confidence: 'low',
+      details: 'Project uses Tailwind, can apply scale via class'
+    };
+  }
+  
+  return null;
+}
+
+/**
+ * Detect inline style pattern
+ * Looks for: style={{ transform: 'scale(0.9)' }}
+ * Only in files that actually RENDER images (not config files)
+ */
+function detectInlineStylePattern(
+  imageContext: ImageContext,
+  componentFiles: { path: string; content: string }[]
+): ImageStylingPattern | null {
+  const inlineStylePatterns = [
+    /style=\{\{[^}]*transform:[^}]*scale\(/,
+    /style=\{\{[^}]*width:[^}]*/,
+    /style=\{\{[^}]*height:[^}]*/,
+  ];
+  
+  for (const file of componentFiles) {
+    // Skip config/system files that don't render images
+    if (file.path.includes('brand-system') || 
+        file.path.includes('config') ||
+        file.path.includes('/lib/') && !file.path.includes('components')) {
+      continue;
+    }
+    
+    // Must have an actual image tag to be a rendering file
+    const hasImageTag = file.content.includes('<Image') || file.content.includes('<img');
+    if (!hasImageTag) continue;
+    
+    // Check if this file might render the image (via direct src or variable)
+    const mightRenderImage = file.content.includes(imageContext.imageSrc) ||
+      (imageContext.altText && file.content.includes(imageContext.altText)) ||
+      file.content.includes('brandLogos') ||
+      file.content.includes('logos.');
+    
+    if (mightRenderImage) {
+      for (const pattern of inlineStylePatterns) {
+        if (pattern.test(file.content)) {
+          // Find the line number of the image element
+          const lines = file.content.split('\n');
+          let lineNumber = 0;
+          for (let i = 0; i < lines.length; i++) {
+            if ((lines[i].includes('<Image') || lines[i].includes('<img')) &&
+                (lines[i].includes('style=') || 
+                 (i + 5 < lines.length && lines.slice(i, i + 5).join('').includes('style=')))) {
+              lineNumber = i + 1;
+              break;
+            }
+          }
+          
+          return {
+            type: 'inline-style',
+            strategy: 'component-inline',
+            confidence: 'high',
+            sourceFile: file.path,
+            lineNumber,
+            details: `Found inline style with transform/dimensions in ${file.path}`
+          };
+        }
+      }
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * Detect config file pattern
+ * Looks for: brandLogos, imageConfig, logoSizes, etc.
+ */
+async function detectConfigFilePattern(
+  projectRoot: string,
+  imageContext: ImageContext,
+  componentFiles: { path: string; content: string }[]
+): Promise<{ pattern: ImageStylingPattern; files: string[] } | null> {
+  const configPatterns = [
+    { pattern: /export const (brandLogos|logoConfig|logos)/i, type: 'logo-config' },
+    { pattern: /export const (imageConfig|images|imageSizes)/i, type: 'image-config' },
+    { pattern: /export const (logoSizes|logoDimensions)/i, type: 'logo-sizes' },
+    { pattern: /export const (theme|themeConfig)/i, type: 'theme' },
+  ];
+  
+  const configFiles: string[] = [];
+  
+  // Extract filename from image src for matching
+  const imageName = imageContext.imageSrc.split('/').pop()?.replace(/\.[^.]+$/, '') || '';
+  
+  for (const file of componentFiles) {
+    // Check if this is a config file
+    for (const { pattern, type } of configPatterns) {
+      if (pattern.test(file.content)) {
+        // Check if the image is referenced in this config
+        if (file.content.includes(imageContext.imageSrc) || 
+            (imageName && file.content.includes(imageName))) {
+          
+          // Determine if the config is actually consumed
+          const configName = file.content.match(pattern)?.[1] || '';
+          const isConsumed = componentFiles.some(f => 
+            f.path !== file.path && 
+            (f.content.includes(`import { ${configName}`) ||
+             f.content.includes(`import {${configName}`) ||
+             f.content.includes(`${configName}.`) ||
+             f.content.includes(`${configName}[`))
+          );
+          
+          configFiles.push(file.path);
+          
+          // Check if there's dimension/scale config being used
+          const hasSizeConfig = file.content.includes('scale') || 
+                               file.content.includes('width') || 
+                               file.content.includes('height');
+          
+          return {
+            pattern: {
+              type: isConsumed ? 'config-consumed' : 'config-unused',
+              strategy: isConsumed ? 'config-file' : 'ai-assisted',
+              confidence: isConsumed && hasSizeConfig ? 'high' : 'medium',
+              sourceFile: file.path,
+              configKey: imageName,
+              details: `Found ${type} in ${file.path}. Config is ${isConsumed ? 'consumed' : 'NOT consumed'} by components.`
+            },
+            files: configFiles
+          };
+        }
+      }
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * Detect Next.js Image component pattern
+ * Looks for: <Image width={} height={} />
+ */
+function detectNextImagePattern(
+  imageContext: ImageContext,
+  componentFiles: { path: string; content: string }[]
+): ImageStylingPattern | null {
+  const nextImagePatterns = [
+    /<Image[^>]*\s+width=/,
+    /from ['"]next\/image['"]/,
+    /import Image from ['"]next\/image['"]/,
+  ];
+  
+  for (const file of componentFiles) {
+    const hasNextImage = nextImagePatterns.some(p => p.test(file.content));
+    const containsImage = file.content.includes(imageContext.imageSrc) ||
+      (imageContext.altText && file.content.includes(imageContext.altText));
+    
+    if (hasNextImage && containsImage) {
+      // Find the specific Image element
+      const lines = file.content.split('\n');
+      let lineNumber = 0;
+      
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].includes(imageContext.imageSrc) || 
+            (imageContext.altText && lines[i].includes(imageContext.altText))) {
+          lineNumber = i + 1;
+          break;
+        }
+      }
+      
+      return {
+        type: 'next-image',
+        strategy: 'component-inline',
+        confidence: 'high',
+        sourceFile: file.path,
+        lineNumber,
+        details: `Found Next.js Image component in ${file.path}. Modify width/height props or add scale transform.`
+      };
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * Find CSS files that define a specific variable
+ */
+async function findCSSFilesDefiningVariable(
+  projectRoot: string,
+  variableName: string
+): Promise<string[]> {
+  const cssLocations = [
+    'src/styles',
+    'src/app',
+    'styles',
+    'app',
+  ];
+  
+  const foundFiles: string[] = [];
+  
+  for (const location of cssLocations) {
+    const dirPath = path.join(projectRoot, location);
+    if (!fs.existsSync(dirPath)) continue;
+    
+    const files = fs.readdirSync(dirPath);
+    for (const file of files) {
+      if (!file.endsWith('.css')) continue;
+      
+      const filePath = path.join(dirPath, file);
+      const content = fs.readFileSync(filePath, 'utf-8');
+      
+      // Check if this file defines the variable
+      if (content.includes(variableName + ':') || content.includes(variableName + ' :')) {
+        foundFiles.push(path.join(location, file));
+      }
+    }
+  }
+  
+  return foundFiles;
+}
+
+/**
+ * Build save instructions based on detected pattern
+ */
+export function buildSaveInstructions(pattern: ImageStylingPattern, override: {
+  scale?: number;
+  width?: number;
+  height?: number;
+  src?: string;
+}): string {
+  switch (pattern.strategy) {
+    case 'css-file':
+      return `Update CSS file "${pattern.sourceFile}":
+- Set ${pattern.cssVariable || '--logo-scale'}: ${override.scale || 1}
+${override.width ? `- Set width variable: ${override.width}px` : ''}
+${override.height ? `- Set height variable: ${override.height}px` : ''}`;
+
+    case 'tailwind-class':
+      const newScale = override.scale ? Math.round(override.scale * 100) : 100;
+      return `Update Tailwind classes in "${pattern.sourceFile}":
+- ${pattern.existingClasses?.includes(`scale-${newScale}`) ? 'Keep' : 'Replace'} scale class with scale-${newScale}
+${override.width ? `- Add/update width class` : ''}
+${override.height ? `- Add/update height class` : ''}`;
+
+    case 'component-inline':
+      return `Update component in "${pattern.sourceFile}" at line ${pattern.lineNumber}:
+- Set transform: scale(${override.scale || 1})
+${override.width ? `- Set width: ${override.width}px` : ''}
+${override.height ? `- Set height: ${override.height}px` : ''}`;
+
+    case 'config-file':
+      return `Update config in "${pattern.sourceFile}":
+- Key: ${pattern.configKey}
+- Set scale: ${override.scale || 1}
+${override.width ? `- Set width: ${override.width}` : ''}
+${override.height ? `- Set height: ${override.height}` : ''}`;
+
+    case 'ai-assisted':
+    default:
+      return `Use AI to intelligently apply changes:
+- Scale: ${override.scale || 1}
+${override.width ? `- Width: ${override.width}px` : ''}
+${override.height ? `- Height: ${override.height}px` : ''}
+${override.src ? `- Source: ${override.src}` : ''}`;
+  }
+}