@tpitre/story-ui 2.1.4 → 2.2.0

package/dist/mcp-server/sessionManager.js

@@ -0,0 +1,125 @@
+export class SessionManager {
+    constructor() {
+        this.sessions = new Map();
+        this.currentStoryId = null;
+    }
+    static getInstance() {
+        if (!SessionManager.instance) {
+            SessionManager.instance = new SessionManager();
+        }
+        return SessionManager.instance;
+    }
+    /**
+     * Track a newly generated story in the current session
+     */
+    trackStory(sessionId, story) {
+        const sessionStories = this.sessions.get(sessionId) || [];
+        // Extract keywords from prompt and title for smart matching
+        const keywords = this.extractKeywords(story.prompt + ' ' + story.title);
+        const sessionStory = {
+            ...story,
+            timestamp: new Date(),
+            keywords
+        };
+        sessionStories.push(sessionStory);
+        this.sessions.set(sessionId, sessionStories);
+        this.currentStoryId = story.id;
+        console.error(`[SessionManager] Tracked story: ${story.title} (${story.id}) for session ${sessionId}`);
+    }
+    /**
+     * Get the current story being discussed
+     */
+    getCurrentStory(sessionId) {
+        const stories = this.sessions.get(sessionId) || [];
+        if (this.currentStoryId) {
+            return stories.find(s => s.id === this.currentStoryId) || null;
+        }
+        // Return the most recent story if no current story is set
+        return stories[stories.length - 1] || null;
+    }
+    /**
+     * Find a story by context (keywords in the user's message)
+     */
+    findStoryByContext(sessionId, userMessage) {
+        const stories = this.sessions.get(sessionId) || [];
+        if (stories.length === 0)
+            return null;
+        const messageKeywords = this.extractKeywords(userMessage.toLowerCase());
+        // Score each story based on keyword matches
+        const scoredStories = stories.map(story => {
+            const score = story.keywords.filter(keyword => messageKeywords.some(msgKeyword => msgKeyword.includes(keyword) || keyword.includes(msgKeyword))).length;
+            return { story, score };
+        });
+        // Sort by score and recency
+        scoredStories.sort((a, b) => {
+            if (a.score !== b.score)
+                return b.score - a.score;
+            return b.story.timestamp.getTime() - a.story.timestamp.getTime();
+        });
+        // Return the best match if it has any keyword matches
+        if (scoredStories[0].score > 0) {
+            this.currentStoryId = scoredStories[0].story.id;
+            console.error(`[SessionManager] Found story by context: ${scoredStories[0].story.title} (score: ${scoredStories[0].score})`);
+            return scoredStories[0].story;
+        }
+        return null;
+    }
+    /**
+     * Get all stories in the current session
+     */
+    getSessionStories(sessionId) {
+        return this.sessions.get(sessionId) || [];
+    }
+    /**
+     * Set the current story being discussed
+     */
+    setCurrentStory(sessionId, storyId) {
+        const stories = this.sessions.get(sessionId) || [];
+        if (stories.some(s => s.id === storyId)) {
+            this.currentStoryId = storyId;
+            console.error(`[SessionManager] Set current story to: ${storyId}`);
+        }
+    }
+    /**
+     * Clear session data (for cleanup)
+     */
+    clearSession(sessionId) {
+        this.sessions.delete(sessionId);
+        if (this.currentStoryId) {
+            this.currentStoryId = null;
+        }
+    }
+    /**
+     * Extract meaningful keywords from text
+     */
+    extractKeywords(text) {
+        // Remove common words and extract meaningful terms
+        const commonWords = new Set([
+            'a', 'an', 'the', 'and', 'or', 'but', 'in', 'on', 'at', 'to', 'for',
+            'of', 'with', 'by', 'from', 'up', 'about', 'into', 'through', 'during',
+            'before', 'after', 'above', 'below', 'between', 'under', 'again', 'further',
+            'then', 'once', 'create', 'make', 'generate', 'build', 'add', 'update',
+            'component', 'story', 'please', 'should', 'would', 'could'
+        ]);
+        const words = text.toLowerCase()
+            .replace(/[^a-z0-9\s]/g, ' ')
+            .split(/\s+/)
+            .filter(word => word.length > 2 && !commonWords.has(word));
+        // Also extract compound terms (like "toast notification")
+        const phrases = [];
+        const importantPhrases = [
+            'toast notification', 'banner notification', 'success message',
+            'error message', 'warning message', 'info message',
+            'dark mode', 'light mode', 'switch', 'toggle', 'button',
+            'card', 'alert', 'modal', 'dialog', 'form', 'input',
+            'table', 'list', 'grid', 'layout', 'navigation', 'menu'
+        ];
+        const lowerText = text.toLowerCase();
+        for (const phrase of importantPhrases) {
+            if (lowerText.includes(phrase)) {
+                phrases.push(phrase);
+            }
+        }
+        return [...new Set([...words, ...phrases])];
+    }
+}

package/dist/story-generator/componentBlacklist.js

@@ -80,6 +80,10 @@ export const ICON_CORRECTIONS = {
     'ForkIcon': 'RepoForkedIcon',
     'CloseIcon': 'XIcon',
     'CheckmarkIcon': 'CheckIcon',
+    // Ant Design icon corrections
+    'ExclamationTriangleOutlined': 'ExclamationCircleOutlined',
+    'WarningTriangleOutlined': 'WarningOutlined',
+    'ErrorCircleOutlined': 'CloseCircleOutlined',
     'CrossIcon': 'XIcon',
     'EditIcon': 'PencilIcon',
     'DeleteIcon': 'TrashIcon',

package/dist/story-generator/configLoader.js

@@ -25,7 +25,14 @@ export function loadUserConfig() {
     for (const configPath of configPaths) {
         if (fs.existsSync(configPath)) {
             try {
-                console.log(`Loading Story UI config from: ${configPath}`);
+                // Only log to stderr when in MCP mode to avoid corrupting JSON-RPC communication
+                const isMcpMode = process.argv.includes('mcp') || process.env.STORY_UI_MCP_MODE === 'true';
+                if (isMcpMode) {
+                    console.error(`Loading Story UI config from: ${configPath}`);
+                }
+                else {
+                    console.log(`Loading Story UI config from: ${configPath}`);
+                }
                 // Read and evaluate the config file
                 const configContent = fs.readFileSync(configPath, 'utf-8');
                 // Handle both CommonJS and ES modules

package/dist/story-generator/considerationsLoader.js

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { logger } from './logger.js';
 /**
  * Loads AI considerations from a markdown or JSON file
  */
@@ -15,7 +16,7 @@ export function loadConsiderations(considerationsPath) {
         for (const possiblePath of possiblePaths) {
             if (fs.existsSync(possiblePath)) {
                 considerationsPath = possiblePath;
-                console.log(`Found considerations file at: ${considerationsPath}`);
+                logger.log(`Found considerations file at: ${considerationsPath}`);
                 break;
             }
         }

package/dist/story-generator/documentationLoader.js

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { glob } from 'glob';
+import { logger } from './logger.js';
 export class DocumentationLoader {
     constructor(projectRoot) {
         this.cache = null;
@@ -32,7 +33,7 @@ export class DocumentationLoader {
         if (this.cache && stats.mtimeMs <= this.lastModified) {
             return this.cache;
         }
-        console.log(`📚 Loading documentation from ${this.docsDir}`);
+        logger.log(`📚 Loading documentation from ${this.docsDir}`);
         const documentation = {
             sources: [],
             guidelines: [],
@@ -58,7 +59,7 @@ export class DocumentationLoader {
             allFiles.push(...matches);
         }
         const files = [...new Set(allFiles)]; // Remove duplicates
-        console.log(`📄 Found ${files.length} documentation files`);
+        logger.log(`📄 Found ${files.length} documentation files`);
         // Process each file
         for (const file of files) {
             // Skip README files as they are instructional, not design system documentation
@@ -82,7 +83,7 @@ export class DocumentationLoader {
         // Cache the results
         this.cache = documentation;
         this.lastModified = stats.mtimeMs;
-        console.log(`✅ Loaded documentation with ${documentation.guidelines.length} guidelines, ${Object.keys(documentation.tokens).length} token categories, ${Object.keys(documentation.patterns).length} patterns`);
+        logger.log(`✅ Loaded documentation with ${documentation.guidelines.length} guidelines, ${Object.keys(documentation.tokens).length} token categories, ${Object.keys(documentation.patterns).length} patterns`);
         return documentation;
     }
     /**

package/dist/story-generator/dynamicPackageDiscovery.js

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { createRequire } from 'module';
+import { logger } from './logger.js';
 /**
  * Dynamically discovers what components are actually available in an installed package
  */
@@ -29,7 +30,7 @@ export class DynamicPackageDiscovery {
             // Try to require the package and inspect its exports
             const packageExports = await this.requirePackage(this.packageName);
             if (!packageExports) {
-                console.log(`🔄 Could not directly import ${this.packageName}, falling back to structure analysis`);
+                logger.log(`🔄 Could not directly import ${this.packageName}, falling back to structure analysis`);
                 // Don't return null here - fall back to structure discovery
             }
             const components = [];
@@ -49,14 +50,14 @@ export class DynamicPackageDiscovery {
                 }
                 // Check if we found any actual components
                 const componentCount = components.filter(c => c.isComponent).length;
-                console.log(`📋 Found ${componentCount} components in main ${this.packageName} export`);
+                logger.log(`📋 Found ${componentCount} components in main ${this.packageName} export`);
                 // If no components found in main export, fall back to structure analysis
                 if (componentCount === 0) {
-                    console.log(`🔄 No components in main export, falling back to structure analysis for ${this.packageName}...`);
+                    logger.log(`🔄 No components in main export, falling back to structure analysis for ${this.packageName}...`);
                     const structureExports = this.discoverFromPackageStructure();
                     if (structureExports) {
                         const structureComponentNames = Object.keys(structureExports);
-                        console.log(`📁 Structure analysis found ${structureComponentNames.length} components`);
+                        logger.log(`📁 Structure analysis found ${structureComponentNames.length} components`);
                         // Replace with structure-discovered components
                         allExports = structureComponentNames;
                         components.length = 0; // Clear the array
@@ -75,7 +76,7 @@ export class DynamicPackageDiscovery {
             }
             else {
                 // Failed to import - fall back to structure analysis
-                console.log(`📁 Import failed, analyzing package structure for ${this.packageName}...`);
+                logger.log(`📁 Import failed, analyzing package structure for ${this.packageName}...`);
                 const structureExports = this.discoverFromPackageStructure();
                 if (structureExports) {
                     allExports = Object.keys(structureExports);
@@ -91,7 +92,7 @@ export class DynamicPackageDiscovery {
                     }
                 }
             }
-            console.log(`✅ Discovered ${components.filter(c => c.isComponent).length} components from ${this.packageName} v${packageVersion}`);
+            logger.log(`✅ Discovered ${components.filter(c => c.isComponent).length} components from ${this.packageName} v${packageVersion}`);
             return {
                 components,
                 allExports,
@@ -118,7 +119,11 @@ export class DynamicPackageDiscovery {
                 // Check if this is a CSS import error (common with compiled design systems)
                 const errorMessage = importError?.message || String(importError);
                 if (errorMessage.includes('.css:') || errorMessage.includes('Unexpected token')) {
-                    console.log(`🔄 ${packageName}: CSS detected, using static analysis (normal for design systems)`);
+                    logger.log(`🔄 ${packageName}: CSS detected, using static analysis (normal for design systems)`);
+                    return this.discoverFromPackageStructure();
+                }
+                if (errorMessage.includes('Invalid hook call') || errorMessage.includes('Hooks can only be called')) {
+                    logger.log(`🔄 ${packageName}: React hooks detected outside component context, using static analysis`);
                     return this.discoverFromPackageStructure();
                 }
                 // Fall back to require (for CommonJS)
@@ -129,17 +134,21 @@ export class DynamicPackageDiscovery {
             }
         }
         catch (error) {
-            // Check if this is a CSS import error 
+            // Check if this is a CSS import error
             const errorMessage = error?.message || String(error);
             if (errorMessage.includes('.css:') || errorMessage.includes('Unexpected token')) {
-                console.log(`🔄 ${packageName}: CSS detected, using static analysis (normal for design systems)`);
+                logger.log(`🔄 ${packageName}: CSS detected, using static analysis (normal for design systems)`);
                 return this.discoverFromPackageStructure();
             }
             if (errorMessage.includes('window is not defined')) {
-                console.log(`🔄 ${packageName}: Browser-only component, using static analysis`);
+                logger.log(`🔄 ${packageName}: Browser-only component, using static analysis`);
+                return this.discoverFromPackageStructure();
+            }
+            if (errorMessage.includes('Invalid hook call') || errorMessage.includes('Hooks can only be called')) {
+                logger.log(`🔄 ${packageName}: React hooks detected outside component context, using static analysis`);
                 return this.discoverFromPackageStructure();
             }
-            console.log(`📋 ${packageName}: Dynamic import failed, using static analysis`);
+            logger.log(`📋 ${packageName}: Dynamic import failed, using static analysis`);
             return this.discoverFromPackageStructure();
         }
     }
@@ -335,26 +344,26 @@ export class DynamicPackageDiscovery {
             const packagePath = path.join(this.projectRoot, 'node_modules', this.packageName);
             const packageJsonPath = path.join(packagePath, 'package.json');
             if (!fs.existsSync(packageJsonPath)) {
-                console.log(`📦 No package.json found for ${this.packageName}`);
+                logger.log(`📦 No package.json found for ${this.packageName}`);
                 return null;
             }
             const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
             const exports = {};
             // Method 1: Analyze package.json exports field
             if (packageJson.exports) {
-                console.log(`📋 Analyzing exports field in ${this.packageName}/package.json`);
+                logger.log(`📋 Analyzing exports field in ${this.packageName}/package.json`);
                 this.extractExportsFromPackageJson(packageJson.exports, exports);
             }
             // Method 2: Look for index.d.ts or main TypeScript declarations
             const typingsPath = packageJson.types || packageJson.typings || './dist/types/index.d.ts';
             const fullTypingsPath = path.join(packagePath, typingsPath);
             if (fs.existsSync(fullTypingsPath)) {
-                console.log(`📋 Analyzing TypeScript declarations for ${this.packageName}`);
+                logger.log(`📋 Analyzing TypeScript declarations for ${this.packageName}`);
                 this.extractExportsFromTypeDefinitions(fullTypingsPath, exports);
             }
             // Method 3: Scan for component subdirectories (for packages like Base Web)
             if (Object.keys(exports).length === 0) {
-                console.log(`📁 Scanning subdirectories for ${this.packageName} components...`);
+                logger.log(`📁 Scanning subdirectories for ${this.packageName} components...`);
                 this.scanComponentSubdirectories(packagePath, exports);
             }
             return Object.keys(exports).length > 0 ? exports : null;
@@ -369,9 +378,9 @@ export class DynamicPackageDiscovery {
      */
     scanComponentSubdirectories(packagePath, result) {
         try {
-            console.log(`🔍 Scanning ${packagePath} for component subdirectories...`);
+            logger.log(`🔍 Scanning ${packagePath} for component subdirectories...`);
             const entries = fs.readdirSync(packagePath, { withFileTypes: true });
-            console.log(`📁 Found ${entries.length} entries in ${packagePath}`);
+            logger.log(`📁 Found ${entries.length} entries in ${packagePath}`);
             let componentDirsFound = 0;
             for (const entry of entries) {
                 if (!entry.isDirectory())
@@ -388,7 +397,7 @@ export class DynamicPackageDiscovery {
                         // Look for component exports (functions/classes starting with uppercase)
                         const componentExports = this.extractComponentsFromTypings(typingsContent);
                         if (componentExports.length > 0) {
-                            console.log(`📦 Found ${componentExports.length} components in ${entry.name}/`);
+                            logger.log(`📦 Found ${componentExports.length} components in ${entry.name}/`);
                             // Add each component to the result
                             for (const componentName of componentExports) {
                                 // Create a mock export function for this component
@@ -404,8 +413,8 @@ export class DynamicPackageDiscovery {
                     }
                 }
             }
-            console.log(`✅ Scanned ${componentDirsFound} component directories for ${this.packageName}`);
-            console.log(`📦 Total components found in subdirectories: ${Object.keys(result).length}`);
+            logger.log(`✅ Scanned ${componentDirsFound} component directories for ${this.packageName}`);
+            logger.log(`📦 Total components found in subdirectories: ${Object.keys(result).length}`);
         }
         catch (error) {
             console.warn(`Failed to scan subdirectories for ${this.packageName}:`, error);
@@ -484,7 +493,7 @@ export class DynamicPackageDiscovery {
                     const componentName = key.replace('./', '').split('/').pop();
                     if (componentName && /^[A-Z]/.test(componentName)) {
                         result[componentName] = `Component_${componentName}`;
-                        console.log(`📍 Found component export: ${componentName}`);
+                        logger.log(`📍 Found component export: ${componentName}`);
                     }
                 }
             }
@@ -512,7 +521,7 @@ export class DynamicPackageDiscovery {
                     const componentName = match[1];
                     if (componentName && /^[A-Z]/.test(componentName)) {
                         result[componentName] = `Component_${componentName}`;
-                        console.log(`📍 Found component in .d.ts: ${componentName}`);
+                        logger.log(`📍 Found component in .d.ts: ${componentName}`);
                     }
                 }
             }

package/dist/story-generator/enhancedComponentDiscovery.js

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { DynamicPackageDiscovery } from './dynamicPackageDiscovery.js';
+import { logger } from './logger.js';
 export class EnhancedComponentDiscovery {
     constructor(config) {
         this.discoveredComponents = new Map();
@@ -12,10 +13,10 @@ export class EnhancedComponentDiscovery {
      * Priority: 1. Dynamic Discovery 2. Static Lists 3. Manual Config
      */
     async discoverAll() {
-        console.log('🔍 Starting comprehensive component discovery...');
+        logger.log('🔍 Starting comprehensive component discovery...');
         // Step 1: Discover from all sources
         const sources = this.identifySources();
-        console.log(`📁 Found ${sources.length} discovery sources:`, sources.map(s => `${s.type}:${s.path}`));
+        logger.log(`📁 Found ${sources.length} discovery sources:`, sources.map(s => `${s.type}:${s.path}`));
         for (const source of sources) {
             try {
                 switch (source.type) {
@@ -42,7 +43,7 @@ export class EnhancedComponentDiscovery {
         // Step 3: Resolve component conflicts and apply prioritization
         this.resolveComponentConflicts();
         const finalComponents = Array.from(this.discoveredComponents.values());
-        console.log(`✅ Discovery complete: ${finalComponents.length} components found`);
+        logger.log(`✅ Discovery complete: ${finalComponents.length} components found`);
         // Log summary by source type
         this.logDiscoverySummary(finalComponents);
         return finalComponents;
@@ -64,7 +65,7 @@ export class EnhancedComponentDiscovery {
         // Resolve conflicts using priority system
         for (const [name, componentList] of conflicts) {
             if (componentList.length > 1) {
-                console.log(`⚠️  Resolving conflict for component "${name}" (${componentList.length} versions found)`);
+                logger.log(`⚠️  Resolving conflict for component "${name}" (${componentList.length} versions found)`);
                 // Priority order: local > manual config > npm
                 const prioritized = componentList.sort((a, b) => {
                     const getPriority = (comp) => {
@@ -82,7 +83,7 @@ export class EnhancedComponentDiscovery {
                 for (const loser of losers) {
                     this.discoveredComponents.delete(loser.name);
                 }
-                console.log(`✅ Kept ${winner.source.type} version of "${name}" from ${winner.source.path}`);
+                logger.log(`✅ Kept ${winner.source.type} version of "${name}" from ${winner.source.path}`);
             }
         }
     }
@@ -97,7 +98,7 @@ export class EnhancedComponentDiscovery {
             acc[sourceType]++;
             return acc;
         }, {});
-        console.log('📊 Component discovery summary:', summary);
+        logger.log('📊 Component discovery summary:', summary);
     }
     /**
  * Get the project root directory from the config
@@ -263,12 +264,12 @@ export class EnhancedComponentDiscovery {
             console.warn(`Package ${source.path} not found in node_modules at ${packagePath}`);
             return;
         }
-        console.log(`🔍 Dynamically discovering components from ${source.path}...`);
+        logger.log(`🔍 Dynamically discovering components from ${source.path}...`);
         // Use dynamic discovery to get real exports
         const dynamicDiscovery = new DynamicPackageDiscovery(source.path, projectRoot);
         const packageExports = await dynamicDiscovery.getRealPackageExports();
         if (!packageExports) {
-            console.log(`📋 ${source.path}: Using static component list (design system detected)`);
+            logger.log(`📋 ${source.path}: Using static component list (design system detected)`);
             // Fallback to predefined components if dynamic discovery fails
             const knownComponents = this.getKnownDesignSystemComponents(source.path);
             if (knownComponents.length > 0) {
@@ -286,7 +287,7 @@ export class EnhancedComponentDiscovery {
         // Process the real components found in the package
         const realComponents = packageExports.components.filter(comp => comp.isComponent);
         console.log(`✅ Found ${realComponents.length} real components in ${source.path} v${packageExports.packageVersion}`);
-        console.log(`📦 Available components: ${realComponents.map(c => c.name).join(', ')}`);
+        logger.log(`📦 Available components: ${realComponents.map(c => c.name).join(', ')}`);
         for (const realComp of realComponents) {
             // Get enhanced metadata from predefined list if available
             const knownComponents = this.getKnownDesignSystemComponents(source.path);
@@ -309,11 +310,51 @@ export class EnhancedComponentDiscovery {
     }
     /**
      * Get known components for popular design systems
-     * Returns empty array to rely on dynamic discovery
+     * Returns a fallback list when dynamic discovery fails
      */
     getKnownDesignSystemComponents(packageName) {
-        // Return empty array to rely purely on dynamic component discovery
-        // This ensures we test the actual package scanning capabilities
+        // Chakra UI fallback components
+        if (packageName === '@chakra-ui/react') {
+            const basicComponents = [
+                // Layout
+                'Box', 'Flex', 'Grid', 'Stack', 'HStack', 'VStack', 'Container', 'Center', 'Square', 'Circle',
+                'SimpleGrid', 'Wrap', 'WrapItem', 'AspectRatio', 'Spacer', 'Divider',
+                // Typography
+                'Text', 'Heading', 'Badge', 'Code', 'Kbd', 'Mark',
+                // Forms
+                'Button', 'IconButton', 'Input', 'InputGroup', 'InputLeftElement', 'InputRightElement',
+                'Textarea', 'Select', 'Checkbox', 'Radio', 'RadioGroup', 'Switch', 'Slider',
+                'FormControl', 'FormLabel', 'FormHelperText', 'FormErrorMessage',
+                // Feedback
+                'Alert', 'AlertIcon', 'AlertTitle', 'AlertDescription', 'Progress', 'Skeleton', 'Spinner',
+                'Toast', 'useToast', 'CircularProgress', 'CircularProgressLabel',
+                // Data Display
+                'Avatar', 'AvatarGroup', 'Card', 'CardHeader', 'CardBody', 'CardFooter',
+                'Image', 'Badge', 'Stat', 'StatLabel', 'StatNumber', 'StatHelpText', 'StatArrow',
+                'Table', 'Thead', 'Tbody', 'Tfoot', 'Tr', 'Th', 'Td', 'TableCaption',
+                // Navigation
+                'Breadcrumb', 'BreadcrumbItem', 'BreadcrumbLink', 'Link', 'LinkBox', 'LinkOverlay',
+                'Tabs', 'TabList', 'TabPanels', 'Tab', 'TabPanel',
+                // Overlay
+                'Modal', 'ModalOverlay', 'ModalContent', 'ModalHeader', 'ModalFooter', 'ModalBody', 'ModalCloseButton',
+                'Drawer', 'DrawerBody', 'DrawerFooter', 'DrawerHeader', 'DrawerOverlay', 'DrawerContent', 'DrawerCloseButton',
+                'Menu', 'MenuButton', 'MenuList', 'MenuItem', 'MenuItemOption', 'MenuGroup', 'MenuOptionGroup', 'MenuDivider',
+                'Popover', 'PopoverTrigger', 'PopoverContent', 'PopoverHeader', 'PopoverBody', 'PopoverFooter', 'PopoverArrow', 'PopoverCloseButton',
+                'Tooltip', 'AlertDialog', 'AlertDialogBody', 'AlertDialogFooter', 'AlertDialogHeader', 'AlertDialogContent', 'AlertDialogOverlay',
+                // Disclosure
+                'Accordion', 'AccordionItem', 'AccordionButton', 'AccordionPanel', 'AccordionIcon',
+                'VisuallyHidden', 'Show', 'Hide', 'Collapse',
+                // Media
+                'Icon', 'CloseButton'
+            ];
+            return basicComponents.map(name => ({
+                name,
+                description: `${name} component from Chakra UI`,
+                category: this.categorizeComponent(name, '')
+            }));
+        }
+        // Add other design systems here as needed
+        // Default: return empty array
         return [];
     }
     /**

package/dist/story-generator/gitignoreManager.js

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { logger } from './logger.js';
 /**
  * Manages .gitignore entries for Story UI generated content
  */
@@ -26,7 +27,7 @@ export class GitignoreManager {
         // Check if the path is already ignored
         const gitignoreContent = fs.readFileSync(gitignorePath, 'utf-8');
         if (this.isPathIgnored(gitignoreContent, generatedPath)) {
-            console.log(`✅ Generated stories directory already ignored: ${generatedPath}`);
+            logger.log(`✅ Generated stories directory already ignored: ${generatedPath}`);
             return;
         }
         // Add the ignore rule
@@ -60,7 +61,7 @@ export class GitignoreManager {
     createGitignore(gitignorePath, generatedPath) {
         const content = this.generateGitignoreSection(generatedPath);
         fs.writeFileSync(gitignorePath, content);
-        console.log(`✅ Created .gitignore with Story UI generated directory: ${generatedPath}`);
+        logger.log(`✅ Created .gitignore with Story UI generated directory: ${generatedPath}`);
     }
     /**
      * Checks if the generated path is already ignored
@@ -89,7 +90,7 @@ export class GitignoreManager {
         const separator = existingContent.endsWith('\n') ? '\n' : '\n\n';
         const updatedContent = existingContent + separator + newSection;
         fs.writeFileSync(gitignorePath, updatedContent);
-        console.log(`✅ Added Story UI generated directory to .gitignore: ${generatedPath}`);
+        logger.log(`✅ Added Story UI generated directory to .gitignore: ${generatedPath}`);
     }
     /**
      * Generates the gitignore section for Story UI
@@ -107,7 +108,7 @@ ${generatedPath}/**`;
         const generatedDir = this.config.generatedStoriesPath;
         if (!fs.existsSync(generatedDir)) {
             fs.mkdirSync(generatedDir, { recursive: true });
-            console.log(`✅ Created generated stories directory: ${generatedDir}`);
+            logger.log(`✅ Created generated stories directory: ${generatedDir}`);
             // Create a README to explain the purpose
             this.createGeneratedDirectoryReadme(generatedDir);
         }
@@ -142,7 +143,7 @@ Stories in this directory will appear in Storybook under the "${this.config.stor
 Generated by [Story UI](https://github.com/your-org/story-ui) - AI-powered Storybook story generator.
 `;
         fs.writeFileSync(readmePath, readmeContent);
-        console.log(`✅ Created README in generated directory`);
+        logger.log(`✅ Created README in generated directory`);
     }
     /**
      * Cleans up old generated stories (optional utility)
@@ -168,7 +169,7 @@ Generated by [Story UI](https://github.com/your-org/story-ui) - AI-powered Story
             }
         }
         if (cleanedCount > 0) {
-            console.log(`🧹 Cleaned up ${cleanedCount} old generated stories`);
+            logger.log(`🧹 Cleaned up ${cleanedCount} old generated stories`);
         }
     }
 }

package/dist/story-generator/logger.js

@@ -0,0 +1,52 @@
+// Utility for safe logging that doesn't corrupt MCP stdio communication
+const isMcpMode = () => {
+    return process.argv.includes('mcp') || process.env.STORY_UI_MCP_MODE === 'true';
+};
+// Remove emojis from strings to prevent JSON parsing errors in MCP
+const stripEmojis = (str) => {
+    // Remove common emojis and unicode symbols
+    return str.replace(/[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{1F000}-\u{1F02F}]|[\u{1F0A0}-\u{1F0FF}]|[\u{1F100}-\u{1F64F}]|[\u{1F680}-\u{1F6FF}]|[\u{1F900}-\u{1F9FF}]|[\u{2190}-\u{21FF}]|[\u{2300}-\u{23FF}]|[\u{25A0}-\u{25FF}]|[\u{2B00}-\u{2BFF}]|[\u{3000}-\u{303F}]|✅|❌|⚠️|🔍|📦|📋|🔄|📊|⭐|🚀|💡|🎯|🔧|📌|🏃|🎨|💪|🌟|🎉|🎊|👍|👎|📝|📄|🗑️|🗂️|📁|🖥️|💻|📱|🌐|🔒|🔓|🔑|🔨|⚡|🔥|💧|🌈|☀️|🌙|⭐|✨|💫|☁️|🌧️|⛈️|❄️|☃️|⛄|🌬️|💨|🌪️|🌫️|🌊|🎯/gu, '');
+};
+const processArgs = (args) => {
+    if (!isMcpMode())
+        return args;
+    return args.map(arg => {
+        if (typeof arg === 'string') {
+            return stripEmojis(arg);
+        }
+        return arg;
+    });
+};
+export const logger = {
+    log: (...args) => {
+        const processedArgs = processArgs(args);
+        if (isMcpMode()) {
+            console.error(...processedArgs);
+        }
+        else {
+            console.log(...args);
+        }
+    },
+    error: (...args) => {
+        const processedArgs = processArgs(args);
+        console.error(...processedArgs);
+    },
+    warn: (...args) => {
+        const processedArgs = processArgs(args);
+        if (isMcpMode()) {
+            console.error(...processedArgs);
+        }
+        else {
+            console.warn(...args);
+        }
+    },
+    info: (...args) => {
+        const processedArgs = processArgs(args);
+        if (isMcpMode()) {
+            console.error(...processedArgs);
+        }
+        else {
+            console.info(...args);
+        }
+    }
+};