@tpitre/story-ui 4.13.3 → 4.14.0

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;AAW7F,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,4FAktBtB,CAAC"}

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

@@ -14,14 +14,14 @@ 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';
 // ── 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 +194,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 +210,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 +224,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.
@@ -505,6 +517,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,7 @@
  * 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';
 
 // ── Constants ─────────────────────────────────────────────────
 
@@ -34,15 +34,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 +246,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 +263,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 ───────────────────────────────────────────────────────
@@ -556,6 +576,10 @@ export function VoiceCanvas({
     );
   }
 
+  // ── Imperative handle (for parent "New Canvas" button) ──────────
+
+  useImperativeHandle(ref, () => ({ clear }), [clear]);
+
   // ── Render ─────────────────────────────────────────────────────
 
   return (
@@ -740,4 +764,5 @@ export function VoiceCanvas({
       </div>
     </div>
   );
-}
+});
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "4.13.3",
+  "version": "4.14.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,7 @@
  * 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';
 
 // ── Constants ─────────────────────────────────────────────────
 
@@ -34,15 +34,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 +246,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 +263,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 ───────────────────────────────────────────────────────
@@ -556,6 +576,10 @@ export function VoiceCanvas({
     );
   }
 
+  // ── Imperative handle (for parent "New Canvas" button) ──────────
+
+  useImperativeHandle(ref, () => ({ clear }), [clear]);
+
   // ── Render ─────────────────────────────────────────────────────
 
   return (
@@ -740,4 +764,5 @@ export function VoiceCanvas({
       </div>
     </div>
   );
-}
+});
+