sonance-brand-mcp 1.3.68 → 1.3.70

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

@@ -602,10 +602,11 @@ function searchFilesSmart(
 const VISION_SYSTEM_PROMPT = `You edit code. Return ONLY valid JSON - no explanation, no preamble, no markdown.
 
 RULES:
-1. Copy code EXACTLY from the file - character for character
-2. Make the SMALLEST possible change
-3. For color changes, just change the className
-4. Do not restructure or reorganize code
+1. Make ONLY the exact change the user requested. Do not modify unrelated properties.
+2. Copy code EXACTLY from the file - character for character
+3. Make the SMALLEST possible change
+4. For color changes, just change the className
+5. Do not restructure or reorganize code
 
 RESPOND WITH ONLY THIS JSON FORMAT (nothing else):
 {"modifications":[{"filePath":"path","patches":[{"search":"exact code","replace":"changed code"}]}]}`;

package/dist/assets/api/sonance-vision-apply/theme-discovery.ts

@@ -669,6 +669,53 @@ export async function discoverTheme(projectRoot: string): Promise<DiscoveredThem
   return result;
 }
 
+/**
+ * Get a human-readable description of a color based on its luminance and name
+ * This helps the LLM understand what colors look like visually
+ */
+function getColorDescription(value: string, name: string): string {
+  const rgb = parseColorToRgb(value);
+  if (!rgb) return "";
+  
+  const luminance = getLuminance(rgb);
+  const baseName = name.replace(/^--/, "");
+  
+  // Very light colors (like white)
+  if (luminance > 0.9) {
+    if (baseName.includes("foreground")) {
+      return " (WHITE text)";
+    }
+    return " ⚠️ WHITE - do NOT use for buttons";
+  }
+  
+  // Very dark colors
+  if (luminance < 0.1) {
+    if (baseName.includes("background")) {
+      return " (DARK background)";
+    }
+    return " (BLACK/DARK)";
+  }
+  
+  // Semantic color guidance
+  if (baseName.includes("accent")) {
+    return " ✓ ACCENT - good for buttons/CTAs";
+  }
+  if (baseName.includes("success")) {
+    return " ✓ GREEN - good for positive actions";
+  }
+  if (baseName.includes("destructive")) {
+    return " ✓ RED - good for danger/delete";
+  }
+  if (baseName.includes("warning")) {
+    return " (ORANGE/YELLOW - caution)";
+  }
+  if (baseName.includes("primary") && luminance > 0.7) {
+    return " ⚠️ LIGHT - avoid for buttons on light backgrounds";
+  }
+  
+  return "";
+}
+
 /**
  * Format discovered theme as context for the LLM prompt
  * Includes contrast warnings to prevent bad color combinations
@@ -679,9 +726,15 @@ export function formatThemeForPrompt(theme: DiscoveredTheme): string {
   lines.push("**TARGET CODEBASE THEME (discovered):**");
   lines.push("");
   
+  // Quick reference for button colors
+  lines.push("BUTTON COLOR QUICK REFERENCE:");
+  lines.push("  ✓ Use for buttons: bg-accent, bg-success, bg-destructive");
+  lines.push("  ✗ Avoid for buttons: bg-primary (may be WHITE), bg-secondary (may be transparent)");
+  lines.push("");
+  
   // CSS Variables
   if (Object.keys(theme.cssVariables).length > 0) {
-    lines.push("CSS Variables:");
+    lines.push("COLOR TOKENS (with usage guidance):");
     
     // Group by category
     const categories: Record<string, string[]> = {
@@ -690,7 +743,10 @@ export function formatThemeForPrompt(theme: DiscoveredTheme): string {
     };
     
     for (const [name, value] of Object.entries(theme.cssVariables)) {
-      const entry = `  ${name}: ${value}`;
+      // Add color description for important tokens
+      const description = getColorDescription(value, name);
+      const entry = `  ${name}: ${value}${description}`;
+      
       if (
         name.includes("background") ||
         name.includes("foreground") ||

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

@@ -598,10 +598,11 @@ function searchFilesSmart(
 const VISION_SYSTEM_PROMPT = `You edit code. Return ONLY valid JSON - no explanation, no preamble, no markdown.
 
 RULES:
-1. Copy code EXACTLY from the file - character for character
-2. Make the SMALLEST possible change
-3. For color changes, just change the className
-4. Do not restructure or reorganize code
+1. Make ONLY the exact change the user requested. Do not modify unrelated properties.
+2. Copy code EXACTLY from the file - character for character
+3. Make the SMALLEST possible change
+4. For color changes, just change the className
+5. Do not restructure or reorganize code
 
 RESPOND WITH ONLY THIS JSON FORMAT (nothing else):
 {"modifications":[{"filePath":"path","patches":[{"search":"exact code","replace":"changed code"}]}]}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.68",
+  "version": "1.3.70",
   "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",