@tpitre/story-ui 2.1.5 → 2.3.0

package/dist/story-generator/logger.js

@@ -0,0 +1,119 @@
+// Enhanced logging utility with configurable levels and MCP-safe output
+const LOG_LEVELS = {
+    debug: 0,
+    info: 1,
+    warn: 2,
+    error: 3,
+    none: 4,
+};
+// Get log level from environment or default to 'info'
+const getConfiguredLevel = () => {
+    const envLevel = process.env.STORY_UI_LOG_LEVEL?.toLowerCase();
+    return LOG_LEVELS[envLevel] !== undefined ? envLevel : 'info';
+};
+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) => {
+    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 formatTimestamp = () => {
+    const now = new Date();
+    return now.toISOString().replace('T', ' ').slice(0, 19);
+};
+const formatMessage = (level, args) => {
+    const timestamp = formatTimestamp();
+    const prefix = `[${timestamp}] [${level.toUpperCase()}]`;
+    const processedArgs = args.map(arg => {
+        if (typeof arg === 'string') {
+            return isMcpMode() ? stripEmojis(arg) : arg;
+        }
+        if (typeof arg === 'object') {
+            try {
+                return JSON.stringify(arg, null, 2);
+            }
+            catch {
+                return String(arg);
+            }
+        }
+        return String(arg);
+    });
+    return [prefix, ...processedArgs];
+};
+const shouldLog = (level) => {
+    const configuredLevel = getConfiguredLevel();
+    return LOG_LEVELS[level] >= LOG_LEVELS[configuredLevel];
+};
+class Logger {
+    static getInstance() {
+        if (!Logger.instance) {
+            Logger.instance = new Logger();
+        }
+        return Logger.instance;
+    }
+    debug(...args) {
+        if (!shouldLog('debug'))
+            return;
+        const formattedArgs = formatMessage('debug', args);
+        if (isMcpMode()) {
+            console.error(...formattedArgs);
+        }
+        else {
+            console.debug(...formattedArgs);
+        }
+    }
+    log(...args) {
+        // Alias for info for backwards compatibility
+        this.info(...args);
+    }
+    info(...args) {
+        if (!shouldLog('info'))
+            return;
+        const formattedArgs = formatMessage('info', args);
+        if (isMcpMode()) {
+            console.error(...formattedArgs);
+        }
+        else {
+            console.log(...formattedArgs);
+        }
+    }
+    warn(...args) {
+        if (!shouldLog('warn'))
+            return;
+        const formattedArgs = formatMessage('warn', args);
+        if (isMcpMode()) {
+            console.error(...formattedArgs);
+        }
+        else {
+            console.warn(...formattedArgs);
+        }
+    }
+    error(...args) {
+        if (!shouldLog('error'))
+            return;
+        const formattedArgs = formatMessage('error', args);
+        console.error(...formattedArgs);
+    }
+    // Utility method for structured logging
+    structured(level, message, data) {
+        if (!shouldLog(level))
+            return;
+        const logEntry = {
+            timestamp: formatTimestamp(),
+            level,
+            message,
+            ...(data && { data }),
+        };
+        if (isMcpMode()) {
+            console.error(JSON.stringify(logEntry));
+        }
+        else {
+            console.log(JSON.stringify(logEntry, null, 2));
+        }
+    }
+}
+// Export singleton instance
+export const logger = Logger.getInstance();
+// Export for backwards compatibility with code that imports the object directly
+export default logger;

package/dist/story-generator/postProcessStory.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Post-process generated stories to fix common issues
+ * This module is completely design-system agnostic
+ */
+export declare function postProcessStory(code: string, libraryPath: string): string;
+//# sourceMappingURL=postProcessStory.d.ts.map

package/dist/story-generator/postProcessStory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"postProcessStory.d.ts","sourceRoot":"","sources":["../../story-generator/postProcessStory.ts"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAkB1E"}

package/dist/story-generator/postProcessStory.js

@@ -1,19 +1,20 @@
+import { logger } from './logger.js';
 /**
  * Post-process generated stories to fix common issues
  * This module is completely design-system agnostic
  */
 export function postProcessStory(code, libraryPath) {
-    console.log(`🔧 Post-processing story for library: ${libraryPath}`);
+    logger.log(`🔧 Post-processing story for library: ${libraryPath}`);
     let processedCode = code;
     // Fix ANY component with children prop - ALWAYS convert to render function
     if (processedCode.includes('children: (')) {
-        console.log('🚨 Detected children prop in args - converting to render function');
+        logger.log('🚨 Detected children prop in args - converting to render function');
         processedCode = convertLayoutToRenderFunction(processedCode);
     }
     // Leave inline styles as-is - let the AI use the available components naturally
     // Post-processing should be design-system agnostic
     if (processedCode.includes('style={{')) {
-        console.log('ℹ️  Inline styles detected - keeping as-is for design system agnosticism');
+        logger.log('ℹ️  Inline styles detected - keeping as-is for design system agnosticism');
     }
     return processedCode;
 }
@@ -36,7 +37,7 @@ function convertLayoutToRenderFunction(code) {
             // Also fix the satisfies Meta type
             const metaWithType = `const meta = {${newMetaContent}} satisfies Meta;`;
             processedCode = code.replace(/const meta = {[^}]+} satisfies Meta(?:<[^>]+>)?;/s, metaWithType);
-            console.log('✅ Removed component from meta object');
+            logger.log('✅ Removed component from meta object');
         }
     }
     // Extract all stories with children prop
@@ -49,7 +50,7 @@ function convertLayoutToRenderFunction(code) {
         const newStory = `export const ${storyName}: Story = {\n  render: () => (\n${childrenContent}\n  )\n};`;
         // Replace the old story with the new one
         processedCode = processedCode.replace(match[0], newStory);
-        console.log(`✅ Converted ${storyName} from children prop to render function`);
+        logger.log(`✅ Converted ${storyName} from children prop to render function`);
     }
     return processedCode;
 }
@@ -58,7 +59,7 @@ function convertLayoutToRenderFunction(code) {
  */
 function convertAlertChildrenToExports(code) {
     // For now, return the code as-is
-    console.log('Alert conversion not yet implemented');
+    logger.log('Alert conversion not yet implemented');
     return code;
 }
 /**
@@ -66,6 +67,6 @@ function convertAlertChildrenToExports(code) {
  */
 function convertToastChildrenToExports(code) {
     // For now, return the code as-is
-    console.log('Toast conversion not yet implemented');
+    logger.log('Toast conversion not yet implemented');
     return code;
 }

package/dist/story-generator/productionGitignoreManager.d.ts

@@ -0,0 +1,91 @@
+import { StoryUIConfig } from '../story-ui.config.js';
+/**
+ * Production-ready gitignore manager that handles both development and server environments
+ */
+export declare class ProductionGitignoreManager {
+    private config;
+    private projectRoot;
+    private isProduction;
+    constructor(config: StoryUIConfig, projectRoot?: string);
+    /**
+     * Detects if we're running in a production/read-only environment
+     */
+    private detectProductionEnvironment;
+    /**
+     * Tests if we can write to the project root
+     */
+    private canWriteToProjectRoot;
+    /**
+     * Main setup method that adapts to environment
+     */
+    setupGitignoreIntegration(): void;
+    /**
+     * Production environment: Use in-memory story generation
+     */
+    private handleProductionEnvironment;
+    /**
+     * Development environment: Full gitignore management
+     */
+    private handleDevelopmentEnvironment;
+    /**
+     * Validates that production environment is properly configured
+     */
+    private validateProductionSetup;
+    /**
+     * Sets up temporary directory for production story generation
+     */
+    private setupTemporaryDirectory;
+    /**
+     * Gets a writable temporary directory for production
+     */
+    getProductionTempDirectory(): string;
+    /**
+     * Creates the generated directory if it doesn't exist (development only)
+     */
+    private ensureGeneratedDirectoryExists;
+    /**
+     * Ensures the generated stories directory is added to .gitignore (development only)
+     */
+    private ensureGeneratedDirectoryIgnored;
+    /**
+     * Gets the relative path from project root to generated stories directory
+     */
+    private getRelativeGeneratedPath;
+    /**
+     * Creates a new .gitignore file with Story UI section
+     */
+    private createGitignore;
+    /**
+     * Checks if the generated path is already ignored
+     */
+    private isPathIgnored;
+    /**
+     * Adds ignore rule to existing .gitignore
+     */
+    private addIgnoreRule;
+    /**
+     * Generates the gitignore section for Story UI
+     */
+    private generateGitignoreSection;
+    /**
+     * Creates a README in the generated directory explaining its purpose (development only)
+     */
+    private createGeneratedDirectoryReadme;
+    /**
+     * Cleans up old generated stories (safe for both environments)
+     */
+    cleanupOldStories(maxAge?: number): void;
+    /**
+     * Gets the appropriate directory for story generation based on environment
+     */
+    getStoryGenerationPath(): string;
+    /**
+     * Checks if we're in production mode
+     */
+    isProductionMode(): boolean;
+}
+/**
+ * Convenience function to set up gitignore for Story UI (production-ready)
+ */
+export declare function setupProductionGitignore(config: StoryUIConfig, projectRoot?: string): ProductionGitignoreManager;
+//# sourceMappingURL=productionGitignoreManager.d.ts.map

package/dist/story-generator/productionGitignoreManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"productionGitignoreManager.d.ts","sourceRoot":"","sources":["../../story-generator/productionGitignoreManager.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD;;GAEG;AACH,qBAAa,0BAA0B;IACrC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,YAAY,CAAU;gBAElB,MAAM,EAAE,aAAa,EAAE,WAAW,GAAE,MAAsB;IAMtE;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAgBnC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAW7B;;OAEG;IACH,yBAAyB,IAAI,IAAI;IAQjC;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAUnC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAQpC;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAmB/B;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAY/B;;OAEG;IACH,0BAA0B,IAAI,MAAM;IAuBpC;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAStC;;OAEG;IACH,OAAO,CAAC,+BAA+B;IA0BvC;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAmBhC;;OAEG;IACH,OAAO,CAAC,eAAe;IAMvB;;OAEG;IACH,OAAO,CAAC,aAAa;IAkBrB;;OAEG;IACH,OAAO,CAAC,aAAa;IAWrB;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAOhC;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAyCtC;;OAEG;IACH,iBAAiB,CAAC,MAAM,GAAE,MAAgC,GAAG,IAAI;IAoCjE;;OAEG;IACH,sBAAsB,IAAI,MAAM;IAYhC;;OAEG;IACH,gBAAgB,IAAI,OAAO;CAG5B;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,aAAa,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,0BAA0B,CAIhH"}

package/dist/story-generator/productionGitignoreManager.js

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { logger } from './logger.js';
 /**
  * Production-ready gitignore manager that handles both development and server environments
  */
@@ -55,7 +56,7 @@ export class ProductionGitignoreManager {
      * Production environment: Use in-memory story generation
      */
     handleProductionEnvironment() {
-        console.log('🌐 Production environment detected - using in-memory story generation');
+        logger.log('🌐 Production environment detected - using in-memory story generation');
         // Validate that gitignore is already set up
         this.validateProductionSetup();
         // Set up temporary directory for story generation if needed
@@ -65,7 +66,7 @@ export class ProductionGitignoreManager {
      * Development environment: Full gitignore management
      */
     handleDevelopmentEnvironment() {
-        console.log('🔧 Development environment - setting up gitignore integration');
+        logger.log('🔧 Development environment - setting up gitignore integration');
         this.ensureGeneratedDirectoryExists();
         this.ensureGeneratedDirectoryIgnored();
         this.createGeneratedDirectoryReadme();
@@ -86,7 +87,7 @@ export class ProductionGitignoreManager {
             console.warn('   Run "npx story-ui setup-gitignore" in development to fix this.');
         }
         else {
-            console.log('✅ Production gitignore configuration validated');
+            logger.log('✅ Production gitignore configuration validated');
         }
     }
     /**
@@ -97,7 +98,7 @@ export class ProductionGitignoreManager {
             const tempDir = this.getProductionTempDirectory();
             if (!fs.existsSync(tempDir)) {
                 fs.mkdirSync(tempDir, { recursive: true });
-                console.log(`✅ Created temporary directory: ${tempDir}`);
+                logger.log(`✅ Created temporary directory: ${tempDir}`);
             }
         }
         catch (error) {
@@ -135,7 +136,7 @@ export class ProductionGitignoreManager {
         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}`);
         }
     }
     /**
@@ -156,7 +157,7 @@ export class ProductionGitignoreManager {
         // 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
@@ -187,7 +188,7 @@ export class ProductionGitignoreManager {
     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
@@ -214,7 +215,7 @@ export class ProductionGitignoreManager {
         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
@@ -260,7 +261,7 @@ Generated by [Story UI](https://github.com/your-org/story-ui) - AI-powered Story
 `;
         try {
             fs.writeFileSync(readmePath, readmeContent);
-            console.log(`✅ Created README in generated directory`);
+            logger.log(`✅ Created README in generated directory`);
         }
         catch (error) {
             console.warn('⚠️  Could not create README in generated directory');
@@ -293,7 +294,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 from ${dir}`);
+                    logger.log(`🧹 Cleaned up ${cleanedCount} old generated stories from ${dir}`);
                 }
             }
             catch (error) {

package/dist/story-generator/promptGenerator.d.ts

@@ -0,0 +1,48 @@
+import { StoryUIConfig } from '../story-ui.config.js';
+import { DiscoveredComponent } from './componentDiscovery.js';
+import { FrameworkPrompt, StoryGenerationOptions, FrameworkType, FrameworkAdapter } from './framework-adapters/index.js';
+/**
+ * Extended prompt interface that includes framework information
+ * Uses string[] for layoutInstructions instead of string
+ */
+export interface FrameworkAwarePrompt extends Omit<FrameworkPrompt, 'layoutInstructions'> {
+    layoutInstructions: string[];
+}
+export interface GeneratedPrompt {
+    systemPrompt: string;
+    componentReference: string;
+    layoutInstructions: string[];
+    examples: string[];
+    sampleStory: string;
+}
+/**
+ * Generates a comprehensive AI prompt based on the configuration and discovered components
+ */
+export declare function generatePrompt(config: StoryUIConfig, components: DiscoveredComponent[]): GeneratedPrompt;
+/**
+ * Builds the complete Claude prompt
+ */
+export declare function buildClaudePrompt(userPrompt: string, config: StoryUIConfig, components: DiscoveredComponent[]): Promise<string>;
+/**
+ * Generates a framework-aware prompt using the adapter system
+ * This is the new multi-framework entry point
+ */
+export declare function generateFrameworkAwarePrompt(config: StoryUIConfig, components: DiscoveredComponent[], options?: StoryGenerationOptions): Promise<FrameworkAwarePrompt>;
+/**
+ * Builds a complete LLM prompt with framework awareness
+ * This is the new multi-framework entry point for building complete prompts
+ */
+export declare function buildFrameworkAwarePrompt(userPrompt: string, config: StoryUIConfig, components: DiscoveredComponent[], options?: StoryGenerationOptions): Promise<string>;
+/**
+ * Detect the framework for a given project
+ */
+export declare function detectProjectFramework(projectRoot?: string): Promise<FrameworkType>;
+/**
+ * Get the adapter for a specific framework
+ */
+export declare function getFrameworkAdapter(framework: FrameworkType): FrameworkAdapter;
+/**
+ * Get all available framework adapters
+ */
+export declare function getAvailableFrameworks(): FrameworkType[];
+//# sourceMappingURL=promptGenerator.d.ts.map

package/dist/story-generator/promptGenerator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"promptGenerator.d.ts","sourceRoot":"","sources":["../../story-generator/promptGenerator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,EAEL,eAAe,EACf,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EACjB,MAAM,+BAA+B,CAAC;AAEvC;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,eAAe,EAAE,oBAAoB,CAAC;IACvF,kBAAkB,EAAE,MAAM,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAAG,eAAe,CAcxG;AAoaD;;GAEG;AACH,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,OAAO,CAAC,MAAM,CAAC,CA8HjB;AAED;;;GAGG;AACH,wBAAsB,4BAA4B,CAChD,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,oBAAoB,CAAC,CAqB/B;AAED;;;GAGG;AACH,wBAAsB,yBAAyB,CAC7C,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,MAAM,CAAC,CA6GjB;AAwDD;;GAEG;AACH,wBAAsB,sBAAsB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAIzF;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,aAAa,GAAG,gBAAgB,CAG9E;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,aAAa,EAAE,CAGxD"}

package/dist/story-generator/promptGenerator.js

@@ -1,5 +1,6 @@
 import { loadConsiderations, considerationsToPrompt } from './considerationsLoader.js';
 import { DocumentationLoader } from './documentationLoader.js';
+import { getAdapterRegistry, } from './framework-adapters/index.js';
 /**
  * Generates a comprehensive AI prompt based on the configuration and discovered components
  */
@@ -27,7 +28,28 @@ function generateSystemPrompt(config) {
     const componentSystemName = config.componentPrefix ?
         `${config.componentPrefix.replace(/^[A-Z]+/, '')} design system` :
         'component library';
-    return `🚨 CRITICAL: EVERY STORY MUST START WITH "import React from 'react';" AS THE FIRST LINE 🚨
+    // Get the library name for prominent constraint
+    const libraryName = config.designSystemGuidelines?.name || config.importPath || 'configured library';
+    const importPath = config.importPath || 'your-library';
+    return `
+╔════════════════════════════════════════════════════════════════════╗
+║                    🚨 MANDATORY LIBRARY CONSTRAINT 🚨                ║
+╠════════════════════════════════════════════════════════════════════╣
+║  REQUIRED LIBRARY: ${libraryName.padEnd(46)}║
+║  IMPORT PATH:      ${importPath.padEnd(46)}║
+╠════════════════════════════════════════════════════════════════════╣
+║  ALL component imports MUST use:                                   ║
+║  import { ComponentName } from '${importPath}';${' '.repeat(Math.max(0, 32 - importPath.length))}║
+╠════════════════════════════════════════════════════════════════════╣
+║  🚫 FORBIDDEN LIBRARIES - DO NOT USE:                              ║
+║  - tamagui, @tamagui/core (NEVER USE)                              ║
+║  - @chakra-ui/react (unless configured)                            ║
+║  - @mui/material (unless configured)                               ║
+║  - antd (unless configured)                                        ║
+║  - Any library NOT matching: ${importPath.padEnd(36)}║
+╚════════════════════════════════════════════════════════════════════╝
+
+🚨 CRITICAL: EVERY STORY MUST START WITH "import React from 'react';" AS THE FIRST LINE 🚨
 
 🔴 CRITICAL RULE: NEVER use children in args for ANY component or layout. Always use render functions. 🔴
 
@@ -448,3 +470,166 @@ export async function buildClaudePrompt(userPrompt, config, components) {
     promptParts.push(`Output a complete Storybook story file in TypeScript. Import components as shown in the sample template below. Use the following sample as a template. Respond ONLY with a single code block containing the full file, and nothing else.`, '', '<rules>', '🚨 FINAL CRITICAL REMINDERS 🚨', "🔴 FIRST LINE MUST BE: import React from 'react';", '🔴 WITHOUT THIS IMPORT, THE STORY WILL BREAK!', '', 'OTHER CRITICAL RULES:', '- Story title MUST always start with "Generated/" (e.g., title: "Generated/Recipe Card")', '- Do NOT use prefixes like "Content/", "Components/", or any other section name', '- ONLY import components that are listed in the "Available components" section', '- ALWAYS use the exact import path shown in parentheses after each component', '- NEVER use main package imports when specific subpath imports are shown', '- Do NOT import story exports - these are NOT real components', '- Check every import against the Available components list before using it', '- FORBIDDEN: Any component not explicitly listed in the Available components section', '- FORBIDDEN: Theme setup components (providers should be configured at the app level, not in individual stories)', '- All images MUST have a src attribute with placeholder URLs (use https://picsum.photos/)', '- Never create <img> tags without src attributes', '- MUST use ES modules syntax: "export default meta;" NOT "module.exports = meta;"', '- The file MUST have a default export for the meta object', '- Keep the story concise and focused - avoid overly complex layouts that might exceed token limits', '- Ensure all JSX tags are properly closed', '- Story must be complete and syntactically valid', '- CRITICAL: Never put ANY content in args.children - always use render function', '- Use render functions for ALL layouts and component compositions', '- For layouts: DO NOT set component in meta', '- Only set component in meta when showcasing a SINGLE component', '- Use appropriate styling for the component library (design tokens, className, or inline styles as needed)', '</rules>', '', 'Sample story format:', generated.sampleStory, '', 'User request:', userPrompt);
     return promptParts.join('\n');
 }
+/**
+ * Generates a framework-aware prompt using the adapter system
+ * This is the new multi-framework entry point
+ */
+export async function generateFrameworkAwarePrompt(config, components, options) {
+    const registry = getAdapterRegistry();
+    // Get the appropriate adapter (auto-detect or use specified framework)
+    let adapter;
+    if (options?.framework) {
+        adapter = registry.getAdapter(options.framework);
+    }
+    else {
+        adapter = await registry.autoDetect(process.cwd());
+    }
+    // Generate framework-specific prompt components
+    const frameworkPrompt = await registry.generatePrompt(config, components, options);
+    // Generate layout instructions (framework-agnostic)
+    const layoutInstructions = generateLayoutInstructions(config);
+    return {
+        ...frameworkPrompt,
+        layoutInstructions,
+    };
+}
+/**
+ * Builds a complete LLM prompt with framework awareness
+ * This is the new multi-framework entry point for building complete prompts
+ */
+export async function buildFrameworkAwarePrompt(userPrompt, config, components, options) {
+    const generated = await generateFrameworkAwarePrompt(config, components, options);
+    const promptParts = [
+        generated.systemPrompt,
+        '',
+    ];
+    // Load documentation - try new directory-based approach first
+    const projectRoot = config.considerationsPath ?
+        config.considerationsPath.replace(/\/story-ui-considerations\.(md|json)$/, '') :
+        process.cwd();
+    const docLoader = new DocumentationLoader(projectRoot);
+    let documentationAdded = false;
+    if (docLoader.hasDocumentation()) {
+        const docs = await docLoader.loadDocumentation();
+        if (docs.sources.length > 0) {
+            const docPrompt = docLoader.formatForPrompt(docs);
+            if (docPrompt) {
+                promptParts.push(docPrompt);
+                promptParts.push('');
+                documentationAdded = true;
+            }
+        }
+    }
+    // Fall back to legacy considerations file if no directory-based docs
+    if (!documentationAdded) {
+        const considerations = loadConsiderations(config.considerationsPath);
+        if (considerations) {
+            const considerationsPrompt = considerationsToPrompt(considerations);
+            if (considerationsPrompt) {
+                promptParts.push(considerationsPrompt);
+                promptParts.push('');
+            }
+        }
+    }
+    promptParts.push(...generated.layoutInstructions, '', 'Available components:', generated.componentReference, '', generated.examples);
+    // Add additional imports information if configured
+    if (config.additionalImports && config.additionalImports.length > 0) {
+        promptParts.push('');
+        promptParts.push('ADDITIONAL IMPORT EXAMPLES - COPY THESE EXACTLY:');
+        config.additionalImports.forEach(additionalImport => {
+            const componentExamples = additionalImport.components.map(componentName => {
+                let componentConfig = config.components?.find(c => c.name === componentName);
+                if (!componentConfig) {
+                    componentConfig = config.layoutComponents?.find(c => c.name === componentName);
+                }
+                if (componentConfig && componentConfig.importType === 'default') {
+                    return `import ${componentName} from '${additionalImport.path}';`;
+                }
+                else {
+                    return `import { ${componentName} } from '${additionalImport.path}';`;
+                }
+            });
+            componentExamples.forEach(example => {
+                promptParts.push(`- ${example}`);
+            });
+        });
+    }
+    // Add framework-specific rules
+    const frameworkType = generated.framework.componentFramework;
+    const frameworkRules = getFrameworkSpecificRules(frameworkType);
+    if (frameworkRules.length > 0) {
+        promptParts.push('');
+        promptParts.push(`${frameworkType.toUpperCase()} SPECIFIC RULES:`);
+        promptParts.push(...frameworkRules);
+    }
+    promptParts.push('', `Output a complete Storybook story file in TypeScript. Import components as shown in the sample template below. Use the following sample as a template. Respond ONLY with a single code block containing the full file, and nothing else.`, '', '<rules>', 'CRITICAL REMINDERS:', '- Story title MUST always start with "Generated/" (e.g., title: "Generated/Recipe Card")', '- ONLY import components that are listed in the "Available components" section', '- ALWAYS use the exact import path shown in parentheses after each component', '- NEVER use main package imports when specific subpath imports are shown', '- Do NOT import story exports - these are NOT real components', '- All images MUST have a src attribute with placeholder URLs (use https://picsum.photos/)', '- MUST use ES modules syntax: "export default meta;" NOT "module.exports = meta;"', '- The file MUST have a default export for the meta object', '- Keep the story concise and focused - avoid overly complex layouts', '- Ensure all tags are properly closed and syntax is valid', '- Story must be complete and syntactically valid', '</rules>', '', 'Sample story format:', generated.sampleStory, '', 'User request:', userPrompt);
+    return promptParts.join('\n');
+}
+/**
+ * Get framework-specific rules to include in the prompt
+ */
+function getFrameworkSpecificRules(framework) {
+    const rules = [];
+    switch (framework) {
+        case 'react':
+            rules.push("- FIRST LINE MUST BE: import React from 'react';");
+            rules.push('- Use JSX syntax for templates');
+            rules.push('- NEVER pass children through args - use render functions');
+            rules.push('- For layouts with multiple components, DO NOT set component in meta');
+            break;
+        case 'vue':
+            rules.push("- Import from '@storybook/vue3'");
+            rules.push('- Use Vue 3 Composition API style');
+            rules.push('- Use render functions with template for complex content');
+            rules.push('- Event bindings use @event or v-on:event syntax');
+            rules.push('- Slots use v-slot directive or # shorthand');
+            break;
+        case 'angular':
+            rules.push("- Import from '@storybook/angular'");
+            rules.push('- Use moduleMetadata or applicationConfig decorators');
+            rules.push('- Property binding: [property]="value"');
+            rules.push('- Event binding: (event)="handler($event)"');
+            rules.push('- Use Angular template syntax in render functions');
+            break;
+        case 'svelte':
+            rules.push("- Import from '@storybook/svelte'");
+            rules.push('- Import .svelte files directly as default exports');
+            rules.push('- Events use on: directive (e.g., on:click)');
+            rules.push('- Use bind: for two-way binding');
+            break;
+        case 'web-components':
+            rules.push("- Import { html } from 'lit'");
+            rules.push("- Import from '@storybook/web-components'");
+            rules.push('- Use html`` template literal, NOT JSX');
+            rules.push('- Use kebab-case for tag names (e.g., <my-button>)');
+            rules.push('- Property binding: .property=${value}');
+            rules.push('- Event binding: @event=${handler}');
+            rules.push('- Boolean attributes: ?disabled=${true}');
+            break;
+        default:
+            break;
+    }
+    return rules;
+}
+/**
+ * Detect the framework for a given project
+ */
+export async function detectProjectFramework(projectRoot) {
+    const registry = getAdapterRegistry();
+    const adapter = await registry.autoDetect(projectRoot || process.cwd());
+    return adapter.type;
+}
+/**
+ * Get the adapter for a specific framework
+ */
+export function getFrameworkAdapter(framework) {
+    const registry = getAdapterRegistry();
+    return registry.getAdapter(framework);
+}
+/**
+ * Get all available framework adapters
+ */
+export function getAvailableFrameworks() {
+    const registry = getAdapterRegistry();
+    return registry.getAvailableFrameworks();
+}