@tpitre/story-ui 4.8.0 → 4.8.1

package/README.md

@@ -154,6 +154,28 @@ export default {
 };
 ```
 
+### Advanced Configuration: Import Examples (Web Components / Custom Libraries)
+
+For component libraries with non-standard import paths (especially Web Components with local imports), use `importExamples` to teach the AI your import patterns:
+
+```javascript
+export default {
+  framework: 'web-components',
+  importPath: '../../../components',
+
+  // Teach the AI your library's import structure
+  importExamples: [
+    "import '../../../components/button/button'; // For <my-button>",
+    "import '../../../components/card/card'; // For <my-card>",
+    "import '../../../components/icon/icons/check'; // For <my-icon-check>",
+  ],
+
+  // ... other config
+};
+```
+
+The AI uses these examples to understand your component library's folder structure and generate correct imports.
+
 ---
 
 ## Usage
@@ -443,6 +465,30 @@ For simpler setups, use `story-ui-considerations.md`:
 - Use Card with shadow="sm" for content containers
 ```
 
+### Component-Specific Behaviors (Critical for Web Components)
+
+For libraries where components have specific requirements (like attributes needed for visibility), document these behaviors:
+
+```markdown
+# Component-Specific Behaviors
+
+## Alert Component (`<my-alert>`)
+**IMPORTANT**: The alert requires `is-active` attribute to be visible.
+
+<!-- WRONG - will not render -->
+<my-alert variant="success">Message</my-alert>
+
+<!-- CORRECT -->
+<my-alert variant="success" is-active>Message</my-alert>
+
+## Import Patterns
+Components are in individual folders:
+- import '../../../components/alert/alert';
+- import '../../../components/icon/icons/check';
+```
+
+The AI reads this file before every story generation, ensuring component-specific rules are followed.
+
 ---
 
 ## CLI Reference
@@ -457,8 +503,37 @@ npx story-ui start --port 4002  # Custom port
 
 # Run MCP STDIO server (for Claude Desktop local integration)
 npx story-ui mcp
+
+# Check installation status and version
+npx story-ui status
+
+# Update Story UI files to latest version
+npx story-ui update
 ```
 
+### Resetting / Uninstalling Story UI
+
+To completely remove Story UI from your project and start fresh:
+
+```bash
+# Remove Story UI configuration and panel files
+rm -f story-ui.config.js
+rm -f story-ui-considerations.md
+rm -rf story-ui-docs/
+rm -rf src/stories/StoryUI/
+rm -rf src/stories/generated/
+
+# Remove package.json script entries (manual)
+# Delete "story-ui" and "storybook-with-ui" from scripts
+
+# Optionally remove the package
+npm uninstall @tpitre/story-ui
+
+# Optionally clean .env (remove VITE_STORY_UI_PORT, API keys)
+```
+
+After removal, run `npx story-ui init` to start fresh with a clean installation.
+
 ---
 
 ## API Reference

package/dist/cli/setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../cli/setup.ts"],"names":[],"mappings":"AAmDA;;GAEG;AACH,wBAAgB,iCAAiC,SA8ChD;AAiWD,MAAM,WAAW,YAAY;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,YAAY,CAAC,OAAO,GAAE,YAAiB,iBA4zB5D"}
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../cli/setup.ts"],"names":[],"mappings":"AAmDA;;GAEG;AACH,wBAAgB,iCAAiC,SA8ChD;AAiWD,MAAM,WAAW,YAAY;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,YAAY,CAAC,OAAO,GAAE,YAAiB,iBA45B5D"}

package/dist/cli/setup.js

@@ -424,7 +424,7 @@ export async function setupCommand(options = {}) {
         '@storybook/react', '@storybook/react-vite', '@storybook/react-webpack5', '@storybook/nextjs',
         '@storybook/angular', '@storybook/vue3', '@storybook/vue3-vite',
         '@storybook/svelte', '@storybook/svelte-vite',
-        '@storybook/web-components', '@storybook/web-components-vite'
+        '@storybook/web-components', '@storybook/web-components-vite', '@storybook/web-components-webpack5'
     ];
     const hasStorybook = storybookPackages.some(pkg => devDeps[pkg] || deps[pkg]) ||
         fs.existsSync(path.join(process.cwd(), '.storybook'));
@@ -479,7 +479,12 @@ export async function setupCommand(options = {}) {
         componentFramework = 'svelte';
         console.log(chalk.green('✅ Detected Svelte Storybook'));
     }
-    // Check for Web Components Storybook (vite variant first)
+    // Check for Web Components Storybook (webpack5 first, then vite, then generic)
+    else if (devDeps['@storybook/web-components-webpack5'] || deps['@storybook/web-components-webpack5']) {
+        storybookFramework = '@storybook/web-components-webpack5';
+        componentFramework = 'web-components';
+        console.log(chalk.green('✅ Detected Webpack 5-based Web Components Storybook'));
+    }
     else if (devDeps['@storybook/web-components-vite'] || deps['@storybook/web-components-vite']) {
         storybookFramework = '@storybook/web-components-vite';
         componentFramework = 'web-components';
@@ -875,6 +880,15 @@ Material UI (MUI) is a React component library implementing Material Design.
     config.componentFramework = componentFramework; // react, angular, vue, svelte, or web-components
     config.storybookFramework = storybookFramework; // e.g., @storybook/react-vite, @storybook/angular
     config.llmProvider = answers.llmProvider || 'claude'; // claude, openai, or gemini
+    // For web-components with local imports, add importExamples guidance
+    if (componentFramework === 'web-components' && config.importPath?.startsWith('.')) {
+        config.importExamples = [
+            `import '${config.importPath}/alert/alert'; // For <your-prefix-alert> component`,
+            `import '${config.importPath}/button/button'; // For <your-prefix-button> component`,
+            `// IMPORTANT: Update these examples to match your component library's folder structure`,
+            `// The AI uses these patterns to generate correct import statements`
+        ];
+    }
     // Add version tracking for update command
     config._storyUIVersion = getStoryUIVersion();
     config._lastUpdated = new Date().toISOString();
@@ -882,6 +896,14 @@ Material UI (MUI) is a React component library implementing Material Design.
     const configContent = `module.exports = ${JSON.stringify(config, null, 2)};`;
     const configPath = path.join(process.cwd(), 'story-ui.config.js');
     fs.writeFileSync(configPath, configContent);
+    console.log(chalk.green('✅ Created story-ui.config.js'));
+    // For web-components, provide guidance about importExamples
+    if (componentFramework === 'web-components' && config.importPath?.startsWith('.')) {
+        console.log(chalk.yellow('\n⚠️  Web Components Setup - Important:'));
+        console.log(chalk.gray('   Update "importExamples" in story-ui.config.js to match your component library\'s structure.'));
+        console.log(chalk.gray('   This helps the AI generate correct import statements for your components.'));
+        console.log(chalk.gray('   Also update story-ui-considerations.md with component-specific behaviors.'));
+    }
     // Create generated stories directory
     const storiesDir = path.dirname(config.generatedStoriesPath);
     if (!fs.existsSync(storiesDir)) {
@@ -921,6 +943,21 @@ Material UI (MUI) is a React component library implementing Material Design.
     if (actualMainPath) {
         let mainContent = fs.readFileSync(actualMainPath, 'utf-8');
         let configUpdated = false;
+        // Add Story UI path to stories array if not already present
+        const storyUIStoriesPath = `'../src/stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'`;
+        if (!mainContent.includes('src/stories/**/*')) {
+            // Find the stories array and add our path
+            const storiesArrayPattern = /(stories\s*:\s*\[[\s\S]*?)(\],?)/;
+            const match = mainContent.match(storiesArrayPattern);
+            if (match) {
+                // Check if the array has content
+                const arrayContent = match[1];
+                // Add Story UI path at the end of the stories array
+                mainContent = mainContent.replace(storiesArrayPattern, `$1,\n    ${storyUIStoriesPath}\n  $2`);
+                configUpdated = true;
+                console.log(chalk.green('✅ Added Story UI path to Storybook stories array'));
+            }
+        }
         // Check if StoryUI config already exists
         if (mainContent.includes('@tpitre/story-ui') || mainContent.includes('StoryUIPanel')) {
             console.log(chalk.blue('ℹ️  Storybook already configured for Story UI'));
@@ -952,8 +989,57 @@ Material UI (MUI) is a React component library implementing Material Design.
                 console.warn(chalk.yellow('⚠️  Could not install CSS loaders. You may need to run: npm install --save-dev style-loader css-loader'));
             }
         }
+        else if (storybookFramework === '@storybook/web-components-webpack5') {
+            // Web Components with Webpack5 - needs babel-loader for TSX
+            const hasBabelConfig = mainContent.includes('babel-loader') && mainContent.includes('StoryUI');
+            if (!hasBabelConfig) {
+                const babelLoaderRule = `
+    // Story UI: Add babel-loader for TSX/JSX support (React panel in Web Components project)
+    config.module?.rules?.push({
+      test: /stories\\/StoryUI\\/.*\\.tsx$/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            ['@babel/preset-react', { runtime: 'automatic' }],
+            '@babel/preset-typescript'
+          ]
+        }
+      }
+    });`;
+                if (mainContent.includes('webpackFinal')) {
+                    // webpackFinal exists - inject babel-loader rule before return statement
+                    // Look for the return statement in webpackFinal and insert before it
+                    const returnPattern = /(webpackFinal[\s\S]*?)(return\s+config\s*;)/;
+                    if (mainContent.match(returnPattern)) {
+                        mainContent = mainContent.replace(returnPattern, `$1${babelLoaderRule}\n\n    $2`);
+                        configUpdated = true;
+                    }
+                }
+                else {
+                    // webpackFinal doesn't exist - add a complete block
+                    const webpackConfig = `webpackFinal: async (config) => {${babelLoaderRule}
+    return config;
+  },`;
+                    // Insert webpackFinal inside the config object, before the closing };
+                    if (mainContent.match(/};\s*\n+\s*export\s+default/)) {
+                        mainContent = mainContent.replace(/(\n)(};\s*\n+\s*export\s+default)/, `\n  ${webpackConfig}\n$2`);
+                        configUpdated = true;
+                    }
+                }
+            }
+            // Install required loaders for Web Components Webpack5
+            console.log(chalk.blue('📦 Installing babel loaders for Web Components Webpack5...'));
+            try {
+                execSync('npm install --save-dev babel-loader @babel/preset-react @babel/preset-typescript @babel/core', { stdio: 'inherit' });
+                console.log(chalk.green('✅ Installed babel-loader and presets'));
+            }
+            catch (error) {
+                console.warn(chalk.yellow('⚠️  Could not install babel loaders. You may need to run: npm install --save-dev babel-loader @babel/preset-react @babel/preset-typescript @babel/core'));
+            }
+        }
         else {
-            // Vite-based frameworks (React, Vue, Svelte, Web Components)
+            // Vite-based frameworks (React, Vue, Svelte, Web Components with Vite)
             if (!mainContent.includes('viteFinal')) {
                 const viteConfig = `viteFinal: async (config) => {
     // Story UI: Exclude from dependency optimization to handle CSS imports correctly

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

@@ -1 +1 @@
-{"version":3,"file":"generateStory.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAyd5C,wBAAsB,uBAAuB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DA2mBxE"}
+{"version":3,"file":"generateStory.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAyd5C,wBAAsB,uBAAuB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DA8mBxE"}

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

@@ -558,7 +558,10 @@ export async function generateStoryFromPrompt(req, res) {
             const validationFileName = `story${frameworkAdapter?.defaultExtension || '.stories.tsx'}`;
             const astValidation = validateStoryCode(aiText, validationFileName, config);
             // 3. Import validation (check against discovered components)
-            const importValidation = await preValidateImports(aiText, config, discovery);
+            // Skip for web-components - they use custom element tags, not imported component classes
+            const importValidation = detectedFramework === 'web-components'
+                ? { isValid: true, errors: [] }
+                : await preValidateImports(aiText, config, discovery);
             // Aggregate all errors
             const aggregatedErrors = aggregateValidationErrors(astValidation, validationErrors, importValidation.isValid ? [] : importValidation.errors);
             // Track this attempt

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

@@ -1 +1 @@
-{"version":3,"file":"generateStoryStream.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStoryStream.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA0c5C,wBAAsB,6BAA6B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBA2qB9E"}
+{"version":3,"file":"generateStoryStream.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStoryStream.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA0c5C,wBAAsB,6BAA6B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBA8qB9E"}

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

@@ -620,7 +620,10 @@ export async function generateStoryFromPromptStream(req, res) {
                 logger.error('AST validation error:', astError);
             }
             // 3. Import validation
-            const importValidation = await preValidateImports(codeToValidate, config, discovery);
+            // Skip for web-components - they use custom element tags, not imported component classes
+            const importValidation = detectedFramework === 'web-components'
+                ? { isValid: true, errors: [] }
+                : await preValidateImports(codeToValidate, config, discovery);
             const importErrors = importValidation.isValid ? [] : importValidation.errors;
             // Aggregate all errors
             const currentErrors = aggregateValidationErrors(astResult, patternErrors, importErrors);

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;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;IAwB1D;;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;IAuHT,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;IAwB1D;;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

@@ -103,13 +103,40 @@ export class WebComponentsAdapter extends BaseFrameworkAdapter {
         const componentSystemName = config.componentPrefix
             ? `${config.componentPrefix.replace(/^[A-Z]+/, '')} design system`
             : 'component library';
+        // Detect if this is a local/relative import path
+        const isLocalImport = config.importPath?.startsWith('.') || config.importPath?.startsWith('/');
+        const importPath = config.importPath || 'your-library';
+        // Build import guidance based on config and import path type
+        let importGuidance;
+        if (config.importExamples && config.importExamples.length > 0) {
+            // Use user-provided examples from config (design-system agnostic)
+            importGuidance = `COMPONENT IMPORTS - Follow these examples EXACTLY:
+${config.importExamples.map(ex => `- ${ex}`).join('\n')}
+- Import ONLY the components you actually use in your story
+- Follow the exact pattern shown in the examples above`;
+        }
+        else if (isLocalImport) {
+            // Generic guidance for local imports (no assumptions about folder structure)
+            importGuidance = `COMPONENT IMPORTS - Local Import Pattern:
+- Import pattern: import '${importPath}/{component-path}';
+- Check the component discovery list for the exact import path for each component
+- Import ONLY the components you actually use in your story
+- Web Components auto-register when their file is imported`;
+        }
+        else {
+            // npm package imports
+            importGuidance = `COMPONENT IMPORTS:
+- Import the main library: import '${importPath}';
+- Or import specific components: import '${importPath}/button';`;
+        }
         return `You are an expert Web Components developer creating Storybook stories using CSF 3.0 format.
 Use ONLY the Web Components from the ${componentSystemName} listed below.
 
 MANDATORY IMPORTS - First lines of every story file:
 1. import { html } from 'lit';
 2. import type { Meta, StoryObj } from '@storybook/web-components';
-3. import '${config.importPath || 'your-library'}'; // Register custom elements
+
+${importGuidance}
 
 WEB COMPONENTS STORY FORMAT:
 - Use the html template literal from Lit for rendering
@@ -118,9 +145,8 @@ WEB COMPONENTS STORY FORMAT:
 - Events use @ prefix (e.g., @click)
 
 COMPONENT REGISTRATION:
-- Web Components must be registered before use
-- Import the component file to auto-register: import 'my-library/my-button';
-- Or import the class and define: customElements.define('my-button', MyButton);
+- Web Components auto-register when imported
+- Import each component file you need to use it in your story
 
 STORY STRUCTURE (CSF 3.0):
 - Meta object with title and optional component reference
@@ -137,7 +163,7 @@ Example structure:
 \`\`\`typescript
 import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components';
-import 'your-library/button';
+${isLocalImport ? `import '${importPath}/button/button'; // Import path for your component` : `import '${importPath}/button';`}
 
 const meta: Meta = {
   title: 'Components/Button',

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

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

package/dist/story-generator/selfHealingLoop.js

@@ -262,6 +262,14 @@ export function buildSelfHealingPrompt(originalCode, errors, attempt, options) {
         sections.push(`9. Return the COMPLETE corrected code in a \`\`\`svelte code block`);
         sections.push('10. Do NOT include any explanation - just the corrected code block');
     }
+    else if (options.framework === 'web-components') {
+        // Web Components use side-effect imports and often require deep paths
+        sections.push('6. Use Lit html template literal for rendering');
+        sections.push('7. Web Component imports register custom elements as side-effects');
+        sections.push('8. Use correct import path for each component (deep paths are allowed for web components)');
+        sections.push(`9. Return the COMPLETE corrected code in a \`\`\`${codeBlockLang} code block`);
+        sections.push('10. Do NOT include any explanation - just the corrected code block');
+    }
     else {
         sections.push('6. Ensure all JSX elements are properly opened and closed');
         sections.push(`7. Only import components that exist in "${options.importPath}"`);

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

@@ -1 +1 @@
-{"version":3,"file":"validateStory.d.ts","sourceRoot":"","sources":["../../story-generator/validateStory.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAoB,EAAE,MAAM,CAAC,EAAE,GAAG,GAAG,gBAAgB,CAsH9G;AAgrBD;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAoFjH;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,MAAM,CA+BvE"}
+{"version":3,"file":"validateStory.d.ts","sourceRoot":"","sources":["../../story-generator/validateStory.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAoB,EAAE,MAAM,CAAC,EAAE,GAAG,GAAG,gBAAgB,CAsH9G;AAirBD;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAoFjH;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,MAAM,CA+BvE"}

package/dist/story-generator/validateStory.js

@@ -121,7 +121,8 @@ function performSemanticChecks(sourceFile, config) {
                 const importPath = moduleSpecifier.text;
                 // CRITICAL: Check for incorrect import paths that contain the configured importPath but with extra segments
                 // This catches LLM errors like: vuetify/components/lib/components/VAlert instead of vuetify/components
-                if (config && config.importPath) {
+                // NOTE: Web Components often require deep imports to register custom elements, so we skip this check for them
+                if (config && config.importPath && config.componentFramework !== 'web-components') {
                     const configuredPath = config.importPath;
                     // Check if LLM used a deep/incorrect path instead of the configured one
                     if (importPath !== configuredPath &&

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

@@ -100,6 +100,12 @@ export interface StoryUIConfig {
     designSystemGuidelines?: DesignSystemGuidelines;
     /** Icon imports configuration (auto-detected from package.json or manually configured) */
     iconImports?: IconImportsConfig;
+    /**
+     * Example import statements to guide the LLM on correct import patterns.
+     * Useful for Web Components or custom folder structures.
+     * Example: ["import '../../../components/alert/alert'; // For <al-alert> component"]
+     */
+    importExamples?: string[];
 }
 export declare const DEFAULT_CONFIG: StoryUIConfig;
 export declare const GENERIC_CONFIG_TEMPLATE: Partial<StoryUIConfig>;

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/dist/templates/StoryUI/StoryUIPanel.css

@@ -993,6 +993,28 @@
   font-style: italic;
 }
 
+/* CRITICAL: Force text color on all child elements
+   Storybook's design system aggressively overrides paragraph colors.
+   These rules MUST use !important and high specificity to win. */
+
+/* Light mode: Ensure AI message text is dark on light background */
+.sui-message-ai .sui-message-bubble p,
+.sui-message-ai .sui-message-bubble strong,
+.sui-message-ai .sui-message-bubble em,
+.sui-message-ai .sui-message-bubble span,
+.sui-message-ai .sui-message-bubble li {
+  color: #18181b !important;
+}
+
+/* Dark mode: Ensure AI message text is light on dark background */
+.sui-root.dark .sui-message-ai .sui-message-bubble p,
+.sui-root.dark .sui-message-ai .sui-message-bubble strong,
+.sui-root.dark .sui-message-ai .sui-message-bubble em,
+.sui-root.dark .sui-message-ai .sui-message-bubble span,
+.sui-root.dark .sui-message-ai .sui-message-bubble li {
+  color: #fafafa !important;
+}
+
 /* Inline code styling */
 .sui-message-bubble code {
   font-family: var(--font-mono);

package/package.json

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

package/templates/StoryUI/StoryUIPanel.css

@@ -993,6 +993,28 @@
   font-style: italic;
 }
 
+/* CRITICAL: Force text color on all child elements
+   Storybook's design system aggressively overrides paragraph colors.
+   These rules MUST use !important and high specificity to win. */
+
+/* Light mode: Ensure AI message text is dark on light background */
+.sui-message-ai .sui-message-bubble p,
+.sui-message-ai .sui-message-bubble strong,
+.sui-message-ai .sui-message-bubble em,
+.sui-message-ai .sui-message-bubble span,
+.sui-message-ai .sui-message-bubble li {
+  color: #18181b !important;
+}
+
+/* Dark mode: Ensure AI message text is light on dark background */
+.sui-root.dark .sui-message-ai .sui-message-bubble p,
+.sui-root.dark .sui-message-ai .sui-message-bubble strong,
+.sui-root.dark .sui-message-ai .sui-message-bubble em,
+.sui-root.dark .sui-message-ai .sui-message-bubble span,
+.sui-root.dark .sui-message-ai .sui-message-bubble li {
+  color: #fafafa !important;
+}
+
 /* Inline code styling */
 .sui-message-bubble code {
   font-family: var(--font-mono);