@tpitre/story-ui 2.2.0 → 2.3.0

package/dist/story-generator/logger.js

@@ -1,52 +1,119 @@
-// Utility for safe logging that doesn't corrupt MCP stdio communication
+// 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) => {
-    // 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 => {
+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 stripEmojis(arg);
+            return isMcpMode() ? stripEmojis(arg) : arg;
         }
-        return 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];
 };
-export const logger = {
-    log: (...args) => {
-        const processedArgs = processArgs(args);
+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(...processedArgs);
+            console.error(...formattedArgs);
         }
         else {
-            console.log(...args);
-        }
-    },
-    error: (...args) => {
-        const processedArgs = processArgs(args);
-        console.error(...processedArgs);
-    },
-    warn: (...args) => {
-        const processedArgs = processArgs(args);
+            console.log(...formattedArgs);
+        }
+    }
+    warn(...args) {
+        if (!shouldLog('warn'))
+            return;
+        const formattedArgs = formatMessage('warn', args);
         if (isMcpMode()) {
-            console.error(...processedArgs);
+            console.error(...formattedArgs);
         }
         else {
-            console.warn(...args);
+            console.warn(...formattedArgs);
         }
-    },
-    info: (...args) => {
-        const processedArgs = processArgs(args);
+    }
+    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(...processedArgs);
+            console.error(JSON.stringify(logEntry));
         }
         else {
-            console.info(...args);
+            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/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/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();
+}

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

@@ -0,0 +1,44 @@
+export interface StoryVersion {
+    id: string;
+    timestamp: number;
+    prompt: string;
+    code: string;
+    fileName: string;
+    parentId?: string;
+}
+export interface StoryHistory {
+    storyId: string;
+    title: string;
+    versions: StoryVersion[];
+    currentVersionId: string;
+}
+export declare class StoryHistoryManager {
+    private historyDir;
+    private histories;
+    constructor(projectRoot: string);
+    private ensureHistoryDir;
+    private loadHistories;
+    private saveHistory;
+    /**
+     * Create a new story history or add a version to existing history
+     */
+    addVersion(fileName: string, prompt: string, code: string, parentVersionId?: string): StoryVersion;
+    /**
+     * Get the current version of a story by filename
+     */
+    getCurrentVersion(fileName: string): StoryVersion | null;
+    /**
+     * Get all versions for a story
+     */
+    getHistory(fileName: string): StoryHistory | null;
+    /**
+     * Find a story by partial filename match
+     */
+    findStoryByPartialName(partialName: string): StoryHistory | null;
+    private titleFromFileName;
+    /**
+     * Clean up old versions, keeping only the last N versions
+     */
+    pruneHistory(maxVersionsPerStory?: number): void;
+}
+//# sourceMappingURL=storyHistory.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"storyHistory.d.ts","sourceRoot":"","sources":["../../story-generator/storyHistory.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAwC;gBAE7C,WAAW,EAAE,MAAM;IAM/B,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,UAAU,CACR,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,eAAe,CAAC,EAAE,MAAM,GACvB,YAAY;IAiCf;;OAEG;IACH,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI;IASxD;;OAEG;IACH,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI;IAKjD;;OAEG;IACH,sBAAsB,CAAC,WAAW,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI;IAUhE,OAAO,CAAC,iBAAiB;IAOzB;;OAEG;IACH,YAAY,CAAC,mBAAmB,GAAE,MAAW;CAU9C"}

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

@@ -0,0 +1,68 @@
+import { StoryUIConfig } from '../story-ui.config.js';
+/**
+ * Story synchronization service that keeps chat interface, file system, and memory in sync
+ */
+export declare class StorySyncService {
+    private config;
+    private isProduction;
+    constructor(config: StoryUIConfig);
+    /**
+     * Gets all available stories from both file system and memory
+     */
+    getAllStories(): Promise<SyncedStory[]>;
+    /**
+     * Gets stories from the file system
+     */
+    private getFileSystemStories;
+    /**
+     * Deletes a story from both file system and memory
+     */
+    deleteStory(storyId: string): Promise<boolean>;
+    /**
+     * Gets a specific story by ID
+     */
+    getStory(storyId: string): Promise<SyncedStory | null>;
+    /**
+     * Clears all stories
+     */
+    clearAllStories(): Promise<void>;
+    /**
+     * Syncs localStorage chat history with actual stories
+     */
+    syncChatHistory(): Promise<ChatSyncResult>;
+    /**
+     * Validates that a chat session corresponds to an actual story
+     */
+    validateChatSession(chatId: string): Promise<boolean>;
+}
+/**
+ * Synced story interface that combines file system and memory stories
+ */
+export interface SyncedStory {
+    id: string;
+    title: string;
+    fileName: string;
+    description: string;
+    createdAt: Date;
+    lastAccessed: Date;
+    source: 'filesystem' | 'memory';
+    content: string;
+    prompt?: string;
+}
+/**
+ * Chat synchronization result
+ */
+export interface ChatSyncResult {
+    actualStories: {
+        id: string;
+        title: string;
+        fileName: string;
+        lastUpdated: number;
+    }[];
+    shouldClearOrphanedChats: boolean;
+}
+/**
+ * Gets or creates the global story sync service
+ */
+export declare function getStorySyncService(config: StoryUIConfig): StorySyncService;
+//# sourceMappingURL=storySync.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"storySync.d.ts","sourceRoot":"","sources":["../../story-generator/storySync.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAItD;;GAEG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,YAAY,CAAU;gBAElB,MAAM,EAAE,aAAa;IAMjC;;OAEG;IACG,aAAa,IAAI,OAAO,CAAC,WAAW,EAAE,CAAC;IA4C7C;;OAEG;YACW,oBAAoB;IA0DlC;;OAEG;IACG,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IA8BpD;;OAEG;IACG,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;IAK5D;;OAEG;IACG,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IAqBtC;;OAEG;IACG,eAAe,IAAI,OAAO,CAAC,cAAc,CAAC;IAehD;;OAEG;IACG,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;CAI5D;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,IAAI,CAAC;IAChB,YAAY,EAAE,IAAI,CAAC;IACnB,MAAM,EAAE,YAAY,GAAG,QAAQ,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,aAAa,EAAE;QACb,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,WAAW,EAAE,MAAM,CAAC;KACrB,EAAE,CAAC;IACJ,wBAAwB,EAAE,OAAO,CAAC;CACnC;AAOD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,aAAa,GAAG,gBAAgB,CAK3E"}