sunpeak 0.16.21 → 0.16.27

package/bin/lib/live/utils.mjs

@@ -0,0 +1,70 @@
+import { readFileSync, rmSync } from 'fs';
+import { join } from 'path';
+import { createRequire } from 'module';
+
+/**
+ * Recursively remove a directory (rm -rf equivalent).
+ */
+export function rimrafSync(dir) {
+  rmSync(dir, { recursive: true, force: true });
+}
+
+/**
+ * Browser launch args that bypass Cloudflare/ChatGPT bot detection.
+ * Used in browser-auth, global-setup, and live-config.
+ */
+export const ANTI_BOT_ARGS = [
+  '--disable-blink-features=AutomationControlled',
+  '--no-first-run',
+  '--no-default-browser-check',
+];
+
+/**
+ * Real Chrome user agent string to avoid Cloudflare challenges.
+ * Update periodically to match the Playwright-bundled Chromium version.
+ */
+export const CHROME_USER_AGENT =
+  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36';
+
+/**
+ * Resolve @playwright/test from the user's project via CJS require.
+ * Use for non-test code (global-setup, config) where duplicate instances don't matter.
+ */
+export function resolvePlaywright(projectRoot) {
+  const require = createRequire(join(projectRoot, 'package.json'));
+  return require('@playwright/test');
+}
+
+/**
+ * Resolve @playwright/test ESM module from the user's project.
+ * Use for test fixtures that call test.extend() — avoids CJS/ESM duplicate module issues.
+ * Cached: safe to call multiple times.
+ */
+let _cachedPlaywright = null;
+let _cachedProjectRoot = null;
+export async function resolvePlaywrightESM(projectRoot) {
+  if (_cachedPlaywright && _cachedProjectRoot === projectRoot) return _cachedPlaywright;
+  const require = createRequire(join(projectRoot, 'package.json'));
+  const playwrightPath = require.resolve('@playwright/test');
+  const mod = await import(playwrightPath);
+  // Dynamic import() of @playwright/test (CJS) puts the test function at mod.default.
+  // The test function doubles as the module namespace — test.extend, test.expect, etc.
+  // Normalize so callers can destructure { test, expect } directly.
+  const pw = mod.default || mod;
+  _cachedPlaywright = { test: pw, expect: pw.expect };
+  _cachedProjectRoot = projectRoot;
+  return _cachedPlaywright;
+}
+
+/**
+ * Read the app name from the project's package.json.
+ * Cached: safe to call multiple times.
+ */
+let _cachedAppName = null;
+let _cachedAppNameRoot = null;
+export function getAppName(projectRoot) {
+  if (_cachedAppName && _cachedAppNameRoot === projectRoot) return _cachedAppName;
+  _cachedAppName = JSON.parse(readFileSync(join(projectRoot, 'package.json'), 'utf-8')).name;
+  _cachedAppNameRoot = projectRoot;
+  return _cachedAppName;
+}

package/bin/lib/sandbox-server.mjs

@@ -0,0 +1,304 @@
+/**
+ * Separate-origin sandbox server for the simulator's double-iframe architecture.
+ *
+ * Real hosts (ChatGPT, Claude) run the sandbox proxy iframe on a separate origin
+ * (e.g., web-sandbox.oaiusercontent.com). This server replicates that by serving
+ * the proxy HTML on a different localhost port, giving real origin isolation.
+ *
+ * This means:
+ *   - window.top.location access from inside the iframe is blocked (cross-origin)
+ *   - document.referrer is empty (cross-origin navigation)
+ *   - The iframe sandbox attribute behaves identically to production
+ *
+ * The server is started by `sunpeak dev` and its URL is injected into the Simulator
+ * via `__SUNPEAK_SANDBOX_URL__`.
+ *
+ * NOTE: The proxy HTML and mock openai script are duplicated from sandbox-proxy.ts
+ * and mock-openai-runtime.ts because this file runs in Node.js at dev time and
+ * cannot import TypeScript modules. Keep them in sync when making changes.
+ */
+import { createServer } from 'http';
+import { getPort } from './get-port.mjs';
+
+/**
+ * Start the sandbox proxy server on a separate port.
+ *
+ * @param {Object} options
+ * @param {number} [options.preferredPort=24680] - Port to try first
+ * @returns {Promise<{ url: string, port: number, close: () => Promise<void> }>}
+ */
+export async function startSandboxServer({ preferredPort = 24680 } = {}) {
+  const port = await getPort(preferredPort);
+
+  const server = createServer((req, res) => {
+    const url = new URL(req.url, `http://localhost:${port}`);
+
+    if (url.pathname === '/proxy') {
+      const theme = url.searchParams.get('theme') || 'dark';
+      const platform = url.searchParams.get('platform') || '';
+      const html = generateProxyHtml(theme, platform);
+
+      res.writeHead(200, {
+        'Content-Type': 'text/html; charset=utf-8',
+        'Cache-Control': 'no-cache',
+        // No CORS headers needed — iframe src loads don't check CORS.
+        // PostMessage works cross-origin by design.
+      });
+      res.end(html);
+      return;
+    }
+
+    // Health check
+    if (url.pathname === '/health') {
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end('{"status":"ok"}');
+      return;
+    }
+
+    res.writeHead(404);
+    res.end('Not found');
+  });
+
+  await new Promise((resolve, reject) => {
+    server.listen(port, () => resolve());
+    server.on('error', reject);
+  });
+
+  const sandboxUrl = `http://localhost:${port}`;
+
+  return {
+    url: sandboxUrl,
+    port,
+    close: () => new Promise((resolve) => server.close(resolve)),
+  };
+}
+
+/**
+ * Generate the sandbox proxy HTML.
+ *
+ * This is the same proxy logic as sandbox-proxy.ts but as a plain string
+ * (no TypeScript imports needed at dev server runtime). The proxy:
+ *   1. Signals readiness via `ui/notifications/sandbox-proxy-ready`
+ *   2. Listens for resource content or URL to load into the inner iframe
+ *   3. Relays all PostMessage between parent and inner iframe
+ *   4. Optionally injects platform runtime scripts (e.g., mock window.openai)
+ */
+function generateProxyHtml(theme, platform) {
+  const colorScheme = theme === 'light' ? 'light' : 'dark';
+
+  // Platform-specific runtime script (injected into the inner iframe)
+  let platformScript = 'null';
+  if (platform === 'chatgpt') {
+    platformScript = JSON.stringify(MOCK_OPENAI_SCRIPT);
+  }
+
+  return `<!DOCTYPE html>
+<html style="color-scheme:${colorScheme}">
+<head>
+<meta name="color-scheme" content="${colorScheme}" />
+<style>
+html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
+iframe { border: none; width: 100%; height: 100%; display: block; }
+</style>
+</head>
+<body>
+<script>
+(function() {
+  var innerFrame = null;
+  var innerWindow = null;
+  var platformScript = ${platformScript};
+
+  // Relay messages between parent (host) and inner iframe (app)
+  window.addEventListener('message', function(event) {
+    var data = event.data;
+    if (!data || typeof data !== 'object') return;
+
+    if (event.source === window.parent) {
+      // sandbox-resource-ready: load HTML into inner iframe (scriptSrc/prod mode)
+      if (data.method === 'ui/notifications/sandbox-resource-ready' && data.params) {
+        createInnerFrame(data.params);
+        return;
+      }
+
+      // sunpeak/sandbox-load-src: load URL into inner iframe (src/dev mode)
+      if (data.method === 'sunpeak/sandbox-load-src' && data.params) {
+        createInnerFrameWithSrc(data.params);
+        return;
+      }
+
+      // Handle paint fence. Forward to the inner iframe and wait for its ack.
+      // The inner iframe has a fence responder (injected by the Vite dev page
+      // or embedded in the production HTML). If the ack arrives, relay it to
+      // the host. If not (cross-origin injection failed), fall back to a
+      // timeout-based ack after 150ms.
+      if (data.method === 'sunpeak/fence' && data.params) {
+        var fenceId = data.params.fenceId;
+        var acked = false;
+
+        // Listen for the inner iframe's fence-ack
+        var onAck = function(e) {
+          if (e.source !== innerWindow) return;
+          if (e.data && e.data.method === 'sunpeak/fence-ack' &&
+              e.data.params && e.data.params.fenceId === fenceId) {
+            acked = true;
+            window.removeEventListener('message', onAck);
+            window.parent.postMessage(e.data, '*');
+          }
+        };
+        window.addEventListener('message', onAck);
+
+        // Forward fence to inner iframe
+        if (innerWindow) {
+          try { innerWindow.postMessage(data, '*'); } catch(e) {}
+        }
+
+        // Fallback: if no ack within 150ms (fence responder not available),
+        // ack from the proxy after allowing time for the inner iframe to
+        // process the preceding hostContext change.
+        setTimeout(function() {
+          if (!acked) {
+            window.removeEventListener('message', onAck);
+            window.parent.postMessage({
+              jsonrpc: '2.0',
+              method: 'sunpeak/fence-ack',
+              params: { fenceId: fenceId }
+            }, '*');
+          }
+        }, 150);
+        return;
+      }
+
+      // Forward all other messages to the inner iframe
+      if (innerWindow) {
+        try { innerWindow.postMessage(data, '*'); } catch(e) { /* detached */ }
+      }
+    } else if (innerWindow && event.source === innerWindow) {
+      // Messages from the app -> forward to host
+      try { window.parent.postMessage(data, '*'); } catch(e) { /* detached */ }
+    }
+  });
+
+  function createInnerFrame(params) {
+    if (innerFrame) innerFrame.remove();
+
+    innerFrame = document.createElement('iframe');
+    innerFrame.sandbox = params.sandbox ||
+      'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox';
+    if (params.allow) innerFrame.allow = params.allow;
+    document.body.appendChild(innerFrame);
+    innerWindow = innerFrame.contentWindow;
+
+    var doc = innerFrame.contentDocument;
+    if (doc && params.html) {
+      doc.open();
+      doc.write(params.html);
+      doc.close();
+    }
+  }
+
+  function createInnerFrameWithSrc(params) {
+    if (innerFrame) innerFrame.remove();
+
+    innerFrame = document.createElement('iframe');
+    innerFrame.sandbox =
+      'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox';
+    if (params.allow) innerFrame.allow = params.allow;
+    innerFrame.src = params.src;
+    innerFrame.style.height = '100%';
+
+    if (params.theme) {
+      innerFrame.style.colorScheme = params.theme;
+    }
+
+    innerFrame.addEventListener('load', function() {
+      innerWindow = innerFrame.contentWindow;
+
+      // Inject platform runtime (e.g., mock window.openai for ChatGPT)
+      if (platformScript && innerWindow) {
+        try {
+          var pScript = innerFrame.contentDocument.createElement('script');
+          pScript.textContent = platformScript;
+          innerFrame.contentDocument.head.appendChild(pScript);
+        } catch(e) { /* cross-origin */ }
+      }
+
+      // Inject paint fence responder
+      try {
+        var fenceScript = innerFrame.contentDocument.createElement('script');
+        fenceScript.setAttribute('data-sunpeak-fence', '');
+        fenceScript.textContent = PAINT_FENCE_SCRIPT;
+        innerFrame.contentDocument.head.appendChild(fenceScript);
+      } catch(e) { /* cross-origin */ }
+
+      // Inject background rule
+      if (params.theme) {
+        try {
+          innerFrame.contentDocument.documentElement.style.colorScheme = params.theme;
+          var bgStyle = innerFrame.contentDocument.createElement('style');
+          bgStyle.setAttribute('data-sunpeak-bg', '');
+          bgStyle.textContent = 'html { background-color: var(--color-background-primary, Canvas); }';
+          innerFrame.contentDocument.head.appendChild(bgStyle);
+        } catch(e) { /* cross-origin */ }
+      }
+
+      // Inject style variables
+      if (params.styleVars) {
+        try {
+          var root = innerFrame.contentDocument.documentElement;
+          for (var key in params.styleVars) {
+            if (params.styleVars[key]) root.style.setProperty(key, params.styleVars[key]);
+          }
+        } catch(e) { /* cross-origin */ }
+      }
+
+      innerFrame.style.opacity = '1';
+      innerFrame.style.transition = 'opacity 100ms';
+    });
+
+    innerFrame.style.opacity = '0';
+    document.body.appendChild(innerFrame);
+    innerWindow = innerFrame.contentWindow;
+  }
+
+  var 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}},"*");' +
+    '});}});';
+
+  // Signal readiness to the host
+  setTimeout(function() {
+    window.parent.postMessage({
+      jsonrpc: '2.0',
+      method: 'ui/notifications/sandbox-proxy-ready',
+      params: {}
+    }, '*');
+  }, 0);
+})();
+</script>
+</body>
+</html>`;
+}
+
+/**
+ * Mock OpenAI runtime script — same as mock-openai-runtime.ts MOCK_OPENAI_RUNTIME_SCRIPT.
+ * Duplicated here to avoid TypeScript import in the Node.js dev server.
+ */
+const MOCK_OPENAI_SCRIPT = [
+  'window.openai={',
+  'uploadFile:function(f){console.log("[Simulator] uploadFile:",f.name);',
+  'return Promise.resolve({fileId:"sim_file_"+Date.now()})},',
+  'getFileDownloadUrl:function(p){console.log("[Simulator] getFileDownloadUrl:",p.fileId);',
+  'return Promise.resolve({downloadUrl:"https://simulator.local/files/"+p.fileId})},',
+  'requestModal:function(p){console.log("[Simulator] requestModal:",JSON.stringify(p));',
+  'return Promise.resolve()},',
+  'requestCheckout:function(s){console.log("[Simulator] requestCheckout:",JSON.stringify(s));',
+  'return Promise.resolve({id:"sim_order_"+Date.now(),checkout_session_id:s.id||"sim_session",status:"completed"})},',
+  'requestClose:function(){console.log("[Simulator] requestClose")},',
+  'requestDisplayMode:function(p){console.log("[Simulator] requestDisplayMode:",p.mode);',
+  'return Promise.resolve()},',
+  'sendFollowUpMessage:function(p){console.log("[Simulator] sendFollowUpMessage:",p.prompt)},',
+  'openExternal:function(p){console.log("[Simulator] openExternal:",p.href);window.open(p.href,"_blank")}',
+  '};',
+].join('');

package/bin/sunpeak.js

@@ -104,7 +104,7 @@ Usage:
   sunpeak --version        Show version number
 
   Resources: ${resources.join(', ')} (comma/space separated)
-  Example: sunpeak new my-app "${resources.slice(0, 2).join(',')}"
+  Example: sunpeak new sunpeak-app "${resources.slice(0, 2).join(',')}"
 `);
       }
       break;

package/dist/chatgpt/chatgpt-conversation.d.ts

@@ -11,14 +11,10 @@ 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;
     /** Optional action element rendered in the conversation header (e.g., Run button) */
     headerAction?: React.ReactNode;
+    /** Called when the content container width changes */
+    onContentWidthChange?: (width: number) => void;
 }
 /**
  * Conversation layout that renders children (iframe) at a stable tree position.
@@ -33,5 +29,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, headerAction, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Conversation({ children, screenWidth, displayMode, platform, onRequestDisplayMode, appName, appIcon, userMessage, headerAction, onContentWidthChange, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/chatgpt/globals.css

@@ -151,6 +151,7 @@
       --tw-backdrop-saturate: initial;
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
+      --tw-ease: initial;
     }
   }
 }
@@ -191,6 +192,7 @@
     --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
     --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
     --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+    --ease-out: cubic-bezier(0, 0, .2, 1);
     --animate-spin: spin 1s linear infinite;
     --blur-sm: 8px;
     --default-transition-duration: .15s;
@@ -1847,6 +1849,11 @@
     transition-duration: .2s;
   }
 
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -2037,6 +2044,12 @@
     }
   }
 
+  @media (min-width: 1440px) {
+    .min-\[1440px\]\:max-w-\[48rem\] {
+      max-width: 48rem;
+    }
+  }
+
   @media (min-width: 40rem) {
     .sm\:start-0 {
       inset-inline-start: calc(var(--spacing) * 0);
@@ -2679,6 +2692,11 @@
   inherits: false
 }
 
+@property --tw-ease {
+  syntax: "*";
+  inherits: false
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);

package/dist/chatgpt/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const simulator = require("../simulator-FFNttkqL.cjs");
+const simulator = require("../simulator-Gc6n_fT4.cjs");
 const simulatorUrl = require("../simulator-url-DcSYRl-P.cjs");
 const discovery = require("../discovery-D1gpaVz4.cjs");
 exports.IframeResource = simulator.IframeResource;

package/dist/chatgpt/index.js

@@ -1,4 +1,4 @@
-import { I, M, a, S, T, j, m, n } from "../simulator-D8t-r7HH.js";
+import { I, M, a, S, T, j, m, n } from "../simulator-B-CrMHVs.js";
 import { c } from "../simulator-url-j_XV3EoP.js";
 import { b, a as a2, c as c2, d, e, f, g, h, i, t } from "../discovery-BVqD-JsT.js";
 export {

package/dist/claude/claude-conversation.d.ts

@@ -11,9 +11,10 @@ interface ClaudeConversationProps {
     appName?: string;
     appIcon?: string;
     userMessage?: string;
-    isTransitioning?: boolean;
     /** Optional action element rendered in the conversation header (e.g., Run button) */
     headerAction?: React.ReactNode;
+    /** Called when the content container width changes */
+    onContentWidthChange?: (width: number) => void;
 }
 /**
  * Claude conversation shell — mimics Claude's chat UI chrome.
@@ -21,5 +22,5 @@ interface ClaudeConversationProps {
  * All three display modes (inline, pip, fullscreen) share the same React tree
  * shape so that the iframe never unmounts when switching modes.
  */
-export declare function ClaudeConversation({ children, screenWidth, displayMode, platform, onRequestDisplayMode, appName, appIcon, userMessage, isTransitioning, headerAction, }: ClaudeConversationProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClaudeConversation({ children, screenWidth, displayMode, platform, onRequestDisplayMode, appName, appIcon, userMessage, headerAction, onContentWidthChange, }: ClaudeConversationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/claude/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const simulator = require("../simulator-FFNttkqL.cjs");
+const simulator = require("../simulator-Gc6n_fT4.cjs");
 exports.Simulator = simulator.Simulator;
 //# sourceMappingURL=index.cjs.map

package/dist/claude/index.js

@@ -1,4 +1,4 @@
-import { S } from "../simulator-D8t-r7HH.js";
+import { S } from "../simulator-B-CrMHVs.js";
 export {
   S as Simulator
 };

package/dist/{index-bKBBCBK6.cjs → index-BEWVLFfB.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-const simulator = require("./simulator-FFNttkqL.cjs");
+const simulator = require("./simulator-Gc6n_fT4.cjs");
 const simulatorUrl = require("./simulator-url-DcSYRl-P.cjs");
 const discovery = require("./discovery-D1gpaVz4.cjs");
 const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -25,4 +25,4 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   useThemeContext: simulator.useThemeContext
 }, Symbol.toStringTag, { value: "Module" }));
 exports.index = index;
-//# sourceMappingURL=index-bKBBCBK6.cjs.map
+//# sourceMappingURL=index-BEWVLFfB.cjs.map

package/dist/index-BEWVLFfB.cjs.map

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

package/dist/{index-CX6Z4bED.js → index-C6XYFOmh.js}

@@ -1,4 +1,4 @@
-import { I as IframeResource, M as McpAppHost, a as SCREEN_WIDTHS, S as Simulator, T as ThemeProvider, j as extractResourceCSP, m as resolveServerToolResult, n as useThemeContext } from "./simulator-D8t-r7HH.js";
+import { I as IframeResource, M as McpAppHost, a as SCREEN_WIDTHS, S as Simulator, T as ThemeProvider, j as extractResourceCSP, m as resolveServerToolResult, n as useThemeContext } from "./simulator-B-CrMHVs.js";
 import { c as createSimulatorUrl } from "./simulator-url-j_XV3EoP.js";
 import { b as buildDevSimulations, a as buildResourceMap, c as buildSimulations, d as createResourceExports, e as extractResourceKey, f as extractSimulationKey, g as findResourceDirs, h as findResourceKey, i as getComponentName, t as toPascalCase } from "./discovery-BVqD-JsT.js";
 const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -26,4 +26,4 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
 export {
   index as i
 };
-//# sourceMappingURL=index-CX6Z4bED.js.map
+//# sourceMappingURL=index-C6XYFOmh.js.map

package/dist/index-C6XYFOmh.js.map

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

package/dist/{index-CKabCJyV.cjs → index-D0FsXP3Y.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-const simulator = require("./simulator-FFNttkqL.cjs");
+const simulator = require("./simulator-Gc6n_fT4.cjs");
 const simulatorUrl = require("./simulator-url-DcSYRl-P.cjs");
 const discovery = require("./discovery-D1gpaVz4.cjs");
 const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -37,4 +37,4 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   useThemeContext: simulator.useThemeContext
 }, Symbol.toStringTag, { value: "Module" }));
 exports.index = index;
-//# sourceMappingURL=index-CKabCJyV.cjs.map
+//# sourceMappingURL=index-D0FsXP3Y.cjs.map

package/dist/index-D0FsXP3Y.cjs.map

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

package/dist/{index-B4aC3vjH.js → index-Rg7SWjvl.js}

@@ -1,4 +1,4 @@
-import { I as IframeResource, M as McpAppHost, a as SCREEN_WIDTHS, b as SidebarCheckbox, c as SidebarCollapsibleControl, d as SidebarControl, e as SidebarInput, f as SidebarSelect, g as SidebarTextarea, h as SidebarToggle, i as SimpleSidebar, S as Simulator, T as ThemeProvider, j as extractResourceCSP, k as getHostShell, l as getRegisteredHosts, r as registerHostShell, m as resolveServerToolResult, u as useSimulatorState, n as useThemeContext } from "./simulator-D8t-r7HH.js";
+import { I as IframeResource, M as McpAppHost, a as SCREEN_WIDTHS, b as SidebarCheckbox, c as SidebarCollapsibleControl, d as SidebarControl, e as SidebarInput, f as SidebarSelect, g as SidebarTextarea, h as SidebarToggle, i as SimpleSidebar, S as Simulator, T as ThemeProvider, j as extractResourceCSP, k as getHostShell, l as getRegisteredHosts, r as registerHostShell, m as resolveServerToolResult, u as useSimulatorState, n as useThemeContext } from "./simulator-B-CrMHVs.js";
 import { c as createSimulatorUrl } from "./simulator-url-j_XV3EoP.js";
 import { b as buildDevSimulations, a as buildResourceMap, c as buildSimulations, d as createResourceExports, e as extractResourceKey, f as extractSimulationKey, g as findResourceDirs, h as findResourceKey, i as getComponentName, t as toPascalCase } from "./discovery-BVqD-JsT.js";
 const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -38,4 +38,4 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
 export {
   index as i
 };
-//# sourceMappingURL=index-B4aC3vjH.js.map
+//# sourceMappingURL=index-Rg7SWjvl.js.map

package/dist/index-Rg7SWjvl.js.map

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

package/dist/index.cjs

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const useApp = require("./use-app-D09O2swh.cjs");
 const host_index = require("./host/index.cjs");
-const simulator_index = require("./index-CKabCJyV.cjs");
-const chatgpt_index = require("./index-bKBBCBK6.cjs");
+const simulator_index = require("./index-D0FsXP3Y.cjs");
+const chatgpt_index = require("./index-BEWVLFfB.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const simulator = require("./simulator-FFNttkqL.cjs");
+const simulator = require("./simulator-Gc6n_fT4.cjs");
 const discovery = require("./discovery-D1gpaVz4.cjs");
 const protocol = require("./protocol-DkDHRwOW.cjs");
 function _interopNamespaceDefault(e) {
@@ -177,6 +177,7 @@ function getRegistry$1(app) {
     if (ctx?.styles?.css?.fonts) {
       useApp.TQ(ctx.styles.css.fonts);
     }
+    let debounceTimer = null;
     app.onhostcontextchanged = () => {
       const ctx2 = app.getHostContext();
       if (ctx2?.theme) {
@@ -186,7 +187,11 @@ function getRegistry$1(app) {
       if (ctx2?.styles?.css?.fonts) {
         useApp.TQ(ctx2.styles.css.fonts);
       }
-      for (const fn of subs) fn();
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        debounceTimer = null;
+        for (const fn of subs) fn();
+      }, 50);
     };
   }
   return subs;
@@ -373,7 +378,7 @@ const SafeArea = React.forwardRef(function SafeArea2({ children, style, ...props
   const viewport = useViewport();
   const displayMode = useDisplayMode();
   const isFullscreen = displayMode === "fullscreen";
-  const height = viewport?.height ?? (isFullscreen ? "100dvh" : void 0);
+  const height = isFullscreen ? "100dvh" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -386,7 +391,10 @@ const SafeArea = React.forwardRef(function SafeArea2({ children, style, ...props
         paddingLeft: safeArea.left || void 0,
         paddingRight: safeArea.right || void 0,
         height,
+        // overflow:hidden ensures content doesn't escape the maxHeight boundary,
+        // which also lets apps fill the space with their own scrollable container.
         maxHeight: viewport?.maxHeight,
+        overflow: viewport?.maxHeight != null ? "hidden" : void 0,
         width: viewport?.width,
         maxWidth: viewport?.maxWidth,
         ...style