sonance-brand-mcp 1.3.19 → 1.3.20

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

@@ -0,0 +1,485 @@
+import { NextResponse } from "next/server";
+import * as fs from "fs";
+import * as path from "path";
+import Anthropic from "@anthropic-ai/sdk";
+
+/**
+ * Sonance DevTools API - AI Component Editor
+ *
+ * Uses Claude to modify component source files based on natural language requests.
+ * Supports two actions:
+ * - "edit": Generate modified code and diff (preview)
+ * - "save": Write the modified code to the source file
+ *
+ * DEVELOPMENT ONLY.
+ */
+
+interface VariantStyles {
+  backgroundColor: string;
+  color: string;
+  borderColor: string;
+  borderRadius: string;
+  borderWidth: string;
+  padding: string;
+  fontSize: string;
+  fontWeight: string;
+  boxShadow: string;
+}
+
+interface AIEditRequest {
+  action: "edit" | "save";
+  componentType: string;
+  filePath: string;
+  currentCode?: string;
+  modifiedCode?: string;
+  userRequest?: string;
+  // Variant-scoped editing
+  editScope?: "component" | "variant";
+  variantId?: string;
+  variantStyles?: VariantStyles;
+}
+
+interface AIEditResponse {
+  success: boolean;
+  modifiedCode?: string;
+  diff?: string;
+  explanation?: string;
+  error?: string;
+  // AI-generated CSS for live preview (targets data-sonance-variant selectors)
+  previewCSS?: string;
+}
+
+const SYSTEM_PROMPT = `You are a React/Tailwind CSS expert modifying Sonance brand components.
+
+═══════════════════════════════════════════════════════════════════════════════
+CRITICAL RULES - FOLLOW EXACTLY
+═══════════════════════════════════════════════════════════════════════════════
+
+**PRESERVATION RULES (NEVER VIOLATE):**
+1. NEVER delete, remove, or modify ANY existing content, children, or JSX elements
+2. NEVER remove existing className values - only ADD or MODIFY specific classes
+3. NEVER change component structure, nesting, or element hierarchy
+4. NEVER modify props interfaces, TypeScript types, imports, or exports
+5. NEVER remove data-sonance-* attributes - these are required for DevTools
+6. NEVER change any text content, children, or slot content
+7. NEVER remove existing functionality, event handlers, or logic
+
+**CHANGE RULES:**
+8. ONLY modify the specific styling aspect mentioned in the user's request
+9. When adding border-radius, ONLY add rounded-* classes - don't change background, padding, etc.
+10. When changing colors, ONLY change the relevant color class - preserve all other styles
+11. When adjusting spacing, ONLY modify padding/margin - preserve everything else
+12. Make the MINIMUM possible change to achieve the requested result
+13. If unsure whether to change something, DON'T change it
+
+**TECHNICAL RULES:**
+14. Return the COMPLETE modified file, not just changed parts
+15. Use semantic Tailwind classes (bg-primary, text-foreground, etc.) when available
+16. Maintain dark mode compatibility - prefer CSS variables over hardcoded colors
+17. Keep the cn() utility for className merging
+18. For hover effects, use Tailwind's hover: prefix
+19. For transitions, use transition-all duration-200
+
+**EXAMPLE - User says "make the borders round":**
+CORRECT: Only add rounded-lg or rounded-xl to the className
+WRONG: Adding rounded-lg AND changing bg color AND removing children
+
+**EXAMPLE - User says "change the background to blue":**
+CORRECT: Only change bg-white to bg-blue-500 (or appropriate brand color)
+WRONG: Changing background AND modifying padding AND restructuring content
+
+VARIANT-SCOPED EDITING:
+When editScope is "variant", you are targeting ONLY components that match specific computed styles.
+- Add a new variant prop or conditional class that applies styles when the component matches the variant criteria
+- Use data attributes like data-variant="variantId" for targeting
+- Or create a new variant in the component's variant system (if using cva or similar)
+- Do NOT change the default appearance of other component instances
+
+═══════════════════════════════════════════════════════════════════════════════
+SONANCE BRAND FAMILY - COMPLETE REFERENCE
+═══════════════════════════════════════════════════════════════════════════════
+
+BRAND QUICK REFERENCE:
+| Brand    | Primary Color      | Accent Color              | Theme Preference |
+|----------|-------------------|---------------------------|------------------|
+| Sonance  | Charcoal #333F48  | Cyan "The Beam" #00A3E1   | Light preferred  |
+| IPORT    | Black #0E1114     | Orange #FC4C02            | Dark preferred   |
+| Blaze    | Black #1A1A1C     | Blue #00A3E1, Red #C02B0A | Dark preferred   |
+
+───────────────────────────────────────────────────────────────────────────────
+SONANCE COLORS
+───────────────────────────────────────────────────────────────────────────────
+| Color       | Hex       | CSS Variable          | Tailwind Class        |
+|-------------|-----------|----------------------|----------------------|
+| Charcoal    | #333F48   | --sonance-charcoal   | bg-sonance-charcoal  |
+| The Beam    | #00A3E1   | --sonance-blue       | bg-sonance-blue      |
+| Light Gray  | #D9D9D6   | --sonance-light-gray | bg-sonance-light-gray|
+| White       | #FFFFFF   | --sonance-white      | bg-sonance-white     |
+
+Sonance Gray Scale:
+- Gray 50: #f8f9fa, Gray 100: #f0f2f3, Gray 200: #D9D9D6
+- Gray 300: #b8bfc4, Gray 400: #8f999f, Gray 500: #6b7780
+- Gray 600: #515c64, Gray 700: #424c54, Gray 800: #3a444c, Gray 900: #333F48
+
+───────────────────────────────────────────────────────────────────────────────
+IPORT COLORS (Dark Theme)
+───────────────────────────────────────────────────────────────────────────────
+| Color        | Hex       | CSS Variable           | Tailwind Class         |
+|--------------|-----------|------------------------|------------------------|
+| Orange       | #FC4C02   | --iport-orange         | bg-iport-orange        |
+| Black        | #0E1114   | --iport-black          | bg-iport-black         |
+| Dark         | #0F161D   | --iport-dark           | bg-iport-dark          |
+| Dark Gray    | #1C1E20   | --iport-dark-gray      | bg-iport-dark-gray     |
+| Medium Gray  | #25282A   | --iport-medium-gray    | bg-iport-medium-gray   |
+| Gray         | #3A3D3F   | --iport-gray           | bg-iport-gray          |
+| Light Gray   | #CED6DB   | --iport-light-gray     | bg-iport-light-gray    |
+| White        | #FFFFFF   | --iport-white          | bg-iport-white         |
+
+───────────────────────────────────────────────────────────────────────────────
+BLAZE AUDIO COLORS (Dark Theme)
+───────────────────────────────────────────────────────────────────────────────
+| Color        | Hex       | CSS Variable           | Tailwind Class         |
+|--------------|-----------|------------------------|------------------------|
+| Blue         | #00A3E1   | --blaze-blue           | bg-blaze-blue          |
+| Red          | #C02B0A   | --blaze-red            | bg-blaze-red           |
+| Black        | #1A1A1C   | --blaze-black          | bg-blaze-black         |
+| Dark Gray    | #28282B   | --blaze-dark-gray      | bg-blaze-dark-gray     |
+| Gray         | #313131   | --blaze-gray           | bg-blaze-gray          |
+| Medium Gray  | #575757   | --blaze-medium-gray    | bg-blaze-medium-gray   |
+| White        | #FFFFFF   | --blaze-white          | bg-blaze-white         |
+
+───────────────────────────────────────────────────────────────────────────────
+SEMANTIC THEME VARIABLES (use these for theme-aware components)
+───────────────────────────────────────────────────────────────────────────────
+Backgrounds: --background, --background-secondary, --card
+Text: --foreground, --foreground-secondary, --foreground-muted
+Interactive: --primary, --primary-foreground, --border
+Feedback: --success, --error, --warning, --info
+
+Tailwind: bg-background, bg-card, text-foreground, text-foreground-secondary,
+          bg-primary, text-primary-foreground, border-border
+
+───────────────────────────────────────────────────────────────────────────────
+TYPOGRAPHY (All Brands use Montserrat)
+───────────────────────────────────────────────────────────────────────────────
+Font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
+
+Font Weights:
+- 300 Light: Headlines, display text
+- 400 Regular: Body text, paragraphs
+- 500 Medium: Emphasis, subheadings, buttons
+- 600 Semibold: Strong emphasis
+- 700 Bold: CTAs, buttons (SMALL TEXT ONLY - never for large headlines)
+
+Headlines:
+- Weight: Light (300) or Medium (500)
+- Letter-spacing: -0.02em (tracking-tight)
+- Line-height: 1.2
+- NEVER use bold (700) for large display text
+
+Body Text:
+- Weight: Regular (400)
+- Line-height: 1.6 to 1.75
+- Max-width: 65-75 characters per line
+
+All Caps Text:
+- Letter-spacing: 0.08em to 0.1em (tracking-wide or tracking-widest)
+- Use for: headlines, product names, labels, buttons
+
+───────────────────────────────────────────────────────────────────────────────
+COMPONENT PATTERNS
+───────────────────────────────────────────────────────────────────────────────
+
+PRIMARY BUTTONS:
+- Sonance: bg-sonance-charcoal text-white hover:bg-sonance-gray-800
+- IPORT:   bg-iport-orange text-white hover:opacity-90
+- Blaze:   bg-blaze-blue text-white hover:opacity-90
+- All:     px-6 py-3 text-sm font-medium tracking-wide uppercase transition-colors
+
+SECONDARY BUTTONS:
+- border border-border bg-transparent hover:bg-secondary-hover
+- text-foreground px-6 py-3 text-sm font-medium tracking-wide uppercase
+
+CARDS:
+- Light: bg-white border border-sonance-light-gray rounded-sm p-6 shadow-sm
+- Dark:  bg-iport-dark-gray border border-iport-gray rounded-sm p-6
+
+SECTION HEADERS:
+- Category: text-xs font-medium uppercase tracking-widest text-foreground-muted mb-2
+- Headline: text-4xl font-light text-foreground tracking-tight
+- Description: text-lg text-foreground-secondary mt-4 max-w-2xl
+
+───────────────────────────────────────────────────────────────────────────────
+DESIGN PRINCIPLES
+───────────────────────────────────────────────────────────────────────────────
+- Sharp corners: rounded-sm or rounded-none preferred
+- Subtle shadows: shadow-sm, shadow-md (not aggressive drop shadows)
+- Generous whitespace: layouts should feel "breathable"
+- Minimal borders: use subtle dividers, not heavy borders
+- Premium feel: every element should feel high-end and intentional
+- Photo-realistic imagery only (no cartoons or illustrations)
+
+═══════════════════════════════════════════════════════════════════════════════
+
+RESPOND WITH VALID JSON ONLY:
+{
+  "modifiedCode": "// Complete file contents here...",
+  "explanation": "Brief description of what was changed"
+}
+
+Do not include markdown code fences or any text outside the JSON object.`;
+
+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: AIEditRequest = await request.json();
+    const { action, componentType, filePath, currentCode, modifiedCode, userRequest, editScope, variantId, variantStyles } = body;
+
+    const projectRoot = process.cwd();
+
+    // Handle save action
+    if (action === "save") {
+      if (!filePath || !modifiedCode) {
+        return NextResponse.json(
+          { error: "filePath and modifiedCode are required for save action" },
+          { status: 400 }
+        );
+      }
+
+      const fullPath = path.join(projectRoot, filePath);
+
+      // Validate file path is within project
+      if (!fullPath.startsWith(projectRoot)) {
+        return NextResponse.json(
+          { error: "Invalid file path" },
+          { status: 400 }
+        );
+      }
+
+      // Write the file
+      fs.writeFileSync(fullPath, modifiedCode, "utf-8");
+
+      return NextResponse.json({
+        success: true,
+        message: `Successfully updated ${filePath}`,
+      });
+    }
+
+    // Handle edit action (AI modification)
+    if (action === "edit") {
+      if (!filePath || !userRequest) {
+        return NextResponse.json(
+          { error: "filePath and userRequest are required for edit action" },
+          { status: 400 }
+        );
+      }
+
+      // Read current file if not provided
+      let sourceCode = currentCode;
+      if (!sourceCode) {
+        const fullPath = path.join(projectRoot, filePath);
+        if (!fs.existsSync(fullPath)) {
+          return NextResponse.json(
+            { error: `File not found: ${filePath}` },
+            { status: 404 }
+          );
+        }
+        sourceCode = fs.readFileSync(fullPath, "utf-8");
+      }
+
+      // 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 }
+        );
+      }
+
+      // Call Claude API
+      const anthropic = new Anthropic({ apiKey });
+
+      // Build context for variant-scoped editing
+      let variantContext = "";
+      if (editScope === "variant" && variantId && variantStyles) {
+        variantContext = `
+VARIANT-SCOPED EDIT:
+This change should ONLY affect components matching this specific variant (ID: ${variantId}).
+The variant has these computed styles:
+- Background: ${variantStyles.backgroundColor}
+- Text color: ${variantStyles.color}
+- Border: ${variantStyles.borderWidth} ${variantStyles.borderColor}
+- Border radius: ${variantStyles.borderRadius}
+- Padding: ${variantStyles.padding}
+- Font size: ${variantStyles.fontSize}
+- Font weight: ${variantStyles.fontWeight}
+- Box shadow: ${variantStyles.boxShadow}
+
+Create a conditional style or variant prop that targets ONLY these components.
+Do NOT change the default appearance of other instances of this component.
+`;
+      }
+
+      const userMessage = `Component type: ${componentType}
+File: ${filePath}
+Edit scope: ${editScope === "variant" ? "VARIANT ONLY" : "ALL INSTANCES"}
+${variantContext}
+Current code:
+\`\`\`tsx
+${sourceCode}
+\`\`\`
+
+User request: "${userRequest}"
+
+IMPORTANT REMINDERS:
+- Make ONLY the change requested above - nothing else
+- Do NOT remove or modify any existing content, children, or JSX elements
+- Do NOT change any styles that weren't specifically requested
+- Preserve ALL existing className values - only add/modify what's needed for the request
+- If the user says "round the borders", ONLY add a rounded-* class
+- If the user says "change the color", ONLY change the relevant color class
+
+Return the complete modified file as JSON with these keys:
+- "modifiedCode": The complete modified file content
+- "explanation": Brief description of changes made
+- "previewCSS": CSS rules that will visually show the changes. Use selector [data-sonance-variant="${variantId || "selected"}"] to target the specific element(s). Example: "[data-sonance-variant='abc123'] { border-radius: 0.5rem; background-color: white; }"`;
+
+      const response = await anthropic.messages.create({
+        model: "claude-sonnet-4-20250514",
+        max_tokens: 8192,
+        messages: [
+          {
+            role: "user",
+            content: userMessage,
+          },
+        ],
+        system: SYSTEM_PROMPT,
+      });
+
+      // Extract text content from response
+      const textContent = response.content.find(block => block.type === "text");
+      if (!textContent || textContent.type !== "text") {
+        return NextResponse.json(
+          { error: "No text response from AI" },
+          { status: 500 }
+        );
+      }
+
+      // Parse AI response
+      let aiResponse: { modifiedCode: string; explanation: string; previewCSS?: string };
+      try {
+        // Clean up response - try to extract JSON from markdown code blocks
+        let jsonText = textContent.text.trim();
+        
+        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:", textContent.text);
+        return NextResponse.json(
+          { error: "Failed to parse AI response. Please try again." },
+          { status: 500 }
+        );
+      }
+
+      // Generate simple diff
+      const diff = generateSimpleDiff(sourceCode, aiResponse.modifiedCode);
+
+      return NextResponse.json({
+        success: true,
+        modifiedCode: aiResponse.modifiedCode,
+        diff,
+        explanation: aiResponse.explanation,
+        previewCSS: aiResponse.previewCSS || "",
+      } as AIEditResponse);
+    }
+
+    return NextResponse.json(
+      { error: "Invalid action. Use 'edit' or 'save'." },
+      { status: 400 }
+    );
+  } catch (error) {
+    console.error("AI edit error:", error);
+    return NextResponse.json(
+      { error: "Failed to process request", details: String(error) },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * 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);
+
+  let inChange = false;
+  let changeStart = -1;
+  const changes: { start: number; origLines: string[]; modLines: string[] }[] = [];
+
+  // Find changed regions
+  for (let i = 0; i < maxLines; i++) {
+    const origLine = originalLines[i] || "";
+    const modLine = modifiedLines[i] || "";
+
+    if (origLine !== modLine) {
+      if (!inChange) {
+        inChange = true;
+        changeStart = i;
+        changes.push({ start: i, origLines: [], modLines: [] });
+      }
+      if (originalLines[i] !== undefined) {
+        changes[changes.length - 1].origLines.push(origLine);
+      }
+      if (modifiedLines[i] !== undefined) {
+        changes[changes.length - 1].modLines.push(modLine);
+      }
+    } else {
+      inChange = false;
+    }
+  }
+
+  // Format diff output
+  for (const change of changes) {
+    diff.push(`@@ Line ${change.start + 1} @@`);
+    for (const line of change.origLines) {
+      diff.push(`- ${line}`);
+    }
+    for (const line of change.modLines) {
+      diff.push(`+ ${line}`);
+    }
+    diff.push("");
+  }
+
+  if (diff.length === 0) {
+    return "No changes detected";
+  }
+
+  return diff.join("\n");
+}

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

@@ -0,0 +1,78 @@
+import { NextResponse } from "next/server";
+import * as fs from "fs";
+import * as path from "path";
+
+/**
+ * Sonance DevTools API - Component Source Reader
+ *
+ * Returns the source code of a component file for AI editing.
+ *
+ * DEVELOPMENT ONLY.
+ */
+
+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 filePath = searchParams.get("file");
+
+    if (!filePath) {
+      return NextResponse.json(
+        { error: "file parameter is required" },
+        { status: 400 }
+      );
+    }
+
+    const projectRoot = process.cwd();
+    const fullPath = path.join(projectRoot, filePath);
+
+    // Validate file path is within project (security)
+    const normalizedPath = path.normalize(fullPath);
+    if (!normalizedPath.startsWith(projectRoot)) {
+      return NextResponse.json(
+        { error: "Invalid file path - must be within project" },
+        { status: 400 }
+      );
+    }
+
+    // Check file exists
+    if (!fs.existsSync(fullPath)) {
+      return NextResponse.json(
+        { error: `File not found: ${filePath}` },
+        { status: 404 }
+      );
+    }
+
+    // Read file contents
+    const content = fs.readFileSync(fullPath, "utf-8");
+    const lines = content.split("\n");
+
+    // Extract component name from file (simple heuristic)
+    let componentName = path.basename(filePath, path.extname(filePath));
+    // Convert kebab-case to PascalCase
+    componentName = componentName
+      .split("-")
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join("");
+
+    return NextResponse.json({
+      filePath,
+      content,
+      componentName,
+      lineCount: lines.length,
+    });
+  } catch (error) {
+    console.error("Error reading component source:", error);
+    return NextResponse.json(
+      { error: "Failed to read file", details: String(error) },
+      { status: 500 }
+    );
+  }
+}