@tpitre/story-ui 3.10.0 → 3.10.2

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/templates/StoryUI/StoryUIPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,oBAAoB,CAAC;AAqtB5B,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAs5BnD;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,oBAAoB,CAAC;AAmuB5B,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAs5BnD;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/templates/StoryUI/StoryUIPanel.js

@@ -123,7 +123,11 @@ function getApiBaseUrl() {
         if (window.__STORY_UI_EDGE_URL__) {
             return window.__STORY_UI_EDGE_URL__;
         }
-        if (window.location.hostname.includes('railway.app')) {
+        // Detect cloud deployments: Railway, custom domains, or any non-localhost
+        const hostname = window.location.hostname;
+        const isLocalhost = hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.') || hostname.startsWith('10.');
+        if (!isLocalhost) {
+            // Cloud deployment - use same origin (works for Railway, custom domains, etc.)
             return window.location.origin;
         }
     }
@@ -148,15 +152,27 @@ const PROVIDERS_API = `${API_BASE}/mcp/providers`;
 const STORIES_API = `${API_BASE}/story-ui/stories`;
 const CONSIDERATIONS_API = `${API_BASE}/mcp/considerations`;
 function isEdgeMode() {
-    const baseUrl = getApiBaseUrl();
-    return baseUrl.includes('railway.app') || baseUrl.includes('workers.dev');
+    if (typeof window !== 'undefined') {
+        const hostname = window.location.hostname;
+        const isLocalhost = hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.') || hostname.startsWith('10.');
+        return !isLocalhost;
+    }
+    return false;
 }
 function getConnectionDisplayText() {
     const baseUrl = getApiBaseUrl();
-    if (baseUrl.includes('railway.app'))
-        return 'Railway Cloud';
-    if (baseUrl.includes('workers.dev'))
-        return 'Cloudflare Edge';
+    if (typeof window !== 'undefined') {
+        const hostname = window.location.hostname;
+        if (hostname.includes('railway.app'))
+            return 'Railway Cloud';
+        if (hostname.includes('workers.dev'))
+            return 'Cloudflare Edge';
+        if (hostname.includes('southleft.com'))
+            return 'Southleft Cloud';
+        const isLocalhost = hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.') || hostname.startsWith('10.');
+        if (!isLocalhost)
+            return `Cloud (${hostname})`;
+    }
     const port = baseUrl.match(/:(\d+)/)?.[1] || '4001';
     return `localhost:${port}`;
 }

package/package.json

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

package/templates/StoryUI/StoryUIPanel.tsx

@@ -308,7 +308,11 @@ function getApiBaseUrl(): string {
     if ((window as any).__STORY_UI_EDGE_URL__) {
       return (window as any).__STORY_UI_EDGE_URL__;
     }
-    if (window.location.hostname.includes('railway.app')) {
+    // Detect cloud deployments: Railway, custom domains, or any non-localhost
+    const hostname = window.location.hostname;
+    const isLocalhost = hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.') || hostname.startsWith('10.');
+    if (!isLocalhost) {
+      // Cloud deployment - use same origin (works for Railway, custom domains, etc.)
       return window.location.origin;
     }
   }
@@ -333,14 +337,24 @@ const STORIES_API = `${API_BASE}/story-ui/stories`;
 const CONSIDERATIONS_API = `${API_BASE}/mcp/considerations`;
 
 function isEdgeMode(): boolean {
-  const baseUrl = getApiBaseUrl();
-  return baseUrl.includes('railway.app') || baseUrl.includes('workers.dev');
+  if (typeof window !== 'undefined') {
+    const hostname = window.location.hostname;
+    const isLocalhost = hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.') || hostname.startsWith('10.');
+    return !isLocalhost;
+  }
+  return false;
 }
 
 function getConnectionDisplayText(): string {
   const baseUrl = getApiBaseUrl();
-  if (baseUrl.includes('railway.app')) return 'Railway Cloud';
-  if (baseUrl.includes('workers.dev')) return 'Cloudflare Edge';
+  if (typeof window !== 'undefined') {
+    const hostname = window.location.hostname;
+    if (hostname.includes('railway.app')) return 'Railway Cloud';
+    if (hostname.includes('workers.dev')) return 'Cloudflare Edge';
+    if (hostname.includes('southleft.com')) return 'Southleft Cloud';
+    const isLocalhost = hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.') || hostname.startsWith('10.');
+    if (!isLocalhost) return `Cloud (${hostname})`;
+  }
   const port = baseUrl.match(/:(\d+)/)?.[1] || '4001';
   return `localhost:${port}`;
 }