sonance-brand-mcp 1.3.50 → 1.3.53

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

@@ -3,6 +3,7 @@ import * as fs from "fs";
 import * as path from "path";
 import Anthropic from "@anthropic-ai/sdk";
 import { randomUUID } from "crypto";
+import { discoverTheme, formatThemeForPrompt } from "./theme-discovery";
 
 /**
  * Sonance DevTools API - Apply-First Vision Mode
@@ -471,10 +472,47 @@ Return search/replace patches (NOT full files). The system applies your patches
 - CRITICAL: NEVER invent or guess code. Your "search" string MUST be copied EXACTLY from the provided file content. If you cannot find the exact code to modify, return an empty modifications array.
 - If the file content appears truncated, only modify code that is visible in the provided content.
 
-**SONANCE BRAND COLORS:**
-- Charcoal: #333F48 (primary text)
-- IPORT Orange: #FC4C02
-- Blaze Blue: #00A3E1
+═══════════════════════════════════════════════════════════════════════════════
+SONANCE BRAND COLOR SYSTEM
+═══════════════════════════════════════════════════════════════════════════════
+
+**Core Colors:**
+- Primary (Charcoal): #333F48 - main text, dark backgrounds
+- Accent (Cyan "The Beam"): #00D3C8 - highlights, interactive elements, CTAs
+- Success: Green tones - positive states, confirmations
+- Warning: Amber/Orange tones - caution states, alerts
+- Destructive: Red tones - errors, delete actions
+
+**CRITICAL CONTRAST RULES:**
+When using colored backgrounds, ALWAYS use high-contrast text:
+
+| Background        | Use This Text                      | NEVER Use              |
+|-------------------|------------------------------------|-----------------------|
+| bg-accent         | text-white                         | text-accent-foreground |
+| bg-primary        | text-primary-foreground, text-white | text-primary          |
+| bg-success        | text-white                         | text-success          |
+| bg-warning        | text-white                         | text-warning          |
+| bg-destructive    | text-white                         | text-destructive      |
+
+**SEMANTIC TOKEN PATTERNS:**
+- text-{color} = the color itself (use on NEUTRAL backgrounds like white/gray)
+- text-{color}-foreground = INTENDED for text on {color} backgrounds, but MAY have contrast issues
+- bg-{color} = background in that color
+- WHEN IN DOUBT: Use text-white on any colored background for guaranteed contrast
+
+**BUTTON PATTERNS (Sonance Standard):**
+- Primary CTA: bg-primary text-primary-foreground
+- Accent/Highlight: bg-accent text-white (NOT text-accent-foreground)
+- Success: bg-success text-white
+- Warning: bg-warning text-white
+- Destructive: bg-destructive text-white
+- Outlined: border-border bg-transparent text-foreground
+
+**COMMON MISTAKES TO AVOID:**
+- WRONG: bg-accent text-accent-foreground (accent-foreground is often dark = invisible text)
+- RIGHT: bg-accent text-white (white text on cyan = visible)
+- WRONG: bg-primary text-primary (same color = invisible)
+- RIGHT: bg-primary text-primary-foreground OR text-white
 
 **RESPONSE FORMAT:**
 CRITICAL: Return ONLY the JSON object below. Do NOT include any text, explanation, or thinking before or after the JSON. No preamble. No "Looking at the screenshot..." No markdown code blocks. Just raw JSON:
@@ -666,7 +704,7 @@ export async function POST(request: Request) {
       const TOTAL_CONTEXT_BUDGET = 500000; // 500k chars total budget
       const MAX_RECOMMENDED_FILE = Infinity; // NEVER truncate the target file - AI needs full context
       const MAX_PAGE_FILE = 2000; // Page file is just a wrapper
-      const MAX_GLOBALS_CSS = 1500;
+      const MAX_GLOBALS_CSS = 15000; // Increased to capture full theme definitions
       const MAX_FILES = 25;
       
       let usedContext = 0;
@@ -760,6 +798,25 @@ ${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
         }
       }
 
+      // ========== THEME DISCOVERY ==========
+      // Dynamically discover theme tokens from the target codebase
+      const discoveredTheme = await discoverTheme(projectRoot);
+      const themeContext = formatThemeForPrompt(discoveredTheme);
+      
+      if (discoveredTheme.discoveredFiles.length > 0) {
+        textContent += `
+═══════════════════════════════════════════════════════════════════════════════
+${themeContext}
+═══════════════════════════════════════════════════════════════════════════════
+
+`;
+        debugLog("Theme discovery complete", {
+          filesFound: discoveredTheme.discoveredFiles,
+          cssVariableCount: Object.keys(discoveredTheme.cssVariables).length,
+          tailwindColorCount: Object.keys(discoveredTheme.tailwindColors).length,
+        });
+      }
+
       // ========== GLOBALS CSS ==========
       const globalsTruncated = pageContext.globalsCSS.substring(0, MAX_GLOBALS_CSS);
       textContent += `

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

@@ -0,0 +1,388 @@
+/**
+ * Theme Discovery Module for Sonance DevTools
+ * 
+ * Dynamically discovers and parses theme/design system files from target codebases.
+ * Extracts CSS variables, Tailwind colors, and available semantic tokens to provide
+ * context to the LLM for intelligent styling decisions.
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+
+/**
+ * Discovered theme information from a codebase
+ */
+export interface DiscoveredTheme {
+  // Raw CSS variable definitions found (e.g., { "--accent": "#00D3C8" })
+  cssVariables: Record<string, string>;
+  
+  // Tailwind custom colors from config (if found)
+  tailwindColors: Record<string, string>;
+  
+  // Available semantic class tokens discovered
+  availableTokens: string[];
+  
+  // Full raw theme CSS content for additional context
+  rawThemeCSS: string;
+  
+  // Files that were discovered and parsed
+  discoveredFiles: string[];
+}
+
+/**
+ * Patterns for finding theme-related files
+ */
+const THEME_FILE_PATTERNS = [
+  // CSS files
+  "src/app/globals.css",
+  "app/globals.css",
+  "src/styles/globals.css",
+  "styles/globals.css",
+  "src/styles/global.css",
+  "styles/global.css",
+  "src/styles/variables.css",
+  "styles/variables.css",
+  "src/styles/theme.css",
+  "styles/theme.css",
+  "src/styles/brand-overrides.css",
+  "styles/brand-overrides.css",
+  // Tailwind config files
+  "tailwind.config.js",
+  "tailwind.config.ts",
+  "tailwind.config.mjs",
+  "tailwind.config.cjs",
+];
+
+/**
+ * Find all theme-related files in a project
+ */
+export function findThemeFiles(projectRoot: string): string[] {
+  const foundFiles: string[] = [];
+  
+  for (const pattern of THEME_FILE_PATTERNS) {
+    const fullPath = path.join(projectRoot, pattern);
+    if (fs.existsSync(fullPath)) {
+      foundFiles.push(pattern);
+    }
+  }
+  
+  // Also search for any additional CSS files in common locations
+  const additionalDirs = ["src/styles", "styles", "src/app", "app"];
+  for (const dir of additionalDirs) {
+    const dirPath = path.join(projectRoot, dir);
+    if (fs.existsSync(dirPath) && fs.statSync(dirPath).isDirectory()) {
+      try {
+        const files = fs.readdirSync(dirPath);
+        for (const file of files) {
+          if (file.endsWith(".css") && !foundFiles.includes(path.join(dir, file))) {
+            foundFiles.push(path.join(dir, file));
+          }
+        }
+      } catch {
+        // Ignore read errors
+      }
+    }
+  }
+  
+  return foundFiles;
+}
+
+/**
+ * Parse CSS content and extract variable definitions
+ * Extracts patterns like: --primary: #333F48; or --accent: hsl(180 100% 50%);
+ */
+export function parseCSSVariables(cssContent: string): Record<string, string> {
+  const variables: Record<string, string> = {};
+  
+  // Match CSS custom property definitions
+  // Handles: --name: value; with various value formats
+  const regex = /--([a-zA-Z0-9-]+)\s*:\s*([^;]+);/g;
+  
+  let match;
+  while ((match = regex.exec(cssContent)) !== null) {
+    const name = match[1].trim();
+    const value = match[2].trim();
+    variables[`--${name}`] = value;
+  }
+  
+  return variables;
+}
+
+/**
+ * Parse Tailwind config file and extract custom color definitions
+ * Handles both JS and TS config formats
+ */
+export function parseTailwindConfig(configPath: string, projectRoot: string): Record<string, string> {
+  const colors: Record<string, string> = {};
+  
+  const fullPath = path.join(projectRoot, configPath);
+  if (!fs.existsSync(fullPath)) {
+    return colors;
+  }
+  
+  try {
+    const content = fs.readFileSync(fullPath, "utf-8");
+    
+    // Extract color definitions from the config
+    // This is a simplified parser that handles common patterns
+    
+    // Pattern 1: colors: { name: "value" } or colors: { name: { DEFAULT: "value" } }
+    const colorBlockMatch = content.match(/colors\s*:\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+    if (colorBlockMatch) {
+      const colorBlock = colorBlockMatch[1];
+      
+      // Simple key-value pairs: name: "value" or name: 'value'
+      const simpleColorRegex = /(\w+[-\w]*)\s*:\s*["']([^"']+)["']/g;
+      let match;
+      while ((match = simpleColorRegex.exec(colorBlock)) !== null) {
+        colors[match[1]] = match[2];
+      }
+      
+      // Nested objects with DEFAULT: name: { DEFAULT: "value" }
+      const nestedColorRegex = /(\w+[-\w]*)\s*:\s*\{\s*DEFAULT\s*:\s*["']([^"']+)["']/g;
+      while ((match = nestedColorRegex.exec(colorBlock)) !== null) {
+        colors[match[1]] = match[2];
+      }
+    }
+    
+    // Pattern 2: extend: { colors: { ... } }
+    const extendColorMatch = content.match(/extend\s*:\s*\{[^}]*colors\s*:\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+    if (extendColorMatch) {
+      const extendBlock = extendColorMatch[1];
+      
+      const simpleColorRegex = /(\w+[-\w]*)\s*:\s*["']([^"']+)["']/g;
+      let match;
+      while ((match = simpleColorRegex.exec(extendBlock)) !== null) {
+        colors[match[1]] = match[2];
+      }
+      
+      // CSS variable references: name: "var(--name)" or "hsl(var(--name))"
+      const varRefRegex = /(\w+[-\w]*)\s*:\s*["'](?:hsl\()?var\(--([^)]+)\)(?:\))?["']/g;
+      while ((match = varRefRegex.exec(extendBlock)) !== null) {
+        colors[match[1]] = `var(--${match[2]})`;
+      }
+    }
+    
+  } catch (error) {
+    // Silently fail - config parsing is best-effort
+    console.warn(`[Theme Discovery] Failed to parse Tailwind config: ${error}`);
+  }
+  
+  return colors;
+}
+
+/**
+ * Extract available semantic tokens from CSS content
+ * Finds class-like patterns that suggest available Tailwind/utility classes
+ */
+export function extractAvailableTokens(cssVariables: Record<string, string>): string[] {
+  const tokens: string[] = [];
+  
+  // Generate bg-* and text-* tokens from CSS variable names
+  for (const varName of Object.keys(cssVariables)) {
+    // Remove -- prefix
+    const name = varName.replace(/^--/, "");
+    
+    // Skip numeric or utility variables
+    if (/^\d/.test(name) || name.includes("radius") || name.includes("shadow")) {
+      continue;
+    }
+    
+    // Common color-related variable patterns
+    if (
+      name.includes("background") ||
+      name.includes("foreground") ||
+      name.includes("primary") ||
+      name.includes("secondary") ||
+      name.includes("accent") ||
+      name.includes("muted") ||
+      name.includes("destructive") ||
+      name.includes("success") ||
+      name.includes("warning") ||
+      name.includes("border") ||
+      name.includes("ring") ||
+      name.includes("card") ||
+      name.includes("popover")
+    ) {
+      // Add as potential class token
+      tokens.push(name);
+    }
+  }
+  
+  // Always include common utility tokens
+  const commonTokens = [
+    "text-white",
+    "text-black",
+    "bg-white",
+    "bg-black",
+    "bg-transparent",
+  ];
+  
+  return [...new Set([...tokens, ...commonTokens])];
+}
+
+/**
+ * Analyze CSS variables to identify contrast relationships
+ * Returns warnings about potentially problematic color combinations
+ */
+export function analyzeContrastRelationships(
+  cssVariables: Record<string, string>
+): { warnings: string[]; goodPairs: { bg: string; text: string }[] } {
+  const warnings: string[] = [];
+  const goodPairs: { bg: string; text: string }[] = [];
+  
+  // Common pattern: --{name} is background, --{name}-foreground is text
+  // Check if foreground values look like they might have contrast issues
+  
+  for (const [varName, value] of Object.entries(cssVariables)) {
+    // Skip if this is a foreground variable
+    if (varName.includes("foreground")) continue;
+    
+    const baseName = varName.replace(/^--/, "");
+    const foregroundVar = `--${baseName}-foreground`;
+    
+    if (cssVariables[foregroundVar]) {
+      const bgValue = value;
+      const fgValue = cssVariables[foregroundVar];
+      
+      // Simple heuristic: if both values reference same color or are similar
+      // This is a basic check - real contrast would need color parsing
+      if (bgValue === fgValue) {
+        warnings.push(
+          `WARNING: ${varName} and ${foregroundVar} have identical values - text will be invisible`
+        );
+      }
+      
+      // Add as a known pair (user should verify contrast)
+      goodPairs.push({
+        bg: `bg-${baseName}`,
+        text: `text-${baseName}-foreground`,
+      });
+    }
+  }
+  
+  return { warnings, goodPairs };
+}
+
+/**
+ * Main entry point: Discover theme from a project
+ */
+export async function discoverTheme(projectRoot: string): Promise<DiscoveredTheme> {
+  const result: DiscoveredTheme = {
+    cssVariables: {},
+    tailwindColors: {},
+    availableTokens: [],
+    rawThemeCSS: "",
+    discoveredFiles: [],
+  };
+  
+  // Find theme files
+  const themeFiles = findThemeFiles(projectRoot);
+  result.discoveredFiles = themeFiles;
+  
+  // Parse each file
+  for (const file of themeFiles) {
+    const fullPath = path.join(projectRoot, file);
+    
+    try {
+      if (file.endsWith(".css")) {
+        const content = fs.readFileSync(fullPath, "utf-8");
+        
+        // Accumulate raw CSS
+        result.rawThemeCSS += `\n/* === ${file} === */\n${content}\n`;
+        
+        // Parse variables
+        const variables = parseCSSVariables(content);
+        Object.assign(result.cssVariables, variables);
+        
+      } else if (file.includes("tailwind.config")) {
+        // Parse Tailwind config
+        const colors = parseTailwindConfig(file, projectRoot);
+        Object.assign(result.tailwindColors, colors);
+      }
+    } catch (error) {
+      console.warn(`[Theme Discovery] Error reading ${file}:`, error);
+    }
+  }
+  
+  // Extract available tokens
+  result.availableTokens = extractAvailableTokens(result.cssVariables);
+  
+  return result;
+}
+
+/**
+ * Format discovered theme as context for the LLM prompt
+ */
+export function formatThemeForPrompt(theme: DiscoveredTheme): string {
+  const lines: string[] = [];
+  
+  lines.push("**TARGET CODEBASE THEME (discovered):**");
+  lines.push("");
+  
+  // CSS Variables
+  if (Object.keys(theme.cssVariables).length > 0) {
+    lines.push("CSS Variables:");
+    
+    // Group by category
+    const categories: Record<string, string[]> = {
+      colors: [],
+      other: [],
+    };
+    
+    for (const [name, value] of Object.entries(theme.cssVariables)) {
+      const entry = `  ${name}: ${value}`;
+      if (
+        name.includes("background") ||
+        name.includes("foreground") ||
+        name.includes("primary") ||
+        name.includes("secondary") ||
+        name.includes("accent") ||
+        name.includes("muted") ||
+        name.includes("destructive") ||
+        name.includes("success") ||
+        name.includes("warning") ||
+        name.includes("border") ||
+        name.includes("card")
+      ) {
+        categories.colors.push(entry);
+      } else {
+        categories.other.push(entry);
+      }
+    }
+    
+    // Only include color-related variables (most relevant for styling)
+    lines.push(...categories.colors.slice(0, 30)); // Limit to avoid prompt bloat
+    
+    if (categories.colors.length > 30) {
+      lines.push(`  ... and ${categories.colors.length - 30} more color variables`);
+    }
+    lines.push("");
+  }
+  
+  // Tailwind Colors
+  if (Object.keys(theme.tailwindColors).length > 0) {
+    lines.push("Tailwind Custom Colors:");
+    for (const [name, value] of Object.entries(theme.tailwindColors)) {
+      lines.push(`  ${name}: ${value}`);
+    }
+    lines.push("");
+  }
+  
+  // Available Tokens
+  if (theme.availableTokens.length > 0) {
+    lines.push(`Available Semantic Tokens: ${theme.availableTokens.slice(0, 20).join(", ")}`);
+    if (theme.availableTokens.length > 20) {
+      lines.push(`  ... and ${theme.availableTokens.length - 20} more`);
+    }
+    lines.push("");
+  }
+  
+  // Discovered Files
+  if (theme.discoveredFiles.length > 0) {
+    lines.push(`Theme Files Found: ${theme.discoveredFiles.join(", ")}`);
+  }
+  
+  return lines.join("\n");
+}
+

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

@@ -2,6 +2,7 @@ import { NextResponse } from "next/server";
 import * as fs from "fs";
 import * as path from "path";
 import Anthropic from "@anthropic-ai/sdk";
+import { discoverTheme, formatThemeForPrompt } from "../sonance-vision-apply/theme-discovery";
 
 /**
  * Sonance DevTools API - Vision Mode Editor
@@ -469,10 +470,47 @@ Return search/replace patches (NOT full files). The system applies your patches
 - CRITICAL: NEVER invent or guess code. Your "search" string MUST be copied EXACTLY from the provided file content. If you cannot find the exact code to modify, return an empty modifications array.
 - If the file content appears truncated, only modify code that is visible in the provided content.
 
-**SONANCE BRAND COLORS:**
-- Charcoal: #333F48 (primary text)
-- IPORT Orange: #FC4C02
-- Blaze Blue: #00A3E1
+═══════════════════════════════════════════════════════════════════════════════
+SONANCE BRAND COLOR SYSTEM
+═══════════════════════════════════════════════════════════════════════════════
+
+**Core Colors:**
+- Primary (Charcoal): #333F48 - main text, dark backgrounds
+- Accent (Cyan "The Beam"): #00D3C8 - highlights, interactive elements, CTAs
+- Success: Green tones - positive states, confirmations
+- Warning: Amber/Orange tones - caution states, alerts
+- Destructive: Red tones - errors, delete actions
+
+**CRITICAL CONTRAST RULES:**
+When using colored backgrounds, ALWAYS use high-contrast text:
+
+| Background        | Use This Text                      | NEVER Use              |
+|-------------------|------------------------------------|-----------------------|
+| bg-accent         | text-white                         | text-accent-foreground |
+| bg-primary        | text-primary-foreground, text-white | text-primary          |
+| bg-success        | text-white                         | text-success          |
+| bg-warning        | text-white                         | text-warning          |
+| bg-destructive    | text-white                         | text-destructive      |
+
+**SEMANTIC TOKEN PATTERNS:**
+- text-{color} = the color itself (use on NEUTRAL backgrounds like white/gray)
+- text-{color}-foreground = INTENDED for text on {color} backgrounds, but MAY have contrast issues
+- bg-{color} = background in that color
+- WHEN IN DOUBT: Use text-white on any colored background for guaranteed contrast
+
+**BUTTON PATTERNS (Sonance Standard):**
+- Primary CTA: bg-primary text-primary-foreground
+- Accent/Highlight: bg-accent text-white (NOT text-accent-foreground)
+- Success: bg-success text-white
+- Warning: bg-warning text-white
+- Destructive: bg-destructive text-white
+- Outlined: border-border bg-transparent text-foreground
+
+**COMMON MISTAKES TO AVOID:**
+- WRONG: bg-accent text-accent-foreground (accent-foreground is often dark = invisible text)
+- RIGHT: bg-accent text-white (white text on cyan = visible)
+- WRONG: bg-primary text-primary (same color = invisible)
+- RIGHT: bg-primary text-primary-foreground OR text-white
 
 **RESPONSE FORMAT:**
 CRITICAL: Return ONLY the JSON object below. Do NOT include any text, explanation, or thinking before or after the JSON. No preamble. No "Looking at the screenshot..." No markdown code blocks. Just raw JSON:
@@ -675,7 +713,7 @@ export async function POST(request: Request) {
       const TOTAL_CONTEXT_BUDGET = 500000; // 500k chars total budget
       const MAX_RECOMMENDED_FILE = Infinity; // NEVER truncate the target file - AI needs full context
       const MAX_PAGE_FILE = 2000; // Page file is just a wrapper
-      const MAX_GLOBALS_CSS = 1500;
+      const MAX_GLOBALS_CSS = 15000; // Increased to capture full theme definitions
       const MAX_FILES = 25;
       
       let usedContext = 0;
@@ -769,6 +807,25 @@ ${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
         }
       }
 
+      // ========== THEME DISCOVERY ==========
+      // Dynamically discover theme tokens from the target codebase
+      const discoveredTheme = await discoverTheme(projectRoot);
+      const themeContext = formatThemeForPrompt(discoveredTheme);
+      
+      if (discoveredTheme.discoveredFiles.length > 0) {
+        textContent += `
+═══════════════════════════════════════════════════════════════════════════════
+${themeContext}
+═══════════════════════════════════════════════════════════════════════════════
+
+`;
+        debugLog("Theme discovery complete", {
+          filesFound: discoveredTheme.discoveredFiles,
+          cssVariableCount: Object.keys(discoveredTheme.cssVariables).length,
+          tailwindColorCount: Object.keys(discoveredTheme.tailwindColors).length,
+        });
+      }
+
       // ========== GLOBALS CSS ==========
       const globalsTruncated = pageContext.globalsCSS.substring(0, MAX_GLOBALS_CSS);
       textContent += `

package/package.json

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