sonance-brand-mcp 1.3.19 → 1.3.20

package/dist/assets/api/sonance-find-component/route.ts

@@ -0,0 +1,174 @@
+import { NextResponse } from "next/server";
+import * as fs from "fs";
+import * as path from "path";
+
+/**
+ * Sonance DevTools API - Dynamic Component File Discovery
+ *
+ * Searches the filesystem to find the source file for a given component type.
+ * This enables the AI editor to work with any project structure.
+ *
+ * DEVELOPMENT ONLY.
+ */
+
+// Common component directory patterns (in priority order)
+const SEARCH_PATTERNS = [
+  "src/components/ui",
+  "src/components",
+  "components/ui",
+  "components",
+  "app/components/ui",
+  "app/components",
+  "src/app/components",
+];
+
+// File extensions to try
+const EXTENSIONS = [".tsx", ".jsx", ".ts", ".js"];
+
+/**
+ * Recursively search for a file matching the component name
+ */
+function findFileRecursive(
+  dir: string,
+  fileName: string,
+  maxDepth: number = 3,
+  currentDepth: number = 0
+): string | null {
+  if (currentDepth > maxDepth) return null;
+
+  try {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+    // First, check for direct matches in this directory
+    for (const ext of EXTENSIONS) {
+      const targetFile = `${fileName}${ext}`;
+      const match = entries.find(
+        (e) => e.isFile() && e.name.toLowerCase() === targetFile.toLowerCase()
+      );
+      if (match) {
+        return path.join(dir, match.name);
+      }
+    }
+
+    // Then recurse into subdirectories
+    for (const entry of entries) {
+      if (entry.isDirectory() && !entry.name.startsWith(".") && entry.name !== "node_modules") {
+        const result = findFileRecursive(
+          path.join(dir, entry.name),
+          fileName,
+          maxDepth,
+          currentDepth + 1
+        );
+        if (result) return result;
+      }
+    }
+  } catch {
+    // Directory not readable, skip
+  }
+
+  return null;
+}
+
+/**
+ * Try to find a component file using various strategies
+ */
+function findComponentFile(projectRoot: string, componentType: string): string | null {
+  // Normalize component type (e.g., "button-primary" could be "button" or "button-primary")
+  const normalizedName = componentType.toLowerCase();
+  
+  // Also try the base name (for variants like "button-primary" -> "button")
+  const baseName = normalizedName.split("-")[0];
+
+  // Strategy 1: Check common patterns with full name first
+  for (const pattern of SEARCH_PATTERNS) {
+    const searchDir = path.join(projectRoot, pattern);
+    if (fs.existsSync(searchDir)) {
+      // Try full name first
+      for (const ext of EXTENSIONS) {
+        const fullPath = path.join(searchDir, `${normalizedName}${ext}`);
+        if (fs.existsSync(fullPath)) {
+          return fullPath;
+        }
+      }
+      // Then try base name
+      if (baseName !== normalizedName) {
+        for (const ext of EXTENSIONS) {
+          const fullPath = path.join(searchDir, `${baseName}${ext}`);
+          if (fs.existsSync(fullPath)) {
+            return fullPath;
+          }
+        }
+      }
+    }
+  }
+
+  // Strategy 2: Recursive search from src/components or components
+  const recursiveDirs = ["src/components", "components", "src", "app"];
+  for (const dir of recursiveDirs) {
+    const searchDir = path.join(projectRoot, dir);
+    if (fs.existsSync(searchDir)) {
+      // Try full name first
+      const result = findFileRecursive(searchDir, normalizedName);
+      if (result) return result;
+      
+      // Then try base name
+      if (baseName !== normalizedName) {
+        const baseResult = findFileRecursive(searchDir, baseName);
+        if (baseResult) return baseResult;
+      }
+    }
+  }
+
+  return null;
+}
+
+export async function GET(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 { searchParams } = new URL(request.url);
+    const componentType = searchParams.get("component");
+
+    if (!componentType) {
+      return NextResponse.json(
+        { error: "component parameter is required" },
+        { status: 400 }
+      );
+    }
+
+    const projectRoot = process.cwd();
+    const foundPath = findComponentFile(projectRoot, componentType);
+
+    if (!foundPath) {
+      return NextResponse.json({
+        found: false,
+        componentType,
+        searchedPatterns: SEARCH_PATTERNS,
+        message: `Could not find component file for "${componentType}"`,
+      });
+    }
+
+    // Return relative path from project root
+    const relativePath = path.relative(projectRoot, foundPath);
+
+    return NextResponse.json({
+      found: true,
+      filePath: relativePath,
+      componentType,
+      absolutePath: foundPath,
+    });
+  } catch (error) {
+    console.error("Error finding component:", error);
+    return NextResponse.json(
+      { error: "Failed to find component", details: String(error) },
+      { status: 500 }
+    );
+  }
+}
+

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

@@ -0,0 +1,181 @@
+import { NextResponse } from "next/server";
+import * as fs from "fs";
+import * as path from "path";
+
+/**
+ * Sonance DevTools API - Save Colors
+ * 
+ * Persists color changes to the codebase by patching source files.
+ * Analyzes the codebase structure to determine HOW to save:
+ * - CSS Variables: Patch :root declarations
+ * - Theme files: Update JS/TS color objects
+ * - Hardcoded: Find and replace hex values
+ * 
+ * DEVELOPMENT ONLY.
+ */
+
+interface ColorPatchRequest {
+  primaryColor?: string;
+  accentColor?: string;
+  colorArchitecture: {
+    primary: "css-variables" | "tailwind" | "hardcoded" | "unknown";
+    accent: "css-variables" | "tailwind" | "hardcoded" | "unknown";
+    sources: {
+      filePath: string;
+      type: "css-variables" | "tailwind-config" | "theme-file" | "hardcoded";
+      variables: {
+        name: string;
+        value: string;
+        lineNumber: number;
+      }[];
+    }[];
+  };
+}
+
+interface PatchResult {
+  file: string;
+  success: boolean;
+  changes: number;
+  error?: 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: ColorPatchRequest = await request.json();
+    const { primaryColor, accentColor, colorArchitecture } = body;
+    
+    if (!primaryColor && !accentColor) {
+      return NextResponse.json(
+        { error: "No color changes provided" },
+        { status: 400 }
+      );
+    }
+
+    const projectRoot = process.cwd();
+    const results: PatchResult[] = [];
+
+    // Process each source file
+    for (const source of colorArchitecture.sources) {
+      const fullPath = path.join(projectRoot, source.filePath);
+      
+      if (!fs.existsSync(fullPath)) {
+        results.push({
+          file: source.filePath,
+          success: false,
+          changes: 0,
+          error: "File not found",
+        });
+        continue;
+      }
+
+      try {
+        let content = fs.readFileSync(fullPath, "utf-8");
+        let changes = 0;
+
+        // Patch each variable in this file
+        for (const variable of source.variables) {
+          const isPrimaryVar = variable.name.toLowerCase().includes("primary") ||
+                              variable.name === "baseColor";
+          const isAccentVar = variable.name.toLowerCase().includes("accent") ||
+                             variable.name === "accentColor";
+
+          let newValue: string | null = null;
+          if (isPrimaryVar && primaryColor) {
+            newValue = primaryColor;
+          } else if (isAccentVar && accentColor) {
+            newValue = accentColor;
+          }
+
+          if (!newValue) continue;
+
+          // Different patching strategies based on source type
+          if (source.type === "css-variables") {
+            // Pattern: --variable-name: #oldvalue;
+            const cssPattern = new RegExp(
+              `(${escapeRegex(variable.name)}\\s*:\\s*)(${escapeRegex(variable.value)}|#[0-9a-fA-F]{3,8})`,
+              "g"
+            );
+            const newContent = content.replace(cssPattern, `$1${newValue}`);
+            if (newContent !== content) {
+              content = newContent;
+              changes++;
+            }
+          } else if (source.type === "theme-file" || source.type === "hardcoded") {
+            // Pattern: variableName: "#oldvalue" or variableName = "#oldvalue"
+            const jsPattern = new RegExp(
+              `(${escapeRegex(variable.name)}\\s*[:=]\\s*['"\`])(${escapeRegex(variable.value)}|#[0-9a-fA-F]{3,8})(['"\`])`,
+              "g"
+            );
+            const newContent = content.replace(jsPattern, `$1${newValue}$3`);
+            if (newContent !== content) {
+              content = newContent;
+              changes++;
+            }
+          } else if (source.type === "tailwind-config") {
+            // Pattern: primary: "#oldvalue" or primary: '#oldvalue'
+            const tailwindPattern = new RegExp(
+              `(${escapeRegex(variable.name)}\\s*:\\s*['"])(${escapeRegex(variable.value)}|#[0-9a-fA-F]{3,8})(['"])`,
+              "g"
+            );
+            const newContent = content.replace(tailwindPattern, `$1${newValue}$3`);
+            if (newContent !== content) {
+              content = newContent;
+              changes++;
+            }
+          }
+        }
+
+        if (changes > 0) {
+          fs.writeFileSync(fullPath, content, "utf-8");
+          results.push({
+            file: source.filePath,
+            success: true,
+            changes,
+          });
+        } else {
+          results.push({
+            file: source.filePath,
+            success: true,
+            changes: 0,
+          });
+        }
+      } catch (error) {
+        results.push({
+          file: source.filePath,
+          success: false,
+          changes: 0,
+          error: String(error),
+        });
+      }
+    }
+
+    const totalChanges = results.reduce((sum, r) => sum + r.changes, 0);
+    const successFiles = results.filter(r => r.success && r.changes > 0).length;
+
+    return NextResponse.json({
+      success: true,
+      message: `Updated ${totalChanges} color value(s) in ${successFiles} file(s).`,
+      results,
+    });
+  } catch (error) {
+    console.error("Error saving colors:", error);
+    return NextResponse.json(
+      { error: "Failed to save colors", details: String(error) },
+      { status: 500 }
+    );
+  }
+}
+
+// Helper to escape special regex characters
+function escapeRegex(str: string): string {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+