@tpitre/story-ui 4.7.0 → 4.7.1

package/dist/cli/index.js

@@ -30,12 +30,16 @@ program
     .description('Start the Story UI server')
     .option('-p, --port <port>', 'Port to run the server on', '4001')
     .option('-c, --config <config>', 'Path to configuration file')
+    .option('--mcp', 'Also start MCP stdio server for Claude Desktop integration')
     .action(async (options) => {
-    console.log('🚀 Starting Story UI server...');
+    // Use stderr for all logging to avoid breaking MCP JSON-RPC protocol
+    // when Claude Desktop spawns this process
+    console.error('🚀 Starting Story UI server...');
     // Use absolute path to avoid dist/dist issue when package is linked
     const pkgRoot = path.resolve(__dirname, '..');
     const serverPath = path.join(pkgRoot, 'mcp-server/index.js');
-    console.log(`✅ Using MCP server at: ${serverPath}`);
+    const mcpStdioPath = path.join(pkgRoot, 'mcp-server/mcp-stdio-server.js');
+    console.error(`✅ Using HTTP server at: ${serverPath}`);
     // FIRST_EDIT: determine an available port
     const requestedPort = parseInt(options.port || '4001', 10);
     const isPortFree = (port) => {
@@ -55,7 +59,7 @@ program
         finalPort += 1;
     }
     if (finalPort !== requestedPort) {
-        console.log(`⚠️  Port ${requestedPort} is in use. Using ${finalPort} instead.`);
+        console.error(`⚠️  Port ${requestedPort} is in use. Using ${finalPort} instead.`);
     }
     const env = { ...process.env, PORT: String(finalPort) };
     // Set memory limit to prevent heap exhaustion during vision/image processing
@@ -66,16 +70,53 @@ program
     if (options.config) {
         env.STORY_UI_CONFIG_PATH = options.config;
     }
+    // Log the working directory for debugging
+    console.error(`📁 Working directory: ${process.cwd()}`);
+    // Redirect child stdout to stderr to avoid breaking MCP JSON-RPC protocol
+    // when Claude Desktop spawns this process. The HTTP server logs will still
+    // be visible but won't interfere with MCP communication.
     const server = spawn('node', [serverPath], {
-        stdio: 'inherit',
-        env
+        stdio: ['ignore', 'pipe', 'inherit'],
+        env,
+        cwd: process.cwd() // Explicitly pass cwd to ensure config is found
     });
+    // Pipe child's stdout to stderr so logs are visible without breaking MCP
+    if (server.stdout) {
+        server.stdout.pipe(process.stderr);
+    }
     server.on('close', (code) => {
-        console.log(`Server exited with code ${code}`);
-    });
-    process.on('SIGINT', () => {
-        server.kill('SIGINT');
+        console.error(`HTTP server exited with code ${code}`);
     });
+    // If --mcp flag is set, also start the MCP stdio server for Claude Desktop
+    // This allows a single command to run both HTTP server and MCP protocol handler
+    if (options.mcp) {
+        console.error('📡 Starting MCP stdio server for Claude Desktop...');
+        // Wait a moment for HTTP server to start
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        const mcpEnv = {
+            ...process.env,
+            STORY_UI_HTTP_PORT: String(finalPort)
+        };
+        // Spawn MCP stdio server with stdin/stdout inherited for JSON-RPC communication
+        const mcpServer = spawn('node', [mcpStdioPath], {
+            stdio: 'inherit',
+            env: mcpEnv,
+            cwd: process.cwd() // Explicitly pass cwd to ensure config is found
+        });
+        mcpServer.on('close', (code) => {
+            console.error(`MCP stdio server exited with code ${code}`);
+            server.kill('SIGTERM');
+        });
+        process.on('SIGINT', () => {
+            mcpServer.kill('SIGINT');
+            server.kill('SIGINT');
+        });
+    }
+    else {
+        process.on('SIGINT', () => {
+            server.kill('SIGINT');
+        });
+    }
 });
 program
     .command('config')

package/dist/mcp-server/index.js

@@ -769,8 +769,8 @@ if (storybookProxyEnabled) {
 }
 // Start server
 app.listen(PORT, () => {
-    console.log(`MCP server running on port ${PORT}`);
-    console.log(`Stories will be generated to: ${config.generatedStoriesPath}`);
+    console.error(`MCP server running on port ${PORT}`);
+    console.error(`Stories will be generated to: ${config.generatedStoriesPath}`);
 }).on('error', (err) => {
     if (err.code === 'EADDRINUSE') {
         console.error(`\n❌ Port ${PORT} is already in use!`);

package/dist/mcp-server/mcp-stdio-server.js

@@ -12,7 +12,8 @@ import { fileURLToPath } from 'url';
 // Get package version dynamically
 const __filename_mcp = fileURLToPath(import.meta.url);
 const __dirname_mcp = path.dirname(__filename_mcp);
-const packageJsonPath = path.resolve(__dirname_mcp, '../package.json');
+// Go up two levels from dist/mcp-server/ to reach the project root
+const packageJsonPath = path.resolve(__dirname_mcp, '../../package.json');
 const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
 const PACKAGE_VERSION = packageJson.version;
 // Check for working directory override from environment or command line

package/dist/mcp-server/routes/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAW5C,wBAAsB,aAAa,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAkC9D;AAED,wBAAsB,QAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DA8CzD"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAW5C,wBAAsB,aAAa,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAkC9D;AAED,wBAAsB,QAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAgDzD"}

package/dist/mcp-server/routes/components.js

@@ -58,19 +58,21 @@ export async function getProps(req, res) {
         // Find the requested component
         const comp = cachedComponents.find(c => c.name === component);
         if (!comp) {
-            return res.json([]);
+            return res.json({});
         }
-        // Return props in a format compatible with existing UI
-        const props = comp.props.map((prop) => ({
-            name: prop,
-            type: 'string', // We'd need more sophisticated type detection
-            description: `${prop} property`,
-            required: false
-        }));
-        res.json(props);
+        // Return props as an object keyed by prop name (for MCP handler compatibility)
+        const propsObject = {};
+        for (const prop of comp.props) {
+            propsObject[prop] = {
+                type: 'string', // We'd need more sophisticated type detection
+                description: `${prop} property`,
+                required: false
+            };
+        }
+        res.json(propsObject);
     }
     catch (error) {
         console.error('Error getting component props:', error);
-        res.json([]);
+        res.json({});
     }
 }

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

@@ -84,8 +84,23 @@ export declare class EnhancedComponentDiscovery {
     private extractComponentNames;
     /**
      * Extract props from file content
+     * Supports multiple patterns:
+     * - TypeScript interfaces (interface ButtonProps { variant: ... })
+     * - PropTypes (Component.propTypes = { variant: ... })
+     * - Function parameter destructuring ({ className, variant, ...props }: Props)
+     * - VariantProps from class-variance-authority
      */
     private extractPropsFromFile;
+    /**
+     * Extract props from function parameter destructuring patterns
+     * Works with React, Vue <script setup>, and other frameworks
+     */
+    private extractDestructuredProps;
+    /**
+     * Extract props from co-located story file (e.g., Button.stories.tsx)
+     * This is a fallback for components like shadcn/ui that don't use interface Props patterns
+     */
+    private extractPropsFromStoryFile;
     /**
      * Extract slots from 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;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"}
+{"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;IAwDpC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAe1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAmB3B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA6B1B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAmC7B;;;;;;;OAOG;IACH,OAAO,CAAC,oBAAoB;IAyD5B;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IAkChC;;;OAGG;IACH,OAAO,CAAC,yBAAyB;IA2EjC;;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

@@ -654,7 +654,15 @@ export class EnhancedComponentDiscovery {
                 if (this.shouldSkipComponent(componentName, content)) {
                     continue;
                 }
-                const props = this.extractPropsFromFile(content);
+                let props = this.extractPropsFromFile(content);
+                // Always check co-located story file for additional props (argTypes, args)
+                // Story files often define props that aren't in the component source (e.g., disabled, children)
+                const storyProps = this.extractPropsFromStoryFile(file);
+                for (const prop of storyProps) {
+                    if (!props.includes(prop)) {
+                        props.push(prop);
+                    }
+                }
                 this.discoveredComponents.set(componentName, {
                     name: componentName,
                     filePath: file,
@@ -765,6 +773,11 @@ export class EnhancedComponentDiscovery {
     }
     /**
      * Extract props from file content
+     * Supports multiple patterns:
+     * - TypeScript interfaces (interface ButtonProps { variant: ... })
+     * - PropTypes (Component.propTypes = { variant: ... })
+     * - Function parameter destructuring ({ className, variant, ...props }: Props)
+     * - VariantProps from class-variance-authority
      */
     extractPropsFromFile(content) {
         const props = [];
@@ -786,6 +799,140 @@ export class EnhancedComponentDiscovery {
                 props.push(match[1]);
             }
         }
+        // Extract from function parameter destructuring
+        // Matches patterns like:
+        //   function Component({ prop1, prop2, ...rest }: Props)
+        //   const Component = ({ prop1, prop2 }: Props) =>
+        //   export function Component({ prop1, prop2 }: React.ComponentProps<"div">)
+        const destructuringProps = this.extractDestructuredProps(content);
+        for (const prop of destructuringProps) {
+            if (!props.includes(prop)) {
+                props.push(prop);
+            }
+        }
+        // Extract from VariantProps (class-variance-authority pattern)
+        // Matches: VariantProps<typeof buttonVariants>
+        const variantPropsMatch = content.match(/VariantProps<typeof\s+(\w+)>/);
+        if (variantPropsMatch) {
+            const variantsName = variantPropsMatch[1];
+            // Look for the cva definition to extract variant names
+            const cvaMatch = content.match(new RegExp(`${variantsName}\\s*=\\s*cva\\([^,]+,\\s*{\\s*variants:\\s*{([^}]+(?:{[^}]*}[^}]*)*)}`));
+            if (cvaMatch) {
+                const variantsContent = cvaMatch[1];
+                // Extract variant property names (e.g., variant, size)
+                const variantMatches = variantsContent.matchAll(/^\s*(\w+)\s*:\s*{/gm);
+                for (const match of variantMatches) {
+                    if (!props.includes(match[1])) {
+                        props.push(match[1]);
+                    }
+                }
+            }
+        }
+        return props;
+    }
+    /**
+     * Extract props from function parameter destructuring patterns
+     * Works with React, Vue <script setup>, and other frameworks
+     */
+    extractDestructuredProps(content) {
+        const props = [];
+        // Pattern 1: function Component({ prop1, prop2, ...rest }: Type)
+        // Pattern 2: const Component = ({ prop1, prop2 }: Type) =>
+        // Pattern 3: export function Component({ prop1, prop2 }: Type)
+        const functionPatterns = [
+            // function Name({ destructured }: Type)
+            /(?:export\s+)?(?:default\s+)?function\s+[A-Z]\w*\s*\(\s*\{\s*([^}]+)\s*\}\s*:/g,
+            // const Name = ({ destructured }: Type) =>
+            /(?:export\s+)?const\s+[A-Z]\w*\s*=\s*\(\s*\{\s*([^}]+)\s*\}\s*:/g,
+            // const Name: FC<Props> = ({ destructured }) =>
+            /(?:export\s+)?const\s+[A-Z]\w*\s*:\s*\w+(?:<[^>]+>)?\s*=\s*\(\s*\{\s*([^}]+)\s*\}\s*\)/g,
+        ];
+        for (const pattern of functionPatterns) {
+            let match;
+            while ((match = pattern.exec(content)) !== null) {
+                const destructuredContent = match[1];
+                // Extract individual prop names, ignoring spread operator (...rest)
+                const propMatches = destructuredContent.matchAll(/(?:^|,)\s*(?!\.\.\.)([\w]+)(?:\s*=\s*[^,}]+)?(?=\s*[,}]|$)/g);
+                for (const propMatch of propMatches) {
+                    const propName = propMatch[1].trim();
+                    // Skip common internal props and rest patterns
+                    if (propName && !['ref', 'props', 'rest'].includes(propName) && !props.includes(propName)) {
+                        props.push(propName);
+                    }
+                }
+            }
+        }
+        return props;
+    }
+    /**
+     * Extract props from co-located story file (e.g., Button.stories.tsx)
+     * This is a fallback for components like shadcn/ui that don't use interface Props patterns
+     */
+    extractPropsFromStoryFile(componentPath) {
+        const props = [];
+        // Construct story file path: button.tsx -> button.stories.tsx
+        const dir = path.dirname(componentPath);
+        const ext = path.extname(componentPath);
+        const name = path.basename(componentPath, ext);
+        // Try different story file naming conventions
+        const storyPaths = [
+            path.join(dir, `${name}.stories.tsx`),
+            path.join(dir, `${name}.stories.ts`),
+            path.join(dir, `${name}.story.tsx`),
+            path.join(dir, `${name}.story.ts`),
+        ];
+        let storyContent = '';
+        for (const storyPath of storyPaths) {
+            if (fs.existsSync(storyPath)) {
+                try {
+                    storyContent = fs.readFileSync(storyPath, 'utf-8');
+                    break;
+                }
+                catch {
+                    continue;
+                }
+            }
+        }
+        if (!storyContent) {
+            return props;
+        }
+        // Extract from argTypes: { propName: { control: ..., options: ... } }
+        // Only match prop names followed by `: {` to avoid picking up nested properties like control, options
+        const argTypesMatch = storyContent.match(/argTypes\s*:\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/);
+        if (argTypesMatch) {
+            // Match prop names followed by `: {` which indicates argType config object
+            const propMatches = argTypesMatch[1].matchAll(/(\w+)\s*:\s*\{/g);
+            for (const match of propMatches) {
+                // Skip common argTypes meta-properties that shouldn't be props
+                const metaProps = ['control', 'options', 'description', 'table', 'type', 'defaultValue', 'if', 'mapping'];
+                if (!metaProps.includes(match[1]) && !props.includes(match[1])) {
+                    props.push(match[1]);
+                }
+            }
+        }
+        // Extract from args: { propName: value }
+        const argsMatches = storyContent.matchAll(/args\s*:\s*\{([^}]+)\}/g);
+        for (const argsMatch of argsMatches) {
+            const argContent = argsMatch[1];
+            const propMatches = argContent.matchAll(/^\s*(\w+)\s*:/gm);
+            for (const match of propMatches) {
+                if (!props.includes(match[1])) {
+                    props.push(match[1]);
+                }
+            }
+        }
+        // Extract from render function parameters if they use destructuring
+        // e.g., render: ({ variant, size }) => ...
+        const renderMatches = storyContent.matchAll(/render\s*:\s*\(\s*\{\s*([^}]+)\s*\}\s*\)/g);
+        for (const renderMatch of renderMatches) {
+            const paramContent = renderMatch[1];
+            const propMatches = paramContent.matchAll(/(\w+)(?:\s*,|\s*$)/g);
+            for (const match of propMatches) {
+                if (!props.includes(match[1])) {
+                    props.push(match[1]);
+                }
+            }
+        }
         return props;
     }
     /**

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;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"}
+{"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;AAsRD;;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

@@ -603,11 +603,71 @@ function generateExamples(config) {
     }
     return examples;
 }
+/**
+ * Extracts the base component name from a compound component name.
+ * Used when generating individual file imports to group related components.
+ *
+ * Examples:
+ * - CardHeader -> Card (imports from card.tsx)
+ * - AlertDialogTrigger -> AlertDialog (imports from alert-dialog.tsx)
+ * - Button -> Button (imports from button.tsx)
+ *
+ * This pattern is common across multiple frameworks:
+ * - React: shadcn/ui, Radix UI compound components
+ * - Vue: Radix Vue, shadcn-vue compound components
+ * - Angular: Angular Material (mat-card-header -> mat-card)
+ * - Web Components: Shoelace (sl-card-header -> sl-card)
+ *
+ * Note: For frameworks that use slots instead of compound components
+ * (many Web Components, some Svelte), this function returns the name unchanged.
+ */
+function getBaseComponentName(componentName) {
+    // Known suffixes that indicate sub-components (order matters - check longer ones first)
+    const suffixes = [
+        'Fallback', 'Image', 'Trigger', 'Content', 'Header', 'Footer', 'Title',
+        'Description', 'Action', 'Cancel', 'Close', 'Overlay', 'Portal',
+        'Item', 'Group', 'Label', 'Separator', 'Root', 'List', 'Link',
+        'Previous', 'Next', 'Ellipsis', 'Viewport', 'ScrollBar', 'Corner',
+        'Thumb', 'Track', 'Range', 'Indicator', 'Icon', 'Slot', 'Input',
+        'Handle', 'Panel', 'Primitive'
+    ];
+    for (const suffix of suffixes) {
+        if (componentName.endsWith(suffix) && componentName !== suffix) {
+            const base = componentName.slice(0, -suffix.length);
+            if (base.length > 0) {
+                return base;
+            }
+        }
+    }
+    return componentName;
+}
+/**
+ * Converts PascalCase to kebab-case for file names.
+ * Used when generating individual file imports.
+ *
+ * Examples:
+ * - AlertDialog -> alert-dialog
+ * - Button -> button
+ * - InputOTP -> input-otp
+ *
+ * This conversion works across frameworks since kebab-case file names are:
+ * - Required: Angular, Web Components
+ * - Common: Vue, React (for some libraries)
+ * - Accepted: Svelte (though PascalCase is more common)
+ */
+function toKebabCase(name) {
+    return name
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+        .toLowerCase();
+}
 /**
  * Generates import statements, using individual import paths if available
  */
 function generateImportStatements(config, components, componentNames) {
     const importMap = new Map();
+    // Check if individual file imports are configured (for libraries without barrel exports)
+    const useIndividualImports = config.importStyle === 'individual';
     for (const componentName of componentNames) {
         // Find the component in our discovered components to get its specific import path
         const component = components.find(c => c.name === componentName);
@@ -619,8 +679,20 @@ function generateImportStatements(config, components, componentNames) {
             }
             importMap.get(importPath).push(componentName);
         }
+        else if (useIndividualImports) {
+            // Generate individual file imports for libraries without barrel exports
+            // Group by base component: CardHeader, CardContent -> card.tsx
+            // This pattern works for React (shadcn/ui), Vue (PrimeVue), Angular (Material), Web Components (Shoelace)
+            const baseComponent = getBaseComponentName(componentName);
+            const fileName = toKebabCase(baseComponent);
+            const importPath = `${config.importPath}/${fileName}`;
+            if (!importMap.has(importPath)) {
+                importMap.set(importPath, []);
+            }
+            importMap.get(importPath).push(componentName);
+        }
         else {
-            // Fallback to the main package import path
+            // Use barrel import (default) - import all from single entry point
             if (!importMap.has(config.importPath)) {
                 importMap.set(config.importPath, []);
             }
@@ -629,8 +701,8 @@ function generateImportStatements(config, components, componentNames) {
     }
     // Generate import statements
     const importLines = [];
-    for (const [importPath, components] of importMap) {
-        importLines.push(`import { ${components.join(', ')} } from '${importPath}';`);
+    for (const [importPath, comps] of importMap) {
+        importLines.push(`import { ${comps.join(', ')} } from '${importPath}';`);
     }
     return importLines.join('\n');
 }

package/dist/story-ui.config.d.ts

@@ -81,6 +81,22 @@ export interface StoryUIConfig {
     additionalImports?: AdditionalImport[];
     considerationsPath?: string;
     storybookFramework?: string;
+    /**
+     * Import style for generated stories:
+     * - 'barrel': Use barrel imports from a single entry point (e.g., `import { Button } from 'library'`)
+     * - 'individual': Use individual file imports (e.g., `import { Button } from 'library/button'`)
+     *
+     * Use 'individual' for libraries without barrel exports (index.ts), such as:
+     * - shadcn/ui, Radix Vue, PrimeVue (Vue)
+     * - Angular Material, PrimeNG (Angular)
+     * - Shoelace, Lion (Web Components)
+     *
+     * Use 'barrel' (default) for libraries with barrel exports, such as:
+     * - Chakra UI, Mantine, Ant Design (React)
+     * - Vuetify, Quasar (Vue)
+     * - Skeleton UI (Svelte)
+     */
+    importStyle?: 'barrel' | 'individual';
     designSystemGuidelines?: DesignSystemGuidelines;
     /** Icon imports configuration (auto-detected from package.json or manually configured) */
     iconImports?: IconImportsConfig;

package/dist/story-ui.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"story-ui.config.d.ts","sourceRoot":"","sources":["../story-ui.config.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"story-ui.config.d.ts","sourceRoot":"","sources":["../story-ui.config.ts"],"names":[],"mappings":"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"}

package/package.json

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