sonance-brand-mcp 1.1.0 → 1.1.1

package/dist/assets/components/accordion.tsx

@@ -14,6 +14,7 @@ const AccordionContext = createContext<AccordionContextValue | null>(null);
 
 interface AccordionProps {
   type?: "single" | "multiple";
+  collapsible?: boolean;
   defaultValue?: string | string[];
   className?: string;
   children: React.ReactNode;
@@ -21,6 +22,7 @@ interface AccordionProps {
 
 export function Accordion({
   type = "single",
+  collapsible = false,
   defaultValue,
   className,
   children,
@@ -33,7 +35,11 @@ export function Accordion({
   const toggleItem = (value: string) => {
     setOpenItems((prev) => {
       if (type === "single") {
-        return prev.includes(value) ? [] : [value];
+        // If collapsible, allow closing the open item; otherwise, keep it open
+        if (prev.includes(value)) {
+          return collapsible ? [] : prev;
+        }
+        return [value];
       }
       return prev.includes(value)
         ? prev.filter((v) => v !== value)

package/dist/assets/components/alert.tsx

@@ -33,12 +33,14 @@ interface AlertProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof alertVariants> {
   title?: string;
+  dismissible?: boolean;
   onClose?: () => void;
 }
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ className, variant = "default", title, children, onClose, ...props }, ref) => {
+  ({ className, variant = "default", title, children, dismissible, onClose, ...props }, ref) => {
     const Icon = iconMap[variant || "default"];
+    const showCloseButton = dismissible || onClose;
 
     return (
       <div
@@ -60,7 +62,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
             </div>
           )}
         </div>
-        {onClose && (
+        {showCloseButton && (
           <button
             onClick={onClose}
             className="shrink-0 rounded-sm p-1 opacity-70 transition-opacity hover:opacity-100"

package/dist/assets/components/image.tsx

@@ -121,8 +121,7 @@ export function ZoomImage({ zoomScale = 1.1, className, ...props }: ZoomImagePro
       <Image
         {...props}
         className={cn(
-          "transition-transform duration-300 hover:scale-[var(--zoom-scale)]",
-          props.className
+          "transition-transform duration-300 hover:scale-[var(--zoom-scale)]"
         )}
         style={{ "--zoom-scale": zoomScale } as React.CSSProperties}
       />

package/dist/assets/components/kbd.tsx

@@ -27,7 +27,7 @@ const kbdVariants = cva(
 interface KbdProps
   extends React.HTMLAttributes<HTMLElement>,
     VariantProps<typeof kbdVariants> {
-  keys?: string | string[];
+  keys?: string | readonly string[];
 }
 
 export const Kbd = forwardRef<HTMLElement, KbdProps>(

package/dist/assets/components/progress.tsx

@@ -62,32 +62,39 @@ Progress.displayName = "Progress";
 interface CircularProgressProps {
   value?: number;
   max?: number;
-  size?: number;
+  size?: "sm" | "md" | "lg" | number;
   strokeWidth?: number;
   showValue?: boolean;
   className?: string;
 }
 
+const circularSizeMap = {
+  sm: 32,
+  md: 48,
+  lg: 64,
+};
+
 export function CircularProgress({
   value = 0,
   max = 100,
-  size = 48,
+  size = "md",
   strokeWidth = 4,
   showValue = false,
   className,
 }: CircularProgressProps) {
+  const resolvedSize = typeof size === "number" ? size : circularSizeMap[size];
   const percentage = Math.min(100, Math.max(0, (value / max) * 100));
-  const radius = (size - strokeWidth) / 2;
+  const radius = (resolvedSize - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const strokeDashoffset = circumference - (percentage / 100) * circumference;
 
   return (
     <div className={cn("relative inline-flex items-center justify-center", className)}>
-      <svg width={size} height={size} className="-rotate-90">
+      <svg width={resolvedSize} height={resolvedSize} className="-rotate-90">
         {/* Background circle */}
         <circle
-          cx={size / 2}
-          cy={size / 2}
+          cx={resolvedSize / 2}
+          cy={resolvedSize / 2}
           r={radius}
           fill="none"
           stroke="currentColor"
@@ -96,8 +103,8 @@ export function CircularProgress({
         />
         {/* Progress circle */}
         <circle
-          cx={size / 2}
-          cy={size / 2}
+          cx={resolvedSize / 2}
+          cy={resolvedSize / 2}
           r={radius}
           fill="none"
           stroke="currentColor"

package/dist/assets/components/tooltip.tsx

@@ -8,7 +8,9 @@ type TooltipPosition = "top" | "bottom" | "left" | "right";
 interface TooltipProps {
   content: React.ReactNode;
   children: React.ReactNode;
+  /** @deprecated Use `side` instead */
   position?: TooltipPosition;
+  side?: TooltipPosition;
   delay?: number;
   className?: string;
 }
@@ -16,10 +18,13 @@ interface TooltipProps {
 export function Tooltip({
   content,
   children,
-  position = "top",
+  position,
+  side = "top",
   delay = 200,
   className,
 }: TooltipProps) {
+  // Support both `position` (legacy) and `side` (preferred)
+  const resolvedPosition = position ?? side;
   const [isVisible, setIsVisible] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -73,7 +78,7 @@ export function Tooltip({
           className={cn(
             "absolute z-50 px-3 py-1.5 text-xs font-medium text-white bg-sonance-charcoal whitespace-nowrap",
             "animate-in fade-in zoom-in-95 duration-150",
-            positionClasses[position],
+            positionClasses[resolvedPosition],
             className
           )}
         >
@@ -81,7 +86,7 @@ export function Tooltip({
           <span
             className={cn(
               "absolute border-4",
-              arrowClasses[position]
+              arrowClasses[resolvedPosition]
             )}
           />
         </div>

package/dist/index.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
-import { CallToolRequestSchema, ListToolsRequestSchema, ListResourcesRequestSchema, ReadResourceRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
+import { CallToolRequestSchema, ListToolsRequestSchema, ListResourcesRequestSchema, ReadResourceRequestSchema, ListPromptsRequestSchema, GetPromptRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
 import * as fs from "fs";
 import * as path from "path";
 import * as os from "os";
@@ -168,6 +168,7 @@ const server = new Server({
     capabilities: {
         tools: {},
         resources: {},
+        prompts: {},
     },
 });
 // ============================================
@@ -309,6 +310,35 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
                     required: [],
                 },
             },
+            {
+                name: "design_component",
+                description: "Returns brand-specific design tokens, colors, implementation rules, and logo assets for designing a component. Smart defaults: Sonance/Light/Default logo lockup if not specified.",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        brand: {
+                            type: "string",
+                            enum: ["sonance", "iport", "blaze"],
+                            description: "Which brand's styling to use. Defaults to 'sonance' if not specified.",
+                        },
+                        theme: {
+                            type: "string",
+                            enum: ["light", "dark"],
+                            description: "The color scheme to use. Defaults to 'light' if not specified.",
+                        },
+                        logo_preference: {
+                            type: "string",
+                            enum: ["default", "sonance", "iport", "blaze"],
+                            description: "Which logo to use. 'default' = Sonance+James+IPORT lockup. Or specify 'sonance', 'iport', or 'blaze' for individual brand logos. Defaults to 'default' if not specified.",
+                        },
+                        component_description: {
+                            type: "string",
+                            description: "What the user wants to design (e.g., 'hero section', 'pricing card', 'navigation bar')",
+                        },
+                    },
+                    required: ["component_description"],
+                },
+            },
         ],
     };
 });
@@ -530,6 +560,258 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                 };
             }
         }
+        case "design_component": {
+            const rawArgs = args;
+            if (!rawArgs.component_description) {
+                return {
+                    content: [{ type: "text", text: "Error: component_description is required. What would you like to design?" }],
+                    isError: true,
+                };
+            }
+            // Apply smart defaults and track what was defaulted
+            const defaultsUsed = [];
+            const brand = rawArgs.brand || (() => { defaultsUsed.push("brand → Sonance"); return "sonance"; })();
+            const theme = rawArgs.theme || (() => { defaultsUsed.push("theme → Light"); return "light"; })();
+            const logoPreference = rawArgs.logo_preference || (() => { defaultsUsed.push("logo → Default lockup"); return "default"; })();
+            const component_description = rawArgs.component_description;
+            // Logo path mapping based on preference and theme
+            // Light theme = dark logo (for light backgrounds), Dark theme = light logo (for dark backgrounds)
+            const logoMap = {
+                default: {
+                    light: "/logos/sonance-james-iport/Sonance_James_IPORT_Lockup_Dark.png",
+                    dark: "/logos/sonance-james-iport/Sonance_James_IPORT_Lockup_Light.png",
+                },
+                sonance: {
+                    light: "/logos/sonance/Sonance_Logo_2C_Dark_RGB.png",
+                    dark: "/logos/sonance/Sonance_Logo_2C_Light_RGB.png",
+                },
+                iport: {
+                    light: "/logos/iport/IPORT_Sonance_LockUp_2C_Dark_RGB.png",
+                    dark: "/logos/iport/IPORT_Sonance_LockUp_2C_Light_RGB.png",
+                },
+                blaze: {
+                    light: "/logos/blaze/BlazeBySonance_Logo_Lockup_3C_Dark_RGB_05162025.png",
+                    dark: "/logos/blaze/BlazeBySonance_Logo_Lockup_2C_Light_RGB_05162025.png",
+                },
+            };
+            const logoPath = logoMap[logoPreference]?.[theme] || logoMap.default[theme];
+            const logoPreferenceLabel = logoPreference === "default"
+                ? "Sonance + James + IPORT Lockup"
+                : `${logoPreference.charAt(0).toUpperCase() + logoPreference.slice(1)} Only`;
+            // Brand-specific design tokens
+            const brandTokens = {
+                sonance: {
+                    light: `## Sonance Light Theme Design Tokens
+
+### Colors
+- **Primary/Accent**: \`#00D3C8\` (Sonance Teal) — \`bg-sonance-blue\`, \`text-sonance-blue\`
+- **Text Primary**: \`#333F48\` (Charcoal) — \`text-sonance-charcoal\`
+- **Background**: \`#FFFFFF\` or \`#F5F5F5\` — \`bg-white\`, \`bg-sonance-light-gray\`
+- **Borders/Dividers**: \`#D9D9D6\` — \`border-sonance-light-gray\`
+
+### Implementation Rules
+- Use light backgrounds (white or light gray)
+- Charcoal text on light backgrounds for readability
+- Teal accent for CTAs, links, and interactive elements
+- Minimal borders, prefer subtle shadows for elevation
+
+### Tailwind Classes
+\`\`\`jsx
+// Primary Button
+<button className="bg-sonance-blue text-white px-6 py-3 text-sm font-medium uppercase tracking-wide">
+
+// Card
+<div className="bg-white border border-sonance-light-gray rounded-sm p-6 shadow-sm">
+
+// Section
+<section className="bg-sonance-light-gray text-sonance-charcoal">
+\`\`\``,
+                    dark: `## Sonance Dark Theme Design Tokens
+
+### Colors
+- **Primary/Accent**: \`#00D3C8\` (Sonance Teal) — \`bg-sonance-blue\`, \`text-sonance-blue\`
+- **Text Primary**: \`#FFFFFF\` — \`text-white\`
+- **Background**: \`#333F48\` (Charcoal) — \`bg-sonance-charcoal\`
+- **Text Secondary**: \`#D9D9D6\` — \`text-sonance-light-gray\`
+
+### Implementation Rules
+- Use charcoal background for dark sections
+- White text on charcoal for primary content
+- Teal accent for CTAs and highlights
+- Use light-gray for secondary text and borders
+
+### Tailwind Classes
+\`\`\`jsx
+// Primary Button
+<button className="bg-sonance-blue text-sonance-charcoal px-6 py-3 text-sm font-medium uppercase tracking-wide">
+
+// Card
+<div className="bg-sonance-charcoal border border-white/10 rounded-sm p-6">
+
+// Section
+<section className="bg-sonance-charcoal text-white">
+\`\`\``,
+                },
+                iport: {
+                    light: `## IPORT Light Theme Design Tokens
+
+### Colors
+- **Primary/Accent**: \`#FC4C02\` (IPORT Orange) — \`bg-iport-orange\`, \`text-iport-orange\`
+- **Text Primary**: \`#0F161D\` — \`text-iport-dark\`
+- **Background**: \`#FFFFFF\` — \`bg-white\`
+- **Card Background**: \`#F5F5F5\` — \`bg-gray-100\`
+
+### Implementation Rules
+- IPORT typically uses dark UI, but light mode should use orange accents sparingly
+- Orange for CTAs and interactive elements only
+- Dark text on light backgrounds
+- Clean, minimal aesthetic
+
+### Tailwind Classes
+\`\`\`jsx
+// Primary Button
+<button className="bg-iport-orange text-white px-6 py-3 text-sm font-medium uppercase tracking-wide">
+
+// Card
+<div className="bg-white border border-gray-200 rounded-sm p-6">
+
+// Section
+<section className="bg-gray-100 text-iport-dark">
+\`\`\``,
+                    dark: `## IPORT Dark Theme Design Tokens
+
+### Colors
+- **Primary/Accent**: \`#FC4C02\` (IPORT Orange) — \`bg-iport-orange\`, \`text-iport-orange\`
+- **Text Primary**: \`#FFFFFF\` — \`text-iport-white\`, \`text-white\`
+- **Background**: \`#0F161D\` — \`bg-iport-dark\`
+- **Card Background**: \`#1C1E20\` — \`bg-iport-dark-gray\`
+
+### Implementation Rules
+- IPORT's signature is dark UI with orange accents
+- Use orange for primary CTAs and interactive elements
+- White text on dark backgrounds
+- Cards should use slightly lighter dark gray for contrast
+
+### Tailwind Classes
+\`\`\`jsx
+// Primary Button
+<button className="bg-iport-orange text-white px-6 py-3 text-sm font-medium uppercase tracking-wide hover:bg-iport-orange/90">
+
+// Card
+<div className="bg-iport-dark-gray border border-white/10 rounded-sm p-6">
+
+// Section
+<section className="bg-iport-dark text-iport-white">
+\`\`\``,
+                },
+                blaze: {
+                    light: `## Blaze Audio Light Theme Design Tokens
+
+### Colors
+- **Primary Accent**: \`#00A3E1\` (Blaze Blue) — \`bg-blaze-blue\`, \`text-blaze-blue\`
+- **Secondary Accent**: \`#C02B0A\` (Blaze Red) — \`bg-blaze-red\` (for alerts/emphasis)
+- **Text Primary**: \`#28282B\` — \`text-blaze-dark-gray\`
+- **Background**: \`#FFFFFF\` — \`bg-white\`
+
+### Implementation Rules
+- Blaze typically uses dark UI, but light mode should feature blue accents
+- Blue for primary CTAs, red for alerts or secondary emphasis
+- Dark text on light backgrounds
+- Modern, tech-forward aesthetic
+
+### Tailwind Classes
+\`\`\`jsx
+// Primary Button
+<button className="bg-blaze-blue text-white px-6 py-3 text-sm font-medium uppercase tracking-wide">
+
+// Alert/Emphasis Button
+<button className="bg-blaze-red text-white px-6 py-3 text-sm font-medium uppercase tracking-wide">
+
+// Card
+<div className="bg-white border border-gray-200 rounded-sm p-6">
+\`\`\``,
+                    dark: `## Blaze Audio Dark Theme Design Tokens
+
+### Colors
+- **Primary Accent**: \`#00A3E1\` (Blaze Blue) — \`bg-blaze-blue\`, \`text-blaze-blue\`
+- **Secondary Accent**: \`#C02B0A\` (Blaze Red) — \`bg-blaze-red\` (for alerts/emphasis)
+- **Text Primary**: \`#FFFFFF\` — \`text-blaze-white\`, \`text-white\`
+- **Background**: \`#28282B\` — \`bg-blaze-dark-gray\`
+- **Card Background**: \`#313131\` — \`bg-blaze-gray\`
+
+### Implementation Rules
+- Blaze's signature is dark UI with blue accents
+- Blue for primary CTAs and interactive elements
+- Red for alerts, errors, or secondary emphasis
+- White text on dark backgrounds
+- Cards use slightly lighter gray for contrast
+
+### Tailwind Classes
+\`\`\`jsx
+// Primary Button
+<button className="bg-blaze-blue text-white px-6 py-3 text-sm font-medium uppercase tracking-wide hover:bg-blaze-blue/90">
+
+// Alert Button
+<button className="bg-blaze-red text-white px-6 py-3 text-sm font-medium uppercase tracking-wide">
+
+// Card
+<div className="bg-blaze-gray border border-white/10 rounded-sm p-6">
+
+// Section
+<section className="bg-blaze-dark-gray text-blaze-white">
+\`\`\``,
+                },
+            };
+            const tokens = brandTokens[brand]?.[theme];
+            if (!tokens) {
+                return {
+                    content: [{ type: "text", text: `Invalid brand/theme combination: ${brand}/${theme}` }],
+                    isError: true,
+                };
+            }
+            // Build defaults notice if any were applied
+            const defaultsNotice = defaultsUsed.length > 0
+                ? `\n> **Note**: Defaults applied: ${defaultsUsed.join(", ")}. Specify \`brand\`, \`theme\`, or \`logo_preference\` explicitly for different styling.\n`
+                : "";
+            const response = `# Design Context for: ${component_description}
+
+**Brand**: ${brand.toUpperCase()}
+**Theme**: ${theme.charAt(0).toUpperCase() + theme.slice(1)}
+**Logo**: ${logoPreferenceLabel}
+${defaultsNotice}
+${tokens}
+
+## Logo Asset
+- **Selected**: ${logoPreferenceLabel}
+- **Path**: \`${logoPath}\`
+- **Usage**: 
+\`\`\`jsx
+<img src="${logoPath}" alt="${logoPreferenceLabel}" className="h-8 w-auto" />
+// or with Next.js Image:
+<Image src="${logoPath}" alt="${logoPreferenceLabel}" width={200} height={40} />
+\`\`\`
+
+> **Tip**: To use a different logo, specify \`logo_preference\`: "default" (Sonance+James+IPORT), "sonance", "iport", or "blaze"
+
+## Typography (All Brands)
+- **Font Family**: Montserrat
+- **Headlines**: font-weight 300 (Light) or 500 (Medium), letter-spacing -0.02em
+- **Body**: font-weight 400 (Regular), line-height 1.6
+- **Buttons/CTAs**: font-weight 500, uppercase, letter-spacing 0.08em
+
+## Design Principles
+1. Generous whitespace — layouts should feel "breathable"
+2. Minimal borders — use subtle dividers, not heavy borders
+3. Refined shadows — subtle elevation, not aggressive drop shadows
+4. Premium feel — every element should feel high-end and intentional
+
+---
+
+Now design the **${component_description}** following these tokens and principles.`;
+            return {
+                content: [{ type: "text", text: response }],
+            };
+        }
         default:
             return {
                 content: [{ type: "text", text: `Unknown tool: ${name}` }],
@@ -538,6 +820,105 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
     }
 });
 // ============================================
+// PROMPTS (user-initiated templates)
+// ============================================
+server.setRequestHandler(ListPromptsRequestSchema, async () => ({
+    prompts: [
+        {
+            name: "design",
+            description: "Design a new Sonance-branded UI component with the correct brand colors and styling",
+            arguments: [
+                {
+                    name: "component",
+                    description: "What to design (e.g., hero section, pricing card, navigation bar)",
+                    required: true,
+                },
+                {
+                    name: "brand",
+                    description: "Which brand: sonance, iport, or blaze",
+                    required: true,
+                },
+                {
+                    name: "theme",
+                    description: "Color scheme: light or dark",
+                    required: true,
+                },
+            ],
+        },
+        {
+            name: "brand-check",
+            description: "Verify if code follows Sonance brand guidelines",
+            arguments: [
+                {
+                    name: "code",
+                    description: "The code to check against brand guidelines",
+                    required: true,
+                },
+            ],
+        },
+    ],
+}));
+server.setRequestHandler(GetPromptRequestSchema, async (request) => {
+    const { name, arguments: promptArgs } = request.params;
+    if (name === "design") {
+        const component = promptArgs?.component || "component";
+        const brand = promptArgs?.brand || "sonance";
+        const theme = promptArgs?.theme || "light";
+        return {
+            messages: [
+                {
+                    role: "user",
+                    content: {
+                        type: "text",
+                        text: `Design a ${component} for the ${brand.toUpperCase()} brand using ${theme} theme.
+
+Please use the design_component tool first to get the correct design tokens, then create the component following Sonance brand guidelines.
+
+Requirements:
+- Brand: ${brand}
+- Theme: ${theme} mode
+- Component: ${component}
+
+Follow these steps:
+1. Call design_component with the brand, theme, and component description
+2. Use the returned design tokens and Tailwind classes
+3. Generate clean, production-ready React/JSX code
+4. Follow typography rules (Montserrat font, correct weights)
+5. Apply design principles (generous whitespace, minimal borders, premium feel)`,
+                    },
+                },
+            ],
+        };
+    }
+    if (name === "brand-check") {
+        const code = promptArgs?.code || "";
+        return {
+            messages: [
+                {
+                    role: "user",
+                    content: {
+                        type: "text",
+                        text: `Check this code against Sonance brand guidelines:
+
+\`\`\`
+${code}
+\`\`\`
+
+Use get_brand_guidelines to verify:
+1. Correct color usage (no hardcoded colors, proper semantic tokens)
+2. Typography (Montserrat font, correct weights - never bold/700 for headlines)
+3. Design patterns (generous whitespace, minimal borders, premium feel)
+4. Component patterns (correct button styles, card styling, etc.)
+
+Provide specific feedback on what matches and what needs to change.`,
+                    },
+                },
+            ],
+        };
+    }
+    throw new Error(`Unknown prompt: ${name}`);
+});
+// ============================================
 // START SERVER
 // ============================================
 async function main() {

package/package.json

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