@tpitre/story-ui 4.13.3 → 4.15.0

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

@@ -1 +1 @@
-{"version":3,"file":"canvasGenerate.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/canvasGenerate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAW5C,eAAO,MAAM,qBAAqB,oCAAoC,CAAC;AAmIvE,wBAAgB,eAAe,IAAI,IAAI,CAuBtC;AAID;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAU/D;AAuBD,wBAAsB,qBAAqB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,+CAwEtE"}
+{"version":3,"file":"canvasGenerate.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/canvasGenerate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAW5C,eAAO,MAAM,qBAAqB,oCAAoC,CAAC;AAmIvE,wBAAgB,eAAe,IAAI,IAAI,CAuBtC;AAID;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAU/D;AAyCD,wBAAsB,qBAAqB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,+CAwEtE"}

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

@@ -192,21 +192,37 @@ export function ensureVoiceCanvasStory(storiesDir) {
     }
 }
 // ── Code extraction ───────────────────────────────────────────
+/**
+ * If the LLM forgot to add a render() call (required by react-live noInline mode),
+ * detect the last defined PascalCase component and append render(<ComponentName />).
+ * This prevents the "No-Inline evaluations must call render" error when voice input
+ * is ambiguous or short and the LLM skips the final line.
+ */
+function ensureRenderCall(code) {
+    if (/\brender\s*\(/.test(code))
+        return code;
+    // Find the last PascalCase component/const defined in the code
+    const matches = [...code.matchAll(/(?:const|function)\s+([A-Z][A-Za-z0-9]*)/g)];
+    const componentName = matches.at(-1)?.[1] ?? 'Canvas';
+    return `${code}\nrender(<${componentName} />);`;
+}
 /**
  * Extract the canvas component code from the LLM response.
  * Handles markdown code fences and stray text.
  */
 function extractCanvasCode(response) {
+    let code;
     // Prefer explicit code fence
     const fenceMatch = response.match(/```(?:jsx|tsx|js|ts)?\n([\s\S]+?)\n```/);
-    if (fenceMatch)
-        return fenceMatch[1].trim();
-    // Fall back: find the Canvas component block
-    const canvasMatch = response.match(/(const Canvas\s*=[\s\S]+?render\s*\(<Canvas\s*\/>?\);?\s*$)/m);
-    if (canvasMatch)
-        return canvasMatch[1].trim();
-    // Last resort: return the whole response trimmed
-    return response.trim();
+    if (fenceMatch) {
+        code = fenceMatch[1].trim();
+    }
+    else {
+        // Fall back: find the Canvas component block
+        const canvasMatch = response.match(/(const Canvas\s*=[\s\S]+?render\s*\(<Canvas\s*\/>?\);?\s*$)/m);
+        code = canvasMatch ? canvasMatch[1].trim() : response.trim();
+    }
+    return ensureRenderCall(code);
 }
 // ── Handler ───────────────────────────────────────────────────
 export async function canvasGenerateHandler(req, res) {

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;AAskC5B,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CA03CnD;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;AAskC5B,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAm4CnD;AAED,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/templates/StoryUI/StoryUIPanel.js

@@ -821,6 +821,7 @@ function StoryUIPanel({ mcpPort }) {
     const panelGeneratedStoryIds = useRef(new Set());
     const voiceModeActiveRef = useRef(false);
     const canvasModeRef = useRef(panelMode === 'canvas');
+    const voiceCanvasRef = useRef(null);
     const knownStoryIds = useRef(new Set());
     const isPollingInitialized = useRef(false);
     // Set port override if provided
@@ -1545,7 +1546,14 @@ function StoryUIPanel({ mcpPort }) {
         dispatch({ type: 'SET_CONVERSATION', payload: chat.conversation });
         dispatch({ type: 'SET_ACTIVE_CHAT', payload: { id: chat.id, title: chat.title } });
     };
-    const handleNewChat = () => dispatch({ type: 'NEW_CHAT' });
+    const handleNewChat = () => {
+        dispatch({ type: 'NEW_CHAT' });
+        // When on Voice Canvas, also clear the canvas state (abort generation,
+        // reset code, blank the iframe, clear conversation history)
+        if (panelMode === 'canvas') {
+            voiceCanvasRef.current?.clear();
+        }
+    };
     // Voice input handlers
     const handleVoiceTranscript = useCallback((text) => {
         // Append transcript to current input (user may be speaking in segments)
@@ -1779,7 +1787,7 @@ function StoryUIPanel({ mcpPort }) {
     // ============================================
     // Render
     // ============================================
-    return (_jsxs("div", { className: `sui-root ${state.isDarkMode ? 'dark' : ''}`, children: [_jsxs("aside", { className: `sui-sidebar ${state.sidebarOpen ? '' : 'collapsed'}`, "aria-label": "Chat history", children: [state.sidebarOpen && (_jsxs("div", { className: "sui-sidebar-content", children: [_jsxs("button", { className: "sui-button sui-button-ghost", onClick: () => dispatch({ type: 'TOGGLE_SIDEBAR' }), style: { width: '100%', marginBottom: '12px', justifyContent: 'flex-start' }, children: [Icons.panelLeft, _jsx("span", { style: { marginLeft: '8px' }, children: "Hide sidebar" })] }), _jsxs("button", { className: "sui-button sui-button-default", onClick: handleNewChat, style: { width: '100%', marginBottom: '16px' }, children: [Icons.plus, _jsx("span", { children: "New Chat" })] }), _jsx("div", { className: "sui-sidebar-chats", children: [...state.recentChats].sort((a, b) => {
+    return (_jsxs("div", { className: `sui-root ${state.isDarkMode ? 'dark' : ''}`, children: [_jsxs("aside", { className: `sui-sidebar ${state.sidebarOpen ? '' : 'collapsed'}`, "aria-label": "Chat history", children: [state.sidebarOpen && (_jsxs("div", { className: "sui-sidebar-content", children: [_jsxs("button", { className: "sui-button sui-button-ghost", onClick: () => dispatch({ type: 'TOGGLE_SIDEBAR' }), style: { width: '100%', marginBottom: '12px', justifyContent: 'flex-start' }, children: [Icons.panelLeft, _jsx("span", { style: { marginLeft: '8px' }, children: "Hide sidebar" })] }), _jsxs("button", { className: "sui-button sui-button-default", onClick: handleNewChat, style: { width: '100%', marginBottom: '16px' }, children: [Icons.plus, _jsx("span", { children: panelMode === 'canvas' ? 'New Canvas' : 'New Chat' })] }), _jsx("div", { className: "sui-sidebar-chats", children: [...state.recentChats].sort((a, b) => {
                                     // Match Storybook sidebar order (from /index.json); alphabetical fallback
                                     const posA = storybookOrder.get(a.title.toLowerCase()) ?? Infinity;
                                     const posB = storybookOrder.get(b.title.toLowerCase()) ?? Infinity;
@@ -1807,7 +1815,7 @@ function StoryUIPanel({ mcpPort }) {
                                                                 const enabled = e.target.checked;
                                                                 dispatch({ type: 'SET_USE_STORYBOOK_MCP', payload: enabled });
                                                                 saveStorybookMcpPref(enabled);
-                                                            }, "aria-label": "Use Storybook MCP context" }), _jsx("span", { className: "sui-toggle-slider" })] })] }) }))] })] }), panelMode === 'canvas' ? (_jsx(VoiceCanvas, { apiBase: getApiBase(), provider: state.selectedProvider, model: state.selectedModel, onSave: (result) => {
+                                                            }, "aria-label": "Use Storybook MCP context" }), _jsx("span", { className: "sui-toggle-slider" })] })] }) }))] })] }), panelMode === 'canvas' ? (_jsx(VoiceCanvas, { ref: voiceCanvasRef, apiBase: getApiBase(), provider: state.selectedProvider, model: state.selectedModel, onSave: (result) => {
                             // Track the saved story — use fileName stem as chatId (consistent with manifest entry IDs)
                             const chatId = result.fileName.replace(/\.stories\.[a-z]+$/, '') || Date.now().toString();
                             const newSession = {

package/dist/templates/StoryUI/StoryUIPanel.tsx

@@ -9,7 +9,7 @@
 import React, { useState, useEffect, useRef, useCallback, useReducer } from 'react';
 import './StoryUIPanel.css';
 import { VoiceControls } from './voice/VoiceControls.js';
-import { VoiceCanvas } from './voice/VoiceCanvas.js';
+import { VoiceCanvas, type VoiceCanvasHandle } from './voice/VoiceCanvas.js';
 import type { VoiceCommand } from './voice/types.js';
 
 // ============================================
@@ -1182,6 +1182,7 @@ function StoryUIPanel({ mcpPort }: StoryUIPanelProps) {
   const panelGeneratedStoryIds = useRef<Set<string>>(new Set());
   const voiceModeActiveRef = useRef(false);
   const canvasModeRef = useRef(panelMode === 'canvas');
+  const voiceCanvasRef = useRef<VoiceCanvasHandle>(null);
   const knownStoryIds = useRef<Set<string>>(new Set());
   const isPollingInitialized = useRef(false);
 
@@ -1913,7 +1914,14 @@ function StoryUIPanel({ mcpPort }: StoryUIPanelProps) {
     dispatch({ type: 'SET_ACTIVE_CHAT', payload: { id: chat.id, title: chat.title } });
   };
 
-  const handleNewChat = () => dispatch({ type: 'NEW_CHAT' });
+  const handleNewChat = () => {
+    dispatch({ type: 'NEW_CHAT' });
+    // When on Voice Canvas, also clear the canvas state (abort generation,
+    // reset code, blank the iframe, clear conversation history)
+    if (panelMode === 'canvas') {
+      voiceCanvasRef.current?.clear();
+    }
+  };
 
   // Voice input handlers
   const handleVoiceTranscript = useCallback((text: string) => {
@@ -2159,7 +2167,7 @@ function StoryUIPanel({ mcpPort }: StoryUIPanelProps) {
             {/* New Chat */}
             <button className="sui-button sui-button-default" onClick={handleNewChat} style={{ width: '100%', marginBottom: '16px' }}>
               {Icons.plus}
-              <span>New Chat</span>
+              <span>{panelMode === 'canvas' ? 'New Canvas' : 'New Chat'}</span>
             </button>
 
             {/* Chat history */}
@@ -2368,6 +2376,7 @@ function StoryUIPanel({ mcpPort }: StoryUIPanelProps) {
 
         {panelMode === 'canvas' ? (
           <VoiceCanvas
+            ref={voiceCanvasRef}
             apiBase={getApiBase()}
             provider={state.selectedProvider}
             model={state.selectedModel}

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

@@ -1,3 +1,19 @@
+/**
+ * VoiceCanvas v5 — Storybook iframe + postMessage
+ *
+ * Architecture:
+ *   - LLM generates JSX code string
+ *   - Server writes a STATIC react-live story template ONCE on first use
+ *     (voice-canvas.stories.tsx never changes after creation — no HMR cascade)
+ *   - Preview renders in a Storybook iframe (full decorator chain = correct Mantine theme)
+ *   - Code updates on generate / undo / redo are delivered via:
+ *       1. localStorage (persists across iframe reloads)
+ *       2. window.postMessage (instant in-place update, no iframe reload needed)
+ *
+ * This means undo/redo has ZERO file I/O and ZERO HMR, so the outer
+ * StoryUIPanel is never accidentally reset.
+ */
+import React from 'react';
 export interface VoiceCanvasProps {
     apiBase: string;
     provider?: string;
@@ -11,5 +27,10 @@ export interface VoiceCanvasProps {
     }) => void;
     onError?: (error: string) => void;
 }
-export declare function VoiceCanvas({ apiBase, provider, model, onSave, onError, }: VoiceCanvasProps): import("react/jsx-runtime").JSX.Element;
+/** Imperative handle exposed to parent via ref — used by "New Chat" button */
+export interface VoiceCanvasHandle {
+    /** Clear the canvas: abort generation, reset all state, blank the iframe */
+    clear: () => void;
+}
+export declare const VoiceCanvas: React.ForwardRefExoticComponent<VoiceCanvasProps & React.RefAttributes<VoiceCanvasHandle>>;
 //# sourceMappingURL=VoiceCanvas.d.ts.map

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":"AA0BA,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;AAID,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAO,GACR,EAAE,gBAAgB,2CA0rBlB"}
+{"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,4FAytBtB,CAAC"}

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

@@ -14,14 +14,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * This means undo/redo has ZERO file I/O and ZERO HMR, so the outer
  * StoryUIPanel is never accidentally reset.
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { parseVoiceCommand } from './voiceCommands.js';
 // ── Constants ─────────────────────────────────────────────────
 const STORY_ID = 'generated-voice-canvas--default';
 const LS_KEY = '__voice_canvas_code__';
 const LS_PROMPT_KEY = '__voice_canvas_prompt__';
 const IFRAME_ORIGIN = window.location.origin;
 // ── Component ─────────────────────────────────────────────────
-export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
+export const VoiceCanvas = React.forwardRef(function VoiceCanvas({ apiBase, provider, model, onSave, onError, }, ref) {
     // ── Code + history ───────────────────────────────────────────
     const [currentCode, setCurrentCode] = useState('');
     const [undoStack, setUndoStack] = useState([]);
@@ -194,6 +195,12 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
     const canRedo = redoStack.length > 0;
     // ── Clear ─────────────────────────────────────────────────────
     const clear = useCallback(() => {
+        // Abort any in-flight generation so it doesn't land after the reset
+        if (abortRef.current) {
+            abortRef.current.abort();
+            abortRef.current = null;
+        }
+        generationCounterRef.current += 1; // invalidate any pending finally-block
         const current = currentCodeRef.current;
         if (current.trim()) {
             setUndoStack(prev => [...prev.slice(-19), current]);
@@ -204,8 +211,12 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
         iframeLoadedRef.current = false;
         conversationRef.current = [];
         setErrorMessage('');
+        setIsGenerating(false);
+        setStatusText('');
         setPendingTranscript('');
         pendingTranscriptRef.current = '';
+        setLastPrompt('');
+        lastPromptRef.current = '';
         try {
             localStorage.removeItem(LS_KEY);
         }
@@ -214,6 +225,8 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
             localStorage.removeItem(LS_PROMPT_KEY);
         }
         catch { }
+        // Force the iframe to remount — it will read empty localStorage and show the placeholder
+        setIframeKey(k => k + 1);
     }, []);
     // ── Save ───────────────────────────────────────────────────────
     // No dialog — saves immediately using the last voice/text prompt as the title.
@@ -305,30 +318,43 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
                 pendingTranscriptRef.current = accumulated;
                 setPendingTranscript(accumulated);
                 setInterimText('');
-                const trimmed = final.trim().toLowerCase();
-                if (trimmed.split(/\s+/).length <= 3) {
-                    if (trimmed === 'clear' || trimmed === 'start over') {
+                const command = parseVoiceCommand(final);
+                if (command) {
+                    if (command.type === 'clear') {
                         clear();
                         pendingTranscriptRef.current = '';
                         setPendingTranscript('');
                         return;
                     }
-                    if (trimmed === 'undo') {
+                    if (command.type === 'undo') {
                         undo();
                         pendingTranscriptRef.current = '';
                         setPendingTranscript('');
                         return;
                     }
-                    if (trimmed === 'redo') {
+                    if (command.type === 'redo') {
                         redo();
                         pendingTranscriptRef.current = '';
                         setPendingTranscript('');
                         return;
                     }
-                    if (trimmed === 'stop' || trimmed === 'stop listening') {
+                    if (command.type === 'stop') {
                         stopListeningRef.current();
                         return;
                     }
+                    if (command.type === 'save') {
+                        saveStory();
+                        pendingTranscriptRef.current = '';
+                        setPendingTranscript('');
+                        return;
+                    }
+                    if (command.type === 'new-chat') {
+                        clear();
+                        pendingTranscriptRef.current = '';
+                        setPendingTranscript('');
+                        return;
+                    }
+                    // 'submit' falls through to schedule an LLM generation below
                 }
                 if (abortRef.current)
                     abortRef.current.abort();
@@ -406,7 +432,7 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
             isListeningRef.current = false;
             setIsListening(false);
         }
-    }, [clear, undo, redo, scheduleIntent]);
+    }, [clear, undo, redo, scheduleIntent, saveStory]);
     // ── Voice: stop ────────────────────────────────────────────────
     const stopListening = useCallback(() => {
         isListeningRef.current = false;
@@ -505,6 +531,8 @@ export function VoiceCanvas({ apiBase, provider, model, onSave, onError, }) {
     if (!speechSupported) {
         return (_jsx("div", { className: "sui-canvas-container", children: _jsxs("div", { className: "sui-canvas-unsupported", children: [_jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }), _jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), _jsx("line", { x1: "12", x2: "12", y1: "19", y2: "22" }), _jsx("line", { x1: "2", x2: "22", y1: "2", y2: "22", stroke: "currentColor", strokeWidth: "1.5" })] }), _jsx("h2", { className: "sui-canvas-unsupported-title", children: "Voice not available" }), _jsx("p", { className: "sui-canvas-unsupported-desc", children: "Voice Canvas requires the Web Speech API, which isn't supported in this browser. Try Chrome or Edge for the full experience." })] }) }));
     }
+    // ── Imperative handle (for parent "New Canvas" button) ──────────
+    useImperativeHandle(ref, () => ({ clear }), [clear]);
     // ── Render ─────────────────────────────────────────────────────
     return (_jsxs("div", { className: "sui-canvas-container", children: [_jsxs("div", { className: "sui-canvas-preview", children: [!storyReady && !isGenerating && (_jsxs("div", { className: "sui-canvas-empty", children: [_jsx("div", { className: "sui-canvas-empty-icon", children: _jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }), _jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), _jsx("line", { x1: "12", x2: "12", y1: "19", y2: "22" })] }) }), _jsx("h2", { className: "sui-canvas-empty-title", children: "Voice Canvas" }), _jsx("p", { className: "sui-canvas-empty-desc", children: "Speak to build interfaces live with your design system components." }), _jsx("p", { className: "sui-canvas-empty-hint", children: "Try: \"Create a product card with an image, title, price, and buy button\"" })] })), !storyReady && isGenerating && (_jsxs("div", { className: "sui-canvas-progress", children: [_jsx("div", { className: "sui-canvas-progress-spinner" }), _jsx("span", { className: "sui-canvas-progress-text", children: statusText || 'Building...' })] })), storyReady && (_jsxs("div", { className: "sui-canvas-live-wrapper", children: [isGenerating && (_jsxs("div", { className: "sui-canvas-regen-overlay", children: [_jsx("div", { className: "sui-canvas-progress-spinner sui-canvas-progress-spinner--sm" }), _jsx("span", { children: statusText || 'Regenerating...' })] })), _jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Voice Canvas Preview", className: "sui-canvas-iframe", onLoad: handleIframeLoad }, iframeKey)] })), !isGenerating && errorMessage && (_jsxs("div", { className: "sui-canvas-error", children: [_jsx("span", { children: errorMessage }), _jsx("button", { type: "button", className: "sui-canvas-error-dismiss", onClick: () => setErrorMessage(''), "aria-label": "Dismiss error", children: "\u00D7" })] })), savedMessage && (_jsxs("div", { className: "sui-canvas-saved-toast", children: [_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }), _jsxs("span", { children: ["Saved: ", savedMessage] })] }))] }), statusText && !isGenerating && (_jsx("div", { className: "sui-canvas-status-bar", children: _jsx("span", { className: "sui-canvas-explanation", children: statusText }) })), _jsxs("div", { className: `sui-canvas-bar ${isListening ? 'sui-canvas-bar--active' : ''}`, children: [_jsxs("div", { className: "sui-canvas-bar-left", children: [_jsxs("button", { type: "button", className: `sui-canvas-mic ${isListening ? 'sui-canvas-mic--active' : ''}`, onClick: toggleListening, "aria-label": isListening ? 'Stop voice input' : 'Start voice input', children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }), _jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), _jsx("line", { x1: "12", x2: "12", y1: "19", y2: "22" })] }), isListening && _jsx("span", { className: "sui-canvas-mic-pulse" })] }), _jsx("div", { className: "sui-canvas-transcript", children: isGenerating ? (_jsx("span", { className: "sui-canvas-status-rendering", children: statusText || 'Building interface...' })) : interimText ? (_jsxs("span", { className: "sui-canvas-status-interim", children: [pendingTranscript ? pendingTranscript + ' ' : '', interimText] })) : pendingTranscript ? (_jsx("span", { className: "sui-canvas-status-final", children: pendingTranscript })) : isListening ? (_jsx("span", { className: "sui-canvas-status-listening", children: "Listening... describe what you want to build" })) : lastPrompt ? (_jsxs("span", { className: "sui-canvas-status-hint", title: lastPrompt, children: ["\u2713 ", lastPrompt.length > 72 ? lastPrompt.slice(0, 69) + '…' : lastPrompt] })) : (_jsx("span", { className: "sui-canvas-status-hint", children: "Click the mic and describe what to build" })) })] }), _jsxs("div", { className: "sui-canvas-bar-right", children: [canUndo && (_jsx("button", { type: "button", className: "sui-canvas-action", onClick: undo, title: "Undo (Cmd+Z)", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("polyline", { points: "1 4 1 10 7 10" }), _jsx("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })] }) })), canRedo && (_jsx("button", { type: "button", className: "sui-canvas-action", onClick: redo, title: "Redo (Cmd+Shift+Z)", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("polyline", { points: "23 4 23 10 17 10" }), _jsx("path", { d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10" })] }) })), hasContent && (_jsx("button", { type: "button", className: "sui-canvas-action", onClick: saveStory, title: "Save as story", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }), _jsx("polyline", { points: "17 21 17 13 7 13 7 21" }), _jsx("polyline", { points: "7 3 7 8 15 8" })] }) })), hasContent && (_jsx("button", { type: "button", className: "sui-canvas-action", onClick: clear, title: "Clear canvas", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M3 6h18" }), _jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }), _jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })] }) }))] })] })] }));
-}
+});

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

@@ -13,7 +13,8 @@
  * This means undo/redo has ZERO file I/O and ZERO HMR, so the outer
  * StoryUIPanel is never accidentally reset.
  */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { parseVoiceCommand } from './voiceCommands.js';
 
 // ── Constants ─────────────────────────────────────────────────
 
@@ -34,15 +35,22 @@ export interface VoiceCanvasProps {
   onError?: (error: string) => void;
 }
 
+/** Imperative handle exposed to parent via ref — used by "New Chat" button */
+export interface VoiceCanvasHandle {
+  /** Clear the canvas: abort generation, reset all state, blank the iframe */
+  clear: () => void;
+}
+
 // ── Component ─────────────────────────────────────────────────
 
-export function VoiceCanvas({
+export const VoiceCanvas = React.forwardRef<VoiceCanvasHandle, VoiceCanvasProps>(
+function VoiceCanvas({
   apiBase,
   provider,
   model,
   onSave,
   onError,
-}: VoiceCanvasProps) {
+}: VoiceCanvasProps, ref) {
   // ── Code + history ───────────────────────────────────────────
   const [currentCode, setCurrentCode] = useState('');
   const [undoStack, setUndoStack] = useState<string[]>([]);
@@ -239,6 +247,13 @@ export function VoiceCanvas({
   // ── Clear ─────────────────────────────────────────────────────
 
   const clear = useCallback(() => {
+    // Abort any in-flight generation so it doesn't land after the reset
+    if (abortRef.current) {
+      abortRef.current.abort();
+      abortRef.current = null;
+    }
+    generationCounterRef.current += 1; // invalidate any pending finally-block
+
     const current = currentCodeRef.current;
     if (current.trim()) {
       setUndoStack(prev => [...prev.slice(-19), current]);
@@ -249,10 +264,16 @@ export function VoiceCanvas({
     iframeLoadedRef.current = false;
     conversationRef.current = [];
     setErrorMessage('');
+    setIsGenerating(false);
+    setStatusText('');
     setPendingTranscript('');
     pendingTranscriptRef.current = '';
+    setLastPrompt('');
+    lastPromptRef.current = '';
     try { localStorage.removeItem(LS_KEY); } catch {}
     try { localStorage.removeItem(LS_PROMPT_KEY); } catch {}
+    // Force the iframe to remount — it will read empty localStorage and show the placeholder
+    setIframeKey(k => k + 1);
   }, []);
 
   // ── Save ───────────────────────────────────────────────────────
@@ -354,20 +375,27 @@ export function VoiceCanvas({
         setPendingTranscript(accumulated);
         setInterimText('');
 
-        const trimmed = final.trim().toLowerCase();
-        if (trimmed.split(/\s+/).length <= 3) {
-          if (trimmed === 'clear' || trimmed === 'start over') {
+        const command = parseVoiceCommand(final);
+        if (command) {
+          if (command.type === 'clear') {
             clear(); pendingTranscriptRef.current = ''; setPendingTranscript(''); return;
           }
-          if (trimmed === 'undo') {
+          if (command.type === 'undo') {
             undo(); pendingTranscriptRef.current = ''; setPendingTranscript(''); return;
           }
-          if (trimmed === 'redo') {
+          if (command.type === 'redo') {
             redo(); pendingTranscriptRef.current = ''; setPendingTranscript(''); return;
           }
-          if (trimmed === 'stop' || trimmed === 'stop listening') {
+          if (command.type === 'stop') {
             stopListeningRef.current(); return;
           }
+          if (command.type === 'save') {
+            saveStory(); pendingTranscriptRef.current = ''; setPendingTranscript(''); return;
+          }
+          if (command.type === 'new-chat') {
+            clear(); pendingTranscriptRef.current = ''; setPendingTranscript(''); return;
+          }
+          // 'submit' falls through to schedule an LLM generation below
         }
 
         if (abortRef.current) abortRef.current.abort();
@@ -441,7 +469,7 @@ export function VoiceCanvas({
       isListeningRef.current = false;
       setIsListening(false);
     }
-  }, [clear, undo, redo, scheduleIntent]);
+  }, [clear, undo, redo, scheduleIntent, saveStory]);
 
   // ── Voice: stop ────────────────────────────────────────────────
 
@@ -556,6 +584,10 @@ export function VoiceCanvas({
     );
   }
 
+  // ── Imperative handle (for parent "New Canvas" button) ──────────
+
+  useImperativeHandle(ref, () => ({ clear }), [clear]);
+
   // ── Render ─────────────────────────────────────────────────────
 
   return (
@@ -740,4 +772,5 @@ export function VoiceCanvas({
       </div>
     </div>
   );
-}
+});
+

package/dist/templates/StoryUI/voice/types.d.ts

@@ -30,7 +30,7 @@ export interface UseVoiceInputReturn {
     stop: () => void;
     toggle: () => void;
 }
-export type VoiceCommandType = 'undo' | 'redo' | 'clear' | 'stop' | 'new-chat' | 'submit';
+export type VoiceCommandType = 'undo' | 'redo' | 'clear' | 'stop' | 'new-chat' | 'submit' | 'save';
 export interface VoiceCommand {
     type: VoiceCommandType;
     raw: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../templates/StoryUI/voice/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../templates/StoryUI/voice/types.ts"],"names":[],"mappings":"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"}

package/dist/templates/StoryUI/voice/types.ts

@@ -52,7 +52,8 @@ export type VoiceCommandType =
   | 'clear'
   | 'stop'
   | 'new-chat'
-  | 'submit';
+  | 'submit'
+  | 'save';
 
 export interface VoiceCommand {
   type: VoiceCommandType;

package/dist/templates/StoryUI/voice/voiceCommands.d.ts

@@ -2,7 +2,10 @@ import type { VoiceCommand } from './types.js';
 /**
  * Checks if a transcript matches a known voice command.
  * Returns the command if matched, null otherwise.
- * Only matches short, exact phrases — longer utterances are descriptions.
+ *
+ * Short utterances (≤4 words) use exact matching against COMMAND_MAP.
+ * Any-length utterances are also checked for save-intent substrings so natural
+ * phrases like "this is good, save it, stop listening" still trigger a save.
  */
 export declare function parseVoiceCommand(transcript: string): VoiceCommand | null;
 //# sourceMappingURL=voiceCommands.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"voiceCommands.d.ts","sourceRoot":"","sources":["../../../../templates/StoryUI/voice/voiceCommands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,YAAY,CAAC;AAoCjE;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAYzE"}
+{"version":3,"file":"voiceCommands.d.ts","sourceRoot":"","sources":["../../../../templates/StoryUI/voice/voiceCommands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,YAAY,CAAC;AA8DjE;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAmBzE"}

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

@@ -27,20 +27,53 @@ const COMMAND_MAP = {
     'go': 'submit',
     'send it': 'submit',
     'generate that': 'submit',
+    // Save — short exact phrases
+    'save': 'save',
+    'save this': 'save',
+    'save it': 'save',
+    'save story': 'save',
+    'save the story': 'save',
+    'looks good': 'save',
+    'that looks good': 'save',
+    'this looks good': 'save',
+    'this is good': 'save',
+    'all good': 'save',
+    'all done': 'save',
+    'go ahead and save': 'save',
+    'save and stop': 'save',
 };
+// Save-intent phrases detected anywhere in a longer utterance.
+// Lets natural speech like "this is good, save it, stop listening" trigger a
+// save without the user needing to say an exact short phrase.
+const SAVE_INTENT_PHRASES = [
+    'save it',
+    'save this',
+    'save the story',
+    'go ahead and save',
+    'save and stop',
+];
 /**
  * Checks if a transcript matches a known voice command.
  * Returns the command if matched, null otherwise.
- * Only matches short, exact phrases — longer utterances are descriptions.
+ *
+ * Short utterances (≤4 words) use exact matching against COMMAND_MAP.
+ * Any-length utterances are also checked for save-intent substrings so natural
+ * phrases like "this is good, save it, stop listening" still trigger a save.
  */
 export function parseVoiceCommand(transcript) {
     const normalized = transcript.trim().toLowerCase().replace(/[.,!?]/g, '');
-    // Only check short utterances (commands are 1-3 words)
-    if (normalized.split(/\s+/).length > 4)
-        return null;
-    const commandType = COMMAND_MAP[normalized];
-    if (commandType) {
-        return { type: commandType, raw: transcript };
+    // Short exact-match commands (1-4 words)
+    if (normalized.split(/\s+/).length <= 4) {
+        const commandType = COMMAND_MAP[normalized];
+        if (commandType) {
+            return { type: commandType, raw: transcript };
+        }
+    }
+    // Save-intent phrases can appear anywhere in a longer utterance
+    for (const phrase of SAVE_INTENT_PHRASES) {
+        if (normalized.includes(phrase)) {
+            return { type: 'save', raw: transcript };
+        }
     }
     return null;
 }

package/dist/templates/StoryUI/voice/voiceCommands.ts

@@ -32,22 +32,58 @@ const COMMAND_MAP: Record<string, VoiceCommandType> = {
   'go': 'submit',
   'send it': 'submit',
   'generate that': 'submit',
+
+  // Save — short exact phrases
+  'save': 'save',
+  'save this': 'save',
+  'save it': 'save',
+  'save story': 'save',
+  'save the story': 'save',
+  'looks good': 'save',
+  'that looks good': 'save',
+  'this looks good': 'save',
+  'this is good': 'save',
+  'all good': 'save',
+  'all done': 'save',
+  'go ahead and save': 'save',
+  'save and stop': 'save',
 };
 
+// Save-intent phrases detected anywhere in a longer utterance.
+// Lets natural speech like "this is good, save it, stop listening" trigger a
+// save without the user needing to say an exact short phrase.
+const SAVE_INTENT_PHRASES = [
+  'save it',
+  'save this',
+  'save the story',
+  'go ahead and save',
+  'save and stop',
+];
+
 /**
  * Checks if a transcript matches a known voice command.
  * Returns the command if matched, null otherwise.
- * Only matches short, exact phrases — longer utterances are descriptions.
+ *
+ * Short utterances (≤4 words) use exact matching against COMMAND_MAP.
+ * Any-length utterances are also checked for save-intent substrings so natural
+ * phrases like "this is good, save it, stop listening" still trigger a save.
  */
 export function parseVoiceCommand(transcript: string): VoiceCommand | null {
   const normalized = transcript.trim().toLowerCase().replace(/[.,!?]/g, '');
 
-  // Only check short utterances (commands are 1-3 words)
-  if (normalized.split(/\s+/).length > 4) return null;
+  // Short exact-match commands (1-4 words)
+  if (normalized.split(/\s+/).length <= 4) {
+    const commandType = COMMAND_MAP[normalized];
+    if (commandType) {
+      return { type: commandType, raw: transcript };
+    }
+  }
 
-  const commandType = COMMAND_MAP[normalized];
-  if (commandType) {
-    return { type: commandType, raw: transcript };
+  // Save-intent phrases can appear anywhere in a longer utterance
+  for (const phrase of SAVE_INTENT_PHRASES) {
+    if (normalized.includes(phrase)) {
+      return { type: 'save', raw: transcript };
+    }
   }
 
   return null;

package/package.json

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

package/templates/StoryUI/StoryUIPanel.tsx

@@ -9,7 +9,7 @@
 import React, { useState, useEffect, useRef, useCallback, useReducer } from 'react';
 import './StoryUIPanel.css';
 import { VoiceControls } from './voice/VoiceControls.js';
-import { VoiceCanvas } from './voice/VoiceCanvas.js';
+import { VoiceCanvas, type VoiceCanvasHandle } from './voice/VoiceCanvas.js';
 import type { VoiceCommand } from './voice/types.js';
 
 // ============================================
@@ -1182,6 +1182,7 @@ function StoryUIPanel({ mcpPort }: StoryUIPanelProps) {
   const panelGeneratedStoryIds = useRef<Set<string>>(new Set());
   const voiceModeActiveRef = useRef(false);
   const canvasModeRef = useRef(panelMode === 'canvas');
+  const voiceCanvasRef = useRef<VoiceCanvasHandle>(null);
   const knownStoryIds = useRef<Set<string>>(new Set());
   const isPollingInitialized = useRef(false);
 
@@ -1913,7 +1914,14 @@ function StoryUIPanel({ mcpPort }: StoryUIPanelProps) {
     dispatch({ type: 'SET_ACTIVE_CHAT', payload: { id: chat.id, title: chat.title } });
   };
 
-  const handleNewChat = () => dispatch({ type: 'NEW_CHAT' });
+  const handleNewChat = () => {
+    dispatch({ type: 'NEW_CHAT' });
+    // When on Voice Canvas, also clear the canvas state (abort generation,
+    // reset code, blank the iframe, clear conversation history)
+    if (panelMode === 'canvas') {
+      voiceCanvasRef.current?.clear();
+    }
+  };
 
   // Voice input handlers
   const handleVoiceTranscript = useCallback((text: string) => {
@@ -2159,7 +2167,7 @@ function StoryUIPanel({ mcpPort }: StoryUIPanelProps) {
             {/* New Chat */}
             <button className="sui-button sui-button-default" onClick={handleNewChat} style={{ width: '100%', marginBottom: '16px' }}>
               {Icons.plus}
-              <span>New Chat</span>
+              <span>{panelMode === 'canvas' ? 'New Canvas' : 'New Chat'}</span>
             </button>
 
             {/* Chat history */}
@@ -2368,6 +2376,7 @@ function StoryUIPanel({ mcpPort }: StoryUIPanelProps) {
 
         {panelMode === 'canvas' ? (
           <VoiceCanvas
+            ref={voiceCanvasRef}
             apiBase={getApiBase()}
             provider={state.selectedProvider}
             model={state.selectedModel}

package/templates/StoryUI/voice/VoiceCanvas.tsx

@@ -13,7 +13,8 @@
  * This means undo/redo has ZERO file I/O and ZERO HMR, so the outer
  * StoryUIPanel is never accidentally reset.
  */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { parseVoiceCommand } from './voiceCommands.js';
 
 // ── Constants ─────────────────────────────────────────────────
 
@@ -34,15 +35,22 @@ export interface VoiceCanvasProps {
   onError?: (error: string) => void;
 }
 
+/** Imperative handle exposed to parent via ref — used by "New Chat" button */
+export interface VoiceCanvasHandle {
+  /** Clear the canvas: abort generation, reset all state, blank the iframe */
+  clear: () => void;
+}
+
 // ── Component ─────────────────────────────────────────────────
 
-export function VoiceCanvas({
+export const VoiceCanvas = React.forwardRef<VoiceCanvasHandle, VoiceCanvasProps>(
+function VoiceCanvas({
   apiBase,
   provider,
   model,
   onSave,
   onError,
-}: VoiceCanvasProps) {
+}: VoiceCanvasProps, ref) {
   // ── Code + history ───────────────────────────────────────────
   const [currentCode, setCurrentCode] = useState('');
   const [undoStack, setUndoStack] = useState<string[]>([]);
@@ -239,6 +247,13 @@ export function VoiceCanvas({
   // ── Clear ─────────────────────────────────────────────────────
 
   const clear = useCallback(() => {
+    // Abort any in-flight generation so it doesn't land after the reset
+    if (abortRef.current) {
+      abortRef.current.abort();
+      abortRef.current = null;
+    }
+    generationCounterRef.current += 1; // invalidate any pending finally-block
+
     const current = currentCodeRef.current;
     if (current.trim()) {
       setUndoStack(prev => [...prev.slice(-19), current]);
@@ -249,10 +264,16 @@ export function VoiceCanvas({
     iframeLoadedRef.current = false;
     conversationRef.current = [];
     setErrorMessage('');
+    setIsGenerating(false);
+    setStatusText('');
     setPendingTranscript('');
     pendingTranscriptRef.current = '';
+    setLastPrompt('');
+    lastPromptRef.current = '';
     try { localStorage.removeItem(LS_KEY); } catch {}
     try { localStorage.removeItem(LS_PROMPT_KEY); } catch {}
+    // Force the iframe to remount — it will read empty localStorage and show the placeholder
+    setIframeKey(k => k + 1);
   }, []);
 
   // ── Save ───────────────────────────────────────────────────────
@@ -354,20 +375,27 @@ export function VoiceCanvas({
         setPendingTranscript(accumulated);
         setInterimText('');
 
-        const trimmed = final.trim().toLowerCase();
-        if (trimmed.split(/\s+/).length <= 3) {
-          if (trimmed === 'clear' || trimmed === 'start over') {
+        const command = parseVoiceCommand(final);
+        if (command) {
+          if (command.type === 'clear') {
             clear(); pendingTranscriptRef.current = ''; setPendingTranscript(''); return;
           }
-          if (trimmed === 'undo') {
+          if (command.type === 'undo') {
             undo(); pendingTranscriptRef.current = ''; setPendingTranscript(''); return;
           }
-          if (trimmed === 'redo') {
+          if (command.type === 'redo') {
             redo(); pendingTranscriptRef.current = ''; setPendingTranscript(''); return;
           }
-          if (trimmed === 'stop' || trimmed === 'stop listening') {
+          if (command.type === 'stop') {
             stopListeningRef.current(); return;
           }
+          if (command.type === 'save') {
+            saveStory(); pendingTranscriptRef.current = ''; setPendingTranscript(''); return;
+          }
+          if (command.type === 'new-chat') {
+            clear(); pendingTranscriptRef.current = ''; setPendingTranscript(''); return;
+          }
+          // 'submit' falls through to schedule an LLM generation below
         }
 
         if (abortRef.current) abortRef.current.abort();
@@ -441,7 +469,7 @@ export function VoiceCanvas({
       isListeningRef.current = false;
       setIsListening(false);
     }
-  }, [clear, undo, redo, scheduleIntent]);
+  }, [clear, undo, redo, scheduleIntent, saveStory]);
 
   // ── Voice: stop ────────────────────────────────────────────────
 
@@ -556,6 +584,10 @@ export function VoiceCanvas({
     );
   }
 
+  // ── Imperative handle (for parent "New Canvas" button) ──────────
+
+  useImperativeHandle(ref, () => ({ clear }), [clear]);
+
   // ── Render ─────────────────────────────────────────────────────
 
   return (
@@ -740,4 +772,5 @@ export function VoiceCanvas({
       </div>
     </div>
   );
-}
+});
+

package/templates/StoryUI/voice/types.ts

@@ -52,7 +52,8 @@ export type VoiceCommandType =
   | 'clear'
   | 'stop'
   | 'new-chat'
-  | 'submit';
+  | 'submit'
+  | 'save';
 
 export interface VoiceCommand {
   type: VoiceCommandType;

package/templates/StoryUI/voice/voiceCommands.ts

@@ -32,22 +32,58 @@ const COMMAND_MAP: Record<string, VoiceCommandType> = {
   'go': 'submit',
   'send it': 'submit',
   'generate that': 'submit',
+
+  // Save — short exact phrases
+  'save': 'save',
+  'save this': 'save',
+  'save it': 'save',
+  'save story': 'save',
+  'save the story': 'save',
+  'looks good': 'save',
+  'that looks good': 'save',
+  'this looks good': 'save',
+  'this is good': 'save',
+  'all good': 'save',
+  'all done': 'save',
+  'go ahead and save': 'save',
+  'save and stop': 'save',
 };
 
+// Save-intent phrases detected anywhere in a longer utterance.
+// Lets natural speech like "this is good, save it, stop listening" trigger a
+// save without the user needing to say an exact short phrase.
+const SAVE_INTENT_PHRASES = [
+  'save it',
+  'save this',
+  'save the story',
+  'go ahead and save',
+  'save and stop',
+];
+
 /**
  * Checks if a transcript matches a known voice command.
  * Returns the command if matched, null otherwise.
- * Only matches short, exact phrases — longer utterances are descriptions.
+ *
+ * Short utterances (≤4 words) use exact matching against COMMAND_MAP.
+ * Any-length utterances are also checked for save-intent substrings so natural
+ * phrases like "this is good, save it, stop listening" still trigger a save.
  */
 export function parseVoiceCommand(transcript: string): VoiceCommand | null {
   const normalized = transcript.trim().toLowerCase().replace(/[.,!?]/g, '');
 
-  // Only check short utterances (commands are 1-3 words)
-  if (normalized.split(/\s+/).length > 4) return null;
+  // Short exact-match commands (1-4 words)
+  if (normalized.split(/\s+/).length <= 4) {
+    const commandType = COMMAND_MAP[normalized];
+    if (commandType) {
+      return { type: commandType, raw: transcript };
+    }
+  }
 
-  const commandType = COMMAND_MAP[normalized];
-  if (commandType) {
-    return { type: commandType, raw: transcript };
+  // Save-intent phrases can appear anywhere in a longer utterance
+  for (const phrase of SAVE_INTENT_PHRASES) {
+    if (normalized.includes(phrase)) {
+      return { type: 'save', raw: transcript };
+    }
   }
 
   return null;