sunpeak 0.13.8 → 0.13.9

package/dist/chatgpt/conversation.d.ts

@@ -11,6 +11,12 @@ interface ConversationProps {
     appName?: string;
     appIcon?: string;
     userMessage?: string;
+    /**
+     * Whether the content is transitioning between display modes.
+     * When true, the content area is hidden (opacity 0) to prevent the pip
+     * border from flashing at a stale height before the iframe resizes.
+     */
+    isTransitioning?: boolean;
 }
 /**
  * Conversation layout that renders children (iframe) at a stable tree position.
@@ -25,5 +31,5 @@ interface ConversationProps {
  * - **fullscreen**: content wrapper becomes `position: fixed` covering the viewport;
  *   fullscreen chrome (header/footer) rendered as a separate fixed overlay
  */
-export declare function Conversation({ children, screenWidth, displayMode, platform, onRequestDisplayMode, appName, appIcon, userMessage, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Conversation({ children, screenWidth, displayMode, platform, onRequestDisplayMode, appName, appIcon, userMessage, isTransitioning, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/chatgpt/iframe-resource.d.ts

@@ -67,6 +67,13 @@ interface IframeResourceProps {
     className?: string;
     /** Optional style for the iframe */
     style?: React.CSSProperties;
+    /**
+     * Called after the iframe has rendered following a display mode change.
+     * The callback receives the display mode that was confirmed.
+     * Used by the simulator to hide content during transitions and only
+     * reveal it once the app has committed its DOM for the new mode.
+     */
+    onDisplayModeReady?: (mode: string) => void;
     /**
      * Debug: State to inject directly into the app's useAppState hook.
      * This bypasses the normal MCP Apps protocol and is for simulator testing.
@@ -85,7 +92,7 @@ interface IframeResourceProps {
  * connects via PostMessageTransport to window.parent. The parent side uses
  * McpAppHost (wrapping AppBridge) to communicate.
  */
-export declare function IframeResource({ src, scriptSrc, hostContext, toolInput, toolResult, hostOptions, csp, className, style, debugInjectState, }: IframeResourceProps): import("react/jsx-runtime").JSX.Element;
+export declare function IframeResource({ src, scriptSrc, hostContext, toolInput, toolResult, hostOptions, csp, className, style, onDisplayModeReady, debugInjectState, }: IframeResourceProps): import("react/jsx-runtime").JSX.Element;
 export declare const _testExports: {
     escapeHtml: typeof escapeHtml;
     isAllowedUrl: typeof isAllowedUrl;

package/dist/chatgpt/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const chatgpt_index = require("../index-B9MMk69u.cjs");
+const chatgpt_index = require("../index-BhfrUoaZ.cjs");
 const discovery = require("../discovery-CRR3SlyI.cjs");
 exports.ChatGPTSimulator = chatgpt_index.ChatGPTSimulator;
 exports.IframeResource = chatgpt_index.IframeResource;

package/dist/chatgpt/index.js

@@ -1,4 +1,4 @@
-import { C, I, M, S, T, a, e, u } from "../index-DqOCq5r8.js";
+import { C, I, M, S, T, a, e, u } from "../index-D6Z9ZDNT.js";
 import { a as a2, b, d, c, e as e2, f, g, h, i, j, k, l, t } from "../discovery-COZUnY6a.js";
 export {
   C as ChatGPTSimulator,

package/dist/{index-B9MMk69u.cjs → index-BhfrUoaZ.cjs}

@@ -5442,7 +5442,7 @@ const useEscCloseStack = (listening, cb) => {
   }, [id, listening, latestCallback]);
 };
 const __vite_import_meta_env__ = { "DEV": false, "MODE": "production" };
-const META_ENV = typeof { url: typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("index-B9MMk69u.cjs", document.baseURI).href } !== "undefined" ? __vite_import_meta_env__ : void 0;
+const META_ENV = typeof { url: typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("index-BhfrUoaZ.cjs", document.baseURI).href } !== "undefined" ? __vite_import_meta_env__ : void 0;
 const NODE_ENV = typeof process !== "undefined" && process.env?.NODE_ENV ? process.env?.NODE_ENV : "production";
 const isDev = NODE_ENV === "development" || !!META_ENV?.DEV;
 const isJSDomLike = typeof navigator !== "undefined" && /(jsdom|happy-dom)/i.test(navigator.userAgent) || typeof globalThis.happyDOM === "object";
@@ -7545,7 +7545,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`;
@@ -7667,6 +7668,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
                                         }
                                       )
@@ -14449,13 +14456,11 @@ function IframeResource({
   csp,
   className,
   style,
+  onDisplayModeReady,
   debugInjectState
 }) {
   const iframeRef = React.useRef(null);
   const hostRef = React.useRef(null);
-  const [readyDisplayMode, setReadyDisplayMode] = React.useState(
-    hostContext?.displayMode
-  );
   const resourceUrl = src ?? scriptSrc;
   const hasReceivedSizeRef = React.useRef(false);
   const host = React.useMemo(
@@ -14469,7 +14474,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
     []
@@ -14528,7 +14533,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);
@@ -14552,10 +14556,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",
@@ -14579,8 +14579,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",
@@ -14706,6 +14704,12 @@ function ChatGPTSimulator({
       _setDisplayMode(mode);
     }
   };
+  const [readyDisplayMode, setReadyDisplayMode] = React.useState(
+    urlParams.displayMode ?? DEFAULT_DISPLAY_MODE
+  );
+  const handleDisplayModeReady = React.useCallback((mode) => {
+    setReadyDisplayMode(mode);
+  }, []);
   const hostContext = React.useMemo(
     () => ({
       theme,
@@ -14797,6 +14801,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__ */ jsxRuntime.jsx(
@@ -14810,6 +14816,7 @@ function ChatGPTSimulator({
           onDisplayModeChange: handleDisplayModeChange,
           onUpdateModelContext: handleUpdateModelContext
         },
+        onDisplayModeReady: handleDisplayModeReady,
         debugInjectState: modelContext,
         className: "h-full w-full"
       }
@@ -14827,6 +14834,7 @@ function ChatGPTSimulator({
           onDisplayModeChange: handleDisplayModeChange,
           onUpdateModelContext: handleUpdateModelContext
         },
+        onDisplayModeReady: handleDisplayModeReady,
         debugInjectState: modelContext,
         className: "h-full w-full"
       }
@@ -15052,6 +15060,7 @@ function ChatGPTSimulator({
           appName,
           appIcon,
           userMessage: selectedSim?.userMessage,
+          isTransitioning,
           children: content
         },
         selectedSimulationName
@@ -15134,4 +15143,4 @@ exports.createSimulatorUrl = createSimulatorUrl;
 exports.extractResourceCSP = extractResourceCSP;
 exports.index = index;
 exports.useThemeContext = useThemeContext;
-//# sourceMappingURL=index-B9MMk69u.cjs.map
+//# sourceMappingURL=index-BhfrUoaZ.cjs.map