sonance-brand-mcp 1.3.19 → 1.3.20

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

@@ -0,0 +1,532 @@
+import { NextResponse } from "next/server";
+import * as fs from "fs";
+import * as path from "path";
+import Anthropic from "@anthropic-ai/sdk";
+
+/**
+ * Sonance DevTools API - Vision Mode Editor
+ *
+ * Uses Claude's vision capabilities to understand page screenshots and modify
+ * multiple files based on natural language requests.
+ *
+ * Supports actions:
+ * - "edit": Analyze screenshot + code context, generate multi-file modifications
+ * - "save": Write all modified files to disk
+ *
+ * DEVELOPMENT ONLY.
+ */
+
+interface VisionFocusedElement {
+  name: string;
+  type: string;
+  variantId?: string;
+  coordinates: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  description?: string;
+}
+
+interface VisionFileModification {
+  filePath: string;
+  originalContent: string;
+  modifiedContent: string;
+  diff: string;
+  explanation: string;
+  previewCSS?: string;
+}
+
+interface VisionEditRequest {
+  action: "edit" | "save";
+  screenshot?: string;
+  pageRoute: string;
+  userPrompt: string;
+  focusedElements?: VisionFocusedElement[];
+  modifications?: VisionFileModification[];
+}
+
+interface VisionEditResponse {
+  success: boolean;
+  modifications?: VisionFileModification[];
+  aggregatedPreviewCSS?: string;
+  explanation?: string;
+  reasoning?: string;
+  error?: string;
+}
+
+const VISION_SYSTEM_PROMPT = `You are a React/Tailwind CSS expert with vision capabilities for the Sonance brand system.
+
+You can see screenshots of web pages and understand their visual layout, then modify code to implement requested changes.
+
+═══════════════════════════════════════════════════════════════════════════════
+CRITICAL RULES
+═══════════════════════════════════════════════════════════════════════════════
+
+**ANALYSIS:**
+1. CAREFULLY analyze the screenshot to understand the current visual state
+2. Identify elements mentioned in the user's request
+3. Understand the current styling and layout
+4. Consider how changes will affect the overall design
+
+**PRESERVATION RULES:**
+5. NEVER delete or remove existing content, children, or JSX elements
+6. NEVER change component structure unless specifically requested
+7. NEVER modify TypeScript types, imports, or exports unless necessary
+8. NEVER remove data-sonance-* attributes
+
+**CHANGE RULES:**
+9. Make ONLY the changes requested by the user
+10. Modify the minimum amount of code necessary
+11. Use semantic Tailwind classes (bg-primary, text-foreground, etc.)
+12. Maintain dark mode compatibility with CSS variables
+13. Keep the cn() utility for className merging
+
+**SONANCE BRAND COLORS:**
+- Charcoal: #333F48, #343D46 (primary)
+- Silver: #E2E2E2, #D1D1D6 (secondary)
+- IPORT Orange: #FC4C02
+- IPORT Dark: #0F161D
+- Blaze Blue: #00A3E1
+- Blaze Red: #C02B0A
+
+**RESPONSE FORMAT:**
+Return ONLY a valid JSON object. Do not include any conversational text before or after the JSON.
+The JSON must include:
+- "reasoning": Brief explanation of what you see in the screenshot and your plan
+- "modifications": Array of file modifications, each with:
+  - "filePath": Path to the file
+  - "modifiedContent": Complete updated file content
+  - "explanation": What changed in this file
+  - "previewCSS": CSS for live preview (use [data-sonance-name="ComponentName"] selectors)
+- "aggregatedPreviewCSS": Combined CSS for all changes
+- "explanation": Overall summary of changes`;
+
+export async function POST(request: Request) {
+  // Only allow in development
+  if (process.env.NODE_ENV !== "development") {
+    return NextResponse.json(
+      { error: "Vision edit is only available in development mode" },
+      { status: 403 }
+    );
+  }
+
+  try {
+    const body: VisionEditRequest = await request.json();
+    const { action, screenshot, pageRoute, userPrompt, focusedElements, modifications } = body;
+
+    const projectRoot = process.cwd();
+
+    // Handle save action - write all modified files
+    if (action === "save") {
+      if (!modifications || modifications.length === 0) {
+        return NextResponse.json(
+          { error: "modifications array is required for save action" },
+          { status: 400 }
+        );
+      }
+
+      // Create backups first
+      const backups: { filePath: string; content: string }[] = [];
+      for (const mod of modifications) {
+        const fullPath = path.join(projectRoot, mod.filePath);
+        if (fs.existsSync(fullPath)) {
+          backups.push({
+            filePath: mod.filePath,
+            content: fs.readFileSync(fullPath, "utf-8"),
+          });
+        }
+      }
+
+      try {
+        // Write all files
+        for (const mod of modifications) {
+          const fullPath = path.join(projectRoot, mod.filePath);
+
+          // Validate path is within project
+          if (!fullPath.startsWith(projectRoot)) {
+            throw new Error(`Invalid file path: ${mod.filePath}`);
+          }
+
+          fs.writeFileSync(fullPath, mod.modifiedContent, "utf-8");
+        }
+
+        return NextResponse.json({
+          success: true,
+          message: `Successfully updated ${modifications.length} file(s)`,
+        });
+      } catch (writeError) {
+        // Rollback on error
+        for (const backup of backups) {
+          try {
+            const fullPath = path.join(projectRoot, backup.filePath);
+            fs.writeFileSync(fullPath, backup.content, "utf-8");
+          } catch {
+            console.error(`Failed to rollback ${backup.filePath}`);
+          }
+        }
+        throw writeError;
+      }
+    }
+
+    // Handle edit action (Vision AI modification)
+    if (action === "edit") {
+      if (!userPrompt) {
+        return NextResponse.json(
+          { error: "userPrompt is required for edit action" },
+          { status: 400 }
+        );
+      }
+
+      // Check for API key
+      const apiKey = process.env.NEXT_PUBLIC_CLAUDE_API_KEY;
+      if (!apiKey) {
+        return NextResponse.json(
+          { error: "NEXT_PUBLIC_CLAUDE_API_KEY not configured. Add it to your .env.local file." },
+          { status: 500 }
+        );
+      }
+
+      // Gather page context
+      const pageContext = gatherPageContext(pageRoute, projectRoot);
+
+      // Build user message with vision
+      const messageContent: Anthropic.MessageCreateParams["messages"][0]["content"] = [];
+
+      // Add screenshot if provided
+      if (screenshot) {
+        const base64Data = screenshot.split(",")[1] || screenshot;
+        messageContent.push({
+          type: "image",
+          source: {
+            type: "base64",
+            media_type: "image/png",
+            data: base64Data,
+          },
+        });
+      }
+
+      // Build text content
+      let textContent = `VISION MODE EDIT REQUEST
+
+Page Route: ${pageRoute}
+User Request: "${userPrompt}"
+
+`;
+
+      if (focusedElements && focusedElements.length > 0) {
+        textContent += `FOCUSED ELEMENTS (user clicked on these):
+${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}, ${el.coordinates.y})`).join("\n")}
+
+`;
+      }
+
+      textContent += `PAGE CONTEXT:
+
+Page File: ${pageContext.pageFile || "Not found"}
+${pageContext.pageContent ? `\`\`\`tsx\n${pageContext.pageContent}\n\`\`\`` : ""}
+
+`;
+
+      if (pageContext.componentSources.length > 0) {
+        textContent += `IMPORTED COMPONENTS:\n`;
+        for (const comp of pageContext.componentSources) {
+          textContent += `
+File: ${comp.path}
+\`\`\`tsx
+${comp.content.substring(0, 3000)}${comp.content.length > 3000 ? "\n// ... (truncated)" : ""}
+\`\`\`
+`;
+        }
+      }
+
+      textContent += `
+GLOBALS.CSS (relevant theme variables):
+\`\`\`css
+${pageContext.globalsCSS.substring(0, 2000)}${pageContext.globalsCSS.length > 2000 ? "\n/* ... (truncated) */" : ""}
+\`\`\`
+
+INSTRUCTIONS:
+1. Look at the screenshot and identify elements mentioned in the user's request
+2. Review the code to understand current implementation
+3. Determine which files need modifications
+4. Generate complete modified code for each file
+5. Provide previewCSS for immediate visual feedback
+6. Return as JSON in the specified format`;
+
+      messageContent.push({
+        type: "text",
+        text: textContent,
+      });
+
+      // Call Claude Vision API
+      const anthropic = new Anthropic({ apiKey });
+
+      const response = await anthropic.messages.create({
+        model: "claude-sonnet-4-20250514",
+        max_tokens: 16384,
+        messages: [
+          {
+            role: "user",
+            content: messageContent,
+          },
+        ],
+        system: VISION_SYSTEM_PROMPT,
+      });
+
+      // Extract text content from response
+      const textResponse = response.content.find((block) => block.type === "text");
+      if (!textResponse || textResponse.type !== "text") {
+        return NextResponse.json(
+          { error: "No text response from AI" },
+          { status: 500 }
+        );
+      }
+
+      // Parse AI response
+      let aiResponse: {
+        reasoning?: string;
+        modifications: Array<{
+          filePath: string;
+          modifiedContent: string;
+          explanation: string;
+          previewCSS?: string;
+        }>;
+        aggregatedPreviewCSS?: string;
+        explanation?: string;
+      };
+
+      try {
+        let jsonText = textResponse.text.trim();
+        
+        // Try to extract JSON from markdown code blocks
+        const jsonMatch = jsonText.match(/```json\n([\s\S]*?)\n```/) || 
+                         jsonText.match(/```\n([\s\S]*?)\n```/);
+        
+        if (jsonMatch) {
+          jsonText = jsonMatch[1];
+        } else if (jsonText.includes("```json")) {
+            // Fallback for cases where regex might miss due to newlines
+            const start = jsonText.indexOf("```json") + 7;
+            const end = jsonText.lastIndexOf("```");
+            if (end > start) {
+                jsonText = jsonText.substring(start, end);
+            }
+        }
+
+        // Clean up any remaining whitespace
+        jsonText = jsonText.trim();
+        
+        aiResponse = JSON.parse(jsonText);
+      } catch {
+        console.error("Failed to parse AI response:", textResponse.text);
+        return NextResponse.json(
+          { error: "Failed to parse AI response. Please try again." },
+          { status: 500 }
+        );
+      }
+
+      // Read original content and generate diffs for each modification
+      const modificationsWithOriginals: VisionFileModification[] = [];
+      for (const mod of aiResponse.modifications || []) {
+        const fullPath = path.join(projectRoot, mod.filePath);
+        let originalContent = "";
+        if (fs.existsSync(fullPath)) {
+          originalContent = fs.readFileSync(fullPath, "utf-8");
+        }
+
+        modificationsWithOriginals.push({
+          filePath: mod.filePath,
+          originalContent,
+          modifiedContent: mod.modifiedContent,
+          diff: generateSimpleDiff(originalContent, mod.modifiedContent),
+          explanation: mod.explanation,
+          previewCSS: mod.previewCSS,
+        });
+      }
+
+      // Aggregate preview CSS
+      const aggregatedCSS = modificationsWithOriginals
+        .filter((m) => m.previewCSS)
+        .map((m) => `/* ${m.filePath} */\n${m.previewCSS}`)
+        .join("\n\n");
+
+      return NextResponse.json({
+        success: true,
+        modifications: modificationsWithOriginals,
+        aggregatedPreviewCSS: aiResponse.aggregatedPreviewCSS || aggregatedCSS,
+        explanation: aiResponse.explanation,
+        reasoning: aiResponse.reasoning,
+      } as VisionEditResponse);
+    }
+
+    return NextResponse.json(
+      { error: "Invalid action. Use 'edit' or 'save'." },
+      { status: 400 }
+    );
+  } catch (error) {
+    console.error("Vision edit error:", error);
+    return NextResponse.json(
+      { error: "Failed to process request", details: String(error) },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * Gather context about the current page for AI analysis
+ */
+function gatherPageContext(
+  pageRoute: string,
+  projectRoot: string
+): {
+  pageFile: string | null;
+  pageContent: string;
+  componentSources: { path: string; content: string }[];
+  globalsCSS: string;
+} {
+  // Map route to page file
+  const pageFile = discoverPageFile(pageRoute, projectRoot);
+  let pageContent = "";
+  const componentSources: { path: string; content: string }[] = [];
+
+  if (pageFile) {
+    const fullPath = path.join(projectRoot, pageFile);
+    if (fs.existsSync(fullPath)) {
+      pageContent = fs.readFileSync(fullPath, "utf-8");
+
+      // Extract imports and read component files
+      const imports = extractImports(pageContent);
+      for (const importPath of imports) {
+        const resolvedPath = resolveImportPath(importPath, pageFile, projectRoot);
+        if (resolvedPath && fs.existsSync(path.join(projectRoot, resolvedPath))) {
+          try {
+            const content = fs.readFileSync(path.join(projectRoot, resolvedPath), "utf-8");
+            componentSources.push({ path: resolvedPath, content });
+          } catch {
+            // Skip files that can't be read
+          }
+        }
+      }
+    }
+  }
+
+  // Read globals.css
+  let globalsCSS = "";
+  const globalsPath = path.join(projectRoot, "src/app/globals.css");
+  if (fs.existsSync(globalsPath)) {
+    globalsCSS = fs.readFileSync(globalsPath, "utf-8");
+  }
+
+  return { pageFile, pageContent, componentSources, globalsCSS };
+}
+
+/**
+ * Discover the page file for a given route
+ */
+function discoverPageFile(route: string, projectRoot: string): string | null {
+  // Handle root route
+  if (route === "/" || route === "") {
+    const rootPage = "src/app/page.tsx";
+    if (fs.existsSync(path.join(projectRoot, rootPage))) {
+      return rootPage;
+    }
+    return null;
+  }
+
+  // Remove leading slash
+  const cleanRoute = route.replace(/^\//, "");
+
+  // Try different patterns
+  const patterns = [
+    `src/app/${cleanRoute}/page.tsx`,
+    `src/app/${cleanRoute}/page.jsx`,
+    `src/app/${cleanRoute}.tsx`,
+  ];
+
+  for (const pattern of patterns) {
+    if (fs.existsSync(path.join(projectRoot, pattern))) {
+      return pattern;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Extract import paths from file content
+ */
+function extractImports(content: string): string[] {
+  const importRegex = /import\s+.*?\s+from\s+["'](@\/components\/[^"']+|\.\.?\/[^"']+)["']/g;
+  const imports: string[] = [];
+  let match;
+
+  while ((match = importRegex.exec(content)) !== null) {
+    imports.push(match[1]);
+  }
+
+  return imports;
+}
+
+/**
+ * Resolve an import path to a file system path
+ */
+function resolveImportPath(
+  importPath: string,
+  fromFile: string,
+  projectRoot: string
+): string | null {
+  // Handle @ alias (maps to src/)
+  if (importPath.startsWith("@/")) {
+    const resolved = importPath.replace("@/", "src/");
+    // Try with .tsx extension
+    const withExt = resolved.endsWith(".tsx") ? resolved : `${resolved}.tsx`;
+    if (fs.existsSync(path.join(projectRoot, withExt))) {
+      return withExt;
+    }
+    // Try as directory with index
+    const indexPath = `${resolved}/index.tsx`;
+    if (fs.existsSync(path.join(projectRoot, indexPath))) {
+      return indexPath;
+    }
+    return withExt; // Return even if not found for context
+  }
+
+  // Handle relative imports
+  if (importPath.startsWith(".")) {
+    const dir = path.dirname(fromFile);
+    const resolved = path.join(dir, importPath);
+    const withExt = resolved.endsWith(".tsx") ? resolved : `${resolved}.tsx`;
+    return withExt;
+  }
+
+  return null;
+}
+
+/**
+ * Generate a simple unified diff between two strings
+ */
+function generateSimpleDiff(original: string, modified: string): string {
+  const originalLines = original.split("\n");
+  const modifiedLines = modified.split("\n");
+
+  const diff: string[] = [];
+  const maxLines = Math.max(originalLines.length, modifiedLines.length);
+
+  for (let i = 0; i < maxLines; i++) {
+    const origLine = originalLines[i];
+    const modLine = modifiedLines[i];
+
+    if (origLine === undefined && modLine !== undefined) {
+      diff.push(`+ ${modLine}`);
+    } else if (origLine !== undefined && modLine === undefined) {
+      diff.push(`- ${origLine}`);
+    } else if (origLine !== modLine) {
+      diff.push(`- ${origLine}`);
+      diff.push(`+ ${modLine}`);
+    }
+  }
+
+  return diff.join("\n");
+}

package/dist/index.js

@@ -356,6 +356,12 @@ function runDevToolsInstaller() {
     const apiAssetsDir = path.join(targetDir, baseDir, "app/api/sonance-assets");
     const apiInjectIdDir = path.join(targetDir, baseDir, "app/api/sonance-inject-id");
     const apiAnalyzeDir = path.join(targetDir, baseDir, "app/api/sonance-analyze");
+    const apiVisionApplyDir = path.join(targetDir, baseDir, "app/api/sonance-vision-apply");
+    const apiVisionEditDir = path.join(targetDir, baseDir, "app/api/sonance-vision-edit");
+    const apiAiEditDir = path.join(targetDir, baseDir, "app/api/sonance-ai-edit");
+    const apiSaveColorsDir = path.join(targetDir, baseDir, "app/api/sonance-save-colors");
+    const apiComponentSourceDir = path.join(targetDir, baseDir, "app/api/sonance-component-source");
+    const apiFindComponentDir = path.join(targetDir, baseDir, "app/api/sonance-find-component");
     const themeDir = path.join(targetDir, baseDir, "theme");
     // Source resolution
     let sourceBrandSystem;
@@ -369,6 +375,12 @@ function runDevToolsInstaller() {
     let sourceApiAssets;
     let sourceApiInjectId;
     let sourceApiAnalyze;
+    let sourceApiVisionApply;
+    let sourceApiVisionEdit;
+    let sourceApiAiEdit;
+    let sourceApiSaveColors;
+    let sourceApiComponentSource;
+    let sourceApiFindComponent;
     if (IS_BUNDLED) {
         sourceBrandSystem = path.join(BUNDLED_ASSETS, "brand-system.ts");
         sourceBrandContext = path.join(BUNDLED_ASSETS, "brand-context.tsx");
@@ -381,6 +393,12 @@ function runDevToolsInstaller() {
         sourceApiAssets = path.join(BUNDLED_ASSETS, "api/sonance-assets/route.ts");
         sourceApiInjectId = path.join(BUNDLED_ASSETS, "api/sonance-inject-id/route.ts");
         sourceApiAnalyze = path.join(BUNDLED_ASSETS, "api/sonance-analyze/route.ts");
+        sourceApiVisionApply = path.join(BUNDLED_ASSETS, "api/sonance-vision-apply/route.ts");
+        sourceApiVisionEdit = path.join(BUNDLED_ASSETS, "api/sonance-vision-edit/route.ts");
+        sourceApiAiEdit = path.join(BUNDLED_ASSETS, "api/sonance-ai-edit/route.ts");
+        sourceApiSaveColors = path.join(BUNDLED_ASSETS, "api/sonance-save-colors/route.ts");
+        sourceApiComponentSource = path.join(BUNDLED_ASSETS, "api/sonance-component-source/route.ts");
+        sourceApiFindComponent = path.join(BUNDLED_ASSETS, "api/sonance-find-component/route.ts");
     }
     else {
         sourceBrandSystem = path.join(DEV_PROJECT_ROOT, "src/lib/brand-system.ts");
@@ -394,6 +412,12 @@ function runDevToolsInstaller() {
         sourceApiAssets = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-assets/route.ts");
         sourceApiInjectId = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-inject-id/route.ts");
         sourceApiAnalyze = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-analyze/route.ts");
+        sourceApiVisionApply = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-apply/route.ts");
+        sourceApiVisionEdit = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-edit/route.ts");
+        sourceApiAiEdit = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-ai-edit/route.ts");
+        sourceApiSaveColors = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-save-colors/route.ts");
+        sourceApiComponentSource = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-component-source/route.ts");
+        sourceApiFindComponent = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-find-component/route.ts");
     }
     // Verify sources exist
     if (!fs.existsSync(sourceBrandSystem)) {
@@ -530,6 +554,49 @@ function runDevToolsInstaller() {
     fs.copyFileSync(sourceApiAnalyze, path.join(apiAnalyzeDir, "route.ts"));
     createdFiles.push(`${pathPrefix}app/api/sonance-analyze/route.ts`);
     console.log(`  ✓ Created ${pathPrefix}app/api/sonance-analyze/route.ts`);
+    // 10. Install Vision and AI API routes
+    if (!fs.existsSync(apiVisionApplyDir)) {
+        fs.mkdirSync(apiVisionApplyDir, { recursive: true });
+    }
+    createdDirectories.push(`${pathPrefix}app/api/sonance-vision-apply`);
+    fs.copyFileSync(sourceApiVisionApply, path.join(apiVisionApplyDir, "route.ts"));
+    createdFiles.push(`${pathPrefix}app/api/sonance-vision-apply/route.ts`);
+    console.log(`  ✓ Created ${pathPrefix}app/api/sonance-vision-apply/route.ts`);
+    if (!fs.existsSync(apiVisionEditDir)) {
+        fs.mkdirSync(apiVisionEditDir, { recursive: true });
+    }
+    createdDirectories.push(`${pathPrefix}app/api/sonance-vision-edit`);
+    fs.copyFileSync(sourceApiVisionEdit, path.join(apiVisionEditDir, "route.ts"));
+    createdFiles.push(`${pathPrefix}app/api/sonance-vision-edit/route.ts`);
+    console.log(`  ✓ Created ${pathPrefix}app/api/sonance-vision-edit/route.ts`);
+    if (!fs.existsSync(apiAiEditDir)) {
+        fs.mkdirSync(apiAiEditDir, { recursive: true });
+    }
+    createdDirectories.push(`${pathPrefix}app/api/sonance-ai-edit`);
+    fs.copyFileSync(sourceApiAiEdit, path.join(apiAiEditDir, "route.ts"));
+    createdFiles.push(`${pathPrefix}app/api/sonance-ai-edit/route.ts`);
+    console.log(`  ✓ Created ${pathPrefix}app/api/sonance-ai-edit/route.ts`);
+    if (!fs.existsSync(apiSaveColorsDir)) {
+        fs.mkdirSync(apiSaveColorsDir, { recursive: true });
+    }
+    createdDirectories.push(`${pathPrefix}app/api/sonance-save-colors`);
+    fs.copyFileSync(sourceApiSaveColors, path.join(apiSaveColorsDir, "route.ts"));
+    createdFiles.push(`${pathPrefix}app/api/sonance-save-colors/route.ts`);
+    console.log(`  ✓ Created ${pathPrefix}app/api/sonance-save-colors/route.ts`);
+    if (!fs.existsSync(apiComponentSourceDir)) {
+        fs.mkdirSync(apiComponentSourceDir, { recursive: true });
+    }
+    createdDirectories.push(`${pathPrefix}app/api/sonance-component-source`);
+    fs.copyFileSync(sourceApiComponentSource, path.join(apiComponentSourceDir, "route.ts"));
+    createdFiles.push(`${pathPrefix}app/api/sonance-component-source/route.ts`);
+    console.log(`  ✓ Created ${pathPrefix}app/api/sonance-component-source/route.ts`);
+    if (!fs.existsSync(apiFindComponentDir)) {
+        fs.mkdirSync(apiFindComponentDir, { recursive: true });
+    }
+    createdDirectories.push(`${pathPrefix}app/api/sonance-find-component`);
+    fs.copyFileSync(sourceApiFindComponent, path.join(apiFindComponentDir, "route.ts"));
+    createdFiles.push(`${pathPrefix}app/api/sonance-find-component/route.ts`);
+    console.log(`  ✓ Created ${pathPrefix}app/api/sonance-find-component/route.ts`);
     // 11. Install brand-overrides.css for production logo sizing
     if (!fs.existsSync(stylesDir)) {
         fs.mkdirSync(stylesDir, { recursive: true });

package/package.json

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