sonance-brand-mcp 1.3.115 → 1.3.117

package/dist/assets/components/alert.tsx

@@ -26,7 +26,7 @@ const alertVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      size: "sm",
+      size: "xs",
     },
   }
 );
@@ -64,7 +64,7 @@ interface AlertProps
 }
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ className, variant = "default", size = "sm", title, children, dismissible, onClose, state, ...props }, ref) => {
+  ({ className, variant = "default", size = "xs", title, children, dismissible, onClose, state, ...props }, ref) => {
     const Icon = iconMap[variant || "default"];
     const showCloseButton = dismissible || onClose;
 

package/dist/assets/components/avatar.tsx

@@ -23,7 +23,7 @@ const avatarVariants = cva(
       },
     },
     defaultVariants: {
-      size: "md",
+      size: "sm",
       shape: "circle",
     },
   }
@@ -120,7 +120,7 @@ interface AvatarGroupProps {
   className?: string;
 }
 
-function AvatarGroup({ children, max, size = "md", className }: AvatarGroupProps) {
+function AvatarGroup({ children, max, size = "sm", className }: AvatarGroupProps) {
   const avatars = Array.isArray(children) ? children : [children];
   const displayAvatars = max ? avatars.slice(0, max) : avatars;
   const excess = max ? Math.max(0, avatars.length - max) : 0;

package/dist/assets/components/badge.tsx

@@ -31,7 +31,7 @@ const badgeVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      size: "sm",
+      size: "xs",
     },
   }
 );
@@ -70,7 +70,7 @@ interface ChipProps extends BadgeProps {
   onClose?: () => void;
 }
 
-export function Chip({ className, variant, size = "sm", onClose, children, ...props }: ChipProps) {
+export function Chip({ className, variant, size = "xs", onClose, children, ...props }: ChipProps) {
   return (
     <span
       id="chip-span"

package/dist/assets/components/button.tsx

@@ -36,7 +36,7 @@ const buttonVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      size: "sm",
+      size: "xs",
     },
   }
 );

package/dist/assets/components/card.tsx

@@ -30,7 +30,7 @@ const cardVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "compact",
     },
   }
 );

package/dist/assets/components/checkbox.tsx

@@ -19,7 +19,7 @@ const checkboxVariants = cva(
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: "xs",
     },
   }
 );
@@ -56,7 +56,7 @@ const getStateStyles = (state?: CheckboxState) => {
 };
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, label, description, id, state, disabled, checked, defaultChecked, onChange, onCheckedChange, style, size = "sm", ...props }, ref) => {
+  ({ className, label, description, id, state, disabled, checked, defaultChecked, onChange, onCheckedChange, style, size = "xs", ...props }, ref) => {
     const uniqueId = useId();
     const inputId = id || `checkbox-${uniqueId}`;
     const isDisabled = disabled || state === "disabled";

package/dist/assets/components/dialog.tsx

@@ -20,7 +20,7 @@ interface DialogProps {
   size?: "compact" | "default" | "spacious";
 }
 
-export function Dialog({ open, onClose, children, size = "default" }: DialogProps) {
+export function Dialog({ open, onClose, children, size = "compact" }: DialogProps) {
   // Close on escape
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {

package/dist/assets/components/input.tsx

@@ -24,7 +24,7 @@ const inputVariants = cva(
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: "xs",
       inputVariant: "default",
     },
   }

package/dist/assets/components/kbd.tsx

@@ -34,7 +34,7 @@ const kbdVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      size: "md",
+      size: "sm",
     },
   }
 );

package/dist/assets/components/number-input.tsx

@@ -209,7 +209,7 @@ interface StepperProps extends Omit<NumberInputProps, "hideControls"> {
   size?: "sm" | "md" | "lg";
 }
 
-export function Stepper({ size = "md", className, ...props }: StepperProps) {
+export function Stepper({ size = "sm", className, ...props }: StepperProps) {
   const sizeClasses = {
     sm: "h-8 text-sm",
     md: "h-10 text-base",

package/dist/assets/components/pagination.tsx

@@ -19,7 +19,7 @@ const paginationButtonVariants = cva(
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: "xs",
     },
   }
 );
@@ -38,7 +38,7 @@ const getButtonStateStyles = (state?: PaginationButtonState) => {
   return stateMap[state] || "";
 };
 
-const PaginationSizeContext = createContext<"xs" | "sm" | "md" | "lg">("sm");
+const PaginationSizeContext = createContext<"xs" | "sm" | "md" | "lg">("xs");
 
 const ellipsisSizes = {
   xs: "h-6 w-6 text-[10px]",
@@ -112,7 +112,7 @@ export function Pagination({
   siblingCount = 1,
   showFirstLast = true,
   className,
-  size = "sm",
+  size = "xs",
 }: PaginationProps) {
   const pages = generatePaginationRange(currentPage, totalPages, siblingCount);
 
@@ -233,7 +233,7 @@ export function CompactPagination({
   totalPages,
   onPageChange,
   className,
-  size = "sm",
+  size = "xs",
 }: CompactPaginationProps) {
   return (
     <PaginationSizeContext.Provider value={size}>

package/dist/assets/components/popover.tsx

@@ -9,7 +9,7 @@ type PopoverPosition = "top" | "bottom" | "left" | "right";
 type PopoverSize = "compact" | "default" | "spacious";
 type PopoverVariant = "default" | "glass";
 
-const PopoverContext = createContext<{ size: PopoverSize }>({ size: "default" });
+const PopoverContext = createContext<{ size: PopoverSize }>({ size: "compact" });
 
 const popoverVariants = cva(
   "fixed z-50 min-w-[200px] border shadow-xl animate-in fade-in zoom-in-95 duration-150",
@@ -28,7 +28,7 @@ const popoverVariants = cva(
       },
     },
     defaultVariants: {
-      size: "default",
+      size: "compact",
       popoverVariant: "default",
     },
   }
@@ -59,7 +59,7 @@ export function Popover({
   position = "bottom",
   triggerOn = "click",
   className,
-  size = "default",
+  size = "compact",
   popoverVariant = "default",
 }: PopoverProps) {
   const [isOpen, setIsOpen] = useState(false);
@@ -180,7 +180,7 @@ export function Popover({
   };
 
   return (
-    <PopoverContext.Provider value={{ size: size ?? "default" }}>
+    <PopoverContext.Provider value={{ size: size ?? "compact" }}>
       <div data-sonance-name="popover"
         ref={containerRef}
         className="relative inline-block"

package/dist/assets/components/progress.tsx

@@ -13,7 +13,7 @@ interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
-  ({ className, value = 0, max = 100, label, showValue = false, size = "md", ...props }, ref) => {
+  ({ className, value = 0, max = 100, label, showValue = false, size = "sm", ...props }, ref) => {
     const percentage = Math.min(100, Math.max(0, (value / max) * 100));
 
     const heightClasses = {
@@ -79,7 +79,7 @@ const circularSizeMap = {
 export function CircularProgress({
   value = 0,
   max = 100,
-  size = "md",
+  size = "sm",
   strokeWidth = 4,
   showValue = false,
   className,

package/dist/assets/components/select.tsx

@@ -27,7 +27,7 @@ const selectTriggerVariants = cva(
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: "xs",
       selectVariant: "default",
     },
   }
@@ -237,7 +237,7 @@ interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectEl
 }
 
 export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
-  ({ className, label, error, options, state, disabled, size = "sm", ...props }, ref) => {
+  ({ className, label, error, options, state, disabled, size = "xs", ...props }, ref) => {
     const isDisabled = disabled || state === "disabled";
     const hasError = error || state === "error";
 

package/dist/assets/components/spinner.tsx

@@ -6,7 +6,7 @@ interface SpinnerProps {
   label?: string;
 }
 
-export function Spinner({ size = "md", className, label }: SpinnerProps) {
+export function Spinner({ size = "sm", className, label }: SpinnerProps) {
   const sizeClasses = {
     sm: "h-4 w-4 border-2",
     md: "h-6 w-6 border-2",
@@ -38,7 +38,7 @@ interface DotsSpinnerProps {
   className?: string;
 }
 
-export function DotsSpinner({ size = "md", className }: DotsSpinnerProps) {
+export function DotsSpinner({ size = "sm", className }: DotsSpinnerProps) {
   const dotSizes = {
     sm: "h-1.5 w-1.5",
     md: "h-2 w-2",

package/dist/assets/components/switch.tsx

@@ -18,7 +18,7 @@ const switchTrackVariants = cva(
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: "xs",
     },
   }
 );
@@ -53,7 +53,7 @@ const getTrackStateStyles = (state?: SwitchState) => {
 };
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  ({ className, label, description, id, state, disabled, checked, defaultChecked, onChange, style, size = "sm", ...props }, ref) => {
+  ({ className, label, description, id, state, disabled, checked, defaultChecked, onChange, style, size = "xs", ...props }, ref) => {
     const uniqueId = useId();
     const inputId = id || `switch-${uniqueId}`;
     const isDisabled = disabled || state === "disabled";

package/dist/assets/components/tabs.tsx

@@ -18,7 +18,7 @@ const tabsTriggerVariants = cva(
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: "xs",
     },
   }
 );
@@ -61,7 +61,7 @@ export function Tabs({
   onValueChange,
   className,
   children,
-  size = "sm",
+  size = "xs",
 }: TabsProps) {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const value = controlledValue ?? internalValue;

package/dist/assets/components/tooltip.tsx

@@ -31,7 +31,7 @@ const tooltipContentVariants = cva(
       },
     },
     defaultVariants: {
-      size: "sm",
+      size: "xs",
       tooltipVariant: "default",
     },
   }

package/dist/index.js

@@ -8,6 +8,7 @@ import * as os from "os";
 import { fileURLToPath } from "url";
 import { execSync } from "child_process";
 import sharp from "sharp";
+import { formatCodeBlock, } from "./utils/response-formatter.js";
 // ============================================
 // INSTALLER (--init flag)
 // ============================================
@@ -2915,7 +2916,12 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
             try {
                 const content = fs.readFileSync(getAssetPath("css"), "utf-8");
                 return {
-                    content: [{ type: "text", text: `/* Sonance Brand Theme - globals.css */\n\n${content}` }],
+                    content: [{
+                            type: "text",
+                            text: `# Sonance Brand Theme
+
+${formatCodeBlock(content, { language: "css", filename: "globals.css" })}`
+                        }],
                 };
             }
             catch (e) {
@@ -2964,10 +2970,13 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                     const match = files.find(f => f.toLowerCase() === `${componentName}.tsx`);
                     if (match) {
                         const content = fs.readFileSync(path.join(componentsDir, match), "utf-8");
+                        const matchedName = match.replace('.tsx', '');
                         return {
                             content: [{
                                     type: "text",
-                                    text: `// File: components/ui/${match}\n\n${content}`
+                                    text: `# ${matchedName} Component
+
+${formatCodeBlock(content, { language: "tsx", filename: `components/ui/${match}` })}`
                                 }],
                         };
                     }
@@ -2980,7 +2989,9 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                 return {
                     content: [{
                             type: "text",
-                            text: `// File: components/ui/${componentName}.tsx\n\n${content}`
+                            text: `# ${componentName} Component
+
+${formatCodeBlock(content, { language: "tsx", filename: `components/ui/${componentName}.tsx` })}`
                         }],
                 };
             }
@@ -2997,7 +3008,11 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                 return {
                     content: [{
                             type: "text",
-                            text: `// File: lib/utils.ts\n// These utilities are used by Sonance UI components\n\n${content}`
+                            text: `# Sonance UI Utilities
+
+These utilities are used by Sonance UI components.
+
+${formatCodeBlock(content, { language: "typescript", filename: "lib/utils.ts" })}`
                         }],
                 };
             }
@@ -3280,36 +3295,73 @@ ${!validation.valid ? `
         }
         case "get_full_library": {
             try {
-                let fullLibrary = "# Sonance Component Library\n\n";
-                fullLibrary += "This is the complete Sonance UI component library. Copy these files into your project.\n\n";
-                // Add brand guidelines
-                fullLibrary += "---\n\n## 1. Brand Guidelines\n\n";
+                // Build structured response with multiple content blocks for artifact rendering
+                const contentBlocks = [];
+                // Validate and embed logos first
+                validateLogoMap();
+                const lightLogoPath = LOGO_MAP.default.light;
+                const darkLogoPath = LOGO_MAP.default.dark;
+                await embedLogoWithFeedback(lightLogoPath, "Brand Logo (for Light Backgrounds)", contentBlocks);
+                await embedLogoWithFeedback(darkLogoPath, "Brand Logo (for Dark Backgrounds)", contentBlocks);
+                // Section 1: Overview
+                contentBlocks.push({
+                    type: "text",
+                    text: `# Sonance Component Library
+
+This is the complete Sonance UI component library. Copy these files into your project.
+
+## Table of Contents
+1. [Brand Guidelines](#brand-guidelines)
+2. [CSS Theme](#css-theme)
+3. [Utilities](#utilities)
+4. [UI Components](#ui-components)
+5. [Brand Logos](#brand-logos)`
+                });
+                // Section 2: Brand Guidelines
+                let guidelines = "*Brand guidelines not found*";
                 try {
-                    fullLibrary += fs.readFileSync(getAssetPath("guidelines"), "utf-8");
+                    guidelines = fs.readFileSync(getAssetPath("guidelines"), "utf-8");
                 }
                 catch (e) {
-                    fullLibrary += "*Brand guidelines not found*\n";
+                    // Use fallback
                 }
-                // Add CSS theme
-                fullLibrary += "\n\n---\n\n## 2. CSS Theme (globals.css)\n\n```css\n";
+                contentBlocks.push({
+                    type: "text",
+                    text: `## 1. Brand Guidelines\n\n${guidelines}`
+                });
+                // Section 3: CSS Theme (with filename hint)
+                let cssTheme = "/* CSS theme not found */";
                 try {
-                    fullLibrary += fs.readFileSync(getAssetPath("css"), "utf-8");
+                    cssTheme = fs.readFileSync(getAssetPath("css"), "utf-8");
                 }
                 catch (e) {
-                    fullLibrary += "/* CSS theme not found */";
+                    // Use fallback
                 }
-                fullLibrary += "\n```\n";
-                // Add utilities
-                fullLibrary += "\n\n---\n\n## 3. Utilities (lib/utils.ts)\n\n```typescript\n";
+                contentBlocks.push({
+                    type: "text",
+                    text: `## 2. CSS Theme
+
+${formatCodeBlock(cssTheme, { language: "css", filename: "globals.css" })}`
+                });
+                // Section 4: Utilities (with filename hint)
+                let utils = "// Utils not found";
                 try {
-                    fullLibrary += fs.readFileSync(getAssetPath("utils"), "utf-8");
+                    utils = fs.readFileSync(getAssetPath("utils"), "utf-8");
                 }
                 catch (e) {
-                    fullLibrary += "// Utils not found";
+                    // Use fallback
                 }
-                fullLibrary += "\n```\n";
-                // Add components
-                fullLibrary += "\n\n---\n\n## 4. UI Components\n\n";
+                contentBlocks.push({
+                    type: "text",
+                    text: `## 3. Utilities
+
+${formatCodeBlock(utils, { language: "typescript", filename: "lib/utils.ts" })}`
+                });
+                // Section 5: Components - each as a separate block
+                contentBlocks.push({
+                    type: "text",
+                    text: `## 4. UI Components`
+                });
                 try {
                     const componentsDir = getAssetPath("components");
                     const files = fs.readdirSync(componentsDir)
@@ -3318,24 +3370,35 @@ ${!validation.valid ? `
                     for (const file of files) {
                         const componentName = file.replace('.tsx', '');
                         const content = fs.readFileSync(path.join(componentsDir, file), "utf-8");
-                        fullLibrary += `### ${componentName}\n\nFile: \`components/ui/${file}\`\n\n\`\`\`tsx\n${content}\n\`\`\`\n\n`;
+                        contentBlocks.push({
+                            type: "text",
+                            text: `### ${componentName}
+
+${formatCodeBlock(content, { language: "tsx", filename: `components/ui/${file}` })}`
+                        });
                     }
                 }
                 catch (e) {
-                    fullLibrary += "*Components directory not found*\n";
+                    contentBlocks.push({
+                        type: "text",
+                        text: "*Components directory not found*"
+                    });
                 }
-                // Add logo section with implementation guidance
-                fullLibrary += "\n\n---\n\n## 5. Brand Logos\n\n";
-                fullLibrary += "Use these logos in your application. The Sonance+James+IPORT lockup is the default.\n\n";
-                fullLibrary += `### Logo Paths
+                // Section 6: Logo guidance
+                contentBlocks.push({
+                    type: "text",
+                    text: `## 5. Brand Logos
+
+Use these logos in your application. The Sonance+James+IPORT lockup is the default.
+
+### Logo Paths
 | Variant | Path | Use On |
 |---------|------|--------|
 | **Light Backgrounds** | \`/logos/sonance-james-iport/Sonance_James_IPORT_Lockup_Dark.png\` | White, light gray backgrounds |
 | **Dark Backgrounds** | \`/logos/sonance-james-iport/Sonance_James_IPORT_Lockup_Light.png\` | Charcoal, dark backgrounds |
 
 ### Implementation (Next.js)
-\`\`\`tsx
-import Image from 'next/image';
+${formatCodeBlock(`import Image from 'next/image';
 
 // Light mode logo (for light backgrounds)
 <Image
@@ -3355,8 +3418,7 @@ import Image from 'next/image';
   height={40}
   className="h-10 w-auto hidden dark:block"
   priority
-/>
-\`\`\`
+/>`, { language: "tsx", filename: "components/Logo.tsx" })}
 
 ### Sizing Guidelines
 - Header/Navbar: \`h-8\` to \`h-10\` (32-40px)
@@ -3364,18 +3426,8 @@ import Image from 'next/image';
 - Footer: \`h-6\` to \`h-8\` (24-32px)
 
 ### Other Brand Logos
-Use \`list_logos\` to see all available logos, or \`get_logo\` to retrieve a specific logo with implementation code.
-`;
-                // Build content blocks with embedded logos
-                const contentBlocks = [];
-                // Validate and embed logos
-                validateLogoMap();
-                const lightLogoPath = LOGO_MAP.default.light;
-                const darkLogoPath = LOGO_MAP.default.dark;
-                await embedLogoWithFeedback(lightLogoPath, "Brand Logo (for Light Backgrounds)", contentBlocks);
-                await embedLogoWithFeedback(darkLogoPath, "Brand Logo (for Dark Backgrounds)", contentBlocks);
-                // Add the full library text
-                contentBlocks.push({ type: "text", text: fullLibrary });
+Use \`list_logos\` to see all available logos, or \`get_logo\` to retrieve a specific logo with implementation code.`
+                });
                 return {
                     content: contentBlocks,
                 };
@@ -5380,7 +5432,26 @@ npm install @radix-ui/react-slot @radix-ui/react-dialog
 
 4. Copy the CSS and component files as described below
 `;
-            const response = `# ${palette.name} App Starter Kit
+            // Build structured response with multiple content blocks for artifact rendering
+            const contentBlocks = [];
+            // Validate logo map on first use
+            validateLogoMap();
+            // Map brand to centralized LOGO_MAP (sonance uses default lockup)
+            const brandLogoKey = brand === "sonance" ? "default" : brand;
+            const lightLogoPath = LOGO_MAP[brandLogoKey]?.light || LOGO_MAP.default.light;
+            const darkLogoPath = LOGO_MAP[brandLogoKey]?.dark || LOGO_MAP.default.dark;
+            const lightEmbedded = await embedLogoWithFeedback(lightLogoPath, "Logo for Light Backgrounds", contentBlocks);
+            const darkEmbedded = await embedLogoWithFeedback(darkLogoPath, "Logo for Dark Backgrounds", contentBlocks);
+            if (!lightEmbedded && !darkEmbedded) {
+                contentBlocks.push({
+                    type: "text",
+                    text: `> **Logo Note:** Brand logos could not be embedded. Use \`list_logos\` and \`get_logo\` to retrieve logo assets manually.`,
+                });
+            }
+            // Section 1: Overview and Setup Instructions
+            contentBlocks.push({
+                type: "text",
+                text: `# ${palette.name} App Starter Kit
 
 **App Type:** ${appType}
 **Framework:** ${framework}
@@ -5390,37 +5461,39 @@ npm install @radix-ui/react-slot @radix-ui/react-dialog
 
 ---
 
-${setupInstructions}
-
----
-
-## Global Styles (copy to globals.css)
-
-\`\`\`css
-${cssTheme}
-\`\`\`
-
----
-
-## Utility Functions (copy to lib/utils.ts)
-
-\`\`\`typescript
-${utils}
-\`\`\`
-
----
-
-## Required Components (${componentSources.length} total)
-
-${componentSources.map(c => `### ${c.name}.tsx
+${setupInstructions}`
+            });
+            // Section 2: Global Styles (with filename hint for artifact rendering)
+            contentBlocks.push({
+                type: "text",
+                text: `## Global Styles
 
-\`\`\`tsx
-${c.source}
-\`\`\``).join("\n\n")}
+${formatCodeBlock(cssTheme, { language: "css", filename: "globals.css" })}`
+            });
+            // Section 3: Utility Functions (with filename hint)
+            contentBlocks.push({
+                type: "text",
+                text: `## Utility Functions
 
----
+${formatCodeBlock(utils, { language: "typescript", filename: "lib/utils.ts" })}`
+            });
+            // Section 4: Each component as a separate content block
+            contentBlocks.push({
+                type: "text",
+                text: `## Required Components (${componentSources.length} total)`
+            });
+            for (const comp of componentSources) {
+                contentBlocks.push({
+                    type: "text",
+                    text: `### ${comp.name}.tsx
 
-## Page Template: ${appType}
+${formatCodeBlock(comp.source, { language: "tsx", filename: `components/ui/${comp.name}.tsx` })}`
+                });
+            }
+            // Section 5: Page Template
+            contentBlocks.push({
+                type: "text",
+                text: `## Page Template: ${appType}
 
 ${layout.description}
 
@@ -5430,13 +5503,12 @@ ${layout.structure}
 - Grid: \`${layout.gridLayout}\`
 - Spacing: \`${layout.spacing}\`
 
-\`\`\`tsx
-${layout.template}
-\`\`\`
-
----
-
-## Quick Reference
+${formatCodeBlock(layout.template, { language: "tsx", filename: "app/page.tsx" })}`
+            });
+            // Section 6: Quick Reference
+            contentBlocks.push({
+                type: "text",
+                text: `## Quick Reference
 
 ### ${palette.name} Brand Colors
 - **Primary:** ${palette.primary} (bg-primary, text-primary)
@@ -5461,25 +5533,8 @@ ${layout.template}
 
 ---
 
-Now you have everything needed to build a ${palette.name}-branded ${appType} application!
-`;
-            // Embed logos using centralized LOGO_MAP with proper error feedback
-            const contentBlocks = [];
-            // Validate logo map on first use
-            validateLogoMap();
-            // Map brand to centralized LOGO_MAP (sonance uses default lockup)
-            const brandLogoKey = brand === "sonance" ? "default" : brand;
-            const lightLogoPath = LOGO_MAP[brandLogoKey]?.light || LOGO_MAP.default.light;
-            const darkLogoPath = LOGO_MAP[brandLogoKey]?.dark || LOGO_MAP.default.dark;
-            const lightEmbedded = await embedLogoWithFeedback(lightLogoPath, "Logo for Light Backgrounds", contentBlocks);
-            const darkEmbedded = await embedLogoWithFeedback(darkLogoPath, "Logo for Dark Backgrounds", contentBlocks);
-            if (!lightEmbedded && !darkEmbedded) {
-                contentBlocks.push({
-                    type: "text",
-                    text: `> **Logo Note:** Brand logos could not be embedded. Use \`list_logos\` and \`get_logo\` to retrieve logo assets manually.`,
-                });
-            }
-            contentBlocks.push({ type: "text", text: response });
+Now you have everything needed to build a ${palette.name}-branded ${appType} application!`
+            });
             return {
                 content: contentBlocks,
             };
@@ -5957,31 +6012,49 @@ Use \`redesign_app\` tool on individual files for detailed transformation instru
             }
             const components = COMPONENT_CATEGORIES[category];
             const componentsDir = getAssetPath("components");
-            let response = `# ${category.charAt(0).toUpperCase() + category.slice(1)} Components (${components.length} components)\n\n`;
-            response += `Use these components for ${category === "forms" ? "building forms and capturing user input" :
+            // Build structured response with multiple content blocks
+            const contentBlocks = [];
+            const categoryDescription = category === "forms" ? "building forms and capturing user input" :
                 category === "navigation" ? "navigation and menus" :
                     category === "feedback" ? "user feedback and notifications" :
                         category === "overlays" ? "modals, dialogs, and overlays" :
                             category === "data-display" ? "displaying data and content" :
                                 category === "layout" ? "page structure and layouts" :
-                                    "utility purposes"}.\n\n---\n\n`;
+                                    "utility purposes";
+            contentBlocks.push({
+                type: "text",
+                text: `# ${category.charAt(0).toUpperCase() + category.slice(1)} Components (${components.length} components)
+
+Use these components for ${categoryDescription}.`
+            });
             for (const compName of components) {
                 const filePath = path.join(componentsDir, `${compName}.tsx`);
                 if (fs.existsSync(filePath)) {
                     try {
                         const content = fs.readFileSync(filePath, "utf-8");
-                        response += `## ${compName}\n\nFile: \`components/ui/${compName}.tsx\`\n\n\`\`\`tsx\n${content}\n\`\`\`\n\n---\n\n`;
+                        contentBlocks.push({
+                            type: "text",
+                            text: `## ${compName}
+
+${formatCodeBlock(content, { language: "tsx", filename: `components/ui/${compName}.tsx` })}`
+                        });
                     }
                     catch {
-                        response += `## ${compName}\n\n*Could not read component file*\n\n---\n\n`;
+                        contentBlocks.push({
+                            type: "text",
+                            text: `## ${compName}\n\n*Could not read component file*`
+                        });
                     }
                 }
                 else {
-                    response += `## ${compName}\n\n*Component file not found*\n\n---\n\n`;
+                    contentBlocks.push({
+                        type: "text",
+                        text: `## ${compName}\n\n*Component file not found*`
+                    });
                 }
             }
             return {
-                content: [{ type: "text", text: response }],
+                content: contentBlocks,
             };
         }
         default:

package/dist/utils/response-formatter.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Response formatter utilities for artifact-friendly MCP outputs
+ *
+ * These utilities help format code blocks with proper language identifiers
+ * and filename hints that Claude Desktop can render as artifacts.
+ */
+export interface CodeBlockOptions {
+    language: string;
+    filename?: string;
+}
+export interface MultiFileSection {
+    filename: string;
+    content: string;
+    language: string;
+    description?: string;
+}
+/**
+ * Format a code block with proper language identifier and optional filename hint
+ *
+ * @example
+ * formatCodeBlock(cssContent, { language: 'css', filename: 'globals.css' })
+ * // Returns: ```css:globals.css\n{content}\n```
+ */
+export declare function formatCodeBlock(code: string, options: CodeBlockOptions): string;
+/**
+ * Format multiple files as separate code blocks with headers
+ *
+ * @example
+ * formatMultiFile([
+ *   { filename: 'button.tsx', content: '...', language: 'tsx' },
+ *   { filename: 'card.tsx', content: '...', language: 'tsx' }
+ * ])
+ */
+export declare function formatMultiFile(sections: MultiFileSection[]): string;
+/**
+ * Auto-detect the language of code content
+ *
+ * @example
+ * detectLanguage('import React from "react"') // returns 'tsx'
+ * detectLanguage(':root { --color: red; }')   // returns 'css'
+ */
+export declare function detectLanguage(content: string): string;
+/**
+ * Split large content into manageable chunks based on natural boundaries
+ *
+ * @param content - The content to split
+ * @param options - Split options
+ * @returns Array of content chunks
+ */
+export declare function splitContent(content: string, options?: {
+    maxLines?: number;
+    splitOn?: RegExp;
+}): string[];
+/**
+ * Generate a table of contents from markdown content
+ *
+ * @param content - Markdown content with headings
+ * @returns Markdown-formatted table of contents
+ */
+export declare function generateTOC(content: string): string;
+/**
+ * Create a section with header and formatted code block
+ *
+ * @example
+ * createCodeSection('Global Styles', cssContent, { language: 'css', filename: 'globals.css' })
+ */
+export declare function createCodeSection(title: string, code: string, options: CodeBlockOptions): string;
+/**
+ * Get file extension to language mapping
+ */
+export declare function extensionToLanguage(ext: string): string;

package/dist/utils/response-formatter.js

@@ -0,0 +1,152 @@
+/**
+ * Response formatter utilities for artifact-friendly MCP outputs
+ *
+ * These utilities help format code blocks with proper language identifiers
+ * and filename hints that Claude Desktop can render as artifacts.
+ */
+/**
+ * Format a code block with proper language identifier and optional filename hint
+ *
+ * @example
+ * formatCodeBlock(cssContent, { language: 'css', filename: 'globals.css' })
+ * // Returns: ```css:globals.css\n{content}\n```
+ */
+export function formatCodeBlock(code, options) {
+    const { language, filename } = options;
+    const header = filename ? `${language}:${filename}` : language;
+    return `\`\`\`${header}\n${code}\n\`\`\``;
+}
+/**
+ * Format multiple files as separate code blocks with headers
+ *
+ * @example
+ * formatMultiFile([
+ *   { filename: 'button.tsx', content: '...', language: 'tsx' },
+ *   { filename: 'card.tsx', content: '...', language: 'tsx' }
+ * ])
+ */
+export function formatMultiFile(sections) {
+    return sections.map(section => {
+        const header = section.description
+            ? `### ${section.filename}\n\n${section.description}\n\n`
+            : `### ${section.filename}\n\n`;
+        return header + formatCodeBlock(section.content, {
+            language: section.language,
+            filename: section.filename
+        });
+    }).join('\n\n---\n\n');
+}
+/**
+ * Auto-detect the language of code content
+ *
+ * @example
+ * detectLanguage('import React from "react"') // returns 'tsx'
+ * detectLanguage(':root { --color: red; }')   // returns 'css'
+ */
+export function detectLanguage(content) {
+    // React/TSX patterns (check first - most specific)
+    if (/^['"]use client['"]|import.*from\s+['"]react['"]|<[A-Z][a-zA-Z]*[\s/>]/m.test(content)) {
+        return 'tsx';
+    }
+    // CSS patterns
+    if (/^:root\s*\{|@tailwind|@layer|--[a-z-]+:|@import\s+['"]|@media\s*\(/m.test(content)) {
+        return 'css';
+    }
+    // TypeScript patterns (non-React)
+    if (/^interface\s+\w+|^type\s+\w+\s*=|^export\s+type\s+|:\s*(string|number|boolean|void)\s*[;,)]/m.test(content)) {
+        return 'typescript';
+    }
+    // JSON patterns
+    if (/^\s*\{[\s\S]*"[^"]+"\s*:/m.test(content)) {
+        return 'json';
+    }
+    // Python patterns
+    if (/^from\s+\w+\s+import|^import\s+\w+|^def\s+\w+\s*\(|^class\s+\w+(\s*\(|:)/m.test(content)) {
+        return 'python';
+    }
+    // Bash/Shell patterns
+    if (/^#!/m.test(content) || /^\s*(npm|npx|yarn|pnpm|git|cd|mkdir|curl|wget)\s/m.test(content)) {
+        return 'bash';
+    }
+    // HTML patterns
+    if (/^<!DOCTYPE|^<html|^<head|^<body/im.test(content)) {
+        return 'html';
+    }
+    // Markdown patterns
+    if (/^#{1,6}\s+|^\*{1,2}[^*]|^\[.*\]\(.*\)|^>\s+/m.test(content)) {
+        return 'markdown';
+    }
+    return 'text';
+}
+/**
+ * Split large content into manageable chunks based on natural boundaries
+ *
+ * @param content - The content to split
+ * @param options - Split options
+ * @returns Array of content chunks
+ */
+export function splitContent(content, options = {}) {
+    const { maxLines = 200, splitOn = /^(?=#{1,3}\s)/m } = options;
+    const lines = content.split('\n');
+    if (lines.length <= maxLines) {
+        return [content];
+    }
+    // Try to split on natural boundaries (headers)
+    const sections = content.split(splitOn).filter(Boolean);
+    if (sections.length > 1) {
+        return sections;
+    }
+    // Fall back to line-based splitting
+    const chunks = [];
+    for (let i = 0; i < lines.length; i += maxLines) {
+        chunks.push(lines.slice(i, i + maxLines).join('\n'));
+    }
+    return chunks;
+}
+/**
+ * Generate a table of contents from markdown content
+ *
+ * @param content - Markdown content with headings
+ * @returns Markdown-formatted table of contents
+ */
+export function generateTOC(content) {
+    const headings = content.match(/^#{1,3}\s+.+$/gm) || [];
+    return headings.map(heading => {
+        const level = (heading.match(/^#+/) || [''])[0].length;
+        const text = heading.replace(/^#+\s+/, '');
+        const anchor = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/-+$/, '');
+        const indent = '  '.repeat(level - 1);
+        return `${indent}- [${text}](#${anchor})`;
+    }).join('\n');
+}
+/**
+ * Create a section with header and formatted code block
+ *
+ * @example
+ * createCodeSection('Global Styles', cssContent, { language: 'css', filename: 'globals.css' })
+ */
+export function createCodeSection(title, code, options) {
+    return `## ${title}\n\n${formatCodeBlock(code, options)}`;
+}
+/**
+ * Get file extension to language mapping
+ */
+export function extensionToLanguage(ext) {
+    const map = {
+        '.tsx': 'tsx',
+        '.ts': 'typescript',
+        '.jsx': 'tsx',
+        '.js': 'javascript',
+        '.css': 'css',
+        '.scss': 'scss',
+        '.json': 'json',
+        '.md': 'markdown',
+        '.py': 'python',
+        '.html': 'html',
+        '.sh': 'bash',
+        '.bash': 'bash',
+        '.yaml': 'yaml',
+        '.yml': 'yaml',
+    };
+    return map[ext.toLowerCase()] || 'text';
+}

package/package.json

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