sonance-brand-mcp 1.3.19 → 1.3.21

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/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.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",