sunpeak 0.13.7 → 0.13.9

package/dist/{index-DqOCq5r8.js → index-D6Z9ZDNT.js}

@@ -7527,7 +7527,8 @@ function Conversation({
   onRequestDisplayMode,
   appName = "Sunpeak",
   appIcon,
-  userMessage = "What have you got for me today?"
+  userMessage = "What have you got for me today?",
+  isTransitioning = false
 }) {
   const isDesktop = platform2 === "desktop";
   const containerWidth = screenWidth === "full" ? "100%" : `${SCREEN_WIDTHS[screenWidth]}px`;
@@ -7649,6 +7650,12 @@ function Conversation({
                                         "div",
                                         {
                                           className: isPip ? "h-full w-full max-w-full overflow-auto bg-white dark:bg-[#212121]" : isFullscreen ? "h-full w-full max-w-full overflow-auto bg-surface" : "h-full w-full max-w-full bg-transparent",
+                                          style: {
+                                            opacity: isTransitioning ? 0 : 1,
+                                            // Only animate the reveal — the hide must be instant
+                                            // to prevent old content from being visible in the new layout.
+                                            transition: isTransitioning ? "none" : "opacity 100ms"
+                                          },
                                           children
                                         }
                                       )
@@ -14431,13 +14438,11 @@ function IframeResource({
   csp,
   className,
   style,
+  onDisplayModeReady,
   debugInjectState
 }) {
   const iframeRef = useRef(null);
   const hostRef = useRef(null);
-  const [readyDisplayMode, setReadyDisplayMode] = useState(
-    hostContext?.displayMode
-  );
   const resourceUrl = src ?? scriptSrc;
   const hasReceivedSizeRef = useRef(false);
   const host = useMemo(
@@ -14451,7 +14456,7 @@ function IframeResource({
           iframeRef.current.style.height = `${params.height}px`;
         }
       },
-      onDisplayModeReady: (mode) => setReadyDisplayMode(mode)
+      onDisplayModeReady: (mode) => onDisplayModeReady?.(mode)
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -14510,7 +14515,6 @@ function IframeResource({
     const theme = hostContext?.theme ?? "dark";
     return generateScriptHtml(absoluteScriptSrc, theme, cspPolicy);
   }, [scriptSrc, isValidUrl, csp, hostContext?.theme]);
-  const isTransitioning = hostContext?.displayMode !== readyDisplayMode;
   if (src) {
     if (!isValidUrl) {
       console.error("[IframeResource] URL not allowed:", src);
@@ -14534,10 +14538,6 @@ function IframeResource({
           // Start with minHeight to prevent collapse, but allow auto-resize to set actual height.
           // Don't use height: 100% as it requires explicit height in parent chain.
           minHeight: "200px",
-          // Hide during display mode transitions; reveal with a short fade once
-          // the iframe has committed its DOM for the new mode.
-          opacity: isTransitioning ? 0 : 1,
-          transition: isTransitioning ? "none" : "opacity 100ms",
           ...style
         },
         title: "Resource Preview",
@@ -14561,8 +14561,6 @@ function IframeResource({
         // Start with minHeight to prevent collapse, but allow auto-resize to set actual height.
         // Don't use height: 100% as it requires explicit height in parent chain.
         minHeight: "200px",
-        opacity: isTransitioning ? 0 : 1,
-        transition: isTransitioning ? "none" : "opacity 100ms",
         ...style
       },
       title: "Resource Preview",
@@ -14688,6 +14686,12 @@ function ChatGPTSimulator({
       _setDisplayMode(mode);
     }
   };
+  const [readyDisplayMode, setReadyDisplayMode] = useState(
+    urlParams.displayMode ?? DEFAULT_DISPLAY_MODE
+  );
+  const handleDisplayModeReady = useCallback((mode) => {
+    setReadyDisplayMode(mode);
+  }, []);
   const hostContext = useMemo(
     () => ({
       theme,
@@ -14779,6 +14783,8 @@ function ChatGPTSimulator({
   const resourceUrl = selectedSim?.resourceUrl;
   const resourceScript = selectedSim?.resourceScript;
   const csp = selectedSim ? extractResourceCSP(selectedSim.resource) : void 0;
+  const hasIframeContent = !!(resourceUrl || resourceScript);
+  const isTransitioning = hasIframeContent && displayMode !== readyDisplayMode;
   let content;
   if (resourceUrl) {
     content = /* @__PURE__ */ jsx(
@@ -14792,6 +14798,7 @@ function ChatGPTSimulator({
           onDisplayModeChange: handleDisplayModeChange,
           onUpdateModelContext: handleUpdateModelContext
         },
+        onDisplayModeReady: handleDisplayModeReady,
         debugInjectState: modelContext,
         className: "h-full w-full"
       }
@@ -14809,6 +14816,7 @@ function ChatGPTSimulator({
           onDisplayModeChange: handleDisplayModeChange,
           onUpdateModelContext: handleUpdateModelContext
         },
+        onDisplayModeReady: handleDisplayModeReady,
         debugInjectState: modelContext,
         className: "h-full w-full"
       }
@@ -15034,6 +15042,7 @@ function ChatGPTSimulator({
           appName,
           appIcon,
           userMessage: selectedSim?.userMessage,
+          isTransitioning,
           children: content
         },
         selectedSimulationName
@@ -15118,4 +15127,4 @@ export {
   index as i,
   useThemeContext as u
 };
-//# sourceMappingURL=index-DqOCq5r8.js.map
+//# sourceMappingURL=index-D6Z9ZDNT.js.map