@tpitre/story-ui 2.8.0 → 2.8.1

package/dist/templates/StoryUI/StoryUIPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AAs4CA,iBAAS,YAAY,4CAqsCpB;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"StoryUIPanel.d.ts","sourceRoot":"","sources":["../../../templates/StoryUI/StoryUIPanel.tsx"],"names":[],"mappings":"AA85CA,iBAAS,YAAY,4CA8sCpB;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/templates/StoryUI/StoryUIPanel.js

@@ -115,6 +115,27 @@ const isEdgeMode = () => {
     return baseUrl.includes('workers.dev') || baseUrl.includes('pages.dev') ||
         baseUrl.startsWith('https://') && !baseUrl.includes('localhost');
 };
+// Helper to convert story title to Storybook URL format
+// e.g., "Simple Card With Image" -> "generated-simple-card-with-image--default"
+const titleToStoryPath = (title) => {
+    const kebabTitle = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+    return `generated-${kebabTitle}--default`;
+};
+// Helper to navigate to a newly created story after generation completes
+// In dev mode with HMR, this prevents the "Couldn't find story after HMR" error
+// In all modes, this provides a better UX by auto-navigating to the new story
+const navigateToNewStory = (title, delayMs = 4000) => {
+    const storyPath = titleToStoryPath(title);
+    console.log(`[Story UI] Will navigate to story "${storyPath}" in ${delayMs}ms...`);
+    setTimeout(() => {
+        // Navigate the TOP window (parent Storybook UI), not the iframe
+        // The Story UI panel runs inside an iframe, so we need window.top to escape it
+        const topWindow = window.top || window;
+        const newUrl = `${topWindow.location.origin}/?path=/story/${storyPath}`;
+        console.log(`[Story UI] Navigating parent window to: ${newUrl}`);
+        topWindow.location.href = newUrl;
+    }, delayMs);
+};
 // Legacy helper for backwards compatibility
 const getApiPort = () => {
     const baseUrl = getApiBaseUrl();
@@ -1414,6 +1435,10 @@ function StoryUIPanel() {
             }
             saveChats(chats);
             setRecentChats(chats);
+            // Auto-navigate to the newly created story after HMR processes the file
+            // This prevents the "Couldn't find story after HMR" error by refreshing
+            // after the file system has been updated and HMR has processed the change
+            navigateToNewStory(chatTitle);
         }
     }, [activeChatId, activeTitle, conversation.length]);
     const handleSend = async (e) => {
@@ -1589,11 +1614,12 @@ function StoryUIPanel() {
                     }
                     else {
                         const chatId = data.storyId || data.fileName || Date.now().toString();
+                        const chatTitle = data.title || userInput;
                         setActiveChatId(chatId);
-                        setActiveTitle(data.title || userInput);
+                        setActiveTitle(chatTitle);
                         const newSession = {
                             id: chatId,
-                            title: data.title || userInput,
+                            title: chatTitle,
                             fileName: data.fileName || '',
                             conversation: updatedConversation,
                             lastUpdated: Date.now(),
@@ -1604,6 +1630,8 @@ function StoryUIPanel() {
                             chats.splice(MAX_RECENT_CHATS);
                         saveChats(chats);
                         setRecentChats(chats);
+                        // Auto-navigate to the newly created story
+                        navigateToNewStory(chatTitle);
                     }
                 }
                 catch (fallbackErr) {

package/package.json

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

package/templates/StoryUI/StoryUIPanel.tsx

@@ -284,6 +284,30 @@ const isEdgeMode = () => {
          baseUrl.startsWith('https://') && !baseUrl.includes('localhost');
 };
 
+// Helper to convert story title to Storybook URL format
+// e.g., "Simple Card With Image" -> "generated-simple-card-with-image--default"
+const titleToStoryPath = (title: string): string => {
+  const kebabTitle = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+  return `generated-${kebabTitle}--default`;
+};
+
+// Helper to navigate to a newly created story after generation completes
+// In dev mode with HMR, this prevents the "Couldn't find story after HMR" error
+// In all modes, this provides a better UX by auto-navigating to the new story
+const navigateToNewStory = (title: string, delayMs: number = 4000) => {
+  const storyPath = titleToStoryPath(title);
+  console.log(`[Story UI] Will navigate to story "${storyPath}" in ${delayMs}ms...`);
+
+  setTimeout(() => {
+    // Navigate the TOP window (parent Storybook UI), not the iframe
+    // The Story UI panel runs inside an iframe, so we need window.top to escape it
+    const topWindow = window.top || window;
+    const newUrl = `${topWindow.location.origin}/?path=/story/${storyPath}`;
+    console.log(`[Story UI] Navigating parent window to: ${newUrl}`);
+    topWindow.location.href = newUrl;
+  }, delayMs);
+};
+
 // Legacy helper for backwards compatibility
 const getApiPort = () => {
   const baseUrl = getApiBaseUrl();
@@ -1899,6 +1923,11 @@ function StoryUIPanel() {
       }
       saveChats(chats);
       setRecentChats(chats);
+
+      // Auto-navigate to the newly created story after HMR processes the file
+      // This prevents the "Couldn't find story after HMR" error by refreshing
+      // after the file system has been updated and HMR has processed the change
+      navigateToNewStory(chatTitle);
     }
   }, [activeChatId, activeTitle, conversation.length]);
 
@@ -2091,11 +2120,12 @@ function StoryUIPanel() {
             setRecentChats(chats);
           } else {
             const chatId = data.storyId || data.fileName || Date.now().toString();
+            const chatTitle = data.title || userInput;
             setActiveChatId(chatId);
-            setActiveTitle(data.title || userInput);
+            setActiveTitle(chatTitle);
             const newSession: ChatSession = {
               id: chatId,
-              title: data.title || userInput,
+              title: chatTitle,
               fileName: data.fileName || '',
               conversation: updatedConversation,
               lastUpdated: Date.now(),
@@ -2105,6 +2135,9 @@ function StoryUIPanel() {
             if (chats.length > MAX_RECENT_CHATS) chats.splice(MAX_RECENT_CHATS);
             saveChats(chats);
             setRecentChats(chats);
+
+            // Auto-navigate to the newly created story
+            navigateToNewStory(chatTitle);
           }
         } catch (fallbackErr: unknown) {
           const errorMessage = fallbackErr instanceof Error ? fallbackErr.message : 'Unknown error';