sonance-brand-mcp 1.3.20 → 1.3.21

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

@@ -64,24 +64,30 @@ You can see screenshots of web pages and understand their visual layout, then mo
 CRITICAL RULES
 ═══════════════════════════════════════════════════════════════════════════════
 
+**FILE RULES (MOST IMPORTANT):**
+1. You may ONLY edit files that are provided in the PAGE CONTEXT section
+2. NEVER create new files - only modify existing ones shown to you
+3. The filePath in your response MUST exactly match one of the provided file paths
+4. If you cannot find the right file to edit, explain this in your response instead of creating a new file
+
 **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
+5. CAREFULLY analyze the screenshot to understand the current visual state
+6. Identify elements mentioned in the user's request
+7. Understand the current styling and layout
+8. 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
+9. NEVER delete or remove existing content, children, or JSX elements
+10. NEVER change component structure unless specifically requested
+11. NEVER modify TypeScript types, imports, or exports unless necessary
+12. 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
+13. Make ONLY the changes requested by the user
+14. Modify the minimum amount of code necessary
+15. Use semantic Tailwind classes (bg-primary, text-foreground, etc.)
+16. Maintain dark mode compatibility with CSS variables
+17. Keep the cn() utility for className merging
 
 **SONANCE BRAND COLORS:**
 - Charcoal: #333F48, #343D46 (primary)
@@ -188,8 +194,8 @@ export async function POST(request: Request) {
         );
       }
 
-      // Gather page context
-      const pageContext = gatherPageContext(pageRoute, projectRoot);
+      // Gather page context (including focused element files via project-wide search)
+      const pageContext = gatherPageContext(pageRoute, projectRoot, focusedElements);
 
       // Build user message with vision
       const messageContent: Anthropic.MessageCreateParams["messages"][0]["content"] = [];
@@ -247,13 +253,19 @@ GLOBALS.CSS (relevant theme variables):
 ${pageContext.globalsCSS.substring(0, 2000)}${pageContext.globalsCSS.length > 2000 ? "\n/* ... (truncated) */" : ""}
 \`\`\`
 
+VALID FILES YOU MAY EDIT:
+${pageContext.pageFile ? `- ${pageContext.pageFile}` : ""}
+${pageContext.componentSources.map((c) => `- ${c.path}`).join("\n")}
+
 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
+2. Review the provided code to understand current implementation
+3. Choose which of the VALID FILES above 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`;
+6. Return as JSON in the specified format
+
+CRITICAL: Only use file paths from the VALID FILES list above. Do NOT create new files.`;
 
       messageContent.push({
         type: "text",
@@ -327,6 +339,34 @@ INSTRUCTIONS:
         );
       }
 
+      // Build list of valid file paths
+      const validPaths = new Set<string>();
+      if (pageContext.pageFile) {
+        validPaths.add(pageContext.pageFile);
+      }
+      for (const comp of pageContext.componentSources) {
+        validPaths.add(comp.path);
+      }
+
+      // Validate AI response - reject any file paths not in our valid list
+      const invalidMods = (aiResponse.modifications || []).filter(
+        (mod) => !validPaths.has(mod.filePath)
+      );
+
+      if (invalidMods.length > 0) {
+        console.error(
+          "AI attempted to create new files:",
+          invalidMods.map((m) => m.filePath)
+        );
+        return NextResponse.json(
+          {
+            success: false,
+            error: `Cannot create new files. The following paths were not found in the project: ${invalidMods.map((m) => m.filePath).join(", ")}. Please try a more specific request targeting existing components.`,
+          } as VisionEditResponse,
+          { status: 400 }
+        );
+      }
+
       // Read original content and generate diffs for each modification
       const modificationsWithOriginals: VisionFileModification[] = [];
       for (const mod of aiResponse.modifications || []) {
@@ -374,12 +414,77 @@ INSTRUCTIONS:
   }
 }
 
+/**
+ * Search for component files by name across the project
+ * Uses similar logic to /api/sonance-find-component
+ */
+function findComponentFileByName(
+  componentName: string,
+  projectRoot: string
+): string | null {
+  const normalizedName = componentName.toLowerCase().replace(/\s+/g, "-");
+  const baseName = normalizedName.split("-")[0];
+
+  const SEARCH_DIRS = ["src/components", "components", "src", "app"];
+  const EXTENSIONS = [".tsx", ".jsx", ".ts", ".js"];
+
+  function searchRecursive(
+    dir: string,
+    fileName: string,
+    depth = 0
+  ): string | null {
+    if (depth > 4) return null;
+    try {
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+      // Check direct matches
+      for (const ext of EXTENSIONS) {
+        const match = entries.find(
+          (e) => e.isFile() && e.name.toLowerCase() === `${fileName}${ext}`
+        );
+        if (match) return path.join(dir, match.name);
+      }
+      // Recurse into subdirs
+      for (const entry of entries) {
+        if (
+          entry.isDirectory() &&
+          !entry.name.startsWith(".") &&
+          entry.name !== "node_modules"
+        ) {
+          const result = searchRecursive(
+            path.join(dir, entry.name),
+            fileName,
+            depth + 1
+          );
+          if (result) return result;
+        }
+      }
+    } catch {
+      /* skip unreadable */
+    }
+    return null;
+  }
+
+  for (const dir of SEARCH_DIRS) {
+    const searchDir = path.join(projectRoot, dir);
+    if (fs.existsSync(searchDir)) {
+      const result = searchRecursive(searchDir, normalizedName);
+      if (result) return path.relative(projectRoot, result);
+      if (baseName !== normalizedName) {
+        const baseResult = searchRecursive(searchDir, baseName);
+        if (baseResult) return path.relative(projectRoot, baseResult);
+      }
+    }
+  }
+  return null;
+}
+
 /**
  * Gather context about the current page for AI analysis
  */
 function gatherPageContext(
   pageRoute: string,
-  projectRoot: string
+  projectRoot: string,
+  focusedElements?: VisionFocusedElement[]
 ): {
   pageFile: string | null;
   pageContent: string;
@@ -412,6 +517,25 @@ function gatherPageContext(
     }
   }
 
+  // Also search for focused element components if provided
+  if (focusedElements && focusedElements.length > 0) {
+    for (const el of focusedElements) {
+      // Try to find component file by name
+      const foundPath = findComponentFileByName(el.name, projectRoot);
+      if (foundPath && !componentSources.some((c) => c.path === foundPath)) {
+        try {
+          const content = fs.readFileSync(
+            path.join(projectRoot, foundPath),
+            "utf-8"
+          );
+          componentSources.push({ path: foundPath, content });
+        } catch {
+          /* skip if unreadable */
+        }
+      }
+    }
+  }
+
   // Read globals.css
   let globalsCSS = "";
   const globalsPath = path.join(projectRoot, "src/app/globals.css");

package/dist/assets/components/checkbox.tsx

@@ -11,6 +11,8 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
   description?: string;
   /** Visual state for Storybook/Figma documentation */
   state?: CheckboxState;
+  /** Radix UI-style callback for checked state changes */
+  onCheckedChange?: (checked: boolean) => void;
 }
 
 // State styles for Storybook/Figma visualization
@@ -28,17 +30,23 @@ const getStateStyles = (state?: CheckboxState) => {
 };
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, label, description, id, state, disabled, checked, defaultChecked, onChange, style, ...props }, ref) => {
+  ({ className, label, description, id, state, disabled, checked, defaultChecked, onChange, onCheckedChange, style, ...props }, ref) => {
     const uniqueId = useId();
     const inputId = id || `checkbox-${uniqueId}`;
     const isDisabled = disabled || state === "disabled";
 
-    // Determine if we're in controlled mode
-    const isControlled = checked !== undefined || onChange !== undefined;
+    // Determine if we're in controlled mode (only when checked is explicitly provided)
+    const isControlled = checked !== undefined;
     const isCheckedForState = state === "checked";
 
+    // Combined change handler that supports both native onChange and Radix-style onCheckedChange
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(e);
+      onCheckedChange?.(e.target.checked);
+    };
+
     return (
-      <div data-sonance-name="checkbox" className="flex items-start gap-3">
+      <label data-sonance-name="checkbox" className="flex items-start gap-3 cursor-pointer">
         <div className="relative flex items-center justify-center">
           <input
             type="checkbox"
@@ -46,10 +54,12 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             ref={ref}
             disabled={isDisabled}
             style={style}
+            onChange={handleChange}
             {...(isControlled
-              ? { checked: checked || isCheckedForState, onChange }
-              : { defaultChecked: defaultChecked || isCheckedForState }
+              ? { checked: checked ?? isCheckedForState }
+              : { defaultChecked: defaultChecked ?? isCheckedForState }
             )}
+            readOnly={isControlled && !onChange && !onCheckedChange}
             className={cn(
               "peer h-5 w-5 shrink-0 appearance-none border border-border bg-input",
               "hover:border-border-hover",
@@ -59,7 +69,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               "transition-colors duration-150",
               getStateStyles(state),
               className
-            )} data-sonance-name="checkbox"
+            )}
             {...props}
           />
           <Check
@@ -72,19 +82,18 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         {(label || description) && (
           <div className="flex flex-col gap-0.5">
             {label && (
-              <label
-                htmlFor={inputId}
-                className="text-sm font-medium text-foreground cursor-pointer select-none"
+              <span
+                className="text-sm font-medium text-foreground select-none"
               >
                 {label}
-              </label>
+              </span>
             )}
             {description && (
               <p id="p-description" className="text-xs text-foreground-muted">{description}</p>
             )}
           </div>
         )}
-      </div>
+      </label>
     );
   }
 );

package/dist/assets/dev-tools/SonanceDevTools.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
-import { Palette, X, Copy, Check, RotateCcw, ChevronDown, Save, Loader2, AlertCircle, CheckCircle, Sun, Moon, Eye, EyeOff, Zap, Image as ImageIcon, Wand2, Scan, FileCode, Tag, Type, MousePointer, FormInput, Box, Search, Send, Sparkles, RefreshCw } from "lucide-react";
+import { Palette, X, Copy, Check, RotateCcw, ChevronDown, Save, Loader2, AlertCircle, CheckCircle, Sun, Moon, Eye, EyeOff, Zap, Image as ImageIcon, Wand2, Scan, FileCode, Tag, Type, MousePointer, FormInput, Box, Search, Send, Sparkles, RefreshCw, GripHorizontal } from "lucide-react";
 import { useTheme } from "next-themes";
 import { cn } from "../../lib/utils";
 import {
@@ -118,6 +118,14 @@ export function SonanceDevTools() {
   // Track which elements were changed (for highlighting until accept/revert)
   const [changedElements, setChangedElements] = useState<VisionFocusedElement[]>([]);
 
+  // Drag state for movable panel
+  const DEVTOOLS_POSITION_KEY = "sonance-devtools-pos";
+  const DEFAULT_POSITION = { x: 0, y: 0 }; // Offset from default bottom-right position
+  const [dragPosition, setDragPosition] = useState(DEFAULT_POSITION);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragOffsetRef = useRef({ x: 0, y: 0 });
+  const panelRef = useRef<HTMLDivElement>(null);
+
   // Component-specific style overrides (for scalable, project-agnostic styling)
   // Key: component type (e.g., "card", "button-primary", "card:variant123"), Value: style overrides
   const [componentOverrides, setComponentOverrides] = useState<Record<string, ComponentStyle>>({});
@@ -236,6 +244,93 @@ export function SonanceDevTools() {
     setMounted(true);
   }, []);
 
+  // Load drag position from localStorage on mount
+  useEffect(() => {
+    if (!mounted) return;
+    try {
+      const saved = localStorage.getItem(DEVTOOLS_POSITION_KEY);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        if (typeof parsed.x === "number" && typeof parsed.y === "number") {
+          setDragPosition(parsed);
+        }
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }, [mounted, DEVTOOLS_POSITION_KEY]);
+
+  // Drag handlers for movable panel
+  const headerRef = useRef<HTMLDivElement>(null);
+  
+  const handleDragStart = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    // Don't start drag if clicking on a button or interactive element
+    const target = e.target as HTMLElement;
+    if (target.closest('button')) return;
+    
+    if (!panelRef.current || !headerRef.current) return;
+    
+    // Prevent text selection during drag
+    e.preventDefault();
+    
+    // Store the initial mouse position and current panel offset
+    dragOffsetRef.current = {
+      x: e.clientX - dragPosition.x,
+      y: e.clientY - dragPosition.y,
+    };
+    
+    setIsDragging(true);
+    headerRef.current.setPointerCapture(e.pointerId);
+  }, [dragPosition]);
+
+  const handleDragMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!isDragging || !panelRef.current) return;
+    
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const panelWidth = panelRef.current.offsetWidth;
+    const panelHeight = panelRef.current.offsetHeight;
+    
+    // Calculate new position directly from mouse movement
+    const newX = e.clientX - dragOffsetRef.current.x;
+    const newY = e.clientY - dragOffsetRef.current.y;
+    
+    // Clamp to keep panel within viewport (with 24px padding)
+    const padding = 24;
+    const maxX = viewportWidth - panelWidth - padding;
+    const maxY = viewportHeight - panelHeight - padding;
+    const minX = -(viewportWidth - panelWidth - padding);
+    const minY = -(viewportHeight - panelHeight - padding);
+    
+    setDragPosition({
+      x: Math.max(minX, Math.min(maxX, newX)),
+      y: Math.max(minY, Math.min(maxY, newY)),
+    });
+  }, [isDragging]);
+
+  const handleDragEnd = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!isDragging || !headerRef.current) return;
+    
+    setIsDragging(false);
+    headerRef.current.releasePointerCapture(e.pointerId);
+    
+    // Save position to localStorage
+    try {
+      localStorage.setItem(DEVTOOLS_POSITION_KEY, JSON.stringify(dragPosition));
+    } catch {
+      // Ignore storage errors
+    }
+  }, [isDragging, dragPosition, DEVTOOLS_POSITION_KEY]);
+
+  const handleResetPosition = useCallback(() => {
+    setDragPosition(DEFAULT_POSITION);
+    try {
+      localStorage.removeItem(DEVTOOLS_POSITION_KEY);
+    } catch {
+      // Ignore storage errors
+    }
+  }, [DEVTOOLS_POSITION_KEY]);
+
   // Inject/update component-specific preview styles whenever overrides change
   useEffect(() => {
     if (!mounted) return;
@@ -2172,8 +2267,9 @@ export function SonanceDevTools() {
   // Close and reset
   const handleClose = useCallback(() => {
     setIsOpen(false);
-    // Disable inspector so user can interact with the app
+    // Disable inspector and vision mode so user can interact with the app
     setInspectorEnabled(false);
+    setVisionModeActive(false);
     resetThemeFromDOM();
     // Reset color change tracking for next session
     setColorsExplicitlyChanged(false);
@@ -2201,19 +2297,37 @@ export function SonanceDevTools() {
 
   const panel = isOpen && (
     <div
+      ref={panelRef}
       data-sonance-devtools="true"
       className={cn(
         "fixed bottom-6 right-6 z-[9999]",
         "w-[360px] max-h-[80vh]",
         "bg-white rounded-lg shadow-2xl border border-gray-200",
         "flex flex-col overflow-hidden",
-        "font-['Montserrat',sans-serif]"
+        "font-['Montserrat',sans-serif]",
+        isDragging && "select-none"
       )}
-      style={{ colorScheme: "light" }}
+      style={{ 
+        colorScheme: "light",
+        transform: `translate(${dragPosition.x}px, ${dragPosition.y}px)`,
+      }}
     >
-      {/* Header - Simplified */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-[#333F48]">
+      {/* Header - Draggable */}
+      <div 
+        ref={headerRef}
+        className={cn(
+          "flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-[#333F48]",
+          "cursor-move touch-none"
+        )}
+        onPointerDown={handleDragStart}
+        onPointerMove={handleDragMove}
+        onPointerUp={handleDragEnd}
+        onPointerCancel={handleDragEnd}
+        onDoubleClick={handleResetPosition}
+        title="Drag to move • Double-click to reset position"
+      >
         <div className="flex items-center gap-2">
+          <GripHorizontal className="h-4 w-4 text-white/50" />
           <Palette className="h-5 w-5 text-[#00A3E1]" />
           <span id="span-sonance-devtools" className="text-sm font-semibold text-white">
             Sonance DevTools

package/package.json

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