@tpitre/story-ui 4.6.2 → 4.7.0

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

@@ -16,7 +16,12 @@ export declare class EnhancedComponentDiscovery {
     private config;
     private discoveredComponents;
     private validateAvailableComponents;
+    private frameworkAdapter;
     constructor(config: StoryUIConfig);
+    /**
+     * Create the appropriate framework adapter based on config
+     */
+    private createFrameworkAdapter;
     /**
      * Discover components from all available sources
      * Priority: 1. Dynamic Discovery 2. Static Lists 3. Manual Config
@@ -76,7 +81,7 @@ export declare class EnhancedComponentDiscovery {
     /**
      * Extract component name from file
      */
-    private extractComponentName;
+    private extractComponentNames;
     /**
      * Extract props from file content
      */

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

@@ -1 +1 @@
-{"version":3,"file":"enhancedComponentDiscovery.d.ts","sourceRoot":"","sources":["../../story-generator/enhancedComponentDiscovery.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAItD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,iBAAiB,GAAG,YAAY,CAAC;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,qBAAa,0BAA0B;IACrC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,oBAAoB,CAA6C;IACzE,OAAO,CAAC,2BAA2B,CAA0B;gBAEjD,MAAM,EAAE,aAAa;IAIjC;;;OAGG;IACG,WAAW,IAAI,OAAO,CAAC,iBAAiB,EAAE,CAAC;IA2CjD;;;OAGG;IACH,OAAO,CAAC,yBAAyB;IAyCjC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAWvB;;GAED;IACH,OAAO,CAAC,cAAc;IAmBtB;;OAEG;IACH,OAAO,CAAC,eAAe;IA6GvB;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAI/B;;OAEG;IACH,OAAO,CAAC,wBAAwB;IA6B9B;;KAEC;YACW,sBAAsB;IAgGpC;;;OAGG;IACH,OAAO,CAAC,8BAA8B;IAoRtC;;OAEG;YACW,sBAAsB;IAsCpC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAe1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAmB3B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA6B1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAgB5B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IA0B5B;;OAEG;IACH,OAAO,CAAC,YAAY;IAiBpB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAkC3B;;OAEG;YACW,0BAA0B;IAmCxC;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAcnC;;OAEG;YACW,sBAAsB;IAMpC;;OAEG;IACH,OAAO,CAAC,yBAAyB;IA4CjC;;OAEG;IACG,sBAAsB,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;QAC9D,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAClC,CAAC;IAwCF;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAwC5B;;OAEG;IACH,0BAA0B,IAAI,MAAM,EAAE;CAMvC"}
+{"version":3,"file":"enhancedComponentDiscovery.d.ts","sourceRoot":"","sources":["../../story-generator/enhancedComponentDiscovery.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAWtD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,iBAAiB,GAAG,YAAY,CAAC;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,qBAAa,0BAA0B;IACrC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,oBAAoB,CAA6C;IACzE,OAAO,CAAC,2BAA2B,CAA0B;IAC7D,OAAO,CAAC,gBAAgB,CAAuB;gBAEnC,MAAM,EAAE,aAAa;IAKjC;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAkB9B;;;OAGG;IACG,WAAW,IAAI,OAAO,CAAC,iBAAiB,EAAE,CAAC;IA2CjD;;;OAGG;IACH,OAAO,CAAC,yBAAyB;IAyCjC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAWvB;;GAED;IACH,OAAO,CAAC,cAAc;IAmBtB;;OAEG;IACH,OAAO,CAAC,eAAe;IA6GvB;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAI/B;;OAEG;IACH,OAAO,CAAC,wBAAwB;IA6B9B;;KAEC;YACW,sBAAsB;IAgGpC;;;OAGG;IACH,OAAO,CAAC,8BAA8B;IAoRtC;;OAEG;YACW,sBAAsB;IA+CpC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAe1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAmB3B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA6B1B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAmC7B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IA0B5B;;OAEG;IACH,OAAO,CAAC,YAAY;IAiBpB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAkC3B;;OAEG;YACW,0BAA0B;IAmCxC;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAcnC;;OAEG;YACW,sBAAsB;IAMpC;;OAEG;IACH,OAAO,CAAC,yBAAyB;IA4CjC;;OAEG;IACG,sBAAsB,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;QAC9D,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAClC,CAAC;IAwCF;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAwC5B;;OAEG;IACH,0BAA0B,IAAI,MAAM,EAAE;CAMvC"}

package/dist/story-generator/enhancedComponentDiscovery.js

@@ -2,11 +2,36 @@ import fs from 'fs';
 import path from 'path';
 import { DynamicPackageDiscovery } from './dynamicPackageDiscovery.js';
 import { logger } from './logger.js';
+import { ReactAdapter } from './framework-adapters/react-adapter.js';
+import { VueAdapter } from './framework-adapters/vue-adapter.js';
+import { AngularAdapter } from './framework-adapters/angular-adapter.js';
+import { SvelteAdapter } from './framework-adapters/svelte-adapter.js';
+import { WebComponentsAdapter } from './framework-adapters/web-components-adapter.js';
 export class EnhancedComponentDiscovery {
     constructor(config) {
         this.discoveredComponents = new Map();
         this.validateAvailableComponents = new Set();
         this.config = config;
+        this.frameworkAdapter = this.createFrameworkAdapter();
+    }
+    /**
+     * Create the appropriate framework adapter based on config
+     */
+    createFrameworkAdapter() {
+        const framework = (this.config.componentFramework || 'react');
+        switch (framework) {
+            case 'vue':
+                return new VueAdapter();
+            case 'angular':
+                return new AngularAdapter();
+            case 'svelte':
+                return new SvelteAdapter();
+            case 'web-components':
+                return new WebComponentsAdapter();
+            case 'react':
+            default:
+                return new ReactAdapter();
+        }
     }
     /**
      * Discover components from all available sources
@@ -609,15 +634,22 @@ export class EnhancedComponentDiscovery {
         if (!fs.existsSync(source.path)) {
             return;
         }
-        const files = this.findComponentFiles(source.path, source.patterns || ['*.tsx', '*.jsx']);
+        // Use adapter's file patterns if source doesn't specify patterns
+        const defaultPatterns = this.frameworkAdapter.getComponentFilePatterns()
+            .map(p => p.replace('**/', '')); // Convert glob to simpler patterns
+        const files = this.findComponentFiles(source.path, source.patterns || defaultPatterns);
         for (const file of files) {
             // Skip story files, test files, and other non-component files
             if (this.isNonComponentFile(file)) {
                 continue;
             }
             const content = fs.readFileSync(file, 'utf-8');
-            const componentName = this.extractComponentName(file, content);
-            if (componentName && !this.discoveredComponents.has(componentName)) {
+            // Use framework adapter for component extraction
+            const componentNames = this.frameworkAdapter.extractComponentNamesFromFile(file, content);
+            for (const componentName of componentNames) {
+                if (this.discoveredComponents.has(componentName)) {
+                    continue;
+                }
                 // Skip Story UI components and other internal components
                 if (this.shouldSkipComponent(componentName, content)) {
                     continue;
@@ -701,18 +733,35 @@ export class EnhancedComponentDiscovery {
     /**
      * Extract component name from file
      */
-    extractComponentName(filePath, content) {
-        // Try to extract from export statements
-        const exportMatch = content.match(/export\s+(default\s+)?(function|const|class)\s+([A-Z][A-Za-z0-9]*)/);
-        if (exportMatch) {
-            return exportMatch[3];
+    extractComponentNames(filePath, content) {
+        const names = new Set();
+        // 1. Check for inline exports: export function/const/class Name
+        const inlineExportRegex = /export\s+(default\s+)?(function|const|class)\s+([A-Z][A-Za-z0-9]*)/g;
+        let match;
+        while ((match = inlineExportRegex.exec(content)) !== null) {
+            names.add(match[3]);
+        }
+        // 2. Check for grouped exports: export { Name1, Name2 }
+        const groupedExportRegex = /export\s*\{\s*([^}]+)\s*\}/g;
+        while ((match = groupedExportRegex.exec(content)) !== null) {
+            const exports = match[1].split(',');
+            for (const exp of exports) {
+                // Handle "Name" or "Name as Alias" - we want the original name
+                const namePart = exp.trim().split(/\s+as\s+/)[0].trim();
+                // Only include PascalCase names (components start with uppercase)
+                if (/^[A-Z][A-Za-z0-9]*$/.test(namePart)) {
+                    names.add(namePart);
+                }
+            }
         }
-        // Try to extract from file name
-        const fileName = path.basename(filePath, path.extname(filePath));
-        if (fileName !== 'index' && /^[A-Z]/.test(fileName)) {
-            return fileName;
+        // 3. Fallback to filename if no exports found
+        if (names.size === 0) {
+            const fileName = path.basename(filePath, path.extname(filePath));
+            if (fileName !== 'index' && /^[A-Z]/.test(fileName)) {
+                names.add(fileName);
+            }
         }
-        return null;
+        return Array.from(names);
     }
     /**
      * Extract props from file content

package/dist/story-generator/framework-adapters/angular-adapter.d.ts

@@ -13,6 +13,15 @@ export declare class AngularAdapter extends BaseFrameworkAdapter {
     readonly name = "Angular";
     readonly supportedStoryFrameworks: StoryFramework[];
     readonly defaultExtension = ".stories.ts";
+    /**
+     * Get glob patterns for Angular component files
+     */
+    getComponentFilePatterns(): string[];
+    /**
+     * Extract component names from an Angular source file.
+     * Handles @Component decorators and NgModule exports.
+     */
+    extractComponentNamesFromFile(filePath: string, content: string): string[];
     generateSystemPrompt(config: StoryUIConfig, options?: StoryGenerationOptions): string;
     generateExamples(config: StoryUIConfig): string;
     generateSampleStory(config: StoryUIConfig, components: DiscoveredComponent[]): string;

package/dist/story-generator/framework-adapters/angular-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"angular-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/angular-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,cAAe,SAAQ,oBAAoB;IACtD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAa;IACzC,QAAQ,CAAC,IAAI,aAAa;IAC1B,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAuJT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAsL/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAqDT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IA4B1D;;OAEG;IACH,OAAO,CAAC,WAAW;IAOnB;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAkBzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;CA+CrE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CAErD"}
+{"version":3,"file":"angular-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/angular-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,cAAe,SAAQ,oBAAoB;IACtD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAa;IACzC,QAAQ,CAAC,IAAI,aAAa;IAC1B,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C;;OAEG;IACH,wBAAwB,IAAI,MAAM,EAAE;IAIpC;;;OAGG;IACH,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAmD1E,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAuJT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAsL/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAqDT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IA4B1D;;OAEG;IACH,OAAO,CAAC,WAAW;IAOnB;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAkBzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;CA+CrE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CAErD"}

package/dist/story-generator/framework-adapters/angular-adapter.js

@@ -16,6 +16,60 @@ export class AngularAdapter extends BaseFrameworkAdapter {
         ];
         this.defaultExtension = '.stories.ts';
     }
+    /**
+     * Get glob patterns for Angular component files
+     */
+    getComponentFilePatterns() {
+        return ['**/*.component.ts', '**/*.ts'];
+    }
+    /**
+     * Extract component names from an Angular source file.
+     * Handles @Component decorators and NgModule exports.
+     */
+    extractComponentNamesFromFile(filePath, content) {
+        const names = new Set();
+        // Pattern 1: @Component decorator with class
+        // @Component({ selector: 'app-name' }) export class NameComponent
+        const componentRegex = /@Component\s*\(\s*\{[\s\S]*?\}\s*\)\s*export\s+class\s+(\w+)/g;
+        let match;
+        while ((match = componentRegex.exec(content)) !== null) {
+            names.add(match[1]);
+        }
+        // Pattern 2: NgModule exports array - for barrel files
+        const exportsArrayRegex = /exports\s*:\s*\[([\s\S]*?)\]/g;
+        while ((match = exportsArrayRegex.exec(content)) !== null) {
+            const exportsContent = match[1];
+            const componentNames = exportsContent
+                .split(',')
+                .map(item => item.trim())
+                .filter(item => item && !item.startsWith('//') && /^[A-Z]/.test(item));
+            componentNames.forEach(name => names.add(name));
+        }
+        // Pattern 3: Named exports from barrel files
+        // export { NameComponent } from './name.component'
+        const namedExportRegex = /export\s*\{\s*([^}]+)\s*\}\s*from\s*['"`]([^'"`]+)['"`]/g;
+        while ((match = namedExportRegex.exec(content)) !== null) {
+            const exports = match[1].split(',');
+            for (const exp of exports) {
+                const namePart = exp.trim().split(/\s+as\s+/).pop()?.trim() || '';
+                if (/^[A-Z][A-Za-z0-9]*(?:Component)?$/.test(namePart)) {
+                    names.add(namePart);
+                }
+            }
+        }
+        // Pattern 4: export * from './path' - track for further resolution
+        // (handled at discovery level, not here)
+        // Filter out non-components (services, modules, etc.)
+        const filteredNames = Array.from(names).filter(name => {
+            // Keep if ends with Component or doesn't end with Service/Module/Directive/Pipe
+            return name.endsWith('Component') ||
+                (!name.endsWith('Service') &&
+                    !name.endsWith('Module') &&
+                    !name.endsWith('Directive') &&
+                    !name.endsWith('Pipe'));
+        });
+        return filteredNames;
+    }
     generateSystemPrompt(config, options) {
         if (config.systemPrompt) {
             return config.systemPrompt;

package/dist/story-generator/framework-adapters/base-adapter.d.ts

@@ -16,6 +16,16 @@ export declare abstract class BaseFrameworkAdapter implements FrameworkAdapter {
     abstract readonly name: string;
     abstract readonly supportedStoryFrameworks: StoryFramework[];
     abstract readonly defaultExtension: string;
+    /**
+     * Get glob patterns for component files in this framework.
+     * Used by component discovery to find relevant files.
+     */
+    abstract getComponentFilePatterns(): string[];
+    /**
+     * Extract component names from a source file.
+     * Framework-specific implementation to detect component exports.
+     */
+    abstract extractComponentNamesFromFile(filePath: string, content: string): string[];
     /**
      * Generate the system prompt for this framework
      */
@@ -69,7 +79,7 @@ export declare abstract class BaseFrameworkAdapter implements FrameworkAdapter {
      */
     protected log(message: string, data?: Record<string, unknown>): void;
     /**
-     * Get common story structure rules
+     * Get common story structure rules including MANDATORY spacing
      */
     protected getCommonRules(): string;
 }

package/dist/story-generator/framework-adapters/base-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/base-adapter.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D;;GAEG;AACH,8BAAsB,oBAAqB,YAAW,gBAAgB;IACpE,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IACtC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAAC;IAC7D,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAE3C;;OAEG;IACH,QAAQ,CAAC,oBAAoB,CAC3B,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAET;;OAEG;IACH,0BAA0B,CACxB,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;IAmBT;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAC5B,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,aAAa,GACpB,MAAM;IAkBT;;OAEG;IACH,SAAS,CAAC,aAAa,CACrB,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,aAAa,GACpB,MAAM;IAUT;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAChC,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM,CAAC,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAcxC;;OAEG;IACH,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAExD;;OAEG;IACH,QAAQ,CAAC,mBAAmB,CAC1B,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAET;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;IAoBT;;;OAGG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAmBzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAkBpE;;OAEG;IACH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAEnE;;OAEG;IACH,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIpE;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,MAAM;CAoBnC"}
+{"version":3,"file":"base-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/base-adapter.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D;;GAEG;AACH,8BAAsB,oBAAqB,YAAW,gBAAgB;IACpE,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IACtC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAAC;IAC7D,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAE3C;;;OAGG;IACH,QAAQ,CAAC,wBAAwB,IAAI,MAAM,EAAE;IAE7C;;;OAGG;IACH,QAAQ,CAAC,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAEnF;;OAEG;IACH,QAAQ,CAAC,oBAAoB,CAC3B,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAET;;OAEG;IACH,0BAA0B,CACxB,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;IAmBT;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAC5B,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,aAAa,GACpB,MAAM;IAkBT;;OAEG;IACH,SAAS,CAAC,aAAa,CACrB,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,aAAa,GACpB,MAAM;IAUT;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAChC,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM,CAAC,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAcxC;;OAEG;IACH,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAExD;;OAEG;IACH,QAAQ,CAAC,mBAAmB,CAC1B,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAET;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;IAoBT;;;OAGG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAmBzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAkBpE;;OAEG;IACH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAEnE;;OAEG;IACH,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIpE;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,MAAM;CA2DnC"}

package/dist/story-generator/framework-adapters/base-adapter.js

@@ -132,7 +132,7 @@ export class BaseFrameworkAdapter {
         logger.debug(`[${this.name}Adapter] ${message}`, data);
     }
     /**
-     * Get common story structure rules
+     * Get common story structure rules including MANDATORY spacing
      */
     getCommonRules() {
         return `
@@ -148,10 +148,49 @@ IMAGE RULES:
 - Always include alt text for images
 - Example: https://picsum.photos/400/300?random=1
 
-SPACING RULES:
-- Use the design system's spacing tokens when available
-- Maintain consistent margins and padding
-- Follow the layout grid system if present
+MANDATORY SPACING & LAYOUT RULES (NON-NEGOTIABLE):
+** CRITICAL: Every generated component MUST have professional-quality spacing. Components without proper spacing look broken and unprofessional. **
+
+1. STORY WRAPPER (REQUIRED for every story):
+   - The render function MUST return a wrapper div with padding
+   - Pattern: render: () => <div style={{ padding: "24px" }}>...content...</div>
+   - This ensures content has breathing room within the Storybook canvas
+
+2. FORM FIELD SPACING (CRITICAL):
+   - ALWAYS wrap form fields in a container with vertical spacing
+   - Use flexbox column with gap: <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+   - Or use design system spacing tokens if available
+   - MINIMUM 16px gap between form fields
+
+3. BUTTON SPACING:
+   - Submit/action buttons: 24px margin-top from form fields above
+   - Pattern: <div style={{ marginTop: "24px" }}><Button>Submit</Button></div>
+   - Button groups should be wrapped with margin-top from content
+
+4. SECTION SPACING:
+   - Between major sections: 32-48px
+   - Between related content groups: 24px
+   - Use dividers or significant whitespace between unrelated content
+
+5. HEADING SPACING:
+   - More space ABOVE headings (24-32px) than below (8-16px)
+   - Pattern: <Heading style={{ marginTop: "32px", marginBottom: "12px" }}>
+
+6. CARD/CONTAINER PADDING:
+   - Internal padding: minimum 16px, preferred 24px
+   - Pattern: <Card style={{ padding: "24px" }}>
+
+7. SPECIFIC VALUES TO USE:
+   - Tight spacing (icons, inline): 4-8px
+   - Related items: 8-12px
+   - Form fields: 16px gap
+   - Buttons from content: 24px margin-top
+   - Sections: 32-48px
+   - Major divisions: 48-64px
+
+SPACING VALIDATION (Self-check before generating):
+Ask yourself: "Does every element have adequate breathing room from its neighbors?"
+If any elements appear cramped or touching, add appropriate spacing.
 `;
     }
 }

package/dist/story-generator/framework-adapters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,YAAY,CAAC;AAG3B,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC/F,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAOpB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D;;;;;GAKG;AACH,cAAM,eAAe;IACnB,OAAO,CAAC,QAAQ,CAAmD;IACnE,OAAO,CAAC,cAAc,CAAmB;IACzC,OAAO,CAAC,iBAAiB,CAAkC;;IAU3D;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAY/B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAIzC;;OAEG;IACH,GAAG,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB,GAAG,SAAS;IAItD;;OAEG;IACH,MAAM,IAAI,gBAAgB,EAAE;IAI5B;;OAEG;IACH,iBAAiB,IAAI,aAAa,EAAE;IAIpC;;OAEG;IACH,sBAAsB,IAAI,aAAa,EAAE;IAIzC;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB;IAIjD;;OAEG;IACH,UAAU,IAAI,gBAAgB;IAI9B;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;IAQrC;;OAEG;IACG,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC;IAoBjE;;OAEG;IACH,oBAAoB,IAAI,iBAAiB,GAAG,IAAI;IAIhD;;OAEG;IACG,cAAc,CAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,eAAe,CAAC;CA8B5B;AAKD;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CAKpD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB,GAAG,SAAS,CAE5E;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,gBAAgB,CAEpD;AAED;;GAEG;AACH,wBAAsB,iBAAiB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAEvF;AAED;;GAEG;AACH,wBAAsB,uBAAuB,CAC3C,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,eAAe,CAAC,CAE1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,YAAY,CAAC;AAG3B,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC/F,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAOpB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAI/D;;;;;GAKG;AACH,cAAM,eAAe;IACnB,OAAO,CAAC,QAAQ,CAAmD;IACnE,OAAO,CAAC,cAAc,CAAmB;IACzC,OAAO,CAAC,iBAAiB,CAAkC;;IAU3D;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAY/B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAIzC;;OAEG;IACH,GAAG,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB,GAAG,SAAS;IAItD;;OAEG;IACH,MAAM,IAAI,gBAAgB,EAAE;IAI5B;;OAEG;IACH,iBAAiB,IAAI,aAAa,EAAE;IAIpC;;OAEG;IACH,sBAAsB,IAAI,aAAa,EAAE;IAIzC;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB;IAIjD;;OAEG;IACH,UAAU,IAAI,gBAAgB;IAI9B;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;IAQrC;;OAEG;IACG,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC;IAoBjE;;OAEG;IACH,oBAAoB,IAAI,iBAAiB,GAAG,IAAI;IAIhD;;OAEG;IACG,cAAc,CAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,eAAe,CAAC;CAkC5B;AAKD;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CAKpD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB,GAAG,SAAS,CAE5E;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,gBAAgB,CAEpD;AAED;;GAEG;AACH,wBAAsB,iBAAiB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAEvF;AAED;;GAEG;AACH,wBAAsB,uBAAuB,CAC3C,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,eAAe,CAAC,CAE1B"}

package/dist/story-generator/framework-adapters/index.js

@@ -22,6 +22,7 @@ import { AngularAdapter } from './angular-adapter.js';
 import { SvelteAdapter } from './svelte-adapter.js';
 import { detectFramework } from './framework-detector.js';
 import { logger } from '../logger.js';
+import { generateLayoutInstructions } from '../promptGenerator.js';
 /**
  * Framework Adapter Registry
  *
@@ -147,10 +148,13 @@ class AdapterRegistry {
             adapter = await this.autoDetect();
         }
         logger.debug('Generating prompt with adapter', { adapter: adapter.type });
+        // Generate layout instructions including mandatory spacing rules
+        const layoutInstructionsArray = generateLayoutInstructions(config);
+        const layoutInstructionsString = layoutInstructionsArray.join('\n');
         return {
             systemPrompt: adapter.generateSystemPrompt(config, options),
             componentReference: adapter.generateComponentReference(components, config),
-            layoutInstructions: '',
+            layoutInstructions: layoutInstructionsString,
             examples: adapter.generateExamples(config),
             sampleStory: adapter.generateSampleStory(config, components),
             framework: this.detectedFramework || {

package/dist/story-generator/framework-adapters/react-adapter.d.ts

@@ -13,6 +13,15 @@ export declare class ReactAdapter extends BaseFrameworkAdapter {
     readonly name = "React";
     readonly supportedStoryFrameworks: StoryFramework[];
     readonly defaultExtension = ".stories.tsx";
+    /**
+     * Get glob patterns for React component files
+     */
+    getComponentFilePatterns(): string[];
+    /**
+     * Extract component names from a React source file.
+     * Handles both inline exports and grouped exports.
+     */
+    extractComponentNamesFromFile(filePath: string, content: string): string[];
     generateSystemPrompt(config: StoryUIConfig, options?: StoryGenerationOptions): string;
     /**
      * FIX #2: Detect if the project uses Chakra UI v3

package/dist/story-generator/framework-adapters/react-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/react-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,YAAa,SAAQ,oBAAoB;IACpD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAW;IACvC,QAAQ,CAAC,IAAI,WAAW;IACxB,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAIjD;IACF,QAAQ,CAAC,gBAAgB,kBAAkB;IAE3C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IA+GT;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAkE/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA4CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IA0B1D;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IA4BzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;CA2BrE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,YAAY,CAEjD"}
+{"version":3,"file":"react-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/react-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,YAAa,SAAQ,oBAAoB;IACpD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAW;IACvC,QAAQ,CAAC,IAAI,WAAW;IACxB,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAIjD;IACF,QAAQ,CAAC,gBAAgB,kBAAkB;IAE3C;;OAEG;IACH,wBAAwB,IAAI,MAAM,EAAE;IAIpC;;;OAGG;IACH,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAyC1E,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IA+GT;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAkE/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA4CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IA0B1D;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IA4BzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;CA2BrE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,YAAY,CAEjD"}

package/dist/story-generator/framework-adapters/react-adapter.js

@@ -4,6 +4,7 @@
  * Generates Storybook stories for React components.
  * Supports CSF 3.0 format with TypeScript.
  */
+import * as path from 'path';
 import { BaseFrameworkAdapter } from './base-adapter.js';
 export class ReactAdapter extends BaseFrameworkAdapter {
     constructor() {
@@ -17,6 +18,51 @@ export class ReactAdapter extends BaseFrameworkAdapter {
         ];
         this.defaultExtension = '.stories.tsx';
     }
+    /**
+     * Get glob patterns for React component files
+     */
+    getComponentFilePatterns() {
+        return ['**/*.tsx', '**/*.jsx', '**/*.ts', '**/*.js'];
+    }
+    /**
+     * Extract component names from a React source file.
+     * Handles both inline exports and grouped exports.
+     */
+    extractComponentNamesFromFile(filePath, content) {
+        const names = new Set();
+        // 1. Check for inline exports: export function/const/class Name
+        const inlineExportRegex = /export\s+(default\s+)?(function|const|class)\s+([A-Z][A-Za-z0-9]*)/g;
+        let match;
+        while ((match = inlineExportRegex.exec(content)) !== null) {
+            names.add(match[3]);
+        }
+        // 2. Check for grouped exports: export { Name1, Name2 }
+        const groupedExportRegex = /export\s*\{\s*([^}]+)\s*\}/g;
+        while ((match = groupedExportRegex.exec(content)) !== null) {
+            const exports = match[1].split(',');
+            for (const exp of exports) {
+                // Handle "Name" or "Name as Alias" - we want the original name
+                const namePart = exp.trim().split(/\s+as\s+/)[0].trim();
+                // Only include PascalCase names (components start with uppercase)
+                if (/^[A-Z][A-Za-z0-9]*$/.test(namePart)) {
+                    names.add(namePart);
+                }
+            }
+        }
+        // 3. Check for React.forwardRef patterns
+        const forwardRefRegex = /export\s+const\s+([A-Z][A-Za-z0-9]*)\s*=\s*(?:React\.)?forwardRef/g;
+        while ((match = forwardRefRegex.exec(content)) !== null) {
+            names.add(match[1]);
+        }
+        // 4. Fallback to filename if no exports found
+        if (names.size === 0) {
+            const fileName = path.basename(filePath, path.extname(filePath));
+            if (fileName !== 'index' && /^[A-Z]/.test(fileName)) {
+                names.add(fileName);
+            }
+        }
+        return Array.from(names);
+    }
     generateSystemPrompt(config, options) {
         if (config.systemPrompt) {
             return config.systemPrompt;

package/dist/story-generator/framework-adapters/svelte-adapter.d.ts

@@ -13,6 +13,15 @@ export declare class SvelteAdapter extends BaseFrameworkAdapter {
     readonly name = "Svelte";
     readonly supportedStoryFrameworks: StoryFramework[];
     readonly defaultExtension = ".stories.svelte";
+    /**
+     * Get glob patterns for Svelte component files
+     */
+    getComponentFilePatterns(): string[];
+    /**
+     * Extract component names from a Svelte source file.
+     * Handles .svelte files and barrel exports.
+     */
+    extractComponentNamesFromFile(filePath: string, content: string): string[];
     generateSystemPrompt(config: StoryUIConfig, options?: StoryGenerationOptions): string;
     generateExamples(config: StoryUIConfig): string;
     generateSampleStory(config: StoryUIConfig, components: DiscoveredComponent[]): string;

package/dist/story-generator/framework-adapters/svelte-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"svelte-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/svelte-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,aAAc,SAAQ,oBAAoB;IACrD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAY;IACxC,QAAQ,CAAC,IAAI,YAAY;IACzB,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,qBAAqB;IAE9C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAgJT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IA2H/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAqCT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAmB1D;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IA8HzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IA2CpE;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;CAWV;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,aAAa,CAEnD"}
+{"version":3,"file":"svelte-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/svelte-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,aAAc,SAAQ,oBAAoB;IACrD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAY;IACxC,QAAQ,CAAC,IAAI,YAAY;IACzB,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,qBAAqB;IAE9C;;OAEG;IACH,wBAAwB,IAAI,MAAM,EAAE;IAIpC;;;OAGG;IACH,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAoD1E,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAgJT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IA2H/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAqCT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAmB1D;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IA8HzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IA2CpE;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;CAWV;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,aAAa,CAEnD"}

package/dist/story-generator/framework-adapters/svelte-adapter.js

@@ -4,6 +4,7 @@
  * Generates Storybook stories for Svelte components.
  * Supports both Svelte 4 and Svelte 5 (runes).
  */
+import * as path from 'path';
 import { BaseFrameworkAdapter } from './base-adapter.js';
 export class SvelteAdapter extends BaseFrameworkAdapter {
     constructor() {
@@ -16,6 +17,63 @@ export class SvelteAdapter extends BaseFrameworkAdapter {
         ];
         this.defaultExtension = '.stories.svelte';
     }
+    /**
+     * Get glob patterns for Svelte component files
+     */
+    getComponentFilePatterns() {
+        return ['**/*.svelte', '**/*.ts', '**/*.js'];
+    }
+    /**
+     * Extract component names from a Svelte source file.
+     * Handles .svelte files and barrel exports.
+     */
+    extractComponentNamesFromFile(filePath, content) {
+        const names = new Set();
+        // For .svelte files, derive name from filename
+        if (filePath.endsWith('.svelte')) {
+            const fileName = path.basename(filePath, '.svelte');
+            // Skip SvelteKit special files
+            if (fileName.startsWith('+')) {
+                return [];
+            }
+            // If already PascalCase, use as-is; otherwise convert kebab-case/snake_case
+            if (/^[A-Z][a-zA-Z0-9]*$/.test(fileName)) {
+                names.add(fileName);
+            }
+            else {
+                // Convert kebab-case or snake_case to PascalCase
+                const pascalName = fileName
+                    .split(/[-_]/)
+                    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+                    .join('');
+                if (/^[A-Z]/.test(pascalName)) {
+                    names.add(pascalName);
+                }
+            }
+            return Array.from(names);
+        }
+        // For .ts/.js barrel files
+        // Pattern: export { default as ComponentName } from './Component.svelte'
+        const barrelExportRegex = /export\s*\{\s*default\s+as\s+([A-Z][a-zA-Z0-9]*)\s*\}\s*from\s*['"`]([^'"`]+\.svelte)['"`]/g;
+        let match;
+        while ((match = barrelExportRegex.exec(content)) !== null) {
+            names.add(match[1]);
+        }
+        // Pattern: export { ComponentName } from './path'
+        const namedExportRegex = /export\s*\{\s*([^}]+)\s*\}\s*from\s*['"`]([^'"`]+)['"`]/g;
+        while ((match = namedExportRegex.exec(content)) !== null) {
+            const exports = match[1].split(',');
+            for (const exp of exports) {
+                const namePart = exp.trim().split(/\s+as\s+/).pop()?.trim() || '';
+                if (/^[A-Z][A-Za-z0-9]*$/.test(namePart)) {
+                    names.add(namePart);
+                }
+            }
+        }
+        // Pattern: export * from './Component.svelte'
+        // These need to be resolved at discovery level
+        return Array.from(names);
+    }
     generateSystemPrompt(config, options) {
         if (config.systemPrompt) {
             return config.systemPrompt;

package/dist/story-generator/framework-adapters/vue-adapter.d.ts

@@ -13,6 +13,15 @@ export declare class VueAdapter extends BaseFrameworkAdapter {
     readonly name = "Vue";
     readonly supportedStoryFrameworks: StoryFramework[];
     readonly defaultExtension = ".stories.ts";
+    /**
+     * Get glob patterns for Vue component files
+     */
+    getComponentFilePatterns(): string[];
+    /**
+     * Extract component names from a Vue source file.
+     * Handles .vue SFCs and barrel files.
+     */
+    extractComponentNamesFromFile(filePath: string, content: string): string[];
     generateSystemPrompt(config: StoryUIConfig, options?: StoryGenerationOptions): string;
     generateExamples(config: StoryUIConfig): string;
     generateSampleStory(config: StoryUIConfig, components: DiscoveredComponent[]): string;

package/dist/story-generator/framework-adapters/vue-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vue-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/vue-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,UAAW,SAAQ,oBAAoB;IAClD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAS;IACrC,QAAQ,CAAC,IAAI,SAAS;IACtB,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAIjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IA+FT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAuH/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA4CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAsB1D;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IA8CzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;CAuBrE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,UAAU,CAE7C"}
+{"version":3,"file":"vue-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/vue-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,UAAW,SAAQ,oBAAoB;IAClD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAS;IACrC,QAAQ,CAAC,IAAI,SAAS;IACtB,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAIjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C;;OAEG;IACH,wBAAwB,IAAI,MAAM,EAAE;IAIpC;;;OAGG;IACH,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAkE1E,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IA+FT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAuH/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA4CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAsB1D;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IA8CzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;CAuBrE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,UAAU,CAE7C"}

package/dist/story-generator/framework-adapters/vue-adapter.js

@@ -4,6 +4,7 @@
  * Generates Storybook stories for Vue 3 components.
  * Supports Composition API and Options API.
  */
+import * as path from 'path';
 import { BaseFrameworkAdapter } from './base-adapter.js';
 export class VueAdapter extends BaseFrameworkAdapter {
     constructor() {
@@ -17,6 +18,79 @@ export class VueAdapter extends BaseFrameworkAdapter {
         ];
         this.defaultExtension = '.stories.ts';
     }
+    /**
+     * Get glob patterns for Vue component files
+     */
+    getComponentFilePatterns() {
+        return ['**/*.vue', '**/*.ts', '**/*.js'];
+    }
+    /**
+     * Extract component names from a Vue source file.
+     * Handles .vue SFCs and barrel files.
+     */
+    extractComponentNamesFromFile(filePath, content) {
+        const names = new Set();
+        // For .vue files, derive name from filename or defineComponent name
+        if (filePath.endsWith('.vue')) {
+            // Try to extract name from defineComponent({ name: 'ComponentName' })
+            const defineComponentNameRegex = /defineComponent\s*\(\s*\{[^]*?name\s*:\s*['"`]([A-Z][a-zA-Z0-9]*)['"`]/;
+            const nameMatch = content.match(defineComponentNameRegex);
+            if (nameMatch) {
+                names.add(nameMatch[1]);
+            }
+            else {
+                // Try Options API name property
+                const optionsNameRegex = /name\s*:\s*['"`]([A-Z][a-zA-Z0-9]*)['"`]/;
+                const optionsMatch = content.match(optionsNameRegex);
+                if (optionsMatch) {
+                    names.add(optionsMatch[1]);
+                }
+                else {
+                    // Fallback to filename
+                    const fileName = path.basename(filePath, '.vue');
+                    // If already PascalCase, use as-is; otherwise convert kebab-case/snake_case
+                    if (/^[A-Z][a-zA-Z0-9]*$/.test(fileName)) {
+                        names.add(fileName);
+                    }
+                    else {
+                        // Convert kebab-case or snake_case to PascalCase
+                        const pascalName = fileName
+                            .split(/[-_]/)
+                            .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+                            .join('');
+                        if (/^[A-Z]/.test(pascalName)) {
+                            names.add(pascalName);
+                        }
+                    }
+                }
+            }
+            return Array.from(names);
+        }
+        // For .ts/.js barrel files, look for re-exports
+        // Pattern: export { default as ComponentName } from './Component.vue'
+        const barrelExportRegex = /export\s*\{\s*default\s+as\s+([A-Z][a-zA-Z0-9]*)\s*\}\s*from\s*['"`]([^'"`]+\.vue)['"`]/g;
+        let match;
+        while ((match = barrelExportRegex.exec(content)) !== null) {
+            names.add(match[1]);
+        }
+        // Pattern: export { ComponentName } from './path'
+        const namedExportRegex = /export\s*\{\s*([^}]+)\s*\}\s*from\s*['"`]([^'"`]+)['"`]/g;
+        while ((match = namedExportRegex.exec(content)) !== null) {
+            const exports = match[1].split(',');
+            for (const exp of exports) {
+                const namePart = exp.trim().split(/\s+as\s+/).pop()?.trim() || '';
+                if (/^[A-Z][A-Za-z0-9]*$/.test(namePart)) {
+                    names.add(namePart);
+                }
+            }
+        }
+        // Pattern: export const ComponentName = ...
+        const constExportRegex = /export\s+const\s+([A-Z][A-Za-z0-9]*)\s*=/g;
+        while ((match = constExportRegex.exec(content)) !== null) {
+            names.add(match[1]);
+        }
+        return Array.from(names);
+    }
     generateSystemPrompt(config, options) {
         if (config.systemPrompt) {
             return config.systemPrompt;

package/dist/story-generator/framework-adapters/web-components-adapter.d.ts

@@ -13,6 +13,19 @@ export declare class WebComponentsAdapter extends BaseFrameworkAdapter {
     readonly name = "Web Components";
     readonly supportedStoryFrameworks: StoryFramework[];
     readonly defaultExtension = ".stories.ts";
+    /**
+     * Get glob patterns for Web Component files
+     */
+    getComponentFilePatterns(): string[];
+    /**
+     * Extract component names from a Web Component source file.
+     * Handles vanilla customElements.define, Lit @customElement, and Stencil @Component.
+     */
+    extractComponentNamesFromFile(filePath: string, content: string): string[];
+    /**
+     * Convert a kebab-case tag name to PascalCase
+     */
+    private tagToPascalCase;
     generateSystemPrompt(config: StoryUIConfig, options?: StoryGenerationOptions): string;
     generateExamples(config: StoryUIConfig): string;
     generateSampleStory(config: StoryUIConfig, components: DiscoveredComponent[]): string;

package/dist/story-generator/framework-adapters/web-components-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"web-components-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/web-components-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,oBAAqB,SAAQ,oBAAoB;IAC5D,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAoB;IAChD,QAAQ,CAAC,IAAI,oBAAoB;IACjC,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IA4FT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IA0G/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA8CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAsB1D;;OAEG;IACH,OAAO,CAAC,WAAW;IAOnB;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAuCzC;;;;;;;;OAQG;IACH,OAAO,CAAC,yBAAyB;IAiCjC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAwBpE;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;CAYV;AAED;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,oBAAoB,CAEjE"}
+{"version":3,"file":"web-components-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/web-components-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,oBAAqB,SAAQ,oBAAoB;IAC5D,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAoB;IAChD,QAAQ,CAAC,IAAI,oBAAoB;IACjC,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C;;OAEG;IACH,wBAAwB,IAAI,MAAM,EAAE;IAIpC;;;OAGG;IACH,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAoE1E;;OAEG;IACH,OAAO,CAAC,eAAe;IAOvB,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IA4FT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IA0G/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA8CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAsB1D;;OAEG;IACH,OAAO,CAAC,WAAW;IAOnB;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAuCzC;;;;;;;;OAQG;IACH,OAAO,CAAC,yBAAyB;IAiCjC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAwBpE;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;CAYV;AAED;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,oBAAoB,CAEjE"}

package/dist/story-generator/framework-adapters/web-components-adapter.js

@@ -16,6 +16,86 @@ export class WebComponentsAdapter extends BaseFrameworkAdapter {
         ];
         this.defaultExtension = '.stories.ts';
     }
+    /**
+     * Get glob patterns for Web Component files
+     */
+    getComponentFilePatterns() {
+        return ['**/*.ts', '**/*.js', '**/custom-elements.json'];
+    }
+    /**
+     * Extract component names from a Web Component source file.
+     * Handles vanilla customElements.define, Lit @customElement, and Stencil @Component.
+     */
+    extractComponentNamesFromFile(filePath, content) {
+        const names = new Set();
+        // Check for Custom Elements Manifest (preferred)
+        if (filePath.endsWith('custom-elements.json')) {
+            try {
+                const manifest = JSON.parse(content);
+                if (manifest.modules) {
+                    for (const module of manifest.modules) {
+                        if (module.declarations) {
+                            for (const declaration of module.declarations) {
+                                if (declaration.customElement && declaration.tagName) {
+                                    // Convert tag-name to PascalCase
+                                    const pascalName = this.tagToPascalCase(declaration.tagName);
+                                    names.add(pascalName);
+                                }
+                            }
+                        }
+                    }
+                }
+                return Array.from(names);
+            }
+            catch {
+                // Invalid JSON, continue with regex patterns
+            }
+        }
+        // Pattern 1: Vanilla customElements.define('tag-name', ClassName) with named class
+        const vanillaDefineNamedRegex = /customElements\.define\(\s*['"]([a-z][\w-]*)['"],\s*([A-Z][A-Za-z0-9]*)\s*[),]/g;
+        let match;
+        while ((match = vanillaDefineNamedRegex.exec(content)) !== null) {
+            names.add(match[2]); // Use the class name
+        }
+        // Pattern 1b: Vanilla customElements.define('tag-name', class extends...) - inline class
+        // For inline classes, convert tag name to PascalCase
+        const vanillaDefineInlineRegex = /customElements\.define\(\s*['"]([a-z][\w-]*)['"],\s*class\s+extends/gi;
+        while ((match = vanillaDefineInlineRegex.exec(content)) !== null) {
+            const pascalName = this.tagToPascalCase(match[1]);
+            names.add(pascalName);
+        }
+        // Pattern 2: Lit @customElement('tag-name') decorator (handles multiline)
+        const litDecoratorRegex = /@customElement\(\s*['"]([a-z][\w-]*)['"][^)]*\)[\s\S]*?(?:export\s+)?class\s+([A-Z][A-Za-z0-9]*)/g;
+        while ((match = litDecoratorRegex.exec(content)) !== null) {
+            names.add(match[2]); // Use the class name
+        }
+        // Pattern 3: Stencil @Component({ tag: 'tag-name' }) decorator
+        const stencilRegex = /@Component\(\s*\{[^}]*tag:\s*['"]([a-z][\w-]*)['"][^}]*\}\s*\)\s*(?:export\s+)?class\s+(\w+)/gi;
+        while ((match = stencilRegex.exec(content)) !== null) {
+            names.add(match[2]); // Use the class name
+        }
+        // Pattern 4: Named exports from barrel files
+        const namedExportRegex = /export\s*\{\s*([^}]+)\s*\}\s*from\s*['"`]([^'"`]+)['"`]/g;
+        while ((match = namedExportRegex.exec(content)) !== null) {
+            const exports = match[1].split(',');
+            for (const exp of exports) {
+                const namePart = exp.trim().split(/\s+as\s+/).pop()?.trim() || '';
+                if (/^[A-Z][A-Za-z0-9]*$/.test(namePart)) {
+                    names.add(namePart);
+                }
+            }
+        }
+        return Array.from(names);
+    }
+    /**
+     * Convert a kebab-case tag name to PascalCase
+     */
+    tagToPascalCase(tagName) {
+        return tagName
+            .split('-')
+            .map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+            .join('');
+    }
     generateSystemPrompt(config, options) {
         if (config.systemPrompt) {
             return config.systemPrompt;

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

@@ -19,6 +19,12 @@ export interface GeneratedPrompt {
  * Generates a comprehensive AI prompt based on the configuration and discovered components
  */
 export declare function generatePrompt(config: StoryUIConfig, components: DiscoveredComponent[]): GeneratedPrompt;
+/**
+ * Generates layout-specific instructions including MANDATORY vertical spacing rules
+ * @param config - The StoryUI configuration object
+ * @returns Array of layout instruction strings to be included in the prompt
+ */
+export declare function generateLayoutInstructions(config: StoryUIConfig): string[];
 /**
  * Builds the complete Claude prompt
  */

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

@@ -1 +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;AAyOvC;;;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;AA2hBD;;GAEG;AACH,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,OAAO,CAAC,MAAM,CAAC,CA8JjB;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,CAiHjB;AA4ED;;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"}
+{"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;AAyOvC;;;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;AAqTD;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,EAAE,CA6D1E;AA0MD;;GAEG;AACH,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,OAAO,CAAC,MAAM,CAAC,CA8JjB;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,CAiHjB;AA4ED;;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

@@ -465,13 +465,47 @@ function formatComponentReference(component, config) {
     return reference;
 }
 /**
- * Generates layout-specific instructions
+ * Generates layout-specific instructions including MANDATORY vertical spacing rules
+ * @param config - The StoryUI configuration object
+ * @returns Array of layout instruction strings to be included in the prompt
  */
-function generateLayoutInstructions(config) {
+export function generateLayoutInstructions(config) {
     const instructions = [];
     const layoutRules = config.layoutRules;
+    // MANDATORY VERTICAL SPACING RULES - These are non-negotiable for professional UI quality
+    instructions.push('MANDATORY VERTICAL SPACING RULES (NON-NEGOTIABLE):');
+    instructions.push('');
+    instructions.push('** CRITICAL: Every component MUST have proper vertical spacing. Components without spacing look broken and unprofessional. **');
+    instructions.push('');
+    instructions.push('1. FORM FIELDS: Always wrap form fields in a container with vertical spacing:');
+    instructions.push('   - Use flexbox column with gap: <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>');
+    instructions.push('   - Or use your design system\'s spacing tokens if available');
+    instructions.push('   - MINIMUM 16px gap between form fields, 24px for complex forms');
+    instructions.push('');
+    instructions.push('2. BUTTON SPACING: Buttons MUST have margin-top from content above:');
+    instructions.push('   - Submit/action buttons: 24px margin-top from form fields');
+    instructions.push('   - Button groups: wrap in <div style={{ marginTop: "24px" }}>');
+    instructions.push('');
+    instructions.push('3. SECTION SPACING: Logical sections need clear visual separation:');
+    instructions.push('   - Between major sections: 32-48px');
+    instructions.push('   - Between related content groups: 24px');
+    instructions.push('   - Use dividers or significant whitespace between unrelated content');
+    instructions.push('');
+    instructions.push('4. HEADING SPACING: Headings need asymmetric spacing:');
+    instructions.push('   - More space ABOVE headings (24-32px) than below (8-16px)');
+    instructions.push('   - This creates visual hierarchy and groups content with its heading');
+    instructions.push('');
+    instructions.push('5. CARD/CONTAINER PADDING: Internal padding is mandatory:');
+    instructions.push('   - Minimum 16px padding on all sides');
+    instructions.push('   - Preferred 24px for cards with multiple elements');
+    instructions.push('   - Use design system spacing tokens when available');
+    instructions.push('');
+    instructions.push('6. WRAPPER PATTERN (REQUIRED): The story render function MUST return a wrapper div with padding:');
+    instructions.push('   - render: () => <div style={{ padding: "24px" }}>...content...</div>');
+    instructions.push('   - This ensures content has breathing room within the Storybook canvas');
+    instructions.push('');
     if (layoutRules.multiColumnWrapper && layoutRules.columnComponent) {
-        instructions.push('CRITICAL LAYOUT RULES:');
+        instructions.push('MULTI-COLUMN LAYOUT RULES:');
         instructions.push(`- For ANY multi-column layout (2, 3, or more columns), use ${layoutRules.multiColumnWrapper} components`);
         instructions.push(`- Each column must be wrapped in its own ${layoutRules.columnComponent} element`);
         instructions.push(`- Structure: <${layoutRules.multiColumnWrapper}><${layoutRules.columnComponent}>column 1</${layoutRules.columnComponent}><${layoutRules.columnComponent}>column 2</${layoutRules.columnComponent}></${layoutRules.multiColumnWrapper}>`);
@@ -479,14 +513,17 @@ function generateLayoutInstructions(config) {
         instructions.push(`- NEVER use CSS properties as props (like display="grid" or gridTemplateColumns) - these are not valid props`);
         instructions.push(`- For grid-like layouts, use Flex with wrap prop and appropriate gap, NOT CSS Grid`);
         instructions.push(`- The ${layoutRules.multiColumnWrapper} should be the main component in your story for multi-column layouts`);
+        instructions.push('');
     }
     if (layoutRules.prohibitedElements && layoutRules.prohibitedElements.length > 0) {
         instructions.push(`- NEVER use plain HTML ${layoutRules.prohibitedElements.join(', ')} elements - ALWAYS use the provided design system components`);
     }
     // Generic layout instructions for all design systems
+    instructions.push('GENERAL LAYOUT BEST PRACTICES:');
     instructions.push(`- Use semantic heading components from your design system instead of raw <h1>-<h6> tags`);
-    instructions.push(`- Use the design system's layout components and spacing tokens instead of inline styles`);
+    instructions.push(`- Use the design system's layout components and spacing tokens instead of inline styles when available`);
     instructions.push(`- Prefer design system components over plain HTML elements for consistent styling`);
+    instructions.push(`- ALWAYS test mentally: "Does this component have enough visual breathing room?" If not, add spacing.`);
     return instructions;
 }
 /**

package/dist/templates/StoryUI/StoryUIPanel.css

@@ -1248,6 +1248,7 @@
 
 /* ============================================
    Completion Card - shares bubble styling with message bubbles
+   Uses explicit colors with !important to prevent design system overrides
    ============================================ */
 .sui-completion {
   max-width: 85%;
@@ -1256,9 +1257,17 @@
   border-bottom-left-radius: var(--radius-sm);
   font-size: 0.9375rem;
   line-height: 1.6;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--card));
-  color: hsl(var(--foreground));
+  /* Explicit light mode colors */
+  background: #ffffff !important;
+  color: #18181b !important;
+  border: 1px solid #e4e4e7 !important;
+}
+
+/* Completion card - dark mode */
+.sui-root.dark .sui-completion {
+  background: #27272a !important;
+  color: #fafafa !important;
+  border: 1px solid #3f3f46 !important;
 }
 
 .sui-completion-header {
@@ -1266,7 +1275,13 @@
   align-items: center;
   gap: var(--space-2);
   font-weight: 500;
-  color: hsl(var(--success));
+  /* Explicit green for success - readable on white */
+  color: #16a34a !important;
+}
+
+/* Completion header - dark mode */
+.sui-root.dark .sui-completion-header {
+  color: #22c55e !important;
 }
 
 .sui-completion-components {
@@ -1278,48 +1293,81 @@
 
 .sui-completion-tag {
   padding: 0.125rem var(--space-2);
-  background: hsl(var(--info) / 0.15);
-  color: hsl(var(--info));
+  /* Explicit blue colors - readable tag styling */
+  background: #eff6ff !important;
+  color: #2563eb !important;
   border-radius: var(--radius-full);
   font-size: 0.75rem;
   font-family: var(--font-mono);
 }
 
+/* Completion tag - dark mode */
+.sui-root.dark .sui-completion-tag {
+  background: #1e3a5f !important;
+  color: #60a5fa !important;
+}
+
 .sui-completion-metrics {
   display: flex;
   gap: var(--space-4);
   margin-top: var(--space-3);
   font-size: 0.8125rem;
-  color: hsl(var(--muted-foreground));
+  /* Explicit muted gray */
+  color: #71717a !important;
+}
+
+/* Completion metrics - dark mode */
+.sui-root.dark .sui-completion-metrics {
+  color: #a1a1aa !important;
 }
 
 /* Fallback story styling (error placeholder was created) */
 .sui-completion-fallback .sui-completion-header {
-  color: hsl(var(--warning, 38 92% 50%));
+  color: #ca8a04 !important; /* Amber/warning color */
+}
+
+.sui-root.dark .sui-completion-fallback .sui-completion-header {
+  color: #facc15 !important; /* Lighter amber for dark mode */
 }
 
 .sui-completion-fallback-warning {
   margin-top: var(--space-2);
   padding: var(--space-2) var(--space-3);
-  background: hsl(var(--warning, 38 92% 50%) / 0.15);
+  background: #fef9c3 !important; /* Light amber background */
   border-radius: var(--radius-md);
   font-size: 0.8125rem;
 }
 
+.sui-root.dark .sui-completion-fallback-warning {
+  background: #422006 !important; /* Dark amber background */
+}
+
 .sui-completion-fallback-warning strong {
   display: block;
-  color: hsl(var(--warning, 38 92% 50%));
+  color: #ca8a04 !important; /* Amber text */
   margin-bottom: var(--space-1);
 }
 
+.sui-root.dark .sui-completion-fallback-warning strong {
+  color: #facc15 !important;
+}
+
 .sui-completion-fallback-warning p {
   margin: 0;
-  color: hsl(var(--muted-foreground));
+  color: #71717a !important; /* Muted gray */
+}
+
+.sui-root.dark .sui-completion-fallback-warning p {
+  color: #a1a1aa !important;
 }
 
 /* Error completion styling (generation failed completely) */
 .sui-completion-error .sui-completion-header {
-  color: hsl(var(--destructive));
+  color: #dc2626 !important; /* Red for errors */
+}
+
+.sui-root.dark .sui-completion-error .sui-completion-header {
+  color: #f87171 !important; /* Lighter red for dark mode */
 }
 
 /* ============================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "4.6.2",
+  "version": "4.7.0",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",

package/templates/StoryUI/StoryUIPanel.css

@@ -1248,6 +1248,7 @@
 
 /* ============================================
    Completion Card - shares bubble styling with message bubbles
+   Uses explicit colors with !important to prevent design system overrides
    ============================================ */
 .sui-completion {
   max-width: 85%;
@@ -1256,9 +1257,17 @@
   border-bottom-left-radius: var(--radius-sm);
   font-size: 0.9375rem;
   line-height: 1.6;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--card));
-  color: hsl(var(--foreground));
+  /* Explicit light mode colors */
+  background: #ffffff !important;
+  color: #18181b !important;
+  border: 1px solid #e4e4e7 !important;
+}
+
+/* Completion card - dark mode */
+.sui-root.dark .sui-completion {
+  background: #27272a !important;
+  color: #fafafa !important;
+  border: 1px solid #3f3f46 !important;
 }
 
 .sui-completion-header {
@@ -1266,7 +1275,13 @@
   align-items: center;
   gap: var(--space-2);
   font-weight: 500;
-  color: hsl(var(--success));
+  /* Explicit green for success - readable on white */
+  color: #16a34a !important;
+}
+
+/* Completion header - dark mode */
+.sui-root.dark .sui-completion-header {
+  color: #22c55e !important;
 }
 
 .sui-completion-components {
@@ -1278,48 +1293,81 @@
 
 .sui-completion-tag {
   padding: 0.125rem var(--space-2);
-  background: hsl(var(--info) / 0.15);
-  color: hsl(var(--info));
+  /* Explicit blue colors - readable tag styling */
+  background: #eff6ff !important;
+  color: #2563eb !important;
   border-radius: var(--radius-full);
   font-size: 0.75rem;
   font-family: var(--font-mono);
 }
 
+/* Completion tag - dark mode */
+.sui-root.dark .sui-completion-tag {
+  background: #1e3a5f !important;
+  color: #60a5fa !important;
+}
+
 .sui-completion-metrics {
   display: flex;
   gap: var(--space-4);
   margin-top: var(--space-3);
   font-size: 0.8125rem;
-  color: hsl(var(--muted-foreground));
+  /* Explicit muted gray */
+  color: #71717a !important;
+}
+
+/* Completion metrics - dark mode */
+.sui-root.dark .sui-completion-metrics {
+  color: #a1a1aa !important;
 }
 
 /* Fallback story styling (error placeholder was created) */
 .sui-completion-fallback .sui-completion-header {
-  color: hsl(var(--warning, 38 92% 50%));
+  color: #ca8a04 !important; /* Amber/warning color */
+}
+
+.sui-root.dark .sui-completion-fallback .sui-completion-header {
+  color: #facc15 !important; /* Lighter amber for dark mode */
 }
 
 .sui-completion-fallback-warning {
   margin-top: var(--space-2);
   padding: var(--space-2) var(--space-3);
-  background: hsl(var(--warning, 38 92% 50%) / 0.15);
+  background: #fef9c3 !important; /* Light amber background */
   border-radius: var(--radius-md);
   font-size: 0.8125rem;
 }
 
+.sui-root.dark .sui-completion-fallback-warning {
+  background: #422006 !important; /* Dark amber background */
+}
+
 .sui-completion-fallback-warning strong {
   display: block;
-  color: hsl(var(--warning, 38 92% 50%));
+  color: #ca8a04 !important; /* Amber text */
   margin-bottom: var(--space-1);
 }
 
+.sui-root.dark .sui-completion-fallback-warning strong {
+  color: #facc15 !important;
+}
+
 .sui-completion-fallback-warning p {
   margin: 0;
-  color: hsl(var(--muted-foreground));
+  color: #71717a !important; /* Muted gray */
+}
+
+.sui-root.dark .sui-completion-fallback-warning p {
+  color: #a1a1aa !important;
 }
 
 /* Error completion styling (generation failed completely) */
 .sui-completion-error .sui-completion-header {
-  color: hsl(var(--destructive));
+  color: #dc2626 !important; /* Red for errors */
+}
+
+.sui-root.dark .sui-completion-error .sui-completion-header {
+  color: #f87171 !important; /* Lighter red for dark mode */
 }
 
 /* ============================================