@tpitre/story-ui 4.16.5 → 4.16.7

package/dist/mcp-server/routes/canvasSave.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvasSave.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/canvasSave.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA0I5C;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAwCzF;AAID,+DAA+D;AAC/D,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAatD;AAED,wBAAsB,iBAAiB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,+CAiHlE"}
+{"version":3,"file":"canvasSave.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/canvasSave.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA0I5C;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAkDzF;AAID,+DAA+D;AAC/D,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAatD;AAED,wBAAsB,iBAAiB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,+CAiHlE"}

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

@@ -127,7 +127,11 @@ ${jsx}
  */
 export function jsxCodeToStory(jsxCode, title, importPath) {
     // Remove the render(<Canvas />) call at the end
-    const cleanCode = jsxCode.replace(/\nrender\s*\(<Canvas\s*\/>\);?\s*$/, '').trim();
+    let cleanCode = jsxCode.replace(/\nrender\s*\(<Canvas\s*\/>\);?\s*$/, '').trim();
+    // The canvas code is generated for react-live where `React` is a global.
+    // Replace `React.useState(...)` → `useState(...)` etc. so the saved story
+    // works with named imports and doesn't need a default React import.
+    cleanCode = cleanCode.replace(/\bReact\.(useState|useEffect|useCallback|useMemo|useRef|useReducer|useContext|createElement|Fragment)\b/g, '$1');
     // Extract component names used in JSX (uppercase identifiers after '<')
     const tagMatches = cleanCode.match(/(?<=<)([A-Z][a-zA-Z.]*)/g) ?? [];
     const componentSet = new Set();
@@ -137,14 +141,19 @@ export function jsxCodeToStory(jsxCode, title, importPath) {
             componentSet.add(base);
     }
     const sortedComponents = Array.from(componentSet).sort();
-    // Detect React hooks used
-    const hookNames = ['useState', 'useEffect', 'useCallback', 'useMemo', 'useRef', 'useReducer', 'useContext'];
+    // Detect React hooks and utilities used
+    const hookNames = ['useState', 'useEffect', 'useCallback', 'useMemo', 'useRef', 'useReducer', 'useContext', 'createElement', 'Fragment'];
     const usedHooks = hookNames.filter(h => new RegExp(`\\b${h}\\b`).test(cleanCode));
+    // If the code still references `React.` for anything else, import React as a whole
+    const needsReactImport = /\bReact\./.test(cleanCode);
     const lines = [];
-    if (sortedComponents.length > 0) {
+    if (sortedComponents.length > 0 && importPath) {
         lines.push(`import { ${sortedComponents.join(', ')} } from '${importPath}';`);
     }
-    if (usedHooks.length > 0) {
+    if (needsReactImport) {
+        lines.push(`import React${usedHooks.length > 0 ? `, { ${usedHooks.join(', ')} }` : ''} from 'react';`);
+    }
+    else if (usedHooks.length > 0) {
         lines.push(`import { ${usedHooks.join(', ')} } from 'react';`);
     }
     lines.push(`import type { Meta, StoryObj } from '@storybook/react';`);

package/dist/templates/StoryUI/voice/VoiceCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceCanvas.d.ts","sourceRoot":"","sources":["../../../../templates/StoryUI/voice/VoiceCanvas.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAwE,MAAM,OAAO,CAAC;AAY7F,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,8EAA8E;AAC9E,MAAM,WAAW,iBAAiB;IAChC,4EAA4E;IAC5E,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,eAAO,MAAM,WAAW,4FA6uBtB,CAAC"}
+{"version":3,"file":"VoiceCanvas.d.ts","sourceRoot":"","sources":["../../../../templates/StoryUI/voice/VoiceCanvas.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAwE,MAAM,OAAO,CAAC;AAY7F,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,8EAA8E;AAC9E,MAAM,WAAW,iBAAiB;IAChC,4EAA4E;IAC5E,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,eAAO,MAAM,WAAW,4FAowBtB,CAAC"}

package/dist/templates/StoryUI/voice/VoiceCanvas.js

@@ -59,6 +59,7 @@ export const VoiceCanvas = React.forwardRef(function VoiceCanvas({ apiBase, prov
     const audioCheckRef = useRef(null);
     const audioStreamRef = useRef(null);
     const stopListeningRef = useRef(() => { });
+    const startListeningRef = useRef(() => { });
     const currentCodeRef = useRef(currentCode);
     currentCodeRef.current = currentCode;
     // Incremented on every new generation to prevent stale finally blocks from
@@ -90,6 +91,18 @@ export const VoiceCanvas = React.forwardRef(function VoiceCanvas({ apiBase, prov
         // Stamp this generation so stale finally blocks from aborted requests
         // don't clobber the state of a newer in-flight request.
         const genId = ++generationCounterRef.current;
+        // Pause voice recognition while the LLM is thinking so the user can
+        // talk freely without triggering new requests or aborting this one.
+        // The mic resumes automatically when generation completes.
+        const wasListening = isListeningRef.current;
+        if (wasListening && recognitionRef.current) {
+            try {
+                recognitionRef.current.stop();
+            }
+            catch { /* already stopped */ }
+            recognitionRef.current = null;
+            // Keep isListeningRef.current = true so we know to resume later
+        }
         setIsGenerating(true);
         setStatusText('Thinking...');
         setErrorMessage('');
@@ -179,6 +192,15 @@ export const VoiceCanvas = React.forwardRef(function VoiceCanvas({ apiBase, prov
             if (generationCounterRef.current === genId) {
                 setIsGenerating(false);
                 abortRef.current = null;
+                // Resume voice recognition if it was active before generation started.
+                // This lets the user keep talking hands-free across multiple edits.
+                if (wasListening && isListeningRef.current) {
+                    setTimeout(() => {
+                        if (isListeningRef.current && !recognitionRef.current) {
+                            startListeningRef.current();
+                        }
+                    }, 300);
+                }
             }
         }
     }, [apiBase, provider, model, storyReady, sendCodeToIframe, onError]);
@@ -456,6 +478,7 @@ export const VoiceCanvas = React.forwardRef(function VoiceCanvas({ apiBase, prov
             setIsListening(false);
         }
     }, [clear, undo, redo, scheduleIntent, saveStory]);
+    startListeningRef.current = startListening;
     // ── Voice: stop ────────────────────────────────────────────────
     const stopListening = useCallback(() => {
         isListeningRef.current = false;

package/dist/templates/StoryUI/voice/VoiceCanvas.tsx

@@ -93,6 +93,7 @@ function VoiceCanvas({
   const audioCheckRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const audioStreamRef = useRef<MediaStream | null>(null);
   const stopListeningRef = useRef<() => void>(() => {});
+  const startListeningRef = useRef<() => void>(() => {});
   const currentCodeRef = useRef(currentCode);
   currentCodeRef.current = currentCode;
   // Incremented on every new generation to prevent stale finally blocks from
@@ -129,6 +130,16 @@ function VoiceCanvas({
     // don't clobber the state of a newer in-flight request.
     const genId = ++generationCounterRef.current;
 
+    // Pause voice recognition while the LLM is thinking so the user can
+    // talk freely without triggering new requests or aborting this one.
+    // The mic resumes automatically when generation completes.
+    const wasListening = isListeningRef.current;
+    if (wasListening && recognitionRef.current) {
+      try { recognitionRef.current.stop(); } catch { /* already stopped */ }
+      recognitionRef.current = null;
+      // Keep isListeningRef.current = true so we know to resume later
+    }
+
     setIsGenerating(true);
     setStatusText('Thinking...');
     setErrorMessage('');
@@ -227,6 +238,16 @@ function VoiceCanvas({
       if (generationCounterRef.current === genId) {
         setIsGenerating(false);
         abortRef.current = null;
+
+        // Resume voice recognition if it was active before generation started.
+        // This lets the user keep talking hands-free across multiple edits.
+        if (wasListening && isListeningRef.current) {
+          setTimeout(() => {
+            if (isListeningRef.current && !recognitionRef.current) {
+              startListeningRef.current();
+            }
+          }, 300);
+        }
       }
     }
   }, [apiBase, provider, model, storyReady, sendCodeToIframe, onError]);
@@ -495,6 +516,8 @@ function VoiceCanvas({
     }
   }, [clear, undo, redo, scheduleIntent, saveStory]);
 
+  startListeningRef.current = startListening;
+
   // ── Voice: stop ────────────────────────────────────────────────
 
   const stopListening = useCallback(() => {

package/package.json

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

package/templates/StoryUI/voice/VoiceCanvas.tsx

@@ -93,6 +93,7 @@ function VoiceCanvas({
   const audioCheckRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const audioStreamRef = useRef<MediaStream | null>(null);
   const stopListeningRef = useRef<() => void>(() => {});
+  const startListeningRef = useRef<() => void>(() => {});
   const currentCodeRef = useRef(currentCode);
   currentCodeRef.current = currentCode;
   // Incremented on every new generation to prevent stale finally blocks from
@@ -129,6 +130,16 @@ function VoiceCanvas({
     // don't clobber the state of a newer in-flight request.
     const genId = ++generationCounterRef.current;
 
+    // Pause voice recognition while the LLM is thinking so the user can
+    // talk freely without triggering new requests or aborting this one.
+    // The mic resumes automatically when generation completes.
+    const wasListening = isListeningRef.current;
+    if (wasListening && recognitionRef.current) {
+      try { recognitionRef.current.stop(); } catch { /* already stopped */ }
+      recognitionRef.current = null;
+      // Keep isListeningRef.current = true so we know to resume later
+    }
+
     setIsGenerating(true);
     setStatusText('Thinking...');
     setErrorMessage('');
@@ -227,6 +238,16 @@ function VoiceCanvas({
       if (generationCounterRef.current === genId) {
         setIsGenerating(false);
         abortRef.current = null;
+
+        // Resume voice recognition if it was active before generation started.
+        // This lets the user keep talking hands-free across multiple edits.
+        if (wasListening && isListeningRef.current) {
+          setTimeout(() => {
+            if (isListeningRef.current && !recognitionRef.current) {
+              startListeningRef.current();
+            }
+          }, 300);
+        }
       }
     }
   }, [apiBase, provider, model, storyReady, sendCodeToIframe, onError]);
@@ -495,6 +516,8 @@ function VoiceCanvas({
     }
   }, [clear, undo, redo, scheduleIntent, saveStory]);
 
+  startListeningRef.current = startListening;
+
   // ── Voice: stop ────────────────────────────────────────────────
 
   const stopListening = useCallback(() => {