@tpitre/story-ui 3.10.7 → 4.1.0

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,iBA2sB5D"}
+{"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"}

package/dist/cli/setup.js

@@ -422,7 +422,9 @@ export async function setupCommand(options = {}) {
     // Check for any Storybook framework
     const storybookPackages = [
         '@storybook/react', '@storybook/react-vite', '@storybook/react-webpack5', '@storybook/nextjs',
-        '@storybook/angular', '@storybook/vue3', '@storybook/svelte', '@storybook/web-components'
+        '@storybook/angular', '@storybook/vue3', '@storybook/vue3-vite',
+        '@storybook/svelte', '@storybook/svelte-vite',
+        '@storybook/web-components', '@storybook/web-components-vite'
     ];
     const hasStorybook = storybookPackages.some(pkg => devDeps[pkg] || deps[pkg]) ||
         fs.existsSync(path.join(process.cwd(), '.storybook'));
@@ -455,19 +457,34 @@ export async function setupCommand(options = {}) {
         componentFramework = 'angular';
         console.log(chalk.green('✅ Detected Angular Storybook'));
     }
-    // Check for Vue Storybook
+    // Check for Vue Storybook (vite variant first)
+    else if (devDeps['@storybook/vue3-vite'] || deps['@storybook/vue3-vite']) {
+        storybookFramework = '@storybook/vue3-vite';
+        componentFramework = 'vue';
+        console.log(chalk.green('✅ Detected Vite-based Vue 3 Storybook'));
+    }
     else if (devDeps['@storybook/vue3'] || deps['@storybook/vue3']) {
         storybookFramework = '@storybook/vue3';
         componentFramework = 'vue';
         console.log(chalk.green('✅ Detected Vue 3 Storybook'));
     }
-    // Check for Svelte Storybook
+    // Check for Svelte Storybook (vite variant first)
+    else if (devDeps['@storybook/svelte-vite'] || deps['@storybook/svelte-vite']) {
+        storybookFramework = '@storybook/svelte-vite';
+        componentFramework = 'svelte';
+        console.log(chalk.green('✅ Detected Vite-based Svelte Storybook'));
+    }
     else if (devDeps['@storybook/svelte'] || deps['@storybook/svelte']) {
         storybookFramework = '@storybook/svelte';
         componentFramework = 'svelte';
         console.log(chalk.green('✅ Detected Svelte Storybook'));
     }
-    // Check for Web Components Storybook
+    // Check for Web Components Storybook (vite variant first)
+    else if (devDeps['@storybook/web-components-vite'] || deps['@storybook/web-components-vite']) {
+        storybookFramework = '@storybook/web-components-vite';
+        componentFramework = 'web-components';
+        console.log(chalk.green('✅ Detected Vite-based Web Components Storybook'));
+    }
     else if (devDeps['@storybook/web-components'] || deps['@storybook/web-components']) {
         storybookFramework = '@storybook/web-components';
         componentFramework = 'web-components';
@@ -877,7 +894,7 @@ Material UI (MUI) is a React component library implementing Material Design.
     }
     // Copy component files
     const templatesDir = path.resolve(__dirname, '../../templates/StoryUI');
-    const componentFiles = ['StoryUIPanel.tsx', 'StoryUIPanel.mdx'];
+    const componentFiles = ['StoryUIPanel.tsx', 'StoryUIPanel.mdx', 'StoryUIPanel.css'];
     console.log(chalk.blue('\n📦 Installing Story UI component...'));
     for (const file of componentFiles) {
         const sourcePath = path.join(templatesDir, file);
@@ -895,6 +912,95 @@ Material UI (MUI) is a React component library implementing Material Design.
             console.warn(chalk.yellow(`⚠️  Template file not found: ${file}`));
         }
     }
+    // Configure Storybook bundler for StoryUIPanel requirements
+    console.log(chalk.blue('\n🔧 Configuring Storybook for Story UI...'));
+    const mainConfigPath = path.join(process.cwd(), '.storybook', 'main.ts');
+    const mainConfigPathJs = path.join(process.cwd(), '.storybook', 'main.js');
+    const actualMainPath = fs.existsSync(mainConfigPath) ? mainConfigPath :
+        fs.existsSync(mainConfigPathJs) ? mainConfigPathJs : null;
+    if (actualMainPath) {
+        let mainContent = fs.readFileSync(actualMainPath, 'utf-8');
+        let configUpdated = false;
+        // 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'));
+        }
+        else if (componentFramework === 'angular') {
+            // Angular uses webpack - needs CSS loaders
+            if (!mainContent.includes('webpackFinal')) {
+                const webpackConfig = `webpackFinal: async (config) => {
+    // Story UI: Add CSS loader for StoryUIPanel CSS imports
+    config.module?.rules?.push({
+      test: /\\.css$/,
+      use: ['style-loader', 'css-loader'],
+    });
+    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 Angular
+            console.log(chalk.blue('📦 Installing CSS loaders for Angular...'));
+            try {
+                execSync('npm install --save-dev style-loader css-loader', { stdio: 'inherit' });
+                console.log(chalk.green('✅ Installed style-loader and css-loader'));
+            }
+            catch (error) {
+                console.warn(chalk.yellow('⚠️  Could not install CSS loaders. You may need to run: npm install --save-dev style-loader css-loader'));
+            }
+        }
+        else {
+            // Vite-based frameworks (React, Vue, Svelte, Web Components)
+            if (!mainContent.includes('viteFinal')) {
+                const viteConfig = `viteFinal: async (config) => {
+    // Story UI: Exclude from dependency optimization to handle CSS imports correctly
+    config.optimizeDeps = {
+      ...config.optimizeDeps,
+      exclude: [
+        ...(config.optimizeDeps?.exclude || []),
+        '@tpitre/story-ui'
+      ]
+    };
+    return config;
+  },`;
+                // Insert viteFinal inside the config object, before the closing };
+                // Find the last property line and add viteFinal after it
+                // Pattern: match the closing }; that ends the config object (before export default)
+                if (mainContent.match(/};\s*\n+\s*export\s+default/)) {
+                    mainContent = mainContent.replace(/(\n)(};\s*\n+\s*export\s+default)/, `\n  ${viteConfig}\n$2`);
+                    configUpdated = true;
+                }
+            }
+        }
+        // For Web Components: Update tsconfig.json for TSX support
+        if (componentFramework === 'web-components') {
+            const tsconfigPath = path.join(process.cwd(), 'tsconfig.json');
+            if (fs.existsSync(tsconfigPath)) {
+                try {
+                    let tsconfigContent = fs.readFileSync(tsconfigPath, 'utf-8');
+                    if (!tsconfigContent.includes('"jsx"')) {
+                        // Add jsx config for TSX compilation
+                        tsconfigContent = tsconfigContent.replace(/"compilerOptions"\s*:\s*\{/, '"compilerOptions": {\n    "jsx": "react-jsx",');
+                        fs.writeFileSync(tsconfigPath, tsconfigContent);
+                        console.log(chalk.green('✅ Added JSX support to tsconfig.json'));
+                    }
+                }
+                catch (error) {
+                    console.warn(chalk.yellow('⚠️  Could not update tsconfig.json. You may need to add "jsx": "react-jsx" manually.'));
+                }
+            }
+        }
+        if (configUpdated) {
+            fs.writeFileSync(actualMainPath, mainContent);
+            console.log(chalk.green('✅ Updated Storybook configuration for Story UI'));
+        }
+    }
+    else {
+        console.warn(chalk.yellow('⚠️  Could not find .storybook/main.ts or main.js'));
+    }
     // Create considerations file
     const considerationsTemplatePath = path.resolve(__dirname, '../../templates/story-ui-considerations.md');
     const considerationsPath = path.join(process.cwd(), 'story-ui-considerations.md');

package/dist/mcp-server/index.js

@@ -163,7 +163,9 @@ app.get('/story-ui/stories', async (req, res) => {
             const content = fs.readFileSync(filePath, 'utf-8');
             // Extract title from story file
             const titleMatch = content.match(/title:\s*['"]([^'"]+)['"]/);
-            const title = titleMatch ? titleMatch[1].replace('Generated/', '') : file.replace('.stories.tsx', '');
+            let title = titleMatch ? titleMatch[1].replace('Generated/', '') : file.replace('.stories.tsx', '');
+            // Remove hash suffix like " (a1b2c3d4)" from display title - hash is for Storybook uniqueness only
+            title = title.replace(/\s*\([a-f0-9]{8}\)$/i, '');
             return {
                 id: file.replace('.stories.tsx', ''),
                 fileName: file,
@@ -210,17 +212,37 @@ app.post('/story-ui/stories', async (req, res) => {
     }
 });
 // Delete story by ID (RESTful endpoint)
+// Supports both fileName format (Button-a1b2c3d4.stories.tsx) and legacy storyId format (story-a1b2c3d4)
 app.delete('/story-ui/stories/:id', async (req, res) => {
     try {
         const { id } = req.params;
         const storiesPath = config.generatedStoriesPath;
-        const fileName = id.endsWith('.stories.tsx') ? id : `${id}.stories.tsx`;
+        // Try exact match first (fileName format)
+        // Handle both .tsx and .svelte extensions
+        let fileName = id;
+        if (!id.endsWith('.stories.tsx') && !id.endsWith('.stories.ts') && !id.endsWith('.stories.svelte')) {
+            fileName = `${id}.stories.tsx`;
+        }
         const filePath = path.join(storiesPath, fileName);
         if (fs.existsSync(filePath)) {
             fs.unlinkSync(filePath);
             console.log(`✅ Deleted story: ${filePath}`);
             return res.json({ success: true, message: 'Story deleted successfully' });
         }
+        // Fallback: Search for file by hash (for legacy storyId format like "story-a1b2c3d4")
+        // This handles backward compatibility with existing chats
+        const hashMatch = id.match(/-([a-f0-9]{8})(?:\.stories\.[a-z]+)?$/);
+        if (hashMatch) {
+            const hash = hashMatch[1];
+            const files = fs.readdirSync(storiesPath);
+            const matchingFile = files.find(f => f.includes(`-${hash}.stories.`));
+            if (matchingFile) {
+                const matchedFilePath = path.join(storiesPath, matchingFile);
+                fs.unlinkSync(matchedFilePath);
+                console.log(`✅ Deleted story by hash match: ${matchedFilePath}`);
+                return res.json({ success: true, message: 'Story deleted successfully' });
+            }
+        }
         return res.status(404).json({ success: false, error: 'Story not found' });
     }
     catch (error) {
@@ -312,16 +334,49 @@ app.post('/story-ui/stories/delete-bulk', async (req, res) => {
         return res.status(500).json({ error: 'Failed to bulk delete stories' });
     }
 });
-// Clear all generated stories
+// Clear all generated stories OR delete single story by fileName query param
 app.delete('/story-ui/stories', async (req, res) => {
     try {
         const storiesPath = config.generatedStoriesPath;
+        const { fileName } = req.query;
+        // If fileName query param provided, delete that specific file
+        if (fileName && typeof fileName === 'string') {
+            console.log(`🗑️ Deleting story by fileName: ${fileName}`);
+            if (!fs.existsSync(storiesPath)) {
+                return res.status(404).json({ success: false, error: 'Stories directory not found' });
+            }
+            // Try exact match first
+            let filePath = path.join(storiesPath, fileName);
+            if (fs.existsSync(filePath)) {
+                fs.unlinkSync(filePath);
+                console.log(`✅ Deleted story: ${filePath}`);
+                return res.json({ success: true, message: 'Story deleted successfully' });
+            }
+            // Try matching by hash pattern (e.g., "button-a1b2c3d4" without extension)
+            const hashMatch = fileName.match(/-([a-f0-9]{8})(?:\.stories\.[a-z]+)?$/);
+            if (hashMatch) {
+                const hash = hashMatch[1];
+                const files = fs.readdirSync(storiesPath);
+                const matchingFile = files.find(f => f.includes(`-${hash}.stories.`));
+                if (matchingFile) {
+                    filePath = path.join(storiesPath, matchingFile);
+                    fs.unlinkSync(filePath);
+                    console.log(`✅ Deleted story by hash match: ${filePath}`);
+                    return res.json({ success: true, message: 'Story deleted successfully' });
+                }
+            }
+            return res.status(404).json({ success: false, error: 'Story not found' });
+        }
+        // No fileName - clear ALL stories
         console.log(`🗑️ Clearing all stories from: ${storiesPath}`);
         if (!fs.existsSync(storiesPath)) {
             return res.json({ success: true, deleted: 0, message: 'No stories directory found' });
         }
         const files = fs.readdirSync(storiesPath);
-        const storyFiles = files.filter(file => file.endsWith('.stories.tsx'));
+        // Support all story file extensions: .tsx, .ts, .svelte
+        const storyFiles = files.filter(file => file.endsWith('.stories.tsx') ||
+            file.endsWith('.stories.ts') ||
+            file.endsWith('.stories.svelte'));
         let deleted = 0;
         for (const file of storyFiles) {
             try {

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;AAua5C,wBAAsB,uBAAuB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DA0hBxE"}
+{"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;AAmd5C,wBAAsB,uBAAuB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DA+kBxE"}

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

@@ -145,18 +145,58 @@ function slugify(str) {
         .replace(/[^a-z0-9]+/g, '-')
         .replace(/^-+|-+$/g, '');
 }
-function extractCodeBlock(text) {
-    // More flexible code block extraction - accept various language identifiers
-    const codeBlock = text.match(/```(?:tsx|jsx|typescript|ts|js|javascript)?([\s\S]*?)```/i);
-    return codeBlock ? codeBlock[1].trim() : null;
+function extractCodeBlock(text, framework) {
+    // Universal: Standard code blocks with language identifiers
+    const codeBlock = text.match(/```(?:tsx|jsx|typescript|ts|js|javascript|svelte|html|vue)?\s*([\s\S]*?)\s*```/i);
+    if (codeBlock) {
+        return codeBlock[1].trim();
+    }
+    // Framework-specific fallbacks
+    if (framework === 'svelte') {
+        // Svelte: look for <script module> (addon-svelte-csf v5+ format)
+        const scriptModuleIndex = text.indexOf('<script module>');
+        if (scriptModuleIndex !== -1) {
+            return text.slice(scriptModuleIndex).trim();
+        }
+        // Svelte: look for <script context="module"> (legacy format)
+        const scriptContextIndex = text.indexOf('<script context="module">');
+        if (scriptContextIndex !== -1) {
+            return text.slice(scriptContextIndex).trim();
+        }
+    }
+    else if (framework === 'vue') {
+        // Vue: look for <script setup> or <template>
+        const scriptSetupIndex = text.indexOf('<script setup');
+        if (scriptSetupIndex !== -1) {
+            return text.slice(scriptSetupIndex).trim();
+        }
+    }
+    // Universal fallback: look for import statement
+    const importIndex = text.indexOf('import');
+    if (importIndex !== -1) {
+        return text.slice(importIndex).trim();
+    }
+    return null;
 }
-async function callLLM(messages, images) {
+async function callLLM(messages, images, options) {
     // Check if any provider is configured
     if (!isProviderConfigured()) {
         throw new Error('No LLM provider configured. Please set CLAUDE_API_KEY, OPENAI_API_KEY, or GEMINI_API_KEY.');
     }
     const providerInfo = getProviderInfo();
-    logger.debug(`Using ${providerInfo.currentProvider} (${providerInfo.currentModel}) for story generation`);
+    // Log which provider will be used
+    if (options?.provider) {
+        logger.log(`🎯 Explicit provider requested: ${options.provider} (model: ${options.model || 'default'})`);
+    }
+    else {
+        logger.debug(`Using default ${providerInfo.currentProvider} (${providerInfo.currentModel}) for story generation`);
+    }
+    // Build options to pass to chat completion
+    const llmOptions = {
+        maxTokens: 8192,
+        provider: options?.provider,
+        model: options?.model,
+    };
     // If images are provided, use vision-capable chat
     if (images && images.length > 0) {
         if (!providerInfo.supportsVision) {
@@ -173,9 +213,9 @@ async function callLLM(messages, images) {
             }
             return msg;
         });
-        return await chatCompletionWithImages(messagesWithImages, { maxTokens: 8192 });
+        return await chatCompletionWithImages(messagesWithImages, llmOptions);
     }
-    return await chatCompletion(messages, { maxTokens: 8192 });
+    return await chatCompletion(messages, llmOptions);
 }
 function cleanPromptForTitle(prompt) {
     if (!prompt || typeof prompt !== 'string') {
@@ -342,7 +382,9 @@ export async function generateStoryFromPrompt(req, res) {
     autoDetectFramework, // Auto-detect from project (default: false)
     images, // Array of images for vision-based generation
     visionMode, // Vision mode: 'screenshot_to_story', 'design_to_story', 'component_analysis', 'layout_analysis'
-    designSystem // Design system being used (chakra-ui, mantine, etc.)
+    designSystem, // Design system being used (chakra-ui, mantine, etc.)
+    provider, // LLM provider selected in UI (claude, openai, gemini)
+    model // Model selected in UI
      } = req.body;
     if (!prompt)
         return res.status(400).json({ error: 'Missing prompt' });
@@ -485,7 +527,7 @@ export async function generateStoryFromPrompt(req, res) {
         while (attempts < maxRetries) {
             attempts++;
             logger.log(`--- Story Generation Attempt ${attempts} ---`);
-            const claudeResponse = await callLLM(messages, processedImages.length > 0 ? processedImages : undefined);
+            const claudeResponse = await callLLM(messages, processedImages.length > 0 ? processedImages : undefined, { provider, model });
             const extractedCode = extractCodeBlock(claudeResponse);
             if (!extractedCode) {
                 aiText = claudeResponse; // Use raw response if no code block
@@ -507,7 +549,9 @@ export async function generateStoryFromPrompt(req, res) {
             // 1. Pattern validation (storyValidator)
             validationErrors = validateStory(aiText);
             // 2. TypeScript AST validation (validateStory.ts)
-            const astValidation = validateStoryCode(aiText, 'story.tsx', config);
+            // Use correct filename extension for framework-specific validation (e.g., .stories.svelte for Svelte)
+            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);
             // Aggregate all errors
@@ -550,6 +594,7 @@ export async function generateStoryFromPrompt(req, res) {
         // Determine the best code to use
         let fileContents;
         let hasValidationWarnings = false;
+        let isFallbackStory = false; // Track if we created a fallback error story
         // Select the best attempt (fewest errors)
         const bestAttempt = selectBestAttempt(allAttempts);
         const finalErrors = bestAttempt ? bestAttempt.errors : createEmptyErrors();
@@ -560,15 +605,23 @@ export async function generateStoryFromPrompt(req, res) {
             logger.log(`   Remaining: ${formatErrorsForLog(finalErrors)}`);
             // If there are still errors but we have an attempt, use the best one
             // Only create fallback if we have no valid code at all
-            if (bestAttempt.code && bestAttempt.code.includes('export')) {
+            // Check for framework-specific code patterns (Svelte uses defineMeta, not export)
+            const hasUsableCode = bestAttempt.code && (bestAttempt.code.includes('export') ||
+                bestAttempt.code.includes('defineMeta') ||
+                bestAttempt.code.includes('<script module>') ||
+                bestAttempt.code.includes('<script context="module">'));
+            if (hasUsableCode) {
                 fileContents = bestAttempt.code;
                 hasValidationWarnings = true;
             }
             else {
                 // Create fallback story only if we have no usable code
+                // Pass both the raw prompt (for error display) and the aiTitle (for proper story title casing)
                 logger.log('Creating fallback story - no usable code generated');
-                fileContents = createFrameworkAwareFallbackStory(prompt, config, detectedFramework);
+                // aiTitle may not be set yet at this point, so always use cleanPromptForTitle for fallbacks
+                fileContents = createFrameworkAwareFallbackStory(prompt, cleanPromptForTitle(prompt), config, detectedFramework);
                 hasValidationWarnings = true;
+                isFallbackStory = true; // Mark that we created a fallback error story
             }
         }
         else if (bestAttempt) {
@@ -655,34 +708,55 @@ export async function generateStoryFromPrompt(req, res) {
             storyId = `story-${hash}`;
             logger.log('🆕 Creating new story:', { storyId, fileName: finalFileName });
         }
-        // Create title for the story
+        // Create title for the story (clean, without hash - hash goes in id for uniqueness)
         const prettyPrompt = escapeTitleForTS(aiTitle);
-        // Use the title without hash suffix for cleaner sidebar display
-        // The filename already contains the hash for uniqueness
-        const uniqueTitle = prettyPrompt;
-        // Fix title with storyPrefix and hash - handle both single-line and multi-line formats
+        // Title is now clean without hash - uniqueness is ensured via Storybook's id parameter
+        const cleanTitle = prettyPrompt;
+        // Generate Storybook-compatible ID with hash for uniqueness (prevents duplicate story errors)
+        const storyIdSlug = `${prettyPrompt.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')}-${hash}`;
+        // Fix title with storyPrefix - handle multiple story formats
         // Note: (?::\s*\w+(?:<[^>]+>)?)? handles TypeScript type annotations including generics
         // e.g., "const meta: Meta = {" or "const meta: Meta<typeof Button> = {"
+        // Pattern 1: CSF format - const meta = { title: "..." }
         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 = uniqueTitle.startsWith(config.storyPrefix)
-                ? uniqueTitle
-                : config.storyPrefix + uniqueTitle;
+            const titleToUse = cleanTitle.startsWith(config.storyPrefix)
+                ? cleanTitle
+                : config.storyPrefix + cleanTitle;
             return p1 + titleToUse + p3;
         });
-        // Fallback: export default { title: "..." } format
+        // Pattern 2: 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 = uniqueTitle.startsWith(config.storyPrefix)
-                    ? uniqueTitle
-                    : config.storyPrefix + uniqueTitle;
+                const titleToUse = cleanTitle.startsWith(config.storyPrefix)
+                    ? cleanTitle
+                    : config.storyPrefix + cleanTitle;
+                return p1 + titleToUse + p3;
+            });
+        }
+        // Pattern 3: Svelte native format - defineMeta({ title: "..." })
+        // This is CRITICAL for Svelte - without this, all Svelte stories get generic titles
+        // causing duplicate story ID errors that break the entire Storybook
+        if (!fixedFileContents.includes(config.storyPrefix)) {
+            fixedFileContents = fixedFileContents.replace(/(defineMeta\s*\(\s*\{[\s\S]*?title:\s*["'])([^"']+)(["'])/, (match, p1, oldTitle, p3) => {
+                const titleToUse = cleanTitle.startsWith(config.storyPrefix)
+                    ? cleanTitle
+                    : config.storyPrefix + cleanTitle;
                 return p1 + titleToUse + p3;
             });
         }
+        // Add Storybook id parameter for uniqueness (after title line)
+        // This ensures unique story IDs without polluting the visible title
+        // Pattern: After title line, add id: '...' if not already present
+        if (!fixedFileContents.includes("id:")) {
+            // Add id after title for CSF format
+            fixedFileContents = fixedFileContents.replace(/(title:\s*["'][^"']+["'])(,?\s*\n)/, `$1,\n  id: '${storyIdSlug}'$2`);
+        }
         // FIX #5: Final validation after ALL post-processing
         // This catches any syntax errors introduced by post-processing (e.g., buggy regex replacements)
-        const finalValidation = validateStoryCode(fixedFileContents, 'story.tsx', config);
+        // Use correct filename for framework-specific validation (e.g., .stories.svelte for Svelte)
+        const finalValidation = validateStoryCode(fixedFileContents, finalFileName, config);
         // ALWAYS apply fixedCode if it exists - handles both:
         // 1. Syntax error fixes (where isValid = false)
         // 2. React import removal for non-React frameworks (where isValid = true but fixedCode exists)
@@ -774,7 +848,10 @@ export async function generateStoryFromPrompt(req, res) {
             }
         }
         res.json({
-            success: true,
+            // IMPORTANT: success is FALSE when we had to create a fallback error story
+            // This allows the UI to properly inform the user that generation failed
+            success: !isFallbackStory,
+            isFallback: isFallbackStory, // Explicit flag for fallback detection
             fileName: finalFileName,
             storyId,
             outPath,
@@ -787,7 +864,8 @@ export async function generateStoryFromPrompt(req, res) {
                 errors: [...finalErrors.syntaxErrors, ...finalErrors.patternErrors, ...finalErrors.importErrors],
                 warnings: [],
                 selfHealingUsed,
-                attempts
+                attempts,
+                isFallback: isFallbackStory // Also in validation for convenience
             },
             runtimeValidation: {
                 enabled: isRuntimeValidationEnabled(),

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;AAsc5C,wBAAsB,6BAA6B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBAkkB9E"}
+{"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,iBA4pB9E"}