sunpeak 0.13.6 → 0.13.7

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

@@ -7527,8 +7527,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`;
@@ -7650,12 +7649,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
                                         }
                                       )
@@ -14053,10 +14046,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
     });
@@ -14191,9 +14186,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.
@@ -14252,7 +14257,6 @@ class McpAppHost {
     }
     await this.bridge.close();
     this._initialized = false;
-    this._contentWindow = null;
   }
   /**
    * Debug: Inject state directly into the app's useAppState hook.
@@ -14309,6 +14313,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;
@@ -14363,6 +14372,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);
@@ -14387,19 +14413,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>
@@ -14417,14 +14431,13 @@ function IframeResource({
   csp,
   className,
   style,
-  onDisplayModeReady,
   debugInjectState
 }) {
   const iframeRef = useRef(null);
   const hostRef = useRef(null);
-  const prevDisplayModeRef = useRef(hostContext?.displayMode);
-  const onDisplayModeReadyRef = useRef(onDisplayModeReady);
-  onDisplayModeReadyRef.current = onDisplayModeReady;
+  const [readyDisplayMode, setReadyDisplayMode] = useState(
+    hostContext?.displayMode
+  );
   const resourceUrl = src ?? scriptSrc;
   const hasReceivedSizeRef = useRef(false);
   const host = useMemo(
@@ -14437,7 +14450,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
     []
@@ -14454,22 +14468,13 @@ function IframeResource({
     [host]
   );
   const handleLoad = useCallback(() => {
-    if (toolInput) host.sendToolInput(toolInput);
-    if (toolResult) host.sendToolResult(toolResult);
-  }, [host, toolInput, toolResult]);
+    if (src && iframeRef.current) {
+      injectPaintFence(iframeRef.current);
+    }
+  }, [src]);
   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]);
   useEffect(() => {
@@ -14505,6 +14510,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);
@@ -14528,6 +14534,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",
@@ -14551,6 +14561,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",
@@ -14676,12 +14688,6 @@ function ChatGPTSimulator({
       _setDisplayMode(mode);
     }
   };
-  const [readyDisplayMode, setReadyDisplayMode] = useState(
-    urlParams.displayMode ?? DEFAULT_DISPLAY_MODE
-  );
-  const handleDisplayModeReady = useCallback((mode) => {
-    setReadyDisplayMode(mode);
-  }, []);
   const hostContext = useMemo(
     () => ({
       theme,
@@ -14772,11 +14778,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__ */ jsx(
@@ -14790,7 +14792,6 @@ function ChatGPTSimulator({
           onDisplayModeChange: handleDisplayModeChange,
           onUpdateModelContext: handleUpdateModelContext
         },
-        onDisplayModeReady: handleDisplayModeReady,
         debugInjectState: modelContext,
         className: "h-full w-full"
       }
@@ -14808,7 +14809,6 @@ function ChatGPTSimulator({
           onDisplayModeChange: handleDisplayModeChange,
           onUpdateModelContext: handleUpdateModelContext
         },
-        onDisplayModeReady: handleDisplayModeReady,
         debugInjectState: modelContext,
         className: "h-full w-full"
       }
@@ -15034,7 +15034,6 @@ function ChatGPTSimulator({
           appName,
           appIcon,
           userMessage: selectedSim?.userMessage,
-          isTransitioning,
           children: content
         },
         selectedSimulationName
@@ -15095,6 +15094,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   buildSimulations,
   createResourceExports,
   createSimulatorUrl,
+  extractResourceCSP,
   extractResourceKey,
   extractSimulationKey,
   extractSimulationName,
@@ -15114,7 +15114,8 @@ export {
   ThemeProvider as T,
   createSimulatorUrl as a,
   clsx as c,
+  extractResourceCSP as e,
   index as i,
   useThemeContext as u
 };
-//# sourceMappingURL=index-CkEAx7FS.js.map
+//# sourceMappingURL=index-DqOCq5r8.js.map