sunpeak 0.13.6 → 0.13.8

package/dist/chatgpt/conversation.d.ts

@@ -11,12 +11,6 @@ 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 flashing
-     * stale content in the new layout.
-     */
-    isTransitioning?: boolean;
 }
 /**
  * Conversation layout that renders children (iframe) at a stable tree position.
@@ -31,5 +25,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, isTransitioning, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Conversation({ children, screenWidth, displayMode, platform, onRequestDisplayMode, appName, appIcon, userMessage, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -20,6 +20,12 @@ export interface ResourceCSP {
     /** Domains allowed for scripts, images, styles, fonts */
     resourceDomains?: string[];
 }
+/**
+ * Extract CSP configuration from a resource's _meta.ui.csp field.
+ */
+export declare function extractResourceCSP(resource: {
+    _meta?: unknown;
+}): ResourceCSP | undefined;
 /**
  * Validates a CSP source entry is a safe origin URL (scheme + host + optional port).
  * Rejects wildcards, CSP keywords, and whitespace that could inject extra directives.
@@ -61,13 +67,6 @@ 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.
@@ -86,7 +85,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, onDisplayModeReady, debugInjectState, }: IframeResourceProps): import("react/jsx-runtime").JSX.Element;
+export declare function IframeResource({ src, scriptSrc, hostContext, toolInput, toolResult, hostOptions, csp, className, style, 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-B_In_BWg.cjs");
+const chatgpt_index = require("../index-B9MMk69u.cjs");
 const discovery = require("../discovery-CRR3SlyI.cjs");
 exports.ChatGPTSimulator = chatgpt_index.ChatGPTSimulator;
 exports.IframeResource = chatgpt_index.IframeResource;
@@ -8,6 +8,7 @@ exports.McpAppHost = chatgpt_index.McpAppHost;
 exports.SCREEN_WIDTHS = chatgpt_index.SCREEN_WIDTHS;
 exports.ThemeProvider = chatgpt_index.ThemeProvider;
 exports.createSimulatorUrl = chatgpt_index.createSimulatorUrl;
+exports.extractResourceCSP = chatgpt_index.extractResourceCSP;
 exports.useThemeContext = chatgpt_index.useThemeContext;
 exports.buildDevSimulations = discovery.buildDevSimulations;
 exports.buildResourceMap = discovery.buildResourceMap;

package/dist/chatgpt/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chatgpt/index.d.ts

@@ -27,7 +27,7 @@ export type { ScreenWidth, SimulatorConfig } from './chatgpt-simulator-types';
 export { SCREEN_WIDTHS } from './chatgpt-simulator-types';
 export { McpAppHost } from './mcp-app-host';
 export type { McpAppHostOptions } from './mcp-app-host';
-export { IframeResource } from './iframe-resource';
+export { IframeResource, extractResourceCSP } from './iframe-resource';
 export type { ResourceCSP } from './iframe-resource';
 export * from './theme-provider';
 export { createSimulatorUrl } from './simulator-url';

package/dist/chatgpt/index.js

@@ -1,5 +1,5 @@
-import { C, I, M, S, T, a, u } from "../index-CkEAx7FS.js";
-import { a as a2, b, d, c, e, f, g, h, i, j, k, l, t } from "../discovery-COZUnY6a.js";
+import { C, I, M, S, T, a, e, u } from "../index-DqOCq5r8.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,
   I as IframeResource,
@@ -11,7 +11,8 @@ export {
   d as buildSimulations,
   c as createResourceExports,
   a as createSimulatorUrl,
-  e as extractResourceKey,
+  e as extractResourceCSP,
+  e2 as extractResourceKey,
   f as extractSimulationKey,
   g as extractSimulationName,
   h as findResourceDirs,

package/dist/chatgpt/mcp-app-host.d.ts

@@ -12,6 +12,8 @@ export interface McpAppHostOptions {
     }) => void;
     onLog?: (params: LoggingMessageNotification['params']) => void;
     onCallTool?: (params: CallToolRequest['params']) => CallToolResult | Promise<CallToolResult>;
+    /** Called after the iframe confirms rendering in a new display mode (paint fence resolved). */
+    onDisplayModeReady?: (mode: string) => void;
 }
 /**
  * MCP Apps host for the Sunpeak simulator.
@@ -25,6 +27,7 @@ export declare class McpAppHost {
     private _contentWindow;
     private _fenceId;
     private _fenceCleanup;
+    private _prevDisplayMode;
     private _pendingToolInput;
     private _pendingToolResult;
     constructor(options?: McpAppHostOptions);
@@ -46,6 +49,8 @@ export declare class McpAppHost {
     waitForPaint(): Promise<void>;
     /**
      * Update the host context and notify the connected app.
+     * Automatically detects display mode changes and waits for the iframe
+     * to commit its DOM before firing onDisplayModeReady.
      */
     setHostContext(context: McpUiHostContext): void;
     /**

package/dist/{index-B_In_BWg.cjs → index-B9MMk69u.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-B_In_BWg.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-B9MMk69u.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,8 +7545,7 @@ function Conversation({
   onRequestDisplayMode,
   appName = "Sunpeak",
   appIcon,
-  userMessage = "What have you got for me today?",
-  isTransitioning = false
+  userMessage = "What have you got for me today?"
 }) {
   const isDesktop = platform2 === "desktop";
   const containerWidth = screenWidth === "full" ? "100%" : `${SCREEN_WIDTHS[screenWidth]}px`;
@@ -7668,12 +7667,6 @@ 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
                                         }
                                       )
@@ -14071,10 +14064,12 @@ class McpAppHost {
   _contentWindow = null;
   _fenceId = 0;
   _fenceCleanup = null;
+  _prevDisplayMode;
   _pendingToolInput = null;
   _pendingToolResult = null;
   constructor(options = {}) {
     this.options = options;
+    this._prevDisplayMode = options.hostContext?.displayMode;
     this.bridge = new j_(null, HOST_INFO, HOST_CAPABILITIES, {
       hostContext: options.hostContext
     });
@@ -14209,9 +14204,19 @@ class McpAppHost {
   }
   /**
    * Update the host context and notify the connected app.
+   * Automatically detects display mode changes and waits for the iframe
+   * to commit its DOM before firing onDisplayModeReady.
    */
   setHostContext(context) {
     this.bridge.setHostContext(context);
+    const currentMode = context.displayMode;
+    if (currentMode && currentMode !== this._prevDisplayMode) {
+      this._prevDisplayMode = currentMode;
+      const mode = currentMode;
+      this.waitForPaint().then(() => {
+        this.options.onDisplayModeReady?.(mode);
+      });
+    }
   }
   /**
    * Send tool input to the app.
@@ -14270,7 +14275,6 @@ class McpAppHost {
     }
     await this.bridge.close();
     this._initialized = false;
-    this._contentWindow = null;
   }
   /**
    * Debug: Inject state directly into the app's useAppState hook.
@@ -14327,6 +14331,11 @@ function isAllowedUrl(src) {
     return false;
   }
 }
+function extractResourceCSP(resource) {
+  const meta = resource._meta;
+  const ui2 = meta?.ui;
+  return ui2?.csp;
+}
 const SDK_RESOURCE_DOMAINS = ["https://cdn.openai.com"];
 function isValidCspSource(source) {
   if (!source || /[\s;,']/.test(source) || source === "*") return false;
@@ -14381,6 +14390,23 @@ function generateCSP(csp, scriptSrc) {
   directives.push(`media-src ${resourceList}`);
   return directives.join("; ");
 }
+const PAINT_FENCE_SCRIPT = `window.addEventListener("message",function(e){
+if(e.data&&e.data.method==="sunpeak/fence"){
+var fid=e.data.params&&e.data.params.fenceId;
+requestAnimationFrame(function(){
+e.source.postMessage({jsonrpc:"2.0",method:"sunpeak/fence-ack",params:{fenceId:fid}},"*");
+});}});`;
+function injectPaintFence(iframe) {
+  try {
+    const doc = iframe.contentDocument;
+    if (!doc || doc.querySelector("script[data-sunpeak-fence]")) return;
+    const script = doc.createElement("script");
+    script.setAttribute("data-sunpeak-fence", "");
+    script.textContent = PAINT_FENCE_SCRIPT;
+    doc.head.appendChild(script);
+  } catch {
+  }
+}
 function generateScriptHtml(scriptSrc, theme, cspPolicy) {
   const safeScriptSrc = escapeHtml(scriptSrc);
   const safeCsp = escapeHtml(cspPolicy);
@@ -14405,19 +14431,7 @@ function generateScriptHtml(scriptSrc, theme, cspPolicy) {
       color-scheme: dark light;
     }
   </style>
-  <script>
-    // Paint fence responder — allows the host to wait for this iframe to
-    // process pending messages and commit DOM updates before revealing content.
-    // Formatted as JSON-RPC 2.0 notifications to avoid PostMessageTransport parse errors.
-    window.addEventListener("message",function(e){
-      if(e.data&&e.data.method==="sunpeak/fence"){
-        var fid=e.data.params&&e.data.params.fenceId;
-        requestAnimationFrame(function(){
-          e.source.postMessage({jsonrpc:"2.0",method:"sunpeak/fence-ack",params:{fenceId:fid}},"*");
-        });
-      }
-    });
-  <\/script>
+  <script>${PAINT_FENCE_SCRIPT}<\/script>
 </head>
 <body>
   <div id="root"></div>
@@ -14435,14 +14449,13 @@ function IframeResource({
   csp,
   className,
   style,
-  onDisplayModeReady,
   debugInjectState
 }) {
   const iframeRef = React.useRef(null);
   const hostRef = React.useRef(null);
-  const prevDisplayModeRef = React.useRef(hostContext?.displayMode);
-  const onDisplayModeReadyRef = React.useRef(onDisplayModeReady);
-  onDisplayModeReadyRef.current = onDisplayModeReady;
+  const [readyDisplayMode, setReadyDisplayMode] = React.useState(
+    hostContext?.displayMode
+  );
   const resourceUrl = src ?? scriptSrc;
   const hasReceivedSizeRef = React.useRef(false);
   const host = React.useMemo(
@@ -14455,7 +14468,8 @@ function IframeResource({
           hasReceivedSizeRef.current = true;
           iframeRef.current.style.height = `${params.height}px`;
         }
-      }
+      },
+      onDisplayModeReady: (mode) => setReadyDisplayMode(mode)
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -14472,22 +14486,13 @@ function IframeResource({
     [host]
   );
   const handleLoad = React.useCallback(() => {
-    if (toolInput) host.sendToolInput(toolInput);
-    if (toolResult) host.sendToolResult(toolResult);
-  }, [host, toolInput, toolResult]);
+    if (src && iframeRef.current) {
+      injectPaintFence(iframeRef.current);
+    }
+  }, [src]);
   React.useEffect(() => {
     if (hostContext) {
       host.setHostContext(hostContext);
-      const currentMode = hostContext.displayMode;
-      if (currentMode !== prevDisplayModeRef.current) {
-        prevDisplayModeRef.current = currentMode;
-        if (currentMode) {
-          const mode = currentMode;
-          host.waitForPaint().then(() => {
-            onDisplayModeReadyRef.current?.(mode);
-          });
-        }
-      }
     }
   }, [host, hostContext]);
   React.useEffect(() => {
@@ -14523,6 +14528,7 @@ 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);
@@ -14546,6 +14552,10 @@ 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",
@@ -14569,6 +14579,8 @@ 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",
@@ -14694,12 +14706,6 @@ 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,
@@ -14790,11 +14796,7 @@ function ChatGPTSimulator({
   }, [toolResult, modelContext]);
   const resourceUrl = selectedSim?.resourceUrl;
   const resourceScript = selectedSim?.resourceScript;
-  const resourceMeta = selectedSim?.resource._meta;
-  const resourceUi = resourceMeta?.ui;
-  const csp = resourceUi?.csp;
-  const hasIframeContent = !!(resourceUrl || resourceScript);
-  const isTransitioning = hasIframeContent && displayMode !== readyDisplayMode;
+  const csp = selectedSim ? extractResourceCSP(selectedSim.resource) : void 0;
   let content;
   if (resourceUrl) {
     content = /* @__PURE__ */ jsxRuntime.jsx(
@@ -14808,7 +14810,6 @@ function ChatGPTSimulator({
           onDisplayModeChange: handleDisplayModeChange,
           onUpdateModelContext: handleUpdateModelContext
         },
-        onDisplayModeReady: handleDisplayModeReady,
         debugInjectState: modelContext,
         className: "h-full w-full"
       }
@@ -14826,7 +14827,6 @@ function ChatGPTSimulator({
           onDisplayModeChange: handleDisplayModeChange,
           onUpdateModelContext: handleUpdateModelContext
         },
-        onDisplayModeReady: handleDisplayModeReady,
         debugInjectState: modelContext,
         className: "h-full w-full"
       }
@@ -15052,7 +15052,6 @@ function ChatGPTSimulator({
           appName,
           appIcon,
           userMessage: selectedSim?.userMessage,
-          isTransitioning,
           children: content
         },
         selectedSimulationName
@@ -15113,6 +15112,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   buildSimulations: discovery.buildSimulations,
   createResourceExports: discovery.createResourceExports,
   createSimulatorUrl,
+  extractResourceCSP,
   extractResourceKey: discovery.extractResourceKey,
   extractSimulationKey: discovery.extractSimulationKey,
   extractSimulationName: discovery.extractSimulationName,
@@ -15131,6 +15131,7 @@ exports.SCREEN_WIDTHS = SCREEN_WIDTHS;
 exports.ThemeProvider = ThemeProvider;
 exports.clsx = clsx;
 exports.createSimulatorUrl = createSimulatorUrl;
+exports.extractResourceCSP = extractResourceCSP;
 exports.index = index;
 exports.useThemeContext = useThemeContext;
-//# sourceMappingURL=index-B_In_BWg.cjs.map
+//# sourceMappingURL=index-B9MMk69u.cjs.map