sonance-brand-mcp 1.3.111 → 1.3.113

package/dist/assets/api/sonance-save-image/route.ts

@@ -0,0 +1,625 @@
+/**
+ * Sonance DevTools API - Intelligent Image Save
+ * 
+ * This endpoint intelligently detects how images are styled in the codebase
+ * and applies changes using the appropriate strategy:
+ * - CSS Variables → Update CSS file
+ * - Tailwind → Update class attribute
+ * - Inline Styles → Modify component file
+ * - Config Files → Update config
+ * - Unknown → AI-assisted modification
+ */
+
+import { NextResponse } from 'next/server';
+import * as fs from 'fs';
+import * as path from 'path';
+import { 
+  detectImageStylingPattern, 
+  buildSaveInstructions,
+  type ImageContext,
+  type ImageStylingPattern,
+  type SaveStrategy 
+} from '../sonance-vision-apply/image-styling-detection';
+
+interface SaveImageRequest {
+  imageId: string;
+  imageSrc: string;
+  altText?: string;
+  className?: string;
+  elementId?: string;
+  scale?: number;
+  width?: number;
+  height?: number;
+  src?: string; // New source if changing the image
+  reset?: boolean;
+  pageRoute?: string; // The page where the image was clicked
+  dataAttributes?: Record<string, string>; // Data attributes from the DOM element
+  currentBrand?: string; // The current brand context from useBrand()
+}
+
+/**
+ * Dynamically find a CSS file that contains CSS variable definitions
+ * No hardcoded paths - searches common locations
+ */
+async function findCSSVariablesFile(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;
+    
+    try {
+      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');
+        
+        // Look for :root with CSS variables
+        if (content.includes(':root') && content.includes('--')) {
+          return path.join(dir, file);
+        }
+      }
+    } catch {
+      // Skip unreadable directories
+    }
+  }
+  
+  // Fallback to common patterns
+  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 ComponentFile {
+  path: string;
+  content: string;
+}
+
+export async function POST(request: Request) {
+  // Security: Only allow in development
+  if (process.env.NODE_ENV !== 'development') {
+    return NextResponse.json(
+      { error: 'This endpoint is only available in development mode.' },
+      { status: 403 }
+    );
+  }
+
+  try {
+    const body: SaveImageRequest = await request.json();
+    const { imageId, imageSrc, altText, className, elementId, scale, width, height, src, reset, pageRoute, dataAttributes, currentBrand } = body;
+
+    console.log('[Image Save] Request received:', { imageId, imageSrc, scale, width, height, elementId, pageRoute, currentBrand });
+
+    const projectRoot = process.cwd();
+    
+    // Build image context with all available information
+    const imageContext: ImageContext = {
+      imageSrc: imageSrc || '',
+      elementId,
+      className,
+      altText,
+      pageRoute,
+      dataAttributes,
+      currentBrand, // Pass the current brand context for correct variable targeting
+    };
+
+    // Gather component files for analysis
+    const componentFiles = await gatherComponentFiles(projectRoot);
+    
+    // Detect the styling pattern
+    const detection = await detectImageStylingPattern(projectRoot, imageContext, componentFiles);
+    
+    console.log('[Image Save] Detected pattern:', {
+      type: detection.pattern.type,
+      strategy: detection.pattern.strategy,
+      confidence: detection.pattern.confidence,
+      sourceFile: detection.pattern.sourceFile,
+      details: detection.pattern.details,
+    });
+
+    // Apply changes based on strategy
+    const result = await applyImageChanges(
+      projectRoot,
+      detection.pattern,
+      { scale, width, height, src },
+      imageContext,
+      componentFiles,
+      reset
+    );
+
+    if (result.success) {
+      return NextResponse.json({
+        success: true,
+        message: result.message,
+        strategy: detection.pattern.strategy,
+        pattern: detection.pattern.type,
+        modifiedFile: detection.pattern.sourceFile,
+        details: detection.pattern.details,
+      });
+    } else {
+      return NextResponse.json(
+        { success: false, error: result.error, pattern: detection.pattern },
+        { status: 400 }
+      );
+    }
+  } catch (error) {
+    console.error('[Image Save] Error:', error);
+    return NextResponse.json(
+      { success: false, error: String(error) },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * Apply image changes based on detected strategy
+ */
+async function applyImageChanges(
+  projectRoot: string,
+  pattern: ImageStylingPattern,
+  override: { scale?: number; width?: number; height?: number; src?: string },
+  imageContext: ImageContext,
+  componentFiles: ComponentFile[],
+  reset?: boolean
+): Promise<{ success: boolean; message?: string; error?: string }> {
+  
+  console.log('[Image Save] Applying changes with strategy:', pattern.strategy);
+  console.log('[Image Save] Instructions:', buildSaveInstructions(pattern, override));
+
+  switch (pattern.strategy) {
+    case 'css-file':
+      return applyCSSVariableChanges(projectRoot, pattern, override, reset);
+    
+    case 'tailwind-class':
+      return applyTailwindChanges(projectRoot, pattern, override, imageContext, componentFiles);
+    
+    case 'component-inline':
+      return applyInlineStyleChanges(projectRoot, pattern, override, imageContext, componentFiles);
+    
+    case 'config-file':
+      return applyConfigFileChanges(projectRoot, pattern, override, imageContext);
+    
+    case 'ai-assisted':
+    default:
+      return applyAIAssistedChanges(projectRoot, override, imageContext, componentFiles);
+  }
+}
+
+/**
+ * Apply changes via CSS variables
+ */
+async function applyCSSVariableChanges(
+  projectRoot: string,
+  pattern: ImageStylingPattern,
+  override: { scale?: number; width?: number; height?: number },
+  reset?: boolean
+): Promise<{ success: boolean; message?: string; error?: string }> {
+  
+  // Use the source file from detection, or find a suitable CSS file dynamically
+  let cssFilePath = pattern.sourceFile;
+  if (!cssFilePath) {
+    // Dynamically find a CSS file with variable definitions
+    cssFilePath = await findCSSVariablesFile(projectRoot);
+  }
+  const cssPath = path.join(projectRoot, cssFilePath);
+  
+  // Use the detected variable directly - no hardcoded brand names
+  // The detection phase already determined the correct variable name
+  const varName = pattern.cssVariable || '--app-scale';
+  
+  console.log('[CSS Save] Updating variable:', { varName, cssPath: pattern.sourceFile, scale: override.scale });
+  
+  try {
+    // Read existing CSS
+    let cssContent = '';
+    if (fs.existsSync(cssPath)) {
+      cssContent = fs.readFileSync(cssPath, 'utf-8');
+    }
+    
+    // Escape special regex characters in variable name (especially dashes)
+    const escapedVarName = varName.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+    const varPattern = new RegExp(`(${escapedVarName}:\\s*)([^;]+)(;)`, 'g');
+    
+    // Check if variable exists in the file
+    const varExists = varPattern.test(cssContent);
+    // Reset the regex lastIndex after test
+    varPattern.lastIndex = 0;
+    
+    if (reset) {
+      // Reset to default (1)
+      if (varExists) {
+        cssContent = cssContent.replace(varPattern, '$11$3');
+      }
+    } else if (varExists) {
+      // Update existing variable
+      cssContent = cssContent.replace(varPattern, `$1${override.scale || 1}$3`);
+    } else {
+      // Variable doesn't exist - need to add it
+      // Check if there's a :root block
+      const rootPattern = /(:root\s*\{)([^}]*)/;
+      const rootMatch = cssContent.match(rootPattern);
+      
+      if (rootMatch) {
+        // Add to existing :root block
+        const existingContent = rootMatch[2];
+        const newContent = `${existingContent}\n  ${varName}: ${override.scale || 1};`;
+        cssContent = cssContent.replace(rootPattern, `$1${newContent}`);
+      } else {
+        // Create new :root block at the beginning
+        cssContent = `:root {\n  ${varName}: ${override.scale || 1};\n}\n\n${cssContent}`;
+      }
+    }
+    
+    // Ensure directory exists
+    const cssDir = path.dirname(cssPath);
+    if (!fs.existsSync(cssDir)) {
+      fs.mkdirSync(cssDir, { recursive: true });
+    }
+    
+    fs.writeFileSync(cssPath, cssContent, 'utf-8');
+    
+    console.log('[CSS Save] Successfully updated:', { varName, scale: override.scale || 1 });
+    
+    return {
+      success: true,
+      message: `Updated ${varName} to ${override.scale || 1} in ${pattern.sourceFile}`
+    };
+  } catch (error) {
+    return { success: false, error: `Failed to update CSS: ${error}` };
+  }
+}
+
+/**
+ * Apply changes via Tailwind classes
+ */
+async function applyTailwindChanges(
+  projectRoot: string,
+  pattern: ImageStylingPattern,
+  override: { scale?: number; width?: number; height?: number },
+  imageContext: ImageContext,
+  componentFiles: ComponentFile[]
+): Promise<{ success: boolean; message?: string; error?: string }> {
+  
+  if (!pattern.sourceFile) {
+    return { success: false, error: 'No source file identified for Tailwind changes' };
+  }
+  
+  const filePath = path.join(projectRoot, pattern.sourceFile);
+  if (!fs.existsSync(filePath)) {
+    return { success: false, error: `File not found: ${pattern.sourceFile}` };
+  }
+  
+  try {
+    let content = fs.readFileSync(filePath, 'utf-8');
+    
+    // Find the image element
+    const imageSrcEscaped = imageContext.imageSrc.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const imagePattern = new RegExp(`(<(?:img|Image)[^>]*(?:src=["']${imageSrcEscaped}["']|alt=["']${imageContext.altText}["'])[^>]*className=["'])([^"']+)(["'][^>]*>)`, 'g');
+    
+    const newScale = override.scale ? Math.round(override.scale * 100) : null;
+    
+    content = content.replace(imagePattern, (match, before, classes, after) => {
+      let newClasses = classes;
+      
+      // Update scale class
+      if (newScale !== null) {
+        // Remove existing scale class
+        newClasses = newClasses.replace(/\bscale-\d+\b/g, '').trim();
+        // Add new scale class (only if not 100)
+        if (newScale !== 100) {
+          newClasses = `${newClasses} scale-${newScale}`.trim();
+        }
+      }
+      
+      // Update width class if provided
+      if (override.width) {
+        newClasses = newClasses.replace(/\bw-\d+\b/g, '').trim();
+        newClasses = `${newClasses} w-[${override.width}px]`.trim();
+      }
+      
+      // Update height class if provided
+      if (override.height) {
+        newClasses = newClasses.replace(/\bh-\d+\b/g, '').trim();
+        newClasses = `${newClasses} h-[${override.height}px]`.trim();
+      }
+      
+      return `${before}${newClasses}${after}`;
+    });
+    
+    fs.writeFileSync(filePath, content, 'utf-8');
+    
+    return {
+      success: true,
+      message: `Updated Tailwind classes in ${pattern.sourceFile}`
+    };
+  } catch (error) {
+    return { success: false, error: `Failed to update Tailwind classes: ${error}` };
+  }
+}
+
+/**
+ * Apply changes via inline styles
+ */
+async function applyInlineStyleChanges(
+  projectRoot: string,
+  pattern: ImageStylingPattern,
+  override: { scale?: number; width?: number; height?: number },
+  imageContext: ImageContext,
+  componentFiles: ComponentFile[]
+): Promise<{ success: boolean; message?: string; error?: string }> {
+  
+  if (!pattern.sourceFile) {
+    return { success: false, error: 'No source file identified for inline style changes' };
+  }
+  
+  const filePath = path.join(projectRoot, pattern.sourceFile);
+  if (!fs.existsSync(filePath)) {
+    return { success: false, error: `File not found: ${pattern.sourceFile}` };
+  }
+  
+  try {
+    let content = fs.readFileSync(filePath, 'utf-8');
+    const lines = content.split('\n');
+    
+    // Find the image line (around the detected line number)
+    const searchStart = Math.max(0, (pattern.lineNumber || 1) - 5);
+    const searchEnd = Math.min(lines.length, (pattern.lineNumber || 1) + 10);
+    
+    for (let i = searchStart; i < searchEnd; i++) {
+      const line = lines[i];
+      
+      // Check if this line contains the image
+      if (line.includes(imageContext.imageSrc) || 
+          (imageContext.altText && line.includes(imageContext.altText)) ||
+          (line.includes('<Image') || line.includes('<img'))) {
+        
+        // Update transform scale in style prop
+        if (override.scale !== undefined) {
+          // Pattern: style={{ ... transform: 'scale(X)' ... }} or style={{ ... transform: `scale(${var})` ... }}
+          const scalePattern = /transform:\s*[`'"]?scale\([^)]*\)[`'"]?/;
+          const stylePattern = /style=\{\{([^}]*)\}\}/;
+          
+          if (scalePattern.test(line)) {
+            // Update existing scale
+            lines[i] = line.replace(scalePattern, `transform: 'scale(${override.scale})'`);
+          } else if (stylePattern.test(line)) {
+            // Add scale to existing style
+            lines[i] = line.replace(stylePattern, `style={{$1, transform: 'scale(${override.scale})'}}`);
+          } else {
+            // Check next few lines for style prop
+            for (let j = i + 1; j < Math.min(i + 5, lines.length); j++) {
+              if (scalePattern.test(lines[j])) {
+                lines[j] = lines[j].replace(scalePattern, `transform: 'scale(${override.scale})'`);
+                break;
+              }
+            }
+          }
+        }
+        
+        // Update width/height props for Next.js Image
+        if (override.width !== undefined) {
+          const widthPattern = /width=\{?\d+\}?/;
+          if (widthPattern.test(line)) {
+            lines[i] = line.replace(widthPattern, `width={${override.width}}`);
+          }
+        }
+        
+        if (override.height !== undefined) {
+          const heightPattern = /height=\{?\d+\}?/;
+          if (heightPattern.test(line)) {
+            lines[i] = line.replace(heightPattern, `height={${override.height}}`);
+          }
+        }
+        
+        break;
+      }
+    }
+    
+    content = lines.join('\n');
+    fs.writeFileSync(filePath, content, 'utf-8');
+    
+    return {
+      success: true,
+      message: `Updated inline styles in ${pattern.sourceFile}`
+    };
+  } catch (error) {
+    return { success: false, error: `Failed to update inline styles: ${error}` };
+  }
+}
+
+/**
+ * Apply changes via config file
+ */
+async function applyConfigFileChanges(
+  projectRoot: string,
+  pattern: ImageStylingPattern,
+  override: { scale?: number; width?: number; height?: number },
+  imageContext: ImageContext
+): Promise<{ success: boolean; message?: string; error?: string }> {
+  
+  if (!pattern.sourceFile) {
+    return { success: false, error: 'No config file identified' };
+  }
+  
+  const filePath = path.join(projectRoot, pattern.sourceFile);
+  if (!fs.existsSync(filePath)) {
+    return { success: false, error: `Config file not found: ${pattern.sourceFile}` };
+  }
+  
+  try {
+    let content = fs.readFileSync(filePath, 'utf-8');
+    const configKey = pattern.configKey || imageContext.imageSrc.split('/').pop()?.replace(/\.[^.]+$/, '') || '';
+    
+    // Look for existing config entry
+    const entryPattern = new RegExp(`['"]?${configKey}['"]?\\s*:\\s*\\{([^}]*)\\}`, 'g');
+    
+    if (entryPattern.test(content)) {
+      // Update existing entry
+      content = content.replace(entryPattern, (match, existing) => {
+        let updated = existing;
+        
+        if (override.scale !== undefined) {
+          if (/scale\s*:/.test(updated)) {
+            updated = updated.replace(/scale\s*:\s*[^,}]+/, `scale: ${override.scale}`);
+          } else {
+            updated = `${updated.trim()}, scale: ${override.scale}`;
+          }
+        }
+        
+        if (override.width !== undefined) {
+          if (/width\s*:/.test(updated)) {
+            updated = updated.replace(/width\s*:\s*[^,}]+/, `width: ${override.width}`);
+          } else {
+            updated = `${updated.trim()}, width: ${override.width}`;
+          }
+        }
+        
+        if (override.height !== undefined) {
+          if (/height\s*:/.test(updated)) {
+            updated = updated.replace(/height\s*:\s*[^,}]+/, `height: ${override.height}`);
+          } else {
+            updated = `${updated.trim()}, height: ${override.height}`;
+          }
+        }
+        
+        return `'${configKey}': {${updated}}`;
+      });
+    } else {
+      // Config entry doesn't exist - this is a warning case
+      console.warn(`[Image Save] Config entry for ${configKey} not found in ${pattern.sourceFile}`);
+    }
+    
+    fs.writeFileSync(filePath, content, 'utf-8');
+    
+    return {
+      success: true,
+      message: `Updated config for ${configKey} in ${pattern.sourceFile}`
+    };
+  } catch (error) {
+    return { success: false, error: `Failed to update config: ${error}` };
+  }
+}
+
+/**
+ * Fallback: Use AI-assisted modification
+ */
+async function applyAIAssistedChanges(
+  projectRoot: string,
+  override: { scale?: number; width?: number; height?: number; src?: string },
+  imageContext: ImageContext,
+  componentFiles: ComponentFile[]
+): Promise<{ success: boolean; message?: string; error?: string }> {
+  
+  // For AI-assisted, we'll forward to the vision-apply endpoint
+  // This keeps the logic centralized
+  
+  const changes: string[] = [];
+  if (override.src) changes.push(`change source to "${override.src}"`);
+  if (override.scale) changes.push(`set scale to ${override.scale}`);
+  if (override.width) changes.push(`set width to ${override.width}px`);
+  if (override.height) changes.push(`set height to ${override.height}px`);
+  
+  const prompt = `For the image "${imageContext.altText || imageContext.imageSrc}", ${changes.join(', ')}. 
+The image source is: ${imageContext.imageSrc}
+${imageContext.elementId ? `Element ID: ${imageContext.elementId}` : ''}
+${imageContext.className ? `Classes: ${imageContext.className}` : ''}`;
+  
+  try {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'}/api/sonance-vision-apply`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        action: 'apply',
+        pageRoute: '/',
+        userPrompt: prompt,
+        focusedElements: [{
+          name: imageContext.altText || 'Image',
+          type: 'logo',
+          imageSrc: imageContext.imageSrc,
+          coordinates: { x: 0, y: 0, width: 100, height: 100 }
+        }]
+      })
+    });
+    
+    const result = await response.json();
+    
+    if (result.success) {
+      return { success: true, message: 'Applied changes via AI-assisted modification' };
+    } else {
+      return { success: false, error: result.error || 'AI-assisted modification failed' };
+    }
+  } catch (error) {
+    return { success: false, error: `AI-assisted modification error: ${error}` };
+  }
+}
+
+/**
+ * Gather component files for analysis
+ */
+async function gatherComponentFiles(projectRoot: string): Promise<ComponentFile[]> {
+  const files: ComponentFile[] = [];
+  const searchDirs = [
+    'src/components',
+    'src/app',
+    'src/lib',
+    'src/styles',
+    'components',
+    'app',
+    'lib',
+  ];
+  
+  for (const dir of searchDirs) {
+    const dirPath = path.join(projectRoot, dir);
+    if (!fs.existsSync(dirPath)) continue;
+    
+    await walkDirectory(dirPath, files, projectRoot);
+  }
+  
+  return files;
+}
+
+async function walkDirectory(dirPath: string, files: ComponentFile[], projectRoot: string): Promise<void> {
+  const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+  
+  for (const entry of entries) {
+    const fullPath = path.join(dirPath, entry.name);
+    
+    if (entry.isDirectory()) {
+      // Skip node_modules, .next, etc.
+      if (['node_modules', '.next', 'dist', 'build', '.git'].includes(entry.name)) continue;
+      await walkDirectory(fullPath, files, projectRoot);
+    } else if (entry.isFile()) {
+      // Only include relevant file types
+      if (!/\.(tsx?|jsx?|css)$/.test(entry.name)) continue;
+      
+      try {
+        const content = fs.readFileSync(fullPath, 'utf-8');
+        files.push({
+          path: fullPath.replace(projectRoot + '/', ''),
+          content
+        });
+      } catch {
+        // Skip files we can't read
+      }
+    }
+  }
+}
+
+export async function GET() {
+  return NextResponse.json({
+    description: 'Intelligent Image Save API',
+    strategies: [
+      'css-file - Updates CSS variables',
+      'tailwind-class - Modifies Tailwind classes',
+      'component-inline - Updates inline styles',
+      'config-file - Modifies config files',
+      'ai-assisted - Uses AI to determine changes'
+    ]
+  });
+}