@tpitre/story-ui 3.10.1 → 3.10.3

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

@@ -1 +1 @@
-{"version":3,"file":"update.d.ts","sourceRoot":"","sources":["../../cli/update.ts"],"names":[],"mappings":"AASA;;;;;GAKG;AAEH,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB;AA2SD;;GAEG;AACH,wBAAsB,aAAa,CAAC,OAAO,GAAE,aAAkB,GAAG,OAAO,CAAC,YAAY,CAAC,CAkItF;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,IAAI,CA+BpC"}
+{"version":3,"file":"update.d.ts","sourceRoot":"","sources":["../../cli/update.ts"],"names":[],"mappings":"AASA;;;;;GAKG;AAEH,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB;AAgTD;;GAEG;AACH,wBAAsB,aAAa,CAAC,OAAO,GAAE,aAAkB,GAAG,OAAO,CAAC,YAAY,CAAC,CAkItF;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,IAAI,CA+BpC"}

package/dist/cli/update.js

@@ -12,6 +12,11 @@ const MANAGED_FILES = [
         target: 'src/stories/StoryUI/StoryUIPanel.tsx',
         description: 'Main chat panel component'
     },
+    {
+        source: 'templates/StoryUI/StoryUIPanel.css',
+        target: 'src/stories/StoryUI/StoryUIPanel.css',
+        description: 'Panel styles'
+    },
     {
         source: 'templates/StoryUI/StoryUIPanel.mdx',
         target: 'src/stories/StoryUI/StoryUIPanel.mdx',

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;AAgc5C,wBAAsB,uBAAuB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAkgBxE"}
+{"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;AAgc5C,wBAAsB,uBAAuB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAwfxE"}

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

@@ -605,23 +605,68 @@ export async function generateStoryFromPrompt(req, res) {
             // Fallback to cleaned prompt if Claude fails
             aiTitle = cleanPromptForTitle(prompt);
         }
-        // Escape the title for TypeScript
+        // Generate unique ID and filename FIRST so we can include hash in title
+        // This is done early to ensure unique titles prevent Storybook duplicate ID errors
+        const fileExtension = frameworkAdapter?.defaultExtension || '.stories.tsx';
+        const timestamp = Date.now();
+        // Always generate a hash - either from existing IDs or new
+        let hash;
+        let finalFileName;
+        let storyId;
+        if (isActualUpdate && (fileName || providedStoryId)) {
+            // For updates, preserve the existing fileName and ID
+            if (providedStoryId) {
+                storyId = providedStoryId;
+                const hashMatch = providedStoryId.match(/^story-([a-f0-9]{8})$/);
+                hash = hashMatch ? hashMatch[1] : crypto.createHash('sha1').update(prompt + timestamp).digest('hex').slice(0, 8);
+                finalFileName = fileName || `${providedStoryId}.stories.tsx`;
+                logger.log('📝 Using provided storyId:', finalFileName);
+            }
+            else if (fileName) {
+                const hashMatch = fileName.match(/-([a-f0-9]{8})(?:\.stories\.tsx)?$/);
+                hash = hashMatch ? hashMatch[1] : crypto.createHash('sha1').update(prompt + timestamp).digest('hex').slice(0, 8);
+                storyId = `story-${hash}`;
+                finalFileName = fileName;
+            }
+            else {
+                // Fallback - should not reach here given the if condition, but satisfies TypeScript
+                hash = crypto.createHash('sha1').update(prompt + timestamp).digest('hex').slice(0, 8);
+                storyId = `story-${hash}`;
+                finalFileName = fileNameFromTitle(aiTitle, hash, fileExtension);
+            }
+            if (!finalFileName.endsWith('.stories.tsx')) {
+                finalFileName = finalFileName + '.stories.tsx';
+            }
+            logger.log('📌 Preserving story identity for update:', { storyId, fileName: finalFileName });
+        }
+        else {
+            // For new stories, ALWAYS generate new IDs with timestamp to ensure uniqueness
+            hash = crypto.createHash('sha1').update(prompt + timestamp).digest('hex').slice(0, 8);
+            finalFileName = fileName || fileNameFromTitle(aiTitle, hash, fileExtension);
+            storyId = `story-${hash}`;
+            logger.log('🆕 Creating new story:', { storyId, fileName: finalFileName });
+        }
+        // Escape the title for TypeScript and append hash for uniqueness
         const prettyPrompt = escapeTitleForTS(aiTitle);
-        // Fix title with storyPrefix - handle both single-line and multi-line formats
-        fixedFileContents = fixedFileContents.replace(/(const\s+meta\s*=\s*\{[\s\S]*?title:\s*["'])([^"']+)(["'])/, (match, p1, oldTitle, p3) => {
+        // Append hash to title to prevent Storybook duplicate ID errors
+        const uniqueTitle = `${prettyPrompt} (${hash})`;
+        // Fix title with storyPrefix and hash - handle both single-line and multi-line formats
+        // Note: (?::\s*\w+(?:<[^>]+>)?)? handles TypeScript type annotations including generics
+        // e.g., "const meta: Meta = {" or "const meta: Meta<typeof Button> = {"
+        fixedFileContents = fixedFileContents.replace(/(const\s+meta\s*(?::\s*\w+(?:<[^>]+>)?)?\s*=\s*\{[\s\S]*?title:\s*["'])([^"']+)(["'])/, (match, p1, oldTitle, p3) => {
             // Check if the title already has the prefix to avoid double prefixing
-            const titleToUse = prettyPrompt.startsWith(config.storyPrefix)
-                ? prettyPrompt
-                : config.storyPrefix + prettyPrompt;
+            const titleToUse = uniqueTitle.startsWith(config.storyPrefix)
+                ? uniqueTitle
+                : config.storyPrefix + uniqueTitle;
             return p1 + titleToUse + p3;
         });
         // Fallback: export default { title: "..." } format
         if (!fixedFileContents.includes(config.storyPrefix)) {
             fixedFileContents = fixedFileContents.replace(/(export\s+default\s*\{[\s\S]*?title:\s*["'])([^"']+)(["'])/, (match, p1, oldTitle, p3) => {
                 // Check if the title already has the prefix to avoid double prefixing
-                const titleToUse = prettyPrompt.startsWith(config.storyPrefix)
-                    ? prettyPrompt
-                    : config.storyPrefix + prettyPrompt;
+                const titleToUse = uniqueTitle.startsWith(config.storyPrefix)
+                    ? uniqueTitle
+                    : config.storyPrefix + uniqueTitle;
                 return p1 + titleToUse + p3;
             });
         }
@@ -657,60 +702,6 @@ export async function generateStoryFromPrompt(req, res) {
         else {
             logger.log('✅ Final validation passed after post-processing');
         }
-        // Check if this is an update to an existing story
-        // ONLY consider it an update if we're in the same conversation context
-        let existingStory = null;
-        if (isActualUpdate && fileName) {
-            // When updating within a conversation, look for the story by fileName
-            existingStory = storyTracker.findByTitle(aiTitle);
-            if (existingStory && existingStory.fileName !== fileName) {
-                // If found story has different fileName, it's not the same story
-                existingStory = null;
-            }
-        }
-        // Remove the automatic "find by prompt" logic that was preventing duplicates
-        // Generate unique ID and filename
-        let hash, finalFileName, storyId;
-        if (isActualUpdate && (fileName || providedStoryId)) {
-            // For updates, preserve the existing fileName and ID
-            // Ensure the filename has the proper .stories.tsx extension
-            // FIX: Handle case where fileName is undefined but providedStoryId exists
-            if (fileName) {
-                finalFileName = fileName;
-            }
-            else if (providedStoryId) {
-                // Generate filename from storyId when fileName not provided
-                finalFileName = `${providedStoryId}.stories.tsx`;
-                logger.log('📝 Generated filename from storyId:', finalFileName);
-            }
-            if (finalFileName && !finalFileName.endsWith('.stories.tsx')) {
-                finalFileName = finalFileName + '.stories.tsx';
-            }
-            // Use provided storyId or extract from fileName
-            if (providedStoryId) {
-                storyId = providedStoryId;
-                // Extract hash from storyId
-                const hashMatch = providedStoryId.match(/^story-([a-f0-9]{8})$/);
-                hash = hashMatch ? hashMatch[1] : crypto.createHash('sha1').update(prompt).digest('hex').slice(0, 8);
-            }
-            else {
-                // Extract hash from existing fileName if possible
-                const hashMatch = fileName.match(/-([a-f0-9]{8})(?:\.stories\.tsx)?$/);
-                hash = hashMatch ? hashMatch[1] : crypto.createHash('sha1').update(prompt).digest('hex').slice(0, 8);
-                storyId = `story-${hash}`;
-            }
-            logger.log('📌 Preserving story identity for update:', { storyId, fileName: finalFileName });
-        }
-        else {
-            // For new stories, ALWAYS generate new IDs with timestamp to ensure uniqueness
-            const timestamp = Date.now();
-            hash = crypto.createHash('sha1').update(prompt + timestamp).digest('hex').slice(0, 8);
-            // Use the framework adapter's defaultExtension for the correct file extension
-            const fileExtension = frameworkAdapter?.defaultExtension || '.stories.tsx';
-            finalFileName = fileName || fileNameFromTitle(aiTitle, hash, fileExtension);
-            storyId = `story-${hash}`;
-            logger.log('🆕 Creating new story:', { storyId, fileName: finalFileName, extension: fileExtension });
-        }
         // Write story to file system
         const outPath = generateStory({
             fileContents: fixedFileContents,

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;AA2c5C,wBAAsB,6BAA6B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBAqhB9E"}
+{"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;AA2c5C,wBAAsB,6BAA6B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBA0hB9E"}

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

@@ -699,23 +699,7 @@ export async function generateStoryFromPromptStream(req, res) {
         if (!aiTitle || aiTitle.length < 2) {
             aiTitle = cleanPromptForTitle(prompt);
         }
-        const prettyPrompt = escapeTitleForTS(aiTitle);
-        // Fix title with storyPrefix
-        fixedFileContents = fixedFileContents.replace(/(const\s+meta\s*=\s*\{[\s\S]*?title:\s*["'])([^"']+)(["'])/, (match, p1, oldTitle, p3) => {
-            const titleToUse = prettyPrompt.startsWith(config.storyPrefix)
-                ? prettyPrompt
-                : config.storyPrefix + prettyPrompt;
-            return p1 + titleToUse + p3;
-        });
-        if (!fixedFileContents.includes(config.storyPrefix)) {
-            fixedFileContents = fixedFileContents.replace(/(export\s+default\s*\{[\s\S]*?title:\s*["'])([^"']+)(["'])/, (match, p1, oldTitle, p3) => {
-                const titleToUse = prettyPrompt.startsWith(config.storyPrefix)
-                    ? prettyPrompt
-                    : config.storyPrefix + prettyPrompt;
-                return p1 + titleToUse + p3;
-            });
-        }
-        // Generate IDs
+        // Generate IDs FIRST so we can include hash in title for uniqueness
         let hash;
         let finalFileName;
         let storyId;
@@ -739,6 +723,27 @@ export async function generateStoryFromPromptStream(req, res) {
             finalFileName = fileName || fileNameFromTitle(aiTitle, hash);
             storyId = `story-${hash}`;
         }
+        // Now create title with hash suffix to ensure uniqueness
+        const prettyPrompt = escapeTitleForTS(aiTitle);
+        // Append hash to title to prevent Storybook duplicate ID errors
+        const uniqueTitle = `${prettyPrompt} (${hash})`;
+        // Fix title with storyPrefix and hash
+        // Note: (?::\s*\w+(?:<[^>]+>)?)? handles TypeScript type annotations including generics
+        // e.g., "const meta: Meta = {" or "const meta: Meta<typeof Button> = {"
+        fixedFileContents = fixedFileContents.replace(/(const\s+meta\s*(?::\s*\w+(?:<[^>]+>)?)?\s*=\s*\{[\s\S]*?title:\s*["'])([^"']+)(["'])/, (match, p1, oldTitle, p3) => {
+            const titleToUse = uniqueTitle.startsWith(config.storyPrefix)
+                ? uniqueTitle
+                : config.storyPrefix + uniqueTitle;
+            return p1 + titleToUse + p3;
+        });
+        if (!fixedFileContents.includes(config.storyPrefix)) {
+            fixedFileContents = fixedFileContents.replace(/(export\s+default\s*\{[\s\S]*?title:\s*["'])([^"']+)(["'])/, (match, p1, oldTitle, p3) => {
+                const titleToUse = uniqueTitle.startsWith(config.storyPrefix)
+                    ? uniqueTitle
+                    : config.storyPrefix + uniqueTitle;
+                return p1 + titleToUse + p3;
+            });
+        }
         // Ensure file extension is correct
         if (finalFileName && !finalFileName.endsWith('.stories.tsx')) {
             finalFileName = finalFileName + '.stories.tsx';

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

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

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

@@ -227,7 +227,6 @@ export const ProductCard: Story = {
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/angular';
 import { applicationConfig } from '@storybook/angular';
-import { action } from '@storybook/addon-actions';
 import { ButtonComponent } from 'your-library';
 
 const meta: Meta<ButtonComponent> = {
@@ -238,16 +237,18 @@ const meta: Meta<ButtonComponent> = {
       providers: [],
     }),
   ],
+  argTypes: {
+    // Use argTypes with action for event logging instead of addon-actions
+    onClick: { action: 'clicked' },
+  },
 };
 
 export default meta;
 type Story = StoryObj<ButtonComponent>;
 
 export const WithClick: Story = {
-  render: () => ({
-    props: {
-      onClick: action('button-click'),
-    },
+  render: (args) => ({
+    props: args,
     template: \`
       <app-button (click)="onClick($event)" variant="primary">
         Click me

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

@@ -1 +1 @@
-{"version":3,"file":"svelte-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/svelte-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,aAAc,SAAQ,oBAAoB;IACrD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAY;IACxC,QAAQ,CAAC,IAAI,YAAY;IACzB,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IA8GT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAuJ/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;IAiDzC;;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;CAWV;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,aAAa,CAEnD"}
+{"version":3,"file":"svelte-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/svelte-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,aAAc,SAAQ,oBAAoB;IACrD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAY;IACxC,QAAQ,CAAC,IAAI,YAAY;IACzB,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAmGT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAyI/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;IAiDzC;;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;CAWV;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,aAAa,CAEnD"}

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

@@ -28,43 +28,40 @@ Use ONLY the Svelte components from the ${componentSystemName} listed below.
 
 MANDATORY IMPORTS - First lines of every story file:
 1. import type { Meta, StoryObj } from '@storybook/svelte';
-2. import ComponentName from '${config.importPath || 'your-library'}/ComponentName.svelte';
+2. import { ComponentName } from '${config.importPath || 'flowbite-svelte'}';
 
-SVELTE STORY FORMAT:
-- Import .svelte files directly
+SVELTE STORY FORMAT (CSF 3.0):
+- Use named imports from flowbite-svelte (NOT default imports from .svelte files)
 - Props are passed via args object
-- Use render function for complex templates
+- Use render function ONLY for multiple components or complex layouts
 
-STORY STRUCTURE (CSF 3.0):
+STORY STRUCTURE:
 - Meta object with component, title, and parameters
-- Stories use args for simple prop passing
-- Use render for component composition
+- Stories use args for prop passing
+- Keep stories simple - avoid complex render functions when possible
 
 CRITICAL RULES:
-- Import Svelte components (default export from .svelte files)
-- For slots, use render with a wrapper component
-- Events use on: directive in Svelte templates
+- Import using named exports: import { Button, Card } from 'flowbite-svelte';
+- DO NOT use 'slot' property in render functions - it does NOT work
+- DO NOT use 'children' in args
+- For components that need text content, use the component's text/label prop if available
+- For button text, most Flowbite components accept text as a prop or the component handles it
 
-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:
+SIMPLE EXAMPLE (PREFERRED):
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/svelte';
-import { Button } from 'your-library';
+import { Button } from 'flowbite-svelte';
 
 const meta: Meta<Button> = {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
+  parameters: { layout: 'centered' },
   argTypes: {
-    variant: {
+    color: {
       control: 'select',
-      options: ['primary', 'secondary', 'ghost'],
+      options: ['primary', 'blue', 'alternative', 'dark', 'light', 'green', 'red'],
     },
-    onclick: { action: 'clicked' },
   },
 };
 
@@ -73,201 +70,179 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    variant: 'primary',
+    color: 'primary',
   },
-  render: (args) => ({
+};
+
+export const AllColors: Story = {
+  render: () => ({
     Component: Button,
-    props: args,
-    slot: 'Click me',
+    props: { color: 'blue' },
   }),
 };
 \`\`\`
 
-For stories with slots (using wrapper component):
-\`\`\`svelte
-<!-- ButtonWithIcon.stories.svelte -->
-<script context="module" lang="ts">
-  import type { Meta } from '@storybook/svelte';
-  import Button from 'your-library/Button.svelte';
-  import Icon from 'your-library/Icon.svelte';
-
-  export const meta: Meta<Button> = {
-    title: 'Components/Button/WithIcon',
-    component: Button,
-  };
-</script>
-
-<script lang="ts">
-  import { Story } from '@storybook/svelte';
-</script>
-
-<Story name="With Icon">
-  <Button variant="primary">
-    <Icon slot="icon" name="star" />
-    Starred
-  </Button>
-</Story>
+FOR MULTIPLE COMPONENTS (use render with template):
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { ButtonGroup, Button } from 'flowbite-svelte';
+
+const meta: Meta<ButtonGroup> = {
+  title: 'Components/ButtonGroup',
+  component: ButtonGroup,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// For simple button groups, just show the component
+export const Default: Story = {
+  args: {},
+};
 \`\`\`
 
 SVELTE TEMPLATE SYNTAX:
 - Props: property={value}
-- Events: on:event={handler}
+- Events: onclick={handler} (Svelte 5 syntax, NOT on:click)
 - Two-way binding: bind:value
 - Conditionals: {#if condition}...{/if}
 - Loops: {#each items as item}...{/each}
 
-SLOTS:
-- Default slot: Content between tags
-- Named slots: <span slot="name">content</span>
-- Slot props: let:prop
-
 ${this.getCommonRules()}`;
     }
     generateExamples(config) {
-        const lib = config.importPath || 'your-library';
+        const lib = config.importPath || 'flowbite-svelte';
         return `
-## Example Stories for Svelte
+## Example Stories for Svelte (CSF 3.0 Format)
 
-### TypeScript Stories File
+### Simple Component Story (PREFERRED)
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/svelte';
-import { Button } from 'your-library';
+import { Button } from '${lib}';
 
 const meta: Meta<Button> = {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
+  parameters: { layout: 'centered' },
   argTypes: {
-    variant: {
+    color: {
       control: 'select',
-      options: ['primary', 'secondary', 'ghost'],
+      options: ['primary', 'blue', 'alternative', 'dark', 'light', 'green', 'red'],
     },
     size: {
       control: 'select',
-      options: ['small', 'medium', 'large'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
     },
-    onclick: { action: 'clicked' },
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// IMPORTANT: Use render with slot property for content
-export const Default: Story = {
+export const Primary: Story = {
   args: {
-    variant: 'primary',
-    size: 'medium',
+    color: 'primary',
+    size: 'md',
   },
-  render: (args) => ({
-    Component: Button,
-    props: args,
-    slot: 'Button',
-  }),
 };
 
 export const Disabled: Story = {
   args: {
-    variant: 'primary',
+    color: 'primary',
     disabled: true,
   },
-  render: (args) => ({
+};
+
+export const AllSizes: Story = {
+  render: () => ({
     Component: Button,
-    props: args,
-    slot: 'Disabled',
+    props: { color: 'blue', size: 'lg' },
   }),
 };
 \`\`\`
 
-### Svelte Stories File (for complex templates)
-\`\`\`svelte
-<!-- Card.stories.svelte -->
-<script context="module" lang="ts">
-  import type { Meta } from '@storybook/svelte';
-  import Card from '${lib}/Card.svelte';
-  import Button from 'your-library/Button.svelte';
-  import Text from '${lib}/Text.svelte';
-
-  export const meta: Meta<Card> = {
-    title: 'Components/Card',
-    component: Card,
-  };
-</script>
-
-<script lang="ts">
-  import { Story, Template } from '@storybook/svelte';
-</script>
-
-<Story name="Product Card">
-  <Card style="width: 300px">
-    <img
-      slot="media"
-      src="https://picsum.photos/300/200"
-      alt="Product"
-    />
-    <Text slot="title" variant="heading">Product Name</Text>
-    <Text>$99.00</Text>
-    <Button slot="actions" variant="primary">Add to Cart</Button>
-  </Card>
-</Story>
-
-<Story name="Simple Card">
-  <Card>
-    <Text>Simple card content</Text>
-  </Card>
-</Story>
-\`\`\`
+### Card Component Story
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { Card } from '${lib}';
 
-### With Reactive State
-\`\`\`svelte
-<!-- Input.stories.svelte -->
-<script context="module" lang="ts">
-  import type { Meta } from '@storybook/svelte';
-  import Input from '${lib}/Input.svelte';
-
-  export const meta: Meta<Input> = {
-    title: 'Components/Input',
-    component: Input,
-  };
-</script>
-
-<script lang="ts">
-  import { Story } from '@storybook/svelte';
-  let value = '';
-</script>
-
-<Story name="Controlled">
-  <div>
-    <Input bind:value placeholder="Type here..." />
-    <p>Value: {value}</p>
-  </div>
-</Story>
+const meta: Meta<Card> = {
+  title: 'Components/Card',
+  component: Card,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    class: 'max-w-sm',
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    img: 'https://picsum.photos/300/200',
+    class: 'max-w-sm',
+  },
+};
+
+export const Horizontal: Story = {
+  args: {
+    horizontal: true,
+    class: 'max-w-xl',
+  },
+};
 \`\`\`
 
-### With Event Handling
+### Alert Component Story
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/svelte';
-import { action } from '@storybook/addon-actions';
-import { Button } from 'your-library';
+import { Alert } from '${lib}';
 
-const meta: Meta<Button> = {
-  title: 'Components/Button',
-  component: Button,
+const meta: Meta<Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['primary', 'blue', 'red', 'green', 'yellow', 'dark'],
+    },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const WithClickHandler: Story = {
+export const Info: Story = {
   args: {
-    variant: 'primary',
-    onclick: action('button-clicked'),
+    color: 'blue',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    color: 'green',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    color: 'yellow',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    color: 'red',
   },
-  render: (args) => ({
-    Component: Button,
-    props: args,
-    slot: 'Click me',
-  }),
 };
 \`\`\`
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"storyValidator.d.ts","sourceRoot":"","sources":["../../story-generator/storyValidator.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAAC,YAAY,EAAE,MAAM,GAAG,eAAe,EAAE,CA2CrE"}
+{"version":3,"file":"storyValidator.d.ts","sourceRoot":"","sources":["../../story-generator/storyValidator.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAAC,YAAY,EAAE,MAAM,GAAG,eAAe,EAAE,CA6CrE"}

package/dist/story-generator/storyValidator.js

@@ -7,8 +7,10 @@ export function validateStory(storyContent) {
         { pattern: /UNSAFE_style\s*=\s*\{/i, message: 'The `UNSAFE_style` prop is strictly forbidden. Do not use it for any reason.' },
         { pattern: /UNSAFE_className\s*=\s*['"]/i, message: 'The `UNSAFE_className` prop is forbidden.' },
         { pattern: /<Text\s+as\s*=\s*["']h[1-6]["']/i, message: 'Text component does not support heading elements (h1-h6) in the "as" prop. Use Heading component instead.' },
-        // Remove overly strict rules - divs, imgs, and inline styles are fine in moderation
-        // Only check for actual syntax errors or patterns that would break Storybook
+        // Catch imports that don't exist in production environments
+        { pattern: /from\s+['"]@storybook\/addon-actions['"]/i, message: 'Do not import from @storybook/addon-actions. Use argTypes with action property instead: argTypes: { onClick: { action: "clicked" } }' },
+        // Catch Svelte slot property which doesn't work in modern Storybook
+        { pattern: /slot:\s*['"][^'"]+['"]/i, message: 'The slot property in render functions does not work in Svelte Storybook. Use simple args-based stories instead.' },
     ];
     lines.forEach((line, index) => {
         for (const { pattern, message } of forbiddenPatterns) {

package/package.json

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