@tpitre/story-ui 3.6.2 → 3.8.0

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

@@ -45,10 +45,15 @@ CRITICAL RULES:
 - For slots, use render with a wrapper component
 - Events use on: directive in Svelte templates
 
+CRITICAL - SVELTE SLOT CONTENT:
+- Svelte components use SLOTS for content, NOT children props
+- Always use render function with 'slot' property for text/content
+- Never use 'children' in args - it will cause runtime errors
+
 Example structure:
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/svelte';
-import Button from 'your-library/Button.svelte';
+import { Button } from 'your-library';
 
 const meta: Meta<Button> = {
   title: 'Components/Button',
@@ -69,8 +74,12 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     variant: 'primary',
-    children: 'Click me',
   },
+  render: (args) => ({
+    Component: Button,
+    props: args,
+    slot: 'Click me',
+  }),
 };
 \`\`\`
 
@@ -122,7 +131,7 @@ ${this.getCommonRules()}`;
 ### TypeScript Stories File
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/svelte';
-import Button from 'your-library/Button.svelte';
+import { Button } from 'your-library';
 
 const meta: Meta<Button> = {
   title: 'Components/Button',
@@ -144,20 +153,29 @@ const meta: Meta<Button> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+// IMPORTANT: Use render with slot property for content
 export const Default: Story = {
   args: {
     variant: 'primary',
     size: 'medium',
-    children: 'Button',
   },
+  render: (args) => ({
+    Component: Button,
+    props: args,
+    slot: 'Button',
+  }),
 };
 
 export const Disabled: Story = {
   args: {
     variant: 'primary',
     disabled: true,
-    children: 'Disabled',
   },
+  render: (args) => ({
+    Component: Button,
+    props: args,
+    slot: 'Disabled',
+  }),
 };
 \`\`\`
 
@@ -230,7 +248,7 @@ export const Disabled: Story = {
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/svelte';
 import { action } from '@storybook/addon-actions';
-import Button from 'your-library/Button.svelte';
+import { Button } from 'your-library';
 
 const meta: Meta<Button> = {
   title: 'Components/Button',
@@ -243,9 +261,13 @@ type Story = StoryObj<typeof meta>;
 export const WithClickHandler: Story = {
   args: {
     variant: 'primary',
-    children: 'Click me',
     onclick: action('button-clicked'),
   },
+  render: (args) => ({
+    Component: Button,
+    props: args,
+    slot: 'Click me',
+  }),
 };
 \`\`\`
 `;
@@ -319,6 +341,28 @@ export const Default: Story = {
         let processed = super.postProcess(storyContent);
         // Remove React imports if present
         processed = processed.replace(/import React from ['"]react['"];?\n?/g, '');
+        // Fix flowbite-svelte imports - convert deep path imports to named exports
+        // e.g., import Card from 'flowbite-svelte/dist/card/Card.svelte' → import { Card } from 'flowbite-svelte'
+        const flowbiteDeepImportPattern = /import\s+(\w+)\s+from\s+['"]flowbite-svelte\/[^'"]+['"];?/g;
+        const flowbiteImports = [];
+        processed = processed.replace(flowbiteDeepImportPattern, (match, componentName) => {
+            flowbiteImports.push(componentName);
+            return ''; // Remove the line, we'll add a consolidated import later
+        });
+        // If we found flowbite-svelte deep imports, add a consolidated named export import
+        if (flowbiteImports.length > 0) {
+            const uniqueImports = [...new Set(flowbiteImports)];
+            const consolidatedImport = `import { ${uniqueImports.join(', ')} } from 'flowbite-svelte';`;
+            // Find where to insert - after the @storybook/svelte import
+            const storybookImportMatch = processed.match(/import.*from\s+['"]@storybook\/svelte['"];?\n/);
+            if (storybookImportMatch) {
+                processed = processed.replace(storybookImportMatch[0], storybookImportMatch[0] + consolidatedImport + '\n');
+            }
+            else {
+                // Insert at the beginning if no storybook import found
+                processed = consolidatedImport + '\n' + processed;
+            }
+        }
         // Fix JSX to Svelte syntax
         processed = processed
             // Fix className to class
@@ -327,6 +371,8 @@ export const Default: Story = {
             .replace(/onClick=/g, 'on:click=')
             .replace(/onChange=/g, 'on:change=')
             .replace(/onInput=/g, 'on:input=');
+        // Clean up multiple empty lines that might result from import removal
+        processed = processed.replace(/\n{3,}/g, '\n\n');
         return processed;
     }
     /**

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;IAkBzC;;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;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"}

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

@@ -293,8 +293,10 @@ export const Default: Story = {
      */
     postProcess(storyContent) {
         let processed = super.postProcess(storyContent);
-        // Remove React imports if present
+        // Remove React imports if present (multiple patterns)
         processed = processed.replace(/import React from ['"]react['"];?\n?/g, '');
+        processed = processed.replace(/import \* as React from ['"]react['"];?\n?/g, '');
+        processed = processed.replace(/import { .* } from ['"]react['"];?\n?/g, '');
         // Fix JSX to Vue template syntax
         processed = processed
             // Fix className to class
@@ -303,6 +305,24 @@ export const Default: Story = {
             .replace(/onClick=/g, '@click=')
             .replace(/onChange=/g, '@change=')
             .replace(/onInput=/g, '@input=');
+        // Convert Vuetify PascalCase to kebab-case in templates
+        // Match opening tags like <VBtn, <VCard, etc. and convert to <v-btn, <v-card
+        processed = processed.replace(/<(V[A-Z][a-zA-Z]*)/g, (match, componentName) => {
+            // Convert VBtn -> v-btn, VCard -> v-card, VTextField -> v-text-field
+            const kebabCase = componentName
+                .replace(/^V/, 'v-')
+                .replace(/([a-z])([A-Z])/g, '$1-$2')
+                .toLowerCase();
+            return '<' + kebabCase;
+        });
+        // Convert closing tags </VBtn> -> </v-btn>
+        processed = processed.replace(/<\/(V[A-Z][a-zA-Z]*)/g, (match, componentName) => {
+            const kebabCase = componentName
+                .replace(/^V/, 'v-')
+                .replace(/([a-z])([A-Z])/g, '$1-$2')
+                .toLowerCase();
+            return '</' + kebabCase;
+        });
         return processed;
     }
     /**

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;IA+BzC;;;;;;;;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;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"}

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

@@ -294,6 +294,10 @@ export const Default: Story = {
         // LLMs sometimes incorrectly include React imports in non-React frameworks
         processed = processed.replace(/import React from ['"]react['"];?\n?/g, '');
         processed = processed.replace(/import \* as React from ['"]react['"];?\n?/g, '');
+        // Fix Shoelace imports - add /dist to the path
+        // Wrong: @shoelace-style/shoelace/components/...
+        // Right: @shoelace-style/shoelace/dist/components/...
+        processed = processed.replace(/@shoelace-style\/shoelace\/components\//g, '@shoelace-style/shoelace/dist/components/');
         // Fix common issues
         processed = processed
             // Remove React-style className

package/dist/story-generator/llm-providers/openai-provider.js

@@ -152,8 +152,8 @@ const OPENAI_MODELS = [
         outputPricePer1kTokens: 0.0015,
     },
 ];
-// Default model
-const DEFAULT_MODEL = 'gpt-4o';
+// Default model - Updated to latest GPT-5.1 (December 2025)
+const DEFAULT_MODEL = 'gpt-5.1';
 // API configuration
 const OPENAI_API_URL = 'https://api.openai.com/v1/chat/completions';
 export class OpenAIProvider extends BaseLLMProvider {

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

@@ -31,12 +31,129 @@ function generateSystemPrompt(config) {
     // Get the library name for prominent constraint
     const libraryName = config.designSystemGuidelines?.name || config.importPath || 'configured library';
     const importPath = config.importPath || 'your-library';
+    // Determine the framework from config (componentFramework takes precedence)
+    const framework = config.componentFramework || config.framework || 'react';
+    const isReactFramework = framework === 'react' || framework.includes('react');
+    const storybookFramework = config.storybookFramework || '@storybook/react';
+    // Build framework-specific import instructions
+    let frameworkImportInstructions = '';
+    let frameworkExampleImports = '';
+    if (isReactFramework) {
+        frameworkImportInstructions = `
+🚨 CRITICAL: EVERY STORY MUST START WITH "import React from 'react';" AS THE FIRST LINE 🚨
+
+🔴 MANDATORY FIRST LINE - NO EXCEPTIONS:
+The VERY FIRST LINE of every story file MUST be:
+import React from 'react';
+
+CRITICAL IMPORT RULES - MUST FOLLOW EXACTLY:
+1. **LINE 1: import React from 'react';** (MANDATORY - NEVER SKIP THIS)
+2. **LINE 2: import type { StoryObj } from '${storybookFramework}';**
+3. **LINE 3: import { ComponentName } from '[your-import-path]';**
+
+⚠️  WITHOUT "import React from 'react';" THE STORY WILL FAIL WITH "React is not defined" ERROR ⚠️`;
+        frameworkExampleImports = `Example correct order:
+import React from 'react';
+import type { StoryObj } from '${storybookFramework}';
+import { ComponentName } from '[your-import-path]';
+
+REQUIRED STORY STRUCTURE:
+Every story MUST start with these three imports in this order:
+1. import React from 'react';
+2. import type { StoryObj } from '${storybookFramework}';
+3. import { ComponentName } from '[library-path]';`;
+    }
+    else if (framework === 'vue') {
+        frameworkImportInstructions = `
+CRITICAL IMPORT RULES FOR VUE STORIES:
+1. **DO NOT import React** - This is a Vue project, not React!
+2. **LINE 1: import type { Meta, StoryObj } from '${storybookFramework}';**
+3. **LINE 2: import { ComponentName } from '[your-import-path]';**
+
+⚠️  DO NOT ADD "import React from 'react';" - Vue does NOT use React! ⚠️`;
+        frameworkExampleImports = `Example correct order for Vue:
+import type { Meta, StoryObj } from '${storybookFramework}';
+import { VBtn, VCard } from 'vuetify/components';
+
+REQUIRED STORY STRUCTURE:
+Every Vue story MUST start with:
+1. import type { Meta, StoryObj } from '${storybookFramework}';
+2. import { ComponentName } from '[library-path]';`;
+    }
+    else if (framework === 'angular') {
+        frameworkImportInstructions = `
+CRITICAL IMPORT RULES FOR ANGULAR STORIES:
+1. **DO NOT import React** - This is an Angular project, not React!
+2. **LINE 1: import type { Meta, StoryObj } from '${storybookFramework}';**
+3. **LINE 2: Import Angular Material modules as needed**
+
+⚠️  DO NOT ADD "import React from 'react';" - Angular does NOT use React! ⚠️`;
+        frameworkExampleImports = `Example correct order for Angular:
+import type { Meta, StoryObj } from '${storybookFramework}';
+import { MatButtonModule } from '@angular/material/button';
+import { moduleMetadata } from '@storybook/angular';
+
+REQUIRED STORY STRUCTURE:
+Every Angular story MUST:
+1. Import from '${storybookFramework}';
+2. Import Angular Material modules from their specific paths
+3. Use moduleMetadata or applicationConfig decorators`;
+    }
+    else if (framework === 'svelte') {
+        frameworkImportInstructions = `
+CRITICAL IMPORT RULES FOR SVELTE STORIES:
+1. **DO NOT import React** - This is a Svelte project, not React!
+2. **LINE 1: import type { Meta, StoryObj } from '${storybookFramework}';**
+3. **LINE 2: import { ComponentName } from '[your-import-path]';**
+
+⚠️  DO NOT ADD "import React from 'react';" - Svelte does NOT use React! ⚠️`;
+        frameworkExampleImports = `Example correct order for Svelte:
+import type { Meta, StoryObj } from '${storybookFramework}';
+import { Button, Card } from 'flowbite-svelte';
+
+REQUIRED STORY STRUCTURE:
+Every Svelte story MUST:
+1. Import from '${storybookFramework}';
+2. Import Svelte components from the library`;
+    }
+    else if (framework === 'web-components') {
+        frameworkImportInstructions = `
+CRITICAL IMPORT RULES FOR WEB COMPONENTS STORIES:
+1. **DO NOT import React** - This is a Web Components project!
+2. **LINE 1: import { html } from 'lit';**
+3. **LINE 2: import type { Meta, StoryObj } from '${storybookFramework}';**
+4. **LINE 3: Import web components from the library**
+
+⚠️  DO NOT ADD "import React from 'react';" - Web Components do NOT use React! ⚠️
+⚠️  Use html\`\` template literals, NOT JSX! ⚠️`;
+        frameworkExampleImports = `Example correct order for Web Components:
+import { html } from 'lit';
+import type { Meta, StoryObj } from '${storybookFramework}';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+
+REQUIRED STORY STRUCTURE:
+Every Web Components story MUST:
+1. Import { html } from 'lit';
+2. Import from '${storybookFramework}';
+3. Import web components as side-effect imports`;
+    }
+    else {
+        // Generic fallback
+        frameworkImportInstructions = `
+CRITICAL IMPORT RULES:
+1. Import type { Meta, StoryObj } from '${storybookFramework}';
+2. Import components from the configured library`;
+        frameworkExampleImports = `Example imports:
+import type { Meta, StoryObj } from '${storybookFramework}';
+import { ComponentName } from '[your-import-path]';`;
+    }
     return `
 ╔════════════════════════════════════════════════════════════════════╗
 ║                    🚨 MANDATORY LIBRARY CONSTRAINT 🚨                ║
 ╠════════════════════════════════════════════════════════════════════╣
 ║  REQUIRED LIBRARY: ${libraryName.padEnd(46)}║
 ║  IMPORT PATH:      ${importPath.padEnd(46)}║
+║  FRAMEWORK:        ${framework.padEnd(46)}║
 ╠════════════════════════════════════════════════════════════════════╣
 ║  ALL component imports MUST use:                                   ║
 ║  import { ComponentName } from '${importPath}';${' '.repeat(Math.max(0, 32 - importPath.length))}║
@@ -48,23 +165,11 @@ function generateSystemPrompt(config) {
 ║  - antd (unless configured)                                        ║
 ║  - Any library NOT matching: ${importPath.padEnd(36)}║
 ╚════════════════════════════════════════════════════════════════════╝
-
-🚨 CRITICAL: EVERY STORY MUST START WITH "import React from 'react';" AS THE FIRST LINE 🚨
+${frameworkImportInstructions}
 
 🔴 CRITICAL RULE: NEVER use children in args for ANY component or layout. Always use render functions. 🔴
 
-You are an expert UI developer creating Storybook stories. Use ONLY the React components from the ${componentSystemName} listed below.
-
-🔴 MANDATORY FIRST LINE - NO EXCEPTIONS:
-The VERY FIRST LINE of every story file MUST be:
-import React from 'react';
-
-CRITICAL IMPORT RULES - MUST FOLLOW EXACTLY:
-1. **LINE 1: import React from 'react';** (MANDATORY - NEVER SKIP THIS)
-2. **LINE 2: import type { StoryObj } from '@storybook/[framework]';**
-3. **LINE 3: import { ComponentName } from '[your-import-path]';**
-
-⚠️  WITHOUT "import React from 'react';" THE STORY WILL FAIL WITH "React is not defined" ERROR ⚠️
+You are an expert UI developer creating Storybook stories for ${framework.toUpperCase()}. Use ONLY the components from the ${componentSystemName} listed below.
 
 🚨 COMPONENT IMPORT VALIDATION - CRITICAL 🚨
 You can ONLY import components that are explicitly listed in the "Available components" section below.
@@ -74,15 +179,12 @@ If a component is not listed, DO NOT use it - choose an alternative from the ava
 
 🔴 IMPORT PATH RULE - MANDATORY 🔴
 ALWAYS use the EXACT import path shown in parentheses after each component name.
-For example: If the Available components list shows "Button (import from 'antd')", 
+For example: If the Available components list shows "Button (import from 'antd')",
 you MUST use: import { Button } from 'antd';
 NEVER use the main package import if a specific path is shown.
 This is critical for proper component resolution.
 
-Example correct order:
-import React from 'react';
-import type { StoryObj } from '@storybook/[framework]';
-import { ComponentName } from '[your-import-path]';
+${frameworkExampleImports}
 
 2. Use the correct Storybook framework import for your environment
 3. ONLY import components that are explicitly listed in the "Available components" section below
@@ -90,12 +192,6 @@ import { ComponentName } from '[your-import-path]';
 5. Do NOT import story exports from other story files
 6. When in doubt, use the basic components listed below
 
-REQUIRED STORY STRUCTURE:
-Every story MUST start with these three imports in this order:
-1. import React from 'react';
-2. import type { StoryObj } from '@storybook/[framework]';
-3. import { ComponentName } from '[library-path]';
-
 GENERAL COMPONENT RULES:
 - StoryUIPanel is the Story UI interface, not a design system component - never import it
 - Do not import components that end with Story, Example, Demo, or that appear to be story exports
@@ -367,6 +463,7 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
+  tags: ['autodocs'],
 } satisfies Meta;
 
 export default meta;
@@ -388,6 +485,7 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
+  tags: ['autodocs'],
 } satisfies Meta<typeof ${mainComponent}>;
 
 export default meta;
@@ -467,7 +565,42 @@ export async function buildClaudePrompt(userPrompt, config, components) {
     // Icons and other specific imports should be handled through additionalImports or considerations
     // Reinforce NO children in args rule
     promptParts.push('', '🔴 CRITICAL REMINDER: NEVER use children in args 🔴', 'Always use render functions for any layout or component composition.', '');
-    promptParts.push(`Output a complete Storybook story file in TypeScript. Import components as shown in the sample template below. Use the following sample as a template. Respond ONLY with a single code block containing the full file, and nothing else.`, '', '<rules>', '🚨 FINAL CRITICAL REMINDERS 🚨', "🔴 FIRST LINE MUST BE: import React from 'react';", '🔴 WITHOUT THIS IMPORT, THE STORY WILL BREAK!', '', 'OTHER CRITICAL RULES:', '- Story title MUST always start with "Generated/" (e.g., title: "Generated/Recipe Card")', '- Do NOT use prefixes like "Content/", "Components/", or any other section name', '- ONLY import components that are listed in the "Available components" section', '- ALWAYS use the exact import path shown in parentheses after each component', '- NEVER use main package imports when specific subpath imports are shown', '- Do NOT import story exports - these are NOT real components', '- Check every import against the Available components list before using it', '- FORBIDDEN: Any component not explicitly listed in the Available components section', '- FORBIDDEN: Theme setup components (providers should be configured at the app level, not in individual stories)', '- All images MUST have a src attribute with placeholder URLs (use https://picsum.photos/)', '- Never create <img> tags without src attributes', '- MUST use ES modules syntax: "export default meta;" NOT "module.exports = meta;"', '- The file MUST have a default export for the meta object', '- Keep the story concise and focused - avoid overly complex layouts that might exceed token limits', '- Ensure all JSX tags are properly closed', '- Story must be complete and syntactically valid', '- CRITICAL: Never put ANY content in args.children - always use render function', '- Use render functions for ALL layouts and component compositions', '- For layouts: DO NOT set component in meta', '- Only set component in meta when showcasing a SINGLE component', '- Use appropriate styling for the component library (design tokens, className, or inline styles as needed)', '</rules>', '', 'Sample story format:', generated.sampleStory, '', 'User request:', userPrompt);
+    // Determine framework from config for rules section
+    const framework = config.componentFramework || config.framework || 'react';
+    const isReactFramework = framework === 'react' || framework.includes('react');
+    // Build framework-specific first line rules
+    let frameworkFirstLineRules = '';
+    if (isReactFramework) {
+        frameworkFirstLineRules = `🚨 FINAL CRITICAL REMINDERS 🚨
+🔴 FIRST LINE MUST BE: import React from 'react';
+🔴 WITHOUT THIS IMPORT, THE STORY WILL BREAK!`;
+    }
+    else if (framework === 'vue') {
+        frameworkFirstLineRules = `🚨 FINAL CRITICAL REMINDERS FOR VUE 🚨
+🔴 DO NOT import React - this is a Vue project!
+🔴 First line should be: import type { Meta, StoryObj } from '@storybook/vue3';`;
+    }
+    else if (framework === 'angular') {
+        frameworkFirstLineRules = `🚨 FINAL CRITICAL REMINDERS FOR ANGULAR 🚨
+🔴 DO NOT import React - this is an Angular project!
+🔴 First line should be: import type { Meta, StoryObj } from '@storybook/angular';`;
+    }
+    else if (framework === 'svelte') {
+        frameworkFirstLineRules = `🚨 FINAL CRITICAL REMINDERS FOR SVELTE 🚨
+🔴 DO NOT import React - this is a Svelte project!
+🔴 First line should be: import type { Meta, StoryObj } from '@storybook/svelte';`;
+    }
+    else if (framework === 'web-components') {
+        frameworkFirstLineRules = `🚨 FINAL CRITICAL REMINDERS FOR WEB COMPONENTS 🚨
+🔴 DO NOT import React - this is a Web Components project!
+🔴 First line should be: import { html } from 'lit';
+🔴 Use html\`\` template literals, NOT JSX!`;
+    }
+    else {
+        frameworkFirstLineRules = `🚨 FINAL CRITICAL REMINDERS 🚨
+Follow the framework-specific import patterns shown above.`;
+    }
+    promptParts.push(`Output a complete Storybook story file in TypeScript. Import components as shown in the sample template below. Use the following sample as a template. Respond ONLY with a single code block containing the full file, and nothing else.`, '', '<rules>', frameworkFirstLineRules, '', 'OTHER CRITICAL RULES:', '- Story title MUST always start with "Generated/" (e.g., title: "Generated/Recipe Card")', '- Do NOT use prefixes like "Content/", "Components/", or any other section name', '- ONLY import components that are listed in the "Available components" section', '- ALWAYS use the exact import path shown in parentheses after each component', '- NEVER use main package imports when specific subpath imports are shown', '- Do NOT import story exports - these are NOT real components', '- Check every import against the Available components list before using it', '- FORBIDDEN: Any component not explicitly listed in the Available components section', '- FORBIDDEN: Theme setup components (providers should be configured at the app level, not in individual stories)', '- All images MUST have a src attribute with placeholder URLs (use https://picsum.photos/)', '- Never create <img> tags without src attributes', '- MUST use ES modules syntax: "export default meta;" NOT "module.exports = meta;"', '- The file MUST have a default export for the meta object', '- Keep the story concise and focused - avoid overly complex layouts that might exceed token limits', '- Ensure all JSX tags are properly closed', '- Story must be complete and syntactically valid', '- CRITICAL: Never put ANY content in args.children - always use render function', '- Use render functions for ALL layouts and component compositions', '- For layouts: DO NOT set component in meta', '- Only set component in meta when showcasing a SINGLE component', '- Use appropriate styling for the component library (design tokens, className, or inline styles as needed)', '</rules>', '', 'Sample story format:', generated.sampleStory, '', 'User request:', userPrompt);
     return promptParts.join('\n');
 }
 /**
@@ -576,6 +709,9 @@ function getFrameworkSpecificRules(framework) {
             rules.push('- Use JSX syntax for templates');
             rules.push('- NEVER pass children through args - use render functions');
             rules.push('- For layouts with multiple components, DO NOT set component in meta');
+            rules.push('- 🚫 NEVER use Angular Material (MatCardModule, MatButtonModule, etc.)');
+            rules.push('- 🚫 NEVER use Vue components (VCard, VBtn, etc.)');
+            rules.push('- ✅ ONLY use React components from the configured import path');
             break;
         case 'vue':
             rules.push("- Import from '@storybook/vue3'");
@@ -583,6 +719,14 @@ function getFrameworkSpecificRules(framework) {
             rules.push('- Use render functions with template for complex content');
             rules.push('- Event bindings use @event or v-on:event syntax');
             rules.push('- Slots use v-slot directive or # shorthand');
+            rules.push("- 🚫 NEVER import React from 'react' - this is Vue, NOT React!");
+            rules.push('- 🚫 NEVER use Angular Material (MatCardModule, MatButtonModule, etc.)');
+            rules.push('- 🚫 NEVER use @angular/material or moduleMetadata');
+            rules.push('- ✅ ONLY use Vue components from the configured import path');
+            rules.push('- ✅ Use KEBAB-CASE in templates: <v-btn>, <v-card>, NOT <VBtn>, <VCard>');
+            rules.push('- ✅ Vuetify components: v-btn, v-card, v-text-field, v-row, v-col, etc.');
+            rules.push('- ✅ Import with PascalCase: import { VBtn } from "vuetify/components"');
+            rules.push('- ✅ Use kebab-case in template: <v-btn v-bind="args">Click</v-btn>');
             break;
         case 'angular':
             rules.push("- Import from '@storybook/angular'");
@@ -590,12 +734,18 @@ function getFrameworkSpecificRules(framework) {
             rules.push('- Property binding: [property]="value"');
             rules.push('- Event binding: (event)="handler($event)"');
             rules.push('- Use Angular template syntax in render functions');
+            rules.push("- 🚫 NEVER import React from 'react' - this is Angular, NOT React!");
+            rules.push('- 🚫 NEVER use Vue components (VCard, VBtn, etc.)');
+            rules.push('- ✅ ONLY use Angular Material or configured library components');
             break;
         case 'svelte':
             rules.push("- Import from '@storybook/svelte'");
             rules.push('- Import .svelte files directly as default exports');
             rules.push('- Events use on: directive (e.g., on:click)');
             rules.push('- Use bind: for two-way binding');
+            rules.push("- 🚫 NEVER import React from 'react' - this is Svelte, NOT React!");
+            rules.push('- 🚫 NEVER use Angular Material or Vue components');
+            rules.push('- ✅ ONLY use Svelte components from the configured import path');
             break;
         case 'web-components':
             rules.push("- Import { html } from 'lit'");
@@ -605,6 +755,9 @@ function getFrameworkSpecificRules(framework) {
             rules.push('- Property binding: .property=${value}');
             rules.push('- Event binding: @event=${handler}');
             rules.push('- Boolean attributes: ?disabled=${true}');
+            rules.push("- 🚫 NEVER import React from 'react' - this is Web Components, NOT React!");
+            rules.push('- 🚫 NEVER use JSX syntax - use html`` template literals only');
+            rules.push('- ✅ ONLY use Web Components from the configured import path');
             break;
         default:
             break;

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

@@ -0,0 +1,64 @@
+/**
+ * Runtime Validator for Story UI
+ *
+ * Validates that generated stories actually load and render in Storybook
+ * by making HTTP requests to the running Storybook instance after HMR processes
+ * the new story file.
+ *
+ * This catches runtime errors that static validation cannot detect, such as:
+ * - "importers[path] is not a function" - Storybook CSF loader errors
+ * - Module resolution failures
+ * - Runtime component errors
+ */
+export interface RuntimeValidationResult {
+    success: boolean;
+    storyExists: boolean;
+    renderError?: string;
+    errorType?: 'module_error' | 'render_error' | 'not_found' | 'timeout' | 'connection_error';
+    details?: string;
+}
+export interface RuntimeValidatorConfig {
+    storybookUrl: string;
+    hmrWaitMs?: number;
+    fetchTimeoutMs?: number;
+    retryAttempts?: number;
+    retryDelayMs?: number;
+}
+/**
+ * Get the Storybook URL based on environment configuration
+ */
+export declare function getStorybookUrl(): string | null;
+/**
+ * Check if runtime validation is enabled
+ */
+export declare function isRuntimeValidationEnabled(): boolean;
+/**
+ * Convert a story title to the Storybook story ID prefix format
+ * e.g., "Simple Card" with prefix "Generated/" -> "generated-simple-card"
+ * Note: This returns the prefix only, without the story export name
+ */
+export declare function titleToStoryIdPrefix(title: string, storyPrefix?: string): string;
+/**
+ * Extract the actual title from generated story content
+ * Looks for: title: 'Generated/Something' or title: "Generated/Something"
+ */
+export declare function extractTitleFromStory(storyContent: string): string | null;
+/**
+ * Convert a full story title (like "Generated/Button Click Counter") to story ID prefix
+ */
+export declare function fullTitleToStoryIdPrefix(fullTitle: string): string;
+/**
+ * Validate that a story loads and renders correctly in Storybook
+ *
+ * @param storyContent - The generated story content (used to extract the actual title)
+ * @param fallbackTitle - Fallback title if extraction fails (e.g., "Simple Card")
+ * @param storyPrefix - The story prefix from config (e.g., "Generated/")
+ * @param customConfig - Runtime validator configuration
+ * @returns Validation result with success status and any errors
+ */
+export declare function validateStoryRuntime(storyContent: string, fallbackTitle: string, storyPrefix?: string, customConfig?: Partial<RuntimeValidatorConfig>): Promise<RuntimeValidationResult>;
+/**
+ * Format runtime validation errors for the self-healing prompt
+ */
+export declare function formatRuntimeErrorForHealing(result: RuntimeValidationResult): string;
+//# sourceMappingURL=runtimeValidator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"runtimeValidator.d.ts","sourceRoot":"","sources":["../../story-generator/runtimeValidator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,cAAc,GAAG,cAAc,GAAG,WAAW,GAAG,SAAS,GAAG,kBAAkB,CAAC;IAC3F,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAeD;;GAEG;AACH,wBAAgB,eAAe,IAAI,MAAM,GAAG,IAAI,CAmB/C;AAED;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,OAAO,CAcpD;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,GAAE,MAAqB,GAAG,MAAM,CAQ9F;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAOzE;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAKlE;AAiJD;;;;;;;;GAQG;AACH,wBAAsB,oBAAoB,CACxC,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,WAAW,GAAE,MAAqB,EAClC,YAAY,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,GAC7C,OAAO,CAAC,uBAAuB,CAAC,CA6FlC;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAAC,MAAM,EAAE,uBAAuB,GAAG,MAAM,CAoDpF"}