sonance-brand-mcp 1.3.13 → 1.3.14

package/dist/assets/api/sonance-analyze/route.ts

@@ -51,6 +51,9 @@ interface ScannedElement {
   textContent?: string;        // Truncated text content (for headings/paragraphs)
   // Component-specific fields
   variant?: string;            // variant prop if present
+  // Interactive element fields (Button, Link, etc.)
+  onClickHandler?: string;     // onClick handler name (e.g., "handleReset")
+  iconName?: string;           // Icon component inside (e.g., "RotateCcw")
   // Input-specific fields
   inputName?: string;          // name or placeholder if present
   inputType?: string;          // type attribute if present
@@ -337,13 +340,38 @@ function extractElements(
       }
     }
     
-    // Component-specific extraction
-    if (category === "component") {
+    // Interactive element extraction (Button, Link, etc.)
+    if (category === "interactive") {
       // Extract variant
       const variantMatch = elementContent.match(/variant=["']([^"']+)["']/);
       if (variantMatch) {
         element.variant = variantMatch[1];
       }
+      
+      // Extract onClick handler name
+      const onClickMatch = elementContent.match(/onClick=\{([a-zA-Z_][a-zA-Z0-9_]*)\}/);
+      if (onClickMatch) {
+        element.onClickHandler = onClickMatch[1];
+      }
+      
+      // Extract icon name (first PascalCase component inside the element)
+      const iconMatch = elementContent.match(/<([A-Z][a-zA-Z0-9]*)\s/);
+      if (iconMatch && iconMatch[1] !== elementType) {
+        element.iconName = iconMatch[1];
+      }
+      
+      // Extract text content between > and </ElementType>
+      const afterOpenTag = fullContent.substring(elementEnd);
+      const closeTagMatch = afterOpenTag.match(new RegExp(`^([^<]*)<\\/${elementType}>`));
+      if (closeTagMatch && closeTagMatch[1].trim()) {
+        element.textContent = closeTagMatch[1].trim().substring(0, 50);
+      } else {
+        // Try to find text after any icons/nested elements
+        const textAfterIcons = afterOpenTag.match(new RegExp(`^(?:<[^>]+>\\s*)*([^<]+)<\\/${elementType}>`));
+        if (textAfterIcons && textAfterIcons[1].trim()) {
+          element.textContent = textAfterIcons[1].trim().substring(0, 50);
+        }
+      }
     }
     
     // Input-specific extraction
@@ -443,15 +471,49 @@ function generateSuggestedId(element: ScannedElement): string {
       break;
     }
     
-    case "component": {
-      // Add element type (button, link, etc.)
-      parts.push(elementType.toLowerCase());
+    case "interactive": {
+      // Add prefix based on element type
+      const prefix = elementType === "Button" ? "btn" : 
+                     elementType === "Link" || elementType === "a" ? "link" : "action";
+      parts.push(prefix);
       
-      // Add variant if present
-      if (variant) {
+      // Priority 1: Use text content if available
+      if (textContent) {
+        const cleanText = textContent.toLowerCase()
+          .replace(/[^a-z0-9\s]/g, "")
+          .replace(/\s+/g, "-")
+          .substring(0, 25);
+        if (cleanText && cleanText.length > 1) {
+          parts.push(cleanText);
+        }
+      }
+      
+      // Priority 2: Use onClick handler name
+      if (parts.length === 1 && element.onClickHandler) {
+        // Convert camelCase to kebab-case (handleReset -> handle-reset)
+        const handlerName = element.onClickHandler
+          .replace(/^(handle|on)/i, "") // Remove handle/on prefix
+          .replace(/([A-Z])/g, "-$1")
+          .toLowerCase()
+          .replace(/^-/, "");
+        if (handlerName) parts.push(handlerName);
+      }
+      
+      // Priority 3: Use icon name if no text
+      if (parts.length === 1 && element.iconName) {
+        const iconName = element.iconName
+          .replace(/([A-Z])/g, "-$1")
+          .toLowerCase()
+          .replace(/^-/, "");
+        parts.push(iconName);
+      }
+      
+      // Priority 4: Use variant
+      if (parts.length === 1 && variant) {
         parts.push(variant.toLowerCase());
       }
       
+      // Fallback: add "action" if still only prefix
       if (parts.length === 1) parts.push("action");
       break;
     }
@@ -747,7 +809,23 @@ function scanDirectory(
  * Tags a component definition file with data-sonance-name attribute.
  * Uses multiple regex patterns to handle different component structures.
  */
-function tagComponentDefinition(filePath: string, content: string, componentName: string): { success: boolean; content: string; error?: string } {
+function tagComponentDefinition(filePath: string, content: string, componentName: string): { success: boolean; content: string; error?: string; skipped?: boolean } {
+  // Check for pure re-exports (no JSX to tag)
+  // Pattern: const ComponentName = SomePrimitive.Element or export const X = Y
+  const pureReExportPattern = new RegExp(
+    `(?:const|export\\s+const)\\s+${componentName}\\s*=\\s*[A-Z][a-zA-Z0-9]*(?:\\.[A-Z][a-zA-Z0-9]*)?\\s*[;\\n]`,
+    'g'
+  );
+  if (pureReExportPattern.test(content) && !content.includes(`<`) || 
+      (content.match(/<[A-Z]/g) || []).length === 0) {
+    return { 
+      success: true, 
+      content, 
+      skipped: true,
+      error: "Pure re-export - no JSX to tag" 
+    };
+  }
+  
   // Helper to inject tag only if not present in the match
   const injectTag = (match: string, p1: string, p2: string) => {
     if (match.includes("data-sonance-name=")) return match;
@@ -840,6 +918,39 @@ function tagComponentDefinition(filePath: string, content: string, componentName
     }
   }
 
+  // Pattern 8: forwardRef with implicit return and element without attributes (needs to add space)
+  // Matches: ) => (\n  <Element.Sub>\n or ) => (\n  <Element>\n
+  if (!modified) {
+    const forwardRefNoAttrsPattern = /(\)\s*=>\s*\(\s*<(?:[A-Z][a-zA-Z0-9]*\.)?[A-Z][a-zA-Z0-9]*)(?![^>]*data-sonance-name=)(>)/;
+    if (forwardRefNoAttrsPattern.test(result)) {
+      // Different injection - we need to add space before the >
+      const newContent = result.replace(forwardRefNoAttrsPattern, (match, p1, p2) => {
+        if (match.includes("data-sonance-name=")) return match;
+        return `${p1} data-sonance-name="${componentName}"${p2}`;
+      });
+      if (newContent !== result) {
+        result = newContent;
+        modified = true;
+      }
+    }
+  }
+
+  // Pattern 9: Standard function component returning element without attributes
+  // Matches: return (\n    <DropdownMenu>\n
+  if (!modified) {
+    const returnNoAttrsPattern = /(return\s*\(\s*<(?:[A-Z][a-zA-Z0-9]*\.)?[A-Z][a-zA-Z0-9]*)(?![^>]*data-sonance-name=)(>)/;
+    if (returnNoAttrsPattern.test(result)) {
+      const newContent = result.replace(returnNoAttrsPattern, (match, p1, p2) => {
+        if (match.includes("data-sonance-name=")) return match;
+        return `${p1} data-sonance-name="${componentName}"${p2}`;
+      });
+      if (newContent !== result) {
+        result = newContent;
+        modified = true;
+      }
+    }
+  }
+
   if (modified) {
     return { success: true, content: result };
   } else {
@@ -1000,7 +1111,10 @@ export async function POST(request: Request) {
             const componentName = element.context.parentComponent || element.suggestedId;
             const tagResult = tagComponentDefinition(fullPath, content, componentName);
             
-            if (tagResult.success) {
+            if (tagResult.skipped) {
+              // Pure re-export - no JSX to tag, mark as skipped (not a failure)
+              results.push({ id: element.id, success: true, skipped: true });
+            } else if (tagResult.success) {
               fs.writeFileSync(fullPath, tagResult.content, "utf-8");
               results.push({ id: element.id, success: true });
             } else {

package/package.json

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