@tpitre/story-ui 4.16.9 → 4.16.11

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;AAkB5C,eAAO,MAAM,qBAAqB,oCAAoC,CAAC;AAwIvE,wBAAsB,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC,CAmCrD;AAID;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAU/D;AAID;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOrD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAc1D;AAgED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAsBvD;AAID,wBAAsB,qBAAqB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,+CA0GtE"}
+{"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;AAkB5C,eAAO,MAAM,qBAAqB,oCAAoC,CAAC;AA2IvE,wBAAsB,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC,CAmCrD;AAID;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAU/D;AAID;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOrD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAc1D;AAgED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAsBvD;AAID,wBAAsB,qBAAqB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,+CA0GtE"}

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

@@ -120,15 +120,18 @@ render(<Canvas />);\`;
 
 export const Default: StoryObj = {
   render: () => {
-    // Always start with the placeholder — no localStorage restore.
-    // Code updates arrive exclusively via postMessage from the parent panel.
-    // This prevents stale code from a previous session causing errors.
-    const [code, setCode] = useState(PLACEHOLDER);
+    // Read from localStorage on mount for the initial code delivery.
+    // The parent panel writes code to localStorage just before mounting
+    // the iframe, since postMessage can't work until our listener is ready.
+    const [code, setCode] = useState(() => {
+      try {
+        const saved = localStorage.getItem('${LS_KEY}');
+        if (saved && saved.trim()) return saved;
+      } catch {}
+      return PLACEHOLDER;
+    });
 
     useEffect(() => {
-      // Clear any stale code left in localStorage from older versions
-      try { localStorage.removeItem('${LS_KEY}'); } catch {}
-
       const handler = (e: MessageEvent) => {
         if (e.origin !== window.location.origin) return;
         if (e.data?.type === 'VOICE_CANVAS_UPDATE' && typeof e.data.code === 'string') {

package/dist/templates/StoryUI/StoryUIPanel.css

@@ -1974,6 +1974,7 @@
   flex-direction: column;
   height: 100%;
   background: hsl(var(--background));
+  color: hsl(var(--foreground));
   position: relative;
 }
 

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,4FA6wBtB,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,4FAsxBtB,CAAC"}

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

@@ -71,10 +71,18 @@ export const VoiceCanvas = React.forwardRef(function VoiceCanvas({ apiBase, prov
     const iframeLoadedRef = useRef(false);
     // ── Code → iframe bridge ─────────────────────────────────────
     /**
-     * Push code to the story preview iframe via postMessage.
-     * No localStorage persistence — each session starts clean.
+     * Push code to the story preview iframe.
+     * Uses both localStorage (for initial load before message listener is ready)
+     * and postMessage (for instant updates once the iframe is running).
      */
     const sendCodeToIframe = useCallback((code) => {
+        // Write to localStorage so the iframe can read it on initial mount —
+        // postMessage alone doesn't work for the first generation because the
+        // iframe's React component hasn't attached its message listener yet.
+        try {
+            localStorage.setItem(LS_KEY, code);
+        }
+        catch { }
         if (iframeRef.current?.contentWindow && iframeLoadedRef.current) {
             iframeRef.current.contentWindow.postMessage({ type: 'VOICE_CANVAS_UPDATE', code }, IFRAME_ORIGIN);
         }
@@ -145,12 +153,20 @@ export const VoiceCanvas = React.forwardRef(function VoiceCanvas({ apiBase, prov
                     setRedoStack([]);
                 }
                 setCurrentCode(newCode);
-                sendCodeToIframe(newCode);
-                // First generation — mount the iframe
+                // First generation — mount the iframe. Write to localStorage
+                // BEFORE mounting so the iframe reads the code on initial render.
+                // For subsequent generations, sendCodeToIframe uses postMessage.
                 if (!storyReady) {
+                    try {
+                        localStorage.setItem(LS_KEY, newCode);
+                    }
+                    catch { }
                     setStoryReady(true);
                     setIframeKey(k => k + 1);
                 }
+                else {
+                    sendCodeToIframe(newCode);
+                }
                 // Track the first prompt for save title (describes the component),
                 // and the last prompt for display in the status bar.
                 if (!firstPromptRef.current) {

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

@@ -107,10 +107,15 @@ function VoiceCanvas({
   // ── Code → iframe bridge ─────────────────────────────────────
 
   /**
-   * Push code to the story preview iframe via postMessage.
-   * No localStorage persistence — each session starts clean.
+   * Push code to the story preview iframe.
+   * Uses both localStorage (for initial load before message listener is ready)
+   * and postMessage (for instant updates once the iframe is running).
    */
   const sendCodeToIframe = useCallback((code: string) => {
+    // Write to localStorage so the iframe can read it on initial mount —
+    // postMessage alone doesn't work for the first generation because the
+    // iframe's React component hasn't attached its message listener yet.
+    try { localStorage.setItem(LS_KEY, code); } catch {}
     if (iframeRef.current?.contentWindow && iframeLoadedRef.current) {
       iframeRef.current.contentWindow.postMessage(
         { type: 'VOICE_CANVAS_UPDATE', code },
@@ -195,12 +200,16 @@ function VoiceCanvas({
         }
 
         setCurrentCode(newCode);
-        sendCodeToIframe(newCode);
 
-        // First generation — mount the iframe
+        // First generation — mount the iframe. Write to localStorage
+        // BEFORE mounting so the iframe reads the code on initial render.
+        // For subsequent generations, sendCodeToIframe uses postMessage.
         if (!storyReady) {
+          try { localStorage.setItem(LS_KEY, newCode); } catch {}
           setStoryReady(true);
           setIframeKey(k => k + 1);
+        } else {
+          sendCodeToIframe(newCode);
         }
 
         // Track the first prompt for save title (describes the component),

package/package.json

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

package/templates/StoryUI/StoryUIPanel.css

@@ -1974,6 +1974,7 @@
   flex-direction: column;
   height: 100%;
   background: hsl(var(--background));
+  color: hsl(var(--foreground));
   position: relative;
 }
 

package/templates/StoryUI/voice/VoiceCanvas.tsx

@@ -107,10 +107,15 @@ function VoiceCanvas({
   // ── Code → iframe bridge ─────────────────────────────────────
 
   /**
-   * Push code to the story preview iframe via postMessage.
-   * No localStorage persistence — each session starts clean.
+   * Push code to the story preview iframe.
+   * Uses both localStorage (for initial load before message listener is ready)
+   * and postMessage (for instant updates once the iframe is running).
    */
   const sendCodeToIframe = useCallback((code: string) => {
+    // Write to localStorage so the iframe can read it on initial mount —
+    // postMessage alone doesn't work for the first generation because the
+    // iframe's React component hasn't attached its message listener yet.
+    try { localStorage.setItem(LS_KEY, code); } catch {}
     if (iframeRef.current?.contentWindow && iframeLoadedRef.current) {
       iframeRef.current.contentWindow.postMessage(
         { type: 'VOICE_CANVAS_UPDATE', code },
@@ -195,12 +200,16 @@ function VoiceCanvas({
         }
 
         setCurrentCode(newCode);
-        sendCodeToIframe(newCode);
 
-        // First generation — mount the iframe
+        // First generation — mount the iframe. Write to localStorage
+        // BEFORE mounting so the iframe reads the code on initial render.
+        // For subsequent generations, sendCodeToIframe uses postMessage.
         if (!storyReady) {
+          try { localStorage.setItem(LS_KEY, newCode); } catch {}
           setStoryReady(true);
           setIframeKey(k => k + 1);
+        } else {
+          sendCodeToIframe(newCode);
         }
 
         // Track the first prompt for save title (describes the component),