sunpeak 0.18.9 → 0.18.13

package/dist/inspector/hosts.d.ts

@@ -80,6 +80,18 @@ export interface HostShell {
      * Defaults to ['inline', 'pip', 'fullscreen'] if not specified.
      */
     availableDisplayModes?: McpUiDisplayMode[];
+    /**
+     * Safe area insets per display mode.
+     * When the user switches display modes in the inspector, the safe area
+     * is automatically updated to match (unless the user has manually overridden it).
+     * Extracted from real hosts via the host-sync tool.
+     */
+    safeAreaByDisplayMode?: Partial<Record<McpUiDisplayMode, {
+        top?: number;
+        bottom?: number;
+        left?: number;
+        right?: number;
+    }>>;
     /**
      * CSS containing @font-face rules for the host's custom fonts.
      * Injected into the inspector page when this host is active so the

package/dist/inspector/index.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-9hOWP6kD.cjs");
-const require_inspector = require("../inspector-CTMccsz9.cjs");
+const require_inspector = require("../inspector-8nPV2A-z.cjs");
 const require_inspector_url = require("../inspector-url-C3LTKgXt.cjs");
 const require_discovery = require("../discovery-Clu4uHp1.cjs");
 //#region src/inspector/index.ts

package/dist/inspector/index.js

@@ -1,5 +1,5 @@
 import { r as __exportAll } from "../chunk-D6g4UhsZ.js";
-import { _ as McpAppHost, a as SidebarControl, b as getRegisteredHosts, c as SidebarTextarea, d as ThemeProvider, f as useThemeContext, g as extractResourceCSP, h as IframeResource, i as SidebarCollapsibleControl, l as SidebarToggle, m as useInspectorState, n as resolveServerToolResult, o as SidebarInput, p as useMcpConnection, r as SidebarCheckbox, s as SidebarSelect, t as Inspector, u as SimpleSidebar, v as SCREEN_WIDTHS, x as registerHostShell, y as getHostShell } from "../inspector-DkS75JCk.js";
+import { _ as McpAppHost, a as SidebarControl, b as getRegisteredHosts, c as SidebarTextarea, d as ThemeProvider, f as useThemeContext, g as extractResourceCSP, h as IframeResource, i as SidebarCollapsibleControl, l as SidebarToggle, m as useInspectorState, n as resolveServerToolResult, o as SidebarInput, p as useMcpConnection, r as SidebarCheckbox, s as SidebarSelect, t as Inspector, u as SimpleSidebar, v as SCREEN_WIDTHS, x as registerHostShell, y as getHostShell } from "../inspector-Cdo5BK2D.js";
 import { t as createInspectorUrl } from "../inspector-url-CyQcuBI9.js";
 import { c as toPascalCase, i as findResourceKey, n as extractSimulationKey, r as findResourceDirs, s as getComponentName, t as extractResourceKey } from "../discovery-Cgoegt62.js";
 //#region src/inspector/index.ts

package/dist/{inspector-CTMccsz9.cjs → inspector-8nPV2A-z.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require("./chunk-9hOWP6kD.cjs");
-const require_protocol = require("./protocol-jbxhzcnS.cjs");
+const require_protocol = require("./protocol-C7kTcBr_.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -378,7 +378,7 @@ function Conversation({ children, screenWidth, displayMode, platform, onRequestD
 //#region src/chatgpt/chatgpt-host.ts
 /**
 * ChatGPT host version info — matches what ChatGPT reports via the MCP protocol.
-* Verified against production ChatGPT on 2026-03-19.
+* Verified against production ChatGPT on 2026-03-30.
 */
 var CHATGPT_HOST_INFO = {
 	name: "chatgpt",
@@ -410,6 +410,11 @@ registerHostShell({
 	hostCapabilities: CHATGPT_HOST_CAPABILITIES,
 	userAgent: "chatgpt",
 	styleVariables: { ...DEFAULT_STYLE_VARIABLES },
+	safeAreaByDisplayMode: {
+		inline: {},
+		fullscreen: { bottom: 150 },
+		pip: {}
+	},
 	pageStyles: {
 		"--sim-bg-sidebar": "light-dark(#ffffff, #212121)",
 		"--sim-bg-conversation": "light-dark(#ffffff, #212121)",
@@ -665,7 +670,7 @@ function ClaudeConversation({ children, screenWidth, displayMode, platform, onRe
 //#region src/claude/claude-host.ts
 /**
 * Claude host version info — matches what Claude reports via the MCP protocol.
-* Verified against production Claude on 2026-03-25.
+* Verified against production Claude on 2026-03-30.
 */
 var CLAUDE_HOST_INFO = {
 	name: "Claude",
@@ -673,7 +678,7 @@ var CLAUDE_HOST_INFO = {
 };
 /**
 * Claude host capabilities — matches what Claude reports via the MCP protocol.
-* Verified against production Claude on 2026-03-25.
+* Verified against production Claude on 2026-03-30.
 *
 * Notable: Claude supports downloadFile, updateModelContext.image, and
 * message.text. serverTools and serverResources both report listChanged.
@@ -776,6 +781,15 @@ registerHostShell({
 		"--sim-bg-user-bubble": "light-dark(rgb(240, 238, 230), rgb(20, 20, 19))",
 		"--sim-bg-reply-input": "light-dark(rgb(255, 255, 255), rgb(48, 48, 46))"
 	},
+	safeAreaByDisplayMode: {
+		inline: {},
+		fullscreen: {
+			top: 16,
+			right: 16,
+			bottom: 138,
+			left: 16
+		}
+	},
 	availableDisplayModes: ["inline", "fullscreen"],
 	fontCss: `@font-face {
   font-family: "Anthropic Sans";
@@ -795,12 +809,12 @@ registerHostShell({
 }`
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@modelcontextprotocol+ext-apps@1.3.1_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__react-_cd1fb28fd87e0bddd0a29eba0721855d/node_modules/@modelcontextprotocol/ext-apps/dist/src/app-bridge.js
-var G = "2026-01-26", p = require_protocol.union([require_protocol.literal("light"), require_protocol.literal("dark")]).describe("Color theme preference for the host environment."), D = require_protocol.union([
+//#region ../../node_modules/.pnpm/@modelcontextprotocol+ext-apps@1.3.2_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__react-_38e5f6c50a4ca9cf3f1dffc73a60c951/node_modules/@modelcontextprotocol/ext-apps/dist/src/app-bridge.js
+var G = "2026-01-26", m = require_protocol.union([require_protocol.literal("light"), require_protocol.literal("dark")]).describe("Color theme preference for the host environment."), W = require_protocol.union([
 	require_protocol.literal("inline"),
 	require_protocol.literal("fullscreen"),
 	require_protocol.literal("pip")
-]).describe("Display mode for UI presentation."), IQ = require_protocol.union([
+]).describe("Display mode for UI presentation."), _Q = require_protocol.union([
 	require_protocol.literal("--color-background-primary"),
 	require_protocol.literal("--color-background-secondary"),
 	require_protocol.literal("--color-background-tertiary"),
@@ -877,7 +891,7 @@ var G = "2026-01-26", p = require_protocol.union([require_protocol.literal("ligh
 	require_protocol.literal("--shadow-sm"),
 	require_protocol.literal("--shadow-md"),
 	require_protocol.literal("--shadow-lg")
-]).describe("CSS variable keys available to MCP apps for theming."), AQ = require_protocol.record(IQ.describe(`Style variables for theming MCP apps.
+]).describe("CSS variable keys available to MCP apps for theming."), OQ = require_protocol.record(_Q.describe(`Style variables for theming MCP apps.
 
 Individual style keys are optional - hosts may provide any subset of these values.
 Values are strings containing CSS values (colors, sizes, font stacks, etc.).
@@ -905,7 +919,7 @@ require_protocol.object({ isError: require_protocol.boolean().optional().describ
 var L = require_protocol.object({
 	method: require_protocol.literal("ui/notifications/sandbox-proxy-ready"),
 	params: require_protocol.object({})
-}), j = require_protocol.object({
+}), N = require_protocol.object({
 	connectDomains: require_protocol.array(require_protocol.string()).optional().describe(`Origins for network requests (fetch/XHR/WebSocket).
 
 - Maps to CSP \`connect-src\` directive
@@ -913,7 +927,7 @@ var L = require_protocol.object({
 	resourceDomains: require_protocol.array(require_protocol.string()).optional().describe("Origins for static resources (images, scripts, stylesheets, fonts, media).\n\n- Maps to CSP `img-src`, `script-src`, `style-src`, `font-src`, `media-src` directives\n- Wildcard subdomains supported: `https://*.example.com`\n- Empty or omitted → no network resources (secure default)"),
 	frameDomains: require_protocol.array(require_protocol.string()).optional().describe("Origins for nested iframes.\n\n- Maps to CSP `frame-src` directive\n- Empty or omitted → no nested iframes allowed (`frame-src 'none'`)"),
 	baseUriDomains: require_protocol.array(require_protocol.string()).optional().describe("Allowed base URIs for the document.\n\n- Maps to CSP `base-uri` directive\n- Empty or omitted → only same origin allowed (`base-uri 'self'`)")
-}), E = require_protocol.object({
+}), j = require_protocol.object({
 	camera: require_protocol.object({}).optional().describe("Request camera access.\n\nMaps to Permission Policy `camera` feature."),
 	microphone: require_protocol.object({}).optional().describe("Request microphone access.\n\nMaps to Permission Policy `microphone` feature."),
 	geolocation: require_protocol.object({}).optional().describe("Request geolocation access.\n\nMaps to Permission Policy `geolocation` feature."),
@@ -937,9 +951,9 @@ require_protocol.object({
 	method: require_protocol.literal("ui/notifications/tool-cancelled"),
 	params: require_protocol.object({ reason: require_protocol.string().optional().describe("Optional reason for the cancellation (e.g., \"user action\", \"timeout\").") })
 });
-var c = require_protocol.object({ fonts: require_protocol.string().optional() }), n = require_protocol.object({
-	variables: AQ.optional().describe("CSS variables for theming the app."),
-	css: c.optional().describe("CSS blocks that apps can inject.")
+var p = require_protocol.object({ fonts: require_protocol.string().optional() }), c = require_protocol.object({
+	variables: OQ.optional().describe("CSS variables for theming the app."),
+	css: p.optional().describe("CSS blocks that apps can inject.")
 });
 require_protocol.object({
 	method: require_protocol.literal("ui/resource-teardown"),
@@ -955,7 +969,7 @@ var H = require_protocol.record(require_protocol.string(), require_protocol.unkn
 }), M = require_protocol.object({
 	method: require_protocol.literal("ui/notifications/request-teardown"),
 	params: require_protocol.object({}).optional()
-}), i = require_protocol.object({
+}), n = require_protocol.object({
 	experimental: require_protocol.object({}).optional().describe("Experimental features (structure TBD)."),
 	openLinks: require_protocol.object({}).optional().describe("Host supports opening external URLs."),
 	downloadFile: require_protocol.object({}).optional().describe("Host supports file downloads via ui/download-file."),
@@ -963,22 +977,22 @@ var H = require_protocol.record(require_protocol.string(), require_protocol.unkn
 	serverResources: require_protocol.object({ listChanged: require_protocol.boolean().optional().describe("Host supports resources/list_changed notifications.") }).optional().describe("Host can proxy resource reads to the MCP server."),
 	logging: require_protocol.object({}).optional().describe("Host accepts log messages."),
 	sandbox: require_protocol.object({
-		permissions: E.optional().describe("Permissions granted by the host (camera, microphone, geolocation)."),
-		csp: j.optional().describe("CSP domains approved by the host.")
+		permissions: j.optional().describe("Permissions granted by the host (camera, microphone, geolocation)."),
+		csp: N.optional().describe("CSP domains approved by the host.")
 	}).optional().describe("Sandbox configuration applied by the host."),
 	updateModelContext: O.optional().describe("Host accepts context updates (ui/update-model-context) to be included in the model's context for future turns."),
 	message: O.optional().describe("Host supports receiving content messages (ui/message) from the view.")
-}), l = require_protocol.object({
+}), i = require_protocol.object({
 	experimental: require_protocol.object({}).optional().describe("Experimental features (structure TBD)."),
 	tools: require_protocol.object({ listChanged: require_protocol.boolean().optional().describe("App supports tools/list_changed notifications.") }).optional().describe("App exposes MCP-style tools that the host can call."),
-	availableDisplayModes: require_protocol.array(D).optional().describe("Display modes the app supports.")
+	availableDisplayModes: require_protocol.array(W).optional().describe("Display modes the app supports.")
 }), v = require_protocol.object({
 	method: require_protocol.literal("ui/notifications/initialized"),
 	params: require_protocol.object({}).optional()
 });
 require_protocol.object({
-	csp: j.optional().describe("Content Security Policy configuration for UI resources."),
-	permissions: E.optional().describe("Sandbox permissions requested by the UI resource."),
+	csp: N.optional().describe("Content Security Policy configuration for UI resources."),
+	permissions: j.optional().describe("Sandbox permissions requested by the UI resource."),
 	domain: require_protocol.string().optional().describe(`Dedicated origin for view sandbox.
 
 Useful when views need stable, dedicated origins for OAuth callbacks, CORS policies, or API key allowlists.
@@ -996,15 +1010,15 @@ Boolean requesting whether a visible border and background is provided by the ho
 - \`false\`: request no visible border + background
 - omitted: host decides border`)
 });
-var W = require_protocol.object({
+var E = require_protocol.object({
 	method: require_protocol.literal("ui/request-display-mode"),
-	params: require_protocol.object({ mode: D.describe("The display mode being requested.") })
+	params: require_protocol.object({ mode: W.describe("The display mode being requested.") })
 });
-require_protocol.object({ mode: D.describe("The display mode that was actually set. May differ from requested if not supported.") }).passthrough();
-var r = require_protocol.union([require_protocol.literal("model"), require_protocol.literal("app")]).describe("Tool visibility scope - who can access the tool.");
+require_protocol.object({ mode: W.describe("The display mode that was actually set. May differ from requested if not supported.") }).passthrough();
+var l = require_protocol.union([require_protocol.literal("model"), require_protocol.literal("app")]).describe("Tool visibility scope - who can access the tool.");
 require_protocol.object({
 	resourceUri: require_protocol.string().optional(),
-	visibility: require_protocol.array(r).optional().describe(`Who can access this tool. Default: ["model", "app"]
+	visibility: require_protocol.array(l).optional().describe(`Who can access this tool. Default: ["model", "app"]
 - "model": Tool visible to and callable by the agent
 - "app": Tool callable by the app from this server only`)
 });
@@ -1024,8 +1038,8 @@ require_protocol.object({
 	params: require_protocol.object({
 		html: require_protocol.string().describe("HTML content to load into the inner iframe."),
 		sandbox: require_protocol.string().optional().describe("Optional override for the inner iframe's sandbox attribute."),
-		csp: j.optional().describe("CSP configuration from resource metadata."),
-		permissions: E.optional().describe("Sandbox permissions from resource metadata.")
+		csp: N.optional().describe("CSP configuration from resource metadata."),
+		permissions: j.optional().describe("Sandbox permissions from resource metadata.")
 	})
 });
 require_protocol.object({
@@ -1037,10 +1051,10 @@ var y = require_protocol.object({
 		id: require_protocol.RequestIdSchema.optional().describe("JSON-RPC id of the tools/call request."),
 		tool: require_protocol.ToolSchema.describe("Tool definition including name, inputSchema, etc.")
 	}).optional().describe("Metadata of the tool call that instantiated this App."),
-	theme: p.optional().describe("Current color theme preference."),
-	styles: n.optional().describe("Style configuration for theming the app."),
-	displayMode: D.optional().describe("How the UI is currently displayed."),
-	availableDisplayModes: require_protocol.array(D).optional().describe("Display modes the host supports."),
+	theme: m.optional().describe("Current color theme preference."),
+	styles: c.optional().describe("Style configuration for theming the app."),
+	displayMode: W.optional().describe("How the UI is currently displayed."),
+	availableDisplayModes: require_protocol.array(W).optional().describe("Display modes the host supports."),
 	containerDimensions: require_protocol.union([require_protocol.object({ height: require_protocol.number().describe("Fixed container height in pixels.") }), require_protocol.object({ maxHeight: require_protocol.union([require_protocol.number(), require_protocol._undefined()]).optional().describe("Maximum container height in pixels.") })]).and(require_protocol.union([require_protocol.object({ width: require_protocol.number().describe("Fixed container width in pixels.") }), require_protocol.object({ maxWidth: require_protocol.union([require_protocol.number(), require_protocol._undefined()]).optional().describe("Maximum container width in pixels.") })])).optional().describe(`Container dimensions. Represents the dimensions of the iframe or other
 container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),
 	locale: require_protocol.string().optional().describe("User's language and region preference in BCP 47 format."),
@@ -1076,17 +1090,17 @@ var f = require_protocol.object({
 	method: require_protocol.literal("ui/initialize"),
 	params: require_protocol.object({
 		appInfo: require_protocol.ImplementationSchema.describe("App identification (name and version)."),
-		appCapabilities: l.describe("Features and capabilities this app provides."),
+		appCapabilities: i.describe("Features and capabilities this app provides."),
 		protocolVersion: require_protocol.string().describe("Protocol version this app supports.")
 	})
 });
 require_protocol.object({
 	protocolVersion: require_protocol.string().describe("Negotiated protocol version string (e.g., \"2025-11-21\")."),
 	hostInfo: require_protocol.ImplementationSchema.describe("Host application identification and version."),
-	hostCapabilities: i.describe("Features and capabilities provided by the host."),
+	hostCapabilities: n.describe("Features and capabilities provided by the host."),
 	hostContext: y.describe("Rich context about the host environment.")
 }).passthrough();
-var N = class {
+var D = class {
 	eventTarget;
 	eventSource;
 	messageListener;
@@ -1120,8 +1134,8 @@ var N = class {
 	sessionId;
 	setProtocolVersion;
 };
-var aQ = [G];
-var tQ = class extends require_protocol.Protocol {
+var lQ = [G];
+var rQ = class extends require_protocol.Protocol {
 	_client;
 	_hostInfo;
 	_capabilities;
@@ -1133,9 +1147,9 @@ var tQ = class extends require_protocol.Protocol {
 		this._client = X;
 		this._hostInfo = Y;
 		this._capabilities = Z;
-		this._hostContext = $?.hostContext || {}, this.setRequestHandler(d, (K) => this._oninitialize(K)), this.setRequestHandler(require_protocol.PingRequestSchema, (K, J) => {
-			return this.onping?.(K.params, J), {};
-		}), this.setRequestHandler(W, (K) => {
+		this._hostContext = $?.hostContext || {}, this.setRequestHandler(d, (J) => this._oninitialize(J)), this.setRequestHandler(require_protocol.PingRequestSchema, (J, K) => {
+			return this.onping?.(J.params, K), {};
+		}), this.setRequestHandler(E, (J) => {
 			return { mode: this._hostContext.displayMode ?? "inline" };
 		});
 	}
@@ -1174,7 +1188,7 @@ var tQ = class extends require_protocol.Protocol {
 		this.setNotificationHandler(M, (Y) => X(Y.params));
 	}
 	set onrequestdisplaymode(X) {
-		this.setRequestHandler(W, async (Y, Z) => {
+		this.setRequestHandler(E, async (Y, Z) => {
 			return X(Y.params, Z);
 		});
 	}
@@ -1246,7 +1260,7 @@ var tQ = class extends require_protocol.Protocol {
 	async _oninitialize(X) {
 		let Y = X.params.protocolVersion;
 		return this._appCapabilities = X.params.appCapabilities, this._appInfo = X.params.appInfo, {
-			protocolVersion: aQ.includes(Y) ? Y : G,
+			protocolVersion: lQ.includes(Y) ? Y : G,
 			hostCapabilities: this.getCapabilities(),
 			hostInfo: this._hostInfo,
 			hostContext: this._hostContext
@@ -1255,9 +1269,9 @@ var tQ = class extends require_protocol.Protocol {
 	setHostContext(X) {
 		let Y = {}, Z = !1;
 		for (let $ of Object.keys(X)) {
-			let K = this._hostContext[$], J = X[$];
-			if (sQ(K, J)) continue;
-			Y[$] = J, Z = !0;
+			let J = this._hostContext[$], K = X[$];
+			if (oQ(J, K)) continue;
+			Y[$] = K, Z = !0;
 		}
 		if (Z) this._hostContext = X, this.sendHostContextChange(Y);
 	}
@@ -1347,7 +1361,7 @@ var tQ = class extends require_protocol.Protocol {
 		return super.connect(X);
 	}
 };
-function sQ(X, Y) {
+function oQ(X, Y) {
 	return JSON.stringify(X) === JSON.stringify(Y);
 }
 //#endregion
@@ -1385,7 +1399,7 @@ var McpAppHost = class {
 	constructor(options = {}) {
 		this.options = options;
 		this._prevDisplayMode = options.hostContext?.displayMode;
-		this.bridge = new tQ(null, options.hostInfo ?? DEFAULT_HOST_INFO, options.hostCapabilities ?? DEFAULT_HOST_CAPABILITIES, { hostContext: options.hostContext });
+		this.bridge = new rQ(null, options.hostInfo ?? DEFAULT_HOST_INFO, options.hostCapabilities ?? DEFAULT_HOST_CAPABILITIES, { hostContext: options.hostContext });
 		this.bridge.oninitialized = () => {
 			this._initialized = true;
 			if (this._pendingToolInput) {
@@ -1462,7 +1476,10 @@ var McpAppHost = class {
 			if (this.options.onRequestTeardown) this.options.onRequestTeardown();
 			else console.log("[MCP App] requestTeardown (app requested close)");
 		};
+		let sandboxReadyFired = false;
 		this.bridge.onsandboxready = () => {
+			if (sandboxReadyFired) return;
+			sandboxReadyFired = true;
 			this.options.onSandboxReady?.();
 		};
 	}
@@ -1482,7 +1499,7 @@ var McpAppHost = class {
 			console.log(`%c[MCP ↑]%c app → host: %c${label}`, "color:#6ee7b7", "color:inherit", "color:#93c5fd", data);
 		};
 		window.addEventListener("message", this._messageListener);
-		const transport = new N(contentWindow, contentWindow);
+		const transport = new D(contentWindow, contentWindow);
 		await this.bridge.connect(transport);
 	}
 	/**
@@ -1801,6 +1818,7 @@ iframe { border: none; width: 100%; height: 100%; display: block; }
   });
 
   function createInnerFrame(params) {
+    clearInterval(readyInterval);
     if (innerFrame) innerFrame.remove();
 
     innerFrame = document.createElement('iframe');
@@ -1820,6 +1838,7 @@ iframe { border: none; width: 100%; height: 100%; display: block; }
   }
 
   function createInnerFrameWithSrc(params) {
+    clearInterval(readyInterval);
     if (innerFrame) innerFrame.remove();
 
     innerFrame = document.createElement('iframe');
@@ -1897,9 +1916,20 @@ iframe { border: none; width: 100%; height: 100%; display: block; }
     '});}});';
 
   // Signal to the host that the proxy is ready.
-  // Use setTimeout to ensure the host's PostMessageTransport listener
-  // is set up before we send the ready notification. The srcdoc is parsed
-  // synchronously by the browser, which can race with React's ref callback.
+  // The srcdoc is parsed synchronously by the browser, which can race with
+  // React's ref callback that sets up the PostMessage listener. To handle
+  // this, we send the ready notification repeatedly until the host
+  // acknowledges it (by sending content to load). The interval is cleared
+  // as soon as we receive any message from the host (createInnerFrame or
+  // createInnerFrameWithSrc), or after 10 seconds as a safety limit.
+  var readyInterval = setInterval(function() {
+    window.parent.postMessage({
+      jsonrpc: '2.0',
+      method: 'ui/notifications/sandbox-proxy-ready',
+      params: {}
+    }, '*');
+  }, 200);
+  // Send the first one immediately (next tick)
   setTimeout(function() {
     window.parent.postMessage({
       jsonrpc: '2.0',
@@ -1907,6 +1937,9 @@ iframe { border: none; width: 100%; height: 100%; display: block; }
       params: {}
     }, '*');
   }, 0);
+  // Stop retrying after 10 seconds — if the host hasn't responded by then,
+  // something else is wrong.
+  setTimeout(function() { clearInterval(readyInterval); }, 10000);
 })();
 <\/script>
 </body>
@@ -2516,6 +2549,15 @@ function useInspectorState({ simulations, defaultHost = "chatgpt" }) {
 	(0, react.useEffect)(() => {
 		if (isMobileWidth(screenWidth) && displayMode === "pip") _setDisplayMode("fullscreen");
 	}, [screenWidth, displayMode]);
+	(0, react.useEffect)(() => {
+		const modeInsets = getHostShell(activeHost)?.safeAreaByDisplayMode?.[displayMode];
+		if (modeInsets) setSafeAreaInsets({
+			top: modeInsets.top ?? 0,
+			bottom: modeInsets.bottom ?? 0,
+			left: modeInsets.left ?? 0,
+			right: modeInsets.right ?? 0
+		});
+	}, [displayMode, activeHost]);
 	const handleDisplayModeChange = (mode) => {
 		setDisplayMode(mode);
 	};
@@ -4368,4 +4410,4 @@ Object.defineProperty(exports, "useThemeContext", {
 	}
 });
 
-//# sourceMappingURL=inspector-CTMccsz9.cjs.map
+//# sourceMappingURL=inspector-8nPV2A-z.cjs.map