sonance-brand-mcp 1.3.109 → 1.3.111

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

@@ -26,6 +26,11 @@ interface VariantStyles {
   boxShadow: string;
 }
 
+interface ChatHistoryMessage {
+  role: string;
+  content: string;
+}
+
 interface AIEditRequest {
   action: "edit" | "save";
   componentType: string;
@@ -37,6 +42,8 @@ interface AIEditRequest {
   editScope?: "component" | "variant";
   variantId?: string;
   variantStyles?: VariantStyles;
+  /** Conversation history for multi-turn context */
+  chatHistory?: ChatHistoryMessage[];
 }
 
 interface AIEditResponse {
@@ -240,7 +247,7 @@ export async function POST(request: Request) {
 
   try {
     const body: AIEditRequest = await request.json();
-    const { action, componentType, filePath, currentCode, modifiedCode, userRequest, editScope, variantId, variantStyles } = body;
+    const { action, componentType, filePath, currentCode, modifiedCode, userRequest, editScope, variantId, variantStyles, chatHistory } = body;
 
     const projectRoot = process.cwd();
 
@@ -351,15 +358,31 @@ Return the complete modified file as JSON with these keys:
 - "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; }"`;
 
+      // Build messages array with chat history for multi-turn context
+      const messages: Anthropic.MessageCreateParams["messages"] = [];
+      
+      // Add conversation history if available (e.g., "make it darker", "undo that")
+      if (chatHistory && chatHistory.length > 0) {
+        for (const msg of chatHistory) {
+          if (msg.role === "user" || msg.role === "assistant") {
+            messages.push({
+              role: msg.role as "user" | "assistant",
+              content: msg.content,
+            });
+          }
+        }
+      }
+      
+      // Add current user request
+      messages.push({
+        role: "user",
+        content: userMessage,
+      });
+
       const response = await anthropic.messages.create({
         model: "claude-sonnet-4-20250514",
         max_tokens: 8192,
-        messages: [
-          {
-            role: "user",
-            content: userMessage,
-          },
-        ],
+        messages,
         system: SYSTEM_PROMPT,
       });
 

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

@@ -64,6 +64,11 @@ interface VisionFileModification {
   explanation: string;
 }
 
+interface ChatHistoryMessage {
+  role: string;
+  content: string;
+}
+
 interface ApplyFirstRequest {
   action: "apply" | "accept" | "revert" | "preview";
   sessionId?: string;
@@ -73,6 +78,8 @@ interface ApplyFirstRequest {
   focusedElements?: VisionFocusedElement[];
   // For applying a previously previewed set of modifications
   previewedModifications?: VisionFileModification[];
+  /** Conversation history for multi-turn context */
+  chatHistory?: ChatHistoryMessage[];
 }
 
 interface BackupManifest {
@@ -1929,7 +1936,7 @@ export async function POST(request: Request) {
 
   try {
     const body: ApplyFirstRequest = await request.json();
-    const { action, sessionId, screenshot, pageRoute, userPrompt, focusedElements, previewedModifications } = body;
+    const { action, sessionId, screenshot, pageRoute, userPrompt, focusedElements, previewedModifications, chatHistory } = body;
     const projectRoot = process.cwd();
 
     // ========== ACCEPT ACTION ==========
@@ -2840,13 +2847,31 @@ CRITICAL: Your "search" string MUST exist in the file. If you can't find the exa
       let finalExplanation: string | undefined;
       
       while (retryCount <= MAX_RETRIES) {
-        // Build messages for this attempt
-        const currentMessages: Anthropic.MessageCreateParams["messages"] = [
-          {
-            role: "user",
-            content: messageContent,
-          },
-        ];
+        // Build messages for this attempt, starting with chat history if available
+        const currentMessages: Anthropic.MessageCreateParams["messages"] = [];
+        
+        // Add conversation history for multi-turn context (e.g., "make it darker", "undo that")
+        if (chatHistory && chatHistory.length > 0) {
+          for (const msg of chatHistory) {
+            // Only include user and assistant messages, skip system messages
+            if (msg.role === "user" || msg.role === "assistant") {
+              currentMessages.push({
+                role: msg.role as "user" | "assistant",
+                content: msg.content,
+              });
+            }
+          }
+          debugLog("Added chat history to context", { 
+            messageCount: chatHistory.length,
+            preview: chatHistory.slice(-2).map(m => ({ role: m.role, content: m.content.substring(0, 50) }))
+          });
+        }
+        
+        // Add current user message with screenshot
+        currentMessages.push({
+          role: "user",
+          content: messageContent,
+        });
         
         // If this is a retry, add feedback about what went wrong
         if (retryCount > 0 && lastPatchErrors.length > 0) {

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

@@ -64,6 +64,11 @@ interface VisionFileModification {
   previewCSS?: string;
 }
 
+interface ChatHistoryMessage {
+  role: string;
+  content: string;
+}
+
 interface VisionEditRequest {
   action: "edit" | "save";
   screenshot?: string;
@@ -71,6 +76,8 @@ interface VisionEditRequest {
   userPrompt: string;
   focusedElements?: VisionFocusedElement[];
   modifications?: VisionFileModification[];
+  /** Conversation history for multi-turn context */
+  chatHistory?: ChatHistoryMessage[];
 }
 
 interface VisionEditResponse {
@@ -1925,7 +1932,7 @@ export async function POST(request: Request) {
 
   try {
     const body: VisionEditRequest = await request.json();
-    const { action, screenshot, pageRoute, userPrompt, focusedElements, modifications } = body;
+    const { action, screenshot, pageRoute, userPrompt, focusedElements, modifications, chatHistory } = body;
 
     const projectRoot = process.cwd();
 
@@ -2800,13 +2807,31 @@ CRITICAL: Your "search" string MUST exist in the file. If you can't find the exa
       let finalExplanation: string | undefined;
       
       while (retryCount <= MAX_RETRIES) {
-        // Build messages for this attempt
-        const currentMessages: Anthropic.MessageCreateParams["messages"] = [
-          {
-            role: "user",
-            content: messageContent,
-          },
-        ];
+        // Build messages for this attempt, starting with chat history if available
+        const currentMessages: Anthropic.MessageCreateParams["messages"] = [];
+        
+        // Add conversation history for multi-turn context (e.g., "make it darker", "undo that")
+        if (chatHistory && chatHistory.length > 0) {
+          for (const msg of chatHistory) {
+            // Only include user and assistant messages, skip system messages
+            if (msg.role === "user" || msg.role === "assistant") {
+              currentMessages.push({
+                role: msg.role as "user" | "assistant",
+                content: msg.content,
+              });
+            }
+          }
+          debugLog("Added chat history to context", { 
+            messageCount: chatHistory.length,
+            preview: chatHistory.slice(-2).map(m => ({ role: m.role, content: m.content.substring(0, 50) }))
+          });
+        }
+        
+        // Add current user message with screenshot
+        currentMessages.push({
+          role: "user",
+          content: messageContent,
+        });
         
         // If this is a retry, add feedback about what went wrong
         if (retryCount > 0 && lastPatchErrors.length > 0) {

package/dist/assets/components/alert.tsx

@@ -3,8 +3,10 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { AlertCircle, CheckCircle, Info, AlertTriangle, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+export type AlertState = "default" | "hover" | "focus";
+
 const alertVariants = cva(
-  "relative flex w-full items-start gap-4 border p-4 transition-colors",
+  "relative flex w-full items-start border transition-all duration-200",
   {
     variants: {
       variant: {
@@ -14,13 +16,34 @@ const alertVariants = cva(
         warning: "border-warning/30 bg-warning-light text-warning",
         info: "border-info/30 bg-info-light text-info",
       },
+      size: {
+        xs: "gap-2 p-2 rounded-lg text-xs",
+        sm: "gap-2.5 p-3 rounded-xl text-xs",
+        md: "gap-3 p-4 rounded-xl text-sm",
+        lg: "gap-4 p-5 rounded-2xl text-sm",
+      },
     },
     defaultVariants: {
       variant: "default",
+      size: "sm",
     },
   }
 );
 
+const iconSizes = {
+  xs: "h-3.5 w-3.5",
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-5 w-5",
+};
+
+const closeSizes = {
+  xs: "h-3 w-3",
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-4 w-4",
+};
+
 const iconMap = {
   default: Info,
   success: CheckCircle,
@@ -35,10 +58,12 @@ interface AlertProps
   title?: string;
   dismissible?: boolean;
   onClose?: () => void;
+  /** Visual state for Storybook/Figma documentation */
+  state?: AlertState;
 }
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ className, variant = "default", title, children, dismissible, onClose, ...props }, ref) => {
+  ({ className, variant = "default", size = "sm", title, children, dismissible, onClose, state, ...props }, ref) => {
     const Icon = iconMap[variant || "default"];
     const showCloseButton = dismissible || onClose;
 
@@ -47,18 +72,18 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         data-sonance-name="alert"
         ref={ref}
         role="alert"
-        className={cn(alertVariants({ variant }), className)}
+        className={cn(alertVariants({ variant, size }), className)}
         {...props}
       >
-        <Icon className="h-5 w-5 shrink-0" />
-        <div className="flex-1">
+        <Icon className={cn("shrink-0", iconSizes[size || "sm"])} />
+        <div className="flex-1 min-w-0">
           {title && (
-            <h5 id="icon-h5-title" className="mb-1 font-medium leading-none tracking-tight">
+            <h5 id="icon-h5-title" className="mb-0.5 font-medium leading-tight tracking-tight">
               {title}
             </h5>
           )}
           {children && (
-            <div data-sonance-name="alert" className={cn("text-sm", variant === "default" && "text-foreground-secondary")}>
+            <div data-sonance-name="alert" className={cn(variant === "default" && "text-foreground-secondary")}>
               {children}
             </div>
           )}
@@ -66,9 +91,9 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         {showCloseButton && (
           <button
             onClick={onClose}
-            className="shrink-0 rounded-sm p-1 opacity-70 transition-opacity hover:opacity-100"
+            className="shrink-0 rounded-lg p-1 opacity-70 transition-all duration-150 hover:opacity-100 hover:bg-secondary-hover"
           >
-            <X className="h-4 w-4" />
+            <X className={closeSizes[size || "sm"]} />
             <span id="icon-span-close" className="sr-only">Close</span>
           </button>
         )}
@@ -79,3 +104,4 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
 
 Alert.displayName = "Alert";
 
+export { alertVariants };

package/dist/assets/components/badge.tsx

@@ -1,58 +1,86 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
+export type BadgeState = "default" | "hover";
+
 const badgeVariants = cva(
-  "inline-flex items-center font-medium transition-colors",
+  "inline-flex items-center font-medium transition-all duration-150",
   {
     variants: {
       variant: {
-        default: "bg-background-secondary text-foreground border border-border",
-        primary: "bg-primary text-primary-foreground",
-        secondary: "bg-secondary-hover text-secondary-foreground border border-border",
-        success: "bg-success text-white",
-        error: "bg-error text-white",
-        warning: "bg-warning text-white",
-        info: "bg-info text-white",
-        outline: "border border-border text-foreground bg-transparent",
+        default: "bg-background-secondary text-foreground border border-border hover:bg-secondary-hover",
+        primary: "bg-primary text-primary-foreground hover:bg-primary-hover",
+        secondary: "bg-secondary-hover text-secondary-foreground border border-border hover:bg-secondary",
+        success: "bg-success text-white hover:bg-success/90",
+        error: "bg-error text-white hover:bg-error/90",
+        warning: "bg-warning text-white hover:bg-warning/90",
+        info: "bg-info text-white hover:bg-info/90",
+        outline: "border border-border text-foreground bg-transparent hover:bg-secondary-hover",
+        glass: "bg-primary/20 text-primary border border-primary/30 backdrop-blur-sm hover:bg-primary/30",
       },
       size: {
-        sm: "px-2 py-0.5 text-xs",
-        md: "px-2.5 py-0.5 text-xs",
-        lg: "px-3 py-1 text-sm",
+        xs: "px-1.5 py-0.5 text-[10px] rounded-md",
+        sm: "px-2 py-0.5 text-xs rounded-lg",
+        md: "px-2.5 py-0.5 text-xs rounded-full",
+        lg: "px-3 py-1 text-sm rounded-full",
       },
     },
     defaultVariants: {
       variant: "default",
-      size: "md",
+      size: "sm",
     },
   }
 );
 
 interface BadgeProps
   extends React.HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof badgeVariants> {}
+    VariantProps<typeof badgeVariants> {
+  /** Visual state for Storybook/Figma documentation */
+  state?: BadgeState;
+}
 
-export function Badge({ className, variant, size, ...props }: BadgeProps) {
+export function Badge({ className, variant, size, state, ...props }: BadgeProps) {
   return (
-    <span id="badge-span" data-sonance-name="badge" className={cn(badgeVariants({ variant, size }), className)} {...props} />
+    <span
+      id="badge-span"
+      data-sonance-name="badge"
+      className={cn(
+        badgeVariants({ variant, size }),
+        state === "hover" && "bg-secondary-hover",
+        className
+      )}
+      {...props}
+    />
   );
 }
 
+const closeIconSizes = {
+  xs: "h-2.5 w-2.5",
+  sm: "h-3 w-3",
+  md: "h-3 w-3",
+  lg: "h-3.5 w-3.5",
+};
+
 // Chip variant with optional close button
 interface ChipProps extends BadgeProps {
   onClose?: () => void;
 }
 
-export function Chip({ className, variant, size, onClose, children, ...props }: ChipProps) {
+export function Chip({ className, variant, size = "sm", onClose, children, ...props }: ChipProps) {
   return (
-    <span id="chip-span" className={cn(badgeVariants({ variant, size }), "gap-1", className)} data-sonance-name="badge" {...props}>
+    <span
+      id="chip-span"
+      className={cn(badgeVariants({ variant, size }), "gap-1", className)}
+      data-sonance-name="badge"
+      {...props}
+    >
       {children}
       {onClose && (
         <button
           onClick={onClose}
-          className="ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10"
+          className="ml-0.5 rounded-full p-0.5 transition-colors hover:bg-black/10 dark:hover:bg-white/10"
         >
-          <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <svg className={closeIconSizes[size || "sm"]} fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
           </svg>
           <span id="chip-span-remove" className="sr-only">Remove</span>
@@ -62,3 +90,4 @@ export function Chip({ className, variant, size, onClose, children, ...props }:
   );
 }
 
+export { badgeVariants };

package/dist/assets/components/button.tsx

@@ -5,28 +5,31 @@ import { forwardRef } from "react";
 export type ButtonState = "default" | "hover" | "active" | "focus" | "disabled";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center font-medium uppercase tracking-wide transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center font-medium uppercase tracking-wide transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]",
   {
     variants: {
       variant: {
         primary:
-          "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+          "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active shadow-sm hover:shadow-md",
         secondary:
-          "bg-secondary text-secondary-foreground border border-border hover:bg-secondary-hover hover:border-border-hover",
+          "bg-secondary text-secondary-foreground border border-border hover:bg-secondary-hover hover:border-border-hover shadow-sm hover:shadow-md",
         ghost: "text-foreground hover:bg-secondary-hover",
         inverted:
-          "bg-sonance-white text-sonance-charcoal hover:opacity-90",
+          "bg-sonance-white text-sonance-charcoal hover:opacity-90 shadow-sm hover:shadow-md",
+        glass:
+          "bg-primary/90 text-primary-foreground backdrop-blur-sm border border-white/10 hover:bg-primary/80 shadow-lg",
       },
       size: {
-        sm: "h-9 px-4 text-xs",
-        md: "h-11 px-6 text-sm",
-        lg: "h-14 px-8 text-sm",
-        icon: "h-10 w-10",
+        xs: "h-6 px-2.5 text-[10px] rounded-md",
+        sm: "h-8 px-3.5 text-xs rounded-lg",
+        md: "h-9 px-4 text-sm rounded-lg",
+        lg: "h-10 px-5 text-sm rounded-xl",
+        icon: "h-9 w-9 rounded-full",
       },
     },
     defaultVariants: {
       variant: "primary",
-      size: "md",
+      size: "sm",
     },
   }
 );
@@ -37,27 +40,33 @@ const getStateStyles = (variant: string | null | undefined, state?: ButtonState)
 
   const stateMap: Record<string, Record<string, string>> = {
     primary: {
-      hover: "bg-primary-hover",
-      active: "bg-primary-active",
-      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+      hover: "bg-primary-hover shadow-md",
+      active: "bg-primary-active scale-[0.98]",
+      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
       disabled: "opacity-50 pointer-events-none",
     },
     secondary: {
-      hover: "bg-secondary-hover border-border-hover",
-      active: "bg-secondary-hover",
-      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+      hover: "bg-secondary-hover border-border-hover shadow-md",
+      active: "bg-secondary-hover scale-[0.98]",
+      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
       disabled: "opacity-50 pointer-events-none",
     },
     ghost: {
       hover: "bg-secondary-hover",
-      active: "bg-secondary-hover",
-      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+      active: "bg-secondary-hover scale-[0.98]",
+      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
       disabled: "opacity-50 pointer-events-none",
     },
     inverted: {
-      hover: "opacity-90",
-      active: "opacity-80",
-      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+      hover: "opacity-90 shadow-md",
+      active: "opacity-80 scale-[0.98]",
+      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
+      disabled: "opacity-50 pointer-events-none",
+    },
+    glass: {
+      hover: "bg-primary/80 shadow-lg",
+      active: "bg-primary/70 scale-[0.98]",
+      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
       disabled: "opacity-50 pointer-events-none",
     },
   };